/* ==========================================================================
   FuBio English site — design system
   Tokens locked to the Chinese site's brand palette.
   Breakpoints: 1280 (desktop) / 768 (tablet) / 480 (mobile)
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
    --primary:        #00489d;
    --primary-dark:   #00306a;
    --primary-light:  #e8f1fb;
    --accent:         #00a8e8;
    --text:           #1f2937;
    --text-muted:     #5b6878;
    --text-light:     #8b97a6;
    --border:         #e2e8f0;
    --border-strong:  #cbd6e2;
    --bg:             #ffffff;
    --bg-alt:         #f5f8fc;
    --success:        #1a7f4b;
    --danger:         #b4322b;

    --radius:         8px;
    --radius-lg:      14px;
    --container:      1280px;
    --gutter:         24px;

    --header-h:       72px;
    --shadow-sm:      0 1px 2px rgba(15, 23, 42, .06);
    --shadow:         0 4px 14px rgba(0, 72, 157, .08), 0 2px 6px rgba(0, 48, 106, .05);
    --shadow-lg:      0 10px 30px rgba(0, 48, 106, .12);

    --font: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
            'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* TODO (W2): self-host an Inter subset (latin, weights 400/600/700) as
   /assets/fonts/inter-*.woff2 and preload it. The stack above already
   degrades to the system UI font, so nothing breaks in the meantime. */

/* --- 2. Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); }
h2 { font-size: clamp(1.4rem, 1.05rem + 1.2vw, 2rem); }
h3 { font-size: 1.125rem; }
p  { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
address { font-style: normal; }

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- 3. Layout ---------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: clamp(48px, 6vw, 88px); }
.section-alt { background: var(--bg-alt); }

.section-head { max-width: 780px; margin-bottom: 40px; }
.section-title { margin-bottom: .35em; }
.section-lead { color: var(--text-muted); font-size: 1.0625rem; margin: 0; }

.two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 64px);
}

/* --- 4. Buttons --------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;                 /* touch target floor */
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: .9375rem;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background .2s var(--ease), border-color .2s var(--ease),
                color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn-sm { min-height: 48px; padding: 10px 18px; font-size: .875rem; }
.btn-lg { min-height: 54px; padding: 15px 32px; font-size: 1rem; }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }

.btn-outline { background: transparent; color: var(--primary); border-color: var(--border-strong); }
.btn-outline:hover { border-color: var(--primary); background: var(--primary-light); }

.btn-ghost { background: transparent; color: var(--text-muted); border-color: var(--border); }
.btn-ghost:hover { color: var(--text); border-color: var(--border-strong); }

.btn-light { background: #fff; color: var(--primary); }
.btn-light:hover { background: var(--primary-light); color: var(--primary-dark); }

.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--primary); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* --- 5. Header ---------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--border);
    transition: box-shadow .25s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow); }

.header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: var(--header-h);
}

.brand { flex: 0 0 auto; display: flex; align-items: center; min-height: 48px; }
.brand img { width: auto; height: 38px; }

.primary-nav { flex: 1 1 auto; min-width: 0; }
.nav-list {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-item { position: relative; }

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 10px 14px;
    border: 0;
    background: none;
    border-radius: var(--radius);
    color: var(--text);
    font-weight: 600;
    font-size: .9375rem;
    white-space: nowrap;
    cursor: pointer;
}
.nav-link:hover { color: var(--primary); background: var(--primary-light); text-decoration: none; }
.nav-link.is-active { color: var(--primary); }
.nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: 2px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
}
.nav-caret { transition: transform .2s var(--ease); }
.nav-item.is-open > .nav-trigger .nav-caret { transform: rotate(180deg); }
.nav-item.is-open > .nav-trigger { color: var(--primary); background: var(--primary-light); }

.nav-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 110;
    min-width: 240px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
/* The panel sits 6px below its trigger. That strip is dead space: the pointer
   leaves .nav-item while crossing it, the panel closes, and the entries become
   unclickable. This invisible bridge extends the panel up across the gap so the
   pointer never leaves the hovered item. */
.nav-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 6px;
}
.nav-panel[hidden] { display: none; }
.nav-panel-list { list-style: none; margin: 0; padding: 0; }
.nav-panel-list a {
    display: block;
    padding: 11px 14px;
    border-radius: var(--radius);
    color: var(--text);
    font-size: .9375rem;
    font-weight: 500;
}
.nav-panel-list a:hover { background: var(--primary-light); color: var(--primary); text-decoration: none; }

.nav-panel-mega { left: 50%; transform: translateX(-50%); width: min(880px, calc(100vw - 48px)); padding: 18px; }
.mega-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}
.mega-item {
    display: block;
    padding: 14px;
    border-radius: var(--radius);
    color: var(--text);
}
.mega-item:hover { background: var(--primary-light); text-decoration: none; }
.mega-item-title { display: block; font-weight: 700; color: var(--primary); margin-bottom: 3px; }
.mega-item-desc { display: block; font-size: .8125rem; color: var(--text-muted); line-height: 1.5; }

.header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
}
.lang-switch:hover { color: var(--primary); border-color: var(--primary); text-decoration: none; }

.nav-toggle {
    display: none;
    width: 48px; height: 48px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}
.nav-toggle-bar { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- 6. Hero ------------------------------------------------------------ */
.hero {
    padding-block: clamp(56px, 7vw, 104px);
    background:
        radial-gradient(circle at 88% 12%, rgba(0, 168, 232, .16), transparent 46%),
        linear-gradient(160deg, #f7fbff 0%, #eaf3fd 55%, #ffffff 100%);
    border-bottom: 1px solid var(--border);
}
.hero-inner { max-width: 900px; }
.hero-eyebrow {
    margin: 0 0 10px;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary);
}
.hero-title { margin-bottom: .4em; }
.hero-lead { font-size: 1.125rem; color: var(--text-muted); max-width: 62ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 0; }
.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 44px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--border-strong);
}
.hero-stats dt { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-light); margin-bottom: 6px; }
.hero-stats dd { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--primary-dark); }

.page-hero {
    padding-block: clamp(36px, 4vw, 64px);
    /* A pale scientific texture sits under the near-white wash. Both layers
       stay light so the dark heading keeps its contrast. */
    background-color: #eaf3fd;
    background-image:
        linear-gradient(160deg, rgba(247, 251, 255, .93) 0%, rgba(234, 243, 253, .76) 52%, rgba(224, 238, 252, .56) 100%),
        url(../img/page-hero-bg.webp);
    background-position: center, center right;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    border-bottom: 1px solid var(--border);
}
.page-hero-compact { padding-block: clamp(28px, 3vw, 44px); }
/* Hero shares the site-wide container so its content starts at the same left
   edge as the sections below; long copy is capped separately to keep a
   readable line length. */
.page-hero .container { max-width: var(--container); }
.page-hero .hero-eyebrow,
.page-hero .page-title,
.page-hero .page-lead { max-width: 900px; }
.page-title { margin-bottom: .35em; }
.page-lead { font-size: 1.0625rem; color: var(--text-muted); margin: 0; }
.page-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }

.breadcrumb { margin-bottom: 16px; font-size: .8125rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--text-light); }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb [aria-current] { color: var(--text); font-weight: 600; }

/* --- 7. Cards ----------------------------------------------------------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 26px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: #cfdff2; }
.card-title { margin-bottom: .5em; font-size: 1.1875rem; }
.card-title a { color: var(--primary-dark); }
.card-title a:hover { color: var(--primary); text-decoration: none; }
.card-text { color: var(--text-muted); font-size: .9375rem; }
.card-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: .875rem;
    color: var(--primary);
}
.card-compact { padding: 20px; }
.card-service { border-top: 3px solid var(--accent); }

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}
.catalog-card {
    padding: 26px;
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.catalog-title { font-size: 1.1875rem; margin-bottom: .3em; }
.catalog-desc { color: var(--text-muted); font-size: .9375rem; }

/* --- 8. Lists ----------------------------------------------------------- */
.tick-list { margin: 0; padding: 0; list-style: none; }
.tick-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 9px;
    color: var(--text-muted);
    font-size: .9375rem;
}
.tick-list li::before {
    content: "";
    position: absolute;
    left: 0; top: .55em;
    width: 14px; height: 8px;
    border-left: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
}
.tick-list-lg li { font-size: 1rem; margin-bottom: 12px; }

.feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 40px;
    margin: 0; padding: 0; list-style: none;
}
.feature-list h3 { color: var(--primary-dark); }
.feature-list p { margin: 0; color: var(--text-muted); font-size: .9375rem; }

.spec-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0; padding: 0; list-style: none;
}
.spec-item {
    padding: 22px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.spec-title { font-size: 1.0625rem; color: var(--primary-dark); margin-bottom: .4em; }
.spec-text { margin: 0; color: var(--text-muted); font-size: .9375rem; }

.stat-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    margin: 0;
}
.stat { padding: 22px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.stat dt { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-light); margin-bottom: 8px; }
.stat dd { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--primary-dark); }

/* --- 9. Tables ---------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin-bottom: 26px; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .9375rem; }
.data-table th, .data-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.data-table thead th { background: var(--primary-light); color: var(--primary-dark); font-weight: 700; font-size: .875rem; }
.data-table tbody tr:hover { background: #fafcff; }

/* --- 10. Forms ---------------------------------------------------------- */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 60px);
}
.form { margin: 0; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.contact-form-col, .contact-info-col { min-width: 0; }
.footer-contact { min-width: 0; }
.form-field { margin-bottom: 18px; min-width: 0; }
.form-field label { display: block; margin-bottom: 7px; font-size: .875rem; font-weight: 600; }
.req { color: var(--danger); }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    font: inherit;
    font-size: .9375rem;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-field textarea { min-height: 150px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 72, 157, .12);
    outline: none;
}
.form-check { margin: 4px 0 22px; }
.check-label { display: flex; gap: 12px; align-items: flex-start; min-height: 48px; padding: 4px 0; font-weight: 400; font-size: .875rem; color: var(--text-muted); cursor: pointer; }
.check-label input { width: 24px; height: 24px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--primary); }
.field-hint { margin: 6px 0 0; font-size: .8125rem; color: var(--text-light); }
.form-footnote { margin: 14px 0 0; font-size: .8125rem; color: var(--text-light); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { padding: 16px 20px; border-radius: var(--radius); margin-bottom: 24px; font-size: .9375rem; }
.alert p:last-child, .alert ul:last-child { margin-bottom: 0; }
.alert-success { background: #e9f7ef; border: 1px solid #b7e0c8; color: var(--success); }
.alert-error { background: #fdecea; border: 1px solid #f3c4c0; color: var(--danger); }

.contact-info-title { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-light); margin: 0 0 14px; }
.contact-list { list-style: none; margin: 0 0 32px; padding: 0; }
.contact-list li { margin-bottom: 16px; }
.contact-label { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-light); margin-bottom: 3px; }
.contact-lang { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border); }
.contact-lang p { font-size: .875rem; color: var(--text-muted); }

/* --- 11. Notices -------------------------------------------------------- */
.notice {
    padding: 26px;
    background: #f7fbff;
    border: 1px solid #d5e6f8;
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-lg);
}
.notice-title { font-size: 1.0625rem; color: var(--primary-dark); margin-bottom: .4em; }
.notice p { color: var(--text-muted); font-size: .9375rem; }
.notice p:last-of-type { margin-bottom: 16px; }

/* --- 12. FAQ ------------------------------------------------------------ */
.faq-list { margin-bottom: 30px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--primary-dark);
    cursor: pointer;
    list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::before {
    content: "";
    flex: 0 0 auto;
    width: 10px; height: 10px;
    margin-top: .45em;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(45deg);
    transition: transform .2s var(--ease);
}
.faq-item[open] .faq-q::before { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-a { padding: 0 0 22px 22px; color: var(--text-muted); }
.faq-a p:last-child { margin-bottom: 0; }

/* --- 13. Posts and jobs ------------------------------------------------- */
.post-list, .job-list { margin: 0; padding: 0; list-style: none; }
.post-item { padding: 26px 0; border-bottom: 1px solid var(--border); max-width: 900px; }
.post-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: .8125rem; color: var(--text-light); }
.tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--primary-light); color: var(--primary); font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
.post-title { font-size: 1.25rem; margin-bottom: .4em; }
.post-text { color: var(--text-muted); font-size: .9375rem; }

.job-item { padding: 24px; margin-bottom: 16px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.job-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; justify-content: space-between; }
.job-title { margin: 0; font-size: 1.125rem; color: var(--primary-dark); }
.job-meta { font-size: .8125rem; color: var(--text-light); }
.job-text { color: var(--text-muted); font-size: .9375rem; }

/* --- 14. CTA band ------------------------------------------------------- */
/* The photographic texture sits underneath a translucent brand gradient, so
   the DNA / capsid motif reads through while white copy stays legible. */
.cta-band {
    position: relative;
    isolation: isolate;
    background-color: var(--primary-dark);
    background-image:
        linear-gradient(104deg, rgba(0, 38, 88, .88) 0%, rgba(0, 62, 132, .56) 44%, rgba(0, 94, 178, .34) 100%),
        url(../img/cta-band-bg.webp);
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    color: #fff;
    padding-block: clamp(44px, 5vw, 72px);
}
.cta-inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; }
.cta-title { color: #fff; margin-bottom: .3em; text-shadow: 0 1px 14px rgba(0, 26, 58, .32); }
.cta-text { color: rgba(255, 255, 255, .9); margin: 0; max-width: 62ch; text-shadow: 0 1px 12px rgba(0, 26, 58, .3); }

/* --- 15. Footer --------------------------------------------------------- */
.site-footer { background: var(--primary-dark); color: rgba(255, 255, 255, .78); margin-top: 0; }
.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
    gap: 34px;
    padding-block: clamp(44px, 5vw, 68px);
}
.footer-logo { height: 34px; width: auto; margin-bottom: 16px; }
.footer-tagline { color: #fff; font-size: 1.0625rem; font-weight: 600; letter-spacing: .01em; margin-bottom: .6em; }
.footer-about { font-size: .875rem; color: rgba(255, 255, 255, .68); max-width: 40ch; }
.footer-col-title { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 11px; font-size: .875rem; }
/* Footer column links are plain white on the navy panel (contrast ≈ 12.9:1).
   Hover/focus only adds an underline — the color must not change, or the
   resting state stops reading as white. */
.footer-col a { color: #fff; }
.footer-col a:hover, .footer-col a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.footer-cta { margin-top: 16px; }

.footer-bar { border-top: 1px solid rgba(255, 255, 255, .14); padding-block: 20px; }
.footer-bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.footer-copy { margin: 0; font-size: .8125rem; color: rgba(255, 255, 255, .6); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; list-style: none; font-size: .8125rem; }
.footer-legal a, .link-button { color: rgba(255, 255, 255, .68); }
.footer-legal a:hover, .link-button:hover { color: #fff; }
.link-button { background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; text-decoration: underline; }

/* --- 16. Cookie banner and back-to-top ---------------------------------- */
.cookie-banner {
    position: fixed;
    left: 24px; right: 24px; bottom: 24px;
    z-index: 150;
    max-width: 880px;
    margin-inline: auto;
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.cookie-banner[hidden] { display: none; }
.cookie-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
}
.cookie-text { margin: 0; font-size: .875rem; color: var(--text-muted); max-width: 56ch; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.to-top {
    position: fixed;
    right: 24px; bottom: 24px;
    z-index: 140;
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: background .2s var(--ease), transform .2s var(--ease);
}
.to-top[hidden] { display: none; }
.to-top:hover { background: var(--primary-light); transform: translateY(-2px); }
.cookie-banner:not([hidden]) ~ .to-top { bottom: 132px; }

/* --- 16b. Right-hand dock (quote list + live chat) ---------------------- */
/* Vertically centered on the right edge.
   This replaced bottom-anchoring once the controls grew: with a 2-button stack
   about 130px tall, the center band they occupy (roughly mid-viewport) cannot
   reach the back-to-top button at bottom:24 nor the cookie banner, so the
   clearance is structural rather than arithmetic. The panel is capped against
   the viewport and centered on the dock so it can never overflow the top edge
   on a short window. */
.side-dock {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 145;
}
.dock-buttons { display: flex; flex-direction: column; gap: 12px; }
.dock-slot { position: relative; display: flex; }

.dock-btn {
    position: relative;
    width: 60px; height: 60px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.dock-btn:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }
.dock-btn[aria-expanded="true"] { background: var(--primary); color: #fff; }
.dock-btn:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; }

.dock-badge {
    position: absolute;
    top: -4px; right: -5px;
    min-width: 20px; height: 20px;
    padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: var(--danger);
    color: #fff;
    font-size: .6875rem; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px #fff;
}
.dock-badge[hidden] { display: none; }
.dock-badge.is-bump { animation: dock-bump .42s var(--ease); }
@keyframes dock-bump {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.45); }
    70%  { transform: scale(.94); }
    100% { transform: scale(1); }
}
/* Unread replies use the warning amber, so it never reads as the same kind of
   number as the red quote count above it. */
.dock-badge-unread { background: #f59e0b; }

/* Adding an item: the pip jolts once. Removing the class and forcing a reflow
   is what lets the same animation replay on every add. */
.dock-btn.is-nudged { animation: dock-nudge .5s var(--ease); }
@keyframes dock-nudge {
    0%, 100% { transform: translateX(0) rotate(0); }
    25%      { transform: translateX(-4px) rotate(-7deg); }
    50%      { transform: translateX(4px) rotate(7deg); }
    75%      { transform: translateX(-2px) rotate(-4deg); }
}

/* Unread message: a slow halo until the visitor opens the panel. */
.dock-btn.is-alerting { animation: dock-pulse 2.2s ease-in-out infinite; }
@keyframes dock-pulse {
    0%, 100% { box-shadow: var(--shadow), 0 0 0 0 rgba(245, 158, 11, .55); }
    70%      { box-shadow: var(--shadow), 0 0 0 14px rgba(245, 158, 11, 0); }
}

/* --- Hint bubbles ------------------------------------------------------- */
/* One-time explanations of a control the visitor has not used yet. They slide
   out to the LEFT of the pip, never over the content behind them. */
.dock-hint {
    position: absolute;
    right: 100%;
    top: 50%;
    margin-right: 14px;
    width: max-content;
    max-width: min(260px, calc(100vw - 130px));
    padding: 10px 13px;
    transform: translateY(-50%) translateX(10px);
    opacity: 0;
    background: var(--primary-dark);
    color: #fff;
    font-size: .8125rem;
    line-height: 1.45;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
    z-index: 1;
}
.dock-hint[hidden] { display: none; }
.dock-hint.is-in { opacity: 1; transform: translateY(-50%) translateX(0); }
/* Small tail pointing back at the pip. */
.dock-hint::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    margin-top: -5px;
    border: 5px solid transparent;
    border-left-color: var(--primary-dark);
}

.dock-panel {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 16px;
    width: min(360px, calc(100vw - 100px));
    max-height: min(540px, calc(100vh - 160px));
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transform-origin: right center;
    animation: dock-panel-in .18s var(--ease);
}
@keyframes dock-panel-in {
    from { opacity: 0; transform: translateY(-50%) scale(.96); }
    to   { opacity: 1; transform: translateY(-50%) scale(1); }
}
.dock-panel[hidden] { display: none; }
.dock-panel:focus { outline: none; }
/* Nudge from an agent (a shake they trigger deliberately). */
.dock-panel.is-shaking { animation: dock-shake .5s var(--ease); }
@keyframes dock-shake {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    20%      { transform: translateY(-50%) translateX(-6px); }
    40%      { transform: translateY(-50%) translateX(6px); }
    60%      { transform: translateY(-50%) translateX(-4px); }
    80%      { transform: translateY(-50%) translateX(4px); }
}

.dock-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--border);
}
.dock-panel-title { margin: 0; font-size: .9375rem; font-weight: 700; color: var(--primary-dark); }
.dock-panel-close {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: none; border: 0; padding: 0;
    color: var(--text-light);
    border-radius: 6px;
    cursor: pointer;
}
.dock-panel-close:hover { color: var(--text); background: var(--bg-alt); }

.dock-panel-body { padding: 14px 15px; overflow-y: auto; font-size: .875rem; }
.dock-panel-foot {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 12px 15px;
    border-top: 1px solid var(--border);
    background: var(--bg-alt);
}
.dock-panel-foot .btn { flex: 1 1 auto; min-height: 40px; padding: 8px 14px; font-size: .8125rem; }
.dock-panel-cta { width: 100%; margin-top: 14px; }
.dock-note { margin: 0; color: var(--text-muted); }
.dock-contact {
    list-style: none; margin: 12px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.dock-contact a { color: var(--primary); font-weight: 600; }
.dock-hours { color: var(--text-muted); font-size: .8125rem; }

.quote-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.quote-list[hidden] { display: none; }
.quote-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-alt);
}
.quote-item-main { flex: 1 1 auto; min-width: 0; }
.quote-item-code { display: block; font-size: .8125rem; font-weight: 700; color: var(--primary-dark); }
.quote-item-name { display: block; font-size: .8125rem; color: var(--text-muted); overflow-wrap: anywhere; }
.quote-item-remove {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    background: none; border: 0; padding: 0;
    color: var(--text-light);
    border-radius: 6px;
    cursor: pointer;
}
.quote-item-remove:hover { color: var(--danger); background: #fdecea; }


/* Catalog rows: add-to-quote control. */
.data-table-catalog .col-quote { text-align: right; white-space: nowrap; }
.quote-add {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px;
    font-family: inherit; font-size: .8125rem; font-weight: 600;
    color: var(--primary);
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.quote-add:hover { background: var(--primary-light); border-color: var(--primary); }
.quote-add.is-added { background: var(--primary); border-color: var(--primary); color: #fff; }
.quote-add:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 1px; }

/* --- 16c. Dock: live chat transcript ------------------------------------ */
.chat-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    background: var(--bg-alt);
}

.chat-status {
    margin: 0;
    padding: 7px 11px;
    border-radius: var(--radius);
    background: #eef2f7;
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
    transition: background .2s var(--ease);
}
.chat-status.is-up   { background: #e7f6ec; color: #177245; }
.chat-status.is-wait { background: #fff4e0; color: #8a5a00; }
.chat-status.is-down { background: #fdeaea; color: #a32626; }

.chat-log {
    list-style: none;
    margin: 0; padding: 0;
    flex: 1 1 auto;
    min-height: 90px;
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Keeps the newest line off the rounded edge without extra markup. */
    scrollbar-width: thin;
}

.chat-msg {
    max-width: 84%;
    padding: 8px 11px;
    font-size: .8125rem;
    line-height: 1.5;
    border-radius: 12px;
    /* Long catalog codes should not blow out the bubble. */
    overflow-wrap: anywhere;
}
.chat-msg-agent {
    align-self: flex-start;
    background: #fff;
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
    color: var(--text);
}
.chat-msg-visitor {
    align-self: flex-end;
    background: var(--primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-file { color: inherit; font-weight: 600; text-decoration: underline; }
.chat-msg-visitor .chat-file { color: #fff; }

.chat-typing {
    margin: 0;
    font-size: .75rem;
    color: var(--text-muted);
    font-style: italic;
}
.chat-typing[hidden] { display: none; }

.chat-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 11px 13px;
    border-top: 1px solid var(--border);
    background: #fff;
}
.chat-form[hidden] { display: none; }
.chat-form textarea {
    flex: 1 1 auto;
    min-height: 38px;
    max-height: 110px;
    padding: 9px 11px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font: inherit;
    font-size: .8125rem;
    line-height: 1.4;
    resize: none;
}
.chat-form textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: -1px; }
.chat-form textarea:disabled { background: var(--bg-alt); cursor: not-allowed; }
.chat-form .btn { flex: 0 0 auto; min-height: 38px; padding: 8px 16px; }

.chat-fallback {
    padding: 13px 15px;
    border-top: 1px solid var(--border);
    background: #fff;
}
.chat-fallback[hidden] { display: none; }

/* Anyone who asked for less motion gets the states, not the theatre. */
@media (prefers-reduced-motion: reduce) {
    .dock-panel,
    .dock-panel.is-shaking,
    .dock-btn.is-alerting,
    .dock-btn.is-nudged,
    .dock-badge.is-bump,
    .dock-hint {
        animation: none;
        transition: none;
    }
    .dock-btn.is-alerting { box-shadow: 0 0 0 4px rgba(245, 158, 11, .4); }
}

/* --- 17. Utilities ------------------------------------------------------ */
/* .btn sets display, which would beat the UA [hidden] rule — so hide it here
   too, or "hidden" buttons stay on screen. */
.btn[hidden] { display: none; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--text-light); font-size: .875rem; }
.error-hero { text-align: center; }
.error-code { font-size: clamp(3rem, 2rem + 6vw, 6rem); font-weight: 800; color: var(--primary); line-height: 1; margin: 0 0 .1em; letter-spacing: -.03em; }
.error-hero .page-actions { justify-content: center; }
.legal-body { max-width: 820px; }
.legal-body h2 { margin-top: 2em; font-size: 1.25rem; color: var(--primary-dark); }
.legal-body h2:first-child { margin-top: 0; }
.address-block { font-size: .9375rem; line-height: 1.9; color: var(--text-muted); margin-bottom: 20px; }

/* --- 17b. Mega panel (four-column products & services) ------------------- */
.mega-columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px 22px;
}
.mega-col { padding: 4px 0; }
.mega-col-title {
    display: block;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--primary-dark);
}
.mega-col-title:hover { color: var(--accent); text-decoration: none; }
.mega-col-list { list-style: none; margin: 0; padding: 0; }
.mega-col-list li + li { margin-top: 2px; }
.mega-col-list a {
    display: block;
    padding: 7px 9px;
    border-radius: var(--radius);
    font-size: .875rem;
    color: var(--text);
    line-height: 1.4;
}
.mega-col-list a:hover { background: var(--primary-light); color: var(--primary); text-decoration: none; }
.mega-footer-link {
    display: block;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: .8125rem;
    font-weight: 700;
    color: var(--primary);
}
.footer-sub { margin-top: 10px; }
.footer-sub:first-child { margin-top: 0; }
.footer-sub a { font-weight: 700; color: #fff; }
.footer-col .footer-sub + li:not(.footer-sub) { margin-top: 2px; }
/* DO NOT set a color here. This selector out-specifies `.footer-col a`, so a
   value like var(--text-muted) silently repaints every footer link with a dark
   gray built for light backgrounds (2.3:1 on the navy panel). The color is
   declared once on `.footer-col a` above; this rule only sizes the text. */
.footer-col li:not(.footer-sub) a { font-size: .875rem; }

/* --- 17c. Home: banner slider -------------------------------------------- */
.hero-slider {
    position: relative;
    background: var(--primary-dark);
    overflow: hidden;
}
.hero-track { position: relative; min-height: 540px; }
.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.hero-slide.is-active { opacity: 1; visibility: visible; position: relative; }
.hero-slide-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}
/* Scrim keeps the headline legible over any banner artwork. */
.hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg, rgba(0, 24, 56, .82) 0%, rgba(0, 40, 90, .58) 46%, rgba(0, 60, 120, .22) 100%);
}
.hero-slide-inner { position: relative; z-index: 2; padding-block: 72px; max-width: 900px; }
.hero-slide .hero-eyebrow {
    color: #8fd4f5;
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.hero-slide .hero-title { color: #fff; font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.1rem); }
.hero-slide .hero-lead { color: rgba(255, 255, 255, .92); font-size: 1.0625rem; }

.hero-controls { position: relative; z-index: 3; margin-top: -56px; padding-bottom: 26px; }
.hero-dots { display: flex; gap: 10px; }
.hero-dot {
    width: 34px; height: 5px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .42);
    cursor: pointer;
    transition: background .25s var(--ease), width .25s var(--ease);
}
.hero-dot.is-active { background: #fff; width: 52px; }
.hero-dot:hover { background: rgba(255, 255, 255, .72); }

/* Prev / next arrows. Kept visible at reduced opacity so the control is
   discoverable on touch, and promoted to full opacity on hover / focus. */
.hero-arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 50%;
    background: rgba(0, 24, 56, .26);
    color: #fff;
    cursor: pointer;
    opacity: .72;
    transform: translateY(-50%) scale(.94);
    transition: opacity .25s var(--ease), background .25s var(--ease),
                border-color .25s var(--ease), transform .25s var(--ease);
}
.hero-arrow-prev { left: max(14px, calc((100% - var(--container)) / 2)); }
.hero-arrow-next { right: max(14px, calc((100% - var(--container)) / 2)); }
.hero-slider:hover .hero-arrow { opacity: 1; transform: translateY(-50%) scale(1); }
.hero-arrow:hover { background: rgba(0, 40, 90, .58); border-color: rgba(255, 255, 255, .7); }
.hero-arrow:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 3px; }
.hero-arrow svg { pointer-events: none; }

/* Slow push-in on the active frame - the "dynamic" part of the banner. */
@keyframes heroKenBurns {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}
/* Copy rises in sequence so each frame reads as a deliberate transition. */
@keyframes heroRiseIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
.hero-slide.is-active .hero-slide-bg {
    animation: heroKenBurns 8s ease-out both;
    will-change: transform;
}
.hero-slide.is-active .hero-eyebrow { animation: heroRiseIn .55s var(--ease) both .10s; }
.hero-slide.is-active .hero-title   { animation: heroRiseIn .55s var(--ease) both .20s; }
.hero-slide.is-active .hero-lead    { animation: heroRiseIn .55s var(--ease) both .32s; }
.hero-slide.is-active .hero-actions { animation: heroRiseIn .55s var(--ease) both .44s; }

@media (prefers-reduced-motion: reduce) {
    .hero-slide.is-active .hero-slide-bg,
    .hero-slide.is-active .hero-eyebrow,
    .hero-slide.is-active .hero-title,
    .hero-slide.is-active .hero-lead,
    .hero-slide.is-active .hero-actions { animation: none; }
    .hero-arrow { transition: none; }
}

/* --- 17d. Home: core business lines -------------------------------------- */
.biz-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}
.biz-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.biz-card-link {
    display: flex; flex-direction: column; height: 100%;
    padding: 0 0 22px;
    color: inherit;
}
.biz-card-link:hover { text-decoration: none; }
/* Picture band. The five supplied images were rendered at different color
   temperatures, so a brand-blue wash plus a light desaturation pulls them into
   one palette and keeps the row calm. */
.biz-card-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--primary-light);
}
.biz-card-media img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(.82) contrast(1.04);
    transition: transform .55s var(--ease);
}
.biz-card-media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0, 72, 157, .16) 0%, rgba(0, 48, 106, .34) 100%);
    pointer-events: none;
}
.biz-card:hover .biz-card-media img { transform: scale(1.06); }
/* The topical icon rides the lower-left corner of the picture. It stays inside
   the media box so the image can keep overflow:hidden for its zoom effect. */
.biz-card-media .biz-icon {
    position: absolute;
    left: 16px; bottom: 16px;
    z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border-radius: 12px;
    background: #fff;
    color: var(--primary);
    box-shadow: 0 6px 16px rgba(0, 24, 58, .28);
    transition: background .25s var(--ease), color .25s var(--ease);
}
.biz-card:hover .biz-card-media .biz-icon { background: var(--primary); color: #fff; }
.biz-card-body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; padding: 20px 20px 0; }
.biz-card-title { font-size: 1.0625rem; font-weight: 700; color: var(--primary-dark); }
.biz-card-text { font-size: .875rem; color: var(--text-muted); line-height: 1.55; flex: 1 1 auto; }
.biz-card-more { font-size: .8125rem; font-weight: 700; color: var(--accent); }
.biz-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.biz-card:hover .biz-card-title { color: var(--accent); }

/* --- 17e. Home: why choose us -------------------------------------------- */
.why-grid {
    list-style: none; margin: 0 0 34px; padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.why-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 22px;
    box-shadow: var(--shadow-sm);
}
.why-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: var(--primary-light);
    color: var(--primary);
}
.why-title { font-size: 1.0625rem; color: var(--primary-dark); margin-bottom: .4em; }
.why-text { font-size: .875rem; color: var(--text-muted); margin: 0; line-height: 1.6; }
.home-stats { margin-bottom: 0; }

/* --- 17f. Home: testimonials --------------------------------------------- */
.quote-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.quote-grid-one { grid-template-columns: 1fr; }
.quote-card {
    position: relative;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 22px 24px;
}
.quote-text { margin: 0 0 12px; font-size: .9375rem; color: var(--text); line-height: 1.7; }
.quote-author { margin: 0; font-size: .8125rem; font-weight: 700; color: var(--text-light); }

/* --- 17g. Home: company profile + timeline -------------------------------- */
/* Headline company figures. tabular-nums keeps the glyph widths stable so the
   count-up animation does not make the row jitter. */
.company-stats {
    list-style: none; margin: 0 0 40px; padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.company-stat {
    position: relative;
    overflow: hidden;
    padding: 22px 18px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.company-stat::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
}
.company-stat-value {
    display: block;
    font-size: clamp(1.75rem, 1.2rem + 1.3vw, 2.5rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
/* Static entries (Suzhou) are words, not figures - no tabular metrics. */
.company-stat-static { font-variant-numeric: normal; letter-spacing: 0; }
.company-stat-label {
    display: block;
    margin-top: 8px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-muted);
}
.about-home {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 44px;
    align-items: start;
}
.about-home-eyebrow {
    font-size: .8125rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}
.about-home-text { color: var(--text-muted); font-size: .9375rem; }
.value-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 0 22px; padding: 0; }
.value-chips li {
    padding: 6px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border-strong);
    font-size: .8125rem;
    font-weight: 700;
    color: var(--primary-dark);
}
.timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--border-strong); }
.timeline-item { position: relative; padding: 0 0 22px 18px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
    content: "";
    position: absolute;
    left: -29px; top: 6px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--accent);
}
.timeline-year { display: block; font-weight: 800; color: var(--primary); font-size: .9375rem; }
.timeline-text { display: block; font-size: .875rem; color: var(--text-muted); line-height: 1.55; }
.about-home-main { min-width: 0; }
.about-home-main .value-chips { margin-top: 20px; }
/* Right column: the laboratory photograph beside the profile copy. `align-self`
   centers it against the taller text column so the block does not read
   top-heavy now that the milestone list has moved to /about. */
.about-home-media {
    min-width: 0;
    align-self: center;
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.about-home-media img { display: block; width: 100%; height: auto; }
/* Inner pages: a picture leading a text column. */
.about-media {
    margin: 0 0 26px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.about-media img { display: block; width: 100%; height: auto; }
/* Milestones on /about: two columns on desktop, single column below 900px. */
.timeline.timeline-page {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 46px;
    margin-top: 26px;
}
@media (max-width: 900px) {
    .timeline.timeline-page { grid-template-columns: minmax(0, 1fr); }
}

/* --- 17h. Home: news ------------------------------------------------------ */
.section-head-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; max-width: none; margin-bottom: 28px;
}
.section-head-row .section-title { margin-bottom: 0; }
.news-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.news-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.news-card-link {
    display: flex; align-items: flex-start; gap: 16px;
    height: 100%;
    padding: 22px 24px;
    color: inherit;
}
.news-card-link:hover { text-decoration: none; }
.news-date {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 64px; min-height: 64px;
    border-radius: 10px;
    background: var(--primary-light);
    color: var(--primary-dark);
}
.news-date-day { font-size: 1.375rem; font-weight: 800; line-height: 1; }
.news-date-month {
    margin-top: 5px;
    font-size: .6875rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}
.news-body { min-width: 0; }
.news-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: .8125rem; color: var(--text-light); }
.news-title { font-size: 1.0625rem; margin-bottom: .4em; transition: color .2s var(--ease); }
.news-text { font-size: .875rem; color: var(--text-muted); margin: 0; }
.news-more { display: inline-block; margin-top: 10px; font-size: .8125rem; font-weight: 700; color: var(--accent); }
.news-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.news-card:hover .news-title { color: var(--accent); }

/* --- 17i. Products: filter bar and spec tables --------------------------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: #fff;
    font-size: .875rem;
    font-weight: 600;
    color: var(--text);
}
.filter-chip:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.filter-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.filter-count {
    font-size: .75rem; font-weight: 700;
    padding: 1px 7px; border-radius: 999px;
    background: var(--primary-light); color: var(--primary-dark);
}
.filter-chip.is-active .filter-count { background: rgba(255, 255, 255, .22); color: #fff; }

.table-tools {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 26px;
}
.table-search { flex: 1 1 320px; max-width: 460px; }
.table-search input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font: inherit;
    font-size: .9375rem;
    background: #fff;
}
.table-search input:focus { outline: 3px solid rgba(0, 168, 232, .4); outline-offset: 1px; border-color: var(--accent); }
.table-count { margin: 0; font-size: .875rem; color: var(--text-light); }

.cat-group { margin-bottom: 46px; scroll-margin-top: calc(var(--header-h) + 16px); }
.cat-group-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; margin-bottom: 18px;
    padding-bottom: 12px; border-bottom: 2px solid var(--primary);
}
.cat-group-title { margin: 0; font-size: 1.375rem; color: var(--primary-dark); }
.cat-block { margin-bottom: 30px; scroll-margin-top: calc(var(--header-h) + 16px); }
.cat-title {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 12px; font-size: 1.0625rem; color: var(--text);
}
.cat-count {
    display: inline-block; min-width: 24px;
    padding: 1px 8px; border-radius: 999px;
    background: var(--primary-light); color: var(--primary-dark);
    font-size: .75rem; font-weight: 700;
}
.cat-empty {
    margin: 0 0 14px; padding: 16px 18px;
    background: var(--bg-alt); border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    font-size: .9375rem; color: var(--text-muted);
}
.data-table-catalog { min-width: 760px; font-size: .875rem; }
.data-table-catalog th, .data-table-catalog td { padding: 11px 14px; vertical-align: top; }
.data-table-catalog .col-code { white-space: nowrap; font-weight: 600; }
/* Quantity columns are single tokens ("200 μL", "1E+10 PFU/mL"); breaking them
   after the number reads as two values, so they stay on one line. The table
   wrapper scrolls horizontally rather than the page. */
.data-table-catalog .col-spec,
.data-table-catalog .col-titer { white-space: nowrap; }
.data-table-catalog .col-code code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem; color: var(--primary-dark);
}
.data-table-catalog .col-name { font-weight: 600; min-width: 220px; }
.data-table-catalog tbody tr[hidden] { display: none; }
.cell-empty { color: var(--text-light); }

/* --- Plasmid map column (viral vector rows) ------------------------------- */
.data-table-catalog .col-map { text-align: center; white-space: nowrap; }
.map-link { display: inline-block; line-height: 0; border-radius: 6px; }
.map-link img {
    width: 72px; height: 72px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.map-link:hover img,
.map-link:focus-visible img {
    transform: scale(1.08);
    border-color: var(--accent);
    box-shadow: 0 2px 10px rgba(0, 48, 106, .18);
}

/* Plasmid map detail page: map on the left, specifications on the right */
.pmap-eyebrow {
    margin: 0 0 6px;
    font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent);
}
.pmap-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}
.pmap-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 16px;
}
/* Map / specifications columns must bottom out on the same line: the grid row
   stretches both, the side column flexes so the Ordering card pins to the
   bottom and the Specifications card absorbs any slack. */
.pmap-main .pmap-panel { height: 100%; margin-bottom: 0; }
.pmap-side { display: flex; flex-direction: column; gap: 16px; }
.pmap-side .pmap-panel { margin-bottom: 0; }
.pmap-side .pmap-panel:first-child { flex: 1 1 auto; }
.pmap-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-alt);
}
.pmap-panel-title { margin: 0; font-size: 1rem; color: var(--text); }
.pmap-panel-meta { font-size: .8125rem; color: var(--text-light); }
.pmap-map {
    display: flex; justify-content: center;
    padding: 20px;
    background: #f8fafb;
}
.pmap-zoom { display: block; line-height: 0; cursor: zoom-in; }
.pmap-zoom img {
    max-width: 100%; height: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.pmap-hint {
    margin: 0; padding: 0 20px 18px;
    font-size: .8125rem; color: var(--text-light);
}
.pmap-map-empty {
    flex-direction: column; align-items: center; text-align: center;
    gap: 10px; padding: 48px 24px;
}
.pmap-map-empty p { margin: 0; color: var(--text-light); font-size: .9375rem; }
.pmap-empty-title { font-weight: 600; color: var(--text); }
.pmap-specs { margin: 0; padding: 6px 20px 14px; }
.pmap-spec {
    display: flex; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.pmap-spec:last-child { border-bottom: 0; }
.pmap-spec dt { flex: 0 0 42%; font-size: .8125rem; color: var(--text-light); }
.pmap-spec dd { margin: 0; flex: 1 1 auto; font-size: .875rem; font-weight: 500; word-break: break-word; }
.pmap-panel-cta { padding: 20px; }
.pmap-panel-cta h2 { margin: 0 0 8px; font-size: 1rem; }
.pmap-panel-cta p { margin: 0; font-size: .9375rem; color: var(--text-light); }
.pmap-panel-cta .btn { margin: 12px 8px 0 0; }
@media (max-width: 1024px) {
    .pmap-layout { grid-template-columns: minmax(0, 1fr); }
    .pmap-main .pmap-panel { height: auto; }
    .pmap-side .pmap-panel:first-child { flex: 0 0 auto; }
}

/* In-page jump chips under the detail page hero */
.pmap-jump {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 18px;
}
.pmap-jump a {
    font-size: .8125rem; font-weight: 600;
    color: var(--primary-dark);
    background: rgba(255, 255, 255, .85);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 6px 14px;
    transition: color .15s var(--ease), border-color .15s var(--ease);
}
.pmap-jump a:hover { color: var(--accent); border-color: var(--accent); }

/* Detail page shell: sticky category navigation on the left, content right */
.pmap-shell {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.pmap-content { min-width: 0; }
.pmap-sidenav {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 18px 14px;
}
.pmap-sidenav-title {
    margin: 0 0 10px;
    padding: 0 8px;
    font-size: .75rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-light);
}
.pds-group { margin-bottom: 2px; }
.pds-group-link {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: .9063rem; font-weight: 600;
    color: var(--text);
    transition: background .15s var(--ease), color .15s var(--ease);
}
.pds-group-link:hover { background: var(--bg-alt); color: var(--primary); }
.pds-count {
    flex: 0 0 auto;
    font-size: .75rem; font-weight: 700;
    color: var(--text-light);
    background: var(--bg-alt);
    border-radius: 999px;
    padding: 1px 8px;
}
.pds-group.is-active > .pds-group-link { background: var(--primary); color: #fff; }
.pds-group.is-active > .pds-group-link .pds-count { background: rgba(255, 255, 255, .18); color: #fff; }
.pds-sub { margin: 2px 0 8px; padding-left: 6px; display: grid; gap: 1px; }
.pds-sub-link {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: .8438rem;
    color: var(--text-muted);
    transition: color .15s var(--ease), background .15s var(--ease);
}
.pds-sub-link:hover { color: var(--accent); background: var(--bg-alt); }
.pds-sub-link.is-active { color: var(--accent); font-weight: 600; }
.pds-sub-link .pds-count { font-size: .6875rem; padding: 0 6px; }
@media (max-width: 1024px) {
    .pmap-shell { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .pmap-sidenav { position: static; padding: 12px; }
    .pmap-sidenav-title { display: none; }
    .pmap-sidenav nav { display: flex; flex-wrap: wrap; gap: 8px; }
    .pds-group { display: contents; }
    .pds-group-link {
        border: 1px solid var(--border-strong);
        border-radius: 999px;
        padding: 6px 12px;
        font-size: .8125rem;
    }
    .pds-group.is-active > .pds-group-link { border-color: var(--primary); }
    .pds-sub {
        flex-basis: 100%;
        display: flex; flex-wrap: wrap; gap: 6px;
        margin: 0; padding: 2px 0 4px;
    }
    .pds-sub-link {
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: 4px 10px;
        font-size: .75rem;
        background: var(--bg-alt);
    }
    .pds-sub-link.is-active { border-color: var(--accent); background: #fff; }
}

/* Platform technical sections */
.pmap-tech {
    margin-top: 32px;
    padding: 28px 32px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    scroll-margin-top: calc(var(--header-h) + 16px);
}
.pmap-tech-title {
    margin: 0 0 14px;
    font-size: 1.25rem;
    color: var(--primary-dark);
}
.pmap-tech p {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: .9375rem; line-height: 1.75;
}
.pmap-tech > p:last-of-type { margin-bottom: 0; }

.pmap-figure { margin: 20px 0 0; }
.pmap-figure img {
    display: block;
    width: 100%; height: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.pmap-figure figcaption {
    margin-top: 8px;
    font-size: .8125rem; color: var(--text-light);
}

.pmap-tech-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}
.pmap-tech-cols .pmap-tech { margin-top: 0; }

.pmap-list { margin: 0; padding: 0; list-style: none; }
.pmap-list li {
    position: relative;
    padding: 0 0 10px 22px;
    color: var(--text-muted);
    font-size: .9375rem; line-height: 1.7;
}
.pmap-list li::before {
    content: "";
    position: absolute; left: 4px; top: .62em;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
}
.pmap-list li:last-child { padding-bottom: 0; }

/* Numbered protocol steps */
.pmap-steps { margin: 0; padding: 0; list-style: none; }
.pmap-step { display: flex; gap: 14px; padding: 0 0 20px; }
.pmap-step:last-child { padding-bottom: 0; }
.pmap-step-num {
    flex: 0 0 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--primary); color: #fff;
    font-size: .875rem; font-weight: 700;
}
.pmap-step-body h3 { margin: 4px 0 4px; font-size: .9688rem; color: var(--text); }
.pmap-step-body p {
    margin: 0;
    color: var(--text-muted);
    font-size: .9063rem; line-height: 1.7;
}
.pmap-note {
    margin: 18px 0 0;
    padding: 12px 16px;
    background: var(--bg-alt);
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    font-size: .875rem; line-height: 1.65;
    color: var(--text-muted);
}
.pmap-protocol-more { margin: 16px 0 0; font-size: .9063rem; color: var(--text-muted); }
.pmap-protocol-more a { font-weight: 600; }

/* Platform FAQ accordion */
.pmap-faq { display: grid; gap: 10px; }
.pmap-faq-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-alt);
    overflow: hidden;
}
.pmap-faq-item summary {
    position: relative;
    cursor: pointer;
    padding: 12px 44px 12px 16px;
    font-weight: 600; font-size: .9375rem; color: var(--text);
    list-style: none;
}
.pmap-faq-item summary::-webkit-details-marker { display: none; }
.pmap-faq-item summary::after {
    content: "+";
    position: absolute; right: 16px; top: 50%;
    transform: translateY(-50%);
    font-size: 1.125rem; font-weight: 700; line-height: 1;
    color: var(--accent);
}
.pmap-faq-item[open] summary::after { content: "\2212"; }
.pmap-faq-item[open] summary { border-bottom: 1px solid var(--border); }
.pmap-faq-item p {
    margin: 0; padding: 12px 16px;
    font-size: .9063rem; line-height: 1.7;
    color: var(--text-muted);
}

/* Catalog table: empty map cells stay clickable, plus the Details column */
.map-link-empty {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; min-height: 28px;
    border-radius: 6px;
    color: var(--text-light);
}
.map-link-empty:hover { color: var(--accent); background: var(--primary-light); }
.details-link { font-weight: 600; font-size: .875rem; color: var(--primary); }
.details-link:hover { color: var(--accent); }
@media (max-width: 768px) {
    .pmap-tech { padding: 20px 18px; margin-top: 24px; }
    .pmap-tech-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .pmap-jump a { padding: 5px 12px; font-size: .75rem; }
}

/* Map lightbox: opened from the map detail page, closes on backdrop / button / Esc */
.map-lightbox {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px;
    padding: 32px;
    background: rgba(15, 23, 42, .84);
}
.map-lightbox[hidden] { display: none; }
.map-lightbox figure { margin: 0; display: flex; max-width: min(1600px, 94vw); }
.map-lightbox img {
    max-width: 100%; max-height: 82vh; width: auto; height: auto;
    background: #fff; border-radius: 10px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
}
.map-lightbox-close {
    position: absolute; top: 16px; right: 20px;
    width: 44px; height: 44px;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff; font-size: 26px; line-height: 1;
    cursor: pointer;
}
.map-lightbox-close:hover { background: rgba(255, 255, 255, .28); }
.map-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.map-lightbox-cap {
    margin: 0; color: #fff; font-size: .875rem; font-weight: 600;
}
.map-lightbox-hint { margin: 0; color: rgba(255, 255, 255, .72); font-size: .8125rem; }
body.has-lightbox { overflow: hidden; }

/* --- 17j. Services: pills, steps, spec lists ------------------------------ */
.card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.pill {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--bg-alt);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--primary-dark);
}
.pill:hover { background: var(--primary); border-color: var(--primary); color: #fff; text-decoration: none; }
.pill-static { background: #fff; border-color: var(--border-strong); color: var(--primary-dark); cursor: default; }
.pill-static:hover { background: #fff; color: var(--primary-dark); }
.card-meta { margin: 12px 0 0; font-size: .8125rem; font-weight: 700; }

.spec-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spec-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.spec-dl { margin: 0; }
.spec-dl-row {
    display: grid; grid-template-columns: minmax(140px, 38%) minmax(0, 1fr);
    gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border);
}
.spec-dl-row:last-child { border-bottom: 0; }
.spec-dl dt { font-size: .875rem; font-weight: 700; color: var(--primary-dark); }
.spec-dl dd { margin: 0; font-size: .9375rem; color: var(--text-muted); }

/* Serotype selection guide (optional, views/service.php): replaces the
   specifications table in the right column of the applications section. */
.sero-list { list-style: none; margin: 0; padding: 0; }
.sero-item { padding: 11px 0; border-bottom: 1px solid var(--border); }
.sero-item:last-child { border-bottom: 0; }
.sero-name {
    display: inline-flex; align-items: center;
    margin: 0 0 3px; padding: 3px 10px; border-radius: 999px;
    background: var(--primary-light); color: var(--primary-dark);
    font-size: .8125rem; font-weight: 700; letter-spacing: .01em;
}
.sero-text { display: block; margin: 0; font-size: .875rem; line-height: 1.6; color: var(--text-muted); }
.sero-note {
    margin: 16px 0 0; padding: 12px 14px; border-radius: var(--radius);
    border-left: 3px solid var(--accent); background: var(--bg-alt);
    font-size: .8125rem; line-height: 1.6; color: var(--text);
}

/* Feature table (optional, views/service.php): Feature | vector comparison
   table shown in the right column of the applications section. */
.feat-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-sm); background: var(--bg);
}
.feat-table thead th {
    padding: 12px 16px; text-align: left; vertical-align: middle;
    background: var(--bg-alt); font-size: .9375rem; font-weight: 700; color: var(--text);
    border-bottom: 1px solid var(--border);
}
.feat-table thead th:first-child { border-radius: var(--radius) 0 0 0; }
.feat-table thead th:last-child { border-radius: 0 var(--radius) 0 0; }
.feat-pill {
    display: inline-flex; align-items: center;
    padding: 6px 22px; border-radius: 999px;
    background: linear-gradient(100deg, var(--primary-dark) 0%, var(--primary) 45%, var(--accent) 100%);
    color: #fff; font-size: .875rem; font-weight: 700; letter-spacing: .02em;
}
.feat-table tbody th {
    padding: 14px 16px; text-align: left; vertical-align: top;
    font-size: .9375rem; font-weight: 600; color: var(--text);
    border-bottom: 1px solid var(--border); width: 44%;
}
.feat-table tbody td {
    padding: 14px 16px; vertical-align: top;
    font-size: .9375rem; color: var(--text-muted); line-height: 1.55;
    border-bottom: 1px solid var(--border);
}
.feat-table tbody tr:nth-child(even) th, .feat-table tbody tr:nth-child(even) td { background: #fafcfe; }
.feat-table tbody tr:last-child th, .feat-table tbody tr:last-child td { border-bottom: 0; }

/* Order-planning specification table inside the service options module
   (views/service.php, service_options.specs). The .feat-table card look is
   reused; only the wrapper and heading are new. */
.sopt-specs { margin-top: 28px; }
.sopt-specs-title {
    margin: 0 0 16px; font-size: 1.25rem; font-weight: 700; color: var(--text);
}

.step-list { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 16px; }
.step-item { display: flex; gap: 16px; align-items: flex-start; }
.step-num {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--primary); color: #fff;
    font-size: .9375rem; font-weight: 800;
}
.step-title { font-size: 1rem; margin: 0 0 .2em; color: var(--primary-dark); }
.step-text { margin: 0; font-size: .875rem; color: var(--text-muted); }
.app-cta-card {
    margin: 22px 0 0; padding: 16px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: linear-gradient(120deg, var(--primary-dark) 0%, var(--primary) 55%, #0a7fd4 115%);
    border-radius: var(--radius);
    color: #fff; font-size: .9375rem; font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.app-cta-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: #fff; }
.app-cta-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.app-cta-card svg { flex: 0 0 auto; }

.section-subtitle { font-size: 1.0625rem; color: var(--primary-dark); margin-top: 28px; }

/* --- 17k. Resources: documents, cases, FAQ groups ------------------------ */
.doc-group { margin-bottom: 34px; scroll-margin-top: calc(var(--header-h) + 16px); }
.doc-group-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; margin-bottom: 12px;
}
.doc-group-title { margin: 0; font-size: 1.125rem; color: var(--primary-dark); }
.doc-link { font-weight: 700; }

.case-list { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 16px; }
.case-item {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); padding: 22px 24px;
    box-shadow: var(--shadow-sm);
}
.case-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tag-line { background: var(--primary); color: #fff; }
.tag-muted { background: var(--bg-alt); color: var(--text-muted); border: 1px solid var(--border); }
.case-title { font-size: 1.0625rem; margin: 0 0 .35em; line-height: 1.45; }
.case-journal { margin: 0 0 4px; font-size: .875rem; color: var(--text-muted); }
.case-org { margin: 0 0 8px; font-size: .8125rem; color: var(--text-light); }
.case-role { margin: 0; font-size: .875rem; color: var(--text); }
/* Two-column case card: bibliographic info on the left, a typeset journal
   cover on the right. The cover is pure CSS -- no copyrighted artwork. */
.case-body {
    display: grid; grid-template-columns: minmax(0, 1fr) 168px;
    gap: 26px; align-items: start;
}
.case-info { min-width: 0; }
.case-authors { margin: 0 0 4px; font-size: .875rem; color: var(--text); }
.case-doi { margin: 0 0 4px; font-size: .8125rem; color: var(--text-light); overflow-wrap: anywhere; }
.case-products { margin: 10px 0 0; }
.case-products-label { margin: 0 0 4px; font-size: .8125rem; font-weight: 700; color: var(--primary-dark); }
.case-products-list { list-style: none; margin: 0; padding: 0; }
.case-products-list li {
    position: relative; padding-left: 14px; margin-bottom: 2px;
    font-size: .8125rem; color: var(--text-muted);
}
.case-products-list li::before {
    content: ""; position: absolute; left: 0; top: .55em;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
}
.case-cover {
    aspect-ratio: 3 / 4; border-radius: var(--radius);
    overflow: hidden; background: var(--bg-alt);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.case-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Stack the cover under the info on small screens. */
@media (max-width: 768px) {
    .case-body { grid-template-columns: minmax(0, 1fr); }
    .case-cover { width: 150px; }
}
/* Publisher link. Opens in a new tab, so the arrow points out of the page and
   the visually-hidden note tells screen readers where the link goes. */
.case-links { margin: 14px 0 0; }
.case-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .875rem; font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}
.case-link svg { transition: transform .18s var(--ease); }
.case-link:hover { color: var(--primary-dark); text-decoration: underline; }
.case-link:hover svg { transform: translate(2px, -2px); }
.case-link:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; border-radius: 3px; }

.faq-group { margin-bottom: 34px; }
.faq-group-title { font-size: 1.125rem; color: var(--primary-dark); margin-bottom: 4px; }
.faq-group .faq-list { margin-bottom: 0; }

/* --- 18. Tablet: <= 1280px ---------------------------------------------- */
@media (max-width: 1280px) {
    :root { --gutter: 22px; }

    .nav-link { padding: 10px 11px; font-size: .875rem; }
    .header-actions { gap: 8px; }

    .card-grid, .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
}

/* --- 18b. Service two-column spacing + serotype guide page -------------- */
/* Larger gap between the column headings and the content below them, and a
   bigger step down to the closing gradient card (V94 feedback). */
.two-col .section-title { margin-bottom: 26px; }
.two-col .app-cta-card { margin-top: 36px; }

/* Gradient card under the feature table (serotype selection guide link).
   Content is centered (label + arrow) instead of space-between. */
.ftable-cta { margin-top: 24px; justify-content: center; }

/* Serotype selection guide page (views/serotype-guide.php). */
.sg-hero { padding-bottom: 40px; }
.sg-eyebrow {
    display: inline-block; margin: 0 0 10px;
    font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent);
}
.sg-intro { max-width: 860px; }
.sg-note {
    margin: 22px 0 0; padding: 14px 16px; border-radius: var(--radius);
    border-left: 3px solid var(--accent); background: var(--bg-alt);
    font-size: .875rem; line-height: 1.65; color: var(--text); max-width: 860px;
}
.sg-grid {
    list-style: none; margin: 28px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.sg-card {
    margin: 0; padding: 18px 20px; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--bg);
    box-shadow: var(--shadow-sm);
}
.sg-name { margin: 0 0 10px; font-size: 1rem; color: var(--primary-dark); }
.sg-picks { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.sg-pill {
    display: inline-flex; align-items: center;
    padding: 3px 12px; border-radius: 999px;
    background: var(--primary-light); color: var(--primary-dark);
    font-size: .75rem; font-weight: 700;
}
.sg-text { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--text-muted); }

.sg-sero { list-style: none; margin: 28px 0 0; padding: 0; max-width: 900px; }
.sg-sero-item { padding: 13px 0; border-bottom: 1px solid var(--border); }
.sg-sero-item:first-child { padding-top: 0; }
.sg-sero-item:last-child { border-bottom: 0; }
.sg-sero-name {
    display: inline-flex; align-items: center;
    margin: 0 0 4px; padding: 4px 14px; border-radius: 999px;
    background: var(--primary); color: #fff;
    font-size: .8125rem; font-weight: 700; letter-spacing: .01em;
}
.sg-sero-text { display: block; margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--text); }
.sg-synthetic { margin: 0; max-width: 860px; font-size: .9375rem; line-height: 1.75; color: var(--text); }

.sg-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 28px 32px; border-radius: var(--radius-lg);
    background: linear-gradient(120deg, var(--primary-dark) 0%, var(--primary) 55%, #0a7fd4 115%);
    color: #fff; box-shadow: var(--shadow);
}
.sg-cta-title { margin: 0 0 6px; font-size: 1.25rem; }
.sg-cta-text { margin: 0; font-size: .9375rem; line-height: 1.6; opacity: .92; max-width: 640px; }
.sg-cta-btn { flex: 0 0 auto; }
@media (max-width: 900px) {
    .sg-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
    .sg-cta { flex-direction: column; align-items: flex-start; padding: 24px; }
}

/* --- 19. Tablet portrait: <= 1024px ------------------------------------- */
@media (max-width: 1024px) {
    .nav-panel-mega { width: min(720px, calc(100vw - 44px)); }
    .mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-layout { grid-template-columns: minmax(0, 1fr); }
}

/* --- 20. Mobile: <= 768px ----------------------------------------------- */
@media (max-width: 768px) {
    :root { --header-h: 56px; --gutter: 18px; }

    .header-inner { gap: 12px; }
    .brand img { height: 30px; }
    .nav-toggle { display: inline-flex; order: 3; margin-left: auto; }

    .header-actions { order: 4; margin-left: 0; }
    .header-actions .btn { display: none; }          /* CTA lives in the drawer on mobile */

    .primary-nav {
        order: 5;
        position: absolute;
        left: 0; right: 0;
        top: 100%;
        display: none;
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
        padding: 10px var(--gutter) 24px;
        background: #fff;
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
    }
    .primary-nav.is-open { display: block; }

    .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
    .nav-item { width: 100%; }
    .nav-link {
        width: 100%;
        min-height: 48px;
        justify-content: space-between;
        padding: 12px 12px;
        font-size: 1rem;
        border-radius: var(--radius);
    }
    .nav-link.is-active::after { display: none; }
    .nav-link.is-active { background: var(--primary-light); }

    /* Panels become inline accordions rather than floating overlays. */
    .nav-panel,
    .nav-panel-mega {
        position: static;
        width: 100%;
        min-width: 0;
        transform: none;
        padding: 6px 0 10px 12px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }
    /* The hover bridge above is meaningless once the panel is in flow, and an
       absolutely positioned strip would escape it. */
    .nav-panel::before { content: none; }
    .mega-grid { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .mega-item { padding: 12px; background: var(--bg-alt); border-radius: var(--radius); margin-bottom: 4px; }

    .hero-stats { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .hero-actions .btn, .page-actions .btn { flex: 1 1 auto; }

    .card-grid, .card-grid-3, .spec-grid, .catalog-grid,
    .two-col, .feature-list, .form-row { grid-template-columns: minmax(0, 1fr); }

    .stat-row { grid-template-columns: minmax(0, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
    .footer-bar-inner { flex-direction: column; align-items: flex-start; }

    .cta-inner { flex-direction: column; align-items: flex-start; }
    .cta-inner .btn { width: 100%; }

    .cookie-banner { left: 12px; right: 12px; bottom: 12px; }
    .cookie-inner { padding: 16px 18px; }
    .cookie-actions { width: 100%; }
    .cookie-actions .btn { flex: 1 1 auto; }
    .to-top { right: 14px; bottom: 14px; }
    .cookie-banner:not([hidden]) ~ .to-top { bottom: 150px; }
}

/* --- 21. Mobile narrow: <= 480px ---------------------------------------- */
@media (max-width: 480px) {
    :root { --gutter: 16px; }

    body { font-size: 15px; }
    .section { padding-block: 44px; }
    .card, .spec-item, .catalog-card, .notice { padding: 20px; }

    .footer-grid { grid-template-columns: minmax(0, 1fr); }
    .footer-legal { gap: 12px 18px; }

    .hero-actions, .page-actions { flex-direction: column; }
    .hero-actions .btn, .page-actions .btn { width: 100%; }

    .job-head { flex-direction: column; align-items: flex-start; gap: 4px; }
    .cookie-actions { flex-direction: column; }
    .cookie-actions .btn { width: 100%; }
}

/* --- 22. Reduced motion and print --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
    .site-header, .site-footer, .cookie-banner, .to-top, .nav-toggle,
    .side-dock { display: none !important; }
    body { color: #000; }
    a::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}

/* --- 23. Responsive rules for the blocks added in 17b-17k ---------------- */
/* Kept last so they win over the desktop grid definitions above. */

@media (max-width: 1280px) {
    .mega-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
    .biz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spec-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-track { min-height: 500px; }
}

@media (max-width: 1024px) {
    .about-home { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .quote-grid { grid-template-columns: minmax(0, 1fr); }
    .card-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .spec-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .hero-track { min-height: 440px; }
    .hero-slide-inner { padding-block: 48px; }
    .hero-controls { margin-top: -44px; padding-bottom: 18px; }
    .hero-dot { width: 26px; height: 4px; }
    .hero-dot.is-active { width: 40px; }

    .biz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .why-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .quote-grid { grid-template-columns: minmax(0, 1fr); }
    .news-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .company-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 30px; }

    /* On narrow screens the hero copy spans the full width, so centered arrows
       would sit on top of the text. They move to the bottom right instead, on
       their own row above the dots, and the copy gets the space back. */
    .hero-slide-inner { padding-block: 48px 100px; }
    .hero-arrow {
        top: auto; bottom: 30px;
        width: 40px; height: 40px;
        transform: none;
    }
    .hero-slider:hover .hero-arrow { transform: none; }
    .hero-arrow-prev { left: auto; right: 62px; }
    .hero-arrow-next { right: 14px; }

    .section-head-row { flex-direction: column; align-items: flex-start; gap: 12px; }
    .spec-grid-2, .spec-grid-4 { grid-template-columns: minmax(0, 1fr); }

    .table-tools { flex-direction: column; align-items: stretch; }
    .table-search { max-width: none; }

    .cat-group-head { flex-direction: column; align-items: flex-start; gap: 6px; }
    .doc-group-head { flex-direction: column; align-items: flex-start; gap: 4px; }

    .spec-dl-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .filter-chip { padding: 7px 13px; font-size: .8125rem; }

    /* Dock: slightly smaller pips and a narrower panel on a phone. It stays
       vertically centered - no banner offset needed now, since the banner lives
       at the bottom and the dock occupies the middle band. */
    .side-dock { right: 12px; }
    .dock-btn { width: 52px; height: 52px; }
    .dock-panel {
        width: min(320px, calc(100vw - 88px));
        max-height: min(440px, calc(100vh - 150px));
        margin-right: 10px;
    }
    .chat-log { max-height: 240px; }
    .dock-hint { max-width: calc(100vw - 110px); font-size: .75rem; }
    .dock-panel-foot .btn { flex: 1 1 100%; }

    /* Mega panel collapses to an accordion list inside the mobile drawer. */
    .mega-columns { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .mega-col-title { margin-bottom: 4px; padding-bottom: 5px; font-size: .75rem; }
    .mega-col-list a { padding: 9px 8px; font-size: .9375rem; }
    .mega-footer-link { margin-top: 8px; padding-top: 8px; }
}

@media (max-width: 480px) {
    .biz-grid { grid-template-columns: minmax(0, 1fr); }
    .hero-track { min-height: 400px; }
    .step-item { gap: 12px; }
    .case-item, .quote-card, .why-card { padding: 18px 20px; }
    .news-card-link { padding: 18px 20px; gap: 14px; }
    .news-date { width: 56px; min-height: 56px; }

    .dock-btn { width: 48px; height: 48px; }
    .dock-panel { width: calc(100vw - 92px); }
    .dock-hint { max-width: calc(100vw - 130px); }
}

/* --- 18. Service page rich-content modules --------------------------------
   Optional Protocol / Validation / Resources sections rendered by
   views/service.php when a service defines the matching config keys. */

.svc-protocol .step-list { max-width: 860px; margin-top: 24px; }
.svc-protocol-more { margin: 28px 0 0; }

/* Service options module (optional, views/service.php): two option cards plus
   a highlighted contact panel, shown after production and QC. */
.svc-sopt { position: relative; }
/* Hairline divider: the production/QC section and this section share the same
   white background, so mark the boundary with a container-width rule. */
.svc-sopt::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: min(var(--container), 100%);
    border-top: 1px solid var(--border);
}
/* Overview module (optional, views/service.php): intro text beside a
   brand-colored structural schematic, shown before Product advantages. */
.svc-overview {
    display: grid; grid-template-columns: 1fr 1.05fr;
    gap: 48px; align-items: center;
}
.svc-overview-title { margin-bottom: 16px; }
.svc-overview-p { margin: 0 0 14px; font-size: .9375rem; line-height: 1.75; color: var(--text); }
.svc-overview-text .svc-overview-p:last-child { margin-bottom: 0; }
.svc-overview-figure { margin: 0; }
.svc-overview-figure img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
    .svc-overview { grid-template-columns: 1fr; gap: 28px; }
}

/* Packaging module (optional, views/service.php): plasmid cards, a workflow
   schematic figure and closing flow text, shown after the overview module. */
.svc-pkg-intro { margin: 0 0 24px; font-size: .9375rem; line-height: 1.75; color: var(--text); max-width: 900px; }
.svc-fig {
    margin: 32px 0 0; padding: 24px;
    background: var(--bg-alt); border: 1px solid var(--border);
    border-radius: var(--radius);
}
.svc-fig img { width: 100%; height: auto; display: block; }
.svc-fig-cap { margin-top: 14px; font-size: .8125rem; color: var(--text-muted); text-align: center; font-style: italic; }
.svc-pkg-p { margin: 22px 0 0; font-size: .9375rem; line-height: 1.75; color: var(--text); }
.svc-pkg-sys { margin-top: 36px; }
.svc-pkg-sys-title { margin: 0 0 4px; font-size: 1.375rem; line-height: 1.35; color: var(--primary-dark); }
.svc-pkg-sys-sub { margin: 22px 0 0; font-size: 1.0625rem; line-height: 1.4; color: var(--primary-dark); }
.svc-pkg-sys .svc-fig { margin-top: 24px; }

.sopt-cta {
    margin-top: 28px; padding: 28px 30px;
    background: var(--primary-light); border-radius: var(--radius-lg);
}
.sopt-cta-title { margin: 0 0 10px; font-size: 1.25rem; color: var(--primary-dark); }
.sopt-cta-text { margin: 0 0 18px; color: var(--text); }
.sopt-specs-note { margin: 14px 0 0; font-size: .875rem; line-height: 1.65; color: var(--text-muted); }
.sopt-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.sopt-disclaimer { margin: 16px 0 0; font-size: .8125rem; color: var(--text-light); }

.svc-note {
    margin: 24px 0 0; padding: 14px 18px;
    background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    font-size: .875rem; color: var(--text-muted);
}

.val-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px; margin-top: 24px;
}
.val-figure {
    margin: 0; background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.val-figure img { display: block; width: 100%; height: auto; }
.val-figure figcaption {
    padding: 12px 16px; font-size: .8125rem; color: var(--text-muted);
    border-top: 1px solid var(--border);
}

.res-tablist {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 24px 0 0; padding: 6px;
    background: #fff; border: 1px solid var(--border); border-radius: 999px;
}
.res-tab {
    appearance: none; border: 0; cursor: pointer;
    padding: 10px 22px; border-radius: 999px;
    background: transparent; color: var(--text-muted);
    font: inherit; font-size: .9375rem; font-weight: 700;
    transition: background .15s ease, color .15s ease;
}
.res-tab:hover { color: var(--primary); }
.res-tab.is-active { background: var(--primary); color: #fff; }
.res-panel {
    margin-top: 20px; padding: 24px 26px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.res-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.res-links a { font-weight: 700; }
.res-links li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.res-note { font-size: .875rem; color: var(--text-muted); }
.res-placeholder { margin: 0; font-size: .9375rem; color: var(--text-muted); }
/* Bench protocol embedded in a Resources tab (optional protocol_tab flag). */
.res-protocol { border-top: 1px solid var(--border); padding-top: 24px; }
.res-protocol-title { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--primary-dark); }
.res-protocol-intro { margin: 10px 0 0; font-size: .9375rem; line-height: 1.7; color: var(--text); }
.res-protocol .step-list { margin-top: 20px; }
.res-protocol .svc-note { margin-top: 20px; }
.res-protocol .svc-protocol-more { margin: 20px 0 0; }

@media (max-width: 720px) {
    .val-grid { grid-template-columns: minmax(0, 1fr); }
    .res-tablist { border-radius: var(--radius); }
    .res-tab { flex: 1 1 auto; padding: 9px 12px; font-size: .875rem; }
    .res-panel { padding: 18px; }
}

/* --- 19. Service page product advantages ----------------------------------
   Advantage entries render inside the shared features grid (views/service.php)
   as numbered spec cards, so features and advantages form one block. */
.adv-head {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 8px;
}
.adv-num {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--primary); color: #fff;
  font-size: .8125rem; font-weight: 700; letter-spacing: .02em;
}

/* Stat-style advantage cards: icon top, headline number, unit beside it,
   detail paragraph always visible below. */
.adv-card {
  padding: 28px 28px 26px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease);
}
.adv-card:hover,
.adv-card:focus-within {
  transform: translateY(-3px);
  border-color: #c3dcf5;
  box-shadow: var(--shadow-lg);
}
.adv-icon { display: inline-flex; width: 28px; height: 28px; color: var(--primary); }
.adv-icon svg { width: 100%; height: 100%; }
.adv-stat-row {
  display: flex; align-items: baseline; gap: 12px;
  margin-top: 18px;
}
.adv-stat {
  font-size: 1.875rem; font-weight: 800; line-height: 1.1;
  letter-spacing: -0.015em; color: var(--primary-dark);
}
.adv-unit {
  font-size: .9375rem; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--primary);
}
.adv-more {
  margin-top: 14px;
  font-size: .875rem; line-height: 1.75; color: var(--text-muted);
}
.adv-more p { margin: 0; }
.adv-more::before {
  content: ""; display: block; height: 1px; margin-bottom: 16px;
  background: linear-gradient(90deg, var(--primary) 0%, rgba(0, 168, 232, .18) 45%, transparent 100%);
}

/* Section heading above the shared features + advantages grid. */
.svc-adv-title { margin-bottom: 24px; }