/* Ported from the old Next.js app (Tailwind 4: globals.css, Navigation.css, Footer.css and the component CSS modules). */

@font-face { font-family: Montreux; font-weight: 300; font-style: normal; font-display: swap; src: url("/assets/fonts/MontreuxG-Lt.woff2") format("woff2"); }
@font-face { font-family: Montreux; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/MontreuxG-Rg.woff2") format("woff2"); }
@font-face { font-family: Montreux; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/MontreuxG-DmBd.woff2") format("woff2"); }
@font-face { font-family: Montreux; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/MontreuxG-Bd.woff2") format("woff2"); }

:root {
  --midnight-blue: #062741;
  --dark-blue: #184465;
  --steel-blue: #206b8d;
  --sky-blue: #56c4ef;
  --cool-blue: #5184ec;
  --light-gray: #c5cdd0;
  --signal-yellow: #f5cf00;
  --signal-yellow-60: #f5cf00cc;
  --signal-red: #e77e6d;
  --highlight: linear-gradient(to top, var(--signal-yellow-60), var(--signal-yellow-60)) no-repeat 0 0.5em;
}

/* Tailwind preflight, which the old site relied on */
*, *::before, *::after { margin: 0; padding: 0; border: 0 solid; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; scroll-padding-block: 5rem; }
body { font-weight: 300; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
ul, ol { list-style: none; }
img, svg, video { display: block; vertical-align: middle; }
button, input, select, textarea { font: inherit; color: inherit; background: transparent; border-radius: 0; }
textarea { resize: vertical; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
address { font-style: normal; }
small { font-size: 0.875rem; }

/* Containers (Tailwind container: full width, max width per breakpoint) */
main.content, .site-header-inner, .footer-inner { width: 100%; max-width: none; margin-left: auto; margin-right: auto; }
@media (min-width: 640px) { main.content, .site-header-inner, .footer-inner { max-width: 40rem; } }
@media (min-width: 768px) { main.content, .site-header-inner, .footer-inner { max-width: 48rem; } }
@media (min-width: 1024px) { main.content, .site-header-inner, .footer-inner { max-width: 64rem; } }
@media (min-width: 1280px) { main.content, .site-header-inner, .footer-inner { max-width: 80rem; } }

main.content { padding: 6rem 1rem 0; }
@media (min-width: 768px) { main.content { padding: 7rem 2rem 0; } }

/* Typography */
h1 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 400; color: var(--dark-blue); }
h2 { margin-top: 2rem; text-align: left; font-size: 1.5rem; line-height: 2rem; font-weight: 400; color: var(--dark-blue); }
h3 { margin-top: 2rem; text-align: left; font-size: 1.25rem; line-height: 1.75rem; font-weight: 400; color: var(--dark-blue); }
@media (min-width: 768px) {
  h2 { font-size: 1.875rem; line-height: 2.25rem; }
  h3 { font-size: 1.5rem; line-height: 2rem; }
}
h1 em, h2 em { background: var(--highlight); overflow: hidden; font-style: normal; }
p { margin-top: 1rem; }
a[title="call-to-action"] {
  display: inline-block; margin: 1rem 0; padding: 0.75rem 2rem;
  background: var(--signal-yellow); color: var(--dark-blue);
  border: 2px solid var(--dark-blue); border-radius: 9999px;
  font-size: 1rem; line-height: 1.5rem; font-weight: 500;
}
a[title="call-to-action"]:hover { background: var(--signal-yellow-60); }

/* Header and navigation */
.site-header {
  position: fixed; top: 0; left: 0; z-index: 10; display: block; width: 100%; max-width: none;
  margin: 0; padding: 0; background: #fff; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.site-header-inner { display: flex; flex-direction: row; align-items: center; height: 4rem; padding: 0 1rem; }
@media (min-width: 768px) { .site-header-inner { padding: 0 2rem; } }
.site-logo { width: 15rem; height: auto; }
@media (min-width: 768px) { .site-logo { width: 20rem; } }
.site-header .spacer { flex-grow: 1; }
.site-header .nav { display: flex; flex-direction: row; align-items: center; gap: 0; }
.site-header .nav ul {
  display: none; flex-direction: row; gap: 0; margin: 0; padding: 0;
  text-transform: uppercase; color: var(--dark-blue); font-weight: 500; cursor: pointer;
}
.site-header .nav li + li { margin-left: 1rem; }
@media (min-width: 1024px) { .site-header .nav ul { display: flex; } }
.site-header .nav li:hover { background: var(--highlight); font-style: normal; }
.site-header .nav.show ul {
  position: fixed; top: 0; right: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 1.5rem; line-height: 2rem; font-weight: 500; background: rgb(255 255 255 / 0.9);
}
.site-header .nav.show li + li { margin-left: 0; margin-top: 1.75rem; }
.burger { position: relative; z-index: 20; width: 40px; margin: 1rem; cursor: pointer; }
@media (min-width: 1024px) { .burger { display: none; } }
.burger::after, .burger::before, .burger div {
  display: block; content: ""; height: 2px; margin: 10px 0; background: var(--dark-blue); transition: all 0.2s ease-in-out;
}
.burger:hover::before { transform: translateY(12px) rotate(135deg); }
.burger:hover::after { transform: translateY(-12px) rotate(-135deg); }
.burger:hover div { transform: scale(0); }

/* Footer */
.footer { margin-top: 4rem; background: var(--midnight-blue); color: #fff; font-weight: 300; }
.footer-inner { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 2rem 1rem; }
@media (min-width: 768px) { .footer-inner { padding: 2rem 2rem; } }
.footer-cols { display: flex; flex-direction: column; justify-content: space-between; width: 100%; }
@media (min-width: 768px) { .footer-cols { flex-direction: row; } }
.footer .logo img { width: 15rem; height: auto; margin-bottom: 2rem; }
@media (min-width: 768px) { .footer .logo img { width: 20rem; } }
.footer address { font-style: normal; }
.footer ul { margin: 2rem 0; }
@media (min-width: 768px) {
  .footer address, .footer ul { width: 33.333333%; }
  .footer ul { margin: 0; }
}
.footer ul:nth-child(2) { font-weight: 400; font-size: 1.125rem; line-height: 1.75rem; }
@media (min-width: 768px) { .footer ul:nth-child(2) { padding-left: 5rem; } }
.footer ul:nth-child(2) li { margin-bottom: 0.25rem; }
.footer-cols > ul:nth-child(2) > li > a:hover { background: var(--highlight); font-style: normal; }
.footer ul:nth-child(4) { display: flex; flex-direction: column; }
@media (min-width: 768px) { .footer ul:nth-child(4) { text-align: right; } }
.footer ul:nth-child(4) li { display: flex; flex-direction: column; height: 100%; text-align: right; }
.footer ul:nth-child(4) ul {
  display: flex; flex-direction: row; width: 100%; margin: 2rem 0 0; font-weight: 400; color: var(--sky-blue); font-size: 0.875rem; line-height: 1.25rem;
}
@media (min-width: 768px) { .footer ul:nth-child(4) ul { justify-content: flex-end; margin-top: auto; } }
.footer ul:nth-child(4) a { display: inline-block; align-self: flex-end; overflow: visible; }
.footer ul:nth-child(4) a:hover { background: none; }
.footer ul:nth-child(4) ul li { height: 100%; margin-right: 1rem; }
@media (min-width: 768px) { .footer ul:nth-child(4) ul li { margin-left: 1rem; margin-right: 0; } }
.copyright { margin: 2rem 0 1rem; color: var(--sky-blue); font-size: 0.875rem; line-height: 1.25rem; }
.footer img[title="LinkedIn"] { width: 2rem; height: 2rem; }
.footer img[title="LinkedIn"]:hover { opacity: 0.8; }

/* Stage */
.stage { display: flex; flex-direction: column-reverse; align-items: center; margin-bottom: 2rem; text-align: center; }
@media (min-width: 768px) { .stage { flex-direction: row; text-align: left; } }
.stage-claim { flex-grow: 1; }
.stage h1 { margin: 1rem 0 2rem; font-size: 1.875rem; line-height: 2.25rem; color: var(--dark-blue); }
.stage p { margin: 2rem 0; font-size: 1.125rem; line-height: 1.75rem; }
.stage > img { width: 80%; height: auto; margin-bottom: 2rem; }
.stage a {
  padding: 0.75rem 2rem; background: var(--signal-yellow); color: var(--dark-blue);
  border: 2px solid var(--dark-blue); border-radius: 9999px; font-size: 1rem; line-height: 1.5rem; font-weight: 500;
}
.stage a:hover { background: var(--signal-yellow-60); }
@media (min-width: 768px) {
  .stage h1 { margin-top: 0; font-size: 2.25rem; line-height: 2.5rem; }
  .stage > img { width: 50%; }
}
@media (min-width: 1280px) {
  .stage h1 { font-size: 3.75rem; line-height: 1; }
  .stage p { font-size: 1.5rem; line-height: 2rem; }
}

/* Facts */
.facts { display: flex; flex-direction: row; flex-wrap: wrap; margin: 2rem 0; }
.facts h2 { width: 100%; margin-bottom: 2rem; font-size: 1.5rem; line-height: 2rem; text-align: left; color: var(--dark-blue); }
@media (min-width: 768px) { .facts h2 { font-size: 1.875rem; line-height: 2.25rem; } }
.facts blockquote { width: 100%; padding: 2rem; border: 2px solid #fff; background: rgb(32 107 141 / 0.2); }
@media (min-width: 768px) { .facts blockquote { width: 50%; } }
@media (min-width: 1024px) { .facts blockquote { width: 33.333333%; } }
.facts blockquote h2 { margin-top: 0; margin-bottom: 0; text-align: left; }
.facts blockquote p:has(img) {
  display: flex; align-items: center; text-align: right; font-size: 3.75rem; font-weight: 600; color: var(--dark-blue); line-height: normal;
}
.facts blockquote img { margin-right: 2.5rem; }
.facts blockquote img[title="big-icon"] { width: 6rem; }
.facts blockquote h3 { margin-top: 1rem; text-align: left; font-size: 1.5rem; line-height: 2rem; font-weight: 500; color: var(--dark-blue); }
.facts blockquote h4 { margin-top: 0.5rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; color: var(--steel-blue); }
.facts ul, .claim ul { list-style: disc outside; padding: 1rem 0 1rem 1.5rem; }
.facts li, .claim li { margin-bottom: 0.5rem; }

/* Claim */
.claim { display: flex; flex-direction: column; width: 100%; margin: 2rem 0; }
@media (min-width: 768px) { .claim { flex-direction: row; } .claim:nth-child(odd) { flex-direction: row-reverse; } }
.claim h2 { margin-top: 0; }
.claim h3 { margin-top: 0; color: var(--steel-blue); }
.claim-image { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 2rem 3rem; }
@media (min-width: 768px) { .claim-image { width: 24rem; } }
.claim-text { display: flex; flex-direction: column; flex-grow: 1; }
@media (min-width: 768px) { .claim-text { width: 75%; } }

/* Layout (grid of icon blocks) */
.layout { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 2rem; }
.layout > div { width: 100%; padding: 1rem 1rem 1rem 0; }
@media (min-width: 768px) { .layout > div { width: 50%; } }
.layout img[alt="icon"] { float: inline-start; width: 6rem; height: auto; margin: 2.5rem 1rem; }

/* Logos */
.logos { display: flex; flex-direction: column; margin: 4rem 0; }
.logos h2 { text-align: center; }
.logos p { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; }
.logos img { max-height: 3rem; margin: 1.5rem; }
@media (min-width: 768px) { .logos img { max-height: 5rem; margin-left: 2rem; margin-right: 2rem; } }

/* People */
.people { display: flex; flex-direction: row; flex-wrap: wrap; }
.people h2 { width: 100%; margin-bottom: 2rem; font-size: 1.5rem; line-height: 2rem; text-align: center; color: var(--dark-blue); }
.people p { width: 100%; margin-bottom: 2rem; }
.people p:has(img[alt="profile"]) { text-align: center; margin-bottom: 0; }
.people blockquote { width: 100%; padding: 2rem; text-align: center; }
.people blockquote img { margin-right: 2.5rem; }
.people blockquote h3 { margin-top: 1rem; text-align: center; font-size: 1rem; line-height: 1.5rem; font-weight: 500; color: var(--dark-blue); }
.people blockquote p { margin-top: 0; font-size: 1rem; line-height: 1.5rem; color: var(--midnight-blue); }
.people blockquote p a { font-size: 0.875rem; line-height: 1.25rem; color: var(--cool-blue); }
.people img[alt="certificates"] { display: inline-block; width: 5rem; height: 5rem; margin: 1rem 0.5rem 0 0; object-fit: cover; }
.people img[alt="profile"] { width: 12rem; height: auto; margin-left: auto; margin-right: auto; border-radius: 9999px; object-fit: cover; }
@media (min-width: 768px) {
  .people h2 { font-size: 1.875rem; line-height: 2.25rem; text-align: left; }
  .people blockquote { width: 33.333333%; text-align: left; }
  .people blockquote h3 { text-align: left; }
  .people img[alt="profile"] { margin-left: 0; margin-right: 0; }
}
@media (min-width: 1024px) { .people blockquote { width: 25%; } }

/* Pricing */
.pricing { width: 100%; overflow-x: scroll; }
.pricing table { min-width: 400px; margin: 2rem 0; text-align: center; table-layout: auto; border-collapse: collapse; }
@media (min-width: 768px) { .pricing table { margin-left: 2rem; margin-right: 2rem; } }
.pricing td, .pricing th { width: 16.666667%; padding: 1rem; text-align: right; border-right: 2px solid var(--signal-yellow); }
.pricing td:first-child, .pricing th:first-child { border: 2px solid transparent; border-right-color: var(--signal-yellow); }
.pricing td:nth-child(4), .pricing th:nth-child(4) { background: rgb(245 207 0 / 0.2); }
.pricing tr:last-child { border-top: 2px solid var(--signal-yellow); }
.pricing tr:last-child td { border: 0; }
.pricing tr:last-child td:nth-child(4) { border: 2px solid currentcolor; border-top: 0; color: var(--signal-yellow); }
.pricing td:nth-child(4) { font-weight: 700; }
.pricing thead { border-bottom: 2px solid var(--signal-yellow); }
.pricing thead tr { border-top: 0; }

/* Form */
.form { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; width: 100%; margin: 2rem auto 5rem; }
.form label { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; margin-top: 1rem; color: var(--dark-blue); font-size: 1rem; line-height: 1.5rem; font-weight: 400; }
@media (min-width: 768px) { .form label { width: calc(50% - 0.5rem); } }
.form label span { display: none; margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--signal-red); }
.form .full { width: 100%; }
.form input, .form textarea {
  width: 100%; margin-top: 0.5rem; padding: 0.75rem; color: var(--midnight-blue);
  border: 2px solid var(--light-gray); border-radius: 0.375rem; font-size: 1rem; line-height: 1.5rem; font-weight: 500;
}
.form input:focus, .form textarea:focus, .form input:active, .form textarea:active { outline: none; border-color: var(--dark-blue); }
.form input:user-invalid, .form textarea:user-invalid, .form input:user-invalid ~ i { border-color: var(--signal-red); }
.form input:user-invalid ~ span, .form textarea:user-invalid ~ span { display: block; }
.form p { padding: 0; }
.form button {
  padding: 0.75rem 2rem; background: var(--signal-yellow); color: var(--dark-blue);
  border: 2px solid var(--dark-blue); border-radius: 9999px; font-size: 1rem; line-height: 1.5rem; font-weight: 500;
}
.form button:hover { background: var(--signal-yellow-60); }
.form button:disabled { background: var(--light-gray); }
.form [name="_hp"] { display: none; }
.checkbox { position: relative; padding-left: 2.5rem; cursor: pointer; user-select: none; }
.checkbox input { position: absolute; width: 0; height: 0; opacity: 0; }
.checkbox i { position: absolute; top: 0; left: 0; width: 1.5rem; height: 1.5rem; border: 2px solid var(--light-gray); border-radius: 0.375rem; }
.checkbox i::after {
  content: ""; display: none; position: absolute; top: 3px; left: 7px; width: 6px; height: 0.75rem;
  border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.checkbox input:checked ~ i::after { display: block; }
.checkbox input:checked ~ i { background: var(--dark-blue); }