@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Poppins:wght@500;600;700&display=swap');
:root {
  --navy:#003366;
  --blue:#00509e;
  --gold:#f4b400;
  --bg:#f5f7fa;
  --ink:#333;
  --muted:#637487;
  --line:#dce5ec;
  --white:#fff
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:20px/1.7 'Open Sans',sans-serif
}
h1,h2,h3,h4 {
  font-family:Poppins,sans-serif;
  line-height:1.2;
  color:var(--navy);
  margin:0 0 1rem
}
h1 {
  font-size:clamp(2.5rem,5vw,4.8rem)
}
h2 {
  font-size:clamp(2rem,3.4vw,3rem)
}
h3 {
  font-size:1.15rem
}
p {
  margin:0 0 1rem
}
a {
  color:var(--blue);
  text-decoration:none
}
.wrap {
  width:min(1160px,calc(100% - 36px));
  margin:auto
}
.utility {
  background:var(--navy);
  color:#dce9f3;
  font-size:.78rem;
  padding:.45rem 0
}
.utility .wrap {
  display:flex;
  justify-content:space-between
}
.utility a {
  color:#fff
}
.header {
  position:sticky;
  top:0;
  z-index:10;
  background:#fff;
  border-bottom:1px solid var(--line)
}
.nav {
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem
}
.brand {
  display:flex;
  align-items:center;
  gap:.8rem;
  color:var(--navy);
  font-family:Poppins,sans-serif;
  font-weight:700;
  line-height:1.1
}
.brand small {
  display:block;
  font:600 .68rem 'Open Sans';
  letter-spacing:.04em;
  color:var(--muted);
  margin-top:.25rem
}
.mark {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--navy);
  border:3px solid var(--gold);
  color:var(--gold);
  font:bold .8rem Poppins
}
.menu {
  display:flex;
  align-items:center;
  gap:1.1rem;
  list-style:none;
  margin:0;
  padding:0
}
.menu a {
  font-size:.86rem;
  font-weight:700;
  color:var(--ink)
}
.menu a:hover,.menu .active {
  color:var(--blue)
}
.menu .nav-cta,.button {
  display:inline-block;
  background:var(--gold);
  color:var(--navy);
  padding:.72rem 1.15rem;
  border:0;
  border-radius:3px;
  font-weight:700;
  cursor:pointer
}
.hamburger {
  display:none;
  border:0;
  background:none;
  color:var(--navy);
  font-size:1.6rem
}
.hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:7rem 0;
  color:#fff;
  background:linear-gradient(120deg,#002546ee,#00509ee8),repeating-linear-gradient(120deg,transparent 0 80px,#ffffff10 81px 82px)
}
.hero:after {
  content:'CJE';
  position:absolute;
  right:-2rem;
  bottom:-5rem;
  color:#ffffff0b;
  font:700 22rem Poppins;
  z-index:-1
}
.hero .wrap {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:2rem;
  align-items:center
}
.hero-content {
  min-width:0
}
.hero-visual {
  min-height:1px;
  display:flex;
  justify-content:flex-start
}
.hero-card {
  width:100%;
  max-width:420px;
  padding:2rem;
  text-align:left
}
.hero-card .eyebrow {
  margin:0 0 1rem;
  white-space:nowrap
}
.hero-card .actions {
  justify-content:flex-start;
  margin-top:1rem
}
.hero h1 {
  max-width:760px;
  color:#fff
}
.hero p {
  max-width:680px;
  color:#e7f1f7;
  font-size:1.12rem
}
.eyebrow,.kicker {
  color:var(--blue);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase
}
.actions {
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  margin-top:1.8rem
}
.button.outline {
  background:transparent;
  border:1px solid #ffffff99;
  color:#fff
}
.section {
  padding:5rem 0
}
.section-head {
  max-width:700px;
  margin-bottom:2.2rem
}
.section-head p {
  color:var(--muted)
}
.two {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:4rem;
  align-items:center
}
.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem
}
.card {
  background:#fff;
  border:1px solid var(--line);
  padding:1.5rem;
  border-radius:5px;
  box-shadow:0 8px 22px #0033660b
}
.card p {
  color:var(--muted);
  font-size:1rem
}
.icon {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  margin-bottom:1rem;
  background:#e7f1f8;
  color:var(--blue);
  font-size:1.2rem
}
.scope {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.8rem
}
.scope .card {
  padding:1.15rem
}
.scope h3 {
  font-size:1rem;
  margin:0
}
.highlight {
  background:var(--navy);
  color:#fff
}
.highlight h2,.highlight p {
  color:#fff
}
.highlight .wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem
}
.article-card {
  border-top:4px solid var(--gold)
}
.article-card small {
  color:var(--blue);
  font-weight:700
}
.profile {
  display:flex;
  gap:1rem;
  align-items:flex-start
}
.avatar {
  flex:0 0 54px;
  width:54px;
  height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#dcecf5;
  color:var(--blue);
  font-family:Poppins;
  font-weight:700
}
.stats {
  background:var(--blue);
  color:#fff
}
.stats .cards {
  grid-template-columns:repeat(4,1fr)
}
.stat {
  text-align:center
}
.stat strong {
  display:block;
  color:#fff;
  font:700 2.6rem Poppins
}
.stat span {
  font-size:.86rem
}
.footer {
  background:#002342;
  color:#cbd9e3;
  padding:3rem 0 1rem
}
.footer-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:3rem
}
.footer h3 {
  color:#fff;
  font-size:1rem
}
.footer a {
  color:#d9e7ef
}
.footer-bottom {
  border-top:1px solid #ffffff25;
  margin-top:2rem;
  padding-top:1rem;
  font-size:.8rem
}
.reveal {
  opacity:1;
  transform:none;
  transition:opacity .6s ease,transform .6s ease
}
.reveal.show {
  opacity:1;
  transform:none
}
.to-top {
  position:fixed;
  right:1.2rem;
  bottom:1.2rem;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:var(--gold);
  color:var(--navy);
  font-size:1.1rem;
  display:none;
  cursor:pointer;
  z-index:8
}
.to-top.show {
  display:block
}
.poster-dialog {
  position:fixed;
  width:min(90vw, 680px);
  max-width:calc(100vw - 2rem);
  max-height:calc(100vh - 2rem);
  padding:.75rem;
  overflow:auto;
  border:0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 16px 48px #001a3399
}
.poster-dialog::backdrop {
  background:#001a33b8;
  backdrop-filter:blur(3px)
}
.poster-dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.5rem
}
.poster-dialog-heading h2 {
  margin:0;
  font-size:1.25rem
}
.poster-dialog-close {
  display:grid;
  flex:0 0 2.5rem;
  width:2.5rem;
  height:2.5rem;
  place-items:center;
  border:0;
  border-radius:50%;
  background:#e7f1f8;
  color:var(--navy);
  font-size:1.75rem;
  line-height:1;
  cursor:pointer
}
.poster-dialog-close:hover {
  background:#d5e7f3
}
.poster-dialog-close:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:2px
}
.poster-dialog img {
  display:block;
  width:100%;
  max-height:calc(100vh - 6rem);
  object-fit:contain;
  border-radius:4px
}
@media(max-width:900px) {
  .menu {
    gap:.65rem
  }
  .menu a {
    font-size:.76rem
  }
  .two {
    gap:2rem
  }

}
@media(max-width:700px) {
  .poster-dialog {
    width:min(90vw, 520px)
  }
  .utility .wrap {
    justify-content:center
  }
  .utility span {
    display:none
  }
  .nav {
    min-height:70px
  }
  .hamburger {
    display:block
  }
  .menu {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:70px;
    background:#fff;
    padding:1rem 18px;
    flex-direction:column;
    align-items:stretch;
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 20px #00336612
  }
  .menu.open {
    display:flex
  }
  .menu a {
    display:block;
    padding:.35rem 0
  }
  .two,.cards,.scope,.footer-grid {
    grid-template-columns:1fr
  }
  .hero .wrap {
    grid-template-columns:1fr
  }
  .hero-visual {
    display:none
  }
  .stats .cards {
    grid-template-columns:repeat(2,1fr);
    gap:2rem
  }
  .highlight .wrap {
    display:block
  }
  .hero {
    padding:5rem 0
  }
  .section {
    padding:3.5rem 0
  }
  .hero:after {
    font-size:11rem
  }

}
.white-section {
  background:#fff
}
.top-gap {
  margin-top:2rem
}
.profile-wide {
  max-width:650px
}
.footer-brand-title {
  color:#fff
}
.footer-brand-tagline {
  color:#cbd9e3
}
.success.show {
  display:block
}
.article.hidden {
  display:none
}