/*
 * Our Partners page.
 *
 * There is no Figma frame for this route. Page 56:232 of the owned file
 * (o76hOVJzJ62KRxt29L1HoH) holds only About 56:234, Homepage 56:503, Services
 * 56:767, Articles 56:1088, blog 56:1264 and Contact 56:1566. So every number
 * below is copied out of an already approved block on another page rather than
 * measured off a new one, and the file introduces zero new type sizes, zero new
 * colours, zero new radii and zero new motion.
 *
 * Where each value comes from:
 *   hero               pages-fidelity.css .inner-hero, 852 band, 95px motto
 *   statement          about-fidelity.css .about-statement, 20 / 1.3 label and
 *                      44 / 1.17429 statement, restated here because those rules
 *                      are scoped .about-page
 *   wall section pad   pages-fidelity.css .services-overview horizontal token
 *   wall heading       pages-fidelity.css .team-heading h2 / .kits-heading h2, 80
 *   testimonial sliders home-fidelity.css .ebiom-home .testimonial-section,
 *                      restated here for the same scoping reason
 *   closing CTA        pages-fidelity.css .inner-cta, untouched
 *
 * Enqueued in functions.php (ebiom_assets) for is_page('our-partners'), after
 * ebiom-main and ebiom-pages-fidelity, with a filemtime version.
 */

/*
 * The shared .inner-hero > img rule carries the About page's own
 * rotate(180deg) scaleX(-1) mirror. The partners hero photograph is a plain
 * aerial frame and reads upside down under it, so this one route opts out.
 * Nothing else about the hero changes.
 */
.partners-page .partners-hero > img { transform: none; }

/*
 * SECTION: Hero legibility. The same treatment the Publications and Archives
 * heroes carry, restated here because publications-fidelity.css does not load
 * on this route. The aerial interchange is bright along the top of the frame:
 * measured behind the 20px lede with the text hidden, 11% of the pixels under
 * 4.5:1 against cream and a worst pixel of 1.00:1. Two layers in the existing
 * forest, no new colour and no new type size: a flat wash across the band, and
 * a soft elliptical scrim centred on the copy block that fades out before the
 * edges of the frame. It tracks the copy box, so it holds at every width.
 */
.partners-page .inner-hero .inner-hero-shade {
	background: rgba(37, 52, 50, .40);
	mix-blend-mode: normal;
}
.partners-page .inner-hero-copy::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -100px -140px -120px;
	/*
	 * closest-side, so the two radii are exactly half the box and the scrim
	 * reaches zero on the frame it is drawn in. An explicit radius is a radius,
	 * not a diameter: sized at 100% it ran past the box and the browser clipped
	 * it into a visible rectangle with hard edges.
	 */
	background: radial-gradient(ellipse closest-side at 50% 50%, rgba(37, 52, 50, .60) 0%, rgba(37, 52, 50, .58) 70%, rgba(37, 52, 50, .30) 88%, rgba(37, 52, 50, 0) 100%);
	pointer-events: none;
}

/* SECTION: Statement. Verbatim .about-statement, unscoped from .about-page. */
.partners-page .about-statement {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 120px max(53px, calc((100vw - 1334px) / 2));
	background: var(--color-forest);
	color: var(--color-cream);
	text-align: center;
}
.partners-page .about-statement span {
	font-size: 20px;
	line-height: 1.3;
}
.partners-page .about-statement p {
	width: min(1098px, 100%);
	margin: 0;
	font-family: "Geist Local", Geist, Inter, Arial, sans-serif;
	font-weight: var(--weight-emphasis);
	font-size: 44px;
	line-height: 1.17429;
}

/* SECTION: Logo walls. Cream then blue, the band rhythm the Services page
 * already alternates. The customer wall runs four across so its 32 marks fill
 * eight exact rows; the scientific wall runs five across so its 5 fill one. */
.partners-page .partner-wall-section {
	padding: 96px max(53px, calc((100vw - 1334px) / 2));
	background: var(--color-cream);
	color: var(--color-ink);
}
.partners-page .partner-wall-section.is-scientific {
	background: var(--color-blue);
}
.partners-page .partner-wall-section > h2 {
	margin: 0 0 68px;
	font-size: 80px;
	line-height: 1.04;
}
.partners-page .partner-wall {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: center;
	gap: 54px 40px;
}
.partners-page .partner-wall-section.is-scientific .partner-wall {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
.partners-page .partner-wall > span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 88px;
}
.partners-page .partner-wall img {
	width: auto;
	height: auto;
	max-width: min(176px, 100%);
	max-height: 88px;
	object-fit: contain;
	filter: saturate(.95);
}

/* ======================================================================
 * SECTION: Testimonial sliders, one under each logo wall.
 *
 * Client point 1464dff7. This is the homepage .testimonial-section, restated
 * here because home-fidelity.css does not load on this route, exactly the way
 * .about-statement and .driving-section already are above. Every number below
 * is copied from .ebiom-home in home-fidelity.css: the 194 / 253 / 721 track,
 * the 45px gap, the 46 / 86 vertical padding, the 1258 content rail and the
 * 1332 plate rail, the 253 by 433 portrait, the 40px round controls and the
 * Geist 30 on 38.83 quote.
 *
 * Three things are deliberately not copied, and each is forced by this page.
 *
 * There is no h2. On the homepage the module stands between two unrelated
 * bands and needs its own title; here the wall heading is a few pixels above
 * it, and the client asked for the testimonials to belong to that wall, so a
 * second title in between would work against the point. The first column is
 * therefore reserved rather than filled: it is where the speaker, the role and
 * the two arrows sit, which is where they sit on the homepage too. The two
 * grid items are placed explicitly for the same reason, because with the
 * heading gone auto placement would put the portrait in the first column and
 * the name block, which is positioned 239px to its left, would land off the
 * page.
 *
 * The yellow plate is anchored top and bottom instead of carrying a fixed
 * 476px height. The homepage plate is 476 tall because the homepage quote box
 * is 476 tall, and that only holds while nothing overflows it. Measured on the
 * homepage itself: at 900, 768, 700 and 640 the shared rule in main.css moves
 * the quote onto a second grid row, the quote's bottom edge lands 1000px down
 * a 1086px band while the plate still ends at 522px, and 478px of quote is
 * printed on cream outside its own plate. Reported separately, because
 * home-fidelity.css is not this file's to change. Here it cannot happen: these
 * are the client's legacy testimonials, the longest is 743 characters in
 * French against roughly 300 on the homepage, so a fixed plate would have been
 * wrong at desktop too. Anchored top and bottom, the plate is the band, at
 * every width and every quote length.
 *
 * The quote box may grow. It keeps 476px as a floor, so a short testimonial
 * still gets the full plate and the band still opens at the homepage's 608,
 * and a long one makes the band taller instead of spilling out of it.
 * ====================================================================== */
.partners-page .testimonial-section {
	position: relative;
	display: grid;
	grid-template-columns: 194px 253px 721px;
	gap: 45px;
	align-items: center;
	min-height: 608px;
	margin: 0;
	padding: 46px max(91px, calc((100% - 1258px) / 2)) 86px;
	background: var(--color-cream);
}
/* The scientific slider takes the ground of the wall it belongs to, so the
 * pair reads as one block rather than as a blue wall followed by an unrelated
 * cream band. Same alternation the rest of the page already runs. */
.partners-page .testimonial-section.is-scientific {
	background: var(--color-blue);
}
.partners-page .testimonial-section::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 46px;
	bottom: 86px;
	left: max(54px, calc((100% - 1332px) / 2));
	right: max(54px, calc((100% - 1332px) / 2));
	border-radius: 5px;
	background: var(--color-yellow);
}
.partners-page .testimonial-section > * {
	position: relative;
	z-index: 1;
}
.partners-page .testimonial-stage,
.partners-page .testimonial-slide { display: contents; }
.partners-page .testimonial-slide[hidden] { display: none; }
.partners-page .testimonial-slide > * { position: relative; z-index: 1; }
.partners-page .testimonial-person {
	grid-column: 2;
	display: block;
	width: 253px;
	height: 433px;
	min-height: 433px;
	padding: 0;
}
.partners-page .testimonial-person > div {
	position: absolute;
	left: -239px;
	bottom: 28px;
	width: 194px;
	padding: 0;
}
.partners-page .testimonial-person strong,
.partners-page .testimonial-person span {
	display: block;
	font-size: 16px;
	line-height: 1.294;
}
.partners-page .testimonial-person strong { font-weight: 700; }
.partners-page .testimonial-person .testimonial-image {
	width: 253px;
	height: 433px;
	border-radius: 5px;
	object-fit: cover;
}
.partners-page .testimonial-controls {
	display: flex;
	gap: 8px;
	margin-top: 18px;
}
.partners-page .testimonial-controls button {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	padding: 0;
	background: var(--color-blue);
	cursor: pointer;
}
.partners-page .testimonial-controls button:first-child { transform: rotate(180deg); }
/*
 * The site's focus ring is :focus-visible { outline: 3px solid #ffcd5c } in
 * main.css, and #ffcd5c is --color-yellow, which is the plate these two
 * buttons stand on. Measured on the rendered pixels at deviceScaleFactor 2,
 * with the button focused: the ring colour and the ground under it are both
 * rgb(255, 205, 92), a contrast ratio of 1.00 to 1, and the 144 by 144 crop
 * around the focused control contains no ring pixel that differs from the
 * plate at all. A keyboard user gets no indicator whatsoever. Ink keeps the
 * ring's shape and width and simply makes it visible: 13.25 to 1 against the
 * yellow plate and 10.55 to 1 against the blue button it surrounds.
 *
 * The same rule and the same plate exist on the homepage module, where the
 * ring is equally invisible. main.css is not this file's to change, so this
 * fix is scoped to the two sliders this page introduces and the homepage
 * instance is reported rather than silently left behind.
 */
.partners-page .testimonial-controls button:focus-visible { outline-color: var(--color-ink); }
.partners-page .testimonial-controls button:disabled { opacity: .42; cursor: default; }
.partners-page .testimonial-controls img {
	width: 16px;
	height: 14px;
	border-radius: 0;
	object-fit: contain;
}
/* Figma 56:691 "Case Study Title": Geist Regular 30 on 38.83, the same
 * declaration home-fidelity.css makes, stated rather than inherited for the
 * same reason it is stated there. */
.partners-page .testimonial-section blockquote {
	grid-column: 3;
	display: flex;
	align-items: center;
	width: 721px;
	height: auto;
	min-height: 476px;
	margin: 0;
	padding: 65px 21px 65px 10px;
	font-family: "Geist Local", Geist, Inter, Arial, sans-serif;
	font-size: 30px;
	font-style: normal;
	font-weight: 400;
	font-variation-settings: normal;
	line-height: 1.294;
}

/*
 * The 194 / 253 / 721 track and the 91px gutter are drawn for 1440 and add up
 * to exactly 1440. Below that the gutter stays at its 91px floor while the
 * three fixed columns do not shrink, so the quote column runs past the right
 * edge of the yellow plate and main clips it. Measured before this rule: the
 * quote box sat outside the plate at 1101, 1180, 1240 and 1332 in both
 * languages, and inside it at 1024 and at 1440. The last column becomes
 * flexible and the gutter drops to 65, which is the same answer
 * home-fidelity.css gives the same module in the same band.
 */
@media (min-width: 1101px) and (max-width: 1439px) {
	.partners-page .testimonial-section {
		grid-template-columns: 194px 253px minmax(0, 1fr);
		padding-left: 65px;
		padding-right: 65px;
	}
	.partners-page .testimonial-section blockquote { width: auto; }
}

@media (max-width: 1100px) {
	.partners-page .about-statement p { font-size: 36px; }
	.partners-page .partner-wall-section > h2 { font-size: 62px; }
}

/*
 * SLIDER, 901 to 1100.
 *
 * The homepage keeps its 194px lead column all the way down to 620 because its
 * own h2 fills it. With no heading here that column would be 194px of nothing,
 * so the module drops to two tracks: the portrait keeps its 253 by 433, and
 * the name, the role and the arrows come out of absolute positioning and sit
 * with it. The quote column is still 623px at 1024, which is wide enough to
 * set 26px cleanly.
 *
 * 26px rather than the module's 30. The quote box is 623px here against 721 at
 * 1440, and these are the client's legacy testimonials: the longest is 743
 * characters in French against roughly 300 on the homepage the module was
 * drawn for. 26 is the size this page already set for exactly these quotes
 * before they became slides, so it is not a new type size.
 */
@media (min-width: 901px) and (max-width: 1100px) {
	.partners-page .testimonial-section {
		grid-template-columns: 253px minmax(0, 1fr);
		gap: 40px;
		min-height: 0;
		padding: 46px 54px 86px;
	}
	.partners-page .testimonial-section::before { left: 24px; right: 24px; }
	.partners-page .testimonial-person {
		grid-column: 1;
		height: auto;
		min-height: 0;
	}
	.partners-page .testimonial-person > div {
		position: static;
		width: 253px;
		padding-top: 20px;
	}
	.partners-page .testimonial-section blockquote {
		grid-column: 2;
		width: auto;
		min-height: 433px;
		padding: 40px 30px;
		font-size: 26px;
	}
}

/*
 * SLIDER, 900 and below.
 *
 * Two columns stop paying for themselves once the portrait's fixed 253px is a
 * third of the viewport. At 768 the quote box was 367px wide and set a 26px
 * line to about 28 characters, so the French quote broke into 34 ragged lines.
 * The band stacks instead: the portrait and its byline first, the quote under
 * them across the full column, 660px at 768. It is the homepage's own phone
 * treatment of this module, moved up to where the arithmetic says it starts
 * paying, and the plate keeps its top and bottom anchors so it still covers
 * the whole band rather than the first 476px of it.
 */
@media (max-width: 900px) {
	.partners-page .testimonial-section {
		display: block;
		min-height: 0;
		padding: 46px 54px;
	}
	.partners-page .testimonial-section::before {
		top: 46px;
		bottom: 46px;
		left: 24px;
		right: 24px;
	}
	.partners-page .testimonial-person {
		width: 253px;
		height: auto;
		min-height: 0;
		margin: 0;
	}
	.partners-page .testimonial-person > div {
		position: static;
		width: 253px;
		padding-top: 20px;
	}
	.partners-page .testimonial-section blockquote {
		width: auto;
		min-height: 0;
		/* The trailing 0 put the last line of the quote on the edge of the
		   yellow plate at every width below 900. The homepage module this one
		   reuses never drops below 40. */
		padding: 36px 30px 40px;
		font-size: 26px;
	}
}

@media (max-width: 980px) {
	.partners-page .partner-wall-section { padding: 72px 24px; }
	/*
	 * main.css turns .partner-row into a horizontal scroller below 980 and
	 * again below 620, which is right for the homepage strip of six and wrong
	 * for a wall of twenty. The wall stays a wall and simply loses columns.
	 */
	.partners-page .partner-wall,
	.partners-page .partner-wall-section.is-scientific .partner-wall {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		overflow-x: visible;
		gap: 40px 28px;
		padding-bottom: 0;
	}
	.partners-page .partner-wall img { flex: none; }
	.partners-page .about-statement { padding: 80px 24px; }
	.partners-page .about-statement p { font-size: 30px; }
}

@media (max-width: 620px) {
	.partners-page .partner-wall,
	.partners-page .partner-wall-section.is-scientific .partner-wall {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 20px;
	}
	.partners-page .partner-wall-section > h2 { font-size: 44px; }
	.partners-page .about-statement p { font-size: 26px; }
	/*
	 * On a phone the portrait fills the column at its own 253 by 433 ratio and
	 * the type takes the module's own phone step, both exactly as the homepage
	 * does at this width.
	 */
	.partners-page .testimonial-section { padding: 46px 18px; }
	.partners-page .testimonial-section::before {
		left: 18px;
		right: 18px;
	}
	.partners-page .testimonial-person {
		width: calc(100% - 50px);
		margin: 0 25px;
	}
	.partners-page .testimonial-person > div { width: 100%; }
	.partners-page .testimonial-person .testimonial-image {
		width: 100%;
		height: auto;
		aspect-ratio: 253 / 433;
	}
	.partners-page .testimonial-section blockquote {
		padding: 36px 25px 0;
		font-size: 22px;
	}
}

/* ======================================================================
 * CLIENT REVIEW ROUND 2.
 *
 * The page had rhythm and still read as a template: a statement, two flat
 * logo grids, then four near identical split bands, then the closer. Two of
 * the three answers survive round 3 and are below: the full bleed photographic
 * band between the walls, and the figure beside each wall heading. The third,
 * a length driven yellow and forest treatment for the four quote splits, went
 * with the splits themselves when the client asked for sliders instead.
 * ====================================================================== */

/* SECTION: Full bleed photographic band, between the two walls.
 *
 * The homepage Research and Innovation band. Its positioning rule exists only
 * as .ebiom-home .driving-background and home-fidelity.css does not load here,
 * so without this copy the photograph renders as a plain inline image at its
 * own size and the band is not a band. The stacking is stated too: main.css
 * draws its scrim in a ::before, and a generated first child paints under a
 * positioned <img> that comes after it in the DOM, so the scrim would sit
 * behind the photograph and do nothing. */
.partners-page .driving-section {
	min-height: 560px;
	padding: 96px max(53px, calc((100vw - 1334px) / 2));
}
.partners-page .driving-background {
	position: absolute;
	z-index: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}
.partners-page .driving-section::before {
	z-index: 1;
	background: rgba(37, 52, 50, .52);
}
.partners-page .driving-grid {
	grid-template-columns: minmax(0, 640fr) minmax(0, 638fr);
	gap: 64px;
	align-items: center;
}
.partners-page .driving-grid h2 {
	max-width: 581px;
	margin: 0 0 40px;
	font-size: 60px;
	line-height: 1.04;
}
.partners-page .driving-grid p {
	max-width: 654px;
	margin: 0;
	font-family: "Geist Local", Geist, Inter, Arial, sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.3;
}
.partners-page .driving-grid p + p {
	margin-top: 25px;
}

/* SECTION: Wall figures. A wall reads as a roster rather than as a grid to get
 * through once the heading says how many organisations there are. Round 2
 * counted the rows; client point 5c35e491 asked for a typed figure instead,
 * because how many organisations E-BIOM works with is not the same number as
 * how many marks fit on a page. The pill is unchanged and is still the site
 * .tag; only the alignment beside an 80px heading is new, and the family is
 * stated because a pill inside an h2 would otherwise inherit Exposure. */
.partners-page .partner-wall-section > h2 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}
.partners-page .partner-wall-count {
	min-height: 31px;
	margin-top: 0;
	align-self: center;
	font-family: "Geist Local", Geist, Inter, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.12;
}

@media (max-width: 1100px) {
	.partners-page .driving-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}
	.partners-page .driving-grid h2 { font-size: 48px; }
}

@media (max-width: 980px) {
	.partners-page .driving-section {
		min-height: 0;
		padding: 80px 24px;
	}
}

@media (max-width: 620px) {
	.partners-page .driving-section { padding: 70px 18px; }
	.partners-page .driving-grid h2 { font-size: 40px; }
	.partners-page .driving-grid p { font-size: 18px; }
	.partners-page .partner-wall-section > h2 { gap: 12px; }
}