@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600&family=Space+Grotesk:wght@600;700&display=swap');

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

:root {
        --brand-navy: #0b2942;
        --brand-blue: #146bde;
        --brand-coral: #ff5c45;
        --brand-white: #ffffff;
        --brand-snow: #f0f7fa;
        --brand-graphite: #2b3c47;
        --brand-border: #d5e4ea;
        --spark-cyan: #00d9ea;
        --spark-yellow: #ffd21f;
        --spark-violet: #7c4dff;
        --spark-lime: #91e43a;
        --font-heading: "Space Grotesk", "DejaVu Sans", sans-serif;
        --font-body: "Source Sans 3", "DejaVu Sans", sans-serif;
        --brand-shadow: 0 1rem 3rem rgba(11, 41, 66, 0.14);
    }

    *, *::before, *::after { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
        background: var(--brand-snow);
        color: var(--brand-graphite);
        font-family: var(--font-body);
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4, h5, h6 {
        color: var(--brand-navy);
        font-family: var(--font-heading);
        font-weight: 700;
        letter-spacing: -0.025em;
        line-height: 1.15;
    }

    h1 { font-size: clamp(2.8rem, 7vw, 5.5rem); max-width: 58rem; }
    h2 { font-size: clamp(1.8rem, 4vw, 3rem); }

    a { color: var(--brand-blue); }
    a:hover { color: var(--brand-navy); }

    .site-shell { min-height: 100vh; display: flex; flex-direction: column; }

    .site-navbar {
        background: rgba(255, 255, 255, 0.94);
        border-bottom: 1px solid rgba(213, 228, 234, 0.9);
        padding: 1.15rem 0;
        position: relative;
        z-index: 1030;
        backdrop-filter: blur(1rem);
    }

    .navbar-brand { align-items: center; display: flex; gap: 0.7rem; }
    .navbar-brand:hover { opacity: 0.86; }
    .brand-icon { height: 2.35rem; object-fit: contain; width: 2.35rem; }
    .brand-wordmark { height: 1.55rem; object-fit: contain; width: auto; }
    .site-navbar .nav-link { color: var(--brand-graphite); font-size: 1rem; font-weight: 600; padding: 0.55rem 0.75rem; }
    .site-navbar .nav-link:hover, .site-navbar .nav-link.active { color: var(--brand-blue); }
    .site-navbar .navbar-toggler { border: 1px solid var(--brand-border); padding: 0.45rem 0.65rem; }
    .site-navbar .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(20, 107, 222, 0.2); }
    .site-navbar .navbar-toggler-icon { filter: none; }

    @media (min-width: 992px) {
        .site-navbar { position: sticky; top: 0; }
    }

    .btn-primary {
        --bs-btn-bg: var(--brand-blue);
        --bs-btn-border-color: var(--brand-blue);
        --bs-btn-hover-bg: var(--brand-navy);
        --bs-btn-hover-border-color: var(--brand-navy);
        border-radius: 0.35rem;
        font-family: var(--font-heading);
        font-weight: 600;
        padding: 0.7rem 1.2rem;
    }

    .nav-cta { color: #fff !important; margin-left: 0.5rem; }
    .site-main { flex: 1; }
    .site-container { padding-bottom: 6rem; padding-top: 5rem; }

    .home-page { margin: 0 auto; max-width: 72rem; }
    .home-page section { margin-top: 6rem; max-width: 58rem; scroll-margin-top: 7rem; }
    .home-page .hero-section, .content-page .page-hero { border: 0; border-radius: 0; box-shadow: none; margin-left: calc(50% - 50vw); margin-top: -5rem; max-width: none; min-height: 39rem; overflow: hidden; padding: 4rem max(1.5rem, calc((100vw - 72rem) / 2 + 4rem)) 3.5rem; position: relative; width: 100vw; }
    .hero-image, .hero-overlay { height: 100%; inset: 0; position: absolute; width: 100%; }
    .hero-image { object-fit: cover; object-position: center; }
    .hero-overlay { background: linear-gradient(90deg, rgba(240, 247, 250, 0.98) 0%, rgba(240, 247, 250, 0.94) 38%, rgba(240, 247, 250, 0.55) 68%, rgba(11, 41, 66, 0.3) 100%); }
    .page-hero .hero-overlay { background: linear-gradient(90deg, rgba(11, 41, 66, 0.96) 0%, rgba(11, 41, 66, 0.89) 42%, rgba(11, 41, 66, 0.52) 68%, rgba(11, 41, 66, 0.12) 100%); }
    .hero-content { max-width: 42rem; position: relative; z-index: 1; }
    .hero-symbol { height: 4.5rem; margin-bottom: 2rem; width: 4.5rem; }
    .eyebrow { color: var(--brand-blue); font-family: var(--font-heading); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; margin-bottom: 1.5rem; text-transform: uppercase; }
    .hero-section h1 { margin-bottom: 1.75rem; }
    .hero-content > p:not(.eyebrow) { color: var(--brand-graphite); font-size: clamp(1.15rem, 2vw, 1.4rem); max-width: 49rem; }
    .page-hero h1 { color: var(--brand-white); margin-bottom: 1.75rem; }
    .page-hero .eyebrow { color: var(--brand-white); }
    .page-hero .hero-content > p:not(.eyebrow) { color: rgba(255, 255, 255, 0.88); }

    .home-page section:not(.hero-section) { border-top: 1px solid var(--brand-border); padding-top: 2rem; }
    .home-page section h2 { margin-bottom: 1.25rem; }
    .home-page section h2, .content-page section h2 { border-left: 0.35rem solid var(--brand-coral); padding-left: 0.85rem; }
    .home-page section p { max-width: 52rem; }
    .home-page ul { display: grid; gap: 0.75rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 1.75rem 0 0; padding: 0; }
    .home-page li { background: var(--brand-white); border: 1px solid var(--brand-border); border-radius: 0.35rem; box-shadow: 0 0.35rem 1rem rgba(11, 41, 66, 0.06); padding: 1rem 1.15rem 1rem 2.75rem; position: relative; }
    .home-page li::before { background: var(--brand-coral); border-radius: 50%; content: ""; height: 0.5rem; left: 1.15rem; position: absolute; top: 1.55rem; width: 0.5rem; }
    .content-page { margin: 0 auto; max-width: 68rem; }
    .content-page-header { max-width: 56rem; padding: 2rem 0 1rem; }
    .content-page-header h1 { margin-bottom: 1.5rem; }
    .content-page-header .lead { color: var(--brand-graphite); font-size: clamp(1.15rem, 2vw, 1.4rem); max-width: 49rem; }
    .content-page section { border-top: 1px solid var(--brand-border); margin-top: 4rem; max-width: 58rem; padding-top: 2rem; }
    .content-page section h2 { margin-bottom: 1.25rem; }
    .content-page section p { max-width: 52rem; }
    .content-page ul { display: grid; gap: 0.75rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 1.75rem 0 0; padding: 0; }
    .content-page li { background: var(--brand-white); border: 1px solid var(--brand-border); border-radius: 0.35rem; box-shadow: 0 0.35rem 1rem rgba(11, 41, 66, 0.06); padding: 1rem 1.15rem 1rem 2.75rem; position: relative; }
    .content-page li::before { background: var(--brand-coral); border-radius: 50%; content: ""; height: 0.5rem; left: 1.15rem; position: absolute; top: 1.55rem; width: 0.5rem; }
    .content-page > p:last-child { margin-top: 3rem; }
    .site-footer { background: var(--brand-navy); border-top: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); font-size: 0.95rem; padding: 1.5rem 0; }
    .footer-brand { height: 1.5rem; width: auto; }

    #blazor-error-ui {
        background: #fff3cd;
        border-top: 3px solid #ffc107;
        bottom: 0;
        box-shadow: 0 -0.25rem 1rem rgba(21, 18, 56, 0.12);
        color: #664d03;
        display: none;
        left: 0;
        padding: 0.75rem 1.25rem;
        position: fixed;
        width: 100%;
        z-index: 2000;
    }

    #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; }

    .loading-progress { display: block; height: 8rem; inset: 20vh 0 auto; margin: 0 auto; position: absolute; width: 8rem; }
    .loading-progress circle { fill: none; stroke: var(--brand-border); stroke-width: 0.6rem; transform: rotate(-90deg); transform-origin: 50% 50%; }
    .loading-progress circle:last-child { stroke: var(--brand-blue); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; }
    .loading-progress-text { font-weight: 700; inset: calc(20vh + 3.25rem) 0 auto; position: absolute; text-align: center; }
    .loading-progress-text::after { content: var(--blazor-load-percentage-text, "Loading"); }

    .blazor-error-boundary { background-color: #7c2d58; color: white; padding: 1rem; }

    @media (max-width: 767.98px) {
        .site-container { padding-bottom: 4rem; padding-top: 2rem; }
        .home-page .hero-section, .content-page .page-hero { min-height: 42rem; padding: 2.5rem 1.5rem; }
        .hero-overlay { background: linear-gradient(180deg, rgba(240, 247, 250, 0.98) 0%, rgba(240, 247, 250, 0.94) 48%, rgba(11, 41, 66, 0.4) 100%); }
        .page-hero .hero-overlay { background: linear-gradient(180deg, rgba(11, 41, 66, 0.94) 0%, rgba(11, 41, 66, 0.87) 48%, rgba(11, 41, 66, 0.36) 100%); }
        .home-page section { margin-top: 4rem; }
        .home-page ul { grid-template-columns: 1fr; }
        .content-page ul { grid-template-columns: 1fr; }
        .nav-cta { display: inline-block; margin: 0.5rem 0 0; }
    }