/* =========================================================================
   Agency — desktop: Figma "AGENCY" (1179:12880, 1728); mobile: 1261:249 (440).
   Black page, white text; the Insights block + footer stay white (Figma "Frame 69").
   Header is white over the black top until it docks (body.has-dark-top).
   ========================================================================= */

.agency { background: var(--black); color: var(--white); }
.agency .insights { background: var(--white); color: var(--black); }
.agency .insights__desc { color: #2a2a2a; } /* Figma AGENCY (home: #565656) */


.accent { color: var(--teal); }

/* Intro — mobile: label y239; text y410 36/40 300 +2%; sub y730 16/24 white 75%.
           desktop: label + text y533; sub y847 922w 20/30 +2% white 75%. */
.page-intro--agency .page-intro__text { margin-top: calc(143 * var(--u)); letter-spacing: 0.02em; }
.page-intro__sub { margin-top: calc(40 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(24 / 16); color: rgb(255 255 255 / 0.75); }

/* Hero image — mobile y958 400×420 r5; desktop y1127 1598×901 r10 (Figma x55; here on the x65 column like every other frame) */
.agency-hero { margin: calc(60 * var(--u)) auto 0; }
.agency-hero img,
.agency-hero video { width: 100%; aspect-ratio: 400 / 420; object-fit: cover; border-radius: 5px; }

/* Clients — mobile: title y1438 36/40 300 +2%; columns from +40: Organisations full width, then
   Agencies (x20) | Brands (x239), 180 wide, 40 apart; heads 24/30 #00FFE1, names 16/30 #A4A4A4.
   desktop: title y2184 56/64 300; columns y2188 at x741 (326) / x1182 (181) / x1478 (186);
   heads 32/45 white, one blank line (30), names 20/30 #A4A4A4. Highlight: homepage iventions (teal). */
.agency-clients { padding-top: calc(60 * var(--u)); }
.agency-clients__title { font-size: calc(36 * var(--u)); font-weight: 300; line-height: calc(40 / 36); letter-spacing: 0.02em; }
.agency-clients__cols {
	display: grid;
	grid-template-columns: calc(180 * var(--u)) calc(180 * var(--u));
	grid-template-areas: "orgs orgs" "agencies brands";
	justify-content: space-between;
	row-gap: calc(40 * var(--u));
	margin-top: calc(40 * var(--u));
}
.agency-clients__col--orgs { grid-area: orgs; width: calc(326 * var(--u)); } /* Figma text box 326 on both */
.agency-clients__col--brands { grid-area: brands; }
.agency-clients__col--agencies { grid-area: agencies; }
.agency-clients__head { font-family: var(--nhg); font-weight: var(--nhg-weight); white-space: nowrap; /* lines break only at Figma's <br>; the stand-in font runs a few px wider */ font-size: calc(24 * var(--u)); line-height: calc(30 / 24); color: var(--cyan); }
.agency-clients__list { margin-top: calc(30 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(30 / 16); }
.agency-clients__item { color: #a4a4a4; transition: color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } /* iventions.com: .6s easeOutQuart */
.agency-clients__item.is-active { color: var(--teal); }

/* Founder & Team — mobile: title y3282; name y3362 24/30 #00FFE1; bio +16 16/24 #A8A8A8;
   portrait +40 400×355 r5; photos +12 196 / 192 × 270 r5, gap 12; then +60 to the white block.
   desktop: title y3272 (left) + photos y3276 x735 452 / 444 × 493 r6 (gap 32);
   name x64 y3797 32/45 +2%, bio +48 446w 20/30 +2%; portrait x735 y3797 928×824 r6; +160 to white. */
.team { display: grid; padding-top: calc(60 * var(--u)); padding-bottom: calc(60 * var(--u)); }
.team__title { font-size: calc(36 * var(--u)); font-weight: 300; line-height: calc(40 / 36); letter-spacing: 0.02em; }
.team__founder { margin-top: calc(40 * var(--u)); }
.team__name { font-size: calc(24 * var(--u)); line-height: calc(30 / 24); white-space: nowrap; color: var(--cyan); } /* one line, as Figma (406 box) */
.team__bio { margin-top: calc(16 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(24 / 16); color: #a8a8a8; }
.team__bio p + p { margin-top: calc(24 * var(--u)); }
.team__portrait { order: 1; margin: calc(40 * var(--u)) 0 0; overflow: hidden; border-radius: 5px; background: #0d0d0d; }
.team__portrait img,
.team__portrait video { width: 100%; aspect-ratio: 400 / 355; object-fit: cover; }
.team__photos { order: 2; display: grid; grid-template-columns: 196fr 192fr; gap: calc(12 * var(--u)); margin-top: calc(12 * var(--u)); }
.team__photos img,
.team__photos video { width: 100%; aspect-ratio: 196 / 270; object-fit: cover; border-radius: 5px; }
.team__photos picture:last-child img { aspect-ratio: 192 / 270; }
.d-only { display: none; }
.agency-clients__title .m-only { display: block; max-width: calc(264 * var(--u)); } /* Figma 440: "Folks we’ve worked with" (desktop: "Clients") */

@media (min-width: 1200px) {
	.page-intro--agency { padding-top: calc(533 * var(--u)); }
	.page-intro--agency .page-intro__label { margin-top: 0; }
	.page-intro--agency .page-intro__text { margin-top: 0; letter-spacing: 0; }
	.page-intro__sub { margin-top: calc(57 * var(--u)); max-width: calc(922 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(30 / 20); letter-spacing: 0.02em; }

	.agency-hero { margin-top: calc(160 * var(--u)); padding-inline: calc(var(--gutter) + 1 * var(--u)); }
	.agency-hero img,
.agency-hero video { aspect-ratio: 1598 / 901; border-radius: 10px; }

	.agency-clients { display: grid; grid-template-columns: calc(677 * var(--u)) 1fr; align-items: start; padding-top: calc(156 * var(--u)); }
	.agency-clients__title { margin-left: calc(1 * var(--u)); font-size: calc(56 * var(--u)); line-height: calc(64 / 56); letter-spacing: 0; }
	.agency-clients__cols {
		grid-template-columns: calc(326 * var(--u)) calc(181 * var(--u)) calc(186 * var(--u));
		grid-template-areas: "orgs brands agencies";
		column-gap: calc(115 * var(--u));
		justify-content: start;
		margin-top: calc(4 * var(--u));
	}
	.agency-clients__head { font-size: calc(32 * var(--u)); line-height: calc(45 / 32); color: var(--white); }
	.agency-clients__list { font-size: calc(20 * var(--u)); line-height: calc(30 / 20); }

	.team {
		grid-template-columns: calc(662 * var(--u)) calc(928 * var(--u));
		grid-template-areas: "title photos" "founder portrait";
		justify-content: space-between;
		row-gap: calc(28 * var(--u));
		padding-top: calc(155 * var(--u)); /* tallest client column (930 with three wrapped names) → title y3272 */
		padding-bottom: calc(160 * var(--u));
		padding-inline: var(--gutter) calc(var(--gutter) + 1 * var(--u));
	}
	.team__title { grid-area: title; align-self: start; margin-left: calc(1 * var(--u)); font-size: calc(56 * var(--u)); line-height: calc(64 / 56); letter-spacing: 0; }
	.team__photos { grid-area: photos; order: 0; grid-template-columns: calc(452 * var(--u)) calc(444 * var(--u)); gap: calc(32 * var(--u)); margin-top: calc(4 * var(--u)); }
	.team__photos img,
.team__photos video { aspect-ratio: 452 / 493; border-radius: 6px; }
	.team__photos picture:last-child img { aspect-ratio: 444 / 493; }
	.team__founder { grid-area: founder; margin-top: 0; }
	.team__name { max-width: calc(406 * var(--u)); white-space: normal; font-size: calc(32 * var(--u)); line-height: calc(45 / 32); letter-spacing: 0.02em; color: var(--white); }
	.team__bio { max-width: calc(446 * var(--u)); margin-top: calc(48 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(30 / 20); letter-spacing: 0.02em; color: var(--white); }
	.team__bio p + p { margin-top: calc(30 * var(--u)); }
	.team__portrait { grid-area: portrait; order: 0; margin: 0; border-radius: 6px; }
	.team__portrait img,
.team__portrait video { aspect-ratio: 928 / 824; }
	.d-only { display: inline; }
	.m-only { display: none !important; }
}