.brand-lockup { display: flex; align-items: center; gap: clamp(7px, 1vw, 15px); }
.brand-domain {
  color: #d5eafa;
  font-size: clamp(11px, .94vw, 14px);
  font-weight: 650;
  letter-spacing: .012em;
  white-space: nowrap;
}
.header-inner { gap: clamp(10px, 1.35vw, 20px); }
.navigation { gap: clamp(13px, 1.45vw, 23px); }

.step-panel { --fade-depth: clamp(58px, 7.5vw, 108px); }
.step-tabs [aria-selected="true"], .catalogue-tabs [aria-selected="true"] {
  background:
    url("/assets/tab-water-vortex.svg") right -12px center / auto 185% no-repeat,
    linear-gradient(180deg, #123458, #164169 23%, #1f4f7f 46%, #30679b 72%, #538dbb 87%, #7eb5de);
  text-shadow: 0 1px 2px #0b2545a6;
}
.media {
  --fade-depth: clamp(96px, 14vw, 194px);
  padding-block-end: calc(var(--fade-depth) + 24px);
}
.footer {
  --fade-depth: clamp(48px, 6.2vw, 86px);
  padding-block: var(--fade-depth) 0;
  background:
    linear-gradient(0deg, #194874, #31699c 26%, #74afd8 59%, #b9ddf3 84%, #dfedf9)
      top / 100% calc(var(--fade-depth) + 1px) no-repeat,
    linear-gradient(0deg, #07172c, #102d4d 65%, #194874)
      bottom / 100% calc(100% - var(--fade-depth)) no-repeat #194874;
}

@media (1030px < width <= 1300px) {
  .header-inner { display: grid; grid-template-columns: 1fr auto; row-gap: 0; padding-block: 6px 10px; }
  .header-tools { grid-area: 1 / 2; }
  .navigation { grid-area: 2 / 1 / auto / -1; justify-content: center; }
}
@media (max-width: 820px) {
  .header-contact { display: none; }
  .mobile-contact { display: block; color: var(--gold); }
}
@media (max-width: 730px) {
  .step-tabs [role="tab"] { overflow-wrap: anywhere; hyphens: auto; }
  .step-tabs [aria-selected="true"] {
    background-position: right -16px center, center;
    background-size: 115px auto, 100% 100%;
  }
}
@media (max-width: 520px) {
  html { scroll-padding-top: 104px; }
  .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; padding-block: 5px; }
  .header .brand { width: clamp(98px, 33vw, 142px); }
  .header-tools { display: contents; }
  .menu { grid-area: 1 / 2; }
  .languages { grid-area: 2 / 1 / auto / -1; justify-self: end; }
  .languages a { padding-block: 3px; }
}
@media (max-width: 360px) {
  .header-inner { width: calc(100% - 24px); }
  .header .brand { width: 98px; }
  .brand-domain { font-size: 10px; }
}