/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/
/* === MEGA MENU — STYLES & ANIMATIONS === */

/* --- 1. CHEVRON FLIP VERTICAL --- */
.elementor-widget-n-menu .e-n-menu-title .e-n-menu-dropdown-icon {
  transition: transform 0.25s ease;
  display: inline-flex;
  align-items: center;
}
.elementor-widget-n-menu .e-n-menu-title.e-current .e-n-menu-dropdown-icon,
.elementor-widget-n-menu .e-n-menu-title:hover .e-n-menu-dropdown-icon,
.elementor-widget-n-menu .e-n-menu-item:hover .e-n-menu-title .e-n-menu-dropdown-icon {
  transform: scaleY(-1);
}
.elementor-widget-n-menu .e-n-menu-dropdown-icon-opened {
  display: none !important;
}
.elementor-widget-n-menu .e-n-menu-dropdown-icon-closed {
  display: inline-flex !important;
}


/* --- 2. NEUTRALISER LE FADEIN NATIF --- */
.elementor-widget-n-menu .animated.fadeIn,
.elementor-widget-n-menu .animated {
  animation: none !important;
}


/* --- 3. FORCER LE DROPDOWN À RESTER FLEX (override Elementor) --- */
.elementor-widget-n-menu .e-n-menu-content {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: 
    opacity 0.25s ease-out,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.4s;
  pointer-events: none;
}
.elementor-widget-n-menu .e-n-menu-content.e-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: 
    opacity 0.25s ease-out,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}


/* --- 4. SUPPRIMER LES SOULIGNEMENTS --- */
.elementor-widget-n-menu a,
.elementor-widget-n-menu a:hover,
.elementor-widget-n-menu a:visited,
.elementor-widget-n-menu a:focus,
.megamenu-item a,
.megamenu-item-wrapper a,
.submenu-list a,
.dropdown-item a {
  text-decoration: none !important;
}


/* --- 5. MEGAMENU ITEMS — Couleur + décalage au hover --- */
.megamenu-item,
.megamenu-item a,
.megamenu-item-wrapper .megamenu-item,
.megamenu-item-wrapper .megamenu-item a {
  color: #ffffff !important;
  cursor: pointer;
  display: inline-block;
  transition: color 0.2s ease, transform 0.2s ease;
}
.megamenu-item:hover,
.megamenu-item:hover a,
.megamenu-item-wrapper:hover .megamenu-item,
.megamenu-item-wrapper:hover .megamenu-item a {
  color: #ff3355 !important;
  transform: translateX(4px);
}


/* --- 6. MEGAMENU EYEBROWS --- */
.megamenu-eyebrow,
.megamenu-eyebrow a {
  color: #ff3355 !important;
  text-decoration: none !important;
  transition: color 0.25s ease;
}
.megamenu-eyebrow:has(a),
.megamenu-eyebrow a {
  cursor: pointer;
}
.megamenu-eyebrow:has(a):hover,
.megamenu-eyebrow:has(a):hover a,
.megamenu-eyebrow a:hover {
  color: #e62041 !important;
  text-decoration: none !important;
}


/* --- 7. SUBMENU LISTS (sous-liens inline · séparés) --- */
.submenu-list,
.submenu-list p {
  color: rgba(255, 255, 255, 0.3) !important;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}
.submenu-list a {
  color: rgba(255, 255, 255, 0.7) !important;
  transition: color 0.2s ease;
  font-weight: 400;
}
.submenu-list a:hover {
  color: #ffffff !important;
}


/* --- 8. SIMPLE DROPDOWN ITEMS (Resources, About) --- */
.dropdown-item,
.dropdown-item a {
  color: #ffffff !important;
  cursor: pointer;
  transition: color 0.2s ease;
}
.dropdown-item:hover,
.dropdown-item:hover a {
  color: #ff3355 !important;
}


/* --- 9. MEGA MENU TYPOGRAPHY — owned by the utility classes ---
   Scoped under .e-n-menu-content so it outranks Elementor's atomic
   Paragraph base/per-widget styles (single-class) without !important.
   Stays menu-only, so it clones cleanly to the MultiOmics header. */
.e-n-menu-content .megamenu-eyebrow,
.e-n-menu-content .megamenu-eyebrow a {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0;
}
/* Covers .dropdown-item too — "News & press" carries only that class */
.e-n-menu-content .megamenu-item,
.e-n-menu-content .megamenu-item a,
.e-n-menu-content .dropdown-item,
.e-n-menu-content .dropdown-item a {
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}
.e-n-menu-content .megamenu-card-title {
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
  color: #ffffff;
  margin: 0;
}
.e-n-menu-content .megamenu-card-cta {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  color: #ff3355;
  margin: 0;
}

/* === MEGAMENU FEATURED CARDS — Hover === */
.megamenu-card {
  transition: 
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
  cursor: pointer;
}
.megamenu-card:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(6, 182, 212, 0.25) !important;
  transform: translateY(-1px);
}

/* Animer flêche sur bouton contact us*/
.exp-arrow-ease .elementor-button-icon,
.exp-arrow-ease::after {
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-arrow-ease:hover .elementor-button-icon,
.exp-arrow-ease:hover::after {
    transform: translateX(4px);
}

/* Décaler le header sticky sous l'admin bar (utilisateurs connectés uniquement) */
body.admin-bar .site-header {
  top: 32px !important;
}
@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px !important;
  }
}


/* Arrow on primary CTA only (keeps hierarchy clear) */
.btn-cro-primary::after,
.btn-cro-ghost::after,
.btn-text-arrow-red::after,
.btn-omics::after{
  content:"→";
  display:inline-block;
  margin-left:10px;
  font-size:1.15em;
  line-height:1;
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.btn-cro-primary:hover::after,
.btn-cro-ghost:hover::after,
.btn-omics:hover::after{
  transform:translateX(4px);
}

/* Homepage 10x / ISO cert cards reuse .megamenu-card as a whole-card link.
   The mega-menu underline reset is scoped under .elementor-widget-n-menu and
   never reaches them, so the kit's a:hover underline leaks onto the title.
   Reset decoration on the link + all descendant text (beats a:hover). */
.megamenu-card,
.megamenu-card:hover,
.megamenu-card:focus,
.megamenu-card:visited,
.megamenu-card * {
  text-decoration: none !important;
}

/* "All publications" link — standalone, shares nothing with the header buttons.
   Elementor owns colour + typography; this only strips button chrome and slides the arrow. */
.exp-pub-link,
.exp-pub-link:hover,
.exp-pub-link:focus {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    transform: none !important;          /* the link itself never moves */
}
.exp-pub-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.exp-pub-link::after {
    content: "→";
    display: inline-block;               /* this is the fix */
    font-size: 1.15em;
    line-height: 1;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-pub-link:hover::after {
    transform: translateX(4px);          /* only the arrow slides */
}
.exp-pub-link,
.exp-pub-link:link,
.exp-pub-link:visited,
.exp-pub-link:hover {
    color: #ff3355 !important;   /* swap for your colour — light red reads well on the dark section */
}

/* =====================================================
   EXPLICYTE — Publication template v3
   ===================================================== */


/* -----------------------------------------------------
   Rank Math breadcrumb — wraps onto multiple lines for long titles
   ----------------------------------------------------- */
.rank-math-breadcrumb {
    font-family: 'Work Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    line-height: 1.8;
}
.rank-math-breadcrumb a,
.rank-math-breadcrumb .separator,
.rank-math-breadcrumb .last {
    display: inline;
}
.rank-math-breadcrumb a {
    color: rgba(255, 255, 255, .55);
    text-decoration: none;
    transition: color .25s cubic-bezier(.22, 1, .36, 1);
}
.rank-math-breadcrumb a:hover {
    color: #ff3355;
}
.rank-math-breadcrumb .last {
    color: #ffffff;
}
.rank-math-breadcrumb .separator {
    margin: 0 10px;
    color: rgba(255, 255, 255, .25);
}


/* -----------------------------------------------------
   Back-to-publications link
   ----------------------------------------------------- */
.exp-back-link {
    color: #4b5563 !important;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    transition: color .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-back-link:hover {
    color: #e62041 !important;
}


/* -----------------------------------------------------
   Collaborators line (replaces old authors byline)
   ----------------------------------------------------- */
.exp-collaborators {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: #4b5563;
    margin: 0;
}
.exp-collab-prefix {
    color: #1f3349;
    font-weight: 500;
    margin-right: 4px;
}
.exp-collab-item,
.exp-collab-item:link,
.exp-collab-item:visited {
    color: #4b5563;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .25s cubic-bezier(.22,1,.36,1), color .25s cubic-bezier(.22,1,.36,1);
}
.exp-collab-item:hover {
    color: #1f3349;
    border-bottom-color: #1f3349;
}
.exp-collab-sep {
    color: #9ca3af;
    margin: 0 6px;
}


/* -----------------------------------------------------
   Dek — bold lede, no border
   ----------------------------------------------------- */
.exp-dek {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.45;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: -0.2px;
}
.exp-dek p {
    margin: 0;
}

/* -----------------------------------------------------
   Citation strip — horizontal row below the dek
   ----------------------------------------------------- */
.exp-citation-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    padding: 18px 0;
    margin: 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}
.exp-cite-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.exp-cite-label {
    color: #9aa3af;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.exp-cite-value {
    color: #1a1a1a;
}
.exp-citation-strip a.exp-cite-doi,
.exp-citation-strip a.exp-cite-doi:link,
.exp-citation-strip a.exp-cite-doi:visited,
.exp-citation-strip a.exp-cite-doi:focus,
.exp-citation-strip a.exp-cite-doi:active {
    color: #e62041;
    text-decoration: none !important;
    border-bottom: 0 !important;
}
.exp-citation-strip a.exp-cite-doi:hover {
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.exp-cite-read,
.exp-cite-read:link,
.exp-cite-read:visited,
.exp-cite-read:hover,
.exp-cite-read:active,
.exp-cite-read:focus {
    margin-left: auto;
    background: #e62041;
    color: #ffffff !important;
    padding: 10px 20px;
    border-radius: 999px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
    text-decoration: none !important;
    border-bottom: none !important;
    transition: background-color .25s cubic-bezier(.22, 1, .36, 1);
    display: inline-block;
    line-height: 1.2;
}
.exp-cite-read:hover {
    background: #ff3355;
}
@media (max-width: 640px) {
    .exp-cite-read {
        margin-left: 0;
        margin-top: 8px;
        width: 100%;
        text-align: center;
    }
}


/* -----------------------------------------------------
   Section eyebrow ("The question", "What Explicyte did")
   ----------------------------------------------------- */
.exp-eyebrow-muted {
    color: #4b5563;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    display: block;
    margin: 40px 0 12px;
}


/* -----------------------------------------------------
   Body content vertical rhythm
   ----------------------------------------------------- */
.exp-body-content p {
    margin: 0 0 16px;
    line-height: 1.7;
}
.exp-body-content p:last-child {
    margin-bottom: 0;
}


/* -----------------------------------------------------
   Key steps — editorial numbered list
   ----------------------------------------------------- */
.exp-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}
.exp-step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 24px 0;
    border-top: 1px solid #e5e7eb;
}
.exp-step:first-child {
    border-top: none;
    padding-top: 0;
}
.exp-step-num {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1f3349;
    color: #ffffff;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.exp-step-content {
    flex: 1;
    min-width: 0;
}
.exp-step-title {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 20px;
    color: #1f3349;
    margin: 0 0 8px;
    line-height: 1.3;
}
.exp-step-body {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #1a1a1a;
}
.exp-step-body p:last-child {
    margin-bottom: 0;
}


/* -----------------------------------------------------
   Impact card — metrics inside the navy block
   ----------------------------------------------------- */
.exp-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 24px 0;
}
.exp-metric {
    flex: 1;
    min-width: 200px;
    padding: 8px 0 8px 20px;
    border-left: 2px solid #ff3355;
}
.exp-metric-value {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 44px;
    line-height: 1;
    color: #ffffff;
    letter-spacing: -1.2px;
    margin-bottom: 8px;
}
.exp-metric-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #9fb0c4;
}
@media (max-width: 768px) {
    .exp-metric {
        min-width: 100%;
    }
    .exp-metric-value {
        font-size: 32px;
    }
}


/* -----------------------------------------------------
   Homepage — featured publications wall (5×2 grid)
   ----------------------------------------------------- */
.exp-pub-wall {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    justify-items: center;
    gap: 48px 32px;
    padding: 24px 0;
}
.exp-pub-wall-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
}
.exp-pub-wall-item img {
    max-width: 100%;
    max-height: 56px;
    width: auto;
    height: auto;
    opacity: .78;
    filter: brightness(0) invert(1);
    transition: opacity .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-pub-wall-item:hover img {
    opacity: 1;
}
@media (max-width: 1024px) {
    .exp-pub-wall {
        grid-template-columns: repeat(4, 1fr);
        gap: 36px 28px;
    }
}
@media (max-width: 767px) {
    .exp-pub-wall {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px 24px;
    }
}
@media (max-width: 480px) {
    .exp-pub-wall {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 20px;
        padding: 16px 0;
    }
    .exp-pub-wall-item {
        height: 40px;
    }
    .exp-pub-wall-item img {
        max-height: 40px;
        max-width: 130px;
    }
}

/* -----------------------------------------------------
   Homepage service cards
   ----------------------------------------------------- */
/* -----------------------------------------------------
   Homepage service cards — image-led, whole-card link
   ----------------------------------------------------- */

/* Card shell — lifts off the navy band (strategy #2) */
.exp-service-card {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 12px 30px -14px rgba(15, 23, 42, .28);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
.exp-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -16px rgba(15, 23, 42, .32);
}

/* Container Link <a> stays chrome-free; no underline through children (gotcha 10) */
.exp-service-card a.e-con-link,
.exp-service-card > a {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
.exp-service-card,
.exp-service-card * {
    text-decoration: none !important;
}

/* Photo — fixed height so the three cohere; light grade at rest, full pop on hover (#1, #3, #4) */
.exp-service-card__img {
    position: relative;
    overflow: hidden;
    line-height: 0;
}
.exp-service-card__img img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    filter: saturate(.92) contrast(1.04);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), filter .3s ease;
}
.exp-service-card:hover .exp-service-card__img img {
    transform: scale(1.06);
    filter: none;
}

/* White body */
.exp-service-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 22px 22px 20px;
    text-align: left;
    gap: 0 !important;
    --widgets-spacing: 0px 0px !important;
    --widgets-spacing-row: 0px !important;
    --gap: 0px !important;
}

/* Eyebrow */
.exp-service-card__eyebrow {
    font-family: 'Work Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase !important;
    color: #6e8199 !important;
    margin: 0 0 5px !important;
    line-height: 1.4 !important;
    transition: color .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-service-card:hover .exp-service-card__eyebrow {
    color: #e62041 !important;
}

/* Title */
.exp-service-card__title {
    font-family: 'Work Sans', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #1f3349;
    line-height: 1.2;
    margin: 0 0 14px !important; 
}

/* Description — left-aligned for readability */
.exp-service-card__desc {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
    text-align: left;
    margin: 0 0 26px !important;
}
.exp-service-card__desc p { margin: 0; }

/* CTA — styled text (card itself is the link); arrow slides on whole-card hover (#1) */
.exp-service-card__cta {
    margin-top: auto;
    text-align: left;
}
.exp-service-card__cta .elementor-heading-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #e62041;
    margin: 0;
}
.exp-service-card__cta .elementor-heading-title::after {
    content: "→";
    display: inline-block;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-service-card:hover .exp-service-card__cta .elementor-heading-title::after {
    transform: translateX(4px);
}

@media (max-width: 1024px) {
    .exp-service-card__img img { height: 200px; }
}
@media (max-width: 767px) {
    .exp-service-card__img img { height: 200px; }
    .exp-service-card__body { padding: 20px 18px 18px; }
}

.exp-service-card {
    display: flex;
    flex-direction: column;
}
.exp-service-card > .exp-service-card__body {
    flex: 1 1 auto;
}

.exp-service-grid {
    overflow: visible !important;
    padding-bottom: 44px !important;
}

/* -----------------------------------------------------
   Taxonomy chips — scannable strip above key steps
   ----------------------------------------------------- */
.exp-taxonomy-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 8px 0;
    
}
.exp-chip,
.exp-chip:link,
.exp-chip:visited,
.exp-chip:hover,
.exp-chip:active,
.exp-chip:focus {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: #ffffff !important;
    text-decoration: none !important;
    border-bottom: none !important;
    transition: background-color .25s cubic-bezier(.22, 1, .36, 1), transform .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-chip-application {
    background: #e62041;
}
.exp-chip-application:hover {
    background: #c01b35;
    transform: translateY(-1px);
}
.exp-chip-sample-type {
    background: #1f3349;
}
.exp-chip-sample-type:hover {
    background: #2d4a6b;
    transform: translateY(-1px);
}
.exp-chip-platform {
    background: #06b6d4;
}
.exp-chip-platform:hover {
    background: #0891a3;
    transform: translateY(-1px);
}
@media (max-width: 640px) {
    .exp-chip-label {
        width: 100%;
    }
}

/* =====================================================
   EXPLICYTE — Publications archive (shortcode output)
   The hero (H1, subhead, button) and the navy background are built natively
   in Elementor. These rules style only what the two shortcodes render, and
   assume they sit on a dark (navy #1f3349) Elementor container.
   ===================================================== */

/* Filter bar — single line on desktop */
.exp-arch-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}
.exp-arch-slabel {
    flex: none;
    font-family: 'Work Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #6e8199;
}
.exp-arch-sel {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #ffffff;
    background-color: rgba(255, 255, 255, .06);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239fb0c4' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: 9px 32px 9px 16px;
    cursor: pointer;
    outline: none;
    transition: border-color .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-arch-sel:hover {
    border-color: rgba(255, 255, 255, .35);
}
.exp-arch-sel option {
    color: #1a1a1a;
    background: #ffffff;
}

/* Count */
.exp-arch-countrow {
    margin-top: 36px;
}
.exp-arch-count {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    color: #ffffff;
}

/* Card list */
.exp-arch-list {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.exp-arch-card,
.exp-arch-card:link,
.exp-arch-card:visited {
    display: flex;
    align-items: stretch;
    gap: 22px;
    background: rgba(255, 255, 255, .04);
    border-radius: 12px;
    padding: 24px;
    text-decoration: none;
    color: inherit;
    transition: background .25s cubic-bezier(.22, 1, .36, 1), transform .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-arch-card:hover {
    background: rgba(255, 255, 255, .08);
    transform: translateY(-1px);
}
/* The whole card is the link — never underline it or its contents */
.exp-arch-card,
.exp-arch-card:hover,
.exp-arch-card:focus,
.exp-arch-card:hover * {
    text-decoration: none !important;
}
.exp-arch-logo {
    flex: none;
    width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    box-sizing: border-box;
    text-align: center;
}
.exp-arch-logo img {
    max-width: 100%;
    max-height: 56px;
    width: auto;
    height: auto;
    opacity: .85;
    filter: brightness(0) invert(1); /* render any logo (incl. SVG) as solid white on transparent */
    transition: opacity .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-arch-card:hover .exp-arch-logo img {
    opacity: 1;
}
.exp-arch-logo span {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.25;
    color: #ffffff;
}
.exp-arch-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.exp-arch-meta {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #8aa0b8;
    margin: 0;
}
.exp-arch-meta b {
    color: #9fb0c4;
    font-weight: 400;
}
.exp-arch-card .exp-arch-title {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 19px;
    line-height: 1.32;
    color: #ffffff !important;
    margin: 16px 0 0;
}
.exp-arch-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}
.exp-arch-chip {
    font-family: 'Work Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 12px;
    border-radius: 999px;
    line-height: 1.45;
}
.exp-arch-chip-application {
    background: #e62041;
    color: #ffffff;
}
.exp-arch-chip-sample-type {
    background: rgba(159, 176, 196, .18);
    color: #cdd8e4;
}
.exp-arch-chip-platform {
    background: #06b6d4;
    color: #06222a;
}

/* Empty state */
.exp-arch-empty {
    display: none;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #9fb0c4;
    text-align: center;
    padding: 40px 0;
}

/* Tablet / mobile */
@media (max-width: 900px) {
    .exp-arch-bar {
        flex-wrap: wrap;
    }
    .exp-arch-sel {
        flex: 1 1 140px;
    }
}
@media (max-width: 600px) {
    .exp-arch-card {
        flex-direction: column;
        gap: 14px;
    }
    .exp-arch-logo {
        width: auto;
        justify-content: flex-start;
        padding: 0;
    }
}

/* Single publication page (off-white background) */
.exp-taxonomy-chips a.exp-chip-cancer-type,
.exp-taxonomy-chips a.exp-chip-cancer-type:link,
.exp-taxonomy-chips a.exp-chip-cancer-type:visited {
    background: transparent;
    color: #1f3349 !important;
    border: 1px solid #1f3349 !important;
    padding: 7px 17px;
}
.exp-taxonomy-chips a.exp-chip-cancer-type:hover {
    background: #1f3349;
    color: #ffffff !important;
    border: 1px solid #1f3349 !important;
    transform: translateY(-1px);
    padding: 7px 17px;
}
/* Archive cards (dark navy background) */
.exp-arch-chip-cancer-type {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .4);
    padding: 2px 11px;
}

/* =====================================================
   EXPLICYTE — Resource cards (shortcode [exp_resource_card])
   Whole-card link to the single page. Used by the homepage
   "latest resources" carousel + the resources page grid.
   Shares the visual language of .exp-event-card.
   ===================================================== */

/* Loop plumbing — add class "resources-loop" on the Loop Grid/Carousel wrapper */
.resources-loop .elementor-loop-container,
.resources-loop .elementor-grid {
  align-items: start;
}
.resources-loop .e-loop-item,
.resources-loop .elementor-loop-container .e-loop-item {
  display: flex;
  align-self: start;
  height: auto;
}
.resources-loop .elementor-widget-shortcode,
.resources-loop .elementor-widget-shortcode > .elementor-widget-container {
  display: flex;
  width: 100%;
  height: auto;
}

/* Card shell */
.exp-resource-card,
.exp-resource-card:link,
.exp-resource-card:visited {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(31, 51, 73, 0.08);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 14px 36px -18px rgba(15, 23, 42, 0.28);
  color: inherit;
  text-decoration: none;
  transition:
    transform .3s cubic-bezier(.22, 1, .36, 1),
    box-shadow .3s ease,
    border-color .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-resource-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 52px -20px rgba(15, 23, 42, 0.32);
  border-color: rgba(230, 32, 65, 0.18);
}
.exp-resource-card,
.exp-resource-card *,
.exp-resource-card:hover * {
  text-decoration: none !important;
}

/* Image — graded at rest, full pop + zoom on hover */
.exp-resource-card__image {
  position: relative;
  width: 100%;
  height: 210px;
  overflow: hidden;
  background: #1f3349;
}
.exp-resource-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.04);
  transition: transform .55s cubic-bezier(.22, 1, .36, 1), filter .3s ease;
}
.exp-resource-card:hover .exp-resource-card__image img {
  transform: scale(1.06);
  filter: none;
}

/* Content */
.exp-resource-card__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 24px;
}

/* Reuse the shared pill, just tighten spacing in this context */
.exp-resource-card__content .resource-card__type {
  margin-bottom: 14px;
}

.exp-resource-card__meta {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #6e8199;
  margin-bottom: 8px;
}
.exp-resource-card__title {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: #1f3349;
  margin: 0 0 12px;
}
.exp-resource-card__excerpt {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
  margin: 0 0 22px;
}

/* CTA — styled text; whole card is the link; arrow slides on card hover */
.exp-resource-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: #e62041;
}
.exp-resource-card__cta::after {
  content: "→";
  display: inline-block;
  margin-left: 10px;
  font-size: 1.15em;
  line-height: 1;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-resource-card:hover .exp-resource-card__cta::after {
  transform: translateX(4px);
}

@media (max-width: 767px) {
  .exp-resource-card { border-radius: 20px; }
  .exp-resource-card__image { height: 190px; }
  .exp-resource-card__content { padding: 20px; }
  .exp-resource-card__title { font-size: 19px; }
}

/* ==============================
   Resource cards - Solflare overlap fixed
   ============================== */

/* Make each loop item stretch */
.e-loop-item {
  display: flex;
  height: 100%;
}

/* Main card */
.resource-card {
  width: 100%;
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  overflow: visible !important;
  border-radius: 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Remove Elementor default widget spacing inside the card */
.resource-card > .elementor-element,
.resource-card .elementor-widget:not(:last-child),
.resource-card__image,
.resource-card__image.elementor-widget,
.resource-card__image .elementor-widget-container {
  margin-bottom: 0 !important;
}

/* Also reset Elementor container/widget spacing variables */
.resource-card {
  --gap: 0px !important;
  --widgets-spacing: 0px 0px !important;
  --widgets-spacing-row: 0px !important;
  --widgets-spacing-column: 0px !important;
}

/* Smooth hover lift */
.resource-card:hover {
  transform: translateY(-4px);
}

/* Image widget fixed visual area */
.resource-card__image,
.resource-card__image .elementor-widget-container {
  width: 100%;
  height: 260px !important;
  min-height: 260px !important;
  max-height: 260px !important;
  overflow: hidden;
  border-radius: 28px;
  flex: 0 0 260px !important;
  position: relative;
  z-index: 1;
}

/* Image itself */
.resource-card__image img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 28px;
}

/* White content panel - same width as image + forced overlap */
.resource-card__body {
  width: 100% !important;
  box-sizing: border-box;

  position: relative !important;
  z-index: 2;

  /* Overlap control */
  margin-top: -70px !important;
  top: 0;

  padding: 24px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);

  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column !important;
  min-height: 360px;

  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Stronger shadow on hover */
.resource-card:hover .resource-card__body {
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.12);
}


/* Post type label - Explicyte branding */
.resource-card__type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;

  margin-bottom: 18px;
  padding: 7px 13px;

  border-radius: 999px;
  /* background: rgba(255, 47, 91, 0.10);*/
  border: 1px solid #1A1A1A;
  color: #1f344a;

  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* Title */
.resource-card__title,
.resource-card__title .elementor-heading-title {
  margin: 0;
}

/* Remove underline from post title */
.resource-card__title a,
.resource-card__title .elementor-heading-title a,
.resource-card .elementor-heading-title a {
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Hover state: still no underline */
.resource-card__title a:hover,
.resource-card__title .elementor-heading-title a:hover,
.resource-card .elementor-heading-title a:hover {
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Push button to bottom */
.resource-card__button {
  margin-top: auto !important;
  padding-top: 24px;
}

/* Remove default button underline */
.resource-card__button a {
  text-decoration: none !important;
}

/* Tablets */
@media (max-width: 1024px) and (min-width: 768px) {
  .resource-card__body {
    margin-top: -40px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
    
 .resource-card {
    overflow: hidden !important;     /* ADD — contains the image bleed */
  }
  .resource-card__image,
  .resource-card__image .elementor-widget-container {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    flex-basis: 220px !important;
  }

  .resource-card__body {
    margin-top: -40px !important;
    padding: 20px;
    min-height: auto;
  }

  .resource-card__type {
    font-size: 10px;
    padding: 6px 10px;
    margin-bottom: 12px;
  }
}

/* ==============================
   Resources navigation bar
   Explicyte-style navigation pills
   ============================== */

/* Main wrapper */
.resources-nav-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 0 42px 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* "Browse by" label */
.resources-nav-label {
  flex: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  font-family: 'Work Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  color: #6e8199 !important;

  white-space: nowrap !important;
}

/* Remove default Elementor margins */
.resources-nav-label p,
.resources-nav-label .elementor-heading-title {
  margin: 0 !important;
  padding: 0 !important;

  font-family: 'Work Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  color: #6e8199 !important;
}

/* Pills container */
.resources-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;

  flex: 1 1 auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Elementor button widgets */
.resources-nav > * {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Navigation pills */
.resources-nav .e-button-base,
.resources-nav a.e-button-base,
.resources-nav button.e-button-base {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 38px !important;
  padding: 9px 16px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;

  font-family: 'Work Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: #ffffff !important;

  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  outline: none !important;

  transition:
    transform 0.25s cubic-bezier(.22, 1, .36, 1),
    border-color 0.25s cubic-bezier(.22, 1, .36, 1),
    background-color 0.25s cubic-bezier(.22, 1, .36, 1),
    color 0.25s cubic-bezier(.22, 1, .36, 1),
    box-shadow 0.25s cubic-bezier(.22, 1, .36, 1) !important;
}

/* Override global Elementor link underline/color */
.elementor-kit-7 .resources-nav a,
.elementor-kit-7 .resources-nav a.e-button-base {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Hover effect */
.resources-nav .e-button-base:hover,
.resources-nav a.e-button-base:hover,
.resources-nav button.e-button-base:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  background-color: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14) !important;
  text-decoration: none !important;
}

/* Active item */
.resources-nav .is-active .e-button-base,
.resources-nav .is-active a.e-button-base,
.resources-nav .is-active button.e-button-base {
  background-color: #ff2f5f !important;
  border-color: #ff2f5f !important;
  color: #ffffff !important;
  box-shadow: 0 12px 30px rgba(255, 47, 95, 0.26) !important;
  text-decoration: none !important;
}

/* Active hover */
.resources-nav .is-active .e-button-base:hover,
.resources-nav .is-active a.e-button-base:hover,
.resources-nav .is-active button.e-button-base:hover {
  transform: translateY(-2px) !important;
  background-color: #ff2f5f !important;
  border-color: #ff2f5f !important;
  color: #ffffff !important;
  box-shadow: 0 16px 36px rgba(255, 47, 95, 0.32) !important;
}

/* Mobile */
@media (max-width: 767px) {
  .resources-nav-bar {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin-bottom: 30px !important;
    padding: 0 !important;
  }

  .resources-nav-label {
    width: 100% !important;
  }

  .resources-nav {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .resources-nav .e-button-base,
  .resources-nav a.e-button-base,
  .resources-nav button.e-button-base {
    min-height: 36px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
  }
}

/* =====================================================
   EXPLICYTE — Sponsor story single
   Sits in the off-white (#f7f8fa) editorial column,
   same column as the Publication single.
   ===================================================== */

/* Featured image — add class exp-ss-featured on the Elementor Image widget */
.exp-ss-featured img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
}

/* Author card — borderless, sits close under the featured image */
.exp-ss-author {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 6px 0;
    margin: 8px 0;
    background: transparent;
}
.exp-ss-author-photo {
    flex: none;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    background: #f7f8fa;
}
.exp-ss-author-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.exp-ss-author-text {
    flex: 1;
    min-width: 0;
}
.exp-ss-author-name {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #1f3349;
    line-height: 1.25;
}
.exp-ss-author-meta {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #4b5563;
    margin-top: 9px;
}
.exp-ss-author-company,
.exp-ss-author-company:link,
.exp-ss-author-company:visited {
    color: #e62041;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-ss-author-company:hover {
    border-bottom-color: #e62041;
}
.exp-ss-author-sep {
    color: #9ca3af;
    margin: 0 8px;
}
.exp-ss-author-bio {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
    margin-top: 15px;
}
.exp-ss-author-bio p {
    margin: 0;
}

/* Company logo — full colour, right side of the card.
   Definite container width so SVGs with internal width/height="100%" don't collapse. */
.exp-ss-author-logo {
    flex: none;
    margin-left: auto;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    transition: opacity .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-ss-author-logo img {
    height: 100%;
    width: auto;
    max-height: 52px;
    display: block;
}

a.exp-ss-author-logo:hover {
    opacity: .7;
}

/* Section eyebrows — promoted: navy, larger spacing, only on sponsor stories */
.exp-ss-section .exp-eyebrow-muted {
    color: #1f3349;
    font-size: 13px;
    letter-spacing: 2px;
    margin: 44px 0 14px;
}
.exp-ss-section .exp-eyebrow-muted::after {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    background: #e62041;
    margin-top: 10px;
}
.exp-ss-section:first-child .exp-eyebrow-muted {
    margin-top: 28px;
}

@media (max-width: 600px) {
    .exp-ss-author {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .exp-ss-author-logo {
        margin-left: 0;
        justify-content: flex-start;
    }
}

/* Whole slide is the link — strip inherited link styling from every part */

.e-loop-item,
.e-loop-item:hover,
.e-loop-item a,
.e-loop-item a:link,
.e-loop-item a:visited,
.e-loop-item a:hover,
.e-loop-item a:focus {
    text-decoration: none !important;
}

.ss-feat,
.ss-feat:hover,
.ss-feat a,
.ss-feat a:hover,
.ss-feat * {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* =====================================================
   EXPLICYTE — Homepage "Customer stories" featured slide
   Loop Carousel, 1 slide per view, Query ID home_latest_sponsor_stories.
   ===================================================== */
.ss-feat {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    align-items: stretch;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}

/* LEFT — content */
.ss-feat__body {
    padding: 42px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ss-feat__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}
.ss-feat__chip {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 999px;
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: #ffffff;
}
.ss-feat__chip--cancer-type {
    background: transparent;
    color: #1f3349;
    border: 1px solid #1f3349;
    padding: 6px 15px;
}
.ss-feat__chip--application { background: #e62041; }
.ss-feat__chip--sample-type { background: #1f3349; }
.ss-feat__chip--platform    { background: #06b6d4; }

.ss-feat__title {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600 !important;
    font-size: 24px !important;
    line-height: 1.25;
    color: #1f3349;
    letter-spacing: -0.4px;
    margin: 0 0 22px;
}
.ss-feat__quote {
    margin: 0 0 26px;
    padding: 0;
    border: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.55;
    color: #1a1a1a;
}
.ss-feat__quote::before {
    content: "\201C";
    color: #e62041;
    font-size: 28px;
    line-height: 0;
    vertical-align: -3px;
    margin-right: 3px;
}
.ss-feat__byline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}
.ss-feat__photo {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #f7f8fa;
}
.ss-feat__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ss-feat__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ss-feat__name {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #1f3349;
    line-height: 1.2;
    padding-bottom: 8px;
}
.ss-feat__meta {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #4b5563;
    margin-top: 2px;
}
/* 1 — Cancer-type chip: restore the 1px border (your global reset strips border-bottom,
   so this needs the same !important + higher specificity, per the outline-chip gotcha) */
.ss-feat .ss-feat__chip--cancer-type {
    border: 1px solid #1f3349 !important;
}

/* 2 — CTA now uses the global btn-cro-primary class for size/colour/arrow.
   This class only positions it and slides the arrow on whole-card hover. */
.ss-feat__cta {
    align-self: flex-start;
}


/*.e-loop-item:hover .ss-feat__cta::after {
    transform: translateX(4px);
}*/


/* RIGHT — media with overlay + white logo */
.ss-feat__media {
    position: relative;
    height: 100%;
    align-self: stretch;
    overflow: hidden;
    background: #16283b;
}
.ss-feat__img {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
.ss-feat__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(16, 28, 43, .72), rgba(16, 28, 43, .48));
    pointer-events: none;
}
.ss-feat__logo {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.ss-feat__logo img {
    width: auto;
    height: 56px;
    max-width: 60%;
    filter: brightness(0) invert(1);
}

/* Logo + chips stack as a centred group over the image */
.ss-feat__logo {
    flex-direction: column;
    gap: 36px;
}

/* Chips relocated onto the image — uniform glass pill, overrides the
   per-taxonomy colours (incl. the !important cancer-type border) via
   higher specificity (.ss-feat … = 0,3,0) */
.ss-feat__media-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 82%;
}
.ss-feat .ss-feat__media-chips .ss-feat__chip {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Tablet / mobile — stack, image on top.
   Scoped to .ss-slider with !important so the single-column layout
   beats the base two-column .ss-feat rule; min-width:0 lets text wrap. */
@media (max-width: 860px) {
    .ss-slider .ss-feat {
        grid-template-columns: 1fr !important;
        max-width: 100%;
        overflow: hidden;
    }
    .ss-slider .ss-feat__media {
        order: -1;
        min-height: 240px;
        width: 100%;
    }
    .ss-slider .ss-feat__body {
        min-width: 0;
        padding: 28px 22px;
    }
    .ss-slider .ss-feat__title {
        font-size: 24px !important;
    }
    .ss-slider .ss-feat__quote {
        font-size: 16px;
    }
    .ss-slider .ss-feat__logo img {
        height: 44px;
    }
}

/* =====================================================
   EXPLICYTE — Sponsor story slider: height + hover-shadow
   IN THE WIDGET: turn OFF "Equal Height" AND "Autoplay".
   ===================================================== */

/* --- Rectangle fix ---------------------------------- */
/* The dark rectangle was the hover shadow being (a) too dark and
   (b) clipped by the carousel's overflow into a hard edge.
   Fix: soft light shadow + give it room inside the clip via padding-bottom. */

/* Whole-slide link never carries its own background/shadow/border */
.ss-slider .e-loop-item > a,
.ss-slider .e-loop-item > a:hover {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Room for the hover shadow so it isn't cut into a rectangle.
   padding-bottom only — does NOT change slide width, so Swiper stays aligned. */
.ss-slider .swiper {
    padding-bottom: 56px !important;
}

/* Soft, light, contained shadow — reads as a pool, never a block */
.ss-slider .e-loop-item:hover .ss-feat {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -16px rgba(15, 23, 42, .26);
}

/* --- Equal height ----------------------------------- */
/* Every wrapper from slide -> card must be a flex column for height to flow. */
.ss-slider .swiper-wrapper {
    align-items: stretch !important;
}
.ss-slider .swiper-slide,
.ss-slider .e-loop-item {
    height: auto !important;
    display: flex !important;
    align-items: stretch !important;
}
.ss-slider .e-loop-item > a,
.ss-slider .e-loop-item .elementor-widget-shortcode,
.ss-slider .e-loop-item .elementor-widget-shortcode > .elementor-widget-container {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

/* Height lives ONLY here — do NOT re-declare the grid (the main .ss-feat already has it) */
.ss-slider .ss-feat {
    min-height: 580px;   /* was 640 — nudge up if any story clips */
    width: 100%;
    flex: 1 1 auto;
}

/* Keep long quotes from breaking the fixed height */
.ss-slider .ss-feat__quote {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mobile — let cards size to content, no clamp, no fixed floor */
@media (max-width: 860px) {
    .ss-slider .ss-feat {
        min-height: 0;
    }
    .ss-slider .ss-feat__quote {
        -webkit-line-clamp: unset;
        overflow: visible;
    }
    .ss-feat__media-chips {
        display: none;
    }
}

@media (max-width: 767px) {
    .ss-slider .ss-feat__title {
        display: none;
    }
    .ss-slider .ss-feat__meta {
        line-height: 1.1em;
    }
}

/* 2-column FAQ accordion — row-major flex so items never jump columns on expand.
   column-count rebalances whole items between columns when one grows;
   break-inside: avoid only stops mid-item splitting, not the reflow. */
@media (min-width: 1240px) {
  .faq-2col .e-n-accordion {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;     /* row height follows the open item; its neighbour stays put */
    gap: 12px 32px;              /* row-gap, column-gap */
  }
  .faq-2col .e-n-accordion-item {
    flex: 0 1 calc(50% - 16px);  /* 16px = half the 32px column-gap */
    margin-bottom: 0;
  }
}

/* =====================================================
   EXPLICYTE — Events cards (v4 layout)
   Drop-in replacement for the events block. Matches the shortcode:
   date+place lead line · title · "You'll meet …" · format (role)
   pills + abstract/booth token · description on hover · CTA.
   No links on image/title (no single-event pages); CTA only when an
   external event_url exists. No date chip on the image. No cyan.
 
   v4: cards no longer stretch to the row's tallest card, so hovering
   one card grows ONLY that card instead of puffing up its neighbours.
   ===================================================== */
 
/* Loop plumbing — each card sizes to its own content (no row-stretch) */
.events-loop .elementor-loop-container,
.events-loop .elementor-grid {
  align-items: start;
}
.events-loop .e-loop-item,
.events-loop .elementor-loop-container .e-loop-item {
  display: flex;
  align-self: start;
  height: auto;
}
.events-loop .elementor-widget-shortcode,
.events-loop .elementor-widget-shortcode > .elementor-widget-container {
  display: flex;
  width: 100%;
  height: auto;
}
 
/* Card shell */
.exp-event-card {
  width: 100%;
  min-height: 440px;
 
  display: flex;
  flex-direction: column;
 
  background: #ffffff;
  border: 1px solid rgba(31, 51, 73, 0.08);
  border-radius: 24px;
  overflow: hidden;
 
  box-shadow: 0 14px 36px -18px rgba(15, 23, 42, 0.28);
 
  transition:
    transform .3s cubic-bezier(.22, 1, .36, 1),
    box-shadow .3s ease,
    border-color .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-event-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 52px -20px rgba(15, 23, 42, 0.32);
  border-color: rgba(230, 32, 65, 0.18);
}
.exp-event-card,
.exp-event-card *,
.exp-event-card a,
.exp-event-card a:hover,
.exp-event-card a:focus,
.exp-event-card a:visited {
  text-decoration: none !important;
}
 
/* Image — graded at rest, full pop + zoom on hover. No link, no date chip. */
.exp-event-card__image {
  position: relative;
  width: 100%;
  height: 210px;
  overflow: hidden;
  background: #1f3349;
}
.exp-event-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.04);
  transition: transform .55s cubic-bezier(.22, 1, .36, 1), filter .3s ease;
}
.exp-event-card:hover .exp-event-card__image img {
  transform: scale(1.06);
  filter: none;
}
 
/* Content */
.exp-event-card__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 24px;
}
 
/* 1 — Date + place, one line (the lead info) */
.exp-event-card__when-where {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
 
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #6e8199;
}
.exp-event-card__date-range {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  letter-spacing: .2px;
  color: #1f3349;
}
.exp-event-card__sep {
  color: #9fb0c4;
}
 
/* 2 — Title (not a link) */
.exp-event-card__title {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.22;
  letter-spacing: -0.3px;
  color: #1f3349;
  margin: 0 0 10px;
}
 
/* 3 — "You'll meet …" */
.exp-event-card__speakers {
  margin: 0 0 16px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #4b5563;
}
.exp-event-card__speakers-lead {
  color: #6e8199;
}
.exp-event-card__speakers-name {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  color: #1f3349;
  margin-left: 4px;
}
 
/* 4 — Format (role) pills + abstract/booth token, same row */
.exp-event-card__roles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.exp-event-card__role {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid #1f3349;
 
  font-family: 'Work Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.1px;
  line-height: 1.2;
  text-transform: uppercase;
  color: #1f3349;
}
/* Abstract / booth — soft tinted token, reads as data not a tag */
.exp-event-card__ref {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(31, 51, 73, 0.06);
 
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: #1f3349;
}
 
/* 5 — Description: collapsed at rest, opens on hover (height animates
   via grid-template-rows). CTA is pinned to the bottom, so short text
   fills existing slack first and the card grows as little as possible. */
.exp-event-card__summary-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition:
    grid-template-rows .35s cubic-bezier(.22, 1, .36, 1),
    opacity .3s ease,
    margin-top .35s cubic-bezier(.22, 1, .36, 1);
}
.exp-event-card:hover .exp-event-card__summary-wrap {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 16px;
}
.exp-event-card__summary-inner {
  overflow: hidden;
  min-height: 0;
}
.exp-event-card__summary {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
}
 
/* 6 — CTA (only present when an external event_url exists) */
.exp-event-card__footer {
  margin-top: auto;
  padding-top: 24px;
}
.exp-event-card__cta,
.exp-event-card__cta:link,
.exp-event-card__cta:visited {
  display: inline-flex;
  align-items: center;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: #e62041 !important;
  text-decoration: none !important;
  transition: color .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-event-card__cta::after {
  content: "→";
  display: inline-block;
  margin-left: 10px;
  font-size: 1.15em;
  line-height: 1;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-event-card:hover .exp-event-card__cta::after {
  transform: translateX(4px);
}
.exp-event-card__cta:hover {
  color: #ff3355 !important;
}
 
/* Past events — quietly desaturated, recovers on hover */
.exp-event-card--past .exp-event-card__image img {
  filter: saturate(.6) contrast(1.02);
}
.exp-event-card--past:hover .exp-event-card__image img {
  filter: saturate(.9) contrast(1.04);
}
 
/* Touch / no-hover devices: keep the description open */
@media (hover: none) {
  .exp-event-card__summary-wrap {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 16px;
  }
}
 
/* Mobile */
@media (max-width: 767px) {
  .exp-event-card {
    min-height: 0;
    border-radius: 20px;
  }
  .exp-event-card__image {
    height: 190px;
  }
  .exp-event-card__content {
    padding: 20px;
  }
  .exp-event-card__title {
    font-size: 20px;
  }
  .exp-event-card__role,
  .exp-event-card__ref {
    font-size: 10px;
    padding: 6px 12px;
  }
}

/* =====================================================
   EXPLICYTE — Events page (filterable list)
   Server-rendered cards + JS filter (Upcoming · Year · Type).
   Light/off-white page; cards are the white .exp-event-card.
   ===================================================== */
.exp-events-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  flex-wrap: nowrap;
}
.exp-events-slabel {
  flex: none;
  font-family: 'Work Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #6e8199;
}
.exp-events-sel {
  -webkit-appearance: none;
  appearance: none;
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #1f3349;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236e8199' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 9px 34px 9px 16px;
  cursor: pointer;
  outline: none;
  transition: border-color .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-events-sel:hover { border-color: #9fb0c4; }

.exp-events-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 28px;
}
.exp-events-item { display: flex; }
.exp-events-item .exp-event-card { width: 100%; }

.exp-events-empty {
  display: none;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #6e8199;
  text-align: center;
  padding: 48px 0;
}

@media (max-width: 1024px) and (min-width: 768px) {
  .exp-events-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .exp-events-list { grid-template-columns: 1fr; gap: 20px; }
}

.exp-events-sel {
  flex: 0 0 auto;          /* size to content, never stretch */
  max-width: 100%;
}

@media (max-width: 600px) {
  .exp-events-bar { flex-wrap: wrap; }
  .exp-events-sel { flex: 1 1 140px; }
}

/* Tablet — keep both on one line, content-sized, allow shrink if tight */
@media (max-width: 1024px) and (min-width: 601px) {
  .exp-events-bar { flex-wrap: nowrap; }
  .exp-events-sel { flex: 0 1 auto; min-width: 0; }
}

/* Mobile — stack-friendly: label full width, dropdowns share the row */
@media (max-width: 600px) {
  .exp-events-bar { flex-wrap: wrap; }
  .exp-events-slabel { width: 100%; }
  .exp-events-sel { flex: 1 1 140px; }
}

/* =====================================================
   EXPLICYTE — Post / article body content
   V4 atomic markup: NO .elementor-widget-container wrapper.
   Target the widget class directly. Kit-prefixed to beat
   .elementor-kit-7 h2 global typography.
   ===================================================== */

.elementor-kit-7 .elementor-widget-theme-post-content {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.75;
    color: #1a1a1a;
}
.elementor-kit-7 .elementor-widget-theme-post-content > *:first-child { margin-top: 0; }
.elementor-kit-7 .elementor-widget-theme-post-content > *:last-child  { margin-bottom: 0; }
.elementor-kit-7 .elementor-widget-theme-post-content > p { margin: 0 0 1.7em; }

/* Lede — author bolds the whole first paragraph */
.elementor-kit-7 .elementor-widget-theme-post-content > p:first-child > strong:only-child {
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 21px;
    line-height: 1.5;
    color: #1f3349;
    letter-spacing: -0.2px;
}

/* --- Headings — Inter, strong contrast. font-family forced past the kit. --- */
.elementor-kit-7 .elementor-widget-theme-post-content h2,
.elementor-kit-7 .elementor-widget-theme-post-content h3,
.elementor-kit-7 .elementor-widget-theme-post-content h4,
.elementor-kit-7 .elementor-widget-theme-post-content h5,
.elementor-kit-7 .elementor-widget-theme-post-content h6 {
    font-family: 'Inter', sans-serif !important;
    color: #1f3349;
    scroll-margin-top: 110px;
}

.elementor-kit-7 .elementor-widget-theme-post-content h2 {
    font-weight: 700;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -0.6px;
    margin: 2.4em 0 0.5em;
    padding-bottom: 14px;
    border-bottom: 1px solid #e5e7eb;
}
.elementor-kit-7 .elementor-widget-theme-post-content h3 {
    font-weight: 600;
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: -0.3px;
    color: #16283b;
    margin: 2em 0 0.4em;
}
.elementor-kit-7 .elementor-widget-theme-post-content h4 {
    font-weight: 600;
    font-size: 17px;
    line-height: 1.4;
    margin: 1.6em 0 0.3em;
}
.elementor-kit-7 .elementor-widget-theme-post-content h5 {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #6e8199;
    margin: 1.8em 0 0.4em;
}
.elementor-kit-7 .elementor-widget-theme-post-content h6 {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #9fb0c4;
    margin: 1.6em 0 0.4em;
}

/* --- Inline links --- */
.elementor-kit-7 .elementor-widget-theme-post-content a,
.elementor-kit-7 .elementor-widget-theme-post-content a:link,
.elementor-kit-7 .elementor-widget-theme-post-content a:visited {
    color: #1f3349;
    text-decoration: underline;
    text-decoration-color: rgba(31, 51, 73, .35);   /* navy, faint — reads as a link, not a typo */
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .2s cubic-bezier(.22, 1, .36, 1),
                text-decoration-color .2s cubic-bezier(.22, 1, .36, 1);
}
.elementor-kit-7 .elementor-widget-theme-post-content a:hover {
    color: #e62041;
    text-decoration-color: #e62041;   /* red appears only on hover, where it signals action */
}

/* --- Emphasis --- */
.elementor-kit-7 .elementor-widget-theme-post-content strong,
.elementor-kit-7 .elementor-widget-theme-post-content b { font-weight: 600; color: #1f3349; }
.elementor-kit-7 .elementor-widget-theme-post-content em,
.elementor-kit-7 .elementor-widget-theme-post-content i { font-style: italic; }

/* --- Lists --- */
.elementor-kit-7 .elementor-widget-theme-post-content ul,
.elementor-kit-7 .elementor-widget-theme-post-content ol { margin: 0 0 1.7em; list-style: none; }
.elementor-kit-7 .elementor-widget-theme-post-content ul { padding-left: 1.5em; }
.elementor-kit-7 .elementor-widget-theme-post-content ol { padding-left: 1.9em; counter-reset: exp-ol; }
.elementor-kit-7 .elementor-widget-theme-post-content li {
    position: relative;
    margin: 0 0 0.6em;
    line-height: 1.7;
}
.elementor-kit-7 .elementor-widget-theme-post-content li:last-child { margin-bottom: 0; }
.elementor-kit-7 .elementor-widget-theme-post-content ul > li::before {
    content: "";
    position: absolute;
    left: -1.1em;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e62041;
}
.elementor-kit-7 .elementor-widget-theme-post-content ol > li { counter-increment: exp-ol; }
.elementor-kit-7 .elementor-widget-theme-post-content ol > li::before {
    content: counter(exp-ol) ".";
    position: absolute;
    left: -1.9em;
    top: 0;
    width: 1.5em;
    text-align: right;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    color: #1f3349;
}
.elementor-kit-7 .elementor-widget-theme-post-content li > ul,
.elementor-kit-7 .elementor-widget-theme-post-content li > ol { margin: 0.5em 0 0; }
.elementor-kit-7 .elementor-widget-theme-post-content ul ul > li::before { background: #9fb0c4; }

/* --- Blockquote — soft navy-tint card, red accent bar, inline <em> attribution --- */
.elementor-kit-7 .elementor-widget-theme-post-content blockquote {
    margin: 2em 0;
    padding: 28px 32px;
    background: #eef1f6;                /* soft fill binds the whole quote as one block */
    border-left: 3px solid #e62041;
    border-radius: 0 14px 14px 0;
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 19px;
    line-height: 1.55;
    color: #1f3349;
    letter-spacing: -0.2px;
}
.elementor-kit-7 .elementor-widget-theme-post-content blockquote p { margin: 0; }
.elementor-kit-7 .elementor-widget-theme-post-content blockquote em {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 1.5;
    color: #6e8199;
}

/* --- Embedded video --- */
.elementor-kit-7 .elementor-widget-theme-post-content iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 12px;
    margin: 0;
}

/* --- Figures & captions --- */
.elementor-kit-7 .elementor-widget-theme-post-content figure,
.elementor-kit-7 .elementor-widget-theme-post-content .wp-block-image { margin: 2em 0; }
.elementor-kit-7 .elementor-widget-theme-post-content figure img,
.elementor-kit-7 .elementor-widget-theme-post-content .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}
.elementor-kit-7 .elementor-widget-theme-post-content figcaption {
    margin-top: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #6e8199;
}

/* --- Horizontal rule --- */
.elementor-kit-7 .elementor-widget-theme-post-content hr {
    border: 0;
    height: 1px;
    background: #e5e7eb;
    margin: 2.4em 0;
}

/* --- Inline code & code blocks --- */
.elementor-kit-7 .elementor-widget-theme-post-content code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.88em;
    background: #f7f8fa;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    padding: 1px 6px;
    color: #1f3349;
}
.elementor-kit-7 .elementor-widget-theme-post-content pre {
    margin: 1.6em 0;
    padding: 18px 20px;
    background: #16283b;
    border-radius: 12px;
    overflow-x: auto;
    line-height: 1.6;
}
.elementor-kit-7 .elementor-widget-theme-post-content pre code {
    background: none;
    border: 0;
    padding: 0;
    color: #f7f8fa;
    font-size: 13px;
}

/* --- Tables --- */
.elementor-kit-7 .elementor-widget-theme-post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.8em 0;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.55;
}
.elementor-kit-7 .elementor-widget-theme-post-content .wp-block-table { margin: 1.8em 0; overflow-x: auto; }
.elementor-kit-7 .elementor-widget-theme-post-content .wp-block-table table { margin: 0; }
.elementor-kit-7 .elementor-widget-theme-post-content thead th {
    background: #1f3349;
    color: #ffffff;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-align: left;
    padding: 12px 16px;
}
.elementor-kit-7 .elementor-widget-theme-post-content td {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}
.elementor-kit-7 .elementor-widget-theme-post-content tbody tr:nth-child(even) { background: #f7f8fa; }
.elementor-kit-7 .elementor-widget-theme-post-content tbody tr:last-child td { border-bottom: 0; }

/* --- Mobile --- */

/* --- Tablet --- */
@media (max-width: 1024px) and (min-width: 768px) {
    .elementor-kit-7 .elementor-widget-theme-post-content h2 { font-size: 27px; }
    .elementor-kit-7 .elementor-widget-theme-post-content h3 { font-size: 20px; }
}

@media (max-width: 767px) {
    .elementor-kit-7 .elementor-widget-theme-post-content { font-size: 16px; }
    .elementor-kit-7 .elementor-widget-theme-post-content > p:first-child > strong:only-child { font-size: 19px; }
    .elementor-kit-7 .elementor-widget-theme-post-content h2 { font-size: 25px; }
    .elementor-kit-7 .elementor-widget-theme-post-content h3 { font-size: 19px; }
    .elementor-kit-7 .elementor-widget-theme-post-content h4 { font-size: 16px; }
    .elementor-kit-7 .elementor-widget-theme-post-content table { font-size: 14px; }
    .elementor-kit-7 .elementor-widget-theme-post-content thead th,
    .elementor-kit-7 .elementor-widget-theme-post-content td { padding: 10px 12px; }
}

/* =====================================================
   EXPLICYTE — Table of Contents (Elementor Pro TOC widget)
   Soft-filled panel, no border, no header divider.
   V4 atomic markup + kit-prefixed.
   ===================================================== */
.elementor-kit-7 .elementor-widget-table-of-contents .elementor-toc__header,
.elementor-kit-7 .elementor-widget-table-of-contents .elementor-toc__body {
    background: #eef1f6;
    border: 0 !important;
    box-shadow: none;
}
.elementor-kit-7 .elementor-widget-table-of-contents .elementor-toc__header {
    border-radius: 16px 16px 0 0;
    padding: 20px 24px 10px;
}
.elementor-kit-7 .elementor-widget-table-of-contents .elementor-toc__body {
    border-radius: 0 0 16px 16px;
    padding: 4px 24px 20px;
}
.elementor-kit-7 .elementor-widget-table-of-contents .elementor-toc__header-title {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #6e8199;
}
.elementor-kit-7 .elementor-widget-table-of-contents .elementor-toc__list-item { margin: 0; }
.elementor-kit-7 .elementor-widget-table-of-contents .elementor-toc__list-item-text,
.elementor-kit-7 .elementor-widget-table-of-contents .elementor-toc__list-item-text:link,
.elementor-kit-7 .elementor-widget-table-of-contents .elementor-toc__list-item-text:visited {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #4b5563;
    text-decoration: none;
    border: 0;
    padding: 7px 0;
    transition: color .2s cubic-bezier(.22, 1, .36, 1);
}
.elementor-kit-7 .elementor-widget-table-of-contents .elementor-toc__list-item-text:hover,
.elementor-kit-7 .elementor-widget-table-of-contents .elementor-toc__list-item.elementor-item-active > .elementor-toc__list-item-text {
    color: #e62041;
}
.elementor-kit-7 .elementor-widget-table-of-contents .elementor-toc__list-wrapper .elementor-toc__list-wrapper { padding-left: 16px; }
.elementor-kit-7 .elementor-widget-table-of-contents .elementor-toc__list-wrapper .elementor-toc__list-wrapper .elementor-toc__list-item-text {
    font-size: 13px;
    color: #6e8199;
}

/* =====================================================
   EXPLICYTE — Case study download block
   ===================================================== */
.exp-cs-download {
    margin: 40px 0;
    padding: 28px 32px;
    background: #eef1f6;
    border-radius: 16px;
}
.exp-cs-download__title {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.25;
    color: #1f3349;
    margin: 0 0 10px;
    letter-spacing: -0.3px;
}
.exp-cs-download__blurb {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #4b5563;
    margin: 0 0 20px;
}
.exp-cs-download__btn {
    display: inline-flex;
    align-items: center;
}
/* Placeholder gate — visible only until the CRM form is wired in */
.exp-cs-download__gate {
    padding: 20px;
    border: 1px dashed #9fb0c4;
    border-radius: 12px;
    background: rgba(255, 255, 255, .5);
}
.exp-cs-download__gate-note {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #6e8199;
    margin: 0;
}

.exp-cs-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* =====================================================
   EXPLICYTE — Posters & Abstracts
   Single page = off-white editorial column (like case studies).
   Hub reuses .exp-events-* bar/grid + .exp-resource-card.
   ===================================================== */

/* Single-page lead line: conference · year */
.exp-poster-meta {
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #6e8199;
    margin: 0 0 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
}
.exp-poster-meta__conf { color: #1f3349; }
.exp-poster-meta__sep  { color: #9fb0c4; }

/* Reference + official-abstract link */
.exp-poster-ref {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #4b5563;
    margin: 18px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
}
.exp-poster-ref__sep { color: #9ca3af; }
.exp-poster-ref__link,
.exp-poster-ref__link:link,
.exp-poster-ref__link:visited {
    color: #e62041;
    text-decoration: none;
    transition: color .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-poster-ref__link:hover { color: #ff3355; }

/* Hub grid — 3/2/1 with the minmax(0,1fr) overflow guard at every tier */
.exp-posters-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) and (min-width: 768px) {
    .exp-posters-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .exp-posters-list { grid-template-columns: minmax(0, 1fr); }
}

/* Abstract cards have no image — nudge the pill to steel so the text card
   reads as deliberate, not as a poster missing its picture. */
.exp-resource-card .resource-card__type--abstract {
    border-color: #6e8199;
    color: #6e8199;
}

/* Posters hub has up to seven filters — let the bar wrap instead of
   overflowing the row. The events bar stays nowrap; it has only two.
   Double-class (0,2,0) beats the media-query nowrap rules on
   .exp-events-bar regardless of source order. */
.exp-posters-bar.exp-events-bar { flex-wrap: wrap; }
/* was: .exp-posters-bar .exp-events-sel { flex: 0 1 auto; min-width: 0; } */
.exp-posters-bar .exp-events-sel {
    flex: 1 1 200px;   /* grow to fill, wrap when a row runs out of 200px slots */
    min-width: 0;      /* let them shrink past content width so the row packs */
    max-width: 320px;  /* stop a lone select on the last row going full-bleed */
}
.exp-posters-bar.exp-events-bar { align-items: flex-start; }

.exp-posters-bar .exp-events-slabel {
    align-self: flex-start;
    padding-top: 13px;   /* matches the select's 9px padding + ~1px border + line-height nudge */
    line-height: 1;
}

/* =====================================================
   EXPLICYTE — IO Target Database
   Single page = off-white editorial column. Hub reuses
   .exp-events-* bar/grid + .exp-resource-card.
   ===================================================== */

/* Target chips reuse the .exp-chip family */
.exp-chip-target { background: #1f3349; }
.exp-chip-target:hover { background: #2d4a6b; transform: translateY(-1px); }

/* "What's inside" — soft panel, same family as TOC/download */
/* What's inside — no panel; lead reads as a section title */
.io-whats-inside { margin: 36px 0; }
.io-whats-inside .exp-eyebrow-muted { margin: 0 0 12px; }
.io-wi-lead {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 26px;
    line-height: 1.3;
    color: #1f3349;
    letter-spacing: -0.4px;
    margin: 0;
}
.io-wi-lead strong { font-weight: 700; color: #e62041; }
.io-wi-group { margin-top: 22px; }
.io-wi-label {
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #6e8199;
    margin-bottom: 10px;
}
.io-wi-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.io-wi-chip {
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #1f3349;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 7px 14px;
    line-height: 1.3;
}
.io-wi-chip b { font-weight: 600; color: #e62041; margin-left: 4px; }

/* Featured companies */
.io-companies { margin: 28px 0; }
.io-companies__lead {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #1f3349;
    margin: 0 0 8px;
}
.io-companies__list {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #4b5563;
    margin: 0;
}

/* Embedded Airtable view */
.io-airtable { margin: 32px 0; }
.io-airtable__frame {
    display: block;
    width: 100%;
    height: 600px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
}
@media (max-width: 767px) { .io-airtable__frame { height: 520px; } }

/* Services CTA — navy panel, white text, red links */
/* Services CTA — single line + contact button */
.io-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 32px;
    background: #1f3349;
    border-radius: 16px;
    padding: 28px 32px;
    margin: 40px 0;
}
.io-cta__text {
    flex: 1 1 320px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.35;
    color: #ffffff;
    letter-spacing: -0.2px;
    margin: 0;
}
.io-cta__btn,
.io-cta__btn:link,
.io-cta__btn:visited {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #e62041;
    color: #ffffff !important;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    letter-spacing: .2px;
    padding: 14px 26px;
    border-radius: 999px;
    text-decoration: none !important;
    border: none;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .25s cubic-bezier(.22, 1, .36, 1);
}
.io-cta__btn::after {
    content: "→";
    display: inline-block;
    font-size: 1.1em;
    line-height: 1;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.io-cta__btn:hover,
.io-cta__btn:focus {
    background: #ff3355;      /* bright red — brand hover */
    color: #ffffff !important; /* text stays white = readable */
    text-decoration: none !important;
}
.io-cta__btn:hover::after {
    transform: translateX(4px);
}

.io-targets__lead {
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    color: #6e8199;
    margin: 0 0 12px;
}
.io-intro__title {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.3;
    color: #1f3349;
    letter-spacing: -0.3px;
    margin: 0 0 14px;
}

/* Hub grid — 3/2/1 with the minmax(0,1fr) overflow guard */
.exp-targets-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) and (min-width: 768px) {
    .exp-targets-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .exp-targets-list { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================
   EXPLICYTE — MultiOmics header (light panels, cyan accent)
   Scoped under .mo-header so nothing leaks onto the oncology header.
   PANEL BACKGROUND is set in Elementor (n-menu dropdown content),
   NOT here — this block only re-colors the panel internals.
   Cyan #06b6d4 carries the sub-brand; navy/steel replace white-on-dark.
   ===================================================== */
/* --- Mega-menu items: white→navy, red→cyan (keep the slide) --- */
.mo-header .megamenu-item,
.mo-header .megamenu-item a,
.mo-header .megamenu-item-wrapper .megamenu-item,
.mo-header .megamenu-item-wrapper .megamenu-item a {
  color: #1A1A1A !important;
}
.mo-header .megamenu-item:hover,
.mo-header .megamenu-item:hover a,
.mo-header .megamenu-item-wrapper:hover .megamenu-item,
.mo-header .megamenu-item-wrapper:hover .megamenu-item a {
  color: #06b6d4 !important;   /* transform:translateX(4px) inherited from base */
}
/* --- Eyebrows: red→cyan --- */
.mo-header .megamenu-eyebrow,
.mo-header .megamenu-eyebrow a {
  color: #06b6d4 !important;
}
.mo-header .megamenu-eyebrow:has(a):hover,
.mo-header .megamenu-eyebrow:has(a):hover a,
.mo-header .megamenu-eyebrow a:hover {
  color: #0891a3 !important;   /* darker cyan, mirrors your platform-chip hover */
}
/* --- Submenu lists: dim-white→steel --- */
.mo-header .submenu-list,
.mo-header .submenu-list p {
  color: #9fb0c4 !important;   /* separators / muted text */
}
.mo-header .submenu-list a {
  color: #4b5563 !important;   /* readable on light */
}
.mo-header .submenu-list a:hover {
  color: #1f3349 !important;
}
/* --- Simple dropdown items (Multiomics, Bioinformatics): white→navy, red→cyan --- */
.mo-header .dropdown-item,
.mo-header .dropdown-item a {
  color: #1A1A1A !important;
}
.mo-header .dropdown-item:hover,
.mo-header .dropdown-item:hover a {
  color: #06b6d4 !important;
}
/* --- Featured card internals (lives in §9, specificity 0,2,0) ---
   .mo-header … = 0,3,0 beats it; !important guards against the base
   accent rules and any widget-level Style colour. --- */
.mo-header .e-n-menu-content .megamenu-card-title {
  color: #1f3349 !important;
}
.mo-header .e-n-menu-content .megamenu-card-cta {
  color: #06b6d4 !important;
}
/* MultiOmics menu cards — keep the existing grey line, add lift + ease only */
.mo-header .megamenu-card {
  transition:
    transform .25s cubic-bezier(.22, 1, .36, 1),
    box-shadow .25s ease;
}
.mo-header .megamenu-card:hover {
  transform: translateY(-3px);
}
/* MultiOmics header — light bar, scoped to .mo-header only.
   Beats the per-widget navy (.e-<hash>, specificity 0,2,0) with
   0,2,0 + !important. Oncology header (different hash) untouched. */
header .elementor-element.mo-header,
.elementor .mo-header {
  background-color: #ffffff !important;
}
/* Top-level menu titles: near-black at rest, hover/active→cyan */
.mo-header .e-n-menu-title-text {
  color: #1a1a1a !important;
}
.mo-header .e-n-menu-title:hover .e-n-menu-title-text,
.mo-header .e-n-menu-title.e-current .e-n-menu-title-text {
  color: #06b6d4 !important;
}
/* Chevron icons follow the same colour.
   color covers a font-icon <i>; fill covers an inline <svg> (the
   color rule never reaches an SVG's fill — same gotcha as the
   value-prop icons). If DevTools shows a STROKE-based chevron,
   swap fill → stroke. */
.mo-header .e-n-menu-title .e-n-menu-dropdown-icon,
.mo-header .e-n-menu-title .e-n-menu-dropdown-icon svg,
.mo-header .e-n-menu-title .e-n-menu-dropdown-icon svg * {
  color: #1a1a1a !important;
  fill:  #1a1a1a !important;
}
.mo-header .e-n-menu-title:hover .e-n-menu-dropdown-icon,
.mo-header .e-n-menu-title:hover .e-n-menu-dropdown-icon svg,
.mo-header .e-n-menu-title:hover .e-n-menu-dropdown-icon svg *,
.mo-header .e-n-menu-title.e-current .e-n-menu-dropdown-icon,
.mo-header .e-n-menu-title.e-current .e-n-menu-dropdown-icon svg,
.mo-header .e-n-menu-title.e-current .e-n-menu-dropdown-icon svg * {
  color: #06b6d4 !important;
  fill:  #06b6d4 !important;
}
.mo-header .btn-cro-ghost:hover {
  background-color: rgba(230, 32, 65, 0.18) !important;
  color: #c01b35 !important;
}


/* =====================================================
   EXPLICYTE — Global footer (navy background, V4 atomic)
   ===================================================== */
.exp-footer {
    padding: 64px 24px 28px;
    font-family: 'Inter', sans-serif;
    color: #9fb0c4;
}
.exp-footer__top,
.exp-footer__cols,
.exp-footer__bottom {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
}
.exp-footer__top { margin-bottom: 56px; }

.exp-footer__brand img,
img.exp-footer__brand {
    height: 40px;
    width: auto;
    max-width: 100%;
    display: block;
    filter: brightness(0) invert(1);
}

/* --- Footer block under the logo: tagline + address --- */
.exp-footer__about {
    margin-top: 22px;
}
.exp-footer__about-tag {
    font-family: 'Work Sans', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.2px;
    color: #ffffff;
    margin: 0 0 18px;
}
.exp-footer__about-addr {
    font-family: 'Inter', sans-serif;
    font-style: normal;          /* <address> defaults to italic — reset it */
    font-size: 14px;
    line-height: 1.7;
    color: #9fb0c4;
    margin: 0;
}

.exp-footer__news { min-width: 0; }
.exp-footer__news-title {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -0.3px;
    color: #ffffff;
    margin: 0 0 18px;
}
.exp-footer__news-note {
    font-size: 12px;
    line-height: 1.5;
    color: #6e8199;
    margin: 12px 0 0;
}
.exp-footer__news-note a {
    color: #9fb0c4;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .25s cubic-bezier(.22,1,.36,1);
}
.exp-footer__news-note a:hover { color: #ff3355; }

/* --- Newsletter form (V3 widget) — email + Sign up on one row, with the
       injected Cloudflare Turnstile field (RelyWP "Simple CAPTCHA") wrapping
       to its own full-width line beneath.

       The plugin nests its widget INSIDE .e-form__buttons, beside Sign up.
       display:contents on that group promotes both children into the form's
       flex row, so the Turnstile becomes a sibling that can wrap.
       Flex ROW + wrap live on .elementor-form-fields-wrapper (the real
       container). box-sizing + zeroed group padding keep width:100% inside
       the column instead of overflowing onto the title/disclaimer. --- */
.exp-footer-form .elementor-form {
    width: 100% !important;
}
.exp-footer-form .elementor-form-fields-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;    /* lets the Turnstile field drop to its own line */
    align-items: stretch;
    width: 100% !important;
    gap: 8px 12px;                 /* row-gap 8px · column-gap 12px */
    margin: 0 !important;          /* kill Elementor's negative calc() side margins */
    box-sizing: border-box;        /* width:100% includes padding — no overflow */
}
.exp-footer-form .elementor-field-label { display: none; }   /* placeholder carries meaning */
.exp-footer-form .elementor-field-group {
    margin: 0 !important;
    padding: 0 !important;         /* the negative margins offset this — both must go */
}
.exp-footer-form .elementor-field-group-email {
    flex: 1 1 auto !important;     /* email grows to fill the row */
    width: auto !important;
    min-width: 0;
}
.exp-footer-form .e-form__buttons {
    display: contents;   /* promote Sign up into the form's flex row so the
                            injected Turnstile field becomes a wrapping sibling */
}
.exp-footer-form input[type="email"].elementor-field-textual {
    width: 100% !important;
    min-width: 0 !important;       /* beats the size="1" intrinsic min-width */
}
.exp-footer-form .elementor-field-textual {
    width: 100%;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #ffffff !important;
    background-color: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 12px;
    padding: 14px 18px;
    line-height: 1.4;
    outline: none;
    transition: border-color .25s cubic-bezier(.22,1,.36,1),
                box-shadow .25s cubic-bezier(.22,1,.36,1);
}
.exp-footer-form .elementor-field-textual::placeholder { color: #9fb0c4; opacity: 1; }
.exp-footer-form .elementor-field-textual:focus {
    border-color: rgba(255,255,255,.45) !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,.10);
}
.exp-footer-form .elementor-button[type="submit"] {
    flex: 0 0 auto !important;   /* beats the kit's flex-basis:100% that forces a wrap */
    align-self: stretch;   /* match the email field height in the wrap row */
    white-space: nowrap;
    background: #e62041;
    color: #ffffff;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    border: none;
    border-radius: 12px;
    padding: 14px 28px;
    cursor: pointer;
    transition: background-color .25s cubic-bezier(.22,1,.36,1);
}
.exp-footer-form .elementor-button[type="submit"]:hover { background: #ff3355; }
/* Turnstile field — forced onto its own full-width line beneath email + Sign up.
   No display:none — the widget still renders and generates its token. */
.exp-footer-form .elementor-turnstile-field.cf-turnstile {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin: 12px 0 0 !important;   /* beats the plugin's inline 10px 0 15px */
}

/* Keep the Turnstile field at the BOTTOM — in source order it sits between
   the email field and Sign up, opening an empty band (the invisible fallback
   still takes a line). Ordering it last makes email + button adjacent. */
.exp-footer-form .elementor-field-group-email        { order: 1; }
.exp-footer-form .elementor-button[type="submit"]    { order: 2; }
.exp-footer-form .elementor-turnstile-field.cf-turnstile { order: 3; }

/* --- Link columns — CSS Grid (prefixed to beat the atomic flexbox display:flex) --- */
.exp-footer .exp-footer__cols {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 32px;
    padding: 0 0 48px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.exp-footer .exp-footer__col-title {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.2px;
    color: #ffffff;
    margin: 0 0 4px;
}

/* --- Footer column titles are now links: define both states ---
   Atomic link (.e-paragraph-link-base) uses all:unset → inherits white at
   rest, but the kit's a:hover hijacks the hover colour and the title vanishes
   against the navy. Set rest + hover explicitly. */
.exp-footer .exp-footer__col-title a,
.exp-footer .exp-footer__col-title a:link,
.exp-footer .exp-footer__col-title a:visited {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color .2s cubic-bezier(.22, 1, .36, 1);
}
.exp-footer .exp-footer__col-title a:hover,
.exp-footer .exp-footer__col-title a:focus {
    color: #ff3355 !important;
    text-decoration: none !important;
}

/* Multiomics column keeps the cyan sub-brand at rest + on hover */
.exp-footer .exp-footer__col--omics .exp-footer__col-title a,
.exp-footer .exp-footer__col--omics .exp-footer__col-title a:link,
.exp-footer .exp-footer__col--omics .exp-footer__col-title a:visited {
    color: #06b6d4 !important;
}
.exp-footer .exp-footer__col--omics .exp-footer__col-title a:hover,
.exp-footer .exp-footer__col--omics .exp-footer__col-title a:focus {
    color: #0891a3 !important;
}

.exp-footer__links { list-style: none; margin: 0; padding: 0; }
.exp-footer__links li { margin: 0 0 11px; }
.exp-footer__links li:last-child { margin-bottom: 0; }
.exp-footer__links a,
.exp-footer__links a:link,
.exp-footer__links a:visited {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #9fb0c4;
    text-decoration: none;
    transition: color .2s cubic-bezier(.22,1,.36,1);
}
.exp-footer__links a:hover { color: #ff3355; }

/* Multiomics column → cyan sub-brand */
.exp-footer .exp-footer__col--omics .exp-footer__col-title { color: #06b6d4; }
.exp-footer__col--omics .exp-footer__links a:hover { color: #06b6d4; }

/* --- Bottom bar --- */
.exp-footer__bottom { padding-top: 26px; }
.exp-footer__copy { font-size: 13px; color: #9fb0c4; margin: 0; }
.exp-footer__copy p { margin: 0; }
.exp-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.exp-footer__legal a,
.exp-footer__legal a:link,
.exp-footer__legal a:visited {
    font-size: 13px;
    color: #6e8199;
    text-decoration: underline;
    text-decoration-color: rgba(159,176,196,.4);
    text-underline-offset: 2px;
    transition: color .2s cubic-bezier(.22,1,.36,1),
                text-decoration-color .2s cubic-bezier(.22,1,.36,1);
}
.exp-footer__legal a:hover { color: #ff3355; text-decoration-color: #ff3355; }

/* Push social to the far right (the empty margin-left was the bug) */
.exp-footer .exp-footer__social { margin-left: auto !important; }
.exp-footer__social .elementor-social-icon {
/*    width: 36px !important; */
/*    height: 36px !important; */
/*    font-size: 18px !important; */
    background: transparent !important;
    color: #ffffff !important;
    padding: 0 !important;
    transition: color .2s cubic-bezier(.22,1,.36,1),
                transform .2s cubic-bezier(.22,1,.36,1);
}
.exp-footer__social .elementor-social-icon svg {
/*     width: 18px !important; */
/*    height: 18px !important; */
    fill: currentColor;
}
.exp-footer__social .elementor-social-icon:hover {
    color: #ff3355 !important;
    background: transparent !important;
    transform: translateY(-2px);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .exp-footer .exp-footer__cols { grid-template-columns: repeat(3, 1fr); gap: 36px 28px; }
}
@media (max-width: 767px) {
    .exp-footer { padding: 48px 20px 24px; }
    .exp-footer__top { margin-bottom: 40px; }
    .exp-footer__news { flex-basis: 100%; }
    .exp-footer-form .elementor-form-fields-wrapper { flex-wrap: wrap !important; }
    .exp-footer-form .elementor-field-group-email { flex-basis: 100% !important; }
    .exp-footer-form .elementor-button[type="submit"] { flex-basis: 100% !important; width: 100%; }
    .exp-footer .exp-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
    .exp-footer .exp-footer__social { margin-left: 0 !important; }
}
@media (max-width: 420px) {
    .exp-footer .exp-footer__cols { grid-template-columns: 1fr; }
}

/* =====================================================
   EXPLICYTE — Indications grid (H&E background, hover-reveal)
   Card = H&E/TMA image + navy scrim. Scrim is light at rest
   (tissue shows) and deepens on hover so the white subtype
   list stays readable. Subtypes are always in the DOM
   (max-height/opacity only) → long-tail terms stay crawlable.
   ===================================================== */
.exp-ind-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
}
.exp-ind-card {
    position: relative;
    height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 26px;
    border-radius: 16px;
    overflow: hidden;
    cursor: default;
    background-color: #16283b;      /* fallback under the H&E */
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, .10);
    transition: border-color .25s cubic-bezier(.22, 1, .36, 1),
                box-shadow .3s ease,
                transform .3s cubic-bezier(.22, 1, .36, 1);
}
.exp-ind-card:hover {
    border-color: rgba(230, 32, 65, .45);
    box-shadow: 0 18px 40px -20px rgba(15, 23, 42, .45);
    transform: translateY(-4px);
}

/* Navy scrim — deepens on hover to make subtypes readable */
.exp-ind-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 28, 43, .35), rgba(16, 28, 43, .68));
    transition: background .35s cubic-bezier(.22, 1, .36, 1);
    z-index: 0;
}
.exp-ind-card:hover::before {
    background: linear-gradient(180deg, rgba(16, 28, 43, .86), rgba(16, 28, 43, .90));
}

/* Content above the scrim */
.exp-ind-card__name,
.exp-ind-card__hint,
.exp-ind-card__subtypes {
    position: relative;
    z-index: 1;
}
.exp-ind-card__name {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.2px;
    color: #ffffff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}
.exp-ind-card__hint {
    margin-top: 10px;
    font-family: 'Work Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    transition: opacity .2s ease;
}
.exp-ind-card:hover .exp-ind-card__hint { opacity: 0; }

.exp-ind-card__subtypes {
    max-height: 0;
    opacity: 0;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
    transition: max-height .35s cubic-bezier(.22, 1, .36, 1),
                opacity .3s ease,
                margin-top .35s cubic-bezier(.22, 1, .36, 1);
}
.exp-ind-card:hover .exp-ind-card__subtypes {
    max-height: 220px;
    opacity: 1;
    margin-top: 14px;
}
.exp-ind-card__subtypes::before {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    background: #e62041;
    margin: 0 auto 12px;
}

/* Touch / no-hover — deep scrim + subtypes always shown */
@media (hover: none) {
    .exp-ind-card {
        height: auto;
        min-height: 200px;
        justify-content: flex-start;
    }
    .exp-ind-card::before {
        background: linear-gradient(180deg, rgba(16, 28, 43, .82), rgba(16, 28, 43, .88));
    }
    .exp-ind-card__hint { display: none; }
    .exp-ind-card__subtypes { max-height: none; opacity: 1; margin-top: 14px; }
}

/* Tablet / mobile */
@media (max-width: 1024px) and (min-width: 768px) {
    .exp-ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .exp-ind-grid { grid-template-columns: 1fr; gap: 14px; }
    .exp-ind-card {
        height: auto;
        min-height: 180px;
        justify-content: flex-start;
    }
    .exp-ind-card::before {
        background: linear-gradient(180deg, rgba(16, 28, 43, .82), rgba(16, 28, 43, .88));
    }
    .exp-ind-card__hint { display: none; }
    .exp-ind-card__subtypes { max-height: none; opacity: 1; margin-top: 14px; }
}

/* =====================================================
   EXPLICYTE — Workflow "Key outputs" block
   One Text Editor per row, class .exp-outputs:
     **Key outputs**  (bold first line = label)
     - item / - item …
   Styled once, reused across all three workflow rows.
   ===================================================== */
.exp-outputs {
    margin-top: 12px;
    padding-top: 22px;
    border-top: 1px solid #e5e7eb;     /* hairline sets deliverables apart from the body copy */
}

/* Label line ("Key outputs") — eyebrow treatment */
.exp-outputs p {
    margin: 0 0 16px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #6e8199;
}
.exp-outputs p strong { font-weight: 600; color: inherit; } /* neutralise the bold's extra weight */

/* List */
.exp-outputs ul { list-style: none; margin: 0; padding: 0; }
.exp-outputs li {
    position: relative;
    padding-left: 28px;
    margin: 0 0 11px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: #1f3349;
}
.exp-outputs li:last-child { margin-bottom: 0; }

/* Red check marker — drawn as inline SVG so it stays crisp */
.exp-outputs li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23e62041' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* =====================================================
   EXPLICYTE — Nested "Key outputs" — level-2 readouts
   Sub-items under a deliverable get a small red dot,
   not another check: they read as elaborations of the
   parent line, not peer deliverables. Muted text +
   tighter indent complete the hierarchy shift.
   Cyan variant follows on MultiOmics (.mo-page).
   ===================================================== */

/* Nested list — reset spacing and neutralise any parent
   grid (e.g. .exp-outputs--card's 2-col ul) so the sub-list
   flows normally inside its parent li. */
.exp-outputs li > ul {
    display: block;
    grid-template-columns: none;
    margin: 10px 0 4px;
    padding: 0;
}

/* Level-2 line — smaller, muted, tighter indent */
.exp-outputs li li {
    padding-left: 20px;
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.55;
    color: #4b5563;
}
.exp-outputs li li:last-child { margin-bottom: 0; }

/* Level-2 marker — small red dot.
   `background:` shorthand overrides the parent li's SVG check
   AND sets background-color in one declaration. */
.exp-outputs li li::before {
    top: 9px;
    left: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #e62041;
}

/* MultiOmics — cyan sub-dot.
   Beats the .mo-page parent rule's !important via higher
   specificity (li li vs li) + !important. */
.mo-page .exp-outputs li li::before {
    background: #06b6d4 !important;
}

/* =====================================================
   EXPLICYTE — Consulting pathologist bios
   One Text Editor per person, class .exp-patho:
     **Name, MD, PhD**           (bold first line = name)
     - **Lead-in** detail…       (steel-dot list, bold navy lead-in)
   Names follow the sponsor-author convention (navy, title case),
   NOT the red eyebrow style. Steel dots here keep the list visually
   distinct from the red-check "Key outputs" deliverables alongside.
   ===================================================== */

/* Name line (first paragraph) */
.elementor-kit-7 .exp-patho__name {
    margin: 0 0 12px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -.2px;
    color: #1f3349;
}
/* Bio list */
.exp-patho ul { list-style: none; margin: 0; padding: 0; }
.exp-patho li {
    position: relative;
    padding-left: 20px;
    margin: 0 0 9px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #4b5563;
}
.exp-patho li:last-child { margin-bottom: 0; }
.exp-patho li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #9fb0c4;          /* steel — not the red used for deliverables */
}

/* Bold lead-ins ("Pathologist", "CEO", "Areas of expertise:") → navy */
.exp-patho li strong { font-weight: 600; color: #1f3349; }

/* Inline links (Biwako) — subtle, navy→red on hover */
.exp-patho a,
.exp-patho a:link,
.exp-patho a:visited {
    color: #1f3349;
    text-decoration: underline;
    text-decoration-color: rgba(31,51,73,.35);
    text-underline-offset: 2px;
    transition: color .2s cubic-bezier(.22,1,.36,1),
                text-decoration-color .2s cubic-bezier(.22,1,.36,1);
}
.exp-patho a:hover { color: #e62041; text-decoration-color: #e62041; }

/* =====================================================
   EXPLICYTE — Platform cards: instrument photo (bg) + centered badge
   Photo lives on .exp-service-card__img background (Cover/Center in panel).
   Navy scrim keeps any badge legible over a busy photo.
   Badge = Image widget .exp-service-card__badge, centered on top.
   ===================================================== */
.exp-service-card--platform .exp-service-card__img {
    position: relative;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #16283b;     /* fallback under the photo */
    background-size: cover;        /* (also set Cover in the panel) */
    background-position: center;
    border-bottom: 1px solid #e5e7eb;
}

/* Scrim — keeps the badge readable over the instrument photo */
.exp-service-card--platform .exp-service-card__img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(16, 28, 43, .42);
    transition: background .3s ease;
    z-index: 0;
}
.exp-service-card--platform:hover .exp-service-card__img::before {
    background: rgba(16, 28, 43, .30);   /* lifts slightly on hover — photo pops */
}

/* Badge — centered, above the scrim, contained (never cropped) */
.exp-service-card--platform .exp-service-card__badge {
    position: relative;
    z-index: 1;
    max-width: 64%;
    max-height: 72px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.exp-service-card--platform:hover .exp-service-card__badge {
    transform: scale(1.04);
}

.exp-service-card--platform .exp-service-card__badge svg,
.exp-service-card--platform .exp-service-card__badge svg * {
    fill: #ffffff !important;
}

/* Grid: 3 / 2 / 1. Cards are direct children, so height:100%
   on .exp-service-card resolves to the tallest in the row. */
.platform-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}
@media (max-width: 1024px) and (min-width: 768px) {
    .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .platform-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Height pass-through — ONLY needed if the Container Link nests a
   wrapper between .platform-grid and .exp-service-card (ragged
   heights = symptom). Harmless if left in. */
.platform-grid > * { display: flex; }
.platform-grid > * > .exp-service-card,
.platform-grid > .exp-service-card { width: 100%; }

.exp-service-card--platform .exp-service-card__cta {
    display: inline-flex;
    align-items: center;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    color: #e62041;
}
.exp-service-card--platform .exp-service-card__cta::after {
    content: "→";
    display: inline-block;
    margin-left: 10px;
    font-size: 1.15em;
    line-height: 1;
    transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.exp-service-card--platform:hover .exp-service-card__cta::after {
    transform: translateX(4px);
}

/* =====================================================
   EXPLICYTE — Platform comparison table (target ID page)
   Static. Desktop = table; mobile = stacked cards (data-label).
   Lives in an accordion panel via an HTML widget (.exp-cmp).
   ===================================================== */
.exp-cmp { margin: 8px 0 4px; overflow-x: auto; }
.exp-cmp__table {
    width: 100%; border-collapse: collapse;
    font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.55; color: #1a1a1a;
}
.exp-cmp__table thead th {
    background: #1f3349; color: #fff;
    font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .3px;
    text-align: left; padding: 14px 16px; white-space: nowrap;
}
.exp-cmp__table thead th:first-child { border-radius: 10px 0 0 0; }
.exp-cmp__table thead th:last-child  { border-radius: 0 10px 0 0; }
.exp-cmp__table tbody th[scope="row"] {
    font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 15px; color: #1f3349;
    text-align: left; white-space: nowrap; vertical-align: top; padding: 16px;
}
.exp-cmp__table td { padding: 16px; vertical-align: top; color: #4b5563; }
.exp-cmp__table tbody tr { border-bottom: 1px solid #e5e7eb; }
.exp-cmp__table tbody tr:last-child { border-bottom: 0; }
.exp-cmp__table tbody tr:nth-child(even) { background: #f7f8fa; }

@media (max-width: 767px) {
    .exp-cmp { overflow: visible; }
    .exp-cmp__table, .exp-cmp__table tbody, .exp-cmp__table tr,
    .exp-cmp__table td, .exp-cmp__table tbody th[scope="row"] { display: block; width: 100%; }
    .exp-cmp__table thead { display: none; }
    .exp-cmp__table tbody tr {
        background: #fff !important; border: 1px solid #e5e7eb; border-radius: 14px;
        padding: 6px 18px 14px; margin: 0 0 14px;
    }
    .exp-cmp__table tbody tr:last-child { margin-bottom: 0; }
    .exp-cmp__table tbody th[scope="row"] {
        font-size: 18px; padding: 14px 0 10px; border-bottom: 1px solid #e5e7eb;
        margin-bottom: 10px; white-space: normal;
    }
    .exp-cmp__table td { padding: 8px 0; white-space: normal; }
    .exp-cmp__table td::before {
        content: attr(data-label); display: block;
        font-family: 'Work Sans', sans-serif; font-size: 11px; font-weight: 600;
        letter-spacing: 1.2px; text-transform: uppercase; color: #6e8199; margin-bottom: 3px;
    }
}


/* Navy-page context: comparison table sits as a white card on the navy */
.exp-cmp {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;            /* clips the navy thead corners to the card radius */
    box-shadow: 0 12px 30px -14px rgba(15, 23, 42, .28);
}
@media (max-width: 767px) {
    .exp-cmp {
        background: transparent;  /* let the stacked white row-cards stand alone */
        box-shadow: none;
        overflow: visible;
    }
}

/* =====================================================
   EXPLICYTE — Target-ID case slides ([exp_target_cases])
   Navy page → white card. .exp-cs-slider > viewport > track > slide × N
   ===================================================== */

.exp-cs-slider { position: relative; padding: 0 64px; }
.exp-cs-viewport { overflow: hidden; border-radius: 20px; }
.exp-cs-track { display: flex; transition: transform .45s cubic-bezier(.22,1,.36,1); }

.exp-cs-slide {
    flex: 0 0 100%;
    min-width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    background: #ffffff;
    align-items: stretch;
}

/* LEFT — text */
.exp-cs-slide__text {
    padding: 42px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.exp-cs-slide__text .exp-cs-slide__title {
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.18;
    letter-spacing: -0.6px;
    color: #1f3349;
    margin: 0 0 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e5e7eb;
}
.exp-cs-slide__text .exp-cs-slide__lead {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #1a1a1a;
    margin: 0 0 18px;
}
.exp-cs-slide__text p {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    line-height: 1.6;
    color: #4b5563;
    margin: 0 0 14px;
}
.exp-cs-slide__text p strong { font-weight: 600; color: #1f3349; }

/* Actions — stacked: ghost pill on top, quiet paper link under it */
.exp-cs-slide__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-top: 14px;
}

/* Ghost CTA recolored for the white card (base class is dark-bg + cyan) */
.exp-cs-slider .exp-cs-slide__cta.btn-cro-ghost,
.exp-cs-slider .exp-cs-slide__cta.btn-cro-ghost:link,
.exp-cs-slider .exp-cs-slide__cta.btn-cro-ghost:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    max-width: max-content;
    align-self: flex-start;
    padding: 23px 33px;              /* 24/34 primary, minus 1px each side for the border */
    border: 1px solid #e62041;
    border-radius: 999px;
    background-color: transparent;
    color: #e62041;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.5px;
    line-height: 1em;
    text-decoration: none !important;
}
.exp-cs-slider .exp-cs-slide__cta.btn-cro-ghost:hover {
    background-color: #e62041;
    color: #ffffff;
    border-color: #e62041;
}

/* Quiet arrow-text secondary */
.exp-cs-slide__paper,
.exp-cs-slide__paper:link,
.exp-cs-slide__paper:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #e62041;
    text-decoration: none !important;
    transition: gap .2s ease;
}
.exp-cs-slide__paper::after {
    content: "\2192";               /* escaped arrow — avoids mojibake */
    transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.exp-cs-slide__paper:hover { color: #ff3355; }
.exp-cs-slide__paper:hover::after { transform: translateX(4px); }

.exp-cs-slide__paper,
.exp-cs-slide__paper:link,
.exp-cs-slide__paper:visited {
    /* …your existing paper rules… */
    margin-top: 16px;
    margin-left: 32px;
}

/* RIGHT — media, whole figure visible */
.exp-cs-slide__media {
    position: relative;
    background: #ffffff;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.exp-cs-slide__media img {
    width: 100%;
    height: 100%;
    max-height: 560px;
    object-fit: contain;
    display: block;
}

/* Arrows — white, in the navy gutters */
.exp-cs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    border: none;
    background: transparent;
    color: #ffffff;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1);
}
.exp-cs-arrow:hover { color: #ff3355; }
.exp-cs-arrow--prev { left: 8px; }
.exp-cs-arrow--next { right: 8px; }
.exp-cs-slider .exp-cs-arrow {
    width: 56px;
    height: 56px;
    font-size: 44px;
    box-shadow: none;
}

/* Dots */
.exp-cs-dots { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }
.exp-cs-slider .exp-cs-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    cursor: pointer;
    transition: background-color .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1);
}
.exp-cs-slider .exp-cs-dot:hover { background: rgba(255,255,255,.65); }
.exp-cs-slider .exp-cs-dot.is-active { background: #ff3355; transform: scale(1.15); }

/* Mobile — stack card, image on top */
@media (max-width: 860px) {
    .exp-cs-slider { padding: 0 44px; }
    .exp-cs-slide { grid-template-columns: 1fr; }
    .exp-cs-slide__media { order: -1; min-height: 0; padding: 18px; }
    .exp-cs-slide__media img { max-height: 420px; }
    .exp-cs-slide__text { padding: 28px 22px; }
    .exp-cs-slide__text .exp-cs-slide__title { font-size: 22px; }
    .exp-cs-arrow { width: 38px; height: 38px; font-size: 26px; }
    .exp-cs-arrow--prev { left: 2px; }
    .exp-cs-arrow--next { right: 2px; }
}

/* =====================================================
   EXPLICYTE — Section-2 "four questions" block (TEP)
   Flat, NON-clickable explanatory columns on navy.
   No card chrome / shadow / hover / arrow — deliberately
   distinct from the clickable .exp-service-card hub cards.
   Structure: .exp-qgrid (4-col)
                > .exp-q  (column, transparent; Direction+Gap set in panel)
                    > img.exp-q__media
                    > .exp-q__title  (atomic H3)
                    > .exp-q__body   (atomic Paragraph / Text)
   ===================================================== */

/* Grid — 4 / 2 / 1, minmax(0,1fr) overflow guard at every tier */
.exp-qgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin: 0;
}
@media (max-width: 1024px) and (min-width: 768px) {
    .exp-qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
}
@media (max-width: 767px) {
    .exp-qgrid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* Column — flat on navy, no card chrome (direction/gap live in the panel) */
.exp-q {
    text-align: left;
    background: transparent;
}

/* Image / schematic — rounded, hairline border so a dark microscopy crop
   doesn't bleed into the navy. object-fit:cover for photos; switch to
   'contain' for schematics that carry their own whitespace. */
.exp-q__media {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .10);
}

/* Title — white, Work Sans. Atomic H3 (real subheading, not a label). */
.exp-q__title {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.2px;
    color: #ffffff;
    margin: 18px 0 8px;
}

/* Body — steel, Inter. Handles atomic Paragraph (class on <p>) and
   Text Editor (class on the wrapper → style its inner <p>). */
.exp-q__body,
.exp-q__body p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #9fb0c4;
    margin: 0;
}

/* =====================================================
   EXPLICYTE — Before/after image comparison [exp_before_after]
   'after' base img sizes the box; 'before' overlay clipped on top.
   Border tuned for navy; on a WHITE section swap to a faint navy alpha.
   ===================================================== */
.exp-ba { width: 100%; }

.exp-ba__viewport {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .10);   /* navy context */
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;            /* page still scrolls vertically over it */
    line-height: 0;
}

/* Base = AFTER (in flow, defines height) */
.exp-ba__base { display: block; width: 100%; height: auto; }

/* Overlay = BEFORE (clipped). Fills the same box; same source dims = exact match. */
.exp-ba__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;                     /* was auto — lets the wipe cover the AFTER label */
    clip-path: inset(0 45% 0 0);    /* JS overrides from data-start */
    -webkit-clip-path: inset(0 45% 0 0);
}
.exp-ba__overlay-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Before/after — the divider and the wipe must move on the SAME frame,
   with no easing. A transition on the overlay eases the clip-path and the
   wipe trails the handle. will-change keeps both on the compositor. */
.exp-ba__overlay,
.exp-ba .exp-ba__handle {
    transition: none !important;
    will-change: clip-path, left;
}

/* Labels — dark glass pills; before clips away with the overlay */
.exp-ba__label {
    position: absolute;
    top: 14px;
    z-index: 2;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: 'Work Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(16, 28, 43, .70);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: none;
    white-space: nowrap;
}
.exp-ba__label--before { left: 14px; }
.exp-ba__label--after  { 
	right: 14px;
	z-index: 1;}

/* Divider handle — must out-rank .elementor-kit-7 button (red pill).
   Scope under .exp-ba + name the kit-set props explicitly. */
.exp-ba .exp-ba__handle,
.elementor-kit-7 .exp-ba .exp-ba__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 45%;                      /* JS overrides */
    transform: translateX(-50%);
    width: 44px;
    padding: 0;                     /* kill kit's 12px 28px */
    margin: 0;
    border: 0;                      /* kill kit border */
    background: transparent;        /* longhand below also, to be safe */
    background-color: transparent;  /* THE red-bar fix */
    border-radius: 0;               /* kill kit's 999px pill */
    box-shadow: none;
    cursor: ew-resize;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
}
.exp-ba__handle:focus-visible { outline: none; }
.exp-ba__handle:focus-visible .exp-ba__handle-grip {
    box-shadow: 0 0 0 3px rgba(255, 51, 85, .55);
}
.exp-ba__handle-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: #ffffff;
}
.exp-ba__handle-grip {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    color: #1f3349;
    font-family: 'Work Sans', sans-serif;
    font-size: 18px;
    line-height: 40px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .35);
}

@media (max-width: 767px) {
    .exp-ba__handle-grip { width: 34px; height: 34px; line-height: 34px; font-size: 16px; }
    .exp-ba__label { font-size: 10px; padding: 4px 10px; top: 10px; }
}

/* =====================================================
   EXPLICYTE — Logo strip ([exp_logo_strip])
   Centered, wrapping row of partner/sponsor logos.
   Default = light section (grayscale → colour on hover).
   .exp-logo-strip--navy = white-inverted, for dark sections.
   ===================================================== */
.exp-logo-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px 64px;
    padding: 8px 0;
}
.exp-logo-strip__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 64px;
}
.exp-logo-strip__item img {
    height: 64px;          /* definite height — SVGs with internal 100% don't collapse */
    width: auto;
    max-width: 210px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .6;
    transition: opacity .25s cubic-bezier(.22, 1, .36, 1),
                filter  .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-logo-strip__item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* Navy section — render any logo (incl. SVG) as solid white */
.exp-logo-strip--navy .exp-logo-strip__item img {
    filter: brightness(0) invert(1);
    opacity: .78;
}
.exp-logo-strip--navy .exp-logo-strip__item:hover img {
    filter: brightness(0) invert(1);
    opacity: 1;
}

@media (max-width: 767px) {
    .exp-logo-strip { gap: 28px 44px; }
    .exp-logo-strip__item { height: 50px; }
    .exp-logo-strip__item img { height: 50px; max-width: 170px; }
}
/* =====================================================
   EXPLICYTE — Service card value note (differentiator callout)
   A lifted tinted strip inside .exp-service-card__body, below desc.
   Reads as a value/proof point, not a footnote. Red "+" marker.
   TYPE ONLY THE BENEFIT TEXT in Elementor — no leading "+".
   ===================================================== */
.exp-service-card__note,
.exp-service-card__note p {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    color: #1f3349;
    margin: 0;
}
.exp-service-card__note {
    margin: 0 0 26px !important;     /* matches desc gap → CTA stays pinned */
    padding: 14px 16px 14px 16px;
    background: rgba(230, 32, 65, .055);   /* faint red tint binds it as a block */
    border-left: 3px solid #e62041;
    border-radius: 0 10px 10px 0;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.exp-service-card__note::before {
    content: "+";
    flex: none;
    color: #e62041;
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
}

/* =====================================================
   EXPLICYTE — Preclinical assay cards (2-up service cards)
   Scoped variant of .exp-service-card for the assay portfolio.
   Wider cards (2/1) → taller image looks short; pin a banner ratio
   and widen the body so the card reads balanced, not oversized.
   Wrapper class: .exp-assay-cards on the .exp-service-grid container.
   ===================================================== */
.exp-assay-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}
@media (max-width: 767px) {
    .exp-assay-cards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* Image — banner ratio. Class is ON the <img> (V4 atomic), not a wrapper. */
.exp-assay-cards .exp-service-card__img {
    height: auto;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    width: 100%;
}
@media (max-width: 767px) {
    .exp-assay-cards .exp-service-card__img {
        aspect-ratio: 16 / 9;
    }
}

/* Body — a touch more horizontal breathing room at the wider width */
.exp-assay-cards .exp-service-card__body {
    padding: 26px 28px 24px;
}

@media (max-width: 767px) {
    .exp-assay-cards .exp-service-card__img img {
        aspect-ratio: 16 / 9;   /* a little taller on a single narrow column */
    }
}

/* MultiOmics page — accent overrides: red → cyan, scoped to .mo-page */
.mo-page .exp-service-card:hover .exp-service-card__eyebrow { color: #06b6d4 !important; }
.mo-page .exp-service-card__cta .elementor-heading-title { color: #06b6d4; }
.mo-page .exp-service-card__note { background: rgba(6,182,212,.06); border-left-color: #06b6d4; }
.mo-page .exp-service-card__note::before { color: #06b6d4; }
/* …plus any reused CTA / chip states */

/* =====================================================
   EXPLICYTE — Video slider ([exp_video_slider])
   Light/off-white section. Click-to-load facade → autoplay
   player. Arrows in gutters, cyan sub-brand accent (play
   hover, active dot). Same shape as §29 target-cases.
   ===================================================== */
.exp-vid-slider { position: relative; padding: 0 64px; }

.exp-vid-viewport { overflow: hidden; }

.exp-vid-track {
    display: flex;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.exp-vid-slide {
    flex: 0 0 100%;
    min-width: 100%;
    box-sizing: border-box;
}

/* Facade — poster fills a 16/9 box; play button centred */
.exp-vid-facade {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background-color: #16283b;     /* fallback under the poster */
    background-size: cover;
    background-position: center;
    -webkit-appearance: none;
    appearance: none;
}
/* Light scrim so the play button reads over any poster */
.exp-vid-facade::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(16, 28, 43, .28);
    transition: background .3s ease;
}
.exp-vid-facade:hover::before { background: rgba(16, 28, 43, .20); }

/* Play button — navy disc, white triangle, cyan on hover */
.exp-vid-play {
    position: relative;
    z-index: 1;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(31, 51, 73, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .25s cubic-bezier(.22, 1, .36, 1),
                transform .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-vid-play::before {
    content: "";
    border-style: solid;
    border-width: 11px 0 11px 19px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 5px;              /* optical centring of the triangle */
}
.exp-vid-facade:hover .exp-vid-play {
    background: #06b6d4;
    transform: scale(1.06);
}

/* Player — replaces the facade in flow on click */
.exp-vid-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: #000000;
}
.exp-vid-player iframe,
.exp-vid-player video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Caption */
.exp-vid-caption { text-align: center; margin-top: 18px; }
.exp-vid-eyebrow {
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #06b6d4;               /* MultiOmics accent */
    margin-bottom: 6px;
}
.exp-vid-title {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    color: #1f3349;
    margin: 0;
}

/* Arrows — navy discs in the gutters, cyan on hover */
.exp-vid-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #1f3349;
    color: #ffffff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .25s cubic-bezier(.22, 1, .36, 1),
                transform .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-vid-slider .exp-vid-arrow:hover { background: #06b6d4; }
.exp-vid-arrow--prev { left: 8px; }
.exp-vid-arrow--next { right: 8px; }

/* Dots */
.exp-vid-dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 20px;
}
.exp-vid-slider .exp-vid-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #d6dde6;
    cursor: pointer;
    transition: background-color .25s cubic-bezier(.22, 1, .36, 1),
                transform .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-vid-slider .exp-vid-dot:hover { background: #9fb0c4; }
.exp-vid-slider .exp-vid-dot.is-active {
    background: #06b6d4;
    transform: scale(1.15);
}

/* Mobile */
@media (max-width: 767px) {
    .exp-vid-slider { padding: 0 44px; }
    .exp-vid-play { width: 58px; height: 58px; }
    .exp-vid-play::before { border-width: 9px 0 9px 15px; }
    .exp-vid-arrow { width: 38px; height: 38px; font-size: 22px; }
    .exp-vid-arrow--prev { left: 2px; }
    .exp-vid-arrow--next { right: 2px; }
    .exp-vid-title { font-size: 16px; }
}

/* MultiOmics value-prop icons (HTML widget, inline SVG) */
.mo-valueprops__icon svg {
    width: 120px;
    height: 120px;
    color: #06b6d4;   /* drives currentColor: navy strokes + the solid dots */
    display: block;
}


.mo-valueprops__icon svg path,
.mo-valueprops__icon svg circle {
    stroke-width: 0.9;   /* was 1.5 — try 1 or 1.25 */
}


/* =====================================================
   EXPLICYTE — MultiOmics platform rows (linked text rows)
   Text Editor widget, class .mo-platforms on the <ul>.
   Each row links to a platform page; cyan sub-brand accent;
   arrow slides in on hover.
   ===================================================== */
.mo-platforms {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mo-platforms li {
    margin: 0;
    border-top: 1px solid #e5e7eb;   /* hairline separators between rows */
}
.mo-platforms li:last-child {
    border-bottom: 1px solid #e5e7eb;
}
.mo-platforms a,
.mo-platforms a:link,
.mo-platforms a:visited {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 14px 0;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #4b5563;
    text-decoration: none !important;
    transition: color .25s cubic-bezier(.22, 1, .36, 1),
                padding-left .25s cubic-bezier(.22, 1, .36, 1);
}
.mo-platforms a strong {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    color: #1f3349;
    transition: color .25s cubic-bezier(.22, 1, .36, 1);
}
/* Arrow at the end of each row, slides on hover */
.mo-platforms a::after {
    content: "→";
    margin-left: auto;
    align-self: center;
    color: #06b6d4;
    font-size: 1.05em;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .25s cubic-bezier(.22, 1, .36, 1),
                transform .25s cubic-bezier(.22, 1, .36, 1);
}
.mo-platforms a:hover {
    color: #1f3349;
    padding-left: 6px;               /* whole row nudges right on hover */
}
.mo-platforms a:hover strong {
    color: #06b6d4;                  /* instrument name → cyan on hover */
}
.mo-platforms a:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* Card is a flex column; CTA pinned to the bottom */
.mo-platform-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* =====================================================
   EXPLICYTE — MultiOmics platform card CTA
   "Explore … →" link, pinned to the card bottom so both
   cards' CTAs align regardless of title/row-count height.
   Cyan sub-brand; arrow slides on hover.
   ===================================================== */
.mo-platform-card__cta,
.mo-platform-card__cta:link,
.mo-platform-card__cta:visited {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    color: #06b6d4 !important;
    text-decoration: none !important;
    transition: color .25s cubic-bezier(.22, 1, .36, 1);
}
.mo-platform-card__cta::after {
    content: "→";
    display: inline-block;
    margin-left: 10px;
    font-size: 1.15em;
    line-height: 1;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.mo-platform-card__cta:hover {
    color: #0891a3 !important;
}
.mo-platform-card__cta:hover::after {
    transform: translateX(4px);      /* arrow slides on hover */
}

/* =====================================================
   EXPLICYTE — MultiOmics "recently published in" wall
   Light section → MUTED logos (greyscale, dimmed),
   colour on hover. Overrides the base .exp-pub-wall
   white-invert (which is for navy sections only).
   Wrap [explicyte_publication_wall_by_platform] in a
   container with class .mo-pub-wall.
   ===================================================== */
/* MultiOmics "recently published in" — more visible, still muted */
.mo-pub-wall .exp-pub-wall-item img {
    filter: grayscale(1);
    opacity: .85;                 /* was .55 — much more present */
    transition: opacity .25s cubic-bezier(.22, 1, .36, 1),
                filter  .25s cubic-bezier(.22, 1, .36, 1);
}
.mo-pub-wall .exp-pub-wall-item:hover img {
    filter: grayscale(0);         /* full brand colour on hover */
    opacity: 1;
}

/* MultiOmics "All publications" link — cyan override of the red .exp-pub-link */
.exp-pub-link.mo-pub-link,
.exp-pub-link.mo-pub-link:link,
.exp-pub-link.mo-pub-link:visited,
.exp-pub-link.mo-pub-link:hover {
    color: #06b6d4 !important;
}

/* MultiOmics sponsor slider — "Read the story" as a cyan pill */
/* MultiOmics sponsor slider — "Read the story" quiet cyan text link */
.mo-page .ss-feat__cta,
.mo-page .ss-feat__cta:link,
.mo-page .ss-feat__cta:visited {
    display: inline-flex;
    align-items: center;
    background: transparent !important;   /* kills the cyan box */
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #06b6d4 !important;
    text-decoration: none !important;
}
.mo-page .ss-feat__cta::after {
    content: "→";
    display: inline-block;
    margin-left: 10px;
    color: #06b6d4 !important;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.mo-page .ss-feat__cta:hover { color: #0891a3 !important; }
.mo-page .ss-feat__cta:hover::after { transform: translateX(4px); }


/* MultiOmics sponsor slider — softer, more diffuse hover shadow */
.mo-page .ss-slider .e-loop-item:hover .ss-feat {
    box-shadow: 0 30px 70px -28px rgba(15, 23, 42, .22);
}

/* MultiOmics sponsor slider — room inside the Swiper clip so the
   diffuse hover shadow isn't sliced into a hard edge */
.mo-page .ss-slider .swiper {
    padding-bottom: 64px !important;
}

/* MultiOmics sponsor slider — dedicated class, no .mo-page dependency.
   Softer hover shadow + room inside the Swiper clip so it isn't sliced. */

/* Give the diffuse shadow room inside Swiper's overflow:hidden */
.mo-sponsor-slider .swiper {
    padding-bottom: 64px !important;
}

/* Softer, more diffuse hover shadow */
.mo-sponsor-slider .e-loop-item:hover .ss-feat {
    transform: translateY(-6px);
    box-shadow: 0 30px 70px -28px rgba(15, 23, 42, .22);
}

/* Read-the-story → cyan text link (re-scoped off .mo-page) */
.mo-sponsor-slider .ss-feat__cta,
.mo-sponsor-slider .ss-feat__cta:link,
.mo-sponsor-slider .ss-feat__cta:visited {
    display: inline-flex;
    align-items: center;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #06b6d4 !important;
    text-decoration: none !important;
}
.mo-sponsor-slider .ss-feat__cta::after {
    content: "→";
    display: inline-block;
    margin-left: 10px;
    color: #06b6d4 !important;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.mo-sponsor-slider .ss-feat__cta:hover { color: #0891a3 !important; }
.mo-sponsor-slider .ss-feat__cta:hover::after { transform: translateX(4px); }


/* MultiOmics sponsor slider — keep Swiper's clip (no slide overflow),
   but pad so the diffuse hover shadow lives INSIDE the clip. */
.mo-sponsor-slider .swiper {
    overflow: hidden !important;      /* restore — stops slide bleed */
    padding: 20px 0 64px !important;  /* top + bottom room for the shadow */
}
.mo-sponsor-slider .swiper-wrapper,
.mo-sponsor-slider .swiper-slide,
.mo-sponsor-slider .e-loop-item {
    overflow: visible !important;     /* inner levels stay visible so the
                                         shadow isn't clipped by THEM */
}

/* =====================================================
   EXPLICYTE — MultiOmics contact form (cyan sub-brand)
   Scoped to .mo-form so CRO forms stay red. White card bg.
   ===================================================== */

/* Fields — visible borders on the white card */
.mo-form .elementor-field-textual,
.mo-form select.elementor-field-textual {
    width: 100%;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #1a1a1a;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;          /* the missing box */
    border-radius: 12px;
    padding: 14px 18px;
    line-height: 1.4;
    outline: none;
    transition: border-color .25s cubic-bezier(.22, 1, .36, 1),
                box-shadow .25s cubic-bezier(.22, 1, .36, 1);
}
.mo-form .elementor-field-textual::placeholder {
    color: #9fb0c4;
    opacity: 1;
}
.mo-form .elementor-field-textual:focus {
    border-color: #06b6d4;              /* cyan focus ring */
    box-shadow: 0 0 0 3px rgba(6, 182, 212, .12);
}

/* Submit button — cyan pill */
.mo-form .elementor-button[type="submit"],
.mo-form button.elementor-button {
    background-color: #06b6d4;
    color: #ffffff;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    border: none;
    border-radius: 999px;
    padding: 14px 28px;
    cursor: pointer;
    transition: background-color .25s cubic-bezier(.22, 1, .36, 1);
}
.mo-form .elementor-button[type="submit"]:hover,
.mo-form button.elementor-button:hover {
    background-color: #0891a3;          /* darker cyan hover */
}


/* Trials pillar icons — thin line, CRO red, single colour (currentColor).
   Inline SVG in an HTML widget, NOT the Icon widget (that fills → flattens
   stroke icons). Mirrors the .mo-valueprops__icon pattern, red instead of cyan. */
.trials-pillars__icon svg {
    height: 150px;        /* was 120 — bump to taste */
    width: auto;
    display: block;
    margin: 0 auto;       /* centers the icon within the column */
    color: #e62041;       /* still drives pillars 2 & 3 */
}

/* MultiOmics multi-step Previous ghost → cyan (fields + submit already cyan via .mo-form) */
.mo-form .e-form__buttons__wrapper__button-previous {
    color: #06b6d4 !important;
    border-color: #06b6d4 !important;
}
.mo-form .e-form__buttons__wrapper__button-previous:hover {
    background: #06b6d4 !important;
    background-color: #06b6d4 !important;
    color: #ffffff !important;
}
/* =====================================================
   EXPLICYTE — "How we create value" process block
   Flat non-clickable columns on the navy section.
   3-up .exp-qgrid variant + navy-context .exp-patho + framed photos.
   ===================================================== */

/* Grid — 3 / 2 / 1, minmax(0,1fr) overflow guard at every tier */
.exp-qgrid.exp-qgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) and (min-width: 768px) {
  .exp-qgrid.exp-qgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .exp-qgrid.exp-qgrid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* .exp-patho on the navy section — light body, white lead-ins, red dots */
.exp-q .exp-patho li { color: #9fb0c4; }
.exp-q .exp-patho li strong { color: #ffffff; }
.exp-q .exp-patho li::before { background: #e62041; }

/* Column photo — same ratio + frame across all three so they read as a set.
   cover (not contain) since these are photos, no white matte behind them.
   Static: no hover zoom — this section is non-clickable. */
.exp-q__media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  filter: saturate(.92) contrast(1.04);   /* matches .exp-service-card__img grade */
  margin-bottom: 18px;
}

/* =====================================================
   EXPLICYTE — Assay spec block (at-a-glance facts)
   Definition list. Two variants:
     .exp-assay-spec            → soft tinted panel (light sections)
     .exp-assay-spec--bare      → plain text on navy (overview section)
   ===================================================== */
.exp-assay-spec {
    background: #eef1f6;
    border-radius: 16px;
    padding: 28px 32px;
    margin: 8px 0 40px;
}
.exp-assay-spec dl {
    margin: 0;
    display: grid;
    grid-template-columns: 140px 1fr;
    row-gap: 14px;
    column-gap: 24px;
     align-items: baseline;
}
.exp-assay-spec dt {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #6e8199;
    margin: 0;
    padding-top: 2px;
}
.exp-assay-spec dd {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: #1a1a1a;
    margin: 0;
}
@media (max-width: 600px) {
    .exp-assay-spec {
        padding: 22px;
        border-radius: 14px;
    }
    .exp-assay-spec dl {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }
    .exp-assay-spec dt {
        margin-top: 12px;
    }
    .exp-assay-spec dt:first-child { margin-top: 0; }
}

/* Bare variant — no panel, navy context (quiet specs beside the outputs card) */
.exp-assay-spec--bare {
    background: transparent;
    padding: 0;
    border-radius: 0;
    margin: 0;
}
.exp-assay-spec--bare dt {
    color: #6e8199;
}
.exp-assay-spec--bare dd {
    color: #ffffff !important;
}

/* =====================================================
   EXPLICYTE — Assay spec on a light surface (no own panel)
   For when the spec list sits INSIDE a white container that
   already provides the card. Dark text, transparent bg.
   Use "exp-assay-spec exp-assay-spec--onlight"
   (do NOT combine with --bare, which forces white text).
   ===================================================== */
.exp-assay-spec--onlight {
    background: transparent;
    padding: 0;
    border-radius: 0;
    margin: 0;
}
.exp-assay-spec--onlight dt {
    color: #6e8199;   /* steel label — reads fine on white */
}
.exp-assay-spec--onlight dd {
    color: #1a1a1a !important;   /* dark value — overrides any inherited white */
}

/* =====================================================
   EXPLICYTE — Assay steps on navy background
   Add "exp-steps--navy" as a second class on the outer
   Container that already has "exp-steps".
   ===================================================== */
.exp-steps--navy .exp-step {
    border-top-color: rgba(255, 255, 255, .12);
}
.exp-steps--navy .exp-step-num {
    background: #ffffff;
    color: #1f3349;
}
.exp-steps--navy .exp-step-title {
    color: #ffffff !important;
}
.exp-steps--navy .exp-step-body {
    color: #9fb0c4 !important;
}

/* =====================================================
   EXPLICYTE — Assay steps, 3-up column layout on navy
   Add "exp-steps--3up" as a third class alongside
   "exp-steps exp-steps--navy" on the outer Container.
   ===================================================== */
.exp-steps--3up .exp-step-title {
    font-size: 18px !important;
    line-height: 1.3;
    margin-bottom: 6px !important;
}

/* =====================================================
   EXPLICYTE — Assay data figure cards
   White matte cards on navy, for standalone chart/data
   images (not before/after pairs — those use .exp-ba).
   Wrapper: .exp-data-figures (grid) > .exp-data-figure (card)
   ===================================================== */
.exp-data-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 32px 0;
}
.exp-data-figure {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
}
.exp-data-figure__img {
    border-radius: 8px;
    margin-bottom: 14px;
}
.exp-data-figure__title {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
    color: #1f3349;
    margin: 0 0 8px;
}
.exp-data-figure__caption {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}
.exp-data-figure--row .exp-data-figure__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@media (max-width: 767px) {
    .exp-data-figures {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* =====================================================
   EXPLICYTE — Key outputs (the deliverable — standout)
   Base list + two variants:
     .exp-outputs--navy   → plain list on navy (light-on-dark)
     .exp-outputs--card   → white card, the payoff treatment,
                            with a built-in 2-column list
   Use --navy OR --card, never both (card is white → navy's
   white text would vanish). --card includes its own 2-col grid.
   ===================================================== */
.exp-outputs--navy {
    border-top-color: rgba(255, 255, 255, .15);
}
.exp-outputs--navy p {
    color: #9fb0c4 !important;
}
.exp-outputs--navy li {
    color: #ffffff !important;
}

.exp-outputs--card {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: 0 12px 30px -14px rgba(15, 23, 42, .28);
    border-top: none;
}
.exp-outputs--card p {
    font-family: 'Work Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    letter-spacing: -0.2px !important;
    text-transform: none !important;
    color: #1f3349 !important;
    margin: 0 0 40px !important;
}
.exp-outputs--card li {
    color: #1a1a1a !important;
}
.exp-outputs--card ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 40px;
}
.exp-outputs--card li {
    margin: 0 0 14px;
}

.exp-outputs--card li:last-child {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .exp-outputs--card {
        padding: 22px;
        border-radius: 14px;
    }
    .exp-outputs--card ul {
        grid-template-columns: minmax(0, 1fr);
        gap: 11px;
    }
}

/* =====================================================
   EXPLICYTE — Section lead paragraph on navy
   Dek-style intro: larger than body, near-white, tight
   measure so it reads as a lead-in, not body copy.
   Add "exp-lead--navy" to a Paragraph / Text Editor widget.
   ===================================================== */
.exp-lead--navy,
.exp-lead--navy p {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.55;
    color: #f7f8fa;
    letter-spacing: -0.2px;
    max-width: 780px;
    margin: 0 0 32px;
}
.exp-lead--navy p:last-child {
    margin-bottom: 0;
}
@media (max-width: 767px) {
    .exp-lead--navy,
    .exp-lead--navy p {
        font-size: 18px;
        line-height: 1.5;
    }
}


/* =====================================================
   EXPLICYTE — Expert quote (navy context)
   Named citation with photo. Reusable across assay pages.
   Structure:
     .exp-quote (flex row: photo left, quote+attribution right)
       img.exp-quote__photo
       .exp-quote__body
         blockquote.exp-quote__text
         .exp-quote__attr
           .exp-quote__name
           .exp-quote__role
   ===================================================== */
.exp-quote {
    display: flex;
    align-items: center;
    gap: 32px;
    max-width: 860px;
    margin: 0 0 40px;
}
.exp-quote__photo {
    flex: none;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
}

.exp-quote__body {
    flex: 1;
    min-width: 0;
}
.exp-quote__text {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.5;
    color: #f7f8fa;
    letter-spacing: -0.2px;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}
.exp-quote__text::before {
    content: "\201C";
    color: #e62041;
    font-size: 30px;
    line-height: 0;
    vertical-align: -6px;
    margin-right: 4px;
}
.exp-quote__attr {
    display: flex;
    flex-direction: column;
}
.exp-quote__name {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #ffffff;
    line-height: 1.3;
}
.exp-quote__role {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #9fb0c4;
    margin-top: 3px;
}
@media (max-width: 640px) {
    .exp-quote {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }
    .exp-quote__photo {
        width: 88px;
        height: 88px;
    }
    .exp-quote__text {
        font-size: 19px;
    }
}

.exp-assay-page .content-column {
    border-left: 1px solid rgba(255, 255, 255, .08);
    border-right: 1px solid rgba(255, 255, 255, .08);
}

/* =====================================================
   EXPLICYTE — Value pillars (credibility cards)
   2×2 grid of cards on navy. Each: title, body, CTA link.
   CTA pins to card bottom so uneven body lengths align.
   Wrapper: .exp-pillars (grid) > .exp-pillar (card)
     .exp-pillar__title
     .exp-pillar__body
     .exp-pillar__cta  (anchor)
   ===================================================== */
.exp-pillars {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.exp-pillar {
    flex-direction: row !important;
    gap: 18px;
    align-items: flex-start;
}
.exp-pillar__icon {
    grid-row: 1 / 4;
    align-self: center;
    width: 44px;
    height: 44px;
    color: #e62041;   /* if using an SVG/icon font that inherits currentColor */
}

.exp-pillar__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.exp-pillar__content .exp-pillar__cta {
    margin-top: auto;
}

.exp-pillar__title {
    font-family: 'Work Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 19px !important;
    line-height: 1.3;
    color: #ffffff;
    margin: 0 0 12px;
}
.exp-pillar__body {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #9fb0c4;
    margin: 0 0 20px;
}
.exp-pillar__cta {
    margin-top: auto;   /* pins CTA to bottom regardless of body length */
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #ff3355 !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .15s ease, opacity .15s ease;
}
.exp-pillar__cta:hover {
    gap: 12px;   /* arrow nudges right on hover — matches your exp-arrow-ease pattern */
        opacity: .85;
    color: #ff3355 !important;
    text-decoration: none !important;
}
@media (max-width: 767px) {
    .exp-pillars {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Gated-download form — red CRO palette, on the light editorial page */
.exp-cs-download__form .elementor-field-textual {
    width: 100%;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #1a1a1a;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 18px;
    line-height: 1.4;
    outline: none;
    transition: border-color .25s cubic-bezier(.22,1,.36,1),
                box-shadow .25s cubic-bezier(.22,1,.36,1);
}
.exp-cs-download__form .elementor-field-textual::placeholder { color: #9fb0c4; opacity: 1; }
.exp-cs-download__form .elementor-field-textual:focus {
    border-color: #e62041;
    box-shadow: 0 0 0 3px rgba(230,32,65,.12);
}
.exp-cs-download__form .elementor-button[type="submit"] {
    background: #e62041;
    color: #ffffff;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    border: none;
    border-radius: 999px;
    padding: 14px 28px;
    cursor: pointer;
    transition: background-color .25s cubic-bezier(.22,1,.36,1);
}
.exp-cs-download__form .elementor-button[type="submit"]:hover { background: #ff3355; }
.exp-cs-download__form .elementor-field-type-acceptance .elementor-field-label,
.exp-cs-download__form .elementor-acceptance-field { font-size: 13px; color: #4b5563; }
.exp-cs-download__form a { color: #e62041; text-decoration: underline; text-underline-offset: 2px; }

/* Consent row — align checkbox with the text, set text size */
.exp-cs-download__form .elementor-field-type-acceptance .elementor-field-option {
    display: flex;
    align-items: flex-start;   /* top-align: checkbox lines up with first line of a wrapping label */
    gap: 8px;
}
.exp-cs-download__form .elementor-field-type-acceptance .elementor-field-option input[type="checkbox"] {
    flex: none;
    margin: 2px 0 0;           /* nudge the box down to meet the cap height of the text */
}
.exp-cs-download__form .elementor-field-type-acceptance .elementor-field-option label {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    color: #6e8199;
    margin: 0;
}

/* Reference row + download-jump on one line */
.exp-poster-ref {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
}

.exp-poster-jump {
    margin-left: 10px;
    white-space: nowrap;
}

.exp-poster-jump,
.exp-poster-jump:link,
.exp-poster-jump:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    background: #e62041;
    color: #ffffff !important;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color .25s cubic-bezier(.22,1,.36,1);
}
.exp-poster-jump:hover {
    background: #ff3355;
    color: #ffffff !important;
}
.exp-poster-jump__icon {
    display: inline-block;
    transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.exp-poster-jump:hover .exp-poster-jump__icon {
    transform: translateY(2px);   /* arrow nudges down on hover — hints "jumps down to the form" */
}

/* =====================================================
   EXPLICYTE — Contact-service form (multi-step) polish
   Scoped to .contact-service-form (class on the Form widget).
   NO :has() — Elementor's CSS validator rejects it. Wrappers are
   distinguished by their field-type classes instead.
   Arrows attach to .elementor-button-content-wrapper (a flex row) so
   they sit beside the label, not wrapped beneath it.
   No rule on .cf-turnstile — forcing flex/width collapsed it to 0 height,
   which stopped Cloudflare issuing a token and locked the submit.
   ===================================================== */

/* --- Step 1: smaller dropdown text --- */
.contact-service-form select.elementor-field-textual {
    font-size: 14px;
}

/* --- Consent text — smaller, quieter; checkbox top-aligned --- */
.contact-service-form .elementor-field-type-acceptance .elementor-field-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.contact-service-form .elementor-field-type-acceptance .elementor-field-option input[type="checkbox"] {
    flex: none;
    margin: 3px 0 0;
}
.contact-service-form .elementor-field-type-acceptance .elementor-field-option label {
    font-size: 13px;
    line-height: 1.5;
    color: #6e8199;
    margin: 0;
}

/* --- Buttons row: full width, right-aligned (step 1 single button sits right) --- */
.contact-service-form .e-form__buttons {
    flex-basis: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    justify-content: flex-end;
}

/* Wrappers + buttons size to their label (beats kit flex-basis:100%) */
.contact-service-form .e-form__buttons__wrapper {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
}
.contact-service-form .e-form__buttons__wrapper__button,
.contact-service-form .e-form__buttons__wrapper .elementor-button[type="submit"] {
    flex: 0 0 auto !important;
    width: auto !important;
}

/* Step 2: Previous hard left (margin-right:auto), submit right */
.contact-service-form .elementor-field-type-previous.e-form__buttons__wrapper {
    order: 1;
    margin-right: auto !important;
}
.contact-service-form .elementor-field-type-submit.e-form__buttons__wrapper {
    order: 2;
}

/* --- Next / Submit ("Request a discussion") — larger --- */
.contact-service-form .e-form__buttons__wrapper__button-next,
.contact-service-form .e-form__buttons__wrapper .elementor-button[type="submit"] {
    padding: 16px 34px !important;
    font-size: 16px !important;
}
/* Forward arrow — on the content-wrapper (flex row) so it stays inline */
.contact-service-form .e-form__buttons__wrapper__button-next .elementor-button-content-wrapper::after,
.contact-service-form .e-form__buttons__wrapper .elementor-button[type="submit"] .elementor-button-content-wrapper::after {
    content: "→";
    display: inline-block;
    margin-left: 10px;
    font-size: 1.1em;
    line-height: 1;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.contact-service-form .e-form__buttons__wrapper__button-next:hover .elementor-button-content-wrapper::after,
.contact-service-form .e-form__buttons__wrapper .elementor-button[type="submit"]:hover .elementor-button-content-wrapper::after {
    transform: translateX(4px);
}

/* --- Step 2 Previous — ghost (no red), back arrow left --- */
.contact-service-form .e-form__buttons__wrapper__button-previous {
    padding: 15px 33px !important;
    font-size: 16px !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #1f3349 !important;
    border: 1px solid #1f3349 !important;
    transition: background-color .25s cubic-bezier(.22, 1, .36, 1),
                color .25s cubic-bezier(.22, 1, .36, 1);
}
/* Back arrow — on the content-wrapper (flex row) so it stays inline */
.contact-service-form .e-form__buttons__wrapper__button-previous .elementor-button-content-wrapper::before {
    content: "←";
    display: inline-block;
    margin-right: 10px;
    font-size: 1.1em;
    line-height: 1;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.contact-service-form .e-form__buttons__wrapper__button-previous:hover {
    background: #1f3349 !important;
    background-color: #1f3349 !important;
    color: #ffffff !important;
}
.contact-service-form .e-form__buttons__wrapper__button-previous:hover .elementor-button-content-wrapper::before {
    transform: translateX(-4px);
}

/* The 0-height Turnstile fallback carries inline margin:10px 0 15px, which
   makes the submit wrapper ~25px taller than the Previous wrapper and pushes
   the button down. Zero the MARGIN only (never width/height — that collapses
   the widget and stops it issuing a token). */
.contact-service-form .e-form__buttons .elementor-turnstile-field.cf-turnstile {
    margin: 0 !important;
}

/* =====================================================
   EXPLICYTE — Careers / Open positions
   Careers hub = light/off-white page, white job cards.
   Single job page = off-white editorial column (like publications).
   Reuses existing tokens: .exp-eyebrow-muted, .exp-body-content,
   .exp-back-link, .io-cta (spontaneous strip). CRO palette only
   (navy #1f3349 / red #e62041) — no cyan on careers pages.
   ===================================================== */

/* -----------------------------------------------------
   Careers hub — open-position cards
   ----------------------------------------------------- */
.exp-jobs-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.exp-job-card,
.exp-job-card:link,
.exp-job-card:visited {
    display: flex;
    align-items: center;
    gap: 24px;
    background: #ffffff;
    border: 1px solid rgba(31, 51, 73, 0.08);
    border-radius: 16px;
    padding: 24px 28px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 12px 30px -18px rgba(15, 23, 42, 0.24);
    transition:
        transform .3s cubic-bezier(.22, 1, .36, 1),
        box-shadow .3s ease,
        border-color .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-job-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 46px -20px rgba(15, 23, 42, 0.3);
    border-color: rgba(230, 32, 65, 0.18);
}
.exp-job-card,
.exp-job-card *,
.exp-job-card:hover * {
    text-decoration: none !important;
}
.exp-job-card__body {
    flex: 1 1 auto;
    min-width: 0;
}
.exp-job-card__ref {
    display: inline-block;
    font-family: 'Work Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #6e8199;
    margin-bottom: 8px;
}
.exp-job-card__title {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -0.3px;
    color: #1f3349;
    margin: 0 0 8px;
}
.exp-job-card__meta {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #4b5563;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
}
.exp-job-card__sep {
    color: #9fb0c4;
}
.exp-job-card__cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    color: #e62041;
    white-space: nowrap;
}
.exp-job-card__cta::after {
    content: "→";
    display: inline-block;
    margin-left: 10px;
    font-size: 1.15em;
    line-height: 1;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-job-card:hover .exp-job-card__cta::after {
    transform: translateX(4px);
}
@media (max-width: 640px) {
    .exp-job-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 22px;
    }
}

/* -----------------------------------------------------
   Careers hub — empty state (no open positions)
   ----------------------------------------------------- */
.exp-jobs-empty {
    text-align: center;
    background: #eef1f6;
    border-radius: 16px;
    padding: 48px 32px;
}
.exp-jobs-empty__title {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -0.3px;
    color: #1f3349;
    margin: 0 0 12px;
}
.exp-jobs-empty__text {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #4b5563;
    max-width: 560px;
    margin: 0 auto 26px;
}

/* -----------------------------------------------------
   Apply button (single page + empty state).
   Self-contained red pill — does NOT rely on the Elementor
   button widget chrome (.btn-cro-primary alone is unstyled).
   ----------------------------------------------------- */
.exp-job-apply-wrap {
    margin: 36px 0 8px;
}
.exp-job-apply,
.exp-job-apply:link,
.exp-job-apply:visited {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #e62041;
    color: #ffffff !important;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    letter-spacing: .2px;
    padding: 15px 28px;
    border-radius: 999px;
    text-decoration: none !important;
    border: none;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-job-apply::after {
    content: "→";
    display: inline-block;
    font-size: 1.1em;
    line-height: 1;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-job-apply:hover,
.exp-job-apply:focus {
    background: #ff3355;
    color: #ffffff !important;
    text-decoration: none !important;
}
.exp-job-apply:hover::after {
    transform: translateX(4px);
}

/* -----------------------------------------------------
   Single job page — meta line (Ref · Dept · Contract · Location)
   ----------------------------------------------------- */
.exp-job-meta {
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #6e8199;
    margin: 0 0 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}
.exp-job-meta__ref {
    color: #1f3349;
}
.exp-job-meta__sep {
    color: #9fb0c4;
}

/* Subtitle / discipline under the H1 */
.exp-job-subtitle {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.35;
    color: #6e8199;
    margin: 6px 0 0;
    letter-spacing: -0.2px;
}

/* Lead “hook” paragraph */
.exp-job-lead {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 21px;
    line-height: 1.5;
    color: #1f3349;
    letter-spacing: -0.2px;
    margin: 22px 0 8px;
}
.exp-job-lead p {
    margin: 0 0 14px;
}
.exp-job-lead p:last-child {
    margin-bottom: 0;
}

/* Body sections reuse .exp-eyebrow-muted + .exp-body-content.
   Extra top rhythm between sections. */
.exp-job-section + .exp-job-section {
    margin-top: 8px;
}

@media (max-width: 767px) {
    .exp-job-lead { font-size: 19px; }
}

/* =====================================================
   EXPLICYTE — Careers "Our story" timeline (light section)
   ===================================================== */
.exp-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.exp-timeline::before {
    content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
    width: 2px; background: #e5e7eb;
}
.exp-timeline__item { position: relative; padding: 0 0 40px 44px; }
.exp-timeline__item:last-child { padding-bottom: 0; }
.exp-timeline__item::before {
    content: ""; position: absolute; left: 0; top: 4px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #ffffff; border: 3px solid #ff3355; box-sizing: border-box;
}
.exp-timeline__period {
    display: block; font-family: 'Work Sans', sans-serif; font-weight: 600;
    font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase;
    color: #ff3355; margin-bottom: 6px;
}
.exp-timeline__title {
    font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 20px;
    line-height: 1.3; color: #1f3349; margin: 0 0 10px;
}
.exp-timeline__body {
    font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.7;
    color: #4b5563; margin: 0;
}
.exp-timeline__body a {
    color: #1f3349; text-decoration: underline;
    text-decoration-color: rgba(31,51,73,.35); text-underline-offset: 2px;
    transition: color .2s, text-decoration-color .2s;
}
.exp-timeline__body a:hover { color: #e62041; text-decoration-color: #e62041; }

/* Navy-section variant */
.exp-timeline--navy::before { background: rgba(255,255,255,.15); }
.exp-timeline--navy .exp-timeline__item::before {
    background: #1f3349; border-color: #e62041;
}
.exp-timeline--navy .exp-timeline__title { color: #ffffff; }
.exp-timeline--navy .exp-timeline__body  { color: #9fb0c4; }
.exp-timeline--navy .exp-timeline__body a {
    color: #ffffff;
    text-decoration-color: rgba(255,255,255,.4);
}
.exp-timeline--navy .exp-timeline__body a:hover {
    color: #ff3355; text-decoration-color: #ff3355;
}

/* =====================================================
   EXPLICYTE — Careers "Life at Explicyte" perks (navy section)
   ===================================================== */
.exp-perks { display: flex; flex-direction: column; gap: 26px; margin: 0; }
.exp-perk {
    padding-left: 20px;
    border-left: 2px solid #e62041;
}
.exp-perk__title {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.3;
    color: #ffffff;
    margin: 0 0 8px;
    letter-spacing: -0.2px;
}
.exp-perk__body {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: #9fb0c4;
    margin: 0;
}

/* =====================================================
   Careers video slider — override kit <button> styling
   (scope: widget CSS class exp-vid--careers)
   ===================================================== */

/* Rectangular facade from the start — match the played iframe (16px).
   Use border-radius:0 if you want sharp corners. */
.elementor-kit-7 .exp-vid--careers .exp-vid-facade {
    border-radius: 16px !important;
    background-color: #16283b !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Arrows: plain white chevrons, larger, no red pill / no disc */
.elementor-kit-7 .exp-vid--careers .exp-vid-arrow,
.elementor-kit-7 .exp-vid--careers .exp-vid-arrow:hover,
.elementor-kit-7 .exp-vid--careers .exp-vid-arrow:focus {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: 56px !important;
    height: 56px !important;
    color: #ffffff !important;
    font-size: 54px !important;
    line-height: 1 !important;
}
.exp-vid--careers .exp-vid-arrow:hover { opacity: .7; }

/* No cyan on the corporate careers page (cyan = MultiOmics only) */
.exp-vid--careers .exp-vid-facade:hover .exp-vid-play { background: #e62041 !important; }
.exp-vid--careers .exp-vid-eyebrow { color: #9fb0c4 !important; }
.exp-vid--careers .exp-vid-title  { color: #ffffff !important; }
.exp-vid--careers .exp-vid-slider .exp-vid-dot.is-active { background: #ff3355 !important; }

/* Lists inside job-body / body-content sections */
.exp-body-content ul,
.exp-body-content ol {
    margin: 0 0 16px;
    padding-left: 22px;
    list-style-position: outside;
}
.exp-body-content ul { list-style-type: disc; }
.exp-body-content ol { list-style-type: decimal; }
.exp-body-content li {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;          /* the missing piece */
    color: #1a1a1a;
    margin: 0 0 8px;
    padding-left: 4px;
}
.exp-body-content li:last-child { margin-bottom: 0; }
.exp-body-content li > p { margin: 0; }   /* wysiwyg sometimes wraps li text in <p> */

.exp-job-section { margin-top: 40px; }
.exp-job-section .exp-eyebrow-muted {
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.8px;
    color: #1f3349;
    margin-bottom: 24px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(31,51,73,.1);
}

/* =====================================================
   EXPLICYTE — Executive team (native Elementor, navy section)
   Layout (grid columns, gaps) set in the Elementor panels.
   Styling only. V4 atomic: custom classes land on the widget
   element itself (<img>, <button> = e-button-base), NOT a
   wrapper — target the class directly.
   ===================================================== */
.exp-team__member {
    height: 100%;
    align-items: center;
    text-align: center;
}

/* Photo — class on the <img> */
.exp-team__photo,
.exp-team__photo img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    border-radius: 16px !important;
    background: #16283b;
    margin-bottom: 20px !important;   /* space between photo and name */
}

/* Name */
.exp-team__name .elementor-heading-title,
.exp-team__name,
h2.exp-team__name,
h3.exp-team__name {
    font-family: 'Work Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.2px !important;
    color: #ffffff !important;
    margin: 0 !important;
}

/* Role */
.exp-team__role .elementor-heading-title,
.exp-team__role,
h2.exp-team__role,
h3.exp-team__role {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #9fb0c4 !important;
    margin: 0 !important;
}

/* Links row pinned to the bottom of each equal-height column */
.exp-team__links { margin-top: auto; }

/* PubMed pill — V4 atomic (e-button-base) + classic, link states covered */
.exp-team__link--pubmed.e-button-base,
.exp-team__link--pubmed.e-button-base:link,
.exp-team__link--pubmed.e-button-base:visited,
.exp-team__link--pubmed .e-button-base,
.exp-team__link--pubmed .elementor-button,
.exp-team__link--pubmed.elementor-button {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 999px !important;
    padding: 9px 20px !important;
    font-family: 'Work Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: .4px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: color .25s cubic-bezier(.22,1,.36,1),
                border-color .25s cubic-bezier(.22,1,.36,1),
                transform .25s cubic-bezier(.22,1,.36,1);
}
.exp-team__link--pubmed.e-button-base:hover,
.exp-team__link--pubmed .e-button-base:hover,
.exp-team__link--pubmed .elementor-button:hover {
    color: #ff3355 !important;
    border-color: #ff3355 !important;
    text-decoration: none !important;
    transform: translateY(-2px);
}

/* LinkedIn (Social Icons widget) — white ghost circle, red on hover.
   border-image killed explicitly: the widget sets border-image-*
   longhands that draw an extra edge independent of border-color. */
.exp-team__links .elementor-social-icon,
.exp-team__links .elementor-social-icon:link,
.exp-team__links .elementor-social-icon:visited {
    background: transparent !important;
    background-color: transparent !important;
    border: 0px solid rgba(255, 255, 255, .22) !important;
    border-image: none !important;
    border-image-source: none !important;
    border-image-width: 0 !important;
    border-image-slice: 0 !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    width: 38px !important;
    height: 38px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    overflow: hidden !important;
    text-decoration: none !important;
    transition: color .25s cubic-bezier(.22,1,.36,1),
                border-color .25s cubic-bezier(.22,1,.36,1),
                transform .25s cubic-bezier(.22,1,.36,1);
}
.exp-team__links .elementor-social-icon svg {
    fill: #ffffff !important;
}
.exp-team__links .elementor-social-icon:hover {
    color: #ff3355 !important;
    border-color: #ff3355 !important;
    border-image: none !important;
    transform: translateY(-2px);
}
.exp-team__links .elementor-social-icon:hover svg {
    fill: #ff3355 !important;
}

/* =====================================================
   EXPLICYTE — About page "at a glance" stats
   Scoped under .about-page so the larger/wider treatment
   never touches the shared .exp-metrics publication block.
   ===================================================== */
.about-page .exp-metrics--about {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 64px;
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
}
.about-page .exp-metrics--about .exp-metric {
    min-width: 0;
}
.about-page .exp-metrics--about .exp-metric-value {
    font-size: 56px;
}
.about-page .exp-metrics--about .exp-metric-label {
    font-size: 14px;
}
@media (max-width: 900px) {
    .about-page .exp-metrics--about {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px;
    }
    .about-page .exp-metrics--about .exp-metric-value {
        font-size: 44px;
    }
}
@media (max-width: 560px) {
    .about-page .exp-metrics--about {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Cancer-type chip is now a non-link <span> on the single publication page */
.exp-taxonomy-chips .exp-chip-cancer-type {
    background: transparent;
    color: #1f3349 !important;
    border: 1px solid #1f3349 !important;
    padding: 7px 17px;
}

/* Single publication page — chips + collaborators are static <span>s now,
   so kill the link-era hover feedback. Scoped to the chip classes that are
   spans here; .exp-chip-target stays a link elsewhere and is untouched. */
.exp-taxonomy-chips .exp-chip-application:hover { background: #e62041; transform: none; }
.exp-taxonomy-chips .exp-chip-sample-type:hover { background: #1f3349; transform: none; }
.exp-taxonomy-chips .exp-chip-platform:hover    { background: #06b6d4; transform: none; }

.exp-collaborators .exp-collab-item:hover {
    color: #4b5563;
    border-bottom-color: transparent;
}

/* Events list — let the card grow to the full (square) image */
.exp-events-list .exp-event-card__image { height: auto; }
.exp-events-list .exp-event-card__image img { height: auto; }


/* Why Explicyte pillars — light MultiOmics variant */
.exp-pillars--light .exp-pillar__title { color: #1f3349; }
.exp-pillars--light .exp-pillar__body  { color: #4b5563; }
.exp-pillars--light .exp-pillar__icon  { color: #06b6d4; }              /* cyan drives the SVG via currentColor */
.exp-pillars--light .exp-pillar__cta,
.exp-pillars--light .exp-pillar__cta:hover { color: #06b6d4 !important; } /* beats the base red !important */
.exp-pillars .exp-pillar__icon svg { width: 100%; height: 100%; }        /* let the inline SVG fill the 44px box */

.exp-pillars--light .exp-pillar { background: var(--surface-1, #fff); border: 1px solid #e5e7eb; }


/* =====================================================
   EXPLICYTE — Tiered "What's included" matrix
   .exp-cmp variant: check-matrix (not text cells).
   Cyan checks (MultiOmics, no red), wrapping row labels,
   turnaround in the header. Base .exp-cmp (navy header,
   white card, mobile card-stacking) is inherited.
   ===================================================== */
.exp-cmp--tiers .exp-cmp__yes {
    color: #06b6d4;
    font-size: 17px;
    line-height: 1;
    font-weight: 700;
}
.exp-cmp--tiers .exp-cmp__no {
    color: #cbd5e1;               /* faint — reads "not included" without shouting */
}

/* =====================================================
   .exp-cmp--tiers — column header restyle
   Cyan dot + tier name, timeline pill, outcome line.
   Mobile stacking (base .exp-cmp) is untouched.
   ===================================================== */

/* Give the header cells room to breathe with three stacked elements */
@media (min-width: 768px) {
    .exp-cmp--tiers .exp-cmp__table {
        table-layout: fixed;   /* forces columns to respect declared widths */
    }
    .exp-cmp--tiers .exp-cmp__table thead th:first-child,
    .exp-cmp--tiers .exp-cmp__table tbody th[scope="row"] {
        width: 40%;
    }
    .exp-cmp--tiers .exp-cmp__table thead th:not(:first-child),
    .exp-cmp--tiers .exp-cmp__table td {
        width: 20%;
    }
}

/* Tier name — Primary / Annotation / In-depth */
.exp-cmp--tiers .exp-cmp__col-name {
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #ffffff;
}

/* Cyan dot before each tier name */
.exp-cmp--tiers .exp-cmp__col-name::before {
    content: "●";
    display: inline-block;
    margin-right: 8px;
    font-size: 10px;
    color: #06b6d4;
    vertical-align: 2px;
}

/* Turnaround pill */
.exp-cmp--tiers .exp-cmp__col-time {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
    color: #67e8f9;
    background: rgba(6, 182, 212, 0.15);
    border-radius: 12px;
    line-height: 1.4;
}

/* Let the outcome line wrap naturally within its cell */
.exp-cmp--tiers .exp-cmp__col-outcome {
    display: block;
    margin: 10px auto 0;
    max-width: 90%;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
}


/* --- Top-left cell: positioning lead --- */
.exp-cmp--tiers .exp-cmp__col-lead {
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.3px;
    text-transform: none;
    color: #ffffff;
    line-height: 1.3;
}

.exp-cmp--tiers .exp-cmp__col-sub {
    display: block;
    margin-top: 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.65);
}

/* Desktop: label column wraps + roomy; the three tier columns narrow + centered.
   Scoped to min-width so the mobile card-stack (base .exp-cmp) is untouched. */
@media (min-width: 768px) {
    .exp-cmp--tiers .exp-cmp__table tbody th[scope="row"] {
        white-space: normal;      /* long step labels wrap instead of forcing width */
    }
    .exp-cmp--tiers .exp-cmp__table thead th:not(:first-child),
    .exp-cmp--tiers .exp-cmp__table td {
        width: 15%;
        text-align: center;
    }
}

/* =====================================================
   Force table-layout fixed + let outcome text wrap
   Higher specificity to beat any conflicting inline/plugin styles.
   ===================================================== */
@media (min-width: 768px) {
    .exp-cmp.exp-cmp--tiers .exp-cmp__table {
        table-layout: fixed !important;
        width: 100% !important;
    }
    .exp-cmp.exp-cmp--tiers .exp-cmp__table thead th:first-child,
    .exp-cmp.exp-cmp--tiers .exp-cmp__table tbody th[scope="row"] {
        width: 36% !important;
    }
    .exp-cmp.exp-cmp--tiers .exp-cmp__table thead th:not(:first-child),
    .exp-cmp.exp-cmp--tiers .exp-cmp__table td {
        width: 21.3% !important;   /* 64% / 3 tiers */
    }
    /* Force cell contents to respect the column boundary */
    .exp-cmp.exp-cmp--tiers .exp-cmp__table th,
    .exp-cmp.exp-cmp--tiers .exp-cmp__table td {
        overflow: hidden;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    /* Outcome span — must wrap, must stay within cell */
    .exp-cmp.exp-cmp--tiers .exp-cmp__col-outcome {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        padding: 0 8px;
    }
}

/* =====================================================
   MultiOmics: cyan check for .exp-outputs bullets.
   The base rule draws the check via a background-image SVG,
   so we swap that SVG for a cyan-stroked one. Same 16×16 slot,
   same positioning, just recolored.
   Scoped to .mo-page so CRO pages keep the red markers.
   ===================================================== */
.mo-page .exp-outputs li::before,
.mo-page .exp-outputs ul li::before,
.mo-page .exp-outputs ol li::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2306b6d4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E") no-repeat center / contain !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* =====================================================
   MultiOmics: .exp-quote — kill red mark, add cyan accents.
   Navy background preserved (section-level, not touched here).
   Scoped to .mo-page so CRO pages keep red.
   ===================================================== */

/* Opening curly quote mark: red → cyan */
.mo-page .exp-quote__text::before {
    color: #06b6d4 !important;
}

/* Cyan hairline separator above the attribution */
.mo-page .exp-quote__name {
    padding-top: 14px !important;
    border-top: 2px solid #06b6d4 !important;
    display: inline-block !important;
    margin-top: 18px !important;
}

.mo-page .exp-quote {
    background-color: #1f3349 !important;
}

/* =====================================================
   MultiOmics: before/after slider — line + grip
   IMPORTANT: .exp-ba__handle is the full-height drag hit area
   and must stay TRANSPARENT. Style .exp-ba__handle-grip instead
   (that's the small visible circle in the middle).
   ===================================================== */

/* The vertical divider line — keep as is */
.mo-page .exp-ba__handle-line {
    width: 3px !important;
    background: #06b6d4 !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.4) !important;
}

/* Reset the drag button — invisible container */
.mo-page .exp-ba__handle,
.mo-page .exp-ba__handle:not(:disabled) {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* The small visible round grip in the middle */
.mo-page .exp-ba__handle-grip {
    background-color: #ffffff !important;
    border: 2px solid #06b6d4 !important;
    color: #06b6d4 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
    /* --- alignment fix --- */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 14px !important;   /* tune 10–14px until arrows sit right */
    padding: 0 !important;
}

/* =====================================================
   MultiOmics: case slider — red → cyan + restyled
   Targets the .exp-cs-* markup used by both [exp_target_cases]
   and [exp_case_studies_slider] when placed on a .mo-page.
   ===================================================== */

/* Arrows — transparent bg, cyan chevron, no red pill */
.mo-page .exp-cs-arrow.exp-cs-arrow {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #06b6d4 !important;
    font-size: 64px !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    padding: 8px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}
.mo-page .exp-cs-arrow.exp-cs-arrow:hover {
    background-color: transparent !important;
    color: #0891b2 !important;
}

/* Let clicks pass through the SVG to the parent button
   (fixes arrow non-response after swapping ‹ › text for <svg> chevrons) */
.mo-page .exp-cs-arrow svg,
.mo-page .exp-cs-arrow svg * {
    pointer-events: none;
}

/* Dots — hollow rings, filled when active */
.mo-page .exp-cs-dot.exp-cs-dot {
    width: 10px !important;
    height: 10px !important;
    background-color: transparent !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 50% !important;
}
.mo-page .exp-cs-dot.exp-cs-dot.is-active {
    background-color: #06b6d4 !important;
    border-color: #06b6d4 !important;
}

/* Slide title — lighter, card headline weight (not page H2) */
.mo-page .exp-cs-slide__title {
    font-family: 'Work Sans', sans-serif !important;
    font-weight: 500 !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
    color: #1f3349 !important;
    letter-spacing: -0.2px !important;
    margin-bottom: 14px !important;
}

/* CTA rendered as a proper cyan pill button */
.mo-page .exp-cs-slide__cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 24px 32px !important;
    background-color: #06b6d4 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    font-family: 'Work Sans', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.2px !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease !important;
    margin-top: 8px !important;
}
.mo-page .exp-cs-slide__cta:hover,
.mo-page .exp-cs-slide__cta:focus {
    background-color: #0891b2 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
.mo-page .exp-cs-slide__cta:focus-visible {
    outline: 2px solid #06b6d4 !important;
    outline-offset: 3px !important;
}

/* Give the image more room on desktop */
@media (min-width: 900px) {
    .mo-page .exp-cs-slide {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) !important;
        gap: 40px !important;
    }
    .mo-page .exp-cs-slide__media img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }
}

/* =====================================================
   MultiOmics: force case slider slides to be one viewport wide
   Fixes the slider math (NaN transform) and preserves the
   internal grid layout inside each slide.
   ===================================================== */
.mo-page .exp-cs-viewport {
    overflow: hidden !important;
    width: 100% !important;
}
.mo-page #exp-cs-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: auto !important;
}
.mo-page #exp-cs-track > .exp-cs-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

/* =====================================================
   EXPLICYTE — Publication slider ([explicyte_publication_slider])
   Cards: cover image, journal logo, article title, year.
   Whole card = link to the single publication page.
   Same slider chassis as [exp_target_cases] / [exp_case_studies_slider],
   sized for 3-up (desktop) / 2-up (tablet) / 1-up (mobile).
   ===================================================== */
.exp-pub-slider {
    position: relative;
    padding: 0 56px;
}
.exp-pub-slider__viewport {
    overflow: hidden;
}
.exp-pub-slider__track {
    display: flex;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

/* Card */
.exp-pub-slider__card,
.exp-pub-slider__card:link,
.exp-pub-slider__card:visited {
    flex: 0 0 33.333%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid rgba(31, 51, 73, 0.08);
    border-radius: 20px;
    margin: 8px 12px;
    overflow: hidden;
    box-shadow: 0 12px 30px -18px rgba(15, 23, 42, 0.28);
    text-decoration: none !important;
    color: inherit;
    transition:
        transform .3s cubic-bezier(.22, 1, .36, 1),
        box-shadow .3s ease,
        border-color .25s cubic-bezier(.22, 1, .36, 1);
}
.exp-pub-slider__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 46px -20px rgba(15, 23, 42, 0.3);
    border-color: rgba(6, 182, 212, 0.25);
}
.exp-pub-slider__card * {
    text-decoration: none !important;
}

/* Cover image */
.exp-pub-slider__image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #eef1f6;
}
.exp-pub-slider__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.92) contrast(1.04);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), filter .3s ease;
}
.exp-pub-slider__card:hover .exp-pub-slider__image img {
    transform: scale(1.05);
    filter: none;
}

/* Body */
.exp-pub-slider__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 20px 22px 22px;
}

/* Journal logo (or fallback text) */
.exp-pub-slider__logo {
    height: 32px;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}
.exp-pub-slider__logo img {
    max-height: 32px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: .85;
    filter: grayscale(1);
    transition: opacity .25s, filter .25s;
}
.exp-pub-slider__card:hover .exp-pub-slider__logo img {
    opacity: 1;
    filter: grayscale(0);
}
.exp-pub-slider__journal {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .3px;
    color: #6e8199;
    margin-bottom: 14px;
    line-height: 1.3;
}

/* Title */
.exp-pub-slider__title {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.35;
    color: #1f3349;
    margin: 0 0 16px;
    letter-spacing: -0.2px;

    /* clamp to 4 lines so cards align */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Year — pinned bottom */
.exp-pub-slider__year {
    margin-top: auto;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #06b6d4;
}

/* Arrows */
.exp-pub-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent !important;
    border: none !important;
    color: #06b6d4;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .25s;
}
.exp-pub-slider__arrow:hover { color: #0891a3; }
.exp-pub-slider__arrow--prev { left: 4px; }
.exp-pub-slider__arrow--next { right: 4px; }
.exp-pub-slider__arrow svg,
.exp-pub-slider__arrow svg * { pointer-events: none; }

/* Dots */
.exp-pub-slider .exp-pub-slider__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}
.exp-pub-slider .exp-pub-slider__dot,
.exp-pub-slider .exp-pub-slider__dot:hover,
.exp-pub-slider .exp-pub-slider__dot:focus {
    width: 9px !important;
    height: 9px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color .25s, border-color .25s, transform .25s;
    /* kill any inherited button font-size that could bloat the pseudo box */
    font-size: 0 !important;
    line-height: 0 !important;
}
.exp-pub-slider .exp-pub-slider__dot:hover {
    border-color: #06b6d4 !important;
}
.exp-pub-slider .exp-pub-slider__dot.is-active {
    background: #06b6d4 !important;
    background-color: #06b6d4 !important;
    border-color: #06b6d4 !important;
    transform: scale(1.15);
}
.exp-pub-slider__dot:hover { border-color: #06b6d4; }
.exp-pub-slider__dot.is-active {
    background: #06b6d4;
    border-color: #06b6d4;
    transform: scale(1.15);
}

/* Responsive */
@media (max-width: 1024px) {
    .exp-pub-slider__card { flex-basis: 50%; }
}
@media (max-width: 640px) {
    .exp-pub-slider { padding: 0 44px; }
    .exp-pub-slider__card { flex-basis: 100%; margin: 8px 0 !important; }
    .exp-pub-slider__image { height: 160px; }
    .exp-pub-slider__title { font-size: 15px; -webkit-line-clamp: 3; }
}

.exp-pub-slider__viewport {
    overflow: hidden;
    padding: 12px 0 32px;   /* room for the hover shadow inside the clip */
    touch-action: pan-y;
    cursor: grab;
}
.exp-pub-slider__viewport:active {
    cursor: grabbing;
}
.exp-pub-slider__image img {
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.exp-card-lede,
.exp-card-lede p {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #4b5563;
    margin: 0 0 18px;
}

.exp-card-lede--panel {
    background: #eef1f6;
    border-radius: 10px;
    padding: 12px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #4b5563;
}

/* Variant: descriptive lead-in, no benefit marker */
.exp-service-card__note--plain::before {
    content: none;
}
.exp-service-card__note--plain {
    padding-left: 16px;   /* recover the space the "+" was taking */
}


/* =====================================================
   EXPLICYTE — Illustrated steps variant
   Adds a fixed image column to the left of each .exp-step.
   Compose with .exp-steps [+ .exp-steps--navy] on the <ol>.
   Base .exp-step markup untouched; adds one leading <img>.
   ===================================================== */
.exp-steps--illustrated .exp-step {
    gap: 28px;
    align-items: flex-start;
    flex-wrap: wrap;                     /* enables mobile stack via image flex-basis */
}
.exp-steps--illustrated .exp-step__image {
    flex: none;
    width: 260px;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    object-fit: cover;
    background: #eef1f6;                 /* placeholder tint on light sections */
}
.exp-steps--illustrated.exp-steps--navy .exp-step__image {
    background: rgba(255, 255, 255, .06);
}

/* Tablet — trim the image column so text keeps its measure */
@media (max-width: 1024px) and (min-width: 768px) {
    .exp-steps--illustrated .exp-step__image {
        width: 220px;
    }
}

/* Mobile — image goes full-width above the number + content row */
@media (max-width: 767px) {
    .exp-steps--illustrated .exp-step {
        gap: 16px;
    }
    .exp-steps--illustrated .exp-step__image {
        flex: 0 0 100%;
        width: auto;
        aspect-ratio: 16 / 9;
    }
}

/* =====================================================
   EXPLICYTE — Outputs card: title line-height + caption
   Fixes title line collapsing and lets a captioned figure
   sit inside an .exp-outputs--card without inheriting the
   card's 24px navy headline treatment.
   ===================================================== */

/* Title — explicit line-height beats the tiny inherited value */
.exp-outputs--card p {
    line-height: 1.3 !important;
}

/* Caption escapes the p headline treatment entirely */
.exp-outputs--card .exp-outputs__caption {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #6e8199 !important;
    font-style: italic;
    text-align: center;
    margin: 16px 0 0 !important;
}

/* <em> or <i> inside the caption inherits, doesn't overwrite */
.exp-outputs--card .exp-outputs__caption em,
.exp-outputs--card .exp-outputs__caption i {
    font-family: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
    letter-spacing: inherit !important;
}
.exp-output-group {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.exp-output-group:first-of-type {
  margin-top: 1rem;
}

.exp-output-group > p {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.exp-output-group > p strong {
  display: inline-block;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.exp-output-group ul {
  margin: 0;
  padding-left: 1.2rem;
}

.exp-output-group li {
  margin-bottom: 0.35rem;
  line-height: 1.5;
}

.exp-output-group li:last-child {
  margin-bottom: 0;
}

/* =====================================================
   EXPLICYTE — Assay spec dt labels: explicit line-height
   Fixes multi-word labels ("Sample multiplexing", "Same-
   section add-ons") stacking their two lines on top of
   each other. The base rule sets font-size but inherits
   a collapsed line-height from Elementor's cascade.
   ===================================================== */
.exp-assay-spec dt {
    line-height: 1.4;
}

/* =====================================================
   MultiOmics — Comparison table variant
   Scoped to .mo-page so CRO pages keep the base look.
   Cyan indicator on row headers + cyan hairline under
   the thead. Data-status="forthcoming" swaps the filled
   dot for a hollow ring, carrying the "certified vs
   coming" narrative into the table.
   ===================================================== */

/* Cyan hairline under the navy thead */
.mo-page .exp-cmp__table thead th {
    border-bottom: 2px solid #06b6d4;
}

/* Row header (platform name) — cyan dot before, room to breathe */
.mo-page .exp-cmp__table tbody th[scope="row"] {
    position: relative;
    padding-left: 36px;
}
.mo-page .exp-cmp__table tbody th[scope="row"]::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 22px;                  /* aligns with cap height of the name */
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #06b6d4;
}

/* Forthcoming platform (Atera) — hollow ring instead of filled dot */
.mo-page .exp-cmp__table tbody th[scope="row"][data-status="forthcoming"]::before {
    background: transparent;
    border: 2px solid #06b6d4;
    width: 6px;                 /* compensate for border adding visual weight */
    height: 6px;
    left: 17px;
    top: 23px;
}

/* Subtle cyan-tinted row hover */
.mo-page .exp-cmp__table tbody tr:hover {
    background: rgba(6, 182, 212, 0.04);
}

/* Mobile — MultiOmics: strip internal borders AND the theme's
   nth-child zebra background. Theme reset adds a grey wash to
   odd rows via `table tbody>tr:nth-child(odd)>td/th`; on mobile
   with display:block that turns every other card grey. */
@media (max-width: 767px) {
    .mo-page .exp-cmp__table,
    .mo-page .exp-cmp__table tbody,
    .mo-page .exp-cmp__table tr,
    .mo-page .exp-cmp__table th,
    .mo-page .exp-cmp__table td {
        border: none;
        background: transparent !important;
    }
    /* Card background lives on the tr — put it back after the reset above. */
    .mo-page .exp-cmp__table tbody tr {
        background: #fff !important;
    }
    .mo-page .exp-cmp__table tbody th[scope="row"] {
        padding-left: 22px;
        margin-bottom: 0;
    }
    .mo-page .exp-cmp__table tbody th[scope="row"]::before {
        left: 0;
        top: 24px;
    }
    .mo-page .exp-cmp__table tbody th[scope="row"][data-status="forthcoming"]::before {
        left: 1px;
        top: 25px;
    }
}

/* =====================================================
   10x CSP badge — rectangular lockup in a square icon slot
   The badge (247×62 aspect) can't share the 120×120 square
   sizing of the pictogram icons in the other value-prop
   cards. This override gives the CSP widget the same 120px
   vertical footprint as those pictograms, then centres the
   60px-tall badge inside it — so all three H3 headlines
   below share a baseline.
   Requires the CSP HTML widget to carry the class
   `csp-icon-widget` (Advanced tab → CSS Classes).
   ===================================================== */

/* Widget wrapper: same height as pictogram icons, centres child */
.csp-icon-widget {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 120px !important;
}

/* SVG sizes to 60px tall at native aspect ratio (247×62 → ~239 wide) */
.mo-valueprops__icon--csp svg {
    width: auto;
    height: 60px;
    max-width: 100%;
    display: block;
}

/* =========================================================
   LIQUID SAMPLE PROFILING — APPLICATIONS
   ========================================================= */

.mo-applications {
  --mo-navy: #071d33;
  --mo-cyan: #06b6d4;
  --mo-text: #17324a;
  --mo-muted: #5f7182;
  --mo-line: #dbe5eb;
  --mo-light: #f5f9fb;
}


/* HEADER
--------------------------------------------------------- */

.mo-applications__header {
  max-width: 860px;
  margin: 0 auto 48px;
  text-align: center;
}

.mo-applications__eyebrow {
  margin: 0 0 12px;
  color: var(--mo-cyan);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mo-applications__title {
  margin: 0;
  color: var(--mo-navy);
  font-size: clamp(32px, 3.5vw, 48px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.mo-applications__intro {
  max-width: 760px;
  margin: 22px auto 0;
  color: var(--mo-muted);
  font-size: 17px;
  line-height: 1.65;
}


/* GRID
--------------------------------------------------------- */

.mo-applications__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}


/* CARD
--------------------------------------------------------- */

.mo-application-card {
  position: relative;
  overflow: hidden;
  min-height: 390px;
  padding: 34px 32px 36px;
  background: #fff;
  border: 1px solid var(--mo-line);
  border-radius: 4px;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.mo-application-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--mo-cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.mo-application-card:hover {
  transform: translateY(-4px);
  border-color: rgba(6, 182, 212, 0.45);
  box-shadow: 0 18px 40px rgba(7, 29, 51, 0.08);
}

.mo-application-card:hover::before {
  transform: scaleX(1);
}


/* CARD NUMBER
--------------------------------------------------------- */

.mo-application-card__number {
  position: absolute;
  top: 26px;
  right: 28px;
  color: rgba(7, 29, 51, 0.08);
  font-size: 48px;
  line-height: 1;
  font-weight: 700;
}


/* ICON
--------------------------------------------------------- */

.mo-application-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 30px;
  color: var(--mo-cyan);
  background: rgba(6, 182, 212, 0.08);
  border-radius: 50%;
}

.mo-application-card__icon svg {
  width: 25px;
  height: 25px;
}


/* CARD TYPOGRAPHY
--------------------------------------------------------- */

.mo-application-card__eyebrow {
  margin: 0 0 8px;
  color: var(--mo-cyan);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mo-application-card__title {
  margin: 0 0 18px;
  color: var(--mo-navy);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
}

.mo-application-card__text {
  margin: 0;
  color: var(--mo-muted);
  font-size: 15.5px;
  line-height: 1.65;
}


/* CLINICAL TRIAL HANDOFF
--------------------------------------------------------- */

.mo-applications__handoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 32px;
  padding: 32px 36px;
  background: var(--mo-navy);
  border-radius: 4px;
}

.mo-applications__handoff-content {
  max-width: 760px;
}

.mo-applications__handoff-eyebrow {
  margin: 0 0 7px;
  color: var(--mo-cyan);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mo-applications__handoff-title {
  margin: 0;
  color: #ffffff !important;
  font-size: 23px;
  line-height: 1.25;
  font-weight: 600;
}

.mo-applications__handoff-text {
  margin: 10px 0 0;
  max-width: 700px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  line-height: 1.55;
}


/* BUTTON
--------------------------------------------------------- */

.mo-applications__handoff-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  color: var(--mo-navy);
  background: var(--mo-cyan);
  border: 1px solid var(--mo-cyan);
  border-radius: 3px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.mo-applications__handoff-btn:hover {
  color: #fff;
  background: transparent;
  transform: translateY(-1px);
}


/* TABLET
--------------------------------------------------------- */

@media (max-width: 1024px) {

  .mo-applications {
    padding: 32px 0;
  }

  .mo-applications__grid {
    grid-template-columns: 1fr;
  }

  .mo-application-card {
    min-height: 0;
  }

  /* Stack the handoff card at tablet too — horizontal layout
     squeezes the CTA into a near-circle on this width. */
  .mo-applications__handoff {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }

  .mo-applications__handoff-btn,
  .mo-applications__handoff .btn-omics {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

}


/* MOBILE
--------------------------------------------------------- */

@media (max-width: 767px) {

  .mo-applications {
    padding: 32px 0;
  }

  .mo-applications__header {
    margin-bottom: 32px;
    text-align: left;
  }

  .mo-applications__title {
    font-size: 32px;
  }

  .mo-applications__intro {
    margin-top: 16px;
    font-size: 16px;
  }

  .mo-application-card {
    padding: 28px 24px 30px;
  }

  .mo-applications__handoff {
    padding: 28px 24px;
  }

  /* Explicit fallback in case .btn-omics wasn't caught at the
     tablet breakpoint — same rule, tighter scope. */
  .mo-applications__handoff-btn,
  .mo-applications__handoff .btn-omics {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

}

/* =========================================================
   TRIALS HANDOFF — ONCOLOGY CRO / DARK VERSION
   Horizontal on desktop only. Stacks at ≤1024px because the
   nowrap .btn-cro-primary label is too long to share a row
   at tablet widths (content column collapses to min-content).
   ========================================================= */

.trials-handoff {
  --trials-accent: #e62041;
  --trials-bg: #16283b;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 38px 42px;
  background: var(--trials-bg);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  overflow: hidden;
}

/* Oncology CRO accent */
.trials-handoff::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--trials-accent);
}

.trials-handoff__content {
  flex: 1 1 auto;      /* takes the free space; never collapses to min-content */
  min-width: 0;
  max-width: 760px;
}

.trials-handoff .trials-handoff__eyebrow {
  margin: 0 0 8px;
  color: #ff3657 !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trials-handoff .trials-handoff__title {
  margin: 0 0 12px;
  color: #ffffff !important;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.18;
}

.trials-handoff__text {
  margin: 0;
  max-width: 720px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 16px;
  line-height: 1.6;
}

.trials-handoff__cta {
  flex: 0 0 auto;
}


/* Tablet + mobile — stack, button full width and allowed to wrap */

@media (max-width: 1024px) {

  .trials-handoff {
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    padding: 34px 36px;
  }

  .trials-handoff__content {
    max-width: none;
  }

  .trials-handoff__cta {
    width: 100%;
  }

  .trials-handoff__cta .btn-cro-primary {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

}


/* Mobile — tighter padding */

@media (max-width: 767px) {

  .trials-handoff {
    gap: 24px;
    padding: 28px 24px 28px 28px;
  }

}

/* Credibility strip — reuses .exp-metrics; smaller values so text + number
   values sit on one line and align across the four cells.
   Tablet: force a 2×2 grid so the 4th metric doesn't strand on its own row. */
.exp-metrics--trust .exp-metric-value {
    font-size: 30px;
    letter-spacing: -0.4px;
}

@media (max-width: 1024px) and (min-width: 768px) {
    .exp-metrics--trust {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .exp-metrics--trust .exp-metric {
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .exp-metrics--trust .exp-metric-value { font-size: 26px; }
}
/* =====================================================
   EXPLICYTE — Lifecycle steps (2-col card: white panel + photo)
   Card sits on the navy band. One .exp-lstep per step.
   Left = .exp-lstep__panel (reuses .exp-eyebrow-muted,
   .exp-step-title, .exp-outputs, .exp-pub-link).
   Right = .exp-lstep__media > img.
   ===================================================== */
.exp-lstep {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    background: #f7f8fa;
    border-radius: 20px;
    overflow: hidden;
    align-items: stretch;
}
.exp-lstep + .exp-lstep { margin-top: 24px; }

.exp-lstep__panel {
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #f7f8fa;
}
/* first line sits tight to the top of the panel, not 40px down */
.exp-lstep__panel .exp-eyebrow-muted { margin: 0 0 12px; }
.exp-lstep__panel .exp-step-title { margin: 0 0 16px; }
.exp-lstep__panel .exp-step-body,
.exp-lstep__panel .exp-step-body p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #4b5563;
    margin: 0;
}
.exp-lstep__panel .exp-pub-link { margin-top: 22px; }

.exp-lstep__media {
    position: relative;
    min-height: 100%;
    background: #16283b;
}
.exp-lstep__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Alternate the photo side for rhythm — add .exp-lstep--flip on step 2 */
.exp-lstep--flip .exp-lstep__panel { order: 2; }
.exp-lstep--flip .exp-lstep__media { order: 1; }

@media (max-width: 860px) {
    .exp-lstep { grid-template-columns: 1fr; }
    .exp-lstep__media { order: -1; min-height: 240px; }
    .exp-lstep--flip .exp-lstep__panel,
    .exp-lstep--flip .exp-lstep__media { order: initial; }
    .exp-lstep__panel { padding: 32px 26px; }
}

.exp-metrics--tls .exp-metric-value {
    font-size: 24px;
    letter-spacing: -0.3px;
}
@media (max-width: 768px) {
    .exp-metrics--tls .exp-metric-value { font-size: 22px; }
}

/* Wider label column for the TLS assay spec (bare variant on navy) */
/* Wider label column for the bare spec (navy) — desktop/tablet only.
   Must stay inside a min-width query: unscoped, it sits after the
   ≤600px "1fr" rule and overrides it on phones. */
@media (min-width: 1025px) {
    .exp-assay-spec--bare dl {
        grid-template-columns: 220px 1fr;
        column-gap: 32px;
    }
}
@media (max-width: 1024px) and (min-width: 601px) {
    .exp-assay-spec--bare dl {
        grid-template-columns: 170px 1fr;
        column-gap: 24px;
    }
}
@media (max-width: 600px) {
    .exp-assay-spec--bare dl {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 4px;
    }
}

/* =========================================================
   TLS CLASSIFICATION — ONCOLOGY CRO
   ========================================================= */

.tls-classification {
  --cro-navy: #1f3349;
  --cro-red: #e62041;
  --cro-text: #344456;
  --cro-muted: #697789;

  width: 100%;
}

.tls-classification__figures {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}


/* FIGURE CARD */

.tls-classification__figure {
  margin: 0;
  overflow: hidden;

  background: #ffffff;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);

  box-shadow:
    0 10px 28px rgba(10, 25, 40, .12);
}


/* IMAGE */

.tls-classification__image-link {
  position: relative;

  display: block;

  padding: 22px 22px 0;

  text-decoration: none;
  cursor: zoom-in;
}

.tls-classification__img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;
}


/* ZOOM LABEL */

.tls-classification__zoom {
  position: absolute;
  right: 34px;
  bottom: 12px;

  padding: 7px 11px;

  background: rgba(31, 51, 73, .92);
  color: #ffffff;

  border-radius: 5px;

  font-size: 12px;
  font-weight: 600;
  line-height: 1;

  opacity: 0;
  transform: translateY(3px);

  transition:
    opacity .2s ease,
    transform .2s ease;
}

.tls-classification__image-link:hover
.tls-classification__zoom {
  opacity: 1;
  transform: translateY(0);
}


/* CAPTION */

.tls-classification__caption {
  padding: 18px 22px 22px;
}

.tls-classification__title {
  margin: 0 0 7px;

  color: var(--cro-navy);

  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}

.tls-classification__caption p {
  margin: 0;

  color: var(--cro-muted);

  font-size: 14px;
  line-height: 1.55;
}


/* MOBILE */

@media (max-width: 767px) {

  .tls-classification__figures {
    gap: 20px;
  }

  .tls-classification__image-link {
    padding: 14px 14px 0;
  }

  .tls-classification__caption {
    padding: 16px 16px 18px;
  }

  .tls-classification__zoom {
    display: none;
  }

}

/* =====================================================
   Publication slider — CRO (red) accent variant
   Base .exp-pub-slider ships with the MultiOmics cyan
   palette. Wrap the shortcode in an Elementor container
   with class .exp-pub-slider--cro to swap the accents to
   the CRO red palette. Non-breaking: MO pages that don't
   carry the class keep the cyan default.
   Specificity note: the base .is-active / :hover dot
   rules use !important, so the overrides carry !important
   AND raise specificity (.exp-pub-slider.exp-pub-slider--cro
   isn't possible on a descendant chain; we use two
   qualifier selectors instead — see the dot rules below).
   ===================================================== */

/* Card — hover border tint from cyan → red */
.exp-pub-slider--cro .exp-pub-slider__card:hover {
    border-color: rgba(230, 32, 65, 0.25);
}

/* Year label */
.exp-pub-slider--cro .exp-pub-slider__year {
    color: #e62041;
}

/* Arrows */
.exp-pub-slider--cro .exp-pub-slider__arrow {
    color: #e62041;
}
.exp-pub-slider--cro .exp-pub-slider__arrow:hover {
    color: #ff3355;
}

/* Dots — base rules use !important, so overrides do too
   and add a class qualifier to raise specificity above
   the base's single-class selectors. */
.exp-pub-slider--cro .exp-pub-slider .exp-pub-slider__dot:hover {
    border-color: #e62041 !important;
}
.exp-pub-slider--cro .exp-pub-slider .exp-pub-slider__dot.is-active {
    background: #e62041 !important;
    background-color: #e62041 !important;
    border-color: #e62041 !important;
}

/* =====================================================
   MultiOmics case slider — mobile layout fix
   Base .exp-cs-slider ships with 44px arrow gutters and an
   image container that mattes small figures. On phones that
   crushes the text column to a 4-char measure and leaves a
   whitespace band above the title. Reclaim the width; hide
   arrows entirely since swipe (JS) is now the primary nav.
   ===================================================== */
@media (max-width: 1024px) {
    .mo-page .exp-cs-slider {
        padding: 0;
    }
    .mo-page .exp-cs-slide__media {
        padding: 12px 12px 0;
    }
    .mo-page .exp-cs-slide__media img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }
    .mo-page .exp-cs-slide__text {
        padding: 20px 20px 28px;
    }
    /* Arrows hidden on mobile — swipe (JS) is the primary nav, dots stay. */
    .mo-page .exp-cs-arrow {
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* =====================================================
   Publication wall — orphan on last row
   Keeps the grid layout. When the item count leaves a
   single orphan on the final row (5 items in a 4-col
   or 2-col grid: 4+1 / 2+2+1), that item spans the full
   row so `justify-items: center` on the grid centers it.
   Full rows are unaffected.
   ===================================================== */

/* Tablet — 4 columns; orphan when total is 4n+1 (5, 9, 13…). */
@media (max-width: 1024px) and (min-width: 768px) {
    .exp-pub-wall > .exp-pub-wall-item:last-child:nth-child(4n+1) {
        grid-column: 1 / -1;
    }
}

/* Mobile-tablet — 3 columns; orphan when total is 3n+1 (4, 7, 10…).
   With 5 items you get 3+2, no orphan — this only fires for other counts. */
@media (max-width: 767px) and (min-width: 481px) {
    .exp-pub-wall > .exp-pub-wall-item:last-child:nth-child(3n+1) {
        grid-column: 1 / -1;
    }
}

/* Phone — 2 columns; orphan when total is 2n+1 (3, 5, 7…). */
@media (max-width: 480px) {
    .exp-pub-wall > .exp-pub-wall-item:last-child:nth-child(2n+1) {
        grid-column: 1 / -1;
    }
}

/* =====================================================
   FAQ / Nested Accordion — link states
   Links inside accordion items inherit .elementor-kit-7's
   red at rest, but the kit's global a:hover repaints them
   to a color that matches the accordion background, so
   they vanish on hover. Set both states explicitly.
   ===================================================== */
.e-n-accordion-item a,
.e-n-accordion-item a:link,
.e-n-accordion-item a:visited {
    color: #E62041 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .2s cubic-bezier(.22, 1, .36, 1),
                text-decoration-color .2s cubic-bezier(.22, 1, .36, 1);
}
.e-n-accordion-item a:hover,
.e-n-accordion-item a:focus {
    color: #b8172f !important;             /* darker red for hover feedback */
    text-decoration: underline !important;
    text-decoration-color: #b8172f !important;
}

/* =====================================================
   Case studies list — mobile single-column layout
   Base grid stays multi-column on phones, crushing each
   card to a ~4-char line measure. Force single column
   below 768px so cards get full viewport width.
   ===================================================== */
@media (max-width: 767px) {
    .exp-cs-list {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* =====================================================
   FAQ / Nested Accordion — MultiOmics link color
   Overrides the base red link color inside .e-n-accordion-item
   on MultiOmics pages only. Specificity (.mo-page .e-n-… = 0,3,0)
   beats the base rule (.e-n-… = 0,2,0); !important beats the
   kit's a:hover.
   ===================================================== */
.mo-page .e-n-accordion-item a,
.mo-page .e-n-accordion-item a:link,
.mo-page .e-n-accordion-item a:visited {
    color: #06b6d4 !important;
    text-decoration: underline !important;
    text-decoration-color: #06b6d4 !important;
}
.mo-page .e-n-accordion-item a:hover,
.mo-page .e-n-accordion-item a:focus {
    color: #0891a3 !important;
    text-decoration: underline !important;
    text-decoration-color: #0891a3 !important;
}

/* =====================================================
   Tiered matrix — mobile chip-row layout
   Base .exp-cmp mobile stacks each td vertically, giving
   "LEVEL 1 ✓ / LEVEL 2 ✓ / LEVEL 3 ✓" as three tall rows
   per capability card. Collapse them into a horizontal
   chip row: label + check together, cyan for included,
   muted grey for not. Chips wrap to a second line if the
   viewport is narrower than the row.
   ===================================================== */
@media (max-width: 767px) {
    /* Room between the capability name and the chip row */
    .exp-cmp.exp-cmp--tiers .exp-cmp__table tbody th[scope="row"] {
        margin-bottom: 12px;
    }

    /* Each td → inline-flex chip. width:auto beats the base
       display:block; width:100% mobile rule. */
    .exp-cmp.exp-cmp--tiers .exp-cmp__table tbody td {
        display: inline-flex !important;
        width: auto !important;
        align-items: center;
        gap: 6px;
        padding: 6px 11px;
        margin: 0 6px 6px 0;
        background: rgba(6, 182, 212, 0.10) !important;
        border-radius: 999px;
        vertical-align: middle;
    }

    /* Label (from data-label attr) — inline with the check */
    .exp-cmp.exp-cmp--tiers .exp-cmp__table tbody td::before {
        display: inline !important;
        margin: 0 !important;
        font-family: 'Work Sans', sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        color: #0e7490;
    }

    /* Included: cyan check next to the label */
    .exp-cmp.exp-cmp--tiers .exp-cmp__table tbody td .exp-cmp__yes {
        display: inline-block;
        font-size: 12px;
        line-height: 1;
        color: #06b6d4;
    }

    /* Not included: muted grey chip + faint × */
    .exp-cmp.exp-cmp--tiers .exp-cmp__table tbody td:has(.exp-cmp__no) {
        background: #f1f5f9 !important;
    }
    .exp-cmp.exp-cmp--tiers .exp-cmp__table tbody td:has(.exp-cmp__no)::before {
        color: #94a3b8;
    }
    .exp-cmp.exp-cmp--tiers .exp-cmp__table tbody td .exp-cmp__no {
        display: inline-block;
        font-size: 12px;
        line-height: 1;
        color: #cbd5e1;
    }
}

/* =====================================================
   CRS — analytical depth
   Three-column oncology variant
   ===================================================== */

/* Base .exp-pillars has a 2-col rule with !important,
   so this modifier also needs !important */
.exp-pillars.exp-pillars--three {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px;
}

/* Level label */
.exp-pillars--three .exp-pillar__kicker {
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #e62041 !important;
    margin: 0 0 8px;
}

/* Keep the three cards vertically balanced */
.exp-pillars--three .exp-pillar__content {
    height: 100%;
}

/* Outputs sit below the explanatory copy */
.exp-pillars--three .exp-outputs {
    margin-top: auto;
    padding-top: 18px;
}

/* Slightly tighter list for 3-up cards */
.exp-pillars--three .exp-outputs li {
    font-size: 14px;
    margin-bottom: 8px;
}

/* Tablet — stack single-column so the pillars don't get
   squeezed at ~800–1024px viewport widths. */
@media (max-width: 1024px) {
    .exp-pillars.exp-pillars--three {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .exp-pillars.exp-pillars--three {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
}

/* =====================================================
   Pillars — 3-across variant
   Base .exp-pillars ships as a 2-column grid (giving 2+1
   with 3 items). Add class `exp-pillars--three` alongside
   `exp-pillars` to get 3-across on tablet+. Mobile falls
   back to 1-column via the existing base @media rule.
   ===================================================== */
.exp-pillars--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Optional intermediate: 2-across on tablet — comment in
   if 3-across feels cramped at ~800px viewport width. */
/*
@media (max-width: 1024px) {
    .exp-pillars--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
*/

/* =====================================================
   EXPLICYTE — Pillar meta line (default / light context)
   Base rule so .exp-pillar__meta renders correctly outside
   the --refined.--workflow variant, which owns the navy-
   context styling. Multiple stacked meta lines (e.g. Typical
   formats + Typical focus) sit at 14px apart; last one
   collapses its bottom margin so the card doesn't over-pad.
   ===================================================== */
.exp-pillar__meta {
    display: block;
    margin: 0 0 14px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.70);
}
.exp-pillar__meta:last-child {
    margin-bottom: 0;
}
.exp-pillar__meta strong {
    color: #e62041;
    font-weight: 600;
}

/* =====================================================
   Xenium STAMP — workflow cards with images
   ===================================================== */

.exp-pillars--workflow {
    align-items: stretch !important;
}

.exp-pillars--workflow .exp-pillar {
    flex-direction: column !important;
    align-self: stretch !important;
    height: 100%;
    overflow: hidden;
    padding: 0;
}

.exp-pillars--workflow .exp-pillar__media {
    width: 100%;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.exp-pillars--workflow .exp-pillar__img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.exp-pillars--workflow .exp-pillar__content {
    flex: 1;
    padding: 22px 22px 24px;
}

/* =====================================================
   Pillars — refined editorial variant
   Layered on top of .exp-pillars--three. Adds numbered
   watermarks (CSS counter — no HTML change), a subtle
   red accent line above each title, refined card
   treatment, and a small lift on hover. Pair with any
   layout modifier (--three, --light, etc.).
   ===================================================== */
.exp-pillars--refined {
    counter-reset: pillar;
}

.exp-pillars--refined .exp-pillar {
    counter-increment: pillar;
    position: relative;
    padding: 34px 30px 30px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    transition: border-color .25s ease, transform .25s ease, background .25s ease;
}

.exp-pillars--refined .exp-pillar:hover {
    border-color: rgba(255, 51, 85, 0.35);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
}

/* Watermark number — top-right of each card */
.exp-pillars--refined .exp-pillar::before {
    content: "0" counter(pillar);
    position: absolute;
    top: 22px;
    right: 26px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: rgba(255, 51, 85, 0.22);
    pointer-events: none;
}

/* Content wrapper — respect the number's real estate */
.exp-pillars--refined .exp-pillar__content {
    padding-right: 36px;
}

/* Title — with red accent line above */
.exp-pillars--refined .exp-pillar__title {
    position: relative;
    padding-top: 16px;
    margin-top: 0 !important;
    margin-bottom: 14px;
}

.exp-pillars--refined .exp-pillar__title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 2px;
    background: #ff3355;
    border-radius: 1px;
}

/* Body — a touch more air */
.exp-pillars--refined .exp-pillar__body {
    margin-bottom: 0 !important;
    line-height: 1.65;
}

/* Light-variant compatibility */
.exp-pillars--light.exp-pillars--refined .exp-pillar {
    background: rgba(6, 22, 40, 0.03);
    border-color: rgba(6, 22, 40, 0.10);
}
.exp-pillars--light.exp-pillars--refined .exp-pillar:hover {
    border-color: rgba(230, 32, 65, 0.30);
    background: rgba(6, 22, 40, 0.05);
}
.exp-pillars--light.exp-pillars--refined .exp-pillar::before {
    color: rgba(230, 32, 65, 0.20);
}

/* =====================================================
   Comparison table — universal mobile cleanup
   Broadens the .mo-page-scoped border/zebra strip to
   apply everywhere .exp-cmp is used. Non-MultiOmics
   sections (preclinical, discovery, trials) now get the
   same clean cards without needing a page-class scope.
   The .mo-page rules still take over where they exist —
   this fills the gap elsewhere.
   ===================================================== */
@media (max-width: 767px) {
    .exp-cmp__table,
    .exp-cmp__table tbody,
    .exp-cmp__table tr,
    .exp-cmp__table th,
    .exp-cmp__table td {
        border: none !important;
        background: transparent !important;
    }
    .exp-cmp__table tbody tr {
        background: #fff !important;
    }
    .exp-cmp__table tbody th[scope="row"] {
        border-bottom: none !important;
        margin-bottom: 0;
    }
}

.exp-pillars--workflow .exp-pillar__lead {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    color: #ffffff;
    margin: 0 0 12px;
}

/* =====================================================
   Pillars — workflow layer (kicker + meta + note)
   Layered on top of .exp-pillars--refined. Only overrides
   the pieces that need to differ for the new HTML shape
   (explicit kicker owns numbering, meta/note paragraphs).
   Leaves .exp-pillars--refined untouched for existing pages.
   ===================================================== */

/* Kill the watermark counter — the kicker already numbers each card */
.exp-pillars--refined.exp-pillars--workflow .exp-pillar::before {
    content: none;
}
.exp-pillars--refined.exp-pillars--workflow .exp-pillar__content {
    padding-right: 0;
}

/* Move the accent bar from above the title to above the kicker */
.exp-pillars--refined.exp-pillars--workflow .exp-pillar__title {
    padding-top: 0;
}
.exp-pillars--refined.exp-pillars--workflow .exp-pillar__title::before {
    content: none;
}

.exp-pillars--refined.exp-pillars--workflow .exp-pillar__kicker {
    display: block;
    position: relative;
    padding-top: 16px;
    margin: 0 0 12px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #ff3355;
}
.exp-pillars--refined.exp-pillars--workflow .exp-pillar__kicker::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 2px;
    background: #ff3355;
    border-radius: 1px;
}

/* Meta line — "Readouts:", "Comparators:", etc. */
.exp-pillars--refined.exp-pillars--workflow .exp-pillar__meta {
    display: block;
    margin: 0 0 14px !important;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.70);
}
.exp-pillars--refined.exp-pillars--workflow .exp-pillar__meta strong {
    color: #ff3355;
    font-weight: 600;
}

/* Note — italic authorial aside with a subtle red left bar */
.exp-pillars--refined.exp-pillars--workflow .exp-pillar__note {
    display: block;
    margin: 14px 0 0 !important;
    padding-left: 12px;
    border-left: 2px solid rgba(255, 51, 85, 0.40);
    font-family: 'Inter', sans-serif;
    font-style: italic;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.55);
}

/* Light-variant compatibility */
.exp-pillars--light.exp-pillars--refined.exp-pillars--workflow .exp-pillar__meta {
    color: #4b5563;
}
.exp-pillars--light.exp-pillars--refined.exp-pillars--workflow .exp-pillar__meta strong {
    color: #e62041;
}
.exp-pillars--light.exp-pillars--refined.exp-pillars--workflow .exp-pillar__note {
    color: #6b7280;
    border-left-color: rgba(230, 32, 65, 0.40);
}

/* =====================================================
   Workflow pillars — subtitle under the H3
   Pairs with .exp-pillar__title as a two-tier heading:
   H3 states the pillar, subtitle gives the intent.
   Same font family, one weight lighter, one size smaller.
   Scoped to --workflow — other pages using __lead are
   untouched.
   ===================================================== */
.exp-pillars--workflow .exp-pillar__subtitle {
    display: block;
    margin: -6px 0 18px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: rgba(255, 255, 255, 0.72);
}

/* Light-variant compatibility */
.exp-pillars--light.exp-pillars--workflow .exp-pillar__subtitle {
    color: #4b5563;
}

/* ============================================
   ADC assay matrix — responsive semantic table
   ============================================ */

.exp-assay-matrix {
  margin: 32px 0 0;
  padding: 0;
  width: 100%;
}

.exp-assay-matrix__table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #1f3349;
  background: #ffffff;
  border: 1px solid #e5e9ef;
  border-radius: 12px;
  overflow: hidden;
}

/* Visually hidden but readable by screen readers & LLMs */
.exp-assay-matrix__caption,
.exp-assay-matrix__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Header row --- */
.exp-assay-matrix__table thead th {
  background: #1f3349;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 18px;
  border: none;
  vertical-align: middle;
}

.exp-assay-matrix__col-num {
  width: 3.5rem;
}

/* --- Body rows --- */
.exp-assay-matrix__table tbody tr {
  border-top: 1px solid #e5e9ef;
  transition: background-color 0.15s ease;
}

.exp-assay-matrix__table tbody tr:hover {
  background-color: #f7f9fc;
}

.exp-assay-matrix__table tbody td,
.exp-assay-matrix__table tbody th {
  padding: 20px 18px;
  vertical-align: top;
  text-align: left;
  border: none;
  font-weight: 400;
}

.exp-assay-matrix__num {
  color: #e62041;
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.exp-assay-matrix__stage {
  min-width: 14rem;
}

.exp-assay-matrix__stage strong {
  display: block;
  color: #1f3349;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  margin-bottom: 6px;
}

.exp-assay-matrix__question {
  display: block;
  font-size: 0.87rem;
  color: #556577;
  font-style: italic;
  line-height: 1.45;
}

/* Links — inline, single underline, no theme decoration */
.exp-assay-matrix__table a,
.exp-assay-matrix__table a:link,
.exp-assay-matrix__table a:visited,
.exp-assay-matrix__table a:hover,
.exp-assay-matrix__table a:focus {
  display: inline;
  color: #e62041;
  text-decoration: none !important;   /* beats theme a:hover underline */
  border-bottom: 1px solid rgba(230, 32, 65, 0.25);
  transition: border-color 0.15s ease;
}

.exp-assay-matrix__table a:hover,
.exp-assay-matrix__table a:focus {
  border-bottom-color: #e62041;
}

/* ============================================
   ADC assay matrix — mobile + tablet card layout (≤1024px)
   Replaces both previous @media (max-width: 900px) blocks.
   Hierarchy per card:
     STEP 01 (red eyebrow) → title → question (upright navy lead)
     → rationale (plain muted) → hairline → Models / Readouts / Platforms
   ============================================ */
@media (max-width: 1024px) {

  .exp-assay-matrix__table {
    border: none;
    border-radius: 0;
    background: transparent;
  }

  .exp-assay-matrix__table,
  .exp-assay-matrix__table tbody,
  .exp-assay-matrix__table tr,
  .exp-assay-matrix__table th,
  .exp-assay-matrix__table td {
    display: block;
    width: 100%;
  }

  .exp-assay-matrix__table thead {
    position: absolute;
    left: -9999px;
    top: -9999px;
  }

  /* Kill the theme's zebra (painted on td/th, not tr) and any inherited hover */
  .exp-assay-matrix__table tbody tr,
  .exp-assay-matrix__table tbody tr:nth-child(even),
  .exp-assay-matrix__table tbody tr:nth-child(odd),
  .exp-assay-matrix__table tbody tr:hover,
  .exp-assay-matrix__table tbody tr:nth-child(even) > td,
  .exp-assay-matrix__table tbody tr:nth-child(even) > th,
  .exp-assay-matrix__table tbody tr:nth-child(odd) > td,
  .exp-assay-matrix__table tbody tr:nth-child(odd) > th {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }

  /* Card */
  .exp-assay-matrix__table tbody tr {
    border: 1px solid #e5e9ef;
    border-radius: 12px;
    padding: 22px 20px 20px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(31, 51, 73, 0.04);
  }
  .exp-assay-matrix__table tbody tr:last-child {
    margin-bottom: 0;
  }

  /* Step number → small red eyebrow, flush left, tight to the title */
  .exp-assay-matrix__table tbody th.exp-assay-matrix__num {
    padding: 0;
    margin: 0 0 8px;
    font-family: 'Work Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #e62041;
  }
  .exp-assay-matrix__table tbody th.exp-assay-matrix__num::before {
    content: "Step ";
  }

  /* Stage block → card header, aligned with the data rows below */
  .exp-assay-matrix__table tbody td.exp-assay-matrix__stage {
    min-width: 0;
    padding: 0 0 18px;
    margin: 0 0 4px;
    border-bottom: 1px solid #e5e9ef;
  }

  .exp-assay-matrix__stage strong {
    font-family: 'Work Sans', sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.2px;
    margin-bottom: 10px;
  }

  /* Question → upright navy lead line (the key message) */
  .exp-assay-matrix__question {
    font-family: 'Work Sans', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.45;
    color: #1f3349;
  }

  /* Rationale → plain muted body text, full width */
  .exp-assay-matrix__rationale {
    font-style: normal;
    font-size: 14px;
    line-height: 1.6;
    color: #556577;
    margin-top: 8px;
    max-width: none;
  }

  /* Data rows — label above, content below */
  .exp-assay-matrix__table tbody td[data-label]:not(.exp-assay-matrix__stage) {
    display: block;
    padding: 14px 0 0;
    font-size: 15px;
    line-height: 1.55;
  }

  .exp-assay-matrix__table tbody td[data-label]:not(.exp-assay-matrix__stage)::before {
    content: attr(data-label);
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #8090a3;
    margin-bottom: 4px;
  }
}
/* =====================================================
   EXPLICYTE — Pillar inline links
   Beats the Elementor Kit's global a:hover which fades
   links to the near-invisible --e-global-color-primary.
   Covers BOTH markup shapes seen across the site:
     • class-based: .exp-pillar__body a
     • widget-based (Text Editor): .exp-pillar .elementor-widget-text-editor a
   Excludes .exp-pillar__cta — the CTA often lives in the
   same Text Editor widget but must stay border-free and
   keep its own colour.
   ===================================================== */
.exp-pillar__body a:not(.exp-pillar__cta),
.exp-pillar__body a:not(.exp-pillar__cta):link,
.exp-pillar__body a:not(.exp-pillar__cta):visited,
.exp-pillar .elementor-widget-text-editor a:not(.exp-pillar__cta),
.exp-pillar .elementor-widget-text-editor a:not(.exp-pillar__cta):link,
.exp-pillar .elementor-widget-text-editor a:not(.exp-pillar__cta):visited {
    color: #e62041 !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(230, 32, 65, 0.25);
    transition: border-color .2s cubic-bezier(.22, 1, .36, 1),
                color .2s cubic-bezier(.22, 1, .36, 1);
}

.exp-pillar__body a:not(.exp-pillar__cta):hover,
.exp-pillar__body a:not(.exp-pillar__cta):focus,
.exp-pillar .elementor-widget-text-editor a:not(.exp-pillar__cta):hover,
.exp-pillar .elementor-widget-text-editor a:not(.exp-pillar__cta):focus {
    color: #ff3355 !important;
    text-decoration: none !important;
    border-bottom-color: #ff3355;
}

/* CTA inside a Text Editor widget — no border, ever */
.exp-pillar .exp-pillar__cta,
.exp-pillar .exp-pillar__cta:hover,
.exp-pillar .exp-pillar__cta:focus {
    border-bottom: 0 !important;
}

/* =====================================================
   Pillars — summary variant (closes a 3×2 grid)
   Suppresses the counter watermark, accent bar, hover
   lift and card chrome; centers copy so it reads as the
   section's payoff rather than another numbered card.
   ===================================================== */
.exp-pillars--refined .exp-pillar--summary {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: transparent;
    border: 1px solid transparent;
}
.exp-pillars--refined .exp-pillar--summary:hover {
    transform: none;
    background: transparent;
    border-color: transparent;
}
.exp-pillars--refined .exp-pillar--summary::before {
    content: none;
}
.exp-pillars--refined .exp-pillar--summary .exp-pillar__content {
    padding-right: 0;
}
.exp-pillars--refined .exp-pillar--summary .exp-pillar__body {
    font-family: 'Work Sans', sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
    color: #ffffff;
    letter-spacing: -0.1px;
    margin: 0;
}
.exp-pillars--refined .exp-pillar--summary .exp-pillar__body strong {
    font-weight: 600;
    color: #ff3355;
}

/* Light-variant compatibility */
.exp-pillars--light.exp-pillars--refined .exp-pillar--summary {
    background: transparent;
    border-color: transparent;
}
.exp-pillars--light.exp-pillars--refined .exp-pillar--summary:hover {
    background: transparent;
    border-color: transparent;
}
.exp-pillars--light.exp-pillars--refined .exp-pillar--summary .exp-pillar__body {
    color: #1f3349;
}
.exp-pillars--light.exp-pillars--refined .exp-pillar--summary .exp-pillar__body strong {
    color: #e62041;
}

/* =====================================================
   Pillars — extend variant (optional modules, not steps)
   Suppresses the counter watermark from --refined so the
   three items don't read as a numbered sequence. Kicker
   above the title carries "OPTIONAL MODULE" if desired
   (not used here, but hook is available).
   ===================================================== */
.exp-pillars--extend .exp-pillar::before {
    content: none;
}
.exp-pillars--extend .exp-pillar .exp-pillar__content {
    padding-right: 0;
}

/* =====================================================
   Steps — question variant (icon replaces numbered marker)
   Used for editorial question stacks (e.g. Core ADC
   characterization framing). Icon column matches the width
   of the standard .exp-step-num circle so alignment carries
   across .exp-steps variants.
   ===================================================== */
.exp-steps--questions .exp-step-num {
    display: none;
}
.exp-steps--questions .exp-step-icon {
    flex: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff3355;
    margin-top: 2px;
}
.exp-steps--questions .exp-step-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Light-variant compatibility */
.exp-steps--questions:not(.exp-steps--navy) .exp-step-icon {
    color: #e62041;
}

/* Rationale line — biology framing under the development question.
   Editorial, muted, italicized. Sits beneath .exp-assay-matrix__question
   so the Stage cell reads: title / question / why-it-matters. */
.exp-assay-matrix__rationale {
    display: block;
    margin-top: 8px;
    font-size: 0.82rem;
    color: #6e8199;
    font-style: italic;
    line-height: 1.5;
    max-width: 34em;
}

/* Mobile — same treatment inside the stacked card */
@media (max-width: 900px) {
    .exp-assay-matrix__rationale {
        margin-top: 6px;
        font-size: 0.8rem;
    }
}

/* =====================================================
   Pillars — extend variant: alignment + internal rhythm
   Top-align cards so short blocks don't inherit whitespace
   from tall neighbours; open up vertical space between
   icon, title, body and meta.
   ===================================================== */
.exp-pillars--extend {
    align-items: start;
}
.exp-pillars--extend .exp-pillar {
    align-self: start;
}
.exp-pillars--extend .exp-pillar__icon {
    margin-bottom: 28px;
}
.exp-pillars--extend .exp-pillar__title {
    margin-bottom: 18px;
}
.exp-pillars--extend .exp-pillar__body {
    margin-bottom: 20px !important;
}
.exp-pillars--extend .exp-pillar__meta {
    margin-top: 16px !important;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.exp-pillars--extend .exp-pillar__meta:last-child {
    margin-bottom: 0 !important;
}

/* Light-variant compatibility */
.exp-pillars--light.exp-pillars--extend .exp-pillar__meta {
    border-top-color: rgba(31, 51, 73, 0.10);
}

/* =====================================================
   Pillars — imaged variant
   Full-bleed image at the top of each card, replacing
   the icon slot. Preserves the refined-variant card
   chrome (border, hover lift, red accent bar). Image
   sits flush with card top edges via negative margins.
   ===================================================== */

/* Card padding reset — image needs to bleed to the card edges.
   Refined variant has 34px top / 30px sides / 30px bottom padding;
   we keep sides + bottom but pull the image out of the top. */
.exp-pillars--imaged .exp-pillar {
    padding-top: 0;
    overflow: hidden;
}

/* Image container — bleeds to card edges via negative horizontal
   margin equal to the refined padding. */
.exp-pillars--imaged .exp-pillar__image {
    margin: 0 -30px 28px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #16283b;
}
.exp-pillars--imaged .exp-pillar__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.exp-pillars--imaged .exp-pillar:hover .exp-pillar__image img {
    transform: scale(1.04);
}

/* Top edge of card — reintroduce top padding for the content
   area, since we stripped it from the card itself. */
.exp-pillars--imaged .exp-pillar__content {
    padding-top: 6px;
}

/* Restore top space for the title where refined normally
   uses padding-top on it to make room for the accent bar. */
.exp-pillars--imaged .exp-pillar__title {
    padding-top: 12px;
}

/* =====================================================
   Case slider ([exp_target_cases]) — oncology mobile/tablet fix
   Unscoped port of the MultiOmics mobile fix (.mo-page), so every
   .exp-cs-slider gets it. Reclaims the arrow gutters, stacks the
   card (image on top) up to 1024px, lets the figure size naturally,
   and hides the arrows: swipe (footer JS) + dots are the nav.
   The .mo-page rules still apply on MultiOmics pages.
   ===================================================== */

/* Slide = exactly one viewport wide (guards the translateX math) */
.exp-cs-slider .exp-cs-viewport {
    overflow: hidden !important;
    width: 100% !important;
}
.exp-cs-slider .exp-cs-track {
    display: flex !important;
    flex-wrap: nowrap !important;
}
.exp-cs-slider .exp-cs-track > .exp-cs-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 1024px) {
    /* No arrow gutters: text gets the full card width */
    .exp-cs-slider {
        padding: 0 !important;
    }

    /* Stack from tablet down (the 2-col text column is too narrow here) */
    .exp-cs-slider .exp-cs-slide {
        grid-template-columns: 1fr !important;
    }
    .exp-cs-slider .exp-cs-slide__media {
        order: -1;
        min-height: 0;
        padding: 12px 12px 0;
    }

    /* Figure sizes to its own aspect ratio, so no empty band above the title */
    .exp-cs-slider .exp-cs-slide__media img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }

    .exp-cs-slider .exp-cs-slide__text {
        padding: 20px 20px 28px;
    }

    /* Arrows off: swipe is the primary nav, dots stay */
    .exp-cs-slider .exp-cs-arrow {
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* =====================================================
   Case slider arrows + dots — neutralise kit button chrome (oncology)
   .elementor-kit-7 button / :hover / :focus add a red pill background,
   12px 28px padding and a 999px radius that the base .exp-cs-arrow
   rules are too weak to beat. Prefixing with the kit class
   (0,3,0 / 0,4,0) outranks them WITHOUT !important, so the
   MultiOmics .mo-page rules (which use !important) keep their cyan.
   ===================================================== */
.elementor-kit-7 .exp-cs-slider .exp-cs-arrow,
.elementor-kit-7 .exp-cs-slider .exp-cs-arrow:hover,
.elementor-kit-7 .exp-cs-slider .exp-cs-arrow:focus,
.elementor-kit-7 .exp-cs-slider .exp-cs-arrow:active {
    background: transparent;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    min-height: 0;
    font-family: inherit;
    letter-spacing: 0;
    text-decoration: none;
}

/* Colour: white chevron at rest, bright red on hover (navy gutters) */
.elementor-kit-7 .exp-cs-slider .exp-cs-arrow,
.elementor-kit-7 .exp-cs-slider .exp-cs-arrow:focus {
    color: #ffffff;
}
.elementor-kit-7 .exp-cs-slider .exp-cs-arrow:hover {
    color: #ff3355;
}

/* Keep a visible keyboard focus ring — just not a filled pill */
.elementor-kit-7 .exp-cs-slider .exp-cs-arrow:focus { outline: none; }
.elementor-kit-7 .exp-cs-slider .exp-cs-arrow:focus-visible {
    outline: 2px solid rgba(255, 51, 85, .6);
    outline-offset: 2px;
}

/* Dots — same kit hover/focus leak (would repaint them on hover/click) */
.elementor-kit-7 .exp-cs-slider .exp-cs-dot,
.elementor-kit-7 .exp-cs-slider .exp-cs-dot:focus {
    background: rgba(255, 255, 255, .35);
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    padding: 0;
    min-height: 0;
}
.elementor-kit-7 .exp-cs-slider .exp-cs-dot:hover {
    background: rgba(255, 255, 255, .65);
}
.elementor-kit-7 .exp-cs-slider .exp-cs-dot.is-active,
.elementor-kit-7 .exp-cs-slider .exp-cs-dot.is-active:hover,
.elementor-kit-7 .exp-cs-slider .exp-cs-dot.is-active:focus {
    background: #ff3355;
}

/* =====================================================
   Atomic Image widget with link / lightbox — neutralise kit button chrome
   V4 renders a linked image as <button class="e-image-link-base">.
   .elementor-kit-7 button:hover / :focus paints it primary navy, which
   shows as a block beside the image and sticks after the lightbox closes.
   Specificity (0,3,1 / 0,4,1) beats the kit without !important.
   Site-wide: applies to every linked/lightbox image, any section.
   ===================================================== */
.elementor-kit-7 .elementor-element button.e-image-link-base,
.elementor-kit-7 .elementor-element button.e-image-link-base:hover,
.elementor-kit-7 .elementor-element button.e-image-link-base:focus,
.elementor-kit-7 .elementor-element button.e-image-link-base:active {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    background-color: transparent;
    box-shadow: none;
    line-height: 0;          /* no stray gap under the image */
    cursor: zoom-in;         /* signals "click to enlarge" */
}

/* Keyboard focus stays visible, but as an outline, not a filled block */
.elementor-kit-7 .elementor-element button.e-image-link-base:focus { outline: none; }
.elementor-kit-7 .elementor-element button.e-image-link-base:focus-visible {
    outline: 2px solid rgba(230, 32, 65, .55);
    outline-offset: 3px;
    border-radius: 8px;
}

/* The image fills the button, so the button never shows beside it */
.elementor-kit-7 .elementor-element button.e-image-link-base img {
    display: block;
    width: 100%;
    height: auto;
}

/* =====================================================
   Download block — card variant for navy sections
   [case_study_download variant="card"]
   White card on the navy band; inner form styles
   (.exp-cs-download__form) are unchanged.
   ===================================================== */
.exp-cs-download.exp-cs-download--card {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px 36px;
    margin: 0;
    max-width: 860px;
    box-shadow: 0 12px 30px -14px rgba(15, 23, 42, .28);
}
.exp-cs-download--card .exp-cs-download__title {
    font-size: 24px;
}
@media (max-width: 767px) {
    .exp-cs-download.exp-cs-download--card {
        padding: 24px 22px;
        border-radius: 14px;
    }
    .exp-cs-download--card .exp-cs-download__title {
        font-size: 20px;
    }
}

/* =====================================================
   Cloudflare Turnstile — visible "checkbox" state (v2)
   Applies to every non-footer form carrying .exp-form.
   The plugin nests the widget inside the submit wrapper
   (multi-step) or beside the button (single-step). In
   "flexible" mode it fills its container, so left there it
   overflows the card. Fix = same pattern as the footer:
   dissolve the submit wrapper (display: contents) so the
   widget becomes a full-width row ABOVE both buttons, and
   Previous / Submit stay together on the row below.
   Never force height on .cf-turnstile — collapsing it
   stops Cloudflare issuing a token.
   ===================================================== */

/* Buttons row */
.exp-form .e-form__buttons {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
}

/* Widget — its own full-width row, placed first */
.exp-form .e-form__buttons .elementor-turnstile-field.cf-turnstile {
    flex: 0 0 100%;
    order: -1;
    width: 100%;
    max-width: 100%;
    margin: 0 0 16px !important;   /* beats the plugin's inline 10px 0 15px */
}

/* Multi-step — dissolve the submit wrapper so the widget escapes it */
.exp-form .e-form__buttons .e-form__buttons__wrapper.elementor-field-type-submit {
    display: contents;
}

/* Previous left, Submit right, same row */
.exp-form .e-form__buttons .elementor-field-type-previous.e-form__buttons__wrapper {
    order: 1;
}
.exp-form .e-form__buttons .e-form__buttons__wrapper.elementor-field-type-submit .elementor-button[type="submit"] {
    order: 2;
    margin-left: auto;
}