/* The product chapter opens like an aperture; the footer remains quiet. */
.product-heading{padding-top:82px;padding-bottom:62px;background:#101112;overflow:clip}
.product-heading .section-index{margin-bottom:38px}
.product-heading .heading-row{display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:center}
.product-heading .heading-row>p{padding-left:3.5vw;margin:0;max-width:490px;border-left:1px solid rgba(201,174,117,.35)}
.product-heading:after{left:50%;bottom:0;width:1px;height:42px;background:linear-gradient(transparent,rgba(201,174,117,.65))}
.product-story{view-timeline-name:--product-chapter-entry;view-timeline-axis:block}
/* These two planes act on the visual surface, never on sticky geometry. */
.product-story.motion-ready .product-stage:before,
.product-story.motion-ready .product-stage:after{content:"";position:absolute;left:0;right:0;height:50.1%;z-index:9;pointer-events:none;background:#101112;will-change:transform}
.product-story.motion-ready .product-stage:before{top:0;transform:translate3d(0,-101%,0);border-bottom:1px solid rgba(201,174,117,.22)}
.product-story.motion-ready .product-stage:after{bottom:0;transform:translate3d(0,101%,0);border-top:1px solid rgba(201,174,117,.22)}
.works-showcase{view-timeline-name:--works-chapter-entry;view-timeline-axis:block;padding-top:72px;background:linear-gradient(180deg,#0c0f10 0,#101112 230px)}
.works-showcase:before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(201,174,117,.65) 35%,rgba(201,174,117,.65) 65%,transparent);transform-origin:50% 50%}
.works-intro{padding-bottom:28px}
.works-intro .section-index{margin-bottom:25px}
@supports (animation-timeline:view()) and (animation-range:entry 0% entry 100%){
 @media(min-width:901px) and (min-height:600px) and (prefers-reduced-motion:no-preference){
  .product-story.motion-ready .product-stage:before{animation:chapter-aperture-top auto linear both;animation-timeline:--product-chapter-entry;animation-range:entry 6% entry 84%}
  .product-story.motion-ready .product-stage:after{animation:chapter-aperture-bottom auto linear both;animation-timeline:--product-chapter-entry;animation-range:entry 6% entry 84%}
  .works-showcase:before{animation:chapter-join-line auto linear both;animation-timeline:--works-chapter-entry;animation-range:entry 0% entry 60%}
  .works-viewport{animation:chapter-work-reveal auto linear both;animation-timeline:--works-chapter-entry;animation-range:entry 28% entry 92%}
 }
}
@keyframes chapter-aperture-top{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-101%,0)}}
@keyframes chapter-aperture-bottom{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,101%,0)}}
@keyframes chapter-join-line{from{transform:scaleX(.12);opacity:.35}to{transform:scaleX(1);opacity:1}}
@keyframes chapter-work-reveal{from{clip-path:inset(14% 0 0 0)}to{clip-path:inset(0)}}
/* Fallback values are written only by the small scroll adapter. */
.chapter-flow-fallback .product-story.motion-ready .product-stage:before{transform:translate3d(0,calc(-101% * var(--chapter-open,1)),0)}
.chapter-flow-fallback .product-story.motion-ready .product-stage:after{transform:translate3d(0,calc(101% * var(--chapter-open,1)),0)}
.chapter-flow-fallback .works-showcase:before{transform:scaleX(var(--chapter-line,1));opacity:var(--chapter-line-opacity,1)}
.chapter-flow-fallback .works-viewport{clip-path:inset(var(--chapter-work-crop,0%) 0 0 0)}
@media(max-width:900px){
 .product-heading{padding-top:64px;padding-bottom:48px}
 .product-heading .heading-row{gap:28px}
 .product-heading .heading-row>p{padding-left:22px}
 .works-showcase{padding-top:60px}
}
@media(max-width:640px){
 .product-heading{padding-top:56px;padding-bottom:42px}
 .product-heading .section-index{margin-bottom:30px}
 .product-heading .heading-row{display:block}
 .product-heading .heading-row>p{margin-top:26px;padding-left:18px;border-left-color:rgba(201,174,117,.45)}
 .product-heading:after{left:7vw;height:24px}
 .works-showcase{padding-top:50px}
 .works-intro{padding-bottom:26px}
 .works-showcase:before{left:7vw;right:7vw}
}
@media(prefers-reduced-motion:reduce){
 .product-story.motion-ready .product-stage:before,.product-story.motion-ready .product-stage:after{display:none}
 .works-showcase:before{animation:none!important;transform:none!important;opacity:1!important}
 .works-viewport{animation:none!important;clip-path:none!important}
}