/*
 * Contact page redesign (2026-10-02), from eft-matrix-contact-coding-agent-handover.md.
 *
 * Loaded only with the template-contact template (inc/block-styles.php), after
 * home.css, whose .eft-home-photo rules supply the dark-on-light text for the
 * light sections and whose pill buttons this page shares. Rhythm: light hero,
 * dark enquiry, light calendar, dark reassurance, light closing invitation.
 *
 * Specificity. home.css puts light-section text back to Ink at 0-2-1 and v2
 * forces Off White on bare tags with !important, so every colour here is
 * restated at 0-3-0 or above with !important. Measure, do not assume: see the
 * contrast notes in CLAUDE.md for the method (hide the text with
 * setProperty(..., 'important') before sampling the ground).
 *
 * Icons are Lucide (ISC), as CSS masks on pseudo-elements, the same route as
 * the card marks in block-styles.css: no markup, out of the accessibility
 * tree, coloured from tokens. The leaf flourishes are decorative backgrounds
 * on pseudo-elements for the same reasons, and never reach the database.
 */

:root {
	--eft-contact-cream: #f9f8f1;
	--eft-contact-gold: #d4af37;
	--eft-contact-panel: rgba(250, 252, 251, 0.07);
	--eft-contact-edge: rgba(250, 252, 251, 0.16);
	--eft-contact-icon-leaf: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cg fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"%3E%3Cpath d="M11 20a10 10 0 0 0 10-10a25.9 25.9 0 0 0-1.04-7.281a1 1 0 0 0-1.755-.325C15.833 5.5 13 5.5 9.8 6.1A7 7 0 0 0 11 20"/%3E%3Cpath d="M2 21a5 5 0 0 1 2.911-4.544C7.613 15.212 8.351 15.24 11 13"/%3E%3C/g%3E%3C/svg%3E');
	--eft-contact-icon-calendar: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cg fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"%3E%3Cpath d="M8 2v3m8-3v3"/%3E%3Crect width="18" height="18" x="3" y="3" rx="2"/%3E%3Cpath d="M3 9h18M9 15l2 2l4-4"/%3E%3C/g%3E%3C/svg%3E');
	--eft-contact-icon-heart: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676a.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/%3E%3C/svg%3E');
	--eft-contact-icon-question: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cg fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"%3E%3Cpath d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092a10 10 0 1 0-4.777-4.719"/%3E%3Cpath d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3m.08 4h.01"/%3E%3C/g%3E%3C/svg%3E');
	--eft-contact-icon-clock: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cg fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"%3E%3Ccircle cx="12" cy="12" r="10"/%3E%3Cpath d="M12 6v6l4 2"/%3E%3C/g%3E%3C/svg%3E');
	--eft-contact-icon-coffee: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 2v2m4-2v2m2 4a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1M6 2v2"/%3E%3C/svg%3E');
	--eft-contact-icon-alert: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cg fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"%3E%3Ccircle cx="12" cy="12" r="10"/%3E%3Cpath d="M12 8v4m0 4h.01"/%3E%3C/g%3E%3C/svg%3E');
	--eft-contact-icon-check: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"/%3E%3C/svg%3E');
	--eft-contact-icon-mail: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cg fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"%3E%3Cpath d="m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/%3E%3Crect width="20" height="16" x="2" y="4" rx="2"/%3E%3C/g%3E%3C/svg%3E');
	--eft-contact-icon-phone: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233a14 14 0 0 0 6.392 6.384"/%3E%3C/svg%3E');
}

/* ---- Shared ------------------------------------------------------------ */

.wp-site-blocks .eft-contact-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--eft-contact-gold) !important;
}

.wp-site-blocks .eft-home-photo .eft-contact-eyebrow {
	color: var(--wp--preset--color--deep-teal) !important;
}

/* A list of short labels, each led by a line mark. */
.wp-site-blocks :is(.eft-contact-points, .eft-contact-benefits) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 0;
	list-style: none;
}

.wp-site-blocks :is(.eft-contact-points, .eft-contact-benefits) > li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	font-size: 0.9375rem;
	line-height: 1.35;
}

.wp-site-blocks :is(.eft-contact-points, .eft-contact-benefits) > li::before {
	content: "";
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	background-color: var(--wp--preset--color--primary-teal);
	-webkit-mask: var(--eft-contact-icon) center / contain no-repeat;
	mask: var(--eft-contact-icon) center / contain no-repeat;
}

.eft-contact-mark-leaf { --eft-contact-icon: var(--eft-contact-icon-leaf); }
.eft-contact-mark-calendar { --eft-contact-icon: var(--eft-contact-icon-calendar); }
.eft-contact-mark-heart { --eft-contact-icon: var(--eft-contact-icon-heart); }
.eft-contact-mark-question { --eft-contact-icon: var(--eft-contact-icon-question); }
.eft-contact-mark-clock { --eft-contact-icon: var(--eft-contact-icon-clock); }
.eft-contact-mark-coffee { --eft-contact-icon: var(--eft-contact-icon-coffee); }

.wp-site-blocks .eft-contact-photo {
	margin: 0 !important;
}

.wp-site-blocks .eft-contact-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 14px;
}

/* ---- 1. Hero ----------------------------------------------------------- */

.wp-block-cover.eft-home-photo-contact-hero {
	position: relative;
}

/* The decorative sprig sits above the veil and below the text. */
.wp-block-cover.eft-home-photo-contact-hero > .wp-block-cover__inner-container {
	z-index: 2;
}

.wp-block-cover.eft-home-photo-contact-hero::after {
	content: "";
	position: absolute;
	z-index: 1;
	left: -36px;
	bottom: -28px;
	width: 230px;
	height: 226px;
	background: url("../images/contact-leaf-corner-1.webp") left bottom / contain no-repeat;
	opacity: 0.32;
	transform: scaleX(-1);
	pointer-events: none;
}

.wp-site-blocks .eft-contact-hero {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}

.wp-site-blocks .eft-contact-hero > * {
	max-width: 680px;
}

.wp-site-blocks .eft-home-photo h1.eft-contact-title {
	/* Gold title (2026-10-02). Large text, so 3:1 is the bar; brand #d4af37
	   is 1.98:1 on cream, #a07d14 is 3.63:1 on plain cream. Measured on the
	   rendered hero, see CLAUDE.md. */
	color: #a07d14 !important;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	/* 3.5rem keeps the title on one line at 1280 and up, which is worth about
	   70px: the first form input is measured against the fold (CLAUDE.md). */
	font-size: clamp(2.6rem, 4.6vw, 3.5rem);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.04;
	text-transform: none;
}

.wp-site-blocks .eft-home-photo .eft-contact-lead {
	margin-top: var(--wp--preset--spacing--40);
	font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
	line-height: 1.5;
}

/* Four across from 1024px, as in the mock-up; the list is allowed past the
   600px text measure to fit them. */
.wp-site-blocks .eft-contact-hero > .eft-contact-points {
	max-width: 760px;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.wp-site-blocks .eft-contact-points > li {
	max-width: 10.5rem;
}

/* Wide screens: the butterfly sits clear of the text, so the veil opens on
   the right, as home.css does for its left-weighted sections. Only from
   1200px: at 834 the lead and the fourth point ran over the butterfly and
   measured 2.07:1 and 1.93:1, so below 1200 the hero stacks instead. */
@media (min-width: 1200px) {
	/* Raised from the builder's 50% 50% so the upper wing clears the header. */
	.wp-block-cover.eft-home-photo-contact-hero > .wp-block-cover__image-background {
		object-position: 50% 32% !important;
	}

	.wp-block-cover.eft-home-photo-contact-hero > .wp-block-cover__background {
		background-image: linear-gradient(90deg,
			rgba(var(--eft-home-veil), 0.95) 0%,
			rgba(var(--eft-home-veil), 0.9) 42%,
			rgba(var(--eft-home-veil), 0.35) 62%,
			rgba(var(--eft-home-veil), 0) 80%) !important;
	}
}

/* Below 1200px: the text goes first on a solid cream ground and the
   butterfly takes a band of its own beneath it, as the handover asks for
   mobile. The cover image is confined to that band rather than cropped
   behind the copy, and the veil starts its fade exactly where the image
   starts, so there is no edge. The band costs the form its place on the first
   phone screen (first input about 920px at 390x844, against 656px before the
   redesign), so phones drop it; see the block after this one. */
@media (max-width: 1199.98px) {
	.wp-block-cover.eft-home-photo-contact-hero {
		--eft-contact-band: clamp(200px, 24vw, 260px);
	}

	/* .wp-site-blocks: home.css zeroes cover padding at 0-3-0. */
	.wp-site-blocks .wp-block-cover.eft-home-photo-contact-hero {
		padding-bottom: var(--eft-contact-band) !important;
	}

	.wp-block-cover.eft-home-photo-contact-hero > .wp-block-cover__image-background {
		top: auto !important;
		height: calc(var(--eft-contact-band) + 30px) !important;
		object-position: 72% 42% !important;
	}

	.wp-block-cover.eft-home-photo-contact-hero > .wp-block-cover__background {
		background-image: linear-gradient(180deg,
			rgb(var(--eft-home-veil)) 0,
			rgb(var(--eft-home-veil)) calc(100% - var(--eft-contact-band) - 30px),
			rgba(var(--eft-home-veil), 0) calc(100% - var(--eft-contact-band) + 80px)) !important;
	}

	.wp-site-blocks .eft-contact-hero {
		padding-top: var(--wp--preset--spacing--70);
		padding-bottom: var(--wp--preset--spacing--40);
	}

	.wp-block-cover.eft-home-photo-contact-hero::after {
		display: none;
	}
}

/* Phones: no photo band at all (decided 2026-10-02). The band put the first
   form input at about 920px on a 390x844 screen; without it the form is back
   on the first screen. The cover image still downloads, as on the home hero. */
@media (max-width: 781.98px) {
	.wp-site-blocks .wp-block-cover.eft-home-photo-contact-hero {
		padding-bottom: 0 !important;
	}

	.wp-block-cover.eft-home-photo-contact-hero > .wp-block-cover__image-background {
		display: none !important;
	}

	.wp-block-cover.eft-home-photo-contact-hero > .wp-block-cover__background {
		background-image: none !important;
		background-color: rgb(var(--eft-home-veil)) !important;
	}

	.wp-site-blocks .eft-contact-hero {
		padding-bottom: var(--wp--preset--spacing--60);
	}

	.wp-site-blocks .eft-contact-points {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.eft-contact-panel {
		padding: var(--wp--preset--spacing--50);
	}
}

/* ---- 2. Enquiry (dark) ------------------------------------------------- */

.wp-block-group.eft-contact-enquiry,
.wp-block-group.eft-contact-reassure {
	padding-top: var(--wp--preset--spacing--80) !important;
	padding-bottom: var(--wp--preset--spacing--80) !important;
}

.wp-block-group.eft-contact-enquiry {
	padding-top: var(--wp--preset--spacing--60) !important;
}

.wp-block-columns.eft-contact-enquiry-cols {
	align-items: stretch !important;
}

.eft-contact-panel {
	height: 100%;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--eft-contact-edge);
	border-radius: 16px;
	background-color: var(--eft-contact-panel);
	overflow-wrap: break-word;
}

.eft-contact-panel > :first-child {
	margin-top: 0 !important;
}

.wp-site-blocks .eft-contact-form-panel h2 {
	margin-bottom: var(--wp--preset--spacing--50);
}

.wp-site-blocks .eft-contact-info h2 {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: clamp(1.375rem, 2vw, 1.625rem);
}

.wp-site-blocks .eft-contact-info h3 {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: 1.25rem;
}

.wp-site-blocks .eft-contact-info p,
.wp-site-blocks .eft-contact-info li {
	font-size: 1rem;
	line-height: 1.65;
}

.wp-site-blocks .wp-block-separator.eft-contact-rule {
	/* Core and v2 cap separators at 100px. */
	width: 100% !important;
	max-width: none !important;
	margin: var(--wp--preset--spacing--60) 0 !important;
	border: 0;
	border-top: 1px solid var(--eft-contact-edge);
	background: none;
	opacity: 1;
}

/* What the call covers: a soft mint chip with a Deepest Teal tick. */
.wp-site-blocks .eft-contact-covers {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-site-blocks .eft-contact-covers > li {
	position: relative;
	margin: 0;
	padding: 0.15rem 0 0 2.4rem;
}

.wp-site-blocks .eft-contact-covers > li + li {
	margin-top: 0.75rem;
}

.eft-contact-covers > li::before,
.eft-contact-covers > li::after {
	content: "";
	position: absolute;
	top: 0.1rem;
	left: 0;
	width: 26px;
	height: 26px;
}

.eft-contact-covers > li::before {
	border-radius: 50%;
	background-color: var(--wp--preset--color--soft-mint);
}

.eft-contact-covers > li::after {
	top: calc(0.1rem + 6px);
	left: 6px;
	width: 14px;
	height: 14px;
	background-color: var(--wp--preset--color--deepest-teal);
	-webkit-mask: var(--eft-contact-icon-check) center / contain no-repeat;
	mask: var(--eft-contact-icon-check) center / contain no-repeat;
}

.wp-site-blocks .eft-contact-links {
	margin-top: var(--wp--preset--spacing--40);
	line-height: 2.1 !important;
}

.eft-contact-links a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

.eft-contact-links a::before {
	content: "";
	width: 18px;
	height: 18px;
	background-color: var(--eft-contact-gold);
	-webkit-mask: var(--eft-contact-icon) center / contain no-repeat;
	mask: var(--eft-contact-icon) center / contain no-repeat;
}

.eft-contact-mail { --eft-contact-icon: var(--eft-contact-icon-mail); }
.eft-contact-tel { --eft-contact-icon: var(--eft-contact-icon-phone); }

/* The crisis line, set apart in its own quiet panel. */
.wp-site-blocks .eft-contact-crisis {
	position: relative;
	margin-top: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) 3.25rem;
	border-radius: 10px;
	background-color: rgba(250, 252, 251, 0.08);
	font-size: 0.9375rem !important;
	line-height: 1.6 !important;
}

.eft-contact-crisis::before {
	content: "";
	position: absolute;
	top: calc(var(--wp--preset--spacing--40) + 0.1rem);
	left: 1rem;
	width: 22px;
	height: 22px;
	background-color: var(--wp--preset--color--soft-mint);
	-webkit-mask: var(--eft-contact-icon-alert) center / contain no-repeat;
	mask: var(--eft-contact-icon-alert) center / contain no-repeat;
}

/* ---- 3. Calendar route (light) ----------------------------------------- */

.wp-site-blocks .wp-block-group.eft-contact-light {
	padding-top: var(--wp--preset--spacing--80) !important;
	padding-bottom: var(--wp--preset--spacing--80) !important;
	background: var(--eft-contact-cream) !important;
}

.wp-block-columns.eft-contact-booking-cols {
	column-gap: var(--wp--preset--spacing--80);
	row-gap: var(--wp--preset--spacing--60);
}

.wp-site-blocks .eft-contact-booking h2 {
	margin-top: 0;
}

.wp-site-blocks .eft-contact-booking-copy > p {
	font-size: 1.0625rem;
	line-height: 1.65;
}

.wp-site-blocks .eft-contact-benefits {
	margin-bottom: var(--wp--preset--spacing--60);
}

.wp-site-blocks .eft-contact-benefits > li {
	font-weight: 600;
}

/* The calendar's own panel loses its card on the cream ground: the section
   is the card. v2 paints it glass with !important, hence the weight here. */
.wp-site-blocks .eft-contact-booking .eft-matrix-calendly-intro {
	max-width: 34rem;
	padding: 0;
	border: 0;
	background: none !important;
}

.wp-site-blocks .eft-contact-booking .eft-matrix-calendly-action {
	margin-top: 0;
}

/* The calendar button is a global foil button (it carries
   .wp-block-button__link, see inc/calendly.php). */

.wp-site-blocks .eft-home-photo .eft-matrix-calendly-consent {
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted) !important;
}

/* Once the calendar is open it needs the full measure: Calendly drops to its
   cramped stacked layout below about 680px. The photograph steps aside. */
.eft-contact-booking:has([data-eft-calendly-frame]:not([hidden])) .eft-contact-booking-photo {
	display: none;
}

.eft-contact-booking:has([data-eft-calendly-frame]:not([hidden])) .eft-contact-booking-copy {
	flex-basis: 100% !important;
}

/* ---- 4. Reassurance (dark) --------------------------------------------- */

.wp-block-columns.eft-contact-reassure-cols {
	column-gap: var(--wp--preset--spacing--80);
	row-gap: var(--wp--preset--spacing--60);
}

.wp-site-blocks .eft-contact-reassure h2 {
	margin-top: 0;
	font-size: clamp(1.75rem, 3vw, 2.375rem);
	line-height: 1.2;
}

.wp-site-blocks .eft-contact-reassure p:not(.eft-contact-eyebrow) {
	font-size: 1.125rem;
	line-height: 1.65;
}

/* ---- 5. Closing invitation (light) ------------------------------------- */

.wp-block-cover.eft-home-photo-contact-cta {
	position: relative;
}

.wp-block-cover.eft-home-photo-contact-cta > .wp-block-cover__inner-container {
	z-index: 2;
}

.wp-block-cover.eft-home-photo-contact-cta::after {
	content: "";
	position: absolute;
	z-index: 1;
	left: -40px;
	bottom: -20px;
	width: 300px;
	height: 306px;
	background: url("../images/contact-leaf-corner-2.webp") left bottom / contain no-repeat;
	opacity: 0.4;
	transform: scaleX(-1);
	pointer-events: none;
}

.wp-site-blocks .eft-contact-cta {
	padding-top: var(--wp--preset--spacing--90);
	padding-bottom: var(--wp--preset--spacing--90);
	text-align: center;
}

.wp-site-blocks .eft-contact-cta h2 {
	margin: 0;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.1;
}

.wp-site-blocks .eft-contact-cta p:not(.eft-contact-eyebrow) {
	margin-top: var(--wp--preset--spacing--40);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.wp-site-blocks .eft-contact-cta .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--60);
}

@media (max-width: 781.98px) {
	.wp-block-cover.eft-home-photo-contact-cta::after {
		width: 170px;
		height: 174px;
		opacity: 0.28;
	}
}

/* ---- The same closing section rendered from a template (2026-10-02) -------
   patterns/closing-light.php and about-cta.php. Its button is the global gold
   foil, like every other button on the site. */

/* Edge to edge with whatever precedes it: main's flow layout puts a 24px
   block gap before the pattern, which showed as a dark strip. */
.wp-site-blocks main > .wp-block-cover.eft-home-photo-contact-cta,
.wp-site-blocks main > * > .wp-block-cover.eft-home-photo-contact-cta,
.wp-site-blocks > .wp-block-cover.eft-home-photo-contact-cta { /* home.html puts it outside main */
	margin-block-start: 0 !important;
}