/* ==========================================================================
   Contact Page — /contact-us
   ========================================================================== */

/* Brand tokens */
.page-contact-us {
	--cp-brand: #b32227;
	--cp-brand-dark: #8f1b1f;
	--cp-dark: #2e2a20;
	--cp-muted: #7e7c76;
	--cp-surface: #f4ede4;
	--cp-border: #e4dacc;
	--cp-white: #fff
}

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

.page-contact-us .page-header {
	padding-top: 210px;
	padding-bottom: 90px
}

.page-contact-us .page-header .container {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center
}

.page-contact-us .page-header__title {
	margin-bottom: 14px
}

.page-contact-us .page-header__subtitle {
	max-width: 680px;
	margin: 0 auto 22px;
	font-size: 17px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .9) !important
}

.page-contact-us .page-header__actions {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 8px
}

.page-contact-us .page-header__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .22);
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	backdrop-filter: blur(8px);
	transition: background .3s ease, transform .3s ease
}

.page-contact-us .page-header__chip:hover {
	background: rgba(255, 255, 255, .22);
	color: #fff !important;
	transform: translateY(-1px)
}

.page-contact-us .page-header__chip i {
	color: var(--cp-brand);
	font-size: 16px;
	flex-shrink: 0
}

.page-contact-us .page-header .barrington-breadcrumb {
	margin-top: 22px
}

.page-contact-us .barrington-breadcrumb__list li span {
	color: var(--cp-brand)
}

/* --------------------------------------------------------------------------
   Quick-contact ribbon
   -------------------------------------------------------------------------- */

.contact-page__ribbon {
	background: linear-gradient(135deg, var(--cp-dark) 0%, #1a1712 100%);
	padding: 0;
	margin-top: 0
}

.contact-page__ribbon-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch
}

.contact-page__ribbon-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 6px;
	min-height: 148px;
	padding: 24px 18px;
	color: #fff !important;
	text-decoration: none;
	border-right: 1px solid rgba(255, 255, 255, .08);
	transition: background .3s ease
}

.contact-page__ribbon-item:last-child {
	border-right: none
}

.contact-page__ribbon-item:hover {
	background: rgba(255, 255, 255, .06);
	color: #fff !important
}

.contact-page__ribbon-item--static {
	cursor: default
}

.contact-page__ribbon-item--accent {
	background: var(--cp-brand)
}

.contact-page__ribbon-item--accent:hover {
	background: var(--cp-brand-dark)
}

.contact-page__ribbon-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .12);
	font-size: 20px;
	color: var(--cp-brand);
	margin-bottom: 2px
}

.contact-page__ribbon-item--accent .contact-page__ribbon-icon {
	background: rgba(255, 255, 255, .18);
	color: #fff
}

.contact-page__ribbon-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .65) !important;
	line-height: 1.2
}

.contact-page__ribbon-value {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #fff !important;
	word-break: break-word
}

/* --------------------------------------------------------------------------
   Main contact hub
   -------------------------------------------------------------------------- */

.contact-page__main {
	padding: 70px 0 50px;
	background: var(--cp-white)
}

.contact-page__shell {
	display: grid;
	grid-template-columns: minmax(300px, 42%) minmax(0, 1fr);
	align-items: stretch;
	background: var(--cp-white);
	border: 1px solid var(--cp-border);
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(46, 42, 32, .08)
}

.contact-page__visual {
	position: relative;
	min-height: 100%;
	display: flex
}

.contact-page__visual img {
	width: 100%;
	height: 100%;
	min-height: 560px;
	object-fit: cover;
	display: block
}

.contact-page__visual-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(46, 42, 32, .08) 40%, rgba(46, 42, 32, .7) 100%)
}

.contact-page__visual-badge {
	position: absolute;
	left: 24px;
	top: 24px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .95);
	font-size: 14px;
	font-weight: 600;
	color: var(--cp-dark) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12)
}

.contact-page__visual-badge i {
	color: var(--cp-brand);
	font-size: 18px
}

.contact-page__visual-badge span {
	color: var(--cp-dark) !important
}

.contact-page__visual-quote {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 24px;
	padding: 18px 20px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .95);
	backdrop-filter: blur(8px)
}

.contact-page__visual-quote p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	font-weight: 500;
	font-style: italic;
	color: var(--cp-dark) !important
}

.contact-page__content {
	padding: 44px 40px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-height: 100%
}

.contact-page__intro {
	text-align: left
}

.contact-page__eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cp-brand) !important;
	margin-bottom: 10px
}

.contact-page__eyebrow--light {
	color: rgba(255, 255, 255, .9) !important
}

.contact-page__title,
.contact-page__map-title,
.contact-page__local-title {
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.2;
	font-weight: 700;
	color: var(--cp-dark) !important;
	margin: 0 0 12px;
	padding: 0
}

.contact-page__lead,
.contact-page__local-text {
	font-size: 16px;
	line-height: 1.7;
	color: var(--cp-muted) !important;
	margin: 0
}

/* Contact method list — stacked full-width cards */
.contact-page__methods {
	display: flex;
	flex-direction: column;
	gap: 10px
}

.contact-page__method {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 20px;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border-radius: 16px;
	background: var(--cp-surface);
	border: 1px solid var(--cp-border);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
	text-decoration: none
}

.contact-page__method--link {
	cursor: pointer
}

.contact-page__method:hover {
	transform: translateX(4px);
	background: var(--cp-white);
	border-color: rgba(179, 34, 39, .25);
	box-shadow: 0 8px 24px rgba(46, 42, 32, .07)
}

.contact-page__method-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cp-white);
	color: var(--cp-brand);
	font-size: 20px;
	border: 1px solid var(--cp-border);
	flex-shrink: 0
}

.contact-page__method-body {
	min-width: 0
}

.contact-page__method-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--cp-muted) !important;
	margin-bottom: 4px;
	line-height: 1.2
}

.contact-page__method-value {
	display: block;
	font-size: 15px;
	line-height: 1.45;
	font-weight: 600;
	color: var(--cp-dark) !important;
	text-decoration: none
}

a.contact-page__method-value:hover {
	color: var(--cp-brand) !important
}

.contact-page__method-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cp-brand);
	font-size: 16px;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .25s ease, transform .25s ease
}

.contact-page__method:hover .contact-page__method-arrow {
	opacity: 1;
	transform: translateX(0)
}

/* Appointment CTA — vertical flow */
.contact-page__cta {
	padding: 28px 30px;
	border-radius: 20px;
	background: linear-gradient(145deg, var(--cp-dark) 0%, #1a1712 100%);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px
}

.contact-page__cta-top {
	width: 100%
}

.contact-page__cta-title {
	font-size: clamp(22px, 2.5vw, 28px);
	line-height: 1.25;
	font-weight: 700;
	color: #fff !important;
	margin: 0 0 10px;
	padding: 0;
	max-width: 20ch
}

.contact-page__cta-text {
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .82) !important;
	margin: 0;
	max-width: 42ch
}

.contact-page__perks {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%
}

.contact-page__perks li {
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, .95) !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1.3;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .12)
}

.contact-page__perks i {
	color: var(--cp-brand);
	font-size: 15px
}

.contact-page__btn,
.contact-page__map-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 16px 28px !important;
	font-size: 16px !important
}

.contact-page__btn i,
.contact-page__map-btn i,
.contact-page__local-link i {
	line-height: 1;
	vertical-align: middle
}

/* --------------------------------------------------------------------------
   Local services card
   -------------------------------------------------------------------------- */

.contact-page__local {
	padding: 0 0 60px;
	background: var(--cp-white)
}

.contact-page__local-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding: 32px 36px;
	border-radius: 20px;
	background: var(--cp-surface);
	border: 1px solid var(--cp-border)
}

.contact-page__local-copy {
	flex: 1;
	min-width: 0
}

.contact-page__local-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-shrink: 0;
	padding: 14px 24px;
	border-radius: 999px;
	background: var(--cp-brand) !important;
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background .3s ease, transform .3s ease
}

.contact-page__local-link:hover {
	background: var(--cp-dark) !important;
	color: #fff !important;
	transform: translateY(-2px)
}

/* --------------------------------------------------------------------------
   Map section
   -------------------------------------------------------------------------- */

.contact-page__map {
	padding: 0 0 90px;
	background: var(--cp-white)
}

.contact-page__map-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 24px
}

.contact-page__directions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--cp-brand) !important;
	text-decoration: none;
	transition: opacity .3s ease
}

.contact-page__directions:hover {
	opacity: .8;
	color: var(--cp-brand) !important
}

.contact-page__map-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	align-items: stretch;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--cp-border);
	box-shadow: 0 16px 48px rgba(46, 42, 32, .08)
}

.contact-page__map-frame {
	position: relative;
	min-height: 460px;
	background: var(--cp-surface)
}

.contact-page__map-frame iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: none !important;
	display: block;
	mix-blend-mode: normal;
	filter: none
}

.contact-page__map-card {
	padding: 32px 26px;
	background: var(--cp-dark);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px
}

.contact-page__map-card-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0;
	padding: 0;
	color: #fff !important;
	line-height: 1.3
}

.contact-page__map-list {
	list-style: none;
	padding: 0;
	margin: 0;
	flex: 1
}

.contact-page__map-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 16px;
	font-size: 14px;
	line-height: 1.55
}

.contact-page__map-list li:last-child {
	margin-bottom: 0
}

.contact-page__map-list li span {
	color: rgba(255, 255, 255, .9) !important
}

.contact-page__map-list i {
	color: var(--cp-brand);
	font-size: 18px;
	margin-top: 2px;
	flex-shrink: 0;
	width: 18px;
	text-align: center
}

.contact-page__map-list a {
	color: #fff !important;
	text-decoration: none;
	transition: color .3s ease
}

.contact-page__map-list a:hover {
	color: var(--cp-brand) !important
}

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

@media (max-width: 1199px) {
	.contact-page__shell {
		grid-template-columns: 1fr
	}

	.contact-page__visual img {
		min-height: 300px
	}

	.contact-page__content {
		padding: 32px 28px
	}

	.contact-page__map-shell {
		grid-template-columns: 1fr
	}

	.contact-page__map-frame {
		min-height: 340px
	}
}

@media (max-width: 991px) {
	.contact-page__ribbon-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}

	.contact-page__ribbon-item:nth-child(2) {
		border-right: none
	}

	.contact-page__ribbon-item:nth-child(1),
	.contact-page__ribbon-item:nth-child(2) {
		border-bottom: 1px solid rgba(255, 255, 255, .08)
	}

	.contact-page__methods {
		gap: 8px
	}

	.contact-page__cta-title {
		max-width: none
	}

	.contact-page__local-card {
		flex-direction: column;
		align-items: flex-start;
		padding: 28px 24px
	}

	.contact-page__local-link {
		width: 100%
	}
}

@media (max-width: 575px) {
	.page-contact-us .page-header {
		padding-top: 170px;
		padding-bottom: 70px
	}

	.page-contact-us .page-header__chip {
		width: 100%;
		max-width: 320px
	}

	.contact-page__ribbon-grid {
		grid-template-columns: 1fr
	}

	.contact-page__ribbon-item {
		border-right: none !important;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
		min-height: 120px
	}

	.contact-page__ribbon-item:last-child {
		border-bottom: none
	}

	.contact-page__content {
		padding: 24px 18px;
		gap: 20px
	}

	.contact-page__cta {
		padding: 20px 18px
	}

	.contact-page__btn,
	.contact-page__map-btn {
		width: 100%
	}

	.contact-page__map-head {
		flex-direction: column;
		align-items: flex-start
	}
}