:root{
  --rumo-canvas:#07152f;
  --rumo-canvas-mid:#10132d;
  --rumo-canvas-warm:#171026;
  --rumo-surface:rgba(255,255,255,.055);
  --rumo-surface-hover:rgba(224,112,255,.11);
  --rumo-text:#f8f4fb;
  --rumo-muted:rgba(248,244,251,.64);
  --rumo-line:rgba(248,244,251,.16);
  --rumo-accent:#e070ff;
  --rumo-accent-deep:#8b2dac;
}

/*
  One continuous canvas. Sections organise content; they no longer behave like
  separate colour slides.
*/
html,body{background:var(--rumo-canvas);color:var(--rumo-text)}
main{background:linear-gradient(180deg,var(--rumo-canvas) 0%,var(--rumo-canvas-mid) 42%,var(--rumo-canvas-warm) 72%,var(--rumo-canvas) 100%)}
.screen:not(.screen-hero){min-height:auto;color:var(--rumo-text);background:transparent}
.screen-about,.screen-projects,.screen-summary,.screen-contact{background:transparent;color:var(--rumo-text)}
.screen-about:before,.screen-projects:before{display:none}
.screen:not(.screen-hero):after{background:var(--rumo-line);opacity:1}

/* The terrain dissolves into the same canvas as the following sections. */
.screen-hero{background:transparent;overflow:visible}
.screen-hero .landscape{
  pointer-events:none;
  opacity:var(--terrain-opacity,1);
  transform:translate3d(0,var(--terrain-shift,0px),0);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 48%,rgba(0,0,0,.8) 67%,rgba(0,0,0,.3) 86%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 48%,rgba(0,0,0,.8) 67%,rgba(0,0,0,.3) 86%,transparent 100%);
}
.screen-about{z-index:2}
.screen.screen-about:after{display:none}
@media(prefers-reduced-motion:reduce){
  .screen-hero .landscape{opacity:1;transform:none}
}

/* Header belongs to the same canvas at every scroll position. */
.site-header,.site-header[data-theme="dark"],.site-header[data-theme="light"]{
  color:var(--rumo-text);
  background:linear-gradient(180deg,rgba(7,21,47,.96),rgba(7,21,47,.84));
  border:0;
}
.site-header:after{background:var(--rumo-line);opacity:1}
.site-header nav a:after{background:var(--rumo-accent)}

/* Shared typographic and colour hierarchy. */
.micro{color:var(--rumo-muted)}
.micro span{background:var(--rumo-accent)}
.about-title em,.projects-head em,.summary-copy em,.contact-main em{color:var(--rumo-accent)}
.about-copy p,.summary-copy>p,.contact-main>p{color:var(--rumo-muted)}
.about-copy h3,.about-copy p,.projects-head h2,.case footer,.summary-head,
.summary-copy,.service-stack,.trusted,.contact-main,.site-footer{color:var(--rumo-text)}

/* Flow and rhythm: content determines section height. */
.about-layout{margin:clamp(76px,9vw,138px) 0 clamp(70px,8vw,116px)}
.process-line{border-color:var(--rumo-line)}
.process-line span,.process-line>i{color:var(--rumo-accent)}
.process-line article{border-color:var(--rumo-line)}

.project-stage-real{margin-top:clamp(50px,6vw,82px)}
.filters button{
  color:var(--rumo-muted);
  border-color:var(--rumo-line);
  background:var(--rumo-surface);
}
.filters button:hover{color:var(--rumo-text);border-color:rgba(224,112,255,.55)}
.filters .active{color:#190d20;background:var(--rumo-accent);border-color:var(--rumo-accent)}
.case footer p{color:var(--rumo-muted);opacity:1}
.case footer b{color:var(--rumo-accent)}
.case-art{border:1px solid rgba(255,255,255,.09);box-shadow:0 24px 60px rgba(0,0,0,.22)}

.summary-layout{margin:clamp(86px,10vw,150px) 0 clamp(72px,8vw,116px)}
.summary-head>p:last-child{color:var(--rumo-muted)}
.pill-dark{color:#190d20;background:var(--rumo-accent);box-shadow:0 10px 35px rgba(224,112,255,.18)}
.service-stack{border-color:var(--rumo-line)}
.service-stack article{border-color:var(--rumo-line);transition:background .22s,border-color .22s}
.service-stack article:hover{background:var(--rumo-surface)}
.service-stack article.open{
  color:var(--rumo-text);
  background:linear-gradient(90deg,var(--rumo-surface-hover),rgba(224,112,255,.015));
  box-shadow:inset 3px 0 0 var(--rumo-accent);
}
.service-stack article.open>span,.service-stack article.open button{color:var(--rumo-accent)}
.service-stack p{color:var(--rumo-muted);opacity:1}
.trusted{border-color:var(--rumo-line)}
.trusted>p{color:var(--rumo-muted)}
.trusted span{color:var(--rumo-muted);border-color:var(--rumo-line);transition:background .2s,color .2s}
.trusted span:hover{color:var(--rumo-text);background:var(--rumo-surface-hover)}

/* The close is a raised branded moment, not a new full-page colour theme. */
.screen-contact{isolation:isolate}
.contact-orb{
  z-index:-1;
  opacity:.34;
  filter:blur(2px);
  background:radial-gradient(circle at 35% 34%,#efb0ff 0 3%,#b53fd5 27%,#6f1f8a 58%,rgba(7,21,47,0) 74%);
}
.contact-main{margin-top:clamp(76px,10vw,138px)}
.contact-people a{
  color:var(--rumo-text);
  border-color:var(--rumo-line);
  background:var(--rumo-surface);
}
.contact-people a:hover{background:var(--rumo-surface-hover);border-color:rgba(224,112,255,.5)}
.contact-people span{color:var(--rumo-muted);opacity:1}
.site-footer{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  margin-top:clamp(110px,16vw,220px);
  border-color:var(--rumo-line);
}
.site-footer p,.site-footer>div a{color:var(--rumo-muted)}
.site-footer>div a:hover{color:var(--rumo-accent)}

@media(max-width:900px){
  .site-header nav.open{background:#0c1731;border:1px solid var(--rumo-line)}
  .about-layout,.summary-layout{margin-top:72px;margin-bottom:72px}
  .trusted span{border-color:var(--rumo-line)}
}

@media(max-width:720px){
  .screen:not(.screen-hero){min-height:auto}
  .about-layout,.summary-layout{margin-top:56px;margin-bottom:64px}
  .screen-projects,.screen-summary,.screen-contact{min-height:auto}
  .site-footer{margin-top:96px}
}