/* Kisaka & Company — Services index and the service pillar pages. */
/* Service pillar pages (e.g. audit-assurance.html) — Deloitte-style depth, Kisaka brand */
.kisaka-svc-pillar-page #main-content
   {
      scroll-margin-top: calc(var(--kisaka-header-h, 72px) + 8px);
   }

.kisaka-svc-pillar-breadcrumb
   {
      background: #f0f1f5;
      border-bottom: 1px solid #e4e6ec;
      padding: 12px 0;
   }

.kisaka-svc-pillar-breadcrumb__list
   {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 10px;
      font-size: 13px;
      font-weight: 500;
      color: #5a5d68;
   }

.kisaka-svc-pillar-breadcrumb__list li[aria-current="page"]
   {
      color: #cb1f34;
      font-weight: 600;
   }

.kisaka-svc-pillar-hero
   {
      background: linear-gradient(155deg, #25263a 0%, #14151f 55%, #1a1c28 100%);
      color: #fff;
      padding: 40px 0 56px;
      position: relative;
      overflow: hidden;
   }

/* Service pillar heroes (e.g. audit-assurance.html): edge photo from `img/services/` fades into the gradient. */
.kisaka-svc-pillar-hero > .kisaka-hero-edge-photo
   {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image: url("../img/services/audit_and_assurance.webp");
      background-repeat: no-repeat;

      /* Bias framing toward desk / paperwork (often mid–lower in audit stock). */
      background-position: 92% 62%;
      background-size: min(1320px, 235%) auto;
      opacity: 0.94;

      /* Softer, wider reveal so documents stay readable before the text column. */
      -webkit-mask-image: linear-gradient( to right, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 40%, hsla(0, 0%, 0%, 0.1) 52%, hsla(0, 0%, 0%, 0.42) 64%, hsla(0, 0%, 0%, 0.88) 78%, hsla(0, 0%, 0%, 1) 100% );
      mask-image: linear-gradient( to right, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 40%, hsla(0, 0%, 0%, 0.1) 52%, hsla(0, 0%, 0%, 0.42) 64%, hsla(0, 0%, 0%, 0.88) 78%, hsla(0, 0%, 0%, 1) 100% );
   }

@media (max-width: 991px)
   {
      .kisaka-svc-pillar-hero > .kisaka-hero-edge-photo
         {
            background-size: cover;
            background-position: 88% 68%;
            opacity: 0.88;
            -webkit-mask-image: linear-gradient( to right, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 28%, hsla(0, 0%, 0%, 0.18) 44%, hsla(0, 0%, 0%, 0.55) 58%, hsla(0, 0%, 0%, 1) 78% );
            mask-image: linear-gradient( to right, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 28%, hsla(0, 0%, 0%, 0.18) 44%, hsla(0, 0%, 0%, 0.55) 58%, hsla(0, 0%, 0%, 1) 78% );
         }
   }

@media (max-width: 991px)
   {
      .kisaka-mgmt-pillar-page .kisaka-svc-pillar-hero > .kisaka-hero-edge-photo
         {
            background-position: 80% 45%;
         }
   }

.kisaka-svc-pillar-hero::after
   {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: radial-gradient(ellipse 72% 55% at 82% 24%, rgba(203, 31, 52, 0.1) 0%, transparent 52%);
      pointer-events: none;
   }

.kisaka-svc-pillar-hero .container
   {
      position: relative;
      z-index: 2;
   }

.kisaka-svc-pillar-hero__eyebrow
   {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.55);
      margin: 0 0 6px;
   }

.kisaka-svc-pillar-hero__eyebrow--brand
   {
      color: #cb1f34;
      margin: 0 0 12px;
   }

.kisaka-svc-pillar-hero__title
   {
      font-size: clamp(2rem, 4.5vw, 3rem);
      font-weight: 800;
      line-height: 1.12;
      letter-spacing: -0.03em;
      margin: 0 0 16px;
      max-width: 16ch;
      color: #fff;
   }

.kisaka-svc-pillar-hero__lead
   {
      font-size: clamp(1rem, 1.6vw, 1.125rem);
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.82);
      max-width: 40em;
      margin: 0 0 28px;
   }

.kisaka-svc-pillar-hero__actions
   {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 14px;
   }

.kisaka-svc-pillar-hero__btn
   {
      font-weight: 600;
      font-size: 15px;
      padding: 12px 24px;
      border-radius: 8px;
      border: 2px solid transparent;
   }

.kisaka-svc-pillar-hero__btn--primary
   {
      background: #cb1f34;
      color: #fff !important;
      border-color: #cb1f34;
   }

.kisaka-svc-pillar-hero__btn--primary:hover, .kisaka-svc-pillar-hero__btn--primary:focus-visible
   {
      background: #a01829;
      border-color: #a01829;
      color: #fff !important;
   }

.kisaka-svc-pillar-hero__btn--ghost
   {
      background: transparent;
      color: #fff !important;
      border-color: rgba(255, 255, 255, 0.55);
   }

.kisaka-svc-pillar-hero__btn--ghost:hover, .kisaka-svc-pillar-hero__btn--ghost:focus-visible
   {
      border-color: #fff;
      color: #fff !important;
      background: rgba(255, 255, 255, 0.06);
   }

.kisaka-svc-pillar-intro
   {
      background: #fff;
      padding-top: 48px;
      padding-bottom: 48px;
   }

.kisaka-svc-pillar-intro__tagline
   {
      font-size: clamp(1.35rem, 2.5vw, 1.75rem);
      font-weight: 700;
      color: #2c2d3f;
      margin: 0 0 24px;
      line-height: 1.25;
      letter-spacing: -0.02em;
   }

.kisaka-svc-pillar-intro__p
   {
      font-size: 16px;
      line-height: 1.7;
      color: #5a5d68;
      margin: 0 0 16px;
   }

.kisaka-svc-pillar-glance
   {
      background: #fafbfc;
      border-top: 1px solid #e8eaef;
      padding-top: 52px;
      padding-bottom: 56px;
   }

.kisaka-svc-pillar-glance__head .kisaka-svc-pillar-section-title--center
   {
      margin-bottom: 8px;
   }

.kisaka-svc-pillar-glance__head
   {
      text-align: center;
      margin-bottom: 36px;
      margin-left: auto;
      margin-right: auto;
      max-width: 48rem;
      padding: 0 12px;
   }

.kisaka-svc-pillar-thinking__sub--center
   {
      display: block;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 0;
      max-width: 40em;
   }

.kisaka-svc-pillar-glance__head .kisaka-svc-pillar-thinking__sub--center
   {
      width: 100%;
      max-width: 36rem;
   }

.kisaka-svc-pillar-glance__row
   {
      margin-left: -12px;
      margin-right: -12px;
      -webkit-box-align: stretch;
      -ms-flex-align: stretch;
      align-items: stretch;
   }

.kisaka-svc-pillar-glance__row > [class*="col-"]
   {
      padding-left: 12px;
      padding-right: 12px;
   }

.kisaka-svc-pillar-glance__card:hover
   {
      border-color: #e0e3ea;
      box-shadow: 0 10px 36px rgba(44, 45, 63, 0.09);
      -webkit-transform: translateY(-2px);
      transform: translateY(-2px);
   }

.kisaka-svc-pillar-glance__card-top
   {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px;
      min-height: 48px;
   }

.kisaka-svc-pillar-glance__icon
   {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: rgba(203, 31, 52, 0.09);
      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;
      -ms-flex-negative: 0;
      flex-shrink: 0;
   }

.kisaka-svc-pillar-glance__icon i
   {
      font-size: 22px;
      color: #cb1f34;
      line-height: 1;
   }

.kisaka-svc-pillar-glance__label
   {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #cb1f34;
      margin: 0;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      line-height: 1.35;
   }

.kisaka-svc-pillar-glance__text
   {
      font-size: 15px;
      line-height: 1.65;
      color: #6b6f7a;
      margin: 0;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
   }

@media (min-width: 992px)
   {
      .kisaka-svc-pillar-glance__row > [class*="col-"]
         {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
         }

      .kisaka-svc-pillar-glance__row > [class*="col-"] > .kisaka-svc-pillar-glance__card
         {
            width: 100%;
         }
   }

@media (prefers-reduced-motion: reduce)
   {
      .kisaka-svc-pillar-glance__card:hover
         {
            -webkit-transform: none;
            transform: none;
         }
   }

.kisaka-svc-pillar-steps
   {
      background: #fff;
   }

.kisaka-svc-pillar-step
   {
      height: 100%;
      padding: 22px 20px 22px 24px;
      background: #f7f8fa;
      border-radius: 0 14px 14px 0;
      border-left: 4px solid #cb1f34;
      box-shadow: 0 2px 14px rgba(44, 45, 63, 0.05);
   }

.kisaka-svc-pillar-step__n
   {
      font-size: 13px;
      font-weight: 800;
      color: #cb1f34;
      letter-spacing: 0.04em;
      margin: 0 0 10px;
   }

.kisaka-svc-pillar-step__title
   {
      font-size: 1.05rem;
      font-weight: 700;
      color: #2c2d3f;
      margin: 0 0 10px;
      line-height: 1.3;
   }

.kisaka-svc-pillar-step__text
   {
      font-size: 14px;
      line-height: 1.65;
      color: #6b6f7a;
      margin: 0;
   }

.kisaka-svc-pillar-section-title
   {
      font-size: clamp(1.4rem, 2.5vw, 1.85rem);
      font-weight: 800;
      color: #2c2d3f;
      margin: 0 0 12px;
      letter-spacing: -0.02em;
   }

.kisaka-svc-pillar-section-title--center
   {
      text-align: center;
   }

.kisaka-svc-pillar-offers
   {
      background: #f7f8fa;
   }

.kisaka-svc-pillar-offer:hover
   {
      box-shadow: 0 10px 36px rgba(44, 45, 63, 0.08);
      transform: translateY(-2px);
   }

.kisaka-svc-pillar-offer__icon
   {
      width: 52px;
      height: 52px;
      border-radius: 12px;
      background: rgba(203, 31, 52, 0.09);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
   }

.kisaka-svc-pillar-offer__icon i
   {
      font-size: 24px;
      color: #cb1f34;
   }

.kisaka-svc-pillar-offer__title
   {
      font-size: 1.15rem;
      font-weight: 700;
      color: #2c2d3f;
      margin: 0 0 10px;
   }

.kisaka-svc-pillar-offer__text
   {
      font-size: 15px;
      line-height: 1.65;
      color: #6b6f7a;
      margin: 0 0 18px;
   }

.kisaka-svc-pillar-offer__link
   {
      font-weight: 600;
      font-size: 14px;
      color: #cb1f34;
      text-decoration: none;
   }

.kisaka-svc-pillar-offer__link:hover
   {
      color: #a01829;
      text-decoration: underline;
      text-underline-offset: 3px;
   }

.kisaka-svc-pillar-thinking
   {
      background: #fff;
   }

.kisaka-svc-pillar-thinking__sub
   {
      font-size: 16px;
      line-height: 1.65;
      color: #6b6f7a;
      margin: 0 0 28px;
      max-width: 42em;
   }

.kisaka-svc-pillar-think-card
   {
      height: 100%;
      display: flex;
      flex-direction: column;
   }

.kisaka-svc-pillar-think-card__media
   {
      display: block;
      height: 160px;
      border-radius: 12px;
      margin-bottom: 16px;
      background-size: cover;
      background-position: center;
   }

.kisaka-svc-pillar-think-card__media--a
   {
      background-image: linear-gradient(135deg, #3d2a4a 0%, #cb1f34 100%);
   }

.kisaka-svc-pillar-think-card__media--b
   {
      background-image: linear-gradient(135deg, #1e3a5f 0%, #2c4a6e 100%);
   }

.kisaka-svc-pillar-think-card__media--c
   {
      background-image: linear-gradient(135deg, #2c2d3f 0%, #4a4d62 100%);
   }

.kisaka-svc-pillar-think-card__label
   {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #cb1f34;
      margin: 0 0 8px;
   }

.kisaka-svc-pillar-think-card__title
   {
      font-size: 1.05rem;
      font-weight: 700;
      line-height: 1.35;
      margin: 0 0 8px;
   }

.kisaka-svc-pillar-think-card__meta
   {
      font-size: 13px;
      color: #8b9099;
      margin: 0;
      margin-top: auto;
   }

.kisaka-svc-pillar-band
   {
      background: #2c2d3f;
      color: #fff;
   }

.kisaka-svc-pillar-band__title
   {
      font-size: clamp(1.35rem, 2.4vw, 1.75rem);
      font-weight: 800;
      margin: 0 0 14px;
      line-height: 1.25;
      color: #fff;
   }

.kisaka-svc-pillar-band__text
   {
      font-size: 16px;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.82);
      margin: 0;
   }

.kisaka-svc-pillar-band__btn
   {
      font-weight: 600;
      padding: 12px 22px;
      border-radius: 8px;
      background: #cb1f34;
      color: #fff !important;
      border: 2px solid #cb1f34;
   }

.kisaka-svc-pillar-band__btn:hover
   {
      background: #a01829;
      border-color: #a01829;
      color: #fff !important;
   }

/* Audit pillar — “How we make an impact”: home-style blog cards, compact, multi-column */
.kisaka-svc-pillar-impact.blog
   {
      background: #f7f8fa;
      padding-top: 48px;
      padding-bottom: 56px;
   }

.kisaka-svc-pillar-impact.blog .kisaka-svc-pillar-section-title
   {
      margin-bottom: 8px;
   }

.kisaka-svc-pillar-impact.blog .kisaka-svc-pillar-thinking__sub
   {
      margin-bottom: 28px;
   }

.kisaka-svc-pillar-impact.blog .row > [class*="col-"]
   {
      margin-bottom: 20px;
   }

.kisaka-svc-pillar-impact.blog .single-news
   {
      border-radius: 10px;
      overflow: hidden;
      height: 100%;
      margin: 0;
      border: 1px solid #eceef3;
   }

.kisaka-svc-pillar-impact.blog .news-head
   {
      max-height: 140px;
   }

.kisaka-svc-pillar-impact.blog .single-news .news-content
   {
      padding: 16px 16px 18px;
   }

.kisaka-svc-pillar-impact.blog .single-news .news-body .date
   {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 4px 10px;
      margin-bottom: 8px;
   }

.kisaka-svc-pillar-impact.blog .single-news .news-body h2
   {
      font-size: 15px;
      font-weight: 600;
      line-height: 1.35;
      margin-bottom: 8px;
   }

.kisaka-svc-pillar-impact.blog .single-news .news-content p.text
   {
      font-size: 12px;
      line-height: 1.55;
      text-transform: none;
      letter-spacing: 0;
      margin: 0;
      color: #6b6f7a;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
   }

.kisaka-svc-pillar-impact.blog a.kisaka-news-card-hitarea .news-body h2
   {
      font-size: 15px;
   }

@media (min-width: 992px)
   {
      .kisaka-svc-pillar-impact.blog .row > [class*="col-"]
         {
            margin-bottom: 0;
         }
   }

.kisaka-svc-pillar-quality
   {
      background: #fff;
   }

.kisaka-svc-pillar-quality__text
   {
      font-size: 17px;
      line-height: 1.7;
      color: #5a5d68;
      margin: 0 0 20px;
   }

.kisaka-svc-pillar-quality__link
   {
      font-weight: 700;
      font-size: 15px;
      color: #cb1f34;
      text-decoration: none;
   }

.kisaka-svc-pillar-quality__link:hover
   {
      color: #a01829;
      text-decoration: underline;
   }

.kisaka-svc-pillar-lead
   {
      background: #f7f8fa;
      border-top: 1px solid #e8eaef;
      border-bottom: 1px solid #e8eaef;
   }

.kisaka-svc-pillar-lead__cta
   {
      margin: 20px 0 0;
   }

.kisaka-svc-pillar-disclaimer
   {
      background: #fafbfc;
      padding-top: 28px;
      padding-bottom: 28px;
   }

.kisaka-svc-pillar-disclaimer__text
   {
      font-size: 12px;
      line-height: 1.65;
      color: #8b9099;
      margin: 0;
      text-align: center;
   }

.kisaka-svc-pillar-connect
   {
      background: linear-gradient(180deg, #fff 0%, #f7f8fa 100%);
      padding-top: 56px;
      padding-bottom: 64px;
   }

.kisaka-svc-pillar-connect__title
   {
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 800;
      color: #2c2d3f;
      margin: 0 0 12px;
   }

.kisaka-svc-pillar-connect__text
   {
      font-size: 16px;
      color: #6b6f7a;
      margin: 0 auto 24px;
      max-width: 36em;
   }

.kisaka-svc-pillar-connect__actions
   {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      justify-content: center;
   }

.kisaka-svc-pillar-connect__btn
   {
      font-weight: 600;
      font-size: 15px;
      padding: 14px 26px;
      border-radius: 8px;
      border: 2px solid transparent;
   }

.kisaka-svc-pillar-connect__btn--solid
   {
      background: #cb1f34;
      color: #fff !important;
      border-color: #cb1f34;
   }

.kisaka-svc-pillar-connect__btn--solid:hover
   {
      background: #a01829;
      border-color: #a01829;
      color: #fff !important;
   }

.kisaka-svc-pillar-connect__btn--ghost
   {
      background: transparent;
      color: #2c2d3f !important;
      border-color: #2c2d3f;
   }

.kisaka-svc-pillar-connect__btn--ghost:hover
   {
      background: #2c2d3f;
      color: #fff !important;
   }

body.kisaka-it-scene-page.kisaka-nav-adaptive
   {
      --kisaka-nav-opaque: #14151f;
   }

/* ===== Blog ===== */
.blog
   {
      background: #fff;
   }

.blog .single-news
   {
      background: #fff;
      position: relative;
      -webkit-transition: all 0.4s ease;
      -moz-transition: all 0.4s ease;
      transition: all 0.4s ease;
      box-shadow: 0px 0px 10px #00000014;
   }

.blog .single-news img
   {
      width: 100%;
      margin: 0;
      padding: 0;
      -webkit-transition: all 0.4s ease;
      -moz-transition: all 0.4s ease;
      transition: all 0.4s ease;
   }

.blog .single-news .news-head
   {
      position: relative;
      overflow: hidden;
   }

.blog .single-news .news-content
   {
      text-align: left;
      background: #fff;
      position: relative;
      padding: 30px;
      left: 0;
      z-index: 1;
   }

.blog .single-news .news-content:before
   {
      position: absolute;
      content: "";
      left: 0;
      bottom: 0;
      height: 2px;
      width: 0%;
      background: #CB1F34;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      -webkit-transition: all 0.4s ease;
      -moz-transition: all 0.4s ease;
      transition: all 0.4s ease;
   }

.blog .single-news:hover .news-content:before
   {
      opacity: 1;
      visibility: visible;
      width: 100%;
   }

.blog .single-news .news-body h2
   {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
      line-height: 24px;
   }

.blog .single-news .news-body h2 a
   {
      color: #2C2D3F;
      font-weight: 500;
   }

.blog .single-news .news-content p
   {
      font-weight: 400;
      text-transform: capitalize;
      font-size: 13px;
      letter-spacing: 0px;
      line-height: 23px;
   }

.blog .single-news .news-body .date
   {
      display: inline-block;
      font-size: 14px;
      margin-bottom: 5px;
      background: #CB1F34;
      color: #fff;
      padding: 4px 15px;
      border-radius: 3px;
      font-size: 14px;
      margin-bottom: 10px;
   }

.blog a.kisaka-news-card-hitarea .news-body h2
   {
      color: #2C2D3F;
      font-weight: 500;
   }

.blog a.kisaka-news-card-hitarea:hover .news-body h2,
.blog a.kisaka-news-card-hitarea:focus-visible .news-body h2
   {
      color: #CB1F34;
   }

.blog a.kisaka-news-card-hitarea:hover .news-content:before
   {
      opacity: 1;
      visibility: visible;
      width: 100%;
   }

.blog a.kisaka-news-card-hitarea:focus-visible
   {
      outline: 2px solid #CB1F34;
      outline-offset: 3px;
   }

/* ===== Appointment ===== */
.appointment
   {
      background: #fff;
      padding-top: 100px;
   }

.appointment .form
   {
      margin-top: 30px;
   }

.appointment .form input
   {
      width: 100%;
      height: 50px;
      border: 1px solid #eee;
      text-transform: capitalize;
      padding: 0px 18px;
      color: #555;
      font-size: 14px;
      font-weight: 400;
      border-radius: 0;
      border-radius: 4px;
   }

.appointment .form textarea
   {
      width: 100%;
      height: 200px;
      padding: 18px;
      border: 1px solid #eee;
      text-transform: capitalize;
      resize: none;
      border-radius: 4px;
   }

.appointment .button .btn:hover
   {
      color: #fff;
   }

.appointment .form p
   {
      margin-top: 10px;
      color: #868686;
   }

/* ==========================================================================
   Services hero — full-bleed fog stage (services.html)

   Cloned layout: a 100dvh sticky stage that holds for one extra viewport
   before the page slides over it, with the headline and service ticker set
   against the bottom edge. The stage and the ticker run the full viewport
   width; the copy column carries its own edge gutter instead of sitting in
   the Bootstrap .container's centred 1140px column.

   Background is the Vanta.js FOG shader (js/kisaka-fog.js) painted onto
   .kisaka-svc-hero__canvas. Set --kisaka-svc-hero-hold: 0 to drop the
   extra scroll hold.
   ========================================================================== */
.kisaka-svc-hero-wrap
   {
      --kisaka-svc-hero-hold: 0px;

      /* Single source of truth for the stage's left/right gutter. */
      --kisaka-svc-hero-gutter: clamp(20px, 4.2vw, 72px);
      position: relative;
      z-index: 1;
      background-color: var(--kisaka-red-ink, #140809);
   }

.kisaka-svc-hero-block
   {
      height: var(--kisaka-svc-hero-hold);
   }

.kisaka-svc-hero
   {
      position: -webkit-sticky;
      position: sticky;
      bottom: 0;
      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: end;
      -ms-flex-pack: end;
      justify-content: flex-end;
      height: 100vh;
      overflow: hidden;
      background-color: var(--kisaka-red-ink, #140809);
      color: #fff;
   }

@supports (height: 100dvh)
   {
      .kisaka-svc-hero
         {
            height: 100dvh;
         }
   }

/* --- Background: shader canvas + scrim ---------------------------------- */
/* The canvas renders at 1/scale resolution and is stretched here — that
   softness is part of the fog look. */
.kisaka-svc-hero__bg
   {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      overflow: hidden;
      pointer-events: none;

      /* Fallback tone if WebGL is unavailable; the canvas covers it once ready. */
      background: -webkit-radial-gradient(28% 78%, 120% 110%, #9e1829 0%, #3d121a 42%, #140809 100%);
      background: radial-gradient(120% 110% at 28% 78%, #9e1829 0%, #3d121a 42%, #140809 100%);
   }

.kisaka-svc-hero__canvas
   {
      display: block;
      width: 100%;
      height: 100%;
      opacity: 0;
   }

.kisaka-svc-hero__canvas[data-kisaka-fog-ready]
   {
      opacity: 1;
   }

/* The fog is a moving background, so the text's contrast has to come from the
   scrim rather than from any one frame of it. Weighted to the bottom, where
   the small ticker type sits. */
.kisaka-svc-hero__scrim
   {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: -webkit-linear-gradient(bottom, rgba(10, 4, 5, 0.9) 0%, rgba(10, 4, 5, 0.62) 34%, rgba(10, 4, 5, 0.2) 68%, rgba(10, 4, 5, 0.34) 100%);
      background: linear-gradient(to top, rgba(10, 4, 5, 0.9) 0%, rgba(10, 4, 5, 0.62) 34%, rgba(10, 4, 5, 0.2) 68%, rgba(10, 4, 5, 0.34) 100%);
   }

/* --- Copy column -------------------------------------------------------- */
.kisaka-svc-hero__container
   {
      position: relative;
      z-index: 2;

      /* Flex item of .kisaka-svc-hero: min-width 0 keeps the ticker's
         max-content track from forcing the column wider than the viewport. */
      -ms-flex: 0 1 auto;
      flex: 0 1 auto;
      width: 100%;
      min-width: 0;
      padding: calc(var(--kisaka-header-h, 72px) + 24px) var(--kisaka-svc-hero-gutter) clamp(28px, 4.4vh, 52px);
   }

/* No measure cap: the headline's own line breaks come from the block spans in
   the markup, so it can use the full width the gutter leaves it. */
.kisaka-svc-hero__content
   {
      max-width: 100%;
   }

/* Eyebrow: small type, so it takes a positive tracking bump and a heavier
   weight to hold up over the fog. The rule ties it to the headline below. */
.kisaka-svc-hero__eyebrow
   {
      margin: 0 0 clamp(14px, 2.2vh, 26px);
      color: var(--kisaka-red);
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 0.1em;
      text-transform: uppercase;
   }

/* Tracking is size-specific: display type reads too loose as it grows, so it
   tightens at the large end and eases off on narrow screens. */
.kisaka-svc-hero__title
   {
      margin: 0;
      color: #fff;
      font-family: var(--kisaka-font-family, sans-serif);
      font-weight: 700;
      font-size: clamp(2.125rem, 5.8vw, 4.875rem);
      line-height: 1.04;
      letter-spacing: -0.012em;
      text-transform: none;
      font-optical-sizing: auto;
      text-wrap: balance;
   }

.kisaka-svc-hero__title > span
   {
      display: block;

      /* Descender buffer so the clip never shaves g/p/y at rest. */
      padding-bottom: 0.12em;
      margin-bottom: -0.12em;
   }

/* Vibrancy over a changing background: flat mid-grey would dissolve into the
   fog, so the soft line keeps enough luminance to hold its edge. */
.kisaka-svc-hero__title-soft
   {
      color: rgba(255, 255, 255, 0.68);
   }

.kisaka-svc-hero__reveal
   {
      display: block;
   }

/* --- Services load intro (leaf of home launch orchestration) -------------- */
body.kisaka-svc-intro-ready .kisaka-svc-hero__title:not(.is-settled) > span
   {
      overflow: hidden;
   }

body.kisaka-svc-intro-ready .kisaka-svc-hero__title:not(.is-settled) .kisaka-svc-hero__reveal
   {
      will-change: transform;
   }

body.kisaka-svc-intro-ready .kisaka-svc-hero__reveal
   {
      -webkit-transform: translate3d(0, 110%, 0);
      transform: translate3d(0, 110%, 0);
   }

body.kisaka-svc-intro-playing .kisaka-svc-hero__reveal
   {
      -webkit-transition: -webkit-transform 1s var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
      transition: transform 1s var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
   }

body.kisaka-svc-intro-playing .kisaka-svc-hero__title > span:nth-child(2) > .kisaka-svc-hero__reveal
   {
      -webkit-transition-delay: 0.06s;
      transition-delay: 0.06s;
   }

body.kisaka-svc-intro-ready .kisaka-svc-hero__title.is-visible .kisaka-svc-hero__reveal
   {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
   }

body.kisaka-svc-intro-ready .kisaka-svc-hero__eyebrow,
body.kisaka-svc-intro-ready .kisaka-svc-hero__lead,
body.kisaka-svc-intro-ready .kisaka-svc-hero__scroll
   {
      opacity: 0;
      -webkit-transform: translate3d(0, 10px, 0);
      transform: translate3d(0, 10px, 0);
   }

body.kisaka-svc-intro-playing .kisaka-svc-hero__eyebrow,
body.kisaka-svc-intro-playing .kisaka-svc-hero__lead,
body.kisaka-svc-intro-playing .kisaka-svc-hero__scroll
   {
      -webkit-transition: opacity 600ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), -webkit-transform 600ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
      transition: opacity 600ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), transform 600ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
   }

body.kisaka-svc-intro-ready .kisaka-svc-hero__eyebrow.is-visible,
body.kisaka-svc-intro-ready .kisaka-svc-hero__lead.is-visible,
body.kisaka-svc-intro-ready .kisaka-svc-hero__scroll.is-visible
   {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
   }

/* --- Panel snap exit ----------------------------------------------------- */
/* The hero copy starts leaving while the page is still travelling to
   #overview, the way the home hero retracts on a panel snap. Headline lines
   pull back up into their clip; eyebrow and lead lift and fade. Driven by
   body.kisaka-svc-hero-exiting from the services panel snap. */
body.kisaka-svc-hero-exiting .kisaka-svc-hero__title > span
   {
      overflow: hidden;
   }

body.kisaka-svc-hero-exiting .kisaka-svc-hero__title .kisaka-svc-hero__reveal,
body.kisaka-svc-hero-exiting .kisaka-svc-hero__title.is-visible .kisaka-svc-hero__reveal
   {
      -webkit-transition: -webkit-transform var(--kisaka-dur-reveal, 520ms) var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
      transition: transform var(--kisaka-dur-reveal, 520ms) var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
      -webkit-transform: translate3d(0, -110%, 0);
      transform: translate3d(0, -110%, 0);
   }

body.kisaka-svc-hero-exiting .kisaka-svc-hero__eyebrow,
body.kisaka-svc-hero-exiting .kisaka-svc-hero__lead,
body.kisaka-svc-hero-exiting .kisaka-svc-hero__eyebrow.is-visible,
body.kisaka-svc-hero-exiting .kisaka-svc-hero__lead.is-visible
   {
      -webkit-transition: opacity var(--kisaka-dur-reveal, 520ms) var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), -webkit-transform var(--kisaka-dur-reveal, 520ms) var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
      transition: opacity var(--kisaka-dur-reveal, 520ms) var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), transform var(--kisaka-dur-reveal, 520ms) var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
      opacity: 0;
      -webkit-transform: translate3d(0, -18px, 0);
      transform: translate3d(0, -18px, 0);
   }

/* The cue drops as soon as the page leaves the top, as on home. */
body.kisaka-svc-scroll-cue-hidden .kisaka-svc-hero__scroll,
body.kisaka-svc-scroll-cue-hidden .kisaka-svc-hero__scroll.is-visible
   {
      -webkit-transition: opacity 320ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
      transition: opacity 320ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
      opacity: 0;
      pointer-events: none;
   }

@media (prefers-reduced-motion: reduce)
   {
      body.kisaka-svc-hero-exiting .kisaka-svc-hero__title .kisaka-svc-hero__reveal,
      body.kisaka-svc-hero-exiting .kisaka-svc-hero__title.is-visible .kisaka-svc-hero__reveal,
      body.kisaka-svc-hero-exiting .kisaka-svc-hero__eyebrow,
      body.kisaka-svc-hero-exiting .kisaka-svc-hero__lead,
      body.kisaka-svc-hero-exiting .kisaka-svc-hero__eyebrow.is-visible,
      body.kisaka-svc-hero-exiting .kisaka-svc-hero__lead.is-visible
         {
            -webkit-transition: none;
            transition: none;
            opacity: 1;
            -webkit-transform: none;
            transform: none;
         }

      body.kisaka-svc-scroll-cue-hidden .kisaka-svc-hero__scroll,
      body.kisaka-svc-scroll-cue-hidden .kisaka-svc-hero__scroll.is-visible
         {
            -webkit-transition: none;
            transition: none;
         }
   }

/* Ticker on-load: opacity + clip only — never transform (marquee owns that). */
body.kisaka-svc-intro-ready .kisaka-svc-hero__ticker
   {
      opacity: 0;
      -webkit-clip-path: inset(0 0 100% 0);
      clip-path: inset(0 0 100% 0);
      -webkit-transform: none;
      transform: none;
   }

body.kisaka-svc-intro-playing .kisaka-svc-hero__ticker
   {
      -webkit-transition: opacity 600ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), -webkit-clip-path 720ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
      transition: opacity 600ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), clip-path 720ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
   }

body.kisaka-svc-intro-ready .kisaka-svc-hero__ticker.is-visible
   {
      opacity: 1;
      -webkit-clip-path: inset(0 0 0 0);
      clip-path: inset(0 0 0 0);
      -webkit-transform: none;
      transform: none;
   }

.kisaka-svc-hero__canvas
   {
      -webkit-transition: opacity 700ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
      transition: opacity 700ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
   }

@media (prefers-reduced-motion: reduce)
   {
      body.kisaka-svc-intro-ready .kisaka-svc-hero__reveal
         {
            -webkit-transform: none;
            transform: none;
         }

      body.kisaka-svc-intro-playing .kisaka-svc-hero__reveal
         {
            -webkit-transition: none;
            transition: none;
         }

      body.kisaka-svc-intro-ready .kisaka-svc-hero__eyebrow,
      body.kisaka-svc-intro-ready .kisaka-svc-hero__lead,
      body.kisaka-svc-intro-ready .kisaka-svc-hero__scroll
         {
            -webkit-transform: none;
            transform: none;
         }

      body.kisaka-svc-intro-ready .kisaka-svc-hero__ticker
         {
            -webkit-clip-path: none;
            clip-path: none;
            -webkit-transform: none;
            transform: none;
         }

      body.kisaka-svc-intro-playing .kisaka-svc-hero__eyebrow,
      body.kisaka-svc-intro-playing .kisaka-svc-hero__lead,
      body.kisaka-svc-intro-playing .kisaka-svc-hero__scroll,
      body.kisaka-svc-intro-playing .kisaka-svc-hero__ticker
         {
            -webkit-transition: opacity 200ms ease;
            transition: opacity 200ms ease;
         }

      .kisaka-svc-hero__canvas
         {
            -webkit-transition: opacity 200ms ease;
            transition: opacity 200ms ease;
         }
   }

.kisaka-svc-hero__lead
   {
      margin: clamp(16px, 2.4vh, 28px) 0 0;
      max-width: 38rem;
      color: rgba(255, 255, 255, 0.78);
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: clamp(0.9375rem, 1.35vw, 1.0625rem);
      font-weight: 400;
      line-height: 1.65;
      letter-spacing: 0.01em;
   }

/* --- Scroll cue: wayfinding, not a marketing CTA -------------------------- */
.kisaka-svc-hero__scroll
   {
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      gap: 0.45em;
      margin-top: clamp(28px, 4vh, 48px);
      padding: 2px 0;
      color: rgba(255, 255, 255, 0.78);
      font-family: var(--kisaka-font-accent, sans-serif);
      text-decoration: none !important;
      -webkit-transition: color 180ms var(--kisaka-ease-out, ease-out), -webkit-transform 100ms ease-out;
      transition: color 180ms var(--kisaka-ease-out, ease-out), transform 100ms ease-out;
   }

.kisaka-svc-hero__scroll:hover, .kisaka-svc-hero__scroll:focus-visible
   {
      color: #fff;
   }

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

/* Feedback on press — instant, critically damped. */
.kisaka-svc-hero__scroll:active
   {
      -webkit-transform: scale(0.97);
      transform: scale(0.97);
   }

.kisaka-svc-hero__scroll-label
   {
      font-size: 0.9375rem;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: 0.01em;
   }

.kisaka-svc-hero__scroll-chevrons
   {
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-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;
      -ms-flex: none;
      flex: none;
      width: 14px;
      height: 14px;
      margin-top: 1px;
      overflow: hidden;
   }

.kisaka-svc-hero__scroll-chevron
   {
      display: block;
      width: 14px;
      height: 9px;
      margin-top: -3px;
      opacity: 0.45;
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-animation: kisaka-svc-hero-chevron-dance 1.4s var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)) infinite;
      animation: kisaka-svc-hero-chevron-dance 1.4s var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)) infinite;
   }

.kisaka-svc-hero__scroll-chevron:first-child
   {
      margin-top: 0;
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
   }

.kisaka-svc-hero__scroll-chevron:last-child
   {
      -webkit-animation-delay: 0.14s;
      animation-delay: 0.14s;
   }

@media (hover: hover) and (pointer: fine)
   {
      .kisaka-svc-hero__scroll:hover .kisaka-svc-hero__scroll-chevrons,
      .kisaka-svc-hero__scroll:focus-visible .kisaka-svc-hero__scroll-chevrons
         {
            -webkit-transform: translateY(2px);
            transform: translateY(2px);
         }

      .kisaka-svc-hero__scroll-chevrons
         {
            -webkit-transition: -webkit-transform 160ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
            transition: transform 160ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
         }
   }

/* --- Service ticker ----------------------------------------------------- */
/* Runs edge to edge; .kisaka-svc-hero__track holds two identical groups and
   travels -50%, so the loop is seamless. The mask is a scroll edge effect
   rather than a hard cut at the gutter. */
.kisaka-svc-hero__ticker
   {
      position: relative;
      z-index: 2;
      -ms-flex: none;
      flex: none;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      padding-bottom: clamp(28px, 5vh, 64px);
      overflow: hidden;
      -webkit-mask-image: -webkit-linear-gradient(left, transparent 0, #000 var(--kisaka-svc-hero-gutter), #000 calc(100% - var(--kisaka-svc-hero-gutter)), transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--kisaka-svc-hero-gutter), #000 calc(100% - var(--kisaka-svc-hero-gutter)), transparent 100%);
      mask-image: linear-gradient(to right, transparent 0, #000 var(--kisaka-svc-hero-gutter), #000 calc(100% - var(--kisaka-svc-hero-gutter)), transparent 100%);
   }

.kisaka-svc-hero__track
   {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: -webkit-max-content;
      width: -moz-max-content;
      width: max-content;
      -webkit-animation: kisaka-svc-hero-marquee 44s linear infinite;
      animation: kisaka-svc-hero-marquee 44s linear infinite;
      -webkit-animation-play-state: paused;
      animation-play-state: paused;
      will-change: transform;
   }

.kisaka-svc-hero__ticker.is-visible .kisaka-svc-hero__track
   {
      -webkit-animation-play-state: running;
      animation-play-state: running;
   }

.kisaka-svc-hero__group
   {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex: none;
      flex: none;
      margin: 0;
      padding: 0;
      list-style: none;
   }

/* One service per item. Small type gets a positive tracking bump for
   legibility over the fog. */
.kisaka-svc-hero__item
   {
      -ms-flex: none;
      flex: none;
      position: relative;
      padding-left: 4.6em;
      color: rgba(255, 255, 255, 0.92);
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: 0.8125rem;
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      white-space: nowrap;
   }

/* Every item carries its own leading split separator (line + outward
   triangles), so the rhythm stays even between items and across the loop. */
.kisaka-svc-hero__item::before
   {
      content: "";
      position: absolute;
      top: 50%;
      left: 1.15em;
      width: 2.1em;
      height: 0.7em;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      background-color: var(--kisaka-red, #cb1f34);
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 16' fill='%23000'%3E%3Crect x='0' y='7' width='15' height='2'/%3E%3Cpolygon points='17,8 24,3 24,13'/%3E%3Cpolygon points='26,3 33,8 26,13'/%3E%3Crect x='35' y='7' width='13' height='2'/%3E%3C/svg%3E");
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 16' fill='%23000'%3E%3Crect x='0' y='7' width='15' height='2'/%3E%3Cpolygon points='17,8 24,3 24,13'/%3E%3Cpolygon points='26,3 33,8 26,13'/%3E%3Crect x='35' y='7' width='13' height='2'/%3E%3C/svg%3E");
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-size: contain;
      mask-size: contain;
   }

@media (min-width: 992px)
   {
      .kisaka-svc-hero__title
         {
            letter-spacing: -0.022em;
         }
   }

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

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

/* A full-viewport moving background and a looping marquee are exactly what
   this setting is for: hold the fog on one frame, stop the line, drop the
   scroll hold, and let the services wrap as a static list. */
@media (prefers-reduced-motion: reduce)
   {
      .kisaka-svc-hero-wrap
         {
            --kisaka-svc-hero-hold: 0px;
         }

      .kisaka-svc-hero
         {
            position: relative;
         }

      .kisaka-svc-hero__scroll
         {
            -webkit-transition: color 180ms ease;
            transition: color 180ms ease;
         }

      .kisaka-svc-hero__scroll:active
         {
            -webkit-transform: none;
            transform: none;
         }

      .kisaka-svc-hero__scroll-chevron
         {
            opacity: 0.75;
            -webkit-animation: none;
            animation: none;
            -webkit-transform: none;
            transform: none;
         }

      .kisaka-svc-hero__scroll-chevrons
         {
            -webkit-transition: none;
            transition: none;
         }

      .kisaka-svc-hero__ticker
         {
            padding-right: var(--kisaka-svc-hero-gutter);
            padding-left: var(--kisaka-svc-hero-gutter);
            -webkit-mask-image: none;
            mask-image: none;
         }

      /* Block track, so the remaining group is a full-width flex container that
         can actually wrap instead of sizing to max-content. */
      .kisaka-svc-hero__track
         {
            display: block;
            width: auto;
            -webkit-animation: none;
            animation: none;
         }

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

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

      .kisaka-svc-hero__item
         {
            white-space: normal;
         }
   }

/* Translucency and low-contrast layering are the first things to go when the
   reader has asked for less of either. */
@media (prefers-reduced-transparency: reduce)
   {
      .kisaka-svc-hero__scrim
         {
            background: -webkit-linear-gradient(bottom, rgba(10, 4, 5, 0.96) 0%, rgba(10, 4, 5, 0.82) 45%, rgba(10, 4, 5, 0.62) 100%);
            background: linear-gradient(to top, rgba(10, 4, 5, 0.96) 0%, rgba(10, 4, 5, 0.82) 45%, rgba(10, 4, 5, 0.62) 100%);
         }
   }

@media (prefers-contrast: more)
   {
      .kisaka-svc-hero__scrim
         {
            background: rgba(8, 3, 4, 0.9);
         }

      .kisaka-svc-hero__title-soft
         {
            color: #fff;
         }

      .kisaka-svc-hero__item
         {
            color: #fff;
         }

      .kisaka-svc-hero__scroll
         {
            color: #fff;
         }
   }

/* ==========================================================================
   Services index (services.html) — sticky rail + pinned image + reading column
   --------------------------------------------------------------------------
   Three columns. The left rail is sticky for the whole section and lists every
   service in two labelled groups; the middle column pins a 4:5 image frame; the
   right column holds one block per service. Only the block on the focus line
   reads at full strength — the rest sit at --svc-dim — while a solid fill slides
   down the rail onto the matching name and the filmstrip advances one frame.
   js/kisaka-services-index.js owns the .is-active bookkeeping, measures the fill
   (--svc-fill-y/-h) from the live row box so wrapped labels still line up, and
   sets --svc-shot (the frame index) and --svc-bg (the tint, see below).

   The stage is dark the whole way down. What changes is its hue: --svc-bg is
   rewritten from the photograph now on screen (js/kisaka-services-index.js),
   so a green field photo and a warm timber desk do not land on the same brown.
   data-svc-tint is only the first-paint fallback. The script blends each tint
   into the next as the block crosses the focus line, so the colour is scrubbed
   by scroll; the transition below only covers the paint before it takes over.

   Nothing here may set overflow on an ancestor of .kisaka-svc-index__rail-sticky
   or .kisaka-svc-index__stage-sticky — that would kill position: sticky.
   ========================================================================== */
.kisaka-svc-index
   {
      --svc-bg: #362117;
      --svc-ink: #ffffff;
      --svc-sub: rgba(255, 255, 255, 0.74);
      --svc-soft: rgba(255, 255, 255, 0.56);
      --svc-note: rgba(255, 255, 255, 0.38);
      --svc-rule: rgba(255, 255, 255, 0.16);
      --svc-label-bg: rgba(255, 255, 255, 0.07);
      --svc-fill: #ffffff;
      --svc-fill-ink: #140809;
      --svc-dim: 0.16;
      --svc-fill-y: 0px;
      --svc-fill-h: 0px;
      --svc-shot: 0;

      /* Same UI face as the rest of the site — not a foreign mono stack. */
      --svc-mono: var(--kisaka-font-accent), 'Google Sans Flex', sans-serif;
      position: relative;
      padding: 0 0 clamp(72px, 12vh, 150px);
      background-color: var(--svc-bg);
      color: var(--svc-ink);
      -webkit-transition: background-color 900ms var(--kisaka-ease-out);
      transition: background-color 900ms var(--kisaka-ease-out);
   }

/* Once the script is blending --svc-bg from the scroll position itself, the
   colour already moves with the page; a timed transition would only lag it. */
.kisaka-svc-index.is-color-scrubbed
   {
      -webkit-transition: none;
      transition: none;
   }

.kisaka-svc-index__defs
   {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
   }

.kisaka-services-page .kisaka-svc-index, .kisaka-services-page .kisaka-svc-index__item[id]
   {
      scroll-margin-top: calc(var(--kisaka-header-h, 72px) + 16px);
   }

.kisaka-svc-index__inner
   {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: minmax(0, 18rem) clamp(28px, 3.4vw, 64px) minmax(0, 19rem) clamp(28px, 3.4vw, 64px) minmax(0, 1fr);
      grid-template-columns: minmax(0, 18rem) minmax(0, 19rem) minmax(0, 1fr);
      gap: clamp(28px, 3.4vw, 64px);

      /* Every column must stretch: a sticky child can only travel inside its own
         grid cell, and align-items: start would shrink that cell to its content. */
      align-items: stretch;
      max-width: 1560px;
      margin: 0 auto;
      padding: 0 clamp(20px, 4.2vw, 72px);
   }

/* --- Rail --------------------------------------------------------------- */
.kisaka-svc-index__rail-sticky
   {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100dvh;
   }

.kisaka-svc-index__rail-track
   {
      position: relative;
   }

.kisaka-svc-index__rail-label
   {
      position: relative;
      z-index: 1;
      margin: 0;
      padding: 7px 12px;
      font-family: var(--svc-mono);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--svc-note);
      background: var(--svc-label-bg);
   }

.kisaka-svc-index__rail-label + .kisaka-svc-index__rail-list
   {
      margin-bottom: 26px;
   }

.kisaka-svc-index__rail-list:last-child
   {
      margin-bottom: 0;
   }

/* Sits behind the names; the script parks it on the active row's own box. */
.kisaka-svc-index__rail-fill
   {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: var(--svc-fill-h);
      background: var(--svc-fill);
      -webkit-transform: translate3d(0, var(--svc-fill-y), 0);
      transform: translate3d(0, var(--svc-fill-y), 0);
      -webkit-clip-path: inset(0 100% 0 0);
      clip-path: inset(0 100% 0 0);
      pointer-events: none;

      /* Transform/height keep the 460ms row-to-row slide. First appearance is a
         left-to-right clip wipe at the same 720ms as `__item-rule` — clip, not
         scaleX, because the Y park already owns transform. */
      -webkit-transition: -webkit-transform 460ms var(--kisaka-ease-out), height 460ms var(--kisaka-ease-out), -webkit-clip-path 720ms var(--kisaka-ease-out);
      transition: transform 460ms var(--kisaka-ease-out), height 460ms var(--kisaka-ease-out), clip-path 720ms var(--kisaka-ease-out);
   }

.kisaka-svc-index__rail-fill.is-ready
   {
      -webkit-clip-path: inset(0 0 0 0);
      clip-path: inset(0 0 0 0);
   }

.kisaka-svc-index__rail-list
   {
      position: relative;
      z-index: 1;
      margin: 0;
      padding: 0;
      list-style: none;
   }

/* A hairline under every row, which is what gives the rail its ruled, tabular
   look. The fill slides over these rather than between them. */
.kisaka-svc-index__rail-item + .kisaka-svc-index__rail-item
   {
      border-top: 1px solid var(--svc-rule);
   }

.kisaka-svc-index__rail-link
   {
      display: block;
      padding: 9px 12px;
      font-family: var(--svc-mono);
      font-size: 11.5px;
      line-height: 1.4;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: var(--svc-soft);
      -webkit-transition: color 380ms var(--kisaka-ease-out);
      transition: color 380ms var(--kisaka-ease-out);
   }

.kisaka-svc-index__rail-link:hover, .kisaka-svc-index__rail-link:focus-visible
   {
      color: var(--svc-ink);
   }

.kisaka-svc-index__rail-item.is-active .kisaka-svc-index__rail-link,
.kisaka-svc-index__rail-item.is-active .kisaka-svc-index__rail-link:hover,
.kisaka-svc-index__rail-item.is-active .kisaka-svc-index__rail-link:focus-visible
   {
      color: var(--svc-fill-ink);
   }

/* --- Pinned image frame ------------------------------------------------- */
.kisaka-svc-index__stage-sticky
   {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100dvh;
   }

/* The tick ruler running down beside the frame. Decorative, and the only thing
   that marks the middle column when the frame is between services. */
.kisaka-svc-index__stage-sticky::before
   {
      content: "";
      position: absolute;

      /* Start the ticks on the header's bottom rule so they read as part of the
         page grid instead of running up behind the logo. */
      top: var(--kisaka-header-h, 72px);
      bottom: 0;
      left: -18px;
      width: 10px;
      background-image: -webkit-repeating-linear-gradient(top, rgba(255, 255, 255, 0.34) 0, rgba(255, 255, 255, 0.34) 1px, transparent 1px, transparent 11px);
      background-image: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.34) 0, rgba(255, 255, 255, 0.34) 1px, transparent 1px, transparent 11px);
      pointer-events: none;
   }

.kisaka-svc-index__frame
   {
      position: relative;
      width: 100%;

      /* 4:5 — scripts/build_service_images.py crops every source to match. */
      aspect-ratio: 4 / 5;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.05);
   }

/* One tall column of frame-sized images; advancing a service slides the whole
   column by exactly one frame, so the outgoing and incoming photographs travel
   together instead of crossfading in place. */
.kisaka-svc-index__filmstrip
   {
      display: flex;
      flex-direction: column;
      height: 100%;
      -webkit-transform: translate3d(0, calc(var(--svc-shot) * -100%), 0);
      transform: translate3d(0, calc(var(--svc-shot) * -100%), 0);
      -webkit-transition: -webkit-transform 760ms var(--kisaka-ease-out);
      transition: transform 760ms var(--kisaka-ease-out);
      will-change: transform;
   }

.kisaka-svc-index__shot
   {
      flex: 0 0 100%;
      width: 100%;
      height: 100%;
      object-fit: cover;
   }

/* The inline copy of the same photograph, for the widths where the pinned
   frame is gone. */
.kisaka-svc-index__item-shot
   {
      display: none;
   }

/* --- Reading column ----------------------------------------------------- */
/* The bottom padding is doing structural work, not spacing: the rail and the
   frame can only stay pinned while their grid cells are still on screen, and the
   cells end with this column. Too little here and both slide away under the
   header while the reader is still on the last service. */
.kisaka-svc-index__column
   {
      padding-top: clamp(48px, 10vh, 120px);
      padding-bottom: clamp(120px, 26vh, 320px);
   }

.kisaka-svc-index__item
   {
      position: relative;
      max-width: 44rem;
      padding: clamp(36px, 6vh, 76px) 0;
      -webkit-transition: opacity 620ms var(--kisaka-ease-out);
      transition: opacity 620ms var(--kisaka-ease-out);
   }

/* Dimming only once the script is driving it — with no JS every block stays
   readable instead of the whole list sitting at 0.16. */
.kisaka-svc-index.is-scroll-focus .kisaka-svc-index__item
   {
      opacity: var(--svc-dim);
   }

.kisaka-svc-index.is-scroll-focus .kisaka-svc-index__item.is-active,
.kisaka-svc-index.is-scroll-focus .kisaka-svc-index__item:focus-within
   {
      opacity: 1;
   }

/* Pulled left into the gutter so the rule reaches back toward the image frame,
   the way the block boundaries do on a wide screen. */
.kisaka-svc-index__item-rule
   {
      position: absolute;
      top: 0;
      left: calc(-1 * clamp(28px, 3.4vw, 64px));
      right: 0;
      height: 1px;
      background: var(--svc-rule);
   }

.kisaka-svc-index__item-head
   {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 32px;
      margin-bottom: clamp(32px, 6vh, 72px);
   }

.kisaka-svc-index__item-heading
   {
      max-width: 26rem;
   }

.kisaka-svc-index__item-title
   {
      margin: 0 0 12px;
      font-size: clamp(1.4rem, 2.6vw, 2.1rem);
      font-weight: 700;
      line-height: 1.16;
      letter-spacing: -0.02em;
      color: var(--svc-ink);
   }

.kisaka-svc-index__item-sub
   {
      margin: 0;
      font-family: var(--kisaka-font-accent);
      font-size: clamp(0.95rem, 1.4vw, 1.1rem);
      font-weight: 500;
      line-height: 1.45;
      color: var(--svc-sub);
   }

/* --- Halftone glyph ----------------------------------------------------- */
/* Both layers are dot fields on the same 2.4 lattice, drawn from the two
   patterns in the <defs> at the top of the section: #kisaka-svc-dots-seed for
   the resting grid (r 0.32) and #kisaka-svc-dots for the silhouette (r 0.62).
   The centres coincide, so the two layers are not two pictures being swapped —
   they are the same dots at two sizes.

   Resolving the icon is therefore a single line travelling down it: above the
   line the seed field has been wiped away and the glyph is drawn, below it the
   seed field is still there. Every dot the line passes grows in place from a
   seed into a full dot, and the silhouette assembles out of the grid it was
   already made of. Both wipes run top-down over the same window, so there is
   one edge on screen rather than two.

   The wipes are clip-path insets measured against each layer's own object
   bounding box. The glyph's box is the union of its paths and sits inside the
   grid's 22x22 box, so the two edges travel at very slightly different rates —
   close enough to read as one line, and no shared clip geometry to keep in
   sync per icon.

   Nothing here may use transform for the reveal. The patterns are
   patternUnits="userSpaceOnUse", so a transform on a filled element drags its
   dots along with it and the lattice slides instead of lighting up. Clipping
   leaves every dot pinned to the grid, which is the whole effect. */
.kisaka-svc-index__item-icon
   {
      flex: none;
      display: block;
      line-height: 0;
      -webkit-transform: translate3d(0, 10px, 0);
      transform: translate3d(0, 10px, 0);
      -webkit-transition: -webkit-transform 620ms var(--kisaka-ease-out);
      transition: transform 620ms var(--kisaka-ease-out);
   }

.kisaka-svc-index__item-icon-grid, .kisaka-svc-index__item-icon-glyph
   {
      -webkit-transition: opacity 460ms var(--kisaka-ease-out), -webkit-clip-path 700ms var(--kisaka-ease-out);
      transition: opacity 460ms var(--kisaka-ease-out), clip-path 700ms var(--kisaka-ease-out);
   }

.kisaka-svc-index__item-icon-grid
   {
      opacity: 0.3;
      -webkit-clip-path: inset(0 0 0 0);
      clip-path: inset(0 0 0 0);
   }

.kisaka-svc-index__item-icon-glyph
   {
      opacity: 0;

      /* Hidden by clipping the whole box away from the bottom, not by scaling to
         nothing — the glyph is always at full size, it is simply not reached yet. */
      -webkit-clip-path: inset(0 0 100% 0);
      clip-path: inset(0 0 100% 0);
   }

.kisaka-svc-index__item.is-active .kisaka-svc-index__item-icon,
.kisaka-svc-index__item:focus-within .kisaka-svc-index__item-icon
   {
      -webkit-transform: none;
      transform: none;
      -webkit-transition-delay: 200ms;
      transition-delay: 200ms;
   }

/* The seed field retreats downward ahead of the line... */
.kisaka-svc-index__item.is-active .kisaka-svc-index__item-icon-grid,
.kisaka-svc-index__item:focus-within .kisaka-svc-index__item-icon-grid
   {
      opacity: 0;
      -webkit-clip-path: inset(100% 0 0 0);
      clip-path: inset(100% 0 0 0);
      -webkit-transition-delay: 260ms;
      transition-delay: 260ms;
   }

/* ...and the full-size dots are uncovered behind it. */
.kisaka-svc-index__item.is-active .kisaka-svc-index__item-icon-glyph,
.kisaka-svc-index__item:focus-within .kisaka-svc-index__item-icon-glyph
   {
      opacity: 0.9;
      -webkit-clip-path: inset(0 0 0 0);
      clip-path: inset(0 0 0 0);
      -webkit-transition-delay: 260ms;
      transition-delay: 260ms;
   }

/* --- Arrival order ------------------------------------------------------ */
/* The block used to come up as one mass at 620ms: twelve panels, each landing
   flat. The parts now arrive in reading order instead — rule, title, standfirst,
   glyph, copy, button — about 60ms apart, which is enough to read as a sequence
   and short enough that the last part lands (~900ms) inside the 1.3s panel snap
   that brought the reader here.

   Only transform moves. Opacity belongs to the block as a whole (--svc-dim),
   and fading the parts individually would take the dimmed neighbours from
   ghosted to gone, which is the layering the section is built on.

   Delays live only on the active rules. On the way out every part leaves at
   once, because a staggered exit is just lag. */
.kisaka-svc-index__item-rule
   {
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transform-origin: left center;
      transform-origin: left center;
      -webkit-transition: -webkit-transform 720ms var(--kisaka-ease-out);
      transition: transform 720ms var(--kisaka-ease-out);
   }

.kisaka-svc-index__item-title,
.kisaka-svc-index__item-sub,
.kisaka-svc-index__item-text,
.kisaka-svc-index__item-btn
   {
      -webkit-transition: -webkit-transform 620ms var(--kisaka-ease-out);
      transition: transform 620ms var(--kisaka-ease-out);
   }

.kisaka-svc-index__item-title, .kisaka-svc-index__item-sub
   {
      -webkit-transform: translate3d(0, 16px, 0);
      transform: translate3d(0, 16px, 0);
   }

.kisaka-svc-index__item-text
   {
      -webkit-transform: translate3d(0, 14px, 0);
      transform: translate3d(0, 14px, 0);
   }

.kisaka-svc-index__item-btn
   {
      -webkit-transform: translate3d(0, 12px, 0);
      transform: translate3d(0, 12px, 0);
   }

.kisaka-svc-index__item.is-active .kisaka-svc-index__item-rule,
.kisaka-svc-index__item:focus-within .kisaka-svc-index__item-rule
   {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
   }

.kisaka-svc-index__item.is-active .kisaka-svc-index__item-title,
.kisaka-svc-index__item:focus-within .kisaka-svc-index__item-title,
.kisaka-svc-index__item.is-active .kisaka-svc-index__item-sub,
.kisaka-svc-index__item:focus-within .kisaka-svc-index__item-sub,
.kisaka-svc-index__item.is-active .kisaka-svc-index__item-text,
.kisaka-svc-index__item:focus-within .kisaka-svc-index__item-text,
.kisaka-svc-index__item.is-active .kisaka-svc-index__item-btn,
.kisaka-svc-index__item:focus-within .kisaka-svc-index__item-btn
   {
      -webkit-transform: none;
      transform: none;
   }

.kisaka-svc-index__item.is-active .kisaka-svc-index__item-title,
.kisaka-svc-index__item:focus-within .kisaka-svc-index__item-title
   {
      -webkit-transition-delay: 80ms;
      transition-delay: 80ms;
   }

.kisaka-svc-index__item.is-active .kisaka-svc-index__item-sub,
.kisaka-svc-index__item:focus-within .kisaka-svc-index__item-sub
   {
      -webkit-transition-delay: 140ms;
      transition-delay: 140ms;
   }

.kisaka-svc-index__item.is-active .kisaka-svc-index__item-text,
.kisaka-svc-index__item:focus-within .kisaka-svc-index__item-text
   {
      -webkit-transition-delay: 240ms;
      transition-delay: 240ms;
   }

/* The button's colour transitions must stay instant on hover, so only the
   transform carries the arrival delay. */
.kisaka-svc-index__item.is-active .kisaka-svc-index__item-btn,
.kisaka-svc-index__item:focus-within .kisaka-svc-index__item-btn
   {
      -webkit-transition-delay: 0s, 0s, 0s, 320ms;
      transition-delay: 0s, 0s, 0s, 320ms;
   }

.kisaka-svc-index__item-body
   {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 24px;
   }

.kisaka-svc-index__item-text
   {
      max-width: 27rem;
      margin: 0;
      font-family: var(--kisaka-font-accent);
      font-size: 15px;
      line-height: 1.75;
      color: var(--svc-soft);
   }

.kisaka-svc-index__item-btn
   {
      flex: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-width: 13.5rem;
      padding: 15px 30px;
      border: 1px solid var(--svc-rule);
      border-radius: var(--kisaka-btn-radius, 8px);
      font-family: var(--svc-mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--svc-ink);
      background: transparent;

      /* Order matters: the arrival delay above targets the fourth entry. */
      -webkit-transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease, -webkit-transform 620ms var(--kisaka-ease-out);
      transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease, transform 620ms var(--kisaka-ease-out);
   }

.kisaka-svc-index__item-btn:hover, .kisaka-svc-index__item-btn:focus-visible
   {
      color: var(--svc-fill-ink);
      background: var(--svc-fill);
      border-color: var(--svc-fill);
   }

.kisaka-svc-index__item-btn > span:first-child
   {
      white-space: nowrap;
   }

/* --- Service panels ----------------------------------------------------- */
/* Where the rail and the pinned frame are live, every service owns a screen
   rather than a slab of a long list.
   Two things fall out of that, and both are the point:
   1. The block's hairline parks on the underside of the fixed header, so it
   reads as the header's own underline — which is what the first block was
   already doing by accident, because the column's top padding happened to
   match the header. Pinning that padding to --kisaka-header-h makes the
   coincidence a rule, and the snap in js/main.js parks every other block
   the same way.
   2. For that to hold, each block has to reserve the same band at its foot.
   Without it the next hairline creeps up into the stage while the reader is
   still on this service, and two rules are on screen claiming the same job.
   The copy is centred in the panel, which puts it on the same band as the
   photograph pinned beside it (that frame centres in the same 100dvh), so a
   service reads as text and picture side by side rather than a caption with a
   tall gap under it. */
@media only screen and (min-width: 1100px)
   {
      .kisaka-svc-index__column
         {
            padding-top: var(--kisaka-header-h, 72px);
         }

      .kisaka-svc-index__item
         {
            display: flex;
            min-height: calc(100vh - var(--kisaka-header-h, 72px));
            min-height: calc(100dvh - var(--kisaka-header-h, 72px));
            padding: 0 0 var(--kisaka-header-h, 72px);
         }

      .kisaka-svc-index__item-inner
         {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            justify-content: center;
         }

      .kisaka-svc-index__item-head
         {
            margin-bottom: clamp(36px, 7vh, 84px);
         }
   }

/* Only once the frame is back does the heading/copy gap open up to match it:
   between the two breakpoints there is no photograph to be the same height as,
   and the wider gap would just read as a hole. */
@media only screen and (min-width: 1360px)
   {
      .kisaka-svc-index__item-head
         {
            margin-bottom: clamp(48px, 11vh, 132px);
         }
   }

/* Between 1100 and 1360 there is no room for three columns of this weight, so
   the image frame goes and the rail keeps its place. */
@media only screen and (max-width: 1359px)
   {
      .kisaka-svc-index__inner
         {
            -ms-grid-columns: minmax(0, 17rem) clamp(28px, 3.4vw, 64px) minmax(0, 1fr);
            grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
         }

      .kisaka-svc-index__stage
         {
            display: none;
         }
   }

/* Below the rail breakpoint the photograph moves inline, between each service's
   heading and its copy, so the imagery survives on a phone. */
@media only screen and (max-width: 1099px)
   {
      .kisaka-svc-index__inner
         {
            display: block;
         }

      .kisaka-svc-index__rail
         {
            display: none;
         }

      .kisaka-svc-index__item
         {
            max-width: none;
         }

      .kisaka-svc-index__item-rule
         {
            left: 0;
         }

      .kisaka-svc-index__item-shot
         {
            display: block;
            width: 100%;
            max-width: 26rem;
            aspect-ratio: 4 / 5;
            object-fit: cover;
            margin: 0 0 clamp(28px, 5vh, 48px);
         }

      /* Without a rail to track against, dimming would just hide copy. */
      .kisaka-svc-index.is-scroll-focus .kisaka-svc-index__item
         {
            opacity: 1;
            -webkit-transition: none;
            transition: none;
         }

      /* There is no focus mechanic at this width — every block reads at full
         strength — so nothing here may depend on .is-active. The glyph is resolved
         for all twelve, and the arrival offsets are cleared: left in, eleven blocks
         would sit permanently 16px low with their hairline scaled to nothing. */
      .kisaka-svc-index__item-icon-grid
         {
            opacity: 0;
            -webkit-clip-path: inset(100% 0 0 0);
            clip-path: inset(100% 0 0 0);
         }

      .kisaka-svc-index__item-icon-glyph
         {
            opacity: 0.9;
            -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
         }

      .kisaka-svc-index__item-icon,
      .kisaka-svc-index__item-rule,
      .kisaka-svc-index__item-title,
      .kisaka-svc-index__item-sub,
      .kisaka-svc-index__item-text,
      .kisaka-svc-index__item-btn
         {
            -webkit-transform: none;
            transform: none;
            -webkit-transition-delay: 0s;
            transition-delay: 0s;
         }
   }

/* Reduced motion keeps the section legible and drops everything that travels.
   The glyph still resolves — that is state, not decoration — but it resolves by
   being there rather than by a line sweeping across it, and no part of the block
   arrives from an offset. */
@media (prefers-reduced-motion: reduce)
   {
      .kisaka-svc-index.is-scroll-focus .kisaka-svc-index__item
         {
            opacity: 1;
         }

      .kisaka-svc-index,
      .kisaka-svc-index__item,
      .kisaka-svc-index__rail-fill,
      .kisaka-svc-index__filmstrip,
      .kisaka-svc-index__item-rule,
      .kisaka-svc-index__item-icon,
      .kisaka-svc-index__item-title,
      .kisaka-svc-index__item-sub,
      .kisaka-svc-index__item-text,
      .kisaka-svc-index__item-icon-grid,
      .kisaka-svc-index__item-icon-glyph
         {
            -webkit-transition: none;
            transition: none;
         }

      .kisaka-svc-index__item-btn
         {
            -webkit-transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease;
            transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease;
         }

      .kisaka-svc-index__item-icon,
      .kisaka-svc-index__item-title,
      .kisaka-svc-index__item-sub,
      .kisaka-svc-index__item-text,
      .kisaka-svc-index__item-btn
         {
            -webkit-transform: none;
            transform: none;
         }

      .kisaka-svc-index__item-rule
         {
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
         }

      .kisaka-svc-index__rail-fill, .kisaka-svc-index__rail-fill.is-ready
         {
            -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
         }

      .kisaka-svc-index__item-icon-grid
         {
            -webkit-clip-path: none;
            clip-path: none;
         }

      .kisaka-svc-index__item-icon-glyph
         {
            -webkit-clip-path: none;
            clip-path: none;
         }
   }

/* --- Index entrance ------------------------------------------------------ */
/* Wide: scrubbed by the scroll (js/kisaka-services-index.js, paintEnter). The
   script writes the section's progress into --svc-in-* properties while
   .is-enter-scrubbing is on, so the frame, the rail and the active service
   arrive with the snap's glide and land when it lands. Narrow: triggered per
   block (.is-entered) as it reaches the screen. Hidden states apply only under
   classes the script adds, so with no JS the section is simply there. */
@media only screen and (min-width: 1100px)
   {
      /* Scrubbed, so nothing here transitions: each value is painted straight
         from the scroll. At p = 1 the script drops .is-enter-scrubbing, and every
         value here equals the resting one, so handing back is seamless. */
      .kisaka-svc-index.is-enter-scrubbing .kisaka-svc-index__frame
         {
            opacity: var(--svc-in-frame, 1);
            -webkit-transform: translate3d(0, calc((1 - var(--svc-in-frame, 1)) * 24px), 0);
            transform: translate3d(0, calc((1 - var(--svc-in-frame, 1)) * 24px), 0);
            -webkit-transition: none;
            transition: none;
         }

      .kisaka-svc-index.is-enter-scrubbing .kisaka-svc-index__shot
         {
            -webkit-transform: scale(calc(1 + (1 - var(--svc-in-frame, 1)) * 0.06));
            transform: scale(calc(1 + (1 - var(--svc-in-frame, 1)) * 0.06));
            -webkit-transition: none;
            transition: none;
         }

      .kisaka-svc-index.is-enter-scrubbing .kisaka-svc-index__rail-label,
      .kisaka-svc-index.is-enter-scrubbing .kisaka-svc-index__rail-item
         {
            opacity: var(--svc-in, 1);
            -webkit-transform: translate3d(0, calc((1 - var(--svc-in, 1)) * 8px), 0);
            transform: translate3d(0, calc((1 - var(--svc-in, 1)) * 8px), 0);
            -webkit-transition: none;
            transition: none;
         }

      .kisaka-svc-index.is-enter-scrubbing .kisaka-svc-index__rail-fill
         {
            opacity: var(--svc-in, 1);
         }

      /* The first (or, from below, the last) service is already active while
         the section glides in; its arrival order rides the same scroll. */
      .kisaka-svc-index.is-enter-scrubbing .kisaka-svc-index__item.is-active
         {
            opacity: calc(var(--svc-dim) + (1 - var(--svc-dim)) * var(--svc-in-item, 1));
            -webkit-transition: none;
            transition: none;
         }

      .kisaka-svc-index.is-enter-scrubbing .kisaka-svc-index__item.is-active .kisaka-svc-index__item-rule
         {
            -webkit-transform: scaleX(var(--svc-in-rule, 1));
            transform: scaleX(var(--svc-in-rule, 1));
            -webkit-transition: none;
            transition: none;
         }

      .kisaka-svc-index.is-enter-scrubbing .kisaka-svc-index__item.is-active .kisaka-svc-index__item-title
         {
            -webkit-transform: translate3d(0, calc((1 - var(--svc-in-title, 1)) * 16px), 0);
            transform: translate3d(0, calc((1 - var(--svc-in-title, 1)) * 16px), 0);
            -webkit-transition: none;
            transition: none;
         }

      .kisaka-svc-index.is-enter-scrubbing .kisaka-svc-index__item.is-active .kisaka-svc-index__item-sub
         {
            -webkit-transform: translate3d(0, calc((1 - var(--svc-in-sub, 1)) * 16px), 0);
            transform: translate3d(0, calc((1 - var(--svc-in-sub, 1)) * 16px), 0);
            -webkit-transition: none;
            transition: none;
         }

      .kisaka-svc-index.is-enter-scrubbing .kisaka-svc-index__item.is-active .kisaka-svc-index__item-icon
         {
            -webkit-transform: translate3d(0, calc((1 - var(--svc-in-icon, 1)) * 10px), 0);
            transform: translate3d(0, calc((1 - var(--svc-in-icon, 1)) * 10px), 0);
            -webkit-transition: none;
            transition: none;
         }

      .kisaka-svc-index.is-enter-scrubbing .kisaka-svc-index__item.is-active .kisaka-svc-index__item-icon-grid
         {
            opacity: calc(0.3 * (1 - var(--svc-in-icon, 1)));
            -webkit-clip-path: inset(calc(var(--svc-in-icon, 1) * 100%) 0 0 0);
            clip-path: inset(calc(var(--svc-in-icon, 1) * 100%) 0 0 0);
            -webkit-transition: none;
            transition: none;
         }

      .kisaka-svc-index.is-enter-scrubbing .kisaka-svc-index__item.is-active .kisaka-svc-index__item-icon-glyph
         {
            opacity: calc(0.9 * var(--svc-in-icon, 1));
            -webkit-clip-path: inset(0 0 calc((1 - var(--svc-in-icon, 1)) * 100%) 0);
            clip-path: inset(0 0 calc((1 - var(--svc-in-icon, 1)) * 100%) 0);
            -webkit-transition: none;
            transition: none;
         }

      .kisaka-svc-index.is-enter-scrubbing .kisaka-svc-index__item.is-active .kisaka-svc-index__item-text
         {
            -webkit-transform: translate3d(0, calc((1 - var(--svc-in-text, 1)) * 14px), 0);
            transform: translate3d(0, calc((1 - var(--svc-in-text, 1)) * 14px), 0);
            -webkit-transition: none;
            transition: none;
         }

      /* Colour transitions stay live so hover still works mid-scrub; only the
         transform is painted. */
      .kisaka-svc-index.is-enter-scrubbing .kisaka-svc-index__item.is-active .kisaka-svc-index__item-btn
         {
            -webkit-transform: translate3d(0, calc((1 - var(--svc-in-btn, 1)) * 12px), 0);
            transform: translate3d(0, calc((1 - var(--svc-in-btn, 1)) * 12px), 0);
            -webkit-transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease;
            transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease;
         }
   }

/* Narrow: no rail, no focus, so each block arrives on its own as it reaches
   the screen, in reading order: photograph, rule, title, standfirst, glyph,
   copy, button. Same offsets as the wide-screen arrival order above, plus a
   fade, since there is no --svc-dim here for the parts to fight with. */
@media only screen and (max-width: 1099px)
   {
      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item-shot,
      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item-title,
      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item-sub,
      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item-icon,
      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item-text
         {
            -webkit-transition: opacity 620ms var(--kisaka-ease-out), -webkit-transform 620ms var(--kisaka-ease-out);
            transition: opacity 620ms var(--kisaka-ease-out), transform 620ms var(--kisaka-ease-out);
         }

      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item-shot
         {
            -webkit-transition-duration: 700ms;
            transition-duration: 700ms;
         }

      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item-btn
         {
            -webkit-transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease, opacity 620ms var(--kisaka-ease-out), -webkit-transform 620ms var(--kisaka-ease-out);
            transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease, opacity 620ms var(--kisaka-ease-out), transform 620ms var(--kisaka-ease-out);
         }

      /* Waiting. */
      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item:not(.is-entered) .kisaka-svc-index__item-shot
         {
            opacity: 0;
            -webkit-transform: translate3d(0, 24px, 0);
            transform: translate3d(0, 24px, 0);
         }

      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item:not(.is-entered) .kisaka-svc-index__item-rule
         {
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
         }

      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item:not(.is-entered) .kisaka-svc-index__item-title,
      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item:not(.is-entered) .kisaka-svc-index__item-sub
         {
            opacity: 0;
            -webkit-transform: translate3d(0, 16px, 0);
            transform: translate3d(0, 16px, 0);
         }

      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item:not(.is-entered) .kisaka-svc-index__item-icon
         {
            opacity: 0;
            -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
         }

      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item:not(.is-entered) .kisaka-svc-index__item-icon-grid
         {
            opacity: 0.3;
            -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
         }

      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item:not(.is-entered) .kisaka-svc-index__item-icon-glyph
         {
            opacity: 0;
            -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
         }

      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item:not(.is-entered) .kisaka-svc-index__item-text
         {
            opacity: 0;
            -webkit-transform: translate3d(0, 14px, 0);
            transform: translate3d(0, 14px, 0);
         }

      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item:not(.is-entered) .kisaka-svc-index__item-btn
         {
            opacity: 0;
            -webkit-transform: translate3d(0, 12px, 0);
            transform: translate3d(0, 12px, 0);
         }

      /* Arriving. The resting values are the ones the block above already sets
         for this width; only the delays are added. */
      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item.is-entered .kisaka-svc-index__item-rule
         {
            -webkit-transition-delay: 120ms;
            transition-delay: 120ms;
         }

      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item.is-entered .kisaka-svc-index__item-title
         {
            -webkit-transition-delay: 160ms;
            transition-delay: 160ms;
         }

      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item.is-entered .kisaka-svc-index__item-sub
         {
            -webkit-transition-delay: 220ms;
            transition-delay: 220ms;
         }

      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item.is-entered .kisaka-svc-index__item-icon
         {
            -webkit-transition-delay: 280ms;
            transition-delay: 280ms;
         }

      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item.is-entered .kisaka-svc-index__item-icon-grid,
      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item.is-entered .kisaka-svc-index__item-icon-glyph
         {
            -webkit-transition-delay: 340ms;
            transition-delay: 340ms;
         }

      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item.is-entered .kisaka-svc-index__item-text
         {
            -webkit-transition-delay: 320ms;
            transition-delay: 320ms;
         }

      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item.is-entered .kisaka-svc-index__item-btn
         {
            -webkit-transition-delay: 0s, 0s, 0s, 400ms, 400ms;
            transition-delay: 0s, 0s, 0s, 400ms, 400ms;
         }
   }

/* Reduced motion: nothing travels. Parts that were waiting just fade in over
   200ms; the glyph is already resolved by the block above. The attribute on
   the item selectors is there for weight: it has to outrank the waiting and
   arriving rules, which carry :not(.is-entered) / .is-entered. */
@media (prefers-reduced-motion: reduce)
   {
      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item[data-kisaka-svc-item] .kisaka-svc-index__item-shot,
      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item[data-kisaka-svc-item] .kisaka-svc-index__item-rule,
      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item[data-kisaka-svc-item] .kisaka-svc-index__item-title,
      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item[data-kisaka-svc-item] .kisaka-svc-index__item-sub,
      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item[data-kisaka-svc-item] .kisaka-svc-index__item-icon,
      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item[data-kisaka-svc-item] .kisaka-svc-index__item-text,
      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item[data-kisaka-svc-item] .kisaka-svc-index__item-btn
         {
            -webkit-transform: none;
            transform: none;
            -webkit-transition: opacity 200ms ease;
            transition: opacity 200ms ease;
            -webkit-transition-delay: 0s;
            transition-delay: 0s;
         }

      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item[data-kisaka-svc-item] .kisaka-svc-index__item-icon-grid,
      .kisaka-svc-index.is-enter-armed .kisaka-svc-index__item[data-kisaka-svc-item] .kisaka-svc-index__item-icon-glyph
         {
            -webkit-clip-path: none;
            clip-path: none;
         }
   }

@media only screen and (max-width: 575px)
   {
      .kisaka-svc-index__item-head
         {
            gap: 18px;
         }

      .kisaka-svc-index__item-icon svg
         {
            width: 40px;
            height: 40px;
         }

      .kisaka-svc-index__item-btn
         {
            width: 100%;
         }
   }

/* ==========================================================================
   Services — closing stage ("Bring the complexity")
   Markup: services.html [data-kisaka-svc-build]; behaviour: js/main.js
   (initKisakaServicesPanelScroll parks here; initKisakaServicesBuildStage reveals)

   The last screen of the services page. Everything above it is a named service
   in a three-column reading layout; this is the one screen that is none of them,
   for the reader whose mandate does not land on a single name.

   It owns a screen exactly as each service does, so the same flick that steps
   between services steps onto it.

   Two decisions carry the look:

   1. The ground is the same fog the hero opened with — js/kisaka-fog.js on
   a canvas with the same palette — so the page closes in the material it
   started in, rather than a second invention. A scrim keeps the type
   readable while the clouds keep moving in the empty field.
   2. The copy sits on the left gutter the rail has held all the way down the
   page, not centred. Centring is the reflex for a closing call to action and
   it would break the vertical spine the index spent twelve screens drawing.
   ========================================================================== */
.kisaka-svc-build
   {
      --build-ink: #ffffff;
      --build-stroke: rgba(255, 255, 255, 0.3);

      /* Softer than the site's --kisaka-ease-in-out, which is steep enough to make
         the sweep read as a wipe with a hard middle. The headline has to ink at an
         even hand and settle, so the curve stays close to a plain cubic in-out. */
      --build-ease-sweep: cubic-bezier(0.65, 0, 0.35, 1);
      --build-soft: rgba(255, 255, 255, 0.6);
      --build-note: rgba(255, 255, 255, 0.4);
      --build-rule: rgba(255, 255, 255, 0.18);
      position: relative;
      isolation: isolate;
      overflow: hidden;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: stretch;
      -ms-flex-align: stretch;
      align-items: stretch;
      min-height: 100vh;
      min-height: 100dvh;
      background-color: var(--kisaka-red-ink, #140809);
      color: var(--build-ink);
   }

/* The index and the close are one continuous dark run: the index's closing
   padding would show as a seam between two near-identical blacks and push the
   stage off its own screen. */
.kisaka-services-page .kisaka-svc-index
   {
      padding-bottom: 0;
   }

/* The stage is cut to the viewport, so an anchor landing on it must be flush.
   The page's global scroll-padding would park it a header's-worth down and
   leave the footer showing underneath. */
.kisaka-services-page .kisaka-svc-build
   {
      scroll-margin-top: 0;
   }

/* Same fog construction as .kisaka-svc-hero__bg: a static fallback wash, the
   shader stretched over it, a scrim so the type does not have to fight a frame
   of the clouds. */
.kisaka-svc-build__bg
   {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;

      /* Ink takes over by ~half the radius so the fallback is a dark field with
         a red ember, not a bright plate that waits until the edge to go dark. */
      background: -webkit-radial-gradient(28% 78%, 120% 110%, #7a1220 0%, #3d121a 22%, #140809 52%);
      background: radial-gradient(120% 110% at 28% 78%, #7a1220 0%, #3d121a 22%, #140809 52%);
   }

.kisaka-svc-build__canvas
   {
      display: block;
      width: 100%;
      height: 100%;
      opacity: 0;
      -webkit-transition: opacity 700ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
      transition: opacity 700ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
   }

.kisaka-svc-build__canvas[data-kisaka-fog-ready]
   {
      opacity: 1;
   }

.kisaka-svc-build__scrim
   {
      position: absolute;
      inset: 0;

      /* Darker than the hero: this stage's type is larger and sits in the field,
         not on a dedicated ticker band. The extra left wash covers the copy
         column; the right stays open enough that the clouds still read. */
      background: -webkit-linear-gradient(left, rgba(10, 4, 5, 0.4) 0%, rgba(10, 4, 5, 0.16) 44%, rgba(10, 4, 5, 0) 72%), -webkit-linear-gradient(bottom, rgba(10, 4, 5, 0.92) 0%, rgba(10, 4, 5, 0.74) 34%, rgba(10, 4, 5, 0.42) 68%, rgba(10, 4, 5, 0.5) 100%);
      background: linear-gradient(to right, rgba(10, 4, 5, 0.4) 0%, rgba(10, 4, 5, 0.16) 44%, rgba(10, 4, 5, 0) 72%), linear-gradient(to top, rgba(10, 4, 5, 0.92) 0%, rgba(10, 4, 5, 0.74) 34%, rgba(10, 4, 5, 0.42) 68%, rgba(10, 4, 5, 0.5) 100%);
   }

/* Same max-width and gutter as .kisaka-svc-index__inner, so the copy starts on
   the exact left edge the rail has held for twelve screens. */
.kisaka-svc-build__inner
   {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1560px;
      margin: 0 auto;
      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: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      gap: clamp(40px, 8vh, 120px);
      padding: calc(var(--kisaka-header-h, 72px) + clamp(20px, 3vh, 44px)) clamp(20px, 4.2vw, 72px) clamp(36px, 6vh, 76px);
   }

/* Two rows, two columns. The headline and the button share the top row and
   both sit on its floor, so the button finishes on the same line as "Let's get
   to work." — level with the headline, not trailing the paragraph. The
   paragraph then takes the second row, left column only. */
.kisaka-svc-build__composition
   {
      -webkit-box-flex: 0;
      -ms-flex: none;
      flex: none;
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: minmax(0, 1fr) clamp(32px, 4vw, 72px) minmax(17rem, 22rem);
      grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
      -ms-grid-rows: auto auto;
      grid-template-rows: auto auto;
      -webkit-box-align: end;
      -ms-flex-align: end;
      align-items: end;
      -webkit-column-gap: clamp(32px, 4vw, 72px);
      -moz-column-gap: clamp(32px, 4vw, 72px);
      column-gap: clamp(32px, 4vw, 72px);
      row-gap: 0;
   }

/* Wide enough that "Bring the complexity." holds one line at the top of the
   type scale — the break belongs between the two sentences, nowhere else. */
.kisaka-svc-build__title
   {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
      grid-area: 1 / 1;
      max-width: 60rem;
   }

.kisaka-svc-build__ask
   {
      -ms-grid-row: 1;
      -ms-grid-column: 3;
      grid-area: 1 / 2;
      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: stretch;
      -ms-flex-align: stretch;
      align-items: stretch;
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end;
      gap: 14px;
      justify-self: end;
      align-self: end;
      width: 100%;
      max-width: 22rem;
   }

.kisaka-svc-build__cue
   {
      margin: 0;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: 0.9375rem;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.5;
      color: var(--build-soft);
      text-wrap: pretty;
   }

.kisaka-svc-build__text
   {
      -ms-grid-row: 2;
      -ms-grid-column: 1;
      grid-area: 2 / 1;
   }

/* Named the way the rail names its two groups — this stage is the third thing
   on the page's contents list, not a decorative kicker. */
.kisaka-svc-build__label
   {
      -webkit-box-flex: 0;
      -ms-flex: none;
      flex: none;
      margin: 0;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      line-height: 1.2;
      text-transform: uppercase;
      color: var(--build-note);
   }

/* Set larger than the hero and tracked tighter to match — display type reads
   looser as it grows, so the correction has to grow with it. */
.kisaka-svc-build__title
   {
      margin: 0;
      color: var(--build-ink);
      font-family: var(--kisaka-font-family, sans-serif);
      font-weight: 700;
      font-size: clamp(1.95rem, 4.6vw, 4rem);
      line-height: 1.04;
      letter-spacing: -0.028em;
      font-optical-sizing: auto;
   }

.kisaka-svc-build__line
   {
      display: block;
   }

/* Holds the two stacked copies of the line. The outline copy is in flow and
   gives the box its height; the solid copy is laid over it. */
.kisaka-svc-build__reveal
   {
      position: relative;
      display: block;
   }

/* The line before the sweep reaches it: no fill, one hairline of stroke. This is
   what the reader sees of a word that has not been inked yet, and it is why the
   headline never appears out of nothing — the shape is there first, the
   substance arrives. */
.kisaka-svc-build__ink-outline
   {
      display: block;
      color: transparent;
      -webkit-text-stroke: 1px var(--build-stroke);

      /* It is the same sentence written twice. Only the solid copy is the text. */
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
   }

/* The solid copy, clipped to the part of the line the sweep has passed.
   --build-sweep is a percentage position along a 100deg gradient: the mask is
   opaque up to it and transparent ten points later, so the edge is a soft
   diagonal rather than a wipe. -12 is fully hidden (the soft edge starts off the
   left of the box), 112 fully inked. */
.kisaka-svc-build__ink-fill
   {
      position: absolute;
      inset: 0;
      display: block;
      color: inherit;
      -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--build-sweep) * 1%), transparent calc((var(--build-sweep) + 10) * 1%));
      mask-image: linear-gradient(100deg, #000 calc(var(--build-sweep) * 1%), transparent calc((var(--build-sweep) + 10) * 1%));
   }

/* The premise is quieter than the offer, and the hero splits its two lines the
   same way — the page opens and closes on the same figure. */
.kisaka-svc-build__title-soft
   {
      color: rgba(255, 255, 255, 0.62);
      --build-stroke: rgba(255, 255, 255, 0.2);
   }

/* --- Eyebrow rule -------------------------------------------------------- */
/* The label keeps its own width; the rule takes the rest of the measure up to a
   ceiling, so it stays a hairline gesture beside the label instead of a border
   across the screen. */
.kisaka-svc-build__eyebrow
   {
      -webkit-box-flex: 0;
      -ms-flex: none;
      flex: none;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      gap: 16px;
   }

.kisaka-svc-build__rule
   {
      position: relative;
      -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      max-width: 280px;
      height: 1px;
      background: rgba(255, 255, 255, 0.1);
   }

.kisaka-svc-build__rule-draw
   {
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.4);
      -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
      transform-origin: left center;
   }

.kisaka-svc-build__text
   {
      max-width: 34em;
      margin: clamp(20px, 3.4vh, 34px) 0 0;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: 1.0625rem;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.75;
      color: var(--build-soft);
      text-wrap: pretty;
   }

/* 1. The rule. First to move, and the only thing that moves before the type. */
.kisaka-svc-build.is-armed .kisaka-svc-build__rule-draw
   {
      -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transition: -webkit-transform 1s var(--build-ease-sweep) 100ms;
      -o-transition: transform 1s var(--build-ease-sweep) 100ms;
      transition: transform 1s var(--build-ease-sweep) 100ms;
   }

.kisaka-svc-build.is-armed.is-visible .kisaka-svc-build__rule-draw
   {
      -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
      transform: scaleX(1);
   }

/* 2. The ink sweep. One number per line, staggered by 180ms so the second
   sentence starts while the first is still filling — close enough to read as
   one hand writing, far enough apart that the two lines are not one block. */
.kisaka-svc-build.is-armed .kisaka-svc-build__ink-fill
   {
      --build-sweep: -12;
      -webkit-transition: --build-sweep 1.3s var(--build-ease-sweep) 200ms;
      -o-transition: --build-sweep 1.3s var(--build-ease-sweep) 200ms;
      transition: --build-sweep 1.3s var(--build-ease-sweep) 200ms;
   }

.kisaka-svc-build.is-armed .kisaka-svc-build__line:nth-child(2) .kisaka-svc-build__ink-fill
   {
      -webkit-transition-delay: 380ms;
      transition-delay: 380ms;
   }

.kisaka-svc-build.is-armed.is-visible .kisaka-svc-build__ink-fill
   {
      --build-sweep: 112;
   }

/* 3. The rise. Held back until the headline is most of the way inked, then the
   cue, the button and the paragraph come up 14px on a 100ms stagger. */
.kisaka-svc-build.is-armed [data-kisaka-build-rise]
   {
      opacity: 0;
      -webkit-transform: translate3d(0, 14px, 0);
      transform: translate3d(0, 14px, 0);
      -webkit-transition: opacity 800ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)) 800ms, -webkit-transform 800ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)) 800ms;
      transition: opacity 800ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)) 800ms, transform 800ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)) 800ms;
   }

.kisaka-svc-build.is-armed .kisaka-svc-build__text[data-kisaka-build-rise]
   {
      -webkit-transition-delay: 1s;
      transition-delay: 1s;
   }

.kisaka-svc-build.is-armed.is-visible [data-kisaka-build-rise]
   {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
   }

/* The fog arrives with the type rather than sitting there already painted. */
.kisaka-svc-build.is-armed .kisaka-svc-build__bg
   {
      opacity: 0;
      -webkit-transition: opacity 1.2s var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)) 160ms;
      -o-transition: opacity 1.2s var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)) 160ms;
      transition: opacity 1.2s var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)) 160ms;
   }

.kisaka-svc-build.is-armed.is-visible .kisaka-svc-build__bg
   {
      opacity: 1;
   }

/* Below the panel breakpoint the services are an ordinary flowing column, so
   the close stops claiming a whole screen and becomes the block that ends it. */
/* Under the two-column threshold the button drops below the copy — a 17rem
   column beside a wrapped headline is neither a column nor a line. */
@media only screen and (max-width: 899px)
   {
      .kisaka-svc-build__composition
         {
            -ms-grid-columns: minmax(0, 1fr);
            grid-template-columns: minmax(0, 1fr);
            gap: clamp(26px, 5vh, 44px);
         }

      .kisaka-svc-build__title, .kisaka-svc-build__ask, .kisaka-svc-build__text
         {
            -ms-grid-row: auto;
            -ms-grid-column: 1;
            grid-area: auto;
         }

      .kisaka-svc-build__ask
         {
            justify-self: start;
            max-width: 22rem;

            /* Source order puts the button between the headline and the paragraph;
               stacked, it belongs at the end. */
            -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
            order: 2;
         }
   }

@media only screen and (max-width: 1099px)
   {
      .kisaka-svc-build
         {
            min-height: 0;
         }

      .kisaka-svc-build__inner
         {
            padding-top: clamp(64px, 12vh, 112px);
         }
   }

@media only screen and (max-width: 575px)
   {
      .kisaka-svc-build__title
         {
            letter-spacing: -0.018em;
         }

      .kisaka-svc-build__text
         {
            font-size: 1rem;
         }
   }

/* Fog.js already parks a still frame under reduced motion. The ground still
   fades, because a cross-fade carries none of that load. */
@media (prefers-reduced-motion: reduce)
   {
      /* The rise and the rule are movement and they go. The ink sweep is not — it
         is the line changing colour in place — so it stays, shortened, because it
         is the one piece of this that carries meaning: it is what tells the reader
         the stage has arrived. */
      .kisaka-svc-build.is-armed [data-kisaka-build-rise]
         {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
            -webkit-transition: none;
            transition: none;
         }

      .kisaka-svc-build.is-armed .kisaka-svc-build__rule-draw
         {
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
            -webkit-transition: none;
            -o-transition: none;
            transition: none;
         }

      .kisaka-svc-build.is-armed .kisaka-svc-build__ink-fill,
      .kisaka-svc-build.is-armed .kisaka-svc-build__line:nth-child(2) .kisaka-svc-build__ink-fill
         {
            -webkit-transition: --build-sweep 420ms ease 80ms;
            -o-transition: --build-sweep 420ms ease 80ms;
            transition: --build-sweep 420ms ease 80ms;
         }

      .kisaka-svc-build.is-armed .kisaka-svc-build__bg
         {
            -webkit-transition: opacity 240ms ease;
            -o-transition: opacity 240ms ease;
            transition: opacity 240ms ease;
         }

      .kisaka-svc-build__canvas
         {
            -webkit-transition: none;
            transition: none;
         }
   }

@media (prefers-contrast: more)
   {
      .kisaka-svc-build__canvas
         {
            display: none;
         }

      .kisaka-svc-build__scrim
         {
            background: rgba(10, 4, 5, 0.78);
         }

      .kisaka-svc-build__text, .kisaka-svc-build__cue
         {
            color: rgba(255, 255, 255, 0.86);
         }
   }