* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 58px;
}

body {
    margin: 0;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    color: #171717;
    background: #ffffff;
    line-height: 1.6;
}

a {
    color: inherit;
}

.container {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
}


/* Header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #e8e8e8;
    background: rgba(255, 255, 255, 0.96);
}

.header-inner {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.brand-logo {
    display: block;
    width: auto;
    height: 30px;
}

.brand-wordmark {
    display: block;
    width: auto;
    height: 50px;
    max-width: 220px;
}

.main-nav {
    display: flex;
    gap: 22px;
}

.main-nav a {
    color: #484848;
    font-size: 0.96rem;
    font-weight: 600;
    text-decoration: none;
}

.main-nav a:hover {
    color: #111111;
}


/* Hero */

.hero {
    padding: 46px 0 43px;
}

.hero-content {
    max-width: 900px;
}

.eyebrow,
.section-label {
    margin: 0 0 12px;
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero h1 {
    max-width: 860px;
    margin: 0;
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    line-height: 1.04;
    letter-spacing: -0.045em;
    font-weight: 650;
}

.hero-text {
    max-width: 660px;
    margin: 14px 0 0;
    font-size: 0.96rem;
    font-weight: 500;
    color: #484848;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}


.hero-dynamic {
    min-width: 0;
    margin-top: 40px;
}


/* Buttons */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 7px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.86rem;
}

.button-primary {
    background: #111111;
    color: #ffffff;
}

.button-secondary {
    border: 1px solid #d4d4d4;
    background: #ffffff;
}

.button-light {
    background: #ffffff;
    color: #111111;
}


/* General sections */

.section {
    padding: 52px 0;
    border-top: 1px solid #ececec;
}

#about {
    padding-bottom: 36px;
}

.section h2 {
    max-width: 680px;
    margin: 0;
    font-size: clamp(1.55rem, 2.8vw, 2.15rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.contact-section h2 {
    max-width: 680px;
    margin: 0;
    font-size: clamp(1.35rem, 2.35vw, 1.85rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
}


/* Biomedical R&D Services - two-panel service selector */


.services-showcase {
    width: 100%;
    margin-top: 32px;
    padding: 28px;
    display: grid;
    grid-template-columns: minmax(0, 0.67fr) minmax(0, 1fr);
    gap: 32px;
    align-items: stretch;
    border: 1px solid #dcdcdc;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.025);
}

.services-menu {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.service-tab {
    width: 100%;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #333333;
    font: inherit;
    font-size: 1.10rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition:
        background 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
}

.service-tab-icon-wrap {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.service-tab-icon {
    display: block;
    width: 44px;
    height: 44px;
}

.service-tab-label {
    min-width: 0;
}

.service-tab:hover {
    background: #f7f7f5;
    color: #111111;
}

.service-tab.is-active {
    border-left-color: #171717;
    background: #f7f7f5;
    color: #111111;
    font-weight: 700;
}

.service-tab:focus-visible {
    outline: 2px solid #8a8a8a;
    outline-offset: 2px;
}

.services-menu-cross-cutting {
    margin-top: 16px;
    padding: 14px;
    display: grid;
    grid-template-columns: 46px 2px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    border-radius: 8px;
    background: #f7f9ff;
}

.cross-cutting-icon-wrap {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cross-cutting-icon {
    display: block;
    width: 44px;
    height: 44px;
}

.cross-cutting-divider {
    align-self: stretch;
    width: 2px;
    border-radius: 999px;
    background: #2563eb;
}

.cross-cutting-copy {
    min-width: 0;
}

.cross-cutting-copy > p {
    margin: 0 0 2px;
    color: #315fbd;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.service-tab-cross-cutting {
    padding: 2px 0;
    display: block;
    border-left: 0;
    border-radius: 0;
    background: transparent;
    font-size: 1.10rem;
    font-weight: 650;
}

.service-tab-cross-cutting:hover,
.service-tab-cross-cutting.is-active {
    border-left-color: transparent;
    background: transparent;
}

.service-tab-cross-cutting.is-active {
    color: #111111;
    font-weight: 700;
}

.services-detail {
    min-width: 0;
    min-height: 300px;
    padding: 26px 28px;
    display: flex;
    align-items: stretch;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    background: #fafafa;
}

.service-panel {
    width: 100%;
    min-width: 0;
    align-self: stretch;
}

.service-panel[hidden] {
    display: none;
}

.service-panel h3 {
    margin: 0 0 14px;
    font-size: 1.04rem;
    line-height: 1.35;
    letter-spacing: -0.015em;
}


.service-capabilities {
    border-top: 1px solid #e4e4e4;
}

.service-capability {
    border-bottom: 1px solid #e4e4e4;
}

.service-capability summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 13px 44px 13px 0;
    color: #2f2f2f;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.45;
}

.service-capability summary::-webkit-details-marker {
    display: none;
}

.service-capability summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 0;
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 1px solid #d0d0d0;
    border-radius: 50%;
    background: #ffffff;
    color: #555555;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    transition:
        background 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
}

.service-capability summary:hover {
    color: #000000;
}

.service-capability summary:hover::after {
    border-color: #a9a9a9;
    background: #f4f4f4;
}

.service-capability summary:focus-visible {
    outline: 2px solid #8a8a8a;
    outline-offset: 3px;
    border-radius: 4px;
}

.service-capability[open] summary {
    color: #111111;
    font-weight: 700;
}

.service-capability[open] summary::after {
    content: "−";
    border-color: #222222;
    background: #222222;
    color: #ffffff;
}

.service-capability-body {
    padding: 0 44px 15px 0;
    color: #484848;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.66;
}

.service-capability-body p {
    margin: 0;
}

.service-panel:focus {
    outline: none;
}

@media (max-width: 800px) {
    .services-showcase {
        margin-top: 26px;
        padding: 20px;
        grid-template-columns: 1fr;
        gap: 20px;
        border-radius: 12px;
    }

    .service-tab {
        padding: 9px 12px;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px;
        font-size: 1.04rem;
    }

    .service-tab-icon-wrap,
    .service-tab-icon {
        width: 38px;
        height: 38px;
    }

    .services-menu-cross-cutting {
        padding: 12px;
        grid-template-columns: 40px 2px minmax(0, 1fr);
        gap: 10px;
    }

    .cross-cutting-icon-wrap,
    .cross-cutting-icon {
        width: 38px;
        height: 38px;
    }

    .service-tab-cross-cutting {
        padding-left: 0;
        padding-right: 0;
        font-size: 1.04rem;
    }

    .services-detail {
        min-height: 0;
        padding: 22px 20px;
    }

    .service-capability summary {
        padding-right: 40px;
    }

    .service-capability-body {
        padding-right: 8px;
    }

}


.services-cta {
    margin-top: 15px;
    padding: 0 28px;
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 32px;
}

.services-cta .button {
    grid-column: 2;
    justify-self: start;
}

@media (max-width: 800px) {
    .services-cta {
        padding: 0;
        display: flex;
        justify-content: center;
    }

    .services-cta .button {
        width: auto;
        white-space: nowrap;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* About Intellactome - two-column philosophy and dynamic visual */

.about-layout {
    display: grid;
    grid-template-columns: minmax(0, 60fr) minmax(360px, 40fr);
    gap: 34px;
    align-items: start;
}

.about-content {
    min-width: 0;
}

.about-content > p:not(.section-label) {
    max-width: 640px;
    color: #484848;
    font-weight: 600;
}

.about-content > h2 + p {
    margin-top: 18px;
}

.about-philosophy {
    margin-top: 40px;
}

.about-philosophy h2 {
    margin: 0 0 10px;
    font-size: 1.50rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.about-philosophy p {
    max-width: 640px;
    margin: 0;
    color: #484848;
    font-weight: 600;
}

@media (max-width: 800px) {
    .about-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}


/* Contact */

.contact-section {
    padding: 38px 0;
    background: #111111;
    color: #ffffff;
}

.contact-inner {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
}

.contact-inner > div {
    max-width: 700px;
}

.contact-inner p:not(.section-label) {
    color: #c9c9c9;
}


/* Footer */

.site-footer {
    padding: 18px 0;
    background: #080808;
    color: #ffffff;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    font-size: 0.80rem;
}

.footer-inner p {
    margin: 5px 0 0;
    color: #9d9d9d;
}

/* Knowledge Flow - About dynamic panel */

.knowledge-flow {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border: 1px solid #e1e1e1;
    border-radius: 12px;
    background: #fcfcfc;
}

.scattered-information {
    position: absolute;
    inset: 0;
}

.info-word {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid #dddddd;
    border-radius: 999px;
    background: #ffffff;
    color: #000000;
    font-size: 0.76rem;
    font-weight: 650;
    white-space: nowrap;
}

.info-icon {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

/* Initial scattered positions inside the About dynamic panel */

.word-literature { top: 8%; left: 6%; }
.word-gene { top: 10%; left: 67%; }
.word-phenotype { top: 25%; left: 31%; }
.word-variant { top: 43%; left: 6%; }
.word-drug { top: 42%; left: 74%; }
.word-subject { top: 25%; left: 70%; }
.word-inheritance { top: 58%; left: 17%; }
.word-population { top: 61%; left: 52%; }
.word-pathway { top: 75%; left: 7%; }
.word-protein { top: 78%; left: 39%; }
.word-disease { top: 82%; left: 70%; }

/* Five-stage sequence is vertical in the 40% dynamic panel */

.knowledge-sequence {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 16px;
    opacity: 0;
    visibility: hidden;
}

.sequence-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-align: center;
    white-space: nowrap;
}

.sequence-icon {
    width: 24px;
    height: 24px;
}

.knowledge-sequence .sequence-stage:not(:first-child):not(:last-child) {
    font-weight: 800;
}

.sequence-stage-final {
    font-weight: 850;
}

.sequence-arrow {
    color: #999999;
    font-size: 1rem;
    line-height: 1;
}

/* Responsive */

@media (max-width: 800px) {

    .container {
        width: min(100% - 32px, 1120px);
    }

    .header-inner {
        min-height: 58px;
    }

    .main-nav {
        display: none;
    }

    .hero {
        padding: 46px 0 43px;
    }

    .section {
        padding: 52px 0;
    }
.contact-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-inner {
        flex-direction: column;
    }
.hero-dynamic {
        width: 100%;
    }

    .brand-logo {
        height: 22px;
    }

    .brand-wordmark {
        height: 30px;
        max-width: 180px;
    }

    /* Knowledge Flow - Mobile */

    .knowledge-flow {
        min-height: 440px;
    }

    .info-word {
        font-size: 0.80rem;
        padding: 6px 10px;
    }

.word-literature { top: 8%; left: 6%; }

.word-gene {
    top: 14%;
    right: 8%;
    left: auto;
}

.word-phenotype { top: 25%; left: 19%; }

.word-subject {
    top: 30%;
    right: 5%;
    left: auto;
}

.word-variant { top: 40%; left: 6%; }

.word-drug {
    top: 44%;
    right: 22%;
    left: auto;
}

.word-inheritance { top: 54%; left: 5%; }

.word-population {
    top: 61%;
    right: 10%;
    left: auto;
}

.word-pathway { top: 66%; left: 7%; }

.word-protein {
    top: 77%;
    left: 25%;
}

.word-disease {
    top: 86%;
    right: 8%;
    left: auto;
}

    .knowledge-sequence {
        gap: 7px;
        padding: 26px 18px;
    }

    .sequence-stage {
        font-size: 0.82rem;
    }
}


@media (prefers-reduced-motion: reduce) {
    .scattered-information {
        display: none;
    }

    .knowledge-sequence {
        opacity: 1;
        visibility: visible;
    }
}

/* -------------------------------------------------------
   Icon color system
   Uses CSS filters on the existing external SVG <img> files.
   This preserves the working animation and does not require
   converting the SVGs to CSS masks.
-------------------------------------------------------- */

/* Literature + DATA — Blue #2563EB */
.word-literature .info-icon,
.sequence-icon[src$="data.svg"] {
    filter: brightness(0) saturate(100%)
            invert(23%) sepia(67%) saturate(1650%)
            hue-rotate(204deg) brightness(132%) contrast(107%);
}

/* Subject + Population + Discovery — Orange #EA580C */
.word-subject .info-icon,
.word-population .info-icon,
.sequence-icon[src$="search.svg"] {
    filter: brightness(0) saturate(100%)
            invert(34%) sepia(58%) saturate(1877%)
            hue-rotate(357deg) brightness(105%) contrast(96%);
}

/* Phenotype — Teal #0891B2 */
.word-phenotype .info-icon {
    filter: brightness(0) saturate(100%)
            invert(17%) sepia(79%) saturate(1918%)
            hue-rotate(168deg) brightness(174%) contrast(94%);
}

/* Disease + Informed Decision-Making — Red #DC2626 */
.word-disease .info-icon,
.sequence-icon[src$="target.svg"] {
    filter: brightness(0) saturate(100%)
            invert(36%) sepia(35%) saturate(1404%)
            hue-rotate(316deg) brightness(92%) contrast(140%);
}

/* Gene + Protein + Structure — Green #16A34A */
.word-gene .info-icon,
.word-protein .info-icon,
.sequence-icon[src$="network.svg"] {
    filter: brightness(0) saturate(100%)
            invert(24%) sepia(38%) saturate(1342%)
            hue-rotate(96deg) brightness(185%) contrast(83%);
}

/* Variant + Inheritance — Magenta #DB2777 */
.word-variant .info-icon,
.word-inheritance .info-icon {
    filter: brightness(0) saturate(100%)
            invert(42%) sepia(37%) saturate(1389%)
            hue-rotate(287deg) brightness(79%) contrast(129%);
}

/* Pathway + Knowledge System — Purple #7C3AED */
.word-pathway .info-icon,
.sequence-icon[src$="component.svg"] {
    filter: brightness(0) saturate(100%)
            invert(43%) sepia(41%) saturate(1307%)
            hue-rotate(226deg) brightness(80%) contrast(143%);
}

/* Drug — Amber #D97706 */
.word-drug .info-icon {
    filter: brightness(0) saturate(100%)
            invert(29%) sepia(92%) saturate(1244%)
            hue-rotate(17deg) brightness(132%) contrast(95%);
}

/* Animation-state defaults for the vanilla-JS knowledge-flow loop */
.info-word,
.knowledge-sequence,
.sequence-stage,
.sequence-arrow {
    will-change: transform, opacity;
}