/* Hero — mobile first. The 4-image collage is a single full-width band here,
   and only becomes the skewed 2x2 mosaic at 64rem. */
@media only screen and (min-width: 0rem) {
	#hero-1427 {
		text-align: left;
		padding: clamp(7rem, 18vw, 9rem) 1rem clamp(3.5rem, 9vw, 5rem);
		background-color: #fff;
		overflow: hidden;
		position: relative;
		z-index: 1;
	}

	#hero-1427 .cs-background {
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -3;
	}

	/* White wash over the office photo so it reads as a faint texture behind the
	   text, fading to solid white toward the right where the mosaic takes over */
	#hero-1427 .cs-background:before {
		content: "";
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.95) 55%, #fff 100%);
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		z-index: 1;
		pointer-events: none;
	}

	#hero-1427 .cs-background img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: absolute;
		top: 0;
		left: 0;
	}

	#hero-1427 .cs-container {
		width: 100%;
		max-width: 80rem;
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: clamp(2.5rem, 5vw, 3.5rem);
	}

	#hero-1427 .cs-content {
		text-align: inherit;
		width: 100%;
		max-width: 39.375rem;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	#hero-1427 .cs-topper {
		font-size: clamp(0.8125rem, 1.5vw, 1rem);
		line-height: 1.2em;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-align: inherit;
		text-transform: uppercase;
		margin-bottom: 1rem;
		color: var(--headerColor);
		display: inline-block;
		position: relative;
	}

	#hero-1427 .cs-title {
		font-size: clamp(2rem, 3.6vw, 2.875rem);
		font-weight: 400;
		line-height: 1.05em;
		text-align: inherit;
		text-transform: uppercase;
		max-width: 20ch;
		margin-bottom: 1.5rem;
		color: var(--headerColor);
		position: relative;
	}

	#hero-1427 .cs-accent {
		font-weight: 700;
		color: var(--primary);
		display: block;
	}

	#hero-1427 .cs-light {
		display: block;
	}

	#hero-1427 .cs-text {
		font-size: clamp(0.9375rem, 1.3vw, 1rem);
		line-height: 1.6em;
		text-align: inherit;
		width: 100%;
		max-width: 30rem;
		margin: 0 0 2rem 0;
		color: var(--bodyTextColor);
	}

	#hero-1427 .cs-button-group {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	#hero-1427 .cs-button-solid,
	#hero-1427 .cs-button-transparent {
		font-size: 0.875rem;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		text-decoration: none;
		height: 3.25rem;
		padding: 0 1.75rem;
		border-radius: 0.25rem;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		gap: 0.625rem;
	}

	#hero-1427 .cs-button-solid {
		background-color: var(--primary);
		line-height: 1em;
		color: #fff;
	}

	#hero-1427 .cs-button-solid:before {
		background-color: var(--secondaryDark);
		border-radius: 0.25rem;
	}

	#hero-1427 .cs-button-transparent {
		background-color: #fff;
		border: 1px solid #d7dcda;
		color: var(--headerColor);
		transition: border-color 0.3s, color 0.3s;
	}

	#hero-1427 .cs-button-transparent:hover {
		border-color: var(--primary);
		color: var(--primary);
	}

	#hero-1427 .cs-icon-wrapper {
		width: 1.375rem;
		height: 1.375rem;
		border-radius: 50%;
		background-color: var(--primary);
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		flex: none;
	}

	/* The mosaic needs width to read as a composition, and a single photo out of
	   it just looks stray, so the whole group sits out the mobile layout. */
	#hero-1427 .cs-image-group {
		display: none;
	}

	#hero-1427 .cs-picture {
		width: 100%;
		height: 100%;
		background-color: var(--secondaryLight);
		display: block;
		overflow: hidden;
		position: relative;
	}

	#hero-1427 .cs-picture img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
}

@media only screen and (min-width: 64rem) {
	#hero-1427 {
		padding-bottom: clamp(5rem, 10vw, 7rem);
	}

	#hero-1427 .cs-container {
		min-height: 34rem;
		justify-content: center;
	}

	#hero-1427 .cs-content {
		width: 47%;
		max-width: 33rem;
	}

	/* The mosaic sits behind the content column and is skewed as one unit, so every
	   internal seam and the left edge share the same diagonal. Each image is
	   counter-skewed and scaled up so no corner of the cell is left empty. */
	#hero-1427 .cs-image-group {
		width: auto;
		height: 100%;
		margin: 0;
		display: grid;
		grid-template-columns: 0.85fr 1fr;
		grid-template-rows: 1fr 1fr;
		gap: 6px;
		position: absolute;
		top: 0;
		/* Anchored to the container's center so the skew's bottom-left lean can
		   never drift into the text column, whatever the viewport height. The
		   right overhang keeps the bottom-right corner outside the section. */
		left: calc(50% + 9rem);
		right: -14rem;
		z-index: -1;
		transform: skewX(-13deg);
		transform-origin: top left;
	}

	#hero-1427 .cs-picture img {
		transform: skewX(13deg) scale(1.4);
	}
}


/* Scroll reveal. The hidden state is scoped to .cs-reveal-ready, a class only
   added by reveal.js, so the page stays fully visible without JS. */
@media only screen and (min-width: 0rem) {
	.cs-reveal-ready .cs-reveal,
	.cs-reveal-ready .cs-reveal-fade {
		opacity: 0;
		will-change: opacity, transform;
	}

	.cs-reveal-ready .cs-reveal {
		transform: translateY(1.5rem);
	}

	.cs-reveal-ready .cs-reveal.cs-in,
	.cs-reveal-ready .cs-reveal-fade.cs-in {
		opacity: 1;
		transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
	}

	.cs-reveal-ready .cs-reveal.cs-in {
		transform: translateY(0);
	}

	/* The mosaic keeps its own skew, so it fades without a translate */
	.cs-reveal-ready .cs-reveal-fade.cs-in {
		transition-duration: 0.9s;
	}
}

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