/* Kisaka & Company — Who we serve (who_we_serve.html).
   Same warm editorial ground as the contact page. The sector tally up top is
   set like a schedule in a set of accounts, total and all. */
/* ---------------------------------------------------------------- tokens */
body.kisaka-who-serve-page
   {
      --wws-bg: #f4f1ed;
      --wws-surface: #fff;
      --wws-text: #251c1f;
      --wws-muted: #665b5f;
      --wws-soft: #70646a;
      --wws-line: #e2dad6;
      --wws-rule: #ddd5d1;
      --wws-control-line: #97858c;
      --wws-accent: var(--kisaka-red);
      --wws-chrome: rgba(244, 241, 237, 0.82);
      --wws-shadow: 0 1px 2px rgba(47, 28, 30, 0.04), 0 12px 32px rgba(47, 28, 30, 0.05);
      background: var(--wws-bg);
      color: var(--wws-text);
   }

/* --------------------------------------------------------- header chrome */
/* Warm see-through bar like contact, so the page slides cleanly underneath. */
body.kisaka-who-serve-page .header .header-inner,
body.kisaka-who-serve-page .header.sticky .header-inner
   {
      min-height: var(--kisaka-header-h);
      background: var(--wws-chrome);
      -webkit-backdrop-filter: blur(18px) saturate(180%);
      backdrop-filter: blur(18px) saturate(180%);
      border: 0;
      box-shadow: none;
   }

body.kisaka-who-serve-page .header .nav li a::before
   {
      background: var(--kisaka-red);
   }

body.kisaka-who-serve-page .header .logo,
body.kisaka-who-serve-page .header .kisaka-logo-text,
body.kisaka-who-serve-page .header .nav.menu > li > a
   {
      color: var(--wws-text);
   }

body.kisaka-who-serve-page .header .nav.menu > li > a:hover
   {
      color: var(--wws-accent);
   }

body.kisaka-who-serve-page .header .kisaka-logo-tagline
   {
      color: var(--wws-muted);
   }

body.kisaka-who-serve-page .header .slicknav_menu .slicknav_icon-bar
   {
      background: var(--wws-text);
   }

/* Footer handoff, scrubbed by the footer's edge (js/main.js). While the
   edge is inside the bar, the cream ground stops at the edge, so the red
   comes up through the bar with a hard line and no blur smear. The type
   turns as the edge crosses it. No transitions here: the scroll is the
   animation, and a transition would trail the edge. */
body.kisaka-who-serve-page.kisaka-nav-footer-near .header .header-inner
   {
      background: linear-gradient(to bottom, var(--wws-bg) calc(100% - var(--kisaka-nav-footer-cover, 0px)), transparent 0);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      transition: none;
   }

body.kisaka-who-serve-page.kisaka-nav-footer-near .header .logo,
body.kisaka-who-serve-page.kisaka-nav-footer-near .header .kisaka-logo-text,
body.kisaka-who-serve-page.kisaka-nav-footer-near .header .nav.menu > li > a
   {
      color: color-mix(in srgb, var(--wws-text), #f7f2ee var(--kisaka-nav-footer-mix, 0%));
      transition: none;
   }

body.kisaka-who-serve-page.kisaka-nav-footer-near .header .kisaka-logo-tagline
   {
      color: color-mix(in srgb, var(--wws-muted), rgba(247, 242, 238, 0.7) var(--kisaka-nav-footer-mix, 0%));
      transition: none;
   }

body.kisaka-who-serve-page.kisaka-nav-footer-near .header .slicknav_menu .slicknav_icon-bar
   {
      background: color-mix(in srgb, var(--wws-text), #f7f2ee var(--kisaka-nav-footer-mix, 0%));
   }

/* Outside the scrub (a jump straight to #footer, or scrolling back up past
   the near band) the type still eases instead of snapping. */
body.kisaka-who-serve-page .header .logo,
body.kisaka-who-serve-page .header .kisaka-logo-text,
body.kisaka-who-serve-page .header .kisaka-logo-tagline,
body.kisaka-who-serve-page .header .nav.menu > li > a
   {
      transition: color 0.25s ease;
   }

body.kisaka-who-serve-page .header .header-inner .container
   {
      width: min(1280px, calc(100% - 2 * clamp(24px, 6vw, 100px)));
      max-width: none;
      margin-inline: auto;
      padding-inline: 0;
   }

body.kisaka-who-serve-page .header .kisaka-header-row
   {
      margin-inline: 0;
   }

body.kisaka-who-serve-page .header .kisaka-header-brand
   {
      margin-left: 0;
   }

/* ------------------------------------------------------------ page basis */
.wws-page
   {
      font-family: var(--kisaka-font-accent);
      font-optical-sizing: auto;
   }

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

.wws-page p
   {
      margin: 0;
      color: var(--wws-muted);
      font-size: 1rem;
      line-height: 1.65;
   }

.wws-page a, .wws-page button
   {
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
   }

.wws-page a:focus-visible,
.wws-page button:focus-visible,
.wws-page input:focus-visible,
body.kisaka-who-serve-page .header a:focus-visible
   {
      outline: 2px solid var(--wws-accent);
      outline-offset: 4px;
   }

.wws-shell
   {
      width: min(1280px, calc(100% - 2 * clamp(24px, 6vw, 100px)));
      margin-inline: auto;
   }

.wws-sr
   {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
   }

/* Small red label, same voice as the contact group labels. */
.wws-page .wws-eyebrow
   {
      color: var(--wws-accent);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      line-height: 1.4;
      text-transform: uppercase;
   }

/* ----------------------------------------------------------------- intro */
.wws-intro
   {
      padding: calc(var(--kisaka-header-h) + 4.5rem) 0 4.5rem;
   }

.wws-intro__grid
   {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      gap: clamp(40px, 7vw, 120px);
      align-items: start;
   }

.wws-intro__copy
   {
      min-width: 0;
   }

.wws-intro h1
   {
      margin: 0.875rem 0 0;
      color: var(--wws-text);
      font-family: var(--kisaka-font-accent);
      font-size: clamp(2.75rem, 4.6vw, 4rem);
      font-weight: 500;
      letter-spacing: -0.04em;
      line-height: 1.02;
      overflow-wrap: anywhere;
   }

.wws-intro h1 > .wws-word--accent
   {
      color: var(--wws-accent);
   }

.wws-page .wws-intro__lead
   {
      max-width: 32rem;
      margin-top: 1.25rem;
      font-size: 1.0625rem;
      line-height: 1.6;
   }

/* --------------------------------------------------------- sector tally */
/* Rows ruled like a schedule, the total closed off with an accountant's
   double line. Each row jumps to its sector further down. */
.wws-tally
   {
      min-width: 0;
   }

.wws-tally__rows
   {
      margin: 1rem 0 0;
      padding: 0;
      list-style: none;
      border-top: 1px solid var(--wws-text);
   }

.wws-tally__rows > li
   {
      border-bottom: 1px solid var(--wws-rule);
   }

.wws-tally__row, .wws-tally__total
   {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1.5rem;
      min-height: 60px;
      padding: 0.875rem 0;
   }

.wws-tally__row, .wws-tally__row:visited
   {
      color: var(--wws-text);
      text-decoration: none;
      transition: color 160ms ease;
   }

.wws-tally__row:hover
   {
      color: var(--wws-accent);
      text-decoration: none;
   }

.wws-page .wws-tally__row:active
   {
      color: var(--kisaka-red-800);
      transition-duration: 0ms;
   }

.wws-tally__name
   {
      font-size: 1.0625rem;
      font-weight: 400;
      line-height: 1.4;
   }

.wws-tally__figure
   {
      font-size: clamp(1.75rem, 2.6vw, 2.25rem);
      font-weight: 500;
      letter-spacing: -0.03em;
      line-height: 1;
      font-variant-numeric: tabular-nums lining-nums;
   }

.wws-page .wws-tally__total
   {
      margin: 0;
      color: var(--wws-text);
      border-bottom: 4px double var(--wws-text);
   }

.wws-tally__total .wws-tally__name
   {
      font-weight: 500;
   }

/* ------------------------------------------------------------- toolbar */
.wws-directory
   {
      padding: 0;
   }

.wws-toolbar
   {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem 2rem;
      padding: 1.5rem 0;
      border-top: 1px solid var(--wws-rule);
      border-bottom: 1px solid var(--wws-rule);
   }

.wws-page .wws-toolbar__count
   {
      color: var(--wws-muted);
      font-size: 0.9375rem;
      font-variant-numeric: tabular-nums;
   }

.wws-search
   {
      position: relative;
      flex: 0 1 380px;
      min-width: 0;
   }

.wws-search__icon
   {
      position: absolute;
      top: 50%;
      left: 16px;
      width: 18px;
      height: 18px;
      fill: none;
      stroke: var(--wws-soft);
      stroke-width: 1.75;
      stroke-linecap: round;
      transform: translateY(-50%);
      pointer-events: none;
   }

/* 16px text so iOS doesn't zoom in on focus. */
.wws-search .wws-search__input
   {
      width: 100%;
      height: 48px;
      padding: 0 48px 0 44px;
      border: 1px solid var(--wws-control-line);
      border-radius: 8px;
      background: var(--wws-surface);
      color: var(--wws-text);
      font-family: inherit;
      font-size: 1rem;
      -webkit-appearance: none;
      appearance: none;
      transition: border-color 160ms ease;
   }

.wws-search__input::placeholder
   {
      color: var(--wws-soft);
      opacity: 1;
   }

.wws-search__input::-webkit-search-decoration,
.wws-search__input::-webkit-search-cancel-button,
.wws-search__input::-webkit-search-results-button,
.wws-search__input::-webkit-search-results-decoration
   {
      -webkit-appearance: none;
   }

.wws-search .wws-search__input:hover
   {
      border-color: var(--wws-text);
   }

.wws-search .wws-search__input:focus
   {
      border-color: var(--wws-accent);
      outline: none;
   }

.wws-page .wws-search__input:focus-visible
   {
      outline: 2px solid var(--wws-accent);
      outline-offset: 2px;
   }

.wws-search__clear
   {
      position: absolute;
      top: 50%;
      right: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: var(--wws-muted);
      cursor: pointer;
      transform: translateY(-50%);
      transition: color 160ms ease;
   }

.wws-search__clear[hidden]
   {
      display: none;
   }

.wws-search__clear:hover
   {
      color: var(--wws-accent);
   }

.wws-search__clear svg
   {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.75;
      stroke-linecap: round;
   }

/* ---------------------------------------------------------------- groups */
/* Sector name holds still on the left while its clients scroll past. */
.wws-group
   {
      display: grid;
      grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr);
      gap: clamp(32px, 5vw, 80px);
      padding: 4rem 0;
      border-bottom: 1px solid var(--wws-rule);
   }

.wws-group[hidden]
   {
      display: none;
   }

.wws-group__head
   {
      position: sticky;
      top: calc(var(--kisaka-header-h) + 2rem);
      align-self: start;
      min-width: 0;
   }

.wws-group__title
   {
      margin: 0;
      color: var(--wws-text);
      font-family: "Newsreader", Georgia, "Times New Roman", serif;
      font-optical-sizing: auto;
      font-size: clamp(1.625rem, 2.4vw, 2rem);
      font-weight: 500;
      letter-spacing: -0.015em;
      line-height: 1.15;
   }

.wws-page .wws-group__count
   {
      margin-top: 0.75rem;
      color: var(--wws-accent);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-variant-numeric: tabular-nums;
   }

.wws-page .wws-group__note
   {
      max-width: 22rem;
      margin-top: 0.75rem;
      font-size: 0.9375rem;
      line-height: 1.6;
   }

.wws-group__list
   {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
      gap: 16px;
      margin: 0;
      padding: 0;
      list-style: none;
   }

/* --------------------------------------------------------------- clients */
/* These don't link anywhere, so no hover lift. They just sit there, quiet. */
.wws-client
   {
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 0 1.25rem 1.25rem;
      border: 1px solid var(--wws-line);
      border-radius: 14px;
      background: var(--wws-surface);
      box-shadow: var(--wws-shadow);
   }

.wws-client[hidden]
   {
      display: none;
   }

.wws-client__logo
   {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 112px;
      margin: 0 -1.25rem 1.125rem;
      padding: 0 1.5rem;
   }

/* Every logo gets its own height (--logo-h, set on the tag) worked out from
   its shape, so a wide wordmark and a round crest carry about the same weight
   instead of the crests looking tiny next to the wordmarks. */
.wws-client__img
   {
      display: block;
      width: auto;
      height: var(--logo-h, 56px);
      max-width: 80%;
      object-fit: contain;
   }

.wws-client__img--emblem
   {
      border-radius: 22px;
   }

.wws-client__img--rounded
   {
      border-radius: 10px;
   }

.wws-client__name
   {
      margin: 0;
      color: var(--wws-text);
      font-family: var(--kisaka-font-accent);
      font-size: 1rem;
      font-weight: 500;
      letter-spacing: -0.01em;
      line-height: 1.35;
      overflow-wrap: anywhere;
   }

.wws-page .wws-client__note
   {
      margin-top: 0.375rem;
      font-size: 0.875rem;
      line-height: 1.55;
   }

/* --------------------------------------------------------------- empty */
.wws-empty
   {
      padding: 5rem 0;
      text-align: center;
   }

.wws-empty[hidden]
   {
      display: none;
   }

.wws-page .wws-empty__title
   {
      color: var(--wws-text);
      font-family: "Newsreader", Georgia, "Times New Roman", serif;
      font-size: 1.5rem;
      font-weight: 500;
      line-height: 1.3;
      overflow-wrap: anywhere;
   }

.wws-page .wws-empty__hint
   {
      margin-top: 0.5rem;
   }

.wws-empty__clear
   {
      min-height: 44px;
      margin-top: 1.25rem;
      padding: 0 1.25rem;
      border: 1px solid var(--wws-control-line);
      border-radius: var(--kisaka-btn-radius, 8px);
      background: var(--wws-surface);
      color: var(--wws-text);
      font-family: inherit;
      font-size: 0.9375rem;
      font-weight: 500;
      cursor: pointer;
      transition: border-color 160ms ease, color 160ms ease, transform 100ms ease-out;
   }

.wws-empty__clear:hover
   {
      border-color: var(--wws-accent);
      color: var(--wws-accent);
   }

.wws-empty__clear:active
   {
      transform: scale(0.97);
      transition-duration: 0ms;
   }

/* ---------------------------------------------------------------- close */
.wws-close
   {
      padding: 4.5rem 0 6rem;
   }

.wws-close__grid
   {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 2rem clamp(32px, 6vw, 96px);
      align-items: end;
   }

.wws-close__title
   {
      margin: 0;
      color: var(--wws-text);
      font-family: var(--kisaka-font-accent);
      font-size: clamp(2rem, 3.4vw, 2.75rem);
      font-weight: 500;
      letter-spacing: -0.035em;
      line-height: 1.08;
   }

.wws-page .wws-close__text
   {
      max-width: 34rem;
      margin-top: 0.875rem;
      font-size: 1.0625rem;
   }

.wws-close__actions
   {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
   }

.wws-action, .wws-action:visited
   {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 48px;
      padding: 12px 20px 12px 22px;
      border: 1px solid var(--wws-accent);
      border-radius: var(--kisaka-btn-radius, 8px);
      font-family: var(--kisaka-font-accent);
      font-size: 0.9375rem;
      font-weight: 500;
      letter-spacing: -0.01em;
      line-height: 1.2;
      text-decoration: none;
      white-space: nowrap;
      transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 100ms ease-out;
   }

.wws-action--primary, .wws-action--primary:visited
   {
      background: var(--wws-accent);
      color: #fff;
   }

.wws-action--primary:hover, .wws-action--primary:focus-visible
   {
      background: var(--kisaka-red-700);
      border-color: var(--kisaka-red-700);
      color: #fff;
      text-decoration: none;
   }

.wws-action--quiet, .wws-action--quiet:visited
   {
      border-color: var(--wws-control-line);
      background: transparent;
      color: var(--wws-text);
   }

.wws-action--quiet:hover, .wws-action--quiet:focus-visible
   {
      border-color: var(--wws-text);
      color: var(--wws-text);
      text-decoration: none;
   }

.wws-page .wws-action:active
   {
      transform: scale(0.97);
      transition-duration: 0ms;
   }

.wws-page .wws-action--primary:active
   {
      background: var(--kisaka-red-800);
      border-color: var(--kisaka-red-800);
      color: #fff;
   }

.wws-action .kisaka-home-launch__btn-arrow-box
   {
      width: 14px;
      height: 14px;
   }

/* Same flying arrow as the rest of the site. */
.wws-action:hover .kisaka-home-launch__btn-arrow,
.wws-action:focus-visible .kisaka-home-launch__btn-arrow
   {
      transform: translate(115%, -115%);
   }

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

/* ----------------------------------------------------------- responsive */
@media (max-width: 991px)
   {
      .wws-intro
         {
            padding: calc(var(--kisaka-header-h) + 3rem) 0 3.5rem;
         }

      .wws-intro__grid
         {
            grid-template-columns: minmax(0, 1fr);
            gap: 3rem;
         }

      .wws-group
         {
            grid-template-columns: minmax(0, 1fr);
            gap: 1.75rem;
            padding: 3rem 0;
         }

      .wws-group__head
         {
            position: static;
         }

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

/* Same one-row phone header as contact. Without it the menu button drops
   under the logo and the bar ends up twice as tall. */
@media (max-width: 767px)
   {
      body.kisaka-who-serve-page
         {
            --kisaka-header-h: 76px;
            --kisaka-header-pad-x: 20px;
         }

      body.kisaka-who-serve-page .header .header-inner
         {
            padding-bottom: 0;
         }

      body.kisaka-who-serve-page .header .kisaka-header-row
         {
            margin: 0;
         }

      body.kisaka-who-serve-page .header .kisaka-header-brand
         {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            max-width: 100%;
            padding: 0 !important;
         }

      body.kisaka-who-serve-page .header .kisaka-header-nav-col
         {
            display: none;
         }

      body.kisaka-who-serve-page .header .logo
         {
            min-height: 76px;
            gap: 8px;
            padding: 0;
         }

      body.kisaka-who-serve-page .header .logo img
         {
            width: 36px;
         }

      body.kisaka-who-serve-page .header .kisaka-logo-text
         {
            font-size: clamp(16px, 4.9vw, 19px);
         }

      body.kisaka-who-serve-page .mobile-nav
         {
            position: static;
         }

      body.kisaka-who-serve-page .slicknav_btn
         {
            height: auto;
            min-height: 0;
         }
   }

@media (max-width: 480px)
   {
      .wws-shell, body.kisaka-who-serve-page .header .header-inner .container
         {
            width: calc(100% - 40px);
         }

      .wws-intro
         {
            padding-top: calc(var(--kisaka-header-h) + 2.5rem);
         }
   }

/* On phones each client turns into a row, logo on the left, so long names
   like CRS still read without the card stretching to fill the screen. */
@media (max-width: 599px)
   {
      .wws-toolbar
         {
            flex-direction: column-reverse;
            align-items: stretch;
            gap: 0.75rem;
         }

      .wws-search
         {
            flex-basis: auto;
         }

      .wws-group__list
         {
            grid-template-columns: minmax(0, 1fr);
            gap: 10px;
         }

      .wws-client
         {
            display: grid;
            grid-template-columns: 76px minmax(0, 1fr);
            column-gap: 1rem;
            align-items: center;
            padding: 0.875rem 1rem 0.875rem 0.875rem;
         }

      .wws-client__logo
         {
            grid-row: 1 / span 2;
            height: 64px;
            margin: 0;
            padding: 0;
            padding-right: 0.75rem;
         }

      .wws-client__img
         {
            height: calc(var(--logo-h, 56px) * 0.62);
            max-width: 100%;
         }

      .wws-client__name
         {
            align-self: end;
         }

      .wws-page .wws-client__note
         {
            align-self: start;
            margin-top: 0.125rem;
            font-size: 0.8125rem;
         }

      .wws-close__actions
         {
            flex-direction: column;
         }

      .wws-action
         {
            width: 100%;
         }
   }

@media (prefers-reduced-motion: reduce)
   {
      .wws-tally__row, .wws-search__input, .wws-action, .wws-empty__clear
         {
            transition: none;
         }

      .wws-page .wws-action:active, .wws-empty__clear:active
         {
            transform: none;
         }
   }

@media (prefers-contrast: more)
   {
      body.kisaka-who-serve-page
         {
            --wws-line: #97858c;
            --wws-rule: #97858c;
            --wws-muted: #4a4043;
         }
   }

@media (prefers-reduced-transparency: reduce)
   {
      body.kisaka-who-serve-page .header .header-inner,
      body.kisaka-who-serve-page .header.sticky .header-inner
         {
            background: var(--wws-bg);
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
         }
   }