:root {
  --blue: #3080d0;
  --orange: #f8a020;
  --light: #f0f8ff;
  --text: #222;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  background: var(--light);
  color: var(--text);
  display: flex;
  flex-direction: column;
  font: 16px/1.55 Arial, sans-serif;
  margin: 0;
  min-height: 100vh;
}
a { color: #1669ad; }
a:hover, a:focus { color: #b76000; }
.container { margin: 0 auto; max-width: 960px; padding: 0 24px; }
.skip-link { left: -999px; position: absolute; }
.skip-link:focus { background: #fff; left: 1rem; padding: .5rem; top: 1rem; z-index: 2; }
.site-header, .site-footer { background: var(--blue); color: #eee; }
.header-content, .footer-content { align-items: center; display: flex; justify-content: space-between; }
.header-content { min-height: 82px; }
.brand { align-items: center; color: #fff; display: inline-flex; font-size: 1.8rem; font-weight: bold; gap: .55rem; text-decoration: none; }
.brand:hover, .brand:focus { color: #fff; }
.brand-logo { height: 56px; }
.main-nav, .footer-content nav { display: flex; gap: 1.5rem; }
.main-nav a, .footer-content a { color: #eee; font-size: 1.05rem; text-decoration: none; }
.main-nav a.active, .footer-content a { color: var(--orange); }
.main-nav a:hover, .main-nav a:focus, .footer-content a:hover, .footer-content a:focus { color: #ffd050; }
.lang-switch { align-items: center; display: inline-flex; }
.lang-switch img { border-radius: 2px; display: block; height: 16px; width: auto; }
.menu-toggle { display: none; }
main { flex: 1 0 auto; padding-bottom: 48px; padding-top: 42px; width: 100%; }
h1, h2, h3, h4 { color: #333; line-height: 1.25; }
h1 { font-size: 2rem; } h2 { font-size: 1.65rem; } h3 { font-size: 1.3rem; }
.site-footer { padding: 18px 0; }
.footer-content { font-size: .95rem; }
.prose { max-width: 850px; }
.prose li { margin: .45rem 0; }
.contact-form { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.contact-form label { display: grid; font-weight: bold; gap: .35rem; }
.contact-form input, .contact-form textarea { border: 1px solid #aaa; border-radius: 3px; font: inherit; padding: .55rem; width: 100%; }
.contact-form button { background: var(--blue); border: 0; border-radius: 3px; color: #fff; cursor: pointer; font: inherit; justify-self: start; padding: .6rem 1.1rem; }
.form-status { font-weight: bold; }
@media (max-width: 640px) {
  .header-content { flex-wrap: wrap; padding-bottom: 14px; padding-top: 14px; }
  .menu-toggle { background: transparent; border: 1px solid #eee; border-radius: 3px; color: #fff; display: block; padding: .35rem .6rem; }
  .main-nav { display: none; flex-basis: 100%; flex-direction: column; gap: .7rem; padding-top: 1rem; }
  .main-nav.open { display: flex; }
  .footer-content { align-items: flex-start; flex-direction: column; gap: .8rem; }
  .footer-content nav { flex-direction: column; gap: .4rem; }
}