:root {
  color-scheme: light;
  --navy: #071b34;
  --red: #ed202b;
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  background: var(--navy);
  color: #fff;
}

*, *::before, *::after { box-sizing: border-box; }
body { min-height: 100svh; display: flex; flex-direction: column; margin: 0; }
a { color: inherit; text-decoration: none; }
::selection { color: #fff; background: #be1822; }
a:focus-visible { outline: 3px solid var(--red); outline-offset: 5px; }
.header-inner, .construction-inner, .footer-inner { width: min(100% - 128px, 1440px); margin-inline: auto; }

.site-header { position: relative; z-index: 2; background: #fff; }
.header-inner { min-height: 132px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { display: block; width: 224px; height: 132px; object-fit: contain; }
.header-note { display: flex; align-items: center; gap: 12px; margin: 0; color: #344258; font-size: 18px; font-weight: 500; }
.header-note > span { width: 8px; height: 8px; background: var(--red); border-radius: 50%; }

.construction { position: relative; display: flex; align-items: center; flex: 1; min-height: 580px; overflow: hidden; isolation: isolate; }
.architecture {
  position: absolute;
  z-index: -2;
  inset: 0 0 0 31%;
  background: url("assets/architecture.jpg") center 62% / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 28%);
}
.construction::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, #071b34 5%, #071b34fa 28%, #071b34d9 49%, #071b346b 77%, #071b3445 100%);
}
.construction::after {
  position: absolute;
  inset: auto 0 0;
  height: 140px;
  z-index: -1;
  content: "";
  background: linear-gradient(transparent, #071b3499);
}
.construction-inner { padding-block: 65px 72px; }
.content { max-width: 990px; }
.company-name { display: flex; align-items: center; gap: 15px; margin: 0 0 30px; color: #c8d3e0; font-size: 17px; font-weight: 600; letter-spacing: 3.2px; }
.company-name > span { width: 34px; height: 2px; background: var(--red); }
h1 { margin: 0; color: #fff; font-size: clamp(62px, 8.2vw, 120px); font-weight: 800; line-height: 1.05; letter-spacing: -4.5px; }
h1 > span { display: block; }
.title-period { color: var(--red); }
.red-line { width: 72px; height: 5px; margin-block: 34px 28px; background: var(--red); }
.description { margin: 0; color: #e2e8ef; font-size: 23px; line-height: 1.65; font-weight: 400; }
.description strong { font-weight: 600; color: #fff; }
.thank-you { margin: 23px 0 0; color: #b7c5d5; font-size: 17px; line-height: 1.6; }

.site-footer { background: #06172d; border-top: 1px solid #ffffff14; }
.footer-inner { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-footer p { margin: 0; color: #b9c4d2; font-size: 14px; line-height: 1.6; }
.site-footer .footer-status { display: flex; align-items: center; gap: 10px; color: #e3e8ef; font-size: 15px; }
.footer-status > span { width: 7px; height: 7px; background: var(--red); border-radius: 50%; }

@media (min-width: 1800px) {
  .construction-inner { padding-block: 90px; }
  h1 { font-size: 132px; }
}

@media (max-width: 1100px) {
  .header-inner, .construction-inner, .footer-inner { width: calc(100% - 80px); }
  h1 { font-size: 8.7vw; letter-spacing: -3px; }
  .architecture { left: 22%; }
  .construction::before { background: linear-gradient(90deg, #071b34fa 5%, #071b34e8 36%, #071b3499 75%, #071b346b); }
}

@media (max-width: 650px) {
  .header-inner, .construction-inner, .footer-inner { width: calc(100% - 40px); }
  .header-inner { min-height: 112px; justify-content: center; }
  .brand img { width: 192px; height: 112px; }
  .header-note { display: none; }
  .construction { min-height: 550px; }
  .construction-inner { padding-block: 62px 65px; }
  .architecture { left: 0; background-position: 55% 60%; mask-image: none; }
  .construction::before { background: linear-gradient(90deg, #071b34ed, #071b34cf 55%, #071b34b3); }
  .company-name { margin-bottom: 27px; font-size: 15px; letter-spacing: 2.4px; }
  h1 { font-size: clamp(35px, 11vw, 68px); letter-spacing: -1.6px; line-height: 1.16; }
  .red-line { width: 56px; height: 4px; margin-block: 28px 25px; }
  .description { font-size: 19px; line-height: 1.7; }
  .thank-you { font-size: 16px; margin-top: 22px; }
  .footer-inner { min-height: 110px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding-block: 20px; }
  .site-footer p { font-size: 13px; }
  .site-footer .footer-status { font-size: 14px; }
}

@media (max-width: 360px) {
  h1 { font-size: 11vw; letter-spacing: -1px; }
  .description { font-size: 18px; }
  .thank-you { font-size: 15px; }
  .site-footer p { font-size: 12px; }
}