:root {
  --color-slate: #3f5260;
  --color-gold: #c79c43;
  --color-bg: #ffffff;

  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Open Sans", system-ui, sans-serif;

  --u: min(calc(100vw / 1920), calc(100vh / 1080));
}

@supports (height: 100svh) {
  :root {
    --u: min(calc(100vw / 1920), calc(100svh / 1080));
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-slate);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(2rem, calc(44 * var(--u))) 1rem max(2rem, calc(81 * var(--u)));
  text-align: center;
}

.brand {
  width: 100%;
}

.brand__logo {
  width: min(100%, max(18rem, calc(1053 * var(--u))));
  margin-inline: auto;
}

.ornament {
  display: flex;
  align-items: center;
  gap: max(0.75rem, calc(20 * var(--u)));
  margin-top: max(0.75rem, calc(18 * var(--u)));
}

.ornament__line {
  width: max(3rem, calc(107 * var(--u)));
  height: max(2px, calc(3 * var(--u)));
  background: var(--color-gold);
}

.ornament__icon {
  width: max(3.25rem, calc(98 * var(--u)));
}

.headline {
  margin: max(0.75rem, calc(18 * var(--u))) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(1.75rem, calc(64 * var(--u)));
  line-height: 1.22;
  text-wrap: balance;
}

.subline {
  margin: max(0.75rem, calc(21 * var(--u))) 0 0;
  font-size: max(1rem, calc(32 * var(--u)));
  line-height: 1.36;
  text-wrap: balance;
}

.contact {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: max(2rem, calc(110 * var(--u)));
  width: 100%;
  margin-top: max(2rem, calc(49 * var(--u)));
}

.contact__entry:first-child {
  justify-self: end;
}

.contact__entry:last-child {
  justify-self: start;
}

.contact__divider {
  width: max(2px, calc(3 * var(--u)));
  height: max(4rem, calc(107 * var(--u)));
  background: var(--color-gold);
}

.contact__link {
  display: flex;
  align-items: center;
  gap: max(0.75rem, calc(19 * var(--u)));
  color: inherit;
  text-align: left;
  text-decoration: none;
  border-radius: 999px;
}

.contact__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: max(3.75rem, calc(107 * var(--u)));
  aspect-ratio: 1;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.contact__icon img {
  width: 56%;
}

.contact__icon--slate {
  background: var(--color-slate);
}

.contact__icon--gold {
  background: var(--color-gold);
}

.contact__text {
  display: flex;
  flex-direction: column;
  line-height: 1.36;
}

.contact__label {
  font-size: max(0.875rem, calc(24 * var(--u)));
}

.contact__value {
  font-size: max(1.0625rem, calc(30 * var(--u)));
  transition: color 0.2s ease;
}

.contact__link:hover .contact__icon {
  transform: scale(1.05);
}

.contact__link:hover .contact__value {
  color: var(--color-gold);
}

.contact__link:focus-visible {
  outline: max(2px, calc(3 * var(--u))) solid var(--color-slate);
  outline-offset: 6px;
}

.claims {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: max(1rem, calc(50 * var(--u)));
  margin-top: max(2.5rem, calc(84 * var(--u)));
}

.claims__line {
  width: max(3rem, calc(107 * var(--u)));
  height: max(2px, calc(3 * var(--u)));
  background: var(--color-gold);
}

.claims__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  font-size: max(0.8125rem, calc(20 * var(--u)));
  font-weight: 300;
  line-height: 1.36;
  text-transform: uppercase;
  white-space: nowrap;
}

.claims__list li {
  display: flex;
  align-items: center;
}

.claims__list li + li::before {
  content: "";
  flex-shrink: 0;
  width: 1px;
  height: max(1.25rem, calc(31 * var(--u)));
  margin: 0 max(1rem, calc(50 * var(--u)));
  background: var(--color-gold);
}

@media (min-width: 768px) and (orientation: landscape) {
  .page {
    padding-top: max(1rem, calc(44 * var(--u)));
  }

  .ornament,
  .headline {
    margin-top: max(0.5rem, calc(18 * var(--u)));
  }

  .subline {
    margin-top: max(0.5rem, calc(21 * var(--u)));
  }

  .contact {
    margin-top: max(1.25rem, calc(49 * var(--u)));
  }

  .contact__icon {
    width: max(3rem, calc(107 * var(--u)));
  }

  .contact__divider {
    height: max(3rem, calc(107 * var(--u)));
  }

  .claims {
    margin-top: max(1.5rem, calc(84 * var(--u)));
  }

  .claims__list li + li::before {
    height: max(1rem, calc(31 * var(--u)));
  }
}

@media (max-width: 767px) {
  .headline {
    font-size: clamp(1.5rem, 7vw, 2.25rem);
  }

  .headline br {
    display: none;
  }

  .contact {
    grid-template-columns: minmax(0, max-content);
    justify-content: center;
    row-gap: 1.5rem;
  }

  .contact__text {
    min-width: 0;
  }

  .contact__value {
    font-size: min(1.0625rem, 5.2vw);
    overflow-wrap: anywhere;
  }

  .contact__entry:first-child,
  .contact__entry:last-child {
    justify-self: start;
  }

  .contact__divider {
    justify-self: center;
    width: 4rem;
    height: 2px;
  }

  .claims__line {
    display: none;
  }

  .claims__list li + li::before {
    margin: 0 0.875rem;
  }
}

@media (max-width: 21em) {
  .claims__list {
    flex-direction: column;
    row-gap: 0.25rem;
  }

  .claims__list li + li::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact__icon,
  .contact__value {
    transition: none;
  }
}