*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#243A57;color:#ECE8E0;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:#ECE8E0;text-decoration:none}
a:hover{color:#FFFFFF}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #FF7F3A;outline-offset:3px}
input::placeholder,textarea::placeholder{color:#8A9BB2}

/* Hero: text and photo in two columns that never overlap */
@media (min-width: 901px){
  .hero{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"text img";align-items:stretch !important;min-height:min(88vh,860px) !important}
  .hero-img{position:static !important;grid-area:img;width:100% !important;height:100% !important}
  .hero-text{grid-area:text;align-self:center;max-width:none !important;margin:0 !important;padding:96px clamp(28px,4vw,72px) 80px !important}
  .hero-text > div{flex:1 1 auto !important;max-width:640px !important}
  .hero-h1{font-size:clamp(44px,5.2vw,96px) !important}
}

/* Tablet and phone */
@media (max-width: 900px){
  .hero{flex-direction:column !important;align-items:stretch !important;min-height:0 !important}
  .hero-img{position:static !important;width:100% !important;height:460px !important;border-left:0 !important;border-bottom:1px solid #3A5272}
  .hero > div{padding-top:48px !important}
  .navlink{min-height:52px !important;padding:0 16px !important;font-size:13px !important}
}
@media (max-width: 600px){
  section > div{padding-left:20px !important;padding-right:20px !important}
  section > div[style*="padding: 120px"]{padding-top:72px !important;padding-bottom:72px !important}
  header > div > a:first-child{padding:16px 20px !important;font-size:22px !important}
  .hero-img{height:380px !important}
}