/*
 * Supplied-pair correction pass.
 *
 * These rules address measured homepage and About differences from the
 * 2026-09-04 local/live comparison pairs. Keep the rail and page-family
 * geometry here as shared components; do not add viewport-specific offsets.
 */

@media (min-width: 960px) {
	:root {
		--lld-wide-gutter: clamp(36px, 7.5vw, 144px);
		--lld-home-rail-gap: 72px;
	}

	/* The production hero occupies the viewport below the 101px header. */
	body.home .home-hero,
	.lld-about-page .lld-about-hero {
		height: 100svh;
		min-height: 100svh;
	}

	/* Production keeps the controls inside the viewport edges. */
	body.home .home-hero__arrow--previous {
		left: 6px;
	}

	body.home .home-hero__arrow--next {
		right: 6px;
	}

	/* Homepage rails share a wide 144px-gutter composition at 1920px. */
	body.home .home-showcase > .lld-container,
	body.home .home-clients > .lld-container,
	body.home .home-stats > .lld-container {
		box-sizing: border-box;
		width: calc(100% - (2 * var(--lld-wide-gutter)));
		max-width: none;
	}

	body.home .home-stats__intro-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--lld-home-rail-gap);
	}

	body.home .home-stats__grid {
		width: 100%;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: var(--lld-home-rail-gap);
	}

	body.home .home-stats__rule {
		display: block;
		width: 100%;
		height: 1px;
		padding: 0;
		margin: 72px 0 72px;
		border: 0;
		background: rgba(0, 0, 0, 0.45);
	}

	body.home .home-card-grid--case-studies,
	body.home .home-card-grid--insights {
		grid-auto-columns: calc((100% - (2 * var(--lld-home-rail-gap))) / 3 + var(--lld-home-rail-gap));
		/* The live carousel's 568px item already contains its 72px right
		 * breathing room; a second grid gap shifts every card too far right. */
		column-gap: 0;
		row-gap: 0;
		overflow: visible;
	}

	body.home .home-case-studies,
	body.home .home-insights {
		overflow: hidden;
	}

	body.home .home-case-card,
	body.home .home-insights .lld-post-card {
		width: calc(100% - var(--lld-home-rail-gap));
	}

	body.home .home-case-studies > .lld-container,
	body.home .home-insights > .lld-container {
		padding-top: 36px;
	}

	body.home .home-case-studies .home-section-heading__title,
	body.home .home-insights .home-section-heading__title {
		letter-spacing: normal;
	}

	body.home .home-case-studies .home-card-grid--case-studies {
		margin-top: 41px;
	}

	body.home .home-insights .home-card-grid--insights {
		margin-top: 36px;
	}

	body.home .home-case-card .home-card__body h3,
	body.home .home-insights .lld-post-card__title {
		letter-spacing: normal;
	}

	body.home .home-case-studies {
		height: clamp(698px, 40.9vw, 815px);
		min-height: 0;
	}

	body.home .home-insights {
		height: clamp(721px, 43.33vw, 861px);
		min-height: 0;
	}

	body.home .home-clients {
		height: clamp(324px, 20.22vw, 399px);
		min-height: 0;
		padding-top: 72px;
	}

	@media (min-width: 1600px) {
		body.home .home-services {
			height: 599.5px;
			min-height: 599.5px;
		}
	}

	@media (min-width: 960px) and (max-width: 1199px) {
		body.home .home-case-studies {
			height: 722.16px;
		}

		body.home .home-insights {
			height: 714.66px;
		}

		body.home .home-clients {
			height: 289.5px;
		}
	}

	/* The About mission section is a 744px/72px/744px production grid at
	 * 1920px, with a square image aligned well inside the section. */
	.lld-about-page .about-mission {
		height: 1031px;
		min-height: 1031px;
	}

	.lld-about-page .about-intro {
		height: 1201.5px;
		min-height: 1201.5px;
	}

	.lld-about-page .about-intro__grid {
		padding-top: 144px;
	}

	.lld-about-page .about-transformation h2 {
		width: min(1470px, calc(100% - 72px));
		max-width: none;
	}

	.lld-about-page .about-transformation,
	.lld-about-page .about-transformation__inner {
		height: 561px;
		min-height: 561px;
	}

	.lld-about-page .about-mission__grid {
		box-sizing: border-box;
		width: calc(100% - (2 * clamp(36px, 9.375vw, 180px)));
		max-width: none;
		height: 100%;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 72px;
		padding: 0;
	}

	.lld-about-page .about-mission__copy {
		max-width: none;
		padding-top: 230px;
	}

	.lld-about-page .about-mission__copy h2 {
		display: block;
		width: max-content;
		max-width: 100%;
		padding: 5px 0;
		margin: 0 0 36px;
		font-family: var(--lld-font-display);
		font-size: 75px;
		font-weight: 900;
		line-height: 90px;
		letter-spacing: normal;
	}

	.lld-about-page .about-mission__copy h3 {
		display: block;
		width: max-content;
		max-width: 100%;
		padding: 5px 0;
		margin: 0 0 18px;
		font-family: var(--lld-font-body);
		font-size: 50px;
		font-weight: 600;
		line-height: 60px;
		letter-spacing: normal;
	}

	.lld-about-page .about-mission__copy h3 span {
		display: block;
		font-family: var(--lld-font-display);
		font-size: inherit;
		font-weight: inherit;
		line-height: inherit;
		letter-spacing: inherit;
	}

	.lld-about-page .about-mission__copy h3:first-of-type {
		min-height: 77px;
	}

	.lld-about-page .about-mission__copy h3:last-of-type {
		font-family: var(--lld-font-display);
	}

	.lld-about-page .about-mission__copy h3 + p {
		width: 100%;
		max-width: none;
		margin: 0 0 30px;
	}

	.lld-about-page .about-mission__media {
		padding-top: 144px;
		margin: 0;
	}

	.lld-about-page .about-mission__media img {
		width: 100%;
		max-width: none;
		aspect-ratio: 1;
		object-fit: cover;
	}

	/* About's partners composition is a heading/CTA plus a five-column logo
	 * wall. The first row belongs to the heading row in production. */
	.lld-about-page .about-clients {
		height: auto;
		min-height: 0;
		padding: 0;
		background: var(--lld-color-lime);
	}

	.lld-about-page .about-clients__intro {
		box-sizing: border-box;
		width: calc(100% - (2 * clamp(36px, 9.375vw, 180px)));
		max-width: none;
		height: 877.4px;
		padding-top: 144px;
	}

	.lld-about-page .about-clients__intro h2 {
		margin: 0;
		font-family: var(--lld-font-display);
		font-size: 75px;
		font-weight: 600;
		line-height: 90px;
		letter-spacing: normal;
		text-transform: uppercase;
	}

	.lld-about-page .about-clients__intro > p {
		margin: 36px 0 0;
		font-size: 30px;
		line-height: 36px;
	}

	.lld-about-page .about-clients__intro > .lld-button {
		margin-top: 37px;
	}

	.lld-about-page .about-clients__featured,
	.lld-about-page .about-clients__logo-grid {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0 72px;
	}

	.lld-about-page .about-clients__featured {
		margin-top: 82px;
	}

	.lld-about-page .about-clients__logos {
		padding: 0 0 179px;
		border-top: 1px solid rgba(0, 0, 0, 0.45);
	}

	.lld-about-page .about-clients__logo-grid {
		box-sizing: border-box;
		width: calc(100% - (2 * clamp(36px, 9.375vw, 180px)));
		max-width: none;
		gap: 71px 72px;
		padding: 0;
	}

	.lld-about-page .about-clients__logo-grid .about-client-logo {
		display: grid;
		height: 128.6px;
		min-width: 0;
		place-items: center;
	}

	.lld-about-page .about-clients__featured .about-client-logo {
		aspect-ratio: 1;
	}

	.lld-about-page .about-client-logo img {
		display: block;
		width: 100%;
		height: auto;
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}

	/* The production About page presents one centered quote at a time. */
	.lld-about-page .about-testimonials {
		position: relative;
		min-height: 742.5px;
		padding: 144px 0;
	}

	.lld-about-page .about-testimonials h2 {
		width: max-content;
		max-width: 100%;
		padding: 0 0 36px;
		margin: 0 auto;
		border-bottom: 1px solid rgba(255, 255, 255, 0.45);
		font-family: var(--lld-font-display);
		font-size: 75px;
		font-weight: 600;
		line-height: 90px;
		letter-spacing: normal;
		text-align: center;
	}

	.lld-about-page .about-testimonials__viewport {
		width: min(756px, 100%);
		min-height: 240px;
		margin: 72px auto 0;
		text-align: center;
	}

	.lld-about-page .about-testimonial {
		margin: 0;
	}

	.lld-about-page .about-testimonial blockquote {
		max-width: none;
		margin: 0;
		font-size: 30px;
		line-height: 36px;
	}

	.lld-about-page .about-testimonial figcaption {
		margin-top: 36px;
		font-size: 15px;
		line-height: 22px;
	}

	.lld-about-page .about-testimonials__controls {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.lld-about-page .about-testimonials__controls button {
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.55);
		border-radius: 50%;
		background: transparent;
		color: var(--lld-color-surface);
		font-size: 25px;
		line-height: 1;
	}
}

/* Match the production content rails between the wide desktop and mobile
 * breakpoints. The wide rule above is intentionally reserved for the
 * 1600px+ composition. */
@media (min-width: 960px) and (max-width: 1599px) {
	body.home .home-showcase > .lld-container,
	body.home .home-clients > .lld-container,
	body.home .home-stats > .lld-container {
		box-sizing: border-box;
		max-width: none;
		width: min(calc(100% - 144px), 1296px);
	}
}

@media (min-width: 960px) and (max-width: 1399px) {
	body.home .home-showcase > .lld-container,
	body.home .home-clients > .lld-container,
	body.home .home-stats > .lld-container {
		width: min(calc(100% - 136px), 1140px);
	}
}

@media (max-width: 959px) {
	/* Production keeps the homepage showcase on a 36px viewport rail at
	 * tablet and mobile sizes. The card step is the card width plus that
	 * rail gap; it is not an additional desktop-style breathing column. */
	body.home .home-showcase > .lld-container {
		box-sizing: border-box;
		width: calc(100% - 72px);
		max-width: none;
	}

	body.home .home-card-grid--case-studies,
	body.home .home-card-grid--insights {
		column-gap: 36px;
	}

	.lld-about-page .about-clients__featured,
	.lld-about-page .about-clients__logo-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 24px;
	}

	.lld-about-page .about-clients__intro {
		padding-top: 64px;
	}

	.lld-about-page .about-clients__featured {
		margin-top: 48px;
	}

	.lld-about-page .about-clients__logos {
		padding-bottom: 72px;
	}

	.lld-about-page .about-testimonials__viewport {
		min-height: 220px;
	}

	.lld-about-page .about-testimonial blockquote {
		font-size: 22px;
		line-height: 28px;
	}
}

@media (min-width: 640px) and (max-width: 959px) {
	body.home .home-case-studies .home-section-heading__title,
	body.home .home-insights .home-section-heading__title {
		width: min(339px, 100%);
		max-width: 100%;
		font-size: 50px;
		line-height: 60px;
	}

	body.home .home-card-grid--case-studies,
	body.home .home-card-grid--insights {
		grid-auto-columns: calc((100% - 72px) / 3);
	}
}

@media (min-width: 960px) and (max-width: 1199px) {
	body.home .home-case-studies .home-section-heading__title,
	body.home .home-insights .home-section-heading__title {
		width: min(661.5px, 100%);
		max-width: 100%;
	}
}

@media (max-width: 639px) {
	body.home .home-card-grid--case-studies,
	body.home .home-card-grid--insights {
		grid-auto-columns: 100%;
	}

	body.home .home-case-studies .home-section-heading__title,
	body.home .home-insights .home-section-heading__title {
		width: max-content;
		max-width: 100%;
	}
}

@media (max-width: 639px) {
	.lld-about-page .about-clients__featured,
	.lld-about-page .about-clients__logo-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lld-about-page .about-testimonials {
		padding-block: 72px;
	}

	.lld-about-page .about-testimonials h2 {
		font-size: 52px;
		line-height: 58px;
	}
}