/* Scale cards — section head plus a row of glass cards, each with a product
   composition. Everything hangs off .srw-sc, the class the section carries. */

/* ---------- the divider that opens the band ----------
   The design draws a hairline where this section starts: not full bleed, but the
   width of the container, fading out at both ends. It is drawn by an absolutely
   positioned .wrap so it lands on the section's top edge — above its own top
   padding — exactly where the mock-up puts it, between the block above and this
   one, and so it takes no room in the flow.

   The shared "Hairline on top" of the layout tab is a different line (a full
   bleed inset shadow in --c-border); this one is the page's own divider. */
.srweb .srw-sc-rule { position: absolute; top: 0; left: 0; right: 0; }
.srweb .srw-sc-rule span {
	display: block; height: 1px;
	background: linear-gradient(90deg,
		rgba(0,0,0,0) 0%, rgba(36,67,120,.16) 14%,
		rgba(36,67,120,.16) 86%, rgba(0,0,0,0) 100%);
}

/* ---------- section head: headline + CTA on the left, running text on the right ---------- */
/* The eyebrow sits right on top of the headline here — they read as one block.
   base.css gives every eyebrow a line of air below it, which is right under a
   .sec-head but opens a gap this two column head does not have. */
.srweb .srw-sc .eyebrow { margin-bottom: 0; }
.srweb .srw-sc-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; margin-bottom: clamp(2rem, 4vw, 3rem); }
/* Delete every paragraph and the head is a headline alone: one column, or it
   would keep half the row empty next to it. */
.srweb .srw-sc-head--solo { grid-template-columns: minmax(0, 1fr); }
.srweb .srw-sc-lede { min-width: 0; }

/* A headline of 20+ words needs a smaller body size to still read as a headline,
   which is why it does not simply inherit the h2 of base.css. */
.srweb .srw-sc .srw-sc-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 2.5vw, 2.25rem); line-height: 1.12; letter-spacing: -.022em; color: var(--c-ink); max-width: none; margin: 0; }
/* On its own the headline gets its measure back, or it would run the full width
   of the page. After the rule above, which drops the measure for the two-column
   head: same specificity, so order is what decides. */
.srweb .srw-sc .srw-sc-head--solo .srw-sc-title { max-width: 42rem; }
.srweb .srw-sc-lede .btn { margin-top: var(--sp-lg); }

.srweb .srw-sc-paras { display: grid; gap: var(--sp-md); min-width: 0; }
.srweb .srw-sc-paras p { font-size: 1rem; line-height: 1.65; color: var(--c-text-soft); margin: 0; }
/* The opening paragraph is the way into the block, so it is darker and larger. */
.srweb .srw-sc-paras p:first-child { font-size: 1.08rem; color: var(--c-text); }

/* ---------- the row of cards ---------- */
.srweb .srw-sc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-lg); }
.srweb .srw-sc-grid--1 { grid-template-columns: minmax(0, 1fr); }
.srweb .srw-sc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Glass: the same recipe the rest of the page uses, restated here so this widget
   does not depend on a shared class that lives outside its own folder. */
.srweb .srw-sc-card {
	display: flex; flex-direction: column; overflow: hidden;
	border-radius: var(--r-xl);
	padding: clamp(1.3rem, 2.4vw, 1.9rem);
	background: linear-gradient(160deg, rgba(255,255,255,.82), rgba(236,254,255,.6));
	-webkit-backdrop-filter: blur(24px) saturate(1.35);
	backdrop-filter: blur(24px) saturate(1.35);
	border: 1px solid rgba(255,255,255,.75);
	box-shadow: var(--sh-glass);
	transition: transform var(--t-micro) var(--ease-out), box-shadow var(--t-micro) var(--ease-out);
}
.srweb .srw-sc-card:hover { transform: translateY(-4px); box-shadow: 0 26px 56px rgba(36,67,120,.16); }
.srweb .srw-sc-card p { font-size: 1rem; line-height: 1.6; color: var(--c-text); margin: 0; }

.srweb .srw-sc-top { display: flex; align-items: center; gap: .75em; margin-bottom: var(--sp-md); }
.srweb .srw-sc-ico { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--c-glow-soft); border: 1px solid rgba(34,211,238,.4); color: #0e7490; transition: background .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out); }
.srweb .srw-sc-ico svg { width: 22px; height: 22px; display: block; }
.srweb .srw-sc-card:hover .srw-sc-ico { background: var(--c-glow); border-color: var(--c-glow); color: #fff; }
/* The title keeps the running line height of the page, not a tight display one:
   the glyph next to it is 42px tall and a 1.15 title left the two out of step,
   with the card head 8px shorter than the design. */
.srweb .srw-sc .srw-sc-name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.55; letter-spacing: -.01em; color: var(--c-ink); margin: 0; }

/* ---------- the product band ----------
   One shelf, one floor line and one height in all three cards, so the sizes can
   be compared card to card without noise.

   The photographs are shot on white and are fused into the card with
   mix-blend-mode:multiply — no cut-outs, no second version of the file. The
   backdrop they multiply against is the card's own glass gradient: the card
   carries backdrop-filter, which already closes a blending group around it, so
   nothing from the section or the page leaks into the blend.

   The band paints no background of its own. It used to lay a white panel with
   rounded top corners over the glass, which read as a second card inside the
   card; the design leaves the glass showing through and only draws the floor
   line. `isolation` went with it: on a transparent band it would have cut the
   multiply off from the gradient and left the white squares visible. */
.srweb .srw-sc-viz {
	display: flex; align-items: flex-end; justify-content: center;
	gap: clamp(.5rem, 1.6vw, 1.1rem);
	height: 170px;
	margin-bottom: var(--sp-md);
	padding: 0 0 .9rem;
	border-bottom: 1px solid var(--c-border);
}
/* Parallel vessels: the pair is a bioreactor next to an incubator, both wide,
   and at the common gap they crowded the edges. Only this composition tightens. */
.srweb .srw-sc-viz--out { gap: clamp(.3rem, 1vw, .62rem); }
.srweb .srw-sc-it { margin: 0; display: flex; align-items: flex-end; justify-content: center; }
.srweb .srw-sc-it img { display: block; width: auto; max-width: 100%; object-fit: contain; }
.srweb .srw-sc-it--blend img { mix-blend-mode: multiply; }

/* Heights measured on the painted page, not on the files: the well plate really
   is far smaller than the bioreactor, but at its true ratio it read as a smudge,
   so the whole band grew and the plate with it. The incubator is nudged 7px down
   because its file leaves no air underneath while the bioreactor's does, and
   flex-end aligns the boxes, not the products. */
.srweb .srw-sc-it--lg img { height: 142px; }
.srweb .srw-sc-it--inc img { height: 132px; margin-bottom: 7px; }
.srweb .srw-sc-it--plate img { height: 124px; }
.srweb .srw-sc-it--md img { height: 104px; }
.srweb .srw-sc-it--sm img { height: 100px; }

.srweb .srw-sc-arw { color: #9fb0c8; flex: none; padding-bottom: 44px; }
.srweb .srw-sc-arw svg { width: clamp(26px, 3.4vw, 40px); height: auto; display: block; }

/* ---------- narrow screens ---------- */
@media (max-width: 980px) {
	.srweb .srw-sc-head,
	.srweb .srw-sc-grid,
	.srweb .srw-sc-grid--2 { grid-template-columns: minmax(0, 1fr); }
}
/* On a phone the band keeps its full height and the products keep their sizes:
   the approved layout shrinks nothing below 980px, and a shorter band there made
   the size relationship — the whole point of the composition — harder to read.
   The pictures are already held inside the card by max-width. */


/* ---------- the section's own breathing room ----------
   The approved layout gives every section «padding: clamp(3.4rem, 7vw, 5.4rem)»
   of its own — 86px at a desktop width — and some of them open a little tighter,
   at «clamp(2.6rem, 5vw, 4rem)» = 64px. The Layout tab's spacing steps top out
   at 40px, so a section built only from those reads visibly more cramped than
   the design. The padding lives here, and those steps are then set to "None"
   in the page content so the two do not add up. */
.srweb .srw-sc { padding-block: clamp(3.4rem, 7vw, 5.4rem); }
.srweb .srw-sc--tight { padding-top: clamp(2.6rem, 5vw, 4rem); }


/* The seam sits inside .wrap, which the section's top padding has already
   pushed down, so it has to climb back exactly that far to land on the
   boundary between the blocks instead of just above the eyebrow. The travel
   is read from a custom property the padding sets, so the two can never
   drift apart: change one and the other follows. */
.srweb .srw-sc { --srw-seam-lift: clamp(3.4rem, 7vw, 5.4rem); }
.srweb .srw-sc--tight { --srw-seam-lift: clamp(2.6rem, 5vw, 4rem); }
/* No lift here: this seam is already absolute at the section's top edge,
   so it lands on the boundary on its own. */