/*
 * Diea — the rules theme.json cannot express.
 *
 * Everything that can live in theme.json does. What is left is the handful of
 * component behaviours block supports do not reach: the sheet container, the
 * offset-shadow button movement, and the tabular figures this site needs
 * because it is full of numbers that must line up.
 */

:root {
	--diea-shadow-offset: 3px 4px 0 0 var(--wp--preset--color--ink);
	--diea-shadow-offset-hover: 1px 2px 0 0 var(--wp--preset--color--ink);
}

body {
	font-feature-settings: 'tnum' 1, 'cv11' 1;
	-webkit-font-smoothing: antialiased;
}

/* ── Sheet ────────────────────────────────────────────────────────────────
 * The system's one container: a white panel with a large radius, carrying
 * dark text, sitting on the near-black page.
 */
.wp-block-group.is-style-sheet {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--border-radius-sheet, 40px);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

@media (min-width: 782px) {
	.wp-block-group.is-style-sheet {
		padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	}
}

/* Headings and text inside a sheet flip to ink; ash is the secondary tone. */
.is-style-sheet :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--ink);
}

.is-style-sheet :where(p, li) {
	color: var(--wp--preset--color--ink);
}

.is-style-sheet :where(.has-ash-color) {
	color: var(--wp--preset--color--ash) !important;
}

/* ── Night section ────────────────────────────────────────────────────────
 * Content directly on the ground. Secondary text here needs the lighter ash,
 * because --ash would fail contrast on near-black.
 */
.wp-block-group.is-style-night-section {
	padding-block: var(--wp--preset--spacing--60);
}

.is-style-night-section :where(p, li) {
	color: var(--wp--preset--color--ash-light);
}

/* ── Card ─────────────────────────────────────────────────────────────────
 * The smaller panel used inside sheets for services, work and testimonials.
 */
.wp-block-group.is-style-card {
	border-radius: var(--wp--custom--border-radius-card, 28px);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--ink);
	height: 100%;
}

.is-style-card.has-onyx-background-color,
.is-style-card.has-night-background-color {
	border-color: var(--wp--preset--color--line-dark);
	color: var(--wp--preset--color--paper);
}

/* On the orange card every label is full ink — reduced opacity fails contrast. */
.is-style-card.has-sun-background-color,
.is-style-card.has-sun-background-color :where(p, li, h1, h2, h3, h4) {
	color: var(--wp--preset--color--ink);
}

/* ── Buttons ──────────────────────────────────────────────────────────────
 * The signature is the hard, un-blurred offset shadow. Hover moves the button
 * into its own shadow; active flattens it completely.
 */
.wp-block-button__link {
	transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	white-space: nowrap;
}

.wp-block-button__link:hover {
	transform: translate(2px, 2px);
}

.wp-block-button__link:active {
	transform: translate(3px, 4px);
	box-shadow: none;
}

.wp-block-button.is-style-secondary .wp-block-button__link {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
	box-shadow: var(--diea-shadow-offset);
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--mist);
	box-shadow: var(--diea-shadow-offset-hover);
}

/* On the night ground the offset shadow is invisible, so it is dropped. */
.wp-block-button.is-style-flat .wp-block-button__link {
	box-shadow: none;
}

.wp-block-button.is-style-flat .wp-block-button__link:hover {
	transform: none;
	filter: brightness(0.95);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link:hover,
	.wp-block-button__link:active {
		transform: none;
	}
}

/* ── Highlight ────────────────────────────────────────────────────────────
 * An orange marker behind words inside a heading. box-decoration-break keeps
 * it correct when the heading wraps.
 */
.diea-highlight {
	background-color: var(--wp--preset--color--sun);
	color: var(--wp--preset--color--ink);
	padding-inline: 0.15em;
	border-radius: 0.2em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ── Figures ──────────────────────────────────────────────────────────────
 * This site is full of numbers. They line up.
 */
.diea-stat {
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

/* Never orange text on white: --sun fails AA there, --sun-deep is the text tone. */
.has-sun-color:where(.is-style-sheet *, .is-style-card:not(.has-onyx-background-color):not(.has-night-background-color) *) {
	color: var(--wp--preset--color--sun-deep);
}

/* Visible keyboard focus everywhere, on both grounds. */
:where(a, button, input, textarea, select, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--sun);
	outline-offset: 2px;
}

/* Skip link, shown only when focused. */
.skip-link:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ── Inquiry form ─────────────────────────────────────────────────────────
 * Lives on a sheet, so it is styled for the light ground.
 */
.diea-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--40);
}

.diea-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0;
}

.diea-field label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.diea-optional {
	font-weight: 400;
	color: var(--wp--preset--color--ash);
}

.diea-field input,
.diea-field select,
.diea-field textarea {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: 1rem; /* 16px: anything smaller makes iOS zoom on focus. */
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--mist);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--border-radius-input, 14px);
	padding: 0.75rem 1rem;
}

.diea-field textarea {
	resize: vertical;
	min-height: 7rem;
}

.diea-field input:focus,
.diea-field select:focus,
.diea-field textarea:focus {
	outline: 2px solid var(--wp--preset--color--sun);
	outline-offset: 1px;
	border-color: transparent;
}

/* The honeypot must be unreachable for people but present for bots, so it is
   taken out of flow rather than display:none — some bots skip hidden fields. */
.diea-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.diea-form-notice {
	border-radius: var(--wp--custom--border-radius-input, 14px);
	padding: 0.875rem 1rem;
	font-size: 0.9375rem;
	border: 1px solid;
}

.diea-form-notice p {
	margin: 0;
}

.diea-form-notice--ok {
	border-color: var(--wp--preset--color--sun);
	background-color: #fff7ed;
	color: var(--wp--preset--color--ink);
}

.diea-form-notice--error {
	border-color: #b91c1c;
	background-color: #fef2f2;
	color: #7f1d1d;
}

/* Submit button sits on a sheet, so it keeps the offset shadow. */
.diea-form .wp-block-button__link {
	width: 100%;
	border: 0;
	cursor: pointer;
	box-shadow: var(--diea-shadow-offset);
}

/* ── Structured-field blocks ──────────────────────────────────────────────
 * Rendered by the site plugin from post meta. Each takes a `tone` so the same
 * block works on a sheet and on a dark card.
 */

/* Client · role · year, as a single inline line. */
.diea-facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 1.125rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--ash);
}

.diea-facts--dark { color: var(--wp--preset--color--ash-light); }

.diea-facts li {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	white-space: nowrap;
}

.diea-facts svg { flex: none; opacity: 0.7; }

/* Result chips. */
.diea-metrics {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.diea-metric {
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--paper);
	border-radius: 9999px;
	padding: 0.375rem 0.875rem;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.diea-metrics--dark .diea-metric {
	border-color: var(--wp--preset--color--line-dark);
	background: transparent;
}

.diea-metric dt {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ash);
	margin: 0;
}

.diea-metrics--dark .diea-metric dt { color: var(--wp--preset--color--ash-light); }

.diea-metric dd {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	font-variant-numeric: tabular-nums;
}

.diea-metrics--dark .diea-metric dd { color: var(--wp--preset--color--paper); }

/* What a package includes. */
.diea-features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.9375rem;
}

.diea-features li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	line-height: 1.45;
}

.diea-tick {
	flex: none;
	margin-top: 0.2em;
	color: var(--wp--preset--color--sun-deep);
}

.diea-features--dark { color: var(--wp--preset--color--ash-light); }
.diea-features--dark .diea-tick { color: var(--wp--preset--color--sun); }

/* Price. */
.diea-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0;
}

.diea-price__from {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ash);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}

.diea-price__amount {
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	font-variant-numeric: tabular-nums;
}

.diea-price__period {
	font-size: 0.875rem;
	color: var(--wp--preset--color--ash);
}

.diea-price--dark .diea-price__amount { color: var(--wp--preset--color--paper); }
.diea-price--dark .diea-price__from,
.diea-price--dark .diea-price__period { color: var(--wp--preset--color--ash-light); }

/* Cards fill their track, in a query grid and in a columns row alike, or a
   short card leaves a ragged edge next to a tall one. */
.wp-block-post-template.is-layout-grid > li > .wp-block-group.is-style-card,
.wp-block-column > .wp-block-group.is-style-card {
	height: 100%;
}

/* ── "Learn more" links inside cards ──────────────────────────────────────
 * The design system marks these with an arrow disc rather than an underline.
 */
.is-style-card p > a:not(.wp-block-button__link) {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	font-weight: 600;
}

.is-style-card p > a:not(.wp-block-button__link)::before {
	content: '';
	inline-size: 1.375rem;
	block-size: 1.375rem;
	flex: none;
	border-radius: 9999px;
	background-color: var(--wp--preset--color--ink);
	/* Arrow, drawn as a mask so it takes the disc's own colour. */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 12 12 4M6 4h6v6'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 12 12 4M6 4h6v6'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
	transition: transform 160ms cubic-bezier(.16,1,.3,1);
}

.is-style-card p > a:not(.wp-block-button__link):hover::before {
	transform: translate(2px, -2px);
}

.is-style-card.has-onyx-background-color p > a::before,
.is-style-card.has-night-background-color p > a::before {
	background-color: var(--wp--preset--color--paper);
}

.is-style-card p > a:not(.wp-block-button__link):hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Pagination on the night ground. */
.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--40);
	font-size: 0.9375rem;
}

.wp-block-query-pagination a { color: var(--wp--preset--color--paper); }
.wp-block-query-pagination a:hover { color: var(--wp--preset--color--sun); }

/* ═══════════════════════════════════════════════════════════════════════════
   Motion and polish.

   The system's own hover behaviour (the button moving into its shadow) already
   existed. What follows adds a page-load sequence, a reveal for sections that
   arrive on scroll, and lift on the cards.

   Everything is gated behind .diea-motion, which motion.js adds. With no
   JavaScript nothing is ever hidden, so the page is complete at rest.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

	/* No scroll-reveal. It was hiding Results and Contact entirely whenever
	   the observer did not fire, which is the page looking broken in exchange
	   for an effect nobody asked for. Motion here is the hero sequence, the
	   counting figures and hover — all of which start from a visible state. */

	/* The hero plays once on load rather than waiting for a scroll. Staggered
	   so the eye lands on the headline first and the portrait settles last. */
	.diea-motion:not(.diea-motion-off) .diea-hero__kicker,
	.diea-motion:not(.diea-motion-off) .diea-hero__title,
	.diea-motion:not(.diea-motion-off) .diea-hero__lede,
	.diea-motion:not(.diea-motion-off) .diea-hero__actions {
		animation: diea-rise 700ms cubic-bezier(.16,1,.3,1) both;
	}

	.diea-motion:not(.diea-motion-off) .diea-hero__kicker  { animation-delay: 40ms }
	.diea-motion:not(.diea-motion-off) .diea-hero__title   { animation-delay: 110ms }
	.diea-motion:not(.diea-motion-off) .diea-hero__lede    { animation-delay: 200ms }
	.diea-motion:not(.diea-motion-off) .diea-hero__actions { animation-delay: 280ms }

	.diea-motion:not(.diea-motion-off) .diea-portrait {
		animation: diea-pop 820ms cubic-bezier(.16,1,.3,1) 160ms both;
	}

	/* The marker sweeps in behind the highlighted word once the line has landed. */
	.diea-motion:not(.diea-motion-off) .diea-hero__title .diea-highlight,
	.diea-motion:not(.diea-motion-off) .diea-hero__title mark {
		animation: diea-mark 520ms cubic-bezier(.16,1,.3,1) 520ms both;
	}

	/* Cards lift toward the reader on hover. */
	.wp-block-group.is-style-card {
		transition: transform 200ms cubic-bezier(.16,1,.3,1), box-shadow 200ms ease, border-color 200ms ease;
	}

	.wp-block-group.is-style-card:hover {
		transform: translateY(-3px);
	}

	.is-style-sheet .wp-block-group.is-style-card:hover {
		border-color: var(--wp--preset--color--ink);
	}
}

@keyframes diea-rise {
	from { opacity: 0; transform: translateY(16px) }
	to   { opacity: 1; transform: none }
}

@keyframes diea-pop {
	from { opacity: 0; transform: scale(.92) }
	to   { opacity: 1; transform: none }
}

@keyframes diea-mark {
	from { background-size: 0% 100% }
	to   { background-size: 100% 100% }
}

/* The highlight animates its own width, so it needs a gradient rather than a
   flat background colour. Identical result at rest. */
.diea-hero__title .diea-highlight,
.diea-hero__title mark {
	background-image: linear-gradient(var(--wp--preset--color--sun), var(--wp--preset--color--sun));
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* ── Hero ─────────────────────────────────────────────────────────────────
 * The portrait is the one image on the site, so it gets the treatment: a disc
 * on the brand orange, with the wave from the design system beneath it.
 */
.diea-hero__portrait {
	position: relative;
	display: flex;
	justify-content: center;
}

.diea-portrait {
	position: relative;
	width: min(330px, 74vw);
	aspect-ratio: 1;
	border-radius: 9999px;
	overflow: hidden;
	background: var(--wp--preset--color--sun);
	flex: none;
}

.diea-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The orange squiggle, drawn with a repeating radial mask — no image. */
.diea-portrait::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 16px;
	background: var(--wp--preset--color--sun);
	-webkit-mask: radial-gradient(11px at 50% 0, transparent 97%, #000) 50% -5px / 22px 100% repeat-x;
	mask: radial-gradient(11px at 50% 0, transparent 97%, #000) 50% -5px / 22px 100% repeat-x;
}

.diea-hero__title {
	font-size: clamp(2.25rem, 6vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.diea-hero__lede { max-width: 46ch; }

/* ── Stat bar figures ─────────────────────────────────────────────────────
 * Reserve the width before the count runs, or the bar reflows as digits land.
 */
.diea-stat[data-count] {
	display: inline-block;
	min-width: 2.4ch;
	text-align: center;
}

/* ── Section rhythm ─────────────────────────────────────────────────────── */
.wp-site-blocks > * + * { margin-block-start: 12px; }

/* Smooth anchor jumps, but never when reduced motion is asked for. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Links inside sheets get the accent on hover rather than a flat underline. */
.is-style-sheet a:not(.wp-block-button__link):hover { color: var(--wp--preset--color--sun-deep); }


/* ── Night sections ───────────────────────────────────────────────────────
 * Secondary text on the near-black ground needs the lighter ash. Markup that
 * carries has-ash-color here is the contrast bug this system exists to
 * prevent, so it is corrected rather than relied on.
 */
.is-style-night-section .has-ash-color,
.is-style-night-section p.has-ash-color {
	color: var(--wp--preset--color--ash-light) !important;
}

/* A section heading on the ground, set as a marker rather than a title. */
.diea-section-label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sun);
}

/* The trailing link out of a night section. */
.diea-section-more a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--paper);
}

.diea-section-more a:hover {
	color: var(--wp--preset--color--sun);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The contact sheet holds a form; centre it rather than letting it hang on
   the left of a 1180px sheet. */
.diea-contact { margin-inline: auto; }


/* An archive intro sheet: heading flush with the cards beneath it, and the
   paragraph capped at a readable measure rather than the sheet's full width. */
.diea-intro { padding-block: var(--wp--preset--spacing--50) !important; }
.diea-measure { max-width: 62ch; }

@media (min-width: 782px) {
	.diea-intro { padding-block: var(--wp--preset--spacing--60) !important; }
}

/* The feature list needs air after the summary above it; without it the two
   run together and the list reads as part of the paragraph. */
.diea-features { margin-block-start: var(--wp--preset--spacing--30); }


/* ── Stat bar on a phone ──────────────────────────────────────────────────
 * Four columns at 390px left each figure ~70px wide, so "150M+" broke between
 * the M and the +. Two by two, and figures never wrap internally.
 */
.diea-stat { white-space: nowrap; }

@media (max-width: 600px) {
	.wp-block-columns.is-not-stacked-on-mobile.diea-statbar { flex-wrap: wrap !important; row-gap: var(--wp--preset--spacing--40); }
	.wp-block-columns.is-not-stacked-on-mobile.diea-statbar > .wp-block-column { flex-basis: calc(50% - 1rem) !important; flex-grow: 0 !important; }
	.diea-statbar .diea-stat { font-size: 2rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Illustrations (diea/art)

   Colour comes from local custom properties set per tone, so one drawing
   works on a white sheet, an orange card and a dark card. The figure's own
   background matches the drawing's ground, so letterboxing is invisible.
   ═══════════════════════════════════════════════════════════════════════════ */
.diea-art {
	--art-bg: #ffffff; --art-panel: #f3f3f0; --art-soft: #e4e4e0; --art-line: #e4e4e0;
	--art-ink: #111111; --art-surface: #111111; --art-sun: #f97316; --art-paper: #ffffff;
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--art-bg);
	max-width: 100%;
}

.diea-art svg { display: block; width: 100%; height: 100%; }

.diea-art--dark {
	--art-bg: #0d0d0d; --art-panel: #1b1b1d; --art-soft: #2a2a2d; --art-line: #3a3a3f;
	--art-ink: #f3f3f0; --art-surface: #2a2a2d; --art-paper: #ffffff;
}

.diea-art .a-bg       { fill: var(--art-bg); }
.diea-art .a-panel    { fill: var(--art-panel); }
.diea-art .a-soft     { fill: var(--art-soft); }
.diea-art .a-ink      { fill: var(--art-ink); }
.diea-art .a-ink-fill { fill: var(--art-surface); }
.diea-art .a-sun,
.diea-art .a-sun-fill { fill: var(--art-sun); }
.diea-art .a-paper    { fill: var(--art-paper); }
.diea-art .a-stroke        { stroke: var(--art-ink); }
.diea-art .a-stroke-thin   { stroke: var(--art-line); fill-opacity: 1; }
.diea-art .a-ink-stroke    { stroke: var(--art-ink); fill: none; }
.diea-art .a-paper-stroke  { stroke: var(--art-paper); }
.diea-art .a-sun-stroke    { stroke: var(--art-sun); }
.diea-art .a-ring          { stroke: var(--art-ink); fill: none; opacity: .25; }
.diea-art .a-sun-ring      { stroke: var(--art-sun); fill: none; stroke-width: 2; opacity: 0; }
.diea-art rect.a-panel.a-stroke-thin { stroke-width: 1; }

/* Decorative particles have no resting meaning, so they rest hidden. */
.diea-art .a-drop { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
	.diea-art :is(.a-bar, .a-ring, .a-sun-ring, .a-pulse, .a-pop, .a-node) {
		transform-box: fill-box;
		transform-origin: 50% 50%;
	}
	.diea-art .a-bar { transform-origin: 50% 100%; animation: art-bar 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.42s); }
	.diea-art .a-trend { stroke-dasharray: 100; animation: art-draw 6.5s cubic-bezier(.65,0,.35,1) infinite; }
	.diea-art .a-ring { animation: art-ring 2.4s ease-out infinite; }
	.diea-art .a-blink { animation: art-blink 2.2s ease-in-out infinite; }

	.diea-art .a-drop { animation: art-drop 2.8s cubic-bezier(.55,0,.45,1) infinite; }
	.diea-art .a-drop--2 { animation-delay: -1.4s; }
	.diea-art .a-glow { animation: art-glow 2.8s ease-in-out infinite; }

	.diea-art .a-march { animation: art-march 0.9s linear infinite; }
	.diea-art .a-pulse { animation: art-pulse 2.4s ease-in-out infinite; }
	.diea-art .a-sun-ring { animation: art-sun-ring 2.4s ease-out infinite; }
	.diea-art .a-node { animation: art-node 3s ease-in-out infinite; }
	.diea-art .a-node--2 { animation-delay: .5s; }
	.diea-art .a-node--3 { animation-delay: 1s; }

	.diea-art .a-bob { animation: art-bob 4.2s ease-in-out infinite; }
	.diea-art .a-bob--2 { animation-delay: -2.1s; }
	.diea-art .a-shimmer { animation: art-shimmer 3s ease-in-out infinite; }
	.diea-art .a-pop { animation: art-pop 3.2s cubic-bezier(.34,1.56,.64,1) infinite; }

}

@keyframes art-bar     { 0%,100% { transform: scaleY(1) } 50% { transform: scaleY(.76) } }
@keyframes art-draw    { 0% { stroke-dashoffset: 100 } 32% { stroke-dashoffset: 0 } 86% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: -100 } }
@keyframes art-ring    { 0% { transform: scale(.7); opacity: .45 } 100% { transform: scale(2.1); opacity: 0 } }
@keyframes art-blink   { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes art-drop    { 0% { transform: translateY(0); opacity: 0 } 12% { opacity: 1 } 72% { opacity: 1 } 88%,100% { transform: translateY(156px); opacity: 0 } }
@keyframes art-glow    { 0%,100% { opacity: 1 } 50% { opacity: .78 } }
@keyframes art-march   { to { stroke-dashoffset: -11 } }
@keyframes art-pulse   { 0%,100% { transform: scale(1) } 50% { transform: scale(1.07) } }
@keyframes art-sun-ring{ 0% { transform: scale(1); opacity: .7 } 100% { transform: scale(1.75); opacity: 0 } }
@keyframes art-node    { 0%,100% { opacity: 1 } 40% { opacity: .55 } }
@keyframes art-bob     { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes art-shimmer { 0%,100% { opacity: 1 } 50% { opacity: .8 } }
@keyframes art-pop     { 0%,72%,100% { transform: scale(1) } 82% { transform: scale(1.28) } }

/* Placement inside cards. */
.is-style-card > .diea-art:first-child { margin-block-end: var(--wp--preset--spacing--20); }
.wp-block-post-template.is-layout-grid .diea-art { aspect-ratio: 2 / 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   Hero chips — the tools the work is built on, orbiting the portrait.
   Labels, not claims: no figure here that a campaign report would have to
   back up.
   ═══════════════════════════════════════════════════════════════════════════ */
.diea-portrait-wrap {
	position: relative;
	width: min(330px, 70vw);
	margin-inline: auto;
}

.diea-portrait-wrap .diea-portrait { width: 100%; }

.diea-chip {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.8rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--ink);
	box-shadow: 2px 3px 0 0 var(--wp--preset--color--ink);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
	z-index: 2;
}

.diea-chip i {
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--sun);
	flex: none;
}

.diea-chip--a { inset-block-start: 8%;  inset-inline-start: -14%; }
.diea-chip--b { inset-block-start: 38%; inset-inline-end: -18%; }
.diea-chip--c { inset-block-end: 12%;   inset-inline-start: -10%; }
.diea-chip--d { inset-block-end: -2%;   inset-inline-end: -6%; background: var(--wp--preset--color--sun); }
.diea-chip--d i { background: var(--wp--preset--color--ink); }

/* On a phone there is no room beside the disc: two chips, tucked inside it. */
@media (max-width: 600px) {
	.diea-chip { font-size: 0.75rem; padding: 0.35rem 0.65rem; }
	.diea-chip--a { inset-inline-start: -4%; }
	.diea-chip--b, .diea-chip--c { display: none; }
	.diea-chip--d { inset-inline-end: -2%; }
}

@media (prefers-reduced-motion: no-preference) {
	.diea-motion:not(.diea-motion-off) .diea-chip { animation: chip-in 600ms cubic-bezier(.34,1.56,.64,1) both, chip-float 5s ease-in-out 700ms infinite; }
	.diea-motion:not(.diea-motion-off) .diea-chip--a { animation-delay: 520ms, 1.1s; }
	.diea-motion:not(.diea-motion-off) .diea-chip--b { animation-delay: 640ms, 1.6s; }
	.diea-motion:not(.diea-motion-off) .diea-chip--c { animation-delay: 760ms, 2.1s; }
	.diea-motion:not(.diea-motion-off) .diea-chip--d { animation-delay: 880ms, 2.6s; }
}

@keyframes chip-in    { from { opacity: 0; transform: scale(.6) } to { opacity: 1; transform: none } }
@keyframes chip-float { 0%,100% { translate: 0 0 } 50% { translate: 0 -6px } }

/* ═══════════════════════════════════════════════════════════════════════════
   Platform marquee — where the budgets actually run.
   ═══════════════════════════════════════════════════════════════════════════ */
.diea-marquee {
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--40);
	-webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.diea-marquee__label {
	text-align: center;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ash-light);
	margin-block-end: var(--wp--preset--spacing--30);
}

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

.diea-marquee ul {
	display: flex;
	gap: 3rem;
	padding-inline-end: 3rem;
	margin: 0;
	list-style: none;
	padding-inline-start: 0;
}

.diea-marquee li {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--wp--preset--color--paper);
	white-space: nowrap;
	opacity: .78;
	transition: opacity 160ms ease, color 160ms ease;
}

.diea-marquee li:hover { opacity: 1; color: var(--wp--preset--color--sun); }
.diea-marquee svg { inline-size: 1.25rem; block-size: 1.25rem; fill: currentColor; flex: none; }

@media (prefers-reduced-motion: no-preference) {
	.diea-marquee__track { animation: marquee 38s linear infinite; }
	.diea-marquee:hover .diea-marquee__track { animation-play-state: paused; }
}

/* Reduced motion: one static, wrapped row — the duplicate list goes away. */
@media (prefers-reduced-motion: reduce) {
	.diea-marquee { -webkit-mask: none; mask: none; }
	.diea-marquee__track { width: auto; justify-content: center; }
	.diea-marquee ul { flex-wrap: wrap; justify-content: center; row-gap: 1rem; padding-inline-end: 0; }
	.diea-marquee ul[aria-hidden] { display: none; }
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   Pointer glow on dark cards — a soft orange light that follows the cursor.
   Positions come from motion.js; with no pointer it simply never appears.
   ═══════════════════════════════════════════════════════════════════════════ */
.is-style-card.has-onyx-background-color { position: relative; isolation: isolate; }

.is-style-card.has-onyx-background-color::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(249, 115, 22, .16), transparent 60%);
	opacity: 0;
	transition: opacity 240ms ease;
	pointer-events: none;
	z-index: -1;
}

.is-style-card.has-onyx-background-color:hover::before { opacity: 1; }

/* A wide drawing heading a case study or service page. */
.diea-art.diea-art--banner { aspect-ratio: 21 / 8; margin-block-end: var(--wp--preset--spacing--40); }
@media (max-width: 600px) { .diea-art.diea-art--banner { aspect-ratio: 16 / 9; } }


/* A highlighted word inside a heading is a compact block, not an inline
   background. An inline background paints the font's whole content area
   (~1.2em), taller than the heading's line pitch, so when the heading wraps
   the descender of the line above ("you") runs into it. */
:is(h1, h2, h3) .diea-highlight,
:is(h1, h2, h3) mark.diea-highlight {
	display: inline-block;
	line-height: 1;
	padding: 0.02em 0.1em 0.06em;
}


/* A banner drawing sitting directly on a white sheet needs its own ground,
   or it reads as a small floating panel with no edge. */
.diea-art.diea-art--banner.diea-art--light { --art-bg: #f3f3f0; --art-panel: #ffffff; }

/* ── About ────────────────────────────────────────────────────────────── */
.diea-tall-portrait {
	position: relative;
	margin: 0 auto;
	max-width: 420px;
	border-radius: 28px;
	overflow: visible;
}

.diea-tall-portrait img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 28px;
	background: var(--wp--preset--color--sun);
}

.diea-tall-portrait .diea-chip--a { inset-block-start: 10%; inset-inline-start: -8%; }
.diea-tall-portrait .diea-chip--d { inset-block-end: 8%; inset-inline-end: -6%; }

@media (max-width: 600px) {
	.diea-tall-portrait .diea-chip--a { inset-inline-start: -2%; }
	.diea-tall-portrait .diea-chip--d { inset-inline-end: -2%; }
}

.diea-factbar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	background: var(--wp--preset--color--onyx);
	border-radius: 28px;
	padding: var(--wp--preset--spacing--40);
	max-width: 1180px;
	margin-inline: auto;
}

@media (max-width: 781px) { .diea-factbar { grid-template-columns: repeat(2, 1fr); row-gap: var(--wp--preset--spacing--40); } }

.diea-fact { display: flex; flex-direction: column; gap: 4px; padding-inline: 12px; }
.diea-fact__icon { color: var(--wp--preset--color--sun); margin-bottom: 6px; }
.diea-fact__label { font-size: 0.8125rem; color: var(--wp--preset--color--ash-light); }
.diea-fact__value { font-size: 1.125rem; font-weight: 600; color: var(--wp--preset--color--paper); }

.diea-principle__icon {
	display: inline-grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 9999px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--sun);
	margin-block-end: var(--wp--preset--spacing--20);
}

/* ── Contact ──────────────────────────────────────────────────────────── */
.diea-next {
	background: var(--wp--preset--color--mist);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 28px;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	position: sticky;
	top: calc(env(safe-area-inset-top, 0px) + 24px);
}

.diea-next__title { font-size: 1.25rem; margin: 0 0 var(--wp--preset--spacing--30); }

/* A real sequence, so it is numbered — with the design system's discs. */
.diea-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }

.diea-steps li {
	counter-increment: step;
	display: grid;
	grid-template-columns: 36px 1fr;
	column-gap: 14px;
	row-gap: 2px;
}

.diea-steps li::before {
	content: counter(step);
	grid-row: span 2;
	inline-size: 36px;
	block-size: 36px;
	border-radius: 9999px;
	background: var(--wp--preset--color--sun);
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	display: grid;
	place-items: center;
	font-variant-numeric: tabular-nums;
}

.diea-steps strong { font-size: 1rem; }
.diea-steps span { font-size: 0.9375rem; color: var(--wp--preset--color--ash); line-height: 1.5; }

.diea-direct { margin-top: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--wp--preset--color--line); display: flex; flex-direction: column; gap: 10px; }
.diea-direct__label { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--wp--preset--color--ash); }
.diea-direct__item { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; font-weight: 500; }
.diea-direct__item svg { color: var(--wp--preset--color--sun-deep); flex: none; }
.diea-direct__item a { text-decoration: none; }
.diea-direct__item a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The address is text you can select; clicking it copies too. */
.diea-copy { cursor: copy; border-bottom: 1px dashed var(--wp--preset--color--line); }
.diea-copy[data-copied]::after { content: ' — copied'; color: var(--wp--preset--color--sun-deep); font-weight: 600; }
@media (max-width: 781px) { .diea-next { position: static; } }


/* ── Phone menu overlay ───────────────────────────────────────────────────
 * WordPress's default is 15px links pinned to the top-left and a close
 * button jammed into the corner. This makes it a proper screen: large links,
 * breathing room, and the call to action at the end.
 */
.wp-block-navigation .diea-nav-cta { display: none; }

.wp-block-navigation__responsive-container.is-menu-open {
	padding: calc(env(safe-area-inset-top, 0px) + 20px) 24px calc(env(safe-area-inset-bottom, 0px) + 32px) !important;
	background: var(--wp--preset--color--night) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: calc(env(safe-area-inset-top, 0px) + 22px);
	right: 22px;
	inline-size: 44px;
	block-size: 44px;
	display: grid;
	place-items: center;
	border-radius: 9999px;
	background: var(--wp--preset--color--onyx);
	color: var(--wp--preset--color--paper);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 72px !important;
	gap: 6px !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 2rem !important;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--paper) !important;
	padding-block: 6px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--sun) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .diea-nav-cta {
	display: block;
	margin-top: 28px;
}

.wp-block-navigation__responsive-container.is-menu-open .diea-nav-cta .wp-block-navigation-item__content {
	display: inline-flex;
	font-size: 1.0625rem !important;
	background: var(--wp--preset--color--sun);
	color: var(--wp--preset--color--ink) !important;
	padding: 14px 28px;
	border-radius: 9999px;
	letter-spacing: 0;
}

/* The menu arrives rather than snapping in. */
@media (prefers-reduced-motion: no-preference) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		animation: diea-rise 420ms cubic-bezier(.16,1,.3,1) both;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 40ms }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 80ms }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 120ms }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 160ms }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: 200ms }
}

/* ── Shop (WooCommerce) ─────────────────────────────────────────────────────
 * Packages are products. These rules bring WooCommerce's blocks onto the
 * system: pill buttons with the offset shadow, 14px inputs, cards at 28px.
 */
.diea-price__amount .diea-price__period {
	margin-inline-start: 0.375rem;
	font-weight: 400;
	letter-spacing: 0;
}

.diea-buy-row {
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.diea-buy-row .wp-block-button__link,
.wc-block-components-product-button .wp-block-button__link,
.wp-block-add-to-cart-form .single_add_to_cart_button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
	background-color: var(--wp--preset--color--sun) !important;
	color: var(--wp--preset--color--ink) !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: var(--diea-shadow-offset);
	font-weight: 600;
	padding: 0.8em 1.5em !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

:is(.wc-block-components-product-button .wp-block-button__link, .wp-block-add-to-cart-form .single_add_to_cart_button, .wc-block-components-checkout-place-order-button):hover {
	transform: translate(2px, 2px);
	box-shadow: var(--diea-shadow-offset-hover);
}

.wc-block-components-product-button {
	margin: 0 !important;
}

.diea-details-link {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* No quantity: every package is bought once. */
.wp-block-add-to-cart-form .quantity {
	display: none !important;
}

.wp-block-add-to-cart-form form.cart {
	margin: 0;
}

/* Checkout and cart. */
.diea-shop-sheet .wc-block-components-text-input input,
.diea-shop-sheet .wc-block-components-combobox .components-combobox-control__input,
.diea-shop-sheet .wc-blocks-components-select__select,
.diea-shop-sheet .wc-block-components-textarea,
.diea-shop-sheet .wc-block-components-address-form__country select {
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: var(--wp--custom--border-radius-input, 14px) !important;
	background-color: var(--wp--preset--color--mist) !important;
	color: var(--wp--preset--color--ink) !important;
}

.diea-shop-sheet .wc-blocks-components-select__container,
.diea-shop-sheet .wc-block-components-combobox {
	border-radius: var(--wp--custom--border-radius-input, 14px);
}

.diea-shop-sheet .wc-block-components-text-input input:focus,
.diea-shop-sheet .wc-blocks-components-select__select:focus {
	border-color: var(--wp--preset--color--ink) !important;
	box-shadow: none !important;
}

.diea-shop-sheet .wp-block-woocommerce-checkout-order-summary-block,
.diea-shop-sheet .wp-block-woocommerce-cart-order-summary-block {
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: var(--wp--custom--border-radius-card, 28px) !important;
	background-color: var(--wp--preset--color--mist);
	overflow: hidden;
}

.diea-shop-sheet .wc-block-components-order-summary-item__image,
.diea-shop-sheet .wc-block-cart-item__image {
	display: none;
}

.diea-shop-sheet .wc-block-components-order-summary-item__description {
	padding-inline-start: 0 !important;
}

.diea-shop-sheet .wc-block-components-notice-banner {
	border-radius: var(--wp--custom--border-radius-input, 14px);
}

.diea-shop-sheet .wc-block-components-checkout-step__title,
.diea-shop-sheet .wc-block-components-title {
	font-weight: 600;
	letter-spacing: -0.01em;
}

.diea-shop-sheet .wp-block-post-title {
	max-width: none;
}

/* Notices above the shop and product pages sit on night. */
.wp-block-woocommerce-store-notices {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
}

.diea-shop-sheet .wc-block-components-radio-control-accordion-option,
.diea-shop-sheet .wc-block-components-radio-control__option {
	border-radius: var(--wp--custom--border-radius-input, 14px);
}

.diea-shop-sheet .wc-block-components-radio-control--highlight-checked::after {
	border-radius: var(--wp--custom--border-radius-input, 14px);
}

.diea-shop-sheet table {
	border-radius: var(--wp--custom--border-radius-input, 14px);
	overflow: hidden;
}

.diea-shop-sheet .diea-measure {
	margin-inline-start: 0 !important;
}

/* ── Shop audit fixes (2026-09-28) ───────────────────────────────────────── */

/* Phones: WooCommerce repeats the full summary above the pay button; the
   collapsed total at the top already shows it. */
.diea-shop-sheet .checkout-order-summary-block-fill-wrapper {
	display: none !important;
}

/* The summary item's excerpt rendered at 11px. */
.diea-shop-sheet .wc-block-components-product-metadata,
.diea-shop-sheet .wc-block-components-product-metadata__description,
.diea-shop-sheet .wc-block-components-product-metadata__description p,
.diea-shop-sheet .wc-block-components-order-summary-item__description p {
	font-size: 0.8125rem !important;
	line-height: 1.5;
	color: var(--wp--preset--color--ash);
}

/* Cart: no product images, so no image column squeezing the name. */
.diea-shop-sheet .wc-block-cart-items__header-image,
.diea-shop-sheet .wc-block-cart-item__image {
	display: none !important;
}

.diea-shop-sheet .wc-block-cart-items__header,
.diea-shop-sheet .wc-block-cart__totals-title {
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 0.875rem !important;
	font-weight: 600;
	color: var(--wp--preset--color--ash);
}

.diea-shop-sheet .wp-block-woocommerce-cart-order-summary-block > * {
	padding-inline: var(--wp--preset--spacing--30) !important;
}

.diea-shop-sheet .wc-block-cart-item__product {
	min-width: 60%;
}

.diea-shop-sheet .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title,
.diea-shop-sheet .wp-block-woocommerce-checkout-order-summary-block > :first-child {
	border-top: 0 !important;
}

/* Header cart link. */
.diea-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 999px;
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

.diea-cart-link:hover {
	background-color: var(--wp--preset--color--onyx);
}

.diea-cart-link__count {
	position: absolute;
	inset-block-start: 4px;
	inset-inline-end: 2px;
	min-inline-size: 18px;
	block-size: 18px;
	padding-inline: 5px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--sun);
	color: var(--wp--preset--color--ink);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* WooCommerce notices ("added to your cart", errors), on night or on a sheet. */
.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block: 0 var(--wp--preset--spacing--30) !important;
	padding: 0.875rem 1.125rem !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: var(--wp--custom--border-radius-input, 14px) !important;
	background-color: var(--wp--preset--color--paper) !important;
	color: var(--wp--preset--color--ink) !important;
	font-size: 0.9375rem;
}

.wc-block-components-notice-banner.is-error,
.woocommerce-error {
	border-color: var(--wp--preset--color--sun-deep) !important;
}

.wc-block-components-notice-banner > svg {
	flex: none;
	background-color: var(--wp--preset--color--sun) !important;
	fill: var(--wp--preset--color--ink) !important;
	border-radius: 999px;
}

.wc-block-components-notice-banner .wc-forward,
.wc-block-components-notice-banner .button,
.woocommerce-message .button {
	order: 2;
	margin-inline-start: auto;
	padding: 0.5em 1.1em !important;
	border: 1px solid var(--wp--preset--color--ink) !important;
	border-radius: 999px !important;
	background: var(--wp--preset--color--paper) !important;
	color: var(--wp--preset--color--ink) !important;
	box-shadow: none !important;
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none !important;
	white-space: nowrap;
	opacity: 1 !important;
}

.wc-block-components-notice-banner__content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	flex: 1;
}

/* Overlay-only menu items (My account). */
.wp-block-navigation .diea-nav-mobile { display: none; }
.wp-block-navigation__responsive-container.is-menu-open .diea-nav-mobile { display: flex; }

/* Phones and tablets: logo, cart, menu button. Everything else lives in the
   menu. WordPress collapses the menu below 600px; the header's link count
   needs it collapsed up to 1024px, so the two rules below extend that. */
@media (max-width: 1023px) {
	.diea-header-actions .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	.diea-header-actions .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}

	.diea-header-bar {
		flex-wrap: nowrap !important;
	}

	.diea-header-actions {
		flex-wrap: nowrap !important;
		gap: 0.25rem !important;
	}

	.diea-header-actions > .wp-block-buttons,
	.diea-header-actions .wp-block-woocommerce-customer-account {
		display: none !important;
	}

	.diea-header-actions > .diea-cart-link { order: 1; }
	.diea-header-actions > .wp-block-navigation { order: 2; }

	.diea-header-actions .wp-block-navigation__responsive-container-open {
		inline-size: 44px;
		block-size: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* Notice buttons: a real pill, not a squeezed outline. */
.wc-block-components-notice-banner .wc-forward,
.wc-block-components-notice-banner .button {
	display: inline-flex !important;
	align-items: center;
	line-height: 1.2 !important;
}

.diea-cart-link__count {
	inset-block-start: 2px;
	inset-inline-end: -2px;
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward.wp-element-button,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .button.wp-element-button {
	padding: 0.5em 1.1em !important;
	line-height: 1.2 !important;
}

/* Checkout: the country field sits where the (hidden) address fields were, so
   it lost the gap the other fields have. */
.diea-shop-sheet .wc-block-components-address-form .wc-block-components-address-form__country {
	margin-block-start: 12px !important;
}

/* ── My account ─────────────────────────────────────────────────────────── */

.diea-account .woocommerce {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.diea-account .woocommerce > .woocommerce-notices-wrapper,
.diea-account .woocommerce > .wc-block-components-notices {
	grid-column: 1 / -1;
}

.diea-account .woocommerce-MyAccount-navigation,
.diea-account .woocommerce-MyAccount-content {
	float: none !important;
	inline-size: auto !important;
	margin: 0 !important;
}

.diea-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0.5rem;
	display: grid;
	gap: 2px;
	background-color: var(--wp--preset--color--mist);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--border-radius-card, 28px);
}

.diea-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.65rem 1rem;
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
}

.diea-account .woocommerce-MyAccount-navigation li a:hover {
	background-color: var(--wp--preset--color--paper);
}

.diea-account .woocommerce-MyAccount-navigation li.is-active a {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.diea-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-block-start: 0.5rem;
	padding-block-start: 0.5rem;
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.diea-account .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--wp--preset--color--ash);
}

.diea-account-hello {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.diea-account-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.diea-account-card {
	display: grid;
	gap: 0.35rem;
	padding: 1.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--border-radius-card, 28px);
	background-color: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.diea-account-card svg {
	color: var(--wp--preset--color--sun-deep);
	margin-block-end: 0.35rem;
}

.diea-account-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--diea-shadow-offset);
}

.diea-account-card__title {
	font-weight: 600;
}

.diea-account-card__text {
	color: var(--wp--preset--color--ash);
	font-size: 0.875rem;
}

.diea-account-help {
	margin-block-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--ash);
	font-size: 0.9375rem;
}

/* Tables (orders, downloads, order details). */
.diea-account table.shop_table,
.diea-account table.woocommerce-table {
	inline-size: 100%;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: var(--wp--custom--border-radius-input, 14px);
	border-collapse: separate !important;
	border-spacing: 0;
	overflow: hidden;
	font-size: 0.9375rem;
}

.diea-account table th,
.diea-account table td {
	padding: 0.85rem 1rem !important;
	border: 0 !important;
	border-block-end: 1px solid var(--wp--preset--color--line) !important;
	text-align: start;
	vertical-align: middle;
}

.diea-account table thead th {
	background-color: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--ash);
	font-size: 0.8125rem;
	font-weight: 600;
}

.diea-account table tr:last-child > * {
	border-block-end: 0 !important;
}

.diea-account table a:not(.button) {
	color: var(--wp--preset--color--ink);
}

/* Buttons inside the account: small secondary pills, not full orange bars. */
.diea-account .woocommerce-MyAccount-content .button,
.diea-account .woocommerce-MyAccount-content .woocommerce-button {
	display: inline-flex !important;
	align-items: center;
	inline-size: auto !important;
	padding: 0.45em 1em !important;
	border: 1px solid var(--wp--preset--color--ink) !important;
	border-radius: 999px !important;
	background: var(--wp--preset--color--paper) !important;
	color: var(--wp--preset--color--ink) !important;
	box-shadow: none !important;
	font-size: 0.875rem !important;
	font-weight: 600;
	text-decoration: none !important;
}

.diea-account .woocommerce-MyAccount-content .button:hover {
	background: var(--wp--preset--color--mist) !important;
}

/* Forms: login, account details, billing. */
.diea-account form.woocommerce-form-login,
.diea-account form.woocommerce-form-register,
.diea-account form.woocommerce-ResetPassword {
	max-inline-size: 440px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.diea-account .woocommerce > h2,
.diea-account #customer_login h2 {
	font-size: 1.25rem;
	margin-block: 0 var(--wp--preset--spacing--30);
}

.diea-account label {
	display: block;
	margin-block-end: 0.4rem;
	font-size: 0.875rem;
	font-weight: 500;
}

.diea-account .required {
	color: var(--wp--preset--color--sun-deep);
	text-decoration: none;
}

.diea-account input.input-text,
.diea-account input[type="email"],
.diea-account input[type="password"],
.diea-account input[type="text"],
.diea-account select {
	inline-size: 100%;
	min-block-size: 48px;
	padding: 0.7rem 0.9rem !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: var(--wp--custom--border-radius-input, 14px) !important;
	background-color: var(--wp--preset--color--mist) !important;
	color: var(--wp--preset--color--ink);
	font: inherit;
	box-shadow: none !important;
}

.diea-account input:focus,
.diea-account select:focus {
	border-color: var(--wp--preset--color--ink) !important;
	outline: 2px solid var(--wp--preset--color--sun);
	outline-offset: 1px;
}

.diea-account .form-row {
	margin: 0 0 var(--wp--preset--spacing--30) !important;
	padding: 0 !important;
}

.diea-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 !important;
	font-weight: 400;
}

.diea-account .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.diea-account form button[type="submit"],
.diea-account .woocommerce-form-login__submit {
	padding: 0.8em 1.6em !important;
	border: 0 !important;
	border-radius: 999px !important;
	background-color: var(--wp--preset--color--sun) !important;
	color: var(--wp--preset--color--ink) !important;
	box-shadow: var(--diea-shadow-offset);
	font-weight: 600;
	cursor: pointer;
}

.diea-account .woocommerce-LostPassword a {
	color: var(--wp--preset--color--ash);
	font-size: 0.875rem;
}

.diea-account fieldset {
	margin: var(--wp--preset--spacing--40) 0;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--border-radius-input, 14px);
}

.diea-account .password-input {
	display: block;
	position: relative;
}

/* Phones: menu becomes a scrolling row of pills above the content. */
@media (max-width: 781px) {
	.diea-account .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--30);
	}

	.diea-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		overflow-x: auto;
		padding: 0.35rem;
		border-radius: 999px;
		scrollbar-width: none;
	}

	.diea-account .woocommerce-MyAccount-navigation li {
		flex: none;
	}

	.diea-account .woocommerce-MyAccount-navigation li a {
		padding: 0.5rem 0.9rem;
		font-size: 0.875rem;
		white-space: nowrap;
	}

	.diea-account .woocommerce-MyAccount-navigation-link--customer-logout {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.diea-account table.shop_table_responsive tr {
		display: block;
		border-block-end: 1px solid var(--wp--preset--color--line);
	}
}

/* WooCommerce's clearfix pseudo-elements would take grid cells. */
.diea-account .woocommerce::before,
.diea-account .woocommerce::after {
	content: none !important;
	display: none !important;
}

.diea-account .woocommerce-MyAccount-navigation li a:is(:focus, :hover, :active),
.diea-account .woocommerce-MyAccount-navigation li.is-active a {
	text-decoration: none;
}

/* Login (logged out): just the form, aligned with the page title. */
.diea-account .woocommerce:has(> .woocommerce-form-login),
.diea-account .woocommerce:has(> h2 + .woocommerce-form-login),
.diea-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
	display: block;
}

.diea-account .woocommerce-MyAccount-navigation li {
	margin: 0 !important;
}

.diea-account .wp-block-post-content.has-global-padding {
	padding-inline: 0 !important;
}

.diea-account .wp-block-post-content > .woocommerce {
	max-inline-size: none;
	margin-inline: 0 !important;
}

.diea-account .woocommerce-form-login__submit {
	margin: 0 !important;
}

.diea-account .woocommerce-MyAccount-navigation li {
	padding: 0 !important;
	list-style: none;
}

.diea-account .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
	flex-direction: row !important;
	justify-content: flex-start !important;
}

.diea-account .woocommerce-form-login__submit { order: 1; }
.diea-account .woocommerce-form-login__rememberme { order: 2; }

.diea-account .form-row::before,
.diea-account .form-row::after {
	content: none !important;
	display: none !important;
}

/* The form's main action is the orange pill; row buttons (View, downloads) stay outlined. */
.diea-account .woocommerce-MyAccount-content form button[type="submit"],
.diea-account .woocommerce-MyAccount-content form .woocommerce-Button[type="submit"] {
	padding: 0.8em 1.6em !important;
	border: 0 !important;
	background: var(--wp--preset--color--sun) !important;
	box-shadow: var(--diea-shadow-offset) !important;
	font-size: 0.9375rem !important;
}

.diea-account .woocommerce-MyAccount-content form em,
.diea-account .woocommerce-MyAccount-content form .description {
	display: block;
	margin-block-start: 0.4rem;
	font-style: normal;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ash);
}

.diea-account legend {
	padding-inline: 0.5rem;
	font-weight: 600;
}

/* ── About: experience timeline and CV lists ───────────────────────────── */

.diea-cv-buttons {
	margin-block-start: var(--wp--preset--spacing--30);
}

.diea-roles {
	display: grid;
	gap: 0;
}

.diea-role {
	display: grid;
	grid-template-columns: 11rem minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.diea-role:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

.diea-role > *,
.diea-role__body > * {
	margin: 0;
}

.diea-role__body {
	display: grid;
	gap: 0.5rem;
	max-inline-size: 70ch;
}

.diea-role__dates {
	margin: 0;
	padding-block-start: 0.2rem;
	color: var(--wp--preset--color--ash);
	font-size: 0.875rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.diea-role__title {
	font-size: 1.25rem !important;
	letter-spacing: -0.01em;
}

.diea-role__org {
	color: var(--wp--preset--color--ash);
	font-size: 0.9375rem;
}

.diea-role__org strong {
	color: var(--wp--preset--color--sun-deep);
	font-weight: 600;
}

.diea-role__list,
.diea-cv-list {
	list-style: none;
	margin: 0.25rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.45rem;
}

.diea-role__list li,
.diea-cv-list li {
	position: relative;
	padding-inline-start: 1.1rem;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.diea-role__list li::before,
.diea-cv-list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.72em;
	inline-size: 6px;
	block-size: 2px;
	border-radius: 2px;
	background-color: var(--wp--preset--color--sun);
}

.diea-role__nested {
	display: grid;
	gap: 0.35rem;
	margin-block-start: 0.5rem !important;
	padding-inline-start: 1rem;
	border-inline-start: 2px solid var(--wp--preset--color--line);
}

.diea-role__nested > * { margin: 0; }

.diea-role__nested-title {
	color: var(--wp--preset--color--ash);
	font-size: 0.9375rem;
}

.diea-role__nested-title strong {
	color: var(--wp--preset--color--ink);
}

.diea-cv-columns .is-style-card {
	block-size: 100%;
}

.diea-cv-columns .is-style-card h3:not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--40);
}

@media (max-width: 781px) {
	.diea-role {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.35rem;
	}
}