/* v5 motion mode. Active only when <html> has .motion (JavaScript on, no reduced-motion preference).
   Every value that changes with scrolling is written inline by motion.js as a function of scroll position.
   No CSS transitions or animations here. No will-change on scaled elements (keeps text and images sharp). */
.motion{scroll-behavior:auto}
.motion body{overflow-x:clip}

/* Header: a light copy laid over the dark header, clipped to the part of the bar that sits over a light section. */
.site-header.is-light{background:var(--paper);color:var(--ink);border-bottom-color:var(--line);clip-path:inset(0 0 100% 0)}
.site-header.is-light .nav-cta{background:var(--accent);color:var(--action-ink);border-color:#81613b}
.js:not(.motion) .site-header{background:#152e38f2}

/* Line masks */
.motion .lines .line{overflow:hidden;padding-block:.08em;margin-block:-.08em}
.motion .lines .li,.motion .lines .lx{display:block}
/* The hero's text is painted visible from the first frame (no entrance from transparent or clipped: it is the LCP).
   Only the photo eases in at load; the text still leaves with the scroll (motion.js render). */
.motion .hero-image img{transform:scale(1.06)}
.motion .hero-overlay:not(.is-placed){visibility:hidden}

/* Rules that draw (feature list, approach) */
.motion [data-rules] li{border-bottom-color:transparent}
.motion [data-rules]{border-top-color:transparent;position:relative}
.rule{position:absolute;left:0;right:0;height:1px;background:var(--line);transform-origin:0 50%;pointer-events:none}
.rule-top{top:-1px}.rule-bottom{bottom:-1px}
.motion .review-steps{border-top-color:transparent}

/* Installation: two sticky columns (desktop) or sticky stage under normal-flow copy (phone) */
.motion .scene{padding:0;display:grid;grid-template-columns:.85fr 1.4fr;column-gap:40px;padding-inline:var(--gutter);max-width:none}
.motion .scene-copy{position:sticky;top:0;align-self:start;height:100svh;display:flex;align-items:center;padding-top:var(--top-h)}
.motion .scene-copy-in{width:auto;margin:0;max-width:520px}
.motion .scene-track{width:auto;margin:0;height:calc(100svh + var(--pin,165svh));min-width:0}
.motion .scene-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:var(--top-h);min-width:0}
.motion .stage-stills,.motion .static-note{display:none}
.motion .stage-frame{display:block;position:relative;width:100%;max-width:calc((100svh - var(--top-h) - 230px)*4/3);margin-inline:auto}
.motion .stage{aspect-ratio:var(--stage-ar,4 / 3);overflow:clip}
.motion .stage-cam{transform-origin:50% 50%}
.motion .stage canvas{opacity:0}
.motion .stage[data-state=animated] canvas{opacity:1}
.motion .stage[data-state=animated] .poster{display:none}
.motion .stage-tag{background:#e7eef0f0;padding:4px 7px;border-radius:2px}
.motion .phase-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;order:2;width:100%;max-width:calc((100svh - var(--top-h) - 230px)*4/3);margin:16px auto 0}
.phase{display:grid;font-size:14px;letter-spacing:.02em;min-height:1.6em}
.phase-label{grid-area:1/1;white-space:nowrap}
.controls-hint{font-size:10px;letter-spacing:.1em;color:var(--muted);white-space:nowrap}
.motion .stage-frame{order:1}.motion .sequence-controls{order:3}.motion .concept-note{order:4}
.motion .sequence-controls{display:block;width:100%;max-width:calc((100svh - var(--top-h) - 230px)*4/3);margin:2px auto 0}
.rail{position:relative;margin-top:6px;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.rail-labels{display:none}
.rail-track{position:relative;height:36px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;column-gap:6px;align-items:center}
.rail-seg{display:block;height:2px;background:#9fb0b6}
.rail-active{position:absolute;left:0;top:50%;height:4px;margin-top:-2px;width:100%;background:var(--green);transform-origin:0 50%;clip-path:inset(0 100% 0 0)}
.rail-thumb{position:absolute;left:0;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--green);border:2px solid var(--mist);box-shadow:0 0 0 1px var(--green)}
.rail-input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none;appearance:none;-webkit-appearance:none;background:transparent}
.rail-input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:44px;height:44px}
.rail-input::-moz-range-thumb{width:44px;height:44px;border:0;background:transparent}
.rail:has(.rail-input:focus-visible) .rail-track{outline:3px solid #fff;outline-offset:6px;box-shadow:0 0 0 9px #76511f;border-radius:2px}
.motion .concept-note{position:relative;padding-left:14px;max-width:calc((100svh - var(--top-h) - 230px)*4/3);width:100%;margin:14px auto 0}
.concept-rule{position:absolute;left:0;top:.3em;bottom:.3em;width:2px;background:var(--green);transform-origin:50% 0}
.motion .steps li{opacity:1;border-left:0;padding-left:16px;font-weight:400}
.motion .steps-bar{display:block;position:absolute;left:0;top:0;width:2px;height:1px;background:var(--green);transform-origin:50% 0}

/* Building: the green of the track record continues; a window opens in it and fills the screen. */
.motion .building-story{background:var(--green);margin-top:var(--snap,0px);height:calc(100svh + var(--bld-window,90svh) + var(--bld-hold,35svh))}
.motion .scene{z-index:1;margin-top:var(--snap,0px)}
.motion .building-sticky{position:sticky;top:0;height:100svh;overflow-x:clip;overflow-y:visible}
.motion .building-content{min-height:0;height:100%;padding-block:calc(var(--top-h) + 16px) 40px}
/* The photo layer covers 100lvh: with the iOS toolbar collapsed no strip shows under it. Text and the note stay inside 100svh. */
.motion .building-media{bottom:auto;height:100lvh;overflow:hidden;background:#263e33}
.motion .building-media img{transform-origin:50% 50%}
.motion .photo-note{right:auto;bottom:auto;left:0;top:0}


/* Mechanism: the stage is the SVG diagram; the static list is hidden */
.motion .mech-more{grid-column:1/-1}
.motion .mech-stills{display:none}
.motion .mech-captions{display:grid;order:2;width:100%;max-width:calc((100svh - var(--top-h) - 230px)*4/3);margin:10px auto 0;font-size:14px;line-height:1.7;color:var(--ink)}
.motion .mech-caption{grid-area:1/1}
.motion .mech-caption p{margin:0}
.motion .mech-caption .formula{margin-top:4px}
.motion .mech-stage{background:#e7eef0}
.motion .mech-pipeview,.motion .mech-wallview,.motion .mech-inset{transform-box:view-box}

/* Cases: bars start from the baseline (JS sets --k) */
.motion .bar{--k:0}

/* Trial-first flow (desktop: sticky, a bar with front/back springs runs along the three steps) */
.motion .approach{padding:0}
.motion .approach-track{height:calc(100svh + var(--flow-pin,120svh));margin-top:var(--snap,0px)}
.motion .approach-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:var(--top-h)}
.motion .review-steps{border-top-color:var(--line)}
/* the heading, lead and three steps share one pinned screen (the heading moves 80px, the steps 40px): less space above the steps, less again on short screens */
@media(min-width:761px){.motion .approach .review-steps{margin-top:36px}}
@media(min-width:761px) and (max-height:820px){.motion .approach .review-steps{margin-top:22px}.motion .approach h2{margin-bottom:18px}.motion .approach .skip-next{margin-bottom:8px}}
.motion .flow-bar{display:block;position:absolute;left:0;right:0;top:-2px;height:3px;background:var(--green);clip-path:inset(0 100% 0 0)}
.motion .review-steps article{--on:0;color:color-mix(in srgb,var(--ink) calc(74% + var(--on) * 26%),var(--paper))}
.motion .review-steps article .step-number{color:color-mix(in srgb,var(--ink) calc(70% + var(--on) * 30%),var(--paper))}
@media(max-width:760px){
  .motion .scene{display:block;padding-inline:0}
  .motion .scene-copy{position:relative;height:auto;padding:66px var(--gutter) 8px;display:block}
  .motion .scene-copy-in{max-width:none}
  .motion .steps{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;margin:0}
  .motion .scene-stage{justify-content:center;padding:var(--top-h) var(--gutter) 12px}
  .motion .phase-row{order:0;margin:0 0 8px;max-width:none}
  .motion .mech-captions{max-width:none;font-size:13px;line-height:1.65;margin-top:8px}
  .phase{font-size:13px}
  .controls-hint{display:none}
  .motion .stage-frame{--sw:min(100vw,calc(100svh - var(--top-h) - 250px));width:var(--sw);max-width:none;margin-inline:calc((100% - var(--sw))/2)}
  .motion .stage-frame .stage-tag{left:var(--gutter)}
  .motion .mech-stage{aspect-ratio:1/1}
  .motion .stage .poster{object-fit:cover}
  .motion .stage-tag{left:0;bottom:0;font-size:8px}.motion .stage-tag span{font-size:9px}
  .motion .sequence-controls{max-width:none;margin-top:10px}
  .rail-labels{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;column-gap:6px;font-size:10px;line-height:1.4;color:var(--muted);letter-spacing:.02em}
  .rail-labels b{display:block;font-weight:500;color:var(--ink);font-size:10px;letter-spacing:.06em}
  .motion .concept-note{font-size:11px;max-width:none;margin-top:10px}
  .motion .photo-note{font-size:10px}
  .motion .approach{padding-block:66px}
  .motion .approach-track{height:auto;margin-top:0}
  .motion .approach-sticky{position:static;height:auto;display:block;padding-top:0}
  .motion .review-steps{position:relative;padding-left:16px;border-top:0}
  .motion .flow-bar{left:0;right:auto;top:0;bottom:0;width:3px;height:auto;clip-path:inset(0 0 100% 0)}
  .motion .building-content{position:absolute;left:0;right:0;bottom:0;width:auto;margin:0;height:auto;padding:96px 20px 64px;z-index:1}
  /* Scrim tied to the text block: the text keeps its contrast whatever the photo is (fades in with the shade). */
  .motion .building-content::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#142f3800 0,#142f38db 80px,#142f38e6 100%);opacity:var(--shade,0)}
}
@media(max-width:760px) and (max-height:640px){
  .motion .stage-tag{display:none}
  .motion .concept-note{font-size:10px;line-height:1.5}
  .rail-labels{font-size:9px}
}

/* Static fallback (no JavaScript or reduced motion): three stills instead of the animated stage. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}