:root {
  --hero-blue: #075578;
  --hero-deep: #063d5b;
  --aqua: #81e2ef;
  --hero-text: #e5f4fa;
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
}

body { position: relative; }
.site-header, .site-footer { position: relative; z-index: 1; }
.site-header { background: var(--paper); }
main.container { position: relative; z-index: 1; }
.intro-blue {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
  margin-block: 1.25rem 1.8rem;
  padding: 2rem 2.3rem;
  background: var(--hero-deep);
  color: white;
  border-radius: 4px;
}
.hero-photo {
  position: absolute;
  z-index: -3;
  inset: 0 0 0 auto;
  width: 49%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  mask-image: linear-gradient(to right, transparent, #000 32%);
}
.intro-blue::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(100deg, #075578 0%, #075578 44%, rgb(7 85 120 / .93) 57%, rgb(6 61 91 / .57) 80%, rgb(6 61 91 / .45) 100%);
}
.intro-blue::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 2.3rem;
  right: 2.3rem;
  height: 1px;
  background: rgb(129 226 239 / .45);
}
.intro-blue h1 {
  font-size: clamp(3.35rem, 5.3vw, 5rem);
  line-height: 1.03;
  letter-spacing: -.02em;
  max-width: 1000px;
}
.intro-blue h1 em { color: var(--aqua); }
.intro-blue .intro-copy { max-width: 620px; margin-top: 1.05rem; justify-self: start; color: var(--hero-text); font-size: 1rem; }
.intro-blue .region { color: white; font-size: 1.35rem; margin-bottom: .2rem; }
.intro-blue .intro-copy > p:last-child { max-width: 55ch; }

.studio-image { overflow: hidden; display: block; aspect-ratio: 8 / 5; }
.studio-image .studio-photo { width: 100%; height: 100%; transform: scale(1); transition: transform 350ms var(--motion-ease); }
.action svg { transition: transform 200ms var(--motion-ease); }
.studio-link:focus-visible .studio-photo { transform: scale(1.035); }
.studio-link:focus-visible .action svg, .partner-link:focus-visible .action svg { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) {
  .studio-link:hover .studio-photo { transform: scale(1.035); }
  .studio-link:hover .action svg, .partner-link:hover .action svg { transform: translateX(3px); }
}
.studio-link:active, .partner-link:active { background-color: #d9edf6; }
.offenhausen-group .studio-link:active { background-color: #fae8ed; }


@media (max-width: 1100px) {
  .intro-blue { padding: 1.8rem; }
  .intro-blue h1 { font-size: clamp(3.2rem, 5.9vw, 4.4rem); }
}
@media (max-width: 680px) {
  .intro-blue { padding: 1.3rem 1.15rem 1.4rem; margin-block: 1rem 1.4rem; }
  .intro-blue h1 { font-size: clamp(2.6rem, 11.2vw, 3.7rem); line-height: 1.02; }
  .intro-blue h1 em { display: block; }
  .hero-photo { width: 85%; opacity: .8; }
  .intro-blue::before { background: linear-gradient(95deg, #075578 0%, rgb(7 85 120 / .96) 37%, rgb(6 61 91 / .76) 100%); }
  .intro-blue::after { left: 1.15rem; right: 1.15rem; }
  .intro-blue .intro-copy { font-size: .94rem; margin-top: .85rem; line-height: 1.45; }
  .intro-blue .region { font-size: 1.12rem; line-height: 1.3; }
  .studio-image { height: 104px; aspect-ratio: 1; }
}
@media (max-width: 360px) {
  .intro-blue { padding-inline: .9rem; }
  .intro-blue h1 { font-size: 2.6rem; }
  .intro-blue .region { font-size: 1.05rem; }
  .studio-image { height: 98px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-link .studio-photo, .studio-link .action svg, .partner-link .action svg { transform: none !important; }
}
@media print {
  .intro-blue { print-color-adjust: exact; }
}