:root {
  --font-main: "Inter", Arial, sans-serif;
  --color-blue: #005bed;
  --color-blue-light: #1f74fd;
  --color-black: #000000;
  --color-ink: #0c0c0c;
  --color-dark: #1e1e1e;
  --color-graphite: #25262b;
  --color-white: #ffffff;
  --color-surface: #fafafa;
  --color-muted: #999999;
  --color-border: rgba(0, 0, 0, 0.2);
  --color-line: #efefef;
  --container: 1380px;
  --page-x: 12px;
  --section-y: clamp(70px, 8vw, 120px);
  --section-y-compact: clamp(56px, 6vw, 100px);
  --grid-gap: clamp(20px, 2.8vw, 40px);
  --card-gap: clamp(16px, 2vw, 24px);
  --title-xl: clamp(40px, 6.8vw, 80px);
  --title-lg: clamp(34px, 5.4vw, 70px);
  --title-md: clamp(24px, 3vw, 32px);
  --text-md: 1rem;
  --motion-duration: 0.6s;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --radius-small: 5px;
  --radius-pill: 100px;
  --focus-ring-color: rgba(0, 91, 237, 0.24);
  --focus-ring: 0 0 0 4px var(--focus-ring-color);
  --control-transition: 0.22s ease;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-main);
  letter-spacing: 0;
}

body.is-modal-open {
  overflow: hidden;
}

html.is-vvveb-preview,
body.is-vvveb-preview {
  scroll-behavior: auto;
}

body.is-vvveb-preview {
  overflow: visible;
}

body.section-preview {
  min-height: 100vh;
}

body.section-preview > [hidden] {
  display: block !important;
}

.is-vvveb-preview .about-hero-sequence,
.is-vvveb-preview .about-hero-sequence-stage {
  min-height: 0;
}

.is-vvveb-preview .about-hero-sequence .about-hero {
  height: auto;
  min-height: 0;
  overflow: visible;
}

.is-vvveb-preview .about-hero-copy {
  height: auto;
  min-height: min(720px, 100svh);
}

.is-vvveb-preview .about-hero-sequence.is-vvveb-edit-hero .about-hero-statement {
  display: none;
}

.is-vvveb-preview .about-hero-sequence.is-vvveb-edit-statement .about-hero-copy,
.is-vvveb-preview .about-hero-sequence.is-vvveb-edit-statement .about-hero-mark {
  display: none;
}

.is-vvveb-preview .about-hero-sequence.is-vvveb-edit-all .about-hero-mark,
.is-vvveb-preview .about-hero-sequence.is-vvveb-edit-hero .about-hero-mark {
  display: block;
}

.is-vvveb-preview .about-hero-sequence.is-vvveb-edit-all .about-hero-statement,
.is-vvveb-preview .about-hero-sequence.is-vvveb-edit-statement .about-hero-statement {
  position: relative;
  min-height: min(760px, 100svh);
  opacity: 1;
  pointer-events: auto;
}

.is-vvveb-preview .about-hero-sequence.is-vvveb-edit-all .about-hero-bg,
.is-vvveb-preview .about-hero-sequence.is-vvveb-edit-statement .about-hero-bg {
  opacity: 1;
}

.is-vvveb-preview .about-hero-sequence.is-vvveb-edit-all .about-hero-statement::before,
.is-vvveb-preview .about-hero-sequence.is-vvveb-edit-statement .about-hero-statement::before {
  opacity: 1;
}

.is-vvveb-preview .about-hero-sequence.is-vvveb-edit-all .about-hero-statement .about-statement-copy,
.is-vvveb-preview .about-hero-sequence.is-vvveb-edit-statement .about-hero-statement .about-statement-copy {
  opacity: 1;
  transform: none;
}

.is-vvveb-preview .about-tech {
  height: auto;
  min-height: 0;
  overflow: visible;
}

.is-vvveb-preview .about-tech-inner {
  height: auto;
  max-height: none;
  overflow: visible;
}

.is-vvveb-preview .about-tech-slides {
  overflow: visible;
}

.is-vvveb-preview .about-tech-slides .swiper-wrapper {
  display: grid;
  gap: 24px;
  height: auto;
  transform: none !important;
}

.is-vvveb-preview .about-tech-slides .swiper-slide {
  display: block;
  width: 100% !important;
  max-width: 100%;
  opacity: 1;
  transform: none !important;
}

.is-vvveb-preview .about-tech[data-vvveb-edit-slide="1"] .swiper-slide:not(:nth-child(1)),
.is-vvveb-preview .about-tech[data-vvveb-edit-slide="2"] .swiper-slide:not(:nth-child(2)),
.is-vvveb-preview .about-tech[data-vvveb-edit-slide="3"] .swiper-slide:not(:nth-child(3)),
.is-vvveb-preview .about-tech[data-vvveb-edit-slide="4"] .swiper-slide:not(:nth-child(4)),
.is-vvveb-preview .about-tech[data-vvveb-edit-slide="5"] .swiper-slide:not(:nth-child(5)),
.is-vvveb-preview .about-tech[data-vvveb-edit-slide="6"] .swiper-slide:not(:nth-child(6)) {
  display: none;
}

.is-vvveb-preview .about-tech[data-vvveb-edit-slide="all"] .about-tech-pagination {
  display: none;
}

.vvveb-preview-controls {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 10000;
  display: grid;
  width: min(260px, calc(100vw - 28px));
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(12, 12, 12, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 54px rgba(12, 12, 12, 0.14);
  color: var(--color-black);
  font-size: 12px;
}

.vvveb-preview-controls strong,
.vvveb-preview-controls span {
  display: block;
}

.vvveb-preview-controls strong {
  font-weight: 600;
}

.vvveb-preview-controls-group {
  display: grid;
  gap: 8px;
}

.vvveb-preview-controls-group span {
  color: var(--color-muted);
}

.vvveb-preview-controls-group button {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(12, 12, 12, 0.12);
  border-radius: 6px;
  background: var(--color-white);
  color: var(--color-black);
  text-align: left;
}

.vvveb-preview-controls-group button.is-active {
  border-color: var(--color-blue);
  background: var(--color-blue);
  color: var(--color-white);
}

.is-vvveb-preview *,
.is-vvveb-preview *::before,
.is-vvveb-preview *::after {
  animation: none !important;
  transition: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

button,
[type="button"],
[type="submit"] {
  cursor: pointer;
}

a,
button,
input,
textarea,
select {
  transition:
    color var(--control-transition),
    background-color var(--control-transition),
    border-color var(--control-transition),
    box-shadow var(--control-transition),
    opacity var(--control-transition),
    transform var(--control-transition);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

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

h1,
h2,
h3,
p {
  margin-top: 0;
}

.site-header {
  position: absolute;
  z-index: 50;
  top: 20px;
  left: 50%;
  display: flex;
  width: min(366px, calc(100% - 24px));
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  transform: translateX(-50%);
}

.brand-logo {
  display: inline-flex;
  width: 118px;
  height: 20.88px;
  flex: 0 0 auto;
  color: var(--color-black);
}

.logo-icon,
.icon,
.button-icon {
  display: block;
  background: currentColor;
}

.logo-icon {
  width: 100%;
  height: 100%;
  -webkit-mask: url("../icons/logo-vutherm.svg") center / contain no-repeat;
  mask: url("../icons/logo-vutherm.svg") center / contain no-repeat;
}

.icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.icon-phone {
  -webkit-mask: url("../icons/phone.svg") center / contain no-repeat;
  mask: url("../icons/phone.svg") center / contain no-repeat;
}

.icon-menu {
  width: 24px;
  height: 24px;
  -webkit-mask: url("../icons/menu.svg") center / contain no-repeat;
  mask: url("../icons/menu.svg") center / contain no-repeat;
}

.icon-video {
  -webkit-mask: url("../icons/video.svg") center / contain no-repeat;
  mask: url("../icons/video.svg") center / contain no-repeat;
}

.icon-close {
  -webkit-mask: url("../icons/close.svg") center / contain no-repeat;
  mask: url("../icons/close.svg") center / contain no-repeat;
}

.icon-download {
  -webkit-mask: url("../icons/download.svg") center / contain no-repeat;
  mask: url("../icons/download.svg") center / contain no-repeat;
}

.icon-scroll-top {
  -webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
  mask: url("../icons/arrow-right.svg") center / contain no-repeat;
  transform: rotate(-90deg);
}

.button-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  -webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
  mask: url("../icons/arrow-right.svg") center / contain no-repeat;
}

.button-icon-down {
  -webkit-mask-image: url("../icons/down.svg");
  mask-image: url("../icons/down.svg");
}

.header-nav {
  display: none;
}

.header-nav a,
.site-footer nav a {
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-black);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.site-header .header-phone {
  display: inline-flex;
  width: 139px;
}

.site-header .header-phone .icon {
  display: none;
}

.menu-button {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-black);
  cursor: pointer;
}

.menu-button.is-active {
  background: var(--color-black);
  color: var(--color-white);
}

.menu-button.is-active .icon-menu {
  -webkit-mask-image: url("../icons/close.svg");
  mask-image: url("../icons/close.svg");
}

.mobile-nav-backdrop,
.mobile-nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.24s ease,
    visibility 0.24s ease,
    transform 0.24s ease;
  visibility: hidden;
}

.mobile-nav-backdrop {
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.42);
}

.mobile-nav-drawer {
  display: flex;
  justify-content: flex-start;
  transform: translateX(-100%);
}

.mobile-nav-drawer.is-open,
.mobile-nav-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.mobile-nav-drawer.is-open {
  transform: translateX(0);
}

.mobile-nav-panel {
  display: grid;
  align-content: start;
  width: min(320px, calc(100vw - 24px));
  min-height: 100%;
  max-height: 100vh;
  max-height: 100svh;
  padding: 20px 12px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--color-white);
  box-shadow: 22px 0 44px rgba(0, 0, 0, 0.18);
}

.mobile-nav-header,
.mobile-nav-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mobile-nav-header {
  margin-bottom: 28px;
}

.mobile-nav-header .brand-logo {
  width: 148px;
  height: auto;
  aspect-ratio: 172 / 30.44;
}

.mobile-nav-close {
  width: 40px;
  height: 40px;
  border: 0;
  background: var(--color-surface);
  color: var(--color-black);
}

.mobile-nav-list,
.mobile-nav-list.header-nav {
  display: grid;
  gap: 8px;
}

.mobile-nav-list a {
  display: flex;
  min-height: 48px;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.mobile-nav-meta {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
}

.mobile-nav-meta .header-phone {
  width: auto;
  min-width: 0;
}

.mobile-nav-meta .header-phone .icon {
  display: block;
}

.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 14px 13px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
}

.button,
.menu-button,
.header-phone,
.header-nav a,
.site-footer nav a,
.breadcrumbs a,
.text-link,
.segmented-actions button,
.objects-tabs button,
.question-row,
.cutaway-slider-buttons button,
.product-detail-slider button,
.mobile-nav-close,
.mobile-nav-list a {
  will-change: transform;
}

.button-primary {
  background: var(--color-blue);
  color: var(--color-white);
}

.button-light {
  background: var(--color-white);
  color: var(--color-black);
}

.button-dark {
  background: var(--color-black);
  color: var(--color-white);
}

.button-ghost {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}

.button-outline {
  border-color: var(--color-black);
  background: var(--color-white);
  color: var(--color-black);
}

.button-muted {
  background: var(--color-surface);
  color: var(--color-black);
}

.button-shadow {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.button-with-video {
  gap: 10px;
}

.button-large-icon .button-icon {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
}

.text-link {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.header-nav a[aria-current="page"],
.site-footer nav a[aria-current="page"],
.breadcrumbs a[aria-current="page"],
.mobile-nav-list a[aria-current="page"] {
  color: var(--color-blue);
}

@media (hover: hover) {
  .button:hover,
  .menu-button:hover,
  .mobile-nav-close:hover {
    transform: translateY(-1px);
  }

  .button-primary:hover {
    background: var(--color-blue-light);
    box-shadow: 0 12px 30px rgba(0, 91, 237, 0.22);
  }

  .button-light:hover,
  .button-outline:hover {
    border-color: rgba(0, 91, 237, 0.2);
    background: #f3f7ff;
    color: var(--color-blue);
  }

  .button-dark:hover {
    background: var(--color-dark);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  }

  .button-ghost:hover {
    background: rgba(0, 91, 237, 0.08);
    color: var(--color-blue);
  }

  .button-muted:hover,
  .menu-button:hover,
  .mobile-nav-close:hover,
  .mobile-nav-list a:hover {
    background: #eef4ff;
    color: var(--color-blue);
  }

  .header-phone:hover,
  .header-nav a:hover,
  .site-footer nav a:hover,
  .breadcrumbs a:hover,
  .text-link:hover,
  .question-row:hover h3 {
    color: var(--color-blue);
  }

  .segmented-actions button:hover {
    background: rgba(255, 255, 255, 0.14);
  }

  .objects-tabs button:hover {
    background: transparent;
    color: var(--color-black);
  }

  .cutaway-slider-buttons button:hover,
  .product-detail-slider button:hover {
    background: #eef4ff;
    color: var(--color-blue);
  }
}

.button:active,
.menu-button:active,
.header-phone:active,
.header-nav a:active,
.site-footer nav a:active,
.breadcrumbs a:active,
.text-link:active,
.segmented-actions button:active,
.objects-tabs button:active,
.question-row:active,
.cutaway-slider-buttons button:active,
.product-detail-slider button:active,
.mobile-nav-close:active,
.mobile-nav-list a:active {
  transform: translateY(0);
  opacity: 0.88;
}

.question-row:focus-visible h3,
.question-row:focus-visible .faq-toggle::before,
.question-row:focus-visible .faq-toggle::after {
  color: var(--color-blue);
  background: var(--color-blue);
}

.hero {
  position: relative;
  min-height: 844px;
  overflow: hidden;
  padding: 134px 0 0;
  background: var(--color-white);
}

.hero-photo {
  display: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  min-height: 710px;
  text-align: center;
}

.hero-lead {
  width: min(335px, calc(100% - 24px));
  margin: 0 auto 107px;
  padding: 0 12px;
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-wrap: balance;
}

h1 {
  width: min(970px, 100%);
  margin: 0 auto 32px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
}

.button-video {
  position: relative;
  z-index: 3;
  margin-bottom: 62px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
}

.hero-word {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: none;
  margin: 0 auto;
  color: var(--color-blue);
  font-size: 57.46px;
  font-weight: 600;
  line-height: 1.2;
}

.hero-brand {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.02em;
  width: fit-content;
  max-width: none;
  white-space: nowrap;
  will-change: transform, opacity;
}

.hero-brand span {
  display: inline-block;
  will-change: transform, opacity;
}

.hero-boilers {
  position: absolute;
  top: 315px;
  left: 50%;
  width: 680.2px;
  height: 440px;
  transform: translateX(-50%);
}

.boiler,
.machine-body,
.machine-front,
.machine-stack,
.machine-card::before,
.machine-card::after,
.machine-card span {
  display: block;
}

.boiler {
  position: absolute;
  top: 0;
  width: 346.1px;
  height: 440px;
  max-width: none;
  object-fit: contain;
}

.boiler-a {
  left: 0;
}

.boiler-b {
  left: 167.05px;
}

.boiler-c {
  left: 334.1px;
}

.hero-sequence {
  background: var(--color-white);
}

.hero-sequence.is-hero-sequence-pending .hero-lead,
.hero-sequence.is-hero-sequence-pending .hero-brand,
.hero-sequence.is-hero-sequence-pending .boiler,
.hero-sequence.is-hero-sequence-pending .precision-section--sequence {
  opacity: 0;
}

.hero-sequence-stage {
  position: relative;
}

.hero--sequence {
  z-index: 1;
}

.precision-section--sequence,
.precision-section--standalone {
  min-height: auto;
  padding: 0 var(--page-x) var(--section-y);
  background: var(--color-white);
}

.precision-sequence-panel {
  position: relative;
  width: min(var(--container), 100%);
  height: clamp(540px, 76vw, 800px);
  overflow: hidden;
  margin: 0 auto;
  border-radius: 36px;
  background: var(--color-dark);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.2);
  will-change: transform, width, height, border-radius;
}

.precision-section--standalone {
  display: grid;
  align-items: center;
  min-height: 100vh;
  padding-top: clamp(96px, 10vw, 140px);
}

.precision-section--standalone .precision-sequence-panel {
  border-radius: 0;
  height: min(100vh - clamp(96px, 10vw, 140px), 800px);
}

.precision-section--sequence .precision-photo,
.precision-section--standalone .precision-photo,
.precision-section--sequence .precision-photo::after,
.precision-section--standalone .precision-photo::after {
  position: absolute;
  inset: 0;
}

.precision-section--sequence .precision-photo::after,
.precision-section--standalone .precision-photo::after {
  content: "";
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.52) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.12) 100%);
}

.precision-section--sequence .precision-photo img,
.precision-section--standalone .precision-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.precision-section--sequence .precision-copy,
.precision-section--standalone .precision-copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(28px, 4vw, 56px);
  min-height: 100%;
  padding: clamp(32px, 5vw, 80px);
  text-align: center;
  margin: 0 auto;
}

.precision-section--sequence .precision-copy h2,
.precision-section--standalone .precision-copy h2 {
  width: min(1120px, 100%);
  margin: 0;
  color: var(--color-white);
  font-size: clamp(42px, 7vw, 70px);
  font-weight: 600;
  line-height: 1.1;
}

.hero-sequence.has-hero-sequence-animation .hero-sequence-stage {
  min-height: 100vh;
  overflow: hidden;
}

.hero-sequence.has-hero-sequence-animation .hero--sequence {
  min-height: 100vh;
}

.hero-sequence.has-hero-sequence-animation .precision-section--sequence {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: clamp(18px, 3vw, 30px);
  background: transparent;
  overflow: hidden;
  pointer-events: none;
  will-change: transform, padding;
}

.hero-sequence.has-hero-sequence-animation .precision-sequence-panel {
  width: min(94vw, 1320px);
  height: clamp(380px, 72vh, 800px);
  margin: 0;
  border-radius: clamp(24px, 3vw, 44px);
}

.hero-sequence.has-hero-sequence-animation .precision-section--sequence .precision-copy {
  min-height: 100%;
}

.hero-sequence.has-hero-sequence-animation .precision-section--sequence .precision-sequence-panel {
  pointer-events: auto;
}

.hero-sequence.is-hero-sequence-complete .hero--sequence {
  min-height: initial;
}

.hero-sequence.is-hero-sequence-complete .precision-section--sequence {
  position: relative;
  inset: auto;
  display: block;
  padding: 0;
  overflow: visible;
  background: var(--color-white);
  pointer-events: auto;
}

.hero-sequence.is-hero-sequence-complete .precision-sequence-panel {
  width: 100%;
  height: 100vh;
  border-radius: 0;
  box-shadow: none;
}

.hero-sequence.is-hero-sequence-complete .precision-section--sequence .precision-copy {
  min-height: 100vh;
}

@media (max-height: 413px) {
  .hero-sequence.is-hero-sequence-compact .hero-sequence-stage {
    min-height: auto;
    overflow: visible;
  }

  .hero-sequence.is-hero-sequence-compact .hero-lead,
  .hero-sequence.is-hero-sequence-compact .hero-brand,
  .hero-sequence.is-hero-sequence-compact .boiler,
  .hero-sequence.is-hero-sequence-compact .precision-section--sequence {
    opacity: 1 !important;
  }

  .hero-sequence.is-hero-sequence-compact .precision-section--sequence {
    position: relative;
    inset: auto;
    display: block;
    padding: 0;
    overflow: visible;
    background: var(--color-white);
    pointer-events: auto;
  }

  .hero-sequence.is-hero-sequence-compact .precision-sequence-panel {
    width: 100%;
    height: clamp(280px, 74svh, 560px);
    border-radius: 0;
    box-shadow: none;
  }

  .hero-sequence.is-hero-sequence-compact .precision-section--sequence .precision-copy {
    min-height: clamp(280px, 74svh, 560px);
  }
}

.made-section,
.catalog-section,
.faq-section {
  width: min(var(--container), calc(100% - 24px));
  margin: 0 auto;
  padding: 70px 0;
}

.section-heading {
  display: grid;
  gap: 24px;
  margin-bottom: 32px;
}

.made-head {
  display: grid;
  gap: 24px;
}

.made-head h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
}

.made-title span:first-child {
  color: var(--color-ink);
}

.made-title span:last-child {
  color: #a2a2a2;
}

.made-head .button {
  width: max-content;
}

.made-grid {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}

.made-card {
  display: grid;
  gap: 16px;
}

.made-card-media {
  position: relative;
  height: 399px;
  overflow: hidden;
  background: var(--color-surface);
}

.made-card-media img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 303px;
  max-width: none;
  transform: translate(-50%, -50%);
}

.made-card-media-wide img {
  width: 366px;
  height: 206px;
  object-fit: cover;
}

.made-card-media-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.made-card-empty {
  background: #f5f6f9;
}

.made-card-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
}

.made-card-meta h3,
.made-card-meta p,
.made-card-meta span {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.made-card-meta h3 {
  color: var(--color-ink);
}

.made-card-meta p {
  margin-top: 16px;
}

.made-card-meta p,
.made-card-meta span {
  color: var(--color-muted);
}

.made-preview-hero-spacer {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(12, 12, 12, 0.03) 0%, rgba(12, 12, 12, 0.06) 100%),
    var(--color-white);
  box-shadow:
    inset 0 -1px 0 rgba(12, 12, 12, 0.08),
    inset 0 -52px 72px rgba(12, 12, 12, 0.06);
}

.made-section-preview {
  position: relative;
  padding-top: clamp(28px, 4vw, 52px);
}

[data-made-preview] [data-made-preview-title],
[data-made-preview] [data-made-preview-button],
[data-made-preview] .made-card {
  opacity: 1;
  transform: none;
}

[data-made-preview].is-made-preview-pending [data-made-preview-title],
[data-made-preview].is-made-preview-pending [data-made-preview-button],
[data-made-preview].is-made-preview-pending .made-card {
  opacity: 0;
  transform: translateY(34px);
}

[data-made-preview].is-made-preview-pending [data-made-preview-title],
[data-made-preview].is-made-preview-pending [data-made-preview-button],
[data-made-preview].is-made-preview-pending .made-card,
[data-made-preview].is-made-preview-stage-title [data-made-preview-title],
[data-made-preview].is-made-preview-stage-button [data-made-preview-button],
[data-made-preview].is-made-preview-visible .made-card {
  transition:
    opacity 1.08s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.08s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-made-preview].is-made-preview-stage-title [data-made-preview-title],
[data-made-preview].is-made-preview-stage-button [data-made-preview-button] {
  opacity: 1;
  transform: translateY(0);
}

[data-made-preview].is-made-preview-visible .made-card {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--reveal-delay, 0ms);
}

.section-heading h2,
.product-copy h2 {
  margin-bottom: 0;
  color: var(--color-ink);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.25;
}

.product-panel {
  position: relative;
  display: grid;
  grid-template-areas:
    "copy"
    "chips"
    "visual"
    "bottom";
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-content: start;
  gap: 24px;
  width: min(390px, 100%);
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
  margin: 0 auto;
  padding: 32px 12px;
  background: var(--color-white);
}

.chip-row {
  position: relative;
  z-index: 2;
  grid-area: chips;
  top: auto;
  left: auto;
  display: flex;
  width: 100%;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.spec-chip {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-black);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.product-copy {
  position: relative;
  z-index: 2;
  grid-area: copy;
  width: min(363px, 100%);
  margin: 0 auto;
  text-align: center;
}

.product-copy h2 {
  width: min(301px, 100%);
  margin: 0 auto;
  color: var(--color-black);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

.product-copy p,
.faq-item p {
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.product-copy p {
  width: min(363px, 100%);
  margin: 24px auto 0;
}

.product-image {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0.92;
  pointer-events: none;
}

.product-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  grid-area: bottom;
  display: grid;
  width: 100%;
  gap: 20px;
  justify-items: start;
  align-self: end;
}

.product-bottom h3 {
  margin: 0 0 12px;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.4;
}

.product-bottom p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.product-bottom .button {
  width: max-content;
}

.product-preview-hero-spacer {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(12, 12, 12, 0.02) 0%, rgba(12, 12, 12, 0.05) 100%),
    var(--color-white);
  box-shadow:
    inset 0 -1px 0 rgba(12, 12, 12, 0.08),
    inset 0 -52px 72px rgba(12, 12, 12, 0.05);
}

.product-preview-shell {
  position: relative;
  z-index: 1;
  min-height: 340vh;
}

.product-preview-sticky {
  position: sticky;
  top: 0;
  display: grid;
  min-height: 100vh;
  box-sizing: border-box;
  align-items: start;
  padding: 0;
  background: var(--color-white);
}

.product-showcase-preview {
  width: 100%;
  height: 100vh;
}

[data-product-preview] [data-product-preview-copy],
[data-product-preview] [data-product-preview-chips],
[data-product-preview] [data-product-preview-bottom] {
  opacity: 1;
  transform: none;
  will-change: transform, opacity;
}

[data-product-preview].is-product-preview-pending [data-product-preview-copy],
[data-product-preview].is-product-preview-pending [data-product-preview-chips],
[data-product-preview].is-product-preview-pending [data-product-preview-bottom] {
  opacity: 0;
  transform: translateY(26px);
}

[data-product-preview].is-product-preview-pending [data-product-preview-copy],
[data-product-preview].is-product-preview-pending [data-product-preview-chips],
[data-product-preview].is-product-preview-pending [data-product-preview-bottom],
[data-product-preview].is-product-preview-stage-copy [data-product-preview-copy],
[data-product-preview].is-product-preview-stage-chips [data-product-preview-chips],
[data-product-preview].is-product-preview-visible [data-product-preview-bottom] {
  transition:
    opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-product-preview].is-product-preview-stage-copy [data-product-preview-copy],
[data-product-preview].is-product-preview-stage-chips [data-product-preview-chips],
[data-product-preview].is-product-preview-visible [data-product-preview-bottom] {
  opacity: 1;
  transform: translateY(0);
}

.product-preview-next-section {
  position: relative;
  z-index: 3;
  min-height: 115vh;
  margin-top: -12vh;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 0.94) 10%, #fafafa 22%),
    #fafafa;
  box-shadow: 0 -24px 60px rgba(12, 12, 12, 0.05);
}

.product-preview-next-inner {
  width: min(var(--container), 100%);
  margin: 0 auto;
  padding: clamp(72px, 9vw, 120px) var(--page-x) 0;
}

.product-preview-next-eyebrow {
  margin: 0 0 18px;
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-preview-next-inner h2 {
  width: min(760px, 100%);
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(36px, 5.4vw, 64px);
  font-weight: 500;
  line-height: 1.08;
}

.split-section {
  display: grid;
  width: min(390px, 100%);
  margin: 0 auto;
  background: transparent;
}

.promo-text-panel,
.promo-blue-panel {
  position: relative;
  overflow: hidden;
}

.promo-text-panel {
  min-height: 833px;
  margin-bottom: 30px;
  padding: 63px 12px 0;
  background: var(--color-surface);
}

.promo-copy {
  position: relative;
  z-index: 2;
  width: min(366px, 100%);
}

.promo-copy h2,
.promo-blue-panel h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.4;
}

.promo-copy h2 {
  width: min(345px, 100%);
  color: var(--color-ink);
  font-weight: 600;
}

.promo-copy p {
  width: min(562px, 100%);
  margin: 24px 0 0;
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.promo-boiler-side {
  position: absolute;
  top: 265px;
  left: -42px;
  width: 674px;
  max-width: none;
}

.promo-blue-panel {
  min-height: 637px;
  margin-bottom: 30px;
  padding: 119px 12px 0;
  background: var(--color-blue);
  color: var(--color-white);
}

.promo-blue-panel h2 {
  position: relative;
  z-index: 2;
  width: min(286px, 100%);
  margin: 0 auto;
  color: var(--color-white);
  font-weight: 500;
}

.promo-boiler-front {
  position: absolute;
  top: 213px;
  left: -209px;
  width: 823px;
  max-width: none;
}

.promo-blue-panel .button {
  position: absolute;
  z-index: 2;
  top: 490px;
  left: 133px;
  min-width: 124px;
  padding-right: 18px;
}

.split-preview-spacer {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(12, 12, 12, 0.02) 0%, rgba(12, 12, 12, 0.05) 100%),
    var(--color-white);
}

.split-preview-spacer-top {
  box-shadow:
    inset 0 -1px 0 rgba(12, 12, 12, 0.08),
    inset 0 -52px 72px rgba(12, 12, 12, 0.05);
}

.split-preview-spacer-bottom {
  box-shadow:
    inset 0 1px 0 rgba(12, 12, 12, 0.08),
    inset 0 52px 72px rgba(12, 12, 12, 0.04);
}

.split-preview-shell {
  position: relative;
  min-height: 180vh;
}

.split-story-preview-shell {
  position: relative;
  min-height: 620vh;
}

.split-preview-sticky {
  position: sticky;
  top: 0;
  display: grid;
  min-height: 100vh;
  align-items: center;
  background: var(--color-white);
}

.split-story-preview-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  background: var(--color-white);
  overflow: hidden;
}

.split-story-preview-stage {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.split-story-base {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  align-items: center;
}

.split-story-base .split-section-preview {
  position: relative;
  z-index: 1;
}

.split-section-preview {
  overflow: hidden;
}

.split-section-preview.is-split-mobile-mode {
  position: relative;
  min-height: 100vh;
}

.split-section-preview.is-split-mobile-mode [data-split-right],
.split-section-preview.is-split-mobile-mode [data-split-left] {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
  margin-bottom: 0;
  opacity: 1;
}

.split-section-preview.is-split-mobile-mode [data-split-right] {
  z-index: 1;
  transform: none;
}

.split-section-preview.is-split-mobile-mode [data-split-left] {
  z-index: 2;
  transform: translateY(108%);
}

.split-section-preview.is-split-mobile-mode.is-split-left-visible [data-split-left] {
  transform: translateY(0);
}

.split-section-preview [data-split-right],
.split-section-preview [data-split-left] {
  will-change: transform, opacity;
  transition:
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.split-section-preview [data-split-right] {
  transform: translateY(108%);
  opacity: 0.78;
  background: rgba(0, 91, 237, 0.14);
  transition:
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.split-section-preview [data-split-left] {
  transform: translateY(108%);
  opacity: 0.78;
}

.split-section-preview.is-split-right-visible [data-split-right],
.split-section-preview.is-split-left-visible [data-split-left] {
  transform: translateY(0);
  opacity: 1;
}

.split-section-preview.is-split-right-visible [data-split-right] {
  background: var(--color-blue);
}

.split-section-preview .promo-blue-panel .promo-boiler-front {
  left: 50%;
  transform: translateX(-50%);
}

.story-preview-spacer {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(12, 12, 12, 0.03) 0%, rgba(12, 12, 12, 0.06) 100%),
    var(--color-white);
}

.story-preview-spacer-top {
  box-shadow:
    inset 0 -1px 0 rgba(12, 12, 12, 0.08),
    inset 0 -52px 72px rgba(12, 12, 12, 0.05);
}

.story-preview-spacer-bottom {
  box-shadow:
    inset 0 1px 0 rgba(12, 12, 12, 0.08),
    inset 0 52px 72px rgba(12, 12, 12, 0.12);
}

.story-preview-shell {
  position: relative;
  min-height: 520vh;
}

.story-preview-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  background: var(--color-dark);
}

.story-slider-preview,
.story-slider-preview .story-stage,
.story-slider-preview .story-list {
  min-height: 100vh;
  height: 100vh;
}

.story-slider-preview .story-stage {
  overflow: hidden;
}

.story-slider-preview .story-list {
  position: relative;
}

.story-slider-preview .story-slide {
  position: absolute;
  inset: 0;
  min-height: 100vh;
  z-index: 1;
  transform: translate3d(0, calc(var(--story-slide-offset, 0) * 108%), 0);
  will-change: transform;
}

.story-slider-preview .story-slide:nth-child(1) {
  z-index: 1;
}

.story-slider-preview .story-slide:nth-child(2) {
  z-index: 2;
}

.story-slider-preview .story-slide:nth-child(3) {
  z-index: 3;
}

.story-slider-preview .story-slide-content {
  transform: translateY(calc(var(--story-slide-offset, 0) * -20px));
}

.story-slider-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  transform: translate3d(0, calc(var(--story-scene-offset, 1) * 108%), 0);
  will-change: transform;
  pointer-events: none;
}

.story-slider-overlay.is-story-scene-active {
  pointer-events: auto;
}


@media (max-height: 413px) {
  .product-preview-shell,
  .split-preview-shell,
  .split-story-preview-shell,
  .story-preview-shell {
    min-height: auto;
  }

  .split-section-preview.is-split-compact-static .promo-text-panel{
    height: clamp(700px, 80svh, 833px);
  }

  .split-section-preview.is-split-compact-static .promo-blue-panel{
    height: clamp(700px, 80svh, 833px);
  }

  .product-preview-sticky,
  .split-preview-sticky,
  .split-story-preview-sticky,
  .story-preview-sticky {
    position: relative;
    top: auto;
    min-height: auto;
  }

  .product-showcase-preview {
    height: auto;
  }

  .split-story-preview-stage {
    display: grid;
    gap: 0;
    min-height: auto;
    overflow: visible;
  }

  .split-story-base,
  .story-slider-overlay {
    position: relative;
    inset: auto;
    transform: none !important;
    pointer-events: auto;
  }

  .split-story-base .split-section-preview {
    position: static;
  }

  .split-section-preview.is-split-compact-static,
  .split-section-preview.is-split-compact-static [data-split-right],
  .split-section-preview.is-split-compact-static [data-split-left] {
    position: relative;
    inset: auto;
    min-height: auto;
    transform: none !important;
    opacity: 1 !important;
  }

  .story-slider-preview,
  .story-slider-preview .story-stage,
  .story-slider-preview .story-list {
    min-height: auto;
    height: auto;
  }

  .story-slider-preview .story-list {
    display: grid;
  }

  .story-slider-preview .story-slide {
    position: relative;
    inset: auto;
    min-height: clamp(280px, 74svh, 560px);
    transform: none !important;
  }
}

.precision-section {
  position: relative;
  min-height: 800px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 90px var(--page-x);
  background: var(--color-dark);
  color: var(--color-white);
}

.precision-photo,
.precision-photo::after {
  position: absolute;
  inset: 0;
}

.precision-photo::after {
  content: "";
  background: rgba(0, 0, 0, 0.3);
}

.precision-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.precision-copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 56px;
  width: min(970px, 100%);
  text-align: center;
}

.precision-copy h2 {
  margin: 0;
  color: var(--color-white);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
}

.precision-section--sequence,
.precision-section--standalone {
  display: block;
  min-height: auto;
  overflow: visible;
  padding: 0 var(--page-x) var(--section-y);
  background: var(--color-white);
}

.precision-section--standalone {
  padding-top: clamp(96px, 10vw, 140px);
}

.segmented-actions {
  display: inline-flex;
  flex-wrap: wrap;
  width: min(448px, 100%);
  min-height: 42px;
  gap: 0;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-blue-light);
}

.segmented-actions button {
  min-height: 38px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}

.segmented-actions .is-active {
  background: var(--color-white);
  color: var(--color-black);
}

.catalog-grid {
  display: grid;
  gap: 32px;
}

.catalog-card {
  display: grid;
  gap: 24px;
}

.catalog-media {
  display: grid;
  aspect-ratio: 1 / 1;
  place-items: center;
  overflow: hidden;
  background: var(--color-surface);
}

.catalog-media .machine-card {
  width: 88%;
  height: 64%;
  margin: 0;
}

.catalog-media .machine-card::before {
  background: linear-gradient(90deg, var(--color-ink), var(--color-blue));
}

.catalog-media .machine-card::after {
  background: var(--color-black);
}

.machine-short::before {
  width: 62%;
}

.machine-dark::before {
  background: var(--color-ink);
}

.catalog-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
}

.catalog-meta h3,
.catalog-meta p,
.catalog-meta span {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.catalog-meta h3 {
  margin-bottom: 16px;
  color: var(--color-ink);
}

.catalog-meta p,
.catalog-meta span {
  color: var(--color-muted);
}

.faq-list {
  display: grid;
  border-top: 1px solid var(--color-line);
}

.faq-item {
  display: grid;
  gap: 16px;
  padding: 32px 0;
  border-bottom: 1px solid var(--color-line);
}

.faq-item h3 {
  margin: 0;
  color: var(--color-ink);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
}

.faq-item p {
  margin: 0;
}

.story-slider {
  position: relative;
  min-height: 380vh;
  background: var(--color-dark);
}

.story-transition-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--color-dark);
}

.story-transition-panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-height: 100%;
  height: 100%;
}

.story-transition-panel:not(.is-story-transition-active) {
  opacity: 0;
  pointer-events: none;
}

.story-transition-panel.is-story-transition-current,
.story-transition-panel.is-story-transition-active {
  opacity: 1;
}

.story-transition-svg {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.story-transition-mask-base {
  fill: #000;
}

.story-transition-mask-rect {
  fill: #fff;
}

.story-transition-copy {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(24px, 3svh, 42px);
  padding: 90px var(--page-x);
  color: var(--color-white);
  opacity: 0;
  transform: translateY(30px);
  text-align: center;
  pointer-events: none;
}

.story-transition-copy.is-story-transition-copy-visible {
  pointer-events: auto;
}

.story-transition-copy h2 {
  width: min(970px, 100%);
  margin: 0;
  color: var(--color-white);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
}

.story-transition-progress {
  position: absolute;
  z-index: 5;
  right: clamp(12px, 2.4vw, 32px);
  top: 50%;
  display: grid;
  gap: 12px;
  width: 10px;
  transform: translateY(-50%);
}

.story-transition-progress span {
  display: block;
  width: 10px;
  height: 42px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.story-transition-progress span::before {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-white);
  content: "";
  transform: scaleY(var(--story-transition-progress, 0));
  transform-origin: top;
}

.story-slider.is-story-transition-static {
  min-height: auto;
}

.story-slider.is-story-transition-static .story-transition-stage {
  position: relative;
  height: auto;
  overflow: visible;
}

.story-slider.is-story-transition-static .story-transition-panel {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

.story-slider.is-story-transition-static .story-transition-progress {
  display: none;
}

.story-stage {
  position: relative;
  width: 100%;
  min-height: 0;
  height: auto;
  overflow: visible;
  background: var(--color-dark);
}

.story-list {
  display: grid;
}

.story-slide {
  position: relative;
  display: grid;
  min-height: 774px;
  place-items: center;
  overflow: hidden;
  padding: 90px var(--page-x);
  background: var(--color-dark);
}

.story-slide-bg,
.story-slide-bg::after {
  position: absolute;
  inset: 0;
}

.story-slide-bg {
  background-position: center;
  background-size: cover;
}

.story-slide-bg::after {
  content: "";
  background: rgba(0, 0, 0, 0.6);
}

.story-slide-a .story-slide-bg {
  background-image: url("../images/story-slide-01-reliability-v2.png");
}

.story-slide-b .story-slide-bg {
  background-image: url("../images/story-slide-02-thermal-v2.png");
}

.story-slide-c .story-slide-bg {
  background-image: url("../images/story-slide-03-engineering-v2.png");
}

.story-slide-c .story-slide-bg::after {
  background: rgba(0, 0, 0, 0.8);
}

.story-slide-content {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 56px;
  width: min(970px, 100%);
  text-align: center;
}

.story-slide-content h2 {
  margin: 0;
  color: var(--color-white);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
}

.story-swiper {
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--color-dark);
}

.story-swiper .swiper-wrapper {
  height: 100%;
}

.story-swiper .swiper-slide {
  height: 100%;
}

.story-swiper-pagination {
  position: absolute;
  top: 50%;
  right: clamp(12px, 2.4vw, 32px);
  left: auto !important;
  z-index: 4;
  display: grid;
  gap: 12px;
  width: auto !important;
  transform: translateY(-50%);
}

.story-swiper-pagination.swiper-pagination-vertical.swiper-pagination-bullets,
.story-swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
  inset: 50% clamp(12px, 2.4vw, 32px) auto auto;
  transform: translateY(-50%);
}

.story-swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.42);
  opacity: 1;
  transition:
    transform 0.35s ease,
    background-color 0.35s ease,
    box-shadow 0.35s ease;
}

.story-swiper-pagination .swiper-pagination-bullet-active {
  background: var(--color-white);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18);
  transform: scale(1.08);
}

.story-panel {
  position: relative;
  display: grid;
  min-height: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  padding: 90px var(--page-x);
  background: var(--color-dark);
}

.story-transition-stage .story-panel {
  position: absolute;
  min-height: 100%;
}

.story-panel-bg,
.story-panel-bg::after {
  position: absolute;
  inset: 0;
}

.story-panel-bg {
  background-position: center;
  background-size: cover;
}

.story-panel-bg::after {
  content: "";
  background: rgba(0, 0, 0, 0.6);
}

.story-panel-a .story-panel-bg {
  background-image: url("../images/story-slide-01-reliability-v2.png");
}

.story-panel-b .story-panel-bg {
  background-image: url("../images/story-slide-02-thermal-v2.png");
}

.story-panel-c .story-panel-bg {
  background-image: url("../images/story-slide-03-engineering-v2.png");
}

.story-panel-c .story-panel-bg::after {
  background: rgba(0, 0, 0, 0.8);
}

.story-panel-content {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 56px;
  width: min(970px, 100%);
  text-align: center;
}

.story-panel-content h2 {
  margin: 0;
  color: var(--color-white);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
}

@media (max-width: 767px) {
  .story-swiper-pagination {
    right: 10px;
    gap: 10px;
  }

  .story-swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
  }
}

.question-section {
  min-height: 818px;
  display: grid;
  place-items: center;
  padding: 70px var(--page-x);
  background: var(--color-surface);
}

.scroll-top-button {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  background: rgba(0, 87, 255, 0.96);
  color: var(--color-white);
  box-shadow: 0 18px 32px rgba(0, 23, 68, 0.2);
}

.scroll-top-button.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-top-button:hover {
  background: var(--color-blue);
}

.scroll-top-button .icon {
  width: 18px;
  height: 18px;
}

@media (min-width: 768px) {
  .scroll-top-button {
    right: 20px;
    bottom: 20px;
    width: 56px;
    height: 56px;
  }
}

.question-inner {
  display: grid;
  width: min(366px, 100%);
  gap: 50px;
}

.question-head {
  display: grid;
  gap: 24px;
  align-items: start;
}

.question-head h2 {
  margin: 0;
  color: var(--color-ink);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
}

.question-list {
  display: grid;
  gap: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--color-black);
}

.question-item {
  display: grid;
  gap: 24px;
}

.question-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 72px;
  align-items: start;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.question-row h3 {
  margin: 0;
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.question-item p {
  margin: 0;
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.question-item p[hidden] {
  display: none;
}

.faq-toggle {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.faq-toggle::before,
.faq-toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: var(--color-black);
  content: "";
  transform: translate(-50%, -50%);
}

.faq-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.question-item.is-open .faq-toggle::after {
  display: none;
}

.question-preview-spacer {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(12, 12, 12, 0.02) 0%, rgba(12, 12, 12, 0.05) 100%),
    var(--color-white);
}

.question-preview-spacer-top {
  box-shadow:
    inset 0 -1px 0 rgba(12, 12, 12, 0.08),
    inset 0 -52px 72px rgba(12, 12, 12, 0.05);
}

.question-preview-spacer-bottom {
  box-shadow:
    inset 0 1px 0 rgba(12, 12, 12, 0.08),
    inset 0 52px 72px rgba(12, 12, 12, 0.04);
}

.question-section-preview [data-question-preview-title],
.question-section-preview [data-question-preview-button],
.question-section-preview .question-item {
  will-change: transform, opacity;
  transition:
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}

.question-section-preview .question-list {
  position: relative;
  border-top-color: transparent;
}

.question-section-preview .question-list::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-black);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.question-section-preview.is-question-preview-pending [data-question-preview-title],
.question-section-preview.is-question-preview-pending [data-question-preview-button],
.question-section-preview.is-question-preview-pending .question-item {
  opacity: 0;
}

.question-section-preview.is-question-preview-pending [data-question-preview-title] {
  transform: translateY(24px);
}

.question-section-preview.is-question-preview-pending [data-question-preview-button] {
  transform: translateY(18px);
}

.question-section-preview.is-question-preview-pending .question-item {
  transform: translateY(26px);
}

.question-section-preview.is-question-preview-stage-title [data-question-preview-title],
.question-section-preview.is-question-preview-stage-button [data-question-preview-button],
.question-section-preview .question-item.is-question-preview-item-visible {
  opacity: 1;
  transform: translateY(0);
}

.question-section-preview.is-question-preview-stage-line .question-list::before,
.question-section-preview.is-question-preview-visible .question-list::before {
  transform: scaleX(1);
}

.company-video {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  align-content: center;
  gap: 0;
  overflow: hidden;
  padding: 0 var(--page-x);
  background: var(--color-black);
}

.video-mark {
  width: 255px;
  height: 255px;
  margin-bottom: -153px;
  color: var(--color-blue);
  background: currentColor;
  -webkit-mask: url("../icons/logo-vutherm.svg") left center / auto 255px no-repeat;
  mask: url("../icons/logo-vutherm.svg") left center / auto 255px no-repeat;
}

.company-video .button-video {
  z-index: 2;
  margin: 0;
  box-shadow: none;
}

.company-video-preview-spacer {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(12, 12, 12, 0.88) 0%, rgba(12, 12, 12, 0.94) 100%),
    var(--color-black);
}

.company-video-preview-spacer-top {
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -64px 96px rgba(0, 91, 237, 0.12);
}

.company-video-preview-spacer-bottom {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 52px 96px rgba(0, 91, 237, 0.08);
}

.company-video-preview {
  position: relative;
}

.company-video-preview [data-company-video-mark] {
  opacity: 0.5;
  transform: scale(4.4);
  transform-origin: center center;
  transition:
    opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.25s cubic-bezier(0.18, 1, 0.22, 1);
}

.company-video-preview [data-company-video-button] {
  opacity: 0;
  transform: translateY(22px);
  will-change: transform, opacity;
  transition:
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}

.company-video-preview.is-company-video-preview-mark-ready [data-company-video-mark],
.company-video-preview.is-company-video-preview-visible [data-company-video-mark] {
  opacity: 1;
  transform: scale(1);
}

.company-video-preview.is-company-video-preview-button-visible [data-company-video-button],
.company-video-preview.is-company-video-preview-visible [data-company-video-button] {
  opacity: 1;
  transform: translateY(0);
}

.site-footer {
  display: flex;
  width: min(366px, calc(100% - 24px));
  min-height: 538px;
  flex-direction: column;
  gap: 24px;
  margin: 12px auto;
  padding: 35px 24px;
  border-radius: var(--radius-small);
  background: var(--color-surface);
}

.footer-top,
.site-footer nav,
.footer-bottom {
  display: grid;
  gap: 24px;
}

.footer-top {
  margin: 0;
}

.site-footer .brand-logo {
  width: 172px;
  height: 30.44px;
}

.site-footer .header-phone {
  display: inline-flex;
  width: 169px;
  min-height: 22px;
}

.site-footer nav {
  margin: 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-black);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.footer-bottom {
  color: var(--color-muted);
  font-size: 16px;
  line-height: 1.4;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.breadcrumbs {
  display: flex;
  gap: 4px;
  width: min(280px, calc(100vw - var(--page-x) * 4));
  margin: 0 auto 70px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.about-hero {
  position: relative;
  min-height: 844px;
  overflow: hidden;
  padding: 130px var(--page-x) 0;
  background: var(--color-white);
}

.about-hero-sequence {
  position: relative;
  min-height: 320vh;
  background: var(--color-white);
}

.about-hero-sequence-stage {
  position: relative;
  min-height: 100vh;
}

.about-hero-sequence .about-hero {
  min-height: 100vh;
  min-height: 100svh;
  background: rgba(255, 255, 255, var(--about-hero-bg-opacity, 1));
}

.about-hero-sequence.is-about-hero-pending .breadcrumbs,
.about-hero-sequence.is-about-hero-pending [data-about-hero-title],
.about-hero-sequence.is-about-hero-pending [data-about-hero-lead],
.about-hero-sequence.is-about-hero-pending [data-about-hero-mark] {
  opacity: 0;
}

.about-hero-bg,
.about-hero-bg::after {
  position: absolute;
  inset: 0;
}

.about-hero-bg {
  z-index: 0;
  opacity: 0;
}

.about-hero-bg::after {
  content: "";
  background: rgba(0, 0, 0, 0);
}

.about-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero-copy {
  position: relative;
  z-index: 2;
  width: min(280px, calc(100vw - var(--page-x) * 4));
  margin: 0 auto;
}

.about-hero h1 {
  width: 100%;
  margin: 0 0 24px;
  color: var(--color-ink);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
}

.about-hero p {
  width: 100%;
  margin: 0;
  color: var(--color-black);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}

.about-hero-media {
  position: absolute;
  left: 50%;
  bottom: -11px;
  z-index: 1;
  width: 427px;
  height: 427px;
  overflow: hidden;
  background: var(--color-blue);
  transform: translateX(-45%);
  -webkit-mask: url("../images/logo-mask.svg") center / contain no-repeat;
  mask: url("../images/logo-mask.svg") center / contain no-repeat;
}

.about-hero-mark {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
  -webkit-mask-image: url("../images/logo-mask.svg");
  mask-image: url("../images/logo-mask.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  opacity: var(--about-mark-opacity, 0.3);
  -webkit-mask-position: var(--about-mark-x, 100%) var(--about-mark-y, 100%);
  mask-position: var(--about-mark-x, 100%) var(--about-mark-y, 100%);
  -webkit-mask-size: var(--about-mark-size-x, 50%) var(--about-mark-size-y, 90%);
  mask-size: var(--about-mark-size-x, 50%) var(--about-mark-size-y, 90%);
}

.about-hero-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero-statement,
.about-hero-statement::before {
  position: absolute;
  inset: 0;
}

.about-hero-statement {
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 70px var(--page-x);
  opacity: 0;
  pointer-events: none;
}

.about-hero-statement::before {
  content: "";
  background: rgba(0, 0, 0, 0.58);
  opacity: var(--about-statement-shade, 0);
}

.about-hero-statement .about-statement-copy {
  opacity: var(--about-statement-copy-opacity, 0);
  transform: translateY(var(--about-statement-copy-y, 42px));
}

.about-hero-sequence.is-about-hero-compact {
  min-height: auto;
}

.about-hero-sequence.is-about-hero-compact .about-hero-statement {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  opacity: 1;
  pointer-events: auto;
}

.about-hero-sequence.is-about-hero-compact .about-hero-bg {
  opacity: 1;
}

.about-hero-sequence.is-about-hero-compact .about-hero-mark {
  display: none;
}

.about-hero-sequence.is-about-hero-compact .about-hero-statement::before {
  opacity: 1;
}

.about-hero-sequence.is-about-hero-compact .about-hero-statement .about-statement-copy {
  opacity: 1;
  transform: none;
}

.about-statement,
.about-video {
  position: relative;
  display: grid;
  min-height: 768px;
  place-items: center;
  overflow: hidden;
  padding: 70px var(--page-x);
  background: var(--color-dark);
  color: var(--color-white);
}

.about-statement-photo,
.about-video-photo,
.about-statement-photo::after,
.about-video-photo::after {
  position: absolute;
  inset: 0;
}

.about-statement-photo::after,
.about-video-photo::after {
  content: "";
  background: rgba(0, 0, 0, 0.4);
}

.about-statement-photo img,
.about-video-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-statement-copy,
.about-video-copy {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(366px, 100%);
  justify-items: center;
  gap: 24px;
  text-align: center;
}

.about-statement-copy h2,
.about-video-copy h2 {
  margin: 0;
  color: var(--color-white);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
}

.about-statement-copy p,
.about-video-copy p {
  width: min(340px, 100%);
  margin: 0;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.about-values {
  display: block;
  width: min(390px, 100%);
  margin: 0 auto;
  padding: 70px var(--page-x);
  background: var(--color-white);
}

.about-values-inner {
  display: grid;
  gap: 20px;
  width: 100%;
}

.about-values-row {
  display: grid;
  gap: 20px;
}

.about-value-card {
  position: relative;
  min-height: 290px;
  overflow: hidden;
  background: var(--color-dark);
  opacity: 1;
  transition:
    opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-values.is-about-values-pending .about-value-card {
  opacity: 0;
  transform: translateY(34px);
}

.about-values.is-about-values-visible .about-value-card {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--reveal-delay, 0ms);
}

.about-value-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.88;
  object-fit: cover;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-value-card::before,
.about-value-card::after {
  position: absolute;
  inset: 0;
  content: "";
}

.about-value-card::before {
  background: rgba(0, 91, 237, 0.6);
  transition: background-color 0.45s ease;
}

.about-value-card::after {
  background: rgba(0, 0, 0, 0.3);
  transition: background-color 0.45s ease;
}

.about-value-card span,
.about-value-card p {
  position: absolute;
  z-index: 2;
  left: 24px;
  color: var(--color-white);
}

.about-value-card span {
  bottom: 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  transition: transform 0.45s ease;
}

.about-value-card p {
  bottom: 24px;
  width: min(520px, calc(100% - 48px));
  margin: 0;
  opacity: 0;
  transform: translateY(18px);
  color: rgba(255, 255, 255, 0.86);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1200px) {
  .about-value-card:hover {
    z-index: 2;
    box-shadow: 0 24px 48px rgba(0, 23, 68, 0.16);
  }

  .about-value-card:hover img {
    filter: saturate(1.08) brightness(1.16);
    transform: scale(1.05);
  }

  .about-values:has(.about-value-card:hover) .about-value-card:not(:hover)::before {
    background: rgba(0, 20, 48, 0.58);
  }

  .about-values:has(.about-value-card:hover) .about-value-card:not(:hover)::after {
    background: rgba(0, 0, 0, 0.48);
  }

  .about-value-card:hover::before {
    background: rgba(0, 91, 237, 0.08);
  }

  .about-value-card:hover::after {
    background: rgba(0, 0, 0, 0.04);
  }

  .about-value-card:hover span {
    transform: translateY(-34px);
  }

  .about-value-card:hover p {
    opacity: 1;
    transform: translateY(0);
  }
}

.about-tech {
  width: min(390px, 100%);
  margin: 0 auto;
  padding: 70px var(--page-x);
  background: var(--color-white);
}

.about-tech-inner {
  display: grid;
  min-width: 0;
  width: 100%;
}

.about-tech h2,
.about-numbers h2 {
  margin: 0 0 24px;
  color: var(--color-ink);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
}

.about-tech-slides {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.about-tech [data-about-tech-title],
.about-tech [data-about-tech-slider] {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-tech.is-about-tech-pending [data-about-tech-title],
.about-tech.is-about-tech-pending [data-about-tech-slider] {
  opacity: 0;
  transform: translateY(34px);
}

.about-tech.is-about-tech-visible [data-about-tech-slider] {
  transition-delay: 0.18s;
}

.about-tech-slides .swiper-wrapper {
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
}

.about-tech-slides .swiper-slide {
  min-width: 0;
  max-width: 100%;
  height: auto;
}

.about-tech-grid {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: 20px;
}

.about-tech-pagination {
  position: relative;
  inset: auto !important;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.about-tech-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 !important;
  background: var(--color-border);
  opacity: 1;
  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
}

.about-tech-pagination .swiper-pagination-bullet-active {
  background: var(--color-blue);
  transform: scale(1.15);
}

.about-tech-card,
.about-tech-media {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  background: var(--color-surface);
}

.about-tech-card {
  display: flex;
  min-height: 267px;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
}

.about-tech-card h3 {
  max-width: 345px;
  margin: 0 0 24px;
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.about-tech-card p {
  max-width: 392px;
  margin: 0;
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.about-tech-card span {
  color: var(--color-ink);
  font-size: 24px;
  line-height: 1.4;
}

.about-tech-media {
  height: 283px;
}

.about-tech-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-numbers {
  width: min(390px, 100%);
  margin: 0 auto;
  padding: 70px var(--page-x);
  background: var(--color-white);
}

.about-numbers-inner {
  display: grid;
  width: 100%;
}

.about-number-list {
  display: grid;
  gap: 0;
}

.about-number-item {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 37px;
  align-items: center;
  min-height: 202px;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.about-number-item:first-child {
  border-top-color: var(--color-black);
}

.about-number-item:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.about-number-index {
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.about-number-item strong {
  display: block;
  color: #e7e7e7;
  font-size: 50px;
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.35s ease;
}

.about-number-item p {
  margin: 5px 0 0;
  color: #e7e7e7;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  transition: color 0.35s ease;
}

.about-number-item.is-active strong,
.about-number-item.is-active p {
  color: var(--color-blue);
}

.about-video {
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 var(--page-x);
  align-content: center;
  background: var(--color-dark);
}

.about-video-photo {
  opacity: 0;
}

.about-video-photo::after {
  background: rgba(0, 0, 0, 0.54);
}

.about-video-mark {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.1;
  -webkit-mask-image: url("../images/logo-mask.svg");
  mask-image: url("../images/logo-mask.svg");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: var(--about-video-mark-size, 340px);
  mask-size: var(--about-video-mark-size, 340px);
}

.about-video-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-video-copy {
  gap: 24px;
}

.about-video [data-about-video-reveal] {
  opacity: 0;
  transform: translateY(34px);
}

.about-video.is-about-video-static .about-video-photo,
.about-video.is-about-video-static [data-about-video-reveal] {
  opacity: 1;
  transform: none;
}

.about-video.is-about-video-static .about-video-mark {
  opacity: 0;
}

.about-video-copy .button-video {
  position: relative;
  z-index: 2;
  margin: 0;
  box-shadow: none;
}

.objects-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: 112px var(--page-x) 70px;
  background: var(--color-blue);
  color: var(--color-white);
}

body:has(.objects-hero) .site-header {
  padding: 0 0 0 12px;
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.94);
}

.objects-breadcrumbs {
  position: relative;
  z-index: 3;
  order: 1;
  color: var(--color-white);
}

.objects-map {
  position: relative;
  z-index: 1;
  order: 3;
  width: min(520px, 100%);
  margin: 32px auto 0;
}

.objects-map-viewport {
  position: relative;
  overflow: visible;
  touch-action: none;
}

.objects-hero.is-intro-pending .objects-breadcrumbs,
.objects-hero.is-intro-pending .objects-map-viewport,
.objects-hero.is-intro-pending h1,
.objects-hero.is-intro-pending .objects-tabs,
.objects-hero.is-intro-pending .objects-map-controls {
  opacity: 0;
}

.objects-hero.is-intro-pending .objects-map-viewport {
  transform: translateY(14px) scale(1.06);
}

.objects-hero.is-intro-pending h1,
.objects-hero.is-intro-pending .objects-tabs {
  transform: translateY(28px);
}

.objects-hero.is-intro-pending .objects-map-pin {
  --objects-pin-active-scale: 0.35;
  opacity: 0;
}

.is-vvveb-preview .objects-hero.is-intro-pending .objects-breadcrumbs,
.is-vvveb-preview .objects-hero.is-intro-pending .objects-map-viewport,
.is-vvveb-preview .objects-hero.is-intro-pending h1,
.is-vvveb-preview .objects-hero.is-intro-pending .objects-tabs,
.is-vvveb-preview .objects-hero.is-intro-pending .objects-map-controls,
.is-vvveb-preview .objects-hero.is-intro-pending .objects-map-pin {
  opacity: 1;
  transform: none;
}

.is-vvveb-preview .objects-hero.is-intro-pending .objects-map-pin {
  transform: translate(-50%, -50%) scale(var(--objects-map-pin-scale, 1));
}

.objects-hero.is-intro-ready .objects-breadcrumbs {
  animation: objectsIntroFade 0.7s 0.05s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.objects-hero.is-intro-ready .objects-map-viewport {
  animation: objectsMapIntro 1.05s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.objects-hero.is-intro-ready .objects-map-pin:not(.is-hidden):not(.is-cluster-hidden) {
  animation: objectsPinIntro 0.68s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.42s + var(--objects-pin-intro-delay, 0ms));
}

.objects-hero.is-intro-ready h1 {
  animation: objectsIntroRise 0.78s 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.objects-hero.is-intro-ready .objects-tabs {
  animation: objectsIntroRise 0.74s 1.08s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.objects-hero.is-intro-ready .objects-map-controls {
  animation: objectsIntroFade 0.55s 1.28s ease both;
}

@keyframes objectsMapIntro {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(1.06);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes objectsPinIntro {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(calc(var(--objects-map-pin-scale, 1) * 0.35));
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }

  58% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(calc(var(--objects-map-pin-scale, 1) * 1.14));
    box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.16);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(calc(var(--objects-map-pin-scale, 1) * var(--objects-pin-active-scale)));
    box-shadow: 0 0 0 28px rgba(255, 255, 255, 0);
  }
}

@keyframes objectsIntroRise {
  0% {
    opacity: 0;
    transform: translateY(28px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes objectsIntroFade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .objects-hero.is-intro-pending .objects-breadcrumbs,
  .objects-hero.is-intro-pending .objects-map-viewport,
  .objects-hero.is-intro-pending h1,
  .objects-hero.is-intro-pending .objects-tabs,
  .objects-hero.is-intro-pending .objects-map-controls,
  .objects-hero.is-intro-pending .objects-map-pin {
    opacity: 1;
    animation: none;
    transform: none;
  }

  .objects-hero.is-intro-pending .objects-map-pin {
    transform: translate(-50%, -50%) scale(var(--objects-map-pin-scale, 1));
  }
}

.objects-map-canvas {
  position: relative;
  width: 100%;
  cursor: grab;
  transform: translate(var(--objects-map-x, 0), var(--objects-map-y, 0)) scale(var(--objects-map-scale, 1));
  transform-origin: center center;
  transition: transform 0.22s ease;
  user-select: none;
}

.objects-map.is-dragging .objects-map-canvas {
  cursor: grabbing;
  transition: none;
}

.objects-map img {
  display: block;
  width: 100%;
  max-width: none;
  opacity: 0.95;
  -webkit-user-drag: none;
  user-select: none;
}

.objects-map-controls {
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: 12px;
  display: grid;
  gap: 8px;
}

.objects-map-control {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-blue);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 14px 30px rgba(0, 31, 92, 0.18);
}

.objects-map-control:disabled {
  opacity: 0.45;
  cursor: default;
}

[data-objects-reveal] [data-objects-reveal-item] {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--objects-reveal-delay, 0ms);
}

[data-objects-reveal].is-objects-reveal-pending [data-objects-reveal-item] {
  opacity: 0;
  transform: translateY(38px);
}

.object-card[data-objects-reveal-item] {
  opacity: 1;
  transform: none;
  transition: none;
}

.objects-map-pin {
  position: absolute;
  top: var(--y);
  left: var(--x);
  --objects-pin-active-scale: 1;
  z-index: 1;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-blue);
  opacity: 1;
  transform: translate(-50%, -50%) scale(calc(var(--objects-map-pin-scale, 1) * var(--objects-pin-active-scale)));
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.objects-map-pin.is-active {
  --objects-pin-active-scale: 1.12;
  z-index: 8;
}

.objects-map-pin:hover,
.objects-map-pin:focus-visible {
  --objects-pin-active-scale: 1.08;
  z-index: 7;
}

.objects-map-pin.is-active:hover,
.objects-map-pin.is-active:focus-visible {
  --objects-pin-active-scale: 1.12;
  z-index: 8;
}

.objects-map-pin.is-hidden,
.objects-map-pin.is-cluster-hidden {
  opacity: 0;
  --objects-pin-active-scale: 0.72;
  pointer-events: none;
}

.objects-map-pin::before {
  width: 22px;
  height: 22px;
  background: currentColor;
  content: "";
  -webkit-mask: url("../images/logo-mask.svg") center / contain no-repeat;
  mask: url("../images/logo-mask.svg") center / contain no-repeat;
}

.objects-map-pin::after {
  position: absolute;
  right: -6px;
  top: -6px;
  display: none;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  place-items: center;
  border: 2px solid var(--color-white);
  border-radius: 999px;
  background: var(--color-ink);
  color: var(--color-white);
  content: attr(data-object-count);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.objects-map-pin[data-object-count]::after {
  display: grid;
}

.objects-map-pin.is-active::after {
  right: auto;
  top: auto;
  bottom: calc(100% + 10px);
  left: 50%;
  display: block;
  width: max-content;
  max-width: 220px;
  min-width: 0;
  height: auto;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--color-ink);
  color: var(--color-white);
  content: attr(data-object-label);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  transform: translateX(-50%);
  white-space: normal;
}

.objects-map-pin.is-active[data-object-count]::after {
  content: attr(data-object-label) " (" attr(data-object-count) ")";
}

.objects-map-pin[data-object-pin="hot-water"],
.objects-map-pin[data-object-type-normalized="hot-water"] {
  color: var(--color-blue);
}

.objects-map-pin[data-object-pin="steam"],
.objects-map-pin[data-object-type-normalized="steam"] {
  color: #21cd7d;
}

@media (max-width: 767px) {
  .objects-map-pin {
    width: 24px;
    height: 24px;
  }

  .objects-map-pin::before {
    width: 13px;
    height: 13px;
  }

  .objects-map-pin::after {
    right: -5px;
    top: -5px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-width: 1px;
    font-size: 9px;
  }

  .objects-map-pin.is-active::after {
    bottom: calc(100% + 7px);
    max-width: 160px;
    padding: 6px 9px;
    font-size: 10px;
  }
}

.pin-blue {
  color: var(--color-blue);
}

.pin-orange {
  color: #ed6300;
}

.pin-green {
  color: #21cd7d;
}

.number-marker {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-blue);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.pin-a {
  top: 51%;
  left: 32%;
}

.pin-b {
  top: 43%;
  left: 37%;
}

.pin-c {
  top: 49%;
  left: 40%;
}

.pin-d {
  top: 36%;
  left: 70%;
}

.pin-e {
  top: 31%;
  left: 75%;
}

.objects-hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  order: 2;
  width: min(448px, 100%);
  gap: 24px;
  margin: 0 auto;
  justify-items: center;
}

.objects-hero h1 {
  width: 100%;
  margin: 0;
  color: var(--color-white);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.objects-tabs {
  position: relative;
  width: fit-content;
  max-width: 100%;
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 2px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
  scrollbar-width: none;
}

.objects-tabs::before {
  position: absolute;
  z-index: 0;
  left: var(--objects-tab-marker-x, 0);
  top: var(--objects-tab-marker-y, 0);
  width: var(--objects-tab-marker-width, 100%);
  height: var(--objects-tab-marker-height, 38px);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  content: "";
  opacity: var(--objects-tab-marker-opacity, 0);
  transition:
    left 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
}

.objects-tabs::-webkit-scrollbar {
  display: none;
}

.objects-tabs button {
  position: relative;
  z-index: 1;
  width: auto;
  flex: 0 0 auto;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  transition: color 0.25s ease;
}

.objects-tabs button,
.objects-tabs button:not(.is-active),
.objects-tabs .is-active {
  background: transparent;
}

.objects-tabs .is-active {
  color: var(--color-black);
}

.objects-projects {
  width: min(390px, 100%);
  margin: 0 auto;
  padding: 70px var(--page-x);
  background: var(--color-white);
}

.objects-projects-head {
  display: grid;
  gap: 24px;
  margin-bottom: 32px;
}

.objects-projects-head h2 {
  margin: 0;
  color: var(--color-ink);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.4;
}

.objects-projects-head p {
  width: min(319px, 100%);
  margin: 0;
  color: var(--color-black);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}

.object-card {
  display: grid;
  gap: 0;
  margin-top: 20px;
}

.object-card.is-hidden,
.object-card.is-list-hidden {
  display: none;
}

.object-card:not(:has(.object-card-media)) .object-card-info {
  grid-column: 1 / -1;
  min-height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.object-card-media-gallery + .object-card-media-preview {
  display: none;
}

.objects-load-more {
  display: flex;
  width: fit-content;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin: 28px auto 0;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-blue);
  color: var(--color-white);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
}

.objects-load-more[hidden] {
  display: none;
}

.object-card-info,
.object-card-media {
  position: relative;
  overflow: hidden;
}

.object-card-info {
  display: flex;
  min-height: 388px;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  background: var(--color-surface);
}

.object-card-info h3,
.object-card-info h4 {
  margin: 0 0 24px;
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.object-card-info p {
  margin: 0;
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.object-card-location {
  margin-bottom: 12px;
  color: var(--color-blue);
  font-size: 14px;
  font-weight: 600;
}

.object-card-specs {
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.object-card-specs p,
.object-card-specs ul,
.object-card-specs ol {
  margin: 0;
}

.object-card-media {
  min-height: 366px;
  background: var(--color-blue);
}

.object-card-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.object-card-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.object-card-slider .swiper-wrapper,
.object-card-slider .swiper-slide {
  height: 100%;
}

.object-card-slider .swiper-slide {
  position: relative;
}

.object-card-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.object-card-actions {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  gap: 16px;
}

.object-card-nav {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 0;
  background: var(--color-white);
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    opacity 0.3s ease;
}

.object-card-nav:hover {
  background: rgba(255, 255, 255, 0.86);
}

.object-card-nav::before {
  width: 20px;
  height: 20px;
  background: var(--color-black);
  content: "";
  -webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
  mask: url("../icons/arrow-right.svg") center / contain no-repeat;
}

.object-card-nav-prev::before {
  transform: rotate(180deg);
}

.objects-cta {
  display: grid;
  min-height: 383px;
  place-items: center;
  padding: 70px var(--page-x);
  background: var(--color-blue);
  color: var(--color-white);
}

.objects-cta-inner {
  display: grid;
  width: min(366px, 100%);
  gap: 24px;
  justify-items: center;
  text-align: center;
}

.objects-cta h2 {
  width: min(341px, 100%);
  margin: 0;
  color: var(--color-white);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

.objects-cta p {
  width: min(308px, 100%);
  margin: 0 auto 48px;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}

.contacts-main {
  display: grid;
  width: min(390px, 100%);
  gap: 10px;
  margin: 0 auto;
  padding: 130px var(--page-x) 70px;
}

.contacts-main h1 {
  margin: 0 0 20px;
  color: var(--color-black);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

.contact-location {
  display: grid;
  gap: 10px;
}

.contacts-main [data-contacts-reveal-item] {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--contacts-reveal-delay, 0ms);
}

.contacts-main.is-contacts-reveal-pending [data-contacts-reveal-item] {
  opacity: 0;
  transform: translateY(34px);
}

.contact-card {
  position: relative;
  display: grid;
  min-height: 372px;
  align-content: space-between;
  padding: 24px;
  background: var(--color-surface);
}

.contact-card-content {
  display: grid;
  gap: 24px;
}

.contact-card h2 {
  width: min(253px, 100%);
  margin: 0;
  color: var(--color-ink);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
}

.contact-list {
  display: grid;
  gap: 16px;
  margin: 0;
}

.contact-list div {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
  column-gap: 24px;
}

.contact-list dt,
.contact-list dd {
  margin: 0;
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.contact-list dt {
  white-space: nowrap;
}

.contact-list dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

.contact-list a {
  color: var(--color-blue);
}

.contact-index {
  color: var(--color-ink);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
}

.contact-map {
  position: relative;
  min-height: 283px;
  overflow: hidden;
  background: var(--color-surface);
}

.contact-map img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.error-main,
.privacy-main {
  background: var(--color-white);
}

.error-main {
  display: grid;
  min-height: 849px;
  place-items: center;
  align-content: center;
  justify-items: center;
  gap: 22px;
  padding: 112px var(--page-x) 70px;
}

.error-main h1 {
  margin: 0;
  color: var(--color-black);
  font-size: clamp(96px, 32vw, 150px);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.privacy-main {
  display: grid;
  width: min(390px, 100%);
  gap: 40px;
  margin: 0 auto;
  padding: 130px var(--page-x) 70px;
}

.privacy-main h1 {
  margin: 0;
  color: var(--color-black);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.2;
}

.privacy-content {
  display: grid;
  gap: 24px;
}

.privacy-content p {
  margin: 0;
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.boilers-categories {
  width: min(390px, 100%);
  margin: 0 auto;
  padding: 112px var(--page-x) 70px;
  background: var(--color-white);
}

[data-boilers-reveal] :is(
  .boilers-breadcrumbs,
  .boiler-category-card,
  .category-breadcrumbs,
  .category-detail-copy,
  .category-product-media,
  .category-description,
  .category-features h2,
  .category-feature-card,
  .detail-features h2,
  .detail-feature-card,
  .category-device h2,
  .category-device-layout,
  .category-device-description,
  .category-cutaway h2,
  .category-cutaway-layout,
  .category-cutaway-controls,
  .category-models h2,
  .category-model-card,
  .category-cta-inner,
  .product-detail-breadcrumbs,
  .product-detail-copy,
  .product-detail-media,
  .product-detail-actions,
  .product-specs,
  .product-360-content,
  .product-picker-copy,
  .product-picker img
) {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--boilers-reveal-delay, 0ms);
}

[data-boilers-reveal].is-boilers-reveal-pending :is(
  .boilers-breadcrumbs,
  .boiler-category-card,
  .category-breadcrumbs,
  .category-detail-copy,
  .category-product-media,
  .category-description,
  .category-features h2,
  .category-feature-card,
  .detail-features h2,
  .detail-feature-card,
  .category-device h2,
  .category-device-layout,
  .category-device-description,
  .category-cutaway h2,
  .category-cutaway-layout,
  .category-cutaway-controls,
  .category-models h2,
  .category-model-card,
  .category-cta-inner,
  .product-detail-breadcrumbs,
  .product-detail-copy,
  .product-detail-media,
  .product-detail-actions,
  .product-specs,
  .product-360-content,
  .product-picker-copy,
  .product-picker img
) {
  opacity: 0;
  transform: translateY(36px);
}

.is-boilers-reveal-pending :is(.category-product-media, .product-detail-media, .product-picker img) {
  transform: translateY(36px) scale(0.97);
}

.boilers-breadcrumbs {
  color: var(--color-black);
}

.boilers-grid {
  display: grid;
  gap: 30px;
}

.boiler-category-card {
  display: grid;
  gap: 16px;
}

.boiler-category-media {
  position: relative;
  display: block;
  height: 399px;
  overflow: hidden;
  background: var(--color-surface);
}

.boiler-category-media img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 303px;
  max-width: none;
  transform: translate(-50%, -50%);
}

.boiler-category-media-wide img {
  width: 366px;
  height: 206px;
  object-fit: cover;
}

.boiler-category-media-empty {
  background: #f5f6f9;
}

.boiler-category-media-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.boiler-category-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
}

.boiler-category-meta h2,
.boiler-category-meta p,
.boiler-category-meta span {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.boiler-category-meta h2 {
  color: var(--color-ink);
}

.boiler-category-meta p {
  margin-top: 16px;
}

.boiler-category-meta p,
.boiler-category-meta span {
  color: var(--color-muted);
}

.category-detail-main {
  background: var(--color-white);
}

.category-detail-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 70px;
  padding-top: 112px;
}

.category-detail-hero,
.category-features,
.category-device,
.category-cutaway,
.category-models,
.category-cta {
  min-width: 0;
  width: min(390px, 100%);
  margin: 0 auto;
  padding-right: var(--page-x);
  padding-left: var(--page-x);
}

.category-models {
  contain: inline-size;
}

.category-detail-hero {
  display: grid;
  gap: 32px;
}

.category-breadcrumbs {
  width: 100%;
  margin: 0 0 38px;
  color: var(--color-black);
}

.category-detail-copy h1 {
  width: 100%;
  margin: 0 0 24px;
  color: var(--color-ink);
  font-size: 32px;
  text-align: left;
}

.category-detail-copy p {
  margin: 0;
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  padding-bottom: 18px;
}

.category-detail-copy ul {
  color: var(--color-muted);
  margin-top: 0;
}

.category-detail-copy ul li {
  padding-bottom: 10px;
}

.category-product-media,
.category-cutaway-media {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
}

.category-product-media {
  min-height: 399px;
}

.category-product-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.category-specs {
  display: grid;
  gap: 0;
  margin-top: 42px;
}

.category-features h2,
.category-device h2,
.category-cutaway h2,
.category-models h2 {
  margin: 0 0 24px;
  color: var(--color-ink);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.25;
}

.category-specs h2 {
  margin: 0 0 18px;
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.category-spec-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-black);
  font-size: 16px;
  line-height: 1.4;
}

.category-spec-row span:last-child {
  color: var(--color-muted);
}

.category-description {
  margin-top: 54px;
}

.category-description h2,
.category-description p {
  margin: 0;
}

.category-description h2 {
  color: var(--color-ink);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}

.category-description p {
  margin-top: 18px;
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.category-description p + p,
.category-feature-card p + p {
  margin-top: 14px;
}

.category-feature-grid {
  display: grid;
  gap: 16px;
}

.category-feature-card {
  display: grid;
  gap: 18px;
  padding: 24px;
  background: var(--color-surface);
}

.category-feature-card h3,
.category-feature-card p {
  margin: 0;
}

.category-feature-card h3 {
  color: var(--color-ink);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

.category-feature-card p,
.category-feature-card li {
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.category-feature-card a {
  color: var(--color-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.category-feature-card ol,
.category-feature-card ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 20px;
}

.category-feature-card ul {
  list-style: disc;
}

.product-detail-hero + .detail-features {
  margin: 0px auto 0;
}

.detail-features {
  min-width: 0;
  width: min(390px, 100%);
  margin: 70px auto 0;
  padding-right: var(--page-x);
  padding-left: var(--page-x);
}

.detail-features h2 {
  margin: 0 0 24px;
  color: var(--color-ink);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.25;
}

.detail-feature-card p + p {
  margin-top: 14px;
}

.detail-feature-grid {
  display: grid;
  gap: 16px;
}

.detail-feature-card {
  display: grid;
  gap: 18px;
  padding: 24px;
  background: var(--color-surface);
}

.detail-feature-card h3,
.detail-feature-card p {
  margin: 0;
}

.detail-feature-card h3 {
  color: var(--color-ink);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

.detail-feature-card p,
.detail-feature-card li {
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.detail-feature-card a {
  color: var(--color-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.detail-feature-card ol,
.detail-feature-card ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 20px;
}

.detail-feature-card ul {
  list-style: disc;
}

.category-feature-cta {
  align-content: start;
  align-self: start;
  min-height: 243px;
  background: var(--color-blue);
}

.category-feature-cta h3,
.category-feature-cta p {
  color: var(--color-white);
}

.category-feature-cta .button {
  width: max-content;
  margin-top: 4px;
  text-decoration: none;
}

.category-feature-cta a {
  color: var(--color-white);
}

.category-feature-cta a.button {
  color: var(--color-blue);
}

.category-device {
  display: grid;
  gap: 24px;
}

.category-device-layout {
  display: grid;
  gap: 20px;
}

.category-device-media {
  position: relative;
  align-self: center;
  width: 100%;
  aspect-ratio: 1012 / 569;
  min-height: 0;
  overflow: hidden;
  background: var(--color-white);
}

.category-device-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.device-marker {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 4px solid var(--color-white);
  border-radius: 50%;
  background: var(--color-blue);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(0, 91, 237, 0.2);
  transform: translate(-50%, -50%);
}

.device-marker-1 {
  top: 38%;
  left: 12%;
}

.device-marker-2 {
  top: 52%;
  left: 13%;
}

.device-marker-3 {
  top: 32%;
  left: 24%;
}

.device-marker-4 {
  top: 33%;
  left: 36%;
}

.device-marker-5 {
  top: 34%;
  left: 45%;
}

.device-marker-6 {
  top: 67%;
  left: 10%;
}

.device-marker-7 {
  top: 32%;
  left: 61%;
}

.category-device-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-device-list li {
  display: grid;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-line);
}

.category-device-list span,
.category-device-list p {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

.category-device-list span {
  color: var(--color-ink);
  font-weight: 600;
}

.category-device-list p {
  color: var(--color-muted);
  font-weight: 500;
}

.category-device-description {
  display: grid;
  gap: 18px;
  width: 100%;
}

.category-device-description p {
  margin: 0;
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.category-cutaway-media {
  aspect-ratio: 851 / 619;
  min-height: 0;
  background: var(--color-white);
}

.category-cutaway-layout {
  display: grid;
  gap: 16px;
}

.category-cutaway-media img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 112%;
  max-width: none;
  transform: translate(-50%, -50%);
}

.category-cutaway-note {
  margin: 0;
  color: var(--color-black);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.category-cutaway-controls {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.cutaway-slider-buttons {
  display: flex;
  gap: 16px;
}

.cutaway-slider-buttons button {
  position: relative;
  width: 50px;
  height: 50px;
  border: 0;
  background: var(--color-surface);
  color: var(--color-black);
  cursor: pointer;
}

.cutaway-slider-buttons button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  background: currentColor;
  content: "";
  -webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
  mask: url("../icons/arrow-right.svg") center / contain no-repeat;
  transform: translate(-50%, -50%) rotate(180deg);
}

.cutaway-slider-buttons button:last-child::before {
  transform: translate(-50%, -50%);
}

.category-marker {
  position: absolute;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--color-blue);
  cursor: pointer;
  padding: 0;
}

.category-marker::before {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-white);
  content: "";
}

.category-marker.is-active {
  width: 34px;
  height: 34px;
}

.category-marker.is-active::before {
  width: 16px;
  height: 16px;
}

.category-marker.is-cutaway-marker-hidden {
  display: none !important;
  pointer-events: none;
}

.category-cutaway-debug {
  position: absolute;
  z-index: 20;
  right: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  padding: 8px 10px;
  background: rgba(0, 20, 48, 0.82);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  pointer-events: none;
  white-space: nowrap;
}

.category-cutaway.is-cutaway-debug .category-marker {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}

.category-marker:nth-of-type(1) {
  top: 30%;
  left: 66%;
}

.category-marker:nth-of-type(2) {
  top: 45%;
  left: 56%;
}

.category-marker:nth-of-type(3) {
  top: 42%;
  left: 31%;
}

.category-marker:nth-of-type(4) {
  top: 73%;
  left: 38%;
}

.category-marker-firebox {
  top: 45%;
  left: 64%;
}

.category-marker-tubes {
  top: 44%;
  left: 55%;
}

.category-marker-insulation {
  top: 68%;
  left: 37%;
}

.category-marker-shell {
  top: 31%;
  left: 43%;
}

.category-cutaway-backdrop {
  position: fixed;
  z-index: 899;
  inset: 0;
  display: block;
  border: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.category-cutaway-panel {
  position: fixed;
  z-index: 900;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: calc(100dvh - 24px);
  min-height: 460px;
  overflow: auto;
  background: var(--color-surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}

.category-cutaway.is-cutaway-panel-open .category-cutaway-backdrop,
.category-cutaway.is-cutaway-panel-open .category-cutaway-panel {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  visibility: visible;
}

.category-cutaway-close {
  position: sticky;
  z-index: 901;
  top: 12px;
  right: 12px;
  justify-self: end;
  display: grid;
  width: 50px;
  height: 50px;
  margin: 12px 12px -62px auto;
  place-items: center;
  border: 0;
  background: var(--color-white);
  color: var(--color-black);
  cursor: pointer;
}

.category-cutaway-panel-media {
  position: relative;
  min-height: 220px;
  overflow: hidden;
}

.category-cutaway-panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 46%;
}

.category-cutaway-panel-copy {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 24px;
}

.category-cutaway-panel-copy h3,
.category-cutaway-panel-copy p {
  margin: 0;
}

.category-cutaway-panel-copy h3 {
  color: var(--color-ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.category-cutaway-panel-copy p {
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.category-cutaway-panel-content {
  min-width: 0;
  width: 100%;
}

.category-cutaway-panel-source {
  display: none;
}

.category-cutaway-panel-swiper {
  min-width: 0;
  width: 100%;
}

.category-cutaway-panel-slide {
  display: grid;
  min-height: 100%;
}

.category-cutaway-panel-slide-image .category-cutaway-panel-media {
  min-height: 360px;
}

.category-cutaway-panel-copy-caption {
  padding-top: 18px;
}

.category-cutaway-panel-pagination {
  position: static;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 24px 20px;
}

.category-cutaway-panel-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0;
  background: var(--color-muted);
  opacity: 0.35;
}

.category-cutaway-panel-pagination .swiper-pagination-bullet-active {
  background: var(--color-blue);
  opacity: 1;
}

.category-cutaway-panel-controls {
  align-self: end;
  padding: 0 24px 24px;
}

.category-cutaway-panel.is-cutaway-panel-single-slide .category-cutaway-panel-controls,
.category-cutaway-panel.is-cutaway-panel-single-slide .category-cutaway-panel-pagination {
  display: none;
}

.category-model-grid {
  display: grid;
  gap: 24px;
}

.category-model-grid[hidden],
.category-model-table-wrap[hidden] {
  display: none !important;
}

.category-models-head {
  display: grid;
  gap: 20px;
  align-items: end;
  margin-bottom: 32px;
}

.category-models .category-models-head h2 {
  margin-bottom: 0;
}

.category-model-view-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: max-content;
  padding: 4px;
  background: var(--color-surface);
}

.category-model-view-toggle button {
  min-width: 104px;
  border: 0;
  padding: 10px 16px;
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.category-model-view-toggle button.is-active {
  background: var(--color-blue);
  color: var(--color-white);
}

.category-model-card {
  display: grid;
  gap: 16px;
  --category-model-hover-duration: 0.55s;
  --category-model-hover-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.category-model-media {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 0;
  overflow: hidden;
  background: var(--color-surface);
}

.category-model-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.46) 100%);
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--category-model-hover-duration) var(--category-model-hover-ease);
}

.category-model-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.01);
  transition: transform var(--category-model-hover-duration) var(--category-model-hover-ease);
}

.category-model-chips {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.42s var(--category-model-hover-ease),
    transform 0.42s var(--category-model-hover-ease);
}

.category-model-chips .spec-chip {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-ink);
  backdrop-filter: blur(8px);
  font-size: 12px;
  min-height: 32px;
}

.category-model-card:hover .category-model-media::after,
.category-model-card:focus-visible .category-model-media::after {
  opacity: 0;
}

.category-model-card:hover .category-model-media img,
.category-model-card:focus-visible .category-model-media img {
  transform: scale(1);
}

.category-model-card:hover .category-model-chips,
.category-model-card:focus-visible .category-model-chips {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

.category-model-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
}

.category-model-meta h3,
.category-model-meta p,
.category-model-meta span {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.category-model-meta h3 {
  color: var(--color-ink);
}

.category-model-meta p {
  margin-top: 14px;
}

.category-model-meta p,
.category-model-meta span {
  color: var(--color-muted);
}

.category-model-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.category-model-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  color: var(--color-black);
  font-size: 15px;
  line-height: 1.4;
}

.category-model-table th,
.category-model-table td {
  border-bottom: 1px solid var(--color-border);
  padding: 18px 24px 18px 0;
  text-align: left;
  vertical-align: top;
}

.category-model-table thead th {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 500;
}

.category-model-table tbody th {
  min-width: 260px;
  font-weight: 500;
}

.category-model-table a {
  color: var(--color-ink);
}

.category-cta {
  display: grid;
  min-height: 384px;
  place-items: center;
  margin-bottom: 12px;
  padding-top: 70px;
  padding-bottom: 70px;
  background: var(--color-blue);
  color: var(--color-white);
  text-align: center;
}

.category-cta-inner {
  display: grid;
  width: min(340px, 100%);
  gap: 24px;
  justify-items: center;
}

.category-cta h2,
.category-cta p {
  margin: 0;
}

.category-cta h2 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}

.category-cta p {
  color: var(--color-white);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}

.product-detail-main {
  background: var(--color-white);
}

.product-detail-main {
  padding-top: 112px;
}

.product-detail-hero {
  display: grid;
  width: min(390px, 100%);
  margin: 0 auto;
  padding: 0 var(--page-x) 70px;
  gap: 32px;
}

.product-detail-breadcrumbs {
  width: 100%;
  margin: 0 0 10px;
  color: var(--color-black);
}

.product-detail-copy {
  display: grid;
  gap: 16px;
}

.product-detail-copy h1 {
  width: min(451px, 100%);
  margin: 0;
  color: var(--color-ink);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
}

.product-detail-copy p {
  margin: 0;
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

.product-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.product-detail-price {
  color: var(--color-blue);
}

.product-detail-media {
  position: relative;
  min-height: 399px;
  overflow: hidden;
  background: var(--color-surface);
}

.product-detail-media-swiper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.product-detail-media-swiper .swiper-wrapper,
.product-detail-media-swiper .swiper-slide {
  height: 100%;
}

.product-detail-media-swiper .swiper-slide {
  position: relative;
}

.product-detail-media-button {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.product-detail-media-swiper img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96%;
  max-width: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.product-detail-slider {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: flex;
  gap: 16px;
}

.product-detail-slider button {
  position: relative;
  width: 50px;
  height: 50px;
  border: 0;
  background: var(--color-white);
  color: var(--color-black);
  cursor: pointer;
}

.product-detail-slider button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  background: currentColor;
  content: "";
  -webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
  mask: url("../icons/arrow-right.svg") center / contain no-repeat;
  transform: translate(-50%, -50%) rotate(180deg);
}

.product-detail-slider button:last-child::before {
  transform: translate(-50%, -50%);
}

.product-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-specs {
  display: grid;
  gap: 24px;
}

.product-specs h2 {
  margin: 0;
  color: var(--color-black);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.product-specs-scroll {
  overflow-x: auto;
  padding-bottom: 8px;
}

.product-specs-table {
  width: max-content;
  min-width: 1380px;
  border-collapse: separate;
  border-spacing: 0 32px;
  color: var(--color-black);
  font-size: 14px;
  line-height: 1.4;
}

.product-specs-table th,
.product-specs-table td {
  width: 130px;
  padding: 0 42px 0 0;
  text-align: left;
  vertical-align: top;
}

.product-specs-table th {
  font-weight: 600;
}

.product-specs-table td {
  font-weight: 400;
}

.product-specs-table th:first-child,
.product-specs-table td:first-child {
  width: 104px;
}

.product-360 {
  position: relative;
  min-height: 557px;
  overflow: hidden;
  background: var(--color-white);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.product-360 :is(.product-360-image, .product-360-shade, .product-360-content) {
  touch-action: pan-y;
}

.product-360.is-product-360-dragging {
  cursor: grabbing;
}

.product-360-image {
  position: absolute;
  top: 0;
  left: 50%;
  width: 556px;
  max-width: none;
  height: 370px;
  object-fit: cover;
  transform: translateX(-50%);
  -webkit-user-drag: none;
  user-select: none;
}

.product-360-shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 370px;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.product-360-content {
  position: relative;
  z-index: 1;
  width: min(390px, 100%);
  min-height: 557px;
  margin: 0 auto;
  padding: 50px var(--page-x) 37px;
}

.product-360 h2 {
  width: min(807px, 100%);
  margin: 0;
  color: var(--color-white);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

.product-360-controls {
  position: absolute;
  left: var(--page-x);
  bottom: 37px;
  display: grid;
  width: min(256px, calc(100% - var(--page-x) * 2));
  gap: 26px;
}

.product-360-controls p {
  margin: 0;
  color: var(--color-black);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.product-related {
  margin-top: 70px;
}

.product-picker {
  position: relative;
  min-height: 600px;
  overflow: hidden;
  width: min(390px, 100%);
  margin: 70px auto 12px;
  padding: 40px var(--page-x);
  background: var(--color-blue);
  color: var(--color-white);
}

.product-picker-copy {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(331px, 100%);
  gap: 16px;
}

.product-picker h2,
.product-picker p {
  margin: 0;
}

.product-picker h2 {
  width: min(384px, 100%);
  color: var(--color-white);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}

.product-picker p {
  margin-top: 0;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

.product-picker .button {
  width: max-content;
  margin-top: 16px;
}

.product-picker img {
  position: absolute;
  top: 176px;
  left: -73px;
  width: 932px;
  max-width: none;
  height: auto;
}

.docs-modal[hidden] {
  display: none;
}

.docs-modal {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 12px;
}

.docs-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.docs-modal-panel {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 584px);
  gap: 24px;
  padding: 24px;
  background: var(--color-white);
  color: var(--color-black);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
}

.docs-modal-panel h2 {
  margin: 0;
  padding-right: 62px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.docs-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 0;
  background: var(--color-surface);
  color: var(--color-black);
  cursor: pointer;
}

.docs-grid {
  display: grid;
  gap: 8px;
}

.docs-document {
  display: grid;
  min-height: 66px;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 8px 16px 8px 8px;
  background: var(--color-surface);
}

.docs-document-icon {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  background: var(--color-blue);
  color: var(--color-white);
}

.docs-document strong,
.docs-document small {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

.docs-document strong {
  margin-bottom: 5px;
  color: var(--color-black);
}

.docs-document small {
  color: var(--color-blue);
}

.product-image-modal[hidden] {
  display: none;
}

.product-image-modal {
  position: fixed;
  z-index: 125;
  inset: 0;
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 12px;
}

.product-image-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.72);
  cursor: pointer;
}

.product-image-modal-panel {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 1180px);
  max-height: calc(100dvh - 24px);
  place-items: center;
  padding: clamp(54px, 5vw, 72px) clamp(12px, 3vw, 32px) clamp(16px, 3vw, 32px);
  background: var(--color-white);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.product-image-modal-panel img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(100dvh - 128px);
  object-fit: contain;
}

.product-image-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 0;
  background: var(--color-surface);
  color: var(--color-black);
  cursor: pointer;
}

.site-modal[hidden] {
  display: none;
}

.site-modal {
  position: fixed;
  z-index: 130;
  inset: 0;
  display: grid;
  height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  place-items: center;
  padding: 12px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  overscroll-behavior: contain;
  transition: opacity 0.22s ease;
  -webkit-overflow-scrolling: touch;
}

.site-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.site-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.46);
}

.site-modal-panel {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 620px);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  gap: 24px;
  padding: 24px;
  overflow-y: auto;
  background: var(--color-white);
  color: var(--color-black);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
  transform: translateY(18px);
  overscroll-behavior: contain;
  transition: transform 0.22s ease;
  -webkit-overflow-scrolling: touch;
}

.site-modal.is-open .site-modal-panel {
  transform: translateY(0);
}

.site-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 0;
  background: var(--color-surface);
  color: var(--color-black);
}

.modal-eyebrow,
.feedback-modal-copy h2,
.feedback-modal-copy p {
  margin: 0;
}

.modal-eyebrow {
  color: var(--color-blue);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.feedback-modal-copy {
  display: grid;
  gap: 12px;
  padding-right: 62px;
}

.feedback-modal-copy h2 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}

.feedback-modal-lead {
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.feedback-form, 
.feedback-form-fields {
  display: grid;
  gap: 14px;
}

.feedback-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.field {
  display: grid;
  gap: 8px;
}

.field span {
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 54px;
  padding: 15px 18px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 18px;
  background: var(--color-surface);
  color: var(--color-black);
  font-size: 16px;
  line-height: 1.5;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #9197a2;
}

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  border-color: rgba(0, 91, 237, 0.32);
}

.field-checkbox {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.field-checkbox input {
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 2px 0 0;
  padding: 0;
}

.consent-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.5;
}

.consent-row input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
}

.feedback-form-actions {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.feedback-submit {
  width: 100%;
}

.feedback-submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

.feedback-form-note,
.feedback-form-status {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.feedback-form-note {
  color: var(--color-muted);
}

.feedback-form-status {
  min-height: 21px;
  color: var(--color-muted);
}

.feedback-form-status[data-state="pending"] {
  color: var(--color-black);
}

.feedback-form-status[data-state="success"] {
  color: var(--color-blue);
}

.feedback-form-status[data-state="error"] {
  color: #b3261e;
}

.video-modal-panel {
  width: min(100%, 960px);
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--color-black);
}

.video-player-shell {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  background: var(--color-black);
}

.video-embed-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-embed-frame {
  position: absolute;
  inset: 0;
  background: var(--color-black);
}

@media (hover: hover) {
  .field input:hover,
  .field textarea:hover {
    border-color: rgba(0, 91, 237, 0.18);
  }
}

@media (max-width: 767px) {
  .site-modal {
    place-items: start center;
    padding: 10px;
  }

  .site-modal-panel {
    width: 100%;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    gap: 20px;
    padding: 20px 14px 14px;
  }

  .feedback-modal-copy {
    padding-right: 48px;
  }

  .feedback-modal-copy h2 {
    font-size: 24px;
  }

  .site-modal-close {
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
  }

  .feedback-form-actions {
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (min-width: 768px) {
  :root {
    --page-x: 30px;
  }

  .site-header {
    width: min(var(--container), calc(100% - 60px));
    min-height: 70px;
    justify-content: flex-start;
    gap: 70px;
    padding: 0 24px;
    border-radius: var(--radius-small);
    background: rgba(250, 250, 250, 0.92);
    backdrop-filter: blur(4px);
  }

  .brand-logo,
  .site-footer .brand-logo {
    width: 172px;
    height: 30.44px;
  }

  .site-header .brand-logo {
    color: #787878;
  }

  .header-nav {
    display: flex;
    align-items: center;
    gap: 40px;
    color: var(--color-black);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
  }

  .site-header .header-phone {
    display: flex;
    width: 169px;
    gap: 10px;
    margin-left: auto;
  }

  .site-header .header-phone .icon {
    display: block;
  }

  .site-header .menu-button {
    display: none;
  }

  .hero {
    min-height: 800px;
    padding: 192px 0 0;
    background: var(--color-white);
  }

  .hero-inner {
    min-height: 608px;
    color: var(--color-black);
  }

  .hero-lead {
    display: block;
    width: 452px;
    margin-bottom: 0;
  }

  .hero-word {
    display: inline-flex;
    width: fit-content;
    max-width: none;
    margin-top: -1px;
    color: var(--color-blue);
    font-size: 190px;
    line-height: 1.2;
  }

  .hero-boilers {
    top: 245px;
    width: clamp(623px, 32vw, 760px);
    height: auto;
    aspect-ratio: 623 / 403;
  }

  .boiler {
    width: 50.88%;
    height: auto;
    aspect-ratio: 317 / 403;
  }

  .boiler-b {
    left: 24.56%;
  }

  .boiler-c {
    left: 49.12%;
  }

  .catalog-section,
  .faq-section {
    width: min(var(--container), calc(100% - 60px));
    padding: 100px 0;
  }

  .made-section {
    width: min(var(--container), calc(100% - 60px));
    padding: 100px 0;
  }

  .section-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 40px;
    margin-bottom: 40px;
  }

  .section-heading h2 {
    font-size: 60px;
    line-height: 1.4;
  }

  .made-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 40px;
  }

  .made-head h2 {
    font-size: 60px;
    line-height: 1.4;
  }

  .made-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 20px;
    margin-top: 70px;
  }

  .made-card {
    gap: 24px;
  }

  .made-card-media {
    height: 591px;
  }

  .made-card-media img {
    width: 627px;
  }

  .made-card:nth-child(2) .made-card-media img {
    width: 574px;
  }

  .made-card-media-wide img {
    width: 680px;
    height: 382px;
  }

  .made-card-media-cover img {
    width: 100%;
    height: 100%;
  }

  .made-card-meta h3 {
    font-size: 32px;
  }

  .product-showcase {
    width: 100%;
    padding: 30px 0;
  }

  .product-panel {
    width: min(var(--container), calc(100% - 60px));
    height: 100%;
    min-height: min(924px, calc(100vh - 60px));
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "chips"
      "visual"
      "bottom";
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 25px;
    margin-bottom: 0;
    padding: 35px;
  }

  .product-copy {
    width: min(807px, 100%);
    margin: 0 auto;
    text-align: center;
  }

  .product-copy h2 {
    width: min(807px, 100%);
    font-size: 70px;
    line-height: 1.2;
    margin: 0 auto;
  }

  .product-copy p {
    width: min(560px, 100%);
    margin: 24px auto 0;
  }

  .chip-row {
    width: min(620px, 100%);
    margin: 0 auto;
    justify-content: center;
  }

  .product-bottom {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 40px;
    width: 100%;
    margin-top: -32px;
  }

  .split-section {
    width: min(var(--container), calc(100% - 60px));
    grid-template-columns: 734fr 686fr;
    align-items: stretch;
    gap: 20px;
    min-height: clamp(700px, 78svh, 800px);
    min-height: clamp(700px, 78vh, 800px);
    padding: 0 0 15vh;
    padding: 0 0 15svh;
  }

  .promo-text-panel {
    min-height: clamp(700px, 78svh, 800px);
    min-height: clamp(700px, 78vh, 800px);
    margin-bottom: 0;
    padding: 63px 70px 0;
  }

  .promo-blue-panel {
    min-height: clamp(700px, 78svh, 800px);
    min-height: clamp(700px, 78vh, 800px);
    margin-bottom: 0;
    padding: 119px 0 0;
  }

  .promo-copy h2,
  .promo-blue-panel h2 {
    font-size: 24px;
  }

  .promo-copy {
    width: 633px;
  }

  .promo-copy h2 {
    width: 385px;
  }

  .promo-boiler-side {
    top: auto;
    bottom: 0;
    left: 20px;
    width: 42.7vw;
  }

  .promo-blue-panel h2 {
    width: 350px;
  }

  .promo-boiler-front {
    bottom: 0px;
    top: inherit;
    left: 58px;
    width: 29.7vw;
  }

  .promo-blue-panel .button {
    top: inherit;
    bottom: 75px;
    left: 281px;
  }

  .precision-section {
    min-height: 800px;
    padding: 100px var(--page-x);
  }

  .precision-copy h2 {
    font-size: 70px;
  }

  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .faq-item {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
    gap: 64px;
    padding: 40px 0;
  }

  .story-slider,
  .story-stage {
    min-height: 0;
    height: auto;
  }

  .story-panel,
  .story-slide {
    min-height: 928px;
    padding: 100px var(--page-x);
  }

  .story-panel-content h2,
  .story-transition-copy h2,
  .story-slide-content h2 {
    font-size: 70px;
  }

  .question-section {
    min-height: 854px;
    padding: 100px var(--page-x);
    background: var(--color-white);
  }

  .question-inner {
    width: min(var(--container), 100%);
    gap: 50px;
  }

  .question-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
  }

  .question-head h2 {
    max-width: 1165px;
    font-size: 60px;
    line-height: 1.3;
  }

  .question-list {
    min-height: 448px;
  }

  .question-row h3 {
    font-size: 24px;
  }

  .company-video {
    min-height: 100vh;
    min-height: 100svh;
    padding: 0 var(--page-x);
  }

  .video-mark {
    width: 377px;
    height: 377px;
    margin-bottom: -214px;
    -webkit-mask-size: auto 377px;
    mask-size: auto 377px;
  }

  .footer-top,
  .site-footer nav,
  .footer-bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }

  .site-footer {
    display: grid;
    width: min(var(--container), calc(100% - 60px));
    min-height: 170px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "logo nav phone"
      "bottom bottom bottom";
    align-items: center;
    margin: 30px auto;
    padding: 35px 24px;
    border-top: 0;
  }

  .footer-top {
    display: contents;
  }

  .footer-top .brand-logo {
    grid-area: logo;
  }

  .footer-top .header-phone {
    grid-area: phone;
  }

  .footer-top .header-phone,
  .footer-bottom a {
    justify-self: end;
  }

  .site-footer nav {
    grid-area: nav;
    grid-template-columns: repeat(6, auto);
    justify-content: center;
    gap: 40px;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .footer-bottom {
    grid-area: bottom;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-top: 24px;
    border-top: 1px solid var(--color-line);
  }

  .breadcrumbs {
    width: 100%;
    margin: 0 0 5%;
  }

  .about-hero {
    min-height: 800px;
    padding: 122px var(--page-x) 0;
  }

  .about-hero-copy {
    width: min(var(--container), calc(100% - 60px));
  }

  .about-hero h1 {
    width: 473px;
    margin: 0 0 0;
    font-size: 80px;
  }

  .about-hero p {
    width: 583px;
    margin: 0px 10%;
  }

  .about-hero-media {
    top: 172px;
    right: calc((100vw - var(--container)) / 2 - 348px);
    bottom: auto;
    left: auto;
    width: 883px;
    height: 883px;
    transform: none;
  }

  .about-statement {
    min-height: 800px;
    padding: 100px var(--page-x);
  }

  .about-video {
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
    padding: 0 var(--page-x);
  }

  .about-statement-copy,
  .about-video-copy {
    width: min(1047px, 100%);
    gap: 24px;
  }

  .about-statement-copy h2,
  .about-video-copy h2 {
    font-size: 70px;
    line-height: 1.1;
  }

  .about-statement-copy h2 {
    width: min(807px, 100%);
    line-height: 1.2;
  }

  .about-statement-copy p,
  .about-video-copy p {
    width: 515px;
  }

  .about-values {
    width: min(var(--container), calc(100% - 60px));
    padding: 100px 0;
  }

  .about-value-card {
    min-height: 290px;
  }

  .about-tech {
    width: min(var(--container), calc(100% - 60px));
    padding: 50px 0 50px;
  }

  .about-tech-inner {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .about-tech h2,
  .about-numbers h2 {
    margin-bottom: 66px;
    font-size: 60px;
  }

  .about-tech-slides {
    gap: 40px;
  }

  .about-tech-grid {
    grid-template-columns: 567fr 803fr;
    gap: 20px;
  }

  .about-tech-card {
    min-height: 623px;
    padding: 24px;
  }

  .about-tech-card h3 {
    font-size: 24px;
  }

  .about-tech-media {
    height: 623px;
  }

  .about-numbers {
    width: min(var(--container), calc(100% - 60px));
    min-height: 800px;
    padding: 100px 0;
  }

  .about-numbers-inner {
    width: 100%;
  }

  .about-number-item {
    grid-template-columns: 135px minmax(0, 1fr);
    gap: 56px;
    min-height: 236px;
    padding-left: 113px;
  }

  .about-number-item strong {
    font-size: 120px;
  }

  .about-number-item p {
    margin-top: -18px;
  }

  .about-video-copy h2 {
    width: min(1047px, 100%);
  }

  .about-video-photo,
  .about-video-copy h2,
  .about-video-copy p {
    display: block;
  }

  .about-video-copy::before {
    display: none;
  }

  .about-video-copy .button-video {
    margin-top: 78px;
  }

  .objects-hero {
    min-height: 100vh;
    min-height: 100svh;
    padding: 122px var(--page-x) 100px;
  }

  body:has(.objects-hero) .site-header {
    padding: 0 24px;
    background: rgba(255, 255, 255, 0.94);
  }

  .objects-breadcrumbs {
    width: min(var(--container), calc(100% - 60px));
    margin: 0 auto 100px;
  }

  .objects-map {
    position: absolute;
    left: 50%;
    top: 204px;
    width: min(1440px, calc(100vw - 60px));
    margin: 0;
    transform: translateX(-50%);
  }

  .objects-map-pin {
    width: 54px;
    height: 54px;
  }

  .objects-map-controls {
    position: absolute;
    right: 24px;
    bottom: 24px;
  }

  .objects-map-pin::before {
    width: 28px;
    height: 28px;
  }

  .objects-hero-content {
    width: min(var(--container), calc(100% - 60px));
    justify-items: center;
    gap: 40px;
    padding-top: 0;
    text-align: center;
  }

  .objects-hero h1 {
    font-size: 70px;
  }

  .objects-tabs {
    width: fit-content;
    max-width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 2px;
    background: var(--color-blue-light);
    overflow: hidden;
  }

  .objects-tabs button {
    width: auto;
  }

  .objects-projects {
    width: min(1440px, 100%);
    padding: 100px 0;
  }

  .objects-projects-head {
    width: min(var(--container), calc(100% - 60px));
    grid-template-columns: 360px 583px;
    gap: 0 186px;
    margin: 0 auto 100px;
    align-items: end;
  }

  .objects-projects-head h2 {
    font-size: 80px;
  }

  .objects-projects-head p {
    width: 583px;
    padding-bottom: 24px;
  }

  .object-card {
    width: min(1440px, 100%);
    grid-template-columns: 734fr 686fr;
    gap: 20px;
    margin: 40px auto 0;
  }

  .object-card:first-of-type {
    margin-top: 0;
  }

  .object-card-reverse {
    grid-template-columns: 686fr 734fr;
  }

  .object-card-reverse .object-card-info {
    grid-column: 2;
    grid-row: 1;
  }

  .object-card-reverse .object-card-media {
    grid-column: 1;
    grid-row: 1;
  }

  .object-card:has(.object-card-media):nth-of-type(even) {
    grid-template-columns: 686fr 734fr;
  }

  .object-card:has(.object-card-media):nth-of-type(even) .object-card-info {
    grid-column: 2;
    grid-row: 1;
  }

  .object-card:has(.object-card-media):nth-of-type(even) .object-card-media {
    grid-column: 1;
    grid-row: 1;
  }

  .object-card-info,
  .object-card-media {
    min-height: 686px;
  }

  .object-card-info {
    padding: 63px 70px;
  }

  .object-card:not(:has(.object-card-media)) .object-card-info {
    min-height: 320px;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
    gap: 64px;
  }

  .object-card-info h3,
  .object-card-info h4 {
    font-size: 24px;
  }

  .objects-load-more {
    margin-top: 48px;
  }

  .object-card-actions {
    right: 136px;
    bottom: 66px;
  }

  .objects-cta {
    min-height: 454px;
    padding: 100px var(--page-x);
  }

  .objects-cta-inner {
    width: min(1043px, 100%);
    gap: 24px;
  }

  .objects-cta h2 {
    width: 1043px;
    font-size: 70px;
  }

  .objects-cta p {
    width: 583px;
  }

  .contacts-main {
    width: min(1390px, calc(100% - 60px));
    gap: 20px;
    padding: 122px 0 100px;
  }

  .contacts-main h1 {
    margin-bottom: 40px;
    font-size: 70px;
  }

  .contact-location {
    grid-template-columns: 567px minmax(0, 803px);
    gap: 20px;
  }

  .contact-card {
    min-height: 623px;
  }

  .contact-card h2 {
    width: min(422px, 100%);
  }

  .contact-list div {
    grid-template-columns: 127px minmax(0, 1fr);
    gap: 0;
  }

  .contact-map {
    min-height: 623px;
  }

  .error-main {
    min-height: 849px;
    padding-top: 122px;
  }

  .error-main h1 {
    font-size: 150px;
  }

  .privacy-main {
    width: min(1375px, calc(100% - 60px));
    gap: 70px;
    padding: 150px 0 68px;
  }

  .privacy-main h1 {
    font-size: 70px;
  }

  .boilers-categories {
    width: min(var(--container), calc(100% - 60px));
    padding: 122px 0 100px;
  }

  .boilers-breadcrumbs {
    width: 100%;
    margin: 0 0 100px;
  }

  .boilers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 20px;
  }

  .boiler-category-card {
    gap: 24px;
  }

  .boiler-category-media {
    height: 591px;
  }

  .boiler-category-media img {
    width: 627px;
  }

  .boiler-category-card:nth-child(2) .boiler-category-media img {
    width: 574px;
  }

  .boiler-category-media-wide img {
    width: 680px;
    height: 382px;
  }

  .boiler-category-media-cover img {
    width: 100%;
    height: 100%;
  }

  .boiler-category-meta h2 {
    font-size: 32px;
  }

  .category-detail-main {
    gap: 100px;
    padding-top: 122px;
  }

  .category-detail-hero,
  .category-features,
  .detail-features,
  .category-device,
  .category-cutaway,
  .category-models {
    width: min(var(--container), calc(100% - 60px));
    padding-right: 0;
    padding-left: 0;
  }

  .detail-features {
    margin-top: 100px;
  }

  .category-detail-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 680px);
    gap: 20px;
    align-items: start;
  }

  .category-breadcrumbs {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .category-detail-copy {
    padding-top: 60px;
  }

  .category-detail-copy h1 {
    font-size: 32px;
  }

  .category-detail-copy p {
    width: min(560px, 100%);
  }

  .category-product-media {
    min-height: 591px;
  }

  .category-actions {
    gap: 16px;
  }

  .category-specs {
    width: min(560px, 100%);
    margin-top: 70px;
  }

  .category-features h2,
  .detail-features h2,
  .category-device h2,
  .category-cutaway h2,
  .category-models h2 {
    margin-bottom: 40px;
    font-size: 70px;
  }

  .category-models-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .category-specs h2 {
    margin-bottom: 18px;
    font-size: 16px;
  }

  .category-description {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 70px;
  }

  .category-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
  }

  .detail-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
  }

  .category-feature-card {
    min-height: 430px;
    padding: 40px;
  }

  .detail-feature-card {
    padding: 40px;
  }

  .category-feature-card h3 {
    font-size: 32px;
  }

  .detail-feature-card h3 {
    font-size: 32px;
  }

  .category-feature-card:first-child {
    grid-row: span 2;
  }

  .detail-feature-card:first-child {
    grid-row: span 2;
  }

  .category-feature-card:nth-child(2) {
    min-height: auto;
  }

  .detail-feature-card:nth-child(2) {
    min-height: auto;
  }

  .category-feature-cta {
    min-height: 243px;
  }

  .category-device-layout {
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
  }

  .category-device-media {
    grid-column: 2;
    grid-row: 1 / span 2;
    order: 2;
  }

  .category-device-list {
    grid-column: 1;
    order: 1;
    align-self: stretch;
    padding: 18px 0;
  }

  .category-device-list-right {
    grid-row: 2;
    order: 3;
  }

  .device-marker {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .category-cutaway-media {
    min-height: 619px;
  }

  .category-cutaway-media img {
    width: 1078px;
  }

  .category-cutaway-layout {
    grid-template-columns: minmax(0, 851px) 509px;
    gap: 20px;
    align-items: stretch;
  }

  .category-cutaway-backdrop {
    display: none;
  }

  .category-cutaway-panel {
    position: relative;
    z-index: 1;
    inset: auto;
    max-height: none;
    min-height: 619px;
    overflow: hidden;
    box-shadow: none;
    transform: translateX(24px);
  }

  .category-cutaway-panel-media {
    min-height: 248px;
  }

  .category-cutaway-close {
    display: none;
  }

  .category-cutaway-panel-copy {
    padding: 24px;
  }

  .category-cutaway-panel-controls {
    padding: 0 24px 24px;
  }

  .category-cutaway-controls {
    grid-template-columns: auto minmax(0, 255px);
    gap: 26px;
    align-items: center;
    width: max-content;
    margin-top: 22px;
  }

  .category-marker {
    width: 18px;
    height: 18px;
  }

  .category-marker.is-active {
    width: 34px;
    height: 34px;
  }

  .category-model-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .category-model-media {
    min-height: 430px;
  }

  .category-model-meta h3 {
    font-size: 16px;
  }

  .category-cta {
    width: min(var(--container), calc(100% - 60px));
    min-height: 454px;
    margin-bottom: 12px;
  }

  .category-cta-inner {
    width: min(840px, 100%);
  }

  .category-cta h2 {
    font-size: 70px;
  }

  .product-detail-main {
    padding-top: 122px;
  }

  .product-detail-hero {
    width: min(var(--container), calc(100% - 60px));
    grid-template-columns: minmax(0, 454px) minmax(0, 680px);
    gap: 20px 246px;
    padding: 0 0 100px;
    align-items: start;
  }

  .product-detail-breadcrumbs,
  .product-specs {
    grid-column: 1 / -1;
  }

  .product-detail-copy {
    min-height: 366px;
    align-content: start;
  }

  .product-detail-media {
    grid-column: 2;
    grid-row: 2 / span 2;
    min-height: 591px;
  }

  .product-detail-actions {
    align-self: end;
  }

  .product-detail-slider {
    right: 14px;
    bottom: 60px;
  }

  .product-specs {
    margin-top: 28px;
  }

  .product-360 {
    min-height: 861px;
  }

  .product-360-image {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
  }

  .product-360-shade {
    inset: 0;
    width: auto;
    height: auto;
  }

  .product-360-content {
    width: min(var(--container), calc(100% - 60px));
    min-height: 861px;
    padding: 90px 0 30px;
  }

  .product-360 h2 {
    width: auto;
    max-width: 807px;
    font-size: clamp(40px, 5vw, 70px);
  }

  .product-360-controls {
    left: 0;
    bottom: 30px;
    display: flex;
    width: 397px;
    align-items: center;
    gap: 26px;
  }

  .product-360-controls p {
    color: var(--color-white);
  }

  .product-360 .cutaway-slider-buttons button {
    background: var(--color-white);
  }

  .product-related {
    margin-top: 100px;
  }

  .product-picker {
    width: min(var(--container), calc(100% - 60px));
    min-height: 318px;
    margin-top: 100px;
    padding: 40px;
  }

  .product-picker-copy {
    width: 454px;
  }

  .product-picker h2 {
    font-size: 32px;
  }

  .product-picker img {
    top: -77px;
    left: 595px;
  }

  .docs-grid {
    grid-template-columns: repeat(2, minmax(0, 260px));
  }
}

/* Adaptive system layer: keeps desktop geometry from leaking into tablet widths. */
body,
button,
input,
textarea,
select {
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  .site-header {
    display: flex;
    justify-content: flex-start;
    right: auto;
    left: 50%;
    width: min(366px, calc(100% - 24px));
    align-items: center;
    gap: 12px;
    transform: translateX(-50%);
  }

  .site-header .brand-logo {
    position: static;
    min-width: 0;
    margin-right: auto;
    transform: none;
  }

  .site-header .header-phone {
    position: static;
    width: 40px;
    min-width: 40px;
    height: 40px;
    justify-content: center;
    font-size: 15px;
  }

  .site-header .menu-button {
    position: static;
    display: inline-grid;
    flex: 0 0 40px;
  }

  .site-header .menu-button .icon-menu {
    display: block;
  }

  .site-header .menu-button::before {
    content: none;
  }

  .site-header .header-phone .icon {
    display: block;
  }

  .site-header .header-phone span:last-child {
    display: none;
  }

  .hero-lead {
    width: min(311px, calc(100% - 32px));
  }

  .hero-word {
    width: fit-content;
    max-width: none;
    font-size: clamp(44px, 12.4vw, 48px);
    line-height: 1.12;
  }
}

@media (max-height: 699px) {
  .product-image,
  .product-bottom {
    position: relative;
  }

  .product-image {
    top: auto;
    left: auto;
    transform: none;
  }

  .product-bottom {
    bottom: auto;
  }
}

@media (max-width: 420px) {
  .site-header .header-phone {
    display: none;
  }
}

@media (min-width: 768px) {
  :root {
    --page-x: clamp(20px, 3.6vw, 30px);
  }

  h1,
  .section-heading h2,
  .made-head h2,
  .precision-copy h2,
  .story-panel-content h2,
  .story-transition-copy h2,
  .story-slide-content h2,
  .question-head h2,
  .about-hero h1,
  .about-statement-copy h2,
  .about-video-copy h2,
  .objects-hero h1,
  .objects-projects-head h2,
  .objects-cta h2,
  .contacts-main h1,
  .privacy-main h1,
  .category-features h2,
  .detail-features h2,
  .category-device h2,
  .category-cutaway h2,
  .category-models h2,
  .category-cta h2 {
    font-size: var(--title-lg);
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --container: 1180px;
  }

  .site-header {
    width: min(var(--container), calc(100% - var(--page-x) * 2));
    gap: clamp(20px, 3.5vw, 48px);
    padding: 0 clamp(16px, 2vw, 24px);
  }

  .header-nav {
    gap: clamp(18px, 2.6vw, 32px);
    font-size: 15px;
  }

  .site-header .header-phone {
    width: auto;
    min-width: max-content;
    font-size: 15px;
  }

  .made-section,
  .catalog-section,
  .faq-section,
  .about-values,
  .about-tech,
  .about-numbers,
  .objects-breadcrumbs,
  .objects-hero-content,
  .objects-projects-head,
  .boilers-categories,
  .category-detail-hero,
  .category-features,
  .detail-features,
  .category-device,
  .category-cutaway,
  .category-models,
  .category-cta,
  .product-detail-hero,
  .product-360-content,
  .product-picker,
  .site-footer {
    width: min(var(--container), calc(100% - var(--page-x) * 2));
  }

  .hero {
    min-height: clamp(680px, 84vw, 800px);
    padding-top: clamp(150px, 18vw, 192px);
  }

  .hero-inner {
    min-height: clamp(520px, 66vw, 608px);
  }

  .hero-lead {
    width: min(452px, 72vw);
  }

  .hero-word {
    width: fit-content;
    max-width: none;
    font-size: clamp(104px, 15.2vw, 170px);
  }

  .hero-boilers {
    top: clamp(260px, 34vw, 310px);
    width: min(70vw, 623px);
    height: auto;
    aspect-ratio: 623 / 403;
  }

  .boiler {
    width: 50.88%;
    height: auto;
    aspect-ratio: 317 / 403;
  }

  .boiler-b {
    left: 24.56%;
  }

  .boiler-c {
    left: 49.12%;
  }

  .made-section,
  .catalog-section,
  .faq-section,
  .about-values,
  .about-tech,
  .about-numbers,
  .objects-projects,
  .product-detail-hero {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
  }

  .boilers-categories,
  .category-detail-main {
    padding-top: clamp(122px, 13vw, 150px);
    padding-bottom: var(--section-y);
  }

  .made-grid,
  .catalog-grid,
  .boilers-grid,
  .category-feature-grid,
  .detail-feature-grid,
  .category-model-grid {
    gap: var(--grid-gap) 20px;
  }

  .made-card-media,
  .boiler-category-media {
    height: auto;
    aspect-ratio: 1.16 / 1;
  }

  .made-card-media img,
  .boiler-category-media img {
    width: min(88%, 627px);
  }

  .made-card-media-wide img,
  .boiler-category-media-wide img {
    width: min(92%, 680px);
    height: auto;
    aspect-ratio: 680 / 382;
  }

  .product-copy,
  .product-copy h2,
  .product-copy p {
    width: min(807px, 100%);
  }

  .product-copy h2 {
    font-size: var(--title-lg);
  }

  .chip-row {
    position: relative;
    top: auto;
    left: auto;
    width: min(620px, 100%);
    margin: 0 auto;
    justify-content: center;
  }

  .product-bottom {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .split-section {
    width: min(var(--container), calc(100% - var(--page-x) * 2));
    gap: 20px;
    min-height: clamp(700px, 80svh, 760px);
    min-height: clamp(700px, 80vh, 760px);
    padding-bottom: 15vh;
    padding-bottom: 15svh;
  }

  .promo-text-panel,
  .promo-blue-panel {
    min-height: clamp(700px, 80svh, 760px);
    min-height: clamp(700px, 80vh, 760px);
  }

  .promo-copy,
  .promo-copy h2,
  .promo-copy p,
  .promo-blue-panel h2 {
    width: min(100%, 560px);
  }

  .promo-boiler-side {
    top: auto;
    bottom: 0;
    left: 50%;
    width: 39.6vw;
    transform: translateX(-50%);
  }

  .promo-boiler-front {
    left: 50%;
    width: 29.7vw;
    transform: translateX(-50%);
  }

  .promo-blue-panel .button {
    right: clamp(24px, 5vw, 70px);
    left: auto;
  }

  .precision-section,
  .story-panel,
  .story-slide,
  .question-section,
  .company-video,
  .about-statement,
  .objects-cta,
  .product-360 {
    min-height: clamp(680px, 76vw, 820px);
    padding: var(--section-y) var(--page-x);
  }

  .about-video {
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
    padding: 0 var(--page-x);
  }

  .objects-hero {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: clamp(122px, 13vw, 150px);
  }

  .story-panel {
    min-height: clamp(720px, 82vw, 900px);
  }

  .story-slide {
    min-height: clamp(720px, 82vw, 900px);
  }

  .question-list {
    min-height: auto;
  }

  .about-hero {
    min-height: clamp(680px, 78vw, 800px);
    padding: clamp(112px, 13vw, 122px) var(--page-x) var(--section-y-compact);
  }

  .about-hero-copy,
  .about-hero h1,
  .about-hero p {
    width: min(var(--container), 100%);
  }

  .about-hero p {
    max-width: 583px;
    margin-left: clamp(0px, 14vw, 186px);
  }

  .about-hero-media {
    top: clamp(180px, 22vw, 240px);
    right: max(-22vw, -260px);
    width: clamp(520px, 66vw, 760px);
    height: auto;
    aspect-ratio: 1;
  }

  .about-statement-copy p,
  .about-video-copy p,
  .objects-projects-head p,
  .objects-cta p {
    width: min(583px, 100%);
  }

  .about-tech-card,
  .about-tech-media,
  .object-card-info,
  .object-card-media,
  .contact-card,
  .contact-map,
  .category-product-media,
  .category-cutaway-media,
  .category-model-media,
  .product-detail-media {
    min-height: clamp(420px, 48vw, 590px);
  }

  .about-number-item {
    min-height: clamp(180px, 22vw, 236px);
    padding-left: clamp(40px, 8vw, 113px);
  }

  .about-number-item strong {
    font-size: clamp(76px, 10vw, 120px);
  }

  .objects-map {
    top: clamp(190px, 22vw, 230px);
    width: min(1440px, calc(100vw - 60px));
  }

  .objects-projects-head {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(40px, 8vw, 120px);
  }

  .object-card {
    width: min(var(--container), calc(100% - var(--page-x) * 2));
  }

  .object-card-actions {
    right: clamp(24px, 5vw, 70px);
    bottom: clamp(24px, 5vw, 60px);
  }

  .contacts-main {
    width: min(var(--container), calc(100% - var(--page-x) * 2));
    padding-top: clamp(112px, 13vw, 122px);
  }

  .contact-location {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  }

  .category-detail-main {
    gap: var(--section-y);
  }

  .category-detail-hero {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }

  .category-detail-copy h1,
  .product-detail-copy h1 {
    font-size: clamp(32px, 4vw, 48px);
  }

  .category-cutaway-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .category-cutaway-panel {
    transform: none;
  }

  .category-cutaway-media img {
    width: min(1078px, 120%);
  }

  .product-detail-hero {
    gap: 40px;
  }

  .product-specs-table {
    min-width: 960px;
  }

  .product-360-content {
    min-height: clamp(680px, 76vw, 820px);
  }

  .product-360-controls {
    width: min(397px, 100%);
  }

  .product-picker img {
    top: 50%;
    left: auto;
    right: clamp(-160px, -8vw, -60px);
    width: min(58vw, 520px);
    transform: translateY(-50%);
  }
}

@media (min-width: 1900px) and (min-height: 900px) {
  .product-360 {
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: 0;
    padding-bottom: 0;
  }

  .product-360-content {
    min-height: 100vh;
    min-height: 100svh;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .site-header {
    min-height: 64px;
    justify-content: space-between;
    gap: 16px;
  }

  .header-nav {
    display: none;
  }

  .brand-logo,
  .site-footer .brand-logo {
    width: 148px;
    height: auto;
    aspect-ratio: 172 / 30.44;
  }

  .site-header .header-phone {
    min-width: max-content;
  }

  .site-header .header-phone span:last-child {
    display: inline;
  }

  .site-header .menu-button {
    display: inline-grid;
  }

  .made-grid,
  .boilers-grid,
  .catalog-grid,
  .about-values,
  .category-model-grid,
  .docs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .question-head,
  .footer-bottom,
  .objects-projects-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .split-section,
  .about-tech-grid,
  .object-card,
  .object-card-reverse,
  .contact-location,
  .category-detail-hero,
  .category-device-layout,
  .product-detail-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .object-card-reverse .object-card-info,
  .object-card-reverse .object-card-media,
  .product-detail-media {
    grid-column: auto;
    grid-row: auto;
  }

  .promo-text-panel,
  .promo-blue-panel {
    min-height: 640px;
  }

  .site-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "logo phone"
      "nav nav"
      "bottom bottom";
    gap: 24px;
  }

  .site-footer nav {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
  }

  .about-hero-media {
    opacity: 0.42;
  }

  .about-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-number-item {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 28px;
    padding-left: 40px;
  }

  .objects-tabs {
    width: fit-content;
    max-width: 100%;
  }

  .object-card-info,
  .object-card-media,
  .contact-card,
  .contact-map {
    min-height: 480px;
  }

  .object-card:not(:has(.object-card-media)) .object-card-info {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .category-feature-card:first-child {
    grid-row: auto;
  }

  .detail-feature-card:first-child {
    grid-row: auto;
  }

  .category-device-media,
  .category-device-list {
    order: initial;
  }

  .product-detail-actions {
    align-self: start;
  }

  .product-picker {
    overflow: hidden;
  }

  .product-picker-copy {
    width: min(454px, 62%);
  }
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .category-feature-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-feature-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .category-feature-card {
    min-height: auto;
  }

  .detail-feature-card {
    min-height: auto;
  }

  .category-feature-card:first-child {
    grid-row: auto;
  }

  .detail-feature-card:first-child {
    grid-row: auto;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .category-model-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-detail-hero {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .product-detail-breadcrumbs,
  .product-specs {
    grid-column: 1 / -1;
  }

  .product-detail-media {
    grid-column: 2;
    grid-row: 2 / span 2;
  }
}

@media (min-width: 1280px) {
  :root {
    --container: 1380px;
    --page-x: 30px;
  }
}

@media (min-width: 1440px) and (min-height: 860px) {
  .hero {
    min-height: 100svh;
    padding-top: clamp(210px, 18svh, 238px);
  }

  .hero-inner {
    min-height: calc(100svh - clamp(210px, 18svh, 238px));
  }

  .hero-lead {
    margin-bottom: clamp(8px, 1.4svh, 18px);
  }

  .hero-word {
    font-size: clamp(190px, 10.7vw, 220px);
    line-height: 1.08;
  }

  .hero-boilers {
    top: clamp(292px, 30svh, 340px);
    width: clamp(680px, 38vw, 840px);
  }
}

@media (min-width: 1200px) and (max-height: 799px) {
  main:has(> .hero-sequence) .story-slider {
    min-height: 520vh;
  }

  main:has(> .hero-sequence) .promo-boiler-side,
  main:has(> .hero-sequence) .promo-boiler-front {
    width: 47vw;
  }

  .category-device-list-left {
    padding-bottom: 0;
  }

  .category-device-list-right {
    padding-top: 0;
  }
}

@media (min-width: 1200px) and (min-height: 800px) {
  .category-device-layout {
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) minmax(220px, 300px);
    align-items: center;
  }

  .category-device-media {
    grid-column: 2;
    grid-row: 1;
    order: 2;
  }

  .category-device-list {
    align-self: center;
  }

  .category-device-list-left {
    grid-column: 1;
    grid-row: 1;
    order: 1;
  }

  .category-device-list-right {
    grid-column: 3;
    grid-row: 1;
    order: 3;
  }
}

@media (min-width: 1200px) {
  .about-hero,
  .about-values,
  .about-tech,
  .about-video {
    min-height: 100vh;
    min-height: 100svh;
    height: 100vh;
    height: 100svh;
  }

  .about-hero-copy {
    position: relative;
    display: flex;
    width: max(50vw, min(var(--container), calc(100% - 60px)));
    height: min(100svh, 960px);
    flex-direction: column;
    justify-content: center;
  }

  .about-hero .breadcrumbs {
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 0;
  }

  .about-hero h1 {
    width: min(620px, 100%);
    margin-bottom: 18px;
  }

  .about-hero p {
    width: min(520px, 100%);
    max-width: 520px;
    margin-left: clamp(120px, 10vw, 186px);
  }

  .about-values {
    display: grid;
    width: 100%;
    padding: 0 var(--page-x);
    place-items: center;
  }

  .about-values-inner {
    width: min(var(--container), calc(100% - 60px));
    height: min(100svh, 984px);
    max-height: 984px;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .about-values-row {
    min-height: 0;
  }

  .about-tech {
    display: grid;
    width: 100%;
    padding: 0 var(--page-x);
    place-items: center;
  }

  .about-tech-inner {
    min-width: 0;
    width: min(var(--container), calc(100% - 60px));
    height: min(100svh, 984px);
    max-height: 984px;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .about-tech-slides {
    display: grid;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
  }

  .about-tech-slides .swiper-wrapper,
  .about-tech-slides .swiper-slide,
  .about-tech-grid {
    min-width: 0;
    max-width: 100%;
    height: 100%;
  }

  .about-tech-slides .swiper-slide {
    width: 100% !important;
  }

  .about-tech-grid {
    grid-template-columns: minmax(0, 567fr) minmax(0, 803fr);
  }

  .about-tech-card,
  .about-tech-media {
    min-height: 0;
    height: 100%;
  }

  .about-numbers {
    display: grid;
    width: 100%;
    min-height: 118vh;
    min-height: 118svh;
    height: 118vh;
    height: 118svh;
    padding: 0 var(--page-x);
    place-items: center;
  }

  .about-numbers-inner {
    width: min(var(--container), calc(100% - 60px));
    height: min(100svh, 984px);
    max-height: 984px;
    display: grid;
    align-content: center;
  }
}

@media (min-width: 1200px) and (min-height: 800px) and (max-width: 1999px) {
  .about-values-inner {
    height: min(100svh, 800px);
    max-height: 800px;
  }
}

@media (min-width: 1200px) and (max-height: 799px) {
  .about-hero,
  .about-values,
  .about-tech,
  .about-video {
    height: auto;
    padding-block: 50px;
  }

  .about-hero-copy {
    height: auto;
    min-height: calc(100svh - 100px);
  }

  .about-values,
  .about-tech,
  .about-numbers {
    padding-right: var(--page-x);
    padding-left: var(--page-x);
  }

  .about-values {
    padding-top: 0;
    padding-bottom: 0;
  }

  .about-values-inner,
  .about-tech-inner,
  .about-numbers-inner {
    height: auto;
    max-height: none;
  }

  .about-values-inner {
    grid-template-rows: repeat(2, 260px);
  }

  .about-value-card {
    min-height: 260px;
  }

  .about-tech-inner {
    min-height: calc(100svh - 100px);
  }

  .about-tech h2,
  .about-numbers h2 {
    margin-bottom: 24px;
  }

  .about-tech-card,
  .about-tech-media {
    min-height: 0;
    height: 100%;
  }

  .about-numbers {
    height: auto;
    padding-block: 50px;
  }

  .about-numbers-inner {
    min-height: calc(100svh - 100px);
  }

  .about-number-item {
    min-height: 150px;
  }

  .about-number-item strong {
    font-size: 76px;
  }
}

@media (min-width: 1200px) and (min-height: 800px) {
  main:has(> .hero-sequence) > .hero-sequence,
  main:has(> .hero-sequence) .hero-sequence-stage,
  main:has(> .hero-sequence) .hero,
  main:has(> .hero-sequence) .made-section,
  main:has(> .hero-sequence) .product-preview-sticky,
  main:has(> .hero-sequence) .product-showcase-preview,
  main:has(> .hero-sequence) .split-preview-sticky,
  main:has(> .hero-sequence) .split-section,
  main:has(> .hero-sequence) .story-slider,
  main:has(> .hero-sequence) .story-swiper,
  main:has(> .hero-sequence) .story-panel,
  main:has(> .hero-sequence) .question-section,
  main:has(> .hero-sequence) .company-video {
    min-height: 100vh;
    min-height: 100svh;
  }

  main:has(> .hero-sequence) .product-showcase-preview,
  main:has(> .hero-sequence) .story-swiper {
    height: 100vh;
    height: 100svh;
  }

  main:has(> .hero-sequence) .story-slider {
    min-height: 380vh;
  }

  main:has(> .hero-sequence) .story-transition-stage {
    height: 100vh;
    height: 100svh;
  }

  main:has(> .hero-sequence) .product-panel {
    min-height: calc(100svh - 60px);
  }

  main:has(> .hero-sequence) .split-section {
    align-items: stretch;
    padding-bottom: clamp(80px, 10svh, 140px);
  }

  main:has(> .hero-sequence) .promo-text-panel,
  main:has(> .hero-sequence) .promo-blue-panel {
    min-height: calc(100svh - clamp(80px, 10svh, 140px));
  }

  main:has(> .hero-sequence) .promo-boiler-side,
  main:has(> .hero-sequence) .promo-boiler-front {
    width: auto;
  }

  main:has(> .hero-sequence) .question-inner {
    align-self: center;
  }
}

@media (min-width: 2000px) and (min-height: 1000px) {
  :root {
    --container: 1440px;
  }

  .objects-hero {
    height: 100vh;
    height: 100svh;
    min-height: 0;
  }

  .objects-map {
    top: 50%;
    width: 1440px;
    transform: translate(-50%, -50%);
  }

  .about-hero {
    padding-top: clamp(170px, 13svh, 198px);
  }

  .about-hero-copy {
    height: 960px;
  }

  main:has(> .hero-sequence) .split-section {
    height: 920px;
    min-height: 0;
    max-height: 920px;
    padding: 0;
  }

  main:has(> .hero-sequence) .promo-text-panel,
  main:has(> .hero-sequence) .promo-blue-panel {
    min-height: 920px;
  }

  main:has(> .hero-sequence) .promo-boiler-side,
  main:has(> .hero-sequence) .promo-boiler-front {
    width: auto;
  }

  main:has(> .hero-sequence) .product-preview-sticky {
    align-items: center;
  }

  main:has(> .hero-sequence) .product-showcase-preview {
    display: grid;
    align-items: center;
    padding: 0;
  }

  main:has(> .hero-sequence) .product-panel {
    height: 984px;
    min-height: 0;
    max-height: 984px;
  }
}

@media (min-width: 768px) {
  .site-header .header-nav {
    gap: clamp(16px, 1.7vw, 30px);
    font-size: clamp(14px, 1.35vw, 16px);
  }

  .promo-blue-panel h2 {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .promo-blue-panel .button {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .site-footer nav {
    grid-template-columns: repeat(6, auto);
    gap: clamp(18px, 2.2vw, 40px);
    font-size: clamp(14px, 1.35vw, 16px);
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .site-header {
    gap: clamp(18px, 2.2vw, 28px);
  }

  .site-header .brand-logo {
    width: 150px;
    height: auto;
    aspect-ratio: 172 / 30.44;
  }

  .site-header .header-nav {
    display: flex;
    gap: clamp(10px, 1.15vw, 14px);
    font-size: clamp(12px, 1.25vw, 14px);
  }

  .site-header .header-nav a {
    white-space: nowrap;
  }

  .site-header .header-phone {
    width: auto;
    min-width: max-content;
    font-size: clamp(13px, 1.25vw, 15px);
  }

  .site-header .header-phone .icon {
    display: block;
  }

  .site-header .menu-button {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .about-values-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .about-values-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Keep the interactive about-values grid after adaptive overrides. */
@media (hover: hover) and (pointer: fine) and (min-width: 1200px) {
  .about-values-row {
    --about-values-col-1: 1fr;
    --about-values-col-2: 1fr;
    --about-values-col-3: 1fr;
    grid-template-columns:
      minmax(0, var(--about-values-col-1))
      minmax(0, var(--about-values-col-2))
      minmax(0, var(--about-values-col-3));
    transition: grid-template-columns 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .about-values-row:has(.about-value-card:nth-child(1):hover) {
    --about-values-col-1: 2.8fr;
    --about-values-col-2: 0.45fr;
    --about-values-col-3: 0.45fr;
  }

  .about-values-row:has(.about-value-card:nth-child(2):hover) {
    --about-values-col-1: 0.45fr;
    --about-values-col-2: 2.8fr;
    --about-values-col-3: 0.45fr;
  }

  .about-values-row:has(.about-value-card:nth-child(3):hover) {
    --about-values-col-1: 0.45fr;
    --about-values-col-2: 0.45fr;
    --about-values-col-3: 2.8fr;
  }

  .about-values:has(.about-value-card:hover) .about-value-card:not(:hover)::before {
    background: rgba(0, 91, 237, 0.6);
  }

  .about-values:has(.about-value-card:hover) .about-value-card:not(:hover)::after {
    background: rgba(0, 0, 0, 0.3);
  }

  .about-values-row:has(.about-value-card:hover) .about-value-card:not(:hover)::before {
    background: rgba(0, 20, 48, 0.58);
  }

  .about-values-row:has(.about-value-card:hover) .about-value-card:not(:hover)::after {
    background: rgba(0, 0, 0, 0.48);
  }
}

.category-cutaway-layout {
  position: relative;
  z-index: 2;
  grid-template-columns: minmax(0, 1fr);
}

.category-cutaway-controls {
  position: relative;
  z-index: 1;
}

.category-cutaway-media {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.category-cutaway-media.is-cutaway-360-dragging {
  cursor: grabbing;
}

.category-cutaway-media img {
  -webkit-user-drag: none;
  user-select: none;
}

.category-cutaway-panel {
  position: fixed;
  z-index: 900;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  bottom: 12px;
  left: 12px;
  width: min(509px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  min-height: min(619px, calc(100dvh - 24px));
  overflow: auto;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
  transform: translateY(24px);
}

.category-cutaway.is-cutaway-panel-popup .category-cutaway-backdrop {
  display: block;
}

.category-cutaway.is-cutaway-panel-popup .category-cutaway-panel {
  position: fixed;
  z-index: 900;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  bottom: auto;
  left: 12px;
  box-sizing: border-box;
  width: auto;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  min-height: 0;
  overflow: auto;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
  transform: translateY(24px);
}

.category-cutaway.is-cutaway-panel-popup .category-cutaway-panel-media {
  aspect-ratio: 16 / 9;
  min-height: 0;
}

.category-cutaway .category-cutaway-close,
.category-cutaway.is-cutaway-panel-popup .category-cutaway-close {
  display: grid;
}

.category-cutaway.is-cutaway-panel-popup.is-cutaway-panel-open .category-cutaway-panel {
  transform: none;
}

.category-cutaway.is-cutaway-panel-popup.is-cutaway-panel-open .category-cutaway-controls {
  pointer-events: none;
}

@media (min-width: 768px) {
  .category-cutaway-layout {
    justify-items: center;
  }

  .category-cutaway-media {
    width: min(100%, 851px);
    min-height: 390px;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .category-cutaway.is-cutaway-panel-popup .category-cutaway-panel {
    display: grid;
    right: max(24px, calc((100vw - 1100px) / 2));
    left: max(24px, calc((100vw - 1100px) / 2));
    width: auto;
    margin: 0 auto;
    padding: 28px;
    align-content: center;
    background: var(--color-white);
    min-height: clamp(420px, 42vh, 560px);
    transform: translateY(24px);
  }

  .category-cutaway.is-cutaway-panel-popup.is-cutaway-panel-open .category-cutaway-panel {
    transform: none;
  }

  .category-cutaway.is-cutaway-panel-popup .category-cutaway-close {
    position: absolute;
    top: 28px;
    right: 28px;
    margin: 0;
    background: var(--color-surface);
  }

  .category-cutaway.is-cutaway-panel-popup .category-cutaway-panel-content {
    min-height: 0;
  }

  .category-cutaway.is-cutaway-panel-popup .category-cutaway-panel-slide {
    grid-template-columns: minmax(0, 0.62fr) minmax(280px, 0.38fr);
    gap: 28px;
    align-items: center;
    min-height: 0;
  }

  .category-cutaway.is-cutaway-panel-popup .category-cutaway-panel-media {
    height: auto;
    background: var(--color-surface);
  }

  .category-cutaway.is-cutaway-panel-popup .category-cutaway-panel-copy {
    max-height: calc(100vh - 112px);
    max-height: calc(100dvh - 112px);
    overflow: auto;
    padding: 28px 72px 28px 0;
  }
}

@media (min-width: 1440px) {
  .category-cutaway {
    display: grid;
    min-height: 100vh;
    min-height: 100svh;
    align-content: center;
  }

  .category-cutaway-layout {
    width: 100%;
    justify-items: start;
  }

  .category-cutaway-media {
    width: min(100%, calc((100vh - 250px) * 851 / 619));
    width: min(100%, calc((100svh - 250px) * 851 / 619));
    max-width: 100%;
    min-height: 0;
  }

  .category-cutaway-media img {
    width: 126.7%;
  }

  .category-cutaway.is-cutaway-panel-open:not(.is-cutaway-panel-popup) .category-cutaway-layout {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 509px);
    justify-content: stretch;
    justify-items: stretch;
  }

  .category-cutaway.is-cutaway-panel-open:not(.is-cutaway-panel-popup) .category-cutaway-media {
    width: 100%;
  }

  .category-cutaway.is-cutaway-panel-open:not(.is-cutaway-panel-popup) .category-cutaway-panel {
    position: relative;
    z-index: 1;
    inset: auto;
    width: auto;
    max-height: none;
    min-height: 0;
    overflow: hidden;
    box-shadow: none;
  }
}

.category-models .category-model-media {
  aspect-ratio: 4 / 3;
  min-height: 0;
}

.category-models .category-model-media img {
  object-fit: contain;
}

.home-page .product-showcase-preview {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.home-page .product-preview-shell .product-panel {
  position: static;
  width: min(var(--container), calc(100% - var(--page-x) * 2));
  max-width: none;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  overflow: visible;
  padding: clamp(32px, 5svh, 58px) 0;
  background: transparent;
}

.home-page .product-preview-shell .product-copy,
.home-page .product-preview-shell .chip-row {
  width: 100%;
}

.home-page .product-preview-shell .product-copy {
  max-width: 807px;
}

.home-page .product-preview-shell .chip-row {
  max-width: 620px;
}

.home-page .product-preview-shell .product-image {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: right bottom;
  transform: none;
}

.home-page .product-preview-shell .product-bottom {
  position: absolute;
  right: max(var(--page-x), calc((100% - var(--container)) / 2));
  bottom: clamp(24px, 4svh, 58px);
  left: max(var(--page-x), calc((100% - var(--container)) / 2));
  width: auto;
  margin: 0;
}

@media (max-width: 767px) {
  .home-page .product-preview-shell .product-copy,
  .home-page .product-preview-shell .chip-row {
    width: 100%;
  }
}

.category-cutaway {
  --cutaway-scale: 1;
  --cutaway-y: -7%;

  position: relative;
  display: block;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding-right: 0;
  padding-left: 0;
  background: #d4d8df;
}

.category-cutaway h2 {
  position: absolute;
  z-index: 5;
  top: clamp(24px, 5svh, 64px);
  left: max(var(--page-x), calc((100vw - var(--container)) / 2));
  width: min(760px, calc(100% - var(--page-x) * 2));
  margin: 0;
  pointer-events: none;
}

.category-cutaway-layout {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

.category-cutaway-media {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, calc(100vh * 851 / 619));
  width: max(100vw, calc(100svh * 851 / 619));
  height: auto;
  min-height: 0;
  aspect-ratio: 851 / 619;
  transform: translate(-50%, calc(-50% + var(--cutaway-y))) scale(var(--cutaway-scale));
}

.category-cutaway-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}

.category-cutaway-controls {
  position: absolute;
  z-index: 5;
  bottom: clamp(24px, 5svh, 64px);
  left: max(var(--page-x), calc((100vw - var(--container)) / 2));
  display: flex;
  width: min(560px, calc(100% - var(--page-x) * 2));
  align-items: center;
  gap: 18px 26px;
  margin: 0;
}

.category-cutaway-note {
  max-width: 260px;
}

.category-cutaway .cutaway-slider-buttons button {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 36px rgba(12, 12, 12, 0.12);
  backdrop-filter: blur(12px);
}

@media (max-width: 767px) {
  .category-cutaway {
    --cutaway-scale: 1;
    --cutaway-y: 1%;
  }

  .category-cutaway h2 {
    top: 24px;
    font-size: clamp(32px, 12vw, 48px);
  }

  .category-cutaway-controls {
    bottom: 24px;
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (min-width: 1440px) {
  .category-cutaway.is-cutaway-panel-open:not(.is-cutaway-panel-popup) {
    --cutaway-scale: 1.15;
    --cutaway-y: 0;
  }

  .category-cutaway.is-cutaway-panel-open:not(.is-cutaway-panel-popup) .category-cutaway-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 509px);
    align-items: stretch;
    justify-content: stretch;
    justify-items: stretch;
    gap: 20px;
  }

  .category-cutaway.is-cutaway-panel-open:not(.is-cutaway-panel-popup) .category-cutaway-media {
    position: relative;
    top: auto;
    left: auto;
    align-self: center;
    justify-self: center;
    width: min(100%, calc(100svh * 851 / 619));
    transform: translateY(var(--cutaway-y)) scale(var(--cutaway-scale));
  }

  .category-cutaway.is-cutaway-panel-open:not(.is-cutaway-panel-popup) .category-cutaway-panel {
    position: relative;
    z-index: 10;
    inset: auto;
    width: auto;
    max-height: none;
    min-height: 0;
    overflow: hidden;
    box-shadow: none;
  }
}

.category-cutaway.is-cutaway-panel-popup.is-cutaway-panel-open h2 {
  opacity: 0;
  visibility: hidden;
}

.category-cutaway.is-cutaway-panel-popup .category-cutaway-panel {
  top: 50%;
  bottom: auto;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  min-height: 0;
  transform: translateY(calc(-50% + 24px));
}

.category-cutaway.is-cutaway-panel-popup.is-cutaway-panel-open .category-cutaway-panel {
  transform: translateY(-50%);
}