/* Cinematic scroll system — staged spatial narrative for Genova */
:root{--spatial-progress:0;--ambient-x:0px;--ambient-y:0px}
html,body{background:#050b17!important}html{scroll-behavior:smooth}body{overflow-x:clip}
.spatial-ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(60% 74% at calc(76% + var(--ambient-x)) calc(18% + var(--ambient-y)),rgba(74,107,155,.13),transparent 70%),radial-gradient(42% 54% at calc(12% - var(--ambient-x)) calc(82% - var(--ambient-y)),rgba(158,184,220,.05),transparent 72%)}
.spatial-ambient:before,.spatial-ambient:after{content:"";position:absolute;left:57%;top:47%;width:min(74vw,1180px);aspect-ratio:1;border:1px solid rgba(164,188,222,.055);border-radius:50%;transform:translate(-50%,-50%) rotate(calc(var(--spatial-progress) * 110deg))}
.spatial-ambient:after{width:min(48vw,760px);border-radius:0;transform:translate(-50%,-50%) rotate(calc(36deg - var(--spatial-progress) * 80deg))}
.spatial-hud{position:fixed;right:clamp(14px,2vw,34px);top:50%;z-index:60;display:grid;grid-template-columns:auto 2px;align-items:center;gap:13px;color:rgba(232,239,249,.7);transform:translateY(-50%);pointer-events:none;mix-blend-mode:screen}
.spatial-hud-copy{display:grid;justify-items:end;gap:6px;font-size:9px;line-height:1;letter-spacing:.2em;text-transform:uppercase}.spatial-hud-current{color:#fff;font-size:13px;letter-spacing:.08em}.spatial-hud-track{position:relative;width:2px;height:min(28vh,220px);overflow:hidden;background:rgba(255,255,255,.13)}.spatial-hud-bar{position:absolute;inset:0;transform:scaleY(var(--spatial-progress));transform-origin:top;background:linear-gradient(#fff,#86a6d0)}

@media (min-width:900px) and (min-height:640px){
.hero.hero-cinematic{height:380vh;min-height:2600px;padding:0;overflow:visible;background:#050b17}
.hero-stage{position:sticky;top:100px;height:calc(100vh - 100px);min-height:540px;overflow:hidden;isolation:isolate;background:#050b17}
.hero-stage:before{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,10,21,.95),rgba(4,10,21,.75) 28%,transparent 58%),linear-gradient(0deg,rgba(3,8,17,.8),transparent 44%)}
.hero-stage .hero-top{position:absolute;z-index:8;left:5%;right:5%;top:34px;margin:0}
.hero-stage .hero-grid{position:absolute;z-index:3;inset:0;display:block;min-height:0}
.hero-stage .hero-copy{position:absolute;z-index:8;left:5%;top:50%;width:min(42vw,760px);padding:0;transform:translateY(-48%)}
.hero-stage .hero-copy:before{top:-58px}.hero-stage .hero-copy h1{font-size:clamp(66px,6.9vw,126px);line-height:.92;letter-spacing:-.065em;text-wrap:balance}.hero-stage .hero-copy p{max-width:580px;font-size:clamp(15px,1.15vw,20px)}
.hero-stage .hero-image{position:absolute;z-index:1;inset:0;width:100%;height:100%;margin:0;aspect-ratio:auto;overflow:hidden;clip-path:inset(6% 3.5% 10% 43%);transform:none;will-change:clip-path,transform,filter}
.hero-stage .hero-image:before{display:none}.hero-stage .hero-image:after{z-index:2;background:linear-gradient(90deg,rgba(4,10,21,.65),transparent 48%),linear-gradient(0deg,rgba(3,8,17,.74),transparent 55%)}.hero-stage .hero-image img{width:100%;height:100%;object-fit:cover;box-shadow:none}.hero-stage .image-label{z-index:4;left:46%;right:6%}.hero-stage .hero-image figcaption{z-index:4;left:46%}
.hero-stage .hero-foot{position:absolute;z-index:8;left:5%;right:5%;bottom:24px;margin:0;padding:18px 20px;background:rgba(4,10,21,.58);backdrop-filter:blur(10px)}
.cinematic-statements{position:absolute;z-index:9;inset:0;pointer-events:none}.cinematic-statement{position:absolute;left:5%;top:50%;width:90%;margin:0;color:#f4f7fb;font:500 clamp(70px,9.7vw,174px)/.86 "Manrope","Avenir Next","Segoe UI",Arial,sans-serif;letter-spacing:-.075em;text-wrap:balance;opacity:0;transform:translateY(-50%);will-change:transform,opacity}.cinematic-statement em{color:#9fb8de;font-style:normal}.cinematic-statement:nth-child(2){text-align:right}.cinematic-statement:nth-child(3){width:76%}
.cinematic-shards{position:absolute;z-index:6;inset:0;pointer-events:none;overflow:hidden}.cinematic-shards i{position:absolute;display:block;width:clamp(90px,13vw,260px);height:2px;background:linear-gradient(90deg,transparent,rgba(215,226,241,.72),transparent);transform-origin:center;opacity:.28;will-change:transform}.cinematic-shards i:nth-child(1){left:4%;top:17%;transform:rotate(-15deg)}.cinematic-shards i:nth-child(2){left:22%;top:8%;transform:rotate(42deg)}.cinematic-shards i:nth-child(3){right:8%;top:22%;transform:rotate(-32deg)}.cinematic-shards i:nth-child(4){right:17%;bottom:15%;transform:rotate(29deg)}.cinematic-shards i:nth-child(5){left:9%;bottom:22%;transform:rotate(-48deg)}.cinematic-shards i:nth-child(6){left:48%;top:34%;transform:rotate(7deg)}.cinematic-shards i:nth-child(7){right:36%;bottom:8%;transform:rotate(-18deg)}.cinematic-shards i:nth-child(8){left:35%;bottom:29%;transform:rotate(64deg)}.cinematic-shards i:nth-child(9){right:2%;top:52%;transform:rotate(2deg)}.cinematic-shards i:nth-child(10){left:-2%;top:48%;transform:rotate(25deg)}
.cinematic-scroll-cue{position:absolute;z-index:10;left:50%;bottom:25px;display:flex;align-items:center;gap:14px;transform:translateX(-50%);color:rgba(230,238,248,.65);font-size:9px;font-weight:650;letter-spacing:.2em;text-transform:uppercase}.cinematic-scroll-cue:after{content:"";width:72px;height:1px;background:currentColor}

.intro.intro-cinematic{display:block;height:220vh;min-height:1450px;padding:0;overflow:visible;background:#070f1d}
.intro-stage{position:sticky;top:100px;height:calc(100vh - 100px);min-height:560px;display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;gap:5vw;overflow:hidden;padding:5% 7%;background:linear-gradient(115deg,rgba(14,28,48,.92),rgba(5,12,24,.98) 68%),#07101e;isolation:isolate}
.intro-stage:after{content:"";position:absolute;inset:8% 4%;z-index:-1;border:1px solid rgba(160,187,223,.09)}.intro-stage>div:first-of-type{position:relative;top:auto;align-self:center;padding:0}.intro-stage h2{margin-top:25px;font-size:clamp(70px,8.7vw,160px);line-height:.86;letter-spacing:-.075em}.intro-stage>div:nth-of-type(2){padding:clamp(34px,5vw,82px);border:1px solid rgba(137,166,204,.3);background:rgba(7,17,32,.76);box-shadow:35px 35px 0 rgba(151,179,215,.035);backdrop-filter:blur(15px)}
.intro-ghost{position:absolute;z-index:-1;left:-3%;bottom:-4%;white-space:nowrap;color:rgba(157,183,218,.035);font:600 clamp(130px,18vw,330px)/.8 "Manrope",Arial,sans-serif;letter-spacing:-.08em}

.services.is-horizontal{height:650vh;min-height:4400px;padding:0;overflow:visible;background:transparent}
.services-stage{position:sticky;top:100px;height:calc(100vh - 100px);min-height:560px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:clamp(34px,5vh,70px) 0 clamp(26px,4vh,54px) 7%;background:radial-gradient(60% 110% at 86% 50%,rgba(64,99,146,.16),transparent 72%),linear-gradient(110deg,#07101e,#0a1729 72%)}
.services-stage .section-head{flex:0 0 auto;margin-bottom:clamp(20px,3vh,42px);padding-right:7%}.services-stage .section-head h2{font-size:clamp(46px,4.6vw,82px);line-height:.92;letter-spacing:-.055em}.services-stage .service-rail{flex:0 0 auto;gap:4vw;overflow:hidden;padding:0 28vw 28px 0;scroll-behavior:auto}.services-stage .service-rail article{flex:0 0 min(68vw,1180px);min-height:clamp(340px,48vh,560px);margin:0;padding:clamp(34px,4vw,70px);display:grid;grid-template-columns:.32fr 1fr;grid-template-rows:auto 1fr auto;column-gap:clamp(32px,6vw,110px);background:linear-gradient(130deg,rgba(22,42,70,.96),rgba(7,18,35,.98));border-color:rgba(111,145,190,.38)}.services-stage .service-rail article:before{inset:14px}.services-stage .service-rail article:nth-child(even){transform:translateY(7vh)}.services-stage .service-rail .number{grid-row:1/4;margin:0;color:rgba(168,194,228,.22);font-size:clamp(82px,10vw,190px);line-height:.8;letter-spacing:-.06em}.services-stage .service-rail h3{align-self:end;max-width:780px;margin:0 0 22px;font-size:clamp(38px,4vw,72px);line-height:.95;letter-spacing:-.05em}.services-stage .service-rail p{max-width:720px;font-size:clamp(15px,1.15vw,20px);line-height:1.7}.services-stage .service-rail .tag{align-self:end}.services-stage .rail-progress{flex:0 0 auto;width:86%}.horizontal-note{position:absolute;right:7%;top:7%;color:rgba(219,231,247,.55);font-size:9px;font-weight:650;letter-spacing:.18em;text-transform:uppercase}
.delivery .section-head,.experience>div,.project .contact-layout{will-change:transform,opacity,clip-path}
}

@media(max-width:899.98px),(max-height:639.98px){.spatial-hud{left:0;right:0;top:0;display:block;transform:none}.spatial-hud-copy{display:none}.spatial-hud-track{width:100%;height:2px;background:transparent}.spatial-hud-bar{transform:scaleX(var(--spatial-progress));transform-origin:left}}
@media(prefers-reduced-motion:reduce){.spatial-ambient,.spatial-hud{display:none}}


.intro.intro-cinematic > .intro-stage {
  top: 100px;
  padding: 5% 7%;
  align-self: auto;
}
