/* Designariusz: styles beyond theme.json (components, states, effects). */

html { -webkit-font-smoothing: antialiased; }

/* Reveal elements start hidden only when JS + Motion can animate them. */
@media (prefers-reduced-motion: no-preference) {
	.js .dd-reveal { opacity: 0; }
}

/* Brutal shadow utilities */
.dd-shadow-dark  { box-shadow: var(--wp--custom--shadow--brutal-dark); }
.dd-shadow-light { box-shadow: var(--wp--custom--shadow--brutal-light); }

/* Captions */
.dd-caption {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1;
	text-transform: uppercase;
}

/* Layout helpers ---------------------------------------------------------- */
:root { --dd-bp: 782px; }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block: 0; }
/* Short pages: the footer sits at the bottom of the screen (no white strip under it). */
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.wp-site-blocks > footer { margin-top: auto; }
body { overflow-x: clip; }

/* Line (separator exported as SVG: assets/svg/line.svg, 1.5px Blacky) */
.wp-block-separator.dd-line {
	border: 0;
	height: 2px;
	margin: 0;
	opacity: 1;
	background: url(../svg/line.svg) 0 0 / 100% 2px no-repeat;
}

/* NAV (Figma 896:2218) ---------------------------------------------------- */
.dd-nav {
	height: var(--wp--custom--nav-height);
	padding: 0 24px;
	gap: 40px;
	background: var(--wp--preset--color--ghost-white);
}
.dd-nav__brand { flex: 1 1 auto; gap: 40px; min-width: 0; }
.dd-nav__logo { margin: 0; flex: 0 0 auto; line-height: 0; }
.dd-nav__logo img { display: block; width: 175.727px; height: 20px; }
.dd-nav__line { flex: 1 1 auto; }
.dd-nav__line-mobile { display: none; }
.dd-nav__line-end { flex: 0 0 69px; width: 69px; }

/* Buttons/Nav: Captions, uppercase. Hover = SemiBold, active = SemiBold + underline. */
.dd-menu { flex: 0 0 auto; }
.dd-menu .wp-block-navigation__container { gap: 24px; }
.dd-menu .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 12px;
	line-height: 12px;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--blacky);
	display: inline-grid;
}
/* Reserve SemiBold width so hover does not shift the layout. */
.dd-menu .wp-block-navigation-item__label { grid-area: 1 / 1; }
.dd-menu .wp-block-navigation-item__content::after {
	content: attr(data-text);
	grid-area: 1 / 1;
	font-weight: 600;
	visibility: hidden;
	height: 0;
}
.dd-menu .wp-block-navigation-item__content:hover,
.dd-menu .wp-block-navigation-item__content:focus-visible { font-weight: 600; }
.dd-menu .current-menu-item > .wp-block-navigation-item__content,
.dd-menu .wp-block-navigation-item__content.is-active {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.dd-menu__toggle { display: none; }

/* NAV_mobile (898:19958) + Menu-Mobile (973:7167) ------------------------- */
@media (max-width: 781px) {
	.dd-nav {
		height: 72px;
		padding: 0;
		background: transparent;
	}
	/* Logo row: fixed, white, mix-blend-difference so it reads on any background. */
	.dd-nav__brand {
		position: fixed;
		inset: 0 0 auto 0;
		z-index: 50;
		height: 72px;
		padding: 0 8px;
		gap: 24px;
		mix-blend-mode: difference;
		pointer-events: none;
	}
	.dd-nav__brand a { pointer-events: auto; }
	.dd-nav__line-mobile { display: block; flex: 1 1 auto; }
	.dd-nav__brand .dd-line { filter: brightness(0) invert(1); }
	.dd-nav__logo img { filter: brightness(0) invert(1); }
	.dd-nav__line-end { display: none; }

	/* Bottom menu bar */
	nav.dd-menu {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		padding: 0 16px max(16px, env(safe-area-inset-bottom)); /* 16px from the bottom of the screen */
		display: flex;
		justify-content: flex-end;
		pointer-events: none;
	}
	nav.dd-menu > * { pointer-events: auto; }
	nav.dd-menu .wp-block-navigation__container {
		flex: 1 1 auto;
		width: 100%;
		flex-wrap: nowrap;
		gap: 4px;
	}
	.dd-menu .wp-block-navigation-item { flex: 1 1 0; min-width: 0; }
	.dd-menu .wp-block-navigation-item__content,
	.dd-menu__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
		height: 36px;
		padding: 4px;
		background: rgba(247, 247, 253, 0.5);
		border: 1px solid var(--wp--preset--color--blacky);
		-webkit-backdrop-filter: blur(12.5px);
		backdrop-filter: blur(12.5px);
	}
	.dd-menu .wp-block-navigation-item__content::after { display: none; }
	/* Menu-colapsed: a single "← menu" button, right-aligned. */
	.dd-menu__toggle {
		width: auto;
		padding: 4px 16px;
		font: inherit;
		font-family: var(--wp--preset--font-family--geist-mono);
		font-size: 12px;
		line-height: 12px;
		letter-spacing: -0.04em;
		text-transform: uppercase;
		color: var(--wp--preset--color--blacky);
		white-space: nowrap;
		cursor: pointer;
	}
	.dd-menu:not(.is-collapsed) .dd-menu__toggle { display: none; }
	.dd-menu.is-collapsed .wp-block-navigation__container { display: none; }
	.dd-menu.is-collapsed .dd-menu__toggle { display: flex; }
	/* While morphing (theme.js setCollapsed) both are shown: the toggle over the items' end. */
	.dd-menu.is-morphing .wp-block-navigation__container { display: flex; }
	.dd-menu.is-morphing .dd-menu__toggle { position: absolute; right: 16px; top: 0; z-index: 1; }
	.dd-menu .wp-block-navigation-item { transform-origin: 0 50%; }
	/* Active page: the reverse of the default button (Blacky, Ghost white label). */
	.dd-menu .wp-block-navigation-item__content.is-active,
	.dd-menu .current-menu-item > .wp-block-navigation-item__content {
		background: var(--wp--preset--color--blacky);
		color: var(--wp--preset--color--ghost-white);
		text-decoration: none;
	}
}

/* Buttons/CTA system (Figma 834:4542 Black, 834:4545 White) ----------------------
   One component everywhere, only the colours change:
   - light: CTA White (dd-white; dd-outline and dd-back look the same), project card links
   - dark: CTA Black (dd-black)
   - on dark cards: CTA Dark (dd-dark), shadow in the card's accent colour
   Same height (39px, 44px on phones), label and arrow. Active state = hover, keyboard
   focus or a tap on touch screens (.is-tap, theme.js initButtons): the → leaves the frame
   to the right and comes back in from the left, pushing the label, plus the shadow.
   No permanent shadows. */
:root { --dd-cta-h: 39px; }
@media (max-width: 781px) { :root { --dd-cta-h: 44px; } }
.wp-block-button[class*="is-style-dd-"] .wp-block-button__link, .dd-home .dd-card__more {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	box-sizing: border-box;
	width: 250px;
	max-width: 100%;
	height: var(--dd-cta-h);
	padding: 0 12px 0 16px;
	border-radius: 0;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 16px;
	line-height: 18px;
	letter-spacing: -0.04em;
	text-align: left;
	text-decoration: none;
	white-space: nowrap; /* the label never wraps when the → comes in on hover */
	transition: box-shadow 0.15s ease, outline-width 0.15s ease, border-color 0.15s ease;
}
.dd-home .dd-card__more { width: 100%; }
.wp-block-button[class*="is-style-dd-"] .wp-block-button__link::before,
.wp-block-button[class*="is-style-dd-"] .wp-block-button__link::after,
.dd-card__more::before, .dd-card__more::after {
	content: "→";
	flex: 0 0 auto;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0.01em;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s cubic-bezier(0.22, 1, 0.36, 1), margin 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-block-button[class*="is-style-dd-"] .wp-block-button__link::after, .dd-card__more::after { margin-left: auto; }
.wp-block-button[class*="is-style-dd-"]:not(.is-style-dd-back) .wp-block-button__link::before,
.dd-card__more::before {
	width: 0;
	margin-right: -16px; /* cancels the flex gap while hidden */
	transform: translateX(-28px);
	overflow: hidden;
}
/* Back: a ← before the label, no arrow at the end; it nudges left when active. */
.wp-block-buttons:has(.is-style-dd-back) { margin: 0; }
.wp-block-button.is-style-dd-back { width: 100%; }
.wp-block-button.is-style-dd-back .wp-block-button__link { width: 100%; }
.wp-block-button.is-style-dd-back .wp-block-button__link::after { content: none; }
.wp-block-button.is-style-dd-back .wp-block-button__link::before { content: "←"; }

/* Colours */
.wp-block-button:is(.is-style-dd-white, .is-style-dd-outline, .is-style-dd-back) .wp-block-button__link, .dd-home .dd-card__more {
	background: var(--wp--preset--color--ghost-white);
	color: var(--wp--preset--color--blacky);
	border: 1px solid var(--wp--preset--color--blacky);
}
.wp-block-button.is-style-dd-black .wp-block-button__link {
	background: var(--wp--preset--color--blacky);
	color: var(--wp--preset--color--ghost-white);
	border: 1px solid var(--wp--preset--color--blacky);
}
.wp-block-button.is-style-dd-dark .wp-block-button__link {
	width: 415px;
	background: var(--wp--preset--color--gunmetal-300);
	color: var(--wp--preset--color--ghost-white);
	border: 1px solid var(--wp--preset--color--ghost-white);
}

/* Active state (shadow): keyboard focus and taps everywhere, hover only with a mouse.
   Tap (.is-tap) and hover are the same rules, so a phone plays exactly the desktop hover. */
.wp-block-button:is(.is-style-dd-white, .is-style-dd-outline, .is-style-dd-back) .wp-block-button__link:is(:focus-visible, .is-tap), .dd-card__more:is(:focus-visible, .is-tap) {
	outline: 0.5px solid var(--wp--preset--color--blacky); /* 1px border + 0.5px = 1.5px, no layout shift */
	outline-offset: 0;
	box-shadow: var(--wp--custom--shadow--brutal-dark);
}
/* Black: same stroke + dark shadow as White; a ghost-white inner line keeps the black shadow readable. */
.wp-block-button.is-style-dd-black .wp-block-button__link:is(:focus-visible, .is-tap) { border-color: var(--wp--preset--color--ghost-white); outline: 1.5px solid var(--wp--preset--color--blacky); outline-offset: 0; box-shadow: var(--wp--custom--shadow--brutal-dark); }
.wp-block-button.is-style-dd-dark .wp-block-button__link:is(:focus-visible, .is-tap) { box-shadow: 4px 4px 0 0 var(--dd-accent, #000); outline: none; }
/* Active state (arrow) */
.wp-block-button[class*="is-style-dd-"]:not(.is-style-dd-back) .wp-block-button__link:is(:focus-visible, .is-tap)::after, .dd-card__more:is(:focus-visible, .is-tap)::after { transform: translateX(40px); }
.wp-block-button[class*="is-style-dd-"]:not(.is-style-dd-back) .wp-block-button__link:is(:focus-visible, .is-tap)::before, .dd-card__more:is(:focus-visible, .is-tap)::before { width: 1.1ch; margin-right: -4px; transform: none; transition-delay: 0.08s; }
.wp-block-button.is-style-dd-back .wp-block-button__link:is(:focus-visible, .is-tap)::before { transform: translateX(-6px); }
@media (hover: hover) {
	.wp-block-button:is(.is-style-dd-white:hover, .is-style-dd-outline:hover, .is-style-dd-back) .wp-block-button__link:hover, .dd-card__more:hover {
		outline: 0.5px solid var(--wp--preset--color--blacky);
		outline-offset: 0;
		box-shadow: var(--wp--custom--shadow--brutal-dark);
	}
	.wp-block-button.is-style-dd-black .wp-block-button__link:hover { border-color: var(--wp--preset--color--ghost-white); outline: 1.5px solid var(--wp--preset--color--blacky); outline-offset: 0; box-shadow: var(--wp--custom--shadow--brutal-dark); }
	.wp-block-button.is-style-dd-dark .wp-block-button__link:hover { box-shadow: 4px 4px 0 0 var(--dd-accent, #000); outline: none; }
	.wp-block-button[class*="is-style-dd-"]:not(.is-style-dd-back) .wp-block-button__link:hover::after, .dd-card__more:hover::after { transform: translateX(40px); }
	.wp-block-button[class*="is-style-dd-"]:not(.is-style-dd-back) .wp-block-button__link:hover::before, .dd-card__more:hover::before { width: 1.1ch; margin-right: -4px; transform: none; transition-delay: 0.08s; }
	.wp-block-button.is-style-dd-back .wp-block-button__link:hover::before { transform: translateX(-6px); }
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-button[class*="is-style-dd-"] .wp-block-button__link::before,
	.wp-block-button[class*="is-style-dd-"] .wp-block-button__link::after,
	.dd-card__more::before, .dd-card__more::after { transition: none; }
}
.wp-block-buttons { gap: 16px; }
/* Homepage "more projects this way": longer label, so a wider fixed button (it never grows on hover). */
.dd-projects .dd-only-desktop .wp-block-button__link { width: 350px; }

/* Shared text ------------------------------------------------------------- */
.dd-home h1, .dd-home h2 { color: var(--wp--preset--color--gunmetal-300); }
.dd-home p { margin: 0; }

/* Hero (896:2220 / 898:19959) --------------------------------------------- */
.dd-hero {
	min-height: 800px;
	box-sizing: border-box;
	padding: 0 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
/* Invisible twin of the scroll hint (opacity 0 in Figma) keeps the row centred. */
.dd-hero::before { content: ""; display: block; height: 41px; }
.dd-hero__row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 60px;
	width: 100%;
}
.dd-hero__content {
	flex: 0 0 525px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.dd-hero__title { font-size: 69px; line-height: 60px; }
.dd-hero { position: relative; }
.dd-hero__row, .dd-scroll { position: relative; z-index: 1; }
/* "damn" in Geist Pixel with the Cliffhanger glitch (theme.js initHeroGlitch). */
.dd-hero__title strong {
	position: relative;
	display: inline-block;
	font-family: var(--wp--preset--font-family--geist-pixel);
	font-weight: 400;
	letter-spacing: -0.04em;
}
.dd-hero__lead { font-size: 16px; line-height: 18px; white-space: nowrap; }
.dd-hero__buttons { margin: 0; }
.dd-hero__eyes {
	flex: 0 1 683.9px;
	margin: 0;
	aspect-ratio: 683.901 / 446.227;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dd-hero__eyes img, .dd-goggles {
	width: 88.9%; /* Hero-googles.svg 608 / 683.901 (bounding box of the 15°-rotated Figma vector) */
	height: auto;
	overflow: visible;
}
.dd-goggles__blink { transform-box: fill-box; transform-origin: center; transition: transform 90ms ease-in; }
.dd-goggles__blink.is-blinking { transform: scaleY(0.08); }

/* Scroll hint */
.dd-scroll {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 113px;
	padding-bottom: 0;
}
.dd-scroll__label { font-size: 16px; line-height: 18px; opacity: 0.2; }
/* Three → glyphs, each rotated 90° (vertical writing mode), one per column: 23px box + 6px gap. */
.dd-home .dd-scroll__arrows {
	writing-mode: vertical-lr;
	text-orientation: sideways;
	word-break: break-all;
	height: 11px;
	font-size: 18px;
	line-height: 29px;
	letter-spacing: 0;
	opacity: 0.2;
	margin-right: -6px;
}

@media (max-width: 1279px) and (min-width: 782px) {
	.dd-hero__content { flex-basis: 460px; }
	.dd-hero__lead { white-space: normal; }
	.dd-hero__title { font-size: 60px; line-height: 54px; }
}

@media (max-width: 781px) {
	.dd-hero {
		min-height: 700px;
		padding: 0 8px;
		justify-content: center;
	}
	.dd-hero::before, .dd-scroll { display: none; }
	.dd-hero__row { flex-direction: column; gap: 10px; }
	.dd-hero__eyes { order: -1; flex: 0 0 auto; width: min(341.951px, 100%); }
	.dd-hero__content { flex: 0 0 auto; width: 100%; }
	/* 52/48 in Figma; scales down below 402px so "Design for brands" stays on one line. */
	.dd-hero__title { font-size: min(52px, calc((100vw - 12px) * 0.1335)); line-height: 0.923; margin-right: -4px; }
	.dd-hero__lead { white-space: normal; }
	.dd-hero__lead br { display: none; }
	.dd-hero__buttons { flex-direction: column; gap: 8px; }
	.dd-hero__buttons .wp-block-button { width: 100%; }
	.dd-hero__buttons .wp-block-button[class*="is-style-dd-"] .wp-block-button__link { width: 100%; height: 44px; }
}

/* Figma text uses text-box-trim (cap / alphabetic): spacing is measured between glyphs. */
.dd-home :is(h1, h2, h3, h4, h5, h6, p) { text-box: trim-both cap alphabetic; }

.dd-only-mobile { display: none !important; }
@media (max-width: 781px) {
	.dd-only-mobile { display: flex !important; }
	.dd-only-desktop { display: none !important; }
}

/* Tags (Service: square, Tool: pill) -------------------------------------- */
.dd-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.dd-home .dd-tag {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	border: 1px solid var(--wp--preset--color--blacky);
	font-size: 12px;
	line-height: 12px;
	text-transform: uppercase;
	white-space: nowrap;
	text-box: none;
}
.dd-home .dd-tag--tool { padding: 4px 8px; border-radius: 16px; }

/* Projects (896:2297 / 898:19989) ----------------------------------------- */
.dd-projects {
	min-height: 800px;
	box-sizing: border-box;
	padding: 60px 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	overflow: clip;
}
.dd-projects__head { display: flex; align-items: center; justify-content: space-between; }
.dd-projects__head .wp-block-buttons { margin: 0; }
.dd-projects__title { font-size: 52px; line-height: 48px; }
.dd-projects__grid { display: flex; gap: 16px; align-items: flex-start; }

/* Card */
.dd-card {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: var(--wp--preset--color--ghost-white);
}
.dd-card__image {
	position: relative;
	margin: 0;
	height: 400px;
	box-sizing: border-box;
	filter: grayscale(1); /* black & white, colour returns on hover */
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
}
.dd-card__image::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 var(--dd-card-stroke, 1.5px) var(--wp--preset--color--blacky); pointer-events: none; }
.dd-tint .dd-card__image { background: var(--wp--preset--color--persian-blue-200); }
.dd-card .dd-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Zoomed crop (K-WOOD): Figma crops the photo (122.41% × 142.7%, offset -11.28% / -21.4%) on desktop. */
@media (min-width: 782px) {
	.dd-projects .dd-zoom .dd-card__image img {
		position: absolute;
		max-width: none;
		width: 122.41%;
		height: 142.7%;
		left: -11.28%;
		top: -21.4%;
	}
}
.dd-card:hover .dd-card__image,
.dd-card:focus-within .dd-card__image,
.dd-card__image.is-revealed { filter: grayscale(0); }
.dd-card__body { display: flex; flex-direction: column; gap: 16px; padding-right: 12px; }
.dd-card__title {
	font-size: 32px;
	line-height: 60px;
	text-transform: uppercase;
	color: var(--wp--preset--color--gunmetal-300);
}
.dd-card__text { font-size: 16px; line-height: normal; }

/* Query Loop wrappers (post-template <ul>/<li>) */
.dd-projects__grid, .dd-projects-grid { margin: 0; padding: 0; list-style: none; }
.dd-projects__grid > li { flex: 1 1 0; min-width: 0; display: flex; }
.dd-projects-grid > li { display: flex; min-width: 0; }
.dd-projects__grid .dd-card, .dd-projects-grid .dd-card { flex: 1 1 auto; }

/* Project tags from the Services / Tools taxonomies (core/post-terms) */
.dd-terms { display: contents; }
.dd-terms .wp-block-post-terms__separator { display: none; }
.dd-home .dd-terms a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	border: 1px solid currentColor;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 12px;
	line-height: 12px;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--blacky);
	text-decoration: none;
}
.dd-home .dd-terms--tool a { padding: 4px 8px; border-radius: 16px; }
.dd-home .dd-terms a:hover { background: var(--wp--preset--color--blacky); color: var(--wp--preset--color--ghost-white); }
.dd-home .dd-case-head .dd-terms a { color: var(--dd-case); }
.dd-home .dd-case-head .dd-terms a:hover { background: var(--dd-case); color: var(--wp--preset--color--gunmetal-300); }

/* Card link "more info" / "see case study": core/read-more styled as CTA White (button system above). */
.dd-card__more.dd-only-mobile { display: none !important; }
@media (max-width: 781px) {
	.dd-card__more.dd-only-mobile { display: flex !important; }
}

/* Pagination under the archive grid */
.dd-pagination { margin-top: 40px; gap: 16px; font-size: 16px; }
.dd-pagination a { color: inherit; }

@media (max-width: 1100px) and (min-width: 782px) {
	.dd-projects__grid { flex-wrap: wrap; }
	.dd-projects__grid > li { flex: 1 1 calc(50% - 8px); }
}

@media (max-width: 781px) {
	.dd-projects {
		min-height: 0;
		padding: 24px 8px;
		gap: 24px;
	}
	.dd-projects__title { font-size: 39px; line-height: 36px; }
	.dd-projects__grid { flex-direction: column; gap: 60px; }
	.dd-projects__grid > li, .dd-card { flex: 0 0 auto; width: 100%; }
	.dd-card__image { height: 200px; }
	.dd-projects__more { margin: 0; }
	.dd-projects__more .wp-block-button { width: 100%; }
	.dd-home .dd-projects__more .wp-block-button[class*="is-style-dd-"] .wp-block-button__link { width: 100%; }
}

/* Heading + Text (section heading pattern) --------------------------------- */
.dd-heading { display: flex; flex-direction: column; gap: 16px; }
.dd-heading__title { font-size: 52px; line-height: 48px; }
.dd-heading__text { font-size: 16px; line-height: 18px; }

/* Services (896:2305 / 898:20033) ----------------------------------------- */
.dd-services {
	box-sizing: border-box;
	padding: 107px 40px;
	display: flex;
	align-items: center;
	gap: 120px;
	overflow: clip;
}
.dd-services__content {
	flex: 0 1 557px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.dd-services .dd-heading__text { max-width: 550px; }
.dd-services__cta { margin: 0; }
/* Illustration ring: 5 illustrations on a circle, slowly turning. theme.js (initServicesRing)
   sets each one's transform/opacity per frame; without JS only the first one shows, centred. */
.dd-services__art { flex: 0 1 600px; position: relative; aspect-ratio: 1; }
.dd-services__illustration { position: absolute; left: 30%; top: 30%; width: 40%; margin: 0; opacity: 0; will-change: transform, opacity; }
.dd-services__illustration:first-child { left: 10%; top: 10%; width: 80%; opacity: 1; }
/* Laid out at the zoomed size and only ever scaled down, so the browser never enlarges a rasterised SVG (blurry). */
.dd-services__art.is-ring .dd-services__illustration { left: 10%; top: 10%; width: 80%; }
.dd-services__illustration :is(img, svg) { display: block; width: 100%; height: auto; }

/* Service accordion item (Component 8 = open, Component 9–12 = closed) */
.dd-accordion { display: flex; flex-direction: column; gap: 16px; }
.dd-service {
	box-sizing: border-box;
	padding: 12px;
	background: var(--wp--preset--color--gunmetal-200);
	border: 3px solid var(--wp--preset--color--ghost-white);
	box-shadow: var(--wp--custom--shadow--brutal-light);
	color: var(--wp--preset--color--ghost-white);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.dd-service > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 600;
	font-size: 29px;
	line-height: 21px; /* 32px line trimmed to cap height, as in Figma (text-box-trim) */
	letter-spacing: -0.04em;
	text-transform: uppercase;
}
.dd-service > summary::-webkit-details-marker { display: none; }
.dd-service > summary::after {
	content: "→";
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-weight: 600;
	font-size: 32px;
	line-height: 23px;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.dd-service > summary:focus-visible { outline: 1.5px solid var(--wp--preset--color--persian-blue-200); outline-offset: 4px; }
.dd-service p {
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 18px;
	color: var(--wp--preset--color--ghost-white);
}
.dd-service p:empty { display: none; }
/* Each service has its own accent (Figma Components 18–21). */
.dd-service { --dd-accent: var(--wp--preset--color--persian-pink-200); }
.dd-service--indigo { --dd-accent: var(--wp--preset--color--tropical-indigo-200); }
.dd-service--blue { --dd-accent: var(--wp--preset--color--persian-blue-200); }
.dd-service--orangina { --dd-accent: var(--wp--preset--color--orangina-200); }
.dd-service--aquamarine { --dd-accent: var(--wp--preset--color--aquamarine-200); }
.dd-service > summary { transition: color 0.2s ease; }
.dd-service:not([open]):hover { border-color: var(--dd-accent); }
.dd-service:not([open]):hover > summary { color: var(--dd-accent); }
.dd-service[open] {
	background: var(--wp--preset--color--gunmetal-300);
	border-color: var(--dd-accent);
}
.dd-service[open] > summary { color: var(--dd-accent); }
.dd-service[open] > summary::after { transform: rotate(45deg); }

@media (max-width: 1100px) and (min-width: 782px) {
	.dd-services { gap: 40px; padding-inline: 24px; }
}

@media (max-width: 781px) {
	.dd-services { padding: 120px 8px; }
	.dd-services__content { flex: 1 1 auto; width: 100%; }
	.dd-services .dd-heading__title { font-size: 39px; line-height: 36px; }
	.dd-services { flex-direction: column; gap: 24px; }
	.dd-services__art { order: -1; flex: none; align-self: center; width: min(300px, 100%); }
	.dd-services__cta .wp-block-button { width: 100%; }
	.dd-home .dd-services__cta .wp-block-button[class*="is-style-dd-"] .wp-block-button__link { width: 100%; }
}

/* Testimonials (896:2306 / 898:20045) ------------------------------------- */
.dd-testimonials {
	min-height: 600px;
	box-sizing: border-box;
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
	overflow: clip;
}
.dd-testimonials__title { font-size: 60px; line-height: 60px; }
.dd-carousel { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; overflow: clip; overflow-clip-margin: 4px; }
.dd-carousel__track { display: flex; gap: 8px; width: 100%; will-change: transform; }
.dd-testimonial {
	flex: 0 0 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 24px 24px 16px;
	border-block: 1.5px solid transparent;
	box-shadow: inset 0 var(--dd-stroke-w, 1.5px) 0 var(--wp--preset--color--blacky), inset 0 calc(-1 * var(--dd-stroke-w, 1.5px)) 0 var(--wp--preset--color--blacky); /* 1.5px borders render as 1px in Chrome */
}
.dd-testimonial__quote { font-size: 16px; line-height: normal; }
.dd-testimonial__logo { flex: 0 0 auto; margin: 0; mix-blend-mode: luminosity; filter: grayscale(1); }
.dd-testimonial__logo img { display: block; height: 54px; width: auto; }
.dd-testimonial__logo--self img { height: 20px; }

/* Dots (Frame 100321): active 16px Gunmetal-200, inactive 12px Gunmetal-100 */
.dd-carousel__dots { display: flex; align-items: center; gap: 12px; height: 16px; }
.dd-carousel__dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--gunmetal-100);
	cursor: pointer;
	transition: width 0.25s ease, height 0.25s ease, background-color 0.25s ease;
}
.dd-carousel__dot[aria-current="true"] { width: 16px; height: 16px; background: var(--wp--preset--color--gunmetal-200); }
.dd-carousel__dot:focus-visible { outline: 1.5px solid var(--wp--preset--color--persian-blue-200); outline-offset: 2px; }

@media (max-width: 781px) {
	.dd-testimonials {
		min-height: 0;
		padding: 96px 8px;
		align-items: center;
		gap: 40px;
	}
	.dd-testimonials__title { font-size: 39px; line-height: 36px; text-align: center; }
	.dd-carousel { gap: 40px; }
	.dd-testimonial {
		flex-direction: column-reverse;
		justify-content: center;
		gap: 32px;
		padding: 40px 8px;
	}
	.dd-testimonial__quote { text-align: center; }
}

/* About me (896:2311 / 898:20054) ------------------------------------------ */
.dd-about {
	position: relative;
	box-sizing: border-box;
	padding: 228px 120px;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Mobile loop: the text slides in from x = 120px every 10s; don't let it widen the page. */
@media (max-width: 781px) { .dd-about { overflow-x: clip; } }
.dd-about__inner {
	display: flex;
	align-items: center;
	gap: 60px;
	width: 1069px; /* photo 442 + gap 60 + text 567 */
	max-width: 100%;
}
.dd-about__photo {
	position: relative;
	flex: 0 0 442px;
	aspect-ratio: 442 / 344.185;
	margin: 0;
	box-shadow: var(--wp--custom--shadow--brutal-dark);
}
.dd-about__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dd-about__photo::after { content: ""; position: absolute; inset: 0; background: rgba(3, 79, 245, 0.5); pointer-events: none; }
.dd-about__text {
	flex: 0 0 567px; /* overflows the 1016px frame, as in Figma */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}
.dd-about__title { font-size: 52px; line-height: 48px; }
.dd-about__lead { font-size: 16px; line-height: 18px; }
.dd-about__cta { margin: 0; }
/* Door: 256px illustration, rotated 15° inside a 313.5px box at left 75%+5px, top 86px. */
.dd-about__door {
	position: absolute;
	left: calc(75% + 5px + 28.77px);
	top: calc(86px + 28.77px);
	width: 256px;
	margin: 0;
	pointer-events: none;
}
.dd-about__door :is(img, svg) { display: block; width: 100%; height: auto; transform: rotate(15deg); }

@media (max-width: 1100px) and (min-width: 782px) {
	.dd-about { padding-inline: 40px; }
	.dd-about__photo { flex-basis: 360px; }
	.dd-about__text { flex-shrink: 1; }
	.dd-about__door { left: auto; right: 0; top: 40px; width: 200px; }
}

@media (max-width: 781px) {
	.dd-about { padding: 120px 8px; }
	.dd-about__inner { flex-direction: column; align-items: stretch; gap: 16px; }
	.dd-about__photo { flex: 0 0 auto; width: 100%; aspect-ratio: 845 / 658; box-shadow: 1.5px 1.5px 0 0 var(--wp--preset--color--blacky); }
	.dd-about__text { flex: 0 0 auto; gap: 16px; align-items: stretch; }
	.dd-about__title { font-size: 39px; line-height: 36px; }
	.dd-about__cta .wp-block-button { width: 100%; }
	.dd-home .dd-about__cta .wp-block-button[class*="is-style-dd-"] .wp-block-button__link { width: 100%; }
	.dd-about__door { left: calc(-76px + 28.77px); top: calc(-127.41px + 28.77px); }
}

/* Cliffhanger (896:2499 / 898:20242) --------------------------------------- */
.dd-cliff {
	position: relative;
	height: 800px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: clip;
}
.dd-home .dd-cliff__title {
	position: relative;
	font-family: var(--wp--preset--font-family--geist-pixel);
	font-weight: 400;
	font-size: 120px;
	line-height: 100px;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--blacky);
	white-space: nowrap;
	text-box: none;
}
.dd-cliff__title mark { line-height: 115px; }
/* Glitch (theme.js startGlitch): two coloured copies of the word (pink / blue), sliced and pushed sideways. */
.dd-cliff__title mark.dd-glitch { position: relative; display: inline-block; }
.dd-glitch::before, .dd-glitch::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}
.dd-glitch::before { color: var(--g-c1, var(--wp--preset--color--persian-pink-200)); }
.dd-glitch::after { color: var(--g-c2, var(--wp--preset--color--persian-blue-200)); }
.dd-glitch.is-glitching { transform: translateX(var(--g-jx, 0)); }
.dd-glitch.is-glitching::before { opacity: 1; transform: translateX(var(--g-x1, 4px)); clip-path: var(--g-clip1, inset(20% 0 60% 0)); }
.dd-glitch.is-glitching::after { opacity: 1; transform: translateX(var(--g-x2, -4px)); clip-path: var(--g-clip2, inset(60% 0 20% 0)); }
/* Testimonials: the self-written one glitches (quote copies + logo jolts). */
.dd-testimonial__quote.dd-glitch { position: relative; }
/* Small text: the copies take the top / bottom half instead of thin heading slices. */
.dd-testimonial__quote.dd-glitch.is-glitching::before { clip-path: inset(0 0 45% 0); }
.dd-testimonial__quote.dd-glitch.is-glitching::after { clip-path: inset(55% 0 0 0); }
.dd-testimonial--self .dd-testimonial__logo img { transition: none; }
.dd-testimonial--self.is-glitching .dd-testimonial__logo img {
	transform: translateX(3px) skewX(-8deg);
	filter: drop-shadow(3px 0 0 var(--wp--preset--color--persian-pink-200)) drop-shadow(-3px 0 0 var(--wp--preset--color--persian-blue-200));
}
/* TV effect over the whole section, all the time: scanlines + a rolling bright band +
   a light flicker, faded out towards the top and bottom (no hard edges). Stronger
   during a glitch burst. */
.dd-cliff::before, .dd-cliff::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.dd-cliff::after {
	background: repeating-linear-gradient(to bottom, rgba(17, 22, 29, 0.08) 0 1px, transparent 1px 3px);
	opacity: 0.8;
	transition: opacity 0.08s steps(1);
}
.dd-cliff::before {
	background: linear-gradient(to bottom, transparent 0%, rgba(101, 147, 249, 0.07) 45%, rgba(101, 147, 249, 0.12) 50%, rgba(101, 147, 249, 0.07) 55%, transparent 100%) 0 0 / 100% 40% no-repeat;
}
.dd-cliff.is-glitching::after { opacity: 1; background: repeating-linear-gradient(to bottom, rgba(17, 22, 29, 0.16) 0 1px, transparent 1px 3px); }
@media (prefers-reduced-motion: no-preference) {
	.dd-cliff::before { animation: dd-tv-roll 6s linear infinite; }
	.dd-cliff::after { animation: dd-tv-flicker 0.12s steps(2) infinite; }
}
/* Same TV layer as a standalone element (.dd-tv, added by theme.js): Hero background,
   Services page panels. */
.dd-tv { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.dd-tv::before, .dd-tv::after { content: ""; position: absolute; inset: 0; }
.dd-tv::after { background: repeating-linear-gradient(to bottom, rgba(17, 22, 29, 0.08) 0 1px, transparent 1px 3px); opacity: 0.8; }
.dd-tv::before { background: linear-gradient(to bottom, transparent 0%, rgba(101, 147, 249, 0.07) 45%, rgba(101, 147, 249, 0.12) 50%, rgba(101, 147, 249, 0.07) 55%, transparent 100%) 0 0 / 100% 40% no-repeat; }
.dd-hero > .dd-tv {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 70%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 70%, transparent 100%);
}
.dd-hero.is-glitching > .dd-tv::after { opacity: 1; background: repeating-linear-gradient(to bottom, rgba(17, 22, 29, 0.16) 0 1px, transparent 1px 3px); }
/* On dark panels the lines are light. */
.dd-tv--dark::after { background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px); opacity: 1; }
.dd-tv--dark::before { background: linear-gradient(to bottom, transparent 0%, rgba(247, 247, 253, 0.03) 45%, rgba(247, 247, 253, 0.06) 50%, rgba(247, 247, 253, 0.03) 55%, transparent 100%) 0 0 / 100% 40% no-repeat; }
@media (prefers-reduced-motion: no-preference) {
	.dd-tv::before { animation: dd-tv-roll 6s linear infinite; }
	.dd-tv::after { animation: dd-tv-flicker 0.12s steps(2) infinite; }
}
@keyframes dd-tv-roll { from { background-position: 0 -40%; } to { background-position: 0 140%; } }
@keyframes dd-tv-flicker { 50% { opacity: 0.68; } }

@media (max-width: 781px) {
	.dd-cliff { height: 750px; }
	.dd-home .dd-cliff__title { font-size: 69px; line-height: 60px; }
	.dd-cliff__title mark { line-height: 60px; }
}

/* Contact (896:2574 / 898:20317) ------------------------------------------- */
.dd-contact {
	min-height: 800px;
	box-sizing: border-box;
	padding: 40px;
	display: flex;
	align-items: center;
	gap: 120px;
	overflow: clip;
}
.dd-contact__main { flex: 0 1 672px; display: flex; flex-direction: column; gap: 24px; }
.dd-home .dd-contact__title {
	color: var(--wp--preset--color--blacky);
	white-space: nowrap;
}
.dd-lig { letter-spacing: 0; } /* see initArrowLigatures() in theme.js */
/* Contact "Your move. Write to me --->" (initContactMove): a weight wave runs through "move"
   and pushes the arrow. One 2.8s cycle for both, so they stay in step. */
.dd-move, .dd-move__l, .dd-move-arrow { display: inline-block; }
.is-moving .dd-move__l { animation: dd-move-l 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite; animation-delay: calc(var(--i) * 0.11s); }
.is-moving .dd-move-arrow { animation: dd-move-arrow 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes dd-move-l {
	0%, 34%, 100% { font-weight: 400; transform: none; }
	13% { font-weight: 800; transform: translateY(-0.07em); }
}
@keyframes dd-move-arrow {
	0%, 22%, 56%, 100% { transform: none; }
	34% { transform: translateX(0.4em); }
	44% { transform: translateX(0.08em); }
}
.dd-contact__title br { display: none; }
.dd-home .dd-contact__mail {
	font-family: var(--wp--preset--font-family--geist);
	font-size: 24px;
	line-height: 24px;
	white-space: nowrap;
	text-box: none;
}
.dd-contact__mail a {
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--persian-blue-300);
	text-decoration: underline;
	text-decoration-thickness: 10%;
	text-underline-position: from-font;
}

/* Contact_Form + Input states (Default / Focus 1.5px Blue-200 / Error 2px Pink-300) */
.dd-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.dd-form + .dd-form, .dd-contact .wp-block-shortcode { margin: 0; }
.dd-form__field { display: flex; flex-direction: column; gap: 8px; }
.dd-form__label {
	font-size: 12px;
	line-height: 12px;
	text-transform: uppercase;
}
.dd-form__req { color: var(--wp--preset--color--persian-pink-300); }
.dd-form__input {
	box-sizing: border-box;
	width: 100%;
	height: 39px;
	padding: 12px 8px;
	margin: 0;
	border: 1px solid var(--wp--preset--color--blacky);
	border-radius: 0;
	background: var(--wp--preset--color--ghost-white);
	color: var(--wp--preset--color--blacky);
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 12px;
	line-height: 12px;
	letter-spacing: -0.04em;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.dd-form__input--area { height: 125px; resize: vertical; }
.dd-form__input::placeholder { color: var(--wp--preset--color--blacky); opacity: 0.5; text-transform: uppercase; }
.dd-form__input:focus { outline: 0.5px solid var(--wp--preset--color--persian-blue-200); border-color: var(--wp--preset--color--persian-blue-200); }
.dd-form__input:user-invalid,
.dd-form__input.is-invalid { outline: 1px solid var(--wp--preset--color--persian-pink-300); border-color: var(--wp--preset--color--persian-pink-300); }
.dd-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dd-form__status { font-size: 12px; line-height: 16px; text-transform: uppercase; }
.dd-form__status--error { color: var(--wp--preset--color--persian-pink-300); }
.dd-form__submit button { cursor: pointer; }
.dd-only-mobile-inline { display: none; }

@media (max-width: 781px) {
	.dd-contact {
		min-height: 0;
		padding: 40px 8px;
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}
	.dd-contact__main { flex: 0 0 auto; }
	.dd-home .dd-contact__title { font-size: 39px; line-height: 36px; white-space: normal; }
	.dd-contact__title br { display: inline; }
	.dd-form__submit { width: 100%; }
	.dd-home .dd-form__submit.wp-block-button[class*="is-style-dd-"] .wp-block-button__link { width: 100%; }
	.dd-only-mobile-inline { display: inline; }
	.dd-only-desktop-inline { display: none; }
}

/* Footer (777:1926 / 898:20325) -------------------------------------------- */
.dd-footer {
	position: relative;
	z-index: 1; /* covers the drop shadow of the Services strips above it */
	box-sizing: border-box;
	padding: 24px 40px 12px;
	display: flex;
	flex-direction: column;
	gap: 40px;
	background: var(--wp--preset--color--blacky);
	color: var(--wp--preset--color--ghost-white);
	font-size: 12px;
	line-height: 12px;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	overflow: clip;
}
.dd-footer p { margin: 0; text-box: trim-both cap alphabetic; }
.dd-footer a { color: inherit; text-decoration: none; }
.dd-footer a:hover, .dd-footer a:focus-visible { text-decoration: underline; }
.dd-footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.dd-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.dd-footer__logo { margin: 0; line-height: 0; }
.dd-footer__logo img { display: block; width: 219.659px; height: 25px; }
.dd-footer .dd-footer__info { line-height: 18px; white-space: nowrap; text-box: none; }
.dd-footer__info a {
	color: var(--wp--preset--color--persian-blue-200);
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
}
.dd-footer__cols { display: flex; align-items: flex-start; gap: 80px; white-space: nowrap; }
.dd-footer__col { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.dd-footer .dd-footer__head {
	font-weight: 600;
	text-underline-offset: 2px;
	color: var(--wp--preset--color--gunmetal-100);
	text-decoration: underline;
	text-decoration-thickness: 12.5%;
	text-decoration-skip-ink: none;
}
.dd-footer__links { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.dd-footer__bottom { display: flex; align-items: flex-start; justify-content: space-between; line-height: 18px; white-space: nowrap; }
.dd-footer .dd-footer__copy { opacity: 0.5; }
.dd-footer__legal { display: flex; align-items: center; gap: 24px; }
.dd-footer__legal a {
	color: var(--wp--preset--color--persian-blue-200);
	text-decoration: underline dotted;
	text-decoration-thickness: 15%;
	text-decoration-skip-ink: none;
	text-underline-offset: 3px;
}

@media (max-width: 1023px) and (min-width: 782px) {
	.dd-footer__cols { gap: 40px; }
}

@media (max-width: 781px) {
	.dd-footer { padding: 24px 8px 40px; gap: 80px; }
	/* Leave room for the fixed bottom menu bar */
	.dd-footer { padding-bottom: calc(40px + 68px); } /* menu bar: 36px + 16px from the bottom, + 16px air */
	.dd-footer__top { flex-direction: column; gap: 40px; }
	.dd-footer__cols { flex-direction: column; gap: 40px; }
	.dd-footer__col, .dd-footer__links { align-items: flex-start; }
	.dd-footer__links { gap: 12px; text-align: left; }
	.dd-footer__bottom { align-items: flex-end; }
	.dd-footer__legal { flex-direction: column; align-items: flex-end; gap: 24px; }
	.dd-footer__legal a { color: var(--wp--preset--color--ghost-white); opacity: 0.5; }
}

/* Wide screens: keep the 1440px Figma frame centred ------------------------ */
@media (min-width: 1441px) {
	.dd-nav { padding-inline: calc(24px + (100% - 1440px) / 2); }
	.dd-hero, .dd-projects { padding-inline: calc(24px + (100% - 1440px) / 2); }
	.dd-services, .dd-testimonials, .dd-contact { padding-inline: calc(40px + (100% - 1440px) / 2); }
	.dd-services { justify-content: space-between; }
	.dd-about { padding-inline: calc(120px + (100% - 1440px) / 2); }
	.dd-about__door { left: calc((100% - 1440px) / 2 + 1085px + 28.77px); }
	.dd-footer { padding-inline: calc(40px + (100% - 1440px) / 2); }
}

/* CT@_Bar (834:5069) -------------------------------------------------------- */
.dd-ctabar {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	background: var(--wp--preset--color--ghost-white);
	border: 1.5px solid transparent;
	box-shadow: inset 0 0 0 1.5px var(--dd-stroke, var(--wp--preset--color--blacky));
}
.dd-home .dd-ctabar__title {
	font-family: var(--wp--preset--font-family--geist);
	letter-spacing: -0.04em;
	font-weight: 500;
	font-size: 22px;
	line-height: 24px;
	color: var(--wp--preset--color--gunmetal-300);
}
.dd-home .dd-ctabar__mail {
	font-family: var(--wp--preset--font-family--geist);
	font-size: 24px;
	line-height: 24px;
}
.dd-ctabar__mail a {
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--persian-blue-300);
	text-decoration: underline;
	text-decoration-thickness: 10%;
	text-underline-position: from-font;
}

/* Subpage shell --------------------------------------------------------------- */
.dd-page .wp-block-post-content > * { margin-block: 0; }
.dd-subpage {
	box-sizing: border-box;
	padding: 24px 24px 60px; /* same as the nav and the Projects page */
	display: flex;
	flex-direction: column;
	gap: 80px;
}
.dd-page-head { display: flex; flex-direction: column; gap: 24px; }
.dd-home .dd-page-head__title { font-size: 60px; line-height: 60px; color: var(--wp--preset--color--gunmetal-300); }
.dd-home .dd-page-head__meta { font-size: 16px; line-height: normal; text-transform: uppercase; }

/* Legal pages (Privacy 1052:15387, Cookies 1052:15866, AI 1052:15437) */
.dd-legal { display: flex; flex-direction: column; gap: 40px; }
.dd-legal__section {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 952px;
	letter-spacing: -0.05em;
}
.dd-home .dd-legal__heading {
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-position: from-font;
	letter-spacing: -0.04em;
}
.dd-legal__body { display: flex; flex-direction: column; }
.dd-home .dd-legal__body p { line-height: normal; text-box: none; }
.dd-legal__body > * { margin: 0; }
.dd-legal__body > p + p,
.dd-home .dd-legal__body > .dd-space-before { margin-top: 1lh; }
.dd-legal__body ul { padding-left: 24px; line-height: normal; }
.dd-legal__body strong { font-weight: 600; }
.dd-legal__body a { color: inherit; }
.dd-legal .wp-block-buttons { margin: 0; }

@media (min-width: 1441px) {
	.dd-subpage { padding-inline: calc(24px + (100% - 1440px) / 2); }
}
/* Mobile (Figma: How I use AI 1052:10154, Privacy 1052:10104, Cookie 1052:10172) */
@media (max-width: 781px) {
	.dd-subpage { padding: 40px 8px; gap: 40px; }
	.dd-home .dd-page-head--h2 .dd-page-head__title { font-size: 52px; line-height: 48px; max-width: 303px; }
	.dd-ctabar { padding: 24px 16px; }
	.wp-block-button.is-style-dd-dark .wp-block-button__link { width: 100%; }
}
.dd-home .wp-block-button.dd-btn-full .wp-block-button__link { width: 100%; }
.dd-legal__body > .wp-block-buttons { margin-top: 16px; }

/* Projects page (1052:15591) -------------------------------------------------- */
.dd-subpage.dd-projects-page { padding: 24px 24px 60px; gap: 60px; }
.dd-projects-page__main { display: flex; flex-direction: column; gap: 24px; }
.dd-projects-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 16px;
	row-gap: 64px;
	align-items: start;
}
.dd-card--page .dd-card__image { height: 350px; --dd-card-stroke: 1px; }
.dd-card--page .dd-card__title { text-transform: none; }

@media (min-width: 1441px) {
	.dd-subpage.dd-projects-page { padding-inline: calc(24px + (100% - 1440px) / 2); }
}
@media (max-width: 1100px) and (min-width: 782px) {
	.dd-projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
	.dd-subpage.dd-projects-page { padding: 24px 8px 0; gap: 0; }
	.dd-home .dd-projects-page .dd-page-head__title, .dd-home .dd-services-page .dd-page-head__title { font-size: 39px; line-height: 36px; }
	.dd-projects-grid { grid-template-columns: 1fr; row-gap: 60px; }
	.dd-card--page .dd-card__image { height: 200px; }
}

/* Accent helpers (service colours) */
.dd-accent--pink { --dd-accent: var(--wp--preset--color--persian-pink-200); }
.dd-accent--indigo { --dd-accent: var(--wp--preset--color--tropical-indigo-200); }
.dd-accent--blue { --dd-accent: var(--wp--preset--color--persian-blue-200); }
.dd-accent--orangina { --dd-accent: var(--wp--preset--color--orangina-200); }
.dd-accent--aquamarine { --dd-accent: var(--wp--preset--color--aquamarine-200); }

/* Services page (1052:15249 + slides) --------------------------------------- */
.dd-subpage.dd-services-page { padding: 24px 0 0; gap: 24px; } /* the strips run straight into the footer */
.dd-services-page > .dd-heading { padding-inline: 24px; }
/* Full width of the screen. The open body gets its final width up front (theme.js sets
   --dd-svc-body-w) and the row the height of the tallest service (--dd-svc-h), so
   nothing reflows or jumps while a panel opens. */
.dd-svc {
	display: flex;
	align-items: stretch;
	min-height: var(--dd-svc-h, 800px);
}
/* The page fills the screen under the nav on any screen size (27" too); the strips stretch. */
.dd-subpage.dd-services-page { min-height: calc(100svh - var(--wp--custom--nav-height)); box-sizing: border-box; }
.dd-services-page > .dd-svc { flex: 1 1 auto; }
.dd-svc-panel {
	position: relative;
	box-sizing: border-box;
	flex: 0 0 71px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 24px;
	background: var(--wp--preset--color--gunmetal-300);
	border: 3px solid var(--dd-accent);
	filter: drop-shadow(3px 3px 0 var(--wp--preset--color--gunmetal-100));
	color: var(--wp--preset--color--ghost-white);
	transition: flex-grow 0.6s cubic-bezier(0.65, 0, 0.35, 1), flex-basis 0.6s cubic-bezier(0.65, 0, 0.35, 1);
	overflow: hidden;
}
.dd-svc-panel.is-open { flex: 1 1 0; }
.dd-svc-panel > .dd-tv { z-index: 2; }
.dd-svc-panel__body { position: relative; transform-origin: 50% 50%; }
.dd-svc.is-all-closed .dd-svc-panel { flex: 1 1 0; }
/* Vertical tab: reads bottom-to-top, pinned to the top of the strip. */
.dd-home .dd-svc-panel__tab {
	flex: 1 1 auto;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	text-align: end;
	align-self: center;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-weight: 600;
	font-size: 24px;
	line-height: 17px;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	color: var(--dd-accent);
	cursor: pointer;
	text-box: none;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 16px;
}
/* "NAME ——" separator: the line runs from the name to the end of the tab. */
.dd-svc-panel__tab::before { content: ""; flex: 1 1 auto; width: 3px; transform: scaleX(0.5); background: currentColor; }
.dd-svc-panel__tab:focus-visible { outline: 1.5px solid var(--dd-accent); outline-offset: 6px; }
.dd-svc-panel.is-open .dd-svc-panel__tab { display: none; }
.dd-svc-panel:not(.is-open) { cursor: pointer; }
.dd-svc-panel__body { display: none; }
.dd-svc-panel.is-open .dd-svc-panel__body {
	flex: 1 0 auto;
	width: var(--dd-svc-body-w, auto);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	min-width: 0;
}
.dd-svc-hide {
	position: absolute;
	z-index: 3;
	left: 16px;
	top: 16px;
	padding: 8px 12px;
	border: 1px solid currentColor;
	background: var(--wp--preset--color--gunmetal-300);
	color: var(--wp--preset--color--ghost-white);
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 12px;
	line-height: 12px;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	cursor: pointer;
}
.dd-svc-hide::before { content: ""; position: absolute; inset: -10px; } /* bigger tap target */
.dd-svc-hide:hover, .dd-svc-hide:focus-visible { background: var(--dd-accent); color: var(--wp--preset--color--gunmetal-300); border-color: var(--dd-accent); outline: none; }
.dd-svc-panel__intro { display: flex; align-items: center; justify-content: center; gap: 24px; }
.dd-svc-panel__image { flex: 0 0 300px; margin: 0; }
.dd-svc-panel__image :is(img, svg) { display: block; width: 100%; height: auto; }
.dd-svc-panel__image.is-mirrored :is(img, svg) { transform: scaleX(-1); }
.dd-svc-panel__text { display: flex; flex-direction: column; gap: 24px; max-width: 650px; }
.dd-home .dd-svc-panel__title {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-weight: 600;
	font-size: 48px;
	line-height: normal;
	text-transform: uppercase;
	color: var(--dd-accent);
	display: flex;
	align-items: center;
	gap: 24px;
}
.dd-svc-panel__title::after { content: ""; flex: 1 1 auto; min-width: 40px; height: 3px; transform: scaleY(0.5); background: currentColor; }
.dd-svc-panel p, .dd-svc-panel li { font-size: 16px; line-height: normal; }
.dd-home .dd-svc-panel p { text-box: none; }
.dd-svc-cards { display: flex; gap: 24px; width: 100%; }
/* Web design types (Figma 806:6284): rows "NAME ——— text", out of the boxes, all lines
   running to the text so there are no steps. */
.dd-svc-types { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.dd-svc-type { display: flex; align-items: center; gap: 16px; }
.dd-home .dd-svc-type p { margin: 0; font-size: 16px; line-height: 18px; letter-spacing: -0.04em; }
.dd-home .dd-svc-type__name { display: flex; align-items: center; gap: 16px; flex: 1 1 auto; min-width: 0; font-family: var(--wp--preset--font-family--geist); text-transform: uppercase; white-space: nowrap; }
.dd-svc-type__name::after { content: ""; flex: 1 1 auto; min-width: 40px; height: 3px; transform: scaleY(0.5); background: currentColor; }
.dd-svc-type__text { flex: 0 1 auto; text-align: right; }
.dd-svc-card {
	flex: 1 1 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 16px;
	border: 1.5px solid transparent;
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--ghost-white);
}
.dd-svc-card { border: 3px solid var(--wp--preset--color--ghost-white); box-shadow: 3px 3px 0 0 var(--dd-accent); }
/* Card heading + line (Figma: Line 2) */
.dd-home .dd-svc-card__heading {
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: 24px;
	line-height: 24px;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.dd-svc-card__heading::after { content: ""; flex: 1 1 auto; height: 3px; transform: scaleY(0.5); background: var(--wp--preset--color--ghost-white); }
.dd-svc-card ul { margin: 0; padding-left: 24px; }
.dd-svc-panel__cta { margin: 0; justify-content: center; }
/* Price badge (Web care): nested borders Orangina 100/200/300 + Ghost white */
.dd-price {
	position: absolute; /* in the body, which sits at the panel's 24px padding + 3px border */
	top: 51px;
	right: 51px;
	box-sizing: border-box;
	width: 250px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 24px 16px;
	border: 1.5px solid transparent;
	box-shadow:
		inset 0 0 0 1.5px var(--wp--preset--color--ghost-white),
		0 0 0 4px var(--wp--preset--color--gunmetal-300), 0 0 0 5.5px var(--wp--preset--color--orangina-300),
		0 0 0 9.5px var(--wp--preset--color--gunmetal-300), 0 0 0 11px var(--wp--preset--color--orangina-200),
		0 0 0 15px var(--wp--preset--color--gunmetal-300), 0 0 0 16.5px var(--wp--preset--color--orangina-100);
}
.dd-home .dd-svc-panel .dd-price__label { font-size: 12px; line-height: 12px; text-transform: uppercase; }
.dd-home .dd-svc-panel .dd-price__value {
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 600;
	font-size: 39px;
	line-height: 36px;
	color: var(--wp--preset--color--orangina-200);
}

@media (min-width: 1441px) {
	.dd-services-page > .dd-heading { padding-inline: calc(24px + (100% - 1440px) / 2); }
}
@media (max-width: 1279px) {
	.dd-price { position: static; box-shadow: none; outline: 1.5px solid var(--wp--preset--color--orangina-200); outline-offset: 4px; }
	.dd-svc-panel__intro { flex-wrap: wrap; }
	.dd-svc-panel__image { flex-basis: 220px; }
}
@media (max-width: 781px) {
	.dd-subpage.dd-services-page { padding: 40px 8px 0; }
	/* One TV screen edge to edge: no gaps, no shadow, no white margins. */
	.dd-svc { flex-direction: column; min-height: 0; margin-inline: -8px; gap: 0; }
	.dd-svc-panel { filter: none; transition: none; } /* heights are animated by theme.js (flipHeights); the desktop flex transition would fight it */
	.dd-svc-panel, .dd-svc.is-all-closed .dd-svc-panel { flex: 0 0 auto; padding: 16px; }
	/* The page fills the screen under the logo row: the closed strips share the height. */
	.dd-subpage.dd-services-page { min-height: calc(100svh - 72px); }
	.dd-svc.is-all-closed .dd-svc-panel { flex: 1 1 0; }
	/* while one is open the others keep their closed height (theme.js --dd-svc-strip), so
	   opening / closing only grows / shrinks that one strip */
	.dd-svc:not(.is-all-closed) .dd-svc-panel:not(.is-open) { flex: 0 0 var(--dd-svc-strip, auto); }
	/* names at the top of the strips, so the bottom menu bar never covers the last one */
	.dd-home .dd-svc-panel__tab { flex: 0 0 auto; }
	.dd-services-page > .dd-heading { padding-inline: 0; }
	.dd-home .dd-svc-panel__tab { writing-mode: horizontal-tb; transform: none; text-align: start; align-self: stretch; line-height: 24px; }
	.dd-svc-panel__tab::before { order: 1; width: auto; height: 3px; transform: scaleY(0.5); }
	.dd-svc-panel.is-open .dd-svc-panel__body { width: auto; }
	.dd-svc-panel.is-open { flex: 0 0 auto; padding-top: 48px; }
	.dd-svc-hide { left: 8px; top: 8px; }
	.dd-svc-panel { scroll-margin-top: 80px; } /* opened panels scroll in below the logo row */
	.dd-svc-panel__intro { flex-direction: column; }
	.dd-svc-panel__image { flex-basis: auto; width: 200px; }
	.dd-home .dd-svc-panel__title { font-size: 32px; }
	.dd-svc-cards { flex-direction: column; }
	.dd-svc-type { flex-direction: column; align-items: stretch; gap: 8px; }
	.dd-svc-type__text { text-align: left; }
	.dd-svc-panel__text { gap: 16px; } /* service title → copy */
	.dd-home .dd-svc-card__heading { font-size: 20px; }
	.dd-svc-panel__cta, .dd-svc-panel__cta .wp-block-button { width: 100%; }
}
.dd-svc-panel:not(.is-open) .dd-svc-hide { display: none; }

/* Info page (About me 1052:15911) -------------------------------------------- */
.dd-info {
	box-sizing: border-box;
	padding: 0 40px 40px;
	display: flex;
	flex-direction: column;
	gap: 80px;
}
.dd-home .dd-info__h2 { font-size: 60px; line-height: 60px; color: var(--wp--preset--color--gunmetal-300); }
.dd-info .wp-block-buttons { margin: 0; }

/* Hero */
.dd-info-hero { display: flex; align-items: center; justify-content: center; gap: 80px; padding: 120px 0; }
.dd-info-hero__text { flex: 0 1 650px; display: flex; flex-direction: column; gap: 24px; }
.dd-home .dd-info-hero__title { font-size: 60px; line-height: 60px; }
.dd-info-hero__lead { display: flex; flex-direction: column; gap: 12px; }
.dd-home .dd-info-hero__lead p { font-size: 16px; line-height: 19px; text-box: none; }
.dd-info-hero__photo.dd-about__photo { flex: 0 0 442px; }

/* Stack */
.dd-stack { display: flex; flex-direction: column; align-items: center; gap: 40px; padding-bottom: 120px; }
.dd-stack__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 27px 45px;
	padding: 0 120px;
	filter: grayscale(1);
}
.dd-stack__logo { margin: 0; line-height: 0; }
.dd-stack__logo img { display: block; height: auto; max-height: 40px; }

/* Numbered header: TITLE ——— 01 */
.dd-numhead { display: flex; align-items: center; gap: 16px; width: 100%; }
.dd-home .dd-numhead p {
	font-family: var(--wp--preset--font-family--geist);
	font-size: 24px;
	line-height: 24px;
	color: var(--wp--preset--color--gunmetal-300);
	white-space: nowrap;
	letter-spacing: -0.04em; /* the body tracking is inherited as px (-0.64px), Figma uses -4% of 24px */
	font-variant-numeric: lining-nums tabular-nums;
}
.dd-numhead::after { content: ""; order: 1; flex: 1 1 auto; height: 3px; transform: scaleY(0.5); background: var(--wp--preset--color--blacky); }
.dd-numhead__num { order: 2; }
.dd-home .dd-numhead--caps .dd-numhead__title { font-weight: 500; text-transform: uppercase; }

/* My process */
.dd-process { display: flex; flex-direction: column; gap: 24px; min-height: 650px; justify-content: center; }
.dd-process__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.dd-step {
	box-sizing: border-box;
	min-height: 375px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 16px;
	border: 1.5px solid transparent;
	box-shadow: inset 0 0 0 1.5px var(--dd-stroke, var(--wp--preset--color--blacky));
}
.dd-step__text { display: flex; flex-direction: column; gap: 12px; }
.dd-home .dd-step__text p, .dd-home .dd-reason__text { font-size: 16px; line-height: 18px; letter-spacing: -0.07em; }
.dd-home .dd-step__text p { text-box: none; }
.dd-home .dd-process__cta .wp-block-button[class*="is-style-dd-"] .wp-block-button__link { width: 265.6px; }

/* Lit card (process: hover on desktop / card in front on mobile; why: hover) in a service colour */
.dd-process__steps > :nth-child(1) { --dd-accent: var(--wp--preset--color--persian-blue-200); }
.dd-process__steps > :nth-child(2) { --dd-accent: var(--wp--preset--color--persian-pink-200); }
.dd-process__steps > :nth-child(3) { --dd-accent: var(--wp--preset--color--tropical-indigo-200); }
.dd-process__steps > :nth-child(4) { --dd-accent: var(--wp--preset--color--aquamarine-200); }
.dd-process__steps > :nth-child(5) { --dd-accent: var(--wp--preset--color--orangina-200); }
.dd-step, .dd-reason { transition: background-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease; }
.dd-step .dd-numhead p, .dd-reason .dd-numhead p, .dd-step .dd-tag, .dd-step__text p, .dd-reason__text { transition: color 0.25s ease, border-color 0.25s ease; }
.dd-step.is-active, .dd-reason.is-lit {
	--dd-stroke: var(--dd-accent);
	background: var(--wp--preset--color--blacky);
	color: var(--wp--preset--color--ghost-white);
}
@media (hover: hover) and (min-width: 782px) {
	.dd-process:not(.is-scrolly) .dd-step:hover { --dd-stroke: var(--dd-accent); background: var(--wp--preset--color--blacky); color: var(--wp--preset--color--ghost-white); }
	.dd-home .dd-process:not(.is-scrolly) .dd-step:hover .dd-numhead p { color: var(--dd-accent); }
	.dd-process:not(.is-scrolly) .dd-step:hover .dd-numhead::after { background: var(--dd-accent); }
	.dd-home .dd-process:not(.is-scrolly) .dd-step:hover .dd-tag { border-color: var(--wp--preset--color--ghost-white); color: var(--wp--preset--color--ghost-white); }
	.dd-home .dd-process:not(.is-scrolly) .dd-step:hover .dd-step__text p { color: var(--wp--preset--color--ghost-white); }
}
.dd-home :is(.dd-step.is-active, .dd-reason.is-lit) .dd-numhead p { color: var(--dd-accent); }
:is(.dd-step.is-active, .dd-reason.is-lit) .dd-numhead::after { background: var(--dd-accent); }
.dd-home .dd-step.is-active .dd-tag { border-color: var(--wp--preset--color--ghost-white); color: var(--wp--preset--color--ghost-white); }
.dd-home :is(.dd-step.is-active .dd-step__text p, .dd-reason.is-lit .dd-reason__text) { color: var(--wp--preset--color--ghost-white); }
.dd-reason.is-lit .dd-reason__text a { text-decoration-color: var(--dd-accent); }

/* Why work with me */
.dd-why { display: flex; flex-direction: column; justify-content: center; gap: 24px; min-height: 700px; padding: 40px 0; box-sizing: border-box; }
.dd-why__row { display: flex; align-items: center; gap: 32px; }
.dd-why__list { flex: 0 1 884px; display: flex; flex-direction: column; gap: 8px; }
.dd-why__list > .wp-block-buttons { margin-top: 16px; }
.dd-home .dd-why__cta .wp-block-button[class*="is-style-dd-"] .wp-block-button__link { width: 100%; }
.dd-reason { display: flex; flex-direction: column; gap: 16px; padding: 24px 16px; border: 1.5px solid transparent; box-shadow: inset 0 0 0 1.5px var(--dd-stroke, var(--wp--preset--color--blacky)); }
.dd-reason__text a { color: inherit; text-decoration: underline; text-decoration-color: var(--wp--preset--color--persian-blue-300); text-decoration-thickness: 10%; }
.dd-why__image { flex: 1 1 0; margin: 0; display: flex; justify-content: center; }
.dd-why__image :is(img, svg) { width: min(100%, 444px); height: auto; transform: scaleX(-1); }

/* Boring details */
.dd-boring { display: flex; align-items: center; justify-content: center; gap: 40px; min-height: 700px; padding: 120px 0; box-sizing: border-box; }
.dd-boring__image { flex: 0 0 460px; margin: 0; }
.dd-boring__image :is(img, svg) { display: block; width: 100%; height: auto; }
.dd-boring__text { flex: 0 1 816px; display: flex; flex-direction: column; gap: 32px; }
.dd-boring__lead { display: flex; flex-direction: column; gap: 12px; max-width: 673px; }
.dd-home .dd-boring__lead p { font-size: 16px; line-height: normal; letter-spacing: -0.05em; text-box: none; }
.dd-boring__soon { display: flex; flex-direction: column; gap: 8px; }
.dd-home .dd-boring__label { font-size: 12px; line-height: 28px; letter-spacing: 0.01em; text-transform: uppercase; text-box: none; }
.dd-home .wp-block-button.dd-btn-auto .wp-block-button__link { width: auto; gap: 60px; }

/* FAQ (design-system: Closed / Closed-Hover / Open) */
.dd-faq { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 700px; padding: 0 40px; box-sizing: border-box; }
.dd-faq__main { flex: 0 1 806px; display: flex; flex-direction: column; gap: 24px; }
.dd-faq__list { display: flex; flex-direction: column; gap: 8px; }
.dd-faq__item {
	border-block: 1.5px solid transparent;
	box-shadow: inset 0 var(--dd-stroke-w, 1.5px) 0 var(--wp--preset--color--blacky), inset 0 calc(-1 * var(--dd-stroke-w, 1.5px)) 0 var(--wp--preset--color--blacky); /* 1.5px borders render as 1px in Chrome */
	transition: background-color 0.2s ease;
}
.dd-faq__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px;
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 16px;
	line-height: 18px;
	letter-spacing: -0.04em;
}
.dd-faq__item > summary::-webkit-details-marker { display: none; }
.dd-faq__item > summary::after { content: "→"; transform: rotate(90deg); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), font-size 0.3s ease; }
.dd-faq__item:not([open]):hover { background: var(--wp--preset--color--persian-blue-100); --dd-stroke-w: 2px; }
.dd-faq__item[open] > summary { font-weight: 500; }
.dd-faq__item[open] > summary::after { transform: rotate(-90deg); font-size: 24px; }
.dd-faq__item { overflow: hidden; }
.dd-faq__item p { margin: 0; padding: 0 16px 16px; font-size: 16px; line-height: 18px; letter-spacing: -0.04em; text-box: none; }
.dd-faq__item > summary:focus-visible { outline: 1.5px solid var(--wp--preset--color--persian-blue-200); outline-offset: 2px; }
.dd-faq__item p:empty { display: none; }
.dd-faq__image { flex: 0 0 450px; margin: 0; }
.dd-faq__image :is(img, svg) { display: block; width: 100%; height: auto; }

@media (min-width: 1441px) {
	.dd-info { padding-inline: calc(40px + (100% - 1440px) / 2); }
}
@media (max-width: 1279px) and (min-width: 782px) {
	.dd-info-hero { gap: 40px; }
	.dd-info-hero__photo.dd-about__photo { flex-basis: 360px; }
	.dd-process__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dd-boring__image { flex-basis: 300px; }
	.dd-faq__image { flex-basis: 300px; }
	.dd-stack__logos { padding: 0; }
}
/* Process carousel nav (mobile only, built by theme.js) */
.dd-pcar { display: none; }

/* Mobile (Figma About-M 1052:9404) */
@media (max-width: 781px) {
	.dd-info { padding: 60px 8px 40px; gap: 0; overflow-x: clip; }
	.dd-home .dd-info__h2 { font-size: 39px; line-height: 36px; }
	.dd-info .wp-block-button { width: 100%; }
	.dd-home .dd-info .wp-block-button[class*="is-style-dd-"] .wp-block-button__link { width: 100%; height: 44px; }

	.dd-info-hero { flex-direction: column-reverse; align-items: stretch; gap: 40px; padding: 60px 0; }
	.dd-home .dd-info-hero__title { font-size: 52px; line-height: 48px; }
	.dd-info-hero__text { flex: 0 0 auto; gap: 16px; }
	.dd-info-hero__photo.dd-about__photo { flex: 0 0 auto; width: 100%; aspect-ratio: 845 / 658; box-shadow: 3px 3px 0 0 var(--wp--preset--color--blacky); }

	/* Stack: one row of logos looping right to left (logos cloned once by theme.js) */
	.dd-stack { padding: 24px 0 40px; gap: 24px; overflow: hidden; margin-inline: -8px; }
	.dd-stack__logos { flex-wrap: nowrap; justify-content: flex-start; width: max-content; gap: 0; padding: 0; }
	.dd-stack__logo { flex: none; padding-right: 32px; }
	.dd-stack__logo img { max-height: 28px; width: auto !important; }
	.dd-stack__logos.is-looping { animation: dd-marquee 28s linear infinite; }
}
@keyframes dd-marquee { to { transform: translateX(-50%); } }

@media (max-width: 781px) {

	/* My process: horizontal carousel, active card dark (Process-carousel) */
	.dd-process { min-height: 700px; }
	.dd-process__steps {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.dd-process__steps::-webkit-scrollbar { display: none; }
	.dd-step { flex: 0 0 265.6px; min-height: 375px; scroll-snap-align: start; }
	.dd-pcar { display: flex; align-items: center; justify-content: space-between; height: 22px; margin-top: -8px; }
	.dd-pcar__arrow {
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
		font-family: var(--wp--preset--font-family--geist-mono);
		font-size: 32px;
		line-height: 36px;
		letter-spacing: -0.07em;
		color: var(--wp--preset--color--blacky);
	}
	.dd-pcar__arrow:disabled { cursor: default; }
	.dd-pcar__dot { width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: var(--wp--preset--color--gunmetal-100); cursor: pointer; transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease; }
	.dd-pcar__dot.is-active { width: 20px; height: 20px; background: var(--wp--preset--color--gunmetal-200); }

	/* Why work with me: illustration above the heading */
	.dd-why { min-height: 0; padding: 24px 0; }
	.dd-why__row { display: contents; }
	.dd-why__image { order: -1; }
	.dd-why__image :is(img, svg) { width: 100%; }
	.dd-home .dd-numhead--caps .dd-numhead__title { flex: 1 1 0; white-space: normal; }
	.dd-numhead--caps::after { flex: 1 1 0; }
	.dd-home .dd-reason:nth-child(3) .dd-numhead__title { flex: 0 0 200px; }
	.dd-home .dd-reason:nth-child(4) .dd-numhead__title { flex: 0 0 225px; }
	.dd-why__list { flex: 0 0 auto; }
	.dd-why__list > .wp-block-buttons { margin-top: 0; }

	.dd-boring { flex-direction: column; min-height: 0; padding: 40px 0; gap: 17px; }
	.dd-boring__image { flex: 0 0 auto; width: 350px; max-width: 100%; }
	.dd-boring__text { flex: 0 0 auto; width: 100%; gap: 24px; }

	.dd-faq { flex-direction: column-reverse; min-height: 0; padding: 40px 0; }
	.dd-faq__main { flex: 0 0 auto; width: 100%; }
	.dd-faq__image { flex: 0 0 auto; width: 100%; }
	.dd-info > .dd-ctabar { margin-top: 0; }
}

/* 404 (Figma 1056:5238 desktop, 1052:10380 mobile) ------------------------------- */
/* Desktop: the 1440 × 800 frame, positions 1:1 (illustration cut at the left edge). */
.dd-404 {
	position: relative;
	box-sizing: border-box;
	max-width: 1440px;
	height: 800px;
	margin: 0 auto;
	overflow: hidden;
}
.dd-home .dd-404__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: max-content;
	height: 37px;
	box-sizing: border-box;
	padding: 8px;
	border: 2px solid var(--wp--preset--color--blacky);
	font-size: 24px;
	line-height: normal;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	text-box: none;
}
.dd-404__image { margin: 0; }
.dd-404__image img { display: block; width: 387px; max-width: 100%; height: auto; aspect-ratio: 387 / 416.68; }
.dd-home .dd-404__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--geist-pixel);
	font-size: 69px;
	line-height: 69px;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--blacky);
}
.dd-404 .wp-block-buttons { margin: 0; }
.dd-home .dd-404__cta.dd-only-desktop .wp-block-button__link {
	width: 690px;
	height: 52px;
	padding: 16px 20px 16px 24px;
	font-size: 21px;
	line-height: 20px;
}
@media (min-width: 782px) {
	.dd-404 > * { position: absolute; }
	.dd-404 > .dd-404__badge { left: 224px; top: 233px; }
	.dd-404 > .dd-404__title { left: 224px; right: 24px; top: 294px; }
	.dd-404 > .dd-404__image { left: -86px; top: 128px; width: 387px; }
	.dd-404 > .dd-404__cta { left: 24px; top: 453.5px; z-index: 1; }
}
@media (max-width: 1279px) and (min-width: 782px) {
	.dd-home .dd-404__title { font-size: 52px; line-height: 52px; }
}
@media (max-width: 781px) {
	.dd-404 { max-width: 402px; height: auto; padding: 24px 8px 60px; display: flex; flex-direction: column; gap: 24px; overflow: visible; }
	.dd-home .dd-404__badge { width: auto; border-width: 1.5px; border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--blacky); font-size: 18px; }
	.dd-home .dd-404__title { font-size: 52px; line-height: 52px; }
}

/* Case study (K-WOOD 1052:15712) ------------------------------------------- */
.dd-case {
	--dd-case: #FAA153; /* K-WOOD Orange (CTA) from the client palette */
	box-sizing: border-box;
	padding: 24px 24px 60px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.dd-case .wp-block-buttons { margin: 0; }
.dd-case > .dd-case__content { display: flex; flex-direction: column; gap: 24px; }
.dd-home .dd-case__back { font-size: 12px; line-height: 12px; text-transform: uppercase; }
.dd-case__back a { color: inherit; text-decoration: none; }
.dd-case__back a:hover { text-decoration: underline; }
/* Header card */
.dd-case-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 40px 32px;
	background: var(--wp--preset--color--gunmetal-300);
	border: 3px solid var(--dd-case);
	box-shadow: var(--wp--custom--shadow--brutal-light);
	color: var(--dd-case);
}
.dd-case-head { position: relative; }
.dd-case-head > .dd-tv { z-index: 2; }
.dd-case-head__text { display: flex; flex-direction: column; gap: 16px; }
.dd-case-head__sub:empty { display: none; }
.dd-home .dd-case-head__title { font-size: 69px; line-height: 60px; font-weight: 600; color: var(--dd-case); }
.dd-home .dd-case-head__sub { font-family: var(--wp--preset--font-family--geist); font-size: 22px; line-height: 24px; }
.dd-case-head .dd-tag { border-color: var(--dd-case); color: var(--dd-case); }
.dd-case-head__cta { --dd-accent: var(--dd-case); }
.dd-home .dd-case-head__cta .wp-block-button__link { width: 250px; border-color: var(--dd-case); color: var(--dd-case); }
/* Images */
.dd-case-image { margin: 0; }
.dd-case-image img { display: block; width: 100%; height: auto; }
.dd-case-hero img { height: 350px; object-fit: cover; border: 1px solid var(--wp--preset--color--blacky); box-sizing: border-box; }
.dd-case-logos { max-width: 696px; align-self: center; }
/* Quote */
.dd-case-quote {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	padding: 80px 24px;
	border-block: 1.5px solid transparent;
	box-shadow: inset 0 var(--dd-stroke-w, 1.5px) 0 var(--wp--preset--color--blacky), inset 0 calc(-1 * var(--dd-stroke-w, 1.5px)) 0 var(--wp--preset--color--blacky); /* 1.5px borders render as 1px in Chrome */
}
.dd-case-quote__logo { flex: 0 0 158px; margin: 0; }
.dd-home .dd-case-quote p { max-width: 835px; font-size: 16px; line-height: 18px; text-box: none; }
/* Cards with heading + line */
.dd-case-card { display: flex; flex-direction: column; gap: 16px; padding: 24px 16px; border: 1.5px solid transparent; box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--blacky); }
.dd-case-card--accent { border: 3px solid var(--wp--preset--color--blacky); box-shadow: 3px 3px 0 0 var(--dd-case); }
.dd-home .dd-case-card__heading {
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 24px;
	line-height: 24px;
	text-transform: uppercase;
	color: var(--wp--preset--color--blacky);
	white-space: nowrap;
}
.dd-case-card__heading::after { content: ""; flex: 1 1 auto; height: 3px; transform: scaleY(0.5); background: var(--wp--preset--color--blacky); }
.dd-home .dd-case-card p:not(.dd-case-card__heading) { font-size: 16px; line-height: 18px; text-box: none; }
/* Facts */
.dd-case-facts { display: flex; flex-direction: column; gap: 16px; }
.dd-case-fact { display: flex; align-items: center; gap: 16px; font-size: 12px; line-height: 12px; }
.dd-case-fact::after { content: ""; order: 1; flex: 1 1 40px; height: 1px; background: var(--wp--preset--color--blacky); }
.dd-home .dd-case-fact p { font-size: 12px; line-height: 16px; text-box: none; }
.dd-home .dd-case-fact__label { text-transform: uppercase; white-space: nowrap; }
.dd-case-fact__value { order: 2; text-align: right; }
.dd-case-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
/* Steps */
.dd-case-step { display: flex; flex-direction: column; gap: 16px; padding-top: 40px; scroll-margin-top: 24px; }
.dd-home .dd-case-step__text { max-width: 835px; font-size: 16px; line-height: 18px; text-box: none; }
.dd-case-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.dd-case-nav__item a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	padding: 0 8px;
	background: var(--wp--preset--color--blacky);
	border: 2px solid var(--dd-accent);
	color: var(--dd-accent);
	font-size: 16px;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	transition: box-shadow 0.15s ease;
}
.dd-case-nav__item a:hover, .dd-case-nav__item a:focus-visible { box-shadow: 3px 3px 0 0 var(--dd-accent); outline: none; }
.dd-case-research { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.dd-case-research__flow { grid-row: span 2; }
/* Launch: the 5 screenshots in a 1px frame, rotated 15° (Figma Frame 100380, 951 × 1859 bounding box),
   hanging below the section like in Figma (cut at the end of .dd-case). Figma x/y is the
   rotation origin; the bounding box starts 463px to the left of it. */
.dd-case-launch { position: relative; min-height: 650px; padding-top: 169px; box-sizing: border-box; }
.dd-case-launch .dd-case-step { max-width: 835px; }
.dd-case-launch__art { position: absolute; left: calc(100% - 951px); top: -35px; width: 951px; height: 1859px; pointer-events: none; }
.dd-case-launch__frame {
	position: absolute;
	left: 223px;
	top: 35px;
	width: 505px;
	box-sizing: border-box;
	padding: 10px;
	border: 1px solid #000;
	transform: rotate(15deg);
}
.dd-case-launch__frame .dd-case-image img { border-radius: 0; }
.dd-case > .dd-ctabar { position: relative; z-index: 1; }

@media (min-width: 1441px) {
	.dd-case { padding-inline: calc(24px + (100% - 1440px) / 2); }
}
/* Mobile (Figma KWOOD M 1052:10229) */
.dd-case-shot img { border: 1px solid var(--wp--preset--color--blacky); box-sizing: border-box; }
/* Rows of phone screenshots (RiftBuddy): three side by side, two per row on phones. */
.dd-case-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: center; gap: 40px; }
@media (max-width: 781px) {
	.dd-case-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.dd-case-phones > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
}
.dd-case-stack { display: flex; flex-direction: column; }
.dd-case-stack--8 { gap: 8px; }
.dd-case-stack--16 { gap: 16px; }
@media (max-width: 781px) {
	.dd-case { padding: 24px 8px 60px; }
	.dd-home .dd-case__back { padding: 4px 0; }
	.dd-case-head { flex-direction: column; align-items: stretch; gap: 16px; padding: 24px 16px; }
	.dd-home .dd-case-head__title { font-size: 52px; line-height: 48px; font-weight: 700; }
	.dd-home .dd-case-head__sub { font-weight: 500; }
	.dd-case-head .wp-block-buttons, .dd-case-head__cta, .dd-home .dd-case-head__cta .wp-block-button__link { width: 100%; }
	.dd-home .dd-case-head__cta .wp-block-button__link { height: 44px; }
	.dd-case-hero img { height: 350px; }
	.dd-case-quote { flex-direction: column; gap: 40px; padding: 40px 0; text-align: center; }
	.dd-case-quote__logo { flex: 0 0 auto; width: 158.5px; }
	.dd-case-facts { gap: 24px; }
	.dd-case-fact { align-items: flex-start; }
	.dd-case-fact::after { align-self: flex-start; margin-top: 6px; flex: 1 1 0; }
	.dd-case-fact__value { flex: 0 0 calc(50% - 8px); text-align: left; }
	.dd-home .dd-case-fact__label { min-width: 0; white-space: normal; } /* long labels wrap instead of pushing the value out */
	.dd-case-hero--fit img { height: auto; } /* wide cover without a mobile crop: show it whole */
	.dd-case-two, .dd-case-research { grid-template-columns: 1fr; }
	.dd-case-two { gap: 16px; }
	.dd-case-two .dd-case-card p:not(.dd-case-card__heading) { letter-spacing: -0.07em; }
	.dd-case-research { gap: 10px; }
	.dd-case-research__flow { grid-row: auto; }
	.dd-case-research > :nth-child(2) { order: 3; } /* Figma mobile: user flow, competitor analysis, information architecture */
	.dd-case-step { padding-top: 36px; }
	#design .dd-info__h2, #development .dd-info__h2, #launch .dd-info__h2 { font-size: 52px; line-height: 48px; }
	.dd-case-nav { grid-template-columns: 1fr; gap: 8px; }
	.dd-case-nav__item a { height: 66px; }
	.dd-case-logos { align-self: center; width: 293px; height: 696px; display: flex; align-items: center; justify-content: center; margin: 36px 0; }
	.dd-case-logos img { width: 696px; max-width: none; transform: rotate(-90deg); }
	.dd-case-launch { min-height: 0; padding-top: 44px; }
	.dd-case-launch__art { position: relative; left: auto; top: auto; margin-left: -282.4px; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.dd-case { overflow: clip; } /* the launch frame is cut at the end of the page, as in Figma */

/* FX (assets/js/fx.js): CRT / ASCII canvases laid over images ----------------- */
.wp-block-image.is-style-dd-crt, .wp-block-image.is-style-dd-ascii { position: relative; }
.dd-fx-canvas { position: absolute; display: block; pointer-events: none; }
.dd-card__image .dd-fx-canvas { inset: 0 !important; width: 100% !important; height: 100% !important; }

/* Contact page (Figma Contact_error 1057:6550, Contact_sent 1057:6577) ----------- */
.dd-contact--page { min-height: 800px; }
.dd-contact--page .dd-contact__main { flex: 0 1 672px; }
.dd-contact__aside { display: flex; flex-direction: column; gap: 40px; }
/* States: default (no class) / .dd-contact-error / .dd-contact-sent on <body> */
.dd-contact-v--error, .dd-contact-sent-state { display: none !important; }
.dd-contact-error .dd-contact-v--default { display: none !important; }
.dd-contact-error .dd-contact-v--error { display: flex !important; }
.dd-contact-sent .dd-contact-form-state { display: none !important; }
.dd-contact-sent .dd-contact-sent-state { display: flex !important; }
.dd-home .dd-contact--page .dd-form__submit .wp-block-button__link { width: 100%; }
/* Error: invalid fields 2px Persian Pink-300 (as :user-invalid) */
.dd-form__input.is-invalid { border: 2px solid var(--wp--preset--color--persian-pink-300); }
.dd-contact__oops { flex-direction: column; gap: 8px; }
.dd-contact__envelope { margin: 0; }
.dd-contact__envelope--error { width: 297.5px; margin-bottom: 32px; }
.dd-contact__envelope--error img { display: block; width: 256.5px; height: auto; margin: 35px auto; transform: rotate(-18deg); }
.dd-home .dd-contact__oops-text { font-family: var(--wp--preset--font-family--geist); font-size: 24px; line-height: 24px; letter-spacing: -0.04em; color: var(--wp--preset--color--persian-pink-300); max-width: 450px; }
.dd-contact__mail--down::before { content: "→"; display: block; width: max-content; transform: rotate(90deg); font-family: var(--wp--preset--font-family--geist); font-weight: 400; color: var(--wp--preset--color--blacky); margin-bottom: 8px; }
/* Sent */
.dd-contact__sent { align-items: center; gap: 120px; width: 100%; }
.dd-contact__sent-main { flex: 0 1 672px; display: flex; flex-direction: column; gap: 24px; }
.dd-home .dd-contact__sent-title { font-size: 52px; line-height: 48px; }
.dd-home .dd-contact__relax .wp-block-button__link { width: 100%; }
.dd-contact__envelope--sent img { display: block; width: 342px; height: auto; transform: rotate(18deg); }
@media (max-width: 781px) {
	.dd-contact--page { min-height: 0; }
	.dd-contact--page .dd-contact__main { flex: 0 0 auto; }
	.dd-home .dd-contact__sent-title { font-size: 39px; line-height: 36px; }
	.dd-contact__sent { flex-direction: column; align-items: stretch; gap: 40px; }
	.dd-contact__envelope--error { width: 100%; margin-bottom: 0; }
	.dd-contact__envelope--error img { width: 200px; margin: 24px auto; }
	.dd-contact__envelope--sent img { width: 260px; margin: 40px auto; }
	.dd-home .dd-contact__oops-text { font-size: 22px; }
}

/* Mobile: the first block of every subpage sits 16px under the logo row (R7). */
@media (max-width: 781px) {
	.dd-subpage { padding-top: 16px; }
	.dd-subpage.dd-services-page, .dd-subpage.dd-projects-page { padding-top: 16px; }
	.dd-info { padding-top: 0; }
	.dd-info-hero { padding-top: 16px; }
	.dd-case { padding-top: 16px; }
	.dd-404 { padding-top: 16px; }
	.dd-contact--page { padding-top: 16px; }
}

/* Info: My process pinned while its steps light up one by one (theme.js initProcessScroll). */
.dd-process-pin { position: relative; }
.dd-process.is-scrolly { position: sticky; } /* top set by theme.js: centred on screen */
@media (max-width: 781px) {
	/* the cards slide with the page scroll instead of a swipe */
	.dd-process.is-scrolly .dd-process__steps { overflow: visible; scroll-snap-type: none; will-change: transform; }
}
@media (min-width: 782px) {
	.dd-process.is-scrolly .dd-step__text,
	.dd-process.is-scrolly .dd-tags { transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
	.dd-process.is-scrolly .dd-step:not(.is-reached) .dd-step__text { opacity: 0; transform: translateY(16px); }
	.dd-process.is-scrolly .dd-step:not(.is-reached) .dd-tags { opacity: 0.35; }
}

/* Info hero: typewriter (theme.js initTypewriter) */
:is(.dd-info-hero__title, .dd-testimonial__quote).is-typing .dd-tw { visibility: hidden; }
:is(.dd-info-hero__title, .dd-testimonial__quote).is-typing .dd-tw.is-typed { visibility: visible; }
.dd-caret { position: relative; display: inline-block; width: 0; }
.dd-caret::after {
	content: "";
	position: absolute;
	left: 2px;
	bottom: -0.08em;
	width: 0.07em;
	height: 0.9em;
	background: var(--wp--preset--color--persian-blue-300);
	animation: dd-caret 1s steps(1) infinite;
}
.dd-caret.is-done { display: none; }
@keyframes dd-caret { 50% { opacity: 0; } }

/* Info Stack: one row of logos looping on every screen size, fading out at the edges.
   Hover pauses it and brings the logo under the cursor into focus (in colour). */
.dd-stack { overflow: hidden; }
.dd-stack__logos {
	flex-wrap: nowrap;
	justify-content: flex-start;
	width: max-content;
	gap: 0;
	padding: 24px 0;
	filter: none;
}
.dd-stack__logo { flex: none; padding-right: 64px; filter: grayscale(1); transition: filter 0.3s ease, opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.dd-stack__logos.is-looping { animation: dd-marquee 40s linear infinite; }
.dd-stack__logos:not(.is-looping) { flex-wrap: wrap; justify-content: center; width: auto; row-gap: 24px; }
.dd-stack__track {
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}
@media (hover: hover) {
	.dd-stack__track:hover .dd-stack__logos { animation-play-state: paused; }
	.dd-stack__logos:hover .dd-stack__logo { opacity: 0.35; }
	.dd-stack__logos .dd-stack__logo:hover { opacity: 1; filter: none; transform: scale(1.25); }
}
@media (max-width: 781px) {
	.dd-stack__logos { padding: 8px 0; }
	.dd-stack__logo { padding-right: 32px; }
	.dd-stack__logos.is-looping { animation-duration: 28s; }
	.dd-stack__track { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
}

/* Info illustrations (theme.js initRigs): parts of the inlined SVG move. Paused off screen. */
.dd-rig { display: block; aspect-ratio: 1; overflow: visible; }
.dd-rig g { transform-box: fill-box; transform-origin: center; }
.dd-rig * { animation-play-state: paused; }
.dd-rig.is-playing * { animation-play-state: running; }
/* Rollerblader: gliding with the wind */
.dd-why .rig-body { transform-box: view-box; transform-origin: 340px 480px; animation: dd-skate 2.6s ease-in-out infinite; }
.dd-why .rig-wheel { animation: dd-spin 0.55s linear infinite; }
.dd-why .rig-arm-back { animation: dd-swing 1.3s ease-in-out infinite alternate; }
.dd-why .rig-arm-front { animation: dd-swing 1.3s ease-in-out infinite alternate-reverse; }
.dd-why .rig-head { animation: dd-nod 2.6s ease-in-out infinite; }
.dd-why .rig-wind { animation: dd-wind 1.6s cubic-bezier(0.3, 0, 0.6, 1) infinite; }
.dd-rig .rig-spark { animation: dd-spark 1.4s ease-in-out infinite; }
.dd-rig .rig-spark:nth-child(2n) { animation-delay: -0.45s; }
.dd-rig .rig-spark:nth-child(3n) { animation-delay: -0.9s; }
@keyframes dd-skate {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	25% { transform: translate(-5px, -5px) rotate(-1.6deg); }
	50% { transform: translate(-8px, 0) rotate(0.4deg); }
	75% { transform: translate(-3px, -4px) rotate(1.4deg); }
}
@keyframes dd-spin { to { transform: rotate(-360deg); } }
@keyframes dd-swing { from { transform: rotate(-7deg); } to { transform: rotate(6deg); } }
@keyframes dd-nod { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg) translateY(1px); } }
@keyframes dd-wind {
	0% { transform: translateX(14px) scale(0.85); opacity: 0; }
	20% { opacity: 1; }
	100% { transform: translateX(-46px) scale(1.1); opacity: 0; }
}
@keyframes dd-spark { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.25; transform: scale(0.7); } }
/* Gamer: mashing the pad */
.dd-boring .rig-pad { animation: dd-mash 1.1s linear infinite; }
.dd-boring .rig-head { animation: dd-nod 1.8s ease-in-out infinite; }
.dd-boring .rig-swirl { animation: dd-wobble 2.4s ease-in-out infinite; }
@keyframes dd-mash {
	0%, 100% { transform: none; }
	8% { transform: translate(1px, -2px) rotate(-4deg); }
	16% { transform: translate(-1px, 1px) rotate(2deg); }
	24% { transform: none; }
	40% { transform: translate(0, -1.5px) rotate(-2deg); }
	48% { transform: none; }
	62% { transform: translate(1.5px, -1px) rotate(5deg); }
	70% { transform: translate(-1px, 0) rotate(-1deg); }
	78% { transform: none; }
}
@keyframes dd-wobble { 0%, 100% { transform: rotate(-8deg) scale(0.95); } 50% { transform: rotate(10deg) scale(1.05); } }

/* Entrance (theme.js initEnter): the first screen waits hidden, then decodes in – noise
   characters over the hidden letters; the Hero goggles switch on like an old TV. */
html.dd-enter :is(main, .dd-menu) :is(h1, h2, h3, p, .wp-block-list > li, a, .wp-block-navigation-item__label),
html.dd-enter .dd-hero__eyes { visibility: hidden; }
html.dd-enter .dd-nav :is(.dd-nav__logo, .dd-line) { visibility: hidden; } /* they draw in (initEnter) */
.dd-dc-wait { visibility: hidden; }
.dd-dc-word { display: inline-block; white-space: nowrap; }
.dd-dc { position: relative; }
.dd-dc[data-g] { -webkit-text-fill-color: transparent; }
.dd-dc[data-g]::after {
	content: attr(data-g);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--wp--preset--font-family--geist-mono);
	font-weight: 400;
	font-size: 0.72em;
	line-height: 1;
	-webkit-text-fill-color: var(--wp--preset--color--persian-blue-300);
}


/* Services page without JS: every service open, one under another. */
html:not(.js) .dd-svc { flex-direction: column; }
html:not(.js) .dd-svc-panel { flex: none; }
html:not(.js) .dd-svc-panel__tab { display: none; }
html:not(.js) .dd-svc-panel__body { display: flex; flex-direction: column; align-items: center; gap: 24px; }

/* Services ring illustrations (theme.js RIGS): small loops in the same hand-drawn spirit. */
.dd-rig .rig-kite { animation: dd-kite 3.2s ease-in-out infinite; }
.dd-rig .rig-drift { animation: dd-drift 1.8s ease-in-out infinite; }
.dd-rig .rig-drift + .rig-drift { animation-delay: -0.7s; }
.dd-rig .rig-swirl { animation: dd-wobble 2.4s ease-in-out infinite; }
.dd-rig .rig-pop { animation: dd-pop 4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
.dd-rig .rig-pop--late { animation-delay: -2s; }
.dd-rig .rig-tilt { animation: dd-tilt 2.6s ease-in-out infinite; }
.dd-rig .rig-sway { animation: dd-sway 1.6s ease-in-out infinite alternate; }
.dd-rig .rig-fist { animation: dd-fist 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
.dd-rig .rig-spin { animation: dd-spin-cw 6s linear infinite; }
.dd-rig .rig-tap { animation: dd-tap 0.7s ease-in-out infinite; }
.dd-rig .rig-wave { animation: dd-wave 0.9s ease-in-out infinite alternate; }
.dd-rig .rig-buzz { animation: dd-buzz 0.9s linear infinite; }
.dd-rig .rig-buzz:nth-of-type(2n) { animation-duration: 1.1s; animation-direction: reverse; }
.dd-rig .rig-blink { animation: dd-blink 1.6s steps(1) infinite; }
.dd-rig .rig-kick { animation: dd-kick 1.8s ease-in-out infinite; }
.dd-rig .rig-float { animation: dd-float 2.2s ease-in-out infinite; }
.dd-rig .rig-breathe { animation: dd-breathe 3s ease-in-out infinite; }
@keyframes dd-kite { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg) translate(4px, -3px); } }
@keyframes dd-drift { 0% { transform: translateX(16px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(-28px); opacity: 0; } }
/* Contact: after "submit" the envelope shoots in and floats away-ish (sent); on an error it
   tugs and shakes as if stuck (error). */
@media (prefers-reduced-motion: no-preference) {
	.dd-contact__envelope--sent img { animation: dd-env-shoot 0.9s cubic-bezier(0.22, 1, 0.36, 1) both, dd-env-float 3.2s 0.9s ease-in-out infinite; }
	.dd-contact__envelope--error img { animation: dd-env-tug 2.6s 0.3s ease-in-out infinite; transform-origin: 50% 80%; }
}
/* translate / rotate / scale compose with the envelopes' own tilt (transform: rotate). */
@keyframes dd-env-shoot {
	0% { translate: -140px 180px; rotate: -24deg; scale: 0.55; opacity: 0; }
	30% { opacity: 1; }
	70% { translate: 10px -14px; rotate: 4deg; scale: 1.03; }
	100% { translate: 0 0; rotate: 0deg; scale: 1; }
}
@keyframes dd-env-float {
	0%, 100% { translate: 0 0; rotate: 0deg; }
	50% { translate: 0 -12px; rotate: -1.5deg; }
}
@keyframes dd-env-tug {
	0%, 52%, 100% { translate: 0 0; rotate: 0deg; }
	56% { translate: -7px 0; rotate: -5deg; }
	60% { translate: 6px 0; rotate: 4deg; }
	64% { translate: -5px 0; rotate: -3deg; }
	68% { translate: 4px 0; rotate: 3deg; }
	72% { translate: -2px 0; rotate: -1deg; }
	76% { translate: 0 0; rotate: 0deg; }
	80% { translate: 0 -4px; rotate: 2deg; }
	86% { translate: 0 0; rotate: 0deg; }
}

/* 404: the man drops in from above with a bounce and lands on the button; then the scoop
   falls off his cone (from the cone top to the floor), splats, the trail and shock lines show. */
.dd-404__image .dd-rig { aspect-ratio: 387 / 416.68; width: 387px; max-width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
	.dd-404__image { animation: dd-drop-in 0.95s cubic-bezier(0.3, 0, 0.4, 1) both; }
}
@keyframes dd-drop-in {
	0% { transform: translateY(-110vh); }
	55% { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
	70% { transform: translateY(-38px); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
	84% { transform: translateY(0); animation-timing-function: ease-out; }
	92% { transform: translateY(-9px); }
	100% { transform: translateY(0); }
}
.dd-404 .rig-scoop { animation: dd-scoop 1.7s 0.35s both; }
@keyframes dd-scoop {
	0%, 40% { transform: translate(34px, -150px) rotate(-10deg); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
	72% { transform: translate(0, 0) scale(1.18, 0.72); animation-timing-function: ease-out; }
	84% { transform: translate(0, 0) scale(0.94, 1.06); }
	100% { transform: none; }
}
.dd-404 .rig-trail { animation: dd-trail 1.7s 0.35s both; }
@keyframes dd-trail { 0%, 45% { opacity: 0; } 70%, 100% { opacity: 1; } }
.dd-404 .rig-shock { animation: dd-shock-in 0.4s 1.55s cubic-bezier(0.34, 1.56, 0.64, 1) both, dd-spark 1.4s 2s ease-in-out infinite; }
@keyframes dd-shock-in { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }

@keyframes dd-pop {
	0%, 8% { transform: scale(0); opacity: 0; }
	18%, 45% { transform: scale(1); opacity: 1; }
	55%, 100% { transform: scale(0); opacity: 0; }
}
@keyframes dd-tilt { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes dd-sway { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes dd-fist {
	0%, 60%, 100% { transform: none; }
	20% { transform: translateY(-9px) rotate(-6deg); }
	35% { transform: translateY(2px); }
}
@keyframes dd-spin-cw { to { transform: rotate(360deg); } }
@keyframes dd-tap { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-9deg); } }
@keyframes dd-wave { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }
@keyframes dd-buzz {
	0% { transform: translate(0, 0); }
	25% { transform: translate(4px, -3px); }
	50% { transform: translate(0, -6px); }
	75% { transform: translate(-4px, -3px); }
	100% { transform: translate(0, 0); }
}
@keyframes dd-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes dd-kick { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-12deg); } }
@keyframes dd-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
@keyframes dd-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* Door (Homepage "Bit about me", Info FAQ): an invite. */
.dd-rig .rig-door { animation: dd-door 3.6s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.dd-rig .rig-handle { animation: dd-handle 3.6s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.dd-about__door .rig-head, .dd-faq__image .rig-head { animation: dd-nod 1.8s ease-in-out infinite; }
@keyframes dd-door { 0%, 15%, 100% { transform: scaleX(1); } 45%, 65% { transform: scaleX(0.8); } }
@keyframes dd-handle { 0%, 15%, 100% { transform: translateX(0); } 45%, 65% { transform: translateX(-9px); } }

/* Footer "cookie settings": a cookie icon that reopens the banner. Grey by default so it
   does not outshine the footer, in colour and rolling a little on hover / focus / tap. */
.dd-footer__cookies { margin: 0; line-height: 0; }
.dd-footer__cookies a { display: block; position: relative; opacity: 1; text-decoration: none; }
.dd-footer__cookies a::before { content: ""; position: absolute; inset: -14px; } /* 44px tap target around the 16px icon */
.dd-footer__cookies img { display: block; width: 16px; height: 16px; filter: grayscale(1) brightness(1.15); opacity: 0.7; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.2s ease, opacity 0.2s ease; } /* quiet by default, colour when active */
.dd-footer__cookies a:focus-visible { outline: 1.5px solid var(--wp--preset--color--persian-blue-200); outline-offset: 4px; border-radius: 50%; }
.dd-footer__cookies a:is(:focus-visible, :active) img { transform: rotate(-25deg) scale(1.1); filter: none; opacity: 1; }
@media (hover: hover) { .dd-footer__cookies a:hover img { transform: rotate(-25deg) scale(1.1); filter: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dd-footer__cookies img { transition: none; } }

/* Cookie banner (Figma Cookies-banner 1067:1455, inc/cookies.php + theme.js initCookies) --- */
.dd-cookies {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 100;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 24px;
	box-sizing: border-box;
	width: min(684px, calc(100% - 48px));
	padding: 24px 16px;
	background: var(--wp--preset--color--ghost-white);
	border: 3px solid var(--wp--preset--color--blacky);
	box-shadow: 3px 3px 0 0 var(--wp--preset--color--persian-blue-200);
	color: var(--wp--preset--color--blacky);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.dd-cookies[hidden] { display: none; }
.dd-cookies.is-in { opacity: 1; transform: none; }
.dd-cookies__text { display: flex; flex-direction: column; gap: 16px; align-self: stretch; }
.dd-cookies p { margin: 0; }
.dd-cookies__title {
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 16px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.dd-cookies__title::after { content: ""; flex: 1 1 auto; height: 3px; transform: scaleY(0.5); background: currentColor; }
.dd-cookies__body { font-family: var(--wp--preset--font-family--geist-mono); font-size: 12px; line-height: 12px; letter-spacing: -0.04em; }
.dd-cookies__actions { display: flex; gap: 16px; }
/* Same CTA component, compact: label only (no arrow), size from Figma. */
.wp-block-button.dd-cookies__btn .wp-block-button__link {
	width: auto;
	padding: 0 16px;
	font-size: 12px;
	line-height: 12px;
	text-transform: uppercase;
	cursor: pointer;
}
.wp-block-button.dd-cookies__btn .wp-block-button__link::before,
.wp-block-button.dd-cookies__btn .wp-block-button__link::after { content: none; }
@media (max-width: 781px) {
	.dd-cookies { right: 16px; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); width: calc(100% - 32px); } /* above the menu bar */
	.dd-cookies__title { white-space: normal; }
	.dd-cookies__body { line-height: 14px; }
	.dd-cookies__actions { align-self: stretch; }
	.dd-cookies__btn { flex: 1 1 0; }
	.wp-block-button.dd-cookies__btn .wp-block-button__link { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.dd-cookies { transition: none; transform: none; }
}