/* The CV Theme: components.css
   Single front-end stylesheet (also loaded in the editor). The four base colors and
   the font stacks are set inline from the Customizer; see :root below. */

/* ---- DESIGN TOKENS ---- */
:root {
	/* The four Customizer colors (Appearance → Customize → Colors), set inline by functions.php. */
	--thecv-bg:          #F7F3E6;   /* Background */
	--thecv-text:        #111111;   /* Text */
	--thecv-brand:       #788CE3;   /* Brand */
	--thecv-highlight:   #DFF478;   /* Highlight */

	/* Everything else is mixed from those four, no other color needs setting. */
	--thecv-text-soft:   color-mix(in srgb, var(--thecv-text) 80%, var(--thecv-bg));    /* secondary text */
	--thecv-text-muted:  color-mix(in srgb, var(--thecv-text) 72%, var(--thecv-bg));    /* labels, captions (4.5:1 on every palette) */
	--thecv-brand-text:  color-mix(in srgb, var(--thecv-brand) 60%, var(--thecv-text));  /* brand color for small text (contrast 4.5:1) */
	--thecv-brand-large: color-mix(in srgb, var(--thecv-brand) 90%, var(--thecv-text));  /* brand color for big italic words (contrast 3:1) */
	--thecv-dark:        color-mix(in srgb, var(--thecv-brand) 25%, var(--thecv-text));  /* dark fills: badges, card scrims */
	--thecv-on-dark:     color-mix(in srgb, var(--thecv-bg) 92%, #fff);                 /* text on dark fills and photos */
	--thecv-bg-alt:      color-mix(in srgb, var(--thecv-bg) 94%, var(--thecv-text));    /* table headers, subtle bands */
	--thecv-surface:     color-mix(in srgb, var(--thecv-bg) 35%, #fff);                 /* cards lifted off the background */
	--thecv-placeholder: color-mix(in srgb, var(--thecv-bg) 78%, var(--thecv-text));    /* empty image slots */
	--thecv-line:        color-mix(in srgb, var(--thecv-dark) 14%, transparent);        /* hairlines, borders */

	/* the current design tints. Lime and Navy gets the exact values from functions.php; other palettes and
	   Custom use these mixes of their own colors. Ink text on every tint is at least 4.5:1. */
	--thecv-card:        color-mix(in srgb, var(--thecv-bg) 35%, #fff);                                  /* lifted cards, white-ish */
	--thecv-soft:        color-mix(in srgb, var(--thecv-text) 68%, var(--thecv-bg));                     /* secondary text (6:1) */
	--thecv-lilac:       color-mix(in srgb, var(--thecv-brand) 35%, var(--thecv-bg));
	--thecv-mint:        color-mix(in srgb, var(--thecv-highlight) 55%, var(--thecv-bg));
	--thecv-sun:         color-mix(in srgb, color-mix(in srgb, var(--thecv-highlight) 70%, var(--thecv-brand)) 70%, var(--thecv-bg));
	--thecv-sand:        color-mix(in srgb, var(--thecv-text) 5.5%, var(--thecv-bg));
	--thecv-focus:       var(--thecv-text);   /* focus ring; light on dark sections */
	--thecv-body-size:   17px;

	/* Fixed status colors (not in the Customizer). */
	--thecv-error:       #B42318;   /* form error text */

	--thecv-font-display: 'Zalando Sans', system-ui, -apple-system, sans-serif;
	--thecv-font-body:    'Zalando Sans', system-ui, -apple-system, sans-serif;
	--thecv-font-script:  'Playfair Display', Georgia, serif;

	--thecv-radius:       4px;     /* buttons, cards, images, panels, one radius everywhere */
	--thecv-pill:         999px;   /* tags, chips, skill bars */

	--thecv-pad:          clamp(1rem, 3vw, 2.75rem);
	--thecv-max:          1800px;

	/* One vertical rhythm for every section: keeps spacing consistent
	   when blocks are reordered. Override per-block only with a strong reason. */
	--thecv-section-y:    clamp(6rem, 11vw, 11rem);
	--thecv-prose-y:      clamp(2.5rem, 5vw, 4rem);
}

/* Core color presets (theme.json) follow the live Customizer colors. */
body {
	--wp--preset--color--background: var(--thecv-bg);
	--wp--preset--color--text: var(--thecv-text);
	--wp--preset--color--brand: var(--thecv-brand);
	--wp--preset--color--highlight: var(--thecv-highlight);
}

@media (min-width: 701px) {
	:root { --thecv-body-size: 18px; }
}
@media (max-width: 900px) {
	:root { --thecv-section-y: 4.5rem; }
}
/* Phones: every block is 3rem + 3rem = 96px from the next one (blocks with no padding of their own are fixed below). */
@media (max-width: 700px) {
	:root { --thecv-section-y: 3rem; }
}

/* ---- RESET / BASE ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	background: var(--thecv-bg);
	color: var(--thecv-text);
	font-family: var(--thecv-font-body);
	font-size: var(--thecv-body-size); line-height: 1.5;
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* === Sticky footer: body is a flex column filling viewport,
   main grows to push footer to the bottom on short pages === */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#thecv-main,
main[role="main"] {
	flex: 1 0 auto;   }

.thecv-footer {
	flex-shrink: 0;   }

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ---- TYPOGRAPHY UTILITIES ---- */
.display, .display * { font-family: var(--thecv-font-display); font-weight: 800; letter-spacing: -.022em; line-height: 1.0; font-synthesis: none; text-wrap: balance; }
.display em,
.display i {
	/* Italic in a heading is a normal italic (no highlight effect). */
	font-family: inherit; font-style: italic; font-weight: inherit; font-synthesis: style;
	text-transform: none; letter-spacing: inherit; color: inherit;
}
.script { font-family: var(--thecv-font-script); color: var(--thecv-brand-large); }
.small-caps {
	font-family: var(--thecv-font-display);
	font-variant: small-caps; letter-spacing: .14em; font-weight: 400;
}
.thecv-label {
	font-family: var(--thecv-font-body);
	letter-spacing: .22em; text-transform: uppercase;
	font-size: .7rem; font-weight: 500; color: var(--thecv-text-muted);
}
.thecv-label--accent { color: var(--thecv-brand-text); }

/* === SURFACE SYSTEM ===
   Four tones, used surgically:
   - var(--thecv-bg): page bg + all sections (default)
   - var(--thecv-bg-alt): contained surfaces (logos banner, value cards)
   - var(--thecv-highlight): services block
   - var(--thecv-dark): footer only (structural close)
   Do NOT introduce additional section-level bg colors. */
.thecv-container { max-width: var(--thecv-max); margin: 0 auto; padding-left: var(--thecv-pad); padding-right: var(--thecv-pad); }
.thecv-section { position: relative; padding: var(--thecv-section-y) 0; }

/* ---- BUTTONS (the current design "pill") ----
   Fill (.thecv-btn, core Button): ink fill, 2px ink border, 4px radius, 48px tall; turns highlight on hover
   with a 3px lift on mouse devices only. Secondary / Outline: transparent with the ink border.
   Lime: highlight fill, turns ink. Text link: no box. The core Button block shares all of these. */
.thecv-btn,
.wp-block-button .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .6rem 1.5rem; min-height: 48px; border: 2px solid var(--thecv-text); border-radius: var(--thecv-radius); cursor: pointer;
	background: var(--thecv-text); color: var(--thecv-bg);
	font-family: var(--thecv-font-body); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.2;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
}
.thecv-btn--secondary,
.wp-block-button.is-style-secondary .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--thecv-text); }
.wp-block-button.is-style-lime .wp-block-button__link{ background: var(--thecv-highlight); color: var(--thecv-text); }
.thecv-btn:active,
.wp-block-button .wp-block-button__link:active { transform: scale(.97); }
.thecv-btn:focus-visible,
.wp-block-button .wp-block-button__link:focus-visible,
.thecv-btn--secondary:focus-visible,
.wp-block-button.is-style-secondary .wp-block-button__link:focus-visible,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible { background: var(--thecv-highlight); color: var(--thecv-text); }
.wp-block-button.is-style-lime .wp-block-button__link:focus-visible{ background: var(--thecv-text); color: var(--thecv-highlight); }
@media (hover: hover) and (pointer: fine) {
	.thecv-btn:hover,
	.wp-block-button .wp-block-button__link:hover,
	.thecv-btn--secondary:hover,
	.wp-block-button.is-style-secondary .wp-block-button__link:hover,
	.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--thecv-highlight); color: var(--thecv-text); transform: translateY(-3px); }
	.wp-block-button.is-style-lime .wp-block-button__link:hover{ background: var(--thecv-text); color: var(--thecv-highlight); transform: translateY(-3px); }
}
.thecv-btn__icon { width: 14px; height: 14px; flex: none; transition: transform .25s ease; }
.thecv-btn:hover .thecv-btn__icon,
.thecv-btn:focus-visible .thecv-btn__icon { transform: translate(2px, -2px); }
.wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 2rem 0; }
.thecv-post__content .wp-block-button__link { color: var(--thecv-bg); text-decoration: none; }
.thecv-post__content .wp-block-button__link:hover,
.thecv-post__content .wp-block-button.is-style-secondary .wp-block-button__link,
.thecv-post__content .wp-block-button.is-style-outline .wp-block-button__link,
.thecv-post__content .wp-block-button.is-style-lime .wp-block-button__link { color: var(--thecv-text); }
.thecv-post__content .wp-block-button.is-style-lime .wp-block-button__link:hover { color: var(--thecv-highlight); }
/* "Text link" button style: uppercase text with an arrow that nudges on hover, no box. */
.wp-block-button.is-style-text .wp-block-button__link,
.thecv-post__content .wp-block-button.is-style-text .wp-block-button__link {
	padding: 0; min-height: 0; border: 0; border-radius: 0; background: transparent; color: var(--thecv-text);
	font-size: .85rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: inherit;
}
.wp-block-button.is-style-text .wp-block-button__link::after { content: "→"; transition: transform .3s ease; }
.wp-block-button.is-style-text .wp-block-button__link:hover,
.wp-block-button.is-style-text .wp-block-button__link:focus-visible { background: transparent; color: var(--thecv-brand-text); transform: none; }
.wp-block-button.is-style-text .wp-block-button__link:hover::after,
.wp-block-button.is-style-text .wp-block-button__link:focus-visible::after { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) {
	.thecv-btn, .thecv-btn__icon, .wp-block-button .wp-block-button__link, .wp-block-button.is-style-text .wp-block-button__link::after { transition: none; }
	.thecv-btn:hover, .thecv-btn:active, .wp-block-button .wp-block-button__link:hover, .wp-block-button .wp-block-button__link:active { transform: none; }
}
.thecv-post__content hr, .thecv-post__content .wp-block-separator { border: 0; border-top: 1px solid var(--thecv-line); margin: 2.5rem 0; }
.thecv-post__content blockquote cite { display: block; margin-top: .5rem; font-style: normal; font-size: .85rem; color: var(--thecv-text-muted); }

/* ---- HEADER: centered uppercase link row ----
   Optional logo/name (left) and button (right) are absolutely placed so the menu
   stays optically centered whether they're on or off. */
.thecv-header { position: sticky; top: 0; z-index: 55; background: var(--thecv-bg); }
body.admin-bar .thecv-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .thecv-header { top: 46px; } }
html { scroll-padding-top: 5.5rem; }
.thecv-header__inner {
	position: relative;
	max-width: var(--thecv-max); margin: 0 auto;
	display: flex; align-items: center; justify-content: center;
	min-height: 72px;
	padding: 0 var(--thecv-pad);
}
.thecv-header__brand,
.thecv-header__cta { position: absolute; top: 50%; transform: translateY(-50%); }
.thecv-header__brand { left: var(--thecv-pad); }
.thecv-header__cta   { right: var(--thecv-pad); }
.thecv-header__brand a,
.thecv-header__brand .thecv-header__logo-text {
	font-family: var(--thecv-font-display); font-variant: normal;
	font-weight: 700; letter-spacing: -.025em; line-height: 1;
	font-size: 1.625rem; color: var(--thecv-text);
}
.thecv-header__brand .thecv-header__logo-text::after {
	content: ""; display: inline-block; width: 12px; height: 12px; margin-left: .2em;
	border-radius: 50%; background: var(--thecv-brand);
}
.thecv-header__brand .thecv-header__logo-text { text-transform: none; }

/* Logo image (Customizer): clamp height so any aspect ratio sits in the bar. */

.thecv-header__menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.thecv-header__menu a {
	font-family: var(--thecv-font-display);
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 3px;
	font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--thecv-header-link, var(--thecv-text)); transition: background-color .2s ease;
}
.thecv-header__menu a:hover,
.thecv-header__menu a:focus-visible { background: var(--thecv-highlight); color: var(--thecv-text); }
.thecv-header__menu .current-menu-item > a,
.thecv-header__menu .current_page_item > a { color: var(--thecv-text); background: var(--thecv-highlight); }

.thecv-header__toggle {
	display: none; background: var(--thecv-text); border: 0; cursor: pointer; color: var(--thecv-bg);
	width: 48px; height: 48px; padding: 0; border-radius: 999px;
	position: absolute; right: var(--thecv-pad); top: 50%; transform: translateY(-50%);
	z-index: 60;   /* above the full-screen mobile menu so it's always clickable to close */
	flex-direction: column; gap: 6px; align-items: center; justify-content: center;
}
.thecv-header__toggle-bar {
	display: block; width: 20px; height: 2px; border-radius: 1px; background: currentColor;
	transition: transform .25s ease, opacity .2s ease;
}
.thecv-header__toggle[aria-expanded="true"] .thecv-header__toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.thecv-header__toggle[aria-expanded="true"] .thecv-header__toggle-bar:nth-child(2) { opacity: 0; }
.thecv-header__toggle[aria-expanded="true"] .thecv-header__toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Dropdowns (menus two levels deep): open on hover, keyboard focus or tap (main.js). */
.thecv-header__menu > li { position: relative; }
.thecv-header__menu .menu-item-has-children > a::after {
	content: ""; display: inline-block; width: .38em; height: .38em; margin-left: .5em; vertical-align: .2em;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
.thecv-header__menu .sub-menu {
	position: absolute; top: calc(100% + .6rem); left: 50%; z-index: 70;
	display: flex; flex-direction: column; gap: .15rem; min-width: 13rem; padding: .6rem;
	background: var(--thecv-card); border: 2px solid var(--thecv-text); border-radius: var(--thecv-radius);
	box-shadow: 0 12px 32px color-mix(in srgb, var(--thecv-text) 12%, transparent);
	opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.thecv-header__menu .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.7rem; height: .7rem; } /* hover bridge */
.thecv-header__menu li:hover > .sub-menu,
.thecv-header__menu li:focus-within > .sub-menu,
.thecv-header__menu li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.thecv-header__menu li.is-closed > .sub-menu { opacity: 0; visibility: hidden; }
.thecv-header__menu .sub-menu a { display: flex; padding: 0 .7rem; font-size: .75rem; letter-spacing: .12em; white-space: nowrap; border-radius: 3px; }
.thecv-mobile-menu .sub-menu { display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0 0 1.25rem; }
.thecv-mobile-menu[data-open] .sub-menu a:not(.thecv-btn) { font-size: clamp(1.25rem, 5vw, 1.6rem); }

.thecv-mobile-menu { display: none; flex-direction: column; gap: 1.5rem; }
@media (max-width: 900px) {
	.thecv-header__inner { justify-content: flex-start; }
	.thecv-header__brand { position: static; transform: none; }
	.thecv-header__nav, .thecv-header__cta { display: none; }
	.thecv-header__toggle { display: flex; }
	.thecv-mobile-menu[data-open] {
		display: flex;
		position: fixed; inset: 0; z-index: 50;
		height: 100vh; height: 100svh;
		padding: 6.5rem var(--thecv-pad) 2rem;
		overflow-y: auto;
		background: var(--thecv-card);
	}
	.thecv-mobile-menu[data-open] > ul { display: flex; flex-direction: column; gap: 1.5rem; margin: 0 0 2.5rem; }
	.thecv-mobile-menu[data-open] a:not(.thecv-btn) {
		font-family: var(--thecv-font-display); color: var(--thecv-text);
		font-size: clamp(2rem, 9vw, 3rem); font-weight: 700; letter-spacing: -.03em; line-height: 1;
		display: inline-block; padding: .1em 0;
	}
	.thecv-mobile-menu[data-open] a:not(.thecv-btn):hover { background: var(--thecv-highlight); }
	.thecv-mobile-menu[data-open] > .thecv-btn { margin-top: auto; align-self: flex-start; }
	body.admin-bar .thecv-mobile-menu[data-open] { padding-top: calc(6.5rem + 46px); }
	body.thecv-menu-open { overflow: hidden; }
}

/* ---- CLIENTS: up to 4 hand-picked project cards, growing on hover ----
   Manual (image + optional tag + title + optional link, picked in the block). */
.thecv-clients__head { max-width: 48rem; margin: 0 auto clamp(3rem, 6vw, 5rem); text-align: center; }
.thecv-clients__heading { font-size: clamp(2.5rem, 6vw, 5.5rem); text-transform: uppercase; letter-spacing: -.02em; line-height: .95; margin: 0 0 1.5rem; }

.thecv-clients__grid { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 900px) {
	.thecv-clients__grid { flex-direction: row; align-items: stretch; height: clamp(420px, 42vw, 600px); }
}
.thecv-clients__card {
	position: relative; display: block; overflow: hidden; border-radius: var(--thecv-radius);
	min-height: 380px; flex: 1 1 0; cursor: pointer;
	opacity: 0; transform: translateY(20px);
	transition: flex-grow .7s cubic-bezier(.16,1,.3,1), opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
@media (min-width: 900px) {
	.thecv-clients__card:hover { flex-grow: 1.8; }
}
.thecv-clients__media { position: absolute; inset: 0; }
.thecv-clients__img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	filter: grayscale(1); transition: filter 1s ease, transform 1s ease;
}
.thecv-clients__img--ph { background: var(--thecv-placeholder); }
.thecv-clients__card:hover .thecv-clients__img { filter: grayscale(0); transform: scale(1.04); }
@media (max-width: 900px) {
	.thecv-clients__img { filter: grayscale(0); }   }
.thecv-clients__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(to bottom,
		color-mix(in srgb, var(--thecv-dark) 25%, transparent) 0%,
		transparent 45%,
		color-mix(in srgb, var(--thecv-dark) 88%, transparent) 100%);
}
.thecv-clients__tag {
	margin: 0; width: auto;
	position: absolute; top: 1.75rem; left: 1.75rem; z-index: 2;
	padding: .35rem 1rem; border: 1px solid color-mix(in srgb, var(--thecv-on-dark) 35%, transparent);
	border-radius: var(--thecv-pill); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--thecv-on-dark); backdrop-filter: blur(4px);
}
.thecv-clients__caption {
	position: absolute; z-index: 2; left: 1.75rem; right: 1.75rem; bottom: 1.75rem;
	display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
	color: var(--thecv-on-dark);
}
.thecv-clients__title { font-size: clamp(1.4rem, 2.4vw, 2rem); text-transform: uppercase; line-height: 1; margin: 0; }
.thecv-clients__hint {
	display: inline-flex; opacity: 0; transform: translateY(8px);
	transition: opacity .4s ease, transform .4s ease;
}
.thecv-clients__arrow { width: 22px; height: 22px; }
.thecv-clients__card:hover .thecv-clients__hint { opacity: 1; transform: translateY(0); }
.thecv-clients__cta { display: flex; justify-content: center; margin-top: clamp(2.5rem, 5vw, 4rem); }

/* Reveal: staggered fade-up. Triggered by .is-in-view (main.js IntersectionObserver). */
.thecv-clients.is-in-view .thecv-clients__card { opacity: 1; transform: none; }
.thecv-clients.is-in-view .thecv-clients__card:nth-child(1) { transition-delay: .05s; }
.thecv-clients.is-in-view .thecv-clients__card:nth-child(2) { transition-delay: .13s; }
.thecv-clients.is-in-view .thecv-clients__card:nth-child(3) { transition-delay: .21s; }
.thecv-clients.is-in-view .thecv-clients__card:nth-child(4) { transition-delay: .29s; }

@media (prefers-reduced-motion: reduce) {
	.thecv-clients__card,
	.thecv-clients__img,
	.thecv-clients__hint { opacity: 1; transform: none; transition: none; }
}

/* ---- HIGHLIGHT PROJECTS (thecv/highlights): Clients cards + a result line ---- */
.thecv-clients__text { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.thecv-clients__result {
	margin: 0; max-width: 30ch;
	font-family: var(--thecv-font-body); font-size: .95rem; font-weight: 400; line-height: 1.45;
	color: var(--thecv-on-dark); opacity: .9;
}

/* ---- FOOTER: statement headline + email + copyright ---- */
.thecv-footer {
	background: var(--thecv-bg); color: var(--thecv-text); text-align: center;
	padding: clamp(5rem, 10vw, 10rem) var(--thecv-pad) clamp(4rem, 8vw, 8rem);
}
.thecv-footer__inner {
	max-width: var(--thecv-max); margin: 0 auto;
	display: flex; flex-direction: column; align-items: center;
	border-top: 1px solid var(--thecv-line);
	padding-top: clamp(5rem, 10vw, 10rem);
}
.thecv-footer__heading {
	margin: 0 0 clamp(3rem, 6vw, 5rem);
	font-family: var(--thecv-font-display); font-weight: 800; font-synthesis: none;
	text-transform: uppercase; letter-spacing: -.05em; line-height: .8;
	font-size: clamp(3.5rem, 11vw, 10rem);
}
.thecv-footer__heading-main,
.thecv-footer__heading-accent { display: block; }
.thecv-footer__heading-accent {
	font-style: normal; text-transform: uppercase; color: var(--thecv-brand-large);
	margin-top: .08em;
}
.thecv-footer__email {
	font-family: var(--thecv-font-display); font-weight: 800; text-transform: uppercase;
	letter-spacing: -.04em; line-height: 1.1; font-size: clamp(1.5rem, 4.2vw, 3rem);
	padding-bottom: .5rem; max-width: 100%; overflow-wrap: anywhere;
	border-bottom: 2px solid color-mix(in srgb, var(--thecv-text) 20%, transparent);
	transition: border-color .5s ease, color .3s ease;
}
.thecv-footer__email:hover,
.thecv-footer__email:focus-visible { border-color: var(--thecv-brand); }
.thecv-footer__social { display: flex; gap: 1.25rem; margin-top: 2.5rem; }
.thecv-footer__social a { width: 20px; height: 20px; display: inline-block; opacity: .7; transition: opacity .25s, color .25s; }
.thecv-footer__social a:hover { opacity: 1; color: var(--thecv-brand-text); }
.thecv-footer__social .thecv-social-icon { width: 100%; height: 100%; object-fit: contain; display: block; }
.thecv-footer__nav { margin-top: 2.5rem; }
.thecv-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2rem; }
.thecv-footer__links a {
	font-family: var(--thecv-font-display); font-size: .75rem; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase; opacity: .7;
}
.thecv-footer__links a:hover { opacity: 1; color: var(--thecv-brand-text); }
.thecv-footer__copy {
	margin: clamp(3rem, 5vw, 4rem) 0 0;
	font-family: var(--thecv-font-display); font-weight: 800; text-transform: uppercase;
	letter-spacing: .4em; font-size: .75rem; line-height: 1.8; opacity: .35;
}

/* === Core block alignment overrides ===
   The theme doesn't ship a theme.json layout block, so core's .alignwide
   defaults to full-width. Constrain it here to match .thecv-container width
   so patterns visually align with the homepage's custom-block sections. */
.alignwide {
  max-width: var(--thecv-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--thecv-pad);
  padding-right: var(--thecv-pad);
  box-sizing: border-box;
}

/* .alignfull stays full viewport (hero needs viewport-wide bg).
   The Cover block's own padding handles inner content insets. */
.alignfull {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Generic fallback: catches any interactive element not styled below. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--thecv-focus);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Navigation links: header, mobile, footer */
.thecv-header__menu a:focus-visible,
.thecv-mobile-menu a:focus-visible,
.thecv-footer__links a:focus-visible {
	outline: 3px solid var(--thecv-focus);
	outline-offset: 4px;
	border-radius: 2px;
}

/* Footer social icons: round targets, round the outline corners */
.thecv-footer__social a:focus-visible {
	outline: 3px solid var(--thecv-focus);
	outline-offset: 4px;
	border-radius: 50%;
}

/* Buttons: pill and text variants */
.thecv-btn:focus-visible,
.wp-block-button .wp-block-button__link:focus-visible {
	outline: 3px solid var(--thecv-focus);
	outline-offset: 4px;
}

/* Header mobile toggle */
.thecv-header__toggle:focus-visible {
	outline: 3px solid var(--thecv-focus);
	outline-offset: 4px;
	border-radius: 4px;
}

/* === Single post layout === */
.thecv-post {
  padding-top: var(--thecv-section-y);
  padding-bottom: var(--thecv-section-y);
}
.thecv-post__inner {
  max-width: 48rem;
  margin: 0 auto;
}
.thecv-post__header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.thecv-post__category {
  margin: 0 0 1rem;
}
.thecv-post__title {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  margin: 0 0 1rem;
  line-height: 1.05;
}
.thecv-post__title em {
  font-style: normal; text-transform: uppercase;
  color: var(--thecv-brand-large);
}
.thecv-post__meta {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--thecv-text-muted);
}
.thecv-post__featured {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.thecv-post__featured-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
}
.thecv-post__content {
  font-size: 1.05rem;
  line-height: 1.75;
}
.thecv-post__content p { margin: 0 0 1.25rem; }
.thecv-post__content h2 {
  font-family: var(--thecv-font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 2.5rem 0 1rem;
}
.thecv-post__content h3 {
  font-family: var(--thecv-font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  margin: 2rem 0 0.75rem;
}
.thecv-post__content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2rem 0;
}
.thecv-post__content blockquote {
  border-left: 2px solid var(--thecv-brand);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--thecv-text-muted);
}
/* links */
.thecv-post__content a { color: var(--thecv-brand-text); text-decoration: underline; text-underline-offset: 3px; }
.thecv-post__content a:hover { color: var(--thecv-dark); }
/* lists */
.thecv-post__content ul, .thecv-post__content ol { margin: 0 0 1.5rem; padding-left: 1.4rem; }
.thecv-post__content ul li { list-style: disc; margin-bottom: .5rem; }
.thecv-post__content ol li { list-style: decimal; margin-bottom: .5rem; }
/* image captions */
.thecv-post__content figure { margin: 2rem 0; }
.thecv-post__content figcaption { font-size: .85rem; color: var(--thecv-text-muted); text-align: center; margin-top: .6rem; font-style: italic; }
/* columns */
.thecv-post__content .wp-block-columns { gap: clamp(1.5rem,3vw,2.5rem); margin: 2rem 0; }
/* tables: a Highlight (green) rule on top, a light green header row, thin lines between rows and columns and on the sides,
   small uppercase header labels, bold footer row, left caption. "Stripes" tints every other row.
   Written against .wp-block-table so the same rules style the editor. */
.wp-block-table,
.thecv-post__content figure.wp-block-table { margin: 2rem 0; overflow-x: auto; }
.wp-block-table table,
.thecv-post__content table {
  width: 100%; border-collapse: collapse; margin: 0; font-size: .95rem; line-height: 1.5;
  border-top: 3px solid var(--thecv-highlight); border-bottom: 1px solid var(--thecv-line);
}
.thecv-post__content > table { margin: 2rem 0; }
.wp-block-table th, .wp-block-table td,
.thecv-post__content th, .thecv-post__content td {
  border: 0; border-bottom: 1px solid var(--thecv-line);
  padding: .95rem 1.25rem; text-align: left; vertical-align: top; color: var(--thecv-text);
}

/* Thin lines between columns and on both outer sides; the first and last cells get the same
   inner padding as the others. */
.wp-block-table :is(th, td),
.thecv-post__content :is(th, td) { border-left: 1px solid var(--thecv-line); border-right: 1px solid var(--thecv-line); }
.wp-block-table :is(th, td):first-child,
.thecv-post__content :is(th, td):first-child { padding-left: 1.25rem; }
.wp-block-table :is(th, td):last-child,
.thecv-post__content :is(th, td):last-child { padding-right: 1.25rem; }
.wp-block-table thead, .thecv-post__content thead { border: 0; }
.wp-block-table thead th, .wp-block-table thead td,
.thecv-post__content thead th, .thecv-post__content thead td {
  font-family: var(--thecv-font-body); font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--thecv-text-muted);
  background: color-mix(in srgb, var(--thecv-highlight) 18%, transparent); padding-top: 1.1rem; padding-bottom: .8rem;
  border-bottom: 1px solid var(--thecv-line);
}
.wp-block-table tbody th, .thecv-post__content tbody th { font-weight: 600; }
.wp-block-table tfoot, .thecv-post__content tfoot { border: 0; }
.wp-block-table tfoot :is(th, td), .thecv-post__content tfoot :is(th, td) {
  font-weight: 600; border-top: 1px solid var(--thecv-text); border-bottom: 0;
}
.wp-block-table tbody tr:last-child :is(th, td),
.thecv-post__content tbody tr:last-child :is(th, td) { border-bottom: 0; }
.wp-block-table.is-style-stripes { border-bottom: 0; }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--thecv-bg-alt); }
.wp-block-table.is-style-stripes :is(th, td) { border-bottom: 0; }
.wp-block-table.is-style-stripes :is(th, td):first-child { padding-left: 1.25rem; }
.wp-block-table.is-style-stripes :is(th, td):last-child { padding-right: 1.25rem; }
.wp-block-table.is-style-stripes thead :is(th, td) { border-bottom: 1px solid var(--thecv-line); }
.wp-block-table .wp-element-caption,
.wp-block-table figcaption {
  font-size: .85rem; color: var(--thecv-text-muted); text-align: left; font-style: normal; margin-top: .75rem;
}
/* pullquote */
.thecv-post__content .wp-block-pullquote { border:0; border-top:2px solid var(--thecv-brand); border-bottom:2px solid var(--thecv-brand);
  padding:1.5rem 0; margin:2.5rem 0; text-align:center; }
.thecv-post__content .wp-block-pullquote p { font-family:var(--thecv-font-display); font-size:clamp(1.4rem,3vw,2rem);
  color:var(--thecv-text); font-style:normal; line-height:1.3; margin:0; }
.thecv-post__content .wp-block-pullquote cite { color:var(--thecv-text-muted); font-style:normal; font-size:.85rem; }
/* optional boxed Table-of-Contents helper */
.thecv-post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2.5rem 0;
}
.thecv-post__tag {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--thecv-text-muted);
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--thecv-line);
  border-radius: var(--thecv-pill);
}
.thecv-post__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: clamp(3rem, 6vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--thecv-line);
}
.thecv-post__nav-link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--thecv-text);
  transition: color 200ms ease;
}
.thecv-post__nav-link--next {
  text-align: right;
  align-items: flex-end;
}
.thecv-post__nav-link:hover {
  color: var(--thecv-brand-text);
}
.thecv-post__nav-title {
  font-family: var(--thecv-font-display);
  font-size: 1.1rem;
  line-height: 1.3;
}

/* Stack post nav on mobile */
@media (max-width: 600px) {
  .thecv-post__nav {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .thecv-post__nav-link--next {
    text-align: left;
    align-items: flex-start;
  }
}

/* === 404 page === */
.thecv-404 {
  padding-top: clamp(4rem, 10vw, 8rem);
  padding-bottom: clamp(4rem, 10vw, 8rem);
  text-align: center;
}

.thecv-404__inner {
  max-width: 38rem;
  margin: 0 auto;
}

.thecv-404__num {
  display: block;
  font-size: clamp(6rem, 18vw, 13rem);
  line-height: 0.8;
  opacity: 0.1;
  color: var(--thecv-text);
  margin: 0 0 0.5rem;
}

.thecv-404__h {
  font-size: clamp(3.5rem, 8vw, 6rem);
  margin: 0 0 1.5rem;
  line-height: 1;
}

.thecv-404__h em {
  font-style: normal; text-transform: uppercase;
  color: var(--thecv-brand-large);
}

.thecv-404__lede {
  font-size: 1.05rem;
  color: var(--thecv-text-muted);
  line-height: 1.6;
  margin: 0 0 2.5rem;
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto;
}

.thecv-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}

@media (max-width: 600px) {
  .thecv-404__actions { flex-direction: column; gap: 0.5rem; }
}

/* === Bare core blocks inside page content ===
   For pages where the buyer types content directly (no pattern wrapper),
   give blocks the theme container + typography baseline so they look
   intentional instead of browser-default. page.php wraps the_content() in
   .thecv-page-content. The CV patterns (alignwide/alignfull) opt out below. */

.thecv-page-content {
  padding-top: var(--thecv-section-y);
  padding-bottom: var(--thecv-section-y);
}

.thecv-page-content > * {
  max-width: var(--thecv-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--thecv-pad);
  padding-right: var(--thecv-pad);
}

/* Full-bleed patterns and Cover blocks override the max-width */
.thecv-page-content > .alignfull,
.thecv-page-content > .wp-block-cover.alignfull,
.thecv-page-content > .thecv-clients,
.thecv-page-content > .thecv-namehero,
.thecv-page-content > .thecv-cases,
.thecv-page-content > .thecv-aboutme,
.thecv-page-content > .thecv-skills,
.thecv-page-content > .thecv-langs,
.thecv-page-content > .thecv-refs,
.thecv-page-content > .thecv-contactb,
.thecv-page-content > .thecv-casehero,
.thecv-page-content > .thecv-stack,
.thecv-page-content > .thecv-steps,
.thecv-page-content > .thecv-profile,
.thecv-page-content > .thecv-hobbies,
.thecv-page-content > .thecv-certs,
.thecv-page-content > .thecv-pbanner,
.thecv-page-content > .thecv-logos-row {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* A page-header as the first block sits FLUSH to the top so its image fills up
   behind the transparent overlay nav (cancel the .thecv-page-content top padding,
   no cream gap above the image). */
.thecv-page-content > .thecv-namehero:first-child,
.thecv-page-content > .thecv-casehero:first-child,
.thecv-page-content > .thecv-profile:first-child {
  margin-top: calc(-1 * var(--thecv-section-y));
}

/* Core blocks between The CV blocks (wrapped by thecv_wrap_prose_runs()) read as an article column. */
.thecv-page-prose,
.thecv-page-content > .thecv-page-prose {
  max-width: calc(48rem + 2 * var(--thecv-pad));
  margin-left: auto;
  margin-right: auto;
  padding: var(--thecv-prose-y, clamp(2.5rem, 5vw, 4rem)) var(--thecv-pad);
}
.thecv-page-prose > :first-child { margin-top: 0; }
.thecv-page-prose > :last-child { margin-bottom: 0; }
.thecv-page-content > .thecv-page-prose:first-child { padding-top: 0; }
.thecv-page-content > .thecv-page-prose:last-child { padding-bottom: 0; }

/* Plain pages (no The CV blocks): same article layout as posts, no meta line. */
.thecv-post--page .thecv-post__header { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Wide alignment matches our --thecv-max container */
.thecv-page-content > .alignwide {
  max-width: var(--thecv-max);
}

/* Bare paragraphs */
.thecv-page-content > .wp-block-paragraph,
.thecv-page-content > p {
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 1.25rem;
  max-width: 38rem;
}

/* Headings inherit display font */
.thecv-page-content > .wp-block-heading,
.thecv-page-content > h1,
.thecv-page-content > h2,
.thecv-page-content > h3 {
  font-family: var(--thecv-font-display);
  margin: 2.5rem 0 1rem;
  max-width: 38rem;
}

.thecv-page-content > h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1.05; }
.thecv-page-content > h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.1; }
.thecv-page-content > h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.2; }

/* Bare images */
.thecv-page-content > .wp-block-image {
  margin: 2rem 0;
}

.thecv-page-content > .wp-block-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Bare lists */
.thecv-page-content > .wp-block-list,
.thecv-page-content > ul,
.thecv-page-content > ol {
  margin: 0 0 1.5rem;
  padding-left: 1.5rem;
  max-width: 38rem;
}

/* Bare list items breathe */
.thecv-page-content > ul li,
.thecv-page-content > ol li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* === Columns vertical alignment (Image+Text Split, Bio) ===
   Core's columns stylesheet (wp-includes/blocks/columns/style.css) is still
   loaded: it provides display:flex, equal-width distribution, explicit
   per-column flex-basis, and mobile stacking, so we must NOT re-declare those
   (a blanket `flex:1` would flatten the Bio's 45/55 and the split's 50/50).
   BUT that same core file resets `.wp-block-columns { align-items: initial
   !important }`, and its own `.are-vertically-aligned-*` rules carry no
   !important: so the reset wins and vertical alignment silently dies. We
   re-assert the mapping at higher specificity WITH !important so the patterns
   actually center image and text against each other. */
.thecv-page-content .wp-block-columns.are-vertically-aligned-top {
  align-items: flex-start !important;
}
.thecv-page-content .wp-block-columns.are-vertically-aligned-center {
  align-items: center !important;
}
.thecv-page-content .wp-block-columns.are-vertically-aligned-bottom {
  align-items: flex-end !important;
}

/* ==========================================================================
   Accessibility helpers
   ========================================================================== */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.skip-link:focus {
	clip: auto; clip-path: none; height: auto; width: auto; margin: 0;
	top: 1rem; left: 1rem; z-index: 100000; padding: .75rem 1.25rem;
	background: var(--thecv-text); color: var(--thecv-bg);
	font-weight: 600; text-decoration: none; border-radius: 2px;
}

/* ==========================================================================
   Archive / search / index lists
   ========================================================================== */
.thecv-archive { padding-top: calc(var(--thecv-section-y) + 3rem); }
.thecv-archive__header { max-width: 52rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.thecv-archive__heading { font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1; margin: .35em 0 .4em; }
.thecv-archive__desc { color: var(--thecv-text-soft); max-width: 40rem; }
.thecv-archive__list { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.thecv-archive__item {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem;
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--thecv-line);
}
@media (min-width: 760px) {
	.thecv-archive__item:has(.thecv-archive__thumb) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; }
}
.thecv-archive__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.thecv-archive__meta { color: var(--thecv-text-muted); margin: 0 0 .5rem; }
.thecv-archive__title { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.1; margin: 0 0 .6rem; }
.thecv-archive__title a { color: inherit; text-decoration: none; }
.thecv-archive__title a:hover, .thecv-archive__title a:focus-visible { color: var(--thecv-brand-text); }
.thecv-archive__excerpt { color: var(--thecv-text-soft); }
.thecv-archive__empty { display: grid; gap: 1.5rem; max-width: 36rem; }

.thecv-pagination { margin-top: clamp(2rem, 5vw, 3.5rem); }
.thecv-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.thecv-pagination .page-numbers {
	display: inline-flex; min-width: 2.75rem; height: 2.75rem; padding: 0 .9rem;
	align-items: center; justify-content: center; text-decoration: none;
	color: var(--thecv-text); border: 1px solid var(--thecv-line);
}
.thecv-pagination .page-numbers.current,
.thecv-pagination a.page-numbers:hover { background: var(--thecv-text); color: var(--thecv-bg); border-color: var(--thecv-text); }
.thecv-page-links { margin-top: 2rem; display: flex; gap: .5rem; }

/* Search form */
.thecv-search-form { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 36rem; }
.thecv-search-form__input {
	flex: 1 1 14rem; min-height: 3rem; padding: .75rem 1rem; font: inherit;
	color: var(--thecv-text); background: transparent;
	border: 1px solid color-mix(in srgb, var(--thecv-text) 35%, transparent);
}
.thecv-search-form__input:focus-visible { outline: 3px solid var(--thecv-focus); outline-offset: 2px; }

/* ==========================================================================
   Comments
   ========================================================================== */
.thecv-comments { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--thecv-line); }
.thecv-page-content > .thecv-comments { max-width: 48rem; margin-left: auto; margin-right: auto; padding-left: var(--thecv-pad); padding-right: var(--thecv-pad); }
.thecv-comments__title, .thecv-comments__reply-title { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 1.5rem; }
.thecv-comments__list, .thecv-comments__list .children { list-style: none; margin: 0; padding: 0; }
.thecv-comments__list .children { padding-left: clamp(1rem, 4vw, 2.5rem); }
.thecv-comments__list .comment-body { padding: 1.25rem 0; border-bottom: 1px solid var(--thecv-line); }
.thecv-comments__list .comment-author { display: flex; align-items: center; gap: .75rem; font-weight: 600; }
.thecv-comments__list .comment-author .avatar { border-radius: 50%; }
.thecv-comments__list .comment-metadata { font-size: .85rem; color: var(--thecv-text-muted); margin: .25rem 0 .75rem; }
.thecv-comments__list .comment-metadata a { color: inherit; }
.thecv-comments__list .reply a { font-size: .85rem; color: var(--thecv-brand-text); }
.thecv-comments__form { margin-top: 2.5rem; }
.thecv-comments__form label { display: block; font-weight: 600; margin-bottom: .35rem; }
.thecv-comments__form input[type="text"],
.thecv-comments__form input[type="email"],
.thecv-comments__form input[type="url"],
.thecv-comments__form textarea {
	width: 100%; padding: .75rem 1rem; font: inherit; color: var(--thecv-text);
	background: transparent; border: 1px solid color-mix(in srgb, var(--thecv-text) 35%, transparent);
}
.thecv-comments__form p { margin: 0 0 1rem; }
.thecv-comments__closed { color: var(--thecv-text-muted); }

/* =====================================================================
   NAME HERO (thecv/name-hero): three variants: classic / script / stacked
   ===================================================================== */
.thecv-namehero {
	--nh-bg: var(--thecv-bg); --nh-fg: var(--thecv-text);
	--nh-soft: color-mix(in srgb, var(--thecv-text) 72%, transparent);
	position: relative; overflow: hidden;
	background: var(--nh-bg); color: var(--nh-fg);
}
/* A dark hero right under the header: paint the header to match so they read as one band. */

.thecv-namehero__inner {
	max-width: var(--thecv-max); margin: 0 auto;
	padding: clamp(3rem, 7vw, 5rem) var(--thecv-pad) clamp(4rem, 8vw, 6rem);
	text-align: center;
}
.thecv-namehero__name {
	margin: 0; font-family: var(--thecv-font-display); font-weight: 800; font-synthesis: none;
	color: inherit;
}
.thecv-namehero__tagline {
	max-width: 42rem; margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
	font-family: var(--thecv-font-body); font-weight: 300;
	font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--nh-soft);
}

/* ---- Script: bold first name + italic script last name (Josie Allison) ---- */

/* ---- Stacked: name, fanned cards, big muted role (Spencer Gabor) ---- */

/* =====================================================================
   CASE STUDIES (thecv/case-studies): technical results cards
   Full-height screenshot on one side, logo/badge/type, summary, stats.
   ===================================================================== */

.thecv-cases__desc {
	font-size: 1.05rem;
	line-height: 1.6;
}

.thecv-cases__list {
	display: flex;
	flex-direction: column;
}
.thecv-cases__card {
	display: grid;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.thecv-cases__card.is-shown,
html:not(.js) .thecv-cases__card { opacity: 1; transform: none; }

/* Screenshot fills the card's full height. */
.thecv-cases__media {
	position: relative; overflow: hidden;
	background: color-mix(in srgb, var(--thecv-text) 6%, var(--thecv-bg));
}
.thecv-cases__img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; display: block;
	transition: object-position 7s ease-in-out;
}
/* Tall full-page screenshots pan top → bottom on hover. */
.thecv-cases__img--ph {
	display: flex; align-items: center; justify-content: center;
	margin: 1.25rem; inset: 0; width: auto; height: auto;
	border: 1.5px dashed color-mix(in srgb, var(--thecv-text) 20%, transparent); border-radius: var(--thecv-radius);
	font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--thecv-text-muted);
}

.thecv-cases__body {
	flex-direction: column;
	justify-content: space-between;
	gap: 2.25rem;
	padding: clamp(1.75rem, 3.5vw, 3.25rem);
}
.thecv-cases__meta {
	display: flex;
}
.thecv-cases__title { margin: 0; line-height: 1; }
.thecv-cases__name {
	font-family: var(--thecv-font-display); font-weight: 800; font-synthesis: none;
	font-size: clamp(1.4rem, 2vw, 1.75rem); text-transform: uppercase; letter-spacing: -.02em; color: var(--thecv-text);
}
.thecv-cases__logo { display: block; max-height: 44px; max-width: 200px; width: auto; height: auto; }
.thecv-cases__badge {
	display: inline-block; padding: .35rem .85rem; border-radius: var(--thecv-pill);
	background: var(--thecv-highlight); color: var(--thecv-dark);
	font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
}
.thecv-cases__type {
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.thecv-cases__blurb {
	margin: 0;
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	line-height: 1.6;
}

.thecv-cases__stats {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
}
.thecv-cases__stats li {
	display: flex;
	flex-direction: column;
}
.thecv-cases__stat-value {
	font-family: var(--thecv-font-display);
	font-synthesis: none;
	line-height: 1.05;
}
.thecv-cases__stat-label {
	line-height: 1.4;
}

.thecv-cases__link {
	font-family: var(--thecv-font-display);
	font-weight: 600;
	border-bottom: 1px solid color-mix(in srgb, var(--thecv-text) 25%, transparent);
	transition: color .25s, border-color .25s;
}
.thecv-cases__link:hover, .thecv-cases__link:focus-visible { color: var(--thecv-brand-text); border-color: var(--thecv-brand); }

@media (max-width: 900px) {
	.thecv-cases__card { grid-template-columns: 1fr; min-height: 0; }
	.thecv-cases--alternate .thecv-cases__card:nth-child(even) .thecv-cases__media { order: 0; }
	/* On phones the whole screenshot shows (no cropping): it keeps its own proportions and only a very tall
	   one is scaled down to fit. A card without an image keeps the dashed placeholder box. */
	.thecv-cases__media { aspect-ratio: auto; }
	.thecv-cases__media:has(.thecv-cases__img--ph) { aspect-ratio: 16 / 11; }
	.thecv-cases__img:not(.thecv-cases__img--ph) { position: static; height: auto; max-height: 36rem; object-fit: contain; }
}
@media (prefers-reduced-motion: reduce) {
	.thecv-cases__card { opacity: 1; transform: none; transition: none; }
	.thecv-cases__img { transition: none; }
}

/* =====================================================================
   ABOUT: statement + optional portrait (thecv/about-intro)
   ===================================================================== */
.thecv-aboutme__inner { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
.thecv-aboutme--media .thecv-aboutme__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.thecv-aboutme__heading {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	font-size: clamp(2.5rem, 5.2vw, 4.75rem); line-height: .98; letter-spacing: -.04em; text-transform: uppercase;
}
.thecv-aboutme__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.5rem clamp(2rem, 4vw, 3rem); }
.thecv-aboutme__cols p { margin: 0; font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 300; line-height: 1.65; color: var(--thecv-text-soft); }
.thecv-aboutme__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); }
.thecv-aboutme__tags { display: flex; flex-wrap: wrap; gap: .6rem; }
.thecv-aboutme__tags li {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .4rem 1rem; border-radius: var(--thecv-pill);
	background: var(--thecv-dark); color: var(--thecv-bg);
	font-family: var(--thecv-font-display); font-size: .66rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; line-height: 1.4;
}
.thecv-aboutme__link {
	display: inline-flex; align-items: center; gap: .75rem;
	font-family: var(--thecv-font-display); font-size: .85rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
	color: var(--thecv-text);
}
.thecv-aboutme__ctas.wp-block-buttons { margin: 0; }
.thecv-aboutme__ctas .wp-block-button { display: flex; margin: 0; }
.thecv-aboutme__link span { transition: transform .3s ease; }
.thecv-aboutme__link:hover span, .thecv-aboutme__link:focus-visible span { transform: translateX(6px); }
.thecv-aboutme__link:hover { color: var(--thecv-brand-text); }

/* Portrait */
.thecv-aboutme__media {
	position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--thecv-radius);
	background: color-mix(in srgb, var(--thecv-highlight) 25%, var(--thecv-bg));
}
.thecv-aboutme__media .thecv-aboutme__img { width: 100%; height: 100%; object-fit: cover; transition: filter .7s ease, transform .7s ease; }
.thecv-aboutme__media:hover .thecv-aboutme__img { transform: scale(1.03); }

/* No portrait → one centered column */
.thecv-aboutme--centered .thecv-aboutme__inner { max-width: 60rem; text-align: center; }
.thecv-aboutme--centered .thecv-aboutme__cols { max-width: 48rem; margin: 0 auto; }
.thecv-aboutme--centered .thecv-aboutme__foot,
.thecv-aboutme--centered .thecv-aboutme__tags,
.thecv-aboutme--centered .thecv-aboutme__ctas { justify-content: center; }
.thecv-aboutme--centered .thecv-aboutme__foot { flex-direction: column; }

@media (max-width: 900px) {
	.thecv-aboutme--media .thecv-aboutme__inner { grid-template-columns: 1fr; }
	.thecv-aboutme__media { max-width: 28rem; width: 100%; justify-self: center; }   }
@media (prefers-reduced-motion: reduce) {
	.thecv-aboutme__img, .thecv-aboutme__link span { transition: none; }
}

/* =====================================================================
   SKILLS: name + % + thin progress bar (thecv/skills) Bars fill once .is-in-view lands.
   ===================================================================== */
.thecv-skills { border-top: 0; }

.thecv-skills__heading {
	margin: 0;
}
.thecv-skills__desc {
	margin: 1.25rem 0 0;
	font-size: 1.1rem;
	font-weight: 300;
	line-height: 1.6;
}
.thecv-skills__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.thecv-skills__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .85rem; }
.thecv-skills__name {
	margin: 0;
	font-family: var(--thecv-font-display);
	font-synthesis: none;
}
.thecv-skills__pct {
	font-family: var(--thecv-font-display);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.thecv-skills__bar {
	position: relative;
	overflow: hidden;
}
.thecv-skills__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--level, 0%);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.3s cubic-bezier(.2,.8,.2,1);
	transition-delay: calc(var(--i, 0) * 80ms + 200ms);
}
.thecv-skills__item.is-filled .thecv-skills__fill { transform: scaleX(1); }
.thecv-skills__fill { transition-property: transform, background-color, filter; }
.thecv-skills__item:hover .thecv-skills__fill { transition-delay: 0ms; }

@media (max-width: 900px) {
	.thecv-skills__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.thecv-skills__list{ grid-template-columns: 1fr; gap: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
	.thecv-skills__fill { transform: none; transition: none; }
}
/* No-JS fallback: bars filled. main.js adds .js to <html>. */
html:not(.js) .thecv-skills__fill { transform: none; }

/* =====================================================================
   LANGUAGES (thecv/languages)
   ===================================================================== */
.thecv-langs__list {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Level label sits ABOVE the language visually; source order keeps dt → dd for screen readers. */
.thecv-langs__item {
	display: flex;
}
.thecv-langs__level {
	margin: 0;
	font-family: var(--thecv-font-display);
}
.thecv-langs__name {
	font-family: var(--thecv-font-display);
	font-synthesis: none;
}
/* Directly under Skills: read as one section, no double gap. */
.thecv-skills + .thecv-langs { padding-top: 0; }
@media (max-width: 560px) {
	.thecv-langs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- NAME HERO: Split (title left, intro + buttons right; relace.ai-style) ---- */
.thecv-namehero--split .thecv-namehero__inner {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	text-align: left;
}
.thecv-namehero--split .thecv-namehero__name {
	font-weight: 400; font-size: clamp(3rem, 6.4vw, 6rem); line-height: 1.02; letter-spacing: -.045em;
	text-transform: none;
}
.thecv-namehero--split .thecv-namehero__tagline {
	margin: 0;
	text-align: left;
}
.thecv-namehero__ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }

@media (max-width: 900px) {
	.thecv-namehero--split .thecv-namehero__inner { grid-template-columns: 1fr; }
}

/* ---- HOBBIES (thecv/hobbies): same cards as Highlight projects ---- */
.thecv-hobbies__intro { flex-basis: 100%; margin: 0; max-width: 40rem; font-size: 1.05rem; line-height: 1.6; color: var(--thecv-text-soft); }
.thecv-hobbies__tile { filter: none; }
.thecv-hobbies__tile--0 { background: var(--thecv-dark); }
.thecv-hobbies__tile--1 { background: var(--thecv-brand); }
.thecv-hobbies__tile--2 { background: color-mix(in srgb, var(--thecv-highlight) 70%, var(--thecv-dark)); }
.thecv-hobbies__tile--3 { background: var(--thecv-text); }

/* ---- HIGHLIGHTS: compact one-line heading ("Recent projects") ---- */
.thecv-clients--compact .thecv-clients__head {
	max-width: none; text-align: left;
	display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.thecv-clients--compact .thecv-clients__heading { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1; }
/* Right under the hero: pull it up so the projects read as part of the opening screen. */
.thecv-namehero + .thecv-clients--compact { padding-top: 0; }

/* =====================================================================
   REFERENCES (thecv/references)
   ===================================================================== */
.thecv-refs__heading {
	margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.thecv-refs__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.thecv-refs--cols-1 .thecv-refs__grid { grid-template-columns: 1fr; }
.thecv-refs__card {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.thecv-refs__quote { margin: 0; flex: 1; }
.thecv-refs__quote p {
	margin: 0;
	font-synthesis: none;
}
.thecv-refs__foot {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}
.thecv-refs__who { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.thecv-refs__name {
	font-style: normal;
	font-family: var(--thecv-font-display);
}
.thecv-refs__role {
	font-family: var(--thecv-font-display);
}
.thecv-refs__contact { display: flex; gap: .5rem; flex-shrink: 0; }
.thecv-refs__contact a {
	width: 40px; height: 40px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--thecv-text) 6%, transparent); color: var(--thecv-text);
	transition: background .25s ease, color .25s ease;
}
.thecv-refs__contact a:hover, .thecv-refs__contact a:focus-visible { background: var(--thecv-brand); color: var(--thecv-on-dark); }
.thecv-refs__contact svg { width: 14px; height: 14px; }
/* Directly under Languages / Skills: one continuous section. */
.thecv-langs + .thecv-refs, .thecv-skills + .thecv-refs { padding-top: 0; }
@media (max-width: 780px) {
	.thecv-refs__grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   CONTACT BANNER (thecv/contact-banner): full-width band: big title, then info | form
   ===================================================================== */
.thecv-contactb {
	--cb-bg: var(--thecv-bg);
	--cb-fg: var(--thecv-text);
	--cb-soft: var(--thecv-text-soft);
	--cb-line: color-mix(in srgb, var(--thecv-text) 25%, transparent);
	color: var(--cb-fg);
}
.thecv-contactb__heading {
	margin: 0 0 1.25rem;
	color: inherit;
	font-weight: 700;
}
.thecv-contactb__grid {
	display: grid;
}

/* Info column */
.thecv-contactb__intro {
	margin: 0;
	font-size: clamp(1.05rem, 1.35vw, 1.2rem);
}
.thecv-contactb__email { display: flex; flex-direction: column; gap: .5rem; margin-top: clamp(2rem, 4vw, 3rem); }
.thecv-contactb__label { font-size: .85rem; color: var(--cb-soft); }
.thecv-contactb__email a {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	align-self: flex-start;
	max-width: 100%;
	overflow-wrap: anywhere;
	font-family: var(--thecv-font-display);
	color: inherit;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) left bottom / 100% 2px no-repeat;
	padding-bottom: .15em;
	transition: background-size .35s ease;
}
.thecv-contactb__email a svg { flex: none; width: .6em; height: .6em; transition: transform .25s ease; }
.thecv-contactb__email a:hover, .thecv-contactb__email a:focus-visible { background-size: 0 2px; }
.thecv-contactb__email a:hover svg { transform: translate(3px, -3px); }
.thecv-contactb__socials {
	display: flex;
	flex-wrap: wrap;
	margin: clamp(2rem, 4vw, 2.75rem) 0 0;
	padding: 0;
	list-style: none;
}
.thecv-contactb__socials a {
	display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1rem; border-radius: var(--thecv-pill);
	border: 1.5px solid var(--cb-fg); color: inherit; text-decoration: none;
	font-family: var(--thecv-font-display); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	transition: background .25s ease, color .25s ease;
}
.thecv-contactb__socials svg { width: 11px; height: 11px; }
.thecv-contactb__socials a:hover, .thecv-contactb__socials a:focus-visible { background: var(--cb-fg); color: var(--cb-bg); }

/* Form column: no card, underline-only fields */
.thecv-contactb__form-title { margin: 0 0 1.25rem; font-family: var(--thecv-font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }

.thecv-contactb__form label {
	display: block;
	color: var(--cb-fg);
}
.thecv-contactb__form label br { display: none; }
.thecv-contactb__form .wpcf7-form-control-wrap {
	display: block;
}
.thecv-contactb__form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.thecv-contactb__form textarea,
.thecv-contactb__form select {
	width: 100%; box-sizing: border-box; padding: .7rem 0; border: 0; border-bottom: 1.5px solid var(--cb-line); border-radius: 0;
	background: transparent; color: var(--cb-fg); font: inherit; font-size: 1.05rem; letter-spacing: 0; text-transform: none;
	transition: border-color .25s ease;
}

.thecv-contactb__form input:focus, .thecv-contactb__form textarea:focus, .thecv-contactb__form select:focus {
	outline: none; border-bottom-color: var(--cb-fg);
}
/* Send button: primary shape, highlight fill (text color on hover). */
.thecv-contactb__form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	border: 0;
	cursor: pointer;
	background: var(--thecv-highlight);
	color: var(--thecv-text);
	line-height: 1;
	transition: background .25s ease, color .25s ease;
}
.thecv-contactb__form input[type="submit"]:hover,
.thecv-contactb__form input[type="submit"]:focus-visible { background-color: var(--thecv-text); color: var(--thecv-bg); }
.thecv-contactb__form .wpcf7-spinner { margin: 0 0 0 .75rem; vertical-align: middle; }
.thecv-contactb__form .wpcf7-not-valid-tip { margin-top: .4rem; font-size: .8rem; letter-spacing: 0; text-transform: none; color: var(--thecv-error); }
.thecv-contactb__form .wpcf7 form .wpcf7-response-output { margin: 1rem 0 0; padding: .75rem 1rem; border-radius: var(--thecv-radius); font-size: .9rem; }
/* No form picked: only the text column, centered. */
.thecv-contactb--solo .thecv-contactb__grid {
	justify-content: center;
	text-align: center;
}
.thecv-contactb--solo .thecv-contactb__heading,
.thecv-contactb--solo .thecv-contactb__intro { margin-left: auto; margin-right: auto; }

.thecv-contactb--solo .thecv-contactb__email a { align-self: center; }

.thecv-contactb__form .hidden-fields-container { display: none; }
/* Editor only: a light stand-in for the real form. */
.thecv-contactb__preview { pointer-events: none; }
.thecv-contactb__mock-note { margin: 0 0 1.25rem; font-size: .85rem; color: var(--cb-soft); }
.thecv-contactb__mock span { display: block; height: 2.75rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--cb-line); }
.thecv-contactb__mock .thecv-contactb__mock-area { height: 5.5rem; }
.thecv-contactb__mock i { display: block; width: 8rem; height: 2.75rem; border-radius: var(--thecv-pill); background: var(--cb-fg); opacity: .85; }
.thecv-contactb__hint { margin: 1rem 0 0; font-size: .85rem; line-height: 1.5; color: var(--cb-soft); }

/* Sits flush on the footer when it's the last block. */
.thecv-page-content > .thecv-contactb:last-child { margin-bottom: calc(-1 * var(--thecv-section-y)); }

@media (max-width: 900px) {
	
}

/* Same box as .thecv-container so the columns line up with the page content above. */
.thecv-footer--simple { text-align: left; padding: 0; border-radius: var(--thecv-radius) var(--thecv-radius) 0 0; overflow: hidden; }
.thecv-footer--simple .thecv-footer__inner {
	display: block; align-items: initial;
	border-top: 0; padding: 0 var(--thecv-pad);
}
.thecv-footer__top {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.5rem clamp(2rem, 4vw, 4rem);
	padding: clamp(3.5rem, 6vw, 5rem) 0 clamp(3rem, 5vw, 4rem);
	border-top: 1px solid var(--thecv-line);
}
.thecv-footer__brand { max-width: 24rem; }
.thecv-footer__name,
.thecv-footer__name .thecv-header__logo-text {
	font-family: var(--thecv-font-display); font-variant: normal; font-weight: 700; font-synthesis: none;
	font-size: 1.625rem; letter-spacing: -.025em; color: var(--thecv-text);
}
.thecv-footer__blurb { margin: 1rem 0 0; font-size: .95rem; line-height: 1.6; color: var(--thecv-text-soft); }
.thecv-footer__col-title {
	margin: 0 0 1rem; font-family: var(--thecv-font-display); font-size: 1rem; font-weight: 700;
	letter-spacing: 0; text-transform: none; color: var(--thecv-text-muted);
}
.thecv-footer__list { display: flex; flex-direction: column; gap: 0; font-size: 1.0625rem; color: var(--thecv-text); }
.thecv-footer__list a { display: inline-flex; align-items: center; min-height: 40px; color: var(--thecv-text); overflow-wrap: anywhere; transition: color .2s ease; }
.thecv-footer__list a:hover, .thecv-footer__list a:focus-visible { color: var(--thecv-brand-text); }
/* Social links as icons (a custom uploaded icon is an <img>, sized the same). */
.thecv-footer__bottom {
	display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
	padding: 1.5rem 0 2rem; border-top: 0;
	font-size: .875rem; color: var(--thecv-text-muted);
}
.thecv-footer--simple .thecv-footer__copy { margin: 0; font-family: inherit; font-weight: 400; letter-spacing: 0; text-transform: none; opacity: 1; font-size: .875rem; line-height: 1.5; }
.thecv-footer__top-link { display: inline-flex; align-items: center; gap: .4em; min-height: 40px; color: var(--thecv-text); font-weight: 600; }
.thecv-footer__top-link svg { width: 1em; height: 1em; }
/* Giant site-name wordmark, fitted to the footer width (CSS estimate from character count, refined by main.js). */
.thecv-footer__wordmark { container-type: inline-size; padding: 0 0 clamp(1rem, 2vw, 2rem); overflow: hidden; }
.thecv-footer__wordmark span {
	display: block; white-space: nowrap; font-family: var(--thecv-font-display); font-weight: 700; letter-spacing: -.033em; line-height: .85;
	font-size: calc(171cqw / var(--thecv-chars, 12)); color: var(--ft-fg, var(--thecv-text)); user-select: none;
}
.thecv-footer__wordmark span { text-transform: none; }
.thecv-footer__top-link:hover { color: var(--thecv-brand-text); }
@media (max-width: 900px) {
	.thecv-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.thecv-footer__top { grid-template-columns: 1fr; }
}

/* =====================================================================
   CASE STUDY HERO (thecv/case-hero): "spotlight" with ONE image
   ===================================================================== */
.thecv-casehero { padding: clamp(1.5rem, 3vw, 3rem) 0 clamp(4rem, 8vw, 7rem); overflow: hidden; }
.thecv-casehero__grid {
	max-width: var(--thecv-max); margin: 0 auto; padding: 0 var(--thecv-pad);
	display: grid; grid-template-columns: minmax(0, 1fr);
	align-items: start; gap: clamp(1.25rem, 2vw, 1.75rem);
}
.thecv-casehero__title {
	margin: 0; font-family: var(--thecv-font-display); font-weight: 700; color: var(--thecv-text);
	font-size: clamp(1.625rem, 4.6vw, 4.5rem); line-height: 1; letter-spacing: -.025em; text-wrap: balance;
	text-transform: none;
}
/* Highlighted words in the project title: the accent color only (no italic, no capitals), so they match the rest of the title. */
.thecv-casehero__title em,
.thecv-casehero__title i {
	font-family: inherit; font-style: normal; font-weight: inherit;
	text-transform: none; letter-spacing: inherit;
	color: var(--thecv-brand-large);
}
.thecv-casehero__desc { margin: 1.5rem 0 0; max-width: 38rem; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.4; color: var(--thecv-text); }
.thecv-casehero__ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.thecv-casehero__facts { margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(.75rem, 1.6vw, 1.25rem); }
.thecv-casehero__facts > div { container-type: inline-size; min-width: 0; min-height: clamp(8rem, 14vw, 12.5rem); display: grid; align-content: space-between; gap: 1rem; padding: clamp(1rem, 2vw, 1.75rem); border-radius: var(--thecv-radius); background: var(--thecv-mint); }
.thecv-casehero__facts dt { font-family: var(--thecv-font-display); font-weight: 700; font-size: clamp(2rem, 22cqw, 8rem); overflow-wrap: anywhere; text-wrap: balance; line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--thecv-text); }
.thecv-casehero__facts dd { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--thecv-text); }

/* One screenshot in a plain card. */
.thecv-casehero__media { display: flex; justify-content: center; }
.thecv-casehero__shot { position: relative; width: 100%; max-width: none; }
.thecv-casehero__card { position: relative; overflow: hidden; border-radius: var(--thecv-radius); background: var(--thecv-sand); }
.thecv-casehero__viewport { position: relative; aspect-ratio: 21 / 8; overflow: hidden; }
@media (max-width: 700px) { .thecv-casehero__viewport { aspect-ratio: 4 / 3; } }
.thecv-casehero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.thecv-casehero__img--ph {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(160deg, color-mix(in srgb, var(--thecv-highlight) 55%, var(--thecv-surface)), color-mix(in srgb, var(--thecv-brand) 25%, var(--thecv-surface)));
	font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--thecv-text-muted);
}
/* Load-in: pure CSS (no JS wait): copy fades up in sequence, the screenshot rises. */
@keyframes thecv-casehero-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.thecv-casehero__copy > *, .thecv-casehero__card { animation: thecv-casehero-up .7s cubic-bezier(.2,.7,.2,1) both; }
.thecv-casehero__copy > :nth-child(2) { animation-delay: .06s; }
.thecv-casehero__copy > :nth-child(3) { animation-delay: .12s; }
.thecv-casehero__copy > :nth-child(4) { animation-delay: .18s; }
.thecv-casehero__copy > :nth-child(5) { animation-delay: .24s; }
.thecv-casehero__copy > :nth-child(6) { animation-delay: .3s; }
.thecv-casehero__card { animation-delay: .15s; }
@media (max-width: 900px) {
	.thecv-casehero__shot { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.thecv-casehero * { animation: none !important; transition: none !important; }
}

/* =====================================================================
   STACK (thecv/stack): tools grid, icon tile + name + use
   ===================================================================== */
.thecv-stack__head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); max-width: 40rem; }
.thecv-stack__heading {
	margin: 0;
}
.thecv-stack__intro { margin: 1rem 0 0; font-size: 1.05rem; font-weight: 300; line-height: 1.6; color: var(--thecv-text-soft); }
.thecv-stack__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.thecv-stack--cols-4 .thecv-stack__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.thecv-stack__item {
	display: flex;
	align-items: center;
	color: inherit;
}
a.thecv-stack__item:hover { background: color-mix(in srgb, var(--thecv-text) 5%, transparent); }
.thecv-stack__icon {
	flex: none;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.thecv-stack__icon-img { width: 100%; height: 100%; object-fit: cover; }
.thecv-stack__icon--letter {
	font-family: var(--thecv-font-display);
	border-color: transparent;
}
.thecv-stack__icon--t0 { background: var(--thecv-dark); color: var(--thecv-bg); }
.thecv-stack__icon--t1 { background: var(--thecv-highlight); color: var(--thecv-dark); }
.thecv-stack__icon--t2 { background: var(--thecv-bg-alt); color: var(--thecv-text); }
.thecv-stack__icon--t3 { background: var(--thecv-surface); color: var(--thecv-dark); border-color: var(--thecv-line); }
.thecv-stack__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.thecv-stack__name {
	color: var(--thecv-text);
}
.thecv-stack__desc { font-size: .9rem; color: var(--thecv-text-muted); }
@media (max-width: 900px) {
	.thecv-stack__grid, .thecv-stack--cols-4 .thecv-stack__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	/* Phones: stay in two compact columns. */
	
	.thecv-stack__item { gap: .65rem; padding: .6rem .5rem; margin: 0 -.5rem; }
	
	.thecv-stack__icon--letter { font-size: .95rem; }
	.thecv-stack__name { font-size: .92rem; overflow-wrap: anywhere; }
	.thecv-stack__desc { font-size: .8rem; line-height: 1.35; }
}

/* =====================================================================
   PROCESS STEPS (thecv/process-steps): sticky head left, numbered steps right
   ===================================================================== */
.thecv-steps__grid {
	display: grid;
	align-items: start;
}
.thecv-steps__head {
	position: sticky;
}
.admin-bar .thecv-steps__head { top: calc(2rem + 32px); }
.thecv-steps__heading { margin: 0; font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1; letter-spacing: -.04em; text-transform: uppercase; }
.thecv-steps__intro {
	margin: 1.25rem 0 0;
	font-size: 1.05rem;
	font-weight: 300;
	line-height: 1.65;
	color: var(--thecv-text-soft);
}
.thecv-steps__list { counter-reset: none; }
.thecv-steps__item {
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem);
	padding: clamp(1.75rem, 3vw, 2.5rem) 0; border-top: 1px solid var(--thecv-line);
}
.thecv-steps__item:last-child { border-bottom: 1px solid var(--thecv-line); }
.thecv-steps__num {
	font-family: var(--thecv-font-display);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.thecv-steps__phase {
	margin: 0 0 .5rem;
	font-family: var(--thecv-font-display);
}
.thecv-steps__org {
	font-family: var(--thecv-font-display);
}
.thecv-steps__title {
	margin: 0;
	font-family: var(--thecv-font-display);
}
.thecv-steps__desc {
	margin: .75rem 0 0;
}
.thecv-steps__chips { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.thecv-steps__chips li {
	padding: .3rem .75rem;
	font-size: .75rem;
	font-weight: 600;
}
@media (max-width: 900px) {
	.thecv-steps__grid {
	gap: 1rem;
}
	.thecv-steps__head { position: static; }
	.thecv-steps__intro { margin-top: .75rem; }
}

/* =====================================================================
   PROFILE BANNER (thecv/profile-banner): About-page opener, same layout as the
   homepage About section: text left (7/12), 4:5 portrait right (5/12).
   ===================================================================== */

.thecv-profile__inner { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
.thecv-profile--media .thecv-profile__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.thecv-profile__name {
	margin: 0;
}
.thecv-profile__roles { margin-top: 1.1rem; }
.thecv-profile__role {
	margin: 0;
	font-family: var(--thecv-font-display);
}
.thecv-profile__role:first-child:not(:only-child) { color: var(--thecv-text); font-weight: 600; }
/* Lines typed in one paragraph (Shift+Enter): the first line is the job title. */
.thecv-profile__role:only-child::first-line { color: var(--thecv-text); font-weight: 600; }

.thecv-profile__links {
	align-items: center;
	margin-top: clamp(1.5rem, 3vw, 2rem);
}
.thecv-profile__links li { display: inline-flex; align-items: center; }
.thecv-profile__links li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--thecv-text) 25%, transparent); margin: 0 1.1rem; }
.thecv-profile__links a {
	display: inline-flex;
	align-items: center;
}

.thecv-profile__links svg { width: 18px; height: 18px; flex: none; }
.thecv-profile__links a[download] {
	font-weight: 600;
	text-decoration-color: color-mix(in srgb, var(--thecv-text) 25%, transparent);
	text-underline-offset: 4px;
}
@media (max-width: 600px) {
	/* Phones: one link per line, left-aligned, no dot separators. */
	.thecv-profile__links { flex-direction: column; align-items: flex-start; gap: .85rem; }
	.thecv-profile__links li + li::before { display: none; }
}
.thecv-profile__stats { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.thecv-profile__stats dt {
	font-family: var(--thecv-font-display);
	color: var(--thecv-text);
}

/* Portrait: same card as the homepage About block. */
.thecv-profile__media {
	overflow: hidden;
}
.thecv-profile__img { width: 100%; height: 100%; object-fit: cover; transition: filter .7s ease, transform .7s ease; }

/* Availability pill: on the photo (or inline under the intro when there's no photo). */

@media (max-width: 900px) {
	.thecv-profile--media .thecv-profile__inner { grid-template-columns: 1fr; }
	.thecv-profile__media {
	max-width: 28rem;
	justify-self: center;
}
}
@media (max-width: 700px) {
	.thecv-profile__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .thecv-profile__img { transition: none; } }

/* ---- About intro: centered statement, tilted photo, pill buttons, four number tiles ---- */
.thecv-profile { padding: clamp(1.5rem, 3vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem); }
.thecv-profile__inner,
.thecv-profile--media .thecv-profile__inner { display: block; position: relative; }
.thecv-profile__text { display: grid; justify-items: center; text-align: center; gap: clamp(1rem, 2vw, 1.5rem); padding-top: clamp(1.5rem, 4vw, 4rem); }
.thecv-profile__text > * { max-width: min(820px, 100%); margin: 0; }
.thecv-profile--media .thecv-profile__text > :not(.thecv-profile__stats) { max-width: min(820px, 56%); }
.thecv-profile__name {
	text-transform: none;
}
.thecv-profile__roles { margin: 0; display: grid; gap: .6rem; justify-items: center; }
.thecv-profile__role { font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 400; line-height: 1.4; color: var(--thecv-text-soft); }
.thecv-profile__role:first-child:not(:only-child),
.thecv-profile__role:only-child::first-line {
	font-size: clamp(1.5rem, 3.1vw, 2.875rem); font-weight: 500; line-height: 1.14; letter-spacing: -.025em; color: var(--thecv-text); text-wrap: balance;
}
.thecv-profile__intro {
	margin: 0;
	max-width: 36rem;
	line-height: 1.5;
	color: var(--thecv-text-soft);
}
.thecv-profile__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 0; }
.thecv-profile__links li + li::before { display: none; }
.thecv-profile__links a {
	min-height: 48px; padding: .5rem 1.25rem; gap: .6rem; border: 2px solid var(--thecv-text); border-radius: var(--thecv-radius);
	font-size: 1.0625rem; font-weight: 600; color: var(--thecv-text); background: transparent; text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.thecv-profile__links a[download] { background: var(--thecv-text); color: var(--thecv-bg); text-decoration: none; }
.thecv-profile__links a:hover, .thecv-profile__links a:focus-visible { background: var(--thecv-highlight); color: var(--thecv-text); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.thecv-profile__links a { transition: background-color .2s ease, color .2s ease, transform .2s ease; }
	.thecv-profile__links a:hover { transform: translateY(-3px); }
}
.thecv-profile__text > .thecv-profile__stats {
	max-width: none; width: 100%; text-align: left; margin-top: clamp(1rem, 3vw, 2.5rem);
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.5rem, 1.2vw, .75rem);
}
.thecv-profile__stats > div { container-type: inline-size; min-width: 0; min-height: clamp(7.5rem, 14vw, 11.875rem); display: grid; align-content: space-between; gap: 1rem; padding: clamp(1rem, 2vw, 1.75rem); border-radius: var(--thecv-radius); background: var(--thecv-mint); }

.thecv-profile__stats dt { font-weight: 700; font-size: clamp(2rem, 24cqw, 5rem); overflow-wrap: anywhere; text-wrap: balance; line-height: 1; letter-spacing: -.028em; font-variant-numeric: tabular-nums; }
.thecv-profile__stats dd { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--thecv-text); }
.thecv-profile__media {
	position: absolute;
	z-index: 1;
	aspect-ratio: 4 / 5;
	margin: 0;
	border-radius: var(--thecv-radius);
	background: var(--thecv-sand);
}
.thecv-profile__media:hover .thecv-profile__img { transform: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.thecv-profile__media { transition: rotate .4s cubic-bezier(.2,.8,.2,1), scale .4s cubic-bezier(.2,.8,.2,1); }
	.thecv-profile__media:hover { rotate: 0deg; scale: 1.06; }
}
@media (max-width: 900px) {
	.thecv-profile--media .thecv-profile__inner { display: flex; flex-direction: column; }
	.thecv-profile__media {
	position: relative;
	right: auto;
	top: auto;
	order: -1;
	width: 58%;
}
	.thecv-profile--media .thecv-profile__text > :not(.thecv-profile__stats) { max-width: 100%; }
	.thecv-profile__text { padding-top: 1.5rem; }
}
@media (max-width: 700px) {
	.thecv-profile__text > .thecv-profile__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- PROCESS STEPS: reversed (steps left, sticky heading right), e.g. Education under Experience ---- */
/* Two timelines in a row read as one section. */
.thecv-steps + .thecv-steps { padding-top: 0; }

/* =====================================================================
   CERTIFICATES (thecv/certificates): rows
   ===================================================================== */

.thecv-certs__heading { margin: 0; font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1; letter-spacing: -.04em; text-transform: uppercase; }
.thecv-certs__intro { margin: 1.25rem 0 0; font-size: 1.05rem; font-weight: 300; line-height: 1.6; color: var(--thecv-text-soft); }

.thecv-certs__row {
	gap: 1rem clamp(1rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--thecv-line);
}
/* All rows share the same columns, so the years line up on the right whether or not a row has a link
   (rows without one just leave the last column empty). */
@media (min-width: 601px) {
	.thecv-certs__list { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: clamp(1rem, 3vw, 2.5rem); }
	.thecv-certs__row { grid-column: 1 / -1; grid-template-columns: subgrid; }
	.thecv-certs__link { grid-column: 3; justify-self: end; }
	.thecv-certs__year { grid-column: 4; justify-self: end; text-align: right; }
}
.thecv-certs__row p, .thecv-certs__row h2, .thecv-certs__row h3, .thecv-certs__row h4 { margin: 0; }
.thecv-certs__icon {
	width: 44px; height: 44px; border-radius: var(--thecv-radius); display: inline-flex; align-items: center; justify-content: center;
	background: var(--thecv-highlight); color: var(--thecv-dark);
}
.thecv-certs__icon svg { width: 20px; height: 20px; }
/* A logo replaces the award icon: it sits on a plain tile with a hairline border, scaled to fit. */
.thecv-certs__icon--logo { background: var(--thecv-bg); border: 1px solid var(--thecv-line); padding: 7px; box-sizing: border-box; overflow: hidden; }
.thecv-certs__logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.thecv-certs__main {
	flex-direction: column;
	gap: .2rem;
	min-width: 0;
}
.thecv-certs__name {
	font-family: var(--thecv-font-display);
}

.thecv-certs__link {
	font-family: var(--thecv-font-display);
	font-weight: 600;
	text-transform: uppercase;
	white-space: nowrap;
}

@media (max-width: 600px) {
	/* Phone: icon and text on the left, year with the link underneath it on the right, all top-aligned. */
	.thecv-certs__row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; row-gap: .35rem; }
	.thecv-certs__icon, .thecv-certs__main { grid-row: 1 / span 2; }
	.thecv-certs__year { grid-column: 3; grid-row: 1; justify-self: end; text-align: right; }
	.thecv-certs__link { grid-column: 3; grid-row: 2; justify-self: end; }
}

/* =====================================================================
   PAGE BANNER (thecv/page-banner): solid color band, big title + short description
   ===================================================================== */
.thecv-pbanner { --pb-bg: var(--thecv-bg); --pb-fg: var(--thecv-text);
	background: var(--pb-bg); color: var(--pb-fg); padding: clamp(4rem, 9vw, 8rem) 0 clamp(3.5rem, 8vw, 7rem); }
.thecv-pbanner__title { margin: 0; color: inherit; font-size: clamp(2.75rem, 12vw, 9rem); font-weight: 700; line-height: .85; padding-bottom: .16em; letter-spacing: -.033em; text-transform: none; text-wrap: balance; }
.thecv-pbanner__title em, .thecv-pbanner__title i { text-transform: inherit; }
.thecv-pbanner__title.is-fit { white-space: nowrap; text-wrap: nowrap; }
.thecv-pbanner__desc { margin: clamp(1.25rem, 2.5vw, 2rem) 0 0; max-width: 36rem; font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 400; line-height: 1.5; color: var(--thecv-text); }
/* Photos (a core Gallery typed into the intro, up to 5): square, sharp, scattered behind the title; they drop in one after another. */
.thecv-pbanner__inner { position: relative; }
.thecv-pbanner__title, .thecv-pbanner__desc, .thecv-pbanner__look { position: relative; z-index: 1; }
.thecv-pbanner__photos.wp-block-gallery { display: block; position: absolute; inset: 0; z-index: 0; margin: 0; padding: 0; pointer-events: none; }
.thecv-pbanner__photos:not(:has(img)) { display: none; }
.thecv-pbanner__photos .wp-block-image { position: absolute; width: clamp(4.5rem, 11vw, 9.5rem); aspect-ratio: 1; margin: 0; flex: none; border-radius: 0; overflow: hidden; pointer-events: auto; }
.thecv-pbanner__photos .wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thecv-pbanner__photos .wp-block-image:nth-child(1) { left: 2%;  top: 2%; }
.thecv-pbanner__photos .wp-block-image:nth-child(2) { left: 22%; top: 44%; }
.thecv-pbanner__photos .wp-block-image:nth-child(3) { left: 46%; top: 0; }
.thecv-pbanner__photos .wp-block-image:nth-child(4) { left: 70%; top: 40%; }
.thecv-pbanner__photos .wp-block-image:nth-child(5) { left: 87%; top: 0; }
.thecv-pbanner__photos .wp-block-image:nth-child(n+6) { display: none; }
.thecv-pbanner__look.wp-block-buttons { margin: clamp(1rem, 2vw, 1.5rem) 0 0; }
.thecv-pbanner__look .wp-block-button__link { padding: 0; min-height: 0; background: none; border: 0; border-radius: 0; color: var(--thecv-text); font-size: 1.125rem; font-weight: 600; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 2px; }
.thecv-pbanner__look .wp-block-button__link::after { content: "\2193"; margin-left: .4em; display: inline-block; text-decoration: none; transition: transform .25s ease; }
.thecv-pbanner__look .wp-block-button__link:hover { background: none; color: var(--thecv-text); text-decoration-color: var(--thecv-highlight); }
.thecv-pbanner__look .wp-block-button__link:hover::after { transform: translateY(4px); }
@media (prefers-reduced-motion: no-preference) {
	.thecv-pbanner__photos .wp-block-image { animation: thecv-drop .9s cubic-bezier(.2,.8,.2,1) both; }
	.thecv-pbanner__photos .wp-block-image:nth-child(1) { animation-delay: .15s; }
	.thecv-pbanner__photos .wp-block-image:nth-child(2) { animation-delay: .3s; }
	.thecv-pbanner__photos .wp-block-image:nth-child(3) { animation-delay: .45s; }
	.thecv-pbanner__photos .wp-block-image:nth-child(4) { animation-delay: .6s; }
	.thecv-pbanner__photos .wp-block-image:nth-child(5) { animation-delay: .75s; }
}
@keyframes thecv-drop { from { opacity: 0; transform: translateY(-60px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
	/* Phones: small photos only behind the title, never over the intro text. */
	.thecv-pbanner__photos.wp-block-gallery { bottom: auto; height: 4.25rem; }
	.thecv-pbanner__photos .wp-block-image { width: 3.25rem; }
	.thecv-pbanner__photos .wp-block-image:nth-child(odd)  { top: 0; }
	.thecv-pbanner__photos .wp-block-image:nth-child(even) { top: 1rem; }
}
/* Directly under the nav: sit flush against it (cancel the page wrapper's top padding). */
.thecv-page-content > .thecv-pbanner:first-child { margin-top: calc(-1 * var(--thecv-section-y)); }
/* A dark/accent band right under the header: paint the header to match so they read as one block. */

/* Hero: one big statement, then the intro and buttons in a row under it. */
.thecv-namehero--split .thecv-namehero__inner {
	display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	padding-top: clamp(1.75rem, 4vw, 3.5rem); padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
.thecv-namehero--split .thecv-namehero__name,
.thecv-namehero--split .thecv-namehero__fullname {
	font-weight: 500; font-size: clamp(2rem, 5.4vw, 5rem); line-height: 1.14; letter-spacing: -.035em;
	max-width: 19em; text-wrap: pretty;
}
.thecv-namehero--split .thecv-namehero__fullname { font-size: inherit; }
.thecv-nb { display: inline-block; white-space: nowrap; }
.thecv-namehero--split .thecv-namehero__side {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.25rem 2.5rem;
}
.thecv-namehero--split .thecv-namehero__tagline {
	max-width: 36rem; font-weight: 400; font-size: clamp(1rem, 1.3vw, 1.1875rem); line-height: 1.45; color: var(--thecv-text);
}
.thecv-namehero--split .thecv-namehero__ctas.wp-block-buttons { margin: 0; }
@media (max-width: 900px) {
	.thecv-namehero--split .thecv-namehero__side { grid-template-columns: 1fr; }
	.thecv-namehero--split .thecv-namehero__name { line-height: 1.16; }
}
/* "Show stickers" off: the images stay in the text but are not shown (site and editor). */
.thecv-namehero--no-stickers .thecv-namehero__name img { display: none !important; }
/* Stickers: images typed into the headline with the editor's "Inline image" format. */
.thecv-namehero__name img {
	display: inline-block; width: auto !important; height: 1em !important; max-width: none; margin: 0 .1em; vertical-align: -.1em;
	transform: rotate(var(--r, -5deg));
	filter: drop-shadow(2px 3px 0 rgba(17,17,17,.9)) drop-shadow(0 6px 8px rgba(17,17,17,.18));
}
.thecv-namehero__name img[data-n="1"] { --r: -6deg; height: 1.05em !important; }
.thecv-namehero__name img[data-n="2"] { --r: 5deg; }
.thecv-namehero__name img[data-n="3"] { --r: -5deg; height: .78em !important; vertical-align: -.02em; border-radius: var(--thecv-radius); filter: drop-shadow(2px 3px 0 rgba(17,17,17,.9)); }
.thecv-namehero__name img[data-n="4"] { --r: 6deg; height: .98em !important; }
.thecv-namehero__name img[data-n="5"] { --r: -4deg; height: .82em !important; }
@media (prefers-reduced-motion: no-preference) {
	/* The whole headline grows in from the middle, then the stickers pop in one after another, then the facts fade in. */
	.thecv-namehero__name:not(.is-editing) { transform-origin: 50% 50%; animation: thecv-txtgrow .9s cubic-bezier(.2,.7,.2,1) .15s both; }
	.thecv-namehero__name:not(.is-editing) img { animation: thecv-pop .55s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(1s + var(--i, 0) * .14s); }
	.thecv-namehero__name img[data-n="2"] { --i: 1; }
	.thecv-namehero__name img[data-n="3"] { --i: 2; }
	.thecv-namehero__name img[data-n="4"] { --i: 3; }
	.thecv-namehero__name img[data-n="5"] { --i: 4; }
	.thecv-namehero__side { animation: thecv-fade .7s ease 1.1s both; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.thecv-namehero__name img { transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
	/* Keep the pop-in animation in the list (so it does not restart and hide the sticker) and add the wiggle next to it. */
	.thecv-namehero__name:not(.is-editing) img:hover { scale: 1.1; animation-name: thecv-pop, thecv-wig; animation-duration: .55s, .6s; animation-delay: calc(1s + var(--i, 0) * .14s), 0s; animation-fill-mode: both, none; animation-timing-function: cubic-bezier(.3,1.6,.5,1), ease-in-out; }
	.thecv-namehero__name.is-editing img:hover { scale: 1.1; }
}
@keyframes thecv-pop { from { transform: rotate(var(--r, -5deg)) scale(0); } to { transform: rotate(var(--r, -5deg)) scale(1); } }
@keyframes thecv-wig { 0%, 100% { rotate: 0deg; } 20% { rotate: -9deg; } 45% { rotate: 8deg; } 70% { rotate: -4deg; } }
@keyframes thecv-txtgrow { 0% { transform: scale(.15); opacity: 0; } 30% { opacity: 1; } 100% { transform: none; opacity: 1; } }

/* Facts under the headline (Based in / Experience) */
.thecv-namehero--split .thecv-namehero__side:has(.thecv-namehero__fact) { grid-template-columns: 1fr 1.4fr; max-width: 760px; align-items: end; }
.thecv-namehero__fact { margin: 0; font-size: 15px; line-height: 1.4; }
.thecv-namehero__fact br { display: none; }
.thecv-namehero__fact strong { display: block; font-weight: 600; font-size: 13px; opacity: .6; margin-bottom: 2px; }
@media (max-width: 760px) { .thecv-namehero--split .thecv-namehero__side:has(.thecv-namehero__fact) { grid-template-columns: 1fr 1fr; } }

/* Links in the headline: underlined phrases, lime on hover; with a project link a photo follows the pointer. */
.thecv-namehero__name a {
	color: inherit; text-decoration: none; border-radius: var(--thecv-radius);
	background: linear-gradient(var(--thecv-text), var(--thecv-text)) 0 96% / 100% .06em no-repeat;
	transition: background-color .25s ease, background-size .25s ease;
}
.thecv-namehero__name a:hover, .thecv-namehero__name a:focus-visible { background-color: var(--thecv-highlight); background-size: 100% 0; }
.thecv-hover-photo {
	position: fixed; left: 0; top: 0; z-index: 30; width: min(280px, 30vw); aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--thecv-radius);
	pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.85) rotate(-3deg);
}
.thecv-hover-photo.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
@media (prefers-reduced-motion: no-preference) { .thecv-hover-photo { transition: opacity .25s ease, transform .25s ease; } }

/* =====================================================================
   LOGO ROW (thecv/logo-row): static client / employer logos
   ===================================================================== */
.thecv-logos-row { padding: clamp(3rem, 6vw, 5rem) 0; }
/* Right under the hero the row tucks up to it (no space on top). */
.thecv-namehero + .thecv-logos-row { padding-top: 0; }
.thecv-logos-row__label { margin: 0 0 1.5rem; font-size: 1.05rem; font-weight: 400; color: var(--thecv-text-muted); text-align: center; }
.thecv-logos-row__list {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
	/* Every row (also a second or third one) is centered with the same space between the logos. */
	padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
}
.thecv-logos-row__item { display: flex; align-items: center; justify-content: center; min-height: 56px; }
.thecv-logos-row__item a { display: flex; align-items: center; color: inherit; }
.thecv-logos-row__img { display: block; max-height: 52px; max-width: 180px; width: auto; height: auto; object-fit: contain; transition: filter .3s ease, opacity .3s ease; }
.thecv-logos-row--muted .thecv-logos-row__img { filter: grayscale(1); opacity: .55; }
/* An item without a logo yet (editor and block preview only). */
.thecv-logos-row__ph { display: inline-flex; align-items: center; justify-content: center; width: 150px; height: 56px; border: 1px dashed currentColor; border-radius: var(--thecv-radius); opacity: .5; font: 600 .7rem/1 var(--thecv-font-body); letter-spacing: .12em; text-transform: uppercase; }
.thecv-logos-row--muted .thecv-logos-row__item:hover .thecv-logos-row__img { filter: none; opacity: 1; }
/* Touch screens have no hover, so the logos show in full color there. */
@media (hover: none) { .thecv-logos-row--muted .thecv-logos-row__img { filter: none; opacity: 1; } }
/* On phones the logos sit in one row you can swipe sideways (instead of wrapping into uneven lines).
   "safe center" keeps a short row centered and lets a long one start at the left edge. */
@media (max-width: 700px) {
	.thecv-logos-row__list { flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; gap: 2rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.thecv-logos-row__list::-webkit-scrollbar { display: none; }
	.thecv-logos-row__item { flex: 0 0 auto; scroll-snap-align: center; }
}
/* Hero → logos → compact projects: keep the rhythm tight. */
.thecv-namehero + .thecv-logos-row { margin-top: calc(-1 * clamp(1.5rem, 4vw, 3rem)); }
/* With a label on top, the row doesn't tuck under the hero (the hero would cover the label). */
.thecv-namehero + .thecv-logos-row:has(.thecv-logos-row__label) { margin-top: 0; }
.thecv-logos-row + .thecv-clients--compact { padding-top: 0; }

/* Highlights (Recent campaigns): images always in full color, no grayscale-until-hover */
.thecv-clients--highlights .thecv-clients__img,
.thecv-clients--highlights .thecv-clients__card:hover .thecv-clients__img { filter: none; }

/* Dark page banner under the header: active link is lime text, no marker (lime pill on lime text would vanish). */

/* Page banner: "Tint" tone (palette's soft color: Floral Blue in Lime & Navy) */

/* Logo row directly after a page banner: continues the banner's color band, logos in the banner's text color. */
.thecv-pbanner:has(+ .thecv-logos-row) { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.thecv-pbanner + .thecv-logos-row { margin-top: 0; padding: 0 0 clamp(2.5rem, 5vw, 4rem); }
.thecv-pbanner + .thecv-logos-row .thecv-logos-row__list { border-color: color-mix(in srgb, currentColor 22%, transparent); }
.thecv-pbanner + .thecv-logos-row .thecv-logos-row__label { color: inherit; opacity: .7; }
/* Content after the band starts with normal section spacing. */
.thecv-pbanner + .thecv-logos-row + * { margin-top: 0; }

/* Footer (simple): dark, ink background (black in Lime & Navy), paper text, lime hovers. */
.thecv-footer--simple {
	--thecv-focus: var(--thecv-bg);
	--ft-fg: var(--thecv-bg);
	--ft-soft: color-mix(in srgb, var(--thecv-bg) 72%, var(--thecv-text));
	background: var(--thecv-text); color: var(--ft-fg);
}
.thecv-footer--simple .thecv-footer__top { border-top: 0; }
.thecv-footer--simple .thecv-footer__name,
.thecv-footer--simple .thecv-footer__name .thecv-header__logo-text,
.thecv-footer--simple .thecv-footer__list,
.thecv-footer--simple .thecv-footer__list a,
.thecv-footer--simple .thecv-footer__top-link { color: var(--ft-fg); }
.thecv-footer--simple .thecv-footer__blurb,
.thecv-footer--simple .thecv-footer__col-title,
.thecv-footer--simple .thecv-footer__bottom { color: var(--ft-soft); }
.thecv-footer--simple .thecv-footer__list a:hover,
.thecv-footer--simple .thecv-footer__list a:focus-visible,
.thecv-footer--simple .thecv-footer__top-link:hover { color: var(--thecv-highlight); }
.thecv-footer--simple .current-menu-item > a { background: none; padding: 0; margin: 0; }

/* =====================================================================
   MOTION: hero load-in (CSS only, so content never waits on JS) + scroll reveal (main.js)
   ===================================================================== */
@keyframes thecv-rise {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: none; }
}
@keyframes thecv-grow {
	from { opacity: 0; transform: scale(.72); }
	to   { opacity: 1; transform: none; }
}
@keyframes thecv-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
	/* Name hero (all variants): title, then tagline, then buttons */
	.thecv-namehero__tagline,
	.thecv-namehero__ctas { animation: thecv-rise .9s cubic-bezier(.2,.7,.2,1) both; }
	.thecv-namehero__tagline  { animation-delay: .3s; }
	.thecv-namehero__ctas     { animation-delay: .42s; }
	/* Logo row right under the hero: logos drift in one after another */
	.thecv-namehero + .thecv-logos-row .thecv-logos-row__item { animation: thecv-rise .7s cubic-bezier(.2,.7,.2,1) both; }
	.thecv-namehero + .thecv-logos-row .thecv-logos-row__item:nth-child(1) { animation-delay: .55s; }
	.thecv-namehero + .thecv-logos-row .thecv-logos-row__item:nth-child(2) { animation-delay: .62s; }
	.thecv-namehero + .thecv-logos-row .thecv-logos-row__item:nth-child(3) { animation-delay: .69s; }
	.thecv-namehero + .thecv-logos-row .thecv-logos-row__item:nth-child(4) { animation-delay: .76s; }
	.thecv-namehero + .thecv-logos-row .thecv-logos-row__item:nth-child(5) { animation-delay: .83s; }
	.thecv-namehero + .thecv-logos-row .thecv-logos-row__item:nth-child(n+6) { animation-delay: .9s; }

	/* About page banner */
	.thecv-profile__text > * { animation: thecv-rise .9s cubic-bezier(.2,.7,.2,1) both; }
	.thecv-profile__text > :nth-child(2) { animation-delay: .1s; }
	.thecv-profile__text > :nth-child(3) { animation-delay: .2s; }
	.thecv-profile__text > :nth-child(4) { animation-delay: .3s; }
	.thecv-profile__text > :nth-child(n+5) { animation-delay: .4s; }
	.thecv-profile__media { animation: thecv-fade 1.2s ease .15s both; }

	/* Page banner (Portfolio): title, description, then the logos in the band */
	.thecv-pbanner__title { animation: thecv-grow 1s cubic-bezier(.2,.8,.2,1) both; transform-origin: 50% 60%; }
	.thecv-pbanner__desc  { animation: thecv-rise .9s cubic-bezier(.2,.7,.2,1) .15s both; }
	.thecv-pbanner + .thecv-logos-row .thecv-logos-row__list { animation: thecv-fade 1s ease .35s both; }

	/* Scroll reveal (classes added by main.js, so no-JS visitors see everything) */
	.thecv-rv {
		opacity: 0; transform: translateY(24px) scale(.96);
		transition: opacity .6s cubic-bezier(.2,.75,.2,1), transform .8s cubic-bezier(.2,.75,.2,1);
		transition-delay: var(--rv-d, 0ms);
	}
	.thecv-rv.is-in { opacity: 1; transform: none; }

	/* About: photos and text expand out from the center (main.js sets the offsets and adds .is-in) */
	@keyframes thecv-abin { from { translate: var(--cx, 0px) var(--cy, 0px); scale: .15; opacity: 0; } }
	@keyframes thecv-abt { from { scale: .5; opacity: 0; } }
	.thecv-ab-anim:not(.is-in) .thecv-profile__media { animation: none; }
	.thecv-ab-anim:not(.is-in) :is(.thecv-aboutme__media, .thecv-profile__media, .thecv-aboutme__text, .thecv-profile__text > :not(.thecv-profile__stats)) { opacity: 0; }
	.thecv-ab-anim.is-in :is(.thecv-aboutme__media, .thecv-profile__media) { animation: thecv-abin 1.4s cubic-bezier(.2,.75,.2,1) backwards; }
	.thecv-ab-anim.is-in :is(.thecv-aboutme__media--b, .thecv-profile__media--b) { animation-delay: .08s; }
	.thecv-ab-anim.is-in .thecv-profile__text > :not(.thecv-profile__stats) { animation: thecv-abt 1.3s cubic-bezier(.2,.75,.2,1) backwards; }
	.thecv-ab-anim.is-in .thecv-aboutme__text { animation: thecv-abt 1.3s cubic-bezier(.2,.75,.2,1) backwards; }
}

/* =====================================================================
   CASE STUDIES: card motion: each card reveals on its own as it scrolls in
   (main.js adds .is-shown per card): copy + stats rise in sequence, numbers count up. Hover: gentle lift.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.js .thecv-cases__card {
		transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
	}

	/* Copy: meta → title → blurb → stats (one by one) → link */
	.js .thecv-cases__meta,
	.js .thecv-cases__title,
	.js .thecv-cases__blurb,
	.js .thecv-cases__stats li,
	.js .thecv-cases__link {
		opacity: 0; transform: translateY(18px);
		transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
	}
	.js .thecv-cases__card.is-shown :is(.thecv-cases__meta, .thecv-cases__title, .thecv-cases__blurb, .thecv-cases__stats li, .thecv-cases__link) { opacity: 1; transform: none; }
	.js .thecv-cases__card.is-shown .thecv-cases__meta { transition-delay: .35s; }
	.js .thecv-cases__card.is-shown .thecv-cases__title { transition-delay: .43s; }
	.js .thecv-cases__card.is-shown .thecv-cases__blurb { transition-delay: .51s; }
	.js .thecv-cases__card.is-shown .thecv-cases__stats li:nth-child(1) { transition-delay: .7s; }
	.js .thecv-cases__card.is-shown .thecv-cases__stats li:nth-child(2) { transition-delay: .8s; }
	.js .thecv-cases__card.is-shown .thecv-cases__stats li:nth-child(n+3) { transition-delay: .9s; }
	.js .thecv-cases__card.is-shown .thecv-cases__link { transition-delay: 1s; }

	/* Hover: lift + soft shadow; link arrow nudges */
	.thecv-cases__card.is-shown:hover { transition-duration: .8s, .45s, .35s, .35s; transform: translateY(-6px); box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--thecv-text) 45%, transparent); border-color: color-mix(in srgb, var(--thecv-text) 18%, transparent); }
}

/* Page banner: "None" tone: no color band, page background + ink text (logo row after it stays on the page background). */
.thecv-pbanner--plain { padding-top: clamp(2.5rem, 6vw, 5rem); }
.thecv-pbanner--plain + .thecv-logos-row { background: var(--thecv-bg); color: var(--thecv-text); }
.thecv-pbanner--plain + .thecv-logos-row + .thecv-section { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
/* Banner followed directly by a section: tighter bottom space. */
.thecv-pbanner:has(+ .thecv-section) { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
/* No logo row under the banner (no logos added): the next section follows the banner closely, not a full section gap. */
.thecv-pbanner + .thecv-section { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Whole case card is clickable: the "Read the case study" link stretches over the card (stretched-link pattern). */
.thecv-cases__card:has(.thecv-cases__link) { position: relative; cursor: pointer; }
.thecv-cases__link::after {
	content: "";
	position: absolute;
	z-index: 1;
	border-radius: inherit;
}
.thecv-cases__card:has(.thecv-cases__link:focus-visible) { outline: 2px solid var(--thecv-text); outline-offset: 4px; }
.thecv-cases__link:focus-visible { outline: none; }
.thecv-cases__card:hover .thecv-cases__link { color: var(--thecv-brand-text); border-color: var(--thecv-brand); }
/* The link must not be transformed, or its ::after would size to the link instead of the card, fade only. */
.js .thecv-cases__link { transform: none !important; }

/* Tape strip */

/* Links typed inside a paragraph (any block, any background): same color as the text, a thin
   underline that thickens on hover, so a link always reads as a link without clashing with the
   section's colors. Blog post text keeps its Brand color. Buttons and styled links (anything
   with a class) are not touched. */
p a:not([class]) {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	transition: text-decoration-thickness .15s ease, opacity .15s ease;
}
p a:not([class]):hover,
p a:not([class]):focus-visible { text-decoration-thickness: 2px; opacity: .8; }
.thecv-post__content p a:not([class]) { color: var(--thecv-brand-text); }

/* Name hero and Highlights buttons typed in the page (core Buttons): same look as the theme
   buttons, with the same arrow. */
.thecv-namehero__ctas.wp-block-buttons { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; gap: .9rem; }
.thecv-clients__cta.wp-block-buttons { margin: clamp(2.5rem, 5vw, 4rem) 0 0; justify-content: center; gap: .9rem; }
.thecv-casehero__ctas.wp-block-buttons { margin: 2rem 0 0; gap: .75rem; }
.thecv-namehero__ctas .wp-block-button,
.thecv-clients__cta .wp-block-button,
.thecv-casehero__ctas .wp-block-button { margin: 0; }
.thecv-namehero__ctas .wp-block-button__link::after,
.thecv-clients__cta .wp-block-button__link::after,
.thecv-casehero__ctas .wp-block-button__link::after {
	content: ""; width: 14px; height: 14px; flex: none; background: currentColor; transition: transform .25s ease;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='square'%3E%3Cpath d='M4 12 12 4M5.5 4H12v6.5'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='square'%3E%3Cpath d='M4 12 12 4M5.5 4H12v6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.thecv-namehero__ctas .wp-block-button__link:hover::after,
.thecv-namehero__ctas .wp-block-button__link:focus-visible::after,
.thecv-clients__cta .wp-block-button__link:hover::after,
.thecv-clients__cta .wp-block-button__link:focus-visible::after,
.thecv-casehero__ctas .wp-block-button__link:hover::after,
.thecv-casehero__ctas .wp-block-button__link:focus-visible::after { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) { .thecv-namehero__ctas .wp-block-button__link::after, .thecv-clients__cta .wp-block-button__link::after, .thecv-casehero__ctas .wp-block-button__link::after { transition: none; } }
/* Phones: blocks that sit tight against the one before them on larger screens (Languages + References,
   Experience + Education) and the page openers get the same 80px rhythm as every other block. */
@media (max-width: 700px) {
	.thecv-skills + .thecv-langs,
	.thecv-langs + .thecv-refs,
	.thecv-skills + .thecv-refs,
	.thecv-steps + .thecv-steps { padding-top: var(--thecv-section-y); }
	.thecv-profile,
	.thecv-casehero { padding-bottom: var(--thecv-section-y); }
}
/* Detailed results typed in the page: the badge, type and numbers are paragraphs now. */
p.thecv-cases__badge, p.thecv-cases__type, p.thecv-cases__stat-value, p.thecv-cases__stat-label { margin: 0; }
/* Detailed results: the type of client sits under the name and badge. */
.thecv-cases__meta .thecv-cases__type { flex: 0 0 100%; margin-top: -.2rem; }

/* Highlight cards: an intro under the heading. */
.thecv-clients--compact .thecv-clients__intro { flex-basis: 100%; margin: .75rem 0 0; max-width: 40rem; font-size: 1.05rem; line-height: 1.6; color: var(--thecv-text-soft); }
.thecv-clients--compact .thecv-clients__head:has(.thecv-clients__intro) { display: block; }
.thecv-clients--compact .thecv-clients__head .thecv-clients__intro:empty { display: none; }

/* Footer: four equal columns, bold column titles, soft links */
.thecv-footer--simple .thecv-footer__top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.thecv-footer--simple .thecv-footer__brand { max-width: none; }
.thecv-footer--simple .thecv-footer__col-title { color: var(--ft-fg); margin-bottom: .4rem; }
.thecv-footer--simple .thecv-footer__list a { color: var(--ft-soft); }
.thecv-footer--simple .thecv-footer__list a:hover,
.thecv-footer--simple .thecv-footer__list a:focus-visible { color: var(--thecv-highlight); }
@media (max-width: 900px) { .thecv-footer--simple .thecv-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .thecv-footer--simple .thecv-footer__top { grid-template-columns: 1fr; } }

/* Logo row: gray logos, color on hover; they slide past in a slow loop. */
.thecv-logos-row__view { min-width: 0; }
.thecv-logos-row--marquee .thecv-logos-row__view {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.thecv-logos-row--marquee .thecv-logos-row__list { flex-wrap: nowrap; justify-content: flex-start; width: max-content; gap: 0; padding-inline: 0; }
.thecv-logos-row--marquee .thecv-logos-row__item { flex: none; padding-inline: clamp(1.25rem, 3vw, 3rem); }
@media (prefers-reduced-motion: no-preference) {
	.thecv-logos-row--marquee .thecv-logos-row__list { animation: thecv-mq 40s linear infinite; }
	.thecv-logos-row--marquee .thecv-logos-row__view:hover .thecv-logos-row__list,
	.thecv-logos-row--marquee .thecv-logos-row__view:focus-within .thecv-logos-row__list { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
	.thecv-logos-row--marquee .thecv-logos-row__view { overflow-x: auto; }
	.thecv-logos-row--marquee .thecv-logos-row__item[aria-hidden="true"] { display: none; }
}
@keyframes thecv-mq { to { transform: translateX(-50%); } }

/* =====================================================================
   Highlight cards: no card surface. The photo comes first with the tags over it, then the name with an arrow,
   then a number and a line of text. Two columns from 700px, one below.
   ===================================================================== */
.thecv-clients--highlights .thecv-clients__heading {
	font-size: clamp(2.75rem, 7.4vw, 7.5rem); font-weight: 700; letter-spacing: -.028em; line-height: .9;
	text-transform: none; text-align: left; margin: 0;
}
.thecv-clients--highlights .thecv-clients__head { margin-bottom: clamp(1.75rem, 4vw, 3.5rem); text-align: left; }
.thecv-clients--highlights .thecv-clients__grid { display: grid; grid-template-columns: 1fr; height: auto; gap: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 4rem); }
@media (min-width: 700px) {
	.thecv-clients--highlights .thecv-clients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.thecv-clients--highlights .thecv-clients__card {
	display: grid; grid-template-rows: auto auto 1fr; gap: 14px; align-content: start; min-height: 0; flex: none; overflow: visible;
	background: none; color: var(--thecv-text); text-decoration: none;
}
.thecv-clients--highlights .thecv-clients__media { position: relative; inset: auto; aspect-ratio: 4 / 3; overflow: hidden; background: var(--thecv-sand); }
.thecv-clients--highlights .thecv-clients__scrim { display: none; }
.thecv-clients--highlights .thecv-clients__img--ph { background: var(--thecv-sand); }
.thecv-clients--highlights .thecv-clients__tags,
.thecv-clients--highlights .thecv-clients__card > .thecv-clients__tag {
	position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; margin: 0; width: auto;
}
.thecv-clients--highlights .thecv-clients__tag, .thecv-clients--highlights .thecv-clients__tag2 {
	position: static; margin: 0; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 0; border-radius: 0;
	background: var(--thecv-highlight); color: var(--thecv-text); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; backdrop-filter: none;
}
.thecv-clients--highlights .thecv-clients__card > .thecv-clients__tag { position: absolute; }
.thecv-clients--highlights .thecv-clients__caption {
	position: static; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; color: var(--thecv-text);
}
.thecv-clients--highlights .thecv-clients__title { font-size: clamp(1.25rem, 1.9vw, 1.625rem); font-weight: 500; letter-spacing: -.015em; line-height: 1.15; text-transform: none; color: inherit; }
.thecv-clients--highlights a.thecv-clients__card:hover .thecv-clients__title,
.thecv-clients--highlights a.thecv-clients__card:focus-visible .thecv-clients__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.thecv-clients--highlights .thecv-clients__hint { opacity: 1; transform: none; flex: none; color: var(--thecv-text); transition: transform .26s cubic-bezier(.2,.8,.2,1); }
.thecv-clients--highlights .thecv-clients__arrow { width: 24px; height: 24px; }
@media (hover: hover) and (pointer: fine) {
	.thecv-clients--highlights .thecv-clients__card:hover .thecv-clients__hint { transform: translate(3px, -3px); }
}
.thecv-clients--highlights .thecv-clients__text { gap: 0; }
.thecv-clients--highlights .thecv-clients__fig { align-self: start; display: grid; gap: 4px; }
.thecv-clients--highlights .thecv-clients__figure { margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -.015em; font-variant-numeric: normal; }
.thecv-clients--highlights .thecv-clients__result { margin: 0; max-width: 44ch; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--thecv-text-soft); opacity: 1; }
/* "View all" button: a text link on the right, underlined, like the prototype. */
.thecv-clients--highlights .thecv-clients__cta.wp-block-buttons { justify-content: flex-end; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.thecv-clients--highlights .thecv-clients__cta .wp-block-button__link {
	padding: 6px 0; min-height: 0; background: linear-gradient(var(--thecv-text), var(--thecv-text)) 0 100% / 100% 2px no-repeat; border: 0; border-radius: 0; color: var(--thecv-text);
	font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 600; letter-spacing: -.01em; gap: 12px; transition: background-size .3s cubic-bezier(.2,.8,.2,1);
}
.thecv-clients--highlights .thecv-clients__cta .wp-block-button__link:hover { background-color: transparent; color: var(--thecv-text); background-size: 0 2px; background-position: 100% 100%; }
@media (max-width: 899px) { .thecv-clients--highlights .thecv-clients__cta.wp-block-buttons { justify-content: flex-start; } }

/* =====================================================================
   Detailed results: bento. Photo left, tinted text card right, tinted number tiles under both.
   ===================================================================== */
.thecv-cases__heading { font-size: clamp(2.75rem, 7.4vw, 7.5rem); font-weight: 700; text-transform: none; letter-spacing: -.04em; line-height: .9; margin: 0; }
.thecv-cases__heading em, .thecv-cases__desc em { font-style: normal; color: inherit; text-decoration: none; text-transform: inherit; letter-spacing: inherit; }
.thecv-cases__head {
	max-width: none;
	margin: 0 0 clamp(28px, 4vw, 56px);
	text-align: left;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
}
.thecv-cases__desc {
	color: var(--thecv-text);
}
.thecv-cases__list { gap: clamp(3.5rem, 7vw, 6.5rem); }
.thecv-cases__card {
	grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto 1fr auto 1fr auto; gap: clamp(.75rem, 1.4vw, 1.25rem);
	min-height: 0; background: none; border: 0; border-radius: 0; overflow: visible;
}
.thecv-cases__media { grid-column: 1 / span 6; grid-row: 1 / span 7; min-height: clamp(320px, 38vw, 560px); }
.thecv-cases__body { display: contents; }
.thecv-cases__top { display: contents; }
:is(.thecv-cases__meta, .thecv-cases__blurb, .thecv-cases__stats, .thecv-cases__link) { grid-column: 7 / span 6; margin-left: clamp(0rem, 1.5vw, 1.5rem); color: var(--thecv-text); }
.thecv-cases__meta { grid-row: 1; }
.thecv-cases__blurb { grid-row: 3; }
.thecv-cases__meta { margin-bottom: 0; flex: 0 0 auto; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: .75rem; }
.thecv-cases__name, .thecv-cases__title { font-size: clamp(2.25rem, 4.4vw, 4.25rem); font-weight: 700; text-transform: none; letter-spacing: -.04em; line-height: .95; color: inherit; }
.thecv-cases__type { color: inherit; opacity: .7; }
.thecv-cases__blurb { color: inherit; max-width: none; }
.thecv-cases__media .thecv-cases__badge { position: absolute; top: 20px; left: 20px; z-index: 2; margin: 0; border-radius: 0; background: var(--thecv-highlight); color: var(--thecv-dark, #0e0e0e); }
.thecv-cases__results { grid-column: 1 / -1; grid-row: 2; display: contents; }
.thecv-cases__stats { grid-row: 5; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem clamp(1rem, 2vw, 2rem); }
.thecv-cases__stats li { flex: 0 1 auto; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .35rem; padding: 0; color: var(--thecv-text); }
/* Four numbers: a tidy 2 by 2 grid instead of a ragged wrap. */
.thecv-cases__stats:has(> li:nth-child(4)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(1rem, 2vw, 2rem); }
.thecv-cases__stat-value { font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 700; letter-spacing: -.04em; color: inherit; }
.thecv-cases__stat-label { color: inherit; opacity: .75; font-size: .95rem; text-align: left; max-width: 14ch; }
.thecv-cases__link {
	grid-row: 7; justify-self: end; align-self: end; border: 0; padding-bottom: .2rem; color: inherit; font-size: .9rem; letter-spacing: .04em; text-transform: none;
	background: linear-gradient(currentColor, currentColor) left bottom / 100% 1.5px no-repeat;
}
.thecv-cases__link:hover, .thecv-cases__link:focus-visible, .thecv-cases__card:hover .thecv-cases__link { color: inherit; background-size: 0 1.5px; }
.thecv-cases__link::after { inset: 0; }
.thecv-cases--alternate .thecv-cases__card:nth-child(even) .thecv-cases__media { order: 0; grid-column: 7 / span 6; }
.thecv-cases--alternate .thecv-cases__card:nth-child(even) :is(.thecv-cases__meta, .thecv-cases__blurb, .thecv-cases__stats, .thecv-cases__link) { grid-column: 1 / span 6; margin-left: 0; margin-right: clamp(0rem, 1.5vw, 1.5rem); }
.thecv-cases__card:hover { box-shadow: none !important; border-color: transparent !important; }
@media (max-width: 900px) {
	.thecv-cases__card, .thecv-cases--alternate .thecv-cases__card:nth-child(even) { grid-template-columns: 1fr; grid-template-rows: none; }
	.thecv-cases__media, .thecv-cases__meta, .thecv-cases__blurb, .thecv-cases__stats, .thecv-cases__link,
	.thecv-cases--alternate .thecv-cases__card:nth-child(even) :is(.thecv-cases__media, .thecv-cases__meta, .thecv-cases__blurb, .thecv-cases__stats, .thecv-cases__link) { grid-column: 1; grid-row: auto; }
	.thecv-cases__media { min-height: 0; }
	.thecv-cases__link { order: 1; }
	.thecv-cases__meta, .thecv-cases__blurb, .thecv-cases__stats, .thecv-cases__link,
	.thecv-cases--alternate .thecv-cases__card:nth-child(even) :is(.thecv-cases__meta, .thecv-cases__blurb, .thecv-cases__stats, .thecv-cases__link) { margin-left: 0; margin-right: 0; }
}

/* =====================================================================
   About: centered statement with tilted photos around it (second photo optional).
   ===================================================================== */
.thecv-aboutme--media { overflow-x: clip; }
.thecv-aboutme--media .thecv-aboutme__inner {
	position: relative; display: block; text-align: center;
	padding-top: clamp(120px, 12vw, 180px); padding-bottom: clamp(110px, 11vw, 160px);
}
.thecv-aboutme--media:not(.thecv-aboutme--two) .thecv-aboutme__inner { padding-bottom: clamp(60px, 7vw, 110px); }
.thecv-aboutme--media .thecv-aboutme__text { position: relative; z-index: 3; max-width: min(1040px, 82%); margin: 0 auto; display: grid; justify-items: center; gap: 1.5rem; }
.thecv-aboutme--media .thecv-aboutme__heading {
	margin: 0;
}
.thecv-aboutme--media .thecv-aboutme__cols { max-width: 48rem; margin: 0 auto; text-align: center; }
.thecv-aboutme--media .thecv-aboutme__foot { flex-direction: column; margin-top: .5rem; justify-content: center; }
.thecv-aboutme--media .thecv-aboutme__tags, .thecv-aboutme--media .thecv-aboutme__ctas { justify-content: center; }
.thecv-aboutme--media .thecv-aboutme__media {
	position: absolute; z-index: 0; aspect-ratio: 4 / 5; border-radius: 4px;
	width: clamp(110px, 16%, 220px); left: 5%; top: 0; rotate: -4deg;
	transition: rotate .4s cubic-bezier(.2,.75,.2,1), scale .4s cubic-bezier(.2,.75,.2,1);
}
.thecv-aboutme--media .thecv-aboutme__media--b { left: auto; top: auto; right: 3.5%; bottom: 0; rotate: 5deg; width: clamp(110px, 15%, 205px); }
@media (hover: hover) and (pointer: fine) { .thecv-aboutme--media .thecv-aboutme__media:hover { rotate: 0deg; scale: 1.06; } }
.thecv-aboutme--media .thecv-aboutme__media:hover .thecv-aboutme__img { transform: none; }
@media (max-width: 900px) {
	.thecv-aboutme--media .thecv-aboutme__inner { display: flex; flex-direction: column; padding-top: 0; padding-bottom: 0; gap: 1.25rem; }
	.thecv-aboutme--media .thecv-aboutme__text { order: 2; max-width: none; padding: 1.5rem 0; }
	.thecv-aboutme--media .thecv-aboutme__media { position: relative; inset: auto; order: 1; width: 46%; max-width: none; margin: 0; justify-self: auto; align-self: flex-start; margin-left: 2%; }
	.thecv-aboutme--media .thecv-aboutme__media--b { order: 3; align-self: flex-end; margin: 0 2% 0 0; }
}
@media (prefers-reduced-motion: reduce) { .thecv-aboutme--media .thecv-aboutme__media { transition: none; } }

/* =====================================================================
   Skills: ink panel, huge lowercase heading, chunky lime bars.
   ===================================================================== */
.thecv-skills > .thecv-container { position: relative; isolation: isolate; color: var(--thecv-bg); padding-top: clamp(24px, 4vw, 64px); padding-bottom: clamp(24px, 4vw, 64px); }
.thecv-skills > .thecv-container::before { content: ""; position: absolute; z-index: -1; inset: 0 var(--thecv-pad); background: var(--thecv-text); border-radius: var(--thecv-radius); }
.thecv-skills__head, .thecv-skills__list { margin-left: clamp(24px, 4vw, 64px); margin-right: clamp(24px, 4vw, 64px); }
.thecv-skills__head { max-width: none; margin-bottom: clamp(24px, 4vw, 56px); }
.thecv-skills__heading { font-size: clamp(2.75rem, 7.4vw, 7.5rem); font-weight: 700; text-transform: none; letter-spacing: -.04em; line-height: .95; color: inherit; }
.thecv-skills__desc { color: inherit; opacity: .75; }
.thecv-skills__list { gap: clamp(20px, 3vw, 40px) clamp(24px, 5vw, 80px); }
.thecv-skills__name { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; text-transform: none; line-height: 1.2; color: inherit; }
.thecv-skills__pct { font-size: 1.25rem; font-weight: 700; letter-spacing: 0; color: inherit; }
.thecv-skills__bar { height: 22px; border-radius: 4px; background: color-mix(in srgb, var(--thecv-bg) 14%, var(--thecv-text)); }
.thecv-skills__fill { background: var(--thecv-highlight); border-radius: 4px; }
.thecv-skills__item:hover .thecv-skills__fill { background: var(--thecv-highlight); filter: brightness(1.08); }
.thecv-skills .thecv-skills__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .thecv-skills .thecv-skills__list{ grid-template-columns: 1fr; } }

/* =====================================================================
   Stack: heading left, tool tiles right (3 columns), first-letter tiles in ink, lime and sand.
   ===================================================================== */
@media (min-width: 901px) {
	.thecv-stack:not(.thecv-stack--cols-4) > .thecv-container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 2vw, 32px); align-items: start; }
	.thecv-stack:not(.thecv-stack--cols-4) .thecv-stack__head { margin: 0; }
	.thecv-stack:not(.thecv-stack--cols-4) .thecv-stack__grid { grid-column: 2; grid-row: 1; }
	.thecv-stack:not(.thecv-stack--cols-4) .thecv-stack__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.thecv-stack__heading { font-size: clamp(2.75rem, 7.4vw, 7.5rem); font-weight: 700; text-transform: none; letter-spacing: -.04em; line-height: .9; }
.thecv-stack__intro { margin-top: 1rem; max-width: 34ch; }
.thecv-stack__grid { gap: 12px; grid-auto-rows: 1fr; }
.thecv-stack__grid > li { display: flex; min-width: 0; }
.thecv-stack__item { flex: 1; margin: 0; padding: 14px; gap: 14px; min-height: 96px; background: var(--thecv-card); border-radius: 4px; min-width: 0; }
.thecv-stack__item { transition: transform 240ms cubic-bezier(.2,.8,.2,1), background-color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
	.thecv-stack__item:hover, a.thecv-stack__item:hover { background: var(--thecv-lilac); transform: translateY(-4px); }
}
.thecv-stack__icon { width: 52px; height: 52px; border: 0; border-radius: 4px; background: var(--thecv-sand); }
.thecv-stack__icon--letter { font-size: 1.375rem; font-weight: 700; }
.thecv-stack__grid > li:nth-child(3n+1) .thecv-stack__icon--letter { background: var(--thecv-text); color: var(--thecv-bg); }
.thecv-stack__grid > li:nth-child(3n+2) .thecv-stack__icon--letter { background: var(--thecv-highlight); color: var(--thecv-text); }
.thecv-stack__grid > li:nth-child(3n) .thecv-stack__icon--letter { background: var(--thecv-sand); color: var(--thecv-text); }
.thecv-stack__name { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: break-word; }
@media (max-width: 520px) { .thecv-stack__icon { width: 44px; height: 44px; } .thecv-stack__grid { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .thecv-stack__item, .thecv-stack__item:hover, a.thecv-stack__item:hover { transform: none; transition: none; } }

/* =====================================================================
   Languages: three tinted tiles.
   ===================================================================== */
.thecv-langs__list { gap: 12px; }
.thecv-langs__item { flex-direction: column; padding: clamp(20px, 2.4vw, 32px); border-radius: 4px; gap: 6px; background: var(--thecv-mint); color: var(--thecv-text); justify-content: flex-start; }
.thecv-langs__name { font-size: clamp(2rem, 4vw, 3.75rem); font-weight: 700; letter-spacing: -.025em; text-transform: none; line-height: 1; color: inherit; }
.thecv-langs__level { font-size: .9375rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: inherit; }
@media (max-width: 700px) { .thecv-langs__list { grid-template-columns: 1fr; } }

/* =====================================================================
   References: quote cards with a lime mark on an ink circle; every second card in lime.
   ===================================================================== */
.thecv-refs__heading { font-size: clamp(2.75rem, 7.4vw, 7.5rem); font-weight: 700; text-transform: none; letter-spacing: -.04em; line-height: .9; margin-bottom: clamp(28px, 4vw, 56px); }
.thecv-langs__heading { font-size: clamp(2.75rem, 7.4vw, 7.5rem); font-weight: 700; text-transform: none; letter-spacing: -.04em; line-height: .9; margin: 0 0 clamp(28px, 4vw, 56px); }
.thecv-refs__grid { gap: clamp(12px, 1.6vw, 20px); }
.thecv-refs__card { border: 0; border-radius: 4px; padding: clamp(24px, 3vw, 44px); gap: 28px; justify-content: space-between; background: var(--thecv-card); color: var(--thecv-text); }
.thecv-refs__grid > .thecv-refs__card:nth-child(2n) { background: var(--thecv-highlight); }
.thecv-refs--cols-1 .thecv-refs__card { background: var(--thecv-card); }
.thecv-refs__mark { box-sizing: border-box; width: 56px; height: 56px; padding: 17px 15px; border-radius: 50%; background: var(--thecv-text); color: var(--thecv-highlight); opacity: 1; }
.thecv-refs__quote p { font-family: inherit; font-size: clamp(1.375rem, 2.2vw, 2rem); font-weight: 600; line-height: 1.2; letter-spacing: -.03em; text-transform: none; text-wrap: pretty; color: inherit; }
.thecv-refs__foot { padding-top: 0; border-top: 0; align-items: center; }
.thecv-refs__name { font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: inherit; }
.thecv-refs__role { font-size: .9375rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: inherit; opacity: .75; }
@media (max-width: 700px) { .thecv-refs__grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Contact: brand panel with the form on a light card.
   ===================================================================== */
.thecv-contactb { background: transparent; padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
.thecv-contactb > .thecv-container { position: relative; isolation: isolate; padding-top: clamp(24px, 4vw, 64px); padding-bottom: clamp(24px, 4vw, 64px); }
.thecv-contactb > .thecv-container::before { content: ""; position: absolute; z-index: -1; inset: 0 var(--thecv-pad); background: var(--thecv-brand); border-radius: var(--thecv-radius); }
.thecv-contactb__heading {
	font-size: clamp(2.5rem, 6.4vw, 6.5rem);
	line-height: .92;
	letter-spacing: -.035em;
	margin-bottom: 1.5rem;
}
.thecv-contactb__grid { margin-left: clamp(24px, 4vw, 64px); margin-right: clamp(24px, 4vw, 64px); }
.thecv-contactb > .thecv-container > .thecv-contactb__heading { margin-left: clamp(24px, 4vw, 64px); margin-right: clamp(24px, 4vw, 64px); }
.thecv-contactb__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 48px); align-items: stretch; }
.thecv-contactb__intro { opacity: .85; color: inherit; }
.thecv-contactb__form { background: var(--thecv-card); color: var(--thecv-text); border-radius: 4px; padding: clamp(24px, 2.8vw, 40px); align-self: start; }
.thecv-contactb__form input[type="submit"] {
	margin-top: .5rem;
	border-radius: 4px;
}
@media (max-width: 900px) { .thecv-contactb__grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Timeline (numbered steps) and Certificates: heading left, tinted cards right.
   ===================================================================== */
.thecv-steps__heading, .thecv-certs__heading { font-size: clamp(2.75rem, 7.4vw, 7.5rem); font-weight: 700; text-transform: none; letter-spacing: -.04em; line-height: .9; }
.thecv-steps__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 2vw, 32px); }
.thecv-steps__head { top: 96px; }
.thecv-steps__intro { margin-top: 1rem; max-width: 34ch; }
.thecv-steps__list { display: grid; gap: 12px; }
.thecv-steps__item, .thecv-steps__item:last-child { border: 0; border-radius: 4px; padding: clamp(16px, 2vw, 28px); background: var(--thecv-card); gap: clamp(16px, 2vw, 24px); align-items: start; }
.thecv-steps__list > .thecv-steps__item:nth-child(4n+2) { background: var(--thecv-lilac); }
.thecv-steps__list > .thecv-steps__item:nth-child(4n+3) { background: var(--thecv-mint); }
.thecv-steps__list > .thecv-steps__item:nth-child(4n+4) { background: var(--thecv-sun); }
.thecv-steps__num { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--thecv-text); color: var(--thecv-bg); font-size: 1.125rem; letter-spacing: 0; }
.thecv-steps__phase { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; margin-bottom: .75rem; border-radius: 4px; background: var(--thecv-text); color: var(--thecv-bg); font-size: .8125rem; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.thecv-steps__title { font-size: clamp(1.625rem, 3.4vw, 3.25rem); font-weight: 700; line-height: 1; letter-spacing: -.025em; text-transform: none; color: var(--thecv-text); }
.thecv-steps__org { margin: .5rem 0 0; font-size: .9375rem; font-weight: 600; letter-spacing: 0; color: var(--thecv-text); }
.thecv-steps__desc { color: var(--thecv-text); font-size: 1.125rem; line-height: 1.4; max-width: 48ch; }
.thecv-steps__chips li { background: color-mix(in srgb, var(--thecv-text) 10%, transparent); color: var(--thecv-text); border-radius: 4px; }
@media (max-width: 900px) { .thecv-steps__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .thecv-steps__item, .thecv-steps__item:last-child { grid-template-columns: 1fr; } }

@media (min-width: 901px) {
	.thecv-certs > .thecv-container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 2vw, 32px); align-items: start; }
	.thecv-certs__head { margin: 0; }
	.thecv-certs__list { grid-column: 2; grid-row: 1; }
}
.thecv-certs__intro { margin-top: 1rem; max-width: 34ch; }
.thecv-certs__list {
	border-top: 0;
}
.thecv-certs__row {
	border: 0;
	border-radius: 4px;
	background: var(--thecv-card);
}
.thecv-certs__list > .thecv-certs__row:nth-child(4n+2) { background: var(--thecv-lilac); }
.thecv-certs__list > .thecv-certs__row:nth-child(4n+3) { background: var(--thecv-mint); }
.thecv-certs__list > .thecv-certs__row:nth-child(4n+4) { background: var(--thecv-sun); }
.thecv-certs__name {
	color: var(--thecv-text);
}
.thecv-certs__issuer {
	color: var(--thecv-text);
}
.thecv-certs__year {
	color: var(--thecv-text);
}

.thecv-certs__link:hover { color: var(--thecv-text); text-decoration: underline; }

/* Photos can drift with the scroll (main.js sets --ty on wide screens). */
.thecv-aboutme--media .thecv-aboutme__media { translate: 0 var(--ty, 0px); }

/* =====================================================================
   Logo strip: label on the left, logos scroll on the right (bottom aligned), small colored logos.
   ===================================================================== */
.thecv-logos-row--marquee .thecv-logos-row__img { max-height: none; max-width: none; height: clamp(18px, 1.9vw, 27px); width: auto; filter: none; opacity: .85; }
.thecv-logos-row--marquee .thecv-logos-row__item { align-items: flex-end; min-height: 0; }
.thecv-logos-row--marquee .thecv-logos-row__item:nth-child(9n+1) .thecv-logos-row__img { height: clamp(30px, 2.8vw, 42px); }
.thecv-logos-row--marquee .thecv-logos-row__item:nth-child(9n+2) .thecv-logos-row__img { height: clamp(22px, 2.1vw, 30px); }
.thecv-logos-row--marquee .thecv-logos-row__item:nth-child(9n+3) .thecv-logos-row__img { height: clamp(18px, 1.9vw, 27px); }
.thecv-logos-row--marquee .thecv-logos-row__item:nth-child(9n+4) .thecv-logos-row__img { height: clamp(32px, 3.1vw, 44px); }
.thecv-logos-row--marquee .thecv-logos-row__item:nth-child(9n+5) .thecv-logos-row__img { height: clamp(14px, 1.4vw, 20px); }
.thecv-logos-row--marquee .thecv-logos-row__item:nth-child(9n+6) .thecv-logos-row__img { height: clamp(16px, 1.6vw, 23px); }
.thecv-logos-row--marquee .thecv-logos-row__item:nth-child(9n+7) .thecv-logos-row__img { height: clamp(18px, 1.8vw, 26px); }
.thecv-logos-row--marquee .thecv-logos-row__item:nth-child(9n+8) .thecv-logos-row__img { height: clamp(20px, 2vw, 28px); }
.thecv-logos-row--marquee .thecv-logos-row__item:nth-child(9n) .thecv-logos-row__img { height: clamp(22px, 2.2vw, 32px); }
.thecv-logos-row--marquee .thecv-logos-row__item:hover .thecv-logos-row__img { opacity: 1; }
.thecv-logos-row__label::after { content: ":"; color: var(--thecv-brand); }
@media (min-width: 901px) {
	.thecv-logos-row--marquee:has(.thecv-logos-row__label) > .thecv-container { display: flex; align-items: flex-end; gap: clamp(32px, 5vw, 80px); }
	.thecv-logos-row--marquee .thecv-logos-row__label {
	flex: none;
	margin: 0;
	text-align: left;
	white-space: nowrap;
	font-size: clamp(1.25rem, 2.1vw, 2rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.02em;
	text-transform: none;
	color: var(--thecv-text);
}
	.thecv-logos-row--marquee .thecv-logos-row__view { flex: 1; }
}
@media (max-width: 900px) { .thecv-logos-row--marquee .thecv-logos-row__label { text-align: left; margin-bottom: 1.25rem; font-size: 1.25rem; font-weight: 600; text-transform: none; color: var(--thecv-text); } }

/* =====================================================================
   About lead: a light statement (the prototype's lead line), small sub line.
   ===================================================================== */
.thecv-aboutme--media .thecv-aboutme__heading { font-size: clamp(1.25rem, 2.4vw, 2.125rem); font-weight: 350; line-height: 1.25; letter-spacing: -.015em; text-transform: none; text-wrap: pretty; }
.thecv-aboutme--media .thecv-aboutme__cols p { font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 350; opacity: .75; color: inherit; }

/* =====================================================================
   Contact: envelope sticker beside the intro.
   ===================================================================== */
.thecv-contactb__intro::after {
	display: inline-block;
	vertical-align: middle;
	margin-left: .75rem;
	width: clamp(72px, 7vw, 110px);
	aspect-ratio: 3 / 2;
	rotate: -9deg;
	background: var(--thecv-cb-sticker, url("../img/stickers/stk-env.png")) center / contain no-repeat;
	filter: drop-shadow(0 6px 10px rgba(17, 17, 17, .22));
}

@media (min-width: 901px) {
	.thecv-aboutme--media .thecv-aboutme__text { max-width: min(960px, 62%); }
	.thecv-aboutme--media .thecv-aboutme__inner { padding-top: clamp(150px, 15vw, 230px); }
}

.thecv-contactb__intro::after { margin-top: -.5rem; margin-bottom: -.5rem; }

/* =====================================================================
   Recent projects: each card pops in as it scrolls into view.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.js .thecv-clients--highlights .thecv-clients__card:not(.is-in) { opacity: 0; transform: translateY(24px) scale(.96); }
	.js .thecv-clients--highlights .thecv-clients__card {
		transition: opacity .6s cubic-bezier(.2,.75,.2,1), transform .8s cubic-bezier(.2,.75,.2,1);
		transition-delay: calc(var(--i, 0) * 70ms);
	}
	.js .thecv-clients--highlights .thecv-clients__card.is-in { opacity: 1; transform: none; }
	.js .thecv-clients--highlights .thecv-clients__card.is-done { transition-delay: 0s; transition-duration: .6s, .26s; }
}

/* =====================================================================
   Contact: envelope sticker to the left of the intro, round ink icon buttons, bigger email.
   ===================================================================== */
.thecv-contactb__intro { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); margin-top: clamp(20px, 2.4vw, 32px); max-width: 38rem; line-height: 1.4; }
.thecv-contactb__intro::after { content: none; }
.thecv-contactb__intro::before {
	content: ""; flex: none; order: -1; height: clamp(34px, 3.4vw, 48px); aspect-ratio: 3 / 2; rotate: 8deg; margin: 0;
	background: var(--thecv-cb-sticker, url("../img/stickers/stk-env.png")) center / contain no-repeat;
	filter: drop-shadow(0 6px 10px rgba(17, 17, 17, .22));
}
.thecv-contactb__email a { font-size: clamp(1.25rem, 2.2vw, 2rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
.thecv-contactb__socials { gap: 12px; }
.thecv-contactb__socials a:has(.thecv-contactb__ico) { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--thecv-text); color: var(--thecv-bg); transition: background .2s, color .2s, transform .2s; }
.thecv-contactb__socials a:has(.thecv-contactb__ico):hover, .thecv-contactb__socials a:has(.thecv-contactb__ico):focus-visible { background: var(--thecv-highlight); color: var(--thecv-text); transform: translateY(-2px); }
.thecv-contactb__ico { display: grid; place-items: center; }
.thecv-contactb__ico svg, .thecv-contactb__ico img { width: 20px; height: 20px; }
@media (max-width: 520px) { .thecv-contactb__intro { flex-direction: column; align-items: flex-start; } }
.thecv-contactb__email a svg { display: none; }

/* Portfolio banner. Square photos sit around the title only (same spots as the prototype), the intro text stays clear below. */
.thecv-pbanner__inner:has(.thecv-pbanner__photos img) { display: grid; grid-template-columns: minmax(0, 1fr); }
.thecv-pbanner__inner:has(.thecv-pbanner__photos img) > .thecv-pbanner__title { grid-row: 1; grid-column: 1; z-index: 2; }
.thecv-pbanner__inner:has(.thecv-pbanner__photos img) > .thecv-pbanner__photos.wp-block-gallery { grid-row: 1; grid-column: 1; position: relative; inset: auto; height: 100%; width: 100%; z-index: 1; }
.thecv-pbanner__inner:has(.thecv-pbanner__photos img) > .thecv-pbanner__desc { grid-row: 2; }
.thecv-pbanner__inner:has(.thecv-pbanner__photos img) > .thecv-pbanner__look { grid-row: 3; }
.thecv-pbanner .thecv-pbanner__photos.wp-block-gallery figure.wp-block-image { position: absolute; display: block; flex: none; margin: 0; aspect-ratio: 1; height: auto; overflow: hidden; width: clamp(58px, 7.4vw, 108px) !important; box-shadow: 0 10px 22px rgba(17, 17, 17, .2); transition: translate .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.thecv-pbanner .thecv-pbanner__photos.wp-block-gallery figure.wp-block-image:nth-child(1) { left: 13%; top: -16%; z-index: 1; }
.thecv-pbanner .thecv-pbanner__photos.wp-block-gallery figure.wp-block-image:nth-child(2) { left: 30%; top: 56%;  z-index: 3; }
.thecv-pbanner .thecv-pbanner__photos.wp-block-gallery figure.wp-block-image:nth-child(3) { left: 57%; top: -18%; z-index: 1; }
.thecv-pbanner .thecv-pbanner__photos.wp-block-gallery figure.wp-block-image:nth-child(4) { left: 86%; top: 50%;  z-index: 3; }
.thecv-pbanner .thecv-pbanner__photos.wp-block-gallery figure.wp-block-image:nth-child(5) { left: 61%; top: 58%;  z-index: 3; }
.thecv-pbanner .thecv-pbanner__photos.wp-block-gallery figure.wp-block-image:hover { translate: 0 -6px; box-shadow: 0 16px 32px rgba(17, 17, 17, .28); }
@media (max-width: 700px) {
	.thecv-pbanner .thecv-pbanner__photos.wp-block-gallery { height: 100%; }
	.thecv-pbanner .thecv-pbanner__photos.wp-block-gallery figure.wp-block-image { width: 46px !important; }
	.thecv-pbanner .thecv-pbanner__photos.wp-block-gallery figure.wp-block-image:nth-child(odd), .thecv-pbanner .thecv-pbanner__photos.wp-block-gallery figure.wp-block-image:nth-child(even) { top: auto; }
	.thecv-pbanner .thecv-pbanner__photos.wp-block-gallery figure.wp-block-image:nth-child(1) { top: -16%; } .thecv-pbanner .thecv-pbanner__photos.wp-block-gallery figure.wp-block-image:nth-child(2) { top: 56%; }
	.thecv-pbanner .thecv-pbanner__photos.wp-block-gallery figure.wp-block-image:nth-child(3) { top: -18%; } .thecv-pbanner .thecv-pbanner__photos.wp-block-gallery figure.wp-block-image:nth-child(4) { top: 50%; }
	.thecv-pbanner .thecv-pbanner__photos.wp-block-gallery figure.wp-block-image:nth-child(5) { top: 58%; }
}
@media (prefers-reduced-motion: no-preference) {
	.thecv-pbanner .thecv-pbanner__photos.wp-block-gallery figure.wp-block-image { animation: thecv-rain 1.15s cubic-bezier(.3, .9, .35, 1) both; }
	.thecv-pbanner .thecv-pbanner__photos.wp-block-gallery figure.wp-block-image:nth-child(1) { animation-delay: .45s; }
	.thecv-pbanner .thecv-pbanner__photos.wp-block-gallery figure.wp-block-image:nth-child(2) { animation-delay: .61s; }
	.thecv-pbanner .thecv-pbanner__photos.wp-block-gallery figure.wp-block-image:nth-child(3) { animation-delay: .77s; }
	.thecv-pbanner .thecv-pbanner__photos.wp-block-gallery figure.wp-block-image:nth-child(4) { animation-delay: .93s; }
	.thecv-pbanner .thecv-pbanner__photos.wp-block-gallery figure.wp-block-image:nth-child(5) { animation-delay: 1.09s; }
}
@keyframes thecv-rain { from { opacity: 0; transform: translateY(-110vh); } to { opacity: 1; transform: none; } }

/* About page banner. The first line is the light lead statement (as on the prototype), the next line a small sub line. */
.thecv-profile--media .thecv-profile__name {
	text-transform: none;
}
.thecv-profile--media .thecv-profile__intro { font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 350; opacity: .75; }

/* Contact, matched to the prototype: two-line heading in sentence case, sentence-case field labels, short message box, arrow on the send button, envelope wiggles on hover. */
.thecv-contactb__heading { text-transform: none; max-width: none; }
.thecv-contactb__form label { font-size: .8125rem; letter-spacing: 0; text-transform: none; font-weight: 600; font-family: inherit; }
.thecv-contactb__form form p { margin: 0 0 .9rem; }
.thecv-contactb__form .wpcf7-form-control-wrap { margin-top: .1rem; }
.thecv-contactb__form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .thecv-contactb__form textarea { padding: .5rem 0 .65rem; border-bottom-color: rgba(17, 17, 17, .28); font-size: 1.0625rem; }
.thecv-contactb__form textarea { min-height: 4.75rem; height: 4.75rem; resize: none; }
.thecv-contactb__form input[type="submit"] {
	width: 100%; min-height: 52px; padding: 0 3.25rem 0 1.4rem; justify-content: flex-start; text-align: left; font-family: inherit; font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 1.25rem center; background-size: 22px;
}
.thecv-contactb__form input[type="submit"]:hover, .thecv-contactb__form input[type="submit"]:focus-visible {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23f7f3e8' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E");
}
@keyframes thecv-glwig { 0%, 100% { rotate: 8deg; } 20% { rotate: -1deg; } 45% { rotate: 16deg; } 70% { rotate: 4deg; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.thecv-contactb:hover .thecv-contactb__intro::before { animation: thecv-glwig .7s cubic-bezier(.2, .75, .2, 1); }
}

/* =====================================================================
   Timeline as an accordion (Timeline block, "Rows open and close with a + button"): no numbers, a round + that turns lime when open.
   ===================================================================== */
.thecv-steps--acc .thecv-steps__num { display: none; }
.thecv-steps--acc .thecv-steps__item, .thecv-steps--acc .thecv-steps__item:last-child { display: block; padding: 0; overflow: hidden; }
.thecv-steps--acc .thecv-steps__body {
	display: grid;
	grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 52px;
	column-gap: 16px;
	row-gap: 0;
	grid-template-areas: "ph tt pl" "ph og pl" ". ds ." ". ch .";
	padding: clamp(16px, 2vw, 28px);
}
.thecv-steps--acc .thecv-steps__phase { grid-area: ph; margin: 0; justify-self: start; }
.thecv-steps--acc .thecv-steps__title { grid-area: tt; margin: 0; }
.thecv-steps--acc .thecv-steps__org { grid-area: og; margin: .25rem 0 0; }
.thecv-steps--acc .thecv-steps__desc { grid-area: ds; margin: 1rem 0 0; max-width: 52ch; }
.thecv-steps--acc .thecv-steps__chips { grid-area: ch; margin: .75rem 0 0; }
.thecv-steps--acc .thecv-steps__pl { display: none; }
.thecv-steps--acc.is-acc .thecv-steps__item { cursor: pointer; }
.thecv-steps--acc.is-acc .thecv-steps__desc, .thecv-steps--acc.is-acc .thecv-steps__chips { cursor: auto; }
.thecv-steps--acc.is-acc .thecv-steps__item:not(.is-open) .thecv-steps__desc, .thecv-steps--acc.is-acc .thecv-steps__item:not(.is-open) .thecv-steps__chips { display: none; }
.thecv-steps--acc.is-acc .thecv-steps__pl {
	display: grid; place-items: center; grid-area: pl; grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 50%;
	background: var(--thecv-text); color: var(--thecv-bg); transition: transform .3s cubic-bezier(.2, .75, .2, 1), background-color .16s ease, color .16s ease;
}
.thecv-steps--acc .thecv-steps__pl svg { width: 20px; height: 20px; }
.thecv-steps--acc .thecv-steps__item.is-open .thecv-steps__pl { transform: rotate(45deg); background: var(--thecv-highlight); color: var(--thecv-text); }
.thecv-steps__toggle { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; }
.thecv-steps__toggle:focus-visible { outline: 3px solid var(--thecv-text); outline-offset: 4px; }
@media (max-width: 700px) {
	.thecv-steps--acc .thecv-steps__body { grid-template-columns: minmax(0, 1fr) 48px; row-gap: .5rem; grid-template-areas: "ph ph" "tt pl" "og pl" "ds ds" "ch ch"; }
	.thecv-steps--acc.is-acc .thecv-steps__pl { width: 48px; height: 48px; grid-row: 2 / span 2; }
}
@media (prefers-reduced-motion: reduce) { .thecv-steps--acc .thecv-steps__pl { transition: none; } }

/* Certificates without the award icon: name, "Issuer, year" and a round ink arrow button (the link text stays for screen readers). */
.thecv-certs__icon:not(.thecv-certs__icon--logo) { display: none; }
.thecv-certs__list {
	display: grid;
}
.thecv-certs__row { grid-column: auto; display: grid; grid-template-columns: auto auto minmax(0, 1fr) 48px; column-gap: 0; row-gap: .35rem; align-items: center; padding: clamp(16px, 1.8vw, 20px) clamp(18px, 2vw, 24px); }
.thecv-certs__row > .thecv-certs__icon--logo { grid-column: 1 / -1; grid-row: 1; width: 48px; height: 48px; margin-bottom: .25rem; }
.thecv-certs__main { display: contents; }
.thecv-certs__name { grid-column: 1 / 4; grid-row: 2; font-size: clamp(1.1875rem, 1.6vw, 1.375rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.thecv-certs__issuer { grid-column: 1; grid-row: 3; font-size: .9375rem; opacity: .75; }
.thecv-certs__year { grid-column: 2; grid-row: 3; justify-self: start; text-align: left; font-family: inherit; font-size: .9375rem; font-weight: 400; font-variant-numeric: normal; letter-spacing: 0; opacity: .75; }
.thecv-certs__year::before { content: ", "; white-space: pre; }
.thecv-certs__link {
	grid-column: 4; grid-row: 2 / span 2; justify-self: end; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
	background: var(--thecv-text); color: var(--thecv-bg); font-size: 0; letter-spacing: 0; text-decoration: none; transition: background-color .16s ease, color .16s ease, transform .26s cubic-bezier(.2, .75, .2, 1);
}
.thecv-certs__link > .thecv-certs__arrow { display: grid; place-items: center; line-height: 0; }
.thecv-certs__arrow svg { display: block; width: 20px; height: 20px; }
.thecv-certs__link:hover .thecv-certs__arrow { transform: translate(2px, -2px); }
.thecv-certs__arrow { transition: transform .2s ease; }
.thecv-certs__link:hover, .thecv-certs__link:focus-visible { background: var(--thecv-highlight); color: var(--thecv-text); text-decoration: none; }

/* =====================================================================
   Outside work (Hobbies): four tall photos, lime tag on the photo, lowercase title and one soft line underneath.
   ===================================================================== */
.thecv-clients--highlights.thecv-hobbies .thecv-clients__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.thecv-clients--highlights.thecv-hobbies .thecv-clients__grid > .thecv-clients__card { gap: 12px; grid-template-rows: auto 1fr; }
.thecv-hobbies .thecv-clients__media { aspect-ratio: 3 / 4; overflow: hidden; }
@media (hover: hover) and (pointer: fine) { .thecv-clients--highlights.thecv-hobbies .thecv-clients__card:hover .thecv-clients__img { transform: scale(1.05); } }
.thecv-hobbies .thecv-clients__title { font-size: clamp(1.25rem, 1.9vw, 1.625rem); letter-spacing: -.02em; line-height: 1.1; }
.thecv-hobbies .thecv-clients__result { margin: .35rem 0 0; max-width: none; font-size: .9375rem; font-weight: 400; color: var(--thecv-text-soft); }
@media (max-width: 900px) { .thecv-clients--highlights.thecv-hobbies .thecv-clients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.thecv-clients--highlights.thecv-hobbies .thecv-clients__heading { text-transform: none; }

/* =====================================================================
   Gallery (thecv/gallery): photo cards on a wheel, dark stage. Without JS (and in the editor) the cards are a plain scrolling row.
   ===================================================================== */
.thecv-gallery__head { margin-bottom: clamp(1.75rem, 4vw, 3.5rem); }
.thecv-gallery__heading { margin: 0; font-size: clamp(2.75rem, 7.4vw, 7.5rem); font-weight: 700; letter-spacing: -.04em; line-height: .9; text-transform: none; }
.thecv-gallery__intro { margin: 1rem 0 0; max-width: 34ch; font-size: 1.0625rem; }
.thecv-gw {
	--cw: min(360px, 26vw);
	background: radial-gradient(ellipse 52% 62% at 50% 40%, rgba(255,255,255,.075), transparent 72%), radial-gradient(ellipse 90% 46% at 50% 112%, rgba(255,255,255,.035), transparent 70%), linear-gradient(180deg, #0d0d0d 0%, #050505 100%);
	color: var(--thecv-bg); border-radius: 4px; overflow: hidden;
}
.thecv-gw__v { position: relative; perspective: 1100px; height: calc(var(--cw) * 1.72 + 70px); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.thecv-gw__v.drag { cursor: grabbing; }
.thecv-gw__w { position: absolute; inset: 0; transform-style: preserve-3d; }
.thecv-gw__c {
	position: absolute; left: 50%; top: 50%; display: block; width: var(--cw); height: calc(var(--cw) * 1.25); margin: calc(var(--cw) * -.625) 0 0 0;
	transform-origin: 0 50%; transform-style: preserve-3d; cursor: pointer; outline: none; -webkit-user-drag: none; --b: 1;
}
.thecv-gw__c:not([href]) { cursor: inherit; }
.thecv-gw__c img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--cw) * .075);
	backface-visibility: hidden; -webkit-backface-visibility: hidden; filter: brightness(var(--b)); opacity: var(--o, 1); -webkit-user-drag: none; user-select: none;
}
.thecv-gw__c img.thecv-gw__b { transform: rotateY(180deg); }
.thecv-gw__c:focus-visible img { outline: 2px solid var(--thecv-highlight); outline-offset: -2px; }
.thecv-gw__bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 6px clamp(20px, 3vw, 40px) clamp(20px, 3vw, 36px); }
.thecv-gw__cap { min-width: 0; }
.thecv-gw__n { margin: 0; font-size: clamp(1.25rem, 2.6vw, 2.125rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.thecv-gw__n i { font-style: normal; opacity: .5; }
.thecv-gw__s { margin: 6px 0 0; font-size: .875rem; opacity: .7; }
.thecv-gw__ctl { display: flex; align-items: center; gap: 10px; flex: none; }
.thecv-gw__k { font-size: .8125rem; opacity: .7; margin-right: 8px; font-variant-numeric: tabular-nums; }
/* The two buttons are for keyboard and screen reader visitors: out of sight until they get focus. */
.thecv-gw__btn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; border: 0; }
.thecv-gw__btn:focus-visible {
	position: static; width: 48px; height: 48px; clip-path: none; overflow: visible; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
	border: 1.5px solid var(--thecv-highlight); background: transparent; color: var(--thecv-bg); outline: 2px solid var(--thecv-highlight); outline-offset: 3px;
}
.thecv-gw__btn svg { width: 20px; height: 20px; }
@media (max-width: 760px) {
	.thecv-gw { --cw: 40vw; }
	.thecv-gw__v { perspective: 700px; }
	.thecv-gw__bar { flex-direction: column; align-items: flex-start; }
	.thecv-gw__k { display: none; }
}
/* No JavaScript, and the editor preview: a plain row of photos you can scroll. */
.thecv-gw:not(.is-live) .thecv-gw__v { height: auto; perspective: none; cursor: auto; }
.thecv-gw:not(.is-live) .thecv-gw__w { position: static; display: flex; gap: 12px; overflow-x: auto; padding: clamp(16px, 2vw, 28px); transform-style: flat; }
.thecv-gw:not(.is-live) .thecv-gw__c { position: relative; left: auto; top: auto; flex: none; margin: 0; width: min(var(--cw), 60vw); height: auto; aspect-ratio: 4 / 5; transform: none; }
.thecv-gw:not(.is-live) .thecv-gw__c img.thecv-gw__b { display: none; }
.thecv-gw:not(.is-live) .thecv-gw__bar { display: none; }
.thecv-gw__label { position: absolute; left: 10px; bottom: 10px; z-index: 1; padding: 2px 10px; border-radius: 4px; background: var(--thecv-bg); color: var(--thecv-text); font-size: .8125rem; font-weight: 600; }

/* About with a statement and no second paragraph (the Home look): the light, sentence-case statement and soft line are used with or without photos.
   With a second paragraph and no photo (a project's challenge) it keeps the two-column look. */
.thecv-aboutme--centered:not(:has(.thecv-aboutme__col-right)) .thecv-aboutme__heading { font-size: clamp(1.25rem, 2.4vw, 2.125rem); font-weight: 350; line-height: 1.25; letter-spacing: -.015em; text-transform: none; text-wrap: pretty; margin-inline: auto; max-width: 52rem; }
.thecv-aboutme--centered:not(:has(.thecv-aboutme__col-right)) .thecv-aboutme__cols p { font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 350; opacity: .75; color: inherit; text-align: center; }

/* Contact without a form: everything centered, the envelope sits under the heading and above the intro. */
.thecv-contactb--solo .thecv-contactb__heading { text-align: center; margin-left: auto; margin-right: auto; }
.thecv-contactb--solo .thecv-contactb__intro { flex-direction: column; justify-content: center; text-align: center; gap: clamp(10px, 1.4vw, 18px); max-width: 32rem; margin: clamp(12px, 2vw, 24px) auto 0; }
.thecv-contactb--solo .thecv-contactb__intro::before { height: clamp(44px, 4.6vw, 64px); }
.thecv-contactb--solo .thecv-contactb__email { align-items: center; text-align: center; margin-top: clamp(24px, 3vw, 40px); }
.thecv-contactb--solo .thecv-contactb__socials { justify-content: center; margin-top: clamp(20px, 2.4vw, 32px); }

.thecv-cases__stat-value { white-space: nowrap; }
.thecv-contactb--solo .thecv-contactb__grid { grid-template-columns: minmax(0, 60rem); }

/* Page intro: the description sits on the left, the link ("See the work") on the right of the same row. Photos can be switched off. */
.thecv-pbanner__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(1rem, 3vw, 3rem); align-items: end; }
.thecv-pbanner__inner > .thecv-pbanner__title { grid-column: 1 / -1; }
.thecv-pbanner__inner > .thecv-pbanner__desc { grid-column: 1; }
.thecv-pbanner__inner > .thecv-pbanner__look { grid-column: 2; margin: 0; justify-content: flex-end; }
.thecv-pbanner--nophotos .thecv-pbanner__photos { display: none; }
@media (max-width: 700px) { .thecv-pbanner__inner > .thecv-pbanner__look { grid-column: 1; justify-content: flex-start; } }

.thecv-contactb--nosticker .thecv-contactb__intro::before { display: none; }

/* =====================================================================
   About intro, "photo beside the text" (a project's challenge): tall photo left, big lowercase title and text right.
   ===================================================================== */
.thecv-aboutme--split .thecv-aboutme__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); align-items: center; text-align: left; }
.thecv-aboutme--split .thecv-aboutme__media { grid-column: 1 / span 5; grid-row: 1; position: relative; width: auto; aspect-ratio: 4 / 5; border-radius: 4px; rotate: none; }
.thecv-aboutme--split .thecv-aboutme__media:hover .thecv-aboutme__img { transform: none; }
.thecv-aboutme--split .thecv-aboutme__text { grid-column: 7 / span 6; grid-row: 1; display: grid; justify-items: start; align-content: center; gap: 1.25rem; max-width: none; margin: 0; }

.thecv-aboutme--split .thecv-aboutme__heading {
	margin: 0;
	font-size: clamp(1.5rem, 2.7vw, 2.5rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.025em;
	text-align: left;
	text-wrap: pretty;
}
.thecv-aboutme--split .thecv-aboutme__cols { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 0; max-width: 42ch; text-align: left; }
.thecv-aboutme--split .thecv-aboutme__cols p { font-size: clamp(1rem, 1.2vw, 1.125rem); font-weight: 400; line-height: 1.5; color: var(--thecv-text); }
.thecv-aboutme--split .thecv-aboutme__foot, .thecv-aboutme--split .thecv-aboutme__tags, .thecv-aboutme--split .thecv-aboutme__ctas { justify-content: flex-start; align-items: flex-start; }
@media (max-width: 900px) {
	.thecv-aboutme--split .thecv-aboutme__inner { display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem; }
	.thecv-aboutme--split .thecv-aboutme__media { order: 1; max-width: 28rem; width: 100%; }
	.thecv-aboutme--split .thecv-aboutme__text { order: 2; }
}

/* About banner as on the prototype: big lead statement, small line under it, optional buttons, two tilted photos either side. */
.thecv-profile--media .thecv-profile__name { font-size: clamp(1.625rem, 3vw, 2.875rem); font-weight: 500; line-height: 1.14; letter-spacing: -.025em; max-width: none; text-wrap: pretty; margin-inline: auto; }
.thecv-profile--media .thecv-profile__text > :not(.thecv-profile__stats):not(.thecv-profile__links) { max-width: min(760px, 50%); }
.thecv-profile--media .thecv-profile__text > .thecv-profile__links { max-width: min(760px, 70%); }
.thecv-profile__media { left: 4%; right: auto; top: 0; rotate: -4deg; width: clamp(6.875rem, 16%, 13.75rem); }
.thecv-profile__media--b { left: auto; right: 4%; top: clamp(5rem, 11vw, 10rem); rotate: 5deg; width: clamp(6.875rem, 15%, 12.8rem); }
@media (max-width: 900px) {
	.thecv-profile--media .thecv-profile__text > :not(.thecv-profile__stats):not(.thecv-profile__links), .thecv-profile--media .thecv-profile__text > .thecv-profile__links { max-width: 100%; }
	.thecv-profile__media, .thecv-profile__media--b { position: relative; left: auto; right: auto; top: auto; width: 46%; order: -1; }
	.thecv-profile__media { align-self: flex-start; margin-left: 2%; margin-right: 0; }
	.thecv-profile__media--b { order: 3; align-self: flex-end; margin: 0 2% 0 0; }
}

/* Timeline tags as on the prototype: solid dark chips with light text. */
.thecv-steps--acc .thecv-steps__chips { gap: 8px; }
.thecv-steps--acc .thecv-steps__chips li { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 4px; background: var(--thecv-text); color: var(--thecv-bg); font-size: .875rem; font-weight: 600; line-height: 1; }

/* Certificates as on the prototype: title on top, two columns of plain cards with a round arrow. */
.thecv-certs > .thecv-container { display: block; }
.thecv-certs__head { max-width: none; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.thecv-certs__list { grid-column: auto; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.thecv-certs__list > .thecv-certs__row, .thecv-certs__list > .thecv-certs__row:nth-child(n) { background: var(--thecv-card); }
@media (max-width: 700px) { .thecv-certs__list { grid-template-columns: minmax(0, 1fr); } }

/* ---- Final polish to match the prototype ---- */
/* About banner: the big lead text applies with or without photos. */
.thecv-profile__name { font-size: clamp(1.625rem, 3vw, 2.875rem); font-weight: 500; line-height: 1.14; letter-spacing: -.025em; max-width: 40rem; margin-inline: auto; text-wrap: pretty; }
.thecv-profile__intro { font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 400; opacity: .75; margin-inline: auto; }

/* Logo row: label and logos share the same bottom line. */
.thecv-logos-row--marquee .thecv-logos-row__list { align-items: flex-end; }
@media (min-width: 901px) {
	.thecv-logos-row--marquee .thecv-logos-row__label { padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
}

/* Cases head: the intro sits under the heading. */
.thecv-cases__head { display: block; }
.thecv-cases__desc { margin: 16px 0 0; max-width: 34ch; text-align: left; }

/* "View all projects" is a text link with an underline and an arrow, not a button. */
.thecv-clients--highlights .thecv-clients__cta .thecv-btn,
.thecv-clients--highlights .thecv-clients__cta .wp-block-button__link {
	display: inline-flex; align-items: center; gap: 12px; padding: 6px 0; min-height: 0; border: 0; border-radius: 0;
	background: linear-gradient(var(--thecv-text), var(--thecv-text)) 0 100% / 100% 2px no-repeat; color: var(--thecv-text);
	font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 600; letter-spacing: -.01em; text-decoration: none; box-shadow: none;
}
.thecv-clients--highlights .thecv-clients__cta .thecv-btn:hover,
.thecv-clients--highlights .thecv-clients__cta .wp-block-button__link:hover { background-color: transparent; color: var(--thecv-text); background-size: 0 2px; background-position: 100% 100%; }
.thecv-clients--highlights .thecv-clients__cta .thecv-btn__icon,
.thecv-clients--highlights .thecv-clients__cta .wp-block-button__link::after { display: none; }
.thecv-clients--highlights .thecv-clients__cta .thecv-btn::after,
.thecv-clients--highlights .thecv-clients__cta .wp-block-button__link::after {
	content: ""; display: block; width: 1.1em; height: 1.1em; flex: none; background: currentColor; transition: transform .3s ease;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.thecv-clients--highlights .thecv-clients__cta .thecv-btn:hover::after,
.thecv-clients--highlights .thecv-clients__cta .wp-block-button__link:hover::after { transform: translateX(6px); }

/* The challenge: keeps the capital T. */
.thecv-aboutme--split .thecv-aboutme__heading { text-transform: none; }
.thecv-clients--highlights .thecv-clients__cta { justify-content: flex-end; }
@media (max-width: 899px) { .thecv-clients--highlights .thecv-clients__cta { justify-content: flex-start; } }

/* Project cards: the intro text sits right under the title and subtitle; only the link stays at the bottom. */
.thecv-cases__top > .thecv-cases__link { margin-top: clamp(.5rem, 1.5vw, 1.25rem); }

/* The challenge without a photo: a soft color tile keeps the two-column layout instead of leaving the text alone on the left. */
.thecv-aboutme--split:not(:has(.thecv-aboutme__media)) .thecv-aboutme__inner::before {
	content: ""; grid-column: 1 / span 5; grid-row: 1; aspect-ratio: 4 / 5; border-radius: 4px; background: var(--thecv-lilac);
}
.thecv-aboutme--split:not(:has(.thecv-aboutme__media)) .thecv-aboutme__text { grid-column: 7 / span 6; }
@media (max-width: 899px) { .thecv-aboutme--split:not(:has(.thecv-aboutme__media)) .thecv-aboutme__inner::before { display: none; } }

/* Experience / education rows: the date tag and the plus button sit at the top, so a long title or a second line never shifts them. */
.thecv-steps--acc .thecv-steps__body { align-items: start; }
.thecv-steps--acc .thecv-steps__phase { align-self: start; margin-top: max(0px, calc(clamp(1.625rem, 3.4vw, 3.25rem) / 2 - 16px)); }
.thecv-steps--acc.is-acc .thecv-steps__pl { align-self: start; margin-top: clamp(0rem, .4vw, .35rem); }
/* Editor only: empty photo slots in the Gallery wheel. */
.thecv-gw__c--ph { display: block; border: 1.5px dashed color-mix(in srgb, currentColor 40%, transparent); background: color-mix(in srgb, currentColor 8%, transparent); border-radius: 2px; }
.thecv-gw__c--ph .thecv-gw__label { background: transparent; color: inherit; opacity: .7; left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); }

/* Certificates: the icon (or your logo) first, then the name with "Issuer, year", then a round arrow when the card has a link. */
.thecv-certs__row { --cg: clamp(14px, 1.6vw, 20px); display: grid; grid-template-columns: calc(48px + var(--cg)) auto minmax(0, 1fr) 48px; column-gap: 0; row-gap: .2rem; align-items: center; padding: clamp(16px, 1.8vw, 20px) clamp(18px, 2vw, 24px); }
.thecv-certs__row > .thecv-certs__icon, .thecv-certs__row > .thecv-certs__icon:not(.thecv-certs__icon--logo) { display: inline-flex; grid-column: 1; grid-row: 1 / span 2; width: 48px; height: 48px; margin: 0; align-self: center; justify-self: start; }
.thecv-certs__row > .thecv-certs__icon--logo { display: block; }
.thecv-certs__row > .thecv-certs__icon svg { width: 22px; height: 22px; }
.thecv-certs__row .thecv-certs__name { grid-column: 2 / 4; grid-row: 1; align-self: end; }
.thecv-certs__row .thecv-certs__issuer { grid-column: 2; grid-row: 2; align-self: start; }
.thecv-certs__row .thecv-certs__year { grid-column: 3; grid-row: 2; align-self: start; }
.thecv-certs__row > .thecv-certs__link { grid-column: 4; grid-row: 1 / span 2; }

/* =====================================================================
   Black and White palette (brand = ink). Where the brand color was a fill with ink text on it, flip the text or use a neutral.
   ===================================================================== */
.thecv-palette-mono .thecv-contactb { --cb-bg: var(--thecv-brand); --cb-fg: var(--thecv-on-dark); --cb-soft: color-mix(in srgb, var(--thecv-on-dark) 78%, transparent); }
.thecv-palette-mono .thecv-contactb__socials a:has(.thecv-contactb__ico) { background: var(--thecv-on-dark); color: var(--thecv-brand); }
.thecv-palette-mono .thecv-contactb__socials a:has(.thecv-contactb__ico):hover, .thecv-palette-mono .thecv-contactb__socials a:has(.thecv-contactb__ico):focus-visible { background: var(--thecv-highlight); color: var(--thecv-text); }
.thecv-palette-mono .thecv-contactb__heading, .thecv-palette-mono .thecv-contactb__intro, .thecv-palette-mono .thecv-contactb__email a { color: var(--thecv-on-dark); }
.thecv-palette-mono .thecv-contactb__email a { border-color: var(--thecv-on-dark); }
.thecv-palette-mono .thecv-contactb__form { --cb-fg: var(--thecv-text); --cb-bg: var(--thecv-card); --cb-soft: var(--thecv-text-soft); }
.thecv-palette-mono .thecv-hobbies__tile--1 { background: var(--thecv-sand); }