/* ============================================================
 * GOFFIN — homepage section styles  ·  handle: goffin-home
 * Enqueued ONLY on is_front_page() (dep: goffin-site).
 *
 * Ported verbatim from the de-cluttered static index.html inline
 * <style> blocks, each scoped to its section class so nothing leaks:
 *   .ogx-vidx  — bubble-video hero + frost/cursor-lens + index panel
 *   .whygf     — why labs choose Goffin
 *   .ghscroll  — highlighted-products horizontal scroll-pin shelf
 *   .cat91     — full catalogue overview
 *   .anotes-fx — application notes (filterable)
 *   .brands-fx — brands grid (domain filter)
 *
 * Design tokens (:root --orange / --ink / --line / --radius / --shadow …)
 * live in site.css and are NOT duplicated here. Every motion below keeps its
 * prefers-reduced-motion branch. The GSAP scroll-pin upgrade for .ghscroll is
 * driven by enhance.js (foundation); the resting styles here are the no-JS /
 * touch / reduced-motion final state.
 * ============================================================ */

/* ============================================================
 * 1) HERO — .ogx-vidx (bubble videos · frost · cursor-lens · index panel)
 * ============================================================ */
/* scope: .ogx-vidx  —  modular scale (base 16 · ratio 1.25) · 8px rhythm · golden 62/38 split */
.ogx-vidx{
  --vx-s1:8px; --vx-s2:16px; --vx-s3:24px; --vx-s4:32px; --vx-s5:40px;
  --vx-s6:48px; --vx-s8:64px; --vx-s10:80px; --vx-s12:96px;
  --vx-ease-out:cubic-bezier(.16,1,.3,1);
  --vx-mol:var(--orange); --vx-imm:#2F7E78; --vx-ngs:#5B6CB8; --vx-poc:#4f9a77;
  position:relative; z-index:1; isolation:isolate; overflow-x:clip; padding:var(--vx-s12) 0 var(--vx-s12);
  background:linear-gradient(180deg,#fff 0%,var(--surface) 100%)}
.ogx-vidx::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(22,24,29,.028) 1px,transparent 1px);background-size:32px 32px;
  -webkit-mask-image:radial-gradient(120% 92% at 70% 18%,#000 42%,transparent 88%);
  mask-image:radial-gradient(120% 92% at 70% 18%,#000 42%,transparent 88%)}
.ogx-vidx .wrap{position:relative;z-index:1}
.ogx-vidx-grid{display:grid;grid-template-columns:1.612fr 1fr;gap:var(--vx-s8);align-items:center} /* golden ≈62/38 */

/* ---- left: copy ---- */
.ogx-vidx-copy{position:relative;z-index:2}
.ogx-vidx-copy h1{font-size:var(--h-hero);margin:var(--vx-s3) 0;
  letter-spacing:-.035em;line-height:1.04}
/* line-reveal masthead — each line clips its own wipe */
.ogx-vidx-copy .rl{display:block;overflow:hidden;padding-bottom:.06em}
.ogx-vidx-copy .rl > span{display:block;transform:translateY(112%);
  transition:transform .7s var(--vx-ease-out) var(--rld,0s)}
.ogx-vidx.is-in .ogx-vidx-copy .rl > span{transform:translateY(0)}
.ogx-vidx-copy .lede{font-size:1.14rem;color:var(--ink-2);max-width:52ch;line-height:1.7}
.ogx-vidx-cta{display:flex;gap:var(--vx-s2);flex-wrap:wrap;margin:var(--vx-s5) 0 var(--vx-s3)}
.ogx-vidx-trust{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.85rem;
  font-variant-numeric:tabular-nums}
.ogx-vidx-trust .dot{width:6px;height:6px;border-radius:50%;background:var(--orange);flex-shrink:0;position:relative}
.ogx-vidx-trust .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--orange);opacity:.5;animation:vx-pulse 2.6s var(--ease) infinite}
@keyframes vx-pulse{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.7);opacity:0}}
/* magnetic CTA */
.ogx-vidx-cta .btn{will-change:transform}

/* ---- right: numbered index panel (parallax-drifted plate) ---- */
.ogx-vidx-plate{position:relative;z-index:2;perspective:1100px}
.ogx-vidx-panel{position:relative;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;
  box-shadow:var(--shadow);overflow:hidden;
  transition:transform .5s var(--vx-ease-out),box-shadow .4s var(--ease);
  transform:translate3d(0,0,0)}
.ogx-vidx-plate:hover .ogx-vidx-panel{box-shadow:var(--shadow-lg,0 40px 90px -40px rgba(22,24,29,.34))}
/* cursor sheen that follows the pointer */
.ogx-vidx-panel::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:radial-gradient(420px 320px at var(--mx,70%) var(--my,0%),rgba(233,138,44,.10),transparent 62%);
  transition:opacity .35s var(--ease)}
.ogx-vidx-plate:hover .ogx-vidx-panel::after{opacity:1}

.ogx-vidx-phead{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:var(--vx-s2) var(--vx-s3);border-bottom:1px solid var(--line);background:var(--surface)}
.ogx-vidx-phead .lbl{font-family:var(--ff-mono); font-weight:var(--fw-mono);font-size:.64rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}
.ogx-vidx-phead .tot{font-family:var(--ff-mono); font-size:.72rem;color:var(--ink);font-weight:var(--fw-mono);
  display:inline-flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
.ogx-vidx-phead .tot .d{width:6px;height:6px;border-radius:50%;background:var(--orange)}

.ogx-vidx-row{position:relative;display:flex;align-items:center;gap:var(--vx-s2);padding:var(--vx-s3) var(--vx-s3);
  border-bottom:1px solid var(--line);color:inherit;cursor:pointer;
  transition:background .22s var(--ease),padding-left .22s var(--ease);
  opacity:0;transform:translateY(14px)}
.ogx-vidx.is-in .ogx-vidx-row{opacity:1;transform:none;
  transition:background .22s var(--ease),padding-left .22s var(--ease),
    opacity .55s var(--vx-ease-out) var(--rd,0s),transform .55s var(--vx-ease-out) var(--rd,0s)}
.ogx-vidx-row:last-of-type{border-bottom:none}
/* colour-coded domain rail — always visible so each domain stands out at rest */
.ogx-vidx-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--dc,var(--orange));
  transform:scaleY(.34);transform-origin:center;transition:transform .3s var(--vx-ease-out)}
.ogx-vidx-row:hover,.ogx-vidx-row:focus-visible,.ogx-vidx-row.active{background:var(--surface);padding-left:28px;outline:none}
.ogx-vidx-row:hover::before,.ogx-vidx-row:focus-visible::before,.ogx-vidx-row.active::before{transform:scaleY(1)}
.ogx-vidx-row:focus-visible{box-shadow:inset 0 0 0 2px var(--orange-ink)}

.ogx-vidx-num{font-family:var(--ff-mono); font-size:.82rem;font-weight:var(--fw-mono);
  color:var(--line-2);letter-spacing:.04em;flex-shrink:0;width:24px;font-variant-numeric:tabular-nums;
  transition:color .25s var(--ease)}
.ogx-vidx-row:hover .ogx-vidx-num,.ogx-vidx-row:focus-visible .ogx-vidx-num,.ogx-vidx-row.active .ogx-vidx-num{color:var(--dc,var(--orange))}

.ogx-vidx-body{flex:1;min-width:0}
.ogx-vidx-name{font-size:1.14rem;font-weight:600;color:var(--ink);line-height:1.25;
  letter-spacing:-.01em;margin-bottom:7px}
.ogx-vidx-meta{font-family:var(--ff-mono); font-weight:var(--fw-mono);font-size:.68rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:9px;
  font-variant-numeric:tabular-nums;margin-bottom:9px}
.ogx-vidx-meta .cnt{color:var(--ink-2);font-weight:600}
.ogx-vidx-meta .pip{width:1px;height:10px;background:var(--line-2)}
/* coverage meter — signature fill motion (share of catalogue) */
.ogx-vidx-meter{height:4px;border-radius:3px;background:var(--grey);overflow:hidden}
.ogx-vidx-meter i{display:block;height:100%;border-radius:3px;background:var(--dc,var(--orange));
  width:0;transition:width 1.05s var(--vx-ease-out) var(--md,0s)}
.ogx-vidx.is-in .ogx-vidx-meter i{width:var(--w,0%)}

.ogx-vidx-arr{flex-shrink:0;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  background:#fff;color:var(--muted);display:grid;place-items:center;align-self:center;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.ogx-vidx-arr svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.ogx-vidx-row:hover .ogx-vidx-arr,.ogx-vidx-row:focus-visible .ogx-vidx-arr,.ogx-vidx-row.active .ogx-vidx-arr{
  background:var(--dw,var(--orange-wash));border-color:var(--dw,var(--orange-wash));
  color:var(--dc,var(--orange-ink));transform:translateX(2px)}
.ogx-vidx-row:hover .ogx-vidx-arr svg,.ogx-vidx-row:focus-visible .ogx-vidx-arr svg,.ogx-vidx-row.active .ogx-vidx-arr svg{transform:translateX(1px)}

.ogx-vidx-pfoot{padding:var(--vx-s2) var(--vx-s3);border-top:1px solid var(--line);background:var(--surface);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ogx-vidx-pfoot .note{font-family:var(--ff-mono); font-weight:var(--fw-mono);font-size:.66rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.ogx-vidx-pfoot .note svg{width:14px;height:14px;color:var(--orange-ink)}
.ogx-vidx-pfoot .link-arrow{font-size:.88rem}
/* aria-live readout for assistive tech as rows are focused/hovered */
.ogx-vidx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:900px){
  .ogx-vidx{padding:var(--vx-s10) 0 var(--vx-s10)}
  .ogx-vidx-grid{grid-template-columns:1fr;gap:var(--vx-s6)}
}
@media(max-width:560px){
  .ogx-vidx-row{padding:var(--vx-s3) var(--vx-s2);gap:14px}
  .ogx-vidx-row:hover,.ogx-vidx-row:focus-visible,.ogx-vidx-row.active{padding-left:22px}
  .ogx-vidx-name{font-size:1.05rem}
}
@media(prefers-reduced-motion:reduce){
  .ogx-vidx-copy .rl > span{transform:none !important;transition:none !important}
  .ogx-vidx-row{opacity:1 !important;transform:none !important;transition:background .22s,padding-left .22s !important}
  .ogx-vidx-meter i{transition:none !important}
  .ogx-vidx-panel{transition:none !important}
  .ogx-vidx-trust .dot::after{animation:none}
}

/* ---- floating Higgsfield bubble videos (decorative layer, behind content) ---- */
.ogx-vidx-bubbles{position:absolute;inset:0;z-index:0;pointer-events:none}
/* LAVA RISE — each bubble rises into its slot, dwells (~10s), then very slowly drifts up
   and out of view, staggered one-by-one and looping (lava-lamp cadence). The outer box
   owns the vertical rise; the inner .float adds a gentle horizontal wander. */
.ogx-bubble{position:absolute;width:var(--bw,220px);aspect-ratio:1/1;
  animation:ogx-lava var(--lava,44s) ease-in-out var(--lavadelay,0s) infinite both;will-change:transform,opacity}
@keyframes ogx-lava{
  0%{transform:translateY(46vh);opacity:0}      /* enter from below its slot */
  8%{transform:translateY(0);opacity:1}         /* arrive at slot */
  32%{transform:translateY(0);opacity:1}        /* dwell in place */
  88%{opacity:.7}
  100%{transform:translateY(-165vh);opacity:0}  /* slow drift up & out of view */
}
.ogx-bubble .in{width:100%;height:100%}
.ogx-bubble .float{width:100%;height:100%;animation:ogx-sway var(--fdur,14s) ease-in-out var(--fdelay,0s) infinite}
@keyframes ogx-sway{0%,100%{transform:translateX(-9px)}50%{transform:translateX(9px)}}
/* multiply keys out the off-white render background against the light hero; radial mask kills the square edge */
.ogx-bubble video,.ogx-bubble img{display:block;width:100%;height:100%;object-fit:contain;
  mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(closest-side,#000 66%,transparent 84%);
          mask-image:radial-gradient(closest-side,#000 66%,transparent 84%)}
.ogx-bubble.b1{--bw:clamp(230px,26vw,380px);left:-5%;bottom:-16%;--lava:46s;--lavadelay:0s;--fdur:15s;--fdelay:0s}
.ogx-bubble.b2{--bw:clamp(140px,17vw,220px);right:0;top:1%;--lava:40s;--lavadelay:5s;--fdur:12s;--fdelay:-3s}
.ogx-bubble.b3{--bw:clamp(80px,9vw,120px);left:50%;top:56%;--lava:36s;--lavadelay:10s;--fdur:10s;--fdelay:-5s}
@media(max-width:900px){
  .ogx-bubble.b3{display:none}
  .ogx-bubble.b1{--bw:150px;left:auto;right:-8%;bottom:auto;top:-3%}
  .ogx-bubble.b2{--bw:115px;left:auto;right:-6%;top:auto;bottom:3%}
}
@media(prefers-reduced-motion:reduce){
  .ogx-bubble{animation:none !important;opacity:1 !important;transform:none !important}
  .ogx-bubble .float{animation:none !important}
}

/* ---- FROST WITHOUT backdrop-filter ----
   The frost is a real blur ON the bubble videos (.ogx-frost). A JS-cloned, un-blurred
   copy (.ogx-sharp) sits on top and is revealed only inside a cursor lens via a radial
   mask. Because nothing samples a backdrop, the effect can NEVER be dropped by the
   header or next section compositing onto their own layers — which was the bug. */
@property --hole{syntax:'<length>';inherits:false;initial-value:0px} /* smooth lens grow/shrink */
.ogx-frost .ogx-bubble video{filter:blur(9px) saturate(1.18) brightness(1.02)}  /* frosted-glass look */
.ogx-sharp{z-index:1;--mx:50%;--my:50%;--hole:0px;transition:--hole .3s ease;
  /* radial reveal: opaque (shows the crisp copy) inside the lens, transparent outside.
     --hole 0 → degenerate circle → fully transparent → sharp hidden → pure frost. */
  -webkit-mask-image:radial-gradient(circle var(--hole) at var(--mx) var(--my),#000 0,#000 calc(var(--hole) - 34px),transparent var(--hole));
          mask-image:radial-gradient(circle var(--hole) at var(--mx) var(--my),#000 0,#000 calc(var(--hole) - 34px),transparent var(--hole))}
.ogx-sharp .ogx-bubble video{filter:none}     /* the revealed copy is crisp */
.ogx-vidx>.wrap{z-index:2}                     /* content above both bubble layers */

/* ============================================================
 * 2) WHY LABS CHOOSE GOFFIN — .whygf (CRAFTED BENTO PLATE)
 * ------------------------------------------------------------
 * One framed editorial plate: cells share a 1px hairline grid (a
 * --line background showing through a 1px gap) inside one rounded
 * frame, so the whole thing reads as a single crafted instrument.
 * The real lab photo IS proposition 1; the intro is elevated to a
 * pull-quote; three unequal facets fan out; a dark chip grounds it
 * in the real catalogue numbers. Visible at rest — hover refines.
 * Orange stays a rationed accent, never a flood.
 * ============================================================ */
  .whygf{background:var(--surface); padding-top:48px; padding-bottom:88px}

  /* -- the plate: shared-hairline grid (gap shows the --line beneath) -- */
  .whygf-plate{display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
    grid-template-areas:
      "intro intro intro intro intro hero hero hero hero hero hero hero"
      "intro intro intro intro intro hero hero hero hero hero hero hero"
      "app   app   app   app   val  val  val  val  ce   ce   ce   ce";
    gap:1px; background:var(--line); border:1px solid var(--line);
    border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow)}
  .whygf-cell{background:var(--paper); position:relative; min-width:0}

  /* -- intro: eyebrow + the statement AS the heading (pull-quote) + the rest.
     Masthead and statement merged into one cell, so no hairline splits them. -- */
  .whygf-intro{grid-area:intro; background:var(--surface); padding:clamp(28px,2.8vw,44px);
    display:flex; flex-direction:column; justify-content:center; gap:16px}
  /* only the placement + colour here; size/weight/spacing/slash inherit the canonical .eyebrow */
  .whygf-intro .eyebrow{margin-bottom:6px; color:var(--orange-ink)}
  .whygf-lead{font-family:'Poppins',sans-serif; font-weight:600; color:var(--ink); margin:0;
    font-size:clamp(1.55rem,2.7vw,2.3rem); line-height:1.14; letter-spacing:-.028em; text-wrap:balance}
  .whygf-box{box-shadow:inset 0 -.5em 0 var(--orange-wash); border-bottom:2px solid var(--orange)}
  .whygf-rest{max-width:46ch; color:var(--ink-2); font-size:1.02rem; line-height:1.7; margin:0}

  /* -- hero photo cell = proposition 01, "Our own laboratory" -- */
  .whygf-hero{grid-area:hero; min-height:clamp(340px,34vw,470px); overflow:hidden; background:var(--ink)}
  .whygf-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition:transform 1.1s var(--ease-out)}
  .whygf-hero:hover img{transform:scale(1.045)}
  .whygf-hero .scrim{position:absolute; left:0; right:0; bottom:0; z-index:1; padding:clamp(22px,2.4vw,34px);
    padding-top:80px; background:linear-gradient(to top, rgba(12,13,16,.92) 0%, rgba(12,13,16,.72) 42%, rgba(12,13,16,0) 100%)}
  .whygf-hero h3{color:#fff; font-size:clamp(1.25rem,1.9vw,1.6rem); line-height:1.2; margin:0 0 8px; letter-spacing:-.02em}
  .whygf-hero p{color:rgba(255,255,255,.82); font-size:.95rem; line-height:1.6; margin:0; max-width:46ch}

  /* -- proposition facets (02–04): one equal-height row -- */
  .whygf-prop{display:flex; flex-direction:column; gap:12px; padding:clamp(24px,2.4vw,34px); overflow:hidden;
    transition:background .35s var(--ease-out)}
  .whygf-prop > *{position:relative; z-index:1}
  .whygf-prop::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--orange);
    transform:scaleY(0); transform-origin:top; transition:transform .32s var(--ease-out)}
  .whygf-prop:hover{background:var(--surface)}
  .whygf-prop:hover::before{transform:scaleY(1)}
  .whygf-prop .p-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
  /* the kicker is now the canonical .eyebrow (muted text + orange slash); only its
     hover-to-ink colour shift is scoped here. */
  .whygf-prop .idx{transition:color .3s var(--ease-out)}
  .whygf-prop:hover .idx{color:var(--ink)}
  .whygf-prop .mark{color:var(--muted); flex-shrink:0; transition:color .3s var(--ease-out), transform .4s var(--ease-out)}
  .whygf-prop:hover .mark{color:var(--orange-ink); transform:translateY(-1px)}
  .whygf-prop .mark svg{width:22px; height:22px; display:block}
  .whygf-prop h3{margin:2px 0 0; font-size:var(--h-sub); letter-spacing:-.015em}
  .whygf-prop p{color:var(--muted); font-size:.92rem; line-height:1.62; margin:0}
  .whygf-app{grid-area:app}
  .whygf-val{grid-area:val}
  .whygf-ce{grid-area:ce}

  /* -- responsive -- */
  @media (max-width:1024px){
    .whygf-plate{grid-template-columns:repeat(6,minmax(0,1fr));
      grid-template-areas:
        "intro intro intro hero hero hero"
        "intro intro intro hero hero hero"
        "app   app   val   val   ce   ce"}
    .whygf-hero{min-height:clamp(300px,42vw,400px)}
  }
  @media (max-width:680px){
    .whygf-plate{grid-template-columns:1fr; grid-template-areas:none}
    .whygf-cell{grid-area:auto !important}
    .whygf-hero{min-height:320px}
  }
  @media (prefers-reduced-motion:reduce){
    .whygf-hero:hover img{transform:none}
  }

/* ============================================================
 * 3) HIGHLIGHTED PRODUCTS — .ghscroll (horizontal scroll-pin shelf)
 * ============================================================ */
    /* scoped to .ghscroll — reuses global tokens from styles.css */
    .ghscroll{position:relative; background:var(--surface); padding:80px 0 48px; overflow:hidden}
    /* faint data-grid wash, restrained */
    .ghscroll::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
      background-image:radial-gradient(rgba(22,24,29,.035) 1px, transparent 1px); background-size:30px 30px;
      -webkit-mask-image:linear-gradient(90deg, #000 0 38%, transparent 72%);
      mask-image:linear-gradient(90deg, #000 0 38%, transparent 72%)}
    .ghscroll .gh-wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px; position:relative; z-index:1}

    /* asymmetric split: sticky-feel rail (left) + scroller (right) */
    .ghscroll .gh-grid{display:grid; grid-template-columns:300px 1fr; gap:48px; align-items:start}

    .ghscroll .gh-rail{position:relative}
    /* colour only; type/size/slash inherit the canonical .eyebrow (class added in markup) */
    .ghscroll .gh-eyebrow{color:var(--orange-ink)}
    .ghscroll .gh-rail h2{font-size:var(--h-section); margin:18px 0 14px;
      letter-spacing:-.025em; line-height:1.12; padding-bottom:.04em; color:var(--ink)}
    .ghscroll .gh-rail h2 .hl{color:var(--orange-ink)}
    .ghscroll .gh-rail p{color:var(--muted); font-size:1.02rem; line-height:1.7; max-width:300px}

    /* counter + controls */
    .ghscroll .gh-meta{margin-top:30px; display:flex; align-items:center; gap:14px}
    .ghscroll .gh-count{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.82rem; color:var(--ink-2); letter-spacing:.04em; white-space:nowrap}
    .ghscroll .gh-count b{color:var(--ink); font-weight:var(--fw-mono)}
    .ghscroll .gh-count .gh-cur{color:var(--orange-ink)}
    .ghscroll .gh-nav{display:flex; gap:9px; margin-left:auto}
    .ghscroll .gh-arrow{width:46px; height:46px; border-radius:11px; display:grid; place-items:center;
      background:#fff; border:1px solid var(--line-2); color:var(--ink); cursor:pointer;
      transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease)}
    .ghscroll .gh-arrow svg{width:19px; height:19px}
    .ghscroll .gh-arrow:hover{border-color:var(--ink); background:var(--ink); color:#fff; transform:translateY(-1px)}
    .ghscroll .gh-arrow:disabled{opacity:.34; cursor:not-allowed; background:#fff; color:var(--ink); border-color:var(--line-2); transform:none}

    /* progress bar */
    .ghscroll .gh-bar{margin-top:24px; height:4px; border-radius:100px; background:var(--grey-2); overflow:hidden; max-width:260px}
    .ghscroll .gh-bar-fill{height:100%; width:24%; border-radius:100px; background:var(--orange);
      transform-origin:left center; transition:width .18s var(--ease)}

    .ghscroll .gh-allcta{margin-top:30px; display:inline-flex; align-items:center; gap:7px;
      font-weight:500; color:var(--orange-ink); font-size:.93rem}
    .ghscroll .gh-allcta svg{width:16px; height:16px; transition:transform .25s var(--ease)}
    .ghscroll .gh-allcta:hover svg{transform:translateX(4px)}

    /* ---- the OWN clipped track (only this scrolls) ---- */
    .ghscroll .gh-viewport{position:relative; min-width:0}
    .ghscroll .gh-track{display:flex; gap:18px; overflow-x:auto; overflow-y:hidden;
      scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:6px 4px 22px;
      -webkit-overflow-scrolling:touch; scrollbar-width:none}
    .ghscroll .gh-track::-webkit-scrollbar{display:none}
    /* soft fade at the trailing edge so cards read as "more beyond" */
    .ghscroll .gh-viewport::after{content:""; position:absolute; top:0; right:0; bottom:22px; width:46px;
      pointer-events:none; z-index:2;
      background:linear-gradient(90deg, rgba(250,249,246,0), var(--surface))}

    /* card — color-field over generic bordered box */
    .ghscroll .gh-card{flex:0 0 286px; scroll-snap-align:start; background:#fff;
      border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
      display:flex; flex-direction:column;
      transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease)}
    .ghscroll .gh-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-2)}

    .ghscroll .gh-media{position:relative; aspect-ratio:5/4; background:var(--surface);
      display:grid; place-items:center; padding:22px; overflow:hidden; border-bottom:1px solid var(--line)}
    .ghscroll .gh-media img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply;
      transition:transform .4s var(--ease)}
    .ghscroll .gh-card:hover .gh-media img{transform:scale(1.04)}
    .ghscroll .gh-media.has-photo{padding:0}
    .ghscroll .gh-media.has-photo img{mix-blend-mode:normal; object-fit:cover}
    .ghscroll .gh-media.has-photo::after{content:""; position:absolute; inset:0;
      background:linear-gradient(155deg, rgba(250,249,246,.12), rgba(250,249,246,.42))}

    /* Pills over the shelf photos share the ONE opaque-white style used site-wide
       (matches .tech-blob / .type-tag.reg in site.css): solid white, ink text,
       a clearly-visible border + crisp shadow so they never blend into a light
       product photo. */
    .ghscroll .gh-tech{position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:6px;
      background:#fff; color:var(--ink); font-size:.7rem; font-weight:600;
      padding:5px 10px; border-radius:7px; box-shadow:0 1px 3px rgba(22,24,29,.10); z-index:1; border:none}
    .ghscroll .gh-tech .d{width:6px; height:6px; border-radius:50%; background:var(--orange)}
    .ghscroll .gh-type{position:absolute; top:12px; right:12px; font-family:var(--ff-mono); font-size:.6rem; font-weight:var(--fw-mono); letter-spacing:.07em; text-transform:uppercase;
      padding:5px 8px; border-radius:6px; z-index:1}
    .ghscroll .gh-type.panel,
    .ghscroll .gh-type.single,
    .ghscroll .gh-type.reg,
    .ghscroll .gh-type.reg-ce-ivdr,
    .ghscroll .gh-type.reg-ce-ivd,
    .ghscroll .gh-type.reg-ruo{background:#fff; color:var(--ink); border:1px solid rgba(22,24,29,.30);
      box-shadow:0 1px 3px rgba(22,24,29,.10)}

    .ghscroll .gh-idx{position:absolute; bottom:12px; left:12px; z-index:1;
      font-family:var(--ff-mono); font-size:.66rem; font-weight:var(--fw-mono); letter-spacing:.06em;
      color:var(--ink); background:#fff; padding:3px 8px; border-radius:6px;
      box-shadow:0 1px 3px rgba(22,24,29,.10); border:none}

    .ghscroll .gh-body{padding:18px; display:flex; flex-direction:column; flex:1}
    .ghscroll .gh-body h3{font-size:var(--h-sub); line-height:1.3; margin-bottom:11px; font-weight:600; color:var(--ink)}
    .ghscroll .gh-targets{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.66rem; color:var(--muted);
      letter-spacing:.04em; text-transform:uppercase; margin-bottom:8px}
    .ghscroll .gh-chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px}
    .ghscroll .gh-chips span{font-size:.73rem; color:var(--ink-2); background:var(--grey); padding:4px 9px; border-radius:6px; font-weight:500}
    .ghscroll .gh-chips span.more{color:var(--muted); background:transparent; border:1px dashed var(--line-2)}
    .ghscroll .gh-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px;
      padding-top:14px; border-top:1px solid var(--line)}
    .ghscroll .gh-req{font-weight:600; font-size:.85rem; color:var(--orange-ink); display:inline-flex; align-items:center; gap:6px}
    .ghscroll .gh-req svg{width:14px; height:14px}
    .ghscroll .gh-view{font-size:.83rem; color:var(--muted); font-weight:500; transition:color .18s var(--ease)}
    .ghscroll .gh-view:hover{color:var(--ink)}

    /* keyboard / focus affordance on the scroll region */
    .ghscroll .gh-track:focus-visible{outline:2px solid var(--orange-ink); outline-offset:4px; border-radius:var(--radius)}

    /* entrance — resting state is fully visible; only the .gh-in gate adds the lift */
    .ghscroll .gh-rail, .ghscroll .gh-card{opacity:1}
    .ghscroll.gh-anim .gh-rail > *{opacity:0; transform:translateY(16px)}
    .ghscroll.gh-anim .gh-card{opacity:0; transform:translateY(22px)}
    .ghscroll.gh-anim.gh-in .gh-rail > *{opacity:1; transform:none;
      transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:calc(.05s + var(--i,0) * .06s)}
    .ghscroll.gh-anim.gh-in .gh-card{opacity:1; transform:none;
      transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:calc(.12s + var(--i,0) * .07s)}

    /* responsive */
    @media(max-width:900px){
      .ghscroll{padding:76px 0 80px}
      .ghscroll::before{-webkit-mask-image:none; mask-image:none; opacity:.5}
      .ghscroll .gh-grid{grid-template-columns:1fr; gap:30px}
      .ghscroll .gh-rail p{max-width:560px}
      .ghscroll .gh-bar{max-width:none}
      .ghscroll .gh-viewport::after{display:none}
    }
    @media(max-width:560px){
      .ghscroll .gh-wrap{padding:0 20px}
      .ghscroll .gh-card{flex-basis:78vw}
      .ghscroll .gh-arrow{width:44px; height:44px}
    }
    @media(prefers-reduced-motion:reduce){
      .ghscroll *{transition:none !important}
      .ghscroll.gh-anim .gh-rail > *, .ghscroll.gh-anim .gh-card{opacity:1 !important; transform:none !important}
      .ghscroll .gh-track{scroll-behavior:auto}
    }

/* ============================================================
 * 4) CATALOGUE OVERVIEW — .cat91
 * ============================================================ */
/* ============================================================
   CATALOGUE OVERVIEW · flagship level-up
   Scoped to .cat91 — keeps shared Goffin classes native, adds:
   · modular type scale (base 16 · ratio 1.25) + 8px rhythm
   · domain-hued color-field encoding (mol/imm/ngs) over borders
   · animated composition bars (signature line-draw / grow)
   · live functional search w/ aria-live readout
   · orchestrated staggered IO reveal + count-up totals
   · pointer parallax imagery, magnetic foot link, hover micro-int
   ============================================================ */
.cat91{
  /* domain hues for data encoding (from the WOW system) */
  --c-mol:#E98A2C; --c-imm:#2F7E78; --c-ngs:#5B6CB8; --c-poc:#4f9a77;
  --c-mol-ink:#A85A0E; --c-imm-ink:#22615c; --c-ngs-ink:#48579e; --c-poc-ink:#3a7a5c;
  /* 8px rhythm */
  --r1:8px; --r2:16px; --r3:24px; --r4:32px; --r5:40px; --r6:48px;
  /* modular scale (base 16 · ~1.25) */
  --t--1:.8rem; --t-0:1rem; --t-1:1.25rem; --t-2:1.563rem; --t-3:1.953rem; --t-4:2.441rem;
  --eo:cubic-bezier(.16,1,.3,1);
}
.cat91{background:#fff; padding-top:40px; padding-bottom:88px}
.cat91 .wrap{padding-left:clamp(20px,4vw,40px); padding-right:clamp(20px,4vw,40px)}

/* ---- head : title + search on one row (search stacks under on mobile) ---- */
.cat91 .cat-head-row{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:var(--r3) var(--r5); margin-bottom:var(--r4)}
.cat91 .cat-head-row .section-head{flex:1 1 360px}
.cat91 .cat-head-row .cat-search{flex:1 1 320px; max-width:560px; margin:0}
.cat91 .section-head{margin-bottom:0; max-width:62ch}
/* placement + colour only; size/weight/spacing/slash inherit the canonical .eyebrow */
.cat91 .section-head .eyebrow{margin-bottom:var(--r2); color:var(--orange-ink)}
.cat91 .section-head h2{font-size:var(--h-section); font-weight:600; line-height:1.12; letter-spacing:-.025em; margin:0 0 var(--r2); padding-bottom:.04em}
.cat91 .section-head p{margin:0; line-height:1.6; max-width:60ch; color:var(--muted)}
/* coverage readout block, right column */
.cat91 .cat-readout{border:1px solid var(--line); border-radius:var(--radius); padding:var(--r3) var(--r3) calc(var(--r3) - 4px);
  background:var(--surface)}
.cat91 .cat-readout .rk{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:8px; margin-bottom:12px}
.cat91 .cat-readout .rk .d{width:6px;height:6px;border-radius:50%; background:var(--orange)}
.cat91 .cat-readout .rv{font-family:var(--ff-mono); font-size:var(--t-4); font-weight:var(--fw-mono); color:var(--ink);
  line-height:.95; font-variant-numeric:tabular-nums; letter-spacing:-.02em; display:block}
.cat91 .cat-readout .rv .u{color:var(--orange-ink); font-size:.46em; vertical-align:.18em; margin-left:.12em}
.cat91 .cat-readout .rs{display:block; margin-top:10px; font-size:.84rem; color:var(--muted); line-height:1.5}
/* split coverage bar (mol/imm/ngs proportional) */
.cat91 .cov-split{display:flex; height:7px; border-radius:5px; overflow:hidden; background:var(--grey); margin-top:14px}
.cat91 .cov-split i{height:100%; width:0; transition:width 1.1s var(--eo)}
.cat91.in .cov-split i.m{width:54.2%} .cat91.in .cov-split i.i{width:22.4%} .cat91.in .cov-split i.n{width:13.7%} .cat91.in .cov-split i.p{width:9.7%}
.cat91 .cov-key{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:12px}
.cat91 .cov-key span{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.68rem; color:var(--muted); display:inline-flex; align-items:center; gap:6px}
.cat91 .cov-key span .s{width:8px;height:8px;border-radius:2px; flex-shrink:0}

/* ---- functional search ---- */
.cat91 .cat-search{display:flex; align-items:center; gap:12px; max-width:580px; margin:0 0 var(--r5);
  border:1.5px solid var(--line-2); border-radius:13px; padding:14px 18px; background:#fff;
  transition:border-color .22s var(--eo), box-shadow .22s var(--eo)}
.cat91 .cat-search:focus-within{border-color:var(--orange); box-shadow:0 0 0 4px rgba(233,138,44,.12)}
.cat91 .cat-search > svg{width:19px;height:19px; color:var(--muted); flex:0 0 auto}
.cat91 .cat-search input{flex:1 1 auto; min-width:0; border:none; outline:none; font-family:inherit;
  font-size:.96rem; color:var(--ink); background:none; padding:2px 0}
.cat91 .cat-search input::placeholder{color:var(--muted)}
.cat91 .cat-search kbd{flex:0 0 auto; font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.7rem; color:var(--muted);
  border:1px solid var(--line-2); border-radius:6px; padding:4px 9px; line-height:1.3}
.cat91 .cat-search .clr{flex:0 0 auto; width:26px;height:26px; border-radius:7px; border:none; background:var(--grey);
  color:var(--muted); cursor:pointer; display:none; place-items:center; transition:background .18s,color .18s}
.cat91 .cat-search .clr.show{display:grid}
.cat91 .cat-search .clr:hover{background:var(--grey-2); color:var(--ink)}
.cat91 .cat-search .clr svg{width:13px;height:13px}

/* ---- catalogue cards : own photo + icon + category list (rich, 2×2, organised) ---- */
.cat91 .cat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2vw,26px)}
.cat91 .cat-col{display:flex; flex-direction:column; min-width:0; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:#fff; overflow:hidden; transition:box-shadow .3s var(--eo), border-color .3s var(--eo), transform .3s var(--eo)}
.cat91 .cat-col:hover{box-shadow:var(--shadow); border-color:var(--line-2); transform:translateY(-3px)}
.cat91 .cat-col[data-dom="mol"]{--c:var(--c-mol); --cink:var(--c-mol-ink)}
.cat91 .cat-col[data-dom="imm"]{--c:var(--c-imm); --cink:var(--c-imm-ink)}
.cat91 .cat-col[data-dom="ngs"]{--c:var(--c-ngs); --cink:var(--c-ngs-ink)}
.cat91 .cat-col[data-dom="poc"]{--c:var(--c-poc); --cink:var(--c-poc-ink)}
/* own Goffin photo header (warm) */
.cat91 .cat-img{height:clamp(132px,13vw,164px); overflow:hidden; position:relative; background:var(--grey)}
.cat91 .cat-img img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--eo)}
.cat91 .cat-col:hover .cat-img img{transform:scale(1.04)}
.cat91 .cat-img::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(22,24,29,.14))}
.cat91 .cat-img .dband{position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--c); z-index:1}
/* head */
.cat91 .cat-c-head{display:flex; align-items:center; gap:14px; padding:18px 22px 12px}
.cat91 .cat-c-head .ic{position:relative; width:46px; height:46px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto; color:#fff; background:var(--c);
  transition:transform .5s var(--ease-out)}
.cat91 .cat-c-head .ic svg{width:23px; height:23px}
/* Icon-Bloom (site-wide hover): the domain-hued chip scales + a ring in the
   domain colour blooms out once (goffin-bloom keyframe defined in site.css). */
.cat91 .cat-c-head .ic::after{content:""; position:absolute; inset:0; border-radius:inherit; border:2px solid var(--c); opacity:0; pointer-events:none}
.cat91 .cat-col:hover .cat-c-head .ic{transform:scale(1.1)}
.cat91 .cat-col:hover .cat-c-head .ic::after{animation:goffin-bloom .7s var(--ease-out)}
.cat91 .cat-c-head > div{min-width:0}
.cat91 .cat-c-head b{display:block; font-size:1.14rem; color:var(--ink); font-weight:600; line-height:1.2; letter-spacing:-.01em}
.cat91 .cat-c-head small{display:block; margin-top:3px; font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.72rem; color:var(--muted)}
.cat91 .cat-c-head small .cc-n{color:var(--cink); font-weight:600}
/* category list — two compact columns inside the wide card */
.cat91 .cat-list{padding:4px 12px 8px; display:grid; grid-template-columns:1fr 1fr; gap:0 8px}
.cat91 .cat-list a{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 11px; border-radius:9px; font-size:.88rem; color:var(--ink-2); font-weight:500; line-height:1.3; transition:background .16s, padding .16s, color .16s}
.cat91 .cat-list a .ct{display:inline-flex; align-items:center; gap:8px; min-width:0}
.cat91 .cat-list a .ct .nub{width:6px; height:6px; border-radius:50%; background:var(--c); flex:0 0 auto}
.cat91 .cat-list a:hover{background:var(--surface); color:var(--ink)}
.cat91 .cat-list a .cnt{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.72rem; color:var(--muted); flex:0 0 auto}
.cat91 .cat-list a:hover .cnt{color:var(--cink)}
/* foot */
.cat91 .cat-foot{margin-top:auto; padding:13px 22px; border-top:1px solid var(--line)}
.cat91 .cat-foot .link-arrow{display:inline-flex; align-items:center; gap:8px; color:var(--cink); font-weight:600; font-size:.9rem}
.cat91 .cat-foot .link-arrow svg{width:16px; height:16px; transition:transform .25s var(--eo)}
.cat91 .cat-foot .link-arrow:hover svg{transform:translateX(4px)}
@media(max-width:620px){ .cat91 .cat-list{grid-template-columns:1fr} }

/* orchestrated reveal */
.cat91 [data-r]{opacity:0; transform:translateY(20px); transition:opacity .55s var(--eo), transform .55s var(--eo);
  transition-delay:var(--d,0s)}
.cat91 [data-r].in{opacity:1; transform:none}
.cat91 :focus-visible{outline:2.5px solid var(--orange-ink); outline-offset:2px; border-radius:5px}

@media(max-width:1080px){
  .cat91 .cat-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
  .cat91 .cat-head-row{flex-direction:column; align-items:stretch; gap:var(--r4)}
  /* In the column layout, a flex-basis in px becomes a HEIGHT — the 360px basis on
     the title block left a ~280px empty gap under the heading, and the 320px basis
     a giant empty search box. Reset both to content height. */
  .cat91 .cat-head-row .section-head{flex:0 0 auto}
  .cat91 .cat-head-row .cat-search{flex:0 0 auto; max-width:560px}
}
@media(max-width:720px){
  /* Below 720px the two-up domain cards get too narrow for the long domain
     titles ("Immunodiagnostics") and were clipping / forcing sideways scroll —
     stack to one column here, not only at 560px. */
  .cat91 .cat-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .cat91 *{transition:none !important; animation:none !important}
  .cat91 [data-r]{opacity:1; transform:none}
  .cat91 .cat-bar i, .cat91 .cov-split i{transition:none !important}
  .cat91 .cat-img img{transform:none !important}
}

/* ============================================================
 * 5) APPLICATION NOTES — .anotes-fx
 * ============================================================ */
/* ============================================================
   APPLICATION NOTES · flagship level-up
   Scoped to .anotes-fx — reuses Goffin tokens, keeps native look.
   Modular scale (base 16 · ratio 1.25) · 8px rhythm · domain-hued data-viz.
   ============================================================ */
.anotes-fx{
  /* domain-hue encoding (from Goffin data-viz palette) */
  --an-mol:#E98A2C;   /* Molecular — orange  */
  --an-ngs:#5B6CB8;   /* Automation & Workflow — indigo */
  --an-onc:#2F7E78;   /* Oncology — teal */
  --an-ease-out:cubic-bezier(.16,1,.3,1);
  /* 8px rhythm + modular scale tokens (local, non-leaking) */
  --an-s1:8px; --an-s2:16px; --an-s3:24px; --an-s4:32px; --an-s6:48px; --an-s8:64px;
}
.anotes-fx{padding-top:40px; padding-bottom:88px; position:relative; overflow:hidden}
.anotes-fx .wrap{max-width:1240px; margin-inline:auto; padding-inline:clamp(20px,5vw,40px); box-sizing:border-box; position:relative; z-index:1}

/* corner field removed here per request — kept on other sections (brands/hero) */
.anotes-fx::before{content:none}

/* ---- header: golden-ratio split (≈62 / 38) ---- */
.anotes-fx .notes-head{display:grid; grid-template-columns:1.618fr 1fr; align-items:end; gap:var(--an-s3) var(--an-s8);
  margin-bottom:clamp(40px,5vw,64px)}
.anotes-fx .notes-head .section-head{margin-bottom:0; max-width:none}
/* colour only; everything else inherits the canonical .eyebrow */
.anotes-fx .notes-head .section-head .eyebrow{color:var(--orange-ink)}
.anotes-fx .notes-head .section-head h2{font-size:var(--h-section); font-weight:600; line-height:1.12; letter-spacing:-.025em;
  margin:18px 0 0; padding-top:.04em; color:var(--ink)}
.anotes-fx .notes-head .section-head p{margin-top:14px; max-width:56ch; color:var(--muted); font-size:1.05rem; line-height:1.7}
.anotes-fx .notes-head .head-aside{display:flex; flex-direction:column; align-items:flex-start; gap:var(--an-s3); justify-self:start}
/* signature index-meter: a line-draws-on-reveal coverage gauge over the note set */
.anotes-fx .idxmeter{width:100%; max-width:280px}
.anotes-fx .idxmeter .im-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px}
.anotes-fx .idxmeter .im-n{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
  font-size:1.55rem; font-weight:var(--fw-mono); color:var(--ink); line-height:1}
.anotes-fx .idxmeter .im-n .u{color:var(--orange-ink); font-size:.62em}
.anotes-fx .idxmeter .im-lbl{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.anotes-fx .idxmeter svg{display:block; width:100%; height:auto; overflow:visible}
.anotes-fx .idxmeter .im-track{stroke:var(--line); stroke-width:3; stroke-linecap:round}
.anotes-fx .idxmeter .im-fill{stroke:var(--orange); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:var(--len,280); stroke-dashoffset:var(--len,280); transition:stroke-dashoffset 1.1s var(--an-ease-out)}
.anotes-fx.in .idxmeter .im-fill{stroke-dashoffset:var(--off,84)}
.anotes-fx .idxmeter .im-tick{fill:var(--paper); stroke:var(--line-2); stroke-width:1.5}
.anotes-fx .link-arrow{display:inline-flex; align-items:center; gap:8px; line-height:1.3; color:var(--orange-ink); font-weight:500; font-size:.93rem}
.anotes-fx .link-arrow svg{width:18px; height:18px; flex:0 0 auto; transition:transform .25s var(--ease)}
.anotes-fx .link-arrow:hover svg{transform:translateX(4px)}

/* ---- filter rail: real interactive controls, aria-pressed ---- */
.anotes-fx .note-filters{display:flex; flex-wrap:wrap; align-items:center; gap:var(--an-s1) var(--an-s2);
  margin-bottom:clamp(28px,3.2vw,40px); padding-bottom:var(--an-s3); border-bottom:1px solid var(--line)}
.anotes-fx .nf-lbl{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-right:4px}
.anotes-fx .nf-chip{display:inline-flex; align-items:center; gap:8px; padding:9px 15px; min-height:40px; cursor:pointer;
  font-family:inherit; font-size:.83rem; font-weight:500; color:var(--ink-2); background:var(--paper);
  border:1px solid var(--line-2); border-radius:100px; line-height:1;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease)}
.anotes-fx .nf-chip .sw{width:8px; height:8px; border-radius:50%; background:var(--an-dot,var(--orange)); flex-shrink:0; transition:transform .2s var(--ease)}
.anotes-fx .nf-chip .nf-n{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.72rem; color:var(--muted); transition:color .2s}
.anotes-fx .nf-chip:hover{border-color:var(--line-2); background:var(--surface); transform:translateY(-1px)}
.anotes-fx .nf-chip:hover .sw{transform:scale(1.25)}
.anotes-fx .nf-chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff; box-shadow:var(--shadow-sm)}
.anotes-fx .nf-chip[aria-pressed="true"] .nf-n{color:rgba(255,255,255,.6)}
.anotes-fx .nf-chip[data-f="all"][aria-pressed="true"] .sw{background:#fff}
.anotes-fx .nf-count{margin-left:auto; font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.74rem; color:var(--muted);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
.anotes-fx .nf-count b{color:var(--ink); font-weight:600}

/* ---- grid: 3-up, even white-space rhythm ---- */
.anotes-fx .note-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,24px)}
/* Icon-Bloom (no icon-box on this card → lift+shadow half only). The old left
   domain spine (::before width:3px scaleY bar) is removed so only the unified
   hover remains; the domain hue survives in the .note-tag dot/label. The
   cursor-tracked sheen is kept (it is not a side-accent bar). */
.anotes-fx .note-card{position:relative; display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .35s var(--ease-out), opacity .35s var(--an-ease-out);
  --an-accent:var(--orange); --an-accent-ink:var(--orange-ink)}
.anotes-fx .note-card[data-dom="ngs"]{--an-accent:var(--an-ngs); --an-accent-ink:#4453a0}
.anotes-fx .note-card[data-dom="onc"]{--an-accent:var(--an-onc); --an-accent-ink:#22615c}
/* cursor-tracked sheen */
.anotes-fx .note-card::after{content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%), rgba(233,138,44,.07), transparent 60%);
  transition:opacity .3s var(--ease)}
.anotes-fx .note-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-2)}
.anotes-fx .note-card:hover::after,.anotes-fx .note-card:focus-within::after{opacity:1}
.anotes-fx .note-card.dim{opacity:.32; filter:saturate(.55)}

.anotes-fx .note-inner{display:flex; flex-direction:column; flex:1; padding:clamp(22px,2vw,28px); box-sizing:border-box; position:relative; z-index:2}
.anotes-fx .note-top{display:flex; align-items:center; gap:10px; margin-bottom:var(--an-s2)}
.anotes-fx .note-tag{position:relative; display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.63rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--an-accent-ink); font-weight:var(--fw-mono); line-height:1.3;
  padding:5px 11px; border-radius:100px; background:var(--surface); align-self:flex-start;
  transition:background .35s var(--an-ease-out,var(--ease-out)), color .35s var(--an-ease-out,var(--ease-out))}
.anotes-fx .note-tag .td{width:7px; height:7px; border-radius:50%; background:var(--an-accent); flex-shrink:0; transition:background .35s var(--ease-out)}
/* Icon-Bloom equivalent for the icon-less note card: the domain tag fills its
   accent colour and a ring blooms out once (goffin-bloom keyframe in site.css). */
.anotes-fx .note-tag::after{content:""; position:absolute; inset:0; border-radius:inherit; border:2px solid var(--an-accent); opacity:0; pointer-events:none}
.anotes-fx .note-card:hover .note-tag{background:var(--an-accent); color:#fff}
.anotes-fx .note-card:hover .note-tag .td{background:#fff}
.anotes-fx .note-card:hover .note-tag::after{animation:goffin-bloom .7s var(--ease-out)}
.anotes-fx .note-card h3{font-size:var(--h-sub); line-height:1.3; letter-spacing:-.018em; margin:0 0 .6em; color:var(--ink)}
.anotes-fx .nbody{margin:0 0 1.5em; line-height:1.6; color:var(--muted); font-size:.92rem}
.anotes-fx .nfoot{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:auto;
  padding-top:var(--an-s2); border-top:1px solid var(--line)}
.anotes-fx .nfoot .rt{display:inline-flex; align-items:center; gap:7px; font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.74rem;
  color:var(--muted); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
.anotes-fx .nfoot .rt svg{width:13px; height:13px; opacity:.7}
.anotes-fx .nfoot .read{display:inline-flex; align-items:center; gap:6px; line-height:1.3; font-weight:600; font-size:.85rem; color:var(--an-accent-ink)}
.anotes-fx .nfoot .read svg{width:14px; height:14px; transition:transform .22s var(--ease)}
.anotes-fx .note-card:hover .nfoot .read svg{transform:translateX(3px)}
/* whole-card link via stretched anchor — keeps :focus-within sheen, AA target */
.anotes-fx .note-card .read::before{content:""; position:absolute; inset:0; z-index:4}

/* live readout for filter changes */
.anotes-fx .nf-live{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ---- consult band ---- */
.anotes-fx .consult{position:relative; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:18px 32px; margin-top:clamp(32px,3.5vw,48px);
  padding:clamp(26px,3vw,38px) clamp(24px,3vw,42px); box-sizing:border-box; border-radius:18px;
  background:var(--surface); border:1px solid var(--line)}
.anotes-fx .consult::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(460px 220px at 92% 50%, rgba(233,138,44,.08), transparent 70%)}
.anotes-fx .consult p{position:relative; z-index:1; margin:0; line-height:1.55; flex:1 1 320px; font-weight:600; color:var(--ink)}
.anotes-fx .consult p span{display:block; margin-top:.3em; font-weight:400; color:var(--muted); font-size:.92rem}
.anotes-fx .consult .btn{position:relative; z-index:1; flex:0 0 auto}

/* ---- orchestrated reveal (staggered) — final state by default ---- */
.anotes-fx [data-r]{opacity:0; transform:translateY(20px); transition:opacity .56s var(--an-ease-out), transform .56s var(--an-ease-out); transition-delay:var(--d,0s)}
.anotes-fx.in [data-r]{opacity:1; transform:none}
.anotes-fx :focus-visible{outline:2.5px solid var(--orange-ink); outline-offset:3px; border-radius:6px}

/* ---- responsive ---- */
@media(max-width:980px){
  .anotes-fx .notes-head{grid-template-columns:1fr; align-items:start}
  .anotes-fx .notes-head .head-aside{flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; width:100%}
  .anotes-fx .idxmeter{max-width:240px}
  .anotes-fx .note-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .anotes-fx .note-grid{grid-template-columns:1fr}
  .anotes-fx .nf-count{margin-left:0; width:100%; padding-top:4px}
  .anotes-fx .consult{flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:16px; padding:22px 20px}
  /* In the column layout the paragraph's flex-basis 320px became a 320px HEIGHT,
     leaving the big empty gap above the button — reset to content height. */
  .anotes-fx .consult p{flex:0 0 auto; width:100%}
}
@media(prefers-reduced-motion:reduce){
  .anotes-fx [data-r]{opacity:1 !important; transform:none !important}
  .anotes-fx .idxmeter .im-fill{transition:none}
  .anotes-fx .note-card,.anotes-fx .note-card::after{transition:none !important}
  .anotes-fx .note-card:hover{transform:none}
}

/* ============================================================
 * 6) BRANDS — .brands-fx
 * ============================================================ */
    /* ---------- scoped tokens & rhythm (8px grid · 1.25 type scale) ---------- */
    .brands-fx{--bfx-s1:8px;--bfx-s2:16px;--bfx-s3:24px;--bfx-s4:40px;--bfx-s5:64px;
      --bfx-ease:cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;padding-top:40px;padding-bottom:88px}
    .brands-fx .wrap{max-width:1120px;margin-inline:auto;padding-inline:clamp(20px,5vw,40px);box-sizing:border-box;position:relative;z-index:1}

    /* faint plotting grid as a deliberate field (no borders) */
    .brands-fx::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
      background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
      background-size:64px 64px;background-position:center;
      -webkit-mask-image:radial-gradient(120% 90% at 78% 22%,#000 0%,transparent 68%);
      mask-image:radial-gradient(120% 90% at 78% 22%,#000 0%,transparent 68%);opacity:.5}

    /* ---------- header on a ~62/38 split ---------- */
    .brands-fx .bfx-head{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
      gap:clamp(28px,4vw,var(--bfx-s5));align-items:end;margin-bottom:var(--bfx-s4)}
    /* colour only; size/weight/spacing/slash inherit the canonical .eyebrow */
    .brands-fx .bfx-head .eyebrow{color:var(--orange-ink)}
    .brands-fx .bfx-head h2{line-height:1.12;padding-top:.06em;font-size:var(--h-section);font-weight:600;
      letter-spacing:-.025em;margin:18px 0 14px}
    .brands-fx .bfx-head p{margin:0;max-width:46ch;color:var(--muted);font-size:1.05rem;line-height:1.7}

    /* count-up ledger — tabular mono figures, right column of the split */
    .brands-fx .bfx-ledger{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
      border-radius:var(--radius);overflow:hidden}
    .brands-fx .bfx-ledger .cell{background:var(--paper);padding:18px 18px 16px}
    .brands-fx .bfx-ledger b{font-family:var(--ff-mono); font-weight:var(--fw-mono);font-variant-numeric:tabular-nums;
      font-size:clamp(1.5rem,2.4vw,1.9rem);font-weight:var(--fw-mono);color:var(--ink);display:block;line-height:1;
      letter-spacing:-.01em;white-space:nowrap}
    .brands-fx .bfx-ledger b .u{color:var(--orange);display:inline}
    .brands-fx .bfx-ledger span{display:block;margin-top:8px;font-size:.78rem;color:var(--muted);line-height:1.35}

    /* ---------- domain filter rail (signature interaction) ---------- */
    .brands-fx .bfx-rail{display:flex;flex-wrap:wrap;gap:var(--bfx-s1);margin-bottom:var(--bfx-s3);
      align-items:center}
    .brands-fx .bfx-railc{font-family:var(--ff-mono); font-weight:var(--fw-mono);font-size:.68rem;letter-spacing:.16em;
      text-transform:uppercase;color:var(--muted);margin-right:var(--bfx-s1);display:inline-flex;align-items:center;gap:9px}
    .brands-fx .bfx-railc::before{content:"";width:18px;height:2px;background:var(--orange);display:inline-block}
    .brands-fx .bfx-chip{font-family:var(--ff-mono); font-size:.74rem;font-weight:var(--fw-mono);
      color:var(--ink-2);background:var(--paper);border:1px solid var(--line-2);border-radius:100px;
      padding:8px 14px;cursor:pointer;letter-spacing:.02em;line-height:1;display:inline-flex;align-items:center;gap:8px;
      transition:background .2s var(--bfx-ease),color .2s var(--bfx-ease),border-color .2s var(--bfx-ease),transform .2s var(--bfx-ease)}
    .brands-fx .bfx-chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5;transition:opacity .2s}
    .brands-fx .bfx-chip:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}
    .brands-fx .bfx-chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
    .brands-fx .bfx-chip[aria-pressed="true"] .dot{opacity:1;background:var(--orange)}
    .brands-fx .bfx-chip .n{font-variant-numeric:tabular-nums;opacity:.6;font-size:.7rem}

    /* ---------- brand grid (keeps shared .brand-grid / .brand-tile) ---------- */
    .brands-fx .brand-grid{position:relative}
    .brands-fx .brand-tile{position:relative;cursor:pointer;overflow:hidden;isolation:isolate;
      transition:border-color .25s var(--bfx-ease),transform .25s var(--bfx-ease),box-shadow .25s var(--bfx-ease),opacity .35s var(--bfx-ease),filter .35s var(--bfx-ease)}
    /* cursor-sheen layer */
    .brands-fx .brand-tile::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
      background:radial-gradient(140px circle at var(--mx,50%) var(--my,50%),var(--orange-wash),transparent 70%);
      transition:opacity .3s var(--bfx-ease)}
    /* Icon-Bloom lift+shadow (no icon-box here; the logo tile keeps its own
       bottom accent line + cursor sheen, which are not side-accent bars) */
    .brands-fx .brand-tile:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:var(--shadow);color:var(--ink)}
    .brands-fx .brand-tile:hover::after{opacity:1}
    /* domain accent line that animates in on hover/active */
    .brands-fx .brand-tile::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
      background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--bfx-ease)}
    .brands-fx .brand-tile:hover::before{transform:scaleX(1)}
    /* mono domain tag, revealed on hover */
    .brands-fx .brand-tile .bt-dom{position:absolute;top:9px;left:0;right:0;text-align:center;
      font-family:var(--ff-mono); font-weight:var(--fw-mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;
      color:var(--orange-ink);opacity:0;transform:translateY(-4px);transition:.25s var(--bfx-ease)}
    .brands-fx .brand-tile:hover .bt-dom{opacity:1;transform:none}
    .brands-fx .brand-tile .bt-name{transition:transform .25s var(--bfx-ease);display:flex;align-items:center;justify-content:center;min-height:34px}
    .brands-fx .brand-tile:hover .bt-name{transform:translateY(5px)}
    /* Uniform logo sizing: each asset is one identical 156x44 canvas with its
       optical scale already baked in, so we size by WIDTH only — a max-height
       here would re-introduce the very imbalance the canvas removes. */
    .brands-fx .brand-tile .bt-logo{width:156px;max-width:100%;height:auto;object-fit:contain;
      filter:grayscale(1);opacity:.8;transition:filter .25s var(--bfx-ease),opacity .25s var(--bfx-ease)}
    .brands-fx .brand-tile:hover .bt-logo,
    .brands-fx .brand-grid[data-filter] .brand-tile.is-match .bt-logo{filter:none;opacity:1}
    /* Touch devices have no hover, so logos would stay greyed forever — show
       them at full colour by default where hover isn't available. */
    @media(hover:none){ .brands-fx .brand-tile .bt-logo{filter:none;opacity:1} }
    .brands-fx .brand-tile .bt-word{font-weight:600;letter-spacing:-.01em}
    /* filter dim/active states */
    .brands-fx .brand-grid[data-filter] .brand-tile{opacity:.26;filter:saturate(.4)}
    .brands-fx .brand-grid[data-filter] .brand-tile.is-match{opacity:1;filter:none}
    .brands-fx .brand-grid[data-filter] .brand-tile.is-match::before{transform:scaleX(1)}
    .brands-fx .brand-grid[data-filter] .brand-tile.is-match .bt-dom{opacity:1;transform:none}
    .brands-fx .brand-tile:focus-visible{outline:2px solid var(--orange-ink);outline-offset:3px}

    /* ---------- live readout strip ---------- */
    .brands-fx .bfx-foot{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
      gap:clamp(20px,3vw,var(--bfx-s4));align-items:center;margin-top:var(--bfx-s4)}
    .brands-fx .bfx-readout{display:flex;align-items:center;gap:12px;min-height:46px;
      font-size:.9rem;color:var(--ink-2);line-height:1.5}
    .brands-fx .bfx-readout .rd-ic{width:34px;height:34px;flex-shrink:0;border-radius:9px;
      background:var(--orange-wash);color:var(--orange-ink);display:grid;place-items:center}
    .brands-fx .bfx-readout .rd-ic svg{width:18px;height:18px}
    .brands-fx .bfx-readout b{color:var(--ink);font-weight:600}
    .brands-fx .bfx-readout .rd-mono{font-family:var(--ff-mono); font-weight:var(--fw-mono);color:var(--orange-ink);
      font-variant-numeric:tabular-nums}
    .brands-fx .bfx-cta{justify-self:end}
    @media(max-width:560px){.brands-fx .bfx-cta{justify-self:start}}
    .brands-fx .bfx-cta .btn svg{transition:transform .25s var(--bfx-ease)}
    .brands-fx .bfx-cta .btn:hover svg{transform:translateX(4px)}

    /* ---------- reveal (orchestrated, transform/opacity only) ---------- */
    .brands-fx [data-bfx]{opacity:0;transform:translateY(18px);
      transition:opacity .56s var(--bfx-ease),transform .56s var(--bfx-ease);transition-delay:var(--bd,0s)}
    .brands-fx [data-bfx].in{opacity:1;transform:none}

    /* ---------- responsive splits ---------- */
    @media(max-width:860px){
      .brands-fx .bfx-head,.brands-fx .bfx-foot{grid-template-columns:1fr;gap:var(--bfx-s3)}
      .brands-fx .bfx-cta{justify-self:start}
    }
    @media(prefers-reduced-motion:reduce){
      .brands-fx [data-bfx]{opacity:1;transform:none;transition:none}
      .brands-fx .brand-tile,.brands-fx .brand-tile::before,.brands-fx .brand-tile::after,
      .brands-fx .brand-tile .bt-dom,.brands-fx .brand-tile .bt-name,.brands-fx .bfx-chip{transition:none}
      .brands-fx .brand-tile:hover{transform:none}
    }

/* ============================================================
 * 7) MICROBLOT-ARRAY — scroll-driven guided walkthrough (.mba-section)
 * ------------------------------------------------------------
 * A transparent full-height stage pins inside a tall track; a smoothed scroll
 * value drives seven beats (see microblot.php). The visible walkthrough lives
 * in a CONTAINED, floating card (.mba-card): capped to --maxw, inset top/bottom
 * so the page's paper shows around it — NOT full-width, NOT screen-filling.
 * The section itself takes the site's overlapping ROUNDED SEAM (same 34px round
 * + upward shadow as .enh-seam) so its entry out of the catalogue matches every
 * other section-to-section transition instead of a hard edge.
 * A Skip control (card top-right) jumps past the track so the pin never traps.
 * House tokens only — no teal/mint; control spots use ink (--mba-ctrl), orange
 * the single accent. All visuals are CSS/SVG geometry.
 * Needs position:sticky → site.css sets body{overflow-x:clip}.
 * ============================================================ */
  .mba-section{
    --mba-ctrl:var(--ink); --mba-ink:var(--ink); --mba-ink2:var(--ink-2); --mba-mut:var(--muted);
    --mba-amber:var(--orange); --mba-amber-ink:var(--orange-ink); --mba-neutral:#dcd7ce;
    --mba-ring:var(--line-2); --mba-line:var(--line); --mba-line-soft:var(--grey-2);
    --mba-paper:var(--surface);
    position:relative; z-index:4; background:var(--mba-paper);
    /* site seam: rise over the catalogue with a rounded top + soft shadow (no hard edge) */
    margin-top:-48px; border-top-left-radius:34px; border-top-right-radius:34px;
    box-shadow:0 -34px 70px -40px rgba(22,24,29,.22);
    /* clean paper band below the card so the next section's seam isn't jammed against the card's rounded bottom */
    padding-bottom:clamp(52px,7vh,96px)}
  .mba-track{position:relative}
  .mba-stage{position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center}
  /* the contained floating panel */
  .mba-card{position:relative; overflow:hidden;
    width:min(var(--maxw), calc(100% - clamp(24px,7vw,110px)));
    height:min(86vh,760px);
    background:var(--paper); border:1px solid var(--mba-line);
    border-radius:clamp(20px,2.2vw,30px);
    box-shadow:0 40px 90px -50px rgba(22,24,29,.35), 0 8px 24px -14px rgba(22,24,29,.14)}
  .mba-frame{position:relative; height:100%}

  /* decorative wash (clipped inside the card) */
  .mba-blob{position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:0}
  #mbaBlobA{width:440px; height:440px; top:-120px; right:-60px;
    background:radial-gradient(circle,rgba(233,138,44,.16),transparent 68%)}
  #mbaBlobB{width:520px; height:520px; bottom:-160px; left:-120px;
    background:radial-gradient(circle,rgba(22,24,29,.05),transparent 70%)}

  /* fixed chrome (positioned to the card's own edges) */
  .mba-eyebrow-fixed{position:absolute; top:clamp(18px,3%,28px); left:clamp(22px,3.4%,38px); z-index:6;
    font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mba-mut)}
  .mba-topright{position:absolute; top:clamp(15px,2.6%,26px); right:clamp(18px,3%,34px); z-index:7;
    display:flex; align-items:center; gap:14px}
  .mba-scene-label{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.72rem; letter-spacing:.16em; color:var(--mba-mut)}
  .mba-skip{display:inline-flex; align-items:center; gap:6px; cursor:pointer;
    font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--mba-ink2); background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    border:1px solid var(--mba-line); border-radius:999px; padding:7px 13px; line-height:1;
    transition:color .18s, border-color .18s, background .18s, transform .18s}
  .mba-skip svg{transition:transform .18s}
  .mba-skip:hover{color:var(--mba-amber-ink); border-color:var(--mba-amber)}
  .mba-skip:hover svg{transform:translateY(2px)}
  .mba-skip:focus-visible{outline:2px solid var(--mba-amber); outline-offset:2px}

  /* captions (stacked, centred) */
  .mba-captions{position:absolute; top:clamp(52px,11%,104px); left:50%; transform:translateX(-50%);
    width:min(660px,86%); text-align:center; z-index:5; pointer-events:none}
  .mba-cap{position:absolute; top:0; left:0; right:0; opacity:0}
  .mba-cap h2{font-size:clamp(1.5rem,3.4vw,2.5rem); font-weight:600; letter-spacing:-.028em; line-height:1.12; margin:0 0 12px; color:var(--mba-ink)}
  .mba-cap h2 .accent{color:var(--mba-amber-ink)}
  .mba-cap .sub{font-size:clamp(.98rem,1.4vw,1.12rem); line-height:1.6; color:var(--mba-ink2); max-width:52ch; margin:0 auto}

  /* blot strips — thin nitrocellulose membrane strips: dark holder cap + full-width lines (line-blot look) */
  .mba-strips{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transform-origin:center 42%; z-index:2}
  .mba-strips-row{display:flex; gap:26px; align-items:flex-start}
  .mba-strip{position:relative; width:34px; height:290px; border:1.6px solid var(--mba-ink); border-radius:3px;
    background:rgba(255,255,255,.55); overflow:hidden}
  .mba-strip .cap{position:absolute; top:0; left:0; right:0; height:24%; background:var(--mba-ink)}
  .mba-strip .band{position:absolute; left:0; right:0; height:9px}

  /* the well */
  .mba-well{position:absolute; top:50%; left:50%; width:330px; height:330px; z-index:3; transform:translate(-50%,-50%)}
  .mba-well-inner{position:absolute; inset:0}
  .mba-well-ring{position:absolute; inset:0; border-radius:50%; border:3px solid var(--mba-ring); background:#fff; box-shadow:var(--shadow)}
  .mba-well-ring2{position:absolute; inset:18px; border-radius:50%; border:1.2px solid var(--mba-line-soft)}
  .mba-grid{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    display:grid; grid-template-columns:repeat(15,12px); grid-auto-rows:12px; gap:4px}
  .mba-spot{width:12px; height:12px; border-radius:50%; background:var(--mba-neutral); opacity:0}
  .mba-triplets{position:absolute; top:50%; left:50%; width:236px; height:204px; transform:translate(-50%,-50%)}
  .mba-triplets .tl{position:absolute; top:0; height:100%; width:1px; background:var(--mba-amber); opacity:0}

  /* side panels (legend, curve) */
  .mba-side{position:absolute; top:50%; left:50%; width:320px; z-index:4; opacity:0; transform:translate(-50%,-50%)}
  .mba-side .lbl{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mba-mut); margin-bottom:16px}
  .mba-legend .row{display:flex; align-items:flex-start; gap:12px; margin-bottom:15px}
  .mba-legend .sw{width:18px; height:18px; border-radius:50%; flex-shrink:0; margin-top:2px}
  .mba-legend b{display:block; font-size:.96rem; color:var(--mba-ink); letter-spacing:-.01em}
  .mba-legend .row span{font-size:.86rem; color:var(--mba-mut); line-height:1.45}
  .mba-curve{width:min(540px,88%)}   /* centred + enlarged so the calibration read-out is prominent */
  .mba-curve svg{width:100%; height:auto; display:block}
  .mba-curve .axlabel{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:11px; fill:var(--mba-ink2)}

  /* comparison finale — balanced, mirror-symmetric side-by-side (single strip vs Microblot-Array) */
  .mba-compare{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:5; opacity:0;
    width:min(760px,92%); text-align:center; display:flex; flex-direction:column; align-items:center}
  .mba-fin-h{font-size:clamp(1.5rem,3.4vw,2.5rem); font-weight:600; letter-spacing:-.028em; line-height:1.12; margin:0 0 clamp(26px,3.2vw,38px); color:var(--mba-ink)}
  .mba-cmp{display:flex; align-items:center; justify-content:center; gap:clamp(24px,3.4vw,50px); width:100%; margin-bottom:clamp(28px,3.2vw,40px)}
  .cmp-side{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:clamp(16px,1.9vw,24px)}
  .cmp-side.old{text-align:right; align-items:flex-end; opacity:.6}
  .cmp-side.new{text-align:left; align-items:flex-start}
  .cmp-lbl{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mba-mut)}
  .cmp-lbl.accent{color:var(--mba-amber-ink)}
  .cmp-stat{display:inline-flex; align-items:baseline; gap:11px}
  .cmp-side.new .cmp-stat{align-items:center}
  .cmp-stat .num{font:var(--fw-mono) clamp(24px,2.8vw,36px)/1 var(--ff-mono); color:var(--mba-ink2); letter-spacing:-.01em; white-space:nowrap}
  .cmp-stat .num.big{display:inline-flex; align-items:baseline; font:600 clamp(40px,5vw,64px)/.9 'Poppins',sans-serif; letter-spacing:-.03em}
  .cmp-stat .num.big.amber{color:var(--mba-amber-ink)}
  .cmp-stat .num.big.ink{color:var(--mba-ink)}
  .cmp-stat .num.big .u{font-size:.42em; margin-left:1px}
  .cmp-stat .lab{font-size:.85rem; line-height:1.32; color:var(--mba-mut); max-width:12ch}
  .cmp-div{flex:0 0 1px; align-self:center; width:1px; height:clamp(112px,14vw,152px);
    background:linear-gradient(180deg,transparent,var(--mba-line) 22%,var(--mba-line) 78%,transparent)}
  .mba-cta-row{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
  .mba-btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 22px; border-radius:999px;
    font-weight:600; font-size:.94rem; letter-spacing:.01em; text-decoration:none; transition:transform .18s, box-shadow .18s, background .18s, color .18s}
  .mba-btn.solid{background:var(--mba-amber); color:#fff; box-shadow:0 8px 20px -8px rgba(233,138,44,.7)}
  .mba-btn.solid:hover{transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(233,138,44,.8)}
  .mba-btn.ghost{background:#fff; color:var(--mba-ink); border:1px solid var(--mba-line-2,#e0dcd4)}
  .mba-btn.ghost:hover{transform:translateY(-2px); border-color:var(--mba-amber)}

  /* progress + hint */
  .mba-progress{position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--mba-amber); z-index:8}
  .mba-hint{position:absolute; left:50%; bottom:clamp(14px,3%,26px); transform:translateX(-50%); z-index:6;
    font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mba-mut)}
  .mba-hint .arrow{display:inline-block; animation:mbaBob 1.6s ease-in-out infinite}
  @keyframes mbaBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

  @media(max-width:760px){
    .mba-card{height:min(88vh,720px); width:calc(100% - clamp(16px,5vw,28px))}
    .mba-eb-suffix{display:none}   /* keep the top-left eyebrow clear of the Skip pill */
    .mba-side{width:280px}
    /* finale: stack the comparison (old over new); divider turns horizontal */
    .mba-compare{width:min(440px,92%)}
    .mba-cmp{flex-direction:column; gap:16px}
    .cmp-side{flex:none}
    .cmp-side.old,.cmp-side.new{align-items:center; text-align:center}
    .cmp-stat .num.big{font-size:clamp(40px,13vw,58px)}
    .cmp-div{width:clamp(120px,46%,190px); height:1px; align-self:center;
      background:linear-gradient(90deg,transparent,var(--mba-line),transparent)}
    .mba-captions{top:clamp(40px,7%,72px)}
  }
  @media(prefers-reduced-motion:reduce){
    .mba-hint .arrow{animation:none}
    .mba-skip svg{transition:none}
  }