.parallax-page{background:#100b15}
.parallax-page .site-header{background:#100b15e8;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:background .3s,border-color .3s}
.parallax-page .site-header.is-scrolled{background:#100b15f5;border-bottom-color:#fa5f9d24}
.parallax-page .site-header:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,#fa5f9d,#ffb7d7);transform:scaleX(var(--page-progress,0));transform-origin:left;pointer-events:none}
.parallax-page .hero,.parallax-page .provider-hero{position:relative;isolation:isolate;background:radial-gradient(ellipse at 10% 15%,#2a112630,transparent 60%),var(--bg)}
.scene-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.hero .scene-atmosphere{right:calc(50% - 80px);mask-image:linear-gradient(90deg,#000 55%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent)}
.provider-hero-intro{position:relative}
/* The Providers backdrop spans the whole hero (the section clips at the viewport edge), never the centred copy column: a box narrower than the heart shows its edge on a wide screen. */
.provider-hero .scene-atmosphere{inset:-64px 0 0;mask-image:linear-gradient(#000 45%,transparent);-webkit-mask-image:linear-gradient(#000 45%,transparent)}
.provider-hero .hero-heart{right:auto;left:calc(50% - min(36vw,460px));top:4%}
.provider-hero .scene-halo{left:calc(50% - 780px);top:40px}
.scene-halo{position:absolute;left:-250px;top:120px;width:760px;height:760px;border-radius:50%;background:radial-gradient(circle,#fa5f9d13,transparent 67%);border:1px solid #fa5f9d13}
.hero-heart-wrap{position:absolute;inset:0}
.hero-heart{position:absolute;right:-4%;top:8%;width:min(72vw,920px);height:auto;opacity:.22}
.parallax-page .hero-city{inset:-100px 38% -100px -3%;opacity:.52;z-index:-1}
.parallax-page .hero-layout{padding-top:72px;padding-bottom:64px}
.parallax-page .hero-copy{padding-top:36px}
.parallax-page .hero h1{font-size:clamp(92px,9.5vw,138px);font-weight:700;letter-spacing:-.035em;line-height:.98}
.parallax-page .hero h1>span{color:var(--pink);-webkit-text-stroke:0;font-size:.92em;letter-spacing:-.025em}
.parallax-page .provider-hero{padding-top:64px;overflow:hidden;background:var(--bg)}
.parallax-page .provider-hero>.container{position:relative}
.parallax-page .provider-hero h1{font-size:clamp(78px,8vw,116px);font-weight:700;letter-spacing:-.035em;line-height:1.04}
.parallax-page .provider-hero h1>span{color:var(--pink);-webkit-text-stroke:0;letter-spacing:-.045em}
.parallax-page .provider-film{margin-top:38px}
.parallax-page .possibilities{padding-top:110px}
.parallax-page .ways{border-top-color:#fa5f9d40}
.parallax-page .way{padding-top:36px;padding-bottom:42px}
.parallax-page .way h3{font-size:48px;color:var(--pink)}
.parallax-page .feature-stories,.parallax-page .provider-workspace{position:relative;overflow-x:clip}
.parallax-page .feature-story,.parallax-page .workspace-feature{position:relative;isolation:isolate;padding-block:116px;gap:80px;border-bottom-color:#fa5f9d26}
.parallax-page .story-copy,.parallax-page .workspace-copy{position:relative;z-index:1}
.parallax-page .story-copy h3{font-size:clamp(40px,4.3vw,58px);letter-spacing:-2.6px}
.parallax-page .workspace-copy h3{font-size:clamp(38px,3.8vw,50px);letter-spacing:-2px}
.parallax-page .feature-number{letter-spacing:1.5px}
.parallax-page .phone-story{padding:32px 24px 24px;border-color:#fa5f9d35;border-radius:30px;background:radial-gradient(ellipse at 50% 30%,#fa5f9d19,transparent 74%),#170f1d;box-shadow:0 35px 85px #0003}
.parallax-page .phone-story .screen-frame{width:min(100%,258px);border-radius:24px}
.parallax-page .workspace-image{padding:12px;border-radius:22px;border-color:#fa5f9d35;box-shadow:0 30px 90px #0005;background:#1a1021}
.parallax-page .workspace-image img{border-radius:12px}
.parallax-page .provider-fees{position:relative;padding-top:130px}
.parallax-page .fees-layout{position:relative}
.parallax-page .fee-statement{position:relative;isolation:isolate}
.fee-echo{position:absolute;right:0;top:-70px;z-index:-1;font-size:clamp(200px,31vw,410px);font-weight:650;letter-spacing:-.04em;line-height:1;color:#fa5f9d09;pointer-events:none}
.parallax-page .fee-number{font-size:clamp(140px,16vw,210px);letter-spacing:-.08em}
.parallax-page .fee-number>span{font-size:.53em;letter-spacing:-.04em}
.parallax-page .tool-grid article{position:relative;transition:background .25s}
.parallax-page .tool-grid article:hover{background:#fa5f9d04}
.parallax-page .provider-imports{background:radial-gradient(ellipse at 8% 70%,#fa5f9d0c,transparent 60%),#170f1d}
.parallax-page .import-platforms li{background:#100b1566}
.parallax-page .audience-crosslink{position:relative;padding-block:48px}
/* THE PINNED DEPTH SCENE (handoff §4): a 280vh section whose 100vh stage sticks while the backdrop settles, the
   heading arrives and the three cards fly in. parallax.js drives translate/scale/rotate/opacity from the pin's
   progress; .is-unpinned is what reduced motion gets — the same stage, laid out once, nothing pinned. */
.depth-story{position:relative;height:280vh;isolation:isolate;border-block:1px solid var(--line);margin-bottom:100px;background:var(--bg)}
.depth-inner{position:sticky;top:0;height:100vh;min-height:560px;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,4vh,48px);padding:76px 24px 28px}
.depth-bg{position:absolute;left:0;top:-10%;width:100%;height:120%;max-width:none;object-fit:cover;z-index:-2;opacity:.6;pointer-events:none}
.depth-veil{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--bg) 0%,#100b1573 30%,#100b1599 70%,var(--bg) 100%)}
.depth-intro{text-align:center;max-width:760px;margin:0 auto;text-shadow:0 2px 24px #100b1599}
.depth-intro .eyebrow{color:#ffffffbf}
.depth-intro h2{font-size:clamp(34px,8.6vw,76px);font-weight:600;letter-spacing:-.03em;line-height:1.02;margin-top:16px}
.depth-intro>p:last-child{font-size:clamp(16px,4.2vw,18px);line-height:1.7;color:#dfd1e4;max-width:52ch;margin:20px auto 0;text-wrap:balance}
.depth-gallery{display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px,2vw,24px);width:100%;max-width:1200px;margin:0 auto}
.depth-portrait{flex:none;width:min(31%,max(160px,calc((100vh - 460px) * .75)));position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;border:1px solid #ffffff24;border-radius:clamp(16px,2.4vw,24px);background:#201126;box-shadow:0 30px 80px #0008}
.depth-portrait>img{position:absolute;left:0;top:-10%;width:100%;height:120%;max-width:none;object-fit:cover;object-position:50% 38%}
.depth-portrait figcaption{position:absolute;left:0;right:0;bottom:0;padding:56px clamp(12px,2.4vw,24px) clamp(12px,2vw,22px);background:linear-gradient(180deg,transparent,#100b15eb);display:flex;flex-direction:column;gap:2px}
.depth-portrait figcaption>span{display:block;color:var(--text);font-size:clamp(15px,4vw,22px);font-weight:600;letter-spacing:-.01em;line-height:1.2}
.depth-portrait figcaption>small{display:block;font-family:var(--script);font-weight:400;font-size:calc(clamp(20px,5.4vw,30px) * var(--script-scale));line-height:1.1;letter-spacing:0;color:var(--script-color);transform:rotate(-2deg);transform-origin:left}
.depth-note{text-align:center;color:#bca5c6;font-size:13px;line-height:1.6;margin:0}
.provider-depth-story{margin-top:64px;margin-bottom:0}
.depth-story.is-unpinned{height:auto}
.depth-story.is-unpinned .depth-inner{position:relative;height:auto;min-height:0;padding-block:clamp(96px,12vw,160px)}
.closing-scene{position:relative;isolation:isolate;display:grid;place-items:center;gap:clamp(44px,6vw,72px);min-height:650px;padding:110px 0 100px;overflow:hidden;border-top:1px solid var(--line);background:radial-gradient(ellipse at 50% 70%,#fa5f9d0b,transparent 65%)}
.closing-heart{position:absolute;left:calc(50% - 400px);top:6%;width:800px;height:auto;opacity:.18;z-index:-1;pointer-events:none}
.closing-copy{text-align:center}
.closing-copy h2{margin:6px 0 0;font-size:clamp(76px,10.5vw,154px);line-height:.95;letter-spacing:-.035em;font-weight:650}
.closing-address{margin-top:28px;font-size:clamp(18px,2.3vw,28px);line-height:1.6;letter-spacing:.02em;color:var(--pink);overflow-wrap:anywhere}
.closing-note{margin-top:18px;font-size:13px;line-height:1.8;color:var(--muted)}
[data-parallax],[data-drift],[data-scene-card]{overflow-anchor:none}
@media(min-width:1600px){.parallax-page .hero-layout{padding-block:84px}.parallax-page .feature-story,.parallax-page .workspace-feature{padding-block:140px}}
@media(max-width:1100px){
 .parallax-page .hero-layout{padding-block:54px;gap:38px}
 .parallax-page .hero h1{font-size:clamp(78px,9.2vw,102px)}
 .parallax-page .provider-hero h1{font-size:clamp(68px,8.4vw,88px)}
 .parallax-page .feature-story,.parallax-page .workspace-feature{gap:42px;padding-block:100px}
 .parallax-page .story-copy h3{font-size:40px;letter-spacing:-1.8px}
 .parallax-page .workspace-copy h3{font-size:36px;letter-spacing:-1.6px}
 .parallax-page .phone-story{padding:25px 20px 21px}
}
@media(max-width:900px){
 .parallax-page .workspace-feature{gap:36px;padding-block:90px}
 .parallax-page .workspace-image{max-width:740px}
 .parallax-page .workspace-copy{max-width:650px}
}
@media(max-width:819.98px){
 .parallax-page .hero h1,.parallax-page .provider-hero h1{font-size:clamp(44px,11.5vw,124px);line-height:.95;letter-spacing:-.035em}
 .parallax-page .fee-number{font-size:clamp(104px,30vw,260px)}
 .depth-story{height:230vh}
 .depth-gallery{gap:0}
 .depth-portrait{width:48%;margin:0 -4%}
 .depth-story.is-unpinned .depth-portrait:nth-child(1){rotate:-6deg}
 .depth-story.is-unpinned .depth-portrait:nth-child(2){rotate:0deg;translate:0 -26px;z-index:2}
 .depth-story.is-unpinned .depth-portrait:nth-child(3){rotate:6deg}
}
@media(max-width:760px){
 .parallax-page .hero-layout{padding-top:42px;padding-bottom:42px;gap:36px}
 .parallax-page .hero-copy{padding:0}
 .parallax-page .hero-city{inset:-60px -20% 54% -20%;opacity:.4}
 .hero .scene-atmosphere{right:0;max-height:650px;mask-image:linear-gradient(#000 45%,transparent);-webkit-mask-image:linear-gradient(#000 45%,transparent)}
 .hero-heart{top:15%;right:-36%;width:120vw;opacity:.18}
 .scene-halo{width:600px;height:600px;left:-340px;top:0}
 .parallax-page .provider-hero{padding-top:38px}
 .provider-hero .scene-atmosphere{inset:-38px 0 0}
 .provider-hero .hero-heart{left:calc(50% - 60vw);width:120vw;top:10%}
 .provider-hero .scene-halo{left:calc(50% - 300px)}
 .parallax-page .provider-film{margin-top:28px}
 .parallax-page .possibilities{padding-top:68px}
 .parallax-page .way{padding-block:28px}
 .parallax-page .way h3{font-size:40px}
 .parallax-page .feature-story,.parallax-page .workspace-feature{gap:40px;padding-block:86px 60px}
 .parallax-page .story-copy h3{font-size:40px;letter-spacing:-1.8px}
 .parallax-page .workspace-copy h3{font-size:38px;letter-spacing:-1.7px}
 .parallax-page .phone-story{max-width:410px;padding:28px 24px 22px}
 .parallax-page .workspace-image{padding:9px;border-radius:16px}
 .parallax-page .workspace-image img{border-radius:9px}
 .parallax-page .provider-fees{padding-top:84px}
 .fee-echo{font-size:260px;top:-35px;right:4px}
 .parallax-page .audience-crosslink{padding-block:34px}
 .depth-story{margin-bottom:64px}
 .provider-depth-story{margin-top:48px;margin-bottom:0}
 .closing-scene{min-height:480px;padding-block:84px 72px}
 .closing-heart{width:600px;left:calc(50% - 300px);top:10%}
 .closing-copy h2{font-size:clamp(72px,15vw,112px);line-height:1.03}
 .closing-copy h2>span{display:block}
 .closing-address{font-size:clamp(16px,4.6vw,22px);letter-spacing:0}
 .closing-note{font-size:12px}
}
@media(max-width:359px){
 .parallax-page .header-inner{gap:2px}
 .parallax-page .story-copy h3,.parallax-page .workspace-copy h3{font-size:36px;letter-spacing:-1.5px}
 .parallax-page .phone-story{padding:22px 17px 18px}
 .closing-copy h2{font-size:72px}
}
@media(prefers-reduced-motion:reduce){
 .depth-story{height:auto}
 .depth-inner{position:relative;height:auto;min-height:0;padding-block:clamp(96px,12vw,160px)}
}
@media print{
 .parallax-page [data-reveal]{opacity:1!important;translate:none!important;transition:none!important}
 .parallax-page [data-parallax],.parallax-page [data-drift]{translate:none!important}
 .scene-atmosphere,.closing-heart,.depth-bg{display:none}
 .depth-story{height:auto}
 .depth-inner{position:static;height:auto;min-height:0}
}
