/* Custom styles for litrep website */

/* Brand and theme colors */
:root {
  /* Typography tokens */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;
  --fs-h1: 2.25rem;
  --fs-h2: 1.75rem;
  --fs-h3: 1.375rem;
  --fs-body: 1.125rem;
  --fs-small: 0.875rem;

  /* Core surfaces */
  --bg-page: #1c1d21;
  --bg-navbar: #1c1d21;
  --bg-card: #24262b;
  --bg-surface: #202127;
  --nav-safe-offset: 4rem;
  --page-top-offset: 1.5rem;

  /* Accent system */
  --accent: #4da3ff;
  --accent-hover: #76b8ff;
  --accent-active: #2f86e6;
  --accent-press: #2f86e6;
  --accent-soft: rgba(77, 163, 255, 0.14);

  /* Text hierarchy */
  --text-heading: rgba(255, 255, 255, 0.95);
  --text-body: rgba(255, 255, 255, 0.85);
  --text-secondary: rgba(255, 255, 255, 0.65);
  --text-muted: rgba(255, 255, 255, 0.48);
  --text-disabled: rgba(255, 255, 255, 0.30);

  /* Borders & focus */
  --border-soft: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.12);
  --focus-ring: rgba(77, 163, 255, 0.35);

  /* Chips & pills */
  --chip-bg: rgba(255, 255, 255, 0.06);
  --chip-border: rgba(255, 255, 255, 0.08);
  --pill-bg: rgba(255, 255, 255, 0.06);
  --pill-border: rgba(255, 255, 255, 0.10);
  --pill-hover-bg: rgba(255, 255, 255, 0.10);
  --pill-hover-border: rgba(255, 255, 255, 0.14);
  --pill-hover-text: rgba(255, 255, 255, 0.92);
  --pill-disabled-bg: rgba(255, 255, 255, 0.04);
  --pill-disabled-border: rgba(255, 255, 255, 0.06);

  /* Legacy tokens (mapped to new system) */
  --primary-color: var(--accent);
  --dark-color: #2c2c2c;
  --light-color: #ffffff;
  --gray-color: #666666;
  --site-bg: var(--bg-page);
  --site-text: var(--text-body);
  --nav-text: #e6e6ea;
  --nav-bg: var(--bg-navbar);
  --nav-active-bg: #26272d;
  --panel-bg: #222429;
  --contacts-info-offset-y: 0rem; /* Kontakty text card vertical offset */
  --contacts-info-text-offset-y: -1.25rem; /* Kontakty text inside card */
  --contacts-info-padding-bottom: 0.1875rem; /* Kontakty card bottom padding */
}

@media (max-width: 1023px) {
  :root {
    --page-top-offset: 1rem;
  }
}

@media (max-width: 640px) {
  :root {
    --page-top-offset: 0.75rem;
  }
}

/* RESET BASICS */
html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-page);
}

body {
  background-color: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  line-height: var(--lh-relaxed);
}

/* Typography hierarchy */
h1, h2, h3 {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  color: var(--text-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

h4, h5, h6 {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  color: var(--text-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.h1 { font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; font-size: var(--fs-h1); font-weight: var(--fw-semibold); color: var(--text-heading); line-height: var(--lh-tight); }
.h2 { font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; font-size: var(--fs-h2); font-weight: var(--fw-semibold); color: var(--text-heading); line-height: var(--lh-tight); }
.h3 { font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--text-heading); line-height: var(--lh-tight); }

p, li, .page-content, .content-wrapper {
  color: var(--text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}

.text-secondary {
  color: var(--text-secondary) !important;
}

.text-muted {
  color: var(--text-muted) !important;
}

/* Links inside content */
.page-content a,
.content-wrapper a,
.section a {
  color: var(--accent);
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(77, 163, 255, 0.35);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.page-content a:hover,
.content-wrapper a:hover,
.section a:hover {
  color: var(--accent-hover);
  text-decoration-color: rgba(77, 163, 255, 0.6);
}

/* Buttons */
.btn-accent,
.btn-primary,
.button-primary {
  background: var(--accent);
  color: #0b1320;
  border: 1px solid var(--accent);
  box-shadow: 0 6px 16px rgba(12, 30, 60, 0.35);
}

.btn-accent:hover,
.btn-primary:hover,
.button-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-accent:active,
.btn-primary:active,
.button-primary:active {
  background: var(--accent-press);
  border-color: var(--accent-press);
}

.btn-outline-accent,
.button-outline-accent {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.btn-outline-accent:hover,
.button-outline-accent:hover {
  background: var(--accent-soft);
  color: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* RESET BODY AND HTML TO REMOVE ANY TOP SPACING */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}

body {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ===== LEGACY QUARK HEADER NAVBAR (LIGHT) ===== */
/* Fixed 80px header bar that the original Quark theme uses. */
/* Disabled for now to avoid conflicts with #custom-header.
   Re-enable if we ever switch back to the default Quark header. */
/*
#header {
  background: var(--light-color) !important;
  border-bottom: 1px solid #e0e0e0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  padding: 0 !important;
  margin: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;
}

/* Header container when it also has `.section` class. */
#header.section {
  margin: 0 !important;
  padding: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 80px !important;
}

/* Hard override to keep legacy header pinned at top. */
html body #page-wrapper #header,
html body #page-wrapper #header.section,
html body.header-fixed #page-wrapper #header,
html body.header-fixed #page-wrapper #header.section,
html body.header-animated #page-wrapper #header,
html body.header-animated #page-wrapper #header.section,
html body.header-fixed.header-animated #page-wrapper #header,
html body.header-fixed.header-animated #page-wrapper #header.section,
html body.header-fixed.header-animated.header-dark #page-wrapper #header,
html body.header-fixed.header-animated.header-dark #page-wrapper #header.section,
html body.header-fixed.header-animated.header-dark.header-transparent #page-wrapper #header,
html body.header-fixed.header-animated.header-dark.header-transparent #page-wrapper #header.section,
html body.header-fixed.header-animated.header-dark.header-transparent.sticky-footer #page-wrapper #header,
html body.header-fixed.header-animated.header-dark.header-transparent.sticky-footer #page-wrapper #header.section,
html body #header,
html body #header.section,
html body.header-fixed #header,
html body.header-fixed #header.section,
html body.header-animated #header,
html body.header-animated #header.section,
html body.header-fixed.header-animated #header,
html body.header-fixed.header-animated #header.section,
html body.header-fixed.header-animated.header-dark #header,
html body.header-fixed.header-animated.header-dark #header.section,
html body.header-fixed.header-animated.header-dark.header-transparent #header,
html body.header-fixed.header-animated.header-dark.header-transparent #header.section,
html body.header-fixed.header-animated.header-dark.header-transparent.sticky-footer #header,
html body.header-fixed.header-animated.header-dark.header-transparent.sticky-footer #header.section,
#header.scrolled,
#header.section.scrolled {
  position: fixed !important;
  top: 0px !important;
  left: 0px !important;
  right: 0px !important;
  margin: 0px !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  padding: 0px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;
  transform: none !important;
  translate: none !important;
  background: var(--light-color) !important;
  border-bottom: 1px solid #e0e0e0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  z-index: 9999 !important;
  width: 100% !important;
  max-width: none !important;
}

/* Prevent wrappers from adding extra top spacing. */
#page-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Content offset so page does not sit under the fixed header. */
#body-wrapper {
  padding-top: calc(var(--nav-safe-offset) + var(--page-top-offset)) !important;
}

/* Десктоп: отступ задаём только у #body-wrapper, чтобы скрипт body padding не мешал переменным */
@media (min-width: 769px) {
  body {
    padding-top: 0 !important;
  }
}

/* Мобильная версия: body без отступа; отступ контента меняется в конце файла (блок «Только мобильная версия») */
@media (max-width: 768px) {
  body {
    padding-top: 0.3rem !important;
  }
}

/* Normalize top margins on first visible content block. */
#body-wrapper .page-content > :first-child,
#body-wrapper .content-wrapper > :first-child,
#body-wrapper .container > :first-child:not(.home-feature-list) {
  margin-top: 0 !important;
}

#body-wrapper .main-content .content > h1:first-child,
#body-wrapper .main-content .content > h2:first-child,
#body-wrapper .main-content .content > h3:first-child {
  margin-top: 0 !important;
}

/* Legacy navbar container sizing and alignment. */
#header .container {
  padding: 0 1.5rem !important;
  margin: 0 auto !important;
  max-width: 1200px !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
}

/* Legacy navbar row layout (logo | menu | actions). */
#header .navbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  height: 80px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  position: relative !important;
}

/* Legacy logo alignment inside the navbar. */
#header .navbar-section.logo {
  display: flex !important;
  align-items: center !important;
  height: 80px !important;
}

/* Legacy logo/brand link styles. */
#header .navbar-brand {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Company name text (legacy header). */
#header .company-name {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--primary-color) !important;
  text-decoration: none !important;
}

/* Company logo image (legacy header). */
#header .company-logo {
  max-height: 40px !important;
  width: auto !important;
  margin-right: 10px !important;
}

/* Desktop menu wrapper (legacy header). */
#header .navbar-section.desktop-menu {
  display: flex !important;
  align-items: center !important;
  height: 80px !important;

}

/* Legacy menu list container. */
#header .navbar-section.desktop-menu .dropmenu {
  display: flex !important;
  align-items: center !important;
  height: 80px !important;
}

/* Top-level list in legacy menu. */
#header .navbar-section.desktop-menu .dropmenu > ul {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  height: 80px !important;
}

/* Top-level list item (legacy). */
#header .navbar-section.desktop-menu .dropmenu > ul > li {
  margin: 0 0.8rem !important;
  white-space: nowrap;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: 80px !important;
  padding: 0.5rem 0 !important;
}

/* Top-level link styles (legacy). */
#header .navbar-section.desktop-menu .dropmenu > ul > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem 1rem !important;
  text-decoration: none !important;
  color: var(--dark-color) !important;
  font-weight: 500 !important;
  font-size: 1.1rem !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  border-radius: 4px !important;
  height: 40px !important;
}

#header .navbar-section.desktop-menu .dropmenu > ul > li > a:hover,
#header .navbar-section.desktop-menu .dropmenu > ul > li > a:focus,
#header .navbar-section.desktop-menu .dropmenu > ul > li > a.active {
  color: var(--primary-color) !important;
}

/* Make the entire li area hoverable (legacy). */
#header .navbar-section.desktop-menu .dropmenu > ul > li {
  cursor: pointer !important;
}

/* Legacy dropdown panel (level 2). */
#header .navbar-section.desktop-menu .dropmenu ul ul {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: var(--light-color) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border-radius: 6px !important;
  min-width: 200px !important;
  padding: 0.5rem 0 !important;
  display: none !important;
  z-index: 1001 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  margin-top: 4px !important;
}

/* Legacy dropdown reveal on hover. */
#header .navbar-section.desktop-menu .dropmenu ul li:hover ul {
  display: block !important;
}

#header .navbar-section.desktop-menu .dropmenu ul ul li {
  margin: 0 !important;
  display: block !important;
  height: auto !important;
}

#header .navbar-section.desktop-menu .dropmenu ul ul li a {
  padding: 0.6rem 1rem !important;
  color: var(--dark-color) !important;
  font-weight: 400 !important;
  font-size: 1rem !important;
  display: block !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  border-radius: 0 !important;
  height: auto !important;
}

#header .navbar-section.desktop-menu .dropmenu ul ul li a:hover {
  background: #f8f9fa !important;
  color: var(--primary-color) !important;
}

/* Legacy header adjustments for smaller screens. */
@media (max-width: 768px) {
  #header .navbar-section.desktop-menu {
    display: none !important;
  }
  
  #header .navbar {
    padding: 0 1rem !important;
  }
  
  #header .container {
    padding: 0 1rem !important;
  }
  
  #header .company-logo {
    max-height: 32px !important;
  }
  
  #header .company-name {
    font-size: 1rem !important;
  }
  
  /* Ensure mobile menu button is properly positioned */
  .mobile-menu .button_container {
    top: 18px !important;
  }
}
*/

/* ===== CUSTOM DESKTOP NAVBAR (PREMIUM DARK) ===== */
/* Main custom navbar wrapper: fixed, dark background, ~64px height. */
/* Use !important to prevent theme/script conflicts that cause navbar to shift on load */
#custom-header.navbar {
  display: flex;
  align-items: flex-start;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4rem;
  width: 100%;
  z-index: 99999;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bg-page);
  border: none;
  border-bottom: none;
  box-shadow: none;
  outline: none;
  filter: none;
  transition: box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
              background 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Shadow appears when scrolling. */
#custom-header.navbar.is-scrolled {
  box-shadow: none;
  background: var(--bg-page);
  border: none;
}

/* Inner layout: flex row – logo left, menu next, CTA after menu. */
#custom-header .navbar-inner {
  height: 4rem;
  max-width: 100%;
  margin: 0;
  padding: 0.75rem 2rem 0 12.5rem; /* Top padding to push content down, left padding increased to shift content right, right gutter: 32-40px range */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  background: transparent;
  border: none;
}

/* Logo area (left zone). */
#custom-header .navbar-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-right: 0.5rem; /* Gap between logo and nav links */
  min-height: 4rem; /* Reserve space before logo loads to prevent navbar shift */
}

/* Clickable logo link wrapper. */
#custom-header .navbar-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* Logo image sizing. */
#custom-header .navbar-logo-img {
  height: 5.25rem;
  max-width: 21rem;
  width: auto;
  object-fit: contain;
  object-position: left center;
}

/* Center column wrapper around the menu list. */
#custom-header .navbar-menu-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

/* Nav element (bridge between menu-wrap and the UL). */
#custom-header .navbar-nav {
  display: flex;
  align-items: center;
  height: 4rem;
}

/* Top-level list (horizontal). */
#custom-header .navbar-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  height: 100%;
  white-space: nowrap;
}

/* Top-level item container (positions dropdown). */
#custom-header .navbar-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0; /* override Spectre's "ul li { margin-top: 0.4rem }" */
}

/* Raise active item stacking above neighbors. */
#custom-header .navbar-item.is-open {
  z-index: 3;
}

/* Top-level link "pill" styling. */
#custom-header .navbar-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.375rem;
  padding: 0 0.9375rem;
  line-height: 1;
  box-sizing: border-box;
  border-radius: 0.625rem;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text-body);
  text-decoration: none;
  border: 0.0625rem solid transparent;
  transition: color 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
              background 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Hover/focus styles for top-level items. */
#custom-header .navbar-link:hover,
#custom-header .navbar-link:focus-visible {
  color: var(--text-heading);
  border-color: var(--border-strong);
  background: transparent;
}

/* Active page state for top-level items. */
#custom-header .navbar-link.is-active {
  color: var(--text-heading);
  background: var(--nav-active-bg);
  border-color: var(--border-soft);
}

/* Focus ring for keyboard navigation. */
#custom-header .navbar-link:focus-visible,
#custom-header .navbar-dropdown-link:focus-visible,
#custom-header .navbar-submenu-link:focus-visible,
#custom-header .navbar-mega-link:focus-visible,
#custom-header .navbar-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.1875rem var(--focus-ring);
}

/* Dropdown chevron indicator. */
#custom-header .navbar-chevron {
  font-size: 0.85rem;
  opacity: 0.6;
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Rotate chevron when dropdown is open. */
#custom-header .navbar-item.is-open > .navbar-link .navbar-chevron {
  opacity: 0.9;
  transform: rotate(90deg);
}

/* Dropdown panel (level 2) base state. */
#custom-header .navbar-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: -10%;
  min-width: clamp(32rem, 42vw, 42rem);
  max-width: min(46rem, calc(100vw - 3rem));
  padding: 1.25rem 1.5rem;
  margin: 0;
  background: var(--bg-card);
  border: 0.0625rem solid var(--border-soft);
  border-radius: 0.875rem;
  box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(-0.375rem);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 100001;
}

/* Compact dropdown for simple one-level sections (e.g. "О компании"). */
#custom-header .navbar-dropdown.navbar-dropdown-compact {
  min-width: 20rem;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: 0.9rem 1rem;
}

/* Ensure the active dropdown sits above neighbors. */
#custom-header .navbar-item.is-open > .navbar-dropdown {
  z-index: 100002;
}

/* Hover bridge to prevent flicker when moving to dropdown. */
#custom-header .navbar-dropdown::before {
  content: '';
  position: absolute;
  top: -0.75rem;
  left: 0;
  right: 0;
  height: 0.75rem;
}

/* Show dropdown when parent is open or focused. */
#custom-header .navbar-item.is-open > .navbar-dropdown,
#custom-header .navbar-item:focus-within > .navbar-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Mega menu layout */
#custom-header .navbar-mega-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(12rem, 1fr));
  gap: 2rem;
  align-items: start;
}

#custom-header .navbar-mega-column {
  min-width: 0;
}

#custom-header .navbar-mega-column-flat {
  grid-column: 1 / -1;
  max-width: 18rem;
}

#custom-header .navbar-dropdown.navbar-dropdown-compact .navbar-mega-grid {
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

#custom-header .navbar-dropdown.navbar-dropdown-compact .navbar-mega-column-flat {
  max-width: 100%;
}

#custom-header .navbar-mega-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.15rem, 1.05rem + 0.2vw, 1.35rem);
  font-weight: var(--fw-semibold, 600);
  color: var(--text-heading);
  line-height: 1.25;
}

#custom-header .navbar-mega-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

#custom-header .navbar-mega-item {
  list-style: none;
  margin: 0;
  padding: 0;
}

#custom-header .navbar-mega-item + .navbar-mega-item {
  margin-top: 0.0625rem;
}

#custom-header .navbar-mega-link {
  display: block;
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem;
  font-size: clamp(0.95rem, 0.9rem + 0.1vw, 1.05rem);
  font-weight: var(--fw-regular, 400);
  line-height: 1.3;
  color: var(--text-body);
  text-decoration: none;
  transition: color 140ms ease, background 140ms ease;
}

#custom-header .navbar-mega-link:hover,
#custom-header .navbar-mega-link:focus-visible {
  color: var(--text-heading);
  background: var(--accent-soft);
}

#custom-header .navbar-mega-link.is-active {
  color: var(--text-heading);
  background: var(--accent-soft);
}

@media (max-width: 1366px) {
  #custom-header .navbar-dropdown {
    min-width: clamp(28rem, 40vw, 36rem);
    max-width: min(40rem, calc(100vw - 2rem));
    padding: 1rem 1.25rem;
  }

  #custom-header .navbar-mega-grid {
    gap: 1.5rem;
  }
}

/* CTA wrapper (right zone – positioned from right edge). */
#custom-header .navbar-cta-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto; /* Push CTA to the right */
  margin-right: 25rem; /* Distance from right edge: 32-40px range */
}

/* 1920x1080: one height variable controls the whole navbar; отступ контента сверху */
@media (max-width: 1920px) {
  :root {
    --navbar-height-1920: 4.5rem;
    --nav-safe-offset: 4.5rem;
    --page-top-offset: 0.5rem;
    --home-feature-top-offset: -72px;
  }
  #body-wrapper {
    padding-top: 3.5rem !important;
  }

  #custom-header.navbar {
    height: var(--navbar-height-1920);
    top: 0 !important;
  }

  #custom-header .navbar-inner {
    height: var(--navbar-height-1920);
    padding: 0 1.5rem 0 10rem;
  }

  #custom-header .navbar-logo {
    min-height: var(--navbar-height-1920);
  }

  #custom-header .navbar-cta-wrap {
    margin-right: 10.5rem;
  }
}

/* 2560: отступ контента сверху и переменные для блока главной */
@media (min-width: 1921px) and (max-width: 2560px) {
  :root {
    --page-top-offset: 0.5rem;
    --home-feature-top-offset: -72px;
  }
  #body-wrapper {
    padding-top: 4.2rem !important;
  }
}

/* Reduce gaps on smaller desktop sizes. */
@media (max-width: 1280px) {
  #custom-header .navbar-inner {
    padding: 0 1.75rem 0 2.5rem; /* Slightly reduced padding for smaller screens, left padding increased */
    column-gap: 0.75rem;
  }

  #custom-header .navbar-menu {
    gap: 0.75rem;
  }

  #custom-header .navbar-menu-wrap {
    gap: 1rem;
  }

  #custom-header .navbar-logo {
    margin-right: 1.5rem; /* Reduced gap for smaller screens */
  }

  #custom-header .navbar-cta-wrap {
    margin-left: auto; /* Push CTA to the right */
    margin-right: 1.75rem; /* Reduced distance from right edge for smaller screens */
  }
}

/* CTA button styling. */
#custom-header .navbar-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.375rem;
  padding: 0 1rem;
  line-height: 1;
  box-sizing: border-box;
  white-space: nowrap;
  border-radius: 0.625rem;
  border: 0.0625rem solid transparent;
  background: var(--accent);
  color: var(--bg-page);
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* CTA hover and active feedback. */
#custom-header .navbar-cta:hover {
  background: var(--accent-hover);
}

#custom-header .navbar-cta:active {
  background: var(--accent-active);
}

/* Mobile fallback for nested dropdowns (custom header). */
@media (max-width: 768px) {
  #custom-header nav ul li ul {
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  #custom-header nav ul li ul li a {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.8rem !important;
  }
  
  .dropdown-arrow {
    font-size: 0.6rem !important;
  }
}

/* REMOVE EXTRA SPACING FROM SECTIONS (отступ #body-wrapper задаётся отдельно ниже — мобилка/1920/2560) */
section.section:not(#body-wrapper) {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

section.section:first-of-type:not(#body-wrapper) {
  padding-top: 1rem !important;
}

/* MODERN BUTTONS */
.btn, .button {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--light-color);
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.btn:hover, .button:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-0.0625rem);
  box-shadow: 0 0.125rem 0.5rem rgba(77, 163, 255, 0.3);
}

.btn-secondary {
  background-color: transparent;
  border: 0.125rem solid var(--border-strong);
  color: var(--text-secondary);
}

.btn-secondary:hover {
  background-color: var(--accent-soft);
  color: var(--text-body);
  border-color: var(--accent);
}

/* CUSTOM FORM BUTTONS - HIGHER SPECIFICITY */
.form-actions .custom-form-btn,
button.custom-form-btn,
.btn.custom-form-btn,
.button.custom-form-btn,
a.custom-form-btn,
.text-center .custom-form-btn {
  padding: 1.25rem 2.5rem !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  border-radius: 0.5rem !important;
  margin: 0 0.625rem !important;
  min-width: 13.75rem !important;
  transition: all 0.3s ease !important;
  border: none !important;
  text-transform: none !important;
  height: auto !important;
  line-height: 1.2 !important;
  display: inline-block !important;
  text-decoration: none !important;
}

.form-actions .custom-form-btn.btn-primary,
button.custom-form-btn.btn-primary,
.btn.custom-form-btn.btn-primary,
.button.custom-form-btn.btn-primary,
a.custom-form-btn.btn-primary,
.text-center .custom-form-btn.btn-primary {
  background-color: var(--accent) !important;
  color: #0b1320 !important;
  box-shadow: 0 0.25rem 0.9375rem rgba(77, 163, 255, 0.3) !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 16rem !important;
  box-sizing: border-box !important;
}

.form-actions .custom-form-btn.btn-primary:hover,
button.custom-form-btn.btn-primary:hover,
.btn.custom-form-btn.btn-primary:hover,
.button.custom-form-btn.btn-primary:hover,
a.custom-form-btn.btn-primary:hover,
.text-center .custom-form-btn.btn-primary:hover {
  background-color: var(--accent-hover) !important;
  transform: translateY(-0.125rem) !important;
  box-shadow: 0 0.375rem 1.25rem rgba(77, 163, 255, 0.4) !important;
}

.form-actions .custom-form-btn.btn-secondary,
button.custom-form-btn.btn-secondary,
.btn.custom-form-btn.btn-secondary,
.button.custom-form-btn.btn-secondary,
a.custom-form-btn.btn-secondary,
.text-center .custom-form-btn.btn-secondary {
  background-color: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  border: 0.0625rem solid var(--border-strong) !important;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25) !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 16rem !important;
  box-sizing: border-box !important;
}

.form-actions .custom-form-btn.btn-secondary:hover,
button.custom-form-btn.btn-secondary:hover,
.btn.custom-form-btn.btn-secondary:hover,
.button.custom-form-btn.btn-secondary:hover,
a.custom-form-btn.btn-secondary:hover,
.text-center .custom-form-btn.btn-secondary:hover {
  background-color: var(--accent-soft) !important;
  color: var(--text-body) !important;
  border-color: var(--accent) !important;
  transform: translateY(-0.0625rem) !important;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35) !important;
}

/* MODERN LINKS */
a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--accent-hover);
}

/* MAIN PAGE BULLETED LIST LINKS ONLY */
body:has(#body-wrapper) #body-wrapper ul li a,
body:has(.content) .content ul li a {
  color: var(--primary-color) !important;
}

body:has(#body-wrapper) #body-wrapper ul li a:hover,
body:has(.content) .content ul li a:hover {
  color: var(--accent-hover) !important;
}

/* HEADINGS */
h1, h2, h3, h4, h5, h6 {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  color: var(--text-heading);
  font-weight: var(--fw-semibold);
  margin-bottom: 1rem;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
}

/* Content text scale */
body {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}

p {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  margin-bottom: 1.25rem;
  color: var(--text-body);
  font-weight: var(--fw-regular);
}

ul, ol {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  margin-bottom: 1.25rem;
}

li {
  font-size: inherit;
  line-height: inherit;
  margin-bottom: 0.625rem;
  font-weight: var(--fw-regular);
  color: var(--text-body);
}

/* Make lists more readable */
ul ol{
  font-size: inherit;
  line-height: inherit;
  margin-bottom: 1rem;
}

/* Strong text in lists */
ul li strong, ol li strong {
  font-size: inherit;
  font-weight: var(--fw-semibold);
}

/* Italic text */
em, i {
  font-size: inherit;
}

/* MODERN FORMS */
.form-group {
  margin-bottom: 1.5rem;
}

.form-input,
.form-textarea,
.form-select {
  border: 0.0625rem solid var(--border-soft);
  border-radius: 0.5rem;
  padding: 0.9rem 1rem;
  font-size: var(--fs-body);
  transition: all 0.2s ease;
  width: 100%;
  color: var(--text-body) !important;
  background-color: var(--bg-surface) !important;
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  box-sizing: border-box;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
  transform: translateY(-1px);
}

/* Neutralize native invalid styling (orange/red outlines) */
input:invalid,
textarea:invalid,
select:invalid {
  box-shadow: none !important;
  outline: none !important;
  border-color: var(--border-soft) !important;
}


/* Form labels styling */
.form-label {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  color: var(--text-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  margin-bottom: 0.5rem;
  display: block;
}

/* Required field indicator */
.form-label .required {
  color: var(--accent);
  font-weight: 700;
  margin-left: 0.2rem;
}

/* Required star inside custom checkbox label */
.form-label input[type="checkbox"] + .required,
.form-label .required.required {
  color: var(--accent) !important;
}

/* Generic required marker (Grav uses span.required) */
.required,
span.required,
.form-group .required,
.form-group label .required {
  color: var(--accent) !important;
}

/* COMPLETE RESET - Remove all potential conflicting styles */
select.form-select,
.form-select,
select[name*="service"],
select[name*="service"].form-select,
select[name*="service"]:focus,
select[name*="service"]:not(:focus),
select[name*="service"]:active,
select[name*="service"]:hover {
  /* Reset all properties */
  all: unset !important;
  
  /* Set basic form styling */
  display: block !important;
  width: 100% !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  padding: 0.9rem 1rem !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 8px !important;
  font-size: var(--fs-body) !important;
  font-family: inherit !important;
  line-height: var(--lh-normal) !important;
  box-sizing: border-box !important;
  
  /* Force text visibility */
  color: var(--text-body) !important;
  background-color: var(--bg-surface) !important;
  font-weight: var(--fw-regular) !important;
  opacity: 1 !important;
  visibility: visible !important;
  
  /* Webkit specific */
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-text-fill-color: var(--text-body) !important;
  
  /* Add dropdown arrow */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23b4b7bf'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 0.5rem 0.6rem !important;
  padding-right: 2.5rem !important;
}

/* Ensure options are visible */
.form-select option,
select[name*="service"] option {
  color: var(--text-body) !important;
  background-color: var(--bg-surface) !important;
  padding: 0.5rem !important;
}

/* Force dark select background in closed state */
.form-select,
select.form-select,
select.form-select.long,
select[name*="service"] {
  background-color: var(--bg-surface) !important;
  color: var(--text-body) !important;
  -webkit-text-fill-color: var(--text-body) !important;
  color-scheme: dark;
}

/* Custom select (service) to avoid native white flash */
.custom-select {
  position: relative;
  width: 100%;
}

.custom-select-display {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: left;
  background: var(--bg-surface);
  color: var(--text-body);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 0.9rem 2.5rem 0.9rem 1rem;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  cursor: pointer;
}
/* Стрелка выпадающего списка справа (не перекрывает текст) */
.custom-select-display::after {
  content: '';
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 0.35rem solid transparent;
  border-right: 0.35rem solid transparent;
  border-top: 0.4rem solid var(--text-body);
  pointer-events: none;
}
.custom-select.is-open .custom-select-display::after {
  border-top: none;
  border-bottom: 0.4rem solid var(--text-body);
}

.custom-select.is-open .custom-select-display {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.custom-select-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px;
  display: none;
  z-index: 50;
  max-height: 260px;
  overflow: auto;
}

.custom-select.is-open .custom-select-list {
  display: block;
}

.custom-select-option {
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text-body);
  border: 0;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--fs-body);
}

.custom-select-option:hover,
.custom-select-option.is-selected {
  background: var(--accent-soft);
}

/* Hide native select to prevent white flash; не перекрывать текст серым на мобильных */
select[name*="service"] {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 100% !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  z-index: 0 !important;
}

.form-select option:checked,
select[name*="service"] option:checked {
  color: var(--text-body) !important;
  background-color: var(--bg-card) !important;
  font-weight: bold !important;
}

/* Focus state */
select.form-select:focus,
.form-select:focus,
select[name*="service"]:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
  outline: none !important;
  color: var(--text-body) !important;
  background-color: var(--bg-surface) !important;
}

/* Form help text */
.form-help,
.form-text {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: var(--fs-small);
  color: var(--text-muted);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  margin-top: 0.375rem;
  margin-bottom: 0;
}

/* Responsive form typography */
@media (max-width: 768px) {
  .form-label {
    font-size: 1rem;
    margin-bottom: 0.4375rem;
  }

  .form-input,
  .form-textarea,
  .form-select,
  .custom-select-display {
    font-size: 1rem;
    padding: 0.75rem 0.875rem;
  }

  .form-input::placeholder,
  .form-textarea::placeholder {
    font-size: 1rem;
  }

  .custom-select-option {
    font-size: 1rem;
    padding: 0.625rem 0.875rem;
  }

  .form-help,
  .form-text {
    font-size: 0.8125rem;
  }

  .form-group {
    margin-bottom: 1.25rem;
  }

  .form-actions .custom-form-btn,
  button.custom-form-btn,
  .btn.custom-form-btn,
  .button.custom-form-btn,
  a.custom-form-btn,
  .text-center .custom-form-btn {
    font-size: 1rem !important;
    padding: 1rem 1.75rem !important;
    min-width: 11.25rem !important;
    margin: 0 0.5rem !important;
  }
  /* Кнопки «Отправить заявку» и «Очистить» — на всю ширину, текст по центру */
  .form-actions .btn-primary,
  .form-actions button.btn-primary,
  .form-actions .btn.btn-primary,
  .form-actions .btn-secondary,
  .form-actions button.btn-secondary,
  .form-actions .btn.btn-secondary {
    width: 100% !important;
    min-width: 16rem !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    white-space: normal !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  .form-label {
    font-size: 0.9375rem;
    margin-bottom: 0.375rem;
  }

  .form-input,
  .form-textarea,
  .form-select,
  .custom-select-display {
    font-size: 0.9375rem;
    padding: 0.6875rem 0.75rem;
  }

  .form-input::placeholder,
  .form-textarea::placeholder {
    font-size: 0.9375rem;
  }

  .custom-select-option {
    font-size: 0.9375rem;
    padding: 0.5625rem 0.75rem;
  }

  .form-help,
  .form-text {
    font-size: 0.75rem;
  }

  .form-group {
    margin-bottom: 1rem;
  }

  .form-actions {
    margin-top: 1.5rem;
  }

  .form-actions .custom-form-btn,
  button.custom-form-btn,
  .btn.custom-form-btn,
  .button.custom-form-btn,
  a.custom-form-btn,
  .text-center .custom-form-btn {
    font-size: 0.9375rem !important;
    padding: 0.875rem 1.5rem !important;
    min-width: 10rem !important;
    margin: 0.375rem 0.25rem !important;
    width: calc(50% - 0.5rem);
    display: inline-block;
  }

  /* Кнопки «Отправить заявку» и «Очистить» — на всю ширину, текст по центру */
  .form-actions .btn-primary,
  .form-actions button.btn-primary,
  .form-actions .btn.btn-primary,
  .form-actions .btn-primary.custom-form-btn,
  .form-actions button.btn-primary.custom-form-btn,
  .form-actions .btn.btn-primary.custom-form-btn,
  .form-actions .btn-secondary,
  .form-actions button.btn-secondary,
  .form-actions .btn.btn-secondary,
  .form-actions .btn-secondary.custom-form-btn,
  .form-actions button.btn-secondary.custom-form-btn,
  .form-actions .btn.btn-secondary.custom-form-btn {
    width: 100% !important;
    min-width: 16rem !important;
    max-width: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    white-space: normal !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
  }
}

/* Страница «Отправить заявку» (otpravit-zayavku): кнопки на мобильных — текст по центру, не обрезается */
@media (max-width: 768px) {
  body.page-otpravit-zayavku .form-actions .btn-primary,
  body.page-06-otpravit-zayavku .form-actions .btn-primary,
  body.page-otpravit-zayavku .form-actions button.btn-primary,
  body.page-06-otpravit-zayavku .form-actions button.btn-primary,
  body.page-otpravit-zayavku .form-actions .btn-secondary,
  body.page-06-otpravit-zayavku .form-actions .btn-secondary,
  body.page-otpravit-zayavku .form-actions button.btn-secondary,
  body.page-06-otpravit-zayavku .form-actions button.btn-secondary {
    width: 100% !important;
    min-width: 16rem !important;
    max-width: none !important;
    box-sizing: border-box !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
@media (max-width: 480px) {
  body.page-otpravit-zayavku .form-actions .btn-primary,
  body.page-06-otpravit-zayavku .form-actions .btn-primary,
  body.page-otpravit-zayavku .form-actions button.btn-primary,
  body.page-06-otpravit-zayavku .form-actions button.btn-primary,
  body.page-otpravit-zayavku .form-actions .btn-secondary,
  body.page-06-otpravit-zayavku .form-actions .btn-secondary,
  body.page-otpravit-zayavku .form-actions button.btn-secondary,
  body.page-06-otpravit-zayavku .form-actions button.btn-secondary {
    width: 100% !important;
    min-width: 16rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* CARDS AND SECTIONS */
.card {
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}

.card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}

/* UTILITIES */
.text-center {
  text-align: center;
}

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mt-4 { margin-top: 2rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 2rem !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.5rem !important; }
.pt-2 { padding-top: 1rem !important; }
.pt-3 { padding-top: 1.5rem !important; }
.pt-4 { padding-top: 2rem !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.5rem !important; }
.pb-2 { padding-bottom: 1rem !important; }
.pb-3 { padding-bottom: 1.5rem !important; }
.pb-4 { padding-bottom: 2rem !important; }

/* Contact Information Styles */
.contact-info-section {
  background: var(--bg-card);
  padding: clamp(20px, 3.2vw, 36px);
  padding-bottom: var(--contacts-info-padding-bottom);
  border-radius: 16px;
  margin: 2rem 0;
  transform: translateY(var(--contacts-info-offset-y)) !important;
  border: 1px solid var(--border-soft);
  max-width: 75rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Kontakty: move only the text inside the info card */
.contact-info-section > h1,
.contact-info-section > .contact-item {
  transform: translateY(var(--contacts-info-text-offset-y));
}

.contact-info-section h1 {
  color: var(--text-heading);
  margin-bottom: 1.25rem;
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.contact-item {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-soft);
}

.contact-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.contact-item h3 {
  color: var(--text-heading);
  font-size: var(--fs-h3);
  margin-bottom: 0.5rem;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.contact-item p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
}

.contact-item p strong {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.contact-item a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(77, 163, 255, 0.45);
  text-underline-offset: 4px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.contact-item a:hover {
  color: var(--accent-hover);
  text-decoration-color: rgba(77, 163, 255, 0.7);
}

.phone-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.phone-list li {
  margin-bottom: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
}

.phone-list li:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.phone-description {
  color: var(--text-secondary);
  font-weight: var(--fw-regular);
  font-style: normal;
}

.contact-info-section strong,
.contact-info-section b {
  font-weight: var(--fw-medium);
}

.email-list li,
.social-list li {
  margin-bottom: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
}

.email-list li:last-child,
.social-list li:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.email-description,
.social-description {
  color: var(--text-secondary);
  font-weight: var(--fw-regular);
  font-style: normal;
}

.map-section {
  margin: clamp(2.5rem, 8vh, 7.5rem) 0 2rem;
  scroll-margin-top: 6rem;
}

.map-section h2 {
  color: var(--text-heading);
  margin-bottom: 1rem;
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
}

.map-card {
  border-radius: 16px;
  overflow: hidden;
}

.map-embed {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: clamp(22.5rem, 55vh, 38.75rem);
  background: var(--bg-surface);
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-placeholder {
  text-align: center;
  color: var(--text-muted);
  padding: 1rem;
  font-family: var(--font-sans);
}

.map-placeholder-icon {
  font-size: 3rem;
  margin-bottom: 0.625rem;
}

.map-placeholder-title {
  font-size: var(--fs-h3);
  margin-bottom: 0.3125rem;
  color: var(--text-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.map-placeholder-subtitle {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: var(--lh-normal);
}

.map-embed.is-loaded .map-placeholder {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .contact-info-section {
    padding: clamp(20px, 6vw, 32px);
    margin: 1.5rem 0;
  }
  
  .contact-info-section h1 {
    font-size: 1.75rem;
  }
  
  .contact-item h3 {
    font-size: 1.125rem;
  }
  
  .contact-item p {
    font-size: 0.9375rem;
  }
  
  .phone-list li,
  .email-list li,
  .social-list li {
    font-size: 0.9375rem;
  }

  .map-embed {
    height: clamp(16.25rem, 45vh, 22.5rem);
  }
}

/* ===== Grav Form: position Dropzone remove button to the right of the file ===== */
/* Ensure preview acts as positioning context */
.dropzone.files-upload .dz-preview {
  position: relative;
}

/* Dropzone container styling for dark theme */
.dropzone.files-upload {
  background: var(--bg-surface);
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  color: var(--text-body);
}

.dropzone.files-upload .dz-message,
.dropzone.files-upload .dz-message span,
.dropzone.files-upload .dz-message .dz-button,
.dropzone.files-upload .dz-message strong {
  color: var(--text-secondary);
  font-weight: var(--fw-regular);
}

.dropzone.files-upload .dz-button {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text-body);
  font-weight: var(--fw-regular);
}

.dropzone.files-upload:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Move the remove link (cross) to the top-right of the file tile */
.dropzone.files-upload .dz-preview .dz-remove {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  display: block !important; /* ensure it's visible even when not hovering */
  width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
  text-align: center !important;
  background: rgba(0, 0, 0, 0.55) !important;
  color: #fff !important;
  border-radius: 50% !important;
  text-decoration: none !important;
  border: 0 !important;
  font-weight: 700 !important;
  overflow: hidden !important;
  padding: 0 !important;
  font-size: 0 !important; /* hide long label text */
  z-index: 50 !important; /* above image/details overlays */
}

/* Optional hover emphasis */
.dropzone.files-upload .dz-preview .dz-remove:hover {
  background: rgba(0, 0, 0, 0.8) !important;
}

/* Show a cross symbol instead of the text label */
.dropzone.files-upload .dz-preview .dz-remove:before {
  content: '×';
  font-size: 16px !important;
  line-height: 22px !important;
  display: inline-block !important;
}

/* ===== MOBILE CTA BUTTON - REMOVE ORANGE RECTANGLE ===== */
/* Nuclear option to remove any unwanted elements from mobile CTA button */
.mobile-cta a,
.mobile-cta a *,
.mobile-cta a::before,
.mobile-cta a::after,
.mobile-cta a *::before,
.mobile-cta a *::after {
  all: unset !important;
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  border: none !important;
  background: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  z-index: -9999 !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  border-color: transparent !important;
  outline-color: transparent !important;
  background-color: transparent !important;
  color: transparent !important;
}

/* Restore the button itself with clean styling */
.mobile-cta a {
  all: revert !important;
  display: block !important;
  background: #034880 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  text-align: center !important;
  padding: 12px 16px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  position: relative !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1 !important;
  pointer-events: auto !important;
  user-select: auto !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

/* Ensure no hover effects add unwanted elements */
.mobile-cta a:hover,
.mobile-cta a:focus,
.mobile-cta a:active,
.mobile-cta a:visited {
  border-color: transparent !important;
  outline-color: transparent !important;
  background-color: #023a6b !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Мобильная версия: кнопка «Отправить заявку» не срабатывает при тапе внизу экрана, когда меню закрыто */
@media (max-width: 768px) {
  .mobile-nav-content:not(.active),
  .mobile-nav-content:not(.active) .mobile-cta,
  .mobile-nav-content:not(.active) .mobile-cta a {
    pointer-events: none !important;
  }
}

/* ===== REELS PAGE ===== */
.reels-page {
  margin-top: 1rem;
}

.reels-page .container,
.reels-page .container.grid-xl,
.reels-page .container.grid-lg,
.reels-page .container.grid-md {
  width: 100% !important;
  padding: 0 1rem;
}

.reels-page .page-content {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.reels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  width: 100%;
  max-width: 1200px;
  margin: 24px auto 40px;
  align-items: start;
}

.reels-page--horizontal .reels-grid {
  grid-template-columns: repeat(3, minmax(500px, 1fr));
  column-gap: 60px;
  row-gap: 60px;
  max-width: 2000px;
  padding: 0 2rem;
  transform: translateX(-300px);
}

@media (max-width: 768px) {
  .reels-page--horizontal .reels-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 12px;
    max-width: 1200px;
    padding: 0 1rem;
    transform: none;
  }
}

@media (max-width: 480px) {
  .reels-page--horizontal .reels-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 10px;
    max-width: 900px;
    padding: 0 0.75rem;
  }
}

@media (max-width: 1920px) {
  /* 1080p scaling: reduce horizontal video block size + center it better */
  .reels-page--horizontal .reels-grid {
    grid-template-columns: repeat(3, minmax(420px, 1fr));
    column-gap: 40px;
    row-gap: 40px;
    max-width: 1600px;
    padding: 0 1.5rem;
    transform: none;
  }

  /* Применяем transform только к карточкам на странице reels, НЕ к карточкам на главной странице */
  .reels-page .reels-card,
  .reels-grid .reels-card {
    background: #1f1f1f;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    transform: translateX(-100px);
  }

  /* Исключаем карточки на главной странице из transform */
  .home-feature-media .reels-card,
  .home-slider-text-media .reels-card {
    transform: none !important;
  }

}
@media (max-width: 2560px) {

  .reels-grid .reels-card--vertical {
    grid-column: span 1;
    width: 100%;
    justify-self: stretch;
    transform: translateX(-100px);
  }

  /* Исключаем карточки на главной странице из transform */
  .home-feature-media .reels-card--vertical,
  .home-slider-text-media .reels-card--vertical {
    transform: none !important;
  }

}

@media (max-width: 3840px) {

  .reels-grid .reels-card--vertical {
    grid-column: span 1;
    width: 100%;
    justify-self: stretch;
    transform: translateX(-100px);
  }

  /* Исключаем карточки на главной странице из transform */
  .home-feature-media .reels-card--vertical,
  .home-slider-text-media .reels-card--vertical {
    transform: none !important;
  }

}

.reels-card {
  background: #1f1f1f;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  /* transform: translateX(-100px); */
}

.reels-media {
  position: relative;
  background: #111;
  aspect-ratio: 9 / 16;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}

.reels-card--horizontal .reels-media {
  aspect-ratio: 16 / 9;
}

.reels-card--horizontal {
  align-self: start;
}

.reels-grid .reels-card--horizontal {
  grid-column: span 1;
  width: 100%;
  justify-self: stretch;
}

.reels-media iframe,
.reels-media video,
.reels-media .reels-player {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  pointer-events: none;
}

.reels-media .reels-player {
  pointer-events: auto;
  position: relative;
}

.reels-media .video-js {
  width: 100%;
  height: 100%;
  background: #000;
}

.reels-media .video-js .vjs-tech {
  object-fit: cover;
}

.reels-media .video-js .vjs-control-bar {
  display: none;
}

.reels-media .video-js .vjs-poster {
  background-size: cover;
}

/* Blurred top/bottom bands like reels */
/* .reels-media::before,
.reels-media::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 18%;
  pointer-events: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(0, 0, 0, 0.25);
  z-index: 2;
} */

.reels-media::before {
  top: 0;
}

.reels-media::after {
  bottom: 0;
}

/* Keep vertical aspect ratio in fullscreen */
.reels-media video:fullscreen,
.reels-media video:-webkit-full-screen,
.reels-media video:-moz-full-screen,
.reels-media video:-ms-fullscreen {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000;
}

/* Полный экран: видео на весь viewport, без среза (горизонтальные и вертикальные) */
video:fullscreen,
video:-webkit-full-screen,
video:-moz-full-screen,
video:-ms-fullscreen,
.vjs-tech:fullscreen,
.vjs-tech:-webkit-full-screen,
.vjs-tech:-moz-full-screen,
.vjs-tech:-ms-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain !important;
  background: #000;
}

:fullscreen video,
:-webkit-full-screen video,
:-moz-full-screen video,
:-ms-fullscreen video {
  object-fit: contain !important;
}

/* Fullscreen container styling */
.reels-media:fullscreen,
.reels-media:-webkit-full-screen,
.reels-media:-moz-full-screen,
.reels-media:-ms-fullscreen {
  width: 100vw;
  height: 100vh;
  background: #000;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure vertical video fits in fullscreen (no zoom/crop) */
.reels-media:fullscreen .video-js .vjs-tech,
.reels-media:-webkit-full-screen .video-js .vjs-tech,
.reels-media:-moz-full-screen .video-js .vjs-tech,
.reels-media:-ms-fullscreen .video-js .vjs-tech,
.reels-media:fullscreen .reels-video,
.reels-media:-webkit-full-screen .reels-video,
.reels-media:-moz-full-screen .reels-video,
.reels-media:-ms-fullscreen .reels-video {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
}

.reels-media:fullscreen .reels-player,
.reels-media:-webkit-full-screen .reels-player,
.reels-media:-moz-full-screen .reels-player,
.reels-media:-ms-fullscreen .reels-player,
.reels-media:fullscreen .video-js,
.reels-media:-webkit-full-screen .video-js,
.reels-media:-moz-full-screen .video-js,
.reels-media:-ms-fullscreen .video-js {
  width: 100% !important;
  height: 100% !important;
  max-width: 100vw;
  max-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Video.js fullscreen overrides */
.video-js.vjs-fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.video-js.vjs-fullscreen,
.vjs-fullscreen .video-js {
  width: 100% !important;
  height: 100% !important;
  max-width: 100vw;
  max-height: 100vh;
}

.video-js.vjs-fullscreen .vjs-tech,
.vjs-fullscreen .vjs-tech {
  width: 100% !important;
  height: 100% !important;
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain !important;
}

.reels-media:fullscreen::before,
.reels-media:fullscreen::after,
.reels-media:-webkit-full-screen::before,
.reels-media:-webkit-full-screen::after,
.reels-media:-moz-full-screen::before,
.reels-media:-moz-full-screen::after,
.reels-media:-ms-fullscreen::before,
.reels-media:-ms-fullscreen::after {
  display: none;
}

/* Ensure poster covers the full frame */
.reels-media video[poster] {
  object-fit: cover;
  background: #000;
  display: block;
}

/* Custom controls overlay */
.reels-player {
  width: 100%;
  height: 100%;
}

.reels-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.reels-overlay-play {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.reels-player.is-playing .reels-overlay-play {
  opacity: 0;
  pointer-events: none;
}

/* Hide controls after inactivity in theater mode */
.reels-card.reels-theater .reels-player.is-idle .reels-controls {
  opacity: 0 !important;
  pointer-events: none !important;
}

.reels-card.reels-theater .reels-player.is-idle .reels-overlay-play {
  opacity: 0 !important;
  pointer-events: none !important;
}

.reels-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  z-index: 4;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
  color: #fff;
}

.reels-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.reels-time {
  font-size: 0.85rem;
  color: #e5e5e5;
  min-width: 86px;
  margin-right: 10px; /* more space from progress bar */
}

.reels-progress {
  position: relative;
  height: 6px;
  flex: 1 1 auto;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  cursor: pointer;
  transform: translateY(-2px);
}

.reels-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: inherit;
}

.reels-progress-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
}

/* Группа кнопок громкости и fullscreen — отступ от прогресса */
.reels-controls-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
}

.reels-volume {
  position: relative;
  display: flex;
  align-items: center;
}

.reels-volume-slider {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: 36px;
  height: 120px;
  background: rgba(20, 20, 20, 0.9);
  border-radius: 8px;
  padding: 8px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 6;
}

.reels-volume:hover .reels-volume-slider,
.reels-volume:focus-within .reels-volume-slider {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-16px);
}

.reels-volume input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  height: 4px;
  background: transparent;
  transform: rotate(-90deg);
}

.reels-volume input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.35);
  height: 4px;
  border-radius: 999px;
}

.reels-volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: -4px;
}

.reels-volume input[type="range"]::-moz-range-track {
  background: rgba(255, 255, 255, 0.35);
  height: 4px;
  border-radius: 999px;
}

.reels-volume input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
}

.reels-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.reels-icon-play {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}

.reels-icon-pause {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6 5h4v14H6zm8 0h4v14h-4z'/%3E%3C/svg%3E");
}

.reels-icon-volume {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 10v4h4l5 5V5L7 10H3z'/%3E%3C/svg%3E");
}

.reels-icon-mute {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16.5 12l4.5 4.5-1.5 1.5L15 13.5l-4.5 4.5-1.5-1.5L13.5 12 9 7.5l1.5-1.5L15 10.5l4.5-4.5 1.5 1.5z'/%3E%3C/svg%3E");
}

.reels-icon-fullscreen {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 14H5v5h5v-2H7v-3zm0-4h2V7h3V5H5v5zm10 7h-3v2h5v-5h-2v3zm-3-10V5h5v5h-2V7h-3z'/%3E%3C/svg%3E");
}

.reels-player.is-playing .reels-icon-play,
.reels-player.is-paused .reels-icon-pause {
  display: none;
}

.reels-player.is-muted .reels-icon-volume {
  display: none;
}

.reels-player:not(.is-muted) .reels-icon-mute {
  display: none;
}

@media (max-width: 1920px) {
  /* 1080p scaling: make overlay/controls icons smaller. Контролы остаются внизу по ширине карточки */
  .reels-card--horizontal .reels-controls {
    left: 0;
    right: 0;
    bottom: 0;
  }

  .reels-btn {
    width: 28px;
    height: 28px;
  }

  .reels-icon {
    width: 14px;
    height: 14px;
  }

  .reels-time {
    font-size: 0.8rem;
    min-width: 74px;
  }

  .reels-progress {
    height: 5px;
  }

  .reels-progress-thumb {
    width: 12px;
    height: 12px;
  }
}

/* Theater (shorts-like) mode */
body.reels-theater-open {
  overflow: hidden;
  /* Prevent layout shift when scrollbar disappears */
  padding-right: calc(100vw - 100%);
}

/* Prevent transformed ancestors from offsetting fixed theater layout */
body.reels-theater-open .section,
body.reels-theater-open #page-wrapper,
body.reels-theater-open #body-wrapper,
body.reels-theater-open .content-wrapper,
body.reels-theater-open .page-content {
  transform: none !important;
}

/* Keep scrollbar gutter stable to avoid header/content shift */
html {
  overflow-y: scroll;
}

.reels-theater-backdrop {
  display: none;
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 0;
}

.reels-card.reels-theater {
  position: fixed;
  inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw;
  min-height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  z-index: 100000;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: none !important;
}

/* Карточка в theater всегда на весь экран (перебивает мобильные .reels-card { width: 270px }) */
body.reels-theater-open .reels-card.reels-theater {
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
}

.reels-card.reels-theater .reels-theater-backdrop {
  display: block;
}

.reels-card.reels-theater .reels-media {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  border-radius: 0;
  position: static;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Theater: плеер на весь экран, видео — contain, без среза по бокам */
.reels-card.reels-theater .reels-player,
.reels-card.reels-theater .video-js {
  width: 100% !important;
  height: 100% !important;
  max-width: 100vw;
  max-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reels-card.reels-theater.reels-card--horizontal .reels-player,
.reels-card.reels-theater.reels-card--horizontal .video-js {
  width: 100% !important;
  height: 100% !important;
  max-width: 100vw;
  max-height: 100vh;
}

.reels-card.reels-theater .reels-video,
.reels-card.reels-theater .video-js .vjs-tech,
.reels-card.reels-theater .reels-media video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  object-fit: contain !important;
  background: #000;
}

/* Горизонтальное видео в theater: без среза по бокам (мобильные и десктоп) */
.reels-card.reels-theater.reels-card--horizontal .reels-video,
.reels-card.reels-theater.reels-card--horizontal .video-js .vjs-tech,
.reels-card.reels-theater.reels-card--horizontal .reels-media video {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
}

/* В theater всегда contain, в т.ч. для видео с poster (перебивает .reels-media video[poster]) */
.reels-card.reels-theater .reels-media video[poster] {
  object-fit: contain !important;
}

/* Вертикальное видео в theater: отключаем fluid Video.js, чтобы видео было видно (убирает чёрный экран) */
.reels-card.reels-theater .video-js {
  padding-top: 0 !important;
  position: relative !important;
}

.reels-card.reels-theater .video-js .vjs-tech {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* Вертикальная карточка в theater: колонка по ширине видео по центру, по бокам — фон (клик закрывает), прогресс по ширине видео */
.reels-card.reels-theater.reels-card--vertical .reels-media {
  width: min(56.25vh, 92vw) !important;
  max-width: min(56.25vh, 92vw) !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
}

.reels-card.reels-theater.reels-card--vertical .reels-player,
.reels-card.reels-theater.reels-card--vertical .video-js {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

.reels-card.reels-theater .reels-info {
  display: none;
}

@media (max-width: 480px) {
  .reels-time {
    min-width: 70px;
  }
}

/* Мобильный theater: явно contain для любого видео */
@media (max-width: 768px) {
  .reels-card.reels-theater .reels-player,
  .reels-card.reels-theater .video-js {
    width: 100% !important;
    height: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
  }
  /* Вертикальное видео в theater на мобильных: полный экран без обрезания по бокам */
  .reels-card.reels-theater.reels-card--vertical .reels-media {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
  }
  .reels-card.reels-theater.reels-card--vertical .reels-player,
  .reels-card.reels-theater.reels-card--vertical .video-js {
    max-width: 100vw !important;
    max-height: 100vh !important;
  }
  .reels-card.reels-theater .reels-video,
  .reels-card.reels-theater .reels-media video,
  .reels-card.reels-theater .video-js .vjs-tech {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
  }
}

.reels-link,
.reels-placeholder {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.reels-note {
  margin-top: 10px;
  color: #d0d0d0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.reels-note .reels-link {
  margin-left: 8px;
  display: inline-block;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.12);
}

.reels-info {
  padding: 16px 18px;
}

.reels-page .reels-title {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  color: var(--text-heading) !important; /* Match .portfolio-title color exactly */
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
}

.reels-page .reels-description {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  color: var(--text-secondary);
  margin: 0;
  font-size: 0.9rem;
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}

.reels-page .reels-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 30px 0;
}

/* Мобильная версия reels: одна колонка. Размер вертикальных карточек как у вертикального фото на главной (282×423) */
/* Параметры: --reels-vertical-size (ширина), --reels-vertical-height (высота превью). Для соответствия главной: 282px × 423px */
@media (max-width: 768px) {
  .reels-page {
    --reels-vertical-size: 282px;
    --reels-vertical-height: 500px;
    overflow-x: hidden;
  }
  body.reels-theater-open {
    overflow: hidden;
  }
  .reels-page .container {
    max-width: 100%;
  }
  .reels-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    justify-items: center;
    min-width: 0;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  /* Горизонтальная страница reels — тоже одна колонка на мобильных */
  .reels-page--horizontal .reels-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding: 0 1rem;
    transform: none;
  }
  .reels-card {
    width: min(78vw, 300px);
    margin: 0 auto;
    transform: none !important;
  }
  .reels-card--vertical {
    width: var(--reels-vertical-size) !important;
    max-width: var(--reels-vertical-size) !important;
    min-width: var(--reels-vertical-size);
    align-items: center;
  }
  /* Высота превью из --reels-vertical-height (как у вертикального фото на главной) */
  .reels-card--vertical .reels-media {
    width: 100% !important;
    height: var(--reels-vertical-height) !important;
    max-height: var(--reels-vertical-height) !important;
    min-height: var(--reels-vertical-height);
    aspect-ratio: 9 / 16;
    align-self: center;
    flex-shrink: 0;
  }
  /* В превью у вертикальных видео скрываем полоску прогресса, таймер и громкость; в fullscreen показываем */
  .reels-card--vertical:not(.reels-theater) .reels-progress,
  .reels-card--vertical:not(.reels-theater) .reels-time,
  .reels-card--vertical:not(.reels-theater) .reels-volume-btn {
    display: none !important;
  }
  .reels-card--vertical.reels-theater .reels-progress {
    display: flex !important;
  }
  .reels-card--vertical.reels-theater .reels-time {
    display: block !important;
  }
  /* Кнопка fullscreen справа снизу в превью у вертикальных видео */
  .reels-card--vertical:not(.reels-theater) .reels-controls-right {
    margin-left: auto !important;
  }
  .reels-card--vertical:not(.reels-theater) .reels-fullscreen {
    margin-left: auto;
  }
  .reels-card--horizontal {
    width: min(78vw, 300px);
  }
  .reels-media {
    width: 100%;
    aspect-ratio: 9 / 16;
  }
  /* Горизонтальное видео: высота только по соотношению сторон, карточка = размер превью */
  .reels-card--horizontal .reels-media {
    aspect-ratio: 16 / 9;
    height: auto;
  }
  .reels-card--horizontal .reels-player,
  .reels-card--horizontal .video-js {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  .reels-card--horizontal .reels-video,
  .reels-card--horizontal .video-js .vjs-tech {
    object-fit: contain;
  }
  .reels-card--horizontal .reels-controls {
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  /* Оверлей Play не перекрывает панель управления */
  .reels-card--horizontal .reels-overlay-play {
    bottom: 52px;
  }
  .reels-info {
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  .reels-page {
    --reels-vertical-size: 240px;
    --reels-vertical-height: 428px;
  }
  .reels-card {
    width: min(82vw, 270px);
  }
  .reels-card--vertical {
    width: var(--reels-vertical-size) !important;
    max-width: var(--reels-vertical-size) !important;
    min-width: var(--reels-vertical-size);
  }
  .reels-card--vertical .reels-media {
    height: var(--reels-vertical-height) !important;
    max-height: var(--reels-vertical-height) !important;
    min-height: var(--reels-vertical-height);
  }
  .reels-card--horizontal {
    width: min(82vw, 270px);
  }
}

/* ===== MODERN IMAGE ANIMATIONS ===== */
/* Fade-in and slide-up animation for images */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation delays for grid items */
.animate-on-scroll.delay-1 {
  transition-delay: 0.03s;
}

.animate-on-scroll.delay-2 {
  transition-delay: 0.06s;
}

.animate-on-scroll.delay-3 {
  transition-delay: 0.09s;
}

.animate-on-scroll.delay-4 {
  transition-delay: 0.12s;
}

.animate-on-scroll.delay-5 {
  transition-delay: 0.15s;
}

.animate-on-scroll.delay-6 {
  transition-delay: 0.18s;
}

/* Apply to portfolio images */
.portfolio-item,
.portfolio-image,
.gallery-item,
.lightbox-gallery__column,
.portfolio-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Stand pages: disable scroll animation for all stand cards */
.portfolio-grid .portfolio-item,
.portfolio-grid .portfolio-card,
.portfolio-grid .portfolio-image {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.portfolio-grid img[loading="lazy"],
.portfolio-grid img[loading="lazy"].loaded {
  opacity: 1 !important;
  transition: none !important;
}

/* Partners page: disable any visual animations */
.partners-section .partner-logo,
.partners-section .company-name a {
  transition: none !important;
}

.partners-section img[loading="lazy"],
.partners-section img[loading="lazy"].loaded {
  opacity: 1 !important;
  transition: none !important;
}

.portfolio-item.animated,
.portfolio-image.animated,
.gallery-item.animated,
.lightbox-gallery__column.animated,
.portfolio-card.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Smooth image loading */
.portfolio-image img,
.gallery-item img,
.lightbox-gallery__column img {
  transition: transform 0.3s ease, opacity 0.3s ease;
  will-change: transform;
}

.portfolio-image:hover img,
.gallery-item:hover img,
.lightbox-gallery__column:hover img {
  transform: scale(1.02);
}

/* Счётчик фотографий: круг, цифра всегда по центру (иконка вынесена из потока) */
.image-counter {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  line-height: 1;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums; /* ровная ширина цифр */
}

/* Иконка не участвует в центрировании — цифра остаётся единственным flex-элементом и центрируется автоматически */
.image-counter i {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8px;
  line-height: 1;
  pointer-events: none;
}

/* Fade-in for images in general */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.2s ease-in;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* Gallery specific animations */
.lightbox-gallery__column {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition: opacity 0.3s ease-out, 
              transform 0.3s ease-out;
}

.lightbox-gallery__column.animated {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Portfolio grid staggered animation (faster) */
.portfolio-item:nth-child(1) { transition-delay: 0.03s; }
.portfolio-item:nth-child(2) { transition-delay: 0.06s; }
.portfolio-item:nth-child(3) { transition-delay: 0.09s; }
.portfolio-item:nth-child(4) { transition-delay: 0.12s; }
.portfolio-item:nth-child(5) { transition-delay: 0.15s; }
.portfolio-item:nth-child(6) { transition-delay: 0.18s; }
.portfolio-item:nth-child(7) { transition-delay: 0.21s; }
.portfolio-item:nth-child(8) { transition-delay: 0.24s; }
.portfolio-item:nth-child(9) { transition-delay: 0.27s; }
.portfolio-item:nth-child(10) { transition-delay: 0.3s; }

/* Stand pages: animate only the first row (first 3 cards) */
body.page-typovye .portfolio-item:nth-child(n+4),
body.page-nestandart .portfolio-item:nth-child(n+4),
body.page-ekskluziv .portfolio-item:nth-child(n+4),
body.page-stand-page .portfolio-item:nth-child(n+4),
body.page-portfolio .portfolio-item:nth-child(n+4),
body.page-07-portfolio .portfolio-item:nth-child(n+4),
body.page-typovye .portfolio-item:nth-child(n+4) .portfolio-card,
body.page-nestandart .portfolio-item:nth-child(n+4) .portfolio-card,
body.page-ekskluziv .portfolio-item:nth-child(n+4) .portfolio-card,
body.page-stand-page .portfolio-item:nth-child(n+4) .portfolio-card,
body.page-portfolio .portfolio-item:nth-child(n+4) .portfolio-card,
body.page-07-portfolio .portfolio-item:nth-child(n+4) .portfolio-card {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

body.page-typovye .portfolio-item:nth-child(-n+3),
body.page-nestandart .portfolio-item:nth-child(-n+3),
body.page-ekskluziv .portfolio-item:nth-child(-n+3),
body.page-stand-page .portfolio-item:nth-child(-n+3),
body.page-portfolio .portfolio-item:nth-child(-n+3),
body.page-07-portfolio .portfolio-item:nth-child(-n+3) {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 280ms ease, transform 280ms ease;
}

body.page-typovye .portfolio-item:nth-child(-n+3).animated,
body.page-nestandart .portfolio-item:nth-child(-n+3).animated,
body.page-ekskluziv .portfolio-item:nth-child(-n+3).animated,
body.page-stand-page .portfolio-item:nth-child(-n+3).animated,
body.page-portfolio .portfolio-item:nth-child(-n+3).animated,
body.page-07-portfolio .portfolio-item:nth-child(-n+3).animated {
  opacity: 1;
  transform: translateY(0);
}

/* Gallery columns staggered animation (faster) */
.lightbox-gallery__column:nth-child(1) { transition-delay: 0.03s; }
.lightbox-gallery__column:nth-child(2) { transition-delay: 0.06s; }
.lightbox-gallery__column:nth-child(3) { transition-delay: 0.09s; }
.lightbox-gallery__column:nth-child(4) { transition-delay: 0.12s; }
.lightbox-gallery__column:nth-child(5) { transition-delay: 0.15s; }
.lightbox-gallery__column:nth-child(6) { transition-delay: 0.18s; }
.lightbox-gallery__column:nth-child(7) { transition-delay: 0.21s; }
.lightbox-gallery__column:nth-child(8) { transition-delay: 0.24s; }
.lightbox-gallery__column:nth-child(9) { transition-delay: 0.27s; }
.lightbox-gallery__column:nth-child(10) { transition-delay: 0.3s; }

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .portfolio-item,
  .portfolio-image,
  .gallery-item,
  .lightbox-gallery__column,
  .portfolio-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Home slider */
.home-slider {
  margin: 2.5rem auto;
  max-width: none;
  width: 100vw;
  position: relative;
  background: transparent;
  z-index: 0;
  isolation: isolate;
  --slides-per-view: 5;
  --card-width: 410px;
  --card-gap: 30px;
  --arrow-offset: 330px;
  --edge-padding: max(48px, min(var(--arrow-offset), calc((100vw - (var(--card-width) * var(--slides-per-view)) - (var(--card-gap) * (var(--slides-per-view) - 1))) / 2)));
  margin-left: calc(50% - 50vw);
  padding: 120px 0;
}

@media (max-width: 2560px) {
  .home-slider {
    /* 2K scaling: reduce slide/card width */
    --card-width: 330px;
    /* 2K scaling: reduce spacing between slides */
    --card-gap: 20px;
    /* 2K scaling: bring arrows closer so edges stay balanced */
    --arrow-offset: 235px;
    /* 2K scaling: reduce vertical padding around the slider */
    padding: 65px 0;
  }

  .home-slider-panel {
    /* 2K scaling: match background panel height to slider padding */
    top: -70px;
    height: calc(100% + 120px);
  }
}

@media (max-width: 1920px) {
  .home-slider {
    --card-width: 240px;
    --card-gap: 14px;
    --arrow-offset: 200px;
    padding: 50px 0;
  }

  .home-slider-panel {
    top: -50px;
    height: calc(100% + 100px);
  }
}

.home-slider-panel {
  /* Background rectangle behind the slider */
  position: absolute;
  left: 0;
  top: -110px;
  width: 100vw;
  height: calc(100% + 220px);
  transform: none;
  background: #222429;
  border-radius: 0;
  z-index: 0;
  pointer-events: none;
  border: 2px solid #3c414c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 24px 60px rgba(0, 0, 0, 0.6);
}

/* Override container max-width constraints for full-bleed slider */
.home-slider--fullbleed,
.content-wrapper .container > .home-slider,
.page-content > .home-slider,
.content-wrapper > .home-slider {
  max-width: none !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Force full-bleed even when nested inside page-content */
.home-slider--fullbleed,
.content-wrapper .container .home-slider,
.page-content .home-slider,
.content-wrapper .page-content .home-slider {
  max-width: none !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.home-slider-title {
  text-align: center;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}

.home-slider-description {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--nav-text);
  position: relative;
  z-index: 1;
}

.home-slider-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-start;
  z-index: 1;
}

.home-slider--center .home-slider-inner {
  justify-content: flex-start;
}

.home-slider--center .home-slider-viewport {
  max-width: none;
}

.home-slider--left .home-slider-inner {
  justify-content: flex-start;
}

.home-slider-viewport {
  overflow: hidden;
  background: inherit;
  border: none;
  box-shadow: none;
  z-index: 2;
  width: calc(100vw - (var(--edge-padding) * 2));
  touch-action: pan-y;
  cursor: grab;
  margin-left: var(--edge-padding);
  margin-right: var(--edge-padding);
}

.home-slider-track {
  background: inherit;
}

.home-slider-track {
  display: flex;
  gap: var(--card-gap) !important;
  transition: transform 420ms ease;
  will-change: transform;
  justify-content: flex-start;
  margin-right: 0;
}

.home-swiper .swiper-wrapper {
  will-change: transform;
  transform: translateZ(0);
}

.home-slider-track.no-transition,
.home-slider-track.is-dragging {
  transition: none;
}


.home-slider-slide {
  flex: 0 0 var(--card-width);
  padding: 0;
  margin-right: 0;
  box-sizing: border-box;
}

.home-slider-card {
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: transparent;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.home-slider-image {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 56 / 77;
  object-fit: cover;
  opacity: 1 !important;
  transition: none !important;
  background: transparent;
}

.home-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--nav-text);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease, color 0.2s ease;
  flex: 0 0 auto;
  z-index: 2;
  opacity: 0.9;
}

.home-swiper .swiper-button-prev,
.home-swiper .swiper-button-next {
  color: var(--nav-text) !important;
  pointer-events: auto !important;
}

.home-slider-prev {
  left: calc(var(--edge-padding) - 40px) !important;
}

.home-slider-next {
  right: calc(var(--edge-padding) - 40px) !important;
}

.home-swiper .swiper-button-prev {
  left: calc(var(--edge-padding) - 40px) !important;
}

.home-swiper .swiper-button-next {
  right: calc(var(--edge-padding) - 40px) !important;
}

.home-slider-arrow:hover {
  opacity: 1;
  color: #ffffff;
}

.home-slider-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.home-swiper .swiper-button-prev::after,
.home-swiper .swiper-button-next::after {
  content: none !important;
}

/* Стрелки через ::before — видны на всех устройствах (телефоны, прод), не зависят от шрифта в span */
.home-swiper .swiper-button-prev::before,
.home-swiper .swiper-button-next::before {
  content: '' !important;
  display: block !important;
  font-size: 22px !important;
  line-height: 1 !important;
  color: #e6e6ea !important;
  font-family: Georgia, 'Times New Roman', serif !important;
}
.home-swiper .swiper-button-prev::before {
  content: '\2039' !important;
}
.home-swiper .swiper-button-next::before {
  content: '\203A' !important;
}
.home-swiper .swiper-button-prev span,
.home-swiper .swiper-button-next span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Page load fade-in */
body {
  opacity: 1;
  transform: none;
}

body.page-fade-in .section,
body.page-fade-in .content-wrapper,
body.page-fade-in .page-content,
body.page-fade-in .home-slider,
body.page-fade-in footer {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 280ms ease, transform 280ms ease;
}

body:not(.page-fade-in) .section,
body:not(.page-fade-in) .content-wrapper,
body:not(.page-fade-in) .page-content,
body:not(.page-fade-in) .home-slider,
body:not(.page-fade-in) footer {
  opacity: 0;
  transform: translateY(6px);
}

@media (prefers-reduced-motion: reduce) {
  body {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 960px) {
  .home-slider {
    width: 100vw;
    --slides-per-view: 3;
    --edge-padding: 64px;
    --card-padding: 8px;
    padding: 0;
  }
}

@media (max-width: 640px) {
  .home-slider-inner {
    gap: 0.4rem;
  }

  .home-slider {
    --slides-per-view: 1.2;
    --edge-padding: 0;
    --card-padding: 6px;
    padding: 0;
  }

  /* Плавные свайпы панорамы на телефоне: не перехватывать вертикальный скролл */
  .home-swiper .swiper-wrapper,
  .home-slider-viewport {
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }

  /* Меньше прерывистости при резком свайпе: слайды на отдельном GPU-слое */
  .home-swiper .swiper-wrapper {
    will-change: transform;
    backface-visibility: hidden;
  }
  .home-swiper .swiper-slide {
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* Viewport на всю ширину — правая фотография не обрезается серой полосой */
  .home-slider-viewport {
    width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Убираем серую линию слева: граница и внутренние тени панели */
  .home-slider-panel {
    border: none !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important;
  }

  /* Чтобы правая фотография не загораживалась серым: фон слайда и карточки прозрачный */
  .home-slider-slide,
  .home-swiper .swiper-slide {
    background: transparent !important;
  }

  /* Размер фото как на скриншоте: ~214 × 320 px; прозрачный фон — правая фото не загораживается */
  .home-slider-card {
    width: 214px;
    max-width: 214px;
    margin-left: auto;
    margin-right: auto;
    background: transparent !important;
  }

  .home-slider-image {
    width: 214px;
    height: 320px;
    max-width: 214px;
    max-height: 320px;
    object-fit: cover;
    object-position: center;
  }

  /* Те же маленькие стрелки, что и на десктопе — только переключение по кнопкам, без свайпа */
  .home-slider .home-slider-arrow,
  .home-slider .home-slider-prev,
  .home-slider .home-slider-next,
  .home-swiper .swiper-button-prev,
  .home-swiper .swiper-button-next {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 0.9 !important;
    color: #e6e6ea !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .home-swiper .swiper-button-prev::before,
  .home-swiper .swiper-button-next::before {
    color: #e6e6ea !important;
  }
  .home-swiper .swiper-button-prev {
    left: 8px !important;
    right: auto !important;
  }
  .home-swiper .swiper-button-next {
    left: auto !important;
    right: 8px !important;
  }
}

/* Портфолио и стенды: модальное окно с фото — центрирование на мобильных (только когда модал открыт) */
@media (max-width: 768px) {
  #portfolioModal.portfolio-modal[style*="display: block"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  #portfolioModal.portfolio-modal[style*="display: block"] .modal-content,
  .portfolio-modal[style*="display: block"] .modal-content {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: auto !important;
    max-height: 92vh !important;
    transform: translateY(-50%) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 3rem 1rem 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }

  #portfolioModal.portfolio-modal[style*="display: block"] .modal-content img#modalImage,
  #portfolioModal.portfolio-modal[style*="display: block"] .modal-content img,
  .portfolio-modal[style*="display: block"] .modal-content img#modalImage,
  .portfolio-modal[style*="display: block"] .modal-content img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(100vh - 10rem) !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: center !important;
    flex-shrink: 0 !important;
    position: relative !important;
    left: 0 !important;
    right: auto !important;
  }

  #portfolioModal.portfolio-modal[style*="display: block"] .modal-close,
  .portfolio-modal[style*="display: block"] .modal-close {
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10002;
  }

  /* Стрелки меньше, влезают в экран и подняты выше */
  #portfolioModal.portfolio-modal[style*="display: block"] .modal-nav,
  .portfolio-modal[style*="display: block"] .modal-nav {
    font-size: 1.25rem !important;
    padding: 8px 10px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    top: 45% !important;
    transform: translateY(-50%) !important;
    z-index: 10002;
  }

  #portfolioModal.portfolio-modal[style*="display: block"] .modal-prev,
  .portfolio-modal[style*="display: block"] .modal-prev {
    left: 8px !important;
  }

  #portfolioModal.portfolio-modal[style*="display: block"] .modal-next,
  .portfolio-modal[style*="display: block"] .modal-next {
    right: 8px !important;
  }

  /* Счётчик фотографий сразу под фото, без лишней высоты */
  #portfolioModal.portfolio-modal[style*="display: block"] .modal-caption,
  .portfolio-modal[style*="display: block"] .modal-caption {
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
  }

  #portfolioModal.portfolio-modal[style*="display: block"] .modal-counter,
  .portfolio-modal[style*="display: block"] .modal-counter {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
  }
}

.home-slider-text {
  max-width: 1100px;
  margin: 0 auto 1.5rem;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.home-slider-text-body {
  flex: 1 1 0;
  min-width: 0;
}

.home-slider-text-media {
  flex: 0 1 38%;
  max-width: 420px;
}

.home-slider-text-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 14px;
}

.home-slider-text--top {
  margin-top: 1.5rem;
}

.home-slider-text--bottom {
  margin-top: 1.5rem;
}

.home-feature-list {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto 2.5rem;
  margin-top: var(--home-feature-top-offset, 0px) !important; /* Home blocks top offset */
  padding: 0 1rem;
}

/* Home: adjust these variables to move the whole custom block and media offsets */
:root {
  --home-feature-top-offset: -40px; /* adjust here (negative moves up) */
  --home-feature-text-offset-x: -11px; /* adjust here (negative moves left) */
  --home-feature-image-offset: 6.5rem; /* image offset from text (desktop) */
  --home-feature-video-offset: 6.5rem; /* video offset from text, smaller = higher (desktop) */
}

.home-feature-block {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

.home-feature-content {
  flex: 1 1 0;
  min-width: 0;
  transform: translateX(var(--home-feature-text-offset-x)); /* Home text horizontal offset */
}

/* Align Home first title with global page-top offset */
.home-feature-content > h3:first-child {
  margin-top: 0;
}

/* Home: align first H1 in custom blocks to match other pages */
body[data-page-template="home"] #body-wrapper .container > h1:first-child,
body[data-page-template="home"] .home-feature-text > h1:first-child {
  margin-top: 0;
}

/* Home: make custom block H1 more compact */
body[data-page-template="home"] .home-feature-content .home-feature-text > h1:first-child,
body[data-page-template="home"] .home-feature-content > h1:first-child {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
}

.home-feature-media {
  flex: 0 1 38%;
  max-width: 420px;
  margin-top: 0; /* Layout handled per media type below */
}

@media (max-width: 2560px) {
  .home-slider-text-media,
  .home-feature-media {
    /* 2K scaling: reduce vertical image column width */
    flex-basis: 32%;
    max-width: 360px;
  }
}

@media (max-width: 1920px) {
  .home-slider-text-media,
  .home-feature-media {
    /* 1080p scaling: reduce vertical image column width */
    flex-basis: 28%;
    max-width: 320px;
  }
}

.home-feature-media img,
.home-feature-video,
.home-feature-video-embed iframe {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 14px;
}

/* Home blocks: separate top offsets for image and video (adjust independently) */
.home-feature-media img {
  margin-top: var(--home-feature-image-offset, 6.5rem); /* ← image offset from text */
}

.home-feature-media .reels-card,
.home-feature-video,
.home-feature-video-embed {
  margin-top: var(--home-feature-video-offset, 3rem); /* ← video offset from text (smaller = higher) */
}

.home-feature-video {
  background: #000;
}

.home-feature-video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: 14px;
}

.home-feature-video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.home-feature-block.is-media-left .home-feature-media {
  order: 0;
}

.home-feature-block.is-media-left .home-feature-content {
  order: 1;
}

@media (max-width: 960px) {
  .home-slider-text {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-slider-text-media {
    width: 100%;
    max-width: 100%;
  }

  .home-feature-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .home-feature-content {
    transform: none;
  }

  .home-feature-content > h1:first-child {
    margin-bottom: 0.6rem;
    font-size: clamp(1.05rem, 4.2vw, 1.3rem);
    line-height: 1.16;
  }

  .home-feature-media {
    width: 100%;
    max-width: 86%;
    margin: 0 auto;
    order: 2;
  }

  .home-feature-content {
    order: 1;
  }

  .home-feature-media img {
    margin-top: 0;
    margin-left: 0;
    max-height: none;
    height: auto;
    object-fit: contain;
  }

  .home-feature-media .reels-card,
  .home-feature-video,
  .home-feature-video-embed {
    width: 100%;
    max-width: 100%;
  }

  .home-feature-block.is-media-left .home-feature-content {
    order: 1;
  }

  .home-feature-block.is-media-left .home-feature-media {
    order: 2;
  }
}

@media (max-width: 640px) {
  .home-feature-block {
    gap: 0.9rem;
  }

  .home-feature-content .home-feature-text > h1:first-child,
  .home-feature-content > h1:first-child,
  .home-feature-content > h2:first-child,
  .home-feature-content > h3:first-child {
    margin-bottom: 0.55rem;
    font-size: 1.1rem;
    line-height: 1.3;
  }

  .home-feature-media img {
    max-height: none;
    height: auto;
    object-fit: contain;
  }

  .home-feature-media {
    max-width: 82%;
    margin: 0 auto;
  }

  .home-feature-media .reels-card,
  .home-feature-video,
  .home-feature-video-embed {
    width: 100%;
    max-width: 100%;
  }
}

/* ===== FOOTER STYLES - Уменьшенная высота ===== */
#footer {
  padding: 0.5rem 0 !important; /* Уменьшено с 1rem */
  margin-top: 1.5rem !important; /* Уменьшено с 3rem */
}

.footer-bottom {
  font-size: 0.85rem !important; /* Уменьшено с 0.9rem */
  padding: 0 !important;
}

.footer-bottom p {
  margin: 0 !important;
  padding: 0.4rem 0 0.4rem 0 !important; /* Уменьшено с 0.80rem 0 0 0 */
  line-height: 1.4 !important;
}

#footer .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#footer .section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ===== UNIFIED MOBILE TYPOGRAPHY SCALE ===== */
/* Typography only: font-size, line-height, and vertical rhythm spacing */
@media (max-width: 768px) {
  :root {
    --m-h1: 1.75rem;
    --m-h2: 1.5rem;
    --m-h3: 1.25rem;
    --m-body: clamp(1.06rem, 2.8vw, 1.16rem);
    --m-small: 0.875rem;
  }

  #body-wrapper h1,
  #body-wrapper .h1 {
    font-size: var(--m-h1) !important;
    line-height: 1.15 !important;
    margin-bottom: 0.875rem;
  }

  #body-wrapper h2,
  #body-wrapper .h2 {
    font-size: var(--m-h2) !important;
    line-height: 1.2 !important;
    margin-bottom: 0.75rem;
  }

  #body-wrapper h3,
  #body-wrapper .h3 {
    font-size: var(--m-h3) !important;
    line-height: 1.25 !important;
    margin-bottom: 0.625rem;
  }

  #body-wrapper p,
  #body-wrapper li,
  #body-wrapper .page-content,
  #body-wrapper .content-wrapper,
  #body-wrapper .reels-page .reels-description,
  #body-wrapper .contact-item p {
    font-size: var(--m-body) !important;
    line-height: 1.6 !important;
  }

  #body-wrapper p {
    margin-bottom: 0.875rem;
  }

  #body-wrapper small,
  #body-wrapper .form-help,
  #body-wrapper .form-text,
  #body-wrapper .reels-time,
  #footer .footer-bottom {
    font-size: var(--m-small) !important;
    line-height: 1.45 !important;
  }

  /* Keep forms aligned to the same body scale */
  #body-wrapper .form-label,
  #body-wrapper .form-input,
  #body-wrapper .form-textarea,
  #body-wrapper .form-select,
  #body-wrapper .custom-select-display,
  #body-wrapper .custom-select-option {
    font-size: var(--m-body) !important;
    line-height: 1.6 !important;
  }

  #body-wrapper .form-actions .custom-form-btn,
  #body-wrapper button.custom-form-btn,
  #body-wrapper .btn.custom-form-btn,
  #body-wrapper .button.custom-form-btn,
  #body-wrapper a.custom-form-btn,
  #body-wrapper .text-center .custom-form-btn {
    font-size: var(--m-body) !important;
    line-height: 1.25 !important;
  }

  /* Normalize page-specific heading sizes to same hierarchy */
  #body-wrapper .contact-info-section h1,
  #body-wrapper .home-feature-content .home-feature-text > h1:first-child,
  #body-wrapper .home-feature-content > h1:first-child {
    font-size: var(--m-h1) !important;
    line-height: 1.15 !important;
    margin-bottom: 0.875rem !important;
  }

  #body-wrapper .contact-item h3,
  #body-wrapper .reels-page .reels-title {
    font-size: var(--m-h3) !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 480px) {
  :root {
    --m-h1: 1.5rem;
    --m-h2: 1.3125rem;
    --m-h3: 1.125rem;
    --m-body: clamp(1.02rem, 4.7vw, 1.1rem);
    --m-small: 0.8125rem;
  }

  #body-wrapper h1,
  #body-wrapper .h1 {
    margin-bottom: 0.75rem;
  }

  #body-wrapper h2,
  #body-wrapper .h2 {
    margin-bottom: 0.625rem;
  }

  #body-wrapper h3,
  #body-wrapper .h3 {
    margin-bottom: 0.5rem;
  }

  #body-wrapper p {
    margin-bottom: 0.75rem;
  }
}

/* Только мобильная версия: отступ контента сверху — меняй padding-top (поднять меньше, опустить больше) */
@media (max-width: 768px) {
  html body #body-wrapper.section {
    padding-top: 5rem !important;
  }
}