/* =========================================================
   Page / Layout helpers
   ========================================================= */

.al-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--al-s-10);
	align-items: center;
}
@media (max-width: 920px) { .al-split { grid-template-columns: 1fr; } }

/* Variante "Su di me": testo più stretto e vicino alla foto */
.al-split--about {
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--al-s-6);
	align-items: start;
}
.al-split--about > div:first-child {
	max-width: 56ch;
}
.al-about__photo {
	aspect-ratio: 4/5;
	border-radius: var(--al-radius-xl);
	overflow: hidden;
}
.al-about__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (max-width: 920px) {
	.al-split--about { grid-template-columns: 1fr; gap: var(--al-s-6); }
	.al-split--about > div:first-child { max-width: none; }
}

/* Stats / counters — sezione che si sovrappone alla sezione precedente */
.al-stats-section {
	background: transparent;
	padding-top: 0;
	margin-top: calc(var(--al-s-10) * -1);
	position: relative;
	z-index: 2;
}
@media (max-width: 768px) {
	.al-stats-section { margin-top: calc(var(--al-s-6) * -1); }
}

.al-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--al-s-5);
	width: 100%;
}
.al-stat {
	background: #fff;
	border-radius: var(--al-radius-xl);
	padding: var(--al-s-8) var(--al-s-5);
	text-align: center;
	box-shadow: 0 4px 14px rgba(0,0,0,0.04);
	border: 1px solid var(--al-gray-100, #eee);
}
.al-stat__number {
	font-family: var(--al-font-display);
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 800;
	line-height: 1;
	color: var(--al-blue);
	margin-bottom: var(--al-s-3);
	letter-spacing: -0.02em;
	/* Evita sfarfallio durante l'animazione del counter:
	   tutte le cifre hanno la stessa larghezza */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}
.al-stat__label {
	font-size: var(--al-fs-base);
	color: var(--al-text-muted);
	font-weight: 500;
}
@media (max-width: 768px) {
	.al-stats { grid-template-columns: 1fr; gap: var(--al-s-4); }
	.al-stat { padding: var(--al-s-6) var(--al-s-4); }
}

/* Variante inline (homepage, dentro colonna bio) — stesso stile della pagina
   "Su di me" (card bianca con ombra, numero blu centrato), ma più compatta */
.al-stats--inline {
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--al-s-3);
	margin: var(--al-s-5) 0;
	max-width: 100%;
}
.al-stat--inline {
	padding: var(--al-s-5) var(--al-s-3);
}
.al-stat--inline .al-stat__number {
	font-size: clamp(1.75rem, 2.5vw, 2.25rem);
	margin-bottom: var(--al-s-2);
}
.al-stat--inline .al-stat__label {
	font-size: var(--al-fs-sm, 0.875rem);
	line-height: 1.3;
}
@media (max-width: 600px) {
	.al-stats--inline { grid-template-columns: 1fr; gap: var(--al-s-3); }
}

/* CV inline (dentro la colonna bio della pagina Chi sono) */
.al-cv-inline {
	display: flex;
	gap: var(--al-s-4);
	align-items: center;
	margin-top: var(--al-s-5);
	padding: var(--al-s-4);
	border: 1px solid var(--al-gray-200, #e0e0e0);
	border-radius: var(--al-radius-md);
	background: var(--al-surface-alt, #f7f7f5);
}
.al-cv-inline__text { flex: 1; min-width: 0; }
.al-cv-inline__text strong {
	display: block;
	font-family: var(--al-font-display);
	font-weight: 700;
	font-size: var(--al-fs-base);
	color: var(--al-ink);
	margin-bottom: 2px;
}
.al-cv-inline__text small {
	display: block;
	font-size: var(--al-fs-xs, 0.85rem);
	color: var(--al-text-muted);
	line-height: 1.4;
}
.al-cv-inline .al-btn { flex-shrink: 0; }
@media (max-width: 600px) {
	.al-cv-inline { flex-direction: column; align-items: flex-start; gap: var(--al-s-3); }
}

.al-section__head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: var(--al-s-6);
	margin-bottom: var(--al-s-8);
	flex-wrap: wrap;
}
.al-section__head h2 { margin: 0; }

/* Projects detail */
.al-project-hero {
	padding-block: var(--al-s-8) var(--al-s-6);
}
.al-project-hero__media {
	aspect-ratio: 16/9;
	border-radius: var(--al-radius-xl);
	overflow: hidden;
	background: var(--al-gray-50);
	margin-bottom: var(--al-s-6);
}
.al-project-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Testo descrittivo + pannello info laterale */
.al-project-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--al-s-8);
	align-items: start;
}
@media (max-width: 900px) {
	.al-project-split { grid-template-columns: 1fr; }
}
.al-project-split__text {
	font-size: var(--al-fs-lg);
	line-height: var(--al-lh-body);
}

.al-info-panel {
	position: sticky;
	top: var(--al-s-6);
	background: var(--al-gray-50);
	border-radius: var(--al-radius-lg);
	padding: var(--al-s-6);
	display: flex;
	flex-direction: column;
	gap: var(--al-s-4);
}
.al-info-panel__title {
	margin: 0 0 var(--al-s-2);
	font-size: var(--al-fs-base);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--al-text-muted);
	font-weight: 700;
}
.al-info-panel__block small {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: var(--al-fs-xs);
	color: var(--al-text-muted);
	margin-bottom: var(--al-s-2);
}
.al-info-panel__block strong {
	font-family: var(--al-font-display);
	font-size: var(--al-fs-lg);
	color: var(--al-ink);
	font-weight: 700;
}
.al-info-panel__block--inline {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--al-s-3);
}
.al-info-panel__block--inline small { margin-bottom: 0; }
.al-info-panel__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--al-s-2);
}
.al-info-panel__divider {
	height: 1px;
	background: var(--al-gray-100);
	margin-block: var(--al-s-2);
}

/* Planimetrie: grid pulita, sfondo bianco, centrate */
.al-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--al-s-4);
	margin-top: var(--al-s-5);
	max-width: 880px;
}
.al-plans__item {
	display: block;
	background: #fff;
	border: 1px solid var(--al-gray-100);
	border-radius: var(--al-radius-md);
	padding: var(--al-s-3);
	transition: transform var(--al-dur) var(--al-ease), box-shadow var(--al-dur) var(--al-ease);
	text-decoration: none;
	color: inherit;
}
.al-plans__item:hover,
.al-plans__item:focus,
.al-plans__item:focus-visible,
.al-plans__item:active {
	transform: translateY(-4px);
	border-color: var(--al-gray-100);
	outline: none;
}
.al-plans__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4/3;
	object-fit: contain;
	background: var(--al-gray-50);
	border-radius: var(--al-radius-sm);
}
.al-plans__caption {
	display: block;
	margin-top: var(--al-s-3);
	font-size: var(--al-fs-sm);
	color: var(--al-text-muted);
	text-align: center;
}
/* I <button> su .al-plans__item e .al-gallery__item: reset del browser button */
button.al-plans__item,
button.al-gallery__item {
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-align: left;
	appearance: none;
	-webkit-appearance: none;
	background: #fff;
}
button.al-plans__item { width: 100%; }
button.al-plans__item,
button.al-plans__item:hover,
button.al-plans__item:focus,
button.al-plans__item:focus-visible,
button.al-plans__item:active {
	background: #fff !important;
}

/* Annulla outline/border colorati su tutti gli stati delle planimetrie (ombra gestita separatamente) */
.al-plans__item,
.al-plans__item:hover,
.al-plans__item:focus,
.al-plans__item:focus-visible,
.al-plans__item:active,
.al-plans__item:focus-within,
.al-plans__item *,
.al-plans__item *:focus,
.al-plans__item *:focus-visible {
	outline: none !important;
}
.al-plans__item,
.al-plans__item:hover,
.al-plans__item:focus,
.al-plans__item:focus-visible,
.al-plans__item:active {
	border-color: var(--al-gray-100) !important;
}
/* Ombra leggera solo all'hover/focus (su device pointer) */
@media (hover: hover) {
	.al-plans__item:hover {
		box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.18);
	}
}
.al-plans__item:focus-visible {
	box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.18);
}
button.al-gallery__item { padding: 0; border: 0; background: var(--al-gray-50); width: auto; }

/* Lightbox overlay */
.al-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(26, 26, 26, 0.88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--al-s-6);
	opacity: 0;
	transition: opacity 220ms var(--al-ease);
}
.al-lightbox[hidden] { display: none; }
.al-lightbox.is-open { opacity: 1; }
.al-lightbox__figure {
	margin: 0;
	max-width: min(1400px, 96vw);
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--al-s-3);
}
.al-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 84vh;
	width: auto;
	height: auto;
	border-radius: var(--al-radius-md);
	box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
	background: #fff;
}
.al-lightbox__caption {
	color: #fff;
	font-size: var(--al-fs-sm);
	letter-spacing: 0.04em;
	opacity: 0.85;
	text-align: center;
}
.al-lightbox__caption[hidden] { display: none; }
.al-lightbox__close {
	position: absolute;
	top: var(--al-s-4);
	right: var(--al-s-4);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	color: var(--al-ink);
	border: 0;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 30px rgba(0,0,0,0.3);
	transition: transform var(--al-dur) var(--al-ease), background var(--al-dur) var(--al-ease);
}
.al-lightbox__close:hover { transform: rotate(90deg); background: var(--al-accent); color: var(--al-accent-contrast); }
.al-lightbox__close:focus-visible { outline: 3px solid var(--al-accent); outline-offset: 4px; }

/* Frecce prev / next */
.al-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #fff;
	color: var(--al-ink);
	border: 0;
	font-size: 36px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 30px rgba(0,0,0,0.3);
	transition: background var(--al-dur) var(--al-ease), color var(--al-dur) var(--al-ease), transform var(--al-dur) var(--al-ease);
	z-index: 2;
}
.al-lightbox__nav[hidden] { display: none; }
.al-lightbox__nav--prev { left: var(--al-s-4); }
.al-lightbox__nav--next { right: var(--al-s-4); }
.al-lightbox__nav:hover { background: var(--al-accent); color: var(--al-accent-contrast); }
.al-lightbox__nav--prev:hover { transform: translateY(-50%) translateX(-3px); }
.al-lightbox__nav--next:hover { transform: translateY(-50%) translateX(3px); }
.al-lightbox__nav:focus-visible { outline: 3px solid var(--al-accent); outline-offset: 4px; }
@media (max-width: 640px) {
	.al-lightbox__nav { width: 44px; height: 44px; font-size: 28px; }
	.al-lightbox__nav--prev { left: var(--al-s-2); }
	.al-lightbox__nav--next { right: var(--al-s-2); }
}

/* Slider Prima / Dopo */
.al-compare-list {
	display: flex;
	flex-direction: column;
	gap: var(--al-s-8);
	margin-top: var(--al-s-6);
}
.al-compare { margin: 0; }
.al-compare__label {
	font-family: var(--al-font-display);
	font-weight: 700;
	font-size: var(--al-fs-lg);
	margin-bottom: var(--al-s-3);
	color: var(--al-ink);
}
.al-compare__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	border-radius: var(--al-radius-lg);
	overflow: hidden;
	background: var(--al-gray-50);
	user-select: none;
	touch-action: pan-y;
	cursor: ew-resize;
}
.al-compare__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Il clip copre tutto lo stage, poi ritaglia con clip-path in base a --al-compare-pos */
.al-compare__clip {
	position: absolute;
	inset: 0;
	clip-path: inset(0 calc(100% - var(--al-compare-pos, 50%)) 0 0);
	transition: clip-path 40ms linear;
}
.al-compare__tag {
	position: absolute;
	top: var(--al-s-3);
	padding: 6px 12px;
	background: rgba(26,26,26,0.75);
	color: #fff;
	border-radius: 999px;
	font-size: var(--al-fs-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	pointer-events: none;
}
.al-compare__tag--before { left: var(--al-s-3); }
.al-compare__tag--after  { right: var(--al-s-3); }
.al-compare__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--al-compare-pos, 50%);
	width: 2px;
	background: #fff;
	border: 0;
	padding: 0;
	transform: translateX(-50%);
	cursor: ew-resize;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.15), 0 0 24px rgba(0,0,0,0.25);
	transition: left 40ms linear;
}
.al-compare__handle::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.al-compare__handle-arrows {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--al-font-display);
	font-weight: 700;
	color: var(--al-ink);
	font-size: 18px;
	letter-spacing: 4px;
	pointer-events: none;
	z-index: 1;
}
.al-compare__handle:focus-visible {
	outline: 3px solid var(--al-accent);
	outline-offset: 4px;
	border-radius: 2px;
}

.al-gallery-strip {
	position: relative;
	margin-block: var(--al-s-6);
}
.al-gallery {
	display: flex;
	align-items: center;
	gap: var(--al-s-3);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	padding: var(--al-s-3) var(--al-s-2);
	margin: 0;
	scrollbar-width: thin;
	scrollbar-color: var(--al-gray-200) transparent;
}
.al-gallery::-webkit-scrollbar { height: 6px; }
.al-gallery::-webkit-scrollbar-track { background: transparent; }
.al-gallery::-webkit-scrollbar-thumb { background: var(--al-gray-200); border-radius: 3px; }

.al-gallery__item {
	flex: 0 0 auto;
	height: 440px;
	width: auto;
	max-width: none;
	border-radius: var(--al-radius-md);
	overflow: hidden;
	background: var(--al-gray-50);
	position: relative;
	scroll-snap-align: start;
	padding: 0;
	border: 0;
	cursor: pointer;
	transition: transform var(--al-dur) var(--al-ease);
}
.al-gallery__item:hover { transform: translateY(-4px); }
.al-gallery__item img {
	height: 100% !important;
	width: auto !important;
	max-width: none !important;
	display: block;
	object-fit: cover;
}

/* Effetto mosaico: altezze variabili + allineamenti alternati */
.al-gallery__item:nth-child(3n+2) { height: 360px; align-self: flex-start; }
.al-gallery__item:nth-child(4n+3) { height: 400px; align-self: flex-end; }
.al-gallery__item:nth-child(5n+4) { height: 340px; align-self: center; }

.al-gallery__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--al-s-3);
	color: #fff;
	font-size: var(--al-fs-sm);
	font-weight: 500;
	text-align: left;
	background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--al-dur) var(--al-ease), transform var(--al-dur) var(--al-ease);
	pointer-events: none;
}
.al-gallery__item:hover .al-gallery__caption,
.al-gallery__item:focus-visible .al-gallery__caption {
	opacity: 1;
	transform: translateY(0);
}

/* Frecce scroll orizzontale */
.al-gallery-strip__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: var(--al-ink);
	border: 0;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(0,0,0,0.15);
	transition: background var(--al-dur) var(--al-ease), color var(--al-dur) var(--al-ease), transform var(--al-dur) var(--al-ease), opacity var(--al-dur) var(--al-ease);
}
.al-gallery-strip__nav:hover { background: var(--al-accent); color: var(--al-accent-contrast); }
.al-gallery-strip__nav--prev { left: -14px; }
.al-gallery-strip__nav--next { right: -14px; }
.al-gallery-strip__nav--prev:hover { transform: translateY(-50%) translateX(-2px); }
.al-gallery-strip__nav--next:hover { transform: translateY(-50%) translateX(2px); }
.al-gallery-strip__nav[hidden] { display: none; }
.al-gallery-strip__nav:focus-visible { outline: 3px solid var(--al-accent); outline-offset: 4px; }

@media (max-width: 768px) {
	.al-gallery__item { height: 300px; }
	.al-gallery__item:nth-child(3n+2) { height: 240px; }
	.al-gallery__item:nth-child(4n+3) { height: 270px; }
	.al-gallery__item:nth-child(5n+4) { height: 230px; }
	.al-gallery-strip__nav { width: 38px; height: 38px; font-size: 22px; }
	.al-gallery-strip__nav--prev { left: -4px; }
	.al-gallery-strip__nav--next { right: -4px; }
}

.al-project-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: var(--al-s-10);
	padding-top: var(--al-s-6);
	border-top: 1px solid var(--al-gray-100);
	gap: var(--al-s-4);
	flex-wrap: wrap;
}

/* CTA block */
.al-cta-block {
	background: var(--al-accent);
	color: var(--al-accent-contrast);
	border-radius: var(--al-radius-xl);
	padding: var(--al-s-10);
	text-align: center;
	transition: background var(--al-dur) var(--al-ease);
}
.al-cta-block h2 { color: inherit; }
.al-cta-block .al-btn--primary { background: var(--al-ink); color: #fff; }
.al-cta-block .al-btn--primary:hover { background: #fff; color: var(--al-ink); }

/* Persona switcher (homepage "chi sei tu?") */
.al-persona-switcher {
	display: flex; flex-wrap: wrap; gap: var(--al-s-3); justify-content: center;
	margin-top: var(--al-s-6);
}
.al-persona-switcher button {
	border: 2px solid var(--al-gray-100);
	background: transparent;
	padding: 0.7em 1.3em;
	border-radius: var(--al-radius-pill);
	font-family: var(--al-font-body);
	font-weight: 500;
	font-size: var(--al-fs-sm);
	cursor: pointer;
	transition: all var(--al-dur) var(--al-ease);
	color: var(--al-ink);
}
.al-persona-switcher button:hover { border-color: var(--al-ink); }
.al-persona-switcher button.is-active { background: var(--al-accent); color: var(--al-accent-contrast); border-color: var(--al-accent); }

/* =========================================================
   Contact form
   ========================================================= */
.al-section--contact { padding-block: var(--al-s-10); }

.al-contact {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: var(--al-s-10);
	align-items: start;
	scroll-margin-top: 100px;
}
@media (max-width: 900px) {
	.al-contact { grid-template-columns: 1fr; gap: var(--al-s-8); }
}

.al-contact__intro h2 { margin: var(--al-s-2) 0 var(--al-s-4); }
.al-contact__intro .al-lead { margin-bottom: var(--al-s-4); }

.al-contact__phone {
	margin: 0;
	font-size: var(--al-fs-md, 1rem);
	color: var(--al-text-muted, #555);
}
.al-contact__phone a {
	color: var(--al-blue);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	transition: opacity var(--al-dur) var(--al-ease);
}
.al-contact__phone a:hover { opacity: 0.7; }

.al-contact__channels {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--al-s-3);
}
.al-contact__channels li {
	display: grid;
	grid-template-columns: 90px 1fr;
	align-items: baseline;
	gap: var(--al-s-3);
	padding: var(--al-s-3) 0;
	border-bottom: 1px solid var(--al-gray-100);
}
.al-contact__channels span {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: var(--al-fs-xs);
	color: var(--al-text-muted);
}
.al-contact__channels a {
	font-family: var(--al-font-display);
	font-weight: 700;
	color: var(--al-ink);
	text-decoration: none;
	font-size: var(--al-fs-lg);
}
.al-contact__channels a:hover { color: var(--al-accent); }

/* Variante "info card": sostituisce il vecchio form con un blocco di contatti diretti */
.al-contact__card {
	background: var(--al-gray-50);
	border-radius: var(--al-radius-xl);
	padding: var(--al-s-8);
}
.al-contact__card .al-contact__channels li {
	border-bottom-color: var(--al-gray-200, #e5e5e5);
}
.al-contact__card .al-contact__channels li:last-child { border-bottom: 0; }

/* Riga "Social" — etichetta a sinistra, pillole social a destra */
.al-contact__channels-social {
	align-items: center !important;
}
.al-contact__socials {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--al-s-2, 0.5rem);
}
/* Reset: i <li> annidati ereditano lo stile di .al-contact__channels li
   (grid 90px 1fr + border-bottom), che qui non serve. */
.al-contact__socials > li {
	display: block;
	grid-template-columns: none;
	gap: 0;
	padding: 0;
	border: 0;
}
.al-contact__socials a {
	display: inline-flex;
	align-items: center;
	font-family: var(--al-font-display);
	font-weight: 600;
	font-size: var(--al-fs-base, 1rem);
	color: var(--al-ink);
	text-decoration: none;
	padding: 0.4em 0.9em;
	border: 1px solid var(--al-gray-200, #e5e5e5);
	border-radius: 999px;
	background: #fff;
	transition: background var(--al-dur) var(--al-ease), color var(--al-dur) var(--al-ease), border-color var(--al-dur) var(--al-ease);
}
.al-contact__socials a:hover {
	background: var(--al-accent);
	color: #fff;
	border-color: var(--al-accent);
}
@media (max-width: 520px) {
	.al-contact__channels-social { grid-template-columns: 1fr !important; }
}

.al-contact__form {
	background: var(--al-gray-50);
	border-radius: var(--al-radius-xl);
	padding: var(--al-s-8);
	display: flex;
	flex-direction: column;
	gap: var(--al-s-5);
}

.al-contact__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--al-s-5);
}
@media (max-width: 600px) {
	.al-contact__row { grid-template-columns: 1fr; }
}

.al-contact__field { display: flex; flex-direction: column; gap: var(--al-s-2); }
.al-contact__field > span {
	font-size: var(--al-fs-sm);
	font-weight: 500;
	color: var(--al-ink);
	letter-spacing: 0.02em;
}
.al-contact__field input,
.al-contact__field textarea {
	font: inherit;
	color: var(--al-ink);
	background: #fff;
	border: 1px solid var(--al-gray-100);
	border-radius: var(--al-radius-md);
	padding: 0.85em 1em;
	transition: border-color var(--al-dur) var(--al-ease), box-shadow var(--al-dur) var(--al-ease);
	width: 100%;
}
.al-contact__field textarea { resize: vertical; min-height: 140px; }
.al-contact__field input:focus,
.al-contact__field textarea:focus {
	outline: none;
	border-color: var(--al-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--al-accent) 22%, transparent);
}

.al-contact__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--al-s-3);
	font-size: var(--al-fs-sm);
	color: var(--al-text-muted);
	cursor: pointer;
}
.al-contact__consent input { margin-top: 3px; accent-color: var(--al-accent); }

.al-contact__hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.al-contact__alert {
	padding: var(--al-s-4) var(--al-s-5);
	border-radius: var(--al-radius-md);
	font-size: var(--al-fs-sm);
	line-height: var(--al-lh-body);
}
.al-contact__alert--ok {
	background: color-mix(in srgb, var(--al-teal, #1B5E4B) 12%, #fff);
	color: var(--al-ink);
	border: 1px solid color-mix(in srgb, var(--al-teal, #1B5E4B) 35%, transparent);
}
.al-contact__alert--err {
	background: color-mix(in srgb, #d14343 10%, #fff);
	color: #8a1f1f;
	border: 1px solid color-mix(in srgb, #d14343 35%, transparent);
}
.al-contact__alert a { color: inherit; font-weight: 600; }

.al-contact__form .al-btn { align-self: flex-start; margin-top: var(--al-s-2); }