/* ==========================================================================
   5ive Studio – main stylesheet (v1.1 · light editorial)
   ========================================================================== */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face { font-family: "Bowlby One"; src: url("../fonts/bowlby-one-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Luckiest Guy"; src: url("../fonts/luckiest-guy-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("../fonts/permanent-marker-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
	--c-bg: #f6f1e7;
	--c-ink: #111111;
	--c-blue: #6ac8fe;
	--c-orange: #f7923a;
	--c-yellow: #f9d648;
	--c-pink: #f7a1c8;
	--c-green: #7dd9b4;
	--c-purple: #c9a8f5;
	--c-sky: #9ed8f7;
	--c-paper: #ffffff;
	--c-text: var(--c-ink);
	--c-muted: color-mix(in srgb, var(--c-ink) 66%, transparent);
	--c-line: color-mix(in srgb, var(--c-ink) 13%, transparent);

	--f-display: "Bowlby One", "Arial Black", Impact, sans-serif;
	--f-sticker: "Luckiest Guy", "Arial Black", sans-serif;
	--f-hand: "Permanent Marker", "Comic Sans MS", cursive;
	--f-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

	--gutter: clamp(16px, 3.6vw, 56px);
	--max: 1440px;
	--radius: clamp(12px, 1.2vw, 18px);
	--radius-lg: clamp(20px, 2.2vw, 32px);
	--header-h: 80px;
	--ease: cubic-bezier(.65, .05, 0, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	/* Critically damped spring approximation (Apple: damping 1.0, response ~0.4s) */
	--spring: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--f-body);
	font-size: clamp(15px, 1.02vw, 17px);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}
img, video, svg, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--c-yellow); color: var(--c-ink); }
:focus-visible { outline: 2.5px solid var(--c-ink); outline-offset: 3px; border-radius: 6px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 10002; background: var(--c-ink); color: var(--c-bg); padding: 10px 16px; border-radius: 999px; font-weight: 700; }
.skip-link:focus { top: 16px; }
[hidden] { display: none !important; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 8vw, 130px); position: relative; }
.section--tight { padding-block: clamp(32px, 4vw, 70px); }
.site-main { position: relative; z-index: 1; }

.has-grain::after {
	content: "";
	position: fixed;
	inset: -50%;
	z-index: 9998;
	pointer-events: none;
	opacity: .05;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: grain 1s steps(6) infinite;
}
@keyframes grain {
	0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); }
	60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); }
}

/* ---------- Typography ---------- */
.h-xl { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.3rem, 5.4vw, 5.4rem); line-height: .94; letter-spacing: -.015em; }
.hand { font-family: var(--f-hand); font-weight: 400; letter-spacing: .01em; }
.label { font-weight: 800; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--lc, var(--c-pink)) 72%, #000); margin-bottom: .9em; }

/* Highlighted words: hand-drawn underline that draws in on scroll */
.hl {
	font-style: normal;
	background-image: var(--hl-img, var(--hl-img-pink));
	background-repeat: no-repeat;
	background-position: 0 96%;
	background-size: 100% .26em;
	padding-bottom: .04em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size 1s var(--ease-out) .25s;
}
.fx [data-split]:not(.is-drawn) .hl, .fx .hero__title:not(.is-drawn) .hl { background-size: 0% .26em; }

.eyebrow { display: inline-flex; align-items: center; gap: .8em; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 1.4em; }
.link-u { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .5s var(--ease); padding-bottom: 2px; }
.link-u:hover { background-size: 100% 1.5px; }
.link-arrow { display: inline-flex; align-items: center; gap: .6em; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.arrow { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.link-arrow .arrow { width: 18px; height: 18px; transition: transform .4s var(--spring); }
.link-arrow:hover .arrow { transform: translateX(5px); }

/* Doodles */
.doodle { position: absolute; width: 60px; height: auto; color: var(--c-ink); pointer-events: none; overflow: visible; }

/* Rolling text */
.roll { --roll: 100%; position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.roll > span { display: inline-block; transition: transform .55s var(--ease); }
.roll::after { content: attr(data-text); position: absolute; left: 0; top: var(--roll); transition: transform .55s var(--ease); white-space: nowrap; }
a:hover .roll > span, button:hover .roll > span, a:hover .roll::after, button:hover .roll::after { transform: translateY(calc(-1 * var(--roll))); }

/* ---------- Buttons ---------- */
.btn {
	--b-bg: var(--c-ink);
	--b-fg: var(--c-bg);
	--b-hover: var(--c-yellow);
	--b-hover-fg: var(--c-ink);
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .75em;
	height: 3.3em;
	padding: 0 1.55em;
	border-radius: 999px;
	background: var(--b-bg);
	color: var(--b-fg);
	font-weight: 800;
	font-size: .76rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: inset 0 0 0 1.5px var(--b-line, transparent);
	transition: background-color .35s, color .35s, box-shadow .35s, transform .45s var(--spring);
	-webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--b-hover); color: var(--b-hover-fg); transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--b-line, transparent), 0 10px 22px -10px rgba(0, 0, 0, .45); }
.btn:active { transform: scale(.96); transition-duration: .1s; }
.btn__arrow { display: inline-grid; place-items: center; }
.btn__arrow .arrow { width: 1.25em; height: 1.25em; transition: transform .45s var(--spring); }
.btn:hover .btn__arrow .arrow { transform: translate(2px, -2px); }
.btn__ico { display: inline-grid; place-items: center; }
.btn__ico .fsc-icon { width: 1.5em; height: 1.5em; }
.btn--light { --b-bg: var(--c-bg); --b-fg: var(--c-ink); --b-hover: var(--c-yellow); }
.btn--yellow { --b-bg: var(--c-yellow); --b-fg: var(--c-ink); --b-hover: var(--c-ink); --b-hover-fg: var(--c-bg); }
.btn--outline { --b-bg: transparent; --b-fg: var(--c-ink); --b-line: var(--c-ink); --b-hover: var(--c-ink); --b-hover-fg: var(--c-bg); }
.btn--sm { height: 2.95em; font-size: .7rem; padding: 0 1.2em; }

/* ---------- Pill sticker label (portfolio categories) ---------- */
.pill {
	--pill: var(--c-blue);
	position: relative;
	display: inline-flex;
	align-items: center;
	background: var(--pill);
	color: #fff;
	font-family: var(--f-sticker);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(1rem, 1.4vw, 1.25rem);
	line-height: 1;
	padding: .55em 2.2em .4em .9em;
	border-radius: 999px;
	letter-spacing: .03em;
	text-shadow: 0 .06em 0 rgba(0, 0, 0, .35);
	box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .08);
	margin-right: 1.1em;
	white-space: nowrap;
}
.pill__flame { position: absolute; right: -1em; top: 50%; width: 2.3em; height: auto; transform: translateY(-55%) rotate(12deg); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .25)); transition: transform .5s var(--spring); }
.pill:hover .pill__flame { transform: translateY(-60%) rotate(-8deg) scale(1.1); }
.pill--lg { font-size: clamp(1.15rem, 2vw, 1.9rem); }
.pill--xl { font-size: clamp(1.8rem, 5.5vw, 5rem); }
.pill--xl .pill__flame { width: 2em; right: -.8em; }

.tag { display: inline-flex; align-items: center; gap: .45em; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .5em .95em; border-radius: 999px; background: var(--c-paper); box-shadow: inset 0 0 0 1px var(--c-line); }
.tag::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--c, var(--c-blue)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
a.tag:hover { background: var(--c, var(--c-blue)); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-size: .78rem; font-weight: 600; padding: .5em 1em; border-radius: 999px; background: var(--c-paper); box-shadow: inset 0 0 0 1px var(--c-line); }
.chips--lg li { font-size: .9rem; }

/* ---------- Preloader ---------- */
.preloader { display: none; }
.js .preloader { position: fixed; inset: 0; z-index: 10001; display: grid; place-items: center; background: var(--c-bg); animation: pre-safety 0s linear 6s forwards; }
.preloader__inner { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 0 var(--gutter); }
.preloader__logo .logo__img { width: clamp(90px, 11vw, 140px) !important; height: auto; animation: flame-bounce 1s var(--ease-out) infinite alternate; transform-origin: 50% 100%; }
.preloader__count { font-family: var(--f-display); font-size: clamp(3rem, 8vw, 6.5rem); line-height: 1; display: flex; gap: .04em; font-variant-numeric: tabular-nums; }
.preloader__count span:last-child { font-size: .45em; margin-top: .2em; color: var(--c-orange); }
.preloader__text { font-family: var(--f-hand); font-size: clamp(1rem, 1.6vw, 1.3rem); color: var(--c-muted); }
.preloader__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--c-line); }
.preloader__bar span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--c-yellow), var(--c-blue), var(--c-pink), var(--c-green), var(--c-orange), var(--c-purple)); }
html.pre-skip .preloader { display: none; }
@keyframes pre-safety { to { visibility: hidden; opacity: 0; } }
@keyframes flame-bounce { from { transform: scale(1, 1) rotate(-3deg); } to { transform: scale(1.06, .94) rotate(3deg); } }

/* ---------- Page transition ---------- */
.transition { position: fixed; inset: 0; z-index: 10000; pointer-events: none; visibility: hidden; }
html.is-leaving .transition, html.is-entering .transition, html.tr-active .transition { visibility: visible; }
html.is-entering .transition__panel--1, html.is-entering .transition__panel--2 { display: none; }
.transition__panel { position: absolute; inset: 0; }
.transition__panel--1 { background: var(--c-yellow); }
.transition__panel--2 { background: var(--c-blue); }
.transition__panel--3 { background: var(--c-bg); display: grid; place-items: center; }
.transition__logo { width: clamp(70px, 9vw, 120px); height: auto; }
html.is-leaving .transition { pointer-events: all; }

/* ---------- Cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; display: none; }
.has-cursor .cursor { display: block; }
.cursor:not(.is-view):not(.is-play) { mix-blend-mode: difference; }
.cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; border-radius: 50%; }
.cursor__dot { width: 8px; height: 8px; background: #fff; transition: opacity .3s; }
.cursor__ring { width: 40px; height: 40px; border: 1.5px solid rgba(255, 255, 255, .8); display: grid; place-items: center; transition: width .45s var(--spring), height .45s var(--spring), background-color .45s, border-color .45s; }
.cursor__label { font-weight: 800; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .45s var(--spring); }
.cursor.is-link .cursor__ring { width: 60px; height: 60px; }
.cursor.is-view .cursor__ring, .cursor.is-play .cursor__ring { width: 96px; height: 96px; background: var(--c-yellow); border-color: var(--c-ink); }
.cursor.is-play .cursor__ring { background: var(--c-orange); }
.cursor.is-view .cursor__label, .cursor.is-play .cursor__label { opacity: 1; transform: scale(1); }
.cursor.is-view .cursor__dot, .cursor.is-play .cursor__dot { opacity: 0; }
.cursor.is-hidden { opacity: 0; }

/* ---------- Announce bar ---------- */
.announce { position: relative; z-index: 60; background: var(--c-ink); color: var(--c-bg); overflow: hidden; font-weight: 700; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.announce__track { display: flex; align-items: center; gap: 1.5em; width: max-content; padding: .65em 0; animation: marquee-css 30s linear infinite; }
.announce__flame { width: 1.1em; height: 1.1em; fill: var(--c-yellow); }
@keyframes marquee-css { to { transform: translateX(-50%); } }

/* ==========================================================================
   Header – transparent at top, Apple-style glass on scroll
   ========================================================================== */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 80; color: var(--c-ink); transition: transform .6s var(--ease), color .4s; }
.has-announce .site-header { top: var(--announce-h, 0); }
.site-header__inner {
	position: relative;
	z-index: 0;
	display: flex;
	align-items: center;
	gap: 24px;
	height: var(--header-h);
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 var(--gutter);
	border-radius: 0;
	transition: max-width .7s var(--spring), margin .7s var(--spring), padding .7s var(--spring), height .6s var(--spring), border-radius .7s var(--spring);
}
/* The glass material lives on a pseudo-element so it can "materialize" (opacity + scale together).
   The specular sheen is a gradient layer on the same surface (no blend modes: they break backdrop blur). */
.site-header__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transform: scale(.985);
	transition: opacity .5s var(--spring), transform .7s var(--spring);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, 0) 62%),
		color-mix(in srgb, var(--c-bg) 58%, transparent);
	-webkit-backdrop-filter: blur(22px) saturate(185%);
	backdrop-filter: blur(22px) saturate(185%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .9),
		inset 0 -1px 0 rgba(17, 17, 17, .06),
		inset 0 0 0 1px rgba(255, 255, 255, .4),
		0 1px 2px rgba(17, 17, 17, .05),
		0 14px 34px -12px rgba(17, 17, 17, .25);
}
.site-header.is-scrolled .site-header__inner::before,
.header-glass .site-header .site-header__inner::before { opacity: 1; transform: none; }
.header-capsule .site-header.is-scrolled .site-header__inner {
	max-width: min(1180px, calc(100% - var(--gutter) * 2 + 24px));
	margin-top: 12px;
	height: 64px;
	padding: 0 10px 0 20px;
	border-radius: 999px;
}
/* Full-width glass (capsule off): soft scroll-edge fade instead of a hard divider */
.site-header__edge { position: absolute; left: 0; right: 0; top: var(--header-h); height: 22px; pointer-events: none; opacity: 0; transition: opacity .5s; background: linear-gradient(to bottom, color-mix(in srgb, var(--c-bg) 55%, transparent), transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); }
body:not(.header-capsule) .site-header.is-scrolled .site-header__edge { opacity: 1; }
.header-solid .site-header .site-header__inner::before { opacity: 1; transform: none; background: var(--c-bg); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 var(--c-line); }
.site-header.is-hidden { transform: translateY(-120%); }
/* Adaptive material: over dark sections the glass turns smoky and the content light */
.site-header.on-dark { color: #fff; }
.site-header.on-dark .site-header__inner::before {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .03) 45%, rgba(255, 255, 255, 0) 62%),
		color-mix(in srgb, var(--c-ink) 52%, transparent);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 14px 34px -12px rgba(0, 0, 0, .5);
}
.site-header.on-dark .site-header__cta { --b-bg: var(--c-bg); --b-fg: var(--c-ink); }
.site-header.on-dark .burger__lines i { background: var(--c-ink); }
.menu-open .site-header { transform: none; color: var(--c-bg); }
.menu-open .site-header .site-header__inner::before { opacity: 0; }
.has-dark-hero .site-header:not(.is-scrolled) { color: #fff; }
.has-dark-hero .site-header:not(.is-scrolled) .site-header__cta { --b-bg: #fff; --b-fg: var(--c-ink); }

.logo { display: block; flex: none; }
.logo__img { height: auto; transition: transform .6s var(--spring), width .6s var(--spring); }
.logo:hover .logo__img { transform: rotate(-8deg) scale(1.06); }
.header-capsule .site-header.is-scrolled .logo__img { width: 42px !important; }
.nav-inline { margin-left: auto; }
.nav-inline__list { display: flex; gap: clamp(16px, 2vw, 34px); font-weight: 700; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.nav-inline__list a { display: inline-block; padding: 8px 0; position: relative; }
.nav-inline__list .current-menu-item > a::after, .nav-inline__list .current_page_item > a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--c-orange); transform: translateX(-50%); }
.site-header__actions { display: flex; align-items: center; gap: 10px; margin-left: 18px; }
.menu-open .site-header__cta { --b-bg: var(--c-bg); --b-fg: var(--c-ink); }
.burger { display: inline-flex; align-items: center; gap: 10px; height: 2.95em; padding: 0 .4em 0 1.1em; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; font-weight: 800; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; transition: transform .45s var(--spring), background-color .3s; }
.burger:active { transform: scale(.95); transition-duration: .1s; }
.burger__lines { position: relative; display: grid; place-items: center; width: 2.15em; height: 2.15em; border-radius: 50%; background: currentColor; }
.burger__lines i { position: absolute; width: 12px; height: 2px; background: var(--c-bg); border-radius: 2px; transition: transform .5s var(--spring); }
.has-dark-hero .site-header:not(.is-scrolled) .burger__lines i, .menu-open .burger__lines i { background: var(--c-ink); }
.burger__lines i:first-child { transform: translateY(-3px); }
.burger__lines i:last-child { transform: translateY(3px); }
.menu-open .burger__lines i:first-child { transform: rotate(45deg); }
.menu-open .burger__lines i:last-child { transform: rotate(-45deg); }
@media (max-width: 1099px) { .nav-inline { display: none; } .site-header__actions { margin-left: auto; } }
@media (max-width: 520px) {
	:root { --header-h: 68px; }
	.site-header__cta { display: none; }
	.burger__label { display: none; }
	.burger { padding: 0 .35em; box-shadow: none; }
	.header-capsule .site-header.is-scrolled .site-header__inner { height: 58px; margin-top: 8px; }
}
@media (prefers-reduced-transparency: reduce) {
	.site-header__inner::before { background: var(--c-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
	.site-header__inner::before { background: var(--c-bg); box-shadow: 0 0 0 2px var(--c-ink); }
}

/* ---------- Fullscreen menu ---------- */
.menu-overlay { position: fixed; inset: 0; z-index: 70; visibility: hidden; overflow: hidden auto; color: var(--c-bg); }
.menu-overlay__bg { position: absolute; inset: 0; }
.menu-overlay__bg span { position: absolute; inset: 0; }
.menu-overlay__bg span:nth-child(1) { background: var(--c-yellow); }
.menu-overlay__bg span:nth-child(2) { background: var(--c-blue); }
.menu-overlay__bg span:nth-child(3) { background: var(--c-ink); }
.menu-overlay__inner { position: relative; min-height: 100%; display: grid; grid-template-columns: 1.4fr .8fr; gap: 40px; align-items: end; max-width: var(--max); margin: 0 auto; padding: calc(var(--header-h) + 40px) var(--gutter) 48px; }
.menu-big { counter-reset: m; }
.menu-big > li { overflow: hidden; counter-increment: m; padding-top: .08em; }
.menu-big .roll { --roll: 125%; line-height: 1.08; padding-top: .06em; }
.menu-big > li > a { display: inline-flex; align-items: flex-start; gap: .3em; font-family: var(--f-display); text-transform: uppercase; font-size: clamp(2.4rem, 7vw, 6.6rem); line-height: 1; letter-spacing: -.015em; transition: color .4s, opacity .4s; }
.menu-big > li > a::before { content: "0" counter(m); font-family: var(--f-body); font-weight: 800; font-size: .8rem; letter-spacing: .1em; color: color-mix(in srgb, var(--c-bg) 55%, transparent); margin-top: 1.2em; }
.menu-big:hover > li > a { opacity: .35; }
.menu-big > li > a:hover { opacity: 1; color: var(--c-yellow); }
.menu-big .sub-menu { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 14px 2.4em; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; opacity: .7; }
.menu-overlay__aside { display: grid; gap: 40px; padding-bottom: 12px; }
.menu-overlay .eyebrow { color: color-mix(in srgb, var(--c-bg) 60%, transparent); }
.menu-overlay__cats ul { display: grid; gap: 8px; }
.menu-overlay__cats a { display: inline-flex; align-items: center; gap: .6em; font-weight: 800; font-size: clamp(1rem, 1.4vw, 1.25rem); transition: color .3s, transform .45s var(--spring); }
.menu-overlay__cats a::before { content: ""; width: .7em; height: .7em; border-radius: 50%; background: var(--c); }
.menu-overlay__cats a:hover { color: var(--c); transform: translateX(8px); }
.menu-overlay__title { font-family: var(--f-hand); font-size: 1.6rem; color: var(--c-yellow); margin-bottom: 6px; }
.menu-overlay__contact p { opacity: .7; margin-bottom: 14px; max-width: 36ch; }
.menu-overlay__contact .socials { margin-top: 18px; }
.menu-overlay .socials a { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-bg) 35%, transparent); }
@media (max-width: 900px) { .menu-overlay__inner { grid-template-columns: 1fr; align-content: space-between; } }

/* ---------- Socials ---------- */
.socials { display: flex; flex-wrap: wrap; gap: 8px; }
.socials a { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px 0 6px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; font-weight: 700; font-size: .78rem; transition: background-color .3s, color .3s, transform .45s var(--spring); }
.socials a .fsc-icon { width: 30px; height: 30px; padding: 7px; }
.socials a:hover { background: var(--c-ink); color: var(--c-bg); transform: translateY(-2px); }
.socials--sm a, .socials--icons a { width: 42px; padding: 0; justify-content: center; }
.socials--sm a span, .socials--icons a span { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; isolation: isolate; --hl-img: var(--hl-img-pink); }
.hero--split { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--header-h) + clamp(16px, 3vw, 40px)) 0 clamp(36px, 5vw, 70px); }
.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 70px); align-items: center; }
.hero__kicker { font-size: clamp(.85rem, 1.1vw, 1.02rem); line-height: 1.25; text-transform: uppercase; transform: rotate(-3deg); transform-origin: 0 50%; margin-bottom: clamp(14px, 2vw, 26px); }
.hero__title { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.7rem, 6.5vw, 7.4rem); line-height: .86; letter-spacing: -.025em; }
.hero__title .line { display: block; overflow: clip; padding: .26em .04em .1em 0; margin: -.26em 0 -.1em; }
.hero__sub { margin-top: clamp(22px, 2.6vw, 36px); font-size: clamp(1.05rem, 1.5vw, 1.4rem); text-transform: uppercase; line-height: 1.2; }
.hero__text { margin-top: 10px; max-width: 38ch; color: var(--c-muted); font-size: clamp(.95rem, 1.05vw, 1.05rem); line-height: 1.5; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(22px, 2.6vw, 34px); }
.hero__rotator { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin-top: 18px; font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.25rem); }
.rotator { display: inline-grid; overflow: hidden; border-radius: 999px; background: var(--c-orange); color: var(--c-ink); padding: .25em .8em .15em; font-family: var(--f-display); text-transform: uppercase; font-size: .9em; transition: background-color .5s; }
.rotator__word { grid-area: 1 / 1; opacity: 0; white-space: nowrap; }
.rotator__word.is-active { opacity: 1; }

.hero__visual { position: relative; aspect-ratio: 5 / 6; max-height: calc(100svh - var(--header-h) - 40px); width: 100%; justify-self: end; }
.hero__frame { position: absolute; inset: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--c-sky); box-shadow: 0 30px 60px -30px rgba(17, 17, 17, .45); }
.hero__frame .hero__img, .hero__frame .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__sticker { position: absolute; z-index: 3; display: block; }
.hero__sticker .sticker { width: 100%; height: auto; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .3)); animation: float 6s ease-in-out infinite; }
.hero__sticker--1 { width: clamp(70px, 9vw, 140px); left: -7%; top: 7%; }
.hero__sticker--1 .sticker { rotate: -14deg; }
.hero__sticker--2 { width: clamp(46px, 5.4vw, 86px); right: -4%; bottom: 10%; }
.hero__sticker--2 .sticker { rotate: 12deg; animation-delay: -3s; }
.hero__crown { width: clamp(50px, 6vw, 80px); right: 6%; top: -9%; transform: rotate(14deg); }
.hero__spark { width: 28px; }
.hero__spark--1 { left: -11%; bottom: 22%; }
.hero__spark--2 { left: -5%; bottom: 14%; width: 18px; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@media (max-width: 900px) {
	.hero--split { min-height: 0; padding-top: calc(var(--header-h) + 24px); }
	.hero__inner { grid-template-columns: 1fr; }
	.hero__visual { aspect-ratio: 4 / 4.4; max-height: none; }
	.hero__sticker--1 { left: -2%; top: -4%; }
	.hero__crown { right: 4%; top: -6%; }
	.hero__spark { display: none; }
}

/* Cover layout */
.hero--cover { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; padding: calc(var(--header-h) + 40px) 0 clamp(36px, 6vh, 80px); overflow: hidden; --hl-img: var(--hl-img-yellow); }
.hero--cover .hero__inner { grid-template-columns: 1fr; }
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__media .hero__img, .hero__media .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .15) 40%, rgba(0, 0, 0, .7)); }
.hero--cover .hero__text { color: rgba(255, 255, 255, .85); }
.hero--cover .btn--outline { --b-fg: #fff; --b-line: #fff; --b-hover: #fff; --b-hover-fg: var(--c-ink); }

/* ---------- Logo strip ---------- */
.logos { position: relative; z-index: 2; border-block: 1.5px solid var(--c-ink); background: var(--c-bg); overflow: hidden; }
.logos__row { padding: clamp(14px, 1.6vw, 22px) 0; }
.logos .band__group { gap: clamp(36px, 4.6vw, 72px); padding-right: clamp(36px, 4.6vw, 72px); }
.logos .client__name { font-family: var(--f-display); font-size: clamp(1rem, 1.6vw, 1.45rem); text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap; opacity: .85; transition: opacity .3s, color .3s; }
.logos .client:hover .client__name { opacity: 1; color: var(--c-orange); }
.logos .client__logo { height: clamp(26px, 2.6vw, 40px); width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1) brightness(0); opacity: .8; transition: filter .4s, opacity .4s; }
.logos .client:hover .client__logo { filter: none; opacity: 1; }

/* ---------- Bands (crossed marquees) ---------- */
.bands { position: relative; z-index: 2; padding: clamp(36px, 5vw, 80px) 0; overflow: hidden; }
.band { position: relative; overflow: hidden; padding: .6em 0 .48em; border-block: 2px solid var(--c-ink); }
.band--blue { background: var(--c-blue); transform: rotate(-2.5deg) scale(1.05); z-index: 2; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .35); }
.band--orange { background: var(--c-orange); transform: rotate(2deg) scale(1.05); margin-top: calc(-1 * clamp(26px, 3.8vw, 60px)); }
.band__track { display: flex; width: max-content; will-change: transform; }
.band__group { display: flex; align-items: center; flex: none; gap: clamp(18px, 2.4vw, 40px); padding-right: clamp(18px, 2.4vw, 40px); }
.band__item { font-family: var(--f-sticker); text-transform: uppercase; font-size: clamp(1.7rem, 4vw, 4.2rem); line-height: 1; color: #fff; text-shadow: 0 .05em 0 rgba(0, 0, 0, .35); white-space: nowrap; padding-top: .1em; }
.band__flame { width: clamp(30px, 3.4vw, 56px); height: auto; flex: none; }
.no-fx .band__track, .no-js .band__track { animation: marquee-css 40s linear infinite; }

/* ---------- Section head ---------- */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(30px, 3.6vw, 56px); }
.section-head__main { position: relative; padding-right: 80px; }
.section-head__arrow { width: clamp(46px, 5vw, 72px); right: 0; bottom: -6px; color: color-mix(in srgb, var(--c-pink) 70%, #000); }
.projects { --hl-img: var(--hl-img-yellow); }

/* ---------- Project cards ---------- */
.grid { display: grid; gap: clamp(12px, 1.4vw, 20px); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.card { grid-column: span 12; }
.card__link { display: block; border-radius: var(--radius); transition: transform .5s var(--spring), box-shadow .5s var(--spring); }
.card__link:hover { transform: translateY(-5px); box-shadow: 0 24px 40px -22px rgba(17, 17, 17, .55); }
.card__link:active { transform: scale(.985); transition-duration: .12s; }
.card__media { position: relative; overflow: hidden; border-radius: var(--radius); background: #222; aspect-ratio: 4 / 3; transform: translateZ(0); }
.card__img { position: absolute; inset: -6% 0; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.card__link:hover .card__img img { transform: scale(1.07); }
.card__placeholder { display: grid; place-items: center; height: 100%; }
.card__placeholder .sticker { width: 30%; opacity: .35; }
.card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.card.is-playing .card__video { opacity: 1; }
.card__overlay { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 56px clamp(14px, 1.4vw, 20px) clamp(14px, 1.4vw, 18px); color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, .35) 55%, transparent); }
.card__title { font-weight: 800; font-size: clamp(.95rem, 1.15vw, 1.1rem); line-height: 1.15; text-transform: uppercase; letter-spacing: .01em; }
.card__meta { margin-top: 4px; font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .78; }
.card__arrow { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; transition: background-color .35s, color .35s, transform .5s var(--spring); }
.card__arrow .arrow { width: 20px; height: 20px; }
.card__link:hover .card__arrow { background: var(--c-yellow); color: var(--c-ink); transform: rotate(-45deg); }
@media (min-width: 640px) { .card { grid-column: span 6; } }
@media (min-width: 1024px) {
	.grid--uniform .card { grid-column: span 4; }
	.grid--mixed .card--lg { grid-column: span 7; }
	.grid--mixed .card--lg .card__media { aspect-ratio: 16 / 10.4; }
	.grid--mixed .card--md { grid-column: span 5; }
	.grid--mixed .card--md .card__media { aspect-ratio: 5 / 4.65; }
	.grid--mixed .card--sm { grid-column: span 4; }
}
.card.is-out { display: none; }
.grid.is-filtered .card { grid-column: span 12; }
@media (min-width: 640px) { .grid.is-filtered .card { grid-column: span 6; } }
@media (min-width: 1024px) { .grid.is-filtered .card { grid-column: span 4; } .grid.is-filtered .card .card__media { aspect-ratio: 4 / 3; } }

/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(26px, 3vw, 44px); }
.filter { display: inline-flex; align-items: center; gap: .5em; height: 2.9em; padding: 0 1.2em; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--c-ink); font-weight: 800; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; transition: background-color .3s, transform .45s var(--spring); }
.filter sup { font-size: .75em; opacity: .55; }
.filter::before { content: ""; width: .65em; height: .65em; border-radius: 50%; background: var(--c, var(--c-ink)); }
.filter[data-filter="*"]::before { display: none; }
.filter:hover { transform: translateY(-2px); }
.filter:active { transform: scale(.96); transition-duration: .1s; }
.filter.is-active { background: var(--c, var(--c-ink)); color: var(--c-ink); }
.filter[data-filter="*"].is-active { color: var(--c-bg); }
.portfolio__empty { color: var(--c-muted); padding: 40px 0; font-size: 1.05rem; }

.pagination { margin-top: 50px; }
.pagination ul { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination a, .pagination span { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--c-ink); font-weight: 800; }
.pagination .current { background: var(--c-ink); color: var(--c-bg); }

/* ==========================================================================
   Services
   ========================================================================== */
.services { --hl-img: var(--hl-img-blue); }
.services__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 60px; margin-bottom: clamp(30px, 3.6vw, 56px); }
.services__aside { position: relative; display: flex; align-items: flex-end; gap: 22px; padding-bottom: 6px; }
.services__aside p { font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: 500; line-height: 1.35; max-width: 32ch; }
.services__crown { position: relative; width: clamp(44px, 4.6vw, 64px); transform: rotate(10deg); flex: none; }

.svc-grid { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: clamp(10px, 1vw, 16px); perspective: 900px; }
.svc {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: clamp(240px, 22vw, 320px);
	padding: clamp(16px, 1.5vw, 22px);
	border-radius: var(--radius);
	background: var(--accent);
	color: var(--c-ink);
	box-shadow: inset 0 0 0 1.5px rgba(17, 17, 17, .08);
	transition: box-shadow .55s var(--spring);
	will-change: transform;
	-webkit-tap-highlight-color: transparent;
}
.svc:hover { box-shadow: inset 0 0 0 2px var(--c-ink), 7px 7px 0 var(--c-ink); }
.svc__icon { display: block; width: clamp(58px, 5.4vw, 82px); margin-bottom: auto; transition: transform .6s var(--spring); transform-origin: 50% 80%; }
.svc__icon .icon-art { width: 100%; height: auto; filter: drop-shadow(0 5px 0 rgba(17, 17, 17, .12)); }
.svc:hover .svc__icon { transform: translateY(-6px) rotate(-8deg) scale(1.08); }
.svc__num { margin-top: 18px; font-weight: 800; font-size: .82rem; }
.svc__name { font-weight: 800; font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.12; }
.svc__desc { margin-top: 6px; font-size: .74rem; line-height: 1.4; color: color-mix(in srgb, var(--c-ink) 74%, transparent); }
.svc__go { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-ink); color: var(--accent); transform: scale(0) rotate(-45deg); transition: transform .5s var(--spring); }
.svc__go .arrow { width: 18px; height: 18px; }
.svc:hover .svc__go, .svc:focus-visible .svc__go { transform: scale(1) rotate(0); }
@media (max-width: 1180px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc { min-height: 220px; } .svc__go { transform: scale(1); } }

/* hscroll variant (photo cards) */
.services__track { display: flex; flex-direction: column; gap: 18px; padding-inline: var(--gutter); max-width: var(--max); margin: 0 auto; }
.service-card { position: relative; display: grid; gap: 20px; align-content: start; background: var(--c-paper); border-radius: var(--radius-lg); padding: clamp(20px, 2.2vw, 32px); box-shadow: inset 0 0 0 1.5px var(--c-ink); overflow: hidden; }
.service-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--accent); }
.service-card__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap-reverse; }
.service-card__num { font-family: var(--f-display); font-size: clamp(2.2rem, 3.4vw, 3.4rem); line-height: 1; order: 2; }
.service-card__num small { font-size: .35em; color: var(--c-muted); margin-left: .2em; }
.service-card__media { display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 11; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.service-card:hover .service-card__media img { transform: scale(1.06); }
.service-card__body { display: grid; gap: 16px; align-content: start; }
.service-card__desc { color: var(--c-muted); max-width: 46ch; }
.services__progress { display: none; }
@media (max-width: 1023px) { .service-card { position: sticky; top: calc(var(--header-h) + var(--i, 0) * 14px); } }
@media (min-width: 1024px) {
	.services__pin { position: relative; overflow: hidden; }
	.services__track { flex-direction: row; width: max-content; max-width: none; margin: 0; gap: 24px; padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); padding-right: var(--gutter); }
	.service-card { width: clamp(380px, 32vw, 520px); min-height: min(74vh, 740px); grid-template-rows: auto auto 1fr; }
	.no-fx .services__pin { overflow-x: auto; padding-bottom: 20px; }
	.services__progress { display: block; position: relative; height: 4px; margin: 40px auto 0; width: min(420px, 60vw); background: var(--c-line); border-radius: 4px; overflow: hidden; }
	.services__progress span { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: var(--c-ink); }
}

/* ==========================================================================
   Studio (dark) – idea → result collage
   ========================================================================== */
.studio { position: relative; background: var(--c-ink); color: var(--c-bg); padding-block: clamp(70px, 8vw, 130px); overflow: hidden; --hl-img: var(--hl-img-yellow); }
.studio__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 5vw, 90px); align-items: center; }
.studio__copy { position: relative; }
.studio__title { color: #fff; max-width: 11ch; }
.studio__arrow { width: clamp(70px, 8vw, 110px); right: -2%; top: -8%; color: var(--c-yellow); }
.studio__text { margin-top: 22px; color: color-mix(in srgb, var(--c-bg) 72%, transparent); max-width: 44ch; margin-bottom: 28px; }
.studio__collage { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, .8vw, 12px); padding: 40px 0; }
.studio__collage--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.studio__collage--5 .studio__shot:first-child { grid-row: span 2; aspect-ratio: auto; }
.studio__collage--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.studio__shot { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #222; transform: rotate(var(--r, 0deg)); transition: transform .6s var(--spring); }
.studio__shot:nth-child(3n + 1) { --r: -1.5deg; }
.studio__shot:nth-child(3n + 2) { --r: 1.2deg; }
.studio__shot:nth-child(3n) { --r: -.6deg; }
.studio__shot:hover { transform: rotate(0) scale(1.03); z-index: 2; }
.studio__shot img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(calc(1 - var(--k, 1))) contrast(calc(1.15 - var(--k, 1) * .15)); transition: filter .6s; }
.studio__shot:hover img { filter: none; }
.studio__note { position: absolute; z-index: 3; font-size: clamp(.8rem, 1vw, .95rem); line-height: 1.1; text-transform: uppercase; color: #fff; max-width: 15ch; }
.studio__note--1 { left: 0; top: 0; transform: rotate(-4deg); }
.studio__note--2 { right: 0; top: 0; text-align: right; transform: rotate(3deg); }
.studio__note--3 { right: 0; bottom: 0; text-align: right; transform: rotate(-3deg); color: var(--c-yellow); }
.studio__collage .doodle { color: #fff; }
.studio__spark--1 { width: 26px; left: -24px; top: 46%; }
.studio__collage .studio__crown { width: 48px; right: -16px; bottom: 18%; transform: rotate(12deg); color: var(--c-yellow); }
.studio__loop { width: 70px; left: 18%; bottom: -2px; }
@media (max-width: 900px) { .studio__grid { grid-template-columns: 1fr; } .studio__arrow, .studio__spark--1, .studio__collage .studio__crown { display: none; } }

/* ==========================================================================
   Universe (sky)
   ========================================================================== */
.universe { position: relative; overflow: hidden; background: var(--c-sky); padding-block: clamp(70px, 8vw, 130px); --hl-img: var(--hl-img-pink); }
.universe__clouds { position: absolute; inset: 0; pointer-events: none; }
.universe__clouds i { position: absolute; display: block; width: var(--w, 220px); height: calc(var(--w, 220px) * .3); border-radius: 999px; background: #fff; opacity: .9; animation: drift var(--t, 70s) linear infinite alternate; }
.universe__clouds i::before, .universe__clouds i::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.universe__clouds i::before { width: 46%; height: 150%; left: 14%; bottom: 30%; }
.universe__clouds i::after { width: 34%; height: 115%; left: 50%; bottom: 36%; }
.universe__clouds i:nth-child(1) { --w: 240px; left: 4%; top: 12%; }
.universe__clouds i:nth-child(2) { --w: 160px; left: 62%; top: 8%; --t: 90s; }
.universe__clouds i:nth-child(3) { --w: 280px; left: 78%; top: 72%; --t: 80s; }
.universe__clouds i:nth-child(4) { --w: 120px; left: 40%; top: 86%; --t: 60s; }
.universe__clouds i:nth-child(5) { --w: 190px; left: -6%; top: 78%; --t: 100s; }
@keyframes drift { from { transform: translateX(-30px); } to { transform: translateX(40px); } }
.universe__grid { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.polaroid { position: relative; background: #fff; padding: clamp(10px, 1vw, 16px) clamp(10px, 1vw, 16px) clamp(54px, 5vw, 76px); border-radius: 4px; box-shadow: 0 30px 50px -24px rgba(17, 40, 70, .55), 0 2px 4px rgba(0, 0, 0, .08); transform: rotate(-5deg); transition: transform .7s var(--spring); max-width: 560px; justify-self: center; width: 100%; }
.polaroid:hover { transform: rotate(-1.5deg) scale(1.02); }
.polaroid__img { aspect-ratio: 4 / 3.2; overflow: hidden; background: #eee; }
.polaroid__img img { width: 100%; height: 100%; object-fit: cover; }
.polaroid figcaption { position: absolute; left: 22px; bottom: clamp(14px, 1.4vw, 22px); font-size: clamp(1.1rem, 1.8vw, 1.7rem); text-transform: uppercase; color: var(--c-ink); }
.polaroid__sticker { position: absolute; right: -6%; top: -8%; width: clamp(60px, 7vw, 100px); transform: rotate(14deg); }
.polaroid__sticker .sticker { width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .25)); }
.universe__copy { position: relative; }
.universe__crown { width: clamp(46px, 5vw, 70px); left: -8%; top: -22%; transform: rotate(-12deg); }
.universe__arrow { width: clamp(50px, 5vw, 76px); left: -15%; top: 40%; transform: scaleX(-1) rotate(-30deg); }
.universe__text { margin: 22px 0 28px; max-width: 48ch; font-weight: 500; color: color-mix(in srgb, var(--c-ink) 82%, transparent); }
@media (max-width: 900px) { .universe__grid { grid-template-columns: 1fr; } .universe__arrow { display: none; } .universe__crown { left: auto; right: 0; top: -40px; } }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta { position: relative; padding-block: clamp(60px, 7vw, 110px); overflow: hidden; --hl-img: var(--hl-img-pink); }
.cta__grid { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: center; }
.cta__character { position: relative; width: clamp(170px, 20vw, 280px); padding-top: 40px; }
.cta__figure img, .cta__figure .sticker { width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .18)); animation: float 5s ease-in-out infinite; }
.cta__bubble { position: absolute; z-index: 2; left: 62%; top: -20px; width: clamp(150px, 13vw, 190px); padding: 18px 16px; background: #fff; border: 2.5px solid var(--c-ink); border-radius: 50% / 46%; text-align: center; font-size: clamp(.78rem, .9vw, .9rem); line-height: 1.15; text-transform: uppercase; transform: rotate(5deg); box-shadow: 4px 4px 0 var(--c-ink); }
.cta__bubble::after { content: ""; position: absolute; left: 14%; bottom: -16px; width: 22px; height: 22px; background: #fff; border-right: 2.5px solid var(--c-ink); border-bottom: 2.5px solid var(--c-ink); transform: skewX(30deg) rotate(30deg); }
.cta__title { font-size: clamp(2.6rem, 6.2vw, 6.4rem); }
.cta__text { margin: 14px 0 26px; font-size: clamp(1rem, 1.3vw, 1.2rem); color: var(--c-muted); }
.cta__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.cta__lines { width: clamp(40px, 4vw, 60px); right: 0; top: 4%; }
.cta__spark { width: 30px; right: 8%; bottom: 0; }
@media (max-width: 760px) { .cta__grid { grid-template-columns: 1fr; } .cta__character { width: 150px; } .cta__bubble { left: 90%; } }

/* ---------- About / statement / clients (optional sections) ---------- */
.about__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.about__text > .pill { margin-bottom: clamp(22px, 3vw, 40px); }
.about__lead { font-size: clamp(1.5rem, 3vw, 3rem); line-height: 1.16; font-weight: 700; letter-spacing: -.015em; margin-bottom: clamp(26px, 3.6vw, 48px); }
.about__media { position: relative; }
.about__img { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; }
.about__par { height: 115%; }
.about__img img { width: 100%; height: 100%; object-fit: cover; }
.about__sticker { position: absolute; left: -9%; bottom: -7%; width: clamp(80px, 9vw, 140px); }
.about__sticker .sticker { width: 100%; height: auto; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; margin-bottom: 36px; padding-top: 24px; border-top: 1.5px solid var(--c-ink); }
.stats strong { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 1; }
.stats span { color: var(--c-muted); font-weight: 700; font-size: .85rem; }
@media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; } .about__media { max-width: 520px; width: 86%; margin-left: auto; } }
.statement { --hl-img: var(--hl-img-orange); }
.statement .container { position: relative; }
.statement__text { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(2.1rem, 5.6vw, 6rem); line-height: .98; letter-spacing: -.015em; max-width: 17ch; }
.statement__sticker { position: absolute; right: var(--gutter); top: -20px; width: clamp(80px, 11vw, 170px); }
.statement__sticker .sticker { width: 100%; height: auto; }
.clients__head { margin-bottom: clamp(30px, 4vw, 60px); }
.clients__row { overflow: hidden; padding: 6px 0; border-top: 1.5px solid var(--c-ink); }
.clients__row:last-child { border-bottom: 1.5px solid var(--c-ink); }
.client { display: inline-flex; align-items: center; }
.clients__row .client__name { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(2rem, 5vw, 4.8rem); line-height: 1.1; color: transparent; -webkit-text-stroke: 1.5px var(--c-ink); white-space: nowrap; transition: color .4s; }
.clients__row .client:hover .client__name { color: var(--c-orange); }
.clients__row .client__logo { height: clamp(40px, 4.4vw, 70px); width: auto; filter: grayscale(1); }
.clients__sep { color: var(--c-orange); font-size: clamp(1rem, 2vw, 1.8rem); }
.clients__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 45%), 1fr)); border-top: 1.5px solid var(--c-ink); border-left: 1.5px solid var(--c-ink); }
.clients__cell { display: grid; place-items: center; aspect-ratio: 3 / 2; border-right: 1.5px solid var(--c-ink); border-bottom: 1.5px solid var(--c-ink); padding: 16px; text-align: center; }
.clients__cell .client__name { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1rem, 1.4vw, 1.3rem); }
.clients__cell .client__logo { max-height: 60px; width: auto; filter: grayscale(1); }

/* ---------- Reel ---------- */
.reel__head { margin-bottom: clamp(30px, 4vw, 56px); }
.reel__stage { padding-inline: var(--gutter); }
.reel__frame { position: relative; display: block; width: 100%; max-width: var(--max); margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #000; will-change: transform; }
.reel__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .6s, transform 1.2s var(--ease-out); }
.reel__frame:hover .reel__preview { opacity: 1; transform: scale(1.03); }
.reel__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: clamp(84px, 9vw, 130px); aspect-ratio: 1; border-radius: 50%; background: var(--c-yellow); color: var(--c-ink); border: 2.5px solid var(--c-ink); transition: transform .5s var(--spring); }
.reel__play svg { width: 34%; fill: currentColor; margin-left: 6%; }
.reel__play span { display: none; }
.reel__frame:hover .reel__play { transform: scale(1.1); }
.has-cursor .reel__play { opacity: 0; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: calc(var(--header-h) + clamp(50px, 8vw, 120px)) 0 clamp(26px, 3vw, 50px); position: relative; --hl-img: var(--hl-img-pink); }
.page-hero__title { font-family: var(--f-display); text-transform: uppercase; font-weight: 400; font-size: clamp(3.2rem, 12vw, 12rem); line-height: .86; letter-spacing: -.025em; }
.page-hero__title--md { font-size: clamp(2.6rem, 7vw, 7rem); }
.page-hero__intro { margin-top: clamp(16px, 2vw, 28px); color: var(--c-muted); font-size: clamp(1.02rem, 1.5vw, 1.4rem); max-width: 42ch; line-height: 1.45; }
.page-hero__count { font-family: var(--f-hand); font-size: clamp(1.1rem, 1.8vw, 1.5rem); margin-bottom: 8px; transform: rotate(-3deg); transform-origin: 0 50%; }
.page-hero__count span { text-transform: uppercase; }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(30px, 5vw, 90px); align-items: end; }
.page-hero__pill { margin: 6px 0 24px; line-height: 1; }
.page-hero__tagline { font-family: var(--f-hand); font-size: clamp(1.3rem, 2.2vw, 2rem); margin-bottom: 8px; }
.page-hero--term .page-hero__intro { color: var(--c-ink); font-weight: 600; max-width: 46ch; margin-bottom: 26px; }
.page-hero__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--accent); }
.page-hero__media > div { height: 112%; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero .eyebrow a { color: var(--c-ink); }
@media (max-width: 900px) { .page-hero__grid { grid-template-columns: 1fr; } .page-hero__media { aspect-ratio: 16 / 11; } }
.term-nav__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.term-nav__list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-radius: var(--radius); background: var(--c); font-weight: 800; font-size: clamp(1rem, 1.4vw, 1.25rem); transition: transform .5s var(--spring), box-shadow .5s var(--spring); }
.term-nav__list a svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; flex: none; transition: transform .5s var(--spring); }
.term-nav__list a:hover { transform: translateY(-4px); box-shadow: 6px 6px 0 var(--c-ink); }
.term-nav__list a:hover svg { transform: rotate(-45deg); }

/* ---------- Single project ---------- */
.project-hero { padding-top: calc(var(--header-h) + clamp(36px, 6vw, 90px)); padding-bottom: clamp(24px, 3vw, 46px); }
.project-hero__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: clamp(20px, 2.6vw, 38px); }
.link-back { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.link-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform .45s var(--spring); }
.link-back:hover svg { transform: translateX(-5px); }
.project-hero__cats { display: flex; flex-wrap: wrap; gap: 8px; }
.project-hero__title { font-family: var(--f-display); text-transform: uppercase; font-weight: 400; font-size: clamp(2.8rem, 9vw, 9.6rem); line-height: .88; letter-spacing: -.025em; }
.project-hero__client { font-family: var(--f-hand); font-size: clamp(1.4rem, 2.6vw, 2.6rem); margin-top: 12px; transform: rotate(-2deg); transform-origin: 0 50%; }
.project-cover { position: relative; padding-inline: var(--gutter); }
.project-cover__inner { position: relative; max-width: calc(var(--max) - var(--gutter) * 2); margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--accent); }
.project-cover__inner > img, .project-cover__inner > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-cover__inner .fsc-video { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
@media (max-width: 700px) { .project-cover__inner { aspect-ratio: 4 / 5; } }
.project-intro { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(30px, 6vw, 110px); padding-block: clamp(50px, 7vw, 110px); }
.project-meta { display: grid; gap: 20px; align-content: start; position: sticky; top: calc(var(--header-h) + 20px); }
.project-meta > div { padding-top: 14px; border-top: 1.5px solid var(--c-ink); }
.project-meta dt { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 4px; }
.project-meta dd { font-weight: 700; font-size: 1.02rem; }
.project-body { display: grid; gap: 30px; align-content: start; }
.project-body__lead { font-size: clamp(1.4rem, 2.6vw, 2.5rem); line-height: 1.18; font-weight: 700; letter-spacing: -.015em; }
@media (max-width: 900px) { .project-intro { grid-template-columns: 1fr; } .project-meta { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.project-gallery { padding-bottom: clamp(50px, 7vw, 110px); }
.project-gallery__track { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 26px); align-items: start; }
.gitem { grid-column: span 12; position: relative; }
.gitem a { display: block; border-radius: var(--radius); overflow: hidden; position: relative; background: #ddd; }
.gitem a > div { overflow: hidden; }
.gitem img { width: 100%; height: auto; transition: transform 1.2s var(--ease-out); }
.gitem a:hover img { transform: scale(1.04); }
.gitem figcaption { font-size: .85rem; color: var(--c-muted); margin-top: 8px; }
@media (min-width: 800px) {
	.project-gallery--grid .gitem { grid-column: span 6; }
	.project-gallery--grid .gitem a { aspect-ratio: 4 / 5; }
	.project-gallery--grid .gitem a > div, .project-gallery--grid .gitem img { height: 100%; object-fit: cover; }
	.project-gallery--mosaic .gitem:nth-child(odd) { grid-column: 1 / span 6; }
	.project-gallery--mosaic .gitem:nth-child(odd).gitem--landscape { grid-column: 1 / span 7; }
	.project-gallery--mosaic .gitem:nth-child(even) { grid-column: 7 / span 6; margin-top: 12vw; }
	.project-gallery--mosaic .gitem:nth-child(even).gitem--portrait { grid-column: 8 / span 5; }
	.project-gallery--mosaic .gitem:nth-child(even).gitem--landscape { grid-column: 6 / span 7; }
	.project-gallery--mosaic .gitem:nth-child(4n + 3) { grid-column: 2 / span 5; margin-top: -6vw; }
	.project-gallery--mosaic .gitem:nth-child(4n + 3).gitem--landscape { grid-column: 2 / span 6; }
	.project-gallery--mosaic .gitem--landscape:nth-child(5n) { grid-column: 1 / -1; margin-top: 0; }
}
.project-gallery--slider { overflow: hidden; }
.project-gallery--slider .project-gallery__track { display: flex; width: max-content; max-width: none; }
.project-gallery--slider .gitem img { height: min(70vh, 720px); width: auto; max-width: none; }
@media (max-width: 1023px) { .project-gallery--slider { overflow-x: auto; scroll-snap-type: x mandatory; } .project-gallery--slider .gitem { scroll-snap-align: center; } .project-gallery--slider .gitem img { height: 60vh; } }
.project-videos { display: grid; gap: clamp(18px, 2.6vw, 36px); padding-bottom: clamp(50px, 7vw, 110px); }

.next-project { position: relative; display: block; overflow: hidden; min-height: clamp(360px, 62vh, 680px); isolation: isolate; background: var(--c-ink); color: #fff; }
.next-project__media { position: absolute; inset: 0; z-index: -1; }
.next-project__media img { width: 100%; height: 100%; object-fit: cover; opacity: .35; transform: scale(1.08); transition: opacity .8s, transform 1.6s var(--ease-out); }
.next-project::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .7), transparent 65%); }
.next-project:hover .next-project__media img { opacity: .7; transform: scale(1); }
.next-project__inner { display: flex; flex-direction: column; justify-content: flex-end; min-height: inherit; padding-block: clamp(36px, 5vw, 80px); }
.next-project .eyebrow { color: rgba(255, 255, 255, .7); }
.next-project__title { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(2.8rem, 9vw, 9.6rem); line-height: .88; letter-spacing: -.02em; transition: color .5s; }
.next-project:hover .next-project__title { color: var(--accent); }
.next-project__client { font-family: var(--f-hand); font-size: clamp(1.2rem, 2.2vw, 2rem); opacity: .8; }

/* ---------- Embedded videos (plugin markup) ---------- */
.fsc-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.fsc-video video, .fsc-video iframe, .fsc-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.fsc-video.is-lazy { cursor: pointer; }
.fsc-video.is-lazy img { opacity: .85; transition: opacity .5s, transform 1s var(--ease-out); }
.fsc-video.is-lazy:hover img { opacity: 1; transform: scale(1.03); }
.fsc-video__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: clamp(66px, 7vw, 100px); aspect-ratio: 1; border-radius: 50%; background: var(--c-yellow); border: 2.5px solid var(--c-ink); color: var(--c-ink); transition: transform .5s var(--spring); z-index: 2; }
.fsc-video__play svg { width: 36%; fill: currentColor; margin-left: 6%; }
.fsc-video.is-lazy:hover .fsc-video__play { transform: scale(1.1); }
.fsc-video__title { position: absolute; left: 20px; bottom: 18px; z-index: 2; color: #fff; font-weight: 800; text-transform: uppercase; font-size: clamp(.95rem, 1.4vw, 1.3rem); text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.fsc-video.is-playing .fsc-video__play, .fsc-video.is-playing .fsc-video__title { display: none; }

/* ---------- Contact ---------- */
.contact { padding-top: calc(var(--header-h) + clamp(44px, 7vw, 110px)); --hl-img: var(--hl-img-pink); }
.contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 110px); align-items: start; }
.contact__intro { position: relative; display: grid; gap: 26px; align-content: start; }
.contact__intro .page-hero__title { font-size: clamp(2.4rem, 5vw, 5.2rem); }
.contact__intro .page-hero__intro { margin-top: 0; }
.contact__info { display: grid; gap: 12px; }
.contact__info li { display: grid; gap: 2px; font-size: 1.1rem; font-weight: 700; }
.contact__info span { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); font-weight: 800; }
.contact__sticker { width: clamp(70px, 8vw, 110px); display: block; }
.contact__sticker .sticker { width: 100%; height: auto; }
.contact__form { background: var(--c-paper); border-radius: var(--radius-lg); padding: clamp(22px, 3.2vw, 48px); box-shadow: inset 0 0 0 1.5px var(--c-ink), 8px 8px 0 var(--c-ink); }
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }
.fsc-form-contact { display: grid; gap: 18px; }
.fsc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fsc-chips { border: 0; padding: 0; margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 8px; }
.fsc-chips legend { font-family: var(--f-display); text-transform: uppercase; font-size: 1.3rem; margin-bottom: 14px; }
.fsc-chip input { position: absolute; opacity: 0; pointer-events: none; }
.fsc-chip span { display: inline-block; padding: .62em 1.1em; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--c-ink); font-weight: 700; font-size: .82rem; cursor: pointer; transition: background-color .25s, transform .4s var(--spring); user-select: none; }
.fsc-chip span:active { transform: scale(.95); }
.fsc-chip input:checked + span { background: var(--c-yellow); }
.fsc-chip input:focus-visible + span { outline: 2.5px solid var(--c-ink); outline-offset: 2px; }
.fsc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .fsc-row { grid-template-columns: 1fr; } }
.fsc-input { position: relative; display: block; }
.fsc-input input, .fsc-input textarea { width: 100%; background: transparent; border: 0; border-bottom: 1.5px solid var(--c-line); color: var(--c-ink); font: inherit; font-size: 1.02rem; padding: 26px 0 10px; border-radius: 0; outline: 0; transition: border-color .3s; resize: vertical; }
.fsc-input textarea { min-height: 120px; }
.fsc-input span { position: absolute; left: 0; top: 24px; color: var(--c-muted); pointer-events: none; transform-origin: 0 0; transition: transform .35s var(--spring), color .3s; }
.fsc-input input:focus, .fsc-input textarea:focus { border-color: var(--c-ink); }
.fsc-input input:focus + span, .fsc-input input:not(:placeholder-shown) + span, .fsc-input textarea:focus + span, .fsc-input textarea:not(:placeholder-shown) + span { transform: translateY(-20px) scale(.75); color: var(--c-ink); }
.fsc-input.is-invalid input, .fsc-input.is-invalid textarea { border-color: #d6336c; }
.fsc-check { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--c-muted); }
.fsc-check input { margin-top: 3px; accent-color: var(--c-ink); width: 18px; height: 18px; flex: none; }
.fsc-form-contact__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 4px; }
.fsc-form-contact .fsc-btn { border: 0; cursor: pointer; }
.fsc-form-contact.is-sending .fsc-btn { opacity: .6; pointer-events: none; }
.fsc-form-contact__msg { font-weight: 700; }
.fsc-form-contact__msg.is-error { color: #d6336c; }

/* ---------- Entry (block editor content) ---------- */
.entry { font-size: clamp(1rem, 1.1vw, 1.12rem); color: color-mix(in srgb, var(--c-ink) 86%, transparent); }
.entry > * + * { margin-top: 1.25em; }
.entry--page { max-width: 820px; }
.entry h2, .entry h3, .entry h4 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; line-height: 1; color: var(--c-ink); margin-top: 1.7em; letter-spacing: -.01em; }
.entry h2 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); }
.entry h3 { font-size: clamp(1.4rem, 2.4vw, 2.2rem); }
.entry h4 { font-size: 1.3rem; }
.entry a:not(.wp-block-button__link):not(.btn) { color: var(--c-ink); font-weight: 600; background: linear-gradient(var(--c-pink), var(--c-pink)) 0 92% / 100% .35em no-repeat; }
.entry ul, .entry ol { padding-left: 1.3em; }
.entry ul { list-style: none; }
.entry ul li { position: relative; }
.entry ul li::before { content: ""; position: absolute; left: -1.1em; top: .62em; width: .5em; height: .5em; border-radius: 50%; background: var(--c-orange); }
.entry ol { list-style: decimal; }
.entry blockquote { border-left: 4px solid var(--c-yellow); margin-left: 0; padding: .2em 0 .2em 1.2em; font-size: 1.3em; font-weight: 700; color: var(--c-ink); }
.entry img { border-radius: var(--radius); }
.entry figcaption { font-size: .85rem; color: var(--c-muted); margin-top: 8px; }
.entry .alignwide { width: min(1200px, calc(100vw - var(--gutter) * 2)); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.entry .alignfull { width: 100vw; max-width: none; margin-left: 50%; transform: translateX(-50%); }
.entry .wp-block-button__link { border-radius: 999px; background: var(--c-ink); color: var(--c-bg); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; padding: 1.1em 1.8em; }
.entry .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 1.5px currentColor; }
.entry .has-ink-color { color: var(--c-ink); } .entry .has-ink-background-color { background-color: var(--c-ink); }
.entry .has-paper-color { color: #fff; } .entry .has-paper-background-color { background-color: #fff; }
.entry .has-cream-color { color: var(--c-bg); } .entry .has-cream-background-color { background-color: var(--c-bg); }
.entry .has-blue-color { color: var(--c-blue); } .entry .has-blue-background-color { background-color: var(--c-blue); }
.entry .has-orange-color { color: var(--c-orange); } .entry .has-orange-background-color { background-color: var(--c-orange); }
.entry .has-yellow-color { color: var(--c-yellow); } .entry .has-yellow-background-color { background-color: var(--c-yellow); }
.entry .has-pink-color { color: var(--c-pink); } .entry .has-pink-background-color { background-color: var(--c-pink); }
.entry .has-green-color { color: var(--c-green); } .entry .has-green-background-color { background-color: var(--c-green); }
.entry .has-purple-color { color: var(--c-purple); } .entry .has-purple-background-color { background-color: var(--c-purple); }
.entry--full > * + * { margin-top: 0; }
.page-content { padding-block: clamp(50px, 7vw, 110px); }

.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 36px 24px; }
.post-card__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; background: #ddd; margin-bottom: 16px; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.post-card a:hover img { transform: scale(1.05); }
.post-card__date { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.post-card__title { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.3rem, 1.9vw, 1.9rem); line-height: 1.02; margin: 8px 0; }
.post-card__excerpt { color: var(--c-muted); }

.notfound { min-height: 100svh; display: grid; align-items: center; text-align: center; padding: calc(var(--header-h) + 40px) 0 80px; }
.notfound__code { display: flex; justify-content: center; align-items: center; font-family: var(--f-display); font-size: clamp(7rem, 26vw, 22rem); line-height: .8; color: var(--c-blue); -webkit-text-stroke: 3px var(--c-ink); }
.notfound__code span:last-child { color: var(--c-pink); }
.notfound__flame { width: .8em; }
.notfound__flame .sticker { width: 100%; height: auto; }
.notfound .page-hero__intro { margin-inline: auto; }
.notfound__btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 32px; }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; border-top: 1.5px solid var(--c-ink); }
.site-footer__main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 24px clamp(24px, 4vw, 64px); padding-block: clamp(28px, 3vw, 44px); }
.site-footer__brand { display: flex; align-items: center; gap: 16px; }
.site-footer__logo .logo__img { width: 54px !important; }
.site-footer__tagline { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.45; }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px clamp(16px, 2vw, 32px); font-weight: 700; font-size: .82rem; }
.site-footer__contact { display: grid; gap: 2px; font-size: .82rem; font-weight: 600; text-align: right; }
.site-footer__address { color: var(--c-muted); }
.site-footer__social { position: relative; display: flex; align-items: center; gap: 10px; }
.site-footer__crown { position: relative; width: 42px; transform: rotate(10deg); }
.to-top { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--c-ink); color: var(--c-bg); transition: background-color .3s, color .3s, transform .45s var(--spring); }
.to-top:hover { background: var(--c-yellow); color: var(--c-ink); transform: translateY(-3px); }
.to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.site-footer__wordmark { overflow: hidden; line-height: .8; padding: 0 var(--gutter); text-align: center; }
.site-footer__wordmark span { display: inline-block; font-family: var(--f-display); text-transform: uppercase; white-space: nowrap; font-size: 13vw; letter-spacing: -.03em; padding-top: .1em; }
.site-footer__wordmark .char:nth-child(6n + 1) { color: var(--c-yellow); }
.site-footer__wordmark .char:nth-child(6n + 2) { color: var(--c-blue); }
.site-footer__wordmark .char:nth-child(6n + 3) { color: var(--c-pink); }
.site-footer__wordmark .char:nth-child(6n + 4) { color: var(--c-green); }
.site-footer__wordmark .char:nth-child(6n + 5) { color: var(--c-orange); }
.site-footer__wordmark .char:nth-child(6n) { color: var(--c-purple); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 18px; border-top: 1px solid var(--c-line); font-size: .76rem; color: var(--c-muted); }
.legal { display: flex; gap: 18px; }
@media (max-width: 1000px) {
	.site-footer__main { grid-template-columns: 1fr 1fr; }
	.site-footer__nav { grid-column: 1 / -1; order: 3; }
	.site-footer__links { justify-content: flex-start; }
	.site-footer__contact { text-align: left; order: 4; }
	.site-footer__social { justify-content: flex-end; }
}
@media (max-width: 520px) { .site-footer__main { grid-template-columns: 1fr; } .site-footer__social { justify-content: flex-start; } }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 9990; display: grid; place-items: center; background: rgba(12, 12, 12, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; padding: 70px; color: #fff; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__stage { width: 100%; height: 100%; display: grid; place-items: center; }
.lightbox__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 12px; }
.lightbox__stage .lb-video { width: min(1400px, 100%); aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.lightbox__stage .lb-video iframe, .lightbox__stage .lb-video video { width: 100%; height: 100%; border: 0; }
.lightbox__close { position: absolute; top: 18px; right: 18px; width: 52px; height: 52px; border-radius: 50%; background: #fff; }
.lightbox__close span { position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; background: var(--c-ink); }
.lightbox__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.lightbox__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.lightbox__nav { position: absolute; top: 50%; translate: 0 -50%; width: 52px; height: 52px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); display: grid; place-items: center; }
.lightbox__nav:hover { background: var(--c-yellow); color: var(--c-ink); }
.lightbox__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }
.lightbox.is-video .lightbox__nav, .lightbox.is-video .lightbox__count, .lightbox.is-single .lightbox__nav { display: none; }
.lightbox__count { position: absolute; bottom: 20px; left: 50%; translate: -50% 0; font-weight: 700; font-size: .8rem; letter-spacing: .14em; opacity: .7; }
@media (max-width: 700px) { .lightbox { padding: 70px 12px; } .lightbox__nav { top: auto; bottom: 10px; translate: none; } }

/* ==========================================================================
   Home: section color morph
   ========================================================================== */
.bg-morph { position: fixed; inset: 0; z-index: -1; background: var(--c-bg); pointer-events: none; }
.home-sec { position: relative; }
.has-morph .home-sec { background-color: transparent !important; }
.home-sec .studio, .home-sec .universe, .home-sec .logos { background: transparent; }
.home-sec.is-dark { color: var(--c-bg); --c-muted: color-mix(in srgb, var(--c-bg) 72%, transparent); --c-line: color-mix(in srgb, var(--c-bg) 18%, transparent); }
.home-sec.is-dark .btn--dark { --b-bg: var(--c-bg); --b-fg: var(--c-ink); }
.home-sec.is-dark .btn--outline { --b-fg: var(--c-bg); --b-line: var(--c-bg); --b-hover: var(--c-bg); --b-hover-fg: var(--c-ink); }
.home-sec.is-dark .doodle { color: var(--c-bg); }
.home-sec.is-dark .label { color: var(--lc); }
.home-sec.is-dark .logos, .home-sec.is-dark .band { border-color: var(--c-bg); }
/* More breathing room so the color change happens in the empty space between sections */
.home-sec > .section, .home-sec > .studio, .home-sec > .universe, .home-sec > .cta { padding-block: clamp(110px, 11vw, 190px); }
@media (max-width: 760px) {
	.home-sec > .section, .home-sec > .studio, .home-sec > .universe, .home-sec > .cta { padding-block: 128px; }
	.home-sec > .bands { padding-block: 70px; }
}
.universe--noimg .universe__grid { grid-template-columns: minmax(0, 1fr); max-width: 760px; }


/* ---------- Animation initial states (only when GSAP runs) ---------- */
.fx [data-reveal], .fx [data-card-item], .fx [data-hero-fade] { opacity: 0; }
.fx [data-split] { visibility: hidden; }
.split-line-mask { padding-top: .28em; margin-top: -.28em; padding-bottom: .14em; margin-bottom: -.14em; }
.fx [data-clip]:not(.is-in) { clip-path: inset(100% 0 0 0); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	.has-grain::after { display: none; }
	.hl { background-size: 100% .26em !important; }
}