:root {
    --retro-navy: #003399;
    --retro-navy-dark: #001f5c;
    --retro-link: #0000cc;
    --retro-text: #111111;
}

html {
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--retro-text);
    background-color: #000000;
    overflow-x: hidden;
}

main {
    flex: 1;
}

/* Animated network graphic, inline SVG (not a CSS background-image) so its
   CSS animations actually run — browsers commonly freeze animations on SVGs
   loaded purely as background images/<img> sources. */
.bg-network {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.bg-network svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Boxed panel for page headings/intros that would otherwise sit directly on the
   tinted network background — matches the card/hero flat-bordered treatment. */
.panel {
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 2px solid var(--retro-navy);
    box-shadow: 8px 8px 14px rgba(0, 0, 0, 0.55);
    padding: 2rem;
}

.process-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    background: linear-gradient(to bottom, #3366d9 0%, var(--retro-navy) 55%, #002670 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
}

a {
    color: var(--retro-link);
    text-decoration: underline;
}

a:hover {
    color: var(--retro-navy-dark);
}

/* --- Navbar / logo wordmark --- */
.navbar {
    background-color: var(--retro-navy) !important;
    border-bottom: 3px solid var(--retro-navy-dark);
    border-radius: 0;
}

.navbar-brand {
    font-size: 1.5rem;
    display: inline-block;
    transform: skewX(-3deg);
    text-decoration: none !important;
}

.navbar-brand .logo-mark {
    font-weight: 800;
    font-style: italic;
    letter-spacing: -0.5px;
    color: #ffffff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}

.navbar-brand .logo-sub {
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.5px;
    color: #cfe0ff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}

.nav-link {
    text-decoration: none !important;
}

.nav-link:hover {
    text-decoration: underline !important;
}

/* --- Footer --- */
footer {
    background-color: var(--retro-navy-dark) !important;
    border-top: 3px solid var(--retro-navy);
}

/* --- Flat, hard-bordered modules (no rounded corners, no soft shadows) --- */
.card,
.btn,
.form-control,
.alert,
.list-group-item {
    border-radius: 0 !important;
}

.card,
.hero,
.alert,
.list-group-item {
    box-shadow: 8px 8px 14px rgba(0, 0, 0, 0.55) !important;
}

.card {
    background-color: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 2px solid var(--retro-navy) !important;
}

/* Beveled 3D buttons: gradient fill + inset highlight/shade lines + a strong drop shadow */
.btn {
    border-width: 1px;
    box-shadow:
        6px 6px 10px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -2px 3px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.1s ease, transform 0.1s ease, background 0.15s ease;
}

.btn:active {
    box-shadow:
        1px 1px 3px rgba(0, 0, 0, 0.55),
        inset 0 2px 4px rgba(0, 0, 0, 0.4);
    transform: translate(4px, 4px);
}

.btn-primary {
    background: linear-gradient(to bottom, #3366d9 0%, var(--retro-navy) 55%, #002670 100%);
    border-color: var(--retro-navy-dark);
}

.btn-primary:hover {
    background: linear-gradient(to bottom, #2a58c0 0%, var(--retro-navy-dark) 55%, #001a4d 100%);
    border-color: var(--retro-navy-dark);
}

.btn-outline-secondary {
    background: linear-gradient(to bottom, #ffffff 0%, #dbe4f7 100%);
    color: var(--retro-navy);
    border-color: var(--retro-navy);
}

.btn-outline-secondary:hover {
    background: linear-gradient(to bottom, #3366d9 0%, var(--retro-navy) 55%, #002670 100%);
    border-color: var(--retro-navy);
    color: #ffffff;
}

.form-control {
    border: 1px solid var(--retro-navy-dark);
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.3);
}

.form-control:focus {
    border-color: var(--retro-navy);
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(0, 51, 153, 0.25);
}

.list-group-item {
    background-color: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--retro-navy-dark) !important;
}

/* --- Hero banner module --- */
.hero {
    background-color: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 3px solid var(--retro-navy);
    border-top: 8px solid var(--retro-navy);
}

/* Honeypot anti-spam field: present in the DOM for bots to fill in,
   but moved off-screen and unreachable by tab so real visitors never see it. */
.honeypot-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 0;
    overflow: hidden;
}

/* Home page entrance animations */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero > * {
    opacity: 0;
    animation: fadeSlideUp 0.6s ease-out forwards;
}

.hero > *:nth-child(1) { animation-delay: 0.05s; }
.hero > *:nth-child(2) { animation-delay: 0.15s; }
.hero > *:nth-child(3) { animation-delay: 0.25s; }
.hero > *:nth-child(4) { animation-delay: 0.35s; }

.service-card {
    opacity: 0;
    animation: fadeSlideUp 0.6s ease-out forwards;
    animation-delay: 0.45s;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.row > div:nth-child(2) .service-card { animation-delay: 0.55s; }
.row > div:nth-child(3) .service-card { animation-delay: 0.65s; }

.service-card:hover {
    transform: translateY(-6px);
    border-color: var(--retro-navy-dark) !important;
    box-shadow: 10px 16px 18px rgba(0, 0, 0, 0.6) !important;
}

/* Landing area: hero + scroll prompt fill the viewport on load, so the
   service-story sections below start off-screen until the user scrolls. */
.hero-landing {
    min-height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.scroll-prompt {
    text-align: center;
    margin-top: 1.5rem;
}

.scroll-prompt-text {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.85), 0 0 22px rgba(143, 178, 255, 0.6);
    animation: nodeGlowPulse 2.2s ease-in-out infinite;
}

.scroll-arrow svg {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 16px rgba(143, 178, 255, 0.6));
    animation: nodeGlowPulse 2.2s ease-in-out infinite;
    animation-delay: 0.15s;
}

@keyframes nodeGlowPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Full-bleed scroll-triggered service sections: break out of the container to
   span the full viewport width, background fades in (still translucent) and
   the text floats up into view as each section scrolls into place. */
.service-story {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    min-height: 180vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.service-story-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.4s ease;
}

/* On narrow screens a 180vh section is far taller relative to its width than
   these landscape photos are, so "cover" would crop most of the width away
   to fill that height. Rather than leaving empty space around a
   full-width image (worse), shrink the section itself so "cover" only
   needs a much less aggressive crop. */
@media (max-width: 767px) {
    .service-story {
        min-height: 100vh;
    }
}

.service-story.is-active .service-story-bg {
    opacity: 0.6;
}

/* Ombre blend: each section's image fades to solid black at its top/bottom
   edges (with a navy tint through the visible middle), so consecutive
   sections melt into one another instead of meeting at a hard seam. */
.service-story-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        #000000 0%,
        rgba(0, 51, 153, 0.25) 18%,
        rgba(0, 51, 153, 0.25) 82%,
        #000000 100%);
}

.service-story-text {
    position: relative;
    z-index: 1;
    max-width: 700px;
    text-align: center;
    padding: 2rem;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s ease, transform 0.9s ease;
    transition-delay: 0.3s;
}

.service-story.is-active .service-story-text {
    opacity: 1;
    transform: translateY(0);
}

.service-story-text h3 {
    color: #ffffff;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.85);
    margin-bottom: 0.75rem;
}

.service-story-text p {
    color: #f2f2f2;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.85);
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-prompt-text,
    .scroll-arrow svg {
        animation: none;
    }

    .service-story-bg,
    .service-story-text {
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero > *,
    .service-card {
        animation: none;
        opacity: 1;
    }

    .service-card {
        transition: none;
    }
}