@font-face { font-family: 'Open Runde'; src: url('assets/fonts/OpenRunde-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Open Runde'; src: url('assets/fonts/OpenRunde-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Open Runde'; src: url('assets/fonts/OpenRunde-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Open Runde'; src: url('assets/fonts/OpenRunde-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root { font-family: 'Open Runde', Arial, sans-serif; color: #325b74; background: #f3f7f8; color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-width: 320px; background: #f3f7f8; transition: background-color .25s ease, color .25s ease; }
.splash { position: relative; width: 100%; min-height: 100vh; overflow: hidden; background: #f3f7f8; transition: background-color .25s ease; }
.headline { position: absolute; z-index: 2; left: 5.56%; top: calc(50% - 196px); }
.headline p { margin: 0 0 20px; color: #e2583e; font-size: clamp(20px, 2.22vw, 32px); line-height: 1; text-transform: uppercase; font-weight: 500; white-space: nowrap; }
.logo { position: relative; width: min(37.48vw, 540px); aspect-ratio: 494.75 / 110; }
.logo img { position: absolute; display: block; max-width: 100%; }
.logo img:first-child { left: 0; top: 0; width: 100%; height: auto; }
.logo img:last-child { left: 55.01%; bottom: 0; width: 44.99%; height: auto; }
.photos { position: absolute; left: 55.56%; top: 16%; width: 35.56%; height: 520px; }
.photos img { position: absolute; display: block; object-fit: cover; }
.emblem { left: 0; top: 0; width: 236px; height: 315px; object-fit: fill !important; }
.woman { left: 210px; top: 45px; width: 265px; height: 283px; transform: scaleX(-1); }
.couple { left: 59px; top: 224px; width: 279px; height: 279px; object-position: bottom; transform: scaleX(-1); }
.wave { position: absolute; left: 0; top: 59.5%; width: 100%; height: 65px; }
.contacts { position: absolute; left: 5.56%; bottom: 139px; display: flex; flex-wrap: wrap; gap: 20px 32px; width: 388px; font-style: normal; }
.contacts a { display: inline-flex; align-items: center; gap: 12px; color: #325b74; font-size: 16px; line-height: 28px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.contacts img { width: 28px; height: 28px; flex: 0 0 28px; }

@media (hover: hover) {
  .photos img:not(.emblem) { cursor: pointer; transition: transform 1.25s cubic-bezier(.22, 1, .36, 1), filter 1.25s ease, box-shadow 1.25s ease; }
  .photos img:not(.emblem):hover { z-index: 3; transform: scaleX(-1) translateY(-4px) scale(1.025); filter: brightness(1.035) saturate(1.03); box-shadow: 0 10px 24px rgba(0,0,0,.14); }
  .contacts a { transition: color .2s ease; }
  .contacts a:hover { color: #e2583e; }
}

@media (min-width: 901px) {
  .headline,
  .photos,
  .contacts { transform: none; }
  .wave { top: 59.5%; }
}

/* Short laptop viewports lose browser chrome space vertically. Keep the
   composition balanced without changing the normal desktop proportions. */
@media (min-width: 901px) and (max-height: 650px) {
  .headline { top: calc(50% - 150px); }
  .photos { top: 18%; transform: scale(.78); transform-origin: top left; }
  .wave { top: 67%; }
  .contacts { bottom: 70px; }
}

@media (max-width: 900px) {
  .splash { width: min(100%, 390px); min-height: 844px; height: 100svh; max-height: 844px; margin: 0 auto; }
  .headline { left: 32px; top: 60px; width: 326px; }
  .headline p { margin-bottom: 12px; font-size: 20px; }
  .logo { width: 100%; }
  .photos { left: 32px; top: 184px; width: 326px; height: 356px; }
  .emblem { width: 162.055px; height: 216.073px; }
  .woman { left: 144.13px; top: 40.25px; width: 181.874px; height: 194.227px; }
  .couple { left: 40.49px; top: 145px; width: 191.482px; height: 191.482px; }
  .wave { top: 599px; height: 17px; }
  .contacts { left: 50%; bottom: 64px; width: max-content; transform: translateX(-50%); flex-direction: column; gap: 20px; }
}