.project-universe{height:420svh;position:relative;background:var(--sandstone);color:var(--ink)}
.universe-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;background:var(--sandstone)}
.universe-stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--khaki);opacity:var(--scene-exit,0);z-index:120}
.project-orb{position:absolute;left:4%;top:10%;width:76vmin;height:76vmin;border-radius:50%;background:radial-gradient(ellipse at 73% 26%,#f1e0bc 0%,#e1c49c 26%,#d8ae99 51%,#ad795d 78%,#b9b99d 100%);box-shadow:inset -15px -20px 45px #75432d15,inset 8px 5px 22px #fff5e95c;transform:translateX(var(--orb-x,0%)) scale(var(--orb-scale,.76));will-change:transform}
.project-orbits{position:absolute;width:95vw;height:90vh;border:1px solid #75432d1c;border-radius:50%;left:25%;top:3%;transform:rotate(var(--orbit-turn,0deg));pointer-events:none}
.project-orbits:before,.project-orbits:after{content:"";position:absolute;inset:8% 18%;border:1px solid #75432d1c;border-radius:50%;transform:rotate(55deg)}
.project-orbits:after{inset:-20% 35%;transform:rotate(-25deg)}
.universe-heading{position:absolute;z-index:65;left:6%;top:58%;pointer-events:none}
.universe-heading .eyebrow{font-size:10px;letter-spacing:.2em;margin-bottom:20px;color:var(--walnut)}
.universe-heading h2{font-size:clamp(90px,15vw,240px);letter-spacing:-.065em;line-height:.88;font-weight:400}
.universe-caption{font:italic clamp(20px,2.3vw,34px) Georgia,serif;margin-top:24px;color:var(--walnut)}
.universe-link{display:inline-flex;align-items:center;gap:24px;margin-top:25px;padding:10px 0;border-bottom:1px solid #ff2525;color:#fff;font-size:14px;pointer-events:auto;text-shadow:none}.universe-link span{color:#ff2525;font-size:22px}.universe-link:hover{color:#ff2525}
.project-cloud{position:absolute;inset:0;z-index:10;pointer-events:none}
.project-tile{position:absolute;left:59%;top:43%;margin:0;width:var(--width);aspect-ratio:var(--ratio);border-radius:10px;overflow:hidden;background:var(--surface);box-shadow:0 8px 22px #49312212,inset 0 0 0 1px #fff3;will-change:transform;transform-origin:center}
.project-tile:after{content:"";position:absolute;inset:0;opacity:.6;background-image:url("assets/project-grain.svg");mix-blend-mode:soft-light;pointer-events:none}
.project-tile img,.project-tile video{display:block;width:100%;height:100%;object-fit:cover}
.project-tile video{transform:translateZ(0);backface-visibility:hidden;will-change:transform}
.universe-footer{position:absolute;bottom:30px;left:6%;right:6%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.18em;z-index:125;color:var(--walnut);pointer-events:none}
.universe-motion{position:fixed;right:6%;top:30px;z-index:230;border:1px solid var(--line);color:var(--walnut);background:#d2bc94c9;border-radius:30px;padding:10px 15px;font-size:11px;cursor:pointer;opacity:var(--universe-control-opacity,0)}
.project-universe.is-static{height:100svh}
@media(max-width:700px){.project-universe{height:330svh}.project-orb{width:100vw;height:100vw;left:-22%;top:23%}.universe-heading{left:6%;top:63%;z-index:110}.universe-heading h2{font-size:24vw}.universe-heading .eyebrow{font-size:8px}.universe-caption{font-size:21px}.project-tile{border-radius:7px;left:53%;top:40%}.universe-footer{font-size:8px;bottom:22px}.universe-scroll{max-width:120px;text-align:right}.project-universe.is-static{height:100svh}}
@media(prefers-reduced-motion:reduce){.project-universe{height:100svh}.project-tile,.project-orb{will-change:auto}}
/* The following chapters use the same scroll-led rhythm, without hiding content on unsupported browsers. */
@supports(animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){
 .services>h2,.services>.eyebrow,.audience-grid article,.approach>h2,.steps>div,.contact-intro,.contact-details{animation:chapter-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
 .audience-grid article:nth-child(2),.contact-details{animation-range:entry 5% entry 100%}
 @keyframes chapter-arrive{from{opacity:.25;transform:translateY(65px)}to{opacity:1;transform:translateY(0)}}
 }
}
/* The final video frame dissolves into the next chapter's sandstone. */
.journey .stage:after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:var(--sandstone);opacity:clamp(0,calc((var(--p,0) - .94)*16.667),1)}
.still .journey .stage:after{display:none}

@media(min-width:701px){.project-orb{width:100vmin;height:100vmin;left:1%;top:5%}}
/* Independent rising images; the sticky scene releases into normal page flow. */
.project-universe{height:320svh}
.universe-stage:after{display:none}
.project-tile{left:50%;top:50%}
.universe-heading{top:40%;z-index:65}
.project-orb{transform:translate(var(--orb-x,0%),var(--orb-y,0%)) scale(var(--orb-scale,.76))}
@media(max-width:700px){.project-universe{height:310svh}.universe-heading{top:35%}.project-tile{left:50%;top:50%}}
.project-universe.is-static{height:100svh}
@media(prefers-reduced-motion:reduce){.project-universe{height:100svh}}
/* Continuous camera-like movement with quiet materials and a shorter release. */
.project-universe{height:350svh}
.project-tile{border-radius:7px;box-shadow:0 12px 32px #4931220c,inset 0 0 0 1px #ffffff30;backface-visibility:hidden}
.project-orb,.project-orbits{opacity:var(--ambient-opacity,1)}
.project-orbits{border-color:#75432d0d}
.project-orbits:before,.project-orbits:after{border-color:#75432d0d}
.universe-heading{z-index:220;top:38%}
.universe-motion,.universe-footer{z-index:230}
.universe-caption{font-size:clamp(19px,2vw,29px)}
@media(max-width:700px){.project-universe{height:330svh}.universe-heading{top:36%}.project-tile{border-radius:5px}.universe-caption{font-size:21px}}
.project-universe.is-static{height:100svh}
@media(prefers-reduced-motion:reduce){.project-universe{height:100svh}}
/* Real Earth surface, rendered as a sphere and rotated by scroll progress. */
.project-orb{background:radial-gradient(circle at 30% 30%,#496f82,#0b1724 65%,#020409);box-shadow:none}
.project-orb.earth-ready{background:none}
.project-orb canvas{display:block;width:100%;height:100%;border-radius:50%}
.universe-heading{color:#493122}
.universe-heading,.universe-heading .eyebrow,.universe-caption{color:#fff5e9;text-shadow:0 2px 18px #10253680}
/* No glow or ornamental rings around Earth. */
.project-orb,.project-orb canvas{box-shadow:none;filter:none;outline:0;border:0}
.project-orbits{display:none}
/* Share the final video viewport: crossfade directly into the rotating Earth. */
.project-universe{margin-top:-160svh;z-index:7;background:transparent}
.universe-stage{opacity:var(--handoff-opacity,0)}
.journey .stage{opacity:calc(1 - var(--handoff-opacity,0))}
.journey .stage:after{display:none}
.project-universe.is-static,.still .project-universe{margin-top:0}
.project-universe.is-static .universe-stage,.still .universe-stage{opacity:1}
@media(prefers-reduced-motion:reduce){.project-universe{margin-top:0}.universe-stage{opacity:1}}
.journey .service-choices,.journey .scroll-story,.journey .bottom-line{opacity:clamp(0,calc(1 - var(--handoff-opacity,0)*3),1)}
.journey .motion{opacity:var(--motion-opacity,1)}
.universe-motion:hover,.universe-motion:focus-visible{background:#ff2525;border-color:#ff2525;color:#fff}

/* Cinematic handoff: Earth appears over footage before anthracite takes over. */
.project-universe{background:transparent}
.universe-stage{opacity:1;background:transparent}
.universe-stage:before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(#03071144,#03071177),url('assets/space-background.jpg') center/cover no-repeat;opacity:var(--backdrop-opacity,0);pointer-events:none}
.project-orb{z-index:2;opacity:var(--earth-opacity,0)}
.project-cloud{opacity:var(--projects-opacity,0)}
.journey .stage{opacity:1}
.universe-heading h2{color:#ff2525;opacity:1;text-shadow:0 4px 28px #000b}
.universe-heading .eyebrow,.universe-caption{color:#fff;text-shadow:0 2px 18px #0008}
.universe-footer{color:#fff}
.universe-motion{color:#fff;background:#161616b8;border-color:#ffffff52}
.project-universe.is-static .universe-stage,.still .universe-stage{opacity:1}
.project-universe.is-static,.still .project-universe{--earth-opacity:1;--backdrop-opacity:1;--projects-opacity:1}

.project-orb{width:64vmin;height:64vmin;left:12%;top:18%}
@media(max-width:700px){.project-orb{width:76vw;height:76vw;left:4%;top:25%}}
/* The site uses intentional scroll-controlled motion in every browser. */
@media(prefers-reduced-motion:reduce){
  .project-universe{height:350svh}
  .project-universe.is-static{height:100svh}
  .project-tile,.project-orb{will-change:transform}
}