.ebiom-home { font-family: "Geist Local", Geist, Arial, sans-serif; }
.ebiom-home h1,
.ebiom-home h2 { font-family: "Exposure Local", Exposure, "Nimbus Roman", serif; font-weight: 400; letter-spacing: 0; line-height: 1.04; }
.ebiom-home em { font-family: "Exposure Local", "Exposure Italic", "Nimbus Roman", serif; font-style: italic; font-weight: 400; }
.ebiom-home .home-main { overflow: hidden; }
.ebiom-home .home-hero-copy,
.ebiom-home .innovation-copy,
.ebiom-home .driving-grid,
.ebiom-home .expertise-overlay,
.ebiom-home .testimonial-section > h2,
.ebiom-home .testimonial-slide > * { z-index: 5; }
/*
 * The arrow SVGs carry preserveAspectRatio="none", so they stretch to whatever
 * box the CSS gives them instead of letterboxing. Their natural ratio is 20x17,
 * or 1.176. Every other page draws them 18x15, which is 1.200 and near enough
 * to be invisible. The homepage drew them 18x14, which is 1.286, flattening the
 * arrowhead by about 8.5 percent, so the same button had a subtly different
 * arrow on the homepage than on Services or Contact. Figma's homepage arrow box
 * is 18.35x14 and its header arrow box is 15.772x14, which do not agree with
 * each other either, so there is no single drawn value to defer to here. One
 * arrow shape across the site wins over matching an inconsistent box.
 */
.ebiom-home .button-arrow { width: 18px; height: 15px; }

/*
 * Hero band. Figma 56:503 > Background Image 56:504 is a fixed 913 band, not
 * a viewport height: a 100vh hero shrank it to whatever the window happened
 * to be (900 on a 1440 by 900 screen, 1000 on a taller one) and pushed every
 * block below it off the frame's rhythm.
 */
.ebiom-home .home-hero { height: 913px; min-height: 913px; display: block; padding: 0; background: var(--color-forest); }
.ebiom-home .home-hero-bg { object-position: center; transform: none; animation: ebiom-image-enter 800ms cubic-bezier(.22,.61,.36,1) both; }
.ebiom-home .home-hero-shade,
.ebiom-home .home-hero::after { display: none; }
.ebiom-home .home-hero-copy { --hero-copy-gutter: clamp(54px, calc((100vw - 1232px) / 2), 144px); position: absolute; z-index: 5; top: 247px; left: var(--hero-copy-gutter); width: 1232px; max-width: calc(100% - (2 * var(--hero-copy-gutter))); }
.ebiom-home .home-hero h1 { width: 880.386px; max-width: 100%; margin: 0 0 41px; font-size: 95px; line-height: 1.04; }
.ebiom-home .home-hero h1 > span,
.ebiom-home .home-hero h1 > em { display: block; width: 100%; transform-origin: left center; }
.ebiom-home .home-hero h1 > span,
.ebiom-home .home-hero h1 > em { transform: none; }
/* Subtitle 56:514: Geist 400 22 / 28.6, 781 wide, 44 above the button. */
.ebiom-home .home-hero p { width: 781px; max-width: 100%; margin: 0 0 44px; font-size: 22px; line-height: 1.3; }
.ebiom-home .home-hero h1 { animation: ebiom-copy-enter 620ms 220ms cubic-bezier(.22,.61,.36,1) both; }
.ebiom-home .home-hero p { animation: ebiom-copy-enter 620ms 300ms cubic-bezier(.22,.61,.36,1) both; }
.ebiom-home .home-hero .button { animation: ebiom-copy-enter 620ms 380ms cubic-bezier(.22,.61,.36,1) both; }

/*
 * The 1066 band came from the Figma frame, which was drawn around five
 * accordion rows and the shorter panel copy. The client's sixth drawer adds
 * 74px and the French summary runs a line longer, so a locked height pushed
 * the column out of its own panel. The frame height is now the floor, not the
 * ceiling: identical at 1066 where the copy still fits, taller only where the
 * copy genuinely needs it.
 */
.ebiom-home .innovation-panel { height: auto; min-height: 1066px; grid-template-columns: 619px 712px; gap: 0; align-items: start; padding: 0 max(54.5px, calc((100% - 1331px) / 2)); }
.ebiom-home .innovation-image { width: 619px; height: 992px; overflow: hidden; border-radius: 10px; }
.ebiom-home .innovation-image { margin-top: 37px; }
.ebiom-home .innovation-image img { width: 619px; height: 992px; object-fit: cover; border-radius: 10px; }
.ebiom-home .innovation-copy { width: 712px; height: auto; min-height: 1066px; display: flex; flex-direction: column; justify-content: center; padding: 100px 80px 100px 57px; }
.ebiom-home .innovation-copy h2 { width: 654px; max-width: none; margin: 0 0 24px; font-size: 60px; line-height: 1.04; }
.ebiom-home .innovation-copy h2 { transform: none; }
.ebiom-home .innovation-copy h2 > span { display: block; width: 654px; transform-origin: left center; }
.ebiom-home .innovation-copy h2 > span:first-child,
.ebiom-home .innovation-copy h2 > span:last-child { transform: none; }
.ebiom-home .innovation-copy > p { width: 654px; max-width: none; margin: 0 0 50px; font-size: 22px; line-height: 1.18; }
/*
 * Client pins 11:59 and 12:00 turned this panel from a heading plus one lead
 * line plus an accordion into a heading plus four running paragraphs. The
 * single paragraph kept a 50px gap to what followed it and a tight 1.18 lead,
 * both drawn for one short line. Running body copy takes the rhythm the other
 * multi paragraph block on this page already uses, .driving-grid p: same 654px
 * measure, same 22px, line-height 1.3, and 25px between paragraphs. Only the
 * last paragraph keeps the 50px gap, so the Work with us button does not move.
 */
.ebiom-home .innovation-copy > p { line-height: 1.3; }
.ebiom-home .innovation-copy > p + p { margin-top: 25px; }
.ebiom-home .innovation-copy > p:not(:last-of-type) { margin-bottom: 0; }
.ebiom-home .service-accordion { width: 664px; margin: 0 0 48px; border-top: 0; }
/*
 * Drawer height. The closed and open rows used to be hard numbers, 0 and 89,
 * with the paragraph pinned to a 68px box: sized for the two lines the old
 * five labels produced at this column width, so any longer body was silently
 * cut off. 0fr to 1fr animates the same way and measures the paragraph
 * instead, which is what the sixth drawer and the French copy need.
 *
 * The animated grid then lived on .service-item and held two tracks, the
 * header row minmax(74px, auto) and the body row. While the fr track was
 * interpolating, the auto header track was resized against the same
 * indefinite height, so opening a drawer pushed the button from 74px to
 * 86.6px and back inside 290ms and carried the plus glyph 6.3px down with
 * it. The client pinned exactly that (point 6a40dd23).
 *
 * So the button is no longer inside the animated box at all. .service-item
 * is a plain block, and the only animated element is a single track grid
 * wrapping the paragraph. One track cannot hand height to a sibling, so the
 * row height is constant through the whole open and close and the glyph
 * cannot ride. The 21px gap moved into the paragraph's own padding, inside
 * the collapsing track, so it grows and shrinks with the body instead of
 * being a second interpolated property.
 */
.ebiom-home .service-item { display: block; overflow: hidden; }
.ebiom-home .service-detail-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms ease-in-out; }
.ebiom-home .service-item:has(.service-row[aria-expanded="true"]) .service-detail-wrap { grid-template-rows: 1fr; }
/*
 * Row label. The frame was set in 26 for the old five word labels; two of the
 * client's new titles are half as long again and the single line ellipsis was
 * eating them, "Laboratory analysis using environmental DNA (eD..." on screen.
 * 23 is the largest size that carries every one of the six titles on one line
 * in both languages, so the 74px row rhythm survives. Wrapping is allowed as
 * the safety net: a label typed longer in the editor grows its row instead of
 * being silently cut.
 */
.ebiom-home .service-row { width: 664px; height: auto; min-height: 74px; display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; column-gap: 20px; padding: 20px 20px 20px 0; border-bottom: 1px solid rgba(8,12,10,.15); font-size: 23px; line-height: 1.15; transition: none; }
.ebiom-home .service-row > span:first-child { overflow: visible; text-overflow: clip; white-space: normal; transition: none; }
.ebiom-home .service-row-control { position: relative; width: 20px; height: 20px; }
/* Both bars sit on the exact centre line of the 20px box: 9.25 + half of the
 * 1.5px rule is 10. At the old 9px they were a quarter pixel high, so the
 * cross never closed cleanly onto the minus. */
.ebiom-home .service-row-control span { position: absolute; top: 9.25px; left: 0; width: 20px; height: 1.5px; background: currentColor; transition: transform 300ms cubic-bezier(.22,1,.36,1); }
.ebiom-home .service-row:hover,
.ebiom-home .service-row[aria-expanded="true"] { background: transparent; }
.ebiom-home .service-row:hover span:first-child,
.ebiom-home .service-row[aria-expanded="true"] span:first-child { transform: none; }
/*
 * The plus and minus control. main.css slides the row's last child 16px left
 * on hover and while open, and that selector matches twice here: once on the
 * control itself and again on its minus bar, which is also a last child. So
 * the icon walked out of its 20px grid column and, once open, drew the minus
 * a further 16px left of the plus: one icon rendered as two loose rules, on
 * two different timing curves. The control column is fixed by the row grid,
 * so nothing here may translate. Only the plus bar rotates.
 */
.ebiom-home .service-row:hover .service-row-control,
.ebiom-home .service-row[aria-expanded="true"] .service-row-control { transform: none; }
.ebiom-home .service-row .service-row-control .is-minus { transform: none; }
.ebiom-home .service-row .service-row-control .is-plus { transform: rotate(90deg); }
.ebiom-home .service-row[aria-expanded="true"] .service-row-control .is-plus { transform: rotate(0deg); }
.ebiom-home .service-detail { width: 614px; max-width: 100%; height: auto; min-height: 0; margin: 0; padding: 0; overflow: hidden; color: var(--color-ink); font-size: 18px; line-height: 1.4; opacity: 0; transform: translateY(-8px); transition: opacity 300ms ease-in-out, transform 300ms ease-in-out; }
/* The 21px that used to be the row-gap. It is drawn as content inside the
 * clipped paragraph rather than as padding or margin, because padding and
 * margin both count towards a grid item's minimum contribution and would
 * have left every closed drawer 21px tall instead of 0. */
.ebiom-home .service-detail::before { content: ""; display: block; height: 21px; }
.ebiom-home .service-row[aria-expanded="true"] + .service-detail-wrap .service-detail { opacity: 1; transform: none; }
.ebiom-home .innovation-copy .small-copy { width: 644px; max-width: none; margin: 0 0 55px; font-size: 18px !important; line-height: 1.4; }
.ebiom-home .innovation-copy .button { width: 242px; }

.ebiom-home .section-pad { padding-left: max(54px, calc((100% - 1332px) / 2)); padding-right: max(54px, calc((100% - 1332px) / 2)); }
.ebiom-home .section-heading { width: 100%; align-items: flex-end; margin: 0; }
.ebiom-home .section-heading h2 { margin: 0; letter-spacing: 0; }
.ebiom-home .expertise-section { height: 1001px; display: flex; flex-direction: column; justify-content: center; gap: 68px; padding-top: 100px; padding-bottom: 100px; }
.ebiom-home .expertise-section .section-heading { height: 96px; }
.ebiom-home .expertise-section .section-heading h2 { font-size: 80px; line-height: 1.04; }
.ebiom-home .expertise-section .section-heading h2 { transform: none; transform-origin: left center; }
.ebiom-home .expertise-grid { width: 100%; height: 637px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.ebiom-home .expertise-card { min-height: 636px; height: 636px; overflow: hidden; border-radius: 5px; background: var(--color-forest); }
.ebiom-home .expertise-card::before { z-index: 1; display: block; background: transparent; pointer-events: none; }
.ebiom-home .expertise-media { position: absolute; inset: 0 0 auto; height: 636px; overflow: hidden; border-radius: 5px; }
.ebiom-home .expertise-media > img { width: 100%; height: 100%; object-fit: cover; }
.ebiom-home .expertise-media::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 5px; background: rgba(30,56,50,.2); mix-blend-mode: soft-light; pointer-events: none; }
.ebiom-home .expertise-card:nth-child(1) .expertise-media > img { transform: scaleX(-1); }
/*
 * Card two carries the Figma crop as an oversized offset box. That box is
 * drawn at the photo's own 0.75 ratio at 1440, so object-fit: fill looked
 * right there and only there: as soon as the grid collapsed to one column the
 * same box went to 1160 by 736, a 1.58 ratio, and the marina was stretched
 * sideways by 112%. That is the defect the client already named once on About
 * ("This photo is stretched"). cover keeps the crop identical at 1440, where
 * the box ratio and the photo ratio agree, and crops instead of stretching
 * everywhere else.
 */
.ebiom-home .expertise-card:nth-child(2) .expertise-media > img { position: absolute; top: -8.3%; left: -13.72%; width: 127.44%; height: 115.76%; max-width: none; object-fit: cover; object-position: center; }
.ebiom-home .expertise-card:nth-child(3) .expertise-media > img { object-position: center; }
.ebiom-home .expertise-overlay { z-index: 5; inset: auto 0 0; height: 302px; min-height: 302px; display: block; padding: 0; transform: none; background: transparent; transition: background-color 300ms ease-in-out; }
/*
 * Card title and round arrow, on one centre line.
 *
 * Both were positioned from the raw Figma boxes: the h3 from the top of its
 * text frame and the arrow from the top of its own circle. But that text
 * frame is 113 tall with a single 51.7px line centred inside it, so pinning
 * the h3 to the frame top put the rendered line 30.7px higher than the design
 * shows, and the arrow ended up 43px below the title's optical centre. Worse,
 * the two hover offsets were tuned separately, so the gap changed as the card
 * animated. They now share one centre and one number: the row moves, the
 * alignment cannot drift. Margins stay as drawn, 26 left, 29 right.
 */
.ebiom-home .expertise-overlay h3 { position: absolute; top: 246.87px; left: 26px; width: 282px; max-width: none; margin: 0; color: var(--color-cream); font-size: 44px; font-weight: var(--weight-emphasis); line-height: 1.17429; transform: translateY(-50%); transition: top 300ms ease-in-out; }
.ebiom-home .expertise-arrow { position: absolute; top: 246.87px; right: 29px; width: 49.745px; height: 49.745px; display: grid; place-items: center; border-radius: 50%; background: var(--color-blue); transform: translateY(-50%) rotate(-90deg); transition: top 300ms ease-in-out; }
.ebiom-home .expertise-arrow img { width: 19.5px; height: 17.12px; }
/* Left and right margins both drawn at 26, with the Figma width as a ceiling
 * rather than a fixed box: at 1440 that resolves to the same 379px the frame
 * specifies, and on a phone the copy narrows with the card instead of running
 * 51px past its clipped edge. */
.ebiom-home .expertise-overlay p { position: absolute; top: 166px; left: 26px; right: 26px; width: auto; max-width: 379px; margin: 0; color: var(--color-cream); font-size: 18px; line-height: 1.4; opacity: 0; visibility: hidden; transition: opacity 300ms ease-in-out, visibility 300ms ease-in-out; }
/*
 * Client pins 12:04, 13:09 and 13:10. The hover copy is now a heading line and
 * then a paragraph, so the heading line is a lead span inside the paragraph the
 * pin points at. It reads as the emphasis weight the h3 already uses.
 *
 * The paragraph was pinned to top 166px, a box drawn around the one generic
 * sentence all three cards used to share. The new copy is a heading line plus a
 * paragraph, four to six lines depending on the card and the language, and at
 * 166px the longest of them ran 25px past the bottom of the card. It is
 * anchored to the bottom of the overlay instead, on the same 26px margin the
 * left and right edges already use, so each card grows its own block upward and
 * no length or translation can push copy off the card. The gap to the title
 * stays comfortable: the longest card still leaves about 20px.
 *
 * The paragraph also takes the 1.3 lead the other running body copy on this
 * page uses, .driving-grid p, instead of 1.4. At 1.4 the longest card in French
 * wrapped to seven lines at some widths and climbed 5px into its own title.
 */
.ebiom-home .expertise-overlay-lead { display: block; margin-bottom: 8px; font-weight: var(--weight-emphasis); }
.ebiom-home .expertise-overlay p { top: auto; bottom: 26px; line-height: 1.3; }
.ebiom-home .expertise-card:hover .expertise-overlay,
.ebiom-home .expertise-card:focus-visible .expertise-overlay,
.ebiom-home .expertise-card:focus-within .expertise-overlay { background: var(--color-forest); }
.ebiom-home .expertise-card:hover .expertise-overlay h3,
.ebiom-home .expertise-card:focus-visible .expertise-overlay h3,
.ebiom-home .expertise-card:focus-within .expertise-overlay h3 { top: 68.85px; }
.ebiom-home .expertise-card:hover .expertise-overlay p,
.ebiom-home .expertise-card:focus-visible .expertise-overlay p,
.ebiom-home .expertise-card:focus-within .expertise-overlay p { opacity: 1; visibility: visible; transform: none; }
.ebiom-home .expertise-card:hover .expertise-arrow,
.ebiom-home .expertise-card:focus-visible .expertise-arrow,
.ebiom-home .expertise-card:focus-within .expertise-arrow { top: 68.85px; transform: translateY(-50%) rotate(-90deg); }

.ebiom-home .partners-section { height: 336px; display: flex; flex-direction: column; justify-content: center; gap: 64px; padding-top: 53px; padding-bottom: 52px; border-top: 1px solid #f5f5f5; }
.ebiom-home .partners-section .section-heading { height: 69px; }
.ebiom-home .partners-section .section-heading h2 { font-size: 60px; line-height: 1.04; }
.ebiom-home .partners-section .section-heading h2 { transform: none; transform-origin: left center; }
/* The six logo marks plus their gutters measure 1234, which fits the 1332
 * content column at 1440 and nothing narrower. Fixed at 1332 the row ran out
 * of main.home-main and the last logos were clipped from 1101 down. It is the
 * content column with a 1332 ceiling now, and it wraps rather than being cut.
 * Box sizes below are Figma's own six placeholder rectangles (node 56:596),
 * a deliberate big/small rhythm, not a fit to any one logo's proportions.
 * object-fit is contain rather than the original cover so a logo swap scales
 * to fit its box instead of being cropped to it. */
.ebiom-home .partner-row { width: 100%; max-width: 1332px; height: auto; min-height: 98px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px 109px; }
.ebiom-home .partner-row img { flex: 0 0 auto; max-width: none; max-height: none; object-fit: contain; mix-blend-mode: normal; }
.ebiom-home .partner-row img:nth-child(1) { width: 86px; height: 74px; }
.ebiom-home .partner-row img:nth-child(2) { width: 138px; height: 62px; }
.ebiom-home .partner-row img:nth-child(3) { width: 78px; height: 98px; }
.ebiom-home .partner-row img:nth-child(4) { width: 103px; height: 66px; }
.ebiom-home .partner-row img:nth-child(5) { width: 151px; height: 53px; }
.ebiom-home .partner-row img:nth-child(6) { width: 133px; height: 75px; }

.ebiom-home .driving-section { height: auto; min-height: 646px; align-items: center; padding: 107px max(54px, calc((100% - 1332px) / 2)); }
.ebiom-home .driving-background { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.ebiom-home .driving-section::before { display: none; }
/*
 * The band was two fixed boxes, a 288 grid holding a 188 text column, drawn
 * around the two paragraph version of this copy. The client's Research and
 * Innovation text is three paragraphs, which overflowed the 188 column and
 * ran out of the band. Both are content sized now, and the section keeps its
 * 646 frame height as a floor so nothing above or below shifts.
 */
.ebiom-home .driving-grid { height: auto; min-height: 288px; grid-template-columns: 640px 638px; gap: 38px; align-items: center; }
.ebiom-home .driving-grid > div:last-child { height: auto; }
.ebiom-home .driving-grid h2 { width: 581px; margin: 0 0 40px; font-size: 60px; line-height: 1.04; }
.ebiom-home .driving-grid h2 { transform: none; transform-origin: left center; }
/*
 * Figma 56:620 sets this column in Geist Regular 22 on a 28.6 leading. It was
 * running on a 1.18 leading, 25.96px, which packed the lines tighter than the
 * regular weight the frame specifies and read heavier than the rest of the
 * page. Family, weight and axis are declared here rather than inherited, so
 * the site wide Exposure axis on html cannot reach this copy. The axis is
 * cleared rather than pinned, so a bold run inside the copy still bolds.
 */
.ebiom-home .driving-grid p { width: 654px; max-width: none; margin: 0; font-family: "Geist Local", Geist, Arial, sans-serif; font-size: 22px; font-style: normal; font-weight: 400; font-variation-settings: normal; line-height: 1.3; }
.ebiom-home .driving-grid p + p { margin-top: 25px; }

.ebiom-home .insights-section { height: 1042px; padding: 108px max(57px, calc((100% - 1326px) / 2)); }
.ebiom-home .insights-section .section-heading { height: 124px; margin-bottom: 81px; }
.ebiom-home .insights-section .section-heading h2 { width: 610px; font-size: 60px; line-height: 1.04; }
.ebiom-home .insights-section .section-heading h2 { transform: none; }
.ebiom-home .insights-section .section-heading h2 br { display: none; }
.ebiom-home .insights-section .section-heading h2 em,
.ebiom-home .insights-section .section-heading h2 span { display: block; width: 610px; transform-origin: left center; }
.ebiom-home .insights-section .section-heading h2 em,
.ebiom-home .insights-section .section-heading h2 span { transform: none; }
.ebiom-home .insights-button { width: 272px; }
/*
 * The Figma columns are 675 and 617 with a 34 gutter, which is exactly the
 * 1326 content column at 1440. Written as pixels they stayed 1326 wide at
 * every window narrower than 1440 too, so the band was clipped for the whole
 * 1101 to 1439 range as well as on phones, and nobody caught it because the
 * round was measured at 1440, 1024, 768 and 390. The same two numbers as a
 * ratio resolve to the identical 675 and 617 at 1440 and simply narrow below
 * it, so there is no width at which this band can be cut off again.
 */
.ebiom-home .insights-layout { grid-template-columns: minmax(0, 675fr) minmax(0, 617fr); gap: 34px; }
.ebiom-home .featured-insight-media { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 675 / 417; overflow: hidden; border-radius: 5px; }
.ebiom-home .featured-insight img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 5px; object-fit: cover; }
.ebiom-home .tag { min-height: 31px; margin-top: 36px; padding: 0; justify-content: center; font-size: 14px; line-height: 1.12; }
/* The per pill widths that used to sit here (128 / 202 / 177 / 157) are gone.
 * main.css now sizes every pill from one padding token with !important, so
 * they were inert, and they were sized for the retired subject taxonomy that
 * the two label rule replaced. */
.ebiom-home .featured-insight h3 { margin: 20px 0 7px; font-size: 26px; font-weight: var(--weight-emphasis); line-height: normal; }
.ebiom-home .featured-insight p { width: 100%; margin: 0; font-size: 18px; font-weight: 350; line-height: 1.4; letter-spacing: -.003em; }
.ebiom-home .insight-list { gap: 20px; }
.ebiom-home .insight-row { grid-template-columns: 177px 1fr; gap: 25px; align-items: center; height: 141px; }
.ebiom-home .insight-row img { width: 177px; height: 141px; border-radius: 5px; }
.ebiom-home .insight-row > div { height: 141px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 25px; }
/* 415 and 379 are the Figma text boxes and they resolve exactly at 1440.
 * max-width and a minmax column let them narrow instead of running out of
 * the rail everywhere below it. */
.ebiom-home .insight-row { grid-template-columns: 177px minmax(0, 1fr); }
.ebiom-home .insight-row > div { min-width: 0; }
.ebiom-home .insight-row h3 { width: 415px; max-width: 100%; margin: 0; font-size: 22px; font-weight: 400; line-height: normal; }
.ebiom-home .insight-row:nth-child(1) h3 { width: 379px; max-width: 100%; }
.ebiom-home .insight-row .tag { min-height: 31px; margin: 0; }

.ebiom-home .testimonial-section { position: relative; height: 608px; grid-template-columns: 194px 253px 721px; gap: 45px; align-items: center; margin: 0; padding: 46px max(91px, calc((100% - 1258px) / 2)) 86px; background: var(--color-cream); }
.ebiom-home .testimonial-section::before { content: ""; position: absolute; z-index: 0; top: 46px; left: max(54px, calc((100% - 1332px) / 2)); right: max(54px, calc((100% - 1332px) / 2)); height: 476px; border-radius: 5px; background: var(--color-yellow); }
.ebiom-home .testimonial-section > * { position: relative; z-index: 1; }
.ebiom-home .testimonial-stage,
.ebiom-home .testimonial-slide { display: contents; }
.ebiom-home .testimonial-slide[hidden] { display: none; }
.ebiom-home .testimonial-slide > * { position: relative; }
.ebiom-home .testimonial-section > h2 { align-self: stretch; display: flex; align-items: flex-start; width: 194px; margin: 0; padding: 49px 0; font-size: 52px; line-height: 1.14; }
.ebiom-home .testimonial-person { width: 253px; height: 433px; min-height: 433px; display: block; padding: 0; }
.ebiom-home .testimonial-person > div { position: absolute; left: -239px; bottom: 28px; width: 194px; padding: 0; }
.ebiom-home .testimonial-person strong,
.ebiom-home .testimonial-person span { font-size: 16px; line-height: 1.294; }
.ebiom-home .testimonial-person strong { font-weight: 700; }
.ebiom-home .testimonial-person img { width: 253px; height: 433px; border-radius: 5px; }
.ebiom-home .testimonial-controls { display: flex; gap: 8px; margin-top: 18px; }
.ebiom-home .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; }
.ebiom-home .testimonial-controls button:first-child { transform: rotate(180deg); }
.ebiom-home .testimonial-controls button:disabled { opacity: .42; cursor: default; }
.ebiom-home .testimonial-controls img { width: 16px; height: 14px; border-radius: 0; }
/* Figma 56:691 "Case Study Title": Geist Regular 30 on 38.83. Declared, not
 * inherited, for the same reason as the band copy above. */
.ebiom-home .testimonial-section blockquote { width: 721px; height: 476px; padding: 65px 21px 65px 10px; font-family: "Geist Local", Geist, Arial, sans-serif; font-size: 30px; font-style: normal; font-weight: 400; font-variation-settings: normal; line-height: 1.294; }
/*
 * Client pin 13:24 added Olivier Evrard, whose quote is about twice the length
 * of the four the band was drawn around. The section, the yellow band and the
 * quote were all fixed heights (608, 476, 476), so between 1101 and 1439, where
 * the quote column narrows, his text ran 34px past the band in English and 53px
 * in French. All three now start at the drawn number and grow together instead.
 * The band swaps its 476px height for the section's own 86px bottom padding,
 * which resolves to exactly 476px at the drawn 608px height, so nothing moves
 * at 1440 and nothing spills at any narrower width.
 */
.ebiom-home .testimonial-section { height: auto; min-height: 608px; }
.ebiom-home .testimonial-section::before { height: auto; bottom: 86px; }
.ebiom-home .testimonial-section blockquote { height: auto; min-height: 476px; }

.ebiom-home .image-cta { position: relative; height: 583px; min-height: 583px; gap: 50px; overflow: hidden; background-position: center top; background-size: 100% 810px; }
/*
 * The closing band photo is a 768 by 1024 portrait aerial drawn into a full
 * width 810px band. object-fit: fill squashed it by 137% at 1440, 69% at 1024
 * and 26% at 768: the river read as a smear rather than a river. cover keeps
 * the photo's own proportions at every width. The vertical anchor is set at
 * 62% rather than the centre because the river runs across the lower middle
 * of the frame, and the band only shows its own top 583px, so a centred crop
 * would have pushed the water out of view entirely.
 */
.ebiom-home .image-cta-background { position: absolute; inset: 0 auto auto 0; z-index: 0; width: 100%; height: 810px; object-fit: cover; object-position: center 62%; }
.ebiom-home .image-cta > :not(.image-cta-background) { position: relative; z-index: 1; }
/*
 * Closing CTA, Figma 56:708. Innovation Title 56:713 is Exposure 80 with a
 * 96.015625 leading, not a solid 80: at line-height 1 the two lines collided.
 * The button 56:714 is 242 by 69, the same pill as the About and Services
 * instances of this component, which the 64 default was quietly shrinking.
 */
.ebiom-home .image-cta h2 { width: 1044px; max-width: calc(100% - 108px); margin: 0; font-size: 80px; line-height: 1.2002; }
.ebiom-home .image-cta h2 { transform: none; transform-origin: center; }
.ebiom-home .image-cta .button { --button-orb-size: 69px; min-height: 69px; font-weight: 400; }


/*
 * The hero entrance keeps its fade and its slight scale, but no longer animates
 * a blur. An animated filter has to re-rasterize the whole hero photograph on
 * every frame for the full 800ms, and it ran at first paint, competing with the
 * layout and decode of the rest of the page: the one moment a visitor is
 * actually watching the page appear. Opacity and transform are handed to the
 * compositor instead, so the same movement costs no main thread work. The
 * 2px blur it drops is not perceptible against a 1.6 percent scale.
 */
@keyframes ebiom-image-enter { from { opacity: .84; transform: scale(1.016); } to { opacity: 1; transform: scale(1); } }
@keyframes ebiom-copy-enter { from { opacity: .76; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/*
 * The value chain panel is a 619 plus 712 pixel grid that measures exactly the
 * 1331 content column at 1440 and stays 1331 wide at every window below it,
 * so from 1101 to 1439, which includes the two commonest laptop widths, the
 * accordion ran 290px past main.home-main and its right edge, the plus and
 * minus control included, was silently chopped. It only ever collapsed at
 * 1100. Between the two it now keeps its two columns and simply scales them:
 * the same ratio, 619 to 712, resolves to the identical pixel widths at 1440.
 */
@media (min-width: 1101px) and (max-width: 1439px) {
  .ebiom-home .innovation-panel { grid-template-columns: minmax(0, 619fr) minmax(0, 712fr); padding-left: 54.5px; padding-right: 54.5px; }
  .ebiom-home .innovation-image,
  .ebiom-home .innovation-image img { width: 100%; }
  .ebiom-home .innovation-copy { width: 100%; padding-right: 40px; }
  .ebiom-home .innovation-copy h2,
  .ebiom-home .innovation-copy h2 > span,
  .ebiom-home .innovation-copy > p,
  .ebiom-home .service-accordion,
  .ebiom-home .service-row,
  .ebiom-home .innovation-copy .small-copy { width: 100%; }
  .ebiom-home .service-detail { width: calc(100% - 40px); }
  /* Same fixed pixel grid, same clip: the research band is 640 plus 638 and
   * the testimonial band is 194 plus 253 plus 721, both drawn for the 1440
   * frame and both cut off below it until the 1100 collapse. Ratios and a
   * flexible last column instead, so the quote and the third paragraph stay
   * inside the page at every laptop width. */
  .ebiom-home .driving-grid { grid-template-columns: minmax(0, 640fr) minmax(0, 638fr); }
  .ebiom-home .driving-grid h2 { width: 100%; max-width: 581px; }
  .ebiom-home .driving-grid p { width: 100%; max-width: 654px; }
  .ebiom-home .testimonial-section { grid-template-columns: 194px 253px minmax(0, 1fr); padding-left: 65px; padding-right: 65px; }
  .ebiom-home .testimonial-section blockquote { width: auto; }
}

/*
 * The site drops its section CTAs to a round icon at 620. Just above that
 * threshold they are still full pills, and the headings above them are still
 * at their desktop type size, so from 621 to roughly 660 the pair could not
 * fit the content column and the CTA was clipped off the right edge. In that
 * narrow band the CTA drops under its heading instead. Nothing at 700 and up
 * changes: there the heading still shrinks enough for both to share a line.
 */
@media (min-width: 621px) and (max-width: 700px) {
  .ebiom-home .section-heading { flex-wrap: wrap; row-gap: 24px; }
}

@media (max-width: 1100px) {
  .ebiom-home .home-hero-copy { left: 54px; }
  .ebiom-home .innovation-panel { height: auto; min-height: 0; grid-template-columns: 1fr; padding: 28px 24px 70px; }
  .ebiom-home .innovation-image,
  .ebiom-home .innovation-image img { width: 100%; height: 720px; }
  .ebiom-home .innovation-copy { width: 100%; height: auto; min-height: 0; padding: 55px 0 0; }
  .ebiom-home .innovation-copy h2,
  .ebiom-home .innovation-copy > p,
  .ebiom-home .service-accordion,
  .ebiom-home .service-row,
  .ebiom-home .innovation-copy .small-copy { width: 100%; }
  .ebiom-home .innovation-copy h2 > span { width: 100%; }
  .ebiom-home .service-detail { width: calc(100% - 40px); }
  .ebiom-home .expertise-section,
  .ebiom-home .partners-section,
  .ebiom-home .insights-section,
  .ebiom-home .testimonial-section,
  .ebiom-home .expertise-grid { height: auto; grid-template-columns: 1fr; }
  .ebiom-home .expertise-card { min-height: 560px; }
  /* The six logos are fixed pixel marks and total 929px with their gaps, so
   * between 620 and 1100 the row ran past the viewport and main.home-main
   * clipped the last two off. It wraps instead of being cut. */
  .ebiom-home .partner-row { width: 100%; height: auto; flex-wrap: wrap; gap: 32px 48px; }
  .ebiom-home .driving-section { height: auto; min-height: 0; }
  .ebiom-home .driving-grid { height: auto; grid-template-columns: 1fr; gap: 24px; }
  .ebiom-home .driving-grid > div:last-child { height: auto; }
  .ebiom-home .driving-grid h2,
  .ebiom-home .driving-grid p { width: 100%; }
  /*
   * Field notes and perspectives, the band the client sees first.
   *
   * Everything under this comment used to keep a desktop pixel width inside a
   * narrow column: the heading and both of its lines were pinned to 610px,
   * the featured media to 675px, the four row titles to 379 and 415px, and
   * the layout to a plain 1fr, whose automatic minimum is min-content and so
   * could never go below the 675px card. main.home-main{overflow:hidden} then
   * chopped the right side off rather than showing a scrollbar, which is why
   * the copy read as cut mid word and the More insights button was 74% off
   * screen at 768 and completely off screen at 390.
   *
   * The rule now is the one the rest of the page already follows: nothing in
   * this band carries a pixel width below 1100, every grid column is
   * minmax(0, 1fr) so it is allowed to be narrower than its content, and
   * every text box may wrap.
   */
  .ebiom-home .insights-section .section-heading h2,
  .ebiom-home .insights-section .section-heading h2 em,
  .ebiom-home .insights-section .section-heading h2 span { width: auto; max-width: 100%; }
  /* This is the only heading on the page whose CTA carries a long label, 272px
   * in English and 296px in French. Once the h2 was allowed to shrink it was
   * squeezed to 352px at 768 and broke "Field notes and" into two lines, so
   * the designed two line heading became three with "and" left hanging. The
   * row wraps below 480px of heading instead: the CTA drops under the title
   * and the title keeps the line break Figma draws. */
  .ebiom-home .insights-section .section-heading { height: auto; flex-wrap: wrap; row-gap: 28px; }
  .ebiom-home .insights-section .section-heading h2 { flex: 1 1 480px; }
  .ebiom-home .insights-layout { grid-template-columns: minmax(0, 1fr); }
  .ebiom-home .featured-insight,
  .ebiom-home .featured-insight > a { min-width: 0; }
  .ebiom-home .featured-insight-media { width: 100%; height: auto; aspect-ratio: 675 / 417; }
  .ebiom-home .featured-insight img { width: 100%; height: 100%; }
  .ebiom-home .featured-insight h3,
  .ebiom-home .featured-insight p { width: 100%; max-width: 100%; }
  .ebiom-home .insight-row { grid-template-columns: 177px minmax(0, 1fr); }
  .ebiom-home .insight-row > div { min-width: 0; }
  .ebiom-home .insight-row h3,
  .ebiom-home .insight-row:nth-child(1) h3 { width: auto; max-width: 100%; overflow-wrap: break-word; }
  .ebiom-home .testimonial-section { grid-template-columns: 194px 253px 1fr; padding-left: 65px; padding-right: 65px; }
  .ebiom-home .testimonial-section blockquote { width: auto; }
}

@media (max-width: 620px) {
	.ebiom-home h2,
	.ebiom-home .innovation-copy h2,
	.ebiom-home .expertise-section .section-heading h2,
	.ebiom-home .partners-section .section-heading h2,
	.ebiom-home .driving-grid h2,
	.ebiom-home .insights-section .section-heading h2,
	.ebiom-home .testimonial-section > h2,
	.ebiom-home .image-cta h2 { transform: none; }
  .ebiom-home .home-hero { height: 100vh; height: 100svh; min-height: 0; }
  .ebiom-home .home-hero-copy { top: 180px; left: 18px; width: calc(100% - 36px); max-width: none; }
  .ebiom-home .home-hero h1 { width: 100%; margin-bottom: 28px; font-size: 57px; }
  .ebiom-home .home-hero p { width: 100%; margin-bottom: 32px; font-size: 16px; }
  .ebiom-home .button,
  .ebiom-home .button-hero { --button-orb-size: 58px; --button-body-padding: 44px; width: 210px; height: 58px; font-size: 16px; }
  .ebiom-home .innovation-panel { padding-left: 18px; padding-right: 18px; }
  .ebiom-home .innovation-image,
  .ebiom-home .innovation-image img { height: 560px; }
  .ebiom-home .innovation-copy h2 { font-size: 53px; }
  .ebiom-home .innovation-copy > p { font-size: 18px; }
  /*
   * The single-line ellipsis truncation from the desktop row (below) cuts
   * real words off on narrow phones, where the longer row labels no longer
   * fit on one line even at the smaller mobile font-size. Letting the label
   * wrap to two lines here keeps every word readable instead of clipping it.
   */
  .ebiom-home .service-row { height: auto; min-height: 74px; align-items: center; padding-top: 14px; padding-bottom: 14px; font-size: 18px; }
  .ebiom-home .service-row > span:first-child { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.25; }
  .ebiom-home .section-pad { padding-left: 18px; padding-right: 18px; }
  .ebiom-home .expertise-section { padding-top: 65px; padding-bottom: 65px; }
  .ebiom-home .expertise-section .section-heading h2 { font-size: 54px; }
  /* At 390 the widest single word in the Field notes heading measures 274px
   * and the round CTA is 58px, so main.css's 30px heading gap put the pair
   * 8px past the 354px content column and clipped the CTA. 16px clears it in
   * both languages without touching the type. */
  .ebiom-home .section-heading { gap: 16px; }
  .ebiom-home .section-heading .button { --button-orb-size: 58px; width: 58px; height: 58px; }
  .ebiom-home .section-heading .button-label { display: none; }
  .ebiom-home .expertise-card { height: 560px; }
  .ebiom-home .partners-section { min-height: 310px; padding-top: 45px; padding-bottom: 45px; }
  .ebiom-home .partners-section .section-heading h2 { font-size: 49px; }
  .ebiom-home .partner-row { justify-content: flex-start; overflow-x: auto; }
  .ebiom-home .driving-section { height: auto; min-height: 720px; padding: 70px 18px; }
  .ebiom-home .driving-grid { grid-template-columns: 1fr; }
  .ebiom-home .driving-grid h2 { width: 100%; font-size: 53px; }
  .ebiom-home .driving-grid p { font-size: 18px; }
  .ebiom-home .insights-section { padding: 75px 18px; }
  .ebiom-home .insights-section .section-heading { height: auto; margin-bottom: 45px; }
  /* Below 620 the CTA is already a 58px round mark, so the heading and the
   * button sit side by side again exactly as they do on the expertise and
   * partners bands, and the wrap above is released. */
  .ebiom-home .insights-section .section-heading { flex-wrap: nowrap; }
  .ebiom-home .insights-section .section-heading h2 { flex: 0 1 auto; width: auto; font-size: 52px; }
  .ebiom-home .insight-row { grid-template-columns: 118px 1fr; height: auto; gap: 15px; }
  .ebiom-home .insight-row img { width: 118px; height: 95px; }
  .ebiom-home .insight-row > div { width: 100%; height: auto; gap: 14px; min-width: 0; }
  .ebiom-home .insight-row h3 { width: auto; max-width: 100%; margin-top: 4px; font-size: 17px; overflow-wrap: anywhere; }
  .ebiom-home .insight-row:nth-child(n) h3 { width: auto; }
  .ebiom-home .insight-row .tag { max-width: 100%; }
  .ebiom-home .testimonial-section { display: block; padding: 46px 18px; }
  .ebiom-home .testimonial-section::before { left: 18px; right: 18px; height: calc(100% - 92px); }
  .ebiom-home .testimonial-section > h2 { width: auto; padding: 35px 25px 20px; }
  .ebiom-home .testimonial-person { width: calc(100% - 50px); height: auto; min-height: 0; margin: 0 25px; }
  .ebiom-home .testimonial-person > div { position: static; width: 100%; padding-top: 20px; }
  .ebiom-home .testimonial-person > .testimonial-image { width: 100%; height: auto; aspect-ratio: 253 / 433; object-fit: cover; }
  /* min-height 0 releases the 476px floor the desktop quote now starts from,
   * which would otherwise pad a short quote out on a phone. */
  .ebiom-home .testimonial-section blockquote { width: auto; height: auto; min-height: 0; padding: 70px 25px 40px; font-size: 22px; }
  .ebiom-home .image-cta { height: 590px; min-height: 590px; padding: 30px 18px; }
  .ebiom-home .image-cta h2 { max-width: 100%; font-size: 58px; }
}

/*
 * Below 390 the longest word in the Field notes heading no longer clears the
 * round CTA beside it. One step down in type is enough, and 390 itself is
 * untouched.
 */
@media (max-width: 389px) {
  .ebiom-home .insights-section .section-heading h2 { font-size: 46px; }
  /* Client pins 12:04, 13:09 and 13:10 put a heading line plus a paragraph in
   * the expertise card, and on a coarse pointer that panel is always open. Under
   * 390 the longest French card wraps to eight lines, and 18px at 1.3 no longer
   * clears its own title, so the copy steps down one notch here. The card, the
   * title and the panel keep the sizes they are drawn at. */
  .ebiom-home .expertise-overlay p { font-size: 17px; }
  .ebiom-home .expertise-overlay-lead { margin-bottom: 6px; }
}

/*
 * Coarse pointers have no hover, so the expertise card paragraph was
 * permanently opacity 0 and visibility hidden on every phone and tablet: the
 * card is a link to Services, so tapping it navigated away rather than
 * revealing anything, and the copy was unreachable. The About team card got
 * this fallback this round and these cards use the same reveal pattern, so
 * they get the same treatment: on touch the panel is simply already open,
 * with no gesture to learn and nothing to animate.
 */
@media (hover: none) {
  .ebiom-home .expertise-overlay { background: var(--color-forest); transition: none; }
  .ebiom-home .expertise-overlay h3,
  .ebiom-home .expertise-arrow { top: 68.85px; transition: none; }
  .ebiom-home .expertise-overlay p { opacity: 1; visibility: visible; transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ebiom-home .refraction-standalone > img { transform: none; }
  .ebiom-home .home-hero-bg,
  .ebiom-home .home-hero h1,
  .ebiom-home .home-hero p,
  .ebiom-home .home-hero .button { animation: none; }
  .ebiom-home .button-hero,
  .ebiom-home .button-hero::before,
  .ebiom-home .button-hero::after,
  .ebiom-home .button-hero .button-label,
  .ebiom-home .button-hero .button-arrow,
  .ebiom-home .button:not(.header-cta):not(.button-hero),
  .ebiom-home .button:not(.header-cta):not(.button-hero)::before,
  .ebiom-home .button:not(.header-cta):not(.button-hero)::after,
  .ebiom-home .button:not(.header-cta):not(.button-hero) .button-label,
  .ebiom-home .button:not(.header-cta):not(.button-hero) .button-arrow,
  .ebiom-home .button-liquid,
  .ebiom-home .button-liquid::before,
  .ebiom-home .button-liquid::after,
  .ebiom-home .button-liquid-neck,
  .ebiom-home .expertise-media,
  .ebiom-home .expertise-refraction,
  .ebiom-home .expertise-overlay,
  .ebiom-home .expertise-overlay h3,
  .ebiom-home .expertise-overlay p,
  .ebiom-home .expertise-arrow { transition: none; }
}