/* Homepage colour study. Rich navy, clear blue and a warm action colour. */
body.home.modern {
    --ink: #122b3d;
    --steel: #075a82;
    --muted: #405767;
    --dark: #0b2335;
    --pale: #e8f1f7;
    --line: #b9cedb;
    --home-action: #ffa94d;
    --home-ice: #bdeaf5;
}

body.home.modern .site-header {
    border-bottom-color: #b9cedb;
    box-shadow: 0 3px 18px #0b23350c;
}

body.home.modern .header-contact {
    background: #075a82;
    border-color: #075a82;
    color: #fff;
}

body.home.modern .header-contact svg {
    background: #fff;
    color: #075a82;
}

body.home.modern .modern-hero {
    background: #0b2335;
}

body.home.modern .modern-hero-shade {
    background: linear-gradient(90deg, #081d30 0%, #081d30f5 27%, #0b2943e6 46%, #0b2943a6 69%, #0b29434d 100%);
}

body.home.modern .modern-hero .eyebrow,
body.home.modern .modern-hero-lead {
    color: #f0f7fc;
}

body.home.modern .modern-hero h1 em,
body.home.modern .contact h2 em {
    color: var(--home-ice);
}

body.home.modern .modern-hero .button.primary,
body.home.modern .products .panel-copy .button.primary,
body.home.modern #enquiry-form .button.primary {
    background: var(--home-action);
    border-color: var(--home-action);
    color: #0b2335;
}

body.home.modern .modern-hero .button.primary svg,
body.home.modern .products .panel-copy .button.primary svg,
body.home.modern #enquiry-form .button.primary svg {
    background: #0b2335;
    color: #fff;
}

body.home.modern .modern-hero .button.primary:hover,
body.home.modern .products .panel-copy .button.primary:hover,
body.home.modern #enquiry-form .button.primary:hover {
    background: #ffc17d;
    border-color: #ffc17d;
    box-shadow: 0 12px 28px #071a2e30;
}

body.home.modern .modern-hero .button.outline {
    background: #0b2335b8;
    border-color: #e0eef7;
    color: #fff;
}

body.home.modern .modern-hero .button.outline svg {
    background: #fff;
    color: #0b2335;
}

body.home.modern .modern-hero .button.outline:hover {
    background: #075a82;
    border-color: #fff;
}

body.home.modern .hero-video-toggle {
    background: #0b2335e8;
    border-color: #b8d6e8;
    color: #fff;
}

body.home.modern .modern-hero-foot {
    border-color: #c3ddec85;
    color: #edf7fc;
}

body.home.modern .modern-benefits {
    background: #0b2335;
    border-bottom: 3px solid #075a82;
    color: #fff;
}

body.home.modern .modern-benefits .benefits-grid > div {
    border-color: #476175;
}

body.home.modern .modern-benefits .benefits-grid > div > span {
    color: var(--home-action);
}

body.home.modern .modern-benefits .benefits-grid h3 {
    color: #fff;
}

body.home.modern .modern-benefits .benefits-grid p {
    color: #d8e7f0;
}

body.home.modern .modern-technology {
    background: #fff;
}

body.home.modern .modern-tech-media {
    background: linear-gradient(110deg, #0b2335 0%, #123e5a 45%, #deedf5 45%, #c2dbe9 100%);
}

body.home.modern .modern-tech-media-copy p {
    color: #edf6fb;
}

body.home.modern .modern-tech-features .feature-row {
    background: #f1f6fa;
    border-color: #b9cedb;
}

body.home.modern .umc-film {
    background: #0b2335;
    color: #fff;
    border-color: #274b65;
}

body.home.modern .umc-film::before {
    background: #164b70;
}

body.home.modern .umc-film .eyebrow {
    color: var(--home-ice);
}

body.home.modern .umc-film h2 {
    color: #fff;
}

body.home.modern .umc-film .umc-lead {
    color: #e2eff7;
}

body.home.modern .umc-film .button.primary {
    background: #fff;
    color: #0b2335;
}

body.home.modern .umc-film .button.primary svg {
    background: #e5eff6;
    color: #0b2335;
}

body.home.modern .products {
    background: #e8f1f7;
}

body.home.modern .products .panel-copy {
    background: #123e5a;
    color: #fff;
}

body.home.modern .products .panel-copy h3 {
    color: #fff;
}

body.home.modern .products .panel-copy > p:not(.eyebrow),
body.home.modern .products .material-options span {
    color: #e2eff7;
}

body.home.modern .products .panel-copy .eyebrow {
    color: var(--home-ice);
}

body.home.modern .products .material-options b {
    color: #fff;
}

body.home.modern .product-tabs button {
    color: #122b3d;
    border-color: #96b2c4;
}

body.home.modern .product-tabs button[aria-selected="true"] {
    background: #075a82;
    border-color: #075a82;
    color: #fff;
}

body.home.modern .applications {
    background: #fff;
}

body.home.modern .application-card {
    background: #fff;
    border-color: #b9cedb;
    box-shadow: 0 6px 18px #0b23350a;
}

body.home.modern .application-card .application-body {
    background: #fff;
}

body.home.modern .application-card .application-body > p {
    color: #405767;
}

body.home.modern .application-card .app-bottom {
    border-color: #b9cedb;
    color: #075a82;
}

body.home.modern .application-card .app-bottom svg {
    background: #075a82;
    border-color: #075a82;
    color: #fff;
}

body.home.modern .contact {
    background: linear-gradient(125deg, #081d30, #123e5a);
}

body.home.modern .contact .eyebrow {
    color: var(--home-ice);
}

body.home.modern .contact-grid > div > p:not(.eyebrow),
body.home.modern .contact address {
    color: #e2eff7;
}

body.home.modern .contact-email {
    color: #fff;
}

body.home.modern #enquiry-form {
    color: #122b3d;
    border: 1px solid #d2e1ea;
}

body.home.modern #enquiry-form label {
    color: #122b3d;
    font-weight: 600;
}

body.home.modern #enquiry-form input,
body.home.modern #enquiry-form textarea,
body.home.modern #enquiry-form select {
    border-bottom-color: #839baa;
    color: #122b3d;
}

body.home.modern #enquiry-form ::placeholder {
    color: #526575;
    opacity: 1;
}

body.home.modern a:focus-visible,
body.home.modern button:focus-visible {
    outline-color: #dc7918;
}

body.home.modern .site-footer {
    background: #eef4f8;
    color: #122b3d;
}

@media (hover: hover) {
    body.home.modern .modern-benefits .benefits-grid > div:hover {
        background: #16394f;
    }

    body.home.modern .application-card:hover {
        border-color: #075a82;
        box-shadow: 0 16px 32px #0b23351c;
    }

    body.home.modern .product-tabs button:hover:not([aria-selected="true"]) {
        background: #fff;
        color: #075a82;
    }
}

@media (max-width: 700px) {
    body.home.modern .modern-hero-shade {
        background: linear-gradient(90deg, #081d30ed, #0b2943d9), linear-gradient(0deg, #081d3080, transparent 75%);
    }
}

@media (max-width: 650px) {
    body.home.modern .modern-tech-media {
        background: linear-gradient(180deg, #0b2335 0%, #123e5a 45%, #deedf5 45%, #c2dbe9 100%);
    }
}