/* ==========================================================================
   1. FONT FACES
   ========================================================================== */
   @font-face {
	font-family: Manrope;
	src: url("../fonts/Manrope-Regular.woff2");
	font-weight: 400;
}
@font-face {
	font-family: Epilepsy;
	src: url("../fonts/Epilepsy-Sans-Medium.woff2");
}
@font-face {
	font-family: Manrope;
	src: url("../fonts/Manrope-Medium.woff2");
	font-weight: 600;
}
@font-face {
	font-family: Manrope;
	src: url("../fonts/Manrope-Light.woff2");
	font-weight: 300;
}

/* ==========================================================================
   2. GLOBAL STYLES & UTILITIES
   ========================================================================== */
/* :root block removed as variables are defined in settings/variables.css */

html,
body {
	height: 100%;
}

body {
	background-color: var(--color-black) !important;
	color: var(--color-light);
	font: var(--text-base) var(--font-manrope);
	margin: 0;
}

/* Prevent body scrolling when popup is open */
body.popup-open {
	overflow: hidden;
}

/* Общие стили для блока */
.fade-in-block {
	opacity: 0;
	/* Можно добавить небольшой сдвиг */
	animation: fadeIn 1s forwards ease;
	/* Применяем анимацию при загрузке */
}

.tab {
	text-indent: var(--text-indent-big);
	text-align: unset;
	display: inline-block;
}

.no-break {
	white-space: nowrap;
	display: inline-block;
}

.important {
	display: inline !important;
	color: var(--color-light);
	/* Replaced --second-color */
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6,
.accordion-button { /* .accordion-button also part of accordion component */
	color: var(--color-light);
	margin: 0;
	font-weight: 300;
}

/* Specific h1 for index page trail effect */
h1 {
	color: var(--color-grey-text-alt);
	/* #ccc */
	user-select: none;
	pointer-events: none;
	z-index: 1;
	position: relative;
}

a {
	color: var(--color-grey-text);
	/* Replaced --fourth-color */
	font: var(--text-sm) var(--font-manrope);
	transition: var(--transition-medium);
}

a:hover {
	color: var(--color-light);
	/* Replaced --second-color */
	transition: var(--transition-medium);
}

.big-text {
	font: var(--text-clamp-big) var(--font-manrope);
}

.section-title { /* Part of Section Block Component */
	font-size: var(--text-title);
	/* 6rem */
	font-weight: 400;
	white-space: nowrap;
}

/* ==========================================================================
   4. LAYOUT & GRID
   ========================================================================== */
.main-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.main-content {
	overflow: hidden;
	padding: 10px var(--padding-container-horizontal);
	box-sizing: border-box;
	flex: 1;
}

.padded-container {
	padding: 0 var(--padding-container-horizontal);
	/* Changed from --space-lg */
}

/* Section block styles (General Structure) */
.section-block { /* Used for generic sections, potentially on multiple pages */
	padding: var(--text-5xl) 0;
	/* 3rem */
	background: var(--color-white); /* This seems to be for a light-themed section block, might need specific context */
}

.section-inner { /* Used with .section-block */
	max-width: 1280px;
	/* Keep specific max-width? */
	margin: 0 auto;
	padding: 0 var(--text-base);
	/* 1rem */
}

.grid-layout { /* Generic grid layout */
	display: grid;
	gap: var(--text-2xl);
	/* 2rem */
}

/* Section Grid Container (Specific for title + 2 columns layout) */
.section-grid-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	color: var(--color-grey-text);
	margin-bottom: var(--margin-section-bottom);
	border-top: 1px solid var(--color-grey-medium);
	gap: var(--gap-xl);
	padding-top: var(--padding-element-vertical);
	font-size: var(--text-xl);
	font-weight: 300;
}

.main-content-column {
	width: 83.333333%;
	grid-column: 2;
	grid-row-start: 1;
	grid-row-end: 3;
}

.additional-content-column {
	width: 50%;
	grid-column: 1;
	color: var(--color-light);
}


/* ==========================================================================
   8. BUTTONS
   ========================================================================== */
.button {
	text-decoration: none;
	cursor: pointer;
	display: inline-block;
	height: 35px; /* Base height, often overridden */
}

.buttons-container { /* Container for multiple buttons */
	display: flex;
	gap: var(--gap-sm);
	/* 10px */
	align-items: center;
	z-index: 1005;
	/* Consider --z-index-logo */
}

/* --- Small Button --- */
.button-small {
	border: 1px solid var(--color-light);
	/* Replaced --second-color */
	background: transparent;
	font: var(--text-xs) var(--font-manrope);
	/* 12px */
	color: var(--color-light);
	/* Replaced --second-color */
	padding: var(--space-xxs);
	/* Keep specific size? */
	transition: var(--transition-medium);
	text-align: center;
	min-width: 28px;
	height: 28px;
	box-sizing: border-box;
	line-height: 14px;
}

.button-small:hover {
	border: 1px solid var(--color-light);
	background: var(--color-light);
	color: var(--color-black);
	transition: var(--transition-medium);
}

/* --- Small Button with Icon Only --- */
.button-small.button-icon-only {
	display: inline-block;
	padding: var(--space-xxs);
	vertical-align: middle;
}

.button-small.button-icon-only .icon-part {
	margin: 0;
	padding: 0;
	/* display: flex;
	align-items: center;
	justify-content: center; */
}

.button-small.button-icon-only .icon-part img {
	width: 20px;
	height: 20px;
	margin: 0;
	display: block;
}

/* --- Big Button --- */
.button-big {
	width: 220px;
	/* Keep specific width? */
	height: 28px;
	/* Keep specific height? */
	border: 1px solid var(--color-light);
	/* Replaced --second-color */
	background: linear-gradient(90deg, transparent 50%, var(--color-light) 50%);
	background-size: 200%;
	background-position: 0 0;
	color: var(--color-light);
	/* Replaced --second-color */
	text-align: left;
	font: var(--text-xs) var(--font-manrope);
	/* 12px */
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-height: 28px;
	/* Keep specific height? */
	overflow: hidden;
	transition: background-position var(--transition-medium);
}

.button-big span {
	margin: 0px var(--space-sm);
	/* 10px */
}

.button-big:hover {
	background-position: 100% 0;
	color: var(--color-black);
}

.button-big:not(.icon-button):not(.toggle-button):hover .icon-part {
	transform: scaleX(-1); /* Arrow flip for non-icon/toggle buttons */
}

/* --- Icon Button (often used with .button-big or .button-small) --- */
.icon-button .icon-part { /* General icon part styling within an icon button */
	background: var(--color-grey-icon);
	/* Replaced --icon-color */
	margin: 0;
	height: 28px;
	width: 28px;
	text-align: center;
	box-sizing: border-box;
}

.icon-button .icon-part img {
	padding: 6px;
	max-width: 100%;
	/* max-width: 100%; Duplicated */
	box-sizing: border-box;
}

.icon-part { /* General icon part, can be image or SVG container */
	transition: transform var(--transition-medium);
}

.icon-svg { /* General class for SVG icons if used directly */
    /* Base styles, specific color filters below */
}

.icon-svg[data-icon-color="white"] {
	filter: brightness(0) invert(1);
	transition: filter var(--transition-medium);
}

.icon-svg[data-icon-color="black"] {
	filter: brightness(0) invert(0);
	transition: filter var(--transition-medium);
}

.icon-svg[data-icon-color="red"] {} /* Placeholder */

.icon-svg[data-icon-color="accent"] {
	filter: invert(18%) sepia(100%) saturate(7493%) hue-rotate(0deg) brightness(100%) contrast(119%);
	transition: filter var(--transition-medium);
}

.button-big:hover .icon-svg, /* Icon color change on parent button hover */
.button-big__hovered .icon-svg, /* Explicit hovered state class */
.icon-button:hover .icon-svg { /* General icon button hover */
	/* На hover делаем иконку черной */
	filter: brightness(0) invert(0);
}

.icon-button:hover .icon-svg { /* Filter for icon buttons specifically */
	filter: invert(23%) sepia(64%) saturate(6497%) contrast(132%) !important;
	/* Черная иконка */
	transition: filter var(--transition-medium);
}
.icon-button:hover { /* General icon button hover style */
	background: transparent; /* Overrides .button-big gradient */
	color: var(--color-light) !important;
	/* Replaced --second-color */
	transition: var(--transition-medium);
}


/* --- Button No Background --- */
.button-no-bg {
	background: none;
	border: none;
	box-shadow: none;
	color: inherit;
}

.button-no-bg.button-small,
.button-no-bg.button-small:hover,
.button-no-bg.button-small:focus-visible,
.button-no-bg.button-small:active {
	background: none;
	border: none;
	box-shadow: none;
	color: inherit;
	display: inline-block;
	padding: var(--space-xxs);
	vertical-align: middle;
}

.button-no-bg .icon-part {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.button-no-bg .icon-part img {
	/* width: 28px !important;
	height: 28px !important; */
	margin: 0;
	display: block;
	/* transition: filter 0.15s; */
}

/* Для кнопки без фона при наведении меняем цвет иконки через фильтр */
.button-no-bg:hover .icon-part img,
.button-no-bg:focus-visible .icon-part img,
.button-no-bg:active .icon-part img {
	filter: brightness(0) invert(17%) sepia(42%) saturate(7378%) contrast(130%);
	/* transition: filter var(--transition-medium); */
}

/* --- Inverse Button --- */
.inverse-button {
	background: var(--color-light);
	/* Replaced --second-color */
	border: none;
}

.inverse-button:hover {
	background: var(--color-accent);
	/* #FF0000 */
	transition: var(--transition-medium);
	border: none;
}

/* --- Primary Button (Example from .section-block context) --- */
.button-primary {
	padding: var(--space-xs) var(--space-md);
	/* 0.5rem 1.5rem */
	background: #2563eb;
	/* Keep specific color or add variable? */
	color: var(--color-white);
	border-radius: 0.375rem;
	/* Keep specific radius? */
	transition: background-color var(--transition-short);
}

.button-primary:hover {
	background: #1d4ed8;
	/* Keep specific color or add variable? */
}

/* --- Toggle Button (Plus/Minus icon behavior) --- */
.toggle-button .icon-part { /* Uses ::after for icon */
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.436 0L15.9712 0V15.8505H19.436V0Z' fill='white'/%3E%3Cpath d='M19.436 19.3728H15.9712V35.2233H19.436V19.3728Z' fill='white'/%3E%3Cpath d='M15.9706 15.8511H0.378906L0.378906 19.3734H15.9706V15.8511Z' fill='white'/%3E%3Cpath d='M35.0277 15.8511H19.436V19.3734H35.0277V15.8511Z' fill='white'/%3E%3C/svg%3E");
	background-size: var(--text-3xl) var(--text-3xl);
	/* Размер иконки */
	background-repeat: no-repeat;
	width: var(--text-3xl); /* Size from background-size */
	height: var(--text-3xl); /* Size from background-size */
	transition: transform var(--transition-medium);
	display: flex; /* To center if needed, or if content was actual text */
	align-items: center;
	justify-content: center;
	/* Specific override for mobile menu toggle */
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 0H9V9H11V0Z' fill='black'/%3E%3Cpath d='M11 11H9V20H11V11Z' fill='black'/%3E%3Cpath d='M9 9H0V11H9V9Z' fill='black'/%3E%3Cpath d='M20 9H11V11H20V9Z' fill='black'/%3E%3C/svg%3E");
    width: var(--text-xl);
	height: var(--text-xl);
	background-size: var(--text-xl) var(--text-xl);
}

.toggle-button.active .icon-part {
	transform: rotate(225deg); /* Rotates plus to look like a cross/close */
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 0H9V9H11V0Z' fill='red'/%3E%3Cpath d='M11 11H9V20H11V11Z' fill='red'/%3E%3Cpath d='M9 9H0V11H9V9Z' fill='red'/%3E%3Cpath d='M20 9H11V11H20V9Z' fill='red'/%3E%3C/svg%3E"); /* Changes to red plus for active state */
}


/* ==========================================================================
   9. COMPONENTS
   ========================================================================== */

/*    9.1 CAROUSELS (OWL, SWIPER)
   ========================================================================== */
.owl-carousel { /* General Owl Carousel styling */
	height: 100%;
	box-sizing: border-box;
}

/* --- Case Owl Carousel (Cases Listing Page) --- */
.case-owl-carousel {
	height: calc(100% - 140px); /* Specific height for cases carousel */
    /* Fallback/alternative definition, original has two: */
    /* height: 100%; */
}

/* --- Swiper Specific --- */
.swiper-wrapper.mousewheel { /* Smooth transition for mousewheel */
	transition-duration: 1.2s !important;
}

/* --- Carousel Item Blocks (Shared by Team and Case Carousels) --- */
.case-block, /* Used in cases listing, case detail, and potentially agency carousel */
.agency-owl-carousel-item-block {
	height: 100%;
    overflow: hidden; /* Added for case-block on cases page */
	max-width: 100%; /* Added for case-block on cases page */
	position: relative; /* Added for case-block on cases page */
}

.case-block img, /* Image styling within a case block */
.agency-owl-carousel-item-block img {
	/*height: calc(100vh - 240px);*/ /* Commented out in original */
	height: auto; /* Default, overridden below for specific carousels */
    display: block; /* For case-owl-carousel img */
    height: 100%; /* For case-owl-carousel img */
}

.case-block a, /* Link styling within a case block */
.agency-owl-carousel-item-block a { /* Corrected original typo 'img' to 'a' */
	text-decoration: none;
}

/* Info overlay/section for carousel items */
.case-block .info,
.agency-owl-carousel-item-block .info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: var(--margin-element-top);
	/* Changed from --space-lg */
	/* 20px */
	color: var(--color-light);
	/* Replaced --second-color */
}

.case-block .info h2,
.agency-owl-carousel-item-block .info h2 {
	font: var(--text-2xl) var(--font-manrope);
	/* 24px */
	margin: 0;
	padding: 0;
}

.case-block .info p,
.agency-owl-carousel-item-block .info p {
	font: var(--text-base) var(--font-epilepsy);
	/* 16px */
	margin: 0;
	padding: 0;
}

/* Team Owl Carousel Specifics */
.team-owl-carousel { /* Wrapper for team carousel */
	margin-bottom: var(--margin-section-bottom);
	/* Changed from --space-block */
}

.team-owl-carousel .agency-owl-carousel-item-block .info p:first-child {
	font: var(--text-xl) var(--font-manrope);
	/* 20px */
}

.team-owl-carousel .agency-owl-carousel-item-block .info p:last-child {
	font: var(--text-sm) var(--font-epilepsy);
}

/* Agency Block Carousel (Likely refers to team or similar carousel) */
.agency-block-carousel img { /* Images specifically within an agency block carousel */
	height: var(--height-carousel-image);
	/* Changed from --space-xxxxl */
	/* 100px */
}


/*    9.2 ACCORDIONS (CUSTOM, HORIZONTAL STAGES)
   ========================================================================== */

/* --- Custom Accordion (Bootstrap-like) --- */
.custom-accordion {
	margin-bottom: var(--margin-section-bottom);
}

.custom-accordion .accordion-item {
	background-color: var(--color-black);
	border-bottom: var(--border-dark);
	border-bottom-style: dotted;
	border-bottom-width: 2px;
}

.custom-accordion .accordion-item:first-of-type {
	border-top: var(--border-dark);
	border-top-style: dotted;
	border-top-width: 2px;
}

/* Стили кнопки (Accordion Button - already in Typography H1-H6, but more specific here) */
.custom-accordion .accordion-button {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	text-align: left;
	background-color: var(--color-black);
	color: var(--color-white); /* Overrides h1-h6 color */
	font-size: var(--text-title); /* Overrides h1-h6 font-weight if var(--text-title) doesn't include it */
	font-weight: 300; /* Explicitly set */
	padding: var(--padding-accordion-header);
	font-family: var(--font-primary);
	border: none;
	box-shadow: none;
	outline: none;
	cursor: pointer;
}

/* Accordion Button Icon (Plus/Minus) */
.accordion-button::after { /* Shared with stage-header::after, gallery-item-plus__plus::after */
    content: '';
	background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.436 0L15.9712 0V15.8505H19.436V0Z' fill='white'/%3E%3Cpath d='M19.436 19.3728H15.9712V35.2233H19.436V19.3728Z' fill='white'/%3E%3Cpath d='M15.9706 15.8511H0.378906L0.378906 19.3734H15.9706V15.8511Z' fill='white'/%3E%3Cpath d='M35.0277 15.8511H19.436V19.3734H35.0277V15.8511Z' fill='white'/%3E%3C/svg%3E");
	background-size: var(--text-3xl) var(--text-3xl);
	background-repeat: no-repeat;
	width: var(--text-3xl);
	height: var(--text-3xl);
	transition: transform var(--transition-medium);
	display: flex;
	align-items: center;
	justify-content: center;
}

.custom-accordion .accordion-button[aria-expanded="true"]::after { /* Minus icon when expanded */
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z'/%3e%3c/svg%3e");
    transform: rotate(180deg); /* Also applied by shared rule below */
}

/* Анимация сворачивания/разворачивания */
.custom-accordion .accordion-collapse {
	background-color: #000; /* Specific to custom accordion */
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height var(--transition-long), opacity var(--transition-long);
}

/* Open state for accordion (restores functionality) */
.custom-accordion .accordion-collapse.show {
	max-height: var(--accordion-content-max-height, 500px);
	opacity: 1;
}

.custom-accordion .accordion-body {
	padding: var(--padding-accordion-body);
	background-color: var(--color-black);
	/* border-top: 1px solid var(--color-white-alpha-10); */
}

/* Branding Section Specific Styles (Content within .custom-accordion .accordion-body) */
.accordion__item-content {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gap-section-items);
	align-items: start;
}

.accordion__item-text p {
	font-size: var(--text-2xl);
	max-width: 50%;
	font-weight: 300;
}

.accordion__item-content p {
	margin: 0;
}

.accordion__item-second {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gap-section-items);
}

.accordion__item-second .small-text {
	color: var(--color-grey-text);
}

.accordion__item-tags {
	grid-column: 2 / 3;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-sm);
	align-self: start;
}

.accordion__item-tags span {
	border: var(--border-dark);
	color: var(--color-grey-text-alt);
	padding: var(--padding-tag);
	font-size: var(--text-xs);
}

/* --- Horizontal Accordion / Stages (Agency Page) --- */
/* .horizontal-accordion-stages styles in Agency Page section */
.stage-header::after { /* Shared with accordion-button::after */
    content: '';
	background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.436 0L15.9712 0V15.8505H19.436V0Z' fill='white'/%3E%3Cpath d='M19.436 19.3728H15.9712V35.2233H19.436V19.3728Z' fill='white'/%3E%3Cpath d='M15.9706 15.8511H0.378906L0.378906 19.3734H15.9706V15.8511Z' fill='white'/%3E%3Cpath d='M35.0277 15.8511H19.436V19.3734H35.0277V15.8511Z' fill='white'/%3E%3C/svg%3E");
	background-size: var(--text-3xl) var(--text-3xl);
	background-repeat: no-repeat;
	width: var(--text-3xl);
	height: var(--text-3xl);
	transition: transform var(--transition-medium);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Shared icon rotation/change for expanded/active states */
.stage-item:hover .stage-header::after,
.custom-accordion .accordion-button[aria-expanded="true"]::after { 
	transform: rotate(180deg);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z'/%3e%3c/svg%3e");
}


/*    9.3 TABLES (DATA TABLE, CLIENTS TABLE)
   ========================================================================== */
.table-container { /* General wrapper for tables */
	width: 100%;
	box-sizing: border-box;
}

.clients-table { /* Specific margin for clients table on Agency page */
	margin-bottom: var(--margin-section-bottom);
	/* Changed from --space-block */
}

.data-table {
	border-collapse: collapse;
	width: 100%;
	box-sizing: border-box;
	/* Таблица занимает всю ширину контейнера (до правого padding) */
}

.data-table tr {
	transition: var(--transition-table-row);
	border-bottom: var(--border-dark);
	display: table-row;
	/* Добавляем position: static (по умолчанию), чтобы .row-image-preview позиционировался относительно .table-container */
	position: static; /* Redundant, default */
	position: relative; /* For .row-image-preview positioning */
	padding: 0 var(--padding-container-horizontal); /* Padding on TR might not work as expected, usually on TD */
}

.data-table td {
	padding: var(--padding-table-cell);
	text-align: left;
	cursor: default;
	font-size: var(--text-sm);
	vertical-align: middle;
	display: table-cell;
	/* Важно для позиционирования превью из последней ячейки */
	position: static; /* Ensures preview is relative to TR or TABLE */
}

/* У последней ячейки убираем правый паддинг, если превью в ней */
.data-table tr td:last-child {
	text-align: right;
	padding-right: var(--padding-container-horizontal);
}

.data-table tr td:first-child {
	padding-left: var(--padding-container-horizontal);
	text-transform: uppercase;
}

.data-table tr:last-child {
	border-bottom: none;
}

/* Стиль строки при наведении */
.data-table tr:hover {
	background-color: var(--color-grey-light);
	color: var(--color-black);
}

/* Превью внутри строки */
.row-image-preview {
	display: block;
	/* Используем block вместо none для работы transition */
	position: absolute;
	/* Позиционируем относительно .table-container or tr */
	/* Позиция - справа от таблицы */
	right: var(--space-xxxl);
	/* Отступ от правого края .table-container */
	top: -50%;
	/* Отступ сверху от .table-container (подбирается) */
	width: 180px;
	/* Ширина превью */
	height: 180px;
	/* Высота превью */
	background-color: var(--color-grey-darkest);
	/* Фон по умолчанию */
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	z-index: var(--z-index-table-preview);
	/* Чтобы быть поверх других строк */
	opacity: 0;
	visibility: hidden;
	transition: var(--transition-opacity);
	pointer-events: none;
	/* Чтобы не мешать наведению на другие строки */
}

/* Показываем превью при наведении на СТРОКУ */
.data-table tr:hover .row-image-preview {
	opacity: 1;
	visibility: visible;
	transition: var(--transition-opacity-hover);
	/* Убираем задержку visibility */
}


/*    9.4 POPUPS & MODALS (CASE BLOCK INFO POPUP)
   ========================================================================== */
#case-block-background {
	/* Initially hidden */
	transition: opacity var(--transition-medium);
	/* Fade transition */
	pointer-events: none;
	opacity: 0;
	position: absolute; /* Changed from fixed in some versions to absolute based on usage */
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	backdrop-filter: blur(4px);
	background: rgb(0, 0, 0, 0.1);
	z-index: 2; /* Lower than popup */
}

#case-block-background.visible {
	opacity: 1;
	pointer-events: all;
	/* Show when visible */
}

#case-block-info-popup {
	position: absolute; /* Or fixed depending on desired scroll behavior */
	right: -800px; /* Initially hidden off-screen */
	top: 0;
	bottom: 0;
	width: 700px;
	background: var(--color-black);
	z-index: 3; /* Higher than background */
	overflow: auto;
	color: var(--color-white); /* Original had --color-light for text in body */
	padding: 80px 24px;
	transition: right var(--transition-long);
	/* Slide and fade transition */
	box-sizing: border-box;
    /* Scrollbar hiding */
    -ms-overflow-style: none; /* IE 10+ */
	scrollbar-width: none; /* Firefox */
}
#case-block-info-popup::-webkit-scrollbar {
	width: 0; /* Chrome and Safari */
}


#case-block-info-popup.visible {
	right: 0;
	/* Slide in */
	opacity: 1; /* Not strictly needed if only right is transitioned for visibility */
	display: block; /* Ensure it's block for layout, though absolute/fixed already are */
}

/* Content within Case Block Info Popup */
#case-block-info-popup .div-table {
	width: 100%;
}

#case-block-info-popup .div-table-row {
	border-top: 1px solid var(--color-light);
	/* Replaced --second-color */
	display: flex;
	justify-content: space-between;
	font: var(--text-sm) var(--font-manrope);
	color: var(--color-grey-medium);
	/* Replaced --fourth-color */
}
/* Special first row style from original */
#case-block-info-popup .div-table-row[style*='border: 0'] { /* Targeting inline style, better with a class */
    /* border: 0; */ /* This is set inline in PHP */
}


#case-block-info-popup .div-table-row p {
	margin: 0;
	padding: var(--space-sm) 0;
	/* 10px */
}

#case-block-info-popup .div-table-row p:nth-child(2) {
	width: 350px;
	/* Keep specific width? */
	color: var(--color-light);
	/* Replaced --second-color */
	text-align: right;
}
/* Special paragraph style from original */
#case-block-info-popup .div-table-row p[style*='text-align:left'] { /* Targeting inline style */
    /* text-align:left; */ /* This is set inline in PHP */
}


#case-block-info-popup .div-table-row:last-child {
	border-bottom: 1px solid var(--color-light);
	/* Replaced --second-color */
}


/*    9.5 VIDEO
   ========================================================================== */
#main-video { /* Fullscreen background video */
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	/*border: 1px solid white;*/
}

.responsive-video { /* Container for responsive video embeds */
	position: relative;
	overflow: hidden;
	/*padding-top: 56.25%; */
	/* Соотношение сторон 16:9 */
	height: 100%;
	width: 100%;
}

/*    9.6 IMAGE GALLERY (ANIMATED GALLERY, ACCORDION GALLERY)
   ========================================================================== */

/* --- Accordion Item Gallery --- */
.accordion__item-gallery {
	margin-top: var(--margin-element-top);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	/* Responsive gallery */
	gap: var(--gap-section-items);
}

.gallery-item {
	background-color: var(--color-grey-darkest);
	/* Dark grey background for items */
	aspect-ratio: 1 / 1;
	width: 100%;
	/* Make items square */
	display: flex;
	justify-content: center;
	align-items: center;
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery-item-plus {
	background-color: var(--color-grey-light-alt);
	cursor: pointer;
	/* Light grey background */
	position: relative;
	/* Needed for absolute positioning of the child */
}

.gallery-item-plus__text {
	position: absolute;
	bottom: 10px;
	/* Adjust as needed */
	right: 10px;
	/* Adjust as needed */
	color: var(--color-accent);
	/* Or your desired text color */
	font: var(--text-2xl) var(--font-epilepsy);
	transition: opacity 0.3s ease;
	/* Smooth transition for appearing/disappearing */
	pointer-events: none;
}

.gallery-item-plus__text .dud { /* Example text style */
	color: var(--color-black);
}

/* Gallery Item Plus Icon (+) */
.gallery-item-plus__plus { /* Container for the plus icon */
    /* Position this container within .gallery-item-plus if needed, e.g. center it */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
	animation: pulse 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0s infinite normal both;
}
.gallery-item-plus:hover .gallery-item-plus__plus {
	animation-iteration-count: 0;
}

.gallery-item-plus__plus::after { /* The plus icon itself */
    content: '';
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 0H9V9H11V0Z' fill='red'/%3E%3Cpath d='M11 11H9V20H11V11Z' fill='red'/%3E%3Cpath d='M9 9H0V11H9V9Z' fill='red'/%3E%3Cpath d='M20 9H11V11H20V9Z' fill='red'/%3E%3C/svg%3E");
	width: 55px;
	height: 55px;
	background-size: 55px 55px;
    background-repeat: no-repeat;
	/* animation: pulse 2s cubic-bezier(0.34, 1.56, 0.64, 1) 0s infinite normal both; */ /* Moved to parent */
    transition: transform var(--transition-medium); /* For rotation */
    display: block; /* Or inline-block */
}

.gallery-item-plus:hover .gallery-item-plus__plus::after {
	transform: rotate(180deg); /* Rotates plus to minus-like state */
}


/* --- Animated Gallery (Agency Page) --- */
/* Styles in Agency Page section */


/*    9.7 LOGO & CURSOR EFFECTS (TRAIL IMAGE, INDEX PAGE LOGO)
   ========================================================================== */
.logo-container { /* For index page image trail */
	--spawn-distance-thresgold: clamp(100px, 10vw, 200px);
}

.trail-image { /* For index page image trail */
	position: fixed;
	left: 0;
	top: 0;
	pointer-events: none;
	/* width и height будут заданы в JS */
	opacity: 1;
	/* Начальная прозрачность */
	/* Центрирование и начальный масштаб задаем через transform */
	transform: translate(-50%, -50%) scale(1);
	/* Добавим свечение */
	/* box-shadow: 0 0 25px rgba(255, 85, 0, 0.6); */
	will-change: transform, left, top;
	/* Оптимизация для браузера */
	object-fit: contain;
	z-index: 905;
	/* Consider --z-index-gallery or new var */
	mix-blend-mode: difference;
	width: clamp(100px, 10vw, 200px);
	height: 200px;
}

/* ==========================================================================
   5. HEADER
   ========================================================================== */
   header {
	top: 0;
	left: 0;
	right: 0;
	height: var(--height-header-footer);
	/* Changed from --space-xxxl */
	/* 70px */
	/*padding: 30px 61px 0 61px;*/
	position: sticky;
	background: var(--color-black);
	/* Replaced --first-color */
	padding: 0 var(--padding-container-horizontal);
	/* Changed from --space-lg */
	/* Approx 22px */
	z-index: 1000;
}

#header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 100%;
	border-bottom: 1px solid var(--color-light);
}

#logo {
	z-index: 1005;
	/* Consider creating a --z-index-logo variable */
}

#logo img {
	width: 70%;
	min-width: 151px;
}

#coordinates {
	display: block;
	font: var(--text-sm) var(--font-epilepsy);
	color: var(--color-light);
	/* Replaced --second-color */
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1000;
	/* Consider --z-index-header */
}

#coords-span {
	display: block;
	margin: auto;
	width: fit-content;
}

header hr, /* First definition */
footer hr {
	opacity: 1;
	border: none;
	color: var(--color-light);
	/* Replaced --second-color */
	height: 1.4px !important;
	/* Keep specific height? */
	margin: 0;
}

header hr, /* Second definition - overrides height from the first one */
footer hr {
	height: 1px !important;
	margin: 0;
}


/* ==========================================================================
   6. FOOTER
   ========================================================================== */
footer {
	position: sticky;
	bottom: 0;
	left: 0;
	right: 0;
	height: var(--height-header-footer);
	background: var(--color-black);
	z-index: 1005;
	padding: 0 var(--padding-container-horizontal);
	/* Duplicates height from another footer rule, kept for original structure */
	/* height: var(--height-header-footer); /* Changed from --space-lg */ /* Approx 22px 20px */
}

#footer-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	border-top: 1px solid var(--color-light);
}

#footer-container a { /* Specific to desktop footer links */
	font-size: var(--text-xs);
	/* Approx 10px */
}

*/ #copyright-span { /* Commented out in original */
	color: var(--color-light);
	/* Replaced --second-color */
	font: var(--text-sm) var(--font-manrope);
}
/* Actual #copyright-span for mobile menu footer */
#mobile-menu .buttons-container-wrapper #copyright-span { /* More specific for mobile */
    /* style is inherited from #copyright-span if uncommented, or defined below */
}
/* Actual #copyright-span for desktop footer */
#footer-container #copyright-span {
    color: var(--color-light);
    font: var(--text-sm) var(--font-manrope);
}


/* Footer Style for a light-themed section block example - might be page specific */
.footer-style {
	background: var(--color-light);
	/* Approx #f3f4f6 */
	padding: var(--text-2xl) 0;
	/* 2rem */
	margin-top: var(--text-5xl);
	/* 3rem */
}

/* --- Mobile Menu (part of Footer structure) --- */
#footer-container-mobile-menu {
	display: none; /* Shown via media queries */
	padding: 0 var(--padding-container-horizontal);
	position: relative;
}

#footer-container-mobile-menu.opened .mobile-menu-container {
	translate: 0 0;
}

#footer-container-mobile-menu.opened .button-big_menu_script {
	translate: 0 0;
}

.button-big_menu_script { /* Specific to mobile menu toggle */
	position: relative;
	z-index: 1005;
	background: var(--color-white);
	color: var(--color-black);
	max-width: 100% !important;
	width: 100%;
}

#mobile-menu {
	/* padding: var(--padding-element-vertical) 0 0 0; */
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	overflow: hidden;
	pointer-events: none;
}

.mobile-menu-container {
	background: var(--color-black);
	transition: translate var(--transition-long);
	padding: var(--padding-container-horizontal);
	padding-top: 0;
	z-index: 1000;
	translate: 0 calc(100% - 1px);
	pointer-events: all;
}

.mobile-menu-container hr {
	border-top: 1px solid var(--color-light);
	margin-bottom: var(--padding-container-horizontal);
}

#mobile-menu .button-big {
	max-width: 100%;
	width: 100%;
	margin-bottom: var(--space-sm);
	box-sizing: border-box;
}

#mobile-menu .buttons-container-wrapper {
	display: flex;
	margin-top: var(--margin-footer-separator);
	/* Changed from --space-xxl */
	/* 50px */
	gap: var(--gap-sm);
	/* 10px */
	align-items: center;
	justify-content: space-between;
}

/* ==========================================================================
   7. NAVIGATION (General / Standalone)
   ========================================================================== */
.flex-nav { /* Example of a general navigation bar */
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--text-base) 0;
	/* 1rem */
}


/* ==========================================================================
   10. PAGE-SPECIFIC STYLES
   ========================================================================== */

/*    10.1 INDEX PAGE
   ========================================================================== */
   .inverted-text {
	position: absolute;
	/* Накладываем текст поверх */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* Центрируем текст */

	font-size: 8rem;
	/* Размер шрифта */
	font-weight: bold;
	/* Жирность */
	text-align: center;
	width: 100%;

	mix-blend-mode: difference;
	color: white;

	z-index: 1005;
}

.logo-image {
	z-index: 1005;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: url(/public/images/filters.svg#filter);
	background: transparent
}
/*    10.2 CONTACTS PAGE
   ========================================================================== */
#main-contacts { /* Main wrapper for contacts page content */
	display: flex;
	flex-direction: column;
	justify-content: end;
}

#contacts-small-span {
	display: block;
	font: var(--text-4xl) var(--font-manrope);
	width: 706px;
	/* Keep specific width? */
	color: var(--color-light);
	/* Replaced --second-color */
}

#contacts-top-part {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

#contacts-top-part .button-big { /* Specific button width on contacts page */
	width: 204px;
}

#contacts-big-span {
	display: block;
	width: 100%;
	text-align: center;
	font: 300px Manrope;
	/* Keep specific large size? */
	color: var(--color-grey-text);
	/* Replaced --fourth-color */
}

*/ #contacts-logo { /* Commented out in original */
	width: 100%;
}
/* Actual #contacts-logo from HTML */
#contacts-logo {
    width: 100%; /* As implied by comments and HTML usage */
}


#contacts-grid-container {
	margin: var(--margin-section-vertical) 0;
	/* Changed from --space-xl */
	/* Approx 38px */
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	grid-column-gap: var(--gap-sm);
	/* 10px */
}

#contacts-grid-container .grid-item {
	border-top: 1px solid var(--color-grey-medium);
	/* Replaced --fourth-color */
	border-bottom: 1px solid var(--color-grey-medium);
	/* Replaced --fourth-color */
	line-height: 2.5;
	/* Keep specific line-height? */
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#contacts-grid-container .grid-item span:first-child { /* First rule for this selector */
	color: var(--color-grey-text);
	/* Replaced --fourth-color */
	font: var(--text-sm) var(--font-manrope);
}

#contacts-grid-container .grid-item span:first-child { /* Second rule for this selector - overrides color */
	color: var(--color-grey-medium);
	/* Replaced --fourth-color */
	font: var(--text-sm) var(--font-manrope); /* Redundant font, but kept */
	line-height: 2.5;
	/* Keep specific line-height? */
}

#contacts-grid-container .grid-item span:nth-child(2) {
	float: right; /* Consider flex alignment instead of float */
	color: var(--color-light);
	/* Replaced --second-color */
	font: var(--text-base) var(--font-manrope);
	/* 16px */
	line-height: 2.5;
	/* Keep specific line-height? */
}


/*    10.3 AGENCY PAGE
   ========================================================================== */

/* --- Hero Section (Agency Page) --- */
/* .hero, .hero__logo-container, etc. styles needed here from agency.css if not already global */
/* These styles are typically in agency.css, not styles.css in the provided setup */

/* --- Animated Gallery (Agency Page) --- */
/* #animated-gallery-wrapper, .animated-gallery-grid, etc. styles needed here from agency.css */
/* These styles are typically in agency.css, not styles.css in the provided setup */


/* --- Agency Block Table-like structure (Agency Page) --- */
#agency-block .div-table-row { /* General row in agency block */
	display: flex;
	justify-content: space-between;
	margin-bottom: 150px;
	/* Keep specific large margin? Maybe replace with --margin-section-bottom? */
}

#agency-block .div-table-row p {
	font: var(--text-base) var(--font-manrope);
	/* 16px */
	color: var(--color-light);
	/* Replaced --second-color */
}

#agency-block .div-table-row-2 div { /* Columns in the second type of row */
	width: 50%;
}

#agency-block .div-table-row-2 div:first-child {
	width: 28%;
}

/* #agency-block .div-table-row-2 div { /* Commented out in original */
	/*width: 33%;*/
/* } */

#agency-block .div-table-row-2 h3 {
	font: var(--text-base) var(--font-manrope);
	/* 16px */
	color: var(--color-grey-medium);
	/* Replaced --fourth-color */
}

#agency-block .div-table-row-2 ul {
	list-style: none;
	padding: 0;
	color: var(--color-light);
	/* Replaced --second-color */
	font: var(--text-base) var(--font-manrope);
	/* 16px */
}

#agency-block .div-table-row-2 .column2-wrapper div { /* Nested div for column structure */
	width: auto;
}

#agency-block .div-table-row-2 li h3 { /* h3 within a list item */
	font: var(--text-base) var(--font-manrope);
	/* 16px */
	color: var(--color-grey-medium);
	/* Replaced --fourth-color */
}

/* --- Horizontal Accordion / Stages (Agency Page) --- */
/* .horizontal-accordion-stages, .stage-item, etc. styles needed here from agency.css */
/* These styles are typically in agency.css, not styles.css in the provided setup */


/*    10.4 CASES PAGE (MAIN LISTING - scroll container)
   ========================================================================== */
/* .scroll-container, .scroll-slide, .case-block (listing variant) styles from cases.php <style> tag */
/* These would typically be in a cases.css or similar, or moved here if intended to be global */
/* For .case-block on this page: */
.scroll-wrapper{
	height: calc(100vh - var(--height-header-footer) * 2 - 22px);
	overflow-x: scroll;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	display: flex;
}

.scroll-container {
	display: flex;
	gap: 10px;
	white-space: nowrap;
}


.scroll-container::-webkit-scrollbar {
	display: none;
}

.scroll-slide {
	display: inline-block;
	height: 100%;
}

.case-block {
	position: relative;
	width: 100%;
	height: 100%;
	width: max-content;
}

.case-block img { /* Hover effect on cases listing */
    transition: scale var(--transition-medium);
}
.case-block:hover img { /* Hover effect on cases listing */
    scale: 1.03 1.03;
}
.case-block .info { /* Info overlay on cases listing */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    transition: opacity 0.3s;
}

@media (max-width: 767px) {
	.scroll-container {
		flex-direction: column;
		overflow-x: hidden;
		overflow-y: auto;
		white-space: normal;
	}

	.scroll-slide {
		display: block;
		width: 100%;
		height: auto;
	}

	.case-block {
		height: auto;
		width: max-content;
	}

	.case-block img {
		width: 100%;
		height: auto;
	}
}


/*    10.5 CASE DETAIL PAGE
   ========================================================================== */
/* Scroll container for case detail page images */
/* .scroll-container, .scroll-slide specific to case.php from <style> tag */
/* These would typically be in a case-detail.css or similar, or moved here */

#case-name { /* Title on case detail page footer */
	font: var(--text-2xl) var(--font-manrope);
	/* 24px */
	color: var(--color-light);
	/* Replaced --second-color */
}

#case-category-name { /* Category on case detail page footer */
	font: var(--text-base) var(--font-epilepsy);
	/* 16px */
	color: var(--color-light);
	/* Replaced --second-color */
	line-height: 2.2;
	/* Keep specific line-height? */
}

#case-footer { /* Footer specific to case detail page */
	padding: 0 var(--padding-container-horizontal);
}

#case-footer .buttons-container { /* Button container in case footer */
	gap: var(--gap-xl);
	/* Approx 40px */
}

#case-block { /* Main content block for case details (if different from listing) */
	padding: var(--padding-section-vertical) 0;
	/* Changed from --space-xl */
	/* 30px */
	display: flex; /* If case detail has specific layout */
	gap: var(--gap-xxxxl);
	/* 100px */
    /* For case detail page, .case-block is used for each image slide */
    /* width: 600px; */ /* Commented out */
    width: max-content; /* From case.php style */
}


#case-img-block { /* Image container within case detail, if specific */
	width: 1700px; /* Example, likely responsive */
}

#case-img-block img {
	width: 100%;
}


.scroll-container {
	display: flex;
	gap: 10px;
	white-space: nowrap;
	/* Изображения в одну линию */
	max-height: 100%;
}

.scroll-container::-webkit-scrollbar {
	display: none;
}



.case-block {
	width: max-content;
}

.scroll-slide {
	display: inline-block;
	/* Элементы в линию */
	height: 100%;
}

.scroll-slide img {
	height: 100%;
	/* Изображения под высоту контейнера */
	width: auto;
	/* Естественная ширина */
	object-fit: contain;
	/* Сохранение пропорций без обрезки */

}

canvas {
	touch-action: none;
	position: absolute;
	top: 0;
	cursor: inherit;
	pointer-events: none;
	padding: 10px 0;
}

.main-content {
	padding: 10px var(--padding-container-horizontal);
	position: relative;
	/* Добавлено для корректного позиционирования лоадера */
}

#pixi-loader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-black);
	/* Dark theme background */
	z-index: 10000;
	display: none;
	/* Изначально СКРЫТ, показывается JS при необходимости */
	justify-content: center;
	align-items: center;
	text-align: center;
}

#pixi-loader p {
	font-family: var(--font-epilepsy);
	font-size: 1.8em;
	color: var(--color-white);
	/* Text color on light bubble */
	/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional shadow */
	display: inline-block;
}

#pixi-loader p::after {
	content: '.';
	/* Initial state for animation */
	display: inline-block;
	animation: loading-dots 1.4s infinite;
	text-align: left;
	width: 1.2em;
	/* Reserve space for three dots */
	vertical-align: bottom;
}

@keyframes loading-dots {
	0% {
		content: '.';
	}

	33% {
		content: '..';
	}

	66% {
		content: '...';
	}

	100% {
		content: '.';
		/* Loop back or stay at ... if preferred */
	}
}

/* Мобильные устройства */
@media (max-width: 767px) {
	.scroll-container {
		flex-direction: column;
		/* Вертикальное расположение */
		overflow-x: hidden;
		/* Без горизонтальной прокрутки */
		overflow-y: auto;
		/* Вертикальная прокрутка */
		white-space: normal;
		/* Обычный перенос */
	}

	.scroll-slide {
		display: block;
		/* Блочное отображение */
		width: 100%;
		/* Полная ширина */
		height: auto;
		padding: 0;
	}

	.scroll-slide img {
		width: 100%;
		/* Полная ширина на мобильных */
		height: auto;
		/* Автоматическая высота */
		object-fit: contain;
		/* Сохранение пропорций */
	}
}

/* ==========================================================================
   11. ANIMATIONS
   ========================================================================== */
/* Определяем анимацию fadeIn */
@keyframes fadeIn {
	from {
		opacity: 0;
		/* Исходное состояние */
		transform: translateY(60px);
	}
	to {
		opacity: 1;
		/* Конечное состояние */
		transform: translateY(0);
	}
}

/* ==========================================================================
   12. RESPONSIVE MEDIA QUERIES
   ========================================================================== */