:root {
  --blue: #0050aa;
  --blue-dark: #063f91;
  --blue-light: #eaf3ff;

  --green: #92b212;
  --green-dark: #92b212;

  --text: #202936;
  --white: #ffffff;

  --page-width: 1100px;
}


/* ------------------------------------------------
   Reset
------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;

  font-family: "Roboto", Arial, Helvetica, sans-serif;

  color: var(--text);
  background: var(--white);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: var(--blue-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
  color: var(--green-dark);
}


/* ------------------------------------------------
   Page
------------------------------------------------ */

.construction-page {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 80svh;

  padding: 60px 24px;

  overflow: hidden;
}


/* ------------------------------------------------
   Content
------------------------------------------------ */

.construction-content {
  position: relative;
  z-index: 2;

  width: min(100%, var(--page-width));

  text-align: center;
}


/* ------------------------------------------------
   Logo
------------------------------------------------ */

.brand {
  display: flex;
  justify-content: center;

  margin-bottom: 55px;
}

.brand__logo {
  width: min(100%, 650px);
  height: auto;
}


/* ------------------------------------------------
   Intro
------------------------------------------------ */

.intro {
  max-width: 760px;

  margin: 0 auto 42px;
}

.intro h1 {
  margin: 0 0 24px;

  color: var(--blue-dark);

  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
}

.intro p {
  margin: 0;

  font-size: clamp(1.1rem, 2vw, 1.55rem);
  font-weight: 400;
  line-height: 1.55;
}


/* ------------------------------------------------
   Contact card
------------------------------------------------ */

.contact-card {
  position: relative;

  width: min(100%, 720px);

  margin: 0 auto;
  padding: 38px 45px 38px 55px;

  text-align: left;
  font-style: normal;

  background: rgba(255, 255, 255, 0.96);

  border-radius: 22px;

  box-shadow:
    0 16px 45px rgba(0, 50, 110, 0.12);
}

.contact-card__accent {
  position: absolute;

  top: 38px;
  bottom: 38px;
  left: 38px;

  width: 3px;

  background: var(--green);
}

.contact-card__content {
  padding-left: 35px;
}

.contact-card h2 {
  margin: 0 0 24px;

  color: var(--blue-dark);

  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
}


/* ------------------------------------------------
   Contact items
------------------------------------------------ */

.contact-item {
  display: grid;

  grid-template-columns: 64px 1fr;

  align-items: center;

  gap: 18px;

  margin-top: 18px;
}

.contact-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 60px;
  height: 60px;

  color: var(--blue-dark);

  background: var(--blue-light);

  border-radius: 50%;
}

.contact-item__text {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  font-size: 1.25rem;
  line-height: 1.5;
}

.contact-item__text span {
  font-weight: 500;
}

.contact-item__text a {
  font-weight: 500;
  text-decoration: none;
}


/* ------------------------------------------------
   Decorative background
------------------------------------------------ */

.background-line {
  position: absolute;

  z-index: 0;

  pointer-events: none;
}

.background-line--left {
  width: 850px;
  height: 850px;

  left: -500px;
  bottom: -520px;

  border: 2px solid rgba(0, 80, 164, 0.12);

  border-radius: 50%;
}

.background-line--right {
  width: 900px;
  height: 450px;

  right: -560px;
  top: 48%;

  border-top: 4px solid var(--green);

  border-radius: 50%;
}


/* ------------------------------------------------
   Focus
------------------------------------------------ */

a:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 4px;
  border-radius: 3px;
}


/* ------------------------------------------------
Footer
------------------------------------------------ */
.site-footer {
  margin-top: 3rem;
  padding: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
}

.site-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer a:hover,
.site-footer a:focus {
  text-decoration-thickness: 2px;
}
/* ------------------------------------------------
   Responsive
------------------------------------------------ */

@media (max-width: 700px) {

  .construction-page {
    align-items: flex-start;

    padding:
      38px
      18px
      50px;
  }

  .brand {
    margin-bottom: 42px;
  }

  .brand__logo {
    width: min(100%, 450px);
  }

  .intro {
    margin-bottom: 34px;
  }

  .intro h1 {
    margin-bottom: 18px;
  }

  .contact-card {
    padding:
      30px
      24px
      30px
      32px;

    border-radius: 18px;
  }

  .contact-card__accent {
    top: 30px;
    bottom: 30px;
    left: 22px;
  }

  .contact-card__content {
    padding-left: 20px;
  }

  .contact-item {
    grid-template-columns: 48px 1fr;

    gap: 14px;
  }

  .contact-item__icon {
    width: 46px;
    height: 46px;
  }

  .contact-item__icon svg {
    width: 22px;
    height: 22px;
  }

  .contact-item__text {
    display: block;

    font-size: 1.05rem;
  }

  .contact-item__text span {
    display: block;

    margin-bottom: 2px;
  }

  .contact-item__text a {
    overflow-wrap: anywhere;
  }

}


@media (max-width: 420px) {

  .construction-page {
    padding-left: 14px;
    padding-right: 14px;
  }

  .contact-card {
    padding-right: 18px;
    padding-left: 25px;
  }

  .contact-card__accent {
    left: 17px;
  }

  .contact-card__content {
    padding-left: 15px;
  }

  .contact-item {
    grid-template-columns: 42px 1fr;
  }

  .contact-item__icon {
    width: 40px;
    height: 40px;
  }

}


/* ------------------------------------------------
   Reduced motion
------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

}