body {
  font-family: var(--font-main), sans-serif;
  background-color: var(--color-background-main);
  color: var(--color-text-main);
}

/* Editorial URLs and long words must not widen the mobile viewport. */
.region-content {
  overflow-wrap: anywhere;
}

/* Dormant legacy notice retained in content; previously hidden by global JS. */
.notification-wrapper {
  display: none;
}

.mask {
  overflow: hidden;
}

.section {
  width: 100vw;
  display: flex;
  padding: 0px clamp(30px, 5.95vw, 90px) 0px clamp(30px, 5.95vw, 90px);
}

.h1 {
  font-size: clamp(64px, 4.75vw, 78px);
  line-height: clamp(70px, 5.75vw, 93px);
  margin-block-start: 0;
  margin-block-end: 0;
}

.h2 {
  font-size: clamp(46px, 3.7vw, 66px);
  line-height: clamp(58px, 4.5vw, 78px);
  margin-block-start: 0;
  margin-block-end: 0;
}

.h3 {
  font-size: clamp(22px, 1.85vw, 32px);
  line-height: clamp(24px, 2vw, 34px);
  margin-block-start: 0;
  margin-block-end: 0;
}

.p {
  font-size: 16px;
  line-height: 18px;
}

.button-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.button-wrapper--large {
  gap: 40px;
}

.button-wrapper--small {
  gap: 15px;
}

.button-text--large {
  font-size: 32px;
}

.button-text--small {
  font-size: 16px;
}

.button {
  background-color: transparent;
  border: 2px solid var(--color-text-main);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding-block-start: 0;
  padding-block-end: 0;
  padding-inline-start: 0;
  position: relative;
  flex-shrink: 0;
}

.button:hover {
  transition: transform 0.3s ease-in-out;
  animation: pulse 0.3s infinite alternate;
}

@keyframes pulse {
  0% {
      transform: scale(1);
  }
  100% {
      transform: scale(1.05);
  }
}

.button--large {
  width: 130px;
  height: 130px;
}

.button--small {
  width: 45px;
  height: 45px;
}

.enertef-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.enertef-arrow--large {
  width: 120px;
  height: 120px;
}

.enertef-arrow--small {
  width: 50px;
  height: 50px;
}

.content-header {
    position: relative;
    width: 100vw;
    height: 400px;
    border-bottom-left-radius: 45px;
    border-bottom-right-radius: 45px;
    overflow: hidden;
    margin-bottom: 80px;
}

.content-heading {
    position: absolute;
    top: 60%;
    left: clamp(30px, 5.95vw, 90px);
    transform: translateY(-50%);
    z-index: 1;
}

.header-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.maintenance-page img {
    width: 300px;
    position: relative;
    left: -50px;
}

.maintenance-page h1 {
    font-size: 42px;
    line-height: 46px;
}

.maintenance-page .name-and-slogan {
    display: none;
}

@media only screen and (max-width: 1024px) {
  .h1 {
    font-size: clamp(56px, 4.1vw, 64px);
    line-height: clamp(62px, 5.1vw, 79px);
  }
  .h2 {
    font-size: clamp(38px, 3.1vw, 46px);
    line-height: clamp(50px, 3.9vw, 58px);
  }
  .h3 {
    font-size: 20px;
    line-height: 24px;
  }
  .section {
    padding: 0 70px;
  }
  .button--large {
    width: 110px;
    height: 110px;
  }
  .button--small {
    width: 40px;
    height: 40px;
  }
  .enertef-arrow--large {
    width: 110px;
    height: 110px;
  }
  .enertef-arrow--small {
    width: 40px;
    height: 40px;
  }
  .button-text--large {
    font-size: 28px;
  }
}

@media only screen and (max-width: 769px) {
  .h1 {
    font-size: clamp(48px, 3.6vw, 56px);
    line-height: clamp(54px, 4.6vw, 71px);
  }
  .section {
    padding: 0 50px;
  }
  .button--large {
    width: 90px;
    height: 90px;
  }
  .button--small {
    width: 35px;
    height: 35px;
  }
  .enertef-arrow--large {
    width: 90px;
    height: 90px;
  }
  .enertef-arrow--small {
    width: 35px;
    height: 35px;
  }
  .button-text--large {
    font-size: 24px;
  }
}

@media only screen and (max-width: 480px) {
  .h1 {
    font-size: clamp(42px, 3vw, 48px);
    line-height: clamp(48px, 4vw, 63px);
  }
  .section {
    padding: 0 25px;
  }
  .button--large {
    width: 70px;
    height: 70px;
  }
  .button--small {
    width: 30px;
    height: 30px;
  }
  .enertef-arrow--large {
    width: 70px;
    height: 70px;
  }
  .enertef-arrow--small {
    width: 100%;
    height: 100%;
  }
  .button-text--large {
    font-size: 20px;
  }
}