/**
 * Craftory Box — Front page (header + blocks 1–4)
 */

:root {
	--front-gold: #c6a15b;
	--front-black: #111214;
	--front-white: #fff;
	--front-gray: #a4a4a4;
	--front-container: 1440px;
	--front-gutter: clamp(16px, 4vw, 60px);
	--front-header-h: 89px;
	--front-frame-offset: 7%;
	--front-mosaic-offset: 6px;
	--front-font: "Inter", "Helvetica Neue", HelveticaNeue-Regular, Helvetica, Arial, sans-serif;
	--front-font-nav: "Inter", "Helvetica Neue", HelveticaNeueCyr-Roman, Helvetica, Arial, sans-serif;
	--front-font-serif: "Playfair Display SC", "Playfair Display", Georgia, "Times New Roman", serif;
}

/* ==========================================================================
   Base
   ========================================================================== */
body.front-page-body {
	margin: 0;
	overflow-x: hidden;
	background: #fff;
}

body.front-page-body.front-menu-open {
	overflow: hidden;
}

body.front-page-body.front-project-modal-open {
	overflow: hidden;
}

body.front-page-body .site--front,
body.front-page-body #page {
	margin: 0;
	width: 100%;
	max-width: none;
}

.front-page {
	width: 100%;
	max-width: none;
	font-family: var(--front-font);
}

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

/* Контейнер контенту: max 1440px, секції залишаються full-width */
.front-container {
	width: 100%;
	max-width: var(--front-container);
	margin-inline: auto;
	padding-inline: var(--front-gutter);
	box-sizing: border-box;
	min-width: 0;
}

/* Overflow safety тільки для full-bleed обгорток секцій */
.front-page > section,
.front-page > header,
.front-page [class*="__track-wrap"] {
	min-width: 0;
	max-width: 100%;
}

.front-page h1,
.front-page h2,
.front-page h3,
.front-page p,
.front-page figure {
	margin: 0;
}

.front-page a {
	text-decoration: none;
}

.front-page button:not(.front-hero__dot):not(.product-calc__size):not(.product-calc__add-size):not(.product-calc__submit):not(.product-calc__gallery-nav):not(.product-calc__tier-qty):not(.product-calc__tier-price):not(.product-calc__slider-dot) {
	font: inherit;
	border: 0;
	padding: 0;
	cursor: pointer;
	background: none;
	appearance: none;
}

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

/* Section title with offset mosaic gold frames */
.front-section-head {
	display: flex;
	justify-content: center;
	margin-bottom: clamp(28px, 4vw, 48px);
}

.front-section-head__title {
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 74px;
	padding: 14px 36px;
	text-align: center;
	font-family: var(--front-font);
	font-size: clamp(28px, 3.2vw, 45px);
	font-weight: 500;
	line-height: 1.14;
}

.front-section-head__title::before,
.front-section-head__title::after {
	content: "";
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border: 1px solid var(--front-gold);
	pointer-events: none;
}

/* Нижня ліва рамка */
.front-section-head__title::before {
	top: var(--front-mosaic-offset);
	left: calc(-1 * var(--front-mosaic-offset));
	z-index: -2;
}

/* Верхня права рамка */
.front-section-head__title::after {
	top: calc(-1 * var(--front-mosaic-offset));
	left: var(--front-mosaic-offset);
	z-index: -1;
}

.front-section-head--light .front-section-head__title {
	color: var(--front-black);
}

.front-section-head--dark .front-section-head__title {
	color: var(--front-white);
}

/* ==========================================================================
   Header
   ========================================================================== */
.front-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--front-black);
	color: #fff;
}

.front-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	min-height: var(--front-header-h);
	min-width: 0;
}

.front-header__logo {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}

.front-header__nav {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 24px;
	min-width: 0;
}

.front-header__logo img {
	width: 129px;
	height: auto;
	max-width: 100%;
}

.front-header a.front-header__link {
	color: #fff;
	font-family: var(--front-font-nav);
	font-size: 15px;
	line-height: 1.14;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.front-header a.front-header__link:hover,
.front-header a.front-header__link:focus-visible {
	color: var(--front-gold);
}

.front-header a.front-header__cta--desktop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 16px;
	border: 2px solid var(--front-gold);
	color: #fff;
	font-family: var(--front-font-nav);
	font-size: 15px;
	line-height: 1.14;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease;
	flex: 0 0 auto;
	margin-left: auto;
	max-width: 100%;
}

.front-header a.front-header__cta--desktop:hover,
.front-header a.front-header__cta--desktop:focus-visible {
	background: rgba(198, 161, 91, 0.12);
	color: var(--front-gold);
}

.front-header a.front-header__cta--mobile {
	display: none;
}

.front-header__burger {
	display: none;
}

.front-header__backdrop {
	display: none;
}

/* ==========================================================================
   Hero: title above full-width image slider
   ========================================================================== */
.front-hero {
	position: relative;
	color: var(--front-black);
	background: #fff;
}

.front-hero__intro {
	padding-block: clamp(24px, 3.5vw, 52px) clamp(20px, 3vw, 44px);
}

.front-hero__pretitle {
	margin: 0 0 clamp(10px, 1.4vw, 18px);
	color: var(--front-gold);
	font-family: var(--front-font);
	font-size: clamp(14px, 1.2vw, 17px);
	font-weight: 400;
	line-height: 1.14;
}

.front-hero__viewport {
	position: relative;
	overflow: hidden;
	touch-action: pan-y;
	/* Match hero-slide-*.jpg (2400×1018) so the banner is not cropped on desktop */
	aspect-ratio: 2400 / 1018;
	width: 100%;
	background: #f0ebe3;
}

.front-hero__track {
	display: flex;
	height: 100%;
	min-height: inherit;
	transition: transform 0.45s ease;
	will-change: transform;
}

.front-hero__slide {
	flex: 0 0 100%;
	position: relative;
	display: grid;
	align-items: center;
	min-height: inherit;
}

.front-hero__media {
	position: absolute;
	inset: 0;
}

.front-hero__bg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
}

.front-hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 68px;
	transform: translateY(-50%);
	color: #fff;
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.25));
	transition: opacity 0.2s ease;
}

.front-hero__arrow--prev {
	left: clamp(8px, 2vw, 30px);
}

.front-hero__arrow--next {
	right: clamp(8px, 2vw, 30px);
}

.front-hero__arrow:hover,
.front-hero__arrow:focus-visible {
	opacity: 0.75;
}

.front-hero__title {
	display: block;
	width: 100%;
	max-width: min(1100px, 100%);
	min-width: 0;
	margin: 0;
	padding: 0;
	color: var(--front-gold);
	font-family: var(--front-font-serif);
	font-size: clamp(30px, 3.9vw, 55px);
	font-weight: 400;
	line-height: 1.14;
	text-align: left;
}

.front-hero__title-line {
	display: block;
}

.front-hero__dots {
	position: absolute;
	left: 50%;
	bottom: clamp(24px, 3vw, 42px);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	transform: translateX(-50%);
	pointer-events: auto;
}

.front-hero__dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	appearance: none;
	transition: background-color 0.2s ease;
}

.front-hero__dot--active {
	background-color: var(--front-gold);
}

/* ==========================================================================
   About (text teaser on white)
   ========================================================================== */
.front-about {
	background: #fff;
	color: var(--front-black);
	padding-block: clamp(40px, 6vw, 90px);
	overflow: visible;
}

.front-about__inner {
	min-width: 0;
}

.front-about__content {
	min-width: 0;
	max-width: 560px;
}

.front-about p.front-about__text {
	color: #4a4a4a;
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.35;
	margin: 0 0 24px;
}

.front-about__lead {
	color: var(--front-gold);
}

.front-about a.front-about__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--front-gold);
	font-family: var(--front-font-nav);
	font-size: clamp(15px, 1.3vw, 18px);
	line-height: 1.14;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: opacity 0.2s ease;
}

.front-about a.front-about__link:hover {
	opacity: 0.85;
}

/* ==========================================================================
   Services — "Що ми робимо?" list
   ========================================================================== */
.front-services {
	background: #fff;
	padding-block: clamp(40px, 6vw, 96px);
	overflow-x: clip;
}

.front-services__list-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: clamp(36px, 5vw, 64px);
}

.front-services__list {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.6vw, 22px);
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 100%;
}

.front-services__item {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

.front-services__marker {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	transform: none;
}

.front-services__marker img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.front-services__label {
	font-family: var(--front-font);
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.3;
	color: var(--front-black);
}

.front-services__footnote.front-container {
	display: block;
	width: 100%;
	max-width: var(--front-container);
	margin-inline: auto;
	text-align: center;
	color: var(--front-gold);
	font-family: var(--front-font);
	font-size: clamp(16px, 1.5vw, 21px);
	font-weight: 400;
	line-height: 1.4;
}

.front-services__footnote.front-container p {
	margin: 0;
}

/* ==========================================================================
   Why us
   ========================================================================== */
.front-why {
	background: #fff;
	color: var(--front-black);
	padding-block: clamp(40px, 5vw, 72px);
}

.front-why__inner {
	min-width: 0;
}

.front-why__list {
	display: flex;
	flex-direction: column;
	gap: clamp(48px, 8vw, 80px);
	min-width: 0;
}

.front-why__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(24px, 5vw, 64px);
	min-width: 0;
}

.front-why__item--reverse {
	direction: rtl;
}

.front-why__item--reverse > * {
	direction: ltr;
}

.front-why__figure {
	position: relative;
	width: 100%;
	max-width: min(400px, 100%);
	min-width: 0;
	margin: 0;
	padding: 6px 8px 0 0;
	justify-self: start;
	isolation: isolate;
}

.front-why__content {
	min-width: 0;
	max-width: 100%;
}

.front-why__item--reverse .front-why__figure {
	justify-self: end;
	padding: 0 0 6px 8px;
}

.front-why__frame {
	position: absolute;
	top: -6px;
	right: 12px;
	bottom: 8px;
	left: -14px;
	border: 1px solid var(--front-gold);
	pointer-events: none;
	z-index: 0;
}

.front-why__item--reverse .front-why__frame {
	top: 8px;
	right: 8px;
	bottom: -6px;
	left: -14px;
}

.front-why__image {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	aspect-ratio: 8 / 5;
	object-fit: cover;
}

.front-why h3.front-why__title {
	font-family: var(--front-font);
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.25;
	font-weight: 700;
	color: var(--front-black);
	margin: 0 0 14px;
}

.front-why__text {
	font-family: var(--front-font);
	color: #6f6f6f;
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.4;
	font-weight: 400;
	max-width: 460px;
}

.front-why h3.front-why__title .front-why__stat-num {
	font-weight: 700;
}

/* ==========================================================================
   Audience
   ========================================================================== */
.front-audience {
	background: #fff;
	padding-block: clamp(56px, 8vw, 120px);
}

.front-audience__inner {
	min-width: 0;
}

.front-audience__content {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.front-audience p.front-audience__lead {
	margin: 0 0 clamp(28px, 3.5vw, 44px);
	font-family: var(--front-font);
	font-size: clamp(15px, 1.4vw, 18px);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	color: var(--front-black);
}

.front-audience__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 150px));
	justify-content: center;
	gap: 35px 62px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.front-audience__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.front-audience__icon-wrap {
	flex: 0 0 auto;
	width: 120px;
	height: 120px;
}

.front-audience__icon {
	display: block;
	width: 100%;
	height: 100%;
}

.front-audience__label {
	width: 100%;
	max-width: 150px;
	margin: 0;
	font-family: var(--front-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.25;
	text-align: center;
	color: var(--front-black);
}

/* ==========================================================================
   Process (light, gold staircase path)
   ========================================================================== */
.front-process {
	position: relative;
	color: var(--front-black);
	background: #fff;
	padding-block: clamp(40px, 5vw, 64px) 0;
	overflow: hidden;
}

.front-process__bg {
	display: none;
}

.front-process__inner {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.front-process .front-section-head {
	margin-bottom: clamp(32px, 4vw, 52px);
}

.front-process__flow {
	position: relative;
	width: 100%;
	max-width: 1270px;
	margin-inline: auto;
	margin-bottom: clamp(40px, 5vw, 72px);
}

/* Десктоп: готова картинка зі «сходинками», кроки-картки — лише на мобільному */
.front-process__flow-img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 1000px) {
	.front-process__flow-img {
		display: none !important;
	}
}

.front-process__steps {
	display: none;
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
	list-style: none;
}

.front-process__step {
	position: absolute;
	left: var(--step-left);
	top: var(--step-top);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: max-content;
	max-width: min(220px, 28vw);
	transform: translateX(-50%);
	text-align: center;
}

.front-process__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(52px, 5.5vw, 82px);
	height: clamp(44px, 4.5vw, 63px);
}

.front-process__icon {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.front-process p.front-process__label {
	margin: 0;
	font-family: var(--front-font);
	font-size: clamp(14px, 1.3vw, 18px);
	font-weight: 400;
	line-height: 1.14;
	color: var(--front-black);
	white-space: nowrap;
}

.front-process__bottom-line {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 1px;
	background: rgba(17, 18, 20, 0.12);
}

/* ==========================================================================
   Location (Ukraine map)
   ========================================================================== */
.front-location {
	background: #fff;
	color: var(--front-black);
	padding-block: clamp(40px, 5vw, 72px);
}

.front-location__inner {
	text-align: center;
}

.front-location p.front-location__text {
	margin: 0 auto clamp(28px, 4vw, 48px);
	max-width: 560px;
	font-family: var(--front-font);
	font-size: clamp(14px, 1.3vw, 17px);
	font-weight: 400;
	line-height: 1.4;
	color: var(--front-black);
}

.front-location__map {
	display: block;
	width: min(100%, 700px);
	height: auto;
	margin-inline: auto;
}

/* ==========================================================================
   Shared outline button
   ========================================================================== */
.front-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	text-decoration: none;
	min-width: min(100%, 279px);
	min-height: 67px;
	padding: 14px 16px 11px;
	border: 2px solid var(--front-gold);
	color: var(--front-white);
	font-family: var(--front-font);
	font-size: clamp(16px, 1.4vw, 20px);
	font-weight: 400;
	line-height: 1.14;
	text-transform: uppercase;
	text-align: center;
	transition: background 0.2s ease, color 0.2s ease;
}

.front-btn:hover,
.front-btn:focus-visible {
	background: rgba(198, 161, 91, 0.12);
	color: var(--front-gold);
}

.front-btn--brief {
	min-width: min(100%, 267px);
	min-height: 65px;
	font-family: var(--front-font-nav);
	font-size: 15px;
}

/* ==========================================================================
   CTA
   ========================================================================== */
.front-cta {
	background: #fff;
	color: var(--front-black);
	padding-block: clamp(48px, 6vw, 80px);
}

.front-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	text-align: center;
}

.front-cta__title {
	margin: 0;
	font-family: var(--front-font);
	font-size: clamp(22px, 2.2vw, 32px);
	font-weight: 700;
	line-height: 1.14;
	color: var(--front-black);
}

.front-page p.front-cta__lead {
	margin: 0;
	max-width: 471px;
	font-family: var(--front-font);
	font-size: clamp(14px, 1.3vw, 17px);
	font-weight: 400;
	line-height: 1.4;
	color: #6f6f6f;
}

.front-cta .front-btn {
	border-width: 1px;
	color: var(--front-black);
}

.front-cta .front-btn:hover,
.front-cta .front-btn:focus-visible {
	background: rgba(198, 161, 91, 0.12);
	color: var(--front-gold);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.front-footer {
	background: var(--front-black);
	color: var(--front-white);
	padding-block: 0 clamp(40px, 5vw, 56px);
}

#front-footer-contacts {
	scroll-margin-top: 100px;
}

.front-footer__inner {
	min-width: 0;
}

.front-footer__top {
	position: relative;
	padding-block: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 48px);
}

.front-footer__columns {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr) minmax(0, 1fr) minmax(0, 1.2fr);
	gap: clamp(24px, 3vw, 42px);
}

.front-footer__heading {
	margin: 0 0 18px;
	font-family: var(--front-font);
	font-size: clamp(18px, 1.6vw, 20px);
	font-weight: 400;
	line-height: 1.14;
	color: #fff;
}

.front-footer__text {
	margin: 0;
	font-family: var(--front-font);
	font-size: clamp(15px, 1.4vw, 20px);
	font-weight: 400;
	line-height: 1.14;
	color: var(--front-gray);
}

.front-footer__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.front-footer a,
.front-footer a:hover,
.front-footer a.front-footer__link {
	text-decoration: none;
}

.front-footer__link {
	font-family: var(--front-font);
	font-size: clamp(15px, 1.4vw, 20px);
	font-weight: 400;
	line-height: 1.14;
	color: var(--front-gray);
	transition: color 0.2s ease;
}

.front-footer a.front-footer__link:hover,
.front-footer a.front-footer__link:focus-visible {
	color: var(--front-gold);
	text-decoration: none;
}

.front-footer__col--action .front-btn {
	width: 100%;
	max-width: 267px;
}

.front-footer__scroll-top {
	position: fixed;
	right: var(--front-gutter);
	bottom: clamp(24px, 4vw, 40px);
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 51px;
	height: 51px;
	padding: 0;
	border: 0;
	outline: none;
	box-shadow: none;
	cursor: pointer;
	background: none;
	-webkit-tap-highlight-color: transparent;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.front-footer__scroll-top.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.front-footer__scroll-top:hover,
.front-footer__scroll-top:focus,
.front-footer__scroll-top:focus-visible,
.front-footer__scroll-top:active {
	outline: none;
	box-shadow: none;
	border: 0;
	transform: translateY(-2px);
}

.front-footer__scroll-top img {
	display: block;
	width: 100%;
	height: 100%;
}

.front-footer__divider {
	height: 1px;
	background: rgba(164, 164, 164, 0.35);
}

.front-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: clamp(24px, 3vw, 32px);
}

.front-footer__copy {
	margin: 0;
	font-family: var(--front-font);
	font-size: clamp(14px, 1.3vw, 20px);
	font-weight: 400;
	line-height: 1.14;
	color: var(--front-gray);
}

.front-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px 20px;
}

.front-footer__legal-sep {
	display: none;
}

/* ==========================================================================
   Project modal
   ========================================================================== */
.project-modal {
	position: fixed;
	inset: 0;
	z-index: 3000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 32px);
}

.project-modal[hidden] {
	display: none;
}

.project-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(17, 18, 20, 0.82);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.project-modal.is-open .project-modal__overlay {
	opacity: 1;
}

.project-modal__dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100%, 560px);
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: clamp(32px, 5vw, 48px) clamp(24px, 4vw, 40px);
	background: var(--front-white);
	box-shadow: 0 18px 48px rgba(17, 18, 20, 0.24);
	text-align: center;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.project-modal.is-open .project-modal__dialog {
	opacity: 1;
	transform: translateY(0);
}

.project-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	background: transparent;
	color: var(--front-black);
	font-family: var(--front-font);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.project-modal__close:hover,
.project-modal__close:focus-visible {
	color: var(--front-gold);
}

.project-modal__title {
	margin: 0 0 clamp(16px, 2vw, 20px);
	font-family: var(--front-font-serif);
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 400;
	line-height: 1.14;
	text-transform: uppercase;
	color: var(--front-black);
}

.project-modal__lead {
	margin: 0 0 clamp(24px, 3vw, 32px);
	max-width: 420px;
	font-family: var(--front-font);
	font-size: clamp(14px, 1.4vw, 16px);
	font-weight: 400;
	line-height: 1.4;
	color: var(--front-gray);
}

.project-modal__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.project-modal__field {
	width: 100%;
}

.project-modal__control {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	border: 1px solid #d9d9d9;
	background: var(--front-white);
	color: var(--front-black);
	font-family: var(--front-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	transition: border-color 0.2s ease;
}

.project-modal__control::placeholder {
	color: var(--front-gray);
}

.project-modal__control:focus {
	outline: none;
	border-color: var(--front-gold);
}

.project-modal__control--textarea {
	min-height: 120px;
	resize: vertical;
}

.project-modal__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	margin-top: 8px;
	padding: 14px 16px;
	border: 0;
	background: var(--front-gold);
	color: var(--front-white);
	font-family: var(--front-font-nav);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.14;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
}

.project-modal__submit:hover,
.project-modal__submit:focus-visible {
	background: #b8924f;
}

.project-modal__submit:disabled {
	opacity: 0.7;
	cursor: wait;
}

.project-modal__success {
	margin: 0;
	font-family: var(--front-font);
	font-size: clamp(16px, 1.6vw, 18px);
	line-height: 1.4;
	color: var(--front-black);
}

@media (prefers-reduced-motion: reduce) {
	.project-modal__overlay,
	.project-modal__dialog {
		transition: none;
	}
}