/* ==========================================================================
   Responsive — Tablet (≤ 60em / 960px)
   ========================================================================== */

@media (max-width: 60em) {

	/* --- USPs: 2 columns --- */
	.ut-usps__list {
		grid-template-columns: repeat(2, 1fr);
	}

	/* --- Projects page: 2 columns --- */
	.ut-projects-grid__items {
		grid-template-columns: repeat(2, 1fr);
	}

	/* --- Single project: stack intro/meta --- */
	.ut-project-single__hero-grid {
		grid-template-columns: 1fr;
	}

	.ut-project-single__title {
		max-width: none;
	}


	/* --- About services: stack --- */
	.ut-about-services {
		grid-template-columns: 1fr 1fr;
	}

	/* --- Team grid: editorial layout simplified to 2-up --- */
	.ut-team-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(0.8rem, 2.4vw, 1.4rem);
	}

	.ut-team-card,
	.ut-team-card:nth-child(3n+1),
	.ut-team-card:nth-child(3n+2),
	.ut-team-card:nth-child(3n+3) {
		grid-column: auto;
		transform: none;
	}

	.ut-about-services__tagline {
		grid-column: 1 / -1;
	}

	/* --- Process cards: disable sticky stack, revert to flow --- */
	.ut-process-card {
		position: relative;
		height: auto;
		min-height: auto;
		grid-template-columns: 1fr;
		margin-bottom: var(--ut-space-sm);
		/* border-radius: 0.5rem; */
		top: 0;
	}

	.ut-process-cards {
		padding-bottom: 0;
	}

	.ut-process-card__figure {
		display: none;
	}

	.ut-process-card__body {
		padding: var(--ut-process-body-pad-top) var(--ut-gutter);
		max-width: none;
		margin-left: 0;
	}

	.ut-process-card__text {
		max-width: none;
	}

	/* --- Footer: 2 columns --- */
	.ut-footer__main {
		grid-template-columns: 1fr 1fr;
	}

	/* --- Contact hero: shorter --- */
	.ut-contact-hero__block {
		min-height: 40vh;
	}

	.ut-process-card--process-4 {
		display: none;
	}

	/* --- Flow: stack to single column grid --- */
	.ut-flow-card__grid {
		grid-template-columns: 1fr;
	}

	.ut-flow-card__col-right {
		grid-column: 1;
	}
}

/* ==========================================================================
   Responsive — Mobile (≤ 40em / 640px)
   ========================================================================== */

@media (max-width: 40em) {

	/* --- USPs: 1 column --- */
	.ut-usps__list {
		grid-template-columns: 1fr;
	}

	.ut-latest__header {
		flex-direction: column;
		gap: 0.5em;
	}

	.ut-latest__title,
	.ut-services__title {
		line-height: var(--ut-h2-line-height);
		font-weight: var(--ut-h2-weight);
	}

	/* --- Projects page: 1 column --- */
	.ut-projects-grid__items {
		grid-template-columns: 1fr;
	}

	/* --- Single project: mobile layout --- */
	.ut-project-single__hero-image {
		padding-top: var(--ut-gutter);
	}

	.ut-project-single__topbar {
		flex-direction: column;
		align-items: flex-start;
	}

	.ut-project-single__visit--desktop {
		display: none;
	}

	.ut-project-single__visit--mobile {
		display: inline-flex;
		margin-top: 1rem;
	}


	/* --- About services: 1 column --- */
	.ut-about-services {
		grid-template-columns: 1fr;
	}

	/* --- Team grid: stack to single column --- */
	.ut-team-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.ut-team-card__overlay {
		opacity: 1;
		transform: none;
		gap: 0.8rem;
		padding: 1rem;
	}

	.ut-team-card__overlay-description {
		font-size: clamp(1rem, 2.4vw + 0.72rem, 1.45rem);
		line-height: 1.12;
		max-width: 100%;
	}

	/* --- Process deliverables: 1 column --- */
	.ut-process-card__deliverables {
		column-count: 1;
		column-gap: 0;
		column-rule: 0;
		gap: 0.35em;
		/* border-left: 0; */
		/* padding-left: 0; */
		max-width: none;
		width: 100%;
	}

	.ut-process-card__deliverables::before {
		display: none;
	}

	.ut-process-card__deliverables li {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* --- Flow: single column, smaller tabs --- */
	.ut-flow-card {
		--ut-flow-tab-h: 2.75rem;
		min-height: 85vh;
	}

	.ut-flow-card__grid {
		grid-template-columns: 1fr;
	}

	.ut-flow-card__col-right {
		grid-column: 1;
	}

	.ut-flow-card__items {
		column-count: 1;
		column-gap: 0;
		column-rule: 0;
	}

	/* --- Footer: stack all --- */
	.ut-footer__main {
		grid-template-columns: 1fr;
	}

	.ut-footer__sub {
		grid-template-columns: 1fr;
	}

	/* --- Contact hero: shorter, smaller text --- */
	.ut-contact-hero {
		grid-template-columns: 1fr 2rem 1fr;
	}

	.ut-contact-hero__block {
		min-height: 30vh;
	}

	.ut-contact-hero__gap {
		width: 2rem;
	}

	/* --- Contact: remove gutters on mobile --- */
	.ut-contact-hero {
		padding-left: 0;
		padding-right: 0;
	}

	.ut-contact-body {
		padding-left: 0;
		padding-right: 0;
	}

	body:has(.ut-contact) .ut-footer {
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 0;
	}

	/* --- Services: wrap text --- */
	.ut-services__header {
		flex-direction: column;
		gap: 0.5em;
	}

	/* --- Header: sticky row with logo + nav side by side --- */
	.ut-header {
		position: sticky;
		top: 0;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		padding: var(--ut-header-padding-y) var(--ut-header-padding-x);
		background-color: var(--wp--preset--color--warm);
		border-bottom: 1px solid rgba( 26, 26, 26, 0.15 );
	}

	.ut-header__nav ul {
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: clamp(0.75rem, 2vw, 1.1rem);
	}

	.ut-header__nav .menu-item-home {
		display: none;
	}
}