/* Personalization layered over the reference motion study. */
.brand { width: 19em; }
.brand svg { overflow: visible; }
.hero:has(.personal-portrait),
.hero-bg-wrap:has(.personal-portrait) { background-color: #dadada; }
.personal-portrait { object-fit: contain; object-position: center bottom; }
@media (min-width: 768px) {
  .personal-portrait {
    transform: translateY(-18%) scale(.55);
    transform-origin: center bottom;
  }
}
.language-transition .transition__signature { display: none !important; }
.about,
.services-header__w,
.services,
.portfolio,
.contact,
.footer-wrap,
.footer {
  background-color: var(--light-silver);
  color: var(--ink-black);
}
.service-row {
  border-color: var(--ink-black);
}
.service-row,
.service-visual {
  background-color: var(--light-silver);
  color: var(--ink-black);
}
.scroll-draw-transition__shape {
  color: var(--light-silver);
}
[data-contact-word] {
  color: rgba(8, 9, 18, .38) !important;
}
.footer-bracket {
  border-color: var(--ink-black);
}
.footer-copy {
  background-color: #d3d2d2;
  color: var(--ink-black);
  border-top: 1px solid rgba(8, 9, 18, .2);
}
.footer .txt-color-astronaut {
  color: #cbcaca;
}
html[lang="de"] .about-header__h { overflow-wrap: anywhere; }
html[lang="de"] .services-item__title { overflow-wrap: anywhere; }
.brand:focus-visible, a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
dialog { border: 0; border-radius: 8px; padding: 48px; width: min(520px, calc(100vw - 40px)); background: #e2e1e1; color: #080912; }
dialog::backdrop { background: #080912aa; backdrop-filter: blur(8px); }
dialog h2 { font-size: clamp(28px, 5vw, 44px); margin: 25px 0 20px; }
.dialog-label { color: #2a4093; }
.dialog-close { position: absolute; right: 22px; top: 12px; font: 32px Arial, sans-serif; }
.dialog-done { margin-top: 32px; padding: 12px 20px; border-radius: 30px; background: #2a4093; color: white; }
@media(max-width: 767px) {
  .brand { width: 13em; }
}
@media(max-width: 479px) { .brand { width: 11em; } dialog { padding: 36px 24px; } }
@media(prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }