/* 02 / CORE CAPABILITIES — CORE 01 → 02 → 03
 * Desktop: the section pins under the header while each step's visual scrolls up
 * through the stage; step copy slides in from below and holds in one fixed slot.
 * Mobile / reduced-motion: no pinning — accordion, one visual per step.
 */

.cap-flow{padding-block:0}
.cap-flow-track{position:relative;height:calc(100vh - var(--header-h) + var(--cap-flow-scroll))}
.cap-flow-sticky{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));display:flex;align-items:center;overflow:hidden}
.cap-flow-inner{width:min(100%,var(--wide));display:flex;flex-direction:column;justify-content:center;height:100%;padding-block:clamp(28px,4vh,56px)}

.cap-flow-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;width:100%;flex:none}
.cap-flow-head-copy{max-width:820px;min-width:0}
.cap-flow-head .meta{margin-bottom:18px}
.cap-flow-title{margin:0;font-size:var(--h2)}
.cap-flow-head .link{flex:none;margin-top:0;position:relative;z-index:2}

.cap-flow-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,72px);align-items:stretch;margin-top:clamp(28px,3.5vh,52px)}

/* ---------- step slot ----------
 * The slot is clipped: its top edge sits just under the section title and its
 * bottom edge runs to the foot of the pinned area. A step therefore vanishes
 * *under the title* on the way out and rises in from off-screen on the way in,
 * instead of cross-fading on top of its neighbour. */
.cap-flow-steps{position:relative;align-self:stretch;height:100%;min-height:min(46vh,340px);overflow:hidden}
.cap-flow-step{position:absolute;left:0;right:0;top:50%;display:block;padding-left:26px;
  transform:translateY(calc(-50% + var(--step-y,0px)));opacity:var(--step-o,0);pointer-events:none;
  will-change:transform}
.cap-flow-step:before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--brand);box-shadow:0 0 12px rgba(215,11,28,.55)}

.cap-flow-step-top{display:flex;align-items:baseline;gap:14px}
.cap-flow-step-num{font-size:11px;letter-spacing:.1em;color:var(--muted-d);font-variant-numeric:tabular-nums}
.cap-flow-step-title{display:block;margin-top:14px;font-size:clamp(28px,2.8vw,44px);font-weight:560;letter-spacing:-.025em;line-height:1.2;color:var(--warm)}
.cap-flow-step-copy{display:block}
/* If the scroll driver never runs, the first step still reads normally. */
.cap-flow-step:first-child{--step-o:1;--step-y:0}
.cap-flow-step-lead{display:block;margin-top:18px;max-width:44ch;color:var(--warm);font-size:clamp(16px,1.3vw,19px);line-height:1.6}
.cap-flow-step-desc{display:block;margin-top:12px;max-width:44ch;color:var(--muted-d);font-size:15px;line-height:1.75}

/* ---------- visual stage: images travel bottom → top as you scroll ---------- */
.cap-flow-stage{position:relative;height:100%;min-height:min(56vh,560px);overflow:hidden;background:#0d0f11;border:1px solid var(--line-d);
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:48px 48px;background-position:center center}
.cap-flow-visual{position:absolute;inset:0;opacity:var(--vis-o,0);transform:translate3d(0,var(--vis-y,0),0);pointer-events:none;will-change:transform,opacity}
.cap-flow-visual:first-child{--vis-o:1;--vis-y:0}

/* Progress rail — which of the three you're on */
.cap-flow-rail{position:absolute;z-index:3;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px}
.cap-flow-rail i{display:block;width:2px;height:26px;background:var(--line-d);transition:background .5s var(--ease)}
.cap-flow-rail i.on{background:var(--brand-soft)}

.cap-flow-visual-caption{position:absolute;z-index:2;left:24px;bottom:22px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-d);padding:8px 11px;border:1px solid rgba(255,255,255,.18);background:rgba(9,10,11,.6);backdrop-filter:blur(8px)}

/* Applied clips are 1112×834. The holder is the stage's full width; height
   follows that ratio so the picture is never stretched or cover-cropped. */
.cap-flow-frame,.cap-flow-panel,.cap-flow-photo{
  position:absolute;left:0;right:0;top:50%;width:100%;height:auto;
  aspect-ratio:1112/834;transform:translateY(-50%);overflow:hidden}
.cap-flow-frame{overflow:visible}
.cap-flow-frame:before{content:"";position:absolute;inset:-10px;pointer-events:none;opacity:.9;
  background:
    linear-gradient(#f2f1ed,#f2f1ed) 0 0/16px 1px no-repeat,
    linear-gradient(#f2f1ed,#f2f1ed) 0 0/1px 16px no-repeat,
    linear-gradient(#f2f1ed,#f2f1ed) 100% 0/16px 1px no-repeat,
    linear-gradient(#f2f1ed,#f2f1ed) 100% 0/1px 16px no-repeat,
    linear-gradient(#f2f1ed,#f2f1ed) 0 100%/16px 1px no-repeat,
    linear-gradient(#f2f1ed,#f2f1ed) 0 100%/1px 16px no-repeat,
    linear-gradient(#f2f1ed,#f2f1ed) 100% 100%/16px 1px no-repeat,
    linear-gradient(#f2f1ed,#f2f1ed) 100% 100%/1px 16px no-repeat}
.cap-flow-frame .progressive-image__preview,.cap-flow-frame .progressive-image__full,
.cap-flow-panel .progressive-image__preview,.cap-flow-panel .progressive-image__full,
.cap-flow-photo .progressive-image__preview,.cap-flow-photo .progressive-image__full{
  object-fit:contain;object-position:center}
.cap-flow-frame .progressive-image__preview,.cap-flow-frame .progressive-image__full{filter:grayscale(.45) contrast(1.06) brightness(.78)}
.cap-flow-panel .progressive-image__preview,.cap-flow-panel .progressive-image__full{filter:grayscale(.35) brightness(.85)}
.cap-flow-photo .progressive-image__preview,.cap-flow-photo .progressive-image__full{filter:grayscale(.2) brightness(.72) contrast(1.05)}
.cap-flow-frame .live-loop,.cap-flow-panel .live-loop,.cap-flow-photo .live-loop,
.cap-flow-accordion-visual .live-loop{position:absolute;inset:0}
.cap-flow-frame .live-loop-video,.cap-flow-panel .live-loop-video,.cap-flow-photo .live-loop-video,
.cap-flow-accordion-visual .live-loop-video{
  object-fit:contain;object-position:center;filter:none;background:transparent}

/* 02 interaction — response rings, no photo */
.cap-flow-rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.cap-flow-rings i{position:absolute;display:block;border:1px solid rgba(255,255,255,.16);border-radius:50%}
.cap-flow-rings i:nth-child(1){width:120px;height:120px}
.cap-flow-rings i:nth-child(2){width:220px;height:220px;border-color:rgba(255,255,255,.11)}
.cap-flow-rings i:nth-child(3){width:340px;height:340px;border-color:rgba(255,255,255,.07)}
.cap-flow-visual.is-interaction.active .cap-flow-rings i:nth-child(3){animation:cap-flow-pulse 4.5s var(--ease) infinite}

/* 03 environment — framed platform panel with connection nodes */
.cap-flow-panel{background:#111417;border:1px solid var(--line-d);overflow:visible}
.cap-flow-node{position:absolute;width:6px;height:6px;border-radius:50%;background:#f2f1ed;box-shadow:0 0 0 4px rgba(255,255,255,.1)}
.cap-flow-node.n1{top:-3px;left:-3px}
.cap-flow-node.n2{top:-3px;right:-3px}
.cap-flow-node.n3{bottom:-3px;left:-3px}

/* 04 experience — same width-fit box; the scrim rides on the picture, not the stage */
.cap-flow-photo:after{content:"";position:absolute;inset:auto 0 0;height:46%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(9,10,11,.82))}

@keyframes cap-flow-pulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}

/* ---------- mobile accordion ---------- */
.cap-flow-accordion{display:none}

@media(max-width:1023px){
  .cap-flow{padding-block:var(--space)}
  .cap-flow-track{height:auto}
  .cap-flow-sticky{position:static;height:auto;overflow:visible;display:block}
  .cap-flow-inner{height:auto;display:block;padding-block:0}
  .cap-flow-head{flex-wrap:wrap;align-items:flex-start}
  
  .cap-flow-body{display:none}
  /* The rail is absolutely positioned against .cap-flow-track, not against the hidden
     .cap-flow-body, so hiding the body alone leaves it floating in the right margin. */
  .cap-flow-rail{display:none}
  /* The accordion is a sibling of .cap-flow-track, so it sits OUTSIDE the .wrap that
     gutters the section title — without this it runs edge to edge and the row text
     touches the screen. Match the wrap's content width instead of padding the box, so
     the row rules align with the title rather than bleeding past it. */
  .cap-flow-accordion{display:block;margin-top:44px;border-top:1px solid var(--line-d);
    max-width:calc(min(100vw,var(--wide)) - var(--gutter) * 2);margin-inline:auto}
  .cap-flow-accordion-item{border-bottom:1px solid var(--line-d)}
  .cap-flow-accordion-trigger{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:space-between;width:100%;padding:24px 4px;gap:16px;color:var(--muted-d)}
  .cap-flow-accordion-label{display:flex;align-items:baseline;gap:14px}
  .cap-flow-accordion-label .num{font-size:11px;letter-spacing:.1em;font-variant-numeric:tabular-nums}
  .cap-flow-accordion-label .eyebrow{font-size:12px;font-weight:700;letter-spacing:.13em;color:var(--warm)}
  .cap-flow-accordion-item.open .cap-flow-accordion-label .num,
  .cap-flow-accordion-item.open .cap-flow-accordion-label .eyebrow{color:var(--brand-soft)}
  .cap-flow-accordion-icon{position:relative;flex:none;width:18px;height:18px}
  .cap-flow-accordion-icon:before,.cap-flow-accordion-icon:after{content:"";position:absolute;top:50%;left:50%;background:currentColor;transform:translate(-50%,-50%)}
  .cap-flow-accordion-icon:before{width:12px;height:1px}
  .cap-flow-accordion-icon:after{width:1px;height:12px;transition:transform .4s var(--ease),opacity .4s var(--ease)}
  .cap-flow-accordion-item.open .cap-flow-accordion-icon:after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
  .cap-flow-accordion-panel{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
  .cap-flow-accordion-item.open .cap-flow-accordion-panel{max-height:960px}
  .cap-flow-accordion-body{padding:0 4px 28px}
  .cap-flow-accordion-body h3{margin:0;font-size:22px;font-weight:560;letter-spacing:-.02em;line-height:1.3}
  .cap-flow-accordion-body p{margin:12px 0 0;color:var(--muted-d);font-size:14px;line-height:1.7;max-width:52ch}
  .cap-flow-accordion-body .cap-flow-step-tags{margin-top:16px}
  .cap-flow-accordion-visual{position:relative;margin-top:20px;width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:1112/834;overflow:hidden;background:#0d0f11}
  .cap-flow-accordion-visual .progressive-image__preview,.cap-flow-accordion-visual .progressive-image__full{object-fit:contain;object-position:center;filter:grayscale(.35) brightness(.82)}
  .cap-flow-accordion-visual--wide{background:transparent}
  .cap-flow-accordion-visual--abstract{display:flex;align-items:center;justify-content:center;
    background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
    background-size:36px 36px}
  .cap-flow-accordion-visual--abstract .cap-flow-rings i:nth-child(1){width:70px;height:70px}
  .cap-flow-accordion-visual--abstract .cap-flow-rings i:nth-child(2){width:130px;height:130px}
  .cap-flow-accordion-visual--abstract .cap-flow-rings i:nth-child(3){width:200px;height:200px}
}

/* Reduced motion: never pin or scroll-drive — fall back to the accordion at any width. */
@media(prefers-reduced-motion:reduce){
  .cap-flow-rings i{animation:none!important}
  .cap-flow{padding-block:var(--space)}
  .cap-flow-track{height:auto}
  .cap-flow-sticky{position:static;height:auto;overflow:visible;display:block}
  .cap-flow-inner{height:auto;display:block;padding-block:0}
  .cap-flow-body{display:none}
  /* The rail is absolutely positioned against .cap-flow-track, not against the hidden
     .cap-flow-body, so hiding the body alone leaves it floating in the right margin. */
  .cap-flow-rail{display:none}
  /* The accordion is a sibling of .cap-flow-track, so it sits OUTSIDE the .wrap that
     gutters the section title — without this it runs edge to edge and the row text
     touches the screen. Match the wrap's content width instead of padding the box, so
     the row rules align with the title rather than bleeding past it. */
  .cap-flow-accordion{display:block;margin-top:44px;border-top:1px solid var(--line-d);
    max-width:calc(min(100vw,var(--wide)) - var(--gutter) * 2);margin-inline:auto}
}