/* ============================================================
   GOFFIN — "samenspel & overgang" enhancement  ·  enhance.css
   ------------------------------------------------------------
   ADDITIVE ONLY. The client's composition is kept EXACTLY as-is;
   this layer adds the connective tissue BETWEEN sections:
     · overlapping rounded seams (sections slide over each other)
     · a quiet scroll-progress thread (overzicht)
     · GPU hints for the GSAP parallax / pin-scrub
   All motion is GSAP-driven (enhance.js) and fully disabled under
   prefers-reduced-motion, leaving the original composition intact.

   HEADING TYPOGRAPHY: this file contains NO <h1>-<h6> element rules and
   NO heading font-size / font-weight overrides. Canonical heading scale
   (one weight = 600, one size per role) lives in css/site.css §3. The
   `font:600 …` declarations below are nav/drawer CONTROLS (buttons,
   links), not headings — already at the canonical 600 weight, kept as-is.
   ============================================================ */

/* quiet scroll-progress thread — a calm "overview" cue */
.enh-progress{
  position:fixed; inset:0 0 auto 0; height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--orange), var(--orange-ink));
  z-index:2000; pointer-events:none;
}

/* OVERLAPPING ROUNDED SEAMS — the "overgang van section naar section".
   enhance.js adds .enh-seam to every top-level section after the hero and
   gives each a rising z-index so it slides up over the previous one. */
.enh-seam{
  position:relative;
  border-top-left-radius:34px; border-top-right-radius:34px;
  margin-top:-48px; /* fixed overlap → symmetric spacing each side of every seam */
  box-shadow:0 -34px 70px -40px rgba(22,24,29,.22);
}
/* round the very bottom of the page's last seam back off (cap sits flush) */
.enh-seam:last-of-type{}

/* the hero gets a soft "settle" origin for its parallax (no seam on top) */
.enh-parallax{will-change:transform}

/* ---- PINNED HORIZONTAL SHELF (desktop, pointer:fine only) ---- */
/* enhance.js adds .gh-pinned when it takes the shelf over with GSAP. */
.ghscroll.gh-pinned{overflow:hidden}
/* clip the moving track to its own column so cards never slide over the left rail,
   with a soft fade at both edges so cards dissolve into the gutter (not a hard cut) */
.ghscroll.gh-pinned .gh-viewport{
  overflow:hidden;
  -webkit-mask:linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 34px), transparent 100%);
          mask:linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 34px), transparent 100%);
}
.ghscroll.gh-pinned .gh-track{
  overflow:visible; scroll-snap-type:none; scroll-behavior:auto;
  padding-right:0; will-change:transform;
}
.ghscroll.gh-pinned .gh-viewport::after{opacity:0}      /* edge-fade off while pinned */
.ghscroll.gh-pinned .gh-track:focus-visible{outline:none}

/* a faint "scroll to advance" hint shown only while the shelf is pinned + active */
.ghscroll .gh-hint{
  position:absolute; right:4px; bottom:-2px; display:none; align-items:center; gap:8px;
  font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); pointer-events:none;
}
.ghscroll.gh-pinned .gh-hint{display:inline-flex}
.ghscroll .gh-hint svg{width:14px; height:14px; color:var(--orange-ink)}

/* ---- reduced motion: drop the whole enhancement, restore the original ---- */
@media(prefers-reduced-motion:reduce){
  .enh-seam{margin-top:0; border-radius:0; box-shadow:none}
  .enh-progress, .ghscroll .gh-hint{display:none !important}
  .ghscroll.gh-pinned{overflow:visible}
  .ghscroll.gh-pinned .gh-track{overflow-x:auto; scroll-snap-type:x mandatory}
}

/* ============================================================
   SMART MENU — full-width mega panel (desktop) + mobile drawer
   Additive; reuses the composition's tokens (orange-sparing, calm).
   ============================================================ */

/* anchor the full-width panel to the header, not the <li>.
   The override must out-specify the composition's `.ogx-menu>li{position:relative}`. */
/* lift header+mega above the hero panel. !important because the composition's
   main stylesheet lives in a <body><style> that loads AFTER enhance.css. */
.ogx-nav1{z-index:500 !important}
.ogx-nav1 .ogx-head{position:relative}
/* position:static AND transform:none so the <li> is NOT a containing block
   (its .ogx-stag entrance transform would otherwise trap the absolute panel). */
.ogx-nav1 .ogx-menu > li.ogx-has-mega{position:static; transform:none !important; will-change:auto !important}

.ogx-nav1 .ogx-mega{
  position:absolute; left:0; right:0; top:100%;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .24s var(--ease-out,ease), transform .24s var(--ease-out,ease), visibility .24s;
  pointer-events:none; z-index:90;
}
.ogx-nav1 .ogx-mega::before{content:""; position:absolute; left:0; right:0; top:-14px; height:14px} /* hover bridge */
.ogx-nav1 .ogx-has-mega:hover > .ogx-mega,
.ogx-nav1 .ogx-has-mega:focus-within > .ogx-mega,
.ogx-nav1 .ogx-has-mega.open > .ogx-mega{opacity:1; visibility:visible; transform:none; pointer-events:auto}
.ogx-nav1 .ogx-has-mega:hover > a .ogx-caret,
.ogx-nav1 .ogx-has-mega:focus-within > a .ogx-caret,
.ogx-nav1 .ogx-has-mega.open > a .ogx-caret{transform:rotate(180deg)}

.ogx-mega-inner{
  max-width:var(--maxw); margin:10px auto 0; padding:24px;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:0 34px 80px -38px rgba(22,24,29,.34), 0 1px 0 rgba(22,24,29,.03);
}
/* minmax(0,1fr) is load-bearing: 1fr = minmax(auto,1fr), whose auto minimum
   floors a column at min-content — the unbreakable "Immunodiagnostics" title
   made its column ~49px wider than the rest. 0-minimum tracks are truly
   equal; --mcols comes inline from header.php (ACF domain count, fallback 4)
   so a 5th editor-added domain cannot reintroduce the bug. */
.ogx-mega-cols{display:grid; grid-template-columns:repeat(var(--mcols,4),minmax(0,1fr)); gap:0 30px}
/* Identical padding on every column (0 left / 30 right) keeps every content box
   the same width and centres the hairline in the gutter (30px padding one side,
   the 30px grid gap the other). The old :first-child padding exception offset
   column 1's content and read as uneven gaps. */
.ogx-mcol{display:flex; flex-direction:column; padding:4px 30px 4px 0; border-right:1px solid rgba(22,24,29,.16); position:relative}
/* :last-of-type was DEAD here too — .ogx-mfeat is the last div sibling, so no
   .ogx-mcol matched and the last domain column kept a trailing hairline. */
.ogx-mcol:has(+ .ogx-mfeat),
.ogx-mcol:last-child{border-right:none}
.ogx-mcol::before{content:""; display:block; width:28px; height:3px; border-radius:2px; margin:0 0 14px; background:var(--line)}
.ogx-mcol[data-dom="mol"]::before{background:var(--orange)}
.ogx-mcol[data-dom="imm"]::before{background:#2F7E78}
.ogx-mcol[data-dom="auto"]::before{background:#5B6CB8}
.ogx-mcol[data-dom="ngs"]::before{background:#5B6CB8}
.ogx-mcol[data-dom="poc"]::before{background:#4f9a77}
/* min-height on the title reserves space for 2 lines always, so a short
   1-line title ("ELISA · serology · rapid tests") and a long 2-line one
   ("Real-Time PCR · LAMP · multiplex") end at the same Y — keeping the
   hairline rule + every subcategory row below it aligned across all 4
   mega-menu columns, instead of jumping per column. */
.ogx-mcol-head{display:flex; gap:12px; align-items:center; padding:4px 4px 14px; margin-bottom:8px;
  border-bottom:1px solid var(--line); border-radius:10px}
.ogx-mcol-head:hover{background:var(--surface)}
.ogx-mic{width:38px; height:38px; border-radius:10px; background:var(--surface); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--ink); flex-shrink:0; transition:.2s}
.ogx-mcol-head:hover .ogx-mic{background:var(--orange-wash); border-color:var(--orange-wash); color:var(--orange-ink)}
.ogx-mic svg{width:20px; height:20px}
/* min-width:0 lets the title flex item shrink now the grid track can go
   below min-content; hyphens+anywhere wrap "Immunodiagnostics" instead of
   letting it overflow its equal-width column. */
.ogx-mct{min-height:2.5em; min-width:0; display:flex; flex-direction:column; justify-content:center}
.ogx-mct b{display:block; font-size:.94rem; color:var(--ink); font-weight:600; letter-spacing:-.01em; line-height:1.25;
  overflow-wrap:break-word; hyphens:auto}
.ogx-mct small{display:block; font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.64rem; letter-spacing:.03em;
  color:var(--muted); margin-top:4px}
.ogx-mcol > a:not(.ogx-mcol-head):not(.ogx-mall){
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 10px; border-radius:8px; font-size:.9rem; color:var(--ink-2);
  transition:background .16s, color .16s, padding-left .16s;
}
.ogx-mcol > a:not(.ogx-mcol-head):not(.ogx-mall):hover{background:var(--grey); color:var(--ink); padding-left:15px}
.ogx-mcol .ogx-n{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.72rem; color:var(--muted); transition:color .16s}
.ogx-mcol > a:hover .ogx-n{color:var(--orange-ink)}
.ogx-mall{margin-top:auto; padding-top:14px !important; color:var(--orange-ink); font-weight:600; font-size:.84rem;
  display:inline-flex; align-items:center; gap:7px}
.ogx-mall svg{width:15px; height:15px; transition:transform .2s}
.ogx-mall:hover svg{transform:translateX(3px)}

/* feature BAND — spans the full width below the four domain columns */
.ogx-mfeat{grid-column:1 / -1; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px;
  margin-top:12px; padding:16px 0 0; border-top:1px solid var(--line); border-right:none}
.ogx-mfeat .ogx-dd-label{flex-basis:100%; font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); padding:0 0 2px}
.ogx-mq{flex:1 1 190px; display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:10px;
  border:1px solid var(--line); font-size:.9rem; font-weight:500; color:var(--ink); transition:background .16s, border-color .16s}
.ogx-mq > span:nth-child(2){flex:1}
.ogx-mq:hover{background:var(--surface); border-color:var(--line-2)}
.ogx-mqic{width:32px; height:32px; border-radius:8px; background:var(--orange-wash); color:var(--orange-ink);
  display:grid; place-items:center; flex-shrink:0}
.ogx-mqic svg{width:17px; height:17px}
.ogx-mq .ogx-n{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.72rem; color:var(--orange-ink)}
.ogx-mcta{flex:1.5 1 320px; margin-top:0; display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--ink); color:#fff; border-radius:12px; padding:12px 16px}
.ogx-mcta b{display:block; font-size:.9rem; margin:0; line-height:1.25}
.ogx-mcta p{display:none}
.ogx-mcta-btn{flex-shrink:0; display:inline-flex; align-items:center; gap:8px; background:var(--orange); color:#fff;
  padding:10px 16px; border-radius:9px; font-weight:600; font-size:.84rem; transition:background .2s, transform .2s}
.ogx-mcta-btn:hover{background:#d97b1f; transform:translateY(-1px)}
.ogx-mcta-btn svg{width:15px; height:15px}

.ogx-mega-foot{display:flex; justify-content:space-between; align-items:center; gap:16px;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:.79rem; color:var(--muted); flex-wrap:wrap}
.ogx-mega-foot b{color:var(--ink); font-family:var(--ff-mono); font-weight:var(--fw-mono)}
.ogx-mega-tag{font-style:italic}

/* breakpoints keep minmax(0,1fr) — plain 1fr would re-floor a track at the
   min-content of "Immunodiagnostics" and unequalize the columns again. */
@media(max-width:1180px){ .ogx-mega-inner{padding:18px} .ogx-mcol{padding:4px 11px}
  .ogx-mega-cols{grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 10px}
  .ogx-mcol{border-right:none}
}
@media(max-width:680px){ .ogx-mega-cols{grid-template-columns:minmax(0,1fr)} }

/* ---------- MOBILE DRAWER (burger) ---------- */
.ogx-mscrim{position:fixed; inset:0; background:rgba(20,22,26,.46); z-index:190; opacity:0; visibility:hidden; transition:.3s}
.ogx-mscrim.open{opacity:1; visibility:visible}
/* Full-screen mobile menu (kept in sync with site.css). */
.ogx-mdrawer{position:fixed; inset:0; width:100%; height:100dvh; background:#fff; z-index:600;
  transform:translateX(100%); transition:transform .42s var(--ease-out,cubic-bezier(.16,1,.3,1)); overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:16px 20px calc(30px + env(safe-area-inset-bottom)); display:flex; flex-direction:column}
.ogx-mdrawer.open{transform:none}
.ogx-mdrawer > *:not(.ogx-md-head){opacity:0; transform:translateY(12px); transition:opacity .45s var(--ease-out,ease), transform .45s var(--ease-out,ease)}
.ogx-mdrawer.open > *:not(.ogx-md-head){opacity:1; transform:none}
.ogx-mdrawer.open > *:nth-child(2){transition-delay:.05s}
.ogx-mdrawer.open > *:nth-child(3){transition-delay:.09s}
.ogx-mdrawer.open > *:nth-child(4){transition-delay:.13s}
.ogx-mdrawer.open > *:nth-child(5){transition-delay:.17s}
.ogx-mdrawer.open > *:nth-child(6){transition-delay:.21s}
.ogx-mdrawer.open > *:nth-child(7){transition-delay:.25s}
.ogx-mdrawer.open > *:nth-child(8){transition-delay:.29s}
.ogx-mdrawer.open > *:nth-child(9){transition-delay:.33s}
.ogx-mdrawer.open > *:nth-child(10){transition-delay:.37s}
.ogx-mdrawer.open > *:nth-child(n+11){transition-delay:.41s}
@media(prefers-reduced-motion:reduce){
  .ogx-mdrawer > *:not(.ogx-md-head){opacity:1; transform:none; transition:none}
}
.ogx-md-head{display:flex; align-items:center; justify-content:space-between; padding:4px 2px 16px; margin-bottom:6px; border-bottom:1px solid var(--line)}
.ogx-md-head img{height:30px}
.ogx-md-close{width:42px; height:42px; border:none; background:transparent; border-radius:9px; display:grid; place-items:center; cursor:pointer; color:var(--ink)}
.ogx-md-close:hover{background:var(--grey)}
.ogx-md-close svg{width:22px; height:22px}
.ogx-macc{border-bottom:1px solid var(--line)}
.ogx-macc > button{width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:none; border:none; padding:16px 4px; font:600 1rem 'Poppins',sans-serif; color:var(--ink); cursor:pointer; text-align:left}
.ogx-macc > button .cv{width:20px; height:20px; transition:transform .25s; color:var(--muted); flex-shrink:0}
.ogx-macc.open > button .cv{transform:rotate(180deg)}
.ogx-macc-body{max-height:0; overflow:hidden; transition:max-height .3s var(--ease-out,ease)}
.ogx-macc-body a{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 10px;
  font-size:.92rem; color:var(--ink-2); border-radius:8px}
.ogx-macc-body a:hover{background:var(--grey); color:var(--ink)}
.ogx-macc-body a .ogx-n{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.72rem; color:var(--muted)}
.ogx-macc-body{padding-bottom:6px}
.ogx-md-link{display:block; padding:16px 4px; font:600 1rem 'Poppins',sans-serif; color:var(--ink); border-bottom:1px solid var(--line)}
.ogx-md-cta{margin-top:20px; display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--orange); color:#fff; padding:14px; border-radius:11px; font-weight:600; font-size:.95rem}
.ogx-md-cta svg{width:18px; height:18px}
.ogx-md-meta{margin-top:16px; font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.68rem; letter-spacing:.04em; color:var(--muted); text-align:center}

@media(prefers-reduced-motion:reduce){
  .ogx-nav1 .ogx-mega{transition:none}
  .ogx-mdrawer,.ogx-macc-body{transition:none}
}

/* ============================================================
   HEADER SEARCH — visible "working" indicator + mobile overlay
   ------------------------------------------------------------
   Additive. The desktop .ogx-xsearch bar + its .xs-* suggestion rows are
   styled in site.css; this layer only adds (a) the typing spinner slot that
   reassures the user the field is live, and (b) the mobile full-screen search
   (trigger + overlay) that main.js injects on small viewports. Both spinners
   fall back to a STATIC ring under prefers-reduced-motion (no spin).
   ============================================================ */

/* spin keyframe, shared by the desktop bar + the mobile overlay */
@keyframes ogx-spin{to{transform:rotate(360deg)}}

/* --- desktop bar: the "searching" spinner (main.js toggles .is-searching) ---
   Fixed-size, opacity-only toggle: never animates a layout property, so it
   can't thrash the bar's flex layout while it spins. */
.ogx-xsearch .xs-spin{
  position:absolute; left:20px; top:50%; margin-top:-8px;
  width:16px; height:16px; box-sizing:border-box; pointer-events:none;
  border-radius:50%; border:2px solid transparent; opacity:0;
  transition:opacity .18s ease;
}
.ogx-xsearch.is-searching .xs-spin{
  opacity:1;
  border-color:var(--line); border-top-color:var(--orange-ink);
  animation:ogx-spin .7s linear infinite;
}
/* the leading search glyph fades out under the spinner while a lookup is live, so
   the "working" cue sits exactly where the search icon was — no reserved gap in
   the bar and no layout shift as it toggles. */
.ogx-xsearch .xs-lead{transition:opacity .18s ease}
.ogx-xsearch.is-searching .xs-lead{opacity:0}
/* while busy the ENTER hint recedes so the spinner reads as the live cue */
.ogx-xsearch.is-searching .xs-kbd{opacity:.4}

/* --- mobile search trigger (header icon, ≤980px only) --- */
.ogx-msearch-trigger{display:none}
@media(max-width:980px){
  .ogx-msearch-trigger{
    display:grid; place-items:center; width:42px; height:42px;
    border:0; background:transparent; border-radius:10px; cursor:pointer;
    color:var(--ink); -webkit-tap-highlight-color:transparent;
  }
  .ogx-msearch-trigger:hover{background:var(--grey)}
  .ogx-msearch-trigger:focus-visible{outline:2px solid var(--orange-ink); outline-offset:2px}
  .ogx-msearch-trigger svg{width:22px; height:22px}
}
/* The header gains a search trigger on mobile. On the narrowest phones, drop the
   secondary "Contact" pill (it still lives in the burger drawer) so the header row
   — logo · search · quote · menu — never overflows horizontally. */
@media(max-width:560px){
  .ogx-nav1 .ogx-nav-right .ogx-contact{display:none}
}

/* --- mobile full-screen overlay --- */
.ogx-msearch{
  position:fixed; inset:0; z-index:3200;
  background:rgba(20,22,26,.5);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden;
  transition:opacity .24s var(--ease-out,ease), visibility .24s;
}
.ogx-msearch[hidden]{display:none}
.ogx-msearch.open{opacity:1; visibility:visible}
.ogx-msearch .ms-sheet{
  background:#fff;
  padding:calc(14px + env(safe-area-inset-top,0px)) 16px 18px;
  box-shadow:0 26px 64px -30px rgba(0,0,0,.55);
  max-height:100vh; max-height:100dvh; overflow-y:auto;
  transform:translateY(-14px);
  transition:transform .3s var(--ease-out,ease);
}
.ogx-msearch.open .ms-sheet{transform:none}
.ogx-msearch .ms-row{position:relative; display:flex; align-items:center; gap:10px; min-height:52px}
.ogx-msearch .ms-lead{display:grid; place-items:center; width:22px; height:22px; color:var(--muted); flex-shrink:0}
.ogx-msearch .ms-lead svg{width:22px; height:22px}
.ogx-msearch input[type=search]{
  flex:1; min-width:0; border:0; outline:0; background:none;
  font-family:inherit; font-size:1.15rem; font-weight:500; color:var(--ink);
  -webkit-appearance:none; appearance:none;
}
.ogx-msearch input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
.ogx-msearch input::placeholder{color:var(--muted); font-weight:400}
.ogx-msearch .ms-spin{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:22px; height:22px; box-sizing:border-box; pointer-events:none;
  border-radius:50%; border:2px solid transparent; opacity:0;
  transition:opacity .18s ease;
}
.ogx-msearch.is-searching .ms-spin{
  opacity:1;
  border-color:var(--line); border-top-color:var(--orange-ink);
  animation:ogx-spin .7s linear infinite;
}
/* leading glyph → spinner swap (mirrors the desktop bar), so the busy cue takes
   the search icon's place with no reserved slot in the row */
.ogx-msearch .ms-lead{transition:opacity .18s ease}
.ogx-msearch.is-searching .ms-lead{opacity:0}
.ogx-msearch .ms-close{
  width:44px; height:44px; flex-shrink:0; border:0; border-radius:50%;
  background:var(--grey); color:var(--ink); display:grid; place-items:center; cursor:pointer;
  transition:background .2s, color .2s;
}
.ogx-msearch .ms-close:hover{background:var(--ink); color:#fff}
.ogx-msearch .ms-close svg{width:20px; height:20px}
.ogx-msearch .ms-hint{
  margin:12px 2px 2px; font-family:var(--ff-mono); font-weight:var(--fw-mono);
  font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}

/* suggestions inside the overlay (main.js emits the shared .xs-* class names) */
.ogx-msearch .ms-suggest{margin-top:10px; padding-top:10px; border-top:1px solid var(--line)}
.ogx-msearch .ms-suggest[hidden]{display:none}
.ogx-msearch .xs-sgroup{
  font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); padding:10px 4px 5px;
}
.ogx-msearch .xs-sitem{
  display:flex; align-items:center; gap:10px; padding:12px 10px; border-radius:10px;
  color:var(--ink); font-size:1rem;
}
.ogx-msearch .xs-sitem:hover,.ogx-msearch .xs-sitem.is-active{background:var(--surface); color:var(--orange-ink)}
.ogx-msearch .xs-sitem-lbl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* reduced motion: kill the spin + slide, keep a STATIC ring so the busy state
   is still visible without motion */
@media(prefers-reduced-motion:reduce){
  .ogx-xsearch .xs-spin,.ogx-msearch .ms-spin{transition:none; animation:none !important}
  .ogx-xsearch .xs-lead,.ogx-msearch .ms-lead{transition:none}
  .ogx-xsearch.is-searching .xs-spin,.ogx-msearch.is-searching .ms-spin{
    animation:none !important; border-color:var(--orange-ink);
  }
  .ogx-msearch,.ogx-msearch .ms-sheet{transition:none}
  .ogx-msearch .ms-sheet{transform:none}
}

/* search suggestion thumbnails (product/app-note) — desktop + mobile overlay */
.ogx-xsearch .xs-sitem,.ogx-msearch .xs-sitem,.ms-suggest .xs-sitem{gap:11px}
.xs-sthumb{width:36px;height:36px;border-radius:8px;object-fit:cover;flex-shrink:0;
  border:1px solid var(--line);background:var(--surface)}

/* --- crisp text while searching ---
   .ogx-head carries backdrop-filter:blur(14px) for the translucent bar. That
   filter promotes the whole header subtree — including the suggestions panel —
   to its own composited layer, where subpixel text antialiasing is switched
   off. Result: the search results render visibly softer than the rest of the
   page, which is exactly what was reported. While the search is open the bar
   is covered by the panel anyway, so drop the blur and go fully opaque; the
   translucency returns the moment the search closes. */
.ogx-nav1.xsearching .ogx-head{
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background:#fff;
}