/* ============================================================
   About page (about-v2) - a kinetic scroll story.

   StringTune measures, CSS moves. The runtime (about-story.js -> st-core.js)
   writes:
     --progress       0..1 per section   (StringProgress)
     .-s-word/.-s-char + --word-index, --char-index, --word-global-total
                                          (StringSplit)
     .-inview         on a split heading once it is on screen
     --x/--y, --spotlight-*, --magnetic-*  (cursor layer, desktop only)
   and adds html.st-scroll when the scroll layer runs.

   EVERY MOTION RULE IS GATED ON html.st-scroll. Without it (reduced motion,
   JS off, runtime failure) the page is plain, static, complete content -
   no pins, no hidden text. Every variable has a resting fallback.

   Loads after about-v2.css (tokens, .wrap, .sec, .fin, .cta, .h-sec, .lead)
   and before cursor-layer.css (.st-spot, magnetic, badge).
   ============================================================ */

/* Shared easing for this page: a strong ease-out. */
.kwho,.kp,.kcl,.kd{--k-ease:cubic-bezier(.2,.8,.2,1)}

/* Split headings (.kx) and plain [data-rv] reveals: shared, in about-v2.css. */

/* ======================================================================
   2. WHO - the paragraph lights up word by word.
   ====================================================================== */
.kwho__h{margin:0;max-width:16ch}
.kwho__grid{margin-top:clamp(30px,4vw,56px);display:grid;gap:clamp(28px,4vw,64px);align-items:start}
.kwho__media{perspective:1200px}
.kwho__fr{overflow:hidden;border-radius:var(--r-lg);
  box-shadow:0 40px 70px -46px rgba(62,20,17,.55);
  transform:rotateY(calc(var(--x,0) * 4deg)) rotateX(calc(var(--y,0) * -3deg));
  will-change:transform}
.kwho__fr img{display:block;width:100%;height:auto}
.kwho__big{margin:0;font-size:clamp(1.25rem,2.1vw,1.9rem);line-height:1.42;font-weight:700;
  letter-spacing:-.022em;color:var(--ink)}
/* Each word's opacity follows the scroll: words before the "reading
   point" are lit, words after it wait at 14%. The reading point moves from
   the first word to the last while the paragraph crosses the screen. */
/* Word-by-word highlight: the shared .wlit rule in about-v2.css. */

.kwho__b{margin:22px 0 0;color:var(--ink-2);font-size:1.02rem;line-height:1.75;max-width:60ch}
.kwho__q{position:relative;margin:24px 0 0;padding:20px 22px 20px 58px;border-radius:16px;
  background:var(--brand-wash);border:1px solid rgba(90,31,27,.1)}
.kwho__qm{position:absolute;left:16px;top:6px;font-size:3.4rem;line-height:1;font-weight:900;
  color:var(--brand);opacity:.85}
.kwho__q p{margin:0;font-size:1.04rem;line-height:1.6;font-weight:700;color:var(--ink)}
@media(min-width:1024px){
  .kwho__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  /* The photo stays in view while the words light up. */
  .kwho__media{position:sticky;top:calc(var(--header-h,73px) + 32px)}
}

/* ======================================================================
   3. PRINCIPLES - pinned; dealt one at a time.
   ====================================================================== */
.kp{position:relative;isolation:isolate;color:#fff;
  background:
    radial-gradient(130% 100% at 50% 0%,var(--band-1) 0%,transparent 62%),
    linear-gradient(168deg,var(--band-2) 0%,var(--band-deep) 100%)}
.kp__sticky{position:relative;overflow:hidden;padding-block:clamp(64px,8vw,110px)}
.kp__dots{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.45;
  background-image:radial-gradient(rgba(240,220,216,.5) 1px,transparent 1px);background-size:26px 26px}
.kp__in{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
.kp__h{margin:0;color:#fff;max-width:16ch}
.kp__rail{display:none}
.kp__deck{margin:0;padding:0;list-style:none;display:grid;gap:16px}
/* Opaque, so a card waiting or receding behind never shows through. */
.kp__card{border-radius:var(--r-lg);padding:clamp(26px,3vw,40px);
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(182,90,80,.22) 0%,rgba(182,90,80,0) 60%),
    linear-gradient(168deg,#5E2C24 0%,#47201A 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.12)}
.kp__ic{display:grid;place-items:center;width:58px;height:58px;border-radius:17px;color:#fff;font-size:1.35rem;
  background:linear-gradient(160deg,#9A3D35,var(--brand));border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 24px -14px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.2)}
.kp__t{margin:22px 0 0;font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:800;letter-spacing:-.03em;color:#fff}
.kp__p{margin:12px 0 0;max-width:52ch;color:rgba(255,255,255,.88);font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.72}
@media(min-width:900px){.kp__in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}

/* Pinned: three screens of scroll; the stage holds for all three. */
@media(min-width:760px) and (min-height:600px){
  html.st-scroll .kp{height:300svh}
  html.st-scroll .kp__sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;
    padding-block:calc(var(--header-h,73px) + 20px) 40px}
  html.st-scroll .kp__in{width:100%}
  /* A three-part rail under the heading; part k fills as its card is read. */
  html.st-scroll .kp__rail{display:flex;gap:8px;margin-top:28px;max-width:320px}
  html.st-scroll .kp__rail span{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
  html.st-scroll .kp__rail i{display:block;height:100%;transform-origin:0 50%;background:#F0DCD8;
    transform:scaleX(clamp(0, calc(var(--progress,0) * 3 - var(--k,0)), 1))}
  /* The deck: cards share one spot; the current one is up front, the
     ones already read recede behind it, the next ones wait below. */
  html.st-scroll .kp__deck{position:relative;display:block;height:min(420px,60svh)}
  html.st-scroll .kp__deck .kp__card{position:absolute;inset:0;z-index:calc(var(--k,0) + 1);
    display:flex;flex-direction:column;justify-content:center;
    opacity:0;transform:translateY(70px) scale(.96);
    transition:transform .75s var(--k-ease),opacity .5s ease}
  html.st-scroll .kp__deck .kp__card.is-on{opacity:1;transform:none}
  /* Cards already read recede up and behind: only their top edge peeks out
     above the current card, like a deck. */
  html.st-scroll .kp__deck .kp__card.is-past{opacity:.55;transform:translateY(-22px) scale(.94)}
}

/* ======================================================================
   4. WHO WE SERVE - pinned; the cards travel sideways.
   ====================================================================== */
.kcl{position:relative;background:var(--paper)}
.kcl__sticky{padding-block:clamp(64px,8vw,110px)}
.kcl__hd{display:grid;gap:14px;align-items:end}
.kcl__hd .h-sec{margin:0;max-width:18ch}
.kcl__hd .lead{margin:0;max-width:52ch}
@media(min-width:1024px){.kcl__hd{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px)}}
/* Default (and phones): a grid inside the content column. */
.kcl__view{max-width:var(--container);margin:clamp(28px,4vw,44px) auto 0;padding-inline:var(--gutter)}
.kcl__track{margin:0;padding:0;list-style:none;display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1024px){.kcl__track{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:419px){.kcl__track{grid-template-columns:1fr}}
.kcl__card{display:flex;flex-direction:column;border-radius:var(--r-lg);padding:clamp(20px,2.4vw,30px);
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 40px -34px rgba(90,31,27,.4);
  transition:border-color .3s ease,box-shadow .3s ease}
.kcl__card:hover{border-color:var(--line-2);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 30px 50px -34px rgba(90,31,27,.5)}
.kcl__ic{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;font-size:1.2rem;
  background:var(--brand-wash);color:var(--brand);border:1px solid rgba(90,31,27,.12);
  transition:background .3s ease,color .3s ease,rotate .3s var(--k-ease)}
.kcl__card:hover .kcl__ic{background:var(--brand);color:#fff;rotate:-6deg}
.kcl__t{margin:18px 0 0;font-size:clamp(1.08rem,1.5vw,1.3rem);font-weight:800;letter-spacing:-.022em;color:var(--ink)}
.kcl__v{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.kcl__v li{font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.04em;
  padding:4px 10px;border-radius:999px;color:var(--brand);background:var(--paper);border:1px solid var(--line-2)}
.kcl__card--dark{border-color:transparent;
  background:radial-gradient(120% 90% at 100% 0%,rgba(182,90,80,.3) 0%,rgba(182,90,80,0) 60%),
    linear-gradient(160deg,var(--brand-2) 0%,var(--brand) 55%,#3E1411 100%)}
.kcl__card--dark .kcl__ic{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff}
.kcl__card--dark:hover .kcl__ic{background:#fff;color:var(--brand)}
.kcl__card--dark .kcl__t{color:#fff}
.kcl__card--dark .kcl__v li{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
.kcl__bar{display:none}

/* Pinned: the stage holds for as long as the track needs to travel
   (about-story.js sets --dist and the section height). */
@media(min-width:760px) and (min-height:600px){
  html.st-scroll .kcl__sticky{position:sticky;top:0;height:100svh;overflow:hidden;
    display:flex;flex-direction:column;justify-content:center;
    padding-block:calc(var(--header-h,73px) + 16px) 32px}
  /* min-width:0 - a flex item will not shrink below its content by
     default, and the content is a 2800px track: without it the whole
     column grew to the track's width and pushed the heading off-screen. */
  html.st-scroll .kcl__sticky > *{min-width:0;width:100%}
  html.st-scroll .kcl__view{max-width:none;padding:0;margin-top:clamp(28px,4.4vh,48px)}
  html.st-scroll .kcl__track{display:flex;gap:18px;width:max-content;
    padding-inline:max(var(--gutter),calc((100vw - var(--container)) / 2 + var(--gutter)));
    transform:translate3d(calc(var(--progress,0) * var(--dist,0) * -1px),0,0);
    will-change:transform}
  html.st-scroll .kcl__card{width:clamp(270px,25vw,330px);min-height:clamp(240px,34svh,300px)}
  html.st-scroll .kcl__card .kcl__v{margin-top:auto;padding-top:16px}
  /* Travel indicator under the track. */
  html.st-scroll .kcl__bar{display:block;margin-top:clamp(22px,3.4vh,34px)}
  html.st-scroll .kcl__bar i{display:block;height:3px;max-width:320px;border-radius:3px;background:var(--line);overflow:hidden;position:relative}
  html.st-scroll .kcl__bar i::after{content:"";position:absolute;inset:0;transform-origin:0 50%;
    transform:scaleX(var(--progress,0));background:var(--brand)}
}

/* ======================================================================
   5. WHAT MAKES US DIFFERENT - a deck that stacks.
   ====================================================================== */
.kd{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);border-top:1px solid var(--line)}
.kd__h{margin:0}
.kd__stack{margin:clamp(30px,4vw,48px) 0 0;padding:0;list-style:none;display:grid;gap:22px}
.kd__card{display:grid;gap:18px 40px;border-radius:var(--r-lg);padding:clamp(26px,3.2vw,44px);
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 30px 60px -40px rgba(62,20,17,.45);
  transform-origin:50% 0}
.kd__ic{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;font-size:1.25rem;
  background:var(--brand-wash);color:var(--brand);border:1px solid rgba(90,31,27,.12)}
.kd__tag{margin:16px 0 0;display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}
.kd__tag b{color:var(--brand);font-weight:800}
.kd__t{margin:0;font-size:clamp(1.4rem,2.4vw,2rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--ink)}
.kd__lnk{color:inherit;text-decoration:none;border-bottom:2px solid rgba(90,31,27,.3);transition:border-color .25s ease}
.kd__lnk:hover{border-bottom-color:currentColor}
.kd__p{margin:14px 0 0;max-width:62ch;color:var(--ink-2);font-size:1.02rem;line-height:1.72}
@media(min-width:900px){.kd__card{grid-template-columns:minmax(0,.34fr) minmax(0,1fr);align-items:start;min-height:260px}}
/* Card tones, so the stack reads as separate cards. */
.kd__card--1{border-color:transparent;
  background:radial-gradient(120% 90% at 100% 0%,rgba(182,90,80,.3) 0%,rgba(182,90,80,0) 60%),
    linear-gradient(160deg,var(--brand-2) 0%,var(--brand) 55%,#3E1411 100%)}
.kd__card--1 .kd__ic{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff}
.kd__card--1 .kd__tag{color:rgba(255,255,255,.8)}
.kd__card--1 .kd__tag b{color:#F0DCD8}
.kd__card--1 .kd__t{color:#fff}
.kd__card--1 .kd__p{color:rgba(255,255,255,.88)}
.kd__card--3{background:linear-gradient(160deg,#FFFFFF 0%,var(--brand-wash) 100%)}
.kd__card--4{background:linear-gradient(160deg,var(--paper) 0%,#FFFFFF 100%)}

/* Stacking: each card sticks a little lower than the one before; cards
   underneath recede as later ones cover them. --d is roughly how many
   cards sit on top, from the list's progress (0 when its top meets the
   viewport top, 1 when its bottom does). The cards finish stacking about
   60% of the way through that travel, hence the 1.65 factor.
   (StringProgress edges are top/bottom only - "center" is not valid.) */
html.st-scroll .kd__item{position:sticky;top:calc(var(--header-h,73px) + 24px + var(--k,0) * 22px);
  --d:clamp(0, calc(var(--progress,0) * (var(--n,4) - 1) * 1.65 - var(--k,0)), min(3, calc(var(--n,4) - 1 - var(--k,0))))}
html.st-scroll .kd__card{transform:scale(calc(1 - var(--d,0) * .045));
  filter:brightness(calc(1 - var(--d,0) * .08))}
html.st-scroll .kd__stack{padding-bottom:0}

/* ======================================================================
   6. CLOSE + plain reveals
   ====================================================================== */
/* (moved to about-v2.css: html.st-scroll [data-rv]) */

/* Hero tiles jump here: clear the fixed header. */
#different{scroll-margin-top:calc(var(--header-h,73px) + 12px)}