/* One viewport-fixed original logo, behind the complete flowing page. */
body.studio-noir{isolation:isolate;--brand-lift:clamp(32px,10svh,90px)}
.studio-noir>.brand-intro-inner{position:fixed;inset:128px 0 0;z-index:0;display:grid;place-items:center;padding:24px var(--pad) 36px;pointer-events:none;opacity:1}
.brand-intro-logo{display:block;width:min(74vw,760px);height:auto;max-height:65svh;overflow:visible;transform:translateY(calc(-1 * var(--brand-lift)))}
.studio-noir .studybar,.studio-noir #start,.studio-noir>.legal-footer{position:relative;z-index:1}
.studio-noir #start{isolation:isolate;background:transparent}
.studio-noir #start>.brand-intro{position:relative;height:calc(clamp(460px,78svh,940px) - var(--brand-lift));background:transparent;pointer-events:none}
/* Only the section background paint is translucent. */
.studio-noir #start>section:not(.brand-intro){position:relative;z-index:1}
.studio-noir #start>.studio-hero{box-shadow:none}
/* Gentle entrances remain independent of the stationary background logo. */
.scroll-reveals .scroll-reveal{opacity:1;transition:translate .55s cubic-bezier(.22,.61,.36,1)}
.scroll-reveals .scroll-reveal:not(.is-shown){translate:0 24px}
@media(max-width:700px){.studio-noir>.brand-intro-inner{inset:105px 0 0;padding:24px var(--pad) 36px}.studio-noir #start>.brand-intro{height:calc(clamp(360px,66svh,620px) - var(--brand-lift))}.brand-intro-logo{width:100%;max-height:54svh}}
@media(prefers-reduced-motion:reduce){.scroll-reveals .scroll-reveal{transition:none!important;opacity:1!important;filter:none!important;translate:none!important}}

@media(max-height:600px){body.studio-noir{--brand-lift:16px}}

/* The original photo shade belongs to the opaque photo, not the text/link area. */
.studio-noir #roland .personal-portrait{overflow:hidden}
.studio-noir #roland .personal-portrait>img{opacity:1}
@media(max-width:700px) and (min-height:601px){body.studio-noir{--brand-lift:clamp(48px,13svh,120px)}}

/* Original CI RGB values, alpha only. Applied directly, including before JS runs. */
.studio-noir #start>.studio-hero,
.studio-noir #start>.studio-services,
.studio-noir #start>.studio-personal{background-color:rgba(16,16,14,.87)}
.studio-noir #start>.manifesto{background-color:rgba(50,41,35,.89)}
.studio-noir #start>.showcase{background-color:rgba(21,20,16,.87)}
.studio-noir #start>.gallery-section{background-color:rgba(39,33,29,.89)}
.studio-noir #start>.contact{background-color:rgba(125,118,90,.93)}
.studio-noir #start>.hex-contact-block{background-color:rgba(202,111,170,.95)}
.studio-noir .case-slide{background-color:rgba(48,43,36,.83)}
.studio-noir .case-yourzone{background-color:rgba(40,42,34,.83)}
.studio-noir .case-raum{background-color:rgba(50,41,35,.83)}
.studio-noir .case-waldglueck{background-color:rgba(47,51,40,.83)}
.studio-noir .case-visual{background-color:rgba(40,37,31,.71)}
.studio-noir .case-zellsius .case-visual,
.studio-noir .case-digital .case-visual,
.studio-noir .case-guides .case-visual,
.studio-noir .case-ruecken .case-visual{background-color:rgba(34,37,31,.71)}
.studio-noir>.legal-footer{background-color:rgba(16,16,14,.87)}
.studio-noir .nav{background-color:rgba(16,16,14,.99)}

/* Keep decorative work off the main scrolling path. All visible choreography remains. */
.studio-noir>.brand-intro-inner{contain:layout style;transform:translateZ(0)}
.studio-noir .brand-intro-logo{object-fit:contain}
.studio-noir .motion-paused *,.studio-noir .motion-paused *::before,.studio-noir .motion-paused *::after,
.studio-noir.page-inactive *{animation-play-state:paused!important}
.studio-noir .nav{backdrop-filter:none;-webkit-backdrop-filter:none}