/* ═══════════════════════════════════════════════════════════════
   FRONT PAGE — scrollable content below the fixed hero/configurator.
   Loaded ONLY on the front page (after styles.css), so the global
   overflow:hidden lock from styles.css is overridden here for the
   landing scroll while the 3D configurator keeps its fixed overlay.

   Design grid: 1920px.  Formula: px / 1920 * 100 = vw.
   ═══════════════════════════════════════════════════════════════ */

/* ── Unlock body scroll for the landing; re-lock while configurator open ── */
html, body {
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
}
html.config-open, html.config-open body {
  overflow: hidden;
  height: 100%;
}

/* The fixed hero + configurator keep their own stacking; the scroll
   content rides above them (z 20) but below the fixed header (z 200). */
#hero, #app { /* stay fixed (defined in styles.css) */ }

/* Configurator overlay sits above the scrolling landing content. */
#app.visible { z-index: 100; }

/* ── Scroll wrapper ─────────────────────────────────────────────── */
/* The wrapper is click-transparent so the hero spacer zone lets clicks
   reach the fixed hero (the "Обрати паркан" button) below; each section
   re-enables pointer events for its own content. */
.fp-scroll {
  position: relative;
  z-index: 20;
  pointer-events: none;
}
.fp-section { pointer-events: auto; }

/* First viewport stays transparent so the fixed hero shows through;
   the sections below scroll up and cover it. */
.fp-hero-spacer {
  height: 100vh;
  pointer-events: none;
}
@media (max-width: 768px) {
  /* Stable height: svh ignores the iOS address-bar collapse, so the
     content below doesn't jump as the bar shows/hides while scrolling.
     (var(--dvh) is recomputed on every resize → it jumped; svh is fixed.) */
  .fp-hero-spacer {
    height: calc(var(--dvh, 1vh) * 100); /* fallback for older browsers */
    height: 100svh;
  }
  /* The landing scrolls and has a real footer at the end — show it on mobile
     (styles.css hides .site-footer on mobile for the non-scrolling app). */
  .site-footer { display: block !important; }
  /* But hide it when the configurator is active — it sits at z-index 110
     and overlaps the panel-nav buttons on small screens. */
  html.config-open .site-footer { display: none !important; }
  /* Stabilise the fixed hero on mobile too: svh ignores the iOS address-bar
     collapse, so the hero content doesn't "grow"/jitter on the first screen. */
  #hero { height: 100svh; }

  /* Nudge the lower hero group down so it doesn't hug the subtitle:
     the 3D fences (canvas), the CTA and the feature icons all move down a bit.
     The canvas shift is skipped while the configurator is open. */
  html:not(.config-open) #main-canvas { transform: translateY(5.5vh); }
  .hero-cta   { top: calc(var(--dvh) * 70); }   /* was 66 */
  .hero-feats { top: calc(var(--dvh) * 84); }   /* was 80 */
}

/* Header sticky behaviour is global (styles.css); while the configurator is
   open it must stay pinned regardless of scroll. */
html.config-open .site-header { position: fixed; animation: none; }

/* Landing footer: cancel the configurator's fixed/hidden footer so it
   sits at the end of the scroll. While the configurator is open we
   restore the fixed footer (part of the app chrome). */
.site-footer {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  z-index: 20;
  background: var(--graphite);   /* dark footer at the end of the landing */
}
html.config-open .site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: transparent;       /* over the configurator scene */
  z-index: 110;                  /* above #app.visible (z 100) so links are clickable */
}

/* ═══════════════════════════════════════════════════════════════
   BLOCK — Services (4 USPs)
   Design: section 1920 × 415px, graphite bg.
   Container: 4 columns, centred, 48px gap, 214px side inset, 120px top.
   ═══════════════════════════════════════════════════════════════ */
.fp-services {
  background: var(--graphite);
  padding: clamp(56px, 6.25vw, 120px) clamp(24px, 11.146vw, 214px) /* 120 / 214 */
           clamp(64px, 6.615vw, 127px) /* bottom 127 */;
}
.fp-services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(24px, 2.5vw, 48px) clamp(24px, 2.5vw, 48px); /* 48 / 1920 */
  max-width: 1492px;       /* 1920 − 214 − 214 */
  margin: 0 auto;
}
.fp-service {
  flex: 1 1 clamp(180px, 15.495vw, 297.5px); /* 297.5 / 1920 */
  max-width: clamp(180px, 15.495vw, 297.5px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.211vw, 23px);           /* 23.25 / 1920 */
  padding: 0 10px;
}
.fp-service-icon {
  width: clamp(64px, 5vw, 96px);             /* 96 / 1920 */
  height: clamp(64px, 5vw, 96px);
  flex: none;
}
.fp-service-icon svg,
.fp-service-icon img {
  width: 100%;
  height: 100%;
  display: block;
}
/* stats-icon span (від yw_stat_icon) має заповнити батьківський контейнер */
.fp-service-icon .stats-icon {
  width: 100%;
  height: 100%;
}
.fp-service-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.042vw, 20px);     /* 20 / 1920 */
  line-height: 120%;
  text-align: center;
  color: var(--sandstone);
}

@media (max-width: 768px) {
  .fp-services {
    /* Mobile grid base 390px: 32px side inset, generous vertical pad. */
    padding: clamp(40px, 12.821vw, 50px) clamp(20px, 8.205vw, 32px); /* 32 / 390 */
  }
  .fp-services-grid {
    gap: clamp(28px, 8.205vw, 36px) clamp(16px, 5.128vw, 24px);
  }
  .fp-service {
    flex: 1 1 calc(50% - 12px);              /* 2 × 2 grid */
    max-width: none;
    min-width: 0;
    padding: 0;
  }
  .fp-service-icon {
    width: clamp(56px, 18.462vw, 72px);      /* 72 / 390 */
    height: clamp(56px, 18.462vw, 72px);
  }
  .fp-service-text {
    font-size: clamp(13px, 4.103vw, 16px);   /* 16 / 390 */
  }
}

/* ═══════════════════════════════════════════════════════════════
   BLOCK — Works gallery (auto-scrolling carousel)
   Design 1920: graphite bg, centred title (1653px), then a horizontal
   track that auto-scrolls, is draggable, and speeds up on page scroll.
   Card visuals mirror the Works page but with a larger "featured" card.
   ═══════════════════════════════════════════════════════════════ */
.fp-works {
  background: var(--graphite);
  padding: clamp(40px, 4.167vw, 80px) 0 clamp(48px, 5vw, 96px); /* top 80 */
  overflow: hidden;
  /* Card sizing tokens (portrait cards; featured is larger). */
  --fpw-h: clamp(360px, 28.125vw, 540px);    /* 540 / 1920 */
  --fpw-w: calc(var(--fpw-h) * 300 / 510);
  --fpw-gap: clamp(20px, 2.5vw, 48px);       /* 48 / 1920 */
}
.fp-works-title {
  /* Narrower than the type so it wraps to ~3 balanced lines (per design). */
  max-width: clamp(280px, 67.7vw, 1300px);
  margin: 0 auto clamp(28px, 2.656vw, 51px); /* gap to track */
  padding: 0 clamp(20px, 2vw, 40px);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 3.333vw, 64px);     /* 64 / 1920 */
  line-height: 120%;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;                        /* even line distribution */
  color: var(--sandstone);
}
/* wipe-headings.js turns h2 into a column flex with align-items:flex-start
   (left). Centre the wrapped lines like the hero heading does. */
.fp-works-title.wipe-heading { align-items: center; }

.fp-works-viewport {
  overflow: hidden;
  cursor: grab;
}
.fp-works-viewport.is-dragging { cursor: grabbing; }

.fp-works-track {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--fpw-gap);
  padding: 0 clamp(20px, 2.5vw, 48px);
  width: max-content;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

.fpw-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.625vw, 12px);
}
.fpw-card {
  transition: opacity 0.35s ease;
}
.fpw-card__img {
  width: var(--fpw-w);
  height: var(--fpw-h);
  overflow: hidden;
  display: block;
  cursor: pointer;
}
.fpw-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;          /* let drag start anywhere on the card */
  -webkit-user-drag: none;
}
.fpw-card__cap {
  width: var(--fpw-w);
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: clamp(12px, 1.042vw, 20px);     /* 20 / 1920 */
  line-height: 120%;
  letter-spacing: -0.04em;
  color: #fff;
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity   0.38s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.fpw-card:hover .fpw-card__cap {
  opacity: 1;
  transform: translateY(0);
}
/* On hover, the other cards dim (mirrors the Works page). */
.fp-works-track.has-hover .fpw-card { opacity: 0.4; }
.fp-works-track.has-hover .fpw-card.is-hovered { opacity: 1; }

/* ── Lightbox ── */
.fpw-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  cursor: zoom-out;
}
.fpw-lightbox.active { opacity: 1; pointer-events: auto; }
.fpw-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
  cursor: default;
}
.fpw-lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  padding: 0;
}
.fpw-lightbox__close:hover { opacity: 1; }

@media (max-width: 768px) {
  .fp-works {
    padding: clamp(36px, 10.256vw, 48px) 0;  /* base 390 */
    --fpw-h: clamp(300px, 92.308vw, 420px);  /* 360 / 390 */
    --fpw-gap: 12px;
  }
  .fp-works-title {
    max-width: 100%;                         /* use full width on mobile */
    font-size: clamp(16px, 5.64vw, 22px);    /* ~22 @ 390 — smaller */
    padding: 0 clamp(12px, 4.103vw, 16px);
    margin-bottom: clamp(20px, 6.154vw, 28px);
  }
  .fp-works-track { padding: 0 5.128vw; }    /* 20 / 390 */
  /* Caption always visible on touch (no hover). */
  .fpw-card__cap {
    font-size: clamp(12px, 3.59vw, 14px);
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════
   BLOCK — Configurator CTA  (ported 1:1 from the About page; the
   .conf-* children match about.css, wrapped here under .fp-cta so the
   About stylesheet need not load on the front page). Design grid 1920.
   ═══════════════════════════════════════════════════════════════ */
.fp-cta {
  position: relative;
  height: clamp(300px, 36.458vw, 700px); /* 700/1920 */
  background: var(--graphite);
  overflow: hidden;
}
.fp-cta .conf-card {
  position: absolute;
  left: 3.125vw; top: 3.073vw;           /* 60 / 59 */
  width: 93.75vw; height: 30.313vw;      /* 1800 / 582 */
  background: #fff;
}
.fp-cta .conf-title {
  position: absolute;
  left: 5.625vw; top: 5.573vw;           /* 108 / 107 */
  width: 28.021vw;                       /* 538 */
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 3.333vw, 64px); /* 64 */
  line-height: 120%;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--graphite);
}
.fp-cta .conf-waves {
  position: absolute;
  left: 5.625vw; top: 27.760vw;          /* 108 / 533 */
  width: 12.344vw; height: auto;         /* 237 */
  pointer-events: none;
}
.fp-cta .conf-image {
  position: absolute;
  left: 34.896vw; top: 3.073vw;          /* 670 / 59 */
  width: 30.208vw; height: 30.208vw;     /* 580 */
  overflow: hidden;
}
.fp-cta .conf-image::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
}
.fp-cta .conf-image img,
.fp-cta .conf-image video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.fp-cta .conf-info-row {
  position: absolute;
  left: 68.958vw; top: 5.573vw;          /* 1324 / 107 */
  width: 25.417vw;                       /* 488 */
  display: flex; align-items: center;
  gap: clamp(12px, 1.198vw, 23px);       /* 23 */
}
.fp-cta .conf-info-icon {
  flex-shrink: 0;
  width: clamp(32px, 2.917vw, 56px);     /* 56 */
  height: clamp(32px, 2.917vw, 56px);
  background: #895961;
  display: flex; align-items: center; justify-content: center;
}
.fp-cta .conf-info-icon img { width: 43%; height: 43%; }
.fp-cta .conf-info-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 1.25vw, 24px);  /* 24 */
  line-height: 120%;
  letter-spacing: -0.04em;
  color: var(--graphite);
}
.fp-cta .conf-params {
  position: absolute;
  left: 69.375vw; top: 11.771vw;         /* 1332 / 226 */
  width: 25.052vw;                       /* 481 */
  list-style: none;
  display: flex; flex-direction: column; gap: 0;
}
.fp-cta .conf-param {
  display: flex; align-items: center;
  gap: clamp(20px, 2.5vw, 48px);         /* 48 */
  padding-bottom: clamp(10px, 0.833vw, 16px);
  border-bottom: 1px solid rgba(63, 68, 67, 0.3);
  margin-bottom: clamp(10px, 0.833vw, 16px);
}
.fp-cta .conf-param:last-child { margin-bottom: 0; }
.fp-cta .conf-param-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 0.625vw, 12px);  /* 12 */
  line-height: 120%;
  letter-spacing: -0.04em;
  color: var(--graphite);
  flex-shrink: 0;
  width: clamp(18px, 1.25vw, 24px);
}
.fp-cta .conf-param-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 0.938vw, 18px); /* 18 */
  line-height: 120%;
  letter-spacing: -0.04em;
  color: var(--graphite);
}
.fp-cta .conf-cta {
  position: absolute;
  left: 69.375vw; top: 26.563vw;         /* 1332 / 510 */
  width: 25vw;                           /* 480 */
  height: clamp(44px, 4.323vw, 83px);    /* 83 */
  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 */
  line-height: 120%;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  letter-spacing: 0;
  transition: opacity 0.2s ease;
}
.fp-cta .conf-cta:hover { opacity: 0.85; }

/* Configurator CTA — mobile (≤600px, base grid 390). */
@media (max-width: 600px) {
  .fp-cta { height: 240.77vw; }                       /* 939/390 */
  .fp-cta .conf-card  { left: 2.82vw; top: 12.82vw; width: 94.36vw; height: 215.13vw; }
  .fp-cta .conf-title { left: 7.44vw; top: 21.03vw; width: 85.13vw; font-size: 8.21vw; }
  .fp-cta .conf-waves { left: 72.31vw; top: 33.33vw; width: 20.26vw; }
  .fp-cta .conf-image { left: 7.44vw; top: 40.26vw; width: 85.13vw; height: 85.13vw; }
  .fp-cta .conf-info-row  { left: 7.44vw; top: 136.92vw; width: 85.13vw; gap: 3.08vw; }
  .fp-cta .conf-info-icon { width: 11.28vw; height: 11.28vw; }
  .fp-cta .conf-info-text { font-size: 4.10vw; }
  .fp-cta .conf-params { left: 7.44vw; top: 156.41vw; width: 85.13vw; }
  .fp-cta .conf-param  { gap: 8.21vw; padding-bottom: 2.05vw; margin-bottom: 4.10vw; }
  .fp-cta .conf-param-num  { font-size: 3.08vw; width: 6.15vw; }
  .fp-cta .conf-param-name { font-size: 3.59vw; }
  .fp-cta .conf-cta { left: 7.44vw; top: 202.56vw; width: 85.13vw; height: 17.18vw; font-size: 4.10vw; }
}

/* Configurator CTA — ultra-wide (>1920): freeze the 1920 design, centre it. */
@media (min-width: 1921px) {
  .fp-cta { --dx: calc((100vw - 1920px) / 2); height: 700px; }
  .fp-cta .conf-card     { left: calc(var(--dx) + 60px);   top: 59px;  width: 1800px; height: 582px; }
  .fp-cta .conf-title    { left: calc(var(--dx) + 108px);  top: 107px; width: 538px; }
  .fp-cta .conf-waves    { left: calc(var(--dx) + 108px);  top: 533px; width: 237px; }
  .fp-cta .conf-image    { left: calc(var(--dx) + 670px);  top: 59px;  width: 580px; height: 580px; }
  .fp-cta .conf-info-row { left: calc(var(--dx) + 1324px); top: 107px; width: 488px; }
  .fp-cta .conf-params   { left: calc(var(--dx) + 1332px); top: 226px; width: 481px; }
  .fp-cta .conf-cta      { left: calc(var(--dx) + 1332px); top: 510px; width: 480px; }
}

/* ═══════════════════════════════════════════════════════════════
   BLOCK — Quote / testimonial (Роман). Graphite frame with a sandstone
   band; Roman (transparent cut-out) pokes above the band on the left,
   graphite quote-mark + text on the right, name/role beneath, and the real
   self-drawing signature to the right. Values from the Figma 1920 grid.
   ═══════════════════════════════════════════════════════════════ */
.fp-quote {
  position: relative;
  height: clamp(540px, 41.875vw, 804px); /* 804/1920 */
  background: var(--graphite);
  overflow: hidden;
}
.fp-quote-band {
  position: absolute;
  left: 3.125vw; top: 8.333vw;           /* 60 / 160 */
  width: 93.75vw; height: 27.292vw;      /* 1800 / 524 */
  background: var(--sandstone);
}
.fp-quote-photo {
  position: absolute;
  left: 13.646vw; top: 1.823vw;          /* 262 / 35 (bottom sits on band edge) */
  width: 25.573vw; height: 33.802vw;     /* 491 / 649 */
}
.fp-quote-photo img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center;
  display: block;
}
.fp-quote-mark {
  display: block;                        /* <span> → block, so width is honoured
                                            (inline ignores width → svg blows up) */
  position: absolute;
  left: 51.979vw; top: 12.151vw;         /* 998 / 233 */
  width: clamp(36px, 3.646vw, 70px);     /* 70 */
}
.fp-quote-mark svg { width: 100%; height: auto; display: block; }
.fp-quote-text {
  position: absolute;
  left: 51.979vw; top: 16.213vw;         /* 998 / 311 */
  width: 24.323vw;                       /* 467 */
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(18px, 1.667vw, 32px); /* 32 */
  line-height: 1.21;                     /* 39/32 */
  text-transform: uppercase;
  color: var(--graphite);
}
.fp-quote-name {
  position: absolute;
  left: 51.979vw; top: 28.594vw;         /* 998 / 549 */
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 1.25vw, 24px);  /* 24 */
  color: var(--graphite);
}
.fp-quote-role {
  position: absolute;
  left: 51.979vw; top: 30.607vw;         /* 998 / 588 */
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 0.938vw, 18px); /* 18 */
  letter-spacing: -0.04em;
  color: rgba(63, 68, 67, 0.6);
}
.fp-quote-sign {
  position: absolute;
  left: 79.552vw; top: 20.604vw;         /* placed beside the name/role, lower-right */
  width: 11.25vw;                        /* 216 */
  height: auto;
}
/* Draw-on: the single continuous stroke writes itself from start to end when
   the section scrolls into view (.visible). pathLength="1" on the <path> lets
   dasharray/dashoffset work as 0–1 regardless of the path's real length. */
.fp-quote-sign path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.fp-quote.visible .fp-quote-sign path {
  animation: fpSignDraw 2.4s cubic-bezier(0.45, 0.05, 0.4, 1) forwards 0.4s;
}
@keyframes fpSignDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .fp-quote-sign path { stroke-dashoffset: 0; }
  .fp-quote.visible .fp-quote-sign path { animation: none; }
}

/* Quote — mobile (≤600): full-bleed sandstone card. Quote-mark + text + name
   flow at the top-left; Roman sits bottom-right and the signature is pinned at
   the lower-left, overlapping nothing. Base grid 390. */
@media (max-width: 600px) {
  /* Full-bleed sandstone card. Mark → text → name → role → signature flow in a
     normal column at the top-left, so the signature always follows the text and
     can never overlap it. Roman is the only absolute element — pinned to the
     bottom-right and bleeding off the card edge. min-height keeps room for him. */
  .fp-quote {
    height: auto;
    /* Sized to the photo: Roman is bottom-anchored at 84.62vw tall and his top
       lands at ~50vw (level with the name), so the card is exactly that tall —
       no empty band below him. */
    min-height: 134.62vw;
    background: var(--sandstone);
    padding: 7.69vw 5.13vw 0;                /* 30 / 20 */
    overflow: hidden;
  }
  .fp-quote-band { display: none; }
  .fp-quote-mark {
    position: relative; left: auto; top: auto;
    width: 11.79vw;                          /* ≈46 */
    margin: 0 0 3.59vw;                      /* 14 */
  }
  .fp-quote-text {
    position: relative; left: auto; top: auto;
    width: auto; max-width: 89.74vw;         /* 350 — clears the photo */
    font-size: 6.15vw;                       /* 24 */
    line-height: 1.2;
    margin: 0 0 5.13vw;                      /* 20 */
  }
  .fp-quote-name {
    position: relative; left: auto; top: auto;
    font-size: 4.62vw;                       /* 18 */
    margin: 0 0 1.03vw;                      /* 4 */
  }
  .fp-quote-role {
    position: relative; left: auto; top: auto;
    font-size: 3.08vw;                       /* 12 */
  }
  .fp-quote-sign {
    position: relative; left: auto; top: auto;
    width: 31.79vw;                          /* ≈124 */
    height: auto;
    margin: 4.62vw 0 0 2.56vw;               /* gap above + slight indent */
    z-index: 2;
  }
  .fp-quote-photo {
    position: absolute; top: auto;
    right: -7.69vw; left: auto; bottom: 0;   /* bleeds off the right edge (≈-30px) */
    width: 64.1vw; height: 84.62vw;          /* ≈250 × 330; bottom-anchored */
    z-index: 1;
  }
}

/* Quote — ultra-wide (>1920): freeze + centre. */
@media (min-width: 1921px) {
  .fp-quote { --dx: calc((100vw - 1920px) / 2); height: 804px; }
  .fp-quote-band  { left: calc(var(--dx) + 60px);   top: 160px; width: 1800px; height: 524px; }
  .fp-quote-photo { left: calc(var(--dx) + 262px);  top: 35px;  width: 491px;  height: 649px; }
  .fp-quote-mark  { left: calc(var(--dx) + 998px);  top: 233px; width: 70px; }
  .fp-quote-text  { left: calc(var(--dx) + 998px);  top: 311px; width: 467px; }
  .fp-quote-name  { left: calc(var(--dx) + 998px);  top: 549px; }
  .fp-quote-role  { left: calc(var(--dx) + 998px);  top: 588px; }
  .fp-quote-sign  { left: calc(var(--dx) + 1585px); top: 242px; width: 216px; }
}

/* ═══════════════════════════════════════════════════════════════
   BLOCK — Contacts (КОНТАКТИ). Base layout lives in styles.css (global),
   reused via the .about-contacts class; only the mobile + ultra-wide
   overrides (which live in about.css, not loaded here) are ported below.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .about-contacts { height: 272.56vw; }                       /* 1063/390 */
  .about-contacts .contacts-title { left: 5.13vw; top: 20.51vw; font-size: 15.23vw; }
  .about-contacts .contacts-info  { left: 5.13vw; top: 43.59vw; }
  .about-contacts .contacts-info a { font-size: 6.15vw; line-height: 103%; }
  .about-contacts .contacts-card  { left: 2.82vw; top: 87.95vw; width: 94.36vw; height: 174.36vw; }
  .about-contacts .contacts-pattern { left: 0; top: 107.18vw; width: 100%; height: 67.18vw; }
  .about-contacts .contacts-tagline { left: 4.62vw; top: 8.21vw; font-size: 6.15vw; }
  .about-contacts .contacts-form  { left: 4.62vw; top: 29.23vw; width: 85.13vw; }
  .about-contacts .contacts-fields { gap: 2.05vw; margin-bottom: 0; }
  .about-contacts .contacts-field { height: 16.41vw; }
  .about-contacts .contacts-field-label { font-size: 3.08vw; }
  .about-contacts .contacts-field-input { font-size: 4.10vw; padding-top: 8.72vw; }
  .about-contacts .contacts-submit { height: 17.18vw; border-radius: 0; font-size: 4.10vw; margin-top: 5.13vw; margin-bottom: 1.03vw; }
  .about-contacts .contacts-privacy { font-size: 3.08vw; }
}
@media (min-width: 1921px) {
  .about-contacts { --dx: calc((100vw - 1920px) / 2); height: 940px; }
  .about-contacts .contacts-title { left: calc(var(--dx) + 65px);  top: 125px; }
  .about-contacts .contacts-info  { left: calc(var(--dx) + 60px);  bottom: 72px; top: auto; }
  .about-contacts .contacts-card  { left: calc(var(--dx) + 636px); top: 317px; width: 1224px; height: 560px; }
}

/* Contacts block (tagline size, info position/size) now lives in the
   shared base in styles.css so the homepage and /contacts/ page render
   identically — change it in one place (component). */

/* ═══════════ Cross-link banner → sectional-fence landing ═══════════
   Mirror of the wide card that landing shows for square pipe: one
   full-width dark card, render on the right, gradient over the left so
   the caption reads; the gradient lifts on hover. */
.fp-cross {
  background: var(--graphite);
  padding: clamp(40px, 4.167vw, 80px) 0 clamp(48px, 5vw, 96px);
}
.fp-cross-title {
  margin: 0 auto clamp(28px, 2.656vw, 51px);
  padding: 0 clamp(20px, 2vw, 40px);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 3.333vw, 64px);   /* 64 / 1920 */
  line-height: 120%;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--sandstone);
}
/* Same 60px side margins as the other bands (60 / 1920 = 3.125vw). */
.fp-cross-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.25vw, 24px);
  /* % of the section, not vw — vw counts the scrollbar and the grid would
     overhang on the right. 93.75% keeps the same 60/1920 side margins. */
  width: 93.75%;
  max-width: 1800px;
  margin: 0 auto;
}
.fp-cross-card {
  display: block;
  position: relative;
  aspect-ratio: 566 / 342;                 /* same tile proportion as the source block */
  background: #000;
  overflow: hidden;
  text-decoration: none;
}
/* Wide card: spans both columns, flatter, render sits on the right. */
.fp-cross-card.is-wide {
  grid-column: 1 / -1;
  aspect-ratio: 1170 / 346;
}
/* Regular tiles are photo-filled, like the source block. */
.fp-cross-card:not(.is-wide) img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
/* wipe-headings.js re-lays the h2 as a flex column aligned left; centre the
   wrapped lines the same way the works heading does. */
.fp-cross-title.wipe-heading { align-items: center; }

.fp-cross-card.is-wide img {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 66%;
  height: auto;
  z-index: 1;
  /* Dissolve the photo's left edge into the card instead of a hard seam. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
          mask-image: linear-gradient(90deg, transparent 0, #000 22%);
}
.fp-cross-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Один в один градиент плиток на yantos.com.ua — блок должен читаться
     как продолжение того же блока, а не как его светлая копия. */
  background: linear-gradient(111.71deg, #000000 7.59%, rgba(0, 0, 0, 0) 88.59%);
  opacity: 1;
  transition: opacity .3s;
}
/* Only clickable cards react — same as the source block. */
a.fp-cross-card:hover::before,
a.fp-cross-card:focus::before { opacity: 0; }
.fp-cross-name {
  position: absolute;
  left: clamp(20px, 2.083vw, 40px);        /* 40 / 1920 */
  top: clamp(18px, 1.823vw, 35px);         /* 35 / 1920 */
  z-index: 3;
  max-width: 8em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(15px, 1.042vw, 20px);   /* 20 / 1920 */
  line-height: 135%;
  text-transform: uppercase;
  color: var(--sandstone);
}
@media (max-width: 768px) {
  /* Portrait: the render drops to the bottom-right so the caption keeps the
     darkened corner, same idea as the desktop layout. */
  .fp-cross-grid { grid-template-columns: 1fr; }
  .fp-cross-card.is-wide { aspect-ratio: 1 / 0.62; }
  .fp-cross-card.is-wide img { width: 84%; top: auto; bottom: 0; transform: none; }
  .fp-cross-name { max-width: 6em; }
}
@media (min-width: 1921px) {
  .fp-cross-grid { width: 1800px; }
}