/* ==========================================================================
   CREATIVNA — front-end + editor styles
   Design tokens (color, type, spacing, motion) live in theme.json and are
   consumed here as CSS custom properties. This file only handles layout,
   composition and interaction — never redefines a color or font size as
   a raw value where a token already exists.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Base
   -------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	overflow-x: hidden;
}

img, svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	transition: color var(--wp--custom--motion--duration-fast, 180ms) var(--wp--custom--motion--ease-out, ease);
}

/* Visible, confident focus ring everywhere — never suppressed. */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--clay);
	outline-offset: 3px;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
	margin: -1px;
	padding: 0;
}

/* Shared eyebrow / label treatment used across sections. */
.section-heading__eyebrow {
	font-size: var(--wp--preset--font-size--meta);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--clay);
	font-weight: 600;
	margin-bottom: var(--wp--preset--spacing--3xs);
}

.wp-block-group.section-work,
.wp-block-group.section-process,
.wp-block-group.section-testimonials,
.wp-block-group.section-services,
.wp-block-group.section-recognition,
.wp-block-group.section-faq,
.wp-block-group.section-contact,
.wp-block-group.section-about-intro {
	padding-top: var(--wp--preset--spacing--l);
	padding-bottom: var(--wp--preset--spacing--l);
	border-top: var(--wp--custom--rule--hairline);
}

/* --------------------------------------------------------------------------
   1. Header & Navigation
   -------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--paper);
	padding-top: var(--wp--preset--spacing--2xs);
	padding-bottom: var(--wp--preset--spacing--2xs);
	border-bottom: var(--wp--custom--rule--hairline);
}

.site-header__inner {
	width: 100%;
	gap: var(--wp--preset--spacing--s);
}

.site-header__wordmark a {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.site-header__nav {
	flex-grow: 0;
}

.site-header__nav .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--s);
}

.site-header__nav a.wp-block-navigation-item__content {
	padding: 0.35em 0;
	position: relative;
	font-weight: 500;
}

.site-header__nav a.wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -2px;
	height: 1px;
	background: currentColor;
	transition: right var(--wp--custom--motion--duration-base, 400ms) var(--wp--custom--motion--ease-out, ease);
}

.site-header__nav a.wp-block-navigation-item__content:hover::after {
	right: 0;
}

.site-header__status {
	gap: var(--wp--preset--spacing--3xs);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--ink-60);
	white-space: nowrap;
}

.site-header__status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--sky);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--sky) 25%, transparent);
	flex: none;
}

@media (max-width: 780px) {
	.site-header__status {
		display: none;
	}
}

/* Bespoke mobile menu: full-bleed overlay in ink, huge stacked links. */
.site-header__nav .wp-block-navigation__responsive-container {
	background: var(--wp--preset--color--ink);
}

.site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--m);
}

.site-header__nav .wp-block-navigation__responsive-container-content {
	justify-content: center;
}

.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--xs);
	align-items: flex-start;
}

.site-header__nav .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content {
	font-size: clamp(2rem, 1.4rem + 5vw, 3.5rem);
	color: var(--wp--preset--color--paper);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.site-header__nav .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content::after {
	background: var(--wp--preset--color--clay);
}

.site-header__nav button.wp-block-navigation__responsive-container-open,
.site-header__nav button.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink);
}

.site-header__nav .wp-block-navigation__responsive-container.is-menu-open button.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--paper);
}

/* --------------------------------------------------------------------------
   2. Buttons & links
   -------------------------------------------------------------------------- */

.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink);
}

.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink);
}

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */

.hero {
	padding-top: clamp(3rem, 2rem + 5vw, 7rem);
	padding-bottom: var(--wp--preset--spacing--m);
	min-height: 82svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--s);
}

.hero__eyebrow {
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--ink-60);
	margin: 0 0 var(--wp--preset--spacing--xs);
}

.hero__headline {
	max-width: 20ch;
	margin: 0;
}

.hero__headline-accent {
	color: var(--wp--preset--color--clay);
}

.hero__footer {
	margin-top: var(--wp--preset--spacing--m);
	gap: var(--wp--preset--spacing--m);
	padding-top: var(--wp--preset--spacing--s);
	border-top: var(--wp--custom--rule--hairline);
}

.hero__note {
	max-width: 42ch;
	color: var(--wp--preset--color--ink-60);
	margin: 0;
}

.hero-ticker {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	overflow: hidden;
	white-space: nowrap;
	padding: var(--wp--preset--spacing--2xs) 0;
}

.hero-ticker__track {
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0;
	padding-left: 100%;
	animation: creativna-marquee 28s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
	.hero-ticker__track {
		animation: none;
		padding-left: 0;
	}
}

/* --------------------------------------------------------------------------
   4. Selected Work / Work Archive grid
   -------------------------------------------------------------------------- */

.section-heading {
	margin-bottom: var(--wp--preset--spacing--s);
	gap: var(--wp--preset--spacing--s);
}

.section-heading__link a {
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--ink-12);
}

.section-heading__link a:hover {
	border-color: currentColor;
}

.work-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--wp--preset--spacing--m) var(--wp--preset--spacing--s);
	list-style: none;
	margin: 0;
	padding: 0;
}

.work-grid .wp-block-post-template > li {
	grid-column: span 12;
	list-style: none;
}

/* A 3-item rhythm (full / half / half) that repeats cleanly however many
   projects are added — full width, two side by side, full width, … */
@media (min-width: 900px) {
	.work-grid .wp-block-post-template > li:nth-child(3n+2),
	.work-grid .wp-block-post-template > li:nth-child(3n+3) {
		grid-column: span 6;
	}
}

.work-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.work-card__image {
	overflow: hidden;
	margin-bottom: var(--wp--preset--spacing--3xs);
	background: var(--wp--preset--color--ink-12);
	flex: 1;
}

.work-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--motion--duration-slow, 700ms) var(--wp--custom--motion--ease-out, ease);
}

.work-card:hover .work-card__image img {
	transform: scale(1.035);
}

.work-card__meta {
	align-items: baseline;
	gap: var(--wp--preset--spacing--2xs);
}

.work-card__meta h2, .work-card__meta h3 {
	margin: 0;
}

.work-card__meta a {
	text-decoration: none;
}

.work-card__category {
	font-size: var(--wp--preset--font-size--meta);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--ink-60);
	white-space: nowrap;
}

.work-card__category a {
	color: inherit;
	text-decoration: none;
}

.work-grid.wp-block-query {
	position: relative;
}

.work-cursor {
	position: absolute;
	top: 0;
	left: 0;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--wp--preset--font-size--meta);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	pointer-events: none;
	opacity: 0;
	margin: -42px 0 0 -42px;
	transition: opacity var(--wp--custom--motion--duration-fast, 180ms) var(--wp--custom--motion--ease-out, ease),
		scale var(--wp--custom--motion--duration-fast, 180ms) var(--wp--custom--motion--ease-out, ease);
	scale: 0.7;
	z-index: 5;
}

.work-grid.work-cursor-active .work-cursor {
	opacity: 1;
	scale: 1;
}

.archive-header {
	padding-top: var(--wp--preset--spacing--l);
	padding-bottom: var(--wp--preset--spacing--m);
}

.category-filter {
	margin-top: var(--wp--preset--spacing--s);
	gap: var(--wp--preset--spacing--s);
}

.category-filter a {
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	color: var(--wp--preset--color--ink-60);
}

.category-filter a:hover {
	color: var(--wp--preset--color--ink);
}

/* --------------------------------------------------------------------------
   5. Process
   -------------------------------------------------------------------------- */

.process-rail {
	gap: 0;
	border-top: var(--wp--custom--rule--hairline);
}

.process-step {
	flex: 1 1 240px;
	padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s) 0;
	border-right: var(--wp--custom--rule--hairline);
}

.process-step:last-child {
	border-right: none;
}

.process-step__number {
	font-size: var(--wp--preset--font-size--heading-s);
	font-weight: 700;
	margin: 0 0 var(--wp--preset--spacing--2xs);
	color: color-mix(in srgb, var(--wp--preset--color--ink) 22%, transparent);
}

@media (max-width: 780px) {
	.process-step {
		flex: 1 1 100%;
		border-right: none;
		border-bottom: var(--wp--custom--rule--hairline);
	}
	.process-step:last-child {
		border-bottom: none;
	}
}

/* --------------------------------------------------------------------------
   6. Testimonials
   -------------------------------------------------------------------------- */

.testimonial-rail.wp-block-query {
	display: flex;
	gap: var(--wp--preset--spacing--s);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: var(--wp--preset--spacing--2xs);
	margin: 0;
	list-style: none;
	scrollbar-width: thin;
}

.testimonial-rail .wp-block-post-template {
	display: flex;
	gap: var(--wp--preset--spacing--s);
	list-style: none;
	margin: 0;
	padding: 0;
}

.testimonial-card {
	scroll-snap-align: start;
	flex: 0 0 min(420px, 85vw);
	background: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--s);
	justify-content: space-between;
	gap: var(--wp--preset--spacing--m);
	min-height: 260px;
}

.testimonial-card__quote {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.35;
}

.testimonial-card__quote p::before {
	content: "“";
	color: var(--wp--preset--color--clay);
}

.testimonial-card__quote p::after {
	content: "”";
	color: var(--wp--preset--color--clay);
}

.testimonial-card__author {
	gap: 0.2em;
}

.testimonial-card__role {
	color: var(--wp--preset--color--ink-60);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   7. Services accordion
   -------------------------------------------------------------------------- */

.services-list {
	counter-reset: services;
	border-top: var(--wp--custom--rule--hairline);
}

.service-row {
	counter-increment: services;
	border-bottom: var(--wp--custom--rule--hairline);
}

.service-row__summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--s);
	padding: var(--wp--preset--spacing--xs) 0;
}

.service-row__summary::-webkit-details-marker {
	display: none;
}

.service-row__summary::before {
	content: counter(services, decimal-leading-zero);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--ink-60);
	margin-right: var(--wp--preset--spacing--s);
}

.service-row__name {
	font-size: var(--wp--preset--font-size--heading-s);
	font-weight: 600;
	margin-right: auto;
}

.service-row__figures {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--s);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-60);
	white-space: nowrap;
}

.service-row__investment {
	color: var(--wp--preset--color--clay);
	font-weight: 600;
}

.service-row__icon {
	width: 12px;
	height: 12px;
	position: relative;
	flex: none;
}

.service-row__icon::before,
.service-row__icon::after {
	content: "";
	position: absolute;
	background: currentColor;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.service-row__icon::before {
	width: 12px;
	height: 1px;
}

.service-row__icon::after {
	width: 1px;
	height: 12px;
	transition: transform var(--wp--custom--motion--duration-fast, 180ms) var(--wp--custom--motion--ease-out, ease);
}

.service-row[open] .service-row__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

.service-row__body {
	padding-bottom: var(--wp--preset--spacing--s);
	max-width: 60ch;
}

.service-row__excerpt {
	color: var(--wp--preset--color--ink-60);
}

.service-row__deliverables ul {
	margin: 0;
	padding-left: 1.2em;
}

.addons {
	margin-top: var(--wp--preset--spacing--m);
	gap: var(--wp--preset--spacing--xs);
	align-items: baseline;
}

.addons__list {
	color: var(--wp--preset--color--ink-60);
}

/* --------------------------------------------------------------------------
   8. Recognition / Trusted By logo strips
   -------------------------------------------------------------------------- */

.logo-strip.wp-block-query {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--m);
	margin: var(--wp--preset--spacing--xs) 0 0;
	padding: 0;
	list-style: none;
}

.logo-strip .wp-block-post-template {
	display: contents;
}

.logo-card {
	display: inline-flex;
	align-items: center;
	opacity: 0.72;
	transition: opacity var(--wp--custom--motion--duration-fast, 180ms) var(--wp--custom--motion--ease-out, ease);
}

.logo-card:hover {
	opacity: 1;
}

.logo-card__image {
	max-height: 32px;
	width: auto;
	filter: grayscale(1) contrast(1.1);
}

.logo-card--text .logo-card__wordmark {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.section-recognition__publications {
	margin-top: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--ink-60);
}

/* --------------------------------------------------------------------------
   9. About
   -------------------------------------------------------------------------- */

.about-intro__statement {
	max-width: 26ch;
	margin: 0 0 var(--wp--preset--spacing--s);
}

.about-intro__row {
	gap: var(--wp--preset--spacing--m);
	align-items: flex-start;
}

.about-intro__row > .wp-block-paragraph {
	max-width: 48ch;
	color: var(--wp--preset--color--ink-60);
}

/* --------------------------------------------------------------------------
   10. FAQ (core/details)
   -------------------------------------------------------------------------- */

.section-faq .wp-block-details {
	border-top: var(--wp--custom--rule--hairline);
	border-bottom: none !important;
	padding: var(--wp--preset--spacing--s) 0 !important;
}

.section-faq .wp-block-details:last-of-type {
	border-bottom: var(--wp--custom--rule--hairline) !important;
}

.section-faq .wp-block-details summary {
	cursor: pointer;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--s);
	list-style: none;
}

.section-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.section-faq .wp-block-details summary::after {
	content: "+";
	font-weight: 400;
	font-size: 1.5em;
	color: var(--wp--preset--color--clay);
	flex: none;
}

.section-faq .wp-block-details[open] summary::after {
	content: "–";
}

.section-faq .wp-block-details p {
	max-width: 62ch;
	margin-top: var(--wp--preset--spacing--2xs);
	color: var(--wp--preset--color--ink-60);
}

/* --------------------------------------------------------------------------
   11. Contact
   -------------------------------------------------------------------------- */

.contact-intro {
	gap: var(--wp--preset--spacing--m);
	align-items: flex-end;
	margin-bottom: var(--wp--preset--spacing--s);
}

.contact-intro__headline {
	max-width: 16ch;
	margin: 0;
}

.contact-intro__details {
	gap: 0.35em;
}

.contact-intro__copy {
	max-width: 52ch;
	color: var(--wp--preset--color--ink-60);
	margin-bottom: var(--wp--preset--spacing--m);
}

.creativna-contact-form-wrap {
	max-width: 760px;
}

.creativna-contact-form__status {
	margin-bottom: var(--wp--preset--spacing--s);
	padding: var(--wp--preset--spacing--2xs) var(--wp--preset--spacing--xs);
}

.creativna-contact-form__success {
	color: var(--wp--preset--color--clay-deep);
	background: color-mix(in srgb, var(--wp--preset--color--sky) 18%, transparent);
	padding: 0.75em 1em;
}

.creativna-contact-form__error {
	color: #fff;
	background: var(--wp--preset--color--clay-deep);
	padding: 0.75em 1em;
}

.creativna-contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.creativna-contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--s);
}

.creativna-contact-form__field {
	margin-bottom: var(--wp--preset--spacing--s);
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.creativna-contact-form__field--full {
	grid-column: 1 / -1;
}

.creativna-contact-form label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.creativna-contact-form input,
.creativna-contact-form select,
.creativna-contact-form textarea {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	padding: 0.85em 1em;
	border: 1px solid var(--wp--preset--color--ink-12);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	width: 100%;
}

.creativna-contact-form input:focus,
.creativna-contact-form select:focus,
.creativna-contact-form textarea:focus {
	border-color: var(--wp--preset--color--clay);
}

.creativna-contact-form__submit button {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border: none;
	padding: 1em 2.5em;
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
}

.creativna-contact-form__submit button:hover {
	background: var(--wp--preset--color--clay);
}

.creativna-contact-form__submit button:disabled {
	opacity: 0.6;
	cursor: progress;
}

@media (max-width: 640px) {
	.creativna-contact-form__row {
		grid-template-columns: 1fr;
	}
	.contact-intro {
		align-items: flex-start;
	}
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.site-footer {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding-top: var(--wp--preset--spacing--l);
	padding-bottom: var(--wp--preset--spacing--s);
}

.site-footer a {
	color: inherit;
}

.site-footer a:hover {
	color: var(--wp--preset--color--sky);
}

.site-footer__top {
	gap: var(--wp--preset--spacing--m);
	margin-bottom: var(--wp--preset--spacing--m);
}

.site-footer__cta {
	max-width: 30ch;
}

.site-footer__cta h2 {
	color: var(--wp--preset--color--paper);
	margin-bottom: var(--wp--preset--spacing--xs);
}

.site-footer .wp-block-button__link {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

.site-footer .wp-block-button__link:hover {
	background: var(--wp--preset--color--clay);
	color: var(--wp--preset--color--paper);
}

.site-footer__label {
	font-size: var(--wp--preset--font-size--meta);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: color-mix(in srgb, var(--wp--preset--color--paper) 55%, transparent);
	margin: 0.6em 0 0.1em;
}

.site-footer__contact-details :first-child .site-footer__label {
	margin-top: 0;
}

.site-footer__rule {
	opacity: 0.15;
}

.site-footer__bottom {
	gap: var(--wp--preset--spacing--2xs);
	color: color-mix(in srgb, var(--wp--preset--color--paper) 60%, transparent);
}

/* --------------------------------------------------------------------------
   13. Case study
   -------------------------------------------------------------------------- */

.case-study-header {
	padding-top: var(--wp--preset--spacing--l);
	padding-bottom: var(--wp--preset--spacing--s);
	border-top: none;
}

.case-study-header__title {
	margin: 0.2em 0 0.4em;
	max-width: 18ch;
}

.case-study-header__intro {
	max-width: 60ch;
	color: var(--wp--preset--color--ink-60);
	margin-bottom: var(--wp--preset--spacing--s);
}

.creativna-project-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--m);
	padding-top: var(--wp--preset--spacing--s);
	border-top: var(--wp--custom--rule--hairline);
}

.creativna-project-meta__group {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}

.creativna-project-meta__label {
	font-size: var(--wp--preset--font-size--meta);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--ink-60);
}

.case-study-hero {
	margin-bottom: var(--wp--preset--spacing--l);
}

.case-study-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.case-study-body {
	padding-bottom: var(--wp--preset--spacing--l);
}

.case-study-section {
	margin-bottom: var(--wp--preset--spacing--l);
}

.case-study-section--split {
	gap: var(--wp--preset--spacing--m);
}

.case-study-section--split > .wp-block-group {
	flex: 1 1 320px;
}

.case-study-gallery {
	margin-bottom: var(--wp--preset--spacing--l);
}

.case-study-credits {
	padding: var(--wp--preset--spacing--s) 0;
	border-top: var(--wp--custom--rule--hairline);
	gap: var(--wp--preset--spacing--m);
}

/* --------------------------------------------------------------------------
   14. Next Project block
   -------------------------------------------------------------------------- */

.creativna-next-project {
	border-top: 1px solid rgba(255,255,255,0.15);
}

.creativna-next-project__link {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	text-decoration: none;
	color: var(--wp--preset--color--paper);
	background: var(--wp--preset--color--ink);
}

.creativna-next-project__figure {
	overflow: hidden;
}

.creativna-next-project__image {
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	transition: transform var(--wp--custom--motion--duration-slow, 700ms) var(--wp--custom--motion--ease-out, ease);
}

.creativna-next-project__link:hover .creativna-next-project__image {
	transform: scale(1.04);
}

.creativna-next-project__meta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--wp--preset--spacing--m);
	gap: 0.4em;
}

.creativna-next-project__label {
	font-size: var(--wp--preset--font-size--meta);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: color-mix(in srgb, var(--wp--preset--color--paper) 55%, transparent);
}

.creativna-next-project__title {
	font-size: var(--wp--preset--font-size--heading-l);
	font-weight: 600;
	line-height: 1.05;
}

.creativna-next-project__client {
	color: color-mix(in srgb, var(--wp--preset--color--paper) 65%, transparent);
}

@media (max-width: 780px) {
	.creativna-next-project__link {
		grid-template-columns: 1fr;
	}
	.creativna-next-project__image {
		min-height: 260px;
	}
}

/* --------------------------------------------------------------------------
   15. 404
   -------------------------------------------------------------------------- */

.error-404 {
	padding-top: var(--wp--preset--spacing--xl);
	padding-bottom: var(--wp--preset--spacing--xl);
	min-height: 60vh;
}

.error-404 h1 {
	max-width: 16ch;
}

/* --------------------------------------------------------------------------
   16. Scroll reveal (progressive enhancement only — content is visible by
   default; JS adds the "is-revealing" class then removes it once shown)
   -------------------------------------------------------------------------- */

.creativna-reveal {
	opacity: 0;
	transform: translateY(24px);
}

.creativna-reveal.is-visible {
	opacity: 1;
	transform: none;
	transition: opacity var(--wp--custom--motion--duration-slow, 700ms) var(--wp--custom--motion--ease-out, ease),
		transform var(--wp--custom--motion--duration-slow, 700ms) var(--wp--custom--motion--ease-out, ease);
}

@media (prefers-reduced-motion: reduce) {
	.creativna-reveal {
		opacity: 1;
		transform: none;
	}
}