/* Progressive scroll narrative: ordinary document flow is the default. */
.home-page #mechanism{padding-top:0;background:#fff}
.concept-story{--story-top:64px;--story-dock:0px;--story-progress:0}
.story-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:36px}
.story-heading .eyebrow{margin-bottom:9px;font-size:12px}
.home-page .story-heading h2{font-size:24px;line-height:1.4;letter-spacing:-.025em}
.story-skip{font-size:12px;color:var(--blue);white-space:nowrap;padding-block:10px}
.story-skip span{display:inline-block;margin-left:6px}
.concept-story .concept-layout{grid-template-columns:.8fr 1.2fr;gap:28px}
.concept-story .concept-stages{margin:0}
.concept-story .concept-stages h3{font-size:clamp(30px,3.5vw,48px);line-height:1.3;letter-spacing:-.04em;font-weight:600}
.concept-story .concept-stages p{font-size:16px;line-height:1.9;margin-top:20px;letter-spacing:-.015em}
.concept-story .concept-stages small{display:block;color:var(--muted);font-size:11px;line-height:1.8;margin-top:14px}
.concept-story .concept-step-label{font-size:11px;font-weight:500;letter-spacing:.12em;margin-bottom:18px;color:#0066cc}
.concept-story .concept-visual{width:100%;padding:0;margin:0;overflow:visible;perspective:none}
.concept-story .concept-visual::before{display:none}
.story-product-window{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1.25;overflow:clip;isolation:isolate;border-radius:24px;position:relative}
.story-product-window::before{content:"";position:absolute;inset:2%;border-radius:50%;background:radial-gradient(ellipse,#fff 5%,#fff9 35%,#f5f5f700 72%);z-index:-1}
.concept-story .spray-stage{width:100%;max-width:none;transform-origin:50% 50%;flex:none}
.concept-story .story-product-window img{width:100%;height:auto;max-height:none;filter:drop-shadow(0 18px 20px #0000001c)}
.concept-story .concept-visual figcaption{font-size:10px;line-height:1.6;letter-spacing:.04em;text-align:center;margin:10px 0 0;color:var(--muted)}
.concept-summary{font-size:15px;line-height:1.9;color:var(--muted);max-width:790px;margin:42px auto 56px}
.story-bottom{display:none}
.concept-story.is-scroll-story{height:330svh;position:relative}
.is-scroll-story .concept-sticky{top:var(--story-top);height:calc(100svh - var(--story-top) - var(--story-dock) - 12px);min-height:0;position:sticky;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:0;padding:0;isolation:isolate}
.is-scroll-story .story-heading{padding-block:25px 10px;position:relative;z-index:2}
.is-scroll-story .concept-layout{gap:28px;align-items:center;min-height:0;width:100%}
.is-scroll-story .concept-copy{position:relative;z-index:2;min-width:0}
.is-scroll-story .concept-stages{display:grid;grid-template-areas:'step';margin:0;min-height:0}
.is-scroll-story .concept-stages>li{grid-area:step;margin:0;opacity:0;visibility:hidden;transform:none;transition:none;pointer-events:none}
.is-scroll-story .concept-stages>li:first-child{opacity:1;visibility:visible}
.is-scroll-story .concept-stages>li.is-active{transition:none}
.is-scroll-story .concept-visual{position:relative;min-height:0;height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-self:stretch}
.is-scroll-story .story-product-window{height:100%;aspect-ratio:auto;max-height:none;min-height:0;min-width:0}
.is-scroll-story.story-in-view .spray-stage{will-change:transform}
.is-scroll-story .concept-visual .spray-controls{display:none}
.is-scroll-story .story-bottom{display:flex;align-items:center;justify-content:space-between;gap:35px;padding-block:18px 24px}
.story-scroll-cue{font-size:11px;white-space:nowrap;color:var(--muted)}
.story-scroll-cue span{display:inline-block;margin-left:10px}
.is-scroll-story .concept-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:58%;max-width:none;margin:0}
.concept-progress button{position:relative;border:0;border-top:2px solid #d2d2d7;border-radius:0;padding:12px 0 4px;background:none;min-height:44px;white-space:nowrap;cursor:pointer;text-align:left;color:#6e6e73;font-family:inherit;font-size:12px;line-height:1.5}
.concept-progress button>span{font-size:10px;margin-right:7px}
.concept-progress button::before{content:"";height:2px;position:absolute;top:-2px;left:0;right:0;background:var(--blue);transform:scaleX(var(--step-progress,0));transform-origin:left}
.concept-progress button[aria-current]{color:var(--ink)}
.concept-progress button:focus-visible{outline:2px solid var(--blue);outline-offset:5px;border-radius:3px}
.concept-progress button:hover{color:var(--blue)}
@media(min-width:761px) and (max-height:750px){
 .is-scroll-story .story-heading{padding-top:20px}
 .is-scroll-story .concept-stages h3{font-size:40px}
 .is-scroll-story .concept-stages p{font-size:15px;margin-top:16px}
 .is-scroll-story .story-bottom{padding-block:12px 18px}
}
@media(max-width:900px){
 .concept-story .concept-layout{gap:20px;grid-template-columns:1fr 1.1fr}
 .concept-story .concept-stages h3{font-size:34px}
 .concept-story .concept-stages p{font-size:14px}
 .concept-progress button{font-size:11px}
 .is-scroll-story .concept-progress{gap:16px;width:62%}
}
@media(max-width:760px){
 .story-heading{padding-top:30px;align-items:flex-start}
 .story-heading .eyebrow{font-size:10px;margin-bottom:6px}
 .home-page .story-heading h2{font-size:18px;line-height:1.5;letter-spacing:-.045em}
 .story-skip{font-size:10px;padding-top:25px}
 .story-skip span{margin-left:3px}
 .concept-story .concept-layout{display:flex;flex-direction:column;align-items:stretch;gap:24px}
 .concept-story .concept-stages h3{font-size:32px;line-height:1.3}
 .concept-story .concept-stages p{font-size:13px;line-height:1.8;margin-top:12px}
 .concept-story .concept-stages small{font-size:10px;line-height:1.7;margin-top:9px}
 .concept-story .concept-step-label{font-size:10px;margin-bottom:10px}
 .concept-story .concept-visual{width:100%;padding:0;margin:0}
 .concept-story .story-product-window{aspect-ratio:1.42;border-radius:18px;max-height:none}
 .concept-story .concept-visual .spray-stage{max-width:none}
 .concept-summary{font-size:13px;line-height:1.9;margin-block:30px 42px}
 .concept-story.is-scroll-story{height:320svh}
 .is-scroll-story .concept-sticky{height:calc(100svh - var(--story-top) - var(--story-dock) - 10px);gap:0}
 .is-scroll-story .story-heading{padding:16px 0 12px}
 .is-scroll-story .concept-layout{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:0;align-items:center}
 .is-scroll-story .concept-copy{padding-top:12px}
 .is-scroll-story .concept-stages{min-height:0}
 .is-scroll-story .concept-visual{margin-top:0;align-self:stretch}
 .is-scroll-story .story-product-window{height:100%;aspect-ratio:auto;max-height:none;min-height:0}
 .is-scroll-story .concept-visual figcaption{font-size:9px;margin-top:5px}
 .is-scroll-story .story-bottom{display:block;padding:12px 0 10px}
 .story-scroll-cue{display:none}
 .is-scroll-story .concept-progress{width:100%;gap:12px}
 .concept-progress button{font-size:10px;min-height:44px;padding:10px 0 4px;letter-spacing:-.03em}
 .concept-progress button>span{display:block;font-size:9px;margin:0 0 3px}
}
@media(max-width:760px) and (max-height:740px){
 .is-scroll-story .concept-stages h3{font-size:28px;line-height:1.25}
 .is-scroll-story .concept-stages p{font-size:12px;margin-top:9px}
 .is-scroll-story .concept-stages small{font-size:9px;margin-top:7px}
 .is-scroll-story .concept-step-label{margin-bottom:7px}
 .is-scroll-story .story-heading{padding-block:12px 6px}
 .is-scroll-story .concept-copy{padding-top:6px}
 .is-scroll-story .story-bottom{padding-top:8px}
}
@media(prefers-reduced-motion:reduce){
 .concept-story .spray-stage{transform:none!important;will-change:auto!important}
}
