/* USAS preview: hero, 01 ECP, 03 FluoQube, 07 DaraEx */
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(../assets/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(../assets/fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(../assets/fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:700;font-display:swap;src:url(../assets/fonts/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(../assets/fonts/barlow-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Barlow;font-weight:600;font-display:swap;src:url(../assets/fonts/barlow-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Barlow;font-weight:700;font-display:swap;src:url(../assets/fonts/barlow-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-weight:400;font-display:swap;src:url(../assets/fonts/bodoni-moda-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-weight:500;font-display:swap;src:url(../assets/fonts/bodoni-moda-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-display:swap;src:url(../assets/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}

:root{
  --navy:#0B1B2B; --paper:#F7F9FB; --cyan:#008DCB; --magenta:#EC008B;
  --it-bg:#F4F5F0; --it-bg-rgb:244,245,240; --it-ink:#1C1C1C; --it-muted:#6A6A62; --it-line:#DEDED4; --uv-deep:#0E0B1F; --uv-soft:#B9A4FF; --it-green:#008C45; --it-red:#CD212A; --uv:#7B4DFF;
  --de-black:#111111; --de-red:#DD0000; --de-gold:#FFCC00; --de-ink:#F2F2F2; --fetal:#FFF8E6;
  --dara-bg:#B30000;
  --pad:clamp(20px,5vw,72px);
  --sans:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;font-family:var(--sans);color:var(--it-ink);background:#EEEFEF;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
svg{display:block;max-width:100%;height:auto}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px var(--pad);transition:background .35s,color .35s,box-shadow .35s;color:#fff}
.nav.is-light{background:rgba(255,255,255,.94);color:var(--navy);box-shadow:0 1px 0 rgba(11,27,43,.08);backdrop-filter:blur(10px)}
.nav.is-dark{background:rgba(11,11,14,.55);backdrop-filter:blur(10px)}
.nav__brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;letter-spacing:.14em;font-size:15px}
.nav__brand img{display:block;width:auto;height:54px}
.nav__brand .nav__logo--on-dark,.nav.is-dark .nav__brand .nav__logo{display:none}
.nav.is-dark .nav__brand .nav__logo--on-dark{display:block}
.nav__links{display:flex;gap:26px;font-size:14px}
.nav__links a{text-decoration:none;opacity:.85}
.nav__links a:hover{opacity:1}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:11px 20px;font-weight:600;font-size:14px;text-decoration:none;border:1.5px solid currentColor;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-1px)}
.btn--solid{background:var(--cyan);border-color:var(--cyan);color:#fff}
.btn svg{width:18px;height:18px}

/* ---------- common section scaffolding ---------- */
.section{position:relative;min-height:100vh;overflow:clip}
.eyebrow{display:flex;align-items:center;gap:12px;font:600 13px/1 Barlow,var(--sans);letter-spacing:.18em;text-transform:uppercase}
.eyebrow .num{font-variant-numeric:tabular-nums}
.lede{font-size:clamp(16px,1.25vw,19px);max-width:34em}
.flag{width:26px;height:18px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.maker{display:flex;align-items:center;gap:14px;font-size:13px;opacity:.8}
.maker img.logo{height:26px;width:auto}

/* ---------- hero (light): a short film plays once on load, then rests on the USAS emblem ---------- */
/* --hero-rgb matches the film's white studio exactly, so the film has no visible edge */
.hero{--hero-rgb:255,255,255;--hero-bg:rgb(var(--hero-rgb));--hero-ink:#0B1B2B;position:relative;background:var(--hero-bg);color:var(--hero-ink);overflow:clip}
.hero__stage{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;object-position:70% 50%;background:var(--hero-bg)}
.hero__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hero__lines path,.hero__lines circle{fill:none;stroke-width:1}
.hero__readout{position:absolute;left:0;top:0;width:380px;pointer-events:none;will-change:transform}
.hero__panel{position:absolute;left:0;top:0;width:100%;opacity:0}
.hero__locus{display:flex;align-items:center;gap:10px;margin-bottom:12px;font:400 10.5px/1 'JetBrains Mono',monospace;color:#8C99A5}
.hero__locus svg{overflow:visible}
.hero__locus line{stroke:#D5DDE3;stroke-width:2}
.hero__locus circle{fill:#fff;stroke:#A9B5BF;stroke-width:1.4}
.hero__locus circle.on{fill:var(--cyan);stroke:var(--cyan)}
.hero__k{display:flex;align-items:center;gap:8px;margin:0;font:600 10.5px/1 Barlow,var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#5D6B78}
.hero__k::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.hero__k.is-red{color:#C8321E}.hero__k.is-red::before{background:#C8321E}
.hero__k.is-ok{color:#0079B8}
.hero__seq{margin:9px 0 0;font:400 14px/1.6 'JetBrains Mono',monospace;letter-spacing:.02em;white-space:pre;color:var(--hero-ink)}
.hero__seq b{font-weight:500;color:#fff;background:var(--cyan);border-radius:2px;box-shadow:0 0 0 2px var(--cyan)}
.hero__seq .dim{color:#9AA6B1}.hero__seq .r{font-weight:500;color:#C8321E}.hero__seq .g{font-weight:500;color:#0079B8}
.hero__small{margin:3px 0 0;font:400 11.5px/1.5 'JetBrains Mono',monospace;color:#5D6B78}
.hero__small b{font-weight:500;color:var(--hero-ink)}
.hero__small .dim{color:#9AA6B1}
.hero__bar{position:relative;height:2px;margin-top:9px;background:#E6EBEF}
.hero__bar u{position:absolute;left:0;top:0;height:2px;width:var(--read,0%);background:rgba(0,141,203,.4)}
.hero__bar i{position:absolute;top:-3px;left:var(--read,0%);width:2px;height:8px;background:var(--cyan)}
.hero__allele{margin:9px 0 5px;font:500 22px/1.2 'JetBrains Mono',monospace;color:var(--hero-ink)}
.hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--hero-bg) 0%,rgba(var(--hero-rgb),.94) 30%,rgba(var(--hero-rgb),0) 50%)}
.hero__pin{position:relative;z-index:2;height:100vh;min-height:620px;max-width:1500px;margin:0 auto;padding:110px var(--pad) 64px;display:flex;flex-direction:column;justify-content:center;pointer-events:none}
.hero__pin a,.hero__pin button{pointer-events:auto}
.hero__copy{max-width:min(640px,46vw)}
.hero .eyebrow{color:#00679A;gap:10px}
.hero .eyebrow .dot{width:4px;height:4px;border-radius:50%;background:var(--magenta)}
.hero h1{font:600 clamp(38px,4.1vw,64px)/1.04 Inter,var(--sans);letter-spacing:-.03em;margin:22px 0 22px;color:var(--hero-ink)}
.hero h1 em{font-style:normal;color:#0079B8}
.hero h1 em.m{color:#D1007C}
.hero__lede{color:#3E4C5A;margin:0;max-width:460px}
.hero__cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.hero .btn--solid{background:var(--cyan);border-color:var(--cyan);color:#fff}
.hero .btn--solid svg{width:16px;height:16px}
.btn--ghost{color:var(--hero-ink);border-color:rgba(11,27,43,.25);background:rgba(255,255,255,.5)}
/* under the emblem: the film's control (pause / play / replay the analysis) */
.hero__result{position:absolute;z-index:3;left:0;top:0;margin:0;display:flex;align-items:center;gap:14px;white-space:nowrap;font:400 12px/1 'JetBrains Mono',monospace;color:#5D6B78;opacity:0;transition:opacity .5s;will-change:transform}
.hero[data-film] .hero__result{opacity:1}
.hero__ctrl{font:inherit;color:#0079B8;background:none;border:0;border-bottom:1px solid rgba(0,121,184,.35);padding:4px 0;cursor:pointer}
.hero__ctrl:hover{color:var(--hero-ink);border-color:currentColor}
.hero__ctrl:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.scroll-cue{position:absolute;right:var(--pad);bottom:26px;font:600 11px/1 Barlow,var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#5D6B78;display:flex;align-items:center;gap:10px}
.scroll-cue i{width:28px;height:1px;background:#5D6B78;display:block;transform-origin:left;animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleX(.2)}50%{transform:scaleX(1)}100%{transform:scaleX(.2)}}

/* ---------- 01 ECP (Italy) ---------- */
.ecp{background:var(--it-bg);color:var(--it-ink);overflow:clip;min-height:0}
.ecp .eyebrow{color:var(--it-green)}
.ecp h2{font:400 clamp(40px,min(5.6vw,6.2vh*1.9,84px),92px)/.98 'Bodoni Moda',serif;letter-spacing:-.01em;margin:22px 0 22px}
.ecp .soft{color:#8A8A80}
.ecp h3{font:400 clamp(32px,3.7vw,60px)/1.04 'Bodoni Moda',serif;letter-spacing:-.01em;margin:18px 0 18px}
.ecp .lede{color:#45453F}
.stripe{display:flex;width:120px;height:6px;border-radius:3px;overflow:hidden}
.stripe i{flex:1;transform-origin:left;display:block}
.stripe i:nth-child(1){background:var(--it-green)}.stripe i:nth-child(2){background:#fff;box-shadow:inset 0 0 0 1px #ddd}.stripe i:nth-child(3){background:var(--it-red)}
.btn--it{background:var(--it-green);border-color:var(--it-green);color:#fff;cursor:pointer;font-family:inherit}
.btn--line{color:var(--it-ink);border-color:#BDBDB3;background:transparent}

/* A. intro: the Lumilight in 3D */
.ecp-intro,.film{position:relative}
.film .soft{color:#8A8A80}
/* the 3D Lumilight fills the section; the copy sits on the left, one short line at a time */
.film__pin{position:relative;height:100vh;min-height:620px;overflow:hidden}
.film__stage{position:absolute;inset:0;overflow:hidden}
.film__first,.film__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.film__first{object-fit:cover;object-position:70% 60%}
.film__still{display:none}
.film__canvas{opacity:0;transition:opacity .4s}
.film.is-ready .film__canvas{opacity:1}
.film__stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--it-bg) 0%,rgba(var(--it-bg-rgb),.94) 30%,rgba(var(--it-bg-rgb),0) 52%)}
.film__copy{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);width:min(580px,41vw);z-index:2}
/* beats: the outgoing lines slide up out of their masks, the new ones rise in line by line, then the features follow.
   Below the active beat = waiting underneath; .is-past = gone upwards (so scrolling back reverses the motion). */
.film__beat{position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;visibility:hidden;pointer-events:none;transition:visibility 0s .9s}
.film__beat.is-on{visibility:visible;pointer-events:auto;transition-delay:0s}
.film .ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.film .ln>span{display:block;transform:translateY(112%);transition:transform .75s cubic-bezier(.7,0,.25,1)}
.film__beat.is-past .ln>span{transform:translateY(-112%)}
.film__beat.is-on .ln>span{transform:none;transition:transform 1s cubic-bezier(.16,1,.3,1) .28s}
.film__beat.is-on .ln+.ln>span{transition-delay:.38s}
.film__beat .fx,.film__feats li{opacity:0;transform:translateY(26px);transition:opacity .4s,transform .6s cubic-bezier(.7,0,.25,1)}
.film__beat.is-past .fx,.film__beat.is-past .film__feats li{transform:translateY(-26px)}
.film__beat.is-on .fx,.film__beat.is-on .film__feats li{opacity:1;transform:none;transition:opacity .7s .5s,transform .9s cubic-bezier(.16,1,.3,1) .5s}
.film__beat.is-on .film__feats li:nth-child(2),.film__beat.is-on .fx:nth-child(3){transition-delay:.6s}
.film__beat.is-on .film__feats li:nth-child(3),.film__beat.is-on .fx:nth-child(4){transition-delay:.7s}
.film__beat.is-on .fx:first-child{transition-delay:.15s}
/* where you are: four short segments, the active one fills as you scroll through it */
.film__steps{position:absolute;left:var(--pad);bottom:clamp(28px,7vh,64px);z-index:2;display:flex;gap:8px;list-style:none;margin:0;padding:0}
.film__steps li{position:relative;width:44px;height:2px;background:var(--it-line);overflow:hidden}
.film__steps li::after{content:'';position:absolute;inset:0;background:var(--it-ink);transform:scaleX(var(--f,0));transform-origin:left}
/* mirrored variant (genotyping): the film on the left, the copy on the right (desktop only; phones keep device on top, line below) */
@media (min-width:901px){
  .film--flip .film__first{object-position:30% 60%}
  .film--flip .film__stage::after{display:none}
  .film--flip .film__copy{left:auto;right:var(--pad)}
  .film--flip .film__steps{left:auto;right:var(--pad)}
}
@media (prefers-reduced-motion:reduce){.film .ln>span,.film__beat .fx,.film__feats li{transition:none!important;transform:none!important}}
.film__line{margin:0;font:400 clamp(32px,3.2vw,52px)/1.06 'Bodoni Moda',serif;letter-spacing:-.01em;color:var(--it-ink);text-wrap:balance}
.film__line .soft{color:#8A8A80}

.film__feats{list-style:none;margin:34px 0 0;padding:0;max-width:440px}
.film__feats li{display:grid;grid-template-columns:22px 1fr;column-gap:16px;padding:15px 0;border-top:1px solid var(--it-line)}
.film__feats li:last-child{border-bottom:1px solid var(--it-line)}
.film__feats svg{width:22px;height:22px;color:var(--it-green);grid-row:1/3;margin-top:1px}
.film__feats b{font:600 15px/1.35 var(--sans);color:var(--it-ink)}
.film__feats span{margin-top:3px;font-size:14px;line-height:1.5;color:#5E5E57}

/* B. how it works: sticky loop + scrolling steps */
/* B. how it works: one pinned screen, the loop on the left, the steps on the right open one at a time */
.ecp-how{position:relative}
.ecp-how__pin{height:100vh;min-height:640px;max-width:1500px;margin:0 auto;padding:calc(var(--navh,70px) + 3vh) var(--pad) 5vh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,80px);align-items:center;box-sizing:border-box}
.ecp-how__visual{display:grid;place-items:center;min-height:0;height:100%}
.ecp-how__body{padding-right:clamp(0px,3vw,48px)}
.ecp-loop{position:relative;width:min(100%,84vh);max-width:820px}
.ecp-how__head h3{font-size:clamp(28px,2.6vw,44px);margin:14px 0 12px}
.ecp-how__head .lede{margin:0;font-size:15.5px;max-width:34em}
.ecp-how__steps{list-style:none;margin:clamp(20px,4vh,40px) 0 0;padding:0}
.ecp-step{position:relative;border-top:1px solid var(--it-line)}
.ecp-step:last-child{border-bottom:1px solid var(--it-line)}
.ecp-step::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--it-ink);transform:scaleX(var(--f,0));transform-origin:left}
.ecp-step[data-step="3"]::before{background:var(--uv)}
.ecp-step__head{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:baseline;gap:18px;padding:clamp(12px,1.9vh,18px) 0;cursor:pointer}
.ecp-step__head:focus-visible{outline:2px solid var(--it-green);outline-offset:2px}
.ecp-step__n{font:400 18px/1 'Bodoni Moda',serif;color:#A6A69C;min-width:24px;transition:color .4s}
.ecp-step h4{margin:0;font:600 clamp(17px,1.35vw,21px)/1.3 Inter,var(--sans);letter-spacing:-.01em;color:#9A9A90;transition:color .4s}
.ecp-step__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1)}
.ecp-step__body p{overflow:hidden;min-height:0;margin:0;padding-left:42px;font-size:15.5px;line-height:1.6;color:#45453F;max-width:34em;opacity:0;transition:opacity .35s}
.ecp-step.is-active h4{color:var(--it-ink)}
.ecp-step.is-active .ecp-step__n{color:var(--it-green)}
.ecp-step.is-active[data-step="3"] .ecp-step__n{color:var(--uv)}
.ecp-step.is-active .ecp-step__body{grid-template-rows:1fr}
.ecp-step.is-active .ecp-step__body p{opacity:1;padding-bottom:18px;transition:opacity .5s .15s}
.ecp-step.is-done .ecp-step__n{color:var(--it-ink)}
.ecp-loop svg{width:100%;height:auto;overflow:visible}
.ecp-loop__readout{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:36%;pointer-events:none}
.ecp-loop__readout b{display:block;font:400 clamp(44px,5vw,80px)/1 'Bodoni Moda',serif;color:var(--it-ink)}
.ecp-loop__readout span{display:block;margin-top:10px;font:600 12px/1.3 Barlow,var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--it-green)}
.ecp-loop__readout.is-uv b{color:var(--uv)}.ecp-loop__readout.is-uv span{color:var(--uv)}
.loop-node .node-disc{transition:fill .45s,stroke .45s}
.loop-node .node-glyph{transition:stroke .45s}
.loop-node .node-label{fill:#9A9A90;transition:fill .45s}
.loop-node .node-ring{transition:opacity .45s,transform .6s;transform-box:fill-box;transform-origin:center;transform:scale(.8)}
.loop-node.is-done .node-disc{fill:#E6F2EA;stroke:var(--it-green)}
.loop-node.is-done .node-label{fill:var(--it-ink)}
.loop-node.is-active .node-disc{fill:var(--it-ink);stroke:var(--it-ink)}
.loop-node.is-active .node-glyph{stroke:#fff}
.loop-node.is-active .node-label{fill:var(--it-ink)}
.loop-node.is-active .node-ring{opacity:1;transform:scale(1)}
#loop-uva.is-active .node-disc{fill:var(--uv);stroke:var(--uv)}
#loop-uva.is-active{filter:drop-shadow(0 0 18px rgba(123,77,255,.65))}
#loop-uva.is-done .node-disc{fill:#EEE8FF;stroke:var(--uv)}

/* C. inside the irradiation (dark UV chamber) */
/* C. the dose: light; a treatment record fills in as you scroll */
.ecp-dose{position:relative;background:var(--it-bg)}
.ecp-dose__copy{position:relative;z-index:2}
.ecp-dose__pin{position:relative;height:100vh;min-height:640px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,96px);align-items:center;padding:calc(var(--navh,70px) + 3vh) var(--pad) 5vh;box-sizing:border-box;overflow:hidden}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:40px 0 0;max-width:600px;padding-top:26px;border-top:1px solid var(--it-line)}
.stat b{display:block;font:400 clamp(30px,3vw,48px)/1 'Bodoni Moda',serif;color:var(--it-ink);font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:13px;color:var(--it-muted);margin-top:10px;line-height:1.4}
@keyframes rec-pulse{70%{box-shadow:0 0 0 7px rgba(227,162,26,0)}100%{box-shadow:0 0 0 0 rgba(227,162,26,0)}}

/* D. indications + product */
.ecp-use{position:relative}
.ecp-use__pin{max-width:1500px;margin:0 auto;padding:16vh var(--pad) 16vh;box-sizing:border-box}
/* desktop: one pinned screen; the rule draws across, then A, B, C and D come in one after another */
@media (min-width:901px){.ecp-use__pin{height:100vh;min-height:640px;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--navh,70px) + 3vh) var(--pad) 6vh}}
.ecp-use__tabs{display:none}
.ecp-use__head{max-width:860px}
.ecp-use__src{font-size:13px;color:var(--it-muted);margin:0}
.ecp-use__groups{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);margin-top:7vh}
.ecp-use__groups::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--it-ink);transform:scaleX(var(--rule,1));transform-origin:left}
/* phones: the groups share one place and replace each other; the letters show which one is in view */
.ecp-use.is-stacked .ecp-use__pin{height:100svh;min-height:600px;display:flex;flex-direction:column;justify-content:flex-start;padding:calc(var(--navh,70px) + 4svh) var(--pad) 4svh}
.ecp-use.is-stacked .ecp-use__head h3{font-size:clamp(25px,7vw,32px)}
.ecp-use.is-stacked .ecp-use__tabs{display:flex;gap:6px;list-style:none;margin:4svh 0 0;padding:0}
.ecp-use__tabs li{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--it-line);font:400 17px/1 'Bodoni Moda',serif;color:#A6A69C;transition:background .3s,color .3s,border-color .3s}
.ecp-use__tabs li.is-on{background:var(--it-ink);border-color:var(--it-ink);color:#fff}
.ecp-use.is-stacked .ecp-use__groups{grid-template-columns:1fr;margin-top:2svh}
.ecp-use.is-stacked .ecp-group{grid-area:1/1}
.ecp-group{padding-top:24px}
.ecp-group h4{display:flex;align-items:baseline;gap:10px;margin:0 0 14px;font:600 13px/1.3 Barlow,var(--sans);letter-spacing:.16em;text-transform:uppercase}
.ecp-group h4 span{font:400 22px/1 'Bodoni Moda',serif;letter-spacing:0;color:var(--it-green)}
.ecp-group ul{list-style:none;margin:0;padding:0}
.ecp-group li{padding:11px 0;border-bottom:1px solid var(--it-line);font-size:15px;line-height:1.45}
.ecp-end{display:block;height:1px}

/* chapter rail (section-local progress + skip): a slim vertical strip on the right edge */
.ecp-rail{position:fixed;right:16px;top:50%;z-index:40;display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px 7px 7px;border-radius:999px;background:rgba(255,255,255,.88);color:var(--it-ink);box-shadow:0 10px 30px -12px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transform:translate(170%,-50%);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s,background .35s,color .35s;pointer-events:none}
.ecp-rail.is-on{transform:translate(0,-50%);opacity:1;pointer-events:auto}
.ecp-rail.is-dark{background:rgba(22,16,52,.88);color:#ECE8F8;box-shadow:0 10px 30px -12px rgba(0,0,0,.5),0 0 0 1px rgba(185,164,255,.2)}
.ecp-rail__num{font:400 14px/1 'Bodoni Moda',serif}
.ecp-rail__dots{display:flex;flex-direction:column;gap:5px;list-style:none;margin:0;padding:0}
.ecp-rail__dots li{position:relative;width:4px;height:30px;border-radius:2px;background:rgba(128,128,120,.28);overflow:hidden}
.ecp-rail__dots li::after{content:'';position:absolute;inset:0;background:currentColor;transform:scaleY(var(--p,0));transform-origin:top}
.ecp-rail__dots span,.ecp-rail__label,.ecp-rail__skip b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ecp-rail__skip{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:inherit;background:rgba(128,128,120,.16);text-decoration:none}
.ecp-rail__skip svg{width:15px;height:15px}
.ecp-rail__skip:hover,.ecp-rail__skip:focus-visible{background:rgba(128,128,120,.3)}
.ecp-rail__skip::before{content:attr(data-tip);position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);padding:7px 10px;border-radius:8px;background:var(--it-ink);color:#fff;font:600 11px/1 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}
.ecp-rail__skip:hover::before,.ecp-rail__skip:focus-visible::before{opacity:1}

/* product-detail panel */
.pd{width:min(1120px,94vw);max-height:92vh;padding:0;border:0;border-radius:24px;background:#FBFBF8;color:var(--it-ink);box-shadow:0 60px 160px -40px rgba(0,0,0,.6);overscroll-behavior:contain}
.pd::backdrop{background:rgba(11,27,43,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.pd[open]{animation:pd-in .45s cubic-bezier(.2,.8,.2,1)}
@keyframes pd-in{from{opacity:0;transform:translateY(24px) scale(.98)}}
.pd__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px 44px;padding:clamp(22px,3.4vw,48px)}
.pd__head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.pd__kicker{display:flex;align-items:center;gap:10px;margin:0;font:600 12px/1 Barlow,var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--it-green)}
.pd h3{font:400 clamp(36px,4vw,60px)/1 'Bodoni Moda',serif;margin:14px 0 8px}
.pd__sub{margin:0;color:var(--it-muted)}
.pd__close{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid #CFCFC5;background:#fff;font-size:26px;line-height:1;cursor:pointer;color:var(--it-ink)}
.pd__close:hover{background:var(--it-bg)}
.pd__gallery{position:sticky;top:0;align-self:start}
.pd__main{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;background:#EDEDE6}
.pd__thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px}
.pd__thumbs button{padding:0;border:0;border-radius:10px;overflow:hidden;aspect-ratio:4/3;cursor:pointer;opacity:.6;transition:opacity .2s;outline-offset:2px}
.pd__thumbs button[aria-pressed="true"]{opacity:1;outline:2px solid var(--it-green)}
.pd__thumbs img{width:100%;height:100%;object-fit:cover}
.pd__specs{margin:0}
.pd__specs div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--it-line)}
.pd__specs div:first-child{border-top:1px solid var(--it-ink)}
.pd__specs dt{font:600 12px/1.5 Barlow,var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--it-muted)}
.pd__specs dd{margin:0;font-size:15px;line-height:1.5}
.pd__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pd__foot small{margin-left:auto;color:var(--it-muted);font-size:12px}
.pd__foot .btn--line svg{width:18px;height:18px}
html.pd-open{overflow:hidden}

@media (max-width:900px){
  /* phones: the whole photo sits behind the section; the text rises over its lower part (the photo drifts slower than the text) */
  .film{--sh:var(--it-bg)}
  .sx.film,.sx .film{--sh:var(--bg)}
  .ng-intro{--sh:var(--ng-bg)}
  .film__pin{height:auto;min-height:0;overflow:visible;background:var(--sh)}
  .film__stage{position:relative;height:max(54svh,420px);overflow:hidden;background:var(--sh)}
  .film__stage::after{display:none}
  .film__still{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;will-change:transform;-webkit-mask-image:none;mask-image:none;transform:scale(1.08)}
  .film__still~.film__canvas,.film__still~.sx-cap,.film__still~.ng-cap{display:none}
  .film__first,.film__canvas{display:none}
  .film__copy{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:auto;height:auto;margin:0;padding:18px var(--pad) 20px;z-index:2;background:var(--sh)}
  .film__beat{position:relative;left:auto;top:auto;transform:none}
  .film__beat:not(.is-on){display:none}
  .film__still[style*="padding:22px"]{mix-blend-mode:multiply}
  /* the two device renders: shown whole, with the text starting below them (nothing overlaps the machine) */
  .ecp-intro .film__stage{height:calc(100vw * .785)}
  .fq-intro .film__stage{height:100vw}
  section.section{scroll-margin-top:calc(var(--navh,62px) + 42px)}
  .ecp-intro .film__still,.fq-intro .film__still{object-fit:contain;object-position:50% 100%;-webkit-mask-image:none;mask-image:none}
  .ecp-intro .film__copy,.fq-intro .film__copy{margin-top:0;background:none}
  .film__line{font-size:clamp(27px,7.4vw,36px)}
  .film__feats{margin-top:16px}
  .film__steps{display:none}
  .film__steps li{width:34px}
  .film__feats li{grid-template-columns:18px 1fr;column-gap:12px;padding:9px 0}
  .film__feats svg{width:18px;height:18px;grid-row:auto}
  .film__feats b{font-size:15.5px}
  .film__feats span{display:none}
  .film .film__beat h2{font-size:clamp(32px,8.6vw,42px);margin:12px 0}
  .film__beat .lede{font-size:15px}
  /* phones: no loop drawing. The five steps become a vertical timeline; the step in view lights its number */
  .ecp-how__pin{display:block;height:auto;min-height:0;padding:64px var(--pad) 56px}
  .ecp-how__visual{display:none}
  .ecp-how__body{padding:0}
  .ecp-how__head{margin-bottom:30px}
  .ecp-how__head .eyebrow{display:block}
  .ecp-how__head .lede{display:block;margin:12px 0 0;font-size:15.5px}
  .ecp-how__head h3{font-size:clamp(28px,8vw,34px);line-height:1.1;margin:10px 0 0}
  .ecp-how__steps{margin:0}
  .ecp-step,.ecp-step:last-child{border:0;position:relative;padding-bottom:30px}
  .ecp-step:last-child{padding-bottom:0}
  .ecp-step::before{content:'';position:absolute;left:21px;top:48px;bottom:4px;width:2px;height:auto;background:#D6D6CB;transform:none;transition:background .5s}
  .ecp-step:last-child::before{display:none}
  .ecp-step.is-done::before{background:var(--it-green)}
  .ecp-step__head{padding:0;gap:16px;align-items:center;min-height:44px}
  .ecp-step__n{box-sizing:border-box;flex:none;width:44px;height:44px;min-width:44px;display:grid;place-items:center;border-radius:50%;border:1.5px solid #C9C9BE;background:#fff;font:400 18px/1 'Bodoni Moda',serif;color:#8D8D82;transition:background .4s,color .4s,border-color .4s,box-shadow .4s}
  .ecp-step h4{font-size:18px;line-height:1.25;color:#8D8D82;transition:color .4s}
  .ecp-step__body{grid-template-rows:1fr}
  .ecp-step__body p{opacity:1;padding:8px 0 0 60px;font-size:15px;line-height:1.6;color:#6C6C63;transition:color .4s}
  .ecp-step.is-done .ecp-step__n{border-color:var(--it-green);color:var(--it-green)}
  .ecp-step.is-done h4{color:var(--it-ink)}
  .ecp-step.is-active .ecp-step__n{background:var(--it-green);border-color:var(--it-green);color:#fff;box-shadow:0 0 0 6px rgba(0,140,69,.14)}
  .ecp-step.is-active[data-step="3"] .ecp-step__n{background:var(--it-green);border-color:var(--it-green);color:#fff;box-shadow:0 0 0 6px rgba(0,140,69,.14)}
  .ecp-step.is-done[data-step="3"] .ecp-step__n{border-color:var(--it-green);color:var(--it-green)}
  .ecp-step.is-active h4{color:var(--it-ink)}
  .ecp-step.is-active .ecp-step__body p{color:#2F2F2A;padding-bottom:0}
  .ecp-loop .node-label,.ecp-loop .node-num{display:none}
  .ecp-how__head .eyebrow,.ecp-how__head .lede{display:none}
  .ecp-how__head h3{font-size:clamp(22px,6vw,26px);margin:2px 0 0;line-height:1.12}
  .ecp-how__steps{margin-top:10px}
  .ecp-step__head{gap:12px;padding:9px 0}
  .ecp-step h4{font-size:15.5px}
  .ecp-step__n{font-size:15px;min-width:20px}
  .ecp-step__body p{padding-left:32px;font-size:14px;line-height:1.5}
  .ecp-step.is-active .ecp-step__body p{padding-bottom:10px}
  .ecp-loop__readout{width:48%}
  .ecp-loop__readout b{font-size:42px}
  .ecp-loop__readout span{font-size:10.5px;margin-top:6px}
  .ecp-use__groups{grid-template-columns:1fr 1fr}
  .pd__inner{grid-template-columns:1fr}
  .pd__gallery{position:static}
  /* phones: the rail becomes a slim bar under the nav: chapter name on the left, Skip on the right, progress along its foot */
  .ecp-rail,.ecp-rail.is-dark{top:var(--navh,68px);left:0;right:0;transform:translateY(-8px);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'lab skip' 'dots dots';align-items:center;column-gap:12px;row-gap:0;padding:6px 0 0 var(--pad);border-radius:0;background:rgba(247,249,251,.94);color:var(--navy);box-shadow:0 1px 0 rgba(11,27,43,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .ecp-rail.is-dark{background:rgba(22,16,52,.94);color:#ECE8F8;box-shadow:none}
  .ecp-rail.is-on{transform:none}
  .ecp-rail__num{display:none}
  .ecp-rail__label{grid-area:lab;position:static;width:auto;height:auto;clip:auto;overflow:hidden;text-overflow:ellipsis;font:600 11px/1.2 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:4px 0}
  .ecp-rail__dots{grid-area:dots;grid-column:1 / -1;margin:6px 0 0 calc(var(--pad) * -1);flex-direction:row;gap:2px;width:calc(100% + var(--pad))}
  .ecp-rail__dots li{flex:1;width:auto;height:3px;border-radius:0}
  .ecp-rail__dots li::after{transform:scaleX(var(--p,0));transform-origin:left}
  .ecp-rail__skip{grid-area:skip;position:relative;width:auto;height:auto;margin-right:var(--pad);padding:6px 11px 6px 12px;gap:6px;display:inline-flex;align-items:center;border-radius:999px;background:var(--it-ink);color:#fff;font:600 11px/1 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase}
  .ecp-rail.is-dark .ecp-rail__skip{background:#fff;color:var(--uv-deep)}
  .ecp-rail__skip svg{width:13px;height:13px}
  .ecp-rail__skip b{position:static;width:auto;height:auto;clip:auto;font-weight:600}
  .ecp-rail__skip::before{display:none}
  .ecp-rail__dots li{color:var(--it-green)}
  .ecp-rail.is-dark .ecp-rail__dots li{color:var(--uv-soft)}
}
@media (max-width:560px){
  .ecp-use__groups{grid-template-columns:1fr}
  .stats{gap:14px}
  .pd__specs div{grid-template-columns:1fr;gap:4px}
}

/* ---------- 03 FluoQube (Germany): light, like section 01; inno-train yellow as the accent ---------- */
.fq{--it-bg:#F4EBCB;--it-bg-rgb:244,235,203;background:var(--it-bg);color:var(--it-ink);overflow:clip;--fq-acc:#A67C00}  /* its own warm champagne (the black and gold of the device, the German colours, inno-train yellow): the visible change when the page moves from 01 to 02 */
.fq .eyebrow{color:var(--fq-acc)}
.de-stripe{display:flex;width:90px;height:6px;border-radius:3px;overflow:hidden}.de-stripe i{flex:1}
.de-stripe i:nth-child(1){background:#000;box-shadow:inset 0 0 0 1px #333}.de-stripe i:nth-child(2){background:var(--de-red)}.de-stripe i:nth-child(3){background:var(--de-gold)}
.fq h2{font:400 clamp(40px,4.6vw,76px)/.98 'Bodoni Moda',serif;letter-spacing:-.01em;margin:22px 0 22px}
.fq h3{font:400 clamp(32px,3.7vw,60px)/1.04 'Bodoni Moda',serif;letter-spacing:-.01em;margin:18px 0 18px}
.fq .soft{color:#8A8A80}
.fq .lede{color:#45453F}
.fq .film__feats svg{color:var(--fq-acc)}
.fq .maker img.logo{height:30px}
/* B. the kits: pinned; the plate re-divides for each family */
.fq-kits__pin{height:100vh;min-height:640px;max-width:1500px;margin:0 auto;padding:calc(var(--navh,70px) + 3vh) var(--pad) 5vh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,96px);align-items:center;box-sizing:border-box}
.fq-fams{list-style:none;margin:clamp(18px,3.5vh,36px) 0 0;padding:0}
.fq-fam{position:relative;border-top:1px solid var(--it-line)}
.fq-fam:last-child{border-bottom:1px solid var(--it-line)}
.fq-fam::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--it-ink);transform:scaleX(var(--f,0));transform-origin:left}
.fq-fam__head{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:14px;padding:clamp(12px,1.9vh,18px) 0;cursor:pointer}
.fq-fam__head:focus-visible{outline:2px solid var(--fq-acc);outline-offset:2px}
.fq-fam__dot{width:12px;height:12px;border-radius:50%;background:#D8D8CF;transition:background .4s}
.fq-fam h4{margin:0;font:600 clamp(18px,1.45vw,22px)/1.2 Inter,var(--sans);color:#9A9A90;transition:color .4s}
.fq-fam em{margin-left:auto;font:400 15px/1 'Bodoni Moda',serif;font-style:normal;color:#A6A69C}
.fq-fam__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1)}
.fq-fam__body>div{overflow:hidden;min-height:0;opacity:0;transition:opacity .35s}
.fq-fam__body p{margin:0;padding-left:26px;font-size:15.5px;line-height:1.6;color:#45453F;max-width:34em}
.fq-chips{list-style:none;margin:14px 0 18px;padding:0 0 0 26px;display:flex;flex-wrap:wrap;gap:6px}
.fq-chips li{font:500 12.5px/1 'JetBrains Mono',monospace;padding:7px 10px;border-radius:999px;background:#fff;border:1px solid var(--it-line);color:var(--it-ink)}
.fq-fam.is-active h4{color:var(--it-ink)}
.fq-fam.is-active em{color:var(--it-ink)}
.fq-fam.is-active .fq-fam__body{grid-template-rows:1fr}
.fq-fam.is-active .fq-fam__body>div{opacity:1;transition:opacity .5s .15s}
.fq-fam[data-fam="hla"].is-active .fq-fam__dot{background:#E3A400}
.fq-fam[data-fam="hpa"].is-active .fq-fam__dot{background:#E2611B}
.fq-fam[data-fam="rbc"].is-active .fq-fam__dot{background:#C1121F}
.fq-plate{margin:0;justify-self:center;width:min(100%,640px)}
.fq-plate__frame{position:relative;display:grid;grid-template-columns:22px 1fr;grid-template-rows:22px auto;gap:6px 8px;padding:clamp(18px,2.2vw,28px);background:#fff;border-radius:18px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 40px 90px -50px rgba(28,28,28,.35)}
.fq-plate__cols{grid-column:2;display:grid;grid-template-columns:repeat(12,1fr);font:500 11px/22px 'JetBrains Mono',monospace;color:#A6A69C;text-align:center}
.fq-plate__rows{grid-row:2;display:grid;grid-template-rows:repeat(8,1fr);font:500 11px/1 'JetBrains Mono',monospace;color:#A6A69C;align-items:center}
.fq-plate__grid{grid-row:2;grid-column:2;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(5px,.6vw,9px)}
.fq-plate__grid i{aspect-ratio:1;border-radius:50%;background:#EEEEE8;box-shadow:inset 0 2px 4px rgba(0,0,0,.08);transition:background .45s,transform .45s}
.fq-plate__samples{position:relative;height:30px;margin:12px clamp(18px,2.2vw,28px) 0 calc(clamp(18px,2.2vw,28px) + 30px)}
.fq-plate__samples span{position:absolute;top:0;height:3px;border-radius:2px;transition:left .5s,width .5s,background .5s}
.fq-plate__samples b{position:absolute;top:10px;font:600 10.5px/1 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--it-muted);white-space:nowrap;transform:translateX(-50%)}
.fq-plate__cap{margin-top:14px;text-align:center;font:600 12px/1.4 Barlow,var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--it-ink)}
/* C. the range: still kit photo, veil on the left */
.fq-range{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden}
.fq-range__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.fq-range::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--it-bg) 0%,rgba(var(--it-bg-rgb),.95) 32%,rgba(var(--it-bg-rgb),.6) 46%,rgba(var(--it-bg-rgb),0) 62%)}
.fq-range__body{position:relative;z-index:2;max-width:1500px;width:100%;margin:0 auto;padding:12vh var(--pad);box-sizing:border-box}
.fq-range__body>*{max-width:560px}
.fq-range .stats{border-top-color:var(--it-line)}
.fq-range__note{margin:26px 0 18px;font-size:14px;color:var(--it-muted)}

/* ---------- 02 Serum eye drops (Germany): light and clear, like 01 and 03; Meise crimson as the accent ---------- */
.sr{--sr-bg:#F4F7FA;--sr-acc:#C21B40;background:var(--sr-bg);color:var(--it-ink);overflow:clip}
.sr .eyebrow{color:var(--sr-acc)}
.sr h2{font:400 clamp(40px,4.6vw,76px)/.98 'Bodoni Moda',serif;letter-spacing:-.01em;margin:22px 0 22px}
.sr h3{font:400 clamp(32px,3.7vw,60px)/1.04 'Bodoni Moda',serif;letter-spacing:-.01em;margin:18px 0 18px}
.sr .soft{color:#8A8A80}
.sr .lede{color:#45453F}
.sr .film__feats svg{color:var(--sr-acc)}
@media (min-width:901px){.sr .film__copy{width:min(480px,34vw)}.sr .film__copy h2{font-size:clamp(36px,3.8vw,58px)}}
.sr .maker img.logo{height:34px}
.sr .stat b small{font-size:.5em;margin-left:3px;color:var(--it-muted);font-family:Inter,var(--sans);letter-spacing:0}
/* B. the system: four steps from whole blood to eye drops */
.sr-sys{max-width:1500px;margin:0 auto;padding:clamp(72px,12vh,140px) var(--pad) clamp(40px,7vh,88px)}
.sr-sys__head{max-width:760px}
.sr-flow{list-style:none;margin:clamp(32px,6vh,60px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.sr-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:28px 26px 24px;background:#fff;border-radius:22px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 34px 70px -52px rgba(28,28,28,.4)}
.sr-card>svg{width:30px;height:30px;color:var(--sr-acc)}
.sr-card__n{position:absolute;right:24px;top:22px;font:400 22px/1 'Bodoni Moda',serif;color:#B9B9B0}
.sr-card h4{margin:12px 0 0;font:600 18px/1.25 Inter,var(--sans);color:var(--it-ink)}
.sr-card p{margin:0;font-size:14.5px;line-height:1.55;color:#45453F}
.sr-spec{list-style:none;margin:auto 0 0;padding:16px 0 0;display:grid;gap:7px;font:500 12.5px/1.4 'JetBrains Mono',monospace;color:var(--it-ink)}
.sr-spec li{padding-top:7px;border-top:1px solid var(--it-line)}
.sr-card p+.sr-spec{margin-top:14px}
.sr-card--main{box-shadow:0 0 0 2px var(--sr-acc),0 40px 80px -50px rgba(194,27,64,.5)}
.sr-card--main .sr-card__n{color:var(--sr-acc)}
@media (min-width:1101px){.sr-card:not(:last-child)::after{content:'';position:absolute;right:-15px;top:50%;width:9px;height:9px;border-top:2px solid #B9B9B0;border-right:2px solid #B9B9B0;transform:translateY(-50%) rotate(45deg)}}
/* C. the ATS family: photo, features, the six models */
.sr-ats{max-width:1500px;margin:0 auto;padding:clamp(40px,8vh,96px) var(--pad) clamp(56px,9vh,110px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:center}
.sr-ats__photo{margin:0;border-radius:30px;overflow:hidden;background:#DCE6EE;aspect-ratio:4/4.4;max-height:82vh;box-shadow:0 50px 100px -60px rgba(28,28,28,.5)}
.sr-ats__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.sr-feats{list-style:none;margin:28px 0 0;padding:0;max-width:470px}
.sr-feats li{display:grid;grid-template-columns:22px 1fr;column-gap:16px;padding:15px 0;border-top:1px solid var(--it-line)}
.sr-feats li:last-child{border-bottom:1px solid var(--it-line)}
.sr-feats svg{width:22px;height:22px;color:var(--sr-acc);grid-row:1/3;margin-top:1px}
.sr-feats b{font:600 15px/1.35 var(--sans)}
.sr-feats span{margin-top:3px;font-size:14px;line-height:1.5;color:#5E5E57}
.sr-ats .stats{margin-top:34px}
.sr-table{grid-column:1/-1;overflow-x:auto;margin-top:clamp(12px,3vh,32px);border-radius:20px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04),0 34px 70px -52px rgba(28,28,28,.4)}
.sr-table:focus-visible{outline:2px solid var(--sr-acc);outline-offset:3px}
.sr-table table{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
.sr-table th,.sr-table td{padding:16px 18px;text-align:center;border-bottom:1px solid var(--it-line);font-variant-numeric:tabular-nums}
.sr-table tr:last-child>*{border-bottom:0}
.sr-table thead th{font:600 13px/1 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--it-ink);border-bottom:1px solid var(--it-ink)}
.sr-table thead th:first-child,.sr-table tbody th{text-align:left}
.sr-table tbody th{font:600 11.5px/1.3 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--it-muted)}
.sr-table td:nth-child(n+5),.sr-table thead th:nth-child(n+5){background:#F7F9FB}
.sr-table thead th:first-child,.sr-table tbody th{position:sticky;left:0;background:#fff}
/* D. the maker */
.sr-maker{max-width:1500px;margin:0 auto;padding:clamp(40px,8vh,96px) var(--pad) clamp(80px,13vh,150px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,96px);align-items:center}
.sr-maker__body>*{max-width:560px}
.sr-maker__body .stats{margin-top:36px}
.sr-maker__photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sr-ph{margin:0;border-radius:22px;overflow:hidden;background:#DCE6EE;aspect-ratio:1/1}
.sr-ph--wide{grid-column:1/-1;aspect-ratio:16/10}
.sr-ph img{display:block;width:100%;height:100%;object-fit:cover}
.sr-ph--wide img{object-position:50% 58%}

/* ---------- 04 NGS genotyping (Germany): light and warm; amber as the accent, the colour of the second allele in the film ---------- */
.ng{--ng-bg:#FBF7EC;--ng-acc:#A85F00;--ng-amber:#F2B34A;--ng-card:#fff;--ng-line:#E6DFCB;background:var(--ng-bg);color:var(--it-ink);overflow:clip}
.ng .eyebrow{color:var(--ng-acc)}
.ng h2{font:400 clamp(40px,4.6vw,76px)/.98 'Bodoni Moda',serif;letter-spacing:-.01em;margin:22px 0 22px}
.ng h3{font:400 clamp(32px,3.7vw,60px)/1.04 'Bodoni Moda',serif;letter-spacing:-.01em;margin:18px 0 18px}
.ng .soft{color:#8A8A80}
.ng .lede{color:#45453F}
.ng .film__feats svg{color:var(--ng-acc)}
.ng .film__feats li,.ng .film__feats li:last-child{border-color:var(--ng-line)}
.ng .stats,.ng .film__steps li{border-color:var(--ng-line)}
.ng .film__steps li{background:var(--ng-line)}
.ng .maker img.logo{height:30px}
.ng-intro .film__pin,.ng-intro .film__stage{background:var(--ng-bg)}
.ng-cap{position:absolute;left:var(--pad);bottom:clamp(28px,7vh,64px);margin:0;font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.04em;color:#9A9382}
.ng-flow,.ng-loci,.ng-kit,.rb-flat,.ng-soft{max-width:1500px;margin:0 auto;padding:clamp(56px,10vh,120px) var(--pad) clamp(24px,4vh,48px)}
/* B. two workflows */
.ng-flow__head{max-width:640px}
/* NGS workflow story (desktop): a pinned stage that changes scene with each step; phones and reduced motion keep the route diagram below */
.ng-story{display:none}
.ng-story.film--hero{--sh:var(--ng-bg)}
.ng-story-on .ng-story{display:block}
.ng-story-on .ng-flow__head,.ng-story-on .ng-route{display:none}
.ng-story-on .ng-flow{padding-top:clamp(8px,2vh,24px)}
.ng-story-on .ng-loci,.ng-story-on .ng-soft{display:none}   /* desktop: the loci and the software are the last two scenes of the story */
.ng-story .film__stage{background:transparent}
.ng-story .film__feats li{grid-template-columns:34px 1fr}
.ng-story .film__feats em{grid-row:1 / 3;margin-top:2px;font:600 12px/1.6 'JetBrains Mono',monospace;font-style:normal;letter-spacing:.08em;color:var(--pa)}
.ng-story .film__feats b{font-size:15px}
.ngs-note{margin:18px 0 0;max-width:440px;font-size:12.5px;line-height:1.55;color:#7A7468}
.ngs{position:absolute;inset:var(--navh,74px) 0 0;container-type:size;color:var(--it-ink);--ill:#41567A;--ont:#2E6B5C;--ink:#24211C}
.ngs__s{position:absolute;inset:0;opacity:0;visibility:hidden;will-change:opacity,transform}
.ngs__kit{position:absolute;left:50%;top:42cqh;width:88cqw;height:auto;transform:translate(-50%,-50%)}
.ngs__chips{position:absolute;left:50%;bottom:13cqh;transform:translateX(-50%);display:flex;gap:7cqw;list-style:none;margin:0;padding:0}
.ngs__chips li{text-align:center}
.ngs__chips b{display:block;font:400 7cqw/1 'Bodoni Moda',serif}
.ngs__chips span{display:block;margin-top:1.2cqh;font:600 1.6cqw/1 Barlow,var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#7A7468}
.ngs__amp{position:absolute;left:8cqw;right:8cqw;top:27cqh;height:43cqh;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;justify-content:space-between}
.ngs__amp li{display:grid;grid-template-columns:11cqw 1fr 7cqw;align-items:center}
.ngs__amp b{font:500 1.7cqw/1 'JetBrains Mono',monospace;letter-spacing:.04em;color:#3A3A34}
.ngs__amp em{font:500 1.6cqw/1 'JetBrains Mono',monospace;font-style:normal;text-align:right;color:#6A655A}
.ngs__amp i{display:block;height:1.1cqh;width:calc(var(--kb) / 7.4 * 100%);background:var(--pa);transform-origin:left center;transform:scaleX(0)}
.ngs__pool{position:absolute;left:50%;bottom:11cqh;width:17cqw;height:16cqh;transform:translateX(-50%);--f:0}
.ngs__pool::before{content:'';position:absolute;inset:0;border:1.5px solid rgba(36,33,28,.55);border-top:0;border-radius:0 0 8.5cqw 8.5cqw}
.ngs__pool i{position:absolute;left:3px;right:3px;bottom:3px;height:calc(var(--f) * 74%);background:var(--pa);opacity:.88;border-radius:0 0 8cqw 8cqw}
.ngs__pool span{position:absolute;left:50%;top:100%;margin-top:1.4cqh;transform:translateX(-50%);font:400 3cqw/1 'Bodoni Moda',serif;white-space:nowrap}
.ngs__pool small{position:absolute;left:50%;top:100%;margin-top:5.2cqh;transform:translateX(-50%);font:600 1.5cqw/1 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#7A7468;white-space:nowrap}
.ngs__top{position:absolute;left:50%;top:9cqh;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1.4cqh}
.ngs__top i{width:12px;height:12px;border-radius:50%;background:var(--pa)}
.ngs__top span{font:600 1.5cqw/1 Barlow,var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#7A7468}
.ngs__fork,.ngs__join{position:absolute;left:0;width:100%;overflow:visible}
.ngs__fork{top:17cqh;height:23cqh}
.ngs__fork path,.ngs__join path{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:var(--d,1)}
.ngs__pick{position:absolute;top:41cqh;width:39cqw;box-sizing:border-box;padding:2.4cqw 2.4cqw 2.6cqw;border:1px solid rgba(36,33,28,.3);border-top:2px solid var(--lane);--lane:var(--ill)}
.ngs__pick--ill{left:4cqw}
.ngs__pick--ont{right:4cqw;--lane:var(--ont)}
.ngs__pick img{display:block;width:100%;height:21cqh;object-fit:contain;margin-bottom:1.8cqh}
.ngs__pick b{display:block;font:400 3.3cqw/1.1 'Bodoni Moda',serif}
.ngs__pick span{display:block;margin-top:.9cqh;font:500 1.45cqw/1.3 'JetBrains Mono',monospace;color:#5C574D}
.ngs__pick em{font-style:normal;color:var(--lane);font-weight:600}
.ngs__s3,.ngs__s4{display:flex;flex-direction:column;padding:6cqh 10cqw 4cqh;box-sizing:border-box}
.ngs__big{flex:1 1 0;min-height:0;width:100%;object-fit:contain}
.ngs__time{flex:none;margin:3cqh 0 0;display:flex;align-items:baseline;gap:1.2cqw;line-height:1}
.ngs__time b{font:400 min(13cqw,12cqh)/1 'Bodoni Moda',serif;color:var(--ill)}
.ngs__s4 .ngs__time b{color:var(--ont)}
.ngs__time span{font:400 min(5cqw,4.6cqh)/1 'Bodoni Moda',serif}
.ngs__time small{margin-left:1.6cqw;font:600 1.5cqw/1 Barlow,var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#7A7468}
.ngs__cpc{flex:none;margin-top:4cqh}
.ngs__cpc p{margin:0 0 1.6cqh;font:600 1.5cqw/1 Barlow,var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#7A7468}
.ngs__cpc ul{display:flex;align-items:flex-end;gap:2cqw;list-style:none;margin:0;padding:0}
.ngs__cpc li{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.9cqh}
.ngs__cpc b{font:500 1.5cqw/1 'JetBrains Mono',monospace;color:var(--ink)}
.ngs__cpc i{display:block;width:100%;max-width:7.4cqw;height:var(--h);background:var(--ill);opacity:.84;transform-origin:bottom;transform:scaleY(0)}
.ngs__cpc span{width:100%;padding-top:.9cqh;border-top:1px solid rgba(36,33,28,.28);font:400 1.25cqw/1.25 var(--sans);color:#6A655A;text-align:center}
.ngs__nums{flex:none;margin-top:4cqh;display:flex}
.ngs__nums>div{padding-right:5cqw}
.ngs__nums>div+div{padding:0 0 0 5cqw;border-left:1px solid rgba(36,33,28,.22)}
.ngs__nums b{display:block;font:400 min(10cqw,9cqh)/1 'Bodoni Moda',serif;color:var(--ont)}
.ngs__nums span{display:block;margin-top:1.2cqh;font:400 1.7cqw/1.3 var(--sans);color:#5E5A50}
.ngs__h{position:absolute;left:8cqw;top:10cqh;margin:0;font:400 4.6cqw/1.05 'Bodoni Moda',serif;letter-spacing:-.01em}
.ngs__sub{position:absolute;left:8cqw;top:20cqh;margin:0;max-width:70cqw;font:400 1.9cqw/1.4 var(--sans);color:#5E5A50}
.ngs__req{order:9;flex:none;margin:3.4cqh 0 0;font:500 1.45cqw/1.4 'JetBrains Mono',monospace;color:#6A655A}
.ngs__shot{position:absolute;left:50%;top:47cqh;width:56cqw;margin:0;transform:translateX(-50%)}
.ngs__shot img{display:block;width:100%;height:auto;outline:1px solid rgba(36,33,28,.3)}
.ngs__shot figcaption{margin-top:1.6cqh;font:500 1.45cqw/1.4 'JetBrains Mono',monospace;color:#6A655A}
.ngs__mini{position:absolute;top:10cqh;width:26cqw;height:12cqh;object-fit:contain}
.ngs__mini--ill{left:11cqw}
.ngs__mini--ont{right:11cqw}
.ngs__join{top:21cqh;height:8.6cqh}
.ngs__node{position:absolute;left:50%;top:29.5cqh;transform:translateX(-50%);text-align:center;white-space:nowrap}
.ngs__node i{display:block;width:12px;height:12px;border-radius:50%;background:var(--pa);margin:0 auto 1.6cqh}
.ngs__node b{display:block;font:400 4cqw/1.1 'Bodoni Moda',serif}
.ngs__s6{display:flex;flex-direction:column;justify-content:center;padding:5cqh 8cqw;box-sizing:border-box}
.ngs__k{flex:none;margin:0;font:600 min(1.5cqw,1.7cqh)/1 Barlow,var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#7A7468}
.ngs__loci{flex:none;margin-top:.6cqh}
.ngs__loci h5{margin:2.4cqh 0 .8cqh;font:600 min(1.4cqw,1.6cqh)/1 Barlow,var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--pa)}
.ngs__loci ol{list-style:none;margin:0;padding:0}
.ngs__loci li{display:grid;grid-template-columns:13cqw minmax(0,1fr) 8cqw;align-items:center;gap:1.6cqw;padding:.75cqh 0;border-top:1px solid rgba(36,33,28,.14)}
.ngs__loci b{font:600 min(1.5cqw,1.7cqh)/1 'JetBrains Mono',monospace;color:#3A3A34}
.ngs__loci em{font:500 min(1.45cqw,1.6cqh)/1 'JetBrains Mono',monospace;font-style:normal;text-align:right;color:#6A655A}
.ngs__gene{position:relative;display:flex;gap:2px;width:calc(var(--kb) / 7.4 * 100%);transform-origin:left center;transform:scaleX(0)}
.ngs__gene::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:#CFC6AE}
.ngs__gene i{position:relative;flex:1 1 0;min-width:0;height:min(2.5cqh,2.4cqw);background:#DDD3B8;color:#6B6451;font:500 min(1.1cqw,1.3cqh)/min(2.5cqh,2.4cqw) 'JetBrains Mono',monospace;font-style:normal;text-align:center;overflow:hidden;transition:background-color .35s,color .35s}
.ngs__gene i.u{flex:1.5 1 0}
.ngs__gene i.on{background:var(--ink);color:#fff}
.ngs__gene i.u.on{background:var(--pa)}
.ngs__stats{flex:none;display:flex;margin:5cqh 0 0;padding:0;list-style:none}
.ngs__stats li{padding-right:4cqw}
.ngs__stats li+li{padding-left:4cqw;border-left:1px solid rgba(36,33,28,.22)}
.ngs__stats b{display:block;font:400 min(6cqw,6.5cqh)/1 'Bodoni Moda',serif;font-variant-numeric:lining-nums}
.ngs__stats span{display:block;margin-top:1cqh;font:400 min(1.6cqw,1.8cqh)/1.3 var(--sans);color:#5E5A50}
.ngs__node small{display:block;margin-top:.9cqh;font:600 1.45cqw/1 Barlow,var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#7A7468}
/* RBC-NGStype story (desktop): stage scenes, in container units like the HLA story */
.rb-story-on .rb-story{display:block}
.rb-story-on .rb-flat{display:none}
/* desktop: the story's opening beat sits mid-screen, so its empty top tucks up under the finished loop (the loop paints above it) and "What it reads" follows right after */
.rb-story-on .rb-how{z-index:2}
.rb-story-on .rb-how .ecp-how__pin{background:var(--ng-bg)}
.rb-story-on .rb-story{margin-top:-26vh}
.rbs .ngs__s{display:flex;flex-direction:column;justify-content:center;padding:6cqh 8cqw 5cqh;box-sizing:border-box}
.rbs .ngs__k{margin-bottom:2.4cqh;font-size:clamp(10.5px,1.6cqw,13px)}
.rbs__cellwrap{position:relative;width:min(78cqw,66cqh);aspect-ratio:1;margin:0 auto}
.rbs__cellwrap::before{content:'';position:absolute;inset:10%;border:1px solid rgba(36,33,28,.16);border-radius:50%}
.rbs__cell{position:absolute;inset:27%;border-radius:50%;background:var(--pa);opacity:.9}
.rbs__cell i{position:absolute;inset:30%;border-radius:50%;background:#C9566A}
.rbs__ring{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.rbs__ring li{position:absolute;transform:translate(-50%,-50%);padding:.4cqmin .9cqmin;background:var(--ng-bg);font:500 clamp(11px,2cqw,15px)/1 'JetBrains Mono',monospace;white-space:nowrap;color:#6A655A}
.rbs__ring li.k-core{color:var(--pa);font-weight:700}
.rbs__leg{display:flex;justify-content:center;gap:4cqw;margin:2.4cqh 0 0;font:600 clamp(10.5px,1.6cqw,13px)/1 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#6A655A}
.rbs__leg span::before{content:'';display:inline-block;width:.8em;height:.8em;margin-right:.6em;vertical-align:-.05em;background:#8F8873}
.rbs__leg .k-core::before{background:var(--pa)}
.rbs__res{width:100%;border-collapse:collapse;font:400 clamp(13px,2cqw,16px)/1.35 var(--sans);color:var(--ink)}
.rbs__res thead th{padding:0 1.2cqw 1.4cqh 0;text-align:left;font:600 clamp(10px,1.5cqw,12px)/1 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#7A7468;border-bottom:1.5px solid var(--ink)}
.rbs__res tbody th,.rbs__res td{padding:2cqh 1.2cqw 2cqh 0;text-align:left;vertical-align:baseline;border-bottom:1px solid rgba(36,33,28,.14)}
.rbs__res tbody th{font:700 clamp(11.5px,1.8cqw,14px)/1 'JetBrains Mono',monospace;color:var(--pa)}
.rbs__res td:nth-child(2){font:500 clamp(11px,1.7cqw,13.5px)/1.4 'JetBrains Mono',monospace;color:#3A3A34}
.rbs__res td:last-child{font-weight:600;white-space:nowrap}
.rbs__res tbody tr{opacity:0}
.rbs__isbt{margin:2cqh 0 0;font:500 clamp(10.5px,1.5cqw,12.5px)/1.4 'JetBrains Mono',monospace;color:#6A655A}
.rbs__kits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3.2cqw}
.rbs__kit{padding-top:2cqh;border-top:2px solid var(--ink);opacity:0}
.rbs__kit.is-soon{border-top:1.5px dashed rgba(36,33,28,.5)}
.rbs__kit h4{margin:0;font:400 min(3.4cqw,4cqh)/1 'Bodoni Moda',serif}
.rbs__kit__art{margin:1.2cqh 0 0;font:500 clamp(10.5px,1.6cqw,13px)/1 'JetBrains Mono',monospace}
.rbs__kit__meta{margin:.9cqh 0 0;font:400 clamp(11px,1.7cqw,13.5px)/1.3 var(--sans);color:#6A655A}
.rbs__kit__meta b{color:var(--ink)}
.rbs__kit ul{margin:2.2cqh 0 0;padding:0;list-style:none}
.rbs__kit li{display:flex;align-items:baseline;gap:.9cqw;padding:.85cqh 0;border-bottom:1px solid rgba(36,33,28,.12);font:400 clamp(11.5px,1.85cqw,14.5px)/1.25 var(--sans)}
.rbs__kit li::before,.rb-kit li::before,.rb-key i{content:'';flex:none;display:inline-block;width:.75em;height:.75em;box-sizing:border-box;border:1.5px solid var(--pa)}
.rbs__kit li.all::before,.rb-kit li.all::before,.rb-key i.all{background:var(--pa)}
.rb-key{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:22px 0 0;font-size:13px;color:#6A655A}
.rb-key span{display:inline-flex;align-items:center;gap:8px;margin-right:18px}
.rb-key.rbs__key{flex-direction:column;align-items:flex-start;margin-top:3cqh;font:400 clamp(10.5px,1.6cqw,13px)/1.3 var(--sans);gap:.8cqw}
/* RBC-NGStype, how it works: the Lumilight loop pattern (.ecp-how) in the section's red; a small square marker instead of a step number */
.rb-how{--it-line:var(--ng-line);--slate:#3F5566}
.rb-how .eyebrow{color:var(--pa)}
.ng .rb-how .ecp-how__head h3{font-size:clamp(28px,2.6vw,44px);line-height:1.08;margin:14px 0 12px}
.rb-how .ecp-how__head h3 .soft{color:#8F8873}
.rb-how .ecp-step__head{align-items:center}
.rb-step__m{flex:none;box-sizing:border-box;width:11px;height:11px;margin:0 7px 0 4px;border:1.5px solid #B9AFA5;transition:background .4s,border-color .4s}
.rb-how .ecp-step__body p{padding-left:40px}
.rb-how .ecp-step.is-done .rb-step__m{border-color:var(--pa)}
.rb-how .ecp-step.is-active .rb-step__m{background:var(--pa);border-color:var(--pa)}
.rb-how .ecp-step[data-node="rbl-run"].is-active .rb-step__m{background:var(--slate);border-color:var(--slate)}
.rb-how .ecp-step[data-node="rbl-run"]::before{background:var(--slate)}
/* the readout is sized with the loop (container units), so it always stays inside the two thin arcs and their names, whatever the screen */
.rb-loop{container-type:inline-size}
.rb-loop .ecp-loop__readout{width:30cqw}
.rb-loop .ecp-loop__readout b{font-size:6.2cqw;white-space:nowrap}
.rb-loop .ecp-loop__readout span{margin-top:1.3cqw;font-size:max(10px,1.4cqw);letter-spacing:.14em;color:var(--pa)}
.rb-loop .ecp-loop__readout.is-night b,.rb-loop .ecp-loop__readout.is-night span{color:var(--slate)}
.rb-loop .ecp-loop__readout b,.rb-loop .ecp-loop__readout span{transition:color .45s}
.rb-loop .loop-node.is-done .node-disc{fill:#F6E2DF;stroke:var(--pa)}
.rb-loop .loop-node.is-active .node-disc{fill:var(--pa);stroke:var(--pa)}
.rb-loop #rbl-run.is-active .node-disc{fill:var(--slate);stroke:var(--slate)}
.rb-loop #rbl-run.is-done .node-disc{fill:#E4E9EE;stroke:var(--slate)}
.rb-loop .node-sub{transition:fill .45s}
.rb-loop .rbl-band,.rb-loop .rbl-band__t{opacity:.55}
.rb-loop .rbl-band--night,.rb-loop .rbl-band__t--night{opacity:calc(.25 + var(--night,0) * .6);transition:opacity .6s}
/* RBC-NGStype plain version (phones, reduced motion): flat, rules and hairlines */
.rb-flat__block{margin-top:clamp(48px,8vh,88px)}
.rb-flat__p{max-width:640px;margin:12px 0 0;font-size:15px;line-height:1.55;color:#45453F}
.rb-flat__note{margin:10px 0 0;font:500 12px/1.4 'JetBrains Mono',monospace;color:#7A7468}
.rb-scroll{max-width:820px;margin-top:18px;overflow-x:auto}
.rb-res{width:100%;min-width:520px;border-collapse:collapse;font-size:14px;line-height:1.35}
.rb-res thead th{padding:0 12px 10px 0;text-align:left;font:600 11px/1 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#7A7468;border-bottom:1.5px solid var(--it-ink)}
.rb-res tbody th,.rb-res td{padding:12px 12px 12px 0;text-align:left;vertical-align:baseline;border-bottom:1px solid var(--ng-line)}
.rb-res tbody th{font:700 12.5px/1 'JetBrains Mono',monospace;color:var(--pa)}
.rb-res td:nth-child(2){font:500 12.5px/1.4 'JetBrains Mono',monospace}
.rb-res td:last-child{font-weight:600;white-space:nowrap}
.rb-kits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:18px}
.rb-kit{padding-top:16px;border-top:2px solid var(--it-ink)}
.rb-kit.is-soon{border-top:1.5px dashed rgba(36,33,28,.5)}
.rb-kit h4{margin:0;font:400 clamp(26px,2.4vw,34px)/1 'Bodoni Moda',serif}
.rb-kit__art{margin:10px 0 0;font:500 13px/1 'JetBrains Mono',monospace}
.rb-kit__meta{margin:6px 0 0;font-size:13.5px;color:#6A655A}
.rb-kit__meta b{color:var(--it-ink)}
.rb-kit ul{margin:16px 0 0;padding:0;list-style:none}
.rb-kit li{display:flex;align-items:baseline;gap:9px;padding:8px 0;border-bottom:1px solid var(--ng-line);font-size:14px}
@media (max-width:900px){
  .rb-kits{grid-template-columns:1fr;gap:0}
  .rb-kit{position:sticky;top:calc(var(--navh,62px) + 24px);box-sizing:border-box;margin:0 0 18px;padding:18px 18px 10px;background:#FBFBF8;border:1px solid #D4D4C9;border-top:3px solid var(--it-ink);transform-origin:50% 0;will-change:transform}
  .rb-kit.is-soon{border-top:3px dashed rgba(36,33,28,.5)}
  .rb-kit li{padding:6px 0;font-size:13.5px}
  .rb-res{min-width:0}
  .rb-res thead{display:none}
  .rb-res tr{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:10px;padding:12px 0;border-bottom:1px solid var(--ng-line)}
  .rb-res tbody th{grid-row:1 / 3;padding:2px 0 0;border:0}
  .rb-res td{padding:0;border:0}
  .rb-res td:nth-child(2){font-size:12px;overflow-wrap:anywhere}
  .rb-res td:last-child{margin-top:4px;white-space:normal}
}
@media (min-width:901px) and (max-height:800px){
  .ng-story .hf__no{font-size:56px;margin-bottom:6px}
  .ng-story .film__line,.ng-story .film__beat:not([data-beat="0"]) .film__line{font-size:clamp(28px,2.9vw,40px)}
  .ng-story .film__feats{margin-top:14px}
  .ng-story .film__feats li{padding:9px 0}
  .ng-story .film__feats b{font-size:14.5px}
  .ng-story .film__feats span{font-size:13px;line-height:1.4}
  .ngs-note{margin-top:10px;font-size:11.5px;line-height:1.45}
}
/* B. the route: a shared start, a fork into two sequencers, one analysis at the end. Drawn like a technical diagram: hairlines, small markers, mono numbers */
.ng-route{--gut:clamp(34px,3.4vw,54px);--gap:72px;--ly:84px;--ink:#24211C;position:relative;margin-top:clamp(40px,6vh,72px);display:grid;grid-template-columns:clamp(190px,17vw,250px) var(--gut) minmax(0,1fr) var(--gut) clamp(120px,10vw,150px);align-items:center}
.ng-route__trunk{grid-column:1;--lane:var(--ink);position:relative;display:flex;list-style:none;margin:0;padding:0}
.ng-route__trunk::before,.ng-route__end::before{position:absolute;top:-34px;left:0;font:600 10.5px/1 Barlow,var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#7A7468;white-space:nowrap}
.ng-route__trunk::before{content:'Both start with'}
.ng-route__end::before{content:'Both end with'}
.ng-n{position:relative;flex:1 1 0;min-width:0;height:12px}
.ng-n i{position:absolute;left:0;top:0;z-index:2;width:12px;height:12px;box-sizing:border-box;border-radius:50%;background:var(--lane)}
.ng-n b{position:absolute;left:0;top:26px;font:600 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--lane)}
.ng-n span{position:absolute;left:0;top:46px;width:calc(100% - 16px);font-size:14px;line-height:1.38;color:#2F2D28}
.ng-n::before,.ng-n::after{content:'';position:absolute;left:18px;top:5.25px;height:1.5px;width:calc(100% - 24px)}
.ng-n::before{background:rgba(36,33,28,.16)}
.ng-n::after{background:var(--lane);transform-origin:left;transform:scaleX(var(--d,1))}
.ng-route__trunk .ng-n:last-child::before,.ng-route__trunk .ng-n:last-child::after,.ng-lane__steps .ng-n:last-child::before,.ng-lane__steps .ng-n:last-child::after{width:calc(100% - 18px)}
.ng-route__lanes{grid-column:3;display:grid;grid-auto-rows:1fr;row-gap:var(--gap)}
.ng-lane{--lane:#41567A;position:relative;padding-top:calc(var(--ly) - 6px)}
.ng-lane--ont{--lane:#2E6B5C}
.ng-lane__head{position:absolute;left:0;right:0;top:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 22px}
.ng-lane h4{display:flex;align-items:center;gap:12px;margin:0;font:400 clamp(26px,2.3vw,34px)/1 'Bodoni Moda',serif}
.ng-lane h4::before{content:'';flex:none;width:10px;height:10px;background:var(--lane)}
.ng-lane__time{margin:0;display:flex;align-items:baseline;gap:8px}
.ng-lane__time b{font:400 clamp(20px,1.8vw,26px)/1 'Bodoni Moda',serif;color:var(--ink)}
.ng-lane__time span{font:600 10.5px/1 Barlow,var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#7A7468}
.ng-lane::before,.ng-lane::after{content:'';position:absolute;width:var(--gut);border:0 solid var(--lane);opacity:var(--k,1);pointer-events:none}
.ng-lane::before{left:calc(var(--gut) * -1);border-left-width:1.5px}
.ng-lane::after{right:calc(var(--gut) * -1);border-right-width:1.5px}
.ng-lane--ill::before,.ng-lane--ill::after{top:calc(var(--ly) - .75px);height:calc(100% + var(--gap) / 2 - var(--ly) + .75px);border-top-width:1.5px}
.ng-lane--ill::before{border-top-left-radius:8px}
.ng-lane--ill::after{border-top-right-radius:8px}
.ng-lane--ont::before,.ng-lane--ont::after{top:calc(var(--gap) / -2);height:calc(var(--ly) + var(--gap) / 2 + .75px);border-bottom-width:1.5px}
.ng-lane--ont::before{border-bottom-left-radius:8px}
.ng-lane--ont::after{border-bottom-right-radius:8px}
.ng-lane__row{display:flex;align-items:flex-start;padding-bottom:84px}
.ng-lane__steps{flex:1 1 0;min-width:0;display:flex;list-style:none;margin:0;padding:0}
.ng-lane__stop{position:relative;z-index:1;flex:none;width:clamp(210px,18vw,250px);box-sizing:border-box;margin-top:-38px;display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid rgba(36,33,28,.34)}
.ng-lane__stop img{flex:none;height:64px;width:auto;max-width:92px;object-fit:contain}
.ng-lane__stop p{margin:0;font-size:13.5px;line-height:1.35}
.ng-lane__stop b{display:block;font-weight:600;color:var(--ink)}
.ng-lane__stop small{display:inline-block;margin-top:7px;padding:3px 7px;border:1px solid rgba(36,33,28,.3);font:600 9.5px/1 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#5C574D}
.ng-lane__more{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(22px,3vw,48px);align-items:start}
.ng-cpc__k{margin:0 0 12px;font:600 10.5px/1 Barlow,var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#7A7468}
.ng-cpc ul{list-style:none;margin:0;padding:0;display:flex;align-items:flex-end;gap:10px}
.ng-cpc li{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.ng-cpc li b{font:500 11.5px/1 'JetBrains Mono',monospace;color:var(--ink)}
.ng-cpc li i{display:block;width:100%;max-width:46px;height:var(--h);background:var(--lane);opacity:.82;transform-origin:bottom;transform:scaleY(var(--g,1))}
.ng-cpc li span{width:100%;padding-top:6px;border-top:1px solid rgba(36,33,28,.28);font-size:10.5px;line-height:1.25;color:#6A655A;min-height:30px}
.ng-big{display:flex;gap:0}
.ng-big>div{padding-right:clamp(20px,2.6vw,38px)}
.ng-big>div+div{padding:0 0 0 clamp(20px,2.6vw,38px);border-left:1px solid rgba(36,33,28,.22)}
.ng-big b{display:block;font:400 clamp(40px,4vw,56px)/1 'Bodoni Moda',serif;color:var(--ink)}
.ng-big span{display:block;margin-top:8px;font-size:13px;line-height:1.35;color:#5E5A50;max-width:11em}
.ng-adv{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.ng-adv li{padding:8px 0;border-top:1px solid var(--ng-line);font-size:13px;line-height:1.3;color:#2F2D28}
.ng-wf__req{margin:14px 0 0;font-size:12px;line-height:1.5;color:#7A7468}
.ng-route__end{grid-column:5;position:relative;height:12px}
.ng-route__end i{display:block;width:12px;height:12px;border-radius:50%;background:var(--pa)}
.ng-route__end span{position:absolute;left:0;top:26px;font:400 clamp(18px,1.5vw,22px)/1.1 'Bodoni Moda',serif;white-space:nowrap}
.ng-route__end small{position:absolute;left:0;top:54px;font:600 10px/1 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#7A7468;white-space:nowrap}
@media (max-width:900px){
  .ng-route{display:block;margin-top:30px}
  .ng-route__trunk{display:block}
  .ng-route__trunk::before{position:static;content:'Both workflows start with';display:block;margin:0 0 14px}
  .ng-route__end::before{display:none}
  .ng-n{height:auto;min-height:12px;padding:0 0 24px 32px}
  .ng-n i{top:3px}
  .ng-n b{position:static;display:block;margin-bottom:5px}
  .ng-n span{position:static;display:block;width:auto;font-size:15px}
  .ng-n::before,.ng-n::after{left:5.25px;top:20px;width:1.5px;height:calc(100% - 20px)}
  .ng-n::after{transform:none}
  .ng-route__trunk .ng-n:last-child{padding-bottom:6px}
  .ng-route__trunk .ng-n:last-child::before,.ng-route__trunk .ng-n:last-child::after{display:none}
  .ng-route__lanes{display:grid;grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:auto;align-items:start;gap:22px;margin-top:14px}
  .ng-lane{padding:22px 18px 22px;border:1px solid rgba(36,33,28,.22);border-top:2px solid var(--lane);background:rgba(255,255,255,.4)}
  .ng-lane::before,.ng-lane::after{display:none}
  .ng-lane__head{position:static;margin-bottom:22px}
  .ng-lane h4{font-size:28px}
  .ng-lane__row{display:block;padding-bottom:0}
  .ng-lane__steps{display:block}
  .ng-lane__steps .ng-n:last-child::before,.ng-lane__steps .ng-n:last-child::after{width:1.5px;height:calc(100% - 20px + 8px)}
  .ng-lane__stop{width:auto;margin:10px 0 0}
  .ng-lane__more{grid-template-columns:1fr;gap:22px;margin-top:22px}
  .ng-cpc ul{display:grid;grid-template-columns:max-content minmax(0,240px);align-items:center;gap:10px 14px}
  .ng-cpc li{display:contents}
  .ng-cpc li span{grid-column:1;grid-row:var(--r);width:auto;padding:0;border:0;min-height:0;font-size:13px;text-align:left;white-space:nowrap}
  .ng-cpc li i{grid-column:2;grid-row:var(--r);width:calc((100% - 44px) * var(--p));max-width:none;height:14px;transform-origin:left;transform:scaleX(var(--g,1))}
  .ng-cpc li b{grid-column:2;grid-row:var(--r);justify-self:start;margin-left:calc((100% - 44px) * var(--p) + 8px);font-size:12px}
  /* bar lengths follow the desktop heights (24, 32, 34, 44, 68 px) */
  .ng-cpc li:nth-child(1){--r:1;--p:.353}.ng-cpc li:nth-child(2){--r:2;--p:.471}.ng-cpc li:nth-child(3){--r:3;--p:.5}.ng-cpc li:nth-child(4){--r:4;--p:.647}.ng-cpc li:nth-child(5){--r:5;--p:1}
  .ng-adv{grid-template-columns:1fr}
  .ng-route__end{height:auto;margin-top:24px;padding:0 0 0 32px;min-height:12px}
  .ng-route__end i{position:absolute;left:0;top:4px}
  .ng-route__end span,.ng-route__end small{position:static;display:block}
  .ng-route__end small{margin-top:5px}
}
.ng-flow__more{margin:26px 0 0;max-width:760px;font-size:14px;color:var(--it-muted)}
/* C. the eleven loci */
.ng-loci{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:center}
.ng-loci__body>*{max-width:520px}
.ng-panel{margin:0;padding:clamp(22px,2.6vw,38px);background:var(--ng-card);border-radius:26px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 40px 80px -56px rgba(60,40,0,.45)}
.ng-panel figcaption{font:600 11px/1 Barlow,var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--it-muted)}
.ng-panel h5{margin:22px 0 8px;font:600 12px/1 Barlow,var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ng-acc)}
.ng-genes{list-style:none;margin:0;padding:0}
.ng-locus{display:grid;grid-template-columns:78px minmax(0,1fr) 52px;align-items:center;gap:12px;padding:7px 0;border-top:1px solid #F0EADA}
.ng-locus b{font:600 12.5px/1 'JetBrains Mono',monospace}
.ng-locus em{font:500 12px/1 'JetBrains Mono',monospace;font-style:normal;color:var(--it-muted);text-align:right;font-variant-numeric:tabular-nums}
.ng-gene{position:relative;display:flex;gap:3px;width:calc(var(--kb) / 7.4 * 100%);min-width:0;transform-origin:left}
.ng-gene::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:#CFC6AE}
.ng-gene i{position:relative;flex:1 1 0;min-width:0;height:21px;border-radius:3px;background:#24211C;color:#fff;font:500 10px/21px 'JetBrains Mono',monospace;font-style:normal;text-align:center;overflow:hidden}
.ng-gene i.u{flex:1.5 1 0;background:#DDD3B8;color:#6B6451}
/* D. the HLA kit */
.ng-kit{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,96px);align-items:center}
.ng-kit__photo{margin:0;position:relative}
.ng-kit__photo img{display:block;width:100%;height:auto;filter:none}
.ng-kit__body>*{max-width:470px}
.ng-feats{margin-top:26px}
.ng-table{grid-column:1/-1;overflow-x:auto;border-radius:22px;background:var(--ng-card);box-shadow:0 1px 0 rgba(0,0,0,.04),0 34px 70px -52px rgba(60,40,0,.4)}
.ng-table:focus-visible{outline:2px solid var(--ng-acc);outline-offset:3px}
.ng-table table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px}
.ng-table th,.ng-table td{padding:16px 22px;text-align:left;border-bottom:1px solid #F0EADA;font-variant-numeric:tabular-nums}
.ng-table tr:last-child>*{border-bottom:0}
.ng-table thead th{font:600 12px/1 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--it-ink);border-bottom:1px solid var(--it-ink)}
.ng-table tbody th{font-weight:600}
.ng-table td:last-child{font-family:'JetBrains Mono',monospace;font-size:14px}
/* E. RBC-NGStype */
/* F. the software */
.ng-soft{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,96px);align-items:center}
.ng-soft__body>*{max-width:500px}
.ng-soft__shots{position:relative;padding-bottom:clamp(40px,6vw,90px)}
.ng-shot{margin:0}
.ng-shot img{display:block;width:100%;height:auto}
.ng-shot--ui{border-radius:18px;overflow:hidden;box-shadow:0 50px 100px -50px rgba(30,20,0,.55)}
.ng-shot--report{position:absolute;right:clamp(-12px,-1vw,0px);bottom:0;width:33%;border-radius:6px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(30,20,0,.5),0 0 0 1px rgba(0,0,0,.06)}
/* the NGS section is two parts: A (HLA-NGStype), then B (RBC-NGStype). Each has its own tint and a header band, so the change is seen */
.ng-part{--pa:#A85F00;--ng-bg:#F6EEDA;--ng-line:#E8DDBE;background:var(--ng-bg);border-top:8px solid var(--pa)}
.ng-part--rbc{--pa:#B3263E;--ng-acc:#B3263E;--ng-bg:#F9EDEA;--ng-line:#EBD5D0}
.ng-part__head{max-width:1500px;margin:0 auto;padding:calc(var(--navh,72px) + clamp(28px,6vh,72px)) var(--pad) clamp(0px,1vh,12px);display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(28px,5vw,90px);align-items:end}
.ng-part__k{grid-column:1 / -1;margin:0 0 clamp(14px,3vh,34px);font:600 12px/1 Barlow,var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--pa)}
.ng-part__n{font:400 clamp(120px,17vw,260px)/.78 'Bodoni Moda',serif;color:var(--pa);letter-spacing:-.02em}
.ng-part__t{padding-bottom:.6vw}
.ng-part__t h3{margin:0}
.ng-part__t .lede{max-width:560px;margin:16px 0 0}
@media (max-width:1100px){
}
@media (max-width:900px){
  .ng-part{border-top-width:6px}
  .ng-part__head{grid-template-columns:1fr;row-gap:8px;padding-top:calc(var(--navh,62px) + 22px)}
  .ng-part__n{font-size:clamp(84px,26vw,120px);margin:0 0 0 -3px}
  .ng-cap{left:var(--pad);bottom:8px}
  .ng-loci,.ng-kit,.ng-soft{grid-template-columns:1fr}
  .ng-locus{grid-template-columns:62px minmax(0,1fr) 46px;gap:8px}
  .ng-gene{gap:2px;width:calc(66% + var(--kb) / 7.4 * 34%)}
  .ng-gene i{height:18px;font-size:8px;line-height:18px}
  .ng-table table{min-width:0}
  .ng-table th,.ng-table td{padding:12px 12px}
  .ng-table thead th{font-size:10.5px}
  .ng-kit__photo{order:-1}
  .ng-loci,.ng-soft{row-gap:48px}
  .ng-soft__shots{padding-bottom:44px}
  .ng-shot--report{width:38%;right:0}
  .ng-table td,.ng-table tbody th{font-size:13.5px}
}

.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.badge{font:600 13px Barlow;letter-spacing:.06em;padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.25)}
.badge--gold{background:var(--de-gold);color:#2B2100;border-color:var(--de-gold)}

/*>>sx*/
/* ---------- SX shared parts for sections 05 to 12: light pages, each with its own --bg and --acc ---------- */
.sx{--bg:#F4F5F0;--acc:#1F7A5C;--card:#fff;--line:#E2E4DC;--mute:#6A6A62;background:var(--bg);color:var(--it-ink);overflow:clip}
.sx .eyebrow{color:var(--acc)}
.sx h2{font:400 clamp(40px,4.6vw,76px)/.98 'Bodoni Moda',serif;letter-spacing:-.01em;margin:22px 0 22px}
.sx h3{font:400 clamp(32px,3.7vw,60px)/1.04 'Bodoni Moda',serif;letter-spacing:-.01em;margin:18px 0 18px}
.sx .soft{color:#8A8A80}
.sx .lede{color:#45453F}
.sx .film__feats svg{color:var(--acc)}
.sx .film__feats li,.sx .film__feats li:last-child,.sx .stats{border-color:var(--line)}
.sx .film__steps li{background:var(--line)}
.sx .maker img.logo{height:30px}
.sx .film__pin,.sx .film__stage{background:var(--bg)}
.sx-cap{position:absolute;left:var(--pad);bottom:clamp(28px,7vh,64px);margin:0;font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.04em;color:#9A9382}
.sx-block{max-width:1500px;margin:0 auto;padding:clamp(56px,10vh,120px) var(--pad) clamp(24px,4vh,48px)}
.sx-head{max-width:700px}
.sx-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,96px);align-items:center}
.sx-split--rev{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.sx-split--rev>.sx-photo{order:2}
.sx-body>*{max-width:520px}
.sx-photo{margin:0;border-radius:28px;overflow:hidden;background:var(--line);aspect-ratio:var(--ar,4/3.4);max-height:80vh;box-shadow:0 50px 100px -60px rgba(28,28,28,.5)}
.sx-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
.sx-photo--cut{background:transparent;box-shadow:none;overflow:visible}
.sx-photo--cut img{object-fit:contain;filter:none}
.sx-photo--plain{background:var(--card)}
.sx-photo--plain img{object-fit:contain;padding:clamp(10px,2vw,28px)}
.sx-cards{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:20px;margin-top:clamp(28px,5vh,52px);list-style:none;padding:0}
.sx-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.2vw,32px);background:var(--card);border-radius:24px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 34px 70px -52px rgba(28,28,28,.42)}
.sx-card>svg{width:28px;height:28px;color:var(--acc)}
.sx-card h4{margin:6px 0 0;font:600 18px/1.25 Inter,var(--sans);color:var(--it-ink)}
.sx-card h4.serif,.sx-card .serif{font:400 clamp(26px,2.3vw,34px)/1.05 'Bodoni Moda',serif}
.sx-card p{margin:0;font-size:14.5px;line-height:1.55;color:#45453F}
.sx-card__img{display:block;width:100%;height:clamp(150px,15vw,210px);object-fit:contain;margin:6px 0}
.sx-card__art{margin:0;font:500 13.5px/1.3 'JetBrains Mono',monospace;color:var(--it-ink)}
.sx-card__n{position:absolute;right:24px;top:22px;font:400 22px/1 'Bodoni Moda',serif;color:#B9B9B0}
.sx-card--main{box-shadow:0 0 0 2px var(--acc),0 40px 80px -50px rgba(0,0,0,.35)}
.sx-spec{list-style:none;margin:auto 0 0;padding:14px 0 0;display:grid;gap:7px;font:500 12.5px/1.4 'JetBrains Mono',monospace;color:var(--it-ink)}
.sx-spec li{padding-top:7px;border-top:1px solid var(--line)}
.sx-card p+.sx-spec,.sx-card ul+.sx-spec{margin-top:14px}
.sx-chips{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sx-chips li{font:500 12.5px/1 'JetBrains Mono',monospace;padding:7px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--it-ink)}
.sx-card .sx-chips li{background:var(--bg)}
.sx-chips--solid li{background:var(--acc);border-color:var(--acc);color:#fff}
.sx-table{overflow-x:auto;margin-top:clamp(20px,4vh,40px);border-radius:22px;background:var(--card);box-shadow:0 1px 0 rgba(0,0,0,.04),0 34px 70px -52px rgba(28,28,28,.4)}
.sx-table:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.sx-table table{width:100%;min-width:600px;border-collapse:collapse;font-size:14.5px}
.sx-table th,.sx-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;vertical-align:top}
.sx-table tr:last-child>*{border-bottom:0}
.sx-table thead th{font:600 12px/1.2 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--it-ink);border-bottom:1px solid var(--it-ink);white-space:nowrap}
.sx-table tbody th{font-weight:600}
.sx-table td.n,.sx-table th.n{text-align:right}
.sx-table td.mono{font-family:'JetBrains Mono',monospace;font-size:13px;white-space:nowrap}
.sx-table thead th:first-child,.sx-table tbody th:first-child{position:sticky;left:0;background:var(--card)}
.sx-dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:8px;vertical-align:-1px;background:#ccc;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.sx-flow{list-style:none;counter-reset:f;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:6px}
.sx-flow li{counter-increment:f;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 12px 14px;border-radius:12px;background:var(--card);font-size:12.5px;line-height:1.3;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.sx-flow li::before{content:counter(f);font:500 11px/1 'JetBrains Mono',monospace;color:var(--acc)}
.sx-flow small,.sx-tag{margin-top:auto;display:inline-block;padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--acc) 14%,#fff);font:600 10px/1 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.sx-note{margin:22px 0 0;max-width:760px;font-size:13.5px;line-height:1.55;color:var(--mute)}
.sx-end{max-width:1500px;margin:0 auto;padding:clamp(24px,5vh,56px) var(--pad) clamp(24px,4vh,40px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px}
.sx-end .maker{margin:0}
#readygene,#daraex,#extraction,#instruments{padding-bottom:clamp(24px,4vh,40px)}
.sx-ruo{margin:0;font-size:13px;color:var(--mute)}
.sx-feats{margin-top:26px}
.sx-feats li{opacity:1!important;transform:none!important}
.sx .stat span{color:var(--mute)}
@media (max-width:1100px){.sx-cards{--cols:2}.sx-flow{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .sx-cap{left:var(--pad);bottom:8px}
  .sx-split,.sx-split--rev{grid-template-columns:1fr}
  .sx-split--rev>.sx-photo{order:0}
  .sx-photo{aspect-ratio:var(--ar-m,16/11);max-height:none;border-radius:22px}
  .sx-cards{--cols:1;gap:16px}
  .sx-card{border-radius:20px}
  .sx-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-table table{min-width:0}.sx-table th,.sx-table td{padding:11px 12px;font-size:13px}
  .sx-table thead th{font-size:10.5px;white-space:normal}
}
@media (min-width:901px) and (max-width:1100px){.sx-cards{--cols:2}}

/* ---------- 05 Ready Gene (inno-train, SSP-PCR): pale green-grey, deep green ---------- */
.rg{--bg:#F2F7F4;--acc:#1F7A5C;--line:#DCE6E0}
.rg-kit{display:flex;flex-direction:column}
/* the kit finder: a question on the left, its kits on the right; flat, hairlines, the kit's colour as its top rule */
.rgk-ui{display:grid;grid-template-columns:minmax(250px,330px) minmax(0,1fr);gap:clamp(28px,4.5vw,80px);margin-top:clamp(32px,6vh,64px);align-items:start}
.rgk-qs{position:sticky;top:calc(var(--navh,72px) + 28px);display:flex;flex-direction:column}
.rgk-g{font:600 11px/1 Barlow,var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--acc);margin:26px 0 10px}
.rgk-g:first-child{margin-top:0}
.rgk-q{appearance:none;background:none;border:0;border-top:1px solid var(--line);margin:0;text-align:left;padding:12px 36px 12px 0;font:500 15px/1.35 var(--sans);color:#6A6A62;cursor:default;position:relative;transition:color .3s,padding .35s cubic-bezier(.2,.7,.2,1)}
.rgk-q::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;background:var(--acc);transform:scaleY(0);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.rgk-q.is-on{color:var(--it-ink);padding-left:16px}
.rgk-q.is-on::before{transform:scaleY(1)}
.rgk-q__n{position:absolute;right:2px;top:13px;font:500 11px/1.4 'JetBrains Mono',monospace;color:#9A9A92}
.rgk-qs::before,.rgk-qs::after{content:"";position:absolute;left:-18px;top:0;bottom:0;width:1px;background:var(--line)}
.rgk-qs::after{background:var(--acc);transform-origin:top;transform:scaleY(var(--p,0))}
.rgk-p+.rgk-p{margin-top:clamp(72px,16vh,160px);padding-top:clamp(28px,4vh,40px);border-top:1px solid var(--line)}
.rgk-ui.is-story .rgk-p{transition:opacity .6s cubic-bezier(.2,.7,.2,1)}
.rgk-ui.is-story .rgk-p:not(.is-on){opacity:.3}
.rgk-ui.is-story .rgk-p:not(.is-in) .rgk-card,.rgk-ui.is-story .rgk-p:not(.is-in) .rgk-p__h,.rgk-ui.is-story .rgk-p:not(.is-in) .rgk-p__why{opacity:0}
@media (min-width:901px) and (max-height:820px){.rgk-q{padding-top:8px;padding-bottom:8px;font-size:14px}.rgk-q::before{top:8px;bottom:8px}.rgk-q__n{top:9px}.rgk-g{margin:16px 0 8px}}
.rgk-p__g{font:600 11px/1 Barlow,var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--acc);margin:0 0 12px}
.rgk-p__h{font:400 clamp(30px,2.7vw,42px)/1.1 'Bodoni Moda',serif;margin:0;color:var(--it-ink)}
.rgk-p__why{max-width:640px;margin:14px 0 0;font-size:16px;color:#55554E}
.rgk-cards{list-style:none;margin:clamp(22px,4vh,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:8px 32px}
.rgk-card{display:flex;flex-direction:column;gap:12px;padding:16px 0 24px;border-top:2px solid var(--c)}
.rgk-card__t{display:flex;justify-content:space-between;gap:10px;margin:0;font:500 11px/1.4 'JetBrains Mono',monospace;color:#8A8A82}
.rgk-card h4{font:400 clamp(26px,2.1vw,32px)/1.1 'Bodoni Moda',serif;margin:0;color:var(--it-ink)}
.rgk-wells{display:grid;grid-template-columns:repeat(var(--cols),11px);gap:5px;padding:4px 0}
.rgk-wells i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--w);background:var(--w);box-sizing:border-box}
.rgk-wells.is-clear i{border-color:#A6AFAA;background:rgba(28,28,28,.07)}
.rgk-card__q{margin:0;font:500 12px/1.5 'JetBrains Mono',monospace;color:#6A6A62}
.rgk-card__q em{font-style:normal;white-space:nowrap}.rgk-card__q b{color:var(--it-ink);font-weight:600}.rgk-card__q span{margin:0 7px;color:#B5B5AD}
.rgk-map{display:flex;flex-wrap:wrap;gap:4px}
.rgk-map i{font:500 11px/1 'JetBrains Mono',monospace;font-style:normal;padding:5px 7px;border:1px solid var(--line);color:#A3A39B}
.rgk-map i.on{background:var(--it-ink);border-color:var(--it-ink);color:#fff}
.rgk-card__d{margin:0;font-size:14px;line-height:1.5;color:#3A3A35}
.rgk-card__n{margin:0;font:500 11.5px/1.5 'JetBrains Mono',monospace;color:#8A8A82}
@keyframes rgkIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes rgkFill{from{background:transparent;transform:scale(.6)}to{transform:none}}
@keyframes rgkHead{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rgk-p.is-in .rgk-p__h,.rgk-p.is-in .rgk-p__why{animation:rgkHead .6s cubic-bezier(.2,.7,.2,1) both}
.rgk-p.is-in .rgk-p__why{animation-delay:.08s}
.rgk-p.is-in .rgk-card{animation:rgkIn .75s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.12s + var(--j) * .09s)}
.rgk-p.is-in .rgk-wells i{animation:rgkFill .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.35s + var(--j) * .09s + var(--i) * 14ms)}
@media (prefers-reduced-motion:reduce){.rgk-p.is-in .rgk-card,.rgk-p.is-in .rgk-wells i,.rgk-p.is-in .rgk-p__h,.rgk-p.is-in .rgk-p__why{animation:none}}
@media (max-width:900px){
  .rgk-ui{display:block}
  .rgk-qs{display:none}
  .rgk-p+.rgk-p{margin-top:56px;padding-top:28px}
  .rgk-ui.is-story .rgk-p:not(.is-on){opacity:1}
  .rgk-ps{margin-top:26px}
  .rgk-cards{display:contents}
  .rgk-card{position:sticky;top:calc(var(--navh,62px) + 20px + var(--j,0) * 8px);box-sizing:border-box;margin:0 0 18px;padding:16px 18px 20px;background:#FBFBF8;border:1px solid #D4D4C9;border-top:3px solid var(--c);transform-origin:50% 0;will-change:transform}
  .rgk-p.is-in .rgk-card{animation:none}
  .rgk-card:first-child{margin-top:26px}
  .rgk-ui.is-story .rgk-card{transition:opacity .6s cubic-bezier(.2,.7,.2,1)}
  .rgk-wells{grid-template-columns:repeat(var(--cols),10px);gap:4px}.rgk-wells i{width:10px;height:10px}
}
/*<<sx*/
/*>>c06*/
/* ---------- 06 HLA serology (inno-train): warm grey, brick red ---------- */
.sl{--bg:#F6F4F0;--acc:#B3263E;--line:#E6E1D8}
.sx-steps{list-style:none;counter-reset:st;margin:26px 0 0;padding:0}
.sx-steps li{counter-increment:st;display:grid;grid-template-columns:34px 1fr;column-gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.sx-steps li:last-child{border-bottom:1px solid var(--line)}
.sx-steps li::before{content:counter(st);grid-row:1/3;font:400 22px/1 'Bodoni Moda',serif;color:var(--acc)}
.sx-steps b{font:600 15px/1.35 var(--sans)}
.sx-steps span{font-size:14px;line-height:1.5;color:#5E5E57}
.sl-scale{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:8px}
.sl-scale li{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;background:var(--card);box-shadow:0 1px 0 rgba(0,0,0,.04)}
.sl-scale b{font:400 26px/1 'Bodoni Moda',serif;color:var(--acc)}
.sl-scale span{font-size:14.5px}
.sl-scale small{font:500 12.5px/1 'JetBrains Mono',monospace;color:var(--mute)}
.sl-scale li:nth-child(n+4) b{color:#8E1A2D}
/*<<c06*/
/*>>c07*/
/* ---------- 07 DaraEx (inno-train): pale rose, deep red ---------- */
.dx{--bg:#FBF3F1;--acc:#B30000;--line:#EAD9D5}
.dx .maker{gap:22px}.dx .maker img.logo{height:30px}
.sx-tag{margin:0 0 4px;align-self:flex-start}
/* the range: the three vials drawn from the product photos, each with what it is (flat: hairlines, no boxes); phones swipe them sideways */
.dx-vials{list-style:none;padding:0;margin:clamp(32px,6vh,64px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,52px)}
.dx-vial{display:flex;flex-direction:column}
.dx-vial__fig{margin:0 0 26px;height:clamp(300px,50vh,480px);display:flex;justify-content:center;align-items:flex-end}
.dx-vial__fig img{height:100%;width:auto;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.dx-vial:hover .dx-vial__fig img{transform:translateY(-8px)}
.dx-vial__txt{display:flex;flex-direction:column;gap:9px;flex:1;border-top:1px solid var(--it-ink);padding-top:18px}
.dx-vial .sx-tag{background:none;padding:0;border-radius:0;font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:none}
.dx-vial h4.serif{margin:2px 0 0;font:400 clamp(28px,2.4vw,36px)/1.05 'Bodoni Moda',serif;color:var(--it-ink)}
.dx-vial h4 i{font-style:italic}
.dx-vial__role{margin:0;font:600 14px/1.4 var(--sans);color:var(--it-ink)}
.dx-vial p:not(.dx-vial__role){margin:0;font-size:14.5px;line-height:1.55;color:#45453F}
.dx-vial .sx-spec{margin-top:auto;padding-top:14px}
.dx-stats{max-width:none;margin-top:clamp(36px,6vh,64px)}
.dx-why .sx-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,3vw,52px);max-width:none}
.dx-why .sx-feats li{border-bottom:1px solid var(--it-line)}
@media (max-width:900px){
  .dx-vials{display:block;margin-top:28px}
  .dx-vial{position:sticky;top:calc(var(--navh,62px) + 24px);box-sizing:border-box;margin:0 0 18px;padding:18px 18px 16px;background:#FBFBF8;border:1px solid #D4D4C9;border-top:3px solid var(--it-ink);transform-origin:50% 0;will-change:transform}
  .dx-vial:nth-child(3){border-top-color:#2F5FA8}
  .dx-vial__fig{height:min(24svh,200px);margin-bottom:10px}
  .dx-vial__txt{gap:6px}
  .dx-vial p:not(.dx-vial__role){font-size:13.5px;line-height:1.5}
  .dx-vial .sx-spec{padding-top:8px}
  .dx-vial .sx-spec li{padding:5px 0}
  .dx-vial__txt{border-top:0;padding-top:0}
  #daraex .film__copy{padding-top:calc(var(--navh,62px) + 8px)}
  #daraex .dx-intro .film__stage{height:min(300px,78vw);margin-top:14px}
  #daraex .dx-range{padding-top:44px}
  .dx-proto .sx-table{overflow:visible;border:0;border-radius:0;background:none;box-shadow:none;margin-top:22px}
  .dx-proto .sx-table table,.dx-proto .sx-table tbody{display:block}
  .dx-proto .sx-table thead{display:none}
  .dx-proto .sx-table tr{display:block;margin:0 0 14px;padding:18px 18px 6px;background:#FBFBF8;border:1px solid #D4D4C9;border-top:3px solid var(--acc,#B30000)}
  .dx-proto .sx-table th,.dx-proto .sx-table td{display:block;padding:0;border:0;font-size:14px;line-height:1.5}
  .dx-proto .sx-table tbody th{position:static;margin:0 0 12px;background:none;font:400 32px/1 'Bodoni Moda',serif;color:var(--it-ink)}
  .dx-proto .sx-table td{padding:10px 0;border-top:1px solid var(--it-line)}
  .dx-proto .sx-table td::before{content:attr(data-l);display:block;margin-bottom:3px;font:500 10px/1.2 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#8A8A80}
  .dx-proto .sx-table td:nth-of-type(1){font:400 30px/1.1 'Bodoni Moda',serif}
  .dx-proto .sx-table td:nth-of-type(3){font:500 13px/1.45 'JetBrains Mono',monospace}
  .dx-why .sx-feats{grid-template-columns:1fr}
  .dx-why .sx-feats li{border-bottom:0}
  .dx-why .sx-feats li:last-child{border-bottom:1px solid var(--it-line)}
}
@media (prefers-reduced-motion:reduce){.dx-vial__fig img{transition:none}}
/*<<c07*/
/*>>c08*/
/* ---------- 08 DNA extraction (inno-train BEXS 12): pale teal ---------- */
.ex{--bg:#F1F7F8;--acc:#0F7C8A;--line:#D5E5E8}
.ex .maker img.logo{height:30px}
/*<<c08*/
/*>>c09*/
/* ---------- 09 Component processing (Lmb): pale rose, magenta ---------- */
.cp{--bg:#FBF3F7;--acc:#CC0C6C;--line:#EFD9E4}
.cp .maker{gap:22px}.cp .maker img.logo{height:28px}
.cp .maker{align-items:center}.cp .maker img[alt="WELDmatic"]{height:34px}
/* component processing: the line-up from the USAS equipment cover (all six machines). Stacked by default (phones, reduced motion);
   desktop with motion adds .is-live: pinned, a slow camera goes machine to machine (site.js, component processing block) */
.cp-line{position:relative;background:var(--bg)}
.cp-line__pin{max-width:1500px;margin:0 auto;box-sizing:border-box;padding:calc(var(--navh,72px) + 6vh) var(--pad) clamp(40px,8vh,96px)}
.cp-line__head h2{font-size:clamp(40px,5vw,76px);line-height:1.03;margin:14px 0 18px;text-wrap:balance}
.cp-line__head .lede{max-width:34em}
.cp-line__stage{margin:clamp(24px,5vh,56px) 0 0}
.cp-line__cam{position:relative;width:100%;aspect-ratio:2400/1751;overflow:hidden}
.cp-line__zoom{position:absolute;inset:0;transform-origin:0 0}
.cp-line__zoom img{display:block;width:100%;height:100%}
.cp-line__list{list-style:none;margin:clamp(24px,5vh,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,3vw,48px)}
.cp-line__list>li{border-top:1px solid var(--line);padding:18px 0 24px}
.cp-line__list h3{font-size:clamp(26px,2.4vw,34px);line-height:1.1;margin:6px 0 10px}
.cp-line__lede{margin:0;font-size:15.5px;line-height:1.55;color:#4A4A43;max-width:32em}
.cp-line__spec{margin:16px 0 0;padding:0;max-width:32em}
.cp-line__spec div{display:grid;grid-template-columns:9.5em 1fr;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.cp-line__spec div:last-child{border-bottom:1px solid var(--line)}
.cp-line__spec dt{font:500 11.5px/1.5 'JetBrains Mono',monospace;letter-spacing:.02em;color:#7A6F75}
.cp-line__spec dd{margin:0;font-size:14.5px;line-height:1.45;color:var(--it-ink)}
.cp-line__list .sx-chips{margin-top:14px}
.cp-line__list .maker{margin:16px 0 0}.cp-line__list .maker img.logo{height:46px}
.cp-line__end,.cp-line__rail,.cp-line__dev{display:none}
@media (max-width:900px){
  .cp-line__pin{padding:64px var(--pad) 36px}
  .cp-line__head h2{font-size:clamp(32px,8.6vw,42px);margin:12px 0}
  .cp-line__stage{margin:18px calc(var(--pad) * -1) 0}
  .cp-line__list{grid-template-columns:1fr;margin-top:14px}
  .cp-line__dev{display:block;width:auto;max-width:88%;max-height:36svh;margin:0 auto 20px;will-change:transform}
  .cp-line__list>li:nth-child(3) .cp-line__dev{max-width:78%}
  .cp-line__list>li{padding:22px 0 26px}
  .cp-line__list h3{font-size:26px}
  .cp-line__spec div{grid-template-columns:8.5em 1fr}
}
@media (min-width:901px){
  .cp-line.is-live .cp-line__pin{position:relative;max-width:none;height:100vh;height:100svh;min-height:620px;padding:0;overflow:hidden}
  .cp-line.is-live{--cw:min(30vw,440px);--sl:calc(var(--pad) + var(--cw) + clamp(32px,4vw,72px))}
  .cp-line.is-live .cp-line__beat{position:absolute;left:var(--pad);top:52%;width:var(--cw);margin:0;padding:0;border:0;transform:translate3d(0,-50%,0);will-change:transform,opacity}
  .cp-line.is-live .cp-line__list{display:block;margin:0}
  .cp-line.is-live .cp-line__head h2{font-size:clamp(44px,4.4vw,72px)}
  .cp-line.is-live .cp-line__list h3{font-size:clamp(34px,3.2vw,54px);line-height:1.04;margin:8px 0 14px}
  .cp-line.is-live .cp-line__lede{font-size:clamp(15px,1.1vw,17px)}
  .cp-line.is-live .cp-line__end{display:block}
  .cp-line__k{margin:0 0 22px;font:400 clamp(30px,2.8vw,46px)/1.12 'Bodoni Moda',serif;color:var(--it-ink)}
  .cp-line__k span{display:block;padding:.16em 0 .2em;border-top:1px solid var(--line)}
  .cp-line__k span:first-child{border-top:0}
  .cp-line.is-live .cp-line__stage{position:absolute;margin:0;left:var(--sl);right:var(--pad);top:calc(var(--navh,72px) + 3vh);bottom:calc(6vh + 44px);container-type:size;display:flex;align-items:center;justify-content:center}
  .cp-line.is-live .cp-line__cam{width:min(100cqw,100cqh * 2400 / 1751);-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(transparent,#000 3%,#000 97%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(transparent,#000 3%,#000 97%,transparent);mask-composite:intersect}
  .cp-line.is-live .cp-line__zoom{will-change:transform}
  .cp-line.is-live .cp-line__rail{display:flex;position:absolute;left:var(--sl);right:var(--pad);bottom:6vh;margin:0;padding:0;list-style:none;justify-content:space-between;gap:12px}
  .cp-line__rail li{flex:1;position:relative;padding-top:12px;border-top:1px solid var(--line);font:500 11px/1.3 'JetBrains Mono',monospace;letter-spacing:.02em;color:#9A8F95;transition:color .5s}
  .cp-line__rail li::after{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.16,1,.3,1)}
  .cp-line__rail li.is-on,.cp-line.is-all .cp-line__rail li{color:var(--it-ink)}
  .cp-line__rail li.is-on::after{transform:none}
}
/*<<c09*/
/*>>c10*/
/* ---------- 10 Blood bags, filters and cold chain (Demophorius): pale blue ---------- */
.cc{--bg:#EEF4FB;--acc:#2F6FB0;--line:#D7E3F1}
.bb{--bg:#F4F4F8;--acc:#3A47A0;--line:#DEDFEA}
.cc .maker{gap:22px}.cc .maker img.logo{height:28px}
.cc-bag{background:linear-gradient(160deg,#C9D8E7,#AEC2D6);border-radius:16px;padding:14px;margin:0 0 6px;aspect-ratio:2/1;display:grid;place-items:center}
.cc-bag img{display:block;max-width:100%;max-height:100%;object-fit:contain;filter:none}
.cc-equip{list-style:none;margin:clamp(28px,5vh,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cc-equip li{display:flex;flex-direction:column;gap:8px;padding:18px;background:#fff;border-radius:22px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 34px 70px -52px rgba(28,28,28,.42)}
.cc-equip figure{margin:0;height:clamp(150px,14vw,210px);display:grid;place-items:center;border-radius:14px;background:#F4F8FC;overflow:hidden}
.cc-equip img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.cc-equip b{font:600 16px/1.25 Inter,var(--sans);color:var(--it-ink)}
.cc-equip span{font-size:13.5px;line-height:1.5;color:#45453F}
.cc-equip .sx-tag{align-self:flex-start;margin:4px 0 0}
@media (max-width:1000px){.cc-equip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cc-equip{grid-template-columns:1fr}}
.cc .maker{align-items:center}
/*<<c10*/
/*>>c11*/
/* ---------- 10 Transfusion instruments (Imperial Biotech, Nigale): pale blue-grey, navy ---------- */
.ib{--bg:#E7E1F2;--acc:#5E2A9E;--line:#D3CAE4;border-top:1px solid #CFC5E2}
.ib .maker{gap:22px}.ib .maker img.logo{height:30px}
.ib .maker img.ib-logo{height:clamp(96px,13vh,132px);width:auto}
/* A. the assembly: catalogue photographs placed by site.js on two rows of one floor */
.ib-asm__pin{position:relative;box-sizing:border-box;display:flex;flex-direction:column;padding:calc(var(--navh,74px) + clamp(28px,6vh,72px)) var(--pad) clamp(40px,7vh,84px);background:var(--bg)}
.ib-asm__copy{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:end;width:100%;max-width:1440px;margin:0 auto}
.ib-asm__copy .eyebrow{color:var(--acc)}
.ib-asm__copy h2{margin:clamp(12px,2vh,22px) 0 0;font:400 clamp(34px,min(3.6vw,6.4vh),64px)/1.02 'Bodoni Moda',serif;letter-spacing:-.012em;color:var(--it-ink)}
.ib-asm__copy .ln{display:block}.ib-asm__copy .soft{color:#8E8A9A}
.ib-asm__copy .lede{margin:0;max-width:30em;color:#4A4F5A}
.ib-asm__copy .maker{margin-top:16px}
.ib-asm__copy .maker img.ib-logo{height:clamp(84px,12vh,120px)}
.ib-asm__stage{position:relative;height:clamp(260px,46vw,420px);margin-top:clamp(28px,5vh,60px);transform-origin:50% 100%}
.ib-asm__p{position:absolute;left:0;top:0;display:block;max-width:none;user-select:none;-webkit-user-drag:none}
.ib-asm__note{margin:clamp(18px,3vh,30px) 0 0;text-align:center;font:500 12px/1.4 'JetBrains Mono',monospace;letter-spacing:.06em;color:#6B7383}
.ib-asm__note b{font-weight:600;color:var(--acc)}
/* desktop, pinned: the copy at the top, the group fills the rest of the screen */
.ib-asm.is-live .ib-asm__pin{height:100vh;height:100svh;min-height:640px;overflow:hidden;padding-top:calc(var(--navh,74px) + clamp(22px,4.4vh,52px));padding-bottom:clamp(50px,7.5vh,84px)}
.ib-asm.is-live .ib-asm__stage{flex:1;min-height:0;height:auto}
.ib-asm.is-live .ib-asm__p{will-change:transform;opacity:0}
.ib-asm.is-live .ib-asm__note{position:absolute;left:0;right:0;bottom:clamp(20px,3.4vh,36px);margin:0;opacity:var(--note,0)}
/* B. the range */
.ib-range{padding-top:clamp(56px,9vh,110px)}
.ib-grid{list-style:none;margin:clamp(20px,3vh,32px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(18px,2vw,30px)}
.ib-card{position:relative;display:flex;flex-direction:column;border-top:1px solid var(--it-ink);padding-top:14px}
.ib-card figure{margin:10px 0 18px;height:clamp(170px,15vw,230px);display:flex;align-items:flex-end;justify-content:center;background:#C4BADB;padding:14px 0 0;box-sizing:border-box}
.ib-card figure img{display:block;max-width:86%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.ib-card:hover figure img{transform:translateY(-6px)}
.ib-card figure.ib-deep{background:#8E83AE}
.ib-card__no{position:absolute;top:14px;left:0;font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.08em;color:#8E8A9A}
.ib-card b{font:400 clamp(21px,1.6vw,26px)/1.12 'Bodoni Moda',serif;color:var(--it-ink)}
.ib-card em{display:block;margin-top:8px;font:500 11.5px/1.3 'JetBrains Mono',monospace;font-style:normal;letter-spacing:.04em;color:var(--acc)}
.ib-card p{margin:12px 0 0;font-size:14.5px;line-height:1.58;color:#45474D}
.ib-card small{display:block;margin-top:auto;padding-top:14px;font:500 11.5px/1.45 'JetBrains Mono',monospace;color:#5B6372}
.ib-card small::before{content:'';display:block;width:28px;height:1px;margin-bottom:10px;background:var(--acc)}
.ib-h{margin:clamp(40px,6vh,64px) 0 0;font:600 12px/1 Barlow,var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
/* desktop strip (buildStrip): every card the same height, photos standing on one line */
.ib-range.hx{--hxh:clamp(470px,64vh,640px)}
.hx .ib-grid .ib-card{width:clamp(300px,23.5vw,400px);border-top:1px solid var(--it-ink);padding:14px 0 0;gap:0}
.hx .ib-grid .ib-card figure{height:calc(var(--hxh) * .46);margin:14px 0 22px}
.hx .ib-grid .ib-card b{font-size:clamp(24px,1.9vw,30px)}
.hx .ib-grid .ib-card p{font-size:15.5px;line-height:1.6}
.hx .ib-grid .ib-card small{font-size:12px}
/* C. Nigale apheresis: its own part of the section, on the page colour */
@media (max-width:1100px){.ib-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  /* one screen below the top bar and section bar (navh + 42px), content centred in what is left */
  .ib-asm__pin{min-height:100vh;min-height:100svh;justify-content:center;padding:calc(var(--navh,62px) + 42px + clamp(12px,3svh,32px)) var(--pad) clamp(12px,3svh,32px)}
  .ib-asm__copy{grid-template-columns:1fr;gap:clamp(10px,2svh,18px)}
  .ib-asm__copy h2{font-size:clamp(27px,min(8.6vw,4.8svh),42px)}
  /* phones: heading only, no logo or lede; the instruments take the rest of the screen */
  .ib-asm__pin{height:100vh;height:100svh}
  .ib-asm__side,.ib-asm__copy h2 .ln.soft{display:none}
  .ib-asm__stage{flex:1 1 auto;min-height:260px;height:auto;margin-top:clamp(8px,2svh,20px)}
  .ib-asm__note{margin-top:clamp(8px,1.6svh,16px);text-align:center}
  .ib-card figure{height:180px}
  /* Imperial range on phones: every instrument is a solid card in one stack per heading, as the FluoGene cards (site.js settles each back and hides it once covered) */
  .ib-asm__pin{justify-content:flex-start;padding-top:clamp(20px,3.6svh,34px);padding-bottom:clamp(12px,2svh,20px)}
  .ib-range{padding-top:0}
  .ib-range>.sx-head{padding-top:clamp(20px,3svh,30px)}
  .ib-range .ib-grid{display:block;overflow:visible;scroll-snap-type:none;margin-inline:0;padding:0 0 6px}
  .ib-range .ib-grid>*{flex:none}
  .ib-range .ib-card{position:sticky;top:calc(var(--navh,62px) + 46px);margin:0 0 18px;padding:14px 16px 18px;box-sizing:border-box;background:#F6F3FB;border:1px solid #D9D2E8;border-top:3px solid var(--acc);transform-origin:50% 0;will-change:transform}
  /* one fit rule for stack-card photos: as wide as the card, as tall as its own ratio, never taller than ~38% of the screen; contain, centred, never cropped or stretched */
  .ib-range .ib-card figure{height:auto;margin:6px 0 14px;padding:12px;display:flex;align-items:center;justify-content:center}
  .ib-range .ib-card figure img{width:100%;height:auto;max-width:100%;max-height:calc(38vh - 24px);max-height:calc(38svh - 24px);object-fit:contain;object-position:50% 50%}
  .ib-range .ib-card:hover figure img{transform:none}
  /* phones: no counters or model numbers on the instrument cards */
  .ib-range .ib-card__no,.ib-range .ib-card em{display:none}
}
/*<<c11*/
/*>>c12*/
/* ---------- 12 Partners and contact: pale grey-blue, cyan ---------- */
.pt{--bg:#F7F9FB;--acc:#008DCB;--line:#E1E8EE}
.pt-grid{list-style:none;margin:clamp(28px,5vh,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pt-grid li{display:flex}
.pt-grid a{flex:1;display:flex;flex-direction:column;gap:6px;padding:22px;background:#fff;border-radius:24px;color:inherit;text-decoration:none;box-shadow:0 1px 0 rgba(0,0,0,.04),0 34px 70px -52px rgba(28,28,28,.42);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.pt-grid a:hover,.pt-grid a:focus-visible{transform:translateY(-4px);box-shadow:0 1px 0 rgba(0,0,0,.04),0 44px 80px -50px rgba(0,60,100,.5)}
.pt-logo{height:78px;display:flex;align-items:center;margin-bottom:10px}
.pt-logo img{display:block;max-width:80%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pt-grid b{font:600 16px/1.25 Inter,var(--sans);color:var(--it-ink)}
.pt-grid em{font-style:normal;font:500 11.5px/1.2 'JetBrains Mono',monospace;color:#7B8794}
.pt-grid p{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:#45453F}
.pt-grid .pt-go{margin-top:auto;padding-top:12px;font:600 12px/1 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.pt-cov{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,96px);align-items:center}
.pt-map{max-width:440px;width:100%;justify-self:center}
.pt-map svg{display:block;width:100%;height:auto}
.pt-states{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pt-states li{font:500 13px/1 'JetBrains Mono',monospace;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--it-ink)}
.foot{display:block;padding:clamp(56px,9vh,96px) var(--pad) 36px}
.foot__in{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.9fr) repeat(3,minmax(0,.7fr));gap:clamp(28px,5vw,80px)}
.foot h3{font:400 clamp(34px,4vw,56px)/1.05 'Bodoni Moda',serif;letter-spacing:-.01em}
.foot h3 span{color:#8FA3B5}
.foot__lede{margin:18px 0 0;max-width:34em;font-size:17px;line-height:1.55;color:#E6EEF6}
.foot__addr{margin:18px 0 0;font-size:15px;line-height:1.6;color:#C9D6E3}
.foot__cta{display:grid;gap:0;margin-top:28px;max-width:420px;border-top:1px solid rgba(255,255,255,.18)}
.foot__cta a{display:flex;align-items:center;gap:14px;padding:16px 2px;border-bottom:1px solid rgba(255,255,255,.18);font:500 18px/1.2 Inter,var(--sans);text-decoration:none;color:#fff;transition:padding-left .25s ease,color .25s ease}
.foot__cta a:hover{padding-left:10px;color:#8FA3B5}
.foot__cta svg{width:20px;height:20px;color:#8FA3B5;flex:none}
.foot h4{margin:0 0 14px;font:600 11.5px/1 Barlow,var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#8FA3B5}
.foot nav ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot nav a{color:#E6EEF6;text-decoration:none;font-size:14.5px}
.foot nav a:hover{text-decoration:underline}
.foot__map{grid-column:2 / -1;grid-row:2;align-self:end;display:grid;gap:12px}
.foot__map iframe{display:block;width:100%;height:clamp(180px,24vh,240px);border:0;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);background:#E6EEF6}
.foot__map a{justify-self:start;display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font:600 12px/1 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase}
.foot__map a svg{width:16px;height:16px;transition:transform .3s ease}
.foot__map a:hover svg{transform:translateX(4px)}
.foot__in>div:first-child{grid-row:1 / span 2}
.foot__base{max-width:1500px;margin:clamp(36px,6vh,64px) auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:12.5px;line-height:1.6;color:#8FA3B5}
@media (max-width:1100px){.pt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.pt-cov{grid-template-columns:1fr}.foot__in{grid-template-columns:1fr}.foot__in>div:first-child{grid-row:auto}.foot__map{grid-column:auto;grid-row:auto}.pt-grid{gap:12px}.pt-grid a{padding:16px;border-radius:20px}}
@media (max-width:520px){.pt-grid{grid-template-columns:1fr}}

.pt-logo--ib{height:auto}
.pt-logo--ib img{max-height:78px;max-width:100%}
/*<<c12*/
/* ---------- footer ---------- */
.foot{background:var(--navy);color:#C9D6E3}
.foot h3{color:#fff;margin:0}

/* ---------- responsive / motion ---------- */
@media (max-width:900px){
  .nav__links{display:none}
  /* hero on phones: the film (a square-ish crop around the DNA and emblem) sits on top, the copy below */
  .hero{padding-top:var(--navh,70px)}                         /* room for the nav (padding, so the hero's white runs under it) */
  .hero__stage{position:relative;inset:auto;aspect-ratio:688/640}
  .hero .eyebrow{font-size:11px;letter-spacing:.14em;white-space:nowrap}
  .hero__video{object-position:50% 50%}
  .hero__veil{display:none}
  .hero__pin{height:auto;min-height:0;padding:14px var(--pad) 40px}
  .hero__copy{max-width:none}
  .hero h1{font-size:clamp(34px,9vw,46px);margin:14px 0 18px}
  .hero__readout{width:min(290px,78vw)}
  .hero__locus{display:none}
  .hero__seq{font-size:12px}
  .hero__small{font-size:10.5px}
  .hero__allele{font-size:17px}
  .hero__result{font-size:11px;gap:10px}
  .scroll-cue{display:none}
  .fq-kits__pin{height:100svh;min-height:600px;grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:14px;padding:calc(var(--navh,70px) + 10px) var(--pad) 3svh}
  .fq-plate{order:-1;width:100%}
  .fq-plate__frame{padding:12px;grid-template-columns:14px 1fr;grid-template-rows:16px auto;gap:4px 6px}
  .fq-plate__cols,.fq-plate__rows{font-size:9px;line-height:16px}
  .fq-plate__samples{margin:8px 12px 0 32px;height:24px}
  .fq-plate__cap{margin-top:6px;font-size:10.5px}
  .fq-kits__body .eyebrow{display:none}
  .fq-kits__body h3{font-size:clamp(23px,6.4vw,28px);margin:0}
  .fq-fams{margin-top:8px}
  .fq-fam__head{padding:9px 0}
  .fq-fam h4{font-size:16px}
  .fq-fam__body p{font-size:13.5px;line-height:1.5}
  .fq-chips{margin:8px 0 10px}
  .fq-chips li{font-size:11px;padding:5px 8px}
  .fq-range{min-height:0;display:block}
  .fq-range__bg{position:relative;height:42svh}
  .fq-range::before{background:linear-gradient(180deg,rgba(var(--it-bg-rgb),0) 0,rgba(var(--it-bg-rgb),0) 28svh,var(--it-bg) 42svh)}
  .fq-range__body{padding:0 var(--pad) 28px;margin-top:-4svh}
  .sr-sys{padding-top:64px}
  .sr-ats,.sr-maker{grid-template-columns:1fr;gap:26px}
  .sr-ats__photo{aspect-ratio:4/3.4;max-height:none;border-radius:22px}
  .sr-ats__photo img{object-position:50% 45%}
  .sr-feats{max-width:none}
  .sr-ats .stats,.sr-maker .stats{gap:12px}
  .sr-ph{border-radius:16px}
  .sr-table th,.sr-table td{padding:13px 14px;font-size:14px}
}
@media (max-width:1100px){.sr-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.sr-flow{grid-template-columns:1fr}.sr-card{padding:22px 20px 20px}}
@media (prefers-reduced-motion:reduce){
  .scroll-cue i{animation:none}
  .ecp-step .ecp-step__body{grid-template-rows:1fr}
  .ecp-step .ecp-step__body p{opacity:1}
  .pd[open]{animation:none}
  .ecp-rail{transition:none}
  *{scroll-behavior:auto!important}
}

/* ---------- all-sections index: a button in the top bar opens a list of every section ---------- */
.nav__right{display:flex;align-items:center;gap:26px}
.nav__idx{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px 0 13px;border-radius:999px;border:1.5px solid currentColor;background:transparent;color:inherit;font:600 13px/1 Inter,var(--sans);letter-spacing:.02em;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.nav__idx svg{width:17px;height:17px;flex:none}
.nav__idx:hover,.nav__idx[aria-expanded="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.nav.is-dark .nav__idx:hover,.nav.is-dark .nav__idx[aria-expanded="true"]{background:#fff;border-color:#fff;color:var(--navy)}
.nav__idx .cnt{font-variant-numeric:tabular-nums;opacity:.6;font-weight:500}
.sxi{position:fixed;inset:0;z-index:60;pointer-events:none;visibility:hidden}
.sxi.is-open{pointer-events:auto;visibility:visible}
.sxi__scrim{position:absolute;inset:0;background:rgba(11,27,43,.38);opacity:0;transition:opacity .3s}
.sxi.is-open .sxi__scrim{opacity:1}
.sxi__panel{position:absolute;top:var(--navh,72px);right:max(var(--pad),12px);width:min(420px,calc(100vw - 24px));max-height:calc(100svh - var(--navh,72px) - 20px);overflow:auto;overscroll-behavior:contain;background:#fff;color:var(--navy);border-radius:18px;box-shadow:0 30px 80px -30px rgba(11,27,43,.5),0 0 0 1px rgba(11,27,43,.07);padding:10px;opacity:0;transform:translateY(-10px);transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.sxi.is-open .sxi__panel{opacity:1;transform:none}
.sxi__title{margin:0;padding:12px 14px 8px;font:600 11px/1 Barlow,var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#6B7B8A}
.sxi__list{list-style:none;margin:0;padding:0}
.sxi__list a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;text-decoration:none;color:inherit;font-size:15px;line-height:1.3;transition:background .15s}
.sxi__list a:hover,.sxi__list a:focus-visible{background:#F1F5F9}
.sxi__list a[aria-current="true"]{background:#EAF5FB}
.sxi__list a[aria-current="true"]::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.sxi__list .t{font-weight:500}
.sxi__sep{height:1px;background:#E6ECF1;margin:6px 14px}
@media (max-width:900px){
  .nav{padding:8px var(--pad)}
  .nav__brand img{height:46px}
  .nav__right{gap:0}
  .nav__idx{height:38px;padding:0 13px 0 11px;font-size:12.5px}
  .sxi__panel{left:0;right:0;top:var(--navh,62px);width:auto;max-height:calc(100svh - var(--navh,62px));border-radius:0 0 18px 18px;padding:8px 10px 14px}
  .sxi__list a{padding:13px 12px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){.sxi__scrim,.sxi__panel{transition:none}}

/* ---------- chapter breaks: a full-height plate before every section, so the change of section is unmistakable ---------- */
.sxb{position:relative;background:var(--bgc,#F4F5F0);border-top:8px solid var(--acc);color:var(--navy);overflow:hidden}
.sxb__in{position:relative;max-width:1500px;margin:0 auto;min-height:max(62svh,460px);padding:calc(var(--navh,72px) + 4vh) var(--pad) 8vh;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(32px,6vw,110px);align-items:end}
.sxb__k{grid-column:1 / -1;margin:0;font:600 12px/1 Barlow,var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.sxb__n{font:400 clamp(150px,24vw,380px)/.78 'Bodoni Moda',serif;color:var(--acc);letter-spacing:-.02em;font-variant-numeric:lining-nums;align-self:end}
.sxb__t{align-self:end;padding-bottom:1.2vw}
.sxb__h{margin:0;font:400 clamp(38px,5.2vw,84px)/1.04 'Bodoni Moda',serif;letter-spacing:-.01em;max-width:14ch}
.sxb__d{margin:18px 0 0;max-width:34ch;font-size:clamp(16px,1.35vw,20px);line-height:1.5;color:#4C5B69}
.sxb__ticks{display:flex;gap:6px;margin-top:30px}
.sxb__ticks i{display:block;width:18px;height:4px;border-radius:2px;background:rgba(11,27,43,.14)}
.sxb__ticks i.on{background:var(--acc)}
.sxb__ticks i:last-child.on,.sxb__ticks i.on:last-of-type{}
.sxb__n,.sxb__h,.sxb__d,.sxb__ticks,.sxb__k{will-change:transform,opacity}
@media (max-width:900px){
  .sxb{border-top-width:6px}
  .sxb__in{min-height:0;grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:10px;align-items:start;padding:calc(var(--navh,62px) + 20px) var(--pad) 36px}
  .sxb__n{font-size:clamp(84px,26vw,120px);margin:0 0 0 -3px}
  .sxb__t{padding:0}
  .sxb__h{font-size:clamp(34px,9.4vw,46px);max-width:none}
  .sxb__d{margin-top:12px;font-size:16px}
  .sxb__ticks{margin-top:22px}
}

/* ---------- 01 · the bag before and under UV-A ---------- */
.ecp-uva{margin:0;justify-self:stretch;align-self:center;width:100%;--p:0}   /* the photo stands on its own: no card, no rounded frame, no shadow */
.ecp-uva__card{background:none;padding:0}
.ecp-uva__img{position:relative;aspect-ratio:3/2;overflow:hidden;background:#EFEFEA}
.ecp-uva__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ecp-uva__b{clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0)}
.ecp-uva__line{position:absolute;top:0;bottom:0;left:clamp(18px,calc(var(--p) * 100%),calc(100% - 18px));width:0;pointer-events:none}
.ecp-uva__line::before{content:'';position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#fff}
.ecp-uva__line i{position:absolute;top:50%;left:-17px;width:34px;height:34px;border-radius:50%;background:#fff;transform:translateY(-50%)}
.ecp-uva__line i::before,.ecp-uva__line i::after{content:'';position:absolute;top:50%;width:7px;height:7px;border-top:2px solid var(--uv);border-left:2px solid var(--uv);margin-top:-3.5px}
.ecp-uva__line i::before{left:9px;transform:rotate(-45deg)}
.ecp-uva__line i::after{right:9px;transform:rotate(135deg)}
.ecp-uva__tag{position:absolute;top:0;padding:10px 14px;font:500 13px/1 var(--sans);letter-spacing:.02em;background:#fff;color:var(--it-ink);transition:opacity .3s}
.ecp-uva__tag--a{left:0;opacity:calc(1 - var(--p) * 1.4)}
.ecp-uva__tag--b{right:0;background:var(--uv);color:#fff;opacity:calc((var(--p) - .45) * 2.2)}
.ecp-uva__foot{display:grid;gap:6px;padding:22px 0 0;max-width:34em}
.ecp-uva__foot b{font:400 clamp(24px,2vw,32px)/1.15 'Bodoni Moda',serif;color:var(--it-ink)}
.ecp-uva__foot span{font-size:14.5px;line-height:1.5;color:var(--it-muted)}
@media (max-width:900px){
  .ecp-dose__pin{grid-template-columns:1fr;height:auto;min-height:0;padding:56px var(--pad) 48px;gap:28px;align-items:start}
  /* phones: one full-width photo, no before/after slider, no frame, no violet */
  .ecp-uva{justify-self:stretch;width:auto;margin-inline:calc(var(--pad) * -1)}
  .ecp-uva__card{background:none;border-radius:0;padding:0;box-shadow:none}
  .ecp-uva__img{aspect-ratio:4/3;border-radius:0}
  .ecp-uva__img .ecp-uva__b,.ecp-uva__img .ecp-uva__line,.ecp-uva__img .ecp-uva__tag{display:none}
  .ecp-uva__foot{padding:22px var(--pad) 0}
  .ecp-uva__foot b{font-size:24px}
}

@media (max-width:900px){
  .ng-cap,.sx-cap{left:var(--pad);right:var(--pad);bottom:10px;white-space:normal;line-height:1.4;font-size:10.5px}
  .ib .maker img.logo{height:30px}.ib .maker img.ib-logo{height:84px}
  .ib .film__beat .maker img.logo{height:32px;border-radius:8px}
}
@media (max-width:900px){
  .dx .film .film__beat h2{font-size:clamp(26px,7vw,31px);margin:8px 0}
  .dx .film__beat .lede{font-size:14px;line-height:1.5}
  .dx .film__beat .eyebrow{font-size:10.5px;letter-spacing:.12em}
}
.nav__links a,.nav__idx{white-space:nowrap}
@media (max-width:1180px){.nav__links{display:none}}

/* ---------- phones: card groups swipe sideways (scroll-snap) instead of stacking, so the page stays short ---------- */
@media (max-width:900px){
  .sx-cards,.sr-flow,.ib-grid,.pt-grid{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);margin-inline:calc(var(--pad) * -1);padding:6px var(--pad) 22px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sx-cards::-webkit-scrollbar,.sr-flow::-webkit-scrollbar,.ib-grid::-webkit-scrollbar,.pt-grid::-webkit-scrollbar{display:none}
  .sx-cards>*,.sr-flow>*{flex:0 0 82%;scroll-snap-align:start}
  .ib-grid>*{flex:0 0 70%;scroll-snap-align:start}
  .pt-grid>*{flex:0 0 64%;scroll-snap-align:start}
}
@media (max-width:900px){.ecp-use__pin{padding-block:48px}}

/* ---------- desktop, sections 03-10: the photo is the section's background, the text sits beside it, three supporting lines below ---------- */
@media (min-width:901px){
  .film--hero{--sh:var(--bg,var(--it-bg))}
  .ng-intro.film--hero{--sh:var(--ng-bg)}
  .film--hero .film__pin{height:auto;min-height:0;overflow:visible;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto auto auto auto;column-gap:clamp(20px,2.6vw,44px);align-content:start;box-sizing:border-box;padding:calc(var(--navh,72px) + 5vh) var(--pad) 12vh;background:var(--sh)}
  /* the photo is held in place while the three supporting lines scroll past beside it */
  .film--hero .film__stage{position:sticky;top:0;grid-column:4/7;grid-row:1/5;align-self:start;height:min(94vh,900px);margin:calc(-1 * (var(--navh,72px) + 5vh)) calc(var(--pad) * -1) 0 0;overflow:hidden;background:transparent}
  .film--hero.film--flip .film__stage{grid-column:4/7}
  .film--hero .film__stage::after{display:none}
  .film--hero .film__canvas,.film--hero .sx-cap,.film--hero .ng-cap{display:none}
  .film--hero .film__still{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform;-webkit-mask-image:none;mask-image:none;transform:scale(1.06)}
  .film--hero .film__still[style*="contain"]{object-fit:contain;padding:calc(6% + var(--navh,72px)) 6% 6%;-webkit-mask-image:none;mask-image:none;mix-blend-mode:multiply;filter:none}
  .film--hero .film__still[style*="160deg"]{padding:calc(6% + var(--navh,72px)) 6% 6% 14%;-webkit-mask-image:none;mask-image:none;filter:none;mix-blend-mode:normal}
  .film--hero .film__still[style*="--cap"]{inset:0;margin:auto;width:min(100%,var(--cap));height:auto;max-height:100%}
  .film--hero .film__copy{display:contents}
  .film--hero .film__beat{position:relative;left:auto;top:auto;transform:none;width:auto;visibility:visible;pointer-events:auto;transition:none;grid-column:1/4}
  .film--hero .film__beat[data-beat="0"]{grid-row:1;min-height:calc(100vh - var(--navh,72px) - 10vh);display:flex;flex-direction:column;justify-content:center;padding-right:clamp(8px,3vw,56px)}
  .film--hero .film__beat[data-beat="0"] h2{font-size:clamp(44px,4.5vw,72px);line-height:1.03;text-wrap:balance}
  .film--hero .film__beat[data-beat="0"] .lede{max-width:34em}
  .film--hero .film__beat:not([data-beat="0"]){margin-top:clamp(28px,5vh,56px);padding:30px clamp(8px,3vw,56px) 4px 0;border-top:1px solid rgba(20,30,40,.14)}
  .film--hero .film__beat[data-beat="1"]{grid-row:2}
  .film--hero .film__beat[data-beat="2"]{grid-row:3}
  .film--hero .film__beat[data-beat="3"]{grid-row:4}
  .film--hero .film__beat:not([data-beat="0"]) .film__line{font-size:clamp(26px,2.3vw,36px);line-height:1.1}
  .film--hero .film__feats{margin-top:22px;max-width:none}
  .film--hero .film__steps{display:none}
}

/* ---------- phones: the three FluoGene families as three cards, the kit count as the headline of each ---------- */
.dt-only{display:inline}
.fq-fam em b{font-weight:inherit}
@media (max-width:900px){
  .dt-only{display:none}
  .fq-kits__pin{display:block;height:auto;min-height:0;padding:72px var(--pad) 44px}
  .fq-plate{display:none}
  .fq-kits__body h3{font-size:clamp(28px,8vw,34px);line-height:1.1;margin:0 0 26px}
  .fq-fams{display:grid;gap:16px;margin:0}
  .fq-fam,.fq-fam:last-child{--c:#E3A400;border:0;background:#fff;border-radius:26px;padding:28px 24px 22px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 34px 60px -44px rgba(60,50,20,.4);overflow:hidden}
  .fq-fam[data-fam="hpa"]{--c:#E2611B}
  .fq-fam[data-fam="rbc"]{--c:#C1121F}
  .fq-fam::before{top:0;left:0;right:0;height:5px;background:var(--c);transform:none}
  .fq-fam__head{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:0;pointer-events:none}
  .fq-fam__dot{display:none}
  .fq-fam em{order:-1;margin:0;display:flex;align-items:baseline;gap:12px;font:400 clamp(92px,27vw,120px)/.86 'Bodoni Moda',serif;color:var(--c);letter-spacing:-.02em}
  .fq-fam em span{font:600 13px/1 Barlow,var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#7A7A70}
  .fq-fam h4{font:600 22px/1.2 Inter,var(--sans);color:var(--it-ink);margin-top:8px}
  .fq-fam__body{grid-template-rows:1fr;margin-top:12px}
  .fq-fam__body>div{opacity:1}
  .fq-fam.fq-fam em,.fq-fam.is-active em{color:var(--c)}
  .fq-fam__body p{padding-left:0;font-size:15px;color:#4A4A43}
  .fq-chips{padding-left:0}
  .fq-chips{margin-top:14px}
  .fq-fam::after{content:attr(data-cap);display:block;margin-top:20px;padding-top:14px;border-top:1px solid var(--it-line);font:500 11px/1.5 'JetBrains Mono',monospace;letter-spacing:.03em;color:#6A6A62}
}

/* ---------- motion: one quiet language (see site.js, "one quiet motion language") ---------- */
#mx-progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:70;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#008DCB,#EC008B);pointer-events:none}
.mx-on .mx-head{clip-path:inset(0 0 100% 0);translate:0 .45em;transition:clip-path 1.1s cubic-bezier(.16,1,.3,1) var(--d,0s),translate 1.1s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.mx-on .mx-head.is-in{clip-path:inset(-.2em -1em -.4em -1em);translate:0 0}
.mx-on .mx-photo{clip-path:inset(9% 6% 9% 6% round 26px);opacity:.01;transition:clip-path 1.4s cubic-bezier(.16,1,.3,1) var(--d,0s),opacity .9s ease var(--d,0s)}
.mx-on .mx-photo.is-in{clip-path:inset(0 0 0 0 round 28px);opacity:1}
.mx-on .mx-rise{opacity:0;translate:0 18px;transition:opacity .9s ease var(--d,0s),translate 1s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.mx-on .mx-rise.is-in{opacity:1;translate:0 0}
@media (hover:hover){
  .sx-card,.pt-grid a{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease}
  .sx-card:hover{transform:translateY(-5px)}
}
@media (prefers-reduced-motion:reduce){.mx-on .mx-head,.mx-on .mx-photo,.mx-on .mx-rise{clip-path:none;opacity:1;translate:none;transition:none}}

/* ---------- 02 FluoQube: workflow, advantages, kit catalogue, software, HPA, ordering ---------- */
.fq-blk{max-width:1500px;margin:0 auto;padding:clamp(72px,12vh,140px) var(--pad) clamp(8px,2vh,24px)}
.fq-blk__head{max-width:760px;margin-bottom:clamp(28px,5vh,56px)}
.fq-blk__head .lede{margin:0;font-size:17px;max-width:36em;color:var(--it-muted)}
.fq-foot{margin:26px 0 0;font-size:13.5px;color:var(--it-muted)}
/* workflow */
.fq-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:s;position:relative}
.fq-steps::before{content:'';position:absolute;left:0;right:0;top:21px;height:1px;background:var(--it-line)}
.fq-steps li{position:relative;display:grid;gap:14px;align-content:start;padding-right:22px}
.fq-steps__n{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--it-bg);border:1.5px solid var(--fq-acc);color:var(--fq-acc);font:400 17px/1 'Bodoni Moda',serif}
.fq-steps h4{margin:0;font:600 18px/1.25 Inter,var(--sans)}
.fq-steps em{display:block;margin:6px 0 8px;font:400 30px/1 'Bodoni Moda',serif;font-style:normal;color:var(--fq-acc)}
.fq-steps p{margin:0;font-size:14.5px;line-height:1.55;color:#4A4A43}
.fq-time{margin:clamp(36px,6vh,60px) 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;font-size:15px;color:var(--it-muted)}
.fq-time b{font:400 26px/1 'Bodoni Moda',serif;color:var(--it-ink)}
.fq-time i{width:28px;height:1px;background:var(--it-line);align-self:center}
/* advantages */
.fq-adv{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--it-ink);border-bottom:1px solid var(--it-line)}
.fq-adv li{padding:30px clamp(18px,2vw,32px) 36px;border-left:1px solid var(--it-line)}
.fq-adv li:first-child{border-left:0;padding-left:0}
.fq-adv li:last-child{padding-right:0}
.fq-adv__n{display:flex;align-items:baseline;gap:8px;margin-bottom:clamp(26px,5vh,54px);font:400 clamp(54px,5.4vw,84px)/.9 'Bodoni Moda',serif;letter-spacing:-.02em;color:var(--it-ink)}
.fq-adv__n small{font:400 .4em/1 'Bodoni Moda',serif;letter-spacing:0;color:var(--fq-acc)}
.fq-adv b{display:block;font:600 15px/1.3 Inter,var(--sans);margin-bottom:10px;color:var(--it-ink)}
.fq-adv p{margin:0;font-size:14.5px;line-height:1.62;color:#5A5A52;max-width:34ch}
/* catalogue */
.fq-tabs{display:inline-flex;gap:6px;padding:6px;background:#fff;border-radius:999px;box-shadow:0 1px 0 rgba(0,0,0,.05),0 20px 40px -30px rgba(60,50,20,.45);margin-bottom:clamp(24px,4vh,40px)}
.fq-tabs button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:baseline;gap:10px;padding:13px 24px;border-radius:999px;font:600 15px/1 Inter,var(--sans);color:#6A6A62;transition:background .35s,color .35s}
.fq-tabs button small{font:500 11px/1 'JetBrains Mono',monospace;opacity:.7}
.fq-tabs button[aria-selected="true"]{background:var(--it-ink);color:#fff}
.fq-tabs button:focus-visible{outline:2px solid var(--fq-acc);outline-offset:2px}
.fq-panel[hidden]{display:none}
.fq-panel.is-on{animation:fqIn .6s cubic-bezier(.16,1,.3,1)}
@keyframes fqIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fq-panel__lead{margin:0 0 26px;max-width:52em;font-size:17px;line-height:1.6;color:#45453F}
.fq-kits-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--it-line)}
.fq-kit{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.7fr) minmax(190px,.6fr);gap:12px 32px;padding:24px 0;border-bottom:1px solid var(--it-line);align-items:start}
.fq-kit__n b{display:block;font:600 17px/1.3 Inter,var(--sans)}
.fq-kit__q dd{font:500 13px/1.4 'JetBrains Mono',monospace;color:var(--fq-acc)}
.fq-kit__f{display:inline-block;margin-top:8px;padding:3px 9px;border-radius:999px;background:#F1E7C4;font:600 11px/1.4 Barlow,var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#7A5F00}
.fq-kit__d{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:#4A4A43}
.fq-lc{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.fq-lc li{padding:5px 11px;border-radius:999px;border:1px solid #E4D9B2;background:#FBF6E3;font:500 12px/1.2 'JetBrains Mono',monospace;color:#5E4B00}
.fq-kit__q{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fq-kit__q dt{font:600 10.5px/1.3 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#8A8A80}
.fq-kit__q dd{margin:5px 0 0;font-size:15px;color:var(--it-ink)}
/* ---------- horizontal strips (desktop; built by site.js, buildStrip) ---------- */
.hx{max-width:none!important;margin:0!important;padding:0!important}
.hx__view{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden}
.hx__track{position:relative;display:flex;align-items:center;width:max-content;height:100%;box-sizing:border-box;padding:calc(var(--navh,74px) + 30px) var(--pad) 44px;will-change:transform}
.hx__view--tabs .hx__track{padding-top:calc(var(--navh,74px) + 76px)}
.hx__prog{position:absolute;left:var(--pad);right:var(--pad);bottom:26px;height:1px;background:var(--it-line)}
.hx__prog i{display:block;height:2px;margin-top:-.5px;background:var(--it-ink);transform-origin:left;transform:scaleX(0)}
.hx__tabs{position:absolute;z-index:3;left:var(--pad);right:var(--pad);top:calc(var(--navh,74px) + 18px);display:flex;border-bottom:1px solid var(--it-line)}
.hx__tabs button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:baseline;gap:9px;padding:14px 0 15px;margin-right:clamp(26px,3.2vw,52px);font:600 14px/1 Inter,var(--sans);color:#8A8A80;transition:color .35s;position:relative}
.hx__tabs button::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--it-ink);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hx__tabs button[aria-selected="true"]{color:var(--it-ink)}
.hx__tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.hx__tabs button:hover{color:var(--it-ink)}
.hx__tabs button small,.hx__tabs button b{font:500 11px/1 'JetBrains Mono',monospace;color:var(--acc,var(--fq-acc,#B88A00))}
.hx .sx-head,.hx .fq-blk__head{flex:none;align-self:center;width:min(540px,37vw);max-width:none;margin:0 clamp(52px,6.5vw,110px) 0 0}
.hx .sx-head h3,.hx .fq-blk__head h3{font-size:clamp(38px,3.8vw,60px)}
.hx{--hxh:clamp(380px,55vh,540px)}
.hx .sx-cards,.hx .cc-equip,.hx .ib-grid{display:flex;align-items:stretch;gap:clamp(16px,1.6vw,26px);margin:0;padding:0;grid-template-columns:none;height:var(--hxh)}
.hx .sx-card,.hx .cc-equip li,.hx .ib-grid li{flex:none;width:clamp(280px,23vw,380px);box-sizing:border-box;background:none;border-radius:0;box-shadow:none;border-top:1px solid var(--it-ink);padding:18px 0 0;transform:none!important}
.hx .cc-bag,.hx .cc-equip figure,.hx .ib-grid figure{border-radius:0}
.hx .cc-equip li,.hx .ib-grid li{gap:10px}
.hx .ib-grid figure,.hx .cc-equip figure{height:clamp(170px,29vh,290px)}
.hx .cc-bag{aspect-ratio:1.5/1}
.hx .sx-card h4,.hx .cc-equip b,.hx .ib-grid b{font-size:19px}
.hx .sx-card p,.hx .cc-equip span,.hx .ib-grid p{font-size:15.5px;line-height:1.55}
.hx .ib-grid small,.hx .sx-card__art{font-size:12.5px}
.hx .ib-h{flex:none;align-self:center;box-sizing:border-box;height:var(--hxh);width:clamp(180px,15vw,240px);margin:0 clamp(18px,2.4vw,40px) 0 clamp(36px,4.4vw,70px);padding-top:18px;border-top:1px solid var(--it-ink);font:400 clamp(30px,2.9vw,46px)/1.05 'Bodoni Moda',serif;letter-spacing:0;text-transform:none;color:var(--it-ink)}
.hx .sx-note{flex:none;align-self:flex-end;width:240px;margin:0 0 0 clamp(36px,4vw,64px);padding-top:12px;border-top:1px solid var(--it-ink)}
/* the workflow strip */
.fq-wf__pane{flex:none;display:flex;align-items:center;gap:clamp(28px,3.4vw,56px);margin-right:clamp(64px,8vw,130px)}
.fq-wf__fig{position:relative;margin:0;flex:none;width:clamp(400px,33vw,540px);height:clamp(330px,56vh,520px);background:var(--it-bg);overflow:hidden}
.fq-wf__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fq-wf__fig[data-fit="contain"] img{object-fit:contain;padding:6%}
.fq-wf__fig[data-fit="window"] img{inset:9% 6%;width:88%;height:82%;object-fit:contain;outline:1px solid rgba(28,28,28,.16)}
.fq-wf__fig[data-fit="result"]{display:flex;align-items:center}
.fq-wf__txt{flex:none;width:clamp(280px,23vw,370px)}
.fq-wf__txt h4{margin:0;font:400 clamp(28px,2.6vw,40px)/1.1 'Bodoni Moda',serif}
.fq-wf__txt em{display:block;margin-top:10px;font:500 12px/1 'JetBrains Mono',monospace;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--fq-acc)}
.fq-wf__txt p{margin:16px 0 0;font-size:16.5px;line-height:1.65;color:#4A4A43}
/* the range as a horizontal strip (desktop): the vertical scroll moves the kits sideways; built by site.js */
.fq-panel__intro{display:contents}
.fq-panel__t{display:none}
.fq-cat--h{max-width:none;margin:0;padding:0}
.fq-cat--h .fq-cat__view{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--it-bg)}
.fq-cat--h .fq-tabs{position:absolute;z-index:3;left:var(--pad);right:var(--pad);top:calc(var(--navh,74px) + 18px);display:flex;gap:0;margin:0;padding:0;border-radius:0;background:none;box-shadow:none;border-bottom:1px solid var(--it-line)}
.fq-cat--h .fq-tabs::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--it-ink);transform:scaleX(var(--p,0));transform-origin:left}
.fq-cat--h .fq-tabs button{padding:14px 0 15px;margin-right:clamp(28px,3.4vw,56px);border-radius:0;color:#8A8A80;background:none;font:600 14px/1 Inter,var(--sans)}
.fq-cat--h .fq-tabs button[aria-selected="true"]{background:none;color:var(--it-ink)}
.fq-cat--h .fq-tabs button:hover{color:var(--it-ink)}
.fq-cat--h .fq-cat__track{position:relative;display:flex;align-items:center;width:max-content;height:100%;box-sizing:border-box;padding:calc(var(--navh,74px) + 64px) var(--pad) 0;will-change:transform}
.fq-cat--h .fq-blk__head{flex:none;align-self:flex-start;width:min(600px,42vw);margin:0 clamp(64px,8vw,140px) 0 0;padding-top:18px}
.fq-cat--h .fq-panel,.fq-cat--h .fq-panel.is-on{display:flex;flex:none;align-items:stretch;animation:none}
.fq-cat--h .fq-panel__intro{display:flex;flex-direction:column;justify-content:space-between;flex:none;width:clamp(300px,26vw,400px);padding:0 clamp(32px,3.4vw,60px) 0 0;border-top:1px solid var(--it-ink)}
.fq-cat--h .fq-panel__t{display:block;margin:18px 0 0;font:400 clamp(60px,6.6vw,108px)/.92 'Bodoni Moda',serif;letter-spacing:-.02em}
.fq-cat--h .fq-panel__t small{display:block;margin-top:14px;font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--fq-acc)}
.fq-cat--h .fq-panel__lead{margin:0;max-width:30ch;font-size:15px;line-height:1.62;color:#5A5A52}
.fq-cat--h .fq-kits-list{display:flex;border:0;height:clamp(340px,48vh,440px)}
.fq-cat--h .fq-kit{display:grid;grid-template-columns:none;grid-template-rows:auto 1fr auto;gap:18px;flex:none;width:clamp(250px,19vw,310px);box-sizing:border-box;padding:20px clamp(20px,2vw,30px) 0;border-top:1px solid var(--it-ink);border-bottom:0;border-left:1px solid var(--it-line)}
.fq-cat--h .fq-kit__n b{font-size:17px}
.fq-cat--h .fq-kit__b{min-height:0}
.fq-cat--h .fq-kit__q{align-self:end;grid-template-columns:auto auto;justify-content:start;gap:14px 26px;padding:16px 0 6px;border-top:1px solid var(--it-line)}
.fq-cat--h .fq-kit__q dt{white-space:nowrap;font-size:10px;letter-spacing:.07em}
.fq-cat--h .fq-kit__q dd{margin:6px 0 0;font:400 28px/1 'Bodoni Moda',serif;color:var(--it-ink);white-space:nowrap}
.fq-cat--h .fq-panel + .fq-panel .fq-panel__intro{margin-left:clamp(24px,3vw,56px)}
.fq-cat--h .fq-lc li{border-radius:0;background:none;border:1px solid var(--it-line);color:#4A4A43}
.fq-cat--h .fq-kit__f{border-radius:0;background:none;border:1px solid var(--it-line);color:var(--fq-acc)}
.fq-cat--h .fq-foot{flex:none;align-self:flex-end;width:280px;margin:0 0 0 clamp(48px,6vw,96px);padding-top:14px;border-top:1px solid var(--it-ink)}
/* software */
.fq-sw__cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fq-sw__cards li{padding:30px 28px;border-top:1px solid var(--it-ink)}
.fq-sw__cards b{display:block;font:400 28px/1.1 'Bodoni Moda',serif;margin-bottom:14px}
.fq-sw__cards p{margin:0;font-size:15.5px;line-height:1.65;color:#45453F}
/* HPA */
.fq-routes{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(28px,5vh,48px)}
.fq-routes>div{padding:28px;background:#fff;border-radius:24px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 34px 60px -46px rgba(60,50,20,.4)}
.fq-routes>div:nth-child(2){border-top:4px solid var(--fq-acc)}
.fq-routes b{display:block;font:400 26px/1.1 'Bodoni Moda',serif;margin-bottom:14px}
.fq-routes ul{margin:0;padding-left:18px;font-size:15px;line-height:1.65;color:#45453F}
.fq-routes li+li{margin-top:6px}
/* ordering and history */
@media (max-width:1100px){.fq-adv{grid-template-columns:repeat(2,minmax(0,1fr))}.fq-adv li:nth-child(odd){border-left:0;padding-left:0}.fq-adv li:nth-child(even){padding-right:0}.fq-adv li:nth-child(n+3){border-top:1px solid var(--it-line)}.fq-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px}.fq-steps::before{display:none}.fq-kit{grid-template-columns:1fr 1.5fr}.fq-kit__q{grid-column:1/-1;max-width:360px}}
@media (max-width:900px){
  .fq-blk{padding:60px var(--pad) 4px}
  .fq-blk__head{margin-bottom:28px}
  .fq-blk__head .lede{font-size:15.5px}
  .fq-steps{display:grid;grid-template-columns:1fr;row-gap:0}
  .fq-steps li{grid-template-columns:44px 1fr;gap:0 16px;padding:0 0 28px}
  .fq-steps li::after{content:'';position:absolute;left:21px;top:46px;bottom:2px;width:2px;background:var(--it-line)}
  .fq-steps li:last-child{padding-bottom:0}.fq-steps li:last-child::after{display:none}
  .fq-steps em{font-size:26px;margin:2px 0 6px}
  .fq-time{display:none}
  .fq-adv{grid-template-columns:1fr}
  .fq-adv li,.fq-adv li:nth-child(n){display:grid;grid-template-columns:96px 1fr;column-gap:16px;align-items:start;padding:22px 0;border-left:0;border-top:1px solid var(--it-line)}
  .fq-adv li:first-child{border-top:0}
  .fq-adv__n{grid-row:1/3;margin:0;flex-direction:column;align-items:flex-start;gap:6px;font-size:44px}
  .fq-adv b{margin:2px 0 6px}
  .fq-adv p{max-width:none}
  .fq-tabs{display:flex;width:100%;box-sizing:border-box}
  .fq-tabs button{flex:1;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;font-size:14px}
  .fq-panel__lead{font-size:15.5px}
  .fq-kit{grid-template-columns:1fr;gap:10px;padding:22px 0}
  .fq-kit__q{max-width:none}
  .fq-sw__cards,.fq-routes{grid-template-columns:1fr}
  .fq-sw__cards li{padding:24px 0 22px}
}

.film__still{backface-visibility:hidden;transform:translateZ(0)}

/* ---------- phones: the kit catalogue is one compact page; the tab bar stays pinned under the section bar ---------- */
@media (max-width:900px){
  .fq-cat{padding-bottom:36px}
  .fq-cat .fq-blk__head .lede{display:none}
  .fq-tabs{position:sticky;top:calc(var(--navh,62px) + 42px + 8px);z-index:20;margin-bottom:14px;box-shadow:0 1px 0 rgba(0,0,0,.05),0 14px 28px -14px rgba(60,50,20,.35)}
  .fq-panel__lead{font-size:14px;line-height:1.5;margin-bottom:12px}
  .fq-kits-list{border-top:0;display:grid;gap:8px}
  .fq-kit{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'n q' 'b b';gap:0 12px;padding:12px 14px;background:#fff;border:0;border-radius:16px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 18px 30px -26px rgba(60,50,20,.5);cursor:pointer;align-items:center;-webkit-tap-highlight-color:transparent}
  .fq-kit__n{grid-area:n}.fq-kit__q{grid-area:q;grid-template-columns:auto auto;gap:14px;text-align:right}
  .fq-kit__b{grid-area:b;display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1)}
  .fq-kit__b>*{overflow:hidden;min-height:0}
  .fq-kit.is-open .fq-kit__b{grid-template-rows:1fr;padding-top:10px}
  .fq-kit__n b{font-size:14.5px;line-height:1.25}
  .fq-kit__f{margin-top:5px;font-size:10px}
  .fq-kit__q dt{display:none}
  .fq-kit__q dd{margin:0;font:500 13px/1 'JetBrains Mono',monospace}
  .fq-kit__q>div+div dd::before{content:'/ ';color:#B8B8AE}
  .fq-kit::after{content:'';position:absolute}
  .fq-kit{position:relative}
  .fq-foot{display:none}
}

@media (max-width:900px){
  /* the catalogue is one self-contained screen: the bar stays, the list scrolls inside its own frame */
  .fq-panel{max-height:calc(100svh - var(--navh,62px) - 42px - 118px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -6px;padding:0 6px 14px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent)}
  .fq-panel::-webkit-scrollbar{display:none}
  .fq-panel__lead{display:none}
  .fq-kit{padding:11px 14px}
}


.film__turn{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;pointer-events:none;opacity:0;transition:opacity .8s ease}
.is-turning .film__turn{opacity:1}
.film__still{transition:opacity .8s ease}
@media (max-width:900px){
  .ecp-intro .film__stage{height:calc(100vw * .775)}
  .fq-intro .film__stage{height:calc(100vw * .8)}
  /* the BEXS 12 render: shown whole on the section colour, the text starts below it */
  .ex-intro .film__stage{height:calc(100vw * .96);margin-top:6px}
  .ex-intro .film__still{object-fit:contain;object-position:50% 50%;transform:none;-webkit-mask-image:none;mask-image:none}
  .ex-intro .film__copy{margin-top:0;padding-top:calc(var(--navh,62px) + 8px)}
  .ex-turn{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity .5s ease}
  .ex-intro .is-turning .ex-turn,.ex-intro .film__stage.is-turning .ex-turn{opacity:1}
  .ex-intro .film__stage.is-turning .film__still{opacity:0}
}
@media (min-width:901px){.film__turn{display:none}}

/* ---------- 02 workflow: the steps light up as you scroll while the picture beside them changes (same idea as section 01) ---------- */
.fq-wf__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,110px);align-items:start}
.fq-wf__visual{position:sticky;top:calc(var(--navh,72px) + 5vh);height:min(72vh,680px);display:grid;grid-template-rows:minmax(0,1fr) auto;background:var(--it-bg);overflow:hidden}
.fq-wf__stage{position:relative;min-height:0}
.fq-wf__layer{position:absolute;inset:0;opacity:0;background:var(--it-bg);transition:opacity .7s cubic-bezier(.4,0,.2,1)}
.fq-wf__layer.is-on{opacity:1}
.fq-wf__layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fq-wf__layer[data-fit="contain"]{background:var(--it-bg)}
.fq-wf__layer[data-fit="contain"] img{object-fit:contain;padding:6%}
.fq-wf__layer[data-fit="window"]{background:var(--it-bg)}
.fq-wf__layer[data-fit="window"] img{inset:8% 7%;width:86%;height:84%;object-fit:contain;object-position:50% 50%!important;outline:1px solid rgba(28,28,28,.16)}
.fq-wf__layer[data-fit="result"]{display:flex;align-items:center;padding:0 clamp(16px,3vw,44px)}
/* the result step: the typing result set in the page's own type on the section colour, not a screenshot in a frame */
.fq-res{width:100%;color:var(--it-ink)}
.fq-res__h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 clamp(8px,1.4vh,16px);padding-bottom:clamp(8px,1.2vh,14px);border-bottom:1px solid var(--it-ink)}
.fq-res__h b{font:400 clamp(22px,2vw,32px)/1.05 'Bodoni Moda',serif}
.fq-res__h span,.fq-res__f span{font:600 10.5px/1.2 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--fq-acc)}
.fq-res__t{width:100%;border-collapse:collapse;font:500 clamp(12.5px,1vw,15px)/1 'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
.fq-res__t th,.fq-res__t td{padding:clamp(5px,.95vh,9px) 0;border-bottom:1px solid rgba(28,28,28,.12);text-align:left;white-space:nowrap}
.fq-res__t th{font:600 clamp(10.5px,.8vw,12px)/1 'JetBrains Mono',monospace;letter-spacing:.08em;color:#6A6A62;width:30%}
.fq-res__t td{width:35%}
.fq-res__f{display:flex;gap:18px;flex-wrap:wrap;margin:clamp(10px,1.6vh,18px) 0 0}
.fq-res__f span{color:#6A6A62}
.fq-res__f .fq-res__ok{color:#2E7D4F}
.fq-res__ok::before{content:'';display:inline-block;width:7px;height:7px;margin-right:7px;background:currentColor;vertical-align:1px}
.fq-wf__time{position:absolute;left:0;top:0;display:flex;align-items:baseline;gap:8px;padding:16px 24px 18px 28px;background:var(--it-bg);color:var(--it-ink)}
.fq-wf__time b{font:400 clamp(44px,4.4vw,66px)/.9 'Bodoni Moda',serif;letter-spacing:-.02em}
.fq-wf__time small{font:400 clamp(20px,1.9vw,28px)/1 'Bodoni Moda',serif;letter-spacing:0;color:var(--fq-acc)}
.fq-wf__foot{display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);padding:16px 28px 18px;background:var(--it-bg);border-top:1px solid var(--it-ink)}
.fq-wf__num{display:flex;align-items:baseline;gap:14px;flex:none}
.fq-wf__num b{font:400 clamp(34px,3.2vw,48px)/.9 'Bodoni Moda',serif;color:var(--it-ink)}
.fq-wf__num span{font:600 11px/1.2 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--fq-acc);white-space:nowrap}
.fq-wf__bar{flex:1;display:flex;gap:3px;min-width:60px}
.fq-wf__bar i{display:block;height:6px;background:#D8D8CE;transition:background .5s}
.fq-wf__bar i.is-done{background:#7A7A70}
.fq-wf__bar i.is-on{background:var(--fq-acc)}
.fq-steps2{list-style:none;margin:0;padding:0}
.fq-st{display:grid;grid-template-columns:52px 1fr;gap:0 22px;min-height:clamp(260px,46vh,420px);padding-top:10px;position:relative}
.fq-st::before{content:'';position:absolute;left:25px;top:50px;bottom:-10px;width:2px;background:var(--it-line)}
.fq-st:last-child::before{display:none}
.fq-st.is-done::before{background:var(--fq-acc)}
.fq-st__n{display:grid;place-items:center;width:52px;height:52px;position:relative;z-index:1}
.fq-st__n::after{content:'';width:14px;height:14px;border:1.5px solid #CFC9B0;background:var(--it-bg);transition:background .5s,border-color .5s}
.fq-st.is-done .fq-st__n::after{border-color:var(--fq-acc)}
.fq-st.is-active .fq-st__n::after{background:var(--fq-acc);border-color:var(--fq-acc)}
.fq-st h4{margin:12px 0 0;font:400 clamp(26px,2.4vw,38px)/1.1 'Bodoni Moda',serif;color:#9A9A90;transition:color .5s}
.fq-st em{display:block;margin:8px 0 0;font:400 20px/1 'Bodoni Moda',serif;font-style:normal;color:var(--fq-acc);opacity:.5;transition:opacity .5s}
.fq-st p{margin:12px 0 0;max-width:30em;font-size:16px;line-height:1.65;color:#8A8A80;transition:color .5s}
.fq-st.is-active h4,.fq-st.is-done h4{color:var(--it-ink)}
.fq-st.is-active em{opacity:1}
.fq-st.is-active p{color:#3F3F39}
@media (max-width:900px){
  .fq-wf__grid{grid-template-columns:1fr;gap:0}
  .fq-wf__visual{top:calc(var(--navh,62px) + 42px + 8px);height:36svh;min-height:250px;z-index:5;margin:0 0 18px}
  .fq-wf__time{padding:10px 14px 12px 16px;gap:6px}.fq-wf__time b{font-size:30px}.fq-wf__time small{font-size:18px}
  .fq-wf__foot{padding:10px 16px 12px;gap:12px}.fq-wf__num b{font-size:28px}.fq-wf__num span{font-size:9.5px}
  .fq-wf__bar i{height:5px}
  .fq-st{min-height:34svh;grid-template-columns:44px 1fr;gap:0 16px}
  .fq-st__n{width:44px;height:44px}.fq-st::before{left:21px;top:46px}
  .fq-res__h{margin-bottom:4px;padding-bottom:6px}.fq-res__h b{font-size:19px}.fq-res__t{font-size:11.5px}.fq-res__t th{font-size:10px}.fq-res__t th,.fq-res__t td{padding:3px 0}.fq-res__f{margin-top:6px}
  .fq-st h4{font-size:26px;margin-top:8px}.fq-st p{font-size:15px}
  /* phones: each step is its picture, shown whole, with the name and one line beneath (the layer is moved into its step by site.js) */
  .fq-wf__visual{display:none}
  .fq-steps2{display:block}
  .fq-st{display:block;min-height:0;padding:0 0 40px}
  .fq-st::before,.fq-st__n,.fq-st em{display:none}
  .fq-st .fq-wf__layer{position:relative;inset:auto;opacity:1;aspect-ratio:4/3;margin:0 0 16px;transition:none}
  .fq-st .fq-wf__layer[data-fit="result"]{aspect-ratio:auto;padding:18px var(--pad,20px)}
  .fq-st h4{margin:0;color:var(--it-ink)}
  .fq-st p{margin:8px 0 0;color:#4A4A43}
}

/* ---------- phones: product-first hero in the style of a keynote product page: centred headline, two pill buttons, the product large beneath ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px;border-radius:999px;border:1px solid var(--pc,#008DCB);font:500 16px/1 Inter,var(--sans);letter-spacing:-.005em;text-decoration:none;color:var(--pc,#008DCB);background:transparent;transition:background .3s,color .3s,transform .3s}
.pill--solid{background:var(--pc,#008DCB);color:#fff}
.pill:active{transform:scale(.97)}

@media (hover:hover){.pill:hover{background:var(--pc,#008DCB);color:#fff}.pill--solid:hover{filter:brightness(.92)}}
@media (max-width:900px){
  .film__pin{display:flex;flex-direction:column}
  .film__copy{order:1;text-align:center;padding:calc(var(--navh,62px) + 42px + 34px) var(--pad) 10px}
  .film__stage{order:2;margin-top:-6px}
  .film__copy .eyebrow{justify-content:center}
  .film__copy .film__beat h2{font-size:clamp(34px,10vw,44px);line-height:1.05;margin:14px 0 10px;letter-spacing:-.015em}
  .film__copy .film__beat .lede{font-size:17px;line-height:1.45;margin:0 auto;max-width:21em;color:#6E6E73}
  .film__copy .maker{justify-content:center}
  .film__cta{justify-content:center;margin:20px 0 6px}
  .film__still,.film__turn{will-change:transform}
}
@media (min-width:901px){.film__cta{margin-top:26px}}

/* ---------- one intro per section: the chapter plate (big numeral and title) is collapsed; it stays in the page only as the anchor the section links jump to. The intro itself carries the number and name. ---------- */
.sxb{height:0;min-height:0;margin:0;padding:0;border:0;overflow:hidden}
.sxb__in{display:none}

/* ---------- phones: the turning product stands in a lit stage (dark graphite for the white Lumilight, warm gold for the black FluoQube) ---------- */
.turn-stage{background:var(--sh)}
@media (max-width:900px){
  .film__stage.turn-stage{margin-top:6px;height:calc(100vw * 1.12)!important;overflow:hidden}
  .turn-dark{background:radial-gradient(70% 55% at 50% 46%,#3a4150 0,#1b1f27 48%,#0b0d11 100%)}
  .turn-gold{background:radial-gradient(70% 55% at 50% 46%,#F7D56A 0,#D9A31B 48%,#8A5E00 100%)}
  .turn-stage::before{content:'';position:absolute;left:50%;top:78%;width:92%;height:34%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.16),rgba(255,255,255,0));pointer-events:none}
  .turn-gold::before{background:radial-gradient(closest-side,rgba(255,244,190,.5),rgba(255,244,190,0))}
  .turn-stage .film__still{display:none}
  .turn-hint{position:absolute;left:0;right:0;top:14px;text-align:center;font:600 10.5px/1 Barlow,var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);transition:opacity .6s;pointer-events:none}
  .turn-gold .turn-hint{color:rgba(30,20,0,.6)}
  .ecp-intro .film__stage.turn-stage,.fq-intro .film__stage.turn-stage{height:calc(100vw * 1.12)!important}
}

.turn-read{position:absolute;left:0;right:0;bottom:16px;text-align:center;font:500 11px/1 'JetBrains Mono',monospace;color:rgba(255,255,255,.55);pointer-events:none}
.turn-gold .turn-read{color:rgba(30,20,0,.6)}
.film__turn{will-change:contents;transform:translateZ(0);-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

/* ---------- desktop: fuller screens (type sized to the space it has) ---------- */
@media (min-width:901px){
  .film--hero .film__beat[data-beat="0"] h2{font-size:clamp(50px,5.3vw,88px)}
  .film--hero .film__beat[data-beat="0"] .lede{font-size:clamp(17px,1.3vw,21px);max-width:30em}
  .film--hero .film__beat:not([data-beat="0"]) .film__line{font-size:clamp(30px,3vw,48px)}
  .film--hero .film__feats{max-width:620px}
  .film--hero .film__feats li{grid-template-columns:26px 1fr;column-gap:18px;padding:18px 0}
  .film--hero .film__feats svg{width:26px;height:26px}
  .film--hero .film__feats b{font-size:clamp(16px,1.2vw,19px)}
  .film--hero .film__feats span{font-size:clamp(14.5px,1.05vw,17px);line-height:1.55}
  .ecp-group h4{flex-direction:column;align-items:flex-start;gap:16px;font-size:13px}
  .ecp-group h4 span{font-size:clamp(60px,6.4vw,104px);line-height:.8;letter-spacing:-.02em}
  .ecp-group li{padding:14px 0;font-size:clamp(16px,1.2vw,19px)}
  .ecp-use__head h3{font-size:clamp(40px,4.2vw,68px)}
  .fq-cat--h .fq-kits-list{height:clamp(400px,58vh,560px)}
  .fq-cat--h .fq-kit{width:clamp(270px,21vw,330px)}
  .fq-cat--h .fq-kit__n b{font-size:20px}
  .fq-cat--h .fq-kit__d{font-size:15.5px}
  .fq-cat--h .fq-lc li{font-size:12.5px;padding:6px 11px}
  .fq-cat--h .fq-kit{grid-template-columns:minmax(0,1fr)}
  .fq-cat--h .fq-kit__q dd{font-size:36px}
  .fq-cat--h .fq-kit__q dd.is-long{font:500 14px/1.35 'JetBrains Mono',monospace;white-space:normal;margin-top:8px}
  .fq-cat--h .fq-kit__q dt{font-size:10.5px}
  .fq-cat--h .fq-panel__lead{font-size:16.5px}
}
@media (min-width:901px){
  .fq-blk{padding-top:clamp(56px,8vh,100px)}
  .sx-block{padding-top:clamp(40px,7vh,90px);padding-bottom:clamp(16px,3vh,36px)}
  .sx-block[style*="padding-top"]{padding-top:clamp(32px,5vh,60px)!important}
}
/* ECP indications as a strip */
.hx .ecp-use__head{flex:none;align-self:center;width:min(600px,40vw);max-width:none;margin:0 clamp(52px,6.5vw,110px) 0 0}
.hx .ecp-use__head h3{font-size:clamp(38px,3.8vw,62px)}
.hx .ecp-group{flex:none;align-self:center;height:clamp(360px,54vh,500px);width:clamp(290px,24vw,380px);box-sizing:border-box;padding:18px clamp(20px,2vw,32px) 0 0;border-top:1px solid var(--it-ink);margin-right:clamp(10px,1.4vw,22px)}
.ecp-use__pin.hx{display:block;height:auto;min-height:0}

/* ---------- desktop, sections 03-10: the photo stays; the lines change beside it (slide, rise or stack; site.js, heroFilm) ---------- */
@media (min-width:901px){
  .film--hero.hf{--hfg:clamp(16px,2vw,40px);--hfl:var(--pad);--hfr:clamp(28px,3vw,56px)}
  .film--hero.hf--flip{--hfl:clamp(28px,3vw,56px);--hfr:var(--pad)}
  .film--hero.hf .film__pin{display:block;position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;padding:0}
  .film--hero.hf .film__stage{position:absolute;top:0;right:0;left:auto;width:46%;height:100%;margin:0;grid-column:auto;grid-row:auto}
  .film--hero.hf--flip .film__stage{right:auto;left:0}
  .film--hero.hf .film__copy{display:block;position:absolute;left:0;top:0;transform:none;height:100%;width:calc(54% - var(--hfg));overflow:hidden}
  .film--hero.hf--flip .film__copy{left:auto;right:0}
  .film--hero.hf--slide .film__copy{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--hfl));mask-image:linear-gradient(90deg,transparent 0,#000 var(--hfl))}
  .film--hero.hf .hf__track{display:flex;height:100%;width:max-content;will-change:transform}
  .film--hero.hf .film__beat,.film--hero.hf .film__beat[data-beat]{position:relative;left:auto;top:auto;transform:none;flex:0 0 var(--hfw,40vw);width:var(--hfw,40vw);height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;justify-content:safe center;visibility:visible;pointer-events:auto;transition:none;grid-column:auto;grid-row:auto;min-height:0;margin:0;border-top:0;padding:calc(var(--navh,72px) + 2vh) var(--hfr) 9vh var(--hfl)}
  @media (max-height:780px){.film--hero.hf .film__beat,.film--hero.hf .film__beat[data-beat]{padding-bottom:4vh}.film--hero.hf .hf__no{font-size:clamp(48px,8vh,64px);margin-bottom:14px}}   /* short screens: a tall beat grows downwards, never up under the fixed nav */
  .film--hero.hf--rise .hf__track,.film--hero.hf--stack .hf__track{position:absolute;inset:0;display:block;width:auto}
  .film--hero.hf--rise .film__beat,.film--hero.hf--rise .film__beat[data-beat]{position:absolute;inset:0;width:auto;height:auto;flex:none}
  .film--hero.hf--stack .film__beat,.film--hero.hf--stack .film__beat[data-beat]{position:absolute;inset:calc(var(--navh,72px) + 4vh) var(--hfr) 7vh var(--hfl);width:auto;height:auto;flex:none;padding:clamp(28px,3vw,52px);border:1px solid var(--it-line);background:var(--sh);background:color-mix(in srgb,var(--sh) 50%,#fff);transform-origin:50% 0;will-change:transform}
  .film--hero.hf .film__steps{display:flex;position:absolute;left:var(--hfl);bottom:clamp(24px,5vh,48px);z-index:3}
  .film--hero.hf--flip .film__steps{left:calc(46% + var(--hfg) + var(--hfl))}
  .film--hero.hf .film__steps li{width:56px}
  .film--hero.hf--stack .film__steps{display:none}
  .film--hero.hf--rise .film__steps{flex-direction:column;left:calc(54% - var(--hfg) - 30px);top:50%;bottom:auto;transform:translateY(-50%)}
  .film--hero.hf--rise.hf--flip .film__steps{left:calc(46% + var(--hfg) + 16px)}
  .film--hero.hf--rise .film__steps li{width:2px;height:44px}
  .film--hero.hf--rise .film__steps li::after{transform:scaleY(var(--f,0));transform-origin:top}
  .hf__no{display:flex;align-items:baseline;gap:8px;margin-bottom:clamp(18px,3.6vh,38px);font:400 clamp(72px,8vw,128px)/.8 'Bodoni Moda',serif;letter-spacing:-.03em;color:var(--it-ink);opacity:0;transform:translateY(18px);transition:opacity .7s .1s,transform .9s cubic-bezier(.16,1,.3,1) .1s}
  .hf__no small{font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.1em;color:#8A8A80}
  .film__beat.is-on .hf__no{opacity:1;transform:none}
  .film--hero.hf .film__beat:not([data-beat="0"]) .film__line{font-size:clamp(34px,3.5vw,60px);line-height:1.06}
  .film--hero.hf .film__feats{max-width:none;margin-top:clamp(24px,4vh,44px)}
  .film--hero.hf .film__feats li{padding:clamp(16px,2.4vh,24px) 0}
  .film--hero.hf .film__feats b{font-size:clamp(17px,1.35vw,22px)}
  .film--hero.hf .film__feats span{font-size:clamp(15px,1.1vw,18px)}
  .film--hero.hf .film__beat[data-beat="0"] h2{font-size:clamp(52px,5.6vw,96px)}
  .film--hero.hf--stack .film__beat[data-beat="0"] h2{font-size:clamp(46px,4.8vw,80px)}
  .film--hero.hf--stack .hf__no{font-size:clamp(56px,6vw,96px)}
}

/* ---------- desktop: the ECP indications as a spotlight, the cold chain as a stack of panels, flat cards ---------- */
@media (min-width:901px){
  .ecp-use.is-spot .ecp-use__pin{height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,7vw,120px);align-items:start;padding:14vh var(--pad) 10vh}
  .ecp-use.is-spot .ecp-use__head{position:sticky;top:calc(var(--navh,74px) + 14vh);max-width:none}
  .ecp-use.is-spot .ecp-use__head h3{font-size:clamp(38px,3.9vw,64px)}
  .ecp-use.is-spot .ecp-use__groups{display:block;margin-top:0}
  .ecp-use.is-spot .ecp-use__groups::before{display:none}
  .ecp-use.is-spot .ecp-group{min-height:58vh;display:flex;flex-direction:column;justify-content:center;padding:0;border-top:1px solid var(--it-line);opacity:.22;transition:opacity .6s ease}
  .ecp-use.is-spot .ecp-group:first-child{border-top-color:var(--it-ink)}
  .ecp-use.is-spot .ecp-group.is-lit{opacity:1}
  .ecp-use.is-spot .ecp-group h4 span{font-size:clamp(72px,8vw,128px)}
  .ecp-use.is-spot .ecp-group li{font-size:clamp(17px,1.4vw,22px);padding:14px 0}
  .cc-equip.cc-stack{display:block;margin-top:clamp(28px,5vh,52px);padding-bottom:4vh}
  .cc-equip.cc-stack li{position:sticky;top:calc(var(--navh,74px) + 3vh + var(--i,0) * 26px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:clamp(28px,4vw,72px);row-gap:12px;align-content:center;height:min(56vh,480px);margin:0 0 5vh;padding:clamp(22px,2.6vw,40px);background:var(--bg);border:1px solid var(--line);border-top:1px solid var(--it-ink);border-radius:0;box-shadow:none}
  .cc-equip.cc-stack li::before{content:attr(data-n);position:absolute;right:clamp(22px,2.6vw,40px);top:clamp(18px,2vw,30px);font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.1em;color:#8A8A80}
  .cc-equip.cc-stack figure{grid-column:1;grid-row:1/4;height:100%;border-radius:0;background:transparent}
  .cc-equip.cc-stack .sx-tag{grid-column:2;grid-row:1;align-self:end;margin:0;padding:0;background:none;border-radius:0;font:500 14px/1 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:none;color:var(--acc)}
  .cc-equip.cc-stack b{grid-column:2;grid-row:2;font:400 clamp(30px,2.9vw,46px)/1.08 'Bodoni Moda',serif;color:var(--it-ink)}
  .cc-equip.cc-stack li>span:not(.sx-tag){grid-column:2;grid-row:3;align-self:start;font-size:clamp(15.5px,1.2vw,19px);line-height:1.6;max-width:30em}
  /* flat: no rounded boxes, no shadows */
  .sx-card,.ng-panel,.fq-plate__frame{box-shadow:none;border-radius:0}
  .sx-card{background:transparent;border-top:1px solid var(--it-ink);padding:22px 6px 10px 0}
  .sx-card--main{box-shadow:none;border-top:3px solid var(--acc)}
  .ng-panel,.fq-plate__frame{border:1px solid var(--it-line)}
  .sx-table,.ng-table{box-shadow:none;border-radius:0;background:transparent;border-top:1px solid var(--it-ink)}
  .sx-photo,.ng-shot--ui,.sr-ats__photo{border-radius:0;box-shadow:none}
  .mx-on .mx-photo{clip-path:inset(9% 6% 9% 6%)}
  .mx-on .mx-photo.is-in{clip-path:inset(0 0 0 0)}
  .pt-grid a{box-shadow:none;border-radius:0}
}
@media (min-width:901px){.cc-bag{border-radius:0}.sx-card__img{mix-blend-mode:normal}}
@media (min-width:901px){
  .sx-table thead th:first-child,.sx-table tbody th:first-child{background:var(--bg,transparent)}
  .sx-table th,.sx-table td,.ng-table th,.ng-table td{padding-left:0}
  .sx-table th:not(:first-child),.sx-table td:not(:first-child),.ng-table th:not(:first-child),.ng-table td:not(:first-child){padding-left:18px}
  .sx-table tbody tr,.ng-table tbody tr{transition:background .3s}
  .sx-table tbody tr:hover,.ng-table tbody tr:hover{background:color-mix(in srgb,var(--acc,#999) 6%,transparent)}
  .sx-table tbody tr:hover th:first-child{background:color-mix(in srgb,var(--acc,#999) 6%,var(--bg,#fff))}
}
@media (min-width:901px){.film--hero.hf .film__stage{contain:paint;transform:translateZ(0)}.film--hero.hf .film__copy{contain:paint}}

/* phones: the three family cards are replaced by the kit deck (site.js, buildDeck) */
@media (max-width:900px){.fq-kits{display:none}}

/* ---------- FluoGene kit cards: each card maps what the kit detects (lit cells), with the plate layout and the test counts ---------- */
.fq-kit__tag{display:block;margin:0 0 14px;font:500 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#8A8A80}
.fq-kit__n small{display:block;font:500 12.5px/1.2 Inter,var(--sans);letter-spacing:.02em;color:#7A7A70}
.fq-kit__n b{display:block;margin-top:4px}
.fq-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.fq-map--hpa,.fq-map--rbc{grid-template-columns:repeat(4,minmax(0,1fr))}
.fq-map i{display:grid;place-items:center;min-height:32px;padding:0 2px;border:1px dashed #D3D3C8;font:500 10.5px/1 'JetBrains Mono',monospace;font-style:normal;letter-spacing:-.01em;color:#B2B2A8;white-space:nowrap}
.fq-map i.on{border:1px solid var(--c);background:var(--c);color:var(--ct,#1C1C1C);font-weight:600}
.fq-map__lab{grid-column:1/-1;margin:8px 0 2px;font:500 9.5px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#8A8A80}
.fq-map__lab:first-child{margin-top:0}
.fq-map__cap{display:flex;align-items:baseline;gap:7px;margin:12px 0 0;font:500 11.5px/1.2 'JetBrains Mono',monospace;letter-spacing:.02em;color:#6A6A62}
.fq-map__cap b{font:400 28px/1 'Bodoni Moda',serif;color:var(--it-ink);letter-spacing:-.01em}
.fq-kit__b .fq-kit__f{display:inline-block;margin:10px 8px 0 0}
.fq-kit__b .fq-kit__d{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:#4A4A43}
.fq-kit__foot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:end;padding:14px 0 14px;border-top:1px solid var(--it-line)}
.fq-pl{display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));gap:3px;width:78px;aspect-ratio:3/2;padding:3px;border:1px solid #CFCFC4;box-sizing:border-box}
.fq-pl i{background-image:radial-gradient(circle,var(--c) 36%,transparent 44%);background-size:calc(100% / var(--k,12)) 12.5%}
.fq-pl i:nth-child(even){opacity:.5}
.fq-kit__foot .fq-kit__q{display:grid;grid-template-columns:auto auto;justify-content:start;gap:10px 22px;margin:0;padding:0;border:0}
.fq-kit__foot .fq-kit__q dd{margin:5px 0 0;font:400 26px/1 'Bodoni Moda',serif;color:var(--it-ink);white-space:nowrap}
.fq-kit__foot .fq-kit__q dd.is-long{font:500 12px/1.35 'JetBrains Mono',monospace;white-space:normal}
.fq-kit__foot .fq-kit__q dt{font:600 9.5px/1.3 Barlow,var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#8A8A80;white-space:nowrap}
.fq-cat__view,.hx__view{contain:layout paint}
.fq-cat--h .fq-kit{contain:layout style}
/* when the strip is off (reduced motion) the old list layout still works */
.fq-cat:not(.fq-cat--h):not(.fq-cat--stack) .fq-kit__b .fq-map{max-width:420px}
@media (min-width:901px){
  .fq-cat:not(.fq-cat--h):not(.fq-cat--stack) .fq-kit{grid-template-columns:minmax(220px,.8fr) minmax(0,1.5fr) minmax(220px,.7fr)}
}
@media (min-width:901px){
  .fq-cat--h .fq-kits-list{height:auto;min-height:clamp(420px,56vh,520px)}
  .fq-cat--h .fq-kit{width:clamp(290px,22vw,350px);gap:16px;padding:18px clamp(20px,1.9vw,28px) 0;grid-template-rows:auto 1fr auto}
  .fq-cat--h .fq-kit__n b{font:400 clamp(28px,2.5vw,40px)/1.02 'Bodoni Moda',serif;letter-spacing:-.01em;color:var(--it-ink)}
  .fq-cat--h .fq-kit__b{min-height:0}
  .fq-cat--h .fq-kit__b .fq-kit__d{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
  .fq-cat--h .fq-kit__foot{padding-bottom:16px}
  .fq-cat--h .fq-kit__q dd{font-size:30px}
}
@media (max-width:900px){
  .fq-cat:not(.fq-cat--h):not(.fq-cat--stack) .fq-kit__foot{grid-area:q;display:block;padding:0;border:0}
  .fq-cat:not(.fq-cat--h):not(.fq-cat--stack) .fq-pl,.fq-cat:not(.fq-cat--h):not(.fq-cat--stack) .fq-kit__tag{display:none}
  .fq-cat:not(.fq-cat--h):not(.fq-cat--stack) .fq-kit__n small{display:none}
  .fq-cat:not(.fq-cat--h):not(.fq-cat--stack) .fq-kit__n b{font:600 14.5px/1.25 Inter,var(--sans)}
}
.fq-kit__foot .fq-kit__q dt{white-space:normal;max-width:84px}
.fq-kit__foot .fq-kit__q{gap:8px 16px}
.fq-cat--h .fq-cat__track{align-items:flex-start}
@media (min-width:901px){.fq-cat--h .fq-blk__head{align-self:flex-start;padding-top:0}.fq-cat--h .fq-panel{align-items:flex-start}}
/* every card in the strip is the same height, and the row sits in the middle of the screen */
.fq-cat--h .fq-cat__track{align-items:center}
@media (min-width:901px){
  .fq-cat--h .fq-kits-list{height:clamp(470px,64vh,610px);min-height:0}
  .fq-cat--h .fq-blk__head{align-self:center}
  .fq-cat--h .fq-panel{align-items:stretch}
  .fq-cat--h .fq-kit__b .fq-kit__d{-webkit-line-clamp:6}
  .fq-cat--h .fq-cat__track{padding-top:calc(var(--navh,74px) + 96px)}
}
@media (min-width:901px){
  .fq-cat--h .fq-kits-list{height:clamp(500px,68vh,650px)}
  .fq-cat--h .fq-kit__b .fq-kit__d{-webkit-line-clamp:9}
}

/* ---------- desktop: the kit range on two lines (HLA on the first, HPA and red cells on the next), both moving sideways with the scroll ---------- */
@media (min-width:901px){
  .fq-cat--rows{--hw:clamp(240px,23vw,340px)}
  .fq-cat--rows .fq-cat__view{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden}
  .fq-cat--rows .fq-tabs{display:none}
  .fq-cat--rows .fq-blk__head{position:absolute;left:var(--pad);top:calc(var(--navh,74px) + 34px);width:var(--hw);max-width:none;margin:0;padding:0;z-index:2}
  .fq-cat--rows .fq-blk__head h3{font-size:clamp(34px,3.3vw,54px)}
  .fq-cat--rows .fq-blk__head .lede{display:block;margin-top:16px;font-size:15px;line-height:1.55}
  .fq-lanes{position:absolute;left:calc(var(--pad) + var(--hw) + clamp(24px,3vw,52px));right:0;top:calc(var(--navh,74px) + 26px);bottom:54px;display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);row-gap:18px;overflow:hidden}
  .fq-lane{display:flex;width:max-content;height:100%;min-height:0;will-change:transform}
  .fq-cat--rows .fq-panel,.fq-cat--rows .fq-panel.is-on{display:flex;flex:none;align-items:stretch;height:100%;animation:none}
  .fq-cat--rows .fq-panel__intro{display:flex;flex-direction:column;justify-content:space-between;flex:none;box-sizing:border-box;width:clamp(200px,15.5vw,260px);height:100%;padding:12px 22px 6px 0;border-top:1px solid var(--it-ink)}
  .fq-cat--rows .fq-panel__t{margin:0;font:400 clamp(46px,4.6vw,76px)/.92 'Bodoni Moda',serif}
  .fq-cat--rows .fq-panel__t small{display:block;margin-top:10px}
  .fq-cat--rows .fq-panel__lead{margin:0;max-width:none;font-size:13px;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
  .fq-cat--rows .fq-kits-list{height:100%;min-height:0}
  .fq-cat--rows .fq-kit{box-sizing:border-box;width:clamp(250px,17.4vw,292px);height:100%;gap:6px;padding:12px 18px 0;overflow:hidden;grid-template-rows:auto 1fr auto}
  .fq-cat--rows .fq-kit__tag{margin-bottom:7px;font-size:9.5px}
  .fq-cat--rows .fq-kit__n small{font-size:12px}
  .fq-cat--rows .fq-kit__n b{margin-top:2px;font:400 clamp(23px,1.95vw,31px)/1.02 'Bodoni Moda',serif}
  .fq-cat--rows .fq-map{gap:3px}
  .fq-cat--rows .fq-map i{min-height:clamp(19px,2.7vh,26px);font-size:9.5px}
  .fq-cat--rows .fq-map__lab{margin:5px 0 1px;font-size:8.5px}
  .fq-cat--rows .fq-map__lab:first-child{margin-top:0}
  .fq-cat--rows .fq-map__cap{margin-top:7px;font-size:10.5px}
  .fq-cat--rows .fq-map__cap b{font-size:22px}
  .fq-cat--rows .fq-kit__b .fq-kit__f{margin-top:6px}
  .fq-cat--rows .fq-kit:not(.is-open) .fq-kit__d,.fq-cat--rows .fq-kit:not(.is-open) .fq-kit__list{display:none}
  /* the 96-well / 384-well tag sits on the same row as the locus count, so the description keeps its room */
  .fq-cat--rows .fq-kit__b{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:baseline}
  .fq-cat--rows .fq-kit__b .fq-map,.fq-cat--rows .fq-kit__b .fq-kit__d{flex:0 0 100%}
  .fq-cat--rows .fq-kit__b .fq-map__cap{flex:1 1 auto}
  .fq-cat--rows .fq-kit__b .fq-kit__f{margin:5px 0 0 auto}
  .fq-cat--rows .fq-kit__foot{gap:12px;padding:8px 0 9px}
  .fq-cat--rows .fq-pl{width:60px}
  .fq-cat--rows .fq-kit__foot .fq-kit__q dd{font-size:23px}
  .fq-cat--rows .fq-kit__foot .fq-kit__q dt{font-size:8.5px;max-width:64px}
  .fq-cat--rows .fq-kit__foot .fq-kit__q{gap:6px 14px}
  .fq-cat__prog{position:absolute;left:var(--pad);right:var(--pad);bottom:24px;height:1px;background:var(--it-line)}
  .fq-cat__prog i{display:block;height:2px;margin-top:-.5px;background:var(--it-ink);transform-origin:left;transform:scaleX(0)}
}
@media (min-width:901px) and (min-height:960px){.fq-cat--rows .fq-map i{min-height:28px}}
@media (min-width:901px) and (max-height:860px){.fq-cat--rows .fq-kit:not(.is-open) .fq-kit__f,.fq-cat--rows .fq-kit__list{display:none!important}}
@media (min-width:901px) and (max-height:740px){.fq-cat--rows .fq-kit__tag{display:none}.fq-cat--rows .fq-map__lab{display:none}}
@media (min-width:901px){
  .fq-cat--rows .fq-kit__foot .fq-kit__q dd.is-long{font:500 10px/1.3 'JetBrains Mono',monospace;max-width:74px;white-space:normal;margin-top:5px}
}

/* ---------- phones: the kit stack (played by the scroll; each kit card sticks under the top bar and the next one slides up over it) ---------- */
@media (max-width:900px){
  .fq-cat--stack{padding-bottom:40px}
  .fq-cat--stack>.fq-tabs,.fq-cat--stack>.fq-panel,.fq-cat--stack>.fq-foot{display:none}
  #fq-cat button{touch-action:manipulation}
  .fq-stack{--ch:min(64svh,470px);--st:calc(var(--navh,62px) + 50px)}
  .fq-stack__fam+.fq-stack__fam{margin-top:12svh}
  .fq-stack__head{padding:26px 0 22px;border-top:1px solid var(--it-ink)}
  .fq-stack__head h4{display:flex;align-items:baseline;gap:10px;margin:0;font:400 clamp(34px,10vw,44px)/1 'Bodoni Moda',serif;color:var(--it-ink)}
  .fq-stack__head h4 small{font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.06em;color:#8A8A80}
  .fq-stack__lead{margin:14px 0 0;font-size:14.5px;line-height:1.55;color:#45453F}
  .fq-stack__cap{margin:8px 0 0;font:500 10.5px/1.4 'JetBrains Mono',monospace;letter-spacing:.04em;color:var(--fq-acc)}
  .fq-stack__list{list-style:none;margin:0;padding:0 0 4svh}
  .fq-card{position:sticky;top:var(--st);box-sizing:border-box;display:flex;flex-direction:column;height:var(--ch);margin:0 0 18px;padding:18px 18px 14px;overflow:hidden;background:#FBFBF8;border:1px solid #D4D4C9;border-top:3px solid var(--c);transform-origin:50% 0;will-change:transform}
  .fq-card .fq-kit__tag{display:block;margin-bottom:8px}
  .fq-card .fq-kit__n small{font-size:12.5px}
  .fq-card .fq-kit__n b{display:block;margin:3px 0 12px;font:400 clamp(32px,10vw,42px)/1 'Bodoni Moda',serif;letter-spacing:-.015em;color:var(--it-ink)}
  .fq-card .fq-map{gap:4px}
  .fq-card .fq-map i{min-height:clamp(26px,4.2svh,36px);font-size:11px}
  .fq-card .fq-map__lab{margin:8px 0 3px;font-size:9.5px}
  .fq-card .fq-map__lab:first-child{margin-top:0}
  .fq-card .fq-map__cap{margin-top:10px;font-size:12px}
  .fq-card .fq-map__cap b{font-size:28px}
  .fq-card .fq-kit__foot{display:flex;align-items:center;gap:18px;margin:auto 0 0;padding:12px 0 0;border:0;border-top:1px solid var(--it-line)}
  .fq-card .fq-pl{flex:none;width:min(42%,150px);gap:2px;padding:3px}
  .fq-card .fq-kit__q{gap:6px 20px;text-align:left}
  .fq-card .fq-kit__q>div+div dd::before{content:none}
  .fq-card .fq-kit__q dd{font-size:28px}
  .fq-card .fq-kit__q dd.is-long{font:500 11.5px/1.35 'JetBrains Mono',monospace;max-width:110px;margin-top:6px}
  .fq-card .fq-kit__q dt{display:block;font-size:9.5px;max-width:none}
  .fq-card .fq-kit__f{align-self:flex-start;margin:10px 0 0}
}
@media (min-width:901px){.fq-stack{display:none}}
/* ---------- desktop kit range: a kit opens on click ---------- */
@media (min-width:901px){
  .fq-cat--rows .fq-kit{cursor:pointer;transition:width .55s cubic-bezier(.2,.7,.2,1),background-color .35s}
  .fq-cat--rows .fq-kit:focus-visible{outline:2px solid var(--it-ink);outline-offset:-2px}
  .fq-cat--rows .fq-kit__n{position:relative}
  .fq-cat--rows .fq-kit__n::after{content:'+';position:absolute;top:-3px;right:0;font:300 22px/1 'JetBrains Mono',monospace;color:var(--it-ink);opacity:.5;transition:opacity .2s}
  .fq-cat--rows .fq-kit:hover .fq-kit__n::after{opacity:1}
  .fq-cat--rows .fq-kit.is-open{width:var(--ow,560px);background:#fff;z-index:2;cursor:default}
  .fq-cat--rows .fq-kit.is-open .fq-kit__n::after{content:'\00d7';opacity:1}
  .fq-cat--rows .fq-kit.is-open .fq-kit__b{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:28px;align-content:start;align-items:start;align-self:stretch;max-height:100%;min-height:0;overflow-y:auto;scrollbar-width:thin}
  .fq-cat--rows .fq-kit.is-open .fq-map{grid-column:1;grid-row:1}
  .fq-cat--rows .fq-kit.is-open .fq-map__cap{grid-column:1;grid-row:2;margin-top:7px}
  .fq-cat--rows .fq-kit.is-open .fq-kit__f{grid-column:2;grid-row:1;margin:0;justify-self:start;align-self:start;animation:fqIn .5s .18s both}
  .fq-cat--rows .fq-kit.is-open .fq-kit__d{display:block;grid-column:2;grid-row:1 / span 2;margin:0;font-size:13px;line-height:1.55;overflow:visible;animation:fqIn .5s .22s both}
  .fq-cat--rows .fq-kit.is-open .fq-kit__f~.fq-kit__d{padding-top:32px}
  .fq-cat--rows .fq-kit.is-open .fq-kit__list{display:block;grid-column:2;grid-row:3;margin:10px 0 0;padding-top:10px;border-top:1px solid var(--it-line);font:500 11.5px/1.55 'JetBrains Mono',monospace;color:#3A3A34;animation:fqIn .5s .28s both}
  .fq-cat--rows .fq-kit.is-open .fq-kit__list span{display:block;margin-bottom:3px;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#8A8A80}
  @keyframes fqIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  /* the opened line grows a little, the other line squeezes up (only where the screen is tall enough) */
  .fq-lanes{transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1)}
}
@media (min-width:901px) and (min-height:861px){
  .fq-lanes.is-open-1{grid-template-rows:minmax(0,1.07fr) minmax(0,.93fr)}
  .fq-lanes.is-open-2{grid-template-rows:minmax(0,.93fr) minmax(0,1.07fr)}
  .fq-lanes.is-open-1 .fq-lane:nth-child(2) .fq-map i,.fq-lanes.is-open-2 .fq-lane:nth-child(1) .fq-map i{min-height:20px}
}
@media (prefers-reduced-motion:reduce){.fq-cat--rows .fq-kit,.fq-lanes{transition:none}.fq-cat--rows .fq-kit.is-open *{animation:none!important}}

/* a still picture (data-still): no drift, no zoom, no scroll effect on any screen */
.film .film__still[data-still]{transform:none!important;will-change:auto}
/* NGS intro: the canvas animation takes the picture's place on every screen */
.film.ng-intro .film__canvas,.film.rg-intro .film__canvas,.film.sl-intro .film__canvas{display:block}
/* DaraEx: the rendered film on desktop sits on the section colour; phones get its last frame as a still */
.dx-intro .film__stage{background:var(--bg)}
.dx-intro.is-ready .film__canvas{display:block}
.dx-intro.is-ready .film__still{display:none}
/* the workflow pictures share the section's colour: whites take the page tone (multiply on the same background), photographs are feathered at the edges */
.fq-wf__fig img,.fq-wf__layer img{mix-blend-mode:multiply}
.fq-wf__fig[data-fit="cover"] img,.fq-wf__layer[data-fit="cover"] img{-webkit-mask-image:radial-gradient(ellipse 70% 68% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 70% 68% at 50% 50%,#000 62%,transparent 100%)}

/* ---------- HLA serology: the ten trays as a selector, the tray drawn in perspective (CSS 3D) with a well for every antiserum ---------- */
.sl-sel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:center;margin-top:0}
.sl-sel__copy h3{margin-top:10px}
.sl-sel__ctl{margin-top:clamp(22px,4vh,40px)}
.sl-sel__lab{margin:18px 0 10px;font:600 11px/1.2 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--it-muted)}
.sl-sel__seg{display:flex;flex-wrap:wrap;gap:6px 22px;border-bottom:1px solid var(--line)}
.sl-sel__seg{position:relative}
.sl-sel__seg>span{padding:8px 0 12px;margin:0 0 -1px;font:500 15px/1.2 var(--sans);color:var(--it-muted);border-bottom:2px solid transparent;transition:color .4s,border-color .4s}
.sl-sel__seg>span.is-on{color:var(--it-ink);border-bottom-color:var(--acc)}
.sl-sel__seg[data-k="fmt"]>span{font:400 22px/1 'Bodoni Moda',serif}
/* how far the scroll has come through the ten trays: a hairline under the loci */
.sl-sel__bar{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--it-ink);transform-origin:left;transform:scaleX(var(--kp,0));opacity:.5}
.sl-sel__out{margin-top:clamp(26px,4.5vh,44px)}
.sl-sel__name{margin:0;font:400 clamp(26px,2.4vw,38px)/1.1 'Bodoni Moda',serif;color:var(--it-muted)}
.sl-sel__name b{font-weight:400;color:var(--it-ink)}
.sl-sel__facts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:4px clamp(18px,2.4vw,36px);margin:18px 0 0;padding-top:16px;border-top:1px solid var(--it-ink)}
.sl-sel__facts dt{font:600 10.5px/1.3 Barlow,var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--it-muted)}
.sl-sel__facts dd{margin:6px 0 0;font:400 24px/1.1 'Bodoni Moda',serif;color:var(--it-ink)}
.sl-sel__facts dd.mono{font:500 13px/1.9 'JetBrains Mono',monospace;white-space:nowrap}
.sl-sel__note{margin:16px 0 0;font-size:13.5px;color:var(--it-muted)}
.sl-sel__stage{position:relative;height:clamp(380px,62vh,620px);perspective:1600px;perspective-origin:50% 30%}
.sl-sel__stage .sx-cap{position:absolute;left:0;bottom:0;margin:0}
.sl-sel__scene{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d}
.sl-kits.is-built{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sl-kits:not(.is-built){list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.sl-kits:not(.is-built) li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--it-muted)}.sl-kits:not(.is-built) b{color:var(--it-ink);margin-right:8px}
/* a set of trays (one or two), leaning back in perspective; the second tray floats above the first */
.sl-t__set{grid-area:1 / 1;position:relative;transform-style:preserve-3d;transform:rotateX(56deg) rotateZ(-32deg);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.sl-t{--c:12;--r:6;--cell:clamp(24px,2.3vw,36px);position:relative;width:calc(var(--c) * var(--cell) + 28px);height:calc(var(--r) * var(--cell) + 28px);box-sizing:border-box;padding:14px;background:linear-gradient(135deg,#fff,#F3F0EA);border:1px solid rgba(28,28,28,.45);transform-style:preserve-3d;transform:translateZ(calc(var(--i) * 120px));transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .6s}
.sl-t+.sl-t{position:absolute;left:0;top:0}
.sl-t::before{content:'';position:absolute;inset:-1px;border:1px solid rgba(28,28,28,.28);transform:translateZ(-10px);background:#E8E3DA}
.sl-t::after{content:'';position:absolute;left:14px;right:14px;top:4px;height:5px;border-top:1px solid rgba(28,28,28,.2)}
.sl-t__g{display:grid;grid-template-columns:repeat(var(--c),var(--cell));grid-auto-rows:var(--cell);transform-style:preserve-3d}
.sl-t__g i{--w:#E2D3C0;display:block;margin:16%;border-radius:50%;background:radial-gradient(circle at 50% 60%,var(--w) 0 54%,rgba(255,255,255,0) 56%),#F6F2EC;border:1px solid rgba(28,28,28,.4);transform:translateZ(0);opacity:1}
.sl-t--ii .sl-t__g i{--w:#C7D5DF}
.sl-t--b27 .sl-t__g i{--w:#E7B9C0}
.sl-t--b27 .sl-t__g i.is-alt{--w:#DDA0AA}
.sl-t--b27 .sl-t__g i.is-empty{background:#F6F2EC;opacity:.45;border-style:dashed}
/* filling: each well drops into place, one antiserum after the other */
.sl-t__set .sl-t__g i:not(.is-empty){transition:transform .7s cubic-bezier(.2,.8,.2,1) var(--d,0ms),opacity .5s var(--d,0ms);transform:translateZ(70px);opacity:0}
.sl-t__set.is-in .sl-t__g i:not(.is-empty){transform:translateZ(0);opacity:1}
.sl-t__set.is-out{transform:rotateX(56deg) rotateZ(-32deg) translateY(-60px);opacity:0;transition:transform .55s ease-in,opacity .45s ease-in}
.sl-t__set:not(.is-in) .sl-t{transform:translateZ(calc(var(--i) * 40px - 40px))}
@media (max-width:1180px){.sl-t{--cell:clamp(18px,1.9vw,28px)}}
@media (max-width:900px){
  .sl-sel{grid-template-columns:1fr;gap:8px}
  .sl-sel__stage{order:-1;height:300px;margin-inline:calc(var(--pad) * -1)}
  .sl-t{--cell:18px;padding:10px}
  .sl-t{transform:translateZ(calc(var(--i) * 70px))}
  .sl-sel__seg{gap:4px 16px}.sl-sel__seg>span{font-size:14px}
  .sl-sel__facts{grid-template-columns:repeat(2,auto);row-gap:14px}
}
@media (prefers-reduced-motion:reduce){.sl-t__set,.sl-t,.sl-t__g i{transition:none!important}}

@media (min-width:901px){.sl-sel{padding-right:clamp(40px,5.5vw,84px)}}


/* 09 Blood bags (Demophorius): the bag range behind the intro. The product renderings are white bags, so the stage takes a light cool tone
   that runs out into the page colour under the text. Desktop: a wide stage, one set per line of text (site.js). Phones: the quintuple set. */
.bb-intro .bb-cap{display:none}
.bb-intro .bb-shot:not(.film__still){display:none}
@media (min-width:901px){
  .film--hero.bb-intro .film__stage{left:0;right:0;width:100%;background:linear-gradient(270deg,var(--bg) 34%,#E7E9F2 52%,#E2E5EF 100%)}
  .film--hero.bb-intro .film__copy{width:calc(42% - var(--hfg,24px));z-index:2}
  .film--hero.bb-intro.hf--flip .film__copy{left:auto;right:0}
  .film--hero.bb-intro .bb-shot{display:block;position:absolute;top:calc(var(--navh,72px) + 9vh);left:0;width:80vw;height:calc(100% - var(--navh,72px) - 26vh);max-width:none;object-fit:contain;object-position:50% 50%;padding:0;transform:none;opacity:0;will-change:transform,opacity;mix-blend-mode:normal;filter:none}
  .film--hero.bb-intro .bb-shot[data-beat="0"]{opacity:1;width:98vw;left:-40vw}
  .film--hero.bb-intro .bb-shot[data-beat="1"]{width:66vw;left:-12vw}
  .film--hero.bb-intro .bb-shot[data-beat="2"],.film--hero.bb-intro .bb-shot[data-beat="3"]{width:88vw;left:-30vw}
  .film--hero.bb-intro .bb-shot[data-beat="4"]{width:82vw;left:-23vw}   /* the sets are drawn at different scales: these widths give every bag about the same size */
  .film--hero.bb-intro .bb-cap{display:block;position:absolute;left:clamp(72px,6.5vw,120px);right:46%;bottom:7vh;margin:0;font:400 clamp(30px,2.9vw,50px)/1.08 'Bodoni Moda',serif;color:var(--it-ink,#1C1C1C)}
  .film--hero.hf--rise.hf--flip.bb-intro .film__steps{left:calc(58% + 8px)}
  .film--hero.hf.bb-intro .film__beat[data-beat="0"] h2{font-size:clamp(46px,4.6vw,78px)}
}
@media (max-width:900px){
  .bb-intro .film__stage{height:calc(100vw * .62);background:#E7E9F2}
  .bb-intro .film__still{object-fit:contain;object-position:50% 50%;padding:18px 14px;box-sizing:border-box;transform:none}
}
/* phones: the bag range is a barely-there background behind the intro text; every bag and filter is a card in one stack (no table) */
.bb-fc,.bb-more{display:none}
@media (max-width:900px){
  .bb-intro .film__pin{position:relative;overflow:hidden;background:var(--bg);display:block;height:auto;min-height:0}
  .bb-intro .film__stage{position:absolute;inset:0;height:auto;z-index:0;background:none;pointer-events:none}
  .bb-intro .film__still{padding:0 4px;object-position:50% 96%;opacity:.2;filter:grayscale(1) brightness(.5) contrast(1.2);mix-blend-mode:normal}
  .bb-intro .film__copy{position:relative;z-index:1;padding-top:0;background:none}
  .bb-intro .film__beat[data-beat="0"]{padding-top:clamp(28px,6vh,56px);padding-bottom:150px}
  .bb-intro .film__beat[data-beat="0"] .maker{margin-top:18px}
  .bb-ftable{display:none}
  .bb .sx-cards{display:block;overflow:visible;margin-inline:0;padding:0}
  .bb .sx-cards>*{flex:none}
  .bb .sx-card,.bb .sx-card:hover{position:sticky;top:calc(var(--navh,62px) + 46px);margin:0 0 18px;transform:none;background:#FBFBF8;border:1px solid #D4D4C9;border-top:3px solid var(--acc);border-radius:0;box-shadow:none}
  .bb-fc{display:flex}
  .bb-more{display:block;list-style:none;margin:26px 0 8px;padding:0}
  .bb-more li{padding:0 0 18px}
  .bb-more b{display:block;font:600 16px/1.3 Inter,var(--sans);color:var(--it-ink)}
  .bb-more span{display:block;margin-top:4px;font-size:14.5px;line-height:1.55;color:#45453F}
  .bb .cc-bag{aspect-ratio:auto;height:auto;padding:10px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
  .bb .cc-bag img{display:block;width:100%;height:auto;max-width:100%;max-height:calc(38vh - 20px);max-height:calc(38svh - 20px);object-fit:contain}
  /* as the FluoGene cards: one sticky top for every card, the next slides over the last, which settles back (site.js) */
  .bb .sx-card{transform-origin:50% 0;will-change:transform;z-index:auto}
  .bb .sx-card .sx-spec{margin-top:auto}
  .bb-intro+.sx-block{padding-top:12px!important}
}
/* ---------- About USAS: the closing chapter, on its own brand-tinted paper (cyan light from the top right, a blush of magenta low left, a faint dot grid) ---------- */
.ab{--ab-ink:#0B1B2B;--ab-mute:#5B6B7B;--ab-line:rgba(11,27,43,.12);--ab-acc:#008DCB;position:relative;overflow:clip;color:var(--ab-ink);
  background:radial-gradient(80vw 80vh at 100% 0%,rgba(0,141,203,.22),transparent 70%),radial-gradient(70vw 70vh at 0% 100%,rgba(236,0,139,.12),transparent 70%),linear-gradient(180deg,#E6F0F7 0%,#F3EEF4 100%)}
.ab::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(11,27,43,.09) 1px,transparent 1.2px);background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 55%);mask-image:linear-gradient(180deg,#000,transparent 55%)}
.ab::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#008DCB,#EC008B)}
.ab__in{position:relative;z-index:1;max-width:1500px;margin:0 auto;padding:clamp(88px,15vh,170px) var(--pad) clamp(72px,12vh,140px)}
.ab .ab-k{color:var(--ab-acc)}
.ab h2{font:400 clamp(40px,4.8vw,78px)/1 'Bodoni Moda',serif;letter-spacing:-.01em;margin:22px 0 26px}
.ab h3{font:400 clamp(30px,3.1vw,50px)/1.05 'Bodoni Moda',serif;letter-spacing:-.01em;margin:18px 0 18px}
.ab .soft{color:#7F8C99}
.ab-blk{margin-top:clamp(88px,15vh,170px)}
.ab-blk__head{max-width:760px}
/* how we work: four stations on one hairline that draws itself */
.ab-way{--n:4;--g:clamp(20px,3vw,48px);position:relative;list-style:none;margin:clamp(40px,7vh,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--g);counter-reset:w}
.ab-way::before{content:'';position:absolute;left:calc((100% - 3 * var(--g)) / 8);right:calc((100% - 3 * var(--g)) / 8);top:27px;height:1px;background:var(--ab-ink);transform-origin:left;transform:scaleX(var(--w,1))}
.ab-way li{position:relative;counter-increment:w;display:flex;flex-direction:column;align-items:center;text-align:center}
.ab-way__i{position:relative;display:grid;place-items:center;width:56px;height:56px;border:1px solid var(--ab-ink);border-radius:50%;background:#EEF2F7;color:var(--ab-ink)}
.ab-way__i svg{width:24px;height:24px;stroke-width:1.5}
.ab-way b{display:flex;align-items:baseline;justify-content:center;gap:10px;margin-top:24px;font:400 clamp(24px,2.1vw,32px)/1.1 'Bodoni Moda',serif}
.ab-way b::before{content:'0' counter(w);font:500 11.5px/1 'JetBrains Mono',monospace;color:var(--ab-acc)}
.ab-way p{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--ab-mute);max-width:20em}
/* two columns: heading left, ruled list right */
.ab-two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,110px);align-items:start}
.ab-two > div:first-child{position:sticky;top:calc(var(--navh,74px) + 40px)}
.ab-who li{display:flex;align-items:center;gap:18px;padding:20px 0;border-bottom:1px solid var(--ab-line);font:400 clamp(18px,1.5vw,22px)/1.35 Inter,var(--sans)}
.ab-who svg{flex:0 0 auto;width:26px;height:26px;stroke-width:1.4;color:var(--ab-acc)}
@media (max-width:900px){
  .ab__in{padding-top:88px;padding-bottom:72px}
  .ab h2{font-size:clamp(34px,9vw,44px)}
  .ab h3{font-size:clamp(28px,7.6vw,36px)}
  .ab-blk{margin-top:80px}
  .ab-way{grid-template-columns:1fr;gap:0;margin-top:32px}
  .ab-way::before{left:27px;right:auto;top:28px;bottom:28px;width:1px;height:auto;transform:none}
  .ab-way li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:20px;padding:0 0 28px;text-align:left;align-items:normal}
  .ab-way b{justify-content:flex-start}
  .ab-way li:last-child{padding-bottom:0}
  .ab-way__i{grid-row:1 / span 2}
  .ab-way b{margin-top:14px}
  .ab-two{grid-template-columns:1fr;gap:28px}
  .ab-two > div:first-child{position:static}
}
.ab-way__i{transition:background-color .6s ease,color .6s ease,border-color .6s ease}
.ab-way__i.is-on{background:var(--ab-ink);color:#fff}
/* the opening statement: each word fills from pale to ink as it scrolls past (desktop); the last clause takes the brand gradient */
.ab-intro__top{display:flex;align-items:center;gap:22px}
.ab-intro__emblem{margin:0;width:54px;flex:0 0 auto}
.ab-intro__emblem img{display:block;width:100%;height:auto}
.ab h2.ab-say{max-width:21em;margin:clamp(28px,5vh,48px) 0 0;font:400 clamp(36px,4.3vw,72px)/1.12 'Bodoni Moda',serif;letter-spacing:-.012em}
.ab-say__m{background:linear-gradient(90deg,#008DCB,#B0168C);-webkit-background-clip:text;background-clip:text;color:transparent}
.ab-say .w{transition:opacity .25s linear}
.ab-intro__note{margin:clamp(28px,5vh,48px) 0 0;font:500 12.5px/1.5 'JetBrains Mono',monospace;color:var(--ab-mute)}
.ab-net__head{max-width:760px}
.ab-fig{list-style:none;margin:clamp(28px,5vh,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ab-ink)}
.ab-fig li{display:flex;align-items:baseline;gap:16px;padding:22px clamp(14px,2vw,32px) 0 0}
.ab-fig li+li{padding-left:clamp(14px,2vw,32px);border-left:1px solid var(--ab-line)}
.ab-fig b{font:400 clamp(44px,4.4vw,72px)/.9 'Bodoni Moda',serif;font-variant-numeric:lining-nums tabular-nums}
.ab-fig span{font-size:14px;line-height:1.45;color:var(--ab-mute);max-width:13em}
/* find us: big typographic links, the address, directions and the time in Chennai */
.ab-co{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,110px);align-items:end}
.ab-co__addr{display:flex;gap:14px;margin:26px 0 0;font:400 clamp(16px,1.25vw,19px)/1.55 Inter,var(--sans);color:#33414F}
.ab-co__addr svg{flex:0 0 auto;width:22px;height:22px;margin-top:3px;color:var(--ab-acc);stroke-width:1.5}
.ab-co__meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin:22px 0 0 36px}
.ab-co__dir{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ab-acc);text-decoration:none}
.ab-co__dir svg{width:16px;height:16px;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.ab-co__dir:hover svg{transform:translateX(4px)}
.ab-co__time{font:500 12.5px/1 'JetBrains Mono',monospace;color:var(--ab-mute)}
.ab-co__time b{font-weight:500;color:var(--ab-ink)}
.ab-co__big{display:grid}
.ab-co__big a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:20px;padding:22px 0 20px;color:var(--ab-ink);text-decoration:none;border-bottom:1px solid var(--ab-line)}
.ab-co__big a::after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:linear-gradient(90deg,#008DCB,#EC008B);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.ab-co__big a:hover::after,.ab-co__big a:focus-visible::after{transform:scaleX(1)}
.ab-co__big small{grid-column:1 / -1;margin-bottom:10px;font:600 11.5px/1 Barlow,var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ab-mute)}
.ab-co__big span{font:400 clamp(30px,3.3vw,54px)/1.05 'Bodoni Moda',serif;letter-spacing:-.01em;overflow-wrap:anywhere}
.ab-co__big svg{width:28px;height:28px;stroke-width:1.3;color:var(--ab-acc);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ab-co__big a:hover svg{transform:translateX(6px)}
@media (max-width:900px){
  .ab h2.ab-say{font-size:clamp(30px,8.2vw,40px)}
  .ab-intro__emblem{width:44px}
  .ab-fig{grid-template-columns:1fr}
  .ab-fig li,.ab-fig li+li{padding:16px 0;border-left:0;border-bottom:1px solid var(--ab-line)}
  .ab-fig b{font-size:46px;min-width:1.4em}
  .ab-co{grid-template-columns:1fr;gap:28px}
  .ab-co__big span{font-size:clamp(20px,6.1vw,30px);white-space:nowrap;overflow-wrap:normal}
  .ab-co__addr br{display:none}
  .ab-co__meta{margin-left:36px}
}
/* what we bring: the transfusion chain as one line; it draws with the scroll and a drop travels along it, lighting each step */
.ab-chain{--n:8;--w:1;--g:clamp(10px,1.2vw,20px);position:relative;list-style:none;margin:clamp(48px,8vh,88px) 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));column-gap:var(--g)}
.ab-chain::before,.ab-chain::after{content:'';position:absolute;left:calc((100% - 7 * var(--g)) / 16);right:calc((100% - 7 * var(--g)) / 16);top:6.5px;height:2px}
.ab-chain::before{background:var(--ab-line)}
.ab-chain::after{background:linear-gradient(90deg,#008DCB,#EC008B);transform-origin:left;transform:scaleX(var(--w))}
.ab-chain__drop{position:absolute;top:0;left:calc((100cqw - 7 * var(--g)) / 16 - 7.5px);width:15px;height:15px;border-radius:50%;background:#EC008B;transform:translateX(calc(var(--x,1) * (100cqw - (100cqw - 7 * var(--g)) / 8)));z-index:2;pointer-events:none}
.ab-chain{container-type:inline-size}
.ab-chain li{position:relative}
.ab-chain a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;color:inherit;text-decoration:none;padding:0 3px}
.ab-chain__dot{display:block;width:15px;height:15px;border-radius:50%;border:1.5px solid var(--ab-ink);background:#EDF1F6;position:relative;z-index:1;transition:background-color .6s ease,border-color .6s ease}
.ab-chain li.is-on .ab-chain__dot{background:var(--ab-ink)}
.ab-chain b{margin-top:22px;font:400 clamp(22px,1.9vw,32px)/1.05 'Bodoni Moda',serif;letter-spacing:-.01em;transition:color .6s ease}
.ab-chain li:not(.is-on) b{color:#9AA6B2}
.ab-chain span{font-size:14px;line-height:1.45;color:#33414F}
.ab-chain em{margin-top:2px;font:500 11.5px/1.35 'JetBrains Mono',monospace;font-style:normal;color:#7F8C99}
.ab-chain a:hover b,.ab-chain a:focus-visible b{color:var(--ab-acc)}
@media (max-width:900px){
  .ab-chain{grid-template-columns:1fr;row-gap:26px;margin-top:32px}
  .ab-chain::before,.ab-chain::after{left:7px;right:auto;top:8px;bottom:8px;width:1px;height:auto;transform:none}
  .ab-chain__drop{display:none}
  .ab-chain a{display:grid;grid-template-columns:15px minmax(0,1fr);column-gap:20px;row-gap:4px;align-items:start;text-align:left;padding:0}
  .ab-chain__dot{grid-row:1 / span 3;margin-top:4px}
  .ab-chain b{margin-top:0;font-size:26px}
  .ab-chain li:not(.is-on) b{color:inherit}
}
/* ---------- section 07: the kit in bench terms, and which route fits the lab (flat: hairlines, no boxes) ---------- */
.ex-kit .sx-head .lede{max-width:56ch;margin-top:14px}
.ex-kit__fig{margin:clamp(20px,4vh,44px) auto 0;max-width:980px}
.ex-kit__fig img{display:block;width:100%;height:auto}
.ex-kit__fig{position:relative}
.ex-kit__part--m{clip-path:inset(0 16.8% 0 26.6%)}
.ex-kit__part--l,.ex-kit__part--r{position:absolute;left:0;top:0}
.ex-kit__part--l{clip-path:inset(0 73.4% 0 0)}
.ex-kit__part--r{clip-path:inset(0 0 0 83.2%)}
.ex-kit__fig .sx-cap{text-align:center;margin-top:6px}
.ex-kit__facts{list-style:none;margin:clamp(24px,4vh,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 clamp(16px,2vw,32px)}
.ex-kit__facts li{display:flex;flex-direction:column;gap:4px;padding-top:16px;border-top:1px solid var(--it-ink)}
.ex-kit__facts b{font:400 clamp(40px,4vw,60px)/1 'Bodoni Moda',serif;color:var(--acc);font-variant-numeric:tabular-nums}
.ex-kit__facts span{font:600 14px/1.3 Inter,var(--sans);color:var(--it-ink)}
.ex-kit__facts small{font-size:13.5px;line-height:1.5;color:#55554F}
.ex-route__list{list-style:none;margin:clamp(28px,5vh,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,40px)}
.ex-route__opt{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:14px}
.ex-route__opt.is-main{border-top:2px solid var(--acc)}
.ex-route__opt figure{margin:0 0 10px;aspect-ratio:900/760;display:flex;align-items:center;justify-content:center}
.ex-route__opt figure img{width:100%;height:100%;object-fit:contain}
.ex-route__if{margin:0;font:400 clamp(22px,1.9vw,28px)/1.15 'Bodoni Moda',serif;color:var(--it-ink)}
.ex-route__opt h4{margin:8px 0 0;font:600 12px/1.3 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.ex-route__opt dl{margin:18px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ex-route__opt dl div{border-top:1px solid var(--line);padding-top:8px}
.ex-route__opt dt{font:500 clamp(20px,1.7vw,26px)/1.1 Inter,var(--sans);color:var(--it-ink);font-variant-numeric:tabular-nums}
.ex-route__opt dd{margin:3px 0 0;font-size:12.5px;line-height:1.35;color:#55554F}
.ex-route__code{margin:auto 0 0;padding-top:16px;font:500 11.5px/1.4 'JetBrains Mono',monospace;color:#6A6A63}
@media (max-width:1100px){.ex-kit__facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 20px}}
@media (max-width:900px){
  .ex-kit__facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
  .ex-kit__facts li:last-child{grid-column:1 / -1}
  .ex-route__list{display:block;margin:20px 0 0;padding:0 0 4svh}
  .ex-route__opt{position:sticky;top:calc(var(--navh,62px) + 24px);box-sizing:border-box;margin:0 0 18px;padding:18px 18px 16px;background:#FBFBF8;border:1px solid #D4D4C9;border-top:3px solid var(--it-ink);transform-origin:50% 0;will-change:transform}
  .ex-route__opt.is-main{border-top-color:var(--acc)}
  .ex-route__opt figure{max-height:34svh}
}
/* Partners: the six manufacturers as one row of panels; the open panel widens to show a product, the maker and the range
   (desktop: the scroll moves through them while the row is held; a click opens one). Phones: a sideways row of open cards. */
.pt-deck{list-style:none;margin:clamp(32px,6vh,60px) 0 0;padding:0;display:flex;height:clamp(440px,66vh,640px);border-top:1px solid var(--it-ink);border-bottom:1px solid var(--line)}
.pt-p{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-left:1px solid var(--line);transition:flex-grow 1.1s cubic-bezier(.2,.7,.2,1),background-color .7s ease}
.pt-p:first-child{border-left:0}
.pt-p.is-on{flex-grow:7;background:#fff}
.pt-p > a{display:flex;height:100%;color:inherit;text-decoration:none}
.pt-p__rail{flex:0 0 auto;width:clamp(60px,5vw,84px);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:24px 0;cursor:pointer}
.pt-p__rail i{font:500 11.5px/1 'JetBrains Mono',monospace;font-style:normal;color:var(--acc)}
.pt-p__rail span{writing-mode:vertical-rl;transform:rotate(180deg);font:400 clamp(20px,1.7vw,28px)/1 'Bodoni Moda',serif;letter-spacing:-.005em;color:#8A8A80;white-space:nowrap;transition:color .6s ease}
.pt-p.is-on .pt-p__rail span{color:var(--it-ink)}
.pt-p:not(.is-on):hover{background:rgba(255,255,255,.5)}
.pt-p:not(.is-on):hover .pt-p__rail span{color:var(--it-ink)}
.pt-p__body{flex:0 0 auto;width:max(400px,calc((min(100vw,1500px) - 2 * var(--pad)) * 7 / 11 - clamp(60px,5vw,84px) - 12px));display:grid;grid-template-rows:minmax(0,1fr) auto;gap:22px;padding:30px 34px 30px 6px;opacity:0;transform:translateX(18px);transition:opacity .4s ease,transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.pt-p.is-on .pt-p__body{opacity:1;transform:none;transition:opacity .8s ease .35s,transform 1s cubic-bezier(.2,.7,.2,1) .35s;pointer-events:auto}
.pt-p__ph{display:block;min-height:0}
.pt-p__ph:has(.pt-g[aria-label^="Blood bank refrigerator"]){background:#D3CBE4;padding:clamp(14px,2vw,26px);box-sizing:border-box}
/* each partner's range as one group of cut-outs (build-tools/partner-ranges.py); the products rise in one after another as the panel opens */
.pt-g{display:block;width:100%;height:100%;overflow:visible}
.pt-g image{transform-box:fill-box;transform-origin:50% 100%;opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease}
.pt-p.is-on .pt-g image{opacity:1;transform:none;transition:opacity .8s ease calc(.4s + var(--i) * 80ms),transform 1s cubic-bezier(.2,.7,.2,1) calc(.4s + var(--i) * 80ms)}
.pt-p__ph img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center}
.pt-p__txt{display:flex;flex-direction:column;gap:6px}
.pt-p__txt .pt-logo{height:40px;margin-bottom:8px}
.pt-p__txt .pt-logo img{max-width:200px}
.pt-p__txt .pt-logo--ib{height:64px}
.pt-p__txt .pt-logo--ib img{height:100%;width:auto;max-height:none}
.pt-p__txt b{font:400 clamp(26px,2.2vw,34px)/1.05 'Bodoni Moda',serif;letter-spacing:-.01em;color:var(--it-ink)}
.pt-p__txt em{font:500 11.5px/1.3 'JetBrains Mono',monospace;font-style:normal;color:#7B8794}
.pt-p__d{margin-top:6px;font-size:15px;line-height:1.5;color:#45453F;max-width:30em}
.pt-p__txt .pt-go{margin-top:12px;font:600 12px/1 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.pt-p__txt .pt-go::after{content:' \2192'}
/* desktop: the text sits in two short columns under the group, so the products get most of the panel */
@media (min-width:901px){
  .pt-deck{height:clamp(480px,74vh,700px)}
  .pt-p__txt{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:clamp(20px,2.4vw,40px);row-gap:6px;align-items:start}
  .pt-p__txt>.pt-logo,.pt-p__txt>b,.pt-p__txt>em{grid-column:1}
  .pt-p__txt>.pt-p__d{grid-column:2;grid-row:1 / span 2;margin-top:0;align-self:end}
  .pt-p__txt>.pt-go{grid-column:2;grid-row:3;margin-top:4px}
  .pt-p__txt .pt-logo{margin-bottom:2px}
}
@media (max-width:900px){
  /* partner cards on phones: solid cards in one stack, as the Imperial and Nigale cards (site.js settles each back and hides it once covered); editorial: serif name, hairline, calm grey text */
  .pt-deck{height:auto;display:block;margin:28px 0 0;padding:0 0 6px;border:0;overflow:visible}
  .pt-p,.pt-p.is-on{position:sticky;top:calc(var(--navh,62px) + 46px);display:block;margin:0 0 18px;box-sizing:border-box;min-height:min(62svh,500px);background:#fff;border:1px solid var(--line);border-left:1px solid var(--line);overflow:visible;transform-origin:50% 0;will-change:transform;transition:none}
  .pt-p > a{display:block;height:auto;min-height:inherit}
  .pt-p__rail{display:none}
  .pt-g{height:auto;max-height:30svh}
  .pt-g image,.pt-p.is-on .pt-g image{opacity:1;transform:none;transition:none}
  .pt-p__body,.pt-p.is-on .pt-p__body{width:100%;box-sizing:border-box;min-height:inherit;display:flex;flex-direction:column;gap:26px;opacity:1;transform:none;padding:30px 24px 28px 22px;pointer-events:auto;transition:none}
  .pt-p__ph{display:flex;align-items:center;justify-content:center}
  .pt-p__ph:has(.pt-g[aria-label^="Blood bank refrigerator"]){padding:14px}
  .pt-p__ph img{object-position:center}
  .pt-p__txt{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding-top:20px;border-top:1px solid var(--it-ink)}
  .pt-p__txt b{font-size:clamp(30px,8.6vw,36px);line-height:1.04;letter-spacing:-.015em}
  .pt-p__txt em{font:400 12.5px/1.5 Inter,var(--sans);letter-spacing:.01em;color:#6B7078}
  .pt-p__d{margin-top:8px;font-size:15px;line-height:1.6;color:#5A5E66;max-width:21em}
  .pt-p__txt .pt-go{display:none}
}
@media (prefers-reduced-motion:reduce){.pt-p,.pt-p__body,.pt-g image{transition:none!important}}

/* HLA serology intro: no step numbers beside the lines (Uma: no numbers on visuals) */
.sl-intro .hf__no{display:none}

/* DaraEx: the range and the protocol as one pinned scroll story on desktop (dxKit in site.js). Hidden until the script turns it on,
   so phones and reduced motion keep the range and protocol blocks as they are. */
.dx-kit{display:none}
#daraex.dx-kit-on .dx-kit{display:block}
#daraex.dx-kit-on .dx-range,#daraex.dx-kit-on .dx-proto{display:none}
.dx-kit__pin{position:relative;height:100vh;min-height:640px;box-sizing:border-box;padding:calc(var(--navh,72px) + 4vh) var(--pad) 7vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,96px);align-items:center}
.dx-kit__stage{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;column-gap:clamp(28px,3.4vw,64px);row-gap:22px;align-items:end;will-change:transform}
.dx-kit__vial{margin:0;height:min(66vh,640px);display:flex;justify-content:center;transform-origin:50% 100%;will-change:transform,opacity}
.dx-kit__vial img{height:100%;width:auto;display:block}
.dx-kit__name{margin:0;text-align:center;font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.04em;color:var(--it-muted);padding-top:12px;border-top:1px solid var(--it-line)}
.dx-kit__name i{font-style:italic}
.dx-kit__copy{position:relative;height:min(68vh,620px)}
.dx-kit__panel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;max-width:540px;will-change:transform,opacity}
.dx-kit__panel h3{margin-top:14px}
.dx-kit__panel .lede{max-width:46ch}
.dx-kit__panel .stats{max-width:none}
.dx-kit__panel h4.serif{margin:6px 0 10px;font:400 clamp(44px,4.4vw,72px)/1 'Bodoni Moda',serif;color:var(--it-ink)}
.dx-kit__panel h4 i{font-style:italic}
.dx-kit__panel>p:not(.dx-vial__role):not(.eyebrow){margin:12px 0 0;font-size:16px;line-height:1.6;color:#45453F;max-width:44ch}
.dx-kit__panel .dx-vial__role{margin:0;font:600 15px/1.4 var(--sans);color:var(--it-ink)}
.dx-kit__panel .sx-spec{margin-top:26px;max-width:340px}
.dx-kit__panel .sx-tag{background:none;padding:0;border-radius:0;font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:none}
.dx-kit__panel--proto h3{margin-bottom:10px}
.dx-kit__row{padding:16px 0 14px;border-top:1px solid var(--it-line);will-change:opacity}
.dx-kit__row:last-child{border-bottom:1px solid var(--it-line)}
.dx-kit__lab{margin:0;font:500 11.5px/1 'JetBrains Mono',monospace;letter-spacing:.05em;color:var(--it-ink)}
.dx-kit__lab span{margin-left:10px;color:var(--it-muted)}
.dx-kit__mix{margin:10px 0 6px;font:400 clamp(24px,2.2vw,34px)/1.1 'Bodoni Moda',serif;color:var(--it-ink)}
.dx-kit__mix i{font:400 .5em/1 var(--sans);font-style:normal;color:var(--it-muted);margin:0 .5em 0 .25em;letter-spacing:0}
.dx-kit__how{margin:0;font-size:13.5px;line-height:1.5;color:#5A5A52;max-width:48ch}
.dx-kit__marks{position:absolute;left:var(--pad);bottom:4vh;margin:0;padding:0;list-style:none;display:flex;gap:6px}
.dx-kit__marks li{width:30px;height:2px;background:var(--it-line);overflow:hidden}
.dx-kit__marks li::after{content:'';display:block;height:100%;background:var(--it-ink);transform-origin:0 50%;transform:scaleX(var(--f,0))}
@media (min-width:901px) and (max-height:820px){
  .dx-kit__copy{height:calc(100vh - var(--navh,72px) - 11vh)}
  .dx-kit__panel--proto h3{font-size:clamp(28px,3vw,44px);margin:8px 0 6px}
  .dx-kit__row{padding:10px 0 9px}
  .dx-kit__mix{margin:6px 0 4px;font-size:clamp(20px,1.9vw,26px)}
  .dx-kit__how{font-size:12.5px}
  .dx-kit__panel h4.serif{font-size:clamp(38px,3.8vw,56px)}
}
/* RBC-NGStype loop on phones: the steps as a vertical line (the drawing is left out, as in section 01); the square marker sits on the line */
@media (max-width:900px){
  .rb-how .ecp-how__pin{padding-top:48px;padding-bottom:8px}
  .rb-how + .rb-story + .rb-flat{padding-top:36px}
  .rb-how .ecp-step::before{top:30px}
  .rb-how .ecp-step::before,.rb-how .ecp-step[data-node="rbl-run"]::before{background:#DCCBC6}
  .rb-how .ecp-step.is-done::before{background:var(--pa)}
  .rb-how .ecp-step[data-node="rbl-run"].is-done::before{background:var(--slate)}
  .rb-how .ecp-step__head{gap:14px}
  .rb-step__m{width:14px;height:14px;margin:0 8px 0 15px;background:var(--ng-bg)}
  .rb-how .ecp-step__body p{padding-left:51px}
  .rb-how .ecp-step.is-active .rb-step__m{box-shadow:0 0 0 5px rgba(179,38,62,.14)}
}

/* HLA serology on phones (site.js, the serology block): the six steps scroll up beneath the drawing, which stays at the top; the tray block
   stays on screen while the scroll brings in the ten trays */
@media (max-width:900px){
  .sl-intro.sl-ph .film__beat{display:block;text-align:left}
  .sl-intro.sl-ph .film__stage{position:sticky;top:calc(var(--navh,62px) + 40px);z-index:1;height:min(44svh,380px);margin:6px calc(var(--pad) * -1) 0;background:var(--sh)}
  .sl-intro.sl-ph .film__beat:not([data-beat="0"]){min-height:58svh;padding-top:22px;border-top:1px solid var(--line)}
  .sl-intro.sl-ph .film__beat[data-beat="1"]{border-top:0}
  .sl-intro.sl-ph .film__beat:last-child{min-height:64svh}
  .sl-intro.sl-ph .film__feats span{display:block;font-size:14px;line-height:1.5;color:var(--it-muted)}
  .sl-intro.sl-ph .film__feats li{grid-template-columns:18px 1fr;row-gap:2px}
  .sl-intro.sl-ph .film__feats svg{grid-row:1 / span 2}
  .sl-rack.sl-ph{height:calc(100svh + 10 * 34svh)}
  .sl-rack.sl-ph .sl-sel{position:sticky;top:calc(var(--navh,62px) + 44px);gap:4px}
  .sl-rack.sl-ph .sl-sel__stage{height:min(30svh,250px)}
  .sl-rack.sl-ph .sl-sel__note,.sl-rack.sl-ph .sl-sel__stage .sx-cap{display:none}
  .sl-rack.sl-ph .sl-sel__copy h3{font-size:clamp(26px,7vw,32px)}
  .sl-rack.sl-ph .sl-sel__ctl{margin-top:10px}
  .sl-rack.sl-ph .sl-sel__lab{margin:10px 0 4px}
  .sl-rack.sl-ph .sl-sel__out{margin-top:14px}
}

/* Ready Gene intro on phones: the film stays on screen (sticky) while the scroll plays its five scenes, each holding once built */
@media (max-width:900px){
  .rg-intro.rg-scrolly .film__stage{position:sticky;top:calc(var(--navh,62px) + 42px);height:calc(100svh - var(--navh,62px) - 42px);min-height:480px;max-height:760px}
  .rg-intro.rg-scrolly .film__pin::after{content:'';order:3;display:block;height:240svh}
  .sl-intro.sl-scrolly .film__stage{position:sticky;top:calc(var(--navh,62px) + 42px);height:calc(100svh - var(--navh,62px) - 42px);min-height:480px;max-height:760px}
  .sl-intro.sl-scrolly .film__pin::after{content:'';order:3;display:block;height:240svh}
}

/* ---------- phones: the NGS intro drawing stays under the top bar and the scroll plays it while the three steps pass below ---------- */
@media (max-width:900px){
  .ng-intro.ng-scrub{--ngs:calc(100svh - var(--navh,62px) - 38px - 18px)}
  .ng-intro.ng-scrub .film__copy{padding-top:calc(var(--navh,62px) + 36px);padding-bottom:6svh}
  .ng-intro.ng-scrub .ng-pin{height:calc(var(--ngs) + 230svh);margin:18px calc(var(--pad) * -1) 0}
  .ng-intro.ng-scrub .film__stage{position:sticky;top:calc(var(--navh,62px) + 38px);height:var(--ngs);min-height:320px;margin:0}
  .ng-intro.ng-scrub .film__beat:not([data-beat="0"]){display:block;min-height:0;padding:6svh 0}
}

/* ---------- Nigale apheresis: its own division of the equipment section, in its own cool colour. The product as it is: the photograph
   stays beside the text on desktop and settles in on the scroll; then the disposable sets as flat cards. ---------- */
#instruments{padding-bottom:0}
.ngl{--bg:#EDF1F4;--acc:#1E5E8C;--line:#D3DCE3;background:var(--bg);border-top:1px solid #CCD6DE;margin-top:clamp(28px,5vh,60px);padding:clamp(72px,12vh,140px) var(--pad) clamp(56px,10vh,120px)}
.ngl .eyebrow{color:var(--acc)}
.ngl .soft{color:#7F8C97}
.ngl h3{margin:18px 0 20px;font:400 clamp(36px,3.8vw,62px)/1.04 'Bodoni Moda',serif;letter-spacing:-.01em;color:var(--it-ink)}
.ngl .lede{color:#4A4F5A}
.ngl__in{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:start}
.ngl__ph{margin:0;position:sticky;top:calc(var(--navh,72px) + 6vh);height:calc(100vh - var(--navh,72px) - 12vh);display:flex;align-items:center;justify-content:center}
.ngl__ph img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;will-change:transform}
.ngl__copy{padding:6vh 0}
.ngl__feats{list-style:none;margin:clamp(32px,5vh,56px) 0 0;padding:0}
.ngl__feats li{padding:20px 0;border-top:1px solid var(--line)}
.ngl__feats li:first-child{border-top-color:var(--it-ink)}
.ngl__feats b{display:block;font:400 clamp(22px,1.8vw,28px)/1.15 'Bodoni Moda',serif;color:var(--it-ink)}
.ngl__feats span{display:block;margin-top:8px;font-size:15.5px;line-height:1.6;color:#45474D;max-width:34em}
.ngl__spec{margin-top:clamp(48px,8vh,96px)}
.ngl__detail{margin:0 0 28px;background:#fff}
.ngl__detail img{display:block;width:100%;height:auto}
.ngl__spec dl{margin:0}
.ngl__spec dl div{display:grid;grid-template-columns:minmax(110px,.36fr) 1fr;gap:20px;padding:14px 0;border-top:1px solid var(--line)}
.ngl__spec dl div:first-child{border-top-color:var(--it-ink)}
.ngl__spec dt{font:600 11.5px/1.5 Barlow,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.ngl__spec dd{margin:0;font-size:15.5px;line-height:1.55;color:var(--it-ink)}
.ngk{max-width:1280px;margin:clamp(72px,12vh,140px) auto 0}
.ngk__head{max-width:700px}
.ngk__cards{list-style:none;margin:clamp(32px,6vh,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.ngk__cards li{border-top:3px solid var(--c);padding-top:22px}
.ngk__cards b{display:block;font:400 clamp(28px,2.4vw,40px)/1.06 'Bodoni Moda',serif;color:var(--it-ink)}
.ngk__cards p{margin:12px 0 0;font-size:16px;line-height:1.55;color:#45474D}
.ngk__cards small{display:block;margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font:500 12px/1.5 'JetBrains Mono',monospace;color:#5B6372}
@media (max-width:900px){
  .ngl{margin-top:40px;padding-top:56px}
  .ngl__in{grid-template-columns:1fr;gap:12px}
  .ngl__ph{position:relative;top:auto;height:auto}
  .ngl__ph img{width:min(86%,380px)}
  .ngl__copy{padding:0}
  .ngl h3{font-size:clamp(32px,9vw,42px)}
  .ngl__feats li{padding:14px 0}
  .ngl__feats b{font-size:21px}
  .ngl__spec dl div{grid-template-columns:1fr;gap:4px}
  .ngk{margin-top:64px}
  /* P-2000 sets on phones: solid cards in one stack, as the Imperial cards (site.js settles each back and hides it once covered) */
  .ngk__cards{display:block;list-style:none;margin:28px 0 0;padding:0 0 6px}
  .ngk__cards li{position:sticky;top:calc(var(--navh,62px) + 46px);flex:none;margin:0 0 18px;padding:34px 44px 30px 22px;box-sizing:border-box;min-height:min(46svh,330px);display:flex;flex-direction:column;background:#F2F2EE;background:color-mix(in srgb,var(--c) 14%,#F6F7F8);border:0;border-radius:0;box-shadow:none;transform-origin:50% 0;will-change:transform}
  .ngk__cards li::before,.ngk__cards li::marker{content:none}
  .ngk__cards li b{font-size:clamp(36px,10.6vw,44px);line-height:1.02;letter-spacing:-.015em;padding-bottom:20px;border-bottom:1px solid var(--c)}
  .ngk__cards li p{margin:18px 0 0;font-size:15px;line-height:1.6;color:#5A5E66;max-width:19em}
  .ngk__cards li small{margin-top:auto;padding:26px 0 0;border:0;font:400 12.5px/1.7 Inter,var(--sans);letter-spacing:.01em;color:#3B4048}
}

/* phones: ECP steps in the RBC-NGStype step style: a square marker on a line, the step in view lit, nothing hidden */
@media (max-width:900px){
  .ecp-how:not(.rb-how) .ecp-step__n{font-size:0;width:14px;height:14px;min-width:14px;margin:0 8px 0 15px;border-radius:0;border:1.5px solid #B9B9AE;background:var(--bg,#fff)}
  .ecp-how:not(.rb-how) .ecp-step::before{top:30px;left:21px;background:#D6D6CB}
  .ecp-how:not(.rb-how) .ecp-step.is-done::before{background:var(--it-green)}
  .ecp-how:not(.rb-how) .ecp-step__head{gap:14px}
  .ecp-how:not(.rb-how) .ecp-step__body p{padding-left:51px}
  .ecp-how:not(.rb-how) .ecp-step.is-done .ecp-step__n{border-color:var(--it-green)}
  .ecp-how:not(.rb-how) .ecp-step.is-active .ecp-step__n,.ecp-how:not(.rb-how) .ecp-step.is-active[data-step="3"] .ecp-step__n{background:var(--it-green);border-color:var(--it-green);box-shadow:0 0 0 5px rgba(0,140,69,.14)}
}

/* ---------- About USAS on phones: the two sequences as scroll-lit steps (as the ECP steps), no figures, no maps, centred people list ---------- */
@media (max-width:900px){
  .ab-fig,.pt-map,.foot__map{display:none}
  .ab-chain::before,.ab-chain::after,.ab-way::before{display:none}
  .ab-chain{row-gap:0}
  .ab-chain li{padding-bottom:28px}
  .ab-chain li:last-child{padding-bottom:0}
  .ab-chain li::before,.ab-way li::before{content:'';position:absolute;width:2px;background:#C9D1DA;transition:background .5s}
  .ab-chain li::before{left:6px;top:22px;bottom:2px}
  .ab-way li::before{left:26px;top:62px;bottom:4px}
  .ab-chain li:last-child::before,.ab-way li:last-child::before{display:none}
  .ab-chain li.is-done::before,.ab-way li.is-done::before{background:var(--it-green)}
  .ab-chain__dot{width:14px;height:14px;border-radius:2px;border-color:#9AA6B2;background:#fff;margin-top:5px;transition:background .4s,border-color .4s,box-shadow .4s}
  .ab-chain li.is-on:not(.is-done):not(.is-active) .ab-chain__dot{background:#fff}
  .ab-chain li.is-done .ab-chain__dot{border-color:var(--it-green);background:#fff}
  .ab-chain li.is-active .ab-chain__dot{background:var(--it-green);border-color:var(--it-green);box-shadow:0 0 0 5px rgba(0,140,69,.14)}
  .ab-chain b,.ab-chain li:not(.is-on) b{color:#8A97A5;transition:color .4s}
  .ab-chain li.is-done b,.ab-chain li.is-active b{color:var(--ab-ink)}
  .ab-way__i{border-color:#9AA6B2;color:#8A97A5;background:#fff;transition:background .4s,color .4s,border-color .4s,box-shadow .4s}
  .ab-way li.is-done .ab-way__i{border-color:var(--it-green);color:var(--it-green)}
  .ab-way li.is-active .ab-way__i{background:var(--it-green);border-color:var(--it-green);color:#fff;box-shadow:0 0 0 5px rgba(0,140,69,.14)}
  .ab-way b{color:#8A97A5;transition:color .4s}
  .ab-way li.is-done b,.ab-way li.is-active b{color:var(--ab-ink)}
  .ab-way li.is-active p{color:#33414F}
  /* the people we work with: centred, hairlines, serif */
  .ab-two > div:first-child{text-align:center}
  .ab-two .lede{margin-left:auto;margin-right:auto;max-width:26em}
  .ab-who{list-style:none;padding:0;margin:4px 0 0;border-top:1px solid var(--ab-ink)}
  .ab-who li{justify-content:center;text-align:center;padding:24px 8px;border-bottom:1px solid var(--ab-line);font:400 clamp(19px,5.4vw,23px)/1.3 'Bodoni Moda',serif;color:var(--ab-ink)}
  .ab-who li svg{display:none}
  .ab-who li span{max-width:15em}
}

/* HLA serology: the desktop beats (sl-d) show only when the page plays the rendered film (site.js adds sl-film) */
.sl-intro:not(.sl-film) .sl-d{display:none}