/* ==========================================================================
   LAYOUT  -  page shell, section frame, containers, grid primitives
   ========================================================================== */

.site {
	position: relative;
	isolation: isolate;
	overflow-x: clip; /* belt and braces with body overflow-x */
}

.profile {
	display: block;
}

/* --------------------------------------------------------------------------
   Container
   Reserves room on the right for the desktop navigation rail so content never
   slides underneath it.
   -------------------------------------------------------------------------- */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   Section frame
   Shared by all 8 sections. min-height, never height - content always wins.
   -------------------------------------------------------------------------- */

.section {
	position: relative;

	/* Padding is the LARGER of the section rhythm and the clearance needed for
	   the fixed chrome - never the sum. Adding them would eat a third of a
	   laptop screen and push content below the fold. */
	padding-top: max(var(--section-padding-y), calc(var(--header-height) + var(--space-lg)));
	padding-bottom: var(--section-padding-y);
	background-color: var(--ground);
	color: var(--ink);
	scroll-margin-top: 0;
	overflow: clip; /* contains decorative elements without creating scrollbars */
}

.section__inner {
	position: relative;
	z-index: var(--z-content);
	width: 100%;
}

/* Section head - number badge, title, intro. Consistent across all sections. */

.section__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	max-width: 46rem;
	margin-bottom: var(--space-xl);
}

.section__title {
	font-size: var(--text-4xl);
	max-width: 20ch;
}

.section__intro {
	max-width: var(--container-text);
	font-size: var(--text-lg);
	color: var(--ink-muted);
}

.section__body {
	position: relative;
}

/* Placeholder copy shown while a section is still awaiting its design. */
.section__placeholder {
	padding: var(--space-xl);
	border: 1px dashed var(--hairline);
	border-radius: var(--radius-md);
	color: var(--ink-muted);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Desktop: each section reads as its own screen.
   Content is vertically centred but free to grow past the viewport.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.container {
		padding-right: calc(var(--gutter) + var(--nav-rail-width));
	}

	.section {
		display: flex;

		/* Centred while the content fits, which is the common case.

		   Declared twice on purpose. A section whose content outgrows the
		   viewport - 03 and 08 do - overflows a plain centre in both
		   directions, and the half that goes upwards slides under the fixed
		   header: section 03's "What We Do" was sitting 45px behind the logo.
		   Snapping made that the permanent framing rather than something you
		   scrolled past, because the section is now always landed on at its
		   own top edge.

		   safe centre keeps the centring until it would cause exactly that,
		   then falls back to start alignment so the top of the content stays
		   reachable. A browser that does not know the keyword drops the second
		   declaration as invalid and keeps the first. */
		align-items: center;
		align-items: safe center;

		min-height: 100vh;
		min-height: 100svh;
		padding-bottom: max(var(--section-padding-y), calc(var(--cue-height) + var(--space-lg)));
	}

	/* ----------------------------------------------------------------------
	   One section per gesture.

	   The profile is a linear narrative, so the scroll is snapped to it: a
	   wheel notch or a trackpad flick settles on the next section rather than
	   parking the visitor between two of them, which is what made a deliberate
	   sequence read as an ordinary long page.

	   Deliberately CSS, not a hijacked wheel event. The scrollbar, spacebar,
	   Page Up/Down, keyboard and find-in-page all keep working, and a browser
	   without scroll-snap falls back to the free scroll it has today.

	   scroll-snap-stop: always is what holds it to one section at a time -
	   without it a fast flick sails past two or three snap points.

	   Sections 03 and 08 run taller than the viewport. Per spec a snap area
	   larger than the snapport is not snapped to mid-scroll, so their overflow
	   stays reachable instead of trapping the visitor at the top edge.
	   ---------------------------------------------------------------------- */

	html {
		scroll-snap-type: y mandatory;
	}

	.section {
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
}

/* --------------------------------------------------------------------------
   Grid primitives
   Auto-fit means cards reflow without a breakpoint for every count.
   -------------------------------------------------------------------------- */

.grid {
	display: grid;
	gap: var(--space-md);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* Asymmetric split used by the about / growth / why-us compositions. */
.grid--split {
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	align-items: center;
}

@media (min-width: 900px) {
	.grid--split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.grid--split-wide {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	}
}

/* Vertical rhythm helper. */
.stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.stack--sm { gap: var(--space-2xs); }
.stack--lg { gap: var(--space-lg); }

/* Horizontal group that wraps gracefully. */
.cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Media frame  -  fixed aspect, no layout shift, rounded like the references
   -------------------------------------------------------------------------- */

.media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--surface);
}

.media--4-3  { aspect-ratio: 4 / 3; }
.media--3-2  { aspect-ratio: 3 / 2; }
.media--1-1  { aspect-ratio: 1 / 1; }
.media--16-9 { aspect-ratio: 16 / 9; }
.media--portrait { aspect-ratio: 4 / 5; }

.media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* The closing band of reference design 08, not generic site chrome: lockup and
   tagline left, socials centre, handwritten thank-you right, copyright on a
   hairline beneath, and the drawn accent contour bleeding out of the corner. */

.profile-footer {
	position: relative;
	isolation: isolate;
	overflow: clip;
	padding-block: var(--space-lg);
	background-color: var(--color-navy);
	color: var(--color-text-muted-invert);
	border-top: 1px solid var(--color-navy-line);
}

/* Anchored to the corner and allowed to run past it. Sized in ems of the band
   so it keeps its proportion as the footer grows on smaller screens. */
.profile-footer__decor {
	position: absolute;
	z-index: -1;
	right: 0;
	bottom: 0;
	width: min(38rem, 52%);
	height: 100%;
	color: var(--color-sky);
	opacity: 0.4;
	pointer-events: none;
}

.profile-footer__decor svg {
	width: 100%;
	height: 100%;
}

/* Stacked, the band is three times as tall and the same contour reads as a
   pattern across the whole footer rather than as a mark in its corner. */
@media (max-width: 767px) {
	.profile-footer__decor {
		width: 70%;
		height: 60%;
		opacity: 0.25;
	}
}

.profile-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md) var(--space-lg);
}

/* Brand ------------------------------------------------------------------- */

.profile-footer__brand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md);
	min-width: 0;
}

.profile-footer__lockup {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.profile-footer__mark {
	width: auto;
	height: 2.75rem;
}

.profile-footer__words {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.profile-footer__word {
	width: auto;
	height: 1.375rem;
}

.profile-footer__descriptor {
	font-size: var(--text-2xs, 0.6875rem);
	font-weight: var(--weight-semi);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-text-muted-invert);
}

/* The tagline is set as two short lines in the reference, divided from the
   lockup by a hairline rather than by space alone. */
.profile-footer__tagline {
	padding-left: var(--space-md);
	border-left: 1px solid var(--color-navy-line);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--color-text-invert);
}

/* Thank you --------------------------------------------------------------- */

.profile-footer__thanks {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	min-width: 0;
}

.profile-footer__thanks-mark {
	font-family: var(--font-script, var(--font-display));
	font-size: var(--text-2xl);
	line-height: 1;
	color: var(--color-sky);
}

.profile-footer__thanks-body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding-left: var(--space-sm);
	border-left: 1px solid var(--color-navy-line);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
}

.profile-footer__thanks-name {
	font-weight: var(--weight-semi);
	color: var(--color-text-invert);
}

/* Base line --------------------------------------------------------------- */

.profile-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-navy-line);
}

.profile-footer__copy {
	font-size: var(--text-sm);
}

.profile-footer__top {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--color-navy-line);
	border-radius: var(--radius-pill);
	color: var(--color-text-invert);
	transition:
		border-color var(--transition-normal),
		background-color var(--transition-normal),
		color var(--transition-normal);
}

@media (hover: hover) {
	.profile-footer__top:hover {
		border-color: var(--color-sky);
		background-color: var(--color-sky);
		color: var(--color-navy);
	}
}