/* ============================================================
   DDCom Engineering — v4 «Конверсионный светлый»
   Light premium conversion-focused build
   ============================================================ */

/* ---------- Custom properties / design tokens ---------- */
:root {
  /* ===== Color ===== */
  --c-bg: #FBFBF9;
  --c-bg-alt: #F4F3EF;
  --c-surface: #FFFFFF;
  --c-ink: #16181D;
  --c-ink-soft: #3E434C;
  --c-muted: #5A5F69;
  --c-line: #E5E3DC;
  --c-line-strong: #D8D5CC;
  --c-red: #D7261E;
  --c-red-dark: #B71C15;
  --c-red-tint: rgba(215, 38, 30, 0.08);
  --c-navy: #232A36;
  --c-navy-deep: #1A1D24;
  --c-wa: #25D366;
  --c-wa-dark: #1DA851;
  --c-wa-text: #0E7A43;   /* AA-compliant green for text on light backgrounds (5.2:1) */
  --c-wa-text-hover: #0A5C33;
  --c-amber: #D97706;     /* ≥3:1 non-text contrast on white */

  /* ===== Type ===== */
  --font-main: 'Onest', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  /* Modular type scale (fluid). H1→caption, intentional hierarchy. */
  --fs-display: clamp(2.25rem, 1.2rem + 3.9vw, 3.6rem);   /* hero H1 */
  --fs-h1: clamp(2.05rem, 1.1rem + 3.4vw, 3.4rem);
  --fs-h2: clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem);
  --fs-h3: clamp(1.12rem, 1rem + 0.45vw, 1.32rem);
  --fs-lead: clamp(1.06rem, 1rem + 0.45vw, 1.22rem);      /* lead / section sub */
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.8rem;
  --lh-tight: 1.12;   /* big headings */
  --lh-head: 1.18;
  --lh-body: 1.62;
  --measure: 65ch;    /* comfortable paragraph line length */

  /* ===== Spacing scale (4 / 8-based) ===== */
  --s-1: 0.25rem;   /* 4  */
  --s-2: 0.5rem;    /* 8  */
  --s-3: 0.75rem;   /* 12 */
  --s-4: 1rem;      /* 16 */
  --s-5: 1.5rem;    /* 24 */
  --s-6: 2rem;      /* 32 */
  --s-7: 2.5rem;    /* 40 */
  --s-8: 3rem;      /* 48 */
  --s-9: 4rem;      /* 64 */
  --s-10: 5rem;     /* 80 */
  /* fluid gaps used inside grids/cards */
  --gap-card: clamp(1.1rem, 0.85rem + 1.1vw, 1.75rem);
  --pad-card: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  /* vertical rhythm between sections (even, generous, not cavernous) */
  --space-section: clamp(3.75rem, 2.8rem + 3.4vw, 6.25rem);
  --space-head: clamp(2rem, 1.5rem + 1.8vw, 3rem);   /* head → content */

  /* ===== Layout ===== */
  --container: 1200px;

  /* ===== Radii ===== */
  --radius-lg: 20px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --radius-pill: 999px;

  /* ===== Shadows (layered, consistent elevation language) ===== */
  --shadow-xs: 0 1px 2px rgba(22, 24, 29, 0.06);
  --shadow-soft: 0 5px 22px rgba(22, 24, 29, 0.07), 0 2px 6px rgba(22, 24, 29, 0.05);
  --shadow-hover: 0 18px 44px rgba(22, 24, 29, 0.13), 0 6px 14px rgba(22, 24, 29, 0.06);
  --shadow-cta: 0 6px 18px rgba(215, 38, 30, 0.28);
  --shadow-cta-hover: 0 12px 28px rgba(215, 38, 30, 0.34);

  /* ===== Motion ===== */
  --ease: cubic-bezier(0.4, 0.14, 0.2, 1);
  --t-fast: 0.18s;
  --t-base: 0.22s;

  --header-h: 84px;
}

/* ---------- Reset & base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-main);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 0.55em;
  font-weight: 800;
  line-height: var(--lh-head);
  letter-spacing: -0.02em;
  color: var(--c-ink);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.025em; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -0.025em; }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }

a {
  color: var(--c-red-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast) ease;
}
a:hover { color: var(--c-red); }

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

[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
  flex: none;
}

:focus-visible {
  outline: 3px solid var(--c-red);
  outline-offset: 3px;
  border-radius: 5px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.7rem 1.2rem;
  background: var(--c-ink);
  color: #fff;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 0.5rem + 2.5vw, 2rem);
}

@media (min-width: 1700px) {
  :root { --container: 1320px; }
}

section { padding-block: var(--space-section); }

.section-alt { background: var(--c-bg-alt); }

.section-head {
  max-width: 56rem;
  margin-bottom: var(--space-head);
}

.section-head h2 { margin-bottom: 0; }
.section-head .section-sub { margin-top: 0.75rem; }

.section-sub {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-muted);
  max-width: var(--measure);
  margin-bottom: 0;
}

.kicker {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.85rem;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-red);
}

.kicker::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  margin-right: 0.65rem;
  background: var(--c-red);
}

.kicker--light { color: #FF8D85; }
.kicker--light::before { background: #FF8D85; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.8rem 1.6rem;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-base) ease, transform 0.15s ease, box-shadow var(--t-base) ease;
}

.btn-primary {
  background: var(--c-red);
  color: #fff;
  box-shadow: var(--shadow-cta);
}

.btn-primary:hover {
  background: var(--c-red-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-hover);
}

.btn-primary:active { transform: translateY(0); }

.btn-lg { min-height: 56px; padding: 1rem 2.1rem; font-size: 1.08rem; border-radius: 12px; }
.btn-sm { min-height: 44px; padding: 0.55rem 1.1rem; font-size: 0.92rem; }
.btn-block { width: 100%; }

/* ---------- Header ----------
   Behaviour: fixed overlay header.
   - At the top over the dark hero -> TRANSPARENT (light/white logo + nav).
   - After scrolling (.header-solid) -> SOLID light bar (the original look).
   - Smart hide/show: slides up on scroll-down, back on scroll-up (.header-hidden).
   The header overlays the hero (does not push it down). */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    transform 0.32s cubic-bezier(0.4, 0.14, 0.2, 1),
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    backdrop-filter 0.25s ease;
}

/* Subtle top scrim so white nav stays legible over bright parts of the hero photo.
   Only present in the transparent state. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 20, 26, 0.55) 0%, rgba(18, 20, 26, 0.18) 60%, rgba(18, 20, 26, 0) 100%);
  opacity: 1;
  transition: opacity 0.25s ease;
}

/* SOLID state — the original light bar */
.site-header.header-solid {
  background: rgba(251, 251, 249, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--c-line);
  box-shadow: 0 4px 18px rgba(22, 24, 29, 0.08);
}

.site-header.header-solid::before { opacity: 0; }

/* Smart hide: slide the header up out of view */
.site-header.header-hidden { transform: translateY(-100%); }

/* keep the legacy `.scrolled` hook working, but only show its shadow once the
   header is actually solid (so the transparent over-hero header has no stray
   shadow during the first few px of scroll). */
.site-header.scrolled.header-solid { box-shadow: 0 4px 18px rgba(22, 24, 29, 0.08); }

.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.8rem);
  min-height: var(--header-h);
}

.logo-link {
  display: inline-flex;
  align-items: center;
  color: var(--c-ink); /* currentColor parts of the logo */
  flex: none;
  transition: color 0.25s ease;
}

.logo-mark { height: 52px; width: auto; }
.logo-mark--footer { height: 40px; }

/* ---------- Real logo (raster, adaptive light/dark variants) ---------- */
.logo-img { height: 50px; width: auto; display: block; }
.logo-img--dark { display: none; }
/* scrolled solid (white) header → show the dark-on-light logo */
.site-header.header-solid .logo-img--light { display: none; }
.site-header.header-solid .logo-img--dark { display: block; }
/* mobile menu open turns the header light → show the dark logo too */
body.nav-open .site-header .logo-img--light { display: none; }
body.nav-open .site-header .logo-img--dark { display: block; }
/* footer logo (img on the dark footer → light variant) */
img.logo-mark--footer { width: auto; display: block; }
@media (max-width: 1180px) { .logo-img { height: 44px; } }

/* Nav (desktop) */
.main-nav { margin-left: auto; }

.nav-list {
  display: flex;
  gap: clamp(0.9rem, 1.4vw, 1.6rem);
  list-style: none;
}

.nav-list a {
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--c-ink-soft);
  text-decoration: none;
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.nav-list a:hover { color: var(--c-red); border-bottom-color: var(--c-red); }

.nav-extra { display: none; }

.header-actions {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.2vw, 1.1rem);
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 0.97rem;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
}

.header-phone:hover { color: var(--c-red); }

.header-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-wa);
  color: #fff;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.header-wa:hover { background: var(--c-wa-dark); color: #fff; transform: translateY(-1px); }
.header-wa .icon { width: 20px; height: 20px; }

/* Language switcher */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 700;
}

.lang-divider { color: #B9B6AC; }

.lang-switch .lang-option {
  text-decoration: none;
  color: var(--c-muted);
  padding: 0.2rem 0.3rem;
  border-radius: 6px;
}

.lang-switch a.lang-option:hover { color: var(--c-red); background: rgba(215, 38, 30, 0.08); }

.lang-switch .lang-option.is-active {
  color: #fff;
  background: var(--c-ink);
}

/* ---------- Header: motion preferences ----------
   Under reduced motion the smart hide/show slide is removed entirely (the
   header simply stays in place). The colour state change is allowed but made
   instant so it isn't a motion effect. */
@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: background-color 0s, border-color 0s, box-shadow 0s;
  }
  .site-header.header-hidden { transform: none; }
  .site-header::before,
  .logo-link,
  .nav-list a,
  .header-phone,
  .lang-switch .lang-option,
  .lang-divider,
  .burger,
  .burger-line { transition: none; }
}

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.burger-line {
  display: block;
  height: 2.5px;
  width: 100%;
  border-radius: 2px;
  background: var(--c-ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-open .burger-line:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-open .burger-line:nth-child(2) { opacity: 0; }
.nav-open .burger-line:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Header: TRANSPARENT (over hero) recolouring ----------
   When the header is NOT in the solid state, all dark-on-light parts flip to
   white so they read over the dark photographic hero. The red CTA, the green
   WhatsApp circle and the red "Com" of the logo keep their own colours. */
.site-header:not(.header-solid) .logo-link { color: #fff; }

.site-header:not(.header-solid) .nav-list a {
  color: #fff;
  border-bottom-color: transparent;
}
.site-header:not(.header-solid) .nav-list a:hover {
  color: #fff;
  border-bottom-color: #fff;
}

.site-header:not(.header-solid) .header-phone { color: #fff; }
.site-header:not(.header-solid) .header-phone:hover { color: #FF8D85; }

.site-header:not(.header-solid) .lang-switch .lang-option { color: #E7E9EE; }
.site-header:not(.header-solid) .lang-switch a.lang-option:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}
.site-header:not(.header-solid) .lang-switch .lang-option.is-active {
  color: var(--c-ink);
  background: #fff;
}
.site-header:not(.header-solid) .lang-divider { color: rgba(255, 255, 255, 0.5); }

.site-header:not(.header-solid) .burger {
  border-color: rgba(255, 255, 255, 0.5);
}
.site-header:not(.header-solid) .burger-line { background: #fff; }

/* Smooth the recolour of nav/controls between the two states */
.nav-list a,
.header-phone,
.lang-switch .lang-option,
.lang-divider,
.burger,
.burger-line {
  transition-property: color, background-color, border-color;
  transition-duration: 0.25s;
  transition-timing-function: ease;
}

/* ---------- Hero ---------- */
.hero {
  padding-block: clamp(3rem, 2rem + 3.5vw, 6rem);
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(215, 38, 30, 0.05), transparent 60%),
    var(--c-bg);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  align-items: center;
}

.hero h1 { margin-bottom: 0.5em; }

.hero-sub {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-muted);
  max-width: 40rem;
}

.hero-points {
  list-style: none;
  margin: 1.5rem 0 1.9rem;
  display: grid;
  gap: 0.7rem;
}

.hero-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-weight: 600;
  color: var(--c-ink-soft);
}

.hero-points .icon {
  color: var(--c-red);
  margin-top: 0.2em;
  width: 1.15em;
  height: 1.15em;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem 1.6rem;
  margin-bottom: 1.1rem;
}

.hero-contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.3rem;
}

.hero-phone,
.hero-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--c-ink);
  white-space: nowrap;
}

.hero-phone:hover { color: var(--c-red); }

.hero-wa { color: var(--c-wa-text); }
.hero-wa:hover { color: var(--c-wa-text-hover); }

.hero-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  color: var(--c-muted);
  margin: 0;
}

.hero-note .icon { color: var(--c-red); }

.hero-visual svg {
  width: 100%;
  height: auto;
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
}

/* ---------- Stats / intro ---------- */
.stats-intro { max-width: 760px; margin-bottom: var(--space-head); }
.stats-intro p:last-child { color: var(--c-muted); font-size: var(--fs-lead); margin-bottom: 0; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-card);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem) clamp(1.2rem, 0.95rem + 0.8vw, 1.7rem);
  box-shadow: var(--shadow-soft);
}

.stat-num {
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-red);
  white-space: nowrap;
}

.stat-unit {
  font-size: 0.46em;
  font-weight: 700;
  color: var(--c-ink-soft);
}

.stat-label {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--c-muted);
}

/* ---------- Services ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-card);
  align-items: stretch;
}

.service-card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--pad-card);
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-base) ease, box-shadow var(--t-base) ease, border-color var(--t-base) ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--c-line-strong);
}

.service-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  border-radius: var(--radius-xs);
  background: var(--c-red-tint);
  color: var(--c-red);
}

.service-icon svg { width: 28px; height: 28px; }

.service-card h3 { margin-bottom: 0.45em; }
.service-card p { margin: 0; color: var(--c-muted); font-size: 0.97rem; line-height: 1.55; }

/* ---------- Case studies ---------- */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-card);
  align-items: stretch;
}

.case-card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-base) ease, box-shadow var(--t-base) ease, border-color var(--t-base) ease;
}

.case-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--c-line-strong);
}

.case-visual {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #E9EDF1;
}

.case-visual svg { width: 100%; height: 100%; }

/* zoom the photo within its frame on card hover (frame clips it) */
.case-visual img { transition: transform 0.5s var(--ease); }
.case-card:hover .case-visual img { transform: scale(1.05); }

.case-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
}

.case-meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.case-tag {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.case-tag--res { background: #E4F0E6; color: #285D38; }
.case-tag--com { background: #E5EDF8; color: #25457A; }
.case-tag--ind { background: #F7EDDC; color: #7A4E0E; }
.case-tag--prv { background: #F3E7F1; color: #6E3263; }

.case-year {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-muted);
  white-space: nowrap;
}

.case-title {
  margin-bottom: 0.6em;
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
  line-height: 1.25;
}

.case-text { color: var(--c-ink-soft); font-size: 0.97rem; line-height: 1.55; margin-bottom: 0.9em; }
.case-text strong { color: var(--c-ink); }

/* BUG 1 FIX: facts mini-table.
   There are exactly 3 facts per card; the old repeat(4,1fr) created a 4th
   phantom column that squeezed the 3 real cells, so long values overlapped.
   Now an even 3-column grid sized to the content, values wrap cleanly, and
   thin dividers give vertical rhythm. Collapses to 1-col definition list when
   the columns get too narrow to hold long values. */
.case-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem 1rem;
  margin: 0.4rem 0 1.2rem;
  padding: 1rem 1.15rem;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
}

.case-facts li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  padding-left: 0.85rem;
  border-left: 2px solid var(--c-line-strong);
}

.fact-value {
  font-weight: 800;
  font-size: 0.98rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  /* allow long values like «Многоквартирный ЖК» to wrap instead of overlap */
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.fact-label {
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-muted);
}

.case-result {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  color: #1F6B38;
  margin-bottom: 1.1rem;
}

.case-result .icon {
  color: #1F6B38;
  flex: none;
  width: 1.3em;
  height: 1.3em;
  padding: 0.18em;
  border-radius: 50%;
  background: #E4F0E6;
}

.case-quote {
  margin: auto 0 0;
  padding: 0.85rem 0 0.2rem 1.1rem;
  border-left: 4px solid var(--c-red);
}

.case-quote p {
  font-size: 1.02rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.5;
  color: var(--c-ink);
  margin-bottom: 0.55em;
}

.case-quote cite {
  font-style: normal;
  font-size: 0.88rem;
  color: var(--c-muted);
}

.cases-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  margin-top: clamp(2.4rem, 1.8rem + 1.8vw, 3.4rem);
  padding: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem);
  text-align: center;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}

.cases-cta p {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  font-weight: 700;
  max-width: 46rem;
  margin: 0;
}

/* ---------- Process ---------- */
.process-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gap-card);
  counter-reset: step;
  align-items: stretch;
}

.process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.6rem 1.35rem 1.5rem;
  box-shadow: var(--shadow-soft);
}

.step-num {
  display: inline-flex;
  align-items: baseline;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-red);
  margin-bottom: 0.85rem;
}

.process-step h3 { font-size: 1.08rem; margin-bottom: 0.45em; }
.process-step p { font-size: 0.93rem; line-height: 1.5; color: var(--c-muted); margin-bottom: 1.1em; }

.step-time {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--c-ink-soft);
}

/* ---------- Trust ---------- */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-card);
  align-items: stretch;
}

.trust-card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--pad-card);
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-base) ease, box-shadow var(--t-base) ease, border-color var(--t-base) ease;
}

.trust-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--c-line-strong);
}

.trust-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  border-radius: var(--radius-xs);
  background: var(--c-navy);
  color: #fff;
}

.trust-icon svg { width: 28px; height: 28px; }

.trust-card h3 { font-size: 1.1rem; margin-bottom: 0.5em; }

.trust-doc {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--c-ink-soft);
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px dashed var(--c-line-strong);
}

.trust-benefit { font-size: 0.92rem; line-height: 1.55; color: var(--c-muted); margin: 0; }
.trust-benefit strong { color: var(--c-ink); }

/* ---------- Reviews ---------- */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.8rem + 1vw, 1.6rem);
}

.review-card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  box-shadow: var(--shadow-soft);
}

.review-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.review-stars { display: inline-flex; gap: 2px; color: var(--c-amber); }
.review-stars .icon { width: 18px; height: 18px; }

.review-source {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-muted);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  white-space: nowrap;
}

.review-text {
  font-size: 0.99rem;
  color: var(--c-ink-soft);
  margin-bottom: 1.2rem;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: auto;
}

.review-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--c-navy);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.review-author strong { display: block; font-size: 0.97rem; }
.review-author small { display: block; font-size: 0.84rem; color: var(--c-muted); }

/* ---------- FAQ ---------- */
.faq-container { max-width: 880px; }

.faq-list { display: grid; gap: 0.75rem; }

.faq-item {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease;
}

.faq-item:hover { border-color: var(--c-line-strong); }
.faq-item[open] { border-color: var(--c-line-strong); box-shadow: var(--shadow-hover); }

.faq-item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: 1rem 3.6rem 1rem 1.4rem;
  font-weight: 700;
  font-size: 1.04rem;
  line-height: 1.35;
  transition: color var(--t-fast) ease;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary:hover { color: var(--c-red); }

/* round affordance chip with chevron for clear tap target */
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -2px;
  border-right: 2.5px solid var(--c-red);
  border-bottom: 2.5px solid var(--c-red);
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.3s var(--ease);
}

.faq-item[open] summary::after { transform: translateY(-50%) rotate(-135deg); }

.faq-item[open] summary { color: var(--c-red); }

.faq-answer {
  padding: 0 1.4rem 1.3rem;
}
.faq-answer p { margin: 0; color: var(--c-ink-soft); line-height: 1.6; max-width: var(--measure); }

/* smooth open animation (content slides/fades in) */
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-answer { animation: faqReveal 0.3s var(--ease) both; }
  @keyframes faqReveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ---------- Contact / final CTA ---------- */
.section-dark {
  background:
    radial-gradient(900px 460px at 12% 0%, rgba(215, 38, 30, 0.16), transparent 55%),
    var(--c-navy-deep);
  color: #DDE0E5;
}

.section-dark h2 { color: #fff; }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  align-items: start;
}

.contact-copy > p { color: #B9BEC7; max-width: 34rem; line-height: 1.6; }

.contact-promise {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1.1rem;
  margin: 1.4rem 0 1.6rem;
  max-width: 34rem;
}

.contact-promise .icon { color: #FF8D85; }

.contact-list {
  list-style: none;
  display: grid;
  gap: 0.85rem;
}

.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: #C9CDD4;
}

.contact-list .icon { color: #FF8D85; margin-top: 0.2em; }
.contact-list .icon-wa-green { color: var(--c-wa); }

.contact-list a { color: #fff; font-weight: 600; }
.contact-list a:hover { color: #FF8D85; }

/* Form */
.lead-form {
  background: var(--c-surface);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  color: var(--c-ink);
}

.field { margin-bottom: 1.1rem; }

.field label {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 0.4rem;
}

.field input,
.field select {
  width: 100%;
  min-height: 50px;
  padding: 0.8rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
  appearance: none;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235A5F69'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 20px;
  padding-right: 2.6rem;
  cursor: pointer;
}

.field input::placeholder { color: #9CA0A8; }

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--c-red);
  box-shadow: 0 0 0 3px rgba(215, 38, 30, 0.16);
}

.field input.is-invalid {
  border-color: var(--c-red);
  background: #FFF6F5;
}

.field-error {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-red-dark);
}

.form-note {
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  color: var(--c-muted);
  text-align: center;
}

/* Form success state */
.form-success { text-align: center; padding: 1.2rem 0.4rem; }

.form-success .success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #E4F0E6;
  color: #1F6B38;
}

.form-success .success-icon svg { width: 32px; height: 32px; fill: currentColor; }
.form-success h3 { margin-bottom: 0.4em; }
.form-success p { color: var(--c-muted); margin-bottom: 1.2em; }

.btn-wa {
  background: var(--c-wa-text); /* white text needs ≥4.5:1 — brand green fails */
  color: #fff;
  box-shadow: 0 6px 18px rgba(14, 122, 67, 0.3);
}

.btn-wa:hover { background: var(--c-wa-text-hover); color: #fff; transform: translateY(-1px); }
.btn-wa .icon { width: 20px; height: 20px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-navy-deep);
  color: #B9BEC7;
  /* currentColor parts of the footer logo render light */
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.85fr 1.4fr;
  gap: clamp(1.8rem, 1.4rem + 1.5vw, 3rem);
  padding-block: clamp(3rem, 2.4rem + 2vw, 4.5rem);
}

.footer-brand { color: #EDEFF2; }
.footer-brand p { margin: 1.2rem 0 0; font-size: 0.93rem; line-height: 1.6; color: #B9BEC7; max-width: 20rem; }

.footer-col h3 {
  color: #fff;
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  margin-bottom: 1.1rem;
}

.footer-col ul { list-style: none; display: grid; gap: 0.6rem; }
.footer-col li { font-size: 0.93rem; line-height: 1.5; }

.footer-col a {
  color: #DDE0E5;
  text-decoration: none;
}

.footer-col a:hover { color: #FF8D85; text-decoration: underline; }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); }

.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-block: 1.2rem;
  font-size: 0.88rem;
}

.footer-bottom-inner p { margin: 0; }
.footer-bottom-inner a { color: #DDE0E5; text-decoration: none; }
.footer-bottom-inner a:hover { color: #FF8D85; }

/* ---------- Floating WhatsApp ---------- */
.wa-float {
  position: fixed;
  right: clamp(1rem, 2vw, 1.6rem);
  bottom: clamp(1rem, 2vw, 1.6rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--c-wa);
  color: #fff;
  box-shadow: 0 8px 24px rgba(29, 168, 81, 0.45);
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.wa-float:hover {
  background: var(--c-wa-dark);
  color: #fff;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 12px 30px rgba(29, 168, 81, 0.5);
}

.wa-float .icon { width: 30px; height: 30px; }

/* ---------- Reveal animations ----------
   BUG 3 NOTE: a large initial translate left a visible blank band under a
   heading until the IntersectionObserver fired for the items below it. The
   travel is kept small (16px) and the transition shorter so any not-yet-
   revealed content reads as a gentle settle, not an empty void. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* gentle stagger inside grids */
.services-grid .reveal:nth-child(3n + 2),
.stats-grid .reveal:nth-child(2),
.trust-grid .reveal:nth-child(2),
.reviews-grid .reveal:nth-child(2),
.process-steps .reveal:nth-child(2),
.cases-grid .reveal:nth-child(even) { transition-delay: 0.1s; }

.services-grid .reveal:nth-child(3n),
.stats-grid .reveal:nth-child(3),
.trust-grid .reveal:nth-child(3),
.reviews-grid .reveal:nth-child(3),
.process-steps .reveal:nth-child(3) { transition-delay: 0.18s; }

.stats-grid .reveal:nth-child(4),
.trust-grid .reveal:nth-child(4),
.process-steps .reveal:nth-child(4) { transition-delay: 0.26s; }

.process-steps .reveal:nth-child(5) { transition-delay: 0.34s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn,
  .wa-float,
  .service-card,
  .case-card { transition: none; }
}

/* ============================================================
   Responsive
   ============================================================ */

/* --- ≤1180px: collapse nav into drawer --- */
@media (max-width: 1180px) {
  :root { --header-h: 72px; }

  .logo-mark { height: 48px; }

  .burger { display: flex; }

  .lang-switch--header { display: none; }
  .header-cta { display: none; }

  /* When the mobile menu is open, force the header into its SOLID light look so
     the burger "X" and logo are dark-on-light and match the light drawer panel
     below it (the drawer is opaque and fully readable). */
  .nav-open .site-header {
    background: rgba(251, 251, 249, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-color: var(--c-line);
  }
  .nav-open .site-header::before { opacity: 0; }
  .nav-open .site-header .logo-link { color: var(--c-ink); }
  .nav-open .site-header .header-phone { color: var(--c-ink); }
  .nav-open .site-header .burger { border-color: var(--c-line); }
  .nav-open .site-header .burger-line { background: var(--c-ink); }
  /* Never hide the header while the menu is open */
  .nav-open .site-header.header-hidden { transform: none; }

  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 99;
    margin: 0;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 24px 40px rgba(22, 24, 29, 0.14);
    padding: 1.2rem clamp(1rem, 4vw, 2rem) 1.6rem;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
  }

  .nav-open .main-nav {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-list {
    flex-direction: column;
    gap: 0.1rem;
    margin-bottom: 1.1rem;
  }

  .nav-list a {
    display: block;
    padding: 0.7rem 0.2rem;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--c-line);
  }

  .nav-extra {
    display: grid;
    gap: 0.9rem;
    justify-items: start;
  }

  .nav-extra-phone,
  .nav-extra-wa {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--c-ink);
    font-size: 1.05rem;
  }

  .nav-extra-wa { color: var(--c-wa-text); }

  .nav-extra .btn { width: 100%; }

  @media (prefers-reduced-motion: reduce) {
    .main-nav { transition: none; }
  }
}

/* --- ≤1024px: grids tighten (tablet) --- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 560px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  /* 5 steps as 3+2 reads more balanced than 2+2+1 */
  .process-steps { grid-template-columns: repeat(3, 1fr); }
  .reviews-grid { grid-template-columns: 1fr; max-width: 680px; }
  .clients-grid { grid-template-columns: repeat(2, 1fr); }

  .contact-grid { grid-template-columns: 1fr; }
}

/* --- ≤860px: process steps to 2-up before the single column --- */
@media (max-width: 860px) {
  .process-steps { grid-template-columns: repeat(2, 1fr); }
}

/* --- ≤768px: single column cases --- */
@media (max-width: 768px) {
  .cases-grid { grid-template-columns: 1fr; }
  .header-phone-num { display: none; }
}

/* --- ≤560px: facts become a readable 1-col definition list ---
   At this width 3 columns can no longer hold long values like
   «Многоквартирный ЖК» without awkward wrapping, so stack them. */
@media (max-width: 560px) {
  .case-facts {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
  .case-facts li {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    padding-left: 0;
    border-left: 0;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--c-line-strong);
  }
  .case-facts li:last-child { padding-bottom: 0; border-bottom: 0; }
  .fact-value { order: 2; text-align: right; }
  .fact-label { order: 1; flex: none; }
}

/* --- ≤480px: compact --- */
@media (max-width: 480px) {
  :root { --header-h: 64px; }

  .logo-mark { height: 48px; }
  .logo-mark--footer { height: 40px; }

  .stats-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }

  .hero-cta .btn { width: 100%; }
  .cases-cta .btn { width: 100%; }

  .wa-float {
    width: 54px;
    height: 54px;
  }

  .wa-float .icon { width: 27px; height: 27px; }

  .footer-grid { grid-template-columns: 1fr; }

  .review-top { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* --- footer mid breakpoint --- */
@media (max-width: 1024px) and (min-width: 481px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* --- ≥1920px: a touch more air --- */
@media (min-width: 1900px) {
  :root { --space-section: 8rem; }
}

/* ============================================================
   Photo treatments (real photography integration)
   ============================================================ */

/* generic image cover helper */
.hero-bg,
.contact-bg,
.about-figure img,
.service-photo img,
.case-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------- Hero over photo ---------- */
.hero--photo {
  position: relative;
  isolation: isolate;
  min-height: clamp(520px, 80vh, 760px);
  display: flex;
  align-items: center;
  /* Header is a fixed transparent overlay, so add its height to the top
     padding to keep the headline clear of the header (no layout push-down). */
  padding-top: calc(var(--header-h) + clamp(1.5rem, 1rem + 2.5vw, 3.5rem));
  padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  background: var(--c-navy-deep);
  overflow: hidden;
}

.hero--photo .hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.hero--photo .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(18, 20, 26, 0.92) 0%, rgba(18, 20, 26, 0.78) 42%, rgba(18, 20, 26, 0.42) 100%),
    linear-gradient(0deg, rgba(18, 20, 26, 0.55), rgba(18, 20, 26, 0.25));
}

.hero-inner { width: 100%; }

.hero--photo .hero-copy { max-width: 46rem; }

.hero--photo h1 { color: #fff; font-size: var(--fs-display); }
.hero--photo .hero-sub { color: #D7DBE2; }

.hero--photo .hero-points li { color: #EBEDF1; }
.hero--photo .hero-points .icon { color: #FF8D85; }

.hero--photo .hero-phone { color: #fff; }
.hero--photo .hero-phone:hover { color: #FF8D85; }
.hero--photo .hero-wa { color: #fff; }
.hero--photo .hero-wa:hover { color: #25D366; }

.hero--photo .hero-note { color: #C4C9D2; }
.hero--photo .hero-note .icon { color: #FF8D85; }

/* ---------- About intro with photo ---------- */
.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  align-items: center;
  max-width: none;
}

.about-intro-text p { line-height: 1.65; }
.about-intro-text p:last-child { margin-bottom: 0; }

.about-figure {
  margin: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 4 / 3;
}

/* ---------- Service cards with photo ---------- */
.service-card--photo {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.service-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  background: #E9EDF1;
  overflow: hidden;
}

/* subtle bottom gradient so the photo sits well against the body */
.service-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(18, 20, 26, 0.18) 100%);
  pointer-events: none;
}

.service-photo img {
  transition: transform 0.5s var(--ease);
}

.service-card--photo:hover .service-photo img { transform: scale(1.06); }

.service-card--photo .service-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--pad-card);
}

.service-card--photo h3 { margin-bottom: 0.45em; }
.service-card--photo p { margin: 0; color: var(--c-muted); font-size: 0.97rem; line-height: 1.55; }

/* ---------- Case visual as photo figure ---------- */
.case-visual {
  margin: 0;
  overflow: hidden;
}

/* ---------- Case client line (repurposed quote slot) ---------- */
.case-client {
  margin: auto 0 0;
  padding: 0.85rem 1.1rem;
  background: var(--c-bg-alt);
  border-left: 4px solid var(--c-red);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--c-ink-soft);
}

.case-client strong { color: var(--c-ink); }

/* ---------- Clients / «Нам доверяют» ---------- */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-card);
  list-style: none;
  align-items: stretch;
}

.client-chip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  min-height: 96px;
  padding: 1.1rem 1.3rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  transition: transform var(--t-base) ease, box-shadow var(--t-base) ease, border-color var(--t-base) ease;
}

.client-chip:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--c-line-strong);
}

.client-chip small {
  font-weight: 600;
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-red);
}

.clients-note {
  margin: clamp(1.8rem, 1.4rem + 1vw, 2.6rem) 0 0;
  max-width: var(--measure);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-muted);
}

/* ---------- Contact section background photo ---------- */
.contact.section-dark { position: relative; isolation: isolate; overflow: hidden; }

.contact-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  opacity: 0.22;
}

.contact.section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 460px at 12% 0%, rgba(215, 38, 30, 0.22), transparent 55%),
    linear-gradient(0deg, rgba(20, 22, 28, 0.82), rgba(20, 22, 28, 0.82));
}

/* ---------- Responsive: photo blocks ---------- */
@media (max-width: 1024px) {
  .about-intro { grid-template-columns: 1fr; }
  .about-figure { max-width: 560px; }
  .clients-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .hero--photo .hero-overlay {
    background: linear-gradient(0deg, rgba(18, 20, 26, 0.92) 0%, rgba(18, 20, 26, 0.72) 100%);
  }
}

@media (max-width: 480px) {
  .clients-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HERO SPLIT — two-column hero (offer | Design × Construction)
   DESKTOP (≥900px): two side-by-side columns of equal height —
     LEFT  = the offer copy on a solid dark graphite surface;
     RIGHT = the interactive split visual (two photographic
             halves, blueprint | construction, with the red seam).
   MOBILE (<900px): the column stacks — offer copy first on the
     dark surface, then a compact labelled photo band below.
   Every hook (hero--split, hero-split, hero-panel(-img/label/
   title/sub), hero-seam(-mark), hero-overlay, hero-inner,
   hero-copy, reveal, is-active, is-loaded, is-auto-*) is kept.
   ============================================================ */

/* The split visual is a normal flex row of the two panels filling
   the right column's full height. (On desktop the section is a
   grid; on mobile it becomes a short band — see the breakpoints.) */
.hero--split .hero-split {
  position: relative;
  z-index: 0;
  display: flex;
  width: 100%;
  height: 100%;
  background: var(--c-navy-deep);
}

/* Each half. Default resting state = 50/50 (flex: 1 1 0). */
.hero--split .hero-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  transition: flex-grow .5s cubic-bezier(.4, .14, .2, 1);
}

.hero--split .hero-panel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* dim + slightly desaturate at rest so white copy stays legible */
  filter: brightness(.62) saturate(.9);
  transform: scale(1.02);
  transition: filter .55s ease, transform .6s cubic-bezier(.4, .14, .2, 1);
}

/* Per-panel photographic accent gradient (keeps labels readable) */
.hero--split .hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(18, 20, 26, .72) 0%, rgba(18, 20, 26, .12) 55%, rgba(18, 20, 26, .35) 100%);
  transition: opacity .5s ease;
  pointer-events: none;
}

/* Hover light-sweep — a soft band of light glides across the half on hover */
.hero--split .hero-panel::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 55%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .08) 38%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, .08) 62%, transparent 100%);
  transform: translateX(-200%) skewX(-12deg);
  opacity: 0;
}

@keyframes heroSweep {
  0%   { transform: translateX(-200%) skewX(-12deg); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateX(340%) skewX(-12deg); opacity: 0; }
}

/* Panel label sits at the lower edge of each half = interactive element */
.hero--split .hero-panel-label {
  position: absolute;
  left: clamp(1rem, 1vw + .5rem, 2rem);
  right: clamp(1rem, 1vw + .5rem, 2rem);
  bottom: clamp(1.25rem, 1vw + 1rem, 2.25rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  color: #fff;
  pointer-events: none;
}

.hero--split .hero-panel-title {
  font-weight: 800;
  font-size: clamp(1.15rem, .9rem + 1.1vw, 1.85rem);
  letter-spacing: .01em;
  line-height: 1.05;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
  transform-origin: left bottom;
  transition: transform .45s cubic-bezier(.4, .14, .2, 1);
}

.hero--split .hero-panel-title::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-bottom: .55rem;
  background: var(--c-red);
  border-radius: 2px;
  transition: width .45s ease;
}

.hero--split .hero-panel-sub {
  font-size: clamp(.82rem, .78rem + .2vw, .98rem);
  font-weight: 600;
  color: #E7E9EE;
  max-width: 30ch;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
  /* visible by default for no-hover/touch; on desktop starts faded */
  opacity: 1;
  transition: opacity .45s ease, transform .45s ease;
}

/* Red seam between the two halves with centered diagonal × accent */
.hero--split .hero-seam {
  position: relative;
  flex: 0 0 auto;
  width: 3px;
  align-self: stretch;
  background: linear-gradient(180deg, rgba(225, 37, 27, .15), var(--c-red) 18%, var(--c-red) 82%, rgba(225, 37, 27, .15));
  z-index: 3;
  box-shadow: 0 0 18px rgba(225, 37, 27, .5);
}

.hero--split .hero-seam-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-red);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(225, 37, 27, .55), 0 0 0 6px rgba(18, 20, 26, .35);
}

/* The old full-bleed dark overlay (for text over photo) is no longer needed:
   the copy now lives on its own dark column. Take it out of layout flow and
   hide it on desktop; the per-panel bottom gradient keeps labels legible. */
.hero--split .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: none;
}

/* keep the copy above any decorative layers */
.hero--split .hero-inner { position: relative; z-index: 1; }

/* ---------- DESKTOP (≥900px): TWO COLUMNS side by side ---------- */
@media (min-width: 900px) {
  /* The section becomes a 2-col grid: LEFT = offer copy, RIGHT = split visual.
     The overlay is absolutely positioned, so it stays out of the grid track
     flow and the grid sees exactly the two real columns. */
  .hero--split.hero--photo {
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    align-items: stretch;
    min-height: clamp(540px, 78vh, 740px);
    padding: 0;            /* columns own their own padding */
    /* NB: no overflow:hidden here — it would clip the left column's CTA/phone
       when the copy is taller than min-height. The row grows to fit content. */
  }

  /* LEFT column: solid dark graphite surface holding the offer copy. */
  .hero--split .hero-inner {
    /* override .container's max-width/auto-centering so it fills the column */
    max-width: none;
    margin-inline: 0;
    display: flex;
    align-items: center;            /* vertically centered */
    background:
      radial-gradient(820px 420px at 12% 0%, rgba(215, 38, 30, 0.10), transparent 60%),
      linear-gradient(180deg, #20232B 0%, var(--c-navy-deep) 100%);
    /* top padding clears the fixed transparent header + breathing room */
    padding-top: calc(var(--header-h) + clamp(1.25rem, 1rem + 2vw, 2.75rem));
    padding-bottom: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
    padding-inline: clamp(1.5rem, 0.8rem + 3vw, 3.75rem);
  }

  /* cap the text measure so the copy never sprawls too wide */
  .hero--split .hero-copy { max-width: 34rem; }

  /* RIGHT column: the split visual fills its track at full height.
     overflow:hidden lives HERE (not on the whole hero) so the photo
     hover-zoom stays clipped without cutting the left column's CTA. */
  .hero--split .hero-split { height: 100%; overflow: hidden; }

  /* lift labels above the per-panel gradient so they always read */
  .hero--split .hero-panel-label { z-index: 4; }

  /* labels raised to the vertical middle of each half so they're clearly
     visible (not tucked at the bottom edge) */
  .hero--split .hero-panel-label {
    left: clamp(1.1rem, 1.4vw + .5rem, 2rem);
    right: clamp(1.1rem, 1.4vw + .5rem, 2rem);
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    align-items: flex-start;
    text-align: left;
  }

  /* readable chip behind each title for legibility over the photo */
  .hero--split .hero-panel-title {
    padding: .35rem .8rem;
    background: rgba(18, 20, 26, .42);
    backdrop-filter: blur(3px);
    border-radius: 8px;
  }
}

/* ---------- DESKTOP hover behaviour (hover + fine pointer, ≥900px) ---------- */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  /* sub-line starts hidden on desktop, revealed on hover */
  .hero--split .hero-panel-sub {
    opacity: 0;
    transform: translateY(8px);
  }

  /* expand hovered panel, shrink + dim the sibling */
  .hero--split .hero-panel:hover {
    flex-grow: 1.62;
  }
  .hero--split .hero-split:hover .hero-panel:not(:hover) {
    flex-grow: .78;
  }
  .hero--split .hero-split:hover .hero-panel:not(:hover) .hero-panel-img {
    filter: brightness(.4) saturate(.7);
  }
  .hero--split .hero-split:hover .hero-panel:not(:hover) .hero-panel-title {
    transform: scale(.94);
  }

  /* hovered panel: brighten + zoom photo, scale up label, fade in sub */
  .hero--split .hero-panel:hover .hero-panel-img {
    filter: brightness(.82) saturate(1.02);
    transform: scale(1.08);
  }
  .hero--split .hero-panel:hover .hero-panel-title {
    transform: scale(1.08);
  }
  .hero--split .hero-panel:hover .hero-panel-title::before {
    width: 56px;
  }
  .hero--split .hero-panel:hover .hero-panel-sub {
    opacity: 1;
    transform: translateY(0);
  }

  /* the light-sweep glides across the hovered half (one pass) */
  .hero--split .hero-panel:hover::before {
    animation: heroSweep .85s cubic-bezier(.3, .1, .2, 1);
  }
}

/* ---------- MOBILE (<900px) / TOUCH / NO-HOVER: STACK, OFFER-FIRST ----------
   The hero stacks as a single column. DOM order is now: copy first, then the
   visual — so the OFFER (headline + CTA + phone) is the first thing on screen,
   and below it sits a compact labelled photo BAND (the two halves side-by-side
   as short strips). The split mechanic is preserved structurally (both panels +
   seam stay in the DOM). Compact — no return to the old 3-screen-tall hero. */
@media (hover: none), (pointer: coarse), (max-width: 899.98px) {
  /* the whole hero flows as a normal column (copy on top, band below). */
  .hero--split.hero--photo {
    display: block;
    align-items: stretch;
    min-height: 0;
    padding: 0;
  }

  /* OFFER COPY first, on the solid dark surface; its top padding clears the
     fixed transparent header so the headline isn't hidden under it. */
  .hero--split .hero-inner {
    background:
      radial-gradient(700px 380px at 10% 0%, rgba(215, 38, 30, 0.10), transparent 60%),
      var(--c-navy-deep);
    padding-top: calc(var(--header-h) + clamp(1.2rem, 1rem + 3vw, 2rem));
    padding-bottom: clamp(1.6rem, 1.3rem + 3vw, 2.4rem);
  }

  .hero--split .hero-copy { max-width: none; }

  /* compact photo band below the copy: two halves side-by-side (row), short */
  .hero--split .hero-split {
    position: relative;     /* flows in document so it sets its own height */
    z-index: 0;
    flex-direction: row;
    height: clamp(150px, 26vh, 220px);
    margin-top: 0;
  }

  .hero--split .hero-panel {
    flex: 1 1 0;
    height: 100%;
    min-height: 0;
  }

  .hero--split .hero-panel-img {
    filter: brightness(.55) saturate(.95);
    transform: none;
  }

  /* compact labels for the two strips */
  .hero--split .hero-panel-label {
    left: clamp(0.8rem, 3vw, 1.2rem);
    right: clamp(0.8rem, 3vw, 1.2rem);
    bottom: clamp(0.8rem, 3vw, 1.2rem);
    align-items: flex-start;
    text-align: left;
    gap: 0.1rem;
  }
  .hero--split .hero-panel-title {
    font-size: clamp(1rem, 0.85rem + 1.2vw, 1.3rem);
  }
  .hero--split .hero-panel-title::before { margin-bottom: 0.4rem; }
  /* hide the secondary sub-line in the band to keep strips clean & short;
     the full offer copy lives in the block above */
  .hero--split .hero-panel-sub { display: none; }

  /* vertical red seam between the two side-by-side strips */
  .hero--split .hero-seam {
    width: 3px;
    height: auto;
    align-self: stretch;
    background: linear-gradient(180deg, rgba(225, 37, 27, .15), var(--c-red) 18%, var(--c-red) 82%, rgba(225, 37, 27, .15));
  }
  .hero--split .hero-seam-mark {
    width: 2rem;
    height: 2rem;
    font-size: 1.1rem;
  }

  /* overlay stays out of the way (already display:none, position:absolute) */
  .hero--split .hero-overlay { display: none; }

  /* optional tap-to-expand (progressive enhancement): gently brighten only */
  .hero--split .hero-panel.is-active .hero-panel-img { filter: brightness(.78) saturate(1.02); }
}

/* ---------- Reduced motion: no zoom / no scale / instant state ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero--split .hero-panel,
  .hero--split .hero-panel-img,
  .hero--split .hero-panel-title,
  .hero--split .hero-panel-title::before,
  .hero--split .hero-panel-sub,
  .hero--split .hero-panel::after {
    transition: none !important;
  }
  .hero--split .hero-panel-img { transform: none !important; }
  .hero--split .hero-panel:hover .hero-panel-img { transform: none !important; }
  .hero--split .hero-split:hover .hero-panel:not(:hover) .hero-panel-title,
  .hero--split .hero-panel:hover .hero-panel-title { transform: none !important; }
}

/* ============================================================
   HERO SPLIT — SELF-ANIMATING LIFE
   Adds continuous, tasteful motion so the hero never looks
   static at rest:
     1. Auto "breathing" balance between the two halves (desktop)
     2. Continuous Ken-Burns pan/zoom on both photos
     3. Gentle pulse + shimmer on the red seam × mark
     4. One-shot polished entrance reveal on load
     5. Slow auto-alternating highlight on stacked mobile panels
   All motion is fully neutralized under prefers-reduced-motion
   and paused (via JS removing classes) when the tab is hidden.
   The dark overlay + copy block are untouched, so the headline,
   CTA, phone, WhatsApp and SLA note stay AA-legible at all times.
   ============================================================ */

/* ---------- Keyframes ---------- */

/* Ken-Burns: slow continuous pan + zoom. Two variants so the two
   panels never move in lockstep. Transform only — brightness is
   handled separately via `filter` so emphasis can layer on top. */
/* (Ken-Burns keyframes removed — photos stay still per user feedback) */

/* Seam × mark: very gentle breathing pulse + soft glow */
@keyframes heroSeamPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 6px 18px rgba(225, 37, 27, .55), 0 0 0 6px rgba(18, 20, 26, .35), 0 0 0 0 rgba(225, 37, 27, .3);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: 0 6px 20px rgba(225, 37, 27, .6), 0 0 0 6px rgba(18, 20, 26, .32), 0 0 18px 3px rgba(225, 37, 27, .3);
  }
}

/* (Seam shimmer keyframes removed — kept only the subtle pulse) */

/* Entrance: panels slide in from their sides, seam draws in */
@keyframes heroPanelInLeft {
  from { opacity: 0; transform: translateX(-7%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes heroPanelInRight {
  from { opacity: 0; transform: translateX(7%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes heroSeamDraw {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}

/* ---------- Calm hero: no continuous Ken-Burns / no breathing (per user) ----------
   The photos stay still; the halves react only to hover. Only a subtle
   seam pulse remains as a discoverability hint. */
@media (prefers-reduced-motion: no-preference) {
  /* ---------- Seam "alive" pulse (subtle hint only; no travelling shimmer) ---------- */
  .hero--split .hero-seam-mark {
    animation: heroSeamPulse 3.4s ease-in-out infinite;
    will-change: transform, box-shadow;
  }
}

/* ---------- DESKTOP auto "breathing" balance (hover + fine pointer, ≥900px)
   JS toggles `.is-auto-design` / `.is-auto-build` on `.hero-split` on a slow
   timer. CSS animates flex-grow + photo brightness with long durations.
   Hover always wins: when `.hero-split:hover`, the auto classes are ignored
   (the existing hover rules take over) and JS also pauses the timer. ---------- */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  /* slower, smoother flex transition than the snappy hover default */
  .hero--split .hero-panel {
    transition: flex-grow 3.4s cubic-bezier(.37, 0, .27, 1);
  }
  /* hover restores the quicker, responsive feel */
  .hero--split .hero-split:hover .hero-panel {
    transition: flex-grow .5s cubic-bezier(.4, .14, .2, 1);
  }

  /* brightness emphasis transition is independent of the Ken-Burns transform */
  .hero--split .hero-panel-img {
    transition: filter 3s ease, transform .6s cubic-bezier(.4, .14, .2, 1);
  }
  .hero--split .hero-split:hover .hero-panel .hero-panel-img {
    transition: filter .55s ease, transform .6s cubic-bezier(.4, .14, .2, 1);
  }

  /* DESIGN emphasized */
  .hero--split .hero-split.is-auto-design:not(:hover) .hero-panel--design {
    flex-grow: 1.38;
  }
  .hero--split .hero-split.is-auto-design:not(:hover) .hero-panel--build {
    flex-grow: .72;
  }
  .hero--split .hero-split.is-auto-design:not(:hover) .hero-panel--design .hero-panel-img {
    filter: brightness(.8) saturate(1.0);
  }
  .hero--split .hero-split.is-auto-design:not(:hover) .hero-panel--build .hero-panel-img {
    filter: brightness(.5) saturate(.82);
  }
  .hero--split .hero-split.is-auto-design:not(:hover) .hero-panel--design .hero-panel-sub {
    opacity: 1;
    transform: translateY(0);
  }

  /* BUILD emphasized */
  .hero--split .hero-split.is-auto-build:not(:hover) .hero-panel--build {
    flex-grow: 1.38;
  }
  .hero--split .hero-split.is-auto-build:not(:hover) .hero-panel--design {
    flex-grow: .72;
  }
  .hero--split .hero-split.is-auto-build:not(:hover) .hero-panel--build .hero-panel-img {
    filter: brightness(.8) saturate(1.0);
  }
  .hero--split .hero-split.is-auto-build:not(:hover) .hero-panel--design .hero-panel-img {
    filter: brightness(.5) saturate(.82);
  }
  .hero--split .hero-split.is-auto-build:not(:hover) .hero-panel--build .hero-panel-sub {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- One-shot entrance reveal on load ----------
   JS adds `.is-loaded` on DOMContentLoaded. The .hero-copy keeps its own
   existing `.reveal` (handled by the IntersectionObserver) — here we only
   animate the panels and the seam so the two systems don't fight. */
@media (prefers-reduced-motion: no-preference) {
  .hero--split.is-loaded .hero-panel--design {
    animation: heroPanelInLeft .72s cubic-bezier(.22, .61, .36, 1) both;
  }
  .hero--split.is-loaded .hero-panel--build {
    animation: heroPanelInRight .72s cubic-bezier(.22, .61, .36, 1) both;
  }
  .hero--split.is-loaded .hero-seam {
    transform-origin: center;
    animation: heroSeamDraw .6s ease .35s both;
  }
}

/* ---------- MOBILE / TOUCH: slow auto-alternating highlight ----------
   JS toggles the same `.is-auto-design` / `.is-auto-build` on the stacked
   `.hero-split`; here it gently brightens the highlighted stacked panel.
   No layout shift (height unchanged), content stays fully readable. */
@media (hover: none), (pointer: coarse), (max-width: 899.98px) {
  @media (prefers-reduced-motion: no-preference) {
    .hero--split .hero-panel-img { transition: filter 2.6s ease; }
    .hero--split .hero-split.is-auto-design .hero-panel--design .hero-panel-img,
    .hero--split .hero-split.is-auto-build .hero-panel--build .hero-panel-img {
      filter: brightness(.74) saturate(1.0);
    }
  }
}

/* ---------- Reduced motion: kill ALL of the above ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero--split .hero-panel--design .hero-panel-img,
  .hero--split .hero-panel--build .hero-panel-img,
  .hero--split .hero-seam-mark,
  .hero--split .hero-seam::before,
  .hero--split .hero-panel:hover::before,
  .hero--split.is-loaded .hero-panel--design,
  .hero--split.is-loaded .hero-panel--build,
  .hero--split.is-loaded .hero-seam {
    animation: none !important;
  }
  .hero--split .hero-panel::before { display: none; }
  .hero--split .hero-seam::before { display: none; }
  /* neutralize any breathing flex/brightness state instantly */
  .hero--split .hero-split.is-auto-design .hero-panel,
  .hero--split .hero-split.is-auto-build .hero-panel {
    flex-grow: 1 !important;
  }
  .hero--split .hero-split.is-auto-design .hero-panel-img,
  .hero--split .hero-split.is-auto-build .hero-panel-img {
    filter: brightness(.62) saturate(.9) !important;
  }
}