@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/roboto-regular.woff2") format("woff2");
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/roboto-bold.woff2") format("woff2");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/open-sans-light.woff2") format("woff2");
}

:root {
    --color-ink: #163652;
    --color-blue: #1f365c;
    --color-link: #2b679c;
    --color-accent: #ffb536;
    --color-muted: #515151;
    --content-width: 75rem;
    --page-gutter: clamp(1.25rem, 3.85vw, 3.125rem);
}

* { box-sizing: border-box; }
html { scroll-padding-top: 6rem; }
body { margin: 0; color: var(--color-muted); background: #fff; font: 1rem/1.5 Arial, Helvetica, sans-serif; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-link); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #127ac0; outline-offset: 4px; }
main:focus { outline: none; }
h1, h2, h3, h6 { font-family: Roboto, Arial, sans-serif; }
p { margin: 0 0 1.25rem; }
.container { width: min(var(--content-width), calc(100% - var(--page-gutter) * 2)); margin-inline: auto; }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 20; padding: .75rem 1rem; background: #fff; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.site-header { position: sticky; top: 0; z-index: 10; background: #fff; box-shadow: 0 1px 0 #0000000d; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 5rem; gap: 2rem; }
.site-brand { flex-shrink: 0; }
.site-brand__mobile-logo { display: none; }
.site-nav__list, .site-nav__submenu { margin: 0; padding: 0; list-style: none; }
.site-nav__list { display: flex; align-items: stretch; gap: 1.1rem; }
.site-nav__item { position: relative; display: flex; align-items: center; }
.site-nav__link { padding-block: 1.6rem; color: #333; font: 700 .875rem/1.35 Roboto, Arial, sans-serif; text-decoration: none; }
.site-nav__link:hover, .site-nav__link[aria-current="page"] { color: #127ac0; }
.site-nav__submenu-toggle { border: 0; background: none; min-width: 1.5rem; min-height: 2.75rem; color: var(--color-ink); }
.site-nav__submenu { position: absolute; top: 100%; left: 0; width: 18rem; padding: .5rem; background: #fff; box-shadow: 0 6px 18px #0002; }
.site-nav__submenu a { display: block; padding: .75rem; font-size: .9375rem; text-decoration: none; color: #333; }
.site-nav__submenu a:hover, .site-nav__submenu a:focus-visible { background: #eef3f7; }
html:not(.js-enabled) .site-nav__submenu { display: none; }
html:not(.js-enabled) .site-nav__item:hover .site-nav__submenu, html:not(.js-enabled) .site-nav__item:focus-within .site-nav__submenu { display: block; }
.site-nav__toggle { border: 1px solid var(--color-blue); border-radius: 3px; padding: .625rem 1rem; background: #fff; color: var(--color-blue); }
.hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 37.5rem; overflow: hidden; background: var(--color-blue); }
.hero__content { z-index: 1; padding-block: 4rem; }
.hero h2 { max-width: 37.5rem; margin: 0 0 1.125rem; color: #fff; font-size: 3.75rem; line-height: 1.067; }
.hero p { max-width: 31.25rem; margin: 0; color: #fff; font: 300 1.0625rem/1.25 "Open Sans", Arial, sans-serif; }
.hero__divider { width: min(31.25rem, 45%); height: .375rem; margin-bottom: 1.25rem; background: var(--color-accent); }
.hero__image { position: absolute; z-index: -1; inset: 0 0 0 45%; clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); }
.hero__image img { width: 100%; height: 100%; object-fit: cover; }
.features { padding-block: 3rem; background: #f9f9f7; }
.features h1 { margin: 0 0 2.5rem; color: #1e73be; font-size: 2.75rem; line-height: 1.23; text-align: center; }
.features__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; padding: 0; margin: 0; list-style: none; }
.feature-card { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: 1.25rem; }
.feature-card__icon { margin-inline: auto; width: 5rem; height: 5rem; }
.feature-card__title { margin: 0 0 .625rem; font-size: 1.5rem; line-height: 1.1; color: var(--color-ink); }
.feature-card p { margin: 0; font-size: .9375rem; line-height: 1.2; }
.benefits { padding-block: 2.5rem 0; text-align: center; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .75rem 1.25rem; border: 2px solid transparent; border-radius: 4px; font: 700 .9375rem/1.35 Roboto, Arial, sans-serif; text-align: center; text-decoration: none; }
.button--outline { border-color: #385d86; color: #385d86; background: transparent; }
.button--outline:hover { color: #fff; background: #385d86; }
.button--primary { color: #fff; background: #127ac0; }
.button--primary:hover { background: #0c639c; }
.demo-callout { margin-bottom: 1.5rem; }
.benefits > h2 { margin: 0 0 4rem; font-size: 1.167rem; line-height: 1.5; }
.benefits > h2 span { color: #375c85; }
.benefits > h2::after { content: ""; display: block; width: 6rem; height: 4px; margin: 1.75rem auto 0; background: #127ac0; }
.benefits__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; padding: 0; margin: 0; list-style: none; text-align: left; }
.benefit-card { display: flex; flex-direction: column; min-width: 0; background: #f0f1f1; }
.benefit-card__image { width: 100%; aspect-ratio: 2; object-fit: cover; }
.benefit-card__content { display: flex; flex: 1; flex-direction: column; align-items: stretch; padding: 1.25rem; }
.benefit-card h3 { margin: 0 0 .625rem; color: var(--color-ink); font-size: 1.0833rem; line-height: 1.5; }
.benefit-card p { font-size: .9375rem; line-height: 1.2; }
.benefit-card h6 { margin: auto 0 1.25rem; font-size: 1rem; line-height: 1.167; }
.benefit-card .button { align-self: center; width: min(100%, 11.25rem); }
.contact-layout { position: relative; display: grid; grid-template-columns: 2fr 1fr; gap: 1.875rem; margin-block: 3.125rem; }
.anchor-alias { position: absolute; top: 0; }
.case-studies { min-width: 0; padding-block: 2rem; text-align: center; }
.case-studies h2 { margin: 0 0 .625rem; font-size: 1.667rem; line-height: 1; color: #375c85; }
.case-studies h2 span { color: #f6b752; }
.case-studies .button { margin-block: 1.25rem; }
.case-studies__intro { padding-inline: 1.25rem; margin: .5rem 0 2rem; color: #666; font-size: 1.167rem; line-height: 1.15; font-weight: 400; }
.client-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 1.5rem; padding: 0; margin: 0; list-style: none; }
.client-logos img { width: 100%; height: 7rem; object-fit: contain; }
.contact { padding: 1.875rem; color: #fff; background: #223759; }
.contact__title { text-align: center; line-height: 1.25; }
.form-field { margin-bottom: .9375rem; }
.form-field label { display: block; margin-bottom: .25rem; font-size: .875rem; }
.form-field__control { display: block; width: 100%; min-height: 2.75rem; border: 1px solid #ccd1d8; border-radius: 0; padding: .625rem; color: #252525; background: #fff; }
textarea.form-field__control { min-height: 7rem; resize: vertical; }
.contact-form__consent { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; line-height: 1.4; }
.contact-form__consent input { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin: 0; }
.contact a { color: #fff; text-underline-offset: .2em; }
.contact :focus-visible { outline-color: #ffb536; }
.button--submit { margin-top: 1.25rem; color: var(--color-blue); background: #fff; }
.button--submit:hover { background: #e6edf7; }
.form-field__error { display: block; margin-top: .25rem; font-size: .875rem; color: #ffe0a1; }
.form-field__error:empty, .contact-form__status:empty { display: none; }
.form-field__control[aria-invalid="true"] { border: 2px solid #a90000; }
.contact-form__status { margin: 1rem 0 0; padding: .75rem; border: 1px solid #fff; font-size: .9375rem; }
.site-footer { padding-top: 2.5rem; background: #f7f7f7; color: var(--color-ink); }
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.footer-block { min-width: 0; font-size: .9375rem; line-height: 1.78; overflow-wrap: anywhere; }
.footer-block__title { margin-bottom: 1rem; font-weight: 700; }
.footer-block a { color: inherit; text-decoration: none; }
.footer-block a:hover { text-decoration: underline; }
.footer-brand img { width: 180px; margin: 0 auto 1.25rem; }
.footer-legal { padding-block: 1.25rem; font-size: .8125rem; line-height: 1.75; }
.footer-legal p { margin: 0; }
.footer-legal a { color: inherit; }

@media (max-width: 1100px) {
    .site-header__inner { flex-wrap: wrap; gap: 0 1rem; padding-block: .75rem; }
    .site-nav { width: 100%; }
    .site-nav__list { flex-direction: column; gap: 0; padding-block: .75rem; }
    .site-nav__item { flex-wrap: wrap; }
    .site-nav__link { flex: 1; padding: .875rem 0; }
    .site-nav__submenu-toggle { min-width: 2.75rem; }
    .site-nav__submenu { position: static; width: 100%; box-shadow: none; background: #f4f7fa; }
    html:not(.js-enabled) .site-nav__submenu { display: block; }
    .feature-card { grid-template-columns: 5rem minmax(0, 1fr); }
    .benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-layout { grid-template-columns: 1.5fr 1fr; }
    .contact { padding: 1.25rem; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
    .hero { min-height: 30rem; }
    .hero h2 { max-width: 34rem; font-size: 2.8125rem; line-height: 1; }
    .hero__image { display: none; }
    .hero__divider { max-width: 100%; width: 28rem; }
    .hero p { font-size: 1.125rem; line-height: 1.4; }
    .features h1 { font-size: 2.125rem; }
    .features__grid { grid-template-columns: 1fr; }
    .feature-card { grid-template-columns: 6rem minmax(0, 1fr); }
    .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .hero h2 { font-size: 2.5rem; }
    .hero { min-height: 28rem; }
    .features { padding-block: 2rem; }
    .features h1 { font-size: 1.875rem; }
    .feature-card { grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; }
    .feature-card__icon { width: 4rem; height: 4rem; }
    .feature-card__title { font-size: 1.25rem; }
    .benefits__grid, .footer-grid { grid-template-columns: 1fr; }
    .client-logos { gap: .75rem; }
    .client-logos img { height: 5rem; }
    .case-studies h2 { font-size: 1.4rem; line-height: 1.2; }
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}