.scroll-story{position:relative;background:#000}
.workflow-anchor{position:absolute;top:90vh}
.story-pin{position:relative;background:#000}
.workflow-stage{position:relative;padding:40px 5vw 60px;background:#000}
.workflow-canvas{display:block;width:100%;max-width:1680px;height:auto;margin:auto}
.workflow-path,.workflow-arrowhead{fill:none;stroke:#d6b66e;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.story-seam,.story-caption{display:none}
.scroll-story-enabled .scroll-story{height:640svh}
.scroll-story-enabled .story-pin{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;perspective:1200px}
.scroll-story-enabled .story-pin>.hero{position:absolute;inset:0;min-height:100%;height:100%;width:100%;will-change:transform,opacity;transform-origin:50% 48%}
.scroll-story-enabled .hero .intro{min-height:100%;height:100%}
.scroll-story-enabled .workflow-stage{position:absolute;inset:0;display:grid;place-items:center;padding:5vh 5vw 7vh;opacity:0;pointer-events:none;will-change:clip-path,opacity;clip-path:inset(50% 0)}
.scroll-story-enabled .workflow-canvas{width:min(90vw,calc(86svh * 1.7777778));max-height:86svh}
.scroll-story-enabled .workflow-node{opacity:0;will-change:transform,opacity,clip-path}
.scroll-story-enabled .workflow-path{stroke-dasharray:1;stroke-dashoffset:1}
.scroll-story-enabled .workflow-arrowhead{opacity:0}
.scroll-story-enabled .story-seam{display:block;position:absolute;left:8%;right:8%;height:1px;top:50%;background:linear-gradient(90deg,transparent,#c6a875 25%,#eadaba 50%,#c6a875 75%,transparent);transform:scaleX(0);opacity:0;pointer-events:none}
.scroll-story-enabled .story-caption{position:absolute;bottom:22px;left:6%;right:6%;display:flex;align-items:center;gap:24px;color:#c6a875;font-size:9px;letter-spacing:.22em;opacity:0;pointer-events:none}
.story-chapter{min-width:190px}
.story-progress{height:1px;flex:1;background:#30291e}
.story-progress i{display:block;width:100%;height:100%;background:#c6a875;transform:scaleX(0);transform-origin:left}
.story-count{font-variant-numeric:tabular-nums}
@media(max-width:767px){
.scroll-story-enabled .scroll-story{height:600svh}
.scroll-story-enabled .hero{min-height:100%}
.scroll-story-enabled .hero .intro{min-height:100%;padding-top:45px;padding-bottom:40px}
.scroll-story-enabled .workflow-stage{padding:5vh 12px 9vh;place-items:center}
.scroll-story-enabled .workflow-canvas{width:100%;max-height:82svh}
.scroll-story-enabled .story-caption{bottom:30px;gap:12px;font-size:8px;left:24px;right:24px}
.story-chapter{min-width:130px}
}
@media(prefers-reduced-motion:reduce){.workflow-stage{padding-top:48px;padding-bottom:48px}.workflow-canvas{max-width:1200px}.story-caption,.story-seam{display:none!important}}

.workflow-canvas--mobile{display:none}
@media(max-width:767px){.workflow-canvas--desktop{display:none}.workflow-canvas--mobile{display:block}.scroll-story-enabled .workflow-canvas--mobile{width:min(100%,calc(82svh * .65625));max-height:82svh}.workflow-path,.workflow-arrowhead{stroke-width:3}}

.hero{isolation:isolate}
.hero-stars{position:absolute;inset:0;width:100%;height:100%;opacity:.1;pointer-events:none;z-index:0}
.hero .portrait{z-index:1}
.hero .intro{z-index:2}
.hero .scroll{z-index:3}

.workflow-end-anchor{position:absolute;top:calc(100% - 100svh)}

/* Row-by-row pacing: two product rows, with a shorter scroll distance. */
.scroll-story-enabled .scroll-story{height:370svh}
@media(max-width:767px){.scroll-story-enabled .scroll-story{height:330svh}}

/* Opaque portrait backing keeps the star field off the photograph.
   Edge-only black feathering blends the image into the hero. */
.hero .portrait{background:#000;isolation:isolate}
.hero .portrait img{position:relative;z-index:0}
.hero .portrait::after{z-index:1;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.85) 3%,rgba(0,0,0,.4) 9%,transparent 22%),linear-gradient(270deg,#000 0%,rgba(0,0,0,.7) 3%,rgba(0,0,0,.22) 9%,transparent 18%),linear-gradient(180deg,#000 0%,rgba(0,0,0,.65) 2%,rgba(0,0,0,.15) 6%,transparent 11%),linear-gradient(0deg,#000 0%,rgba(0,0,0,.8) 5%,rgba(0,0,0,.28) 13%,transparent 24%);pointer-events:none}

/* Barely visible constellation field, as in the supplied reference. */
.hero-stars{opacity:.08}

.hero-stars{opacity:.1}

/* Increase visibility while keeping the constellation secondary to the hero. */
.hero-stars{opacity:.4}

/* One persistent field for the introduction and the complete workflow. */
.story-pin{isolation:isolate}
.story-pin>.hero-stars{z-index:0;height:100svh}
.story-pin>.hero,.story-pin>.workflow-stage{z-index:1;background:transparent}
.story-pin>.story-seam,.story-pin>.story-caption{z-index:2}
@media(prefers-reduced-motion:reduce){.story-pin>.hero-stars{height:100%}}