:root {
    --mgmt-primary: #002f60;
    --mgmt-primary-dark: #001d3d;
    --mgmt-primary-hover: #003e7e;
    --mgmt-nav-bg: rgba(5, 18, 30, .72);
    --mgmt-nav-border: rgba(255, 255, 255, .10);
    --mgmt-accent: #c8a66a;
    --mgmt-accent-hover: #ddbd7e;

    --mgmt-blue: #7cb7f1;

    --mgmt-bg-soft: #f5f8fc;
    --mgmt-border: #d9e3f0;

    --mgmt-text: #0f1e2e;
    --mgmt-muted: #5d6b7a;

    --mgmt-white: #ffffff;

    --mgmt-success: #65b960;
    --mgmt-emergency: #4c9a54;

    --site-container: 1520px;
}


/* ===============================
   BASE
================================ */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

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

    color: var(--mgmt-text);

    background: #ffffff;

    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

picture {
    display: block;
}

.site-container {
    max-width: var(--site-container);

    margin-left: auto;
    margin-right: auto;

    padding-left: 42px;
    padding-right: 42px;
}

.section-padding {
    padding-top: 100px;
    padding-bottom: 100px;
}


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

.site-header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background:
        linear-gradient(180deg,
            rgba(5, 18, 30, .86),
            var(--mgmt-nav-bg));

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

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

.site-header .navbar {
    min-height: 86px;

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

.management-brand,
.footer-brand {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    color: white;
}

.management-brand {
    padding: 0;
}

.brand-mark {
    font-size: 31px;
    font-weight: 300;

    line-height: 1;
}

.brand-logo {
    width: 58px;
    height: 58px;

    object-fit: contain;
}

.brand-copy {
    display: flex;

    flex-direction: column;
}

.brand-name {
    color: var(--mgmt-white);

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

    line-height: 1.05;

    text-transform: uppercase;
}

.brand-subtitle {
    margin-top: 5px;

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

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

    letter-spacing: 2.6px;

    text-transform: uppercase;
}

.site-header .nav-link {
    position: relative;

    margin: 0 9px;

    padding: 10px 2px !important;

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

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

    text-transform: uppercase;

    transition: .2s ease;
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
    color: white;
}

.site-header .nav-link::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: 2px;
    left: 0;

    height: 2px;

    background: var(--mgmt-accent);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform .2s ease;
}

.site-header .nav-link:hover::after,
.site-header .nav-link.active::after {
    transform: scaleX(1);
}

.management-enquiry-btn {
    padding: 12px 22px;

    border: 1px solid rgba(200, 166, 106, .72);
    border-radius: 3px;

    background: var(--mgmt-accent);

    color: #07121e;

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

    text-transform: uppercase;

    letter-spacing: .5px;
}

.management-enquiry-btn:hover {
    border-color: var(--mgmt-accent-hover);

    background: var(--mgmt-accent-hover);

    color: #07121e;
}


/* ===============================
   HERO
================================ */

.hero-section {
    position: relative;

    min-height: 760px;

    display: flex;

    align-items: center;

    background:
        image-set(
            url("../images/hero-ship.webp") type("image/webp"),
            url("../images/hero-ship.png") type("image/png")
        ) center center / cover no-repeat;
}

.hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 22, 45, .93) 0%,
            rgba(0, 32, 66, .72) 39%,
            rgba(0, 31, 63, .18) 71%,
            rgba(0, 18, 38, .12) 100%);
}

.hero-container {
    position: relative;

    z-index: 2;

    width: 100%;

    padding-top: 140px;
}

.hero-small-line {
    width: 50px;
    height: 2px;

    margin-bottom: 24px;

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

.hero-title {
    margin: 0;

    color: white;

    font-size: clamp(44px, 4.6vw, 76px);
    font-weight: 400;

    letter-spacing: -2px;

    line-height: .98;
}

.hero-title span {
    color: var(--mgmt-blue);
}

.hero-description {
    max-width: 540px;

    margin-top: 28px;

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

    font-size: 19px;

    line-height: 1.55;
}

.hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 32px;
}

.btn-primary-lsr,
.btn-outline-light-lsr {
    padding: 15px 23px;

    border-radius: 0;

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

    text-transform: uppercase;

    letter-spacing: .35px;
}

.btn-primary-lsr {
    background: var(--mgmt-primary);

    color: white;

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

.btn-primary-lsr:hover {
    background: var(--mgmt-primary-hover);

    color: white;
}

.btn-outline-light-lsr {
    border: 1px solid rgba(255, 255, 255, .75);

    color: white;
}

.btn-outline-light-lsr:hover {
    background: white;

    color: var(--mgmt-primary);
}

.hero-stats {
    display: grid;

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

    max-width: 900px;

    gap: 34px;

    margin-top: 74px;
}

.hero-stat {
    display: flex;

    align-items: center;

    gap: 15px;

    color: white;
}

.hero-stat>i {
    width: 35px;

    font-size: 27px;

    color: rgba(255, 255, 255, .9);
}

.hero-stat div {
    display: flex;

    flex-direction: column;
}

.hero-stat strong {
    font-size: 24px;
    font-weight: 500;

    line-height: 1;
}

.hero-stat span {
    margin-top: 6px;

    font-size: 10px;

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

    text-transform: uppercase;
}


/* ===============================
   COMMON HEADINGS
================================ */

.section-heading {
    margin-bottom: 64px;
}

.section-eyebrow {
    display: block;

    margin-bottom: 9px;

    color: var(--mgmt-primary);

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

    text-transform: uppercase;

    letter-spacing: .7px;
}

.section-eyebrow-light {
    color: rgba(255, 255, 255, .65);
}

.section-heading h2,
.vessel-dashboard-section h2,
.shore-team-content h2,
.emergency-section h2 {
    margin: 0;

    color: var(--mgmt-primary);

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

    line-height: 1.13;
}

.heading-line {
    width: 40px;
    height: 2px;

    margin-top: 17px;

    background: var(--mgmt-primary);
}

.heading-line-light {
    background: white;
}


/* ===============================
   APPROACH
================================ */

.management-approach {
    background: white;
}

.management-flow {
    display: grid;

    grid-template-columns:
        1fr 48px 1fr 48px 1fr 48px 1fr;

    align-items: start;

    gap: 18px;
}

.management-step {
    text-align: center;
}

.step-icon {
    margin-bottom: 16px;

    color: var(--mgmt-primary);

    font-size: 38px;
}

.step-number {
    display: block;

    color: var(--mgmt-primary);

    font-size: 13px;
    font-weight: 700;
}

.management-step h3 {
    margin: 6px 0 14px;

    color: var(--mgmt-primary);

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

    text-transform: uppercase;
}

.management-step p {
    max-width: 260px;

    margin: auto;

    color: var(--mgmt-muted);

    font-size: 14px;

    line-height: 1.65;
}

.flow-arrow {
    padding-top: 38px;

    color: var(--mgmt-primary);

    text-align: center;
}


/* ===============================
   DASHBOARD
================================ */

.vessel-dashboard-section {
    padding: 90px 0;

    background:
        linear-gradient(120deg,
            #001b38,
            #002c59);
}

.dashboard-intro {
    max-width: 430px;

    margin: 25px 0 30px;

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

    font-size: 15px;

    line-height: 1.7;
}

.vessel-dashboard {
    padding: 26px;

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

    background: rgba(0, 18, 41, .55);

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

.dashboard-header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 18px;

    color: white;
}

.status-operational {
    padding: 6px 12px;

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

    border-radius: 999px;

    color: #83d77c;

    font-size: 10px;

    text-transform: uppercase;
}

.dashboard-grid {
    display: grid;

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

    gap: 12px;
}

.dashboard-card {
    position: relative;

    min-height: 115px;

    padding: 17px;

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

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

    color: white;
}

.dashboard-card span {
    display: block;

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

    font-size: 10px;

    text-transform: uppercase;
}

.dashboard-card strong {
    display: block;

    margin-top: 10px;

    font-size: 22px;
    font-weight: 500;
}

.dashboard-card small {
    display: block;

    margin-top: 4px;

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

    font-size: 9px;
}

.dashboard-card>i {
    position: absolute;

    right: 15px;
    bottom: 15px;

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

    font-size: 27px;
}

.status-good {
    color: #76d56f !important;
}

.dashboard-card .progress {
    height: 3px;

    margin-top: 12px;

    border-radius: 0;

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

.dashboard-card .progress-bar {
    background: #73cc69;
}

.dashboard-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 19px;

    color: white;

    font-size: 11px;

    text-transform: uppercase;
}


/* ===============================
   SHORE TEAM
================================ */

.shore-team-section {
    background: #f8fafc;
}

.shore-team-content {
    max-width: 600px;

    margin-left: auto;

    padding: 90px 70px;
}

.shore-team-content p {
    max-width: 480px;

    margin-top: 25px;

    color: var(--mgmt-muted);

    font-size: 15px;

    line-height: 1.7;
}

.team-role-grid {
    display: grid;

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

    gap: 24px 30px;

    margin-top: 38px;
}

.team-role-grid div {
    display: flex;

    align-items: center;

    gap: 13px;

    color: var(--mgmt-primary);

    font-size: 13px;
    font-weight: 600;
}

.team-role-grid i {
    width: 24px;

    font-size: 20px;

    text-align: center;
}

.shore-team-image {
    position: relative;

    height: 100%;
    min-height: 570px;
}

.shore-team-image picture,
.shore-team-image img {
    width: 100%;
    height: 100%;
}

.shore-team-image picture {
    display: block;
}

.shore-team-image img {
    object-fit: cover;
}

.shore-team-caption {
    position: absolute;

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

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding: 17px;

    background: rgba(0, 47, 96, .96);

    color: white;

    font-size: 14px;
    font-weight: 600;
}


/* ===============================
   SERVICES
================================ */

.services-section {
    background: white;
}

.service-card {
    display: block;

    height: 100%;

    color: var(--mgmt-text);

    background: white;

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

.service-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 40px rgba(15, 30, 46, .09);
}

.service-image {
    height: 200px;

    overflow: hidden;
}

.service-image picture,
.service-image img {
    width: 100%;
    height: 100%;
}

.service-image picture {
    display: block;
}

.service-image img {
    object-fit: cover;

    transition: transform .4s ease;
}

.service-card:hover .service-image img {
    transform: scale(1.04);
}

.service-content {
    padding: 23px 10px;
}

.service-content>i {
    margin-bottom: 13px;

    color: var(--mgmt-primary);

    font-size: 23px;
}

.service-content h3 {
    color: var(--mgmt-primary);

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

    text-transform: uppercase;
}

.service-content p {
    margin-bottom: 0;

    color: var(--mgmt-muted);

    font-size: 13px;
}

.service-secondary-grid {
    display: grid;

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

    gap: 1px;

    margin-top: 20px;

    background: var(--mgmt-border);
}

.service-secondary-grid a {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 24px;

    background: white;

    color: var(--mgmt-primary);

    font-size: 13px;
    font-weight: 600;
}

.service-secondary-grid i {
    font-size: 20px;
}


/* ===============================
   EMERGENCY
================================ */

.emergency-section {
    position: relative;

    padding: 72px 0;

    background:
        image-set(
            url("../images/emergency-ship.webp") type("image/webp"),
            url("../images/emergency-ship.png") type("image/png")
        ) center center / cover no-repeat;

    color: white;
}

.emergency-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 25, 53, .97),
            rgba(0, 38, 77, .85),
            rgba(0, 26, 55, .75));
}

.emergency-content {
    position: relative;

    z-index: 2;
}

.emergency-section h2 {
    color: white;
}

.emergency-section p {
    max-width: 480px;

    margin-top: 20px;

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

    line-height: 1.7;
}

.emergency-items {
    display: grid;

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

    gap: 12px;
}

.emergency-items div {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

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

    font-size: 11px;

    text-align: center;
}

.emergency-items i {
    font-size: 24px;
}

.emergency-btn {
    display: block;

    max-width: 390px;

    margin: 30px auto 0;

    padding: 15px;

    border-radius: 0;

    background: #276e35;

    color: white;

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

    text-transform: uppercase;
}

.emergency-btn:hover {
    background: #1f5e2d;

    color: white;
}


/* ===============================
   FINAL CTA
================================ */

.final-cta {
    padding: 27px 0;

    background: #f4f6f8;
}

.final-cta-copy {
    display: flex;

    align-items: center;

    gap: 18px;
}

.final-cta-copy i {
    color: var(--mgmt-primary);

    font-size: 34px;
}

.final-cta-copy p {
    margin: 0;

    color: var(--mgmt-primary);

    font-size: 15px;
}


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

.site-footer {
    background: #001f41;

    color: white;
}

.footer-main {
    padding: 62px 0 48px;
}

.footer-brand {
    margin-bottom: 22px;
}

.footer-description {
    max-width: 270px;

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

    font-size: 12px;

    line-height: 1.7;
}

.site-footer h2 {
    margin-bottom: 18px;

    color: white;

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

    text-transform: uppercase;

    letter-spacing: .7px;
}

.footer-links,
.footer-contact {
    margin: 0;
    padding: 0;

    list-style: none;
}

.footer-links li {
    margin: 8px 0;
}

.footer-links a,
.footer-text,
.footer-contact li {
    color: rgba(255, 255, 255, .74);

    font-size: 12px;
}

.footer-links a:hover {
    color: white;
}

.footer-contact li {
    display: flex;

    gap: 9px;

    margin: 9px 0;
}

.footer-contact a {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: rgba(255,255,255,.74);
}

.footer-contact a:hover {
    color: white;
}

.footer-contact i {
    width: 15px;

    color: rgba(255, 255, 255, .7);
}

.footer-social {
    display: flex;

    gap: 9px;

    margin-top: 18px;
}

.footer-social a {
    display: flex;

    width: 30px;
    height: 30px;

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

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

    border-radius: 50%;

    color: white;
}

.footer-bottom {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 20px 0;

    border-top:
        1px solid rgba(255, 255, 255, .09);

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

    font-size: 10px;
}

.footer-legal {
    display: flex;

    gap: 25px;
}

.footer-legal a {
    color: rgba(255, 255, 255, .68);
}


/* ===============================
   RESPONSIVE
================================ */

@media (max-width: 1199px) {

    .site-header {
        background:
            rgba(5, 18, 30, .97);
    }

    .site-header .navbar-collapse {
        padding-top: 16px;
        padding-bottom: 8px;

        background:
            rgba(5, 18, 30, .97);
    }

    .site-header .nav-link {
        margin: 0;

        padding: 11px 0 !important;
    }

    .management-flow {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 50px;
    }

    .flow-arrow {
        display: none;
    }

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

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

    .emergency-items {
        grid-template-columns:
            repeat(3, 1fr);

        row-gap: 25px;
    }

}


@media (max-width: 767px) {

    .site-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .site-header .navbar {
        min-height: 76px;
    }

    .brand-logo {
        width: 46px;
        height: 46px;
    }

    .management-brand {
        gap: 11px;
    }

    .brand-name {
        font-size: 12px;
    }

    .brand-subtitle {
        font-size: 7px;
        letter-spacing: 1.8px;
    }

    .section-padding {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .hero-section {
        min-height: 800px;
    }

    .hero-title {
        font-size: 43px;
    }

    .hero-description {
        font-size: 16px;
    }

    .hero-actions {
        flex-direction: column;

        align-items: flex-start;
    }

    .hero-stats {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 28px 15px;
    }

    .management-flow {
        grid-template-columns: 1fr;

        gap: 45px;
    }

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

    .shore-team-content {
        padding: 60px 25px;
    }

    .shore-team-image {
        min-height: 420px;
    }

    .team-role-grid {
        grid-template-columns: 1fr;
    }

    .service-secondary-grid {
        grid-template-columns: 1fr;
    }

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

    .final-cta-copy {
        margin-bottom: 25px;
    }

    .footer-bottom {
        flex-direction: column;
    }

}

/* ============================================================
   ABOUT PAGE
============================================================ */


/* ============================================================
   ABOUT HERO
============================================================ */

.about-hero {
    position: relative;

    min-height: 590px;

    display: flex;
    align-items: center;

    padding-top: 86px;

    background:
        image-set(
            url("../images/about-hero.webp") type("image/webp"),
            url("../images/about-hero.png") type("image/png")
        ) center center / cover no-repeat;
}

.about-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(2, 27, 55, .96) 0%,
            rgba(3, 36, 70, .82) 38%,
            rgba(3, 30, 57, .30) 67%,
            rgba(3, 23, 43, .08) 100%);
}

.about-hero-container {
    position: relative;

    z-index: 2;

    width: 100%;
}

.about-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: var(--mgmt-primary);

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

    letter-spacing: .6px;

    text-transform: uppercase;
}

.about-eyebrow-light {
    color: rgba(255, 255, 255, .78);
}

.about-eyebrow-blue {
    color: var(--mgmt-blue);
}

.about-title-line {
    width: 44px;
    height: 2px;

    margin-bottom: 20px;

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

.about-hero-title {
    margin: 0;

    color: var(--mgmt-white);

    font-size: clamp(44px, 4.2vw, 68px);
    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -1.7px;
}

.about-hero-title span {
    color: var(--mgmt-blue);
}

.about-hero-text {
    max-width: 590px;

    margin: 28px 0 0;

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

    font-size: 17px;

    line-height: 1.75;
}


/* ============================================================
   WHO WE ARE
============================================================ */

.about-intro {
    padding: 70px 0 0;

    background: var(--mgmt-white);
}

.about-intro-grid {
    border-bottom: 1px solid var(--mgmt-border);
}

.about-intro-copy {
    height: 100%;

    padding: 28px 60px 70px 0;
}

.about-intro-copy h2,
.ship-shore-panel h2,
.compliance-copy h2,
.owner-content h2 {
    margin: 0;

    color: var(--mgmt-primary);

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

    line-height: 1.18;
}

.about-intro-copy p {
    max-width: 580px;

    margin: 22px 0 0;

    color: var(--mgmt-muted);

    font-size: 14px;

    line-height: 1.75;
}

.about-vessel-image {
    height: 100%;
    min-height: 480px;
}

.about-vessel-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.about-strength-grid {
    display: grid;

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

    height: 100%;

    background:
        linear-gradient(145deg,
            #002b57,
            #001d3d);
}

.about-strength {
    display: flex;

    min-height: 235px;

    flex-direction: column;

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

    gap: 18px;

    padding: 30px 20px;

    border-right: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);

    color: white;

    text-align: center;
}

.about-strength:nth-child(2n) {
    border-right: 0;
}

.about-strength:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.about-strength i {
    font-size: 31px;

    color: rgba(255, 255, 255, .90);
}

.about-strength span {
    font-size: 13px;

    line-height: 1.6;
}

.about-strength strong {
    display: block;

    font-weight: 600;
}


/* ============================================================
   PHILOSOPHY
============================================================ */

.about-philosophy {
    padding: 40px 0 85px;

    background: #fff;
}

.about-section-divider {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 35px;

    color: var(--mgmt-primary);

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

    text-align: center;
}

.about-section-divider::before,
.about-section-divider::after {
    content: "";

    flex: 1;

    height: 1px;

    background: var(--mgmt-border);
}

.philosophy-grid>div:not(:last-child) {
    border-right: 1px solid var(--mgmt-border);
}

.philosophy-item {
    display: flex;

    gap: 20px;

    height: 100%;

    padding: 15px 34px;
}

.philosophy-icon {
    flex: 0 0 54px;

    display: flex;

    width: 54px;
    height: 54px;

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

    border-radius: 50%;

    background: var(--mgmt-primary-dark);

    color: white;

    font-size: 22px;
}

.philosophy-item h3 {
    margin: 5px 0 11px;

    color: var(--mgmt-primary);

    font-size: 14px;
    font-weight: 750;
}

.philosophy-item p {
    margin: 0;

    color: var(--mgmt-muted);

    font-size: 12.5px;

    line-height: 1.7;
}


/* ============================================================
   HOW WE MANAGE
============================================================ */

.about-management-process {
    padding: 72px 0 78px;

    background:
        linear-gradient(125deg,
            #002449,
            #001a37);

    color: white;
}

.about-process-heading {
    max-width: 940px;

    margin: 0 auto 48px;
}

.about-process-heading h2 {
    margin: 0;

    color: white;

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

.about-process-heading p {
    max-width: 840px;

    margin: 17px auto 0;

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

    font-size: 13px;

    line-height: 1.7;
}

.about-process-flow {
    display: grid;

    grid-template-columns:
        1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr;

    align-items: start;

    gap: 5px;
}

.about-process-step {
    text-align: center;
}

.process-icon {
    display: flex;

    width: 72px;
    height: 72px;

    margin: 0 auto 15px;

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

    border: 1px solid rgba(124, 183, 241, .65);

    border-radius: 50%;

    background:
        rgba(32, 101, 171, .40);

    color: white;

    font-size: 27px;
}

.about-process-step h3 {
    margin: 0 0 12px;

    color: white;

    font-size: 12px;
    font-weight: 700;
}

.about-process-step p {
    max-width: 160px;

    margin: auto;

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

    font-size: 11px;

    line-height: 1.65;
}

.process-arrow {
    padding-top: 31px;

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

    text-align: center;
}


/* ============================================================
   SHIP & SHORE / COMPLIANCE
============================================================ */

.about-operations {
    background: #fff;
}

.ship-shore-panel,
.compliance-panel {
    min-height: 570px;
}

.ship-shore-panel {
    padding: 70px 45px 60px 0;
}

.ship-shore-panel p,
.compliance-copy p {
    margin: 20px 0 0;

    color: var(--mgmt-muted);

    font-size: 13px;

    line-height: 1.75;
}

.ship-shore-panel .btn {
    margin-top: 25px;
}


/* diagram */

.ship-shore-diagram {
    position: relative;

    width: 100%;
    min-height: 390px;

    isolation: isolate;
}

.ship-shore-center {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 145px;
    height: 145px;

    overflow: hidden;

    border:
        6px solid var(--mgmt-bg-soft);

    border-radius: 50%;

    transform:
        translate(-50%, -50%);

    box-shadow:
        0 0 0 1px var(--mgmt-border);
}

.ship-shore-center img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.shore-role {
    position: absolute;

    z-index: 2;

    display: flex;

    width: 120px;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    color: var(--mgmt-primary);

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

    line-height: 1.3;

    text-align: center;
}

.shore-role i {
    display: flex;

    width: 36px;
    height: 36px;

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

    border-radius: 50%;

    background: var(--mgmt-primary);

    color: white;

    font-size: 14px;
}

.shore-role::after {
    content: "";

    position: absolute;

    z-index: -1;

    height: 1px;
    width: 86px;

    background:
        linear-gradient(90deg,
            rgba(0, 47, 96, .16),
            rgba(0, 47, 96, .46));

    transform-origin: center;
}

.shore-role-1::after,
.shore-role-4::after {
    left: 50%;

    width: 1px;
    height: 68px;

    background:
        linear-gradient(180deg,
            rgba(0, 47, 96, .16),
            rgba(0, 47, 96, .46));

    transform: translateX(-50%);
}

.shore-role-1::after {
    top: calc(100% + 8px);
}

.shore-role-4::after {
    bottom: calc(100% + 8px);
}

.shore-role-2::after,
.shore-role-3::after {
    right: calc(100% - 8px);
}

.shore-role-2::after {
    top: 74px;

    transform:
        rotate(22deg);
}

.shore-role-3::after {
    bottom: 74px;

    transform:
        rotate(-22deg);
}

.shore-role-5::after,
.shore-role-6::after {
    left: calc(100% - 8px);

    background:
        linear-gradient(90deg,
            rgba(0, 47, 96, .46),
            rgba(0, 47, 96, .16));
}

.shore-role-5::after {
    bottom: 74px;

    transform:
        rotate(22deg);
}

.shore-role-6::after {
    top: 74px;

    transform:
        rotate(-22deg);
}

.shore-role-1 {
    top: 2%;
    left: 50%;

    transform: translateX(-50%);
}

.shore-role-2 {
    top: 19%;
    right: 0;
}

.shore-role-3 {
    right: 0;
    bottom: 17%;
}

.shore-role-4 {
    bottom: 0;
    left: 50%;

    transform: translateX(-50%);
}

.shore-role-5 {
    bottom: 17%;
    left: 0;
}

.shore-role-6 {
    top: 19%;
    left: 0;
}


/* compliance */

.compliance-panel {
    position: relative;

    display: flex;

    align-items: center;

    padding: 65px 43% 65px 65px;

    background:
        linear-gradient(90deg,
            #f9fbfd 0%,
            #f9fbfd 44%,
            rgba(249, 251, 253, .85) 57%,
            rgba(249, 251, 253, .12) 100%),
        image-set(
            url("../images/about-compliance.webp") type("image/webp"),
            url("../images/about-compliance.png") type("image/png")
        ) right center / cover no-repeat;

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

.compliance-copy {
    position: relative;

    z-index: 2;
}


/* ============================================================
   OWNER RELATIONSHIP
============================================================ */

.owner-relationship {
    border-top:
        1px solid var(--mgmt-border);

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

    background: #fff;
}

.owner-image {
    height: 100%;
    min-height: 390px;
}

.owner-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.owner-content {
    padding: 65px 0 55px 65px;
}

.owner-content>p {
    max-width: 750px;

    margin: 20px 0 0;

    color: var(--mgmt-muted);

    font-size: 13px;

    line-height: 1.7;
}

.owner-visibility-grid {
    display: grid;

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

    gap: 12px;

    margin-top: 35px;
}

.owner-visibility-grid div {
    display: flex;

    min-width: 0;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color: var(--mgmt-primary);

    text-align: center;
}

.owner-visibility-grid i {
    font-size: 21px;
}

.owner-visibility-grid span {
    font-size: 9px;

    line-height: 1.35;
}

.owner-message {
    margin-top: 36px;

    color: #2877c8;

    font-size: 14px;
}

.owner-message strong {
    font-weight: 600;
}


/* ============================================================
   ABOUT FINAL CTA
============================================================ */

.about-final-cta {
    position: relative;

    min-height: 335px;

    display: flex;

    align-items: center;

    background:
        image-set(
            url("../images/about-cta.webp") type("image/webp"),
            url("../images/about-cta.png") type("image/png")
        ) center center / cover no-repeat;
}

.about-final-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 28, 58, .96) 0%,
            rgba(0, 38, 75, .87) 34%,
            rgba(0, 35, 69, .28) 68%,
            rgba(0, 20, 42, .08) 100%);
}

.about-final-content {
    position: relative;

    z-index: 2;

    padding: 55px 0;
}

.about-final-content h2 {
    margin: 0;

    color: white;

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

    line-height: 1.15;
}

.about-final-content p {
    max-width: 570px;

    margin: 20px 0 25px;

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

    font-size: 14px;

    line-height: 1.7;
}

.about-final-btn {
    padding: 14px 22px;

    border-radius: 0;

    background: #1766b4;

    color: white;

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

    text-transform: uppercase;
}

.about-final-btn:hover {
    background: #2478c9;

    color: white;
}


/* ============================================================
   ABOUT RESPONSIVE
============================================================ */

@media (max-width: 1199px) {

    .about-process-flow {
        grid-template-columns:
            repeat(3, 1fr);

        gap: 45px 25px;
    }

    .about-process-flow .process-arrow {
        display: none;
    }

    .owner-visibility-grid {
        grid-template-columns:
            repeat(5, 1fr);

        row-gap: 25px;
    }

}


@media (max-width: 991px) {

    .about-hero {
        min-height: 540px;
    }

    .about-intro-copy {
        padding-right: 0;
    }

    .about-strength-grid {
        min-height: 360px;
    }

    .philosophy-grid>div {
        border-right: 0;
        border-bottom:
            1px solid var(--mgmt-border);
    }

    .philosophy-grid>div:last-child {
        border-bottom: 0;
    }

    .philosophy-item {
        padding: 28px 15px;
    }

    .ship-shore-panel {
        padding-right: 0;
    }

    .compliance-panel {
        padding:
            70px 45% 70px 45px;

        border-left: 0;

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

    .owner-content {
        padding:
            55px 0;
    }

}


@media (max-width: 767px) {

    .about-hero {
        min-height: 590px;

        background-position:
            60% center;
    }

    .about-hero-title {
        font-size: 41px;
    }

    .about-hero-text {
        max-width: 440px;

        font-size: 15px;
    }

    .about-intro {
        padding-top: 45px;
    }

    .about-vessel-image {
        min-height: 380px;
    }

    .about-strength {
        min-height: 180px;

        padding: 22px 12px;
    }

    .about-philosophy {
        padding-bottom: 60px;
    }

    .about-process-flow {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 45px 20px;
    }

    .about-process-step p {
        max-width: 190px;
    }

    .ship-shore-panel {
        padding:
            55px 0;
    }

    .ship-shore-diagram {
        margin-top: 25px;

        transform: scale(.92);
    }

    .compliance-panel {
        min-height: 560px;

        align-items: flex-end;

        padding:
            260px 25px 45px;

        background:
            linear-gradient(0deg,
                rgba(249, 251, 253, 1) 0%,
                rgba(249, 251, 253, .96) 42%,
                rgba(249, 251, 253, .15) 75%),
            image-set(
                url("../images/about-compliance.webp") type("image/webp"),
                url("../images/about-compliance.png") type("image/png")
            ) center top / cover no-repeat;
    }

    .owner-image {
        min-height: 310px;
    }

    .owner-visibility-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .about-final-content h2 {
        font-size: 28px;
    }

}

/* ============================================================
   SERVICES PAGE
============================================================ */

.services-eyebrow {
    display: block;
    margin-bottom: 10px;

    color: var(--mgmt-primary);

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

    letter-spacing: .7px;
    text-transform: uppercase;
}

.services-eyebrow-light {
    color: rgba(255, 255, 255, .72);
}

.services-eyebrow-gold {
    color: var(--mgmt-accent);
}


/* ============================================================
   HERO
============================================================ */

.services-hero {
    position: relative;

    min-height: 660px;

    display: flex;
    align-items: center;

    padding-top: 86px;

    background:
        image-set(
            url("../images/services-hero.webp") type("image/webp"),
            url("../images/services-hero.png") type("image/png")
        ) center center / cover no-repeat;
}

.services-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 27, 56, .97) 0%,
            rgba(0, 35, 70, .86) 38%,
            rgba(0, 30, 59, .30) 68%,
            rgba(0, 20, 40, .10) 100%);
}

.services-hero-container {
    position: relative;

    z-index: 2;

    width: 100%;
}

.services-title-line {
    width: 42px;
    height: 2px;

    margin-bottom: 22px;

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

.services-hero-title {
    margin: 0;

    color: white;

    font-size: clamp(46px, 4.1vw, 68px);
    font-weight: 500;

    line-height: 1.06;

    letter-spacing: -1.8px;
}

.services-hero-title span {
    color: var(--mgmt-blue);
}

.services-hero-text {
    max-width: 570px;

    margin: 26px 0 30px;

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

    font-size: 16px;

    line-height: 1.72;
}

.services-gold-btn {
    padding: 15px 24px;

    border: 1px solid var(--mgmt-accent);
    border-radius: 2px;

    background: var(--mgmt-accent);

    color: #091725;

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

    letter-spacing: .45px;

    text-transform: uppercase;
}

.services-gold-btn:hover {
    border-color: var(--mgmt-accent-hover);
    background: var(--mgmt-accent-hover);

    color: #091725;
}


/* ============================================================
   OVERVIEW
============================================================ */

.services-overview {
    padding: 65px 0 75px;

    background: white;
}

.services-section-title {
    margin-bottom: 26px;

    color: var(--mgmt-primary);

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

    text-transform: uppercase;
}

.services-overview-grid {
    display: grid;

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

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

.services-overview-item {
    display: flex;

    min-height: 220px;

    gap: 17px;

    padding: 27px 22px;

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

    color: var(--mgmt-text);

    background: white;

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

.services-overview-item:hover {
    background: var(--mgmt-bg-soft);
}

.services-overview-icon {
    flex: 0 0 48px;

    display: flex;

    width: 48px;
    height: 48px;

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

    border-radius: 50%;

    background: #eef5fc;

    color: #1762ad;

    font-size: 22px;
}

.services-overview-item h3 {
    min-height: 38px;

    margin: 3px 0 12px;

    color: var(--mgmt-primary);

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

    line-height: 1.25;

    text-transform: uppercase;
}

.services-overview-item p {
    margin: 0;

    color: var(--mgmt-muted);

    font-size: 11px;

    line-height: 1.65;
}

.services-explore {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 16px;

    color: #1762ad;

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

    text-transform: uppercase;
}


/* last row */

.services-overview-item:nth-child(n+6) {
    min-height: 205px;
}


/* ============================================================
   MANAGEMENT STRUCTURE
============================================================ */

.services-structure {
    padding: 75px 0;

    background:
        linear-gradient(125deg,
            #00264d,
            #001a37);

    color: white;
}

.services-structure h2 {
    margin: 0;

    color: white;

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

    line-height: 1.15;
}

.services-structure p {
    max-width: 440px;

    margin-top: 22px;

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

    font-size: 13px;

    line-height: 1.75;
}


/* MANAGEMENT WHEEL */

.management-wheel {
    position: relative;

    width: 440px;
    height: 440px;

    max-width: 100%;

    margin: auto;
}

.management-wheel::before {
    content: "";

    position: absolute;

    inset: 75px;

    border:
        1px dashed rgba(200, 166, 106, .58);

    border-radius: 50%;
}

.management-wheel-center {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 145px;
    height: 145px;

    overflow: hidden;

    border:
        7px solid rgba(255, 255, 255, .10);

    border-radius: 50%;

    transform:
        translate(-50%, -50%);

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .15);
}

.management-wheel-center img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.wheel-item {
    position: absolute;

    display: flex;

    width: 110px;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    color: white;

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

    line-height: 1.25;

    text-align: center;
}

.wheel-item i {
    display: flex;

    width: 38px;
    height: 38px;

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

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

    border-radius: 50%;

    background: #002f60;

    color: white;

    font-size: 14px;
}

.wheel-1 {
    top: 0;
    left: 50%;

    transform: translateX(-50%);
}

.wheel-2 {
    top: 17%;
    right: 0;
}

.wheel-3 {
    top: 48%;
    right: -10px;
}

.wheel-4 {
    right: 5%;
    bottom: 9%;
}

.wheel-5 {
    bottom: 0;
    left: 50%;

    transform: translateX(-50%);
}

.wheel-6 {
    bottom: 9%;
    left: 5%;
}

.wheel-7 {
    top: 48%;
    left: -10px;
}

.wheel-8 {
    top: 17%;
    left: 0;
}


/* STRUCTURE BENEFITS */

.structure-benefits {
    padding-left: 28px;

    border-left:
        1px solid rgba(255, 255, 255, .14);
}

.structure-benefits div {
    display: flex;

    align-items: center;

    gap: 14px;

    margin: 20px 0;

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

    font-size: 13px;
}

.structure-benefits i {
    width: 23px;

    color: var(--mgmt-accent);

    font-size: 17px;

    text-align: center;
}


/* ============================================================
   SERVICE DETAIL ROWS
============================================================ */

.service-details {
    padding: 5px 0 75px;

    background: #f7f9fc;
}

.service-detail-row {
    display: grid;

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

    scroll-margin-top: 105px;

    min-height: 390px;

    margin-top: 22px;

    background: white;

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

.service-detail-row.reverse .service-detail-image {
    order: 2;
}

.service-detail-row.reverse .service-detail-content {
    order: 1;
}

.service-detail-image {
    min-height: 390px;

    overflow: hidden;
}

.service-detail-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .5s ease;
}

.service-detail-row:hover .service-detail-image img {
    transform: scale(1.025);
}

.service-detail-content {
    position: relative;

    padding: 43px 50px;
}

.service-detail-heading {
    display: flex;

    align-items: flex-start;

    gap: 13px;
}

.service-number {
    color: var(--mgmt-primary);

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

    line-height: 1;
}

.service-detail-heading h2 {
    max-width: 460px;

    margin: 3px 55px 0 0;

    color: var(--mgmt-primary);

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

    line-height: 1.25;
}

.service-detail-icon {
    position: absolute;

    top: 40px;
    right: 40px;

    display: flex;

    width: 48px;
    height: 48px;

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

    border-radius: 50%;

    background: var(--mgmt-primary);

    color: white;

    font-size: 18px;
}

.service-tagline {
    margin: 18px 0 0;

    color: #2775bd;

    font-size: 12px;
    font-weight: 650;
}

.service-detail-content ul {
    margin: 22px 0 0;

    padding-left: 19px;

    color: var(--mgmt-muted);

    font-size: 13px;

    line-height: 1.9;
}

.service-detail-content li::marker {
    color: var(--mgmt-primary);
}


/* FEATURED DRY DOCK */

.service-detail-featured {
    border-top:
        3px solid var(--mgmt-accent);
}

.featured-service-label {
    display: inline-block;

    margin-bottom: 16px;

    color: var(--mgmt-accent);

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

    letter-spacing: .75px;

    text-transform: uppercase;
}

.drydock-process {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    margin-top: 30px;

    padding-top: 18px;

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

.drydock-process span {
    padding: 6px 10px;

    background: var(--mgmt-bg-soft);

    color: var(--mgmt-primary);

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

    text-transform: uppercase;
}

.drydock-process i {
    color: #9aabba;

    font-size: 9px;
}


/* ============================================================
   COMPLIANCE NOTE
============================================================ */

.services-compliance-note {
    padding-bottom: 70px;

    background: #f7f9fc;
}

.services-note {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

    padding: 45px 55px;

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

    background:
        linear-gradient(120deg,
            white,
            #f3f7fb);
}

.services-note h2 {
    margin: 0;

    color: var(--mgmt-primary);

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

.services-note p {
    max-width: 850px;

    margin: 15px 0 0;

    color: var(--mgmt-muted);

    font-size: 13px;

    line-height: 1.75;
}

.services-note-icon {
    flex: 0 0 auto;

    color: #d8e0e9;

    font-size: 85px;
}


/* ============================================================
   FLEXIBLE SERVICES
============================================================ */

.services-flexible {
    padding: 65px 0 75px;

    background: white;
}

.services-flexible h2 {
    margin: 0;

    color: var(--mgmt-primary);

    font-size: 29px;
    font-weight: 650;
}

.services-flexible-description {
    max-width: 650px;

    margin: 0;

    color: var(--mgmt-muted);

    font-size: 13px;

    line-height: 1.7;
}

.management-options {
    display: grid;

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

    margin-top: 34px;

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

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

.management-options div {
    display: flex;

    min-height: 110px;

    align-items: center;

    gap: 14px;

    padding: 20px;

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

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

    color: var(--mgmt-primary);

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

    line-height: 1.45;

    text-transform: uppercase;
}

.management-options i {
    flex: 0 0 auto;

    color: #1c65ad;

    font-size: 23px;
}


/* ============================================================
   FINAL CTA
============================================================ */

.services-final-cta {
    position: relative;

    min-height: 290px;

    display: flex;

    align-items: center;

    background:
        image-set(
            url("../images/services-cta.webp") type("image/webp"),
            url("../images/services-cta.png") type("image/png")
        ) center center / cover no-repeat;
}

.services-final-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 29, 60, .97) 0%,
            rgba(0, 39, 77, .87) 47%,
            rgba(0, 33, 65, .30) 75%,
            rgba(0, 22, 44, .10) 100%);
}

.services-final-cta .site-container {
    position: relative;

    z-index: 2;

    width: 100%;
}

.services-final-content h2 {
    margin: 0;

    color: white;

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

    line-height: 1.18;
}

.services-final-content p {
    margin: 16px 0 0;

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

    font-size: 13px;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1199px) {

    .services-overview-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .management-options {
        grid-template-columns:
            repeat(3, 1fr);
    }

}


@media (max-width: 991px) {

    .services-hero {
        min-height: 600px;
    }

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

    .management-wheel {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .structure-benefits {
        display: grid;

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

        padding-left: 0;

        border-left: 0;
    }

    .service-detail-row {
        grid-template-columns: 1fr;
    }

    .service-detail-row.reverse .service-detail-image,
    .service-detail-row.reverse .service-detail-content {
        order: initial;
    }

    .service-detail-image {
        min-height: 340px;
    }

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

}


@media (max-width: 767px) {

    .services-hero {
        min-height: 610px;

        background-position:
            63% center;
    }

    .services-hero-title {
        font-size: 40px;
    }

    .services-hero-text {
        max-width: 430px;

        font-size: 14px;
    }

    .services-overview {
        padding-top: 50px;
    }

    .services-overview-grid {
        grid-template-columns: 1fr;
    }

    .services-overview-item {
        min-height: auto;
    }

    .management-wheel {
        width:
            min(340px, calc(100vw - 40px));

        height:
            min(340px, calc(100vw - 40px));

        transform:
            scale(.92);
    }

    .management-wheel::before {
        inset: 55px;
    }

    .management-wheel-center {
        width: 110px;
        height: 110px;
    }

    .wheel-item {
        width: 90px;

        font-size: 8px;
    }

    .wheel-item i {
        width: 32px;
        height: 32px;

        font-size: 11px;
    }

    .structure-benefits {
        grid-template-columns: 1fr;
    }

    .service-detail-content {
        padding: 34px 25px;
    }

    .service-detail-image {
        min-height: 270px;
    }

    .service-detail-heading h2 {
        margin-right: 45px;

        font-size: 18px;
    }

    .service-number {
        font-size: 24px;
    }

    .service-detail-icon {
        top: 30px;
        right: 20px;

        width: 42px;
        height: 42px;
    }

    .services-note {
        padding: 35px 25px;
    }

    .services-note-icon {
        display: none;
    }

    .management-options {
        grid-template-columns: 1fr;
    }

    .services-final-cta {
        min-height: 360px;

        background-position:
            67% center;
    }

    .services-final-content {
        margin-bottom: 28px;
    }

}

/* ============================================================
   SAFETY & COMPLIANCE PAGE
============================================================ */

.safety-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: var(--mgmt-primary);

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

    letter-spacing: .7px;

    text-transform: uppercase;
}

.safety-eyebrow-light {
    color: rgba(255, 255, 255, .74);
}

.safety-eyebrow-gold {
    color: var(--mgmt-accent);
}

.safety-section-heading {
    margin-bottom: 48px;
}

.safety-section-heading h2 {
    margin: 0;

    color: var(--mgmt-primary);

    font-size: 27px;
    font-weight: 700;
}

.safety-heading-line {
    width: 42px;
    height: 2px;

    margin-top: 14px;

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

.safety-heading-line-light {
    background: rgba(255, 255, 255, .72);
}


/* ============================================================
   HERO
============================================================ */

.safety-hero {
    position: relative;

    min-height: 650px;

    display: flex;
    align-items: center;

    padding-top: 86px;

    background:
        image-set(
            url("../images/safety-hero.webp") type("image/webp"),
            url("../images/safety-hero.png") type("image/png")
        ) center center / cover no-repeat;
}

.safety-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 28, 57, .97) 0%,
            rgba(0, 39, 77, .88) 40%,
            rgba(0, 34, 67, .36) 68%,
            rgba(0, 25, 48, .10) 100%);
}

.safety-hero-container {
    position: relative;

    z-index: 2;

    width: 100%;
}

.safety-title-line {
    width: 46px;
    height: 3px;

    margin-bottom: 23px;

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

.safety-hero-title {
    margin: 0;

    color: white;

    font-size: clamp(46px, 4.2vw, 69px);
    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -1.7px;
}

.safety-hero-title span {
    color: var(--mgmt-blue);
}

.safety-hero-text {
    max-width: 580px;

    margin: 28px 0 0;

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

    font-size: 16px;

    line-height: 1.75;
}


/* ============================================================
   PHILOSOPHY
============================================================ */

.safety-philosophy {
    padding: 75px 0;

    background: white;
}

.safety-philosophy-grid>div:not(:last-child) {
    border-right:
        1px solid var(--mgmt-border);
}

.safety-philosophy-item {
    display: flex;

    gap: 20px;

    height: 100%;

    padding: 12px 38px;
}

.safety-philosophy-icon {
    flex: 0 0 58px;

    display: flex;

    width: 58px;
    height: 58px;

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

    color: #1766b4;

    font-size: 35px;
}

.safety-philosophy-item h3 {
    margin: 4px 0 11px;

    color: var(--mgmt-primary);

    font-size: 15px;
    font-weight: 750;
}

.safety-philosophy-item p {
    margin: 0;

    color: var(--mgmt-muted);

    font-size: 12px;

    line-height: 1.7;
}


/* ============================================================
   OBSERVATION → PREVENTION
============================================================ */

.safety-prevention {
    padding: 25px 0 75px;

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

    background: #fff;
}

.safety-prevention-flow {
    display: grid;

    grid-template-columns:
        1fr 30px 1fr 30px 1fr 30px 1fr 30px 1fr 30px 1fr 30px 1fr;

    align-items: start;

    gap: 7px;
}

.safety-prevention-step {
    text-align: center;
}

.safety-process-icon {
    display: flex;

    width: 74px;
    height: 74px;

    margin: 0 auto 15px;

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

    border:
        1px solid #8eb8e1;

    border-radius: 50%;

    color: #165fa9;

    background: #f7fbff;

    font-size: 26px;
}

.safety-prevention-step h3 {
    margin: 0 0 10px;

    color: var(--mgmt-primary);

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

.safety-prevention-step p {
    max-width: 150px;

    margin: auto;

    color: var(--mgmt-muted);

    font-size: 10.5px;

    line-height: 1.65;
}

.safety-process-arrow {
    padding-top: 29px;

    color: #216cb4;

    font-size: 13px;

    text-align: center;
}


/* ============================================================
   SAFETY CULTURE
============================================================ */

.safety-culture {
    padding: 80px 0;

    background:
        linear-gradient(125deg,
            #00254b,
            #00172f);

    color: white;
}

.safety-culture h2 {
    margin: 0;

    color: white;

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

    line-height: 1.14;
}

.safety-culture p {
    max-width: 420px;

    margin: 22px 0 0;

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

    font-size: 13px;

    line-height: 1.75;
}


/* WHEEL */

.safety-culture-wheel {
    position: relative;

    width: 420px;
    height: 420px;

    max-width: 100%;

    margin: auto;
}

.safety-culture-wheel::before {
    content: "";

    position: absolute;

    inset: 68px;

    border:
        1px dashed var(--mgmt-accent);

    border-radius: 50%;

    opacity: .75;
}

.safety-culture-center {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 170px;
    height: 170px;

    overflow: hidden;

    border:
        7px solid rgba(255, 255, 255, .10);

    border-radius: 50%;

    transform:
        translate(-50%, -50%);
}

.safety-culture-center img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.safety-role {
    position: absolute;

    display: flex;

    width: 100px;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    color: white;

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

    text-align: center;
}

.safety-role i {
    display: flex;

    width: 44px;
    height: 44px;

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

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

    border-radius: 50%;

    background: var(--mgmt-primary);

    font-size: 16px;
}

.safety-role-master {
    top: 0;
    left: 50%;

    transform: translateX(-50%);
}

.safety-role-officers {
    top: 23%;
    right: 0;
}

.safety-role-crew {
    right: 0;
    bottom: 18%;
}

.safety-role-shore {
    bottom: 0;
    left: 50%;

    transform: translateX(-50%);
}

.safety-role-cso {
    bottom: 18%;
    left: 0;
}

.safety-role-dpa {
    top: 23%;
    left: 0;
}


/* CULTURE LIST */

.safety-culture-points {
    padding-left: 35px;

    border-left:
        1px solid rgba(255, 255, 255, .17);
}

.safety-culture-points div {
    display: flex;

    align-items: center;

    gap: 12px;

    margin: 20px 0;

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

    font-size: 13px;
}

.safety-culture-points i {
    color: var(--mgmt-accent);
}


/* ============================================================
   COMPLIANCE FRAMEWORK
============================================================ */

.safety-compliance-framework {
    padding: 70px 0 60px;

    background: white;
}

.compliance-framework-grid {
    display: grid;

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

    gap: 20px;
}

.compliance-framework-grid div {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 13px;

    color: var(--mgmt-primary);

    text-align: center;
}

.compliance-framework-grid i {
    font-size: 30px;
}

.compliance-framework-grid span {
    font-size: 10px;
    font-weight: 800;

    line-height: 1.35;
}

.compliance-framework-note {
    display: flex;

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

    gap: 10px;

    margin-top: 45px;

    color: var(--mgmt-muted);

    font-size: 11px;

    text-align: center;
}

.compliance-framework-note span {
    width: 12px;
    height: 2px;

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


/* ============================================================
   READINESS
============================================================ */

.safety-readiness {
    padding: 65px 0 75px;

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

    background: #f8fafc;
}

.readiness-card {
    position: relative;

    min-height: 330px;

    overflow: hidden;

    background-position: center;
    background-size: cover;
}

.readiness-inspection {
    background-image:
        image-set(
            url("../images/safety-inspection.webp") type("image/webp"),
            url("../images/safety-inspection.png") type("image/png")
        );
}

.readiness-emergency {
    background-image:
        image-set(
            url("../images/safety-emergency.webp") type("image/webp"),
            url("../images/safety-emergency.png") type("image/png")
        );
}

.readiness-card-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(245, 249, 253, .98) 0%,
            rgba(245, 249, 253, .92) 54%,
            rgba(245, 249, 253, .20) 100%);
}

.readiness-card-overlay-light {
    background:
        linear-gradient(90deg,
            rgba(255, 248, 237, .97) 0%,
            rgba(255, 248, 237, .90) 55%,
            rgba(255, 248, 237, .16) 100%);
}

.readiness-content {
    position: relative;

    z-index: 2;

    max-width: 72%;

    padding: 38px 35px;
}

.readiness-content h3 {
    margin: 0 0 20px;

    color: #1462aa;

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

.readiness-content-dark h3 {
    color: #9d702a;
}

.readiness-content ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.readiness-content li {
    display: flex;

    align-items: center;

    gap: 9px;

    margin: 10px 0;

    color: var(--mgmt-text);

    font-size: 11px;
}

.readiness-content li i {
    color: #1971c2;
}

.readiness-content-dark li i {
    color: #a6722e;
}


/* 24/7 BADGE */

.shore-support-badge {
    display: flex;

    height: 100%;
    min-height: 330px;

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

.shore-support-badge>div {
    display: flex;

    width: 150px;
    height: 150px;

    flex-direction: column;

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

    border:
        4px solid var(--mgmt-accent);

    border-radius: 50%;

    outline:
        4px solid var(--mgmt-primary);

    background: var(--mgmt-primary-dark);

    color: white;

    text-align: center;
}

.shore-support-badge strong {
    font-size: 35px;
    font-weight: 500;

    line-height: 1;
}

.shore-support-badge span {
    margin-top: 9px;

    font-size: 11px;
    font-weight: 700;
}


/* ============================================================
   CONTINUOUS IMPROVEMENT
============================================================ */

.safety-improvement {
    position: relative;

    padding: 70px 0;

    background:
        linear-gradient(110deg,
            #00254a,
            #001a36);

    color: white;
}

.safety-improvement h2 {
    margin: 0;

    color: white;

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

    line-height: 1.18;
}

.safety-improvement>.site-container {
    position: relative;

    z-index: 2;
}

.safety-improvement p {
    margin: 20px 0 0;

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

    font-size: 12.5px;

    line-height: 1.7;
}

.improvement-grid {
    display: grid;

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

.improvement-grid>div {
    min-height: 175px;

    padding: 20px 30px;

    border-left:
        1px solid rgba(255, 255, 255, .14);

    text-align: center;
}

.improvement-grid i {
    color: var(--mgmt-accent);

    font-size: 28px;
}

.improvement-grid h3 {
    margin: 14px 0 8px;

    color: white;

    font-size: 11px;
    font-weight: 750;
}

.improvement-grid p {
    margin: 0;

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

    font-size: 10px;
}


/* ============================================================
   FINAL CTA
============================================================ */

.safety-final-cta {
    position: relative;

    min-height: 320px;

    display: flex;
    align-items: center;

    background:
        image-set(
            url("../images/safety-cta.webp") type("image/webp"),
            url("../images/safety-cta.png") type("image/png")
        ) center center / cover no-repeat;
}

.safety-final-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 29, 59, .98) 0%,
            rgba(0, 38, 75, .88) 48%,
            rgba(0, 30, 59, .28) 75%,
            rgba(0, 20, 40, .08) 100%);
}

.safety-final-cta .site-container {
    position: relative;

    z-index: 2;

    width: 100%;
}

.safety-final-content h2 {
    margin: 0;

    color: white;

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

    line-height: 1.12;
}

.safety-final-content p {
    max-width: 550px;

    margin: 20px 0 0;

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

    font-size: 13px;

    line-height: 1.7;
}

.safety-gold-btn {
    padding: 15px 27px;

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

    border-radius: 2px;

    background:
        var(--mgmt-accent);

    color: #091725;

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

    text-transform: uppercase;
}

.safety-gold-btn:hover {
    border-color:
        var(--mgmt-accent-hover);

    background:
        var(--mgmt-accent-hover);

    color: #091725;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1199px) {

    .safety-prevention-flow {
        grid-template-columns:
            repeat(4, 1fr);

        gap: 40px 25px;
    }

    .safety-process-arrow {
        display: none;
    }

    .compliance-framework-grid {
        grid-template-columns:
            repeat(5, 1fr);

        row-gap: 35px;
    }

}


@media (max-width: 991px) {

    .safety-philosophy-grid>div {
        border-right: 0;
        border-bottom:
            1px solid var(--mgmt-border);
    }

    .safety-philosophy-grid>div:last-child {
        border-bottom: 0;
    }

    .safety-philosophy-item {
        padding: 28px 20px;
    }

    .safety-culture-points {
        display: grid;

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

        padding-left: 0;

        border-left: 0;
    }

    .shore-support-badge {
        min-height: 190px;
    }

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

}


@media (max-width: 767px) {

    .safety-hero {
        min-height: 610px;

        background-position:
            63% center;
    }

    .safety-hero-title {
        font-size: 40px;
    }

    .safety-hero-text {
        max-width: 440px;

        font-size: 14px;
    }

    .safety-prevention-flow {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 42px 20px;
    }

    .safety-culture-wheel {
        width: 340px;
        height: 340px;

        transform: scale(.93);
    }

    .safety-culture-wheel::before {
        inset: 54px;
    }

    .safety-culture-center {
        width: 130px;
        height: 130px;
    }

    .safety-role {
        width: 82px;

        font-size: 8px;
    }

    .safety-role i {
        width: 35px;
        height: 35px;

        font-size: 12px;
    }

    .safety-culture-points {
        grid-template-columns: 1fr;
    }

    .compliance-framework-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .readiness-content {
        max-width: 90%;

        padding: 35px 25px;
    }

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

    .improvement-grid>div {
        border-left: 0;

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

    .safety-final-cta {
        min-height: 390px;

        background-position:
            68% center;
    }

    .safety-final-content {
        margin-bottom: 30px;
    }

    .safety-final-content h2 {
        font-size: 29px;
    }

}

/* ============================================================
   CAREERS PAGE
============================================================ */

.careers-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: var(--mgmt-primary);

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

    letter-spacing: .7px;

    text-transform: uppercase;
}

.careers-eyebrow-light {
    color: rgba(255,255,255,.76);
}

.careers-eyebrow-gold {
    color: var(--mgmt-accent);
}

.careers-heading-line {
    width: 42px;
    height: 2px;

    margin-top: 14px;

    background: var(--mgmt-primary);
}

.careers-heading-line-gold {
    background: var(--mgmt-accent);
}

.careers-section-heading {
    margin-bottom: 45px;
}

.careers-section-heading h2 {
    margin: 0;

    color: var(--mgmt-primary);

    font-size: 28px;
    font-weight: 700;
}


/* ============================================================
   HERO
============================================================ */

.careers-hero {
    position: relative;

    min-height: 650px;

    display: flex;
    align-items: center;

    padding-top: 86px;

    background:
        image-set(
            url("../images/careers-hero.webp") type("image/webp"),
            url("../images/careers-hero.png") type("image/png")
        ) center center / cover no-repeat;
}

.careers-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,28,57,.97) 0%,
            rgba(0,40,78,.86) 40%,
            rgba(0,35,69,.30) 70%,
            rgba(0,20,40,.08) 100%
        );
}

.careers-hero-container {
    position: relative;

    z-index: 2;

    width: 100%;
}

.careers-title-line {
    width: 46px;
    height: 3px;

    margin-bottom: 23px;

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

.careers-hero-title {
    margin: 0;

    color: white;

    font-size: clamp(48px, 4.4vw, 72px);
    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -1.8px;
}

.careers-hero-title span {
    color: var(--mgmt-accent);
}

.careers-hero-text {
    max-width: 570px;

    margin: 27px 0 0;

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

    font-size: 16px;

    line-height: 1.75;
}


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

.careers-intro {
    padding: 55px 0;

    background: white;
}

.careers-intro-image {
    height: 100%;
    min-height: 310px;

    clip-path:
        polygon(0 0, 100% 0, 88% 100%, 0 100%);
}

.careers-intro-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.careers-intro-content {
    position: relative;

    height: 100%;

    padding: 50px 60px;

    border-left:
        2px solid rgba(200,166,106,.50);

    background: white;
}

.careers-intro-content h2 {
    margin: 0;

    color: var(--mgmt-primary);

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

    line-height: 1.18;
}

.careers-intro-content p {
    max-width: 690px;

    margin: 17px 0 0;

    color: var(--mgmt-muted);

    font-size: 13px;

    line-height: 1.75;
}


/* ============================================================
   CAREER PATHS
============================================================ */

.career-paths {
    background: #fff;
}


/* SEA SIDE */

.career-path {
    position: relative;

    height: 100%;
    min-height: 790px;
}

.career-path-sea {
    background:
        image-set(
            url("../images/careers-sea.webp") type("image/webp"),
            url("../images/careers-sea.png") type("image/png")
        ) center center / cover no-repeat;

    color: white;
}

.career-path-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,35,70,.98) 0%,
            rgba(0,38,76,.92) 65%,
            rgba(0,32,64,.72) 100%
        );
}

.career-path-content {
    position: relative;

    z-index: 2;

    padding: 50px;
}


/* SHORE SIDE */

.career-path-shore {
    background: white;

    color: var(--mgmt-text);

    overflow: hidden;
}

.career-shore-image {
    height: 270px;

    overflow: hidden;
}

.career-shore-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.career-path-content-shore {
    position: relative;

    margin: -74px 48px 0;

    padding:
        48px 50px 50px;

    background: white;

    clip-path:
        polygon(0 0, 100% 0, 92% 100%, 0 100%);

    box-shadow:
        0 24px 45px rgba(10, 30, 52, .08);
}


/* HEADINGS */

.career-path-heading {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 30px;
}

.career-path-heading h2 {
    margin: 0;

    color: inherit;

    font-size: 31px;
    font-weight: 650;
}

.career-path-icon {
    flex: 0 0 64px;

    display: flex;

    width: 64px;
    height: 64px;

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

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

    border-radius: 50%;

    color: var(--mgmt-accent);

    font-size: 27px;
}

.career-path-icon-light {
    border-color:
        var(--mgmt-border);

    color: var(--mgmt-accent);
}


/* INTRO */

.career-path-intro {
    max-width: 520px;

    margin-bottom: 35px;
}

.career-path-intro strong {
    display: block;

    margin-bottom: 9px;

    color: var(--mgmt-accent);

    font-size: 14px;
    font-weight: 700;
}

.career-path-intro p {
    margin: 0;

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

    font-size: 13px;

    line-height: 1.75;
}

.career-path-shore
.career-path-intro p {
    color: var(--mgmt-muted);
}


/* POSITION GRID */

.career-position-grid {
    display: grid;

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

    margin-top: 30px;

    border-top:
        1px solid rgba(255,255,255,.20);

    border-left:
        1px solid rgba(255,255,255,.20);
}

.career-position-grid div {
    display: flex;

    min-height: 120px;

    flex-direction: column;

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

    gap: 13px;

    padding: 18px 10px;

    border-right:
        1px solid rgba(255,255,255,.20);

    border-bottom:
        1px solid rgba(255,255,255,.20);

    text-align: center;
}

.career-position-grid i {
    color: var(--mgmt-accent);

    font-size: 25px;
}

.career-position-grid span {
    color: white;

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

    line-height: 1.35;

    text-transform: uppercase;
}


/* SHORE GRID */

.career-position-grid-shore {
    grid-template-columns:
        repeat(3, 1fr);

    border-color:
        var(--mgmt-border);
}

.career-position-grid-shore div {
    border-color:
        var(--mgmt-border);
}

.career-position-grid-shore span {
    color: var(--mgmt-primary);
}


/* EMAIL BOX */

.career-email-box {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 38px;

    padding: 22px 25px;

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

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

.career-email-icon {
    flex: 0 0 56px;

    display: flex;

    width: 56px;
    height: 56px;

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

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

    border-radius: 50%;

    color: var(--mgmt-accent);

    font-size: 22px;
}

.career-email-box strong {
    display: block;

    margin-bottom: 6px;

    color: var(--mgmt-accent);

    font-size: 13px;
}

.career-email-box p {
    margin: 0;

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

    font-size: 12px;
}

.career-email-box a {
    color: var(--mgmt-accent);

    font-weight: 700;
}

.career-email-box-light {
    background:
        var(--mgmt-bg-soft);

    border-color:
        var(--mgmt-border);
}

.career-email-box-light p {
    color: var(--mgmt-muted);
}


/* ============================================================
   VALUES
============================================================ */

.careers-values {
    padding: 75px 0;

    background: #f8fafc;
}

.careers-values-grid {
    display: grid;

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

    border-top:
        1px solid rgba(217,227,240,.78);
}

.career-value-item {
    min-height: 210px;

    padding: 25px 30px 15px;

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

    text-align: center;
}

.career-value-item:last-child {
    border-right: 0;
}

.career-value-icon {
    display: flex;

    width: 66px;
    height: 66px;

    margin: 0 auto 18px;

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

    border-radius: 50%;

    background: #eaf3fc;

    color: var(--mgmt-accent);

    font-size: 27px;
}

.career-value-item h3 {
    margin: 0 0 12px;

    color: var(--mgmt-primary);

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

.career-value-item p {
    max-width: 180px;

    margin: auto;

    color: var(--mgmt-muted);

    font-size: 11px;

    line-height: 1.65;
}


/* ============================================================
   FINAL CTA
============================================================ */

.careers-final-cta {
    position: relative;

    min-height: 350px;

    display: flex;
    align-items: center;

    background:
        image-set(
            url("../images/careers-cta.webp") type("image/webp"),
            url("../images/careers-cta.png") type("image/png")
        ) center center / cover no-repeat;
}

.careers-final-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,28,57,.98) 0%,
            rgba(0,39,77,.86) 48%,
            rgba(0,32,63,.32) 75%,
            rgba(0,20,40,.08) 100%
        );
}

.careers-final-cta .site-container {
    position: relative;

    z-index: 2;

    width: 100%;
}

.careers-final-content h2 {
    margin: 0;

    color: white;

    font-size: 35px;
    font-weight: 550;

    line-height: 1.12;
}

.careers-final-content h2 span {
    color: var(--mgmt-accent);
}

.careers-final-content p {
    max-width: 470px;

    margin: 20px 0 0;

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

    font-size: 13px;

    line-height: 1.7;
}

.careers-gold-btn {
    padding: 16px 27px;

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

    border-radius: 2px;

    background:
        var(--mgmt-accent);

    color: #091725;

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

    text-transform: uppercase;
}

.careers-gold-btn:hover {
    border-color:
        var(--mgmt-accent-hover);

    background:
        var(--mgmt-accent-hover);

    color: #091725;
}

.careers-final-note {
    max-width: 330px;

    margin: 0;

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

    font-size: 12px;

    line-height: 1.7;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1199px) {

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

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

    .careers-values-grid {
        grid-template-columns:
            repeat(3, 1fr);

        row-gap: 35px;
    }

}


@media (max-width: 991px) {

    .careers-intro-content {
        border-left: 0;

        border-top:
            2px solid rgba(200,166,106,.50);
    }

    .careers-intro-image {
        clip-path: none;
    }

    .career-path {
        min-height: auto;
    }

    .career-path-content-shore {
        margin:
            -45px 28px 0;

        clip-path: none;
    }

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

    .career-value-item {
        border-bottom:
            1px solid var(--mgmt-border);
    }

    .careers-final-content {
        margin-bottom: 30px;
    }

    .careers-final-note {
        margin-top: 25px;
    }

}


@media (max-width: 767px) {

    .careers-hero {
        min-height: 610px;

        background-position:
            64% center;
    }

    .careers-hero-title {
        font-size: 41px;
    }

    .careers-hero-text {
        max-width: 420px;

        font-size: 14px;
    }

    .careers-intro-content {
        padding: 40px 25px;
    }

    .career-path-content {
        padding: 40px 25px;
    }

    .career-path-content-shore {
        margin: 0;

        padding:
            40px 25px;
    }

    .career-path-heading h2 {
        font-size: 25px;
    }

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

    .career-email-box {
        align-items: flex-start;
    }

    .careers-values-grid {
        grid-template-columns: 1fr;
    }

    .career-value-item {
        border-right: 0;
    }

    .careers-final-cta {
        min-height: 430px;

        background-position:
            68% center;
    }

    .careers-final-content h2 {
        font-size: 29px;
    }

}
/* ============================================================
   CONTACT PAGE
============================================================ */

.contact-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: var(--mgmt-primary);

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

    letter-spacing: .7px;

    text-transform: uppercase;
}

.contact-eyebrow-light {
    color: rgba(255,255,255,.74);
}

.contact-eyebrow-gold {
    color: var(--mgmt-accent);
}

.contact-heading-line {
    width: 42px;
    height: 2px;

    margin-top: 16px;

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


/* ============================================================
   HERO
============================================================ */

.contact-hero {
    position: relative;

    min-height: 610px;

    display: flex;
    align-items: center;

    padding-top: 86px;

    background:
        image-set(
            url("../images/contact-hero.webp") type("image/webp"),
            url("../images/contact-hero.png") type("image/png")
        ) center center / cover no-repeat;
}

.contact-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,27,56,.97) 0%,
            rgba(0,38,76,.87) 40%,
            rgba(0,34,67,.30) 70%,
            rgba(0,20,40,.08) 100%
        );
}

.contact-hero-container {
    position: relative;

    z-index: 2;

    width: 100%;
}

.contact-title-line {
    width: 46px;
    height: 3px;

    margin-bottom: 23px;

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

.contact-hero-title {
    margin: 0;

    color: white;

    font-size: clamp(48px, 4.2vw, 70px);
    font-weight: 500;

    line-height: 1.06;

    letter-spacing: -1.8px;
}

.contact-hero-title span {
    color: var(--mgmt-blue);
}

.contact-hero-text {
    max-width: 600px;

    margin: 27px 0 30px;

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

    font-size: 16px;

    line-height: 1.75;
}

.contact-gold-btn {
    padding: 15px 25px;

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

    border-radius: 2px;

    background:
        var(--mgmt-accent);

    color: #091725;

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

    letter-spacing: .4px;

    text-transform: uppercase;
}

.contact-gold-btn:hover {
    border-color:
        var(--mgmt-accent-hover);

    background:
        var(--mgmt-accent-hover);

    color: #091725;
}


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

.contact-details {
    padding: 65px 0;

    background: white;
}

.contact-detail-grid {
    display: grid;

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

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

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

.contact-detail-grid-two {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.contact-detail-card {
    display: flex;

    min-height: 300px;

    flex-direction: column;

    align-items: flex-start;

    padding: 40px;

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

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

    background: white;

    color: var(--mgmt-text);

    transition:
        background .2s ease;
}

a.contact-detail-card:hover {
    background:
        var(--mgmt-bg-soft);
}

.contact-detail-icon {
    display: flex;

    width: 58px;
    height: 58px;

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

    margin-bottom: 25px;

    border:
        1px solid #b6c9dc;

    border-radius: 50%;

    color: var(--mgmt-primary);

    font-size: 22px;
}

.contact-detail-label {
    margin-bottom: 8px;

    color: var(--mgmt-accent);

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

    letter-spacing: .8px;

    text-transform: uppercase;
}

.contact-detail-card strong {
    color: var(--mgmt-primary);

    font-size: 21px;
    font-weight: 650;
}

.contact-detail-card p {
    max-width: 350px;

    margin: 17px 0 0;

    color: var(--mgmt-muted);

    font-size: 12px;

    line-height: 1.7;
}

.contact-detail-link,
.contact-detail-muted {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: auto;
    padding-top: 24px;

    color: #1766b4;

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

    text-transform: uppercase;
}

.contact-detail-muted {
    color: #8a98a7;
}


/* ============================================================
   HOW CAN WE HELP
============================================================ */

.contact-help {
    padding: 85px 0;

    background: #f7f9fc;
}

.contact-help h2 {
    margin: 0;

    color: var(--mgmt-primary);

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

    line-height: 1.16;
}

.contact-help .col-lg-4 > p {
    max-width: 420px;

    margin: 22px 0 28px;

    color: var(--mgmt-muted);

    font-size: 13px;

    line-height: 1.75;
}

.contact-help-grid {
    display: grid;

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

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

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

.contact-help-item {
    display: flex;

    min-height: 170px;

    gap: 18px;

    padding: 29px;

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

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

    background: white;
}

.contact-help-icon {
    flex: 0 0 48px;

    display: flex;

    width: 48px;
    height: 48px;

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

    border-radius: 50%;

    background: #edf4fb;

    color: #1764af;

    font-size: 19px;
}

.contact-help-item h3 {
    margin: 4px 0 10px;

    color: var(--mgmt-primary);

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

.contact-help-item p {
    margin: 0;

    color: var(--mgmt-muted);

    font-size: 11.5px;

    line-height: 1.7;
}


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

.contact-careers {
    padding: 65px 0;

    background: white;
}

.contact-career-box {
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 30px;

    padding: 38px 45px;

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

    background:
        linear-gradient(
            120deg,
            #f8fafc,
            white
        );
}

.contact-career-icon {
    display: flex;

    width: 72px;
    height: 72px;

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

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

    border-radius: 50%;

    color: var(--mgmt-primary);

    font-size: 26px;
}

.contact-career-copy h2 {
    margin: 0;

    color: var(--mgmt-primary);

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

.contact-career-copy p {
    max-width: 680px;

    margin: 12px 0 0;

    color: var(--mgmt-muted);

    font-size: 12px;

    line-height: 1.7;
}

.contact-career-action {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;
}

.contact-career-action span {
    color: var(--mgmt-muted);

    font-size: 10px;
}


/* ============================================================
   FINAL CTA
============================================================ */

.contact-final-cta {
    position: relative;

    min-height: 330px;

    display: flex;
    align-items: center;

    background:
        image-set(
            url("../images/contact-cta.webp") type("image/webp"),
            url("../images/contact-cta.png") type("image/png")
        ) center center / cover no-repeat;
}

.contact-final-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,27,56,.98) 0%,
            rgba(0,38,75,.88) 48%,
            rgba(0,31,61,.30) 75%,
            rgba(0,20,40,.08) 100%
        );
}

.contact-final-cta .site-container {
    position: relative;

    z-index: 2;

    width: 100%;
}

.contact-final-content h2 {
    margin: 0;

    color: white;

    font-size: 34px;
    font-weight: 550;

    line-height: 1.12;
}

.contact-final-content h2 span {
    color: var(--mgmt-accent);
}

.contact-final-content p {
    max-width: 520px;

    margin: 18px 0 0;

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

    font-size: 13px;

    line-height: 1.7;
}


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

@media (max-width: 991px) {

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

    .contact-help-grid {
        margin-top: 30px;
    }

    .contact-career-box {
        grid-template-columns:
            auto 1fr;
    }

    .contact-career-action {
        grid-column:
            1 / -1;

        align-items: flex-start;
    }

}


@media (max-width: 767px) {

    .contact-hero {
        min-height: 590px;

        background-position:
            64% center;
    }

    .contact-hero-title {
        font-size: 41px;
    }

    .contact-hero-text {
        font-size: 14px;
    }

    .contact-detail-card {
        min-height: 250px;

        padding: 30px 25px;
    }

    .contact-help-grid {
        grid-template-columns: 1fr;
    }

    .contact-career-box {
        grid-template-columns: 1fr;

        padding: 30px 25px;
    }

    .contact-career-action {
        grid-column: auto;
    }

    .contact-final-cta {
        min-height: 390px;

        background-position:
            68% center;
    }

    .contact-final-content {
        margin-bottom: 30px;
    }

    .contact-final-content h2 {
        font-size: 29px;
    }

}