/**
 * Craftory Box — Front page responsive (< 1000px)
 * Desktop layout (≥1001px) lives in front-page.css
 */

/* ==========================================================================
   Desktop fine-tuning (≥1201px)
   ========================================================================== */
@media (min-width: 1201px) {
	.front-why__item {
		gap: 122px;
	}

	.front-why h3.front-why__title {
		max-width: 518px;
	}

	.front-audience__grid {
		max-width: 1002px;
		margin-inline: auto;
	}

	.front-process__flow {
		max-width: 1323px;
	}
}

/* ==========================================================================
   Desktop header (≥1001px) — reset mobile menu styles
   ========================================================================== */
@media (min-width: 1001px) {
	.front-header__burger {
		display: none !important;
	}

	.front-header__backdrop {
		display: none !important;
		pointer-events: none !important;
		visibility: hidden !important;
	}

	.front-header a.front-header__cta--desktop {
		display: inline-flex;
	}

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

	.front-header__nav {
		position: static;
		display: flex !important;
		flex: 1 1 0;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 8px 24px;
		width: auto;
		height: auto;
		padding: 0;
		background: transparent;
		box-shadow: none;
		overflow: visible;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: none !important;
		transition: none;
	}

	.front-header__nav a.front-header__link {
		padding: 0;
		border-bottom: 0;
		opacity: 1 !important;
		transform: none !important;
		pointer-events: auto !important;
		transition: color 0.2s ease;
	}

	.front-header__nav a.front-header__cta--mobile {
		display: none !important;
	}
}

/* ==========================================================================
   Tablet landscape (1001px – 1200px) — minor tweaks only
   ========================================================================== */
@media (max-width: 1200px) and (min-width: 1001px) {
	:root {
		--front-gutter: clamp(16px, 3vw, 40px);
	}

	.front-about__inner {
		gap: clamp(28px, 4vw, 48px);
	}

	.front-why__list {
		gap: clamp(40px, 6vw, 64px);
	}

	.front-audience__grid {
		grid-template-columns: repeat(4, minmax(0, 150px));
		gap: 32px 48px;
	}

	.front-process p.front-process__label {
		white-space: normal;
	}
}

/* ==========================================================================
   ≤1000px — основний адаптив
   ========================================================================== */
@media (max-width: 1000px) {
	:root {
		--front-header-h: 72px;
		--front-gutter: clamp(16px, 4.5vw, 28px);
		--front-frame-offset: 5%;
		--front-mosaic-offset: 5px;
	}

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

	/* ------------------------------------------------------------------
	   Section titles
	   ------------------------------------------------------------------ */
	.front-section-head {
		margin-bottom: clamp(24px, 5vw, 40px);
	}

	.front-section-head__title {
		min-height: 58px;
		padding: 12px 24px;
		font-size: clamp(24px, 5.5vw, 36px);
	}

	/* ------------------------------------------------------------------
	   Header + mobile menu
	   ------------------------------------------------------------------ */
	.front-header__inner {
		flex-wrap: nowrap;
		gap: 12px;
	}

	.front-header__logo img {
		width: clamp(80px, 22vw, 96px);
	}

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

	.front-header__burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		position: relative;
		z-index: 1002;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		margin-left: auto;
		border: 2px solid var(--front-gold);
		border-radius: 4px;
		background: transparent;
		cursor: pointer;
		transition: border-color 0.2s ease, background 0.2s ease;
	}

	.front-header__burger:hover,
	.front-header__burger:focus-visible {
		background: rgba(198, 161, 91, 0.12);
	}

	.front-header__burger-bar {
		display: block;
		width: 20px;
		height: 2px;
		background: #fff;
		transition: transform 0.28s ease, opacity 0.2s ease;
	}

	.front-header__burger[aria-expanded="true"] .front-header__burger-bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.front-header__burger[aria-expanded="true"] .front-header__burger-bar:nth-child(2) {
		opacity: 0;
	}

	.front-header__burger[aria-expanded="true"] .front-header__burger-bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	.front-header__nav {
		display: flex;
		position: fixed;
		top: 0;
		right: 0;
		left: auto;
		z-index: 1001;
		flex: none;
		flex-direction: column;
		align-items: stretch;
		width: min(300px, 88vw);
		height: 100dvh;
		padding: calc(var(--front-header-h) + 16px) 24px 32px;
		background: var(--front-black);
		overflow-x: hidden;
		overflow-y: auto;
		gap: 0;
		flex-wrap: nowrap;
		box-shadow: -10px 0 40px rgba(0, 0, 0, 0.42);
		visibility: hidden;
		pointer-events: none;
		transform: translate3d(100%, 0, 0);
		transition:
			transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0s linear 0.38s;
	}

	.front-header__nav.is-open {
		visibility: visible;
		pointer-events: auto;
		transform: translate3d(0, 0, 0);
		transition:
			transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0s;
	}

	.front-header__nav a.front-header__link {
		padding: 14px 0;
		color: #fff;
		font-size: 17px;
		font-weight: 400;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		white-space: normal;
		opacity: 0;
		transform: translate3d(18px, 0, 0);
		transition:
			opacity 0.28s ease,
			transform 0.28s ease,
			color 0.2s ease;
	}

	.front-header__nav.is-open a.front-header__link {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

	.front-header__nav.is-open a.front-header__link:nth-child(1) { transition-delay: 0.06s; }
	.front-header__nav.is-open a.front-header__link:nth-child(2) { transition-delay: 0.1s; }
	.front-header__nav.is-open a.front-header__link:nth-child(3) { transition-delay: 0.14s; }
	.front-header__nav.is-open a.front-header__link:nth-child(4) { transition-delay: 0.18s; }
	.front-header__nav.is-open a.front-header__link:nth-child(5) { transition-delay: 0.22s; }
	.front-header__nav.is-open a.front-header__link:nth-child(6) { transition-delay: 0.26s; }

	.front-header__nav:not(.is-open) a.front-header__link {
		transition-delay: 0s;
	}

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

	.front-header__nav a.front-header__link.is-current {
		color: var(--front-gold);
	}

	.front-header a.front-header__cta--mobile {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
		padding: 14px 16px;
		border: 2px solid var(--front-gold);
		color: #fff;
		font-family: var(--front-font-nav);
		font-size: 14px;
		line-height: 1.14;
		text-transform: uppercase;
		opacity: 0;
		transform: translate3d(18px, 0, 0);
		transition:
			opacity 0.28s ease,
			transform 0.28s ease,
			background 0.2s ease,
			color 0.2s ease;
	}

	.front-header__nav.is-open a.front-header__cta--mobile {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		transition-delay: 0.3s;
	}

	.front-header__nav:not(.is-open) a.front-header__cta--mobile {
		transition-delay: 0s;
	}

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

	.front-header__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 998;
		border: 0;
		padding: 0;
		background: rgba(0, 0, 0, 0.55);
		cursor: pointer;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.32s ease, visibility 0.32s ease;
	}

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

	/* ------------------------------------------------------------------
	   Hero
	   ------------------------------------------------------------------ */
	.front-hero__intro {
		padding-block: clamp(20px, 4vw, 36px) clamp(16px, 3.5vw, 28px);
	}

	.front-hero__title {
		font-size: clamp(24px, 5.2vw, 40px);
	}

	.front-hero__arrow {
		width: 40px;
		height: 52px;
	}

	.front-hero__arrow svg {
		width: 13px;
		height: 25px;
	}

	.front-hero__dots {
		bottom: clamp(16px, 4vw, 32px);
		gap: 16px;
	}

	.front-hero__dot {
		width: 7px;
		height: 7px;
	}

	/* ------------------------------------------------------------------
	   About
	   ------------------------------------------------------------------ */
	.front-about {
		padding-block: clamp(36px, 8vw, 64px);
	}

	.front-about p.front-about__text {
		font-size: clamp(16px, 3.8vw, 19px);
		margin-bottom: clamp(14px, 3vw, 20px);
	}

	.front-about a.front-about__link {
		font-size: clamp(15px, 3.6vw, 18px);
	}

	/* ------------------------------------------------------------------
	   Services
	   ------------------------------------------------------------------ */
	.front-services {
		padding-block: clamp(40px, 9vw, 72px);
	}

	.front-services__list-wrap {
		margin-bottom: clamp(28px, 6vw, 48px);
	}

	.front-services__list {
		gap: clamp(12px, 2.8vw, 18px);
	}

	.front-services__label {
		font-size: clamp(15px, 3.6vw, 18px);
	}

	.front-services__marker {
		width: 14px;
		height: 14px;
	}

	.front-services__footnote.front-container {
		font-size: clamp(15px, 3.6vw, 19px);
		padding-inline: var(--front-gutter);
	}

	/* ------------------------------------------------------------------
	   Why us
	   ------------------------------------------------------------------ */
	.front-why {
		padding-block: clamp(48px, 10vw, 88px);
	}

	.front-why__list {
		gap: clamp(40px, 9vw, 64px);
	}

	.front-why__item,
	.front-why__item--reverse {
		grid-template-columns: 1fr;
		direction: ltr;
		gap: clamp(20px, 5vw, 32px);
	}

	.front-why__figure,
	.front-why__item--reverse .front-why__figure {
		justify-self: center;
		max-width: min(360px, 100%);
		padding: 6px 8px 0 0;
	}

	.front-why h3.front-why__title {
		font-size: clamp(16px, 4.4vw, 20px);
		margin-bottom: clamp(10px, 2.5vw, 14px);
		text-align: center;
	}

	.front-why__text {
		font-size: clamp(14px, 3.4vw, 16px);
		line-height: 1.4;
		text-align: center;
		max-width: none;
	}

	.front-why__item:not(.front-why__item--reverse) .front-why__frame,
	.front-about__frame {
		top: 14px;
		right: auto;
		bottom: -7px;
		left: -8px;
		width: 97%;
		height: auto;
		aspect-ratio: unset;
		box-sizing: border-box;
	}

	.front-why__item--reverse .front-why__frame {
		top: -2px;
		right: auto;
		bottom: 8px;
		left: -8px;
		width: 97%;
		height: auto;
		aspect-ratio: unset;
		box-sizing: border-box;
	}

	/* ------------------------------------------------------------------
	   Audience
	   ------------------------------------------------------------------ */
	.front-audience {
		padding-block: clamp(48px, 10vw, 88px);
	}

	.front-audience p.front-audience__lead {
		margin-bottom: clamp(28px, 6vw, 40px);
		font-size: clamp(17px, 4.2vw, 24px);
		padding-inline: clamp(0px, 2vw, 16px);
	}

	.front-audience__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: clamp(24px, 5vw, 32px) clamp(16px, 4vw, 28px);
		width: 100%;
		max-width: 560px;
		margin-inline: auto;
	}

	.front-audience__icon-wrap {
		width: clamp(80px, 22vw, 108px);
		height: clamp(80px, 22vw, 108px);
	}

	.front-audience__label {
		font-size: clamp(14px, 3.2vw, 16px);
		max-width: none;
	}

	/* ------------------------------------------------------------------
	   Process — вертикальний список
	   ------------------------------------------------------------------ */
	.front-process {
		min-height: 0;
		padding-block: clamp(40px, 8vw, 64px) 0;
	}

	.front-process__flow {
		min-height: 0;
		max-width: 520px;
		margin-inline: auto;
		padding-bottom: 0;
		margin-bottom: clamp(28px, 6vw, 44px);
	}

	.front-process__flow-img {
		display: none !important;
	}

	.front-process__steps {
		display: flex;
		flex-direction: column;
		gap: clamp(20px, 4.5vw, 28px);
		min-height: 0;
	}

	.front-process__step {
		position: static;
		left: auto;
		top: auto;
		flex-direction: row;
		align-items: center;
		gap: clamp(14px, 3.5vw, 20px);
		width: 100%;
		max-width: none;
		transform: none;
		text-align: left;
		padding: clamp(12px, 3vw, 16px) clamp(14px, 3.5vw, 20px);
		border: 1px solid rgba(198, 161, 91, 0.45);
		background: #fff;
	}

	.front-process__icon-wrap {
		flex: 0 0 auto;
		width: clamp(48px, 12vw, 60px);
		height: clamp(40px, 10vw, 52px);
	}

	.front-process p.front-process__label {
		flex: 1;
		font-size: clamp(15px, 3.8vw, 20px);
		white-space: normal;
		color: var(--front-gold);
	}

	.front-process__bottom-line {
		margin-top: 0;
		width: 100%;
		margin-inline: 0;
		height: 1px;
	}

	/* ------------------------------------------------------------------
	   Location
	   ------------------------------------------------------------------ */
	.front-location {
		padding-block: clamp(36px, 8vw, 56px);
	}

	.front-location p.front-location__text {
		font-size: clamp(14px, 3.4vw, 16px);
		margin-bottom: clamp(20px, 5vw, 32px);
	}

	/* ------------------------------------------------------------------
	   CTA
	   ------------------------------------------------------------------ */
	.front-cta {
		padding-block: clamp(48px, 10vw, 80px);
	}

	.front-cta__inner {
		gap: clamp(20px, 5vw, 28px);
	}

	.front-cta__title {
		font-size: clamp(24px, 5.8vw, 36px);
	}

	.front-page p.front-cta__lead {
		font-size: clamp(15px, 3.6vw, 18px);
		max-width: min(420px, 100%);
		line-height: 1.35;
	}

	.front-btn,
	.front-btn--brief {
		min-width: min(100%, 280px);
		min-height: clamp(56px, 14vw, 64px);
		font-size: clamp(14px, 3.4vw, 17px);
	}

	/* ------------------------------------------------------------------
	   Footer
	   ------------------------------------------------------------------ */
	.front-footer {
		padding-block: 0 clamp(32px, 6vw, 48px);
	}

	.front-footer__top {
		padding-block: clamp(32px, 7vw, 48px) clamp(24px, 5vw, 36px);
	}

	.front-footer__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(24px, 5vw, 36px);
	}

	.front-footer__col--brand {
		grid-column: 1 / -1;
	}

	.front-footer__heading {
		margin-bottom: 14px;
		font-size: clamp(16px, 3.8vw, 19px);
	}

	.front-footer__text,
	.front-footer__link {
		font-size: clamp(14px, 3.4vw, 17px);
	}

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

	.front-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding-top: clamp(20px, 4vw, 28px);
	}

	.front-footer__copy {
		font-size: clamp(13px, 3.2vw, 16px);
	}

	.front-footer__legal {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.front-footer__scroll-top {
		width: clamp(44px, 11vw, 51px);
		height: clamp(44px, 11vw, 51px);
		right: var(--front-gutter);
		bottom: clamp(16px, 4vw, 28px);
	}
}

/* ==========================================================================
   ≤768px — телефони landscape / малі планшети
   ========================================================================== */
@media (max-width: 768px) {
	.front-audience__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-width: 420px;
		gap: 24px 20px;
	}

	.front-hero__title {
		font-size: clamp(22px, 6.4vw, 32px);
	}
}

/* ==========================================================================
   ≤480px — телефони portrait
   ========================================================================== */
@media (max-width: 480px) {
	:root {
		--front-header-h: 64px;
		--front-gutter: 16px;
	}

	.front-section-head__title {
		min-height: 52px;
		padding: 10px 18px;
		font-size: clamp(22px, 6.5vw, 28px);
	}

	.front-section-head__title::before {
		top: 5px;
		left: -5px;
	}

	.front-section-head__title::after {
		top: -5px;
		left: 5px;
	}

	.front-header__logo img {
		width: 72px;
	}

	.front-header__burger {
		width: 40px;
		height: 40px;
	}

	.front-hero__arrow {
		width: 34px;
		height: 44px;
	}

	.front-hero__arrow svg {
		width: 10px;
		height: 20px;
	}

	.front-hero__dots {
		bottom: 10px;
		gap: 12px;
	}

	.front-hero__dot {
		width: 6px;
		height: 6px;
	}

	.front-audience__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 100%;
		gap: 20px 16px;
	}

	.front-audience__icon-wrap {
		width: clamp(72px, 28vw, 88px);
		height: clamp(72px, 28vw, 88px);
	}

	.front-audience__label {
		font-size: 14px;
	}

	.front-footer__columns {
		grid-template-columns: 1fr;
	}

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

@media (prefers-reduced-motion: reduce) {
	.front-header__burger-bar,
	.front-header__nav,
	.front-header__nav a,
	.front-header__backdrop,
	.front-hero__track {
		transition: none;
	}

	.front-header__nav a.front-header__link,
	.front-header a.front-header__cta--mobile {
		opacity: 1;
		transform: none;
	}
}