* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: #0b0706; }

body { font-family: 'Trebuchet MS', 'Gill Sans', Arial, sans-serif; }

.construction-page {
  --orange: #f85b29;
  min-height: 100svh;
  overflow-x: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse at 50% 105%, rgba(178, 57, 18, .5), transparent 39rem),
    radial-gradient(circle at 50% 57%, rgba(114, 35, 14, .32), transparent 28rem),
    #0b0706;
}

.page-content {
  width: min(720px, calc(100% - 48px));
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(2.2rem, 7vh, 6rem) 0 clamp(2.4rem, 6vh, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

.intro { display: flex; flex-direction: column; align-items: center; }

.brand {
  display: inline-flex;
  width: clamp(140px, 13vw, 175px);
  margin-bottom: clamp(3.5rem, 6.8vh, 5.6rem);
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1), filter 320ms ease;
}

.brand:hover, .brand:focus-visible { transform: scale(1.09); filter: drop-shadow(0 0 14px rgba(248, 91, 41, .35)); }
.brand:focus-visible, .social-link:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.brand img { display: block; width: 100%; height: auto; }

.rule { width: 132px; height: 1px; margin-bottom: clamp(2.1rem, 4vh, 3.1rem); background: rgba(248, 91, 41, .5); }
h1 { margin: 0; font-size: clamp(3.15rem, 6.7vw, 4.55rem); font-weight: 400; line-height: .97; letter-spacing: -.07em; }
h1 span, h1 strong { display: block; }
h1 strong { color: var(--orange); font-weight: 600; }
.message { margin: clamp(1.35rem, 2.7vh, 1.9rem) 0 0; font-size: clamp(1rem, 1.95vw, 1.25rem); line-height: 1.58; color: rgba(255,255,255,.94); }

.construction-art { display: block; width: min(72vw, 610px); height: auto; margin-top: clamp(2.3rem, 4.5vh, 3.6rem); }

.connect { width: min(360px, 100%); margin: clamp(1.8rem, 3.9vh, 3rem) auto 0; }
.connect-title { display: flex; align-items: center; justify-content: center; gap: 17px; }
.connect-title span { height: 1px; flex: 1; background: rgba(248, 91, 41, .52); }
.connect-title p { margin: 0; color: var(--orange); font-size: 1.08rem; font-weight: 600; white-space: nowrap; }
.social-links { display: flex; align-items: center; justify-content: center; gap: 2.65rem; margin-top: 1.55rem; }
.social-link { display: grid; place-items: center; width: 72px; height: 72px; color: var(--orange); border: 1px solid var(--orange); border-radius: 50%; transition: transform 220ms ease, background-color 220ms ease, box-shadow 220ms ease; }
.social-link:hover { transform: translateY(-4px); background: rgba(248, 91, 41, .12); box-shadow: 0 8px 20px rgba(248, 91, 41, .18); }
.social-link svg { width: 37px; height: 37px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.social-link .dot { fill: currentColor; stroke: none; }
.social-link .phone-fill { fill: currentColor; stroke: none; }
.social-divider { width: 1px; height: 55px; background: rgba(248, 91, 41, .75); }
.updates { margin: 1.15rem 0 0; font-size: 1.05rem; color: rgba(255,255,255,.92); }
.updates span { margin-left: .2rem; color: var(--orange); }

@media (min-width: 761px) and (max-height: 1200px) {
  .page-content { padding-top: 2.2rem; padding-bottom: 2rem; }
  .brand { width: 120px; margin-bottom: 1.35rem; }
  .rule { margin-bottom: 1.1rem; }
  h1 { font-size: clamp(2.95rem, 4vw, 3.45rem); }
  .message { margin-top: 1rem; }
  .construction-art { width: min(40vw, 455px); margin-top: 1.45rem; }
  .connect { margin-top: 1.3rem; }
  .social-links { margin-top: 1rem; }
  .social-link { width: 62px; height: 62px; }
  .social-link svg { width: 31px; height: 31px; }
  .updates { margin-top: .85rem; }
}

@media (max-width: 600px) {
  .page-content { width: calc(100% - 32px); padding: 2rem 0; }
  .brand { width: 108px; margin-bottom: 1.45rem; }
  .rule { margin-bottom: 1.45rem; }
  h1 { font-size: clamp(2.7rem, 11.5vw, 3.05rem); }
  .message { margin-top: 1rem; font-size: 1rem; line-height: 1.48; }
  .construction-art { width: min(72vw, 340px); margin-top: 1.55rem; }
  .connect { margin-top: 1.25rem; }
  .connect-title p { font-size: 1rem; }
  .social-links { margin-top: .9rem; }
  .social-link { width: 58px; height: 58px; }
  .social-link svg { width: 29px; height: 29px; }
  .social-divider { height: 45px; }
  .updates { margin-top: .8rem; font-size: .95rem; }
}

@media (max-width: 430px) {
  .page-content { padding-top: 1.75rem; padding-bottom: 1.75rem; }
  .brand { width: 102px; margin-bottom: 1.3rem; }
  .rule { margin-bottom: 1.25rem; }
  h1 { font-size: 2.65rem; }
  .construction-art { width: min(80vw, 320px); margin-top: 1.3rem; }
  .connect { margin-top: 1.1rem; }
  .social-links { gap: 1.75rem; }
}