/* Aspect Designs — Custom Stylesheet */

/* =============================================
   FONTS
   ============================================= */

@font-face {
	font-family: 'Ivy';
	src: url('ivy.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Satoshi';
	src: url('satoshi.otf') format('opentype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nord';
	src: url('Nord-Medium.otf') format('opentype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* Base: Satoshi for body copy; Ivy stays where set explicitly */
body {
	font-family: 'Satoshi', system-ui, sans-serif;
}

h2,
h3 {
	font-family: 'Ivy', Georgia, serif;
}

/* Satoshi for UI elements: hero, buttons, footer */
.btn,
.hero-block {
    font-family: 'Nord', sans-serif;
    letter-spacing: 3px;
    font-weight: 600;
}

#footer {
	font-family: 'Satoshi', system-ui, sans-serif;
}

#main {
	padding: 0;
	margin: 0;
}

:root {
	--ad-green: #4c5134;
	--ad-sand: #e1e1df;
	--ad-dark: #252726;
	--ad-light: #e7e7e9;
	--ad-blue: #2c3e4c;

	/* RGB channels for rgba() usage */
	--ad-dark-rgb: 37, 39, 38;
	--ad-sand-rgb: 225, 225, 223;
	--ad-green-rgb: 76, 81, 52;
	--ad-light-rgb: 231, 231, 233;
}

/* Hero palette: deep blue panel + brass A mark */
.hero-block {
	--ad-dark: #19242C;
	--ad-dark-rgb: 25, 36, 44;
	background-color: var(--ad-dark);
}

.hero-block .ad-mark__a {
	fill: #B68B4B !important;
}

.bg-dark {
	background-color: var(--ad-dark) !important;
}

.bg-light {
	background-color: var(--ad-light) !important;
}

.bg-sand {
	background-color: var(--ad-sand) !important;
}

.bg-green {
	background-color: var(--ad-green) !important;
}

.bg-blue {
	background-color: var(--ad-blue) !important;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.1rem;
	border-radius: 100px;
    padding: 0.5rem 1.15rem 0.5rem 1.15rem;
	text-transform: uppercase;
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Arrow only on hero buttons */
.hero-btn.btn::after {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	-webkit-mask-image: url('btn-arrow.svg');
	mask-image: url('btn-arrow.svg');
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	background-color: currentColor;
	transition: transform 0.2s ease;
}

.hero-btn.btn:hover::after {
	transform: translate(2px, -2px);
}

.btn-light {
	background: var(--ad-light);
	border: 1px solid transparent;
	color: var(--ad-dark);
}

.btn-light:hover {
	background: color-mix(in srgb, var(--ad-light) 88%, black);
	color: var(--ad-dark);
}

.btn-outline {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: rgba(255, 255, 255, 0.8);
}

.btn-outline:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

/* ---- General ---- */

img {
	vertical-align: middle;
}

.fc {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.post-thumbnail,
.wp-video,
.embed-responsive {
	margin: 5px 0;
	width: 100% !important;
}

.post img,
.post-thumbnail img {
	max-width: 100%;
	height: auto;
}

/* ---- Admin bar ---- */

.admin-bar #header.fixed-top {
	top: var(--wp-admin--admin-bar--height);
}

.admin-bar .edit-link a {
	color: #fff !important;
	font-weight: normal !important;
	text-decoration: none !important;
}

.admin-bar .edit-link a::before {
	content: '\270E';
	display: inline-block;
	margin-right: 5px;
}

/* ---- Page templates ---- */

.page-template-page-full #main {
	max-width: 100%;
}

/* ---- Header ---- */

/* =============================================
   Global content reveal
   ============================================= */

.reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.reveal.is-inview {
	opacity: 1;
	transform: none;
}

/* Images ease in rather than snapping on once decoded */
.img-fade {
	opacity: 0;
	transition: opacity 0.9s ease;
}

.img-fade.is-loaded {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.reveal,
	.img-fade {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* =============================================
   Hero intro sequence — home + contact
   The A graphic lands first, then the dark panel
   wipes across to half-cover it, then the copy rises.
   ============================================= */

/* --- The A mark: simple fade in --- */

.ad-mark__ring,
.ad-mark__a {
	transform-box: fill-box;
	opacity: 0;
	transition: opacity 1.2s ease 0.3s;
}

.ad-mark__ring--left,
.ad-mark__ring--right,
.ad-mark__a {
	transform: none;
}

.is-loaded .ad-mark__ring,
.is-loaded .ad-mark__a {
	opacity: 1;
	transform: none;
}

.hero-block .hero-graphic,
.contacts-block .contacts-graphic {
	opacity: 1;
	transform: translate(-50%, -50%);
	transition: none;
}

.hero-block.is-loaded .hero-graphic,
.contacts-block.is-loaded .contacts-graphic {
	opacity: 1;
	transform: translate(-50%, -50%);
}

.hero-block .hero-headings,
.hero-block .hero-categories,
.hero-block .hero-buttons,
.contacts-block .contacts-headings,
.contacts-block .contacts-footer {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-block.is-loaded .hero-headings,
.contacts-block.is-loaded .contacts-headings {
	opacity: 1;
	transform: none;
	transition-delay: 3.1s;
}

.hero-block.is-loaded .hero-categories,
.contacts-block.is-loaded .contacts-footer {
	opacity: 1;
	transform: none;
	transition-delay: 3.25s;
}

.hero-block.is-loaded .hero-buttons {
	opacity: 1;
	transform: none;
	transition-delay: 3.4s;
}

@media (min-width: 992px) {
	/* The dark half is rebuilt as an animatable layer.
	   The overlay copy sits below the A graphic; the content
	   column's ::before sits above it, so the wipe finishes
	   with exactly half the A covered. */
	.hero-block .hero-left-col.bg-dark,
	.contacts-block .contacts-panel-col.bg-dark {
		background: transparent !important;
		position: relative;
	}

	.hero-block .hero-left-col::before,
	.contacts-block .contacts-panel-col::before {
		content: '';
		position: absolute;
		inset: 0;
		background: var(--ad-dark);
		z-index: -1;
	}

	/* Revealed with clip-path rather than transform, so nothing
	   is ever parked off to the side where it can peek out. */
	.hero-block .hero-left-col::before,
	.hero-block .hero-overlay .bg-dark {
		clip-path: inset(0 100% 0 0);
		transition: clip-path 1.1s cubic-bezier(0.76, 0, 0.24, 1) 1.9s;
	}

	.contacts-block .contacts-panel-col::before,
	.contacts-block .contacts-overlay .bg-dark {
		clip-path: inset(0 0 0 100%);
		transition: clip-path 1.1s cubic-bezier(0.76, 0, 0.24, 1) 1.9s;
	}

	.hero-block.is-loaded .hero-left-col::before,
	.hero-block.is-loaded .hero-overlay .bg-dark,
	.contacts-block.is-loaded .contacts-panel-col::before,
	.contacts-block.is-loaded .contacts-overlay .bg-dark {
		clip-path: inset(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-block .hero-graphic,
	.contacts-block .contacts-graphic,
	.hero-block .hero-headings,
	.hero-block .hero-categories,
	.hero-block .hero-buttons,
	.contacts-block .contacts-headings,
	.contacts-block .contacts-footer,
	.hero-block .hero-overlay .bg-dark,
	.contacts-block .contacts-overlay .bg-dark,
	.hero-block .hero-left-col::before,
	.contacts-block .contacts-panel-col::before,
	.ad-mark__ring,
	.ad-mark__a {
		opacity: 1;
		transform: none;
		clip-path: none;
		transition: none;
	}
}

:root {
	--header-height: 80px;
	/* Single source of truth for the page's side margin */
	--page-gutter: clamp(1.5rem, 3.5vw, 3.5rem);
}

/* One fluid container instead of Bootstrap's stepped max-widths,
   so every section's edge matches the header logo at any width. */
.container {
	max-width: 1320px;
	padding-left: var(--page-gutter);
	padding-right: var(--page-gutter);
}

/* Smooth scrolling for in-page anchor links */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Stop anchored sections landing under the header */
.services-detail-block[id],
section[id] {
	scroll-margin-top: calc(var(--header-height) + 1rem);
}

#site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	width: 100%;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;
	will-change: transform;
}

.admin-bar #site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Out of the way while scrolling down — only returns on scroll up */
#site-header.is-hidden {
	transform: translateY(-110%);
}

/* Once returned mid-page, the nav carries its own background */
#site-header.is-pinned .site-header__logo-col,
#site-header.is-pinned .site-header__nav-col {
	background: var(--ad-dark);
}

/* At rest over a hero, the header columns are transparent so the
   panel behind them does the work — no floating bar over the photo. */
.home .site-header__logo-col,
.front-page .site-header__logo-col {
	background: transparent;
}

/* Reserve the header's space, except where it deliberately overlays artwork */
#wrapper {
	padding-top: var(--header-height);
}

.home #wrapper,
.front-page #wrapper,
.post-type-archive-project #wrapper {
	padding-top: 0;
}

@media (prefers-reduced-motion: reduce) {
	#site-header {
		transition: none;
	}

	#site-header.is-hidden {
		transform: none;
	}
}

.admin-bar .home #site-header,
.admin-bar .front-page #site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.site-header__inner {
	display: flex;
	height: var(--header-height);
}

/* Logo column — inherits dark bg from hero on front page,
   uses explicit bg on interior pages */
.site-header__logo-col {
	display: flex;
	align-items: center;
	width: 50%;
	background: var(--ad-dark);
	padding-left: max(var(--page-gutter), calc((100vw - 1320px) / 2 + var(--page-gutter)));
	padding-right: 2rem;
}

.site-header__logo-link {
	display: inline-flex;
	align-items: center;
}

.site-header__logo-img {
	height: 26px;
	width: auto;
}

/* Nav column — transparent on front page over hero photo */
.site-header__nav-col {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 50%;
	background: transparent;
	padding-right: max(var(--page-gutter), calc((100vw - 1320px) / 2 + var(--page-gutter)));
	padding-left: 2rem;
	gap: 1rem;
}

/* Interior pages: nav column gets dark bg */
body:not(.home):not(.front-page) .site-header__nav-col {
	background: var(--ad-dark);
}

.site-header__nav {
	display: flex;
}

.site-header__menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 2.5rem;
	align-items: center;
}

.site-header__menu .menu-item>a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	transition: color 0.2s ease;
	white-space: nowrap;
}

.site-header__menu .menu-item>a:hover,
.site-header__menu .current-menu-item>a,
.site-header__menu .current-page-ancestor>a {
	color: #fff;
}

/* Hamburger toggle — shown at all widths */
#desktop-nav {
	display: none;
}

.nav-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	gap: 7px;
	width: 36px;
	height: 36px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}

.nav-toggle__bar {
	display: block;
	height: 1.5px;
	background: #fff;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	transform-origin: center;
}

/* Two bars, the lower one shorter — reads as a mark rather than a stack */
.nav-toggle__bar:nth-child(1) { width: 26px; }
.nav-toggle__bar:nth-child(2) { width: 17px; }

.nav-toggle.is-active .nav-toggle__bar {
	width: 24px;
}

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

.nav-toggle.is-active .nav-toggle__bar:nth-child(2) {
	transform: translateY(-4.25px) rotate(-45deg);
}

/* ---- Mobile menu overlay ---- */

@keyframes menuItemIn {
	from {
		opacity: 0;
		transform: translate(28px, 10px);
	}
	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}

/* The menu panel slides in from off-screen right; while mid-transition it
   extends past the viewport edge and triggers a horizontal scrollbar flicker.
   Clip horizontal overflow at the root so it can never appear. */
html {
	overflow-x: clip;
}

.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 300;
	background: #19242C;
	display: flex;
	flex-direction: column;
	padding: 0 1.5rem 2rem;
	opacity: 0;
	visibility: hidden;
	transform: translateX(100%);
	transition: opacity 0.5s ease, transform 0.85s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.85s;
	overflow-y: auto;
	overflow-x: hidden;
	will-change: transform;
}

.mobile-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
	transition: opacity 0.35s ease, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-height);
	flex-shrink: 0;
}

.mobile-menu__close {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	padding: 0.25rem;
	line-height: 0;
	transition: color 0.2s ease;
}

.mobile-menu__close:hover {
	color: #fff;
}

.mobile-menu__nav {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 2rem 0;
}

/* Numbered list with stagger animation */
.mobile-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	counter-reset: menu-counter;
}

.mobile-menu__list > .menu-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	opacity: 0;
}

.mobile-menu.is-open .mobile-menu__list > .menu-item {
	animation: menuItemIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.mobile-menu.is-open .mobile-menu__list > .menu-item:nth-child(1) { animation-delay: 0.42s; }
.mobile-menu.is-open .mobile-menu__list > .menu-item:nth-child(2) { animation-delay: 0.52s; }
.mobile-menu.is-open .mobile-menu__list > .menu-item:nth-child(3) { animation-delay: 0.62s; }
.mobile-menu.is-open .mobile-menu__list > .menu-item:nth-child(4) { animation-delay: 0.72s; }
.mobile-menu.is-open .mobile-menu__list > .menu-item:nth-child(5) { animation-delay: 0.82s; }
.mobile-menu.is-open .mobile-menu__list > .menu-item:nth-child(6) { animation-delay: 0.92s; }
.mobile-menu.is-open .mobile-menu__list > .menu-item:nth-child(n+7) { animation-delay: 1.02s; }

.mobile-menu__list > .menu-item > a {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding: 0.9rem 0;
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	font-family: 'Nord', sans-serif;
	font-size: clamp(1.35rem, 5vw, 1.65rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 3px;
	transition: color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu__list > .menu-item > a::before {
	counter-increment: menu-counter;
	content: counter(menu-counter, decimal-leading-zero);
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.6rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.22);
	flex-shrink: 0;
	align-self: center;
	text-transform: none;
}

.mobile-menu__list > .menu-item > a:hover {
	color: #fff;
}

/* Submenu */
.mobile-menu__list .sub-menu {
	list-style: none;
	padding: 0 0 0.75rem 2.25rem;
	margin: 0;
}

.mobile-menu__list .sub-menu .menu-item > a {
	display: block;
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.4rem 0;
	color: rgba(255, 255, 255, 0.4);
	transition: color 0.2s ease;
}

.mobile-menu__list .sub-menu .menu-item > a:hover {
	color: rgba(255, 255, 255, 0.8);
}

/* Footer */
.mobile-menu__footer {
	flex-shrink: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 1.5rem;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
}

.mobile-menu__contact-details {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.mobile-menu__contact-item {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.mobile-menu__contact-item:hover {
	opacity: 1;
}

.mobile-menu__contact-label {
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.3);
	margin-bottom: 0.15rem;
}

.mobile-menu__contact-value {
	font-size: 0.875rem;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.65);
	transition: color 0.2s ease;
}

.mobile-menu__contact-item:hover .mobile-menu__contact-value {
	color: #fff;
}

.mobile-menu__social {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: flex-end;
}

.mobile-menu__social a {
	color: rgba(255, 255, 255, 0.4);
	line-height: 0;
	transition: color 0.2s ease;
}

.mobile-menu__social a:hover {
	color: #fff;
}

/* ---- Main ---- */

#main {
	padding-top: 0;
	margin-top: 0;
}

/* Responsive */
@media (max-width: 991.98px) {
	.site-header__logo-col {
		padding-left: 1.5rem;
		width: auto;
		flex: 1;
		min-width: 0;
	}

	.site-header__logo-img {
		width: 160px;
		height: auto;
	}

	.site-header__nav-col {
		width: auto;
		padding-right: 1.5rem;
		padding-left: 1rem;
		flex-shrink: 0;
	}
}

/* ---- Footer ---- */

#footer {
	background-color: #19242C;
	color: rgba(var(--ad-sand-rgb), 0.7);
}

.footer-col-heading {
	font-family: 'Nord', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--ad-sand);
	margin-bottom: 1.25rem;
}

.footer-nav {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-nav li {
	margin-bottom: 0.6rem;
}

.footer-nav a,
.footer-contact-list a {
	font-family: 'Satoshi', system-ui, sans-serif;
	color: rgba(var(--ad-sand-rgb), 0.65);
	text-decoration: none;
	font-size: 0.875rem;
	transition: color 0.2s ease;
}

.footer-nav a:hover,
.footer-contact-list a:hover {
	color: var(--ad-sand);
}

.footer-nav .current-menu-item a {
	color: var(--ad-sand);
}

.footer-contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.875rem;
}

.footer-contact-list li {
	margin-bottom: 0.5rem;
	color: rgba(var(--ad-sand-rgb), 0.65);
}

.footer-social {
	display: flex;
	gap: 0.875rem;
	align-items: center;
}

.footer-social__link {
	color: rgba(var(--ad-sand-rgb), 0.6);
	transition: color 0.2s ease;
	line-height: 0;
}

.footer-social__link:hover {
	color: var(--ad-sand);
}

.footer-form .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.footer-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* Two-column row: first name + last name side by side */
.footer-form .wpcf7-form .footer-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

.footer-form .form-control,
.footer-form .wpcf7-form-control:not(.wpcf7-submit) {
	display: block;
	width: 100%;
	background-color: transparent;
	border: 1px solid rgba(var(--ad-sand-rgb), 0.25);
	color: var(--ad-sand);
	font-size: 0.8rem;
	border-radius: 0;
	padding: 0.6rem 0.75rem;
	outline: none;
	transition: border-color 0.2s ease;
	font-family: inherit;
}

.footer-form .form-control::placeholder,
.footer-form .wpcf7-form-control:not(.wpcf7-submit)::placeholder {
	color: rgba(var(--ad-sand-rgb), 0.4);
}

.footer-form .form-control:focus,
.footer-form .wpcf7-form-control:not(.wpcf7-submit):focus {
	background-color: transparent;
	border-color: rgba(var(--ad-sand-rgb), 0.5);
	box-shadow: none;
	color: var(--ad-sand);
}

.footer-form__btn,
.footer-form .wpcf7-submit {
	display: inline-block;
	background: transparent;
	border: 1px solid rgba(var(--ad-sand-rgb), 0.5);
	color: var(--ad-sand);
	font-family: 'Nord', sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	border-radius: 100px;
	padding: 0.6rem 1.6rem;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	margin-top: 0.25rem;
}

.footer-form__btn:hover,
.footer-form .wpcf7-submit:hover {
	background-color: rgba(var(--ad-sand-rgb), 0.1);
	border-color: var(--ad-sand);
	color: var(--ad-sand);
}

/* CF7 validation error */
.footer-form .wpcf7-not-valid {
	border-color: rgba(220, 100, 80, 0.6) !important;
}

.footer-form .wpcf7-not-valid-tip {
	color: rgba(220, 100, 80, 0.85);
	font-size: 0.7rem;
	margin-top: 0.2rem;
	display: block;
}

/* CF7 response message */
.footer-form .wpcf7-response-output {
	margin: 0.75rem 0 0;
	padding: 0.5rem 0.75rem;
	border: none;
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	color: rgba(var(--ad-sand-rgb), 0.75);
	border-left: 2px solid rgba(var(--ad-sand-rgb), 0.3);
}

.footer-bottom,
#footer .footer-bottom.bg-blue,
#footer .footer-bottom.bg-dark {
	background-color: #19242C !important;
}

.footer-logo {
	display: inline-block;
	width: 100%;
	max-width: 352px;
}

.footer-logo img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0.9;
}

.footer-copy {
	font-size: 0.78rem;
	color: rgba(var(--ad-sand-rgb), 0.45);
}

.footer-credit {
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(var(--ad-sand-rgb), 0.4);
	line-height: 1.6;
}

.footer-credit__link {
	display: block;
}

.footer-credit__logo {
	display: block;
	width: 100%;
	max-width: 130px;
	height: auto;
	margin: 0.45rem auto 0;
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

.footer-credit__link:hover .footer-credit__logo {
	opacity: 1;
}

@media (min-width: 768px) {
	.footer-credit__logo {
		margin-right: 0;
	}
}

.footer-credit__name {
	color: rgba(var(--ad-sand-rgb), 0.7);
	text-decoration: none;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
}

.footer-credit__name:hover {
	color: var(--ad-sand);
}

/* ---- Sidebar ---- */

.widget-area ul {
	list-style: none;
	padding: 0;
}

/* ---- Author ---- */

.author-avatar .avatar {
	width: 64px;
	height: auto;
}

.author-info {
	margin: 40px 0;
}

.author-info h2,
.author-info h3 {
	margin-top: 0;
}

/* ---- Posts ---- */

.sticky .card {
	background-color: #f8f9fa;
}

.entry-meta {
	font-size: small;
	margin-top: 0.75rem;
}

#comments {
	margin-top: 1.5rem;
}

.comment-meta {
	height: 40px;
}

.comment-reply-title {
	margin: 1.5rem 0 0.75rem;
}

.commentlist {
	list-style: none;
	margin: 0 auto;
	width: 68.9%;
}

.commentlist>li.comment {
	margin: 0 0 1.625em;
	padding: 1.625em;
	position: relative;
}

.commentlist .children {
	list-style: none;
	margin-top: 1.5rem;
}

.commentlist .children>li.comment {
	border-top: 1px solid #dee2e6;
	padding-top: 1.5rem;
	position: relative;
}

.commentlist .avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	box-shadow: 0 1px 2px #6c757d;
	padding: 0;
	position: absolute;
	top: 0;
	left: -102px;
}

/* ---- WordPress block: Button ---- */

.wp-block-button .wp-block-button__link {
	display: inline-block;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid var(--ad-green);
	border-radius: 0.375rem;
	background-color: var(--ad-green);
	color: #fff;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--ad-green);
}

.wp-block-button.btn-lg .wp-block-button__link {
	padding: 0.5rem 1rem;
	font-size: 1.25rem;
	border-radius: 0.5rem;
}

.wp-block-button.btn-sm .wp-block-button__link {
	padding: 0.25rem 0.5rem;
	font-size: 0.875rem;
	border-radius: 0.25rem;
}

/* ---- WordPress block: Table ---- */

.wp-block-table table {
	width: 100%;
}

.wp-block-table td,
.wp-block-table th {
	border: inherit;
	padding: 0.5rem;
}

/* ---- WordPress block: Image / Media-Text ---- */

.wp-block-image img,
.wp-block-image video,
.wp-block-media-text__media img,
.wp-block-media-text__media video {
	height: auto;
}

/* =============================================
   HERO BLOCK
   ============================================= */

.hero-block {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

/* Optional looping background video — sits behind overlay, graphic and content */
.hero-block .hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}

/* Respect reduced-motion: fall back to the poster/background image */
@media (prefers-reduced-motion: reduce) {
	.hero-block .hero-video {
		display: none;
	}
}

.hero-row-height {
	min-height: 100vh;
}

.hero-block .hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(var(--ad-dark-rgb), 0.55);
}

.hero-block .hero-content {
	position: relative;
	z-index: 1;
}

.hero-block .hero-graphic {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(-50%, -50%);
	height: 70%;
	width: auto;
	z-index: 2;
	pointer-events: none;
}

.hero-block .hero-content {
	z-index: 3;
}

.hero-block .hero-heading,
.hero-block .hero-heading-2 {
	font-family: 'Nord', sans-serif;
	/* Scales with the column so each line stays on one line (two lines total) */
	font-size: clamp(1.3rem, 1.75vw, 2rem);
	white-space: nowrap;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.02;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 4px;
	margin-bottom: 0;
}

/* Second line follows immediately — they read as one heading */
.hero-block .hero-heading + .hero-heading-2 {
	margin-top: 0;
}

.hero-block .hero-headings {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hero-block .hero-categories {
	padding-bottom: 80px;
	padding-right: 3rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
}
.hero-block .hero-buttons {
	padding-bottom: 70px;
	display: flex;
	width: 100%;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
}

.hero-block .hero-categories div {
	flex: 0 0 auto;
	white-space: nowrap;
	text-align: left;
	font-family: 'Nord', sans-serif;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.1;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 4px;
}

.hero-block .hero-buttons div {
	flex: 1;
	text-align: center;
}

.hero-block .hero-body {
	color: rgba(255, 255, 255, 0.75);
	max-width: 420px;
}

.hero-block .hero-accent img {
	max-width: 160px;
	opacity: 0.9;
}

.hero-block .hero-btn {
	text-transform: uppercase;
	font-size: 0.8rem;
}

/* =============================================
   INTRO COLLAGE BLOCK
   ============================================= */

.ic-block {
	background: #E7E8E9;
	overflow: hidden;
	padding-bottom: clamp(70px, 9vw, 140px);
	font-family: 'Satoshi', system-ui, sans-serif;
}

.ic-block__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: clamp(16px, 2.5vw, 40px);
}

.ic-block__image {
	position: relative;
	overflow: hidden;
}

.ic-block__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ic-block__image--left {
	grid-column: 1 / span 5;
	grid-row: 1;
	aspect-ratio: 4 / 5;
	margin-top: clamp(70px, 9vw, 140px);
}

.ic-block__image--right {
	grid-column: 7 / span 5;
	grid-row: 1 / span 2;
	align-self: start;
	aspect-ratio: 3 / 4;
	margin-top: clamp(190px, 27vw, 420px);
}

.ic-block__image-label {
	position: absolute;
	left: 26px;
	bottom: 24px;
	font-family: 'Nord', sans-serif;
	font-size: 15px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

.ic-block__image--left .ic-block__image-label {
	left: clamp(24px, 4vw, 56px);
}

.ic-block__copy {
	grid-column: 2 / span 4;
	grid-row: 2;
	margin-top: clamp(60px, 8vw, 130px);
}

.ic-block__label {
	font-family: 'Nord', sans-serif;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(37, 39, 38, 0.45);
	margin-bottom: 18px;
}

.ic-block__heading {
	font-family: 'Ivy', Georgia, serif;
	font-weight: 400;
	font-size: clamp(24px, 2.6vw, 34px);
	line-height: 1.25;
	color: #252726;
	margin: 0 0 22px;
	text-wrap: pretty;
}

.ic-block__body {
	font-size: 15.5px;
	line-height: 1.8;
	color: rgba(37, 39, 38, 0.75);
	text-wrap: pretty;
	margin-bottom: 26px;
}

.ic-block__body p {
	margin: 0 0 1em;
}

.ic-block__body p:last-child {
	margin-bottom: 0;
}

.ic-block__link {
	font-family: 'Nord', sans-serif;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: #252726;
	border-bottom: 1px solid rgba(37, 39, 38, 0.5);
	padding-bottom: 5px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.ic-block__link:hover {
	color: #B68B4B;
	border-bottom-color: #B68B4B;
}

@media (max-width: 991.98px) {
	.ic-block__image--left {
		grid-column: 1 / -1;
		aspect-ratio: 4 / 3;
	}

	.ic-block__image--right {
		grid-column: 3 / -1;
		grid-row: 3;
		margin-top: clamp(48px, 8vw, 80px);
	}

	.ic-block__copy {
		grid-column: 2 / span 10;
		grid-row: 2;
		margin-top: 48px;
	}
}

/* =============================================
   TEXT WITH IMAGE BLOCK
   ============================================= */

.twi-block {
	background-color: var(--ad-dark);
}

.twi-block__image-col {
	min-height: 400px;
}

.twi-block__image {
	width: 100%;
	height: 100%;
	padding: 40px;
}

.twi-block__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.twi-block__image--offset img {
	transform: translateY(80px);
}

.twi-block__text-col {
	padding: 4rem 2rem;
}

.twi-block__text-inner {
	max-width: 480px;
}

.twi-block__label {
	color: rgba(var(--ad-sand-rgb), 0.55);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	margin-bottom: 1rem;
	font-family: 'Nord', sans-serif;
}

.twi-block__heading {
	font-size: clamp(1.25rem, 2.5vw, 2rem);
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.15;
}

.twi-block__body {
	font-size: 1.0rem;
	line-height: 1.75;
	font-family: var(--bs-body-font-family);
}

@media (min-width: 992px) {
	.twi-block__text-col {
		padding: 5rem 4rem;
	}

	.flex-row-reverse .twi-block__text-col {
		padding-left: 2rem;
		padding-right: 4rem;
	}
}

/* =============================================
   SERVICES GRID BLOCK
   ============================================= */

.services-block {
	background-color: #19242C;
	border-bottom: 1px solid #19242C;
}

.services-block__heading {
	color: var(--ad-sand);
	letter-spacing: 0.06em;
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	margin-bottom: 0;
}

.services-block__text {
	color: var(--ad-light);
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.95rem;
	line-height: 1.6;
	letter-spacing: 0.01em;
	max-width: 62ch;
	padding-top: 0.75rem;
}

.service-card {
	height: 100%;
}

.service-card__image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.service-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.service-card:hover .service-card__image img {
	transform: scale(1.05);
}

.service-card__body {
	padding: 1.25rem 0;
}

.service-card__title {
	color: var(--ad-light);
	font-size: clamp(1.1rem, 1.5vw, 1.35rem);
	letter-spacing: 0.08em;
	margin-bottom: 0.75rem;
}

.service-card__desc {
	font-family: 'Satoshi', system-ui, sans-serif;
	color: var(--ad-light);
	font-size: 0.9rem;
	line-height: 1.6;
}

.service-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.75rem;
	color: var(--ad-green);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-decoration: none;
	transition: color 0.2s ease;
}

.service-card__link:hover {
	color: color-mix(in srgb, var(--ad-green) 85%, black);
}

/* =============================================
   PROJECTS SLIDER BLOCK
   ============================================= */

.projects-block {
	background-color: var(--ad-dark);
	overflow-x: clip;
}

/* Slider runs off both edges so it's obvious there's more to see,
   with padding keeping the first slide aligned to the heading */
.projects-block .projects-swiper {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: max(var(--page-gutter), calc((100vw - 1320px) / 2 + var(--page-gutter)));
}

/* Longer, softer glide than Swiper's default ease */
.projects-block .projects-swiper .swiper-wrapper {
	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.projects-block__label,
.services-block__label,
.logos-block__label {
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(var(--ad-sand-rgb), 0.45);
	margin-bottom: 0.75rem;
	font-family: 'Nord', sans-serif;
}

.projects-block__heading {
	color: var(--ad-sand);
	letter-spacing: 0.06em;
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	margin-bottom: 0;
}

.projects-block__text {
	color: var(--ad-light);
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.95rem;
	line-height: 1.6;
	letter-spacing: 0.01em;
	max-width: 62ch;
	padding-top: 0.75rem;
}

.projects-block__actions {
	display: flex;
	align-items: center;
	gap: 2rem;
	flex-shrink: 0;
}

/* Sit the button and arrows on the baseline of the heading stack
   rather than floating in its vertical centre */
.projects-block .row.mb-4 > .col {
	align-items: flex-end !important;
}

/* Breathing room between the header row and the cards */
.projects-block .row.mb-4 {
	margin-bottom: 3.25rem !important;
}

@media (max-width: 767.98px) {
	.projects-block .row.mb-4 {
		margin-bottom: 2rem !important;
	}
}

.projects-block__cta {
	white-space: nowrap;
}

.projects-block__nav,
.services-block__nav {
	display: flex;
	gap: 0.5rem;
}

@media (max-width: 767.98px) {
	.projects-block .row.mb-4 > .col {
		flex-wrap: wrap;
		gap: 1.5rem;
	}

	.projects-block__actions {
		width: 100%;
		justify-content: space-between;
		gap: 1rem;
	}
}

.projects-block__btn,
.services-block__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 0.25rem;
	line-height: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.projects-block__btn:hover,
.services-block__btn:hover {
	opacity: 0.65;
}

.projects-block__btn.swiper-button-disabled,
.services-block__btn.swiper-button-disabled {
	opacity: 0.2;
	cursor: default;
}

.project-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.project-card__image {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.project-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.project-card:hover .project-card__image img {
	transform: scale(1.05);
}

.project-card__body {
	padding: 1.25rem 0;
}

.project-card__location {
	display: block;
	color: rgba(var(--ad-sand-rgb), 0.6);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	margin-bottom: 0.4rem;
}

.project-card__title {
	color: var(--ad-sand);
	font-family: 'Nord', sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.project-card__desc {
	color: rgba(var(--ad-sand-rgb), 0.6);
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.875rem;
	line-height: 1.6;
	margin-bottom: 0;
}

/* =============================================
   FEATURE CTA BLOCK
   ============================================= */

.feature-cta-block {
	position: relative;
	min-height: 70vh;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.feature-cta-block .feature-cta-overlay {
	position: absolute;
	inset: 0;
	background: rgba(var(--ad-dark-rgb), 0.4);
}

.feature-cta-block .feature-cta-content {
	position: relative;
	z-index: 1;
	padding-bottom: 3.5rem;
}

.feature-cta-block .feature-cta-label {
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 0.75rem;
}

.feature-cta-block .feature-cta-heading {
	color: #fff;
	font-size: clamp(1.5rem, 4vw, 2.05rem);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.1;
	margin-bottom: 1rem;
}

.feature-cta-block .feature-cta-body {
	color: rgba(255, 255, 255, 1);
	font-size: 0.95rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

.feature-cta-block .feature-cta-btn {
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.8rem;
}

/* =============================================
   HERO INNER BLOCK
   ============================================= */

.hero-inner-block {
	position: relative;
	min-height: 90vh;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* Background on its own layer so it can fade in once loaded */
.hero-inner-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 1s ease, transform 1.6s ease;
}

.hero-inner-block.is-loaded .hero-inner-bg {
	opacity: 1;
	transform: scale(1);
}

.hero-inner-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, #1d2a29 0%, rgba(29, 42, 41, 0.5) 40%, rgba(29, 42, 41, 0.5) 100%);
}

.hero-inner-content {
	position: relative;
	z-index: 1;
	/* Match the header logo's left edge at every viewport width */
	max-width: none;
	width: 100%;
	padding-left: max(var(--page-gutter), calc((100vw - 1320px) / 2 + var(--page-gutter)));
	padding-right: max(var(--page-gutter), calc((100vw - 1320px) / 2 + var(--page-gutter)));
}

/* Optional watermark: bleeds off the bottom-left, behind the copy.
   Sits in the empty quadrant so it doesn't compete with the link list. */
.hero-inner-block--mark::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: min(52vw, 620px);
	aspect-ratio: 1 / 1;
	transform: translate(-26%, 34%);
	background: url('A-Graphic-Light.svg') no-repeat center / contain;
	opacity: 0;
	z-index: 0;
	pointer-events: none;
	transition: opacity 1.6s ease 0.6s;
}

.hero-inner-block--mark.is-loaded::after {
	opacity: 0.1;
}

@media (max-width: 991.98px) {
	.hero-inner-block--mark::after {
		width: min(78vw, 420px);
		transform: translate(-32%, 30%);
	}

	.hero-inner-block--mark.is-loaded::after {
		opacity: 0.08;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-inner-block--mark::after {
		transition: none;
	}
}

/* Two columns once there's a service index to balance the copy */
.hero-inner-col--aside {
	min-width: 0;
}

@media (max-width: 991.98px) {
	.hero-inner-content--split .hero-inner-col--aside {
		margin-top: 0.5rem;
	}
}

@media (min-width: 992px) {
	.hero-inner-content--split {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
		column-gap: clamp(3rem, 5vw, 5.5rem);
		/* Top aligned so the eyebrow and the first link share a line —
		   centring left the two columns with no common edge */
		align-items: start;
	}

	.hero-inner-content--split .hero-inner-body {
		max-width: 440px;
	}

	/* Nudge the list down so its first rule sits on the eyebrow's baseline
	   rather than above it */
	.hero-inner-content--split .hero-inner-col--aside {
		padding-top: 0.35rem;
	}

	.hero-inner-content--split .hero-inner-links {
		margin-top: 0;
		max-width: none;
	}

	/* Split hero carries more content, so it needs less empty height
	   around it than a heading-only hero does */
	.hero-inner-block:has(.hero-inner-content--split) {
		min-height: 80vh;
	}
}

/* Staggered reveal, triggered once the background has loaded */
.hero-inner-content .hero-inner-label,
.hero-inner-content .hero-inner-heading,
.hero-inner-content .hero-inner-body,
.hero-inner-content .hero-inner-links,
.hero-inner-content .hero-inner-buttons {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.hero-inner-block.is-loaded .hero-inner-label,
.hero-inner-block.is-loaded .hero-inner-heading,
.hero-inner-block.is-loaded .hero-inner-body,
.hero-inner-block.is-loaded .hero-inner-links,
.hero-inner-block.is-loaded .hero-inner-buttons {
	opacity: 1;
	transform: translateY(0);
}

.hero-inner-block.is-loaded .hero-inner-label { transition-delay: 0.1s; }
.hero-inner-block.is-loaded .hero-inner-heading { transition-delay: 0.2s; }
.hero-inner-block.is-loaded .hero-inner-heading-2 { transition-delay: 0.3s; }
.hero-inner-block.is-loaded .hero-inner-body { transition-delay: 0.45s; }
.hero-inner-block.is-loaded .hero-inner-links { transition-delay: 0.55s; }
.hero-inner-block.is-loaded .hero-inner-buttons { transition-delay: 0.7s; }

@media (prefers-reduced-motion: reduce) {
	.hero-inner-bg,
	.hero-inner-content .hero-inner-label,
	.hero-inner-content .hero-inner-heading,
	.hero-inner-content .hero-inner-body,
	.hero-inner-content .hero-inner-links,
	.hero-inner-content .hero-inner-buttons {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.hero-inner-label {
	font-family: 'Nord', sans-serif;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 1rem;
}

.hero-inner-heading {
	font-family: 'Nord', sans-serif;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.02;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-bottom: 0;
}

.hero-inner-body {
	font-family: 'Satoshi', system-ui, sans-serif;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.95rem;
	line-height: 1.7;
	max-width: 520px;
	margin-top: 1.25rem;
	margin-bottom: 0;
}

/* Hero service index — a list of links, not a wall of buttons */
.hero-inner-links {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	max-width: 480px;
}

.hero-inner-links__item {
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.hero-inner-links__item:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.hero-inner-links__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1rem 0;
	text-decoration: none;
	color: #fff;
	transition: padding-left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-inner-links__link:hover,
.hero-inner-links__link:focus-visible {
	color: #fff;
	padding-left: 0.75rem;
}

.hero-inner-links__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.hero-inner-links__name {
	font-family: 'Nord', sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	line-height: 1.2;
}

.hero-inner-links__note {
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.6);
}

.hero-inner-links__arrow {
	flex-shrink: 0;
	display: inline-flex;
	color: rgba(255, 255, 255, 0.55);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease;
}

.hero-inner-links__link:hover .hero-inner-links__arrow,
.hero-inner-links__link:focus-visible .hero-inner-links__arrow {
	transform: translateX(6px);
	color: #fff;
}

@media (max-width: 575.98px) {
	.hero-inner-links {
		margin-top: 1.5rem;
	}

	.hero-inner-links__name {
		font-size: 0.78rem;
		letter-spacing: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-inner-links__link,
	.hero-inner-links__arrow {
		transition: none;
	}
}

.hero-inner-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.hero-inner-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-color: rgba(255, 255, 255, 0.5);
	padding: 0.5rem 1.1rem;
}

/* =============================================
   CONTACTS BLOCK
   ============================================= */

.contacts-block {
	position: relative;
	min-height: 100vh;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.contacts-overlay {
	position: absolute;
	inset: 0;
}

.contacts-graphic {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 70%;
	width: auto;
	z-index: 1;
	pointer-events: none;
}

.contacts-content {
	position: relative;
	z-index: 2;
}

/* Desktop: full-viewport height row */
.contacts-row {
	min-height: 100vh;
}

@media (max-width: 991.98px) {
	/* Full-bleed image with the details over it, matching the home hero */
	.contacts-block {
		position: relative;
		display: flex;
		align-items: flex-end;
		min-height: 100vh;
		min-height: 100svh;
		/* clip rather than hidden: crops the bleeding mark horizontally
		   without cutting content that runs past the viewport */
		overflow-x: clip;
		overflow-y: visible;
		background-image: none !important;
		background-color: var(--ad-dark) !important;
	}

	/* Panel grows with its content instead of being pinned to the fold */
	.contacts-content {
		padding-bottom: 0;
	}

	/* The dark field is the content block itself, so it always fits
	   whatever the details run to — no fixed height to overflow */
	.contacts-content {
		position: relative;
		z-index: 3;
		width: 100%;
		background: var(--ad-dark);
		padding-top: 1.7rem;
	}

	/* Large mark on the left, cut by the screen edge */
	.contacts-block .hero-mobile-graphic {
		top: 34%;
		left: 0;
		right: auto;
		height: auto;
		width: min(96vw, 420px);
		max-width: none;
		transform: translate(-38%, -50%);
	}

	/* Light scrim over the photo above the panel */
	.contacts-block::after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(
			to bottom,
			rgba(var(--ad-dark-rgb), 0.5) 0%,
			rgba(var(--ad-dark-rgb), 0.12) 30%,
			rgba(var(--ad-dark-rgb), 0.12) 72%,
			rgba(var(--ad-dark-rgb), 0.35) 100%
		);
	}


	.contacts-row {
		min-height: auto;
	}

	/* Panel provides the dark field, so the column stays transparent.
	   padding-top here is the real control for space below the header
	   (it outranks .contacts-panel-col rules) */
	.contacts-content .col-lg-6.bg-dark {
		background: transparent !important;
		padding-top: 3.5rem;
		padding-bottom: 2.6rem;
	}

	/* Heading now carries the page title (CONTACT) — keep it visible on mobile */
	.contacts-headings {
		display: block;
		padding: 1.5rem 0 0;
	}

	/* No panel wipe on mobile, so the details shouldn't wait for one.
	   The 3s delay is desktop choreography — here it just reads as broken. */
	.contacts-block.is-loaded .contacts-headings {
		transition-delay: 0.35s;
	}

	.contacts-block.is-loaded .contacts-footer {
		transition-delay: 0.5s;
	}

	.contacts-footer {
		padding: 0;
	}

	.contacts-divider {
		margin: 1.25rem 0;
	}

	.contacts-detail {
		font-size: 0.85rem;
	}

	.contacts-social-label {
		margin-bottom: 0.6rem;
	}
}

.contacts-headings {
	padding: 1rem 2rem;
}

.contacts-footer {
	padding: 0 2rem 1.5rem;
}

.contacts-heading {
	font-family: 'Nord', sans-serif;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-bottom: 0;
}

.contacts-divider {
	border-color: rgba(255, 255, 255, 0.15);
	margin: 2rem 0;
}

.contacts-details {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.contacts-detail {
	color: rgba(255, 255, 255, 0.75);
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.9rem;
	letter-spacing: 0.03em;
	text-decoration: none;
	display: block;
}

a.contacts-detail:hover {
	color: #fff;
}

.contacts-social-label {
	color: rgba(255, 255, 255, 0.4);
	font-family: 'Nord', sans-serif;
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	margin-bottom: 1rem;
}

.contacts-social {
	display: flex;
	gap: 1.25rem;
	align-items: center;
}

.contacts-social__link {
	color: rgba(255, 255, 255, 0.7);
	transition: color 0.2s ease;
	line-height: 0;
}

.contacts-social__link:hover {
	color: #fff;
}

/* Float header over inner hero — set by JS body class */
.has-inner-hero #main {
	padding-top: 0;
}

.has-inner-hero #site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.admin-bar.has-inner-hero #site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* =============================================
   TESTIMONIALS SLIDER BLOCK
   ============================================= */

.testimonials-block {
	background-color: var(--ad-dark);
}

.testimonials-block__heading {
	color: var(--ad-sand);
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	letter-spacing: 0.06em;
	margin-bottom: 0.5rem;
}

.testimonials-block__subheading {
	color: rgba(var(--ad-sand-rgb), 0.6);
	font-size: 0.9rem;
	line-height: 1.6;
	max-width: 480px;
	margin-bottom: 0;
}

.testimonials-block__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 0.25rem;
	line-height: 0;
	transition: opacity 0.2s ease;
}

.testimonials-block__btn:hover {
	opacity: 0.65;
}

.testimonials-block__btn.swiper-button-disabled {
	opacity: 0.2;
	cursor: default;
}

.testimonials-block__label {
	font-family: 'Nord', sans-serif;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(var(--ad-sand-rgb), 0.45);
	margin-bottom: 0.75rem;
}

.block--text-dark .testimonials-block__label {
	color: rgba(var(--ad-dark-rgb), 0.45);
}

.testimonials-block__slide {
	max-width: 820px;
	margin: 0;
	padding: 1rem 0 2.5rem;
}

/* Optional short pull-line above the quote */
.testimonials-block__headline {
	font-family: 'Nord', sans-serif;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(var(--ad-sand-rgb), 0.45);
	margin-bottom: 1.25rem;
}

/* Body font at a readable size — the serif was handsome but hard work
   at length, and quotes run longer than headings */
.testimonials-block__quote {
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: clamp(1rem, 1.35vw, 1.2rem);
	line-height: 1.7;
	color: rgba(var(--ad-sand-rgb), 0.9);
	margin: 0 0 2rem;
	max-width: 62ch;
	text-wrap: pretty;
}

.testimonials-block__quote::before {
	content: '\201C';
	margin-right: 0.1em;
}

.testimonials-block__quote::after {
	content: '\201D';
}

.testimonials-block__attrib {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.testimonials-block__attrib-text {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.testimonials-block__name {
	font-family: 'Nord', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--ad-sand);
}

.testimonials-block__meta {
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.8rem;
	color: rgba(var(--ad-sand-rgb), 0.5);
}

/* Attribution line sits left of a hairline for a bit of structure */
.testimonials-block__attrib::before {
	content: '';
	width: 32px;
	height: 1px;
	background: rgba(var(--ad-sand-rgb), 0.35);
	flex-shrink: 0;
}

@media (max-width: 575.98px) {
	.testimonials-block__attrib::before {
		display: none;
	}
}

/* =============================================
   LOGOS GRID BLOCK
   ============================================= */

.logos-block {
	background-color: var(--ad-sand);
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

/* When the preceding section shares a light background the two merge into
   one field, so a hairline gives the partners section its own top edge */
.twi-block--bg-sand + .logos-block,
.twi-block--bg-light + .logos-block,
.twi-block--bg-white + .logos-block,
.block--bg-sand + .logos-block,
.block--bg-light + .logos-block,
.block--bg-white + .logos-block {
	border-top: 1px solid rgba(var(--ad-dark-rgb), 0.14);
}

/* Even, contained spacing — the row was inheriting none, so the only
   vertical rhythm came from the logo canvases themselves */
.logos-block__grid {
	--bs-gutter-y: 1.5rem;
	align-items: center;
}

.logos-block__heading {
	color: var(--ad-dark);
	font-size: clamp(1.25rem, 2.5vw, 2rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.15;
	margin-bottom: 1rem;
}

.logos-block__intro {
	color: rgba(var(--ad-dark-rgb), 0.7);
	font-size: 0.9rem;
	line-height: 1.7;
	margin-bottom: 0;
}

.logos-block__item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1rem;
}

/* The supplied logo files are pre-normalised on a common canvas, so sizing
   by height alone preserves their relative optical weight. Constraining
   max-width as well would undo it for the wider wordmarks. */
.logos-block__logo {
	height: 110px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	opacity: 1;
	transition: opacity 0.4s ease;
}

@media (max-width: 767.98px) {
	.logos-block__logo {
		height: 82px;
	}
}



/* This block is always on a sand background, so the light-text variants
   would render the copy invisible. Force dark regardless of the toggle. */
.logos-block .logos-block__label {
	color: rgba(var(--ad-dark-rgb), 0.45) !important;
}

.logos-block .logos-block__heading {
	color: var(--ad-dark) !important;
}

.logos-block .logos-block__intro {
	color: rgba(var(--ad-dark-rgb), 0.7) !important;
}

.logos-block__link {
	display: flex;
	align-items: center;
	justify-content: center;
}

.logos-block__name {
	color: rgba(var(--ad-dark-rgb), 0.45);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* =============================================
   TEXT WITH IMAGE — COLOUR VARIANTS
   ============================================= */

.twi-block--bg-dark {
	background-color: var(--ad-dark);
}

.twi-block--bg-sand {
	background-color: var(--ad-sand);
}

.twi-block--bg-light {
	background-color: #E7E8E9;
}

.twi-block--bg-green {
	background-color: var(--ad-green);
}

.twi-block--bg-white {
	background-color: #ffffff;
}

/* Light text (matches original defaults) */
.twi-block--text-light .twi-block__label {
	/* --ad-light is a hex value, so rgba(var(--ad-light), 1) was invalid
	   and the eyebrow fell back to inherited near-black on a dark panel */
	color: rgba(var(--ad-sand-rgb), 0.6);
}

.twi-block--text-light .twi-block__heading {
	color: var(--ad-sand);
}

.twi-block--text-light .twi-block__body {
	color: rgba(var(--ad-sand-rgb), 0.75);
}

/* Dark text */
.twi-block--text-dark .twi-block__label {
	color: rgba(var(--ad-dark-rgb), 0.5);
}

.twi-block--text-dark .twi-block__heading {
	color: var(--ad-dark);
}

.twi-block--text-dark .twi-block__body {
	color: rgba(var(--ad-dark-rgb), 1);
}

.twi-block--text-dark .btn-outline-dark {
	border-color: var(--ad-dark);
	color: var(--ad-dark);
}

.twi-block--text-dark .btn-outline-dark:hover {
	background-color: var(--ad-dark);
	color: #fff;
}

/* =============================================
   CPT SINGLE TEMPLATES (project / service)
   ============================================= */

.cpt-hero {
	position: relative;
	max-height: 88vh;
	overflow: hidden;
}

.cpt-hero__img {
	width: 100%;
	height: 88vh;
	object-fit: cover;
	display: block;
}

.cpt-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(var(--ad-dark-rgb), 0.55) 0%, rgba(var(--ad-dark-rgb), 0.25) 45%, transparent 75%);
	display: flex;
	align-items: center;
}

.cpt-hero__title {
	color: #fff;
	font-family: 'Nord', sans-serif;
	font-weight: 600;
	font-size: clamp(1.5rem, 3.2vw, 2.6rem);
	letter-spacing: 4px;
	text-transform: uppercase;
	line-height: 1.1;
	margin-bottom: 0.75rem;
}

.cpt-hero__meta {
	color: rgba(255, 255, 255, 0.8);
	font-family: 'Nord', sans-serif;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 4px;
	text-transform: uppercase;
	margin-bottom: 0;
}

@media (max-width: 575.98px) {
	.cpt-hero__title {
		letter-spacing: 2px;
	}

	.cpt-hero__meta {
		font-size: 0.7rem;
		letter-spacing: 2px;
	}
}

.cpt-single-body {
	padding: 0;
}

.cpt-single-body__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.cpt-term-badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background: var(--ad-sand);
	color: var(--ad-dark);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 20px;
	transition: background 0.2s ease;
}

.cpt-term-badge:hover {
	background: color-mix(in srgb, var(--ad-sand) 80%, black);
	color: var(--ad-dark);
}

/* =============================================
   SHARED BLOCK COLOUR MODIFIERS
   ============================================= */

.block--bg-dark {
	background-color: var(--ad-dark) !important;
}

.block--bg-sand {
	background-color: var(--ad-sand) !important;
}

.block--bg-light {
	background-color: var(--ad-light) !important;
}

.block--bg-green {
	background-color: var(--ad-green) !important;
}

.block--bg-white {
	background-color: #fff !important;
}

.block--bg-dark-green {
	background-color: #1d2a29 !important;
}

/* Light text — section headings */
.block--text-light .services-block__text,
.block--text-light .projects-block__text {
	color: var(--ad-light);
}

.block--text-light .projects-block__label,
.block--text-light .services-block__label,
.block--text-light .logos-block__label {
	color: rgba(var(--ad-sand-rgb), 0.45);
}

.block--text-light .services-block__heading,
.block--text-light .projects-block__heading,
.block--text-light .testimonials-block__heading,
.block--text-light .logos-block__heading {
	color: var(--ad-sand);
}

.block--text-light .testimonials-block__subheading,
.block--text-light .logos-block__intro {
	color: rgba(var(--ad-sand-rgb), 0.7);
}

/* Light text — card/slide content */
.block--text-light .project-card__title {
	color: var(--ad-sand);
}

.block--text-light .project-card__location,
.block--text-light .project-card__desc {
	color: rgba(var(--ad-sand-rgb), 0.6);
}

.block--text-light .service-card__title {
	color: var(--ad-light);
}

.block--text-light .service-card__desc {
	color: rgba(var(--ad-light-rgb), 0.8);
}

.block--text-light .testimonials-block__quote {
	color: rgba(var(--ad-sand-rgb), 0.8);
}

.block--text-light .testimonials-block__name {
	color: var(--ad-sand);
}

.block--text-light .testimonials-block__meta {
	color: rgba(var(--ad-sand-rgb), 0.45);
}

.block--text-light .logos-block__name {
	color: rgba(var(--ad-sand-rgb), 0.6);
}

/* Dark text — section headings */
.block--text-dark .services-block__text,
.block--text-dark .projects-block__text {
	color: var(--ad-dark);
}

.block--text-dark .projects-block__label,
.block--text-dark .services-block__label,
.block--text-dark .logos-block__label {
	color: rgba(var(--ad-dark-rgb), 0.45);
}

.block--text-dark .services-block__heading,
.block--text-dark .projects-block__heading,
.block--text-dark .testimonials-block__heading,
.block--text-dark .logos-block__heading {
	color: var(--ad-dark);
}

.block--text-dark .testimonials-block__subheading,
.block--text-dark .logos-block__intro {
	color: rgba(var(--ad-dark-rgb), 0.7);
}

/* Dark text — card/slide content */
.block--text-dark .project-card__title {
	color: var(--ad-dark);
}

.block--text-dark .project-card__location,
.block--text-dark .project-card__desc {
	color: rgba(var(--ad-dark-rgb), 0.6);
}

.block--text-dark .service-card__title {
	color: var(--ad-dark);
}

.block--text-dark .service-card__desc {
	color: rgba(var(--ad-dark-rgb), 0.7);
}

.block--text-dark .testimonials-block__quote {
	color: rgba(var(--ad-dark-rgb), 0.8);
}

.block--text-dark .testimonials-block__name {
	color: var(--ad-dark);
}

.block--text-dark .testimonials-block__meta {
	color: rgba(var(--ad-dark-rgb), 0.5);
}

.block--text-dark .logos-block__name {
	color: rgba(var(--ad-dark-rgb), 0.6);
}

/* Slider nav buttons */
.block--text-dark .projects-block__btn,
.block--text-dark .services-block__btn,
.block--text-dark .testimonials-block__btn {
	color: var(--ad-dark);
}

/* =============================================
   IMAGE DUO BLOCK
   ============================================= */

.image-duo-block {
	padding: 80px 0;
}

.image-duo-block__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

.image-duo-block__item {
	overflow: hidden;
	line-height: 0;
}

.image-duo-block__item img {
	width: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 575.98px) {
	.image-duo-block__grid {
		grid-template-columns: 1fr;
	}
}

/* =============================================
   FULL IMAGE BLOCK
   ============================================= */

.full-image-block {
    width: 100vw;
    max-width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	background-size: cover;
	background-position: center;
	line-height: 0;
}

.full-image-block__sizer {
	width: 100%;
	height: auto;
	display: block;
	visibility: hidden;
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 575.98px) {
	#sidebar {
		margin-top: 60px;
	}
}

/* =============================================
   HERO BLOCK — MOBILE
   ============================================= */

@media (max-width: 991.98px) {
	/* Full-bleed image hero: photography first, copy over the bottom */
	.hero-block {
		position: relative;
		display: flex;
		align-items: flex-end;
		min-height: 100vh;
		min-height: 100svh;
		overflow: hidden;
		background-image: none !important;
		background-color: var(--ad-dark) !important;
	}

	/* Soft scrim over the photo for legibility at the top */
	.hero-block::after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(
			to bottom,
			rgba(var(--ad-dark-rgb), 0.5) 0%,
			rgba(var(--ad-dark-rgb), 0.1) 30%,
			rgba(var(--ad-dark-rgb), 0.1) 55%,
			transparent 70%
		);
	}

	/* Solid panel, rising to the mark's centre line.
	   --panel-h drives both, so they can't drift apart. */
	.hero-block {
		--panel-h: max(30%, 230px);
	}

	.hero-block::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: var(--panel-h);
		z-index: 2;
		background: var(--ad-dark);
		clip-path: inset(100% 0 0 0);
		transition: clip-path 1.1s cubic-bezier(0.76, 0, 0.24, 1) 1.9s;
	}

	.hero-block.is-loaded::before {
		clip-path: inset(0);
	}

	.hero-content {
		position: relative;
		z-index: 3;
		width: 100%;
	}

	.hero-row-height {
		min-height: auto;
	}

	/* Columns lose their panels — ::before is the dark field now */
	.hero-block .hero-left-col.bg-dark,
	.hero-block .hero-right-col {
		background: transparent !important;
	}

	.hero-left-col {
		padding-top: 0;
		padding-bottom: 0;
	}

	.hero-right-col {
		padding-bottom: 2.6rem;
	}

	/* Slightly less above than below: uppercase type carries its own
	   leading at the top, so equal padding reads top-heavy */
	.hero-content {
		padding-top: 1.7rem;
	}

	/* Type: smaller, left aligned, tighter rhythm */
	.hero-block .hero-heading,
	.hero-block .hero-heading-2 {
		font-size: clamp(1.15rem, 5.2vw, 1.55rem);
		letter-spacing: 2px;
		line-height: 1.12;
		margin-bottom: 0;
	}

	.hero-block .hero-categories {
		justify-content: flex-start;
		gap: 1.5rem;
		padding-bottom: 1.5rem;
		padding-right: 0;
		padding-top: 1rem;
	}

	.hero-block .hero-categories div {
		font-size: 0.62rem;
		letter-spacing: 2px;
	}

	.hero-block .hero-buttons {
		padding-bottom: 0;
		margin-top: 0 !important;
		gap: 0.6rem;
	}

	.hero-block .hero-buttons div {
		flex: 0 1 auto;
	}

	.hero-block .hero-btn {
		font-size: 0.68rem;
		letter-spacing: 2px;
		padding: 0.55rem 1.1rem;
		gap: 0.9rem;
	}

	/* No panel behind the burger — it sits on the photo */
	.home .site-header__nav-col,
	.front-page .site-header__nav-col {
		background: transparent;
	}
}

/* Mobile-only image layer — full-bleed behind the hero copy */
.hero-mobile-image {
	position: absolute;
	inset: 0;
	z-index: 0;
	line-height: 0;
}

.hero-mobile-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Homepage mobile: half the A bleeding off the LEFT edge, vertically centred */
.hero-mobile-graphic {
	position: absolute;
	top: 38%;
	left: 0;
	transform: translate(-50%, -50%);
	height: 48%;
	max-width: none;
	width: auto;
	z-index: 1;
	pointer-events: none;
}

/* =============================================
   PROJECTS ARCHIVE — split-panel layout
   ============================================= */

/* Nav col transparent so project image shows through */
.post-type-archive-project .site-header__nav-col {
	background: transparent !important;
}

/* Mobile: no sidebar to align to, so the logo column drops its panel too
   — otherwise a dark box ends mid-header with the photo behind the burger */
@media (max-width: 991.98px) {
	.post-type-archive-project .site-header__logo-col {
		background: transparent;
	}
}

/* ---- Contact page: image bleeds to the top under a floating header ---- */

@media (min-width: 992px) {
	.has-contacts-hero #wrapper {
		padding-top: 0;
	}

	/* Logo sits over the photo; nav column stays transparent so the
	   dark panel behind it provides the colour once it has wiped in.
	   !important needed to beat the interior-pages nav rule. */
	body.has-contacts-hero .site-header__logo-col,
	body.has-contacts-hero .site-header__nav-col {
		background: transparent !important;
	}

	body.has-contacts-hero #site-header.is-pinned .site-header__logo-col,
	body.has-contacts-hero #site-header.is-pinned .site-header__nav-col {
		background: var(--ad-dark) !important;
	}
}

/* Strip Bootstrap container padding from #main */
.post-type-archive-project #main {
	padding: 0;
}

/* Two-panel wrapper */
.projects-archive {
	background: #19242C;
	min-height: 100vh;
}

.projects-archive__stage {
	display: flex;
	align-items: flex-start;
}

/* Desktop pinned mode (added by main.js): the page scrolls through a tall
   archive while the stage stays fixed and the feed slides via transform */
.projects-archive.is-pinned {
	height: calc(var(--count, 1) * 100vh);
}

.projects-archive.is-pinned .projects-archive__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}

.projects-archive.is-pinned .projects-archive__feed {
	will-change: transform;
	backface-visibility: hidden;
}

/* Oversized image so it can drift inside its frame (parallax, driven by main.js).
   Transitions off: JS sets the transform every frame */
.projects-archive.is-pinned .project-item__image {
	position: relative;
}

.projects-archive.is-pinned .project-item__image img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transition: none !important;
	will-change: transform;
	backface-visibility: hidden;
}

/* ---- Left sidebar ---- */

.projects-archive__sidebar {
	position: sticky;
	top: 0;
	width: 50%;
	height: 100vh;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	padding-left: max(var(--page-gutter), calc((100vw - 1320px) / 2 + var(--page-gutter)));
	padding-right: 3rem;
	z-index: 10;
}

.projects-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: pnav-counter;
}

/* Styled like the slide-out nav: numbered rows with hairline dividers */
.projects-nav__item {
	margin-bottom: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.projects-nav__item:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.projects-nav__link {
	display: flex;
	align-items: baseline;
	gap: 1.1rem;
	font-family: 'Nord', sans-serif;
	font-size: clamp(1rem, 1.8vw, 1.6rem);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.18);
	transition: color 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
	padding: 0.85rem 0;
	line-height: 1.2;
}

.projects-nav__link::before {
	counter-increment: pnav-counter;
	content: counter(pnav-counter, decimal-leading-zero);
	font-size: 0.62em;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.35);
	flex: 0 0 2.6em; /* fixed column so every name starts at the same x, whatever the number width */
	font-variant-numeric: tabular-nums;
}

.projects-nav__item.is-active .projects-nav__link {
	color: rgba(255, 255, 255, 1);
}

/* ---- Load intro: panels settle, then the reel spins down ---- */

.projects-archive__sidebar {
	opacity: 0;
	transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.projects-archive__feed {
	opacity: 0;
	transition: opacity 1.3s ease;
}

/* The opening frame eases out of a slight scale before the glide begins */
.projects-archive:not(.is-settled) .project-item:last-child .project-item__image img {
	transition: transform 2.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.projects-archive:not(.is-ready) .project-item:last-child .project-item__image img {
	transform: none;
}

.projects-archive__sidebar {
	transform: translateX(-24px);
}

.projects-archive.is-ready .projects-archive__sidebar,
.projects-archive.is-ready .projects-archive__feed {
	opacity: 1;
	transform: none;
}

.projects-archive.is-ready .projects-archive__feed {
	transition-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
	.projects-archive__sidebar,
	.projects-archive__feed,
	.projects-nav__link {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.projects-nav__item[data-distance="1"] .projects-nav__link {
	color: rgba(255, 255, 255, 0.42);
}

.projects-nav__item[data-distance="2"] .projects-nav__link {
	color: rgba(255, 255, 255, 0.2);
}

.projects-nav__item[data-distance="3"] .projects-nav__link {
	color: rgba(255, 255, 255, 0.12);
}

/* ---- Right image feed ---- */

.projects-archive__feed {
	width: 50%;
	flex-shrink: 0;
}

.project-item {
	display: flex;
	flex-direction: column;
	height: 100vh;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
}

.project-item__image {
	flex: 1;
	overflow: hidden;
	min-height: 0;
}

.project-item__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.project-item:hover .project-item__image img {
	transform: scale(1.03);
}

/* (Hover stays live mid-glide so the caption and button appear immediately) */

/* Keep each panel's repaint to itself while the page moves */
.project-item {
	contain: paint;
}

.project-item__caption {
	flex-shrink: 0;
	background: #19242C;
	display: flex;
	align-items: center;
	gap: 2.5rem;
	padding: 1.25rem 0;
	font-family: 'Nord', sans-serif;
	font-weight: 600;
	font-size: 0.68rem;
	letter-spacing: 3px;
	text-transform: uppercase;
}

.project-item__caption-location {
	color: rgba(255, 255, 255, 0.85);
}

.project-item__caption-cat {
	color: rgba(255, 255, 255, 0.4);
}

/* ---- Mobile: single column, no sidebar ---- */

@media (max-width: 767.98px) {
	.projects-archive {
		display: block;
	}

	.projects-archive__stage {
		display: block;
	}

	.projects-archive__sidebar {
		display: none;
	}

	.projects-archive__feed {
		width: 100%;
	}

	.project-item {
		height: 85vh;
		height: 85svh; /* stops panels resizing as the iOS address bar shows/hides */
		min-height: 360px;
	}

	.project-item:first-child {
		padding-top: var(--header-height);
	}

	.project-item__caption {
		padding: 0.9rem 1.25rem;
		gap: 1.5rem;
		font-size: 0.65rem;
	}
}

/* =============================================
   RICH TEXT BLOCK
   ============================================= */

.richtext-block {
	padding-top: calc(var(--header-height) + 4rem);
	padding-bottom: 5rem;
}

.richtext-block__heading-wrap {
	margin-bottom: 3rem;
}

.richtext-block__heading {
	font-family: 'Nord', sans-serif;
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 4px;
	line-height: 1.1;
	margin-bottom: 2rem;
}

.richtext-block__heading--dark {
	color: var(--ad-dark);
}

.richtext-block__heading--light {
	color: var(--ad-sand);
}

.richtext-block__divider {
	border-color: rgba(0, 0, 0, 0.12);
	margin: 0;
}

.richtext-block--dark .richtext-block__divider {
	border-color: rgba(255, 255, 255, 0.12);
}

.richtext-block__body {
	max-width: 780px;
	font-size: 0.95rem;
	line-height: 1.85;
}

.richtext-block__body--dark {
	color: rgba(var(--ad-dark-rgb), 0.8);
}

.richtext-block__body--light {
	color: rgba(var(--ad-sand-rgb), 0.8);
}

.richtext-block__body h2,
.richtext-block__body h3,
.richtext-block__body h4 {
	margin-top: 2rem;
	margin-bottom: 0.75rem;
	letter-spacing: 0.02em;
}

.richtext-block__body a {
	color: var(--ad-green);
}

.richtext-block__body a:hover {
	color: color-mix(in srgb, var(--ad-green) 80%, black);
}

/* =============================================
   TEXT WITH LOGO BLOCK
   ============================================= */

.twl-block {
	background-color: #e4e1da;
}

.twl-block__statement {
	font-family: 'Ivy', Georgia, serif;
	font-size: clamp(1.25rem, 2.5vw, 1.9rem);
    color: var(--ad-dark);
    letter-spacing: 0.01em;
    margin-bottom: 0.75rem;
}

.twl-block__body {
	font-size: 0.85rem;
	line-height: 1.85;
	color: rgba(var(--ad-dark-rgb), 0.5);
	max-width: 440px;
	margin-bottom: 0;
}

.twl-block__logo {
	width: min(200px, 55vw);
}

.twl-block__logo svg {
	width: 100%;
	height: auto;
	fill: #2c3e4c;
}

/* =============================================
   INTRO TEXT BLOCK
   ============================================= */

.intro-text-block {
	padding: 5rem 0;
}

.intro-text-block__label {
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-bottom: 1rem;
	font-family: 'Nord', sans-serif;
}

.intro-text-block__statement {
	font-family: 'Ivy', Georgia, serif;
	font-size: clamp(1.25rem, 2.5vw, 1.9rem);
	letter-spacing: 0.01em;
	line-height: 1.35;
	margin-bottom: 0;
}

.intro-text-block__body {
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.875rem;
	line-height: 1.85;
}

.intro-text-block__body p {
	margin-bottom: 1.25rem;
}

.intro-text-block__body p:last-child {
	margin-bottom: 0;
}

/* Dark backgrounds */
.block--bg-dark .intro-text-block__label,
.block--bg-dark-green .intro-text-block__label {
	color: rgba(var(--ad-sand-rgb), 0.45);
}

.block--bg-dark .intro-text-block__statement,
.block--bg-dark-green .intro-text-block__statement {
	color: var(--ad-sand);
}

.block--bg-dark .intro-text-block__body,
.block--bg-dark-green .intro-text-block__body {
	color: rgba(var(--ad-sand-rgb), 0.6);
}

/* Light/sand backgrounds */
.block--bg-sand .intro-text-block__label,
.block--bg-light .intro-text-block__label,
.block--bg-white .intro-text-block__label {
	color: rgba(var(--ad-dark-rgb), 0.45);
}

.block--bg-sand .intro-text-block__statement,
.block--bg-light .intro-text-block__statement,
.block--bg-white .intro-text-block__statement {
	color: var(--ad-dark);
}

.block--bg-sand .intro-text-block__body,
.block--bg-light .intro-text-block__body,
.block--bg-white .intro-text-block__body {
	color: rgba(var(--ad-dark-rgb), 0.6);
}

/* =============================================
   WHAT'S INCLUDED BLOCK
   ============================================= */

.wi-block {
	padding: 5rem 0;
}

.wi-block__header {
	margin-bottom: 3rem;
}

.wi-block__label {
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(var(--ad-sand-rgb), 0.45);
	margin-bottom: 0.75rem;
	font-family: 'Nord', sans-serif;
}

.wi-block__heading {
	font-family: 'Ivy', Georgia, serif;
	font-size: clamp(1.4rem, 3vw, 2.1rem);
	color: var(--ad-sand);
	letter-spacing: 0.01em;
	line-height: 1.25;
	margin-bottom: 0.75rem;
}

.wi-block__intro {
	font-size: 0.875rem;
	line-height: 1.8;
	color: rgba(var(--ad-sand-rgb), 0.6);
	max-width: 560px;
	margin-bottom: 0;
}

/* Image panel */
.wi-block__image-panel {
	position: relative;
	aspect-ratio: 4/5;
	overflow: hidden;
}

.wi-block__image-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.wi-block__image-slide.is-active {
	opacity: 1;
}

.wi-block__image-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wi-block__image-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1.25rem 1.25rem 1rem;
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(var(--ad-sand-rgb), 0.8);
	background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
	margin-bottom: 0;
}

/* Feature items */
.wi-block__items {
	list-style: none;
	padding: 0;
	margin: 0;
}

.wi-block__items {
	border-top: 1px solid rgba(var(--ad-sand-rgb), 0.12);
}

.wi-block__item {
	padding: 1.4rem 1.25rem;
	border-bottom: 1px solid rgba(var(--ad-sand-rgb), 0.12);
	border-left: 3px solid transparent;
	cursor: pointer;
	transition: background 0.25s ease, border-left-color 0.25s ease;
}

.wi-block__item-title {
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: rgba(var(--ad-sand-rgb), 0.55);
	margin-bottom: 0.5rem;
	transition: color 0.25s ease;
}

.wi-block__item-desc {
	font-size: 0.825rem;
	line-height: 1.8;
	color: rgba(var(--ad-sand-rgb), 0.4);
	margin-bottom: 0;
	transition: color 0.25s ease;
}

.wi-block__item.is-active {
	background: rgba(var(--ad-sand-rgb), 0.06);
	border-left-color: var(--ad-sand);
}

.wi-block__item.is-active .wi-block__item-title {
	color: var(--ad-sand);
}

.wi-block__item.is-active .wi-block__item-desc {
	color: rgba(var(--ad-sand-rgb), 0.65);
}

.wi-block__item:not(.is-active):hover {
	background: rgba(var(--ad-sand-rgb), 0.03);
}

/* =============================================
   PROJECT OVERVIEW BLOCK
   ============================================= */

.po-block {
	padding: 5rem 0;
}

.po-block__label {
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(var(--ad-sand-rgb), 0.45);
	margin-bottom: 1rem;
	font-family: 'Nord', sans-serif;
}

.po-block__intro {
	font-family: 'Ivy', Georgia, serif;
	font-size: clamp(1.3rem, 2.5vw, 1.9rem);
	color: var(--ad-sand);
	line-height: 1.3;
	letter-spacing: 0.01em;
	margin-bottom: 1.5rem;
}

.po-block__body {
	font-size: 0.875rem;
	line-height: 1.85;
	color: rgba(var(--ad-sand-rgb), 0.6);
}

.po-block__body p {
	margin-bottom: 1rem;
}

.po-block__body p:last-child {
	margin-bottom: 0;
}

.po-block__meta {
	margin: 0;
	padding: 0;
	font-family: 'Nord', sans-serif;
}

.po-block__meta-row {
	display: flex;
	gap: 1rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(var(--ad-sand-rgb), 0.1);
}

.po-block__meta-row:first-child {
	border-top: 1px solid rgba(var(--ad-sand-rgb), 0.1);
}

.po-block__meta-key {
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(var(--ad-sand-rgb), 0.4);
	flex: 0 0 40%;
	margin: 0;
	padding-top: 0.1rem;
}

.po-block__meta-value {
	font-size: 0.825rem;
	color: rgba(var(--ad-sand-rgb), 0.75);
	margin: 0;
}

/* =============================================
   PULL QUOTE BLOCK
   ============================================= */

.pq-block {
	position: relative;
	padding: 6rem 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #1d2a29;
}

.pq-block__overlay {
	position: absolute;
	inset: 0;
	background: rgba(29, 42, 41, 0.78);
}

.pq-block--gradient::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 65%;
	background: linear-gradient(
		to bottom,
		rgba(var(--ad-dark-rgb), 0) 0%,
		rgba(var(--ad-dark-rgb), 0.026) 19%,
		rgba(var(--ad-dark-rgb), 0.077) 34%,
		rgba(var(--ad-dark-rgb), 0.145) 47%,
		rgba(var(--ad-dark-rgb), 0.227) 56.5%,
		rgba(var(--ad-dark-rgb), 0.32) 65%,
		rgba(var(--ad-dark-rgb), 0.421) 73%,
		rgba(var(--ad-dark-rgb), 0.529) 80.2%,
		rgba(var(--ad-dark-rgb), 0.641) 86.9%,
		rgba(var(--ad-dark-rgb), 0.752) 91.7%,
		rgba(var(--ad-dark-rgb), 0.86) 95.1%,
		rgba(var(--ad-dark-rgb), 0.937) 98.2%,
		var(--ad-dark) 100%
	);
	pointer-events: none;
}

.pq-block__container {
	position: relative;
	z-index: 1;
}

.pq-block__quote {
	font-family: 'Ivy', Georgia, serif;
	font-size: clamp(1.3rem, 3vw, 2rem);
	font-style: italic;
	color: var(--ad-sand);
	line-height: 1.45;
	letter-spacing: 0.01em;
	margin-bottom: 1.5rem;
	border: none;
	padding: 0;
}

.pq-block__attribution {
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(var(--ad-sand-rgb), 0.45);
	margin-bottom: 0;
	font-family: 'Nord', sans-serif;
}

/* =============================================
   NEXT PROJECT BLOCK
   ============================================= */

.next-project-block {
	position: relative;
	padding: 6rem 0;
	background-color: #1d2a29;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.next-project-block__overlay {
	position: absolute;
	inset: 0;
	background: rgba(29, 42, 41, 0.78);
}

.next-project-block__label {
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(var(--ad-sand-rgb), 0.45);
	margin-bottom: 0.75rem;
	font-family: 'Nord', sans-serif;
}

.next-project-block__title {
	font-family: 'Ivy', Georgia, serif;
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	color: var(--ad-sand);
	letter-spacing: 0.01em;
	margin-bottom: 2rem;
}

.next-project-block__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-color: rgba(var(--ad-sand-rgb), 0.4);
	color: var(--ad-sand);
	padding: 0.6rem 1.4rem;
}

.next-project-block__btn:hover {
	background-color: rgba(var(--ad-sand-rgb), 0.1);
	border-color: var(--ad-sand);
	color: var(--ad-sand);
}

/* =============================================
   FAQ BLOCK
   ============================================= */

.faq-block {
	padding: 5rem 0;
}

.faq-block__header {
	margin-bottom: 3rem;
}

.faq-block__label {
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(var(--ad-sand-rgb), 0.45);
	margin-bottom: 0.75rem;
	font-family: 'Nord', sans-serif;
}

.faq-block__heading {
	font-family: 'Ivy', Georgia, serif;
	font-size: clamp(1.4rem, 2.5vw, 2rem);
	color: var(--ad-sand);
	letter-spacing: 0.01em;
	line-height: 1.25;
	margin-bottom: 0;
}

/* Accordion */
.faq-block__accordion {
	border-top: 1px solid rgba(var(--ad-sand-rgb), 0.12);
}

.faq-block__item {
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(var(--ad-sand-rgb), 0.12);
	border-radius: 0 !important;
}

.faq-block__question {
	background: transparent;
	color: var(--ad-sand);
	font-family: 'Ivy', Georgia, serif;
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	font-weight: 400;
	padding: 1.5rem 0;
	box-shadow: none !important;
	border-radius: 0 !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.faq-block__question::after {
	display: none;
}

.faq-block__question:not(.collapsed) {
	background: transparent;
	color: var(--ad-sand);
}

.faq-block__question.collapsed {
	color: rgba(var(--ad-sand-rgb), 0.55);
}

.faq-block__icon {
	flex-shrink: 0;
	font-size: 1.1rem;
	line-height: 1;
	color: rgba(var(--ad-sand-rgb), 0.5);
	transition: color 0.2s ease;
}

.faq-block__icon::before {
	content: '−';
}

.faq-block__question.collapsed .faq-block__icon::before {
	content: '+';
}

.faq-block__question:not(.collapsed) .faq-block__icon {
	color: var(--ad-sand);
}

.faq-block__answer {
	font-size: 0.875rem;
	line-height: 1.8;
	color: rgba(var(--ad-sand-rgb), 0.6);
	padding: 0 0 1.5rem;
}

/* =============================================
   PROCESS STEPS BLOCK
   ============================================= */

.ps-block {
	position: relative;
	padding: 5rem 0;
	background-color: #19242C;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.ps-block__bg-overlay {
	position: absolute;
	inset: 0;
	background: rgba(25, 36, 44, 0.82);
	z-index: 0;
}

.ps-block .container {
	position: relative;
	z-index: 1;
}

.ps-block__label {
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(var(--ad-sand-rgb), 0.45);
	margin-bottom: 0.75rem;
	font-family: 'Nord', sans-serif;
}

.ps-block__heading {
	font-family: 'Ivy', Georgia, serif;
	font-size: clamp(1.4rem, 2.5vw, 2rem);
	color: var(--ad-sand);
	letter-spacing: 0.01em;
	line-height: 1.25;
	margin-bottom: 2.5rem;
}

/* Step list */
.ps-block__steps {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid rgba(var(--ad-sand-rgb), 0.12);
}

.ps-block__step {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 1.4rem 1.25rem;
	border-bottom: 1px solid rgba(var(--ad-sand-rgb), 0.12);
	border-left: 3px solid transparent;
	cursor: pointer;
	transition: background 0.25s ease, border-left-color 0.25s ease;
}

.ps-block__step-number {
	font-family: 'Ivy', Georgia, serif;
	font-size: 3rem;
	letter-spacing: 0.02em;
	color: rgba(var(--ad-sand-rgb), 0.35);
	flex-shrink: 0;
	min-width: 2.5rem;
	transition: color 0.25s ease;
}

.ps-block__step-title {
	font-size: 1rem;
	color: rgba(var(--ad-sand-rgb), 0.4);
	flex: 1;
	transition: color 0.25s ease;
}

.ps-block__step-arrow {
	width: 16px;
	height: auto;
	opacity: 0;
	transition: opacity 0.25s ease;
	flex-shrink: 0;
}

.ps-block__step.is-active {
	background: rgba(var(--ad-sand-rgb), 0.06);
	border-left-color: var(--ad-sand);
}

.ps-block__step.is-active .ps-block__step-number {
	color: var(--ad-sand);
}

.ps-block__step.is-active .ps-block__step-title {
	color: var(--ad-sand);
}

.ps-block__step.is-active .ps-block__step-arrow {
	opacity: 0.7;
}

.ps-block__step:not(.is-active):hover {
	background: rgba(var(--ad-sand-rgb), 0.03);
}

/* Image panel */
.ps-block__image-panel {
	position: relative;
	overflow: hidden;
}

@media (min-width: 992px) {
	/* Shorter panel: text below must be visible without scrolling */
	.ps-block__image-panel {
		height: clamp(300px, 38vh, 420px);
		min-height: 0;
	}
}

.ps-block__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.ps-block__slide.is-active {
	opacity: 1;
}

.ps-block__slide-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ps-block__slide-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.ps-block__slide-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 2rem;
}

.ps-block__slide-number {
	display: block;
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-family: 'Ivy', Georgia, serif;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1;
	margin-bottom: 0.25rem;
}

.ps-block__slide-step-of {
	display: block;
	font-size: 0.65rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 0.4rem;
}

.ps-block__slide-title {
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	color: #fff;
	margin-bottom: 0.75rem;
}

.ps-block__slide-desc {
	font-size: 0.8rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 0;
	max-width: 380px;
}

@media (max-width: 991px) {
	.ps-block__image-panel {
		aspect-ratio: 4/3;
		margin-top: 2rem;
	}
}

/* =============================================
   SERVICES DETAIL BLOCK
   ============================================= */

.services-detail-block {
	overflow: hidden;
}

/* Section header */
.sdb-header {
	padding-top: 4rem;
	padding-bottom: 3rem;
}

.sdb-header__label {
	font-family: 'Nord', sans-serif;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(var(--ad-sand-rgb), 0.45);
	margin-bottom: 0.75rem;
}

.sdb-header__heading {
	font-family: 'Ivy', Georgia, serif;
	font-size: clamp(1.4rem, 3vw, 2.2rem);
	color: var(--ad-sand);
	letter-spacing: 0.01em;
	line-height: 1.25;
	max-width: 480px;
	margin-bottom: 0;
}

/* Rows */
.sdb-rows {
	padding-bottom: 4rem;
}

.sdb-row {
	display: flex;
	min-height: 480px;
	padding: 3rem 0;
}

.sdb-row--reverse {
	flex-direction: row-reverse;
}

.sdb-row__image {
	flex: 0 0 50%;
	overflow: hidden;
}

.sdb-row__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sdb-row__content {
	flex: 0 0 50%;
	display: flex;
	align-items: center;
}

.sdb-row__inner {
	padding: 1rem 3.5rem;
	max-width: 480px;
}

.sdb-row__title {
	font-family: 'Ivy', Georgia, serif;
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	color: var(--ad-sand);
	letter-spacing: 0.01em;
	margin-bottom: 1rem;
}

.sdb-row__desc {
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.875rem;
	line-height: 1.8;
	color: rgba(var(--ad-sand-rgb), 0.65);
	margin-bottom: 1.25rem;
}

.sdb-row__features {
	list-style: none;
	padding: 0;
	margin: 0 0 1.75rem;
}

.sdb-row__features li {
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.8rem;
	letter-spacing: 0.03em;
	color: rgba(var(--ad-sand-rgb), 0.65);
	padding: 0.3rem 0;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.sdb-row__feature-arrow {
	width: 14px;
	height: auto;
	opacity: 0.5;
	flex-shrink: 0;
}

.sdb-row__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-color: rgba(var(--ad-sand-rgb), 0.4);
	color: var(--ad-sand);
	padding: 0.5rem 1.1rem;
}

.sdb-row__btn:hover {
	background-color: rgba(var(--ad-sand-rgb), 0.1);
	border-color: var(--ad-sand);
	color: var(--ad-sand);
}

@media (max-width: 991px) {
	.sdb-row,
	.sdb-row--reverse {
		flex-direction: column;
	}

	.sdb-row__image,
	.sdb-row__content {
		flex: none;
		width: 100%;
	}

	.sdb-row__image {
		min-height: 0;
		height: auto;
		aspect-ratio: 3 / 2;
	}

	.sdb-row__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.sdb-row__inner {
		padding: 2rem 0;
	}
}

/* =============================================
   SECTION HEADING BLOCK
   ============================================= */

.section-heading-block {
	background-color: #e4e1da;
}

.section-heading-block .container {
	border-top: 1px solid rgba(var(--ad-dark-rgb), 0.12);
}

.section-heading-block__heading {
	font-size: clamp(1.25rem, 2.5vw, 1.9rem);
	color: var(--ad-dark);
	letter-spacing: 0.01em;
	margin-bottom: 0.75rem;
}

.section-heading-block__intro {
	font-size: 0.85rem;
	line-height: 1.8;
	color: rgba(var(--ad-dark-rgb), 0.55);
	max-width: 520px;
	margin-bottom: 0;
}

/* =============================================
   AWARD SECTION BLOCK
   ============================================= */

.award-section-block {
	background-color: #e4e1da;
}

.award-section-block__inner {
	padding: 2.5rem 0;
	border-top: 1px solid rgba(var(--ad-dark-rgb), 0.12);
}

.award-section-block__label {
    font-size: 0.8rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #9b9176;
	margin-bottom: 0.75rem;
	font-weight: 800;
	font-family: 'Nord', sans-serif;
}

.award-section-block__heading {
	font-family: 'Ivy', Georgia, serif;
	font-weight: 400;
	font-size: clamp(1rem, 1.8vw, 1.45rem);
	line-height: 1.35;
	color: rgba(var(--ad-dark-rgb), 0.85);
	margin-bottom: 0;
}

.award-section-block__right {
	padding-top: 0.1rem;
}

.award-section-block__list {
	list-style: none;
	padding: 0;
	margin: 0;
	columns: 2;
	column-gap: 2rem;
}

.award-section-block__item {
	break-inside: avoid;
	margin-bottom: 1rem;
}

.award-section-block__name {
	font-size: 0.9rem;
	color: rgba(var(--ad-dark-rgb), 0.8);
	letter-spacing: 0.01em;
	line-height: 1.4;
}

.award-section-block__note {
	font-size: 0.75rem;
	color: #9b9176;
	letter-spacing: 0.06em;
	margin-top: 0.2rem;
	font-style: italic;
}

@media (max-width: 991.98px) {
	.award-section-block__left {
		margin-bottom: 1.5rem;
	}

	.award-section-block__list {
		columns: 1;
	}
}

/* =============================================
   FEATURED IN BLOCK
   ============================================= */

.featured-in-block {
	background-color: #e4e1da;
}

.featured-in-block__heading {
	font-size: clamp(1.25rem, 2.5vw, 1.9rem);
	color: var(--ad-dark);
	letter-spacing: 0.01em;
	margin-bottom: 0.5rem;
}

.featured-in-block__subheading {
	font-size: 0.85rem;
	line-height: 1.7;
	color: rgba(var(--ad-dark-rgb), 0.45);
	margin-bottom: 0;
}

.featured-in-block__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 220px;
	gap: 1rem;
}

.featured-in-block__grid .featured-in-block__item:first-child {
	grid-row: span 2;
}

.featured-in-block__grid .featured-in-block__item:nth-child(5) {
	grid-column: span 2;
}

.featured-in-block__item {
	overflow: hidden;
}

.featured-in-block__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.featured-in-block__item img:hover {
	transform: scale(1.03);
}

@media (max-width: 991.98px) {
	.featured-in-block__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 180px;
	}

	.featured-in-block__grid .featured-in-block__item:first-child {
		grid-row: span 1;
	}

	.featured-in-block__grid .featured-in-block__item:nth-child(5) {
		grid-column: span 1;
	}
}

@media (max-width: 575.98px) {
	.featured-in-block__grid {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 140px;
	}
}

/* =============================================
   Team
   ============================================= */

.team-block__label,
.team-block__heading,
.team-block__intro {
	max-width: 62ch;
}

.team-block__label {
	font-family: 'Nord', sans-serif;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(var(--ad-sand-rgb), 0.45);
	margin-bottom: 0.75rem;
}

.team-block__heading {
	color: var(--ad-sand);
	letter-spacing: 0.06em;
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	margin-bottom: 0;
}

.team-block__intro {
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.95rem;
	line-height: 1.6;
	color: rgba(var(--ad-sand-rgb), 0.7);
	padding-top: 0.75rem;
	margin-bottom: 0;
}

.team-card__photo {
	overflow: hidden;
	margin-bottom: 1.25rem;
	background: rgba(var(--ad-sand-rgb), 0.06);
	aspect-ratio: 4 / 5;
}

.team-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.team-card__name {
	font-family: 'Nord', sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--ad-sand);
	margin-bottom: 0.35rem;
}

.team-card__role {
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(var(--ad-sand-rgb), 0.5);
	margin-bottom: 0.9rem;
}

.team-card__bio {
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.875rem;
	line-height: 1.65;
	color: rgba(var(--ad-sand-rgb), 0.7);
	margin-bottom: 0.75rem;
}

.team-card__email {
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.8rem;
	color: rgba(var(--ad-sand-rgb), 0.55);
	text-decoration: none;
	border-bottom: 1px solid rgba(var(--ad-sand-rgb), 0.25);
	transition: color 0.3s ease, border-color 0.3s ease;
}

.team-card__email:hover {
	color: var(--ad-sand);
	border-color: var(--ad-sand);
}

/* Dark text on light backgrounds */
.block--text-dark .team-block__label {
	color: rgba(var(--ad-dark-rgb), 0.45);
}

.block--text-dark .team-block__heading,
.block--text-dark .team-card__name {
	color: var(--ad-dark);
}

.block--text-dark .team-block__intro,
.block--text-dark .team-card__bio {
	color: rgba(var(--ad-dark-rgb), 0.75);
}

.block--text-dark .team-card__role,
.block--text-dark .team-card__email {
	color: rgba(var(--ad-dark-rgb), 0.55);
}

/* ---- Team reveal: photo unveils, then the copy rises ---- */

.team-card__photo {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--i, 0) * 0.14s);
}

.team-card__photo img {
	transform: scale(1.12);
	transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--i, 0) * 0.14s);
}

.team-card__name,
.team-card__role,
.team-card__bio,
.team-card__email {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-card__name  { transition-delay: calc(var(--i, 0) * 0.14s + 0.30s); }
.team-card__role  { transition-delay: calc(var(--i, 0) * 0.14s + 0.38s); }
.team-card__bio   { transition-delay: calc(var(--i, 0) * 0.14s + 0.46s); }
.team-card__email { transition-delay: calc(var(--i, 0) * 0.14s + 0.54s); }

.team-card.is-inview .team-card__photo {
	clip-path: inset(0);
}

.team-card.is-inview .team-card__photo img {
	transform: scale(1);
}

.team-card.is-inview .team-card__name,
.team-card.is-inview .team-card__role,
.team-card.is-inview .team-card__bio,
.team-card.is-inview .team-card__email {
	opacity: 1;
	transform: none;
}

/* Hover scale only once the reveal has finished */
.team-card.is-inview:hover .team-card__photo img {
	transform: scale(1.04);
	transition-duration: 0.9s;
	transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
	.team-card__photo,
	.team-card__photo img,
	.team-card__name,
	.team-card__role,
	.team-card__bio,
	.team-card__email {
		opacity: 1;
		transform: none;
		clip-path: none;
		transition: none;
	}
}

/* Mobile menu: header and footer settle in after the links */
.mobile-menu__logo,
.mobile-menu__close,
.mobile-menu__footer {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu.is-open .mobile-menu__logo {
	opacity: 1;
	transform: none;
	transition-delay: 0.3s;
}

.mobile-menu.is-open .mobile-menu__close {
	opacity: 1;
	transform: none;
	transition-delay: 0.36s;
}

.mobile-menu.is-open .mobile-menu__footer {
	opacity: 1;
	transform: none;
	transition-delay: 1.05s;
}

@media (prefers-reduced-motion: reduce) {
	.mobile-menu,
	.mobile-menu__logo,
	.mobile-menu__close,
	.mobile-menu__footer,
	.mobile-menu.is-open .mobile-menu__list > .menu-item {
		transition-duration: 0.01ms;
		animation-duration: 0.01ms;
		animation-delay: 0ms;
		transition-delay: 0ms;
	}
}

/* ---- Mobile menu: exit sequence ---- */

@keyframes menuItemOut {
	from {
		opacity: 1;
		transform: translate(0, 0);
	}
	to {
		opacity: 0;
		transform: translate(20px, -8px);
	}
}

/* Links leave from the bottom up — reverse of the way they arrived.
   'both' fill so each item holds its visible state during its delay,
   rather than dropping to the base opacity: 0 and flashing back in. */
.mobile-menu.is-closing .mobile-menu__list > .menu-item {
	animation: menuItemOut 0.32s cubic-bezier(0.6, 0, 0.85, 0.4) both;
}

.mobile-menu.is-closing .mobile-menu__list > .menu-item:nth-last-child(1) { animation-delay: 0s; }
.mobile-menu.is-closing .mobile-menu__list > .menu-item:nth-last-child(2) { animation-delay: 0.04s; }
.mobile-menu.is-closing .mobile-menu__list > .menu-item:nth-last-child(3) { animation-delay: 0.08s; }
.mobile-menu.is-closing .mobile-menu__list > .menu-item:nth-last-child(4) { animation-delay: 0.12s; }
.mobile-menu.is-closing .mobile-menu__list > .menu-item:nth-last-child(5) { animation-delay: 0.16s; }
.mobile-menu.is-closing .mobile-menu__list > .menu-item:nth-last-child(n+6) { animation-delay: 0.2s; }

/* Footer goes first, logo and close hold until the panel moves */
.mobile-menu.is-closing .mobile-menu__footer {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	transition-delay: 0s;
}

.mobile-menu.is-closing .mobile-menu__logo,
.mobile-menu.is-closing .mobile-menu__close {
	opacity: 0;
	transition: opacity 0.3s ease;
	transition-delay: 0.18s;
}

/* Panel exits faster than it entered — dismissing should feel immediate */
.mobile-menu.is-closing {
	transition: opacity 0.35s ease 0.15s,
	            transform 0.6s cubic-bezier(0.76, 0, 0.24, 1),
	            visibility 0s linear 0.6s;
}

/* ---- Services slider (mirrors the projects slider) ---- */

.services-block .services-swiper {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: max(var(--page-gutter), calc((100vw - 1320px) / 2 + var(--page-gutter)));
}

.services-block .services-swiper {
	padding-bottom: 4px;
}

.services-block .services-swiper .swiper-wrapper {
	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.services-block .services-swiper .swiper-slide {
	height: auto;
}

.services-block .services-swiper .service-card {
	height: 100%;
}

@media (max-width: 767.98px) {
	.services-block .row.mb-5 > .col {
		flex-wrap: wrap;
		gap: 1.5rem;
	}

	.services-block__nav {
		width: 100%;
		justify-content: flex-start;
	}
}

/* =============================================
   Slider indicators
   ============================================= */

/* ---- Progress line + counter (projects) ---- */

.slider-progress {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-top: 2.5rem;
}

.slider-progress__track {
	position: relative;
	flex: 1;
	max-width: 320px;
	height: 1px;
	background: rgba(var(--ad-sand-rgb), 0.2);
	overflow: hidden;
}

.slider-progress__bar {
	position: absolute;
	inset: 0 auto 0 0;
	width: 18%;
	background: var(--ad-sand);
	transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.slider-progress__count {
	font-family: 'Nord', sans-serif;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 3px;
	color: var(--ad-sand);
	margin-bottom: 0;
	white-space: nowrap;
}

.slider-progress__sep,
.slider-progress__total {
	color: rgba(var(--ad-sand-rgb), 0.45);
}

.block--text-dark .slider-progress__track {
	background: rgba(var(--ad-dark-rgb), 0.2);
}

.block--text-dark .slider-progress__bar {
	background: var(--ad-dark);
}

.block--text-dark .slider-progress__count {
	color: var(--ad-dark);
}

.block--text-dark .slider-progress__sep,
.block--text-dark .slider-progress__total {
	color: rgba(var(--ad-dark-rgb), 0.45);
}

/* ---- Dots (services) ---- */

.slider-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	margin-top: 2.5rem;
	/* Breathing room inside the swiper's overflow:hidden box, so the
	   active dot isn't clipped at the edge */
	padding: 10px 0;
}

.slider-dots__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 1px solid rgba(var(--ad-sand-rgb), 0.45);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.5s ease, border-color 0.5s ease, width 0.4s cubic-bezier(0.16, 1, 0.3, 1), height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.slider-dots__dot:hover {
	border-color: var(--ad-sand);
}

/* Grow by box size rather than transform — a scaled element overflows its
   layout box and gets clipped by the slider's overflow:hidden */
.slider-dots__dot.is-active {
	background: var(--ad-sand);
	border-color: var(--ad-sand);
	width: 10px;
	height: 10px;
}

.block--text-dark .slider-dots__dot {
	border-color: rgba(var(--ad-dark-rgb), 0.45);
}

.block--text-dark .slider-dots__dot.is-active {
	background: var(--ad-dark);
	border-color: var(--ad-dark);
}

/* The dots sit inside the bleeding swiper, so pull them back into the container */
.services-block .services-swiper .slider-dots {
	padding-right: max(var(--page-gutter), calc((100vw - 1320px) / 2 + var(--page-gutter)));
}

@media (prefers-reduced-motion: reduce) {
	.slider-progress__bar,
	.slider-dots__dot {
		transition: none;
	}
}

/* ---- Footer: compact on mobile ---- */

@media (max-width: 991.98px) {
	.footer-main {
		padding-top: 3rem;
		padding-bottom: 2.5rem;
	}

	.footer-col-heading {
		font-size: 0.78rem;
		letter-spacing: 0.18em;
		margin-bottom: 0.9rem;
	}

	.footer-nav li,
	.footer-contact li {
		margin-bottom: 0.55rem;
	}

	.footer-nav a,
	.footer-contact a,
	.footer-contact li {
		font-size: 0.85rem;
	}

	/* Legal runs inline instead of four stacked rows */
	.footer-col--legal .footer-nav {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1.5rem;
	}

	.footer-col--legal .footer-nav li {
		margin-bottom: 0;
	}

	.footer-col--legal .footer-nav a {
		font-size: 0.78rem;
	}

	.footer-col--form {
		margin-top: 0.5rem;
	}
}

/* Slide-out menu logo matches the header logo exactly */
.mobile-menu__logo img {
	width: 160px;
	height: auto;
	display: block;
}

/* Footer bottom bar: more room between the three stacked pieces on mobile */
@media (max-width: 767.98px) {
	.footer-bottom .row {
		--bs-gutter-y: 2.25rem;
	}

	.footer-bottom {
		overflow: hidden;
	}

	.footer-bottom .py-4 {
		padding-top: 2.75rem !important;
		padding-bottom: 2.75rem !important;
	}

	/* Logo dominates the bottom bar on mobile — full container width,
	   so it stays inside the page gutters rather than bleeding off */
	.footer-logo {
		display: block;
		width: 100%;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}

	.footer-logo img {
		opacity: 1;
	}

	.footer-copy {
		font-size: 0.72rem;
	}

	.footer-credit {
		line-height: 1.8;
	}

	.footer-credit__logo {
		max-width: 112px;
		margin-top: 0.6rem;
	}
}


/* =============================================
   SERVICES PAGE OVERRIDES
   ============================================= */

/* Services Detail block — light background, dark text */
.services-detail-block {
	background-color: #E7E8E9 !important;
}

.services-detail-block .sdb-header__label {
	color: rgba(25, 36, 44, 0.5);
}

.services-detail-block .sdb-header__heading,
.services-detail-block .sdb-row__title {
	color: #19242C;
}

.services-detail-block .sdb-row__desc,
.services-detail-block .sdb-row__features li {
	color: rgba(25, 36, 44, 0.7);
}

.services-detail-block .sdb-row__feature-arrow {
	filter: brightness(0.3);
}

.services-detail-block .sdb-row__btn {
	border-color: rgba(25, 36, 44, 0.4);
	color: #19242C;
}

.services-detail-block .sdb-row__btn:hover {
	background-color: rgba(25, 36, 44, 0.08);
	border-color: #19242C;
	color: #19242C;
}


/* =============================================
   LOGOS MARQUEE — continuous leftward slider
   ============================================= */

.logos-marquee {
	overflow: hidden;
	margin-top: 2.5rem;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.logos-marquee__track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: logos-marquee-scroll 45s linear infinite;
}

.logos-marquee__group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.logos-marquee .logos-block__item {
	flex: 0 0 auto;
	padding: 0 clamp(1.5rem, 4vw, 3.5rem);
}

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

.logos-marquee:hover .logos-marquee__track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.logos-marquee__track {
		animation: none;
	}
}


/* Projects archive: header panel matches the page's blue */
@media (min-width: 992px) {
	.post-type-archive-project .site-header__logo-col,
	.post-type-archive-project #site-header.is-pinned .site-header__logo-col {
		background: #19242C;
	}
}


/* =============================================
   CONTACTS STEP FORM (Contact Form 7)
   ============================================= */

.contacts-form {
	margin-top: 2rem;
}

.contacts-form__eyebrow {
	font-family: 'Nord', sans-serif;
	font-size: 0.65rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(var(--ad-sand-rgb), 0.45);
	margin: 0 0 0.4rem;
}

.contacts-form__intro {
	font-size: 0.875rem;
	line-height: 1.7;
	color: rgba(var(--ad-sand-rgb), 0.7);
	margin: 0 0 1.75rem;
}

/* Progress indicator (built by contact-steps.js) */
.cf7-steps__progress {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 2rem;
}

.cf7-steps__item {
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}

.cf7-steps__num {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid rgba(var(--ad-sand-rgb), 0.3);
	color: rgba(var(--ad-sand-rgb), 0.4);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.65rem;
}

.cf7-steps__item.is-active .cf7-steps__num {
	border-color: var(--ad-sand);
	color: var(--ad-sand);
}

.cf7-steps__item.is-done .cf7-steps__num {
	background: var(--ad-sand);
	border-color: var(--ad-sand);
	color: #19242C;
}

.cf7-steps__label {
	font-family: 'Nord', sans-serif;
	font-size: 0.6rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(var(--ad-sand-rgb), 0.4);
}

.cf7-steps__item.is-active .cf7-steps__label {
	color: var(--ad-sand);
}

.cf7-steps__rule {
	flex: 1;
	height: 1px;
	background: rgba(var(--ad-sand-rgb), 0.18);
}

/* Steps */
.cf7-step {
	display: none;
}

/* Safety net: if contact-steps.js hasn't initialised yet, show step 1
   rather than an empty form (first .cf7-step, whatever precedes it) */
.cf7-steps:not(:has(.cf7-step.is-active)) .cf7-step:not(.cf7-step ~ .cf7-step) {
	display: block;
}

/* No Back on the first step (or before the script has run) */
.cf7-steps:not(:has(.cf7-step.is-active)) .cf7-steps__back,
.cf7-steps:has(.cf7-step:not(.cf7-step ~ .cf7-step).is-active) .cf7-steps__back {
	visibility: hidden;
}

.cf7-step.is-active {
	display: block;
}

.cf7-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.cf7-grid__full {
	grid-column: 1 / -1;
}

/* CF7's auto-formatting inserts <br>/<p> between fields; they become stray
   grid items and push everything into one column */
.cf7-steps br {
	display: none;
}

.cf7-steps p:not(.cf7-thanks p) {
	display: contents;
}

/* Fields */
.contacts-form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-family: 'Nord', sans-serif;
	font-size: 0.6rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(var(--ad-sand-rgb), 0.5);
}

.cf7-step > label {
	margin-bottom: 1.25rem;
}

.contacts-form .wpcf7-form-control-wrap {
	display: block;
}

.contacts-form input:not([type="submit"]),
.contacts-form select,
.contacts-form textarea {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(var(--ad-sand-rgb), 0.25);
	border-radius: 0;
	color: var(--ad-sand);
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.95rem;
	letter-spacing: normal;
	text-transform: none;
	padding: 8px 0;
	outline: none;
	box-shadow: none;
	transition: border-color 0.2s ease;
}

.contacts-form input:not([type="submit"]):focus,
.contacts-form select:focus,
.contacts-form textarea:focus {
	border-bottom-color: var(--ad-sand);
}

.contacts-form ::placeholder {
	color: rgba(var(--ad-sand-rgb), 0.35);
}

.contacts-form select option {
	color: #19242C;
}

/* Chrome/Safari autofill: kill the pale-blue box, keep the underline style.
   The inset shadow paints over the browser's fill; the long transition stops
   it flashing back */
.contacts-block input:-webkit-autofill,
.contacts-block input:-webkit-autofill:hover,
.contacts-block input:-webkit-autofill:focus,
.contacts-block textarea:-webkit-autofill,
.contacts-block select:-webkit-autofill,
.wpcf7 input:-webkit-autofill,
.wpcf7 input:-webkit-autofill:hover,
.wpcf7 input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ad-sand) !important;
	caret-color: var(--ad-sand);
	-webkit-box-shadow: 0 0 0 1000px #19242C inset !important;
	box-shadow: 0 0 0 1000px #19242C inset !important;
	background-color: transparent !important;
	font-family: 'Satoshi', system-ui, sans-serif !important;
	font-size: 0.95rem !important;
	transition: background-color 600000s 0s, color 600000s 0s;
}

.contacts-block input:autofill,
.wpcf7 input:autofill {
	background-color: transparent !important;
}

.contacts-form textarea {
	resize: vertical;
	min-height: 96px;
	line-height: 1.6;
}

/* Validation */
.contacts-form .wpcf7-not-valid-tip {
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.7rem;
	letter-spacing: normal;
	text-transform: none;
	color: #e08a7a;
	margin-top: 4px;
}

.contacts-form .wpcf7-response-output {
	border: 1px solid rgba(var(--ad-sand-rgb), 0.3);
	color: var(--ad-sand);
	font-size: 0.8rem;
	padding: 0.75rem 1rem;
	margin: 1.5rem 0 0;
}

/* Nav row */
.cf7-steps__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 2rem;
}

.cf7-steps__back {
	background: transparent;
	border: none;
	color: rgba(var(--ad-sand-rgb), 0.55);
	font-family: 'Nord', sans-serif;
	font-size: 0.65rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	padding: 12px 0;
}

.cf7-steps__next,
.cf7-steps .wpcf7-submit {
	background: transparent;
	border: 1px solid rgba(var(--ad-sand-rgb), 0.5);
	color: var(--ad-sand);
	font-family: 'Nord', sans-serif;
	font-size: 0.65rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	padding: 13px 30px;
	width: auto;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.cf7-steps__next:hover,
.cf7-steps .wpcf7-submit:hover {
	background-color: rgba(var(--ad-sand-rgb), 0.1);
	border-color: var(--ad-sand);
}

/* Submit only appears on the last step */
.cf7-steps .wpcf7-submit,
.cf7-steps .wpcf7-spinner {
	display: none;
}

.cf7-steps.is-last-step .wpcf7-submit {
	display: inline-block;
}

.cf7-steps.is-last-step .wpcf7-spinner {
	display: inline-block;
}

/* Step 3 stacks its fields outside a grid. CF7 wraps/splits them with <p> and
   <br>, so sibling selectors miss — space every stacked label instead */
.cf7-step label:not(.cf7-grid label) {
	margin-bottom: 2.25rem !important;
}

/* Submit sits where Continue does (far right); spinner tucks beside it
   instead of taking the right-hand slot */
.cf7-steps .wpcf7-submit {
	margin-left: auto;
}

.cf7-steps__nav {
	position: relative;
}

.cf7-steps .wpcf7-spinner {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	margin: 0;
}

/* ---- Thank-you panel (built by the steps script on wpcf7mailsent) ---- */
.cf7-thanks {
	display: none;
}

.cf7-steps.is-sent > :not(.cf7-thanks) {
	display: none !important;
}

/* CF7's green success box is replaced by the panel */
.wpcf7.is-sent .wpcf7-response-output {
	display: none !important;
}

.cf7-steps.is-sent .cf7-thanks {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	padding: 3.5rem 0 1.5rem;
}

/* Undo the CF7 <p> flattening inside the panel */
.cf7-steps .cf7-thanks p,
.cf7-steps .cf7-thanks > * {
	display: block !important;
	margin: 0;
}

.cf7-thanks > * {
	opacity: 0;
	animation: cf7ThanksIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cf7-thanks > :nth-child(1) { animation-delay: 0.1s; }
.cf7-thanks > :nth-child(2) { animation-delay: 0.25s; }
.cf7-thanks > :nth-child(3) { animation-delay: 0.4s; }
.cf7-thanks > :nth-child(4) { animation-delay: 0.55s; }

.cf7-thanks__eyebrow {
	font-family: 'Nord', sans-serif;
	font-size: 0.6rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #B68B4B;
	margin-bottom: 1.6rem !important;
	padding-bottom: 1.6rem;
	position: relative;
}

/* Fine gold hairline under the eyebrow */
.cf7-thanks__eyebrow::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 1px;
	background: #B68B4B;
}

.cf7-thanks__title {
	font-family: 'Nord', sans-serif;
	font-weight: 400;
	font-size: clamp(1.25rem, 1.9vw, 1.7rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--ad-sand);
	margin-bottom: 1.25rem !important;
}

.cf7-thanks__text {
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.95rem;
	line-height: 1.75;
	color: rgba(var(--ad-sand-rgb), 0.65);
	max-width: 26rem;
	margin-bottom: 3rem !important;
}

.cf7-thanks__again {
	background: none;
	border: none;
	padding: 0 0 0.5em;
	font-family: 'Nord', sans-serif;
	font-size: 0.58rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(var(--ad-sand-rgb), 0.55);
	cursor: pointer;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% 1px;
	transition: color 0.3s ease;
}

.cf7-thanks__again:hover,
.cf7-thanks__again:focus-visible {
	color: var(--ad-sand);
}

@keyframes cf7ThanksIn {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cf7-thanks > * { animation: none; opacity: 1; }
}


.cf7-steps.is-last-step .cf7-steps__next {
	display: none;
}

@media (max-width: 767.98px) {
	.cf7-grid {
		grid-template-columns: 1fr;
	}

	.cf7-steps__label {
		display: none;
	}

	.cf7-steps__item.is-active .cf7-steps__label {
		display: inline;
	}
}


/* Contacts panel: breathing room around the step form */
.contacts-panel-col .contacts-headings {
	margin-bottom: 0.5rem;
}

.contacts-form {
	margin-top: 2.75rem;
	margin-bottom: 3rem;
}

.contacts-form__intro {
	margin-bottom: 2.25rem;
}

.cf7-steps__progress {
	margin-bottom: 2.5rem;
}

.cf7-grid {
	gap: 28px 28px;
}

.cf7-step > label {
	margin-bottom: 1.6rem;
}

.cf7-steps__nav {
	margin-top: 2.5rem;
}


/* Contacts: horizontal details strip under the heading (matches prototype) */
.contacts-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	padding: 14px 0;
	margin: 0 2rem;
}

.contacts-strip__item {
	color: rgba(255, 255, 255, 0.75);
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.85rem;
	text-decoration: none;
}

a.contacts-strip__item:hover {
	color: #fff;
}

/* Form aligns with the strip's gutter and sits directly beneath it */
.contacts-form {
	margin: 2.25rem 2rem 2.5rem;
}

/* Social footer: single tidy row, no big divider gaps */
.contacts-form ~ .contacts-footer .contacts-divider {
	margin: 0 0 0.9rem;
}


/* Contacts panel is the brand blue (covers panel, wipe layer and overlay) */
.contacts-block {
	--ad-dark: #19242C;
	--ad-dark-rgb: 25, 36, 44;
}

/* Strip and form join the load choreography — hidden until the panel has wiped in */
.contacts-block .contacts-strip,
.contacts-block .contacts-form {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.contacts-block.is-loaded .contacts-strip {
	opacity: 1;
	transform: none;
	transition-delay: 3.2s;
}

.contacts-block.is-loaded .contacts-form {
	opacity: 1;
	transform: none;
	transition-delay: 3.35s;
}

/* Mobile has no wipe — shorter delays to match headings/footer behaviour */
@media (max-width: 991.98px) {
	.contacts-block.is-loaded .contacts-strip {
		transition-delay: 0.45s;
	}

	.contacts-block.is-loaded .contacts-form {
		transition-delay: 0.55s;
	}
}


/* More air between the contact strip and the form intro */
.contacts-strip + .contacts-form {
	margin-top: 4rem;
}


/* =============================================
   PROJECTS SHOWCASE (homepage) — location list + hover image
   ============================================= */

.projects-showcase {
	background-color: #19242C;
}

.projects-showcase__inner {
	display: flex;
	align-items: stretch;
	min-height: 72vh;
}

.projects-showcase__list-col {
	width: 45%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(3rem, 7vw, 6rem) 3rem clamp(3rem, 7vw, 6rem)
		max(var(--page-gutter), calc((100vw - 1320px) / 2 + var(--page-gutter)));
}

.projects-showcase__label {
	font-family: 'Nord', sans-serif;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(var(--ad-sand-rgb), 0.45);
	margin-bottom: 1.75rem;
}

.projects-showcase__list {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.projects-showcase__link {
	font-family: 'Nord', sans-serif;
	font-size: clamp(1rem, 1.8vw, 1.6rem);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.22);
	padding: 0.3rem 0;
	line-height: 1.2;
	transition: color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.projects-showcase__link:hover,
.projects-showcase__link.is-active {
	color: rgba(255, 255, 255, 1);
}

.projects-showcase__btn {
	margin-top: 2.5rem;
	align-self: flex-start;
}

/* Image panel: stacked slides, crossfade */
.projects-showcase__media-col {
	width: 55%;
	position: relative;
	overflow: hidden;
	min-height: 420px;
}

.projects-showcase__media {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.7s ease;
	pointer-events: none;
}

.projects-showcase__media.is-active {
	opacity: 1;
	pointer-events: auto;
}

.projects-showcase__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.projects-showcase__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(25, 36, 44, 0.85);
	padding: 0.8rem 1.5rem;
	font-family: 'Nord', sans-serif;
	font-size: 0.65rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(var(--ad-sand-rgb), 0.85);
}

@media (max-width: 991.98px) {
	.projects-showcase__inner {
		flex-direction: column-reverse;
		min-height: 0;
	}

	.projects-showcase__list-col,
	.projects-showcase__media-col {
		width: 100%;
	}

	.projects-showcase__list-col {
		padding: 2.5rem var(--page-gutter) 3rem;
	}

	.projects-showcase__media-col {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
}


/* =============================================
   PROJECTS COLLAGE (homepage) — offset grid, hover details
   ============================================= */

.projects-collage {
	background-color: #E7E8E9;
	padding: clamp(2.5rem, 4.5vw, 4rem) 0 clamp(4rem, 8vw, 7rem);
}

.projects-collage__header {
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.projects-collage__label {
	font-family: 'Nord', sans-serif;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(25, 36, 44, 0.5);
	margin-bottom: 0.75rem;
}

.projects-collage__heading {
	font-family: 'Ivy', Georgia, serif;
	font-size: clamp(1.4rem, 3vw, 2.2rem);
	color: #19242C;
	letter-spacing: 0.01em;
	line-height: 1.25;
	margin-bottom: 0;
}

.projects-collage__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2.5rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3rem);
}

/* Offset rhythm: every second cell drops */
@media (min-width: 768px) {
	.projects-collage__grid > :nth-child(even) {
		margin-top: clamp(3rem, 6vw, 4.5rem);
	}
}

.projects-collage__card {
	display: block;
	text-decoration: none;
	color: #19242C;
}

.projects-collage__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
}

.projects-collage__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

/* Project name on the image */
.projects-collage__name {
	position: absolute;
	left: 1.5rem;
	bottom: 1.25rem;
	z-index: 2;
	font-family: 'Satoshi', system-ui, sans-serif;
	font-weight: 300;
	font-size: clamp(1.3rem, 2.2vw, 1.9rem);
	color: #fff;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
	transition: opacity 0.45s ease;
}

/* Hover state: gradient fades in (no blur), details rise in stacked */
.projects-collage__reveal {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.75rem;
	background: linear-gradient(to top, rgba(25, 36, 44, 0.75) 0%, rgba(25, 36, 44, 0.25) 45%, rgba(25, 36, 44, 0) 75%);
	opacity: 0;
	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.projects-collage__reveal > * {
	transform: translateY(1.2em);
	transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.projects-collage__card:hover .projects-collage__reveal > *,
.projects-collage__card:focus-visible .projects-collage__reveal > * {
	transform: translateY(0);
}

.projects-collage__card:hover .projects-collage__reveal > :nth-child(2),
.projects-collage__card:focus-visible .projects-collage__reveal > :nth-child(2) {
	transition-delay: 0.08s;
}

.projects-collage__card:hover .projects-collage__reveal > :nth-child(3),
.projects-collage__card:focus-visible .projects-collage__reveal > :nth-child(3) {
	transition-delay: 0.14s;
}

.projects-collage__card:hover .projects-collage__media img,
.projects-collage__card:focus-visible .projects-collage__media img {
	transform: scale(1.04);
}

.projects-collage__card:hover .projects-collage__reveal,
.projects-collage__card:focus-visible .projects-collage__reveal {
	opacity: 1;
}

.projects-collage__card:hover .projects-collage__name,
.projects-collage__card:focus-visible .projects-collage__name {
	opacity: 0;
}

.projects-collage__rows {
	border-top: 0;
}

.projects-collage__row {
	font-family: 'Nord', sans-serif;
	font-weight: 500;
	font-size: clamp(0.85rem, 1.2vw, 1rem);
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.92);
	margin: 0;
	padding: 0.5rem 0;
	border-bottom: 0;
}

.projects-collage__view {
	display: inline-block;
	margin-top: 1.25rem;
	font-family: 'Nord', sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 999px;
	padding: 0.55rem 1.2rem;
	align-self: flex-start;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.projects-collage__view:hover {
	background-color: #fff;
	border-color: #fff;
	color: #19242C;
}

/* Closing cell: text + button, bottom-aligned like the mock */
.projects-collage__cta {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
}

.projects-collage__cta-text {
	font-family: 'Ivy', Georgia, serif;
	font-size: clamp(1.1rem, 1.8vw, 1.4rem);
	line-height: 1.5;
	color: rgba(25, 36, 44, 0.85);
	margin: 0 0 1.75rem;
}

.projects-collage__btn {
	border-color: rgba(25, 36, 44, 0.4);
	color: #19242C;
}

.projects-collage__btn:hover {
	background-color: #19242C;
	border-color: #19242C;
	color: #fff;
}

@media (max-width: 767.98px) {
	.projects-collage__grid {
		grid-template-columns: 1fr;
		row-gap: 6px;
	}

	/* Text + button below the images keep their breathing room */
	.projects-collage__grid > .projects-collage__cta {
		margin-top: clamp(2.5rem, 8vw, 3.5rem);
	}

	/* No hover on touch: keep the name, tap goes to the project */
	.projects-collage__name {
		font-size: 1.35rem;
	}
}


/* Projects collage: first image bleeds off the left edge of the browser */
@media (min-width: 768px) {
	.projects-collage__grid > .projects-collage__card:first-child {
		margin-left: calc(-1 * max(var(--page-gutter), calc((100vw - 1320px) / 2 + var(--page-gutter))));
	}
}

/* Mobile: same card bleeds both edges */
@media (max-width: 767.98px) {
	.projects-collage__grid > .projects-collage__card:first-child {
		margin-left: calc(-1 * var(--page-gutter));
		margin-right: calc(-1 * var(--page-gutter));
	}
}


/* Collage composition: 1st hard against the left edge, 2nd hard against the right, 3rd floats */
@media (min-width: 768px) {
	.projects-collage__grid > .projects-collage__card:nth-child(2) {
		margin-right: calc(-1 * max(var(--page-gutter), calc((100vw - 1320px) / 2 + var(--page-gutter))));
	}

	.projects-collage__grid > .projects-collage__card:nth-child(3) {
		width: 72%;
		margin-top: clamp(2rem, 4vw, 3.5rem);
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 767.98px) {
	.projects-collage__grid > .projects-collage__card:nth-child(2) {
		margin-left: calc(-1 * var(--page-gutter));
		margin-right: calc(-1 * var(--page-gutter));
	}

	/* Third bleeds both edges like the others */
	.projects-collage__grid > .projects-collage__card:nth-child(3) {
		width: auto;
		margin-left: calc(-1 * var(--page-gutter));
		margin-right: calc(-1 * var(--page-gutter));
	}
}


/* =============================================
   PROJECTS COLLAGE v2 — smaller portraits, generous whitespace
   (overrides the earlier composition rules)
   ============================================= */

@media (min-width: 768px) {
	.projects-collage__grid {
		grid-template-columns: repeat(12, 1fr);
		row-gap: clamp(5rem, 9vw, 8rem);
	}

	/* 1: portrait hard against the left edge */
	.projects-collage__grid > .projects-collage__card:first-child {
		grid-column: 1 / 6;
		grid-row: 1;
		margin-top: 0;
	}

	/* 2: taller portrait bleeding off the right, dropped below the first */
	.projects-collage__grid > .projects-collage__card:nth-child(2) {
		grid-column: 8 / 13;
		grid-row: 1 / 3;
		margin-top: clamp(3rem, 6vw, 5.5rem);
	}

	/* CTA sits after the last image, aligned left (matches mobile order) */
	.projects-collage__grid > .projects-collage__cta {
		grid-column: 1 / 7;
		grid-row: 5;
		margin-top: 0;
		justify-content: center;
		max-width: 480px;
	}

	/* 3: the floating one — smaller, centred, air on all sides */
	.projects-collage__grid > .projects-collage__card:nth-child(3) {
		grid-column: 4 / 8;
		grid-row: 3;
		width: 100%;
		margin: 0;
	}
}


/* Third collage image: larger while still floating clear of the edges */
@media (min-width: 768px) {
	.projects-collage__grid > .projects-collage__card:nth-child(3) {
		grid-column: 3 / 9;
	}
}


/* Collage with a 4th image: bleeds off the right below the floating one */
@media (min-width: 768px) {
	.projects-collage__grid > .projects-collage__card:nth-child(4) {
		grid-column: 7 / 13;
		grid-row: 4;
		margin-top: 0;
		margin-right: calc(-1 * max(var(--page-gutter), calc((100vw - 1320px) / 2 + var(--page-gutter))));
	}
}

@media (max-width: 767.98px) {
	.projects-collage__grid > .projects-collage__card:nth-child(4) {
		margin-left: calc(-1 * var(--page-gutter));
		margin-right: calc(-1 * var(--page-gutter));
	}
}


/* Fourth image sits alongside the third, slightly dropped */
@media (min-width: 768px) {
	.projects-collage__grid > .projects-collage__card:nth-child(3) {
		grid-column: 2 / 8;
	}

	.projects-collage__grid > .projects-collage__card:nth-child(4) {
		grid-column: 9 / 13;
		grid-row: 3;
		margin-top: clamp(5rem, 10vw, 9rem);
	}
}


/* Collage project name: Nord, smaller */
.projects-collage__name {
	font-family: 'Nord', sans-serif;
	font-weight: 500;
	font-size: clamp(0.85rem, 1.1vw, 1.05rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

@media (max-width: 767.98px) {
	.projects-collage__name {
		font-size: 0.9rem;
	}
}


/* Third collage image nudged left */
@media (min-width: 768px) {
	.projects-collage__grid > .projects-collage__card:nth-child(3) {
		grid-column: 1 / 7;
	}
}


/* Kill the hairline gap above the feature CTA image */
.feature-cta-block {
	margin-top: -1px;
	border-top: 0;
}

.entry-content > *:has(+ .feature-cta-block),
.feature-cta-block > * {
	margin-bottom: 0;
}


/* Collage header: pushed to the right, opposing the intro section above */
.projects-collage__header {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}


/* Homepage services section: solid dark blue */
.services-block {
	background: #19242C !important;
}


/* Contact page mirrored: dark panel left, photo right */
@media (min-width: 992px) {
	.contacts-block .row {
		flex-direction: row-reverse;
	}
}


/* Panel wipe reverses to match the mirrored layout (reveals from the left) */
@media (min-width: 992px) {
	/* Photo moves onto its own layer so it can fade and settle in (it was a
	   static background, so it appeared instantly). Parent's copy is sized
	   to 0 so only the animated layer shows. */
	.contacts-block {
		overflow: hidden;
		background-size: 0 0;
		background-color: #19242C;
	}

	.contacts-block::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 0;
		background-image: inherit;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		opacity: 0;
		transform: scale(1.08);
		transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, transform 2.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
		will-change: opacity, transform;
		pointer-events: none;
	}

	.contacts-block.is-loaded::before {
		opacity: 1;
		transform: none;
	}

	.contacts-block .contacts-panel-col::before,
	.contacts-block .contacts-overlay .bg-dark {
		clip-path: inset(0 100% 0 0);
	}

	.contacts-block.is-loaded .contacts-panel-col::before,
	.contacts-block.is-loaded .contacts-overlay .bg-dark {
		clip-path: inset(0);
	}
}

/* Mobile photo: same soft fade and settle */
@media (max-width: 991.98px) {
	.contacts-block .hero-mobile-img {
		opacity: 0;
		transform: scale(1.08);
		transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, transform 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
	}

	.contacts-block.is-loaded .hero-mobile-img {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.contacts-block::before,
	.contacts-block .hero-mobile-img {
		transform: none !important;
		transition: opacity 0.6s ease !important;
	}
}


/* Panel content aligns to the same left gutter as the header logo */
@media (min-width: 992px) {
	.contacts-block .contacts-panel-col {
		padding-left: max(var(--page-gutter), calc((100vw - 1320px) / 2 + var(--page-gutter)));
	}

	.contacts-block .contacts-headings {
		padding-left: 0;
	}

	.contacts-block .contacts-strip,
	.contacts-block .contacts-form {
		margin-left: 0;
	}

	.contacts-block .contacts-footer {
		padding-left: 0;
		margin-left: 0;
	}
}


/* Correction: the panel column already starts at the container edge where the
   logo sits — no gutter calc needed, just drop its own left padding */
@media (min-width: 992px) {
	.contacts-block .contacts-panel-col {
		padding-left: 0;
	}
}


/* Fine-tune: nudge panel content to the logo's exact left edge */
@media (min-width: 992px) {
	.contacts-block .contacts-panel-col {
		padding-left: 12px;
	}
}


/* First TWI block on a page (the one under the hero): image drops down from the section top */
@media (min-width: 768px) {
	.twi-block:first-of-type .twi-block__image-col {
		padding-top: clamp(3rem, 6vw, 5rem);
	}
}


/* First TWI image: a touch taller */
@media (min-width: 768px) {
	.twi-block:first-of-type .twi-block__image-col {
		min-height: 560px;
	}
}


/* Hero runs its own load choreography — AOS must not also animate it,
   otherwise the two fight and the left column flickers */
.hero-block [data-aos],
.contacts-block [data-aos] {
	opacity: inherit !important;
	transform: none !important;
	transition: none !important;
	animation: none !important;
	pointer-events: auto !important;
}


/* =============================================
   PROJECT GALLERY (single project) — light collage, edge bleeds
   ============================================= */

.project-gallery {
	background-color: #E7E8E9;
	padding: clamp(4rem, 8vw, 7rem) 0;
}

.project-gallery__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
}

.project-gallery__item {
	margin: 0;
}

.project-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (min-width: 768px) {
	/* Repeating 4-image rhythm: left bleed / right bleed dropped / centre float / right bleed */
	.project-gallery__item:nth-child(4n + 1) {
		grid-column: 1 / 7;
		margin-left: calc(-1 * max(var(--page-gutter), calc((100vw - 1320px) / 2 + var(--page-gutter))));
	}

	.project-gallery__item:nth-child(4n + 2) {
		grid-column: 8 / 13;
		margin-top: clamp(3rem, 6vw, 5rem);
		margin-right: calc(-1 * max(var(--page-gutter), calc((100vw - 1320px) / 2 + var(--page-gutter))));
	}

	.project-gallery__item:nth-child(4n + 3) {
		grid-column: 3 / 9;
	}

	.project-gallery__item:nth-child(4n) {
		grid-column: 9 / 13;
		margin-top: clamp(4rem, 8vw, 6rem);
		margin-right: calc(-1 * max(var(--page-gutter), calc((100vw - 1320px) / 2 + var(--page-gutter))));
	}

	.project-gallery__item img {
		aspect-ratio: 4 / 5;
	}

	.project-gallery__item:nth-child(4n + 3) img {
		aspect-ratio: 3 / 2;
	}
}

@media (max-width: 767.98px) {
	.project-gallery__grid {
		grid-template-columns: 1fr;
	}

	.project-gallery__item {
		grid-column: 1 / -1;
	}

	.project-gallery__item:nth-child(odd) {
		margin-left: calc(-1 * var(--page-gutter));
	}

	.project-gallery__item:nth-child(even) {
		margin-right: calc(-1 * var(--page-gutter));
	}
}


/* =============================================
   PROJECT SINGLE — editorial layout (title / hero / intro + details / gallery)
   ============================================= */

.project-single {
	background-color: #E7E8E9;
	color: #19242C;
}

.project-single__header {
	padding: calc(var(--header-height, 90px) + clamp(3rem, 6vw, 5rem)) 0 clamp(2rem, 4vw, 3rem);
}

.project-single__title {
	font-family: 'Ivy', Georgia, serif;
	font-size: clamp(2rem, 5vw, 3.5rem);
	color: #19242C;
	margin: 0;
}

.project-single__hero {
	padding: 0 var(--page-gutter);
}

.project-single__hero-img {
	width: 100%;
	height: auto;
	max-height: 80vh;
	object-fit: cover;
	display: block;
}

.project-single__intro {
	padding: clamp(3rem, 6vw, 5rem) 0;
}

.project-single__intro-grid {
	display: grid;
	grid-template-columns: 7fr 4fr;
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}

.project-single__desc {
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 1.05rem;
	line-height: 1.8;
	color: rgba(25, 36, 44, 0.85);
}

.project-single__desc p:last-child {
	margin-bottom: 0;
}

.project-single__details {
	border-top: 1px solid rgba(25, 36, 44, 0.25);
}

.project-single__detail {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid rgba(25, 36, 44, 0.25);
}

.project-single__detail-label {
	font-family: 'Nord', sans-serif;
	font-size: 0.6rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(25, 36, 44, 0.5);
	padding-top: 0.2rem;
	white-space: nowrap;
}

.project-single__detail-value {
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.95rem;
	color: #19242C;
	text-align: right;
}

/* Gallery: stream of images, orientation-aware */
.project-gallery {
	background-color: #E7E8E9;
	padding: 0 0 clamp(4rem, 8vw, 7rem);
}

.project-gallery__grid {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	justify-content: center;
}

.project-gallery__item {
	margin: 0;
	flex: 1 1 100%;
}

.project-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (min-width: 768px) {
	/* Landscapes run wide; portraits pair up side by side */
	.project-gallery__item.is-landscape {
		flex: 1 1 100%;
	}

	.project-gallery__item.is-portrait {
		flex: 1 1 calc(50% - clamp(1.5rem, 3vw, 2.5rem));
		max-width: calc(50% - clamp(0.75rem, 1.5vw, 1.25rem));
	}
}


/* =============================================
   PROJECT EDITORIAL — light ground + paired stagger gallery (definitive)
   ============================================= */

.project-editorial {
	background-color: #E7E8E9;
}

.project-editorial .cpt-single-body {
	background-color: transparent;
	color: #19242C;
}

.project-editorial .entry-content {
	color: rgba(25, 36, 44, 0.85);
}

.project-flow {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	column-gap: clamp(1.5rem, 3vw, 3rem);
	row-gap: clamp(4rem, 9vw, 8rem);
	padding: clamp(3rem, 6vw, 5rem) var(--page-gutter) clamp(4rem, 8vw, 7rem);
	overflow: hidden;
}

.project-flow__item {
	margin: 0;
	overflow: hidden;
	flex-shrink: 0;
}

.project-flow__item img {
	width: 100%;
	height: auto;
	display: block;
}

@media (min-width: 768px) {
	/* Two per row; height follows each photo's own ratio — no cropping */
	.project-flow__item.is-portrait {
		width: min(41%, 715px);
	}

	.project-flow__item.is-landscape {
		width: min(53%, 945px);
	}

	/* Row layout is assigned in single-project.php */
	/* Right image of each pair drops for the stagger */
	.project-flow__item.is-drop {
		margin-top: clamp(5rem, 11vw, 11rem);
	}

	/* Landscape followed by landscape: own wide row, zig-zagging left/right */
	.project-flow__item.is-solo {
		width: min(66%, 1150px);
	}

	.project-flow__item.is-solo.bleed-right {
		margin-left: auto;
	}

	/* Bleed side alternates row by row */
	.project-flow__item.bleed-left {
		margin-left: calc(-1 * var(--page-gutter));
	}

	.project-flow__item.bleed-right {
		margin-right: calc(-1 * var(--page-gutter));
	}
}

@media (max-width: 767.98px) {
	.project-flow__item {
		width: 90%;
	}

	.project-flow__item:nth-child(odd) {
		align-self: flex-start;
		margin-left: calc(-1 * var(--page-gutter));
	}

	.project-flow__item:nth-child(even) {
		align-self: flex-end;
		margin-right: calc(-1 * var(--page-gutter));
	}
}


/* Project Overview block: light ground, charcoal text (site standard) */
.po-block {
	background-color: #E7E8E9;
}

.po-block__label {
	color: rgba(37, 39, 38, 0.45);
}

.po-block__intro {
	color: #252726;
}

.po-block__body {
	color: rgba(37, 39, 38, 0.72);
}

.po-block__meta-row,
.po-block__meta-row:first-child {
	border-color: rgba(37, 39, 38, 0.2);
}

.po-block__meta-key {
	color: rgba(37, 39, 38, 0.45);
}

.po-block__meta-value {
	color: #252726;
}


/* Force the overview onto the light ground (beats bg-dark wrappers/inline styles) */
.po-block,
.po-block.bg-dark,
.bg-dark .po-block,
.single-project .po-block {
	background-color: #E7E8E9 !important;
}


/* Header stays put while scrolling: no hide, no banner background —
   just the logo and hamburger floating over the page */
#site-header.is-hidden {
	transform: none;
}

#site-header,
#site-header.is-pinned {
	background: transparent;
}

#site-header.is-pinned .site-header__logo-col,
#site-header.is-pinned .site-header__nav-col,
.post-type-archive-project #site-header.is-pinned .site-header__logo-col,
body.has-contacts-hero #site-header.is-pinned .site-header__logo-col,
body.has-contacts-hero #site-header.is-pinned .site-header__nav-col {
	background: transparent !important;
}

/* Inner-hero pages: header was absolute (scrolled away) — pin it too */
.has-inner-hero #site-header {
	position: fixed;
}


/* Header over light sections: logo + hamburger flip to charcoal */
#site-header,
#site-header .site-header__logo-col img,
#site-header .hamburger span,
#site-header .hamburger::before,
#site-header .hamburger::after {
	transition: filter 0.35s ease, background-color 0.35s ease, color 0.35s ease;
}

#site-header.is-on-light {
	color: #252726;
}

#site-header.is-on-light .site-header__logo-col img,
#site-header.is-on-light .site-header__logo img {
	filter: brightness(0) opacity(0.9);
}

#site-header.is-on-light .hamburger span,
#site-header.is-on-light .hamburger::before,
#site-header.is-on-light .hamburger::after,
#site-header.is-on-light .nav-toggle .nav-toggle__bar {
	background-color: #252726;
}


/* Hero CTA: far right, aligned under the hamburger */
.hero-block .hero-buttons {
	justify-content: flex-end;
}

.hero-block .hero-buttons div {
	flex: 0 0 auto;
	text-align: right;
}


/* Site-wide: header columns never carry a background — logo + burger float free */
.site-header__logo-col,
.site-header__nav-col,
body:not(.home):not(.front-page) .site-header__nav-col,
body:not(.home):not(.front-page) .site-header__logo-col {
	background: transparent !important;
}


/* Step 3 textarea: compact — CF7's default rows made it huge */
.contacts-form textarea,
.cf7-steps textarea {
	height: 110px;
	min-height: 110px;
	max-height: 220px;
}


/* No heading above the strip anymore — drop the orphaned top hairline */
.contacts-strip {
	border-top: 0;
}


/* Contact details on one line (desktop) */
@media (min-width: 992px) {
	.contacts-strip {
		flex-wrap: nowrap;
	}

	.contacts-strip__item {
		white-space: nowrap;
	}
}


/* Continue button: arrow affordance + stronger presence */
.cf7-steps__next::after {
	content: '\2192';
	display: inline-block;
	margin-left: 0.85rem;
	transition: transform 0.25s ease;
}

.cf7-steps__next:hover::after {
	transform: translateX(4px);
}

.cf7-steps__next {
	border-color: rgba(var(--ad-sand-rgb), 0.85);
}


/* Slide-out header mirrors the site header's gutter exactly,
   so the logo and X land where the header logo and hamburger sit */
.mobile-menu {
	padding-left: max(var(--page-gutter), calc((100vw - 1320px) / 2 + var(--page-gutter)));
	padding-right: max(var(--page-gutter), calc((100vw - 1320px) / 2 + var(--page-gutter)));
}

@media (max-width: 991.98px) {
	.mobile-menu {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}


/* Header is transparent/floating now — pages start at the very top, no white bar */
#wrapper,
#main {
	padding-top: 0 !important;
}


/* ---- Mobile audit fixes ---- */

/* Tap targets: trimmed buttons fell under 44px on touch */
@media (max-width: 991.98px) {
	.btn,
	.cf7-steps__next,
	.cf7-steps .wpcf7-submit,
	.cf7-steps__back,
	.mobile-menu__close {
		min-height: 44px;
	}

	/* Hero CTA: full-width tap area on phones instead of hugging the right edge */
	.hero-block .hero-buttons {
		justify-content: stretch;
	}

	.hero-block .hero-buttons div {
		flex: 1;
	}

	.hero-block .hero-buttons .btn {
		width: 100%;
		justify-content: space-between;
	}
}


/* ---- Inner service pages ---- */

/* What's Included + FAQ: light ground, charcoal text */
.wi-block,
.faq-block {
	background-color: #E7E8E9;
}

.wi-block__label,
.faq-block__label {
	color: rgba(37, 39, 38, 0.45);
}

.wi-block__heading,
.faq-block__heading,
.wi-block__item-title {
	color: #252726;
}

.wi-block__intro,
.wi-block__item-desc,
.faq-block__answer {
	color: rgba(37, 39, 38, 0.72);
}

.wi-block__items,
.wi-block__item,
.faq-block__accordion,
.faq-block__item {
	border-color: rgba(37, 39, 38, 0.18);
}

.wi-block__item.is-active {
	background: rgba(37, 39, 38, 0.05);
	border-left-color: #252726;
}

.wi-block__item.is-active .wi-block__item-title {
	color: #252726;
}

.wi-block__item.is-active .wi-block__item-desc {
	color: rgba(37, 39, 38, 0.72);
}

.wi-block__item:not(.is-active):hover {
	background: rgba(37, 39, 38, 0.03);
}

.faq-block__question,
.faq-block__question:not(.collapsed) {
	color: #252726;
}

.faq-block__question.collapsed {
	color: rgba(37, 39, 38, 0.6);
}

.faq-block__question:not(.collapsed) .faq-block__icon {
	color: #252726;
}

/* Process section: Background.jpg behind the steps (overlay keeps text readable) */
.ps-block {
	background-image: url('Background.jpg');
}


/* Inner service pages: page canvas itself is light (dark was showing through
   between/behind blocks) */
body.single-service,
body.single-services,
body.single-service #wrapper,
body.single-services #wrapper,
body.single-service #main,
body.single-services #main {
	background-color: #E7E8E9;
}


/* =============================================
   OTHER SERVICES — cross-nav on single service pages
   ============================================= */

.other-services {
	background-color: #19242C;
	padding: clamp(4rem, 7vw, 6rem) 0;
}

.other-services__label {
	font-family: 'Nord', sans-serif;
	font-size: 0.65rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(var(--ad-sand-rgb), 0.45);
	margin: 0 0 0.5rem;
}

.other-services__heading {
	font-family: 'Ivy', Georgia, serif;
	font-size: clamp(1.4rem, 2.5vw, 2rem);
	color: var(--ad-sand);
	margin: 0 0 2.5rem;
}

.other-services__rows {
	border-top: 1px solid rgba(var(--ad-sand-rgb), 0.18);
}

.other-services__row {
	display: flex;
	align-items: baseline;
	gap: 1.5rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid rgba(var(--ad-sand-rgb), 0.18);
	text-decoration: none;
	transition: padding-left 0.3s ease;
}

.other-services__row:hover {
	padding-left: 0.75rem;
}

.other-services__name {
	font-family: 'Nord', sans-serif;
	font-size: clamp(0.95rem, 1.4vw, 1.2rem);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ad-sand);
	white-space: nowrap;
}

.other-services__desc {
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.85rem;
	color: rgba(var(--ad-sand-rgb), 0.55);
	flex: 1;
}

.other-services__arrow {
	color: var(--ad-sand);
	font-size: 1.1rem;
	transition: transform 0.3s ease;
}

.other-services__row:hover .other-services__arrow {
	transform: translateX(6px);
}

@media (max-width: 767.98px) {
	.other-services__row {
		flex-wrap: wrap;
		gap: 0.35rem 1rem;
	}

	.other-services__desc {
		flex: 1 1 100%;
		order: 3;
	}
}


/* Other Services v2: image cards with text overlay */
.other-services__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
}

.other-services__card {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	text-decoration: none;
}

.other-services__card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.other-services__card:hover img {
	transform: scale(1.05);
}

.other-services__card-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(25, 36, 44, 0.75) 0%, rgba(25, 36, 44, 0.05) 55%);
	transition: background-color 0.4s ease;
}

.other-services__card:hover .other-services__card-scrim {
	background-color: rgba(25, 36, 44, 0.25);
}

.other-services__card-name {
	position: absolute;
	left: 1.25rem;
	right: 3rem;
	bottom: 1.15rem;
	font-family: 'Nord', sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	line-height: 1.4;
}

.other-services__card-arrow {
	position: absolute;
	right: 1.25rem;
	bottom: 1rem;
	color: #fff;
	font-size: 1.05rem;
	transition: transform 0.3s ease;
}

.other-services__card:hover .other-services__card-arrow {
	transform: translateX(5px);
}

@media (max-width: 767.98px) {
	.other-services__cards {
		grid-template-columns: 1fr 1fr;
	}

	.other-services__card {
		aspect-ratio: 1 / 1;
	}
}


/* Process block on mobile: the tap-a-step + separate image panel pattern
   doesn't work on small screens — show all steps as stacked image cards instead */
@media (max-width: 991.98px) {
	.ps-block__steps {
		display: none;
	}

	.ps-block__image-panel {
		aspect-ratio: auto;
		margin-top: 0;
		height: auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
	}

	.ps-block__slide {
		position: relative;
		inset: auto;
		opacity: 1;
		aspect-ratio: 4 / 3;
		overflow: hidden;
	}

	.ps-block__slide-img {
		position: absolute;
		inset: 0;
	}

	.ps-block__slide-overlay {
		background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 15%, rgba(0, 0, 0, 0.25) 70%);
	}

	.ps-block__slide-content {
		padding: 1.25rem;
	}

	.ps-block__slide-desc {
		max-width: none;
	}
}


/* Process mobile v2: compact tappable cards — first open, tap to expand */
@media (max-width: 991.98px) {
	.ps-block__slide {
		aspect-ratio: auto;
		height: 88px;
		cursor: pointer;
		transition: height 0.55s cubic-bezier(0.16, 1, 0.3, 1);
		will-change: height;
	}

	.ps-block__slide.is-expanded {
		min-height: 320px;
	}

	.ps-block__slide-content {
		padding: 1rem 1.25rem;
	}

	.ps-block__slide-desc {
		display: none;
	}

	.ps-block__slide.is-expanded .ps-block__slide-desc {
		display: block;
		animation: ps-desc-in 0.4s ease 0.15s both;
	}

	@keyframes ps-desc-in {
		from { opacity: 0; transform: translateY(8px); }
		to   { opacity: 1; transform: none; }
	}

	/* Collapsed: number + title in one compact row with a + hint */
	.ps-block__slide:not(.is-expanded) .ps-block__slide-content {
		top: 0;
		display: flex;
		align-items: center;
		gap: 0.9rem;
	}

	.ps-block__slide:not(.is-expanded) .ps-block__slide-number {
		font-size: 1.6rem;
		margin: 0;
	}

	.ps-block__slide:not(.is-expanded) .ps-block__slide-step-of {
		display: none;
	}

	.ps-block__slide:not(.is-expanded) .ps-block__slide-title {
		margin: 0;
		flex: 1;
	}

	.ps-block__slide:not(.is-expanded) .ps-block__slide-content::after {
		content: '+';
		color: rgba(255, 255, 255, 0.7);
		font-size: 1.3rem;
		line-height: 1;
	}
}


/* Smooth in-page scrolling for anchor links like #process */
html {
	scroll-behavior: smooth;
}

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


/* Process block optional intro paragraph */
.ps-block__intro {
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.95rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.75);
	max-width: 46ch;
	margin: 0 0 2rem;
}


/* Process step description below the image; panel aligns to top */
.ps-block .row.align-items-center {
	align-items: flex-start !important;
}

.ps-block__slide-desc {
	display: none;
}

.ps-block__below-desc {
	display: none;
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.95rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.75);
	padding-top: 1.5rem;
}

.ps-block__below-desc.is-active {
	display: block;
	animation: ps-desc-in 0.4s ease both;
}


/* Process step bullet list */
.ps-block__below-desc p {
	margin: 0 0 1rem;
}

.ps-block__bullets {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ps-block__bullets li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: 0.6rem;
}

.ps-block__bullets li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(var(--ad-sand-rgb), 0.7);
}


/* Step number/title: top-right of the image, right-aligned */
@media (min-width: 992px) {
	.ps-block__slide-content {
		top: 0;
		bottom: auto;
		left: auto;
		right: 0;
		text-align: right;
		padding: 1.75rem 2rem;
	}

	.ps-block__slide-overlay {
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 45%);
	}
}


/* Mobile process fix: below-image text hidden (it sat after ALL cards);
   expanded card shows its own description again, on a solid legible panel */
@media (max-width: 991.98px) {
	.ps-block__below {
		display: none;
	}

	.ps-block__slide.is-expanded {
		min-height: 0;
	}

	.ps-block__slide.is-expanded .ps-block__slide-content {
		position: relative;
		inset: auto;
		background: rgba(0, 0, 0, 0.35);
		padding: 1rem 1.25rem 1.5rem;
		margin-top: 190px; /* image band above the text */
	}

	.ps-block__slide.is-expanded .ps-block__slide-desc {
		display: block;
		font-size: 0.9rem;
		line-height: 1.7;
		color: rgba(255, 255, 255, 0.85);
	}

	.ps-block__slide.is-expanded .ps-block__slide-desc p {
		margin: 0 0 0.75rem;
	}
}


/* Mobile: bullet lists collapsed behind a "View details" toggle */
@media (max-width: 991.98px) {
	.ps-block__slide-desc .ps-block__bullets {
		display: none;
	}

	.ps-block__slide-desc.show-bullets .ps-block__bullets {
		display: block;
	}

	.ps-block__bullets-toggle {
		display: inline-block;
		background: none;
		border: none;
		padding: 0.25rem 0;
		font-family: 'Nord', sans-serif;
		font-size: 0.62rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.85);
		border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	}
}

@media (min-width: 992px) {
	.ps-block__bullets-toggle {
		display: none;
	}
}


/* About/process stacked view: image panel aligns to the same gutter as other sections
   (match the g-5 column padding the section above uses: 1.5rem each side) */
@media (max-width: 991.98px) {
	.ps-block .row {
		margin-left: 0;
		margin-right: 0;
	}

	.ps-block .row > [class*='col-'] {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}


/* Desktop process step list: condensed so all steps fit without scrolling */
@media (min-width: 992px) {
	.ps-block__step {
		padding: 1.1rem 1.25rem;
	}

	.ps-block__step-number {
		font-size: 1.5rem;
	}

	.ps-block__step-title {
		font-size: 0.95rem;
	}
}





/* Image panel flexes: fills the column when text is short, shrinks (to 300px) when bullets need room */
@media (min-width: 992px) {
	.ps-block__image-panel {
		height: auto;
	}

	.ps-block .row > .col-lg-6:last-child {
		display: flex;
		flex-direction: column;
	}

	.ps-block__image-panel {
		flex: 1 1 auto;
		min-height: 300px;
		max-height: 560px;
	}

	.ps-block__below {
		flex: 0 0 auto;
	}
}


/* Row must stretch (template has align-items-center) or the flex column never grows */
@media (min-width: 992px) {
	.ps-block .row.align-items-center,
	.ps-block .row {
		align-items: stretch !important;
	}
}


/* Footer CTA: body copy centred like the heading */
.feature-cta-block .feature-cta-body {
	text-align: center;
	max-width: 62ch;
	margin-left: auto;
	margin-right: auto;
}


/* =============================================
   OUR VALUES — two-column definition grid, light ground
   ============================================= */

.values-block {
	background-color: #E7E8E9;
	padding: clamp(4rem, 8vw, 7rem) 0;
}

.values-block__label {
	font-family: 'Nord', sans-serif;
	font-size: 0.65rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(37, 39, 38, 0.45);
	margin: 0 0 0.5rem;
}

.values-block__heading {
	font-family: 'Ivy', Georgia, serif;
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	color: #252726;
	margin: 0 0 3rem;
}

.values-block__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 7vw, 7rem);
}

.values-block__item-title {
	font-family: 'Nord', sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #252726;
	margin: 0 0 0.9rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid rgba(37, 39, 38, 0.2);
}

.values-block__item-desc {
	font-family: 'Satoshi', system-ui, sans-serif;
	font-size: 0.95rem;
	line-height: 1.8;
	color: rgba(37, 39, 38, 0.72);
	margin: 0;
}

@media (max-width: 767.98px) {
	.values-block__grid {
		grid-template-columns: 1fr;
	}
}


/* Project overview table: value matches key size/weight (values inherited a heavier style) */
.po-block__meta-value {
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 400;
	font-family: inherit;
}

.po-block__meta-value * {
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	margin: 0;
}


/* Step form buttons: pill-rounded like every other button */
.cf7-steps__next,
.cf7-steps .wpcf7-submit {
	border-radius: 100px;
}


/* Form fields + placeholders: consistent size (something was inflating them) */
.contacts-form input:not([type="submit"]),
.contacts-form select,
.contacts-form textarea,
.cf7-steps input:not([type="submit"]),
.cf7-steps select,
.cf7-steps textarea {
	font-size: 0.95rem !important;
}

.contacts-form ::placeholder,
.cf7-steps ::placeholder {
	font-size: 0.95rem !important;
	font-family: 'Satoshi', system-ui, sans-serif;
}


/* Broader net: the step-form fields may sit outside .contacts-form */
.contacts-block input:not([type="submit"]),
.contacts-block select,
.contacts-block textarea,
.wpcf7 input:not([type="submit"]),
.wpcf7 select,
.wpcf7 textarea {
	font-size: 0.875rem !important;
	font-family: 'Satoshi', system-ui, sans-serif !important;
}

.contacts-block input::placeholder,
.contacts-block textarea::placeholder,
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	font-size: 0.875rem !important;
	font-family: 'Satoshi', system-ui, sans-serif !important;
}


/* Swiper lock state: when all slides fit, hide arrows + dots */
.swiper-button-lock,
.slider-dots.swiper-pagination-lock,
.swiper-pagination-lock {
	display: none !important;
}

.services-swiper-prev.swiper-button-lock,
.services-swiper-next.swiper-button-lock {
	display: none !important;
}


/* Other Services cards: landscape ratio on desktop (4:5 was towering with only 2 cards) */
@media (min-width: 992px) {
	.other-services__card {
		aspect-ratio: 3 / 2;
	}
}


/* Service cards: pin the More link to the bottom so all cards' links align
   regardless of description length */
.service-card {
	display: flex;
	flex-direction: column;
}

.service-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.service-card__link {
	margin-top: auto;
	padding-top: 1rem;
	align-self: flex-start;
}


/* The pill More buttons in the services slider are not .service-card__link —
   catch any button/link inside the card body and stop it stretching */
.services-block .services-swiper .service-card .service-card__body a,
.services-block .services-swiper .service-card .btn,
.services-block .services-swiper .service-card .button {
	align-self: flex-start;
	width: auto;
	max-width: max-content;
	margin-top: auto;
}


/* The A lives on the blue panel: the content box's own dark background was
   blanking it out — make it transparent; text still sits above the graphic */
.hero-block .hero-content,
.hero-block .hero-content.bg-dark {
	background: transparent !important;
}


/* The dark half is painted twice. The left column's ::before lives inside
   hero-content (above the A graphic) — kill it on the homepage hero and let
   the overlay's .bg-dark (below the graphic) be the visible panel + wipe,
   so the full A stays visible after the wipe lands. Contacts keeps its ::before. */
@media (min-width: 992px) {
	.hero-block .hero-left-col::before {
		display: none;
	}
}


/* Values icons: brand-gold line icons, stroke-drawn as the item reveals */
.values-block__icon {
	width: 52px;
	height: 52px;
	color: #B08D4F;
	display: block;
	margin-bottom: 1.2rem;
}

.values-block__icon path,
.values-block__icon rect,
.values-block__icon circle {
	stroke-dasharray: 160;
	stroke-dashoffset: 160;
}

.values-block__item.aos-animate .values-block__icon path,
.values-block__item.aos-animate .values-block__icon rect,
.values-block__item.aos-animate .values-block__icon circle {
	animation: vi-draw 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Detail strokes come in after the outline */
.values-block__item.aos-animate .values-block__icon .vi-tick,
.values-block__item.aos-animate .values-block__icon .vi-line,
.values-block__item.aos-animate .values-block__icon .vi-ray {
	animation-delay: 0.7s;
	animation-duration: 0.8s;
}

.values-block__item.aos-animate .values-block__icon .vi-tick-2,
.values-block__item.aos-animate .values-block__icon .vi-line-2 {
	animation-delay: 0.95s;
}

.values-block__item.aos-animate .values-block__icon .vi-pencil {
	animation-delay: 1.1s;
}

@keyframes vi-draw {
	to { stroke-dashoffset: 0; }
}

/* No AOS (reduced motion or script blocked): show icons plainly */
@media (prefers-reduced-motion: reduce) {
	.values-block__icon path,
	.values-block__icon rect,
	.values-block__icon circle {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
		animation: none !important;
	}
}
body:not(.aos-enabled) .values-block__icon path,
body:not(.aos-enabled) .values-block__icon rect,
body:not(.aos-enabled) .values-block__icon circle {
	stroke-dasharray: none;
	stroke-dashoffset: 0;
}


/* Idle loops after the draw-in: each icon keeps a subtle motion */
.values-block__item.aos-animate .values-block__icon {
	animation: vi-idle 5s ease-in-out 2.2s infinite;
	transform-origin: 50% 60%;
}

@keyframes vi-idle {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

/* Collaboration: light rays pulse */
.values-block__item.aos-animate .values-block__icon .vi-ray {
	animation: vi-draw 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.7s forwards,
		vi-pulse 3s ease-in-out 2.2s infinite;
}

@keyframes vi-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
	.values-block__item.aos-animate .values-block__icon,
	.values-block__item.aos-animate .values-block__icon .vi-ray {
		animation: none !important;
	}
}


/* Gold accents in the process block */
.ps-block__label {
	color: #B08D4F;
}

.ps-block__step.is-active .ps-block__step-number {
	color: #B08D4F;
}

.ps-block__step.is-active {
	border-left-color: #B08D4F;
}

.ps-block__step.is-active .ps-block__step-arrow,
.ps-block__step:hover .ps-block__step-arrow {
	color: #B08D4F;
}

/* Gold index on the image corner */
.ps-block__image-number {
	color: #B08D4F;
}


/* Mobile contact page: breathing room between the header/logo and the contact details */
@media (max-width: 991.98px) {
	/* Content aligns with the header logo: drop the row's column gutters so the
	   panel's left edge is the container gutter alone (same as the logo's 1.5rem) */
	.contacts-block .contacts-row {
		--bs-gutter-x: 0;
	}

	.contacts-block .contacts-content.container {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
		max-width: 100%;
	}

	/* The panel's inner pieces carry their own side margins — zero them so
	   everything starts at the container edge, aligned with the logo */
	.contacts-block .contacts-panel-col > * {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}


/* Services "Our Approach": image fills its half flush to the edge like the
   service rows below (drop the 40px inset) — desktop only; mobile keeps
   side gutters to match the stacked service rows */
@media (min-width: 992px) {
	/* Flush left/right, but keep the site's standard 40px top/bottom inset
	   so the image doesn't run into the section below */
	.twi-block--bg-light .twi-block__image {
		padding: 40px 0;
	}

	.twi-block--bg-light .twi-block__image--offset img {
		transform: none;
	}

	/* First TWI block drops its image from the top (see .twi-block:first-of-type);
	   match that drop underneath so the spacing above and below is even */
	.twi-block--bg-light:first-of-type .twi-block__image-col {
		padding-bottom: clamp(3rem, 6vw, 5rem);
	}
}

@media (max-width: 991.98px) {
	.twi-block--bg-light .twi-block__image {
		padding: 2.5rem var(--page-gutter, 24px) 0;
	}
}


/* Services page mobile: How We Work matches the section above's gutters.
   (The JS edge-alignment writes inline styles; !important wins over them.
   Scoped to a ps-block following the services rows so About keeps its own alignment.) */
@media (max-width: 991.98px) {
	/* Neutralise the JS edge-alignment; the block then takes the standard
	   Bootstrap container gutters, same as the sections above it */
	.ps-block .ps-block__image-panel,
	.ps-block__slide {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: auto !important;
		left: auto !important;
		right: auto !important;
	}

	/* The container's own fluid padding matches the sections above; the row's
	   g-5 column gutters were the extra indent — zero them out when stacked */
	.ps-block .row {
		--bs-gutter-x: 0 !important;
	}

	.ps-block .row > [class*="col-"] {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}


/* Mobile: tighten the gap between the contact strip and Start Your Project */
@media (max-width: 991.98px) {
	.contacts-strip + .contacts-form {
		margin-top: 1.75rem !important;
	}
}


/* =============================================
   MOBILE: no entrance choreography — pages render settled, no flash
   ============================================= */
@media (max-width: 991.98px) {
	/* AOS scroll reveals: shorter so scrolling never looks broken */
	[data-aos] {
		transition-duration: 0.45s !important;
	}
}


/* Contact page mobile: the photo sits as a full-width band BELOW the form
   panel instead of hiding behind it */
@media (max-width: 991.98px) {
	.contacts-block {
		flex-direction: column;
		align-items: stretch;
	}

	.contacts-block .contacts-content {
		order: 1;
	}

	.contacts-block .hero-mobile-image {
		position: static;
		inset: auto;
		order: 2;
		width: 100%;
		height: 46vh;
		min-height: 280px;
	}

	.contacts-block .hero-mobile-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/* No photo behind the panel now, so drop the scrim */
	.contacts-block::after {
		display: none;
	}
}


/* Footer: remove the Request a Call Back column and let the remaining
   columns spread evenly across the row */
.footer-col--form {
	display: none !important;
}

@media (min-width: 992px) {
	#footer .row {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	#footer .row > [class*="col-"]:not(.footer-col--form) {
		width: auto;
		flex: 1 1 0;
		max-width: none;
	}
}


/* Consistent image treatment: warm grade — a touch of sepia pulled toward
   the brand gold, with saturation eased back so greens don't dominate.
   Hero and logos excluded. */
.sdb-row__image img,
.twi-block__image img,
.ps-block__slide-img,
.projects-collage img,
.project-card img,
.projects-showcase img,
.project-single__gallery img,
.project-editorial img,
.other-services__card img,
.wi-block img,
.ic-block img,
.team-card img,
.feature-cta-block__bg img,
.service-card__image img,
.project-card__image img,
.projects-block .swiper img,
.project-item__image img,
.hero-mobile-img {
	filter: sepia(0.16) saturate(0.92) contrast(1.04) brightness(1.02);
}



/* Header: full logo at the top, compact A mark once scrolled */
#site-header .site-header__logo-col a {
	position: relative;
	display: inline-flex;
	align-items: center;
}

#site-header .header-a-mark {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 44px;
	width: auto;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

/* The mark's own pieces must be visible inside the header (the hero's
   entrance animation hides them until .is-loaded) */
#site-header .header-a-mark .ad-mark__ring,
#site-header .header-a-mark .ad-mark__a {
	opacity: 1;
	transform: none;
}

#site-header .header-a-mark .ad-mark__a {
	fill: #B68B4B;
}

#site-header .site-header__logo-img {
	transition: opacity 0.3s ease;
}

#site-header.logo-compact .site-header__logo-img,
#site-header.logo-gone .site-header__logo-img {
	opacity: 0;
}

#site-header.logo-compact .header-a-mark {
	opacity: 1;
}

/* Mark is always gold */
#site-header .header-a-mark .ad-mark__a {
	fill: #B68B4B !important;
}

#site-header .header-a-mark .ad-mark__ring {
	stroke: #B68B4B;
}


/* ============================================
   Hero (Open) — no panel wipe; full-bleed image,
   content right of the A graphic
   ============================================ */
.hero-block--open {
	background-size: cover;
	background-position: center;
}

.hero-block--open .hero-open-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(25, 36, 44, 0.55) 0%, rgba(25, 36, 44, 0.15) 45%, rgba(25, 36, 44, 0.35) 100%);
	z-index: 0;
}

@media (min-width: 992px) {
	.hero-block--open .hero-graphic {
		z-index: 1;
	}

	.hero-block--open .hero-open-col {
		z-index: 2;
		padding-top: 15vh;
		padding-bottom: 0;
	}

	/* Heading vertically centred in the right half */
	.hero-block--open .hero-open-col {
		justify-content: center;
	}

	/* Bottom bar spans the container: categories left, button right,
	   one shared baseline like the standard hero */
	.hero-block--open .hero-content {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	/* The row must not enforce its own 100vh (that pushed the bottom bar
	   below the fold) — it just fills what's left above the bottom bar */
	.hero-block--open .hero-content > .row.hero-row-height {
		min-height: 0 !important;
		height: auto;
		flex: 1 1 auto;
	}

	.hero-block--open .hero-open-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
		padding-bottom: 0;
		margin-bottom: -0.5rem;
		position: relative;
		z-index: 2;
	}

	.hero-block--open .hero-open-bottom .hero-categories {
		display: flex;
		gap: 3rem;
		margin: 0;
	}

	.hero-block--open .hero-open-bottom .hero-buttons {
		margin: 0;
	}


}


/* Hero (Open): no wipe to wait for — a staggered luxury entrance instead.
   Graphic first, then heading, categories, button. Overrides the standard
   hero's 3.1s+ delays. */
.hero-block--open .hero-headings,
.hero-block--open .hero-categories,
.hero-block--open .hero-buttons {
	transition-duration: 1.1s, 1.1s;
}

.hero-block--open.is-loaded .hero-headings {
	transition-delay: 0.5s !important;
}

.hero-block--open.is-loaded .hero-categories {
	transition-delay: 0.95s !important;
}

.hero-block--open.is-loaded .hero-buttons {
	transition-delay: 1.3s !important;
}

/* A mark draws in first */
.hero-block--open .ad-mark__ring,
.hero-block--open .ad-mark__a {
	transition-delay: 0.15s !important;
}


/* Hero button hover: gold fill, dark text */
.hero-block .hero-btn:hover,
.hero-block .hero-btn:focus-visible {
	background-color: #B68B4B;
	border-color: #B68B4B;
	color: #19242C;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}


/* Hover on the compact A mark: A fades out fully, THEN the full logo fades in
   (no overlap). Reverses in the same order on mouse-out. */
@media (hover: hover) {
	#site-header.logo-compact .header-a-mark {
		transition: opacity 0.35s ease 0.4s;
	}

	#site-header.logo-compact .site-header__logo-img {
		transition: opacity 0.35s ease 0s;
	}

	#site-header.logo-compact .site-header__logo-link:hover .header-a-mark,
	#site-header.logo-compact .site-header__logo-link:focus-visible .header-a-mark {
		opacity: 0;
		transition: opacity 0.35s ease 0s;
	}

	#site-header.logo-compact .site-header__logo-link:hover .site-header__logo-img,
	#site-header.logo-compact .site-header__logo-link:focus-visible .site-header__logo-img {
		opacity: 1;
		transition: opacity 0.5s ease 0.4s;
	}
}


/* Site-wide text reveal (class applied by JS only) */
.txt-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.txt-reveal.txt-in {
	opacity: 1;
	transform: none;
}

/* Process steps: click-through pill link */
.ps-block__step-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	padding: 0.45rem 1.1rem;
	border: 1px solid rgba(182, 139, 75, 0.55);
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.ps-block__step-link-label {
	font-family: 'Nord', sans-serif;
	font-size: 0.62rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #B68B4B;
	transition: color 0.25s ease;
}

.ps-block__step-link:hover {
	background-color: #B68B4B;
	border-color: #B68B4B;
}

.ps-block__step-link:hover .ps-block__step-link-label {
	color: #19242C;
}

.ps-block__step-link:hover .ps-block__step-arrow {
	filter: brightness(0.2);
}

.ps-block__step .ps-block__step-link .ps-block__step-arrow {
	margin-left: 0;
}

.ps-block__step-link:hover .ps-block__step-arrow {
	transform: translateX(4px);
	transition: transform 0.25s ease;
}

.ps-block__slide-link {
	display: inline-block;
	margin-top: 0.75rem;
	font-family: 'Nord', sans-serif;
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	padding-bottom: 2px;
}

.ps-block__slide-link:hover {
	color: #B68B4B;
	border-bottom-color: #B68B4B;
}


/* Footer: divider between the link columns and the bottom logo bar */
.footer-bottom {
	border-top: 1px solid rgba(var(--ad-sand-rgb), 0.18);
}


/* Projects archive: caption overlays the photo (like the homepage collage)
   instead of sitting as a dark bar underneath */
.project-item {
	position: relative;
}

.project-item {
	overflow: hidden;
}

.project-item__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to top, rgba(25, 36, 44, 0.65) 0%, rgba(25, 36, 44, 0) 100%);
	padding: 2.25rem 1.5rem 1.25rem;
}

.project-item__caption-location {
	font-family: 'Nord', sans-serif;
	font-weight: 500;
	color: #fff;
}


/* Projects archive: light theme */
.projects-archive {
	background: #E7E8E9;
}

.projects-nav__item,
.projects-nav__item:first-child {
	border-color: rgba(25, 36, 44, 0.12);
}

.projects-nav__link {
	color: rgba(25, 36, 44, 0.22);
}

.projects-nav__link::before {
	color: rgba(25, 36, 44, 0.4);
}

.projects-nav__item.is-active .projects-nav__link {
	color: #19242C;
}

/* No focus ring after a mouse click; keyboard focus still shows it */
.projects-nav__link:focus:not(:focus-visible) {
	outline: none;
}

/* "View project" cue on the selected row only — signals the second click */
.projects-nav__link::after {
	content: "View project";
	margin-left: auto;
	align-self: center;
	font-size: 0.42em;
	font-weight: 600;
	letter-spacing: 0.22em;
	white-space: nowrap;
	color: #19242C;
	padding-bottom: 0.45em;
	background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat;
	opacity: 0;
	transform: translateX(-0.8em);
	transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), background-size 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
}

.projects-nav__item.is-active .projects-nav__link:hover::after,
.projects-nav__item.is-active .projects-nav__link:focus-visible::after {
	opacity: 1;
	transform: none;
	background-size: 100% 1px;
	transition-delay: 0s;
}

.projects-nav__item[data-distance="1"] .projects-nav__link {
	color: rgba(25, 36, 44, 0.5);
}

.projects-nav__item[data-distance="2"] .projects-nav__link {
	color: rgba(25, 36, 44, 0.28);
}

.projects-nav__item[data-distance="3"] .projects-nav__link {
	color: rgba(25, 36, 44, 0.16);
}


/* Projects archive is light everywhere — force the charcoal header by body
   class, independent of the JS probe */
body.post-type-archive-project #site-header .site-header__logo-col img,
body.post-type-archive-project #site-header .site-header__logo img {
	filter: brightness(0) opacity(0.9);
}

body.post-type-archive-project #site-header .nav-toggle .nav-toggle__bar {
	background-color: #252726;
}


/* Inner service hero: hide CTAs, show an animated scroll cue instead */
body.single-service .hero-inner-block .hero-buttons {
	display: none !important;
}

.scroll-cue {
	position: absolute;
	left: max(var(--page-gutter), calc((100vw - 1320px) / 2 + var(--page-gutter)));
	bottom: 2rem;
	width: 24px;
	height: 64px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	z-index: 3;
	overflow: hidden;
}

/* Arrow: gold shaft + head, drifting downward on a loop */
.scroll-cue__line {
	position: absolute;
	left: 50%;
	top: 0;
	width: 16px;
	height: 40px;
	margin-left: -8px;
	display: block;
	animation: scrollCueDrift 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.scroll-cue__line::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: 1px;
	height: 100%;
	margin-left: -0.5px;
	background: #B68B4B;
}

.scroll-cue__line::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 10px;
	height: 10px;
	border-right: 1px solid #B68B4B;
	border-bottom: 1px solid #B68B4B;
	transform: translateX(-50%) rotate(45deg);
	transform-origin: center;
}

@keyframes scrollCueDrift {
	0% { transform: translateY(-110%); opacity: 0; }
	25% { opacity: 1; }
	70% { transform: translateY(80%); opacity: 1; }
	100% { transform: translateY(110%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.scroll-cue__line {
		animation: none;
		transform: translateY(30%);
	}
}


/* Testimonials: flat #19242C only — no textured background image */
.testimonials-block {
	background-image: none !important;
	background-color: #19242C !important;
}





/* Next Project: solid light ground, charcoal ink */
.next-project-block {
	background-image: none !important;
	background-color: #E7E8E9 !important;
}

.next-project-block__overlay {
	display: none;
}

.next-project-block__label {
	color: rgba(37, 39, 38, 0.5);
}

.next-project-block__title {
	color: #252726;
}

.next-project-block .btn-outline-light,
.next-project-block__btn {
	color: #252726 !important;
	border-color: rgba(37, 39, 38, 0.45) !important;
}

.next-project-block .btn-outline-light:hover,
.next-project-block__btn:hover {
	background-color: #252726 !important;
	border-color: #252726 !important;
	color: #E7E8E9 !important;
}


/* Projects archive: caption hidden until hover, text rises in (no blur) */
@media (hover: hover) {
	.project-item__caption {
		opacity: 0;
		transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.project-item__caption-location,
	.project-item__caption-cat {
		display: inline-block;
		transform: translateY(1.2em);
		transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.project-item:hover .project-item__caption,
	.project-item.is-hover .project-item__caption {
		opacity: 1;
	}

	.project-item:hover .project-item__caption-location,
	.project-item:hover .project-item__caption-cat,
	.project-item.is-hover .project-item__caption-location,
	.project-item.is-hover .project-item__caption-cat {
		transform: translateY(0);
	}

	.project-item:hover .project-item__caption-cat,
	.project-item.is-hover .project-item__caption-cat {
		transition-delay: 0.08s;
	}

	/* View Project pill, rises in after the title */
	.project-item__caption::after {
		content: "View Project";
		position: absolute;
		right: 1.5rem;
		bottom: 1.25rem;
		font-family: 'Nord', sans-serif;
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: #fff;
		border: 1px solid rgba(255, 255, 255, 0.6);
		border-radius: 999px;
		padding: 0.55rem 1.2rem;
		opacity: 0;
		transform: translateY(1.2em);
		transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.12s, opacity 0.5s ease 0.12s, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
	}

	.project-item:hover .project-item__caption::after,
	.project-item.is-hover .project-item__caption::after {
		opacity: 1;
		transform: translateY(0);
	}

	/* Pill fills when the cursor reaches the caption strip itself */
	.project-item__caption:hover::after {
		background-color: #fff;
		border-color: #fff;
		color: #19242C;
	}
}


/* Process step rows: staggered rise-in when the block scrolls into view */
@media (min-width: 992px) {
	.ps-block__step {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.ps-block.steps-in .ps-block__step {
		opacity: 1;
		transform: translateY(0);
	}

	.ps-block.steps-in .ps-block__step:nth-child(2) { transition-delay: 0.1s; }
	.ps-block.steps-in .ps-block__step:nth-child(3) { transition-delay: 0.2s; }
	.ps-block.steps-in .ps-block__step:nth-child(4) { transition-delay: 0.3s; }
	.ps-block.steps-in .ps-block__step:nth-child(5) { transition-delay: 0.4s; }
	.ps-block.steps-in .ps-block__step:nth-child(6) { transition-delay: 0.5s; }
}

@media (prefers-reduced-motion: reduce) {
	.ps-block__step {
		opacity: 1 !important;
		transform: none !important;
	}
}


/* Other Services cards: long names wrapped under the arrow on mobile.
   Bound the name's right edge so it always clears the arrow. */
@media (max-width: 767.98px) {
	.other-services__card-name {
		right: 2.75rem;
	}

	.other-services__card-arrow {
		right: 0.9rem;
	}
}


/* Footer reveal: whole footer fades up when it enters view */
.ft-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ft-reveal.ft-in {
	opacity: 1;
	transform: none;
}

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


/* Vimeo background embed: cover-crop the 16:9 player to fill the hero */
.hero-block .hero-video-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}

.hero-block .hero-video-frame {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw; /* 16:9 */
	min-height: 100%;
	min-width: 177.78vh;
	transform: translate(-50%, -50%);
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.hero-block .hero-video-wrap {
		display: none;
	}
}


/* =============================================
   Legal / text page template
   ============================================= */

.legal-page {
	background: #E7E8E9;
	color: #19242C;
}

/* Header keeps the grey ground; everything below it is white */
.legal-page__body {
	background: #fff;
}

/* The page title already appears in the header — hide a duplicate
   heading at the top of the editor content */
.legal-page__content > h1:first-child,
.legal-page__content > h2:first-child {
	display: none;
}

/* Header logo + burger are charcoal on this light template */
body.page-template-page-legal #site-header .site-header__logo-col img,
body.page-template-page-legal #site-header .site-header__logo img {
	filter: brightness(0) opacity(0.9);
}

body.page-template-page-legal #site-header .nav-toggle .nav-toggle__bar {
	background-color: #252726;
}

.legal-page__header {
	padding: clamp(7rem, 14vh, 11rem) 0 clamp(2rem, 4vh, 3rem);
}

.legal-page__label {
	font-family: 'Nord', sans-serif;
	font-size: 0.7rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #B68B4B;
	margin: 0 0 1rem;
}

.legal-page__title {
	font-family: 'Ivy', serif;
	font-weight: 400;
	font-size: clamp(2.4rem, 5.5vw, 4.25rem);
	line-height: 1.05;
	margin: 0;
	color: #19242C;
}

.legal-page__updated {
	font-family: 'Nord', sans-serif;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(25, 36, 44, 0.5);
	margin: 1.25rem 0 0;
}

.legal-page__body {
	padding: 0 0 clamp(5rem, 12vh, 9rem);
	margin-top: 0;
}

.legal-page__body .container {
	padding-top: clamp(2rem, 4vh, 3rem);
}

/* Editor blocks bring their own container padding — strip it so the body
   copy aligns with the page heading above, and close the top gap */
.legal-page__content .container,
.legal-page__content .wp-block-group,
.legal-page__content .wp-block-group__inner-container,
.legal-page__content > section,
.legal-page__content > div {
	padding-left: 0 !important;
	padding-right: 0 !important;
	max-width: none;
	width: auto;
	margin-left: 0;
	margin-right: 0;
}

.legal-page__content > *:first-child,
.legal-page__content > div:first-child > *:first-child,
.legal-page__content > section:first-child > *:first-child {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.legal-page__content > section:first-child,
.legal-page__content > div:first-child {
	padding-top: 0 !important;
}

/* Readable measure, offset from the left like the rest of the site */
.legal-page__content {
	max-width: 46rem;
	font-size: clamp(0.95rem, 1.05vw, 1.0625rem);
	line-height: 1.75;
	color: rgba(25, 36, 44, 0.86);
	text-wrap: pretty;
}

.legal-page__content > *:first-child {
	margin-top: 0;
}

.legal-page__content h2 {
	font-family: 'Ivy', serif;
	font-weight: 400;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	line-height: 1.2;
	color: #19242C;
	margin: 3rem 0 1rem;
}

.legal-page__content h3 {
	font-family: 'Nord', sans-serif;
	font-weight: 500;
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #19242C;
	margin: 2.25rem 0 0.75rem;
}

.legal-page__content h4 {
	font-family: 'Nord', sans-serif;
	font-weight: 500;
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	color: #19242C;
	margin: 1.75rem 0 0.5rem;
}

.legal-page__content p {
	margin: 0 0 1.15rem;
}

.legal-page__content ul,
.legal-page__content ol {
	margin: 0 0 1.4rem;
	padding-left: 1.2rem;
}

.legal-page__content li {
	margin-bottom: 0.5rem;
	padding-left: 0.35rem;
}

.legal-page__content li::marker {
	color: #B68B4B;
}

.legal-page__content strong,
.legal-page__content b {
	color: #19242C;
	font-weight: 700 !important;
}

.legal-page__content a {
	color: #B68B4B;
	text-decoration: none;
	border-bottom: 1px solid rgba(182, 139, 75, 0.4);
	transition: color 0.3s ease, border-color 0.3s ease;
}

.legal-page__content a:hover {
	color: #19242C;
	border-color: rgba(25, 36, 44, 0.5);
}

.legal-page__content hr {
	border: 0;
	border-top: 1px solid rgba(25, 36, 44, 0.14);
	margin: 3rem 0;
}

@media (max-width: 767.98px) {
	.legal-page__header {
		padding-top: clamp(5.5rem, 16vh, 8rem);
	}
}


/* Mobile hero: the dark panel wipes up at 1.9s, so hold the text until it
   has arrived — otherwise the copy appears over nothing */
@media (max-width: 991.98px) {
	.hero-block.is-loaded .hero-headings,
	.hero-block--open.is-loaded .hero-headings {
		transition-delay: 2.3s !important;
	}

	.hero-block.is-loaded .hero-categories,
	.hero-block--open.is-loaded .hero-categories {
		transition-delay: 2.6s !important;
	}

	.hero-block.is-loaded .hero-buttons,
	.hero-block--open.is-loaded .hero-buttons {
		transition-delay: 2.85s !important;
	}
}


/* Mobile hero: clear the bottom edge so the button isn't flush to it */
@media (max-width: 991.98px) {
	.hero-block .hero-buttons {
		margin-bottom: 2rem;
	}
}


/* Mobile: close the gap between the hero and the first image section */
@media (max-width: 991.98px) {
	.hero-block + .ic-block,
	.hero-block + section,
	.ic-block {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}

	.hero-block + .ic-block > .container:first-child,
	.ic-block > .container:first-child {
		padding-top: 0 !important;
	}

	.ic-block__grid > *:first-child {
		margin-top: 0 !important;
	}
}


/* Smooth logo fade on scroll (keeps the colour-flip transition too) */
#site-header .site-header__logo-col img,
#site-header .site-header__logo-img,
#site-header .header-a-mark {
	transition: opacity 0.5s ease, filter 0.35s ease, visibility 0.5s ease;
}

#site-header.logo-gone .site-header__logo-img,
#site-header.logo-compact .site-header__logo-img {
	opacity: 0;
}

/* No white gap between the last block and the footer */
#main > .content > p:empty,
#main > .content > p:last-child:has(> br:only-child),
#main > .content > .wp-block-spacer:last-child {
	display: none;
}

#main > .content,
#main > .content > :last-child {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.feature-cta-block {
	margin-bottom: 0;
}

/* Hovering the compact A mark brings back the full logo
   (colour follows .is-on-light, so it's correct on dark or light sections) */
@media (hover: hover) {
	#site-header.logo-compact .site-header__logo-img,
	#site-header.logo-compact .header-a-mark {
		transition: opacity 0.5s ease, filter 0.35s ease;
	}

	#site-header.logo-compact .site-header__logo-link:hover .site-header__logo-img {
		opacity: 1;
		transition: opacity 0.5s ease, filter 0.35s ease;
	}

	#site-header.logo-compact .site-header__logo-link:hover .header-a-mark {
		opacity: 0;
		transition: opacity 0.5s ease;
	}
}

/* Projects page: keep the project list clear of the logo on short windows.
   Reserve space for the header, and shrink the rows with the window height
   so all projects still fit. */
@media (min-width: 768px) {
	.projects-archive__sidebar {
		padding-top: 110px;
		padding-bottom: 2rem;
	}

	.projects-nav {
		width: 100%;
		max-height: 100%;
	}

	.projects-nav__link {
		font-size: clamp(0.8rem, min(1.8vw, 2.6vh), 1.6rem);
		padding: clamp(0.35rem, 1.1vh, 0.85rem) 0;
	}
}

/* Page transitions: every page fades in on arrival, and fades out
   when an internal link is clicked (class added by main.js) */
@keyframes ad-page-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

#main,
#footer {
	animation: ad-page-in 0.7s ease both;
}

html.is-leaving #main,
html.is-leaving #footer,
html.is-leaving #site-header {
	opacity: 0 !important;
	transition: opacity 0.35s ease !important;
}

@media (prefers-reduced-motion: reduce) {
	#main,
	#footer {
		animation: none;
	}
}

/* Contact form: stay hidden until the steps are built, then fade in.
   Stops the form flashing unstyled on a first (uncached) visit.
   Fallback: reveals itself after 2.5s even if the script never runs. */
@keyframes cf7-steps-fallback {
	to { opacity: 1; }
}

[data-cf7-steps],
.cf7-steps {
	opacity: 0;
	transition: opacity 0.6s ease;
	animation: cf7-steps-fallback 0s linear 2.5s forwards;
}

[data-cf7-steps].is-ready,
.cf7-steps.is-ready {
	opacity: 1;
	animation: none;
}