/*
 * Services page fidelity layer.
 *
 * Everything here is scoped to .services-page on purpose. The expertise card,
 * the split heading and the kit card are all shared components: the homepage
 * draws the same card through main.css plus home-fidelity.css, and About and
 * Insights share pages-fidelity.css. Scoping keeps the review round two
 * decisions that belong to Services alone off those other pages.
 */

/*
 * Expertise cards, client points 721e2df8 / ca83c070 / fd2e8b6c.
 *
 * Cause: the title and the orb are absolutely positioned inside the overlay
 * from two unrelated top edges, 178px for the title and 222px for the orb, so
 * nothing ever tied them together. With a 51.67px title line that put the orb
 * centre 41.17px below the title centre, in both the rest and the hover state.
 * The orb was also 46px rather than the 49.745px the frame asks for, because
 * main.css targets it as .expertise-overlay > span and outranks the
 * .expertise-arrow rule in pages-fidelity.css that carries the frame value.
 *
 * Fix: title and orb share one centre line and each is pulled back half its own
 * height, which is the same technique the homepage card now uses, so the two
 * pages draw the identical component. The centre moves in one place per state,
 * so they cannot drift apart again. Insets stay at the frame's 26 left for
 * text and 29 right for the orb.
 *
 * Points 1010f37e / 4f14ce41 / c350ea06: the orb points down, because each
 * card is an in-page anchor to the section below it, not a link away.
 */
.services-page .expertise-card {
	--svc-card-arrow: 49.745px;
	--svc-card-title-center: 203.834px;
	--svc-card-title-center-hover: 68.834px;
}

.services-page .expertise-overlay h3 {
	top: var(--svc-card-title-center);
	transform: translateY(-50%);
}

.services-page .expertise-overlay > span.expertise-arrow {
	width: var(--svc-card-arrow);
	height: var(--svc-card-arrow);
	right: 29px;
	top: var(--svc-card-title-center);
	transform: translateY(-50%) rotate(90deg);
}

.services-page .expertise-card:hover .expertise-overlay h3,
.services-page .expertise-card:focus-visible .expertise-overlay h3,
.services-page .expertise-card:focus-within .expertise-overlay h3 {
	top: var(--svc-card-title-center-hover);
}

.services-page .expertise-card:hover .expertise-overlay > span.expertise-arrow,
.services-page .expertise-card:focus-visible .expertise-overlay > span.expertise-arrow,
.services-page .expertise-card:focus-within .expertise-overlay > span.expertise-arrow {
	top: var(--svc-card-title-center-hover);
	transform: translateY(-50%) rotate(90deg);
}

/*
 * Split section heading, client points e00cdf47 / 63b82351 / edc6f0bb and
 * c81fefec. The pictogram tile is gone from the markup, so the heading row is
 * the title alone and takes the full column. The title is Exposure regular at
 * axis 20, not the italic cut, and the rule is defensive: it also holds if an
 * editor ever pastes emphasis into the field.
 */
.services-page .service-split-heading {
	justify-content: flex-start;
}

.services-page .service-split-heading-text {
	flex: 1 1 auto;
	min-width: 0;
}

.services-page .service-split-heading h2,
.services-page .service-split-heading h2 em {
	font-family: "Exposure Local", Exposure, "Nimbus Roman", serif;
	font-style: normal;
	font-weight: 400;
}

/*
 * Accordion rows, follow on from client point f4f74ba8.
 *
 * The packaged labels used to be two or three words, so the row could be a
 * fixed 74px line that clipped with an ellipsis. The round two labels are full
 * questions and the first one was cut off mid word at every desktop width.
 * The row now grows with its label instead of truncating it. Only the label
 * changes: the divider, the control and the panel are untouched.
 */
.services-page .inner-service-row {
	height: auto;
	min-height: 74px;
	padding-block: 16px;
	align-items: center;
}

.services-page .inner-service-label {
	overflow: visible;
	white-space: normal;
	text-overflow: clip;
	line-height: 1.15;
}

/*
 * Kit cards, client point c3c210b3. The About page value card is the model:
 * the symbol sits inline to the left of the title, 28px, on the same row, with
 * no tile and no container behind it. The old 48px rounded tile is dropped by
 * the markup change alone, since the rule that drew it matched a span that was
 * a direct child of the card. These rules restate the geometry rather than
 * relying on that, so the layout does not depend on a rule elsewhere failing
 * to match.
 */
.services-page .kit-card-heading {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 16px;
}

.services-page .kit-card .kit-icon {
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	display: block;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	font-size: 24px;
	line-height: 1;
}

.services-page .kit-card .kit-icon img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	display: block;
	object-fit: contain;
}

.services-page .kit-card h3 {
	margin: 0;
}

@media (max-width: 620px) {
	/* The 620 tier drops the title to 36px on a 42.27px line, top 140 and 36. */
	.services-page .expertise-card {
		--svc-card-title-center: 161.137px;
		--svc-card-title-center-hover: 57.137px;
	}

	.services-page .kit-card-heading {
		gap: 16px;
	}
}

/*
 * Expertise card overlay at the in between desktop widths, client points
 * 721e2df8 / ca83c070 / fd2e8b6c again.
 *
 * The alignment fix above was correct at 1440 and only at 1440. Cause: every
 * number in the overlay is an absolute pixel value taken from the 433.33px
 * Figma card (title box 282 at left 26, orb 49.745 at right 29, description
 * 379 at left 26) while the grid keeps three fluid columns all the way down to
 * 981px. At 1024 the card is 294.7px, so the title box ran 13px past the card
 * edge, the hidden description made the overlay 405px wide inside a 295px card
 * and the 49.745px orb sat on top of the last letters: "Laboratory" overlapped
 * it by 35.1px in English and "Laboratoire" by 46.1px in French, which is
 * exactly the collision Yael pinned three times.
 *
 * Fix: the card becomes a query container and the overlay is expressed as
 * proportions of the card instead of constants from one frame width. The title
 * keeps the frame ratio 44 / 433.33, the orb keeps 49.745 / 433.33 with a 38px
 * floor so it stays tappable, the title box always stops short of the orb, and
 * the description can never be wider than its card. Every value caps at the
 * frame number, so at 433.33px and wider the card renders exactly as before.
 *
 * Scoped to the three column band only. At 980px and below the grid is a
 * single full width column and the existing tiers already fit.
 */
@media (min-width: 981px) {
	.services-page .expertise-card {
		container-type: inline-size;
		--svc-card-orb: clamp(38px, 11.4797cqw, 49.745px);
		--svc-card-title-size: min(44px, 10.4cqw);
	}

	/*
	 * The orb column is reserved rather than shared, so a longer label an
	 * editor types later wraps or breaks inside its own box instead of
	 * running under the orb again.
	 */
	.services-page .expertise-overlay h3 {
		width: min(282px, calc(100% - 26px - 29px - var(--svc-card-orb) - 16px));
		font-size: var(--svc-card-title-size);
		overflow-wrap: break-word;
	}

	.services-page .expertise-overlay > span.expertise-arrow {
		width: var(--svc-card-orb);
		height: var(--svc-card-orb);
	}

	/* The glyph keeps the frame ratios 19.5 / 49.745 and 17.12 / 49.745. */
	.services-page .expertise-overlay > span.expertise-arrow img {
		width: calc(var(--svc-card-orb) * 0.39199);
		height: calc(var(--svc-card-orb) * 0.34415);
	}

	.services-page .expertise-overlay p {
		width: min(379px, calc(100% - 52px));
	}
}

/*
 * Territory card photo, same defect family as the About photo Yael called
 * stretched (e6c501bc).
 *
 * Cause: the second card carries a Figma export transform, width 127.44 and
 * height 115.76 percent with object-fit fill. Those two percentages only
 * cancel out on the 433.33 x 636 frame card. Everywhere else they stretch the
 * photo: measured -12.3 percent at 1280, -22.3 at 1150, -32.0 at 1024, -35.3
 * at 981 and +88.8 at 768, where the houses and pools visibly elongate.
 *
 * Fix: the same cover crop the first and third cards already use, which is
 * geometry the browser recomputes at every width, so the photo can never be
 * stretched again. It is a centred crop, so the marina keeps its subject.
 */
.services-page .expertise-card:nth-child(2) .expertise-media > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/*
 * Services expertise cards are ANCHORS, not teasers. Yael, WhatsApp 3 September:
 * "In the service page, can we remove the green box hover effect? the goal is to
 * use these cards as anchors. It is all good on the homepage but not on the
 * service page."
 *
 * The forest panel comes from main.css line 195, which styles .expertise-card
 * for the whole site, so the homepage keeps its reveal and only this page opts
 * out. Three things go with it, because a panel that fills with nothing and a
 * title that slides up to make room for nothing both read as broken:
 *   the forest fill, the description reveal, and the title and arrow shift.
 * What is left is the frame's resting card: photograph, title, periwinkle orb
 * with the down arrow that says the anchor is below.
 *
 * The card still answers a pointer: main.css keeps the background-size lift on
 * hover, and the focus ring is untouched, so it never becomes a dead tile.
 */
.services-page .expertise-card:hover .expertise-overlay,
.services-page .expertise-card:focus-visible .expertise-overlay,
.services-page .expertise-card:focus-within .expertise-overlay {
	background: transparent;
}

.services-page .expertise-card:hover .expertise-overlay p,
.services-page .expertise-card:focus-visible .expertise-overlay p,
.services-page .expertise-card:focus-within .expertise-overlay p {
	opacity: 0;
	visibility: hidden;
}

/* Title and arrow hold their resting position: nothing is being made room for. */
.services-page .expertise-card:hover .expertise-overlay h3,
.services-page .expertise-card:focus-visible .expertise-overlay h3,
.services-page .expertise-card:focus-within .expertise-overlay h3,
.services-page .expertise-card:hover .expertise-overlay > span.expertise-arrow,
.services-page .expertise-card:focus-visible .expertise-overlay > span.expertise-arrow,
.services-page .expertise-card:focus-within .expertise-overlay > span.expertise-arrow {
	top: var(--svc-card-title-center);
}

/*
 * Kits heading, client points 08:13 and 13:41: "this title is veeery big (due
 * to the new copy)" and "reduce the size so the grid is preserved".
 *
 * Cause: the heading is the first cell of the same two column grid that holds
 * the five kits, and pages-fidelity.css draws it at 80px in a 452px wide box.
 * That was right for the two line heading the frame was drawn with. The copy is
 * now "Start small with our eDNA Synergy program", and in French "Commencez
 * avec notre programme ADNe Synergie", which wraps to five lines at 1440 and
 * six at 768. The heading cell measured 528px against a 282px kit card, so the
 * first grid row was 246px taller than every other row and the Water kit next
 * to it floated in empty yellow. 48px was the first fix, and kept the whole
 * cell inside the row.
 *
 * A second point, over WhatsApp on 2026-09-11: "in French, there's a weird
 * line break on the service page". At 48px the French heading wraps to
 * "Commencez avec" / "notre" / "programme ADNe" / "Synergie": the client's own
 * three word first half no longer fits on one line, so the browser peels a
 * single five letter word onto a line of its own. A word ending a heading is
 * normal (English does the same with "program" alone on its last line and it
 * reads fine); a short word stranded in the MIDDLE by itself is what read as
 * broken. text-wrap: pretty does not save this, because the fix would have to
 * reflow across the hard <br> the two halves are glued with, which pretty does
 * not do.
 *
 * The heading's own box width is not steady as the viewport narrows, because
 * it is a cell in the same two column grid used for the five kits, and that
 * grid only drops to one column at 620px. Measured live: 452px from 1440 down
 * to 1100, dropping to 432px at 1024, then narrowing continuously to a worst
 * point of 273px right before the grid flips to one column around 621px, then
 * JUMPING to 584px at 620px and beyond because the cell is suddenly the full
 * width of its own row. A single fluid clamp cannot follow a curve that turns
 * around, so this is three flat steps instead, each sized to the narrowest
 * true measurement inside it so "Commencez avec notre" always resolves to one
 * line, in both languages, at every width in between the tested points:
 *   above 980px         the widest end of the two column band, 36px
 *   621px to 980px       the two column squeeze, worst point 273px, 24px
 *   620px and narrower    one column, worst point 354px at 390px wide, 28px
 * All three are safely under their band's true minimum with margin. This
 * heading now sits well below the previous 48px note; the client's own copy
 * is roughly three times the length the frame was drawn for, and getting a
 * clean two line shape out of it costs more than a comfortable a11y minimum,
 * so the type scale trade off here favours no orphan over a bigger mark.
 *
 * The rule stays an id selector so it keeps capping the 54px the small screen
 * block sets: a title larger on a phone than on a desktop was never intended.
 *
 * Scoped to .services-page because the Publications page reuses .kits-grid and
 * .kits-heading for its own heading, which is short and must keep 80px.
 */
.services-page #kits-title {
	font-size: 36px;
}

@media (max-width: 980px) {
	.services-page #kits-title {
		font-size: 24px;
	}
}

@media (max-width: 620px) {
	.services-page #kits-title {
		font-size: 28px;
	}
}

/*
 * The process heading is 80px from 1440 all the way down to 1024, but its
 * column is not. The two column grid stays active until 900, and between
 * roughly 1024 and 1140 the heading's own box narrows to 419 to 457px while
 * the type stays at 80px. At that point single words are as wide as the
 * column, so the heading exploded to six lines: "Construire" / "la" /
 * "bonne" / "strategie," / "etape par" / "etape", against four lines at 1440
 * and three once the layout goes single column at 900. English did the same
 * thing one line later.
 *
 * Scaling the type with the viewport across that band restores the four line
 * shape the design has at 1440. 1440 and 1280 keep 80px exactly, and the band
 * stops at 981 because the grid drops to a single 620px column below 980, so
 * anything narrower already has room for the full 80px. Only the broken
 * window changes.
 */
@media (min-width: 981px) and (max-width: 1200px) {
  .services-page .process-intro h2 {
    font-size: clamp(52px, 5.6vw, 72px);
  }
}