/**
 * Craftory Box — light theme + home layout polish (Figma 1440 «Головна»).
 *
 * Tokens from Figma:
 *   gold  #C6A15B  | black #111214 | gray #A4A4A4
 *   header shadow: y:8, blur:17.7, rgba(0,0,0,0.29)
 *   strokes: 2px gold (CTA, footer lines)
 *   Y-rhythm: header 89 → pretitle 137 → title 176 → slider 303
 *             → about 848 → services ~1050 → footer line 1715
 */

/* ==========================================================================
   Header — light + Figma drop shadow
   ========================================================================== */
.front-header {
	background: #fff;
	color: var(--front-black);
	border-bottom: 0;
	/* Figma Group 1576 DROP_SHADOW: offset Y 8, radius 17.7, opacity 0.29 */
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.29);
}

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

.front-header a.front-header__link {
	color: var(--front-black);
}

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

/* Figma Frame 173 strokeWeight: 2 */
.front-header a.front-header__cta--desktop {
	border-width: 2px;
	color: var(--front-black);
}

.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);
}

/* ==========================================================================
   Footer — light, 2px gold lines (Figma Vector 1972 / 1976)
   ========================================================================== */
.front-footer {
	background: #fff;
	color: var(--front-black);
	border-top: 2px solid var(--front-gold);
	padding-block: 0 24px;
}

.front-footer__top {
	/* Figma: line y1715 → columns y1776 ≈ 61px */
	padding-block: 48px 36px;
}

.front-footer__heading {
	margin-bottom: 18px;
	color: var(--front-black);
}

.front-footer__list {
	gap: 10px;
}

.front-footer__bottom {
	padding-top: 20px;
}

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

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

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

.front-footer__list a.front-footer__link:hover,
.front-footer__list a.front-footer__link:focus-visible {
	color: var(--front-black);
}

/* Figma brief button strokeWeight: 2 */
.front-footer .front-btn {
	border-width: 2px;
	color: var(--front-black);
}

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

.front-footer__divider {
	height: 2px;
	background: var(--front-gold);
}

.front-footer__copy,
.front-footer__legal .front-footer__link {
	color: var(--front-gray);
}

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

/* ==========================================================================
   Home — horizontal axes (Figma: logo ~175, pretitle ~129, title ~101, about ~115)
   ========================================================================== */
@media (min-width: 1201px) {
	/* Шапка/футер трохи глибше від краю — «преміальний» inset як у макеті */
	body.home .front-header .front-container,
	body.home .front-footer .front-container {
		padding-inline: clamp(80px, 12vw, 175px);
	}

	/* Контент лівіше логотипа: pretitle/about ≈ 115–129 */
	body.home .front-hero__intro.front-container,
	body.home .front-about__inner.front-container {
		padding-inline-start: clamp(60px, 8vw, 129px);
		padding-inline-end: clamp(60px, 12vw, 175px);
	}

	/* Title ще лівіше за pretitle (Figma 101 vs 129 ≈ −28px) */
	body.home .front-hero__title {
		margin-inline-start: -28px;
		transform: none;
	}
}

@media (max-width: 1200px) and (min-width: 1001px) {
	body.home .front-hero__intro.front-container,
	body.home .front-about__inner.front-container {
		padding-inline-start: clamp(24px, 4vw, 60px);
	}

	body.home .front-hero__title {
		margin-inline-start: 0;
		transform: none;
	}
}

/* ==========================================================================
   Home — vertical rhythm (Figma Y-deltas, підчищені від «порожнечі»)
   ========================================================================== */
body.home .front-hero__intro {
	/* 137 − 89 = 48px зверху; до слайдера ≈ 25px */
	padding-block: clamp(36px, 3.5vw, 48px) clamp(20px, 2vw, 28px);
}

body.home .front-hero__pretitle {
	/* 176 − (137 + 19) = 20px до H1 */
	margin: 0 0 clamp(12px, 1.4vw, 20px);
}

body.home .front-about {
	/* після слайдера ≈ 60px; до services ≈ 48px */
	padding-block: clamp(48px, 5vw, 64px) clamp(36px, 4vw, 52px);
}

body.home .front-services {
	padding-block: clamp(36px, 4vw, 52px) clamp(56px, 6vw, 88px);
}

body.home .front-services .front-section-head {
	margin-bottom: clamp(28px, 3vw, 40px);
}

body.home .front-services__list-wrap {
	margin-bottom: clamp(32px, 4vw, 48px);
}

body.home .front-services__list {
	gap: clamp(16px, 1.8vw, 24px);
}

/* Figma bullet ≈ logo mark 17×15 */
body.home .front-services__marker {
	width: 16px;
	height: 16px;
}

body.home .front-services__footnote.front-container {
	margin-top: 0;
	font-size: clamp(16px, 1.5vw, 20px);
	line-height: 1.35;
}

body.home .front-about p.front-about__text {
	line-height: 1.35;
	color: var(--front-black);
}

body.home .front-about a.front-about__link {
	text-underline-offset: 3px;
}

/* ==========================================================================
   Mobile menu — light panel
   ========================================================================== */
@media (max-width: 1000px) {
	.front-header__burger-bar {
		background: var(--front-black);
	}

	.front-header__nav {
		background: #fff;
		box-shadow: -10px 0 40px rgba(0, 0, 0, 0.14);
	}

	.front-header__nav a.front-header__link {
		color: var(--front-black);
		border-bottom: 1px solid rgba(17, 18, 20, 0.08);
	}

	.front-header a.front-header__cta--mobile {
		border-width: 2px;
		color: var(--front-black);
	}

	body.home .front-hero__intro.front-container,
	body.home .front-about__inner.front-container {
		padding-inline: var(--front-gutter);
	}

	body.home .front-hero__title {
		margin-inline-start: 0;
		transform: none;
	}

	body.home .front-hero__intro {
		padding-block: clamp(28px, 5vw, 40px) clamp(18px, 3.5vw, 28px);
	}

	body.home .front-hero__pretitle {
		margin-bottom: clamp(8px, 2vw, 14px);
	}

	body.home .front-about {
		padding-block: clamp(36px, 7vw, 48px) clamp(28px, 5vw, 40px);
	}

	body.home .front-services {
		padding-block: clamp(28px, 5vw, 40px) clamp(48px, 10vw, 72px);
	}
}

@media (max-width: 480px) {
	.front-header__logo img {
		width: 96px;
		max-height: 54px;
	}
}