/* Our Agency page — styles go here as each section is built. */

/* --- Statement: plain scrolling intro, then a separate video stack --- */
.oa-statement-intro {
	padding-top: clamp(88px, 9vw, 145px);
	padding-bottom: clamp(48px, 6vw, 96px);
}

.oa-statement-videos {
	position: relative;
	background: var(--color-white);
}

.oa-statement__stack {
	position: relative;
	/* Video 1 gets its own ~87vh of scroll pinned alone before video 2
	   arrives, then another ~85vh where they overlap — the same relative
	   timing the two videos had before, just no longer sharing a stack
	   with the intro text above them. */
	height: 172vh;
}

.oa-statement__wrap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

.oa-statement__wrap--video-1 {
	top: 0;
}

.oa-statement__wrap--video-2 {
	top: 87vh;
}

.oa-statement__sticky {
	/* A sticky box spanning the full viewport height with its content
	   flex-centered lands each video centered in the viewport once
	   locked, rather than pinned to one edge. */
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.oa-statement__headline {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.25rem, 5.6vw, 6rem);
	line-height: 1.07;
	letter-spacing: -0.02em;
	color: var(--color-ink);
}

.oa-statement__headline em {
	font-style: italic;
	color: var(--color-accent);
}

.oa-statement__label {
	margin: 0;
	margin-top: 16px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 25px;
	color: var(--color-ink);
}

.oa-statement__video-card {
	/* min(853px, 63vw) alone was sized purely off viewport WIDTH, so on a
	   wide-but-short laptop screen the card (plus its own rotation, which
	   makes its effective on-screen bounding box taller than the card's
	   own height — a 16:9 box rotated ~10deg is roughly 30% taller) could
	   exceed the available vertical space. The third term caps it by a
	   HEIGHT budget instead (55vh, converted to an equivalent width via
	   the aspect ratio) — same approach as .recent-projects__card on the
	   homepage. 55vh only actually binds on short viewports; on anything
	   reasonably tall the 853px/63vw terms win instead, so this doesn't
	   shrink the card on normal-sized screens the way 30vh did. */
	width: min(853px, 63vw, calc(55vh * 16 / 9));
	aspect-ratio: 16 / 9;
	background: var(--color-ink);
	overflow: hidden;
}

.oa-statement__video-card--1 {
	transform: rotate(-10.3deg);
}

.oa-statement__video-card--2 {
	transform: rotate(9.12deg);
}

.oa-statement__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- A simple approach to agency life. --- */
.oa-simple {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 6vw, 108px);
	padding-block: clamp(48px, 6vw, 90px);
}

.oa-simple__heading {
	flex-shrink: 0;
	width: 165px;
	margin: 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 30px;
	line-height: 1.33;
	color: var(--color-ink);
}

.oa-simple__copy {
	max-width: 877px;
	font-family: var(--font-body);
	font-size: 22px;
	line-height: 1.68;
	color: var(--color-ink);
}

.oa-simple__copy p {
	margin: 0 0 1.68em;
}

.oa-simple__copy p:last-child {
	margin-bottom: 0;
}

/* --- The senior team. --- */
.oa-team {
	padding-block: clamp(32px, 5vw, 64px) clamp(48px, 6vw, 90px);
}

.oa-team__layout {
	display: flex;
	align-items: flex-start;
	gap: 25px;
}

.oa-team__heading {
	/* Matches one photo column's width exactly: a 4-equal-column layout
	   with 3 gaps between them (25px each = 75px total), so this column
	   and each of the 3 photo columns below work out to the same width —
	   same effect as an actual 4-column grid, without needing the photo
	   count in advance (see .oa-team__grid) to know how many rows to
	   reserve column 1 for. */
	flex: 0 0 calc((100% - 75px) / 4);
	margin: 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 30px;
	color: var(--color-ink);
}

.oa-team__grid {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
}

.oa-team__card {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.oa-team__photo {
	aspect-ratio: 246.7 / 315.4;
	background: #f1f1f1;
	overflow: hidden;
}

.oa-team__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.oa-team__name {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 22px;
	color: var(--color-ink);
}

.oa-team__role {
	/* .oa-team__card's flex `gap` applies uniformly between all three
	   children (photo/name/role), so this pulls just the name-to-role gap
	   in tighter without affecting the photo-to-name spacing above it. */
	margin: -12px 0 0;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 18px;
	color: var(--color-ink);
}

/* --- Technology that raises standards. --- */
.oa-technology {
	position: relative;
	padding-block: clamp(64px, 8vw, 120px);
}

.oa-technology__inner {
	/* Heading + copy-wrap share this box, so centering it (not the text
	   inside it) centers the whole block as a unit within the section —
	   previously it just filled the .container's full width and sat flush
	   left, since nothing here was narrower than that outer container. */
	position: relative;
	max-width: 1068px;
	margin-inline: auto;
}

.oa-technology__heading {
	margin: 0 0 24px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 27px;
	color: var(--color-ink);
}

/* Exception to the site's global mobile h2 baseline (2.3rem, see
   base.css) — this reads as a small label, not a page heading. */
@media (max-width: 900px) {
	.oa-technology__heading {
		font-size: 1.1rem;
	}
}

.oa-technology__copy-wrap {
	/* overflow:hidden clips .oa-technology__accent to exactly this box —
	   the paragraph's own bounds, nothing above (the heading) or below
	   (other sections) it. */
	position: relative;
	overflow: hidden;
	max-width: 1068px;
}

.oa-technology__copy {
	position: relative;
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.6vw, 2.5rem);
	line-height: 1.375;
	letter-spacing: -0.02em;
	color: var(--color-ink);
}

.oa-technology__accent {
	/* position:absolute (clipped by .oa-technology__copy-wrap's
	   overflow:hidden), NOT position:fixed — fixed would ignore that clip
	   entirely and paint across the full viewport, bleeding onto the
	   heading above and other sections. Its `top` is recalculated on
	   scroll (see our-agency.js) so that, combined with wherever the
	   (clipped) wrapper currently sits, its bottom edge always lands at
	   the same point in the VIEWPORT — the vertical middle of the screen —
	   same visual effect as a fixed band, just properly contained. */
	position: absolute;
	left: 0;
	right: 0;
	top: var(--accent-top, 0px);
	height: 100vh;
	background: var(--color-accent);
	mix-blend-mode: screen;
	pointer-events: none;
}

/* --- We work for results, not awards... --- */
.oa-awards {
	padding-block: clamp(32px, 5vw, 64px) clamp(64px, 8vw, 120px);
}

.oa-awards__heading {
	margin: 0 0 clamp(24px, 3vw, 40px);
	max-width: 910px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	color: var(--color-ink);
}

.oa-awards__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(32px, 6vw, 132px);
}

.oa-awards__row img {
	display: block;
	height: clamp(48px, 5vw, 85px);
	width: auto;
}

/* --- Mobile (Figma node 4014:22658) ---
   Checked directly against this frame rather than just squeezing the
   desktop layout down — several sections restructure outright rather than
   just resizing (the video stack drops its scroll-lock entirely, the team
   heading moves from beside the grid to above/centred it), not just type
   scale. 900px matches the breakpoint used everywhere else on the site for
   this kind of structural change. */
@media (max-width: 900px) {
	/* "Our agency." sits ABOVE the headline here, not below it (the
	   desktop order, unchanged) — flexed into a column so `order` can flip
	   the two without touching the DOM or duplicating markup. */
	.oa-statement-intro {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	.oa-statement__headline {
		order: 1;
		/* The 4 manual <br>s baked into this copy (statement.php) are tuned
		   for desktop's own much wider line, deliberately breaking it into
		   5 short, evenly-weighted lines there — at mobile width, several
		   of those same forced segments ("marketing exists is to",
		   "That's the truth we're") are themselves too wide to fit on one
		   line, so they wrap AGAIN on top of the forced break, leaving
		   short, awkward leftover lines ("is to", "we're") that Figma's
		   own mobile frame doesn't have — it just wraps the whole thing
		   naturally at this width, no manual breaks at all. Hiding them
		   here restores that. */
		max-width: 92%;
	}

	.oa-statement__headline br {
		display: none;
	}

	.oa-statement__label {
		order: 0;
		margin-top: 0;
	}

	/* The two-video sticky-stack (see this section's own top comment in
	   statement.php) is a mouse/trackpad-scroll-era trick, and reserves a
	   tall 172vh of scroll distance to pull it off — dropped entirely here
	   in favour of just the first video, sitting in plain normal flow, full
	   width, immediately after the intro, exactly like any other content.
	   Video 2's whole wrapper is removed rather than just hidden further
	   down the DOM, since it has no role left to play once there's no stack
	   for it to stack onto. */
	.oa-statement__stack {
		height: auto;
	}

	.oa-statement__wrap--video-1 {
		position: static;
	}

	.oa-statement__wrap--video-2 {
		display: none;
	}

	.oa-statement__sticky {
		position: static;
		height: auto;
		display: block;
	}

	.oa-statement__video-card {
		width: 100%;
	}

	.oa-statement__video-card--1 {
		transform: none;
	}

	/* --- A simple approach to agency life. ---
	   Figma's own background rectangle for this section (node 4014:25310)
	   spans the full 393px frame width, not just the inset content column
	   — but since .oa-simple already carries .container, and .container's
	   own centering margin computes to 0 once the viewport is narrower
	   than --container-width (as it always is here), this section's box
	   already spans the full viewport at this width regardless — the
	   background just needs setting, no full-bleed break-out trick
	   required the way a wider, centred desktop container would need. */
	.oa-simple {
		flex-direction: column;
		gap: 30px;
		background: #fafafa;
	}

	.oa-simple__heading {
		width: auto;
		font-size: 25px;
		line-height: 1.4;
	}

	.oa-simple__copy {
		max-width: none;
		font-size: 20px;
		line-height: 1.6;
	}

	.oa-simple__copy p:first-child {
		font-weight: 500;
	}

	/* --- The senior team. ---
	   The heading sits centred ABOVE the photo grid here, not beside it —
	   .oa-team__layout switches from its desktop side-by-side flex row to
	   a stacked column, and the heading's own fixed one-fifth-column width
	   (sized to line up with the desktop photo grid) no longer applies. */
	.oa-team__layout {
		flex-direction: column;
		align-items: center;
		gap: 32px;
	}

	.oa-team__heading {
		flex: none;
		width: auto;
		font-size: 25px;
		font-weight: 400;
		text-align: center;
	}

	.oa-team__grid {
		width: 100%;
	}

	/* --- We work for results, not awards... --- */
	.oa-awards__heading {
		font-size: 25px;
		margin-bottom: 40px;
	}

	/* Each badge is its own real image with its own intrinsic aspect ratio
	   (not a shared placeholder size), so this is a plain 2-column grid
	   rather than trying to reproduce Figma's own slightly irregular
	   per-badge positioning exactly. min-width:0 matters here — without it
	   a grid item's automatic minimum size is content-based (the image's
	   own intrinsic width), not the track's, and the widest badge
	   (European Search Awards) overflowed its column instead of shrinking
	   to fit it (same issue as .work-case-study-card and .work-logos__tile
	   on the Our Work page — see those for the fuller writeup). */
	.oa-awards__row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-items: start;
		gap: 32px 16px;
	}

	.oa-awards__row img {
		min-width: 0;
		height: auto;
		max-height: 60px;
		max-width: 100%;
	}
}

@media (max-width: 700px) {
	.oa-team__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}