section.section-four{display:block;min-height:0;height:auto;overflow:visible}
.section-four .story-pin{max-width:none;padding:0;width:100%;margin:0}
.section-four .scroll-story:nth-child(n){height:100svh;min-height:0;width:100%;max-width:none;margin:0;text-align:center;opacity:1}
.story-scene{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;padding:50px 7vw}
.section-four .scroll-story h2{display:block;max-width:1100px;margin:0;font:400 clamp(40px,5.6vw,80px)/1.1 HK,Arial,sans-serif;letter-spacing:-.035em;color:#fff;transform:translateY(var(--story-heading-y,0px));transition:none}
.section-four .scroll-story h2:after{content:none}
.section-four .scroll-story p{position:absolute;top:54%;left:50%;width:min(760px,86%);transform:translate(-50%,var(--story-copy-y,18px));display:block;font:400 clamp(17px,1.6vw,22px)/1.65 HK,Arial,sans-serif;letter-spacing:0;color:#ddd;margin:0;opacity:var(--story-copy-opacity,0);transition:none}
@media(max-width:700px){.section-four .scroll-story h2{font-size:clamp(36px,8vw,52px)}.section-four .scroll-story p{top:53%;font-size:17px}}
@media(prefers-reduced-motion:reduce){.section-four .scroll-story:nth-child(n){height:auto;min-height:100svh}.story-scene{position:relative;height:auto;min-height:100svh;flex-direction:column;gap:30px}.section-four .scroll-story h2{transform:none}.section-four .scroll-story p{position:static;transform:none;opacity:1;width:100%}}

/* Each story stays behind the next as the following section covers it. */
.section-four .story-pin{position:relative;isolation:isolate}
.section-four .scroll-story:nth-child(n){position:sticky;top:0;background:#101014;box-shadow:none;isolation:isolate}
.section-four .scroll-story:nth-child(1){z-index:1}
.section-four .scroll-story:nth-child(2){z-index:2}
.section-four .scroll-story.story-team{z-index:3;background:#27272d}
.section-four:before{display:none}
@media(prefers-reduced-motion:reduce){.section-four .scroll-story:nth-child(n){position:relative;top:auto}}

.section-four .scroll-story:nth-child(1){background:#ff3826;overflow:clip}
/* Keep a consistent gap regardless of headline wrapping. */
.section-four .story-scene{flex-direction:column;gap:40px}
.section-four .scroll-story h2{transform:none}
.section-four .scroll-story p{position:static;top:auto;left:auto;width:min(760px,100%);transform:none;margin:0}
.section-four .scroll-story p{opacity:0;transform:translateY(var(--story-title-start,70px));transition:opacity 900ms ease-in-out,transform 900ms ease-in-out}
.section-four .scroll-story.story-copy-ready p{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.section-four .scroll-story p{transform:none;transition:none}}
.section-four .scroll-story h2{opacity:1;transform:translateY(var(--story-title-start,70px));transition:transform 900ms ease-in-out}
.section-four .scroll-story.story-copy-ready h2{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.section-four .scroll-story h2{transform:none;transition:none}}
.section-four .scroll-story p{font-size:clamp(15px,1.4vw,19px);color:rgba(255,255,255,.7)}
@media(max-width:700px){.section-four .scroll-story p{font-size:15px}}

/* One continuous background, with each story pushing the previous story away. */
section.section-four{background:#ff3826;isolation:isolate}
.story-shared-background{position:sticky;top:0;height:100svh;margin-bottom:-100svh;overflow:hidden;z-index:0;pointer-events:none}
.story-shared-background .hero-blurs{z-index:0}
.section-four .story-pin{z-index:1}
.section-four .scroll-story:nth-child(n){position:relative;top:auto;background:transparent;overflow:visible;z-index:auto}
.section-four .story-scene{position:relative;top:auto;opacity:var(--story-exit-opacity,1)}
@media(prefers-reduced-motion:reduce){.section-four .story-scene{opacity:1}}

.section-four .story-scene{filter:blur(var(--story-exit-blur,0px))}
@media(prefers-reduced-motion:reduce){.section-four .story-scene{filter:none}}
.story-shared-background:after{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.5);opacity:var(--story-entry-darkness,1);pointer-events:none}
@media(prefers-reduced-motion:reduce){.story-shared-background:after{opacity:0}}
.story-shared-background:before{content:"";position:absolute;inset:0;z-index:2;background:#000;opacity:var(--a-team-exit-darkness,0);pointer-events:none}
@media(prefers-reduced-motion:reduce){.story-shared-background:before{opacity:0}}


/* Supplied team portrait, scoped to the techie a-team story. */
.section-four .scroll-story.story-team{isolation:isolate}
.section-four .scroll-story.story-team::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('assets/techie-team-partners-original.retina.webp') center/contain no-repeat;width:min(73.5075vw, 112.858515svh);height:auto;aspect-ratio:1420/921;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,#000 80%,transparent 100%)}

/* Keep story headings centered while supporting copy reveals independently. */
.section-four .story-scene{gap:0}
.section-four .scroll-story h2,
.section-four .scroll-story.story-copy-ready h2{transform:none;transition:none}
.section-four .scroll-story p{position:absolute;top:calc(50% + 70px);left:50%;width:min(700px,86%);margin:0;font-size:clamp(14px,1.2vw,17px);transform:translateX(-50%);opacity:0;filter:blur(8px);transition:opacity 900ms ease-in-out,filter 900ms ease-in-out}
.section-four .scroll-story.story-copy-ready p{transform:translateX(-50%);opacity:1;filter:blur(0)}
@media(max-width:700px){.section-four .scroll-story p{top:calc(50% + 80px);font-size:14px}}
@media(prefers-reduced-motion:reduce){.section-four .scroll-story p{position:static;transform:none!important;opacity:1;filter:none;transition:none;margin-top:30px}}

/* Bottom-centered supporting copy across each story. */
.section-four .scroll-story p{top:auto;bottom:55px;left:0;width:100%;max-width:none;padding:0 7vw;box-sizing:border-box;text-align:center;transform:none}
.section-four .scroll-story.story-copy-ready p{transform:none}
@media(max-width:700px){.section-four .scroll-story p{top:auto;bottom:35px;padding:0 25px}}
@media(prefers-reduced-motion:reduce){.section-four .scroll-story p{position:static;padding:0;margin-top:30px}}

/* Fade the portrait itself into the dark section. */
.section-four .scroll-story.story-team{background:#101014}
.section-four .scroll-story.story-team::before{opacity:1}

/* Center supporting copy within 60% of the viewport. */
.section-four .scroll-story p{left:20%;width:60%;max-width:none;padding:0}

/* Subtle dramatic contrast on the portrait only. */
.section-four .scroll-story.story-team::before{filter:none}

/* Keep the portrait above the section fill and below the copy. */
.section-four .scroll-story.story-team::before{z-index:0}
.section-four .scroll-story.story-team .story-scene{z-index:1}

/* Blur text in padded layers instead of filtering the whole portrait scene. */
.section-four .story-scene{filter:none;isolation:isolate}
.section-four .story-scene h2{filter:blur(var(--story-exit-blur,0px));padding:20px;margin-inline:-20px;backface-visibility:hidden}
.section-four .story-team::before{backface-visibility:hidden;transform:translate3d(-50%,-50%,0);outline:none;border:0}

/* Feathered backdrop behind the techie a-team portrait. */
.section-four .scroll-story.story-team::after{
 content:"";position:absolute;pointer-events:none;z-index:0;
 left:50%;top:50%;width:min(78vw,120svh);height:64%;
 transform:translate(-50%,-50%);border-radius:14%;
 background:radial-gradient(ellipse at 50% 55%,rgba(0,0,0,.65) 0%,rgba(0,0,0,.42) 42%,rgba(0,0,0,.12) 67%,transparent 82%);
 filter:blur(28px);
}
.section-four .scroll-story.story-team::before{z-index:1}
.section-four .scroll-story.story-team .story-scene{z-index:2}

.section-four .scroll-story.story-team h2{color:#ff3826;opacity:0;filter:blur(12px);transition:opacity 1100ms ease-in-out,filter 1100ms ease-in-out}
.section-four .scroll-story.story-team.team-title-ready h2{opacity:1;filter:blur(var(--story-exit-blur,0px))}
@media(prefers-reduced-motion:reduce){.section-four .scroll-story.story-team h2{opacity:1;filter:none;transition:none}}

/* A feathered glass layer blurs the photograph immediately behind the title. */
.section-four .story-team h2{position:relative;isolation:isolate}
.section-four .story-team h2::before{
 content:"";position:absolute;inset:-55px -85px;z-index:-1;pointer-events:none;
 background:rgba(16,16,20,.48);backdrop-filter:blur(38px);-webkit-backdrop-filter:blur(38px);
 mask-image:radial-gradient(ellipse,#000 15%,rgba(0,0,0,.9) 42%,transparent 72%);
 -webkit-mask-image:radial-gradient(ellipse,#000 15%,rgba(0,0,0,.9) 42%,transparent 72%);
}

/* Blur a duplicate portrait so the feathered title blur works across Safari layers. */
.section-four .scroll-story.story-team::before{z-index:0}
.section-four .scroll-story.story-team::after{
 left:50%;top:50%;width:min(73.5075vw,112.858515svh);height:auto;aspect-ratio:1420/921;
 transform:translate(-50%,-50%);border-radius:0;z-index:1;
 background:url('assets/techie-team-partners-original.retina.webp') center/contain no-repeat;
 filter:blur(30px);
 mask-image:radial-gradient(ellipse 52% 19% at 50% 50%,#000 25%,rgba(0,0,0,.85) 55%,transparent 100%);
 -webkit-mask-image:radial-gradient(ellipse 52% 19% at 50% 50%,#000 25%,rgba(0,0,0,.85) 55%,transparent 100%);
}
.section-four .story-team h2::before{background:rgba(16,16,20,.7);backdrop-filter:none;-webkit-backdrop-filter:none;inset:-85px -145px}
.section-four .scroll-story.story-team.team-title-ready h2{transition-delay:600ms}

.section-four .scroll-story.story-team::after{opacity:0;transition:opacity 1100ms ease-in-out}
.section-four .scroll-story.story-team.team-title-ready::after{opacity:1;transition-delay:600ms}
@media(prefers-reduced-motion:reduce){.section-four .scroll-story.story-team::after{opacity:1;transition:none}}
/* Slightly lower the portrait and its matching blur layer together. */
.section-four .scroll-story.story-team::before,
.section-four .scroll-story.story-team::after{top:50%}
/* Keep the title's dark backdrop without blurring the portrait. */
.section-four .scroll-story.story-team::after{display:none}

/* Compact, fully colored techie a-team supporting copy. */
.section-four .scroll-story.story-team p{
 left:50%;width:calc(100% - 50px);max-width:440px;padding:0;
 bottom:95px;transform:translateX(-50%);color:#ff3826;
}
.section-four .scroll-story.story-team.story-copy-ready p{opacity:1;transform:translateX(-50%)}
@media(max-width:700px){.section-four .scroll-story.story-team p{bottom:75px}}
@media(prefers-reduced-motion:reduce){.section-four .scroll-story.story-team p{position:static;transform:none!important}}

/* Team description spans two lines along the bottom. */
.section-four .scroll-story.story-team p{top:auto;bottom:48px;width:calc(100% - 80px);max-width:1400px;font-size:clamp(16px,1.2vw,20px);line-height:1.55;text-align:center}
@media(max-width:700px){.section-four .scroll-story.story-team p{bottom:30px;width:calc(100% - 40px);font-size:15px}.section-four .scroll-story.story-team p br{display:none}}

/* Match the other story sections supporting-copy color. */
.section-four .scroll-story.story-team p{color:rgba(255,255,255,.7)}

/* Blurred app photograph behind the fitness story. */
.section-four .scroll-story.story-fitness{isolation:isolate;overflow:clip;background:#101014}
.section-four .scroll-story.story-fitness::before{content:"";position:absolute;inset:-24px;z-index:-1;pointer-events:none;background:url('assets/all-in-fitness-bg.retina.webp') center/cover no-repeat;filter:blur(8px) brightness(.7)}

/* Fitness story uses the supplied dark-red swatch and site-red type. */
.section-four .scroll-story.story-fitness{background:#2f0f0b}
.section-four .scroll-story.story-fitness::before{display:none}
.section-four .scroll-story.story-fitness h2,.section-four .scroll-story.story-fitness p{color:#ff3826}