:root {

    --navy: #0c1a2e;

    --navy-mid: #13243d;

    --ink: #1a2332;

    --muted: #5c6778;

    --line: #e4e8ee;

    --paper: #f6f7f9;

    --white: #ffffff;

    --accent: #1d4e89;

    --accent-hover: #163d6b;

    --gold: #b08d57;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: "Source Sans 3", system-ui, sans-serif;

    color: var(--ink);

    background: var(--white);

    line-height: 1.65;

}



h1,

h2,

h3,

h4,

.display-font {

    font-family: "Cormorant Garamond", Georgia, serif;

    letter-spacing: -0.02em;

    color: var(--navy);

}



.navbar-zerix {

    background: var(--navy);

    padding: 0.9rem 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

}



.navbar-zerix .navbar-brand {

    font-family: "Source Sans 3", sans-serif;

    font-weight: 700;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    font-size: 0.92rem;

    color: var(--white);

}



.navbar-zerix .navbar-brand:hover,

.navbar-zerix .navbar-brand:focus {

    color: var(--white);

}



.brand-mark {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 28px;

    height: 28px;

    margin-right: 0.65rem;

    border: 1px solid var(--gold);

    color: var(--gold);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0;

}



.navbar-zerix .nav-link {

    color: rgba(255, 255, 255, 0.72);

    font-size: 0.92rem;

    font-weight: 500;

    letter-spacing: 0.02em;

    padding: 0.45rem 0.85rem !important;

}



.navbar-zerix .nav-link:hover,

.navbar-zerix .nav-link.active {

    color: var(--white);

}



.navbar-zerix .nav-link.active {

    position: relative;

}



.navbar-zerix .nav-link.active::after {

    content: "";

    position: absolute;

    left: 0.85rem;

    right: 0.85rem;

    bottom: 0.15rem;

    height: 1px;

    background: var(--gold);

}



.navbar-toggler {

    border-color: rgba(255, 255, 255, 0.25);

}



.navbar-toggler-icon {

    filter: invert(1);

}



.hero {

    background: linear-gradient(165deg, var(--navy) 0%, var(--navy-mid) 62%, #1a3358 100%);

    color: var(--white);

    padding: 7.5rem 0 6.5rem;

    position: relative;

    overflow: hidden;

}



.hero::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(90deg, transparent 0, rgba(176, 141, 87, 0.08) 50%, transparent 100%),

        repeating-linear-gradient(

            135deg,

            rgba(255, 255, 255, 0.015) 0 1px,

            transparent 1px 18px

        );

    pointer-events: none;

}



.hero .container {

    position: relative;

    z-index: 1;

}



.eyebrow {

    display: inline-block;

    color: var(--gold);

    font-size: 0.78rem;

    font-weight: 600;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    margin-bottom: 1rem;

}



.hero h1 {

    color: var(--white);

    font-size: clamp(2.6rem, 5vw, 4.4rem);

    line-height: 1.08;

    margin-bottom: 1.25rem;

}



.hero p.lead {

    color: rgba(255, 255, 255, 0.78);

    max-width: 34rem;

    font-size: 1.15rem;

}



.btn-zerix {

    background: var(--accent);

    color: var(--white);

    border: 0;

    border-radius: 2px;

    padding: 0.7rem 1.45rem;

    font-weight: 600;

    letter-spacing: 0.02em;

}



.btn-zerix:hover,

.btn-zerix:focus {

    background: var(--accent-hover);

    color: var(--white);

}



.btn-outline-light-zerix {

    border: 1px solid rgba(255, 255, 255, 0.35);

    color: var(--white);

    border-radius: 2px;

    padding: 0.7rem 1.45rem;

    font-weight: 600;

}



.btn-outline-light-zerix:hover {

    background: var(--white);

    color: var(--navy);

    border-color: var(--white);

}



.btn-outline-zerix {

    border: 1px solid var(--line);

    color: var(--navy);

    background: transparent;

    border-radius: 2px;

    padding: 0.7rem 1.45rem;

    font-weight: 600;

}



.btn-outline-zerix:hover,

.btn-outline-zerix:focus {

    background: var(--navy);

    color: var(--white);

    border-color: var(--navy);

}



.website-link {

    display: inline-flex;

    align-items: center;

    gap: 0.45rem;

    color: var(--accent);

    font-weight: 600;

    font-size: 1.05rem;

    text-decoration: underline;

    text-underline-offset: 0.2em;

}



.website-link:hover,

.website-link:focus {

    color: var(--accent-hover);

}



.section {

    padding: 5.5rem 0;

}



.section-muted {

    background: var(--paper);

}



.section-title {

    font-size: clamp(2rem, 3.4vw, 2.75rem);

    margin-bottom: 0.85rem;

}



.section-intro {

    color: var(--muted);

    max-width: 38rem;

}



.rule {

    width: 48px;

    height: 2px;

    background: var(--gold);

    border: 0;

    margin: 0 0 1.5rem;

    opacity: 1;

}



.card-zerix {

    border: 1px solid var(--line);

    border-radius: 2px;

    background: var(--white);

    box-shadow: none;

    height: 100%;

    transition: border-color 0.2s ease, transform 0.2s ease;

}



.card-zerix:hover {

    border-color: #c9d2de;

    transform: translateY(-2px);

}



.card-zerix .card-body {

    padding: 1.75rem;

}



.card-kicker {

    color: var(--gold);

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    margin-bottom: 0.55rem;

}



.stat-row {

    border-top: 1px solid var(--line);

    border-bottom: 1px solid var(--line);

}



.stat-item {

    padding: 2rem 0;

}



.stat-item + .stat-item {

    border-left: 1px solid var(--line);

}



.stat-number {

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 2.4rem;

    color: var(--navy);

    line-height: 1;

    margin-bottom: 0.35rem;

}



.stat-label {

    color: var(--muted);

    font-size: 0.92rem;

    margin: 0;

}



.page-header {

    background: var(--navy);

    color: var(--white);

    padding: 4.5rem 0 3.5rem;

}



.page-header h1 {

    color: var(--white);

    margin-bottom: 0.6rem;

}



.page-header p {

    color: rgba(255, 255, 255, 0.72);

    max-width: 38rem;

    margin: 0;

}



.project-panel {

    border: 1px solid var(--line);

    background: var(--white);

    padding: 2.5rem;

}



.project-panel h2 {

    font-size: 2.15rem;

}



.project-panel a:not(.btn) {

    color: var(--accent);

    text-decoration: none;

    font-weight: 600;

}



.project-panel a:not(.btn):hover {

    color: var(--accent-hover);

    text-decoration: underline;

}



.badge-zerix {

    background: var(--paper);

    color: var(--accent);

    border: 1px solid var(--line);

    border-radius: 2px;

    font-weight: 600;

    letter-spacing: 0.04em;

}



.vacature-item {

    border: 1px solid var(--line);

    padding: 2rem;

    background: var(--white);

    height: 100%;

}



.vacature-item h3 {

    font-size: 1.65rem;

    margin-bottom: 0.75rem;

}



.notice {

    border-left: 3px solid var(--gold);

    background: var(--paper);

    padding: 1.15rem 1.25rem;

}



.contact-box {

    background: var(--navy);

    color: var(--white);

    padding: 2.4rem;

}



.contact-box h2,

.contact-box a {

    color: var(--white);

}



.contact-box a:hover {

    color: var(--gold);

}



.contact-meta {

    color: rgba(255, 255, 255, 0.72);

}



.form-control,

.form-select {

    border-radius: 2px;

    border-color: #d5dbe3;

    padding: 0.7rem 0.85rem;

}



.form-control:focus,

.form-select:focus {

    border-color: var(--accent);

    box-shadow: 0 0 0 0.2rem rgba(29, 78, 137, 0.15);

}



.footer-zerix {

    background: var(--navy);

    color: rgba(255, 255, 255, 0.62);

    padding: 3rem 0 1.75rem;

    font-size: 0.92rem;

}



.footer-zerix a {

    color: rgba(255, 255, 255, 0.78);

    text-decoration: none;

}



.footer-zerix a:hover {

    color: var(--white);

}



.footer-brand {

    color: var(--white);

    letter-spacing: 0.16em;

    text-transform: uppercase;

    font-weight: 700;

    font-size: 0.85rem;

}



.footer-bottom {

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    margin-top: 2rem;

    padding-top: 1.25rem;

}



@media (max-width: 767.98px) {

    .stat-item + .stat-item {

        border-left: 0;

        border-top: 1px solid var(--line);

    }



    .hero {

        padding: 5rem 0 4.25rem;

    }



    .project-panel,

    .contact-box {

        padding: 1.6rem;

    }

}