* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  min-height: 100%;
  background: #edf2f7;
}

body {
  overflow-x: hidden;
}

.renovation-page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #edf2f7;
}

/*
  The supplied artwork is used as the exact visual.
  width: 100% keeps every curve, logo, photo, text block,
  contact card and spacing identical to the reference image.
*/
.renovation-art {
  display: block;
  width: 100%;
  max-width: 1536px;
  height: auto;
  object-fit: contain;
}

/* Small loading animation while the artwork loads */
.loading-layer {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #edf2f7;
  z-index: 20;
  animation: hideLoader 0.45s ease 0.7s forwards;
  pointer-events: none;
}

.loader {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(20, 78, 119, 0.15);
  border-top-color: #1688c9;
  border-right-color: #248e49;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes hideLoader {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@media (max-width: 600px) {
  .renovation-page {
    min-height: auto;
  }

  .renovation-art {
    width: 100%;
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-layer,
  .loader {
    animation: none;
  }

  .loading-layer {
    display: none;
  }
}