/* Setuprise brand: red, white, black and yellow. Overrides the Niva child homepage concept. */
:root {
    --black: #090909;
    --navy: #171717;
    --cream: #ffffff;
    --lime: #ffd21a;
    --white: #ffffff;
    --red: #c8102e;
    --yellow: #ffd21a;
}

body.setuprise-home { background: #fff; color: #252525; }
body.setuprise-home h2, body.setuprise-home h3 { color: #151515; }

/* Red masthead, white navigation, black mark with yellow detail. */
body.setuprise-home .sp-top { background: var(--red); color: #fff; }
body.setuprise-home .sp-top a { color: #fff; }
body.setuprise-home .sp-header { background: #fff; border-bottom: 1px solid #e6e6e6; }
body.setuprise-home .sp-logo, body.setuprise-home .sp-nav nav a { color: #111; }
body.setuprise-home .sp-logo:hover, body.setuprise-home .sp-nav nav a:hover { color: var(--red); }
/* Niva's default navigation background must not leak into the custom header. */
body.setuprise-home .sp-header .sp-nav nav {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
}
body.setuprise-home .sp-header .sp-nav nav a {
    display: inline-flex;
    align-items: center;
    background: transparent !important;
    color: #111 !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
}
body.setuprise-home .sp-header .sp-nav nav a:hover { color: var(--red) !important; }
body.setuprise-home .sp-symbol { background: #111; color: #fff; }
body.setuprise-home .sp-symbol span, body.setuprise-home .sp-footer strong span { color: var(--yellow); }
body.setuprise-home .sp-button {
    background: var(--red);
    color: #fff !important;
    transition: background .2s ease, transform .2s ease;
}
body.setuprise-home .sp-button:hover { background: #a30a23; transform: translateY(-2px); }
body.setuprise-home a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }

/* Locally saved free Unsplash image. The dark overlay keeps the title legible. */
body.setuprise-home .sp-hero {
    isolation: isolate;
    background: #080808;
}
body.setuprise-home .sp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border: 0;
    transform: none;
    background: url("./assets/security-rooftop-unsplash.jpg") center 43% / cover no-repeat;
    opacity: .92;
    z-index: -2;
}
body.setuprise-home .sp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, .97) 0%,
        rgba(0, 0, 0, .91) 36%,
        rgba(0, 0, 0, .61) 62%,
        rgba(0, 0, 0, .18) 100%);
    z-index: -1;
}
body.setuprise-home .sp-hero-inner, body.setuprise-home .sp-hero-side { position: relative; z-index: 1; }
body.setuprise-home .sp-hero em { color: var(--yellow); }
body.setuprise-home .sp-eyebrow, body.setuprise-home .sp-textlink span { color: var(--yellow); }
body.setuprise-home .sp-line { background: var(--red); }
body.setuprise-home .sp-textlink { color: #fff; }
body.setuprise-home .sp-hero p { color: #eee; }
body.setuprise-home .sp-strip { background: var(--yellow); color: #111; }

/* White content, punchy red subheadings, restrained yellow separators. */
body.setuprise-home .sp-kicker { color: var(--red); }
body.setuprise-home .sp-intro h2 em,
body.setuprise-home .sp-services h2 em,
body.setuprise-home .sp-contact h2 em { color: var(--red); }
body.setuprise-home .sp-intro-right { color: #606060; }
body.setuprise-home .sp-lead { color: #191919; }
body.setuprise-home .sp-inline {
    color: #111;
    border-bottom-color: var(--yellow);
}
body.setuprise-home .sp-inline:hover { color: var(--red); }
body.setuprise-home .sp-services { background: #f4f4f4; }
body.setuprise-home .sp-card { background: #fff; }
body.setuprise-home .sp-card:hover { border-bottom-color: var(--yellow); }
body.setuprise-home .sp-card-icon { color: var(--red); }
body.setuprise-home .sp-card h3 { color: #101010; }
body.setuprise-home .sp-card a { color: var(--red); }
body.setuprise-home .sp-card a:hover { color: #151515; }

/* The dark closing sections balance the red and yellow accent colours. */
body.setuprise-home .sp-approach {
    background: radial-gradient(circle at 90% 35%, #3b141b 0, transparent 52%), #111;
    border-top: 8px solid var(--red);
}
body.setuprise-home .sp-approach h2 { color: #fff; }
body.setuprise-home .sp-approach h2 em { color: var(--yellow); }
body.setuprise-home .sp-approach .sp-kicker { color: var(--yellow); }
body.setuprise-home .sp-approach p { color: #ddd; }
body.setuprise-home .sp-email { color: #161616; border-bottom-color: var(--yellow); }
body.setuprise-home .sp-email:hover { color: var(--red); }
body.setuprise-home .sp-footer { background: #080808; color: #ddd; }
body.setuprise-home .sp-footer a { color: #fff; }
body.setuprise-home .sp-footer a:hover { color: var(--yellow); }
body.setuprise-home .sp-photo-credit a { color: #ddd; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 620px) {
    body.setuprise-home .sp-hero::before { background-position: 62% center; }
    body.setuprise-home .sp-hero::after {
        background: linear-gradient(90deg, rgba(0,0,0,.91), rgba(0,0,0,.65));
    }
    body.setuprise-home .sp-photo-credit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    body.setuprise-home .sp-button { transition: none; }
}