/* Figma 2576:56: original 1280 × 832 composition. */
body:not(.hero-win95-active) .hero-collage {
  display: grid;
  height: 100svh;
  min-height: 620px;
  padding: 0;
  background: #fff4e2;
  overflow: hidden;
  align-content: stretch;
}
.collage-canvas {
  --edge: clamp(24px, 3.125vw, 48px);
  position: relative;
  width: 100%;
  height: 100%;
  container-type: inline-size;
  font-family: Inter, Arial, sans-serif;
  color: #000;
}
.collage-intro { position: absolute; left: var(--edge); top: var(--edge); width: 44%; z-index: 2; }
.collage-intro h1 { display: flex; align-items: center; gap: 1.4cqw; margin: 0; font-size: 5cqw; font-weight: 500; line-height: 1.2; letter-spacing: -.035em; text-transform: none; white-space: nowrap; }
.collage-intro p { margin: .15cqw 0 0; font-size: 2.34375cqw; line-height: 1.067; font-weight: 400; letter-spacing: 0; }
.collage-avatar { position: relative; flex: 0 0 4.53125cqw; height: 4.53125cqw; overflow: hidden; }
.collage-avatar img { position: absolute; width: 151.72%; height: 151.72%; max-width: none; left: -25.86%; top: -25.86%; }
.collage-piece {
  --parallax-x: 0px;
  --parallax-y: 0px;
  position: absolute;
  overflow: hidden;
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0);
  transform-origin: 50% 65%;
  will-change: transform;
}
.collage-piece img { display: block; width: 100%; height: 100%; object-fit: cover; }
.collage-fireplace { left: 9.53125%; top: 33.413%; width: 15.625%; aspect-ratio: 200 / 269; --delay: 180ms; --tilt: -4deg; }
.collage-laptop { left: 20.15625%; top: 55.168%; width: 29.568%; aspect-ratio: 378 / 277; --delay: 320ms; --tilt: 3deg; }
.collage-laptop img { position: absolute; width: 142.51%; height: 130.59%; left: -23.54%; top: -10.46%; max-width: none; }
.collage-ljus { left: 67.8125%; top: 4.808%; width: 29.21875%; aspect-ratio: 374 / 318; --delay: 100ms; --tilt: 3deg; }
.collage-forest { left: 61.09375%; top: 32.212%; width: 25.9375%; aspect-ratio: 332 / 288; --delay: 260ms; --tilt: -3deg; }
.collage-board { left: 30.2344%; top: 33.894%; width: 16.259%; aspect-ratio: 208 / 139; --delay: 230ms; --tilt: 4deg; }
.collage-bricks { left: 3.125%; top: 69.591%; width: 20.78125%; aspect-ratio: 266 / 213; --delay: 400ms; --tilt: -3deg; }
.collage-billboard { left: 49.453%; top: 9.341%; width: 17.217%; aspect-ratio: 220 / 203; --delay: 160ms; --tilt: -4deg; }
.collage-frips { left: 47.109%; top: 45.673%; width: 15.687%; aspect-ratio: 1; --delay: 430ms; --tilt: 4deg; }
.collage-snack { left: 58.984%; top: 61.418%; width: 7.628%; aspect-ratio: 98 / 122; --delay: 580ms; --tilt: -6deg; }
.collage-monogram { left: 44.531%; top: 40.264%; width: 8.09%; aspect-ratio: 1; --delay: 500ms; --tilt: -5deg; }
.collage-contacts { position: absolute; right: var(--edge); bottom: var(--edge); display: flex; flex-direction: column; font-size: 1.875cqw; line-height: 1.067; font-style: normal; text-align: right; }
.collage-contacts a:hover { text-decoration: underline; text-underline-offset: .15em; }
.hero-collage.is-active .collage-piece { animation: collage-arrive 1000ms cubic-bezier(.16, 1, .3, 1) var(--delay) both; }
@keyframes collage-arrive {
  from { opacity: 0; transform: translate3d(var(--parallax-x), calc(var(--parallax-y) + 48px), 0) scale(.92) rotate(var(--tilt, 0deg)); }
  to { opacity: 1; transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(1) rotate(0); }
}
/* Keep the existing language and time-travel controls above the composition. */
body:not(.hero-win95-active) .nav { grid-template-columns: 1fr auto; padding: 10px 3.125%; gap: 12px; }
body:not(.hero-win95-active) .nav-links { visibility: hidden; }
body:not(.hero-win95-active) .nav-lang-switch { border: 0; color: #000; }
body:not(.hero-win95-active) .nav-lang-switch button {
  display: none;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #000;
  font-family: Inter, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
body:not(.hero-win95-active) .nav-lang-switch button:not(.is-active) { display: block; }
@media (min-width: 681px) and (max-aspect-ratio: 6 / 5) {
  .collage-intro { width: 66%; }
  .collage-intro h1 { font-size: clamp(44px, 5.8cqw, 64px); }
  .collage-intro p { max-width: 560px; font-size: clamp(22px, 2.8cqw, 31px); }
  .collage-billboard { left: 49%; top: 18%; width: 21%; }
  .collage-ljus { left: 69%; top: 14%; width: 28%; }
  .collage-fireplace { left: 5%; top: 31%; width: 20%; }
  .collage-board { left: 25%; top: 32%; width: 22%; }
  .collage-monogram { left: 44%; top: 36%; width: 11%; }
  .collage-forest { left: 61%; top: 35%; width: 30%; }
  .collage-laptop { left: 20%; top: 46%; width: 36%; }
  .collage-frips { left: 50%; top: 42%; width: 20%; }
  .collage-snack { left: 59%; top: 59%; width: 10%; }
  .collage-bricks { left: 4%; top: 64%; width: 25%; }
  .collage-contacts { font-size: clamp(19px, 2.2cqw, 25px); }
}
@media (max-width: 680px) {
  body:not(.hero-win95-active) .hero-collage { height: auto; min-height: 100svh; padding-top: 52px; }
  .collage-canvas { --edge: 22px; height: max(760px, calc(100svh - 52px)); }
  .collage-intro { top: 1%; width: 88%; }
  .collage-intro h1 { font-size: 9.5cqw; gap: 3cqw; }
  .collage-intro p { margin-top: 2cqw; max-width: 85cqw; font-size: 5.1cqw; line-height: 1.15; }
  .collage-avatar { flex-basis: 9cqw; height: 9cqw; }
  .collage-ljus { left: 55%; top: 22%; width: 40%; height: 17.8%; }
  .collage-billboard { left: 31%; top: 20%; width: 29%; height: 13.7%; }
  .collage-fireplace { left: 5%; top: 30%; width: 28%; height: 19.3%; }
  .collage-board { left: 33%; top: 37%; width: 28%; height: 9.6%; }
  .collage-forest { left: 58%; top: 38%; width: 37%; height: 16.5%; }
  .collage-laptop { left: 20%; top: 51%; width: 49%; height: 18.5%; }
  .collage-bricks { left: 5%; top: 65%; width: 36%; height: 14.8%; }
  .collage-frips { left: 57%; top: 55%; width: 29%; height: 14.9%; }
  .collage-monogram { left: 48%; top: 47%; width: 17%; height: 8.7%; }
  .collage-snack { left: 76%; top: 67%; width: 17%; height: 10.9%; }
  .collage-contacts { bottom: 3%; font-size: 4.3cqw; line-height: 1.3; }
  body:not(.hero-win95-active) .nav { padding: 12px 6%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-collage.is-active .collage-piece { animation: none; }
}