/* ==========================================================================
   Lykati Vitrine — styles
   Tokens repris du Design System Lykati (palette, échelle, rayons, ombres).
   ========================================================================== */

:root {
	--c-primary: #0A4D2E;
	--c-secondary: #2D8551;
	--c-accent: #D4A017;
	--c-bg: #F2F7F4;
	--c-text: #052617;
	--c-muted: #6B7280;
	--c-border: #E5E7EB;
	--c-surface: #FFFFFF;
	--c-success: #22C55E;
	--c-error: #DC2626;
	--c-deep: #073A22;           /* vert plus profond pour le hero */
	--c-on-dark: #E6F0EA;        /* texte clair sur fond vert */
	--c-on-dark-muted: #A9C6B5;

	--font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--s-xs: 4px; --s-sm: 8px; --s-md: 12px; --s-lg: 16px; --s-xl: 24px;
	--s-2xl: 32px; --s-3xl: 48px; --s-4xl: 64px; --s-5xl: 96px;

	--r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 9999px;

	--sh-sm: 0 2px 4px rgba(5, 38, 23, 0.06);
	--sh-md: 0 4px 12px rgba(5, 38, 23, 0.08);
	--sh-lg: 0 24px 48px rgba(2, 20, 11, 0.35);

	--wrap: 1160px;
	--measure: 68ch;
}

/* ---------- Base ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.55;
	color: var(--c-text);
	background: var(--c-surface);
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--c-secondary); text-underline-offset: 3px; }
a:hover { color: var(--c-primary); }

:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 var(--s-lg); color: var(--c-text); }
h1 { font-weight: 700; }
h2, h3 { font-weight: 600; }
p { margin: 0 0 var(--s-lg); }

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--s-xl);
}

.screen-reader-text, .hp-field {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: var(--s-lg);
	top: -100px;
	z-index: 100;
	background: var(--c-accent);
	color: var(--c-text);
	padding: var(--s-sm) var(--s-lg);
	border-radius: var(--r-md);
	font-weight: 600;
}
.skip-link:focus { top: var(--s-lg); }

.site-main:focus { outline: none; }

/* ---------- Boutons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s-sm);
	min-height: 48px;
	padding: 0 var(--s-xl);
	border: 0;
	border-radius: var(--r-md);
	font: 500 16px/1 var(--font);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 18px; height: 18px; }

.btn-gold, .btn-gold:hover { background: var(--c-accent); color: var(--c-text); }
.btn-gold:hover { background: #E2B12B; }

.btn-primary, .btn-primary:hover { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-secondary); }

.btn-dark, .btn-dark:hover { background: var(--c-text); color: #fff; }
.btn-dark:hover { background: var(--c-primary); }

.btn-light { background: transparent; color: var(--c-on-dark); box-shadow: inset 0 0 0 1.5px rgba(230, 240, 234, .45); }
.btn-light:hover { color: #fff; box-shadow: inset 0 0 0 1.5px var(--c-accent); }

.admin-hint {
	font-size: 13px;
	padding: var(--s-sm) var(--s-md);
	border: 1px dashed var(--c-accent);
	border-radius: var(--r-sm);
	color: inherit;
	max-width: 42ch;
}

/* ---------- En-tête ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, .96);
	border-bottom: 1px solid var(--c-border);
	backdrop-filter: saturate(1.2) blur(8px);
}
.is-front .site-header {
	background: var(--c-deep);
	border-bottom-color: rgba(255, 255, 255, .08);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-xl);
	min-height: 72px;
}

.brand .custom-logo { max-height: 44px; width: auto; display: block; }

.text-logo {
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -0.02em;
	text-decoration: none;
}
.text-logo .logo-a { color: var(--c-primary); }
.text-logo .logo-b { color: var(--c-accent); }
.is-front .site-header .text-logo .logo-a,
.site-footer .text-logo .logo-a { color: #fff; }

.site-nav { display: flex; align-items: center; gap: var(--s-2xl); }

.primary-nav .menu,
.footer-legal .menu,
.lang-switch ul { list-style: none; margin: 0; padding: 0; }

.primary-nav .menu { display: flex; gap: var(--s-xs); }
.primary-nav a {
	display: block;
	padding: var(--s-sm) var(--s-md);
	border-radius: var(--r-sm);
	font-weight: 500;
	font-size: 15px;
	color: var(--c-text);
	text-decoration: none;
}
.primary-nav a:hover { background: var(--c-bg); color: var(--c-primary); }
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a { color: var(--c-primary); box-shadow: inset 0 -2px 0 var(--c-accent); border-radius: 0; }

.is-front .site-header .primary-nav a { color: var(--c-on-dark); }
.is-front .site-header .primary-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.is-front .site-header .primary-nav .current-menu-item > a { color: #fff; }

/* Sous-menus */
.primary-nav li { position: relative; }
.primary-nav .sub-menu {
	position: absolute;
	top: 100%; left: 0;
	min-width: 220px;
	list-style: none;
	margin: 0; padding: var(--s-sm);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-md);
	opacity: 0; visibility: hidden;
	transition: opacity .15s ease;
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; }
.is-front .site-header .primary-nav .sub-menu a { color: var(--c-text); }

/* Sélecteur de langue */
.lang-switch ul {
	display: inline-flex;
	padding: 3px;
	border-radius: var(--r-full);
	background: var(--c-bg);
}
.lang-switch a {
	display: block;
	min-width: 40px;
	padding: 6px 10px;
	border-radius: var(--r-full);
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	color: var(--c-muted);
}
.lang-switch a[aria-current="true"] { background: var(--c-primary); color: #fff; }
.is-front .site-header .lang-switch ul { background: rgba(255, 255, 255, .08); }
.is-front .site-header .lang-switch a { color: var(--c-on-dark-muted); }
.is-front .site-header .lang-switch a[aria-current="true"] { background: var(--c-accent); color: var(--c-text); }

.nav-toggle {
	display: none;
	width: 44px; height: 44px;
	align-items: center; justify-content: center;
	border: 0; border-radius: var(--r-md);
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.is-front .nav-toggle { color: #fff; }
.nav-toggle-close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-close { display: inline-flex; }

/* ---------- Hero ---------- */

.hero {
	position: relative;
	background: var(--c-deep);
	color: var(--c-on-dark);
	overflow: hidden;
}
.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	align-items: center;
	gap: var(--s-3xl);
	padding-block: var(--s-4xl) var(--s-5xl);
}
.hero-title {
	color: #fff;
	font-size: clamp(34px, 5.2vw, 58px);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.06;
	max-width: 15ch;
	margin-bottom: var(--s-xl);
}
.hero-text {
	font-size: 18px;
	line-height: 1.6;
	max-width: 46ch;
	color: var(--c-on-dark);
	margin-bottom: var(--s-2xl);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-md); }
.hero-actions .btn { min-height: 56px; padding-inline: var(--s-2xl); font-size: 17px; }
.hero-note { margin-top: var(--s-lg); font-size: 14px; color: var(--c-on-dark-muted); }
.hero .admin-hint { border-color: var(--c-accent); }

.hero-visual {
	position: relative;
	min-height: 520px;
}
.route-map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.route-map .streets path { fill: none; stroke: rgba(230, 240, 234, .07); stroke-width: 10; }
.route-map .streets .street-major { stroke: rgba(230, 240, 234, .11); stroke-width: 18; }
.route-map .route {
	fill: none;
	stroke: var(--c-accent);
	stroke-width: 4;
	stroke-linecap: round;
}
.route-map .pin circle { fill: var(--c-accent); stroke: var(--c-deep); stroke-width: 4; }
.route-map .pin-a circle { fill: #fff; }
.route-map .pin text { font: 700 14px var(--font); fill: var(--c-text); }

/* Le trajet se dessine une fois, au chargement. */
@media (prefers-reduced-motion: no-preference) {
	.route-map .route {
		stroke-dasharray: 900;
		stroke-dashoffset: 900;
		animation: lykati-route 1.6s cubic-bezier(.6, .1, .3, 1) .3s forwards;
	}
	.route-map .pin-b { opacity: 0; animation: lykati-pin .3s ease 1.8s forwards; }
}
@keyframes lykati-route {
	to { stroke-dashoffset: 0; }
}
@keyframes lykati-pin {
	to { opacity: 1; }
}

.phone {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-40%, -48%) rotate(-3deg);
	width: 272px;
	padding: 10px;
	border-radius: 38px;
	background: #02160C;
	box-shadow: var(--sh-lg), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.phone-screen {
	border-radius: 30px;
	background: var(--c-bg);
	color: var(--c-text);
	padding: var(--s-xl) var(--s-lg) var(--s-lg);
}
.phone-screen p { margin: 0; }
.phone-title { font-weight: 700; font-size: 17px; margin-bottom: var(--s-lg) !important; }

.stop {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: var(--s-md);
	padding: var(--s-md);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
}
.stop-dot {
	width: 28px; height: 28px;
	display: grid; place-items: center;
	border-radius: var(--r-full);
	font-size: 12px; font-weight: 700;
}
.stop-a { background: var(--c-primary); color: #fff; }
.stop-b { background: var(--c-accent); color: var(--c-text); }
.stop-label { font-size: 11px; color: var(--c-muted); font-weight: 500; }
.stop-path { font-size: 14px; font-weight: 600; }
.stop-path span { color: var(--c-muted); font-weight: 400; padding-inline: 2px; }
.stop-landmark { font-size: 12px; color: var(--c-secondary); }
.stop-link {
	width: 2px; height: 14px;
	margin-left: 26px;
	background: repeating-linear-gradient(var(--c-muted) 0 3px, transparent 3px 6px);
}
.quote {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-sm);
	margin-top: var(--s-lg);
	padding: var(--s-md);
	border-radius: var(--r-lg);
	background: var(--c-primary);
	color: #fff;
}
.quote-price { font-weight: 700; font-size: 18px; }
.quote-meta { font-size: 11px; color: var(--c-on-dark-muted); }
.quote-btn {
	padding: 8px 12px;
	border-radius: var(--r-md);
	background: var(--c-accent);
	color: var(--c-text);
	font-weight: 600;
	font-size: 13px;
}

/* ---------- Sections ---------- */

.section-title {
	font-size: clamp(26px, 3.2vw, 36px);
	font-weight: 700;
	letter-spacing: -0.02em;
	max-width: 22ch;
}

/* Étapes : une vraie séquence, reliée par un pointillé comme un trajet. */
.steps { padding-block: var(--s-5xl) var(--s-4xl); }
.step-list {
	list-style: none;
	margin: var(--s-3xl) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-2xl);
	position: relative;
}
.step-list::before {
	content: "";
	position: absolute;
	top: 22px;
	left: 22px;
	right: calc(33.33% - 22px);
	border-top: 2px dashed var(--c-border);
}
.step { position: relative; }
.step-num {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	margin-bottom: var(--s-xl);
	border-radius: var(--r-full);
	background: var(--c-surface);
	border: 2px solid var(--c-primary);
	color: var(--c-primary);
	font-weight: 700;
}
.step:last-child .step-num { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-text); }
.step h3 { font-size: 20px; margin-bottom: var(--s-sm); }
.step p { color: var(--c-muted); max-width: 34ch; margin: 0; }

/* Services : liste à deux colonnes, séparée par des filets. */
.services { background: var(--c-bg); padding-block: var(--s-5xl); }
.services-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: var(--s-3xl);
	align-items: start;
}
.service-list {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--s-2xl);
}
.service {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: var(--s-lg);
	padding-block: var(--s-xl);
	border-top: 1px solid #D5E3DA;
}
.service-icon {
	display: grid; place-items: center;
	width: 44px; height: 44px;
	border-radius: var(--r-md);
	background: var(--c-surface);
	color: var(--c-primary);
	box-shadow: var(--sh-sm);
}
.service h3 { font-size: 17px; margin-bottom: var(--s-xs); }
.service p { margin: 0; font-size: 15px; color: var(--c-muted); }

/* Bandeau pro : la seule surface or du site. */
.pro-band { background: var(--c-accent); color: var(--c-text); }
.pro-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-2xl);
	padding-block: var(--s-3xl);
}
.pro-inner h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -0.015em; max-width: 26ch; margin-bottom: var(--s-sm); }
.pro-inner p { margin: 0; max-width: 60ch; }
.pro-inner .btn { flex-shrink: 0; }

.front-content { padding-block: var(--s-4xl); }

.download-band { background: var(--c-primary); color: var(--c-on-dark); }
.download-inner {
	padding-block: var(--s-5xl);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.download-inner h2 { color: #fff; font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -0.02em; font-weight: 700; }
.download-inner p { max-width: 50ch; margin-bottom: var(--s-2xl); }
.download-inner .btn { min-height: 56px; padding-inline: var(--s-2xl); font-size: 17px; }

/* ---------- Pages ---------- */

.page-header {
	background: var(--c-bg);
	border-bottom: 1px solid var(--c-border);
	padding-block: var(--s-4xl) var(--s-3xl);
	margin-bottom: var(--s-3xl);
}
.page-title {
	font-size: clamp(30px, 4vw, 44px);
	letter-spacing: -0.02em;
	margin: 0;
	max-width: 24ch;
}
.page-lead { font-size: 18px; color: var(--c-muted); max-width: 60ch; margin: var(--s-md) 0 0; }
.page-meta { font-size: 14px; color: var(--c-muted); margin: var(--s-sm) 0 0; }
.page-cover { margin-bottom: var(--s-2xl); }
.page-cover img { border-radius: var(--r-lg); }

.prose { padding-bottom: var(--s-5xl); }
.prose > * { max-width: var(--measure); }
.prose h2 { font-size: 24px; margin-top: var(--s-3xl); scroll-margin-top: 96px; }
.prose h3 { font-size: 19px; margin-top: var(--s-2xl); }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 var(--s-lg); }
.prose li { margin-bottom: var(--s-sm); }
.prose li::marker { color: var(--c-secondary); }
.prose img { border-radius: var(--r-lg); }
.prose .alignwide, .prose .alignfull { max-width: none; }

.legal-grid {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--s-3xl);
	align-items: start;
}
.legal-grid > .prose:only-child { grid-column: 1 / -1; }
.toc {
	position: sticky;
	top: 96px;
	padding: var(--s-lg);
	border-left: 3px solid var(--c-accent);
	background: var(--c-bg);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	font-size: 14px;
}
.toc-title { font-weight: 600; margin-bottom: var(--s-sm); }
.toc ol { margin: 0; padding-left: 1.1em; }
.toc li { margin-bottom: 6px; }
.toc a { color: var(--c-text); text-decoration: none; }
.toc a:hover { color: var(--c-secondary); text-decoration: underline; }

/* Formulaire */
.lykati-form {
	max-width: 560px;
	padding: var(--s-xl);
	margin-block: var(--s-xl);
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
}
.lykati-form .field { margin-bottom: var(--s-lg); }
.lykati-form label { display: block; font-weight: 500; font-size: 14px; margin-bottom: 6px; }
.lykati-form input[type="text"],
.lykati-form input[type="tel"],
.lykati-form input[type="email"],
.lykati-form select,
.lykati-form textarea {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	font: 400 16px var(--font);
	color: var(--c-text);
	background: var(--c-surface);
	border: 1px solid #CBD5D0;
	border-radius: var(--r-md);
}
.lykati-form textarea { min-height: 110px; resize: vertical; }
.lykati-form input:focus, .lykati-form select:focus, .lykati-form textarea:focus {
	outline: none;
	border-color: var(--c-secondary);
	box-shadow: 0 0 0 3px rgba(45, 133, 81, .2);
}
.field-check { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-md); align-items: start; }
.field-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--c-primary); }
.field-check label { font-weight: 400; margin: 0; }

.notice { max-width: 560px; padding: var(--s-lg); border-radius: var(--r-md); margin-block: var(--s-xl); }
.notice p { margin: 0; }
.notice-success { background: #E8F7EE; border-left: 4px solid var(--c-success); }
.notice-error { background: #FDECEC; border-left: 4px solid var(--c-error); }

.contact-card {
	max-width: 520px;
	padding: var(--s-xl);
	background: var(--c-bg);
	border-radius: var(--r-lg);
}
.contact-list { list-style: none !important; margin: 0; padding: 0 !important; }
.contact-list li {
	display: flex;
	align-items: center;
	gap: var(--s-md);
	margin-bottom: var(--s-md);
}
.contact-list .icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--c-secondary); }

.post-list { list-style: none; padding: 0 !important; }
.post-list li { display: flex; justify-content: space-between; gap: var(--s-lg); padding-block: var(--s-md); border-bottom: 1px solid var(--c-border); }
.post-date { color: var(--c-muted); font-size: 14px; white-space: nowrap; }

.not-found { padding-block: var(--s-5xl); }
.not-found-code { font-size: 96px; font-weight: 700; line-height: 1; color: var(--c-accent); margin-bottom: var(--s-lg); }
.not-found p { max-width: 52ch; }

/* ---------- Pied de page ---------- */

.site-footer {
	background: #031A0F;
	color: var(--c-on-dark-muted);
	font-size: 15px;
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: var(--s-3xl);
	padding-block: var(--s-4xl) var(--s-3xl);
}
.footer-about p { max-width: 40ch; margin: var(--s-lg) 0 var(--s-xl); }
.footer-title { color: #fff; font-size: 15px; font-weight: 600; margin-bottom: var(--s-lg); }
.site-footer a { color: var(--c-on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--c-accent); text-decoration: underline; }
.site-footer .contact-list .icon { color: var(--c-accent); }
.footer-legal .menu li { margin-bottom: var(--s-sm); }
.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-lg);
	padding-block: var(--s-xl);
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: 13px;
}
.footer-bottom p { margin: 0; }
.site-footer .lang-switch ul { background: rgba(255, 255, 255, .06); }
.site-footer .lang-switch a { color: var(--c-on-dark-muted); }
.site-footer .lang-switch a[aria-current="true"] { background: var(--c-accent); color: var(--c-text); text-decoration: none; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
	.hero-grid { grid-template-columns: 1fr; padding-block: var(--s-3xl) 0; gap: var(--s-xl); }
	.hero-visual { min-height: 460px; margin-inline: calc(var(--s-xl) * -1); }
	.phone { transform: translate(-50%, -50%) rotate(-3deg); }
	.services-grid { grid-template-columns: 1fr; gap: var(--s-lg); }
	.legal-grid { grid-template-columns: 1fr; gap: var(--s-xl); }
	.toc { position: static; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.footer-about { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
	.nav-toggle { display: inline-flex; }
	.site-nav {
		display: none;
		position: absolute;
		top: 100%; left: 0; right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: var(--s-lg);
		padding: var(--s-lg) var(--s-xl) var(--s-xl);
		background: var(--c-surface);
		border-bottom: 1px solid var(--c-border);
		box-shadow: var(--sh-md);
	}
	.is-front .site-nav { background: var(--c-deep); border-bottom-color: rgba(255, 255, 255, .08); }
	.site-nav.is-open { display: flex; }
	.primary-nav .menu { flex-direction: column; }
	.primary-nav a { padding: var(--s-md) var(--s-sm); font-size: 17px; }
	.primary-nav .sub-menu { position: static; opacity: 1; visibility: visible; box-shadow: none; border: 0; padding: 0 0 0 var(--s-lg); background: transparent; }
	.is-front .site-header .primary-nav .sub-menu a { color: var(--c-on-dark); }
	.primary-nav .current-menu-item > a { box-shadow: inset 3px 0 0 var(--c-accent); }
}

@media (max-width: 720px) {
	.wrap { padding-inline: var(--s-lg); }
	.hero-text { font-size: 17px; }
	.step-list { grid-template-columns: 1fr; gap: var(--s-xl); }
	.step-list::before { top: 22px; bottom: 22px; left: 21px; right: auto; border-top: 0; border-left: 2px dashed var(--c-border); }
	.step { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--s-lg); }
	.step-num { grid-row: span 2; margin: 0; }
	.service-list { grid-template-columns: 1fr; }
	.pro-inner { flex-direction: column; align-items: flex-start; }
	.footer-grid { grid-template-columns: 1fr; gap: var(--s-2xl); }
	.footer-bottom { flex-direction: column; align-items: flex-start; }
	.steps, .services { padding-block: var(--s-4xl); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}