/*--------------------------------------------------------------
# Custom Typography - Professional Pharmaceutical Styling
--------------------------------------------------------------*/

/* Primary Typography Hierarchy */
:root {
    /* Brightened brand red (higher luminance & saturation for better visual pop on light bg) */
    --brand-red: #e0222b; /* was #c41f27 */
    --contact-border: #e2e8f0;
    --contact-border-focus: #2563eb;
    --contact-bg: #ffffff;
    --contact-bg-accent: #f8fafc;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a1a;
    letter-spacing: -0.02em;
}

h1, .h1 {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

h2, .h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

h3, .h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

h4, .h4 {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

h5, .h5 {
    font-size: 1.125rem;
    font-weight: 500;
}

h6, .h6 {
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #4a4a4a;
}

/* Body Text Improvements */
p {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #4a4a4a;
    margin-bottom: 1.25rem;
}

/* Lead Text for Important Paragraphs */
.lead {
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.6;
    color: #1a1a1a;
}

/* Professional Navigation */
.navbar-brand {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.3rem; /* tighter spacing between logo and text */
    color: var(--brand-red) !important;
}

/* Prevent default link underline from appearing under brand logo/text */
a.navbar-brand,
a.navbar-brand:hover,
a.navbar-brand:focus,
a.navbar-brand:active {
    text-decoration: none !important;
}

.navbar-brand span { color: var(--brand-red) !important; }

/* Inline brand logo sized to text height */
.navbar-brand img.brand-logo {
    height: 1.25rem; /* align with font-size */
    width: auto;
    display: block; /* remove inline whitespace quirks */
}

/* Button Typography */
.btn {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
}

/* Card Typography */
.card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #1a1a1a;
}

.card-text {
    font-family: 'IBM Plex Sans', sans-serif;
    line-height: 1.6;
    color: #4a4a4a;
}

/* Accent Typography for Special Elements */
.accent-text {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-style: italic;
    color: #4a4a4a;
}

/* Professional Quote Styling */
blockquote {
    font-family: 'Playfair Display', serif;
    font-size: 1.125rem;
    font-style: italic;
    color: #1a1a1a;
    border-left: 4px solid #333333;
    padding-left: 1.5rem;
}

/* Small Text and Captions */
small, .small {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.875rem;
    color: #666666;
    line-height: 1.5;
}

/* Professional Link Styling */
a {
    color: #4a4a4a;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #1a1a1a;
    text-decoration: underline;
}

/* Override link styles for button-styled anchors */
a.btn:hover {
    text-decoration: none !important;
}

/* Ensure all button-like elements behave consistently */
.btn, .btn:hover, .btn:focus, .btn:active {
    text-decoration: none !important;
}

/* Enhanced Professional Elements */
.navbar {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.navbar-nav .nav-link {
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #4a4a4a;
    transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover {
    color: #1a1a1a;
    text-decoration: none; /* prevent underline on hover in navbar */
}

/* Emphasis styling for core offering pillar links */
.navbar-nav .nav-link.nav-pillar {
    font-weight: 600;
    color: #1a1a1a;
    position: relative;
}

/* Simplified emphasis for core offering links: slight darker color only */
.navbar-nav .nav-link.nav-pillar {
    color: #2a2a2a;
    font-weight: 500; /* keep consistent weight to reduce visual noise */
}

.navbar-nav .nav-link.nav-pillar:hover,
.navbar-nav .nav-link.nav-pillar:focus {
    color: #1a1a1a;
    background: transparent;
    text-decoration: none;
}

/* Active nav link indicator: border-bottom (avoids thickness illusion from pseudo-element layering) */
.navbar-nav .nav-link[aria-current="page"],
.navbar-nav .dropdown-toggle.active {
    font-weight:600;
    color:#1a1a1a !important;
    border-bottom:1px solid #1a1a1a;
    padding-bottom: calc(0.5rem - 1px); /* compensate for added border to keep height consistent */
}
/* Remove any legacy pseudo-element underline */
.navbar-nav .nav-link[aria-current="page"]::after,
.navbar-nav .dropdown-toggle.active::after { display:none !important; }

/* Ensure positioning context for underline */
.navbar-nav .nav-link { position: relative; }

/* External link icon sizing/alignment */
.navbar-nav .nav-link .external-icon {
    font-size: 0.7em;
    vertical-align: middle;
    margin-left: 4px;
    opacity: 0.65;
    transition: opacity .2s ease;
}

.navbar-nav .nav-link:hover .external-icon,
.navbar-nav .nav-link:focus .external-icon {
    opacity: 1;
}

/* Tighten horizontal spacing slightly to avoid wrapping with longer labels */
@media (min-width: 992px) {
    .navbar-nav .nav-link { padding: 0.5rem 0.75rem !important; }
}

/* Professional Button Enhancements */
.btn-primary {
    background: linear-gradient(135deg, #4a4a4a 0%, #1a1a1a 100%);
    border: none;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #ffffff;
    box-shadow: 0 4px 14px 0 rgba(74, 85, 104, 0.25);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(74, 85, 104, 0.35);
    color: #ffffff;
}

/* Enhanced Card Design */
.card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Professional Service Icons */
.feature-icon-small {
    background: linear-gradient(135deg, #4a4a4a 0%, #1a1a1a 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

/* Testimonial Enhancement */
.testimonial-card {
    background: linear-gradient(135deg, #4a4a4a 0%, #1a1a1a 100%);
    border-radius: 16px;
    border: none;
    box-shadow: 0 8px 25px rgba(74, 85, 104, 0.25);
}

/* Professional Typography for Specific Elements */
.services-header {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 3rem;
    letter-spacing: -0.02em;
}

.section-subtitle {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1.125rem;
    color: #4a4a4a;
    text-align: center;
    max-width: 600px;
    margin: 0 auto 2rem auto;
    line-height: 1.6;
}

/* Enhanced Footer Typography */
footer {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
}

/* Global footer separation: adds visual breathing room above footer on all pages */
.site-footer {
        margin-top: 3rem; /* default spacing */
}
@media (min-width: 992px) { /* slightly larger gap on desktop */
    .site-footer { margin-top: 4rem; }
}

footer h5 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #1a1a1a;
}

/* Footer on dark backgrounds */
.bg-dark footer h5 {
    color: #ffffff !important;
}

.bg-dark footer p, .bg-dark footer a {
    color: #e2e8f0 !important;
}

.bg-dark footer a:hover {
    color: #ffffff !important;
}

/* Contrast Fixes for Dark Backgrounds */
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-dark .h1, .bg-dark .h2, .bg-dark .h3, .bg-dark .h4, .bg-dark .h5, .bg-dark .h6 {
    color: #ffffff !important;
}

.bg-dark p, .bg-dark .lead {
    color: #e2e8f0 !important;
}

.bg-dark small, .bg-dark .small {
    color: #cbd5e0 !important;
}

/* Fix for hero section with background pattern */
.d-flex.flex-column.justify-content-end.align-items-center h1,
.d-flex.flex-column.justify-content-end.align-items-center .display-5,
#random-letters h1,
#random-letters .display-5 {
    color: #1a1a1a !important;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.9);
    padding: 2rem;
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

/* Dark gradient backgrounds - ensure white text */
.timeline-content h1, .timeline-content h2, .timeline-content h3,
.timeline-content h4, .timeline-content h5, .timeline-content h6,
.timeline-content p, .timeline-content .lead, .timeline-content .description {
    color: #ffffff !important;
}

/* Testimonial sections with dark backgrounds */
.border.p-3.mx-2.rounded-4 {
    background: linear-gradient(135deg, #4a4a4a 0%, #1a1a1a 100%);
    border: none !important;
}

/* Card elements on dark gradients */
.card-wrap h1, .card-wrap h2, .card-wrap h3, .card-wrap h4, .card-wrap h5, .card-wrap h6,
.card-wrap p {
    color: #1a1a1a;
}

/* Override Bootstrap's text-body-emphasis on potential pattern backgrounds */
.text-body-emphasis {
    color: #1a1a1a !important;
}

/* --------------------------------------------------------------
    Compact Footer (extracted from inline styles)
-------------------------------------------------------------- */
.site-footer a { text-decoration: none; color: #f1f5f9; }
.site-footer a:hover, .site-footer a:focus { text-decoration: underline; }
.site-footer .footer-heading { font-weight:600; font-size:.85rem; letter-spacing:.5px; text-transform:uppercase; margin-bottom: .65rem; color:#e2e8f0; }
.site-footer .footer-compact { font-size:.8rem; line-height:1.4; color:#cbd5e1; }
.site-footer .footer-nav li { margin-bottom:.35rem; }
.site-footer .footer-nav a { font-size:.8rem; }
.site-footer .mini-sep { border-color:#334155 !important; }
.site-footer .legal { font-size:.8rem; color:#94a3b8; letter-spacing:.25px; }
.site-footer .badges-inline { font-size:.65rem; letter-spacing:.3px; color:#94a3b8; }
/* Tighten mission badges spacing */
.site-footer .badges-inline { word-spacing: .2rem; line-height:1.3; }
/* Mission paragraph spacing fix */
.site-footer #footer-mission-text { text-align:left; word-spacing:normal; letter-spacing:normal; hyphens:auto; }
@media (max-width: 991px){ .site-footer .footer-stack > div { margin-bottom:1.5rem; } }

/* Accessible focus styles */
:focus-visible { outline: 2px solid #0d6efd; outline-offset:2px; }
.site-footer a:focus-visible { background:#1e293b; border-radius:4px; }

/* Ensure navbar text is white on dark background */
.navbar-dark .navbar-brand,
.navbar-dark .navbar-brand span {
    color: #ffffff !important;
}

.navbar-dark .navbar-nav .nav-link {
    color: #e2e8f0 !important;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #ffffff !important;
}

/*--------------------------------------------------------------
# Original Custom Styles
--------------------------------------------------------------*/
.fa-star,
.fa-star-half-alt {
    color: #FF9900;
}

.feature-icon-small {
    width: 3rem;
    height: 3rem;
}


.line-bottom::after {
    content: "";
    display: block;
    margin: 0 auto;
    /* this will center the line */
    width: 50%;
    /* adjust this to change the line width */
    border-bottom: 1px solid rgb(186, 186, 186);
    /* adjust this to change the line color and thickness */
}

.img-logo {
    width: 125px !important;
    height: 125px !important;
    max-width: 100%;
    max-height: 100px;
    object-fit: contain !important;
}


.grayscale {
    filter: grayscale(0%);
}

.img-faint {
    opacity: 0.6;
    /* Adjust as needed */
}

@media (min-width: 576px) {

    .container-sm,
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {

    .container-md,
    .container-sm,
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {

    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {

    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {

    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1200px;
    }
}

.main-timeline {
    font-family: 'Inter', sans-serif;
    padding: 25px 10px;
}

.main-timeline:after {
    content: '';
    display: block;
    clear: both;
}

.main-timeline .timeline {
    width: calc(50% + 9px);
    padding: 20px 30px 20px 0;
    margin: -20px 0 0 0;
    border-radius: 20px;
    border: 10px solid transparent;
    border-right: 10px solid #fff;
    float: left;
    position: relative;
}

.main-timeline .timeline:before,
.main-timeline .timeline:after {
    content: '';
    background-color: #DA2677;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    position: absolute;
    right: -18px;
    bottom: 40px;
}

.main-timeline .timeline:after {
    border-radius: 3px;
    transform: rotate(45deg);
    right: 20px;
}

.main-timeline .timeline-content {
    color: #fff;
    background: linear-gradient(#D02578, #DA2677);
    min-height: 130px;
    padding: 0 0 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    display: block;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.main-timeline .timeline-content:hover {
    text-decoration: none;
}

.main-timeline .timeline-icon {
    font-size: 40px;
    line-height: 40px;
    position: absolute;
    bottom: 15px;
    right: 16px;
}

.main-timeline .title {
    color: #DA2677;
    background-color: #fff;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-align: center;
    text-transform: uppercase;
    padding: 12px;
    margin: 0 0 5px;
}

.main-timeline .description {
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 20px;
    margin: 20px 80px 0 20px;
}

.main-timeline .timeline:nth-child(even) {
    float: right;
    padding: 20px 0 20px 30px;
    margin: -20px 0 0 0;
    border-right: none;
    border-left: 10px solid #fff;
}

.main-timeline .timeline:nth-child(even):before {
    right: auto;
    left: -18px;
}

.main-timeline .timeline:nth-child(even):after {
    right: auto;
    left: 20px;
}

.main-timeline .timeline:nth-child(even) .timeline-icon {
    right: auto;
    left: 16px;
}

.main-timeline .timeline:nth-child(even) .description {
    margin: 20px 20px 0 80px;
}

.main-timeline .timeline:nth-child(4n+2):before,
.main-timeline .timeline:nth-child(4n+2):after {
    background-color: #4EB543;
}

.main-timeline .timeline:nth-child(4n+2) .timeline-content {
    background: linear-gradient(#80B02C, #4EB543);
}

.main-timeline .timeline:nth-child(4n+2) .title {
    color: #4EB543;
}

.main-timeline .timeline:nth-child(4n+3):before,
.main-timeline .timeline:nth-child(4n+3):after {
    background-color: #3A3270;
}

.main-timeline .timeline:nth-child(4n+3) .timeline-content {
    background: linear-gradient(#65286D, #3A3270);
}

.main-timeline .timeline:nth-child(4n+3) .title {
    color: #3A3270;
}

.main-timeline .timeline:nth-child(4n+4):before,
.main-timeline .timeline:nth-child(4n+4):after {
    background-color: #0A2C80;
}

.main-timeline .timeline:nth-child(4n+4) .timeline-content {
    background: linear-gradient(#2FD8D8, #0A2C80);
}

.main-timeline .timeline:nth-child(4n+4) .title {
    color: #0A2C80;
}

@media screen and (max-width:767px) {

    .main-timeline .timeline,
    .main-timeline .timeline:nth-child(even) {
        width: 100%;
        padding: 20px 0 20px 30px;
        margin: -25px 0 0;
        border-left: 10px solid #fff;
        border-right: none;
    }

    .main-timeline .timeline:before,
    .main-timeline .timeline:nth-child(even):before {
        right: auto;
        left: -17px;
    }

    .main-timeline .timeline:after,
    .main-timeline .timeline:nth-child(even):after {
        right: auto;
        left: 20px;
    }

    .main-timeline .description,
    .main-timeline .timeline:nth-child(even) .description {
        margin: 20px 20px 0 80px;
    }

    .main-timeline .timeline-icon,
    .main-timeline .timeline:nth-child(even) .timeline-icon {
        left: 16px;
        right: auto;
    }
}

@media screen and (max-width:576px) {
    .main-timeline .timeline-content {
        padding-bottom: 70px;
    }

    .main-timeline .description,
    .main-timeline .timeline:nth-child(even) .description {
        margin: 20px 20px 0 20px;
    }
}

/*--------------------------------------------------------------
# Modern Header Styling
--------------------------------------------------------------*/

/* Hover effects for navigation links only (not buttons) */
.navbar .nav-link:hover:not(.btn) {
    color: #1a1a1a !important;
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

/* Active page indicator for navigation links only */
.navbar .nav-link[style*="font-weight: 600"]:not(.btn) {
    position: relative;
}

.navbar .nav-link[style*="font-weight: 600"]:not(.btn):after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #333333;
    bottom: -5px;
    left: 0;
    border-radius: 1px;
}

/* Dropdown menu enhancements */
.dropdown-menu {
    border-radius: 8px;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
}

.dropdown-item {
    padding: 0.5rem 1.5rem;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background-color: #f7fafc;
    transform: translateX(4px);
}

/* --------------------------------------------------------------
     Navbar Dropdown – Modern Hover Behavior (Desktop Only)
     - Opens on hover/focus (>=992px) while retaining click-to-open on mobile
     - Smooth fade/slide, no overlap with navbar, improved visual styling
     - Accessible via :focus-within for keyboard users
-------------------------------------------------------------- */
@media (min-width: 992px) {
    .navbar .dropdown { position: relative; }
    /* Show pointer cursor so users know parent item is clickable (we navigate on click) */
    .navbar .dropdown > .dropdown-toggle { cursor: pointer; }
        .navbar .dropdown-menu {
        display: block;            /* allow transition management */
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        pointer-events: none;
        position: absolute;
            top: 100%;                 /* eliminate gap that could cause hover flicker */
        left: 0;
        margin: 0;                 /* override previous margin-top */
        min-width: 15rem;
            padding: .8rem 0 .75rem;   /* extra top padding now creates breathing space */
        border: 1px solid #e2e8f0;
        background: #ffffff;
        box-shadow: 0 8px 24px -6px rgba(15,23,42,0.15), 0 2px 8px -2px rgba(15,23,42,0.08);
        border-radius: 12px;
        backdrop-filter: blur(12px) saturate(180%);
        transition: opacity .18s ease, transform .22s cubic-bezier(.22,.61,.36,1), visibility .18s ease;
        z-index: 1000;
    }
    /* subtle top accent bar */
    .navbar .dropdown-menu:before {
        content:"";
        position:absolute;
        inset:0 0 auto 0;
        height:3px;
        background: linear-gradient(90deg,#2563eb 0%, #1d4ed8 45%, #0ea5e9 100%);
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
    }
    /* Arrow connector */
    .navbar .dropdown-menu:after {
        content:"";
        position:absolute;
        top: -6px;
        left: 20px;
        width: 12px; height: 12px;
        background:#ffffff;
        border-left:1px solid #e2e8f0;
        border-top:1px solid #e2e8f0;
        transform: rotate(45deg);
        box-shadow: -1px -1px 1px rgba(0,0,0,0.02);
        z-index: -1;
    }
    .navbar .dropdown:hover > .dropdown-menu,
    .navbar .dropdown:focus-within > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
    /* Keep Bootstrap's explicit .show class functional (e.g., touch/click) */
    .navbar .dropdown-menu.show {
        opacity:1 !important;
        visibility:visible !important;
        transform:translateY(0) !important;
        pointer-events:auto !important;
    }
    /* Dropdown items refined */
    .navbar .dropdown-item {
        font-size: .9rem;
        padding: .55rem 1.1rem .55rem 1.15rem;
        border-radius: 6px;
        margin: 0 .4rem;
        position: relative;
        color:#1a1a1a;
        font-weight:500;
        display:flex;
        align-items:center;
        gap:.35rem;
        transition: background .18s ease, transform .18s ease, color .18s ease;
    }
    .navbar .dropdown-item:before {
        content:"";
        width:6px; height:6px; border-radius:50%;
        background: linear-gradient(135deg,#2563eb,#1d4ed8);
        box-shadow:0 0 0 3px rgba(37,99,235,0.14);
        flex:0 0 6px;
        opacity:0; transform:scale(.4); transition:opacity .25s ease, transform .25s ease;
    }
    .navbar .dropdown-item:hover,
    .navbar .dropdown-item:focus {
        background: linear-gradient(90deg,#f8fafc 0%, #eef2f7 100%);
        transform: translateX(2px);
        text-decoration:none;
    }
    .navbar .dropdown-item:hover:before,
    .navbar .dropdown-item:focus:before { opacity:1; transform:scale(1); }
    .navbar .dropdown-item:active { background:#e2e8f0; transform:translateX(0); }
        /* Active (current page) dropdown item: subtle highlight instead of Bootstrap blue */
        .navbar .dropdown-item.active, .navbar .dropdown-item.active:focus, .navbar .dropdown-item.active:hover {
            background: linear-gradient(90deg,#f1f5f9 0%, #e2e8f0 100%) !important;
            color:#0f172a !important;
            font-weight:600;
            box-shadow: inset 0 0 0 1px #cbd5e1, 0 1px 2px rgba(0,0,0,0.04);
            transform:none;
        }
        .navbar .dropdown-item.active:before { opacity:1; transform:scale(1); }
}

/* Mobile dropdown spacing tweak (retain click behavior) */
@media (max-width: 991.98px) {
    .navbar .dropdown-menu { border:1px solid #e2e8f0; border-radius:10px; padding:.4rem 0 .6rem; }
    .navbar .dropdown-item { padding:.55rem 1rem; }
}

/* Navbar brand hover effect removed for stability (no movement) */
.navbar-brand:hover { transform: none !important; }

/* Mobile menu improvements */
@media (max-width: 991.98px) {
    .navbar-nav {
        padding-top: 1rem;
        border-top: 1px solid #e2e8f0;
        margin-top: 1rem;
    }

    .nav-link {
        padding: 0.75rem 1rem !important;
        border-radius: 6px;
        margin: 0.125rem 0;
    }

    .nav-link:hover {
        background-color: #f7fafc;
    }
}

/*--------------------------------------------------------------
# Professional Button Styling
--------------------------------------------------------------*/

/* Override Bootstrap button styles for a more professional look */
.btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.025em !important;
    text-transform: none !important;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
}

/* Ensure outline variant matches primary button typography/metrics */
.btn-outline-primary {
    border-radius: 6px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.025em !important;
    text-transform: none !important;
    font-family: 'Inter', sans-serif;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3) !important;
    text-decoration: none !important;
}

.btn-primary:active,
.btn-primary:focus {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.4) !important;
    outline: none !important;
    text-decoration: none !important;
}

.btn-primary:disabled {
    background: #9ca3af !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
}

/* Ensure buttons don't get navigation styling */
.btn:hover {
    text-decoration: none !important;
}

.btn:after {
    display: none !important;
}

/* Fix navigation hover to exclude buttons */
.navbar .nav-link:hover:not(.btn) {
    color: #1a1a1a !important;
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

/* Override the general nav-link hover for buttons */
.nav-link.btn:hover {
    color: white !important;
    transform: translateY(-1px) !important;
}

/* --------------------------------------------------------------
   Contact Form Professional Styling
-------------------------------------------------------------- */
.contact-card {
    background: var(--contact-bg);
    border: 1px solid var(--contact-border) !important;
    border-radius: 16px;
    position: relative;
}

.contact-card:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px; /* gradient border thickness */
    background: linear-gradient(135deg, rgba(37,99,235,0.25), rgba(16,185,129,0.15));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.contact-form .form-label {
    font-weight: 500;
    font-size: .9rem;
    letter-spacing: .02em;
    color: #374151;
    margin-bottom: .35rem;
}

.contact-form .form-control {
    border: 1px solid var(--contact-border);
    border-radius: 8px;
    padding: 0.675rem .9rem;
    font-size: .95rem;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
    background: var(--contact-bg-accent);
}

.contact-form .form-control:focus {
    border-color: var(--contact-border-focus);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
    background: #fff;
}

.contact-form .form-control.is-invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220,38,38,0.15);
}

.contact-form .invalid-feedback { font-size: .775rem; }

.contact-form .req-asterisk { color: var(--contact-border-focus); font-weight:600; }

.contact-form .form-text { font-size: .75rem; color:#64748b; }

.contact-form textarea.form-control { resize: vertical; min-height: 150px; }

.contact-form .alert { border-radius: 10px; font-size:.875rem; }

@media (max-width: 575.98px) {
  .contact-form .form-control { font-size: .9rem; }
}

/* --------------------------------------------------------------
   Supported Omics & Assays Professional Grid
-------------------------------------------------------------- */
.omics-list {
    list-style: none;
    margin: 1rem 0 1.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .85rem 1.1rem;
}
.omics-list li {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: .65rem .75rem .65rem 2.1rem;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.35;
    color: #1a1a1a;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(255,255,255,0.6) inset;
    transition: border-color .25s ease, box-shadow .25s ease, transform .18s ease;
}
.omics-list li:before {
    content: "";
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12), 0 2px 4px rgba(37,99,235,0.25);
}
.omics-list li:hover, .omics-list li:focus-within {
    border-color: #2563eb;
    box-shadow: 0 3px 10px rgba(37,99,235,0.15), 0 0 0 1px #2563eb;
    transform: translateY(-2px);
}
.omics-list .omics-item-text { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
    .omics-list li { transition: none; }
}

/* Compact pill tag alternative layout */
.omics-tags { list-style:none; margin:1rem 0 1.75rem; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.omics-tag { --accent:#2563eb; position:relative; display:inline-flex; align-items:center; gap:.5rem; background:#ffffff; border:1px solid #e2e8f0; border-radius:999px; padding:.55rem .9rem .55rem .95rem; font-size:.875rem; font-weight:500; letter-spacing:.2px; line-height:1.1; color:#1a1a1a; box-shadow:0 1px 2px rgba(0,0,0,0.04); transition:background .25s, border-color .25s, box-shadow .25s, transform .18s; }
.omics-tag:before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(37,99,235,.15); }
.omics-tag:hover, .omics-tag:focus-visible { background:linear-gradient(135deg,#f8fafc 0%,#eef2f7 100%); border-color:#cbd5e1; box-shadow:0 2px 6px rgba(0,0,0,0.06); transform:translateY(-2px); }
@media (min-width:1200px){ .omics-tag { font-size:.85rem; } }
@media (prefers-reduced-motion: reduce){ .omics-tag { transition:none; } }

/* --------------------------------------------------------------
     OEM Services – Typography Flow Fixes
     Addresses uneven justification-like gaps caused by browser line breaking
     in medium-width paragraphs (not actually justified text) by:
         - Slightly reducing max-width for long measure
         - Enabling soft hyphenation & better break opportunities
         - Fine-tuning word-spacing & letter-spacing subtly
-------------------------------------------------------------- */
.why-section p.lead, .why-section ul, .why-section li { hyphens:auto; }
.why-section p.lead { max-width: 640px; word-spacing: 0.02em; letter-spacing: 0; }
/* Slight global improvement for similar hero/intro paragraphs on this page */
section p.lead { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
@media (min-width:1200px){ .why-section p.lead { max-width: 620px; } }
/* Avoid large gaps when narrow: allow more natural breaks */
@media (max-width: 575.98px){ .why-section p.lead { word-spacing: 0.015em; } }

/* --------------------------------------------------------------
    OEM Services – Global Section Spacing (applies via body.oem-page)
body.oem-page section { --oem-max-measure: 72ch; }
body.oem-page p.lead { max-width: var(--oem-max-measure); margin-left:auto; margin-right:auto; hyphens:auto; }
/* Limit custom word-spacing to lead text only; avoid affecting standard paragraphs */
body.oem-page p.lead, body.oem-page li.lead { word-spacing:0.015em; }
/* Reset normal paragraphs & list items */
body.oem-page p:not(.lead), body.oem-page li:not(.lead) { word-spacing:normal; }
body.oem-page ul li { margin-bottom:.4rem; }
body.oem-page .accordion-body { line-height:1.55; letter-spacing:0; word-spacing:0.01em; }
body.oem-page .services-header-left + p.lead { margin-top: .75rem; }
/* Tighten badge spacing in cards */
body.oem-page .card .badge { font-size:.65rem; letter-spacing:.5px; }
/* Prevent overly wide FAQ paragraphs */
body.oem-page #faq .accordion-body { max-width: 70ch; }
/* Card paragraph readability (prevent perceived justification gaps) */
body.oem-page .card p { word-spacing:normal !important; letter-spacing:normal !important; hyphens:auto; text-align:left; line-height:1.55; }

/* Mobile-only breathing room under hero CTA buttons (avoid crowding next dark strip) */
@media (max-width: 575.98px){
    body.oem-page .hero-cta-gap { margin-bottom:1.25rem !important; }
}

/* --------------------------------------------------------------
    About Page – Typography Flow Adjustments
-------------------------------------------------------------- */
body.about-page .services-header-left + p.lead { margin-top:.75rem; }
body.about-page ul.lead, body.about-page ul.lead li { word-spacing:normal !important; text-align:left; }
body.about-page .container .lead.fw-bold { word-spacing:normal; }
/* Ensure small paragraphs/cards don't inherit spacing tweak */
body.about-page p.small, body.about-page .small, body.about-page p:not(.lead) { word-spacing:normal; }
/* Improve list readability */
body.about-page ul.lead li { margin-bottom:.4rem; }

/* Remove full justification on About page to eliminate uneven gaps */
body.about-page p,
body.about-page ul,
body.about-page li { text-align:left !important; letter-spacing:normal; word-spacing:normal; }

/* Optional: enable natural hyphenation only if future justified text reintroduced */
/* body.about-page p { hyphens:auto; } */

/* --------------------------------------------------------------
   About Page – Compact Metric / Standards Cards
   Re-usable aesthetic for side summary panels
-------------------------------------------------------------- */
.metric-card.card {
    background: linear-gradient(180deg,#ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 4px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.06);
    transition: box-shadow .25s ease, transform .25s ease;
    position: relative;
    overflow: hidden;
}
.metric-card.card:before { /* subtle top accent bar */
    content:""; position:absolute; inset:0 0 auto 0; height:4px;
    background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 40%, #0ea5e9 100%);
}
.metric-card.card:hover {
    box-shadow: 0 6px 18px -2px rgba(15,23,42,0.12), 0 2px 6px rgba(15,23,42,0.08);
    transform: translateY(-2px);
}
.metric-card .panel-title {
    font-size: .65rem;
    font-weight: 600;
    letter-spacing:.11em;
    text-transform: uppercase;
    color:#475569;
    margin-bottom: .85rem;
}
.metric-card ul {
    list-style:none;
    padding:0;
    margin:0;
}
.metric-card ul li {
    display:flex;
    align-items:flex-start;
    gap:.5rem;
    font-size:.8rem;
    line-height:1.4;
    margin-bottom:.6rem;
    color:#1e293b;
}
.metric-card ul li:last-child { margin-bottom:0; }
.metric-card ul li:before {
    content:"";
    flex:0 0 6px;
    height:6px;
    margin-top:.4rem;
    border-radius:50%;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}
.metric-card strong { font-weight:600; color:#111827; }

@media (min-width: 992px){
  .metric-card.card { padding-top: .5rem; }
}

/* Tight list utility */
.list-tight { list-style: disc; padding-left:1.1rem; line-height:1.45; font-size:1rem; margin-bottom:1.25rem; }
.list-tight li { margin-bottom:.35rem; }

/* About page intro paragraph left-alignment (override generic centered lead margins) */

/* --------------------------------------------------------------
    Contact Page – Typography & Card Refinements
-------------------------------------------------------------- */
body.contact-page p, body.contact-page li { text-align:left; word-spacing:normal; letter-spacing:normal; }
body.contact-page .services-header-left + p.lead { margin-top:.75rem; }
body.contact-page .inquiry-card h5 { font-size:1rem; font-weight:600; letter-spacing:-0.01em; }
body.contact-page .inquiry-card p { font-size:.9rem; line-height:1.45; }
body.contact-page .inquiry-card .badge { font-size:.65rem; letter-spacing:.5px; font-weight:500; }
body.contact-page .inquiry-card.card { border-radius:16px !important; }
body.contact-page .inquiry-card.card:before { height:3px; }
body.contact-page .inquiry-card.card:hover { transform:translateY(-3px); }
@media (min-width:992px){ body.contact-page .inquiry-card p { min-height:74px; } }

/* Direct Contact section refinements */
body.contact-page .direct-contact .contact-line { font-size:1rem; line-height:1.5; color:#1a1a1a; }
body.contact-page .direct-contact .address { line-height:1.4; }
body.contact-page .direct-contact .contact-times { line-height:1.4; list-style:disc; }
body.contact-page .direct-contact .contact-times li { margin-bottom:.4rem; }
body.contact-page .direct-contact .contact-times li:last-child { margin-bottom:0; }
body.contact-page .direct-contact .metric-card .panel-title { margin-bottom:.75rem; }
@media (min-width:992px){ body.contact-page .direct-contact .metric-card { max-width:100%; } }
body.contact-page .what-include-card { border-radius:22px !important; }
body.contact-page .what-include-card .panel-title { font-size:.7rem; letter-spacing:.12em; }
body.contact-page .what-include-card ul li { font-size:.85rem; line-height:1.5; }
@media (min-width:1200px){ body.contact-page .what-include-card ul li { font-size:.9rem; } }

/* -------------------------------------------------- */
/* Unified Contact Form Styling (mirrors contact.html) */
/* -------------------------------------------------- */
.contact-form label.py-2 { font-weight:500; display:block; }
.contact-form .form-control, .contact-form .form-select { font-size:.95rem; }
.contact-form textarea.form-control { resize:vertical; }
.contact-form .alert { font-size:.9rem; }
.contact-form small.text-muted { font-size:.75rem; line-height:1.25rem; }
.contact-card { border-radius:.75rem; }

/* --------------------------------------------------------------
    Global Section Divider (standardized spacing & appearance)
    Usage: <hr class="section-divider" />
    Ensures consistent vertical rhythm between major content blocks.
-------------------------------------------------------------- */
hr.section-divider, .section-divider { /* allow use on <hr> or <div> */
    border: 0;
    /* Thinner (1px) but darker for higher contrast */
    border-bottom: 1px solid #94a3b8;
  margin: 4rem auto 3rem; /* top then bottom spacing */
  max-width: 1200px; /* align with widest container */
  width: 100%;
  box-sizing: border-box;
}
/* Remove extra top padding on an immediately following section/container
    that previously compensated for ad-hoc divider spacing */
.section-divider + .py-3, .section-divider + .py-4 { padding-top: 0 !important; }