/*
Theme Name: VERON
Theme URI: https://veron.pro
Author: VERON
Description: Кастомная тема портфолио корпусной мебели VERON (паритет с Tilda). Редактирование контента - через админку, без кода.
Version: 1.1.0
Text Domain: veron
Requires at least: 6.0
Requires PHP: 8.0
*/

/* Base tokens - refined from Tilda/screenshot */
:root {
  --veron-black: #0a0a0a;
  --veron-dark: #111111;
  --veron-gray: #6b6b6b;
  --veron-muted: #9a9a9a;
  --veron-border: #e8e8e8;
  --veron-white: #ffffff;
  --veron-bg: #f7f7f7;
  --veron-accent: #c9a227;
  --veron-font: "Montserrat", system-ui, -apple-system, sans-serif;
  --veron-container: 1200px;
  --veron-content-70: min(100% - 32px, 70vw);
  --veron-content-60: min(100% - 32px, 60vw);
  --veron-header-h: 88px;
  --veron-radius: 4px;
  --veron-transition: 0.35s ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100%;
}

/* Fixed header: menu anchors land below the bar, not under it */
#hero,
#stories,
#projects,
#reviews,
#how-we-work,
#partners,
#clients {
  scroll-margin-top: calc(var(--veron-header-h, 88px) + 12px);
}

body {
  margin: 0;
  font-family: var(--veron-font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--veron-dark);
  background: var(--veron-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  max-width: 100%;
}

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

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

button,
input,
textarea,
select {
  font-family: inherit;
}

.veron-container {
  width: min(100% - 32px, var(--veron-container));
  margin-inline: auto;
}

.veron-container--wide {
  width: min(100% - 32px, 1400px);
  margin-inline: auto;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ========== Header (Tilda-like: over hero / hide / solid) ========== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--veron-header-h);
  width: 100%;
  max-width: 100vw;
  color: var(--veron-white);
  overflow: hidden; /* never push page sideways */
  transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease;
}

.site-header--over-hero {
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
}

.site-header--solid {
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.site-header--hidden {
  transform: translateY(-110%);
  pointer-events: none;
  opacity: 0;
}

.site-header__inner {
  /* No text menu: logo left, phone/chats/CTA right */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
  height: 100%;
  width: 100%;
  max-width: min(100%, 1680px);
  margin-inline: auto;
  padding-inline: clamp(20px, 3vw, 48px);
  box-sizing: border-box;
  min-width: 0;
}

.site-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  line-height: 1;
  background: transparent !important;
  min-width: 0;
  margin-right: 0;
}

/* Official company logo PNG (black) → white on dark header */
.site-logo__img,
.site-logo img,
.site-logo .custom-logo {
  height: clamp(40px, 4.2vw, 52px) !important;
  width: auto !important;
  max-width: 200px !important;
  max-height: 52px !important;
  object-fit: contain;
  background: transparent !important;
  filter: brightness(0) invert(1);
}

.site-logo__text {
  font-family: "Aptos", "Aptos Display", Calibri, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 1.8vw, 1.75rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  background: transparent;
}

.custom-logo-link {
  display: flex;
  align-items: center;
  line-height: 0;
  background: transparent !important;
}

/* Header text menu disabled (site uses logo + contacts only). */
.primary-nav {
  display: none !important;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 0 0 auto;
  min-width: 0;
  margin-left: auto;
  padding-left: 0;
}

.header-phone {
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  font-weight: 600;
  white-space: nowrap;
}

.header-social {
  display: flex;
  gap: 14px;
  align-items: center;
}

.header-social__btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: grid;
  place-items: center;
  opacity: 0.95;
  transition: background 0.2s, transform 0.2s, border-color 0.2s;
}

.header-social__btn:hover {
  transform: translateY(-1px);
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.header-social__btn--wa:hover {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}

.header-social__btn--tg:hover {
  background: #2aabee;
  border-color: #2aabee;
  color: #fff;
}

.header-social__btn--vk:hover {
  background: #0077ff;
  border-color: #0077ff;
  color: #fff;
}

.header-social__btn--ok:hover {
  background: #ee8208;
  border-color: #ee8208;
  color: #fff;
}

.header-social__btn--max:hover {
  /* Max brand gradient vibe */
  background: linear-gradient(135deg, #4cf 0%, #53e 55%, #93d 100%);
  border-color: transparent;
  color: #fff;
}

.header-social__btn--ig:hover {
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  border-color: transparent;
  color: #fff;
}

/* Catalog TG: same icon as contact, slight ring so it’s distinct */
.header-social__btn--tg-catalog {
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}

.header-social__btn--tg-catalog:hover {
  box-shadow: none;
}

.header-social__max-icon {
  display: block;
}

.header-social__txt {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: none;
  border-radius: var(--veron-radius);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--veron-white);
  color: var(--veron-black);
}

.btn--primary:hover {
  background: #f0f0f0;
}

.btn--ghost {
  background: transparent;
  color: var(--veron-white);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

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

.btn--sm {
  padding: 10px 18px;
  font-size: 0.88rem;
}

.header-cta.btn--sm {
  padding: 12px 20px;
  font-size: 0.92rem;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  z-index: 2;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--veron-white);
  margin-inline: auto;
  border-radius: 1px;
}

.nav-toggle.is-open {
  background: rgba(255, 255, 255, 0.22);
}

/* Desktop: full contact strip, no burger */
@media (min-width: 1100px) {
  .primary-nav {
    display: none !important;
  }

  .nav-toggle {
    display: none !important;
  }

  .site-header__inner {
    padding-inline: clamp(24px, 3.2vw, 52px);
  }

  .header-actions {
    gap: 14px;
  }
}

/* Tablet/phone: logo | fav + burger (contacts in panel) */
@media (max-width: 1099.98px) {
  .site-header__inner {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-inline: 12px;
    max-width: 100%;
  }

  .site-logo {
    min-width: 0;
  }

  .header-actions {
    min-width: 0;
    padding-left: 0;
  }
}

/* -- Mobile / tablet header: logo + fav + burger only -- */
@media (max-width: 1099.98px) {
  :root {
    --veron-header-h: 64px;
  }

  .site-header {
    overflow: hidden;
  }

  .site-header__inner {
    gap: 8px;
    padding-inline: 12px;
  }

  .site-logo {
    min-width: 0;
    max-width: min(46vw, 180px);
  }

  .site-logo__img,
  .site-logo img,
  .site-logo .custom-logo {
    height: 36px !important;
    max-height: 36px !important;
    max-width: 100% !important;
  }

  .site-logo__text {
    font-size: 1.15rem;
    letter-spacing: 0.14em;
  }

  /* Kill desktop nav completely on small screens (width + overflow) */
  .primary-nav {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    pointer-events: none !important;
  }

  .header-actions {
    gap: 8px;
    flex-shrink: 0;
  }

  /* Messengers + full phone: in dropdown. CTA stays visible (compact). */
  .header-social,
  .header-phone {
    display: none !important;
  }

  .header-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.15;
    max-width: 42vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  }

  .header-fav {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .nav-toggle {
    display: flex !important;
  }
}

@media (max-width: 380px) {
  .header-cta {
    max-width: 34vw;
    padding: 8px 10px !important;
    font-size: 0.7rem !important;
  }
}

/* Dimmed area under compact menu - tap to close */
.mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: var(--veron-header-h) 0 0 0;
  z-index: 998;
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  max-width: 100vw;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-backdrop.is-open,
.mobile-nav-backdrop.is-open[hidden] {
  display: block !important;
}

/* Compact dropdown panel (not full-screen) */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--veron-header-h);
  right: 10px;
  left: auto;
  bottom: auto;
  width: min(300px, calc(100vw - 20px));
  max-height: min(58vh, 420px);
  z-index: 999;
  margin: 0;
  padding: 0;
  background: transparent;
  box-sizing: border-box;
  pointer-events: none;
}

.mobile-nav.is-open,
.mobile-nav.is-open[hidden] {
  display: block !important;
  pointer-events: auto;
}

.mobile-nav__panel {
  background: #121212;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  max-height: min(58vh, 420px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px 14px 12px;
  box-sizing: border-box;
}

/*
 * Lock page scroll without body position:fixed (fixed+top causes jump on close).
 * JS blocks touchmove/wheel on the document; list can still scroll inside panel.
 */
html.veron-nav-open,
body.veron-nav-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.veron-nav-open {
  /* Keep layout stable; do NOT set position:fixed / top */
  touch-action: none;
}

body.veron-nav-open .mobile-nav,
body.veron-nav-open .mobile-nav__panel {
  touch-action: pan-y;
}

/* Mobile menu open: always dark solid header (readable on light pages). */
body.veron-nav-open .site-header,
.site-header.site-header--menu-open {
  background: rgba(10, 10, 10, 0.96) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  color: #fff !important;
  transform: none !important;
  opacity: 1 !important;
}

body.veron-nav-open .site-header .nav-toggle,
.site-header.site-header--menu-open .nav-toggle {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
}

body.veron-nav-open .site-header .nav-toggle span,
.site-header.site-header--menu-open .nav-toggle span {
  background: #fff;
}

body.veron-nav-open .site-header .header-fav,
body.veron-nav-open .site-header .header-cta,
.site-header.site-header--menu-open .header-fav,
.site-header.site-header--menu-open .header-cta {
  color: #fff;
}

.mobile-nav ul,
.mobile-nav .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
}

.mobile-nav li {
  margin: 0;
  width: 100%;
}

.mobile-nav a {
  display: block;
  padding: 10px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--veron-white);
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.3;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.mobile-nav__contacts {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.mobile-nav__contacts a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 9px 2px;
  font-size: 0.9rem;
}

/* CTA in dark panel: not btn--primary (white-on-white) */
.mobile-nav__contacts .btn,
.mobile-nav .btn {
  margin-top: 10px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border: 0;
  border-radius: var(--veron-radius, 4px);
  background: #fff !important;
  color: #0a0a0a !important;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  border-bottom: 0 !important;
}

.mobile-nav__contacts .btn:hover,
.mobile-nav .btn:hover {
  background: #f0f0f0 !important;
  color: #0a0a0a !important;
}

@media (min-width: 1100px) {
  .mobile-nav,
  .mobile-nav-backdrop {
    display: none !important;
  }
}

/* ========== Hero / Promo Slider (edge-to-edge, full viewport) ========== */
.site-main {
  padding-top: var(--veron-header-h);
}

.site-main--flush {
  padding-top: 0;
}

.hero.promo-slider {
  position: relative;
  background: var(--veron-black);
  color: var(--veron-white);
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}

/*
 * Slightly shorter than viewport so the next block peeks in -
 * makes it obvious the page continues below.
 */
.hero-swiper {
  width: 100%;
  height: calc(100svh - 88px);
  min-height: 420px;
  max-height: calc(100dvh - 72px);
}

@media (max-width: 640px) {
  .hero-swiper {
    height: calc(100svh - 72px);
    min-height: 380px;
    max-height: calc(100dvh - 64px);
  }
}

/* Pulsing “scroll down” cue on hero */
.hero-scroll-hint {
  position: absolute;
  left: 50%;
  /* Above Swiper pagination dots */
  bottom: 52px;
  z-index: 25;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  opacity: 0.95;
  animation: veron-scroll-hint-bob 1.6s ease-in-out infinite;
}

.hero-scroll-hint:hover,
.hero-scroll-hint:focus-visible {
  opacity: 1;
  outline: none;
}

.hero-scroll-hint__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  opacity: 0.9;
}

.hero-scroll-hint__arrow {
  display: block;
  width: 22px;
  height: 22px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(45deg);
  margin-top: -2px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  animation: veron-scroll-hint-blink 1.6s ease-in-out infinite;
}

.hero.is-scrolled-past .hero-scroll-hint,
body.veron-scrolled .hero-scroll-hint {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

@keyframes veron-scroll-hint-bob {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(8px);
  }
}

@keyframes veron-scroll-hint-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* Back to top - bottom left */
.scroll-top {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 900;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(18, 18, 18, 0.88);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.2s;
  padding: 0;
}

.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top:hover,
.scroll-top:focus-visible {
  background: #000;
  outline: none;
}

.scroll-top__icon {
  display: block;
  width: 12px;
  height: 12px;
  border-left: 2.5px solid #fff;
  border-top: 2.5px solid #fff;
  transform: rotate(45deg);
  margin-top: 4px;
}

@media (max-width: 520px) {
  .scroll-top {
    left: 12px;
    bottom: 12px;
    width: 44px;
    height: 44px;
  }

  .hero-scroll-hint {
    bottom: 44px;
  }

  .hero-scroll-hint__label {
    font-size: 0.65rem;
  }
}

.hero-slide {
  position: relative;
  height: 100%;
  width: 100%;
}

.hero-slide__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #111;
}

.hero-slide__bg--fallback {
  background: linear-gradient(135deg, #1a1a1a, #333);
}

.hero-slide__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.25) 40%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

.hero-slide__content {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* Center the text cell on the slide */
  align-items: center;
  justify-content: center;
  padding: 100px 24px 64px;
  box-sizing: border-box;
}

/*
 * Text cell (as agreed):
 * - width 55% of screen
 * - cell centered in the hero block
 * - text + button left-aligned inside
 * - height reserved for 2 lines of title (button stays put)
 */
.hero-slide__cell {
  width: 55vw;
  max-width: 55vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  --hero-fs: clamp(1.75rem, 4.2vw, 2.85rem);
  --hero-lh: 1.22;
}

/* Vertical center of 1-2 lines WITHOUT breaking inline text (flex on h2 broke words into columns) */
.hero-slide__title-wrap {
  width: 100%;
  min-height: calc(var(--hero-fs) * var(--hero-lh) * 2);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.hero-slide__title {
  margin: 0;
  font-size: var(--hero-fs);
  font-weight: 700;
  line-height: var(--hero-lh);
  width: 100%;
  max-width: 100%;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  display: block; /* normal text flow: span/br work correctly */
  text-align: left;
}

/* Half line between title block and button */
.hero-slide__cell .btn--hero {
  margin-top: calc(var(--hero-fs) * var(--hero-lh) * 0.5);
  flex-shrink: 0;
}

/*
 * Unified slider arrows - same horizontal place on ALL sliders (viewport %).
 * Matches first (hero) carousel: 5vw from left / right edges.
 */
.hero,
.stories,
.reviews__stage,
.clients__stage {
  position: relative;
}

/* Unified arrow style: white circle, black chevron (as in reviews) */
.hero .swiper-button-prev,
.hero .swiper-button-next,
.stories .swiper-button-prev,
.stories .swiper-button-next,
.reviews .slider-nav,
.clients-section .slider-nav {
  position: absolute !important;
  top: 50% !important;
  margin-top: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 20;
  width: 44px;
  height: 44px;
  margin: 0;
  color: #111 !important;
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
  opacity: 1 !important;
}

.hero .swiper-button-prev::after,
.hero .swiper-button-next::after,
.stories .swiper-button-prev::after,
.stories .swiper-button-next::after,
.reviews .slider-nav::after,
.clients-section .slider-nav::after {
  font-size: 16px !important;
  font-weight: 700;
  color: #111 !important;
}

.hero .swiper-button-prev,
.stories .swiper-button-prev,
.reviews .slider-nav--prev,
.clients-section .slider-nav--prev {
  left: 5vw !important;
  right: auto !important;
}

/* Mobile hero: arrows below content so they don't cover titles */
@media (max-width: 700px) {
  .hero .swiper-button-prev,
  .hero .swiper-button-next {
    top: auto !important;
    bottom: 52px !important;
    transform: none !important;
    width: 36px !important;
    height: 36px !important;
    opacity: 0.92 !important;
  }

  .hero .swiper-button-prev {
    left: 16px !important;
  }

  .hero .swiper-button-next {
    right: 16px !important;
  }

  .hero .swiper-button-prev::after,
  .hero .swiper-button-next::after {
    font-size: 14px !important;
  }

  .hero .swiper-pagination {
    bottom: 14px !important;
  }
}

.hero .swiper-button-next,
.stories .swiper-button-next,
.reviews .slider-nav--next,
.clients-section .slider-nav--next {
  right: 5vw !important;
  left: auto !important;
}

@media (max-width: 900px) {
  .hero-slide__cell {
    width: min(92vw, 100%);
    max-width: 92vw;
  }
}

/* Colored highlights in hero titles (from admin palette → inline style or classes) */
.hero-slide__title .hero-hl,
.hero-slide__title span[style*="color"] {
  font-weight: inherit;
}

.hero-hl--yellow {
  color: #f5c518;
}

.hero-hl--orange {
  color: #e07030;
}

.hero-hl--gold {
  color: #c9a227;
}

.btn--hero {
  background: rgba(30, 30, 30, 0.92);
  color: #fff;
  border: none;
  padding: 14px 28px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
}

.btn--hero:hover {
  background: #111;
  color: #fff;
}

.hero .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.45;
}

.hero .swiper-pagination-bullet-active {
  opacity: 1;
}

/* ========== Stories - full-bleed track, rounded cards, larger gaps ========== */
.stories {
  background: var(--veron-black);
  color: var(--veron-white);
  padding: 56px 0 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.stories__track {
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 12px 0;
  /* cards peek past viewport edges like Tilda */
  overflow: visible;
}

.stories-swiper {
  width: 100%;
  overflow: visible;
  padding: 40px 0 44px;
  box-sizing: border-box;
}

/* clip only vertically if needed; allow sides to bleed */
.stories .swiper {
  overflow: visible;
}

.stories-slide {
  height: var(--veron-stories-h, 460px);
  box-sizing: border-box;
}

.story-card {
  position: relative;
  display: block;
  /* 5% narrower than slide slot */
  width: 95%;
  height: 100%;
  margin-inline: auto;
  border: none;
  padding: 0;
  /* Side cards: click to center. Active center: click opens link. */
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  background: #1a1a1a;
  color: inherit;
  text-align: left;
  font: inherit;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
  z-index: 1;
}

/* Center active slide slightly larger + «openable» cue */
.story-card.is-active-slide {
  transform: scale(1.06);
  z-index: 4;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.story-card:not(.is-active-slide) {
  cursor: pointer;
}

/* Hover grows whole card - only when nothing is pinned */
.stories:not(.is-locked) .story-card:hover {
  transform: scale(1.1);
  z-index: 5;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.story-card.is-pinned {
  transform: scale(1.1);
  z-index: 6;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

/* When locked: only pinned card stays big; others never grow */
.stories.is-locked .story-card:not(.is-pinned) {
  transform: scale(1) !important;
  z-index: 1;
  pointer-events: auto;
}

.story-card__img,
.story-card img.story-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none !important;
}

.story-card__img--empty {
  background: #222;
}

.story-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 28%, rgba(0, 0, 0, 0.9) 100%);
  pointer-events: none;
}

.story-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 14px 18px;
  z-index: 2;
}

.story-card__title {
  display: block;
  margin: 0 0 12px;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.35;
}

.story-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.story-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  color: #fff;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.story-card__btn--solid {
  background: #fff;
  color: #111;
  border-color: #fff;
}

.story-card__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

.story-card__btn--solid:hover {
  background: #f0f0f0;
}

.stories-bar {
  display: flex;
  gap: 6px;
  margin: 8px auto 0;
  padding: 0 24px;
  width: min(100% - 48px, 1100px);
}

/* Instagram-like progress: track + white fill */
.stories-bar__seg {
  position: relative;
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease;
  outline: none;
  border: 0;
  -webkit-tap-highlight-color: transparent;
}

.stories-bar__seg:hover {
  transform: scaleY(1.8);
}

.stories-bar__seg:focus,
.stories-bar__seg:focus-visible {
  outline: none;
  transform: none;
}

.stories-bar__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: #fff;
  border-radius: inherit;
  transform-origin: left center;
  will-change: width;
}

/* Past slides: full white */
.stories-bar__seg.is-done .stories-bar__fill {
  width: 100%;
  animation: none !important;
}

/* Active: fill over 7s (duration also set from JS for accuracy) */
.stories-bar__seg.is-active .stories-bar__fill {
  animation: stories-bar-fill 7s linear forwards;
}

.stories-bar__seg.is-active.is-paused .stories-bar__fill {
  animation-play-state: paused;
}

@keyframes stories-bar-fill {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stories-bar__seg.is-active .stories-bar__fill {
    animation-duration: 0.01ms !important;
  }
}

/* Single lead CTA under progress bar */
.stories-cta {
  display: flex;
  justify-content: center;
  margin-top: 22px;
  padding: 0 16px 8px;
}

.stories-cta__btn {
  background: #fff;
  color: #111;
  border: none;
  padding: 12px 28px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.stories-cta__btn:hover {
  background: #f0f0f0;
  transform: translateY(-1px);
}

/* ========== Section commons ========== */
.section {
  padding: 72px 0;
}

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

.section--muted {
  background: var(--veron-bg);
}

.section__title {
  margin: 0 0 40px;
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
}

.section__subtitle {
  margin: -28px 0 40px;
  text-align: center;
  color: var(--veron-gray);
  font-size: 0.95rem;
}

/* ========== Projects grid 4×2 ========== */
.projects-section {
  background: #f5f5f5;
  padding: 72px 0 80px;
}

.projects-section .veron-container {
  width: var(--veron-content-70);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

@media (max-width: 1100px) {
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 800px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.projects-grid .project-card__media {
  aspect-ratio: 4 / 3.2;
}

.projects-grid .project-card__title {
  font-size: 1.08rem;
}

.projects-grid .project-card__price {
  font-size: 1rem;
}

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  /* overflow visible so price tip is not clipped */
  overflow: visible;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.projects-grid {
  overflow: visible;
}

.project-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1);
}

/*
 * Project photos: body.veron-photo-cover | body.veron-photo-blur
 * Frame always 4:3 on cards / popup. Toggle in VERON hub admin.
 */
.project-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #1f1f1f;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.project-card__media-bg {
  position: absolute;
  inset: -14%;
  background-size: cover;
  background-position: center;
  z-index: 0;
  pointer-events: none;
  display: none;
}

.project-card__media img,
.project-card__media .project-card__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-position: center center;
  transition: transform 0.45s ease;
}

/* --- Mode: cover (fill + crop) --- */
body.veron-photo-cover .project-card__media-bg {
  display: none;
}

body.veron-photo-cover .project-card__media img,
body.veron-photo-cover .project-card__media .project-card__img {
  object-fit: cover;
}

/* --- Mode: blur (full photo + soft blurred fill) --- */
body.veron-photo-blur .project-card__media {
  background: #1a1a1a;
}

body.veron-photo-blur .project-card__media-bg {
  display: block;
  filter: blur(22px) saturate(1.08) brightness(0.62);
  transform: scale(1.12);
  opacity: 1;
}

body.veron-photo-blur .project-card__media img,
body.veron-photo-blur .project-card__media .project-card__img {
  object-fit: contain;
}

.project-card:hover .project-card__media img {
  transform: scale(1.03);
}

.project-card__media--empty img,
.project-card__media img.project-card__placeholder {
  object-fit: cover;
  opacity: 0.95;
}

body.veron-photo-blur .project-card__media img.project-card__placeholder {
  object-fit: contain;
}

/* Catalog card gallery controls */
.project-card__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #111;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.project-card.has-gallery:hover .project-card__nav,
.project-card.has-gallery:focus-within .project-card__nav {
  display: flex;
}

.project-card__nav--prev {
  left: 8px;
}

.project-card__nav--next {
  right: 8px;
}

.project-card__zoom {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  border: 0;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  display: none;
}

.project-card.has-gallery:hover .project-card__zoom,
.project-card.has-gallery:focus-within .project-card__zoom {
  display: inline-block;
}

/* Text block under photo - always inset (works for <div> and <a>) */
.project-card__body {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 16px 18px 20px;
  margin: 0;
  color: inherit;
  text-decoration: none;
  flex: 1 1 auto;
}

a.project-card__body:hover .project-card__title {
  opacity: 0.88;
}

.project-card__title {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--veron-dark, #111);
  letter-spacing: normal;
  text-transform: none;
}

.project-card__price {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--veron-gray);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
}

.project-card__meta {
  display: -webkit-box;
  margin: 8px 0 0;
  padding: 0;
  font-size: 0.78rem;
  color: var(--veron-muted);
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Project popup - fits viewport; info scrolls; gallery swipeable */
.project-popup {
  position: fixed;
  inset: 0;
  z-index: 2100; /* below lead modal so form can open on top */
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top, 0px))
    max(12px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}

.project-popup.is-open {
  display: flex;
}

.project-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.project-popup__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 900px);
  max-height: min(92dvh, 920px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
}

.project-popup__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 30;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}

.project-popup__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.project-popup__media {
  background: #1f1f1f;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

/* Same 4:3 frame as project cards. */
.project-popup__media-wrap {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 180px;
  aspect-ratio: 4 / 3;
  max-height: min(56dvh, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1f1f1f;
  overflow: hidden;
  /* We handle horizontal swipe; none avoids browser stealing the gesture */
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.project-popup__media-wrap:active {
  cursor: grabbing;
}

.project-popup__media-bg {
  position: absolute;
  inset: -16%;
  background-size: cover;
  background-position: center;
  z-index: 0;
  pointer-events: none;
  display: none;
}

.project-popup__image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-position: center center;
  background: transparent;
  cursor: grab;
  pointer-events: none; /* drag handled on wrap; lightbox via JS flag */
}

body.veron-photo-cover .project-popup__media-bg {
  display: none;
}

body.veron-photo-cover .project-popup__image {
  object-fit: cover;
}

body.veron-photo-blur .project-popup__media-bg {
  display: block;
  filter: blur(26px) saturate(1.08) brightness(0.58);
  transform: scale(1.12);
}

body.veron-photo-blur .project-popup__image {
  object-fit: contain;
}

.project-popup__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #111;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-popup__arrow--prev {
  left: 10px;
}

.project-popup__arrow--next {
  right: 10px;
}

.project-popup__arrow[hidden] {
  display: none !important;
}

.project-popup__thumbs {
  display: flex;
  gap: 6px;
  padding: 8px;
  overflow-x: auto;
  background: #1a1a1a;
}

.project-popup__thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: #333;
}

.project-popup__thumb.is-active {
  border-color: #fff;
}

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

.project-popup__info {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.project-popup__info-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 24px 22px 12px;
}

.project-popup__actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 22px
    max(16px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--veron-border, #e8e8e8);
  background: #fff;
}

.project-popup__actions .btn {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  text-align: center;
}

.project-popup__title {
  margin: 0 0 10px;
  font-size: 1.35rem;
  padding-right: 36px; /* room for close on narrow */
}

.project-popup__price {
  margin: 0 0 16px;
  font-size: 1.15rem;
  font-weight: 700;
}

.project-popup__price[hidden] {
  display: none !important;
}

/* Popup price "(?)": base styles shared with .project-single__price-hint (see below). */
.project-popup__price-hint[hidden] {
  display: none !important;
}

.project-popup__materials {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: none;
  overflow: visible;
}

.project-popup__materials li {
  padding: 6px 0;
  border-bottom: 1px solid var(--veron-border);
  font-size: 0.9rem;
}

.project-popup__cta {
  margin-top: 0;
  width: 100%;
}

/* Mobile / narrow: full-screen sheet, everything fits, actions always visible */
@media (max-width: 720px) {
  .project-popup {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .project-popup__dialog {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100dvh;
    border-radius: 0;
  }

  .project-popup__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
  }

  .project-popup__media {
    flex: 0 0 auto;
  }

  .project-popup__media-wrap {
    aspect-ratio: 4 / 3;
    max-height: min(36dvh, 280px);
    min-height: 160px;
  }

  .project-popup__thumbs {
    max-height: 64px;
  }

  .project-popup__info {
    min-height: 0;
  }

  .project-popup__info-scroll {
    padding: 16px 16px 8px;
  }

  .project-popup__actions {
    padding: 10px 16px max(12px, env(safe-area-inset-bottom, 0px));
  }

  .project-popup__close {
    top: max(8px, env(safe-area-inset-top, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
  }

  .project-popup__title {
    font-size: 1.15rem;
  }
}

.btn--ghost-dark {
  background: transparent;
  color: var(--veron-black);
  border: 1px solid var(--veron-border);
}

.clients-section {
  padding: 80px 0 96px;
  background: #fff;
  overflow: visible;
}

.clients__shell {
  width: 100%;
}

.clients__stage {
  position: relative;
  width: 100%;
}

.clients__inner {
  width: var(--veron-content-70);
  margin-inline: auto;
}

.clients-section .section__title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  text-align: center;
  margin-bottom: 36px;
}

.clients-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--veron-client-logo-h, 130px) + 48px);
  padding: 20px 12px;
  overflow: visible;
}

.clients-slide__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.clients-slide img,
.client-logo {
  max-height: var(--veron-client-logo-h, 130px) !important;
  width: auto !important;
  max-width: min(240px, 92%) !important;
  height: auto !important;
  object-fit: contain;
  filter: none;
  opacity: 0.95;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (max-width: 640px) {
  .clients-slide {
    overflow: hidden;
    padding: 12px 8px;
  }

  .clients-slide img,
  .client-logo {
    max-width: 100% !important;
    max-height: calc(var(--veron-client-logo-h, 110px) * 0.85) !important;
  }
}

.clients-slide--tip .clients-slide__inner {
  cursor: default;
}

.clients-slide--tip:hover .client-logo,
.clients-slide--tip:focus-within .client-logo {
  opacity: 1;
  transform: scale(1.03);
}

/* Hover tooltip: company name + description */
.client-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px);
  z-index: 30;
  min-width: 140px;
  max-width: min(260px, 70vw);
  padding: 10px 12px;
  border-radius: 10px;
  background: #1a1a1a;
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.client-tip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #1a1a1a;
}

.client-tip__name {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.client-tip__desc {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
}

.clients-slide--tip:hover .client-tip,
.clients-slide--tip:focus-within .client-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Swiper clips tips by default - allow overflow on clients track */
.clients-section .swiper,
.clients-section .swiper-wrapper,
.clients-section .swiper-slide {
  overflow: visible;
}

.clients-section .clients__inner {
  overflow: visible;
}

/* Reviews: lighter than projects / how-we-work (#f5f5f5) → pure white */
.section--reviews,
.reviews {
  background: #ffffff;
  padding: 64px 0 72px;
}

.reviews__shell {
  width: 100%;
}

.reviews__shell .section__title {
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  margin-bottom: 36px;
  text-align: center;
}

.reviews__stage {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.reviews__inner {
  width: 70vw;
  max-width: 70vw;
  margin-inline: auto;
}

.reviews__inner .review-card--rich,
.reviews__inner .reviews-swiper {
  width: 100%;
  max-width: 100%;
}



.reviews-swiper {
  overflow: hidden;
  width: 100%;
  /* autoHeight: swiper sets height per slide */
  height: auto;
  transition: height 0.3s ease;
}

.reviews-swiper .swiper-wrapper {
  align-items: flex-start;
}

.reviews-swiper .swiper-slide {
  height: auto !important;
}

.review-card--rich {
  display: flex;
  flex-direction: row;
  gap: 28px 36px;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 12px 16px 28px;
  box-sizing: border-box;
}

.review-card--rich .review-card__content {
  flex: 1 1 auto;
  min-width: 0;
}

.review-card--rich .review-card__text {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.75;
}

.review-card--rich .review-card__author {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
}

.review-card__photo {
  width: 140px;
  height: 140px;
}

@media (max-width: 640px) {
  .review-card--rich {
    flex-direction: column;
    text-align: center;
  }
  .review-card__photo {
    margin: 0 auto;
  }
}

.review-card__photo {
  display: block;
  width: 140px;
  height: 140px;
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 140px;
}

.review-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-card--rich .review-card__text {
  text-align: left;
}

.review-card__links {
  margin: 10px 0 0;
  font-size: 0.9rem;
}

.review-card__links a {
  color: #c45c26;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

.review-card__sep {
  color: var(--veron-muted);
  text-decoration: none;
  font-weight: 400;
}

.project-popup__kicker {
  margin: 0 0 6px;
  font-size: 0.8rem;
  color: var(--veron-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Video modal */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.video-modal.is-open {
  display: flex;
}

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
}

.video-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 1100px);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
}

.video-modal__frame,
.video-modal__player {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
  object-fit: contain;
}

.video-modal__frame[hidden],
.video-modal__player[hidden] {
  display: none !important;
}

.video-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}

.mobile-nav__contacts {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile-nav__contacts a {
  border-bottom: none !important;
  opacity: 0.85;
}

.projects-empty {
  text-align: center;
  color: var(--veron-gray);
  padding: 40px 16px;
}

/* ========== Reviews ========== */
.reviews-swiper {
  max-width: 820px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.review-card {
  text-align: center;
  padding: 8px 12px 24px;
}

.review-card__thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
  margin: 0 auto 18px;
}

.review-card__text {
  margin: 0 0 18px;
  color: var(--veron-gray);
  font-size: 0.95rem;
  line-height: 1.7;
}

.review-card__author {
  margin: 0;
  font-weight: 600;
}

.review-card__source {
  margin: 10px 0 0;
  font-size: 0.88rem;
}

.review-card__source a {
  color: var(--veron-accent, #c9a227);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.review-card__links {
  margin-top: 8px;
  font-size: 0.85rem;
}

.review-card__links a {
  color: #c45c26;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ========== Steps - 60% width, bolder big numbers BEHIND text ========== */
.how-section {
  padding: 88px 0 96px;
  background: #f5f5f5;
}

.how-section .veron-container {
  width: var(--veron-content-60);
}

/* Title + subtitle: even rhythm (global subtitle uses margin-top:-28px for other sections) */
.how-section .section__title {
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  margin: 0 0 12px;
  line-height: 1.2;
}

.how-section .section__subtitle {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.45;
  max-width: 28em;
  margin: 0 auto 40px; /* no negative top - same visual gap title↔subtitle and room to steps */
  color: #666;
}

@media (max-width: 560px) {
  .how-section {
    padding: 56px 0 64px;
  }

  .how-section .section__title {
    margin-bottom: 10px;
    font-size: clamp(1.65rem, 7vw, 2rem);
  }

  .how-section .section__subtitle {
    margin-bottom: 32px;
    font-size: 1rem;
    padding: 0 4px;
  }

  .how-section .steps {
    gap: 36px 0;
  }

  .how-section .step {
    min-height: 0;
    padding: 8px 0 12px;
  }
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(48px, 5.5vw, 80px) clamp(32px, 3.5vw, 52px);
  overflow: visible;
}

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

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

.step {
  text-align: left;
  position: relative;
  /* Room for large bg digits (Tilda ratio ~8× title) */
  min-height: clamp(200px, 24vh, 300px);
  padding: 20px 8px 28px 0;
  overflow: visible;
}

/*
 * Tilda proportion: title ~1.2-1.4rem, digit ~8-9× taller
 * (digit spans roughly title + description height).
 */
.step__num {
  position: absolute;
  left: 32%;
  top: 50%;
  transform: translateY(-52%);
  font-size: clamp(9rem, 14vw, 13rem); /* ~144-208px ≈ 8-9× title */
  font-weight: 500;
  color: #e4e4e4;
  line-height: 0.8;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.06em;
}

.step__body {
  position: relative;
  z-index: 1;
  max-width: 72%;
  padding-top: 12px;
}

.step__title {
  margin: 0 0 14px;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 700;
  color: #111;
}

.step__text {
  margin: 0;
  font-size: clamp(0.98rem, 1.2vw, 1.12rem);
  font-weight: 400;
  color: #777;
  line-height: 1.55;
}

/* ========== Partners / Clients ========== */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px 36px;
}

.logo-row img {
  max-height: 36px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.section--muted .logo-row img {
  filter: none;
  opacity: 0.85;
  max-height: 48px;
}

/*
 * Partners:
 * - one centered column 55vw
 * - title + logos share exact same left/right edges
 * - title sized so its line is ~as wide as 6-logo row
 * - 6 logos/row; last incomplete row centered
 */
.partners {
  position: relative;
  overflow: hidden;
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 88px 0 100px;
  box-sizing: border-box;
}

.partners--parallax {
  background-color: #0a0a0a;
  background-image: var(--partners-bg);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

@supports (-webkit-touch-callout: none) {
  .partners--parallax {
    background-attachment: scroll;
  }
}

.partners__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  z-index: 0;
}

.partners__content {
  --partners-gap: clamp(6px, 0.8vw, 12px); /* tighter between logos */
  position: relative;
  z-index: 1;
  width: 55vw;
  max-width: 55vw;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch; /* head + logos same full width */
  gap: clamp(64px, 7vw, 96px); /* more space between title and logos */
  box-sizing: border-box;
}

.partners__head {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
}

/* Title sized to span ~full 55vw column (same L/R edges as logo row) */
.partners__title {
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* ~title width tracks column: 55vw / ~18-20 glyphs */
  font-size: clamp(1.75rem, calc(55vw / 18.5), 3.5rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-align: center;
  white-space: nowrap;
}

.partners__logos {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--partners-gap);
  row-gap: clamp(22px, 2.4vw, 32px);
}

.partners__logo-cell {
  /* Exactly 1/6 of content width including gaps → left/right edges = title edges */
  flex: 0 0 calc((100% - 5 * var(--partners-gap)) / 6);
  width: calc((100% - 5 * var(--partners-gap)) / 6);
  max-width: calc((100% - 5 * var(--partners-gap)) / 6);
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
}

.partners__logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer;
}

.partners__logo-link--nolink {
  cursor: default;
}

.partners__logo-cell .partner-logo,
.partners__logo-cell img {
  max-height: var(--veron-partner-logo-h, 86px) !important;
  max-width: 98% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  /* white by default */
  filter: brightness(0) invert(1);
  opacity: 0.95;
  background: transparent !important;
  transition: filter 0.25s ease, opacity 0.25s ease, transform 0.2s ease;
}

/* Hover: original brand colors + slight lift */
.partners__logo-link:hover .partner-logo,
.partners__logo-link:hover img,
.partners__logo-link:focus-visible .partner-logo,
.partners__logo-link:focus-visible img {
  filter: none;
  opacity: 1;
  transform: scale(1.06);
}

.partners__logo-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (max-width: 1100px) {
  .partners__title {
    white-space: normal; /* allow wrap on smaller screens */
  }
}

@media (max-width: 900px) {
  .partners__content {
    width: min(92vw, 100%);
    max-width: 92vw;
  }

  .partners__logo-cell {
    flex: 0 0 calc((100% - 2 * var(--partners-gap)) / 3);
    width: calc((100% - 2 * var(--partners-gap)) / 3);
    max-width: calc((100% - 2 * var(--partners-gap)) / 3);
  }
}

@media (max-width: 520px) {
  .partners__logo-cell {
    flex: 0 0 calc((100% - 1 * var(--partners-gap)) / 2);
    width: calc((100% - 1 * var(--partners-gap)) / 2);
    max-width: calc((100% - 1 * var(--partners-gap)) / 2);
  }
}

/* ========== Footer ========== */
.site-footer {
  background: #111;
  color: rgba(255, 255, 255, 0.88);
  padding: 72px 0 32px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, 1fr);
  gap: 36px 40px;
  margin-bottom: 48px;
  align-items: start;
}

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

  .footer-brand-col {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .site-footer {
    padding: 48px 0 28px;
  }

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

.footer-brand-col {
  max-width: 320px;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  line-height: 0;
}

.footer-logo__img,
.footer-logo img {
  height: 44px !important;
  width: auto !important;
  max-width: 200px;
  object-fit: contain;
  /* black logo → white on dark footer */
  filter: brightness(0) invert(1);
}

.footer-logo__text {
  font-weight: 800;
  letter-spacing: 0.18em;
  font-size: 1.35rem;
  color: #fff;
}

.footer-intro {
  margin: 0 0 4px;
}

.footer-intro__p {
  margin: 0 0 12px;
  color: rgba(252, 251, 251, 0.92);
  font-size: 0.95rem;
  line-height: 1.45;
}

.footer-hours,
.footer-address {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
}

.footer-phone {
  margin: 14px 0 0;
}

.footer-phone a {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.footer-phone a:hover {
  opacity: 0.9;
}

.footer-col h4 {
  margin: 0 0 16px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
}

.footer-col a {
  display: block;
  padding: 5px 0;
  color: rgba(255, 255, 255, 0.88);
  opacity: 1;
  transition: color 0.2s, opacity 0.2s;
}

.footer-col a:hover {
  color: #fff;
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-muted {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.4;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.78rem;
}

/* Content pages (FAQ, privacy, materials…) */
.page-hero-simple {
  padding: 40px 0 8px;
  background: #fafafa;
  border-bottom: 1px solid var(--veron-border, #e8e8e8);
}

.page-hero-simple h1 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
}

.page-hero-simple__crumb {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: #777;
}

.page-hero-simple__crumb a {
  color: inherit;
  text-decoration: none;
}

.page-hero-simple__crumb a:hover {
  text-decoration: underline;
}

.page-content {
  font-size: 1rem;
  line-height: 1.65;
  color: #333;
}

.page-content h2,
.page-content h3 {
  margin: 1.6em 0 0.6em;
  line-height: 1.3;
  color: #111;
}

.page-content p {
  margin: 0 0 1em;
}

.page-content ul,
.page-content ol {
  margin: 0 0 1.2em;
  padding-left: 1.25em;
}

.page-content a {
  color: #1a1a1a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-content details {
  border: 1px solid var(--veron-border, #e8e8e8);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 10px;
  background: #fff;
}

.page-content summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.page-content summary::-webkit-details-marker {
  display: none;
}

/* Legacy details without veron-acc use chevron; veron-acc overrides to none */
.page-content summary:not(.veron-acc__summary)::before {
  content: "▸ ";
  color: #888;
  font-size: 0.85em;
}

.page-content details[open] summary:not(.veron-acc__summary)::before {
  content: "▾ ";
}

.page-content details[open] summary:not(.veron-acc__summary) {
  margin-bottom: 8px;
}

/* ========== Catalog ========== */
.page-hero {
  padding: 48px 0 24px;
  text-align: center;
}

.page-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.page-hero p {
  margin: 0;
  color: var(--veron-gray);
}

.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 32px;
}

.catalog-toolbar a,
.catalog-toolbar__btn {
  padding: 8px 16px;
  border: 1px solid var(--veron-border, #ddd);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  background: #fff;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  text-decoration: none;
  line-height: 1.3;
}

.catalog-toolbar a:hover,
.catalog-toolbar a.is-active,
.catalog-toolbar__btn:hover,
.catalog-toolbar__btn.is-active {
  background: var(--veron-black, #1a1a1a);
  color: #fff;
  border-color: var(--veron-black, #1a1a1a);
}

.projects-filter-empty {
  text-align: center;
  color: #666;
  margin: 24px 0;
}

/* Favorite heart on cards */
.project-card__fav {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 8;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  box-shadow: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: color 0.2s, transform 0.2s, filter 0.2s;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

.project-card__fav:hover {
  transform: scale(1.08);
  color: #ff6b81;
  background: transparent;
}

.project-card__fav.is-active {
  color: #e2556e;
  background: transparent;
}

.project-card__fav-icon {
  display: block;
}

/* Header favorites (button - opens modal, no navigation) */
.header-fav {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #fff;
  opacity: 0.92;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
  transition: background 0.2s, opacity 0.2s;
}

.header-fav:hover,
.header-fav.has-items {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

/* Favorites modal / drawer - fixed top + bottom, scroll only cards */
.fav-modal {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: none;
  align-items: stretch;
  justify-content: flex-end;
}

.fav-modal.is-open {
  display: flex;
}

.fav-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  border: 0;
  cursor: pointer;
}

.fav-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  height: 100%;
  max-height: 100%;
  overflow: hidden; /* only middle scrolls */
  background: #fff;
  color: #111;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  animation: veron-fav-slide 0.28s ease;
}

@keyframes veron-fav-slide {
  from {
    transform: translateX(100%);
    opacity: 0.6;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Sticky header block */
.fav-modal__top {
  flex: 0 0 auto;
  padding: 16px 16px 10px;
  border-bottom: 1px solid #eee;
  background: #fff;
  z-index: 2;
}

.fav-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.fav-modal__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.fav-modal__close {
  border: 0;
  background: #f0f0f0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #111;
  flex-shrink: 0;
}

.fav-modal__lead {
  margin: 0;
  font-size: 0.88rem;
  color: #666;
  line-height: 1.4;
}

/* Scrollable project list */
.fav-modal__scroll {
  flex: 1 1 auto;
  min-height: 0; /* critical for flex scroll */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 16px 16px;
}

.fav-modal__empty {
  margin: 28px 8px;
  text-align: center;
  color: #666;
  font-size: 0.95rem;
  line-height: 1.45;
}

.fav-modal__grid.projects-grid {
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
}

/* Sticky footer actions */
.fav-modal__actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #eee;
  background: #fff;
  z-index: 2;
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.06);
}

.fav-modal__actions[hidden] {
  display: none !important;
}

.fav-modal__actions .btn {
  flex: 1 1 auto;
  text-align: center;
  justify-content: center;
  min-height: 44px;
}

.fav-modal__clear {
  border: 1px solid #ccc !important;
  color: #333 !important;
  background: #fff !important;
}

body.veron-fav-open {
  overflow: hidden;
}

@media (max-width: 520px) {
  .fav-modal {
    align-items: flex-end;
  }

  .fav-modal__panel {
    width: 100%;
    height: min(88vh, 100%);
    max-height: min(88vh, 100%);
    margin-top: auto;
    border-radius: 16px 16px 0 0;
    animation: veron-fav-sheet 0.28s ease;
  }

  .fav-modal__top {
    padding: 14px 16px 10px;
    border-radius: 16px 16px 0 0;
  }

  .fav-modal__title {
    font-size: 1.15rem;
  }

  @keyframes veron-fav-sheet {
    from {
      transform: translateY(40%);
      opacity: 0.7;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

.header-fav__count {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e2556e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.favorites-empty {
  text-align: center;
  color: #555;
  font-size: 1.05rem;
  line-height: 1.5;
  padding: 24px 12px 40px;
}

/* ========== Single project ========== */
.project-single__wrap {
  padding: 40px 0 64px;
}

.project-single__layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: start;
}

@media (max-width: 860px) {
  .project-single__layout {
    grid-template-columns: 1fr;
  }
}

.project-single__gallery {
  display: grid;
  gap: 12px;
}

/* Single project: main photo follows its own proportions (no forced letterbox). */
.project-gallery-main {
  position: relative;
  background: #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  min-height: 200px;
  line-height: 0;
}

.project-gallery-main__bg {
  display: none;
}

.project-gallery-main__img,
.project-single__gallery .project-gallery-main__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  background: #f0f0f0;
  margin: 0 auto;
}

.project-single__gallery img:not(.project-gallery-main__img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-gallery-thumbs__btn {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: #eee;
}

.project-gallery-thumbs__btn.is-active {
  border-color: var(--veron-black, #1a1a1a);
}

.project-gallery-thumbs__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-single__crumb {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--veron-gray);
}

.project-single__crumb a {
  color: inherit;
  text-decoration: none;
}

.project-single__crumb a:hover {
  text-decoration: underline;
}

.project-single__title {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.project-single__price {
  position: relative;
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 20px;
}

.project-single__price-hint,
.project-popup__price-hint {
  cursor: pointer;
  color: #999;
  font-size: 0.9rem;
  font-weight: 500;
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  line-height: inherit;
  vertical-align: baseline;
  -webkit-tap-highlight-color: transparent;
}

.project-single__price-hint.is-open,
.project-popup__price-hint.is-open {
  color: #111;
}

/* Fixed by JS so tip is never clipped by card/grid overflow */
.project-price-tip {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10050;
  max-width: min(340px, calc(100vw - 24px));
  padding: 10px 12px;
  background: #1a1a1a;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.4;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  pointer-events: auto;
}

.project-price-tip[hidden] {
  display: none !important;
}

.project-popup__price {
  position: relative;
}

.project-card .project-price-tip {
  /* position via JS fixed - override older absolute rules */
  position: fixed;
}

.project-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.project-specs__item {
  display: grid;
  grid-template-columns: minmax(120px, 38%) 1fr;
  gap: 8px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--veron-border);
  font-size: 0.95rem;
}

.project-specs__label {
  color: #1a1a1a;
  font-weight: 700;
  font-size: 0.9rem;
}

.project-specs__value {
  font-weight: 400;
  color: var(--veron-gray, #555);
  white-space: pre-line;
  line-height: 1.45;
}

.project-popup__materials li {
  white-space: pre-line;
  line-height: 1.45;
  display: grid;
  grid-template-columns: minmax(100px, 36%) 1fr;
  gap: 6px 12px;
  align-items: start;
}

.project-popup__mat-label {
  font-weight: 700;
  color: #1a1a1a;
  font-size: 0.88rem;
}

.project-popup__mat-value {
  font-weight: 400;
  color: #555;
}

.project-popup__materials li.project-popup__mat-plain {
  grid-template-columns: 1fr;
}

/* Lock page scroll while project popup is open */
html.veron-popup-open,
body.veron-popup-open {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}

/* Fullscreen lightbox */
.veron-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.veron-lightbox[hidden] {
  display: none !important;
}

.veron-lightbox__img {
  max-width: min(96vw, 1400px);
  max-height: 90vh;
  object-fit: contain;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

.veron-lightbox__close,
.veron-lightbox__prev,
.veron-lightbox__next {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 22px;
  line-height: 1;
}

.veron-lightbox__close {
  top: 16px;
  right: 16px;
  border-radius: 8px;
  width: auto;
  padding: 8px 14px;
  font-size: 14px;
}

.veron-lightbox__prev {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.veron-lightbox__next {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.project-specs__item--plain {
  grid-template-columns: 1fr;
}

.project-single__materials-link {
  margin: 8px 0 0;
}

.project-single__materials-link a {
  color: #e07030;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.project-single__materials-link a:hover {
  color: #c45a1c;
}

/* Full-width under gallery + specs (Tilda) */
.project-single__cta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin: 36px 0 0;
  padding: 28px 0 8px;
  border-top: 1px solid var(--veron-border, #e5e5e5);
}

.project-single__tagline {
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  margin: 0;
  flex: 1 1 240px;
  max-width: 520px;
  color: #333;
  line-height: 1.45;
}

.project-single__cta-btn {
  flex: 0 0 auto;
  min-width: 220px;
  padding: 14px 28px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

.project-single__content {
  margin-top: 28px;
  color: var(--veron-gray);
  font-size: 0.95rem;
  line-height: 1.6;
}

.project-single__reviews {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--veron-border, #e5e5e5);
}

.project-single__reviews-title {
  margin: 0 0 16px;
  font-size: 1.25rem;
}

.project-review {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

.project-review__text {
  margin: 0 0 10px;
  font-size: 1rem;
  line-height: 1.55;
  color: #333;
}

.project-review__author {
  font-weight: 600;
  color: #111;
}

/* Dark materials band - Tilda parity */
.project-materials-block {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--veron-border);
}

.project-materials-block--dark {
  margin-top: 48px;
  padding: 72px 0 80px;
  border-top: 0;
  background: #0a0a0a;
  color: #fff;
}

.project-materials-block--dark .project-materials-block__title {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 600;
  text-align: center;
  color: #fff;
}

.project-materials-block--dark .project-materials-block__lead {
  color: rgba(255, 255, 255, 0.72);
  margin: 0 auto 40px;
  text-align: center;
  max-width: 420px;
  font-size: 1.05rem;
  line-height: 1.45;
}

.project-materials-block--dark .project-materials-block__note {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 36px auto 0;
  max-width: 640px;
  text-align: center;
  line-height: 1.5;
}

.project-materials-block--dark .material-samples {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 36px 56px;
  margin: 0;
}

.project-materials-block--dark .material-sample {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 360px;
}

.project-materials-block--dark .material-sample__swatch {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 4px;
  overflow: hidden;
  background: #222;
}

.project-materials-block--dark .material-sample__swatch img,
.project-materials-block--dark .material-sample img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

.project-materials-block--dark .material-sample__name {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

.project-materials-block--dark .material-sample__brand {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.65);
}

.project-materials-block__title {
  margin: 0 0 8px;
  font-size: 1.35rem;
}

.project-materials-block__lead {
  color: var(--veron-gray);
  margin: 0 0 20px;
}

.project-materials-block__note {
  font-size: 0.85rem;
  color: var(--veron-gray);
}

.project-materials {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.project-materials li {
  padding: 6px 0;
  border-bottom: 1px solid var(--veron-border);
  font-size: 0.95rem;
}

.material-samples {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
  margin: 28px 0;
}

.material-sample {
  text-align: center;
}

.material-sample img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 8px;
}

.material-sample__name {
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0;
}

.material-sample__brand {
  font-size: 0.75rem;
  color: var(--veron-gray);
  margin: 2px 0 0;
}

.related-projects {
  padding: 48px 0 72px;
}

/* ========== Forms / Modal ========== */
/* Above project-popup (2100) and video-modal (2200) so lead form is always fillable */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal.is-open {
  display: flex;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

.modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 460px);
  max-height: min(92vh, 820px);
  overflow: auto;
  background: #fff;
  border-radius: 10px;
  padding: 28px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: none;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  color: var(--veron-gray);
}

.modal__title {
  margin: 0 0 18px;
  font-size: 1.25rem;
}

.form-field {
  margin-bottom: 14px;
}

.form-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 600;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--veron-border);
  border-radius: var(--veron-radius);
  font-size: 0.95rem;
  box-sizing: border-box;
}

.form-field.is-invalid input,
.form-field.is-invalid textarea {
  border-color: #b42318;
  box-shadow: 0 0 0 1px rgba(180, 35, 24, 0.15);
}

.form-field textarea {
  min-height: 88px;
  resize: vertical;
}

.form-field__hint {
  margin: 0 0 8px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--veron-gray, #666);
  font-weight: 400;
}

.form-field__err {
  margin: 6px 0 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #b42318;
}

.form-field__err[hidden] {
  display: none !important;
}

.form-field--files input[type="file"] {
  padding: 10px;
  font-size: 0.85rem;
  background: #fafafa;
}

.lead-files-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: 0.82rem;
  color: #333;
}

.lead-files-list li {
  padding: 4px 0;
  border-bottom: 1px solid #eee;
}

.lead-form__intro {
  margin: -6px 0 16px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #555;
}

.lead-form__submit {
  width: 100%;
  margin-top: 4px;
}

.lead-success {
  text-align: center;
  padding: 12px 4px 4px;
}

.lead-success__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #e8f5e9;
  color: #1a7f37;
  font-size: 1.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.lead-success__title {
  margin: 0 0 12px;
  font-size: 1.25rem;
}

.lead-success__text {
  margin: 0 0 20px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #333;
}

.form-note {
  margin: 12px 0 0;
  font-size: 0.78rem;
  color: var(--veron-gray);
}

.form-status {
  margin-top: 12px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.form-status.is-ok {
  color: #1a7f37;
}

.form-status.is-err {
  color: #b42318;
}

/* Floating Telegram (replaces former WhatsApp float) */
.tg-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #2aabee;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(42, 171, 238, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease, width 0.2s, height 0.2s, right 0.2s, bottom 0.2s;
}

.tg-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(42, 171, 238, 0.55);
  color: #fff;
}

.tg-float svg {
  display: block;
  width: 28px;
  height: 28px;
}

/* Desktop: ~15% larger, inset from corner (toward center) */
@media (min-width: 900px) {
  .tg-float {
    width: 62px; /* 54 * 1.15 */
    height: 62px;
    right: 40px;
    bottom: 40px;
  }

  .tg-float svg {
    width: 32px;
    height: 32px;
  }
}

/* legacy class keep if cached HTML */
.wa-float {
  display: none !important;
}

/* Utility */
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }

/* FAQ / page content */
.page-content details {
  border: 1px solid var(--veron-border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: #fff;
}

.page-content summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.page-content summary::-webkit-details-marker {
  display: none;
}

.page-content details p {
  margin: 12px 0 0;
  color: var(--veron-gray);
  line-height: 1.65;
}

.page-content h2,
.page-content h3 {
  margin-top: 1.4em;
}

.page-content ul {
  padding-left: 1.2em;
  line-height: 1.7;
}

/* ========== Content pages polish ========== */
.page-hero-simple {
  padding: 40px 0 8px;
  background: linear-gradient(180deg, #f7f6f3 0%, #fff 100%);
}

.page-hero-simple h1 {
  font-size: clamp(1.65rem, 3.2vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: #111;
}

.page-lead {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #555;
  margin: 0 0 1.75rem;
  max-width: 62ch;
}

/* Accordion: plus → cross with rotation (Tilda-like) */
.veron-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.veron-acc__item {
  border: 1px solid #e6e4df !important;
  border-radius: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  overflow: hidden;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.veron-acc__item[open] {
  border-color: #d4d0c8 !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}

.veron-acc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.4;
  color: #141414;
  transition: background 0.2s ease;
}

.veron-acc__summary::-webkit-details-marker {
  display: none;
}

.veron-acc__summary::before,
.page-content .veron-acc__summary::before {
  content: none !important;
}

.veron-acc__summary:hover {
  background: #faf9f7;
}

.veron-acc__q {
  flex: 1;
  min-width: 0;
}

.veron-acc__icon {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #f0eee8;
  color: #1a1a1a;
  transition: background 0.3s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.veron-acc__icon::before,
.veron-acc__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

/* Horizontal bar of plus */
.veron-acc__icon::before {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%);
}

/* Vertical bar of plus */
.veron-acc__icon::after {
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%);
}

/* Open: plus rotates into × */
.veron-acc__item[open] .veron-acc__icon {
  background: #1a1a1a;
  color: #fff;
  transform: rotate(135deg);
}

.veron-acc__body {
  padding: 0 20px 20px;
  color: #555;
  font-size: 0.98rem;
  line-height: 1.7;
  animation: veron-acc-in 0.28s ease;
}

.veron-acc__body p {
  margin: 0 !important;
}

@keyframes veron-acc-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Materials & hardware - one page, real tabs (Tilda parity) */
.mat-page {
  margin: 0 0 2rem;
}

.mat-page .page-lead {
  margin: 0 0 1.5rem !important;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #555;
  max-width: 62ch;
}

.mat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 1.75rem;
  padding: 0;
  border: 0;
}

.mat-tabs__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid #e2dfd8;
  border-radius: 999px;
  background: #f6f4ef;
  color: #222;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.mat-tabs__btn:hover,
.mat-tabs__btn:focus-visible {
  background: #ebe7df;
  border-color: #cfc9bd;
  outline: none;
}

.mat-tabs__btn.is-active {
  background: #111;
  border-color: #111;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.mat-panel {
  display: none;
  animation: mat-panel-in 0.28s ease;
}

.mat-panel.is-active {
  display: block;
}

.mat-panel[hidden] {
  display: none !important;
}

@keyframes mat-panel-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mat-panel__intro {
  margin: 0 0 1.5rem !important;
  font-size: 1rem;
  line-height: 1.65;
  color: #555;
  max-width: 68ch;
}

.mat-brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.mat-brand {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e8e6e1;
  border-radius: 14px;
  padding: 22px 20px 20px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.mat-brand:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
}

.mat-brand__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  margin: 0 0 14px;
  padding: 8px 12px;
  background: #faf9f7;
  border-radius: 10px;
}

.mat-brand__logo img {
  display: block;
  max-width: 100%;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.mat-brand__name {
  margin: 0 0 0.55em !important;
  font-size: 1.05rem;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.01em;
}

.mat-brand__text {
  margin: 0 !important;
  font-size: 0.92rem;
  line-height: 1.65;
  color: #555;
  flex: 1;
}

@media (max-width: 560px) {
  .mat-tabs {
    gap: 6px;
    margin-bottom: 1.25rem;
  }

  .mat-tabs__btn {
    padding: 9px 12px;
    font-size: 0.85rem;
  }

  .mat-brand-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Legacy class names (if old HTML remains) */
.mat-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 2rem;
}

.mat-nav a {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: #f3f1ec;
  color: #222 !important;
  text-decoration: none !important;
  font-size: 0.9rem;
  font-weight: 600;
}

.mat-section {
  margin: 0 0 2.5rem;
}

.mat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.mat-card {
  background: #fff;
  border: 1px solid #e8e6e1;
  border-radius: 14px;
  padding: 20px;
}

/* ========== Cooperation page (sotrudnichestvo) ========== */
.coop-page {
  margin: 0 0 1rem;
}

.coop-kicker {
  margin: 0 0 0.5rem !important;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #999;
}

.coop-block {
  margin: 0 0 3rem;
}

.coop-block__head {
  margin: 0 0 1.75rem;
}

.coop-block__head--center {
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}

.coop-block__title {
  margin: 0 0 0.5rem !important;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #111;
}

.coop-block__subtitle {
  margin: 0 !important;
  font-size: 1.1rem;
  color: #666;
}

.coop-block__lead {
  margin: 0.75rem 0 0 !important;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #555;
}

/* Block 1: 6 advantage cards with icons */
.coop-adv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.coop-adv {
  background: #fff;
  border: 1px solid #e8e6e1;
  border-radius: 14px;
  padding: 28px 22px 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  text-align: center;
}

.coop-adv:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.coop-adv__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f4f2ec;
}

.coop-adv__icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}

.coop-adv__title {
  margin: 0 0 0.55em !important;
  font-size: 1.05rem;
  font-weight: 700;
  color: #111;
}

.coop-adv__text {
  margin: 0 !important;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #555;
}

/* Block 2 & 4: image + text split - separate sections */
.coop-block--cnc,
.coop-block--consult {
  padding: 2.5rem 0;
  margin: 0 0 2.5rem;
  border-top: 1px solid #ebe8e1;
  border-bottom: 1px solid #ebe8e1;
}

.coop-block--consult {
  background: #faf9f6;
  margin-left: -12px;
  margin-right: -12px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 16px;
  border: 1px solid #ebe8e1;
}

.coop-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 36px;
  align-items: center;
}

/* Text left, photo right (constructor block) */
.coop-split--text-media {
  grid-template-columns: 1fr 1.05fr;
}

.coop-split--reverse .coop-split__media {
  order: 2;
}

.coop-split--reverse .coop-split__body {
  order: 1;
}

.coop-split__media {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
  background: #f0eee8;
}

.coop-split__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.coop-split__body p {
  margin: 0 0 0.9em !important;
  font-size: 0.98rem;
  line-height: 1.7;
  color: #444;
}

.coop-split__body p:last-child {
  margin-bottom: 0 !important;
}

.coop-split__accent {
  font-weight: 600;
  color: #111 !important;
  font-size: 1.05rem !important;
}

/* Block 3: bonus plans table */
.coop-block--bonus {
  padding: 2.5rem 1.5rem;
  margin-left: -12px;
  margin-right: -12px;
  border-radius: 20px;
  background: #f0f0f0;
}

.coop-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

.coop-plan {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 28px 22px 22px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  text-align: center;
}

.coop-plan--featured {
  border-color: #c9e6b8;
  box-shadow: 0 0 20px rgba(45, 168, 0, 0.12);
}

.coop-plan__rate {
  margin: 0 0 1.1rem !important;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: #2da800;
}

.coop-plan__rate--text {
  font-size: 1.45rem !important;
  line-height: 1.2;
  margin-bottom: 1.25rem !important;
}

.coop-plan__list {
  list-style: none !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  text-align: left;
  flex: 1;
}

.coop-plan__list li {
  position: relative;
  padding: 0.45em 0 0.45em 1.6em;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #333;
  border-bottom: 1px solid #f2f2f2;
}

.coop-plan__list li:last-child {
  border-bottom: 0;
}

.coop-plan__list li::before {
  position: absolute;
  left: 0;
  top: 0.45em;
  font-weight: 700;
  font-size: 0.95em;
}

.coop-plan__list li.is-on::before {
  content: "✓";
  color: #2da800;
}

.coop-plan__list li.is-off {
  color: #aaa;
  text-decoration: line-through;
}

.coop-plan__list li.is-off::before {
  content: "-";
  color: #ccc;
  text-decoration: none;
}

.coop-plan__note {
  margin: auto 0 0 !important;
  padding-top: 0.75rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #777;
  text-align: left;
}

.coop-plan__studio {
  margin: 0 !important;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #444;
  text-align: left;
}

/* Block 5: simple text with visual strip - fully separate from consult */
.coop-block--simple {
  padding: 2.5rem 0 1rem;
  margin: 2.5rem 0 1rem;
  clear: both;
}

.coop-simple {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.coop-simple__rule {
  display: block;
  width: 72px;
  height: 3px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(90deg, transparent, var(--veron-accent, #c9a227), transparent);
  border-radius: 2px;
}

.coop-simple .coop-block__title {
  margin-bottom: 1rem !important;
}

.coop-simple p {
  margin: 0 0 1em !important;
  font-size: 1.02rem;
  line-height: 1.75;
  color: #444;
}

.coop-simple__ps {
  font-style: italic;
  color: #666 !important;
  margin-bottom: 1.5rem !important;
}

.coop-simple .coop-simple__rule:last-child {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

@media (max-width: 960px) {
  .coop-adv-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .coop-split,
  .coop-split--reverse,
  .coop-split--text-media {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .coop-split--reverse .coop-split__media,
  .coop-split--reverse .coop-split__body {
    order: initial;
  }

  .coop-block--consult {
    margin-left: 0;
    margin-right: 0;
  }

  .coop-plans {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }

  .coop-block--bonus {
    margin-left: 0;
    margin-right: 0;
    padding: 2rem 1rem;
  }
}

/* Lead form privacy checkbox */
.form-field--check {
  margin: 4px 0 14px;
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #555;
  cursor: pointer;
}

.form-check input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: #1a1a1a;
}

.form-check a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 560px) {
  .coop-adv-grid {
    grid-template-columns: 1fr;
  }
}

.page-cta {
  margin: 2.5rem 0 1rem;
  padding: 28px 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
  color: #fff;
  text-align: center;
}

.page-cta p {
  margin: 0 0 12px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 1.05rem;
}

.page-cta .btn {
  margin-top: 4px;
}

.page-cta__phone {
  margin-top: 14px !important;
  font-size: 0.95rem !important;
}

.page-cta__phone a {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Cooperation designer CTA */
.coop-cta {
  margin: 2.75rem 0 1.25rem;
  padding: 2.25rem 1.5rem;
  border-radius: 20px;
  background: linear-gradient(145deg, #141414 0%, #2a2a2a 55%, #1c1c1c 100%);
  color: #fff;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.coop-cta__inner {
  max-width: 640px;
  margin: 0 auto;
}

.coop-cta__kicker {
  margin: 0 0 0.4rem !important;
  font-size: 0.78rem !important;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--veron-accent, #c9a227) !important;
}

.coop-cta__title {
  margin: 0 0 0.75rem !important;
  font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff !important;
  line-height: 1.25;
}

.coop-cta__text {
  margin: 0 0 1.35rem !important;
  font-size: 1rem !important;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82) !important;
}

.coop-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}

.coop-cta__btn-primary {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #fff !important;
  font-weight: 700;
  padding: 12px 22px;
}

.coop-cta__btn-primary:hover {
  background: var(--veron-accent, #c9a227) !important;
  border-color: var(--veron-accent, #c9a227) !important;
  color: #111 !important;
}

.coop-cta__btn-msg {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  padding: 11px 16px;
  font-weight: 600;
}

.coop-cta__btn-msg:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}

.coop-cta__btn-msg svg {
  flex-shrink: 0;
}

.coop-cta__phone {
  margin: 0.5rem 0 0 !important;
  font-size: 0.95rem !important;
  color: rgba(255, 255, 255, 0.75) !important;
  line-height: 1.5;
}

.coop-cta__phone a {
  display: inline-block;
  margin-left: 0.35em;
  color: #fff !important;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.coop-cta__phone a:hover {
  color: var(--veron-accent, #c9a227) !important;
  border-bottom-color: var(--veron-accent, #c9a227);
}

@media (max-width: 560px) {
  .coop-cta__actions {
    flex-direction: column;
  }

  .coop-cta__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

.page-more {
  margin-top: 1.5rem;
  color: #666;
}

/* Legal document */
.legal-doc h2 {
  margin-top: 1.75em !important;
  padding-top: 0.35em;
  border-top: 1px solid #eee;
  font-size: 1.15rem;
}

.legal-doc h2:first-child {
  border-top: 0;
  margin-top: 0.5em !important;
}

.legal-doc h3 {
  font-size: 1rem;
  margin-top: 1.25em !important;
}

.legal-doc p {
  color: #444;
  font-size: 0.95rem;
  line-height: 1.7;
}

.legal-doc__li {
  margin: 0.25em 0 0.25em 0.5em !important;
  padding-left: 0.25em;
  color: #444;
}

/* Footer multi-paragraph hours */
.footer-intro {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 12px 0 14px;
}

.footer-intro__p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  white-space: pre-line;
}

.footer-phone {
  margin: 10px 0 0;
  font-weight: 700;
  font-size: 1.1rem;
}

.footer-phone a {
  color: #fff;
  text-decoration: none;
}

.footer-phone a:hover {
  color: var(--veron-accent, #c9a227);
}

@media (max-width: 640px) {
  .veron-acc__summary {
    padding: 16px;
    font-size: 0.98rem;
  }

  .mat-grid,
  .coop-grid {
    grid-template-columns: 1fr;
  }
}

/* Better primary nav list from WP menu (desktop only; parent is hidden on mobile) */
@media (min-width: 1100px) {
  .primary-nav .primary-nav-list {
    display: flex;
    gap: 6px 14px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
  }
}

.mobile-nav__cta--ghost {
  margin-top: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}

.project-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  position: relative;
}

.project-card__price-hint {
  cursor: pointer;
  color: #999;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.project-card__price-hint.is-open {
  color: #111;
}



/* Single project CTA spacing */
.project-single .btn--dark {
  margin-top: 8px;
}

.logo-row img {
  background: transparent;
}

/* Back control on single project - in content, under fixed header (not over logo) */
.veron-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 10px 16px 10px 12px;
  border: 1px solid #1d1d1d;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease,
    box-shadow 0.15s ease;
}
.veron-back-link:hover,
.veron-back-link:focus {
  background: #2a2a2a;
  border-color: #2a2a2a;
  color: #fff;
  outline: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}
.veron-back-link:active {
  transform: scale(0.98);
}
.veron-back-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
}
.veron-back-link__label {
  letter-spacing: 0.02em;
  text-decoration: none;
}
.project-single__info > .veron-back-link {
  margin-top: 0;
}
@media (max-width: 782px) {
  .veron-back-link {
    min-height: 44px;
    padding: 11px 18px 11px 14px;
    font-size: 16px;
  }
}