/* Preserve the full motion travel; the reading hold adds scroll space after it. */
[data-scene=s1]{--motion-travel:1.35;--motion-hold:.4}
[data-scene=s2]{--motion-travel:1.9;--motion-hold:.4}
[data-scene=s3]{--motion-travel:1.25;--motion-hold:.4}
[data-scene=s7]{--motion-travel:1.5;--motion-hold:.4}
.motion-ready:not(.motion-reduced) [data-scene=s1]:not(.scene-flow),
.motion-ready:not(.motion-reduced) [data-scene=s2]:not(.scene-flow),
.motion-ready:not(.motion-reduced) [data-scene=s3]:not(.scene-flow),
.motion-ready:not(.motion-reduced) [data-scene=s7]:not(.scene-flow){height:calc(var(--stage)*(1 + var(--motion-travel) + var(--motion-hold)))}
@media(max-width:767px){
 [data-scene=s1]{--motion-travel:.9}
 [data-scene=s2]{--motion-travel:1.1}
 [data-scene=s7]{--motion-travel:1}
}

/* The mobile guarantee introduction completes before it leaves the reading area.
   Only its surface and type transform: all four service cards stay in normal flow. */
.motion-ready:not(.motion-reduced) .scene-flow.color-chapter .chapter-morph{
 --purpose-p:1;--purpose-grow:.55;--purpose-end-x:.76;--purpose-end-y:.5;
 min-height:176px;height:auto;max-width:560px;padding:24px;isolation:isolate;background:transparent;
}
.motion-ready:not(.motion-reduced) .scene-flow.color-chapter .chapter-morph:before{
 content:'';position:absolute;inset:0;z-index:-1;background:var(--chapter-surface);border-radius:24px;pointer-events:none;
 transform:scale(calc(1 - var(--purpose-p)*(1 - var(--purpose-end-x))),calc(1 - var(--purpose-p)*(1 - var(--purpose-end-y))));
}
.motion-ready:not(.motion-reduced) .scene-flow.color-chapter .chapter-morph>span{
 width:170px;max-width:calc((100vw - 64px)/1.55)!important;font-size:20px;line-height:1.16;white-space:normal;font-weight:600;
 transform:scale(calc(1 + (1 - var(--purpose-p))*var(--purpose-grow)))!important;transform-origin:center;
}
@media(max-height:599px){.motion-ready:not(.motion-reduced) .scene-flow.color-chapter .chapter-morph{min-height:128px;padding-block:20px}}

/* Each flowing reading block has its own viewport-based reveal. The fourth card
   begins when it enters the screen, not when the first card enters the section. */
.motion-ready:not(.motion-reduced) .scene-flow.color-chapter .chapter-heading,
.motion-ready:not(.motion-reduced) [data-scene].scene-flow.color-chapter .chapter-document{
 transform:var(--reading-transform,none)!important;
 opacity:var(--reading-opacity,1);transform-origin:center center;
}
.motion-ready:not(.motion-reduced) .scene-flow.color-chapter .chapter-objects{perspective:none;transform-style:flat}
.motion-ready:not(.motion-reduced) .scene-flow.color-chapter .chapter-document{transform-style:flat}
.motion-ready:not(.motion-reduced) .scene-flow.color-chapter .chapter-document:focus-within{opacity:1}

/* Pinned chapters keep their original large-surface-to-label choreography.
   The surface and type now transform on stable boxes: no per-frame layout. */
.color-chapter{--chapter-surface:var(--soft)}
.color-chapter.peach{--chapter-surface:var(--peach)}
.color-chapter.lavender{--chapter-surface:var(--lavender)}
.motion-ready:not(.motion-reduced) .color-chapter:not(.scene-flow) .chapter-morph{
 top:30px;width:88%;max-width:88%;height:48px;border-radius:0;
 background:transparent;isolation:isolate;
}
.motion-ready:not(.motion-reduced) .color-chapter:not(.scene-flow) .chapter-morph::before,
.motion-ready:not(.motion-reduced) .color-chapter:not(.scene-flow) .chapter-morph::after{
 content:'';position:absolute;top:0;pointer-events:none;background:var(--chapter-surface);z-index:-1;
}
.motion-ready:not(.motion-reduced) .color-chapter:not(.scene-flow) .chapter-morph::before{
 left:0;width:100%;height:var(--morph-surface-height,450px);border-radius:60px;
 transform-origin:center top;
 transform:translateY(calc((1 - var(--p))*var(--morph-surface-travel,70px))) scale(calc(var(--morph-end-x,.25) + (1 - var(--p))*(1 - var(--morph-end-x,.25))),calc(var(--morph-end-y,.1) + (1 - var(--p))*(1 - var(--morph-end-y,.1))));
 opacity:calc(1 - clamp(0,(var(--p) - .9)*10,1));
}
.motion-ready:not(.motion-reduced) .color-chapter:not(.scene-flow) .chapter-morph::after{
 left:50%;width:280px;max-width:100%;height:48px;transform:translateX(-50%);border-radius:12px;
 opacity:clamp(0,(var(--p) - .9)*10,1);
}
.motion-ready:not(.motion-reduced) .color-chapter:not(.scene-flow) .chapter-morph>span{
 translate:0 calc((1 - var(--p))*var(--morph-type-travel,280px));
 transform:scale(calc(1 + (1 - var(--p))*var(--morph-type-grow,1.5)));
}
@media(max-width:767px){
 .motion-ready:not(.motion-reduced) .color-chapter:not(.scene-flow) .chapter-morph{top:20px;width:90%;max-width:90%}
 .motion-ready:not(.motion-reduced) .color-chapter:not(.scene-flow) .chapter-morph::before{border-radius:32px}
 .motion-ready:not(.motion-reduced) .color-chapter:not(.scene-flow) .chapter-morph::after{width:235px}
}

/* A shared pinned reading scene. The page's own scroll advances the content;
   cards retain the independent, lightweight guarantee entrance. */
.motion-ready:not(.motion-reduced) [data-scene].color-chapter.chapter-pinned{
 height:var(--chapter-scroll-height,calc(var(--stage)*2.65));padding:0;
}
.motion-ready:not(.motion-reduced) [data-scene].chapter-pinned>.scene-sticky{
 position:sticky;top:var(--motion-header-height);height:var(--chapter-stage,var(--stage));overflow:clip;
}
.motion-ready:not(.motion-reduced) .chapter-pinned .chapter-window{
 position:absolute;inset:100px 0 24px;overflow:clip;
}
.motion-ready:not(.motion-reduced) .chapter-pinned .chapter-content{
 padding-top:0!important;padding-bottom:32px;opacity:1!important;
 transform:none!important;
}
@keyframes chapter-reading-track{
 from{translate:0 0}
 to{translate:0 var(--chapter-track-shift)}
}
.motion-ready:not(.motion-reduced) .chapter-pinned.chapter-native-scroll .chapter-content{
 animation:chapter-reading-track auto linear both;
 animation-timeline:scroll(root block);
 animation-range:var(--chapter-track-start) var(--chapter-track-end);
}
.motion-ready:not(.motion-reduced) .chapter-pinned .chapter-heading,
.motion-ready:not(.motion-reduced) .chapter-pinned .chapter-objects .chapter-document{
 transform:var(--reading-transform,none)!important;opacity:var(--reading-opacity,1);transform-origin:center;
}
.motion-ready:not(.motion-reduced) .chapter-pinned .chapter-objects{perspective:none;transform-style:flat}
.motion-ready:not(.motion-reduced) .chapter-pinned .chapter-document{transform-style:flat}
.motion-ready:not(.motion-reduced) .chapter-pinned .chapter-document:focus-within{opacity:1}
/* Promote only the currently visible reading scene. Its cached card surfaces
   can move/scale without repainting text and soft shadows on every frame. */
.motion-ready:not(.motion-reduced) .chapter-pinned.scene-active .chapter-content{will-change:translate}
.motion-ready:not(.motion-reduced) .color-chapter.scene-active .chapter-heading,
.motion-ready:not(.motion-reduced) .color-chapter.scene-active .chapter-document{will-change:transform,opacity}
.motion-ready:not(.motion-reduced) .chapter-pinned.scene-active .chapter-window{will-change:opacity}
.motion-ready:not(.motion-reduced) .chapter-pinned.scene-active .chapter-morph::before{will-change:transform,opacity}
.motion-ready:not(.motion-reduced) .chapter-pinned.scene-active .chapter-morph>span{will-change:transform,translate}
.motion-ready:not(.motion-reduced) .color-chapter.scene-active .chapter-heading,
.motion-ready:not(.motion-reduced) .color-chapter.scene-active .chapter-document{
 transition:transform 420ms cubic-bezier(.22,1,.36,1),opacity 320ms ease-out,box-shadow .2s;
}
.motion-ready:not(.motion-reduced) .color-chapter .chapter-heading:focus-within,
.motion-ready:not(.motion-reduced) .color-chapter .chapter-document:focus-within{transition:none}
@media(max-width:767px){
 .motion-ready:not(.motion-reduced) .chapter-pinned .chapter-objects{display:grid;grid-template-columns:1fr;gap:15px}
 .motion-ready:not(.motion-reduced) .chapter-pinned.chapter-guarantee .chapter-document{min-height:0!important}
 .motion-ready:not(.motion-reduced) .chapter-pinned .chapter-morph{position:absolute;left:50%;transform:translateX(-50%);margin:0;min-height:0;padding:0 15px}
}