/* ────────────────────────────────────────────────────────
   ABOUT
   Editorial layout matching the home, Insights, and Careers
   pages: restrained weights, no eyebrow pills, no glows, no
   gradient text, no decorative icon cards.
   ──────────────────────────────────────────────────────── */

.medibyx-about-shell {
    margin: 0 auto;
    max-width: var(--mbx-shell-max);
    padding-left: var(--mbx-shell-pad);
    padding-right: var(--mbx-shell-pad);
}

/* ── HERO ────────────────────────────────────────────── */
/* Its own shape. The shared solution hero sets copy beside a portrait
   image; Careers stacks copy over one narrow band. Here the headline and
   the intro sit side by side as one text row, with a wide 21:7 band
   spanning the full content width beneath them. */
.medibyx-about-hero {
    padding: 168px 0 88px;
}

/* ── PHOTOGRAPHIC HERO ───────────────────────────────────
   The office picture used to sit in a rounded band under the headline. It is
   the background now, with the copy over it, so the page opens on one block
   instead of two that said the same thing.

   Dark scrims and white type, matching Careers -- the other page about the
   company itself. This photograph runs dark on the left and bright down the
   corridor in the middle, so the horizontal pass has to carry most of the work
   where the copy sits. */
.medibyx-about-hero--photo {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #16202b;
    padding: 184px 0 104px;
}

.medibyx-about-hero__image {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
}

.medibyx-about-hero--photo::before,
.medibyx-about-hero--photo::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    pointer-events: none;
}

.medibyx-about-hero--photo::before {
    background: linear-gradient(90deg, rgba(8, 14, 22, 0.95) 0%, rgba(8, 14, 22, 0.92) 38%, rgba(8, 14, 22, 0.74) 70%, rgba(8, 14, 22, 0.5) 100%);
}

.medibyx-about-hero--photo::after {
    background: linear-gradient(180deg, rgba(8, 14, 22, 0.5) 0%, rgba(8, 14, 22, 0.24) 48%, rgba(8, 14, 22, 0.58) 100%);
}

.medibyx-about-hero--photo .medibyx-about-hero__row {
    position: relative;
    z-index: 2;
    padding-bottom: 0;
}

/* Both classes, deliberately. `.medibyx-about-hero h1` further down this file
   sets var(--mbx-ink) at the same specificity, and being later it won -- so the
   headline rendered near-black over a dark photograph. Caught on the live site,
   not in the replica, because the replica had only this rule. */
.medibyx-about-hero.medibyx-about-hero--photo h1 {
    color: #ffffff;
}

/* Lighter than the #d4dae2 the other photographic heroes use. This picture is
   the brightest of the four -- a lit corridor runs straight through the middle
   of it -- so at #d4dae2 the intro measured 6.56:1, past AA but short of the
   7:1 the rest of them clear. */
.medibyx-about-hero--photo .medibyx-about-hero__intro {
    color: #e3e8ee;
}

@media (max-width: 900px) {
    .medibyx-about-hero--photo {
        padding: 140px 0 72px;
    }

    /* The copy spans the full width on a phone and crosses the bright corridor,
       so narrow screens get an even pass instead of a left-weighted one. */
    .medibyx-about-hero--photo::before {
        background: linear-gradient(90deg, rgba(8, 14, 22, 0.94) 0%, rgba(8, 14, 22, 0.9) 55%, rgba(8, 14, 22, 0.87) 100%);
    }
}

.medibyx-about-hero__row {
    align-items: end;
    display: grid;
    gap: 40px 64px;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    padding-bottom: 64px;
}

@media (max-width: 900px) {
    .medibyx-about-hero {
        padding-top: 128px;
    }

    .medibyx-about-hero__row {
        gap: 24px;
        grid-template-columns: minmax(0, 1fr);
        padding-bottom: 44px;
    }
}

.medibyx-about-hero h1 {
    color: var(--mbx-ink);
    font-size: var(--mbx-type-display);
    font-weight: 600;
    letter-spacing: -0.055em;
    line-height: 1.02;
    margin: 0;
    max-width: 18ch;
}

/* Sitting in its own column, the intro no longer needs the 62ch cap
   that kept it from running the full width of the page. */
.medibyx-about-hero__intro {
    color: var(--mbx-muted);
    font-size: var(--mbx-type-body);
    line-height: 1.72;
    margin: 0;
}

/* ── SECTIONS ────────────────────────────────────────── */
.medibyx-about-section {
    padding: 0 0 96px;
}

.medibyx-about-section--bordered .medibyx-about-shell {
    border-top: 1px solid var(--mbx-line);
    padding-top: 56px;
}

.medibyx-about-section__title {
    color: var(--mbx-ink);
    font-size: var(--mbx-type-label);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 34px;
}

/* Heading in one column, body text in the other. */
.medibyx-about-split {
    align-items: start;
    display: grid;
    gap: 48px 64px;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.medibyx-about-split h2 {
    color: var(--mbx-ink);
    font-size: var(--mbx-type-section);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin: 0;
    max-width: 16ch;
}

.medibyx-about-split__body p {
    color: var(--mbx-muted);
    font-size: var(--mbx-type-body);
    line-height: 1.72;
    margin: 0 0 18px;
    max-width: 62ch;
}

.medibyx-about-split__body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .medibyx-about-split {
        gap: 24px;
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── VISION AND MISSION ──────────────────────────────── */
/* Two columns separated by a rule, not floating icon cards. */
.medibyx-about-statements {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.medibyx-about-statements > div {
    border-left: 1px solid var(--mbx-line);
    padding: 4px 0 4px 32px;
}

.medibyx-about-statements > div:first-child {
    padding-left: 0;
    border-left: 0;
    padding-right: 32px;
}

/* 1.0625rem, the card heading size the solution and industry pages use.
   This was 1.22rem -- the very same value as `.medibyx-about-section__title`
   above it, so the h2 labelling the block and the h3s inside it rendered at
   an identical 19.5px in an identical weight. There was no hierarchy to
   read: the heading did not look like a heading, it looked like the first
   card. */
.medibyx-about-statements h3 {
    color: var(--mbx-ink);
    font-size: var(--mbx-type-card);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
}

.medibyx-about-statements p {
    color: var(--mbx-muted);
    font-size: var(--mbx-type-body);
    line-height: 1.72;
    margin: 0;
}

@media (max-width: 768px) {
    .medibyx-about-statements {
        grid-template-columns: minmax(0, 1fr);
    }

    .medibyx-about-statements > div,
    .medibyx-about-statements > div:first-child {
        border-left: 0;
        padding: 0;
    }

    .medibyx-about-statements > div + div {
        border-top: 1px solid var(--mbx-line);
        margin-top: 28px;
        padding-top: 28px;
    }
}

/* ── CLOSING NOTE ────────────────────────────────────── */
.medibyx-about-cta {
    background: #050b14;
    padding: 104px 0;
}

/* The cap matches `.mbx-solution-cta h2` exactly. About carries its own
   closing band rather than the shared component, and the two clamps had
   drifted apart at the top end -- 2.75rem against 2.6rem, which rendered
   as 43.2px here and 41.6px on every other page for what a reader sees as
   the same block. */
.medibyx-about-cta h2 {
    color: #ffffff;
    font-size: var(--mbx-type-cta);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.08;
    margin: 0;
    max-width: 20ch;
}

.medibyx-about-cta p {
    color: #9aa4b1;
    font-size: var(--mbx-type-body);
    line-height: 1.72;
    margin: 22px 0 0;
    max-width: 58ch;
}

.medibyx-about-cta__link {
    border-bottom: 1px solid rgba(240, 144, 5, 0.5);
    color: #ffffff;
    display: inline-block;
    font-size: var(--mbx-type-body);
    margin-top: 28px;
    padding-bottom: 3px;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.medibyx-about-cta__link:hover {
    border-bottom-color: var(--mbx-orange);
    color: var(--mbx-orange);
}

.medibyx-about-cta__link:focus-visible {
    outline: 2px solid var(--mbx-orange);
    outline-offset: 4px;
}

@media (max-width: 768px) {
    .medibyx-about-hero {
        padding: 132px 0 56px;
    }

    .medibyx-about-section {
        padding-bottom: 72px;
    }

    .medibyx-about-cta {
        padding: 76px 0;
    }
}


/* 28px is well under the floor, and this is the single action on the page. */
@media (pointer: coarse) {
    .medibyx-about-cta__link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}