@layer reset, tokens, base, layout, components, utilities, motion;

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

	body {
		margin: 0;
	}

	img,
	video {
		display: block;
		max-width: 100%;
	}

	button,
	input,
	textarea,
	select {
		font: inherit;
	}
}

@layer tokens {
	:root {
		--nice-type-display: var(--wp--preset--font-size--display);
		--nice-type-h1: var(--wp--preset--font-size--heading-1);
		--nice-type-h2: var(--wp--preset--font-size--heading-2);
		--nice-section-space: var(--wp--preset--spacing--section);
		--nice-type-editorial: var(--wp--preset--font-family--editorial);
		--nice-type-editorial-display: 3.5rem;
		--nice-type-editorial-hero: 4.5rem;
		--nice-canvas: #E7E3D8;
		--nice-black: #121213;
		--nice-secondary-black: #292927;
		--nice-muted: #565249;
		--nice-subtle-border: #C7C1B2;
		--nice-surface-container: #DAD5C8;
		--nice-surface-container-low: #F4F2ED;
		--nice-red: #EF233C;
		--nice-font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
		--nice-font-body: "Cabin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
		--nice-font-label: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	}

	@media (max-width: 26.875rem) {
		:root {
			--nice-type-display: 3rem;
			--nice-type-editorial-display: 2.85rem;
			--nice-type-editorial-hero: 3.5rem;
		}
	}

	@media (min-width: 48rem) {
		:root {
			--nice-type-display: 5.5rem;
			--nice-type-h1: 4rem;
			--nice-type-h2: 3rem;
			--nice-section-space: 6.5rem;
			--nice-type-editorial-display: 5.25rem;
			--nice-type-editorial-hero: 6.5rem;
			--wp--custom--layout--page-gutter: 2rem;
		}
	}

	@media (min-width: 75rem) {
		:root {
			--nice-type-display: 7rem;
			--nice-type-h1: 5rem;
			--nice-type-h2: 3.5rem;
			--nice-section-space: 8rem;
			--nice-type-editorial-display: 7rem;
			--nice-type-editorial-hero: 8.5rem;
			--wp--custom--layout--page-gutter: 2.5rem;
		}
	}
}

@layer base {
	html {
		background: var(--wp--preset--color--background);
		color: var(--wp--preset--color--text);
	}

	body {
		background: var(--wp--preset--color--background);
		color: var(--wp--preset--color--text);
		font-family: var(--wp--preset--font-family--sans);
		font-size: var(--wp--preset--font-size--body);
		line-height: 1.625;
		text-rendering: optimizeLegibility;
	}

	::selection {
		background: var(--wp--preset--color--brand-red);
		color: var(--wp--preset--color--text);
	}

	a {
		color: inherit;
		text-decoration-thickness: 0.08em;
		text-underline-offset: 0.18em;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-block: 0;
		font-weight: 600;
		letter-spacing: 0;
		line-height: 1.08;
		overflow-wrap: break-word;
		text-wrap: balance;
	}

	h1 {
		font-size: var(--nice-type-h1);
	}

	h2 {
		font-size: var(--nice-type-h2);
	}

	h3 {
		font-size: var(--wp--preset--font-size--heading-3);
	}

	p {
		margin-block: 0;
	}

	:focus-visible {
		outline: 3px solid var(--wp--preset--color--brand-blue);
		outline-offset: 3px;
	}
}

@layer layout {
	.nice-main {
		min-height: 55vh;
	}

	.nice-container,
	.nice-wide {
		box-sizing: border-box;
		margin-inline: auto;
		min-width: 0;
		padding-inline: var(--wp--custom--layout--page-gutter);
		width: 100%;
	}

	.nice-container {
		max-width: calc(var(--wp--custom--layout--content-width) + (2 * var(--wp--custom--layout--page-gutter)));
	}

	.nice-wide {
		max-width: calc(var(--wp--custom--layout--wide-width) + (2 * var(--wp--custom--layout--page-gutter)));
	}

	.nice-full-bleed {
		margin-inline: calc(50% - 50vw);
		width: 100vw;
	}

	.nice-section,
	.is-style-nice-section {
		padding-block: var(--nice-section-space);
	}

	.nice-section--compact,
	.is-style-nice-section-compact {
		padding-block: var(--wp--preset--spacing--2-xl);
	}

	.nice-stack {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--lg);
	}

	.nice-grid {
		display: grid;
		gap: var(--wp--preset--spacing--xl);
		grid-template-columns: minmax(0, 1fr);
	}

	.nice-grid > * {
		min-width: 0;
	}

	@media (min-width: 48rem) {
		.nice-grid--2,
		.nice-grid--projects {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.nice-grid--asymmetric {
			grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.65fr);
		}
	}

	@media (min-width: 64rem) {
		.nice-grid--3 {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.nice-grid--projects {
			grid-template-columns: repeat(12, minmax(0, 1fr));
		}

		.nice-grid--projects > * {
			grid-column: span 6;
		}

		.nice-grid--projects > .nice-project-card--featured,
		.nice-grid--projects > .nice-project-card--full {
			grid-column: 1 / -1;
		}
	}
}

@layer components {
	/*
	 * The marker that replaced the 01/02/03 indices. The elements it sits in were
	 * styled for text, so it sets its own box rather than inheriting a font size,
	 * and nudges down to sit on the first line's optical centre.
	 */
	.nice-index-dot {
		background: var(--nice-red);
		border-radius: 50%;
		display: inline-block;
		flex-shrink: 0;
		height: 0.375rem;
		margin-block-start: 0.45em;
		width: 0.375rem;
	}

	/*
	 * The marker earns its place only in the wide layout, where it sits in a
	 * left-hand column and lines the rows up against each other. Below that
	 * breakpoint the grid collapses to one column and the dot becomes a row of
	 * its own -- a lone red speck floating above the heading, marking nothing,
	 * since the hairline between rows already separates them. It is decorative
	 * and already hidden from assistive technology, so nothing is lost by
	 * dropping it here, and the heading gets the vertical space back.
	 */
	@media (max-width: 47.9375rem) {
		.nice-index-dot {
			display: none;
		}
	}

	.nice-eyebrow {
		color: var(--wp--preset--color--action-red);
		font-size: var(--wp--preset--font-size--label);
		font-weight: 700;
		letter-spacing: 0;
		line-height: 1.3;
		text-transform: uppercase;
	}

	.nice-display {
		font-size: var(--nice-type-display);
		font-weight: 600;
		letter-spacing: 0;
		line-height: 0.98;
		max-width: 12ch;
		text-wrap: balance;
	}

	.nice-body-large {
		font-size: var(--wp--preset--font-size--body-large);
		line-height: 1.55;
		max-width: 42rem;
	}

	.nice-section-heading {
		display: grid;
		gap: var(--wp--preset--spacing--md);
	}

	.nice-section-heading__row {
		display: grid;
		gap: var(--wp--preset--spacing--lg);
	}

	.nice-section-heading__copy {
		color: var(--wp--preset--color--muted);
		max-width: 38rem;
	}

	@media (min-width: 48rem) {
		.nice-section-heading__row {
			align-items: end;
			grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.48fr);
		}

		.nice-section-heading__copy {
			justify-self: end;
		}
	}

	.nice-link {
		align-items: center;
		display: inline-flex;
		font-weight: 600;
		gap: 0.5rem;
		position: relative;
		text-decoration: none;
	}

	.nice-link::after {
		background: currentColor;
		bottom: -0.15rem;
		content: "";
		height: 1px;
		left: 0;
		position: absolute;
		transform: scaleX(0);
		transform-origin: right;
		transition: transform var(--wp--custom--motion--duration-normal) var(--wp--custom--motion--easing);
		width: 100%;
	}

	.nice-link:hover::after,
	.nice-link:focus-visible::after {
		transform: scaleX(1);
		transform-origin: left;
	}

	.nice-link__arrow {
		transition: transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
	}

	.nice-link:hover .nice-link__arrow,
	.nice-link:focus-visible .nice-link__arrow {
		transform: translateX(0.25rem);
	}

	.nice-button,
	.wp-block-button.is-style-nice-primary .wp-block-button__link,
	.wp-block-button.is-style-nice-secondary .wp-block-button__link,
	.wp-block-button.is-style-nice-text .wp-block-button__link {
		align-items: center;
		border: 1px solid transparent;
		border-radius: var(--wp--custom--radius--pill);
		display: inline-flex;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
		gap: 0.625rem;
		justify-content: center;
		letter-spacing: 0;
		line-height: 1;
		min-height: 2.875rem;
		padding: 0.875rem 1.25rem;
		text-decoration: none;
		transition:
			background-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing),
			border-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing),
			color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing),
			transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
	}

	.nice-button:hover,
	.wp-block-button.is-style-nice-primary .wp-block-button__link:hover,
	.wp-block-button.is-style-nice-secondary .wp-block-button__link:hover {
		transform: translateY(-2px);
	}

	.nice-button--primary,
	.wp-block-button.is-style-nice-primary .wp-block-button__link {
		background: var(--wp--preset--color--action-red);
		color: var(--wp--preset--color--surface);
	}

	.nice-button--primary:hover,
	.wp-block-button.is-style-nice-primary .wp-block-button__link:hover {
		background: var(--wp--preset--color--text);
		color: var(--wp--preset--color--surface);
	}

	.nice-button--secondary,
	.wp-block-button.is-style-nice-secondary .wp-block-button__link {
		background: transparent;
		border-color: var(--wp--preset--color--text);
		color: var(--wp--preset--color--text);
	}

	.nice-button--secondary:hover,
	.wp-block-button.is-style-nice-secondary .wp-block-button__link:hover {
		background: var(--wp--preset--color--text);
		color: var(--wp--preset--color--surface);
	}

	.nice-button--text,
	.wp-block-button.is-style-nice-text .wp-block-button__link {
		background: transparent;
		border-radius: 0;
		color: var(--wp--preset--color--text);
		min-height: 2.75rem;
		padding-inline: 0;
	}

	.nice-site-header {
		background: transparent;
		border: 0;
		box-shadow: none;
		left: 0;
		padding-top: max(1.25rem, calc(0.75rem + env(safe-area-inset-top, 0px)));
		pointer-events: none;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 100;
	}

	body.admin-bar .nice-site-header {
		top: 32px;
	}

	.nice-nav-shell {
		align-items: center;
		background: var(--nice-canvas);
		border: 1px solid var(--nice-subtle-border);
		/*
		 * A rounded rectangle rather than a full pill. Measured against the
		 * reference bar at a 1440 viewport: 646 x 51 with a 15px radius, so the
		 * radius is a little under a third of the height. Kept as rem so it
		 * scales with the reader's text size rather than pinning to pixels.
		 */
		border-radius: 0.9375rem;
		box-shadow: 0 4px 20px color-mix(in srgb, var(--nice-black) 5%, transparent);
		box-sizing: border-box;
		display: flex;
		height: 3.1875rem;
		justify-content: space-between;
		margin-inline: auto;
		max-width: 40rem;
		padding: 0.3125rem 0.4375rem 0.3125rem 1.25rem;
		pointer-events: auto;
		transition: transform var(--wp--custom--motion--duration-normal) var(--wp--custom--motion--easing);
		width: calc(100% - 2rem);
	}

	@media (min-width: 64rem) {
		.nice-nav-shell {
			max-width: 40.375rem;
			padding: 0.3125rem 0.5rem 0.3125rem 1.375rem;
			width: calc(100% - 3rem);
		}
	}

	/*
	 * The lift belongs to the shell, not to the header.
	 *
	 * A transform on the header would make it the containing block for every
	 * fixed-position descendant, and the mobile menu is one of them: past the
	 * condense threshold the open menu was being sized and positioned against
	 * the 50px header box instead of the viewport, so it collapsed to its top
	 * row. The shell is not an ancestor of the menu, so the same movement here
	 * costs nothing.
	 */
	.nice-site-header.is-condensed .nice-nav-shell {
		transform: translateY(-0.625rem);
	}

	.nice-site-header.is-condensed .nice-nav-shell {
		box-shadow: 0 6px 18px color-mix(in srgb, var(--nice-black) 8%, transparent);
	}

	.nice-wordmark {
		align-items: center;
		display: inline-flex;
		font-size: 1.125rem;
		font-weight: 800;
		letter-spacing: 0;
		line-height: 1;
		min-height: 2.75rem;
		text-decoration: none;
	}

	.nice-wordmark__accent {
		color: var(--wp--preset--color--brand-red);
	}

	.nice-brand-link {
		align-items: center;
		display: inline-flex;
		min-height: 2.75rem;
		text-decoration: none;
	}

	.nice-logo {
		display: block;
		height: auto;
	}

	.nice-logo--menu {
		height: auto;
		width: 5.25rem;
	}

	/* Scaled with the shorter bar so the optical margins stay even. */
	.nice-logo--nav {
		height: auto;
		width: 4.5rem;
	}

	@media (min-width: 64rem) {
		.nice-logo--nav {
			width: 4.875rem;
		}
	}

	.nice-logo--footer {
		width: 7.5rem;
	}

	/*
	 * Below 64rem the bar is a logo and a hamburger, as before. From 64rem the
	 * links come into the bar and the hamburger goes, so there is one way to
	 * navigate at any given width rather than two.
	 */
	.nice-desktop-nav,
	.nice-nav-cta,
	.nice-nav-connect {
		display: none !important;
	}

	@media (min-width: 64rem) {
		.nice-desktop-nav {
			align-items: center;
			display: flex !important;
			gap: 1.75rem;
			/* Pushes the links and everything after them to the right of the bar. */
			margin-left: auto;
			margin-right: 1.75rem;
		}

		.nice-desktop-nav a {
			color: var(--nice-black);
			font-family: var(--nice-font-label);
			font-size: 0.75rem;
			font-weight: 600;
			letter-spacing: 0.08em;
			line-height: 1;
			text-decoration: none;
			text-transform: uppercase;
			transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
			white-space: nowrap;
		}

		.nice-desktop-nav a:hover,
		.nice-desktop-nav a:focus-visible {
			color: var(--nice-red);
		}

		.nice-desktop-nav a[aria-current="page"] {
			color: var(--nice-red);
		}

		.nice-nav-cta {
			align-items: center;
			background: var(--nice-black) !important;
			border: 0 !important;
			border-radius: 0.625rem !important;
			color: var(--nice-canvas) !important;
			display: inline-flex !important;
			font-family: var(--nice-font-label);
			font-size: 0.75rem;
			font-weight: 600;
			letter-spacing: 0.08em;
			line-height: 1;
			padding: 0.75rem 1.125rem !important;
			text-decoration: none;
			text-transform: uppercase;
			transition: background-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
			white-space: nowrap;
		}

		.nice-nav-cta:hover,
		.nice-nav-cta:focus-visible {
			background: var(--nice-red) !important;
		}

		.nice-nav-connect {
			display: block !important;
			position: relative;
		}

		.nice-nav-connect__chevron {
			border-bottom: 2px solid currentColor;
			border-right: 2px solid currentColor;
			display: inline-block;
			height: 0.375rem;
			margin-left: 0.5rem;
			transform: translateY(-0.125rem) rotate(45deg);
			transition: transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
			width: 0.375rem;
		}

		[aria-expanded="true"] .nice-nav-connect__chevron {
			transform: translateY(0.0625rem) rotate(-135deg);
		}

		/*
		 * Hangs under the button, aligned to its right edge, in the same card
		 * language as the bar and the drawer.
		 */
		.nice-nav-connect__menu {
			background: var(--nice-canvas);
			border: 1px solid var(--nice-subtle-border);
			border-radius: 0.75rem;
			box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--nice-black) 14%, transparent);
			display: grid;
			gap: 0.125rem;
			min-width: 100%;
			padding: 0.375rem;
			position: absolute;
			right: 0;
			top: calc(100% + 0.625rem);
			white-space: nowrap;
			z-index: 130;
		}

		/*
		 * display: grid above beats the user agent's [hidden] { display: none },
		 * because an author rule wins over a UA rule at equal specificity. Without
		 * this the disclosure rendered permanently open.
		 */
		.nice-nav-connect__menu[hidden] {
			display: none;
		}

		.nice-nav-connect__menu a {
			align-items: center;
			border-radius: 0.5rem;
			color: var(--nice-black);
			display: flex;
			font-family: var(--nice-font-label);
			font-size: 0.75rem;
			font-weight: 600;
			letter-spacing: 0.08em;
			min-height: 2.75rem;
			padding-inline: 0.875rem;
			text-decoration: none;
			text-transform: uppercase;
			transition: background-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
		}

		.nice-nav-connect__menu a:hover,
		.nice-nav-connect__menu a:focus-visible {
			background: var(--nice-surface-container);
			color: var(--nice-red);
		}

		/*
		 * The drawer is unnecessary once the links are in the bar.
		 *
		 * Scoped to the shell deliberately: .nice-menu-toggle carries
		 * display: inline-flex !important further down this file, and an equally
		 * specific rule placed earlier would lose to it on source order.
		 */
		.nice-nav-shell .nice-menu-toggle {
			display: none !important;
		}
	}

	/*
	 * Bare rule strokes, no disc. The button keeps its full 2.75rem hit area:
	 * the circle was the visible edge of the target, not the target itself, so
	 * removing it must not shrink what a thumb has to land on.
	 */
	.nice-menu-toggle {
		align-items: center;
		appearance: none;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		color: var(--nice-black) !important;
		cursor: pointer;
		display: inline-flex !important;
		height: 2.75rem;
		justify-content: center;
		padding: 0;
		position: relative;
		transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
		width: 2.75rem;
	}

	.nice-menu-toggle:hover,
	.nice-menu-toggle:focus-visible {
		color: var(--nice-red) !important;
	}

	/* The focus ring was the disc; without it the keyboard needs its own. */
	.nice-menu-toggle:focus-visible {
		outline: 2px solid var(--nice-black);
		outline-offset: 2px;
	}

	.nice-menu-icon,
	.nice-menu-icon::before,
	.nice-menu-icon::after {
		background: currentColor;
		content: "";
		display: block;
		height: 2px;
		transition: transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
		width: 1.125rem;
	}

	.nice-menu-icon {
		position: relative;
	}

	.nice-menu-icon::before {
		position: absolute;
		transform: translateY(-0.35rem);
	}

	.nice-menu-icon::after {
		position: absolute;
		transform: translateY(0.35rem);
	}

	/*
	 * Open, the three rules become a cross: the middle rule fades and the outer
	 * two rotate onto each other, so the control a thumb pressed is the control
	 * that closes it.
	 */
	[aria-expanded="true"] .nice-menu-icon {
		background: transparent;
	}

	[aria-expanded="true"] .nice-menu-icon::before {
		transform: translateY(0) rotate(45deg);
	}

	[aria-expanded="true"] .nice-menu-icon::after {
		transform: translateY(0) rotate(-45deg);
	}

	@media (prefers-reduced-motion: no-preference) {
		.nice-menu-icon {
			transition: background-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
		}
	}

	/*
	 * A plain mark rather than a filled black disc. The disc was as heavy as the
	 * logo and took a whole row at the top of the panel; the target stays 2.75rem
	 * while only the ink changes.
	 */
	.nice-menu-close {
		align-items: center;
		appearance: none;
		background: transparent;
		border: 0;
		border-radius: 0;
		color: var(--nice-black);
		cursor: pointer;
		display: inline-flex;
		height: 2.75rem;
		justify-content: center;
		padding: 0;
		position: relative;
		transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
		width: 2.75rem;
	}

	.nice-menu-close:hover,
	.nice-menu-close:focus-visible {
		color: var(--nice-red);
	}

	.nice-menu-close::before,
	.nice-menu-close::after {
		background: currentColor;
		content: "";
		height: 2px;
		position: absolute;
		width: 1.125rem;
	}

	.nice-menu-close::before {
		transform: rotate(45deg);
	}

	.nice-menu-close::after {
		transform: rotate(-45deg);
	}

	/*
	 * A panel that hangs below the nav bar and slides in from the right, rather
	 * than a card that fades in over the middle of the page.
	 *
	 * The offset is a token so the panel and the bar cannot drift apart: the bar
	 * is 51px tall under 20px of header padding, so the panel starts where the
	 * bar ends. Anything that changes the bar's height changes this one value.
	 */
	/*
	 * A card that hangs below the bar, matching it exactly: same inset from the
	 * screen edges, same width, same corner radius. Measured against the
	 * reference at 390px, where the bar and the panel are both 360 wide, inset
	 * 15px, with a 15px radius. A full-bleed square panel under a floating
	 * rounded bar reads as two unrelated objects.
	 */
	.nice-mobile-menu {
		--nice-menu-offset: 4.4375rem;
		--nice-menu-gap: 0.5rem;
		/* Mirrors .nice-nav-shell's max-width so the two edges stay together. */
		--nice-bar-max: 40rem;

		background: var(--nice-canvas);
		border: 1px solid var(--nice-subtle-border);
		border-radius: 0.9375rem;
		box-shadow: 0 1rem 3rem color-mix(in srgb, var(--nice-black) 14%, transparent);
		box-sizing: border-box;
		display: grid !important;
		grid-template-rows: auto auto;
		margin-inline: auto;
		max-height: calc(100dvh - var(--nice-menu-offset) - var(--nice-menu-gap) - 1rem);
		max-width: 26rem;
		overflow-y: auto;
		padding: 1rem 1.25rem 1.25rem;
		pointer-events: none;
		position: fixed;
		/*
		 * Aligned to the bar's right edge, not the viewport's. The bar is centred
		 * inside a max-width, so once the screen is wider than that the two edges
		 * part company: at 768px the panel sat 48px past the end of the bar.
		 */
		right: max(1rem, calc((100% - var(--nice-bar-max)) / 2));
		top: calc(var(--nice-menu-offset) + var(--nice-menu-gap));
		transform: translateX(calc(100% + 1rem));
		transition:
			transform var(--wp--custom--motion--duration-menu) var(--wp--custom--motion--easing),
			visibility 0s linear var(--wp--custom--motion--duration-menu);
		visibility: hidden;
		width: calc(100% - 2rem);
		z-index: 120;
	}

	@media (min-width: 64rem) {
		.nice-mobile-menu {
			--nice-bar-max: 40.375rem;

			right: max(1.5rem, calc((100% - var(--nice-bar-max)) / 2));
			width: calc(100% - 3rem);
		}
	}

	.nice-mobile-menu[data-state="open"] {
		pointer-events: auto;
		transform: translateX(0);
		transition-delay: 0s;
		visibility: visible;
	}

	/* The close control is a mark in the corner, not a filled disc on its own row. */
	.nice-mobile-menu__top {
		margin-bottom: 0.25rem;
	}

	/*
	 * The panel travels; with reduced motion it simply appears. Visibility still
	 * carries the delay so the panel is not tabbable on the way out.
	 */
	@media (prefers-reduced-motion: reduce) {
		.nice-mobile-menu {
			transition: visibility 0s linear var(--wp--custom--motion--duration-menu);
		}
	}

	.nice-mobile-menu__top {
		align-items: center;
		display: flex;
		/* The close button is the only thing left in this row. */
		justify-content: flex-end;
	}

	.nice-mobile-menu__links {
		/*
		 * align-content keeps each row at its natural height. Without it the grid
		 * stretches its rows to fill the drawer, so trimming the type changed
		 * nothing: six rows simply grew to take up the same space.
		 */
		align-content: start;
		display: grid;
		gap: 0;
		padding-block: 0;
	}

	/*
	 * Calm, not shouty: six items used to fill the screen in bold uppercase
	 * with a rule under every row. Lighter and smaller reads better in a narrow
	 * panel, and min-height still holds each row at 44px for a thumb.
	 */
	.nice-mobile-menu__links a {
		align-items: center;
		color: var(--nice-black);
		display: flex;
		font-family: var(--nice-font-body);
		font-size: 1.125rem;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 1.2;
		min-height: 3rem;
		text-decoration: none;
		transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
	}

	/* Separators between rows, not under the last one. */
	.nice-mobile-menu__links a + a {
		border-top: 1px solid color-mix(in srgb, var(--nice-subtle-border) 55%, transparent);
	}

	.nice-mobile-menu__links a:hover,
	.nice-mobile-menu__links a:focus-visible {
		color: var(--nice-red);
	}

	.nice-mobile-menu__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--sm);
		padding-top: var(--wp--preset--spacing--md);
	}

	.nice-mobile-menu__actions {
		border-top: 1px solid var(--nice-subtle-border);
		display: grid;
		gap: 0.5rem;
		margin-top: 0.75rem;
	}

	.nice-mobile-menu__actions .nice-button {
		justify-content: center;
		width: 100%;
		border-radius: 0 !important;
		font-family: var(--nice-font-label) !important;
		font-size: 0.8125rem !important;
		font-weight: 600 !important;
		letter-spacing: 0.08em !important;
		padding: 0.625rem 1.25rem !important;
		text-transform: uppercase !important;
	}

	body.nice-menu-is-open {
		overflow: hidden;
	}

	.nice-project-card {
		display: grid;
		gap: var(--wp--preset--spacing--md);
	}

	.nice-project-card__link {
		display: grid;
		gap: var(--wp--preset--spacing--md);
		text-decoration: none;
	}

	.nice-project-card__media,
	.nice-media {
		aspect-ratio: 4 / 3;
		background: var(--wp--preset--color--warm);
		border-radius: var(--wp--custom--radius--medium);
		overflow: hidden;
		position: relative;
	}

	.nice-project-card__media img,
	.nice-project-card__media video,
	.nice-media img,
	.nice-media video,
	.wp-block-image.is-style-nice-editorial img,
	.wp-block-image.is-style-nice-portrait img,
	.wp-block-image.is-style-nice-square img,
	.wp-block-image.is-style-nice-full-bleed img {
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	.nice-project-card__media img,
	.nice-project-card__media video {
		transition: transform var(--wp--custom--motion--duration-image-hover) var(--wp--custom--motion--easing);
	}

	.nice-project-card__link:hover .nice-project-card__media img,
	.nice-project-card__link:hover .nice-project-card__media video {
		transform: scale(1.018);
	}

	.nice-project-card__content {
		display: grid;
		gap: var(--wp--preset--spacing--sm);
	}

	.nice-project-card__meta {
		color: var(--wp--preset--color--muted);
		display: flex;
		flex-wrap: wrap;
		font-size: var(--wp--preset--font-size--small);
		gap: 0.35rem 1rem;
	}

	.nice-project-card__title {
		font-size: var(--wp--preset--font-size--heading-3);
	}

	.nice-project-card__description {
		color: var(--wp--preset--color--muted);
		max-width: 38rem;
	}

	.nice-project-card--featured .nice-project-card__media,
	.nice-project-card--full .nice-project-card__media {
		aspect-ratio: 16 / 9;
	}

	.nice-project-card--compact .nice-project-card__media {
		aspect-ratio: 1;
	}

	@media (min-width: 48rem) {
		.nice-project-card--horizontal .nice-project-card__link {
			align-items: center;
			grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
		}
	}

	.nice-service-list {
		border-top: 1px solid var(--wp--preset--color--border);
	}

	.nice-service-card {
		border-bottom: 1px solid var(--wp--preset--color--border);
		display: grid;
		gap: var(--wp--preset--spacing--md);
		padding-block: var(--wp--preset--spacing--xl);
	}

	.nice-service-card__number {
		color: var(--wp--preset--color--action-red);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 700;
	}

	.nice-service-card__title {
		font-size: var(--wp--preset--font-size--heading-3);
	}

	.nice-service-card__copy {
		color: var(--wp--preset--color--muted);
		max-width: 34rem;
	}

	.nice-service-card__action {
		align-self: center;
		justify-self: start;
	}

	@media (min-width: 48rem) {
		.nice-service-card {
			align-items: start;
			grid-template-columns: 3rem minmax(12rem, 0.65fr) minmax(18rem, 1fr) auto;
		}

		.nice-service-card__action {
			justify-self: end;
		}
	}

	.nice-video {
		aspect-ratio: 16 / 9;
		background: var(--wp--preset--color--text);
		border-radius: var(--wp--custom--radius--medium);
		overflow: hidden;
		position: relative;
	}

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

	.wp-block-image.is-style-nice-editorial img {
		aspect-ratio: 4 / 3;
		border-radius: var(--wp--custom--radius--medium);
	}

	.wp-block-image.is-style-nice-portrait img {
		aspect-ratio: 3 / 4;
		border-radius: var(--wp--custom--radius--medium);
	}

	.wp-block-image.is-style-nice-square img {
		aspect-ratio: 1;
		border-radius: var(--wp--custom--radius--medium);
	}

	.wp-block-image.is-style-nice-full-bleed {
		margin-inline: calc(50% - 50vw);
		width: 100vw;
	}

	.wp-block-image.is-style-nice-full-bleed img {
		aspect-ratio: 16 / 9;
		border-radius: 0;
	}

	.nice-contact-band {
		background: #0f0f11;
		color: #ffffff;
		padding-block: var(--nice-section-space);
	}

	.nice-contact-band__inner {
		display: grid;
		gap: var(--wp--preset--spacing--xl);
	}

	.nice-contact-band .nice-eyebrow {
		color: var(--wp--preset--color--brand-red);
	}

	.nice-contact-band h2 {
		font-family: var(--nice-type-editorial);
		font-size: var(--nice-type-editorial-display);
		font-weight: 400;
		letter-spacing: -0.025em;
		line-height: 0.98;
		max-width: 14ch;
		text-wrap: balance;
	}

	.nice-contact-band .nice-button--secondary {
		border-color: #ffffff;
		color: #ffffff;
	}

	.nice-contact-band .nice-button--secondary:hover {
		background: #ffffff;
		color: #0f0f11;
	}

	.nice-contact-band__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--sm);
	}

	@media (min-width: 48rem) {
		.nice-contact-band__inner {
			align-items: end;
			grid-template-columns: minmax(0, 1.2fr) minmax(14rem, auto);
		}
	}

	.nice-site-footer {
		background: var(--wp--preset--color--background);
		border-top: 1px solid var(--wp--preset--color--border);
		padding-block: var(--wp--preset--spacing--2-xl);
	}

	.nice-footer-grid {
		display: grid;
		gap: var(--wp--preset--spacing--xl);
	}

	.nice-footer-nav {
		display: grid;
		gap: var(--wp--preset--spacing--sm);
	}

	.nice-footer-nav a {
		text-decoration: none;
	}

	.nice-footer-meta {
		border-top: 1px solid var(--wp--preset--color--border);
		color: var(--wp--preset--color--muted);
		display: flex;
		flex-wrap: wrap;
		font-size: var(--wp--preset--font-size--small);
		gap: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg);
		justify-content: space-between;
		margin-top: var(--wp--preset--spacing--xl);
		padding-top: var(--wp--preset--spacing--lg);
	}

	@media (min-width: 48rem) {
		.nice-footer-grid {
			grid-template-columns: minmax(12rem, 1.2fr) repeat(3, minmax(8rem, 0.5fr));
		}
	}
}

@layer utilities {
	.nice-muted {
		color: var(--wp--preset--color--muted);
	}

	.nice-surface-warm {
		background: var(--wp--preset--color--warm);
	}

	.nice-sr-only {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.nice-skip-link {
		background: var(--wp--preset--color--text);
		color: var(--wp--preset--color--surface);
		left: var(--wp--custom--layout--page-gutter);
		padding: 0.75rem 1rem;
		position: fixed;
		top: -6rem;
		z-index: 200;
	}

	.nice-skip-link:focus {
		top: 0.75rem;
	}
}

@layer utilities {
	.nice-editorial {
		font-family: var(--nice-type-editorial) !important;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 1.02;
	}

	.nice-editorial-display {
		font-family: var(--nice-type-editorial) !important;
		font-size: var(--nice-type-editorial-display);
		font-weight: 400;
		letter-spacing: 0;
		line-height: 0.96;
	}

	.nice-editorial-hero {
		font-family: var(--nice-type-editorial) !important;
		font-size: var(--nice-type-editorial-hero);
		font-weight: 400;
		letter-spacing: 0;
		line-height: 0.92;
		text-wrap: balance;
	}

	.nice-section-break {
		border: 0;
		border-top: 1px solid var(--wp--preset--color--border);
		margin-block: var(--nice-section-space);
	}

	.nice-dark-section {
		background: #0f0f11 !important;
		color: #ffffff !important;
	}

	.nice-dark-section .nice-eyebrow {
		color: var(--wp--preset--color--brand-red);
	}
}

@layer components {
	/* ── Inline icons ─────────────────────────────────────────────────────── */

	.nice-icon {
		display: inline-block;
		flex-shrink: 0;
		height: 1.25rem;
		vertical-align: -0.25em;
		width: 1.25rem;
	}

	/* ── Office address on the contact pages ──────────────────────────────── */

	.nice-office {
		border-top: 1px solid var(--nice-subtle-border);
		margin-top: 2.5rem;
		padding-top: 1.75rem;
	}

	.nice-office__heading {
		align-items: center;
		display: flex;
		font-family: var(--nice-font-label);
		font-size: 0.8125rem;
		font-weight: 600;
		gap: 0.625rem;
		letter-spacing: 0.08em;
		margin: 0 0 0.75rem;
		text-transform: uppercase;
	}

	.nice-office__address {
		display: grid;
		font-family: var(--nice-font-body);
		font-size: 1.0625rem;
		font-style: normal;
		gap: 0.125rem;
		line-height: 1.5;
		margin: 0 0 1rem;
	}

	.nice-office__directions {
		align-items: center;
		display: inline-flex;
		gap: 0.5rem;
		min-height: 2.75rem;
	}

	/* ── Floating WhatsApp action ─────────────────────────────────────────── */

	/*
	 * Brand green rather than the NICE red: the glyph is WhatsApp's mark, and a
	 * red disc carrying it reads as a mistake rather than as a brand choice.
	 */
	.nice-whatsapp-float {
		align-items: center;
		background: #25D366;
		border-radius: 50%;
		bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 6px 20px color-mix(in srgb, var(--nice-black) 22%, transparent);
		color: #fff;
		display: inline-flex;
		height: 3.25rem;
		justify-content: center;
		position: fixed;
		right: calc(1.25rem + env(safe-area-inset-right, 0px));
		text-decoration: none;
		transition: transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
		width: 3.25rem;
		/* Under the mobile menu (120) so an open menu covers it. */
		z-index: 90;
	}

	.nice-whatsapp-float .nice-icon {
		height: 1.625rem;
		width: 1.625rem;
	}

	.nice-whatsapp-float:hover {
		transform: scale(1.05);
	}

	.nice-whatsapp-float:focus-visible {
		outline: 2px solid var(--nice-black);
		outline-offset: 3px;
	}

	/* An open menu owns the screen; the float must not sit on top of it. */
	.nice-menu-is-open .nice-whatsapp-float {
		opacity: 0;
		pointer-events: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.nice-whatsapp-float {
			transition: none;
		}

		.nice-whatsapp-float:hover {
			transform: none;
		}
	}
}

@layer motion {
	.nice-sr-only {
		border: 0;
		clip: rect(0, 0, 0, 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.nice-reveal-mask {
		display: inline-block;
		overflow: hidden;
		vertical-align: bottom;
	}

	.nice-has-reveal [data-nice-reveal]:not(.is-visible) {
		opacity: 0;
		transform: translateY(14px);
	}

	.nice-has-reveal [data-nice-reveal] {
		transition:
			opacity var(--wp--custom--motion--duration-slow) var(--wp--custom--motion--easing),
			transform var(--wp--custom--motion--duration-slow) var(--wp--custom--motion--easing);
		transition-delay: var(--nice-reveal-delay, 0ms);
	}

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

	.nice-has-reveal [data-nice-editorial-reveal] .nice-reveal-unit {
		display: inline-block;
		opacity: 0;
		transform: translateY(14px);
		transition:
			opacity var(--wp--custom--motion--duration-slow) var(--wp--custom--motion--easing),
			transform var(--wp--custom--motion--duration-slow) var(--wp--custom--motion--easing);
		transition-delay: var(--nice-word-delay, 0ms);
	}

	.nice-has-reveal [data-nice-editorial-reveal].is-visible .nice-reveal-unit {
		opacity: 1;
		transform: translateY(0);
	}

	.nice-reveal-pending,
	.nice-reveal-pending .nice-motion-media {
		will-change: opacity, transform;
	}

	.nice-motion-media {
		transition: transform var(--wp--custom--motion--duration-media) var(--wp--custom--motion--easing) !important;
	}

	.nice-has-reveal [data-nice-reveal]:not(.is-visible) .nice-motion-media {
		transform: scale(1.015);
	}

	.nice-motion-media.nice-motion-media-ready {
		transition-duration: var(--wp--custom--motion--duration-image-hover) !important;
	}

	.nice-link span[aria-hidden],
	.nice-button span[aria-hidden] {
		display: inline-block;
		transition: transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
	}

	.nice-link:hover span[aria-hidden],
	.nice-link:focus-visible span[aria-hidden],
	.nice-button:hover span[aria-hidden],
	.nice-button:focus-visible span[aria-hidden] {
		transform: translateX(0.35rem);
	}

	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root) {
		animation: nice-page-out var(--wp--custom--motion--duration-page-out) ease-in both;
	}

	::view-transition-new(root) {
		animation: nice-page-in var(--wp--custom--motion--duration-page-in) var(--wp--custom--motion--easing) both;
	}

	@keyframes nice-page-out {
		to {
			opacity: 0;
			transform: translateY(-0.25rem);
		}
	}

	@keyframes nice-page-in {
		from {
			opacity: 0;
			transform: translateY(0.25rem);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}

		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			scroll-behavior: auto !important;
			transition-duration: 0.01ms !important;
		}

		::view-transition-old(root),
		::view-transition-new(root) {
			animation: none;
		}

		.nice-has-reveal [data-nice-reveal],
		.nice-has-reveal [data-nice-editorial-reveal] .nice-reveal-unit,
		.nice-motion-media {
			opacity: 1;
			transform: none !important;
			will-change: auto;
		}
	}
}

@media (max-width: 48.875rem) {
	body.admin-bar .nice-site-header {
		top: 46px;
	}
}