/* ---------- Custom Font ---------- */

@font-face {
  font-family: "NimbusSan";
  src: url("fonts/NimbusSan-Bol.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

html, body {
  height: 100%;
}

body {
  font-family: "NimbusSan", sans-serif;
  background: #FFF;
  color: #000;
  overflow: hidden;
}

/* ---------- Layout ---------- */

.page {
  position: relative;
  min-height: 100dvh;
  padding: 2rem;
}

.box {
  position: absolute;
}

/* --- Top Box --- */
.top-box {
  top: 2rem;
  left: 2rem;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  max-width: 100vw;
}

/* --- Bottom Box --- */
.bottom-box {
  bottom: 2rem;
  left: 2rem;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  max-width: 100vw;
}

/* --- Middle Wrapper --- */
.middle-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/* Contact Box */
.contact-box {
  position: absolute;
  top: 50%;
  left: 2rem;
  transform: translateY(-50%);
}

.contact {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}

.contact:hover {
  transform: translateX(8px);
}

/* Image Box constrained between top & bottom */
.image-box {
  position: absolute;
  top: clamp(0px, 20vh, 200px);
  bottom: clamp(0px, 22vh, 220px);
  right: -20%;
  width: 70vw;
  max-width: 500px;
  overflow: hidden;
}

.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Desktop --- */
@media (min-width: 1024px) {

  .top-box,
  .bottom-box {
    max-width: 50vw;
  }

  .image-box {
    right: 6rem;
    width: 75vw;
    top: clamp(0px, 20vh, 200px);
    bottom: clamp(0px, 22vh, 220px);
    max-width: none;
  }

}