/* Страница «О нас» (page-o-nas.php). Макет: Figma «О нас · Desktop 1920 · v4» */

:root {
	--about-green: #429d48;
	--about-green-light: #88d98d;
	--about-green-pale: #99e99f;
	--about-pink: #d55c71;
	--about-dark: #272727;
	--about-heading: #333;
	--about-text: #4c4c4c;
	--about-muted: #898989;
	--about-border: #e6e6e6;
	--about-panel: #f3f6f3;
	--about-radius: 10px;
	--about-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
	--about-space: 50px; /* единый отступ между блоками страницы и до подвала */
}
.about-page {
	color: var(--about-text);
	font-family: Montserrat, Helvetica, sans-serif;
	overflow: hidden;
}
.about-page *, .about-popup * {box-sizing: border-box;}
:where(.about-page img) {max-width: 100%;}
.about-page :where(p, h1, h2, h3, ul, li, blockquote) {margin: 0; padding: 0;}
.about-page :where(ul) {list-style: none;}
.about-accent {color: var(--about-green);}

/* Хлебные крошки */
.about-breadcrumbs {margin: 21px 0 24px; font-size: 14px; line-height: 17px; color: var(--about-muted);}
.about-breadcrumbs a, .about-breadcrumbs span {color: var(--about-muted); font-size: 14px;}
.about-breadcrumbs .current-item {color: #946a2e;}
.about-breadcrumbs a:hover {color: var(--about-green);}

/* Общие элементы */
.about-h2 {font-weight: 600; font-size: 60px; line-height: 1.1; color: var(--about-heading); margin-bottom: 40px;}
.about-lead {font-weight: 500; font-size: 24px; line-height: 34px; color: var(--about-heading);}
.about-overline {font-weight: 600; font-size: 16px; line-height: 20px; letter-spacing: 2px; text-transform: uppercase; color: var(--about-green-pale);}

.about-btn {display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; border-radius: var(--about-radius); border: 1.5px solid transparent; font-weight: 500; font-size: 20px; line-height: 24px; color: #fff; text-align: center; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;}
.about-btn:hover {text-decoration: none;}
.about-btn--green {background-color: var(--about-green); border-color: var(--about-green); color: #fff;}
.about-btn--green:hover {background-color: var(--about-pink); border-color: var(--about-pink); color: #fff;}
.about-btn--outline {border-color: #fff; color: #fff;}
.about-btn--outline:hover {background-color: #fff; color: var(--about-dark);}

/* ---------- Первый экран ---------- */
.about-hero__banner {position: relative; min-height: 700px; border-radius: var(--about-radius); overflow: hidden; background-color: var(--about-dark); box-shadow: var(--about-shadow); padding: 91px 124px 200px;}
.about-hero__photo {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom;}
.about-hero__banner:after {content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 18, 15, 0.72) 0%, rgba(20, 18, 15, 0.45) 45%, rgba(20, 18, 15, 0) 75%);}
.about-hero__content {position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; max-width: 1000px;}
.about-hero__title {font-weight: 700; font-size: 72px; line-height: 80px; color: #fff; text-transform: uppercase;}
.about-page .about-hero__title {text-transform: uppercase;}
.about-hero__lead {max-width: 900px; font-weight: 500; font-size: 24px; line-height: 34px; color: #fff; opacity: 0.9;}
.about-hero__buttons {display: flex; flex-wrap: wrap; gap: 16px; padding-top: 20px;}

.about-stats {position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); margin: -120px 80px 0; padding: 44px 0; background: #fff; border-radius: var(--about-radius); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
.about-stat {padding: 0 44px; border-left: 1px solid var(--about-border);}
.about-stat:first-child {border-left: 0;}
.about-stat__icon {display: block; width: 48px; height: 48px; margin-bottom: 16px;}
.about-stat__number {font-weight: 700; font-size: 56px; line-height: 60px; color: var(--about-green); white-space: nowrap;}
.about-stat__label {margin-top: 10px; font-weight: 600; font-size: 16px; line-height: 20px; letter-spacing: 1px; text-transform: uppercase; color: var(--about-heading);}
.about-stat__text {margin-top: 10px; font-size: 16px; line-height: 22px;}

/* ---------- Кто мы ---------- */
.about-who {margin-top: var(--about-space);}
.about-who__row {display: flex; gap: 40px; align-items: flex-start;}
.about-who__text {flex: 0 0 calc(50% - 20px); display: flex; flex-direction: column; gap: 24px; font-size: 20px; line-height: 30px;}
.about-who__text a {color: var(--about-green);}
.about-who__text a:hover {color: var(--about-pink);}
.about-chips {display: flex; flex-wrap: wrap; gap: 10px;}
.about-page .about-chip {display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 16px; border: 1px solid var(--about-border); border-radius: 100px; background: #fff; font-weight: 500; font-size: 16px; line-height: 20px; color: var(--about-heading); transition: border-color 0.3s ease, color 0.3s ease;}
.about-chip:before {content: ''; flex: 0 0 8px; width: 8px; height: 8px; background: url("../images/about/dot.svg") no-repeat center / contain;}
.about-page a.about-chip:hover {border-color: var(--about-green); color: var(--about-green);}
.about-quote {position: relative; margin: 0; padding: 32px 40px 32px 88px; border: 0; border-radius: var(--about-radius); background: var(--about-panel); font-style: normal; font-weight: 500; font-size: 22px; line-height: 32px; color: var(--about-heading);}
.about-quote:before {content: '\201C'; position: absolute; left: 32px; top: 32px; font-weight: 700; font-size: 72px; line-height: 60px; color: var(--about-green);}

.about-collage {position: relative; flex: 1 1 auto; display: flex; gap: 20px; height: 814px;}
.about-collage img {display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--about-radius);}
.about-collage__main {flex: 1 1 0; min-width: 0;}
.about-collage__side {flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px;}
.about-collage__side img:first-child {flex: 0 0 44.8%; height: 44.8%;}
.about-collage__side img:last-child {flex: 1 1 auto; min-height: 0;}


/* ---------- Почему выбирают нас ---------- */
.about-why {margin-top: var(--about-space); padding: var(--about-space) 0; background: var(--about-panel);}
.about-bento {display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(300px, auto); gap: 16px;}
.about-card {position: relative; display: flex; flex-direction: column; gap: 20px; padding: 40px; border-radius: var(--about-radius); background: #fff; box-shadow: var(--about-shadow); overflow: hidden;}
.about-card__top {display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;}
.about-card__top img {display: block; width: 64px; height: 64px;}
.about-card__num {font-weight: 700; font-size: 56px; line-height: 56px; color: transparent; -webkit-text-stroke: 1.5px var(--about-green-light);}
.about-card__title {font-weight: 600; font-size: 22px; line-height: 28px; text-transform: uppercase; color: var(--about-heading);}
.about-page .about-card__title {text-transform: uppercase;}
.about-card__text {font-size: 18px; line-height: 27px;}

.about-card--photo {grid-row: span 2; justify-content: flex-end; padding: 40px; background: var(--about-dark); box-shadow: none;}
.about-card--photo .about-card__photo {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.about-card--photo:after {content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 18, 15, 0.1) 0%, rgba(20, 18, 15, 0.15) 45%, rgba(20, 18, 15, 0.88) 100%);}
.about-card__body {position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px;}
.about-card__body > img {width: 64px; height: 64px;}
.about-card--photo .about-card__title {color: #fff;}
.about-card--photo .about-card__text {color: #fff; opacity: 0.9;}
.about-badge {display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 16px; border-radius: 100px; background: #fff; font-weight: 600; font-size: 16px; line-height: 20px; letter-spacing: 1px; text-transform: uppercase; color: var(--about-heading);}
.about-badge b {font-weight: 600; font-size: 18px; line-height: 24px; letter-spacing: 0; text-transform: none; color: var(--about-green);}

.about-cta {position: relative; display: flex; align-items: center; gap: 32px; margin-top: 40px; padding: 44px 48px; border-radius: var(--about-radius); background: var(--about-green); color: #fff; overflow: hidden;}
.about-cta__decor {position: absolute; left: 61.36%; top: -60px; width: 1312px; max-width: none; height: 1312px; opacity: 0.1; pointer-events: none;}
.about-cta__icon {position: relative; flex: 0 0 64px; width: 56px; height: 56px; object-fit: contain; object-position: left top;}
.about-cta__text {position: relative; flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; font-size: 18px; line-height: 27px;}
.about-cta__title {font-weight: 600; font-size: 44px; line-height: 52px;}
.about-cta .about-btn {position: relative; flex: 0 0 auto;}
.about-cta .about-btn:hover {color: var(--about-green);}

/* ---------- Этапы ---------- */
.about-steps {position: relative; margin-top: var(--about-space); padding: 80px; border-radius: var(--about-radius); background: var(--about-dark) url("../images/about/steps-texture.jpg") center / cover; color: #fff; overflow: hidden; isolation: isolate;}
.about-steps:before {content: ''; position: absolute; inset: 0; z-index: -2; background: rgba(39, 39, 39, 0.5);}
.about-steps__glow {position: absolute; z-index: -1; left: 70.45%; top: -520px; width: 900px; height: 900px; max-width: none; transform: scale(1.4889); transform-origin: center; pointer-events: none;}
.about-steps__head {display: flex; flex-direction: column; gap: 16px; margin-bottom: 64px;}
.about-steps .about-h2 {margin: 0; color: #fff;}
.about-steps .about-accent {color: var(--about-green-light);}
.about-steps__head p {font-size: 20px; line-height: 30px; opacity: 0.7;}
.about-steps__list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;}
.about-step {position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 36px 32px 40px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--about-radius); background: rgba(255, 255, 255, 0.06); overflow: hidden;}
.about-step > img {display: block; width: 64px; height: 64px; margin-bottom: 24px;}
.about-step__num {position: absolute; top: 28px; right: 32px; font-weight: 700; font-size: 88px; line-height: 88px; color: transparent; -webkit-text-stroke: 1.5px var(--about-green-light); opacity: 0.55;}
.about-step__badge {margin-bottom: 28px; padding: 10px 22px; border-radius: 100px; background: var(--about-green); font-weight: 600; font-size: 16px; line-height: 20px; letter-spacing: 1px; text-transform: uppercase;}
.about-step__title {margin-bottom: 14px; font-weight: 600; font-size: 24px; line-height: 30px; color: #fff;}
.about-step__text {font-size: 18px; line-height: 27px; opacity: 0.7;}
.about-steps__dots {display: none;}

/* ---------- Нам доверяют ---------- */
.about-clients {margin-top: var(--about-space);}
.about-clients__head {display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 40px;}
.about-clients__head .about-h2 {margin: 0;}
.about-clients__head p {flex: 0 1 560px; font-size: 18px; line-height: 27px;}
.about-clients.section-clients {padding: 0;}

/* ---------- Форма заявки ---------- */
.about-order {display: flex; margin: var(--about-space) 0 0; border-radius: var(--about-radius); background: #fff; box-shadow: var(--about-shadow); overflow: hidden;}
.about-order__form {position: relative; flex: 0 0 50%; display: flex; flex-direction: column; gap: 36px; padding: 72px 80px; background: var(--about-panel); isolation: isolate;}
.about-order__form:before {content: ''; position: absolute; inset: 0; z-index: -1; background: url("../images/about/pattern.svg") 0 -20px / 160px 320px repeat; opacity: 0.07;}
.about-order__title {font-weight: 600; font-size: 44px; line-height: 52px; color: var(--about-heading);}
.about-order__text {margin-top: -20px; font-size: 20px; line-height: 30px;}
.screen .about-page ~ .footer {margin-top: var(--about-space);}
.about-order__photo {position: relative; flex: 1 1 auto; min-height: 400px;}
.about-order__photo img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.about-order__quote {position: absolute; right: 40px; bottom: 40px; width: 520px; max-width: calc(100% - 80px); padding: 28px 32px; border-radius: var(--about-radius); background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); font-weight: 500; font-size: 22px; line-height: 32px; color: var(--about-heading);}

.about-contacts {display: flex; flex-wrap: wrap; gap: 20px 48px;}
.about-contact {display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 20px; line-height: 24px; color: var(--about-heading);}
.about-page .about-contact a {color: var(--about-heading); text-decoration: none;}
.about-page .about-contact a:hover {color: var(--about-green); text-decoration: none;}
.about-contact small {display: block; margin-bottom: 2px; font-weight: 400; font-size: 14px; line-height: 20px; color: var(--about-muted);}
.about-contact__icon {display: flex; align-items: center; justify-content: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: var(--about-radius); background: var(--about-green);}
.about-contact__icon img {width: 20px; height: 20px;}

/* Форма Fluent Forms (на странице и в модальном окне) */
.about-ff .fluentform .ff-el-group {margin-bottom: 0;}
.about-ff .ff-t-container {display: block;}
.about-ff .ff-t-cell {display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px !important; margin: 0 !important; max-width: none;}
.about-ff .ff-t-cell > .ff-el-group:nth-child(n+3) {grid-column: 1 / -1;}
.about-ff .ff-el-input--label, .about-ff label {display: none;}
.about-ff .ff-el-form-control {height: 48px; padding: 0 20px; border: 1px solid var(--about-border); border-radius: var(--about-radius); background-color: #fff; font-family: inherit; font-size: 16px; line-height: 22px; color: var(--about-heading);}
.about-ff .ff-el-form-control::placeholder {color: var(--about-muted); opacity: 1;}
.about-ff .ff-el-form-control:focus {border-color: var(--about-green); outline: none; box-shadow: 0 0 0 3px rgba(66, 157, 72, 0.15);}
.about-ff select.ff-el-form-control {padding-right: 48px; background: #fff url("../images/about/chevron.svg") no-repeat right 20px center / 16px 16px; appearance: none; -webkit-appearance: none;}
.about-ff .ff-btn-submit.button {width: auto; min-height: 48px; padding: 12px 14px; border: 0; font-size: 20px; line-height: 24px;}
.about-ff .ff_submit_btn_wrapper {display: block;}
.about-order .about-ff .ff-btn-submit.button {padding-left: 49px; padding-right: 49px;} /* на 50% шире, чем с отступами 14px */
.about-order .about-ff .ff-btn-submit.button.mag-btn:hover {background-color: var(--about-pink); color: #fff; border: 0;} /* без эффекта при наведении */

/* Согласие на обработку данных (чекбокс добавляется в js/about.js) */
.about-ff .ff-t-cell > .about-consent {grid-column: 1 / -1;}
.about-consent {display: flex !important; align-items: flex-start; gap: 12px; margin: 0; cursor: pointer; font-size: 14px; line-height: 20px; color: var(--about-text);}
.about-consent input {flex: 0 0 20px; width: 20px; height: 20px; margin: 0; accent-color: var(--about-green); cursor: pointer;}
.about-consent a {color: inherit; text-decoration: underline;}
.about-consent a:hover {color: var(--about-green);}
.about-consent.is-error {color: #e5484d;}
.about-consent.is-error input {outline: 2px solid #e5484d; outline-offset: 1px;}
.about-ff .ff-btn-submit.is-blocked {opacity: 0.6;}
.about-ff .ff-el-is-error .ff-el-form-control {border-color: #e5484d;}
.about-ff .error.text-danger {margin-top: 4px; font-size: 13px; color: #e5484d; text-shadow: none;}
.about-ff .ct-text {margin: 16px 0 0 !important; font-size: 14px !important; line-height: 20px; opacity: 0.8;}
.about-ff .ct-text p {font-size: 14px; line-height: 20px;}
.about-ff .ct-text:first-of-type h2 {display: none;}
.about-order .about-ff .ct-text:first-of-type {display: none;}
.about-ff .ff-message-success {padding: 24px; border: 0; border-radius: var(--about-radius); background: #fff; box-shadow: var(--about-shadow); color: var(--about-heading);}
.about-ff .ff-message-success h2 {margin: 0 0 8px; font-size: 28px; line-height: 1.2;}

/* Модальное окно */
.about-popup .uk-modal-dialog {width: 560px; max-width: calc(100% - 30px); padding: 40px; border-radius: var(--about-radius);}
.about-popup__title {margin: 0 0 12px; font-weight: 600; font-size: 32px; line-height: 38px; color: #333;}
.about-popup .about-ff .ct-text:first-of-type {margin: 0 0 24px !important; font-size: 16px !important; line-height: 22px; opacity: 1;}
.about-popup .about-ff .ct-text:first-of-type p {font-size: 16px; line-height: 22px;}

/* ================= Адаптив ================= */
@media (max-width: 1599px) {
	:root {--about-space: 40px;}
	.about-h2 {font-size: 46px;}
	.about-hero__banner {min-height: 620px; padding: 72px 80px 180px;}
	.about-hero__title {font-size: 60px; line-height: 68px;}
	.about-hero__lead {font-size: 22px; line-height: 32px; max-width: 760px;}
	.about-stats {margin: -110px 40px 0; padding: 36px 0;}
	.about-stat {padding: 0 32px;}
	.about-stat__number {font-size: 44px; line-height: 50px;}
	.about-lead {font-size: 22px; line-height: 32px;}
	.about-who__text {font-size: 18px; line-height: 28px;}
	.about-quote {font-size: 20px; line-height: 30px;}
	.about-collage {height: 720px;}
	.about-card {padding: 32px;}
	.about-card__title {font-size: 20px; line-height: 26px;}
	.about-card__text {font-size: 16px; line-height: 24px;}
	.about-cta__title {font-size: 36px; line-height: 44px;}
	.about-steps {padding: 64px;}
	.about-step {padding: 32px 24px 32px;}
	.about-step__num {font-size: 72px; line-height: 72px; right: 24px;}
	.about-step__title {font-size: 22px; line-height: 28px;}
	.about-step__text {font-size: 16px; line-height: 24px;}
	.about-order__form {padding: 56px 56px;}
	.about-order__title {font-size: 38px; line-height: 46px;}
	.about-order__text {font-size: 18px; line-height: 28px;}
	.about-order__quote {font-size: 20px; line-height: 30px;}
}

@media (max-width: 1199px) {
	.about-h2 {font-size: 40px; margin-bottom: 32px;}
	.about-hero__banner {min-height: 560px; padding: 56px 48px 170px;}
	.about-hero__title {font-size: 48px; line-height: 56px;}
	.about-hero__lead {font-size: 20px; line-height: 30px;}
	.about-btn {font-size: 18px; padding: 11px 24px;}
	.about-stats {grid-template-columns: repeat(2, 1fr); row-gap: 32px; margin: -120px 24px 0; padding: 32px 0;}
	.about-stat:nth-child(3) {border-left: 0;}
	.about-who__row {flex-direction: column; gap: 40px;}
	.about-who__text {flex-basis: auto;}
	.about-collage {width: 100%; height: 640px;}
	.about-bento {grid-template-columns: repeat(2, 1fr);}
	.about-card--photo {min-height: 560px;}
	.about-cta {padding: 36px 40px; gap: 24px;}
	.about-cta__title {font-size: 30px; line-height: 38px;}
	.about-steps {padding: 56px 48px;}
	.about-steps__head {margin-bottom: 48px;}
	.about-steps__list {grid-template-columns: repeat(2, 1fr);}
	.about-clients__head {flex-direction: column; align-items: flex-start; gap: 16px;}
	.about-clients__head p {flex-basis: auto;}
	.about-order {flex-direction: column;}
	.about-order__form {padding: 48px;}
	.about-order__photo {min-height: 520px;}
}

@media (max-width: 959px) {
	:root {--about-space: 32px;}
	.about-h2 {font-size: 32px;}
	.about-breadcrumbs {margin: 12px 0 16px;}
	.about-hero__banner {min-height: 0; padding: 48px 32px 150px;}
	.about-hero__banner:after {background: linear-gradient(180deg, rgba(20, 18, 15, 0.55) 0%, rgba(20, 18, 15, 0.75) 100%);}
	.about-hero__photo {object-position: 72% bottom;} /* на узких экранах в кадре закуски справа */
	.about-hero__content {gap: 18px;}
	.about-hero__title {font-size: 40px; line-height: 46px;}
	.about-hero__lead {font-size: 18px; line-height: 27px;}
	.about-hero__buttons {padding-top: 8px;}
	.about-stats {margin: -100px 16px 0;}
	.about-stat {padding: 0 24px;}
	.about-stat__number {font-size: 38px; line-height: 44px;}
	.about-lead {font-size: 20px; line-height: 30px;}
	.about-who__text {font-size: 17px; line-height: 26px; gap: 20px;}
	.about-collage {height: 520px; gap: 12px;}
	.about-collage__side {gap: 12px;}
	.about-cta {flex-wrap: wrap;}
	.about-cta__text {flex-basis: calc(100% - 96px);}
	.about-cta .about-btn {width: 100%;}
	.about-steps {padding: 48px 32px;}
	.about-steps__head p {font-size: 18px; line-height: 27px;}
	.about-order__form {padding: 40px 32px; gap: 28px;}
	.about-order__title {font-size: 32px; line-height: 40px;}
	.about-order__text {margin-top: -14px;}
	.about-order__photo {min-height: 440px;}
}

@media (max-width: 767px) {
	.about-bento {grid-template-columns: 1fr; grid-auto-rows: auto;}
	.about-card--photo {grid-row: auto; min-height: 460px;}
	.about-card__top {margin-bottom: 4px;}
	.about-card__num {font-size: 44px; line-height: 44px;}

	/* Этапы — горизонтальная лента со снапом */
	.about-steps {padding: 40px 0 40px 24px;}
	.about-steps__head {padding-right: 24px; margin-bottom: 32px;}
	.about-steps__list {display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 24px 8px 0; scrollbar-width: none;}
	.about-steps__list::-webkit-scrollbar {display: none;}
	.about-step {flex: 0 0 82%; scroll-snap-align: start;}
	.about-steps__dots {display: flex; justify-content: center; gap: 8px; margin-top: 20px; padding-right: 24px;}
	.about-steps__dots button {width: 8px; height: 8px; padding: 0; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: width 0.3s ease, background-color 0.3s ease;}
	.about-steps__dots button.is-active {width: 24px; background: var(--about-green);}
}

@media (max-width: 539px) {
	:root {--about-space: 24px;}
	.about-h2 {font-size: 28px; margin-bottom: 24px;}
	.about-overline {font-size: 12px; letter-spacing: 1.5px;}
	.about-hero__banner {padding: 32px 20px 120px;}
	.about-hero__title {font-size: 30px; line-height: 36px;}
	.about-hero__lead {font-size: 16px; line-height: 24px;}
	.about-hero__buttons {flex-direction: column; gap: 12px;}
	.about-btn {width: 100%; font-size: 16px; padding: 12px 20px;}
	.about-stats {grid-template-columns: 1fr; row-gap: 0; margin: -80px 8px 0; padding: 8px 20px;}
	.about-stat {display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; padding: 20px 0; border-left: 0; border-top: 1px solid var(--about-border);}
	.about-stat:first-child {border-top: 0;}
	.about-stat__icon {grid-row: span 3; width: 40px; height: 40px; margin: 4px 0 0;}
	.about-stat__number {font-size: 32px; line-height: 38px;}
	.about-stat__label {margin-top: 4px; font-size: 14px; line-height: 18px;}
	.about-stat__text {margin-top: 6px; font-size: 14px; line-height: 20px;}
	.about-lead {font-size: 18px; line-height: 27px;}
	.about-who__text {font-size: 16px; line-height: 24px;}
	.about-page .about-chip {font-size: 14px; padding: 8px 14px 8px 12px;}
	.about-quote {padding: 24px 20px 24px 60px; font-size: 17px; line-height: 26px;}
	.about-quote:before {left: 18px; top: 24px; font-size: 56px; line-height: 48px;}
	.about-collage {height: 420px;}
	.about-collage__main {flex-basis: 55%;}
	.about-collage__side {flex-basis: 45%;}
	.about-card {padding: 24px;}
	.about-card--photo {padding: 24px; min-height: 420px;}
	.about-card__top img, .about-card__body > img {width: 52px; height: 52px;}
	.about-card__title {font-size: 18px; line-height: 24px;}
	.about-badge {font-size: 13px; letter-spacing: 0.5px;}
	.about-badge b {font-size: 16px;}
	.about-cta {padding: 28px 20px; gap: 16px;}
	.about-cta__icon {flex-basis: 44px; width: 44px; height: 44px;}
	.about-cta__text {flex-basis: calc(100% - 60px); font-size: 15px; line-height: 22px;}
	.about-cta__title {font-size: 24px; line-height: 30px;}
	.about-cta__decor {left: 40%; top: 20px; width: 700px; height: 700px;}
	.about-steps {padding: 32px 0 32px 16px;}
	.about-steps__head {padding-right: 16px;}
	.about-steps__head p {font-size: 16px; line-height: 24px;}
	.about-steps__list {padding-right: 16px;}
	.about-step {flex-basis: 86%; padding: 28px 20px;}
	.about-step__num {font-size: 60px; line-height: 60px; top: 24px; right: 20px;}
	.about-step__title {font-size: 20px; line-height: 26px;}
	.about-clients__head p {font-size: 16px; line-height: 24px;}
	.about-order__form {padding: 32px 20px;}
	.about-order__title {font-size: 26px; line-height: 32px;}
	.about-order__text {font-size: 16px; line-height: 24px;}
	.about-ff .ff-t-cell {grid-template-columns: 1fr;}
	.about-ff .ff-t-cell > .ff-el-group {grid-column: 1 / -1;}
	.about-ff .ff-btn-submit.button {font-size: 18px;}
	.about-order .about-ff .ff-btn-submit.button {padding-left: 46px; padding-right: 46px;}
	.about-contacts {flex-direction: column; gap: 16px;}
	.about-order__photo {min-height: 380px;}
	.about-order__quote {left: 16px; right: 16px; bottom: 16px; width: auto; max-width: none; padding: 20px; font-size: 17px; line-height: 26px;}
	.about-popup .uk-modal-dialog {padding: 32px 20px;}
	.about-popup__title {font-size: 26px; line-height: 32px;}
}
