:root {
	--bg: #f8f7f4;
	--surface: #ffffff;
	--text: #0f0f12;
	--muted: #6b6f76;
	--accent: #7c5cff;
	--accent-2: #ff8a5c;
	--line: rgba(15, 15, 18, 0.08);
	--header-h: 76px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--slider-max: 960px;
	--glass: rgba(255, 255, 255, 0.08);
	--glass-border: rgba(255, 255, 255, 0.18);
}

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

html {
	scroll-behavior: smooth;
}

body.studio-theme {
	margin: 0;
	font-family: "DM Sans", system-ui, -apple-system, sans-serif;
	background: var(--bg);
	color: var(--text);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body.nav-open {
	overflow: hidden;
}

body.studio-theme a {
	color: inherit;
	text-decoration: none;
}

.container {
	width: min(calc(100% - 2.5rem), 1120px);
	margin-inline: auto;
}

/* Loader & canvas */
.page-loader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	background: #0a0a0c;
	transition: opacity 0.6s var(--ease), visibility 0.6s;
}

.page-loader.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.page-loader-ring {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.12);
	border-top-color: var(--accent);
	animation: spin 0.9s linear infinite;
}

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

#studio-motion-canvas {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

/* Header */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	height: var(--header-h);
	display: flex;
	align-items: center;
	background: rgba(248, 247, 244, 0.72);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid transparent;
	transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.site-header.is-scrolled {
	background: rgba(248, 247, 244, 0.92);
	border-bottom-color: var(--line);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
}

.header-inner {
	width: min(calc(100% - 2rem), 1200px);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.header-end {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-left: auto;
	min-width: 0;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
}

.brand-icon {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	box-shadow: 0 0 20px rgba(124, 92, 255, 0.6);
	animation: pulseGlow 2.5s ease-in-out infinite;
}

@keyframes pulseGlow {
	0%, 100% { box-shadow: 0 0 12px rgba(124, 92, 255, 0.5); }
	50% { box-shadow: 0 0 24px rgba(255, 138, 92, 0.7); }
}

.brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.brand-text strong {
	font-family: "Syne", sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.brand-text small {
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.primary-nav {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.primary-nav .menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 0.1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-nav a {
	position: relative;
	display: block;
	padding: 0.45rem 0.65rem;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--muted);
	transition: color 0.25s var(--ease);
}

.primary-nav a .menu-label {
	position: relative;
	z-index: 1;
}

.primary-nav a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: rgba(124, 92, 255, 0.08);
	opacity: 0;
	transform: scale(0.85);
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.primary-nav a:hover,
.primary-nav a.is-active {
	color: var(--text);
}

.primary-nav a:hover::before,
.primary-nav a.is-active::before {
	opacity: 1;
	transform: scale(1);
}

.nav-cta {
	margin-left: 0.5rem;
	padding: 0.55rem 1rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: #fff !important;
	background: linear-gradient(135deg, var(--accent), #5b8cff);
	border-radius: 999px;
	box-shadow: 0 4px 20px rgba(124, 92, 255, 0.35);
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease) !important;
}

.nav-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(124, 92, 255, 0.45);
}

.nav-cta::before {
	display: none !important;
}

.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.1rem;
	flex-shrink: 0;
	margin-left: 0.15rem;
	padding: 0.3rem 0.5rem;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(8px);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.lang-switch__btn {
	color: var(--muted);
	padding: 0.12rem 0.32rem;
	border-radius: 999px;
	transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.lang-switch__btn:hover,
.lang-switch__btn.is-active {
	color: var(--text);
}

.lang-switch__btn.is-active {
	background: var(--surface);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.lang-switch__sep {
	color: var(--muted);
	opacity: 0.45;
	font-weight: 400;
}

body.studio-front .lang-switch {
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.1);
}

body.studio-front .lang-switch__btn {
	color: rgba(255, 255, 255, 0.65);
}

body.studio-front .lang-switch__btn.is-active,
body.studio-front .lang-switch__btn:hover {
	color: #fff;
}

body.studio-front .lang-switch__btn.is-active {
	background: rgba(255, 255, 255, 0.16);
}

body.studio-front .site-header.is-scrolled .lang-switch {
	border-color: var(--line);
	background: rgba(255, 255, 255, 0.55);
}

body.studio-front .site-header.is-scrolled .lang-switch__btn {
	color: var(--muted);
}

body.studio-front .site-header.is-scrolled .lang-switch__btn.is-active,
body.studio-front .site-header.is-scrolled .lang-switch__btn:hover {
	color: var(--text);
}

body.studio-front .site-header.is-scrolled .lang-switch__btn.is-active {
	background: var(--surface);
}

.header-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2px;
	width: 0;
	background: linear-gradient(90deg, var(--accent), var(--accent-2));
	opacity: 0;
	transition: opacity 0.3s;
}

body.studio-front .header-progress {
	opacity: 1;
}

.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface);
	padding: 0;
	cursor: pointer;
}

.nav-toggle-lines {
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: center;
	justify-content: center;
}

.nav-toggle-lines span {
	display: block;
	width: 18px;
	height: 1.5px;
	background: var(--text);
	border-radius: 2px;
	transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}

.nav-toggle.is-active .nav-toggle-lines span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle.is-active .nav-toggle-lines span:nth-child(2) {
	opacity: 0;
}

.nav-toggle.is-active .nav-toggle-lines span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* Video embed */
.video-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #000;
}

.video-bg iframe,
.video-bg video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/* Welcome */
.welcome {
	padding: calc(var(--header-h) + 3rem) 1.5rem 4rem;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.welcome-shell,
.cv-shell {
	position: relative;
	z-index: 1;
	width: min(calc(100% - 2rem), 1180px);
	margin-inline: auto;
}

.welcome-inner {
	width: min(100%, 860px);
	margin-inline: auto;
	text-align: left;
}

/* About — bento layout */
.about-bento {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 1.15rem;
}

.about-bento-hero {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
	gap: 2rem 2.5rem;
	align-items: center;
	padding: 1.65rem 1.85rem;
	border-radius: 1.5rem;
	border: 1px solid rgba(124, 92, 255, 0.14);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(124, 92, 255, 0.05) 100%);
	box-shadow: 0 24px 60px rgba(124, 92, 255, 0.08);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.about-bento-hero::before {
	content: "";
	position: absolute;
	inset: -40%;
	background:
		conic-gradient(from 0deg, rgba(124, 92, 255, 0.14), rgba(255, 138, 92, 0.16), rgba(255, 120, 160, 0.12), rgba(124, 92, 255, 0.14));
	animation: aboutHeroAura 14s linear infinite;
	filter: blur(28px);
	opacity: 0.55;
	z-index: 0;
}

.about-bento-hero::after {
	content: "";
	position: absolute;
	inset: 1px;
	border-radius: calc(1.5rem - 1px);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 247, 244, 0.96) 100%);
	z-index: 0;
}

.about-bento-hero > * {
	position: relative;
	z-index: 1;
}

.about-bento-portrait {
	margin: 0;
	position: relative;
	overflow: hidden;
	border-radius: 28px;
}

.about-bento-intro .welcome-kicker {
	margin-bottom: 0.65rem;
}

.about-bento-quote {
	grid-column: span 5;
	margin: 0;
	align-self: stretch;
	display: flex;
	align-items: center;
	text-align: left;
}

.about-bento-quote p {
	text-align: left;
}

.about-bento-services {
	grid-column: span 7;
	padding: 1.35rem 1.45rem;
	border-radius: 1.25rem;
	border: 1px solid var(--line);
	background: #fff;
	box-shadow: 0 16px 40px rgba(15, 15, 18, 0.05);
}

.about-bento-services .welcome-services-kicker {
	margin-bottom: 0.85rem;
	text-align: left;
}

.about-service-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.55rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.about-service-grid li {
	padding: 0.72rem 0.85rem;
	border-radius: 0.8rem;
	border: 1px solid var(--line);
	background: linear-gradient(180deg, #fff, rgba(248, 247, 244, 0.9));
	font-size: 0.84rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--text);
	transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease), background 0.28s var(--ease);
}

.about-service-grid li:nth-child(1) { --chip-accent: rgba(124, 92, 255, 0.14); --chip-border: rgba(124, 92, 255, 0.28); }
.about-service-grid li:nth-child(2) { --chip-accent: rgba(91, 140, 255, 0.14); --chip-border: rgba(91, 140, 255, 0.28); }
.about-service-grid li:nth-child(3) { --chip-accent: rgba(255, 138, 92, 0.14); --chip-border: rgba(255, 138, 92, 0.28); }
.about-service-grid li:nth-child(4) { --chip-accent: rgba(255, 120, 160, 0.14); --chip-border: rgba(255, 120, 160, 0.28); }
.about-service-grid li:nth-child(5) { --chip-accent: rgba(72, 199, 142, 0.14); --chip-border: rgba(72, 199, 142, 0.28); }
.about-service-grid li:nth-child(6) { --chip-accent: rgba(255, 196, 86, 0.16); --chip-border: rgba(255, 196, 86, 0.32); }
.about-service-grid li:nth-child(7) { --chip-accent: rgba(124, 92, 255, 0.12); --chip-border: rgba(124, 92, 255, 0.24); }

.about-service-grid li:hover {
	transform: translateY(-4px) scale(1.02);
	border-color: var(--chip-border, rgba(124, 92, 255, 0.28));
	background: linear-gradient(180deg, #fff, var(--chip-accent, rgba(124, 92, 255, 0.08)));
	box-shadow: 0 12px 28px rgba(124, 92, 255, 0.12);
}

.about-bento-skills .about-block--animation {
	background: linear-gradient(145deg, #fff 0%, rgba(124, 92, 255, 0.08) 100%);
}

.about-bento-skills .about-block--illustration {
	background: linear-gradient(145deg, #fff 0%, rgba(255, 138, 92, 0.08) 100%);
}

.about-bento-skills {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.15rem;
}

.about-bento-skills .about-block {
	margin-bottom: 0;
}

.about-bento-story {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1.35fr 0.85fr;
	gap: 1.15rem;
	align-items: stretch;
}

.about-bento-story .about-story-card {
	margin-bottom: 0;
	height: 100%;
}

.about-bento-story .about-story-card--accent {
	transform: translateY(1.25rem);
}

/* CV — masthead + zigzag timeline */
.cv-masthead {
	margin-bottom: 1.25rem;
}

.cv-masthead-copy {
	padding: 0.5rem 0 0;
}

.about-brands-marquee {
	margin-bottom: 2rem;
	padding: 1.15rem 0 1.65rem;
	border-radius: 1.25rem;
	border: 1px solid rgba(124, 92, 255, 0.14);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(124, 92, 255, 0.04));
	box-shadow: 0 16px 40px rgba(124, 92, 255, 0.08);
	overflow: hidden;
}

.about-brands-head {
	padding: 0 1.25rem 0.85rem;
}

.about-brands-marquee-wrap {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding-bottom: 0.35rem;
}

.about-brands-row {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.about-brands-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: aboutBrandsMarquee var(--marquee-duration, 42s) linear infinite;
}

.about-brands-set {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	flex-shrink: 0;
	padding-right: 0.85rem;
}

.about-brands-row--reverse .about-brands-track {
	animation-direction: reverse;
	animation-duration: calc(var(--marquee-duration, 42s) * 0.9);
}

.about-brands-row:hover .about-brands-track {
	animation-play-state: paused;
}

.about-brands-marquee .client-brand {
	flex: 0 0 auto;
	width: auto;
	min-width: 128px;
	max-width: 180px;
	min-height: auto;
	height: 58px;
	padding: 0.55rem 0.85rem;
	border-radius: 0.85rem;
	border: 1px solid rgba(124, 92, 255, 0.12);
	background: #fff;
	box-shadow: 0 8px 20px rgba(15, 15, 18, 0.05);
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.about-brands-marquee .client-brand img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 2rem;
	margin-inline: auto;
	object-fit: contain;
	opacity: 1;
	filter: none;
}

.about-brands-marquee .client-brand[data-brand="microsoft"] img { height: 1.55rem; }
.about-brands-marquee .client-brand[data-brand="ford"] img { height: 2.15rem; }
.about-brands-marquee .client-brand[data-brand="capital-one"] img { height: 1.45rem; }
.about-brands-marquee .client-brand[data-brand="undp"] img { height: 2rem; }
.about-brands-marquee .client-brand[data-brand="lidl"] img { height: 2.1rem; }
.about-brands-marquee .client-brand[data-brand="td-bank"] img { height: 2.25rem; }
.about-brands-marquee .client-brand[data-brand="xbox"] img { height: 1.85rem; }
.about-brands-marquee .client-brand[data-brand="pearson"] img { height: 1.55rem; }
.about-brands-marquee .client-brand[data-brand="telefonica"] img { height: 1.55rem; }
.about-brands-marquee .client-brand[data-brand="lowes"] img { height: 1.55rem; }
.about-brands-marquee .client-brand[data-brand="pwc"] img { height: 1.65rem; }
.about-brands-marquee .client-brand[data-brand="cybc"] img { height: 2rem; }

.about-brands-marquee .client-brand:hover {
	transform: translateY(-3px) scale(1.03);
	box-shadow: 0 14px 28px rgba(124, 92, 255, 0.14);
}

.cv-masthead {
	display: block;
}

.cv-masthead .cv-brands {
	margin: 0;
	padding: 1.15rem 1.2rem 1rem;
	text-align: left;
}

.cv-masthead .cv-brands-kicker,
.cv-masthead .cv-brands-count {
	text-align: left;
}

.cv-masthead .cv-brands-kicker {
	margin-bottom: 0.35rem;
}

.cv-masthead .cv-brands-count {
	margin: 0 0 0.85rem;
	font-size: 0.82rem;
}

.cv-masthead .cv-brands-grid--full {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.45rem;
}

.cv-masthead .cv-brand {
	min-height: 48px;
	padding: 0.45rem 0.55rem;
}

.cv-journey {
	display: grid;
	grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
	gap: 2rem 2.5rem;
	align-items: start;
	padding: 1.5rem;
	border-radius: 1.5rem;
	border: 1px solid rgba(124, 92, 255, 0.16);
	background:
		radial-gradient(circle at 0% 0%, rgba(124, 92, 255, 0.1), transparent 42%),
		radial-gradient(circle at 100% 100%, rgba(255, 138, 92, 0.08), transparent 40%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 247, 244, 0.9));
	box-shadow: 0 24px 60px rgba(124, 92, 255, 0.1);
	position: relative;
	overflow: hidden;
}

.cv-journey .anna-talker {
	position: sticky;
	top: calc(var(--header-h) + 1rem);
}

.anna-talker {
	position: relative;
}

.anna-talker-glow {
	position: absolute;
	inset: -12%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(124, 92, 255, 0.22), transparent 68%);
	opacity: 0;
	transform: scale(0.92);
	transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
	pointer-events: none;
	z-index: 0;
}

.anna-talker.is-speaking .anna-talker-glow {
	opacity: 1;
	transform: scale(1);
	animation: annaGlowPulse 2.4s ease-in-out infinite;
}

.anna-talker-frame {
	position: relative;
	z-index: 1;
}

.cv-timeline {
	position: relative;
	padding: 0.5rem 0;
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
}

.cv-timeline-spine {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
	padding: 0.15rem 0;
	overflow: hidden;
}

.cv-timeline-spine::before {
	content: "";
	position: absolute;
	top: 0.75rem;
	bottom: 0.75rem;
	left: 50%;
	width: 3px;
	transform: translateX(-50%);
	border-radius: 999px;
	background: linear-gradient(180deg, #7c5cff, #5b8cff, #ff8a5c, #7c5cff);
	background-size: 100% 220%;
	animation: timelineFlow 5s linear infinite;
	opacity: 0.55;
	z-index: 0;
}

.cv-timeline-item {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
	gap: 0.85rem 1rem;
	align-items: start;
}

.cv-timeline-item:last-child {
	margin-bottom: 0;
}

.cv-timeline-marker {
	grid-column: 2;
	grid-row: 1;
	width: 14px;
	height: 14px;
	margin-top: 1.35rem;
	justify-self: center;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--tone, var(--accent));
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone, var(--accent)) 18%, transparent);
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.cv-timeline-item.is-anna-active .cv-timeline-marker {
	transform: scale(1.25);
	box-shadow: 0 0 0 10px color-mix(in srgb, var(--tone, var(--accent)) 24%, transparent);
	animation: markerPulse 1.6s ease-in-out infinite;
}

.cv-timeline-item--tone-violet { --tone: #7c5cff; }
.cv-timeline-item--tone-blue { --tone: #5b8cff; }
.cv-timeline-item--tone-coral { --tone: #ff8a5c; }
.cv-timeline-item--tone-mint { --tone: #48c78e; }
.cv-timeline-item--tone-gold { --tone: #ffc456; }

.cv-timeline-item--tone-violet .cv-timeline-card {
	border-color: rgba(124, 92, 255, 0.22);
	background: linear-gradient(135deg, rgba(124, 92, 255, 0.08), #fff 55%);
}

.cv-timeline-item--tone-blue .cv-timeline-card {
	border-color: rgba(91, 140, 255, 0.22);
	background: linear-gradient(135deg, rgba(91, 140, 255, 0.08), #fff 55%);
}

.cv-timeline-item--tone-coral .cv-timeline-card {
	border-color: rgba(255, 138, 92, 0.24);
	background: linear-gradient(135deg, rgba(255, 138, 92, 0.1), #fff 55%);
}

.cv-timeline-item--tone-mint .cv-timeline-card {
	border-color: rgba(72, 199, 142, 0.24);
	background: linear-gradient(135deg, rgba(72, 199, 142, 0.1), #fff 55%);
}

.cv-timeline-item--tone-gold .cv-timeline-card {
	border-color: rgba(255, 196, 86, 0.28);
	background: linear-gradient(135deg, rgba(255, 196, 86, 0.12), #fff 55%);
}

.cv-timeline-item--tone-violet .cv-timeline-card h3 { color: #7c5cff; }
.cv-timeline-item--tone-blue .cv-timeline-card h3 { color: #5b8cff; }
.cv-timeline-item--tone-coral .cv-timeline-card h3 { color: #e86f42; }
.cv-timeline-item--tone-mint .cv-timeline-card h3 { color: #2fa56f; }
.cv-timeline-item--tone-gold .cv-timeline-card h3 { color: #c98a12; }

.cv-timeline-spine .cv-timeline-item,
.cv-timeline-spine .cv-timeline-card {
	position: relative;
	z-index: 1;
}

.cv-timeline-card {
	padding: 1.15rem 1.25rem;
	border-radius: 1rem;
	border: 1px solid var(--line);
	background: #fff;
	box-shadow: 0 10px 28px rgba(15, 15, 18, 0.05);
	transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}

.cv-timeline-item--right .cv-timeline-card {
	grid-column: 3;
}

.cv-timeline-item--left .cv-timeline-card {
	grid-column: 1;
	grid-row: 1;
}

.cv-timeline-item--lead .cv-timeline-marker,
.cv-timeline-item--closing .cv-timeline-marker {
	display: none;
}

.cv-timeline-item--bookend {
	grid-template-columns: 1fr;
}

.cv-timeline-item--bookend .cv-timeline-card {
	grid-column: 1;
	max-width: 100%;
}

.cv-timeline-item--lead .cv-timeline-card,
.cv-timeline-item--closing .cv-timeline-card {
	border-left: 4px solid var(--tone, var(--accent));
	background: #fff;
	box-shadow: 0 12px 32px rgba(124, 92, 255, 0.08);
}

.cv-timeline-item--lead .cv-timeline-card {
	background: linear-gradient(135deg, rgba(124, 92, 255, 0.06), #fff 72%);
}

.cv-timeline-item--closing .cv-timeline-card {
	border-left-color: var(--tone, var(--accent-2));
	background: linear-gradient(135deg, rgba(255, 196, 86, 0.1), #fff 72%);
}

.cv-timeline-item--lead .cv-timeline-card h3 {
	color: #7c5cff;
}

.cv-timeline-item--closing .cv-timeline-card h3 {
	color: #c98a12;
}

.cv-timeline-card h3 {
	margin: 0 0 0.55rem;
	font-family: "Syne", sans-serif;
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--accent);
}

.cv-timeline-card p {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.75;
	color: var(--muted);
}

[data-anna-chapter].is-anna-active .cv-timeline-card {
	border-color: rgba(124, 92, 255, 0.3);
	box-shadow: 0 16px 40px rgba(124, 92, 255, 0.12);
	transform: translateY(-2px);
}

.cv-timeline-item--left.is-anna-active .cv-timeline-card {
	transform: translateY(-2px) translateX(-4px);
}

.cv-timeline-item--right.is-anna-active .cv-timeline-card {
	transform: translateY(-2px) translateX(4px);
}

.welcome-hero {
	display: grid;
	grid-template-columns: minmax(220px, 280px) 1fr;
	gap: 2rem 2.5rem;
	align-items: center;
	margin-bottom: 2rem;
}

.welcome-portrait {
	margin: 0;
	position: relative;
}

.welcome-portrait::before {
	content: "";
	position: absolute;
	inset: -10px;
	border-radius: 28px;
	background: linear-gradient(135deg, rgba(124, 92, 255, 0.18), rgba(255, 138, 92, 0.22));
	z-index: 0;
}

.welcome-portrait img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	border-radius: 22px;
	box-shadow:
		0 20px 50px rgba(15, 15, 18, 0.14),
		0 4px 16px rgba(15, 15, 18, 0.08);
	border: 3px solid var(--surface);
}

.welcome-hero-copy h1 {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 5.5vw, 3.25rem);
	font-weight: 300;
	letter-spacing: -0.04em;
	line-height: 1.08;
	text-align: left;
}

.welcome-founder {
	margin: 1.25rem 0 0;
	font-family: "Syne", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--accent);
}

.welcome-hero-copy .welcome-lead {
	margin: 0;
}

.welcome-kicker {
	margin: 0 0 1rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.welcome h1 {
	margin: 0 0 1.5rem;
	font-size: clamp(2rem, 5.5vw, 3.25rem);
	font-weight: 300;
	letter-spacing: -0.04em;
	line-height: 1.08;
}

.welcome-lead {
	margin: 0 0 2rem;
	font-size: clamp(1rem, 2.2vw, 1.15rem);
	color: var(--muted);
	line-height: 1.7;
}

.welcome-contact {
	margin-bottom: 2rem;
}

.welcome-contact p {
	margin: 0;
	font-size: 1rem;
	color: var(--text);
	line-height: 1.7;
}

.welcome-contact a {
	border-bottom: 1px solid currentColor;
	transition: color 0.2s var(--ease);
}

.welcome-sep {
	margin: 0 0.45rem;
	color: var(--muted);
}

.welcome-contact-note {
	margin: 0.75rem 0 0;
	font-size: 0.95rem;
	color: var(--muted);
}

.welcome-contact a:hover {
	color: var(--muted);
}

.welcome-services-kicker {
	margin: 0 0 1rem;
	text-align: center;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
}

.welcome-services {
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.65rem 1rem;
}

.welcome-services li {
	font-size: 0.875rem;
	color: var(--text);
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg);
}

.welcome-about {
	text-align: left;
	border-top: 1px solid var(--line);
	padding-top: 2rem;
}

.welcome-about p {
	margin: 0 0 1.25rem;
	font-size: 0.975rem;
	color: var(--muted);
	line-height: 1.75;
}

.welcome-about p:last-child {
	margin-bottom: 0;
}

/* Home hero — full-screen background videos */
.home-hero {
	position: relative;
	width: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

.home-hero-videos {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
}

.home-video-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.4s var(--ease);
}

.home-video-slide.is-active {
	opacity: 1;
}

.home-video-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #000;
}

.home-video-bg iframe,
.home-video-bg video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 100vh;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	border: 0;
	pointer-events: none;
}

.home-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.38) 100%),
		radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.18) 100%);
	pointer-events: none;
}

.home-hero-fx {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}

.home-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.12;
	animation: orbFloat 14s ease-in-out infinite;
}

.home-orb--a {
	width: 480px;
	height: 480px;
	background: radial-gradient(circle, rgba(255, 180, 100, 0.6), transparent 70%);
	top: -15%;
	left: -10%;
}

.home-orb--b {
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(100, 160, 255, 0.5), transparent 70%);
	bottom: -10%;
	right: -8%;
	animation-delay: -5s;
}

.home-hero-grain {
	position: absolute;
	inset: 0;
	opacity: 0.03;
	background-image: radial-gradient(circle at 20% 20%, #fff 0.5px, transparent 0.6px);
	background-size: 3px 3px;
}

@keyframes orbFloat {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(12px, -18px) scale(1.05); }
}

.home-hero-content {
	position: relative;
	z-index: 3;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: calc(var(--header-h) + 2rem) 1.5rem 2.5rem;
	text-align: center;
}

.home-hero-overlay {
	max-width: 720px;
	margin: auto 0;
}

.home-hero-brand {
	margin: 0 0 1rem;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.home-hero-slogan-panel {
	position: relative;
	padding: 1.35rem 1.6rem 1.5rem;
	margin-bottom: 0.85rem;
	border-radius: 22px;
	background: rgba(6, 8, 18, 0.42);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow:
		0 24px 80px rgba(0, 0, 0, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	overflow: hidden;
	transition: border-color 0.6s var(--ease), box-shadow 0.6s var(--ease), background 0.6s var(--ease);
}

.home-hero-slogan-panel.is-switching {
	animation: panelPulse 0.7s var(--ease-out);
}

.home-hero-slogan-glow {
	position: absolute;
	inset: -40%;
	background: radial-gradient(circle at 50% 50%, var(--slogan-glow, rgba(255, 200, 100, 0.22)), transparent 58%);
	opacity: 0.85;
	pointer-events: none;
	transition: background 0.7s var(--ease);
}

.home-hero-slogan-bar {
	display: block;
	height: 3px;
	width: 0;
	margin-top: 1rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--slogan-accent-a, #ffd166), var(--slogan-accent-b, #ff8c42));
	box-shadow: 0 0 20px var(--slogan-glow-strong, rgba(255, 180, 80, 0.55));
	transition: background 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.home-hero-slogan-bar.is-active {
	animation: sloganBarGrow 1.1s var(--ease-out) forwards;
}

.home-hero-slogan {
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: "Syne", sans-serif;
	font-size: clamp(1.55rem, 4.8vw, 2.9rem);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.03em;
	min-height: 2.4em;
	perspective: 900px;
}

.home-hero-slogan .slogan-line {
	display: inline;
}

.home-hero-slogan.is-changing {
	opacity: 0;
	transform: translateY(18px) scale(0.96);
	filter: blur(10px);
	transition: opacity 0.34s var(--ease), transform 0.34s var(--ease), filter 0.34s var(--ease);
}

.home-hero-slogan.is-animating {
	opacity: 1;
	transform: none;
	filter: none;
}

.home-hero-slogan .slogan-word {
	display: inline-block;
	position: relative;
	opacity: 0;
	transform-origin: 50% 100%;
	transform: translateY(1.4em) scale(0.72) rotateX(42deg);
	filter: blur(14px);
	background: linear-gradient(135deg, var(--slogan-accent-a, #fff6d8), var(--slogan-accent-b, #ffd166));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: sloganImpact 1s var(--ease-out) forwards;
}

.home-hero-slogan .slogan-shine {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		transparent 0%,
		transparent 42%,
		rgba(255, 255, 255, 0.55) 50%,
		transparent 58%,
		transparent 100%
	);
	transform: translateX(-120%);
	opacity: 0;
	pointer-events: none;
}

.home-hero-slogan.is-revealed .slogan-shine {
	animation: sloganShine 1.1s var(--ease-out) 0.15s forwards;
}

/* Slide 1 — warm ember vs teal/magenta tech bg */
.home-hero[data-slogan-theme="theme-ember"] {
	--slogan-accent-a: #fff4d6;
	--slogan-accent-b: #ffb347;
	--slogan-glow: rgba(255, 170, 60, 0.28);
	--slogan-glow-strong: rgba(255, 150, 50, 0.65);
	--slogan-panel-border: rgba(255, 190, 90, 0.35);
}

.home-hero[data-slogan-theme="theme-ember"] .home-hero-slogan .slogan-word {
	text-shadow: 0 0 30px rgba(255, 160, 50, 0.35);
}

.home-hero[data-slogan-theme="theme-ember"] .home-hero-slogan-panel {
	border-color: var(--slogan-panel-border);
}

/* Slide 2 — aurora cyan vs dark blue network bg */
.home-hero[data-slogan-theme="theme-aurora"] {
	--slogan-accent-a: #e8fffe;
	--slogan-accent-b: #5efcff;
	--slogan-glow: rgba(80, 255, 245, 0.22);
	--slogan-glow-strong: rgba(60, 240, 255, 0.6);
	--slogan-panel-border: rgba(90, 250, 255, 0.32);
}

.home-hero[data-slogan-theme="theme-aurora"] .home-hero-slogan-panel {
	background: rgba(4, 12, 28, 0.5);
	border-color: var(--slogan-panel-border);
}

/* Slide 3 — bloom rose vs blue data-flow bg */
.home-hero[data-slogan-theme="theme-bloom"] {
	--slogan-accent-a: #ffe8f2;
	--slogan-accent-b: #ff8fab;
	--slogan-glow: rgba(255, 120, 170, 0.24);
	--slogan-glow-strong: rgba(255, 100, 150, 0.58);
	--slogan-panel-border: rgba(255, 130, 175, 0.34);
}

.home-hero[data-slogan-theme="theme-bloom"] .home-hero-slogan-panel {
	background: rgba(10, 8, 22, 0.48);
	border-color: var(--slogan-panel-border);
}

@keyframes panelPulse {
	0% { transform: scale(1); }
	40% { transform: scale(1.015); }
	100% { transform: scale(1); }
}

@keyframes sloganBarGrow {
	from { width: 0; opacity: 0.4; }
	to { width: 72px; opacity: 1; }
}

@keyframes sloganImpact {
	0% {
		opacity: 0;
		transform: translateY(1.4em) scale(0.72) rotateX(42deg);
		filter: blur(14px);
	}
	50% {
		opacity: 1;
		transform: translateY(-10%) scale(1.08) rotateX(0deg);
		filter: blur(0);
	}
	72% {
		transform: translateY(5%) scale(0.97);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1) rotateX(0deg);
		filter: blur(0);
	}
}

@keyframes sloganShine {
	0% {
		transform: translateX(-120%);
		opacity: 0;
	}
	20% { opacity: 1; }
	100% {
		transform: translateX(120%);
		opacity: 0;
	}
}

.home-hero-controls {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	padding: 0 1rem;
	pointer-events: none;
}

.home-hero-controls .slider-btn {
	pointer-events: auto;
}

.slider-btn--glass {
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.slider-btn--glass:hover {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

.home-hero-foot {
	width: min(100%, 480px);
	margin-top: 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.home-hero-dots .video-slider-dot {
	background: rgba(255, 255, 255, 0.35);
}

.home-hero-dots .video-slider-dot.is-active {
	background: #fff;
}

.home-hero-counter {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.55);
	letter-spacing: 0.08em;
}

.home-hero-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.75rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	width: min(100%, 480px);
}

.home-hero-nav a {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.65);
	transition: color 0.2s var(--ease);
}

.home-hero-nav a:hover {
	color: #fff;
}

/* Transparent header on home */
body.studio-front .site-header {
	background: transparent;
	border-bottom-color: transparent;
	backdrop-filter: none;
}

body.studio-front .brand,
body.studio-front .primary-nav a {
	color: rgba(255, 255, 255, 0.88);
}

body.studio-front .primary-nav a:hover {
	color: #fff;
}

body.studio-front .nav-toggle {
	border-color: rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.1);
}

body.studio-front .nav-toggle-lines span {
	background: #fff;
}

body.studio-front .brand-text small {
	color: rgba(255, 255, 255, 0.55);
}

body.studio-front .site-header.is-scrolled {
	background: rgba(10, 10, 12, 0.75);
	backdrop-filter: blur(20px);
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.studio-front .nav-cta {
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

/* Hero extras */
.home-hero-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.pulse-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent-2);
	box-shadow: 0 0 12px var(--accent-2);
	animation: pulseDot 1.8s ease-in-out infinite;
}

@keyframes pulseDot {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.5; transform: scale(0.85); }
}

.home-hero-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.home-hero-tags span {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.35rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(8px);
}

[data-hero-in] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

[data-hero-in].is-in {
	opacity: 1;
	transform: translateY(0);
}

.home-orb--c {
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(124, 92, 255, 0.5), transparent 70%);
	top: 40%;
	right: 15%;
	animation-delay: -8s;
}

.home-shape--ring {
	position: absolute;
	width: 280px;
	height: 280px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	top: 20%;
	left: 10%;
	animation: spinSlow 30s linear infinite;
}

.home-shape--line {
	position: absolute;
	width: 120px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	bottom: 30%;
	right: 20%;
	animation: linePulse 4s ease-in-out infinite;
}

@keyframes spinSlow {
	to { transform: rotate(360deg); }
}

@keyframes linePulse {
	0%, 100% { opacity: 0.3; transform: scaleX(0.8); }
	50% { opacity: 1; transform: scaleX(1.2); }
}

.home-grid-lines {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 60px 60px;
	mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
}

.home-hero-name {
	margin: 0.75rem 0 0;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.home-hero-role {
	margin: 0.35rem 0 0.85rem;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.62);
	max-width: 36ch;
}

.home-scroll-hint {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	text-decoration: none;
	animation: fadeBounce 2.5s ease-in-out infinite;
}

.home-scroll-hint span {
	display: block;
	width: 1px;
	height: 32px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
}

@keyframes fadeBounce {
	0%, 100% { opacity: 0.5; transform: translateX(-50%) translateY(0); }
	50% { opacity: 1; transform: translateX(-50%) translateY(6px); }
}

/* Home — rich content sections */
.home-section-kicker {
	margin: 0 0 0.5rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}

.home-section-title {
	margin: 0;
	font-family: "Syne", sans-serif;
	font-size: clamp(1.75rem, 4vw, 2.6rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.home-section-lead {
	margin: 0.85rem 0 0;
	max-width: 58ch;
	color: var(--muted);
	font-size: 1.02rem;
	line-height: 1.65;
}

.home-section-head {
	margin-bottom: 2.25rem;
}

.home-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 0.7rem 1.25rem;
	border-radius: 999px;
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.28s var(--ease);
}

.home-btn--primary {
	background: var(--accent);
	color: #fff;
	border: 1px solid var(--accent);
}

.home-btn--primary:hover {
	background: #6a4ae8;
	border-color: #6a4ae8;
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(124, 92, 255, 0.28);
}

.home-btn--ghost {
	background: transparent;
	color: var(--text);
	border: 1px solid var(--line);
}

.home-btn--ghost:hover {
	border-color: rgba(124, 92, 255, 0.3);
	background: rgba(124, 92, 255, 0.06);
}

.home-btn--light.home-btn--ghost {
	color: rgba(255, 255, 255, 0.9);
	border-color: rgba(255, 255, 255, 0.28);
}

.home-btn--light.home-btn--primary {
	background: #fff;
	color: var(--text);
	border-color: #fff;
}

/* Intro */
.home-intro {
	position: relative;
	padding: 5rem 0 4rem;
	overflow: hidden;
}

.home-intro-atmosphere {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.home-intro-mesh {
	position: absolute;
	inset: -20%;
	background:
		radial-gradient(circle at 15% 20%, rgba(124, 92, 255, 0.08), transparent 42%),
		radial-gradient(circle at 85% 80%, rgba(255, 138, 92, 0.08), transparent 40%);
}

.home-intro-inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.home-intro-portrait {
	position: relative;
	border-radius: 1.25rem;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(15, 15, 18, 0.12);
}

.home-intro-portrait-ring {
	position: absolute;
	inset: -3px;
	border-radius: 1.35rem;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	opacity: 0.55;
	z-index: 0;
}

.home-intro-portrait img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

.home-intro-kicker {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}

.home-intro-title {
	margin: 0;
	font-family: "Syne", sans-serif;
	font-size: clamp(2rem, 5vw, 3.2rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.home-intro-title .about-title-word {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.8em);
	transition: opacity 0.55s var(--ease-out), transform 0.65s cubic-bezier(0.22, 1.2, 0.36, 1);
	transition-delay: calc(var(--word-i) * 0.06s);
}

.home-intro-title.is-split .about-title-word {
	opacity: 1;
	transform: translateY(0);
}

.home-intro-role {
	margin: 0.65rem 0 1rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--muted);
}

.home-intro-summary,
.home-intro-edu {
	margin: 0 0 1rem;
	color: var(--muted);
	font-size: 1.02rem;
	line-height: 1.7;
}

.home-intro-edu {
	font-size: 0.88rem;
	opacity: 0.9;
}

.home-intro-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin: 1.5rem 0 1rem;
}

.home-intro-contact a {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--accent);
}

/* Stats */
.home-stats {
	padding: 0 0 3rem;
	margin-top: -1rem;
}

.home-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.home-stat {
	padding: 1.35rem 1.25rem;
	border-radius: 1rem;
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: 0 10px 30px rgba(15, 15, 18, 0.04);
	text-align: center;
}

.home-stat-value {
	display: block;
	font-family: "Syne", sans-serif;
	font-size: clamp(1.8rem, 4vw, 2.4rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--accent);
	line-height: 1;
}

.home-stat-label {
	display: block;
	margin-top: 0.45rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Showreel on home */
.home-showreel {
	padding: 1rem 0 3rem;
	background: linear-gradient(180deg, transparent, rgba(124, 92, 255, 0.03));
}

.home-showreel .showcase {
	margin: 0;
}

/* Featured work grid */
.home-featured {
	padding: 4rem 0;
}

.home-work-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 1.25rem;
}

.home-work-card {
	border-radius: 1rem;
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--line);
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.home-work-card:hover {
	transform: translateY(-5px);
	border-color: rgba(124, 92, 255, 0.22);
	box-shadow: 0 20px 50px rgba(124, 92, 255, 0.12);
}

.home-work-card-link {
	display: block;
	color: inherit;
}

.home-work-card-media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(124, 92, 255, 0.08), rgba(255, 138, 92, 0.08));
}

.home-work-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.55s var(--ease);
}

.home-work-card-placeholder {
	width: 100%;
	height: 100%;
	background:
		linear-gradient(135deg, rgba(124, 92, 255, 0.12), rgba(255, 138, 92, 0.1)),
		repeating-linear-gradient(
			-45deg,
			transparent,
			transparent 12px,
			rgba(15, 15, 18, 0.03) 12px,
			rgba(15, 15, 18, 0.03) 24px
		);
}

.home-work-card:hover .home-work-card-media img {
	transform: scale(1.05);
}

.home-work-card-num {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.2rem 0.5rem;
	border-radius: 0.35rem;
	background: rgba(15, 15, 18, 0.72);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.home-work-card-body {
	padding: 1rem 1.1rem 1.15rem;
}

.home-work-card-tag {
	display: inline-block;
	margin-bottom: 0.4rem;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--accent);
}

.home-work-card-title {
	margin: 0 0 0.35rem;
	font-family: "Syne", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.home-work-card-body time {
	font-size: 0.78rem;
	color: var(--muted);
}

.home-featured-foot {
	margin-top: 2rem;
	text-align: center;
}

/* Career timeline */
.home-career {
	padding: 4.5rem 0;
	background: var(--surface);
	border-block: 1px solid var(--line);
}

.home-career-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.25rem;
}

.home-career-item {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
}

.home-career-marker {
	width: 12px;
	height: 12px;
	margin-top: 1.35rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.15);
}

.home-career-card {
	padding: 1.25rem 1.35rem;
	border-radius: 1rem;
	background: var(--bg);
	border: 1px solid var(--line);
	transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.home-career-item:hover .home-career-card {
	border-color: rgba(124, 92, 255, 0.22);
	box-shadow: 0 12px 36px rgba(124, 92, 255, 0.08);
}

.home-career-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-bottom: 0.45rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.home-career-period {
	color: var(--accent);
}

.home-career-company {
	color: var(--muted);
}

.home-career-role {
	margin: 0 0 0.5rem;
	font-family: "Syne", sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
}

.home-career-detail {
	margin: 0;
	color: var(--muted);
	font-size: 0.92rem;
	line-height: 1.6;
}

.home-career-more {
	margin: 2rem 0 0;
	text-align: center;
}

.home-career-more a {
	font-weight: 600;
	color: var(--accent);
}

/* Skills */
.home-skills {
	padding: 4rem 0;
}

.home-skills-inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.5rem;
}

.home-skills-list {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.65rem;
}

.home-skills-list li {
	position: relative;
	padding-left: 1.1rem;
	color: var(--muted);
	font-size: 0.95rem;
	line-height: 1.5;
	opacity: 0;
	transform: translateX(-12px);
	transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
	transition-delay: calc(var(--skill-i) * 0.05s);
}

.home-skills-col.is-revealed .home-skills-list li {
	opacity: 1;
	transform: translateX(0);
}

.home-skills-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
}

.home-tools-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.home-tool-chip {
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--line);
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--text);
}

/* CTA */
.home-cta {
	position: relative;
	padding: 5rem 0;
	overflow: hidden;
}

.home-cta-atmosphere {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 50%, rgba(124, 92, 255, 0.18), transparent 45%),
		radial-gradient(circle at 80% 50%, rgba(255, 138, 92, 0.14), transparent 42%),
		linear-gradient(135deg, #121218, #1a1630);
}

.home-cta-inner {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
}

.home-cta-kicker {
	margin: 0 0 0.5rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.home-cta-title {
	margin: 0;
	font-family: "Syne", sans-serif;
	font-size: clamp(1.8rem, 4.5vw, 2.8rem);
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.03em;
}

.home-cta-lead {
	margin: 1rem 0 0;
	color: rgba(255, 255, 255, 0.68);
	font-size: 1.02rem;
	line-height: 1.65;
}

.home-cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

/* Marquee strip */
.home-strip {
	padding: 1.25rem 0;
	background: var(--text);
	overflow: hidden;
	border-block: 1px solid rgba(255, 255, 255, 0.06);
}

.home-strip-track {
	display: flex;
	width: max-content;
	animation: marquee 28s linear infinite;
}

.home-strip-row {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding-right: 1.5rem;
	font-family: "Syne", sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	white-space: nowrap;
}

.home-strip-row span:nth-child(even) {
	color: var(--accent-2);
	opacity: 0.8;
}

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

/* Quick nav cards */
.home-quick {
	padding: 4rem 1.5rem 5rem;
	background: var(--bg);
}

.home-quick-grid {
	width: min(100%, 960px);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

.home-quick-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
	border-radius: 16px;
	border: 1px solid var(--line);
	background: var(--surface);
	overflow: hidden;
	transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.home-quick-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(124, 92, 255, 0.06), rgba(255, 138, 92, 0.04));
	opacity: 0;
	transition: opacity 0.35s var(--ease);
}

.home-quick-card:hover {
	border-color: rgba(124, 92, 255, 0.25);
	transform: translateY(-4px);
	box-shadow: 0 20px 48px rgba(124, 92, 255, 0.12);
}

.home-quick-card:hover::before {
	opacity: 1;
}

.home-quick-num {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--accent);
	letter-spacing: 0.1em;
}

.home-quick-label {
	font-family: "Syne", sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	position: relative;
	z-index: 1;
}

.home-quick-arrow {
	position: absolute;
	right: 1.25rem;
	bottom: 1.25rem;
	font-size: 1.1rem;
	opacity: 0;
	transform: translate(-8px, 8px);
	transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.home-quick-card:hover .home-quick-arrow {
	opacity: 1;
	transform: translate(0, 0);
}

/* Home — global client logos marquee */
.home-clients {
	position: relative;
	padding: 4.5rem 0 0;
	background: linear-gradient(180deg, var(--bg) 0%, #fff 40%, #f4f2ef 100%);
	border-top: 1px solid var(--line);
	overflow: hidden;
}

.home-clients-glow {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 50% at 20% 30%, rgba(124, 92, 255, 0.1), transparent 60%),
		radial-gradient(ellipse 50% 40% at 80% 50%, rgba(255, 138, 92, 0.08), transparent 55%);
	pointer-events: none;
}

.home-clients-inner {
	position: relative;
	z-index: 1;
	width: min(100%, 1100px);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.home-clients-head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 2.5rem;
}

.home-clients-kicker {
	margin: 0 0 0.65rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
}

.home-clients-head h2 {
	margin: 0 0 0.85rem;
	font-family: "Syne", sans-serif;
	font-size: clamp(1.85rem, 4.5vw, 2.75rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--text);
}

.home-clients-lead {
	margin: 0 0 1.75rem;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--muted);
}

.home-clients-stats {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
}

.home-clients-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
}

.home-clients-stat strong {
	font-family: "Syne", sans-serif;
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--text);
}

.home-clients-stat span {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.home-clients-bar {
	position: relative;
	z-index: 1;
	margin-top: 0.75rem;
	padding: 1.35rem 0 1.55rem;
	background:
		linear-gradient(180deg, #fff7f0 0%, #ffe8d6 48%, #ffd9c2 100%);
	border-top: 1px solid rgba(255, 138, 92, 0.18);
	border-bottom: 1px solid rgba(255, 138, 92, 0.22);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.home-clients-row {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.home-clients-track {
	display: flex;
	align-items: center;
	width: max-content;
	will-change: transform;
	animation: homeClientsMarquee var(--marquee-duration, 55s) linear infinite;
}

.home-clients-set {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	flex-shrink: 0;
	padding-right: 0.9rem;
}

.home-clients-bar:hover .home-clients-track {
	animation-play-state: paused;
}

.home-clients .client-brand {
	--brand-color: #ff8a5c;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 168px;
	min-height: 112px;
	padding: 0.9rem 0.9rem 0.75rem;
	border-radius: 1.1rem;
	background: #fff;
	border: 2px solid color-mix(in srgb, var(--brand-color) 22%, #fff);
	box-shadow:
		0 8px 20px rgba(80, 40, 20, 0.06),
		0 0 0 1px rgba(255, 255, 255, 0.8) inset;
	color: var(--text);
	text-decoration: none;
	transition:
		transform 0.3s var(--ease),
		border-color 0.3s var(--ease),
		box-shadow 0.3s var(--ease),
		background 0.3s var(--ease);
}

.home-clients .client-brand-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
}

.home-clients .client-brand img {
	display: block;
	width: auto;
	max-width: 132px;
	max-height: 44px;
	height: auto;
	object-fit: contain;
	filter: none;
	opacity: 1;
	transition: transform 0.3s var(--ease);
}

.home-clients .client-brand-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.12rem;
	min-height: 2.15rem;
	opacity: 0.55;
	transform: translateY(0);
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.home-clients .client-brand-name {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	color: var(--text);
}

.home-clients .client-brand-site {
	font-size: 0.68rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--brand-color);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1.5px;
}

.home-clients .client-brand:hover,
.home-clients .client-brand:focus-visible {
	transform: translateY(-5px) scale(1.03);
	background: color-mix(in srgb, var(--brand-color) 10%, #fff);
	border-color: var(--brand-color);
	box-shadow:
		0 16px 36px color-mix(in srgb, var(--brand-color) 32%, transparent),
		0 0 0 3px color-mix(in srgb, var(--brand-color) 18%, transparent);
	outline: none;
}

.home-clients .client-brand:hover img,
.home-clients .client-brand:focus-visible img {
	transform: scale(1.06);
}

.home-clients .client-brand:hover .client-brand-meta,
.home-clients .client-brand:focus-visible .client-brand-meta {
	opacity: 1;
	transform: translateY(-1px);
}

.home-clients .client-brand:hover .client-brand-name,
.home-clients .client-brand:focus-visible .client-brand-name {
	color: var(--brand-color);
}

.home-clients .client-brand:hover .client-brand-site,
.home-clients .client-brand:focus-visible .client-brand-site {
	color: var(--brand-color);
}

/* Brand-specific max sizes inside the bar */
.home-clients .client-brand[data-brand="xbox"] img,
.home-clients .client-brand[data-brand="dell"] img,
.home-clients .client-brand[data-brand="lidl"] img,
.home-clients .client-brand[data-brand="cybc"] img {
	max-height: 40px;
	max-width: 56px;
}

.home-clients .client-brand[data-brand="undp"] img {
	max-height: 48px;
	max-width: 40px;
}

.home-clients .client-brand[data-brand="pwc"] img,
.home-clients .client-brand[data-brand="td-bank"] img,
.home-clients .client-brand[data-brand="telefonica"] img,
.home-clients .client-brand[data-brand="spectrum"] img,
.home-clients .client-brand[data-brand="sunbelt"] img {
	max-height: 42px;
	max-width: 118px;
}

@keyframes homeClientsMarquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (max-width: 768px) {
	.home-clients {
		padding-top: 3.25rem;
	}

	.home-clients .client-brand {
		width: 148px;
		min-height: 100px;
	}

	.home-clients .client-brand img {
		max-width: 112px;
		max-height: 38px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-clients-track {
		animation: none !important;
		transform: none !important;
	}
}

/* Scroll reveal */
[data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}

[data-reveal].is-revealed {
	opacity: 1;
	transform: translateY(0);
}

.section-glow {
	position: absolute;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	filter: blur(100px);
	opacity: 0.35;
	pointer-events: none;
}

.section-glow--warm {
	background: radial-gradient(circle, rgba(255, 180, 120, 0.4), transparent 70%);
	top: -10%;
	right: -10%;
}

.section-glow--cool {
	background: radial-gradient(circle, rgba(124, 92, 255, 0.16), transparent 70%);
	top: 10%;
	left: -12%;
}

.welcome-cv {
	padding-top: 3rem;
	padding-bottom: 5rem;
}

.welcome-cv .cv-inner {
	width: min(100%, 860px);
}

.cv-section-head {
	text-align: left;
	margin-bottom: 2.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--line);
}

.cv-section-head h2 {
	margin: 0 0 0.5rem;
	font-family: "Syne", sans-serif;
	font-size: clamp(1.75rem, 4vw, 2.35rem);
	font-weight: 600;
	letter-spacing: -0.03em;
}

.welcome-cv .cv-kicker,
.welcome-cv .cv-role {
	text-align: left;
}

.cv-brands {
	margin: 0 0 2.5rem;
	padding: 2rem 1.75rem 1.75rem;
	text-align: center;
	border-radius: 20px;
	border: 1px solid var(--line);
	background: linear-gradient(180deg, var(--surface) 0%, rgba(124, 92, 255, 0.04) 100%);
	box-shadow: 0 12px 40px rgba(124, 92, 255, 0.08);
}

.cv-brands-kicker {
	margin: 0 0 1.5rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}

.cv-brands-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem 1.5rem;
	align-items: center;
	justify-items: center;
}

.cv-brands-grid--full {
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 1rem;
}

.cv-brands-count {
	margin: -0.75rem 0 1.35rem;
	text-align: center;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--muted);
	letter-spacing: 0.06em;
}

.cv-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 4.5rem;
	padding: 0.85rem 1rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(0, 0, 0, 0.06);
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.cv-brand img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 2.75rem;
	object-fit: contain;
	opacity: 1;
	filter: none;
	transition: transform 0.25s var(--ease);
}

.cv-brand:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(124, 92, 255, 0.12);
	border-color: rgba(124, 92, 255, 0.22);
}

.cv-brand:hover img {
	transform: scale(1.05);
}

.cv-brand[data-brand="microsoft"] img { height: 1.65rem; }
.cv-brand[data-brand="ford"] img { height: 2.5rem; }
.cv-brand[data-brand="capital-one"] img { height: 1.55rem; }
.cv-brand[data-brand="xbox"] img { height: 2rem; }
.cv-brand[data-brand="undp"] img { height: 2.35rem; }
.cv-brand[data-brand="lidl"] img { height: 2.4rem; }
.cv-brand[data-brand="td-bank"] img { height: 2.6rem; }
.cv-brand[data-brand="pearson"] img { height: 1.55rem; }
.cv-brand[data-brand="telefonica"] img { height: 1.55rem; }
.cv-brand[data-brand="lowes"] img { height: 1.55rem; }
.cv-brand[data-brand="pwc"] img { height: 1.7rem; }
.cv-brand[data-brand="cybc"] img { height: 2.1rem; }

.cv-summary p {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--text);
}

.cv-story {
	text-align: left;
}

.cv-story-layout {
	display: grid;
	grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
	gap: 2rem 2.5rem;
	align-items: start;
}

.cv-story-chapters {
	min-width: 0;
}

.anna-talker {
	position: sticky;
	top: calc(var(--header-h) + 1rem);
}

.anna-talker-frame {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.anna-talker-portrait {
	position: relative;
	border-radius: 1.35rem;
	overflow: hidden;
	box-shadow:
		0 20px 50px rgba(124, 92, 255, 0.16),
		0 0 0 1px rgba(124, 92, 255, 0.1);
	transform-origin: center bottom;
	transition: transform 0.45s var(--ease);
}

.anna-talker-portrait img {
	display: block;
	width: 100%;
	height: auto;
}

.anna-talker-mouth {
	position: absolute;
	left: 54%;
	top: 63.5%;
	width: 7.5%;
	height: 3.2%;
	border-radius: 999px;
	background: rgba(120, 45, 70, 0.72);
	transform: translate(-50%, -50%);
	transform-origin: center;
	opacity: 0;
	transition: opacity 0.25s var(--ease);
}

.anna-talker-blink {
	position: absolute;
	left: 50%;
	top: 39%;
	width: 34%;
	height: 8%;
	background: linear-gradient(180deg, rgba(26, 26, 30, 0) 0%, rgba(26, 26, 30, 0.88) 48%, rgba(26, 26, 30, 0) 100%);
	transform: translate(-50%, -50%) scaleY(0);
	transform-origin: center top;
	opacity: 0;
	pointer-events: none;
}

.anna-talker-waves {
	position: absolute;
	left: 66%;
	top: 64%;
	display: flex;
	gap: 0.18rem;
	align-items: flex-end;
	height: 1rem;
	opacity: 0;
	transition: opacity 0.25s var(--ease);
}

.anna-talker-waves span {
	display: block;
	width: 0.22rem;
	height: 0.45rem;
	border-radius: 999px;
	background: rgba(124, 92, 255, 0.75);
}

.anna-talker-bubble {
	position: relative;
	padding: 0.95rem 1.05rem;
	border-radius: 1rem;
	background: #fff;
	border: 1px solid rgba(124, 92, 255, 0.16);
	box-shadow: 0 12px 32px rgba(124, 92, 255, 0.1);
}

.anna-talker-bubble::before {
	content: "";
	position: absolute;
	top: -0.55rem;
	left: 2rem;
	width: 1rem;
	height: 1rem;
	background: #fff;
	border-left: 1px solid rgba(124, 92, 255, 0.16);
	border-top: 1px solid rgba(124, 92, 255, 0.16);
	transform: rotate(45deg);
}

.anna-talker-bubble p {
	margin: 0;
	font-family: "Syne", sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--text);
}

.anna-talker.is-speaking .anna-talker-portrait {
	animation: annaTalkBob 0.55s ease-in-out infinite;
}

.anna-talker.is-speaking .anna-talker-mouth {
	opacity: 1;
	animation: annaMouthTalk 0.34s ease-in-out infinite;
}

.anna-talker.is-speaking .anna-talker-waves {
	opacity: 1;
}

.anna-talker.is-speaking .anna-talker-waves span {
	animation: annaWave 0.8s ease-in-out infinite;
}

.anna-talker.is-speaking .anna-talker-waves span:nth-child(2) {
	animation-delay: 0.12s;
}

.anna-talker.is-speaking .anna-talker-waves span:nth-child(3) {
	animation-delay: 0.24s;
}

.anna-talker.is-blinking .anna-talker-blink {
	animation: annaBlink 0.18s ease-in-out;
}

[data-anna-chapter].is-anna-active {
	border-color: rgba(124, 92, 255, 0.28);
	box-shadow: 0 12px 36px rgba(124, 92, 255, 0.1);
}

@keyframes annaTalkBob {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-3px) rotate(-0.4deg); }
}

@keyframes annaMouthTalk {
	0%, 100% { transform: translate(-50%, -50%) scale(1, 0.55); }
	50% { transform: translate(-50%, -50%) scale(1.15, 1.25); }
}

@keyframes annaWave {
	0%, 100% { transform: scaleY(0.45); opacity: 0.45; }
	50% { transform: scaleY(1.35); opacity: 1; }
}

@keyframes annaBlink {
	0%, 100% { opacity: 0; transform: translate(-50%, -50%) scaleY(0); }
	45%, 55% { opacity: 0.75; transform: translate(-50%, -50%) scaleY(1); }
}

.cv-story-lead,
.cv-story-closing {
	margin: 0 0 2rem;
	font-size: 1.05rem;
	line-height: 1.85;
	color: var(--text);
}

.cv-story-closing {
	margin-top: 0.5rem;
	margin-bottom: 0;
	padding-top: 1.75rem;
	border-top: 1px solid var(--line);
	font-weight: 500;
}

.cv-chapter {
	margin-bottom: 2rem;
	padding: 1.5rem 1.65rem;
	border-radius: 16px;
	border: 1px solid var(--line);
	background: var(--surface);
}

.cv-chapter h3 {
	margin: 0 0 0.85rem;
	font-family: "Syne", sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--text);
}

.cv-chapter p {
	margin: 0;
	font-size: 0.975rem;
	line-height: 1.8;
	color: var(--muted);
}

.about-block {
	margin-bottom: 2rem;
	padding: 1.5rem;
	border-radius: 16px;
	border: 1px solid var(--line);
	background: var(--surface);
}

.about-block h2 {
	margin: 0 0 0.5rem;
	font-family: "Syne", sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
}

.about-block p {
	margin: 0;
	font-size: 0.925rem;
	color: var(--muted);
	line-height: 1.7;
}

#main-content {
	position: relative;
	z-index: 2;
}

/* Footer */
.site-footer {
	padding: 2.5rem 1.5rem;
	background: var(--text);
	color: rgba(255, 255, 255, 0.65);
	border-top: none;
}

.footer-inner {
	width: min(100%, 960px);
	margin-inline: auto;
	display: grid;
	gap: 1.5rem;
	text-align: center;
}

.footer-brand strong {
	display: block;
	font-family: "Syne", sans-serif;
	font-size: 1rem;
	color: #fff;
	margin-bottom: 0.25rem;
}

.footer-brand span {
	font-size: 0.8rem;
}

.footer-nav .menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-nav a {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.55);
	transition: color 0.25s var(--ease);
}

.footer-nav a:hover {
	color: #fff;
}

.footer-copy {
	margin: 0;
	font-size: 0.75rem;
	opacity: 0.45;
}
.home-landing {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: calc(var(--header-h) + 2rem) 1.5rem 3rem;
}

.home-landing-inner {
	width: min(100%, 640px);
	text-align: center;
}

.home-kicker {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.home-landing h1 {
	margin: 0 0 1rem;
	font-size: clamp(2.25rem, 6vw, 3.5rem);
	font-weight: 300;
	letter-spacing: -0.04em;
	line-height: 1;
}

.home-lead {
	margin: 0 0 2.5rem;
	font-size: 1.05rem;
	color: var(--muted);
	line-height: 1.65;
}

.home-nav {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}

.home-nav-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	padding: 1.25rem 1.35rem;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--surface);
	text-align: left;
	transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.home-nav-card:hover {
	border-color: rgba(17, 17, 17, 0.2);
	transform: translateY(-2px);
}

.home-nav-card span {
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.home-nav-card small {
	font-size: 0.8rem;
	color: var(--muted);
	line-height: 1.4;
}

.page-section.showcase {
	padding-top: calc(var(--header-h) + 2rem);
}

.page-section.cv {
	padding-top: calc(var(--header-h) + 2rem);
}

.page-section.project-contact,
.page-section.project-wizard-band {
	padding-top: 0;
}

/* Showcase / central slider */
.showcase {
	min-height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4rem 1.5rem 3rem;
}

.showcase-head {
	text-align: center;
	margin-bottom: 2.5rem;
}

.showcase-kicker {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.showcase-head h1,
.showcase-head h2 {
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.video-slider {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1rem;
	width: min(100%, calc(var(--slider-max) + 8rem));
	margin-inline: auto;
}

/* Never constrain the home hero background slider */
.home-hero .video-slider,
.home-hero-videos.video-slider {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	grid-template-columns: none;
	gap: 0;
}

.video-slider-viewport {
	overflow: hidden;
	border-radius: 20px;
	background: var(--surface);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.04),
		0 24px 60px rgba(0, 0, 0, 0.08);
	border: 1px solid var(--line);
}

.video-slider-track {
	position: relative;
}

.video-slide {
	display: none;
}

.video-slide.is-active {
	display: block;
	animation: slideIn 0.55s var(--ease);
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: scale(0.985);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.video-slide-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.slider-btn {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--text);
	font-size: 1.1rem;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background 0.2s var(--ease), transform 0.2s var(--ease);
	flex-shrink: 0;
}

.slider-btn:hover {
	background: var(--text);
	color: var(--surface);
}

.slider-btn:active {
	transform: scale(0.96);
}

.video-slider-foot {
	width: min(100%, var(--slider-max));
	margin: 1.75rem auto 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
}

.video-slider-meta {
	min-width: 0;
}

.video-slider-tag {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.video-slider-title {
	margin: 0;
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 400;
	letter-spacing: -0.02em;
	transition: opacity 0.3s var(--ease);
}

.video-slider-controls {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75rem;
	flex-shrink: 0;
}

.video-slider-counter {
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--muted);
}

.video-slider-dots {
	display: flex;
	gap: 0.45rem;
}

.video-slider-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: rgba(17, 17, 17, 0.15);
	cursor: pointer;
	transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}

.video-slider-dot.is-active {
	background: var(--text);
	transform: scale(1.25);
}

/* CV */
.cv {
	padding: 4rem 1.5rem;
	background: var(--bg);
	border-top: 1px solid var(--line);
}

.cv-inner {
	width: min(100%, 760px);
	margin-inline: auto;
}

.cv-kicker {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	text-align: center;
}

.cv-header {
	text-align: center;
	margin-bottom: 3rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--line);
}

.cv-header h2 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	font-weight: 400;
	letter-spacing: -0.03em;
}

.cv-role {
	margin: 0 0 1rem;
	font-size: 0.95rem;
	color: var(--muted);
}

.cv-contact {
	margin: 0;
	font-size: 0.875rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.35rem 0.5rem;
}

.cv-contact a {
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s var(--ease);
}

.cv-contact a:hover {
	border-bottom-color: currentColor;
}

.cv-sep {
	color: var(--muted);
}

.cv-block {
	margin-bottom: 2.5rem;
}

.cv-block h3 {
	margin: 0 0 1rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.cv-block > p {
	margin: 0;
	font-size: 0.975rem;
	color: var(--text);
	line-height: 1.75;
}

.cv-tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.cv-tags li {
	font-size: 0.85rem;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
}

.cv-job {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--line);
}

.cv-job:first-of-type {
	padding-top: 0;
}

.cv-job-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

.cv-job h4 {
	margin: 0 0 0.25rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.cv-remote {
	font-weight: 400;
	color: var(--muted);
}

.cv-job-title {
	margin: 0;
	font-size: 0.875rem;
	color: var(--muted);
}

.cv-job-head time {
	font-size: 0.8rem;
	color: var(--muted);
	white-space: nowrap;
	flex-shrink: 0;
}

.cv-job ul,
.cv-list {
	margin: 0;
	padding-left: 1.1rem;
}

.cv-job li,
.cv-list li {
	font-size: 0.925rem;
	color: var(--muted);
	line-height: 1.65;
	margin-bottom: 0.4rem;
}

.cv-muted {
	color: var(--muted);
	font-weight: 400;
}

.cv-block--grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

.cv-edu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cv-edu li {
	margin-bottom: 1.25rem;
}

.cv-edu li:last-child {
	margin-bottom: 0;
}

.cv-edu strong {
	display: block;
	font-size: 0.925rem;
	font-weight: 600;
	margin-bottom: 0.15rem;
}

.cv-edu p {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	color: var(--muted);
}

.cv-tools {
	margin: 0;
	font-size: 0.875rem;
	color: var(--muted);
	line-height: 1.8;
}

/* Contact / Start a Project */
.project-contact {
	min-height: 100vh;
	background:
		radial-gradient(ellipse 80% 50% at 10% 20%, rgba(255, 138, 92, 0.14), transparent 55%),
		radial-gradient(ellipse 70% 45% at 90% 10%, rgba(124, 92, 255, 0.1), transparent 50%),
		linear-gradient(165deg, #efe8df 0%, var(--bg) 42%, #f3f1ec 100%);
	overflow: hidden;
}

.project-contact-shell {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	min-height: 100vh;
}

/* Contact — personal portrait (not the work mosaic) */
.contact-portrait-visual {
	position: relative;
	isolation: isolate;
	min-height: 100vh;
	padding: calc(var(--header-h) + 2rem) 1.5rem 2.25rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 28%, rgba(255, 176, 120, 0.35), transparent 42%),
		linear-gradient(165deg, #2a221c 0%, #14110f 48%, #0d0b0a 100%);
	color: #f7f3ee;
}

.contact-portrait-glow {
	position: absolute;
	width: min(78%, 420px);
	aspect-ratio: 1;
	border-radius: 50%;
	top: 18%;
	left: 50%;
	translate: -50% 0;
	background: radial-gradient(circle, rgba(255, 138, 92, 0.28), transparent 68%);
	filter: blur(8px);
	animation: portraitGlow 7s ease-in-out infinite alternate;
	z-index: 0;
}

.contact-portrait-orbit {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(255, 210, 170, 0.18);
	z-index: 1;
	pointer-events: none;
}

.contact-portrait-orbit--a {
	width: min(88%, 460px);
	aspect-ratio: 1;
	top: 14%;
	left: 50%;
	translate: -50% 0;
	animation: orbitPulse 9s ease-in-out infinite;
}

.contact-portrait-orbit--b {
	width: min(68%, 340px);
	aspect-ratio: 1;
	top: 22%;
	left: 50%;
	translate: -50% 0;
	border-color: rgba(255, 138, 92, 0.22);
	animation: orbitPulse 9s ease-in-out infinite reverse;
}

.contact-portrait-frame {
	position: relative;
	z-index: 2;
	margin: 0 auto 1.5rem;
	width: min(72%, 340px);
	aspect-ratio: 3 / 4;
	border-radius: 1.4rem 1.4rem 2.2rem 2.2rem;
	overflow: hidden;
	box-shadow:
		0 30px 60px rgba(0, 0, 0, 0.35),
		0 0 0 1px rgba(255, 210, 170, 0.18);
	animation: portraitFloat 6.5s ease-in-out infinite alternate;
}

.contact-portrait-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	filter: saturate(1.05) contrast(1.04);
}

.contact-portrait-copy {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 22rem;
}

.contact-portrait-visual .project-kicker {
	color: #ffb089;
}

.contact-portrait-visual .project-visual-lead {
	color: #fff;
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
}

.project-contact-visual-copy {
	position: relative;
	z-index: 2;
	max-width: 22rem;
	padding: 0.5rem;
}

.project-kicker {
	margin: 0 0 0.55rem;
	font-family: "Syne", sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-2);
}

.project-visual-lead {
	margin: 0;
	font-family: "Syne", sans-serif;
	font-size: clamp(1.45rem, 2.6vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: #fff;
}

.project-contact-main {
	padding: calc(var(--header-h) + 2.25rem) clamp(1.25rem, 4vw, 3.5rem) 3.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 40rem;
	width: 100%;
	margin-inline: auto;
}

.project-contact-title {
	margin: 0 0 0.75rem;
	font-family: "Syne", sans-serif;
	font-size: clamp(1.65rem, 3.4vw, 2.35rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.12;
}

.project-contact-lead {
	margin: 0 0 1.1rem;
	font-size: 1.02rem;
	color: var(--muted);
	line-height: 1.55;
	max-width: 34rem;
}

.project-contact-direct {
	margin: 0 0 1.5rem;
	justify-content: flex-start;
}

.contact-channels {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0 0 1.6rem;
}

.contact-channel {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1rem 1.1rem;
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(15, 15, 18, 0.08);
	backdrop-filter: blur(10px);
	transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.contact-channel:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 138, 92, 0.4);
	box-shadow: 0 14px 30px rgba(15, 15, 18, 0.06);
}

.contact-channel-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-2);
}

.contact-channel-value {
	font-family: "Syne", sans-serif;
	font-size: clamp(0.95rem, 1.6vw, 1.05rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: var(--text);
	word-break: break-word;
}

.contact-form {
	margin-top: 0.15rem;
}

.contact-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem 1.1rem;
	margin-top: 0.35rem;
}

.contact-privacy {
	margin: 0;
	font-size: 0.8rem;
	color: var(--muted);
	max-width: 16rem;
	line-height: 1.4;
}

.contact-to-wizard {
	margin: 1.75rem 0 0;
	font-size: 0.92rem;
}

.contact-to-wizard a {
	color: var(--muted);
	border-bottom: 1px solid rgba(15, 15, 18, 0.18);
	padding-bottom: 2px;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.contact-to-wizard a:hover {
	color: var(--text);
	border-color: currentColor;
}

.project-wizard-band {
	padding: 0;
	background: #0c0b10;
	border-top: 0;
	scroll-margin-top: 0;
	overflow: hidden;
	min-height: 100vh;
}

.project-wizard-stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: min(100vh, 920px);
}

.project-wizard-visual {
	position: relative;
	isolation: isolate;
	min-height: 100%;
	color: #f7f3ee;
	overflow: hidden;
	background: #121018;
}

.project-wizard-mosaic {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr 1fr;
	grid-template-rows: 1.05fr 0.95fr 1fr;
	gap: 0.45rem;
	padding: 0.45rem;
	z-index: 0;
}

.project-mosaic-item {
	margin: 0;
	overflow: hidden;
	border-radius: 0.28rem;
	position: relative;
	opacity: 0;
	transform: scale(1.08);
	animation: mosaicIn 1.1s var(--ease-out) forwards;
}

.project-mosaic-item:nth-child(1) {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
	animation-delay: 0.05s;
}

.project-mosaic-item:nth-child(2) {
	grid-column: 3 / 4;
	grid-row: 1 / 3;
	animation-delay: 0.18s;
}

.project-mosaic-item:nth-child(3) {
	grid-column: 1 / 2;
	grid-row: 2 / 4;
	animation-delay: 0.28s;
}

.project-mosaic-item:nth-child(4) {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	animation-delay: 0.38s;
}

.project-mosaic-item:nth-child(5) {
	grid-column: 2 / 4;
	grid-row: 3 / 4;
	animation-delay: 0.48s;
}

.project-mosaic-item:nth-child(6),
.project-mosaic-item:nth-child(7),
.project-mosaic-item:nth-child(8) {
	display: none;
}

.project-mosaic-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.12);
	animation: mosaicDrift 18s ease-in-out infinite alternate;
	filter: saturate(1.1) contrast(1.06);
}

.project-mosaic-item--2 img { animation-delay: -4s; }
.project-mosaic-item--3 img { animation-delay: -8s; }
.project-mosaic-item--4 img { animation-delay: -12s; }

.project-wizard-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(8, 7, 14, 0.12) 0%, rgba(8, 7, 14, 0.5) 52%, rgba(8, 7, 14, 0.9) 100%),
		radial-gradient(circle at 78% 18%, rgba(124, 92, 255, 0.28), transparent 42%);
	pointer-events: none;
}

.project-wizard-visual-copy {
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
	bottom: 1.5rem;
	z-index: 2;
	max-width: 22rem;
}

.project-wizard-visual .project-kicker {
	color: #cbb8ff;
}

.project-wizard-panel {
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	background:
		radial-gradient(ellipse 70% 50% at 90% 0%, rgba(124, 92, 255, 0.1), transparent 55%),
		linear-gradient(165deg, #f4f1ec 0%, #ebe6df 100%);
}

.project-wizard-band-title {
	margin: 0 0 0.75rem;
	font-family: "Syne", sans-serif;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.project-wizard-band-lead {
	margin: 0 0 1.4rem;
	color: var(--muted);
	font-size: 1rem;
	line-height: 1.55;
	max-width: 32rem;
}

.project-wizard-panel .project-wizard {
	padding: 0;
	border-radius: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.contact-details {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.5rem;
	font-size: 0.95rem;
}

.contact-link {
	color: var(--muted);
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	transition: color 0.2s var(--ease);
}

.contact-link:hover {
	color: var(--accent);
}

.contact-alert {
	margin: 0 0 1.25rem;
	padding: 0.9rem 1.05rem;
	border-radius: 0.85rem;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.45;
}

.contact-alert--ok {
	background: rgba(72, 199, 142, 0.12);
	border: 1px solid rgba(72, 199, 142, 0.28);
	color: #1f7a52;
}

.contact-alert--err {
	background: rgba(255, 98, 98, 0.1);
	border: 1px solid rgba(255, 98, 98, 0.28);
	color: #b42318;
}

.project-wizard {
	position: relative;
	margin-top: 0.25rem;
}

.project-wizard-progress {
	height: 3px;
	border-radius: 999px;
	background: rgba(15, 15, 18, 0.08);
	overflow: hidden;
	margin-bottom: 0.65rem;
}

.project-wizard-progress-bar {
	display: block;
	height: 100%;
	width: 20%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--accent-2), var(--accent));
	transition: width 0.45s var(--ease);
}

.project-wizard-stepcount {
	margin: 0 0 1.35rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.project-wizard-step {
	animation: wizardStepIn 0.4s var(--ease);
}

.project-wizard-title {
	margin: 0 0 0.4rem;
	font-family: "Syne", sans-serif;
	font-size: clamp(1.2rem, 2.2vw, 1.45rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.project-wizard-lead {
	margin: 0 0 1.15rem;
	color: var(--muted);
	font-size: 0.95rem;
}

.project-wizard-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.65rem;
}

.project-wizard-option {
	position: relative;
	cursor: pointer;
	margin: 0;
}

.project-wizard-option input {
	position: absolute;
	opacity: 0;
	inset: 0;
	cursor: pointer;
}

.project-wizard-option span {
	display: flex;
	align-items: center;
	min-height: 3.4rem;
	padding: 0.85rem 1rem;
	border-radius: 0.95rem;
	border: 1px solid rgba(15, 15, 18, 0.1);
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(8px);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.3;
	transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.project-wizard-option:hover span {
	border-color: rgba(255, 138, 92, 0.45);
	transform: translateY(-1px);
}

.project-wizard-option input:focus-visible + span {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.project-wizard-option input:checked + span {
	border-color: transparent;
	background: linear-gradient(135deg, rgba(255, 138, 92, 0.18), rgba(124, 92, 255, 0.14));
	box-shadow: inset 0 0 0 1.5px rgba(124, 92, 255, 0.35);
	color: var(--text);
}

.contact-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.85rem;
}

.contact-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 0.85rem;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.contact-field input,
.contact-field textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border-radius: 0.85rem;
	border: 1px solid rgba(15, 15, 18, 0.1);
	background: rgba(255, 255, 255, 0.85);
	color: var(--text);
	font: inherit;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	outline: none;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.contact-field textarea {
	resize: vertical;
	min-height: 6.5rem;
}

.contact-field input:focus,
.contact-field textarea:focus {
	border-color: rgba(255, 138, 92, 0.5);
	box-shadow: 0 0 0 3px rgba(255, 138, 92, 0.14);
}

.contact-honeypot {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.project-wizard-hint {
	margin: -0.25rem 0 0;
	font-size: 0.85rem;
	color: var(--muted);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.project-wizard-error {
	margin: 0.85rem 0 0;
	padding: 0.7rem 0.85rem;
	border-radius: 0.7rem;
	background: rgba(255, 98, 98, 0.1);
	border: 1px solid rgba(255, 98, 98, 0.25);
	color: #b42318;
	font-size: 0.88rem;
	font-weight: 600;
}

.project-wizard-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-top: 1.5rem;
}

.project-wizard-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.75rem 1.35rem;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}

.project-wizard-btn--primary {
	background: linear-gradient(135deg, #ff8a5c, #7c5cff);
	color: #fff;
	box-shadow: 0 12px 28px rgba(124, 92, 255, 0.22);
}

.project-wizard-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(124, 92, 255, 0.28);
}

.project-wizard-btn--ghost {
	background: transparent;
	color: var(--muted);
	border: 1px solid rgba(15, 15, 18, 0.12);
}

.project-wizard-btn--ghost:hover {
	color: var(--text);
	background: rgba(255, 255, 255, 0.7);
}

@keyframes mosaicIn {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes mosaicDrift {
	from { transform: scale(1.12) translate(0, 0); }
	to { transform: scale(1.2) translate(-2%, 1.5%); }
}

@keyframes wizardStepIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes portraitFloat {
	from { transform: translateY(0); }
	to { transform: translateY(-10px); }
}

@keyframes portraitGlow {
	from { opacity: 0.7; transform: translate(-50%, 0) scale(1); }
	to { opacity: 1; transform: translate(-50%, 4%) scale(1.08); }
}

@keyframes orbitPulse {
	0%, 100% { opacity: 0.45; transform: translate(-50%, 0) scale(1); }
	50% { opacity: 0.9; transform: translate(-50%, 0) scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
	.project-mosaic-item,
	.project-mosaic-item img,
	.project-wizard-step,
	.contact-portrait-frame,
	.contact-portrait-glow,
	.contact-portrait-orbit {
		animation: none !important;
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 980px) {
	.project-contact-shell,
	.project-wizard-stage {
		grid-template-columns: 1fr;
	}

	.contact-portrait-visual {
		min-height: 52vh;
		max-height: 58vh;
		padding: calc(var(--header-h) + 1rem) 1rem 1.25rem;
	}

	.contact-portrait-frame {
		width: min(48%, 220px);
		margin-bottom: 1rem;
	}

	.project-contact-main {
		padding-top: 2rem;
		max-width: none;
	}

	.project-wizard-visual {
		min-height: 42vh;
		max-height: 48vh;
	}

	.project-mosaic-item:nth-child(6) {
		display: block;
		grid-column: 1 / 2;
		grid-row: 1 / 2;
	}
}

@media (max-width: 768px) {
	.contact-form-grid,
	.project-wizard-options,
	.contact-channels {
		grid-template-columns: 1fr;
	}

	.project-contact-visual-copy,
	.contact-portrait-copy,
	.project-wizard-visual-copy {
		max-width: 100%;
	}

	.project-visual-lead {
		font-size: 1.25rem;
	}

	.project-wizard-panel {
		padding: 2rem 1.15rem 3rem;
	}
}

/* Inner page polish */
.page-section {
	position: relative;
}

.welcome h1,
.showcase-head h2,
.cv-header h2 {
	font-family: "Syne", sans-serif;
}

.service-card,
.cv-job,
.home-quick-card {
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

/* Inner pages */
.page-hero {
	padding: calc(var(--header-h) + 4rem) 0 2rem;
}

.page-hero h1 {
	margin: 0;
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 400;
	letter-spacing: -0.03em;
}

.page-content {
	padding-bottom: 5rem;
}

.content {
	color: var(--muted);
	max-width: 680px;
}

/* About page — emotional brick-by-brick build */
body.studio-about {
	background: var(--bg);
}

.about-stage {
	position: relative;
	overflow: hidden;
}

.about-atmosphere {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.about-atmosphere--subtle .about-orb {
	opacity: 0.45;
}

.about-mesh {
	position: absolute;
	inset: -20%;
	background:
		radial-gradient(circle at 20% 30%, rgba(124, 92, 255, 0.09), transparent 42%),
		radial-gradient(circle at 80% 70%, rgba(255, 138, 92, 0.1), transparent 40%),
		linear-gradient(180deg, transparent, rgba(124, 92, 255, 0.03));
	animation: aboutMeshDrift 18s ease-in-out infinite alternate;
}

.about-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	animation: aboutOrbFloat 14s ease-in-out infinite;
}

.about-orb--violet {
	width: 320px;
	height: 320px;
	background: rgba(124, 92, 255, 0.22);
	top: -8%;
	right: -6%;
}

.about-orb--ember {
	width: 260px;
	height: 260px;
	background: rgba(255, 138, 92, 0.2);
	bottom: 12%;
	left: -8%;
	animation-delay: -5s;
}

.about-orb--rose {
	width: 200px;
	height: 200px;
	background: rgba(255, 120, 160, 0.16);
	top: 42%;
	right: 18%;
	animation-delay: -9s;
}

.about-sparkles span {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--accent);
	opacity: 0;
	animation: aboutSparkle 4.5s ease-in-out infinite;
	animation-delay: calc(var(--spark-i) * 0.35s);
}

.about-sparkles span:nth-child(1) { top: 12%; left: 8%; }
.about-sparkles span:nth-child(2) { top: 22%; left: 78%; }
.about-sparkles span:nth-child(3) { top: 38%; left: 15%; }
.about-sparkles span:nth-child(4) { top: 55%; left: 88%; }
.about-sparkles span:nth-child(5) { top: 68%; left: 25%; }
.about-sparkles span:nth-child(6) { top: 78%; left: 62%; }
.about-sparkles span:nth-child(7) { top: 18%; left: 48%; }
.about-sparkles span:nth-child(8) { top: 48%; left: 52%; }
.about-sparkles span:nth-child(9) { top: 72%; left: 8%; }
.about-sparkles span:nth-child(10) { top: 32%; left: 92%; }
.about-sparkles span:nth-child(11) { top: 85%; left: 42%; }
.about-sparkles span:nth-child(12) { top: 8%; left: 62%; }

.about-brick-stack {
	position: relative;
	z-index: 1;
	perspective: 1400px;
}

.about-brick {
	opacity: 0;
	transform: translateY(72px) rotateX(22deg) scale(0.94);
	transform-origin: center bottom;
	filter: blur(3px);
	transition:
		opacity 0.85s var(--ease-out),
		transform 0.95s cubic-bezier(0.22, 1.15, 0.36, 1),
		filter 0.7s var(--ease-out),
		box-shadow 0.6s var(--ease);
	will-change: transform, opacity;
}

.about-brick.is-built {
	opacity: 1;
	transform: translateY(0) rotateX(0) scale(1);
	filter: blur(0);
	animation: brickLand 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}

.about-brick--glow.is-built {
	box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.12), 0 20px 60px rgba(124, 92, 255, 0.14);
}

.about-hero-title {
	background: linear-gradient(120deg, var(--text) 0%, var(--accent) 45%, var(--accent-2) 85%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: aboutTitleShine 8s ease-in-out infinite;
}

.about-hero-title.is-split {
	background: none;
	-webkit-text-fill-color: initial;
	animation: none;
}

.about-title-word {
	display: inline-block;
	opacity: 0;
	transform: translateY(1.1em) rotateX(40deg);
	transition: opacity 0.55s var(--ease-out), transform 0.65s cubic-bezier(0.22, 1.2, 0.36, 1);
	transition-delay: calc(var(--word-i) * 0.09s);
}

.about-hero-title .about-title-word {
	background: linear-gradient(120deg, var(--text) 0%, var(--accent) 45%, var(--accent-2) 85%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.about-hero-title.is-split .about-title-word {
	opacity: 1;
	transform: translateY(0) rotateX(0);
	animation: aboutTitleShine 8s ease-in-out infinite;
}

.about-emotional-lead {
	font-size: clamp(1.05rem, 2.4vw, 1.2rem) !important;
	line-height: 1.8 !important;
	color: var(--text) !important;
}

.about-portrait {
	position: relative;
	overflow: hidden;
	border-radius: 28px;
	animation: aboutPortraitFloat 7s ease-in-out infinite;
}

.about-portrait-ring {
	position: absolute;
	inset: -14px;
	border-radius: 32px;
	background: conic-gradient(from 0deg, var(--accent), var(--accent-2), #ff78a0, var(--accent));
	animation: aboutRingSpin 10s linear infinite;
	z-index: 0;
	opacity: 0.55;
}

.about-portrait-ring::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 29px;
	background: var(--surface);
}

.about-portrait img {
	position: relative;
	z-index: 2;
}

.about-pullquote {
	margin: 0 0 2.5rem;
	padding: 1.75rem 1.85rem;
	border: none;
	border-radius: 18px;
	text-align: center;
	background: linear-gradient(135deg, rgba(124, 92, 255, 0.1), rgba(255, 138, 92, 0.08));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.65),
		0 12px 40px rgba(124, 92, 255, 0.1);
	position: relative;
}

.about-pullquote::before {
	content: "\201C";
	position: absolute;
	top: -0.15em;
	left: 0.65rem;
	font-family: "Syne", serif;
	font-size: 4.5rem;
	line-height: 1;
	color: var(--accent);
	opacity: 0.22;
}

.about-pullquote p {
	margin: 0;
	font-family: "Syne", sans-serif;
	font-size: clamp(1.15rem, 2.8vw, 1.45rem);
	font-weight: 500;
	font-style: italic;
	line-height: 1.55;
	letter-spacing: -0.02em;
	color: var(--text);
}

.about-services-wrap {
	margin-bottom: 2.5rem;
}

.about-services-wrap .welcome-services-kicker {
	margin-bottom: 1rem;
}

.about-brick-wall li,
.about-service-grid li,
body.studio-about [data-brick-stagger] li,
body.studio-about [data-brick-stagger] .cv-brand {
	opacity: 0;
	transform: translateY(24px) scale(0.88) rotateX(18deg);
	transform-origin: center bottom;
	transition:
		opacity 0.55s var(--ease-out),
		transform 0.65s cubic-bezier(0.22, 1.15, 0.36, 1);
}

.about-brick-wall li.is-built,
.about-service-grid li.is-built,
body.studio-about [data-brick-stagger] li.is-built,
body.studio-about [data-brick-stagger] .cv-brand.is-built {
	opacity: 1;
	transform: translateY(0) scale(1) rotateX(0);
}

body.studio-about .welcome-services li {
	padding: 0.55rem 1.05rem;
	font-weight: 500;
	border: 1px solid rgba(124, 92, 255, 0.18);
	background: linear-gradient(180deg, #fff 0%, rgba(124, 92, 255, 0.04) 100%);
	box-shadow:
		0 4px 0 rgba(124, 92, 255, 0.08),
		0 8px 24px rgba(15, 15, 18, 0.06);
}

body.studio-about .about-block {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.15rem 1.35rem;
	align-items: start;
	padding: 1.65rem 1.75rem;
	border: 1px solid rgba(124, 92, 255, 0.14);
	background: linear-gradient(145deg, #fff 0%, rgba(124, 92, 255, 0.03) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.8),
		0 10px 0 rgba(124, 92, 255, 0.06),
		0 24px 48px rgba(15, 15, 18, 0.07);
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

body.studio-about .about-block:hover {
	transform: translateY(-4px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.8),
		0 14px 0 rgba(124, 92, 255, 0.08),
		0 32px 56px rgba(124, 92, 255, 0.12);
}

.about-block-icon {
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	color: #fff;
	flex-shrink: 0;
}

.about-block--animation .about-block-icon {
	background: linear-gradient(135deg, var(--accent), #5b8cff);
	box-shadow: 0 8px 24px rgba(124, 92, 255, 0.35);
}

.about-block--illustration .about-block-icon {
	background: linear-gradient(135deg, var(--accent-2), #ff78a0);
	box-shadow: 0 8px 24px rgba(255, 138, 92, 0.35);
}

.about-block-icon svg {
	width: 26px;
	height: 26px;
}

.about-block-body h2 {
	margin: 0 0 0.45rem;
}

.about-block-body p {
	margin: 0;
}

.about-story-card {
	margin-bottom: 1.25rem;
	padding: 1.5rem 1.65rem;
	border-radius: 16px;
	border: 1px solid var(--line);
	background: var(--surface);
	box-shadow: 0 8px 0 rgba(15, 15, 18, 0.03), 0 16px 32px rgba(15, 15, 18, 0.05);
}

.about-story-card p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.85;
	color: var(--muted);
}

.about-story-card--accent {
	border-color: rgba(124, 92, 255, 0.2);
	background: linear-gradient(135deg, rgba(124, 92, 255, 0.06), rgba(255, 138, 92, 0.05));
}

.about-story-card--accent p {
	color: var(--text);
	font-weight: 500;
}

body.studio-about .welcome {
	padding-bottom: 3rem;
	background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}

body.studio-about .welcome-cv {
	padding-top: 2rem;
	background: var(--bg);
}

body.studio-about .welcome-cv .cv-shell {
	width: min(calc(100% - 2rem), 1180px);
}

.about-section-title {
	background: linear-gradient(120deg, var(--text), var(--accent));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

body.studio-about .cv-chapter {
	position: relative;
	padding: 1.65rem 1.75rem;
	border-color: rgba(124, 92, 255, 0.14);
	background: linear-gradient(145deg, #fff 0%, rgba(124, 92, 255, 0.025) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.75),
		0 8px 0 rgba(124, 92, 255, 0.05),
		0 20px 40px rgba(15, 15, 18, 0.06);
	transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

body.studio-about .cv-chapter h3 {
	color: var(--accent);
}

body.studio-about .cv-story-lead {
	font-size: 1.12rem;
	font-weight: 500;
	color: var(--text);
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--accent);
	background: rgba(124, 92, 255, 0.04);
	border-radius: 0 14px 14px 0;
}

body.studio-about .cv-story-closing {
	font-size: 1.05rem;
	padding: 1.65rem 1.75rem;
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(124, 92, 255, 0.08), rgba(255, 138, 92, 0.06));
}

body.studio-about .cv-brands {
	border-color: rgba(124, 92, 255, 0.16);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		0 12px 0 rgba(124, 92, 255, 0.06),
		0 28px 60px rgba(124, 92, 255, 0.1);
}

@keyframes aboutMeshDrift {
	0% { transform: translate(0, 0) scale(1); }
	100% { transform: translate(2%, -2%) scale(1.04); }
}

@keyframes aboutOrbFloat {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(12px, -18px); }
}

@keyframes aboutSparkle {
	0%, 100% { opacity: 0; transform: scale(0.5); }
	50% { opacity: 0.7; transform: scale(1.2); }
}

@keyframes brickLand {
	0% { transform: translateY(72px) rotateX(22deg) scale(0.94); }
	65% { transform: translateY(-6px) rotateX(-3deg) scale(1.01); }
	100% { transform: translateY(0) rotateX(0) scale(1); }
}

@keyframes aboutTitleShine {
	0%, 100% { background-position: 0% center; }
	50% { background-position: 100% center; }
}

@keyframes aboutPortraitFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

@keyframes aboutHeroAura {
	to { transform: rotate(360deg); }
}

@keyframes aboutBrandsMarquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes timelineFlow {
	0% { background-position: 0 0; }
	100% { background-position: 0 220%; }
}

@keyframes markerPulse {
	0%, 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--tone, var(--accent)) 24%, transparent); }
	50% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--tone, var(--accent)) 10%, transparent); }
}

@keyframes annaGlowPulse {
	0%, 100% { opacity: 0.82; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.06); }
}

@keyframes aboutRingSpin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.about-brick,
	.about-title-word,
	[data-brick-stagger] li,
	.anna-talker.is-speaking .anna-talker-portrait,
	.anna-talker.is-speaking .anna-talker-mouth,
	.anna-talker.is-speaking .anna-talker-waves span,
	.anna-talker.is-blinking .anna-talker-blink,
	.about-bento-hero::before,
	.about-brands-track,
	.cv-timeline-spine::before,
	.cv-timeline-item.is-anna-active .cv-timeline-marker,
	.anna-talker.is-speaking .anna-talker-glow {
		animation: none !important;
	}
	[data-brick-stagger] .cv-brand {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		animation: none !important;
		transition: none !important;
	}

	.about-mesh,
	.about-orb,
	.about-sparkles span,
	.about-portrait,
	.about-portrait-ring,
	.about-hero-title {
		animation: none !important;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.header-end {
		gap: 0.4rem;
	}

	.lang-switch {
		margin-left: 0;
		padding: 0.28rem 0.45rem;
		font-size: 0.68rem;
	}

	.nav-toggle {
		display: block;
		z-index: 210;
		flex-shrink: 0;
	}

	.primary-nav {
		position: fixed;
		inset: 0;
		top: 0;
		padding: calc(var(--header-h) + 2rem) 1.5rem 2rem;
		background: rgba(248, 247, 244, 0.98);
		backdrop-filter: blur(24px);
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 1.5rem;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px);
		transition: opacity 0.4s var(--ease), visibility 0.4s, transform 0.4s var(--ease);
		z-index: 205;
		overflow-y: auto;
	}

	body.studio-front .primary-nav {
		background: rgba(10, 10, 12, 0.96);
	}

	.primary-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.primary-nav .menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0.25rem;
	}

	.primary-nav .menu a {
		font-size: 1.25rem;
		font-family: "Syne", sans-serif;
		font-weight: 600;
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--line);
	}

	body.studio-front .primary-nav .menu a {
		border-bottom-color: rgba(255, 255, 255, 0.08);
		color: rgba(255, 255, 255, 0.9);
	}

	.nav-cta {
		margin: 0;
		text-align: center;
		padding: 1rem;
		font-size: 0.95rem;
	}

	.home-quick-grid {
		grid-template-columns: 1fr 1fr;
	}

	.showcase {
		padding-top: calc(var(--header-h) + 1.5rem);
	}

	.video-slider {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.slider-btn {
		display: none;
	}

	.video-slider-viewport {
		border-radius: 14px;
	}

	.video-slider-foot {
		flex-direction: column;
		align-items: flex-start;
	}

	.video-slider-controls {
		flex-direction: row;
		align-items: center;
		width: 100%;
		justify-content: space-between;
	}

	.cv-job-head {
		flex-direction: column;
	}

	.cv-block--grid {
		grid-template-columns: 1fr;
	}

	.cv-brands {
		padding: 1.5rem 1rem 1.25rem;
	}

	.cv-brands-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.85rem;
	}

	body.studio-about .about-block {
		grid-template-columns: 1fr;
		text-align: center;
	}

	body.studio-about .about-block-icon {
		margin-inline: auto;
	}

	.about-bento {
		grid-template-columns: 1fr;
	}

	.about-bento-hero {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.about-bento-portrait {
		max-width: 260px;
		margin-inline: auto;
	}

	.about-bento-intro .about-hero-title,
	.about-bento-intro .welcome-lead {
		text-align: center;
	}

	.about-bento-quote,
	.about-bento-services,
	.about-bento-skills,
	.about-bento-story {
		grid-column: 1 / -1;
	}

	.about-bento-quote {
		text-align: center;
	}

	.about-bento-quote p {
		text-align: center;
	}

	.about-bento-skills,
	.about-bento-story {
		grid-template-columns: 1fr;
	}

	.about-bento-story .about-story-card--accent {
		transform: none;
	}

	.about-service-grid {
		grid-template-columns: 1fr 1fr;
	}

	.cv-masthead {
		grid-template-columns: 1fr;
	}

	.cv-journey {
		grid-template-columns: 1fr;
		padding: 1rem;
	}

	.cv-journey .anna-talker {
		position: static;
	}

	.cv-journey .anna-talker-frame {
		display: grid;
		grid-template-columns: minmax(120px, 150px) minmax(0, 1fr);
		align-items: center;
		gap: 0.85rem;
	}

	.cv-timeline-spine::before {
		left: 0.65rem;
	}

	.cv-timeline-spine .cv-timeline-item {
		grid-template-columns: 20px minmax(0, 1fr);
		gap: 0.75rem;
	}

	.cv-timeline-marker {
		grid-column: 1;
		margin-top: 1.1rem;
	}

	.cv-timeline-spine .cv-timeline-item--left .cv-timeline-card,
	.cv-timeline-spine .cv-timeline-item--right .cv-timeline-card {
		grid-column: 2;
	}

	.cv-timeline-item--bookend {
		grid-template-columns: 1fr;
	}

	.cv-timeline-item--bookend .cv-timeline-card {
		grid-column: 1;
	}

	body.studio-about .cv-chapter {
		padding: 1.35rem 1.25rem;
	}

	body.studio-about .cv-chapter-num {
		display: none;
	}

	.home-clients-stats {
		gap: 1rem 1.5rem;
	}

	.cv-brands-grid--full {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.home-nav {
		grid-template-columns: 1fr;
	}

	.home-hero-controls .slider-btn {
		display: none;
	}

	.welcome-hero {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		text-align: center;
	}

	.welcome-portrait {
		max-width: 280px;
		margin-inline: auto;
	}

	.welcome-hero-copy h1,
	.welcome-hero-copy .welcome-lead {
		text-align: center;
	}

	.home-hero-slogan {
		font-size: 1.35rem;
	}

	.home-scroll-hint {
		display: none;
	}

	.home-intro-inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.home-intro-portrait {
		max-width: 280px;
		margin-inline: auto;
	}

	.home-intro-actions {
		justify-content: center;
	}

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

	.home-skills-inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.home-quick-grid {
		grid-template-columns: 1fr;
	}
}

/* Blog — professional archive + in-page label filter */
body.studio-blog {
	background: var(--bg);
}

body.studio-blog-index {
	overflow-x: hidden;
}

/* Build progress bar */
.blog-build-progress {
	position: fixed;
	top: var(--header-h);
	left: 0;
	z-index: 90;
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, #009eb8, #7c5cff, #ff8a5c);
	box-shadow: 0 0 18px rgba(0, 158, 184, 0.45);
	transition: width 0.35s var(--ease-out);
	pointer-events: none;
}

.blog-build-progress.is-complete {
	opacity: 0;
	transition: opacity 0.6s ease 0.4s;
}

/* Blog stage atmosphere */
.blog-stage {
	position: relative;
	overflow: hidden;
}

.blog-atmosphere {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	opacity: 0;
	animation: blogAtmoIn 1.2s var(--ease-out) 0.1s forwards;
}

.blog-atmosphere-mesh {
	position: absolute;
	inset: -30%;
	background:
		radial-gradient(circle at 15% 20%, rgba(0, 158, 184, 0.14), transparent 42%),
		radial-gradient(circle at 85% 75%, rgba(124, 92, 255, 0.12), transparent 40%),
		radial-gradient(circle at 55% 45%, rgba(255, 138, 92, 0.08), transparent 35%);
	animation: blogMeshDrift 16s ease-in-out infinite alternate;
}

.blog-grid-fx {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(15, 15, 18, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15, 15, 18, 0.03) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
	opacity: 0.5;
}

.blog-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	animation: blogOrbFloat 12s ease-in-out infinite;
}

.blog-orb--teal {
	width: 280px;
	height: 280px;
	background: rgba(0, 158, 184, 0.22);
	top: -12%;
	left: -8%;
}

.blog-orb--violet {
	width: 240px;
	height: 240px;
	background: rgba(124, 92, 255, 0.18);
	top: 20%;
	right: -6%;
	animation-delay: -4s;
}

.blog-orb--ember {
	width: 200px;
	height: 200px;
	background: rgba(255, 138, 92, 0.16);
	bottom: -10%;
	left: 35%;
	animation-delay: -7s;
}

@keyframes blogAtmoIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes blogMeshDrift {
	from { transform: translate(0, 0) scale(1); }
	to { transform: translate(2%, -2%) scale(1.04); }
}

@keyframes blogOrbFloat {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(12px, -18px); }
}

/* Brick-by-brick build (blog index) */
body.studio-blog-index .blog-brick {
	opacity: 0;
	transform: translateY(56px) rotateX(20deg) scale(0.9);
	transform-origin: center bottom;
	filter: blur(4px);
	transition:
		opacity 0.7s var(--ease-out),
		transform 0.85s cubic-bezier(0.22, 1.15, 0.36, 1),
		filter 0.6s var(--ease-out),
		box-shadow 0.5s var(--ease);
	will-change: transform, opacity;
}

body.studio-blog-index .blog-brick.is-built {
	opacity: 1;
	transform: translateY(0) rotateX(0) scale(1);
	filter: blur(0);
	animation: blogBrickLand 0.75s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}

body.studio-blog-index .flip-card.blog-brick.is-built {
	animation: blogCardLand 0.8s cubic-bezier(0.22, 1.25, 0.36, 1) both;
}

body.studio-blog-index .flip-card.blog-brick.is-built::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 0.35rem;
	background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.55) 50%, transparent 75%);
	transform: translateX(-120%);
	animation: blogCardShine 0.9s var(--ease-out) 0.15s;
	pointer-events: none;
}

body.studio-blog-index .blog-sidebar .blog-brick.is-built {
	animation: blogSidebarLand 0.7s cubic-bezier(0.22, 1.1, 0.36, 1) both;
}

.blog-masthead-title--split .about-title-word {
	display: inline-block;
	opacity: 0;
	transform: translateY(1.1em) rotateX(40deg);
	filter: blur(6px);
	transition:
		opacity 0.55s var(--ease-out),
		transform 0.65s cubic-bezier(0.22, 1.2, 0.36, 1),
		filter 0.5s var(--ease-out);
	transition-delay: calc(var(--word-i) * 0.07s);
}

.blog-masthead-title--split.is-split .about-title-word {
	opacity: 1;
	transform: translateY(0) rotateX(0);
	filter: blur(0);
}

@keyframes blogBrickLand {
	0% { box-shadow: 0 0 0 rgba(0, 158, 184, 0); }
	60% { box-shadow: 0 16px 40px rgba(0, 158, 184, 0.12); }
	100% { box-shadow: 0 8px 24px rgba(15, 15, 18, 0.08); }
}

@keyframes blogCardLand {
	0% { transform: translateY(56px) rotateX(20deg) scale(0.88); }
	55% { transform: translateY(-6px) rotateX(-4deg) scale(1.02); }
	100% { transform: translateY(0) rotateX(0) scale(1); }
}

@keyframes blogSidebarLand {
	0% { transform: translateX(40px) translateY(20px) rotateY(-8deg); opacity: 0; }
	100% { transform: translateX(0) translateY(0) rotateY(0); opacity: 1; }
}

@keyframes blogCardShine {
	to { transform: translateX(120%); }
}

.blog-masthead {
	padding: calc(var(--header-h) + 2rem) 0 1.75rem;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.blog-masthead-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	position: relative;
	z-index: 1;
}

.blog-masthead-kicker {
	margin: 0 0 0.35rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
}

.blog-masthead-meta {
	margin-left: auto;
}

.blog-masthead-stat {
	display: inline-flex;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	background: rgba(124, 92, 255, 0.08);
	color: var(--accent);
	font-size: 0.8rem;
	font-weight: 600;
}

.blog-masthead-title {
	margin: 0;
	font-family: "Syne", "DM Sans", sans-serif;
	font-size: clamp(1.8rem, 4vw, 2.5rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--text);
}

body.studio-blog-index .blog-masthead-title--split.is-split {
	background: linear-gradient(120deg, var(--text) 0%, var(--accent) 45%, #009eb8 85%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: blogTitleShimmer 8s ease-in-out infinite;
}

@keyframes blogTitleShimmer {
	0%, 100% { background-position: 0% center; }
	50% { background-position: 100% center; }
}

.blog-masthead-lead {
	margin: 0.5rem 0 0;
	max-width: 48ch;
	color: var(--muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

.blog-masthead-tabs {
	display: none;
}

/* Label filter bar */
.blog-filters {
	margin-bottom: 1.5rem;
	padding: 1.1rem 1.25rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 0.75rem;
	box-shadow: 0 8px 30px rgba(15, 15, 18, 0.04);
}

.blog-filters-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.85rem;
}

.blog-filters-label {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.blog-filters-count {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--accent);
}

.blog-filters-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	max-height: 9.5rem;
	overflow: auto;
	padding-right: 0.25rem;
}

.blog-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.38rem 0.75rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg);
	color: var(--text);
	font: inherit;
	font-size: 0.8rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.22s var(--ease);
}

.blog-filter-chip span {
	font-size: 0.72rem;
	color: var(--muted);
}

.blog-filter-chip:hover {
	border-color: rgba(124, 92, 255, 0.25);
	background: rgba(124, 92, 255, 0.06);
}

.blog-filter-chip.is-active {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.blog-filter-chip.is-active span {
	color: rgba(255, 255, 255, 0.8);
}

.blog-label-btn {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.45rem 1rem;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 0.82rem;
	color: var(--accent);
	text-align: left;
	cursor: pointer;
	transition: background 0.2s var(--ease);
}

.blog-label-btn:hover,
.blog-label-btn.is-active {
	background: rgba(124, 92, 255, 0.08);
}

.blog-label-btn.is-active {
	font-weight: 600;
	color: var(--text);
}

.flip-card.is-filtered-out {
	display: none !important;
}

.home-work-card.is-filtered-out,
.work-index-card.is-filtered-out {
	display: none !important;
}

/* My Work index — portfolio layout */
.work-index-hero {
	padding: calc(var(--header-h) + 2.5rem) 0 1.5rem;
	background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
	border-bottom: 1px solid var(--line);
}

.work-index-hero-inner {
	max-width: 720px;
}

.work-index-title {
	margin: 0;
	font-family: "Syne", sans-serif;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.work-index-lead {
	margin: 0.85rem 0 0;
	max-width: 52ch;
	color: var(--muted);
	font-size: 1.05rem;
	line-height: 1.65;
}

.work-index-count {
	margin: 1rem 0 0;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
}

.work-index-body {
	padding: 0 0 5rem;
}

.work-index-container {
	display: block;
}

.work-index-content {
	min-width: 0;
}

.work-filter {
	position: relative;
	z-index: 5;
	margin-bottom: 1.5rem;
}

.work-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 0.85rem;
}

.work-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.7rem 1rem 0.7rem 0.85rem;
	border-radius: 999px;
	border: 1px solid rgba(124, 92, 255, 0.2);
	background: #fff;
	box-shadow: 0 8px 24px rgba(124, 92, 255, 0.08);
	color: var(--text);
	font: inherit;
	font-size: 0.92rem;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}

.work-filter-toggle:hover,
.work-filter-toggle[aria-expanded="true"] {
	border-color: rgba(124, 92, 255, 0.4);
	background: rgba(124, 92, 255, 0.05);
	box-shadow: 0 10px 28px rgba(124, 92, 255, 0.12);
}

.work-filter-toggle-icon {
	display: inline-flex;
	color: var(--accent);
}

.work-filter-toggle-hint {
	font-weight: 500;
	color: var(--muted);
	font-size: 0.84rem;
}

.work-filter-toggle-caret {
	width: 0.45rem;
	height: 0.45rem;
	margin-left: 0.15rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	opacity: 0.55;
	transition: transform 0.2s var(--ease);
}

.work-filter-toggle[aria-expanded="true"] .work-filter-toggle-caret {
	transform: rotate(-135deg) translateY(-1px);
}

.work-filter-summary {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.45rem 0.55rem 0.45rem 0.85rem;
	border-radius: 999px;
	background: rgba(124, 92, 255, 0.1);
	border: 1px solid rgba(124, 92, 255, 0.18);
}

.work-filter-summary-text {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--text);
}

.work-filter-summary-text strong {
	color: var(--accent);
}

.work-filter-clear {
	flex-shrink: 0;
	padding: 0.35rem 0.7rem;
	border: 1px solid rgba(124, 92, 255, 0.22);
	border-radius: 999px;
	background: #fff;
	color: var(--accent);
	font: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.work-filter-clear:hover {
	background: rgba(124, 92, 255, 0.06);
	border-color: rgba(124, 92, 255, 0.35);
}

.work-filter-panel {
	margin-top: 0.75rem;
	padding: 1.15rem 1.2rem 1.25rem;
	border-radius: 1.15rem;
	background: linear-gradient(180deg, #fff 0%, rgba(248, 247, 244, 0.98) 100%);
	border: 1px solid rgba(124, 92, 255, 0.14);
	box-shadow: 0 16px 40px rgba(124, 92, 255, 0.08);
	animation: workFilterPanelIn 0.28s ease;
}

.work-filter-panel[hidden] {
	display: none !important;
}

@keyframes workFilterPanelIn {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.work-filter-controls {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.work-filter-select-wrap--solo {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1rem;
}

.work-filter-select-wrap,
.work-filter-search-wrap {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.work-filter-select-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.work-filter-select,
.work-filter-search {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border-radius: 0.85rem;
	border: 1px solid rgba(124, 92, 255, 0.16);
	background: #fff;
	font: inherit;
	font-size: 0.92rem;
	color: var(--text);
	outline: none;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.work-filter-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237c5cff' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	padding-right: 2.2rem;
}

.work-filter-select:focus,
.work-filter-search:focus {
	border-color: rgba(124, 92, 255, 0.4);
	box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.12);
}

.work-filter-search::placeholder {
	color: var(--muted);
}

.work-filter-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.work-filter-quick-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.75rem;
	border-radius: 999px;
	border: 1px solid rgba(124, 92, 255, 0.14);
	background: #fff;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--text);
	cursor: pointer;
	transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}

.work-filter-quick-btn:hover {
	transform: translateY(-1px);
	border-color: rgba(124, 92, 255, 0.3);
	background: rgba(124, 92, 255, 0.05);
}

.work-filter-quick-btn.is-active {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.work-filter-quick-name {
	line-height: 1.2;
}

.work-filter-quick-count {
	opacity: 0.7;
	font-size: 0.75rem;
}

.work-filter-more {
	margin-top: 0.85rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(124, 92, 255, 0.1);
}

.work-filter-more-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--accent);
	font: inherit;
	font-size: 0.88rem;
	font-weight: 700;
	cursor: pointer;
}

.work-filter-more-toggle::after {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.work-filter-more-toggle[aria-expanded="true"]::after {
	transform: rotate(-135deg);
}

.work-filter-more-panel {
	margin-top: 0.75rem;
}

.work-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	max-height: 12rem;
	overflow: auto;
	padding-right: 0.2rem;
}

.work-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.65rem;
	border-radius: 999px;
	border: 1px solid rgba(15, 15, 18, 0.08);
	background: rgba(248, 247, 244, 0.9);
	font: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--text);
	cursor: pointer;
}

.work-filter-chip span {
	opacity: 0.55;
}

.work-filter-chip:hover {
	border-color: rgba(124, 92, 255, 0.28);
}

.work-filter-chip.is-active {
	background: rgba(124, 92, 255, 0.12);
	border-color: rgba(124, 92, 255, 0.3);
	color: var(--accent);
}

.work-filter-chip.is-active span {
	opacity: 0.8;
}

.work-filter-chip.is-search-hidden {
	display: none;
}

.work-filter-search-empty {
	margin: 0.65rem 0 0;
	font-size: 0.85rem;
	color: var(--muted);
}

.work-filter-select option.is-search-hidden {
	display: none;
}
.work-index-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 1.35rem;
}

.work-index-grid .home-work-card-title {
	font-size: 1.05rem;
}

body.studio-blog-index .blog-single-post {
	max-width: 820px;
	margin-inline: auto;
}

@media (max-width: 768px) {
	.work-filter-bar {
		flex-direction: column;
		align-items: stretch;
	}

	.work-filter-toggle {
		justify-content: center;
		width: 100%;
	}

	.work-filter-summary {
		width: 100%;
		justify-content: space-between;
	}

	.work-filter-panel {
		padding: 1rem;
	}

	.work-filter-controls {
		grid-template-columns: 1fr;
	}

	.work-index-grid {
		grid-template-columns: 1fr;
	}
}

.blog-filter-empty {
	margin: 2rem 0;
	padding: 2rem;
	text-align: center;
	color: var(--muted);
	background: var(--surface);
	border: 1px dashed var(--line);
	border-radius: 0.75rem;
}

.blog-layout {
	padding: 1.75rem 0 4rem;
}

.blog-layout-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 2rem;
	align-items: start;
}

.blog-main {
	min-width: 0;
}

/* Flipcard grid */
.flip-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.25rem;
}

.flip-card {
	perspective: 1000px;
	min-height: 220px;
	position: relative;
}

body.studio-blog-index .flip-card:hover {
	z-index: 2;
}

.flip-card-link {
	display: block;
	height: 100%;
	color: inherit;
}

.flip-card-inner {
	position: relative;
	height: 100%;
	min-height: 220px;
	transform-style: preserve-3d;
	transition: transform 0.65s var(--ease);
}

.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner {
	transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
	position: absolute;
	inset: 0;
	border-radius: 0.35rem;
	overflow: hidden;
	backface-visibility: hidden;
	box-shadow: 0 8px 24px rgba(15, 15, 18, 0.1);
}

.flip-card-front {
	background: #ddd;
}

.flip-card-front img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.flip-card-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(0, 158, 184, 0.15), rgba(51, 51, 51, 0.12));
}

.flip-card-date {
	position: absolute;
	top: 0.65rem;
	right: 0.65rem;
	z-index: 2;
	padding: 0.25rem 0.55rem;
	border-radius: 0.2rem;
	background: #666;
	color: #fff;
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transition: background 0.25s var(--ease);
}

.flip-card:hover .flip-card-date {
	background: #ad3a2b;
}

.flip-card-front-overlay {
	position: absolute;
	inset: auto 0 0;
	padding: 2.5rem 0.85rem 0.85rem;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
}

.flip-card-title {
	margin: 0;
	font-family: "Syne", sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
}

.flip-card-back {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1rem;
	background: #fff;
	transform: rotateY(180deg);
	border: 1px solid rgba(15, 15, 18, 0.08);
}

.flip-card-back .flip-card-title {
	color: #333;
	font-size: 0.92rem;
	margin-bottom: 0.5rem;
}

.flip-card-excerpt {
	margin: 0;
	flex: 1;
	font-size: 0.8rem;
	color: #666;
	line-height: 1.55;
}

.flip-card-cta {
	margin-top: 0.75rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: #009eb8;
}

/* Sidebar widgets */
.blog-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.blog-widget {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(15, 15, 18, 0.04);
}

.blog-widget-title {
	margin: 0;
	padding: 0.75rem 1rem;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.blog-profile {
	padding: 1rem;
	text-align: center;
}

.blog-profile-photo {
	width: 88px;
	height: 88px;
	margin: 0 auto 0.75rem;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid #f3f3f3;
}

.blog-profile-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-profile-name {
	margin: 0 0 0.5rem;
	font-weight: 700;
	color: #333;
}

.blog-profile-bio {
	margin: 0 0 0.85rem;
	font-size: 0.82rem;
	line-height: 1.6;
	color: #666;
	text-align: left;
}

.blog-profile-link {
	font-size: 0.8rem;
	font-weight: 600;
	color: #009eb8;
}

.blog-archive-tree,
.blog-label-list,
.blog-buddies-list {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
}

.blog-archive-year-btn {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding: 0.55rem 1rem;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	color: #333;
	cursor: pointer;
	text-align: left;
}

.blog-archive-year-btn:hover {
	background: rgba(0, 158, 184, 0.06);
	color: #009eb8;
}

.blog-archive-count {
	font-size: 0.75rem;
	color: #999;
	font-weight: 500;
}

.blog-archive-months a,
.blog-label-list a,
.blog-buddies-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.4rem 1rem 0.4rem 1.5rem;
	font-size: 0.82rem;
	color: #009eb8;
	transition: background 0.2s var(--ease);
}

.blog-label-list a {
	padding-left: 1rem;
}

.blog-archive-months a:hover,
.blog-label-list a:hover,
.blog-buddies-list a:hover {
	background: rgba(0, 158, 184, 0.06);
}

.blog-archive-months span,
.blog-label-list span {
	font-size: 0.72rem;
	color: #999;
}

.blog-buddies-list span {
	display: block;
	padding: 0.35rem 1rem;
	font-size: 0.82rem;
	color: #666;
}

.blog-back {
	display: inline-block;
	margin-bottom: 1rem;
	font-size: 0.88rem;
	color: #666;
}

.blog-back:hover {
	color: #009eb8;
}

.blog-pagination {
	margin-top: 2rem;
}

.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.1rem;
	height: 2.1rem;
	margin: 0 0.15rem;
	padding: 0 0.45rem;
	border-radius: 0.35rem;
	border: 1px solid rgba(15, 15, 18, 0.1);
	color: #666;
	background: #fff;
	font-size: 0.85rem;
	transition: all 0.25s var(--ease);
}

.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
	background: #333;
	border-color: #333;
	color: #fff;
}

.blog-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.blog-empty {
	text-align: center;
	color: #666;
	padding: 2rem 0;
}

/* Single post in layout */
.blog-single-post {
	background: #fff;
	border: 1px solid rgba(15, 15, 18, 0.08);
	border-radius: 0.35rem;
	padding: 1.5rem 1.75rem 2rem;
	box-shadow: 0 8px 24px rgba(15, 15, 18, 0.05);
}

.blog-single-head {
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid rgba(15, 15, 18, 0.08);
}

.blog-single-title {
	margin: 0.5rem 0 0;
	font-family: "Syne", sans-serif;
	font-size: clamp(1.5rem, 3.5vw, 2.1rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #333;
}

.blog-single-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.82rem;
	color: #666;
}

.blog-single-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.blog-single-tags a {
	padding: 0.18rem 0.55rem;
	border-radius: 999px;
	background: rgba(0, 158, 184, 0.1);
	color: #009eb8;
	font-size: 0.75rem;
	font-weight: 500;
}

.blog-entry {
	color: #333;
	font-size: 1rem;
	line-height: 1.75;
}

.blog-entry p {
	margin: 0 0 1rem;
}

.blog-entry img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1.25rem auto;
	border-radius: 0.35rem;
}

.blog-entry iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	min-height: 260px;
	margin: 1.5rem auto;
	border: 0;
	border-radius: 0.35rem;
}

.blog-original {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(15, 15, 18, 0.08);
	font-size: 0.85rem;
}

.blog-original a {
	color: #666;
	text-decoration: underline;
}

@media (max-width: 960px) {
	.blog-layout-inner {
		grid-template-columns: 1fr;
	}

	.blog-sidebar {
		order: 2;
	}

	.flip-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	}
}

@media (max-width: 768px) {
	.blog-masthead-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	body.studio-blog-index .flip-card.blog-brick {
		opacity: 1;
		transform: none;
		filter: none;
		animation: blogFadeUpMobile 0.5s var(--ease-out) both;
		animation-delay: calc(var(--brick-i, 0) * 0.04s);
	}

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

	.flip-card-inner {
		transform: none !important;
	}

	.flip-card-back {
		display: none;
	}

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

@media (prefers-reduced-motion: reduce) {
	body.studio-blog-index .blog-brick {
		opacity: 1;
		transform: none;
		filter: none;
		animation: none !important;
	}

	body.studio-blog-index .blog-atmosphere {
		animation: none;
		opacity: 1;
	}

	.blog-build-progress {
		display: none;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}