/* Brand lockup: never let Powered By Pixels break across lines. */
.brand, .brand img, footer img { white-space:nowrap; flex-shrink:0; }

/* The logo becomes a low-contrast studio mark in the opening scene. */
.hero::before {
  content:"";
  position:absolute;
  z-index:0;
  top:115px;
  right:-7vw;
  width:min(79vw,1180px);
  height:min(28vw,405px);
  opacity:.09;
  background:url("assets/powered-by-pixels-logo.png") center / contain no-repeat;
  filter:grayscale(1) contrast(1.2);
  pointer-events:none;
}

.hero-copy { margin-left:clamp(-14px,-1.3vw,-4px); }
.hero-signal { z-index:0; }
.hero-copy { z-index:1; }

.about { position:relative; isolation:isolate; overflow:hidden; }
.about::before { content:""; position:absolute; z-index:0; inset:0; opacity:.2; background:linear-gradient(90deg,#0e1217 10%,#0e1217d9 40%,#0e12177a 70%,#0e121712),url("assets/volker-about-background.jpg") right center / min(52vw,700px) auto no-repeat; filter:saturate(.55) contrast(.95); pointer-events:none; }
.about > * { position:relative; z-index:1; }
.about > .about-content { max-width:760px; }
.about .about-copy { max-width:680px; }

.footer-links { display:flex; justify-content:flex-end; gap:22px; }
.footer-links a { text-align:right; }

@media (max-width:760px) {
  .hero { min-height:980px; }
  .hero::before { top:610px; right:-52vw; width:135vw; height:250px; opacity:.06; }
  .hero-signal { top:610px; }
  .hero-copy { margin-left:0; }
  .about::before { opacity:.15; background:linear-gradient(90deg,#0e1217 0%,#0e1217e6 44%,#0e121770 100%),url("assets/volker-about-background.jpg") right bottom / auto 86% no-repeat; }
  .footer-links { justify-content:flex-start; }
  .footer-links a { text-align:left; }
}