:root {

    /* =====================================================
       DYNAMIC CORPORATE BRAND
       Values supplied by Admin → Website Settings
       ===================================================== */

    --navy:
        var(--site-primary-color, #0b315f);

    --gold:
        var(--site-secondary-color, #d6a12a);


    /* =====================================================
       SUPPORTING BRAND SHADES
       ===================================================== */

    --navy-deep: #071f3d;
    --navy-soft: #174b83;

    --gold-dark: #b98518;
    --gold-soft: #f4e6c2;

    /* BUSINESS SECTOR ACCENTS */

    --logistics-blue: #2459b8;
    --agriculture-green: #5d8b55;
    --agritech-purple: #7657a8;

    /* NEUTRALS */

    --background: #ffffff;
    --surface: #faf9f6;
    --surface-soft: #f5f7fa;
    --surface-dark: #071f3d;

    --text: #172033;
    --muted: #667085;

    --primary: var(--navy);
    --primary-text: #ffffff;

    --border: #e3e7ec;

    --max-width: 1220px;

    --radius: 16px;

    --shadow-soft:
        0 10px 35px rgba(7, 31, 61, 0.08);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        "Segoe UI",
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    background: var(--background);
    color: var(--text);

    line-height: 1.65;

    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: min(92%, var(--max-width));
    margin-inline: auto;
}

/* ========================================
   HEADER
======================================== */

.site-header {
    background: rgba(255, 255, 255, 0.97);

    border-bottom: 1px solid var(--border);

    position: sticky;
    top: 0;

    z-index: 1000;

    backdrop-filter: blur(14px);
}

.nav-wrapper {
    min-height: 82px;

    display: flex;
    align-items: center;

    gap: 28px;
}


/* BRAND */

.brand {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-right: auto;
}

.brand-mark {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            var(--gold),
            #f0c35a
        );

    color: var(--navy-deep);

    font-weight: 900;

    border-radius: 9px;

    transform: rotate(-3deg);
}

.brand-text {
    display: flex;
    flex-direction: column;

    line-height: 1;
}

.brand-text strong {
    color: var(--navy-deep);

    font-size: 1.08rem;

    letter-spacing: 0.08em;
}

.brand-text small {
    color: var(--muted);

    font-size: 0.52rem;

    font-weight: 700;

    letter-spacing: 0.16em;

    margin-top: 6px;
}


/* NAVIGATION */

.main-nav {
    display: flex;
    align-items: center;

    gap: 23px;
}

.main-nav a {
    position: relative;

    color: #29364a;

    font-size: 0.84rem;

    font-weight: 600;

    padding: 31px 0;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--gold-dark);
}

.main-nav a.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 19px;

    height: 2px;

    background: var(--gold);
}


/* HEADER CTA */

.nav-cta {
    display: inline-flex;

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

    min-height: 44px;

    padding: 0 18px;

    background: var(--navy);

    color: #ffffff;

    border-radius: 6px;

    font-size: 0.82rem;

    font-weight: 700;

    box-shadow:
        0 8px 20px rgba(11, 49, 95, 0.16);

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

.nav-cta:hover {
    background: var(--navy-deep);

    transform: translateY(-1px);
}


/* MOBILE BUTTON */

.mobile-menu-button {
    display: none;

    width: 42px;
    height: 42px;

    background: transparent;

    border: 1px solid var(--border);

    border-radius: 7px;

    cursor: pointer;
}

.mobile-menu-button span {
    display: block;

    width: 19px;
    height: 2px;

    background: var(--navy);

    margin: 4px auto;
}

/* HERO */

.hero {
    padding: 105px 0 95px;

    background:
        radial-gradient(
            circle at 78% 35%,
            rgba(214, 161, 42, 0.16),
            transparent 27%
        ),
        radial-gradient(
            circle at 12% 10%,
            rgba(36, 89, 184, 0.09),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            #ffffff 0%,
            #faf9f6 52%,
            #f6f8fb 100%
        );
}
/* =========================================================
   HERO — TYPOGRAPHY REFINEMENT
   ========================================================= */

.hero-visual .hero-content {
    max-width: 720px;
}

.hero-visual .hero-content h1 {
    max-width: 700px;

    margin-top: 16px;
    margin-bottom: 22px;

    font-size: clamp(
        3rem,
        4.7vw,
        4rem
    );

    line-height: .99;
    letter-spacing: -.045em;
}

.hero-visual .hero-text {
    max-width: 650px;

    margin-bottom: 30px;

    font-size: clamp(
        .98rem,
        1.15vw,
        1.08rem
    );

    line-height: 1.75;
}

.hero-visual .eyebrow {
    font-size: .72rem;
    font-weight: 800;

    letter-spacing: .08em;
}

.hero-visual .hero-actions {
    gap: 14px;
}


/* TABLET */

@media (max-width: 980px) {

    .hero-visual .hero-content h1 {
        max-width: 620px;

        font-size: clamp(
            2.8rem,
            6vw,
            3.6rem
        );
    }

}


/* MOBILE */

@media (max-width: 700px) {

    .hero-visual .hero-content {
        max-width: 100%;
    }

    .hero-visual .hero-content h1 {
        max-width: 520px;

        font-size: clamp(
            2.35rem,
            10vw,
            3.2rem
        );

        line-height: 1.02;
    }

    .hero-visual .hero-text {
        max-width: 520px;

        font-size: .96rem;
        line-height: 1.65;
    }

}


/* SMALL MOBILE */

@media (max-width: 480px) {

    .hero-visual .hero-content h1 {
        font-size: clamp(
            2.15rem,
            10.5vw,
            2.75rem
        );

        letter-spacing: -.035em;
    }

}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.65fr);
    gap: 80px;
    align-items: end;
}

.eyebrow,
.section-label {
    color: var(--gold-dark);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.15em;

    margin-bottom: 17px;
}

.hero h1 {
    max-width: 760px;

    font-size: clamp(2.7rem, 4.6vw, 4.2rem);

    line-height: 1.08;

    letter-spacing: -0.035em;

    color: var(--navy-deep);

    margin-bottom: 26px;
}

.hero-text {
    max-width: 700px;

    color: var(--muted);

    font-size: 1.15rem;
    line-height: 1.8;

    margin-bottom: 36px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}


/* BUTTONS */

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-height: 54px;

    padding: 0 25px;

    border-radius: 8px;

    font-size: 0.9rem;
    font-weight: 700;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--navy);

    color: #ffffff;

    box-shadow:
        0 9px 24px rgba(11, 49, 95, 0.16);
}

.btn-primary:hover {
    background: var(--navy-deep);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.8);

    color: var(--navy);

    border: 1px solid var(--gold);
}

.btn-secondary:hover {
    background: var(--gold-soft);
}

.btn-light {
    background: #ffffff;

    color: var(--navy-deep);

    margin-top: 30px;
}


/* HERO PANEL */

.hero-panel {
    border-left: 1px solid var(--border);
    padding-left: 38px;
}

.hero-panel-label {
    display: block;

    color: var(--muted);

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;

    margin-bottom: 30px;
}

.hero-stat {
    padding: 22px 0;

    border-top: 1px solid var(--border);
}

.hero-stat strong {
    display: block;

    font-size: 2.1rem;
    line-height: 1;

    margin-bottom: 8px;
}

.hero-stat span {
    color: var(--muted);

    font-size: 0.9rem;
}


/* SECTIONS */

.section {
    padding: 110px 0;
}

.section-soft {
    background: var(--surface);
}

.split-layout {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;
}
.section h2,
.logistics-feature h2,
.cta-section h2 {
    font-size: clamp(2rem, 3.2vw, 3rem);

    line-height: 1.12;

    letter-spacing: -0.025em;
}
.large-copy {
    font-size: 1.35rem;

    margin-bottom: 20px;
}

.split-layout p:not(.section-label) {
    color: var(--muted);
}

.text-link {
    display: inline-block;

    margin-top: 28px;

    font-weight: 700;

    border-bottom: 1px solid currentColor;
}


/* SECTION HEADING */

.section-heading {
    display: flex;

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

    gap: 70px;

    margin-bottom: 55px;
}

.section-heading > div {
    max-width: 650px;
}

.section-heading > p {
    max-width: 420px;

    color: var(--muted);
}


/* COMPANY CARDS */

.card-grid {
    display: grid;

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

    border-top: 1px solid var(--border);
}

.company-card {
    min-height: 410px;

    padding: 36px;

    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    display: flex;
    flex-direction: column;
}
.company-card {
    background: #ffffff;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.company-card:hover {
    transform: translateY(-5px);

    box-shadow: var(--shadow-soft);

    position: relative;

    z-index: 2;
}

.company-card:nth-child(1) {
    border-top: 4px solid var(--logistics-blue);
}

.company-card:nth-child(2) {
    border-top: 4px solid var(--agriculture-green);
}

.company-card:nth-child(3) {
    border-top: 4px solid var(--gold);
}

.company-card:nth-child(1) a {
    color: var(--logistics-blue);
}

.company-card:nth-child(2) a {
    color: var(--agriculture-green);
}

.company-card:nth-child(3) a {
    color: var(--gold-dark);
}

.company-card:first-child {
    border-left: 1px solid var(--border);
}

.card-number {
    color: var(--muted);

    font-size: 0.8rem;
    font-weight: 700;

    margin-bottom: 65px;
}

.company-card h3 {
    font-size: 1.55rem;
    line-height: 1.25;

    margin-bottom: 20px;
}

.company-card p {
    color: var(--muted);
}

.company-card a {
    margin-top: auto;

    padding-top: 40px;

    font-size: 0.9rem;
    font-weight: 700;
}


/* SECTORS */

.sector-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1px;

    background: var(--border);

    border: 1px solid var(--border);
}

.sector-card {
    background: var(--background);

    padding: 48px;

    min-height: 270px;
}

.sector-card span,
.value-grid span {
    display: block;

    color: var(--muted);

    font-size: 0.75rem;
    font-weight: 700;

    margin-bottom: 45px;
}

.sector-card h3 {
    font-size: 1.7rem;

    margin-bottom: 15px;
}

.sector-card p {
    max-width: 470px;

    color: var(--muted);
}


/* LOGISTICS FEATURE */

.logistics-feature {
    padding: 120px 0;

    background: var(--surface-dark);
    color: #ffffff;
}

.section-label-light {
    color: #b8b8b8;
}

.logistics-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    align-items: center;
}

.logistics-feature p:not(.section-label) {
    color: #bcbcbc;

    max-width: 620px;

    margin-top: 25px;
}

.feature-list {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 0;

    margin-top: 35px;
}

.feature-list span {
    padding: 15px 0;

    border-bottom: 1px solid #353535;

    font-size: 0.9rem;
}


/* NETWORK VISUAL */

.logistics-visual {
    min-height: 470px;

    display: grid;

    place-items: center;

    border: 1px solid #353535;

    border-radius: var(--radius);
}

.network-box {
    width: 75%;

    text-align: center;
}

.network-box > span {
    display: block;

    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.12em;

    margin-bottom: 25px;
}

.network-line {
    height: 55px;
    width: 1px;

    background: #555555;

    margin: auto;
}

.network-node {
    padding: 12px 18px;

    border: 1px solid #444444;

    margin: 10px auto;

    max-width: 210px;

    font-size: 0.85rem;
}


/* VALUES */

.value-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid var(--border);
}

.value-grid article {
    padding: 36px;

    border-right: 1px solid var(--border);
}

.value-grid article:first-child {
    border-left: 1px solid var(--border);
}

.value-grid h3 {
    margin-bottom: 15px;
}

.value-grid p {
    color: var(--muted);

    font-size: 0.93rem;
}


/* PROJECT BANNER */

.project-banner {
    display: grid;

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

    gap: 70px;

    align-items: end;
}

.project-banner p {
    color: var(--muted);
}


/* CTA */

.cta-section {
    background: #111111;
    color: #ffffff;

    padding: 100px 0;
}

.cta-grid {
    display: grid;

    grid-template-columns: 1.3fr 0.7fr;

    gap: 100px;

    align-items: end;
}

.cta-grid p:not(.section-label) {
    color: #bcbcbc;
}

/* =========================================================
   MAC-JIM PREMIUM CORPORATE FOOTER
   ========================================================= */

.site-footer {
    --footer-bg: #050d18;
    --footer-surface: #071426;
    --footer-text: rgba(255,255,255,.70);
    --footer-muted: rgba(255,255,255,.46);
    --footer-line: rgba(255,255,255,.11);
    --footer-gold: var(
        --site-secondary-color,
        #D6A12A
    );

    position: relative;

    margin-top: 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 5%,
            rgba(214,161,42,.08),
            transparent 25%
        ),
        #050d18;

    color: #fff;
}


.site-footer::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(214,161,42,.65),
            transparent
        );
}


/* =========================================================
   INTRO
   ========================================================= */

.footer-intro {
    display: grid;

    grid-template-columns:
        .8fr
        1.35fr
        auto;

    gap: 70px;

    align-items: end;

    padding-top: 82px;
    padding-bottom: 74px;

    border-bottom:
        1px solid var(--footer-line);
}


.footer-intro__brand {
    align-self: start;
}


.footer-brand-link {
    display: inline-flex;

    align-items: center;

    gap: 16px;

    color: #fff;

    text-decoration: none;
}


.footer-brand-mark {
    width: 46px;
    height: 46px;

    display: inline-flex;

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

    flex-shrink: 0;

    border:
        1px solid rgba(214,161,42,.65);

    background:
        transparent;

    color: var(--footer-gold);

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

    letter-spacing: -.03em;
}


.footer-brand-text {
    display: flex;

    flex-direction: column;
}


.footer-brand-text strong {
    color: #fff;

    font-size: 18px;
    font-weight: 750;

    line-height: 1;

    letter-spacing: -.02em;
}


.footer-brand-text small {
    margin-top: 6px;

    color: var(--footer-muted);

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

    line-height: 1;

    letter-spacing: .20em;
}


.footer-tagline {
    display: block;

    margin-top: 20px;

    color: var(--footer-gold);

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

    letter-spacing: .17em;

    text-transform: uppercase;
}


.footer-intro__statement {
    max-width: 650px;
}


.footer-eyebrow {
    display: block;

    margin-bottom: 15px;

    color: var(--footer-gold);

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

    letter-spacing: .20em;
}


.footer-intro__statement h2 {
    max-width: 630px;

    margin: 0;

    color: #fff;

    font-size:
        clamp(32px, 3.5vw, 50px);

    font-weight: 620;

    line-height: 1.02;

    letter-spacing: -.045em;
}


.footer-intro__statement p {
    max-width: 540px;

    margin:
        20px
        0
        0;

    color: var(--footer-text);

    font-size: 13px;

    line-height: 1.8;
}


.footer-intro__actions {
    display: flex;

    flex-direction: column;

    gap: 10px;

    min-width: 190px;
}


.footer-btn {
    min-height: 47px;

    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    gap: 22px;

    padding:
        0
        18px;

    text-decoration: none;

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

    transition:
        transform .22s ease,
        background .22s ease,
        color .22s ease,
        border-color .22s ease;
}


.footer-btn--primary {
    border:
        1px solid var(--footer-gold);

    background:
        var(--footer-gold);

    color: #071426;
}


.footer-btn--secondary {
    border:
        1px solid rgba(255,255,255,.24);

    background:
        transparent;

    color: #fff;
}


.footer-btn:hover {
    transform:
        translateY(-2px);
}


.footer-btn--secondary:hover {
    border-color:
        var(--footer-gold);

    color:
        var(--footer-gold);
}


/* =========================================================
   MAIN FOOTER
   ========================================================= */

.footer-main {
    display: grid;

    grid-template-columns:
        1.4fr
        .65fr
        .8fr
        1fr;

    gap: 66px;

    padding-top: 68px;
    padding-bottom: 68px;

    border-bottom:
        1px solid var(--footer-line);
}


.footer-section-label {
    display: block;

    margin-bottom: 18px;

    color: var(--footer-gold);

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

    letter-spacing: .18em;
}


.footer-summary {
    max-width: 390px;

    margin: 0;

    color: var(--footer-text);

    font-size: 15px;

    line-height: 1.78;
}


.footer-address {
    max-width: 360px;

    margin:
        26px
        0
        0;

    color: var(--footer-muted);

    font-size: 11px;

    font-style: normal;

    line-height: 1.7;
}


.footer-column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.footer-column h3 {
    margin:
        0
        0
        22px;

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

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

    letter-spacing: .18em;

    text-transform: uppercase;
}


.footer-column > a {
    position: relative;

    margin-bottom: 12px;

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

    text-decoration: none;

    font-size: 12px;
    font-weight: 500;

    transition:
        color .2s ease,
        transform .2s ease;
}


.footer-column > a:hover {
    color: #fff;

    transform:
        translateX(4px);
}


/* =========================================================
   CONTACT
   ========================================================= */

.footer-contact__item {
    width: 100%;

    margin-bottom: 21px;
}


.footer-contact__item > span {
    display: block;

    margin-bottom: 6px;

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

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

    letter-spacing: .15em;

    text-transform: uppercase;
}


.footer-contact__item a {
    color: rgba(255,255,255,.80);

    text-decoration: none;

    font-size: 12px;

    line-height: 1.6;

    transition:
        color .2s ease;
}


.footer-contact__item a:hover {
    color: var(--footer-gold);
}


/* =========================================================
   SOCIAL RAIL
   ========================================================= */
.footer-rail {
    min-height: 82px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;

    padding-top: 18px;
    padding-bottom: 18px;

    border-bottom:
        1px solid var(--footer-line);
}


.footer-rail__label {
    color: rgba(255,255,255,.44);

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

    letter-spacing: .18em;

    text-transform: uppercase;
}

.footer-social-links {
    display: flex;

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

    gap: 24px;

    flex-wrap: wrap;

    margin-left: auto;
}


.footer-social-links a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

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

    text-decoration: none;

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

    transition:
        color .2s ease;
}


.footer-social-links a span {
    color: var(--footer-gold);
}


.footer-social-links a:hover {
    color: #fff;
}


/* =========================================================
   BOTTOM
   ========================================================= */

.footer-bottom {
    min-height: 74px;

    display: grid;

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

    align-items: center;

    gap: 30px;
}


.footer-bottom p,
.footer-credit {
    margin: 0;

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

    font-size: 9px;

    line-height: 1.5;
}


.footer-bottom-links {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;
}


.footer-bottom-links span {
    color: rgba(255,255,255,.34);

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

    letter-spacing: .15em;

    text-transform: uppercase;
}


.footer-credit {
    text-align: right;
}


.footer-credit strong {
    margin-left: 3px;

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

    font-weight: 650;
}


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

@media (max-width: 1000px) {

    .footer-intro {
        grid-template-columns:
            .8fr
            1.2fr;

        gap: 45px;
    }


    .footer-intro__actions {
        grid-column:
            1 / -1;

        flex-direction: row;

        min-width: 0;
    }


    .footer-btn {
        min-width: 190px;
    }


    .footer-main {
        grid-template-columns:
            1.3fr
            .7fr
            .8fr;

        gap: 44px;
    }


    .footer-contact {
        grid-column:
            2 / 4;
    }

}


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

@media (max-width: 700px) {

    .footer-intro {
        grid-template-columns: 1fr;

        gap: 38px;

        padding-top: 64px;
        padding-bottom: 55px;
    }


    .footer-intro__statement h2 {
        font-size: 36px;
    }


    .footer-intro__actions {
        grid-column: auto;

        flex-direction: column;
    }


    .footer-btn {
        width: 100%;

        min-width: 0;
    }


    .footer-main {
        grid-template-columns:
            1fr
            1fr;

        gap:
            48px
            28px;

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


    .footer-main__identity {
        grid-column:
            1 / -1;
    }


    .footer-contact {
        grid-column:
            1 / -1;

        padding-top: 12px;
    }


   .footer-rail {
    align-items: flex-start;

    flex-direction: column;

    gap: 18px;

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


.footer-social-links {
    width: 100%;

    justify-content: flex-start;

    margin-left: 0;
}

    .footer-bottom {
        grid-template-columns: 1fr;

        gap: 13px;

        padding-top: 26px;
        padding-bottom: 28px;
    }


    .footer-bottom-links {
        justify-content: flex-start;
    }


    .footer-credit {
        text-align: left;
    }

}


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

@media (max-width: 460px) {

    .footer-brand-mark {
        width: 42px;
        height: 42px;
    }


    .footer-intro__statement h2 {
        font-size: 31px;
    }


    .footer-main {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    .footer-main__identity,
    .footer-contact {
        grid-column: auto;
    }


    .footer-summary {
        font-size: 14px;
    }


    .footer-social-links {
        flex-direction: column;

        align-items: flex-start;

        gap: 13px;
    }


    .footer-bottom-links {
        flex-wrap: wrap;

        gap:
            9px
            15px;
    }

}


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

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

    .footer-btn,
    .footer-column > a {
        transition: none;

        transform: none;
    }

}
/* RESPONSIVE */

@media (max-width: 950px) {

    .hero-grid,
    .split-layout,
    .logistics-grid,
    .cta-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .hero-panel {
        border-left: 0;
        border-top: 1px solid var(--border);

        padding-left: 0;
        padding-top: 30px;
    }

    .section-heading {
        align-items: start;
        flex-direction: column;

        gap: 20px;
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    .company-card {
        border-left: 1px solid var(--border);
    }

    .value-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-banner {
        grid-template-columns: 1fr;
        gap: 25px;
    }

}

@media (max-width: 700px) {

    .main-nav {
        display: none;
    }

    .hero {
        padding: 90px 0;
    }

    .hero h1 {
        font-size: clamp(3rem, 14vw, 4.8rem);
    }

    .section {
        padding: 80px 0;
    }

    .sector-grid,
    .value-grid,
    .feature-list {
        grid-template-columns: 1fr;
    }

    .value-grid article {
        border-left: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

}

@media (max-width: 1050px) {

    .main-nav,
    .nav-cta {
        display: none;
    }

    .mobile-menu-button {
        display: block;
    }

}

@media (max-width: 700px) {

    .hero h1 {
        font-size: clamp(2.5rem, 11vw, 3.5rem);
    }

    .brand-text strong {
        font-size: 0.95rem;
    }

}

/* ========================================
   INTERNAL PAGE HERO
======================================== */

.page-hero {
    padding: 105px 0;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(214, 161, 42, 0.15),
            transparent 25%
        ),
        linear-gradient(
            120deg,
            #ffffff,
            #f6f8fb
        );
}

.page-hero h1 {
    max-width: 800px;

    color: var(--navy-deep);

    font-size: clamp(2.4rem, 4vw, 3.7rem);

    line-height: 1.1;

    letter-spacing: -0.035em;

    margin-bottom: 25px;
}

.page-hero > .container > p:last-child {
    max-width: 650px;

    color: var(--muted);

    font-size: 1.05rem;
}


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

@media (max-width: 1050px) {

    .nav-wrapper {
        position: relative;
    }

    .main-nav {
        display: none;

        position: absolute;

        top: calc(100% + 1px);
        left: 0;
        right: 0;

        padding: 18px;

        background: #ffffff;

        border: 1px solid var(--border);

        border-radius: 0 0 12px 12px;

        box-shadow:
            0 20px 40px rgba(7, 31, 61, 0.12);
    }

    .main-nav.mobile-open {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;
    }

    .main-nav.mobile-open a {
        padding: 14px 12px;

        border-bottom: 1px solid var(--border);
    }

    .main-nav.mobile-open a:last-child {
        border-bottom: 0;
    }

    .main-nav a.active::after {
        display: none;
    }

    .mobile-menu-button {
        display: block;
    }

    .mobile-menu-button.active span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .mobile-menu-button.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-button.active span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .mobile-menu-button span {
        transition:
            transform 0.2s ease,
            opacity 0.2s ease;
    }

}

/* =========================================================
   REQUEST QUOTE SECTION
   ========================================================= */

.quote-section {
    padding: 90px 0;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );
}

.quote-container {
    width: min(1120px, calc(100% - 40px));

    margin: 0 auto;
}

.quote-intro {
    max-width: 650px;

    margin-bottom: 36px;
}

.quote-intro h2 {
    margin: 8px 0 12px;

    color: var(--navy-deep);

    font-size: clamp(2rem, 4vw, 3rem);

    line-height: 1.1;
}

.quote-intro p:last-child {
    margin: 0;

    color: #667085;

    font-size: 0.95rem;

    line-height: 1.7;
}

.quote-form {
    padding: 34px;

    border: 1px solid #e5e9ef;
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 16px 50px rgba(7, 31, 61, 0.07);
}

.quote-form-grid {
    display: grid;

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

    gap: 22px;
}

.quote-form .form-group {
    display: grid;

    gap: 8px;
}

.quote-form label {
    color: #172033;

    font-size: 0.78rem;
    font-weight: 800;
}

.quote-form input,
.quote-form select,
.quote-form textarea {
    width: 100%;

    border: 1px solid #dfe5ec;
    border-radius: 10px;

    background: #ffffff;

    color: #172033;

    font: inherit;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.quote-form input,
.quote-form select {
    min-height: 48px;

    padding: 0 14px;
}

.quote-form textarea {
    resize: vertical;

    min-height: 150px;

    padding: 14px;
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
    outline: none;

    border-color: var(--navy);

    box-shadow:
        0 0 0 4px
        color-mix(
            in srgb,
            var(--navy) 10%,
            transparent
        );
}
.quote-message-field {
    margin-top: 22px;
}

.quote-submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 50px;

    margin-top: 24px;

    padding: 0 24px;

    border: 0;
    border-radius: 10px;

    background: var(--navy);

    color: #ffffff;

    cursor: pointer;

    font-size: 0.82rem;
    font-weight: 800;

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

.quote-submit-button:hover {
    background: var(--navy-deep);

    transform: translateY(-1px);

    box-shadow:
        0 10px 22px rgba(11, 49, 95, 0.16);
}

@media (max-width: 760px) {
    .quote-section {
        padding: 65px 0;
    }

    .quote-form {
        padding: 24px;
    }

    .quote-form-grid {
        grid-template-columns: 1fr;
    }

    .quote-submit-button {
        width: 100%;
    }
}

/* =========================================================
   CONTACT / GET IN TOUCH SECTION
   ========================================================= */

.contact-section {
    padding: 90px 0;

    background: #ffffff;
}

.contact-container {
    width: min(1120px, calc(100% - 40px));

    margin: 0 auto;
}

.contact-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 50px;

    align-items: start;
}


/* CONTACT INTRO */

.contact-intro {
    padding-top: 10px;
}

.contact-intro h1,
.contact-intro h2 {
    margin: 8px 0 14px;

    color: var(--navy-deep);

    font-size: clamp(2rem, 4vw, 3.2rem);

    line-height: 1.08;
}

.contact-intro > p:last-of-type {
    max-width: 520px;

    margin: 0;

    color: #667085;

    font-size: 0.95rem;

    line-height: 1.75;
}


/* CONTACT DETAILS */

.contact-details {
    display: grid;

    gap: 14px;

    margin-top: 32px;
}

.contact-detail-item {
    display: flex;
    align-items: flex-start;

    gap: 14px;

    padding: 17px 18px;

    border: 1px solid #e7ebf0;
    border-radius: 12px;

    background: #fafbfc;
}

.contact-detail-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: rgba(11,49,95,0.08);

    color: var(--navy);

    font-weight: 900;
}

.contact-detail-item strong {
    display: block;

    margin-bottom: 4px;

    color: #172033;

    font-size: 0.78rem;
}

.contact-detail-item span,
.contact-detail-item p {
    margin: 0;

    color: #667085;

    font-size: 0.74rem;

    line-height: 1.5;
}


/* CONTACT FORM CARD */

.contact-form-card {
    padding: 34px;

    border: 1px solid #e5e9ef;
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 16px 50px rgba(7,31,61,0.07);
}

.contact-form-card h2,
.contact-form-card h3 {
    margin-bottom: 6px;

    color: var(--navy-deep);

    font-size: 1.35rem;
}

.contact-form-card > p {
    margin-bottom: 24px;

    color: #667085;

    font-size: 0.84rem;

    line-height: 1.6;
}

.contact-form {
    display: grid;

    gap: 18px;
}

.contact-form .form-group {
    display: grid;

    gap: 8px;
}

.contact-form label {
    color: #172033;

    font-size: 0.78rem;

    font-weight: 800;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;

    border: 1px solid #dfe5ec;
    border-radius: 10px;

    background: #ffffff;

    color: #172033;

    font: inherit;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.contact-form input,
.contact-form select {
    min-height: 48px;

    padding: 0 14px;
}

.contact-form textarea {
    min-height: 160px;

    padding: 14px;

    resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;

    border-color: var(--navy);

    box-shadow:
        0 0 0 4px
        color-mix(in srgb, var(--navy) 10%, transparent);
}


/* SEND ENQUIRY BUTTON */

.contact-submit-button,
.contact-form button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 50px;

    padding: 0 24px;

    border: 0;
    border-radius: 10px;

    background: var(--navy);

    color: #ffffff;

    cursor: pointer;

    font-size: 0.82rem;
    font-weight: 800;

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

.contact-submit-button:hover,
.contact-form button[type="submit"]:hover {
    background: var(--navy-deep);

    transform: translateY(-1px);

    box-shadow:
        0 10px 22px rgba(11,49,95,0.16);
}


/* SUCCESS / ERROR FEEDBACK */

.form-success,
.contact-success {
    margin-bottom: 20px;

    padding: 14px 16px;

    border: 1px solid #cfe7d5;
    border-radius: 10px;

    background: #f3fbf5;

    color: #276738;

    font-size: 0.8rem;

    line-height: 1.5;
}

.form-error,
.contact-error {
    margin-bottom: 20px;

    padding: 14px 16px;

    border: 1px solid #f1cccc;
    border-radius: 10px;

    background: #fff6f6;

    color: #a33a3a;

    font-size: 0.8rem;

    line-height: 1.5;
}


/* RESPONSIVE */

@media (max-width: 900px) {
    .contact-layout {
        grid-template-columns: 1fr;

        gap: 34px;
    }
}

@media (max-width: 600px) {
    .contact-section {
        padding: 65px 0;
    }

    .contact-form-card {
        padding: 24px;
    }

    .contact-detail-item {
        padding: 15px;
    }
}

/* =========================================================
   QUOTE MODAL
   ========================================================= */

.quote-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

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

    padding: 24px;
}

.quote-modal.is-open {
    display: flex;
}

.quote-modal-overlay {
    position: absolute;

    inset: 0;

    background: rgba(7, 31, 61, 0.68);

    backdrop-filter: blur(5px);
}

.quote-modal-dialog {
    position: relative;

    z-index: 2;

    width: min(920px, 100%);

    max-height: calc(100vh - 48px);

    overflow-y: auto;

    padding: 34px;

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 30px 80px rgba(7, 31, 61, 0.30);
}

.quote-modal-close {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 50%;

    background: #f2f4f7;

    color: var(--navy-deep);

    cursor: pointer;

    font-size: 1.5rem;
    line-height: 1;
}

.quote-modal-close:hover {
    background: #e9edf2;
}

.quote-modal-header {
    max-width: 620px;

    margin-bottom: 28px;
}

.quote-modal-header h2 {
    margin: 8px 0 10px;

    color: var(--navy-deep);

    font-size: clamp(1.8rem, 4vw, 2.6rem);

    line-height: 1.1;
}

.quote-modal-header p:last-child {
    margin: 0;

    color: #667085;

    font-size: 0.9rem;

    line-height: 1.65;
}

.quote-modal-form {
    display: grid;

    gap: 20px;
}

.quote-modal-grid {
    display: grid;

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

    gap: 18px;
}

.quote-modal-form .form-group {
    display: grid;

    gap: 8px;
}

.quote-modal-form label {
    color: #172033;

    font-size: 0.76rem;
    font-weight: 800;
}

.quote-modal-form input,
.quote-modal-form select,
.quote-modal-form textarea {
    width: 100%;

    border: 1px solid #dfe5ec;
    border-radius: 10px;

    background: #ffffff;

    color: #172033;

    font: inherit;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.quote-modal-form input,
.quote-modal-form select {
    min-height: 46px;

    padding: 0 13px;
}

.quote-modal-form textarea {
    min-height: 125px;

    padding: 13px;

    resize: vertical;
}

.quote-modal-form input:focus,
.quote-modal-form select:focus,
.quote-modal-form textarea:focus {
    outline: none;

    border-color: var(--navy);

    box-shadow:
        0 0 0 4px
        color-mix(in srgb, var(--navy) 10%, transparent);
}

.quote-modal-message {
    margin-top: 2px;
}

.quote-modal-submit {
    min-height: 50px;

    border: 0;
    border-radius: 10px;

    background: var(--navy);

    color: #ffffff;

    cursor: pointer;

    font-size: 0.8rem;
    font-weight: 800;

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

.quote-modal-submit:hover {
    background: var(--navy-deep);

    transform: translateY(-1px);

    box-shadow:
        0 10px 24px rgba(11, 49, 95, 0.16);
}

.quote-modal-feedback {
    display: none;

    padding: 12px 14px;

    border-radius: 9px;

    font-size: 0.78rem;

    line-height: 1.5;
}

body.quote-modal-open {
    overflow: hidden;
}

@media (max-width: 760px) {
    .quote-modal {
        align-items: flex-start;

        padding: 14px;
    }

    .quote-modal-dialog {
        max-height: calc(100vh - 28px);

        padding: 24px;

        border-radius: 16px;
    }

    .quote-modal-grid {
        grid-template-columns: 1fr;
    }

    .quote-modal-close {
        top: 14px;
        right: 14px;
    }
}

.quote-modal-feedback.is-success {
    display: block;

    border: 1px solid #cfe7d5;

    background: #f3fbf5;

    color: #276738;
}

.quote-modal-feedback.is-error {
    display: block;

    border: 1px solid #f1cccc;

    background: #fff6f6;

    color: #a33a3a;
}

.quote-modal-submit:disabled {
    cursor: wait;

    opacity: 0.7;
}

/* =====================================================
   MAC-JIM SECURE CUSTOMER QUOTATION PORTAL
===================================================== */

.customer-quotation-page {
    min-height: 100vh;
    margin: 0;
    background:
        linear-gradient(
            180deg,
            #f5f7fa 0%,
            #eef2f6 100%
        );
    color: #172033;
}

.customer-quotation-page * {
    box-sizing: border-box;
}

.customer-quotation-background {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.customer-quotation-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
    opacity: 0.08;
}

.customer-quotation-orb-one {
    width: 420px;
    height: 420px;
    top: -180px;
    right: -120px;
    background: var(--navy);
}

.customer-quotation-orb-two {
    width: 300px;
    height: 300px;
    bottom: -120px;
    left: -100px;
    background: #d6a12a;
}


/* Header */

.customer-quotation-header {
    position: relative;
    z-index: 10;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
}

.customer-quotation-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.customer-quotation-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.customer-quotation-brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #071f3d;
    color: #d6a12a;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.customer-quotation-brand strong {
    display: block;
    color: #071f3d;
    font-size: 15px;
    letter-spacing: 0.04em;
}

.customer-quotation-brand span {
    display: block;
    margin-top: 2px;
    color: #7b8494;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.customer-quotation-security {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #e5e9ef;
    border-radius: 999px;
    background: #ffffff;
    color: #667085;
    font-size: 11px;
    font-weight: 700;
}

.customer-security-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #28a66a;
    box-shadow:
        0 0 0 4px rgba(40, 166, 106, 0.11);
}


/* Main */

.customer-quotation-main {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 45px 24px 70px;
}


/* Results */

.customer-response-result {
    margin: 0 auto 26px;
    padding: 30px;
    border: 1px solid #e1e6ed;
    border-radius: 20px;
    background: #ffffff;
    text-align: center;
    box-shadow:
        0 14px 45px rgba(15, 23, 42, 0.06);
}

.customer-response-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 16px;
    border-radius: 50%;
    font-size: 22px;
    font-weight: 900;
}

.customer-response-success
.customer-response-result-icon {
    background: #e9f8f0;
    color: #188754;
}

.customer-response-declined
.customer-response-result-icon {
    background: #f2f4f7;
    color: #475467;
}

.customer-response-expired
.customer-response-result-icon {
    background: #fff3db;
    color: #9b6a06;
}

.customer-response-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #9b6a06;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.13em;
}

.customer-response-result h1 {
    margin: 0 0 10px;
    color: #071f3d;
    font-size: 27px;
}

.customer-response-result > p {
    max-width: 560px;
    margin: 0 auto;
    color: #667085;
    font-size: 13px;
    line-height: 1.7;
}

.customer-response-reference {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    margin: 22px auto 15px;
    padding: 13px 20px;
    border-radius: 12px;
    background: #f7f9fb;
}

.customer-response-reference span {
    color: #98a2b3;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.customer-response-reference strong {
    color: #344054;
    font-size: 12px;
}

.customer-response-helper {
    font-size: 11px !important;
}


/* Document */

.customer-quotation-document {
    overflow: hidden;
    border: 1px solid #dde3eb;
    border-radius: 24px;
    background: #ffffff;
    box-shadow:
        0 22px 70px rgba(15, 23, 42, 0.10);
}

.customer-document-accent {
    height: 7px;
    background:
        linear-gradient(
            90deg,
            #071f3d 0%,
            #0b315f 72%,
            #d6a12a 72%,
            #d6a12a 100%
        );
}

.customer-document-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 35px 40px 28px;
}

.customer-document-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #9b6a06;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.12em;
}

.customer-document-header h1 {
    margin: 0;
    color: #071f3d;
    font-size: 25px;
    letter-spacing: -0.02em;
}

.customer-document-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 10px;
    font-weight: 800;
}

.customer-document-status > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #98a2b3;
}

.customer-document-status.status-quoted {
    background: #fff8e7;
    color: #8a620b;
}

.customer-document-status.status-quoted > span {
    background: #d6a12a;
}

.customer-document-status.status-accepted {
    background: #eaf8f1;
    color: #187a4d;
}

.customer-document-status.status-accepted > span {
    background: #28a66a;
}

.customer-document-status.status-declined {
    background: #f3f4f6;
    color: #475467;
}


/* Value */

.customer-document-value-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 27px 40px;
    background:
        linear-gradient(
            135deg,
            #071f3d 0%,
            #0b315f 100%
        );
}

.customer-document-value-banner span {
    display: block;
    margin-bottom: 6px;
    color: #dfc576;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.11em;
}

.customer-document-value-banner strong {
    color: #ffffff;
}

.customer-document-value-banner
> div:first-child strong {
    font-size: 29px;
}

.customer-document-value-service {
    max-width: 320px;
    text-align: right;
}

.customer-document-value-service strong {
    font-size: 13px;
    line-height: 1.5;
}


/* Metadata */

.customer-document-meta-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid #edf0f4;
    background: #f8fafc;
}

.customer-document-meta-grid > div {
    min-width: 0;
    padding: 18px 20px;
    border-right: 1px solid #edf0f4;
}

.customer-document-meta-grid > div:last-child {
    border-right: 0;
}

.customer-document-meta-grid span,
.customer-document-detail-grid span {
    display: block;
    margin-bottom: 6px;
    color: #98a2b3;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.customer-document-meta-grid strong,
.customer-document-detail-grid strong {
    display: block;
    color: #344054;
    font-size: 11px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}


/* Content sections */

.customer-document-section {
    padding: 32px 40px;
    border-bottom: 1px solid #edf0f4;
}

.customer-document-section-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 20px;
}

.customer-document-section-heading
> span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    border-radius: 10px;
    background: #f3f5f8;
    color: #9b6a06;
    font-size: 9px;
    font-weight: 900;
}

.customer-document-section-heading small {
    display: block;
    margin-bottom: 4px;
    color: #98a2b3;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.customer-document-section-heading h2 {
    margin: 0;
    color: #172033;
    font-size: 17px;
}

.customer-document-detail-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.customer-document-detail-grid > div {
    padding: 15px 16px;
    border: 1px solid #e8ecf1;
    border-radius: 12px;
    background: #fafbfc;
}

.customer-document-copy {
    padding: 19px 20px;
    border: 1px solid #e8ecf1;
    border-radius: 13px;
    background: #fafbfc;
    color: #475467;
    font-size: 13px;
    line-height: 1.8;
}


/* Decision panel */

.customer-decision-panel {
    margin: 32px 40px;
    padding: 28px;
    border: 1px solid #dce4ed;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            #f9fbfd 0%,
            #ffffff 100%
        );
}

.customer-decision-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #9b6a06;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.12em;
}

.customer-decision-panel h2 {
    margin: 0 0 8px;
    color: #071f3d;
    font-size: 21px;
}

.customer-decision-panel p {
    max-width: 640px;
    margin: 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.7;
}

.customer-decision-actions {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 22px;
}

.customer-accept-button,
.customer-decline-button {
    min-height: 44px;
    padding: 0 20px;
    border-radius: 11px;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.customer-accept-button {
    border: 1px solid #0b315f;
    background: var(--navy);
    color: #ffffff;
    box-shadow:
        0 8px 20px rgba(11, 49, 95, 0.18);
}

.customer-accept-button:hover {
    transform: translateY(-1px);
}

.customer-decline-button {
    border: 1px solid #d8dee7;
    background: #ffffff;
    color: #475467;
}

.customer-decline-button:hover {
    background: #f8fafc;
}


/* Read only */

.customer-readonly-panel {
    margin: 32px 40px;
    padding: 20px;
    border-radius: 14px;
    background: #f6f8fa;
    text-align: center;
}

.customer-readonly-panel strong {
    display: block;
    margin-bottom: 5px;
    color: #344054;
    font-size: 12px;
}

.customer-readonly-panel p {
    margin: 0;
    color: #667085;
    font-size: 11px;
}


/* Footer */

.customer-document-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 22px 40px;
    background: #f8fafc;
    border-top: 1px solid #edf0f4;
}

.customer-document-footer strong,
.customer-document-footer span {
    display: block;
}

.customer-document-footer strong {
    margin-bottom: 3px;
    color: #344054;
    font-size: 11px;
}

.customer-document-footer span {
    color: #98a2b3;
    font-size: 8px;
    letter-spacing: 0.06em;
}

.customer-document-footer p {
    max-width: 420px;
    margin: 0;
    color: #98a2b3;
    font-size: 9px;
    line-height: 1.6;
    text-align: right;
}


/* Modal */

.customer-modal-open {
    overflow: hidden;
}

.customer-response-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}

.customer-response-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.customer-response-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 21, 40, 0.68);
    backdrop-filter: blur(5px);
}

.customer-response-modal-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 500px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 31px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
        0 30px 90px rgba(7, 31, 61, 0.28);
}

.customer-response-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin-bottom: 17px;
    border-radius: 13px;
    font-size: 18px;
    font-weight: 900;
}

.customer-response-modal-icon.accept {
    background: #eaf8f1;
    color: #188754;
}

.customer-response-modal-icon.decline {
    background: #f2f4f7;
    color: #475467;
}

.customer-response-modal-card
> span {
    display: block;
    margin-bottom: 7px;
    color: #9b6a06;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.11em;
}

.customer-response-modal-card h2 {
    margin: 0 0 10px;
    color: #071f3d;
    font-size: 22px;
}

.customer-response-modal-card
> p {
    margin: 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.7;
}

.customer-confirmation-note {
    margin: 18px 0 4px;
    padding: 14px;
    border: 1px solid #e4e9ef;
    border-radius: 11px;
    background: #f8fafc;
    color: #667085;
    font-size: 11px;
    line-height: 1.65;
}

.customer-decline-field {
    display: block;
    margin-top: 17px;
}

.customer-decline-field
> span {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    color: #344054;
    font-size: 10px;
    font-weight: 800;
}

.customer-decline-field small {
    color: #98a2b3;
    font-size: 9px;
    font-weight: 600;
}

.customer-decline-field select,
.customer-decline-field textarea {
    width: 100%;
    border: 1px solid #d9e0e8;
    border-radius: 10px;
    background: #ffffff;
    color: #344054;
    font: inherit;
    font-size: 12px;
    outline: none;
}

.customer-decline-field select {
    min-height: 44px;
    padding: 0 12px;
}

.customer-decline-field textarea {
    min-height: 105px;
    padding: 12px;
    resize: vertical;
}

.customer-decline-field select:focus,
.customer-decline-field textarea:focus {
    border-color: var(--navy);
    box-shadow:
        0 0 0 3px rgba(11, 49, 95, 0.08);
}

.customer-response-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.customer-response-modal-actions button {
    min-height: 43px;
    padding: 0 17px;
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
}

.customer-modal-cancel {
    border: 1px solid #d9e0e8;
    background: #ffffff;
    color: #475467;
}

.customer-modal-confirm {
    border: 1px solid #0b315f;
    background: var(--navy);
    color: #ffffff;
}

.customer-modal-decline {
    border: 1px solid #344054;
    background: #344054;
    color: #ffffff;
}


/* Responsive */

@media (max-width: 780px) {

    .customer-quotation-main {
        padding:
            26px 14px
            45px;
    }

    .customer-document-header {
        flex-direction: column;
        padding: 28px 23px 22px;
    }

    .customer-document-value-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 23px;
    }

    .customer-document-value-service {
        text-align: left;
    }

    .customer-document-meta-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .customer-document-section {
        padding: 27px 23px;
    }

    .customer-document-detail-grid {
        grid-template-columns: 1fr;
    }

    .customer-decision-panel,
    .customer-readonly-panel {
        margin: 23px;
    }

    .customer-document-footer {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 23px;
    }

    .customer-document-footer p {
        text-align: left;
    }

}


@media (max-width: 520px) {

    .customer-quotation-header {
        padding: 14px;
    }

    .customer-quotation-security {
        display: none;
    }

    .customer-document-meta-grid {
        grid-template-columns: 1fr;
    }

    .customer-document-meta-grid
    > div {
        border-right: 0;
        border-bottom:
            1px solid #edf0f4;
    }

    .customer-document-value-banner
    > div:first-child strong {
        font-size: 24px;
    }

    .customer-decision-actions,
    .customer-response-modal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .customer-accept-button,
    .customer-decline-button,
    .customer-response-modal-actions button {
        width: 100%;
    }

    .customer-response-modal-card {
        padding: 25px 20px;
    }

}

/* =========================================
   PUBLIC QUOTE REQUEST FEEDBACK
========================================= */

.quote-page-feedback {
    display: none;
    align-items: center;
    gap: 16px;

    margin-bottom: 28px;
    padding: 20px 22px;

    border: 1px solid rgba(11, 49, 95, 0.12);
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 12px 35px rgba(11, 49, 95, 0.08);
}

.quote-page-feedback.is-success,
.quote-page-feedback.is-error {
    display: flex;
}

.quote-page-feedback.is-success {
    border-color: rgba(22, 101, 52, 0.22);
    background:
        linear-gradient(
            135deg,
            rgba(240, 253, 244, 0.98),
            rgba(255, 255, 255, 0.98)
        );
}

.quote-page-feedback.is-error {
    border-color: rgba(185, 28, 28, 0.22);
    background:
        linear-gradient(
            135deg,
            rgba(254, 242, 242, 0.98),
            rgba(255, 255, 255, 0.98)
        );
}

.quote-feedback-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;
    flex: 0 0 46px;

    border-radius: 50%;

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

.quote-page-feedback.is-success
.quote-feedback-icon {
    color: #166534;
    background: rgba(22, 101, 52, 0.10);
}

.quote-page-feedback.is-error
.quote-feedback-icon {
    color: #b91c1c;
    background: rgba(185, 28, 28, 0.10);
}

.quote-feedback-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quote-feedback-content strong {
    color: var(--navy);
    font-size: 16px;
    font-weight: 750;
}

.quote-feedback-content span {
    color: #526174;
    font-size: 14px;
    line-height: 1.6;
}

.quote-submit-button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

@media (max-width: 600px) {
    .quote-page-feedback {
        align-items: flex-start;
        padding: 18px;
    }

    .quote-feedback-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }
}

/* =========================================================
   MAC-JIM CORPORATE FOOTER
   ========================================================= */

.site-footer {
    position: relative;
    margin-top: 80px;
    padding: 72px 0 0;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(214, 161, 42, 0.09),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #06182e 0%,
            #09274a 55%,
            #0b315f 100%
        );

    color: #ffffff;
}


/* ---------------------------------------------------------
   MAIN FOOTER GRID
   --------------------------------------------------------- */

.footer-grid {
    display: grid;
    grid-template-columns:
        minmax(260px, 1.5fr)
        minmax(150px, 0.75fr)
        minmax(200px, 1fr)
        minmax(160px, 0.75fr);

    gap: 54px;

    padding-bottom: 58px;
}


/* ---------------------------------------------------------
   FOOTER BRAND
   --------------------------------------------------------- */

.footer-brand {
    max-width: 360px;
}

.footer-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    color: #ffffff;
    text-decoration: none;
}

.footer-brand-mark {
    width: 48px;
    height: 48px;

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

    flex-shrink: 0;

    background:
        linear-gradient(
            135deg,
            var(--site-secondary-color, #D6A12A),
            #f0c35b
        );

    border-radius: 12px;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.16);

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

    color: #071b35;
}

.footer-brand-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.footer-brand-text strong {
    font-size: 17px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 0.4px;

    color: #ffffff;
}

.footer-brand-text small {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.6px;

    color: rgba(255, 255, 255, 0.55);
}

.footer-tagline {
    margin: 23px 0 9px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;

    color: var(
        --site-secondary-color,
        #D6A12A
    );
}

.footer-summary {
    max-width: 330px;

    margin: 0;

    font-size: 12px;
    line-height: 1.85;

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


/* ---------------------------------------------------------
   FOOTER COLUMNS
   --------------------------------------------------------- */

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-column h3 {
    position: relative;

    margin: 4px 0 22px;
    padding-bottom: 11px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;

    color: #ffffff;
}

.footer-column h3::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 28px;
    height: 2px;

    background:
        var(
            --site-secondary-color,
            #D6A12A
        );

    border-radius: 20px;
}

.footer-column > a,
.footer-social-links a {
    display: inline-block;

    margin-bottom: 11px;

    font-size: 11px;
    line-height: 1.6;

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

    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.footer-column > a:hover,
.footer-social-links a:hover {
    color:
        var(
            --site-secondary-color,
            #D6A12A
        );

    transform: translateX(3px);
}

.footer-address {
    max-width: 240px;

    margin: 5px 0 0;

    font-size: 11px;
    line-height: 1.75;

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


/* ---------------------------------------------------------
   SOCIAL LINKS
   --------------------------------------------------------- */

.footer-social-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


/* ---------------------------------------------------------
   REQUEST QUOTE BUTTON
   --------------------------------------------------------- */

.footer-column .footer-quote-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 10px;
    margin-bottom: 0;

    min-height: 40px;

    padding: 10px 16px;

    background:
        var(
            --site-secondary-color,
            #D6A12A
        );

    border: 1px solid
        var(
            --site-secondary-color,
            #D6A12A
        );

    border-radius: 8px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2px;

    color: #071b35;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.12);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.footer-column .footer-quote-link:hover {
    color: #071b35;

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.18);

    filter: brightness(1.05);
}


/* ---------------------------------------------------------
   FOOTER BOTTOM
   --------------------------------------------------------- */

.footer-bottom {
    min-height: 72px;

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

    gap: 24px;

    padding-top: 20px;
    padding-bottom: 20px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.08);
}

.footer-bottom p {
    margin: 0;

    font-size: 10px;
    line-height: 1.6;

    color: rgba(255, 255, 255, 0.42);
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-bottom-links span {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;

    color: rgba(255, 255, 255, 0.34);
}


/* ---------------------------------------------------------
   RESPONSIVE FOOTER
   --------------------------------------------------------- */

@media (max-width: 1050px) {

    .footer-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 45px 55px;
    }

    .footer-brand {
        max-width: 420px;
    }

}


@media (max-width: 700px) {

    .site-footer {
        margin-top: 60px;
        padding-top: 52px;
    }

    .footer-grid {
        grid-template-columns: 1fr;

        gap: 38px;

        padding-bottom: 42px;
    }

    .footer-brand {
        max-width: 100%;
    }

    .footer-summary {
        max-width: 500px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;

        gap: 8px;
    }

}


@media (max-width: 480px) {

    .site-footer {
        padding-top: 44px;
    }

    .footer-brand-mark {
        width: 44px;
        height: 44px;
    }

    .footer-brand-text strong {
        font-size: 15px;
    }

}

/* =========================================================
   MAC-JIM — VISUAL HERO
   ========================================================= */

.hero-visual {
    position: relative;
    isolation: isolate;

    min-height: clamp(620px, 82vh, 850px);

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #061a32 0%,
            #0b315f 55%,
            #09284d 100%
        );
}


/* =========================================================
   BACKGROUND MEDIA
   ========================================================= */

.hero-visual .hero-media {
    position: absolute;
    inset: 0;

    z-index: -5;

    overflow: hidden;
}

.hero-visual .hero-media picture {
    display: block;

    width: 100%;
    height: 100%;
}

.hero-visual .hero-background-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position:
        var(--hero-position, center);

    transform: scale(1.035);

    animation:
        macjimHeroImageEntrance
        1.4s
        cubic-bezier(.2, .75, .25, 1)
        forwards;
}


/* =========================================================
   CINEMATIC OVERLAY
   ========================================================= */

.hero-visual .hero-image-overlay {
    position: absolute;
    inset: 0;

    z-index: -4;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(
                3,
                19,
                38,
                var(--hero-overlay, .55)
            ) 0%,

            rgba(
                5,
                30,
                57,
                calc(
                    var(--hero-overlay, .55)
                    * .88
                )
            ) 43%,

            rgba(
                6,
                34,
                64,
                calc(
                    var(--hero-overlay, .55)
                    * .68
                )
            ) 72%,

            rgba(
                4,
                24,
                46,
                calc(
                    var(--hero-overlay, .55)
                    * .8
                )
            ) 100%
        );
}


/*
 * Adds depth without covering the photograph
 * with one flat dark layer.
 */

.hero-visual::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -3;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(3, 18, 35, .15) 0%,
            transparent 38%,
            rgba(3, 17, 33, .45) 100%
        );
}


/* =========================================================
   AMBIENT BRAND LIGHT
   ========================================================= */

.hero-ambient-glow {
    position: absolute;

    z-index: -2;

    width: 520px;
    height: 520px;

    top: -220px;
    right: -110px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(214, 161, 42, .20),
            rgba(214, 161, 42, .05) 40%,
            transparent 70%
        );

    filter: blur(5px);

    pointer-events: none;
}


/* =========================================================
   CONTENT LAYER
   ========================================================= */

.hero-visual .hero-grid {
    position: relative;

    z-index: 5;

    width: 100%;
}

.hero-visual .hero-content {
    position: relative;

    z-index: 5;
}


/* EYEBROW */

.hero-visual .eyebrow {
    color: #f0c660;

    text-shadow:
        0 1px 15px rgba(0, 0, 0, .18);
}


/* HEADLINE */

.hero-visual .hero-content h1 {
    color: #ffffff;

    text-shadow:
        0 8px 35px rgba(0, 0, 0, .22);
}


/* DESCRIPTION */

.hero-visual .hero-text {
    color: rgba(255, 255, 255, .82);

    text-shadow:
        0 3px 18px rgba(0, 0, 0, .18);
}


/* =========================================================
   BUTTON TREATMENT
   ========================================================= */

.hero-visual .hero-actions .btn {
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease,
        border-color .25s ease;
}

.hero-visual .hero-actions .btn:hover {
    transform: translateY(-3px);
}

.hero-visual .hero-actions .btn-primary {
    box-shadow:
        0 12px 30px rgba(0, 0, 0, .16);
}

.hero-visual .hero-actions .btn-secondary {
    border-color:
        rgba(255, 255, 255, .48);

    color: #ffffff;

    background:
        rgba(255, 255, 255, .08);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-visual
.hero-actions
.btn-secondary:hover {
    background:
        rgba(255, 255, 255, .16);

    border-color:
        rgba(255, 255, 255, .75);
}


/* =========================================================
   STATISTICS PANEL
   ========================================================= */

.hero-visual .hero-panel {
    position: relative;

    z-index: 6;

    border:
        1px solid
        rgba(255, 255, 255, .16);

    background:
        linear-gradient(
            145deg,
            rgba(7, 32, 60, .72),
            rgba(5, 24, 47, .56)
        );

    box-shadow:
        0 28px 70px
        rgba(0, 0, 0, .20);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease;
}

.hero-visual .hero-panel:hover {
    transform: translateY(-5px);

    border-color:
        rgba(214, 161, 42, .30);
}

.hero-visual .hero-panel-label {
    color: #f0c660;
}

.hero-visual .hero-stat {
    border-color:
        rgba(255, 255, 255, .11);
}

.hero-visual .hero-stat strong {
    color: #ffffff;
}

.hero-visual .hero-stat span {
    color:
        rgba(255, 255, 255, .68);
}


/* =========================================================
   FLOATING KEYWORDS
   ========================================================= */

.hero-floating-details {
    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    overflow: hidden;
}

.hero-floating-label {
    position: absolute;

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

    gap: 8px;

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

    font-size:
        clamp(.55rem, .65vw, .72rem);

    font-weight: 800;

    letter-spacing: .18em;

    text-transform: uppercase;

    white-space: nowrap;

    animation:
        macjimFloatingLabel
        6s
        ease-in-out
        infinite;
}

.hero-floating-label::before {
    content: "";

    width: 22px;
    height: 1px;

    background:
        rgba(214, 161, 42, .65);
}


/* Phrase 01 */

.hero-floating-label-one {
    top: 16%;
    right: 6%;

    animation-delay: 0s;
}


/* Phrase 02 */

.hero-floating-label-two {
    bottom: 15%;
    left: 4%;

    animation-delay: -2s;
}


/* Phrase 03 */

.hero-floating-label-three {
    right: 28%;
    bottom: 8%;

    animation-delay: -4s;
}


/* =========================================================
   BOTTOM ACCENT
   ========================================================= */

.hero-bottom-line {
    position: absolute;

    z-index: 6;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(214, 161, 42, .75),
            transparent
        );

    pointer-events: none;
}


/* =========================================================
   HERO ENTRANCE MOTION
   ========================================================= */

.hero-visual .hero-content {
    animation:
        macjimHeroContentEntrance
        .85s
        cubic-bezier(.2, .75, .25, 1)
        both;
}

.hero-visual .hero-panel {
    animation:
        macjimHeroPanelEntrance
        1s
        .12s
        cubic-bezier(.2, .75, .25, 1)
        both;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes macjimHeroImageEntrance {

    from {
        transform: scale(1.09);
        opacity: .72;
    }

    to {
        transform: scale(1.035);
        opacity: 1;
    }

}


@keyframes macjimHeroContentEntrance {

    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes macjimHeroPanelEntrance {

    from {
        opacity: 0;
        transform:
            translateX(25px)
            translateY(10px);
    }

    to {
        opacity: 1;
        transform:
            translateX(0)
            translateY(0);
    }

}


@keyframes macjimFloatingLabel {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


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

@media (max-width: 980px) {

    .hero-visual {
        min-height: auto;

        padding-top: 105px;
        padding-bottom: 80px;
    }

    .hero-floating-label-one {
        right: 3%;
    }

    .hero-floating-label-two {
        left: 3%;
        bottom: 7%;
    }

    .hero-floating-label-three {
        right: 8%;
        bottom: 3%;
    }

}


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

@media (max-width: 700px) {

    .hero-visual {
        min-height: 720px;

        padding-top: 92px;
        padding-bottom: 60px;

        align-items: flex-end;
    }


    /*
     * Mobile photography generally benefits
     * from a slightly darker overlay because
     * content occupies more of the image.
     */

    .hero-visual .hero-image-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(
                    3,
                    19,
                    38,
                    calc(
                        var(--hero-overlay, .55)
                        * .75
                    )
                )
                0%,

                rgba(
                    3,
                    19,
                    38,
                    calc(
                        var(--hero-overlay, .55)
                        * .95
                    )
                )
                48%,

                rgba(
                    3,
                    19,
                    38,
                    var(--hero-overlay, .55)
                )
                100%
            );
    }


    .hero-visual .hero-background-image {
        object-position:
            var(--hero-position, center);

        transform: scale(1.02);
    }


    .hero-visual .hero-grid {
        gap: 32px;
    }


    .hero-visual .hero-actions {
        width: 100%;
    }


    .hero-visual .hero-actions .btn {
        min-height: 48px;
    }


    /*
     * Floating decoration is reduced on
     * mobile so it never competes with
     * important content.
     */

    .hero-floating-label {
        font-size: .5rem;

        opacity: .72;
    }

    .hero-floating-label-one {
        top: 12%;
        right: -20px;
    }

    .hero-floating-label-two {
        display: none;
    }

    .hero-floating-label-three {
        right: 15px;
        bottom: 3%;
    }


    .hero-ambient-glow {
        width: 350px;
        height: 350px;

        top: -170px;
        right: -160px;
    }

}


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

@media (max-width: 480px) {

    .hero-visual {
        min-height: 680px;
    }

    .hero-floating-label-three {
        display: none;
    }

}


/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
   ========================================================= */

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

    .hero-visual .hero-background-image,
    .hero-visual .hero-content,
    .hero-visual .hero-panel,
    .hero-floating-label {
        animation: none;
    }

    .hero-visual .hero-panel,
    .hero-visual .hero-actions .btn {
        transition: none;
    }

}


/* =========================================================
   MAC-JIM CINEMATIC HERO SLIDER
   ========================================================= */

.mj-hero-slider {
    position: relative;
    min-height: clamp(640px, 86vh, 880px);
    overflow: hidden;
    background: #071f3d;
    color: #ffffff;
}

.mj-hero-slides {
    position: relative;
    min-height: inherit;
}

.mj-hero-slide {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;

    min-height: inherit;

    opacity: 0;
    visibility: hidden;

    transform: scale(1.015);

    transition:
        opacity .9s ease,
        transform 1.3s ease,
        visibility .9s ease;

    pointer-events: none;
}

.mj-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);

    pointer-events: auto;
}

.mj-hero-media,
.mj-hero-media picture,
.mj-hero-background {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}

.mj-hero-background {
    object-fit: cover;
    object-position: var(
        --mj-slide-position,
        center
    );

    transform: scale(1.05);

    transition:
        transform 8s ease;
}

.mj-hero-slide.is-active
.mj-hero-background {
    transform: scale(1);
}


/* =========================================================
   OVERLAY SYSTEM
   ========================================================= */

.mj-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(
                4,
                22,
                44,
                calc(
                    var(
                        --mj-slide-overlay,
                        .55
                    ) + .24
                )
            ) 0%,
            rgba(
                4,
                22,
                44,
                var(
                    --mj-slide-overlay,
                    .55
                )
            ) 43%,
            rgba(
                4,
                22,
                44,
                calc(
                    var(
                        --mj-slide-overlay,
                        .55
                    ) - .22
                )
            ) 73%,
            rgba(4, 22, 44, .18) 100%
        );
}

.mj-hero-vignette {
    position: absolute;
    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            180deg,
            rgba(3, 16, 32, .18),
            transparent 30%,
            transparent 68%,
            rgba(3, 16, 32, .55)
        );
}

.mj-hero-glow {
    position: absolute;

    top: 15%;
    right: 6%;

    z-index: 2;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(214, 161, 42, .14),
            rgba(214, 161, 42, .04) 35%,
            transparent 70%
        );

    filter: blur(3px);

    pointer-events: none;
}

.mj-hero-grid-pattern {
    position: absolute;
    inset: 0;

    z-index: 2;

    opacity: .045;

    background-image:
        linear-gradient(
            rgba(255,255,255,.15) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.15) 1px,
            transparent 1px
        );

    background-size:
        64px 64px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            #000 25%,
            #000 100%
        );
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.mj-hero-inner {
    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(300px, .82fr);

    align-items: center;

    gap: clamp(
        40px,
        7vw,
        110px
    );

    width: 100%;

    padding-top: 104px;
    padding-bottom: 145px;
}

.mj-hero-copy {
    max-width: 730px;
}

.mj-hero-eyebrow-row {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 16px;
}

.mj-hero-line {
    width: 35px;
    height: 2px;

    background: #d6a12a;

    box-shadow:
        0 0 18px rgba(214, 161, 42, .4);
}

.mj-hero-eyebrow {
    margin: 0;

    color: #d6a12a;

    font-size: .74rem;
    font-weight: 850;

    letter-spacing: .12em;
}

.mj-hero-copy h1 {
    max-width: 690px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(
        3rem,
        5vw,
        4.65rem
    );

    font-weight: 760;

    line-height: .98;

    letter-spacing: -.048em;

    text-wrap: balance;
}

.mj-hero-description {
    max-width: 620px;

    margin:
        24px 0 0;

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

    font-size: clamp(
        .98rem,
        1.15vw,
        1.08rem
    );

    line-height: 1.75;
}


/* =========================================================
   CTA BUTTONS
   ========================================================= */

.mj-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 13px;

    margin-top: 30px;
}

.mj-hero-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    min-height: 50px;

    padding:
        0 22px;

    border-radius: 999px;

    font-size: .84rem;
    font-weight: 800;

    text-decoration: none;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}

.mj-hero-primary {
    border:
        1px solid #d6a12a;

    background: #d6a12a;

    color: #071f3d;
}

.mj-hero-primary:hover {
    transform: translateY(-2px);

    background: #ffffff;
    border-color: #ffffff;
}

.mj-hero-secondary {
    border:
        1px solid rgba(
            255,
            255,
            255,
            .35
        );

    background:
        rgba(
            255,
            255,
            255,
            .07
        );

    color: #ffffff;

    backdrop-filter:
        blur(12px);
}

.mj-hero-secondary:hover {
    transform: translateY(-2px);

    background:
        rgba(
            255,
            255,
            255,
            .14
        );
}

.mj-hero-button-arrow {
    font-size: 1rem;
}


/* =========================================================
   FLOATING CARDS
   ========================================================= */

.mj-hero-floating-zone {
    position: relative;

    min-height: 390px;
}

.mj-hero-floating-card {
    position: absolute;

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

    gap: 11px;

    width: min(
        255px,
        80%
    );

    padding:
        15px 17px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .18
        );

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(
                255,
                255,
                255,
                .14
            ),
            rgba(
                255,
                255,
                255,
                .065
            )
        );

    box-shadow:
        0 20px 50px
        rgba(
            0,
            0,
            0,
            .18
        );

    backdrop-filter:
        blur(16px);

    animation:
        mjHeroFloat
        5.5s
        ease-in-out
        infinite;
}

.mj-hero-floating-card-1 {
    top: 12%;
    right: 4%;
}

.mj-hero-floating-card-2 {
    top: 45%;
    left: 2%;

    animation-delay: -1.5s;
}

.mj-hero-floating-card-3 {
    right: 11%;
    bottom: 5%;

    animation-delay: -3s;
}

.mj-floating-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    margin-top: 5px;

    border-radius: 50%;

    background: #d6a12a;

    box-shadow:
        0 0 16px
        rgba(
            214,
            161,
            42,
            .72
        );
}

.mj-hero-floating-card strong {
    display: block;

    color: #ffffff;

    font-size: .76rem;

    line-height: 1.35;
}

.mj-hero-floating-card small {
    display: block;

    margin-top: 3px;

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

    font-size: .65rem;

    line-height: 1.45;
}


/* =========================================================
   ORBIT + DECORATION
   ========================================================= */

.mj-hero-orbit {
    position: absolute;

    top: 50%;
    right: -60px;

    z-index: 3;

    width: 420px;
    height: 420px;

    transform:
        translateY(-50%);

    pointer-events: none;
}

.mj-hero-orbit-ring {
    position: absolute;

    border:
        1px solid
        rgba(
            214,
            161,
            42,
            .22
        );

    border-radius: 50%;
}

.mj-hero-orbit-ring-one {
    inset: 0;

    animation:
        mjOrbitSpin
        24s
        linear
        infinite;
}

.mj-hero-orbit-ring-two {
    inset: 54px;

    border-color:
        rgba(
            255,
            255,
            255,
            .10
        );

    animation:
        mjOrbitSpinReverse
        18s
        linear
        infinite;
}

.mj-hero-orbit-dot {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #d6a12a;

    box-shadow:
        0 0 18px
        rgba(
            214,
            161,
            42,
            .7
        );
}

.mj-hero-orbit-dot-one {
    top: 14%;
    left: 21%;
}

.mj-hero-orbit-dot-two {
    right: 8%;
    bottom: 26%;
}

.mj-hero-ghost-word {
    position: absolute;

    right: 1.5%;
    bottom: 115px;

    z-index: 2;

    max-width: 50vw;

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

    font-size: clamp(
        4rem,
        10vw,
        9rem
    );

    font-weight: 900;

    letter-spacing: -.06em;

    white-space: nowrap;

    pointer-events: none;

    user-select: none;
}


/* =========================================================
   CONTROLS
   ========================================================= */

.mj-hero-controls {
    position: absolute;

    left: 50%;
    bottom: 32px;

    z-index: 10;

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

    gap: 30px;

    width: 100%;

    transform:
        translateX(-50%);
}

.mj-hero-navigation {
    display: flex;
    align-items: center;

    gap: 18px;
}

.mj-hero-arrow {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .22
        );

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            .07
        );

    color: #ffffff;

    cursor: pointer;

    backdrop-filter:
        blur(10px);

    transition:
        transform .2s ease,
        background .2s ease;
}

.mj-hero-arrow:hover {
    transform:
        translateY(-2px);

    background:
        rgba(
            255,
            255,
            255,
            .16
        );
}

.mj-hero-pagination {
    display: flex;
    align-items: center;

    gap: 12px;
}

.mj-hero-pagination-item {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 0;

    border: 0;

    background: transparent;

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

    cursor: pointer;
}

.mj-hero-pagination-item > span:first-child {
    font-size: .68rem;
    font-weight: 800;
}

.mj-hero-pagination-track {
    position: relative;

    display: block;

    width: 34px;
    height: 2px;

    overflow: hidden;

    background:
        rgba(
            255,
            255,
            255,
            .24
        );
}

.mj-hero-pagination-progress {
    position: absolute;

    inset:
        0 auto 0 0;

    width: 0%;

    background: #d6a12a;
}

.mj-hero-pagination-item.is-active {
    color: #ffffff;
}

.mj-hero-pagination-item.is-active
.mj-hero-pagination-track {
    width: 58px;
}

.mj-hero-pagination-item.is-active
.mj-hero-pagination-progress {
    animation:
        mjHeroProgress
        7s
        linear
        forwards;
}

.mj-hero-counter {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #ffffff;
}

.mj-hero-counter strong {
    font-size: .8rem;
}

.mj-hero-counter span {
    width: 32px;
    height: 1px;

    background:
        rgba(
            255,
            255,
            255,
            .28
        );
}

.mj-hero-counter small {
    color:
        rgba(
            255,
            255,
            255,
            .5
        );

    font-size: .67rem;
}

.mj-hero-bottom-accent {
    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 9;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #d6a12a 0 18%,
            rgba(
                255,
                255,
                255,
                .16
            ) 18% 100%
        );
}


/* =========================================================
   SLIDE CONTENT ENTRANCE
   ========================================================= */

.mj-hero-slide
.mj-hero-copy,
.mj-hero-slide
.mj-hero-floating-zone {
    opacity: 0;

    transform:
        translateY(22px);

    transition:
        opacity .7s ease .25s,
        transform .7s ease .25s;
}

.mj-hero-slide.is-active
.mj-hero-copy,
.mj-hero-slide.is-active
.mj-hero-floating-zone {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes mjHeroFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-9px);
    }

}

@keyframes mjOrbitSpin {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}

@keyframes mjOrbitSpinReverse {

    from {
        transform:
            rotate(360deg);
    }

    to {
        transform:
            rotate(0deg);
    }

}

@keyframes mjHeroProgress {

    from {
        width: 0%;
    }

    to {
        width: 100%;
    }

}


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

@media (max-width: 1020px) {

    .mj-hero-inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(250px, .55fr);

        gap: 30px;
    }

    .mj-hero-floating-zone {
        min-height: 320px;
    }

    .mj-hero-floating-card {
        width: 220px;
    }

    .mj-hero-orbit {
        right: -170px;
    }

}


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

@media (max-width: 760px) {

    .mj-hero-slider {
        min-height: 760px;
    }

    .mj-hero-inner {
        display: block;

        padding-top: 115px;
        padding-bottom: 150px;
    }

    .mj-hero-copy {
        max-width: 100%;
    }

    .mj-hero-copy h1 {
        max-width: 540px;

        font-size: clamp(
            2.5rem,
            10.2vw,
            3.35rem
        );

        line-height: 1.01;
    }

    .mj-hero-description {
        max-width: 520px;

        font-size: .96rem;

        line-height: 1.65;
    }

    .mj-hero-floating-zone {
        position: absolute;

        inset:
            auto 0 115px 0;

        min-height: 120px;

        pointer-events: none;
    }

    .mj-hero-floating-card {
        width: auto;

        max-width: 205px;

        padding:
            10px 12px;
    }

    .mj-hero-floating-card-1 {
        top: 0;
        left: 0;
        right: auto;
    }

    .mj-hero-floating-card-2 {
        display: none;
    }

    .mj-hero-floating-card-3 {
        top: 58px;
        right: 0;
        bottom: auto;
    }

    .mj-hero-orbit {
        top: 36%;
        right: -245px;

        width: 390px;
        height: 390px;

        opacity: .7;
    }

    .mj-hero-ghost-word {
        right: -2%;
        bottom: 170px;

        max-width: none;

        font-size: 5rem;
    }

    .mj-hero-controls {
        bottom: 26px;
    }

    .mj-hero-pagination {
        gap: 9px;
    }

    .mj-hero-pagination-item.is-active
    .mj-hero-pagination-track {
        width: 38px;
    }

    .mj-hero-pagination-item
    .mj-hero-pagination-track {
        width: 22px;
    }

    .mj-hero-counter {
        display: none;
    }

}


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

@media (max-width: 520px) {

    .mj-hero-slider {
        min-height: 790px;
    }

    .mj-hero-inner {
        padding-top: 105px;
    }

    .mj-hero-copy h1 {
        font-size: clamp(
            2.25rem,
            10.5vw,
            2.9rem
        );

        letter-spacing: -.035em;
    }

    .mj-hero-actions {
        align-items: stretch;
        flex-direction: column;

        width: 100%;
    }

    .mj-hero-actions .btn {
        width: 100%;
    }

    .mj-hero-navigation {
        width: 100%;

        justify-content: space-between;
    }

    .mj-hero-arrow {
        width: 38px;
        height: 38px;
    }

    .mj-hero-floating-card {
        max-width: 178px;
    }

    .mj-hero-floating-card strong {
        font-size: .68rem;
    }

    .mj-hero-floating-card small {
        font-size: .59rem;
    }

}


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

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

    .mj-hero-slide,
    .mj-hero-background,
    .mj-hero-copy,
    .mj-hero-floating-zone,
    .mj-hero-floating-card,
    .mj-hero-orbit-ring,
    .mj-hero-pagination-progress {
        animation: none !important;
        transition: none !important;
    }

}

/* =========================================================
   MAC-JIM HERO — LAYOUT REFINEMENT
   Gives the content proper premium breathing room
   ========================================================= */

/*
 * Keep the Hero content aligned with the site's
 * overall visual grid instead of touching the viewport.
 */
.mj-hero-slider .container {
    width: min(100% - 64px, 1220px);
    margin-left: auto;
    margin-right: auto;
}


/* Main Hero layout */
.mj-hero-inner {
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, .75fr);

    gap: clamp(55px, 7vw, 105px);
}


/* Left content */
.mj-hero-copy {
    max-width: 650px;
}


/* Eyebrow */
.mj-hero-eyebrow-row {
    margin-bottom: 20px;
}

.mj-hero-eyebrow {
    font-size: .72rem;
    letter-spacing: .14em;
}


/* Main headline — less oversized and more elegant */
.mj-hero-copy h1 {
    max-width: 640px;

    font-size: clamp(
        2.9rem,
        4.35vw,
        4.15rem
    );

    line-height: 1.02;
    letter-spacing: -.042em;
}


/* Supporting copy */
.mj-hero-description {
    max-width: 570px;

    margin-top: 22px;

    font-size: 1rem;
    line-height: 1.72;

    color: rgba(255, 255, 255, .76);
}


/* Buttons */
.mj-hero-actions {
    margin-top: 29px;
}


/* Give floating cards their own cleaner area */
.mj-hero-floating-zone {
    min-height: 360px;
}


/* Prevent first floating card from getting too close
   to the browser edge */
.mj-hero-floating-card-1 {
    top: 10%;
    right: 0;
}

.mj-hero-floating-card-2 {
    top: 43%;
    left: 0;
}

.mj-hero-floating-card-3 {
    right: 7%;
    bottom: 4%;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    .mj-hero-slider .container {
        width: min(100% - 96px, 1280px);
    }

    .mj-hero-copy {
        max-width: 680px;
    }

}


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

@media (max-width: 1020px) {

    .mj-hero-slider .container {
        width: min(100% - 48px, 1180px);
    }

    .mj-hero-inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(250px, .55fr);

        gap: 35px;
    }

    .mj-hero-copy h1 {
        font-size: clamp(
            2.7rem,
            5.8vw,
            3.7rem
        );
    }

}


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

@media (max-width: 760px) {

    .mj-hero-slider .container {
        width: calc(100% - 40px);
    }

    .mj-hero-inner {
        display: block;
    }

    .mj-hero-copy {
        max-width: 100%;
    }

    .mj-hero-copy h1 {
        max-width: 560px;

        font-size: clamp(
            2.35rem,
            10vw,
            3.15rem
        );

        line-height: 1.03;
    }

    .mj-hero-description {
        max-width: 520px;
    }

}


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

@media (max-width: 480px) {

    .mj-hero-slider .container {
        width: calc(100% - 32px);
    }

    .mj-hero-copy h1 {
        font-size: clamp(
            2.15rem,
            10.5vw,
            2.75rem
        );
    }

}

/* =========================================================
   MAC-JIM HERO — FINAL RESPONSIVE POLISH
   Desktop + Tablet + Mobile
   ========================================================= */


/* =========================================================
   DESKTOP REFINEMENT
   ========================================================= */

@media (min-width: 1021px) {

    .mj-hero-slider {
        min-height: clamp(620px, 78vh, 760px);
    }

    .mj-hero-inner {
        padding-top: 80px;
        padding-bottom: 125px;
    }

    .mj-hero-copy {
        position: relative;
        z-index: 6;
    }

    .mj-hero-floating-zone {
        position: relative;
        z-index: 5;
    }

}


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

@media (min-width: 761px) and (max-width: 1020px) {

    .mj-hero-slider {
        min-height: 720px;
    }

    .mj-hero-inner {
        padding-top: 90px;
        padding-bottom: 135px;
    }

    .mj-hero-floating-card {
        max-width: 210px;
    }

}


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

@media (max-width: 760px) {

    /*
     * Give the Hero enough vertical space.
     */
    .mj-hero-slider {
        min-height: 820px;
        height: auto;
    }


    .mj-hero-slides,
    .mj-hero-slide {
        min-height: 820px;
    }


    /*
     * Proper mobile page padding.
     */
    .mj-hero-slider .container {
        width: auto;
        max-width: none;

        margin-left: 0;
        margin-right: 0;

        padding-left: 20px;
        padding-right: 20px;
    }


    /*
     * Mobile content becomes a clean
     * single-column composition.
     */
    .mj-hero-inner {
        display: block;

        padding-top: 34px;
        padding-bottom: 175px;
    }


    .mj-hero-copy {
        position: relative;

        z-index: 7;

        width: 100%;
        max-width: none;
    }


    /* Eyebrow */

    .mj-hero-eyebrow-row {
        gap: 11px;

        margin-bottom: 18px;
    }


    .mj-hero-line {
        width: 28px;
    }


    .mj-hero-eyebrow {
        font-size: .66rem;

        line-height: 1.4;

        letter-spacing: .11em;
    }


    /* Headline */

    .mj-hero-copy h1 {
        width: 100%;
        max-width: 100%;

        margin: 0;

        font-size: clamp(
            2.25rem,
            10vw,
            3rem
        );

        line-height: 1.03;

        letter-spacing: -.04em;
    }


    /* Description */

    .mj-hero-description {
        width: 100%;
        max-width: 100%;

        margin-top: 22px;

        font-size: .92rem;

        line-height: 1.7;
    }


    /*
     * Buttons stay below the text,
     * never underneath floating cards.
     */
    .mj-hero-actions {
        position: relative;

        z-index: 8;

        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;

        width: 100%;

        margin-top: 25px;
    }


    .mj-hero-actions .btn {
        width: 100%;
        min-height: 48px;

        padding:
            0 18px;
    }


    /*
     * IMPORTANT:
     * Floating cards are no longer
     * absolutely scattered over content.
     */
    .mj-hero-floating-zone {
        position: relative;

        inset: auto;

        z-index: 7;

        display: grid;

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

        gap: 10px;

        min-height: 0;

        margin-top: 28px;

        pointer-events: none;
    }


    .mj-hero-floating-card,
    .mj-hero-floating-card-1,
    .mj-hero-floating-card-2,
    .mj-hero-floating-card-3 {
        position: relative;

        inset: auto;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: 100%;
        max-width: none;
        height: auto;
        min-height: 72px;

        margin: 0;

        padding:
            12px 13px;

        transform: none;
    }


    /*
     * Keep the third card balanced
     * across the row.
     */
    .mj-hero-floating-card-3 {
        grid-column: 1 / -1;

        width: calc(50% - 5px);

        justify-self: center;
    }


    .mj-hero-floating-card strong {
        font-size: .7rem;

        line-height: 1.35;
    }


    .mj-hero-floating-card small {
        margin-top: 4px;

        font-size: .61rem;

        line-height: 1.4;
    }


    /*
     * Background decoration is simplified
     * on small screens.
     */
    .mj-hero-orbit {
        top: 34%;
        right: -220px;

        width: 350px;
        height: 350px;

        opacity: .42;
    }


    .mj-hero-ghost-word {
        right: -12px;
        bottom: 115px;

        max-width: 100%;

        overflow: hidden;

        font-size: 4.4rem;

        opacity: .65;
    }


    /*
     * Navigation gets its own bottom zone.
     */
    .mj-hero-controls {
        left: 0;
        bottom: 22px;

        z-index: 20;

        width: 100%;

        padding-left: 20px;
        padding-right: 20px;

        transform: none;
    }


    .mj-hero-navigation {
        width: 100%;

        justify-content: space-between;

        gap: 10px;
    }


    .mj-hero-pagination {
        flex: 1;

        justify-content: center;

        gap: 9px;
    }


    .mj-hero-arrow {
        flex: 0 0 40px;

        width: 40px;
        height: 40px;
    }


    .mj-hero-counter {
        display: none;
    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .mj-hero-slider,
    .mj-hero-slides,
    .mj-hero-slide {
        min-height: 850px;
    }


    .mj-hero-slider .container {
        padding-left: 16px;
        padding-right: 16px;
    }


    .mj-hero-inner {
        padding-top: 30px;
        padding-bottom: 170px;
    }


    .mj-hero-copy h1 {
        font-size: clamp(
            2.05rem,
            9.8vw,
            2.65rem
        );
    }


    .mj-hero-description {
        font-size: .88rem;
    }


    .mj-hero-floating-zone {
        gap: 8px;
    }


    .mj-hero-floating-card,
    .mj-hero-floating-card-1,
    .mj-hero-floating-card-2,
    .mj-hero-floating-card-3 {
        min-height: 68px;

        padding:
            10px 11px;
    }


    .mj-hero-controls {
        padding-left: 16px;
        padding-right: 16px;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .mj-hero-slider,
    .mj-hero-slides,
    .mj-hero-slide {
        min-height: 875px;
    }


    .mj-hero-copy h1 {
        font-size: 2rem;
    }


    /*
     * On very narrow phones,
     * stack all floating cards.
     */
    .mj-hero-floating-zone {
        grid-template-columns: 1fr;
    }


    .mj-hero-floating-card-3 {
        grid-column: auto;

        width: 100%;
    }

}
/* =========================================================
   MAC-JIM HERO — IMAGE VISIBILITY REFINEMENT
   Keeps the premium dark treatment while allowing
   the actual photography to remain visible.
   ========================================================= */

.mj-hero-background {
    filter:
        saturate(.94)
        contrast(1.02)
        brightness(.92);
}


/*
 * Reduce the amount of darkness on the
 * right side so the subject/image can breathe.
 */
.mj-hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(
                4,
                22,
                44,
                calc(
                    var(
                        --mj-slide-overlay,
                        .55
                    ) + .18
                )
            ) 0%,

            rgba(
                4,
                22,
                44,
                calc(
                    var(
                        --mj-slide-overlay,
                        .55
                    ) + .04
                )
            ) 38%,

            rgba(
                4,
                22,
                44,
                calc(
                    var(
                        --mj-slide-overlay,
                        .55
                    ) - .25
                )
            ) 68%,

            rgba(
                4,
                22,
                44,
                .08
            ) 100%
        );
}


/*
 * Keep readable text without washing
 * the photograph in navy.
 */
.mj-hero-vignette {
    background:
        linear-gradient(
            180deg,
            rgba(3, 16, 32, .10),
            transparent 32%,
            transparent 68%,
            rgba(3, 16, 32, .42)
        );
}


/*
 * Slightly soften decorative layers so
 * they complement rather than cover imagery.
 */
.mj-hero-grid-pattern {
    opacity: .025;
}

.mj-hero-glow {
    opacity: .8;
}


/* =========================================================
   MOBILE
   On mobile, retain slightly stronger readability because
   the copy sits over more of the image.
   ========================================================= */

@media (max-width: 760px) {

    .mj-hero-background {
        filter:
            saturate(.90)
            contrast(1.02)
            brightness(.82);
    }


    .mj-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(4, 22, 44, .64) 0%,
                rgba(4, 22, 44, .56) 45%,
                rgba(4, 22, 44, .72) 100%
            );
    }

}

/* =========================================================
   MAC-JIM PROJECTS & OPPORTUNITIES
   ========================================================= */

.mj-projects-section {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background:
        radial-gradient(
            circle at top right,
            rgba(214, 161, 42, 0.12),
            transparent 28%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(11, 49, 95, 0.08),
            transparent 32%
        ),
        #f7f8fa;
}

.mj-projects-container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   DECORATIVE BACKGROUND
   ========================================================= */

.mj-projects-orbit {
    position: absolute;
    border: 1px solid rgba(11, 49, 95, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.mj-projects-orbit-one {
    width: 540px;
    height: 540px;
    top: -260px;
    right: -170px;
}

.mj-projects-orbit-two {
    width: 360px;
    height: 360px;
    bottom: -210px;
    left: -140px;
}

.mj-projects-ghost-word {
    position: absolute;
    top: 90px;
    right: -15px;

    font-size: clamp(100px, 14vw, 220px);
    font-weight: 800;
    line-height: 0.8;
    letter-spacing: -0.08em;

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

    pointer-events: none;
    user-select: none;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.mj-projects-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 70px;
    align-items: end;

    margin-bottom: 64px;
}

.mj-projects-heading-copy {
    max-width: 760px;
}

.mj-projects-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 20px;
}

.mj-projects-eyebrow > span {
    width: 42px;
    height: 2px;
    background: #d6a12a;
}

.mj-projects-eyebrow p {
    margin: 0;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;

    color: #0b315f;
}

.mj-projects-heading h2 {
    margin: 0;

    max-width: 820px;

    font-size: clamp(42px, 5.2vw, 78px);
    line-height: 0.98;
    letter-spacing: -0.045em;

    color: #0b315f;
}

.mj-projects-heading-side {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.mj-projects-heading-side > p {
    margin: 0;

    max-width: 530px;

    font-size: 16px;
    line-height: 1.75;

    color: #5f6874;
}

.mj-projects-count {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mj-projects-count strong {
    font-size: 50px;
    line-height: 1;
    color: #d6a12a;
}

.mj-projects-count span {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;

    color: #0b315f;
    text-transform: uppercase;
}


/* =========================================================
   PROJECT GRID
   ========================================================= */

.mj-projects-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(0, 0.7fr);

    gap: 26px;
}

.mj-project-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    background: #ffffff;

    border: 1px solid rgba(11, 49, 95, 0.08);

    border-radius: 26px;

    overflow: hidden;

    box-shadow:
        0 24px 70px rgba(11, 49, 95, 0.08);

    transform: translateY(0);

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}

.mj-project-card:hover {
    transform: translateY(-8px);

    border-color: rgba(214, 161, 42, 0.35);

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


/* First project becomes the visual lead */

.mj-project-card-featured {
    grid-row: span 2;
}

.mj-project-card-featured .mj-project-media {
    min-height: 580px;
}

.mj-project-card:not(.mj-project-card-featured) .mj-project-media {
    min-height: 270px;
}


/* =========================================================
   PROJECT IMAGE
   ========================================================= */

.mj-project-media {
    position: relative;
    overflow: hidden;

    background: #0b315f;
}

.mj-project-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1);

    transition:
        transform 0.85s cubic-bezier(
            0.2,
            0.7,
            0.2,
            1
        ),
        filter 0.6s ease;
}

.mj-project-card:hover .mj-project-image {
    transform: scale(1.055);
}

.mj-project-image-placeholder {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    background:
        radial-gradient(
            circle at top right,
            rgba(214, 161, 42, 0.26),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #0b315f,
            #071e3d
        );
}

.mj-project-image-placeholder span {
    font-size: clamp(80px, 10vw, 150px);
    font-weight: 800;
    letter-spacing: -0.08em;

    color: rgba(255, 255, 255, 0.08);
}

.mj-project-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(3, 15, 30, 0.12) 0%,
            rgba(3, 15, 30, 0.05) 40%,
            rgba(3, 15, 30, 0.68) 100%
        );

    pointer-events: none;
}


/* =========================================================
   IMAGE TOP DETAILS
   ========================================================= */

.mj-project-card-top {
    position: absolute;
    top: 24px;
    left: 24px;
    right: 24px;

    z-index: 3;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.mj-project-category {
    display: inline-flex;
    align-items: center;

    min-height: 34px;

    padding: 0 13px;

    border-radius: 999px;

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

    background: rgba(7, 30, 61, 0.64);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;

    color: #ffffff;

    text-transform: uppercase;
}

.mj-project-number {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.92);

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

    color: #0b315f;
}


/* =========================================================
   WATERMARK
   ========================================================= */

.mj-project-watermark {
    position: absolute;

    left: 24px;
    bottom: 18px;

    z-index: 2;

    max-width: calc(100% - 48px);

    white-space: nowrap;
    overflow: hidden;

    font-size: clamp(30px, 5vw, 82px);
    line-height: 0.9;
    font-weight: 800;

    letter-spacing: -0.055em;

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

    pointer-events: none;
}


/* =========================================================
   PROJECT CONTENT
   ========================================================= */

.mj-project-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    gap: 34px;

    flex: 1;

    padding: 32px;
}

.mj-project-card-featured .mj-project-content {
    padding: 38px;
}

.mj-project-line {
    display: block;

    width: 40px;
    height: 2px;

    margin-bottom: 20px;

    background: #d6a12a;

    transition: width 0.4s ease;
}

.mj-project-card:hover .mj-project-line {
    width: 72px;
}

.mj-project-content h3 {
    margin: 0 0 15px;

    font-size: clamp(26px, 2.6vw, 42px);
    line-height: 1.05;
    letter-spacing: -0.035em;

    color: #0b315f;
}

.mj-project-card:not(.mj-project-card-featured)
    .mj-project-content h3 {
    font-size: clamp(24px, 2vw, 31px);
}

.mj-project-content p {
    margin: 0;

    max-width: 620px;

    font-size: 15px;
    line-height: 1.72;

    color: #68717d;
}


/* =========================================================
   PROJECT CTA
   ========================================================= */

.mj-project-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    width: 100%;

    padding-top: 22px;

    border-top: 1px solid rgba(11, 49, 95, 0.09);

    color: #0b315f;

    text-decoration: none;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.025em;
}

.mj-project-link-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 50%;

    background: #0b315f;
    color: #ffffff;

    font-size: 17px;

    transition:
        transform 0.35s ease,
        background-color 0.35s ease;
}

.mj-project-card:hover .mj-project-link-icon {
    transform: translate(3px, -3px);
    background: #d6a12a;
}


/* =========================================================
   PROJECTS FOOTER
   ========================================================= */

.mj-projects-footer {
    display: grid;

    grid-template-columns:
        auto minmax(70px, 1fr) auto;

    align-items: center;

    gap: 20px;

    margin-top: 52px;
}

.mj-projects-footer > span:first-child {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;

    color: #0b315f;
}

.mj-projects-footer-line {
    width: 100%;
    height: 1px;

    background: rgba(11, 49, 95, 0.12);
}

.mj-projects-footer p {
    margin: 0;

    max-width: 390px;

    font-size: 12px;
    line-height: 1.6;

    color: #75808d;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.mj-projects-public-empty {
    min-height: 340px;

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

    text-align: center;

    padding: 60px 30px;

    border-radius: 26px;

    border: 1px dashed rgba(11, 49, 95, 0.16);

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

.mj-projects-public-empty > span {
    margin-bottom: 16px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;

    color: #d6a12a;
}

.mj-projects-public-empty h3 {
    margin: 0 0 12px;

    font-size: 30px;

    color: #0b315f;
}

.mj-projects-public-empty p {
    margin: 0;

    color: #6b7581;
}


/* =========================================================
   REVEAL / MOTION
   ========================================================= */

.mj-project-card {
    animation:
        mjProjectEnter
        0.8s
        cubic-bezier(0.2, 0.7, 0.2, 1)
        both;

    animation-delay:
        var(--mj-project-delay, 0ms);
}

@keyframes mjProjectEnter {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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

@media (max-width: 1100px) {

    .mj-projects-section {
        padding: 100px 0;
    }

    .mj-projects-heading {
        grid-template-columns: 1fr;

        gap: 30px;

        margin-bottom: 48px;
    }

    .mj-projects-heading-side {
        max-width: 700px;
    }

    .mj-projects-grid {
        grid-template-columns: 1fr 1fr;
    }

    .mj-project-card-featured {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .mj-project-card-featured .mj-project-media {
        min-height: 500px;
    }

}


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

@media (max-width: 760px) {

    .mj-projects-section {
        padding: 78px 0;
    }

    .mj-projects-ghost-word {
        top: 40px;
        right: -10px;

        font-size: 86px;
    }

    .mj-projects-heading {
        margin-bottom: 36px;
    }

    .mj-projects-heading h2 {
        font-size: clamp(38px, 11vw, 54px);
        line-height: 1;
    }

    .mj-projects-heading-side {
        gap: 22px;
    }

    .mj-projects-heading-side > p {
        font-size: 15px;
        line-height: 1.7;
    }

    .mj-projects-count strong {
        font-size: 42px;
    }

    .mj-projects-grid {
        display: flex;
        flex-direction: column;

        gap: 22px;
    }

    .mj-project-card,
    .mj-project-card-featured {
        width: 100%;
    }

    .mj-project-card-featured .mj-project-media,
    .mj-project-card:not(.mj-project-card-featured)
        .mj-project-media {
        min-height: 360px;
    }

    .mj-project-content,
    .mj-project-card-featured .mj-project-content {
        padding: 26px;
    }

    .mj-project-content h3,
    .mj-project-card:not(.mj-project-card-featured)
        .mj-project-content h3 {
        font-size: 29px;
    }

    .mj-project-card-top {
        top: 18px;
        left: 18px;
        right: 18px;
    }

    .mj-project-watermark {
        left: 18px;
        bottom: 16px;

        max-width: calc(100% - 36px);

        font-size: 42px;
    }

    .mj-projects-footer {
        grid-template-columns: auto 1fr;

        margin-top: 38px;
    }

    .mj-projects-footer p {
        grid-column: 1 / -1;

        max-width: none;
    }

}


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

@media (max-width: 480px) {

    .mj-projects-section {
        padding: 68px 0;
    }

    .mj-projects-eyebrow {
        margin-bottom: 16px;
    }

    .mj-projects-eyebrow > span {
        width: 28px;
    }

    .mj-projects-eyebrow p {
        font-size: 10px;
    }

    .mj-projects-heading h2 {
        font-size: 39px;
    }

    .mj-projects-heading-side > p {
        font-size: 14px;
    }

    .mj-project-card {
        border-radius: 22px;
    }

    .mj-project-card-featured .mj-project-media,
    .mj-project-card:not(.mj-project-card-featured)
        .mj-project-media {
        min-height: 315px;
    }

    .mj-project-category {
        max-width: 72%;

        min-height: 31px;

        padding: 0 10px;

        font-size: 9px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mj-project-number {
        width: 38px;
        height: 38px;

        flex: 0 0 38px;
    }

    .mj-project-content,
    .mj-project-card-featured .mj-project-content {
        padding: 23px;
    }

    .mj-project-content h3,
    .mj-project-card:not(.mj-project-card-featured)
        .mj-project-content h3 {
        font-size: 27px;
    }

    .mj-project-content p {
        font-size: 14px;
    }

    .mj-project-link {
        font-size: 12px;
    }

    .mj-project-link-icon {
        width: 39px;
        height: 39px;

        flex-basis: 39px;
    }

}


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

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

    .mj-project-card,
    .mj-project-image,
    .mj-project-line,
    .mj-project-link-icon {
        animation: none !important;
        transition: none !important;
    }

}

/* =========================================================
   CURRENT BUSINESS FOCUS — IMAGE EXPERIENCE
   ========================================================= */

.mj-focus-visual {
    position: relative;
    min-width: 0;
}

.mj-focus-media {
    position: relative;

    min-height: 580px;

    overflow: hidden;

    border-radius: 28px;

    background: #071e3d;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.22);
}

.mj-focus-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.01);

    transition:
        transform 0.9s
        cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mj-focus-media:hover .mj-focus-image {
    transform: scale(1.06);
}

.mj-focus-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(5, 22, 44, 0.1) 0%,
            rgba(5, 22, 44, 0.08) 40%,
            rgba(5, 22, 44, 0.72) 100%
        );

    pointer-events: none;
}

.mj-focus-ghost-word {
    position: absolute;

    left: 28px;
    bottom: 24px;

    max-width: calc(100% - 56px);

    overflow: hidden;

    font-size: clamp(48px, 7vw, 100px);
    font-weight: 800;
    line-height: 0.85;

    letter-spacing: -0.06em;

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

    pointer-events: none;
}


/* FLOATING LABELS */

.mj-focus-floating {
    position: absolute;
    z-index: 3;

    display: flex;
    align-items: center;
    gap: 11px;

    max-width: 220px;

    padding: 13px 16px;

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

    border-radius: 999px;

    background:
        rgba(7, 30, 61, 0.66);

    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.16);

    color: #ffffff;
}

.mj-focus-floating > span {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: #d6a12a;

    box-shadow:
        0 0 0 5px
        rgba(214, 161, 42, 0.13);
}

.mj-focus-floating strong {
    overflow: hidden;

    font-size: 11px;
    line-height: 1.25;
    font-weight: 800;

    letter-spacing: 0.045em;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.mj-focus-floating-one {
    top: 26px;
    left: 26px;
}

.mj-focus-floating-two {
    top: 48%;
    right: 24px;
}

.mj-focus-floating-three {
    left: 30px;
    bottom: 30px;
}


/* TABLET */

@media (max-width: 1000px) {

    .mj-focus-media {
        min-height: 500px;
    }

}


/* MOBILE */

@media (max-width: 760px) {

    .mj-focus-media {
        min-height: 430px;

        border-radius: 23px;
    }

    .mj-focus-floating-one {
        top: 18px;
        left: 18px;
    }

    .mj-focus-floating-two {
        top: auto;
        right: 18px;
        bottom: 78px;
    }

    .mj-focus-floating-three {
        left: 18px;
        bottom: 20px;
    }

}


/* SMALL MOBILE */

@media (max-width: 480px) {

    .mj-focus-media {
        min-height: 380px;
    }

    .mj-focus-floating {
        max-width: 185px;

        padding: 11px 13px;
    }

    .mj-focus-floating strong {
        font-size: 9px;
    }

    .mj-focus-floating-two {
        bottom: 72px;
    }

    .mj-focus-ghost-word {
        left: 20px;
        bottom: 22px;

        font-size: 53px;
    }

}

/* =========================================================
   CURRENT FOCUS — IMAGE VISIBILITY FIX
   ========================================================= */

.logistics-visual.mj-focus-visual {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.mj-focus-media {
    position: relative !important;
    display: block !important;

    width: 100% !important;
    min-height: 580px !important;

    overflow: hidden !important;
}

.mj-focus-media img.mj-focus-image {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover !important;
    object-position: center !important;

    opacity: 1 !important;
    visibility: visible !important;

    z-index: 1 !important;
}

.mj-focus-image-overlay {
    position: absolute !important;
    inset: 0 !important;

    z-index: 2 !important;

    pointer-events: none;
}

.mj-focus-ghost-word {
    z-index: 3 !important;
}

.mj-focus-floating {
    z-index: 4 !important;
}


/* TABLET */

@media (max-width: 1000px) {

    .mj-focus-media {
        min-height: 500px !important;
    }

}


/* MOBILE */

@media (max-width: 760px) {

    .mj-focus-media {
        min-height: 430px !important;
    }

}


/* SMALL MOBILE */

@media (max-width: 480px) {

    .mj-focus-media {
        min-height: 380px !important;
    }

}

/* =========================================================
   OUR COMPANIES — PREMIUM PUBLIC EXPERIENCE
   ========================================================= */

.mj-companies-section {
    position: relative;
    overflow: hidden;

    padding: 110px 0;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(214, 161, 42, 0.08),
            transparent 32%
        ),
        #f8fafc;
}


.mj-companies-heading {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 70px;
    align-items: end;

    margin-bottom: 56px;
}


.mj-companies-heading h2 {
    max-width: 760px;
    margin: 10px 0 0;

    font-size: clamp(
        2.2rem,
        4vw,
        4.4rem
    );

    line-height: 0.98;
    letter-spacing: -0.045em;

    color: #0b315f;
}


.mj-companies-heading > p {
    margin: 0;

    color: #667386;

    font-size: 15px;
    line-height: 1.8;
}


.mj-companies-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}


.mj-company-card {
    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-rows: 320px 1fr;

    min-height: 570px;

    border: 1px solid rgba(11, 49, 95, 0.08);
    border-radius: 26px;

    background: #ffffff;

    box-shadow:
        0 20px 55px rgba(15, 35, 60, 0.07);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


.mj-company-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 28px 70px rgba(15, 35, 60, 0.12);
}


.mj-company-card-featured {
    grid-column: span 2;

    grid-template-columns: 1.2fr 0.8fr;
    grid-template-rows: none;

    min-height: 510px;
}


.mj-company-media {
    position: relative;
    overflow: hidden;

    min-height: 100%;
    background: #dfe7ef;
}


.mj-company-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

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

    transition:
        transform 0.8s cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );
}


.mj-company-card:hover
.mj-company-image {
    transform: scale(1.045);
}


.mj-company-image-placeholder {
    position: absolute;
    inset: 0;

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

    background:
        linear-gradient(
            135deg,
            #0b315f,
            #173f6e
        );
}


.mj-company-image-placeholder span {
    color: rgba(255,255,255,0.14);

    font-size: 80px;
    font-weight: 800;
    letter-spacing: -0.05em;
}


.mj-company-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(5, 24, 46, 0.58),
            rgba(5, 24, 46, 0.02) 55%
        );
}


.mj-company-number {
    position: absolute;
    top: 22px;
    left: 22px;

    z-index: 2;

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

    width: 48px;
    height: 48px;

    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 50%;

    background: rgba(9, 35, 64, 0.44);
    backdrop-filter: blur(12px);

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
}


.mj-company-ghost-word {
    position: absolute;
    right: 18px;
    bottom: 10px;

    z-index: 2;

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

    font-size: clamp(
        40px,
        5vw,
        72px
    );

    font-weight: 800;
    line-height: 1;

    letter-spacing: -0.06em;

    pointer-events: none;
}


.mj-company-content {
    display: flex;
    flex-direction: column;

    padding: 34px 32px 32px;
}


.mj-company-label {
    color: #d6a12a;

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

    letter-spacing: 0.16em;
}


.mj-company-content h3 {
    margin: 12px 0 14px;

    color: #0b315f;

    font-size: 25px;
    line-height: 1.18;

    letter-spacing: -0.025em;
}


.mj-company-content p {
    margin: 0;

    color: #647286;

    font-size: 14px;
    line-height: 1.8;
}


.mj-company-link {
    display: inline-flex;
    align-items: center;

    margin-top: auto;
    padding-top: 28px;

    color: #0b315f;

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

    text-decoration: none;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.mj-company-link:hover {
    color: #d6a12a;
    transform: translateX(4px);
}


/* FEATURED CARD */

.mj-company-card-featured
.mj-company-content {
    justify-content: center;

    padding: 58px 48px;
}


.mj-company-card-featured
.mj-company-content h3 {
    font-size: clamp(
        30px,
        3vw,
        44px
    );
}


/* TABLET */

@media (max-width: 950px) {

    .mj-companies-section {
        padding: 85px 0;
    }

    .mj-companies-heading {
        grid-template-columns: 1fr;
        gap: 22px;

        margin-bottom: 40px;
    }

    .mj-company-card-featured {
        grid-column: auto;

        grid-template-columns: none;
        grid-template-rows: 340px 1fr;
    }

}


/* MOBILE */

@media (max-width: 720px) {

    .mj-companies-section {
        padding: 68px 0;
    }

    .mj-companies-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .mj-company-card,
    .mj-company-card-featured {
        grid-template-columns: none;
        grid-template-rows: 260px auto;

        min-height: auto;

        border-radius: 20px;
    }

    .mj-company-content,
    .mj-company-card-featured
    .mj-company-content {
        padding: 26px 22px 28px;
    }

    .mj-company-content h3,
    .mj-company-card-featured
    .mj-company-content h3 {
        font-size: 23px;
    }

    .mj-company-link {
        margin-top: 20px;
        padding-top: 0;
    }

    .mj-company-number {
        top: 16px;
        left: 16px;

        width: 42px;
        height: 42px;
    }

    .mj-company-ghost-word {
        right: 12px;
        bottom: 8px;

        font-size: 40px;
    }

}


/* ACCESSIBILITY */

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

    .mj-company-card,
    .mj-company-image,
    .mj-company-link {
        transition: none;
    }

}

/* =========================================================
   BUSINESS SECTORS — PREMIUM PUBLIC EXPERIENCE
   ========================================================= */

.mj-sectors-section {
    position: relative;
    overflow: hidden;

    padding: 110px 0;

    background:
        linear-gradient(
            180deg,
            #081f3b 0%,
            #0b315f 100%
        );
}


.mj-sectors-section::before {
    content: "";
    position: absolute;

    width: 520px;
    height: 520px;

    top: -220px;
    right: -140px;

    border: 1px solid rgba(214, 161, 42, 0.12);
    border-radius: 50%;

    pointer-events: none;
}


.mj-sectors-section::after {
    content: "";
    position: absolute;

    width: 360px;
    height: 360px;

    left: -140px;
    bottom: -180px;

    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;

    pointer-events: none;
}


.mj-sectors-section .container {
    position: relative;
    z-index: 2;
}


.mj-sectors-heading {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 70px;
    align-items: end;

    margin-bottom: 56px;
}


.mj-sectors-heading .section-label {
    color: #d6a12a;
}


.mj-sectors-heading h2 {
    max-width: 760px;

    margin: 10px 0 0;

    color: #ffffff;

    font-size: clamp(
        2.25rem,
        4vw,
        4.3rem
    );

    line-height: 0.98;
    letter-spacing: -0.045em;
}


.mj-sectors-heading > p {
    margin: 0;

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

    font-size: 15px;
    line-height: 1.8;
}


.mj-sectors-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;
}


.mj-sector-card {
    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    min-height: 360px;

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

    border-radius: 24px;

    background:
        rgba(255, 255, 255, 0.045);

    box-shadow:
        0 24px 60px
        rgba(0, 0, 0, 0.16);

    backdrop-filter: blur(8px);

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        background 0.4s ease;
}


.mj-sector-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(214, 161, 42, 0.35);

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


.mj-sector-media {
    position: relative;
    overflow: hidden;

    min-height: 360px;

    background: #122f4e;
}


.mj-sector-image {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

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

    transition:
        transform 0.8s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );
}


.mj-sector-card:hover
.mj-sector-image {
    transform: scale(1.05);
}


.mj-sector-placeholder {
    position: absolute;
    inset: 0;

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

    background:
        linear-gradient(
            135deg,
            #0b315f,
            #163e6b
        );
}


.mj-sector-placeholder span {
    color:
        rgba(255, 255, 255, 0.12);

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


.mj-sector-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(3, 18, 35, 0.72),
            rgba(3, 18, 35, 0.06) 60%
        );
}


.mj-sector-topline {
    position: absolute;

    top: 18px;
    left: 18px;
    right: 18px;

    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}


.mj-sector-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 auto;

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

    border-radius: 50%;

    background:
        rgba(5, 28, 52, 0.42);

    backdrop-filter: blur(10px);

    color: #ffffff;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
}


.mj-sector-tag {
    color:
        rgba(255, 255, 255, 0.78);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
}


.mj-sector-ghost {
    position: absolute;

    left: 18px;
    bottom: 12px;

    z-index: 2;

    max-width: calc(100% - 36px);

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

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

    font-weight: 800;
    line-height: 1;

    letter-spacing: -0.05em;

    pointer-events: none;
}


.mj-sector-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 34px 30px;
}


.mj-sector-content h3 {
    margin: 0 0 16px;

    color: #ffffff;

    font-size: 24px;
    line-height: 1.15;

    letter-spacing: -0.025em;
}


.mj-sector-content p {
    margin: 0;

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

    font-size: 13px;
    line-height: 1.8;
}


.mj-sector-line {
    display: block;

    width: 52px;
    height: 2px;

    margin-top: 26px;

    background: #d6a12a;

    transition:
        width 0.35s ease;
}


.mj-sector-card:hover
.mj-sector-line {
    width: 86px;
}


/* ALTERNATING VISUAL DIRECTION */

.mj-sector-card:nth-child(even)
.mj-sector-media {
    order: 2;
}


.mj-sector-card:nth-child(even)
.mj-sector-content {
    order: 1;
}


/* TABLET */

@media (max-width: 1050px) {

    .mj-sectors-section {
        padding: 90px 0;
    }

    .mj-sectors-heading {
        grid-template-columns: 1fr;
        gap: 22px;

        margin-bottom: 42px;
    }

    .mj-sectors-grid {
        grid-template-columns: 1fr;
    }

    .mj-sector-card {
        min-height: 330px;
    }

    .mj-sector-media {
        min-height: 330px;
    }

}


/* MOBILE */

@media (max-width: 720px) {

    .mj-sectors-section {
        padding: 68px 0;
    }

    .mj-sectors-grid {
        gap: 20px;
    }

    .mj-sector-card {
        display: flex;
        flex-direction: column;

        min-height: 0;

        border-radius: 20px;
    }

    .mj-sector-media,
    .mj-sector-card:nth-child(even)
    .mj-sector-media {
        order: 1;

        width: 100%;
        min-height: 255px;
    }

    .mj-sector-content,
    .mj-sector-card:nth-child(even)
    .mj-sector-content {
        order: 2;

        padding: 25px 22px 27px;
    }

    .mj-sector-content h3 {
        font-size: 22px;
    }

    .mj-sector-ghost {
        left: 14px;
        bottom: 10px;

        font-size: 38px;
    }

    .mj-sector-topline {
        top: 14px;
        left: 14px;
        right: 14px;
    }

}


/* SMALL MOBILE */

@media (max-width: 420px) {

    .mj-sector-media,
    .mj-sector-card:nth-child(even)
    .mj-sector-media {
        min-height: 225px;
    }

    .mj-sector-tag {
        display: none;
    }

}


/* ACCESSIBILITY */

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

    .mj-sector-card,
    .mj-sector-image,
    .mj-sector-line {
        transition: none;
    }

}

/* =========================================================
   FINAL CTA — CINEMATIC CLOSING EXPERIENCE
   ========================================================= */

.mj-final-cta {
    position: relative;

    padding: 26px;

    background: #f4f6f8;
}


.mj-final-cta-shell {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height: 720px;

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

    border-radius: 30px;

    background: #071d37;

    box-shadow:
        0 30px 90px
        rgba(4, 22, 42, 0.18);
}


/* =========================================================
   IMAGE
   ========================================================= */

.mj-final-cta-media {
    position: absolute;
    inset: 0;

    z-index: -5;

    overflow: hidden;
}


.mj-final-cta-image {
    width: 100%;
    height: 100%;

    display: block;

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

    transform: scale(1.02);

    transition:
        transform 1.4s
        cubic-bezier(0.2, 0.7, 0.2, 1);
}


.mj-final-cta-shell:hover
.mj-final-cta-image {
    transform: scale(1.055);
}


.mj-final-cta-fallback {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 75% 40%,
            rgba(214, 161, 42, 0.15),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #071a32 0%,
            #0b315f 55%,
            #102b49 100%
        );
}


/* =========================================================
   OVERLAYS
   ========================================================= */

.mj-final-cta-overlay {
    position: absolute;
    inset: 0;

    z-index: -4;

    background:
        linear-gradient(
            90deg,
            rgba(3, 16, 31, 0.96) 0%,
            rgba(4, 24, 45, 0.88) 40%,
            rgba(4, 25, 47, 0.50) 72%,
            rgba(4, 22, 42, 0.34) 100%
        );
}


.mj-final-cta-glow {
    position: absolute;

    z-index: -3;

    width: 520px;
    height: 520px;

    top: -220px;
    right: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(214, 161, 42, 0.20),
            rgba(214, 161, 42, 0.04) 42%,
            transparent 70%
        );

    filter: blur(5px);

    pointer-events: none;
}


/* =========================================================
   SUBTLE GRID
   ========================================================= */

.mj-final-cta-grid-lines {
    position: absolute;
    inset: 0;

    z-index: -2;

    opacity: 0.055;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.8) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.8) 1px,
            transparent 1px
        );

    background-size: 76px 76px;

    pointer-events: none;
}


/* =========================================================
   GHOST BRAND
   ========================================================= */

.mj-final-cta-ghost {
    position: absolute;

    left: -12px;
    bottom: -34px;

    z-index: -1;

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

    font-size: clamp(
        110px,
        16vw,
        270px
    );

    font-weight: 800;
    line-height: 0.8;

    letter-spacing: -0.075em;

    white-space: nowrap;

    pointer-events: none;
    user-select: none;
}


/* =========================================================
   CONTENT LAYOUT
   ========================================================= */

.mj-final-cta-container {
    position: relative;

    width: 100%;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 80px;
    align-items: center;

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


.mj-final-cta-content {
    max-width: 850px;
}


/* EYEBROW */

.mj-final-cta-meta {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 24px;
}


.mj-final-cta-line {
    display: block;

    width: 48px;
    height: 2px;

    background: #d6a12a;
}


.mj-final-cta-label {
    color: #d6a12a;

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

    letter-spacing: 0.18em;
}


/* HEADLINE */

.mj-final-cta-content h2 {
    max-width: 820px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(
        3rem,
        6vw,
        6.5rem
    );

    line-height: 0.92;

    letter-spacing: -0.06em;

    text-wrap: balance;
}


/* DESCRIPTION */

.mj-final-cta-content > p {
    max-width: 660px;

    margin:
        30px 0 0;

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

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.mj-final-cta-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 38px;
}


.mj-final-cta-button {
    min-height: 58px;

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

    gap: 22px;

    padding: 0 24px;

    border-radius: 100px;

    text-decoration: none;

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

    letter-spacing: 0.025em;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}


.mj-final-cta-button:hover {
    transform: translateY(-3px);
}


.mj-final-cta-button-primary {
    border: 1px solid #d6a12a;

    background: #d6a12a;
    color: #071d37;
}


.mj-final-cta-button-primary:hover {
    background: #ffffff;
    border-color: #ffffff;

    color: #071d37;
}


.mj-final-cta-button-secondary {
    border:
        1px solid
        rgba(255, 255, 255, 0.30);

    background:
        rgba(255, 255, 255, 0.07);

    color: #ffffff;

    backdrop-filter: blur(12px);
}


.mj-final-cta-button-secondary:hover {
    border-color:
        rgba(255, 255, 255, 0.65);

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


.mj-final-cta-arrow {
    font-size: 16px;

    transition:
        transform 0.3s ease;
}


.mj-final-cta-button:hover
.mj-final-cta-arrow {
    transform: translate(3px, -2px);
}


/* =========================================================
   SIGNATURE
   ========================================================= */

.mj-final-cta-signature {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 16px;
}


.mj-final-cta-signature-number {
    color:
        rgba(255, 255, 255, 0.25);

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

    letter-spacing: 0.14em;
}


.mj-final-cta-signature-rule {
    display: block;

    width: 1px;
    height: 110px;

    background:
        linear-gradient(
            to bottom,
            #d6a12a,
            rgba(214, 161, 42, 0)
        );
}


.mj-final-cta-signature-copy {
    color:
        rgba(255, 255, 255, 0.45);

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

    line-height: 1.8;

    letter-spacing: 0.16em;

    text-align: right;
}


/* =========================================================
   BOTTOM DETAIL
   ========================================================= */

.mj-final-cta-bottom {
    position: absolute;

    left: 50%;
    bottom: 30px;

    transform: translateX(-50%);

    width: 100%;

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

    gap: 20px;

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

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

    letter-spacing: 0.16em;
}


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

@media (max-width: 1000px) {

    .mj-final-cta {
        padding: 20px;
    }

    .mj-final-cta-shell {
        min-height: 660px;
    }

    .mj-final-cta-container {
        grid-template-columns: 1fr;

        gap: 45px;

        padding-top: 85px;
        padding-bottom: 100px;
    }

    .mj-final-cta-signature {
        display: none;
    }

    .mj-final-cta-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(3, 16, 31, 0.95),
                rgba(4, 24, 45, 0.72)
            );
    }

}


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

@media (max-width: 700px) {

    .mj-final-cta {
        padding: 12px;
    }

    .mj-final-cta-shell {
        min-height: 640px;

        border-radius: 22px;
    }

    .mj-final-cta-container {
        display: flex;
        align-items: flex-end;

        min-height: 640px;

        padding-top: 80px;
        padding-bottom: 90px;
    }

    .mj-final-cta-content {
        width: 100%;
    }

    .mj-final-cta-meta {
        margin-bottom: 18px;
    }

    .mj-final-cta-line {
        width: 32px;
    }

    .mj-final-cta-label {
        font-size: 9px;
    }

    .mj-final-cta-content h2 {
        font-size:
            clamp(
                2.65rem,
                12vw,
                4.5rem
            );

        line-height: 0.95;
    }

    .mj-final-cta-content > p {
        margin-top: 22px;

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

    .mj-final-cta-actions {
        flex-direction: column;

        width: 100%;

        margin-top: 30px;
    }

    .mj-final-cta-button {
        width: 100%;

        justify-content: space-between;

        min-height: 56px;

        padding:
            0 20px;
    }

    .mj-final-cta-bottom {
        bottom: 24px;

        font-size: 7px;
    }

    .mj-final-cta-bottom
    span:last-child {
        display: none;
    }

    .mj-final-cta-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(3, 16, 31, 0.34) 0%,
                rgba(3, 16, 31, 0.55) 32%,
                rgba(3, 16, 31, 0.96) 80%,
                rgba(3, 16, 31, 0.99) 100%
            );
    }

    .mj-final-cta-grid-lines {
        background-size:
            52px 52px;
    }

    .mj-final-cta-ghost {
        bottom: 15%;

        font-size: 28vw;
    }

}


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

@media (max-width: 420px) {

    .mj-final-cta-shell,
    .mj-final-cta-container {
        min-height: 610px;
    }

    .mj-final-cta-content h2 {
        font-size: 2.65rem;
    }

}


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

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

    .mj-final-cta-image,
    .mj-final-cta-button,
    .mj-final-cta-arrow {
        transition: none;
    }

}

/* =========================================================
   FINAL CTA — TYPOGRAPHY & SPACING REFINEMENT
   IMAGE / BACKGROUND REMAINS UNCHANGED
   ========================================================= */


/* ---------------------------------------------------------
   GIVE THE ENTIRE CTA BREATHING ROOM
   --------------------------------------------------------- */

.mj-final-cta-container {
    padding-left: clamp(38px, 5vw, 82px);
    padding-right: clamp(38px, 5vw, 82px);

    padding-top: 90px;
    padding-bottom: 105px;
}


/* ---------------------------------------------------------
   MAIN CONTENT WIDTH
   Prevent text from stretching too far across the section
   --------------------------------------------------------- */

.mj-final-cta-content {
    width: 100%;
    max-width: 760px;
}


/* ---------------------------------------------------------
   EYEBROW / SMALL GOLD LABEL
   --------------------------------------------------------- */

.mj-final-cta-meta {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 25px;
}


.mj-final-cta-line {
    width: 38px;
    height: 2px;

    flex: 0 0 auto;

    background: #d6a12a;
}


.mj-final-cta-label {
    color: #d6a12a;

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

    line-height: 1.4;

    letter-spacing: 0.19em;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   MAIN HEADLINE
   Still strong, but no longer oversized like another Hero
   --------------------------------------------------------- */

.mj-final-cta-content h2 {
    max-width: 720px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(
        3.25rem,
        5vw,
        5.25rem
    );

    font-weight: 700;

    line-height: 0.98;

    letter-spacing: -0.055em;

    text-wrap: balance;
}


/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

.mj-final-cta-content > p {
    max-width: 620px;

    margin:
        28px 0 0;

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

    font-size: 15px;

    line-height: 1.75;
}


/* ---------------------------------------------------------
   BUTTON AREA
   --------------------------------------------------------- */

.mj-final-cta-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 34px;
}


.mj-final-cta-button {
    min-height: 52px;

    padding:
        0 22px;

    gap: 20px;

    border-radius: 14px;

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

    letter-spacing: 0.025em;
}


/* ---------------------------------------------------------
   GIANT FLOATING MAC-JIM WORD
   Make it decorative rather than dominant
   --------------------------------------------------------- */

.mj-final-cta-ghost {
    left: clamp(
        30px,
        4vw,
        70px
    );

    bottom: -14px;

    font-size: clamp(
        90px,
        12vw,
        190px
    );

    font-weight: 800;

    line-height: 0.8;

    letter-spacing: -0.065em;

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

    pointer-events: none;
}


/* ---------------------------------------------------------
   RIGHT FLOATING SIGNATURE
   08
   |
   INTEGRITY
   INNOVATION
   IMPACT

   Bring it away from the wall and make it subtle.
   --------------------------------------------------------- */

.mj-final-cta-signature {
    position: absolute;

    top: 50%;
    right: clamp(
        38px,
        4.5vw,
        78px
    );

    transform:
        translateY(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 13px;

    opacity: 0.72;
}


.mj-final-cta-signature-number {
    color: #d6a12a;

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

    letter-spacing: 0.16em;
}


.mj-final-cta-signature-rule {
    width: 1px;
    height: 58px;

    background:
        linear-gradient(
            to bottom,
            #d6a12a,
            rgba(214, 161, 42, 0.12)
        );
}


.mj-final-cta-signature-copy {
    color:
        rgba(255, 255, 255, 0.50);

    font-size: 8px;

    font-weight: 800;

    line-height: 1.7;

    letter-spacing: 0.16em;

    text-align: center;
}


/* ---------------------------------------------------------
   BOTTOM FLOATING WORDS
   Pull them away from the walls
   --------------------------------------------------------- */

.mj-final-cta-bottom {
    left: 50%;
    bottom: 28px;

    transform:
        translateX(-50%);

    width:
        calc(100% - 120px);

    max-width: 1280px;

    padding: 0;

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

    gap: 30px;

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

    font-size: 7px;

    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 0.17em;
}


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

@media (max-width: 1000px) {

    .mj-final-cta-container {
        padding-left: 46px;
        padding-right: 46px;

        padding-top: 80px;
        padding-bottom: 95px;
    }


    .mj-final-cta-content {
        max-width: 680px;
    }


    .mj-final-cta-content h2 {
        max-width: 650px;

        font-size: clamp(
            3rem,
            7vw,
            4.5rem
        );
    }


    .mj-final-cta-content > p {
        max-width: 570px;
    }


    .mj-final-cta-signature {
        right: 35px;
    }


    .mj-final-cta-bottom {
        width:
            calc(100% - 90px);
    }


    .mj-final-cta-ghost {
        left: 42px;
    }

}


/* =========================================================
   MOBILE REFINEMENT
   Keep the existing full background image.
   Only improve typography and spacing.
   ========================================================= */

@media (max-width: 700px) {

    .mj-final-cta-container {
        padding-left: 24px;
        padding-right: 24px;

        padding-top: 85px;
        padding-bottom: 90px;
    }


    .mj-final-cta-content {
        width: 100%;
        max-width: 100%;
    }


    .mj-final-cta-meta {
        margin-bottom: 18px;
    }


    .mj-final-cta-line {
        width: 28px;
    }


    .mj-final-cta-label {
        font-size: 8px;

        letter-spacing: 0.16em;
    }


    .mj-final-cta-content h2 {
        max-width: 100%;

        font-size: clamp(
            2.55rem,
            11vw,
            3.7rem
        );

        line-height: 0.98;

        letter-spacing: -0.05em;
    }


    .mj-final-cta-content > p {
        max-width: 100%;

        margin-top: 21px;

        font-size: 13px;

        line-height: 1.7;
    }


    .mj-final-cta-actions {
        margin-top: 27px;

        gap: 10px;
    }


    .mj-final-cta-button {
        min-height: 50px;

        padding:
            0 18px;
    }


    /*
     * Right-side decorative words are unnecessary
     * on a narrow screen.
     */

    .mj-final-cta-signature {
        display: none;
    }


    /*
     * Keep MAC-JIM visible but quiet.
     */

    .mj-final-cta-ghost {
        left: 22px;
        bottom: 48px;

        font-size: 25vw;

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


    .mj-final-cta-bottom {
        left: 24px;
        right: 24px;
        bottom: 22px;

        transform: none;

        width: auto;

        font-size: 6px;
    }


    .mj-final-cta-bottom
    span:last-child {
        display: none;
    }

}


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

@media (max-width: 430px) {

    .mj-final-cta-container {
        padding-left: 20px;
        padding-right: 20px;

        padding-top: 75px;
        padding-bottom: 82px;
    }


    .mj-final-cta-content h2 {
        font-size: 2.55rem;
    }


    .mj-final-cta-actions {
        flex-direction: column;

        align-items: stretch;
    }


    .mj-final-cta-button {
        width: 100%;

        justify-content: space-between;
    }


    .mj-final-cta-bottom {
        left: 20px;
        right: 20px;
    }

}


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

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

    .mj-final-cta-button,
    .mj-final-cta-arrow {
        transition: none;
    }

}

/* =========================================================
   MAC-JIM CORPORATE SOCIAL TOPBAR
   ========================================================= */

.header-topbar {
    position: relative;

    z-index: 10;

    background:
        var(
            --site-primary-color,
            #0B315F
        );

    border-bottom:
        1px solid rgba(255,255,255,.10);

    color: #fff;
}


.header-topbar__inner {
    min-height: 38px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


/* =========================================================
   CONTACT SIDE
   ========================================================= */

.header-topbar__contact {
    display: flex;

    align-items: center;

    gap: 15px;

    min-width: 0;
}


.header-topbar__contact-link {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-width: 0;

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

    text-decoration: none;

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

    line-height: 1;

    transition:
        color .2s ease;
}


.header-topbar__contact-link:hover {
    color: #fff;
}


.header-topbar__contact-label {
    color:
        var(
            --site-secondary-color,
            #D6A12A
        );

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

    letter-spacing: .15em;

    text-transform: uppercase;
}


.header-topbar__divider {
    width: 1px;
    height: 12px;

    background:
        rgba(255,255,255,.18);
}


/* =========================================================
   SOCIAL SIDE
   ========================================================= */

.header-topbar__social {
    display: flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;
}


.header-topbar__follow {
    margin-right: 7px;

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

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

    letter-spacing: .15em;

    text-transform: uppercase;
}
.header-topbar__social a {
    width: 28px;
    height: 28px;

    display: inline-flex;

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

    border:
        1px solid rgba(255,255,255,.35);

    background:
        rgba(255,255,255,.05);

    color: #ffffff;

    text-decoration: none;

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.header-topbar__social a:hover {
    border-color:
        var(
            --site-secondary-color,
            #D6A12A
        );

    background:
        rgba(214,161,42,.08);

    color:
        var(
            --site-secondary-color,
            #D6A12A
        );

    transform:
        translateY(-1px);
}


.header-topbar__social svg {
    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.header-topbar__social a:first-of-type svg {
    fill: currentColor;

    stroke: none;
}


.header-topbar__social .social-svg-fill {
    fill: currentColor;

    stroke: none;
}


.header-social-x {
    font-size: 11px;
    font-weight: 800;
}


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

@media (max-width: 950px) {

    .header-topbar__inner {
        min-height: 36px;
    }


    .header-topbar__contact {
        gap: 10px;
    }


    .header-topbar__contact-label {
        display: none;
    }


    .header-topbar__contact-link {
        font-size: 8px;
    }


    .header-topbar__follow {
        display: none;
    }

}


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

@media (max-width: 700px) {

    .header-topbar__inner {
        min-height: 35px;

        justify-content: flex-end;
    }


    .header-topbar__contact {
        display: none;
    }


    .header-topbar__social {
        width: 100%;

        justify-content: flex-end;

        gap: 7px;
    }


    .header-topbar__social a {
        width: 25px;
        height: 25px;
    }

}


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

@media (max-width: 420px) {

    .header-topbar__inner {
        min-height: 33px;
    }


    .header-topbar__social a {
        width: 24px;
        height: 24px;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

    .header-topbar__social a {
        transition: none;

        transform: none;
    }

}


/* =========================================================
   MAC-JIM FOOTER — COMPACT CORPORATE REFINEMENT
   ========================================================= */

.site-footer {
    margin-top: 0;
    background: #082b52;
}


/* Remove the oversized opening area */

.footer-intro {
    display: block;
}


/* Main information area */

.footer-main {
    display: grid;

    grid-template-columns:
        minmax(260px, 1.5fr)
        .7fr
        .9fr
        minmax(210px, 1fr);

    gap: 55px;

    align-items: start;

    padding-top: 58px;
    padding-bottom: 48px;

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


.footer-main__identity {
    max-width: 360px;
}


.footer-section-label {
    margin-bottom: 16px;

    color:
        var(--site-secondary-color, #D6A12A);

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

    letter-spacing: .17em;
}


.footer-summary {
    max-width: 330px;

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

    font-size: 13px;

    line-height: 1.8;
}


.footer-address {
    margin-top: 20px;

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

    font-size: 10px;

    line-height: 1.7;
}


/* Columns */

.footer-column h3 {
    position: relative;

    margin: 0 0 23px;

    padding-bottom: 12px;

    color: #fff;

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

    letter-spacing: .13em;
}


.footer-column h3::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 28px;
    height: 2px;

    background:
        var(--site-secondary-color, #D6A12A);
}


.footer-column > a {
    margin-bottom: 12px;

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

    font-size: 11px;

    line-height: 1.4;
}


.footer-column > a:hover {
    color: #fff;
}


/* Contact */

.footer-contact__item {
    margin-bottom: 17px;
}


.footer-contact__item > span {
    margin-bottom: 5px;

    color:
        var(--site-secondary-color, #D6A12A);

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

    letter-spacing: .12em;
}


.footer-contact__item a {
    color: rgba(255,255,255,.76);

    font-size: 11px;
}


/* =========================================================
   SOCIALS — NO MORE HUGE SEPARATE AREA
   ========================================================= */

.footer-rail {
    min-height: auto;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding-top: 22px;
    padding-bottom: 22px;

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


.footer-rail__label {
    flex-shrink: 0;

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

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

    letter-spacing: .17em;
}


.footer-social-links {
    width: auto;

    display: flex;

    flex-direction: row;

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

    gap: 9px;

    margin: 0;
}


.footer-social-links a {
    min-height: 32px;

    display: inline-flex;

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

    gap: 7px;

    padding: 0 12px;

    border:
        1px solid rgba(255,255,255,.13);

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

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

    line-height: 1;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease;
}


.footer-social-links a span {
    color:
        var(--site-secondary-color, #D6A12A);
}


.footer-social-links a:hover {
    border-color:
        rgba(214,161,42,.65);

    background:
        rgba(214,161,42,.07);

    color: #fff;
}


/* =========================================================
   COPYRIGHT
   ========================================================= */

.footer-bottom {
    min-height: 62px;

    display: grid;

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

    align-items: center;

    gap: 25px;
}


.footer-bottom p {
    margin: 0;

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

    font-size: 8px;
}


.footer-bottom-links {
    display: flex;

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

    gap: 17px;
}


.footer-bottom-links span {
    color: rgba(255,255,255,.38);

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

    letter-spacing: .15em;
}


.footer-credit {
    color: rgba(255,255,255,.40);

    font-size: 8px;

    text-align: right;
}


.footer-credit strong {
    color: rgba(255,255,255,.72);
}


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

@media (max-width: 950px) {

    .footer-main {
        grid-template-columns:
            1.3fr
            .7fr
            .9fr;

        gap: 40px;
    }


    .footer-contact {
        grid-column: 1 / -1;

        display: grid;

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

        gap: 25px;

        padding-top: 10px;
    }


    .footer-contact h3 {
        grid-column: 1 / -1;
    }

}


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

@media (max-width: 700px) {

    .footer-main {
        grid-template-columns:
            1fr
            1fr;

        gap:
            38px
            28px;

        padding-top: 46px;
        padding-bottom: 38px;
    }


    .footer-main__identity {
        grid-column: 1 / -1;
    }


    .footer-contact {
        grid-column: 1 / -1;

        display: block;
    }


    .footer-rail {
        flex-direction: column;

        align-items: flex-start;

        gap: 16px;

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


    .footer-social-links {
        width: 100%;

        justify-content: flex-start;

        flex-wrap: wrap;
    }


    .footer-bottom {
        grid-template-columns: 1fr;

        gap: 10px;

        padding-top: 20px;
        padding-bottom: 22px;
    }


    .footer-bottom-links {
        justify-content: flex-start;
    }


    .footer-credit {
        text-align: left;
    }

}


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

@media (max-width: 460px) {

    .footer-main {
        grid-template-columns: 1fr;

        gap: 34px;
    }


    .footer-main__identity,
    .footer-contact {
        grid-column: auto;
    }


    .footer-social-links a {
        padding:
            0
            10px;

        font-size: 8px;
    }

}


/* =========================================================
   MOBILE TOP BAR — SINGLE HORIZONTAL ROW
   Contact left | Socials right
   ========================================================= */

@media (max-width: 700px) {

    .header-topbar {
        display: block !important;
        min-height: 38px !important;
    }

    .header-topbar__inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;

        gap: 8px !important;

        min-height: 38px !important;

        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }


    /* =========================
       CONTACT — LEFT
       ========================= */

    .header-topbar__contact {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        align-items: center !important;

        gap: 7px !important;

        width: auto !important;
        min-width: 0 !important;

        padding: 0 !important;

        border: 0 !important;

        white-space: nowrap !important;
        overflow: visible !important;
    }

    .header-topbar__contact-link {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        align-items: center !important;

        gap: 3px !important;

        color: #ffffff !important;

        font-size: 7px !important;
        line-height: 1 !important;

        text-decoration: none !important;

        white-space: nowrap !important;
    }

    .header-topbar__contact-label {
        display: inline !important;

        color: var(
            --site-secondary-color,
            #D6A12A
        ) !important;

        font-size: 6px !important;
        font-weight: 800 !important;

        letter-spacing: .04em !important;

        text-transform: uppercase !important;
    }

    .header-topbar__divider {
        display: block !important;

        width: 1px !important;
        height: 10px !important;

        flex: 0 0 1px !important;

        background:
            rgba(255,255,255,.20) !important;
    }


    /* =========================
       SOCIALS — RIGHT
       ========================= */

    .header-topbar__social {
        display: flex !important;

        align-items: center !important;
        justify-content: flex-end !important;

        gap: 3px !important;

        width: auto !important;

        padding: 0 !important;

        flex-shrink: 0 !important;
    }

    /* No Follow Mac-Jim text on small screens */
    .header-topbar__follow {
        display: none !important;
    }

    .header-topbar__social a {
        width: 23px !important;
        height: 23px !important;

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

        flex: 0 0 23px !important;

        padding: 0 !important;
    }

    .header-topbar__social a svg {
        width: 11px !important;
        height: 11px !important;
    }

    .header-topbar__social .header-social-x {
        font-size: 8px !important;
    }
}


/* ==========================================
   MAC-JIM PREMIUM ABOUT SECTION
========================================== */

.mj-about-premium {
    position: relative;
    padding: 110px 0;
    background: #f7f9fc;
    overflow: hidden;
}

.mj-about-premium::before {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(220, 164, 48, 0.09),
        transparent 70%
    );
    top: -240px;
    left: -180px;
    pointer-events: none;
}

.mj-about-premium__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 85px;
    align-items: center;
}

/* LEFT CONTENT */

.mj-about-premium__intro {
    position: relative;
    z-index: 1;
}

.mj-about-premium__eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 28px;
    color: #ad7b19;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.mj-about-premium__eyebrow-line {
    display: block;
    width: 32px;
    height: 2px;
    background: #d9a32d;
}

.mj-about-premium__title {
    max-width: 680px;
    margin: 0;
    color: #102a4c;
    font-size: clamp(36px, 3.5vw, 54px);
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -1.8px;
    overflow-wrap: break-word;
}

.mj-about-premium__accent {
    width: 64px;
    height: 4px;
    margin: 32px 0;
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        #d59a22,
        #f0c76c
    );
}

.mj-about-premium__statement {
    max-width: 570px;
    margin: 0;
    color: #52647b;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.9;
}

/* PREMIUM LINK */

.mj-about-premium__link {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    margin-top: 38px;
    color: #102a4c;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.2px;
    transition: color 0.25s ease;
}

.mj-about-premium__link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid #d6dfe9;
    border-radius: 50%;
    font-size: 20px;
    transition: all 0.3s ease;
}

.mj-about-premium__link:hover {
    color: #b9851e;
}

.mj-about-premium__link:hover
.mj-about-premium__link-icon {
    background: #d9a32d;
    border-color: #d9a32d;
    color: #102a4c;
    transform: translate(3px, -3px);
}

/* RIGHT FEATURE PANEL */

.mj-about-premium__feature {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 440px;
    padding: 38px 42px;
    border-radius: 8px;
    background: linear-gradient(
        145deg,
        #173b63 0%,
        #102b4d 48%,
        #091b33 100%
    );
    box-shadow:
        0 28px 65px rgba(10, 34, 65, 0.14);
    overflow: hidden;
    isolation: isolate;
}

.mj-about-premium__feature::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 50%;
    right: -125px;
    top: 75px;
    pointer-events: none;
    z-index: -1;
}

.mj-about-premium__feature::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 50%;
    right: -90px;
    top: 110px;
    pointer-events: none;
    z-index: -1;
}

.mj-about-premium__feature-top,
.mj-about-premium__feature-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.mj-about-premium__feature-index {
    color: #e2b75a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.mj-about-premium__feature-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    color: #e2b75a;
    font-size: 13px;
    font-weight: 800;
}

.mj-about-premium__feature-body {
    position: relative;
    z-index: 1;
    margin: 60px 0;
}

.mj-about-premium__feature-label {
    display: block;
    margin-bottom: 19px;
    color: #e2b75a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.mj-about-premium__feature-body h3 {
    max-width: 390px;
    margin: 0 0 22px;
    color: #ffffff;
    font-size: clamp(27px, 2.4vw, 35px);
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.8px;
}

.mj-about-premium__feature-body p {
    max-width: 410px;
    margin: 0;
    color: #c4d2e1;
    font-size: 14px;
    line-height: 1.9;
}

.mj-about-premium__feature-bottom {
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,0.13);
    color: #a9bdd2;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.mj-about-premium__feature-bottom span:last-child {
    color: #e2b75a;
    font-size: 20px;
}

/* RESPONSIVE */

@media (max-width: 1024px) {
    .mj-about-premium__grid {
        gap: 45px;
    }

    .mj-about-premium__feature {
        padding: 32px;
    }
}

@media (max-width: 768px) {
    .mj-about-premium {
        padding: 75px 0;
    }

    .mj-about-premium__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .mj-about-premium__title {
        font-size: clamp(32px, 7vw, 44px);
        letter-spacing: -1px;
    }

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

    .mj-about-premium__feature {
        min-height: 390px;
    }
}

@media (max-width: 480px) {
    .mj-about-premium {
        padding: 60px 0;
    }

    .mj-about-premium__feature {
        padding: 27px 24px;
        min-height: 370px;
    }

    .mj-about-premium__feature-body {
        margin: 48px 0;
    }

    .mj-about-premium__feature-body h3 {
        font-size: 27px;
    }

    .mj-about-premium__feature-bottom {
        font-size: 8px;
        letter-spacing: 0.8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mj-about-premium__link,
    .mj-about-premium__link-icon {
        transition: none;
    }
}

/* =========================================
   MAC-JIM COMPANIES INTRO CARD
========================================= */

.mj-companies-heading .mj-companies-intro-card {
    position: relative;
    padding: 27px 30px;
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #edf3fa 100%
    );
    border: 1px solid #dce5ef;
    border-left: 4px solid #d9a32d;
    border-radius: 5px 18px 18px 5px;
    box-shadow: 0 16px 40px rgba(16, 42, 76, 0.06);
    overflow: hidden;
    isolation: isolate;
}

/* Decorative circles */

.mj-companies-intro-card::before,
.mj-companies-intro-card::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(16, 42, 76, 0.06);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

.mj-companies-intro-card::before {
    width: 180px;
    height: 180px;
    right: -85px;
    top: -90px;
}

.mj-companies-intro-card::after {
    width: 120px;
    height: 120px;
    right: -55px;
    top: -60px;
}

/* Top label */

.mj-companies-intro-card__top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
    color: #a77516;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.mj-companies-intro-card__line {
    width: 23px;
    height: 2px;
    background: #d9a32d;
}

/* Main paragraph */

.mj-companies-heading
.mj-companies-intro-card p {
    position: relative;
    z-index: 1;
    max-width: none;
    margin: 0;
    color: #354e6b;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.85;
    letter-spacing: 0.1px;
}

/* Bottom signature */

.mj-companies-intro-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
    padding-top: 15px;
    border-top: 1px solid #dce5ef;
    color: #173b63;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.mj-companies-intro-card__bottom span:last-child {
    color: #c58d1c;
    font-size: 19px;
}

/* Mobile */

@media (max-width: 768px) {

    .mj-companies-heading
    .mj-companies-intro-card {
        padding: 24px;
        width: 100%;
        min-width: 0;
    }

    .mj-companies-heading
    .mj-companies-intro-card p {
        font-size: 14px;
        line-height: 1.8;
    }

    .mj-companies-intro-card__bottom {
        font-size: 8px;
        letter-spacing: 0.6px;
    }

}


/* COMPACT COMPANIES INTRO — SPACING FIX */

.mj-companies-section {
    padding-top: 55px;
}

.mj-companies-heading {
    align-items: center;
    margin-bottom: 35px;
    gap: 30px;
}

.mj-companies-heading .mj-companies-intro-card {
    padding: 18px 22px;
    margin: 0;
    align-self: center;
    box-shadow: 0 8px 25px rgba(16, 42, 76, 0.04);
}

.mj-companies-intro-card__top {
    margin-bottom: 10px;
}

.mj-companies-heading .mj-companies-intro-card p {
    font-size: 14px;
    line-height: 1.65;
}

.mj-companies-intro-card__bottom {
    margin-top: 12px;
    padding-top: 10px;
}

/* Mobile adjustments */

@media (max-width: 768px) {
    .mj-companies-section {
        padding-top: 40px;
    }

    .mj-companies-heading {
        gap: 22px;
        margin-bottom: 28px;
    }

    .mj-companies-heading .mj-companies-intro-card {
        padding: 18px 20px;
    }
}