/* ==========================================================================
   Cudillows™ brand page (template-cudillows.php) — CGD theme.
   Built from the Claude Design file "Cudillows Brand Page" (2026-10 revision).
   Breakpoints: phone < 640px, tablet < 1024px. Content is edited in ACF
   ("Page — Cudillows"); per-item colours and image fit arrive inline.
   ========================================================================== */

:root {
	--cud-ink: #22304A;
	--cud-muted: #56627A;
	--cud-blue: #1F9BE0;
	--cud-blue-hover: #1688CA;
	--cud-blue-deep: #0D6CA3;
	--cud-page: #FBFCFF;
	--cud-sky: #EEF6FD;
	--cud-line: #EEF2F7;
	--cud-display: 'Fredoka', sans-serif;
	--cud-body: 'Nunito', system-ui, sans-serif;
	--cud-hh: 111px; /* the CGD site header's height; full-screen sections subtract it */
}
/* The CGD header (Elementor template 27) at its own breakpoints. */
@media (max-width: 1179.98px) { :root { --cud-hh: 104px; } }
@media (max-width: 1023.98px) { :root { --cud-hh: 84px; } }
@media (max-width: 639.98px) { :root { --cud-hh: 91px; } }

/* --- Base: neutralise the host theme's resets inside the page ------------ */

.cud-main { overflow-x: clip; background: var(--cud-page); }
.cud {
	font-family: var(--cud-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--cud-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
}
.cud *, .cud *::before, .cud *::after { box-sizing: border-box; }
.cud h1, .cud h2, .cud h3, .cud p, .cud ul, .cud dl, .cud dd, .cud figure { margin: 0; padding: 0; }
/* Host themes (e.g. the CGD theme) style bare headings; :where keeps this below the class rules. */
.cud :where(h1, h2, h3, h4) { letter-spacing: normal; font-weight: 600; }
.cud img { display: block; max-width: 100%; height: auto; border: 0; border-radius: 0; box-shadow: none; }
.cud a { color: var(--cud-blue-deep); }
.cud a:hover { color: var(--cud-ink); }
.cud button { font: inherit; letter-spacing: normal; text-transform: none; margin: 0; white-space: normal; }
.cud-block { display: contents; }

/* --- Sections and layout ------------------------------------------------- */

.cud-sec {
	position: relative;
	background: var(--cud-page);
	padding: clamp(72px, 8.4vw, 120px) 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	scroll-margin-top: var(--cud-hh);
}
@media (min-width: 640px) { .cud-sec--fill { min-height: calc(100vh - var(--cud-hh)); } }

.cud-in { max-width: 1350px; width: 100%; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.cud-stack { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); }
.cud-split { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(40px, 5vw, 80px); }

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

.cud-head { display: flex; flex-direction: column; gap: 16px; }
.cud-head--center { align-items: center; text-align: center; }
.cud-eyebrow {
	font-family: var(--cud-body);
	font-weight: 800;
	font-size: clamp(13px, calc(17px - 0.3vw), 15px);
	line-height: 1.6;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cud-blue-deep);
}
.cud .cud-h2 {
	font-family: var(--cud-display);
	font-weight: 600;
	font-size: clamp(30px, 3.4vw, 48px);
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--cud-ink);
	text-wrap: balance;
}
.cud-lead { font-size: clamp(17px, 1.3vw, 18px); line-height: 1.6; color: var(--cud-muted); max-width: 52ch; text-wrap: pretty; }
.cud-closing {
	font-family: var(--cud-display);
	font-weight: 500;
	font-size: clamp(20px, 1.8vw, 26px);
	line-height: 1.35;
	color: var(--cud-ink);
	text-align: center;
	max-width: 40ch;
	margin: 0 auto !important;
	text-wrap: balance;
}

/* --- Buttons and chips ---------------------------------------------------- */

.cud-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.cud-btns--center { justify-content: center; }
.cud .cud-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 28px;
	border: 0;
	border-radius: 999px;
	font-family: var(--cud-body);
	font-weight: 800;
	font-size: 17px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 200ms ease-out, background-color 200ms ease-out;
}
.cud .cud-btn--primary { background: var(--cud-blue); color: #FFFFFF; }
.cud .cud-btn--primary:hover { background: var(--cud-blue-hover); color: #FFFFFF; transform: translateY(-1px); }
.cud .cud-btn--ghost { background: transparent; color: var(--cud-ink); box-shadow: inset 0 0 0 1.5px var(--cud-ink); }
.cud .cud-btn--ghost:hover { background: rgba(34, 48, 74, 0.05); color: var(--cud-ink); }
.cud .cud-btn--lg { min-height: 56px; padding: 0 36px; font-size: 18px; }
.cud .cud-btn:focus-visible, .cud button:focus-visible, .cud [tabindex]:focus-visible { outline: 2px solid var(--cud-blue); outline-offset: 3px; }

.cud-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cud-chip {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--cud-sky);
	font-weight: 700;
	font-size: 15px;
	color: var(--cud-ink);
}
.cud-chip--white { background: #FFFFFF; }

/* Rows of cards: wrap and centre on tablet and up; swipe on phones. */
.cud-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.cud-row--3 > * { flex: 0 0 calc((100% - 48px) / 3); min-width: 0; }
.cud-row--4 > * { flex: 0 0 calc((100% - 72px) / 4); min-width: 0; }
@media (max-width: 1023.98px) { .cud-row--4 > * { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 639.98px) {
	.cud-row {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 20px;
		margin: 0 -20px;
		padding: 4px 20px 16px;
		scrollbar-width: none;
	}
	.cud-row::-webkit-scrollbar { display: none; }
	.cud-row > * { scroll-snap-align: start; }
	.cud-row--3 > * { flex-basis: 84%; }
	.cud-row--4 > * { flex-basis: 82%; }
}

/* --- Numbered tabs (The Idea, What Makes It Different) -------------------- */

.cud-tabs { display: flex; flex-direction: column; gap: 4px; }
.cud .cud-tab {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	width: 100%;
	text-align: left;
	padding: 20px 24px;
	border: none;
	border-radius: 24px;
	background: transparent;
	color: var(--cud-ink);
	font-family: var(--cud-body);
	cursor: pointer;
	transition: background 250ms ease-out, box-shadow 250ms ease-out;
}
.cud .cud-tab.is-active { background: #FFFFFF; box-shadow: 0 0 0 1px #E6EDF6, 0 18px 40px -24px rgba(34, 48, 74, 0.3); }
.cud-tab__num {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--cud-line);
	color: var(--cud-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--cud-display);
	font-weight: 600;
	font-size: 17px;
	transition: background 250ms ease-out, color 250ms ease-out;
}
.cud-tab.is-active .cud-tab__num { background: var(--cud-blue); color: #FFFFFF; }
.cud-tab__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.cud-tab__title { font-family: var(--cud-display); font-weight: 600; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.25; color: var(--cud-ink); }
.cud-tab__body { font-size: 16px; line-height: 1.55; color: var(--cud-muted); }

/* ==========================================================================
   Hero
   ========================================================================== */

.cud-hero { padding: clamp(32px, 5vw, 72px) 0; flex-direction: row; align-items: center; }
.cud-hero__in { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 5vw, 72px); }
.cud-hero__copy { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
/* Logo, eyebrow and heading share a box as wide as the heading's first line (up to the line
   break set in ACF), so the logo ends where "inside" ends. width:0 + min-width:100% keeps the
   logo and eyebrow out of that measurement while they still fill it. */
.cud-hero__brand { display: grid; width: max-content; max-width: 100%; gap: 24px; }
.cud .cud-hero__logo { width: 0; min-width: calc(100% + 6px); max-width: none; height: auto; margin-left: -6px; }
.cud-hero__brand .cud-eyebrow { width: 0; min-width: 100%; }
.cud-hero__copy > .cud-hero__lead { margin-top: -8px; }
.cud .cud-hero__title {
	font-family: var(--cud-display);
	font-weight: 600;
	font-size: clamp(40px, 5vw, 72px);
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: var(--cud-ink);
	text-wrap: balance;
}
.cud-tm { font-size: 0.4em; vertical-align: top; position: relative; top: 0.35em; letter-spacing: 0; }
.cud-hero__lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--cud-muted); max-width: 44ch; text-wrap: pretty; }
.cud-hero__visual { flex: 1.45 1 440px; min-width: 0; }
.cud-hero__media {
	width: 100%;
	aspect-ratio: 4 / 5;
	max-height: calc(100vh - 80px);
	min-height: 360px;
	border-radius: 24px;
	overflow: hidden;
	background: var(--cud-sky);
	box-shadow: 0 24px 60px -30px rgba(34, 48, 74, 0.35);
}
.cud .cud-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }

/* ==========================================================================
   The Idea
   ========================================================================== */

.cud-idea .cud-h2 { font-size: clamp(28px, 2.8vw, 40px); }
.cud-idea__copy { flex: 1.4 1 400px; min-width: 0; display: flex; flex-direction: column; gap: clamp(28px, 3vw, 40px); }
.cud-idea .cud-tab__title { font-size: clamp(26px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.cud-idea__outro { font-size: clamp(17px, 1.3vw, 18px); line-height: 1.6; color: var(--cud-ink); font-weight: 700; }
.cud-idea__panel {
	order: -1;
	flex: 1 1 400px;
	min-width: 0;
	border-radius: 32px;
	background: var(--cud-sky);
	padding: clamp(20px, 4vw, 64px);
	display: flex;
	align-items: center;
	justify-content: center;
}
.cud-idea__card {
	width: 100%;
	max-width: 560px;
	background: #FFFFFF;
	border-radius: 24px;
	box-shadow: 0 0 0 1px rgba(216, 227, 240, 0.8), 0 30px 60px -30px rgba(34, 48, 74, 0.35);
	overflow: hidden;
	padding: 24px;
}
.cud-idea__stage { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: #FFFFFF; }
.cud-idea__caption {
	margin-top: 16px !important;
	min-height: 2.6em;
	font-family: var(--cud-display);
	font-weight: 600;
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.3;
	color: var(--cud-ink);
	text-align: center;
	text-wrap: balance;
}
.cud .cud-idea__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: scale(0.98);
	transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.cud .cud-idea__img.is-active { opacity: 1; transform: none; }
.cud-idea__tag {
	position: absolute;
	left: 16px;
	top: 16px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 16px;
	border-radius: 999px;
	background: var(--cud-blue);
	color: #FFFFFF;
	font-weight: 800;
	font-size: 15px;
	opacity: 0;
	transition: opacity 300ms ease-out;
}
.cud-idea__tag.is-active { opacity: 1; }

/* ==========================================================================
   Characters
   ========================================================================== */

.cud-chars { background: #E3EEFA; }
.cud-chars .cud-eyebrow { color: #B4316F; }
.cud-chars .cud-h2 { max-width: 22ch; }
.cud-chars__wrap { display: flex; flex-direction: column; gap: 24px; }
.cud-chars__nav { position: relative; z-index: 1; }
.cud-chars__track {
	display: flex;
	flex-wrap: nowrap;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	margin: -12px 0 -32px;
	padding: 12px 0 48px;
	scrollbar-width: none;
	outline: none;
}
.cud-chars__track::-webkit-scrollbar { display: none; }
.cud-char {
	flex: 0 0 calc((100% - 96px) / 4.3);
	min-width: 0;
	scroll-snap-align: start;
	border-radius: 24px;
	padding: 20px 20px 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 1px 2px rgba(34, 48, 74, 0.04);
	transition: transform 250ms ease-out, box-shadow 250ms ease-out;
}
.cud-char:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(34, 48, 74, 0.28); }
.cud-char--flip { cursor: pointer; }
.cud-char__media { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.cud .cud-char__img {
	position: absolute;
	left: 7%;
	top: 7%;
	width: 86%;
	height: 86%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: opacity 250ms ease-out;
}
.cud .cud-char__img--back { opacity: 0; }
.cud-char.is-open .cud-char__img--front { opacity: 0; }
.cud-char.is-open .cud-char__img--back { opacity: 1; }
.cud-char__hint {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 4px 12px -6px rgba(34, 48, 74, 0.25);
	font-weight: 700;
	font-size: 14px;
	color: var(--cud-ink);
	white-space: nowrap;
}
.cud-char__meta { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.cud-char__name-row { display: flex; align-items: center; gap: 8px; }
.cud-char__dot { width: 10px; height: 10px; border-radius: 50%; }
.cud .cud-char__name { font-family: var(--cud-display); font-weight: 600; font-size: clamp(20px, 1.7vw, 24px); letter-spacing: 0.04em; line-height: 1.2; color: var(--cud-ink); }
.cud-char__role { font-size: 16px; color: var(--cud-muted); }

.cud-chars__nav { display: flex; justify-content: center; gap: 12px; }
.cud .cud-arrow {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 200ms ease-out, opacity 200ms ease-out;
}
.cud .cud-arrow--prev { background: #FFFFFF; color: var(--cud-ink); box-shadow: inset 0 0 0 1.5px var(--cud-ink); }
.cud .cud-arrow--prev:hover { background: var(--cud-sky); }
.cud .cud-arrow--next { background: var(--cud-ink); color: #FFFFFF; }
.cud .cud-arrow--next:hover { background: #34456A; }
.cud .cud-arrow.is-end { opacity: 0.35; }
.cud-chars__foot {
	font-weight: 800;
	font-size: clamp(13px, calc(17px - 0.3vw), 15px);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cud-muted);
	text-align: center;
}
@media (max-width: 1023.98px) { .cud-char { flex-basis: calc((100% - 48px) / 2.3); } }
@media (max-width: 639.98px) {
	.cud-chars__track { margin: -12px -20px -32px; padding: 12px 20px 48px; scroll-padding-left: 20px; }
	.cud-char { flex-basis: 74%; }
}

/* ==========================================================================
   Every Age
   ========================================================================== */

.cud-ages .cud-eyebrow { color: #127A69; }
.cud-ages .cud-h2 { max-width: 26ch; }
.cud-ages__photo { aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; }
.cud .cud-ages__photo img { width: 100%; height: 100%; }
.cud-age { border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.cud-age__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cud-age__range {
	font-family: var(--cud-display);
	font-weight: 600;
	font-size: clamp(40px, 3.4vw, 52px);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--cud-ink);
	font-variant-numeric: tabular-nums;
}
.cud .cud-age__img { width: 88px; height: 88px; object-fit: contain; mix-blend-mode: multiply; }
.cud-age__list { display: flex; flex-direction: column; }
.cud-age__row { padding: 12px 0; border-top: 1px solid rgba(34, 48, 74, 0.1); display: flex; flex-direction: column; gap: 2px; }
.cud-age__row:last-child { padding-bottom: 0; }
.cud-age__row dt { font-weight: 800; font-size: clamp(13px, calc(17px - 0.3vw), 15px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cud-muted); }
.cud-age__row dd { font-size: 16px; line-height: 1.45; color: var(--cud-ink); }
/* Small print (e.g. "Pending licensing partnership."): bottom of an age card, under What's Next's intro. */
.cud .cud-note { margin-top: auto !important; padding-top: 4px; font-size: 13px; line-height: 1.45; font-style: italic; color: var(--cud-muted); }
.cud .cud-note--center { margin-top: 12px !important; padding-top: 0; text-align: center; }

/* ==========================================================================
   Why people choose Cudillows
   ========================================================================== */

.cud-why { background: #FDEFF6; }
.cud-why .cud-eyebrow { color: #B4316F; }
.cud-why .cud-h2 { max-width: 20ch; }
.cud-why__card {
	background: #FFFFFF;
	border-radius: 24px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 2px rgba(34, 48, 74, 0.04), 0 18px 44px -28px rgba(34, 48, 74, 0.3);
	transition: transform 250ms ease-out;
}
.cud-why__card:hover { transform: translateY(-4px); }
.cud-why__media { aspect-ratio: 4 / 3; max-height: 40vh; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 8% 14%; }
.cud .cud-why__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cud-why__body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 12px; }
.cud .cud-why__title { font-family: var(--cud-display); font-weight: 600; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.25; color: var(--cud-ink); }
.cud-why__list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cud-why__list li { display: flex; gap: 12px; align-items: baseline; font-size: 16px; line-height: 1.45; color: var(--cud-muted); }
.cud-why__list li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #EE6FAE; transform: translateY(-2px); }

/* ==========================================================================
   Built as a platform
   ========================================================================== */

.cud-plat__in { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(40px, 6vw, 96px); }
.cud-plat__head { flex: 1 1 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; margin-bottom: clamp(0px, 2vw, 24px); }
.cud-badge { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 16px; border-radius: 999px; background: #F3EFFC; font-weight: 800; font-size: 14px; color: #6B4FC2; }
.cud-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: #A98BEA; }
.cud .cud-plat__title { font-family: var(--cud-display); font-weight: 600; font-size: clamp(32px, 3.8vw, 56px); line-height: 1.08; letter-spacing: -0.02em; color: var(--cud-ink); text-wrap: balance; }
.cud-plat__aside { flex: 1 1 0; min-width: 0; align-self: stretch; display: flex; flex-direction: column; gap: 24px; }
.cud-plat__stage {
	position: sticky;
	top: calc(var(--cud-hh) + 40px);
	width: 100%;
	aspect-ratio: 1 / 1;
	max-height: calc(100vh - 220px);
	min-height: 280px;
	border-radius: 24px;
	overflow: hidden;
	transition: background-color 350ms ease-out;
}
.cud-plat__pane {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4%;
	padding: 12% 14%;
	opacity: 0;
	transform: scale(0.97);
	transition: opacity 350ms ease-out, transform 350ms ease-out;
}
.cud-plat__pane.is-active { opacity: 1; transform: none; }
.cud .cud-plat__pane img, .cud .cud-plat__inline img { min-width: 0; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
/* Basis 0: picture and list always share the row (phones hide the picture instead). */
.cud-plat__list { flex: 1.05 1 0; min-width: 0; display: flex; flex-direction: column; }
.cud-plat__item {
	min-height: 52vh;
	display: flex;
	align-items: flex-start;
	gap: clamp(20px, 2.6vw, 40px);
	padding: clamp(32px, 4vw, 56px) 0;
	border-top: 1px solid #E6EDF6;
	opacity: 0.4;
	transition: opacity 300ms ease-out;
}
.cud-plat__item:first-child { border-top: none; }
.cud-plat__item.is-active { opacity: 1; }
.cud-plat__num {
	flex: none;
	min-width: 2ch;
	font-family: var(--cud-display);
	font-weight: 500;
	font-size: clamp(48px, 5vw, 76px);
	line-height: 0.9;
	letter-spacing: -0.03em;
	color: #DCD2F6;
	font-variant-numeric: tabular-nums;
	transition: color 300ms ease-out;
}
.cud-plat__item.is-active .cud-plat__num { color: #A98BEA; }
.cud-plat__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.cud .cud-plat__item-title { font-family: var(--cud-display); font-weight: 600; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -0.01em; color: var(--cud-ink); }
.cud-plat__text { font-size: clamp(17px, 1.3vw, 18px); line-height: 1.6; color: var(--cud-muted); max-width: 44ch; }
.cud-plat__inline { display: none; position: relative; margin-top: 12px; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; }
.cud-plat__inline-in { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4%; padding: 12%; }
.cud-plat__foot { flex: 1 1 100%; }
.cud-plat__foot .cud-closing { max-width: 44ch; }
@media (max-width: 639.98px) {
	.cud-plat__aside { display: none; }
	.cud-plat__inline { display: block; }
	.cud-plat__item { min-height: 0; opacity: 1; }
}

/* ==========================================================================
   What makes it different
   ========================================================================== */

.cud-diff { background: #F3EFFC; }
.cud-diff .cud-eyebrow { color: #6B4FC2; }
.cud-diff__copy { flex: 1.2 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.cud-diff .cud-tab__num { background: #FFFFFF; }
.cud-diff .cud-tab.is-active .cud-tab__num { background: #6B4FC2; color: #FFFFFF; }
.cud-diff__figure { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cud-diff__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	max-height: calc(100vh - 200px);
	min-height: 340px;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 24px 60px -30px rgba(34, 48, 74, 0.35);
}
.cud-diff__media { transition: background-color 300ms ease-out; }
.cud .cud-diff__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8%;
	mix-blend-mode: multiply;
	opacity: 0;
	transform: scale(0.98);
	transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.cud .cud-diff__img.is-active { opacity: 1; transform: none; }

/* ==========================================================================
   What's Next (seven-tile mosaic)
   ========================================================================== */

.cud-next { background: #E9F8F4; }
.cud-next .cud-eyebrow { color: #127A69; }
.cud-next .cud-lead { max-width: 56ch; }
.cud-next__in { max-width: 1280px; gap: clamp(32px, 4vw, 48px); }
.cud-mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 14vw, 240px); gap: 16px; }
.cud .cud-mosaic__tile { min-width: 0; margin: 0; border-radius: 24px; overflow: hidden; }
.cud .cud-mosaic__tile img { width: 100%; height: 100%; mix-blend-mode: multiply; }
.cud-mosaic__tile:nth-child(1) { grid-column: 1 / 6; grid-row: 1 / 3; }
.cud-mosaic__tile:nth-child(2) { grid-column: 6 / 10; grid-row: 1 / 2; }
.cud-mosaic__tile:nth-child(3) { grid-column: 10 / 13; grid-row: 1 / 3; }
.cud-mosaic__tile:nth-child(4) { grid-column: 6 / 10; grid-row: 2 / 3; }
.cud-mosaic__tile:nth-child(5) { grid-column: 1 / 5; grid-row: 3 / 4; }
.cud-mosaic__tile:nth-child(6) { grid-column: 5 / 9; grid-row: 3 / 4; }
.cud-mosaic__tile:nth-child(7) { grid-column: 9 / 13; grid-row: 3 / 4; }
.cud-mosaic__tile:nth-child(n+8) { grid-column: span 4; }
@media (max-width: 1023.98px) { .cud-mosaic { grid-auto-rows: 160px; } }
@media (max-width: 639.98px) {
	.cud-mosaic {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 78%;
		grid-auto-rows: auto;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 20px;
		margin: 0 -20px;
		padding: 4px 20px 16px;
		scrollbar-width: none;
	}
	.cud-mosaic::-webkit-scrollbar { display: none; }
	.cud-mosaic__tile:nth-child(n) { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; scroll-snap-align: start; }
}

/* ==========================================================================
   Get in touch
   ========================================================================== */

.cud-contact { background: #FFFFFF; padding: clamp(88px, 10vw, 144px) 0 clamp(40px, 4vw, 56px); }
.cud-contact__in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(56px, 7vw, 96px); }
.cud-contact__main { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.cud-contact .cud-eyebrow { color: #B4316F; }
.cud .cud-contact__title { font-family: var(--cud-display); font-weight: 600; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.05; letter-spacing: -0.02em; color: var(--cud-ink); text-wrap: balance; }
.cud-contact__lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--cud-muted); max-width: 56ch; text-wrap: pretty; }
.cud .cud-contact__email { font-family: var(--cud-display); font-weight: 600; font-size: clamp(20px, 2vw, 28px); line-height: 1.3; color: var(--cud-ink); text-decoration: none; overflow-wrap: anywhere; }
.cud .cud-contact__email:hover { color: var(--cud-blue-deep); }
.cud-contact__legal { display: flex; flex-direction: column; gap: 6px; }
.cud-contact__legal p { font-size: 14px; line-height: 1.5; color: var(--cud-muted); max-width: 90ch; text-wrap: pretty; }

/* ==========================================================================
   Tablet (640–1023px)
   ========================================================================== */

@media (min-width: 640px) and (max-width: 1023.98px) {
	/* Hero: copy above a landscape photo instead of a very tall portrait one. */
	.cud-hero__media { aspect-ratio: 4 / 3; min-height: 0; }
	/* Why: two cards per row, the third centred under them. */
	.cud-why .cud-row--3 > * { flex-basis: calc((100% - 24px) / 2); }
	/* Platform: picture and list stay side by side. */
	.cud-plat__in { column-gap: 32px; }
	.cud-plat__aside { flex: 0 0 42%; }
	.cud-plat__list { flex: 1 1 0; }
	.cud-plat__stage { min-height: 0; }
	.cud-plat__item { min-height: 40vh; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
	/* Different: points and picture side by side. */
	.cud-diff__in { flex-wrap: nowrap; gap: 32px; }
	.cud-diff__copy { flex: 1.35 1 0; }
	.cud-diff__figure { flex: 1 1 0; }
	.cud-diff__media { min-height: 0; }
}

/* ==========================================================================
   Section menu: appears once the hero has scrolled away
   ========================================================================== */

.cud-nav {
	position: fixed;
	left: 0;
	right: 0;
	top: calc(var(--cud-hh) + 16px);
	z-index: 60;
	display: flex;
	justify-content: center;
	padding: 0 12px;
	pointer-events: none;
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity 250ms ease-out, transform 250ms ease-out;
}
.cud-nav.is-on { opacity: 1; transform: none; }
.cud-nav__strip {
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
	display: flex;
	gap: 4px;
	padding: 6px;
	border-radius: 999px;
	background: rgba(251, 252, 255, 0.92);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 0 0 1px #D8E3F0, 0 12px 32px -16px rgba(34, 48, 74, 0.28);
}
.cud-nav__strip::-webkit-scrollbar { display: none; }
.cud-nav.is-on .cud-nav__strip { pointer-events: auto; }
.cud-nav a {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	font-family: var(--cud-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	color: var(--cud-muted);
	-webkit-font-smoothing: antialiased;
	transition: background-color 200ms ease-out, color 200ms ease-out;
}
.cud-nav a:hover { color: var(--cud-ink); }
.cud-nav a.is-active, .cud-nav a.is-active:hover { background: var(--cud-ink); color: #FFFFFF; }
.cud-nav a:focus-visible { outline: 2px solid var(--cud-blue); outline-offset: 2px; }
.cud-nav__box { position: relative; max-width: 100%; display: flex; justify-content: center; }
.cud-nav__toggle { display: none; }
@media (max-width: 639.98px) {
	.cud-nav { top: calc(var(--cud-hh) + 10px); padding: 0 16px; }
	.cud-nav__box { width: 100%; max-width: 420px; display: block; }
	.cud-nav__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		min-height: 52px;
		margin: 0;
		padding: 6px 6px 6px 22px;
		border: 0;
		border-radius: 999px;
		background: rgba(251, 252, 255, 0.94);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
		box-shadow: 0 0 0 1px #D8E3F0, 0 12px 32px -16px rgba(34, 48, 74, 0.28);
		font-family: var(--cud-body);
		font-weight: 800;
		font-size: 16px;
		line-height: 1.2;
		color: var(--cud-ink);
		cursor: pointer;
		-webkit-font-smoothing: antialiased;
	}
	.cud-nav.is-on .cud-nav__toggle { pointer-events: auto; }
	.cud-nav__chev {
		flex: none;
		width: 40px;
		height: 40px;
		border-radius: 999px;
		background: var(--cud-ink);
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: transform 250ms ease-out;
	}
	.cud-nav.is-open .cud-nav__chev { transform: rotate(180deg); }
	/* The links become a list under the pill; nothing scrolls sideways. */
	.cud-nav__strip {
		display: none;
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 2px;
		padding: 8px;
		border-radius: 24px;
		overflow: visible;
		background: rgba(251, 252, 255, 0.98);
	}
	.cud-nav.is-open .cud-nav__strip { display: flex; }
	.cud-nav a { width: 100%; padding: 0 16px; font-size: 16px; }
}

/* Site footer CTA ("Let's Build What's Next") hidden on this page — ACF: Page → toggle. */
.cud-hide-footer-cta .elementor-181 .elementor-element.elementor-element-d1b16c9 { display: none; }

@media (prefers-reduced-motion: reduce) {
	.cud *, .cud *::before, .cud *::after { transition: none !important; animation: none !important; }
	.cud-chars__track { scroll-behavior: auto; }
}