/* id. By ADinB — Innovation Driven Events */

:root {
  --cream: #F9F9F2;
  --yellow: #D8D323;
  --ink: #1E1E1E;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
}

body.contact { background: var(--yellow); }

a { color: inherit; text-decoration: none; }

img { display: block; }

/* ============ scaled stage ============ */

.stage {
  position: relative;
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  aspect-ratio: 1080 / 904;
  container-type: inline-size;
  overflow: hidden;
}

.abs { position: absolute; }

/* ============ header ============ */

.nav-link {
  left: 7%;
  top: 8.2%;
  font-size: 1.35cqw;
  font-weight: 500;
  letter-spacing: 0.06em;
  z-index: 10;
}

.nav-link:hover { opacity: 0.6; }

.back-link { display: inline-flex; align-items: center; }
.back-link .back-arrow { font-size: 1.35em; line-height: 1; }

.logo {
  display: block;
  right: 5%;
  top: 5.4%;
  width: 16.6%;
  z-index: 10;
}

/* ============ HOME ============ */

.home-headline {
  font-size: 7.05cqw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.015em;
  white-space: nowrap;
  z-index: 3;
}

.headline-arrow {
  display: inline-block;
  width: 0.52em;
  height: 0.78em;
  margin-left: 0.28em;
  vertical-align: baseline;
}

.hl-1 { left: 45.6%; top: 21.4%; }
.hl-2 { left: 34.9%; top: 29.2%; }
.hl-3 { left: 14.4%; top: 37.4%; }
.hl-4 { left: 14.4%; top: 45.6%; }

.home-circle {
  left: 28.6%;
  top: 35.8%;
  width: 38.6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--yellow);
  z-index: 1;
}

.il-juggler { left: 6.2%; top: 13.2%; width: 24.6%; z-index: 2; }
.il-arrows  { left: 45.2%; top: 47.6%; width: 8.6%;  z-index: 3; }
.il-machine { right: 1.4%; top: 53.2%; width: 49.2%; z-index: 2; }
.il-toolbox { left: 17.6%; top: 75.8%; width: 14.3%; z-index: 2; }
.il-ground  { left: 9%; bottom: 4.6%; width: 89.5%; z-index: 0; }

.il-juggler img, .il-arrows img, .il-machine img, .il-toolbox img, .il-ground img, .logo img {
  width: 100%;
  height: auto;
}

/* ============ CONTACT ============ */

.contact-h1 {
  font-family: 'Cormorant', Georgia, serif;
  font-weight: 300;
  font-size: 6.9cqw;
  line-height: 1;
  letter-spacing: 0.01em;
  left: 2.9%;
  top: 16.4%;
  white-space: nowrap;
  transform: scaleX(0.82);
  transform-origin: left top;
  z-index: 2;
}

.contact-h2 {
  font-size: 6.4cqw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.015em;
  left: 2.9%;
  top: 27.3%;
  white-space: nowrap;
  z-index: 2;
}

.il-dots { right: 7.6%; top: 35.9%; width: 9.6%; z-index: 1; }
.il-dots img { width: 100%; height: auto; }

.contact-kicker {
  left: 6.4%;
  top: 51.3%;
  font-size: 1.55cqw;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.contact-info {
  left: 6.4%;
  top: 58.8%;
  display: flex;
  flex-direction: column;
  gap: 2.3cqw;
  font-size: 1.62cqw;
  line-height: 1.42;
}

.info-row {
  display: flex;
  align-items: flex-start;
  gap: 3.4cqw;
}

.info-row .ico {
  width: 2.6cqw;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}

.info-row .ico img { width: 100%; height: auto; }
.info-row.i-mail .ico img  { width: 2.6cqw; margin-top: 0.45cqw; }
.info-row.i-pin .ico img   { width: 1.85cqw; }
.info-row.i-phone .ico img { width: 2.35cqw; }

/* form */

.contact-form {
  left: 58.3%;
  top: 59.3%;
  width: 33.2%;
  z-index: 2;
}

.field {
  display: flex;
  align-items: baseline;
  gap: 0.5cqw;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.55cqw;
  margin-bottom: 3.1cqw;
}

.field label {
  font-size: 1.25cqw;
  white-space: nowrap;
}

.field label::after { content: '\00a0|'; }

.field input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 1.25cqw;
  color: var(--ink);
}

.send-btn {
  position: absolute;
  right: 5.4%;
  top: 82.7%;
  background: transparent;
  border: 0.14cqw solid var(--ink);
  border-radius: 100cqw;
  padding: 1.6cqw 4.6cqw;
  font-family: inherit;
  font-size: 1.45cqw;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.send-btn:hover { background: var(--ink); color: var(--yellow); }
.send-btn:disabled { opacity: 0.55; cursor: default; }

.form-status {
  position: absolute;
  right: 5.4%;
  top: 91.5%;
  font-size: 1.3cqw;
  font-weight: 500;
  text-align: right;
}

/* ============ mobile ============ */

@media (max-width: 720px) {
  .stage {
    aspect-ratio: auto;
    min-height: 100svh;
    overflow: hidden;
    padding: 24px 20px 40px;
  }

  main.stage .abs { position: static; }

  main.stage .nav-link {
    position: absolute;
    left: 20px;
    top: 32px;
    font-size: 13px;
  }

  main.stage .logo {
    position: absolute;
    left: auto;
    right: 20px;
    top: 20px;
    width: 150px;
  }

  /* home */
  .home .home-circle { display: none; }
  .home .home-headline {
    display: block;
    font-size: 13vw;
    white-space: normal;
    margin-top: 4px;
  }
  .home .headline-arrow { width: 0.5em; height: 0.72em; }
  .home .il-juggler { width: 64%; margin: 96px 0 22px; }
  .home main.stage .il-arrows {
    position: relative;
    left: 0; top: 0; right: auto; bottom: auto;
    z-index: 1;
    width: 27%;
    margin: 20px 0 10px;
  }
  .home main.stage .il-machine {
    position: relative;
    left: 0; top: 0; right: auto; bottom: auto;
    width: 100%;
    margin-top: 14px;
    z-index: 0;
  }
  .home .il-machine::before {
    content: '';
    position: absolute;
    width: 96%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--yellow);
    left: -30%;
    top: -14%;
    z-index: -1;
  }
  .home .il-toolbox { width: 46%; margin-top: 22px; }
  .home .il-ground { width: 100%; margin-top: 14px; }

  /* contact */
  .contact .stage { padding-bottom: 60px; }
  .contact .contact-h1 {
    font-size: 11.4vw;
    white-space: normal;
    margin-top: 110px;
    transform: scaleX(0.88);
  }
  .contact .contact-h2 {
    font-size: 10.2vw;
    white-space: normal;
    margin-top: 10px;
  }
  .contact .il-dots {
    width: 30%;
    margin: 28px 0 32px auto;
  }
  .contact .contact-kicker { font-size: 15px; margin-bottom: 26px; }
  .contact .contact-info { font-size: 16px; gap: 26px; margin-bottom: 48px; }
  .contact .info-row { gap: 22px; }
  .contact .info-row .ico { width: 26px; }
  .contact .info-row.i-mail .ico img  { width: 26px; margin-top: 4px; }
  .contact .info-row.i-pin .ico img   { width: 19px; }
  .contact .info-row.i-phone .ico img { width: 24px; }
  .contact .contact-form { width: 100%; }
  .contact .field { padding-bottom: 7px; margin-bottom: 30px; }
  .contact .field label, .contact .field input { font-size: 15px; }
  .contact .send-btn {
    position: static;
    display: block;
    margin-left: auto;
    border-width: 1.5px;
    border-radius: 999px;
    padding: 16px 44px;
    font-size: 14px;
  }
  .contact .form-status { position: static; font-size: 14px; margin-top: 16px; text-align: right; }
}