/* Kisaka & Company — About page (about_us.html). */
/* ===== Kisaka — About page (mockup layout) ===== */
/* About hero: full-viewport photo + overlay. Navbar mirrors home page 1 (transparent over dark). */
body.kisaka-about-page
   {
      --kisaka-about-nav-opaque: #11100d;
   }

.kisaka-about-hero
   {
      position: relative;
      z-index: 1;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      min-height: 100vh;
      min-height: 100svh;
      min-height: 100dvh;
      color: #fff;
      padding: 0;
      overflow: hidden;
      background-color: #080808;
   }

video.kisaka-about-hero__bg
   {
      /* Cover crop; no controls UI — decorative only. */
      object-fit: cover;
   }

.kisaka-about-hero__intro
   {
      max-width: 920px;
   }

.kisaka-about-hero__eyebrow
   {
      margin: 0 0 14px;
      font-family: var(--kisaka-font-accent);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.1em;
      line-height: 1.2;
      text-transform: uppercase;
      color: #CB1F34;
   }

.kisaka-about-hero__intro h1
   {
      margin: 0;
      max-width: 14ch;
      font-size: clamp(2rem, 1.2rem + 3.6vw, 4.25rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -0.035em;
      color: #fff;
   }

.kisaka-about-hero__accent
   {
      color: #CB1F34;
   }

.kisaka-about-hero__lead
   {
      margin: clamp(16px, 2.4vh, 28px) 0 0;
      max-width: 42em;
      font-family: var(--kisaka-font-accent);
      font-size: 1.12rem;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: -0.01em;
      color: rgba(255, 255, 255, 0.92);
   }

@media (max-width: 991px)
   {
      .kisaka-about-hero__content
         {
            padding-top: calc(var(--kisaka-header-h) + 56px);
            padding-bottom: 48px;
         }

      .kisaka-about-hero__intro h1
         {
            max-width: 16ch;
         }

      .kisaka-about-hero__lead
         {
            max-width: none;
         }
   }

@media (prefers-reduced-motion: reduce)
   {
      .kisaka-about-hero__bg
         {
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
         }

      /* Freeze the sunrise loop; poster still paints through the overlay. */
      video.kisaka-about-hero__bg
         {
            display: none;
         }

      .kisaka-about-hero
         {
            background-image: url("../img/about-hero-bg.jpg?v=20260915-uganda");
            background-size: cover;
            background-position: center 35%;
         }
   }

/* Hairline between headline and lead; draws across on load. */
.kisaka-about-hero__rule
   {
      display: block;
      height: 1px;
      margin: clamp(20px, 3vh, 32px) 0 0;
      background: rgba(255, 255, 255, 0.32);
      -webkit-transform-origin: left center;
      transform-origin: left center;
   }

body.kisaka-about-intro-ready .kisaka-about-hero__line[data-from="above"] > .kisaka-about-hero__line-inner,
body.kisaka-about-intro-ready .kisaka-about-hero__eyebrow .kisaka-about-hero__line-inner
   {
      -webkit-transform: translate3d(0, -115%, 0);
      transform: translate3d(0, -115%, 0);
   }

body.kisaka-about-intro-playing .kisaka-about-hero__lead .kisaka-about-hero__line-inner
   {
      -webkit-transition-duration: 1s;
      transition-duration: 1s;
      -webkit-transition-delay: calc(var(--kisaka-about-line, 0) * 70ms);
      transition-delay: calc(var(--kisaka-about-line, 0) * 70ms);
   }

body.kisaka-about-intro-ready .kisaka-about-hero__intro > .is-visible .kisaka-about-hero__line-inner,
body.kisaka-about-intro-ready .kisaka-about-hero__intro > .is-visible .kisaka-about-hero__line[data-from="above"] > .kisaka-about-hero__line-inner
   {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
   }

body.kisaka-about-intro-ready .kisaka-about-hero__rule:not(.is-visible)
   {
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
   }

/* The sunrise drifts in from low right and settles, the way Akaru's discs
   glide into place behind the title. */
body.kisaka-about-intro-ready .kisaka-about-hero:not(.is-visible) .kisaka-about-hero__bg
   {
      opacity: 0;
      -webkit-transform: translate3d(3%, 5%, 0) scale(1.16);
      transform: translate3d(3%, 5%, 0) scale(1.16);
   }

body.kisaka-about-hero-scrubbing .kisaka-about-hero__rule
   {
      -webkit-transform-origin: right center;
      transform-origin: right center;
   }

/* About intro — Comrade-style full-viewport split (text + photo swiper) */
.kisaka-about-intro
   {
      --kisaka-about-intro-accent: var(--kisaka-red);
      --kisaka-about-intro-ink: #080808;
      position: relative;
      z-index: 1;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      min-height: 100vh;
      min-height: 100svh;
      min-height: 100dvh;
      padding: clamp(72px, 10vh, 100px) 0 clamp(48px, 7vh, 80px);
      background: #fff;
      color: var(--kisaka-about-intro-ink);
      box-sizing: border-box;
   }

.kisaka-about-intro__inner
   {
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(20px, 5vw, 72px);
      box-sizing: border-box;
   }

.kisaka-about-intro__grid
   {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      gap: clamp(28px, 4vw, 50px);
   }

@media (min-width: 992px)
   {
      .kisaka-about-intro__grid
         {
            display: grid;
            grid-template-columns: 1fr 1fr;
            -webkit-box-align: stretch;
            -ms-flex-align: stretch;
            align-items: stretch;
            gap: 50px;
         }
   }

.kisaka-about-intro__copy
   {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      min-width: 0;
   }

.kisaka-about-intro__title
   {
      margin: 0;
      font-family: var(--kisaka-font-accent);
      font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: -0.03em;
      color: var(--kisaka-about-intro-ink);
   }

.kisaka-about-intro__accent
   {
      color: var(--kisaka-about-intro-accent);
   }

.kisaka-about-intro__par
   {
      margin: 16px 0 0;
      max-width: 36em;
      font-family: var(--kisaka-font-accent);
      font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
      font-weight: 400;
      line-height: 1.6;
      letter-spacing: -0.01em;
      color: var(--kisaka-about-intro-ink);
   }

.kisaka-about-intro__par:first-of-type
   {
      margin-top: 24px;
   }

.kisaka-about-intro__par--belief
   {
      font-weight: 400;
   }

.kisaka-about-intro__par--belief .kisaka-about-intro__accent
   {
      font-weight: 700;
   }

.kisaka-about-intro__par strong
   {
      font-weight: 700;
   }

.kisaka-about-intro__quote
   {
      margin: 30px 0 0;
      padding: 0 0 0 20px;
      border: none;
      border-left: 3px solid var(--kisaka-about-intro-accent);
      background: transparent;
   }

.kisaka-about-intro__media
   {
      position: relative;
      min-width: 0;
      width: 100%;
   }

.kisaka-about-intro__swiper
   {
      position: relative;
      width: 100%;
      overflow: hidden;
      border-radius: 16px;
   }

.kisaka-about-intro__swiper .swiper-slide
   {
      height: auto;
   }

.kisaka-about-intro__pagination.swiper-pagination
   {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 14px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      width: auto !important;
      padding: 0 16px;
      margin: 0;
      z-index: 2;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
   }

.kisaka-about-intro__pagination .swiper-pagination-bullet
   {
      -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
      flex: 1 1 0;
      width: auto;
      height: 6px;
      margin: 0 4px !important;
      border-radius: 30px;
      background: #d2d2d2;
      opacity: 1;
      -webkit-transition: background-color 0.25s ease, -webkit-transform 0.25s ease;
      transition: background-color 0.25s ease, -webkit-transform 0.25s ease;
      -o-transition: background-color 0.25s ease, transform 0.25s ease;
      transition: background-color 0.25s ease, transform 0.25s ease;
      transition: background-color 0.25s ease, transform 0.25s ease, -webkit-transform 0.25s ease;
   }

.kisaka-about-intro__pagination .swiper-pagination-bullet:first-child
   {
      margin-left: 0 !important;
   }

.kisaka-about-intro__pagination .swiper-pagination-bullet:last-child
   {
      margin-right: 0 !important;
   }

.kisaka-about-intro__pagination .swiper-pagination-bullet-active
   {
      background: var(--kisaka-about-intro-accent);
   }

.kisaka-about-intro__pagination .swiper-pagination-bullet:active
   {
      -webkit-transform: scale(0.97);
      -ms-transform: scale(0.97);
      transform: scale(0.97);
   }

@media (max-width: 991px)
   {
      .kisaka-about-intro
         {
            min-height: 100vh;
            min-height: 100svh;
            padding-top: clamp(56px, 8vh, 80px);
            padding-bottom: clamp(40px, 6vh, 64px);
         }

      .kisaka-about-intro__title
         {
            font-size: clamp(2.25rem, 8vw, 3.25rem);
            letter-spacing: -0.035em;
         }
   }

@media (prefers-reduced-motion: reduce)
   {
      .kisaka-about-intro__pagination .swiper-pagination-bullet
         {
            -webkit-transition: none;
            -o-transition: none;
            transition: none;
         }
   }

/* About Kisaka: in and out (js/kisaka-about-intro.js for the timed parts).

   In — timed, not scroll-linked: tied to the scroll it ran inside the fastest
   half-second of the panel move and was lost in the travel. The script
   starts it 55% into the move (Mission's share), so it lands with the page:
   0ms     the photo wipes open from the bottom, its image settling from 1.14
   80ms    the title rises out of its masks a word at a time, like the hero
   300ms   the three paragraphs rise, 80ms apart
   560ms   the quote's red bar draws down, then the quote rises on it
   is-armed is the waiting state (no transition, so arming is instant);
   is-entering carries the entrance timing.

   Out, back up to the hero — timed: everything drops the way it came and
   the photo closes, quote first, 320ms (is-leaving, same values as armed).

   Out, down to Mission — scroll-linked: this section holds still under
   Mission's curtain (--kisaka-about-curtain-mission-and-vision), so each part
   lifts away just before the rising edge reaches it, the quote first and
   the title last (--kisaka-intro-o in about_us.html). That one reads,
   because nothing else is moving.

   The hidden states only exist while the script runs; without it, or where
   the curtain timeline is missing, the section simply sits there shown. */
.kisaka-about-intro__word
   {
      display: inline-block;
      overflow: hidden;
      vertical-align: top;

      /* Room for descenders inside the clip, without moving the layout. */
      padding-bottom: 0.14em;
      margin-bottom: -0.14em;
   }

.kisaka-about-intro__word > span
   {
      display: inline-block;
   }

.kisaka-about-intro__quote
   {
      position: relative;
   }

.kisaka-about-intro.is-scripted .kisaka-about-intro__quote
   {
      border-left-color: transparent;
   }

.kisaka-about-intro.is-scripted .kisaka-about-intro__quote::before
   {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: -3px;
      width: 3px;
      background: var(--kisaka-about-intro-accent);
      transform-origin: 50% 0;
   }

/* Waiting, and leaving (the same place, reached with the exit timing). */
.kisaka-about-intro:is(.is-armed, .is-leaving) .kisaka-about-intro__word > span
   {
      transform: translate3d(0, 110%, 0);
   }

.kisaka-about-intro:is(.is-armed,
.is-leaving) .kisaka-about-intro__par,
.kisaka-about-intro:is(.is-armed,
.is-leaving) .kisaka-about-intro__quote p
   {
      opacity: 0;
      transform: translate3d(0, 40px, 0);
   }

.kisaka-about-intro:is(.is-armed, .is-leaving) .kisaka-about-intro__quote::before
   {
      transform: scaleY(0);
   }

.kisaka-about-intro:is(.is-armed, .is-leaving) .kisaka-about-intro__swiper
   {
      clip-path: inset(100% 0 0 0 round 16px);
   }

.kisaka-about-intro:is(.is-armed, .is-leaving) .kisaka-about-intro__swiper img
   {
      transform: scale(1.14);
   }

.kisaka-about-intro:is(.is-armed, .is-leaving) .kisaka-about-intro__pagination
   {
      opacity: 0;
   }

.kisaka-about-intro.is-entering .kisaka-about-intro__swiper img
   {
      transition: transform 1600ms var(--kisaka-ease-out-expo);
   }

.kisaka-about-intro.is-entering .kisaka-about-intro__word > span
   {
      transition: transform 1100ms var(--kisaka-ease-out-expo);
      transition-delay: calc(80ms + var(--kisaka-intro-w, 0) * 90ms);
   }

.kisaka-about-intro.is-entering .kisaka-about-intro__quote::before
   {
      transition: transform 700ms var(--kisaka-ease-out-expo) 560ms;
   }

.kisaka-about-intro.is-entering .kisaka-about-intro__quote p
   {
      transition: opacity 600ms var(--kisaka-ease-out) 640ms, transform 1000ms var(--kisaka-ease-out-expo) 640ms;
   }

.kisaka-about-intro.is-leaving .kisaka-about-intro__quote::before
   {
      transition: transform 320ms var(--kisaka-ease-in-out);
   }

.kisaka-about-intro.is-leaving .kisaka-about-intro__word > span
   {
      transition: transform 360ms var(--kisaka-ease-in-out) 120ms;
   }

.kisaka-about-intro.is-leaving .kisaka-about-intro__swiper img
   {
      transition: transform 420ms var(--kisaka-ease-in-out);
   }

/* Reduced motion: the same beats as fades, nothing travels. */
@media (prefers-reduced-motion: reduce)
   {
      .kisaka-about-intro:is(.is-armed,
      .is-leaving) :is( .kisaka-about-intro__word > span,
      .kisaka-about-intro__par,
      .kisaka-about-intro__quote p,
      .kisaka-about-intro__swiper img )
         {
            opacity: 0;
            transform: none;
         }

      .kisaka-about-intro:is(.is-armed, .is-leaving) .kisaka-about-intro__quote::before
         {
            transform: none;
            opacity: 0;
         }

      .kisaka-about-intro:is(.is-armed, .is-leaving) .kisaka-about-intro__swiper
         {
            clip-path: none;
            opacity: 0;
         }
   }

/* Out, down to Mission: scroll-linked on Mission's curtain. */
@supports (animation-timeline: view())
   {
      @media (prefers-reduced-motion: no-preference)
         {
            .kisaka-about-intro [data-kisaka-intro-part]
               {
                  animation: kisaka-intro-part-out linear forwards;
                  animation-timing-function: var(--kisaka-ease-in-out);
                  animation-timeline: --kisaka-about-curtain-mission-and-vision;
                  animation-range: entry calc(var(--kisaka-intro-o, 0) * 9%) entry calc(24% + var(--kisaka-intro-o, 0) * 9%);
               }

            .kisaka-about-intro [data-kisaka-intro-media]
               {
                  animation: kisaka-intro-media-out linear forwards;
                  animation-timing-function: var(--kisaka-ease-in-out);
                  animation-timeline: --kisaka-about-curtain-mission-and-vision;
                  animation-range: entry 5% entry 50%;
               }
         }
   }

/* About mission — one black stage, two statements.
   Cloned from Sofi's "measures the impact" stage: a near-black shape behind
   centred display type, dim #333 letters that fill to white under the
   scroll, lines that rise in from 85%, a statement that swells to 115% as it
   lets go. The shape is the Kisaka chevron instead of Sofi's pill. After the
   vision the whole stage fades to white, Core Values' ground, so the seam
   below disappears. js/kisaka-about-mission.js drives every value inline;
   without it both statements sit stacked and fully lit. */
.kisaka-about-mission
   {
      --kisaka-about-mission-bg: #000;
      --kisaka-about-mission-shape: #121212;
      --kisaka-about-mission-dim: #333;
      --kisaka-about-mission-ink: #fff;
      position: relative;
      z-index: 1;
      background: var(--kisaka-about-mission-bg);
      color: var(--kisaka-about-mission-ink);
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
   }

.kisaka-about-mission__stage
   {
      position: relative;
      isolation: isolate;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      gap: clamp(56px, 9vh, 96px);
      min-height: 100vh;
      min-height: 100svh;
      padding: clamp(96px, 14vh, 140px) clamp(20px, 5vw, 52px);
      overflow: hidden;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
   }

.kisaka-about-mission__block
   {
      position: relative;
      width: 100%;
      max-width: 15.5em;
      margin: 0 auto;
      font-size: min(clamp(2rem, 0.9rem + 4.1vw, 5rem), 7.4vh);
      text-align: center;
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
   }

.kisaka-about-mission__block[data-side="vision"]
   {
      max-width: 13em;
   }

.kisaka-about-mission__label
   {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      gap: 14px;
      margin: 0 0 clamp(20px, 3.4vh, 36px);
      font-family: var(--kisaka-font-family);
      font-size: 0.8125rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.62);
   }

.kisaka-about-mission__statement
   {
      margin: 0;
      font-family: var(--kisaka-font-accent);
      font-size: 1em;
      font-weight: 500;
      line-height: 1;
      letter-spacing: -0.02em;
      color: var(--kisaka-about-mission-ink);
   }

.kisaka-about-mission__line
   {
      display: block;
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
   }

.kisaka-about-mission__char
   {
      display: inline-block;
   }

.kisaka-about-mission.is-live .kisaka-about-mission__statement
   {
      color: var(--kisaka-about-mission-dim);
   }

/* Below the panel page the section is as tall as the scrub and the stage
   sticks while the reader scrolls through it. */
@media not all and (min-width: 1200px) and (min-height: 780px)
   {
      .kisaka-about-mission.is-live
         {
            height: 460vh;
            height: 460svh;
         }

      .kisaka-about-mission.is-live .kisaka-about-mission__stage
         {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            height: 100vh;
            height: 100svh;
         }
   }

@media (max-width: 767px)
   {
      .kisaka-about-mission__block
         {
            font-size: clamp(1.75rem, 7.6vw, 2.5rem);
            max-width: 12em;
         }

      .kisaka-about-mission__block[data-side="vision"]
         {
            max-width: 11em;
         }

      .kisaka-about-mission__statement
         {
            line-height: 1.04;
         }
   }

/* What we stand for — a strip of poster tiles, after akaru.fr/expertises.
   A big title, a square-tile strip bled edge to edge with a 7px seam, a
   small uppercase note under it. Each tile is one principle in its own
   colour, name set across the top like a wordmark, its mark as the picture.
   js/kisaka-about-stand.js lays the tiles out on a loop and drives drag,
   inertia and snap; without it the strip is a plain horizontal scroller. */
.kisaka-about-stand
   {
      --kisaka-about-stand-ink: #0e0e0e;
      --kisaka-about-stand-gap: 7px;
      --kisaka-about-stand-tile: min(462px, 52vh, 78vw);
      --kisaka-about-stand-edge: clamp(20px, 2.1vw, 32px);
      position: relative;
      z-index: 1;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      min-height: 100vh;
      min-height: 100svh;
      min-height: 100dvh;
      padding: clamp(88px, 12vh, 120px) 0 clamp(24px, 3.4vh, 40px);
      background: #fff;
      color: var(--kisaka-about-stand-ink);
      overflow: hidden;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
   }

.kisaka-about-stand__head
   {
      padding: 0 var(--kisaka-about-stand-edge);
      margin-bottom: clamp(24px, 4.6vh, 56px);
   }

.kisaka-about-stand__eyebrow
   {
      margin: 0 0 clamp(10px, 1.6vh, 16px);
      font-family: var(--kisaka-font-family);
      font-size: 0.75rem;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--kisaka-red);
   }

.kisaka-about-stand__title
   {
      margin: 0;
      font-family: var(--kisaka-font-accent);
      font-size: min(clamp(2.5rem, 1rem + 5.2vw, 6.3rem), 9vh);
      font-weight: 400;
      line-height: 0.95;
      letter-spacing: -0.035em;
      color: var(--kisaka-about-stand-ink);
   }

/* The strip. Unscripted it scrolls sideways on its own. */
.kisaka-about-stand__strip
   {
      position: relative;
      outline: none;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
   }

.kisaka-about-stand__strip::-webkit-scrollbar
   {
      display: none;
   }

.kisaka-about-stand__strip:focus-visible
   {
      -webkit-box-shadow: inset 0 0 0 2px var(--kisaka-red);
      box-shadow: inset 0 0 0 2px var(--kisaka-red);
   }

.kisaka-about-stand__track
   {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: var(--kisaka-about-stand-gap);
      margin: 0;
      padding: 0;
      list-style: none;
   }

.kisaka-about-stand__slide
   {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 var(--kisaka-about-stand-tile);
      flex: 0 0 var(--kisaka-about-stand-tile);
      width: var(--kisaka-about-stand-tile);
      height: var(--kisaka-about-stand-tile);

      /* The tile's type and padding are sized off this box (cqw). */
      container-type: inline-size;
   }

/* Scripted: the slides sit on a loop the script positions. */
.kisaka-about-stand__strip.is-live
   {
      overflow: hidden;
      height: var(--kisaka-about-stand-tile);
      cursor: -webkit-grab;
      cursor: grab;
      touch-action: pan-y;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
   }

.kisaka-about-stand__strip.is-live.is-dragging
   {
      cursor: -webkit-grabbing;
      cursor: grabbing;
   }

.kisaka-about-stand__strip.is-live .kisaka-about-stand__track
   {
      position: relative;
      display: block;
      height: 100%;
   }

.kisaka-about-stand__strip.is-live .kisaka-about-stand__slide
   {
      position: absolute;
      top: 0;
      left: 0;
      will-change: transform;
   }

/* A tile: one principle as a poster. Sizes follow the tile, not the page. */
.kisaka-about-stand__tile
   {
      --tile-bg: var(--kisaka-red);
      --tile-ink: #fff;
      position: relative;
      display: grid;
      grid-template-rows: auto 1fr auto;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      justify-items: center;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 7.5cqw 7cqw 6.5cqw;
      background: var(--tile-bg);
      color: var(--tile-ink);
      overflow: hidden;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
   }

.kisaka-about-stand__tile[data-theme="clay"]
   {
      --tile-bg: #c99c90;
      --tile-ink: #321a16;
   }

.kisaka-about-stand__tile[data-theme="ink"]
   {
      --tile-bg: #140809;
      --tile-ink: #f3e9e4;
   }

.kisaka-about-stand__tile[data-theme="sand"]
   {
      --tile-bg: #c9bc9f;
      --tile-ink: #3d2b25;
   }

.kisaka-about-stand__tile[data-theme="mauve"]
   {
      --tile-bg: #c3b2bf;
      --tile-ink: #342436;
   }

.kisaka-about-stand__tile[data-theme="wine"]
   {
      --tile-bg: #3d121a;
      --tile-ink: #f3dcdc;
   }

.kisaka-about-stand__tile[data-theme="rose"]
   {
      --tile-bg: #d4ada5;
      --tile-ink: #3a2029;
   }

.kisaka-about-stand__tile[data-theme="sage"]
   {
      --tile-bg: #b9b79f;
      --tile-ink: #2a2f1b;
   }

.kisaka-about-stand__name
   {
      grid-row: 1;
      max-width: 76%;
      margin: 0;
      font-family: var(--kisaka-font-family);
      font-size: max(13px, 5.2cqw);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: 0.22em;
      text-align: center;
      text-transform: uppercase;
      color: var(--tile-ink);
   }

.kisaka-about-stand__mark
   {
      grid-row: 2;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      width: 42cqw;
      height: 42cqw;
      margin: 0;
      color: var(--tile-ink);
      pointer-events: none;
   }

.kisaka-about-stand__mark .icofont
   {
      font-size: 36cqw;
      line-height: 1;
   }

.kisaka-about-stand__text
   {
      grid-row: 3;
      max-width: 30em;
      margin: 0;
      font-family: var(--kisaka-font-accent);
      font-size: max(12px, 3.3cqw);
      font-weight: 400;
      line-height: 1.35;
      text-align: center;
      text-wrap: pretty;
      color: var(--tile-ink);
   }

.kisaka-about-stand__foot
   {
      padding: clamp(18px, 3.2vh, 32px) var(--kisaka-about-stand-edge) 0;
   }

.kisaka-about-stand__note
   {
      margin: 0;
      font-family: var(--kisaka-font-accent);
      font-size: 0.6875rem;
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: -0.02em;
      text-transform: uppercase;
      color: var(--kisaka-about-stand-ink);
   }

.kisaka-about-stand__note
   {
      max-width: 17rem;
   }

/* Entrance, for the seam above: the mission hands over a white screen, so
   nothing rises. The title inks in letter by letter from near-white, the
   tiles glide in from the right along the strip, the small print follows.
   js/kisaka-about-stand.js sets is-armed (held blank) and is-in (played). */
.kisaka-about-stand__char
   {
      display: inline-block;
      -webkit-transition: color 0.55s var(--kisaka-ease-out);
      transition: color 0.55s var(--kisaka-ease-out);
      -webkit-transition-delay: calc(var(--i, 0) * 22ms);
      transition-delay: calc(var(--i, 0) * 22ms);
   }

.kisaka-about-stand.is-armed:not(.is-in) .kisaka-about-stand__char
   {
      color: #ececec;
   }

.kisaka-about-stand.is-leaving .kisaka-about-stand__char
   {
      color: #ececec;
      -webkit-transition-duration: 0.22s;
      transition-duration: 0.22s;
      -webkit-transition-delay: calc(var(--i, 0) * 6ms);
      transition-delay: calc(var(--i, 0) * 6ms);
   }

@media (max-width: 767px)
   {
      .kisaka-about-stand
         {
            --kisaka-about-stand-tile: min(78vw, 360px);
         }
   }

/* Our Approach — Kisaka Quality System (services orbit around one quality core) */
.kisaka-about-system
   {
      --kisaka-about-system-accent: var(--kisaka-red);
      --kisaka-about-system-ink: #080808;

      /* White, the same ground as Core Values above, so the two read as one
         page and that seam is a plain scroll (js/kisaka-about-panels.js). The
         blue-grey moved down to the founder's note, whose curtain keeps an edge. */
      --kisaka-about-system-bg: #fff;
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100vh;
      min-height: 100svh;
      min-height: 100dvh;
      padding: clamp(72px, 10vh, 100px) 0 clamp(48px, 7vh, 80px);
      background: var(--kisaka-about-system-bg);
      color: var(--kisaka-about-system-ink);
      box-sizing: border-box;
      overflow: hidden;
   }

.kisaka-about-system__inner
   {
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(20px, 5vw, 72px);
      box-sizing: border-box;
   }

.kisaka-about-system__grid
   {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(32px, 4vw, 56px);
      align-items: center;
   }

@media (min-width: 1080px)
   {
      .kisaka-about-system__grid
         {
            grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
         }

      .kisaka-qs
         {
            grid-column: 1;
            grid-row: 1;
         }

      .kisaka-about-system__copy
         {
            grid-column: 2;
            grid-row: 1;
         }
   }

.kisaka-about-system__copy
   {
      min-width: 0;
   }

.kisaka-about-system__eyebrow
   {
      margin: 0 0 14px;
      font-family: var(--kisaka-font-accent);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--kisaka-about-system-accent);
   }

.kisaka-about-system__title
   {
      margin: 0 0 clamp(18px, 3vh, 28px);
      font-family: "Newsreader", Georgia, "Times New Roman", serif;
      font-optical-sizing: auto;
      font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
      font-weight: 600;
      line-height: 1.12;
      letter-spacing: -0.03em;
      color: var(--kisaka-about-system-ink);
   }

.kisaka-about-system__accent
   {
      color: var(--kisaka-about-system-accent);
   }

.kisaka-about-system__name
   {
      margin: 0 0 14px;
      font-family: var(--kisaka-font-accent);
      font-size: clamp(1.15rem, 1rem + 0.45vw, 1.5rem);
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.02em;
      color: var(--kisaka-about-system-ink);
   }

.kisaka-about-system__body
   {
      margin: 0 0 clamp(32px, 6vh, 60px);
      max-width: 46rem;
      font-family: var(--kisaka-font-accent);
      font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
      font-weight: 400;
      line-height: 1.65;
      letter-spacing: 0;
      color: #2b3038;
   }

/* The four words that name the components of the model beside this copy */
.kisaka-about-system__body strong
   {
      font-weight: 600;
      color: var(--kisaka-about-system-ink);
      transition: color 220ms ease-out;
   }

/* The highlight travels with the walk. Each phrase is filled with an
   ink-red-ink strip clipped to its letters: the red drains out of the old
   phrase toward the next one, then sweeps into the next one from the side
   the walk came from. Wrapped phrases sweep line by line because the strip
   is sliced across the fragments. */
@supports ((-webkit-background-clip: text) or (background-clip: text))
   {
      .kisaka-about-system[data-qs-ready] .kisaka-about-system__mark
         {
            color: inherit;
            background-image: linear-gradient(90deg, currentColor 0 30%, var(--kisaka-about-system-accent) 36% 64%, currentColor 70% 100%);
            background-repeat: no-repeat;
            background-size: 400% 100%;
            background-position: 100% 0;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: none;
         }

      .kisaka-about-system[data-qs-ready] .kisaka-about-system__mark[data-qs-side="before"]
         {
            background-position: 0% 0;
         }

      .kisaka-about-system[data-qs-ready] .kisaka-about-system__mark[data-qs-active="true"]
         {
            background-position: 50% 0;
            transition: background-position 420ms var(--kisaka-ease-in-out) 80ms;
         }

      /* Only the phrase being left moves on its way out. The rest change
         sides instantly, while they are fully ink, so a jump across the
         drawing never flashes red through the phrases in between. */
      .kisaka-about-system[data-qs-ready] .kisaka-about-system__mark[data-qs-leaving="true"]
         {
            transition: background-position 220ms var(--kisaka-ease-out);
         }

      @media (prefers-reduced-motion: reduce)
         {
            .kisaka-about-system[data-qs-ready] .kisaka-about-system__mark[data-qs-active="true"],
            .kisaka-about-system[data-qs-ready] .kisaka-about-system__mark[data-qs-leaving="true"]
               {
                  transition: none;
               }
         }
   }

.kisaka-about-system__mark[data-qs-active="true"],
.kisaka-about-system__mark[data-qs-active="true"] strong
   {
      color: var(--kisaka-about-system-accent);
   }

.kisaka-about-system__outcomes li[data-qs-active="true"]
   {
      color: var(--kisaka-about-system-accent);
   }

/* Points at the model, so the copy and the drawing read as one thought */
.kisaka-about-system__body--lead-in
   {
      margin-top: calc(clamp(32px, 6vh, 60px) * -0.55);
      color: #5a616b;
   }

/* One row of parallel lines: repeated lead word in ink, payoff word in accent */
.kisaka-about-system__outcomes
   {
      display: flex;
      flex-wrap: nowrap;
      gap: 10px 14px;
      margin: 0;
      padding: 0;
      list-style: none;
      container-type: inline-size;
   }

/* Only phones are too narrow for one row: there, stack the lines rather than shrink them */
@media (max-width: 639px)
   {
      .kisaka-about-system__outcomes
         {
            flex-direction: column;
            flex-wrap: wrap;
            gap: 4px;
         }
   }

@media (min-width: 1200px)
   {
      .kisaka-about-system__outcomes
         {
            justify-content: space-between;
         }
   }

@media (max-width: 1199px)
   {
      .kisaka-about-system
         {
            min-height: 0;
            padding-top: clamp(56px, 8vh, 80px);
            padding-bottom: clamp(40px, 6vh, 64px);
         }
   }

/* Our Approach, drawn as the system the copy describes.

   The row along the top is one engagement: the work arrives, runs through the
   quality controls, and leaves as confidence. The plane beneath it is the four
   things that system rests on, wired up on one shared bus rather than a line
   each, because they hold the controls together or not at all.

   This section is light, so the schematic is drawn as a drafting sheet in ink.
   The token block below is the whole difference between this treatment and the
   dark one .kisaka-eng uses; nothing further down names a colour directly.

   Markup: about_us.html; behaviour: js/kisaka-quality-system.js */
.kisaka-qs
   {
      --kisaka-qs-sheet: #eef2f7;
      --kisaka-qs-node: #fff;
      --kisaka-qs-grid: rgba(10, 16, 26, 0.032);
      --kisaka-qs-rule: rgba(10, 16, 26, 0.13);
      --kisaka-qs-wire: rgba(10, 16, 26, 0.26);
      --kisaka-qs-name: rgba(10, 16, 26, 0.88);
      --kisaka-qs-mute: rgba(10, 16, 26, 0.46);
      --kisaka-qs-faint: rgba(10, 16, 26, 0.3);
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
      overflow: hidden;
      border: 1px solid var(--kisaka-qs-rule);
      background: var(--kisaka-qs-sheet);
   }

/* A drafting grid, barely there: it says "schematic" without being a texture. */
.kisaka-qs::before
   {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: linear-gradient(var(--kisaka-qs-grid) 1px, transparent 1px), linear-gradient(90deg, var(--kisaka-qs-grid) 1px, transparent 1px);
      background-size: 44px 44px;
   }

.kisaka-qs__head, .kisaka-qs__figure, .kisaka-qs__list, .kisaka-qs__foot
   {
      position: relative;
   }

/* --- Head: what the drawing is, and which of its two planes is which ------ */
.kisaka-qs__head
   {
      display: flex;
      flex-wrap: nowrap;
      align-items: baseline;
      justify-content: space-between;
      flex: 0 0 auto;
      gap: 8px 20px;
      padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 24px);
      box-sizing: border-box;
   }

.kisaka-qs__head-title
   {
      margin: 0;
      font-family: var(--kisaka-font-accent);
      font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.125rem);
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: -0.02em;
      color: var(--kisaka-qs-name);
   }

.kisaka-qs__legend
   {
      display: flex;
      flex-wrap: nowrap;
      flex: 0 0 auto;
      gap: 6px 16px;
      margin: 0;
      padding: 0;
      list-style: none;
   }

/* The keys are the wires themselves. The zones are already named inside the
   drawing, so the legend reads the line grammar rather than repeating them. */
.kisaka-qs__legend li::before
   {
      content: "";
      width: 16px;
      border-top: 1px solid var(--kisaka-qs-wire);
   }

.kisaka-qs__legend li[data-wire="support"]::before
   {
      border-top-style: dashed;
   }

/* --- The drawing: one engagement over the four things holding it up ------- */
.kisaka-qs__figure
   {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      margin: 0;
      padding: 0 clamp(10px, 1.2vw, 18px) clamp(12px, 1.4vw, 18px);
   }

.kisaka-qs__svg
   {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 920 / 512;
      margin: 0 auto;
   }

/* Zones name the two planes. Dashed, because they are boundaries, not boxes. */
.kisaka-qs__zone
   {
      fill: rgba(255, 255, 255, 0.5);
      stroke: var(--kisaka-qs-rule);
      stroke-width: 1;
      stroke-dasharray: 4 5;
   }

.kisaka-qs__zone-label
   {
      font-family: var(--kisaka-font-accent);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      text-anchor: middle;
      fill: var(--kisaka-qs-faint);
   }

/* The support wiring is dashed and carries no arrow: it holds the controls up,
   it does not feed them anything. Only the bus riser points. */
.kisaka-qs__edge--support
   {
      stroke-dasharray: 4 4;
      marker-end: none;
   }

.kisaka-qs__edge--riser
   {
      marker-end: url(#kisaka-qs-arrow);
   }

.kisaka-qs__edge[data-lit="true"]
   {
      stroke: var(--kisaka-red);
      marker-end: url(#kisaka-qs-arrow-lit);
   }

.kisaka-qs__edge--support[data-lit="true"]
   {
      marker-end: none;
   }

.kisaka-qs__edge--riser[data-lit="true"]
   {
      marker-end: url(#kisaka-qs-arrow-lit);
   }

/* The wiring draws itself in on arrival; without the script it is simply
   already there, so the diagram never depends on the reveal to be readable. */
[data-qs-ready] .kisaka-qs__edge
   {
      opacity: 0;
   }

[data-qs-visible] .kisaka-qs__edge
   {
      opacity: 1;
   }

.kisaka-qs__edge:nth-child(1)
   {
      --kisaka-qs-delay: 60ms;
   }

.kisaka-qs__edge:nth-child(2)
   {
      --kisaka-qs-delay: 130ms;
   }

.kisaka-qs__edge:nth-child(3)
   {
      --kisaka-qs-delay: 200ms;
   }

.kisaka-qs__edge:nth-child(4)
   {
      --kisaka-qs-delay: 270ms;
   }

.kisaka-qs__edge:nth-child(5)
   {
      --kisaka-qs-delay: 340ms;
   }

.kisaka-qs__edge:nth-child(6)
   {
      --kisaka-qs-delay: 410ms;
   }

.kisaka-qs__edge:nth-child(7)
   {
      --kisaka-qs-delay: 480ms;
   }

.kisaka-qs__edge:nth-child(8)
   {
      --kisaka-qs-delay: 550ms;
   }

.kisaka-qs__edge:nth-child(9)
   {
      --kisaka-qs-delay: 620ms;
   }

.kisaka-qs__edge:nth-child(10)
   {
      --kisaka-qs-delay: 690ms;
   }

.kisaka-qs__edge:nth-child(11)
   {
      --kisaka-qs-delay: 760ms;
   }

[data-qs-visible] .kisaka-qs__flow--spine
   {
      opacity: 0.5;
      animation: kisaka-qs-flow 2600ms linear infinite;
   }

.kisaka-qs__flow[data-lit="true"]
   {
      stroke: var(--kisaka-red-glow);
      opacity: 0.9;
      animation: kisaka-qs-flow 1150ms linear infinite;
   }

.kisaka-qs__node
   {
      outline: none;
   }

[data-qs-ready] .kisaka-qs__node
   {
      cursor: pointer;
   }

/* The brief is the one box that is not ours. */
.kisaka-qs__node--entry .kisaka-qs__node-frame
   {
      fill: none;
      stroke-dasharray: 5 5;
   }

.kisaka-qs__node-icon circle[data-fill]
   {
      fill: var(--kisaka-qs-icon, var(--kisaka-qs-faint));
      stroke: none;
      transition: fill 220ms ease-out;
   }

.kisaka-qs__node--entry
   {
      --kisaka-qs-icon: rgba(10, 16, 26, 0.3);
   }

.kisaka-qs__node--support
   {
      --kisaka-qs-icon: rgba(10, 16, 26, 0.44);
   }

.kisaka-qs__node--core
   {
      --kisaka-qs-icon: rgba(10, 16, 26, 0.66);
   }

.kisaka-qs__node--outcome
   {
      --kisaka-qs-icon: rgba(10, 16, 26, 0.82);
   }

.kisaka-qs__node[data-lit="true"] .kisaka-qs__node-frame
   {
      stroke: rgba(10, 16, 26, 0.38);
   }

.kisaka-qs__node[data-inspect="true"]
   {
      --kisaka-qs-icon: var(--kisaka-red);
   }

.kisaka-qs__node[data-inspect="true"] .kisaka-qs__node-frame
   {
      fill: #fdf3f4;
      stroke: var(--kisaka-red);
   }

.kisaka-qs__node--entry[data-inspect="true"] .kisaka-qs__node-frame
   {
      fill: none;
   }

.kisaka-qs__node[data-inspect="true"] .kisaka-qs__node-badge
   {
      stroke: rgba(203, 31, 52, 0.4);
   }

.kisaka-qs__node[data-inspect="true"] .kisaka-qs__node-tag
   {
      fill: var(--kisaka-red);
   }

.kisaka-qs__node[data-inspect="true"] .kisaka-qs__chip-frame
   {
      stroke: rgba(203, 31, 52, 0.28);
   }

.kisaka-qs__chip[data-lit="true"] .kisaka-qs__chip-frame
   {
      fill: #fdf3f4;
      stroke: var(--kisaka-red);
   }

.kisaka-qs__chip[data-lit="true"] .kisaka-qs__chip-label
   {
      fill: var(--kisaka-red);
   }

.kisaka-qs__node:focus-visible .kisaka-qs__node-frame
   {
      stroke: var(--kisaka-red);
   }

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

/* The three outcomes are bars, not boxes: they are what the system emits, and
   they read left to right like the lines of copy they repeat. */
.kisaka-qs__node--outcome .kisaka-qs__node-name
   {
      font-size: 14px;
      text-anchor: start;
   }

/* --- Foot: reserved for the selected component, never grows or shrinks --- */
.kisaka-qs__foot
   {
      flex: 0 0 9.5rem;
      height: 9.5rem;
      padding: 14px clamp(16px, 1.8vw, 24px);
      border-top: 1px solid var(--kisaka-qs-rule);
      box-sizing: border-box;
      overflow: hidden;
   }

/* Name, note, and principles share one fixed well. Copy swaps in place. */
.kisaka-qs__caption
   {
      display: grid;
      grid-template-rows: auto auto auto;
      align-content: start;
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      font-family: var(--kisaka-font-accent);
   }

.kisaka-qs__caption-label
   {
      display: block;
      margin: 0;
      font-size: 0.6875rem;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--kisaka-red);
   }

.kisaka-qs__caption-text
   {
      display: -webkit-box;
      margin: 5px 0 0;
      max-width: 100%;
      font-size: clamp(0.8125rem, 0.79rem + 0.15vw, 0.9375rem);
      line-height: 1.45;
      text-wrap: pretty;
      color: var(--kisaka-qs-mute);
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      line-clamp: 3;
   }

/* The principles the old panel listed, kept as small caps on one measure so
   the foot holds them without turning into a second paragraph. */
.kisaka-qs__caption-meta
   {
      display: -webkit-box;
      margin: 8px 0 0;
      max-width: 100%;
      font-size: 0.6875rem;
      font-weight: 500;
      line-height: 1.55;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--kisaka-qs-faint);
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
   }

.kisaka-qs__caption-meta span
   {
      transition: color 220ms ease-out, opacity 220ms ease-out;
   }

.kisaka-qs__caption-meta[data-filter="true"] span
   {
      opacity: 0.38;
   }

.kisaka-qs__caption-meta[data-filter="true"] span[data-lit="true"]
   {
      opacity: 1;
      color: var(--kisaka-red);
   }

/* Below the drawing's width the same components are read, not drawn.
   Only one of the two is in the accessibility tree at a time. */
.kisaka-qs__list
   {
      display: none;
      margin: 0;
      padding: 0 clamp(16px, 4vw, 24px) clamp(16px, 4vw, 22px);
      list-style: none;
      font-family: var(--kisaka-font-accent);
   }

.kisaka-qs__list-item
   {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: baseline;
      gap: 3px 14px;
      padding: 14px 0;
      border-bottom: 1px solid var(--kisaka-qs-rule);
   }

.kisaka-qs__list-item:last-child
   {
      padding-bottom: 0;
      border-bottom: 0;
   }

.kisaka-qs__list-name
   {
      font-size: 1.0625rem;
      letter-spacing: -0.025em;
      color: var(--kisaka-qs-name);
   }

.kisaka-qs__list-badge
   {
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--kisaka-qs-faint);
   }

.kisaka-qs__list-chips
   {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 4px;
   }

.kisaka-qs__list-note
   {
      grid-column: 1 / -1;
      font-size: 0.875rem;
      line-height: 1.5;
      text-wrap: pretty;
      color: var(--kisaka-qs-mute);
   }

@media (max-width: 991px)
   {
      .kisaka-qs__figure, .kisaka-qs__foot
         {
            display: none;
         }

      /* The key explains wires that are no longer drawn. */
      .kisaka-qs__legend
         {
            display: none;
         }

      .kisaka-qs__list
         {
            display: block;
         }

      .kisaka-qs__head
         {
            border-bottom: 1px solid var(--kisaka-qs-rule);
         }
   }

@media (prefers-reduced-motion: reduce)
   {
      .kisaka-qs__edge
         {
            --kisaka-qs-delay: 0ms;
         }

      /* The travelling dash carries nothing the red wire does not already say. */
      [data-qs-visible] .kisaka-qs__flow--spine, .kisaka-qs__flow[data-lit="true"]
         {
            animation: none;
            stroke-dashoffset: 0;
         }

      [data-qs-visible] .kisaka-qs__flow--spine
         {
            opacity: 0;
         }
   }

/* Founder's note: full-viewport letter directly under Our Approach */
.kisaka-about-founder
   {
      --kisaka-about-founder-accent: var(--kisaka-red);
      --kisaka-about-founder-ink: #080808;
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100vh;
      min-height: 100svh;
      min-height: 100dvh;
      padding: clamp(72px, 10vh, 100px) 0 clamp(48px, 7vh, 80px);
      background: #dce2ea;
      color: var(--kisaka-about-founder-ink);
      box-sizing: border-box;
      overflow-x: hidden;
      overflow-y: visible;
   }

.kisaka-about-founder__inner
   {
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(20px, 5vw, 72px);
      box-sizing: border-box;
   }

.kisaka-about-founder__grid
   {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(40px, 6vw, 96px);
      align-items: center;
   }

@media (min-width: 992px)
   {
      .kisaka-about-founder__grid
         {
            grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
         }
   }

.kisaka-about-founder__copy
   {
      min-width: 0;
   }

.kisaka-about-founder__eyebrow
   {
      margin: 0 0 clamp(18px, 3vh, 28px);
      font-family: var(--kisaka-font-accent);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--kisaka-about-founder-accent);
   }

/* Oversized glyph; fixed short height stops its tall line box from pushing the heading down */
.kisaka-about-founder__mark
   {
      display: block;
      height: 0.5em;
      margin: 0 0 clamp(8px, 1.5vh, 16px);
      font-family: Georgia, 'Times New Roman', serif;
      font-size: clamp(5rem, 4rem + 4vw, 8rem);
      line-height: 0.9;
      color: var(--kisaka-about-founder-accent);
   }

.kisaka-about-founder__title
   {
      margin: 0 0 clamp(18px, 3vh, 28px);
      max-width: 36rem;
      font-family: var(--kisaka-font-accent);
      font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
      font-weight: 600;
      line-height: 1.18;
      letter-spacing: -0.03em;
      color: var(--kisaka-about-founder-ink);
   }

.kisaka-about-founder__accent
   {
      color: var(--kisaka-about-founder-accent);
   }

.kisaka-about-founder__letter
   {
      max-width: 38rem;
   }

.kisaka-about-founder__letter p:last-child
   {
      margin-bottom: 0;
   }

.kisaka-about-founder__sign
   {
      margin-top: clamp(28px, 5vh, 48px);
      padding-top: 20px;
      border-top: 2px solid var(--kisaka-about-founder-accent);
      width: max-content;
      max-width: 100%;
   }

.kisaka-about-founder__name
   {
      margin: 0 0 4px;
      font-family: var(--kisaka-font-accent);
      font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: -0.01em;
      color: var(--kisaka-about-founder-ink);
   }

.kisaka-about-founder__role
   {
      margin: 0;
      font-family: var(--kisaka-font-accent);
      font-size: 0.9rem;
      font-weight: 500;
      line-height: 1.4;
      color: #5a616b;
   }

/* Portrait with an offset red block behind it */
.kisaka-about-founder__media
   {
      position: relative;
      width: 100%;
      max-width: 480px;
      margin: 0 auto;
   }

.kisaka-about-founder__media::before
   {
      content: "";
      position: absolute;
      inset: clamp(16px, 2.5vw, 28px) calc(clamp(16px, 2.5vw, 28px) * -1) calc(clamp(16px, 2.5vw, 28px) * -1) clamp(16px, 2.5vw, 28px);
      border-radius: 20px;
      background: var(--kisaka-about-founder-accent);
      opacity: 0.12;
   }

@media (max-width: 991px)
   {
      .kisaka-about-founder
         {
            min-height: 0;
            padding-top: clamp(56px, 8vh, 80px);
            padding-bottom: clamp(56px, 8vh, 80px);
         }

      /* Photo leads on stacked layouts */
      .kisaka-about-founder__media
         {
            order: -1;
            max-width: 360px;
            margin-right: auto;
            margin-left: 0;
         }
   }

/* Meet the Team — Comrade-style dark portrait carousel (no tab toggle) */
.kisaka-about-meet-team
   {
      --kisaka-meet-team-bg: #151515;
      --kisaka-meet-team-fg: #fff;
      --kisaka-meet-team-card-h: 550px;
      --kisaka-meet-team-card-radius: 20px;
      position: relative;
      z-index: 1;
      padding: clamp(72px, 10vh, 100px) 0;
      background: var(--kisaka-meet-team-bg);
      color: var(--kisaka-meet-team-fg);
      overflow: hidden;
   }

.kisaka-about-meet-team__inner
   {
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
      box-sizing: border-box;
   }

.kisaka-about-meet-team__title
   {
      margin: 0 auto clamp(40px, 6vw, 64px);
      max-width: 798px;
      padding: 0 clamp(20px, 5vw, 72px);
      text-align: center;
      font-family: var(--kisaka-font-accent);
      font-size: clamp(1.85rem, 1.2rem + 2.6vw, 4.5rem);
      font-weight: 600;
      line-height: 1.15;
      letter-spacing: -0.04em;
      color: var(--kisaka-meet-team-fg);
   }

.kisaka-about-meet-team__rail
   {
      --kisaka-meet-rail-inset: clamp(20px, 5vw, 72px);
      --kisaka-meet-card-w: min(411px, 78vw);
      display: flex;
      gap: 16px;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      padding: 4px var(--kisaka-meet-rail-inset) 8px;
      scroll-padding-left: var(--kisaka-meet-rail-inset);
      scroll-padding-right: var(--kisaka-meet-rail-inset);
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      -webkit-scroll-snap-type: x mandatory;
      -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      -ms-overflow-style: none;
      outline: none;
      box-sizing: border-box;
   }

.kisaka-about-meet-team__rail::-webkit-scrollbar
   {
      width: 0;
      height: 0;
      display: none;
   }

.kisaka-about-meet-team__rail:focus-visible
   {
      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28);
   }

@media (min-width: 768px)
   {
      .kisaka-about-meet-team__rail
         {
            gap: 20px;
         }
   }

@media (min-width: 1200px)
   {
      .kisaka-about-meet-team__rail
         {
            gap: 24px;
         }
   }

.kisaka-about-meet-team__card
   {
      --meet-focus: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      flex: 0 0 min(411px, 78vw);
      width: min(411px, 78vw);
      height: var(--kisaka-meet-team-card-h);
      padding: 22px 22px 24px;
      border-radius: var(--kisaka-meet-team-card-radius);
      overflow: hidden;
      isolation: isolate;
      box-sizing: border-box;
      color: var(--kisaka-meet-team-fg);
      background: #121212;
      scroll-snap-align: start;
      scroll-snap-stop: always;
   }

.kisaka-about-meet-team__card::before
   {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient( to top, #000 0%, rgba(0, 0, 0, 0.92) 26%, rgba(0, 0, 0, 0.58) 48%, rgba(0, 0, 0, 0.2) 68%, transparent 82% );
      pointer-events: none;
   }

.kisaka-about-meet-team__card::after
   {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      border-radius: inherit;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
      pointer-events: none;
   }

.kisaka-about-meet-team__pic--placeholder
   {
      filter: none;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
      background: radial-gradient(ellipse 70% 48% at 50% 22%, rgba(255, 255, 255, 0.07) 0%, transparent 58%), radial-gradient(ellipse 90% 70% at 50% 110%, rgba(203, 31, 52, 0.16) 0%, transparent 55%), linear-gradient(180deg, #2a2a2a 0%, #161616 48%, #0e0e0e 100%);
   }

.kisaka-about-meet-team__who
   {
      min-width: 0;
      display: flex;
      flex-direction: column;
      row-gap: 6px;
   }

.kisaka-about-meet-team__name, .kisaka-about-meet-team__pos
   {
      margin: 0;
      font-family: var(--kisaka-font-accent);
      color: var(--kisaka-meet-team-fg);
   }

.kisaka-about-meet-team__name
   {
      width: fit-content;
      max-width: 100%;
      font-family: "Newsreader", Georgia, "Times New Roman", serif;
      font-optical-sizing: auto;
      font-size: clamp(1.2rem, 1.05rem + 0.45vw, 1.5rem);
      font-weight: 500;
      line-height: 1.12;
      letter-spacing: -0.01em;
      text-wrap: pretty;
   }

.kisaka-about-meet-team__pos
   {
      font-size: 0.6875rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--kisaka-red);
   }

.kisaka-about-meet-team__links
   {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
   }

.kisaka-about-meet-team__link i, .kisaka-about-meet-team__link i::before
   {
      color: inherit;
   }

.kisaka-about-meet-team__mail
   {
      display: block;
      width: 17px;
      height: 17px;
      flex-shrink: 0;
   }

.kisaka-about-meet-team__link:hover, .kisaka-about-meet-team__link:focus-visible
   {
      background: none;
      color: var(--kisaka-red);
      text-decoration: none;
   }

.kisaka-about-meet-team__link:hover i,
.kisaka-about-meet-team__link:focus-visible i,
.kisaka-about-meet-team__link:hover i::before,
.kisaka-about-meet-team__link:focus-visible i::before
   {
      color: var(--kisaka-red);
   }

.kisaka-about-meet-team__link:active
   {
      -webkit-transform: scale(0.97);
      -ms-transform: scale(0.97);
      transform: scale(0.97);
   }

@media (prefers-reduced-motion: reduce)
   {
      .kisaka-about-meet-team__link:active
         {
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
         }
   }

@media (max-width: 767px)
   {
      .kisaka-about-meet-team
         {
            --kisaka-meet-team-card-h: min(72vw, 480px);
            padding: clamp(56px, 8vh, 80px) 0;
         }

      .kisaka-about-meet-team__card
         {
            padding: 22px;
         }

      .kisaka-about-meet-team__meta
         {
            gap: 12px;
         }

      .kisaka-about-meet-team__link
         {
            min-height: 32px;
            font-size: 16px;
         }
   }

.kisaka-about-meet-team__info
   {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(36px, 5vw, 64px);
      align-items: start;
      margin-top: clamp(64px, 9vh, 100px);
      padding: 0 clamp(20px, 5vw, 72px);
      box-sizing: border-box;
   }

@media (min-width: 992px)
   {
      .kisaka-about-meet-team__info
         {
            grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
            grid-template-rows: auto auto;
            align-items: start;
            row-gap: clamp(20px, 2.4vw, 32px);
         }

      .kisaka-about-meet-team__info-text
         {
            grid-column: 1;
            grid-row: 1;
            display: flex;
            flex-direction: column;
            align-self: stretch;
            padding-top: 0;
            min-height: 0;
         }

      /* Both columns are held to the same height and both fill it: the rail's
         last rule and the diagram's bottom edge are then the same line, whichever
         of the two happened to be the taller. The drawing takes up the slack in
         its own column, so nothing in the rail has to be squeezed to get there. */
      .kisaka-about-meet-team__info-look
         {
            grid-column: 2;
            grid-row: 1;
            align-self: stretch;
            display: flex;
            flex-direction: column;
            min-height: 0;
         }

      .kisaka-about-meet-team__info-look > .kisaka-eng
         {
            flex: 1 1 auto;
            min-height: 0;
         }

      .kisaka-about-meet-team__info-look .kisaka-eng__figure
         {
            flex: 1 1 auto;
            min-height: 0;
         }

      .kisaka-about-meet-team__join
         {
            grid-column: 1 / -1;
            grid-row: 2;
            justify-self: stretch;
         }

      .kisaka-eng__rail-wrap, .kisaka-eng__rail
         {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            min-height: 0;
         }

      .kisaka-eng__step
         {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            min-height: 0;
         }

      .kisaka-eng__step-btn
         {
            flex: 1 1 auto;
         }
   }

@media (min-width: 1440px)
   {
      .kisaka-about-meet-team__info
         {
            grid-template-columns: 480px minmax(0, 1fr);
         }
   }

.kisaka-about-meet-team__info-eyebrow,
.kisaka-about-meet-team__info-title,
.kisaka-about-meet-team__info-lede
   {
      flex-shrink: 0;
   }

.kisaka-about-meet-team__info-title
   {
      margin: 0 0 20px;
      font-family: var(--kisaka-font-family);
      font-size: clamp(1.75rem, 1.25rem + 1.9vw, 3rem);
      font-weight: 600;
      line-height: 1.08;
      letter-spacing: -0.035em;
      text-wrap: balance;
      color: var(--kisaka-meet-team-fg);
   }

.kisaka-about-meet-team__info-lede
   {
      margin: 0;
      max-width: 34ch;
      font-family: var(--kisaka-font-accent);
      font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
      font-weight: 400;
      line-height: 1.6;
      letter-spacing: -0.005em;
      color: rgba(255, 255, 255, 0.6);
   }

/* Who you get, drawn as the system it is rather than priced as a list. The
   rail on the left is the engagement read as four moves; the diagram beside it
   is the same four moves read as a circuit, which is what makes the heading's
   claim visible — one hire fills one box of it, and the rest of the wiring is
   what an engagement buys.
   Markup: about_us.html; behaviour: js/kisaka-engagement-stack.js */
.kisaka-about-meet-team__info-look
   {
      position: relative;
      width: 100%;
      box-sizing: border-box;
   }

.kisaka-about-meet-team__info-eyebrow
   {
      margin: 0 0 clamp(10px, 1.2vw, 16px);
      font-family: var(--kisaka-font-accent);
      font-size: 0.75rem;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.42);
   }

/* --- The rail: four moves, set as a schedule ---------------------------- */
/* The spine is the only thing on this page that reports scroll position, so
   it is a measure rather than an element arriving: it genuinely starts at
   nothing and grows a quarter at a time. */
.kisaka-eng__rail-wrap
   {
      position: relative;
      margin-top: clamp(22px, 2.8vw, 36px);
      padding-left: clamp(14px, 1.6vw, 20px);
   }

.kisaka-eng__rail
   {
      margin: 0;
      padding: 0;
      list-style: none;
      border-top: 1px solid rgba(255, 255, 255, 0.16);
   }

.kisaka-eng__step
   {
      border-bottom: 1px solid rgba(255, 255, 255, 0.09);
   }

.kisaka-eng__step-btn
   {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 4px;
      width: 100%;
      padding: clamp(12px, 1.3vw, 18px) 0;
      border: 0;
      background: none;
      text-align: left;
      font-family: var(--kisaka-font-accent);
      color: inherit;
      cursor: default;
      touch-action: manipulation;
   }

[data-eng-ready] .kisaka-eng__step-btn
   {
      cursor: pointer;
   }

.kisaka-eng__step-name
   {
      font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.375rem);
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: -0.03em;
      color: var(--kisaka-meet-team-fg);
   }

.kisaka-eng__step-btn[data-active="true"] .kisaka-eng__step-index
   {
      color: var(--kisaka-red-glow);
   }

.kisaka-eng__step-btn[data-active="true"] .kisaka-eng__step-note
   {
      color: rgba(255, 255, 255, 0.76);
   }

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

/* --- The diagram: one engagement, eight positions ----------------------- */
/* The frame is sized for the drawing, then held there. Caption copy swaps as
   roles are selected; the box must not grow or shrink with those lines. */
.kisaka-eng
   {
      position: relative;
      display: flex;
      flex-direction: column;
      flex: 0 0 auto;
      width: 100%;
      height: auto;
      box-sizing: border-box;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: #0e0e0e;
   }

/* A drafting grid, barely there: it says "schematic" without being a texture. */
.kisaka-eng::before
   {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
      background-size: 44px 44px;
   }

.kisaka-eng__head, .kisaka-eng__figure, .kisaka-eng__list, .kisaka-eng__foot
   {
      position: relative;
   }

.kisaka-eng__head
   {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: 6px 20px;
      padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 24px);
   }

.kisaka-eng__head-title
   {
      margin: 0;
      font-family: var(--kisaka-font-accent);
      font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.125rem);
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: -0.02em;
      color: var(--kisaka-meet-team-fg);
   }

.kisaka-eng__head-meta
   {
      margin: 0;
      font-family: var(--kisaka-font-accent);
      font-size: 0.6875rem;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.3);
   }

.kisaka-eng__figure
   {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      margin: 0;
      padding: 0 clamp(10px, 1.2vw, 18px) clamp(12px, 1.4vw, 18px);
   }

.kisaka-eng__svg
   {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 860 / 470;
      margin: 0 auto;
   }

/* Zones name the two planes the engagement answers to: the review above it and
   the specialists beside it. Dashed, because they are boundaries, not boxes. */
.kisaka-eng__zone
   {
      fill: rgba(255, 255, 255, 0.014);
      stroke: rgba(255, 255, 255, 0.1);
      stroke-width: 1;
      stroke-dasharray: 4 5;
   }

.kisaka-eng__zone-label
   {
      font-family: var(--kisaka-font-accent);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      text-anchor: middle;
      fill: rgba(255, 255, 255, 0.26);
   }

.kisaka-eng__edge--both
   {
      marker-start: url(#kisaka-eng-arrow);
   }

.kisaka-eng__edge[data-lit="true"]
   {
      stroke: var(--kisaka-red-glow);
      marker-end: url(#kisaka-eng-arrow-lit);
   }

.kisaka-eng__edge--both[data-lit="true"]
   {
      marker-start: url(#kisaka-eng-arrow-lit);
   }

/* The wiring draws itself in on arrival; without the script it is simply
   already there, so the diagram never depends on the reveal to be readable. */
[data-eng-ready] .kisaka-eng__edge
   {
      opacity: 0;
   }

[data-eng-visible] .kisaka-eng__edge
   {
      opacity: 1;
   }

.kisaka-eng__flow[data-lit="true"]
   {
      opacity: 0.85;
      animation: kisaka-eng-flow 1150ms linear infinite;
   }

.kisaka-eng__edge:nth-child(1)
   {
      --kisaka-eng-delay: 60ms;
   }

.kisaka-eng__edge:nth-child(2)
   {
      --kisaka-eng-delay: 130ms;
   }

.kisaka-eng__edge:nth-child(3)
   {
      --kisaka-eng-delay: 200ms;
   }

.kisaka-eng__edge:nth-child(4)
   {
      --kisaka-eng-delay: 270ms;
   }

.kisaka-eng__edge:nth-child(5)
   {
      --kisaka-eng-delay: 340ms;
   }

.kisaka-eng__edge:nth-child(6)
   {
      --kisaka-eng-delay: 410ms;
   }

.kisaka-eng__edge:nth-child(7)
   {
      --kisaka-eng-delay: 480ms;
   }

.kisaka-eng__edge:nth-child(8)
   {
      --kisaka-eng-delay: 550ms;
   }

.kisaka-eng__node
   {
      outline: none;
   }

[data-eng-ready] .kisaka-eng__node
   {
      cursor: pointer;
   }

/* The client is the one box that is not us. */
.kisaka-eng__node--entry .kisaka-eng__node-frame
   {
      fill: rgba(255, 255, 255, 0.02);
      stroke-dasharray: 5 5;
   }

.kisaka-eng__node[data-lit="true"] .kisaka-eng__node-frame
   {
      stroke: rgba(255, 255, 255, 0.34);
   }

.kisaka-eng__node[data-lit="true"] .kisaka-eng__node-name
   {
      fill: var(--kisaka-meet-team-fg);
   }

.kisaka-eng__node[data-inspect="true"] .kisaka-eng__node-frame
   {
      fill: #1b1012;
      stroke: var(--kisaka-red);
   }

.kisaka-eng__node[data-inspect="true"] .kisaka-eng__node-badge
   {
      stroke: rgba(232, 72, 92, 0.42);
   }

.kisaka-eng__node[data-inspect="true"] .kisaka-eng__node-tag
   {
      fill: var(--kisaka-red-glow);
   }

.kisaka-eng__node:focus-visible .kisaka-eng__node-frame
   {
      stroke: var(--kisaka-red);
   }

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

.kisaka-eng__foot
   {
      display: block;
      padding: clamp(13px, 1.5vw, 18px) clamp(16px, 1.8vw, 24px);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      box-sizing: border-box;
   }

.kisaka-eng__caption
   {
      margin: 0;
      max-width: 48ch;
      min-height: 5.25rem;
      font-family: var(--kisaka-font-accent);
   }

.kisaka-eng__caption-label
   {
      display: block;
      font-size: 0.6875rem;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--kisaka-red-glow);
   }

.kisaka-eng__caption-text
   {
      display: -webkit-box;
      margin-top: 7px;
      font-size: clamp(0.8125rem, 0.79rem + 0.15vw, 0.9375rem);
      line-height: 1.5;
      text-wrap: pretty;
      color: rgba(255, 255, 255, 0.6);
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      line-clamp: 3;
   }

/* Below the diagram's width the same eight positions are read, not drawn.
   Only one of the two is in the accessibility tree at a time. */
.kisaka-eng__list
   {
      display: none;
      margin: 0;
      padding: 0 clamp(16px, 4vw, 24px) clamp(16px, 4vw, 22px);
      list-style: none;
      font-family: var(--kisaka-font-accent);
   }

.kisaka-eng__list-item
   {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: baseline;
      gap: 3px 14px;
      padding: 14px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.09);
   }

.kisaka-eng__list-item:last-child
   {
      padding-bottom: 0;
      border-bottom: 0;
   }

.kisaka-eng__list-name
   {
      font-size: 1.0625rem;
      letter-spacing: -0.025em;
      color: var(--kisaka-meet-team-fg);
   }

.kisaka-eng__list-badge
   {
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.3);
   }

.kisaka-eng__list-note
   {
      grid-column: 1 / -1;
      font-size: 0.875rem;
      line-height: 1.5;
      text-wrap: pretty;
      color: rgba(255, 255, 255, 0.46);
   }

@media (max-width: 991px)
   {
      .kisaka-eng__figure, .kisaka-eng__foot
         {
            display: none;
         }

      .kisaka-eng__list
         {
            display: block;
         }

      .kisaka-eng__head
         {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
   }

@media (prefers-reduced-motion: reduce)
   {
      .kisaka-eng__edge
         {
            --kisaka-eng-delay: 0ms;
         }

      /* The travelling dash carries nothing the red wire does not already say. */
      .kisaka-eng__flow[data-lit="true"]
         {
            animation: none;
            opacity: 0;
         }
   }

@media (prefers-contrast: more)
   {
      .kisaka-eng__rail
         {
            border-top-color: rgba(255, 255, 255, 0.5);
         }

      .kisaka-eng__step, .kisaka-eng__list-item
         {
            border-bottom-color: rgba(255, 255, 255, 0.32);
         }

      .kisaka-about-meet-team__info-lede,
      .kisaka-eng__step-note,
      .kisaka-eng__caption-text,
      .kisaka-eng__list-note
         {
            color: rgba(255, 255, 255, 0.86);
         }

      .kisaka-eng__step-index, .kisaka-eng__list-badge, .kisaka-eng__head-meta
         {
            color: rgba(255, 255, 255, 0.7);
         }

      .kisaka-eng__zone-label
         {
            fill: rgba(255, 255, 255, 0.6);
         }

      .kisaka-eng__node-frame
         {
            stroke: rgba(255, 255, 255, 0.4);
         }

      .kisaka-eng__node-name
         {
            fill: #fff;
         }

      .kisaka-eng__node-tag
         {
            fill: rgba(255, 255, 255, 0.72);
         }

      .kisaka-eng__edge
         {
            stroke: rgba(255, 255, 255, 0.45);
         }
   }

/* Join our team is the action. The heading is the link; the flying arrow
   is the same one the footer uses, so the way out of this page is already known. */
.kisaka-about-meet-team__join
   {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      padding: 0;
      border: 0;
      text-align: center;
      box-sizing: border-box;
   }

.kisaka-about-meet-team__join-arrow
   {
      position: relative;
      display: inline-block;
      width: 0.62em;
      height: 0.62em;
      flex: none;
      overflow: hidden;
      font-size: clamp(1.5rem, 1.28rem + 0.7vw, 1.875rem);
      color: var(--kisaka-red);
   }

.kisaka-about-meet-team__join-link:hover .kisaka-about-meet-team__join-title,
.kisaka-about-meet-team__join-link:focus-visible .kisaka-about-meet-team__join-title
   {
      color: #fff;
   }

.kisaka-about-meet-team__join-link:hover .kisaka-about-meet-team__join-accent,
.kisaka-about-meet-team__join-link:focus-visible .kisaka-about-meet-team__join-accent
   {
      color: var(--kisaka-red-glow);
   }

.kisaka-about-meet-team__join-link:focus-visible
   {
      outline: 2px solid var(--kisaka-red);
      outline-offset: 4px;
   }

.kisaka-about-meet-team__join-intro
   {
      margin: 10px 0 0;
      max-width: 38ch;
      font-family: var(--kisaka-font-accent);
      font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.03125rem);
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0;
      color: rgba(255, 255, 255, 0.64);
   }

@media (prefers-contrast: more)
   {
      .kisaka-about-meet-team__join-intro
         {
            color: rgba(255, 255, 255, 0.86);
         }
   }

/* --- Entrance: nothing on either screen arrives as a block -------------- */
/* Every piece has a slot in reading order (--i, counted by
   js/kisaka-about-team-enter.js) and comes in on its own beat. On the first
   screen the title rises out of a mask a word at a time, then the roster
   arrives as one line: it slides in from beyond the right edge of the screen
   with Jobra's card at its head and each card trailing the one before it
   into its slot, runs a little past the mark and settles back, the photo a
   touch behind the frame; then the name, role and links settle into each.
   On the second screen
   the statement, the four moves, the drawing's boxes and the invitation
   follow the same order; the wiring between the boxes draws itself in as it
   already did (data-eng-visible, above). The script holds a screen blank
   (is-armed) until it is in view, then plays it (is-in); without the script
   nothing is hidden, and is-instant shows a screen already open at load. */
.kisaka-about-meet-team__panel
   {
      --kisaka-team-step: 60ms;
      /* Each card sets off this long after the one ahead of it, so the
         line stretches out on the way and closes up as it lands. */
      --kisaka-team-card-step: 100ms;
      --kisaka-team-travel: 800ms;
      --kisaka-team-word-step: 50ms;
   }

.kisaka-about-meet-team__panel.is-armed [data-kisaka-team-enter]
   {
      opacity: 0;
   }

/* Held off the page rather than faded: a card's opacity belongs to the
   rail's focus (above), and a translate while held would widen the rail. */
.kisaka-about-meet-team__panel.is-armed .kisaka-about-meet-team__card
   {
      opacity: 1;
      visibility: hidden;
   }

.kisaka-about-meet-team__panel.is-in [data-kisaka-team-enter]
   {
      animation: kisaka-team-rise var(--kisaka-dur-reveal) var(--kisaka-ease-out) backwards;
      animation-delay: calc(var(--i, 0) * var(--kisaka-team-step));
   }

/* --- The title: each word rises out of its own mask -------------------- */
/* The script wraps every word (kisaka-about-meet-team__word, --w) and keeps
   the sentence whole for screen readers. The mask carries a little room
   below the baseline so descenders are not cut. */
.kisaka-about-meet-team__word
   {
      display: inline-block;
      overflow: hidden;
      vertical-align: bottom;
      padding: 0 0.04em 0.14em;
      margin: 0 -0.04em -0.14em;
   }

.kisaka-about-meet-team__word > span
   {
      display: inline-block;
   }

.kisaka-about-meet-team__panel.is-armed .kisaka-about-meet-team__title
   {
      opacity: 1;
   }

.kisaka-about-meet-team__panel.is-armed .kisaka-about-meet-team__word > span
   {
      translate: 0 115%;
   }

.kisaka-about-meet-team__panel.is-in .kisaka-about-meet-team__title
   {
      animation: none;
   }

.kisaka-about-meet-team__panel.is-in .kisaka-about-meet-team__word > span
   {
      animation: kisaka-team-word-up var(--kisaka-dur-reveal) var(--kisaka-ease-out-expo) backwards;
      animation-delay: calc(var(--w, 0) * var(--kisaka-team-word-step));
   }

/* --- The cards ----------------------------------------------------------- */
/* The card's transform and opacity belong to the rail's focus (above), so
   the slide is a translate of its own, which composes with that scale.
   --kisaka-team-from, set on the screen by the script, is the distance from
   the first card's slot to the right edge of the screen: every card moves
   by that same amount, so the line keeps its spacing and nobody overtakes,
   and the first card lands exactly in its slot. */
.kisaka-about-meet-team__panel.is-in .kisaka-about-meet-team__card
   {
      animation: kisaka-team-join var(--kisaka-team-travel) var(--kisaka-ease-out-expo) backwards;
      animation-delay: calc((var(--i, 0) - 1) * var(--kisaka-team-card-step));
      /* The one ahead in the line stays in front where they touch. */
      z-index: calc(var(--n, 1) - var(--i, 0));
   }

/* While the cards are out to the right they stretch the rail's scrollable
   width, and a mandatory snap re-snaps the rail onto a different card the
   moment that happens. The snap rests while the roster is moving
   (is-moving, set by the script for the length of the slide). */
.kisaka-about-meet-team__panel.is-moving .kisaka-about-meet-team__rail
   {
      -webkit-scroll-snap-type: none;
      -ms-scroll-snap-type: none;
      scroll-snap-type: none;
   }

/* The photo trails the frame by a hair and catches up: the weight of the
   card. It rests at scale 1.05 (css/kisaka-base.css), so the lag stays
   inside that margin and never shows the frame behind it. */
.kisaka-about-meet-team__panel.is-in .kisaka-about-meet-team__pic
   {
      animation: kisaka-team-lag var(--kisaka-team-travel) var(--kisaka-ease-out-expo) backwards;
      animation-delay: calc((var(--i, 0) - 1) * var(--kisaka-team-card-step) + 90ms);
   }

.kisaka-about-meet-team__panel.is-in .kisaka-about-meet-team__name,
.kisaka-about-meet-team__panel.is-in .kisaka-about-meet-team__pos,
.kisaka-about-meet-team__panel.is-in .kisaka-about-meet-team__links
   {
      animation: kisaka-team-rise var(--kisaka-dur-reveal) var(--kisaka-ease-out) backwards;
      animation-delay: calc((var(--i, 0) - 1) * var(--kisaka-team-card-step) + 640ms + var(--p, 0) * 40ms);
   }

.kisaka-about-meet-team__pos
   {
      --p: 1;
   }

.kisaka-about-meet-team__links
   {
      --p: 2;
   }

/* A box in the drawing is placed by its transform attribute, which a CSS
   transform would replace, so the boxes fade in where they are. */
.kisaka-about-meet-team__panel.is-in .kisaka-eng__node
   {
      animation-name: kisaka-team-fade;
   }

.kisaka-about-meet-team__panel.is-instant [data-kisaka-team-enter],
.kisaka-about-meet-team__panel.is-instant .kisaka-about-meet-team__word > span,
.kisaka-about-meet-team__panel.is-instant .kisaka-about-meet-team__pic,
.kisaka-about-meet-team__panel.is-instant .kisaka-about-meet-team__name,
.kisaka-about-meet-team__panel.is-instant .kisaka-about-meet-team__pos,
.kisaka-about-meet-team__panel.is-instant .kisaka-about-meet-team__links
   {
      animation: none;
   }

@keyframes kisaka-team-rise
   {
      from
         {
            opacity: 0;
            transform: translate3d(0, 14px, 0);
         }

      to
         {
            opacity: 1;
            transform: none;
         }
   }

@keyframes kisaka-team-fade
   {
      from
         {
            opacity: 0;
         }

      to
         {
            opacity: 1;
         }
   }

@keyframes kisaka-team-word-up
   {
      from
         {
            translate: 0 115%;
         }

      to
         {
            translate: 0 0;
         }
   }

/* The slide runs a little past the slot and settles back: the card takes
   its place rather than stopping dead. */
@keyframes kisaka-team-join
   {
      0%
         {
            translate: var(--kisaka-team-from, 100vw) 0;
            animation-timing-function: var(--kisaka-ease-out-expo);
         }

      72%
         {
            translate: -14px 0;
            animation-timing-function: var(--kisaka-ease-out);
         }

      100%
         {
            translate: 0 0;
         }
   }

@keyframes kisaka-team-lag
   {
      from
         {
            translate: 10px 0;
         }

      to
         {
            translate: 0 0;
         }
   }

/* --- Exit: the entrance run backwards, last in first out ---------------- */
/* Set on a flick away (is-leaving), at the entrance's own tempo, so each
   card is seen to go while the page carries the screen off: a curtain comes
   down over each card in turn, Dorothy's first and Jobra's last, the
   title's words after them. The roster is clear inside the move; the
   second screen's first pieces are still sinking as the next section slides
   over them, which is the point. It ends in the held state, so the hold
   that follows changes nothing on screen; the next arrival plays the
   entrance again. --n is the number of slots on the screen, counted with
   --i; --kisaka-team-words the number of words in the title. */
.kisaka-about-meet-team__panel.is-leaving [data-kisaka-team-enter]
   {
      animation: kisaka-team-sink var(--kisaka-dur-reveal) var(--kisaka-ease-out) forwards;
      animation-delay: calc((var(--n, 1) - 1 - var(--i, 0)) * var(--kisaka-team-step));
   }

.kisaka-about-meet-team__panel.is-leaving .kisaka-about-meet-team__title
   {
      animation: none;
   }

.kisaka-about-meet-team__panel.is-leaving .kisaka-about-meet-team__word > span
   {
      animation: kisaka-team-word-down 320ms var(--kisaka-ease-out) forwards;
      animation-delay: calc((var(--n, 1) - 1) * var(--kisaka-team-card-step) + (var(--kisaka-team-words, 1) - 1 - var(--w, 0)) * 30ms);
   }

/* The cards do not slide back out. A curtain comes down over each where
   it stands: the frame's mask closes from the top while the photo sinks
   behind it, so the card is drawn down into the floor. The mask is a clip,
   which leaves the card's transform and opacity to the rail's focus and
   does not widen the rail. */
.kisaka-about-meet-team__panel.is-leaving .kisaka-about-meet-team__card
   {
      animation: kisaka-team-curtain var(--kisaka-dur-reveal) var(--kisaka-ease-out-expo) forwards;
      animation-delay: calc((var(--n, 1) - 1 - var(--i, 0)) * var(--kisaka-team-card-step));
   }

/* The photo keeps the 1.05 it rests at (css/kisaka-base.css). */
.kisaka-about-meet-team__panel.is-leaving .kisaka-about-meet-team__pic
   {
      animation: kisaka-team-sink-back calc(var(--kisaka-dur-reveal) * 2) var(--kisaka-ease-out-expo) forwards;
      animation-delay: calc((var(--n, 1) - 1 - var(--i, 0)) * var(--kisaka-team-card-step));
   }

.kisaka-about-meet-team__panel.is-leaving .kisaka-eng__node
   {
      animation-name: kisaka-team-fade-out;
   }

@keyframes kisaka-team-sink
   {
      from
         {
            opacity: 1;
            transform: none;
         }

      to
         {
            opacity: 0;
            transform: translate3d(0, 14px, 0);
         }
   }

@keyframes kisaka-team-fade-out
   {
      from
         {
            opacity: 1;
         }

      to
         {
            opacity: 0;
         }
   }

@keyframes kisaka-team-word-down
   {
      from
         {
            translate: 0 0;
         }

      to
         {
            translate: 0 115%;
         }
   }

@keyframes kisaka-team-curtain
   {
      from
         {
            clip-path: inset(0 0 0 0);
         }

      to
         {
            clip-path: inset(100% 0 0 0);
         }
   }

@keyframes kisaka-team-sink-back
   {
      from
         {
            transform: scale(1.05);
         }

      to
         {
            transform: translate3d(0, 32px, 0) scale(1.05);
         }
   }

/* Fewer and gentler: the same order, as fades, closer together. */
@media (prefers-reduced-motion: reduce)
   {
      .kisaka-about-meet-team__panel
         {
            --kisaka-team-step: 30ms;
            --kisaka-team-card-step: 30ms;
         }

      .kisaka-about-meet-team__panel.is-armed .kisaka-about-meet-team__title
         {
            opacity: 0;
         }

      .kisaka-about-meet-team__panel:is(.is-armed, .is-in, .is-leaving) .kisaka-about-meet-team__word > span
         {
            translate: none;
            animation: none;
         }

      .kisaka-about-meet-team__panel.is-in [data-kisaka-team-enter],
      .kisaka-about-meet-team__panel.is-in .kisaka-about-meet-team__title,
      .kisaka-about-meet-team__panel.is-in .kisaka-about-meet-team__card,
      .kisaka-about-meet-team__panel.is-in .kisaka-about-meet-team__name,
      .kisaka-about-meet-team__panel.is-in .kisaka-about-meet-team__pos,
      .kisaka-about-meet-team__panel.is-in .kisaka-about-meet-team__links
         {
            animation-name: kisaka-team-fade;
            animation-duration: 240ms;
            animation-timing-function: var(--kisaka-ease-out);
         }

      .kisaka-about-meet-team__panel.is-leaving [data-kisaka-team-enter],
      .kisaka-about-meet-team__panel.is-leaving .kisaka-about-meet-team__title,
      .kisaka-about-meet-team__panel.is-leaving .kisaka-about-meet-team__card
         {
            animation-name: kisaka-team-fade-out;
            animation-duration: 160ms;
            animation-timing-function: var(--kisaka-ease-out);
         }

      .kisaka-about-meet-team__panel.is-in .kisaka-about-meet-team__pic,
      .kisaka-about-meet-team__panel.is-leaving .kisaka-about-meet-team__pic
         {
            animation: none;
         }
   }

/* ==========================================================================
   About: one screen per panel
   ==========================================================================
   Every block on About owns a screen, and js/kisaka-about-panels.js parks a
   flick on each of them — the same language as the home parks and the services
   panel snap. Six of the eight blocks were already 100dvh; the two that were
   not are brought in line here, and the handful that ran a little over a
   900px-tall window have their vertical rhythm put on vh so it shrinks with the
   window instead of pushing the next panel's edge into view.

   A panel that overflows anyway still scrolls: nothing here clips, because a
   clipped paragraph is worse than a panel that is a little over a screen. */
@media only screen and (min-width: 1200px) and (min-height: 780px)
   {
      .kisaka-about-page [data-kisaka-about-panel]
         {
            box-sizing: border-box;
            min-height: 100vh;
            min-height: 100svh;
            min-height: 100dvh;
         }

      /* --- Managing Partner's note: the letter is the tallest column on the page -------- */
      .kisaka-about-page .kisaka-about-founder__eyebrow,
      .kisaka-about-page .kisaka-about-founder__title
         {
            margin-bottom: clamp(12px, 2vh, 26px);
         }

      /* The letter is the tallest column on the page: its leading is what gives,
         not its size — the voice stays, the panel comes back to one screen. */
      .kisaka-about-page .kisaka-about-founder__letter p
         {
            margin-bottom: clamp(10px, 1.4vh, 18px);
            line-height: 1.42;
         }

      .kisaka-about-page .kisaka-about-founder__sign
         {
            margin-top: clamp(18px, 3.2vh, 42px);
            padding-top: clamp(12px, 1.8vh, 20px);
         }

      /* --- Meet the team: two screens, so two parks ------------------------ */
      .kisaka-about-page .kisaka-about-meet-team
         {
            padding: 0;
         }

      .kisaka-about-page .kisaka-about-meet-team__panel
         {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-top: clamp(72px, 10vh, 100px);
         }

      .kisaka-about-page .kisaka-about-meet-team__title
         {
            margin-bottom: clamp(28px, 4.4vh, 64px);
         }

      /* The card was a fixed 550px, which is most of a short window on its own. */
      .kisaka-about-page .kisaka-about-meet-team
         {
            --kisaka-meet-team-card-h: clamp(380px, 60vh, 550px);
         }

      /* Same emphasis as Kisaka Sustainability: the card at the reading edge
         stays full, neighbours recede so one person is in focus at a time. */
      .kisaka-about-page .kisaka-about-meet-team__card
         {
            -webkit-transform-origin: var(--meet-origin, left center);
            -ms-transform-origin: var(--meet-origin, left center);
            transform-origin: var(--meet-origin, left center);
            -webkit-transform: scale(calc(0.94 + 0.06 * var(--meet-focus)));
            -ms-transform: scale(calc(0.94 + 0.06 * var(--meet-focus)));
            transform: scale(calc(0.94 + 0.06 * var(--meet-focus)));
            opacity: calc(0.42 + 0.58 * var(--meet-focus));
            -webkit-transition: -webkit-transform 260ms var(--kisaka-ease-out), opacity 260ms var(--kisaka-ease-out);
            transition: transform 260ms var(--kisaka-ease-out), opacity 260ms var(--kisaka-ease-out);
         }

      /* While the rail drives --meet-focus every frame, the rAF loop is the
         animation — a transition on top of it can only trail behind it. */
      .kisaka-about-page .kisaka-about-meet-team__rail[data-meet-driving] .kisaka-about-meet-team__card
         {
            -webkit-transition: none;
            transition: none;
         }

      /* Any card out of focus can be clicked into it. */
      .kisaka-about-page .kisaka-about-meet-team__card:not([aria-current])
         {
            cursor: pointer;
         }

      @media (prefers-reduced-motion: reduce)
         {
            .kisaka-about-page .kisaka-about-meet-team__card
               {
                  -webkit-transition: none;
                  transition: none;
               }
         }

      /* The diagram is never what overruns this panel — it is only as tall as the
         column is wide. The statement, the four moves and the invitation stack in
         one column, so that column is where the height is found: the bands
         between them close first, then the rail's rows, and the measure widens by
         a line rather than the type coming down a size. */
      .kisaka-about-page .kisaka-about-meet-team__info
         {
            row-gap: clamp(18px, 2.6vh, 48px);
         }

      .kisaka-about-page .kisaka-about-meet-team__info-text
         {
            padding-top: 0;
         }

      .kisaka-about-page .kisaka-about-meet-team__info-eyebrow
         {
            margin-bottom: clamp(8px, 1.1vh, 16px);
         }

      .kisaka-about-page .kisaka-about-meet-team__info-title
         {
            font-size: min(clamp(1.75rem, 1.25rem + 1.9vw, 3rem), 4.6vh);
            margin-bottom: clamp(9px, 1.6vh, 20px);
         }

      .kisaka-about-page .kisaka-about-meet-team__info-lede
         {
            max-width: 46ch;
         }

      .kisaka-about-page .kisaka-eng__rail-wrap
         {
            margin-top: clamp(10px, 1.4vh, 28px);
         }

      .kisaka-about-page .kisaka-eng__step-btn
         {
            padding: clamp(5px, 0.8vh, 14px) 0;
            gap: 2px;
         }

      /* The rail has to end on the diagram's bottom edge, so the notes are given
         the whole measure: a note that runs to one line instead of two is the
         cheapest height on this panel, and it is bought before the padding. */
      .kisaka-about-page .kisaka-eng__step-note
         {
            max-width: none;
         }

      .kisaka-about-page .kisaka-eng__svg
         {
            max-height: 44vh;
         }

      .kisaka-about-page .kisaka-about-meet-team__join
         {
            padding-top: 0;
         }

      .kisaka-about-page .kisaka-about-meet-team__join-intro
         {
            margin-top: 6px;
         }

      /* This park is the one that overruns a short window: the statement, the
         drawing and the invitation already fill the screen, so the shared foot
         band is the first thing to give back. */
      .kisaka-about-page .kisaka-about-meet-team__panel:has([data-kisaka-engagement])
         {
            padding-bottom: clamp(22px, 2.8vh, 40px);
         }

      /* Each block is centred in a panel of its own now, so the margins that used
         to separate them inside one long column would only push them off centre. */
      .kisaka-about-page .kisaka-about-meet-team__panel > .kisaka-about-meet-team__info
         {
            margin-top: 0;
         }

      /* Headlines are sized off the viewport's width, which says nothing about
         how much room is left below them. Capping each one against the height as
         well is what keeps a panel on one screen on a short window — continuous,
         so there is no step where a heading suddenly jumps a size. */
      .kisaka-about-page .kisaka-about-system__title
         {
            font-size: min(clamp(2.25rem, 1.5rem + 3.2vw, 4rem), 5.7vh);
         }

      .kisaka-about-page .kisaka-about-founder__title
         {
            font-size: min(clamp(1.75rem, 1.2rem + 2vw, 2.75rem), 4.6vh);
         }

      .kisaka-about-page .kisaka-about-intro__par
         {
            margin-top: clamp(10px, 1.4vh, 16px);
            line-height: 1.52;
         }

      .kisaka-about-page .kisaka-about-intro__title
         {
            font-size: min(clamp(2.5rem, 1.6rem + 4vw, 4.5rem), 5.5vh);
         }

      .kisaka-about-page .kisaka-about-intro__quote
         {
            margin-top: clamp(14px, 2.2vh, 30px);
         }

      .kisaka-about-page .kisaka-about-system__body
         {
            margin-bottom: clamp(18px, 3.4vh, 60px);
         }

      .kisaka-about-page .kisaka-about-system__eyebrow,
      .kisaka-about-page .kisaka-about-system__name
         {
            margin-bottom: clamp(8px, 1.4vh, 14px);
         }
   }

/* ==========================================================================
   About: Who we serve, closing panel
   ==========================================================================
   The sector grid moved out: it repeated Home's service directory and
   who_we_serve.html, and so would a list of client names, which the client
   directory already carries. The close is an invitation instead: the claim
   is the picture and runs the full width of the panel, the standing line
   sits under it on the left in the wordmark's serif, and the sentence that
   names the reader and the two doors out keep the right. The base layout
   (css/kisaka-base.css, .kisaka-about-industries) still provides the note
   link and the buttons. */
.kisaka-about-page .kisaka-about-industries--close
   {
      --kisaka-close-step: 70ms;
      --kisaka-close-word-step: 60ms;
      --kisaka-close-mark-step: 110ms;
      display: flex;
      align-items: center;
   }

.kisaka-about-page .kisaka-about-industries--close .kisaka-about-industries__inner
   {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "title" "lead" "foot";
      align-items: start;
      row-gap: clamp(20px, 3.2vh, 36px);
   }

.kisaka-about-page .kisaka-about-industries--close .kisaka-about-industries__title
   {
      grid-area: title;
   }

.kisaka-about-page .kisaka-about-industries--close .kisaka-about-industries__lead
   {
      grid-area: lead;
   }

.kisaka-about-page .kisaka-about-industries--close .kisaka-about-industries__foot
   {
      grid-area: foot;
      align-self: auto;
      max-width: 44rem;
   }

/* Wide: the claim across the top, then a diagonal. The sentence sits high
   on the right and the standing line low on the left, on the doors' line,
   so the four corners of the panel each hold one thing. */
@media (min-width: 992px)
   {
      .kisaka-about-page .kisaka-about-industries--close .kisaka-about-industries__inner
         {
            grid-template-columns: minmax(360px, 0.5fr) minmax(0, 1fr);
            grid-template-areas: "title title" "lead foot";
            align-items: start;
            column-gap: clamp(48px, 7vw, 128px);
            row-gap: clamp(28px, 5vh, 56px);
         }

      .kisaka-about-page .kisaka-about-industries--close .kisaka-about-industries__lead
         {
            align-self: end;
         }
   }

/* The claim, at the size of the panel: three lines, heavy, with the
   tracking a display size wants. */
.kisaka-about-page .kisaka-about-industries--close .kisaka-about-industries__title
   {
      max-width: 15ch;
      font-size: clamp(2.6rem, 0.4rem + 6vw, 6.9rem);
      font-weight: 700;
      line-height: 0.92;
      letter-spacing: -0.05em;
      text-wrap: balance;
   }

/* The standing line changes voice: the claim is the firm's expanded
   grotesk, the line under it the wordmark's serif, italic, in full ink
   rather than grey, so it reads as a signature rather than a subtitle. */
.kisaka-about-page .kisaka-about-industries--close .kisaka-about-industries__lead
   {
      margin: 0;
      max-width: 9em;
      font-family: "Newsreader", Georgia, "Times New Roman", serif;
      font-style: italic;
      font-weight: 500;
      font-optical-sizing: auto;
      font-size: clamp(1.7rem, 1.1rem + 1.8vw, 3rem);
      line-height: 1.06;
      letter-spacing: -0.015em;
      color: var(--kisaka-industries-ink);
      text-wrap: balance;
   }

.kisaka-about-page .kisaka-about-industries--close .kisaka-about-industries__body
   {
      margin: 0.2em 0 0;
      max-width: 26em;
      font-family: var(--kisaka-font-accent);
      font-size: clamp(1.2rem, 1rem + 0.75vw, 1.6rem);
      font-weight: 400;
      line-height: 1.38;
      letter-spacing: -0.01em;
      color: var(--kisaka-industries-ink);
      text-wrap: pretty;
   }

.kisaka-about-page .kisaka-about-industries--close .kisaka-about-industries__note
   {
      margin-top: clamp(20px, 3vh, 32px);
   }

/* Adjacent CTAs never share a fill. Contact us keeps the red primary;
   Who we serve is the black secondary (same pairing as home launch). About
   does not load kisaka-home.css, so the ghost lives here. */
.kisaka-about-page .kisaka-about-industries--close .kisaka-home-launch__btn--ghost,
.kisaka-about-page .kisaka-about-industries--close .kisaka-home-launch__btn--ghost:visited
   {
      background: #080808;
      border: 0.5px solid #080808;
      color: #fff;
   }

.kisaka-about-page .kisaka-about-industries--close .kisaka-home-launch__btn--ghost:hover,
.kisaka-about-page .kisaka-about-industries--close .kisaka-home-launch__btn--ghost:focus-visible
   {
      background: #fff;
      border-color: #080808;
      color: #080808;
   }

/* Each reader named in the sentence carries a red rule under it, drawn in
   as a background so a phrase that wraps keeps its rule on both lines. The
   entrance draws them one after another; at rest they stay. */
.kisaka-about-page .kisaka-about-industries__mark
   {
      padding-bottom: 0.06em;
      background-image: linear-gradient(var(--kisaka-red), var(--kisaka-red));
      background-repeat: no-repeat;
      background-position: 0 100%;
      background-size: 100% 2px;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
   }

/* --- Entrance: the panel lands, the claim rises, the readers are marked --- */
/* js/kisaka-about-close-enter.js wraps each word of the claim in a mask of
   its own (--w) and numbers every other piece in reading order (--i). It
   holds the panel blank (is-armed) while it is off the page, plays it
   (is-in) as the panel snap lands, and runs it backwards (is-leaving) on a
   flick away, every time. The words rise out of their masks first, then the
   standing line, the sentence, the note and the doors rise in place, and
   once the sentence is up the rules draw under the readers in turn. Without
   the script nothing is hidden. */
.kisaka-about-industries__word
   {
      display: inline-block;
      overflow: hidden;
      vertical-align: bottom;
      padding: 0 0.04em 0.12em;
      margin: 0 -0.04em -0.12em;
   }

.kisaka-about-industries__word > span
   {
      display: inline-block;
   }

.kisaka-about-industries--close.is-armed [data-kisaka-close-enter]
   {
      opacity: 0;
   }

.kisaka-about-industries--close.is-armed .kisaka-about-industries__word > span
   {
      translate: 0 112%;
   }

.kisaka-about-industries--close.is-armed .kisaka-about-industries__mark
   {
      background-size: 0% 2px;
   }

.kisaka-about-industries--close.is-in .kisaka-about-industries__word > span
   {
      animation: kisaka-close-word-up 640ms var(--kisaka-ease-out-expo) backwards;
      animation-delay: calc(var(--w, 0) * var(--kisaka-close-word-step));
   }

.kisaka-about-industries--close.is-in [data-kisaka-close-enter]
   {
      animation: kisaka-close-rise var(--kisaka-dur-reveal) var(--kisaka-ease-out) backwards;
      animation-delay: calc(180ms + var(--i, 0) * var(--kisaka-close-step));
   }

/* The rules start once the sentence has risen (--sentence is its slot) and
   draw left to right, one reader after the other. */
.kisaka-about-industries--close.is-in .kisaka-about-industries__mark
   {
      animation: kisaka-close-mark 420ms var(--kisaka-ease-out-expo) backwards;
      animation-delay: calc(180ms + var(--sentence, 1) * var(--kisaka-close-step) + 260ms + var(--m, 0) * var(--kisaka-close-mark-step));
   }

/* A panel already open at load is shown as it is. */
.kisaka-about-industries--close.is-instant [data-kisaka-close-enter],
.kisaka-about-industries--close.is-instant .kisaka-about-industries__word > span,
.kisaka-about-industries--close.is-instant .kisaka-about-industries__mark
   {
      animation: none;
   }

/* --- Exit: the entrance run backwards, last in first out ---------------- */
/* On a flick away the rules retract first, then the doors, the note, the
   sentence and the standing line sink, and the claim's words drop back into
   their masks last. It ends in the held state, so the hold that follows
   changes nothing on screen. --n is the number of pieces, counted with --i;
   --kisaka-close-words and --kisaka-close-marks the counts of words and
   marked readers. */
.kisaka-about-industries--close.is-leaving .kisaka-about-industries__mark
   {
      animation: kisaka-close-mark-out 260ms var(--kisaka-ease-out) forwards;
      animation-delay: calc((var(--kisaka-close-marks, 1) - 1 - var(--m, 0)) * 50ms);
   }

.kisaka-about-industries--close.is-leaving [data-kisaka-close-enter]
   {
      animation: kisaka-close-sink 360ms var(--kisaka-ease-out) forwards;
      animation-delay: calc(120ms + (var(--n, 1) - 1 - var(--i, 0)) * 40ms);
   }

.kisaka-about-industries--close.is-leaving .kisaka-about-industries__word > span
   {
      animation: kisaka-close-word-down 360ms var(--kisaka-ease-out) forwards;
      animation-delay: calc(120ms + var(--n, 1) * 40ms + (var(--kisaka-close-words, 1) - 1 - var(--w, 0)) * 40ms);
   }

@keyframes kisaka-close-rise
   {
      from
         {
            opacity: 0;
            translate: 0 16px;
         }

      to
         {
            opacity: 1;
            translate: 0 0;
         }
   }

@keyframes kisaka-close-fade
   {
      from
         {
            opacity: 0;
         }

      to
         {
            opacity: 1;
         }
   }

@keyframes kisaka-close-word-up
   {
      from
         {
            translate: 0 112%;
         }

      to
         {
            translate: 0 0;
         }
   }

@keyframes kisaka-close-mark
   {
      from
         {
            background-size: 0% 2px;
         }

      to
         {
            background-size: 100% 2px;
         }
   }

@keyframes kisaka-close-sink
   {
      to
         {
            opacity: 0;
            translate: 0 12px;
         }
   }

@keyframes kisaka-close-fade-out
   {
      to
         {
            opacity: 0;
         }
   }

@keyframes kisaka-close-word-down
   {
      to
         {
            translate: 0 112%;
         }
   }

@keyframes kisaka-close-mark-out
   {
      to
         {
            background-size: 0% 2px;
         }
   }

/* Reduced motion: the pieces still arrive, as a short cross-fade, and
   nothing travels or draws. */
@media (prefers-reduced-motion: reduce)
   {
      .kisaka-about-industries--close.is-armed .kisaka-about-industries__word > span
         {
            translate: none;
         }

      .kisaka-about-industries--close.is-armed .kisaka-about-industries__title
         {
            opacity: 0;
         }

      .kisaka-about-industries--close.is-armed .kisaka-about-industries__mark
         {
            background-size: 100% 2px;
         }

      .kisaka-about-industries--close.is-in .kisaka-about-industries__word > span,
      .kisaka-about-industries--close.is-in .kisaka-about-industries__mark,
      .kisaka-about-industries--close.is-leaving .kisaka-about-industries__word > span,
      .kisaka-about-industries--close.is-leaving .kisaka-about-industries__mark
         {
            animation: none;
         }

      .kisaka-about-industries--close.is-in [data-kisaka-close-enter],
      .kisaka-about-industries--close.is-in .kisaka-about-industries__title
         {
            animation: kisaka-close-fade 240ms var(--kisaka-ease-out) backwards;
            animation-delay: 0ms;
         }

      .kisaka-about-industries--close.is-leaving [data-kisaka-close-enter],
      .kisaka-about-industries--close.is-leaving .kisaka-about-industries__title
         {
            animation: kisaka-close-fade-out 160ms var(--kisaka-ease-out) forwards;
            animation-delay: 0ms;
         }
   }