/* ETEM signature surface system.
   Reversible visual layer loaded after the existing homepage styles. */

body.etem-signature-surfaces {
    --etem-ink: #0b0d10;
    --etem-ink-raised: #0f131a;
    --etem-navy: #121a28;
    --etem-navy-deep: #0f1622;
    --etem-graphite: #15191f;
    --etem-blue-border: rgba(74, 108, 156, 0.24);
    --etem-blue-border-soft: rgba(74, 108, 156, 0.16);
    background-color: var(--etem-ink);
}

/* The navy credential strip establishes the secondary brand colour. */
body.etem-signature-surfaces .mep-proof-strip {
    border-color: var(--etem-blue-border);
    background:
        radial-gradient(circle at 12% 0%, rgba(70, 108, 164, 0.16), transparent 30%),
        linear-gradient(112deg, #121b2a 0%, var(--etem-navy) 52%, #101722 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        inset 0 -1px 0 rgba(30, 54, 87, 0.28);
}

body.etem-signature-surfaces .mep-proof-item + .mep-proof-item {
    border-left-color: rgba(104, 132, 171, 0.19);
}

/* Services: darker architectural field with a controlled navy lift. */
body.etem-signature-surfaces .mep-services-section {
    background:
        radial-gradient(circle at 78% 12%, rgba(255, 92, 58, 0.095), transparent 29%),
        radial-gradient(circle at 14% 72%, rgba(54, 86, 132, 0.13), transparent 31%),
        linear-gradient(180deg, #111722 0%, #0c1016 52%, #10151d 100%);
}

body.etem-signature-surfaces .mep-tabs {
    border-color: var(--etem-blue-border);
    background: rgba(18, 26, 40, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

body.etem-signature-surfaces .mep-panel {
    border-color: var(--etem-blue-border);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 42%),
        linear-gradient(135deg, #182130 0%, #151b26 66%, #121821 100%);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.34);
}

body.etem-signature-surfaces .mep-panel__label,
body.etem-signature-surfaces .mep-delivery-note {
    border-color: var(--etem-blue-border);
    background: rgba(13, 20, 31, 0.84);
}

/* About: keep the reading surface calm while joining the new palette. */
body.etem-signature-surfaces #about.about-section {
    background:
        radial-gradient(circle at 12% 18%, rgba(50, 80, 124, 0.12), transparent 27%),
        linear-gradient(180deg, #0b0e13 0%, var(--etem-ink) 100%) !important;
}

body.etem-signature-surfaces .about-intro-image {
    border-color: var(--etem-blue-border-soft);
    box-shadow: 0 28px 74px rgba(0, 0, 0, 0.28);
}

/* Track record: use navy as a section surface, not a site-wide wash. */
body.etem-signature-surfaces .mep-experience-premium {
    border-color: var(--etem-blue-border-soft);
    background:
        radial-gradient(circle at 84% 16%, rgba(255, 92, 58, 0.085), transparent 26%),
        radial-gradient(circle at 8% 88%, rgba(51, 83, 128, 0.12), transparent 30%),
        linear-gradient(180deg, #0d1118 0%, #121a28 50%, #0d1118 100%);
}

body.etem-signature-surfaces .mep-experience-premium .experience-card {
    border-color: var(--etem-blue-border);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
        linear-gradient(150deg, #172131 0%, #111824 100%);
    box-shadow: 0 24px 62px rgba(0, 0, 0, 0.22);
}

/* Leadership: elevated navy profile panel inside a neutral outer section. */
body.etem-signature-surfaces .mep-leadership-premium {
    background:
        radial-gradient(circle at 88% 12%, rgba(47, 76, 119, 0.11), transparent 26%),
        radial-gradient(circle at 10% 20%, rgba(255, 94, 58, 0.045), transparent 23%),
        var(--etem-ink);
}

body.etem-signature-surfaces .mep-leadership-premium .leadership-editorial {
    border-color: var(--etem-blue-border);
    background:
        linear-gradient(125deg, rgba(255, 94, 58, 0.055), transparent 35%),
        linear-gradient(145deg, #151c27 0%, #111722 72%);
}

body.etem-signature-surfaces .mep-leadership-premium .leadership-editorial-profile,
body.etem-signature-surfaces .mep-leadership-premium .leadership-promise {
    border-color: var(--etem-blue-border);
    background: rgba(11, 17, 27, 0.72);
}

/* Knowledge Hub preview: editorial navy with a restrained warm corner. */
body.etem-signature-surfaces .mep-insights {
    border-color: var(--etem-blue-border-soft);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.01), transparent 22%),
        radial-gradient(circle at 88% 15%, rgba(255, 92, 58, 0.07), transparent 27%),
        linear-gradient(135deg, #101722 0%, #121a28 52%, #15171c 100%);
}

body.etem-signature-surfaces .mep-insights-grid .blog-card {
    border-color: var(--etem-blue-border);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
        #131c2a;
}

/* Conversion and footer surfaces carry the same signature tone sparingly. */
body.etem-signature-surfaces.mep-contact-premium .cta-banner {
    border-color: rgba(255, 94, 58, 0.25);
    background:
        radial-gradient(circle at 88% 14%, rgba(73, 109, 160, 0.16), transparent 30%),
        linear-gradient(115deg, rgba(255, 94, 58, 0.105), transparent 40%),
        linear-gradient(135deg, #121a28 0%, #171b24 58%, #111722 100%);
}

body.etem-signature-surfaces.mep-contact-premium .footer {
    border-top-color: var(--etem-blue-border-soft);
    background:
        radial-gradient(circle at 84% 12%, rgba(255, 94, 58, 0.045), transparent 25%),
        #0c1016;
}

body.etem-signature-surfaces.mep-contact-premium .footer-brand,
body.etem-signature-surfaces.mep-contact-premium .footer-contact,
body.etem-signature-surfaces.mep-contact-premium .footer-location,
body.etem-signature-surfaces.mep-contact-premium .footer-service-areas {
    border-color: var(--etem-blue-border-soft) !important;
    background: rgba(18, 26, 40, 0.55);
}

@media (max-width: 680px) {
    body.etem-signature-surfaces .mep-proof-strip {
        background: linear-gradient(145deg, #121b2a, #101722);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.etem-signature-surfaces * {
        scroll-behavior: auto;
    }
}