/*
Theme Name:  Bioclinic Lab
Template:    Fixit
Description: Andrology and fertility laboratory — diagnostics, assessment packages and a sperm bank. Every section is a fixit-core block; the theme is presentation only.
Version:     1.1.0
Author:      Fixit E.E.
Author URI:  https://www.fixit.gr
Text Domain: bioclinic-lab
License:     Proprietary
Tags:        medical, laboratory, clinic, healthcare, blocks
*/

/* ---------------------------------------------------------------------------
   Tokens

   The palette is deliberately cool and quiet: this is a laboratory, and the
   subject matter is one people are uneasy discussing. Teal carries the clinical
   read without the coldness of pure blue; the sand tone keeps pages from
   looking like a hospital form.

   The `--t-*` and `--color-content-*` names are not ours — fixit-core's block
   render callbacks emit them inline (`color:var(--t-accent,#e63946)`). Defining
   them here is what makes the plugin's inline styles adopt this palette instead
   of the plugin's red default, and saves a specificity fight we would lose.
   --------------------------------------------------------------------------- */
:root {
    --bio-ink:        #0d1f24;
    --bio-ink-soft:   #3f5761;
    --bio-brand:      #10646f;
    --bio-brand-dark: #0a3f47;
    --bio-brand-tint: #e6f1f2;
    --bio-accent:     #c2603f;
    --bio-sand:       #f7f4ef;
    --bio-line:       #dfe6e7;
    --bio-white:      #ffffff;

    /* The reference site sets Averta and Noir Pro, both commercial. Commissioner
       is the closest Google family that still ships a Greek subset, which any
       Fixit template needs for the customer's own translation pass. */
    --bio-font: Commissioner, system-ui, -apple-system, "Segoe UI", sans-serif;

    --bio-radius: 14px;
    --bio-radius-sm: 8px;
    --bio-shadow: 0 1px 2px rgba(13, 31, 36, .05), 0 12px 32px -18px rgba(13, 31, 36, .35);
    --bio-max: 1180px;

    /* Consumed by fixit-core's generated CSS and inline block styles. */
    --fx-font-heading-override: var(--bio-font);
    --fx-font-body-override:    var(--bio-font);
    --fx-radius:                var(--bio-radius);
    --fx-radius-sm:             var(--bio-radius-sm);
    --fx-hero-gradient: linear-gradient(140deg, #0a3f47 0%, #10646f 100%);

    --t-accent:  var(--bio-brand);
    --t-navy:    var(--bio-ink);
    --t-primary: var(--bio-ink);
    --t-gray:    var(--bio-ink-soft);

    --color-content-primary:   #10646f;
    --color-content-secondary: #0d1f24;
    --color-content-accent:    #c2603f;
    --color-content-heading:   #0d1f24;
    --color-content-text:      #0d1f24;
    --color-content-faded:     #3f5761;
    --color-content-bg:        #ffffff;
    --color-content-soft:      #e6f1f2;
    --color-content-border:    #dfe6e7;
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--bio-font);
    color: var(--bio-ink);
    background: var(--bio-white);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--bio-font);
    color: var(--bio-ink);
    line-height: 1.15;
    margin: 0 0 .34em;
    letter-spacing: -.02em;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 700; }

p { margin: 0 0 1.1em; }
a { color: var(--bio-brand); }
img { max-width: 100%; height: auto; display: block; }

.bl-empty { padding: 96px 24px; text-align: center; }

/* The default scrollbar is a wide grey slab that cuts across the page. Thin and
   in the palette, standards property first and the WebKit fallback after. */
* { scrollbar-width: thin; scrollbar-color: rgba(16, 100, 111, .4) transparent; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(16, 100, 111, .35); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(16, 100, 111, .6); }
.bl-footer *, .fx-nav-mobile * { scrollbar-color: rgba(255, 255, 255, .32) transparent; }

/* ---------------------------------------------------------------------------
   Buttons
   fixit-core emits .t-btn-primary / .t-btn-ghost / .t-btn-secondary / .t-btn-link.
   --------------------------------------------------------------------------- */
.t-btn-primary,
.t-btn-secondary,
.t-btn-ghost,
.t-btn-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.t-btn-primary { background: var(--bio-brand); color: #fff; }
.t-btn-primary:hover { background: var(--bio-brand-dark); color: #fff; }

.t-btn-secondary { background: var(--bio-brand-tint); color: var(--bio-brand-dark); }
.t-btn-secondary:hover { background: #d5e7e9; }

.t-btn-ghost { border-color: rgba(255, 255, 255, .55); color: #fff; background: transparent; }
.t-btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }

.t-btn-link { padding: 0; border: 0; background: none; color: var(--bio-brand); }
.t-btn-link:hover { color: var(--bio-brand-dark); }

.t-btn-primary:hover, .t-btn-secondary:hover, .t-btn-ghost:hover { transform: translateY(-1px); }
.t-btn-primary:active, .t-btn-secondary:active, .t-btn-ghost:active { transform: translateY(1px) scale(.99); }
.t-btn-primary:focus-visible, .t-btn-secondary:focus-visible { outline: 2px solid var(--bio-brand); outline-offset: 3px; }
.t-hero-full .t-btn-ghost:focus-visible, .t-section--navy .t-btn-primary:focus-visible { outline-color: #fff; }

/* An arrow that leans forward on hover. Added by script so the markup the
   plugin emits is left alone. */
.bl-arrow { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .22s ease; }
.t-btn-primary:hover .bl-arrow,
.t-btn-secondary:hover .bl-arrow,
.t-btn-ghost:hover .bl-arrow { transform: translateX(3px); }

/* On a light section the ghost button needs the ink outline, not the white one. */
.t-section--white .t-btn-ghost,
.t-section--soft .t-btn-ghost {
    border-color: var(--bio-line);
    color: var(--bio-ink);
}
.t-section--white .t-btn-ghost:hover,
.t-section--soft .t-btn-ghost:hover {
    border-color: var(--bio-brand);
    color: var(--bio-brand);
    background: transparent;
}

/* ---------------------------------------------------------------------------
   Header

   fx_header() supplies the markup, the walker and the dropdown behaviour; the
   theme only recolours it, so navigation stays the plugin's responsibility.
   `.bl-header` is added through the `fx_header_classes` filter so these rules
   never leak into the editor's own chrome.
   --------------------------------------------------------------------------- */
.bl-header {
    position: sticky;
    top: 0;
    z-index: 80;
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--bio-line);
    transition: box-shadow .25s ease, background .25s ease;
}
.bl-header.is-stuck { box-shadow: 0 6px 24px -18px rgba(13, 31, 36, .6); }

.bl-header .fx-header-inner {
    max-width: var(--bio-max);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 26px;
    min-height: 80px;
}
.bl-header .fx-logo { display: inline-flex; align-items: center; text-decoration: none; }
.bl-header .fx-logo-img { width: 178px; height: auto; }
.bl-header .fx-logo-text { font-weight: 800; font-size: 1.24rem; letter-spacing: -.03em; color: var(--bio-ink); }
.bl-header .fx-nav { margin-left: auto; }

.bl-header .fx-nav-list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.bl-header .fx-nav-list > li { position: relative; }
.bl-header .fx-nav-link {
    /* fixit-core paints a grey pill on hover; the underline replaces it. */
    background: transparent;
    white-space: nowrap;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 2px;
    margin: 0 11px;
    color: var(--bio-ink);
    font-size: .93rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
}

/* A rule that draws out from the centre. Scaling a pseudo-element keeps the
   link's own box still, so nothing around it shifts on hover. */
.bl-header .fx-nav-list > li > .fx-nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}
.bl-header .fx-nav-list > li > .fx-nav-link:hover,
.bl-header .fx-nav-list > li.current-menu-item > .fx-nav-link,
.bl-header .fx-nav-list > li.current-menu-ancestor > .fx-nav-link { background: transparent; }
.bl-header .fx-nav-list > li > .fx-nav-link:hover { color: var(--bio-brand); }
.bl-header .fx-nav-list > li > .fx-nav-link:hover::before { transform: scaleX(1); }
.bl-header .fx-nav-list > li:focus-within > .fx-nav-link::before { transform: scaleX(1); }

/* The current page is marked by weight and colour, with only a short tick under
   it — a full accent rule read as a permanent hover and fought with the real one. */
.bl-header .fx-nav-list > .current-menu-item > .fx-nav-link,
.bl-header .fx-nav-list > .current-menu-ancestor > .fx-nav-link,
.bl-header .fx-nav-list > .current-menu-parent > .fx-nav-link {
    color: var(--bio-brand-dark);
    font-weight: 700;
}
.bl-header .fx-nav-list > .current-menu-item > .fx-nav-link::before,
.bl-header .fx-nav-list > .current-menu-ancestor > .fx-nav-link::before,
.bl-header .fx-nav-list > .current-menu-parent > .fx-nav-link::before {
    left: 50%;
    right: auto;
    width: 16px;
    margin-left: -8px;
    transform: scaleX(1);
    background: var(--bio-brand);
}
.bl-header .fx-nav-list > .current-menu-item > .fx-nav-link:hover::before,
.bl-header .fx-nav-list > .current-menu-ancestor > .fx-nav-link:hover::before {
    left: 0;
    right: 0;
    width: auto;
    margin-left: 0;
}

.bl-header .fx-nav-chevron { transition: transform .24s ease; opacity: .6; }
.bl-header .fx-has-mega:hover .fx-nav-chevron,
.bl-header .fx-has-mega[aria-expanded="true"] .fx-nav-chevron { transform: rotate(180deg); opacity: 1; }

.bl-header .fx-header-actions { display: flex; align-items: center; gap: 12px; }
.bl-header .fx-nav-cta {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--bio-brand);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    white-space: nowrap;
    border: 0;
    transition: background .18s ease, transform .18s ease;
}
.bl-header .fx-nav-cta:hover { background: var(--bio-brand-dark); transform: translateY(-1px); }

/* --- simple dropdown --------------------------------------------------------
   Used where a top-level item has children but the header is not in mega mode.
   -------------------------------------------------------------------------- */
.bl-header .fx-sub-menu {
    background: #fff;
    border: 1px solid var(--bio-line);
    border-radius: var(--bio-radius);
    box-shadow: var(--bio-shadow);
}
.bl-header .fx-sub-menu a {
    color: var(--bio-ink);
    font-size: .92rem;
    font-weight: 600;
    border-radius: var(--bio-radius-sm);
}
.bl-header .fx-sub-menu a:hover {
    background: var(--bio-brand-tint);
    color: var(--bio-brand-dark);
}

/* --- mega panel --------------------------------------------------------------
   A dropdown listing thirteen tests by name is a wall of text. The panel gives
   each entry an icon, a one-line summary and a target big enough to hit, with an
   introduction column on the left so the section explains itself before the list
   starts.

   The plugin's walker prints the panel and its script drives open/close through
   `hidden` and `aria-expanded`; the theme's script only rearranges what is
   already inside it (see assets/theme.js), so navigation stays the plugin's.
   -------------------------------------------------------------------------- */
.bl-header .fx-mega-menu {
    display: block;
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    width: min(940px, calc(100vw - 48px));
    transform: translate(-50%, -10px);
    background: #fff;
    border: 1px solid var(--bio-line);
    border-radius: 20px;
    box-shadow: 0 40px 80px -40px rgba(13, 31, 36, .55), 0 2px 6px rgba(13, 31, 36, .05);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .24s ease, transform .28s cubic-bezier(.22, .61, .36, 1), visibility .28s;
    overflow: hidden;
    z-index: 90;
}
/* The panel carries the plugin's `hidden` attribute until its script opens it;
   the theme animates instead of snapping, so visibility is driven by hover and
   focus rather than by the attribute. */
.bl-header .fx-mega-menu[hidden] { display: block; }

/* Bridges the gap between link and panel so the pointer never falls through. */
.bl-header .fx-has-mega::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 18px;
}
.bl-header .fx-has-mega:hover > .fx-mega-menu,
.bl-header .fx-has-mega:focus-within > .fx-mega-menu,
.bl-header .fx-has-mega.fx-mega-open > .fx-mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.bl-header .bl-mega__inner { display: grid; grid-template-columns: 300px 1fr; gap: 0; }

.bl-header .bl-mega__aside {
    position: relative;
    overflow: hidden;
    padding: 30px 28px;
    background: linear-gradient(155deg, var(--bio-brand-dark), var(--bio-brand));
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bl-header .bl-mega__aside .bl-eyebrow { color: #8fd0d5; margin: 0; }
.bl-header .bl-mega__aside h3 { color: #fff; margin: 0; font-size: 1.32rem; letter-spacing: -.02em; }
.bl-header .bl-mega__aside p { color: #b9d8db; font-size: .89rem; line-height: 1.55; margin: 4px 0 0; }
/* Two layers so the panel has depth: rings anchored bottom-right, cells drifting
   across the whole face. */
.bl-header .bl-mega__aside .bl-decor--orbit svg { width: 330px; height: 330px; right: -110px; bottom: -110px; top: auto; left: auto; transform: none; }
.bl-header .bl-mega__aside .bl-decor--cells svg { inset: 0; width: 100%; height: 100%; }
.bl-header .bl-mega__aside .bl-decor--cells { opacity: .55; }
.bl-header .bl-mega__aside > *:not(.bl-decor) { position: relative; z-index: 1; }
.bl-header .bl-mega__all {
    margin-top: auto;
    padding-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    text-decoration: none;
}
.bl-header .bl-mega__all svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .22s ease; }
.bl-header .bl-mega__all:hover svg { transform: translateX(4px); }

.bl-header .fx-mega-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    margin: 0;
    padding: 14px;
    list-style: none;
    max-height: 62vh;
    overflow-y: auto;
}
.bl-header .fx-mega-list .fx-nav-link {
    /* fixit-core's .fx-nav-link keeps links on one line; a summary has to wrap. */
    white-space: normal;
    display: grid;
    grid-template-columns: 38px 1fr 16px;
    align-items: start;
    gap: 12px;
    margin: 0;
    padding: 12px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}
.bl-header .fx-mega-list .fx-nav-link::before { content: none; }
.bl-header .fx-mega-list .fx-nav-link:hover { background: var(--bio-sand); color: var(--bio-ink); transform: translateX(2px); }

.bl-header .bl-mega__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--bio-brand-tint);
    display: grid;
    place-items: center;
    transition: background .2s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}
.bl-header .bl-mega__icon svg { width: 19px; height: 19px; fill: none; stroke: var(--bio-brand); stroke-width: 1.8; }
.bl-header .fx-mega-list .fx-nav-link:hover .bl-mega__icon { background: var(--bio-brand); transform: rotate(-6deg) scale(1.05); }
.bl-header .fx-mega-list .fx-nav-link:hover .bl-mega__icon svg { stroke: #fff; }
.bl-header .bl-mega__text { display: block; min-width: 0; overflow-wrap: anywhere; }
.bl-header .bl-mega__text strong { display: block; font-size: .93rem; font-weight: 700; color: var(--bio-ink); line-height: 1.3; }
.bl-header .bl-mega__text em { display: block; font-style: normal; font-weight: 400; font-size: .81rem; color: var(--bio-ink-soft); line-height: 1.45; margin-top: 3px; }
.bl-header .bl-mega__go { align-self: center; opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; }
.bl-header .bl-mega__go svg { width: 15px; height: 15px; fill: none; stroke: var(--bio-brand); stroke-width: 2; }
.bl-header .fx-mega-list .fx-nav-link:hover .bl-mega__go { opacity: 1; transform: none; }

/* Items arrive in sequence as the panel opens. */
@media (prefers-reduced-motion: no-preference) {
    .bl-header .fx-mega-list > li { opacity: 0; transform: translateY(6px); transition: opacity .26s ease, transform .26s ease; }
    .bl-header .fx-has-mega:hover > .fx-mega-menu .fx-mega-list > li,
    .bl-header .fx-has-mega:focus-within > .fx-mega-menu .fx-mega-list > li,
    .bl-header .fx-has-mega.fx-mega-open > .fx-mega-menu .fx-mega-list > li { opacity: 1; transform: none; }
    .bl-header .fx-mega-list > li:nth-child(1) { transition-delay: .04s; }
    .bl-header .fx-mega-list > li:nth-child(2) { transition-delay: .07s; }
    .bl-header .fx-mega-list > li:nth-child(3) { transition-delay: .10s; }
    .bl-header .fx-mega-list > li:nth-child(4) { transition-delay: .13s; }
    .bl-header .fx-mega-list > li:nth-child(5) { transition-delay: .16s; }
    .bl-header .fx-mega-list > li:nth-child(n+6) { transition-delay: .19s; }
}

@media (max-width: 1180px) {
    .bl-header .fx-mega-menu { width: calc(100vw - 40px); }
    .bl-header .bl-mega__inner { grid-template-columns: 250px 1fr; }
}

/* --- burger ---------------------------------------------------------------- */
.bl-header .fx-nav-toggle {
    display: none;
    position: relative;
    width: 42px;
    height: 42px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--bio-ink);
}
.bl-header .fx-nav-toggle span {
    position: absolute;
    left: 9px;
    width: 24px;
    height: 2px;
    background: var(--bio-ink);
    border-radius: 2px;
    transition: transform .24s cubic-bezier(.22, .61, .36, 1), opacity .18s ease;
}
.bl-header .fx-nav-toggle span:nth-child(1) { top: 14px; }
.bl-header .fx-nav-toggle span:nth-child(2) { top: 20px; }
.bl-header .fx-nav-toggle span:nth-child(3) { top: 26px; }
.bl-header .fx-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bl-header .fx-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bl-header .fx-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- mobile drawer ----------------------------------------------------------
   fixit-core's nav.js toggles aria-hidden on the drawer (its own stylesheet
   expects an .fx-open class the script never adds), so the theme keys off the
   attribute the script does set. It opens as a full panel rather than a strip:
   at seven top-level items with sublists, a dropdown-sized box would scroll
   before it finished opening.
   -------------------------------------------------------------------------- */
.fx-nav-mobile {
    position: fixed;
    top: 68px;
    bottom: 0;
    left: 0;
    z-index: 120;
    width: min(86vw, 380px);
    border-right: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 1px 0 0 rgba(255, 255, 255, .14);
    background: var(--bio-brand-dark);
    color: #fff;
    padding: 26px 22px 34px;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: none;
}
.fx-nav-mobile::before {
    /* A soft wash so the panel is not a flat slab. */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(110% 60% at 100% 0%, rgba(127, 196, 201, .18), transparent 60%);
    pointer-events: none;
}
.fx-nav-mobile[aria-hidden="false"] { display: block; }
.bl-js .fx-nav-mobile[aria-hidden="false"] { animation: bl-drawer .3s cubic-bezier(.22, .61, .36, 1) both; }

/* While the drawer is open the header drops its backdrop-filter, which
   otherwise makes the header the containing block for fixed children and traps
   the panel inside its own 68px box. */
body.fx-nav-open .bl-header {
    backdrop-filter: none;
    background: #fff;
    z-index: 130;
}
body.fx-nav-open { overflow: hidden; }

/* A scrim so the page behind reads as inactive rather than merely covered. */
body.fx-nav-open::after {
    content: "";
    position: fixed;
    inset: 68px 0 0 0;
    background: rgba(13, 31, 36, .5);
    z-index: 110;
    pointer-events: none;
}
.bl-js body.fx-nav-open::after { animation: bl-fade .3s ease both; }

@keyframes bl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bl-drawer {
    from { opacity: 0; transform: translateX(-100%); }
    to   { opacity: 1; transform: none; }
}

.fx-nav-mobile-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    counter-reset: bl-nav;
}
.fx-nav-mobile-list > li { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.fx-nav-mobile-list > li:last-child { border-bottom: 0; }
.fx-nav-mobile-list a {
    display: block;
    padding: 16px 2px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.06rem;
    letter-spacing: -.01em;
}
.fx-nav-mobile-list .current-menu-item > a { color: #7fc4c9; }

/* Each top-level entry gets an index, which turns a flat list into a sequence. */
.fx-nav-mobile-list > li > a::before {
    counter-increment: bl-nav;
    content: "0" counter(bl-nav);
    display: inline-block;
    width: 30px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: #6f9ca2;
    vertical-align: middle;
}

@media (prefers-reduced-motion: no-preference) {
    .bl-js .fx-nav-mobile[aria-hidden="false"] .fx-nav-mobile-list > li {
        animation: bl-slide-in .46s cubic-bezier(.22, .61, .36, 1) both;
    }
    @keyframes bl-slide-in { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
    .fx-nav-mobile-list > li:nth-child(1) { animation-delay: .04s; }
    .fx-nav-mobile-list > li:nth-child(2) { animation-delay: .08s; }
    .fx-nav-mobile-list > li:nth-child(3) { animation-delay: .12s; }
    .fx-nav-mobile-list > li:nth-child(4) { animation-delay: .16s; }
    .fx-nav-mobile-list > li:nth-child(5) { animation-delay: .20s; }
    .fx-nav-mobile-list > li:nth-child(n+6) { animation-delay: .24s; }
}

/* Sublists stay closed until their parent is tapped, so the menu opens at seven
   items rather than twenty-one. */
.fx-nav-mobile-list .sub-menu,
.fx-nav-mobile-list .fx-sub-menu {
    display: none;
    list-style: none;
    margin: 0 0 10px 30px;
    padding: 4px 0 4px 16px;
    border-left: 2px solid rgba(127, 196, 201, .35);
    position: static;
    background: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
}
.fx-nav-mobile-list .is-open > .sub-menu,
.fx-nav-mobile-list .is-open > .fx-sub-menu { display: block; animation: bl-drawer .2s ease both; }
.fx-nav-mobile-list .menu-item-has-children > a::after {
    content: "";
    float: right;
    width: 9px;
    height: 9px;
    margin-top: 9px;
    border-right: 2px solid #7fc4c9;
    border-bottom: 2px solid #7fc4c9;
    transform: rotate(45deg);
    transition: transform .22s ease;
}
.fx-nav-mobile-list .is-open > a::after { transform: rotate(225deg); margin-top: 13px; }
.fx-nav-mobile-list .sub-menu a,
.fx-nav-mobile-list .fx-sub-menu a {
    font-weight: 500;
    font-size: .95rem;
    color: #b6d2d5;
    padding: 10px 2px;
}
.fx-nav-mobile-list .sub-menu a::before,
.fx-nav-mobile-list .fx-sub-menu a::before { display: none; }

.fx-nav-mobile__cta {
    display: block;
    position: relative;
    margin-top: 26px;
    text-align: center;
    padding: 16px 20px;
    border-radius: 999px;
    background: #fff;
    color: var(--bio-brand-dark);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
}
.fx-nav-mobile__contact {
    position: relative;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: grid;
    gap: 8px;
    font-size: .93rem;
    color: #b6d2d5;
}
.fx-nav-mobile__contact a { color: #fff; font-weight: 600; padding: 0; font-size: .95rem; display: inline; }

/* fixit-core's floating call button sits above everything by default, which put
   it over the open drawer. It belongs under the panel and its scrim. */
.fx-call-buttons, .fx-btt, .fx-back-to-top { z-index: 60; }
body.fx-nav-open .fx-call-buttons,
body.fx-nav-open .fx-btt,
body.fx-nav-open .fx-back-to-top { opacity: 0; pointer-events: none; }

@media (max-width: 1080px) {
    .bl-header .fx-nav { display: none; }
    .bl-header .fx-nav-toggle { display: inline-flex; }
    .bl-header .fx-header-inner { gap: 12px; padding: 0 18px; min-height: 68px; }
    .bl-header .fx-logo-img { width: 148px; }
    .bl-header .fx-nav-cta { padding: 10px 16px; font-size: .84rem; }
}

/* Below this the CTA and the burger cannot both fit, and the burger has to win:
   the drawer already carries a booking link at the end. */
@media (max-width: 620px) {
    .bl-header .fx-nav-cta { display: none; }
    .bl-header .fx-logo-img { width: 136px; }
    .bl-header .fx-header-inner { padding: 0 16px; }
    .bl-header .fx-header-actions { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-nav-mobile[aria-hidden="false"],
    body.fx-nav-open::after { animation: none; }
    .bl-header .fx-nav-list > li > .fx-nav-link::before { transition: none; }
}

/* ---------------------------------------------------------------------------
   Sections — the fixit-core block shell
   Every fx/* block renders `.t-section > .t-container`.
   --------------------------------------------------------------------------- */
.t-section { position: relative; padding: clamp(44px, 5.2vw, 76px) 0; }
.t-section--white { background: var(--bio-white); }
.t-section--soft  { background: var(--bio-sand); }
.t-section--navy  { background: var(--bio-brand-dark); color: #dbe9ea; }

.t-section--navy h2,
.t-section--navy h3,
.t-section--navy .t-card-title { color: #fff; }
.t-section--navy .t-card-body,
.t-section--navy .t-section-subtitle { color: #b9d3d6; }
.t-section--navy .t-section-label { color: #7fc4c9; }

.t-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--bio-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* --- section heads --------------------------------------------------------- */
.t-section-label {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bio-brand);
    margin-bottom: 8px;
}
/* The rule under the label: two colours, so a section head has one warm note in
   an otherwise cool page. */
.t-section-label::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    border-radius: 2px;
    margin: 8px 0 12px;
    background: linear-gradient(90deg, var(--bio-brand), var(--bio-accent));
}
.t-section--navy .t-section-label::after { background: linear-gradient(90deg, #7fc4c9, var(--bio-accent)); }

/* nimbus-base centres the section head. A page that reads as a document rather
   than as a poster keeps its headings on the same left edge as everything else. */
.t-section-title {
    max-width: 22ch;
    margin: 0 0 .3em;
    text-align: left;
}
.t-section-subtitle {
    font-size: clamp(1.02rem, 1.5vw, 1.18rem);
    color: var(--bio-ink-soft);
    max-width: 66ch;
    margin: 0 0 clamp(20px, 2.4vw, 32px);
    text-align: left;
}

/* --- slanted section edges ---------------------------------------------------
   A slanted edge is only meaningful where the ground actually changes colour.
   Two tinted bands in a row share a background, so a cut between them draws a
   line through a continuous surface. The cut is therefore applied per edge:
   the top only when the section above is a different tone, the bottom only when
   the section below is. :has() does the look-ahead; where it is unsupported the
   section renders square, which is the correct fallback rather than a broken one.
   -------------------------------------------------------------------------- */
.t-section--soft,
.t-section--navy {
    --bl-slant: 2.4vw;
    --bl-cut-top: 0px;
    --bl-cut-bottom: 0px;
    clip-path: polygon(0 var(--bl-cut-top), 100% 0, 100% calc(100% - var(--bl-cut-bottom)), 0 100%);
    padding-top: calc(clamp(44px, 5.2vw, 76px) + var(--bl-cut-top));
    padding-bottom: calc(clamp(44px, 5.2vw, 76px) + var(--bl-cut-bottom));
}

.t-hero-full + .t-section--soft,
.t-hero-full + .t-section--navy,
.t-section--white + .t-section--soft,
.t-section--white + .t-section--navy,
.t-section--soft + .t-section--navy,
.t-section--navy + .t-section--soft {
    --bl-cut-top: var(--bl-slant);
    margin-top: calc(var(--bl-slant) * -0.55);
}

.t-section--soft:not(:has(+ .t-section--soft)),
.t-section--navy:not(:has(+ .t-section--navy)) {
    --bl-cut-bottom: var(--bl-slant);
    margin-bottom: calc(var(--bl-slant) * -0.55);
}

@media (max-width: 700px) {
    .t-section--soft, .t-section--navy { --bl-slant: 4vw; }
}
@media (prefers-reduced-motion: reduce) {
    .t-section--soft, .t-section--navy { --bl-slant: 1.4vw; }
}

/* ---------------------------------------------------------------------------
   Grid and cards
   --------------------------------------------------------------------------- */
.t-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-top: clamp(20px, 2.4vw, 32px);
}
/* auto-fit alone keeps adding columns on a wide screen, so the requested count
   is pinned above the breakpoint and left to reflow below it. */
@media (min-width: 900px) {
    .t-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .t-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .t-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.t-card {
    position: relative;
    isolation: isolate;
    background: #fff;
    border: 1px solid var(--bio-line);
    border-radius: var(--bio-radius);
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color .18s ease, box-shadow .28s ease, transform .28s cubic-bezier(.22, .61, .36, 1);
}
.t-card--link:hover {
    border-color: var(--bio-brand);
    box-shadow: var(--bio-shadow);
    transform: translateY(-2px);
}

/* Card grounds: each card carries a quarter-arc drawn from its own corner.
   Because every card in a row uses the same geometry at the same scale, the arcs
   line up across the row and read as one continuous figure passing behind them
   rather than as three separate ornaments. Painted as background images so no
   extra element is needed per card. */
.t-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-image:
        radial-gradient(120% 90% at 108% -18%, rgba(16, 100, 111, .09), transparent 58%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 220'%3E%3Cg fill='none' stroke='%2310646f' stroke-opacity='.14' stroke-width='1.2'%3E%3Cpath d='M320 -40 A 190 190 0 0 1 130 150'/%3E%3Cpath d='M320 -6 A 156 156 0 0 1 164 150'/%3E%3Cpath d='M320 28 A 122 122 0 0 1 198 150'/%3E%3C/g%3E%3Ccircle cx='283' cy='36' r='3' fill='%23c2603f' fill-opacity='.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 62% auto;
    opacity: .9;
    transition: opacity .3s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}
.t-card:hover::before { opacity: 1; transform: scale(1.06) rotate(-1.5deg); }

.t-card-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--bio-brand-tint);
    color: var(--bio-brand);
}
.t-card-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--bio-brand); stroke-width: 1.7; }

.t-card-img {
    margin: -28px -26px 4px;
    border-radius: var(--bio-radius) var(--bio-radius) 0 0;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}
.t-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.t-card:hover .t-card-img img { transform: scale(1.04); }

.t-card-title { font-size: 1.08rem; margin: 0; }
.t-card-body { color: var(--bio-ink-soft); font-size: .96rem; margin: 0; }

/* Per-card facts (fx/services meta1 / meta2) — a turnaround and a sample type,
   which is what a patient actually scans a test card for. */
.t-card-meta { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.t-card-meta-item {
    font-size: .78rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--bio-brand-tint);
    color: var(--bio-brand-dark);
}

/* The "Learn more" affordance, added by script to cards that link somewhere. */
.bl-card-more {
    margin-top: auto;
    padding-top: 12px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--bio-brand);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.bl-card-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .22s ease; }
.t-card:hover .bl-card-more svg { transform: translateX(3px); }

.t-section--soft .t-card { border-color: #e7ded2; }
.t-section--navy .t-card {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
}
.t-section--navy .t-card::before { opacity: .35; }
.t-section--navy .t-card-icon { background: rgba(255, 255, 255, .12); color: #7fc4c9; }
.t-section--navy .t-card-icon svg { stroke: #7fc4c9; }
.t-section--navy .t-card-meta-item { background: rgba(255, 255, 255, .12); color: #cfe6e8; }

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */
.t-hero-full {
    position: relative;
    display: flex;
    align-items: center;
    color: #fff;
    background-color: var(--bio-brand-dark);
    background-image: linear-gradient(140deg, #0a3f47 0%, #10646f 100%);
    padding: clamp(64px, 8vw, 120px) 0;
    overflow: hidden;
    /* The hero hands off to the page with the same gesture as the sections. */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
}
/* The block prints its photograph as a background-image with a flat black
   overlay baked in. A second layer in the brand tone, angled so the text side
   is dense and the far side stays open, is what makes it read as this site
   rather than as a stock photo with a scrim. */
.t-hero-full::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(10, 63, 71, .92) 12%, rgba(10, 63, 71, .66) 52%, rgba(10, 63, 71, .34) 100%);
    pointer-events: none;
}
/* nimbus-base lays the hero container out as a flex column with
   `align-items:flex-start`, which shrink-wraps every child — the figures strip
   then sizes to its longest caption instead of spanning the column. */
.t-hero-full > .t-container {
    position: relative;
    z-index: 2;
    align-items: stretch;
    gap: 12px;
}
.t-hero-full h1 { color: #fff; max-width: 18ch; }
.t-hero-full p {
    color: #cfe3e5;
    font-size: clamp(1.02rem, 1.5vw, 1.2rem);
    max-width: 60ch;
}
/* The plugin paints this as an accent pill. A laboratory's eyebrow is a label,
   not a badge, so it loses the capsule and keeps only the letterspacing. */
.t-hero-tag {
    display: inline-block;
    align-self: flex-start;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #7fc4c9;
    margin: 0;
}
.t-hero-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.t-hero-full .t-btn-primary { background: #fff; color: var(--bio-brand-dark); }
.t-hero-full .t-btn-primary:hover { background: var(--bio-brand-tint); color: var(--bio-brand-dark); }

/* --- the figures strip -------------------------------------------------------
   fx/stats renders its own section. When one follows the hero directly the
   script lifts its grid into the hero, which is where the local build carries
   these numbers: over the photograph, as the last thing before the fold. The
   section keeps working on its own wherever it is not lifted.
   -------------------------------------------------------------------------- */
.bl-hero-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, .16);
    border-radius: var(--bio-radius);
    overflow: hidden;
    margin-top: clamp(30px, 3.4vw, 44px);
    position: relative;
    z-index: 1;
}
.bl-hero-facts > div {
    position: relative;
    overflow: hidden;
    background: rgba(10, 63, 71, .72);
    padding: 24px 22px;
    text-align: left;
}
.bl-hero-facts .t-stat-number,
.bl-hero-facts > div > div:first-child {
    display: block;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem) !important;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.bl-hero-facts > div > div:last-child { font-size: .88rem; color: #a9cdd0; margin-top: 2px !important; }

/* A hairline that sweeps across the figures once they have landed. */
.bl-hero-facts > div::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--bio-accent), transparent);
    transform: scaleX(0);
    transform-origin: 0 50%;
}
@keyframes bl-sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- hero entrance -----------------------------------------------------------
   The hero is above the fold, so it plays on load rather than on scroll: the
   eyebrow, headline, copy, buttons and each figure arrive in reading order.
   --bl-in carries the position in that sequence.

   An entrance that starts from opacity 0 fails closed: if animations never run
   the content is simply gone. The hidden start is therefore scoped to .bl-js,
   which a one-line inline script adds, so the default state of the markup is
   always the finished one.
   -------------------------------------------------------------------------- */
@keyframes bl-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
    .bl-js .bl-in { animation: bl-rise .72s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--bl-in, 1) * .11s); }
    .bl-js .bl-hero-facts > div::after { animation: bl-sweep 1.1s ease calc(1s + var(--bl-in, 1) * .09s) both; }
}

/* ---------------------------------------------------------------------------
   Process (fx/process) — the referral steps

   The block prints each number with an inline font-size and colour. The script
   moves that inline style onto a class so the steps can become a joined list
   with circular markers instead of four floating numerals — restyling it in CSS
   alone would need !important on every declaration.
   --------------------------------------------------------------------------- */
.bl-steps { display: grid; gap: 2px; background: var(--bio-line); border-radius: var(--bio-radius); overflow: hidden; margin-top: clamp(20px, 2.4vw, 32px); }
.bl-steps > div {
    position: relative;
    overflow: hidden;
    background: #fff;
    padding: 28px 26px;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 20px;
    align-items: start;
}
.bl-step-n {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bio-brand);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: .98rem;
    line-height: 1;
}
.bl-steps .t-card-title { margin: 0 0 .3em; font-size: 1.05rem; grid-column: 2; }
.bl-steps .t-card-body { margin: 0; font-size: .95rem; grid-column: 2; }
/* A hairline spine so the steps read as one sequence. */
.bl-steps > div::before {
    content: "";
    position: absolute;
    left: 47px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--bio-line) 12%, var(--bio-line) 88%, transparent);
}
.bl-steps > div:first-child::before { top: 50%; }
.bl-steps > div:last-child::before { bottom: 50%; }

.t-section--soft .bl-steps { background: #e7ded2; }
.t-section--navy .bl-steps { background: rgba(255, 255, 255, .16); }
.t-section--navy .bl-steps > div { background: rgba(10, 63, 71, .9); }

@media (max-width: 560px) {
    .bl-steps > div { grid-template-columns: 1fr; gap: 12px; }
    .bl-steps > div::before { display: none; }
    .bl-steps .t-card-title, .bl-steps .t-card-body { grid-column: 1; }
}

/* ---------------------------------------------------------------------------
   Values (fx/values) — a rule over each, rather than a card
   --------------------------------------------------------------------------- */
.bl-values > div {
    border-top: 3px solid var(--bio-brand);
    padding-top: 18px;
}
.bl-values .t-card-icon { margin-bottom: 10px; }
.bl-values .t-card-title { font-size: 1.02rem; margin-bottom: .35em; }
.bl-values .t-card-body { font-size: .93rem; }
.t-section--navy .bl-values > div { border-top-color: #7fc4c9; }

/* ---------------------------------------------------------------------------
   Pricing (fx/pricing) — assessment packages
   --------------------------------------------------------------------------- */
.t-pricing-badge {
    letter-spacing: .1em !important;
    text-transform: uppercase;
}
.t-card-summary { color: var(--bio-ink-soft); font-size: .95rem; margin: 0; }
.t-card-note {
    margin-top: auto;
    padding-top: 10px;
    color: var(--bio-ink-soft);
    font-size: .86rem;
}
.t-price { color: var(--bio-brand-dark); }
.t-price-period { color: var(--bio-ink-soft); }
/* The features list is what a package actually is, so it reads as a checklist
   rather than as a paragraph broken into lines. */
.bl-features { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.bl-features li { display: grid; grid-template-columns: 19px 1fr; gap: 11px; align-items: start; font-size: .94rem; padding: 0; }
.bl-features svg { width: 19px; height: 19px; margin-top: 3px; fill: none; stroke: var(--bio-brand); stroke-width: 2.2; }
.t-section--navy .bl-features svg { stroke: #7fc4c9; }

/* The featured card inverts the accent so the row still has one focal point. */
.bl-pack-featured::before {
    background-image:
        radial-gradient(120% 90% at 108% -18%, rgba(194, 96, 63, .10), transparent 58%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 220'%3E%3Cg fill='none' stroke='%23c2603f' stroke-opacity='.2' stroke-width='1.2'%3E%3Cpath d='M320 -40 A 190 190 0 0 1 130 150'/%3E%3Cpath d='M320 -6 A 156 156 0 0 1 164 150'/%3E%3Cpath d='M320 28 A 122 122 0 0 1 198 150'/%3E%3C/g%3E%3Ccircle cx='283' cy='36' r='3.4' fill='%2310646f' fill-opacity='.35'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   Team (fx/team)
   --------------------------------------------------------------------------- */
.bl-team .t-card { padding-top: 0; border: 0; background: none; gap: 10px; }
.bl-team .t-card::before { content: none; }
.bl-team .t-card-img {
    margin: 0;
    border-radius: var(--bio-radius);
    aspect-ratio: 4 / 5;
    max-height: 340px;
    background: var(--bio-brand-tint);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease;
}
.bl-team .t-card:hover .t-card-img { transform: translateY(-4px); box-shadow: var(--bio-shadow); }
.bl-team .t-card-title { margin: 4px 0 0; font-size: 1.06rem; }
.bl-team .bl-role { color: var(--bio-brand); font-weight: 700; font-size: .88rem; }
.bl-team .t-card-body { font-size: .89rem; }
.t-team-social { display: flex; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.t-team-social a, .t-team-social button { color: var(--bio-ink-soft); font-size: .86rem; font-weight: 600; }
.t-team-social a:hover, .t-team-social button:hover { color: var(--bio-brand); }
.t-team-bio-full { color: var(--bio-ink-soft); font-size: .94rem; }

/* ---------------------------------------------------------------------------
   FAQ (fx/faq)

   The block prints `details` and `summary` with inline styles. The script moves
   those onto classes rather than fighting them with !important, and adds the
   mark; what is left here is only the look of the result.
   --------------------------------------------------------------------------- */
.bl-faq { border-top: 1px solid var(--bio-line); max-width: 800px; margin: clamp(20px, 2.4vw, 32px) auto 0; }
.bl-faq details { border-bottom: 1px solid var(--bio-line); }
.bl-faq summary {
    cursor: pointer;
    padding: 20px 52px 20px 0;
    font-weight: 700;
    font-size: 1.04rem;
    list-style: none;
    position: relative;
    transition: color .18s ease;
}
.bl-faq summary::-webkit-details-marker { display: none; }
.bl-faq summary:hover { color: var(--bio-brand); }
.bl-faq summary:focus-visible { outline: 2px solid var(--bio-brand); outline-offset: 3px; border-radius: 6px; }

/* A plus that becomes a minus — clearer than a chevron about what it will do. */
.bl-faq__mark {
    position: absolute;
    right: 4px;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    border-radius: 50%;
    border: 1.5px solid var(--bio-line);
    transition: background .22s ease, border-color .22s ease, transform .28s cubic-bezier(.22, .61, .36, 1);
}
.bl-faq__mark::before, .bl-faq__mark::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--bio-brand);
    border-radius: 2px;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1), background .22s ease;
}
.bl-faq__mark::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.bl-faq__mark::after { width: 2px; height: 12px; transform: translate(-50%, -50%); }
.bl-faq summary:hover .bl-faq__mark { border-color: var(--bio-brand); background: var(--bio-brand-tint); }
.bl-faq details[open] summary { color: var(--bio-brand); }
.bl-faq details[open] .bl-faq__mark { background: var(--bio-brand); border-color: var(--bio-brand); transform: rotate(180deg); }
.bl-faq details[open] .bl-faq__mark::before { background: #fff; }
.bl-faq details[open] .bl-faq__mark::after { transform: translate(-50%, -50%) scaleY(0); }

.bl-faq__answer { overflow: hidden; }
.bl-faq__answer > div { color: var(--bio-ink-soft); padding: 0 52px 22px 0; margin: 0; max-width: 78ch; line-height: 1.7; }

.t-section--navy .bl-faq { border-top-color: rgba(255, 255, 255, .18); }
.t-section--navy .bl-faq details { border-bottom-color: rgba(255, 255, 255, .18); }
.t-section--navy .bl-faq summary { color: #fff; }
.t-section--navy .bl-faq__answer > div { color: #b9d3d6; }

@media (prefers-reduced-motion: reduce) {
    .bl-faq__mark, .bl-faq__mark::before, .bl-faq__mark::after { transition: none; }
}

/* ---------------------------------------------------------------------------
   Stats (fx/stats), where it stays a section of its own
   --------------------------------------------------------------------------- */
.t-stat-number {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--bio-brand);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.t-section--navy .t-stat-number { color: #7fc4c9; }

/* ---------------------------------------------------------------------------
   Text + image (fx/text-image)
   The block lays this out with inline flex styles; the theme only dresses the
   picture and keeps the column from running wider than it reads.
   --------------------------------------------------------------------------- */
.t-section img[loading] { border-radius: var(--bio-radius); }
.bl-figure {
    border-radius: var(--bio-radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--bio-brand-tint);
}
.bl-figure img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .8s cubic-bezier(.22, .61, .36, 1); }

/* ---------------------------------------------------------------------------
   Contact (fx/contact)

   Details on a brand panel beside the form: the two halves of "reach us" read
   as one object instead of a list of boxes above a beige rectangle. The script
   tags the two cards the block emits; everything else is here.
   --------------------------------------------------------------------------- */
.bl-contact { gap: 0 !important; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 80px -50px rgba(13, 31, 36, .5); }
@media (min-width: 900px) { .bl-contact { grid-template-columns: 0.85fr 1.15fr; } }

.bl-contact__side {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--bio-brand-dark), var(--bio-brand));
    color: #fff;
    padding: clamp(28px, 3.4vw, 44px);
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bl-contact__side::before { content: none; }
.bl-contact__side > *:not(.bl-decor) { position: relative; z-index: 1; }
/* On this small a panel the motif is a texture, not a figure. */
.bl-contact__side .bl-decor { opacity: .3; }
.bl-contact__side h3 { color: #fff; font-size: 1.4rem; margin: 0 0 4px; }
.bl-contact__side > p { color: #b9d8db; font-size: .95rem; line-height: 1.6; margin: 0 0 12px; }

.bl-contact__line {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 13px;
    align-items: start;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    margin: 0;
}
.bl-contact__line:last-of-type { border-bottom: 0; }
.bl-contact__line > span:first-child { width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; }
.bl-contact__line svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.7; }
.bl-contact__line em { display: block; font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7fc4c9; }
.bl-contact__line strong, .bl-contact__line a { display: block; color: #fff; font-weight: 700; font-size: 1.04rem; text-decoration: none; margin-top: 2px; letter-spacing: -.01em; }
.bl-contact__line a:hover { color: #b9e6ea; }

.bl-contact__form {
    border-radius: 0;
    border: 0;
    box-shadow: none;
    background: #fff;
    padding: clamp(24px, 3vw, 38px);
}
.bl-contact__form::before { content: none; }

/* Inputs carry their label inside the field's own frame, so the form reads as a
   column of objects rather than a ladder of text and boxes. */
.bl-contact__form form { display: grid; gap: 16px; }
.bl-contact__form p { margin: 0; }
.bl-contact__form label { display: block; position: relative; }
.bl-contact__form input:not([type="submit"]),
.bl-contact__form select,
.bl-contact__form textarea {
    font: inherit;
    font-size: 1rem;
    width: 100%;
    padding: 26px 15px 12px;
    border: 1.5px solid var(--bio-line);
    border-radius: 13px;
    background: var(--bio-sand);
    color: var(--bio-ink);
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    appearance: none;
}
.bl-contact__form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2310646f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
    padding-right: 40px;
}
.bl-contact__form textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.bl-contact__form input:hover, .bl-contact__form select:hover, .bl-contact__form textarea:hover { border-color: #c3d3d5; }
.bl-contact__form input:focus, .bl-contact__form select:focus, .bl-contact__form textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--bio-brand);
    box-shadow: 0 0 0 4px rgba(16, 100, 111, .12);
}
.bl-contact__form input::placeholder, .bl-contact__form textarea::placeholder { color: transparent; }

/* The floating caption is the field's own placeholder, lifted into the frame. */
.bl-field-label {
    position: absolute;
    top: 8px;
    left: 15px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--bio-ink-soft);
    pointer-events: none;
    transition: color .18s ease;
    z-index: 1;
}
.bl-contact__form label:focus-within .bl-field-label { color: var(--bio-brand); }

.bl-contact__form button[type="submit"],
.bl-contact__form input[type="submit"] {
    justify-self: start;
    font-size: 1rem;
    padding: 16px 30px;
    border: 0;
    border-radius: 999px;
    background: var(--bio-brand);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}
.bl-contact__form button[type="submit"]:hover,
.bl-contact__form input[type="submit"]:hover { background: var(--bio-brand-dark); transform: translateY(-1px); }

.bl-form-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .84rem;
    color: var(--bio-ink-soft);
    margin: 0;
    line-height: 1.5;
}
.bl-form-note svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; fill: none; stroke: var(--bio-brand); stroke-width: 1.7; }

/* Contact Form 7's own furniture, in the palette. */
.wpcf7 form .wpcf7-response-output {
    margin: 8px 0 0;
    padding: 15px 17px;
    border: 0;
    border-radius: 12px;
    background: #e4f3ec;
    color: #1c5c40;
    font-size: .94rem;
    font-weight: 600;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { background: #fbeceb; color: #8c2f22; }
.wpcf7-not-valid-tip { color: #8c2f22; font-size: .82rem; font-weight: 600; margin-top: 6px; }
.wpcf7-spinner { margin-left: 10px; }

/* ---------------------------------------------------------------------------
   Journal (fx/latest-posts)
   The block prints its cards with inline styles; the script strips those and
   the theme gives them the same treatment as every other card.
   --------------------------------------------------------------------------- */
.bl-post { padding: 0; border: 0; background: none; gap: 12px; }
.bl-post::before { content: none; }
.bl-post .bl-post__img {
    display: block;
    border-radius: var(--bio-radius);
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--bio-brand-tint);
}
.bl-post .bl-post__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.bl-post:hover .bl-post__img img { transform: scale(1.04); }
.bl-post .bl-post__date { font-size: .82rem; color: var(--bio-ink-soft); }
.bl-post .t-card-title { font-size: 1.06rem; margin: 0; }
.bl-post .t-card-title a { color: inherit; text-decoration: none; }
.bl-post:hover .t-card-title a { color: var(--bio-brand); }

/* ---------------------------------------------------------------------------
   Carousel rail
   A real scrolling list with snap points, so it works before the script loads.
   --------------------------------------------------------------------------- */
.bl-rail { position: relative; margin-top: clamp(20px, 2.4vw, 32px); }
.bl-rail__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(268px, 1fr);
    gap: 18px;
    margin: 0;
    padding: 4px 4px 6px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
}
/* The rail already states its position twice — the arrows disable at the ends
   and the cut-off card shows there is more — so the native scrollbar is a third,
   uglier copy of the same information. Hidden, not disabled: the list still
   scrolls by touch, trackpad, arrow key and screen reader. */
.bl-rail__track { scrollbar-width: none; -ms-overflow-style: none; }
.bl-rail__track::-webkit-scrollbar { width: 0; height: 0; display: none; }
.bl-rail__track:focus-visible { outline: 2px solid var(--bio-brand); outline-offset: 4px; border-radius: 14px; }
.bl-rail__item { scroll-snap-align: start; display: flex; }
.bl-rail__item > * { width: 100%; }
@media (min-width: 900px) { .bl-rail__track { grid-auto-columns: minmax(300px, 1fr); } }

/* Arrows on the edges of the rail, over the point where the cards run out. */
.bl-rail__btn {
    position: absolute;
    top: calc(50% - 24px);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--bio-line);
    background: #fff;
    color: var(--bio-brand);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 12px 28px -14px rgba(13, 31, 36, .55);
    transition: opacity .2s ease, transform .16s ease, background .18s ease, border-color .18s ease;
}
.bl-rail__btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; }
.bl-rail__btn--prev { left: -22px; }
.bl-rail__btn--prev svg { transform: rotate(180deg); }
.bl-rail__btn--next { right: -22px; }
.bl-rail__btn:hover { background: var(--bio-brand); border-color: var(--bio-brand); color: #fff; }
.bl-rail__btn:active { transform: scale(.93); }
.bl-rail__btn:focus-visible { outline: 2px solid var(--bio-brand); outline-offset: 3px; }
/* A control with nothing to do must not be visible; this state has to win over
   anything the reveal system layers on top. */
.bl-rail__btn[disabled] { opacity: 0 !important; pointer-events: none; visibility: hidden; }

/* The cut-off card is what tells you there is more; a soft edge keeps it from
   looking like a rendering error. */
.bl-rail::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -1px;
    width: 56px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--bl-rail-fade, #fff));
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 2;
}
.bl-rail.has-more::after { opacity: 1; }
.t-section--soft { --bl-rail-fade: var(--bio-sand); }
.t-section--navy { --bl-rail-fade: var(--bio-brand-dark); }

@media (max-width: 1320px) {
    .bl-rail__btn--prev { left: 6px; }
    .bl-rail__btn--next { right: 6px; }
}
@media (max-width: 640px) {
    /* Swiping is the natural gesture here, and the buttons only cover cards. */
    .bl-rail__btn { display: none; }
}

/* ---------------------------------------------------------------------------
   Vector decorations

   One motif per section. They sit behind the content, never take pointer
   events, and every animation is opt-in through prefers-reduced-motion so the
   finished state is what renders by default. Injected by script, because the
   plugin's blocks emit no hook to hang them on and a decoration is presentation
   rather than content.
   --------------------------------------------------------------------------- */
.bl-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.bl-decor svg { position: absolute; }
.bl-decor path, .bl-decor circle { fill: none; stroke: var(--bl-decor-line, rgba(16, 100, 111, .14)); stroke-width: 1.4; }
.bl-decor circle { fill: var(--bl-decor-fill, rgba(16, 100, 111, .07)); stroke: none; }

/* On dark ground the motif switches to light without a second markup path. */
.t-hero-full .bl-decor,
.t-section--navy .bl-decor,
.bl-mega__aside .bl-decor,
.bl-contact__side .bl-decor {
    --bl-decor-line: rgba(255, 255, 255, .42);
    --bl-decor-fill: rgba(255, 255, 255, .55);
}
.t-section--soft .bl-decor { --bl-decor-line: rgba(16, 100, 111, .16); --bl-decor-fill: rgba(16, 100, 111, .08); }

/* Placement */
.bl-decor--at-right svg { right: -8%; top: 50%; transform: translateY(-50%); width: min(46%, 640px); height: auto; }
.bl-decor--at-left  svg { left: -8%;  top: 50%; transform: translateY(-50%); width: min(46%, 560px); height: auto; }
.bl-decor--at-full  svg { inset: 0; width: 100%; height: 100%; }
.bl-decor--at-bottom svg { left: 0; right: 0; bottom: 0; width: 100%; height: 120px; }

/* --- strand --------------------------------------------------------------- */
@keyframes bl-draw { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
@keyframes bl-rung { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
    .bl-decor__draw { stroke-dasharray: 1400; animation: bl-draw 2.8s cubic-bezier(.4, 0, .2, 1) .2s both; }
    .bl-decor__draw--2 { animation-delay: .45s; }
    .bl-decor--strand .bl-decor__rung, .bl-decor--strand circle { animation: bl-rung .8s ease 1.7s both; }
}

/* --- waves ---------------------------------------------------------------- */
@keyframes bl-drift { from { transform: translateX(0); } to { transform: translateX(-720px); } }
.bl-decor__wave { stroke-width: 1.8; }
.bl-decor--wave svg { width: 200%; }
@media (prefers-reduced-motion: no-preference) {
    .bl-decor__wave    { animation: bl-drift 26s linear infinite; }
    .bl-decor__wave--2 { animation-duration: 34s; opacity: .7; }
    .bl-decor__wave--3 { animation-duration: 44s; opacity: .45; }
}

/* --- cells ---------------------------------------------------------------- */
.bl-decor__cell { fill: none; stroke: var(--bl-decor-line, rgba(16, 100, 111, .14)); stroke-width: 1.5; }
.bl-decor__nucleus { fill: var(--bl-decor-fill, rgba(16, 100, 111, .07)); stroke: none; }
@keyframes bl-breathe { 0%, 100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.13); opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
    .bl-decor__cell { transform-box: fill-box; transform-origin: 50% 50%; animation: bl-breathe 7s ease-in-out infinite; }
}

/* --- orbit ---------------------------------------------------------------- */
.bl-decor--orbit circle { fill: none; stroke: var(--bl-decor-line, rgba(16, 100, 111, .14)); }
.bl-decor__dot { fill: var(--bl-decor-fill, rgba(16, 100, 111, .07)) !important; stroke: none !important; }
@keyframes bl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
    .bl-decor__spin { transform-box: fill-box; transform-origin: 50% 50%; animation: bl-spin 26s linear infinite; }
    .bl-decor__spin--rev { animation-duration: 34s; animation-direction: reverse; }
    .bl-decor__spin--slow { animation-duration: 46s; }
}

/* --- pulse ---------------------------------------------------------------- */
.bl-decor__pulse { stroke: var(--bl-decor-line, rgba(16, 100, 111, .14)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes bl-trace { 0% { stroke-dashoffset: 1200; } 55%, 100% { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
    .bl-decor__pulse { stroke-dasharray: 1200; animation: bl-trace 6s cubic-bezier(.5, 0, .2, 1) infinite; }
}

/* --- dot grid ------------------------------------------------------------- */
.bl-decor__pip { fill: var(--bl-decor-fill, rgba(16, 100, 111, .07)); stroke: none; }
@keyframes bl-twinkle { 0%, 100% { opacity: .28; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
    .bl-decor__pip { animation: bl-twinkle 5.5s ease-in-out infinite; }
}

/* ---------------------------------------------------------------------------
   Motion

   fixit-core owns the reveal mechanism: it prints the [data-fx-reveal] base
   styles, the IntersectionObserver and the .fx-revealed class, and it honours
   prefers-reduced-motion. What the theme adds is the staggering — the effect
   only reads as intentional when items in a row arrive in sequence rather than
   all at once.
   --------------------------------------------------------------------------- */
.bl-anim [data-fx-reveal] > .t-grid > *,
.bl-anim [data-fx-reveal] > .bl-steps > *,
.bl-anim [data-fx-reveal] > .bl-faq > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s ease;
}
.bl-anim [data-fx-reveal].fx-revealed > .t-grid > *,
.bl-anim [data-fx-reveal].fx-revealed > .bl-steps > *,
.bl-anim [data-fx-reveal].fx-revealed > .bl-faq > * { opacity: 1; transform: none; }

/* Six steps is enough: past that the last card feels late rather than staged. */
.bl-anim [data-fx-reveal] > * > *:nth-child(1) { transition-delay: .04s; }
.bl-anim [data-fx-reveal] > * > *:nth-child(2) { transition-delay: .10s; }
.bl-anim [data-fx-reveal] > * > *:nth-child(3) { transition-delay: .16s; }
.bl-anim [data-fx-reveal] > * > *:nth-child(4) { transition-delay: .22s; }
.bl-anim [data-fx-reveal] > * > *:nth-child(5) { transition-delay: .28s; }
.bl-anim [data-fx-reveal] > * > *:nth-child(n+6) { transition-delay: .34s; }

/* Media settles in rather than appearing: a 1.05 scale over the reveal reads as
   the photograph coming to rest. */
.bl-anim [data-fx-reveal] .bl-figure img { transform: scale(1.05); }
.bl-anim [data-fx-reveal].fx-revealed .bl-figure img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
    /* Undo only the stagger, and only on the elements it applies to. A blanket
       rule also hits anything else nested two levels in — including a rail arrow
       that had deliberately hidden itself at the end of the track. */
    .bl-anim [data-fx-reveal] > .t-grid > *,
    .bl-anim [data-fx-reveal] > .bl-steps > *,
    .bl-anim [data-fx-reveal] > .bl-faq > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .t-card, .t-btn-primary, .t-btn-ghost, .bl-team .t-card-img { transition: none; }
    .bl-anim [data-fx-reveal] .bl-figure img { transform: none; }
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.bl-footer {
    position: relative;
    background: var(--bio-ink);
    color: #94a9b0;
    padding: clamp(56px, 7vw, 84px) 0 26px;
    margin-top: auto;
    overflow: hidden;
}
.bl-footer > .t-container { position: relative; z-index: 1; }
.bl-footer h3,
.bl-footer h4 { color: #fff; }
.bl-footer h4 {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.bl-footer a { color: #94a9b0; text-decoration: none; transition: color .18s ease; }
.bl-footer a:hover { color: #fff; }
.bl-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: .93rem; }
.bl-footer li { line-height: 1.5; padding: 0; }

/* Five columns: brand and accreditations, the company links, the legal links,
   contact, and the booking prompt. auto-fit would drop the fifth onto its own
   row, so the track list is written out. */
.bl-footer .t-rich-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr .95fr .95fr 1.15fr 1fr;
    gap: 40px 30px;
}
.bl-footer-logo { max-width: 190px; height: auto; filter: brightness(0) invert(1); margin-bottom: 16px; }
.bl-footer-wordmark { font-size: 1.4rem; margin-bottom: 14px; }
.bl-footer__about { font-size: .93rem; max-width: 32ch; line-height: 1.65; margin: 0 0 26px; }

/* Certifications: a laboratory's accreditations are the first thing a cautious
   visitor looks for, so they sit under the logo rather than in the small print. */
.bl-certs { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bl-certs li {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 11px;
    background: rgba(255, 255, 255, .03);
}
.bl-certs svg { width: 20px; height: 20px; fill: none; stroke: #7fc4c9; stroke-width: 1.7; justify-self: center; }
.bl-certs span { display: block; min-width: 0; }
.bl-certs strong { display: block; color: #fff; font-size: .86rem; font-weight: 700; letter-spacing: -.01em; }
.bl-certs em { display: block; font-style: normal; font-size: .78rem; color: #7b8f97; margin-top: 1px; }

.bl-footer .t-rich-footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.bl-footer .t-rich-footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    display: grid;
    place-items: center;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.bl-footer .t-rich-footer-social a:hover { border-color: #fff; background: rgba(255, 255, 255, .08); transform: translateY(-2px); }
.bl-footer .t-rich-footer-social a svg { width: 16px; height: 16px; fill: currentColor; }

.bl-footer__cta {
    /* The footer column is narrower than the label, so the button fills the
       column and centres instead of overflowing it and wrapping mid-word. */
    display: flex;
    width: 100%;
    max-width: 260px;
    justify-content: center;
    text-align: center;
    align-items: center;
    gap: 9px;
    padding: 13px 20px;
    white-space: nowrap;
    border-radius: 999px;
    background: var(--bio-brand);
    color: #fff !important;
    font-weight: 700;
    font-size: .9rem;
    box-shadow: 0 10px 24px -14px rgba(16, 100, 111, .9);
    transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.bl-footer__cta:hover { background: #14808e; box-shadow: 0 14px 28px -14px rgba(16, 100, 111, 1); }
.bl-footer__cta:active { transform: translateY(1px) scale(.99); }
.bl-footer__cta:focus-visible { outline: 2px solid #7fc4c9; outline-offset: 3px; }
.bl-footer__cta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s ease; }
.bl-footer__cta:hover svg { transform: translateX(3px); }

.bl-footer .t-rich-footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .86rem; }

.bl-footer .t-rich-footer-bottom {
    margin-top: clamp(36px, 4vw, 56px);
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .86rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
}

.bl-header-fallback {
    padding: 20px 0;
    border-bottom: 1px solid var(--bio-line);
    font-weight: 700;
}

@media (max-width: 1180px) { .bl-footer .t-rich-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (max-width: 860px)  { .bl-footer .t-rich-footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 560px)  { .bl-footer .t-rich-footer-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   Prose — legal pages and single posts
   --------------------------------------------------------------------------- */
.bl-prose { max-width: 74ch; }
.bl-prose h2 { margin-top: 1.6em; }
.bl-prose ol { list-style: none; counter-reset: bl-ol; padding: 0; margin: 1.4em 0; display: grid; gap: 14px; }
.bl-prose ol > li {
    counter-increment: bl-ol;
    position: relative;
    padding: 2px 0 2px 58px;
    min-height: 40px;
    display: flex;
    align-items: center;
}
.bl-prose ol > li::before {
    content: counter(bl-ol, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: .84rem;
    font-weight: 800;
    color: var(--bio-brand);
    background: var(--bio-brand-tint);
    border: 1px solid rgba(16, 100, 111, .16);
}
.bl-prose ol > li::after {
    /* A spine linking the markers, so the list reads as one run. */
    content: "";
    position: absolute;
    left: 19.5px;
    top: 40px;
    bottom: -14px;
    width: 1px;
    background: var(--bio-line);
}
.bl-prose ol > li:last-child::after { display: none; }

.bl-prose ul { list-style: none; padding: 0; margin: 1.3em 0; display: grid; gap: 10px; }
.bl-prose ul > li { position: relative; padding-left: 30px; }
.bl-prose ul > li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .62em;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--bio-brand), var(--bio-accent));
    transform: rotate(45deg);
}

.bl-prose blockquote {
    margin: 1.8em 0;
    padding: 22px 26px;
    border-left: 3px solid var(--bio-brand);
    background: var(--bio-sand);
    border-radius: 0 12px 12px 0;
    font-size: 1.08rem;
    color: var(--bio-ink);
}
.bl-prose blockquote p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Listing head

   The journal index and the archives have no hero block of their own, so they
   get a band in the brand tone with the same ring motif the article header uses.
   --------------------------------------------------------------------------- */
.bl-pagehead {
    position: relative;
    overflow: hidden;
    background: var(--bio-brand-dark);
    color: #fff;
    padding: clamp(48px, 6vw, 76px) 0;
}
.bl-pagehead h1 { color: #fff; }
.bl-pagehead p { color: #b9d3d6; max-width: 62ch; margin: 0; }
.bl-pagehead__ring { position: absolute; right: -90px; top: -110px; width: 380px; height: 380px; opacity: .45; pointer-events: none; }
.bl-pagehead__ring circle { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.2; }
.bl-pagehead__ring path { fill: none; stroke: rgba(255, 255, 255, .30); stroke-width: 1.6; }
@media (prefers-reduced-motion: no-preference) {
    .bl-pagehead__ring { animation: bl-spin 28s linear infinite; transform-origin: 50% 50%; }
}

.bl-crumbs { position: relative; font-size: .84rem; color: var(--bio-ink-soft); margin-bottom: 16px; }
.bl-crumbs a { color: var(--bio-brand); text-decoration: none; }
.bl-crumbs a:hover { text-decoration: underline; }

/* --- the lead article ------------------------------------------------------ */
.bl-feature {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(22px, 3vw, 46px);
    align-items: center;
    margin-bottom: clamp(30px, 3.6vw, 52px);
    padding-bottom: clamp(30px, 3.6vw, 52px);
    border-bottom: 1px solid var(--bio-line);
    text-decoration: none;
    color: inherit;
}
.bl-feature__media { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bio-brand-tint); }
.bl-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.bl-feature:hover .bl-feature__media img { transform: scale(1.04); }
.bl-feature__flag {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(13, 31, 36, .72);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.bl-feature__body h2 { font-size: clamp(1.5rem, 2.6vw, 2.15rem); margin: 8px 0 12px; transition: color .18s ease; }
.bl-feature:hover .bl-feature__body h2 { color: var(--bio-brand); }
.bl-feature__body p { color: var(--bio-ink-soft); font-size: 1.03rem; line-height: 1.65; margin: 0 0 16px; max-width: 52ch; }
.bl-feature .bl-card-more { padding-top: 0; }
@media (max-width: 820px) { .bl-feature { grid-template-columns: 1fr; } }

/* A label carries a mark rather than arriving as one more grey pill. */
.bl-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--bio-line);
    background: #fff;
    color: var(--bio-ink);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.bl-tag:hover { border-color: var(--bio-brand); background: var(--bio-brand-tint); transform: translateY(-1px); }
.bl-tag svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------------------
   Article
   --------------------------------------------------------------------------- */
.bl-article { padding: clamp(36px, 4.4vw, 64px) 0 clamp(40px, 5vw, 72px); }
.bl-article__head h1 { max-width: 20ch; font-size: clamp(1.9rem, 4vw, 3rem); }
.bl-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: .88rem; color: var(--bio-ink-soft); margin-bottom: 22px; }
.bl-article__meta svg { width: 16px; height: 16px; fill: none; stroke: var(--bio-brand); stroke-width: 1.7; }
.bl-article__figure {
    /* Wide and short: an article opens with its first sentence, not a poster. */
    margin: 0 0 clamp(28px, 3.4vw, 44px);
    border-radius: var(--bio-radius);
    overflow: hidden;
    aspect-ratio: 21 / 8;
    background: var(--bio-brand-tint);
}
.bl-article__figure img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .bl-article__figure { aspect-ratio: 16 / 10; } }

.bl-article__body { max-width: 68ch; margin: 0 auto; font-size: 1.06rem; line-height: 1.78; }
.bl-article__body > p:first-of-type::first-letter {
    float: left;
    font-size: 3.4rem;
    line-height: .86;
    font-weight: 800;
    padding: 6px 12px 0 0;
    color: var(--bio-brand);
}
.bl-article__body h2 { margin-top: 1.8em; font-size: clamp(1.3rem, 2vw, 1.65rem); }
.bl-article__body h2::before {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    border-radius: 2px;
    margin-bottom: 14px;
    background: linear-gradient(90deg, var(--bio-brand), var(--bio-accent));
}

/* Pagination */
.navigation.pagination { margin-top: clamp(32px, 4vw, 56px); }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.navigation.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--bio-line);
    background: #fff;
    color: var(--bio-ink);
    font-weight: 700;
    font-size: .94rem;
    text-decoration: none;
    justify-content: center;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .12s ease;
}
.navigation.pagination .page-numbers:hover { border-color: var(--bio-brand); color: var(--bio-brand); background: var(--bio-brand-tint); }
.navigation.pagination .page-numbers:active { transform: translateY(1px); }
.navigation.pagination .page-numbers.current { background: var(--bio-brand); border-color: var(--bio-brand); color: #fff; }
.navigation.pagination .page-numbers.dots { border-color: transparent; background: transparent; }
.navigation.pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .t-hero-full h1 { max-width: none; }
    .t-section-title { max-width: none; }
}

@media (max-width: 600px) {
    .t-container { padding: 0 18px; }
    .t-card { padding: 24px 20px; }
    .t-card-img { margin: -24px -20px 4px; }
    .bl-footer .t-rich-footer-bottom { flex-direction: column; }
}