:root {
  --fg-color: #222;
  --bg-color: #fff;
  --em-color: #3783C1;
  --sd-color: #aaa;

  --page-width: 1050px;
  --content-width: calc(var(--page-width) - 20rem - 48px);

  @media (max-width: 1100px) {
    --content-width: calc(var(--page-width) - 17rem - 48px);
  }

  @media (max-width: 1050px) {
    --content-width: calc(100vw - 17rem - 48px);
  }

  @media (max-width: 800px) {
    --content-width: calc(100vw - 13.5rem - 48px);
  }

  @media (max-width: 640px) {
    --content-width: calc(100vw - 48px);
  }


  @media (prefers-color-scheme: dark) {
    --fg-color: #eee;
    --bg-color: #1b1b1b;
    --em-color: #6bb8f7;
    --sd-color: #000;
  }

  font-size: 16px;
  color: var(--fg-color);
  background-color: var(--bg-color);
  line-height: 1.5;

  @media (max-width: 640px) {
    font-size: 100%;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes scroll {
  from {
    transform: translateX(2rem);
  }

  to {
    transform: translateX(-100%);
  }
}

body {
  margin: 0;
  min-height: 100dvh;
}

a {
  text-decoration: none;
  color: var(--em-color);

  &:has(h2) {
    color: var(--fg-color);
  }

  &:hover,
  &:active,
  &:focus {
    text-decoration: underline;
  }
}

.default {
  color: var(--fg-color);
  text-decoration: none;
}

.page-wrapper {
  margin: 0 auto;
  padding: 24px;
  max-width: var(--page-width);
  box-sizing: border-box;
  min-height: calc(100dvh - 22.5rem);

  @media (max-width: 640px) {
    width: 100%;
    min-height: calc(100dvh - 27rem);
  }
}

.header-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
  min-height: 11rem;

  @media (max-width: 640px) {
    flex-direction: column;
    width: 100%;
    gap: 1rem;
  }

  .menu {
    border: none;
    background-color: var(--bg-color);
    height: 2rem;
    display: none;
    text-align: right;

    svg {
      height: 100%;
      stroke: var(--em-color);
      stroke-width: 4px;
    }

    @media (max-width: 640px) {
      display: block;
    }
  }

  .logo-container {
    width: 15rem;
    flex-shrink: 0;
    opacity: 0;
    animation: 70ms ease-in 10ms normal forwards fade-in;
    container-type: inline-size;

    @media (max-width: 1100px) {
      width: 14rem;
    }

    @media (max-width: 800px) {
      width: 12rem;
    }

    @media (max-width: 640px) {
      display: inline-flex;
      width: 100% !important;
    }

    .logo {
      display: flex;
      flex-direction: column;
      font-family: "Bookman Old Style", Georgia, serif;
      line-height: 1.22;
      position: fixed;
      top: 24px;

      @media (max-width: 640px) {
        position: static;
      }

      .name {
        font-size: 1em;
        font-weight: normal;
        border-bottom: 0.05em solid var(--em-color);
        margin: 0;
      }

      .tagline {
        padding-top: 0.4em;
        font-size: 0.62em;
      }
    }
  }

  .banner-container {
    flex-shrink: 1;
    height: 11rem;
    overflow: hidden;

    .banner {
      aspect-ratio: 554 / 176;
      height: 100%;
      object-fit: cover;
      object-position: 50% 30%;
    }
  }
}

.content-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 5rem;
  line-height: 1.5;
  font-family: Verdana, Arial, Helvetica, sans-serif;

  @media (max-width: 1100px) {
    gap: 3rem;
  }

  @media (max-width: 800px) {
    gap: 1.5rem;
  }

  .nav-container {
    min-width: 15rem;
    flex-grow: 1;
    font-size: 1rem;
    margin-top: 2.6rem;

    @media (max-width: 1100px) {
      min-width: 14rem;
    }

    @media (max-width: 800px) {
      min-width: 12rem;
    }

    @media (max-width: 640px) {
      display: none;
      font-size: 1.1rem;

      &.show {
        display: block;
        position: fixed;
        width: 100vw;
        height: 100dvh;
        background-color: var(--bg-color);
        z-index: 2;
        box-sizing: border-box;
        top: 0;
        left: 0;
        margin: 0;
        padding: 24px;
      }
    }

    .nav {
      position: sticky;
      top: 7.5rem;

      .close {
        display: none;
        border: none;
        background-color: var(--bg-color);
        height: 2rem;
        display: none;
        text-align: right;
        width: 100%;
        margin-bottom: 2rem;

        svg {
          height: 100%;
          stroke: var(--em-color);
          stroke-width: 4px;
        }

        @media (max-width: 640px) {
          display: block
        }
      }

      >ul {
        margin: 0;
        padding: 0;

        >li {
          border-bottom: 1px solid var(--em-color);
          box-sizing: border-box;

          summary {
            list-style: none;
            position: relative;

            &::-webkit-details-marker {
              display: none;
            }

            @media (max-width: 640px) {
              &::after {
                content: "+";
                position: absolute;
                right: 1rem;
              }

              [open] &::after {
                content: "–";
              }
            }
          }
        }
      }

      li {
        list-style-type: none;
        margin-bottom: 0.25em;
        padding-bottom: calc(0.25em - 1px);
      }

      details[open] summary {
        margin-bottom: 0.5em;
      }

      a {
        color: var(--fg-color);
        text-decoration: none;

        &.active {
          color: var(--em-color);
        }

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  .main {
    flex-shrink: 1;
    line-height: 1.5;
    flex-grow: 1;

    h1,
    h2 {
      font-size: 1.8em;
      font-weight: normal;
      font-family: "Bookman Old Style", Georgia, serif;
      margin: 3rem 0 1.5rem;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: -1rem;
        width: 6.3rem;
        height: 2px;
        background-color: var(--em-color);
      }

      &.subheading {
        font-size: 1.4em;
        margin: 3rem 0 1.2rem;

        &::before {
          top: -0.8rem;
          width: 4.5rem;
        }
      }
    }

    img {
      width: 100%;
    }

    section>img {
      aspect-ratio: 886 / 463;
      object-fit: cover;
    }

    li {
      list-style-type: square;

      &::marker {
        color: var(--em-color);
      }
    }

    .button {
      padding: 0.5rem 0;
      display: block;
      width: 9rem;
      text-align: center;
      text-decoration: none;
      color: var(--fg-color);
      border: 2px solid var(--em-color);

      &:hover {
        text-decoration: underline;
      }

      @media (max-width: 640px) {
        width: 55%;

        &:hover {
          text-decoration: none;
        }
      }
    }

    p:has(.customer-name) {
      margin-top: -0.75rem;
    }

    .customer-name {
      text-align: right;
      width: 100%;
      display: inline-block;
      padding-bottom: 1rem;
      border-bottom: 2px solid var(--em-color);
      margin-bottom: 0.5rem;
    }

    .offers {
      display: flex;
      justify-content: space-between;
      gap: 1.5rem;

      @media (max-width: 800px) {
        flex-direction: column;
      }

      a {
        color: var(--bg-color);
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }

      >div {
        color: var(--bg-color);
        background-color: var(--em-color);
        flex: 1;
        padding: 1.5rem 0.75rem;
        box-sizing: border-box;
        height: 16rem;
        box-shadow: 0px 3px 6px var(--sd-color);
        display: flex;
        flex-direction: column;
        position: relative;

        @media (prefers-color-scheme: dark) {
          &::after {
            position: absolute;
            left: 0;
            top: 0;
            content: "";
            width: 100%;
            height: 100%;
            box-shadow: 0px 2px 60px 30px #262626;
            z-index: -1;
          }
        }

        @media (max-width: 640px) {
          padding: 1rem 0.75rem 0.75rem;
        }

        .type {
          font-size: 0.95rem;
          margin-bottom: 1.2rem;

          @media (max-width: 640px) {
            margin-bottom: 0.6rem;
          }
        }

        .title {
          font-weight: bold;
          margin-bottom: auto;

          @media (max-width: 640px) {
            margin-right: 2.5rem;
          }
        }

        .info {
          display: flex;
          justify-content: space-between;
          align-items: center;

          @media (max-width: 640px) {
            margin-top: 0.6rem;
            position: relative;
          }

          .text {
            * {
              display: block;

              @media (max-width: 640px) {
                display: inline;

                &:first-child:after {
                  content: " · ";
                }
              }
            }

            @media (max-width: 640px) {
              margin-bottom: 0.3rem;
            }
          }

          .icon {
            height: 3.2rem;
            flex-shrink: 0;
            stroke-width: 3px;
            stroke: var(--bg-color);
            fill: none;
            align-self: end;

            @media (max-width: 640px) {
              position: absolute;
              bottom: 0;
              right: 0;
            }
          }
        }
      }
    }

    .customers-container {
      max-width: var(--content-width);
      height: 10rem;
      box-sizing: border-box;
      box-shadow: 0px 2px 10px var(--sd-color);
      padding: 1.5rem 0.5rem;
      display: flex;
      flex-direction: column;
      position: relative;

      @media (prefers-color-scheme: dark) {
        &::after {
          position: absolute;
          left: 0;
          top: 0;
          content: "";
          width: 100%;
          height: 100%;
          box-shadow: 0px 2px 60px 30px #262626;
          z-index: -1;
        }
      }

      .customers-scroll {
        display: flex;
        overflow: hidden;
        user-select: none;
        gap: 2rem;
        mask-image: linear-gradient(to right,
            hsl(0 0% 0% / 0),
            hsl(0 0% 0% / 1) 5%,
            hsl(0 0% 0% / 1) 95%,
            hsl(0 0% 0% / 0));

        .customers-wrapper {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          animation: scroll 30s linear infinite;
          animation-delay: 100ms;
          gap: 2rem;

          img {
            filter: grayscale(1.0);
            height: 50%;
            width: auto;
            flex-shrink: 0;

            @media (prefers-color-scheme: dark) {
              filter: grayscale(1.0) invert(0.8);
            }
          }
        }
      }
    }

    .social-commitment {
      display: flex;
      justify-content: space-between;
      height: calc(var(--content-width) * 0.192);

      @media (max-width: 640px) {
        flex-wrap: wrap;
        height: auto;
      }

      a {
        height: 100%;
        display: block;

        img {
          width: auto;
          height: 100%;
          display: block;
          object-fit: contain;

          @media (max-width: 640px) {
            max-width: 100%;
          }
        }
      }
    }
  }
}

.footer-wrapper {
  width: 100%;
  height: 22.5rem;
  color: var(--bg-color);
  background-color: var(--em-color);
  font-family: Verdana, Arial, Helvetica, sans-serif;

  @media (max-width: 640px) {
    height: 27rem;
  }

  a {
    color: var(--bg-color);
  }

  .footer {
    height: 100%;
    display: flex;
    flex-direction: column;

    .headline {
      font-family: "Bookman Old Style", Georgia, serif;
      font-size: 1.5rem;
      margin: 4.5rem 0 1rem;

      @media (max-width: 640px) {
        margin-top: 2.5rem;
      }
    }

    .content {
      display: flex;

      @media (max-width: 640px) {
        flex-direction: column;
        gap: 1.5rem;
      }

      div {
        min-width: 50%;

        p {
          margin: 0;
        }

        ul {
          list-style-type: none;
          margin: 0;
          padding: 0;

          li {
            margin-bottom: 0.74em;

            @media (max-width: 640px) {
              margin-bottom: 0.4rem;
            }

            &:last-child {
              margin: 0;
            }
          }
        }
      }
    }

    .further {
      margin: auto 0 3rem;
      height: 2rem;
      display: flex;

      @media (max-width: 640px) {
        flex-direction: column;
        height: 5rem;
        justify-content: space-between;
        margin-bottom: 1.5rem;
      }

      span {
        min-width: 50%;

        &.copyright {
          align-self: end;

          @media (max-width: 640px) {
            align-self: start;
          }
        }

        &.icons {
          @media (max-width: 640px) {
            height: 1.6rem;
          }
        }

        a {
          display: inline-block;
          height: 100%;
          margin-right: 1rem;

          img {
            height: 100%;

            @media (prefers-color-scheme: light) {
              filter: invert();
            }
          }
        }
      }
    }
  }
}