/*
 * Fluid layout scaled from 1920 design (all viewports).
 * --fluid-ratio is updated by js/layout.js (uses visualViewport for browser zoom).
 * Typography and spacing (rem) scale via html font-size below.
 */

html {
  font-size: calc(var(--fluid-ratio) * 16px);
}

:root {
  --fluid-ratio: 1;

  --header-bar-width: min(calc(1610px * var(--fluid-ratio)), 100%);
  --container-width: min(calc(1710px * var(--fluid-ratio)), 100%);
  --container-width-narrow: min(calc(1610px * var(--fluid-ratio)), 100%);
  --header-height: calc(97px * var(--fluid-ratio));
  --header-spacer-height: var(--header-height);
  --header-logo-width: calc(172px * var(--fluid-ratio));
  --header-logo-height: calc(57px * var(--fluid-ratio));
  --lang-switch-width: calc(112px * var(--fluid-ratio));
  --page-banner-height: calc(250px * var(--fluid-ratio));
  --banner-height: calc(875px * var(--fluid-ratio));
  --about-building-width: calc(970px * var(--fluid-ratio));
  --about-building-height: calc(547px * var(--fluid-ratio));
  --about-building-radius: calc(80px * var(--fluid-ratio));
  --about-mission-min-height: calc(652px * var(--fluid-ratio));
  --about-mission-mountains-height: calc(617px * var(--fluid-ratio));
  --about-mission-padding-y: calc(118px * var(--fluid-ratio));
  --about-mission-padding-x: calc(100px * var(--fluid-ratio));
  --about-mission-headlines-padding-top: calc(18px * var(--fluid-ratio));
  --about-mission-title-gap: calc(8px * var(--fluid-ratio));
  --about-mission-cards-gap: calc(60px * var(--fluid-ratio));
  --about-mission-cards-margin-right: calc(100px * var(--fluid-ratio));
  --about-mission-card-width: calc(468px * var(--fluid-ratio));
  --about-mission-card-height: calc(490px * var(--fluid-ratio));
  --about-mission-card-padding: calc(50px * var(--fluid-ratio));
  --about-mission-card-radius: calc(28px * var(--fluid-ratio));
  --about-mission-card-head-gap: calc(16px * var(--fluid-ratio));
  --about-mission-card-icon-size: calc(100px * var(--fluid-ratio));
  --about-mission-card-text-margin-top: calc(35px * var(--fluid-ratio));
  --features-height: calc(140px * var(--fluid-ratio));
  --features-divider-height: calc(63px * var(--fluid-ratio));
  --features-icon-width: calc(44px * var(--fluid-ratio));
  --features-icon-height: calc(45px * var(--fluid-ratio));
  --filter-panel-width: calc(174px * var(--fluid-ratio));
  --filter-panel-min-width: calc(174px * var(--fluid-ratio));
  --filter-panel-option-height: calc(32px * var(--fluid-ratio));
  --filter-panel-scroll-max-height: calc(170px * var(--fluid-ratio));
  --filter-panel-scroll-scrollbar-width: calc(4px * var(--fluid-ratio));
  --filter-panel-scroll-scrollbar-radius: calc(2px * var(--fluid-ratio));
  --solution-gallery-height: calc(860px * var(--fluid-ratio));
  --solution-panel-narrow: calc(277px * var(--fluid-ratio));
  --solution-panel-wide: calc(829px * var(--fluid-ratio));
  --solution-icon-wrap-size: calc(104px * var(--fluid-ratio));
}

body[data-page="home"] {
  --container-width: var(--container-width-narrow);
}

main .container {
  width: var(--container-width);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

.container.site-header__bar {
  width: var(--header-bar-width);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

.site-header__actions {
  width: min(calc(280px * var(--fluid-ratio)), 100%);
  height: calc(46px * var(--fluid-ratio));
}

.site-header__bar {
  padding-right: calc(var(--lang-switch-width) + 1.25rem);
}

.site-header__inner {
  flex-wrap: nowrap;
  height: var(--header-height);
  padding-top: 0;
  padding-bottom: 0;
  gap: 2.5rem;
}

.site-nav {
  order: 0;
  flex: 1;
}

.site-nav__list {
  flex-wrap: nowrap;
  justify-content: center;
  gap: 3rem;
}

.site-search__btn {
  width: calc(20px * var(--fluid-ratio));
  height: calc(20px * var(--fluid-ratio));
}

.site-search__btn svg {
  width: calc(16px * var(--fluid-ratio));
  height: calc(16px * var(--fluid-ratio));
}

.hero__controls {
  bottom: calc(48px * var(--fluid-ratio));
  right: calc(156px * var(--fluid-ratio));
}

.about__inner {
  flex-direction: row;
  flex-wrap: nowrap;
}

.about__main.container {
  flex: 0 1 auto;
  width: var(--container-width);
  max-width: calc(100% - var(--about-building-width) - var(--about-inner-gap));
  margin-left: max(0px, calc((100vw - var(--container-width)) / 2));
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.about__media {
  flex: 0 0 var(--about-building-width);
  width: var(--about-building-width);
  margin-left: auto;
  margin-right: 0;
}

.about__building {
  width: 100%;
  max-width: none;
  aspect-ratio: 970 / 547;
  border-radius: var(--about-building-radius) 0 0 0;
}

.product-mega-menu__head {
  height: calc(73px * var(--fluid-ratio));
}

.product-mega-menu__col:nth-child(1) .product-mega-menu__head-chips img {
  width: calc(57px * var(--fluid-ratio));
  height: calc(44px * var(--fluid-ratio));
}

.product-mega-menu__col:nth-child(2) .product-mega-menu__head-chips img {
  width: calc(61px * var(--fluid-ratio));
  height: calc(44px * var(--fluid-ratio));
}

.product-mega-menu__col:nth-child(3) .product-mega-menu__head-chips img {
  width: calc(67px * var(--fluid-ratio));
  height: calc(44px * var(--fluid-ratio));
}

.product-mega-menu__col:nth-child(4) .product-mega-menu__head-chips img {
  width: calc(52px * var(--fluid-ratio));
  height: calc(45px * var(--fluid-ratio));
}

.product-mega-menu__col:nth-child(n + 5) .product-mega-menu__head-chips img {
  width: calc(52px * var(--fluid-ratio));
  height: calc(45px * var(--fluid-ratio));
}

.product-mega-menu__list > li {
  height: calc(52px * var(--fluid-ratio));
}

.product-mega-menu__icon-img,
.product-mega-menu__icon {
  width: calc(20px * var(--fluid-ratio));
  height: calc(21px * var(--fluid-ratio));
}

.product-mega-menu__arrow,
.product-mega-menu__arrow-img {
  width: calc(17px * var(--fluid-ratio));
}

.site-footer {
  height: calc(476px * var(--fluid-ratio));
}

.site-footer__search-col {
  flex: 0 0 min(calc(356px * var(--fluid-ratio)), 100%);
}

.footer-search {
  width: min(calc(356px * var(--fluid-ratio)), 100%);
  height: calc(50px * var(--fluid-ratio));
  border-radius: calc(25px * var(--fluid-ratio));
}

.footer-search__btn {
  width: calc(40px * var(--fluid-ratio));
  height: calc(40px * var(--fluid-ratio));
}

.footer-search__btn img,
.footer-search__btn svg {
  width: calc(18px * var(--fluid-ratio));
  height: calc(18px * var(--fluid-ratio));
}

.back-top {
  width: calc(104px * var(--fluid-ratio));
  height: calc(104px * var(--fluid-ratio));
}