.contacts-page { overflow-x: clip; }

.contacts-directory { padding: clamp(44px, 6vw, 88px) 0 clamp(84px, 10vw, 160px); }
.contacts-grid {
	margin-top: 0;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: 1px;
	background: var(--color-border);
	border: 1px solid var(--color-border);
}

.contact-card {
	display: flex;
	min-height: clamp(258px, 23vw, 340px);
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(28px, 3.2vw, 52px);
	background: rgba(17, 17, 20, .96);
	transition: background-color 260ms var(--ease-out), transform 260ms var(--ease-out);
}

.contact-card--general,
.contact-card--business { grid-column: span 6; }

.contact-card--map { grid-column: span 8; overflow: hidden; padding: 0; position: relative; }
.contact-card--address { grid-column: span 4; }

.contact-card__type {
	color: var(--color-text-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.2;
	text-transform: uppercase;
	transition: color 180ms var(--ease-out);
}

.contact-card__channels { display: grid; gap: 24px; margin-top: 54px; }

.contact-channel {
	display: grid;
	width: fit-content;
	gap: 7px;
	color: var(--color-text);
	transition: color 180ms var(--ease-out), transform 220ms var(--ease-out);
}

.contact-channel span { color: var(--color-text-muted); font-size: 13px; line-height: 1.2; }
.contact-channel strong { font-size: clamp(1.25rem, 1.75vw, 1.8rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.04; }

.contact-map { display: block; width: 100%; height: 100%; border: 0; }

.contact-map__label {
	position: absolute;
	left: clamp(20px, 2.2vw, 32px);
	bottom: clamp(20px, 2.2vw, 32px);
	display: grid;
	gap: 4px;
	padding: 14px 18px 15px;
	background: rgba(17, 17, 20, .94);
	color: var(--color-text);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .26);
	transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 220ms var(--ease-out);
}

.contact-map__label span { color: var(--color-text-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
.contact-map__label b { font-size: 16px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }

.contact-address { max-width: 25ch; margin: auto 0 0; color: var(--color-text); font-size: clamp(1.1rem, 1.65vw, 1.55rem); font-style: normal; font-weight: 600; letter-spacing: -.035em; line-height: 1.2; }

@media (hover: hover) and (pointer: fine) {
	.contact-card:hover { background: var(--color-bg-elevated); }
	.contact-channel:hover { color: var(--color-accent); transform: translateX(6px); }
	.contact-map__label:hover { background: var(--color-accent); color: var(--color-bg); transform: translateY(-4px); }
	.contact-map__label:hover span { color: inherit; }
}

@media (max-width: 1023px) {
	.contact-card { min-height: 280px; }
	.contact-card--map { grid-column: span 7; }
	.contact-card--address { grid-column: span 5; }
}

@media (max-width: 767px) {
	.contacts-directory { padding: 32px 0 76px; }
	.contacts-grid { grid-template-columns: 1fr; }
	.contact-card, .contact-card--general, .contact-card--business, .contact-card--address { grid-column: auto; min-height: 0; padding: 30px 24px 32px; }
	.contact-card--map { grid-column: auto; min-height: 280px; }
	.contact-card__channels { margin-top: 46px; }
	.contact-address { margin-top: 46px; }
	.contact-map__label { left: 20px; bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.contact-card, .contact-card__type, .contact-channel, .contact-address, .contact-map__label { transition: none; }
}