/* ===================================================================
   Stonecliffe Developments Inc - house style
   Monochrome | Arial | generous whitespace
   Ink #111111 . Grey #595959 . Hairline #CCCCCC
   =================================================================== */

:root {
    --sc-ink: #111111;
    --sc-grey: #595959;
    --sc-hair: #CCCCCC;
    --sc-bg: #ffffff;
    --sc-logo: url('/images/stonecliffe-logo.png');
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--sc-ink);
    background: var(--sc-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--sc-ink);
    font-weight: 700;
    letter-spacing: .2px;
}

a {
    color: var(--sc-ink);
    text-decoration: none;
}

    a:hover {
        color: var(--sc-grey);
        text-decoration: underline;
    }

.text-muted {
    color: var(--sc-grey) !important;
}

/* ---- Navbar ---- */
.navbar {
    background: #fff !important;
    border-bottom: 1px solid var(--sc-hair);
    box-shadow: none !important;
}

.sc-logo {
    display: inline-block;
    width: 188px;
    height: 29px;
    background: var(--sc-logo) no-repeat left center;
    background-size: contain;
}

.navbar .nav-link {
    color: var(--sc-ink) !important;
    font-weight: 600;
}

    .navbar .nav-link:hover {
        color: var(--sc-grey) !important;
    }

/* ---- Buttons (monochrome) ---- */
.btn-primary {
    background: var(--sc-ink);
    border-color: var(--sc-ink);
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        background: #000 !important;
        border-color: #000 !important;
    }

.btn-outline-primary {
    color: var(--sc-ink);
    border-color: var(--sc-ink);
}

    .btn-outline-primary:hover {
        background: var(--sc-ink);
        border-color: var(--sc-ink);
        color: #fff;
    }

.btn-lg {
    padding: .6rem 1.6rem;
}

main {
    flex: 1 0 auto;
}

/* ---- Hero ---- */
.sc-hero {
    padding: 84px 0 60px;
    border-bottom: 1px solid var(--sc-hair);
}

.sc-hero-logo {
    display: inline-block;
    width: 360px;
    max-width: 84%;
    height: 56px;
    background: var(--sc-logo) no-repeat center;
    background-size: contain;
}

.sc-hero h1 {
    font-size: 2.3rem;
    margin-top: 26px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.sc-tagline {
    color: var(--sc-grey);
    font-style: italic;
    font-size: 1.18rem;
    margin-top: 6px;
}

.sc-lead {
    color: var(--sc-grey);
    max-width: 640px;
    margin: 20px auto 0;
    font-size: 1.02rem;
}

/* ---- Stage cards ---- */
.sc-section {
    padding: 56px 0;
}

.sc-stage {
    padding: 8px 14px;
}

    .sc-stage h5 {
        letter-spacing: .5px;
    }

    .sc-stage .sc-num {
        color: var(--sc-grey);
        font-weight: 700;
    }

/* ---- Auth pages ---- */
label {
    color: var(--sc-grey);
}

.form-control:focus {
    border-color: var(--sc-ink);
    box-shadow: 0 0 0 .15rem rgba(17,17,17,.12);
}

/* ---- Footer ---- */
.sc-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--sc-hair);
    background: #fff;
    padding: 22px 0 26px;
    text-align: center;
}

.sc-foot-tag {
    color: var(--sc-ink);
    font-style: italic;
    font-size: .92rem;
}

.sc-foot-addr {
    color: var(--sc-grey);
    font-size: .76rem;
    margin-top: 6px;
}

    .sc-foot-addr a {
        color: var(--sc-grey);
    }