/*
Theme Name: Lifetime Mortgage Boutique
Template: zero-digital-base
Author: Zero Digital
Description: Child theme for lifetimemortgageboutique.co.uk (Buckingham James Financial Services Ltd). Plum, purple and lavender from the Lifetime Mortgage Boutique logo, Poppins self-hosted, and a restrained type scale. Colours and type live in theme.json: the site runs the Default look, so theme.json is the single home for them (README section 5). Requires Zero Digital Base and Components 0.39.1 or later.
Version: 1.2.3
License: GPLv2 or later
Text Domain: lifetime-mortgage-boutique
*/

/* -----------------------------------------------------------------------------
 * Per-client style overrides
 * -----------------------------------------------------------------------------
 * Rules (full version in README.md):
 *   • Target the documented .zerodigital-* class hooks (README §7).
 *   • Use a design token for every value — var(--wp--preset--*),
 *     var(--wp--custom--*), var(--zd-*). Never hardcode a hex, px shadow, radius.
 *   • Never override a setting the site's UI already controls (README §5) —
 *     alignment, colours, block variants, visibility, logo, content.
 *   • No !important (except to beat a WordPress has-*-font-size preset).
 *
 * Built to the "Lifetime Mortgage Boutique redesign" design canvas. Layout —
 * the content column, section labels, split About and FAQ, logo groups, section
 * backgrounds, dark-ground buttons — is the platform's since 0.39; this file
 * holds only the design's own look: scale, rhythm, surfaces and details.
 * -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * 1. Scale and rhythm
 *
 * Every block sizes its headings from these steps. Caps: display 50, h2 32,
 * h3 20, lede 18. Floors on a phone: 34, 26, 19, 17.
 * -------------------------------------------------------------------------- */
:root {
	--zd-step-display: clamp(2.125rem, 1.4rem + 2.2vw, 3.125rem);
	--zd-step-h2: clamp(1.625rem, 1.3rem + 1vw, 2rem);
	--zd-step-h3: clamp(1.1875rem, 1.15rem + 0.15vw, 1.25rem);
	--zd-step-lede: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
	--zd-spec-size: var(--wp--preset--font-size--small);
	--zd-btn-min-h: 3.125rem;
	--zd-section-corner: var(--wp--custom--radius--xl);
	--zd-header-height: 5.25rem;
	--zd-section-pad: clamp(3.5rem, 7vw, 5.5rem);
}

/* Section labels: the logo's dot, purple, sentence case. */
.zd-spec {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.zd-spec[class*="__eyebrow"] {
	margin-bottom: 1rem;
}

.zd-bg-dark .zd-spec {
	color: var(--wp--custom--lilac);
}

/* Text links on a plum section (a phone number in a hero, say). The site's link
 * colour is purple and its hover is plum, so on a plum ground a link starts at
 * 1.4:1 and vanishes on hover. White with a lilac underline, lilac on hover.
 * Buttons that happen to be links keep their own treatment. */
.zd-bg-dark a:where(:not([class*="__cta"], [class*="__button"], [class*="__call"], .wp-element-button, .wp-block-button__link)) {
	color: var(--wp--preset--color--background);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--wp--custom--lilac) 70%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.zd-bg-dark a:where(:not([class*="__cta"], [class*="__button"], [class*="__call"], .wp-element-button, .wp-block-button__link)):hover,
.zd-bg-dark a:where(:not([class*="__cta"], [class*="__button"], [class*="__call"], .wp-element-button, .wp-block-button__link)):focus-visible {
	color: var(--wp--custom--lilac);
	text-decoration-color: currentColor;
}

/* -----------------------------------------------------------------------------
 * 2. Header
 * -------------------------------------------------------------------------- */
.zerodigital-header__bar {
	padding-block: 1.25rem;
}

.zerodigital-site-brand__logo {
	max-height: 2.75rem;
	max-width: 17.5rem;
}

.zerodigital-header__actions .wp-block-navigation a::after {
	background: var(--wp--preset--color--primary);
}

.zerodigital-header__actions .zerodigital-business-phone {
	color: var(--wp--preset--color--secondary);
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 30%, var(--wp--preset--color--background));
}

.zerodigital-header__actions .zerodigital-business-phone:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

@media (max-width: 600px) {
	:root {
		--zd-header-height: 4.5rem;
	}

	.zerodigital-header__bar {
		padding-block: 0.875rem;
	}

	.zerodigital-site-brand__logo {
		max-height: 2rem;
		max-width: 12.5rem;
	}
}

/* -----------------------------------------------------------------------------
 * 3. Buttons — one size and weight everywhere a block draws its own.
 * -------------------------------------------------------------------------- */
.zerodigital-hero-home__cta:not(.zerodigital-hero-home__cta--secondary),
.zerodigital-hero-subpage__cta,
.zerodigital-cta-banner__button,
.zerodigital-contact__call {
	min-height: var(--zd-btn-min-h);
	padding: 0 1.625rem;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
}

.zerodigital-hero-home__cta--secondary {
	font-size: 0.9375rem;
	font-weight: 500;
}

/* The white pill on a plum hero takes the plum as its label (the platform's
 * inversion uses primary purple). */
.zerodigital-hero-home.zd-bg-dark .zerodigital-hero-home__cta:not(.zerodigital-hero-home__cta--secondary),
.zerodigital-hero-subpage.zd-bg-dark .zerodigital-hero-subpage__cta,
.zerodigital-cta-banner:not(.zd-bg-light) .zerodigital-cta-banner__button {
	color: var(--wp--preset--color--secondary);
	box-shadow: none;
}

.zerodigital-hero-home.zd-bg-dark .zerodigital-hero-home__cta:not(.zerodigital-hero-home__cta--secondary):hover,
.zerodigital-hero-subpage.zd-bg-dark .zerodigital-hero-subpage__cta:hover,
.zerodigital-cta-banner:not(.zd-bg-light) .zerodigital-cta-banner__button:hover {
	background: var(--wp--custom--band);
	color: var(--wp--preset--color--secondary);
}

/* -----------------------------------------------------------------------------
 * 4. Heroes
 * -------------------------------------------------------------------------- */
.zerodigital-hero-home {
	padding-block: clamp(3rem, 6vw, 5.5rem);
}

.zerodigital-hero-home__inner--image-left,
.zerodigital-hero-home__inner--image-right {
	gap: clamp(2.5rem, 6vw, 5rem);
}

.zerodigital-hero-home__heading {
	font-size: var(--zd-step-display);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin-bottom: 1.375rem;
}

.zerodigital-hero-home__subtext {
	max-width: 32rem;
	margin-bottom: 2.25rem;
}

.zerodigital-hero-home--split .zerodigital-hero-home__media img {
	aspect-ratio: 20 / 21;
	object-fit: cover;
}

@media (max-width: 782px) {
	.zerodigital-hero-home--split .zerodigital-hero-home__media img {
		aspect-ratio: 5 / 4;
	}
}

.zerodigital-hero-home__trust {
	max-width: 32rem;
	margin-block-start: 2.5rem;
	padding-top: 1.5rem;
	gap: 0.875rem;
	font-size: 0.9375rem;
}

.zerodigital-hero-home__trust-rating {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	letter-spacing: 0;
}

.zerodigital-hero-home__trust-prefix {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.zerodigital-hero-subpage {
	padding-block: clamp(3rem, 6vw, 5rem);
	border-bottom: 0;
}

.zerodigital-hero-subpage__inner:has(.zerodigital-hero-subpage__media) {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2.5rem, 6vw, 4.5rem);
}

@media (max-width: 782px) {
	.zerodigital-hero-subpage__inner:has(.zerodigital-hero-subpage__media) {
		grid-template-columns: minmax(0, 1fr);
	}
}

.zerodigital-hero-subpage__heading {
	max-width: 19em;
	font-size: clamp(1.875rem, 1.3rem + 1.9vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin-bottom: 1.25rem;
}

.zerodigital-hero-subpage__subtext {
	max-width: 40rem;
	margin-bottom: 2rem;
	font-size: var(--zd-step-lede);
}

.zerodigital-hero-subpage__media img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* -----------------------------------------------------------------------------
 * 5. Risk warning (compliance bar, dedicated section)
 *
 * A lavender card on the content column, at full body size. The warning must be
 * no less prominent than the benefits it balances (MORTGAGE-BROKER-COMPLIANCE-
 * GUIDANCE §6.3): the lead sentence is set in the heading colour at 600, and
 * nothing in it runs below 16px, on a phone included. The info mark is a mask
 * over the primary colour, decorative only.
 * -------------------------------------------------------------------------- */
.zerodigital-compliance-bar--dedicated-section {
	max-width: var(--zd-content-max);
	gap: 1.25rem;
	/* The warning follows the first content section: that section's own bottom
	 * padding sits above the card, and the same rhythm below it keeps the card
	 * off the next band. */
	margin-block: 0 var(--zd-section-pad);
	padding: 1.75rem 2rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--zd-card-radius);
	background: var(--wp--custom--band);
	color: var(--wp--custom--body-text);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
}

.zerodigital-compliance-bar--dedicated-section::before {
	content: "";
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	background: var(--wp--preset--color--primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22a11 11 0 0 0 0-22zM11 10.5h2V17h-2zM12 6.25a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22a11 11 0 0 0 0-22zM11 10.5h2V17h-2zM12 6.25a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.zerodigital-compliance-bar--dedicated-section .zerodigital-compliance-bar__text p {
	margin: 0 0 0.375rem;
}

.zerodigital-compliance-bar--dedicated-section .zerodigital-compliance-bar__text p:first-child {
	font-weight: 600;
	color: var(--wp--preset--color--foreground);
}

.zerodigital-compliance-bar--dedicated-section .zerodigital-compliance-bar__fca {
	margin-top: 0.625rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 600px) {
	.zerodigital-compliance-bar--dedicated-section {
		flex-direction: column;
		gap: 0.875rem;
		padding: 1.5rem;
	}
}

/* -----------------------------------------------------------------------------
 * 6. Section rhythm — one padding for every content section.
 * -------------------------------------------------------------------------- */
.zerodigital-about,
.zerodigital-services-grid,
.zerodigital-testimonials,
.zerodigital-process,
.zerodigital-faq,
.zerodigital-contact {
	padding-block: var(--zd-section-pad);
}

.zerodigital-logo-strip {
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

/* Directly under body copy (the About page), the logos belong to that section —
 * unless the strip is a band of its own. */
.zerodigital-about + .zerodigital-logo-strip:not([style*="background"]) {
	padding-top: 0;
}

/* Section intros, wherever a block has one. */
.zerodigital-services-grid__intro,
.zerodigital-testimonials__intro,
.zerodigital-faq__intro {
	max-width: 45rem;
	font-size: var(--zd-step-lede);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

/* -----------------------------------------------------------------------------
 * 7. About
 * -------------------------------------------------------------------------- */
.zerodigital-about__heading {
	margin-bottom: 1.5rem;
}

.zerodigital-about__body {
	max-width: 38rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--wp--custom--body-text);
}

.zerodigital-about__body > * {
	margin-block: 0;
}

.zerodigital-about__body > * + * {
	margin-top: 1.125rem;
}

/* Subheadings in long copy (the legal pages) open a new section. */
.zerodigital-about__body > :is(h2, h3, h4) {
	margin-top: 2.25rem;
	font-size: var(--zd-step-h3);
	line-height: 1.35;
}

.zerodigital-about__body > :is(h2, h3, h4) + * {
	margin-top: 0.625rem;
}

.zerodigital-about__body strong {
	font-weight: 600;
	color: var(--wp--preset--color--foreground);
}

/* List items take the logo's dot as their marker. */
.zerodigital-about__body ul {
	display: grid;
	gap: 0.75rem;
	padding: 0;
	list-style: none;
}

.zerodigital-about__body ul > li {
	position: relative;
	padding-left: 1.5rem;
}

.zerodigital-about__body ul > li::before {
	content: "";
	position: absolute;
	left: 0.125rem;
	top: 0.62em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}

.zerodigital-about--split .zerodigital-about__heading {
	max-width: 14em;
}

@media (min-width: 783px) {
	.zerodigital-about--image-left .zerodigital-about__inner,
	.zerodigital-about--image-right .zerodigital-about__inner {
		column-gap: clamp(3rem, 7vw, 6rem);
		align-items: center;
	}

	.zerodigital-about--image-left .zerodigital-about__media img,
	.zerodigital-about--image-right .zerodigital-about__media img {
		height: auto;
		aspect-ratio: 20 / 19;
		object-fit: cover;
	}
}

/* -----------------------------------------------------------------------------
 * 8. Services grid — white cards with a hairline, icon on a lavender tile.
 * -------------------------------------------------------------------------- */
.zerodigital-services-grid__heading + .zerodigital-services-grid__items {
	margin-top: 2rem;
}

.zerodigital-services-grid__intro {
	margin-bottom: 3rem;
}

.zerodigital-services-grid__items {
	gap: 1.5rem;
}

.zerodigital-services-grid__item {
	gap: 1.375rem;
	padding: 2rem 1.75rem;
	background: var(--wp--preset--color--background);
}

.zerodigital-services-grid--cols-2 .zerodigital-services-grid__item {
	padding: 2rem;
}

.zerodigital-services-grid__item-icon {
	width: 1.375rem;
	height: 1.375rem;
	padding: 0.8125rem;
	border-radius: calc(var(--wp--custom--radius--md) * 1.4);
	background: var(--wp--custom--band);
	color: var(--wp--preset--color--primary);
}

.zerodigital-services-grid__item-title {
	margin-bottom: 0.625rem;
}

.zerodigital-services-grid__item-description {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--wp--custom--body-text);
}

.zerodigital-services-grid__item-link {
	padding-top: 1.25rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.zerodigital-services-grid__item-link:hover {
	color: var(--wp--preset--color--secondary);
}

/* -----------------------------------------------------------------------------
 * 9. Testimonials — gold stars, body-size quotes, a hairline over the name.
 * -------------------------------------------------------------------------- */
.zerodigital-testimonials__heading {
	margin-bottom: 0;
}

.zerodigital-testimonials__heading + :is(.zerodigital-testimonials__grid, .zerodigital-testimonials__carousel),
.zerodigital-testimonials__intro + :is(.zerodigital-testimonials__grid, .zerodigital-testimonials__carousel) {
	margin-top: 3rem;
}

.zerodigital-testimonials__intro {
	margin-top: 1rem;
}

.zerodigital-testimonials__carousel .zerodigital-testimonials__slide,
.zerodigital-testimonials__grid li {
	padding: 2rem;
}

.zerodigital-testimonials__grid {
	gap: 1.5rem;
}

.zerodigital-testimonials blockquote::before {
	height: 1.5rem;
	margin-bottom: 0.75rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.75rem;
	line-height: 0.9;
	color: var(--wp--preset--color--primary);
}

.zerodigital-testimonials__quote {
	margin-bottom: 1.5rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
	color: var(--wp--preset--color--foreground);
}

.zerodigital-testimonials__stars,
.zerodigital-testimonials.zd-bg-dark .zerodigital-testimonials__stars {
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
	color: var(--wp--custom--star);
}

.zerodigital-testimonials blockquote footer {
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: 0.8125rem;
}

.zerodigital-testimonials cite {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--foreground);
}

.zerodigital-testimonials__meta {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	letter-spacing: 0;
	color: var(--wp--preset--color--muted);
}

/* -----------------------------------------------------------------------------
 * 10. Logo strips — full-colour marks under a quiet sentence-case label.
 * -------------------------------------------------------------------------- */
.zerodigital-logo-strip__heading {
	margin-bottom: 1.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--muted);
}

.zerodigital-logo-strip__logos img {
	filter: none;
	opacity: 1;
}

.zerodigital-logo-strip__group + .zerodigital-logo-strip__group {
	border-color: var(--wp--preset--color--border);
}

@media (min-width: 783px) {
	/* Six logos fit one row of the content column, down to tablet width. */
	.zerodigital-logo-strip__logos {
		--zd-logo-cell: 8.5rem;
		--zd-logo-height: 3.5rem;
		gap: 1.5rem;
	}

	/* Groups: each logo starts on its heading's edge rather than centred in a
	 * cell, so the marks line up under their labels. */
	.zerodigital-logo-strip--groups .zerodigital-logo-strip__logos li {
		justify-content: flex-start;
		min-width: 0;
	}

	.zerodigital-logo-strip--groups .zerodigital-logo-strip__logos img {
		max-width: 100%;
		object-position: left center;
	}
}

/* Side by side only where both rows fit on one line: the accreditations at
 * their natural width, the six boutiques sharing the rest. Below that the
 * groups stack, as they do on a phone. */
@media (min-width: 1100px) {
	.zerodigital-logo-strip--groups .zerodigital-logo-strip__groups {
		gap: 3rem;
	}

	.zerodigital-logo-strip--groups .zerodigital-logo-strip__group:first-child {
		flex: none;
	}

	.zerodigital-logo-strip--groups .zerodigital-logo-strip__group + .zerodigital-logo-strip__group {
		flex: 1 1 0;
		min-width: 0;
	}

	.zerodigital-logo-strip--groups .zerodigital-logo-strip__logos {
		flex-wrap: nowrap;
		gap: 1.5rem;
		--zd-logo-cell: 8.5rem;
	}

	.zerodigital-logo-strip--groups .zerodigital-logo-strip__group + .zerodigital-logo-strip__group .zerodigital-logo-strip__logos {
		justify-content: space-between;
		gap: 1rem;
		--zd-logo-cell: 6.5rem;
	}
}

@media (min-width: 783px) and (max-width: 1099px) {
	.zerodigital-logo-strip--groups .zerodigital-logo-strip__groups {
		flex-direction: column;
		gap: 2rem;
	}

	.zerodigital-logo-strip--groups .zerodigital-logo-strip__group + .zerodigital-logo-strip__group {
		padding-top: 2rem;
		padding-inline-start: 0;
		border-inline-start: 0;
		border-top: 1px solid var(--wp--preset--color--border);
	}

	.zerodigital-logo-strip--groups .zerodigital-logo-strip__logos {
		--zd-logo-cell: 7.5rem;
		gap: 1.5rem;
	}
}

/* -----------------------------------------------------------------------------
 * 11. Process — outlined numbers joined by a hairline.
 * -------------------------------------------------------------------------- */
.zerodigital-process__heading {
	margin-bottom: 3rem;
}

.zerodigital-process--horizontal .zerodigital-process__step {
	padding-top: 0;
	border-top: 0;
}

.zerodigital-process__step-number {
	box-sizing: border-box;
	width: 3rem;
	height: 3rem;
	border: 1.5px solid var(--wp--preset--color--primary);
	background: transparent;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 600;
}

.zerodigital-process--vertical .zerodigital-process__step {
	grid-template-columns: 3rem 1fr;
}

.zerodigital-process--vertical .zerodigital-process__step:not(:last-child)::before {
	left: 1.5rem;
	top: 3.25rem;
	width: 1px;
	background: var(--wp--preset--color--border);
}

.zerodigital-process__step-title {
	margin-bottom: 0.625rem;
	font-size: var(--zd-step-h3);
	font-weight: 500;
	line-height: 1.35;
}

.zerodigital-process__step-description {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--wp--custom--body-text);
}

@media (min-width: 601px) {
	.zerodigital-process--horizontal .zerodigital-process__step-marker {
		display: flex;
		align-items: center;
		margin-bottom: 1.5rem;
	}

	.zerodigital-process--horizontal .zerodigital-process__step:not(:last-child) .zerodigital-process__step-marker::after {
		content: "";
		flex: 1;
		height: 1px;
		margin-inline: 1.25rem -0.75rem;
		background: var(--wp--preset--color--border);
	}

	.zerodigital-process--horizontal .zerodigital-process__step-body {
		padding-right: 1.5rem;
	}
}

/* -----------------------------------------------------------------------------
 * 12. FAQ — quiet questions with round plus/minus marks.
 * -------------------------------------------------------------------------- */
.zerodigital-faq--split .zerodigital-faq__heading {
	max-width: 11em;
}

.zerodigital-faq__item {
	border-color: var(--wp--preset--color--border);
	border-radius: calc(var(--zd-card-radius) * 0.8);
	background: var(--wp--preset--color--background);
}

.zerodigital-faq--joined .zerodigital-faq__items {
	border-color: var(--wp--preset--color--border);
	background: var(--wp--preset--color--background);
}

.zerodigital-faq--joined .zerodigital-faq__items .zerodigital-faq__item + .zerodigital-faq__item {
	border-top-color: var(--wp--preset--color--border);
}

.zerodigital-faq__item:has(.zerodigital-faq__trigger[aria-expanded="true"]) {
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 35%, var(--wp--preset--color--border));
	box-shadow: none;
}

.zerodigital-faq__trigger {
	padding: 1.375rem 1.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.45;
}

.zerodigital-faq__trigger[aria-expanded="true"] {
	color: var(--wp--preset--color--foreground);
}

.zerodigital-faq__trigger::after {
	display: grid;
	place-items: center;
	flex: none;
	width: 2rem;
	height: 2rem;
	margin-left: 0;
	border-radius: 50%;
	background: var(--wp--custom--band);
	color: var(--wp--preset--color--primary);
	font-size: 1.25rem;
}

.zerodigital-faq__answer {
	padding: 0 4.75rem 1.625rem 1.75rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
	color: var(--wp--custom--body-text);
}

.zerodigital-faq__answer > :first-child {
	margin-top: 0;
}

.zerodigital-faq__answer > :last-child {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.zerodigital-faq__trigger {
		padding-inline: 1.25rem;
	}

	.zerodigital-faq__answer {
		padding-inline: 1.25rem;
	}
}

/* -----------------------------------------------------------------------------
 * 13. CTA banner — boxed plum panel on the content column, flat.
 * -------------------------------------------------------------------------- */
.zerodigital-cta-banner {
	--zd-keyline-fill: var(--wp--custom--lilac);
	background-image: none;
}

.zerodigital-cta-banner--boxed {
	max-width: min(var(--zd-content-max), calc(100% - 2 * var(--zd-section-gutter)));
	margin-block: clamp(1.5rem, 3vw, 2.5rem);
	padding: clamp(2.75rem, 5.5vw, 4.5rem) clamp(1.5rem, 5vw, 5rem);
	border-radius: calc(var(--wp--custom--radius--xl) * 1.1667);
}

/* WordPress strips the bottom margin from the last block on a page, and the
 * footer has no gap of its own (see the footer section), so a boxed panel that
 * ends the page ran straight into the footer. Painted panels need the section
 * rhythm restated there; bands and plain sections already carry padding. */
.is-layout-constrained > .zerodigital-cta-banner--boxed:last-child,
.is-layout-constrained > .zerodigital-compliance-bar--dedicated-section:last-child {
	margin-block-end: var(--zd-section-pad);
}

.zerodigital-cta-banner__inner {
	max-width: 45rem;
}

.zerodigital-cta-banner__subtext {
	max-width: 38rem;
	margin-inline: auto;
	margin-bottom: 2rem;
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* -----------------------------------------------------------------------------
 * 14. Contact — form card, lavender details card, plum next-steps card.
 * -------------------------------------------------------------------------- */
.zerodigital-contact__intro {
	max-width: 40rem;
	line-height: 1.7;
	color: var(--wp--custom--body-text);
}

@media (min-width: 783px) {
	.zerodigital-contact--form-details .zerodigital-contact__inner {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: clamp(2rem, 4vw, 3.5rem);
	}
}

.zerodigital-contact--lede-in-form .zerodigital-contact__form {
	padding: clamp(1.5rem, 3vw, 2.75rem);
	border-color: var(--wp--preset--color--border);
	border-radius: var(--zd-media-radius);
	background: var(--wp--preset--color--background);
}

.zerodigital-contact--lede-in-form .zerodigital-contact__heading {
	font-size: clamp(1.5rem, 1.35rem + 0.5vw, 1.75rem);
}

.zerodigital-contact__details {
	align-items: stretch;
	gap: 1.5rem;
}

.zerodigital-contact__details > :not(.zerodigital-contact__next):first-child {
	margin-top: 0;
}

.zerodigital-contact__list {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: var(--zd-media-radius);
	background: var(--wp--custom--band);
}

@media (max-width: 782px) {
	.zerodigital-contact--form-details .zerodigital-contact__details {
		padding-top: 0;
		border-top: 0;
	}
}

.zerodigital-contact__call {
	justify-content: center;
}

.zerodigital-contact__item {
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
}

.zerodigital-contact__item-icon {
	box-sizing: content-box;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0;
	padding: 0.75rem;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--background);
}

.zerodigital-contact__list a {
	font-weight: 500;
	color: var(--wp--preset--color--foreground);
}

.zerodigital-contact__address {
	line-height: 1.6;
	color: var(--wp--custom--body-text);
}

.zerodigital-contact__next {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: var(--zd-media-radius);
	background: var(--wp--preset--color--secondary);
}

.zerodigital-contact__next-heading {
	color: var(--wp--custom--lilac);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.zerodigital-contact__next-steps li {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: color-mix(in srgb, var(--wp--preset--color--background) 88%, transparent);
}

.zerodigital-contact__next-steps li::before {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	color: var(--wp--custom--lilac);
	opacity: 1;
}

/* Fluent Forms, inside the contact block only. */
.zerodigital-contact .fluentform .ff-el-group {
	margin-bottom: 1.25rem;
}

.zerodigital-contact .fluentform .ff-el-input--label label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--foreground);
}

.zerodigital-contact .fluentform .ff-el-group .ff-el-form-control {
	min-height: 3.25rem;
	padding: 0.75rem 1rem;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--primary) 18%, var(--wp--preset--color--border));
	border-radius: var(--wp--custom--shape--input);
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	box-shadow: none;
}

.zerodigital-contact .fluentform .ff-el-group textarea.ff-el-form-control {
	min-height: 9rem;
}

.zerodigital-contact .fluentform .ff-el-group .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 2px solid color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent);
	outline-offset: 1px;
}

.zerodigital-contact .fluentform .ff-el-form-check-input {
	accent-color: var(--wp--preset--color--primary);
}

.zerodigital-contact .fluentform .ff-btn.ff-btn-submit {
	min-height: var(--zd-btn-min-h);
	padding: 0 1.875rem;
	border: 0;
	border-radius: var(--wp--custom--shape--button);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	font-size: 0.9375rem;
	font-weight: 500;
}

.zerodigital-contact .fluentform .ff-btn.ff-btn-submit:hover {
	background-color: var(--wp--preset--color--secondary);
	opacity: 1;
}

/* -----------------------------------------------------------------------------
 * 15. Embed (the quote tool)
 * -------------------------------------------------------------------------- */
.zerodigital-embed__intro {
	max-width: 45rem;
	color: var(--wp--custom--body-text);
}

/* -----------------------------------------------------------------------------
 * 16. Footer — plum panel, the regulatory strip and credit bar on the same.
 *
 * !important on the group background is the documented exception in README §3b:
 * the group carries has-primary-background-color, whose declaration is
 * !important, so no selector can beat it without it.
 * -------------------------------------------------------------------------- */
/* WordPress's block gap puts 24px of white page between the last section and
 * the footer; a lavender band then sits on a white stripe above the plum. */
footer.wp-block-template-part {
	margin-block-start: 0;
}

footer.wp-block-template-part > .wp-block-group.has-background {
	background-color: var(--wp--preset--color--secondary) !important;
}

.zerodigital-footer-columns {
	padding-block: clamp(3.5rem, 6vw, 5rem) clamp(2.5rem, 4vw, 3.5rem);
	font-size: var(--wp--preset--font-size--small);
}

@media (min-width: 783px) {
	.zerodigital-footer-columns {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
		column-gap: clamp(2rem, 5vw, 4rem);
	}
}

.zerodigital-footer-columns__tagline {
	max-width: 20rem;
	font-size: var(--wp--preset--font-size--small);
	opacity: 1;
	color: color-mix(in srgb, var(--wp--preset--color--background) 80%, transparent);
}

.zerodigital-footer-columns__column summary {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--wp--custom--lilac);
}

.zerodigital-footer-columns__nav {
	gap: 0.75rem;
}

.zerodigital-footer-columns__nav a,
.zerodigital-footer-columns__business-info a {
	opacity: 1;
	color: color-mix(in srgb, var(--wp--preset--color--background) 88%, transparent);
}

.zerodigital-footer-columns__nav a:hover,
.zerodigital-footer-columns__business-info a:hover {
	color: var(--wp--preset--color--background);
}

/* The email address is one long word; at tablet width it ran out of its column. */
.zerodigital-footer-columns__business-info a {
	overflow-wrap: anywhere;
}

.zerodigital-footer-columns__business-info p,
.zerodigital-footer-columns__rich-text {
	opacity: 1;
	color: color-mix(in srgb, var(--wp--preset--color--background) 88%, transparent);
}

.zerodigital-footer-columns__review-cta {
	font-weight: 500;
}

.zerodigital-footer-columns__social {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--background) 16%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--background) 8%, transparent);
}

.zerodigital-footer-columns__social:hover,
.zerodigital-footer-columns__social:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--background) 18%, transparent);
}

.zerodigital-footer-columns__credit {
	font-size: 0.75rem;
}

footer.wp-block-template-part .zerodigital-footer-columns :where(a, button, summary):focus-visible {
	outline-color: var(--wp--preset--color--background);
}

.zerodigital-compliance-bar--footer-strip {
	padding: clamp(2rem, 4vw, 2.75rem) max(var(--zd-section-gutter), calc((100% - var(--zd-content-max)) / 2));
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--background) 16%, transparent);
	background: var(--wp--preset--color--secondary);
	color: color-mix(in srgb, var(--wp--preset--color--background) 82%, transparent);
	font-size: 0.8125rem;
	line-height: 1.7;
}

.zerodigital-compliance-bar--footer-strip .zerodigital-compliance-bar__text p {
	margin: 0 0 0.75rem;
}

.zerodigital-compliance-bar--footer-strip strong,
.zerodigital-compliance-bar--footer-strip .zerodigital-compliance-bar__fca {
	font-weight: 600;
	color: var(--wp--preset--color--background);
}

.zerodigital-compliance-bar--footer-strip .zerodigital-compliance-bar__fca {
	margin-bottom: 0;
	font-family: var(--wp--preset--font-family--body);
	letter-spacing: 0.02em;
}

.zerodigital-compliance-bar--footer-strip a {
	color: var(--wp--preset--color--background);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.zerodigital-compliance-bar--footer-strip a:hover,
.zerodigital-compliance-bar--footer-strip a:focus-visible,
.zerodigital-site-credit a:hover,
.zerodigital-site-credit a:focus-visible {
	color: var(--wp--custom--lilac);
}

/* A shade deeper than the footer, so the agency's fixed orange "Digital" clears
 * 4.5:1 (it measured 4.3:1 on the plum itself). */
.zerodigital-site-credit {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--background) 16%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--secondary) 70%, var(--wp--preset--color--foreground));
}

.zerodigital-site-credit__copyright {
	color: color-mix(in srgb, var(--wp--preset--color--background) 80%, transparent);
}

/* -----------------------------------------------------------------------------
 * 17. Images — no hairline border on photos; the rounded corner stays.
 * -------------------------------------------------------------------------- */
.zerodigital-hero-home__media img,
.zerodigital-hero-subpage__media img,
.zerodigital-about__media img {
	border: none;
}