/* PMBS topbar brand */
.pmbs-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
}

.pmbs-logo-mark {
    display: inline-grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
}

.pmbs-logo-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1;
}

.pmbs-logo-text {
    display: block;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.16em;
    white-space: nowrap;
}

.pmbs-logo-full {
    display: block;
    margin-top: 5px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0.15em;
    opacity: 0.68;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .pmbs-logo {
        gap: 8px;
    }

    .pmbs-logo-mark {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }

    .pmbs-logo-text {
        font-size: 15px;
    }

    .pmbs-logo-full {
        max-width: 185px;
        margin-top: 4px;
        overflow: hidden;
        font-size: 7px;
        letter-spacing: 0.1em;
        text-overflow: ellipsis;
    }
}

@media (max-width: 420px) {
    .pmbs-logo-full {
        max-width: 150px;
        font-size: 6.5px;
        letter-spacing: 0.07em;
    }
}/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/asset-15.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/asset-16.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/asset-17.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/asset-18.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/asset-19.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/asset-20.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/asset-21.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/asset-22.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/asset-23.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/asset-24.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/asset-25.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/asset-26.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/asset-27.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/asset-28.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/asset-29.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/asset-30.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/asset-31.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/asset-32.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/asset-33.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/asset-34.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-35.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-36.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-37.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-38.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-39.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-40.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-35.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-36.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-37.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-38.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-39.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-40.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-35.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-36.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-37.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-38.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-39.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-40.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-35.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-36.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-37.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-38.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-39.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-40.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-35.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-36.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-37.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-38.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-39.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/asset-40.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/asset-41.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/asset-42.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/asset-43.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/asset-44.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/asset-45.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/asset-46.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/asset-47.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/asset-48.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/asset-49.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/asset-50.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/asset-51.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/asset-52.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/asset-53.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/asset-54.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/asset-55.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/asset-56.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/asset-57.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/asset-58.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/asset-59.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/asset-60.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/asset-61.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/asset-62.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/asset-63.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/asset-64.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/asset-65.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* PMBS — site styles
   Warm-paper palette, mono-technical type. Sections stack full-width
   with thin ink rules. Container caps at 1440px. */

:root {
  --paper:   #f5f1ea;
  --paper-2: #ede7d8;
  --edge:    #d9d1bf;
  --ink:     #1a1a1a;
  --ink-2:   #3a3a3a;
  --muted:   #8a8378;
  --sage:    #6b7a5a;
  --rust:    #0f766e;
  --container: 1440px;
  --pad-x: 56px;
  --draw-ink:   #1a1a1a;
  --draw-paper: #f5f1ea;
  --hairline:   rgba(26,26,26,0.18);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
img, svg { display: block; max-width: 100%; }

/* ── Typography helpers ─────────────────────────────── */
.mono  { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.sans  { font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.serif { font-family: 'IBM Plex Serif', Georgia, serif; }

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow-muted { color: var(--muted); }

.h-display {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(48px, 6.5vw, 96px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  margin: 0;
}
.h-section {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
}
.h-card {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

/* ── Layout primitives ──────────────────────────────── */
.s-section {
  position: relative;
  padding: 96px 0;
  border-top: 1px solid var(--ink);
}
.s-section--tight { padding: 56px 0; }
.s-section--dark {
  background: var(--ink);
  color: var(--paper);
  border-top-color: var(--ink);
}
.s-section--dark .eyebrow { color: rgba(245,241,234,0.7); }
.s-section--dark .rule-soft { background: rgba(245,241,234,0.18); }

.s-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.rule       { height: 1px; background: var(--ink); width: 100%; }
.rule-soft  { height: 1px; background: rgba(26,26,26,0.18); width: 100%; }

/* Section header chrome */
.s-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: end;
  padding-bottom: 32px;
}
.s-head__title { max-width: 720px; }
.s-head__meta  { text-align: right; }

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  transition: background 0.18s ease, color 0.18s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--rust); border-color: var(--rust); color: var(--paper); }
.btn--ghost { border-color: rgba(26,26,26,0.4); background: transparent; }

.btn .arrow { display: inline-block; }

/* ── Document chrome bars ───────────────────────────── */
.doc-bar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.doc-bar .label-muted { color: var(--muted); }

/* ── Nav ────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245,241,234,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--pad-x);
  max-width: var(--container);
  margin: 0 auto;
}
.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__links { display: flex; gap: 28px; }
.nav__link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.nav__link .n { color: var(--muted); }
.nav__link:hover { color: var(--rust); }

/* ── Service / sector cards ─────────────────────────── */
.grid-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ink);
}
.service-card {
  position: relative;
  padding: 24px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--paper);
  transition: background 0.2s ease;
}
.service-card:hover { background: var(--paper-2); }
.service-card + .service-card,
.grid-services > .service-card { border-left: 1px solid var(--ink); }
.grid-services > .service-card:nth-child(3n+1) { border-left: 0; }
.grid-services > .service-card:nth-child(n+4) { border-top: 1px solid var(--ink); }

.service-card__code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--rust);
}

/* ── Sector strip ───────────────────────────────────── */
.sector-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ink);
}
.sector-row > .sector {
  padding: 22px 22px 26px;
  border-left: 1px solid var(--ink);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sector-row > .sector:first-child { border-left: 0; }

/* ── Process / phases ───────────────────────────────── */
.phases {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid rgba(245,241,234,0.25);
}
.phase {
  padding: 28px 22px 32px;
  border-left: 1px solid rgba(245,241,234,0.25);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.phase:first-child { border-left: 0; }
.phase__num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--rust);
}
.phase__title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 24px 0 12px;
}
.phase__body {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(245,241,234,0.78);
}

/* ── Careers ────────────────────────────────────────── */
.role {
  display: grid;
  grid-template-columns: 80px 1.5fr 1fr 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 22px 4px;
  border-bottom: 1px solid rgba(26,26,26,0.18);
  cursor: pointer;
  transition: padding 0.18s ease;
}
.role:hover { padding-left: 12px; background: var(--paper-2); }
.role__code { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.16em; color: var(--rust); }
.role__title { font-size: 20px; font-weight: 500; letter-spacing: -0.005em; }
.role__meta  { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.role__cta   { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--rust); }

/* ── Contact ────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(26,26,26,0.3);
}
.field label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field textarea,
.field select {
  font: inherit;
  font-size: 16px;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ink);
  padding: 4px 0;
  resize: none;
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(26,26,26,0.4); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
.chip[data-active="true"] { background: var(--ink); color: var(--paper); }

/* ── Footer ─────────────────────────────────────────── */
.footer {
  background: var(--ink);
  color: var(--paper);
  padding: 80px 0 32px;
}
.footer a { color: var(--paper); }
.footer a:hover { color: var(--rust); }

/* ── Responsive ─────────────────────────────────────── */@media (max-width: 1000px) {
  :root { --pad-x: 32px; }
  .grid-services { grid-template-columns: repeat(2, 1fr); }
  .grid-services > .service-card:nth-child(n) { border-left: 1px solid var(--ink); border-top: 0; }
  .grid-services > .service-card:nth-child(2n+1) { border-left: 0; }
  .grid-services > .service-card:nth-child(n+3) { border-top: 1px solid var(--ink); }
  .sector-row { grid-template-columns: repeat(2, 1fr); }
  .sector-row > .sector { border-left: 1px solid var(--ink); }
  .sector-row > .sector:nth-child(2n+1) { border-left: 0; }
  .sector-row > .sector:nth-child(n+3) { border-top: 1px solid var(--ink); }
  .phases { grid-template-columns: repeat(1, 1fr); }
  .phase  { border-left: 0; border-top: 1px solid rgba(245,241,234,0.25); min-height: auto; }
  .phase:first-child { border-top: 0; }
  .s-head { grid-template-columns: 1fr; }
  .s-head__meta { text-align: left; }
  .nav__links { display: none; }
  .role { grid-template-columns: 60px 1.6fr auto; }
  .role__meta:nth-of-type(2), .role__meta:nth-of-type(3) { display: none; }
}
@media (max-width: 640px) {
  :root { --pad-x: 20px; }
  .s-section { padding: 64px 0; }
  .grid-services { grid-template-columns: 1fr; }
  .grid-services > .service-card { border-left: 0 !important; border-top: 1px solid var(--ink); }
  .grid-services > .service-card:first-child { border-top: 0; }
  .sector-row { grid-template-columns: 1fr; }
  .sector-row > .sector { border-left: 0; border-top: 1px solid var(--ink); }
  .sector-row > .sector:first-child { border-top: 0; }
}


/* ──────────────────────────────────────────────────────
   PMBS — Dark cinematic hero (and nav-over-dark state)
   Deep-violet base, animated gradient halo, liquid-glass
   framework chips marquee. Designed to bookend the site
   together with the dark footer.
   ────────────────────────────────────────────────────── */

:root {
  --dark-bg:     #0a0616;
  --dark-bg-2:   #15093a;
  --dark-text:   #f5f1ea;
  --grad-1:      #c4b5fd; /* lavender */
  --grad-2:      #93c5fd; /* steel-sky */
  --grad-3:      #a8f0d6; /* mint */
}

/* ── Hero shell ────────────────────────────────────── */
.hero-dark {
  position: relative;
  min-height: 100vh;
  background: var(--dark-bg);
  color: var(--dark-text);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
.hero-dark::after {
  /* faint grain */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1.2px);
  background-size: 3px 3px;
  mix-blend-mode: screen;
  opacity: 0.6;
  pointer-events: none;
  z-index: 4;
}

/* Animated gradient "video" placeholder. Swap in a <video>
   element by setting --hero-video-on: 1 and putting a real
   <video> tag in .hero-dark__video. */
.hero-dark__placeholder {
  position: absolute; inset: -10%;
  z-index: 1;
  background:
    radial-gradient(ellipse 60% 50% at 25% 35%, rgba(140, 100, 255, 0.55), transparent 60%),
    radial-gradient(ellipse 50% 45% at 75% 65%, rgba(70, 130, 255, 0.40), transparent 60%),
    radial-gradient(ellipse 40% 40% at 55% 50%, rgba(120, 230, 200, 0.18), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(40, 20, 90, 0.85), transparent 65%);
  filter: blur(8px) saturate(1.1);
  animation: heroDrift 22s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.04); }
  50%  { transform: translate3d( 2%,  1%, 0) scale(1.08); }
  100% { transform: translate3d(-1%,  2%, 0) scale(1.04); }
}

/* Real video — empty by default; user drops a src in. */
.hero-dark__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

/* Central blurred halo behind content */
.hero-dark__halo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -45%);
  width: min(1100px, 90vw);
  height: 540px;
  background:
    radial-gradient(ellipse at center, rgba(40, 20, 70, 0.92) 0%, rgba(20, 10, 40, 0.7) 35%, transparent 70%);
  filter: blur(82px);
  pointer-events: none;
  z-index: 3;
  opacity: 0.9;
}

/* Content layer */
.hero-dark__content {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 0 80px;
}

/* Doc bar over dark */
.hero-dark .doc-bar {
  color: rgba(245, 241, 234, 0.6);
}
.hero-dark .doc-bar .label-muted { color: rgba(245,241,234,0.4); }
.hero-dark .rule-soft { background: rgba(245,241,234,0.15); }

/* Headline */
.h-hero-dark {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: clamp(56px, 9vw, 142px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0;
  max-width: 1200px;
}
.h-hero-dark .italic { font-style: italic; font-weight: 400; color: rgba(245,241,234,0.85); }

.gradient-text {
  background: linear-gradient(95deg, var(--grad-1) 0%, var(--grad-2) 45%, var(--grad-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero-dark__sub {
  margin: 28px 0 0;
  font-size: 19px;
  line-height: 1.55;
  color: rgba(245, 241, 234, 0.78);
  max-width: 560px;
}

.hero-dark__eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.75);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.hero-dark__eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: rgba(245,241,234,0.6);
}

.hero-dark__cta-row {
  display: flex; gap: 12px; margin-top: 36px;
  flex-wrap: wrap;
}

/* Dark variant buttons */
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 100px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--dark-text);
  transition: background 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(8px);
}
.btn-dark:hover { background: rgba(255,255,255,0.10); transform: translateY(-1px); }
.btn-dark--primary {
  background: var(--dark-text);
  color: var(--dark-bg);
  border-color: var(--dark-text);
}
.btn-dark--primary:hover { background: #fff; color: var(--dark-bg); }

/* ── Liquid-glass framework chips ──────────────────── */
.liquid-glass {
  position: relative;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.10);
  overflow: hidden;
}
.liquid-glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%,
    rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.fw-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 10px;
  border-radius: 100px;
  white-space: nowrap;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--dark-text);
}
.fw-chip__badge {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.06em;
  background: rgba(255,255,255,0.08);
  color: var(--dark-text);
  flex-shrink: 0;
}

/* ── Marquee ───────────────────────────────────────── */
.hero-dark__marquee {
  position: relative;
  z-index: 10;
  padding: 0 0 56px;
}
.hero-dark__marquee-inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  align-items: center;
}
.hero-dark__marquee-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.55);
  line-height: 1.55;
}
.hero-dark__marquee-track {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.marquee {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: marqueeScroll 36s linear infinite;
}
.marquee:hover { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Nav over dark hero ────────────────────────────── */
.nav.nav--over-dark {
  background: rgba(10, 6, 22, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(245, 241, 234, 0.14);
}
.nav.nav--over-dark .nav__brand .mono { color: var(--dark-text) !important; }
.nav.nav--over-dark .nav__brand .mono:nth-child(2) { color: rgba(245, 241, 234, 0.6) !important; }
/* Bioreactor mark — every ink-colored element adopts the brand color over dark */
.nav.nav--over-dark .nav__brand svg [stroke="currentColor"] { stroke: var(--dark-text); }
.nav.nav--over-dark .nav__brand svg rect:not([fill^="#c"]),
.nav.nav--over-dark .nav__brand svg circle:not([stroke]):not([fill^="#c"]) { fill: var(--dark-text); }
.nav.nav--over-dark .nav__link { color: var(--dark-text); }
.nav.nav--over-dark .nav__link .n { color: rgba(245, 241, 234, 0.45); }
.nav.nav--over-dark .nav__link:hover { color: var(--grad-1); }
.nav.nav--over-dark .btn--primary {
  background: var(--dark-text);
  color: var(--dark-bg);
  border-color: var(--dark-text);
}

/* Section that follows the dark hero — soft top edge */
.hero-dark + .s-section { border-top: 0; padding-top: 96px; position: relative; }
.hero-dark + .s-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--ink);
}

/* ── Hero animation (galaxy → validation loop) ─────── */
.hero-anim {
  position: absolute; inset: 0;
  z-index: 1;
  overflow: hidden;
}
.hero-anim__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 0.65; /* keep readable behind headline */
}
.hero-anim__caption {
  position: absolute;
  top: 96px; right: 56px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(10, 6, 22, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 241, 234, 0.14);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--dark-text);
  text-transform: uppercase;
}
.hero-anim__caption-num { color: var(--grad-3); }
.hero-anim__caption-text { color: rgba(245, 241, 234, 0.85); letter-spacing: 0.08em; text-transform: none; }
.hero-anim__timeline {
  position: absolute;
  top: 140px; right: 56px;
  z-index: 5;
  display: flex; gap: 6px;
}
.hero-anim__tick {
  width: 28px; height: 2px;
  background: rgba(245, 241, 234, 0.18);
  transition: background 0.4s ease;
}
.hero-anim__tick[data-on="true"] { background: rgba(168, 240, 214, 0.85); }

@media (max-width: 1000px) {
  .hero-anim__caption, .hero-anim__timeline { right: 32px; }
}
@media (max-width: 640px) {
  .hero-anim__caption { top: 76px; right: 20px; font-size: 10.5px; padding: 6px 12px; }
  .hero-anim__timeline { top: 112px; right: 20px; }
  .hero-anim__tick { width: 20px; }
}

@media (max-width: 1000px) {
  .hero-dark__content { padding: 120px 0 60px; }
  .hero-dark__marquee-inner { grid-template-columns: 1fr; gap: 20px; }
  .hero-dark__marquee-label { text-align: left; }
}
@media (max-width: 640px) {
  .hero-dark__sub { font-size: 16px; }
  .hero-dark__content { padding: 100px 0 48px; }
  .hero-dark__marquee { padding-bottom: 36px; }
}


/* ──────────────────────────────────────────────────────
   PMBS — Enhancement layer (v2)
   Adds rhythm, depth, editorial drama and motion on top of
   the warm-paper base. Loaded AFTER site.css.
   ────────────────────────────────────────────────────── */

:root {
  --clay:      #221b2b;  /* deep aubergine for the marquee band */
  --clay-2:    #2c2338;
  --surface-dark:   #2b2438;  /* aubergine — replaces dusky brown/ink on dark sections */
  --surface-dark-2: #221b2b;
  --teal:      #0f766e;
  --teal-deep: #0b574f;
  --teal-tint: rgba(15,118,110,0.08);
  --paper-3:   #e7e0cf;
}

/* ── Dark-surface recolor (aubergine, not dusky brown) ── */
.s-section--dark { background: var(--surface-dark); }
.footer { background: var(--surface-dark); }

/* ── Blueprint texture surface ─────────────────────── */
.s-section--blueprint {
  background:
    linear-gradient(rgba(15,118,110,0.035), rgba(15,118,110,0.035)),
    var(--paper);
  position: relative;
}
.s-section--blueprint::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(26,26,26,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,26,26,0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.s-section--blueprint > .s-container { position: relative; z-index: 1; }

/* Soft alt paper */
.s-section--alt { background: var(--paper-2); }

/* ── Giant ghost section numerals ──────────────────── */
.s-ghostnum {
  position: absolute;
  top: 40px;
  right: var(--pad-x);
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(140px, 20vw, 300px);
  line-height: 0.7;
  letter-spacing: -0.05em;
  color: var(--ink);
  opacity: 0.035;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.s-section--dark .s-ghostnum { color: var(--paper); opacity: 0.05; }
.s-section > .s-container { position: relative; z-index: 1; }

/* ── Scroll reveal ─────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.07s; }
.reveal[data-d="2"] { transition-delay: 0.14s; }
.reveal[data-d="3"] { transition-delay: 0.21s; }
.reveal[data-d="4"] { transition-delay: 0.28s; }
.reveal[data-d="5"] { transition-delay: 0.35s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Service cards: depth + teal edge on hover ─────── */
.grid-services { background: var(--paper); box-shadow: 0 1px 0 rgba(26,26,26,0.04); }
.service-card {
  transition: background 0.25s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease;
}
.service-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
  z-index: 2;
}
.service-card:hover {
  background: #fff;
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(26,26,26,0.45);
  z-index: 3;
}
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover .service-card__code {
  background: var(--teal); color: var(--paper);
  padding: 3px 8px; margin: -3px -8px;
}
.service-card__code { transition: all 0.2s ease; border-radius: 2px; }
.service-card .h-card { transition: color 0.2s ease; }

/* Glyph gets a subtle teal wash plate */
.service-card svg { transition: transform 0.3s ease; }
.service-card:hover svg { transform: scale(1.04); }

/* ── Sector cards: lift ────────────────────────────── */
.sector { transition: background 0.25s ease, transform 0.25s ease; background: rgba(245,241,234,0.5); }
.sector:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 16px 36px -26px rgba(26,26,26,0.4); position: relative; z-index: 2; }

/* ── Framework marquee band ────────────────────────── */
.fw-band {
  background: var(--clay);
  color: var(--paper);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 30px 0;
  overflow: hidden;
  position: relative;
}
.fw-band__head {
  max-width: var(--container);
  margin: 0 auto 20px;
  padding: 0 var(--pad-x);
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245,241,234,0.55);
}
.fw-track {
  display: flex; gap: 14px; width: max-content;
  animation: fwScroll 40s linear infinite;
  mask-image: none;
}
.fw-band__viewport {
  mask-image: linear-gradient(to right, transparent, #000 90px, #000 calc(100% - 90px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 90px, #000 calc(100% - 90px), transparent);
}
.fw-band:hover .fw-track { animation-play-state: paused; }
@keyframes fwScroll { to { transform: translateX(-50%); } }
.fw-pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 20px 11px 12px;
  border: 1px solid rgba(245,241,234,0.16);
  border-radius: 100px;
  white-space: nowrap;
  font-size: 14px; font-weight: 500;
  background: rgba(245,241,234,0.03);
}
.fw-pill__b {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em;
  background: var(--teal); color: var(--paper);
  padding: 4px 7px; border-radius: 6px;
}

/* ── Statement / manifesto band ────────────────────── */
.statement {
  background: var(--teal-deep);
  color: var(--paper);
  border-top: 1px solid var(--teal-deep);
  position: relative;
  overflow: hidden;
}
.statement::after {
  content: "";
  position: absolute; right: -8%; top: -40%;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(245,241,234,0.10), transparent 65%);
  pointer-events: none;
}
.statement__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(245,241,234,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245,241,234,0.05) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
}
.statement__quote {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 1100px;
  margin: 0;
}
.statement__quote em { font-style: italic; color: #a8f0d6; }

/* ── Dark Compliance variant ───────────────────────── */
.s-section--dark .grid-compliance { border-color: rgba(245,241,234,0.22); }
.s-section--dark .grid-compliance > div { border-color: rgba(245,241,234,0.22) !important; }
.s-section--dark .grid-compliance .mono { color: rgba(245,241,234,0.92); }

/* Buttons gain a hover translate */
.btn { transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.btn:hover { transform: translateY(-1px); }

/* Section eyebrow gets a teal lead tick */
.eyebrow--tick::before {
  content: "";
  display: inline-block;
  width: 18px; height: 2px;
  background: var(--teal);
  vertical-align: middle;
  margin-right: 10px;
}

/* Role rows: teal marker on hover */
.role { transition: padding 0.2s ease, background 0.2s ease; position: relative; }
.role::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--teal);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.25s ease;
}
.role:hover::before { transform: scaleY(1); }

@media (max-width: 1000px) {
  .s-ghostnum { font-size: 120px; top: 24px; }
}
@media (max-width: 640px) {
  .s-ghostnum { display: none; }
  .statement { }
}


/* ──────────────────────────────────────────────────────
   PMBS — DARK THEME
   Loaded LAST. Remaps the palette to a deep aubergine-ink
   base with cream text + teal accent. Keeps the existing
   "dark sections" (aubergine panels) as elevated rhythm.
   ────────────────────────────────────────────────────── */

:root {
  /* surfaces — deep navy/indigo world (a colour, not black) */
  --paper:   #15233f;   /* page base — deep navy */
  --paper-2: #1d2e4d;   /* elevated surface / hover */
  --paper-3: #26395c;
  --edge:    #324a6e;

  /* text */
  --ink:   #f1ece2;     /* warm cream */
  --ink-2: #aeb9cf;     /* muted slate-blue */
  --muted: #8291a9;     /* tertiary */

  /* accent — brightened teal so it pops on navy */
  --rust:      #1aa897;
  --teal:      #1aa897;
  --teal-deep: #0d6f64;

  /* drawing palette (SVG strokes/fills follow theme) */
  --draw-ink:   #f1ece2;
  --draw-paper: #15233f;

  /* hairlines on navy */
  --hairline: rgba(241,236,226,0.16);

  /* panels — deeper navy, distinct from base */
  --surface-dark:   #101b33;
  --surface-dark-2: #0d1730;
  --clay:           #0d1730;
}

html, body { background: var(--paper); color: var(--ink); }

/* ── Nav ───────────────────────────────────────────── */
.nav {
  background: rgba(21,18,28,0.82);
  border-bottom-color: rgba(236,231,223,0.14);
}

/* ── Rules / hairlines ─────────────────────────────── */
.rule       { background: var(--ink); }
.rule-soft  { background: rgba(236,231,223,0.16); }

/* ── Buttons ───────────────────────────────────────── */
.btn--ghost { border-color: rgba(236,231,223,0.4); }
/* (.btn / .btn--primary follow --ink/--paper vars → invert correctly) */

/* ── Service cards ─────────────────────────────────── */
.grid-services { background: var(--paper); box-shadow: none; }
.service-card  { background: var(--paper); }
.service-card:hover {
  background: var(--paper-2);
  box-shadow: 0 18px 44px -22px rgba(0,0,0,0.7);
}

/* ── Sectors / blueprint ───────────────────────────── */
.s-section--blueprint {
  background:
    linear-gradient(rgba(15,118,110,0.06), rgba(15,118,110,0.06)),
    var(--paper);
}
.s-section--blueprint::before {
  background-image:
    linear-gradient(to right, rgba(236,231,223,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(236,231,223,0.05) 1px, transparent 1px);
}
.sector { background: rgba(255,255,255,0.025); }
.sector:hover {
  background: var(--paper-2);
  box-shadow: 0 16px 40px -24px rgba(0,0,0,0.7);
}

/* ── Dark sections keep light text on aubergine ────── */
.s-section--dark { color: #ece7df; }
.footer   { color: #ece7df; }
.footer a { color: #ece7df; }

/* ── Form fields ───────────────────────────────────── */
.field { border-bottom-color: rgba(236,231,223,0.28); }
.field input, .field textarea, .field select { color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: rgba(236,231,223,0.35); }

/* ── Careers rows ──────────────────────────────────── */
.role { border-bottom-color: rgba(236,231,223,0.16); }
.role:hover { background: var(--paper-2); }

/* ── Ghost numerals ────────────────────────────────── */
.s-ghostnum { color: var(--ink); opacity: 0.045; }
.s-section--dark .s-ghostnum { color: var(--paper); opacity: 0.10; }

/* ── Misc depth ────────────────────────────────────── */
.service-card:hover .service-card__code { color: #fff; }

/* ──────────────────────────────────────────────────────
   PER-SECTION COLOUR BLOCKING
   Each section gets its own deep jewel tone so the page
   reads as a considered, professional sequence. All tones
   are dark enough for cream text + teal accent to hold.
   Crisp-but-soft cream hairlines separate them.
   ────────────────────────────────────────────────────── */
.s-section { border-top-color: rgba(241,236,226,0.22); }

/* 1 · Hero — deep navy */
#top { background: #14223d; }

/* marquee panel — aubergine */
.fw-band { background: #221b2b; }

/* 2 · Services — deep indigo (teal codes pop) */
#services { background: #1b2147; }

/* 3 · Sectors — deep slate-blue (blueprint grid kept) */
#sectors { background: #172a45; }

/* 4 · About — dusky umber (warm break) */
#about { background: #2a2118; }

/* statement — teal accent band (unchanged hue) */

/* 5 · Process — aubergine panel */
#process { background: #2b2438; }

/* 6 · Compliance — deep teal-navy panel */
#compliance { background: #102a33; }

/* 7 · Careers — dusky taupe-brown (warm break) */
#careers { background: #271f17; }

/* 8 · Contact — deep navy */
#contact { background: #14223d; }

/* footer — deepest ink-navy */
.footer { background: #0b1426; }

/* Cards/panels sit as cool navy tiles on every section,
   reading as consistent components across the hues. */
.grid-services, .service-card { background: #111d34; }
.service-card:hover { background: #1a2845; }
.sector { background: rgba(255,255,255,0.04); }
.sector:hover { background: #1a2845; }

/* Keep the elevated "BEYOND THE LIST" + careers alt readable */
.s-section--alt { background: #271f17; }

/* PHP rewrite additions */
html { scroll-behavior: smooth; }
.pmbs-logo { display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.pmbs-logo-mark { width:32px; height:32px; display:inline-grid; place-items:center; border:1px solid currentColor; border-radius:50%; font:700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color:inherit; }
.pmbs-logo-text { font:700 17px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.14em; }
.btn-dot { width:6px; height:6px; background:#0f766e; border-radius:50%; display:inline-block; }
.hero-dark { border-top:0; padding-top:56px; }
.hero-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:start; padding-top:56px; }
.hero-eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:32px; }
.hero-eyebrow span { width:22px; height:1px; background:var(--ink); display:inline-block; }
.h-display span, .italic { font-style:italic; font-weight:400; }
.hero-copy { margin-top:36px; max-width:460px; display:grid; grid-template-columns:14px 1fr; gap:14px; }
.hero-copy div { width:2px; background:var(--rust); margin-top:4px; }
.hero-copy p, .s-head__meta p, .service-card p, .sector p { margin:0; font-size:15px; line-height:1.55; color:var(--ink-2); }
.hero-actions { display:flex; gap:12px; margin-top:40px; flex-wrap:wrap; }
.framework-strip { margin-top:48px; }
.framework-list { display:flex; flex-wrap:wrap; gap:10px 22px; font-size:12px; letter-spacing:.08em; color:var(--ink-2); margin-top:12px; }
.hero-visual { position:relative; min-height:520px; }
.bioreactor-card { position:relative; min-height:520px; border:1px solid var(--ink); background:rgba(255,255,255,.35); overflow:hidden; display:grid; place-items:center; }
.bioreactor-card:before { content:""; position:absolute; inset:24px; border:1px dashed var(--hairline); }
.bio-tank { position:relative; width:180px; height:320px; border:8px solid var(--ink); border-radius:34px 34px 54px 54px; background:rgba(255,255,255,.18); overflow:hidden; }
.bio-tank:before { content:""; position:absolute; top:-8px; left:45px; right:45px; height:24px; background:var(--ink); }
.bio-liquid { position:absolute; left:0; right:0; bottom:0; height:42%; background:rgba(15,118,110,.35); }
.bio-line { position:absolute; left:50%; top:0; bottom:46px; width:4px; background:var(--ink); transform:translateX(-50%); }
.bio-line-2 { top:200px; left:25%; right:25%; bottom:auto; width:auto; height:4px; transform:none; }
.bio-dot { position:absolute; left:50%; top:38px; width:20px; height:20px; background:#0f766e; border-radius:50%; transform:translateX(-50%); }
.bio-panel { position:absolute; right:28px; bottom:28px; border:1px solid var(--ink); background:var(--paper); padding:16px 18px; min-width:160px; }
.bio-panel span, .bio-panel small { display:block; font:600 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.16em; color:var(--muted); }
.bio-panel strong { display:block; font-size:34px; letter-spacing:-.04em; color:var(--ink); margin:4px 0; }
.hero-rule { margin-top:48px; }
.s-head { gap:32px; }
.s-head__title .eyebrow { margin-bottom:18px; }
.s-head__title .h-section span, #careers .h-section span, #process .h-section span { color:var(--muted); }
.card-top { display:flex; justify-content:space-between; align-items:flex-start; }
.simple-glyph { width:64px; height:64px; border:1px solid var(--ink); display:grid; place-items:center; margin:16px 0; font-size:26px; color:var(--rust); }
.simple-glyph-small { width:54px; height:54px; font-size:20px; }
.section-note { display:flex; justify-content:space-between; margin-top:18px; gap:16px; flex-wrap:wrap; }
.sector-code { font-size:11px; letter-spacing:.18em; color:var(--rust); font-weight:600; }
.sector-row { display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--ink); border-left:1px solid var(--ink); }
.sector { border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:22px 22px 26px; min-height:230px; display:flex; flex-direction:column; justify-content:space-between; }
.sector-dark { margin-top:0; background:var(--ink); color:var(--paper); border:1px solid var(--ink); min-height:auto; display:block; }
.sector-dark p { color:rgba(245,241,234,.78); max-width:680px; margin:16px 0; }
.sector-dark a { font-size:12px; letter-spacing:.18em; text-transform:uppercase; border-bottom:1px solid var(--paper); padding-bottom:4px; }
.about-tick { margin-bottom:32px; }
.about-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:80px; align-items:start; }
.about-title { margin:0; font-size:clamp(40px,5.2vw,76px); line-height:1.02; letter-spacing:-.02em; font-weight:400; }
.about-title span { font-style:italic; }
.about-title em { color:var(--rust); font-style:normal; }
.about-copy { margin-top:40px; display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.about-copy p { margin:0; font-size:15px; line-height:1.6; color:var(--ink-2); }
.facts { border-left:1px solid var(--ink); padding-left:32px; }
.facts dl { margin:18px 0 0; display:grid; gap:0; }
.facts dt { font:600 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--rust); letter-spacing:.16em; text-transform:uppercase; padding-top:16px; border-top:1px solid var(--hairline); }
.facts dd { margin:4px 0 16px; color:var(--ink-2); }
.dark-muted { margin-bottom:18px; color:rgba(245,241,234,.7); }
.s-section--dark .s-head__meta p { color:rgba(245,241,234,.75); }
.phase-del-title { font-size:10px; letter-spacing:.18em; color:rgba(245,241,234,.55); margin-bottom:8px; }
.phase-del { font-size:12px; color:rgba(245,241,234,.95); display:flex; gap:8px; align-items:baseline; margin-bottom:4px; }
.phase-del span { color:#0f766e; }
.process-bar { color:rgba(245,241,234,.7); margin-top:24px; border-top:1px solid rgba(245,241,234,.18); padding-top:16px; }
.grid-compliance { display:grid; grid-template-columns:repeat(3, 1fr); border:1px solid var(--ink); }
.compliance-card { padding:22px 24px; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); min-height:200px; display:flex; flex-direction:column; justify-content:space-between; }
.compliance-card:nth-child(3n) { border-right:0; }
.compliance-card:nth-last-child(-n+3) { border-bottom:0; }
.compliance-card ul { list-style:none; padding:0; margin:0; }
.compliance-card li { font-size:13px; line-height:1.75; }
.compliance-card li span { color:var(--rust); margin-right:8px; }
.rust-dot { color:var(--rust); }
.roles { border-top:1px solid var(--ink); }
.role__body { font-size:13px; color:var(--ink-2); margin-top:4px; }
.careers-note { margin-top:28px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.careers-note a { border-bottom:1px solid var(--ink-2); color:var(--ink-2); }
.contact-head { padding-bottom:56px; }
.contact-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:64px; align-items:start; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.small-gap { margin-top:8px; }
.choice-group { margin-top:28px; }
.choice-group label { display:block; margin-bottom:12px; }
.chip-wrap { display:flex; flex-wrap:wrap; gap:8px; }
.submit-row { display:flex; align-items:center; gap:16px; margin-top:32px; flex-wrap:wrap; }
.contact-aside { border-left:1px solid var(--ink); padding-left:32px; }
.contact-row { display:block; padding:14px 0; border-bottom:1px solid var(--hairline); }
.contact-row span { display:block; font:600 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.contact-row strong { margin-top:4px; display:flex; justify-content:space-between; align-items:center; font:500 16px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--ink); }
.contact-row strong:after { content:"↗"; color:var(--rust); }
.hq { margin-top:32px; }
.hq p { font-size:15px; line-height:1.55; }
.hq .mono { margin-top:12px; font-size:11px; letter-spacing:.16em; color:var(--muted); }
.sla { margin-top:32px; border-top:1px solid var(--hairline); padding-top:18px; }
.sla p { font-size:14px; color:var(--ink-2); }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; }
.footer-brand { margin-top:14px; font-size:14px; font-weight:600; letter-spacing:.06em; color:var(--paper); }
.footer-brand span { opacity:.6; }
.footer-copy { margin-top:18px; font-size:14px; line-height:1.6; max-width:360px; color:rgba(245,241,234,.7); }
.footer-col h4 { margin:0 0 14px; font:600 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.16em; text-transform:uppercase; color:rgba(245,241,234,.5); }
.footer-col a { display:block; margin:9px 0; color:rgba(245,241,234,.78); font-size:14px; }
.footer-bottom { margin-top:80px; padding-top:24px; border-top:1px solid rgba(245,241,234,.18); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.footer-bottom div { font-size:11px; letter-spacing:.16em; opacity:.7; }
.alert { padding:14px 16px; margin-bottom:22px; border:1px solid var(--sage); background:rgba(107,122,90,.10); color:var(--ink); }
@media (max-width: 900px) {
  .hero-grid, .about-grid, .contact-grid, .footer-grid { grid-template-columns:1fr; }
  .sector-row, .grid-compliance, .form-grid, .about-copy { grid-template-columns:1fr; }
  .hero-visual { min-height:360px; }
  .bioreactor-card { min-height:360px; }
  .facts, .contact-aside { border-left:0; padding-left:0; border-top:1px solid var(--ink); padding-top:24px; }
  .nav__links { display:none; }
}


/* Fix: Beyond the list box visibility - light background with dark text */
.s-section--blueprint .sector.sector-dark,
#sectors .sector.sector-dark {
  background: #f1ece2 !important;
  color: #14223d !important;
  border: 1px solid rgba(20, 34, 61, 0.25) !important;
  box-shadow: none !important;
}

.s-section--blueprint .sector.sector-dark .eyebrow,
.s-section--blueprint .sector.sector-dark .eyebrow-muted,
.s-section--blueprint .sector.sector-dark p,
.s-section--blueprint .sector.sector-dark .sans,
.s-section--blueprint .sector.sector-dark a,
.s-section--blueprint .sector.sector-dark .mono,
#sectors .sector.sector-dark .eyebrow,
#sectors .sector.sector-dark .eyebrow-muted,
#sectors .sector.sector-dark p,
#sectors .sector.sector-dark .sans,
#sectors .sector.sector-dark a,
#sectors .sector.sector-dark .mono {
  color: #14223d !important;
  background: transparent !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.s-section--blueprint .sector.sector-dark p,
#sectors .sector.sector-dark p {
  color: rgba(20, 34, 61, 0.82) !important;
  opacity: 1 !important;
}

.s-section--blueprint .sector.sector-dark a,
#sectors .sector.sector-dark a {
  color: #14223d !important;
  border-bottom: 1px solid #14223d !important;
}

/* Original bundled hero bioreactor - animation matched to source */
.hero-visual {
  min-height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.original-bioreactor {
  position: relative;
  width: min(100%, 600px);
  height: 640px;
}

.original-bio-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@keyframes abr-spin {
  to { transform: rotate(360deg); }
}

@keyframes abr-imp {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.82); }
}

@keyframes abr-needle {
  0%, 100% { transform: rotate(-14deg); }
  50% { transform: rotate(13deg); }
}

@keyframes abr-rise {
  0% {
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }
  12% {
    opacity: 0.7;
  }
  88% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-208px) scale(1);
    opacity: 0;
  }
}

@keyframes abr-surface {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.9;
  }
  50% {
    transform: translateY(2px);
    opacity: 0.55;
  }
}

@keyframes abr-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

@keyframes abr-scan {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  12% {
    opacity: 0.5;
  }
  88% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(316px);
    opacity: 0;
  }
}

@keyframes abr-trend {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-72px);
  }
}

@keyframes abr-draw {
  from {
    stroke-dashoffset: 220;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Important: these transform origins use the original SVG coordinate points */
.abr-spin {
  animation: abr-spin 3.4s linear infinite;
  transform-origin: 300px 104px;
}

.abr-imp {
  animation: abr-imp 2.4s ease-in-out infinite;
}

.abr-imp-1 {
  transform-origin: 300px 322px;
}

.abr-imp-2 {
  transform-origin: 300px 392px;
  animation-delay: -1.1s;
}

.abr-needle {
  animation: abr-needle 4.2s ease-in-out infinite;
  transform-origin: 480px 202px;
}

.abr-bubble {
  animation-name: abr-rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.abr-surface {
  animation: abr-surface 5.2s ease-in-out infinite;
  transform-origin: 300px 240px;
}

.abr-blink {
  animation: abr-blink 1.7s ease-in-out infinite;
}

.abr-scan {
  animation: abr-scan 7.5s ease-in-out infinite;
}

.abr-trend {
  animation: abr-trend 4s linear infinite;
}

.abr-draw {
  stroke-dasharray: 220;
  animation: abr-draw 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .abr-spin,
  .abr-imp,
  .abr-needle,
  .abr-bubble,
  .abr-surface,
  .abr-blink,
  .abr-scan,
  .abr-trend,
  .abr-draw {
    animation: none !important;
  }
}

@media (max-width: 900px) {
  .hero-visual {
    min-height: 520px;
  }

  .original-bioreactor {
    height: 540px;
  }
}