/* ---- assay (Assay — Lab glassware & clinical consumables 151) --------------
   THE STRUCTURAL MOVE: SIX WELDED TILES BEFORE A SINGLE WORD OF PROSE. The
   reference opens on a six-up icon row; here that row loses its container and
   its gutters entirely and fuses onto the floor of the three-slide stage, each
   photograph sitting on a painted methylene-blue caption bar with the label
   centred. Its opposite number — the four-figure counter the reference prints
   high, just under the hero — is pushed LATE, below the catalogue, and runs
   contained, gapped and bare on white. Blue is spent only as flat slabs: the
   weld band, the banner, the closing contact band and the buy controls. The
   category word and the price stay graphite on purpose, so the one colour never
   turns into a tint ladder or a second accent. The late counter is reached
   through `.sc-about-split + .sc-strip`, because the split richtext ahead of it
   renders as .sc-about-split and never as .sc-strip's own element type. */
body.t-assay {
  background: #f6f7f9;
  color: #3a4048;
  --as-blue: #1c39a8;
  --radius: 0;
  --shadow: none;
  --header-bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eaedf2;
  --line: #d9dde4;
  --line-strong: #b6bcc6;
  --heading: #1b1e22;
  --text: #3a4048;
  --muted: #6a727d;
}

/* flat bars, never transparent — nothing floats over the stage, the photograph
   starts underneath the header the way the reference's two-storey bar sits on it */
body.t-assay .sf-head, body.t-assay .sf-header,
body.t-assay .sf-foot, body.t-assay .sf-footer, body.t-assay .sf-cats {
  background: #f6f7f9; border-color: #d9dde4;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-assay .btn.brand { background: var(--as-blue); border: 0; color: #f2f5fc; box-shadow: none; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; font-size: 11px; padding: 15px 30px; }

/* the stage — the whole first screen, three slides, type held to the LEFT third */
body.t-assay .sc-hero { min-height: 100vh; padding: 96px max(24px, calc(50vw - 560px)); }
body.t-assay .sc-hero-left .sc-hero-inner { max-width: 500px; }
body.t-assay .sc-hero h1 { font-weight: 800; font-size: clamp(33px, 5.4vw, 60px); line-height: 1.04; letter-spacing: -0.03em; }

/* THE WELD — six tiles, no container, no padding, no gutters, fused to the
   floor of the stage and arriving before any prose. The caption stops being a
   line of text under a picture and becomes a painted blue bar. */
body.t-assay .sc-hero + .sc-strip { max-width: none; width: 100%; margin: 0; padding: 0; }
body.t-assay .sc-hero + .sc-strip .sc-strip-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
body.t-assay .sc-hero + .sc-strip .sc-strip-img { aspect-ratio: 4 / 3; border: 0; }
body.t-assay .sc-hero + .sc-strip .sc-strip-label { margin: 0; padding: 18px 14px 20px; background: var(--as-blue); color: #dfe6f8; text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; line-height: 1.5; }

/* the bare centred slab — no image in it at all, and more air above and below
   it than any other band on this page is given */
body.t-assay .sc-richtext { max-width: 680px; padding: 132px 20px 108px; }
body.t-assay .sc-richtext p, body.t-assay .sc-about-copy p { color: var(--text); font-size: 16.5px; line-height: 1.95; }

/* THE CATALOGUE — eight tiles, four across, two rows that fill */
body.t-assay .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 22px; }
body.t-assay .sc-buy-cat { color: var(--muted); }
body.t-assay .sc-buy-p { color: var(--heading); font-weight: 700; font-variant-numeric: tabular-nums; }

/* the page's only two-column band */
body.t-assay .sc-about-split { padding: 96px 20px 88px; gap: 60px; }

/* THE LATE COUNTER — four figures standing BELOW the catalogue rather than
   above it, contained and gapped: the weld's opposite in every respect */
body.t-assay .sc-about-split + .sc-strip { padding: 0 20px 96px; }
body.t-assay .sc-about-split + .sc-strip .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
body.t-assay .sc-about-split + .sc-strip .sc-strip-img { aspect-ratio: 3 / 2; }
body.t-assay .sc-about-split + .sc-strip .sc-strip-label { margin-top: 14px; text-align: left; font-size: clamp(14px, 1.4vw, 18px); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--heading); font-variant-numeric: tabular-nums; }

/* the two closing slabs, welded to each other and to the foot. The banner keeps
   its photograph but multiplies it under the blue, so it reads as one flat
   painted band rather than a picture with words on it. */
body.t-assay .sc-banner { margin: 0 calc(50% - 50vw); min-height: 46vh; display: flex; align-items: center; justify-content: center; background-color: var(--as-blue); background-blend-mode: multiply; }
body.t-assay .sc-contact-band { background: var(--as-blue); color: #e8edfa; margin-top: 0; padding: 84px 0 92px; --muted: #b9c6ea; --surface: #2c48b3; --line: #4a63c2; }
body.t-assay .sc-contact-band .sc-contact-form { max-width: 460px; margin: 0 auto; }
body.t-assay .sc-contact-band .btn.brand { background: #f6f7f9; color: #16225c; }

@media (max-width: 900px) {
  body.t-assay .sc-hero { min-height: 82vh; }
  body.t-assay .sc-richtext { padding: 84px 20px 68px; }
  body.t-assay .sc-hero + .sc-strip .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-assay .sc-about-split + .sc-strip .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-assay .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body.t-assay .sc-hero + .sc-strip .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the bench under the strip lights. The ground drops to cold near-black
   and the methylene lifts two steps to #6b8bf5, because #1c39a8 was picked to
   hold as a dark slab against bench white and goes to a bruise against a
   near-black one. Once it lifts, every blue slab inverts its type: the buy
   control, the weld caption and the closing band all take dark ink, and the
   submit on the contact band goes back to the page ground so it still reads as
   the one thing to press. */
html[data-theme="dark"] body.t-assay {
  background: #0f1216;
  color: #b0b7c1;
  --as-blue: #6b8bf5;
  --header-bg: #0f1216;
  --surface: #171b21;
  --surface-2: #1e232b;
  --line: #2a303a;
  --line-strong: #3b424e;
  --heading: #eef1f6;
  --text: #b0b7c1;
  --muted: #7c8492;
}
html[data-theme="dark"] body.t-assay .sf-head, html[data-theme="dark"] body.t-assay .sf-header,
html[data-theme="dark"] body.t-assay .sf-foot, html[data-theme="dark"] body.t-assay .sf-footer,
html[data-theme="dark"] body.t-assay .sf-cats { background: #0f1216; border-color: #2a303a; }
html[data-theme="dark"] body.t-assay .btn.brand { color: #0b1024; }
html[data-theme="dark"] body.t-assay .sc-hero + .sc-strip .sc-strip-label { color: #101a3f; }
html[data-theme="dark"] body.t-assay .sc-contact-band { color: #101a3f; --muted: #2b3d84; --surface: #8ea5f8; --line: #3f56b8; }
html[data-theme="dark"] body.t-assay .sc-contact-band .btn.brand { background: #0f1216; color: #d9e0ee; }