:root {
    --navy: #151d31;
    --navy-dark: #101728;
    --blue: #0055ff;
    --blue-light: #eef3ff;

    --text: #182235;
    --text-light: #536070;
    --muted: #7a8593;

    --background: #ffffff;
    --background-soft: #f5f7fa;

    --border: #d9dee6;
    --border-light: #e8ebef;

    --max-width: 1180px;
}


/* --------------------------------------------------
   RESET
-------------------------------------------------- */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 16px;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}


/* --------------------------------------------------
   HEADER
-------------------------------------------------- */

.site-header {
    width: 100%;
}


/* Main navy area */

.header-main {
    background: var(--navy);
}


.header-main {
    min-height: 103px;
    padding: 0 30px;
}


.brand {
    max-width: var(--max-width);
    min-height: 103px;
    margin: 0 auto;

    display: flex;
    align-items: center;

    text-decoration: none;
}


/* Logo */

.brand-mark {
    width: 64px;
    height: 78px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}


.brand-mark img {
    width: 58px;
    height: auto;
    max-height: 78px;

    object-fit: contain;
}


/* Brand text */

.brand-text {
    margin-left: 18px;
}


.brand-name {
    color: #ffffff;

    font-size: 27px;
    line-height: 1.15;
    font-weight: 700;

    letter-spacing: -0.02em;
}


.brand-tagline {
    margin-top: 7px;

    color: #aeb7c7;

    font-size: 13px;
    line-height: 1.2;

    letter-spacing: 0.08em;
}


/* --------------------------------------------------
   NAVIGATION
-------------------------------------------------- */

.site-nav {
    background: #ffffff;
    border-bottom: 1px solid var(--border);
}


.nav-inner {
    max-width: var(--max-width);
    min-height: 60px;

    margin: 0 auto;
    padding: 0 30px;

    display: flex;
    align-items: center;
    gap: 38px;
}


.nav-inner a {
    position: relative;

    color: var(--blue);

    font-size: 15px;
    font-weight: 500;

    padding: 19px 0;
}


.nav-inner a:hover {
    color: #003db8;
}


.nav-inner a.active {
    color: var(--text);
}


.nav-inner a.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 3px;

    background: var(--blue);
}


/* --------------------------------------------------
   HERO
-------------------------------------------------- */

.hero {
    background: var(--background);
    border-bottom: 1px solid var(--border-light);
}


.hero-inner {
    max-width: var(--max-width);

    margin: 0 auto;
    padding: 105px 30px 100px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;

    gap: 90px;
    align-items: center;
}


.eyebrow,
.section-number {
    color: var(--blue);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.08em;
}


.hero h1 {
    max-width: 800px;

    margin: 18px 0 28px;

    color: var(--text);

    font-size: clamp(42px, 5.5vw, 70px);
    line-height: 1.06;

    font-weight: 700;

    letter-spacing: -0.045em;
}


.hero h1 span {
    color: var(--blue);
}


.hero-lead {
    max-width: 690px;

    margin: 0 0 18px;

    color: var(--text);

    font-size: 21px;
    line-height: 1.55;
}


.hero-copy > p:not(.hero-lead) {
    max-width: 690px;

    margin: 0;

    color: var(--text-light);

    font-size: 16px;
}


/* Hero links */

.hero-links {
    margin-top: 36px;

    display: flex;
    align-items: center;
    gap: 28px;

    flex-wrap: wrap;
}


.button {
    display: inline-block;

    padding: 12px 20px;

    background: var(--blue);
    color: #ffffff;

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

    font-size: 14px;
    font-weight: 600;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.button:hover {
    background: #0046d6;
    border-color: #0046d6;
}


.text-link {
    color: var(--blue);

    font-size: 14px;
    font-weight: 600;
}


.text-link:hover {
    text-decoration: underline;
}


/* --------------------------------------------------
   HERO INFORMATION PANEL
-------------------------------------------------- */

.hero-panel {
    border: 1px solid var(--border);

    background: var(--background-soft);
}


.panel-title {
    padding: 14px 17px;

    background: var(--navy);

    color: #ffffff;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 0.08em;
}


.panel-item {
    padding: 13px 17px;

    display: flex;
    justify-content: space-between;
    align-items: center;

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

    font-size: 12px;
}


.panel-item:last-child {
    border-bottom: 0;
}


.panel-item span {
    color: var(--text-light);
}


.panel-item strong {
    color: var(--blue);

    font-size: 11px;
    font-weight: 600;
}


/* --------------------------------------------------
   GENERAL SECTIONS
-------------------------------------------------- */

.section {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 100px 30px;
}


.section-grid {
    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    gap: 100px;
}


.section-heading h2,
.section-header h2 {
    margin: 17px 0 0;

    color: var(--text);

    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.12;

    letter-spacing: -0.035em;
}


.section-body {
    color: var(--text-light);

    font-size: 17px;
}


.section-body p {
    margin: 0 0 23px;
}


.section-body p:last-child {
    margin-bottom: 0;
}


.section-body .large {
    color: var(--text);

    font-size: 20px;
    line-height: 1.55;
}


.section-body strong {
    color: var(--text);
}


/* --------------------------------------------------
   INTRODUCTION
-------------------------------------------------- */

.introduction {
    border-bottom: 1px solid var(--border-light);
}


/* --------------------------------------------------
   INTELLIGENCE PREVIEW
-------------------------------------------------- */

.intelligence-preview {
    padding-top: 95px;
}


.section-header {
    margin-bottom: 42px;

    display: flex;
    justify-content: space-between;
    align-items: end;

    gap: 70px;
}


.section-header > p {
    max-width: 400px;

    margin: 0;

    color: var(--text-light);

    font-size: 16px;
}


/* Report image */

.report-image {
    margin: 0;
}


.report-image img {
    width: 100%;

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

    background: #ffffff;

    box-shadow:
        0 2px 7px rgba(20, 30, 50, 0.06);
}


.report-image figcaption {
    margin-top: 12px;

    color: var(--muted);

    font-size: 11px;
}


/* --------------------------------------------------
   CAPABILITIES
-------------------------------------------------- */

.capabilities {
    border-top: 1px solid var(--border-light);
}


.capability-grid {
    margin-top: 45px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}


.capability-grid article {
    min-height: 270px;

    padding: 30px;

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

    background: #ffffff;
}


.capability-number {
    margin-bottom: 52px;

    color: var(--blue);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.05em;
}


.capability-grid h3 {
    margin: 0 0 12px;

    color: var(--text);

    font-size: 23px;
    line-height: 1.2;
}


.capability-grid p {
    margin: 0;

    color: var(--text-light);

    font-size: 14px;
    line-height: 1.7;
}


/* --------------------------------------------------
   PRINCIPLE
-------------------------------------------------- */

.principle {
    background: var(--navy);
}


.principle-inner {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 95px 30px;
}


.principle .section-number {
    color: #8fa9df;
}


blockquote {
    max-width: 900px;

    margin: 24px 0 0;

    color: #ffffff;

    font-size: clamp(30px, 4vw, 50px);
    line-height: 1.18;

    letter-spacing: -0.035em;

    font-weight: 600;
}


blockquote span {
    color: #8fa9df;
}


/* --------------------------------------------------
   FOOTER
-------------------------------------------------- */

.site-footer {
    background: var(--navy-dark);

    color: #ffffff;
}


.footer-inner {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 35px 30px;

    display: grid;

    grid-template-columns: 1fr auto auto;

    align-items: center;

    gap: 45px;
}


.footer-brand strong {
    display: block;

    font-size: 13px;

    letter-spacing: 0.1em;
}


.footer-brand span {
    display: block;

    margin-top: 3px;

    color: #8994a8;

    font-size: 10px;
}


.footer-nav {
    display: flex;
    gap: 25px;
}


.footer-nav a {
    color: #aeb7c7;

    font-size: 12px;
}


.footer-nav a:hover {
    color: #ffffff;
}


.footer-copy {
    color: #7e899c;

    font-size: 10px;
}


/* --------------------------------------------------
   MOBILE
-------------------------------------------------- */

@media (max-width: 850px) {

    .header-main {
        min-height: 90px;
        padding: 0 20px;
    }


    .brand {
        min-height: 90px;
    }


    .brand-mark {
        width: 54px;
        height: 68px;
    }


    .brand-mark img {
        width: 50px;
        max-height: 68px;
    }


    .brand-text {
        margin-left: 12px;
    }


    .brand-name {
        font-size: 21px;
    }


    .brand-tagline {
        font-size: 9px;
        letter-spacing: 0.06em;
    }


    .nav-inner {
        padding: 0 20px;

        gap: 25px;

        overflow-x: auto;
        white-space: nowrap;
    }


    .nav-inner a {
        font-size: 14px;
    }


    .hero-inner {
        padding: 75px 20px 75px;

        grid-template-columns: 1fr;

        gap: 55px;
    }


    .hero h1 {
        font-size: 46px;
    }


    .section {
        padding: 75px 20px;
    }


    .section-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .section-header {
        display: block;
    }


    .section-header > p {
        margin-top: 20px;
    }


    .capability-grid {
        grid-template-columns: 1fr;
    }


    .capability-grid article {
        min-height: auto;
    }


    .principle-inner {
        padding: 75px 20px;
    }


    .footer-inner {
        grid-template-columns: 1fr;

        gap: 20px;

        padding: 30px 20px;
    }


    .footer-nav {
        order: 2;
    }


    .footer-copy {
        order: 3;
    }
}


/* --------------------------------------------------
   SMALL PHONES
-------------------------------------------------- */

@media (max-width: 520px) {

    .brand-tagline {
        max-width: 230px;

        line-height: 1.4;
    }


    .hero h1 {
        font-size: 39px;
    }


    .hero-lead {
        font-size: 18px;
    }


    .hero-links {
        align-items: flex-start;

        flex-direction: column;

        gap: 18px;
    }


    .hero-panel {
        width: 100%;
    }


    .section-heading h2,
    .section-header h2 {
        font-size: 34px;
    }


    blockquote {
        font-size: 32px;
    }


    .footer-nav {
        flex-wrap: wrap;

        gap: 15px 22px;
    }

}

/* --------------------------------------------------
   CONTACT FORM
-------------------------------------------------- */

.contact-section {
    border-bottom: 1px solid var(--border-light);
}

.contact-form {
    max-width: 620px;
}

.form-field {
    margin-bottom: 25px;
}

.form-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

.form-field input,
.form-field textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: #ffffff;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    line-height: 1.5;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-field input {
    height: 48px;
}

.form-field textarea {
    min-height: 170px;
    resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--muted);
}

.form-field input:focus,
.form-field textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 2px var(--blue-light);
}

.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 8px;
}

.form-message {
    color: var(--text-light);
    font-size: 13px;
}

@media (max-width: 850px) {
    .contact-form {
        max-width: none;
    }
}

@media (max-width: 520px) {
    .form-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
}