/*
Theme Name: Daiquiri Creative
Theme URI: https://daiquiricreative.com.au
Author: Daiquiri Creative
Author URI: https://daiquiricreative.com.au
Description: Block theme for Daiquiri Creative, built from the approved design system (tokens.css + handoff, 14 Nov 2026). Every value comes from theme.json presets; this stylesheet holds only what theme.json cannot express.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: daiquiri-creative
*/

/* Breakpoints (mobile-first): base 375 · 641 tablet · 961 desktop header + columns · 1101 full grids. */

/* ==========================================================================
   1. Base
   ========================================================================== */

:root {
	--dc-focus-ring: 3px;
	--dc-icon: 1.125rem;       /* 18px button + menu icons */
	--dc-icon-lg: 1.375rem;    /* 22px contact row icons */
	--dc-admin-bar: var(--wp-admin--admin-bar--height, 0px);
	--dc-sticky-top: calc(var(--dc-admin-bar) + var(--wp--custom--header-height));
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-padding-top: var(--dc-sticky-top);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--custom--color--selection);
	color: var(--wp--preset--color--ink);
}

img {
	max-width: 100%;
	height: auto;
}

/* Sections butt up against each other; the wave joins them. */
.wp-site-blocks > *,
.wp-block-post-content > .alignfull {
	margin-block: 0;
}

/* Focus: 3px ring at 3px offset on everything interactive. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--dc-focus-ring) solid var(--wp--custom--color--focus);
	outline-offset: var(--dc-focus-ring);
}

:where(.has-surface-inverse-background-color, .has-surface-brand-background-color) :where(a, button, summary):focus-visible {
	outline-color: var(--wp--custom--color--focus-inverse);
}

/* Type ------------------------------------------------------------------- */

/* Michroma is drawn at the wordmark's weight everywhere it appears. */
h1, h2, h3, h4, h5, h6,
.has-display-font-family {
	-webkit-text-stroke: var(--wp--custom--display-stroke) currentColor;
}

.has-display-font-family {
	font-weight: 400;
	text-transform: uppercase;
}

.has-display-font-size { line-height: var(--wp--custom--leading--display); letter-spacing: var(--wp--custom--tracking--display); }
.has-heading-font-size { line-height: var(--wp--custom--leading--heading); letter-spacing: var(--wp--custom--tracking--heading); }
.has-title-font-size   { line-height: var(--wp--custom--leading--title);   letter-spacing: var(--wp--custom--tracking--title); }
.has-lead-font-size    { line-height: var(--wp--custom--leading--lead);    letter-spacing: var(--wp--custom--tracking--lead); }
.has-body-font-size    { line-height: var(--wp--custom--leading--body);    letter-spacing: var(--wp--custom--tracking--body); }
.has-label-font-size   { line-height: var(--wp--custom--leading--label);   letter-spacing: var(--wp--custom--tracking--label); text-transform: uppercase; }

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

/* Brand-coloured words in headlines use core's Highlight format. */
mark.has-inline-color {
	background: transparent;
}

.dc-lead {
	max-width: var(--wp--custom--measure);
	font-weight: 300;
}

.dc-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-block: 0 var(--wp--preset--spacing--50);
}

.dc-eyebrow::before {
	content: "";
	flex: none;
	width: var(--wp--preset--spacing--50);
	height: var(--wp--custom--border--strong);
	background: currentColor;
}

/* ==========================================================================
   2. Buttons
   ========================================================================== */

.wp-block-button .wp-block-button__link,
.dc-contact .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	min-height: var(--wp--custom--control-height);
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--wp--custom--dur--base) var(--wp--custom--ease--spring),
		box-shadow var(--wp--custom--dur--base) var(--wp--custom--ease--spring),
		background-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		border-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

/* Arrow: add the class "has-arrow" to a button. */
.wp-block-button.has-arrow .wp-block-button__link::after,
.dc-contact .ff-btn-submit::after {
	content: "";
	flex: none;
	width: var(--dc-icon);
	height: var(--dc-icon);
	background: currentColor;
	-webkit-mask: url(assets/images/icons/arrow.svg) center / contain no-repeat;
	mask: url(assets/images/icons/arrow.svg) center / contain no-repeat;
	transition: translate var(--wp--custom--dur--base) var(--wp--custom--ease--spring);
}

/* Outline (accent-text): cream or white surfaces only. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 0 var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--strong) solid var(--wp--preset--color--accent-text);
	background-color: transparent;
	color: var(--wp--preset--color--accent-text);
}

/* Outline ink: strawberry and chocolate surfaces. */
.wp-block-button.is-style-outline-ink > .wp-block-button__link {
	border-color: var(--wp--preset--color--ink);
	background-color: transparent;
	color: var(--wp--preset--color--ink);
}

/* Ink: solid, for the Best value card. */
.wp-block-button.is-style-ink > .wp-block-button__link {
	border-color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink-inverse);
}

.wp-block-button .wp-block-button__link:active,
.dc-contact .ff-btn-submit:active {
	transform: scale(0.97);
	box-shadow: none;
}

@media (hover: hover) {
	.wp-block-button .wp-block-button__link:hover,
	.dc-contact .ff-btn-submit:hover {
		border-color: var(--wp--preset--color--ink);
		background-color: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--ink-inverse);
		transform: translate(-2px, -2px);
		box-shadow: var(--wp--preset--shadow--hard-sm-brand);
	}

	.wp-block-button.has-arrow .wp-block-button__link:hover::after,
	.dc-contact .ff-btn-submit:hover::after {
		translate: var(--wp--preset--spacing--10) 0;
	}

	.wp-block-button.is-style-outline > .wp-block-button__link:hover {
		border-color: var(--wp--preset--color--accent-text);
		background-color: var(--wp--preset--color--accent-text);
		color: var(--wp--preset--color--ink-on-action);
		box-shadow: var(--wp--preset--shadow--hard-sm);
	}

	.wp-block-button.is-style-ink > .wp-block-button__link:hover {
		border-color: var(--wp--preset--color--surface);
		background-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--ink);
		box-shadow: var(--wp--preset--shadow--hard-sm);
	}
}

/* ==========================================================================
   3. Wave top (block style on Group). Colour = the band above.
   ========================================================================== */

[class*="is-style-wave-from-"] {
	position: relative;
	z-index: 1;
	padding-top: calc(var(--wp--custom--wave-height) + var(--wp--preset--spacing--70));
	overflow-x: clip;
}

/* No hairlines, without a 1px overlap: the backdrop is the colour of the band above and the wave is the colour of this band, so every edge meets its own colour. (A -1px offset lands on half a device pixel at 150% display scaling and drew a faint line under the wave.) */
/* Backdrop in the colour of the band above. */
[class*="is-style-wave-from-"]::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	/* Stops 2px short of the wave layer's bottom edge. */
	height: calc(var(--wp--custom--wave-height) - 2px);
	background: var(--dc-wave-from);
	pointer-events: none;
}

/* The wave itself: this band's colour, masked, on an oversized layer that drifts one period. */
[class*="is-style-wave-from-"]::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 125%;
	height: var(--wp--custom--wave-height);
	background-color: inherit;
	-webkit-mask: url(assets/images/wave.svg) 0 0 / 20% calc(100% + 2px) repeat-x; /* 2px taller than the layer: its soft bottom row is cropped, so no hairline shows under the wave */
	mask: url(assets/images/wave.svg) 0 0 / 20% calc(100% + 2px) repeat-x; /* 2px taller than the layer: its soft bottom row is cropped, so no hairline shows under the wave */
	pointer-events: none;
	animation: dc-wave var(--wp--custom--loop--wave) linear infinite;
}

.wp-block-post-content > :nth-child(even)[class*="is-style-wave-from-"]::after {
	animation-duration: var(--wp--custom--loop--wave-alt);
}

.is-style-wave-from-surface { --dc-wave-from: var(--wp--preset--color--surface); }
.is-style-wave-from-tint    { --dc-wave-from: var(--wp--preset--color--surface-tint); }
.is-style-wave-from-muted   { --dc-wave-from: var(--wp--preset--color--surface-muted); }
.is-style-wave-from-inverse { --dc-wave-from: var(--wp--preset--color--surface-inverse); }

@keyframes dc-wave {
	to { transform: translateX(-20%); }
}

/* ==========================================================================
   4. Header + mobile menu (template part)
   ========================================================================== */

.dc-header {
	position: sticky;
	top: var(--dc-admin-bar);
	z-index: 20;
	border-bottom: var(--wp--custom--border--hairline) solid var(--wp--custom--color--border-subtle);
	background: var(--wp--preset--color--surface);
	transition: box-shadow var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

/* Below 601px the admin bar scrolls away with the page. */
@media (max-width: 600px) {
	.dc-header { top: 0; }
}

.dc-header.is-scrolled {
	box-shadow: var(--wp--preset--shadow--header);
}

.dc-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	height: var(--wp--custom--header-height);
}

.dc-header__bar > * {
	margin-block: 0;
}

.dc-header .wp-block-site-logo {
	flex: none;
	line-height: 0;
}

.dc-header .wp-block-site-logo img {
	width: auto;
	height: 2.25rem; /* 36 */
}

.dc-menu-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: var(--wp--custom--tap-target);
	padding: 0 var(--wp--preset--spacing--40);
	border: var(--wp--custom--border--default) solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--label);
	line-height: var(--wp--custom--leading--label);
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	-webkit-text-stroke: var(--wp--custom--display-stroke) currentColor;
	cursor: pointer;
}

.dc-menu-btn svg {
	width: var(--dc-icon);
	height: var(--dc-icon);
}

/* Nav links (shared by the bar and the panel) */
.dc-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase;
	text-decoration: none;
	-webkit-text-stroke: var(--wp--custom--display-stroke) currentColor;
}

/* Panel: everything below the desktop header breakpoint. */
@media not all and (min-width: 961px) {
	.dc-header .dc-header__cta {
		display: none;
	}

	.dc-menu {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		max-height: calc(100svh - var(--dc-sticky-top));
		padding: var(--wp--preset--spacing--50) var(--wp--custom--gutter) var(--wp--preset--spacing--60);
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--wp--preset--color--surface-brand);
		color: var(--wp--preset--color--ink-on-brand);
	}

	.dc-menu.is-open {
		display: block;
		animation: dc-drop var(--wp--custom--dur--base) var(--wp--custom--ease--out) both;
	}

	html.dc-menu-open,
	html.dc-menu-open body {
		overflow: hidden;
	}

	.dc-menu .dc-nav,
	.dc-menu .dc-nav .wp-block-navigation__container {
		display: block;
		width: 100%;
	}

	.dc-menu .dc-nav .wp-block-navigation-item {
		display: block;
	}

	.dc-menu .dc-nav .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		min-height: var(--wp--custom--tap-target);
		padding-block: var(--wp--preset--spacing--30);
		border-bottom: var(--wp--custom--border--default) solid color-mix(in srgb, var(--wp--preset--color--ink-on-brand) 25%, transparent);
		color: var(--wp--preset--color--ink-on-brand);
		font-size: var(--wp--preset--font-size--heading);
		line-height: var(--wp--custom--leading--heading);
		letter-spacing: var(--wp--custom--tracking--heading);
	}

	.dc-menu a:focus-visible {
		outline-color: var(--wp--custom--color--focus-inverse);
	}

	.dc-menu .dc-menu__help a:focus-visible {
		outline-color: var(--wp--custom--color--focus);
	}

	/* Without JS the button can't work: show the menu in the flow instead. */
	html:not(.js) .dc-header { position: static; }
	html:not(.js) .dc-header__bar { height: auto; min-height: var(--wp--custom--header-height); flex-wrap: wrap; }
	html:not(.js) .dc-menu-btn { display: none; }
	html:not(.js) .dc-menu { display: block; position: static; flex-basis: 100%; max-height: none; margin-inline: calc(var(--wp--custom--gutter) * -1); }
}

.dc-menu__help {
	margin-top: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--md);
}

.dc-menu__help > * {
	margin-block: 0;
}

.dc-menu__help-title {
	margin-bottom: var(--wp--preset--spacing--30);
	font-weight: 600;
}

.dc-menu__row {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: var(--wp--custom--border--hairline) dashed var(--wp--custom--color--border-subtle);
	font-weight: 500;
}

.dc-menu__row > * {
	margin: 0;
}

.dc-menu__cta {
	margin-top: var(--wp--preset--spacing--40);
}

.dc-menu__cta .wp-block-button,
.dc-menu__cta .wp-block-button__link {
	width: 100%;
}

@keyframes dc-drop {
	from { opacity: 0; transform: translateY(calc(var(--wp--preset--spacing--40) * -1)); }
	to   { opacity: 1; transform: none; }
}

/* Desktop header */
@media (min-width: 961px) {
	.dc-header .wp-block-site-logo img {
		height: 2.875rem; /* 46 */
	}

	.dc-menu-btn,
	.dc-menu__help {
		display: none;
	}

	.dc-menu {
		display: contents;
	}

	.dc-header .dc-nav {
		margin-left: auto;
	}

	/* 961–1100: logo, five links and the CTA only fit on one line with the tighter gap. */
	.dc-header .dc-nav .wp-block-navigation__container {
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--40);
	}

	.dc-header .dc-nav .wp-block-navigation-item__content {
		white-space: nowrap;
	}

	.dc-header .dc-nav .wp-block-navigation-item__content {
		display: inline-flex;
		align-items: center;
		min-height: var(--wp--custom--tap-target);
		background: linear-gradient(var(--wp--preset--color--brand), var(--wp--preset--color--brand)) no-repeat 0 calc(100% - var(--wp--preset--spacing--20)) / 0% var(--wp--custom--border--strong);
		font-size: var(--wp--preset--font-size--label);
		line-height: var(--wp--custom--leading--label);
		letter-spacing: var(--wp--custom--tracking--label);
		transition:
			background-size var(--wp--custom--dur--base) var(--wp--custom--ease--out),
			color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
	}

	.dc-header .dc-nav .wp-block-navigation-item__content[aria-current="page"] {
		background-size: 100% var(--wp--custom--border--strong);
		color: var(--wp--preset--color--accent-text);
	}
}

@media (min-width: 961px) and (hover: hover) {
	.dc-header .dc-nav .wp-block-navigation-item__content:hover {
		background-size: 100% var(--wp--custom--border--strong);
		color: var(--wp--preset--color--accent-text);
	}
}

@media (min-width: 1101px) {
	.dc-header .dc-nav .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--60);
	}
}

/* Progress bar: scroll-linked where supported, absent elsewhere. */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.dc-header::after {
			content: "";
			position: absolute;
			right: 0;
			bottom: calc(var(--wp--custom--border--hairline) * -1);
			left: 0;
			height: var(--wp--custom--border--strong);
			background: var(--wp--preset--color--brand);
			transform: scaleX(0);
			transform-origin: 0 50%;
			pointer-events: none;
			animation: dc-progress linear both;
			animation-timeline: scroll(root);
		}
	}
}

@keyframes dc-progress {
	to { transform: scaleX(1); }
}

/* ==========================================================================
   5. Footer (template part)
   ========================================================================== */

.dc-footer {
	padding-top: calc(var(--wp--custom--wave-height) + var(--wp--custom--section-pad));
	padding-bottom: var(--wp--preset--spacing--70);
}

/* Templates that don't end with the contact band: the wave comes from cream. */
.dc-main-plain + footer .dc-footer {
	--dc-wave-from: var(--wp--preset--color--surface);
}

.dc-main-plain {
	padding-block: var(--wp--preset--spacing--80) var(--wp--custom--section-pad);
}

.dc-footer a {
	color: inherit;
}

.dc-footer__top {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.dc-footer__top > *,
.dc-footer__brand > *,
.dc-footer__col > *,
.dc-footer__legal > * {
	margin-block: 0;
}

.dc-footer__brand {
	grid-column: 1 / -1;
}

.dc-footer__line {
	max-width: 22.5rem; /* 360 */
	font-weight: 600;
}

.dc-footer__email {
	margin-top: var(--wp--preset--spacing--40);
	font-weight: 500;
	white-space: nowrap;
}

.dc-footer__email a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tap-target);
	text-decoration: none;
}

.dc-footer .dc-socials {
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

.dc-footer .dc-socials .wp-social-link {
	width: var(--wp--preset--spacing--70);
	height: var(--wp--preset--spacing--70);
	border-radius: var(--wp--custom--radius--round);
	background: var(--wp--preset--color--surface-brand);
	color: var(--wp--preset--color--ink-on-brand);
	transition:
		transform var(--wp--custom--dur--base) var(--wp--custom--ease--spring),
		background-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.dc-footer .dc-socials .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	border-radius: inherit;
}

.dc-footer .dc-socials .wp-social-link svg {
	width: 1.25rem;
	height: 1.25rem;
}

.dc-footer__head {
	margin-bottom: var(--wp--preset--spacing--40);
}

.dc-footer__nav .wp-block-navigation__container {
	gap: 0;
}

.dc-footer__nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tap-target);
	background: linear-gradient(var(--wp--preset--color--brand), var(--wp--preset--color--brand)) no-repeat 0 calc(100% - var(--wp--preset--spacing--20)) / 0% var(--wp--custom--border--strong);
	text-decoration: none;
	transition: background-size var(--wp--custom--dur--base) var(--wp--custom--ease--out);
}

.dc-footer__wordmark {
	margin: var(--wp--preset--spacing--80) 0 var(--wp--preset--spacing--60);
}

.dc-footer__wordmark img {
	display: block;
	width: 100%;
	aspect-ratio: 781.82 / 205.29;
}

.dc-footer__legal {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--border--hairline) solid color-mix(in srgb, var(--wp--preset--color--ink-inverse) 20%, transparent);
}

.dc-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--50);
}

.dc-footer__legal-links a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tap-target);
}

@media (hover: hover) {
	.dc-footer__nav .wp-block-navigation-item__content:hover {
		background-size: 100% var(--wp--custom--border--strong);
	}

	.dc-footer .dc-socials .wp-social-link:hover {
		background: var(--wp--preset--color--surface);
		transform: rotate(-12deg) scale(1.12);
	}
}

@media (min-width: 641px) {
	.dc-footer__top {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.dc-footer__legal {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

@media (min-width: 961px) {
	.dc-footer__top {
		grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--70);
	}

	.dc-footer__brand {
		grid-column: auto;
	}
}

/* ==========================================================================
   6. dc/hero-home
   375: copy, then stage. CTAs stacked full width. Prices wrap. Badge 104.
   641: stage centred, max 640. CTAs side by side. Badge 150.
   961: two columns 1.05fr / 1fr, vertically centred.
   ========================================================================== */

.dc-hero {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	overflow: clip;
}

.dc-hero .dc-hero__grid,
.dc-hero .dc-hero__copy > *,
.dc-hero .dc-hero__price > *,
.dc-hero .dc-hero__stage > * {
	margin-block: 0;
}

.dc-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--70);
}

.dc-hero .dc-hero__copy > .dc-eyebrow {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* The H1 never breaks a word: the whole headline scales down until its longest word
   fits the copy column. --dc-fit-word is that word's width in em ("businesses" is
   9.51em in Michroma). Decided by Alana, 14 Nov 2026. If the headline changes,
   re-measure and update the number; break-word stays only as a last resort. */
.dc-hero .dc-hero__copy {
	container-type: inline-size;
	--dc-fit-word: 9.6;
}

.dc-hero .dc-hero__copy > h1 {
	margin-bottom: var(--wp--preset--spacing--50);
	font-size: min(var(--wp--preset--font-size--display), calc(100cqi / var(--dc-fit-word)));
	overflow-wrap: break-word;
}

.dc-hero .dc-hero__ctas {
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--60);
}

.dc-hero__ctas .wp-block-button,
.dc-hero__ctas .wp-block-button__link {
	width: 100%;
}

.dc-hero .dc-hero__prices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--border--default) solid var(--wp--custom--color--border-subtle);
}

.dc-hero .dc-hero__prices > * {
	margin-block: 0;
}

/* Stage: every child in one grid cell, placed with alignment and transforms. */
.dc-hero__stage {
	display: grid;
	width: 100%;
	aspect-ratio: 1 / 0.92;
}

.dc-hero__stage::before,
.dc-hero__stage > * {
	grid-area: 1 / 1;
	min-width: 0;
}

.dc-hero__stage::before {
	content: "";
	margin: 6% 0 4% 8%;
	border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
	background: var(--wp--preset--color--surface-muted);
}

.dc-hero .dc-hero__desk {
	align-self: start;
	justify-self: start;
	width: 82%;
	margin-top: 13%;
	rotate: -3deg;
}

.dc-hero .dc-hero__phone {
	z-index: 1;
	align-self: end;
	justify-self: end;
	width: 28%;
	margin: 0 2% 2% 0;
	rotate: 5deg;
}

.dc-hero__desk > *,
.dc-hero__phone > * {
	margin: 0;
}

/* Browser frame */
.dc-shot {
	overflow: hidden;
	border: var(--wp--custom--border--default) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--surface-raised);
	box-shadow: var(--wp--preset--shadow--mockup);
}

.dc-shot::before {
	content: "";
	display: block;
	height: var(--wp--preset--spacing--60);
	background:
		radial-gradient(circle closest-side, var(--wp--preset--color--surface-tint) 96%, transparent) var(--wp--preset--spacing--30) 50% / var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) no-repeat,
		radial-gradient(circle closest-side, var(--wp--preset--color--surface-muted) 96%, transparent) calc(var(--wp--preset--spacing--30) + 0.875rem) 50% / var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) no-repeat,
		radial-gradient(circle closest-side, var(--wp--preset--color--brand) 96%, transparent) calc(var(--wp--preset--spacing--30) + 1.75rem) 50% / var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) no-repeat,
		var(--wp--preset--color--ink);
}

.dc-shot img,
.dc-phone img {
	display: block;
	width: 100%;
	height: auto;
}

/* Phone frame */
.dc-phone {
	padding: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--ink);
	box-shadow: var(--wp--preset--shadow--mockup);
}

.dc-phone img {
	border-radius: var(--wp--custom--radius--md);
}

/* Badge (decoration) */
.dc-badge {
	z-index: 2;
	align-self: start;
	justify-self: end;
	width: 6.5rem; /* 104 */
	height: 6.5rem;
	margin-top: -4%;
}

.dc-badge__disc { fill: var(--wp--preset--color--surface-brand); }
.dc-badge__star { fill: var(--wp--preset--color--ink); }

.dc-badge__text {
	fill: var(--wp--preset--color--ink-on-brand);
	font-family: var(--wp--preset--font-family--display);
	font-size: 12.5px; /* SVG user units, not CSS pixels */
	letter-spacing: 3.2px;
}

.dc-badge__ring {
	transform-origin: 50% 50%;
}

@media (min-width: 641px) {
	.dc-hero {
		padding-top: var(--wp--preset--spacing--70);
	}

	.dc-hero .dc-hero__ctas {
		flex-direction: row;
		align-items: center;
	}

	.dc-hero__ctas .wp-block-button,
	.dc-hero__ctas .wp-block-button__link {
		width: auto;
	}

	.dc-hero__stage {
		max-width: 40rem; /* 640 */
		margin-inline: auto;
	}

	.dc-badge {
		width: min(9.375rem, 30%); /* 150, smaller when the stage is narrow */
		height: auto;
		aspect-ratio: 1;
		margin: 0 4% 0 0;
	}
}

@media (min-width: 961px) {
	.dc-hero {
		padding-top: var(--wp--preset--spacing--80);
	}

	.dc-hero__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--wp--preset--spacing--80);
	}
}

/* ==========================================================================
   7. dc/contact (+ Fluent Forms skin)
   375: intro above form. Form one column, card padding 24, note above a full-width submit.
   641: form two columns.
   961: intro left 0.85fr, form right 1.15fr.
   ========================================================================== */

.dc-contact {
	padding-bottom: var(--wp--custom--section-pad);
}

.dc-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--70);
	align-items: start;
}

.dc-contact .dc-contact__grid > *,
.dc-contact .dc-contact__intro > *,
.dc-contact .dc-direct > * {
	margin-block: 0;
}

.dc-contact .dc-contact__intro > .dc-eyebrow {
	margin-bottom: var(--wp--preset--spacing--50);
}

.dc-contact .dc-contact__intro > h2 {
	margin-bottom: var(--wp--preset--spacing--50);
}

.dc-contact .dc-direct {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--60);
}

.dc-direct__item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-height: var(--wp--custom--tap-target);
	font-weight: 500;
}

.dc-direct__item::before {
	content: "";
	flex: none;
	width: var(--dc-icon-lg);
	height: var(--dc-icon-lg);
	background: var(--wp--preset--color--accent-text);
	-webkit-mask: var(--dc-direct-icon) center / contain no-repeat;
	mask: var(--dc-direct-icon) center / contain no-repeat;
}

.dc-direct__item.is-email  { --dc-direct-icon: url(assets/images/icons/mail.svg); white-space: nowrap; }
.dc-direct__item.is-area   { --dc-direct-icon: url(assets/images/icons/pin.svg); }
.dc-direct__item.is-person { --dc-direct-icon: url(assets/images/icons/clock.svg); }

.dc-direct__item a {
	color: inherit;
	text-decoration: none;
}

.dc-form-card {
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--lg);
}

@media (min-width: 641px) {
	.dc-form-card {
		padding: var(--wp--preset--spacing--70);
	}
}

@media (min-width: 961px) {
	.dc-contact__grid {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		gap: var(--wp--preset--spacing--80);
	}
}

/* Fluent Forms skin ------------------------------------------------------- */

.dc-contact .fluentform fieldset {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
}

/* Fields sit on the bottom of their row, so a label that wraps to two lines doesn't push its input out of line with its neighbour. */
.dc-contact .fluentform .ff-el-group {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
	margin: 0;
}

.dc-contact .fluentform .ff-el-input--label {
	margin-bottom: var(--wp--preset--spacing--20);
}

.dc-contact .fluentform .ff-el-input--label label {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: var(--wp--custom--leading--label);
}

.dc-contact .fluentform .ff-el-input--label.ff-el-is-required label::after {
	color: inherit;
}

.dc-contact .fluentform .ff-el-form-control {
	width: 100%;
	min-height: var(--wp--custom--control-height);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: var(--wp--custom--border--default) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--surface-raised);
	box-shadow: none;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	line-height: var(--wp--custom--leading--body);
	transition:
		border-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		box-shadow var(--wp--custom--dur--base) var(--wp--custom--ease--out);
}

.dc-contact .fluentform .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--ink-muted);
	opacity: 1;
}

.dc-contact .fluentform textarea.ff-el-form-control {
	min-height: var(--wp--preset--spacing--100);
	resize: vertical;
}

.dc-contact .fluentform select.ff-el-form-control {
	padding-right: var(--wp--preset--spacing--70);
	background-image: url(assets/images/icons/chevron.svg);
	background-repeat: no-repeat;
	background-position: right var(--wp--preset--spacing--40) center;
	background-size: var(--wp--preset--spacing--40);
	-webkit-appearance: none;
	appearance: none;
}

.dc-contact .fluentform .ff-el-form-control:hover {
	border-color: var(--wp--preset--color--accent-text);
}

/* Fields focus with a border + hard shadow; the transparent outline keeps Windows high-contrast working. */
.dc-contact .fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--accent-text);
	outline: var(--wp--custom--border--strong) solid transparent;
	outline-offset: 0;
	box-shadow: var(--wp--preset--shadow--field-focus);
}

.dc-contact .fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--wp--preset--color--accent-text);
	border-width: var(--wp--custom--border--strong);
}

.dc-contact .fluentform .error,
.dc-contact .fluentform .text-danger {
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--accent-text);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
}

/* "What do you need?" as checkbox pills: a real checkbox inside each label. */
.dc-contact .fluentform .dc-pills .ff-el-input--content {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

.dc-contact .fluentform .dc-pills .ff-el-form-check {
	margin: 0;
}

/* The error message sits on its own line under the pills, not beside the last one. */
.dc-contact .fluentform .dc-pills .error {
	flex-basis: 100%;
	margin-top: 0;
}

.dc-contact .fluentform .dc-pills .ff-el-form-check-label {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: var(--wp--custom--tap-target);
	margin: 0;
	padding: 0 var(--wp--preset--spacing--40);
	border: var(--wp--custom--border--default) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	cursor: pointer;
	transition:
		transform var(--wp--custom--dur--base) var(--wp--custom--ease--spring),
		background-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		border-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.dc-contact .fluentform .dc-pills .ff-el-form-check-input {
	flex: none;
	width: var(--wp--preset--spacing--40);
	height: var(--wp--preset--spacing--40);
	margin: 0;
	accent-color: var(--wp--preset--color--surface-brand);
	outline: none;
}

.dc-contact .fluentform .dc-pills .ff-el-form-check-label:has(input:checked) {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink-inverse);
}

.dc-contact .fluentform .dc-pills .ff-el-form-check-label:has(input:focus-visible) {
	outline: var(--dc-focus-ring) solid var(--wp--custom--color--focus);
	outline-offset: var(--dc-focus-ring);
}

@media (hover: hover) {
	.dc-contact .fluentform .dc-pills .ff-el-form-check-label:hover {
		border-color: var(--wp--preset--color--accent-text);
		transform: translateY(-2px);
	}
}

.dc-contact .fluentform .dc-form-note p {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
}

.dc-contact .fluentform .ff-btn-submit {
	width: 100%;
	padding: 0 var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--strong) solid var(--wp--preset--color--action);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--action);
	color: var(--wp--preset--color--ink-on-action);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	line-height: 1;
}

.dc-contact .fluentform .ff-message-success {
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 600;
}

@media (min-width: 641px) {
	.dc-contact .fluentform fieldset {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dc-contact .fluentform .dc-full {
		grid-column: 1 / -1;
	}

	.dc-contact .fluentform .dc-form-note {
		align-self: center;
	}

	.dc-contact .fluentform .dc-form-submit {
		justify-self: end;
	}

	.dc-contact .fluentform .ff-btn-submit {
		width: auto;
	}
}

/* ==========================================================================
   9. Shared section pieces: bands, heads, card variants, frames, chips, lists
   ========================================================================== */

/* Cream sections: full section padding; after a wave the wave height is added. */
.dc-about,
.dc-work,
.dc-packages,
.dc-tiles,
.dc-extras {
	padding-block: var(--wp--custom--section-pad);
}

/* Straight after a page intro (no wave) the packages need no extra top padding. */
.dc-packages:not([class*="is-style-wave-from-"]) {
	padding-top: 0;
}

.dc-work[class*="is-style-wave-from-"],
.dc-packages[class*="is-style-wave-from-"],
.dc-extras[class*="is-style-wave-from-"] {
	padding-top: calc(var(--wp--custom--wave-height) + var(--wp--custom--section-pad));
}

/* Coloured bands: the wave rule sets the top; these set the bottom. */
.dc-services,
.dc-process,
.dc-care,
.dc-faq {
	padding-bottom: var(--wp--custom--section-pad);
}

/* Section head. 375 + 768: stacked. 961: heading left, lead or button right, bottom-aligned. */
.dc-head {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--70);
}

.dc-head > *,
.dc-head > .wp-block-group > * {
	margin-block: 0;
}

.dc-head .dc-eyebrow {
	margin-bottom: var(--wp--preset--spacing--50);
}

.dc-head__lead {
	max-width: 27.5rem; /* 440 */
}

@media (min-width: 961px) {
	.dc-head {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		gap: var(--wp--preset--spacing--70);
	}
}

/* A body-font heading (process step titles). */
:is(h1, h2, h3, h4, h5, h6).has-body-font-family {
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	-webkit-text-stroke: 0;
}

/* Card colour variants (block styles on Group). */
.is-style-card-dark       { background: var(--wp--preset--color--surface-inverse); color: var(--wp--preset--color--ink-inverse); }
.is-style-card-vermillion { background: var(--wp--preset--color--surface-brand);   color: var(--wp--preset--color--ink-on-brand); }
.is-style-card-chocolate  { background: var(--wp--preset--color--surface-muted);   color: var(--wp--preset--color--ink); }
.is-style-card-cream {
	border: var(--wp--custom--border--default) solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

/* Whole card is one link: stretched from the title. */
.dc-link-card {
	position: relative;
}

.dc-link-card :is(h2, h3) a {
	color: inherit;
	text-decoration: none;
}

.dc-link-card :is(h2, h3) a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.dc-link-card :is(h2, h3) a:focus-visible {
	outline: none;
}

.dc-link-card:has(a:focus-visible) {
	outline: var(--dc-focus-ring) solid var(--wp--custom--color--focus);
	outline-offset: var(--wp--preset--spacing--10);
}

.dc-process .dc-link-card:has(a:focus-visible),
.dc-care .dc-link-card:has(a:focus-visible) {
	outline-color: var(--wp--custom--color--focus-inverse);
}

/* Screenshot frames inside cards carry no drop shadow. */
.dc-case .dc-shot,
.dc-feature .dc-shot {
	margin: 0;
	box-shadow: none;
}

.dc-shot img {
	transition: transform var(--wp--custom--dur--slow) var(--wp--custom--ease--out);
}

.dc-chip {
	display: inline-flex;
	flex: none;
	align-items: center;
	min-height: 1.75rem; /* 28 */
	margin: 0;
	padding: 0 var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink-inverse);
	white-space: nowrap;
}

.is-style-card-dark .dc-chip {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

.dc-pill {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tap-target);
	margin: 0;
	padding: 0 var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--default) solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--pill);
	font-weight: 500;
}

/* Lists: ticks (packages) and diamonds (care plans, "what we did"). */
.dc-ticks,
.dc-diamonds {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dc-ticks li,
.dc-diamonds li {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}

.dc-ticks li::before {
	content: "";
	flex: none;
	width: var(--dc-icon);
	height: var(--dc-icon);
	margin-top: var(--wp--preset--spacing--10);
	background: var(--wp--preset--color--accent-text);
	-webkit-mask: url(assets/images/icons/check.svg) center / contain no-repeat;
	mask: url(assets/images/icons/check.svg) center / contain no-repeat;
}

.dc-diamonds li::before {
	content: "";
	flex: none;
	width: var(--wp--preset--spacing--20);
	height: var(--wp--preset--spacing--20);
	margin-top: 0.6em;
	background: var(--wp--preset--color--brand);
	rotate: 45deg;
}

/* ==========================================================================
   10. dc/marquee
   375: padding space-4. 641+: space-5. No layout change otherwise.
   ========================================================================== */

.dc-marquee {
	padding-block: var(--wp--preset--spacing--40);
	overflow: hidden;
}

.dc-marquee .dc-marquee__track {
	display: flex;
	width: max-content;
}

.dc-marquee .dc-marquee__track > p {
	display: flex;
	align-items: center;
	margin: 0;
	white-space: nowrap;
}

/* Separator: a 16px diamond with space-7 either side. */
.dc-marquee .dc-marquee__track > p::after {
	content: "";
	width: var(--wp--preset--spacing--40);
	height: var(--wp--preset--spacing--40);
	margin-inline: var(--wp--preset--spacing--70);
	background: var(--wp--preset--color--ink-on-brand);
	rotate: 45deg;
}

.dc-marquee__track.is-cloned {
	animation: dc-marquee var(--wp--custom--loop--marquee) linear infinite;
}

.dc-marquee:hover .dc-marquee__track,
.dc-marquee:focus-within .dc-marquee__track {
	animation-play-state: paused;
}

@keyframes dc-marquee {
	to { transform: translateX(-50%); }
}

@media (min-width: 641px) {
	.dc-marquee {
		padding-block: var(--wp--preset--spacing--50);
	}
}

/* ==========================================================================
   11. dc/about-stats
   375: heading, lead, button stacked. Stats one column, a rule between each.
   641: stats 2x2, vertical divider between columns, rule between rows.
   1101: heading left 1.1fr / lead + button right 1fr, bottom-aligned. Stats four across.
   ========================================================================== */

.dc-about__intro {
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

.dc-about .dc-about__intro > *,
.dc-about .dc-about__head > *,
.dc-about .dc-stats > *,
.dc-about .dc-stat > * {
	margin-block: 0;
}

.dc-about .dc-about__head > .dc-eyebrow {
	margin-bottom: var(--wp--preset--spacing--50);
}

.dc-about .dc-about__body > .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--50);
}

.dc-about .dc-stats {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-top: var(--wp--preset--spacing--70);
	border-top: var(--wp--custom--border--default) solid var(--wp--preset--color--border);
}

.dc-stat {
	padding-block: var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--border--default) solid var(--wp--custom--color--border-subtle);
}

.dc-stat:first-child {
	border-top: 0;
}

.dc-about .dc-stat > p + p {
	margin-top: var(--wp--preset--spacing--30);
}

@media (min-width: 641px) {
	.dc-stat {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) 0;
	}

	.dc-about .dc-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dc-stat:nth-child(2) {
		border-top: 0;
	}

	.dc-stat:nth-child(even) {
		padding-left: var(--wp--preset--spacing--50);
		border-left: var(--wp--custom--border--default) solid var(--wp--custom--color--border-subtle);
	}
}

@media (min-width: 1101px) {
	.dc-about__intro {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: end;
		gap: var(--wp--preset--spacing--80);
	}

	.dc-about .dc-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		margin-top: var(--wp--preset--spacing--80);
	}

	.dc-stat,
	.dc-stat:nth-child(even) {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--50);
		border-top: 0;
		border-left: var(--wp--custom--border--default) solid var(--wp--custom--color--border-subtle);
	}

	.dc-stat:first-child {
		padding-left: 0;
		border-left: 0;
	}
}

/* ==========================================================================
   12. dc/services
   375: head stacks. Cards one column, natural height, padding space-5. Pills wrap.
   641: cards 2x2, equal heights per row.
   961: head side by side. 1101: four cards in a row.
   ========================================================================== */

.dc-services__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--custom--grid-gap);
}

.dc-services .dc-services__grid > *,
.dc-services .dc-card > *,
.dc-services .dc-card__price > * {
	margin-block: 0;
}

.dc-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--lg);
}

.dc-card.is-style-card-dark .dc-card__num  { color: var(--wp--preset--color--highlight-inverse); }
.dc-card.is-style-card-cream .dc-card__num { color: var(--wp--preset--color--accent-text); }

.dc-services .dc-card__price {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--wp--custom--border--default) solid currentColor;
	font-weight: 500;
}

.dc-services .dc-also {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--60);
}

.dc-services .dc-also > * {
	margin-block: 0;
}

.dc-also__label {
	margin-right: var(--wp--preset--spacing--10);
	font-weight: 600;
}

@media (min-width: 641px) {
	.dc-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dc-card {
		padding: var(--wp--preset--spacing--60);
	}
}

@media (min-width: 1101px) {
	.dc-services__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.dc-card {
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	}
}

@media (hover: hover) {
	.dc-card:hover {
		transform: translateY(calc(var(--wp--preset--spacing--20) * -1)) rotate(-1.5deg);
		box-shadow: var(--wp--preset--shadow--hard-md);
	}

	.dc-card:nth-child(even):hover {
		transform: translateY(calc(var(--wp--preset--spacing--20) * -1)) rotate(1.5deg);
	}

	.dc-card.is-style-card-dark:hover {
		box-shadow: var(--wp--preset--shadow--hard-md-brand);
	}
}

/* ==========================================================================
   13. dc/work-bento (+ the case card, shared with dc/case-grid)
   375: one column in source order, card padding space-5.
   641: Sharp full, Yea + Moon Rose side by side, Blinds full.
   1101: 12 columns. Row 1: 7 / 5. Row 2: 5 / 7.
   ========================================================================== */

.dc-bento {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--custom--grid-gap);
}

.dc-bento > *,
.dc-cases > *,
.dc-case > *,
.dc-case .dc-case__meta > *,
.dc-case .dc-case__meta > .wp-block-group > *,
.dc-case .dc-result > * {
	margin-block: 0;
}

.dc-case {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--lg);
}

/* In a narrow card the chip can't sit beside a long name: it wraps to the line above it. */
.dc-case .dc-case__meta {
	display: flex;
	flex-wrap: wrap-reverse;
	align-items: flex-end; /* wrap-reverse flips the cross axis: this is the top */
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.dc-case .dc-case__meta > .wp-block-group {
	flex: 1 1 12rem;
	min-width: 0;
}

.dc-case .dc-case__loc {
	margin-top: var(--wp--preset--spacing--10);
	font-weight: 500;
}

.dc-case .dc-result {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--md);
	font-weight: 500;
}

/* "View case study" sticker (decoration): spins in on hover and keyboard focus. */
.dc-case.dc-link-card::after {
	content: "View case study";
	position: absolute;
	top: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--40);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--preset--spacing--90);
	height: var(--wp--preset--spacing--90);
	padding: var(--wp--preset--spacing--30);
	border: var(--wp--custom--border--default) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--round);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--label);
	line-height: var(--wp--custom--leading--label);
	text-align: center;
	text-transform: uppercase;
	scale: 0;
	rotate: -40deg;
	pointer-events: none;
	transition:
		scale var(--wp--custom--dur--slow) var(--wp--custom--ease--spring),
		rotate var(--wp--custom--dur--slow) var(--wp--custom--ease--spring);
}

.dc-case.dc-link-card:has(a:focus-visible)::after {
	scale: 1;
	rotate: 0deg;
}

@media (hover: hover) {
	.dc-case.dc-link-card:hover {
		transform: translateY(calc(var(--wp--preset--spacing--20) * -1));
	}

	.dc-case.dc-link-card:hover::after {
		scale: 1;
		rotate: 0deg;
	}

	.dc-case.dc-link-card:hover .dc-shot img {
		transform: scale(1.05);
	}
}

@media (min-width: 641px) {
	.dc-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dc-bento > :nth-child(1),
	.dc-bento > :nth-child(4) {
		grid-column: 1 / -1;
	}

	.dc-case {
		padding: var(--wp--preset--spacing--60);
	}
}

@media (min-width: 1101px) {
	.dc-bento {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.dc-bento > :nth-child(1),
	.dc-bento > :nth-child(4) {
		grid-column: span 7;
	}

	.dc-bento > :nth-child(2),
	.dc-bento > :nth-child(3) {
		grid-column: span 5;
	}
}

/* ==========================================================================
   14. dc/process
   375: one column, gap space-7. 641: 2x2, row gap space-7. 1101: four across.
   ========================================================================== */

.dc-process .dc-process__head > * {
	margin-block: 0;
}

.dc-process .dc-process__head > .dc-eyebrow {
	margin-bottom: var(--wp--preset--spacing--50);
}

.dc-process .dc-steps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--70) var(--wp--custom--grid-gap);
	margin-top: var(--wp--preset--spacing--70);
}

.dc-process .dc-steps > *,
.dc-process .dc-step > * {
	margin-block: 0;
}

.dc-step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--50);
}

.dc-step::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: var(--wp--custom--border--strong);
	background: var(--wp--preset--color--brand);
	transform-origin: 0 50%;
}

@media (min-width: 641px) {
	.dc-process .dc-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: var(--wp--preset--spacing--80);
	}
}

@media (min-width: 1101px) {
	.dc-process .dc-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==========================================================================
   15. dc/packages
   375: one column, source order, card padding space-5. Care strip stacks, button full width.
   641: one column, max 620, centred.
   1101: three across, equal heights, Combo in the middle (it is second in the source).
   ========================================================================== */

.dc-packages .dc-plans {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--70);
}

.dc-packages > *,
.dc-packages .dc-plans > *,
.dc-packages .dc-plan > *,
.dc-packages .dc-plan__amt > *,
.dc-packages .dc-care-strip > * {
	margin-block: 0;
}

.dc-packages > .dc-head {
	margin-bottom: 0;
}

.dc-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--default) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
}

.dc-plan--best {
	border-color: var(--wp--preset--color--surface-brand);
}

.dc-packages .dc-plan__flag {
	position: absolute;
	top: calc(var(--wp--preset--spacing--40) * -1);
	left: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink-inverse);
}

.dc-packages .dc-plan__amt {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20);
	font-weight: 500;
}

.dc-plan__desc {
	color: var(--wp--preset--color--ink-muted);
}

.dc-plan--best .dc-plan__desc {
	color: inherit;
	font-weight: 500;
}

.dc-plan--best .dc-ticks li::before {
	background: var(--wp--preset--color--ink-on-brand);
}

.dc-packages .dc-plan__cta {
	margin-top: auto;
}

.dc-plan__cta .wp-block-button,
.dc-plan__cta .wp-block-button__link {
	width: 100%;
}

.dc-plan--best a:focus-visible {
	outline-color: var(--wp--custom--color--focus);
}

.dc-packages .dc-care-strip {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--md);
}

.dc-care-strip .wp-block-button,
.dc-care-strip .wp-block-button__link {
	width: 100%;
}

.dc-packages .dc-fine {
	margin-top: var(--wp--preset--spacing--40);
}

@media (min-width: 641px) {
	.dc-packages .dc-plans {
		max-width: 38.75rem; /* 620 */
		margin-inline: auto;
	}

	.dc-plan {
		padding: var(--wp--preset--spacing--60);
	}

	.dc-packages .dc-plan__flag {
		left: var(--wp--preset--spacing--60);
	}

	.dc-packages .dc-care-strip {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	}

	.dc-packages .dc-care-strip > p {
		flex: 1 1 20rem;
	}

	.dc-care-strip .wp-block-button,
	.dc-care-strip .wp-block-button__link {
		width: auto;
	}
}

@media (min-width: 1101px) {
	.dc-packages .dc-plans {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--custom--grid-gap);
		max-width: var(--wp--style--global--content-size);
	}
}

@media (hover: hover) {
	.dc-plan:hover {
		transform: translateY(calc(var(--wp--preset--spacing--20) * -1));
		box-shadow: var(--wp--preset--shadow--hard-md);
	}
}

/* ==========================================================================
   16. dc/page-hero
   375 + 768: eyebrow, H1, lead stacked. 961: H1 left, lead right, bottom-aligned (wraps if the H1 runs long).
   ========================================================================== */

.dc-page-hero {
	padding-block: var(--wp--preset--spacing--70);
}

.dc-page-hero > *,
.dc-page-hero .dc-page-hero__row > * {
	margin-block: 0;
}

.dc-page-hero > .dc-eyebrow {
	margin-bottom: var(--wp--preset--spacing--50);
}

.dc-page-hero .dc-page-hero__row {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

/* Same rule as the home hero: scale the whole H1 down before a word breaks.
   7.9 covers "Websites" (7.79em), the longest word in the two page heroes. */
.dc-page-hero {
	container-type: inline-size;
	--dc-fit-word: 7.9;
}

.dc-page-hero h1 {
	font-size: min(var(--wp--preset--font-size--display), calc(100cqi / var(--dc-fit-word)));
	overflow-wrap: break-word;
}

@media (min-width: 641px) {
	.dc-page-hero {
		padding-top: var(--wp--preset--spacing--80);
	}
}

@media (min-width: 961px) {
	.dc-page-hero .dc-page-hero__row {
		flex-flow: row wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
	}

	.dc-page-hero .dc-lead {
		flex: 0 1 26rem;
	}
}

/* ==========================================================================
   17. dc/case-featured
   375: copy, then screens. Card padding space-5. Big stat stacks. Phone overlaps by 8px.
   641: card padding space-7, big stat in a row. 961: copy 1fr / screens 1.2fr, vertically centred.
   ========================================================================== */

.dc-feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--lg);
}

.dc-feature > *,
.dc-feature .dc-feature__copy > *,
.dc-feature .dc-bigstat > *,
.dc-feature .dc-feature__screens > * {
	margin-block: 0;
}

.dc-feature .dc-feature__copy > .dc-eyebrow {
	margin-bottom: var(--wp--preset--spacing--50);
}

.dc-feature .dc-feature__client {
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	font-weight: 500;
}

.dc-feature .dc-diamonds {
	margin-top: var(--wp--preset--spacing--50);
}

.dc-feature .dc-bigstat {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--md);
	font-weight: 500;
}

.dc-feature a:focus-visible {
	outline-color: var(--wp--custom--color--focus-inverse);
}

/* Screens: one grid cell; the phone sits over the desktop frame's bottom-right corner. */
.dc-feature .dc-feature__screens {
	display: grid;
}

.dc-feature__screens > * {
	grid-area: 1 / 1;
	min-width: 0;
}

.dc-feature .dc-feature__screens > .dc-shot {
	align-self: start;
	margin-bottom: var(--wp--preset--spacing--60);
}

.dc-feature .dc-feature__screens > .dc-phone {
	z-index: 1;
	align-self: end;
	justify-self: end;
	width: 26%;
	margin-right: calc(var(--wp--preset--spacing--20) * -1);
	padding: var(--wp--preset--spacing--10);
	border-radius: var(--wp--custom--radius--md);
}

.dc-feature .dc-phone img {
	border-radius: var(--wp--custom--radius--sm);
}

@media (min-width: 641px) {
	.dc-feature {
		padding: var(--wp--preset--spacing--70);
	}

	.dc-feature .dc-bigstat {
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--50);
	}

	.dc-feature .dc-feature__screens > .dc-phone {
		margin-right: calc(var(--wp--preset--spacing--30) * -1);
		padding: var(--wp--preset--spacing--20);
	}
}

@media (min-width: 961px) {
	.dc-feature {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		align-items: center;
		gap: var(--wp--preset--spacing--70);
	}
}

/* ==========================================================================
   18. dc/case-grid
   375: one column. 641: two across, the third spans both. 1101: three across, equal heights.
   ========================================================================== */

.dc-case-grid {
	padding-top: var(--wp--custom--grid-gap);
}

.dc-cases {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--custom--grid-gap);
}

.dc-case .dc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.dc-case .dc-tags > *,
.dc-case > .wp-block-group > * {
	margin-block: 0;
}

.dc-case .dc-case__result {
	font-weight: 600;
}

@media (min-width: 641px) {
	.dc-cases {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dc-cases > :nth-child(3) {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1101px) {
	.dc-cases {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.dc-cases > :nth-child(3) {
		grid-column: auto;
	}
}

/* ==========================================================================
   19. dc/work-tiles and dc/extras (same grid: 1 / 2 at 641 / 3 at 1101)
   ========================================================================== */

.dc-tiles__grid,
.dc-extras__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--custom--grid-gap);
}

.dc-tiles .dc-tiles__grid > *,
.dc-tiles .dc-tile > *,
.dc-extras > *,
.dc-extras .dc-extras__head > *,
.dc-extras .dc-extras__grid > *,
.dc-extras .dc-extra > * {
	margin-block: 0;
}

.dc-tiles .dc-tiles__grid {
	gap: var(--wp--preset--spacing--60) var(--wp--custom--grid-gap);
}

.dc-tile {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.dc-tile .wp-block-image {
	margin-bottom: var(--wp--preset--spacing--20);
}

.dc-tile .wp-block-image img {
	display: block;
	width: 100%;
	border: var(--wp--custom--border--default) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	transition:
		transform var(--wp--custom--dur--slow) var(--wp--custom--ease--spring),
		box-shadow var(--wp--custom--dur--slow) var(--wp--custom--ease--spring);
}

.dc-tile h3 a {
	transition: color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.dc-extras .dc-extras__head > .dc-eyebrow {
	margin-bottom: var(--wp--preset--spacing--50);
}

.dc-extras .dc-extras__grid {
	margin-top: var(--wp--preset--spacing--70);
}

.dc-extra {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--default) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
}

@media (min-width: 641px) {
	.dc-tiles__grid,
	.dc-extras__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1101px) {
	.dc-tiles__grid,
	.dc-extras__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (hover: hover) {
	.dc-tile:hover .wp-block-image img {
		transform: translateY(calc(var(--wp--preset--spacing--10) * -1.5)) rotate(-1.5deg);
		box-shadow: var(--wp--preset--shadow--hard-md-brand);
	}

	.dc-tile:hover h3 a {
		color: var(--wp--preset--color--accent-text);
	}

	.dc-extra.dc-extra:hover {
		background-color: var(--wp--preset--color--surface-tint) !important; /* beats the block's has-background colour class */
		transform: translateY(calc(var(--wp--preset--spacing--10) * -1.5)) rotate(-1deg);
		box-shadow: var(--wp--preset--shadow--hard-sm);
	}
}

/* ==========================================================================
   20. dc/care-plans
   375: one column. Annual strip stacks label over text, radius-md.
   641: 2x2, annual strip becomes a pill. 1101: four across.
   ========================================================================== */

.dc-care .dc-care__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--custom--grid-gap);
}

.dc-care > *,
.dc-care .dc-care__grid > *,
.dc-care .dc-cp > *,
.dc-care .dc-cp__amt > *,
.dc-care .dc-annual > * {
	margin-block: 0;
}

.dc-care > .dc-head {
	margin-bottom: var(--wp--preset--spacing--70);
}

.dc-cp {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--default) solid var(--wp--custom--color--border-inverse);
	border-radius: var(--wp--custom--radius--md);
}

.dc-care .dc-cp__amt {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--10);
	font-weight: 500;
}

.dc-cp .dc-diamonds {
	color: var(--wp--preset--color--ink-inverse-muted);
}

/* Highlighted plan (block style). */
.dc-cp.is-style-plan-highlighted {
	border-color: var(--wp--preset--color--surface);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

.dc-cp.is-style-plan-highlighted .dc-diamonds {
	color: inherit;
}

.dc-care .dc-annual {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	width: fit-content;
	max-width: 100%;
	margin-top: var(--wp--preset--spacing--60);
	/* Constrained layout centres children with !important. This strip sits on the left edge of the content column instead, at any screen width. */
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--md);
	font-weight: 500;
}

@media (min-width: 641px) {
	.dc-care .dc-care__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dc-care .dc-annual {
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--40);
		border-radius: var(--wp--custom--radius--pill);
	}
}

@media (min-width: 1101px) {
	.dc-care .dc-care__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (hover: hover) {
	.dc-cp:hover {
		border-color: var(--wp--preset--color--brand);
		transform: translateY(calc(var(--wp--preset--spacing--20) * -1));
	}
}

/* ==========================================================================
   21. dc/faq
   375 + 768: intro above the list; answers full width at 375. 961: intro 0.8fr / list 1.2fr.
   ========================================================================== */

.dc-faq .dc-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
}

.dc-faq .dc-faq__grid > *,
.dc-faq .dc-faq__intro > *,
.dc-faq .dc-faq__list > * {
	margin-block: 0;
}

.dc-faq .dc-faq__intro > .dc-eyebrow {
	margin-bottom: var(--wp--preset--spacing--50);
}

.dc-faq .dc-faq__intro > .dc-lead {
	margin-top: var(--wp--preset--spacing--50);
}

.dc-faq details {
	border-top: var(--wp--custom--border--default) solid var(--wp--preset--color--border);
}

.dc-faq details:last-child {
	border-bottom: var(--wp--custom--border--default) solid var(--wp--preset--color--border);
}

.dc-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	min-height: 4.5rem; /* 72 */
	padding-block: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 600;
	line-height: var(--wp--custom--leading--lead);
	list-style: none;
	cursor: pointer;
}

.dc-faq summary::-webkit-details-marker {
	display: none;
}

/* Round toggle: + when closed, − when open. */
.dc-faq summary::after {
	content: "+";
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.5rem; /* 40 */
	height: 2.5rem;
	border: var(--wp--custom--border--default) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--round);
	font-size: var(--wp--preset--font-size--title);
	font-weight: 400;
	line-height: 1;
	transition:
		transform var(--wp--custom--dur--base) var(--wp--custom--ease--spring),
		background-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.dc-faq details[open] > summary::after {
	content: "\2212";
}

/* Padding, not margin: core zeroes the margins inside the details block. */
.dc-faq details > :not(summary) {
	margin-block: 0;
	padding-bottom: var(--wp--preset--spacing--50);
}

@media (hover: hover) {
	.dc-faq summary:hover::after {
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--surface-muted);
		transform: rotate(90deg);
	}
}

@media (min-width: 641px) {
	.dc-faq details > :not(summary) {
		padding-right: var(--wp--preset--spacing--90);
	}
}

@media (min-width: 961px) {
	.dc-faq .dc-faq__grid {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: var(--wp--preset--spacing--80);
	}
}

/* ==========================================================================
   22. Text section (page starter, plain templates): body copy at the reading measure
   ========================================================================== */

.dc-prose {
	padding-block: var(--wp--preset--spacing--70) var(--wp--custom--section-pad);
}

.dc-prose > :where(p, ul, ol, h2, h3, h4) {
	max-width: var(--wp--custom--measure);
	margin-inline: 0 auto;
}

/* ==========================================================================
   8. Motion
   ========================================================================== */

/* Scroll reveals: hidden only when JS is running. */
html.js .dc-reveal {
	opacity: 0;
	translate: 0 var(--wp--custom--reveal-distance);
	/* Entrance on the individual properties (staggered); hover on transform (no delay). */
	transition:
		opacity var(--wp--custom--dur--slow) var(--wp--custom--ease--out),
		translate var(--wp--custom--dur--slow) var(--wp--custom--ease--out),
		rotate var(--wp--custom--dur--slow) var(--wp--custom--ease--out),
		transform var(--wp--custom--dur--slow) var(--wp--custom--ease--spring),
		box-shadow var(--wp--custom--dur--slow) var(--wp--custom--ease--spring),
		background-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		border-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
	transition-delay:
		calc(var(--i, 0) * var(--wp--custom--stagger)),
		calc(var(--i, 0) * var(--wp--custom--stagger)),
		calc(var(--i, 0) * var(--wp--custom--stagger)),
		0s, 0s, 0s, 0s;
}

html.js .dc-reveal.is-in {
	opacity: 1;
	translate: 0 0;
	rotate: 0deg;
}

/* Service cards enter from tilted angles. */
html.js .dc-card.dc-reveal:not(.is-in)               { rotate: -4deg; }
html.js .dc-card.dc-reveal:nth-child(2):not(.is-in)  { rotate: 3deg; }
html.js .dc-card.dc-reveal:nth-child(3):not(.is-in)  { rotate: -3deg; }
html.js .dc-card.dc-reveal:nth-child(4):not(.is-in)  { rotate: 5deg; }
html.js .dc-bigstat.dc-reveal:not(.is-in)            { rotate: -2deg; }

/* Process: each rule draws left to right as its step enters. */
html.js .dc-step.dc-reveal::before {
	transform: scaleX(0);
	transition: transform var(--wp--custom--dur--slow) var(--wp--custom--ease--out);
	transition-delay: calc(var(--i, 0) * var(--wp--custom--stagger));
}

html.js .dc-step.dc-reveal.is-in::before {
	transform: none;
}

/* Featured case study: the screenshot settles from 1.18 to 1 as it enters. */
html.js .dc-feature__screens.dc-reveal:not(.is-in) .dc-shot img {
	transform: scale(1.18);
}

/* FAQ answers drop in when opened. */
.dc-faq details[open] > :not(summary) {
	animation: dc-drop var(--wp--custom--dur--base) var(--wp--custom--ease--out) both;
}

/* Hero: the copy has no entrance (LCP). The mockups enter after first paint. */
.dc-hero__desk > *,
.dc-hero__phone > *,
.dc-badge {
	transition:
		opacity var(--wp--custom--dur--slow) var(--wp--custom--ease--out),
		translate var(--wp--custom--dur--slow) var(--wp--custom--ease--spring),
		rotate var(--wp--custom--dur--slow) var(--wp--custom--ease--spring),
		scale var(--wp--custom--dur--slow) var(--wp--custom--ease--spring);
}

.dc-hero__phone > * { transition-delay: 120ms; }
.dc-badge           { transition-delay: 240ms; }

html.js .dc-hero__stage:not(.is-ready) .dc-hero__desk > * {
	opacity: 0;
	translate: calc(var(--wp--preset--spacing--80) * -1) var(--wp--preset--spacing--70);
	rotate: -8deg;
}

html.js .dc-hero__stage:not(.is-ready) .dc-hero__phone > * {
	opacity: 0;
	translate: 0 var(--wp--preset--spacing--90);
	rotate: 13deg;
	scale: 0.8;
}

html.js .dc-hero__stage:not(.is-ready) .dc-badge {
	opacity: 0;
	rotate: -120deg;
	scale: 0;
}

/* Loops */
.dc-hero__stage::before {
	animation: dc-blob var(--wp--custom--loop--blob) ease-in-out infinite alternate;
}

.dc-hero__stage.is-ready .dc-hero__phone > * {
	animation: dc-float var(--wp--custom--loop--float) ease-in-out var(--wp--custom--dur--slow) infinite;
}

.dc-badge__ring {
	animation: dc-spin var(--wp--custom--loop--badge) linear infinite;
}

@media (hover: hover) {
	.dc-badge:hover .dc-badge__ring {
		animation-duration: 4s;
	}
}

@keyframes dc-blob {
	0%   { border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; }
	33%  { border-radius: 58% 42% 55% 45% / 42% 58% 42% 58%; }
	66%  { border-radius: 40% 60% 48% 52% / 58% 40% 60% 42%; }
	100% { border-radius: 52% 48% 60% 40% / 46% 54% 46% 54%; }
}

@keyframes dc-float {
	50% { transform: translateY(calc(var(--wp--preset--spacing--30) * -1)); }
}

@keyframes dc-spin {
	to { transform: rotate(360deg); }
}

/* Hero parallax: the two mockups drift up at different speeds as the stage leaves. */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.dc-hero__stage {
			view-timeline: --dc-stage;
		}

		.dc-hero__desk,
		.dc-hero__phone {
			animation: dc-drift-a linear both;
			animation-timeline: --dc-stage;
			animation-range: exit 0% exit 100%;
		}

		.dc-hero__phone {
			animation-name: dc-drift-b;
		}
	}
}

@keyframes dc-drift-a {
	to { translate: 0 calc(var(--wp--preset--spacing--90) * -1); }
}

@keyframes dc-drift-b {
	to { translate: 0 calc(var(--wp--preset--spacing--100) * -1.25); }
}

/* Reduced motion: removed, not shortened. Everything sits in its final state. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	html.js .dc-reveal,
	html.js .dc-hero__stage:not(.is-ready) .dc-hero__desk > *,
	html.js .dc-hero__stage:not(.is-ready) .dc-hero__phone > *,
	html.js .dc-hero__stage:not(.is-ready) .dc-badge {
		opacity: 1;
		translate: none;
		rotate: none;
		scale: none;
	}

	html.js .dc-step.dc-reveal::before,
	html.js .dc-feature__screens.dc-reveal .dc-shot img {
		transform: none;
	}
}