/*
Theme Name: Lauranium
Description: A custom block theme scaffolded by Studio Code.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lauranium
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

:root {
	--site-bg: var(--wp--preset--color--background);
	--site-text: var(--wp--preset--color--text);
	--site-lime: var(--wp--preset--color--accent);
	--site-surface: var(--wp--preset--color--surface);
	--site-muted: var(--wp--preset--color--muted);
	--site-turquoise: var(--wp--preset--color--turquoise);
}

/* === reset === */
body {
	background-color: var(--site-bg);
	color: var(--site-text);
}

/* Screen-reader-only helper for the single visually-hidden h1 */
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Lime accent word inside a headline (editable span) */
.accent-word {
	color: var(--site-lime);
}

/* === header === */
.site-header {
	background-color: var(--site-bg);
	border-bottom: 1px solid var(--site-surface);
}
.header-inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left);
	padding-block: 1.15rem;
}
.site-brand {
	gap: 0;
}
.site-brand p {
	margin: 0;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 500;
	font-size: 1.15rem;
	line-height: 1;
	letter-spacing: -0.01em;
}
.brand-a {
	color: var(--site-text);
}
.brand-b {
	color: var(--site-lime);
}
.site-brand a {
	color: inherit;
	text-decoration: none;
}
.main-nav .wp-block-navigation-item > a.wp-block-navigation-item__content {
	color: var(--site-muted);
	transition: color 200ms ease;
}
/* Hover/focus coral — desktop only. Scoping to min-width: 782px (the mobile
   hamburger width) and to hover-capable pointers means the mobile menu can
   NEVER colour a link from hover/focus. After a tap the browser keeps a
   sticky :hover/:focus on the last item; without this scope it would leave
   that item coral even when it is not the current page. The desktop bar
   (>=782px, fine pointer) keeps its hover effect untouched. */
@media (hover: hover) and (pointer: fine) and (min-width: 782px) {
	.main-nav .wp-block-navigation-item > a.wp-block-navigation-item__content:hover,
	.main-nav .wp-block-navigation-item > a.wp-block-navigation-item__content:focus {
		color: var(--site-lime);
	}
}
/* Active page indicator — exactly one item, resolved from the current URL by
   the theme script (.is-current), stays dusty coral; every other item stays
   muted cream. Only these selectors may ever set the coral active colour. */
.main-nav .wp-block-navigation-item > a.wp-block-navigation-item__content.is-current,
.main-nav .wp-block-navigation-item.is-current > a.wp-block-navigation-item__content {
	color: var(--site-lime);
}
/* Mobile menu overlay — semi-transparent petrol background with a soft blur.
   The block paints the full colour on this container when it opens; we
   override just that element's background (never the container's opacity,
   which would fade the links and close icon). ! important beats the block's
   opaque primary utility so it cannot stay solid. */
@media (max-width: 781px) {
	.main-nav .wp-block-navigation__responsive-container.is-menu-open {
		background-color: rgba(23, 37, 36, 0.95) !important;
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}
}
.main-nav .wp-block-navigation-item > a {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding-inline: 0;
}
.main-nav .wp-block-navigation__container {
	gap: clamp(1rem, 3vw, 2.2rem);
}

/* === hero === */
.hero {
	min-height: 78vh;
}
.commissions {
	min-height: 40vh;
}
.hero,
.commissions {
	padding-inline: var(--wp--style--root--padding-left);
}
.hero .wp-block-cover__inner-container,
.commissions .wp-block-cover__inner-container {
	max-width: var(--wp--style--global--wide-size);
}
.hero .wp-block-cover__inner-container > *,
.commissions .wp-block-cover__inner-container > * {
	margin-left: 0 !important;
	margin-right: auto !important;
}
.hero-eyebrow {
	color: var(--site-muted);
	margin: 0 0 1.6rem;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.hero-title .hero-line {
	margin: 0;
	line-height: 0.95;
	letter-spacing: -0.03em;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 300;
}
.comm-title {
	font-size: var(--wp--preset--font-size--display);
}
.about-title,
.clients-title {
	font-size: var(--wp--preset--font-size--headline);
}

/* === mural-commissions page === */
.section-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--headline);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

/* The process — single-column numbered editorial rows */
.process-list {
	margin-top: 1.25rem;
}
.process-step {
	display: flex;
	align-items: flex-start;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	padding-block: clamp(1.25rem, 2vw, 1.75rem);
	border-top: 1px solid var(--site-surface);
}
.process-step:last-child {
	border-bottom: 1px solid var(--site-surface);
}
/* Keep rows tight — zero the flow block-gap margin between steps. */
.process-list > .process-step {
	margin-block-start: 0 !important;
}
.process-num {
	margin: 0;
	flex: 0 0 auto;
	min-width: 3rem;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--site-lime);
}
.process-body {
	max-width: 34rem;
}
.process-title {
	margin: 0 0 0.45rem;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--site-text);
}
.process-text {
	margin: 0;
	color: var(--site-muted);
	font-size: clamp(0.98rem, 1.3vw, 1.05rem);
	line-height: 1.7;
}


/* Pricing */
.pricing-text {
	max-width: 36rem;
	color: var(--site-text);
	margin: 1.4rem 0 0;
	font-size: clamp(0.98rem, 1.3vw, 1.1rem);
	line-height: 1.7;
}
.pricing .cat-link {
	margin-top: 1.6rem;
}

/* FAQ accordion */
.faq-list {
	margin-top: 1.75rem;
}
.faq-item {
	border-top: 1px solid var(--site-surface);
}
.faq-list .faq-item:last-child {
	border-bottom: 1px solid var(--site-surface);
}
.faq-item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.05rem 0;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: clamp(1.02rem, 1.6vw, 1.2rem);
	font-weight: 400;
	letter-spacing: 0.01em;
	color: var(--site-text);
}
.faq-item summary::-webkit-details-marker {
	display: none;
}
.faq-item summary::after {
	content: '+';
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: 1.3rem;
	font-weight: 300;
	line-height: 1;
	color: var(--site-lime);
	transition: color 0.2s ease, transform 0.25s ease;
}
.faq-item[open] summary::after {
	content: '−';
	transform: rotate(0);
}
.faq-item .wp-block-paragraph {
	max-width: 42rem;
	margin: 0;
	padding: 0 0.4rem 1rem 0;
	color: var(--site-muted);
	font-size: clamp(0.98rem, 1.3vw, 1.05rem);
	line-height: 1.7;
}
.faq-item[open] .wp-block-paragraph {
	animation: faq-in 0.3s ease;
}
@keyframes faq-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}
.hero-support {
	max-width: 34rem;
	color: var(--site-text);
	margin: 1.8rem 0 0;
	font-size: clamp(0.95rem, 1.2vw, 1.05rem);
	line-height: 1.7;
	opacity: 0.92;
}
.hero-cta {
	margin-top: 2.4rem;
}

/* === mural-commissions page: compact vertical rhythm === */
/* Scoped to this page so other pages keep their spacing. */
.page-id-224 .section {
	padding-block: clamp(1.25rem, 2.4vw, 2.75rem);
}
.page-id-224 .section.page-hero {
	padding-top: clamp(1.75rem, 3vw, 2.5rem);
	padding-bottom: 0;
}
.page-id-224 .section.page-hero + .section {
	padding-top: clamp(1rem, 1.8vw, 1.5rem);
}

/* === section shell === */
.section {
	padding-block: clamp(2.25rem, 4.5vw, 5rem);
}
/* Email note inside the connect CTA — aligned to the button's left edge,
   sitting ~32px directly underneath it. */
.commissions .contact-email {
	margin-top: 2rem;
}
/* Less space between the MURALS hero text and the gallery below it. */
.page-id-74 .section.page-hero {
	padding-bottom: clamp(0.5rem, 1.25vw, 1.5rem);
}
/* Less space between the STUDIO hero and the Paintings section below it. */
.page-id-76 .section.page-hero {
	padding-bottom: clamp(0.5rem, 1.25vw, 1.5rem);
}
/* Tighten the gap between each subpage hero/intro and its first content
   section on ALL subpages (About, Murals, Studio, 3D, Contact). */
.section.page-hero {
	padding-bottom: clamp(0.5rem, 1vw, 1.25rem);
}
.section.page-hero + .section {
	padding-top: clamp(1.25rem, 2.5vw, 2rem);
}
.section-inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left);
}
.eyebrow {
	color: var(--site-muted);
	margin: 0 0 1.2rem;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* === categories === */
.categories {
	gap: 0;
}
.categories .category-column {
	border-left: 1px solid var(--site-surface);
}
.categories .category-column:last-child {
	border-right: 1px solid var(--site-surface);
}

/* Two-column artwork categories — full-bleed images, clear gap. */
.categories {
	gap: clamp(1.5rem, 3.2vw, 2rem);
}
.categories .category-column {
	border: 0;
}
.categories .cat-image {
	padding: 0;
}
.categories .cat-placeholder {
	margin: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 1.5rem;
	letter-spacing: 0.2em;
}
.categories .cat-mural .cat-img {
	margin: 0;
	line-height: 0;
	height: 100%;
}
.categories .cat-mural .cat-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* === image carousels (category cards) === */
.categories .cat-image.cat-carousel {
	height: clamp(15rem, 32vw, 24rem);
	padding: 0;
	overflow: hidden;
}
.categories .cat-carousel .carousel {
	position: relative;
	height: 100%;
	width: 100%;
}
.categories .cat-carousel .carousel-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	height: 100%;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}
.categories .cat-carousel .carousel-slide {
	flex: 0 0 100%;
	height: 100%;
	width: 100%;
	margin: 0;
	line-height: 0;
	overflow: hidden;
	background-color: var(--site-surface);
}
.categories .cat-carousel .carousel-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: none !important;
	transition: none !important;
}
.categories .cat-carousel .carousel-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 1.5rem;
	line-height: 1.6;
	color: var(--site-muted);
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
/* arrows */
.categories .cat-carousel .carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	margin: 0;
}
.categories .cat-carousel .carousel-arrow .wp-block-button__link {
	padding: 0.6rem 0.85rem;
	background: rgba(23, 37, 36, 0.7);
	color: var(--site-text);
	font-size: 1.05rem;
	line-height: 1;
	border: 1px solid rgba(242, 233, 216, 0.35);
	border-radius: 0;
}
.categories .cat-carousel .carousel-arrow .wp-block-button__link:hover {
	background: var(--site-turquoise);
	color: var(--site-bg);
	border-color: var(--site-turquoise);
}
.categories .cat-carousel .carousel-prev {
	left: 0.75rem;
}
.categories .cat-carousel .carousel-next {
	right: 0.75rem;
}
/* indicator */
.categories .cat-carousel .carousel-indicator {
	position: absolute;
	left: 0.9rem;
	bottom: 0.8rem;
	z-index: 3;
	margin: 0;
	color: var(--site-text);
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.18em;
	background: rgba(23, 37, 36, 0.7);
	padding: 0.3rem 0.6rem;
}
/* hide arrows on touch devices (swipe instead) */
@media ( pointer: coarse ) {
	.categories .cat-carousel .carousel-arrow {
		display: none;
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.categories .cat-carousel .carousel-track {
		transition: none;
	}
}

/* === mural gallery (true masonry via CSS columns) === */
/* Independent column stacking: each image sits directly below the one
   above it in its column, so there are no shared row heights and no
   empty spaces beneath shorter images. */
.mural-gallery {
	columns: 3;
	column-gap: 1.25rem;
}
.mural-gallery .gallery-item {
	margin: 0 0 1.25rem 0;
	break-inside: avoid;
	line-height: 0;
	overflow: hidden;
	background-color: var(--site-surface);
}
.mural-gallery .gallery-item a {
	display: block;
	line-height: 0;
}
.mural-gallery .gallery-item img {
	width: 100%;
	height: auto;
	display: block;
	cursor: zoom-in;
	transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.mural-gallery .gallery-item:hover img {
	opacity: 0.82;
	transform: scale(1.03);
}
/* The first (wide) mural spans the full gallery width across all columns,
   with the remaining images flowing into the masonry columns below it. */
.mural-gallery .gallery-item--wide {
	column-span: all;
}

/* Mural gallery lightbox */
.mural-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(23, 37, 36, 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}
.mural-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}
.mural-lightbox img {
	max-width: 94vw;
	max-height: 88vh;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}
.mural-lightbox .mural-lightbox-close {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	z-index: 2;
	background: none;
	border: 1px solid rgba(242, 233, 216, 0.4);
	color: var(--site-text);
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	padding: 0.5rem 0.85rem;
	cursor: pointer;
}
.mural-lightbox .mural-lightbox-close:hover {
	background: var(--site-turquoise);
	color: var(--site-bg);
	border-color: var(--site-turquoise);
}
@media ( prefers-reduced-motion: reduce ) {
	.mural-lightbox {
		transition: none;
	}
}
@media ( max-width: 900px ) {
	.mural-gallery {
		columns: 2;
		column-gap: 1rem;
	}
	.mural-gallery .gallery-item {
		margin-bottom: 1rem;
	}
}
@media ( max-width: 600px ) {
	.mural-gallery {
		columns: 2;
		column-gap: clamp(0.5rem, 2.5vw, 0.75rem);
	}
	.mural-gallery .gallery-item {
		margin-bottom: clamp(0.5rem, 2.5vw, 0.75rem);
	}
}
.cat-image {
	position: relative;
	height: clamp(15rem, 32vw, 24rem);
	background-color: var(--site-surface);
	border-bottom: 1px solid var(--site-surface);
	padding: 1.2rem 0 0 1.4rem;
}
.cat-placeholder {
	margin: 0;
	color: var(--site-muted);
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.cat-num {
	color: var(--site-lime);
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.16em;
	margin: 0 0 1.1rem;
}
.cat-title {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 300;
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	line-height: 1;
	letter-spacing: -0.01em;
	margin: 1.25rem 0 1rem;
}
.cat-desc {
	color: var(--site-muted);
	font-size: 0.92rem;
	line-height: 1.6;
	margin: 0 0 1.4rem;
}
.cat-link,
.cat-link a {
	color: var(--site-lime);
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
}
.cat-link a:hover {
	color: var(--site-turquoise);
	border-bottom-color: var(--site-turquoise);
}
.hero-link {
	margin-top: 1.8rem;
}

/* === about === */
/* Display the artist portrait at its original aspect ratio on mobile — no cropping. */
.about-portrait {
	position: relative;
	background-color: var(--site-surface);
}
.about-portrait .about-portrait-img {
	margin: 0;
	line-height: 0;
}
.about-portrait .about-portrait-img img {
	display: block;
	width: 100%;
	height: auto;
}
/* On desktop, stretch the portrait to fill the biography column so its bottom
   edge aligns with the end of the text. object-fit cover keeps the face intact
   (the crop falls on the sides, not the head). */
@media (min-width: 782px) {
	.about-portrait,
	.about-portrait .about-portrait-img {
		height: 100%;
	}
	.about-portrait .about-portrait-img img {
		height: 100%;
	object-fit: cover;
	object-position: center;
	}
}
.about-note {
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
	margin: 0;
	display: block;
	color: var(--site-lime);
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: 2.1rem;
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.01em;
	font-style: italic;
	transform: rotate(-6deg);
}
.about-text {
	padding-inline: 0;
}
.about-body {
	color: var(--site-muted);
	max-width: 34rem;
}
.about-body p {
	margin: 0 0 1.1rem;
	color: var(--site-muted);
}
.about-cta {
	margin-top: 1.8rem;
}

/* === clients === */
.clients-title {
	max-width: 34rem;
}
/* Fixed 2-column x 3-row grid on every screen size. */
.clients-row {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.25rem, 2vw, 2rem);
}
.clients-row .client {
	width: auto;
	max-width: none;
	flex: none;
	border: 0;
	padding: 0;
}
.client p {
	margin: 0;
	color: var(--site-muted);
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: clamp(1rem, 1.4vw, 1.25rem);
	font-weight: 400;
	letter-spacing: 0.02em;
	text-align: center;
	opacity: 0.92;
}

/* === commissions === */
.commissions {
	position: relative;
}
.commissions .wp-block-cover__inner-container {
	max-width: var(--wp--style--global--wide-size);
}
.comm-title {
	margin: 1.6rem 0 0;
}
.comm-support {
	max-width: 30rem;
	color: var(--site-text);
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	margin: 1.4rem 0 0;
	opacity: 0.92;
}
.comm-cta {
	margin-top: 2.2rem;
}

/* === footer === */
.site-footer {
	background-color: var(--site-bg);
	border-top: 1px solid var(--site-surface);
}
.footer-inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left);
	padding-block: 2.4rem;
	/* Three-column row: brand | Instagram icon | copyright, all vertically
	   centred, with the icon at the exact horizontal centre of the footer. */
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: 1rem;
}
.footer-inner .site-brand {
	justify-self: start;
}
.footer-inner .site-brand p {
	font-size: 1rem;
}
.footer-instagram-line {
	margin: 0;
	line-height: 0;
	justify-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.footer-note {
	color: var(--site-muted);
	font-size: 0.9rem;
	margin: 0;
	text-align: right;
	justify-self: end;
}
/* Footer Instagram icon — solid filled, muted cream (same as copyright),
   coral on hover. */
.footer-instagram-line .instagram-icon {
	color: var(--site-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0;
	line-height: 0;
	text-decoration: none;
	transition: color 0.2s ease;
}
.footer-instagram-line .instagram-icon svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}
.footer-instagram-line .instagram-icon:hover {
	color: var(--site-lime);
}

/* === buttons === */
.wp-element-button {
	transition: background-color 0.2s ease;
}
.wp-element-button:hover {
	background-color: var(--site-turquoise);
}

/* === motion === */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
	/* Even if the script added its hidden states, motion-sensitive users must
	   always get the finished layout — no fade-ups, no parallax offsets. */
	.js-hero .hero-title .hero-line,
	.js-reveal,
	.js-reveal.is-inview {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* === responsive === */
@media (max-width: 781px) {
	.hero .wp-block-cover__inner-container {
		padding-block: 2.5rem;
	}
	.hero .wp-block-cover__image-background {
		object-position: 30% 50%;
	}
	.categories .category-column {
		border-left: 0;
		border-top: 1px solid var(--site-surface);
		padding-block: 1.5rem;
	}
	.categories .category-column:last-child {
		border-right: 0;
		border-bottom: 1px solid var(--site-surface);
	}
	.categories .category-column:nth-of-type(4) {
		display: none;
	}
	.clients-row {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 1.1rem 1.25rem;
	}
	.clients-row .client {
		width: auto;
		max-width: none;
		flex: none;
		padding: 0;
		border: 0;
	}
	.clients-row .client p {
		font-size: 0.9rem;
	}
	.commissions .wp-block-cover__inner-container {
		padding-block: 3rem;
	}
}

/* WordPress inserts a margin-block-start equal to the block gap (24px unless
   theme.json sets styles.spacing.blockGap) between the template's top-level
   sections (header part, main, footer part) — a gap that exists even when no
   markup asks for it. Zero it so sections butt edge-to-edge and own their
   vertical rhythm via padding; this does not affect block gaps inside nested
   layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* With that gap gone, main carries its own vertical padding so templates this
   theme does not author (WooCommerce shop, product, cart…) still clear the
   header and footer. A descendant selector, not a child one: WooCommerce wraps
   the single-product main in an extra group. Templates built from full-bleed
   sections opt out with is-flush and let the sections own the rhythm. */
.wp-site-blocks main {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}
.wp-site-blocks main.is-flush {
	padding-block: 0;
}

/* === subpages === */
.page-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 300;
	line-height: 0.95;
	letter-spacing: -0.03em;
}
.page-intro {
	max-width: 36rem;
	color: var(--site-muted);
	font-size: clamp(0.98rem, 1.3vw, 1.1rem);
	line-height: 1.7;
	margin: 1.8rem 0 0;
}

/* project grid (query loop) */
.project-grid .wp-block-post-template {
	gap: clamp(1.5rem, 3vw, 2.6rem) clamp(1rem, 2vw, 1.6rem);
}
.project-grid .wp-block-post {
	margin: 0;
}
.card-media {
	height: clamp(12rem, 22vw, 19rem);
	background-color: var(--site-surface);
	border-bottom: 1px solid var(--site-surface);
	padding: 1.2rem 0 0 1.4rem;
}
.project-card .card-title {
	margin: 1.1rem 0 0.35rem;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 300;
	font-size: clamp(1.3rem, 1.7vw, 1.6rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
}
.project-card .card-title a {
	color: var(--site-text);
	text-decoration: none;
}
.project-card .card-title a:hover {
	color: var(--site-turquoise);
}
.project-card .card-excerpt {
	color: var(--site-muted);
	font-size: 0.92rem;
	line-height: 1.6;
	margin: 0;
}

/* studio category headings */
.studio-cat {
	margin: 0 0 clamp(1.5rem, 3vw, 2.2rem);
	font-size: var(--wp--preset--font-size--headline);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.02em;
}
.section > .section-inner .project-grid + .project-grid,
.section > .section-inner .studio-cat {
	margin-top: clamp(1.2rem, 2.5vw, 2rem);
}

/* about practice + behind-the-scenes */
.practice-cols {
	gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem);
}
.practice-cols .wp-block-column p {
	color: var(--site-muted);
	font-size: 0.95rem;
	line-height: 1.7;
}
.bts-cols {
	gap: clamp(1rem, 2vw, 1.5rem);
}
.bts-media {
	height: clamp(15rem, 30vw, 24rem);
	background-color: var(--site-surface);
	border-bottom: 1px solid var(--site-surface);
	padding: 1.2rem 0 0 1.4rem;
}

/* 3d cinematic band */
.band-media {
	min-height: clamp(18rem, 55vh, 40rem);
	background-color: var(--site-surface);
	padding: 1.4rem 0 0 var(--wp--style--root--padding-left);
}

/* project detail */
.project-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 300;
	line-height: 0.95;
	letter-spacing: -0.03em;
}
.back-link a {
	color: var(--site-muted);
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
}
.back-link a:hover {
	color: var(--site-turquoise);
}
.meta-line {
	color: var(--site-muted);
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border-top: 1px solid var(--site-surface);
	padding-top: 1.1rem;
	margin: 0 0 1.6rem;
}
.section-inner > .project-title {
	margin-bottom: 0.5rem;
}
.proj-media {
	min-height: clamp(18rem, 40vw, 32rem);
	background-color: var(--site-surface);
	padding: 1.2rem 0 0 1.4rem;
	margin-top: 2rem;
}

/* === contact form === */
.wp-block-jetpack-contact-form {
	max-width: 40rem;
}
.wp-block-jetpack-contact-form .jetpack-field {
	margin: 0 0 1.3rem;
}
.wp-block-jetpack-contact-form .jetpack-field-label,
.wp-block-jetpack-contact-form label {
	color: var(--site-muted);
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	display: block;
	margin-bottom: 0.55rem;
}
.wp-block-jetpack-contact-form input[type="text"],
.wp-block-jetpack-contact-form input[type="email"],
.wp-block-jetpack-contact-form input[type="tel"],
.wp-block-jetpack-contact-form input[type="url"],
.wp-block-jetpack-contact-form input[type="number"],
.wp-block-jetpack-contact-form select,
.wp-block-jetpack-contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	background-color: var(--site-bg);
	border: 1px solid var(--site-surface);
	border-radius: 0;
	color: var(--site-text);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	padding: 0.8rem 1rem;
}
.wp-block-jetpack-contact-form select {
	height: auto;
}
.wp-block-jetpack-contact-form textarea {
	min-height: 9rem;
	resize: vertical;
}
.wp-block-jetpack-contact-form input:focus,
.wp-block-jetpack-contact-form select:focus,
.wp-block-jetpack-contact-form textarea:focus {
	outline: 1px solid var(--site-turquoise);
	outline-offset: -1px;
	border-color: var(--site-turquoise);
}
.wp-block-jetpack-contact-form .wp-block-button {
	margin-top: 0.5rem;
}

@media (max-width: 781px) {
	.card-media {
		height: clamp(13rem, 55vw, 20rem);
	}
	.band-media {
		min-height: 40vh;
	}
	.proj-media {
		min-height: 45vw;
	}
}

/* === animations === */
/* Progressive enhancement: every rule here only applies once site.js has run
   (it adds the .js-hero / .js-reveal / .js-parallax classes). Without the
   script — the block editor, no-JS, reduced-motion — everything stays in its
   final visible state, so the finished layout always renders. */

/* Hero headline reveal on page load: WALLS / STORIES / WORLDS in, staggered. */
.js-hero .hero-title .hero-line {
	opacity: 0;
	animation: lauranium-line-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.js-hero .hero-title .hero-line:nth-child(1) { animation-delay: 0.08s; }
.js-hero .hero-title .hero-line:nth-child(2) { animation-delay: 0.22s; }
.js-hero .hero-title .hero-line:nth-child(3) { animation-delay: 0.36s; }
@keyframes lauranium-line-up {
	from { opacity: 0; transform: translate3d(0, 1.4rem, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Scroll reveal — hidden only while JS sets it, revealed once, left shown. */
.js-reveal {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
	transition: opacity 0.7s ease, transform 0.7s ease;
	will-change: opacity, transform;
}
.js-reveal.is-inview {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* Portfolio hover — subtle image zoom and title emphasis on thumbnails. */
.project-card .card-media,
.cat-image {
	overflow: hidden;
}
.project-card .card-media img,
.cat-image img {
	transform: scale(1.001);
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}
.project-card:hover .card-media img,
.category-column:hover .cat-image img {
	transform: scale(1.05);
}
.project-card .card-title a {
	transition: color 0.3s ease, letter-spacing 0.3s ease;
}
.project-card:hover .card-title a,
.project-card .card-title a:hover {
	color: var(--site-turquoise);
	letter-spacing: 0.01em;
}

/* Parallax layer — moves slightly slower than the surrounding content. */
.js-parallax {
	will-change: transform;
}

/* === pricing (murals) === */
.pricing-title {
	margin: 0 0 clamp(1.5rem, 3vw, 2.2rem);
	font-size: var(--wp--preset--font-size--headline);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.02em;
}
.price-intro {
	margin: -0.7rem 0 1.6rem;
	color: var(--site-muted);
	max-width: 58ch;
}
.price-table {
	margin-top: 0.25rem;
}
.price-row {
	align-items: baseline;
	gap: 1rem;
	padding-block: clamp(0.9rem, 1.6vw, 1.15rem);
	border-top: 1px solid rgba(242, 233, 216, 0.14);
}
.price-table > :last-child {
	border-bottom: 1px solid rgba(242, 233, 216, 0.14);
}
.price-range,
.price-rate {
	margin: 0;
	font-family: var(--wp--preset--font-family--space-grotesk);
}
.price-range {
	color: var(--site-text);
	font-size: clamp(1.02rem, 1.6vw, 1.3rem);
}
.price-rate {
	color: var(--site-muted);
	font-size: clamp(0.98rem, 1.4vw, 1.18rem);
	text-align: right;
	white-space: nowrap;
}
/* the three per-m² rates are dusty coral */
.price-table .price-row:nth-of-type(-n+3) .price-rate {
	color: var(--site-lime);
}
/* highlighted minimum row */
.price-row.price-min .price-range {
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.price-row.price-min .price-rate {
	color: var(--site-muted);
	font-size: clamp(0.98rem, 1.4vw, 1.18rem);
	font-weight: 400;
}
/* pricing footnote — small muted note below the table */
.pricing-footnote {
	margin: clamp(1rem, 1.7vw, 1.5rem) 0;
	color: var(--site-muted);
	font-size: clamp(0.8rem, 1.05vw, 0.88rem);
	line-height: 1.7;
	max-width: 44em;
	opacity: 0.92;
}
/* example callout — premium editorial example panel */
.price-example {
	margin-top: clamp(2rem, 3.5vw, 3rem);
	padding: clamp(2.2rem, 5vw, 4rem);
	background: var(--site-surface);
	border: 1px solid rgba(242, 233, 216, 0.1);
	border-radius: 16px;
}
.price-example-label {
	margin: 0 0 0.6rem;
	color: var(--site-muted);
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.price-example-sub {
	margin: 0.6rem 0 0;
	color: var(--site-text);
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: clamp(2.6rem, 6vw, 4.6rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}
.price-example-line {
	margin: 0.5rem 0 0;
	color: var(--site-muted);
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: clamp(1.3rem, 2.4vw, 1.8rem);
	font-weight: 300;
}
.price-example-calc {
	margin: 1.1rem 0 0;
	color: var(--site-muted);
	font-size: 0.82rem;
	line-height: 1.7;
	max-width: 32em;
}
.price-example-calc .calc-note {
	font-size: 0.82em;
	color: var(--site-muted);
	opacity: 0.85;
}
.price-example-note {
	margin: 0;
	color: var(--site-muted);
	font-size: var(--wp--preset--font-size--body);
}
.price-note {
	margin: clamp(1.4rem, 2.5vw, 2rem) 0 0;
	color: var(--site-muted);
	font-size: var(--wp--preset--font-size--body);
	max-width: 60ch;
}
.pricing-sub-title {
	margin: clamp(2.4rem, 4.5vw, 3.4rem) 0 0;
	font-size: var(--wp--preset--font-size--headline);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.02em;
}
.price-sub-intro {
	margin: 0.9rem 0 1.8rem;
	color: var(--site-muted);
	max-width: 58ch;
}
/* two compact cost columns */
.price-cols {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin-top: clamp(2rem, 3.5vw, 3rem);
}
.price-col {
	flex: 1 1 280px;
	min-width: 0;
}
.price-col-title {
	margin: 0 0 0.7rem;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--site-muted);
}
.price-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.price-list li {
	position: relative;
	padding: 0.14rem 0;
	padding-left: 1rem;
	color: var(--site-text);
	font-size: 0.85rem;
	line-height: 1.45;
}
.price-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.34rem;
	height: 0.34rem;
	border-radius: 50%;
	background: var(--site-lime);
	opacity: 0.7;
}
@media ( max-width: 600px ) {
	/* Keep the two sections side by side at ~50% width each, with a narrow
	   gap and compact type; headings stay top-aligned. */
	.price-cols {
		gap: 0.875rem;
	}
	.price-col {
		flex: 1 1 0;
		min-width: 0;
	}
	.price-col-title {
		margin-bottom: 0.55rem;
		font-size: 0.72rem;
		letter-spacing: 0.14em;
	}
	.price-list li {
		font-size: 0.8rem;
		padding: 0.1rem 0;
		padding-left: 0.9rem;
		line-height: 1.4;
	}
	.price-list li::before {
		width: 0.3rem;
		height: 0.3rem;
		top: 0.52em;
	}
}
/* Fallback: on very narrow screens the side-by-side text becomes
   unreadable, so stack the two sections vertically. */
@media ( max-width: 380px ) {
	.price-col {
		flex-basis: 100%;
	}
	.price-cols {
		gap: 1rem;
	}
}

/* === footer legal links === */
.footer-legal {
	margin: 1.6rem auto 0;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--style--root--padding-left);
	text-align: center;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--site-muted);
}
.footer-legal a {
	color: var(--site-muted);
	text-decoration: none;
	margin: 0 0.6rem;
}
.footer-legal a:hover {
	color: var(--site-turquoise);
}

/* === contact email note === */
.contact-email {
	margin: 0;
	margin-top: 2rem;
	color: var(--site-text);
	font-size: var(--wp--preset--font-size--body);
}
.contact-email a {
	color: var(--site-lime);
	text-decoration: none;
}
.contact-email a:hover {
	color: var(--site-turquoise);
	text-decoration: underline;
}

/* legal page confirmation notes */
.legal-note {
	color: var(--site-muted);
	font-size: 0.9rem;
	line-height: 1.6;
	border-left: 1px solid var(--site-muted);
	padding-left: 1rem;
	margin-top: 1.4rem;
}

/* featured murals — uncropped natural display inside the category card */
.cat-image.cat-murals {
	height: auto;
	padding: 0;
}
.cat-image.cat-murals .wp-block-image {
	margin: 0;
	line-height: 0;
}
.cat-image.cat-murals img {
	width: 100%;
	height: auto;
	display: block;
}

/* === scroll / navigation behaviour === */
/* Back-to-top button — a small fixed arrow, bottom-right, appearing after
   ~400px of scroll. Dark petrol disc, cream arrow, coral hover. Created by
   site.js; hidden until scroll. */
.back-to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 999;
	width: 2.6rem;
	height: 2.6rem;
	border: 0;
	border-radius: 50%;
	background-color: var(--site-bg);
	color: var(--site-text);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, visibility 0.25s;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.back-to-top svg {
	display: block;
	width: 1.1rem;
	height: 1.1rem;
	fill: currentColor;
}
.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.back-to-top:hover {
	background-color: var(--site-lime);
}

/* Mobile — keep the three-line hamburger fixed at the top while scrolling so
   it is always reachable and stays above content/images. A petrol chip keeps
   the lines legible over imagery; the open/close overlay behaviour is intact. */
@media (max-width: 781px) {
	.main-nav .wp-block-navigation__responsive-container-open {
		position: fixed;
		top: 0.9rem;
		right: 1.1rem;
		z-index: 999;
		background-color: var(--site-bg);
		border-radius: 50%;
		padding: 0.6rem;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
	}
}

/* Desktop — scroll-aware header: sticky so it never causes layout shift; it
   slides out on scroll down and back in on scroll up, always visible at the
   very top. The hide/show is driven by site.js (.is-hidden). */
@media (min-width: 782px) {
	.site-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 998;
		transform: translateY(0);
		will-change: transform;
		transition: transform 0.3s ease;
	}
	.site-header.is-hidden {
		transform: translateY(-100%);
	}
	/* Reserve the header's vertical space (its height is ~58px on desktop) so
	   the fixed bar never overlaps or shifts page content when it appears or
	   disappears. */
	.wp-site-blocks {
		padding-top: 58px;
	}
}

/* === Custom animated mouse cursor — fine-pointer devices only ===
   The cursor element and body.has-custom-cursor class are created by site.js
   only when the device has a fine pointer (mouse) AND prefers-reduced-motion
   is not set, so the default cursor is hidden only in exactly that case. */
@media (hover: hover) and (pointer: fine) {
	body.has-custom-cursor,
	body.has-custom-cursor a,
	body.has-custom-cursor button,
	body.has-custom-cursor input,
	body.has-custom-cursor textarea,
	body.has-custom-cursor select,
	body.has-custom-cursor label,
	body.has-custom-cursor summary,
	body.has-custom-cursor [role="button"],
	body.has-custom-cursor .wp-element-button {
		cursor: none;
	}

	body.has-custom-cursor .custom-cursor {
		--cc-size: 32px;
		position: fixed;
		top: 0;
		left: 0;
		width: var(--cc-size);
		height: var(--cc-size);
		z-index: 2147483000;
		pointer-events: none;
		mix-blend-mode: difference;
		will-change: transform, opacity;
		opacity: 1;
		transition: opacity 0.25s ease;
	}
	body.has-custom-cursor .custom-cursor svg {
		display: block;
		width: 100%;
		height: 100%;
		transform-origin: 50% 50%;
		transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
	}
	body.has-custom-cursor .custom-cursor .cc-tri {
		fill: transparent;
		stroke: #F2E9D8;
		stroke-width: 1.5;
		stroke-linejoin: round;
		transition: fill 0.28s ease;
	}
	/* Interactive element (link, button, clickable media): enlarge + fill.
	   Ordinary text, headings and non-clickable images stay outlined. */
	body.has-custom-cursor .custom-cursor.is-link svg {
		transform: scale(1.9);
	}
	body.has-custom-cursor .custom-cursor.is-link .cc-tri {
		fill: #F2E9D8;
	}
}

/* Respect reduced-motion: no motion transitions on the cursor. */
@media (prefers-reduced-motion: reduce) {
	body.has-custom-cursor .custom-cursor svg,
	body.has-custom-cursor .custom-cursor .cc-tri {
		transition: none;
	}
}