/* MES Development page */
.mes-experience {
    --mes-navy: #04152f;
    --mes-blue: #087fff;
    --mes-cyan: #24c4ff;
    --mes-ink: #14233b;
    --mes-soft: #eef7ff;
    color: var(--mes-ink);
    background: #ffffff;
    overflow: hidden;
}

.mes-experience * { box-sizing: border-box; }

.mes-experience .container { position: relative; z-index: 1; }

.mes-hero {
    position: relative;
    min-height: 700px;
    display: flex;
    align-items: center;
    color: #ffffff;
    isolation: isolate;
    background: #031022 url('../images/mes/mes-hero.webp') center center / cover no-repeat;
}

.mes-hero::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: '';
    background: linear-gradient(90deg, rgba(2, 12, 30, .97) 0%, rgba(2, 12, 30, .87) 39%, rgba(2, 12, 30, .28) 78%, rgba(2, 12, 30, .12) 100%);
}

.mes-hero::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: '';
    opacity: .28;
    background-image: radial-gradient(rgba(46, 180, 255, .8) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(90deg, #000, transparent 65%);
}

.mes-hero__content { max-width: 710px; padding: 112px 0 100px; }
/* Match the simplified treatment used on every other service banner. */
.mes-hero { min-height: 600px; }
.mes-hero__content { padding: 104px 0 82px; }
.mes-hero .mes-eyebrow,
.mes-hero .mes-actions,
.mes-hero .mes-signal-row { display: none; }

.mes-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    padding: 8px 15px;
    border: 1px solid rgba(59, 186, 255, .75);
    border-radius: 100px;
    background: rgba(7, 95, 189, .18);
    color: #7fd4ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    line-height: 1;
    text-transform: uppercase;
}

.mes-eyebrow::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    content: '';
    background: var(--mes-cyan);
    box-shadow: 0 0 12px var(--mes-cyan);
}

.mes-hero h1 {
    max-width: 670px;
    margin: 0;
    color: #ffffff;
    font-family: var(--thm-font-2, 'Prompt', sans-serif);
    font-size: clamp(40px, 4.4vw, 64px);
    font-weight: 600;
    letter-spacing: -1.4px;
    line-height: 1.1;
}

.mes-hero h1 span { color: #37c2ff; }

.mes-hero__lead {
    max-width: 620px;
    margin: 27px 0 34px;
    color: rgba(255, 255, 255, .82);
    font-size: 19px;
    line-height: 1.7;
}

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

.mes-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 13px 25px;
    border: 1px solid var(--mes-blue);
    border-radius: 5px;
    background: var(--mes-blue);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: .25s ease;
}

.mes-button:hover { border-color: #ffffff; background: #ffffff; color: var(--mes-navy); }
.mes-button--ghost { border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .05); }
.mes-button--ghost:hover { border-color: var(--mes-cyan); background: rgba(43, 187, 255, .16); color: #ffffff; }

.mes-signal-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 62px;
    border: 1px solid rgba(115, 202, 255, .26);
    border-radius: 7px;
    background: rgba(3, 23, 55, .62);
    backdrop-filter: blur(8px);
}

.mes-signal { padding: 18px 22px; border-right: 1px solid rgba(115, 202, 255, .2); }
.mes-signal:last-child { border-right: 0; }
.mes-signal strong { display: block; color: #72d2ff; font-size: 15px; font-weight: 700; }
.mes-signal span { display: block; margin-top: 5px; color: rgba(255, 255, 255, .68); font-size: 13px; line-height: 1.4; }

.mes-intro { padding: 115px 0 105px; background: #ffffff; }
.mes-intro__grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(340px, .96fr); gap: 78px; align-items: center; }
.mes-section-label { display: block; margin-bottom: 15px; color: #1685e6; font-size: 13px; font-weight: 800; letter-spacing: 1.7px; text-transform: uppercase; }
.mes-heading { margin: 0; color: var(--mes-ink); font-family: var(--thm-font-2, 'Prompt', sans-serif); font-size: clamp(32px, 3.3vw, 48px); font-weight: 700; letter-spacing: -1px; line-height: 1.18; }
.mes-intro p { margin: 22px 0 0; color: #5b6a7d; font-size: 17px; line-height: 1.8; }
.mes-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 24px; margin: 32px 0 0; padding: 0; list-style: none; }
.mes-checks li { position: relative; padding-left: 28px; color: #293c55; font-size: 15px; font-weight: 600; }
.mes-checks li::before { position: absolute; top: 1px; left: 0; width: 18px; height: 18px; border-radius: 50%; color: #fff; content: '✓'; background: #138be9; font-size: 12px; font-weight: 800; line-height: 18px; text-align: center; }
.mes-image-frame { position: relative; padding: 12px; border-radius: 10px; background: linear-gradient(135deg, #29bafd, #0b3e88); box-shadow: 0 28px 60px rgba(11, 75, 144, .18); }
.mes-image-frame::after { position: absolute; right: -26px; bottom: -26px; z-index: -1; width: 180px; height: 180px; border-radius: 50%; content: ''; background: #e2f5ff; }
.mes-image-frame img { display: block; width: 100%; border-radius: 5px; }

.mes-capabilities { padding: 105px 0 115px; background: var(--mes-soft); }
.mes-section-head { max-width: 710px; margin: 0 auto 55px; text-align: center; }
.mes-section-head p { margin: 17px 0 0; color: #63758a; font-size: 17px; line-height: 1.7; }
.mes-capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mes-capability { min-height: 238px; padding: 31px 28px; border: 1px solid #d7eafa; border-radius: 9px; background: #ffffff; box-shadow: 0 14px 30px rgba(21, 77, 128, .06); transition: transform .25s ease, box-shadow .25s ease; }
.mes-capability:hover { transform: translateY(-7px); box-shadow: 0 20px 38px rgba(21, 77, 128, .13); }
.mes-capability__icon { display: grid; width: 52px; height: 52px; margin-bottom: 22px; border-radius: 8px; place-items: center; background: linear-gradient(135deg, #0c78e8, #28c5ff); color: #ffffff; font-size: 22px; }
.mes-capability h3 { margin: 0 0 10px; color: #132946; font-family: var(--thm-font-2, 'Prompt', sans-serif); font-size: 20px; font-weight: 700; }
.mes-capability p { margin: 0; color: #65758a; font-size: 15px; line-height: 1.65; }

.mes-showcase { position: relative; padding: 118px 0; overflow: hidden; color: #ffffff; background: #031735; }
.mes-showcase::before { position: absolute; inset: 0; content: ''; opacity: .18; background-image: radial-gradient(#199ef5 1px, transparent 1px); background-size: 25px 25px; }
.mes-showcase__copy { max-width: 640px; margin-bottom: 43px; }
.mes-showcase .mes-heading { color: #ffffff; }
.mes-showcase p { margin: 19px 0 0; color: rgba(255, 255, 255, .76); font-size: 17px; line-height: 1.75; }
.mes-showcase__image { padding: 10px; border: 1px solid rgba(83, 190, 255, .57); border-radius: 10px; background: linear-gradient(135deg, rgba(14, 121, 236, .45), rgba(7, 25, 61, .7)); box-shadow: 0 28px 60px rgba(0, 0, 0, .28); }
.mes-showcase__image img { display: block; width: 100%; border-radius: 5px; }

.mes-focus { padding: 118px 0; background: #ffffff; }
.mes-focus__grid { display: grid; grid-template-columns: minmax(350px, .94fr) minmax(0, 1.06fr); gap: 78px; align-items: center; }
.mes-focus__image { position: relative; }
.mes-focus__image img { display: block; width: 100%; border-radius: 9px; box-shadow: 0 25px 55px rgba(7, 53, 105, .18); }
.mes-focus__badge { position: absolute; right: -24px; bottom: 25px; max-width: 235px; padding: 18px 20px; border-left: 4px solid var(--mes-cyan); border-radius: 5px; background: #062a60; color: #ffffff; box-shadow: 0 15px 35px rgba(1, 25, 61, .28); font-size: 14px; font-weight: 600; line-height: 1.5; }
.mes-focus__list { display: grid; gap: 16px; margin: 29px 0 0; padding: 0; list-style: none; }
.mes-focus__list li { position: relative; min-height: 70px; padding: 13px 12px 11px 77px; border-bottom: 1px solid #e5edf5; }
.mes-focus__list i { position: absolute; top: 12px; left: 0; display: grid; width: 51px; height: 51px; border-radius: 50%; place-items: center; background: #e8f6ff; color: #087ce8; font-size: 20px; }
.mes-focus__list h3 { margin: 0 0 4px; color: #1a314d; font-family: var(--thm-font-2, 'Prompt', sans-serif); font-size: 18px; font-weight: 700; }
.mes-focus__list p { margin: 0; color: #67778a; font-size: 14px; line-height: 1.55; }

.mes-integration { padding: 110px 0 120px; background: #eef8ff; }
.mes-integration__visual { margin-top: 50px; padding: 11px; border-radius: 10px; background: linear-gradient(135deg, #0f7fe9, #0d356a); box-shadow: 0 25px 48px rgba(10, 75, 142, .16); }
.mes-integration__visual img { display: block; width: 100%; border-radius: 5px; }
.mes-integration__note { max-width: 790px; margin: 26px auto 0; color: #5c7086; font-size: 16px; line-height: 1.7; text-align: center; }

.mes-cta { position: relative; padding: 105px 0; overflow: hidden; color: #ffffff; text-align: center; background: linear-gradient(135deg, #05275b, #062052 55%, #063d7c); }
.mes-cta::before, .mes-cta::after { position: absolute; border-radius: 50%; content: ''; filter: blur(2px); }
.mes-cta::before { top: -240px; left: -90px; width: 460px; height: 460px; border: 1px solid rgba(58, 199, 255, .35); }
.mes-cta::after { right: -130px; bottom: -260px; width: 540px; height: 540px; border: 1px solid rgba(58, 199, 255, .24); }
.mes-cta h2 { max-width: 760px; margin: 0 auto; color: #ffffff; font-family: var(--thm-font-2, 'Prompt', sans-serif); font-size: clamp(34px, 4vw, 52px); font-weight: 700; line-height: 1.18; }
.mes-cta p { max-width: 680px; margin: 19px auto 30px; color: rgba(255, 255, 255, .78); font-size: 17px; line-height: 1.7; }

.mes-legacy-content { display: none !important; }

@media (max-width: 991px) {
    .mes-hero { min-height: 650px; background-position: 62% center; }
    .mes-intro__grid, .mes-focus__grid { grid-template-columns: 1fr; gap: 50px; }
    .mes-intro__visual { max-width: 650px; }
    .mes-focus__image { max-width: 700px; }
    .mes-capability-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .mes-hero { min-height: auto; background-position: 60% center; }
    .mes-hero::before { background: linear-gradient(90deg, rgba(2, 12, 30, .95), rgba(2, 12, 30, .7)); }
    .mes-hero__content { padding: 88px 0 64px; }
    .mes-hero h1 { font-size: 36px; font-weight: 600; letter-spacing: -1px; }
    .mes-hero__lead { font-size: 16px; }
    .mes-signal-row { grid-template-columns: 1fr; margin-top: 42px; }
    .mes-signal { border-right: 0; border-bottom: 1px solid rgba(115, 202, 255, .2); }
    .mes-signal:last-child { border-bottom: 0; }
    .mes-intro, .mes-capabilities, .mes-showcase, .mes-focus, .mes-integration { padding: 75px 0; }
    .mes-checks { grid-template-columns: 1fr; }
    .mes-capability-grid { grid-template-columns: 1fr; }
    .mes-capability { min-height: 0; }
    .mes-focus__badge { right: 12px; bottom: 12px; max-width: 220px; }
    .mes-cta { padding: 75px 0; }
}