/**
 * Taylor Williams Roofing — modern clean theme refresh (2026).
 *
 * Loads last so token + polish overrides win site-wide. Keeps the existing
 * monochrome grey/charcoal identity but makes it lighter, calmer and more
 * refined: airier page field, hairline borders, soft diffuse shadows,
 * antialiased type, tighter heading tracking and consistent focus states.
 */

/* ---------------------------------------------------------------------------
 * Token overrides that must beat home-hero.css :root (loaded after it)
 * ------------------------------------------------------------------------- */
:root {
	/* Light section cards: clean white surfaces on the soft grey page field */
	--tw-bento-cell-bg: var(--tw-color-surface, #ffffff);
	--tw-bento-cell-border: 1px solid rgba(18, 20, 26, 0.06);
	--tw-bento-cell-shadow: 0 1px 2px rgba(18, 20, 26, 0.04), 0 14px 34px rgba(18, 20, 26, 0.06);
	--tw-bento-radius: clamp(16px, 2.6vw, 22px);

	/* Slightly tighter, more even hero overlay so photos read cleaner */
	--tw-hero-photo-overlay-opacity: 0.9;
}

/* ---------------------------------------------------------------------------
 * Global typography + rendering polish
 * ------------------------------------------------------------------------- */
body {
	background-color: var(--tw-color-bg, #f4f5f6);
	color: var(--tw-color-text, #16181c);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern" 1, "liga" 1;
}

:where(h1, h2, h3, h4, h5, h6) {
	letter-spacing: -0.02em;
}

::selection {
	background: var(--tw-color-accent, #16181c);
	color: #ffffff;
}

/* ---------------------------------------------------------------------------
 * Custom scrollbar — slim monochrome pill (site-wide)
 * ------------------------------------------------------------------------- */
html,
body,
.tw-section-overlay__scroll,
.tw-contact-overlay__body,
.tw-hero-home__inner {
	scrollbar-width: thin;
	scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.tw-section-overlay__scroll::-webkit-scrollbar,
.tw-contact-overlay__body::-webkit-scrollbar,
.tw-hero-home__inner::-webkit-scrollbar {
	width: var(--tw-scrollbar-size, 7px);
	height: var(--tw-scrollbar-size, 7px);
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.tw-section-overlay__scroll::-webkit-scrollbar-track,
.tw-contact-overlay__body::-webkit-scrollbar-track,
.tw-hero-home__inner::-webkit-scrollbar-track {
	background: var(--tw-scrollbar-track);
	border-radius: 999px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.tw-section-overlay__scroll::-webkit-scrollbar-thumb,
.tw-contact-overlay__body::-webkit-scrollbar-thumb,
.tw-hero-home__inner::-webkit-scrollbar-thumb {
	background-color: var(--tw-scrollbar-thumb);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.tw-section-overlay__scroll::-webkit-scrollbar-thumb:hover,
.tw-contact-overlay__body::-webkit-scrollbar-thumb:hover,
.tw-hero-home__inner::-webkit-scrollbar-thumb:hover {
	background-color: var(--tw-scrollbar-thumb-hover);
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
.tw-section-overlay__scroll::-webkit-scrollbar-thumb:active,
.tw-contact-overlay__body::-webkit-scrollbar-thumb:active,
.tw-hero-home__inner::-webkit-scrollbar-thumb:active {
	background-color: var(--tw-scrollbar-thumb-active);
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
	background: var(--tw-scrollbar-corner);
}

/* Dark panels — menu overlay */
.tw-primary-menu__panel {
	--tw-scrollbar-track: rgba(255, 255, 255, 0.06);
	--tw-scrollbar-thumb: rgba(255, 255, 255, 0.2);
	--tw-scrollbar-thumb-hover: rgba(255, 255, 255, 0.38);
	--tw-scrollbar-thumb-active: rgba(255, 255, 255, 0.52);
}

/* Consistent, accessible focus ring across interactive elements */
:where(a, button, [role="button"], input, select, textarea):focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: var(--tw-focus-ring, 0 0 0 3px rgba(22, 24, 28, 0.2));
	border-radius: var(--tw-radius-sm, 8px);
}

/* ---------------------------------------------------------------------------
 * Buttons — smoother transitions + subtle hover lift on solid CTAs
 * ------------------------------------------------------------------------- */
.tw-hero-btn {
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		filter 0.15s ease,
		transform 0.18s ease,
		box-shadow 0.2s ease;
}

.tw-hero-btn--accent:hover,
.tw-hero-btn--accent:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(18, 20, 26, 0.18);
}

@media (prefers-reduced-motion: reduce) {
	.tw-hero-btn {
		transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	}

	.tw-hero-btn--accent:hover,
	.tw-hero-btn--accent:focus-visible {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * Cards / surfaces — hairline borders + soft elevation (airier, calmer)
 * ------------------------------------------------------------------------- */
.tw-archive-project-card,
.tw-inner-card,
.tw-single-project__article {
	border: 1px solid var(--tw-color-border, #e7e9ec);
	box-shadow: var(--tw-shadow, 0 1px 2px rgba(18, 20, 26, 0.04), 0 10px 28px rgba(18, 20, 26, 0.06));
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tw-archive-project-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--tw-shadow-lg, 0 2px 6px rgba(18, 20, 26, 0.05), 0 22px 52px rgba(18, 20, 26, 0.1));
	border-color: var(--tw-color-border-strong, #d8dadf);
}

/* Landing service tiles — match the refreshed card language */
.tw-landing-grid__item a {
	border: 1px solid var(--tw-color-border, #e7e9ec);
	box-shadow: var(--tw-shadow-sm, 0 1px 2px rgba(18, 20, 26, 0.04), 0 3px 10px rgba(18, 20, 26, 0.05));
	border-radius: var(--tw-radius, 12px);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tw-landing-grid__item a:hover {
	transform: translateY(-2px);
	box-shadow: var(--tw-shadow, 0 1px 2px rgba(18, 20, 26, 0.04), 0 10px 28px rgba(18, 20, 26, 0.06));
	border-color: var(--tw-color-border-strong, #d8dadf);
}

/* Pill filters — softer hairline + smooth state change */
.tw-archive-projects__filter {
	border: 1px solid var(--tw-color-border-strong, #d8dadf);
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* Breadcrumbs — slightly quieter to keep inner pages calm */
.tw-breadcrumbs {
	color: var(--tw-color-muted, #656a72);
}

@media (max-width: 899px) {
	body.tw-carpentry-inner:not(.tw-has-photo-hero) .tw-breadcrumbs-bar {
		padding-block: clamp(0.4rem, 1.1vw, 0.55rem) 0;
		border-bottom: none;
		box-shadow: none;
	}

	body.tw-has-photo-hero .tw-breadcrumbs-bar--below-hero .tw-breadcrumbs-bar__inner {
		min-height: clamp(2rem, 5.5vw, 2.35rem);
		padding-block: clamp(0.3rem, 0.85vw, 0.45rem);
	}

	body.tw-has-photo-hero .tw-breadcrumbs-bar__graphic {
		width: clamp(5.25rem, 22vw, 7rem);
		height: clamp(1.45rem, 4vw, 1.85rem);
	}

	.tw-breadcrumbs {
		font-size: 0.65rem;
		line-height: 1.35;
		letter-spacing: 0.02em;
	}

	.tw-breadcrumbs__list {
		gap: 0.15rem 0.3rem;
	}

	.tw-breadcrumbs__item:not(:last-child)::after {
		margin-left: 0.3rem;
		opacity: 0.38;
	}
}

/* ---------------------------------------------------------------------------
 * Home hero — remove the glass panels so the headline copy and contact icons
 * sit cleanly over the photo (40+ stat card removed in the template).
 * ------------------------------------------------------------------------- */
.tw-home-hero .tw-hero-bento__cell--headline .tw-hero-copy,
.tw-home-hero .tw-hero-bento__icons-wrap,
.tw-home-hero .tw-hero-bento__cell--headline .tw-hero-copy:hover,
.tw-home-hero .tw-hero-bento__icons-wrap:hover {
	background: transparent;
	border: none;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transform: none;
}

/* Shared horizontal inset: base pad + content gutter on both sides */
.tw-home-hero {
	--tw-hero-content-gutter: clamp(1.15rem, 2.5vw, 1.75rem);
	--tw-hero-pad-x: max(
		calc(var(--tw-hero-pad) + var(--tw-hero-content-gutter)),
		env(safe-area-inset-left, 0px)
	);
	--tw-hero-pad-x-end: max(
		calc(var(--tw-hero-pad) + var(--tw-hero-content-gutter)),
		env(safe-area-inset-right, 0px)
	);
}

/* Bottom inset matches the side rhythm */
.tw-home-hero .tw-hero-home__inner {
	padding-bottom: max(var(--tw-hero-pad-x), env(safe-area-inset-bottom, 0px));
}

/* Push the contact icons to the bottom-right of the hero, subtitle above */
.tw-home-hero .tw-hero-bento__column--stat {
	justify-content: flex-end;
}

.tw-home-hero .tw-hero-bento__icons-wrap {
	padding: 0;
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: clamp(0.5rem, 1.2vw, 0.7rem);
}

.tw-home-hero .tw-hero-bento__icons-wrap .tw-hero-aside {
	width: auto;
	justify-content: flex-end;
}

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

/* Tablet / mid-width stacked hero: keep Get connected on the right. */
@media (min-width: 821px) and (max-width: 1000px) {
	.tw-home-hero .tw-hero-bento__column--stat {
		align-items: flex-end;
	}
}

/* Subtitle matches the hero "Free quotes" kicker (kicker classes handle the rest) */
.tw-home-hero .tw-hero-social-label {
	margin: 0;
	color: rgba(255, 255, 255, 0.62);
}

/* Mobile hero: balanced frame/padding + bottom-left “Get connected” block */
@media (max-width: 820px) {
	.tw-home-hero {
		--tw-frame-inset: clamp(10px, 2.5vw, 12px);
		--tw-hero-pad: clamp(1.2rem, 5vw, 1.5rem);
		--tw-hero-radius: clamp(18px, 4.5vw, 24px);
		--tw-hero-content-gutter: clamp(1rem, 4vw, 1.25rem);
	}

	.tw-home-hero .tw-hero-header {
		margin-bottom: 0;
		padding-bottom: clamp(0.65rem, 2.8vw, 1rem);
	}

	/* Copy centred in the hero; equal space above/below; get connected on last row */
	.tw-home-hero .tw-hero-body.tw-hero-bento {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr) auto;
		align-items: start;
		flex: 1 1 auto;
		min-height: 0;
		margin-top: 0;
		padding-top: 0;
		gap: 0;
	}

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

	.tw-home-hero .tw-hero-bento__cell--headline .tw-hero-copy {
		flex: none;
		flex-grow: 0;
		height: auto;
		min-height: 0;
		padding: 0;
		justify-content: flex-start;
	}

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

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

	.tw-home-hero .tw-hero-bento__icons-wrap {
		align-items: flex-start;
		margin-top: 0;
		padding: 0;
	}

	.tw-home-hero .tw-hero-header .tw-primary-menu-toggle {
		margin-inline-end: 0;
	}

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

	.tw-home-hero .tw-hero-social-label,
	.tw-home-hero .tw-hero-kicker--right.tw-hero-social-label {
		justify-content: flex-start;
		text-align: left;
		margin-top: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Why choose us — standalone photo tiles woven into the bento mosaic
 *
 * Desktop mosaic (12-col):
 *   [ Lead (4×2) ]        [ Photo A ] [ Card 1 ]
 *                         [ Card 2 ]  [ Photo B ]
 *   [ Card 3 ]            [ Photo C ] [ Card 4 ]
 * ------------------------------------------------------------------------- */
.tw-home-whyus-bento--mosaic {
	grid-template-rows: repeat(3, minmax(clamp(7.5rem, 14vw, 10rem), auto));
}

.tw-home-whyus-bento--mosaic .tw-home-whyus-lead {
	grid-column: 1 / span 4;
	grid-row: 1 / span 2;
}

/* 20+ lead tile — decorative roofline SVG (replaces photo background). */
.tw-home-whyus-lead--graphic {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.tw-home-whyus-lead__graphic {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	pointer-events: none;
	color: rgba(255, 255, 255, 0.9);
}

.tw-home-whyus-lead__graphic svg {
	width: min(112%, 26rem);
	height: auto;
	margin: 0 -6% -4% 0;
	opacity: 0.55;
	transform: translateY(4%);
}

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

.tw-home-whyus-bento--mosaic .tw-home-whyus-photo--a {
	grid-column: 5 / span 4;
	grid-row: 1;
}

.tw-home-whyus-bento--mosaic .tw-home-whyus-card--1 {
	grid-column: 9 / span 4;
	grid-row: 1;
}

.tw-home-whyus-bento--mosaic .tw-home-whyus-card--2 {
	grid-column: 5 / span 4;
	grid-row: 2;
}

.tw-home-whyus-bento--mosaic .tw-home-whyus-photo--b {
	grid-column: 9 / span 4;
	grid-row: 2;
}

.tw-home-whyus-bento--mosaic .tw-home-whyus-card--3 {
	grid-column: 1 / span 4;
	grid-row: 3;
}

.tw-home-whyus-bento--mosaic .tw-home-whyus-photo--c {
	grid-column: 5 / span 4;
	grid-row: 3;
}

.tw-home-whyus-bento--mosaic .tw-home-whyus-card--4 {
	grid-column: 9 / span 4;
	grid-row: 3;
}

/* Trust cards — grey theme (matches 20+ lead tile graphic + white type) */
.tw-home-whyus-bento--mosaic .tw-home-whyus-card.tw-bento-cell--dark.tw-home-whyus-card--graphic {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	text-align: left;
	align-items: flex-start;
	color: #fff;
}

.tw-home-whyus-card__graphic {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	pointer-events: none;
	color: rgba(255, 255, 255, 0.9);
}

.tw-home-whyus-card__graphic svg {
	width: min(128%, 17rem);
	height: auto;
	margin: 0 -8% -8% 0;
	opacity: 0.5;
	transform: translateY(6%);
}

.tw-home-whyus-card__icon-bg {
	position: absolute;
	top: 50%;
	right: clamp(0.35rem, 3.5vw, 1rem);
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(4.5rem, 13vw, 6.75rem);
	line-height: 1;
	color: rgba(255, 255, 255, 0.16);
	filter: blur(3px);
	transform: translateY(-46%);
	pointer-events: none;
}

.tw-home-whyus-card--graphic .tw-home-whyus-card__icon,
.tw-home-whyus-card--graphic .tw-home-whyus-card__title,
.tw-home-whyus-card--graphic .tw-home-whyus-card__text {
	position: relative;
	z-index: 1;
}

.tw-home-whyus-bento--mosaic .tw-home-whyus-card.tw-bento-cell--dark .tw-home-whyus-card__icon {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.tw-home-whyus-bento--mosaic .tw-home-whyus-card.tw-bento-cell--dark .tw-home-whyus-card__title,
.tw-home-whyus-bento--mosaic .tw-home-whyus-card.tw-bento-cell--dark .tw-home-whyus-card__text {
	color: #fff;
}

.tw-home-whyus-bento--mosaic .tw-home-whyus-card.tw-bento-cell--dark:hover,
.tw-home-whyus-bento--mosaic .tw-home-whyus-card.tw-bento-cell--dark:focus-within {
	border-color: rgba(255, 255, 255, 0.16);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

/* Why-us roofline graphic — draw in on show, hold, draw out */
.tw-whyus-graphic .tw-whyus-graphic__line {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.tw-whyus-graphic .tw-whyus-graphic__dot {
	opacity: 0;
}

.tw-whyus-graphic.is-drawn .tw-whyus-graphic__line {
	animation: tw-whyus-graphic-draw var(--tw-whyus-draw-duration, 2.35s) ease-out forwards;
}

.tw-whyus-graphic.is-drawn .tw-whyus-graphic__line--1 { animation-delay: 0s; }
.tw-whyus-graphic.is-drawn .tw-whyus-graphic__line--2 { animation-delay: calc(0.1s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawn .tw-whyus-graphic__line--3 { animation-delay: calc(0.2s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawn .tw-whyus-graphic__line--4 { animation-delay: calc(0.28s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawn .tw-whyus-graphic__line--5 { animation-delay: calc(0.36s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawn .tw-whyus-graphic__line--6 { animation-delay: calc(0.44s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawn .tw-whyus-graphic__line--7 { animation-delay: calc(0.5s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawn .tw-whyus-graphic__line--8 { animation-delay: calc(0.58s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawn .tw-whyus-graphic__line--9 { animation-delay: calc(0.64s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawn .tw-whyus-graphic__line--10 { animation-delay: calc(0.7s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawn .tw-whyus-graphic__line--11 { animation-delay: calc(0.76s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawn .tw-whyus-graphic__line--12 { animation-delay: calc(0.82s * var(--tw-whyus-delay-scale, 1)); }

.tw-whyus-graphic.is-drawn .tw-whyus-graphic__dot {
	animation: tw-whyus-graphic-dot-in var(--tw-whyus-dot-duration, 0.9s) ease forwards;
}

.tw-whyus-graphic.is-drawn .tw-whyus-graphic__dot--1 { animation-delay: calc(1.35s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawn .tw-whyus-graphic__dot--2 { animation-delay: calc(1.5s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawn .tw-whyus-graphic__dot--3 { animation-delay: calc(1.62s * var(--tw-whyus-delay-scale, 1)); }

.tw-whyus-graphic.is-held .tw-whyus-graphic__line {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	animation: none;
}

.tw-whyus-graphic.is-held .tw-whyus-graphic__line--12 {
	stroke-dasharray: 3 7;
}

.tw-whyus-graphic.is-held .tw-whyus-graphic__dot {
	opacity: var(--tw-whyus-dot-opacity, 0.15);
	animation: none;
}

.tw-whyus-graphic.is-drawing-out .tw-whyus-graphic__line {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	animation: tw-whyus-graphic-draw-out var(--tw-whyus-draw-duration, 2.35s) ease-out forwards;
}

.tw-whyus-graphic.is-drawing-out .tw-whyus-graphic__line--1 { animation-delay: 0s; }
.tw-whyus-graphic.is-drawing-out .tw-whyus-graphic__line--2 { animation-delay: calc(0.1s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawing-out .tw-whyus-graphic__line--3 { animation-delay: calc(0.2s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawing-out .tw-whyus-graphic__line--4 { animation-delay: calc(0.28s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawing-out .tw-whyus-graphic__line--5 { animation-delay: calc(0.36s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawing-out .tw-whyus-graphic__line--6 { animation-delay: calc(0.44s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawing-out .tw-whyus-graphic__line--7 { animation-delay: calc(0.5s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawing-out .tw-whyus-graphic__line--8 { animation-delay: calc(0.58s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawing-out .tw-whyus-graphic__line--9 { animation-delay: calc(0.64s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawing-out .tw-whyus-graphic__line--10 { animation-delay: calc(0.7s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawing-out .tw-whyus-graphic__line--11 { animation-delay: calc(0.76s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawing-out .tw-whyus-graphic__line--12 { animation-delay: calc(0.82s * var(--tw-whyus-delay-scale, 1)); }

.tw-whyus-graphic.is-drawing-out .tw-whyus-graphic__dot {
	opacity: var(--tw-whyus-dot-opacity, 0.15);
	animation: tw-whyus-graphic-dot-out var(--tw-whyus-dot-duration, 0.9s) ease forwards;
}

.tw-whyus-graphic.is-drawing-out .tw-whyus-graphic__dot--1 { animation-delay: 0s; }
.tw-whyus-graphic.is-drawing-out .tw-whyus-graphic__dot--2 { animation-delay: calc(0.05s * var(--tw-whyus-delay-scale, 1)); }
.tw-whyus-graphic.is-drawing-out .tw-whyus-graphic__dot--3 { animation-delay: calc(0.1s * var(--tw-whyus-delay-scale, 1)); }

@keyframes tw-whyus-graphic-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes tw-whyus-graphic-draw-out {
	to {
		stroke-dashoffset: -1;
		opacity: 0;
	}
}

@keyframes tw-whyus-graphic-dot-in {
	to {
		opacity: var(--tw-whyus-dot-opacity, 0.15);
	}
}

@keyframes tw-whyus-graphic-dot-out {
	to {
		opacity: 0;
	}
}

.tw-whyus-graphic__dot--1 { --tw-whyus-dot-opacity: 0.18; }
.tw-whyus-graphic__dot--2 { --tw-whyus-dot-opacity: 0.12; }
.tw-whyus-graphic__dot--3 { --tw-whyus-dot-opacity: 0.1; }

.tw-whyus-graphic.is-static .tw-whyus-graphic__line {
	stroke-dashoffset: 0;
	animation: none;
}

.tw-whyus-graphic.is-static .tw-whyus-graphic__line--12 {
	stroke-dasharray: 3 7;
}

.tw-whyus-graphic.is-static .tw-whyus-graphic__dot {
	opacity: var(--tw-whyus-dot-opacity, 0.15);
	animation: none;
}

.tw-whyus-graphic.is-lines-complete .tw-whyus-graphic__line--12 {
	stroke-dasharray: 3 7;
}

@media (prefers-reduced-motion: reduce) {
	.tw-whyus-graphic .tw-whyus-graphic__line {
		stroke-dashoffset: 0;
		animation: none !important;
	}

	.tw-whyus-graphic .tw-whyus-graphic__line--12 {
		stroke-dasharray: 3 7;
	}

	.tw-whyus-graphic .tw-whyus-graphic__dot {
		opacity: var(--tw-whyus-dot-opacity, 0.15);
		animation: none !important;
	}
}

.tw-home-whyus-photo {
	position: relative;
	isolation: isolate;
	padding: 0;
	overflow: hidden;
	min-height: 0;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--tw-color-border, #e7e9ec);
	box-shadow: var(--tw-shadow-sm, 0 1px 2px rgba(18, 20, 26, 0.04), 0 3px 10px rgba(18, 20, 26, 0.05));
	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-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	pointer-events: none;
	background:
		linear-gradient(
			180deg,
			rgba(22, 24, 28, 0.28) 0%,
			rgba(22, 24, 28, 0.52) 100%
		);
	transition: opacity 0.4s ease;
}

.tw-home-whyus-photo__bg {
	width: 100%;
	height: 100%;
	min-height: inherit;
	background-color: var(--tw-color-border, #e7e9ec);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}

.tw-home-whyus-photo:hover::after,
.tw-home-whyus-photo:focus-within::after {
	opacity: 0.72;
}

.tw-home-whyus-photo:hover,
.tw-home-whyus-photo:focus-within {
	transform: translateY(-3px);
	border-color: var(--tw-color-border-strong, #d8dadf);
	box-shadow: var(--tw-shadow, 0 1px 2px rgba(18, 20, 26, 0.04), 0 10px 28px rgba(18, 20, 26, 0.06));
}

.tw-home-whyus-photo:hover .tw-home-whyus-photo__bg,
.tw-home-whyus-photo:focus-within .tw-home-whyus-photo__bg {
	transform: scale(1.05);
}

@media (max-width: 1000px) {
	.tw-home-section--whyus .tw-home-section__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(1rem, 3vw, 1.5rem);
		min-width: 0;
		overflow-x: clip;
		container-type: inline-size;
		container-name: tw-whyus;
		/* Full content width on mobile — cards span the section inner. */
		--tw-whyus-cell-w: 100%;
	}

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

	.tw-home-section--whyus .tw-home-section__header--whyus > div:first-child {
		grid-row: 1;
	}

	.tw-home-section--whyus .tw-home-whyus-bento--mosaic {
		grid-row: 2;
	}

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

	.tw-home-whyus-bento--mosaic {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-auto-rows: auto;
		width: 100%;
		min-width: 0;
		justify-items: stretch;
	}

	/* Interleave cards + photos: card / image / card / image … */
	.tw-home-whyus-bento--mosaic > :is(
		.tw-home-whyus-lead,
		.tw-home-whyus-card,
		.tw-home-whyus-photo
	) {
		grid-column: 1 / -1;
		grid-row: auto;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		justify-self: stretch;
		align-self: start;
		box-sizing: border-box;
	}

	.tw-home-whyus-bento--mosaic .tw-home-whyus-lead {
		padding: clamp(1.45rem, 5.5vw, 1.85rem) clamp(1.35rem, 5vw, 1.75rem);
	}

	.tw-home-whyus-bento--mosaic .tw-home-whyus-lead {
		order: 1;
		grid-column: 1 / -1;
	}

	.tw-home-whyus-bento--mosaic .tw-home-whyus-card--1 { order: 2; }
	.tw-home-whyus-bento--mosaic .tw-home-whyus-photo--a { order: 3; }
	.tw-home-whyus-bento--mosaic .tw-home-whyus-card--2 { order: 4; }
	.tw-home-whyus-bento--mosaic .tw-home-whyus-photo--b { order: 5; }
	.tw-home-whyus-bento--mosaic .tw-home-whyus-card--3 { order: 6; }
	.tw-home-whyus-bento--mosaic .tw-home-whyus-photo--c { order: 7; }
	.tw-home-whyus-bento--mosaic .tw-home-whyus-card--4 {
		order: 8;
		grid-column: 1 / -1;
	}

	.tw-home-whyus-bento--mosaic > .tw-home-whyus-photo {
		height: auto;
		min-height: 0;
		max-width: 100%;
		aspect-ratio: 16 / 10;
	}
}

@supports not (width: 1cqw) {
	@media (max-width: 1000px) {
		.tw-home-section--whyus .tw-home-section__inner {
			--tw-whyus-cell-w: 100%;
		}
	}
}

@media (max-width: 640px) {
	.tw-home-section--whyus .tw-home-section__inner {
		padding-left: clamp(0.9rem, 3.8vw, 1.15rem);
		padding-right: clamp(0.9rem, 3.8vw, 1.15rem);
	}

	.tw-home-section--whyus .tw-home-section__header--whyus > div:first-child {
		margin-bottom: 0;
	}

	.tw-home-section--whyus .tw-home-section__header--whyus > a.tw-hero-btn {
		justify-content: center;
	}

	.tw-home-whyus-bento--mosaic {
		gap: clamp(0.7rem, 2.8vw, 0.95rem);
	}

	.tw-home-whyus-bento--mosaic .tw-home-whyus-lead {
		min-height: clamp(12.5rem, 56vw, 16rem);
		text-align: left;
		align-items: flex-start;
		padding: clamp(1.85rem, 7vw, 2.35rem) clamp(1.65rem, 6vw, 2rem);
	}

	.tw-home-whyus-bento--mosaic .tw-home-whyus-lead__label,
	.tw-home-whyus-bento--mosaic .tw-home-whyus-lead__text {
		max-width: none;
	}

	.tw-home-whyus-bento--mosaic .tw-home-whyus-card {
		padding: clamp(1.1rem, 4vw, 1.35rem);
	}

	.tw-home-whyus-bento--mosaic .tw-home-whyus-card__icon {
		width: 2.65rem;
		height: 2.65rem;
		margin-bottom: 0.75rem;
		font-size: 1.05rem;
	}

	.tw-home-whyus-bento--mosaic > .tw-home-whyus-photo {
		height: auto;
		min-height: 0;
		max-width: 100%;
		aspect-ratio: 16 / 10;
	}

	.tw-home-whyus-bento--mosaic > .tw-home-whyus-photo .tw-home-whyus-photo__bg {
		min-height: 0;
	}
}

/* Projects carousel — full-width cards on mobile (match .tw-clients-hero__inner content area). */
@media (max-width: 899px) {
	:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-projects-carousel {
		--tw-project-slide-w: 100%;
	}

	:where(.tw-home-section--projects, .tw-single-related, .tw-archive-projects) .tw-home-projects-carousel__track {
		padding-inline: 0;
	}

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

	/* Project slider: modest air between title and sector badges on touch viewports */
	[data-tw-projects-carousel] .tw-home-project-card.tw-bento-cell {
		--tw-card-title-badge-gap: clamp(0.4rem, 1.8vw, 0.6rem);
	}

	/* Contact form band — match Our work carousel shell (frame inset + hero-pad inner) */
	.tw-archive-projects > .tw-contact-section-band,
	.tw-single-project__contact {
		padding-inline: var(--tw-frame-inset);
		box-sizing: border-box;
	}

	.tw-archive-projects__inner > .tw-contact-section-band {
		--tw-contact-band-breakout: calc(var(--tw-frame-inset) + var(--tw-hero-pad-x));
		width: calc(100% + 2 * var(--tw-contact-band-breakout));
		max-width: none;
		margin-inline: calc(-1 * var(--tw-contact-band-breakout));
		padding-inline: var(--tw-frame-inset);
		box-sizing: border-box;
	}

	.tw-contact-section-band__hero .tw-hero-home__inner {
		align-items: stretch;
		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);
	}

	.tw-contact-section-band__body,
	.tw-contact-section-band__form,
	.tw-contact-page-form,
	.tw-contact-page-form .tw-contact-overlay__form {
		width: 100%;
		max-width: none;
		margin-inline: 0;
	}
}

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

	.tw-home-whyus-photo__bg {
		transition: none;
	}

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

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