/*
 * About page Figma fidelity pass, owned Figma file o76hOVJzJ62KRxt29L1HoH,
 * About frame 56:234 "About us" (1440 x 7943).
 *
 * The frame's ordered blocks and the page sections match one for one:
 *   Background Image 852 + Main 772 + Header/Light 95 -> .inner-hero.about-hero
 *   Section - Innovation / R&D 56:272  583  -> .about-statement
 *   variation-1-split-screen 56:277    612  -> .about-split
 *   variation-1-split-screen 56:286    602  -> .about-split.is-reversed
 *   Section - Values - Horizontal Cards 56:295 1084 -> .values-section
 *   Expertise Section 56:352          3169  -> .team-section
 *   Section - Innovation / R&D 56:444  583  -> .inner-cta
 *   Footer 56:457                      458  -> footer.php
 *
 * Everything below is a measured correction against that frame. Numbers in
 * comments are the Figma values, so a later pass can re-check them without
 * re-reading the file. Selectors are scoped with .about-page so they win on
 * specificity over main.css and pages-fidelity.css whatever the load order.
 *
 * This file is enqueued in functions.php (ebiom_assets) for is_page('about-us'),
 * after ebiom-main and ebiom-pages-fidelity.
 *
 * The five core value icons are exported from their own Figma vector nodes
 * (56:303 test tube, 56:315 ladder, 56:324 no entry, 56:334 ruler, 56:344
 * molecule) into theme/e-biom/assets/images/value-*.svg, one distinct glyph
 * per value row. See page-about.php for the filename to row mapping.
 */

/* SECTION: Hero
 * Frame Background Image 56:235 is a fixed 852 band, not a viewport height,
 * and the shared .inner-hero rule was being stretched to 100vh upstream.
 * Motto 56:241: Exposure VAR 95.29577 / 99.10760, letter-spacing 0, centred,
 * text box 1106 wide, top edge 295 below the band top.
 */
.about-page .inner-hero {
	height: 852px;
	min-height: 852px;
}

.about-page .inner-hero h1 {
	width: min(1200px, 100%);
	font-size: 95.296px;
	line-height: 99.108px;
	letter-spacing: 0;
}

/*
 * Two things at once.
 * Grid centring alone lands the 297 tall heading at 278 in an 852 band; the
 * frame puts it at 295. The padding grows the centred box, so half of it,
 * 17px, is the downward shift that closes the gap.
 * The frame's text box is 1106 wide, which the English lines clear with room
 * to spare; the French first line, "Construire un monde ou", needs about 1090
 * once tracking is back at 0 and was folding onto a fourth line inside 1106.
 * The extra reach changes nothing in English, where every line is its own
 * block element and already fits.
 */
.about-page .about-hero .inner-hero-copy {
	width: min(1200px, calc(100% - 108px));
	padding-top: 34px;
}

/* SECTION: Statement
 * Section - Innovation / R&D 56:272, 583 tall.
 * Subtitle 56:275: Geist 400 20 / 26.
 * Innovation Title 56:276: Geist 500 44 / 51.66876, 1098 wide, centred.
 */
.about-page .about-statement span {
	font-size: 20px;
	line-height: 1.3;
}

.about-page .about-statement p {
	font-size: 44px;
	line-height: 1.17429;
}

/* SECTION: Splits
 * Frame 1321315737 inside both splits: 27 side padding, image 693 wide by
 * 471 tall, copy column 639 wide with 25 of inner left padding, 54 between
 * them. The two columns are deliberately unequal; an even 50/50 split was
 * making the photograph too narrow and the copy measure too wide.
 * Intro Title 56:283 / 56:290: Exposure 60 / 62.4, 49 below it.
 * Body 56:285 / 56:292: Geist 400 26 / 33.8.
 */
/*
 * minmax(0, Npx), not a bare Npx. The generic .about-split in
 * pages-fidelity.css already solved this with minmax and fluid padding; this
 * page-specific override reintroduced the fixed-track version and brought the
 * bug back only here. A fixed 693 plus 639 plus the 54 gap plus 2x27 padding
 * needs 1440px of room, so between 1101 (the mobile stack) and 1386 the split
 * overflowed and, because main clips overflow-x, the copy was not scrolled to,
 * it was simply gone: measured 143px missing at 1101, 53px at 1280.
 * minmax(0, Npx) keeps the frame's 693:639 ratio and the exact size at 1440
 * and above, and lets both columns shrink together below that instead of
 * spilling past the edge.
 */
.about-page .about-split {
	grid-template-columns: minmax(0, 693px) minmax(0, 639px);
	justify-content: center;
	gap: 54px;
	min-height: 612px;
	padding: 110px max(27px, calc((100vw - 1440px) / 2)) 31px;
}

.about-page .about-split.is-reversed {
	grid-template-columns: minmax(0, 639px) minmax(0, 693px);
	min-height: 602px;
	padding: 31px 27px 100px;
}

.about-page .about-split > div:last-child {
	padding: 0 0 0 25px;
}

.about-page .about-split h2 {
	margin-bottom: 49px;
	font-size: 60px;
	line-height: 1.04;
}

/*
 * Point afefc504: "Geist Regular and it needs to be a bit smaller size, its
 * competing too much with the tittle. Same for the next one."
 *
 * Measured first: the family and the weight were already right. Computed style
 * on both split paragraphs read Geist Local 400, so nothing was rendering in a
 * medium cut. The competition was pure scale. The frame's body here is 26 and
 * its title 60, a ratio of 2.3, which at a 587 measure puts three lines of
 * near-headline type directly under the headline. The size drops to the 20 the
 * design system already uses for body copy elsewhere on this page (the
 * statement label 56:275 is Geist 400 20 / 26), taking the ratio to 3.0.
 * Family and weight are restated so neither can drift back later.
 */
.about-page .about-split p {
	width: min(587px, 100%);
	font-family: "Geist Local", Geist, Inter, Arial, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.5;
}

/*
 * Point e6c501bc, "This photo is stretched", on the mission photograph 56:280.
 *
 * Root cause. The packaged asset is a portrait, 820 by 1024, a ratio of 0.80.
 * The frame's window is landscape, 693 by 471, a ratio of 1.47. That is an
 * aspect mismatch of 1.84 to one, and object-fit cover resolved it by throwing
 * away 46 per cent of the picture height: at object-position center 22 per cent
 * the visible band was source rows 103 to 660, which cut the crown of the head
 * off at the top edge and pushed the camera and hands out of the bottom. What
 * survived was a head at 62 per cent of the frame width with no room around it,
 * which is what reads as stretched. Nothing was geometrically distorted, and
 * measurement proved it: the rendered pixels matched a true cover crop of the
 * source to a mean channel difference of 1.5 out of 255. The neighbouring
 * split's photograph is 1800 by 1196, a ratio of 1.505 against the same 1.47
 * window, so it loses two per cent and nobody has ever complained about it.
 *
 * Fix. The window stops imposing a shape on the photograph. The image renders
 * at its own intrinsic ratio, capped at 720 tall and at the column width, and
 * the wrapper shrinks to fit it, so cover has nothing left to crop. Sized this
 * way rather than with a hard aspect-ratio on purpose: a landscape photograph
 * uploaded over this one from the editor is bounded by the column width instead
 * and is equally uncropped, so the same bug cannot come back inverted.
 */
/*
 * Both split photographs are 693 x 471 landscape. Figma node 56:277 draws the
 * "On a mission" image at exactly the same frame as node 56:286 next to it, and
 * crops the tall source into it with imageTransform
 * [[1,0,0],[0,0.54376,0.37575]], full width, vertical 37.6 to 92.0 percent.
 *
 * An earlier round measured the rendered box against the file's own natural
 * ratio, found 0.801 = 0.801, and concluded the photo was not distorted. It
 * was not, and that was never the complaint: the client said "wrong format",
 * meaning the wrong SHAPE. That comparison could not have caught it. The
 * source file now carries Figma's crop, so the special case below is gone and
 * this band uses the same rule as its twin.
 */
/* SECTION: Values
 * Section - Values - Horizontal Cards 56:295, 1084 tall, 69 of top padding.
 * Heading 56:298: Exposure 80 / 96.015625 in a 345 box, so it sets two lines
 * and the heading block stands 283 tall. The first card sits on the same top
 * edge as the heading, which is what the negative margin buys.
 * Card titles 56:304 etc: Exposure 400 35 / 39.90439, icon 24 to their left.
 * Card bodies: Geist 400 18 / 25.2. Cards 649 wide, 32 apart, 28 between rows.
 */
/*
 * Part of point 94d0e920. pages-fidelity.css centres the heading inside this
 * block, so where its first line starts depends on how many lines it sets: two
 * in English, three in French, where "fondamentales" takes a line of its own.
 * Any card offset tuned against the English page would therefore be wrong on
 * the French one. Top aligning makes the first line start at the block's top
 * edge in both languages, so a single offset below can hold for both.
 */
.about-page .values-heading {
	height: 283px;
	min-height: 283px;
	align-items: flex-start;
}

.about-page .values-heading h2 {
	width: 345px;
	font-size: 80px;
	line-height: 1.2002;
}

.about-page .values-grid {
	gap: 28px 32px;
	margin-top: 32px;
}

.about-page .value-card {
	min-height: 282px;
	border-radius: 0;
}

/*
 * Point 94d0e920, "This should be aligned with the headline", on value card 1.
 *
 * Heading block 283 plus the 32 that separates it from the grid is 315, and
 * that is what the first card used to climb, which levelled the card's border
 * box with the heading's border box. Boxes are not what anyone sees. The
 * heading block is a centred flex box 283 tall holding two lines of Exposure at
 * 80 / 96, so its first line's ink starts 45 below the box top; the card's own
 * 48 of padding then a 35 / 39.9 title puts its ink 13 higher than that.
 * Measured on the rendered page at 1440, ink top to ink top: headline 170,
 * card title 157, so the card sat 13 high of the words it was meant to match.
 *
 * Aligning to the ink instead of to the rectangle takes three things. The
 * heading block is top aligned (above) so its first line always starts at the
 * block's top edge. The block is held at the frame's own 283 whatever it
 * contains, so the grid below it, and therefore this card, starts on the same
 * line in both languages: left to grow, the three line French heading pushed
 * the grid down 5 and reopened the gap there only. And the climb becomes 352,
 * which is the 315 that levels the two boxes plus the 37 that the two cap
 * heights differ by, Exposure at 80 / 96.02 against Exposure at 35 / 39.89.
 * Measured after, ink top to ink top at 1440: English headline 2999.01 against
 * card title 2998.95, French 3007.60 against 3007.55. Under a tenth of a pixel
 * apart in both languages, from 13 out in English before.
 */
.about-page .value-card:first-child {
	align-self: start;
	margin-top: -352px;
}

/*
 * Frame 2147206414 lets its title run past the 553 stack it sits in, which is
 * how "Serve the decision, not the ego" and "Garder une longueur d'avance"
 * stay on one line there. Reclaiming 24 of the card's 48 right padding gives
 * the heading the same reach without ever leaving the card.
 */
.about-page .value-card-heading {
	align-items: center;
	gap: 24px;
	margin-right: -24px;
	margin-bottom: 16px;
}

.about-page .value-icon {
	width: 28px;
	height: 28px;
}

.about-page .value-card h3 {
	font-family: "Exposure Local", Exposure, "Iowan Old Style", "Times New Roman", serif;
	font-weight: 400;
	font-size: 35px;
	line-height: 1.14012;
	letter-spacing: 0;
}

.about-page .value-card p {
	font-size: 18px;
	line-height: 1.4;
}

/*
 * The tile for a member with no portrait yet. It is typographic, not a stock
 * silhouette: the initial set in the page's own display serif on the brand
 * tile, at the size the card headings already use, so it reads as a deliberate
 * design choice rather than a missing image. It carries no wordmark and no
 * caption of its own, because the member's name and role sit below it exactly
 * as they do under a real photograph, and it keeps the portrait's box, so the
 * grid does not move.
 */
.about-page .team-image.team-image-placeholder {
	display: grid;
	place-items: center;
	background: var(--color-blue-light);
}

.about-page .team-image-placeholder span {
	color: var(--color-forest);
	font-family: "Exposure Local", Exposure, "Iowan Old Style", "Times New Roman", serif;
	font-size: 148px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .02em;
}

/* SECTION: Team
 * Expertise Section 56:352, 3169 tall.
 * Expertise Title 56:354: Exposure 80 / 96.015625.
 * Intro 56:355: Geist 400 22 / 28.6 in a 595 box.
 * Card name 56:361 etc: Geist 500 44 / 51.66876. Role: Geist 400 22 / 28.6.
 * Description: Geist 400 18 / 25.2. Portrait 433 by 636.
 */
.about-page .team-section {
	padding-top: 123px;
	padding-bottom: 123px;
}

.about-page .team-grid {
	gap: 105px 17px;
}

.about-page .team-heading h2 {
	font-size: 80px;
	line-height: 1.2002;
}

.about-page .team-heading p {
	font-size: 22px;
	line-height: 1.3;
}

.about-page .team-card h3 {
	font-size: 44px;
	line-height: 1.17429;
}

.about-page .team-card .team-role {
	font-size: 22px;
	line-height: 1.3;
}

/*
 * TEMPORARY, client pin 2026-09-10 13:47: the portraits are hidden until the
 * team's own photoshoot. The class comes from $hide_team_portraits in
 * template-parts/page-about.php, so this whole block stops applying the moment
 * that flag goes back to false. Nothing above it is touched.
 *
 * The 105px row gap and the 29px above a name were both measured against a 636
 * tall portrait. With the portrait boxes gone they leave far more air between
 * two names than a card's own three lines occupy, and the section reads as
 * something deleted rather than as a roster. The rhythm is retuned to the text
 * it now has: enough space to separate two people, not enough to look like a
 * hole where a photograph was.
 */
.about-page .team-grid.is-portraits-hidden {
	gap: 64px 17px;
}

.about-page .team-grid.is-portraits-hidden .team-card h3 {
	margin-top: 0;
}

/* SECTION: CTA
 * Section - Innovation / R&D 56:444, 583 tall, is the same closing component
 * as the homepage 56:708. The homepage instance carries the design system
 * size, Exposure 80 / 96.015625 in a 1044 box with 50 above a 242 by 69
 * button; the About instance in the file is an accidentally scaled copy at
 * 76.45. One component, one size: the homepage numbers win here too.
 * Background rect 56:445 is 1440 by 810 pinned to the top of the 583 band,
 * so the band shows the upper stretch of the photograph, not its middle.
 */
/*
 * The heading has to be sized against the section, not against the shrink to
 * fit flex column it lives in, or it measures itself at roughly 795 and drops
 * "Have a project in mind?" onto three lines instead of one. The frame's box
 * is 1044; the English line needs 903 and is unchanged by the wider box, while
 * the French "Vous avez un projet en tete ?" needs about 1085 and was leaving
 * its question mark stranded on a line of its own.
 */
.about-page .inner-cta > div {
	width: min(1200px, calc(100% - 108px));
}

.about-page .inner-cta h2 {
	width: 100%;
	font-size: 80px;
	line-height: 1.2002;
}

.about-page .inner-cta > img {
	inset: 0 auto auto 0;
	width: 100%;
	height: 810px;
	max-width: none;
	object-fit: cover;
	object-position: center 45%;
}

/* SECTION: Narrow view
 * The fixed frame geometry above is desktop only. Below 1100 the columns and
 * band heights have to give way or the page overflows sideways.
 */
@media (max-width: 1100px) {
	.about-page .inner-hero {
		height: auto;
		min-height: 760px;
	}

	.about-page .about-hero .inner-hero-copy {
		padding-top: 0;
	}

	.about-page .inner-hero h1 {
		font-size: clamp(62px, 10vw, 86px);
		line-height: 1.04;
	}

	.about-page .about-split,
	.about-page .about-split.is-reversed {
		grid-template-columns: 1fr;
		gap: 24px;
		min-height: 0;
		padding: 24px;
	}

	.about-page .about-split > div:last-child {
		padding: 0;
	}

	/* Stacked: the photograph is centred over the copy under it rather than
	 * pinned to a column edge that no longer exists. */
	.about-page .about-split:not(.is-reversed) > div:first-child {
		margin-inline: auto;
	}

	.about-page .about-split p {
		width: 100%;
	}

	.about-page .values-heading {
		height: auto;
		min-height: 0;
	}

	.about-page .value-card:first-child {
		margin-top: 0;
	}
}

@media (max-width: 620px) {
	.about-page .inner-hero {
		min-height: 700px;
	}

	.about-page .inner-hero h1 {
		font-size: 54px;
		line-height: 1.04;
	}

	.about-page .about-statement p {
		font-size: 30px;
		line-height: 1.24;
	}

	.about-page .about-split h2 {
		margin-bottom: 28px;
		font-size: 48px;
	}

	.about-page .about-split p {
		font-size: 18px;
	}

	.about-page .values-heading h2,
	.about-page .team-heading h2 {
		font-size: 54px;
	}

	.about-page .value-card {
		min-height: 0;
		border-radius: 0;
	}

	.about-page .value-card-heading {
		margin-right: 0;
	}

	.about-page .value-card h3 {
		font-size: 28px;
	}

	.about-page .team-card h3 {
		font-size: 34px;
	}

	/* Same temporary portrait-less rhythm, against the 75px single column gap. */
	.about-page .team-grid.is-portraits-hidden {
		gap: 48px;
	}

	.about-page .inner-cta h2 {
		max-width: 100%;
		font-size: 44px;
	}
}

/* SECTION: Team card quote reveal, blue quote panel
 * Point 568e0036. Yael: "The text size is perfect, but the flip effect gives
 * windows movie maker vibes. Maybe try matching the over effect from the
 * homepage."
 *
 * What was wrong. The card used a 3D card turn: perspective 1600px on the
 * wrapper, transform-style preserve-3d on an inner shell, backface-visibility
 * hidden on two stacked faces, and rotateY(180deg) over 720ms. Three separate
 * things read as cheap there. It is the only 3D transform on the whole site, so
 * it belongs to no other motion on the page. It runs at 720ms, two and a half
 * times the 300ms every other hover on the site uses. And a rotating photograph
 * of a real person passes through a foreshortened, briefly mirrored state on
 * the way round, which is exactly the transition-preset look she named.
 *
 * What it is now. The same treatment as the homepage expertise card, which she
 * has already approved twice: a panel that slides up over the image from the
 * bottom edge, a flat fill behind it, the text fading in, 300ms ease. No
 * perspective, no preserve-3d, no backface-visibility, no rotation of any kind
 * anywhere in this file. The homepage panel only travels 120px because its
 * title is visible at rest; this one has nothing to show at rest, so it travels
 * its own full height and lands flush.
 *
 * Kept exactly as it was: the quote type scale (she called the size perfect),
 * the quote copy and its editor sub field, the periwinkle fill, the reduced
 * motion fallback and the coarse pointer fallback. Only the 636px portrait box
 * is ever painted over, so the name, role and description below it never move
 * and the section height is constant.
 */
.about-page .team-reveal {
	--team-face-height: 636px;
	position: relative;
	height: var(--team-face-height);
	overflow: hidden;
	border-radius: 5px;
}

.about-page .team-reveal:focus {
	outline: none;
}

.about-page .team-reveal:focus-visible {
	outline: 3px solid var(--color-forest);
	outline-offset: 4px;
}

/* Beats the plain .team-image height in pages-fidelity.css at every width:
 * the wrapper owns the height now, through --team-face-height. */
.about-page .team-reveal .team-image {
	height: 100%;
	overflow: hidden;
	border-radius: 5px;
}

.about-page .team-quote-panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin: 0;
	padding: clamp(26px, 2.2vw, 44px) clamp(22px, 2.1vw, 40px);
	border-radius: 5px;
	background: var(--color-blue);
	color: var(--color-ink);
	transform: translateY(100%);
	transition: transform 300ms ease;
}

.about-page .team-reveal:hover .team-quote-panel,
.about-page .team-reveal:focus-within .team-quote-panel {
	transform: translateY(0);
}

/* The words arrive just behind the panel, the way the homepage card's paragraph
 * does, so the quote is never read mid-slide. */
.about-page .team-quote-panel > * {
	opacity: 0;
	transition: opacity 300ms ease;
}

.about-page .team-reveal:hover .team-quote-panel > *,
.about-page .team-reveal:focus-within .team-quote-panel > * {
	opacity: 1;
}

/* Ink #080c0a on periwinkle #aabbff measures 10.55:1.
 * The quote takes the whole face above the attribution and sits optically
 * centred in it, so a four line quote and a seven line one both look composed
 * rather than stranded at the top of a 636px box. */
.about-page .team-quote {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	margin: 0;
	font-family: "Exposure Local", Exposure, "Iowan Old Style", "Times New Roman", serif;
	font-weight: 400;
	font-size: clamp(20px, 1.95vw, 28px);
	line-height: 1.24;
	letter-spacing: -.02em;
	text-wrap: pretty;
}

.about-page .team-quote p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.about-page .team-quote em {
	font-style: italic;
}

/* Quiet attribution: the quote is the hero. Forest #253432 on periwinkle
 * measures 6.97:1, so the role line stays above AA without an opacity fade. */
.about-page .team-quote-attribution {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: "Geist Local", Geist, Inter, Arial, sans-serif;
	font-style: normal;
	font-size: 16px;
	line-height: 1.3;
}

.about-page .team-quote-name {
	font-weight: var(--weight-emphasis);
	color: var(--color-ink);
}

.about-page .team-quote-role {
	font-size: 15px;
	color: var(--color-forest);
}

@media (max-width: 980px) {
	.about-page .team-quote {
		font-size: clamp(19px, 2.9vw, 28px);
	}
}

@media (max-width: 620px) {
	.about-page .team-reveal {
		--team-face-height: min(540px, 130vw);
	}

	.about-page .team-quote {
		font-size: clamp(21px, 4.6vw, 28px);
	}
}

/* No travel for anyone who asked for less motion: the quote panel cross fades
 * over the portrait in place instead of sliding. */
@media (prefers-reduced-motion: reduce) {
	.about-page .team-quote-panel,
	.about-page .team-reveal:hover .team-quote-panel,
	.about-page .team-reveal:focus-within .team-quote-panel {
		transform: none;
		transition: opacity 200ms linear;
	}

	.about-page .team-quote-panel {
		opacity: 0;
	}

	.about-page .team-reveal:hover .team-quote-panel,
	.about-page .team-reveal:focus-within .team-quote-panel {
		opacity: 1;
	}

	.about-page .team-quote-panel > *,
	.about-page .team-reveal:hover .team-quote-panel > *,
	.about-page .team-reveal:focus-within .team-quote-panel > * {
		opacity: 1;
		transition: none;
	}
}
/* Coarse pointers have no hover, and a tap-to-reveal would leave the quote
 * behind a gesture nothing on the page teaches. So on touch nothing slides at
 * all: the portrait and the quote simply stack, and every phone and tablet
 * visitor reads all seven quotes without interacting.
 */
@media (hover: none) {
	.about-page .team-reveal {
		height: auto;
		overflow: visible;
	}

	.about-page .team-reveal .team-image {
		height: var(--team-face-height);
	}

	/* Also beats the reduced motion fade above: on a coarse pointer the quote
	 * is permanently visible, never revealed by an interaction. */
	.about-page .team-quote-panel,
	.about-page .team-reveal:hover .team-quote-panel,
	.about-page .team-reveal:focus-within .team-quote-panel {
		position: relative;
		inset: auto;
		margin-top: 14px;
		gap: 22px;
		padding: 30px 26px 26px;
		transform: none;
		opacity: 1;
		transition: none;
	}

	.about-page .team-quote-panel > *,
	.about-page .team-reveal:hover .team-quote-panel > *,
	.about-page .team-reveal:focus-within .team-quote-panel > * {
		opacity: 1;
		transition: none;
	}
}