/**
 * Taylor Williams Roofing home hero — Manrope + layout.
 */

:root {
	--tw-frame-inset: clamp(14px, 2.2vw, 28px);
	--tw-hero-shell: rgba(77, 77, 77, 0.85);
	--tw-hero-shell-solid: #4d4d4d;
	/* Legacy aliases — prefer --tw-hero-shell* in new rules */
	--tw-hero-charcoal: var(--tw-hero-shell);
	--tw-hero-charcoal-solid: var(--tw-hero-shell-solid);
	--tw-hero-navy: var(--tw-hero-shell);
	--tw-hero-navy-solid: var(--tw-hero-shell-solid);
	--tw-hero-accent: #1a1a1a;
	--tw-hero-accent-hover: #333333;
	--tw-hero-btn-accent: #2a2a2a;
	--tw-hero-btn-accent-hover: #383838;
	--tw-hero-shell-gradient: linear-gradient(
		125deg,
		rgba(26, 26, 26, 0.98) 0%,
		rgba(77, 77, 77, 0.94) 48%,
		rgba(40, 40, 40, 0.96) 100%
	);
	--tw-hero-shell-overlay: linear-gradient(
		120deg,
		rgba(26, 26, 26, 0.88) 0%,
		rgba(77, 77, 77, 0.72) 45%,
		rgba(40, 40, 40, 0.65) 100%
	);
	--tw-heading-color: var(--tw-hero-accent, #1a1a1a);
	--tw-hero-btn-muted: rgba(255, 255, 255, 0.14);
	--tw-hero-btn-muted-border: rgba(255, 255, 255, 0.12);
	--tw-hero-icon-bg: rgba(255, 255, 255, 0.12);
	/* Must exceed max frame inset or inner curve collapses to square */
	--tw-hero-radius: clamp(28px, 4.5vw, 42px);
	/* Hero image/gradient (inside white frame) — use for surfaces inset in the same channel, e.g. testimonials charcoal shell */
	--tw-hero-inner-radius: max(0px, calc(var(--tw-hero-radius) - var(--tw-frame-inset)));
	/* Grey wash over hero photo */
	--tw-hero-overlay-gradient: linear-gradient(
		120deg,
		rgba(30, 30, 30, 0.92) 0%,
		rgba(77, 77, 77, 0.78) 45%,
		rgba(40, 40, 40, 0.72) 100%
	);
	/* Grey wash layer over hero / about photos (gradient alphas × this opacity) */
	--tw-hero-photo-overlay-opacity: 0.92;
	--tw-hero-max: 1180px;
	/* Hero inner: equal base inset on X and Y; sides also respect safe areas */
	--tw-hero-pad: clamp(1.35rem, 5vw, 3.25rem);
	--tw-hero-pad-x: max(var(--tw-hero-pad), env(safe-area-inset-left, 0px));
	--tw-hero-pad-x-end: max(var(--tw-hero-pad), env(safe-area-inset-right, 0px));
	--tw-hero-pad-y: var(--tw-hero-pad);
	/* Vertical air between main bands only — section inners already use full --tw-hero-pad; half gap avoids double rhythm */
	--tw-home-section-gap: calc(var(--tw-hero-pad) * 0.5);
	/* Small viewport: hero always fits visible area (mobile toolbars). Fallback: vh/vw. */
	--tw-hero-vh: 100vh;
	--tw-hero-vw: 100vw;
	/* Homepage hero lockup — 75% of 2× lockup (inner header/footer unchanged) */
	--tw-home-logo-max-height: clamp(7.236rem, 16.2vw, 9.72rem);
	--tw-home-logo-max-height-fallback: clamp(7.236rem, 16.2vh, 9.72rem);
	--tw-home-logo-max-width: min(100%, 47.52rem);
	/* Bento (shared when home-hero.css is enqueued) */
	--tw-bento-gap: clamp(0.75rem, 2vw, 1.25rem);
	--tw-bento-radius: clamp(18px, 2.8vw, 24px);
	--tw-bento-cell-bg: var(--tw-color-bg, #f5f4f0);
	--tw-bento-cell-border: 1px solid rgba(26, 26, 26, 0.1);
	--tw-bento-cell-shadow: 0 10px 40px rgba(26, 26, 26, 0.07);
	--tw-bento-page-bg: transparent;
	/* Soft horizontal edge feather (client marquee + testimonials carousel) */
	--tw-edge-mask-marquee: linear-gradient(
		90deg,
		transparent 0%,
		rgba(0, 0, 0, 0.07) 5%,
		rgba(0, 0, 0, 0.28) 10%,
		rgba(0, 0, 0, 0.58) 16%,
		rgba(0, 0, 0, 0.88) 22%,
		#000 28%,
		#000 72%,
		rgba(0, 0, 0, 0.88) 78%,
		rgba(0, 0, 0, 0.58) 84%,
		rgba(0, 0, 0, 0.28) 90%,
		rgba(0, 0, 0, 0.07) 95%,
		transparent 100%
	);
	--tw-edge-mask-right: linear-gradient(
		90deg,
		#000 0%,
		#000 72%,
		rgba(0, 0, 0, 0.88) 78%,
		rgba(0, 0, 0, 0.58) 84%,
		rgba(0, 0, 0, 0.28) 90%,
		rgba(0, 0, 0, 0.07) 95%,
		transparent 100%
	);
	--tw-edge-mask-left: linear-gradient(
		90deg,
		transparent 0%,
		rgba(0, 0, 0, 0.07) 5%,
		rgba(0, 0, 0, 0.28) 10%,
		rgba(0, 0, 0, 0.58) 16%,
		rgba(0, 0, 0, 0.88) 22%,
		#000 28%,
		#000 100%
	);
	/* Narrower left feather when only “scroll left” applies (e.g. last slide) — avoids sitting on the centred card */
	--tw-edge-mask-left-soft: linear-gradient(
		90deg,
		transparent 0%,
		rgba(0, 0, 0, 0.12) 4%,
		rgba(0, 0, 0, 0.45) 9%,
		rgba(0, 0, 0, 0.82) 14%,
		#000 18%,
		#000 100%
	);
}

@supports (height: 100svh) {
	:root {
		--tw-hero-vh: 100svh;
		--tw-hero-vw: 100svw;
	}
}

/* WordPress admin bar — keep full hero + border in view below bar */
body.admin-bar {
	--tw-hero-vh: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
}

@supports (height: 100svh) {
	body.admin-bar {
		--tw-hero-vh: calc(100svh - var(--wp-admin--admin-bar--height, 32px));
	}
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--tw-hero-vh: calc(100vh - var(--wp-admin--admin-bar--height, 46px));
	}

	@supports (height: 100svh) {
		body.admin-bar {
			--tw-hero-vh: calc(100svh - var(--wp-admin--admin-bar--height, 46px));
		}
	}
}

/* --- Front page: standard document scroll; hero first, then main card --- */

body.tw-carpentry-home {
	margin: 0;
	background: var(--tw-color-surface, #ffffff);
	overflow-x: clip;
}

/* In-page nav: smooth scroll to section bands (not heading text). */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

#about,
#projects,
#services {
	scroll-margin-top: clamp(0.75rem, 2.5vw, 1.5rem);
}

/* --- About / Services section overlays (#about, #services) — all pages --- */

body.tw-section-overlay-open {
	overflow: hidden;
}

.tw-section-overlay {
	--tw-section-overlay-dur: 0.42s;
	--tw-section-overlay-ease: cubic-bezier(0.32, 0.72, 0, 1);
	position: fixed;
	inset: 0;
	z-index: 49900;
	display: flex;
	align-items: stretch;
	justify-content: center;
	box-sizing: border-box;
	padding: max(env(safe-area-inset-top, 0px), 0.75rem) max(env(safe-area-inset-right, 0px), 0.75rem)
		max(env(safe-area-inset-bottom, 0px), 0.75rem) max(env(safe-area-inset-left, 0px), 0.75rem);
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear calc(var(--tw-section-overlay-dur) + 0.04s);
}

.tw-section-overlay__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--tw-hero-overlay-gradient);
	opacity: 0;
	transition: opacity var(--tw-section-overlay-dur) var(--tw-section-overlay-ease);
}

.tw-section-overlay__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(100%, 52rem);
	max-height: 100%;
	margin: auto;
	align-self: center;
	background: var(--tw-color-surface, #2a2a2a);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: clamp(0.5rem, 1.5vw, 0.85rem);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
	overflow: hidden;
	transform: translate3d(0, 108%, 0);
	opacity: 0;
	transition:
		transform var(--tw-section-overlay-dur) var(--tw-section-overlay-ease),
		opacity calc(var(--tw-section-overlay-dur) * 0.85) var(--tw-section-overlay-ease);
}

.tw-section-overlay__panel--wide {
	width: min(100%, 68rem);
}

.tw-section-overlay.is-open {
	visibility: visible;
	pointer-events: auto;
	transition: visibility 0s;
}

.tw-section-overlay.is-open .tw-section-overlay__backdrop {
	opacity: 0.94;
}

.tw-section-overlay.is-open .tw-section-overlay__panel {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}

.tw-section-overlay.is-closing {
	visibility: visible;
	pointer-events: auto;
	transition: none;
}

.tw-section-overlay.is-closing .tw-section-overlay__backdrop {
	opacity: 0;
}

.tw-section-overlay.is-closing .tw-section-overlay__panel {
	transform: translate3d(0, 108%, 0);
	opacity: 0;
}

.tw-section-overlay__bar {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-shrink: 0;
	padding: 0.65rem 0.75rem 0.35rem;
}

.tw-section-overlay__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: inherit;
	cursor: pointer;
	transition:
		background 0.2s ease,
		border-color 0.2s ease;
}

.tw-section-overlay__close:hover,
.tw-section-overlay__close:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.35);
}

.tw-section-overlay__close:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.5);
	outline-offset: 2px;
}

.tw-section-overlay__close-icon {
	position: relative;
	display: block;
	width: 1rem;
	height: 1rem;
}

.tw-section-overlay__close-icon::before,
.tw-section-overlay__close-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1rem;
	height: 2px;
	margin: -1px 0 0 -0.5rem;
	background: currentColor;
	border-radius: 1px;
}

.tw-section-overlay__close-icon::before {
	transform: rotate(45deg);
}

.tw-section-overlay__close-icon::after {
	transform: rotate(-45deg);
}

.tw-section-overlay__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 0 1rem 1.5rem;
}

.tw-section-overlay__scroll.tw-home-section {
	padding-top: 0;
}

.tw-section-overlay--services .tw-home-section__inner {
	padding-bottom: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.tw-section-overlay,
	.tw-section-overlay__backdrop,
	.tw-section-overlay__panel {
		transition: none;
	}

	.tw-section-overlay__panel {
		transform: none;
		opacity: 1;
	}

	.tw-section-overlay:not(.is-open) .tw-section-overlay__panel {
		opacity: 0;
	}
}

/* --- Full-screen contact overlay (#contact) — hero-matched shell --- */

body.tw-contact-overlay-open {
	overflow: hidden;
}

.tw-contact-overlay {
	--tw-contact-overlay-dur: 0.44s;
	--tw-contact-overlay-ease: cubic-bezier(0.32, 0.72, 0, 1);
	--tw-contact-ease-out: cubic-bezier(0.2, 0.82, 0.2, 1);
	--tw-contact-ease-in-out: cubic-bezier(0.2, 0.82, 0.2, 1);
	--tw-contact-ease-in: cubic-bezier(0.4, 0, 1, 1);
	--tw-contact-hero-in-ease: cubic-bezier(0.2, 0.82, 0.2, 1);
	/* Hero in: slide → short pause → shrink + frame border (square shell); form fades mid-timeline */
	--tw-contact-hero-in-dur: 2.35s;
	--tw-contact-hero-out-dur: 0.45s;
	--tw-contact-step: 0.08s;
	/* Form copy starts mid–late hero-in (not after full duration) */
	--tw-contact-content-t0: calc(var(--tw-contact-hero-in-dur) * 0.52 + 0.04s);
	--tw-contact-t-photo: var(--tw-contact-content-t0);
	--tw-contact-t-title: calc(var(--tw-contact-content-t0) + 0.05s);
	--tw-contact-t-bar: calc(var(--tw-contact-content-t0) + 0.09s);
	--tw-contact-t-form: calc(var(--tw-contact-content-t0) + 0.13s);
	/* OR pill + divider share one stroke token */
	--tw-contact-or-hr: rgba(255, 255, 255, 0.22);
	position: fixed;
	inset: 0;
	z-index: 100200;
	display: flex;
	align-items: stretch;
	justify-content: center;
	box-sizing: border-box;
	padding: max(env(safe-area-inset-top, 0px), 0px) max(env(safe-area-inset-right, 0px), 0px)
		max(env(safe-area-inset-bottom, 0px), 0px) max(env(safe-area-inset-left, 0px), 0px);
	background: transparent;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear calc(var(--tw-contact-hero-out-dur) + 0.04s);
}

/* Backdrop: full-bleed charcoal wash, square corners (radius only on the hero card / image) */
.tw-contact-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: 0;
	background: var(--tw-hero-overlay-gradient);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s var(--tw-contact-ease-in-out);
}

.tw-contact-overlay.is-open {
	visibility: visible;
	pointer-events: auto;
	transition: visibility 0s;
}

.tw-contact-overlay.is-open::before {
	opacity: 0.92;
	pointer-events: auto;
}

.tw-contact-overlay.is-closing::before {
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tw-contact-hero-out-dur) var(--tw-contact-ease-in);
}

.tw-contact-overlay.is-closing {
	visibility: visible;
	pointer-events: auto;
	transition: none;
}

/* Closed / idle: hero panel off-screen, full-bleed “grey stage” sizing */
.tw-contact-overlay:not(.is-open):not(.is-closing) .tw-contact-overlay__hero.tw-hero-home {
	animation: none;
	transform: translate3d(0, 110%, 0) scale(1);
	width: 100dvw;
	height: 100dvh;
	max-width: none;
	min-height: 100dvh;
	max-height: none;
	margin: 0 auto;
	align-self: stretch;
	border-width: 0;
	border-radius: 0;
	/* Same stack as main hero: image + wash, not a solid accent fill */
	background-color: transparent;
}

.tw-contact-overlay__hero.tw-hero-home {
	position: relative;
	z-index: 1;
	width: min(var(--tw-hero-vw), 100%);
	max-width: 100%;
	height: min(var(--tw-hero-vh), 100%);
	min-height: min(var(--tw-hero-vh), 100%);
	max-height: min(var(--tw-hero-vh), 100%);
	margin: auto;
	flex: 0 1 auto;
	border-style: solid;
	border-color: var(--tw-color-bg, #f5f4f0);
	background-color: transparent;
	/* Square shell + beige frame; rounded photo lives on .tw-hero-home__bg / __overlay */
	border-radius: 0;
	will-change: transform, opacity, width, height, border-width;
}

.tw-contact-overlay.is-open .tw-contact-overlay__hero.tw-hero-home {
	animation: tw-contact-hero-in var(--tw-contact-hero-in-dur) var(--tw-contact-hero-in-ease) both;
}

.tw-contact-overlay.is-closing .tw-contact-overlay__hero.tw-hero-home {
	animation: tw-contact-hero-out var(--tw-contact-hero-out-dur) var(--tw-contact-ease-in) forwards;
}

@keyframes tw-contact-hero-in {
	0% {
		transform: translate3d(0, 108%, 0) scale(1);
		width: 100dvw;
		height: 100dvh;
		max-width: none;
		min-height: 100dvh;
		max-height: none;
		border-width: 0;
		border-radius: 0;
		background-color: transparent;
	}
	/* Full-bleed, square corners — slide in complete */
	22% {
		transform: translate3d(0, 0, 0) scale(1);
		width: 100dvw;
		height: 100dvh;
		max-width: none;
		min-height: 100dvh;
		max-height: none;
		border-width: 0;
		border-radius: 0;
		background-color: transparent;
	}
	/* Short hold on full viewport before scale */
	27% {
		transform: translate3d(0, 0, 0) scale(1);
		width: 100dvw;
		height: 100dvh;
		max-width: none;
		min-height: 100dvh;
		max-height: none;
		border-width: 0;
		border-radius: 0;
		background-color: transparent;
	}
	/* Shrink + frame border; outer shell stays square — radius on image layers only */
	72% {
		transform: translate3d(0, 0, 0) scale(1);
		width: min(var(--tw-hero-vw), 100%);
		height: min(var(--tw-hero-vh), 100%);
		min-height: min(var(--tw-hero-vh), 100%);
		max-height: min(var(--tw-hero-vh), 100%);
		border-width: var(--tw-frame-inset);
		border-radius: 0;
		background-color: transparent;
	}
	100% {
		transform: translate3d(0, 0, 0) scale(1);
		width: min(var(--tw-hero-vw), 100%);
		height: min(var(--tw-hero-vh), 100%);
		min-height: min(var(--tw-hero-vh), 100%);
		max-height: min(var(--tw-hero-vh), 100%);
		border-width: var(--tw-frame-inset);
		border-radius: 0;
		background-color: transparent;
	}
}

@keyframes tw-contact-hero-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

/* Match hero-in / hero-out: square photo until shrink, then inner radius with the frame */
@keyframes tw-contact-overlay-bg-radius-in {
	0%,
	27% {
		border-radius: 0;
	}
	72%,
	100% {
		border-radius: var(--tw-hero-inner-radius);
	}
}

/* Full-bleed and framed states: same image + gradient wash as main hero (no delayed fade over solid fill) */
.tw-contact-overlay.is-open .tw-contact-overlay__hero .tw-hero-home__bg,
.tw-contact-overlay.is-open .tw-contact-overlay__hero .tw-hero-home__overlay {
	animation: tw-contact-overlay-bg-radius-in var(--tw-contact-hero-in-dur) var(--tw-contact-hero-in-ease) both;
}

.tw-contact-overlay.is-open .tw-contact-overlay__hero .tw-hero-home__bg {
	opacity: 1;
}

.tw-contact-overlay.is-open .tw-contact-overlay__hero .tw-hero-home__overlay {
	opacity: var(--tw-hero-photo-overlay-opacity);
}

.tw-contact-overlay.is-closing .tw-contact-overlay__hero .tw-hero-home__bg,
.tw-contact-overlay.is-closing .tw-contact-overlay__hero .tw-hero-home__overlay {
	animation: none;
	border-radius: 0;
}

.tw-contact-overlay.is-closing .tw-contact-overlay__hero .tw-hero-home__bg {
	opacity: 1;
}

.tw-contact-overlay.is-closing .tw-contact-overlay__hero .tw-hero-home__overlay {
	opacity: var(--tw-hero-photo-overlay-opacity);
}

.tw-contact-overlay:not(.is-open):not(.is-closing) .tw-contact-overlay__hero .tw-hero-home__bg,
.tw-contact-overlay:not(.is-open):not(.is-closing) .tw-contact-overlay__hero .tw-hero-home__overlay {
	animation: none;
	opacity: 0;
	border-radius: 0;
}

.tw-contact-overlay.is-open .tw-contact-overlay__kicker {
	animation: tw-contact-fade-up 0.42s var(--tw-contact-ease-out) calc(var(--tw-contact-t-title) - 0.035s) both;
}

.tw-contact-overlay.is-open .tw-contact-overlay__title.tw-hero-title {
	animation: tw-contact-fade-up 0.48s var(--tw-contact-ease-out) var(--tw-contact-t-title) both;
}

.tw-contact-overlay.is-open .tw-contact-overlay__intro {
	animation: tw-contact-fade-up 0.42s var(--tw-contact-ease-out) calc(var(--tw-contact-t-title) + 0.03s) both;
}

.tw-contact-overlay.is-open .tw-contact-overlay__bar {
	animation: tw-contact-fade-up 0.45s var(--tw-contact-ease-out) var(--tw-contact-t-bar) both;
}

.tw-contact-overlay.is-open .tw-contact-overlay__notice {
	animation: tw-contact-fade-up 0.4s var(--tw-contact-ease-out) var(--tw-contact-t-form) both;
}

.tw-contact-overlay.is-open .tw-contact-overlay__field:nth-child(1) {
	animation: tw-contact-fade-up 0.42s var(--tw-contact-ease-out) calc(var(--tw-contact-t-form) + var(--tw-contact-step)) both;
}

.tw-contact-overlay.is-open .tw-contact-overlay__field:nth-child(2) {
	animation: tw-contact-fade-up 0.42s var(--tw-contact-ease-out) calc(var(--tw-contact-t-form) + var(--tw-contact-step) * 2) both;
}

.tw-contact-overlay.is-open .tw-contact-overlay__field:nth-child(3) {
	animation: tw-contact-fade-up 0.42s var(--tw-contact-ease-out) calc(var(--tw-contact-t-form) + var(--tw-contact-step) * 3) both;
}

.tw-contact-overlay.is-open .tw-contact-overlay__field:nth-child(4) {
	animation: tw-contact-fade-up 0.42s var(--tw-contact-ease-out) calc(var(--tw-contact-t-form) + var(--tw-contact-step) * 4) both;
}

.tw-contact-overlay.is-open .tw-contact-overlay__actions {
	animation: tw-contact-fade-up 0.45s var(--tw-contact-ease-out) calc(var(--tw-contact-t-form) + var(--tw-contact-step) * 5) both;
}

.tw-contact-overlay.is-open .tw-contact-overlay__or {
	animation: tw-contact-fade-up 0.42s var(--tw-contact-ease-out) calc(var(--tw-contact-t-form) + var(--tw-contact-step) * 6) both;
}

.tw-contact-overlay.is-open .tw-contact-overlay__call-kicker-title {
	animation: tw-contact-fade-up 0.42s var(--tw-contact-ease-out) calc(var(--tw-contact-t-form) + var(--tw-contact-step) * 7) both;
}

.tw-contact-overlay.is-open .tw-contact-overlay__call-btn {
	animation: tw-contact-fade-up 0.45s var(--tw-contact-ease-out) calc(var(--tw-contact-t-form) + var(--tw-contact-step) * 8) both;
}

.tw-contact-overlay.is-open .tw-contact-overlay__social-kicker {
	animation: tw-contact-fade-up 0.42s var(--tw-contact-ease-out) calc(var(--tw-contact-t-form) + var(--tw-contact-step) * 7) both;
}

.tw-contact-overlay.is-open .tw-contact-overlay__social {
	animation: tw-contact-fade-up 0.45s var(--tw-contact-ease-out) calc(var(--tw-contact-t-form) + var(--tw-contact-step) * 8) both;
}

.tw-contact-overlay:not(.is-open):not(.is-closing) .tw-contact-overlay__title.tw-hero-title,
.tw-contact-overlay:not(.is-open):not(.is-closing) .tw-contact-overlay__kicker,
.tw-contact-overlay:not(.is-open):not(.is-closing) .tw-contact-overlay__intro,
.tw-contact-overlay:not(.is-open):not(.is-closing) .tw-contact-overlay__bar,
.tw-contact-overlay:not(.is-open):not(.is-closing) .tw-contact-overlay__notice,
.tw-contact-overlay:not(.is-open):not(.is-closing) .tw-contact-overlay__field,
.tw-contact-overlay:not(.is-open):not(.is-closing) .tw-contact-overlay__actions,
.tw-contact-overlay:not(.is-open):not(.is-closing) .tw-contact-overlay__or,
.tw-contact-overlay:not(.is-open):not(.is-closing) .tw-contact-overlay__call-kicker-title,
.tw-contact-overlay:not(.is-open):not(.is-closing) .tw-contact-overlay__call-btn,
.tw-contact-overlay:not(.is-open):not(.is-closing) .tw-contact-overlay__social-kicker,
.tw-contact-overlay:not(.is-open):not(.is-closing) .tw-contact-overlay__social {
	animation: none;
	opacity: 0;
	transform: translate3d(0, 0.35rem, 0);
}

@keyframes tw-contact-fade-up {
	from {
		opacity: 0;
		transform: translate3d(0, 0.45rem, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.tw-contact-overlay__inner {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.tw-contact-overlay__bar {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-shrink: 0;
	width: 100%;
	margin-bottom: 0;
	box-sizing: border-box;
}

.tw-contact-overlay__kicker {
	width: min(40rem, 100%);
	min-width: 0;
	box-sizing: border-box;
}

.tw-hero-kicker.tw-contact-overlay__kicker {
	margin: 0 0 clamp(0.2rem, 0.85vw, 0.42rem);
	justify-content: flex-start;
	text-align: left;
	flex-wrap: wrap;
	row-gap: 0.35rem;
}

.tw-contact-overlay__close {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	margin: 0;
	border: 1px solid var(--tw-hero-btn-muted-border);
	border-radius: 999px;
	background: var(--tw-hero-btn-muted);
	color: #fff;
	cursor: pointer;
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		transform 0.15s ease;
}

.tw-contact-overlay__close:hover,
.tw-contact-overlay__close:focus-visible {
	background: rgba(255, 255, 255, 0.22);
	border-color: rgba(255, 255, 255, 0.22);
	outline: none;
}

.tw-contact-overlay__close:focus-visible {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.tw-contact-overlay__close-icon {
	position: relative;
	display: block;
	width: 1.1rem;
	height: 1.1rem;
}

.tw-contact-overlay__close-icon::before,
.tw-contact-overlay__close-icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 2px;
	border-radius: 1px;
	background: currentcolor;
	transform-origin: center;
}

.tw-contact-overlay__close-icon::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.tw-contact-overlay__close-icon::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.tw-contact-overlay__body {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-top: 0;
	padding-bottom: clamp(0.5rem, 2vw, 1rem);
}

.tw-contact-overlay__title.tw-hero-title {
	margin-top: 0;
	margin-bottom: clamp(0.65rem, 1.8vw, 1rem);
	width: min(40rem, 100%);
}

.tw-contact-overlay__intro {
	margin: 0 0 clamp(0.9rem, 2.2vw, 1.2rem);
	width: min(40rem, 100%);
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(0.96rem, 1.25vw, 1.02rem);
	line-height: 1.55;
}

.tw-contact-overlay__notice-slot[hidden] {
	display: none;
}

.tw-contact-overlay__notice-slot:not([hidden]) {
	margin: 0 0 1rem;
	width: min(40rem, 100%);
}

.tw-contact-overlay__notice {
	margin: 0;
	padding: 0.75rem 1rem;
	border-radius: var(--tw-bento-radius);
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.45;
	width: 100%;
}

.tw-contact-overlay__notice--success {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.95);
}

.tw-contact-overlay__notice--warn {
	background: rgba(180, 60, 50, 0.35);
	border: 1px solid rgba(255, 200, 200, 0.25);
	color: #fff;
}

.tw-contact-overlay__form {
	margin: 0;
	width: min(40rem, 100%);
	max-width: 40rem;
}

.tw-contact-overlay__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.75rem, 2vw, 1.1rem);
	margin-top: clamp(0.5rem, 2vw, 1rem);
}

.tw-contact-overlay__field {
	margin: 0;
	min-width: 0;
}

.tw-contact-overlay__field--full {
	grid-column: 1 / -1;
}

/*
 * Bootstrap-style floating labels: <label> wraps control + .tw-form-floating__label-text.
 * Native <label> text is not shown as a block — only the span floats (no duplicate block labels).
 */
:is(.tw-contact-overlay, .tw-contact-section-band) label.tw-form-floating {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	font-weight: inherit;
	cursor: text;
}

:is(.tw-contact-overlay, .tw-contact-section-band) .tw-form-floating__control {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	box-sizing: border-box;
	height: calc(3.35rem + 2px);
	padding: 1.05rem 0.85rem 0.45rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: calc(var(--tw-bento-radius) * 0.65);
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.35;
	transition:
		border-color 0.15s ease,
		background 0.15s ease;
}

:is(.tw-contact-overlay, .tw-contact-section-band) .tw-form-floating__control::placeholder {
	color: transparent;
}

:is(.tw-contact-overlay, .tw-contact-section-band) .tw-form-floating__control:focus {
	outline: none;
	border-color: rgba(255, 255, 255, 0.42);
	background: rgba(255, 255, 255, 0.14);
}

:is(.tw-contact-overlay, .tw-contact-section-band) .tw-form-floating__label-text {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	max-height: calc(3.35rem + 2px);
	padding: 1.05rem 0.85rem 0.45rem;
	margin: 0;
	overflow: hidden;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	pointer-events: none;
	border: 1px solid transparent;
	transform-origin: 0 0;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: none;
	color: rgba(255, 255, 255, 0.58);
	line-height: 1.35;
	transition:
		transform 0.2s ease,
		opacity 0.2s ease,
		color 0.2s ease,
		max-height 0.2s ease,
		padding 0.2s ease;
}

:is(.tw-contact-overlay, .tw-contact-section-band) .tw-form-floating:focus-within .tw-form-floating__label-text,
:is(.tw-contact-overlay, .tw-contact-section-band) .tw-form-floating__control:not(:placeholder-shown) + .tw-form-floating__label-text {
	opacity: 0.95;
	color: rgba(255, 255, 255, 0.92);
	max-height: none;
	padding: 0.45rem 0.85rem 0;
	transform: scale(0.82) translateY(-0.08rem) translateX(0.04rem);
}

:is(.tw-contact-overlay, .tw-contact-section-band) .tw-form-floating--textarea .tw-form-floating__control--textarea {
	height: auto;
	min-height: 8rem;
	padding-top: 1.55rem;
	padding-bottom: 0.65rem;
	resize: none;
}

:is(.tw-contact-overlay, .tw-contact-section-band) .tw-form-floating--textarea .tw-form-floating__label-text {
	max-height: none;
	min-height: 2.75rem;
	height: auto;
	padding: 1.55rem 0.85rem 0.5rem;
	white-space: normal;
}

:is(.tw-contact-overlay, .tw-contact-section-band) .tw-form-floating--textarea:focus-within .tw-form-floating__label-text,
:is(.tw-contact-overlay, .tw-contact-section-band) .tw-form-floating--textarea .tw-form-floating__control:not(:placeholder-shown) + .tw-form-floating__label-text {
	padding: 0.4rem 0.85rem 0;
	transform: scale(0.82) translateY(-0.12rem) translateX(0.04rem);
}

.tw-contact-overlay__actions {
	margin: clamp(1.75rem, 4.5vw, 2.5rem) 0 0;
}

.tw-contact-overlay__form > .tw-contact-overlay__submit,
.tw-contact-overlay__actions .tw-contact-overlay__submit,
:where(.tw-contact-page-form, .tw-contact-section-band__form) .tw-contact-overlay__submit {
	display: flex;
	width: 100%;
	max-width: 100%;
	margin-top: clamp(0.5rem, 1.2vw, 0.85rem);
	box-sizing: border-box;
	justify-content: center;
}

.tw-contact-overlay__actions .tw-contact-overlay__submit {
	margin-top: 0;
}

.tw-contact-overlay__after-form {
	width: min(40rem, 100%);
	max-width: 40rem;
	margin: 0;
}

.tw-contact-overlay__or {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: clamp(1.25rem, 3vw, 1.75rem) 0 clamp(1rem, 2.5vw, 1.35rem);
}

.tw-contact-overlay__or-line {
	width: 100%;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--tw-contact-or-hr);
}

.tw-contact-overlay__or-label {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.2rem 0.85rem;
	border-radius: 999px;
	background: var(--tw-contact-or-hr);
	color: rgba(255, 255, 255, 0.96);
	text-shadow: 0 0.06rem 0.35rem rgb(0 0 0 / 55%);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
}

.tw-contact-overlay__call-btn.tw-hero-btn {
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
	justify-content: flex-start;
	gap: 0.55rem;
	padding: 0.72rem 1rem;
	margin: 0;
	text-align: left;
	text-transform: none;
	letter-spacing: 0.03em;
	font-weight: 600;
}

.tw-contact-overlay__call-btn.tw-hero-btn::after {
	content: none;
	display: none;
}

.tw-contact-overlay__call-icon {
	flex-shrink: 0;
	font-size: 1.15rem;
	opacity: 0.95;
}

.tw-contact-overlay__call-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	min-width: 0;
}

.tw-contact-overlay__call-kicker {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.88;
}

.tw-contact-overlay__call-number {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.tw-contact-overlay__social-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: clamp(0.75rem, 2.2vw, 1.25rem);
	margin: clamp(0.35rem, 1.5vw, 0.7rem) 0 clamp(0.2rem, 1.2vw, 0.45rem);
	width: 100%;
}

.tw-contact-overlay__alt-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(0.35rem, 1.25vw, 0.55rem);
	min-width: 0;
	flex: 0 0 auto;
}

.tw-contact-overlay__social-wrap > .tw-contact-overlay__alt-col:only-child {
	flex: 1 1 100%;
}

.tw-contact-overlay__call-kicker-title.tw-hero-kicker,
.tw-contact-overlay__social-kicker.tw-hero-kicker {
	margin: 0;
	justify-content: flex-start;
	text-align: left;
}

.tw-contact-overlay__social {
	justify-content: flex-start;
	flex-wrap: wrap;
	margin: 0;
}

@media (max-width: 640px) {
	.tw-hero-title {
		font-size: clamp(2.05rem, 12vw, 2.85rem);
	}

	.tw-home-heading {
		font-size: clamp(1.9rem, 9.2vw, 2.65rem);
	}

	.tw-home-heading--section {
		font-size: clamp(1.65rem, 8vw, 2.25rem);
	}

	.tw-contact-overlay__fields {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tw-contact-overlay {
		--tw-contact-overlay-dur: 0.12s;
		--tw-contact-hero-in-dur: 0.01ms;
		--tw-contact-hero-out-dur: 0.12s;
		--tw-contact-step: 0.01ms;
		--tw-contact-t-photo: 0.01ms;
		--tw-contact-t-title: 0.01ms;
		--tw-contact-t-bar: 0.01ms;
		--tw-contact-t-form: 0.01ms;
		transition: visibility 0s linear var(--tw-contact-overlay-dur);
	}

	.tw-contact-overlay.is-open {
		transition: visibility 0s;
	}

	.tw-contact-overlay::before {
		transition-duration: 0.01ms;
	}

	.tw-contact-overlay.is-open .tw-contact-overlay__hero.tw-hero-home {
		animation: none;
		transform: translate3d(0, 0, 0);
		width: min(var(--tw-hero-vw), 100%);
		max-width: 100%;
		height: min(var(--tw-hero-vh), 100%);
		min-height: min(var(--tw-hero-vh), 100%);
		max-height: min(var(--tw-hero-vh), 100%);
		border-width: var(--tw-frame-inset);
		border-radius: 0;
		background-color: transparent;
	}

	.tw-contact-overlay.is-closing .tw-contact-overlay__hero.tw-hero-home {
		animation: none;
	}

	.tw-contact-overlay.is-open .tw-contact-overlay__hero .tw-hero-home__bg,
	.tw-contact-overlay.is-open .tw-contact-overlay__hero .tw-hero-home__overlay {
		animation: none;
		transform: none;
		border-radius: var(--tw-hero-inner-radius);
	}

	.tw-contact-overlay.is-open .tw-contact-overlay__hero .tw-hero-home__bg {
		opacity: 1;
	}

	.tw-contact-overlay.is-open .tw-contact-overlay__hero .tw-hero-home__overlay {
		opacity: var(--tw-hero-photo-overlay-opacity);
	}

	.tw-contact-overlay.is-open .tw-contact-overlay__title.tw-hero-title,
	.tw-contact-overlay.is-open .tw-contact-overlay__kicker,
	.tw-contact-overlay.is-open .tw-contact-overlay__intro,
	.tw-contact-overlay.is-open .tw-contact-overlay__bar,
	.tw-contact-overlay.is-open .tw-contact-overlay__notice,
	.tw-contact-overlay.is-open .tw-contact-overlay__field,
	.tw-contact-overlay.is-open .tw-contact-overlay__actions,
	.tw-contact-overlay.is-open .tw-contact-overlay__or,
	.tw-contact-overlay.is-open .tw-contact-overlay__call-kicker-title,
	.tw-contact-overlay.is-open .tw-contact-overlay__call-btn,
	.tw-contact-overlay.is-open .tw-contact-overlay__social-kicker,
	.tw-contact-overlay.is-open .tw-contact-overlay__social {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

.tw-page-frame {
	position: relative;
	padding: 0;
	box-sizing: border-box;
	background: transparent;
}

.tw-home-hero {
	position: relative;
	z-index: 1;
	background: var(--tw-color-surface, #ffffff);
}

.tw-home-hero .tw-hero-home {
	width: 100%;
	max-width: 100%;
}

/* --- Home stats strip: each figure is its own grey card (below About) --- */

.tw-home-stats-strip {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
	background: transparent;
	border: none;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
	color: #fff;
	font-family: "Manrope", var(--tw-font-sans, system-ui, sans-serif);
}

.tw-home-stats-strip__inner {
	width: 100%;
	max-width: none;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	box-sizing: border-box;
}

.tw-home-stats-strip__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tw-bento-gap);
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Inner padding on cards only; section wrapper has no inset (see __inner). */
.tw-home-stats-strip__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-width: 0;
	min-height: clamp(8.5rem, 22vw, 11rem);
	padding: clamp(1.35rem, 3vw, 2rem) clamp(1.25rem, 3vw, 1.85rem);
	box-sizing: border-box;
	background: linear-gradient(
		125deg,
		rgba(26, 26, 26, 0.98) 0%,
		rgba(77, 77, 77, 0.94) 48%,
		rgba(40, 40, 40, 0.96) 100%
	);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--tw-bento-radius);
	box-shadow: 0 12px 36px rgba(26, 26, 26, 0.14);
}

/* Hold stat cards until the hero begins shrinking (27% of shell-in), then stagger through the shrink. */
@media (prefers-reduced-motion: no-preference) {
	.tw-home-stats-strip--await-hero .tw-home-stats-strip__item {
		opacity: 0;
		transform: translate3d(0, 1.15rem, 0);
	}

	.tw-home-stats-strip.tw-home-stats-strip--active .tw-home-stats-strip__item {
		animation: tw-home-hero-item-in 0.52s var(--tw-home-hero-ease, cubic-bezier(0.2, 0.82, 0.2, 1)) both;
	}

	.tw-home-stats-strip.tw-home-stats-strip--active .tw-home-stats-strip__item:nth-child(2) {
		animation-delay: 0.22s;
	}

	.tw-home-stats-strip.tw-home-stats-strip--active .tw-home-stats-strip__item:nth-child(3) {
		animation-delay: 0.44s;
	}
}

.tw-home-stats-strip__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(2.5rem, 6vw, 3rem);
	height: clamp(2.5rem, 6vw, 3rem);
	margin-bottom: clamp(0.65rem, 1.6vw, 0.9rem);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.92);
	font-size: clamp(1rem, 2.2vw, 1.2rem);
}

.tw-home-stats-strip__value {
	display: block;
	font-size: clamp(1.85rem, 4.8vw, 2.85rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: 0.02em;
	color: #fff;
}

.tw-home-stats-strip__label {
	display: block;
	margin-top: 0.45rem;
	font-size: clamp(0.7rem, 1.45vw, 0.8rem);
	font-weight: 600;
	line-height: 1.35;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.58);
	position: relative;
	overflow: hidden;
	opacity: 0;
	clip-path: inset(0 100% 0 0);
}

.tw-home-stats-strip__label-chars {
	display: block;
	letter-spacing: 0.14em;
}

.tw-home-stats-strip__label.is-in {
	animation: tw-home-hero-link-reveal 0.92s var(--tw-home-hero-ease, cubic-bezier(0.2, 0.82, 0.2, 1)) both;
}

.tw-home-stats-strip__label::after {
	content: "";
	position: absolute;
	inset: -0.08em -0.2em;
	background: #fff;
	transform: translate3d(-115%, 0, 0);
	pointer-events: none;
	z-index: 2;
	opacity: 0;
}

.tw-home-stats-strip__label.is-in::after {
	opacity: 1;
	animation: tw-home-hero-link-wipe 0.92s var(--tw-home-hero-wipe-ease, cubic-bezier(0.65, 0.02, 0.35, 1)) both;
}

.tw-home-stats-strip__value[data-tw-stat-value] {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.tw-home-stats-strip__value[data-tw-stat-value].is-started {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.tw-home-stats-strip__value[data-tw-stat-value] {
		opacity: 1;
		transition: none;
	}

	.tw-home-stats-strip__label {
		opacity: 1;
		clip-path: none;
		transition: none;
		animation: none;
	}

	.tw-home-stats-strip__label::after {
		animation: none;
		opacity: 0;
	}
}

@media (max-width: 1100px) {
	.tw-home-stats-strip__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* First row: two 50% cards; second row: third card full width */
	.tw-home-stats-strip:not(.tw-home-stats-strip--pair) .tw-home-stats-strip__item:nth-child(3) {
		grid-column: 1 / -1;
	}
}

.tw-home-stats-strip--pair .tw-home-stats-strip__list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 420px) {
	.tw-home-stats-strip__list {
		grid-template-columns: 1fr;
	}
}

/* --- Hero shell: always fits small viewport so border stays in view; inner scrolls if needed --- */

.tw-hero-home {
	position: relative;
	display: flex;
	flex-direction: column;
	width: var(--tw-hero-vw);
	max-width: 100%;
	height: var(--tw-hero-vh);
	min-height: var(--tw-hero-vh);
	max-height: var(--tw-hero-vh);
	box-sizing: border-box;
	border: var(--tw-frame-inset) solid var(--tw-color-bg, #f5f4f0);
	border-radius: var(--tw-hero-radius);
	overflow: hidden;
	isolation: isolate;
	color: #fff;
	font-family: "Manrope", var(--tw-font-sans, system-ui, sans-serif);
}

.tw-hero-home__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: var(--tw-hero-inner-radius);
	background-size: cover;
	background-position: center;
	transform: scale(1.02);
}

.tw-hero-home__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--tw-hero-inner-radius);
	background: var(--tw-hero-overlay-gradient);
}

/* Hero + contact dialog: grey wash strength (photo stays full opacity underneath) */
.tw-home-hero .tw-hero-home__overlay {
	opacity: var(--tw-hero-photo-overlay-opacity);
}

/* Slightly lighter wash so bento gaps show more of the roof photo */
.tw-home-hero {
	--tw-hero-photo-overlay-opacity: 0.84;
}

.tw-hero-home__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: max(var(--tw-hero-pad), env(safe-area-inset-top, 0px)) var(--tw-hero-pad-x-end)
		max(var(--tw-hero-pad), env(safe-area-inset-bottom, 0px)) var(--tw-hero-pad-x);
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

@keyframes tw-home-hero-logo-reveal {
	0% {
		opacity: 0;
		transform: translate3d(0, 0.42rem, 0) scale(0.92);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@keyframes tw-home-hero-item-in {
	from {
		opacity: 0;
		transform: translate3d(0, 0.45rem, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes tw-home-hero-menu-line-grow {
	0% {
		transform: scaleX(0);
		opacity: 0.25;
	}
	38% {
		transform: scaleX(1.16);
		opacity: 1;
	}
	58% {
		transform: scaleX(0.9);
	}
	76% {
		transform: scaleX(1.06);
	}
	100% {
		transform: scaleX(1);
		opacity: 1;
	}
}

@keyframes tw-home-hero-shell-in {
	0%,
	27% {
		width: 100dvw;
		height: 100dvh;
		min-height: 100dvh;
		max-height: none;
		border-width: 0;
		border-radius: 0;
	}
	72%,
	100% {
		width: var(--tw-hero-vw);
		height: var(--tw-hero-vh);
		min-height: var(--tw-hero-vh);
		max-height: var(--tw-hero-vh);
		border-width: var(--tw-frame-inset);
		border-radius: var(--tw-hero-radius);
	}
}

@keyframes tw-home-hero-shell-inner-radius-in {
	0%,
	27% {
		border-radius: 0;
	}
	72%,
	100% {
		border-radius: var(--tw-hero-inner-radius);
	}
}

@keyframes tw-home-hero-link-reveal {
	0%,
	24% {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
	}
	50% {
		opacity: 1;
		clip-path: inset(0 0 0 0);
	}
	100% {
		opacity: 1;
		clip-path: inset(0 0 0 0);
	}
}

@keyframes tw-home-hero-link-wipe {
	0% {
		transform: translate3d(-115%, 0, 0);
	}
	46% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(112%, 0, 0);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.tw-home-hero {
		--tw-home-hero-ease: cubic-bezier(0.2, 0.82, 0.2, 1);
		--tw-home-hero-wipe-ease: cubic-bezier(0.65, 0.02, 0.35, 1);
	}

	/* Hero intro: logo first, then corner groups enter together with slight stagger. */
	.tw-home-hero .tw-hero-home {
		animation: tw-home-hero-shell-in 2.35s var(--tw-home-hero-ease) both;
	}

	.tw-home-hero .tw-hero-home__bg,
	.tw-home-hero .tw-hero-home__overlay {
		animation: tw-home-hero-shell-inner-radius-in 2.35s var(--tw-home-hero-ease) both;
	}

	.tw-home-hero .tw-hero-logo__img {
		transform-origin: center center;
		animation: tw-home-hero-logo-reveal 1.04s var(--tw-home-hero-ease) 0.04s both;
	}

	.tw-home-hero .tw-hero-nav,
	.tw-home-hero .tw-hero-nav-toggle,
	.tw-home-hero .tw-hero-header .tw-primary-menu-toggle,
	.tw-home-hero .tw-hero-header__cta,
	.tw-home-hero .tw-hero-bento__cell:not(.tw-hero-bento__cell--headline),
	.tw-home-hero .tw-hero-bento__icons-wrap,
	.tw-home-hero .tw-hero-copy .tw-hero-kicker,
	.tw-home-hero .tw-hero-copy .tw-hero-lede,
	.tw-home-hero .tw-hero-copy .tw-hero-actions,
	.tw-home-hero .tw-hero-aside .tw-hero-kicker,
	.tw-home-hero .tw-hero-bento__icons-wrap .tw-hero-social .tw-hero-icon-btn {
		opacity: 0;
	}

	/* Headline shell is transparent; child panels animate in. */
	.tw-home-hero .tw-hero-bento__cell--headline {
		opacity: 1;
	}

	/* Header CTA: fade in after staggered nav links finish (delay set in home-hero.js). */
	.tw-home-hero {
		--tw-home-hero-header-cta-delay: 1.35s;
		--tw-home-hero-menu-toggle-delay: 1.86s;
	}

	.tw-home-hero .tw-hero-header__cta {
		animation: tw-home-hero-item-in 0.5s var(--tw-home-hero-ease) var(--tw-home-hero-header-cta-delay) both;
	}

	.tw-home-hero .tw-hero-header .tw-primary-menu-toggle {
		animation: tw-home-hero-item-in 0.5s var(--tw-home-hero-ease) var(--tw-home-hero-menu-toggle-delay) both;
	}

	.tw-home-hero .tw-hero-header .tw-primary-menu-toggle__line {
		transform-origin: left center;
		transform: scaleX(0);
		opacity: 0;
		transition:
			transform var(--tw-menu-toggle-line-duration, 0.34s) var(--tw-menu-toggle-line-ease, cubic-bezier(0.34, 1.46, 0.64, 1)),
			opacity 0.28s ease,
			width var(--tw-menu-toggle-line-duration, 0.34s) var(--tw-menu-toggle-line-ease, cubic-bezier(0.34, 1.46, 0.64, 1));
	}

	.tw-home-hero .tw-hero-header .tw-primary-menu-toggle__line:nth-child(2) {
		animation: tw-home-hero-menu-line-grow 0.62s cubic-bezier(0.34, 1.46, 0.64, 1)
			calc(var(--tw-home-hero-menu-toggle-delay) + 0.04s) both;
	}

	.tw-home-hero .tw-hero-header .tw-primary-menu-toggle__line:nth-child(3) {
		animation: tw-home-hero-menu-line-grow 0.62s cubic-bezier(0.34, 1.46, 0.64, 1)
			calc(var(--tw-home-hero-menu-toggle-delay) + 0.08s) both;
	}

	.tw-home-hero .tw-hero-header .tw-primary-menu-toggle__line:nth-child(4) {
		animation: tw-home-hero-menu-line-grow 0.62s cubic-bezier(0.34, 1.46, 0.64, 1)
			calc(var(--tw-home-hero-menu-toggle-delay) + 0.12s) both;
	}

	.tw-home-hero .tw-hero-nav,
	.tw-home-hero .tw-hero-nav-toggle {
		animation: tw-home-hero-item-in 0.54s var(--tw-home-hero-ease) 0.9s both;
	}

	.tw-home-hero .tw-hero-bento__cell--headline .tw-hero-copy {
		animation: tw-home-hero-item-in 0.56s var(--tw-home-hero-ease) 0.98s both;
	}

	.tw-home-hero .tw-hero-bento__cell--stat {
		animation: tw-home-hero-item-in 0.56s var(--tw-home-hero-ease) 1.06s both;
	}

	.tw-home-hero .tw-hero-bento__icons-wrap {
		animation: tw-home-hero-item-in 0.56s var(--tw-home-hero-ease) 1.14s both;
	}

	/* Wrappers inside bento cells must stay visible — panels handle the fade-in. */
	.tw-home-hero .tw-hero-bento__cell .tw-hero-aside {
		opacity: 1;
	}

	.tw-home-hero .tw-hero-copy .tw-hero-kicker {
		position: relative;
		overflow: hidden;
		clip-path: inset(0 100% 0 0);
		animation: tw-home-hero-link-reveal 0.92s var(--tw-home-hero-ease) 1.08s both;
	}

	.tw-home-hero .tw-hero-copy .tw-hero-title {
		opacity: 1;
		overflow: visible;
		clip-path: none;
		animation: none;
	}

	.tw-home-hero .tw-hero-title--words .tw-fx-word {
		display: inline-block;
		opacity: 0;
		transform: translate3d(0, 0.55em, 0);
		will-change: opacity, transform;
		animation: tw-fx-word-up 0.58s var(--tw-fx-word-ease, cubic-bezier(0.34, 1.46, 0.64, 1)) both;
		animation-delay: var(--tw-fx-word-delay, 0ms);
	}

	.tw-home-hero .tw-hero-copy .tw-hero-lede {
		position: relative;
		overflow: hidden;
		clip-path: inset(0 100% 0 0);
		animation: tw-home-hero-link-reveal 0.92s var(--tw-home-hero-ease) 1.4s both;
	}

	.tw-home-hero .tw-hero-copy .tw-hero-actions {
		opacity: 1;
	}

	.tw-home-hero .tw-hero-copy .tw-hero-kicker::after,
	.tw-home-hero .tw-hero-copy .tw-hero-lede::after {
		content: "";
		position: absolute;
		inset: -0.08em -0.2em;
		background: #fff;
		transform: translate3d(-115%, 0, 0);
		pointer-events: none;
		z-index: 2;
		animation: tw-home-hero-link-wipe 0.92s var(--tw-home-hero-wipe-ease) both;
	}

	.tw-home-hero .tw-hero-copy .tw-hero-kicker::after {
		animation-delay: 1.08s;
	}

	.tw-home-hero .tw-hero-copy .tw-hero-lede::after {
		animation-delay: 1.4s;
	}

	.tw-home-hero .tw-hero-copy .tw-hero-actions .tw-hero-btn {
		opacity: 0;
		animation: tw-home-hero-item-in 0.46s var(--tw-home-hero-ease) both;
	}

	.tw-home-hero .tw-hero-copy .tw-hero-actions .tw-hero-btn:nth-child(1) {
		animation-delay: 1.76s;
	}

	.tw-home-hero .tw-hero-copy .tw-hero-actions .tw-hero-btn:nth-child(2) {
		animation-delay: 1.9s;
	}

	.tw-home-hero .tw-hero-aside .tw-hero-kicker {
		animation: tw-home-hero-item-in 0.42s var(--tw-home-hero-ease) 1.22s both;
	}

	.tw-home-hero .tw-hero-nav__menu li a {
		position: relative;
		overflow: hidden;
		opacity: 0;
		clip-path: inset(0 100% 0 0);
		animation: tw-home-hero-link-reveal 0.92s var(--tw-home-hero-ease) both;
	}

	.tw-home-hero .tw-hero-nav__menu li a::before {
		content: "";
		position: absolute;
		inset: -0.08em -0.2em;
		background: #fff;
		transform: translate3d(-115%, 0, 0);
		pointer-events: none;
		z-index: 2;
		animation: tw-home-hero-link-wipe 0.92s var(--tw-home-hero-wipe-ease) both;
	}

	.tw-home-hero .tw-hero-nav__menu li:nth-child(1) a,
	.tw-home-hero .tw-hero-nav__menu li:nth-child(1) a::before {
		animation-delay: 1.1s;
	}

	.tw-home-hero .tw-hero-nav__menu li:nth-child(2) a,
	.tw-home-hero .tw-hero-nav__menu li:nth-child(2) a::before {
		animation-delay: 1.34s;
	}

	.tw-home-hero .tw-hero-nav__menu li:nth-child(3) a,
	.tw-home-hero .tw-hero-nav__menu li:nth-child(3) a::before {
		animation-delay: 1.58s;
	}

	.tw-home-hero .tw-hero-nav__menu li:nth-child(4) a,
	.tw-home-hero .tw-hero-nav__menu li:nth-child(4) a::before {
		animation-delay: 1.82s;
	}

	.tw-home-hero .tw-hero-nav__menu li:nth-child(5) a,
	.tw-home-hero .tw-hero-nav__menu li:nth-child(5) a::before {
		animation-delay: 2.06s;
	}

	.tw-home-hero .tw-hero-nav__menu li:nth-child(n + 6) a,
	.tw-home-hero .tw-hero-nav__menu li:nth-child(n + 6) a::before {
		animation-delay: calc(1.1s + 5 * 0.24s);
	}

	.tw-home-hero .tw-hero-aside .tw-hero-social .tw-hero-icon-btn {
		opacity: 0;
		animation: tw-home-hero-item-in 0.38s var(--tw-home-hero-ease) both;
	}

	.tw-home-hero .tw-hero-bento__icons-wrap .tw-hero-social .tw-hero-icon-btn:nth-child(1) {
		animation-delay: 1.22s;
	}

	.tw-home-hero .tw-hero-bento__icons-wrap .tw-hero-social .tw-hero-icon-btn:nth-child(2) {
		animation-delay: 1.3s;
	}

	.tw-home-hero .tw-hero-bento__icons-wrap .tw-hero-social .tw-hero-icon-btn:nth-child(3) {
		animation-delay: 1.38s;
	}

	.tw-home-hero .tw-hero-bento__icons-wrap .tw-hero-social .tw-hero-icon-btn:nth-child(4) {
		animation-delay: 1.46s;
	}

	.tw-home-hero .tw-hero-bento__icons-wrap .tw-hero-social .tw-hero-icon-btn:nth-child(5) {
		animation-delay: 1.54s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tw-home-hero .tw-hero-home,
	.tw-home-hero .tw-hero-home__bg,
	.tw-home-hero .tw-hero-logo__img,
	.tw-home-hero .tw-hero-header .tw-primary-menu-toggle,
	.tw-home-hero .tw-hero-header .tw-primary-menu-toggle__line,
	.tw-home-hero .tw-hero-header__cta,
	.tw-home-hero .tw-hero-nav,
	.tw-home-hero .tw-hero-nav-toggle,
	.tw-home-hero .tw-hero-bento__cell,
	.tw-home-hero .tw-hero-bento__cell--headline .tw-hero-copy,
	.tw-home-hero .tw-hero-bento__icons-wrap,
	.tw-home-hero .tw-hero-copy .tw-hero-kicker,
	.tw-home-hero .tw-hero-copy .tw-hero-title,
	.tw-home-hero .tw-hero-copy .tw-hero-lede,
	.tw-home-hero .tw-hero-copy .tw-hero-actions,
	.tw-home-hero .tw-hero-aside .tw-hero-kicker,
	.tw-home-hero .tw-hero-aside .tw-hero-social,
	.tw-home-hero .tw-hero-aside .tw-hero-social .tw-hero-icon-btn,
	.tw-home-hero .tw-hero-nav__menu li a,
	.tw-home-hero .tw-hero-nav__menu li a::before {
		animation: none;
		opacity: 1;
		transform: none;
		clip-path: none;
	}

	.tw-home-hero .tw-hero-nav__menu li a::before {
		content: none;
	}

	.tw-home-hero .tw-hero-title--words .tw-fx-word {
		opacity: 1;
		animation: none;
		transform: none;
	}
}

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

.tw-hero-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 1.5rem;
	width: 100%;
	flex-shrink: 0;
	margin-bottom: 0;
	padding-bottom: clamp(1rem, 3vw, 2rem);
}

.tw-hero-logo {
	display: block;
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
	align-self: center;
	max-width: 100%;
	line-height: 0;
	text-decoration: none;
	color: inherit;
	min-width: 0;
	z-index: 2;
}

/* Logo — centred in header; scales down in narrow columns without distorting */
.tw-hero-logo__img {
	display: block;
	width: auto;
	height: auto;
	max-height: var(--tw-site-logo-max-height, var(--tw-hero-logo-max-height, clamp(3.35rem, 7.5vw, 4.5rem)));
	max-width: var(--tw-site-logo-max-width, var(--tw-hero-logo-max-width, min(100%, 22rem)));
	object-fit: contain;
	object-position: center;
}

/* Homepage hero header logo — 20% larger than inner pages / footer */
.tw-home-hero .tw-hero-header .tw-hero-logo__img {
	max-height: var(--tw-home-logo-max-height, var(--tw-site-logo-max-height));
	max-width: var(--tw-home-logo-max-width, var(--tw-site-logo-max-width));
}

@supports not (width: 1dvw) {
	.tw-home-hero .tw-hero-header .tw-hero-logo__img {
		max-height: var(--tw-home-logo-max-height-fallback, var(--tw-site-logo-max-height-fallback));
	}
}

@supports not (width: 1dvw) {
	.tw-hero-logo__img {
		max-height: var(--tw-site-logo-max-height-fallback, var(--tw-hero-logo-max-height-fallback, clamp(3.35rem, 7.5vh, 4.5rem)));
	}
}

/* --- Nav --- */

.tw-hero-header__cta {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	align-self: center;
	z-index: 3;
	white-space: nowrap;
}

.tw-hero-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	align-self: center;
	z-index: 3;
	gap: 8px;
	box-sizing: border-box;
	width: auto;
	height: auto;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.5rem;
	margin: 0;
	border: none;
	border-radius: 6px;
	background: transparent;
	cursor: pointer;
	color: #fff;
	line-height: 0;
	-webkit-appearance: none;
	appearance: none;
}

.tw-hero-nav-toggle:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.65);
	outline-offset: 4px;
}

.tw-hero-nav-toggle__bar {
	display: block;
	width: 1.75rem;
	height: 3px;
	margin: 0 auto;
	background: currentColor;
	border-radius: 2px;
	transform-origin: center center;
	transition:
		transform 0.34s cubic-bezier(0.34, 1.46, 0.64, 1),
		opacity 0.22s ease;
}

/* Burger → X when mobile nav is open */
.tw-hero-nav-toggle[aria-expanded="true"] .tw-hero-nav-toggle__bar:nth-child(2) {
	transform: translateY(11px) rotate(45deg);
}

.tw-hero-nav-toggle[aria-expanded="true"] .tw-hero-nav-toggle__bar:nth-child(3) {
	opacity: 0;
	transform: scaleX(0);
}

.tw-hero-nav-toggle[aria-expanded="true"] .tw-hero-nav-toggle__bar:nth-child(4) {
	transform: translateY(-11px) rotate(-45deg);
}

.tw-hero-nav {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	align-self: center;
	z-index: 3;
	gap: 0.45rem;
	text-transform: uppercase;
	font-size: clamp(0.9rem, 1.15vw, 1.05rem);
	font-weight: 600;
	letter-spacing: 0.12em;
}

.tw-hero-nav__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(1rem, 2.5vw, 2.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tw-hero-nav__menu a {
	position: relative;
	display: inline-flex;
	align-items: center;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	padding-block: 0;
	padding-bottom: 0.35rem;
	transition: color 0.2s ease;
}

/* Desktop header row: nav vertically centred with logo + CTA */
@media (min-width: 901px) {
	.tw-hero-header {
		align-items: center;
		min-height: var(--tw-site-logo-max-height, clamp(3.35rem, 7.5vw, 4.5rem));
	}

	.tw-hero-nav {
		flex-direction: row;
		align-items: center;
		align-self: center;
		justify-content: flex-start;
		gap: 0;
	}

	.tw-hero-nav__menu {
		align-items: center;
		min-height: var(--tw-site-logo-max-height, clamp(3.35rem, 7.5vw, 4.5rem));
	}
}

/* Hover one link: others drop to muted (keyboard: focus-visible on a link does the same). */
.tw-hero-nav__menu:has(a:hover) a:not(:hover),
.tw-hero-nav__menu:has(a:focus-visible) a:not(:focus-visible) {
	color: rgba(255, 255, 255, 0.45);
}

.tw-hero-nav__menu a:hover,
.tw-hero-nav__menu a:focus-visible {
	color: #fff;
}

.tw-hero-nav__menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.32s cubic-bezier(0.33, 1, 0.68, 1);
}

.tw-hero-nav__menu a:hover::after,
.tw-hero-nav__menu a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
	.tw-hero-nav__menu a::after {
		transition-duration: 0.01ms;
	}
}

@media (max-width: 900px) {
	/* Nav + toggle above hero body: copy uses transforms, so dropdown must stack higher */
	/* 1fr | logo | 1fr — equal side tracks centre the logo; toggle sits in the right track */
	.tw-hero-header {
		grid-template-columns: 1fr auto 1fr;
	}

	.tw-hero-logo {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
	}

	.tw-hero-nav-toggle {
		display: flex;
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		align-self: center;
		position: relative;
		z-index: 41;
	}

	.tw-hero-nav {
		--tw-mobile-nav-bounce: cubic-bezier(0.34, 1.46, 0.64, 1);
		--tw-mobile-nav-reveal-ease: cubic-bezier(0.2, 0.82, 0.2, 1);
		--tw-mobile-nav-wipe-ease: cubic-bezier(0.65, 0.02, 0.35, 1);
		--tw-mobile-nav-close-ms: 0.36s;
		grid-column: unset;
		grid-row: unset;
		justify-self: unset;
		align-self: unset;
		position: absolute;
		top: calc(100% + 0.75rem);
		right: 0;
		left: 0;
		z-index: 40;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.85rem;
		max-height: 0;
		padding-block: 0;
		padding-inline: 1.25rem;
		background: rgba(26, 26, 26, 0.98);
		border: 1px solid rgba(255, 255, 255, 0.12);
		border-radius: 12px;
		overflow: hidden;
		visibility: hidden;
		opacity: 0;
		transform: translate3d(0, -0.35rem, 0);
		pointer-events: none;
		box-shadow: 0 18px 38px rgba(26, 26, 26, 0.35);
		transition:
			max-height var(--tw-mobile-nav-close-ms) var(--tw-mobile-nav-bounce),
			padding-block var(--tw-mobile-nav-close-ms) var(--tw-mobile-nav-bounce),
			opacity var(--tw-mobile-nav-close-ms) ease,
			transform var(--tw-mobile-nav-close-ms) ease,
			visibility 0s linear var(--tw-mobile-nav-close-ms);
		font-size: clamp(1.35rem, 5.2vw, 1.85rem);
		letter-spacing: 0.08em;
	}

	.tw-hero-header {
		position: relative;
		z-index: 41;
	}

	.tw-hero-nav.is-open {
		max-height: min(85vh, 32rem);
		padding-block: 1.2rem 1.45rem;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translate3d(0, 0, 0);
		transition:
			max-height 0.42s var(--tw-mobile-nav-bounce),
			padding-block 0.42s var(--tw-mobile-nav-bounce),
			opacity 0.36s ease,
			transform 0.36s ease,
			visibility 0s linear 0s;
	}

	.tw-hero-nav__menu {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 0.35rem;
	}

	.tw-hero-nav__menu a::after {
		display: none;
	}

	.tw-hero-nav__menu li a {
		position: relative;
		overflow: hidden;
		display: inline-block;
		padding-block: 0.15rem;
		opacity: 0;
		clip-path: inset(0 100% 0 0);
		transition:
			opacity var(--tw-mobile-nav-close-ms, 0.36s) ease,
			clip-path var(--tw-mobile-nav-close-ms, 0.36s) ease;
	}

	.tw-hero-nav__menu li a::before {
		content: "";
		position: absolute;
		inset: -0.08em -0.2em;
		background: #fff;
		transform: translate3d(-115%, 0, 0);
		pointer-events: none;
		z-index: 2;
	}

	.tw-hero-nav:not(.is-open) .tw-hero-nav__menu li a,
	.tw-hero-nav:not(.is-open) .tw-hero-nav__menu li a::before {
		animation: none !important;
	}

	.tw-hero-nav:not(.is-open) .tw-hero-nav__menu li a {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
	}

	.tw-hero-nav.is-open .tw-hero-nav__menu li a {
		animation: tw-home-hero-link-reveal 0.72s var(--tw-mobile-nav-reveal-ease) both;
	}

	.tw-hero-nav.is-open .tw-hero-nav__menu li a::before {
		animation: tw-home-hero-link-wipe 0.72s var(--tw-mobile-nav-wipe-ease) both;
	}

	.tw-hero-nav.is-open .tw-hero-nav__menu li:nth-child(1) a,
	.tw-hero-nav.is-open .tw-hero-nav__menu li:nth-child(1) a::before {
		animation-delay: 0.14s;
	}

	.tw-hero-nav.is-open .tw-hero-nav__menu li:nth-child(2) a,
	.tw-hero-nav.is-open .tw-hero-nav__menu li:nth-child(2) a::before {
		animation-delay: 0.22s;
	}

	.tw-hero-nav.is-open .tw-hero-nav__menu li:nth-child(3) a,
	.tw-hero-nav.is-open .tw-hero-nav__menu li:nth-child(3) a::before {
		animation-delay: 0.3s;
	}

	.tw-hero-nav.is-open .tw-hero-nav__menu li:nth-child(4) a,
	.tw-hero-nav.is-open .tw-hero-nav__menu li:nth-child(4) a::before {
		animation-delay: 0.38s;
	}

	.tw-hero-nav.is-open .tw-hero-nav__menu li:nth-child(5) a,
	.tw-hero-nav.is-open .tw-hero-nav__menu li:nth-child(5) a::before {
		animation-delay: 0.46s;
	}

	.tw-hero-nav.is-open .tw-hero-nav__menu li:nth-child(n + 6) a,
	.tw-hero-nav.is-open .tw-hero-nav__menu li:nth-child(n + 6) a::before {
		animation-delay: 0.54s;
	}
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
	.tw-hero-nav-toggle__bar {
		transition-duration: 0.01ms;
	}

	.tw-hero-nav,
	.tw-hero-nav.is-open,
	.tw-hero-nav__menu li a,
	.tw-hero-nav.is-open .tw-hero-nav__menu li a,
	.tw-hero-nav.is-open .tw-hero-nav__menu li a::before {
		transition-duration: 0.01ms !important;
		animation: none !important;
	}

	.tw-hero-nav:not(.is-open) {
		max-height: 0;
		visibility: hidden;
	}

	.tw-hero-nav.is-open {
		max-height: none;
		visibility: visible;
	}

	.tw-hero-nav__menu li a {
		opacity: 1;
		clip-path: none;
	}

	.tw-hero-nav__menu li a::before {
		display: none;
	}
}

/* --- Hero bento: headline panel + stat pillar with icons below --- */

.tw-hero-body.tw-hero-bento {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: minmax(0, 1fr);
	gap: var(--tw-bento-gap);
	align-items: end;
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	margin-top: 0;
	padding-top: clamp(1rem, 3vw, 2rem);
}

.tw-hero-bento__cell {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: clamp(1.15rem, 2.5vw, 1.75rem);
	box-sizing: border-box;
	background: rgba(18, 18, 18, 0.42);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--tw-bento-radius);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 16px 44px rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	transition:
		transform 0.35s cubic-bezier(0.2, 0.82, 0.2, 1),
		border-color 0.35s ease,
		box-shadow 0.35s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.tw-home-hero .tw-hero-bento__cell:hover {
		transform: translateY(-3px);
		border-color: rgba(255, 255, 255, 0.22);
		box-shadow:
			0 1px 0 rgba(255, 255, 255, 0.08) inset,
			0 22px 52px rgba(0, 0, 0, 0.28);
	}
}

.tw-hero-bento__cell--headline {
	grid-column: 1 / span 8;
	grid-row: 1;
	display: flex;
	align-self: end;
	min-height: 0;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.tw-hero-bento__column--stat {
	grid-column: 9 / span 4;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: var(--tw-bento-gap);
	justify-content: flex-end;
	align-self: end;
	min-width: 0;
	min-height: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.tw-home-hero .tw-hero-bento__cell--headline:hover {
		transform: none;
		border-color: transparent;
		box-shadow: none;
	}
}

.tw-hero-bento__cell--stat {
	flex: 1 1 auto;
	justify-content: center;
	text-align: left;
	background: var(--tw-hero-shell-gradient);
	border-color: rgba(255, 255, 255, 0.18);
	min-height: clamp(11rem, 28vh, 15rem);
}

.tw-hero-bento__cell--link {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.tw-hero-bento__cell--link:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.85);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
	.tw-home-hero .tw-hero-bento__cell--link:hover {
		transform: translateY(-4px);
		border-color: rgba(255, 255, 255, 0.28);
	}

	.tw-home-hero .tw-hero-bento__cell--link:hover .tw-hero-bento__stat-cta i {
		transform: translateX(0.2em);
	}
}

.tw-hero-bento__stat-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin-top: auto;
	padding-top: clamp(0.85rem, 2vw, 1.1rem);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.tw-hero-bento__stat-cta i {
	font-size: 0.75em;
	transition: transform 0.28s cubic-bezier(0.2, 0.82, 0.2, 1);
}

.tw-hero-bento__stat-value {
	margin: 0;
	font-size: clamp(2.5rem, 6.5vw, 4.25rem);
	font-weight: 800;
	line-height: 0.92;
	letter-spacing: 0.01em;
	color: #fff;
}

.tw-hero-bento__stat-plus {
	color: rgba(255, 255, 255, 0.55);
}

.tw-hero-bento__stat-label {
	margin: 0.4rem 0 0;
	font-size: clamp(0.95rem, 1.6vw, 1.12rem);
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.tw-hero-bento__stat-text {
	margin: 0.45rem 0 0;
	max-width: 16rem;
	font-size: 0.88rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.68);
}

.tw-hero-bento__cell--headline .tw-hero-copy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	min-width: 0;
	min-height: 0;
	padding: clamp(1.15rem, 2.5vw, 1.75rem);
	box-sizing: border-box;
	background: rgba(18, 18, 18, 0.42);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--tw-bento-radius);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 16px 44px rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	transition:
		transform 0.35s cubic-bezier(0.2, 0.82, 0.2, 1),
		border-color 0.35s ease,
		box-shadow 0.35s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.tw-home-hero .tw-hero-bento__cell--headline .tw-hero-copy:hover {
		transform: translateY(-3px);
		border-color: rgba(255, 255, 255, 0.22);
		box-shadow:
			0 1px 0 rgba(255, 255, 255, 0.08) inset,
			0 22px 52px rgba(0, 0, 0, 0.28);
	}
}

.tw-hero-bento__icons-wrap {
	flex: 0 0 auto;
	width: 100%;
	padding: clamp(0.65rem, 1.6vw, 0.95rem) clamp(0.75rem, 2vw, 1.1rem);
	box-sizing: border-box;
	background: rgba(18, 18, 18, 0.42);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--tw-bento-radius);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 16px 44px rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	transition:
		transform 0.35s cubic-bezier(0.2, 0.82, 0.2, 1),
		border-color 0.35s ease,
		box-shadow 0.35s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.tw-home-hero .tw-hero-bento__icons-wrap:hover {
		transform: translateY(-3px);
		border-color: rgba(255, 255, 255, 0.22);
		box-shadow:
			0 1px 0 rgba(255, 255, 255, 0.08) inset,
			0 22px 52px rgba(0, 0, 0, 0.28);
	}
}

.tw-hero-bento__cell--headline .tw-hero-kicker {
	color: rgba(255, 255, 255, 0.62);
}

.tw-hero-bento__cell--headline .tw-hero-title {
	text-transform: uppercase;
	letter-spacing: -0.02em;
	font-size: clamp(2.35rem, 6.8vw, 4.75rem);
	line-height: 1;
	margin-bottom: clamp(0.75rem, 1.8vw, 1rem);
	text-wrap: pretty;
}

.tw-home-hero .tw-hero-bento__cell--headline .tw-hero-title__line {
	display: block;
	white-space: nowrap;
}

.tw-hero-bento__cell--headline .tw-hero-lede {
	max-width: 36rem;
	margin-bottom: clamp(1rem, 2.2vw, 1.35rem);
}

.tw-hero-bento__icons-wrap .tw-hero-aside {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
}

.tw-hero-bento__icons-wrap .tw-hero-social {
	flex: 0 0 auto;
	flex-wrap: nowrap;
	justify-content: center;
	gap: clamp(0.45rem, 1.4vw, 0.65rem);
}

.tw-hero-bento__icons-wrap .tw-hero-icon-btn {
	width: clamp(2.65rem, 7vw, 3rem);
	height: clamp(2.65rem, 7vw, 3rem);
}

/* Mobile / narrow: copy centred in hero; gap below; get connected bottom-left */
@media (max-width: 900px) {
	.tw-hero-header {
		padding-bottom: clamp(0.75rem, 2.5vw, 1.25rem);
	}

	.tw-hero-body.tw-hero-bento {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		/* Equal space above/below copy; stat sits on last row */
		grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr) auto;
		align-items: start;
		gap: 0;
		padding-top: 0;
	}

	.tw-hero-bento__cell--headline {
		grid-row: 2;
		grid-column: 1;
		display: block;
		align-self: stretch;
		min-height: 0;
		width: 100%;
	}

	.tw-hero-bento__cell--headline .tw-hero-copy {
		flex: none;
		flex-grow: 0;
		justify-content: flex-start;
		width: 100%;
		max-width: 100%;
		min-height: 0;
		height: auto;
	}

	.tw-hero-bento__column--stat {
		grid-row: 4;
		grid-column: 1;
		align-self: start;
		width: fit-content;
		max-width: 100%;
		margin-top: clamp(0.75rem, 2.5vh, 1.25rem);
	}

	.tw-hero-bento__column--stat .tw-hero-bento__icons-wrap {
		width: fit-content;
		align-self: flex-start;
	}

	.tw-hero-bento__icons-wrap .tw-hero-kicker--right {
		justify-content: flex-start;
		text-align: left;
	}

	.tw-hero-bento__icons-wrap .tw-hero-aside {
		justify-content: flex-start;
	}

	.tw-hero-bento__icons-wrap .tw-hero-social {
		justify-content: flex-start;
	}
}

@media (max-width: 640px) {
	.tw-hero-bento__cell:not(.tw-hero-bento__cell--headline) {
		padding: clamp(1rem, 4vw, 1.25rem);
	}

	.tw-hero-bento__stat-text {
		max-width: none;
	}

	.tw-hero-bento__cell--headline .tw-hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.tw-hero-bento__cell--headline .tw-hero-actions .tw-hero-btn {
		width: 100%;
		justify-content: center;
	}
}

/* Short viewports: keep mosaic inside scrollable inner area without crowding */
@media (max-height: 720px) {
	.tw-hero-header {
		padding-bottom: 1rem;
		margin-bottom: 0;
	}

	.tw-hero-body.tw-hero-bento {
		padding-top: 0.5rem;
		gap: 0.85rem;
	}

	.tw-hero-bento__cell--headline .tw-hero-title {
		font-size: clamp(1.55rem, 6vw, 2.35rem);
	}

	.tw-hero-bento__stat-value {
		font-size: clamp(2rem, 8vw, 2.75rem);
	}
}


.tw-hero-kicker {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.55rem;
	font-size: 0.75rem;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #8a8a8a;
}

.tw-hero-kicker--right {
	justify-content: flex-end;
	text-align: right;
}

@media (max-width: 820px) {
	.tw-hero-kicker--right {
		justify-content: flex-start;
		text-align: left;
		margin-top: 1.5rem;
	}
}

.tw-hero-kicker__line {
	display: inline-block;
	width: 1.5rem;
	height: 1px;
	background: var(--tw-kicker-line-color-on-dark, rgba(255, 255, 255, 0.55));
	flex-shrink: 0;
}

.tw-hero-title {
	margin: 0 0 1rem;
	font-size: clamp(1.75rem, 5dvw, 60px);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-wrap: pretty;
}

.tw-hero-lede {
	max-width: 28rem;
	margin: 0 0 1.75rem;
	font-size: clamp(0.95rem, 1.6vw, 1.05rem);
	font-weight: 400;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.9);
}

.tw-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.tw-hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.85rem 1.35rem;
	border-radius: 10px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, filter 0.15s ease;
}

.tw-hero-btn::after {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: max(0.58em, 0.48rem);
	height: max(0.58em, 0.48rem);
	margin-inline-start: 0.4em;
	margin-inline-end: 0.04em;
	border-top: 2.5px solid currentColor;
	border-right: 2.5px solid currentColor;
	transform: translateX(0) rotate(45deg);
	opacity: 0.4;
	transition: opacity 0.25s ease, border-color 0.3s ease;
}

.tw-hero-btn:hover::after,
.tw-hero-btn:focus-visible::after {
	border-top-color: #fff;
	border-right-color: #fff;
	animation: tw-hero-btn-chevron 1.15s ease-in-out forwards;
}

.tw-hero-btn:hover,
.tw-hero-btn:focus-visible {
	color: #fff;
}

@keyframes tw-hero-btn-chevron {
	0%,
	12% {
		transform: translateX(0) rotate(45deg);
		opacity: 0.92;
	}

	28% {
		transform: translateX(0.72em) rotate(45deg);
		opacity: 0;
	}

	29% {
		transform: translateX(-0.78em) rotate(45deg);
		opacity: 0;
	}

	52% {
		transform: translateX(0) rotate(45deg);
		opacity: 0.92;
	}

	100% {
		transform: translateX(0) rotate(45deg);
		opacity: 0.92;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tw-hero-btn:hover::after,
	.tw-hero-btn:focus-visible::after {
		animation: none;
		opacity: 0.92;
	}
}

.tw-hero-btn--muted {
	background: var(--tw-hero-btn-muted);
	border: 1px solid var(--tw-hero-btn-muted-border);
	color: #fff;
}

/* Translucent “light” CTA (header + anywhere .tw-hero-btn--light is used) */
.tw-hero-btn--light {
	overflow: visible;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: rgba(255, 255, 255, 0.92);
}

.tw-hero-btn--light:hover,
.tw-hero-btn--light:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.38);
	color: #fff;
}

/* Hero Get in touch: same glass muted + hover as testimonials; chevron slide needs room to the left */
.tw-hero-home .tw-hero-actions .tw-hero-btn--muted {
	overflow: visible;
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.22);
	color: rgba(255, 255, 255, 0.92);
}

.tw-hero-home .tw-hero-actions .tw-hero-btn--muted:hover,
.tw-hero-home .tw-hero-actions .tw-hero-btn--muted:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.38);
	color: #fff;
}

.tw-hero-btn--accent {
	background: var(--tw-hero-btn-accent);
	border: 1px solid transparent;
	color: #fff;
}

.tw-hero-btn--accent:hover,
.tw-hero-btn--accent:focus-visible {
	background: var(--tw-hero-btn-accent-hover);
	color: #fff;
}

/* Full-width CTAs only on small phones — not tablet / large-phone widths */
@media (max-width: 480px) {
	.tw-hero-actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.tw-hero-btn {
		width: 100%;
		max-width: none;
		box-sizing: border-box;
		justify-content: center;
	}

	.tw-home-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.tw-home-section__header--row {
		align-items: stretch;
	}
}

/*
 * Narrow viewports (carousel mobile): row headers (title + CTA) — place the button after section body so it sits at the bottom.
 * Uses display:contents on the header so title block, content, and CTA become grid siblings.
 */
@media (max-width: 899px) {
	.tw-home-section--features .tw-home-section__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(1rem, 3vw, 1.5rem);
	}

	.tw-home-section--features .tw-home-section__header--features.tw-home-section__header--row {
		display: contents;
	}

	.tw-home-section--features .tw-home-section__inner > div:first-child {
		grid-row: 1;
		padding-bottom: clamp(1rem, 3.2vw, 1.85rem);
	}

	.tw-home-section--features .tw-home-section__inner > .tw-home-features--services {
		grid-row: 2;
	}

	.tw-home-section--features .tw-home-section__inner > a.tw-hero-btn {
		grid-row: 3;
		justify-self: stretch;
		width: 100%;
		max-width: none;
		box-sizing: border-box;
	}

	.tw-home-clients-container {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(0.75rem, 2.2vw, 1.25rem);
	}

	.tw-home-clients-container .tw-home-section__header--clients.tw-home-section__header--row {
		display: contents;
	}

	.tw-home-clients-container > div:first-child {
		grid-row: 1;
	}

	.tw-home-clients-container > .tw-client-marquee-panel {
		grid-row: 2;
	}

	.tw-home-clients-container > a.tw-hero-btn {
		grid-row: 3;
		justify-self: stretch;
		width: 100%;
		max-width: none;
		box-sizing: border-box;
	}

	/* Fill at least min-height; push section CTAs (Get in touch, View all) to the bottom of the grey shell */
	.tw-home-section--testimonials .tw-clients-hero.tw-testimonials-hero,
	.tw-home-section--projects .tw-clients-hero.tw-testimonials-hero,
	.tw-single-related--band .tw-clients-hero.tw-testimonials-hero {
		display: flex;
		flex-direction: column;
	}

	.tw-home-section--testimonials .tw-clients-hero__inner,
	.tw-home-section--projects .tw-clients-hero__inner,
	.tw-single-related--band .tw-clients-hero__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr auto;
		flex: 1 1 auto;
		min-height: 0;
		row-gap: clamp(1rem, 3vw, 1.5rem);
	}

	.tw-home-section--projects .tw-clients-hero__inner,
	.tw-single-related--band .tw-clients-hero__inner {
		overflow: hidden;
	}

	.tw-home-section--testimonials .tw-clients-hero__inner .tw-home-section__header--clients.tw-home-section__header--row,
	.tw-home-section--projects .tw-clients-hero__inner .tw-home-section__header--clients.tw-home-section__header--row,
	.tw-single-related--band .tw-clients-hero__inner .tw-single-related__intro.tw-home-section__header--row {
		display: contents;
	}

	.tw-home-section--testimonials .tw-clients-hero__inner > div:first-child,
	.tw-home-section--projects .tw-clients-hero__inner > div:first-child,
	.tw-single-related--band .tw-clients-hero__inner > div:first-child {
		grid-row: 1;
		padding-bottom: clamp(1rem, 3.2vw, 1.85rem);
	}

	.tw-home-section--testimonials .tw-clients-hero__inner > .tw-home-testimonials-carousel,
	:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-clients-hero__inner > .tw-home-projects-carousel,
	.tw-home-section--projects .tw-clients-hero__inner > .tw-home-section--projects__cards-fx,
	.tw-single-related .tw-clients-hero__inner > .tw-single-related__cards-fx {
		grid-row: 2;
		min-height: 0;
		align-self: stretch;
	}

	.tw-home-section--testimonials .tw-clients-hero__inner > a.tw-hero-btn,
	.tw-home-section--projects .tw-clients-hero__inner > a.tw-hero-btn,
	.tw-single-related--band .tw-clients-hero__inner > a.tw-hero-btn {
		grid-row: 3;
		justify-self: stretch;
		align-self: end;
		width: 100%;
		max-width: none;
		box-sizing: border-box;
	}
}

/* --- Social / contact icons --- */

.tw-hero-aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}

@media (max-width: 820px) {
	.tw-hero-aside {
		align-items: flex-start;
		text-align: left;
	}
}

.tw-hero-social {
	display: flex;
	gap: 0.65rem;
}

.tw-hero-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 12px;
	background: var(--tw-hero-icon-bg);
	border: 1px solid var(--tw-hero-btn-muted-border);
	color: #fff;
	text-decoration: none;
	font-size: 1.05rem;
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		opacity 0.2s ease;
}

/* Hero aside + contact overlay: hover one icon, dim the others (same idea as .tw-hero-nav__menu). */
.tw-hero-social:has(.tw-hero-icon-btn:hover) .tw-hero-icon-btn:not(:hover),
.tw-hero-social:has(.tw-hero-icon-btn:focus-visible) .tw-hero-icon-btn:not(:focus-visible) {
	opacity: 0.45;
}

.tw-hero-icon-btn:hover,
.tw-hero-icon-btn:focus-visible {
	opacity: 1;
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.22);
	color: #fff;
}

.tw-hero-icon-btn:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.65);
	outline-offset: 4px;
}

/* --- Minimal footer strip --- */

body.tw-carpentry-home .site-main--front {
	position: relative;
	z-index: 1;
	margin: 0;
	margin-top: 0;
	padding: 0;
	width: var(--tw-hero-vw);
	max-width: 100%;
	margin-inline: auto;
	box-sizing: border-box;
	border: var(--tw-frame-inset) solid var(--tw-color-surface, #ffffff);
	border-top: none;
	border-radius: 0;
	background: transparent;
	overflow-x: hidden;
	overflow-y: visible;
	isolation: isolate;
}

/* First band: no margin — hero→about uses same vertical step as gaps between other main sections */
body.tw-carpentry-home .site-main--front > :first-child {
	margin-top: 0;
}

body.tw-carpentry-home .site-main--front > * + * {
	margin-top: var(--tw-home-section-gap);
}

/* Tighter band above global footer (testimonials / projects use large hero inner padding by default) */
body.tw-carpentry-home .site-main--front > .tw-home-section:last-child .tw-clients-hero__inner {
	padding-bottom: clamp(0.85rem, 2.4vw, 1.5rem);
}

/* Stacked bento bands: one vertical step between sections (previous __inner bottom pad only) */
body.tw-carpentry-home .tw-bento-page > .tw-home-section + .tw-home-section .tw-home-section__inner {
	padding-top: 0;
}

/* --- Bento page shell --- */

.tw-bento-page {
	background: var(--tw-bento-page-bg, transparent);
}

.tw-bento-cell {
	background: var(--tw-bento-cell-bg);
	border: var(--tw-bento-cell-border);
	border-radius: var(--tw-bento-radius);
	box-shadow: var(--tw-bento-cell-shadow);
	padding: clamp(1.35rem, 3vw, 2rem) clamp(1.25rem, 3vw, 1.85rem);
	box-sizing: border-box;
}

.tw-bento-cell--intro .tw-home-lede {
	max-width: none;
}

.tw-bento-cell--sectors .tw-home-heading--section {
	margin-bottom: 0;
}

.tw-bento-footer-grid {
	display: grid;
	grid-template-columns: 1.12fr 0.88fr;
	gap: var(--tw-bento-gap);
	align-items: stretch;
}

@media (max-width: 900px) {
	.tw-bento-footer-grid {
		grid-template-columns: 1fr;
	}
}

.tw-bento-cell--dark {
	text-align: center;
	color: #fff;
	background: linear-gradient(
		125deg,
		rgba(26, 26, 26, 0.98) 0%,
		rgba(77, 77, 77, 0.94) 48%,
		rgba(40, 40, 40, 0.96) 100%
	);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: var(--tw-bento-cell-shadow);
}

.tw-bento-cell--dark .tw-home-band__stats {
	margin-bottom: clamp(1.5rem, 3.5vw, 2rem);
}

.tw-bento-cell--contact {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tw-bento-cell--contact .tw-home-cta__lede {
	margin-left: auto;
	margin-right: auto;
}

.tw-bento-cell--contact .tw-home-contact-lines {
	justify-content: center;
}

.tw-bento-cell--contact .tw-home-cta__actions {
	justify-content: center;
}

.tw-bento-cell--contact .tw-hero-btn--muted {
	background: rgba(26, 26, 26, 0.06);
	border: 1px solid rgba(26, 26, 26, 0.14);
	color: var(--tw-hero-charcoal-solid, #1a1a1a);
}

.tw-bento-cell--contact .tw-hero-btn--muted:hover,
.tw-bento-cell--contact .tw-hero-btn--muted:focus-visible {
	color: var(--tw-hero-charcoal-solid, #1a1a1a);
}

/* --- Homepage sections (hero-inspired: kicker lines, Manrope) --- */

.tw-home-section {
	font-family: "Manrope", var(--tw-font-sans, system-ui, sans-serif);
	color: var(--tw-color-text, #1a1a1a);
}

/* Section shells fade up on scroll; inner [data-tw-fx] content follows (see home-hero.js). */
@keyframes tw-section-shell-in {
	from {
		opacity: 0;
		transform: translate3d(0, 1.1rem, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@media (prefers-reduced-motion: no-preference) {
	body.tw-carpentry-home [data-tw-section-shell] {
		opacity: 0;
		will-change: transform, opacity;
	}

	body.tw-carpentry-home [data-tw-section-shell].is-inview {
		animation: tw-section-shell-in 0.56s cubic-bezier(0.2, 0.82, 0.2, 1) both;
	}

	/* Keep section copy/cards hidden until the shell has entered. */
	.tw-fx-js [data-tw-section-shell]:not(.is-inview) [data-tw-fx] {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.tw-carpentry-home [data-tw-section-shell] {
		opacity: 1;
		animation: none;
		transform: none;
	}
}

/* === Generic per-element reveal system (data-tw-fx) ===
 *
 * A site-wide reveal vocabulary that any page can opt into. Triggered when
 * the element (or its [data-tw-fx-group] ancestor) enters the viewport
 * (see home-hero.js). Sits alongside the existing [data-tw-reveal] block
 * which fades whole sections — they layer cleanly because each operates
 * on its own DOM scope.
 *
 *   data-tw-fx="wipe"  – text wipe: clip-path swipe + colored overlay sweep
 *                        (same effect as the homepage hero title reveal).
 *   data-tw-fx="words" – section titles: each word slides up in place with
 *                        100ms stagger (override via data-tw-fx-word-stagger).
 *   data-tw-fx="fade"  – soft fade-up. Default for buttons + paragraphs.
 *   data-tw-fx="scale" – scale-in pop. Matches the bento card lazy-load.
 *
 *   data-tw-fx-tone="light" (default) – white overlay (dark/charcoal backgrounds)
 *   data-tw-fx-tone="dark"            – charcoal overlay (light backgrounds)
 *
 * Stagger: an ancestor with [data-tw-fx-group] causes the JS to assign
 * each descendant [data-tw-fx] a cascading --tw-fx-delay (default 80ms
 * between items, overridable via data-tw-fx-stagger="120"). Explicit
 * inline --tw-fx-delay always wins.
 */

@keyframes tw-fx-wipe-clip {
	0%,
	22% {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
	}
	50% {
		opacity: 1;
		clip-path: inset(0 0 0 0);
	}
	100% {
		opacity: 1;
		clip-path: inset(0 0 0 0);
	}
}

@keyframes tw-fx-wipe-sweep {
	0% {
		transform: translate3d(-115%, 0, 0);
	}
	46% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(112%, 0, 0);
	}
}

@keyframes tw-fx-fade-up {
	from {
		opacity: 0;
		transform: translate3d(0, 0.55rem, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes tw-fx-scale-in {
	0% {
		opacity: 0;
		transform: scale(0.88) translateY(10px);
	}
	60% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes tw-fx-word-up {
	from {
		opacity: 0;
		transform: translate3d(0, 0.55em, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* CSS variables apply unconditionally so anyone can read --tw-fx-wipe-color. */
[data-tw-fx] {
	--tw-fx-wipe-color: #fff;
	--tw-fx-ease: cubic-bezier(0.2, 0.82, 0.2, 1);
	--tw-fx-wipe-ease: cubic-bezier(0.65, 0.02, 0.35, 1);
	--tw-fx-scale-ease: cubic-bezier(0.34, 1.32, 0.5, 1);
	--tw-fx-word-ease: cubic-bezier(0.34, 1.46, 0.64, 1);
}

[data-tw-fx-tone="dark"] {
	--tw-fx-wipe-color: var(--tw-hero-accent, #1a1a1a);
}

/* Only hide elements when the JS reveal observer has booted (the .tw-fx-js
   flag is set on <html> by home-hero.js). Without JS, elements remain
   visible at their natural opacity so the page is still readable. */
@media (prefers-reduced-motion: no-preference) {
	.tw-fx-js [data-tw-fx] {
		opacity: 0;
		will-change: opacity, transform;
	}

	.tw-fx-js [data-tw-fx="wipe"] {
		position: relative;
		overflow: hidden;
		clip-path: inset(0 100% 0 0);
	}

	.tw-fx-js [data-tw-fx="wipe"]::after {
		content: "";
		position: absolute;
		inset: -0.08em -0.2em;
		background: var(--tw-fx-wipe-color);
		transform: translate3d(-115%, 0, 0);
		pointer-events: none;
		z-index: 2;
	}

	.tw-fx-js [data-tw-fx="wipe"].is-inview {
		animation: tw-fx-wipe-clip 0.94s var(--tw-fx-ease) both;
		animation-delay: var(--tw-fx-delay, 0s);
	}

	.tw-fx-js [data-tw-fx="wipe"].is-inview::after {
		animation: tw-fx-wipe-sweep 0.94s var(--tw-fx-wipe-ease) both;
		animation-delay: var(--tw-fx-delay, 0s);
	}

	.tw-fx-js [data-tw-fx="fade"].is-inview {
		animation: tw-fx-fade-up 0.52s var(--tw-fx-ease) both;
		animation-delay: var(--tw-fx-delay, 0s);
	}

	.tw-fx-js [data-tw-fx="scale"].is-inview {
		animation: tw-fx-scale-in 0.56s var(--tw-fx-scale-ease) both;
		animation-delay: var(--tw-fx-delay, 0s);
		transform-origin: center center;
	}

	.tw-fx-js [data-tw-fx="words"] {
		opacity: 1;
		overflow: visible;
		clip-path: none;
	}

	.tw-fx-js [data-tw-fx="words"]::after {
		display: none;
	}

	.tw-fx-js [data-tw-fx="words"] .tw-fx-word {
		display: inline-block;
		opacity: 0;
		transform: translate3d(0, 0.55em, 0);
		will-change: opacity, transform;
	}

	.tw-fx-js [data-tw-fx="words"].is-inview .tw-fx-word {
		animation: tw-fx-word-up 0.58s var(--tw-fx-word-ease) both;
		animation-delay: var(--tw-fx-word-delay, 0ms);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tw-fx-js [data-tw-fx] {
		opacity: 1 !important;
		animation: none !important;
		transform: none !important;
		clip-path: none !important;
	}
	.tw-fx-js [data-tw-fx="wipe"]::after {
		display: none !important;
	}
	.tw-fx-js [data-tw-fx="words"] .tw-fx-word {
		opacity: 1 !important;
		animation: none !important;
		transform: none !important;
	}
}

.tw-home-section__inner {
	max-width: none;
	width: 100%;
	margin: 0 auto;
	padding: var(--tw-hero-pad) var(--tw-hero-pad-x-end) var(--tw-hero-pad) var(--tw-hero-pad-x);
	box-sizing: border-box;
}

.tw-home-kicker {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.55rem;
	font-size: 0.72rem;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #5c5c5c;
}

.tw-home-kicker__line {
	display: inline-block;
	width: 1.5rem;
	height: 1px;
	background: var(--tw-kicker-line-color, rgba(26, 26, 26, 0.35));
	flex-shrink: 0;
}

.tw-home-heading {
	margin: 0 0 1rem;
	font-size: clamp(1.5rem, 3.8vw, 2.35rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--tw-heading-color);
}

.tw-home-lede {
	margin: 0;
	max-width: 38rem;
	font-size: clamp(0.98rem, 1.35vw, 1.08rem);
	line-height: 1.65;
	color: var(--tw-color-muted, #5c5c5c);
}

.tw-home-lede--tight {
	margin-top: 0.5rem;
	margin-bottom: 1.25rem;
}

.tw-home-section__header {
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.tw-home-section__header--row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}

.tw-home-heading--section {
	font-size: clamp(1.35rem, 3.2vw, 1.95rem);
	margin-bottom: 0;
}

.tw-home-link-all {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tw-hero-accent, #1a1a1a);
	white-space: nowrap;
}

.tw-home-link-all:hover,
.tw-home-link-all:focus-visible {
	text-decoration: underline;
	color: var(--tw-hero-accent, #1a1a1a);
}

.tw-home-section--trust {
	background: var(--tw-color-bg, #f5f4f0);
}

.tw-home-trust {
	text-align: center;
}

.tw-home-trust__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.25rem, 4vw, 2.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tw-home-trust__list--bento {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: var(--tw-bento-gap);
	align-items: stretch;
	justify-items: stretch;
	max-width: 100%;
}

.tw-home-trust__list--bento.tw-home-trust__list--text {
	gap: var(--tw-bento-gap);
}

.tw-home-trust__list--bento .tw-home-trust__item {
	margin: 0;
	padding: 0.65rem 1rem;
	background: var(--tw-bento-cell-bg);
	border: var(--tw-bento-cell-border);
	border-radius: var(--tw-bento-radius);
	box-shadow: var(--tw-bento-cell-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
}

.tw-home-trust__list--bento .tw-home-trust__pill {
	box-shadow: var(--tw-bento-cell-shadow);
	border-radius: var(--tw-bento-radius);
}

.tw-home-trust__item img {
	display: block;
	max-height: 52px;
	width: auto;
	max-width: min(140px, 28vw);
	object-fit: contain;
	filter: grayscale(0.15);
	opacity: 0.92;
}

.tw-home-trust__list--text {
	gap: 0.65rem;
}

.tw-home-trust__pill {
	padding: 0.45rem 0.9rem;
	border-radius: 999px;
	border: 1px solid rgba(26, 26, 26, 0.12);
	background: rgba(26, 26, 26, 0.03);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tw-hero-charcoal-solid, #1a1a1a);
}

.tw-home-trust__hint {
	margin: 1rem 0 0;
	font-size: 0.8rem;
	color: var(--tw-color-muted, #5c5c5c);
}

/* --- About (homepage): two bento-style cards — copy + image (image stacks above on narrow viewports) --- */

.tw-home-section--about {
	background: transparent;
	border-radius: 0;
	overflow: visible;
	padding: 0;
	font-family: "Manrope", var(--tw-font-sans, system-ui, sans-serif);
	color: var(--tw-color-text, #1a1a1a);
}

.tw-home-about-container {
	width: 100%;
	max-width: none;
	margin: 0;
	/* Match .tw-home-section__inner so the About bento aligns with Services / Why-us. */
	padding: var(--tw-hero-pad) var(--tw-hero-pad-x-end) var(--tw-hero-pad) var(--tw-hero-pad-x);
	box-sizing: border-box;
	background: transparent;
}

/* About bento mosaic: copy tile (tall) + photo tile. */
.tw-home-about__grid {
	display: grid;
	gap: var(--tw-bento-gap);
	align-items: stretch;
	background: transparent;
}

.tw-home-about__grid--bento {
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: minmax(0, auto);
}

.tw-home-about__text-card {
	grid-column: 1 / span 7;
	grid-row: 1 / span 2;
	display: flex;
	min-width: 0;
	box-sizing: border-box;
}

.tw-home-about__text-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 34rem;
	width: 100%;
	padding-block: clamp(0.75rem, 2.5vw, 1.5rem);
}

.tw-home-about__text-card .tw-home-kicker {
	color: var(--tw-color-muted, #5c5c5c);
}

.tw-home-about__text-card .tw-home-kicker__line {
	background: rgba(26, 26, 26, 0.22);
}

.tw-home-about__text-card .tw-home-heading--section {
	color: var(--tw-heading-color);
}

.tw-home-about__text-card .tw-home-lede {
	color: var(--tw-color-muted, #5c5c5c);
}

.tw-home-about__media-card {
	grid-column: 8 / span 5;
	grid-row: 1 / span 2;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	box-sizing: border-box;
	padding: 0;
	overflow: hidden;
}

.tw-home-about__media {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	min-height: clamp(13rem, 26vw, 17rem);
	isolation: isolate;
}

/* Dark highlight / quote tile (Why choose us bottom row). */
.tw-home-about__highlight-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.55rem;
	min-width: 0;
	text-align: left;
	text-decoration: none;
	color: #fff;
	overflow: hidden;
	isolation: isolate;
	transition:
		transform 0.4s cubic-bezier(0.2, 0.82, 0.2, 1),
		box-shadow 0.4s cubic-bezier(0.2, 0.82, 0.2, 1),
		border-color 0.4s ease;
}

.tw-home-about__highlight-kicker {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

.tw-home-about__highlight-title {
	margin: 0;
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.01em;
	text-transform: capitalize;
	color: #fff;
}

.tw-home-about__highlight-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin-top: 0.35rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

.tw-home-about__highlight-link i {
	transition: transform 0.35s cubic-bezier(0.2, 0.82, 0.2, 1);
}

.tw-home-about__highlight-cta {
	position: absolute;
	top: clamp(1rem, 2.6vw, 1.4rem);
	right: clamp(1rem, 2.4vw, 1.25rem);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
	transition:
		opacity 0.35s ease,
		transform 0.35s ease;
}

.tw-home-about__highlight-card:hover,
.tw-home-about__highlight-card:focus-visible {
	transform: translateY(-4px);
	border-color: rgba(255, 255, 255, 0.28);
	box-shadow: 0 22px 52px rgba(26, 26, 26, 0.32);
}

.tw-home-about__highlight-card:hover .tw-home-about__highlight-link i,
.tw-home-about__highlight-card:focus-visible .tw-home-about__highlight-link i {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.tw-home-about__highlight-card,
	.tw-home-about__highlight-link i {
		transition: none;
	}

	.tw-home-about__highlight-card:hover,
	.tw-home-about__highlight-card:focus-visible {
		transform: none;
	}
}

.tw-home-about__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Tablet: copy spans full width, photo below. */
@media (max-width: 1000px) and (min-width: 641px) {
	.tw-home-about__grid--bento {
		grid-template-columns: 1fr;
	}

	.tw-home-about__text-card {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.tw-home-about__media-card {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.tw-home-about__media {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}
}

/* Mobile: single-column stack. */
@media (max-width: 640px) {
	.tw-home-about__grid--bento {
		grid-template-columns: 1fr;
	}

	.tw-home-about__text-card,
	.tw-home-about__media-card {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.tw-home-about__media {
		min-height: 0;
		aspect-ratio: 16 / 10;
		max-height: min(60vw, 320px);
	}
}

.tw-home-section__header--about {
	margin-bottom: clamp(1rem, 2.2vw, 1.35rem);
}

.tw-home-section--about .tw-home-section__header--about .tw-home-heading--section {
	font-size: clamp(1.75rem, 5vw, 3.75rem);
	line-height: 0.95;
	letter-spacing: 0.02em;
	margin-bottom: 0;
}

.tw-home-about__media-card[data-tw-fx] {
	--tw-fx-delay: 720ms;
}

.tw-home-about__body {
	text-align: justify;
	hyphens: auto;
}

.tw-home-about__body .tw-home-lede + .tw-home-lede {
	margin-top: 1.1em;
}

.tw-home-section--about .tw-home-about__actions {
	margin-top: clamp(1.35rem, 3vw, 2rem);
}

/* Fire door accreditations (UK Fire Door Training, FireQual) — under About CTA */
.tw-home-about__credentials-panel {
	margin-top: clamp(1.35rem, 3vw, 2rem);
	padding-top: 0;
	border-top: none;
}

.tw-home-about__credentials-panel .tw-home-feature__credentials-list {
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 1.5rem;
}

/* Credential logos — cap height so uploads and theme assets align in the row. */
.tw-home-about__credentials-panel .tw-home-feature__credentials-item img {
	display: block;
	width: auto;
	height: auto;
	max-height: 4rem;
	object-fit: contain;
}

/* UK Fire Door Training logo — primary accreditation in the row. */
.tw-home-about__credentials-panel .tw-home-feature__credentials-item--uk-fire-door img,
.tw-home-about__credentials-panel .tw-home-feature__credentials-item:first-child img {
	max-height: 5rem;
}

@media (max-width: 520px) {
	.tw-home-about__credentials-panel .tw-home-feature__credentials-list {
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* --- Why choose us: trust bento (dark lead tile + light USP cards) --- */

.tw-home-section--whyus {
	font-family: "Manrope", var(--tw-font-sans, system-ui, sans-serif);
	color: var(--tw-color-text, #1a1a1a);
}

.tw-home-section__header--whyus {
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.tw-home-whyus-bento {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: minmax(0, 1fr);
	gap: var(--tw-bento-gap);
	align-items: stretch;
}

.tw-home-whyus-lead {
	grid-column: 1 / span 4;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	text-align: left;
}

/* Photo-backed lead tile: image + legibility wash beneath the copy. */
.tw-home-whyus-lead--photo {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.tw-home-whyus-lead__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background-color: var(--tw-hero-charcoal-solid, #1a1a1a);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
	transform: scale(1);
	transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
	will-change: transform;
}

.tw-home-whyus-lead__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	pointer-events: none;
	background:
		linear-gradient(
			to top,
			rgba(16, 16, 16, 0.92) 0%,
			rgba(26, 26, 26, 0.78) 34%,
			rgba(40, 40, 40, 0.55) 62%,
			rgba(40, 40, 40, 0.4) 100%
		),
		linear-gradient(
			125deg,
			rgba(26, 26, 26, 0.55) 0%,
			rgba(40, 40, 40, 0.3) 100%
		);
}

.tw-home-whyus-lead--photo > .tw-home-whyus-lead__value,
.tw-home-whyus-lead--photo > .tw-home-whyus-lead__label,
.tw-home-whyus-lead--photo > .tw-home-whyus-lead__text {
	position: relative;
	z-index: 2;
}

.tw-home-whyus-lead--photo:hover .tw-home-whyus-lead__bg {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.tw-home-whyus-lead__bg {
		transition: none;
	}

	.tw-home-whyus-lead--photo:hover .tw-home-whyus-lead__bg {
		transform: none;
	}
}

.tw-home-whyus-lead__value {
	margin: 0;
	font-size: clamp(3rem, 7vw, 4.75rem);
	font-weight: 800;
	line-height: 0.92;
	letter-spacing: 0.01em;
	color: #fff;
}

.tw-home-whyus-lead__plus {
	color: rgba(255, 255, 255, 0.55);
}

.tw-home-whyus-lead__label {
	margin: 0.35rem 0 0;
	font-size: clamp(1rem, 1.8vw, 1.2rem);
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.tw-home-whyus-lead__text {
	margin: 0.4rem 0 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
}

.tw-home-whyus-card {
	grid-column: span 4;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	transition:
		transform 0.4s cubic-bezier(0.2, 0.82, 0.2, 1),
		box-shadow 0.4s cubic-bezier(0.2, 0.82, 0.2, 1),
		border-color 0.4s ease;
}

.tw-home-whyus-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: clamp(0.85rem, 2vw, 1.15rem);
	border-radius: 12px;
	background: rgba(26, 26, 26, 0.07);
	color: var(--tw-hero-accent, #1a1a1a);
	font-size: 1.2rem;
}

.tw-home-whyus-card__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.02rem, 1.6vw, 1.18rem);
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--tw-heading-color);
}

.tw-home-whyus-card__text {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--tw-color-muted, #5c5c5c);
}

.tw-home-whyus-card:hover,
.tw-home-whyus-card:focus-within {
	transform: translateY(-4px);
	border-color: rgba(26, 26, 26, 0.18);
	box-shadow: 0 18px 44px rgba(26, 26, 26, 0.12);
}

.tw-home-whyus-bottom {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--tw-bento-gap);
	align-items: stretch;
	margin-top: var(--tw-bento-gap);
}

.tw-home-whyus-bottom .tw-home-about__highlight-card {
	grid-column: 1 / span 5;
	grid-row: 1;
	min-height: clamp(8.5rem, 22vw, 11rem);
}

.tw-home-whyus__stats-wrap {
	grid-column: 6 / span 7;
	min-width: 0;
}

@media (max-width: 1000px) {
	.tw-home-whyus-lead {
		grid-column: 1 / -1;
		grid-row: auto;
		text-align: center;
		align-items: center;
	}

	.tw-home-whyus-lead__label,
	.tw-home-whyus-lead__text {
		max-width: 32rem;
	}

	.tw-home-whyus-card {
		grid-column: span 6;
	}

	.tw-home-whyus-bottom .tw-home-about__highlight-card,
	.tw-home-whyus__stats-wrap {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.tw-home-whyus-bento {
		grid-template-columns: 1fr;
	}

	.tw-home-whyus-lead,
	.tw-home-whyus-card {
		grid-column: 1 / -1;
	}

	.tw-home-whyus-bottom {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tw-home-whyus-card {
		transition: none;
	}

	.tw-home-whyus-card:hover,
	.tw-home-whyus-card:focus-within {
		transform: none;
	}
}

/* --- Client logos: full-width infinite marquee --- */

.tw-home-section--clients {
	background: var(--tw-color-surface, #ffffff);
	border-radius: var(--tw-bento-radius);
	overflow: hidden;
	padding: 0;
	font-family: "Manrope", var(--tw-font-sans, system-ui, sans-serif);
}

.tw-home-clients-container {
	width: 100%;
	max-width: none;
	margin-left: auto;
	margin-right: auto;
	padding: var(--tw-hero-pad) var(--tw-hero-pad-x-end) var(--tw-hero-pad) var(--tw-hero-pad-x);
	box-sizing: border-box;
}

.tw-clients-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	width: var(--tw-hero-vw);
	max-width: 100%;
	height: clamp(300px, 50svh, 520px);
	min-height: clamp(300px, 50svh, 520px);
	max-height: clamp(300px, 50svh, 520px);
	box-sizing: border-box;
	border-radius: var(--tw-hero-radius);
	border: none;
	overflow: hidden;
	isolation: isolate;
	color: #fff;
}

.tw-clients-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: var(--tw-hero-radius);
	background: linear-gradient(
		125deg,
		rgba(26, 26, 26, 0.98) 0%,
		rgba(77, 77, 77, 0.94) 48%,
		rgba(40, 40, 40, 0.96) 100%
	);
}

.tw-clients-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--tw-hero-radius);
	background: linear-gradient(
		120deg,
		rgba(26, 26, 26, 0.66) 0%,
		rgba(77, 77, 77, 0.48) 45%,
		rgba(40, 40, 40, 0.44) 100%
	);
}

.tw-clients-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	padding:
		max(var(--tw-hero-pad), env(safe-area-inset-top, 0px))
		var(--tw-hero-pad-x-end)
		max(var(--tw-hero-pad), env(safe-area-inset-bottom, 0px))
		var(--tw-hero-pad-x);
	box-sizing: border-box;
	overflow: hidden;
}

.tw-home-section__header--clients {
	margin-bottom: clamp(0.75rem, 1.8vw, 1.15rem);
	text-align: left;
}

.tw-home-section__header--clients.tw-home-section__header--row {
	align-items: center;
}

.tw-home-section__header--clients.tw-home-section__header--row > div:first-child {
	min-width: 0;
	flex: 1 1 auto;
}

.tw-home-section__header--clients.tw-home-section__header--row .tw-hero-btn {
	flex-shrink: 0;
}

.tw-home-section--clients .tw-home-section__header--clients .tw-home-kicker {
	color: var(--tw-color-muted, #5c5c5c);
}

.tw-home-section--clients .tw-home-section__header--clients .tw-home-kicker__line {
	background: rgba(26, 26, 26, 0.22);
}

.tw-home-section--clients .tw-home-section__header--clients .tw-home-heading {
	color: var(--tw-heading-color);
}

.tw-home-section__header--clients .tw-home-heading--section {
	font-size: clamp(1.75rem, 5dvw, 60px);
	line-height: 0.95;
	letter-spacing: 0.02em;
}

/* Testimonials / projects (grey shell): light header + body copy */
.tw-home-section--testimonials .tw-home-section__header--clients .tw-home-kicker,
.tw-home-section--projects .tw-home-section__header--clients .tw-home-kicker {
	color: rgba(255, 255, 255, 0.72);
}

.tw-home-section--testimonials .tw-home-section__header--clients .tw-home-kicker__line,
.tw-home-section--projects .tw-home-section__header--clients .tw-home-kicker__line {
	background: rgba(255, 255, 255, 0.35);
}

.tw-home-section--testimonials .tw-home-section__header--clients .tw-home-heading,
.tw-home-section--projects .tw-home-section__header--clients .tw-home-heading {
	color: #fff;
}

.tw-home-section--testimonials .tw-home-section__header--row .tw-hero-btn--muted,
.tw-home-section--projects .tw-home-section__header--row .tw-hero-btn--muted {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.22);
	color: rgba(255, 255, 255, 0.92);
}

.tw-home-section--testimonials .tw-home-section__header--row .tw-hero-btn--muted:hover,
.tw-home-section--testimonials .tw-home-section__header--row .tw-hero-btn--muted:focus-visible,
.tw-home-section--projects .tw-home-section__header--row .tw-hero-btn--muted:hover,
.tw-home-section--projects .tw-home-section__header--row .tw-hero-btn--muted:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.38);
	color: #fff;
}

.tw-client-marquee-panel {
	background: transparent;
	border: none;
	border-radius: clamp(16px, 2.2vw, 20px);
	padding: clamp(1.35rem, 3vw, 2.15rem) clamp(1.15rem, 3vw, 2rem);
}

.tw-home-section--clients-empty {
	text-align: center;
}

.tw-home-section--clients-empty .tw-client-marquee__hint {
	margin-top: 0.35rem;
}

.tw-client-marquee__hint {
	margin: 0 auto;
	max-width: none;
	padding: 0 clamp(1rem, 2.5vw, 1.75rem);
	font-size: 0.8rem;
	color: var(--tw-color-muted, #5c5c5c);
	text-align: center;
}

.tw-client-marquee {
	width: 100%;
}

.tw-client-marquee__mask {
	overflow: hidden;
	width: 100%;
	mask-image: var(--tw-edge-mask-marquee);
	-webkit-mask-image: var(--tw-edge-mask-marquee);
}

.tw-client-marquee__track {
	display: flex;
	width: max-content;
	flex-wrap: nowrap;
	animation: tw-client-marquee-scroll var(--tw-marquee-duration, 80s) linear infinite;
	will-change: transform;
}

.tw-client-marquee__row {
	display: flex;
	flex: 0 0 auto;
	flex-direction: row;
	align-items: center;
	gap: clamp(2.75rem, 6vw, 5rem);
	list-style: none;
	margin: 0;
	padding: 0 clamp(1.85rem, 4.8vw, 3.25rem);
	box-sizing: border-box;
}

.tw-client-marquee__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin: 0;
	padding: clamp(0.35rem, 1.2vw, 0.55rem) clamp(0.5rem, 1.8vw, 0.85rem);
	border-radius: clamp(8px, 1.4vw, 14px);
}

.tw-client-marquee__img {
	display: block;
	height: clamp(46px, 7.5vw, 72px);
	width: auto;
	max-width: min(240px, 48vw);
	object-fit: contain;
	filter: grayscale(0.12);
	opacity: 0.9;
}

@keyframes tw-client-marquee-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tw-client-marquee__track {
		animation: none;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.35rem;
	}

	.tw-client-marquee__track .tw-client-marquee__row[aria-hidden="true"] {
		display: none;
	}

	.tw-client-marquee__mask {
		mask-image: none;
		-webkit-mask-image: none;
		overflow-x: auto;
	}
}

/* --- Testimonials / projects bento --- */

.tw-home-section--testimonials {
	background: transparent;
	padding: 0;
	overflow: visible;
}

.tw-home-section__header--testimonials,
.tw-home-section__header--projects {
	margin-bottom: clamp(1.15rem, 2.5vw, 1.9rem);
}

/* Testimonials / projects shell: grow with content (no fixed viewport-height cap); bg/overlay still fill via absolute inset */
.tw-clients-hero.tw-testimonials-hero {
	height: auto;
	min-height: clamp(300px, 50svh, 520px);
	max-height: none;
	overflow: visible;
}

.tw-home-section--projects > .tw-clients-hero.tw-projects-hero.tw-testimonials-hero {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	height: auto;
}

.tw-home-section--testimonials .tw-clients-hero__inner {
	height: auto;
	overflow: visible;
}

/* Same curve as hero image/gradient (inside the white frame inset), not the outer hero chrome radius */
.tw-home-section--testimonials .tw-clients-hero,
.tw-home-section--testimonials .tw-clients-hero__bg,
.tw-home-section--testimonials .tw-clients-hero__overlay,
.tw-home-section--projects .tw-clients-hero,
.tw-home-section--projects .tw-clients-hero__bg,
.tw-home-section--projects .tw-clients-hero__overlay {
	border-radius: var(--tw-hero-inner-radius);
}

/* --- Testimonials carousel --- */

.tw-home-testimonials-carousel {
	width: 100%;
	min-width: 0;
	--tw-testimonial-interval: 5s;
	/* Slide width — narrower than full track so prev/next cards peek at the sides */
	--tw-testimonial-slide-w: min(86cqw, 360px);
}

/* Non-scrolling wrapper (layout only; edge fade is mask on viewport — same as client marquee) */
.tw-home-testimonials-carousel__viewport-shell {
	position: relative;
	z-index: 0;
	width: 100%;
	min-width: 0;
	margin-block: clamp(1rem, 2.8vw, 1.85rem);
}

.tw-home-testimonials-carousel__viewport {
	position: relative;
	z-index: 0;
	container-type: inline-size;
	container-name: tw-testimonials;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	/* pan-x alone blocks vertical page scroll when the touch starts on the carousel */
	touch-action: pan-x pan-y;
	/* Edge mask when data-scroll-overflow=true (see JS + data-at-* rules below) */
	mask-image: none;
	-webkit-mask-image: none;
	mask-size: 100% 100%;
	-webkit-mask-size: 100% 100%;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	/* Hide scrollbar — track still scrollable (touch, drag, wheel, programmatic) */
	scrollbar-width: none;
	-ms-overflow-style: none;
	outline: none;
}

/* No horizontal overflow: all cards fit — never feather */
.tw-home-testimonials-carousel[data-scroll-overflow="false"] .tw-home-testimonials-carousel__viewport {
	mask-image: none;
	-webkit-mask-image: none;
}

/*
 * Fades follow scroll position (data-mask-left / data-mask-right), not slide index — so the left
 * feather does not appear until content is actually clipped off the left, and the last slide can
 * show a narrow left hint without using the heavy marquee left band.
 */
.tw-home-testimonials-carousel[data-scroll-overflow="true"][data-mask-left="false"][data-mask-right="false"] .tw-home-testimonials-carousel__viewport {
	mask-image: none;
	-webkit-mask-image: none;
}

.tw-home-testimonials-carousel[data-scroll-overflow="true"][data-mask-left="false"][data-mask-right="true"] .tw-home-testimonials-carousel__viewport {
	mask-image: var(--tw-edge-mask-right);
	-webkit-mask-image: var(--tw-edge-mask-right);
}

.tw-home-testimonials-carousel[data-scroll-overflow="true"][data-mask-left="true"][data-mask-right="false"] .tw-home-testimonials-carousel__viewport {
	mask-image: var(--tw-edge-mask-left-soft);
	-webkit-mask-image: var(--tw-edge-mask-left-soft);
}

.tw-home-testimonials-carousel[data-scroll-overflow="true"][data-mask-left="true"][data-mask-right="true"] .tw-home-testimonials-carousel__viewport {
	mask-image: var(--tw-edge-mask-marquee);
	-webkit-mask-image: var(--tw-edge-mask-marquee);
}

/* Mobile: one card per view (full width) — no side fades (nothing peeks; fades read as clipping) */
@media (max-width: 899px) {
	.tw-home-testimonials-carousel {
		--tw-testimonial-slide-w: 100cqw;
	}

	.tw-home-section--testimonials .tw-home-testimonials-carousel .tw-home-testimonials-carousel__viewport {
		mask-image: none !important;
		-webkit-mask-image: none !important;
	}

	.tw-home-testimonials-carousel__track {
		gap: 0;
		padding: 2px 0 4px;
		padding-inline: 0;
	}

	.tw-home-section--testimonials .tw-home-testimonial.tw-bento-cell {
		scroll-snap-align: center;
	}

	.tw-home-section--testimonials .tw-home-testimonials-carousel__viewport {
		flex: 0 0 auto;
		min-height: clamp(280px, 52svh, 480px);
	}
}

.tw-home-testimonials-carousel__viewport::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.tw-home-testimonials-carousel__viewport:focus-visible {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
	border-radius: var(--tw-bento-radius);
}

.tw-home-testimonials-carousel__track {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: var(--tw-bento-gap);
	/* Flush left (no empty band before first card); trailing pad only so later cards can centre in the viewport */
	padding: 2px 0 4px;
	padding-inline-start: 0;
	padding-inline-end: max(0px, calc((100cqw - var(--tw-testimonial-slide-w)) / 2));
	box-sizing: border-box;
}

@keyframes tw-testimonial-card-in {
	from {
		opacity: 0;
		transform: scale(0.94) translate3d(0, 0.55rem, 0);
	}

	to {
		opacity: 1;
		transform: scale(1) translate3d(0, 0, 0);
	}
}

@keyframes tw-testimonial-content-in {
	from {
		opacity: 0;
		transform: translate3d(0, 0.5rem, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.tw-home-section--testimonials .tw-home-testimonial.tw-bento-cell {
	flex: 0 0 var(--tw-testimonial-slide-w);
	width: var(--tw-testimonial-slide-w);
	scroll-snap-align: center;
	scroll-snap-stop: always;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 10px 32px rgba(26, 26, 26, 0.14);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	padding: clamp(1.15rem, 2.8vw, 1.65rem);
	opacity: 0.38;
	cursor: pointer;
	transform: scale(0.96) translate3d(0, 0.35rem, 0);
	transition:
		opacity 0.45s ease,
		border-color 0.35s ease,
		box-shadow 0.35s ease,
		transform 0.55s cubic-bezier(0.34, 1.2, 0.5, 1);
}

.tw-home-section--testimonials .tw-home-testimonial.tw-bento-cell.is-active {
	opacity: 1;
	border-color: rgba(255, 255, 255, 0.28);
	box-shadow: 0 14px 40px rgba(26, 26, 26, 0.22);
	transform: scale(1) translate3d(0, 0, 0);
}

.tw-home-section--testimonials .tw-home-testimonial.tw-bento-cell.is-entering {
	animation: tw-testimonial-card-in 0.58s cubic-bezier(0.34, 1.2, 0.5, 1) both;
}

.tw-home-section--testimonials .tw-home-testimonial.tw-bento-cell.is-entering .tw-home-testimonial__quote {
	animation: tw-testimonial-content-in 0.52s cubic-bezier(0.2, 0.82, 0.2, 1) 0.06s both;
}

.tw-home-section--testimonials .tw-home-testimonial.tw-bento-cell.is-entering .tw-home-testimonial__footer {
	animation: tw-testimonial-content-in 0.52s cubic-bezier(0.2, 0.82, 0.2, 1) 0.14s both;
}

.tw-home-section--testimonials .tw-home-testimonial.tw-bento-cell.is-entering .tw-home-testimonial__rating {
	animation: tw-testimonial-content-in 0.48s cubic-bezier(0.2, 0.82, 0.2, 1) 0.22s both;
}

@supports not (width: 1cqw) {
	.tw-home-testimonials-carousel {
		--tw-testimonial-slide-w: min(86vw, 360px);
	}

	.tw-home-testimonials-carousel__track {
		padding-inline-start: 0;
		padding-inline-end: max(0px, calc((100vw - var(--tw-testimonial-slide-w)) / 2));
	}

	@media (max-width: 899px) {
		.tw-home-testimonials-carousel {
			--tw-testimonial-slide-w: 100%;
		}

		.tw-home-testimonials-carousel__track {
			padding-inline: 0;
			gap: 0;
		}
	}
}

@media (min-width: 900px) {
	.tw-home-testimonials-carousel {
		--tw-testimonial-slide-w: min(30cqw, 340px);
	}
}

@media (min-width: 1200px) {
	.tw-home-testimonials-carousel {
		--tw-testimonial-slide-w: min(24cqw, 320px);
	}
}

.tw-home-testimonial {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	position: relative;
	min-height: 0;
	box-sizing: border-box;
}

.tw-home-testimonials-carousel__bottom-bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem 1rem;
	width: 100%;
	margin-top: clamp(1.15rem, 2.8vw, 1.65rem);
	padding-bottom: 2px;
	box-sizing: border-box;
}

.tw-home-testimonials-carousel__pause {
	position: relative;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	margin-right: auto;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: rgba(255, 255, 255, 0.92);
	cursor: pointer;
	transition:
		color 0.2s ease,
		opacity 0.2s ease;
}

.tw-home-testimonials-carousel__pause:hover,
.tw-home-testimonials-carousel__pause:focus-visible {
	color: #fff;
	opacity: 1;
	outline: none;
}

.tw-home-testimonials-carousel__pause-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}

.tw-home-testimonials-carousel__pause-icon-wrap {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 0.75rem;
	line-height: 1;
}

@keyframes tw-testimonial-pause-ring {
	from {
		stroke-dashoffset: 106.814;
	}

	to {
		stroke-dashoffset: 0;
	}
}

.tw-home-testimonials-carousel__pause.is-timing .tw-home-testimonials-carousel__pause-progress {
	animation: tw-testimonial-pause-ring var(--tw-testimonial-interval, 5s) linear forwards;
}

/* Freeze mid-cycle without resetting stroke-dashoffset (see home-hero.js pause/resume). */
.tw-home-testimonials-carousel__pause.is-timing.is-paused .tw-home-testimonials-carousel__pause-progress,
.tw-home-testimonials-carousel__pause.is-timing.is-hover-paused .tw-home-testimonials-carousel__pause-progress {
	animation-play-state: paused;
}

.tw-home-testimonials-carousel__pause.is-paused:not(.is-timing) .tw-home-testimonials-carousel__pause-progress {
	animation: none;
}

.tw-home-testimonials-carousel__arrows {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 0.35rem;
	flex: 0 0 auto;
	margin-left: auto;
}

.tw-home-testimonials-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.35rem;
	height: 2.35rem;
	padding: 0;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.92);
	cursor: pointer;
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
}

.tw-home-testimonials-carousel__arrow:hover,
.tw-home-testimonials-carousel__arrow:focus-visible {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
	outline: none;
}

.tw-home-testimonials-carousel__arrow i {
	font-size: 0.85rem;
	line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
	.tw-home-testimonials-carousel__viewport {
		scroll-behavior: auto;
		mask-image: none !important;
		-webkit-mask-image: none !important;
	}

	.tw-home-section--testimonials .tw-home-testimonial.tw-bento-cell {
		transition: opacity 0.2s ease;
		transform: none;
		animation: none !important;
	}

	.tw-home-section--testimonials .tw-home-testimonial.tw-bento-cell.is-entering .tw-home-testimonial__quote,
	.tw-home-section--testimonials .tw-home-testimonial.tw-bento-cell.is-entering .tw-home-testimonial__footer,
	.tw-home-section--testimonials .tw-home-testimonial.tw-bento-cell.is-entering .tw-home-testimonial__rating {
		animation: none !important;
	}

	/* JS skips .is-timing — show completed ring (no timed stroke animation) */
	.tw-home-testimonials-carousel__pause .tw-home-testimonials-carousel__pause-progress {
		animation: none !important;
		stroke-dashoffset: 0;
		opacity: 0.75;
	}
}

.tw-home-testimonial__rating {
	display: inline-flex;
	align-items: center;
	gap: 0.22rem;
	margin: 0.45rem 0 0;
	font-size: 0.72rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.42);
}

.tw-home-testimonial__rating i {
	display: block;
}

.tw-home-testimonial__quote {
	margin: 0;
	padding: 0;
	border: none;
	font-size: 0.95rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
	flex: 1 1 auto;
	text-align: start;
}

.tw-home-testimonial__quote p {
	margin: 0;
}

.tw-home-testimonial__footer {
	margin-top: auto;
	padding-top: clamp(0.85rem, 2vw, 1.15rem);
	text-align: start;
}

.tw-home-testimonial__name {
	margin: 0 0 0.3rem;
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.88);
}

.tw-home-testimonial__meta {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.52);
}

/* --- Projects carousel (image cards; same scroll/mask behaviour as testimonials) --- */

.tw-home-projects-carousel {
	width: 100%;
	min-width: 0;
	--tw-project-interval: 5s;
	--tw-project-slide-w: min(90cqw, 440px);
}

.tw-home-projects-carousel__viewport {
	position: relative;
	z-index: 0;
	width: 100%;
	min-width: 0;
	margin-block: clamp(1rem, 2.8vw, 1.85rem);
	container-type: inline-size;
	container-name: tw-projects;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	touch-action: pan-x pan-y;
	mask-image: none;
	-webkit-mask-image: none;
	mask-size: 100% 100%;
	-webkit-mask-size: 100% 100%;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	scrollbar-width: none;
	-ms-overflow-style: none;
	outline: none;
}

.tw-home-projects-carousel[data-scroll-overflow="false"] .tw-home-projects-carousel__viewport {
	mask-image: none;
	-webkit-mask-image: none;
}

.tw-home-projects-carousel[data-scroll-overflow="true"][data-mask-left="false"][data-mask-right="false"] .tw-home-projects-carousel__viewport {
	mask-image: none;
	-webkit-mask-image: none;
}

.tw-home-projects-carousel[data-scroll-overflow="true"][data-mask-left="false"][data-mask-right="true"] .tw-home-projects-carousel__viewport {
	mask-image: var(--tw-edge-mask-right);
	-webkit-mask-image: var(--tw-edge-mask-right);
}

.tw-home-projects-carousel[data-scroll-overflow="true"][data-mask-left="true"][data-mask-right="false"] .tw-home-projects-carousel__viewport {
	mask-image: var(--tw-edge-mask-left-soft);
	-webkit-mask-image: var(--tw-edge-mask-left-soft);
}

.tw-home-projects-carousel[data-scroll-overflow="true"][data-mask-left="true"][data-mask-right="true"] .tw-home-projects-carousel__viewport {
	mask-image: var(--tw-edge-mask-marquee);
	-webkit-mask-image: var(--tw-edge-mask-marquee);
}

@media (max-width: 899px) {
	.tw-home-projects-carousel {
		/* Full-width slides on mobile — cards match the carousel / section inner. */
		--tw-project-slide-w: 100%;
	}

	:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-projects-carousel .tw-home-projects-carousel__viewport {
		mask-image: none !important;
		-webkit-mask-image: none !important;
	}

	.tw-home-projects-carousel__track {
		gap: clamp(0.5rem, 2vw, var(--tw-bento-gap));
		padding: 2px 0 4px;
		padding-inline-start: 0;
		padding-inline-end: 0;
	}

	:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell {
		scroll-snap-align: start;
	}

	/* Carousel shell: controls pinned to bottom; card CTA top-right (touch has no hover). */
	.tw-home-section--projects__cards-fx > .tw-home-projects-carousel,
	.tw-home-section--testimonials .tw-clients-hero__inner > .tw-home-testimonials-carousel {
		flex: 1 1 auto;
		min-height: 0;
	}

	:where([data-tw-projects-carousel], [data-tw-testimonials-carousel]) {
		display: flex;
		flex-direction: column;
		position: relative;
		min-height: 0;
	}

	[data-tw-projects-carousel] .tw-home-projects-carousel__viewport,
	[data-tw-testimonials-carousel] .tw-home-testimonials-carousel__viewport-shell {
		flex: 1 1 auto;
		min-height: 0;
		order: 1;
	}

	[data-tw-projects-carousel] .tw-home-projects-carousel__viewport {
		padding-bottom: 3.35rem;
		box-sizing: border-box;
	}

	[data-tw-testimonials-carousel] .tw-home-testimonials-carousel__viewport-shell {
		margin-block-end: 0;
		padding-bottom: 3.35rem;
		box-sizing: border-box;
	}

	:where([data-tw-projects-carousel]) .tw-home-projects-carousel__bottom-bar,
	:where([data-tw-testimonials-carousel]) .tw-home-testimonials-carousel__bottom-bar {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 6;
		flex: 0 0 auto;
		order: 2;
		margin-top: 0;
		align-self: stretch;
		width: 100%;
	}

	[data-tw-projects-carousel] .tw-home-project-card.tw-bento-cell {
		min-height: 100%;
		align-self: stretch;
	}

	[data-tw-projects-carousel] .tw-home-project-card.tw-bento-cell .tw-home-project-card__cta {
		top: clamp(0.85rem, 2.6vw, 1.25rem);
		right: var(--tw-card-pad-x, clamp(1rem, 2.4vw, 1.25rem));
		bottom: auto;
		opacity: 0;
		transform: translateY(0);
		pointer-events: none;
	}

	[data-tw-projects-carousel] .tw-home-project-card.tw-bento-cell.is-active .tw-home-project-card__cta,
	.tw-archive-projects .tw-home-project-card.tw-bento-cell.is-card-touch .tw-home-project-card__cta {
		opacity: 1;
		pointer-events: auto;
	}

	[data-tw-testimonials-carousel] .tw-home-testimonials-carousel__track {
		align-items: stretch;
		min-height: 100%;
	}

	[data-tw-testimonials-carousel] .tw-home-testimonials-carousel__viewport-shell,
	[data-tw-testimonials-carousel] .tw-home-testimonials-carousel__viewport {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
	}

	.tw-home-section--testimonials .tw-home-testimonial.tw-bento-cell {
		min-height: 100%;
		height: auto;
	}
}

/* Projects archive bento grid: full cell width + hover-driven active state (not carousel slides). */
.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell {
	--tw-card-active: 0;
	flex: none;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	opacity: 1;
	align-self: stretch;
	scroll-snap-align: none;
	scroll-snap-stop: normal;
	transition:
		--tw-card-active 0.55s cubic-bezier(0.33, 1, 0.68, 1),
		opacity 0.48s ease,
		transform 0.48s ease,
		border-color 0.55s cubic-bezier(0.33, 1, 0.68, 1),
		box-shadow 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}

.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell .tw-home-project-card__bg,
.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell .tw-home-project-card__overlay::after {
	transition:
		transform 0.55s cubic-bezier(0.33, 1, 0.68, 1),
		filter 0.55s cubic-bezier(0.33, 1, 0.68, 1),
		opacity 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Title / badges follow --tw-card-active on the card (no per-element easing lag). */
.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell .tw-home-project-card__title,
.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell .tw-home-project-card__text,
.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell .tw-home-project-card__badges {
	transition: none;
}

.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell .tw-home-project-card__cta {
	transition:
		opacity 0.45s cubic-bezier(0.33, 1, 0.68, 1),
		transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:hover,
.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:focus-within,
.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell.is-card-touch {
	--tw-card-active: 1;
}

/* Archive grid: badges sit in flow directly under the title (tight, predictable gap). */
.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell .tw-home-project-card__text {
	padding-bottom: var(--tw-card-pad-bottom);
	gap: var(--tw-card-title-badge-gap);
}

.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell .tw-home-project-card__title {
	transform: none;
	margin-bottom: 0;
}

.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell .tw-home-project-card__badges {
	position: static;
	left: auto;
	right: auto;
	bottom: auto;
	margin: 0;
	max-height: calc(var(--tw-card-active, 0) * 4.5rem);
	overflow: hidden;
	opacity: var(--tw-card-active, 0);
	transform: translate3d(0, calc((1 - var(--tw-card-active, 0)) * 0.2rem), 0);
	will-change: opacity, transform;
}

.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:hover .tw-home-project-card__cta,
.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:focus-within .tw-home-project-card__cta,
.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell.is-card-touch .tw-home-project-card__cta {
	opacity: 1;
	transform: translateY(0);
}

.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:hover .tw-home-project-card__cta-icon,
.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:focus-within .tw-home-project-card__cta-icon,
.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell.is-card-touch .tw-home-project-card__cta-icon {
	animation: tw-project-card-find-chevron 1.15s ease-in-out forwards;
}

@media (max-width: 899px) {
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell .tw-home-project-card__cta {
		top: auto;
		right: var(--tw-card-pad-x, clamp(1rem, 2.4vw, 1.25rem));
		bottom: var(--tw-card-pad-bottom, clamp(1rem, 2.6vw, 1.4rem));
		opacity: 0;
		transform: translateY(0);
		pointer-events: none;
	}

	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell.is-card-touch .tw-home-project-card__cta {
		opacity: 1;
	}
}

.tw-home-projects-carousel__viewport::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.tw-home-projects-carousel__viewport:focus-visible {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
	border-radius: var(--tw-bento-radius);
}

.tw-home-projects-carousel__track {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--tw-bento-gap);
	padding: 2px 0 4px;
	padding-inline-start: 0;
	padding-inline-end: max(0px, calc((100cqw - var(--tw-project-slide-w)) / 2));
	box-sizing: border-box;
}

:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell {
	--tw-card-pad-x: clamp(1rem, 2.4vw, 1.25rem);
	--tw-card-pad-bottom: clamp(1rem, 2.6vw, 1.4rem);
	--tw-card-title-badge-gap: clamp(0.2rem, 0.65vw, 0.35rem);
	--tw-card-badge-row-h: clamp(1.2rem, 3vw, 1.55rem);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: stretch;
	flex: 0 0 var(--tw-project-slide-w);
	width: var(--tw-project-slide-w);
	min-height: 0;
	align-self: stretch;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	overflow: hidden;
	border-radius: var(--tw-bento-radius);
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	text-decoration: none;
	color: inherit;
	background: rgba(26, 26, 26, 0.35);
	/* Border colour and box-shadow are interpolated from --tw-card-active so
	   they cross-fade with the BG zoom + opacity as the slider scrolls. The
	   transitions below are only for hover/focus and any non-scroll state
	   changes — the var itself is what drives the scroll-linked motion. */
	border: 1px solid rgba(255, 255, 255, calc(0.16 + 0.12 * var(--tw-card-active, 0)));
	box-shadow:
		0 calc(10px + 4px * var(--tw-card-active, 0)) calc(32px + 12px * var(--tw-card-active, 0))
			rgba(26, 26, 26, calc(0.2 + 0.08 * var(--tw-card-active, 0)));
	opacity: 0.4;
	cursor: pointer;
	transition:
		opacity 0.58s ease,
		transform 0.48s ease;
}

:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell.is-active {
	opacity: 1;
}

:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px rgba(255, 255, 255, 0.55),
		0 14px 44px rgba(26, 26, 26, 0.28);
}

@supports not (width: 1cqw) {
	.tw-home-projects-carousel {
		--tw-project-slide-w: min(90vw, 440px);
	}

	.tw-home-projects-carousel__track {
		padding-inline-end: max(0px, calc((100vw - var(--tw-project-slide-w)) / 2));
	}

	@media (max-width: 899px) {
		.tw-home-projects-carousel {
			--tw-project-slide-w: 100%;
		}

		.tw-home-projects-carousel__track {
			padding-inline-start: 0;
			padding-inline-end: 0;
			gap: clamp(0.5rem, 2vw, 0.75rem);
		}
	}

	:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-projects-carousel {
		--tw-project-slide-w: min(86vw, 600px);
	}

	@media (min-width: 900px) {
		:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-projects-carousel {
			--tw-project-slide-w: min(88vw, 600px);
		}
	}

	@media (min-width: 1200px) {
		:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-projects-carousel {
			--tw-project-slide-w: min(80vw, 560px);
		}
	}
}

@media (min-width: 900px) {
	.tw-home-projects-carousel {
		--tw-project-slide-w: min(36cqw, 420px);
	}
}

@media (min-width: 1200px) {
	.tw-home-projects-carousel {
		--tw-project-slide-w: min(30cqw, 400px);
	}
}

/* Home #projects: card width — height follows carousel viewport (flex stretch, no fixed aspect-ratio). */
:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-projects-carousel {
	/* Mobile/tablet: full carousel width; desktop breakpoints below widen slides. */
	--tw-project-slide-w: 100%;
}

@media (min-width: 900px) {
	:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-projects-carousel {
		--tw-project-slide-w: min(min(48cqw, 88vw), 600px);
	}
}

@media (min-width: 1200px) {
	:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-projects-carousel {
		--tw-project-slide-w: min(min(40cqw, 80vw), 560px);
	}
}

/* Scroll-linked "active intensity" for project cards.
   --tw-card-active is a 0..1 number that drives the card's BG zoom. JS sets
   it inline continuously from each card's distance to the viewport centre
   during BOTH manual and programmatic (autoplay / button) scrolls, so the
   BG zoom tracks scroll position 1:1.

   Registered via @property so the value type is known and a short transition
   smooths over the very brief moment between a class toggle and the first
   scroll event (otherwise the BG would snap from scale 1 to 1.12 before the
   per-frame inline updates start). The duration is intentionally tiny so it
   does not lag behind the per-frame inline writes during scroll. */
@property --tw-card-active {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

:where(.tw-home-section--projects, .tw-single-related) .tw-home-project-card.tw-bento-cell {
	--tw-card-active: 0;
	transition: --tw-card-active 0.12s linear;
}

:where(.tw-home-section--projects, .tw-single-related) .tw-home-project-card.tw-bento-cell.is-active {
	--tw-card-active: 1;
}

/* Archive bento grid uses hover/touch (not scroll-linked). */
.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell {
	--tw-card-active: 0;
}

.tw-home-project-card__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
	/* Transform and filter both interpolate from --tw-card-active so the zoom
	   and the colour pop (brightness/saturation) move together with the scroll
	   instead of the filter snapping when .is-active toggles at settle. */
	transform: scale(calc(1 + 0.12 * var(--tw-card-active, 0)));
	filter:
		brightness(calc(1 + 0.04 * var(--tw-card-active, 0)))
		saturate(calc(1 + 0.03 * var(--tw-card-active, 0)));
	will-change: transform, filter;
}

.tw-home-project-card__bg--placeholder {
	background: linear-gradient(135deg, rgba(77, 77, 77, 0.55) 0%, rgba(26, 26, 26, 0.9) 100%);
}

/* Inactive base overlay sits at z-index 1; the active wash (::after, below)
   layers on top and its opacity is tied to --tw-card-active so the two
   gradients cross-fade with the scroll instead of swapping at .is-active. */
.tw-home-project-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(
		120deg,
		rgba(26, 26, 26, 0.88) 0%,
		rgba(77, 77, 77, 0.72) 45%,
		rgba(40, 40, 40, 0.65) 100%
	);
}

.tw-home-project-card__overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background:
		linear-gradient(
			to top,
			rgba(18, 18, 18, 0.82) 0%,
			rgba(35, 35, 35, 0.7) 28%,
			rgba(55, 55, 55, 0.4) 52%,
			rgba(40, 40, 40, 0.14) 72%,
			transparent 82%
		),
		linear-gradient(
			120deg,
			rgba(26, 26, 26, 0.42) 0%,
			rgba(77, 77, 77, 0.32) 45%,
			rgba(30, 30, 30, 0.26) 100%
		);
	/* Slightly lighter than full wash so the photo reads through more when active. */
	opacity: calc(0.88 * var(--tw-card-active, 0));
}

/* No horizontal pan animation — the BG was visibly nudging when a card
   became active because the keyframe started at a position different from
   the inactive default. The scroll-linked zoom on .tw-home-project-card__bg
   already provides enough motion on its own. */

.tw-home-project-card__text {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	align-self: stretch;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	margin-top: auto;
	gap: var(--tw-card-title-badge-gap, clamp(0.2rem, 0.65vw, 0.35rem));
	padding: clamp(2rem, 6vw, 3.25rem) var(--tw-card-pad-x, clamp(1rem, 2.4vw, 1.25rem)) var(--tw-card-pad-bottom, clamp(1rem, 2.6vw, 1.4rem));
	box-sizing: border-box;
}

/* Title / badges track --tw-card-active with the BG + overlay. Slider badges use
   --tw-card-badge (derived from --tw-card-active with a lead) so the title moves
   first and the badge translates in just after. Other contexts: badges in flow. */
:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell .tw-home-project-card__title {
	margin: 0;
	padding: 0;
	font-size: clamp(0.95rem, 2.1vw, 1.08rem);
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.25;
	color: #ffffff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
	transform: translate3d(0, calc(0.28rem * (1 - var(--tw-card-active, 0))), 0);
}

:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell .tw-home-project-card__badges {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.45rem;
	max-width: 100%;
	overflow: visible;
}

/* Slider only: badges sit on the text block baseline but start translated
   below the card (clipped by overflow:hidden) and move up with --tw-card-active. */
[data-tw-projects-carousel] .tw-home-project-card.tw-bento-cell .tw-home-project-card__text {
	padding-bottom: calc(var(--tw-card-pad-bottom) + var(--tw-card-active, 0) * (var(--tw-card-badge-row-h) + var(--tw-card-title-badge-gap)));
}

[data-tw-projects-carousel] .tw-home-project-card.tw-bento-cell .tw-home-project-card__title {
	margin-bottom: calc(var(--tw-card-active, 0) * var(--tw-card-title-badge-gap));
}

[data-tw-projects-carousel] .tw-home-project-card.tw-bento-cell .tw-home-project-card__badges {
	position: absolute;
	left: var(--tw-card-pad-x);
	right: var(--tw-card-pad-x);
	bottom: var(--tw-card-pad-bottom);
	margin: 0;
	--tw-card-badge: clamp(0, 1, calc((var(--tw-card-active, 0) - 0.15) / 0.85));
	opacity: var(--tw-card-badge, 0);
	transform: translate3d(
		0,
		calc((1 - var(--tw-card-badge, 0)) * (var(--tw-card-badge-row-h) + var(--tw-card-title-badge-gap))),
		0
	);
	will-change: transform, opacity;
}

:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell .tw-home-project-card__badges li {
	margin: 0;
	padding: 0;
}

:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell .tw-home-project-card__badge {
	display: inline-block;
	padding: 0.22rem 0.55rem;
	border-radius: 999px;
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.95);
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.28);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Keep card text white (was scoped to <a> when slides were links). */
:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell,
:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell:hover,
:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell:focus-visible {
	color: #ffffff;
}

:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell .tw-home-project-card__title {
	color: #ffffff;
}

.tw-home-projects-carousel__bottom-bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem 1rem;
	width: 100%;
	margin-top: clamp(1.15rem, 2.8vw, 1.65rem);
	padding-bottom: 2px;
	box-sizing: border-box;
}

.tw-home-projects-carousel__pause {
	position: relative;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	margin-right: auto;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: rgba(255, 255, 255, 0.92);
	cursor: pointer;
	transition:
		color 0.2s ease,
		opacity 0.2s ease;
}

.tw-home-projects-carousel__pause:hover,
.tw-home-projects-carousel__pause:focus-visible {
	color: #fff;
	opacity: 1;
	outline: none;
}

.tw-home-projects-carousel__pause-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}

.tw-home-projects-carousel__pause-icon-wrap {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 0.75rem;
	line-height: 1;
}

@keyframes tw-project-pause-ring {
	from {
		stroke-dashoffset: 106.814;
	}

	to {
		stroke-dashoffset: 0;
	}
}

.tw-home-projects-carousel__pause.is-timing .tw-home-projects-carousel__pause-progress {
	animation: tw-project-pause-ring var(--tw-project-interval, 5s) linear forwards;
}

.tw-home-projects-carousel__pause.is-timing.is-paused .tw-home-projects-carousel__pause-progress,
.tw-home-projects-carousel__pause.is-timing.is-hover-paused .tw-home-projects-carousel__pause-progress {
	animation-play-state: paused;
}

.tw-home-projects-carousel__pause.is-paused:not(.is-timing) .tw-home-projects-carousel__pause-progress {
	animation: none;
}

.tw-home-projects-carousel__arrows {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 0.35rem;
	flex: 0 0 auto;
	margin-left: auto;
}

.tw-home-projects-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.35rem;
	height: 2.35rem;
	padding: 0;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.92);
	cursor: pointer;
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
}

.tw-home-projects-carousel__arrow:hover,
.tw-home-projects-carousel__arrow:focus-visible {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
	outline: none;
}

.tw-home-projects-carousel__arrow i {
	font-size: 0.85rem;
	line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
	.tw-home-projects-carousel__viewport {
		scroll-behavior: auto;
		mask-image: none !important;
		-webkit-mask-image: none !important;
	}

	:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell {
		transition: opacity 0.2s ease;
	}

	.tw-home-project-card__bg,
	.tw-home-project-card__overlay {
		transition: none;
	}

	/* Don't run the pan animation for reduced-motion users */
	[data-tw-projects-carousel] .tw-home-project-card.tw-bento-cell.is-active .tw-home-project-card__bg {
		animation: none;
		transform: none;
		transition: none;
	}

	:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell .tw-home-project-card__badge {
		transition: none;
	}

	:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell .tw-home-project-card__badges {
		transition: none;
	}

	:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell .tw-home-project-card__title {
		transition: none;
	}

	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell .tw-home-project-card__badges,
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell.is-card-touch .tw-home-project-card__badges {
		max-height: none;
		opacity: 1;
		transform: none;
	}

	.tw-home-projects-carousel__pause .tw-home-projects-carousel__pause-progress {
		animation: none !important;
		stroke-dashoffset: 0;
		opacity: 0.75;
	}
}

.tw-home-section--intro {
	background: transparent;
}

/* Services bento (What we offer): same white band + radius as About / Clients */
.tw-home-section--features {
	background: var(--tw-color-surface, #ffffff);
	border-radius: var(--tw-bento-radius);
	overflow: hidden;
	padding: 0;
	font-family: "Manrope", var(--tw-font-sans, system-ui, sans-serif);
	color: var(--tw-color-text, #1a1a1a);
}

.tw-home-section__header--features {
	margin-bottom: clamp(1.15rem, 2.5vw, 1.9rem);
	text-align: left;
}

.tw-home-section--features .tw-home-section__header--features.tw-home-section__header--row {
	align-items: center;
}

.tw-home-section--features .tw-home-section__header--features.tw-home-section__header--row > div:first-child {
	min-width: 0;
	flex: 1 1 auto;
}

.tw-home-section--features .tw-home-section__header--features.tw-home-section__header--row .tw-hero-btn {
	flex-shrink: 0;
}

.tw-home-section--features .tw-home-section__header--features .tw-home-kicker {
	color: var(--tw-color-muted, #5c5c5c);
}

.tw-home-section--features .tw-home-section__header--features .tw-home-kicker__line {
	background: rgba(26, 26, 26, 0.22);
}

.tw-home-section--features .tw-home-section__header--features .tw-home-heading {
	color: var(--tw-heading-color);
}

.tw-home-section--features .tw-home-heading--section {
	font-size: clamp(1.75rem, 5vw, 3.75rem);
	line-height: 0.95;
	letter-spacing: 0.02em;
}

.tw-home-features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
}

.tw-home-features--bento {
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--tw-bento-gap);
}

.tw-home-features--services {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: clamp(9rem, 13.5vw, 12.5rem);
	gap: var(--tw-bento-gap);
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: stretch;
}

/*
 * Services bento — editorial 12-col mosaic (9 tiles).
 * Row 1-2: a = tall flagship (left, 5 cols × 2 rows), b = wide feature (top-right).
 * Row 2:   c (4 cols) | d (3 cols) fill beside the flagship.
 * Row 3:   e | f | g = three equal thirds.
 * Row 4:   h = wide (7 cols) | i (5 cols).
 */
.tw-home-service-bento--a {
	grid-column: 1 / span 5;
	grid-row: 1 / span 2;
	min-height: 0;
}

.tw-home-service-bento--b {
	grid-column: 6 / span 7;
	grid-row: 1;
}

.tw-home-service-bento--c {
	grid-column: 6 / span 4;
	grid-row: 2;
}

.tw-home-service-bento--d {
	grid-column: 10 / span 3;
	grid-row: 2;
}

.tw-home-service-bento--e {
	grid-column: 1 / span 4;
	grid-row: 3;
}

.tw-home-service-bento--f {
	grid-column: 5 / span 4;
	grid-row: 3;
}

.tw-home-service-bento--g {
	grid-column: 9 / span 4;
	grid-row: 3;
}

.tw-home-service-bento--h {
	grid-column: 1 / span 7;
	grid-row: 4;
}

.tw-home-service-bento--i {
	grid-column: 8 / span 5;
	grid-row: 4;
}

/* Tenth service tile (e.g. fire doors) — full-width row below the mosaic. */
.tw-home-service-bento--j {
	grid-column: 1 / span 12;
	grid-row: 5;
}

.tw-home-feature--bento-a {
	grid-column: 1 / span 5;
}

.tw-home-feature--bento-b {
	grid-column: 6 / span 7;
}

.tw-home-feature--bento-c {
	grid-column: 1 / span 7;
}

.tw-home-feature--bento-d {
	grid-column: 8 / span 5;
}

@media (max-width: 900px) {
	.tw-home-feature--bento-a,
	.tw-home-feature--bento-b,
	.tw-home-feature--bento-c,
	.tw-home-feature--bento-d {
		grid-column: 1 / -1;
	}

	/* Tablet: full-width flagship on top, then 50/50 pairs. */
	.tw-home-features--services {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		grid-auto-rows: clamp(8.5rem, 22vw, 11.5rem);
	}

	.tw-home-service-bento--a {
		grid-column: 1 / -1;
		grid-row: 1;
		min-height: clamp(12rem, 40vw, 15rem);
	}

	.tw-home-service-bento--b {
		grid-column: 1 / span 3;
		grid-row: 2;
	}

	.tw-home-service-bento--c {
		grid-column: 4 / span 3;
		grid-row: 2;
	}

	.tw-home-service-bento--d {
		grid-column: 1 / span 3;
		grid-row: 3;
	}

	.tw-home-service-bento--e {
		grid-column: 4 / span 3;
		grid-row: 3;
	}

	.tw-home-service-bento--f {
		grid-column: 1 / span 3;
		grid-row: 4;
	}

	.tw-home-service-bento--g {
		grid-column: 4 / span 3;
		grid-row: 4;
	}

	.tw-home-service-bento--h {
		grid-column: 1 / span 3;
		grid-row: 5;
	}

	.tw-home-service-bento--i {
		grid-column: 4 / span 3;
		grid-row: 5;
	}

	.tw-home-service-bento--j {
		grid-column: 1 / -1;
		grid-row: 6;
	}
}

/* Narrow phones: full-width flagship, remaining tiles in 2-col pairs. */
@media (max-width: 560px) {
	.tw-home-features--services {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: clamp(8rem, 33vw, 10.5rem);
		gap: clamp(0.65rem, 2.5vw, var(--tw-bento-gap));
	}

	.tw-home-service-bento--a {
		grid-column: 1 / -1;
		grid-row: auto;
		min-height: clamp(11.5rem, 52vw, 15rem);
	}

	.tw-home-service-bento--b,
	.tw-home-service-bento--c,
	.tw-home-service-bento--d,
	.tw-home-service-bento--e,
	.tw-home-service-bento--f,
	.tw-home-service-bento--g,
	.tw-home-service-bento--h,
	.tw-home-service-bento--i,
	.tw-home-service-bento--j {
		grid-column: auto / span 1;
		grid-row: auto;
	}
}

.tw-home-feature {
	padding: clamp(1.35rem, 3vw, 1.75rem);
	background: var(--tw-bento-cell-bg);
	border: var(--tw-bento-cell-border);
	border-radius: var(--tw-bento-radius);
	box-shadow: var(--tw-bento-cell-shadow);
}

.tw-home-features--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
	.tw-home-features--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.tw-home-features:not(.tw-home-features--bento):not(.tw-home-features--services) {
		grid-template-columns: 1fr;
	}

	.tw-home-features--4 {
		grid-template-columns: 1fr;
	}
}

.tw-home-feature__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1rem;
	border-radius: 10px;
	background: rgba(40, 40, 40, 0.1);
	color: var(--tw-hero-accent, #1a1a1a);
	font-size: 1.25rem;
}

.tw-home-feature__title {
	margin: 0 0 0.65rem;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tw-heading-color);
}

.tw-home-feature__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--tw-color-muted, #5c5c5c);
}

.tw-home-section--features .tw-home-feature--service {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	margin: 0;
	min-height: 100%;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(1.15rem, 2.6vw, 1.65rem);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--tw-bento-radius);
	box-shadow: 0 14px 40px rgba(26, 26, 26, 0.2);
	color: #fff;
	transition:
		border-color 0.45s cubic-bezier(0.33, 1, 0.68, 1),
		box-shadow 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Hero-matched photo + grey wash */
.tw-home-service-card__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background-color: var(--tw-hero-charcoal-solid, #1a1a1a);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
	transform: scale(1);
	filter: brightness(1) saturate(1);
	transition:
		transform 0.55s cubic-bezier(0.33, 1, 0.68, 1),
		filter 0.55s cubic-bezier(0.33, 1, 0.68, 1);
	will-change: transform, filter;
}

.tw-home-service-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(
		120deg,
		rgba(26, 26, 26, 0.88) 0%,
		rgba(77, 77, 77, 0.72) 45%,
		rgba(40, 40, 40, 0.65) 100%
	);
	transition: opacity 0.45s ease;
}

.tw-home-service-card__overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background:
		linear-gradient(
			to top,
			rgba(18, 18, 18, 0.82) 0%,
			rgba(35, 35, 35, 0.7) 28%,
			rgba(55, 55, 55, 0.4) 52%,
			rgba(40, 40, 40, 0.14) 72%,
			transparent 82%
		),
		linear-gradient(
			120deg,
			rgba(26, 26, 26, 0.42) 0%,
			rgba(77, 77, 77, 0.32) 45%,
			rgba(30, 30, 30, 0.26) 100%
		);
	opacity: 0;
	transition: opacity 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

.tw-home-service-card__cta {
	position: absolute;
	bottom: clamp(1rem, 2.6vw, 1.4rem);
	right: clamp(1rem, 2.4vw, 1.25rem);
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.35rem 0.55rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
	opacity: 0;
	transform: translateY(4px);
	pointer-events: none;
	transition:
		opacity 0.35s ease,
		transform 0.35s ease;
}

.tw-home-service-card__cta-icon {
	display: inline-block;
	font-size: 0.85rem;
	line-height: 1;
	margin-inline-start: 0.12em;
	opacity: 0.85;
}

.tw-home-feature--service:hover .tw-home-service-card__bg,
.tw-home-feature--service:focus-within .tw-home-service-card__bg {
	transform: scale(1.12);
	filter: brightness(1.04) saturate(1.03);
}

.tw-home-feature--service:hover .tw-home-service-card__overlay::after,
.tw-home-feature--service:focus-within .tw-home-service-card__overlay::after {
	opacity: 0.88;
}

.tw-home-feature--service:hover,
.tw-home-feature--service:focus-within {
	border-color: rgba(255, 255, 255, 0.28);
	box-shadow: 0 18px 48px rgba(26, 26, 26, 0.28);
}

.tw-home-feature--service:hover .tw-home-service-card__cta,
.tw-home-feature--service:focus-within .tw-home-service-card__cta,
.tw-home-feature--service:active .tw-home-service-card__cta {
	opacity: 1;
	transform: translateY(0);
}

.tw-home-feature--service:hover .tw-home-service-card__cta-icon,
.tw-home-feature--service:focus-within .tw-home-service-card__cta-icon,
.tw-home-feature--service:active .tw-home-service-card__cta-icon {
	animation: tw-project-card-find-chevron 1.15s ease-in-out forwards;
}

/* Mobile / touch: when revealed (on touch/press), the CTA sits in the top-right corner. */
@media (hover: none), (max-width: 768px) {
	.tw-home-service-card__cta {
		top: clamp(0.85rem, 2.6vw, 1.25rem);
		bottom: auto;
		right: clamp(0.85rem, 2.4vw, 1.25rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tw-home-service-card__bg,
	.tw-home-service-card__overlay::after,
	.tw-home-service-card__cta {
		transition: none;
	}

	.tw-home-feature--service:hover .tw-home-service-card__bg,
	.tw-home-feature--service:focus-within .tw-home-service-card__bg {
		transform: scale(1.04);
	}

	.tw-home-feature--service:hover .tw-home-service-card__cta-icon,
	.tw-home-feature--service:focus-within .tw-home-service-card__cta-icon {
		animation: none;
		opacity: 0.92;
	}
}

.tw-home-service-card__link {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	position: absolute;
	inset: 0;
	z-index: 3;
	box-sizing: border-box;
	padding: clamp(1.35rem, 3.2vw, 1.85rem);
	border-radius: inherit;
	text-decoration: none;
	color: inherit;
}

.tw-home-feature--service {
	position: relative;
}

.tw-home-section--features .tw-home-feature--service .tw-home-feature__title {
	position: relative;
	z-index: 2;
	margin: 0;
	margin-top: auto;
	align-self: flex-start;
	max-width: min(16rem, 68%);
	font-size: clamp(0.92rem, 2.1vw, 1.05rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.35;
	text-transform: none;
	color: rgba(255, 255, 255, 0.96);
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

.tw-home-feature__credentials-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 1.5rem;
}

.tw-home-feature__credentials-item {
	margin: 0;
	padding: 0;
}

.tw-home-section--sectors {
	background: var(--tw-color-bg, #f5f4f0);
	border-top: 1px solid rgba(26, 26, 26, 0.06);
}

.tw-home-sectors {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
}

.tw-home-sector-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	border: 1px solid rgba(26, 26, 26, 0.12);
	background: #f0f0f0;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tw-hero-charcoal-solid, #1a1a1a);
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tw-home-sector-pill:hover,
.tw-home-sector-pill:focus-visible {
	background: rgba(40, 40, 40, 0.1);
	border-color: rgba(40, 40, 40, 0.35);
	color: var(--tw-hero-accent, #1a1a1a);
}

/* --- Bento mode: < 5 projects, no slider, grid layout instead --- */

/* Drop the fixed viewport-height band so the grid can grow with content */
.tw-home-section--projects.tw-home-section--projects--bento#projects,
.tw-home-section--projects.tw-home-section--projects--bento {
	height: auto;
	min-height: 0;
	max-height: none;
	overflow: visible;
}

/* "More projects" band: same — let the charcoal shell grow with the bento grid */
.tw-single-related.tw-single-related--bento .tw-clients-hero__inner,
.tw-single-related--band.tw-single-related--bento .tw-clients-hero__inner {
	min-height: 0;
	height: auto;
}

/* Bento carousel root: no flex column / overflow gymnastics */
.tw-home-projects-carousel--bento {
	display: block;
	height: auto;
	min-height: 0;
	flex: 0 1 auto;
}

.tw-home-projects-carousel--bento .tw-home-projects-carousel__viewport {
	display: block;
	overflow: visible;
	height: auto;
	min-height: 0;
	margin-block: 0;
	mask-image: none;
	-webkit-mask-image: none;
	scroll-snap-type: none;
	touch-action: auto;
}

.tw-home-projects-carousel--bento .tw-home-projects-carousel__track {
	display: grid;
	gap: clamp(0.75rem, 2vw, 1.25rem);
	padding: 0;
	width: 100%;
	height: auto;
	min-height: 0;
	align-items: stretch;
	scroll-snap-type: none;
}

/* Per-count grids — 4 → 2×2, 3 → 3 cols, 2 → 2 cols, 1 → single full-width card */
.tw-home-projects-carousel--bento[data-count="1"] .tw-home-projects-carousel__track {
	grid-template-columns: minmax(0, 1fr);
}

.tw-home-projects-carousel--bento[data-count="2"] .tw-home-projects-carousel__track {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tw-home-projects-carousel--bento[data-count="3"] .tw-home-projects-carousel__track {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tw-home-projects-carousel--bento[data-count="4"] .tw-home-projects-carousel__track {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.tw-home-projects-carousel--bento[data-count="3"] .tw-home-projects-carousel__track {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.tw-home-projects-carousel--bento[data-count="2"] .tw-home-projects-carousel__track,
	.tw-home-projects-carousel--bento[data-count="3"] .tw-home-projects-carousel__track,
	.tw-home-projects-carousel--bento[data-count="4"] .tw-home-projects-carousel__track {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Cards in bento: fixed aspect, no flex stretch, no scroll snap. */
.tw-home-projects-carousel--bento .tw-home-project-card.tw-bento-cell {
	flex: 0 0 auto;
	width: 100%;
	min-width: 0;
	min-height: 0;
	height: auto;
	aspect-ratio: 4 / 3;
	scroll-snap-align: none;
	opacity: 1;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Single card spans wider — banner-style */
.tw-home-projects-carousel--bento[data-count="1"] .tw-home-project-card.tw-bento-cell {
	aspect-ratio: 21 / 9;
}

/* Disable the per-slide reveal animations — every card is "live" in bento. */
.tw-home-projects-carousel--bento .tw-home-project-card.tw-bento-cell .tw-home-project-card__title,
.tw-home-projects-carousel--bento .tw-home-project-card.tw-bento-cell .tw-home-project-card__badges,
.tw-home-projects-carousel--bento .tw-home-project-card.tw-bento-cell .tw-home-project-card__badge {
	transition: none;
	animation: none;
}

.tw-home-projects-carousel--bento .tw-home-project-card.tw-bento-cell .tw-home-project-card__text {
	padding-bottom: var(--tw-card-pad-bottom);
	gap: var(--tw-card-title-badge-gap);
}

.tw-home-projects-carousel--bento .tw-home-project-card.tw-bento-cell .tw-home-project-card__title {
	transform: none;
	margin-bottom: 0;
}

.tw-home-projects-carousel--bento .tw-home-project-card.tw-bento-cell .tw-home-project-card__badges {
	position: static;
	left: auto;
	right: auto;
	bottom: auto;
	max-height: none;
	overflow: visible;
	opacity: 1;
	transform: none;
}

.tw-home-projects-carousel--bento .tw-home-project-card.tw-bento-cell .tw-home-project-card__badge {
	opacity: 1;
	transform: none;
}

/* Hover lift for cards in bento (replaces the slider's active emphasis) */
.tw-home-projects-carousel--bento .tw-home-project-card.tw-bento-cell:hover,
.tw-home-projects-carousel--bento .tw-home-project-card.tw-bento-cell:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 18px 48px rgba(26, 26, 26, 0.3);
}

/* Show the CTA at rest on every bento card (slider only shows it on hover) */
.tw-home-projects-carousel--bento .tw-home-project-card.tw-bento-cell .tw-home-project-card__cta {
	opacity: 1;
	transform: none;
	pointer-events: none;
}

/* Projects band: capped tall band — cards stretch to fill, so doubling the
   cap roughly doubles the card height. Inherits the standard --tw-home-section-gap
   above (no margin-top override). */
.tw-home-section--projects#projects,
.tw-home-section--projects {
	display: flex;
	flex-direction: column;
	height: min(93vh, 860px);
	min-height: 0;
	max-height: 860px;
	box-sizing: border-box;
	background: transparent;
	padding: 0;
	overflow: hidden;
}

/* On phones, drop the band's viewport-height cap so the shell can grow with
   content. Carousel viewport height is set again *after* the shared
   .tw-home-projects-carousel__viewport flex rules — those use height: auto
   and would otherwise win the cascade and collapse card height. */
@media (max-width: 899px) {
	.tw-home-section--projects#projects,
	.tw-home-section--projects {
		height: auto;
		max-height: none;
	}
}

/* Projects band stays edge-to-edge of the page frame on every viewport — no
   extra side padding beyond the global --tw-frame-inset already applied to
   .site-main--front. */

@media (min-width: 900px) {
	.tw-home-section--projects .tw-clients-hero__inner {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
		overflow: hidden;
	}

	.tw-home-section--projects .tw-clients-hero__inner > .tw-home-section__header--clients.tw-home-section__header--row {
		flex: 0 0 auto;
	}

	:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-clients-hero__inner > .tw-home-projects-carousel,
	.tw-home-section--projects .tw-clients-hero__inner > .tw-home-section--projects__cards-fx,
	.tw-single-related .tw-clients-hero__inner > .tw-single-related__cards-fx {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	.tw-home-section--projects .tw-clients-hero__inner > a.tw-hero-btn {
		flex: 0 0 auto;
		align-self: stretch;
	}
}

:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-projects-carousel {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-projects-carousel__viewport {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	margin-block: clamp(0.25rem, 1vw, 0.65rem);
	height: auto;
}

/* Home #projects on small screens: explicit viewport height (must follow the
   rule above so it is not overridden by height: auto). */
@media (max-width: 899px) {
	:where(.tw-home-section--projects, .tw-single-related--band) .tw-home-projects-carousel__viewport {
		flex: 0 0 auto;
		height: clamp(300px, 58svh, 500px);
		max-height: clamp(300px, 58svh, 500px);
		min-height: clamp(300px, 58svh, 500px);
	}
}

:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-projects-carousel__track {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	align-items: stretch;
}

.tw-home-project-card__cta {
	position: absolute;
	/* Align with the title's baseline inside .tw-home-project-card__text padding */
	bottom: clamp(1rem, 2.6vw, 1.4rem);
	right: clamp(1rem, 2.4vw, 1.25rem);
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.35rem 0.55rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
	opacity: 0;
	transform: translateY(4px);
	pointer-events: none;
	transition:
		opacity 0.35s ease,
		transform 0.35s ease;
}

/* When "Find out more" would overlap the title at bottom-right, JS sets .is-cta-top on the card. */
.tw-home-feature--service.is-cta-top .tw-home-service-card__cta,
.tw-home-project-card.is-cta-top .tw-home-project-card__cta {
	top: clamp(0.85rem, 2.6vw, 1.25rem);
	bottom: auto;
	transform: translateY(-4px);
}

.tw-home-feature--service.is-cta-top:hover .tw-home-service-card__cta,
.tw-home-feature--service.is-cta-top:focus-within .tw-home-service-card__cta,
.tw-home-feature--service.is-cta-top:active .tw-home-service-card__cta,
:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.is-cta-top:hover .tw-home-project-card__cta,
:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.is-cta-top:focus-within .tw-home-project-card__cta,
:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.is-cta-top.is-active:hover .tw-home-project-card__cta,
:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.is-cta-top.is-card-touch .tw-home-project-card__cta {
	transform: translateY(0);
}

@media (max-width: 899px) {
	[data-tw-projects-carousel] .tw-home-project-card.tw-bento-cell.is-cta-top .tw-home-project-card__cta,
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell.is-cta-top .tw-home-project-card__cta {
		top: clamp(0.85rem, 2.6vw, 1.25rem);
		bottom: auto;
	}
}

/* Match carousel next/prev chevrons (.tw-home-projects-carousel__arrow i) */
.tw-home-project-card__cta-icon {
	display: inline-block;
	font-size: 0.85rem;
	line-height: 1;
	margin-inline-start: 0.12em;
	opacity: 0.85;
	animation: none;
}

/* Same motion rhythm as .tw-hero-btn:hover::after (tw-hero-btn-chevron), one play per hover */
@keyframes tw-project-card-find-chevron {
	0%,
	12% {
		transform: translateX(0);
		opacity: 0.92;
	}

	28% {
		transform: translateX(0.72em);
		opacity: 0;
	}

	29% {
		transform: translateX(-0.78em);
		opacity: 0;
	}

	52% {
		transform: translateX(0);
		opacity: 0.92;
	}

	100% {
		transform: translateX(0);
		opacity: 0.92;
	}
}

:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell.is-active:hover .tw-home-project-card__cta {
	opacity: 1;
	transform: translateY(0);
}

:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell.is-active:hover .tw-home-project-card__cta-icon {
	animation: tw-project-card-find-chevron 1.15s ease-in-out forwards;
}

@media (prefers-reduced-motion: reduce) {
	:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell.is-active:hover .tw-home-project-card__cta {
		transition: none;
	}

	:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell.is-active:hover .tw-home-project-card__cta-icon {
		animation: none;
		opacity: 0.92;
	}
}

.tw-home-project-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 1.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tw-home-project-grid--bento {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--tw-bento-gap);
}

.tw-home-project-card--featured {
	grid-column: 1 / span 2;
	grid-row: 1 / span 2;
}

.tw-home-project-card--featured .tw-home-project-card__media {
	aspect-ratio: 1;
	min-height: 11rem;
}

.tw-home-project-card--featured .tw-home-project-card__title {
	font-size: clamp(1.05rem, 2vw, 1.2rem);
}

@media (max-width: 900px) {
	.tw-home-project-grid:not(.tw-home-project-grid--bento) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tw-home-project-grid--bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tw-home-project-card--featured {
		grid-column: 1 / span 2;
		grid-row: auto;
	}

	.tw-home-project-card--featured .tw-home-project-card__media {
		aspect-ratio: 4 / 3;
		min-height: 0;
	}
}

@media (max-width: 520px) {
	.tw-home-project-grid {
		grid-template-columns: 1fr;
	}

	.tw-home-project-card--featured {
		grid-column: 1;
	}
}

.tw-home-project-card {
	margin: 0;
}

.tw-home-project-card__link {
	display: block;
	height: 100%;
	text-decoration: none;
	color: inherit;
	background: var(--tw-bento-cell-bg);
	border: var(--tw-bento-cell-border);
	border-radius: var(--tw-bento-radius);
	overflow: hidden;
	box-shadow: var(--tw-bento-cell-shadow);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.tw-home-project-card__link:focus-visible {
	outline: 2px solid var(--tw-hero-accent, #1a1a1a);
	outline-offset: 3px;
}

.tw-home-project-card__link:hover,
.tw-home-project-card__link:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 18px 48px rgba(26, 26, 26, 0.12);
}

.tw-home-project-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: rgba(26, 26, 26, 0.06);
}

.tw-home-project-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tw-home-project-card__placeholder {
	width: 100%;
	height: 100%;
	min-height: 8rem;
	background: linear-gradient(135deg, rgba(26, 26, 26, 0.12), rgba(40, 40, 40, 0.08));
}

.tw-home-project-card__body {
	padding: 1rem 1.1rem 1.2rem;
}

.tw-home-project-card__tag {
	display: inline-block;
	margin-bottom: 0.4rem;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tw-hero-accent, #1a1a1a);
}

.tw-home-project-card__title {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--tw-heading-color);
}

.tw-home-projects-empty {
	text-align: center;
	padding: clamp(1.5rem, 4vw, 2.5rem) 0;
}

.tw-home-projects-empty.tw-bento-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.tw-home-band__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 3vw, 2rem);
	margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

@media (max-width: 700px) {
	.tw-home-band__stats {
		grid-template-columns: 1fr;
		text-align: center;
	}
}

.tw-home-stat {
	padding: 1rem;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.tw-home-stat__value {
	display: block;
	font-size: clamp(1.5rem, 4vw, 2rem);
	font-weight: 800;
	letter-spacing: 0.04em;
	color: #fff;
	margin-bottom: 0.35rem;
}

.tw-home-stat__label {
	font-size: 0.82rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.78);
}

.tw-home-contact-lines {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	justify-content: center;
	font-size: clamp(1rem, 2vw, 1.15rem);
	font-weight: 600;
}

.tw-home-contact-lines a {
	color: var(--tw-hero-accent, #1a1a1a);
	text-decoration: none;
}

.tw-home-contact-lines a:hover,
.tw-home-contact-lines a:focus-visible {
	text-decoration: underline;
}

.tw-home-section--footer-bento {
	background: transparent;
	color: inherit;
	border-top: 1px solid rgba(26, 26, 26, 0.06);
}

.tw-home-section--footer-bento .tw-home-section__inner {
	padding-bottom: var(--tw-hero-pad);
}

/* Legacy full-bleed band (unused after bento footer; kept for any old hooks) */
.tw-home-section--band {
	background: linear-gradient(
		125deg,
		rgba(26, 26, 26, 0.96) 0%,
		rgba(77, 77, 77, 0.9) 48%,
		rgba(40, 40, 40, 0.92) 100%
	);
	color: #fff;
}

.tw-home-band {
	text-align: center;
}

.tw-home-band__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.35rem, 3vw, 1.85rem);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

.tw-home-band__text {
	margin: 0 auto;
	max-width: 36rem;
	font-size: 1.02rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.88);
}

.tw-home-section--cta {
	background: rgba(26, 26, 26, 0.04);
	border-top: 1px solid rgba(26, 26, 26, 0.08);
}

.tw-home-cta {
	text-align: center;
}

.tw-home-cta__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.35rem, 3vw, 1.85rem);
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tw-heading-color);
}

.tw-home-cta__lede {
	margin: 0 auto 1.5rem;
	max-width: 32rem;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--tw-color-muted, #5c5c5c);
}

.tw-home-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

.tw-home-section--cta .tw-hero-btn--muted {
	background: var(--tw-hero-btn-muted);
	border: 1px solid rgba(26, 26, 26, 0.15);
	color: var(--tw-hero-charcoal-solid, #1a1a1a);
}

.tw-home-section--cta .tw-hero-btn--muted:hover,
.tw-home-section--cta .tw-hero-btn--muted:focus-visible {
	color: var(--tw-hero-charcoal-solid, #1a1a1a);
}

.tw-home-section--editor {
	border-top: 1px solid rgba(26, 26, 26, 0.08);
}

.tw-home-editor {
	padding-top: 0;
	padding-bottom: 0;
}

.tw-home-editor h2,
.tw-home-editor h3 {
	color: var(--tw-heading-color);
	font-weight: 700;
}

.tw-home-editor a {
	color: var(--tw-hero-accent, #1a1a1a);
}

.tw-hero-footer {
	position: relative;
	z-index: 1;
	padding: var(--tw-hero-pad) var(--tw-hero-pad-x-end) 0 var(--tw-hero-pad-x);
	margin-top: 0;
}

.tw-hero-footer__inner {
	max-width: var(--tw-hero-max);
	margin: 0 auto;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.tw-hero-footer__copy {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.65);
	font-family: "Manrope", var(--tw-font-sans, system-ui, sans-serif);
	text-align: center;
}

.tw-page-frame .tw-hero-footer {
	background: transparent;
}

.tw-page-frame .tw-hero-footer__inner {
	border-top-color: rgba(0, 0, 0, 0.08);
}

.tw-page-frame .tw-hero-footer__copy {
	color: rgba(0, 0, 0, 0.45);
}

/* --- Project archive & single --- */

.tw-archive-projects__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: clamp(2rem, 5vw, 3rem) 0 clamp(1.25rem, 3vw, 1.75rem);
}

.tw-archive-projects__filter {
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	background: transparent;
	font: inherit;
	font-family: inherit;
	color: var(--tw-color-text, #1a1a1a);
	-webkit-text-fill-color: currentColor;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.tw-archive-projects__filter.is-active,
.tw-archive-projects__filter:hover,
.tw-archive-projects__filter:focus-visible {
	background: var(--tw-hero-btn-accent);
	color: #fff;
	-webkit-text-fill-color: currentColor;
	border-color: var(--tw-hero-btn-accent);
}

.tw-archive-project-card.is-filtered-out {
	display: none !important;
}

.tw-archive-projects__filter-empty {
	margin: 0 0 1.5rem;
	color: var(--tw-color-muted, #5c5c5c);
}

.tw-archive-projects {
	padding-block: 0;
	font-family: "Manrope", var(--tw-font-sans, system-ui, sans-serif);
	background: var(--tw-color-surface, #ffffff);
}

.tw-archive-projects__inner {
	width: 100%;
	max-width: none;
	margin: 0 auto;
	padding-block: clamp(3rem, 7vw, 5.5rem) var(--tw-frame-inset);
	padding-inline:
		calc(var(--tw-frame-inset) + var(--tw-hero-pad-x))
		calc(var(--tw-frame-inset) + var(--tw-hero-pad-x-end));
	box-sizing: border-box;
}

.tw-archive-projects__header {
	margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
	text-align: left;
}

.tw-archive-projects__kicker {
	margin-bottom: clamp(0.6rem, 1.4vw, 0.85rem);
	color: var(--tw-color-muted, #5c5c5c);
}

.tw-archive-projects__kicker .tw-home-kicker__line {
	background: var(--tw-kicker-line-color, rgba(26, 26, 26, 0.35));
}

.tw-archive-projects .page-title {
	margin: 0;
	color: var(--tw-heading-color);
	text-align: left;
	font-size: clamp(2rem, 5dvw, 60px);
	line-height: 0.95;
	letter-spacing: 0.02em;
}

.tw-archive-projects__subtitle,
.tw-home-about__subtitle {
	margin: clamp(0.65rem, 1.4vw, 0.9rem) 0 0;
	max-width: 42rem;
	font-size: clamp(1.05rem, 2.2vw, 1.25rem);
	line-height: 1.45;
	font-weight: 500;
	color: var(--tw-kicker-line-color, rgba(26, 26, 26, 0.35));
	text-align: left;
}

.tw-archive-projects__intro {
	margin: clamp(0.75rem, 1.6vw, 1.05rem) 0 0;
	max-width: 42rem;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--tw-color-muted, #5c5c5c);
	text-align: left;
}

/* Hold project cards for a second [data-tw-fx-group] so card scale-in runs after
   the section title / intro wipes (see data-tw-fx-base). */
.tw-home-section--projects__cards-fx,
.tw-single-related__cards-fx,
.tw-archive-projects__delayed-fx {
	width: 100%;
	min-width: 0;
}

/* Bridge height into the carousel: markup wraps it in *-__cards-fx for FX groups,
   so rules that targeted .inner > .tw-home-projects-carousel never matched. */
.tw-home-section--projects__cards-fx,
.tw-single-related__cards-fx {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

/* Archive bento: 12-col grid with a repeating 5-card pattern. */
.tw-archive-projects__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: var(--tw-bento-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell {
	height: auto;
	min-height: 0;
	aspect-ratio: 4 / 3;
	cursor: pointer;
}

/* 5n+1: wide hero (7 cols, banner aspect) */
.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:nth-child(5n + 1) {
	grid-column: span 7;
	aspect-ratio: 7 / 4;
}

/* 5n+2: feature square-ish (5 cols) */
.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:nth-child(5n + 2) {
	grid-column: span 5;
	aspect-ratio: 5 / 4;
}

/* 5n+3, 5n+4, 5n+5: triplet row (4 cols each) */
.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:nth-child(5n + 3),
.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:nth-child(5n + 4),
.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:nth-child(5n + 5) {
	grid-column: span 4;
	aspect-ratio: 4 / 3;
}

@media (max-width: 768px) {
	:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell {
		--tw-card-pad-x: clamp(0.85rem, 2.2vw, 1.1rem);
		--tw-card-pad-bottom: clamp(0.85rem, 2.4vw, 1.15rem);
		--tw-card-title-badge-gap: clamp(0.15rem, 0.5vw, 0.28rem);
		--tw-card-badge-row-h: clamp(1.1rem, 2.8vw, 1.35rem);
	}

	:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell .tw-home-project-card__title {
		font-size: clamp(0.9rem, 2.4vw, 1rem);
		line-height: 1.22;
	}

	:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-project-card.tw-bento-cell .tw-home-project-card__badge {
		font-size: 0.6rem;
		padding: 0.18rem 0.45rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell,
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell .tw-home-project-card__bg,
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell .tw-home-project-card__overlay::after,
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell .tw-home-project-card__title,
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell .tw-home-project-card__text,
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell .tw-home-project-card__badges,
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:hover .tw-home-project-card__cta,
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:focus-within .tw-home-project-card__cta,
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell.is-card-touch .tw-home-project-card__cta {
		transition: none;
	}

	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:hover .tw-home-project-card__cta-icon,
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:focus-within .tw-home-project-card__cta-icon,
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell.is-card-touch .tw-home-project-card__cta-icon {
		animation: none;
		opacity: 0.92;
	}
}

/* Full-card cover anchor — sits above artwork, below the CTA badge in z-order. */
.tw-archive-project-cover-link {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: block;
	text-decoration: none;
	color: transparent;
	overflow: hidden;
	text-indent: -9999px;
	border-radius: inherit;
}

.tw-archive-project-cover-link:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.85);
	outline-offset: -4px;
}

/* Archive bento cards must not use the global [data-tw-fx] hide (opacity:0) — it
   caused a visible → hidden → visible flash on /projects/. Filter + infinite
   scroll use tw-archive-card-enter / tw-is-appended instead. */
.tw-fx-js .tw-archive-projects__bento > .tw-archive-project-card[data-tw-fx] {
	opacity: 1;
	transform: none;
	animation: none !important;
	clip-path: none;
}

/* Projects archive: first paint hides cards, then staggered scale-in (no tw-fx). */
@media (prefers-reduced-motion: no-preference) {
	.tw-archive-projects__bento--await-reveal:not(.is-initial-reveal) > .tw-home-project-card.tw-bento-cell {
		opacity: 0;
	}

	.tw-archive-projects__bento.is-initial-reveal > .tw-home-project-card.tw-bento-cell {
		animation: tw-archive-card-in 0.56s cubic-bezier(0.34, 1.32, 0.5, 1) both;
		animation-delay: calc(var(--tw-card-index, 0) * 76ms);
		transform-origin: center center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tw-archive-projects__bento--await-reveal > .tw-home-project-card.tw-bento-cell {
		opacity: 1;
	}
}

/* Lazy-loaded card scale-in for cards appended via infinite scroll.
   Each appended card gets an inline --tw-card-stagger so they pop in
   one after another rather than as a batch. */
.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell.tw-is-appended,
.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell.tw-archive-card-enter {
	animation: tw-archive-card-in 0.5s cubic-bezier(0.34, 1.32, 0.5, 1) both;
	animation-delay: var(--tw-card-stagger, 0ms);
	transform-origin: center center;
}

/* Sector filter: scale all cards out together, then replace and stagger in. */
.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell.tw-archive-card-exit {
	animation: tw-archive-card-out var(--tw-archive-filter-out-dur, 0.32s) cubic-bezier(0.4, 0, 1, 1) forwards;
	transform-origin: center center;
	pointer-events: none;
}

@keyframes tw-archive-card-in {
	0% {
		opacity: 0;
		transform: scale(0.86) translateY(10px);
	}
	60% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes tw-archive-card-out {
	from {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
	to {
		opacity: 0;
		transform: scale(0.86) translateY(10px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell.tw-is-appended,
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell.tw-archive-card-enter,
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell.tw-archive-card-exit {
		animation: none;
	}
}

/* Tablet: 2 cols between desktop bento and mobile stack. */
@media (min-width: 900px) and (max-width: 1099px) {
	.tw-archive-projects__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell,
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:nth-child(5n + 1),
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:nth-child(5n + 2),
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:nth-child(5n + 3),
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:nth-child(5n + 4),
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:nth-child(5n + 5) {
		grid-column: span 1;
		aspect-ratio: 4 / 3;
	}
}

/* Mobile + phone landscape: single column, full-width cards (slider-like height). */
@media (max-width: 899px) {
	.tw-archive-projects__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(0.75rem, 2.5vw, var(--tw-bento-gap));
	}

	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell,
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:nth-child(5n + 1),
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:nth-child(5n + 2),
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:nth-child(5n + 3),
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:nth-child(5n + 4),
	.tw-archive-projects__bento > .tw-home-project-card.tw-bento-cell:nth-child(5n + 5) {
		grid-column: 1 / -1;
		width: 100%;
		max-width: none;
		min-width: 0;
		flex: none;
		min-height: clamp(280px, 58svh, 440px);
		height: auto;
		aspect-ratio: auto;
	}
}

/* Infinite-scroll sentinel + status message. */
.tw-archive-projects__sentinel {
	height: 1px;
	margin-top: clamp(2rem, 5vw, 3.5rem);
}

.tw-archive-projects__status {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	margin: clamp(1rem, 3vw, 1.5rem) auto 0;
	padding: 0.5rem 1rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tw-color-muted, #5c5c5c);
}

.tw-archive-projects__status.is-loading,
.tw-archive-projects__status.is-done,
.tw-archive-projects__status.is-error {
	display: inline-flex;
}

.tw-archive-projects__status.is-done .tw-archive-projects__spinner,
.tw-archive-projects__status.is-error .tw-archive-projects__spinner {
	display: none;
}

.tw-archive-projects__spinner {
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	border: 2px solid rgba(26, 26, 26, 0.18);
	border-top-color: var(--tw-hero-accent, #1a1a1a);
	animation: tw-archive-spin 0.9s linear infinite;
}

@keyframes tw-archive-spin {
	to {
		transform: rotate(1turn);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tw-archive-projects__spinner {
		animation: none;
		opacity: 0.7;
	}
}

.tw-archive-projects__pagination {
	margin-top: clamp(2rem, 4vw, 2.5rem);
}

.tw-archive-project-card {
	margin: 0;
}

.tw-archive-project-card__link {
	display: block;
	height: 100%;
	text-decoration: none;
	color: inherit;
	background: var(--tw-bento-cell-bg);
	border: var(--tw-bento-cell-border);
	border-radius: var(--tw-bento-radius);
	overflow: hidden;
	box-shadow: var(--tw-bento-cell-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tw-archive-project-card__link:focus-visible {
	outline: 2px solid var(--tw-hero-accent, #1a1a1a);
	outline-offset: 3px;
}

.tw-archive-project-card__link:hover,
.tw-archive-project-card__link:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(26, 26, 26, 0.1);
}

.tw-archive-project-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: rgba(26, 26, 26, 0.06);
}

.tw-archive-project-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tw-archive-project-card__placeholder {
	min-height: 10rem;
	background: linear-gradient(135deg, rgba(26, 26, 26, 0.1), rgba(40, 40, 40, 0.06));
}

.tw-archive-project-card__body {
	padding: 1rem 1.15rem 1.25rem;
}

.tw-archive-project-card__tag {
	display: inline-block;
	margin-bottom: 0.35rem;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tw-hero-accent, #1a1a1a);
}

.tw-archive-project-card__title {
	margin: 0 0 0.35rem;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--tw-heading-color);
}

.tw-archive-project-card__excerpt {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--tw-color-muted, #5c5c5c);
}

.tw-single-project {
	padding-block: 0;
	font-family: "Manrope", var(--tw-font-sans, system-ui, sans-serif);
}

/* Outer band: same frame + frosted strip as homepage #projects (auto height, not 100dvh). */
.tw-single-project__shell {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: var(--tw-home-section-gap) var(--tw-frame-inset) var(--tw-frame-inset);
	background: rgba(255, 255, 255, 0.35);
	overflow: visible;
}

/* charcoal card shell — mirrors .tw-home-section--projects > .tw-clients-hero */
.tw-single-project__shell > .tw-single-project-hero.tw-clients-hero.tw-testimonials-hero {
	flex: 0 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	height: auto;
}

.tw-single-project__shell .tw-clients-hero {
	position: relative;
	overflow: hidden;
}

.tw-single-project__shell .tw-clients-hero,
.tw-single-project__shell .tw-clients-hero__bg,
.tw-single-project__shell .tw-clients-hero__overlay {
	border-radius: var(--tw-hero-inner-radius);
}

.tw-single-project__shell .tw-clients-hero__inner {
	display: flex;
	flex-direction: column;
	row-gap: clamp(1rem, 2.5vw, 1.5rem);
	height: auto;
	min-height: 0;
	overflow: hidden;
}

.tw-single-project__band--lead {
	display: flex;
	flex-direction: column;
	gap: clamp(0.65rem, 2vw, 1rem);
	width: 100%;
	min-width: 0;
}

.tw-single-project__band--content {
	width: 100%;
	min-width: 0;
	padding-top: clamp(0.35rem, 1.2vw, 0.75rem);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.tw-single-project__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	width: 100%;
}

.tw-single-project__sectors {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	margin: 0 0 0.55rem;
	font-size: 0.72rem;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: left;
	width: 100%;
	max-width: 100%;
	color: #5c5c5c;
}

.tw-single-project__sectors .tw-home-kicker__line {
	flex-shrink: 0;
}

.tw-single-project__sectors-text {
	display: inline;
	min-width: 0;
}

.tw-single-project__sectors a {
	color: var(--tw-hero-accent, #1a1a1a);
	text-decoration: none;
}

.tw-single-project__sectors a:hover,
.tw-single-project__sectors a:focus-visible {
	text-decoration: underline;
}

.tw-single-project__shell .tw-single-project__sectors {
	color: rgba(255, 255, 255, 0.72);
}

.tw-single-project__shell .tw-single-project__sectors .tw-home-kicker__line {
	background: rgba(255, 255, 255, 0.35);
}

.tw-single-project__shell .tw-single-project__sectors a {
	color: rgba(255, 255, 255, 0.92);
}

.tw-single-project__shell .tw-single-project__sectors a:hover,
.tw-single-project__shell .tw-single-project__sectors a:focus-visible {
	color: #fff;
}

.tw-single-project__title {
	margin: 0 0 1rem;
	font-size: clamp(1.5rem, 3.8vw, 2.35rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--tw-heading-color);
	text-align: left;
}

.tw-single-project__shell .tw-single-project__title {
	margin: 0 0 0.35rem;
	font-size: clamp(1.75rem, 5dvw, 60px);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--tw-heading-color);
}

/* Title + gallery span the hero inner (same horizontal rhythm as homepage projects). */
.tw-single-project__band--lead .tw-single-project__header {
	width: 100%;
}

.tw-single-project__hero {
	margin-bottom: 1.75rem;
	border-radius: clamp(12px, 2vw, 16px);
	overflow: hidden;
	border: 1px solid rgba(26, 26, 26, 0.08);
}

.tw-single-project__image {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Single project: gallery carousel (homepage projects slider; images keep natural aspect ratio) --- */

.tw-single-project__shell .tw-home-projects-carousel {
	width: 100%;
	min-width: 0;
	--tw-project-slide-w: 100%;
}

@media (min-width: 900px) {
	.tw-single-project__shell .tw-home-projects-carousel {
		--tw-project-slide-w: min(min(48cqw, 88vw), 600px);
	}
}

@media (min-width: 1200px) {
	.tw-single-project__shell .tw-home-projects-carousel {
		--tw-project-slide-w: min(min(40cqw, 80vw), 560px);
	}
}

@media (max-width: 899px) {
	.tw-single-project__shell .tw-home-projects-carousel {
		--tw-project-slide-w: 100%;
	}

	.tw-single-project__shell .tw-home-projects-carousel .tw-home-projects-carousel__viewport {
		mask-image: none !important;
		-webkit-mask-image: none !important;
	}

	.tw-single-project__shell .tw-home-projects-carousel__track {
		gap: clamp(0.5rem, 2vw, var(--tw-bento-gap));
		padding: 2px 0 4px;
		padding-inline-start: 0;
		padding-inline-end: 0;
	}

	.tw-single-project__shell .tw-single-project-gallery__card.tw-bento-cell {
		scroll-snap-align: start;
	}
}

@supports not (width: 1cqw) {
	.tw-single-project__shell .tw-home-projects-carousel {
		--tw-project-slide-w: min(92vw, 600px);
	}

	.tw-single-project__shell .tw-home-projects-carousel__track {
		padding-inline-end: max(0px, calc((100vw - var(--tw-project-slide-w)) / 2));
	}

	@media (max-width: 899px) {
		.tw-single-project__shell .tw-home-projects-carousel {
			--tw-project-slide-w: 100%;
		}

		.tw-single-project__shell .tw-home-projects-carousel__track {
			padding-inline-start: 0;
			padding-inline-end: 0;
			gap: clamp(0.5rem, 2vw, 0.75rem);
		}
	}

	@media (min-width: 900px) {
		.tw-single-project__shell .tw-home-projects-carousel {
			--tw-project-slide-w: min(88vw, 600px);
		}
	}

	@media (min-width: 1200px) {
		.tw-single-project__shell .tw-home-projects-carousel {
			--tw-project-slide-w: min(80vw, 560px);
		}
	}
}

/* Stack + viewport rhythm match #projects (home-hero.css .tw-home-section--projects .tw-home-projects-carousel__viewport). */
.tw-single-project__shell .tw-home-projects-carousel {
	display: flex;
	flex-direction: column;
}

.tw-single-project__shell .tw-home-projects-carousel__viewport {
	margin-block: clamp(0.25rem, 1vw, 0.65rem);
}

.tw-single-project__shell .tw-single-project-gallery.tw-home-projects-carousel .tw-home-projects-carousel__track {
	align-items: center;
}

/* Controls: same treatment as homepage #projects (explicit so inner-page / UA button styles do not flatten them). */
.tw-single-project__shell .tw-home-projects-carousel__bottom-bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem 1rem;
	width: 100%;
	margin-top: clamp(1.15rem, 2.8vw, 1.65rem);
	padding-bottom: 2px;
	box-sizing: border-box;
}

.tw-single-project__shell .tw-home-projects-carousel__pause {
	position: relative;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	margin-right: auto;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: rgba(255, 255, 255, 0.92);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	transition:
		color 0.2s ease,
		opacity 0.2s ease;
}

.tw-single-project__shell .tw-home-projects-carousel__pause:hover,
.tw-single-project__shell .tw-home-projects-carousel__pause:focus-visible {
	color: #fff;
	opacity: 1;
	outline: none;
}

.tw-single-project__shell .tw-home-projects-carousel__pause-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}

.tw-single-project__shell .tw-home-projects-carousel__pause-icon-wrap {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 0.75rem;
	line-height: 1;
}

.tw-single-project__shell .tw-home-projects-carousel__pause.is-timing .tw-home-projects-carousel__pause-progress {
	animation: tw-project-pause-ring var(--tw-project-interval, 5s) linear forwards;
}

.tw-single-project__shell .tw-home-projects-carousel__pause.is-timing.is-paused .tw-home-projects-carousel__pause-progress,
.tw-single-project__shell .tw-home-projects-carousel__pause.is-timing.is-hover-paused .tw-home-projects-carousel__pause-progress {
	animation-play-state: paused;
}

.tw-single-project__shell .tw-home-projects-carousel__pause.is-paused:not(.is-timing) .tw-home-projects-carousel__pause-progress {
	animation: none;
}

.tw-single-project__shell .tw-home-projects-carousel__arrows {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 0.35rem;
	flex: 0 0 auto;
	margin-left: auto;
}

.tw-single-project__shell .tw-home-projects-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.35rem;
	height: 2.35rem;
	padding: 0;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.92);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	box-sizing: border-box;
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
}

.tw-single-project__shell .tw-home-projects-carousel__arrow:hover,
.tw-single-project__shell .tw-home-projects-carousel__arrow:focus-visible {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
	outline: none;
}

.tw-single-project__shell .tw-home-projects-carousel__arrow i {
	font-size: 0.85rem;
	line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
	.tw-single-project__shell .tw-home-projects-carousel__pause .tw-home-projects-carousel__pause-progress {
		animation: none !important;
		stroke-dashoffset: 0;
		opacity: 0.75;
	}
}

.tw-single-project__shell .tw-single-project-gallery__card.tw-bento-cell {
	position: relative;
	display: block;
	flex: 0 0 var(--tw-project-slide-w);
	width: var(--tw-project-slide-w);
	aspect-ratio: 16 / 10;
	min-height: 0;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	overflow: hidden;
	border-radius: var(--tw-bento-radius);
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	color: inherit;
	background: rgba(26, 26, 26, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 10px 32px rgba(26, 26, 26, 0.2);
	opacity: 0.4;
	cursor: pointer;
	transition:
		opacity 0.58s ease,
		border-color 0.48s ease,
		box-shadow 0.48s ease,
		transform 0.48s ease;
}

.tw-single-project__shell .tw-single-project-gallery__card.tw-bento-cell.is-active {
	opacity: 1;
	border-color: rgba(255, 255, 255, 0.28);
	box-shadow: 0 14px 44px rgba(26, 26, 26, 0.28);
}

.tw-single-project__shell .tw-single-project-gallery__card.tw-bento-cell:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px rgba(255, 255, 255, 0.55),
		0 14px 44px rgba(26, 26, 26, 0.28);
}

.tw-single-project__shell .tw-single-project-gallery__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	line-height: 0;
	background: rgba(8, 16, 32, 0.4);
	overflow: hidden;
}

.tw-single-project__shell .tw-single-project-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1);
	will-change: transform;
	/* Bouncy spring back to scale(1) when the slide goes inactive */
	transition:
		filter 0.58s ease,
		transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tw-single-project__shell .tw-single-project-gallery__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	background: linear-gradient(
		120deg,
		rgba(26, 26, 26, 0.88) 0%,
		rgba(77, 77, 77, 0.72) 45%,
		rgba(40, 40, 40, 0.65) 100%
	);
	transition: opacity 0.5s ease, background 0.58s ease;
}

.tw-single-project__shell .tw-single-project-gallery__card.is-active .tw-single-project-gallery__overlay {
	background:
		linear-gradient(
			to top,
			rgba(18, 18, 18, 0.5) 0%,
			rgba(35, 35, 35, 0.35) 35%,
			rgba(55, 55, 55, 0.15) 55%,
			transparent 72%
		),
		linear-gradient(
			120deg,
			rgba(26, 26, 26, 0.35) 0%,
			rgba(77, 77, 77, 0.22) 45%,
			rgba(30, 30, 30, 0.18) 100%
		);
}

.tw-single-project__shell .tw-single-project-gallery__card.is-active .tw-single-project-gallery__img {
	filter: brightness(1.04) saturate(1.03);
	animation: tw-single-project-gallery-pan 5.6s ease-out both;
	transition: filter 0.58s ease;
}

@keyframes tw-single-project-gallery-pan {
	0% {
		transform: scale(1) translate3d(-2.4%, 0, 0);
	}
	14% {
		transform: scale(1.12) translate3d(-2.2%, 0, 0);
	}
	100% {
		transform: scale(1.12) translate3d(2.4%, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tw-single-project__shell .tw-single-project-gallery__card.tw-bento-cell {
		transition: opacity 0.2s ease;
	}

	.tw-single-project__shell .tw-single-project-gallery__img {
		transition: none;
		transform: none;
	}

	.tw-single-project__shell .tw-single-project-gallery__card.is-active .tw-single-project-gallery__img {
		animation: none;
		transform: none;
		transition: none;
	}
}

/* --- Single project: static bento grid gallery (replaces the carousel) --- */

.tw-single-project-gallery--grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: clamp(0.5rem, 1.4vw, 0.95rem);
	width: 100%;
	margin-block: clamp(0.25rem, 1vw, 0.65rem);
}

/* Default 5-card bento cycle (used for 5+ images and as the base on desktop). */
.tw-single-project-gallery--grid > .tw-single-project-gallery__card:nth-child(5n + 1) {
	grid-column: span 7;
	aspect-ratio: 7 / 4;
}

.tw-single-project-gallery--grid > .tw-single-project-gallery__card:nth-child(5n + 2) {
	grid-column: span 5;
	aspect-ratio: 5 / 4;
}

.tw-single-project-gallery--grid > .tw-single-project-gallery__card:nth-child(5n + 3),
.tw-single-project-gallery--grid > .tw-single-project-gallery__card:nth-child(5n + 4),
.tw-single-project-gallery--grid > .tw-single-project-gallery__card:nth-child(5n + 5) {
	grid-column: span 4;
	aspect-ratio: 4 / 3;
}

/* Small-set overrides — make 1-4 image galleries feel deliberate. */
.tw-single-project-gallery--grid[data-count="1"] > .tw-single-project-gallery__card:first-child {
	grid-column: 1 / -1;
	aspect-ratio: 21 / 9;
}

.tw-single-project-gallery--grid[data-count="2"] > .tw-single-project-gallery__card {
	grid-column: span 6;
	aspect-ratio: 4 / 3;
}

.tw-single-project-gallery--grid[data-count="3"] > .tw-single-project-gallery__card {
	grid-column: span 4;
	aspect-ratio: 4 / 3;
}

.tw-single-project-gallery--grid[data-count="4"] > .tw-single-project-gallery__card {
	grid-column: span 6;
	aspect-ratio: 4 / 3;
}

/* Tablet: drop to 2 cols, uniform 4:3 aspect. */
@media (max-width: 1099px) {
	.tw-single-project-gallery--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tw-single-project-gallery--grid > .tw-single-project-gallery__card,
	.tw-single-project-gallery--grid > .tw-single-project-gallery__card:nth-child(5n + 1),
	.tw-single-project-gallery--grid > .tw-single-project-gallery__card:nth-child(5n + 2),
	.tw-single-project-gallery--grid > .tw-single-project-gallery__card:nth-child(5n + 3),
	.tw-single-project-gallery--grid > .tw-single-project-gallery__card:nth-child(5n + 4),
	.tw-single-project-gallery--grid > .tw-single-project-gallery__card:nth-child(5n + 5) {
		grid-column: span 1;
		aspect-ratio: 4 / 3;
	}

	.tw-single-project-gallery--grid[data-count="1"] > .tw-single-project-gallery__card:first-child {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 9;
	}
}

/* Mobile: single column. */
@media (max-width: 640px) {
	.tw-single-project-gallery--grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.tw-single-project-gallery--grid > .tw-single-project-gallery__card,
	.tw-single-project-gallery--grid[data-count="1"] > .tw-single-project-gallery__card:first-child {
		grid-column: 1 / -1;
		aspect-ratio: 4 / 3;
	}
}

/* Grid mode overrides the carousel card sizing/state styling */
.tw-single-project__shell .tw-single-project-gallery--grid .tw-single-project-gallery__card.tw-bento-cell {
	flex: none;
	width: auto;
	min-width: 0;
	scroll-snap-align: none;
	scroll-snap-stop: normal;
	opacity: 1;
	cursor: default;
	background: rgba(26, 26, 26, 0.04);
	border: 1px solid rgba(26, 26, 26, 0.06);
	box-shadow: 0 8px 22px rgba(26, 26, 26, 0.08);
	transition:
		box-shadow 0.4s ease,
		transform 0.4s ease;
}

.tw-single-project__shell .tw-single-project-gallery--grid .tw-single-project-gallery__card.tw-bento-cell:hover {
	box-shadow: 0 14px 32px rgba(26, 26, 26, 0.14);
	transform: translateY(-2px);
}

.tw-single-project__shell .tw-single-project-gallery--grid .tw-single-project-gallery__media {
	background: transparent;
}

.tw-single-project__shell .tw-single-project-gallery--grid .tw-single-project-gallery__img {
	animation: none;
	transform: none;
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.tw-single-project__shell .tw-single-project-gallery--grid .tw-single-project-gallery__card:hover .tw-single-project-gallery__img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.tw-single-project__shell .tw-single-project-gallery--grid .tw-single-project-gallery__card.tw-bento-cell,
	.tw-single-project__shell .tw-single-project-gallery--grid .tw-single-project-gallery__card.tw-bento-cell:hover,
	.tw-single-project__shell .tw-single-project-gallery--grid .tw-single-project-gallery__img,
	.tw-single-project__shell .tw-single-project-gallery--grid .tw-single-project-gallery__card:hover .tw-single-project-gallery__img {
		transform: none;
		transition: none;
	}
}

/* --- Remove the charcoal/grey hero background from the MAIN single project
       content shell (lead band + content band) only. The More projects
       band (.tw-single-related--band) keeps its charcoal hero by design, so
       every rule below is scoped to .tw-single-project__article (the
       wrapper used only on the main article, not on .tw-single-related). --- */

.tw-single-project__article > .tw-single-project__shell .tw-clients-hero__bg,
.tw-single-project__article > .tw-single-project__shell .tw-clients-hero__overlay {
	background: transparent;
	background-image: none;
}

.tw-single-project__article > .tw-single-project__shell .tw-clients-hero {
	color: var(--tw-color-text, #1a1a1a);
}

.tw-single-project__article > .tw-single-project__shell .tw-single-project__sectors,
.tw-single-project__article > .tw-single-project__shell .tw-single-project__sectors a {
	color: #5c5c5c;
}

.tw-single-project__article > .tw-single-project__shell .tw-single-project__sectors .tw-home-kicker__line {
	background: rgba(26, 26, 26, 0.2);
}

.tw-single-project__article > .tw-single-project__shell .tw-single-project__sectors a {
	color: var(--tw-hero-accent, #1a1a1a);
}

.tw-single-project__article > .tw-single-project__shell .tw-single-project__sectors a:hover,
.tw-single-project__article > .tw-single-project__shell .tw-single-project__sectors a:focus-visible {
	color: var(--tw-hero-accent-hover, #333333);
}

.tw-single-project__article > .tw-single-project__shell .tw-single-project__title {
	color: var(--tw-heading-color);
}

.tw-single-project__article > .tw-single-project__shell .tw-single-project__band--content {
	border-top: 1px solid rgba(26, 26, 26, 0.08);
}

.tw-single-project__content {
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--tw-color-text, #1a1a1a);
}

.tw-single-project__shell .tw-single-project__content {
	font-size: clamp(1rem, 1.15vw, 1.08rem);
	line-height: 1.65;
	color: var(--tw-color-text, #1a1a1a);
}

.tw-single-project__shell .tw-single-project__content a {
	color: var(--tw-hero-accent, #1a1a1a);
	text-decoration: underline;
	text-underline-offset: 0.14em;
}

.tw-single-project__shell .tw-single-project__content a:hover,
.tw-single-project__shell .tw-single-project__content a:focus-visible {
	color: var(--tw-hero-accent-hover, #333333);
}

.tw-single-project__shell .tw-single-project__content :where(h2, h3, h4) {
	color: var(--tw-heading-color);
	font-weight: 800;
	letter-spacing: 0.02em;
}

.tw-single-project__shell .tw-single-project__content :where(h2) {
	font-size: clamp(1.25rem, 2.8vw, 1.65rem);
	margin-block: 1.35em 0.5em;
}

.tw-single-project__shell .tw-single-project__content :where(h3, h4) {
	font-size: clamp(1.05rem, 2vw, 1.2rem);
	margin-block: 1.15em 0.45em;
}

.tw-single-project__shell .tw-single-project__content :where(strong) {
	color: var(--tw-heading-color);
}

.tw-single-project__shell .tw-single-project__content :where(blockquote) {
	border-left: 3px solid rgba(26, 26, 26, 0.18);
	color: var(--tw-color-muted, #5c5c5c);
}

.tw-single-project__shell .tw-single-project__content :where(hr) {
	border: none;
	border-top: 1px solid rgba(26, 26, 26, 0.1);
	margin-block: 1.5rem;
}

/* --- Single project: more projects (full-width band; title + kicker inside charcoal shell) --- */

.tw-single-related {
	padding-block: clamp(1.75rem, 4.5vw, 3rem);
	font-family: "Manrope", var(--tw-font-sans, system-ui, sans-serif);
	border-top: none;
}

.tw-single-related--band {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
	box-sizing: border-box;
}

.tw-single-related--band .tw-single-project__shell {
	width: 100%;
	max-width: none;
}

@media (min-width: 900px) {
	.tw-single-related--band .tw-clients-hero__inner {
		display: flex;
		flex-direction: column;
		min-height: min(93vh, 810px);
		row-gap: clamp(0.65rem, 2vw, 1.15rem);
	}
}

/* Phones / tablet: shorten the More projects band to match the home slider so the
   full card stays in view; CTA sits at the bottom of the slider shell. */
@media (max-width: 899px) {
	.tw-single-related--band .tw-clients-hero__inner {
		min-height: 0;
	}

	.tw-single-related--band .tw-single-related__intro .tw-single-related__cta--desktop {
		display: none;
	}

	.tw-single-related--band .tw-single-related__cards-fx {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
		align-self: stretch;
	}

	.tw-single-related--band .tw-single-related__cards-fx > .tw-home-projects-carousel {
		flex: 1 1 auto;
		min-height: 0;
	}

	.tw-single-related--band .tw-single-related__cta--mobile {
		display: inline-flex;
		justify-content: center;
		align-self: stretch;
		width: 100%;
		max-width: none;
		box-sizing: border-box;
		margin-top: auto;
		padding-top: clamp(1rem, 3vw, 1.35rem);
		flex: 0 0 auto;
	}

	.tw-single-related--band .tw-single-related-carousel .tw-home-projects-carousel__viewport {
		flex: 0 0 auto;
		height: clamp(280px, 56vh, 460px);
		max-height: clamp(280px, 56vh, 460px);
		min-height: clamp(280px, 56svh, 460px);
	}
}

.tw-single-related--band .tw-single-related__intro {
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
	text-align: left;
}

.tw-single-related--band .tw-single-related__intro .tw-home-kicker {
	margin-bottom: clamp(0.45rem, 1.2vw, 0.65rem);
	color: rgba(255, 255, 255, 0.72);
}

.tw-single-related--band .tw-single-related__intro .tw-home-kicker__line {
	background: rgba(255, 255, 255, 0.35);
}

.tw-single-related--band .tw-single-related__intro.tw-home-section__header--row {
	align-items: center;
}

.tw-single-related--band .tw-single-related__intro.tw-home-section__header--row > div:first-child {
	min-width: 0;
	flex: 1 1 auto;
}

.tw-single-related--band .tw-single-related__cta.tw-hero-btn--muted {
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: rgba(255, 255, 255, 0.92);
}

.tw-single-related--band .tw-single-related__cta--mobile {
	display: none;
}

.tw-single-related--band .tw-single-related__cta.tw-hero-btn--muted:hover,
.tw-single-related--band .tw-single-related__cta.tw-hero-btn--muted:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.38);
	color: #fff;
}

.tw-single-related--band .tw-single-related__intro .tw-home-heading--section {
	margin: 0;
	color: #fff;
	font-size: clamp(1.75rem, 5dvw, 2.75rem);
	line-height: 1.05;
	letter-spacing: 0.02em;
}

.tw-single-related--band .tw-single-related__cards-fx,
.tw-single-related--band .tw-single-related-carousel.tw-home-projects-carousel {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.tw-single-related__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(0.85rem, 2vw, 1.15rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 560px) {
	.tw-single-related__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.tw-single-related__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.tw-single-related__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(11rem, 28vw, 15rem);
	border-radius: clamp(12px, 2vw, 16px);
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	box-shadow: 0 12px 36px rgba(26, 26, 26, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.12);
	transition:
		transform 0.28s ease,
		box-shadow 0.28s ease;
}

.tw-single-related__card:hover,
.tw-single-related__card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 18px 44px rgba(26, 26, 26, 0.24);
	outline: none;
}

.tw-single-related__card-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
}

.tw-single-related__card-bg--placeholder {
	background: linear-gradient(135deg, rgba(77, 77, 77, 0.55) 0%, rgba(26, 26, 26, 0.9) 100%);
}

.tw-single-related__card-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		120deg,
		rgba(26, 26, 26, 0.88) 0%,
		rgba(77, 77, 77, 0.72) 45%,
		rgba(40, 40, 40, 0.65) 100%
	);
}

.tw-single-related__card-text {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	padding: clamp(1rem, 2.6vw, 1.35rem) clamp(1rem, 2.4vw, 1.2rem);
	padding-top: clamp(2rem, 5vw, 2.75rem);
}

.tw-single-related__card-sector {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.92;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.tw-single-related__card-title {
	margin: 0;
	font-size: clamp(0.95rem, 2vw, 1.05rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
	.tw-single-related__card {
		transition: none;
	}

	.tw-single-related__card:hover,
	.tw-single-related__card:focus-visible {
		transform: none;
	}

	.tw-home-project-card__link,
	.tw-archive-project-card__link {
		transition: none;
	}

	.tw-home-project-card__link:hover,
	.tw-home-project-card__link:focus-visible,
	.tw-archive-project-card__link:hover,
	.tw-archive-project-card__link:focus-visible {
		transform: none;
	}
}

/* Homepage / hero header: the top “Get in touch” button is removed at all widths;
   the menu now lives entirely behind the burger toggle (must follow .tw-hero-btn { display: inline-flex }). */
.tw-home-hero .tw-hero-home .tw-hero-header a.tw-hero-header__cta {
	display: none !important;
}

/* Homepage hero: fullscreen menu overlay (same footprint as the hero inner).
   Logo + burger stay visible above the panel; menu slots stay put while link
   text slides up from below each clip; panel fades + scales out on close. */
@keyframes tw-hero-menu-text-up {
	0% {
		transform: translate3d(0, 110%, 0);
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

.tw-home-hero .tw-hero-home {
	position: relative;
}

.tw-home-hero .tw-hero-header {
	position: relative;
	z-index: 52;
}

.tw-home-hero .tw-hero-logo,
.tw-home-hero .tw-hero-header .tw-primary-menu-toggle {
	position: relative;
	z-index: 53;
}

/* Homepage: menu lives inside the hero shell (not a body-level overlay) */
.tw-home-hero .tw-hero-home .tw-primary-menu {
	position: absolute;
	inset: 0;
	z-index: 40;
	border-radius: var(--tw-hero-inner-radius);
	overflow: hidden;
	transform: scale(0.98);
	transition:
		opacity 0.45s var(--tw-menu-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		transform 0.42s var(--tw-menu-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.tw-home-hero .tw-hero-home .tw-primary-menu.is-open:not(.is-closing) {
	transform: scale(1);
}

.tw-home-hero .tw-hero-home .tw-primary-menu__visual {
	border-radius: var(--tw-hero-inner-radius) 0 0 var(--tw-hero-inner-radius);
}

.tw-home-hero .tw-hero-home .tw-primary-menu__panel,
.tw-home-hero .tw-hero-home .tw-primary-menu__visual {
	height: 100%;
	min-height: 0;
}

.tw-home-hero .tw-hero-home .tw-primary-menu__panel {
	border-radius: 0 var(--tw-hero-inner-radius) var(--tw-hero-inner-radius) 0;
}

body.tw-primary-menu-open.tw-carpentry-home .tw-home-hero .tw-hero-header,
body.tw-primary-menu-closing.tw-carpentry-home .tw-home-hero .tw-hero-header {
	pointer-events: none;
	z-index: 56;
}

body.tw-primary-menu-open.tw-carpentry-home .tw-home-hero .tw-hero-home .tw-primary-menu,
body.tw-primary-menu-closing.tw-carpentry-home .tw-home-hero .tw-hero-home .tw-primary-menu {
	z-index: 55;
}

body.tw-primary-menu-open.tw-carpentry-home .tw-home-hero .tw-hero-header .tw-primary-menu-toggle,
body.tw-primary-menu-closing.tw-carpentry-home .tw-home-hero .tw-hero-header .tw-primary-menu-toggle {
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	z-index: 60;
}

body.tw-primary-menu-open.tw-carpentry-home .tw-home-hero .tw-hero-header__cta {
	visibility: hidden !important;
	pointer-events: none !important;
}

@media (min-width: 901px) {
	body.tw-primary-menu-open.tw-carpentry-home .tw-home-hero .tw-hero-header .tw-hero-logo {
		visibility: hidden !important;
		pointer-events: none !important;
	}
}

body.tw-primary-menu-open.tw-carpentry-home .tw-home-hero .tw-hero-body {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.28s ease;
}

/* First hover: skip hero intro delay so burger lines are visible for hover bounce (closed only) */
body.tw-menu-toggle-ready:not(.tw-primary-menu-open):not(.tw-primary-menu-closing)
	.tw-home-hero
	.tw-hero-header
	.tw-primary-menu-toggle {
	opacity: 1 !important;
	visibility: visible !important;
	animation: none !important;
}

body.tw-menu-toggle-ready:not(.tw-primary-menu-open):not(.tw-primary-menu-closing)
	.tw-home-hero
	.tw-hero-header
	.tw-primary-menu-toggle:not(.is-burger-hover-bounce)
	.tw-primary-menu-toggle__line {
	animation: none !important;
	opacity: 1 !important;
	transform: scaleX(1);
}

body.tw-menu-toggle-ready:not(.tw-primary-menu-open):not(.tw-primary-menu-closing)
	.tw-home-hero
	.tw-hero-header
	.tw-primary-menu-toggle:not(.is-burger-hover-bounce)
	.tw-primary-menu-toggle__line:nth-child(3) {
	width: 20px;
}

/* Cancel hero intro line keyframes once toggle is interaction-ready */
@media (prefers-reduced-motion: no-preference) {
	body.tw-menu-toggle-ready:not(.tw-primary-menu-open):not(.tw-primary-menu-closing)
		.tw-home-hero
		.tw-hero-header
		.tw-primary-menu-toggle__line:nth-child(2),
	body.tw-menu-toggle-ready:not(.tw-primary-menu-open):not(.tw-primary-menu-closing)
		.tw-home-hero
		.tw-hero-header
		.tw-primary-menu-toggle__line:nth-child(3),
	body.tw-menu-toggle-ready:not(.tw-primary-menu-open):not(.tw-primary-menu-closing)
		.tw-home-hero
		.tw-hero-header
		.tw-primary-menu-toggle__line:nth-child(4),
	body.tw-menu-interacted:not(.tw-primary-menu-open):not(.tw-primary-menu-closing)
		.tw-home-hero
		.tw-hero-header
		.tw-primary-menu-toggle__line:nth-child(2),
	body.tw-menu-interacted:not(.tw-primary-menu-open):not(.tw-primary-menu-closing)
		.tw-home-hero
		.tw-hero-header
		.tw-primary-menu-toggle__line:nth-child(3),
	body.tw-menu-interacted:not(.tw-primary-menu-open):not(.tw-primary-menu-closing)
		.tw-home-hero
		.tw-hero-header
		.tw-primary-menu-toggle__line:nth-child(4) {
		animation: none !important;
	}
}

/* Homepage hover bounce — lines only; beats hero intro + interacted rules */
body.tw-carpentry-home.tw-menu-toggle-ready:not(.tw-primary-menu-open):not(.tw-primary-menu-closing)
	.tw-home-hero
	.tw-hero-header
	.tw-primary-menu-toggle.is-burger-hover-bounce:not(.tw-primary-menu__close)[aria-expanded="false"]
	.tw-primary-menu-toggle__line {
	transition: none !important;
	transform-origin: left center !important;
	opacity: 1 !important;
}

body.tw-carpentry-home.tw-menu-toggle-ready:not(.tw-primary-menu-open):not(.tw-primary-menu-closing)
	.tw-home-hero
	.tw-hero-header
	.tw-primary-menu-toggle.is-burger-hover-bounce:not(.tw-primary-menu__close)[aria-expanded="false"]
	.tw-primary-menu-toggle__line:nth-child(2) {
	width: 28px !important;
	animation: tw-menu-burger-line-hover-bounce 0.62s cubic-bezier(0.34, 1.46, 0.64, 1) 0.04s both !important;
}

body.tw-carpentry-home.tw-menu-toggle-ready:not(.tw-primary-menu-open):not(.tw-primary-menu-closing)
	.tw-home-hero
	.tw-hero-header
	.tw-primary-menu-toggle.is-burger-hover-bounce:not(.tw-primary-menu__close)[aria-expanded="false"]
	.tw-primary-menu-toggle__line:nth-child(3) {
	width: 20px !important;
	animation: tw-menu-burger-line-hover-bounce 0.62s cubic-bezier(0.34, 1.46, 0.64, 1) 0.08s both !important;
}

body.tw-carpentry-home.tw-menu-toggle-ready:not(.tw-primary-menu-open):not(.tw-primary-menu-closing)
	.tw-home-hero
	.tw-hero-header
	.tw-primary-menu-toggle.is-burger-hover-bounce:not(.tw-primary-menu__close)[aria-expanded="false"]
	.tw-primary-menu-toggle__line:nth-child(4) {
	width: 28px !important;
	animation: tw-menu-burger-line-hover-bounce 0.62s cubic-bezier(0.34, 1.46, 0.64, 1) 0.12s both !important;
}

/* Menu open: header toggle morphs to X (beats hero intro line defaults) */
body.tw-primary-menu-open:not(.tw-primary-menu-closing)
	.tw-home-hero
	.tw-hero-header
	.tw-primary-menu-toggle:not(.tw-primary-menu__close)[aria-expanded="true"]
	.tw-primary-menu-toggle__line:nth-child(2) {
	width: 28px !important;
	opacity: 1 !important;
	transform: translateY(7.5px) rotate(45deg) !important;
}

body.tw-primary-menu-open:not(.tw-primary-menu-closing)
	.tw-home-hero
	.tw-hero-header
	.tw-primary-menu-toggle:not(.tw-primary-menu__close)[aria-expanded="true"]
	.tw-primary-menu-toggle__line:nth-child(3) {
	width: 28px !important;
	opacity: 0 !important;
	transform: scaleX(0) !important;
}

body.tw-primary-menu-open:not(.tw-primary-menu-closing)
	.tw-home-hero
	.tw-hero-header
	.tw-primary-menu-toggle:not(.tw-primary-menu__close)[aria-expanded="true"]
	.tw-primary-menu-toggle__line:nth-child(4) {
	width: 28px !important;
	opacity: 1 !important;
	transform: translateY(-7.5px) rotate(-45deg) !important;
}

/* After first menu use: cancel intro line keyframes; morph burger ↔ X smoothly on close/open. */
body.tw-menu-interacted .tw-home-hero .tw-hero-header .tw-primary-menu-toggle {
	opacity: 1 !important;
	visibility: visible !important;
	animation: none !important;
	transition:
		opacity 0.32s cubic-bezier(0.34, 1.46, 0.64, 1),
		color 0.28s ease;
}

body.tw-menu-interacted:not(.tw-primary-menu-closing):not(.tw-primary-menu-open)
	.tw-home-hero
	.tw-hero-header
	.tw-primary-menu-toggle:not(.tw-primary-menu__close):not(:hover):not(.is-burger-hover-bounce)
	.tw-primary-menu-toggle__line {
	animation: none !important;
	transform-origin: center center !important;
	transition:
		transform var(--tw-menu-toggle-morph-duration, 0.44s) var(--tw-menu-toggle-morph-ease, cubic-bezier(0.65, 0, 0.35, 1)),
		opacity 0.32s ease,
		width var(--tw-menu-toggle-morph-duration, 0.44s) var(--tw-menu-toggle-morph-ease, cubic-bezier(0.65, 0, 0.35, 1));
}

body.tw-menu-interacted.tw-primary-menu-open
	.tw-home-hero
	.tw-hero-header
	.tw-primary-menu-toggle:not(.tw-primary-menu__close)
	.tw-primary-menu-toggle__line,
body.tw-menu-interacted.tw-primary-menu-closing
	.tw-home-hero
	.tw-hero-header
	.tw-primary-menu-toggle:not(.tw-primary-menu__close)
	.tw-primary-menu-toggle__line {
	animation: none !important;
	transform-origin: center center !important;
	transition:
		transform var(--tw-menu-toggle-morph-duration, 0.44s) var(--tw-menu-toggle-morph-ease, cubic-bezier(0.65, 0, 0.35, 1)),
		opacity 0.32s ease,
		width var(--tw-menu-toggle-morph-duration, 0.44s) var(--tw-menu-toggle-morph-ease, cubic-bezier(0.65, 0, 0.35, 1)) !important;
}

body.tw-menu-interacted:not(.tw-primary-menu-closing):not(.tw-primary-menu-open)
	.tw-home-hero
	.tw-hero-header
	.tw-primary-menu-toggle:not(.tw-primary-menu__close)[aria-expanded="false"]:hover {
	color: #fff;
}

@media (max-width: 900px) {
	.tw-home-hero .tw-hero-home .tw-primary-menu__panel {
		width: 100%;
		padding: clamp(5.5rem, 16vh, 7.5rem) var(--tw-hero-pad-x-end) clamp(2rem, 6vh, 3rem)
			var(--tw-hero-pad-x);
		background: var(--tw-menu-dark, #16181c);
		border-radius: var(--tw-hero-inner-radius);
		transform: scale(0.96);
	}

	.tw-home-hero .tw-hero-home .tw-primary-menu.is-open:not(.is-closing) .tw-primary-menu__panel {
		transform: scale(1);
	}

	.tw-home-hero .tw-hero-home .tw-primary-menu__visual {
		display: none;
	}

	.tw-home-hero .tw-hero-home .tw-primary-menu__items {
		justify-content: center;
	}
}

.tw-home-hero .tw-hero-header .tw-primary-menu-toggle {
	display: inline-flex;
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	align-self: center;
	margin-inline-end: var(--tw-hero-content-gutter, 0);
}

/* Header toggle stays visible when open — hide duplicate close in the menu panel */
.tw-home-hero .tw-hero-home .tw-primary-menu__close {
	display: none;
}

@media (max-width: 900px) {
	/* Header already shows logo + close — hide empty mobile panel chrome */
	.tw-home-hero .tw-hero-home .tw-primary-menu__header {
		display: none;
	}
}

body.tw-menu-interacted
	.tw-home-hero
	.tw-hero-header
	.tw-primary-menu-toggle[aria-expanded="false"]:not(.is-burger-hover-bounce)
	.tw-primary-menu-toggle__line,
.tw-home-hero
	.tw-hero-header
	.tw-primary-menu-toggle[aria-expanded="false"]:hover:not(.is-burger-hover-bounce)
	.tw-primary-menu-toggle__line {
	transform-origin: center center;
}

/* Fullscreen menu stays hidden on load — only the burger animates in */
@media (prefers-reduced-motion: no-preference) {
	.tw-home-hero .tw-hero-home__inner > .tw-hero-nav {
		animation: none;
	}

	.tw-home-hero .tw-hero-home__inner > .tw-hero-nav:not(.is-open) .tw-hero-nav__menu li a,
	.tw-home-hero .tw-hero-home__inner > .tw-hero-nav:not(.is-open) .tw-hero-nav__menu li a::before {
		animation: none !important;
		clip-path: none;
	}
}

.tw-home-hero .tw-hero-home__inner > .tw-hero-nav {
	--tw-hero-menu-bounce: cubic-bezier(0.34, 1.46, 0.64, 1);
	--tw-hero-menu-close-ms: 0.32s;
	position: absolute;
	inset: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-height: none;
	z-index: 45;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: clamp(5.5rem, 16vh, 7.5rem) var(--tw-hero-pad-x-end) clamp(2rem, 6vh, 3rem) var(--tw-hero-pad-x);
	box-sizing: border-box;
	background: rgba(18, 18, 18, 0.68);
	border: none;
	border-radius: var(--tw-hero-inner-radius, 0);
	box-shadow: none;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	transform: scale(0.96);
	pointer-events: none;
	transition:
		opacity var(--tw-hero-menu-close-ms) ease,
		transform var(--tw-hero-menu-close-ms) ease,
		visibility 0s linear var(--tw-hero-menu-close-ms);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.tw-home-hero .tw-hero-home__inner > .tw-hero-nav.is-open {
	visibility: visible;
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
	max-height: none;
	transition:
		opacity 0.38s ease,
		transform 0.38s var(--tw-hero-menu-bounce),
		visibility 0s linear 0s;
}

.tw-home-hero .tw-hero-home__inner > .tw-hero-nav.is-open ~ .tw-hero-body {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.28s ease;
}

.tw-home-hero .tw-hero-home__inner > .tw-hero-nav .tw-hero-nav__menu {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 0;
	gap: clamp(0.5rem, 2.2vh, 1rem);
}

.tw-home-hero .tw-hero-nav__menu li {
	overflow: hidden;
	line-height: 1.15;
}

.tw-home-hero .tw-hero-nav__menu a {
	display: inline-block;
	padding-block: 0.2rem;
	padding-bottom: 0.2rem;
	/* 3× base menu size on desktop */
	font-size: clamp(4.05rem, 13.5vw, 6rem);
	font-weight: 800;
	line-height: 1.15;
	vertical-align: top;
	will-change: transform;
}

@media (min-width: 901px) {
	.tw-home-hero .tw-hero-home__inner > .tw-hero-nav .tw-hero-nav__menu {
		gap: clamp(0.85rem, 3.5vh, 2rem);
	}
}

.tw-home-hero .tw-hero-nav__menu a::after {
	display: none;
}

.tw-home-hero .tw-hero-nav__menu li a {
	opacity: 1;
	transform: translate3d(0, 110%, 0);
	clip-path: none;
}

.tw-home-hero .tw-hero-nav__menu li a::before {
	content: none;
	display: none;
}

.tw-home-hero .tw-hero-nav:not(.is-open) .tw-hero-nav__menu li a {
	animation: none !important;
	transform: translate3d(0, 110%, 0);
}

.tw-home-hero .tw-hero-nav.is-open .tw-hero-nav__menu li a {
	animation: tw-hero-menu-text-up 0.62s var(--tw-hero-menu-bounce) both;
}

.tw-home-hero .tw-hero-nav.is-open .tw-hero-nav__menu li:nth-child(1) a {
	animation-delay: 0.08s;
}

.tw-home-hero .tw-hero-nav.is-open .tw-hero-nav__menu li:nth-child(2) a {
	animation-delay: 0.16s;
}

.tw-home-hero .tw-hero-nav.is-open .tw-hero-nav__menu li:nth-child(3) a {
	animation-delay: 0.24s;
}

.tw-home-hero .tw-hero-nav.is-open .tw-hero-nav__menu li:nth-child(4) a {
	animation-delay: 0.32s;
}

.tw-home-hero .tw-hero-nav.is-open .tw-hero-nav__menu li:nth-child(5) a {
	animation-delay: 0.4s;
}

.tw-home-hero .tw-hero-nav.is-open .tw-hero-nav__menu li:nth-child(n + 6) a {
	animation-delay: 0.48s;
}

@media (prefers-reduced-motion: reduce) {
	.tw-home-hero .tw-hero-home__inner > .tw-hero-nav,
	.tw-home-hero .tw-hero-home__inner > .tw-hero-nav.is-open {
		transition-duration: 0.01ms;
	}

	.tw-home-hero .tw-hero-nav__menu li {
		overflow: visible;
	}

	.tw-home-hero .tw-hero-nav__menu li a,
	.tw-home-hero .tw-hero-home__inner > .tw-hero-nav.is-open .tw-hero-nav__menu li a {
		transform: none;
		animation: none !important;
	}
}

/* Override generic compact dropdown rules for the homepage hero menu */
@media (max-width: 900px) {
	.tw-home-hero .tw-hero-home__inner > .tw-hero-nav,
	.tw-home-hero .tw-hero-home__inner > .tw-hero-nav.is-open {
		grid-column: unset;
		grid-row: unset;
		justify-self: unset;
		align-self: unset;
		inset: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-height: none;
		padding-block: clamp(5.5rem, 16vh, 7.5rem) clamp(2rem, 6vh, 3rem);
		transform: scale(0.96);
	}

	.tw-home-hero .tw-hero-home__inner > .tw-hero-nav.is-open {
		transform: scale(1);
	}

	.tw-home-hero .tw-hero-home__inner > .tw-hero-nav .tw-hero-nav__menu {
		gap: clamp(0.65rem, 2.8vh, 1.35rem);
	}

	.tw-home-hero .tw-hero-nav__menu a {
		font-size: clamp(2.7rem, 9vw, 4rem);
	}
}

/* --- Latest news: image-backed insight cards --- */

.tw-home-section--news {
	font-family: "Manrope", var(--tw-font-sans, system-ui, sans-serif);
	color: var(--tw-color-text, #1a1a1a);
}

.tw-home-section__header--news {
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.tw-home-news-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tw-bento-gap);
	align-items: stretch;
}

.tw-home-news-card {
	--tw-card-active: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: clamp(14rem, 28vw, 18rem);
	padding: 0;
	overflow: hidden;
	background: rgba(26, 26, 26, 0.35);
	border: 1px solid rgba(255, 255, 255, calc(0.12 + 0.1 * var(--tw-card-active, 0)));
	box-shadow:
		0 calc(8px + 4px * var(--tw-card-active, 0)) calc(24px + 12px * var(--tw-card-active, 0))
			rgba(18, 20, 26, calc(0.16 + 0.1 * var(--tw-card-active, 0)));
	transition:
		--tw-card-active 0.45s cubic-bezier(0.33, 1, 0.68, 1),
		transform 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}

.tw-home-news-card--featured {
	min-height: clamp(18rem, 38vw, 26rem);
}

.tw-home-news-card:hover,
.tw-home-news-card:focus-within,
.tw-home-news-card.is-card-touch {
	--tw-card-active: 1;
	transform: translateY(-3px);
}

.tw-home-news-card__link {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: flex-end;
	min-height: inherit;
	height: 100%;
	text-decoration: none;
	color: #fff;
}

.tw-home-news-card__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transform: scale(calc(1 + 0.08 * var(--tw-card-active, 0)));
	transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}

.tw-home-news-card__bg--placeholder {
	background: linear-gradient(135deg, rgba(77, 77, 77, 0.55) 0%, rgba(26, 26, 26, 0.92) 100%);
}

.tw-home-news-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			to top,
			rgba(10, 10, 10, 0.96) 0%,
			rgba(16, 16, 16, 0.88) 28%,
			rgba(22, 22, 22, 0.72) 52%,
			rgba(26, 26, 26, 0.55) 72%,
			rgba(30, 30, 30, 0.38) 100%
		),
		linear-gradient(
			120deg,
			rgba(16, 16, 16, 0.62) 0%,
			rgba(40, 40, 40, 0.42) 48%,
			rgba(22, 22, 22, 0.38) 100%
		);
	opacity: calc(0.9 + 0.08 * var(--tw-card-active, 0));
	transition: opacity 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

.tw-home-news-card__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.55rem;
	width: 100%;
	overflow: hidden;
	padding: clamp(1.15rem, 2.6vw, 1.55rem) clamp(1.15rem, 2.6vw, 1.6rem) clamp(1.45rem, 3.2vw, 2rem);
}

.tw-home-news-card__stack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	margin-top: auto;
}

.tw-home-news-card__date {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.tw-home-news-card__title {
	margin: 0;
	font-size: clamp(1.05rem, 1.9vw, 1.28rem);
	font-weight: 800;
	line-height: 1.28;
	letter-spacing: -0.01em;
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
	transform: translate3d(
		0,
		calc(0.45rem * (1 - var(--tw-card-active, 0)) - 1.35rem * var(--tw-card-active, 0)),
		0
	);
	transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

.tw-home-news-card--featured .tw-home-news-card__title {
	font-size: clamp(1.35rem, 2.8vw, 1.85rem);
	transform: translate3d(
		0,
		calc(0.55rem * (1 - var(--tw-card-active, 0)) - 1.55rem * var(--tw-card-active, 0)),
		0
	);
}

.tw-home-news-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	max-height: calc(var(--tw-card-active, 0) * 2.5rem);
	overflow: hidden;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	opacity: var(--tw-card-active, 0);
	transform: translate3d(0, calc((1 - var(--tw-card-active, 0)) * 0.85rem), 0);
	transition:
		opacity 0.45s cubic-bezier(0.33, 1, 0.68, 1),
		transform 0.45s cubic-bezier(0.33, 1, 0.68, 1),
		max-height 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

.tw-home-news-card__cta-icon {
	font-size: 0.62rem;
	transition: transform 0.25s ease;
}

.tw-home-news-card:hover .tw-home-news-card__cta-icon,
.tw-home-news-card:focus-within .tw-home-news-card__cta-icon,
.tw-home-news-card.is-card-touch .tw-home-news-card__cta-icon {
	transform: translateX(3px);
}

/* Insights archive */
.tw-archive-insights {
	background: var(--tw-color-surface, #ffffff);
}

.tw-archive-insights__featured {
	margin-bottom: var(--tw-bento-gap);
}

.tw-archive-insights__featured .tw-home-news-card {
	width: 100%;
}

.tw-archive-insights__grid {
	margin-bottom: clamp(2rem, 5vw, 3rem);
}

.tw-archive-insights__empty {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--tw-color-muted, #5c5c5c);
}

.tw-archive-insights .pagination,
.tw-archive-insights .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 0.75rem;
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.tw-archive-insights .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	border: 1px solid var(--tw-color-border, #e7e9ec);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--tw-heading-color);
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tw-archive-insights .page-numbers:hover,
.tw-archive-insights .page-numbers:focus-visible {
	border-color: rgba(26, 26, 26, 0.22);
	background: rgba(26, 26, 26, 0.04);
}

.tw-archive-insights .page-numbers.current {
	border-color: rgba(26, 26, 26, 0.85);
	background: rgba(26, 26, 26, 0.92);
	color: #fff;
}

/* Single insight — half-viewport photo hero + content below */
.tw-archive-projects--insight-single {
	padding-top: 0;
}

.tw-archive-projects--insight-single .tw-insight-single__article {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.tw-insight-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	max-width: none;
	min-height: var(--tw-insight-hero-min, 50vh);
	margin: 0;
	box-sizing: border-box;
	border-radius: 0;
	overflow: hidden;
	isolation: isolate;
	color: #fff;
}

@supports (height: 100svh) {
	.tw-insight-hero {
		min-height: var(--tw-insight-hero-min, 50svh);
	}
}

.tw-insight-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: rgba(26, 26, 26, 0.35);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.tw-insight-hero--placeholder .tw-insight-hero__bg {
	background-color: #e4e6ea;
	background-image: linear-gradient(
		145deg,
		#ececee 0%,
		#e2e4e8 42%,
		#d4d8de 100%
	);
}

.tw-insight-hero--placeholder .tw-insight-hero__overlay {
	background:
		linear-gradient(
			to top,
			rgba(36, 38, 42, 0.82) 0%,
			rgba(46, 48, 52, 0.52) 38%,
			rgba(56, 58, 62, 0.22) 72%,
			rgba(66, 68, 72, 0.08) 100%
		);
	opacity: 1;
}

.tw-insight-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(
			to top,
			rgba(16, 16, 16, 0.92) 0%,
			rgba(26, 26, 26, 0.72) 34%,
			rgba(40, 40, 40, 0.42) 62%,
			rgba(40, 40, 40, 0.18) 78%,
			transparent 88%
		),
		linear-gradient(
			120deg,
			rgba(26, 26, 26, 0.66) 0%,
			rgba(77, 77, 77, 0.48) 45%,
			rgba(40, 40, 40, 0.44) 100%
		);
	pointer-events: none;
}

.tw-insight-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: stretch;
	width: 100%;
	min-height: inherit;
	padding:
		calc(var(--tw-inner-header-offset, 5.5rem) + env(safe-area-inset-top, 0px))
		calc(var(--tw-frame-inset, 14px) + var(--tw-hero-pad-x, 1.35rem))
		clamp(1.75rem, 4.5vw, 3rem);
	box-sizing: border-box;
}

.tw-insight-hero__copy {
	width: 100%;
	max-width: 44rem;
}

.tw-insight-hero__kicker {
	margin-bottom: clamp(0.55rem, 1.4vw, 0.75rem);
	color: rgba(255, 255, 255, 0.72);
}

.tw-insight-hero__kicker .tw-home-kicker__line {
	background: rgba(255, 255, 255, 0.55);
}

body.tw-has-photo-hero .tw-insight-hero__title.page-title {
	margin: 0 0 clamp(0.45rem, 1.2vw, 0.65rem);
	font-size: clamp(1.85rem, 4.8vw, 3rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: #fff;
	text-align: left;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

body.tw-has-photo-hero .tw-insight-hero__title.page-title .tw-fx-word {
	color: #fff;
}

.tw-insight-hero__subtitle {
	margin: 0;
	max-width: 42rem;
	font-size: clamp(0.95rem, 1.6vw, 1.1rem);
	font-weight: 500;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}

.tw-insight-hero__date {
	margin: 0;
	font-size: clamp(0.95rem, 1.6vw, 1.05rem);
	font-weight: 500;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.78);
}

body.tw-has-photo-hero .tw-insight-single__body,
.tw-archive-projects--insight-single .tw-insight-single__body {
	padding-top: clamp(2rem, 5vw, 3.5rem);
	padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

.tw-insight-single__content {
	margin-bottom: clamp(2rem, 5vw, 3rem);
	max-width: 42rem;
}

.tw-insight-single__content h2 {
	margin: clamp(1.75rem, 4vw, 2.25rem) 0 0.75rem;
	font-size: clamp(1.2rem, 2.2vw, 1.45rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--tw-heading-color);
}

.tw-insight-single__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

@media (max-width: 1024px) {
	.tw-home-news-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.tw-home-news-grid {
		grid-template-columns: 1fr;
	}

	.tw-home-news-card--featured {
		min-height: clamp(16rem, 62vw, 22rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tw-home-news-card,
	.tw-home-news-card__bg,
	.tw-home-news-card__overlay,
	.tw-home-news-card__title,
	.tw-home-news-card__cta,
	.tw-home-news-card__cta-icon {
		transition: none;
	}

	.tw-home-news-card:hover,
	.tw-home-news-card:focus-within,
	.tw-home-news-card.is-card-touch {
		transform: none;
	}

	.tw-home-news-card:focus-within {
		--tw-card-active: 1;
	}
}