:root {
    --navy-center: #041a31;
    --navy-mid: #082844;
    --navy-edge: #123d60;

    --gold: #cf9a37;
    --white: #ffffff;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--navy-center);
}


/* SPLASH */

.splash {
    position: relative;

    min-height: 100vh;

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

    padding: 50px 24px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 42%,
            var(--navy-center) 0%,
            var(--navy-center) 34%,
            var(--navy-mid) 68%,
            var(--navy-edge) 100%
        );
}


/* VERY SUBTLE EDGE DEPTH */

.splash::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            transparent 38%,
            rgba(0,0,0,.08) 72%,
            rgba(0,0,0,.18) 100%
        );

    pointer-events: none;
}


/* CONTENT */

.splash-inner {
    position: relative;
    z-index: 2;

    width: min(100%, 760px);

    text-align: center;
}


/* LOGO */

.logo {
    display: block;

    width: min(100%, 620px);

    margin: 0 auto;

    object-fit: contain;

    filter:
        drop-shadow(0 18px 42px rgba(0,0,0,.22));
}


/* DIVIDER */

.rule {
    width: 72px;
    height: 2px;

    margin: 28px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );
}


/* INTRO */

.intro {
    max-width: 600px;

    margin: 0 auto;

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

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(1.1rem, 2vw, 1.4rem);

    line-height: 1.65;
}


/* SERVICES */

.services {
    margin: 28px 0 0;

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

    font-size: .72rem;
    font-weight: 700;

    letter-spacing: .17em;
    text-transform: uppercase;
}

.services i {
    margin: 0 8px;

    color: var(--gold);

    font-style: normal;
}


/* MOBILE */

@media (max-width: 640px) {

    .splash {
        padding: 34px 22px;
    }

    .logo {
        width: min(100%, 440px);
    }

    .intro {
        font-size: 1.05rem;
    }

    .services {
        line-height: 2;
    }

}