/*
 * Shubh Laabh Arts — Contact Us page (design-reference/pages/contact-page.png).
 *
 * Loaded ONLY on the Contact page (inc/contact.php, sla_contact_enqueue_assets())
 * and scoped entirely under .sla-contact-page (page-contact.php's <main>) —
 * nothing here can reach the header, footer or any other page, including
 * Contact Form 7 forms used elsewhere. Colours come from the --sla-* tokens
 * (design-tokens.css / theme.json); accents are tints of them.
 *
 *   1. Page field, shared pieces
 *   2. A. Hero
 *   3. B. Form, reach-us cards, arched card
 *   4. Contact Form 7 — the real rendered form
 *   5. C. How can we help
 *   6. D. FAQ
 *   7. E. CTA band
 *   8. F. Trust strip
 *   9. Reveal, reduced motion
 *  10. Responsive
 */

/* -----------------------------------------------------------------------
 * 1. Page field, shared pieces
 * --------------------------------------------------------------------- */
.sla-contact-page {
	--sla-c-radius: 12px;
	--sla-c-line: color-mix( in srgb, var( --sla-champagne-gold ) 28%, var( --sla-ivory-dark ) );
	--sla-c-card: color-mix( in srgb, var( --sla-white ) 62%, var( --sla-warm-cream ) );
	--sla-c-shadow: 0 14px 30px -24px rgba( 7, 59, 76, 0.45 );
	--sla-c-gutter: clamp( 16px, 3.2vw, 40px );
	--sla-c-accent: color-mix( in srgb, var( --sla-wine ) 48%, var( --sla-champagne-gold ) );
	--sla-c-umber: rgba( 46, 24, 8, 1 );
	/* Accent family for icons and hover edges — each a theme colour or the
	 * product page's rust/terracotta. */
	--sla-c-maroon: var( --sla-wine );
	--sla-c-terracotta: #a5553f;
	--sla-c-teal: var( --sla-deep-teal );
	--sla-c-emerald: var( --sla-emerald );
	position: relative;
	overflow-x: clip;
	background: var( --sla-warm-cream );
	color: var( --sla-peacock-navy );
	font-family: var( --sla-font-body );
}

.sla-contact-page *,
.sla-contact-page *::before,
.sla-contact-page *::after {
	box-sizing: border-box;
}

.sla-contact-page ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sla-contact-page img {
	display: block;
	max-width: 100%;
	height: auto;
}

.sla-contact-page svg {
	display: block;
	width: 100%;
	height: 100%;
}

.sla-contact-page a:focus-visible,
.sla-contact-page button:focus-visible,
.sla-contact-page summary:focus-visible,
.sla-contact-page [tabindex]:focus-visible {
	outline: 2px solid var( --sla-champagne-gold );
	outline-offset: 3px;
	border-radius: 4px;
}

.sla-contact-container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
	padding-inline: var( --sla-c-gutter );
}

.sla-contact-section {
	position: relative;
	padding-block: clamp( 2.5rem, 4.5vw, 4rem ) 0;
}

.sla-contact-head {
	margin: 0 0 clamp( 1.25rem, 2.2vw, 1.75rem );
}

.sla-contact-head__title {
	margin: 0;
	font-family: var( --sla-font-display );
	font-size: clamp( 1.75rem, 1.4rem + 1.3vw, 2.5rem );
	font-weight: 600;
	line-height: 1.12;
	color: var( --sla-peacock-navy );
}

/* Short champagne rule with a diamond under section titles. */
.sla-contact-head__title::after,
.sla-contact-form__title::after {
	content: "";
	display: block;
	width: 72px;
	height: 8px;
	margin-top: 0.7rem;
	background: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 8'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23C79A45'/%3E%3Cstop offset='1' stop-color='%23C79A45' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 0 8 4 4 8 0 4Z' fill='%23C79A45'/%3E%3Cpath d='M13 3.5h59v1H13Z' fill='url(%23g)'/%3E%3C/svg%3E" ) 0 0 / 100% 100% no-repeat;
}

.sla-contact-head__sub {
	margin: 0.45rem 0 0;
	max-width: 40rem;
	font-size: clamp( 0.9rem, 0.86rem + 0.2vw, 1rem );
	line-height: 1.55;
	color: var( --sla-muted-blue );
}

/* Pale half-mandala at the section edges. */
.sla-contact-mandala {
	position: absolute;
	z-index: 0;
	width: clamp( 110px, 13vw, 210px );
	aspect-ratio: 280 / 525;
	height: auto;
	opacity: 0.28;
	pointer-events: none;
	user-select: none;
}

.sla-contact-mandala--left {
	top: 3rem;
	left: 0;
	transform: translateX( -40% );
}

.sla-contact-mandala--right {
	top: 3rem;
	right: 0;
	transform: translateX( 40% ) scaleX( -1 );
}

/* Brushed-enamel buttons — the product page's button recipe (light / base /
 * deep stops, edge and glow per variant): deep peacock teal by default,
 * rust/terracotta on the dark CTA band. Gold survives only as a hairline. */
.sla-contact-page {
	--sla-btn-teal-light: #12657d;
	--sla-btn-teal-base: #0b4d61;
	--sla-btn-teal-deep: #073847;
	--sla-btn-teal-edge: #062f3c;
}

.sla-contact-btn {
	--sla-btn-light: var( --sla-btn-teal-light );
	--sla-btn-base: var( --sla-btn-teal-base );
	--sla-btn-deep: var( --sla-btn-teal-deep );
	--sla-btn-edge: var( --sla-btn-teal-edge );
	--sla-btn-glow: rgba( 7, 56, 71, 0.6 );
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 50px;
	padding: 0.75rem 1.6rem;
	overflow: hidden;
	border: 1px solid var( --sla-btn-edge );
	border-radius: 8px;
	background-color: var( --sla-btn-base );
	background-image:
		repeating-linear-gradient( 90deg, rgba( 255, 255, 255, 0.035 ) 0 1px, transparent 1px 3px ),
		linear-gradient( 180deg, var( --sla-btn-light ) 0%, var( --sla-btn-base ) 52%, var( --sla-btn-deep ) 100% );
	box-shadow:
		inset 0 1px 0 rgba( 255, 255, 255, 0.28 ),
		inset 0 -1px 0 rgba( 0, 0, 0, 0.18 ),
		0 12px 22px -14px var( --sla-btn-glow );
	color: var( --sla-ivory );
	font-family: var( --sla-font-body );
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-shadow: 0 1px 0 rgba( 0, 0, 0, 0.18 );
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: filter 260ms ease, transform 260ms ease, box-shadow 260ms ease, background-color 260ms ease;
}

/* Restrained light sweep on hover (the product page's sweep, played once). */
.sla-contact-btn::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	z-index: -1;
	width: 40%;
	background: linear-gradient( 100deg, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 0.07 ) 30%, rgba( 255, 255, 255, 0.28 ) 50%, rgba( 255, 255, 255, 0.07 ) 70%, rgba( 255, 255, 255, 0 ) 100% );
	transform: translateX( -130% ) skewX( -18deg );
	pointer-events: none;
}

.sla-contact-btn svg {
	flex: none;
	width: 18px;
	height: 18px;
	stroke-width: 2.4;
}

.sla-contact-btn:hover,
.sla-contact-btn:focus-visible {
	color: var( --sla-ivory );
	filter: brightness( 1.08 ) saturate( 1.05 );
	box-shadow:
		inset 0 1px 0 rgba( 255, 255, 255, 0.34 ),
		inset 0 -1px 0 rgba( 0, 0, 0, 0.18 ),
		0 18px 28px -16px var( --sla-btn-glow );
}

.sla-contact-btn:focus-visible {
	outline: 2px solid var( --sla-light-gold );
	outline-offset: 3px;
}

@media ( hover: hover ) {
	.sla-contact-btn:hover {
		transform: translateY( -2px );
	}

	.sla-contact-btn:hover::before {
		transition: transform 900ms cubic-bezier( 0.45, 0, 0.25, 1 );
		transform: translateX( 360% ) skewX( -18deg );
	}
}

/* Rust / terracotta — the product page's Enquire colours. */
.sla-contact-btn--rust {
	--sla-btn-light: #b0634f;
	--sla-btn-base: #9a4f40;
	--sla-btn-deep: #7e3f33;
	--sla-btn-edge: #6f372c;
	--sla-btn-glow: rgba( 30, 12, 8, 0.65 );
}

.sla-contact-btn--outline {
	border-color: color-mix( in srgb, var( --sla-ivory ) 55%, transparent );
	background: transparent;
	box-shadow: inset 0 0 0 1px color-mix( in srgb, var( --sla-light-gold ) 18%, transparent );
	text-shadow: none;
}

.sla-contact-btn--outline:hover,
.sla-contact-btn--outline:focus-visible {
	border-color: var( --sla-ivory );
	background: color-mix( in srgb, var( --sla-ivory ) 12%, transparent );
	box-shadow: none;
	filter: none;
}

/* -----------------------------------------------------------------------
 * 2. A. Hero — the Vastu hero's editorial split (assets/css/vastu.css § 2):
 * serif copy on the ivory field, the "Shubh Laabh Arts" brass photograph in
 * a temple arch with a single champagne hairline on the right.
 * --------------------------------------------------------------------- */
.sla-contact-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient( ellipse 46% 70% at 76% 50%, color-mix( in srgb, var( --sla-light-gold ) 22%, transparent ) 0%, transparent 70% ),
		linear-gradient( 90deg, var( --sla-ivory ) 0%, var( --sla-warm-cream ) 60% );
	isolation: isolate;
}

.sla-contact-mandala--hero {
	top: 50%;
	left: 0;
	width: clamp( 140px, 14vw, 230px );
	opacity: 0.3;
	transform: translate( -44%, -50% );
}

.sla-contact-mandala--hero-right {
	top: 50%;
	right: 0;
	width: clamp( 150px, 15vw, 250px );
	opacity: 0.22;
	transform: translate( 40%, -50% ) scaleX( -1 );
}

.sla-contact-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax( 0, 1.12fr ) minmax( 0, 0.88fr );
	gap: clamp( 2rem, 5vw, 5rem );
	align-items: center;
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
	padding: clamp( 2.75rem, 5.2vw, 4.75rem ) var( --sla-c-gutter );
	padding-left: max( var( --sla-c-gutter ), clamp( 1.5rem, 6vw, 5.5rem ) );
}

.sla-contact-hero__copy {
	max-width: 600px;
}

.sla-contact-hero__eyebrow {
	margin: 0 0 1.1rem;
	color: var( --sla-c-accent );
	font-size: 0.78rem;
	letter-spacing: 0.32em;
}

.sla-contact-hero__title {
	margin: 0;
	font-family: var( --sla-font-display );
	font-size: clamp( 2.4rem, 1.55rem + 2.7vw, 4rem );
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.005em;
	color: var( --sla-peacock-navy );
}

.sla-contact-hero__title span {
	display: block;
	color: var( --sla-deep-teal );
	font-style: italic;
	font-weight: 500;
}

.sla-contact-hero__text {
	margin: 1.35rem 0 0;
	max-width: 33rem;
	font-size: clamp( 1rem, 0.94rem + 0.25vw, 1.125rem );
	font-weight: 500;
	line-height: 1.7;
	color: var( --sla-deep-navy );
}

/* Gold lotus + hairline between the introduction and the promises. */
.sla-contact-hero__divider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: min( 100%, 15rem );
	margin-top: clamp( 1.5rem, 2.6vw, 2rem );
}

.sla-contact-hero__divider img {
	flex: none;
	width: 26px;
	height: 26px;
	opacity: 0.85;
}

.sla-contact-hero__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient( 90deg, var( --sla-champagne-gold ), transparent );
}

/* Three promises: plain line icons over hairline-divided columns. */
.sla-contact-hero__promises {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	max-width: 30rem;
	margin-top: clamp( 1.25rem, 2.2vw, 1.75rem ) !important;
}

.sla-contact-hero__promise {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.25rem 0.6rem;
	text-align: center;
}

.sla-contact-hero__promise:first-child {
	padding-left: 0;
}

.sla-contact-hero__promise + .sla-contact-hero__promise {
	border-left: 1px solid var( --sla-c-line );
}

.sla-contact-hero__promise-icon {
	width: 36px;
	height: 36px;
	margin-bottom: 0.55rem;
	color: var( --sla-c-accent );
}

.sla-contact-hero__promise strong,
.sla-contact-hero__promise small {
	display: block;
	font-size: 0.74rem;
	line-height: 1.35;
	color: var( --sla-peacock-navy );
}

.sla-contact-hero__promise strong {
	font-weight: 700;
}

.sla-contact-hero__promise small {
	font-weight: 500;
	color: var( --sla-muted-blue );
}

/* Arched photograph with a brass hairline echo. Radii: the top corners are
 * a true semicircle at the frame's 4:5 ratio (50% of width = 40% of height). */
.sla-contact-hero__media {
	--sla-arch: 50% 50% 16px 16px / 40% 40% 16px 16px;
	position: relative;
	justify-self: center;
	width: min( 100%, 470px );
	margin: 0;
	padding: 14px;
}

.sla-contact-hero__media::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid color-mix( in srgb, var( --sla-champagne-gold ) 75%, transparent );
	border-radius: var( --sla-arch );
	pointer-events: none;
}

.sla-contact-hero__frame {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var( --sla-arch );
	background: var( --sla-deep-teal );
	box-shadow: 0 30px 50px -30px rgba( 7, 59, 76, 0.65 );
}

/* The 3:4 photograph covers the 4:5 arch; anchored above centre so the
 * emblem's crown and lotus base both stay in frame, undistorted. */
.sla-contact-page .sla-contact-hero__idol {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 32%;
	transition: transform 1200ms cubic-bezier( 0.2, 0.6, 0.2, 1 );
}

@media ( hover: hover ) and ( prefers-reduced-motion: no-preference ) {
	.sla-contact-hero__media:hover .sla-contact-hero__idol {
		transform: scale( 1.03 );
	}
}

.sla-contact-hero__tagline {
	position: absolute;
	bottom: clamp( 2rem, 4vw, 3rem );
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	padding: 0.85rem 1.2rem 0.9rem;
	border: 1px solid var( --sla-c-line );
	border-radius: 8px;
	background: color-mix( in srgb, var( --sla-ivory ) 94%, transparent );
	box-shadow: 0 18px 30px -22px rgba( 7, 59, 76, 0.6 );
	color: var( --sla-peacock-navy );
	font-family: var( --sla-font-display );
	font-size: clamp( 1.1rem, 0.9rem + 0.7vw, 1.45rem );
	font-style: italic;
	font-weight: 500;
	line-height: 1.2;
	transform: translateX( -38% );
}

.sla-contact-hero__tagline-rule {
	position: relative;
	width: 64px;
	height: 1px;
	margin: 0.6rem 0 0 1.5rem;
	background: var( --sla-champagne-gold );
}

.sla-contact-hero__tagline-rule::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	background: var( --sla-champagne-gold );
	transform: translate( -50%, -50% ) rotate( 45deg );
}

/* -----------------------------------------------------------------------
 * 3. B. Form, reach-us cards, arched card
 * --------------------------------------------------------------------- */
/* Form widest, reach-us cards in the middle, the arched card a narrow
 * portrait third. Every column is top-aligned at its own natural height —
 * the form's height never stretches the card. */
.sla-contact-main__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1.55fr ) minmax( 0, 1fr ) minmax( 0, 0.72fr );
	gap: clamp( 1.5rem, 2.6vw, 2.5rem );
	align-items: start;
}

/* The form sits on a white panel with a layered ivory/gold edge and a fine
 * teal → gold → maroon crown rule. Help-card jumps land it below the
 * sticky header. */
.sla-contact-form {
	position: relative;
	align-self: start;
	padding: clamp( 1.5rem, 2.6vw, 2.25rem );
	border: 1px solid var( --sla-c-line );
	border-radius: 16px;
	background:
		radial-gradient( ellipse 60% 40% at 100% 0%, color-mix( in srgb, var( --sla-light-gold ) 10%, transparent ) 0%, transparent 70% ),
		linear-gradient( 180deg, var( --sla-white ) 0%, color-mix( in srgb, var( --sla-white ) 72%, var( --sla-ivory ) ) 100% );
	box-shadow:
		0 0 0 6px color-mix( in srgb, var( --sla-white ) 60%, transparent ),
		0 0 0 7px color-mix( in srgb, var( --sla-champagne-gold ) 20%, transparent ),
		0 34px 56px -40px rgba( 7, 59, 76, 0.5 );
	scroll-margin-top: 140px;
}

.sla-contact-form::before {
	content: "";
	position: absolute;
	top: -1px;
	left: clamp( 1.5rem, 2.6vw, 2.25rem );
	right: clamp( 1.5rem, 2.6vw, 2.25rem );
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient( 90deg, var( --sla-c-teal ) 0%, var( --sla-champagne-gold ) 50%, var( --sla-c-maroon ) 100% );
}

.sla-contact-form__title {
	margin: 0;
	font-family: var( --sla-font-display );
	font-size: clamp( 1.75rem, 1.4rem + 1.3vw, 2.5rem );
	font-weight: 600;
	line-height: 1.12;
	color: var( --sla-peacock-navy );
}

.sla-contact-form__sub {
	margin: 0.45rem 0 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var( --sla-muted-blue );
}

.sla-contact-form__body {
	margin-top: clamp( 1.25rem, 2vw, 1.6rem );
}

/* Other ways to reach us. */
.sla-contact-reach {
	padding-top: 0.35rem;
}

.sla-contact-reach__title {
	margin: 0 0 1rem;
	font-family: var( --sla-font-display );
	font-size: clamp( 1.35rem, 1.2rem + 0.5vw, 1.6rem );
	font-weight: 600;
	line-height: 1.2;
	color: var( --sla-peacock-navy );
}

.sla-contact-reach__list {
	display: grid;
	gap: 0.75rem;
}

/* Each channel has its own accent (--sla-ch): deep teal for email, emerald
 * for phone, terracotta for the address, maroon for social. The accent
 * tints the icon medallion and lights the left edge on hover. */
.sla-contact-channel {
	--sla-ch: var( --sla-c-teal );
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.05rem 1.15rem 1.05rem 1.2rem;
	overflow: hidden;
	border: 1px solid var( --sla-c-line );
	border-radius: 14px;
	background: linear-gradient( 135deg, var( --sla-white ) 0%, var( --sla-c-card ) 100% );
	box-shadow: var( --sla-c-shadow );
	transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.sla-contact-channel--phone {
	--sla-ch: var( --sla-c-emerald );
}

.sla-contact-channel--address {
	--sla-ch: var( --sla-c-terracotta );
}

.sla-contact-channel--social {
	--sla-ch: var( --sla-c-maroon );
}

/* Accent edge, drawn in on hover / focus. */
.sla-contact-channel::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var( --sla-ch );
	transform: scaleY( 0 );
	opacity: 0;
	transition: transform 260ms ease, opacity 260ms ease;
}

.sla-contact-channel:hover,
.sla-contact-channel:focus-within {
	border-color: color-mix( in srgb, var( --sla-ch ) 38%, var( --sla-c-line ) );
	box-shadow: 0 22px 36px -26px color-mix( in srgb, var( --sla-ch ) 70%, rgba( 7, 59, 76, 0.6 ) );
}

.sla-contact-channel:hover::before,
.sla-contact-channel:focus-within::before {
	transform: scaleY( 1 );
	opacity: 1;
}

@media ( hover: hover ) {
	.sla-contact-channel:hover {
		transform: translateY( -2px );
	}
}

.sla-contact-channel__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 50px;
	height: 50px;
	padding: 12px;
	border: 1px solid color-mix( in srgb, var( --sla-ch ) 40%, transparent );
	border-radius: 14px;
	background: linear-gradient( 145deg, color-mix( in srgb, var( --sla-ch ) 14%, var( --sla-white ) ) 0%, color-mix( in srgb, var( --sla-ch ) 30%, var( --sla-ivory ) ) 100% );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.8 ), 0 8px 16px -12px var( --sla-ch );
	color: var( --sla-ch );
	transition: background 260ms ease, color 260ms ease, transform 260ms ease;
}

.sla-contact-channel__icon svg {
	stroke-width: 2.8;
}

/* Clickable cards: the icon fills with the accent and gives a small nod. */
.sla-contact-channel--link:hover .sla-contact-channel__icon,
.sla-contact-channel--link:focus-within .sla-contact-channel__icon {
	background: linear-gradient( 145deg, color-mix( in srgb, var( --sla-ch ) 80%, var( --sla-white ) ) 0%, var( --sla-ch ) 100% );
	color: var( --sla-ivory );
}

@media ( prefers-reduced-motion: no-preference ) {
	.sla-contact-channel--email:hover .sla-contact-channel__icon {
		transform: translateY( -2px ) rotate( -6deg );
	}

	.sla-contact-channel--phone:hover .sla-contact-channel__icon {
		animation: sla-contact-ring 600ms ease 1;
	}
}

@keyframes sla-contact-ring {
	0%, 100% { transform: rotate( 0 ); }
	20% { transform: rotate( -12deg ); }
	40% { transform: rotate( 10deg ); }
	60% { transform: rotate( -6deg ); }
	80% { transform: rotate( 3deg ); }
}

.sla-contact-channel__body {
	flex: 1 1 auto;
	min-width: 0;
}

/* Small arrow on clickable cards. */
.sla-contact-channel__go {
	flex: none;
	width: 18px;
	height: 18px;
	color: color-mix( in srgb, var( --sla-ch ) 55%, var( --sla-c-line ) );
	transition: transform 240ms ease, color 240ms ease;
}

.sla-contact-channel__go svg {
	stroke-width: 3;
}

.sla-contact-channel--link:hover .sla-contact-channel__go,
.sla-contact-channel--link:focus-within .sla-contact-channel__go {
	color: var( --sla-ch );
	transform: translateX( 3px );
}

.sla-contact-channel__label {
	margin: 0 0 0.2rem;
	font-family: var( --sla-font-body );
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.3;
	color: var( --sla-peacock-navy );
}

.sla-contact-channel__value {
	display: inline-block;
	padding-block: 0.15rem;
	color: var( --sla-deep-teal );
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: underline;
	text-decoration-color: color-mix( in srgb, var( --sla-champagne-gold ) 70%, transparent );
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.sla-contact-channel__value:hover {
	color: var( --sla-peacock-navy );
	text-decoration-color: var( --sla-champagne-gold );
}

/* The email / phone link stretches over its whole card, so the card is one
 * click target; the focus ring is drawn on the card itself. */
.sla-contact-channel--link .sla-contact-channel__value {
	color: color-mix( in srgb, var( --sla-ch ) 78%, var( --sla-peacock-navy ) );
}

.sla-contact-channel--link .sla-contact-channel__value::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.sla-contact-page .sla-contact-channel--link .sla-contact-channel__value:focus-visible {
	outline: none;
}

.sla-contact-channel--link:has( .sla-contact-channel__value:focus-visible ) {
	outline: 2px solid var( --sla-champagne-gold );
	outline-offset: 3px;
}

.sla-contact-channel__note {
	margin: 0.15rem 0 0;
	font-size: 0.78rem;
	line-height: 1.45;
	color: var( --sla-muted-blue );
}

.sla-contact-channel__address {
	font-size: 0.86rem;
	font-style: normal;
	line-height: 1.55;
	color: var( --sla-deep-navy );
}

.sla-contact-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 0.45rem;
}

/* Each network in its own recognisable colours: white glyph on the brand
 * fill (Instagram's gradient, Facebook blue, Pinterest red), with a white
 * ring so they sit cleanly on the ivory card. */
.sla-contact-social__link {
	--sla-brand: var( --sla-peacock-navy );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var( --sla-brand );
	box-shadow: 0 0 0 2px var( --sla-white ), 0 0 0 3px color-mix( in srgb, var( --sla-brand ) 25%, transparent ), 0 8px 16px -10px var( --sla-brand );
	color: #fff;
	transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.sla-contact-social__link svg {
	width: 20px;
	height: 20px;
}

.sla-contact-social__link--instagram {
	--sla-brand: #d62976;
	background: radial-gradient( circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90% );
}

.sla-contact-social__link--instagram svg {
	width: 21px;
	height: 21px;
}

.sla-contact-social__link--facebook {
	--sla-brand: #1877f2;
}

.sla-contact-social__link--pinterest {
	--sla-brand: #e60023;
}

.sla-contact-social__link:hover,
.sla-contact-social__link:focus-visible {
	color: #fff;
	filter: brightness( 1.06 ) saturate( 1.08 );
	box-shadow: 0 0 0 2px var( --sla-white ), 0 0 0 3px color-mix( in srgb, var( --sla-brand ) 55%, transparent ), 0 12px 20px -10px var( --sla-brand );
}

@media ( prefers-reduced-motion: no-preference ) {
	.sla-contact-social__link:hover,
	.sla-contact-social__link:focus-visible {
		transform: translateY( -3px ) scale( 1.06 );
	}
}

.sla-contact-page .sla-contact-social__link:focus-visible {
	outline: 2px solid var( --sla-peacock-navy );
	outline-offset: 4px;
	border-radius: 50%;
}

/* Arched card: the brass Peacock photograph fills the crown of the arch and
 * fades into deep peacock navy, where the copy sits at the bottom. A fixed
 * portrait ratio (capped) sets its height, never the neighbouring columns. */
.sla-contact-card {
	--sla-arch: 50% 50% 14px 14px / 120px 120px 14px 14px;
	--sla-card-photo: 72%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-self: start;
	width: 100%;
	max-width: 300px;
	aspect-ratio: 9 / 16;
	max-height: 520px;
	margin: 0;
	justify-self: end;
	overflow: hidden;
	border-radius: var( --sla-arch );
	background: linear-gradient( 180deg, var( --sla-peacock-navy ) 0%, var( --sla-deep-navy ) 100% );
	box-shadow: 0 30px 50px -30px rgba( 7, 59, 76, 0.6 );
	isolation: isolate;
}

.sla-contact-card__img {
	position: absolute;
	inset: 0 0 auto;
	z-index: -2;
	width: 100%;
	height: var( --sla-card-photo ) !important;
	object-fit: cover;
	object-position: 50% 0%;
}

/* Gentle top vignette for the arch; a deep gradient under the copy. */
.sla-contact-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient( 180deg, rgba( 6, 47, 58, 0.28 ) 0%, transparent 18% ),
		linear-gradient( 180deg, transparent 0%, transparent calc( var( --sla-card-photo ) - 34% ), rgba( 6, 47, 58, 0.55 ) calc( var( --sla-card-photo ) - 16% ), rgba( 6, 47, 58, 0.94 ) calc( var( --sla-card-photo ) - 2% ), var( --sla-deep-navy ) 100% );
}

.sla-contact-card::after {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px solid color-mix( in srgb, var( --sla-light-gold ) 55%, transparent );
	border-radius: 50% 50% 10px 10px / 112px 112px 10px 10px;
	pointer-events: none;
}

.sla-contact-card__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.25rem 1.2rem clamp( 1.6rem, 2.4vw, 2rem );
	text-align: center;
	text-shadow: 0 1px 12px rgba( 6, 47, 58, 0.6 );
}

.sla-contact-card__text {
	color: var( --sla-ivory );
	font-family: var( --sla-font-display );
	font-size: clamp( 1.3rem, 1.05rem + 0.5vw, 1.55rem );
	font-weight: 500;
	line-height: 1.22;
}

.sla-contact-card__text span {
	display: block;
	margin-top: 0.15rem;
	color: var( --sla-light-gold );
	font-style: italic;
}

.sla-contact-card__rule {
	display: block;
	width: 48px;
	height: 1px;
	margin-top: 0.9rem;
	background: color-mix( in srgb, var( --sla-light-gold ) 80%, transparent );
}

.sla-contact-card__sub {
	max-width: 17rem;
	margin-top: 0.85rem;
	color: color-mix( in srgb, var( --sla-ivory ) 88%, transparent );
	font-family: var( --sla-font-body );
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.6;
	text-wrap: balance;
}

/* -----------------------------------------------------------------------
 * 4. Contact Form 7 — styles the plugin's real rendered markup.
 * --------------------------------------------------------------------- */
.sla-contact-page .wpcf7 form {
	margin: 0;
}

.sla-contact-page .wpcf7 p {
	margin: 0;
}

.sla-contact-page .sla-cf__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1.05rem 1rem;
}

.sla-contact-page .sla-cf__field--full {
	grid-column: 1 / -1;
}

.sla-contact-page .sla-cf__field label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.3;
	color: var( --sla-peacock-navy );
}

.sla-contact-page .sla-cf__req {
	color: var( --sla-wine );
}

.sla-contact-page .sla-cf__opt {
	font-weight: 500;
	color: var( --sla-muted-blue );
}

.sla-contact-page .wpcf7-form-control-wrap {
	position: relative;
	display: block;
}

/* Field icons, drawn with the same 1.6px line weight as the page icons. */
.sla-contact-page .wpcf7-form-control-wrap::before {
	content: "";
	position: absolute;
	top: 26px;
	left: 15px;
	z-index: 1;
	width: 18px;
	height: 18px;
	background: var( --sla-muted-blue );
	-webkit-mask: var( --sla-cf-icon ) center / contain no-repeat;
	mask: var( --sla-cf-icon ) center / contain no-repeat;
	transform: translateY( -50% );
	pointer-events: none;
}

.sla-contact-page .wpcf7-form-control-wrap[data-name="your-name"] {
	--sla-cf-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E" );
}

.sla-contact-page .wpcf7-form-control-wrap[data-name="your-email"] {
	--sla-cf-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E" );
}

.sla-contact-page .wpcf7-form-control-wrap[data-name="your-phone"] {
	--sla-cf-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h3.2l1.6 4.3-2.1 1.4a11.5 11.5 0 0 0 7.1 7.1l1.4-2.1 4.3 1.6V19a1.6 1.6 0 0 1-1.7 1.6A16.5 16.5 0 0 1 3.4 5.2 1.6 1.6 0 0 1 5 3.5Z'/%3E%3C/svg%3E" );
}

.sla-contact-page .wpcf7-form-control-wrap[data-name="enquiry-type"] {
	--sla-cf-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3C/svg%3E" );
}

.sla-contact-page .wpcf7-form-control-wrap[data-name="your-message"] {
	--sla-cf-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4V5Z'/%3E%3C/svg%3E" );
}

.sla-contact-page .wpcf7-form-control-wrap:not( [data-name] )::before {
	content: none;
}

.sla-contact-page .wpcf7 input[type="text"],
.sla-contact-page .wpcf7 input[type="email"],
.sla-contact-page .wpcf7 input[type="tel"],
.sla-contact-page .wpcf7 select,
.sla-contact-page .wpcf7 textarea {
	display: block;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 0.8rem 1rem 0.8rem 2.85rem;
	border: 1px solid var( --sla-c-line );
	border-radius: 8px;
	background-color: var( --sla-white );
	box-shadow: 0 1px 0 rgba( 7, 59, 76, 0.03 );
	color: var( --sla-deep-navy );
	font-family: var( --sla-font-body );
	font-size: 1rem; /* 16px: keeps iOS from zooming into the field. */
	font-weight: 500;
	line-height: 1.4;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}

.sla-contact-page .wpcf7 textarea {
	min-height: 150px;
	height: 150px;
	resize: vertical;
}

.sla-contact-page .wpcf7 select {
	padding-right: 2.75rem;
	-webkit-appearance: none;
	appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23073b4c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E" );
	background-position: right 1rem center;
	background-repeat: no-repeat;
	background-size: 18px;
	cursor: pointer;
}

/* The "Select an enquiry type" label option reads as a placeholder. */
.sla-contact-page .wpcf7 select:has( option[value=""]:checked ) {
	color: color-mix( in srgb, var( --sla-muted-blue ) 85%, transparent );
}

.sla-contact-page .wpcf7 ::placeholder {
	color: color-mix( in srgb, var( --sla-muted-blue ) 80%, transparent );
	opacity: 1;
}

.sla-contact-page .wpcf7 input:hover,
.sla-contact-page .wpcf7 select:hover,
.sla-contact-page .wpcf7 textarea:hover {
	border-color: color-mix( in srgb, var( --sla-champagne-gold ) 60%, var( --sla-ivory-dark ) );
}

.sla-contact-page .wpcf7 input:focus,
.sla-contact-page .wpcf7 select:focus,
.sla-contact-page .wpcf7 textarea:focus {
	border-color: var( --sla-champagne-gold );
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --sla-champagne-gold ) 30%, transparent );
}

.sla-contact-page .wpcf7-form-control-wrap:focus-within::before {
	background: var( --sla-antique-gold );
}

/* Validation: CF7 marks invalid controls aria-invalid + .wpcf7-not-valid
 * and adds a tip after them (announced via its own screen-reader list). */
.sla-contact-page .wpcf7 .wpcf7-not-valid {
	border-color: var( --sla-wine );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --sla-wine ) 12%, transparent );
}

.sla-contact-page .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.4rem;
	color: var( --sla-wine );
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Actions: the button spans the form's full content width (same as the
 * message field) and closes the panel — nothing is printed beneath it. */
.sla-contact-page .sla-cf__actions {
	display: block;
	margin-top: 1.6rem;
}

.sla-contact-page .sla-cf__actions > p:first-child {
	position: relative;
	width: 100%;
}

/* SEND MESSAGE — the checkout's maroon Place Order treatment: maroon
 * gradient with a brushed texture, inset maroon band + champagne hairline
 * (the double border), white uppercase text. CF7 renders an <input>, which
 * cannot hold child icons, so the gold send glyph and arrow are background
 * layers placed either side of the centred label (em offsets scale with the
 * text). Icons: send, arrow, texture, gradient. */
.sla-contact-page .wpcf7 input.sla-cf__submit {
	--sla-send-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B875' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 10.5 13.5'/%3E%3Cpath d='M21 3 14.5 21l-4-7.5L3 9.5 21 3Z'/%3E%3C/svg%3E" );
	--sla-send-arrow: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B875' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E" );
	--sla-send-texture: repeating-linear-gradient( 90deg, rgba( 255, 255, 255, 0.03 ) 0 1px, transparent 1px 3px );
	--sla-send-fill: linear-gradient( 180deg, #93404f 0%, var( --sla-c-maroon ) 55%, #5e1f2d 100% );
	--sla-send-gap: 6.4em;
	display: block;
	width: 100%;
	min-height: 60px;
	margin: 0;
	padding: 0.95rem 3.5rem;
	border: 1px solid #521a27;
	border-radius: 12px;
	background-color: var( --sla-c-maroon );
	background-image: var( --sla-send-icon ), var( --sla-send-arrow ), var( --sla-send-texture ), var( --sla-send-fill );
	background-position: calc( 50% - var( --sla-send-gap ) ) center, calc( 50% + var( --sla-send-gap ) ) center, 0 0, 0 0;
	background-size: 20px, 20px, auto, auto;
	background-repeat: no-repeat;
	box-shadow:
		inset 0 1px 0 rgba( 255, 255, 255, 0.22 ),
		inset 0 0 0 3px var( --sla-c-maroon ),
		inset 0 0 0 4px color-mix( in srgb, var( --sla-light-gold ) 40%, transparent ),
		0 16px 30px -18px rgba( 94, 31, 45, 0.85 );
	color: #fff;
	font-family: var( --sla-font-body );
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-align: center;
	text-shadow: 0 1px 0 rgba( 0, 0, 0, 0.22 );
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: filter 220ms ease, transform 220ms ease, box-shadow 220ms ease, background-position 220ms ease;
}

.sla-contact-page .wpcf7 input.sla-cf__submit:hover,
.sla-contact-page .wpcf7 input.sla-cf__submit:focus-visible {
	filter: brightness( 1.08 );
	background-position: calc( 50% - var( --sla-send-gap ) ) center, calc( 50% + var( --sla-send-gap ) + 4px ) center, 0 0, 0 0;
	box-shadow:
		inset 0 1px 0 rgba( 255, 255, 255, 0.3 ),
		inset 0 0 0 3px var( --sla-c-maroon ),
		inset 0 0 0 4px color-mix( in srgb, var( --sla-light-gold ) 60%, transparent ),
		0 22px 34px -18px rgba( 94, 31, 45, 0.9 );
}

@media ( hover: hover ) {
	.sla-contact-page .wpcf7 input.sla-cf__submit:hover {
		transform: translateY( -1px );
	}
}

.sla-contact-page .wpcf7 input.sla-cf__submit:active {
	transform: translateY( 0 );
	filter: brightness( 0.97 );
}

.sla-contact-page .wpcf7 input.sla-cf__submit:focus-visible {
	outline: 2px solid var( --sla-champagne-gold );
	outline-offset: 3px;
}

/* Sending (CF7 adds .submitting to the form): the arrow gives way to CF7's
 * own spinner, which sits inside the button where the arrow was. */
.sla-contact-page .wpcf7 form.submitting input.sla-cf__submit {
	cursor: progress;
	filter: saturate( 0.8 ) brightness( 0.95 );
	transform: none;
	background-image: var( --sla-send-icon ), none, var( --sla-send-texture ), var( --sla-send-fill );
}

.sla-contact-page .wpcf7 input.sla-cf__submit:disabled {
	cursor: not-allowed;
	opacity: 0.62;
	filter: saturate( 0.6 );
	transform: none;
}

.sla-contact-page .sla-cf__actions .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 1.4rem;
	width: 22px;
	height: 22px;
	margin: -11px 0 0;
	background-color: rgba( 255, 255, 255, 0.22 );
	pointer-events: none;
}

/* Response message (success / validation / failure). */
.sla-contact-page .wpcf7 form .wpcf7-response-output {
	margin: 1.1rem 0 0;
	padding: 0.85rem 1.1rem;
	border: 1px solid var( --sla-c-line );
	border-left-width: 4px;
	border-radius: 8px;
	background: var( --sla-ivory );
	color: var( --sla-deep-navy );
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.5;
}

.sla-contact-page .wpcf7 form.sent .wpcf7-response-output {
	border-color: color-mix( in srgb, var( --sla-emerald ) 45%, var( --sla-c-line ) );
	border-left-color: var( --sla-emerald );
	background: color-mix( in srgb, var( --sla-emerald ) 8%, var( --sla-white ) );
}

.sla-contact-page .wpcf7 form.invalid .wpcf7-response-output,
.sla-contact-page .wpcf7 form.unaccepted .wpcf7-response-output,
.sla-contact-page .wpcf7 form.payment-required .wpcf7-response-output {
	border-color: color-mix( in srgb, var( --sla-champagne-gold ) 55%, var( --sla-c-line ) );
	border-left-color: var( --sla-champagne-gold );
	background: color-mix( in srgb, var( --sla-light-gold ) 14%, var( --sla-white ) );
}

.sla-contact-page .wpcf7 form.failed .wpcf7-response-output,
.sla-contact-page .wpcf7 form.aborted .wpcf7-response-output,
.sla-contact-page .wpcf7 form.spam .wpcf7-response-output {
	border-color: color-mix( in srgb, var( --sla-wine ) 40%, var( --sla-c-line ) );
	border-left-color: var( --sla-wine );
	background: color-mix( in srgb, var( --sla-wine ) 6%, var( --sla-white ) );
}

/* -----------------------------------------------------------------------
 * 5. C. How can we help
 * --------------------------------------------------------------------- */
.sla-contact-help__grid {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: clamp( 0.75rem, 1.4vw, 1.1rem );
}

.sla-contact-help__item {
	display: flex;
}

/* Help cards: one accent each (teal, terracotta, emerald, maroon) on the
 * icon medallion and a crown rule that draws in on hover. */
.sla-contact-help__item {
	--sla-topic: var( --sla-c-teal );
}

.sla-contact-help__item:nth-child( 2 ) {
	--sla-topic: var( --sla-c-terracotta );
}

.sla-contact-help__item:nth-child( 3 ) {
	--sla-topic: var( --sla-c-emerald );
}

.sla-contact-help__item:nth-child( 4 ) {
	--sla-topic: var( --sla-c-maroon );
}

.sla-contact-topic {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	padding: clamp( 1.4rem, 2.2vw, 1.9rem ) 1.15rem;
	overflow: hidden;
	border: 1px solid var( --sla-c-line );
	border-radius: 14px;
	background: linear-gradient( 180deg, var( --sla-white ) 0%, var( --sla-c-card ) 100% );
	box-shadow: var( --sla-c-shadow );
	color: inherit;
	text-align: center;
	text-decoration: none;
	transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.sla-contact-topic::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var( --sla-topic );
	transform: scaleX( 0.2 );
	opacity: 0.6;
	transition: transform 300ms ease, opacity 300ms ease;
}

.sla-contact-topic:hover,
.sla-contact-topic:focus-visible {
	border-color: color-mix( in srgb, var( --sla-topic ) 35%, var( --sla-c-line ) );
	box-shadow: 0 24px 38px -26px color-mix( in srgb, var( --sla-topic ) 70%, rgba( 7, 59, 76, 0.6 ) );
	color: inherit;
}

.sla-contact-topic:hover::before,
.sla-contact-topic:focus-visible::before {
	transform: scaleX( 1 );
	opacity: 1;
}

@media ( hover: hover ) {
	.sla-contact-topic:hover {
		transform: translateY( -3px );
	}
}

.sla-contact-topic__icon {
	width: 62px;
	height: 62px;
	margin-bottom: 0.95rem;
	padding: 14px;
	border: 1px solid color-mix( in srgb, var( --sla-topic ) 22%, transparent );
	border-radius: 50%;
	background: radial-gradient( circle at 50% 30%, var( --sla-white ) 0%, color-mix( in srgb, var( --sla-topic ) 12%, var( --sla-ivory ) ) 100% );
	box-shadow: 0 0 0 5px color-mix( in srgb, var( --sla-topic ) 6%, transparent );
	color: var( --sla-topic );
	transition: background 260ms ease, color 260ms ease;
}

.sla-contact-topic:hover .sla-contact-topic__icon,
.sla-contact-topic:focus-visible .sla-contact-topic__icon {
	background: radial-gradient( circle at 50% 30%, color-mix( in srgb, var( --sla-topic ) 75%, var( --sla-white ) ) 0%, var( --sla-topic ) 100% );
	color: var( --sla-ivory );
}

.sla-contact-topic__title {
	font-family: var( --sla-font-display );
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.25;
	color: var( --sla-peacock-navy );
}

.sla-contact-topic__text {
	margin-top: 0.4rem;
	font-size: 0.84rem;
	line-height: 1.5;
	color: var( --sla-muted-blue );
}

/* -----------------------------------------------------------------------
 * 6. D. FAQ
 * --------------------------------------------------------------------- */
.sla-contact-faq {
	padding-bottom: clamp( 2.5rem, 4.5vw, 4rem );
}

.sla-contact-faq__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0.75rem 1.25rem;
	align-items: start;
}

.sla-contact-faq__col {
	display: grid;
	gap: 0.75rem;
}

.sla-contact-faq__item {
	border: 1px solid var( --sla-c-line );
	border-radius: 10px;
	background: var( --sla-white );
	box-shadow: 0 10px 22px -22px rgba( 7, 59, 76, 0.5 );
	scroll-margin-top: 140px;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}

.sla-contact-faq__item:hover {
	border-color: color-mix( in srgb, var( --sla-champagne-gold ) 45%, var( --sla-c-line ) );
}

/* Open answer: maroon edge on the left. */
.sla-contact-faq__item[open] {
	border-color: color-mix( in srgb, var( --sla-champagne-gold ) 60%, transparent );
	box-shadow: inset 3px 0 0 var( --sla-c-maroon ), 0 18px 30px -26px rgba( 7, 59, 76, 0.55 );
}

.sla-contact-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 52px;
	padding: 0.85rem 1.15rem;
	color: var( --sla-peacock-navy );
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.sla-contact-faq__q::-webkit-details-marker {
	display: none;
}

.sla-contact-faq__toggle {
	flex: none;
	width: 28px;
	height: 28px;
	padding: 5px;
	border: 1px solid color-mix( in srgb, var( --sla-champagne-gold ) 45%, transparent );
	border-radius: 50%;
	background: var( --sla-ivory );
	color: var( --sla-c-maroon );
	transition: transform 220ms ease, background-color 220ms ease, color 220ms ease;
}

.sla-contact-faq__toggle svg {
	stroke-width: 3.6;
}

.sla-contact-faq__item[open] .sla-contact-faq__toggle {
	background: var( --sla-c-maroon );
	color: var( --sla-ivory );
	transform: rotate( 45deg );
}

.sla-contact-faq__a {
	padding: 0 1.15rem 1.05rem;
}

.sla-contact-faq__a p {
	margin: 0;
	padding-top: 0.85rem;
	border-top: 1px solid var( --sla-c-line );
	font-size: 0.9rem;
	line-height: 1.65;
	color: var( --sla-deep-navy );
}

.sla-contact-faq__a a {
	color: var( --sla-antique-gold );
	font-weight: 700;
	text-underline-offset: 3px;
}

.sla-contact-faq__a a:hover {
	color: var( --sla-peacock-navy );
}

/* -----------------------------------------------------------------------
 * 7. E. CTA band — deep peacock field with the brass mandala.
 * --------------------------------------------------------------------- */
.sla-contact-cta {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient( ellipse 50% 120% at 85% 50%, color-mix( in srgb, var( --sla-deep-teal ) 55%, transparent ) 0%, transparent 70% ),
		linear-gradient( 90deg, var( --sla-deep-navy ) 0%, var( --sla-peacock-navy ) 100% );
	color: var( --sla-ivory );
	isolation: isolate;
}

.sla-contact-mandala--cta {
	top: 50%;
	left: 0;
	width: clamp( 130px, 14vw, 220px );
	opacity: 0.22;
	transform: translate( -30%, -50% );
	filter: brightness( 1.6 );
}

.sla-contact-cta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp( 1.5rem, 3vw, 3rem );
	width: 100%;
	max-width: 1320px;
	min-height: clamp( 170px, 13vw, 200px );
	margin-inline: auto;
	padding: clamp( 2rem, 3.2vw, 2.5rem ) var( --sla-c-gutter );
	padding-left: max( var( --sla-c-gutter ), clamp( 1.5rem, 8vw, 8rem ) );
}

.sla-contact-cta__copy {
	flex: 1 1 auto;
	max-width: 34rem;
}

.sla-contact-cta__title {
	margin: 0;
	font-family: var( --sla-font-display );
	font-size: clamp( 1.7rem, 1.4rem + 1.1vw, 2.35rem );
	font-weight: 600;
	line-height: 1.15;
	color: var( --sla-ivory );
}

.sla-contact-cta__text {
	margin: 0.55rem 0 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: color-mix( in srgb, var( --sla-ivory ) 86%, transparent );
}

.sla-contact-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.sla-contact-cta__quote {
	flex: none;
	margin: 0;
	color: var( --sla-light-gold );
	font-family: var( --sla-font-display );
	font-size: clamp( 1.2rem, 1rem + 0.6vw, 1.55rem );
	font-style: italic;
	font-weight: 500;
	line-height: 1.25;
	max-width: 9rem;
}

.sla-contact-cta__quote span {
	color: var( --sla-champagne-gold );
	font-size: 1.4em;
	line-height: 0;
	vertical-align: -0.2em;
}

/* -----------------------------------------------------------------------
 * 8. F. Trust strip
 * --------------------------------------------------------------------- */
.sla-contact-trust {
	border-bottom: 1px solid var( --sla-c-line );
	background: var( --sla-ivory );
}

.sla-contact-trust__list {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	width: 100%;
	max-width: 1320px;
	margin-inline: auto !important;
	padding: clamp( 1.25rem, 2.4vw, 1.75rem ) var( --sla-c-gutter ) !important;
}

.sla-contact-trust__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	padding: 0.25rem 1rem;
}

.sla-contact-trust__item + .sla-contact-trust__item {
	border-left: 1px solid var( --sla-c-line );
}

.sla-contact-trust__icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	color: var( --sla-c-accent );
}

.sla-contact-trust__text strong,
.sla-contact-trust__text small {
	display: block;
	line-height: 1.35;
}

.sla-contact-trust__text strong {
	font-family: var( --sla-font-display );
	font-size: 1.1rem;
	font-weight: 600;
	color: var( --sla-peacock-navy );
}

.sla-contact-trust__text small {
	font-size: 0.76rem;
	color: var( --sla-muted-blue );
}

/* -----------------------------------------------------------------------
 * 9. Reveal, reduced motion
 * --------------------------------------------------------------------- */
@media ( prefers-reduced-motion: no-preference ) {
	.sla-js .sla-contact-page [data-sla-contact-reveal] {
		opacity: 0;
		transform: translateY( 14px );
		transition: opacity 620ms ease var( --sla-reveal-delay, 0ms ), transform 620ms ease var( --sla-reveal-delay, 0ms );
	}

	.sla-js .sla-contact-page [data-sla-contact-reveal].is-revealed {
		opacity: 1;
		transform: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.sla-contact-page *,
	.sla-contact-page *::before,
	.sla-contact-page *::after {
		transition-duration: 0ms !important;
	}
}

/* -----------------------------------------------------------------------
 * 10. Responsive
 * --------------------------------------------------------------------- */

/* Narrow desktop / landscape tablet: form across the top, the reach-us
 * cards and the arched card side by side beneath it. */
@media ( max-width: 1199px ) {
	.sla-contact-main__grid {
		grid-template-columns: minmax( 0, 1.25fr ) minmax( 0, 0.75fr );
	}

	.sla-contact-form {
		grid-column: 1 / -1;
	}

	.sla-contact-card {
		justify-self: center;
	}

	.sla-contact-hero__inner {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 0.8fr );
	}

	.sla-contact-hero__tagline {
		transform: translateX( -22% );
	}

	.sla-contact-cta__quote {
		display: none;
	}
}

@media ( max-width: 1023px ) {
	.sla-contact-help__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.sla-contact-trust__list {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		row-gap: 1rem;
	}

	.sla-contact-trust__item {
		justify-content: flex-start;
	}

	.sla-contact-trust__item:nth-child( 3 ) {
		border-left: 0;
	}
}

/* Tablet/phone hero (as on the Vastu page): arched photograph on top,
 * centred copy beneath. */
@media ( max-width: 899px ) {
	.sla-contact-hero {
		background:
			radial-gradient( ellipse 80% 34% at 50% 20%, color-mix( in srgb, var( --sla-light-gold ) 22%, transparent ) 0%, transparent 70% ),
			var( --sla-warm-cream );
	}

	.sla-contact-mandala--hero {
		top: 5rem;
		width: 120px;
		opacity: 0.26;
		transform: translateX( -45% );
	}

	.sla-contact-mandala--hero-right {
		top: 5rem;
		width: 120px;
		opacity: 0.2;
		transform: translateX( 45% ) scaleX( -1 );
	}

	.sla-contact-hero__inner {
		grid-template-columns: minmax( 0, 1fr );
		gap: 1.75rem;
		padding: 1.75rem var( --sla-c-gutter ) 2.5rem;
	}

	.sla-contact-hero__media {
		--sla-arch: 50% 50% 14px 14px / 46% 46% 14px 14px;
		order: -1;
		width: min( 100%, 360px );
		padding: 10px;
	}

	.sla-contact-hero__frame {
		aspect-ratio: 1 / 1.08;
	}

	.sla-contact-page .sla-contact-hero__idol {
		object-position: 50% 30%;
	}

	.sla-contact-hero__tagline {
		bottom: 1.25rem;
		left: 50%;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		column-gap: 0.35em;
		padding: 0.6rem 1rem 0.65rem;
		font-size: 1.05rem;
		white-space: nowrap;
		transform: translate( -50%, 50% );
	}

	.sla-contact-hero__tagline-rule {
		display: none;
	}

	.sla-contact-hero__copy {
		max-width: 640px;
		margin-inline: auto;
		text-align: center;
	}

	.sla-contact-hero__text,
	.sla-contact-hero__divider,
	.sla-contact-hero__promises {
		margin-inline: auto;
	}

	.sla-contact-hero__divider::before {
		content: "";
		flex: 1;
		height: 1px;
		background: linear-gradient( 270deg, var( --sla-champagne-gold ), transparent );
	}

	.sla-contact-hero__promise:first-child {
		padding-left: 0.6rem;
	}

	.sla-contact-cta__inner {
		flex-direction: column;
		align-items: flex-start;
		padding-left: var( --sla-c-gutter );
	}

	.sla-contact-mandala--left,
	.sla-contact-mandala--right {
		width: 90px;
		opacity: 0.2;
	}
}

@media ( max-width: 699px ) {
	.sla-contact-main__grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* Stacked: a centred portrait card at its own capped height. */
	.sla-contact-card {
		--sla-arch: 50% 50% 14px 14px / 140px 140px 14px 14px;
		max-width: 340px;
		aspect-ratio: 5 / 7;
		max-height: 480px;
	}

	.sla-contact-card::after {
		border-radius: 50% 50% 10px 10px / 132px 132px 10px 10px;
	}
}

@media ( max-width: 599px ) {
	.sla-contact-hero__title {
		font-size: clamp( 2rem, 1.4rem + 3.2vw, 2.4rem );
	}

	.sla-contact-hero__promise {
		padding-inline: 0.4rem;
	}

	.sla-contact-hero__promise strong,
	.sla-contact-hero__promise small {
		font-size: 0.72rem;
	}

	.sla-contact-page .sla-cf__grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sla-contact-page .wpcf7 input.sla-cf__submit {
		--sla-send-gap: 6.2em;
		padding-inline: 3rem;
		letter-spacing: 0.14em;
	}

	.sla-contact-mandala--cta {
		display: none;
	}

	.sla-contact-help__grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sla-contact-topic {
		display: grid;
		grid-template-columns: auto minmax( 0, 1fr );
		column-gap: 1rem;
		align-items: center;
		padding: 1rem 1.1rem;
		text-align: left;
	}

	.sla-contact-topic__icon {
		grid-row: span 2;
		width: 50px;
		height: 50px;
		margin: 0;
		padding: 11px;
	}

	.sla-contact-topic__text {
		margin-top: 0.2rem;
	}

	.sla-contact-faq__grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sla-contact-cta__actions,
	.sla-contact-cta__actions .sla-contact-btn {
		width: 100%;
	}

	.sla-contact-trust__list {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sla-contact-trust__item,
	.sla-contact-trust__item + .sla-contact-trust__item {
		padding-inline: 0.25rem;
		border-left: 0;
	}
}