:root {
    --retro-navy: #003399;
    --retro-navy-dark: #001f5c;
    --retro-link: var(--retro-navy);
    --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. Shown on every page. */
.bg-network {
    display: block;
    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.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--retro-navy);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    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: 0 3px 8px rgba(0, 0, 0, 0.35);
}

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

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

/* --- 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);
}

/* --- Softly-bordered modules with contemporary corner radii and shadows --- */
.card,
.btn,
.form-control,
.alert,
.list-group-item {
    border-radius: 8px !important;
}

.card,
.hero,
.alert,
.list-group-item {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

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

/* Buttons: subtle gradient fill with a soft, conventional drop shadow */
.btn {
    border-width: 1px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.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 0 1px 3px rgba(0, 0, 0, 0.15);
}

.form-control:focus {
    border-color: var(--retro-navy);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(0, 51, 153, 0.2);
}

.list-group-item {
    background-color: rgba(255, 255, 255, 0.7) !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.7) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--retro-navy);
    border-top: 5px solid var(--retro-navy);
    border-radius: 8px;
}

/* 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: 0 12px 28px rgba(0, 0, 0, 0.35) !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;
    }
}