:root {
    --navy:#102b63;
    --navy-dark:#0a1d45;
    --mint:#c9eee0;
    --green:#20a66a;
    --yellow:#ffc400;
    --ink:#171b24;
    --muted:#667085;
    --line:#dbe2e8;
    --off:#f5f6f7;
    --white:#fff
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    background:#fff;
    color:var(--ink);
    font-family:"Montserrat",Arial,sans-serif;
    font-size:16px;
    line-height:1.6
}

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

a {
    color:inherit
}

.container {
    width:min(1180px,calc(100% - 40px));
    margin:0 auto
}

h1,h2,h3,p {
    margin-top:0
}

h1,h2,h3 {
    color:var(--navy);
    font-weight:800;
    line-height:1.08
}

h1 {
    font-size:clamp(2.6rem,6vw,5.5rem);
    letter-spacing:-.045em
}

h2 {
    font-size:clamp(2rem,4vw,3.65rem);
    letter-spacing:-.035em
}

h3 {
    font-size:1.25rem
}

p {
    margin-bottom:1rem
}

.eyebrow {
    margin:0 0 .7rem;
    color:var(--green);
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    padding:14px 24px;
    border:2px solid var(--navy);
    border-radius:999px;
    background:var(--navy);
    color:#fff;
    font-weight:800;
    text-decoration:none;
    transition:.2s ease
}

.button:hover {
    background:var(--navy-dark);
    border-color:var(--navy-dark);
    transform:translateY(-1px)
}

.button-yellow {
    background:var(--yellow);
    border-color:var(--yellow);
    color:#111
}

.button-yellow:hover {
    background:#e9b300;
    border-color:#e9b300;
    color:#111
}

.section {
    padding:82px 0
}

.section-grey {
    background:var(--off)
}

@media(max-width:700px) {
    .container {
        width:min(100% - 28px,1180px)
    }
    .section {
        padding:58px 0
    }
}