/* Montserrat is loaded non-blocking from header.php (was a render-blocking @import here). */

/* ─── BASE OVERRIDES (scrollable page) ───────────────────────── */
html, body {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--graphite);
}

/* ─── HEADER OVERRIDES ───────────────────────────────────────── */

/* ─── FOOTER OVERRIDES (скасовуємо fixed/opacity:0 від конфігуратора) ── */
.site-footer {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}


/* Hamburger: hidden on desktop */
.hdr-burger { display: none; }

/* Mobile wave: hidden on desktop */
.about-hero-waves-mob { display: none; }

/* Callback button — sandstone bg + graphite text */
.hdr-cta--about {
  background: var(--sandstone);
  color: var(--graphite);
}
.hdr-cta--about:hover {
  opacity: 0.88;
}

/* ─── ABOUT MAIN ─────────────────────────────────────────────── */
.about-main {
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   HERO
   Design: 1920 × 943px
   Formula: px / 1920 * 100 = vw
   ═══════════════════════════════════════════════════════════════ */
.about-hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  background: var(--graphite);
  overflow: hidden;
}

/* Закриває subpixel-витік відео по правому краю */
.about-hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  background: var(--graphite);
  z-index: 3;
  pointer-events: none;
}

/* ── Wave SVG: пропорции 1038:950, высота = 100vh, прижат к правому краю ── */
/* Ширина = 100vh × (1038/950) = 109.263vh — всегда сохраняет форму волн */
.about-hero-waves {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 109.263vh; /* = 1038/950 * 100vh — пропорциональная ширина */
  fill: var(--graphite);
  pointer-events: none;
  z-index: 2;
}

/* ── Видео: начинается ровно там где левый край SVG ── */
/* left = 100vw - 109.263vh (= правый край - ширина SVG) */
.about-hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(100vw - 109.263vh);
}

.about-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Top fade: graphite → transparent (top ~25% of section) */
.about-hero-vid-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--graphite) -5.39%, rgba(63, 68, 67, 0) 24.58%);
  pointer-events: none;
}

/* ── Content: left column ── */
.about-hero-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 54vw; /* covers left half + slight overlap before waves start */
  padding-left: clamp(20px, 3.125vw, 60px); /* 60/1920 */
  display: flex;
  flex-direction: column;
  z-index: 3;
}

/* Title: top=203px @ 1920, font-size=80px, weight=800, width=885px */
.about-hero-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 4.167vw, 80px); /* 80/1920 */
  line-height: 120%;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--sandstone);
  max-width: clamp(300px, 46.094vw, 885px); /* 885/1920 */
  margin-top: clamp(100px, 10.573vw, 203px); /* 203/1920 – title top from section */
}

/* Stats row: bottom offset=143px @ 1920 */
.about-hero-stats {
  margin-top: auto;
  padding-bottom: clamp(40px, 7.448vw, 143px); /* 143/1920 */
  display: flex;
  gap: clamp(16px, 1.667vw, 32px); /* 32/1920 */
}

/* Single stat item: width=180px @ 1920 */
.about-stat {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.833vw, 16px); /* 16/1920 */
  width: clamp(100px, 9.375vw, 180px); /* 180/1920 */
  flex-shrink: 0;
}

/* "01" / "02" / "03" */
.about-stat-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 0.833vw, 16px); /* 16/1920 */
  line-height: 120%;
  letter-spacing: -0.04em;
  color: var(--sandstone);
}

/* Stat text area with top border */
.about-stat-body {
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  padding-top: clamp(12px, 1.25vw, 24px); /* 24/1920 */
}

/* Stat label text */
.about-stat-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1.25vw, 24px); /* 24/1920 */
  line-height: 120%;
  letter-spacing: -0.02em;
  color: var(--white);
}

/* ═══════════════════════════════════════════════════════════════
   BLOCK 2: PRODUCTION
   Design: 1920 × 860px
   ═══════════════════════════════════════════════════════════════ */

/* ─── BLOCK 2 ANIMATION ──────────────────────────────────────── */

/* Фаза 1: текст з'являється, місця під бейджі немає */
.about-products.visible .prod-text {
  opacity: 1;
}

/* Фаза 2: місце під бейдж плавно відкривається */
.about-products.visible .prod-badge-wrap {
  width: clamp(44px, 5.208vw, 100px);
}

/* Фаза 3: бейджик виїжджає зліва направо */
.prod-badge {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1) 1.6s;
}
.about-products.visible .prod-badge {
  clip-path: inset(0 0% 0 0);
}

/* Тегляйн останній */
.prod-tagline {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1) 2.4s,
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 2.4s;
}
.about-products.visible .prod-tagline {
  opacity: 1;
  transform: translateY(0);
}

/* Переноси: mob-br — тільки мобілка, desk-br — тільки десктоп */
br.mob-br  { display: none; }
br.desk-br { display: inline; }

.about-products {
  background: var(--porcelain); /* #EEEEEE */
  padding: clamp(60px, 8.333vw, 160px) clamp(20px, 3.125vw, 60px);
}

.prod-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 5.938vw, 114px); /* 114/1920 — gap between text and tagline */
}

/* ── Main text ── */
.prod-text {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 3.333vw, 64px); /* 64/1920 */
  line-height: 160%;
  text-align: center;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--graphite);
  max-width: clamp(300px, 73.646vw, 1414px); /* 1414/1920 */
}

/* ── Inline image badge ── */

/* Badge wrap: починає з нульової ширини, потім відкривається */
.prod-badge-wrap {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: clamp(44px, 5.208vw, 100px);
  background: var(--graphite);
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
}

/* Badge: абсолютно позиційований поверх */
.prod-badge {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.prod-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Bottom tagline ── */
.prod-tagline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.417vw, 8px); /* 8/1920 */
}

/* Wave icon above tagline */
.prod-tagline-icon {
  width: clamp(40px, 4.375vw, 84px);  /* 84/1920 */
  height: auto;
  display: block;
}

.prod-tagline-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 1.042vw, 20px); /* 20/1920 */
  line-height: 140%;
  text-align: center;
  letter-spacing: -0.04em;
  color: var(--graphite);
}

/* ═══════════════════════════════════════════════════════════════
   BLOCK 3: STATS
   Design: 1920 × 1797px
   Formula: px / 1920 * 100 = vw
   ═══════════════════════════════════════════════════════════════ */

.about-stats {
  position: relative;
  height: clamp(600px, 93.594vw, 1797px); /* 1797/1920 */
  background: var(--sandstone);
  overflow: hidden;
}

/* Хвиляста текстура: 1920×914, зверху */
.stats-waves-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(300px, 47.604vw, 914px); /* 914/1920 */
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

/* ── Картка (базова) ── */
.stats-card {
  position: absolute;
  width: clamp(120px, 16.667vw, 320px);   /* 320/1920 */
  height: clamp(160px, 21.875vw, 420px);  /* 420/1920 */
}

/* Стат-картка */
.stats-card--stat {
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(16px, 2.072vw, 39.79px)   /* top:    39.79/1920 */
           0
           clamp(16px, 2.158vw, 41.44px)   /* bottom: 41.44/1920 */
           clamp(20px, 2.489vw, 47.79px);  /* left:   47.79/1920 */
}

/* Фото-картка */
.stats-card--photo {
  overflow: hidden;
}
.stats-card--photo img,
.stats-card--photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Число */
.stats-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 4.167vw, 80px); /* 80/1920 */
  line-height: 80%;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--graphite);
}

.stats-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 4.167vw, 80px);
  height: clamp(48px, 4.167vw, 80px);
}
.stats-icon svg,
.stats-icon img {
  width: 100%;
  height: 100%;
}
.stats-icon svg path { fill: var(--graphite); }

@keyframes eu-stars-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.stats-icon .eu-stars {
  transform-origin: 32px 32px;
  animation: eu-stars-rotate 10s linear infinite;
}

/* Підпис */
.stats-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 1.036vw, 20px); /* 19.89/1920 */
  line-height: 120%;
  letter-spacing: -0.04em;
  color: var(--graphite);
}

/* Великий слоган */
.stats-slogan {
  position: absolute;
  left: 54.479vw;    /* 1046/1920 */
  top: 46.508vw;     /* 892.97/1920 */
  width: 42.344vw;   /* 813/1920 */
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 5.861vw, 113px); /* 112.526/1920 */
  line-height: 120%;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* ── Позиції карток ── */
/* Колонки: 60 / 553 / 1046 / 1539 */
/* Рядки:   298 / 799 / 1299          */

.stats-c1r1 { left: 3.125vw;  top: 15.521vw; } /* 60/1920  298/1920 */
.stats-c3r1 { left: 54.479vw; top: 15.521vw; } /* 1046     298      */
.stats-c4r1 { left: 80.156vw; top: 15.521vw; } /* 1539     298      */
.stats-c1r2 { left: 3.125vw;  top: 41.615vw; } /* 60       799      */
.stats-c2r2 { left: 28.802vw; top: 41.615vw; } /* 553      799      */
.stats-c2r3 { left: 28.802vw; top: 67.656vw; } /* 553      1299     */
.stats-c3r3 { left: 54.479vw; top: 67.656vw; } /* 1046     1299     */
.stats-c4r3 { left: 80.156vw; top: 67.656vw; } /* 1539     1299     */

/* ── Анімація: рядок за рядком ── */
.stats-card,
.stats-slogan {
  opacity: 0;
  transform: translateY(clamp(12px, 1.25vw, 24px));
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-stats.visible .row-1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}
.about-stats.visible .row-2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.35s;
}
.about-stats.visible .row-3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

/* ═══════════════════════════════════════════════════════════════
   BLOCK 4: CONFIGURATOR CTA
   Design: 1920 × 700px
   Formula: px / 1920 * 100 = vw
   ═══════════════════════════════════════════════════════════════ */

.about-configurator {
  position: relative;
  height: clamp(300px, 36.458vw, 700px); /* 700/1920 */
  margin-top: clamp(40px, 4.5vw, 90px); /* більший відступ зверху секції */
  background: var(--graphite);
  overflow: hidden;
}

/* Біла картка-фон */
.conf-card {
  position: absolute;
  left: 3.125vw;           /* 60/1920 */
  top: 3.073vw;            /* 59/1920 */
  width: 93.75vw;          /* 1800/1920 */
  height: 30.313vw;        /* 582/1920 */
  background: #fff;
}

/* Заголовок */
.conf-title {
  position: absolute;
  left: 5.625vw;           /* 108/1920 = 60+48 */
  top: 5.573vw;            /* 107/1920 = 59+48 */
  width: 28.021vw;         /* 538/1920 */
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 3.333vw, 64px); /* 64/1920 */
  line-height: 120%;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* Хвилі (ліво знизу) */
.conf-waves {
  position: absolute;
  left: 5.625vw;           /* 108/1920 */
  top: 27.760vw;           /* 533/1920 = 59+474 */
  width: 12.344vw;         /* 237/1920 */
  height: auto;
  pointer-events: none;
}

/* Фото/відео огорожі (по центру) */
.conf-image {
  position: absolute;
  left: 34.896vw;          /* 670/1920 = 960-290 */
  top: 3.073vw;            /* 59/1920 */
  width: 30.208vw;         /* 580/1920 */
  height: 30.208vw;        /* 580/1920 */
  overflow: hidden;
}
.conf-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 91.78%, #fff 98.89%);
  pointer-events: none;
}
.conf-image img,
.conf-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Інфо-рядок (іконка + текст) */
.conf-info-row {
  position: absolute;
  left: 68.958vw;          /* 1324/1920 = 1860-488-48 */
  top: 5.573vw;            /* 107/1920 */
  width: 25.417vw;         /* 488/1920 */
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.198vw, 23px); /* 23/1920 */
}

.conf-info-icon {
  flex-shrink: 0;
  width: clamp(32px, 2.917vw, 56px);  /* 56/1920 */
  height: clamp(32px, 2.917vw, 56px);
  background: #895961;
  display: flex;
  align-items: center;
  justify-content: center;
}
.conf-info-icon img {
  width: 43%;
  height: 43%;
}

.conf-info-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 1.25vw, 24px); /* 24/1920 */
  line-height: 120%;
  letter-spacing: -0.04em;
  color: var(--graphite);
}

/* Список параметрів */
.conf-params {
  position: absolute;
  left: 69.375vw;          /* 1332/1920 = 60+1272 */
  top: 11.771vw;           /* 226/1920 = 59+167 */
  width: 25.052vw;         /* 481/1920 */
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.conf-param {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 48px);     /* 48/1920 */
  padding-bottom: clamp(10px, 0.833vw, 16px); /* 16/1920 */
  border-bottom: 1px solid rgba(63, 68, 67, 0.3);
  margin-bottom: clamp(10px, 0.833vw, 16px);
}
.conf-param:last-child {
  margin-bottom: 0;
}

.conf-param-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 0.625vw, 12px); /* 12/1920 */
  line-height: 120%;
  letter-spacing: -0.04em;
  color: var(--graphite);
  flex-shrink: 0;
  width: clamp(18px, 1.25vw, 24px); /* фіксована ширина — вирівнює імена */
}

.conf-param-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 0.938vw, 18px); /* 18/1920 */
  line-height: 120%;
  letter-spacing: -0.04em;
  color: var(--graphite);
}

/* CTA кнопка */
.conf-cta {
  position: absolute;
  left: 69.375vw;          /* 1332/1920 */
  top: 26.563vw;           /* 510/1920 = 59+582-48-83 */
  width: 25vw;             /* 480/1920 */
  height: clamp(44px, 4.323vw, 83px); /* 83/1920 */
  background: var(--graphite);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 0.833vw, 16px); /* 16/1920 */
  line-height: 120%;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  letter-spacing: 0;
  transition: opacity 0.2s ease;
}
.conf-cta:hover {
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════
   BLOCK 5: DELIVERY
   Design: 1920 × 805px
   Formula: px / 1920 * 100 = vw
   ═══════════════════════════════════════════════════════════════ */

.about-delivery {
  position: relative;
  height: clamp(400px, 41.927vw, 805px); /* 805/1920 */
  margin-top: -3.073vw; /* прислонити до блоку зверху — фото машини торкається білої картки */
  background: var(--graphite);
  overflow: hidden;
}

/* Title: left:120, top:80, 64px sandstone */
.delivery-title {
  position: absolute;
  left: 6.25vw;    /* 120/1920 */
  top: 4.167vw;    /* 80/1920 */
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 3.333vw, 64px); /* 64/1920 */
  line-height: 120%;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--sandstone);
  max-width: clamp(200px, 36vw, 692px); /* примусовий перенос на 2 рядки */
}

/* Truck image: left:900, top:0, width:1020, height:800 */
.dlv-truck {
  position: absolute;
  left: 46.875vw;  /* 900/1920 */
  top: 0;
  width: 53.125vw; /* 1020/1920 */
  height: 41.667vw; /* 800/1920 */
  max-height: 100%;
}
.dlv-truck img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Left gradient: graphite → transparent */
.dlv-truck-fade-l {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 25%;
  background: linear-gradient(90deg, var(--graphite) 0%, rgba(63,68,67,0) 100%);
  pointer-events: none;
}
/* Bottom gradient: transparent → graphite */
.dlv-truck-fade-b {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 20%;
  background: linear-gradient(180deg, rgba(63,68,67,0) 0%, var(--graphite) 100%);
  pointer-events: none;
}

/* City rows */
.delivery-row {
  position: absolute;
  left: 6.25vw;   /* 120/1920 */
  display: flex;
  align-items: center;
  width: 34.479vw; /* = separator width 662/1920 */
  overflow: hidden;
}

.delivery-row--1 { top: 15.521vw; } /* 298/1920 */
.delivery-row--2 { top: 22.708vw; } /* 436/1920 */
.delivery-row--3 { top: 31.198vw; } /* 599/1920 */

/* Number */
.dlv-num {
  min-width: 1.458vw; /* 28/1920 = 148-120 */
  flex-shrink: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 0.625vw, 12px);
  line-height: 120%;
  letter-spacing: -0.04em;
  color: var(--sandstone);
}

/* City name: left:148, 32px white bold */
.dlv-city {
  min-width: 19.531vw; /* 375/1920 = 523-148 */
  flex-shrink: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 1.667vw, 32px); /* 32/1920 */
  line-height: 120%;
  letter-spacing: -0.04em;
  color: #fff;
  text-transform: uppercase;
}

/* Description: left:523, 18px sandstone */
.dlv-desc {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 0.938vw, 18px); /* 18/1920 */
  line-height: 120%;
  letter-spacing: -0.04em;
  color: var(--sandstone);
}

/* Separator lines: width:662, left:120 */
.delivery-line {
  position: absolute;
  left: 6.25vw;    /* 120/1920 */
  width: 34.479vw; /* 662/1920 */
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}
.delivery-line--1 { top: 19.792vw; } /* 380/1920 */
.delivery-line--2 { top: 28.281vw; } /* 543/1920 */
.delivery-line--3 { top: 36.719vw; } /* 705/1920 */

/* ─── Animation ── */
.delivery-row,
.delivery-line {
  opacity: 0;
  transform: translateY(clamp(8px, 0.833vw, 16px));
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* delivery-title handled by wipe-headings.js */
.delivery-title { opacity: 1; transform: none; transition: none; }
.dlv-truck {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

.about-delivery.visible .delivery-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}
.about-delivery.visible .dlv-truck {
  opacity: 1;
}
.about-delivery.visible .delivery-row--1,
.about-delivery.visible .delivery-line--1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}
.about-delivery.visible .delivery-row--2,
.about-delivery.visible .delivery-line--2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}
.about-delivery.visible .delivery-row--3,
.about-delivery.visible .delivery-line--3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

/* ═══════════════════════════════════════════════════════════════
   АДАПТАЦІЯ — ПЛАНШЕТ 601px – 1024px
   Логіка: як ПК (хвилі праворуч, відео збоку), лише бургер
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 601px) and (max-width: 1024px) {

  /* ── Header ── */
  .hdr-nav, .hdr-cta--about { display: none; }
  .hdr-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(36px, 4.297vw, 44px);
    height: clamp(36px, 4.297vw, 44px);
    background: var(--marsala);
    border: none;
    border-radius: 0;
    cursor: pointer;
    flex-shrink: 0;
  }

  /* ── Hero: той самий макет що ПК (хвилі + відео праворуч) ── */
  .about-hero-waves-mob { display: none; }

  /* Розміри під планшет */
  .about-hero-title {
    font-size: clamp(32px, 5.859vw, 60px);
    max-width: 58vw;
    margin-top: clamp(60px, 7.813vw, 80px);
  }

  .about-hero-stats { gap: clamp(12px, 1.953vw, 20px); }

  .about-stat { width: clamp(80px, 9.766vw, 100px); }

  .about-stat-num  { font-size: clamp(12px, 1.172vw, 12px); }
  .about-stat-text { font-size: clamp(12px, 1.563vw, 16px); }
}

/* ═══════════════════════════════════════════════════════════════
   АДАПТАЦІЯ — МОБІЛКА ≤ 600px
   Формула: макет 390×746px → vw = px/390*100, svh = px/746*100
   Відео: висота = min(79.49vw, 44svh)
   Висота секції: контент задає висоту (min-height 100svh), росте якщо треба
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── Footer: скасовуємо display:none з styles.css ── */
  .site-footer { display: block !important; }

  /* ── Header ── */
  .hdr-cta--about { display: none !important; }

  /* ── Hero section: висота від контенту, але мінімум весь екран ── */
  .about-hero {
    min-height: 100svh;
    height: auto;
    display: block; /* без flex — контент у нормальному потоці */
    overflow: hidden;
  }

  /* Прибираємо 2px декоративну смужку справа */
  .about-hero::after { content: none !important; }

  .about-hero-waves { display: none; }

  /* Відео: фіксовано знизу секції, 100vw = точно на весь вьюпорт */
  .about-hero-media {
    position: absolute;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    bottom: 0;
    width: 100vw;
    height: min(79.49vw, 44svh);
  }

  /* Мобільний SVG inline — preserveAspectRatio=none гарантує розтягнення */
  .about-hero-waves-mob {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: min(79.49vw, 44svh);
    pointer-events: none;
    z-index: 2;
    overflow: visible;
  }

  /* ── Контент: нормальний потік, мінімум 100svh → секція росте ── */
  .about-hero-content {
    position: relative;
    z-index: 3;
    /* скидаємо десктопний absolute */
    left: auto; right: auto; top: auto; bottom: auto;
    width: auto;
    /* мінімум повний екран → stats завжди в нижній половині */
    min-height: 100svh;
    /* відступ знизу резервує місце під відео */
    padding-top: 10svh;
    padding-left: var(--pad-outer);
    padding-right: var(--pad-outer);
    padding-bottom: calc(min(79.49vw, 44svh) + 6vw);
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .about-hero-title {
    font-size: 8.21vw;   /* 32/390 */
    line-height: 120%;
    letter-spacing: -0.04em;
    max-width: 100%;
    margin-top: 0;
  }

  /* ── Stats ── */
  .about-hero-stats {
    margin-top: 8.21vw;   /* 32/390 — фіксований відступ від заголовка */
    padding-bottom: 0;
    gap: 4.75vw;          /* 18.54/390 */
  }

  .about-stat {
    flex: 1;
    width: auto;
    gap: 2.05vw;          /* 8/390 */
  }

  .about-stat-num {
    font-size: 3.08vw;    /* 12/390 */
    font-weight: 600;
  }

  .about-stat-body {
    border-top: 0.15vw solid rgba(255, 255, 255, 0.6);
    padding-top: 2.05vw;  /* 8/390 */
  }

  .about-stat-text {
    font-size: 3.59vw;    /* 14/390 */
    font-weight: 500;
    letter-spacing: -0.02em;
  }

  /* ── Hamburger ── */
  .hdr-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 9.23vw;        /* 36/390 */
    height: 9.23vw;
    background: var(--marsala);
    border: none;
    border-radius: 0;
    cursor: pointer;
    flex-shrink: 0;
  }

  /* ── Block 2: Виробництво ── */
  br.mob-br  { display: inline; }
  br.desk-br { display: none; }

  /* ── Block 5: Delivery ── */
  .about-delivery {
    height: 209.97vw;         /* 819/390 */
    margin-top: -12.82vw;     /* закриває нижній відступ конфігуратора */
  }

  /* Вантажівка: повна ширина зверху */
  .dlv-truck {
    left:   0;
    top:    0;
    width:  100vw;
    height: 78.43vw;          /* 305.88/390 */
  }

  /* Мобільні градієнти: діагональний + лівий */
  .delivery-truck-fade-l {
    position: absolute;
    top: 0; left: 0;
    width:  100%;
    height: 100%;
    background:
      linear-gradient(16.86deg, #3F4443 11.97%, rgba(63,68,67,0) 21.33%),
      linear-gradient(87.97deg, #3F4443 3.47%,  rgba(85,92,91,0) 24.3%);
    pointer-events: none;
  }
  .delivery-truck-fade-b { display: none; }
  .dlv-truck { overflow: hidden; }

  /* Заголовок */
  .delivery-title {
    left:      5.13vw;        /* 20/390 */
    top:       78.46vw;       /* 306/390 */
    font-size: 8.21vw;        /* 32/390 */
    max-width: 85.13vw;       /* 332/390 */
  }

  /* Ряди міст: wrap щоб опис йшов нижче назви */
  .delivery-row {
    left:      5.13vw;        /* 20/390 */
    width:     89.74vw;       /* 350/390 */
    flex-wrap: wrap;
    overflow:  visible;
  }
  .delivery-row--1 { top: 106.15vw; } /* 414/390 */
  .delivery-row--2 { top: 140.26vw; } /* 547/390 */
  .delivery-row--3 { top: 174.36vw; } /* 680/390 */

  .dlv-num {
    min-width:    0;
    width:        auto;
    margin-right: 3.85vw;     /* 15/390 = gap між num і містом */
    font-size:    3.08vw;     /* 12/390 */
  }

  .dlv-city {
    min-width: 0;
    flex:      1;
    font-size: 6.15vw;        /* 24/390 */
  }

  .dlv-desc {
    flex-basis:  100%;
    width:       100%;
    padding-left: 7.18vw;    /* 28/390 = num + gap, вирівнює з назвою міста */
    margin-top:  2.05vw;     /* 8/390 */
    font-size:   3.59vw;     /* 14/390 */
    line-height: 140%;
  }

  /* Роздільники */
  .delivery-line {
    left:  5.13vw;            /* 20/390 */
    width: 89.74vw;           /* 350/390 */
  }
  .delivery-line--1 { top: 132.05vw; } /* 515/390 */
  .delivery-line--2 { top: 166.15vw; } /* 648/390 */
  .delivery-line--3 { top: 200.26vw; } /* 781/390 */

  /* ── Block 4: Configurator CTA ── */
  .about-configurator {
    height: 240.77vw;          /* 939/390 */
  }

  .conf-card {
    left:   2.82vw;            /* 11/390 */
    top:    12.82vw;           /* 50/390 */
    width:  94.36vw;           /* 368/390 */
    height: 215.13vw;          /* 839/390 */
  }

  .conf-title {
    left:      7.44vw;         /* 29/390 = card 11 + offset 18 */
    top:       21.03vw;        /* 82/390 = card 50 + title 32 */
    width:     85.13vw;        /* 332/390 */
    font-size: 8.21vw;         /* 32/390 */
  }

  .conf-waves {
    left:  72.31vw;            /* 282/390 = card 11 + waves 271 */
    top:   33.33vw;            /* 130/390 = card 50 + waves 80 */
    width: 20.26vw;            /* 79/390 */
  }

  .conf-image {
    left:   7.44vw;            /* 29/390 */
    top:    40.26vw;           /* 157/390 = card 50 + image 107 */
    width:  85.13vw;           /* 332/390 */
    height: 85.13vw;           /* 332/390 */
  }

  .conf-info-row {
    left:  7.44vw;             /* 29/390 */
    top:   136.92vw;           /* 534/390 = card 50 + container 484 */
    width: 85.13vw;            /* 332/390 */
    gap:   3.08vw;             /* 12/390 */
  }

  .conf-info-icon {
    width:  11.28vw;           /* 44/390 */
    height: 11.28vw;
  }

  .conf-info-text {
    font-size: 4.10vw;         /* 16/390 */
  }

  .conf-params {
    left:  7.44vw;             /* 29/390 */
    top:   156.41vw;           /* 610/390 = 534 + info 44 + gap 32 */
    width: 85.13vw;            /* 332/390 */
  }

  .conf-param {
    gap:            8.21vw;    /* 32/390 */
    padding-bottom: 2.05vw;    /* 8/390 */
    margin-bottom:  4.10vw;    /* 16/390 */
  }

  .conf-param-num  { font-size: 3.08vw; width: 6.15vw; }  /* 12/390, 24/390 */
  .conf-param-name { font-size: 3.59vw; }  /* 14/390 */

  .conf-cta {
    left:      7.44vw;         /* 29/390 */
    top:       202.56vw;       /* 790/390 = 534 + container 224 + gap 32 */
    width:     85.13vw;        /* 332/390 */
    height:    17.18vw;        /* 67/390 */
    font-size: 4.10vw;         /* 16/390 */
  }

  /* ── Block 3: Stats ── */
  .about-stats {
    height: 440vw;          /* 1716/390 */
  }

  .stats-waves-bg {
    height: 143.59vw;       /* 560/390 */
  }

  .stats-card {
    width:  42.31vw;        /* 165/390 */
    height: 54.87vw;        /* 214/390 */
  }

  .stats-card--stat {
    padding: 4.10vw;        /* 16/390 */
  }

  .stats-num {
    font-size: 10.26vw;     /* 40/390 */
  }

  .stats-label {
    font-size: 3.08vw;      /* 12/390 */
  }

  /* Позиції карток — мобілка */
  .stats-c1r1 { left: 5.13vw;  top: 18.21vw;  }  /* 20, 71   */
  .stats-c3r1 { left: 52.56vw; top: 54.36vw;  }  /* 205, 212 */
  .stats-c1r2 { left: 5.13vw;  top: 103.59vw; }  /* 20, 404  */
  .stats-c4r1 { left: 52.56vw; top: 136.67vw; }  /* 205, 533 */
  .stats-c2r2 { left: 5.13vw;  top: 245.90vw; }  /* 20, 959  */
  .stats-c3r3 { left: 52.56vw; top: 282.05vw; }  /* 205, 1100 */
  .stats-c2r3 { left: 5.13vw;  top: 331.28vw; }  /* 20, 1292 */
  .stats-c4r3 { left: 52.56vw; top: 364.36vw; }  /* 205, 1421 */

  /* Слоган */
  .stats-slogan {
    left:      5.13vw;      /* 20/390 */
    top:       203.85vw;    /* 795/390 */
    width:     89.74vw;     /* 350/390 */
    font-size: 12.31vw;     /* 48/390 */
    text-align: center;
  }

  .about-products {
    padding: 20.51vw 5.13vw 25.64vw; /* 80/390 top, 20/390 sides, 100/390 bottom */
  }

  .prod-inner {
    gap: 12.31vw; /* 48/390 — між текстом і tagline */
  }

  .prod-text {
    font-size: 6.2vw;
    line-height: 170%;
    max-width: 89.74vw;   /* 350/390 */
  }

  .prod-text br { display: none; }

  .prod-badge-wrap {
    height: 10.26vw;      /* 40/390 */
  }

  .about-products.visible .prod-badge-wrap {
    width: 10.26vw;       /* 40/390 */
  }

  .prod-tagline-icon {
    width: 16.15vw;       /* 63/390 */
  }

  .prod-tagline-text {
    font-size: 3.59vw;    /* 14/390 */
  }

  /* ── Block 6: Contacts ── */
  .about-contacts {
    height: 272.56vw;          /* 1063/390 */
  }

  /* Заголовок: більший та вище */
  .contacts-title {
    left:      5.13vw;         /* 20/390 */
    top:       20.51vw;        /* 80/390 */
    font-size: 15.23vw;        /* 59.4/390 */
  }

  /* Телефони / emails — над карткою */
  .contacts-info {
    left:      5.13vw;         /* 20/390 */
    top:       43.59vw;        /* 170/390 */
  }
  .contacts-info a {
    font-size: 6.15vw;         /* 24/390 */
    line-height: 103%;
  }

  /* Пісочна картка */
  .contacts-card {
    left:   2.82vw;            /* 11/390 */
    top:    87.95vw;           /* 343/390 */
    width:  94.36vw;           /* 368/390 */
    height: 174.36vw;          /* 680/390 */
  }

  /* Паттерн SVG: знизу картки, повернутий */
  .contacts-pattern {
    left:   0;
    top:    107.18vw;          /* 418/390 від картки */
    width:  100%;
    height: 67.18vw;           /* 262/390 */
  }

  /* Tagline "Зв'яжіться з нами" */
  .contacts-tagline {
    left:      4.62vw;         /* 18/390 від картки */
    top:       8.21vw;         /* 32/390 від картки */
    font-size: 6.15vw;         /* 24/390 */
  }

  /* Форма */
  .contacts-form {
    left:  4.62vw;             /* 18/390 від картки */
    top:   29.23vw;            /* 114/390 від картки */
    width: 85.13vw;            /* 332/390 */
  }

  .contacts-fields {
    gap:           2.05vw;     /* 8/390 */
    margin-bottom: 0;
  }

  .contacts-field {
    height: 16.41vw;           /* 64/390 */
  }

  .contacts-field-label {
    font-size: 3.08vw;         /* 12/390 */
  }

  .contacts-field-input {
    font-size:   4.10vw;       /* 16/390 */
    padding-top: 8.72vw;       /* 34/390 — залишає місце для label */
  }

  /* Кнопка + privacy — окремий блок */
  .contacts-submit {
    height:        17.18vw;    /* 67/390 */
    border-radius: 0;          /* прямокутна на мобілці */
    font-size:     4.10vw;     /* 16/390 */
    margin-top:    5.13vw;     /* 20/390 = відступ від полів */
    margin-bottom: 1.03vw;     /* 4/390 */
  }

  .contacts-privacy {
    font-size: 3.08vw;         /* 12/390 */
  }
}

/* ─── Scroll-down hint (hero) ─────────────────────────────────── */
.about-scroll-hint{
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 2vw, 40px);
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--sandstone);
  pointer-events: none;
  animation: aboutScrollBounce 1.8s ease-in-out infinite;
}
.about-scroll-hint__txt{
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 0.72vw, 13px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.about-scroll-hint__icon{ display: block; }
@keyframes aboutScrollBounce{
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(7px); }
}

/* ═══════════════════════════════════════════════════════════════
   ULTRA-WIDE (> 1920px): freeze the 1920px design and centre it.
   The block sizes are clamp()-capped at the 1920 design, but the
   absolute POSITIONS were raw vw and kept growing past 1920px, so the
   stats/configurator/delivery sections overflowed and overlapped the
   next block. Here we pin those positions to their 1920px values and
   centre the whole design with --dx. Below 1921px nothing changes.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1921px) {
  .about-main { --dx: calc((100vw - 1920px) / 2); }

  /* lock section heights to the 1920 design */
  .about-stats        { height: 1797px; }
  .about-configurator { height: 700px; }
  .about-delivery     { height: 805px; }

  /* ── stats ── */
  .stats-waves-bg { height: 914px; }
  .stats-slogan   { left: calc(var(--dx) + 1046px); top: 893px;  width: 813px; }
  .stats-c1r1 { left: calc(var(--dx) + 60px);   top: 298px; }
  .stats-c3r1 { left: calc(var(--dx) + 1046px); top: 298px; }
  .stats-c4r1 { left: calc(var(--dx) + 1539px); top: 298px; }
  .stats-c1r2 { left: calc(var(--dx) + 60px);   top: 799px; }
  .stats-c2r2 { left: calc(var(--dx) + 553px);  top: 799px; }
  .stats-c2r3 { left: calc(var(--dx) + 553px);  top: 1299px; }
  .stats-c3r3 { left: calc(var(--dx) + 1046px); top: 1299px; }
  .stats-c4r3 { left: calc(var(--dx) + 1539px); top: 1299px; }

  /* ── configurator CTA ── */
  .conf-card     { left: calc(var(--dx) + 60px);   top: 59px;  width: 1800px; height: 582px; }
  .conf-title    { left: calc(var(--dx) + 108px);  top: 107px; width: 538px; }
  .conf-waves    { left: calc(var(--dx) + 108px);  top: 533px; width: 237px; }
  .conf-image    { left: calc(var(--dx) + 670px);  top: 59px;  width: 580px; height: 580px; }
  .conf-info-row { left: calc(var(--dx) + 1324px); top: 107px; width: 488px; }
  .conf-params   { left: calc(var(--dx) + 1332px); top: 226px; width: 481px; }
  .conf-cta      { left: calc(var(--dx) + 1332px); top: 510px; width: 480px; }

  /* ── delivery ── */
  .delivery-title  { left: calc(var(--dx) + 120px); top: 80px; }
  .dlv-truck       { left: calc(var(--dx) + 900px); width: 1020px; height: 800px; }
  .delivery-row    { left: calc(var(--dx) + 120px); width: 662px; }
  .delivery-row--1 { top: 298px; }
  .delivery-row--2 { top: 436px; }
  .delivery-row--3 { top: 599px; }
  .dlv-num  { min-width: 28px; }
  .dlv-city { min-width: 375px; }
  .delivery-line    { left: calc(var(--dx) + 120px); width: 662px; }
  .delivery-line--1 { top: 380px; }
  .delivery-line--2 { top: 543px; }
  .delivery-line--3 { top: 705px; }

  /* ── contacts (styled in styles.css; card was raw vw and overflowed the
        clamp()-capped 940px section → cut off). Freeze + centre. ── */
  .about-contacts { height: 940px; }
  .contacts-title { left: calc(var(--dx) + 65px);  top: 125px; }
  .contacts-info  { left: calc(var(--dx) + 60px);  top: 703px; }
  .contacts-card  { left: calc(var(--dx) + 636px); top: 317px; width: 1224px; height: 560px; }
}