/* =========================================================
   MAC-JIM ABOUT PAGE
   Premium Editorial Corporate Design — V2
   Dedicated About-only stylesheet
   ========================================================= */

.mj-about-page {
    --mj-primary: var(--site-primary-color, #0B315F);
    --mj-accent: var(--site-secondary-color, #D6A12A);

    --mj-ink: #121a25;
    --mj-text: #3f4a59;
    --mj-muted: #6d7684;
    --mj-soft: #f5f3ee;
    --mj-paper: #fbfaf7;
    --mj-white: #ffffff;

    --mj-border: rgba(16, 24, 40, 0.10);

    overflow: hidden;

    background: var(--mj-paper);
    color: var(--mj-ink);
}

.mj-about-page *,
.mj-about-page *::before,
.mj-about-page *::after {
    box-sizing: border-box;
}


/* =========================================================
   SHARED ELEMENTS
   ========================================================= */

.mj-about-page .mj-about-kicker {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin: 0 0 14px;

    color: var(--mj-primary);

    font-size: 10px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.mj-about-page .mj-about-kicker > span {
    display: block;

    width: 30px;
    height: 1px;

    background: var(--mj-accent);
}

.mj-about-page .mj-about-kicker--light {
    color: rgba(255,255,255,0.80);
}

.mj-about-page .mj-about-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 35px;

    margin-bottom: 42px;
}

.mj-about-page .mj-about-heading h2 {
    max-width: 650px;

    margin: 0;

    color: var(--mj-ink);

    font-size: clamp(34px, 3.6vw, 52px);
    font-weight: 650;

    line-height: 1.06;

    letter-spacing: -0.04em;
}

.mj-about-page .mj-about-section-number {
    flex-shrink: 0;

    color: rgba(11,49,95,0.11);

    font-size: 52px;
    font-weight: 800;

    line-height: 0.85;

    letter-spacing: -0.05em;
}

.mj-about-page .mj-about-image-fallback {
    width: 100%;
    height: 100%;

    min-height: inherit;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(214,161,42,0.15),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            var(--mj-primary),
            #071729
        );
}

.mj-about-page .mj-about-image-fallback span {
    max-width: 80%;

    color: rgba(255,255,255,0.52);

    font-size: 10px;
    font-weight: 800;

    text-align: center;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}



/* =========================================================
   01 — ABOUT OPENING
   Calm, image-led institutional hero
   ========================================================= */

.mj-about-page .mj-about-opening {
    position: relative;
    padding: 62px 0 0;
    overflow: hidden;
    background: #fbfaf7;
    color: var(--mj-ink);
}

.mj-about-page .mj-about-opening__intro {
    position: relative;
    z-index: 2;
}

.mj-about-page .mj-about-opening__rail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 17px;
    border-bottom: 1px solid rgba(7,20,38,.13);
}

.mj-about-page .mj-about-opening__rail span,
.mj-about-page .mj-about-opening__rail strong {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.mj-about-page .mj-about-opening__rail span {
    color: var(--mj-primary);
}

.mj-about-page .mj-about-opening__rail strong {
    color: var(--mj-accent);
}

.mj-about-page .mj-about-opening__headline-grid {
    display: grid;
    grid-template-columns: minmax(0,1.45fr) minmax(270px,.55fr);
    gap: 72px;
    align-items: end;
    padding: 44px 0 48px;
}

.mj-about-page .mj-about-opening__headline {
    max-width: 860px;
}

.mj-about-page .mj-about-opening__headline h1 {
    margin: 0;
    color: #0b1a2a;
    font-size: clamp(44px,5.4vw,74px);
    font-weight: 650;
    line-height: .98;
    letter-spacing: -.052em;
    text-wrap: balance;
}

.mj-about-page .mj-about-opening__support {
    max-width: 390px;
    padding-bottom: 5px;
}

.mj-about-page .mj-about-opening__support p {
    margin: 0;
    color: #626b75;
    font-size: 13.5px;
    line-height: 1.82;
}

.mj-about-page .mj-about-opening__support a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(11,49,95,.55);
    color: var(--mj-primary);
    text-decoration: none;
    font-size: 9px;
    font-weight: 800;
    transition: gap .22s ease,color .22s ease,border-color .22s ease;
}

.mj-about-page .mj-about-opening__support a span {
    color: var(--mj-accent);
}

.mj-about-page .mj-about-opening__support a:hover {
    gap: 17px;
    color: var(--mj-accent);
    border-color: var(--mj-accent);
}

.mj-about-page .mj-about-opening__visual-wrap {
    position: relative;
}

.mj-about-page .mj-about-opening__visual {
    position: relative;
    height: clamp(440px,57vw,650px);
    overflow: hidden;
    background: #0a1b2f;
}

.mj-about-page .mj-about-opening__visual picture {
    position: absolute;
    inset: 0;
    display: block;
}

.mj-about-page .mj-about-opening__visual picture img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: var(--mj-about-image-position, center center);
    transition: transform .8s ease;
}

.mj-about-page .mj-about-opening__visual:hover picture img {
    transform: scale(1.012);
}

.mj-about-page .mj-about-opening__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 72% 24%,rgba(214,161,42,.15),transparent 30%),
        linear-gradient(145deg,#071426,#102d4c);
}

.mj-about-page .mj-about-opening__fallback span {
    color: rgba(255,255,255,.075);
    font-size: clamp(76px,12vw,170px);
    font-weight: 900;
    line-height: .8;
    letter-spacing: -.07em;
}

.mj-about-page .mj-about-opening__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to top,rgba(3,12,23,.66),rgba(3,12,23,.05) 58%),
        linear-gradient(90deg,rgba(3,12,23,.30),transparent 52%);
    opacity: max(.50,var(--mj-about-overlay,.55));
}

.mj-about-page .mj-about-opening__caption {
    position: absolute;
    left: 30px;
    bottom: 28px;
    z-index: 2;
}

.mj-about-page .mj-about-opening__caption span {
    display: block;
    margin-bottom: 7px;
    color: var(--mj-accent);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .17em;
}

.mj-about-page .mj-about-opening__caption strong {
    display: block;
    color: #fff;
    font-size: clamp(20px,2.25vw,31px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.03em;
}

.mj-about-page .mj-about-opening__principles {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    border-left: 1px solid rgba(7,20,38,.10);
    border-right: 1px solid rgba(7,20,38,.10);
    border-bottom: 1px solid rgba(7,20,38,.10);
}

.mj-about-page .mj-about-opening__principles span {
    padding: 17px 14px;
    border-right: 1px solid rgba(7,20,38,.09);
    color: #747d87;
    text-align: center;
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.mj-about-page .mj-about-opening__principles span:first-child {
    color: var(--mj-primary);
}

.mj-about-page .mj-about-opening__principles span:last-child {
    border-right: 0;
}


/* =========================================================
   02 — WHO WE ARE
   One visual, one story, no duplicate composition
   ========================================================= */

.mj-about-page .mj-about-identity {
    position: relative;
    padding: 108px 0 118px;
    background: #fff;
}

.mj-about-page .mj-about-identity__heading {
    display: grid;
    grid-template-columns: minmax(0,.38fr) minmax(0,1.62fr);
    gap: 52px;
    align-items: start;
    margin-bottom: 50px;
}

.mj-about-page .mj-about-identity__heading .mj-about-kicker {
    margin-top: 10px;
}

.mj-about-page .mj-about-identity__heading h2 {
    max-width: 700px;
    margin: 0;
    color: #101827;
    font-size: clamp(38px,4.2vw,58px);
    font-weight: 650;
    line-height: 1.02;
    letter-spacing: -.045em;
}

.mj-about-page .mj-about-identity__grid {
    display: grid;
    grid-template-columns: minmax(0,1.18fr) minmax(330px,.82fr);
    gap: 64px;
    align-items: center;
}

.mj-about-page .mj-about-identity__visual {
    position: relative;
    height: 545px;
    overflow: hidden;
    background: #dfe4e9;
    box-shadow: 0 26px 70px rgba(7,20,38,.10);
}

.mj-about-page .mj-about-identity__visual > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    transition: transform .65s ease;
}

.mj-about-page .mj-about-identity__visual:hover > img {
    transform: scale(1.018);
}

.mj-about-page .mj-about-identity__image-label {
    position: absolute;
    left: 24px;
    bottom: 24px;
    padding: 10px 13px;
    border-left: 2px solid var(--mj-accent);
    background: rgba(5,14,27,.88);
    color: #fff;
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: .15em;
}

.mj-about-page .mj-about-identity__copy {
    max-width: 520px;
}

.mj-about-page .mj-about-identity__eyebrow {
    display: block;
    margin-bottom: 18px;
    color: var(--mj-accent);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .18em;
}

.mj-about-page .mj-about-identity__lead {
    margin: 0;
    color: #2f3947;
    font-size: 18px;
    line-height: 1.72;
}

.mj-about-page .mj-about-identity__secondary {
    margin: 24px 0 0;
    color: var(--mj-muted);
    font-size: 14px;
    line-height: 1.86;
}

.mj-about-page .mj-about-identity__signature {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 34px;
}

.mj-about-page .mj-about-identity__signature > span {
    width: 48px;
    height: 1px;
    background: var(--mj-accent);
}

.mj-about-page .mj-about-identity__signature small {
    color: #8c949e;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .13em;
}

@media (max-width: 980px) {
    .mj-about-page .mj-about-opening__headline-grid {
        grid-template-columns: minmax(0,1.2fr) minmax(250px,.8fr);
        gap: 44px;
    }

    .mj-about-page .mj-about-opening__headline h1 {
        font-size: clamp(44px,6.7vw,62px);
    }

    .mj-about-page .mj-about-identity__heading {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 38px;
    }

    .mj-about-page .mj-about-identity__heading .mj-about-kicker {
        margin-top: 0;
    }

    .mj-about-page .mj-about-identity__grid {
        grid-template-columns: 1fr 1fr;
        gap: 38px;
    }

    .mj-about-page .mj-about-identity__visual {
        height: 485px;
    }
}

@media (max-width: 700px) {
    .mj-about-page .mj-about-opening {
        padding-top: 38px;
    }

    .mj-about-page .mj-about-opening__headline-grid {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 30px 0 36px;
    }

    .mj-about-page .mj-about-opening__headline h1 {
        font-size: 42px;
        line-height: .98;
    }

    .mj-about-page .mj-about-opening__support {
        max-width: 530px;
    }

    .mj-about-page .mj-about-opening__visual {
        height: 440px;
    }

    .mj-about-page .mj-about-opening__caption {
        left: 21px;
        right: 21px;
        bottom: 21px;
    }

    .mj-about-page .mj-about-opening__principles {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .mj-about-page .mj-about-opening__principles span:nth-child(2) {
        border-right: 0;
    }

    .mj-about-page .mj-about-opening__principles span:nth-child(-n+2) {
        border-bottom: 1px solid rgba(7,20,38,.09);
    }

    .mj-about-page .mj-about-identity {
        padding: 76px 0 84px;
    }

    .mj-about-page .mj-about-identity__heading h2 {
        font-size: 38px;
    }

    .mj-about-page .mj-about-identity__grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .mj-about-page .mj-about-identity__visual {
        height: 420px;
    }

    .mj-about-page .mj-about-identity__copy {
        max-width: none;
         margin-left: 12px;
    }
}

@media (max-width: 480px) {
    .mj-about-page .mj-about-opening__rail span,
    .mj-about-page .mj-about-opening__rail strong {
        font-size: 7px;
    }

    .mj-about-page .mj-about-opening__headline h1 {
        font-size: 35px;
    }

    .mj-about-page .mj-about-opening__support p {
        font-size: 12.5px;
    }

    .mj-about-page .mj-about-opening__visual {
        height: 350px;
    }

    .mj-about-page .mj-about-opening__caption strong {
        font-size: 22px;
    }

    .mj-about-page .mj-about-identity__heading h2 {
        font-size: 32px;
    }

    .mj-about-page .mj-about-identity__visual {
        height: 340px;
    }

    .mj-about-page .mj-about-identity__lead {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mj-about-page .mj-about-opening__visual picture img,
    .mj-about-page .mj-about-identity__visual > img {
        transition: none;
        transform: none;
    }
}


/* =========================================================
   03 — VISION & MISSION
   ========================================================= */

.mj-about-page .mj-about-purpose {
    padding: 90px 0 100px;

    background: #ece9e2;
}

.mj-about-page .mj-about-purpose__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 40px;

    padding-bottom: 28px;

    border-bottom:
        1px solid rgba(16,24,40,0.11);
}

.mj-about-page .mj-about-purpose__top p {
    max-width: 450px;

    margin: 0;

    color: #65707d;

    font-size: 13px;

    line-height: 1.75;
}

.mj-about-page .mj-about-purpose__statements {
    display: grid;

    grid-template-columns: 1fr 1fr;
}

.mj-about-page .mj-about-purpose__statement {
    position: relative;

    min-height: 345px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 46px 50px 46px 0;

    border-bottom:
        1px solid rgba(16,24,40,0.11);
}

.mj-about-page
.mj-about-purpose__statement + .mj-about-purpose__statement {
    padding-left: 50px;
    padding-right: 0;

    border-left:
        1px solid rgba(16,24,40,0.11);
}

.mj-about-page .mj-about-purpose__label {
    display: block;

    margin-bottom: 14px;

    color: var(--mj-primary);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.16em;
}

.mj-about-page .mj-about-purpose__statement h2 {
    max-width: 480px;

    margin: 0;

    color: var(--mj-ink);

    font-size: clamp(32px, 3.5vw, 48px);
    font-weight: 650;

    line-height: 1.05;

    letter-spacing: -0.04em;
}

.mj-about-page .mj-about-purpose__statement p {
    max-width: 510px;

    margin: 18px 0 0;

    color: #65707d;

    font-size: 14px;

    line-height: 1.8;
}

.mj-about-page .mj-about-purpose__statement::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 58px;
    height: 2px;

    background: var(--mj-accent);
}

.mj-about-page
.mj-about-purpose__statement + .mj-about-purpose__statement::after {
    left: 50px;
}


/* =========================================================
   04 — OUR STORY
   ========================================================= */

.mj-about-page .mj-about-story {
    padding: 105px 0;

    background: #ffffff;
}

.mj-about-page .mj-about-story__container {
    position: relative;
 border-radius: 15px;
    min-height: 590px;
}

.mj-about-page .mj-about-story__visual {
    width: 65%;
    height: 590px;

    overflow: hidden;

    background: #e2e6eb;
     border-radius: 15px;
    
}

.mj-about-page .mj-about-story__visual img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;
    border-radius: 15px;
}

.mj-about-page .mj-about-story__visual:hover img {
    transform: scale(1.02);
     border-radius: 15px;
}

.mj-about-page .mj-about-story__card {
    position: absolute;
     border-radius: 15px;

    right: 0;
    top: 50%;

    width: 46%;

    padding: 44px 46px 46px;

    transform: translateY(-50%);

    background: var(--mj-paper);

    box-shadow:
        0 24px 70px rgba(16,24,40,0.09);
}

.mj-about-page .mj-about-story__card h2 {
    margin: 0;

    color: var(--mj-ink);

    font-size: clamp(25px, 3vw, 31px);
    font-weight: 650;

    line-height: 1;

    letter-spacing: -0.04em;
}

.mj-about-page .mj-about-story__lead {
    margin: 22px 0 0;

    color: #344054;

    font-size: 14px;

    line-height: 1.72;
}

.mj-about-page .mj-about-story__body {
    margin-top: 20px;

    color: var(--mj-muted);

    font-size: 13px;

    line-height: 1.85;
}

.mj-about-page .mj-about-story__number {
    position: absolute;

    left: calc(65% - 38px);
    bottom: -8px;

    color: var(--mj-accent);

    font-size: 64px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.05em;
}


/* =========================================================
   05 — CORE VALUES
   ========================================================= */

.mj-about-page .mj-about-values {
    padding: 95px 0 105px;

    background: #f2efe8;
}

.mj-about-page .mj-about-values__grid {
    display: grid;

    grid-template-columns:
        1.15fr 0.85fr;

    gap: 20px;
}

.mj-about-page .mj-about-values__item {
    display: grid;

    grid-template-columns:
        0.8fr 1.2fr;

    min-height: 230px;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid rgba(16,24,40,0.06);
}

.mj-about-page .mj-about-values__item--featured {
    grid-row: span 3;

    grid-template-columns: 1fr;

    grid-template-rows:
        minmax(320px, 1.2fr)
        auto;

    min-height: 610px;
}

.mj-about-page .mj-about-values__media {
    min-height: 100%;

    overflow: hidden;

    background: #dfe4e9;
}

.mj-about-page .mj-about-values__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.55s ease;
}

.mj-about-page .mj-about-values__item:hover
.mj-about-values__media img {
    transform: scale(1.025);
}

.mj-about-page .mj-about-values__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 28px 30px;
}

.mj-about-page .mj-about-values__content > span {
    margin-bottom: 14px;

    color: var(--mj-accent);

    font-size: 10px;
    font-weight: 800;
}

.mj-about-page .mj-about-values__content h3 {
    margin: 0;

    color: var(--mj-ink);

    font-size: 25px;
    font-weight: 650;

    line-height: 1.08;

    letter-spacing: -0.03em;
}

.mj-about-page .mj-about-values__content p {
    margin: 11px 0 0;

    color: var(--mj-muted);

    font-size: 12.5px;

    line-height: 1.7;
}

.mj-about-page
.mj-about-values__item--featured
.mj-about-values__content {
    padding: 32px;
}

.mj-about-page
.mj-about-values__item--featured
.mj-about-values__content h3 {
    font-size: 32px;
}


/* =========================================================
   06 — HOW WE BUILD VALUE
   ========================================================= */

.mj-about-page .mj-about-building {
    position: relative;

    padding: 95px 0 105px;

    background:
        linear-gradient(
            145deg,
            #07182b,
            var(--mj-primary)
        );

    color: #ffffff;
}

.mj-about-page .mj-about-building__heading {
    position: relative;

    max-width: 820px;

    margin-bottom: 42px;
}

.mj-about-page .mj-about-building__heading h2 {
    max-width: 650px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(34px, 4vw, 54px);
    font-weight: 650;

    line-height: 1.03;

    letter-spacing: -0.045em;
}

.mj-about-page .mj-about-building__number {
    position: absolute;

    right: 0;
    top: 0;

    color: rgba(255,255,255,0.065);

    font-size: 90px;
    font-weight: 800;

    line-height: 0.85;
}

.mj-about-page .mj-about-building__list {
    border-top:
        1px solid rgba(255,255,255,0.13);
}

.mj-about-page .mj-about-building__row {
    display: grid;

    grid-template-columns:
        55px
        minmax(0, 1fr)
        190px;

    gap: 26px;

    align-items: center;

    min-height: 135px;

    padding: 18px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.13);
}

.mj-about-page .mj-about-building__index {
    color: var(--mj-accent);

    font-size: 10px;
    font-weight: 800;
}

.mj-about-page .mj-about-building__copy {
    max-width: 610px;
}

.mj-about-page .mj-about-building__copy h3 {
    margin: 0;

    color: #ffffff;

    font-size: 24px;
    font-weight: 600;

    line-height: 1.1;

    letter-spacing: -0.025em;
}

.mj-about-page .mj-about-building__copy p {
    max-width: 570px;

    margin: 8px 0 0;

    color: rgba(255,255,255,0.58);

    font-size: 12.5px;

    line-height: 1.7;
}

.mj-about-page .mj-about-building__media {
    height: 92px;

    overflow: hidden;

    background: rgba(255,255,255,0.06);
}

.mj-about-page .mj-about-building__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.45s ease;
}

.mj-about-page .mj-about-building__row:hover
.mj-about-building__media img {
    transform: scale(1.04);
}

.mj-about-page .mj-about-building__fallback {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: rgba(255,255,255,0.16);

    font-size: 30px;
    font-weight: 800;
}


/* =========================================================
   07 — LEADERSHIP
   ========================================================= */

.mj-about-page .mj-about-leadership {
    padding: 100px 0 105px;

    background: #ffffff;
}

.mj-about-page .mj-about-leadership__grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 28px;
}

.mj-about-page .mj-about-leadership__person {
    min-width: 0;
}

.mj-about-page .mj-about-leadership__portrait {
    position: relative;

    aspect-ratio: 4 / 4.8;

    overflow: hidden;

    background: #e4e8ed;
}

.mj-about-page .mj-about-leadership__portrait::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 22%;

    background:
        linear-gradient(
            to top,
            rgba(4,16,30,0.24),
            transparent
        );

    pointer-events: none;
}

.mj-about-page .mj-about-leadership__portrait img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;

    transition: transform 0.55s ease;
}

.mj-about-page .mj-about-leadership__person:hover
.mj-about-leadership__portrait img {
    transform: scale(1.02);
}

.mj-about-page .mj-about-leadership__details {
    padding: 18px 2px 0;
}

.mj-about-page .mj-about-leadership__details > span {
    display: block;

    margin-bottom: 6px;

    color: #a67418;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.mj-about-page .mj-about-leadership__details h3 {
    margin: 0;

    color: var(--mj-ink);

    font-size: 23px;
    font-weight: 650;

    line-height: 1.08;

    letter-spacing: -0.03em;
}

.mj-about-page .mj-about-leadership__details p {
    margin: 10px 0 0;

    color: var(--mj-muted);

    font-size: 12.5px;

    line-height: 1.7;
}


/* =========================================================
   08 — FINAL CTA
   ========================================================= */

.mj-about-page .mj-about-closing {
    position: relative;
    isolation: isolate;

    min-height: 390px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #07182b;
    
}

.mj-about-page .mj-about-closing__media {
    position: absolute;

    inset: 0;

    z-index: -3;
    
}

.mj-about-page .mj-about-closing__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.mj-about-page .mj-about-closing__shade {
    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(4,16,30,0.94) 0%,
            rgba(4,16,30,0.79) 52%,
            rgba(4,16,30,0.42) 100%
        );
}

.mj-about-page .mj-about-closing__word {
    position: absolute;

    right: -1vw;
    bottom: -3vh;

    z-index: -1;

    color: rgba(255,255,255,0.025);

    font-size: clamp(95px, 14vw, 190px);
    font-weight: 900;

    line-height: 0.8;

    letter-spacing: -0.07em;

    pointer-events: none;
}

.mj-about-page .mj-about-closing__container {
    width: 100%;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    padding-top: 64px;
    padding-bottom: 64px;
    margin-left:15px;
}

.mj-about-page .mj-about-closing__copy {
    max-width: 700px;
}

.mj-about-page .mj-about-closing__copy h2 {
    max-width: 650px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(34px, 4vw, 52px);
    font-weight: 650;

    line-height: 1.04;

    letter-spacing: -0.045em;
}

.mj-about-page .mj-about-closing__copy > p {
    max-width: 570px;

    margin: 17px 0 0;

    color: rgba(255,255,255,0.65);

    font-size: 13px;

    line-height: 1.75;
}

.mj-about-page .mj-about-closing__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 24px;
}

.mj-about-page .mj-about-closing__primary,
.mj-about-page .mj-about-closing__secondary {
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    padding: 0 20px;

    text-decoration: none;

    font-size: 10px;
    font-weight: 800;

    transition:
        transform 0.22s ease,
        background 0.22s ease;
}

.mj-about-page .mj-about-closing__primary {
    background: var(--mj-accent);
    color: #0b1d33;
}

.mj-about-page .mj-about-closing__secondary {
    color: #ffffff;

    border:
        1px solid rgba(255,255,255,0.28);

    background:
        rgba(255,255,255,0.035);
}

.mj-about-page .mj-about-closing__primary:hover,
.mj-about-page .mj-about-closing__secondary:hover {
    transform: translateY(-2px);
}

.mj-about-page .mj-about-closing__secondary:hover {
    background:
        rgba(255,255,255,0.09);
}

.mj-about-page .mj-about-closing__number {
    color: rgba(255,255,255,0.10);

    font-size: 70px;
    font-weight: 800;

    line-height: 0.8;
}


/* =========================================================
   LARGE TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .mj-about-page .mj-about-intro__layout {
        gap: 42px;
    }

    .mj-about-page .mj-about-intro__visual {
        height: 490px;
    }

    .mj-about-page .mj-about-story__visual {
        width: 67%;
        height: 540px;
    }

    .mj-about-page .mj-about-story__container {
        min-height: 540px;
    }

    .mj-about-page .mj-about-story__card {
        width: 49%;

        padding: 38px;
    }

    .mj-about-page .mj-about-story__number {
        left: calc(67% - 34px);
    }

    .mj-about-page .mj-about-values__grid {
        grid-template-columns:
            1fr 1fr;
    }

    .mj-about-page .mj-about-building__row {
        grid-template-columns:
            48px
            minmax(0,1fr)
            160px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 860px) {

    .mj-about-page .mj-about-heading {
        align-items: flex-start;
    }

    .mj-about-page .mj-about-heading h2 {
        font-size: 40px;
    }


    /* Hero */

    .mj-about-page .mj-about-hero {
        min-height: 64vh;
    }

    .mj-about-page .mj-about-hero__container {
        padding-top: 130px;
        padding-bottom: 50px;
    }

    .mj-about-page .mj-about-hero__content h1 {
        font-size: 52px;
    }


    /* Who */

    .mj-about-page .mj-about-intro {
        padding: 80px 0 88px;
    }

    .mj-about-page .mj-about-intro__heading {
        grid-template-columns: 1fr;

        gap: 5px;

        margin-bottom: 34px;
    }

    .mj-about-page .mj-about-intro__layout {
        grid-template-columns:
            1.05fr 0.95fr;

        gap: 32px;
    }

    .mj-about-page .mj-about-intro__visual {
        height: 440px;
    }


    /* Purpose */

    .mj-about-page .mj-about-purpose {
        padding: 78px 0 84px;
    }

    .mj-about-page .mj-about-purpose__statement {
        min-height: 310px;

        padding-right: 35px;
    }

    .mj-about-page
    .mj-about-purpose__statement + .mj-about-purpose__statement {
        padding-left: 35px;
    }

    .mj-about-page
    .mj-about-purpose__statement + .mj-about-purpose__statement::after {
        left: 35px;
    }


    /* Story */

    .mj-about-page .mj-about-story {
        padding: 85px 0;
    }

    .mj-about-page .mj-about-story__visual {
        width: 68%;
        height: 500px;
    }

    .mj-about-page .mj-about-story__container {
        min-height: 500px;
    }

    .mj-about-page .mj-about-story__card {
        width: 52%;

        padding: 32px;
    }


    /* Values */

    .mj-about-page .mj-about-values {
        padding: 82px 0 88px;
    }

    .mj-about-page .mj-about-values__item {
        grid-template-columns: 1fr;

        min-height: 0;
    }

    .mj-about-page .mj-about-values__item:not(
        .mj-about-values__item--featured
    )
    .mj-about-values__media {
        height: 190px;
    }


    /* Build */

    .mj-about-page .mj-about-building {
        padding: 82px 0 88px;
    }


    /* Leadership */

    .mj-about-page .mj-about-leadership {
        padding: 82px 0 88px;
    }

    .mj-about-page .mj-about-leadership__grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .mj-about-page .mj-about-heading {
        flex-direction: column;

        gap: 18px;

        margin-bottom: 32px;
    }

    .mj-about-page .mj-about-heading h2 {
        font-size: 34px;
    }

    .mj-about-page .mj-about-section-number {
        font-size: 38px;
    }


    /* Hero */

    .mj-about-page .mj-about-hero {
        min-height: 72svh;
    }

    .mj-about-page .mj-about-hero__shade {
        background:
            linear-gradient(
                to top,
                rgba(4,16,30,0.94) 0%,
                rgba(4,16,30,0.72) 48%,
                rgba(4,16,30,0.24) 100%
            );
    }

    .mj-about-page .mj-about-hero__container {
        padding-top: 110px;
        padding-bottom: 42px;
    }

    .mj-about-page .mj-about-hero__content h1 {
        max-width: 100%;

        font-size: 41px;

        line-height: 1.02;
    }

    .mj-about-page .mj-about-hero__content p {
        margin-top: 17px;

        font-size: 14px;
    }

    .mj-about-page .mj-about-hero__meta {
        display: none;
    }

    .mj-about-page .mj-about-hero__word {
        font-size: 90px;
    }


    /* Who */

    .mj-about-page .mj-about-intro {
        padding: 70px 0 76px;
    }

    .mj-about-page .mj-about-intro__heading h2 {
        font-size: 37px;
    }

    .mj-about-page .mj-about-intro__layout {
        grid-template-columns: 1fr;

        gap: 34px;
    }

    .mj-about-page .mj-about-intro__visual {
        height: 420px;
    }

    .mj-about-page .mj-about-intro__copy {
        max-width: none;
    }

    .mj-about-page .mj-about-intro__lead {
        font-size: 16px;
    }


    /* Purpose */

    .mj-about-page .mj-about-purpose {
        padding: 70px 0 76px;
    }

    .mj-about-page .mj-about-purpose__top {
        flex-direction: column;

        gap: 18px;

        padding-bottom: 22px;
    }

    .mj-about-page .mj-about-purpose__statements {
        grid-template-columns: 1fr;
    }

    .mj-about-page .mj-about-purpose__statement,
    .mj-about-page
    .mj-about-purpose__statement + .mj-about-purpose__statement {
        min-height: auto;

        padding: 34px 0 36px;

        border-left: 0;
    }

    .mj-about-page
    .mj-about-purpose__statement + .mj-about-purpose__statement::after {
        left: 0;
    }

    .mj-about-page .mj-about-purpose__statement h2 {
        font-size: 33px;
    }


    /* Story */

    .mj-about-page .mj-about-story {
        padding: 74px 0;
    }

    .mj-about-page .mj-about-story__container {
        min-height: 0;
    }

    .mj-about-page .mj-about-story__visual {
        width: 100%;
        height: 430px;
    }

    .mj-about-page .mj-about-story__card {
        position: relative;

        right: auto;
        top: auto;

        width: calc(100% - 20px);

        margin:
            -48px 0
            0 20px;

        padding: 30px 26px 32px;

        transform: none;
    }

    .mj-about-page .mj-about-story__card h2 {
        font-size: 33px;
    }

    .mj-about-page .mj-about-story__number {
        display: none;
    }


    /* Values */

    .mj-about-page .mj-about-values {
        padding: 74px 0 80px;
    }

    .mj-about-page .mj-about-values__grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .mj-about-page .mj-about-values__item,
    .mj-about-page .mj-about-values__item--featured {
        grid-row: auto;

        grid-template-columns: 1fr;
        grid-template-rows: auto;

        min-height: 0;
    }

    .mj-about-page .mj-about-values__media,
    .mj-about-page
    .mj-about-values__item:not(
        .mj-about-values__item--featured
    )
    .mj-about-values__media {
        height: 280px;
    }

    .mj-about-page .mj-about-values__content,
    .mj-about-page
    .mj-about-values__item--featured
    .mj-about-values__content {
        padding: 24px 24px 27px;
    }

    .mj-about-page
    .mj-about-values__item--featured
    .mj-about-values__content h3 {
        font-size: 27px;
    }


    /* Build Value */

    .mj-about-page .mj-about-building {
        padding: 74px 0 80px;
    }

    .mj-about-page .mj-about-building__heading {
        margin-bottom: 32px;
    }

    .mj-about-page .mj-about-building__heading h2 {
        font-size: 35px;
    }

    .mj-about-page .mj-about-building__number {
        display: none;
    }

    .mj-about-page .mj-about-building__row {
        grid-template-columns:
            34px
            minmax(0,1fr);

        gap: 14px;

        min-height: 0;

        padding: 22px 0;
    }

    .mj-about-page .mj-about-building__media {
        grid-column: 2;

        width: 100%;
        height: 155px;

        margin-top: 4px;
    }

    .mj-about-page .mj-about-building__copy h3 {
        font-size: 22px;
    }


    /* Leadership */

    .mj-about-page .mj-about-leadership {
        padding: 74px 0 80px;
    }

    .mj-about-page .mj-about-leadership__grid {
        grid-template-columns: 1fr;

        gap: 34px;
    }

    .mj-about-page .mj-about-leadership__portrait {
        aspect-ratio: 4 / 4.5;
    }


    /* Closing CTA */

    .mj-about-page .mj-about-closing {
        min-height: 360px;
    }

    .mj-about-page .mj-about-closing__container {
        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

        padding-top: 54px;
        padding-bottom: 54px;
    }

    .mj-about-page .mj-about-closing__copy h2 {
        font-size: 35px;
    }

    .mj-about-page .mj-about-closing__number {
        display: none;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .mj-about-page .mj-about-kicker {
        margin-bottom: 11px;

        font-size: 8px;

        letter-spacing: 0.14em;
    }

    .mj-about-page .mj-about-kicker > span {
        width: 22px;
    }

    .mj-about-page .mj-about-hero {
        min-height: 68svh;
    }

    .mj-about-page .mj-about-hero__container {
        padding-top: 100px;
        padding-bottom: 36px;
    }

    .mj-about-page .mj-about-hero__content h1 {
        font-size: 36px;
    }

    .mj-about-page .mj-about-intro__heading h2,
    .mj-about-page .mj-about-purpose__statement h2,
    .mj-about-page .mj-about-story__card h2,
    .mj-about-page .mj-about-building__heading h2,
    .mj-about-page .mj-about-closing__copy h2 {
        font-size: 31px;
    }

    .mj-about-page .mj-about-intro__visual {
        height: 360px;
    }

    .mj-about-page .mj-about-story__visual {
        height: 360px;
    }

    .mj-about-page .mj-about-story__card {
        width: calc(100% - 14px);

        margin-left: 14px;

        padding: 26px 21px 28px;
    }

    .mj-about-page .mj-about-values__media,
    .mj-about-page
    .mj-about-values__item:not(
        .mj-about-values__item--featured
    )
    .mj-about-values__media {
        height: 240px;
    }

    .mj-about-page .mj-about-building__media {
        height: 135px;
    }

    .mj-about-page .mj-about-leadership__details h3 {
        font-size: 22px;
    }

    .mj-about-page .mj-about-closing__actions {
        width: 100%;

        flex-direction: column;
    }

    .mj-about-page .mj-about-closing__primary,
    .mj-about-page .mj-about-closing__secondary {
        width: 100%;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .mj-about-page .mj-about-intro__visual img,
    .mj-about-page .mj-about-story__visual img,
    .mj-about-page .mj-about-values__media img,
    .mj-about-page .mj-about-building__media img,
    .mj-about-page .mj-about-leadership__portrait img {
        transition: none;
        transform: none;
    }

}
/* =========================================================
   PREMIUM BANKING VISUAL OVERRIDES
   Styling only — existing HTML/PHP wording and functionality
   remain unchanged.
   ========================================================= */
.mj-about-page {
    --mj-primary: #071426;
    --mj-accent: #d4af37;
    --mj-accent-soft: rgba(212,175,55,.16);
    --mj-ink: #111827;
    --mj-text: #4b5563;
    --mj-muted: #6b7280;
    --mj-paper: #f7f8fa;
    --mj-white: #fff;
    --mj-border: rgba(7,20,38,.10);
    background: #f7f8fa;
}
.mj-about-page .mj-about-kicker { letter-spacing:.2em; font-size:10px; font-weight:800; }
.mj-about-page .mj-about-kicker > span { width:38px; height:2px; background:var(--mj-accent); }
.mj-about-page .mj-about-section-number { color:rgba(7,20,38,.09); }
.mj-about-page .mj-about-hero { min-height:74vh; background:#050d18; }
.mj-about-page .mj-about-hero__shade { background:linear-gradient(90deg,rgba(3,10,20,.94) 0%,rgba(3,10,20,.78) 40%,rgba(3,10,20,.42) 72%,rgba(3,10,20,.20) 100%); }
.mj-about-page .mj-about-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 78% 28%,rgba(212,175,55,.13),transparent 28%); pointer-events:none; }
.mj-about-page .mj-about-hero__container { padding-top:170px; padding-bottom:72px; }
.mj-about-page .mj-about-hero__content h1 { font-weight:700; letter-spacing:-.055em; text-shadow:0 8px 35px rgba(0,0,0,.25); }
.mj-about-page .mj-about-hero__content p { font-size:16px; color:rgba(255,255,255,.76); }
.mj-about-page .mj-about-hero__meta strong { text-shadow:0 0 25px rgba(212,175,55,.22); }
.mj-about-page .mj-about-hero__word { color:rgba(212,175,55,.035); }
.mj-about-page .mj-about-intro { padding:110px 0 120px; background:#fff; }
.mj-about-page .mj-about-intro__heading { margin-bottom:58px; }
.mj-about-page .mj-about-intro__heading h2,
.mj-about-page .mj-about-purpose__statement h2,
.mj-about-page .mj-about-story__card h2,
.mj-about-page .mj-about-building__heading h2,
.mj-about-page .mj-about-heading h2 { font-weight:700; }
.mj-about-page .mj-about-intro__visual,
.mj-about-page .mj-about-story__visual,
.mj-about-page .mj-about-values__item,
.mj-about-page .mj-about-leadership__portrait { border-radius:3px; }
.mj-about-page .mj-about-intro__visual { box-shadow:0 28px 70px rgba(7,20,38,.12); }
.mj-about-page .mj-about-intro__image-label { left:24px; bottom:24px; border-left:2px solid var(--mj-accent); background:rgba(5,14,27,.88); }
.mj-about-page .mj-about-purpose { padding:105px 0 115px; background:linear-gradient(135deg,#eef1f5 0%,#f8f9fb 100%); }
.mj-about-page .mj-about-purpose__top { padding-bottom:34px; border-bottom-color:rgba(7,20,38,.12); }
.mj-about-page .mj-about-purpose__statement { min-height:370px; }
.mj-about-page .mj-about-purpose__statement::after { background:var(--mj-accent); height:3px; }
.mj-about-page .mj-about-story { padding:120px 0; background:#fff; }
.mj-about-page .mj-about-story__visual { box-shadow:0 30px 80px rgba(7,20,38,.12); }
.mj-about-page .mj-about-story__card { border:1px solid rgba(7,20,38,.06); border-top:3px solid var(--mj-accent); box-shadow:0 28px 80px rgba(7,20,38,.13); }
.mj-about-page .mj-about-story__number { color:var(--mj-accent); }
.mj-about-page .mj-about-values { padding:110px 0 120px; background:#f3f5f7; }
.mj-about-page .mj-about-values__item { border:1px solid rgba(7,20,38,.07); box-shadow:0 12px 35px rgba(7,20,38,.045); transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease; }
.mj-about-page .mj-about-values__item:hover { transform:translateY(-5px); box-shadow:0 22px 50px rgba(7,20,38,.10); border-color:rgba(212,175,55,.38); }
.mj-about-page .mj-about-values__content > span { color:var(--mj-accent); }
.mj-about-page .mj-about-building { padding:110px 0 120px; background:linear-gradient(135deg,#040c17 0%,#0b1c31 52%,#102a47 100%); }
.mj-about-page .mj-about-building::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%,rgba(212,175,55,.10),transparent 30%); pointer-events:none; }
.mj-about-page .mj-about-building__row { transition:background .3s ease,padding-left .3s ease; }
.mj-about-page .mj-about-building__row:hover { background:rgba(255,255,255,.035); padding-left:12px; }
.mj-about-page .mj-about-building__index { color:var(--mj-accent); }
.mj-about-page .mj-about-building__media { border:1px solid rgba(255,255,255,.10); }
.mj-about-page .mj-about-leadership { padding:115px 0 120px; background:#fff; }
.mj-about-page .mj-about-leadership__person { transition:transform .35s ease; }
.mj-about-page .mj-about-leadership__person:hover { transform:translateY(-5px); }
.mj-about-page .mj-about-leadership__portrait { box-shadow:0 18px 45px rgba(7,20,38,.10); }
.mj-about-page .mj-about-leadership__details { padding-top:20px; }
.mj-about-page .mj-about-leadership__details h3 { font-weight:700; }
.mj-about-page .mj-about-closing { min-height:560px; background:#040b14; }
.mj-about-page .mj-about-closing__shade { background:linear-gradient(90deg,rgba(2,8,16,.94),rgba(2,8,16,.72) 48%,rgba(2,8,16,.38)); }
.mj-about-page .mj-about-closing::after { content:""; position:absolute; inset:0; border:1px solid rgba(212,175,55,.13); pointer-events:none; }
.mj-about-page .mj-about-closing__primary { background:var(--mj-accent); color:#071426; border:1px solid var(--mj-accent); font-weight:800; box-shadow:0 10px 30px rgba(212,175,55,.16); }
.mj-about-page .mj-about-closing__primary:hover { background:#e1bd4d; color:#071426; transform:translateY(-2px); }
.mj-about-page .mj-about-closing__secondary { border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.04); }
.mj-about-page .mj-about-closing__secondary:hover { border-color:var(--mj-accent); color:var(--mj-accent); background:rgba(212,175,55,.06); }
@media (max-width:991px) {
    .mj-about-page .mj-about-hero { min-height:650px; }
    .mj-about-page .mj-about-hero__container { padding-top:140px; }
    .mj-about-page .mj-about-intro__layout { gap:38px; }
    .mj-about-page .mj-about-story__visual { width:62%; }
    .mj-about-page .mj-about-story__card { width:50%; }
}
@media (max-width:767px) {
    .mj-about-page .mj-about-hero { min-height:620px; }
    .mj-about-page .mj-about-hero__container { padding-top:125px; padding-bottom:42px; }
    .mj-about-page .mj-about-hero__content h1 { font-size:clamp(38px,11vw,58px); }
    .mj-about-page .mj-about-hero__meta { display:none; }
    .mj-about-page .mj-about-intro,
    .mj-about-page .mj-about-purpose,
    .mj-about-page .mj-about-story,
    .mj-about-page .mj-about-values,
    .mj-about-page .mj-about-building,
    .mj-about-page .mj-about-leadership { padding-top:72px; padding-bottom:78px; }
    .mj-about-page .mj-about-intro__heading { display:block; margin-bottom:32px; }
    .mj-about-page .mj-about-intro__layout { grid-template-columns:1fr; }
    .mj-about-page .mj-about-intro__visual { height:360px; }
    .mj-about-page .mj-about-intro__copy { max-width:none; }
    .mj-about-page .mj-about-purpose__top { display:block; }
    .mj-about-page .mj-about-purpose__top p { margin-top:20px; }
    .mj-about-page .mj-about-purpose__statements { grid-template-columns:1fr; }
    .mj-about-page .mj-about-purpose__statement,
    .mj-about-page .mj-about-purpose__statement + .mj-about-purpose__statement { min-height:auto; padding:40px 0; border-left:0; }
    .mj-about-page .mj-about-purpose__statement + .mj-about-purpose__statement { border-top:1px solid rgba(7,20,38,.11); }
    .mj-about-page .mj-about-purpose__statement + .mj-about-purpose__statement::after { left:0; }
    .mj-about-page .mj-about-story__container { min-height:0; }
    .mj-about-page .mj-about-story__visual { width:100%; height:360px; }
    .mj-about-page .mj-about-story__card { position:relative; right:auto; top:auto; width:calc(100% - 28px); margin:-55px auto 0; transform:none; padding:32px 26px; z-index:2; }
    .mj-about-page .mj-about-story__number { display:none; }
    .mj-about-page .mj-about-values__grid { grid-template-columns:1fr; }
    .mj-about-page .mj-about-values__item,
    .mj-about-page .mj-about-values__item--featured { grid-row:auto; min-height:0; grid-template-columns:1fr; grid-template-rows:230px auto; }
    .mj-about-page .mj-about-values__content,
    .mj-about-page .mj-about-values__item--featured .mj-about-values__content { padding:26px; }
    .mj-about-page .mj-about-building__heading h2 { padding-right:0; }
    .mj-about-page .mj-about-building__number { display:none; }
    .mj-about-page .mj-about-building__row { grid-template-columns:38px 1fr; gap:16px; }
    .mj-about-page .mj-about-building__media { grid-column:2; width:100%; height:150px; }
    .mj-about-page .mj-about-leadership__grid { grid-template-columns:1fr; gap:45px; }
    .mj-about-page .mj-about-leadership__portrait { aspect-ratio:1/1.08; }
    .mj-about-page .mj-about-closing { min-height:520px; }
    .mj-about-page .mj-about-closing__container { padding-top:100px; padding-bottom:70px; }
}
@media (max-width:480px) {
    .mj-about-page .mj-about-hero { min-height:590px; }
    .mj-about-page .mj-about-intro__visual { height:300px; }
    .mj-about-page .mj-about-story__visual { height:300px; }
    .mj-about-page .mj-about-story__card { width:calc(100% - 20px); margin-top:-40px; }
    .mj-about-page .mj-about-building__row { grid-template-columns:30px 1fr; }
    .mj-about-page .mj-about-building__media { grid-column:2; height:125px; }
}

/* =========================================================
   ABOUT — LAPTOP / DESKTOP WHO WE ARE REFINEMENT
   Leaves phone layout untouched
   ========================================================= */

@media (min-width: 1100px) {

    .mj-about-page .mj-about-identity {
        padding: 68px 0 96px;
    }

    /* Heading row */
    .mj-about-page .mj-about-identity__heading {
        display: grid;
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 64px;
        align-items: start;

        margin-bottom: 42px;
    }

    .mj-about-page
    .mj-about-identity__heading
    .mj-about-kicker {
        margin-top: 12px;
    }

    .mj-about-page
    .mj-about-identity__heading
    h2 {
        max-width: 760px;

        margin: 0;

        font-size: clamp(46px, 4vw, 60px);
        line-height: 0.98;

        letter-spacing: -0.05em;
    }

    /* Main image + company story */
    .mj-about-page .mj-about-identity__grid {
        display: grid;

        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(360px, 0.85fr);

        gap: 58px;

        align-items: center;
    }

    .mj-about-page .mj-about-identity__visual {
        width: 100%;
        height: 460px;

        margin: 0;
    }

    .mj-about-page .mj-about-identity__visual img {
        width: 100%;
        height: 100%;

        display: block;

        object-fit: cover;
        object-position: center;
    }

    .mj-about-page .mj-about-identity__copy {
        max-width: 500px;

        margin: 0;
        margin-left: 12px;

        padding: 0;
    }

    .mj-about-page .mj-about-identity__eyebrow {
        display: block;

        margin-bottom: 20px;
    }

    .mj-about-page .mj-about-identity__lead {
        margin-top: 0;

        font-size: 18px;
        line-height: 1.7;
    }

    .mj-about-page .mj-about-identity__secondary {
        font-size: 15px;
        line-height: 1.75;
    }

    .mj-about-page .mj-about-identity__signature {
        margin-top: 32px;
    }
}


/* =========================================================
   ABOUT — WHO WE ARE DESKTOP HEADING POSITION
   ========================================================= */

@media (min-width: 1100px) {

    .mj-about-page .mj-about-identity__heading {
        display: grid;

        grid-template-columns:
            220px
            minmax(0, 760px);

        column-gap: 42px;

        align-items: start;

        justify-content: start;

        margin-bottom: 48px;
    }


    .mj-about-page
    .mj-about-identity__heading
    .mj-about-kicker {
        margin: 10px 0 0;
    }


    .mj-about-page
    .mj-about-identity__heading
    h2 {
        margin: 0;

        max-width: 760px;

        font-size: clamp(
            46px,
            4vw,
            58px
        );

        line-height: 1.02;

        letter-spacing: -0.045em;
    }

}

/* =========================================================
   WHO WE ARE — COMPACT CORPORATE HIGHLIGHTS
   ========================================================= */

.mj-about-page .mj-about-identity__heading {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 44px;
    align-items: stretch;
    margin-bottom: 48px;
}

.mj-about-page .mj-about-identity__heading .mj-about-kicker {
    margin-top: 16px;
}


/* Remove influence of previous large heading styling */
.mj-about-page .mj-about-identity__heading h2 {
    display: none;
}


.mj-about-page .mj-about-identity__highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}


.mj-about-page .mj-about-identity__highlight {
    position: relative;

    min-height: 128px;

    display: flex;
    align-items: flex-start;

    gap: 16px;

    padding: 22px 20px;

    background: #0b315f;
    color: #fff;

    border-radius: 8px;

    overflow: hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.mj-about-page .mj-about-identity__highlight:hover {
    transform: translateY(-3px);

    background: #08294f;

    box-shadow:
        0 16px 34px rgba(11, 49, 95, .16);
}


.mj-about-page .mj-about-identity__highlight > span {
    flex: 0 0 auto;

    color: #d6a12a;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .12em;

    padding-top: 3px;
}


.mj-about-page .mj-about-identity__highlight div {
    min-width: 0;
}


.mj-about-page .mj-about-identity__highlight strong {
    display: block;

    margin-bottom: 8px;

    color: #fff;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -.015em;
}


.mj-about-page .mj-about-identity__highlight small {
    display: block;

    color: rgba(255, 255, 255, .72);

    font-size: 11.5px;
    font-weight: 400;

    line-height: 1.55;
}


/* Tablet */
@media (max-width: 980px) {

    .mj-about-page .mj-about-identity__heading {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}


/* Mobile */
@media (max-width: 700px) {

    .mj-about-page .mj-about-identity__highlights {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .mj-about-page .mj-about-identity__highlight {
        min-height: auto;

        padding: 18px;
    }

}

.mj-about-identity__story-title {
    margin: 0 0 18px;

    max-width: 520px;

    font-size: clamp(
        26px,
        2.1vw,
        34px
    );

    line-height: 1.15;

    letter-spacing: -0.035em;

    color: #0f1728;
}
/* WHO WE ARE — softer image corners */
.mj-about-page .mj-about-identity__visual {
    border-radius: 22px;
    overflow: hidden;
}

.mj-about-page .mj-about-identity__visual img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;

    border-radius: inherit;

    transition: transform 0.5s ease;
}

/* Very subtle premium hover */
.mj-about-page .mj-about-identity__visual:hover img {
    transform: scale(1.015);
}