/* Global + home-page styles. The shared partials (preset, theme, header,
   module CSS, …) used to be pulled in here via @import; they're now linked
   individually and cache-busted in head.php. This file holds its own rules
   only. */

.e {
	letter-spacing: 0.1em;
}

/* Focused splash pulls up under the sticky header so the video extends
   behind it. Non-focused splashes (e.g. partnerships) are unaffected. */
.landing-splash[data-mode='focused'] {
	margin-top: calc(-1 * var(--header-height, 76px));
}

.landing-splash {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 4 / 5;
	max-height: 90vh;


	/*border-radius: 0 0 0 var(--fill-corners);*/
	overflow: clip;

	.support-break {
		display: none;
	}

	h1 {
		font-weight: 500;
		text-shadow: 0.2em 0 0.3em rgb(0 0 0 / 0.1);
	}

	p {
		text-shadow: 0.2em 0 0.3em rgb(0 0 0 / 0.2);
	}

	/* Progressive aspect — landscape video is cropped less violently when
	   the container's shape steps gradually instead of jumping straight
	   to portrait. Narrowest viewports get a near-square shape; mid-range
	   goes square; wide goes cinema. */
	@media (width >= 480px) {
		aspect-ratio: 1 / 1;
	}

	@media (width >= 560px) {
		.support-break {
			display: initial;
		}
	}

	@media (width >= 1000px) {
		aspect-ratio: 16 / 9;
		max-height: none;
		/* At the large breakpoint the strict 16:9 ratio is what we count
		   on for positioning subjects + text. Drop the 90vh cap so the
		   aspect always holds, even on short viewports — the splash may
		   overflow vertically and the user scrolls past. Width is always
		   100% of the container; no width cap. */
	}

	padding-block: 2vh;
	color: #fff;

	/* Inner column inside the splash stays a regular layout slot — no
	   imposed flex/centering. Future content drops in here normally. */
	inner-column {
		position: relative;
		z-index: 2;
	}

	/* Headline positions itself absolutely on the splash so adding other
	   things to the inner-column doesn't move it. Centered on narrow
	   aspects; pulled toward the top on the large 16:9 to sit above the
	   video's subject. */
	.splash-headline {
		position: absolute;
		left: 50%;
		top: 40%;
		transform: translate(-50%, -50%);
		z-index: 2;

		width: 100%;
		max-width: 40ch;
		padding-inline: 1em;

		text-align: center;
		font-size: clamp(1.45rem, 4vw, 2rem);
		font-weight: 470;
		line-height: 1.25;
		/*max-width: 24ch;*/
		/* fluid sizing — scales from ~20px on narrow viewports up to ~32px
		   on wide ones. Opacity scrub on scroll is handled by GSAP
		   ScrollTrigger in scripts/header-menu.js. */

		text-transform: balance;
		top: 45%;

		display: flex;
		flex-direction: column;
		align-items: center;

		max-width: 30ch;

		p {
			margin-top: 0.6em;
		}

		.cta {
			border: 1px solid transparent;
		}

		@media (width < 450px) {
			p {
				display: none;
			}
		}
	}

	@media (width >= 1000px) {
		.splash-headline {
			top: 30%;
			transform: translateX(-50%);
			/* override the Y portion of the transform — headline sits in
			   the upper portion, above the brass curve subject. */
		}

		h1 {
			font-weight: 500;
			font-size: 2rem;
			line-height: 1.1;
		}

		p {
			font-size: 1.2rem;
			font-weight: 540;
			line-height: 1.25;
		}


	}

	@media (width >= 1200px) {
		.splash-headline {
			top: 35%;
			transform: translateX(-50%);
			/* override the Y portion of the transform — headline sits in
			   the upper portion, above the brass curve subject. */
		}
	}

	/* Subtle gradient scrim at the bottom for headline legibility against
	   varied video content. */
	&::after {
		content: '';
		position: absolute;
		inset: auto 0 0 0;
		height: 60%;
		background: linear-gradient(
			to bottom,
			transparent,
			rgba(0, 0, 0, 0.55)
		);
		z-index: 1;
		pointer-events: none;
	}

	transition: border-radius var(--fast);

	@media (width > 1600px) {
		border-radius: 0  0 var(--fill-corners) var(--fill-corners);
		overflow: clip;
	}
}

.splash-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
	/* team-work composition has the subject sitting at the bottom-center of
	   the frame — when cover crops vertically (wide-short viewports), we
	   keep the bottom anchored so the sphere stays in view. */
	z-index: 0;
	background-color: var(--fill-secondary);
}

/* The splash video plays for everyone — including reduced-motion users.
   This is a tiny, known audience and a blank hero is worse than the motion;
   the muted ambient loop is treated as decorative content, not an effect. */

.page-section {
	min-height: 600px;
	padding-block: clamp(80px, 6vh, 120px);

	/*border: 1px dashed red;*/
	/* placeholder visual while sections are empty */
}



.linkedin {
	svg { 
		width: 18px; 
		height: 18px; 
	}
}


/* ===== #own =====
   Heading + intro in a normal column, followed by a full-bleed pendulum
   video with rounded corners. The video sits inside the body's 1600px
   max so the corner radius reads. */
.own-section {
	padding-block: 10vh 0;
	padding-top: 0;

	.intro {
		margin-bottom: -60px;
		z-index: 1;
	}

	@media (width >= 800px) {
		.intro {
			margin-bottom: -75px;
		}
	}

	@media (width >= 900px) {
		.intro {
			margin-bottom: -95px;
		}
	}
}

.own-section inner-column {
	padding-bottom: 6vh;
}

.own-video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;

	max-width: 1200px;
	margin-inline: auto;
}






.section-goal {
	font-style: italic;
	font-size: var(--step-down-1);
	color: rgba(0, 0, 0, 0.7);
	max-width: 60ch;
	padding: 1em 1.2em;
	border-left: 3px solid #d4b94a;
	background: #faf3e0;
	margin-block: 30px 2em;
	position: relative;
	z-index: 3;
	/* working scaffolding — make the goal of each section visible while
	   drafting content. Solid background so it renders the same against
	   the dark splash video as it does against the light sections. Remove
	   (or move to a comment) when real copy lands. */
}





#what {
	@media (width < 900px) {
		padding-block-start: 20px;
	}
}




/* ===== #serving =====
   Wide: solid warm panel on the left, video on the right.
   Narrow: same panel above, same video below. */
.serving {
	position: relative;
	overflow: hidden;

	/* inner-column rides above the video so the text stays in the
	   page's normal content gutter, like every other section. */

	padding-block: 0;

	color: #fff;

	h2 {
		text-shadow: 0.2em 0 0.3em rgb(0 0 0 / 0.1);
	}

	p {
		text-shadow: 0.2em 0 0.3em rgb(0 0 0 / 0.2);
	}

	@media (width < 700px) {
		br {
			display: none;
		}
	}

	.actions {
		transform: translateX(-2px);
		margin-top: 28px;
	}

	.cta {
		border: 0;
	}

	transition: border-radius var(--fast);

	inner-column {
		position: relative;
		z-index: 2;
	}

	@media (width < 700px) {
		/*border: 2px solid orange;*/
		video {
			width: 100%;
			aspect-ratio: 9 / 16;
			object-fit: cover;
		}

		/* on narrow the inner-column overlays the video from the top */
		inner-column {
			position: absolute;
			inset: 0 0 auto 0;
		}

		text-content {
			margin-top: 0%;
		}
	}

	@media (width >= 400px) and (width < 700px) {
		text-content {
			margin-top: 10%;
			maxw-width: 20ch;
		}
	}

	@media (width >= 700px) {
		/*aspect-ratio: 16 / 9;*/

		display: flex;
		flex-direction: column;
		justify-content: center;
		
		overflow: clip;

		inner-column {
			width: 100%;
			height: 100%;

			display: flex;
			align-items: center;
		}

		video {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}

		text-content {
			max-width: 40%;
		}
	}

	@media (width >= 1200px) {
		aspect-ratio: 16 / 9;
	}

	@media (width >= 1610px) {
		border-radius: var(--fill-corners);
	}
}




/* feature-grid and feature-list live in their own modules now —
   see modules/feature-grid/style.css and modules/feature-list/style.css */







.actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;

	margin-top: 20px;
}


.sub {
	margin-top: 1em;
	color: var(--ink-auxiliary);
}


#founder .portrait {
	max-width: 400px;
	margin-block: 20px;
}


.thing2 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: top;
	gap: var(--common-gap);
	.y {
		max-width: 50ch;
	}
}


.page-section:has(.call-to-action) {
	min-height: auto;
	padding-block: 4vh 8vh;

	@media (width < 900px) {
		br {
			display: none;
		}
	}
}

#technology {
	padding-block: 4vh;
}