:root {
  --background: #061422;
  --background-deep: #030b13;
  --text: #f5f7fa;
  --muted: #bdc7d1;
  --accent: #ffbf00;
  --accent-soft: rgba(255, 191, 0, 0.16);
  --line: rgba(255, 255, 255, 0.08);

  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--background-deep);
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 34%, rgba(18, 48, 72, 0.58), transparent 42rem),
    linear-gradient(145deg, var(--background), var(--background-deep));
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.construction-page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding:
    max(2rem, env(safe-area-inset-top))
    max(1.25rem, env(safe-area-inset-right))
    max(2rem, env(safe-area-inset-bottom))
    max(1.25rem, env(safe-area-inset-left));
}

.construction-card {
  width: min(100%, 46rem);
  display: grid;
  justify-items: center;
  gap: clamp(1.5rem, 4vh, 2.75rem);
  text-align: center;
}

.crane {
  width: clamp(10.5rem, 32vw, 15rem);
  color: var(--accent);
  filter: drop-shadow(0 0.65rem 1.8rem var(--accent-soft));
  animation: crane-in 700ms cubic-bezier(.2, .75, .25, 1) both;
}

.crane svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.crane-main {
  stroke-width: 5;
}

.crane-detail {
  stroke-width: 3.5;
  opacity: 0.9;
}

.crane-base {
  stroke-width: 5;
}

.content {
  display: grid;
  justify-items: center;
}

.eyebrow {
  margin: 0 0 0.55rem;
  color: var(--text);
  font-size: clamp(0.76rem, 1.9vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.34em;
  line-height: 1.3;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(3rem, 10vw, 6.7rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.84;
  text-transform: uppercase;
}

h1 span,
h1 strong {
  display: block;
}

h1 span {
  color: var(--text);
}

h1 strong {
  margin-top: 0.16em;
  color: var(--accent);
  font-size: 0.78em;
  font-weight: inherit;
  letter-spacing: -0.04em;
}

.accent-line {
  width: 2.35rem;
  height: 0.24rem;
  margin: clamp(1.35rem, 3.5vh, 2rem) 0;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 1rem var(--accent-soft);
}

.message {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  line-height: 1.65;
}

@keyframes crane-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-height: 700px) and (min-width: 640px) {
  .construction-page {
    padding-block: 1.25rem;
  }

  .construction-card {
    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 4rem);
    width: min(100%, 58rem);
    text-align: left;
  }

  .content {
    justify-items: start;
  }
}

@media (max-width: 430px) {
  .construction-card {
    gap: 1.25rem;
  }

  .eyebrow {
    letter-spacing: 0.27em;
  }

  h1 {
    font-size: clamp(2.7rem, 15.4vw, 4.2rem);
  }

  .message {
    max-width: 21rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crane {
    animation: none;
  }
}