:root {
  --navy: #002c41;
  --orange: #ff9200;
  --text: #999;
  --light: #f5f5f5;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.75 "Open Sans", Arial, sans-serif;
  color: var(--text);
  background: #0d2638 url(bg.jpg) center / cover fixed no-repeat;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }

.site { max-width: 1100px; margin: 0 auto; background: #fff; min-height: 100vh; display: flex; flex-direction: column; }
main, .content { flex: 1; }

/* Header */
.header { background: var(--navy); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 20px 40px; }
.logo img { display: block; }
.header nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 28px; }
.header nav a { color: var(--orange); text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.header nav a:hover, .header nav a[aria-current="page"] { color: #fff; }
.menu-toggle, .burger { display: none; }

/* Home blocks */
.blocks { background: var(--light); display: grid; grid-template-columns: 1fr 1fr; text-align: center; padding: 40px 20px; }
.block h3 { color: var(--navy); font-size: 14.4px; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 10px; }
.block p { margin: 0 0 10px; }
.block a { text-decoration: none; }
.block a:hover { color: var(--orange); }

.about { text-align: center; padding: 60px 20px 70px; max-width: 760px; margin: 0 auto; }
.about-pre { display: block; font-size: 20px; font-style: italic; color: #5d7685; }
.about h2 { color: var(--navy); font-size: 32px; letter-spacing: 2px; margin: 10px 0; line-height: 1.6; }
.divider { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--orange); margin: 10px 0 30px; }
.divider span { width: 80px; height: 2px; background: var(--navy); }
.about-content { text-align: center; }

/* Inner pages */
.page-head { background: var(--light); padding: 40px; }
.page-head h1 { margin: 0; color: var(--navy); font-size: 28px; letter-spacing: 1px; text-transform: uppercase; }
.content .inner { padding: 40px; max-width: 900px; }
.content h2 { color: #666; font-size: 16px; margin: 1.6em 0 .6em; }
.content strong { color: #666; }
.content a { color: var(--navy); }
.content a:hover { color: var(--orange); }
.content ul { padding-left: 1.3em; }
.content li { margin-bottom: .6em; }

/* Contact form */
.contact-form input, .contact-form textarea { width: 100%; max-width: 520px; padding: 10px; border: 1px solid #ddd; font: inherit; color: #555; }
.contact-form button { background: var(--navy); color: #fff; border: 0; padding: 10px 28px; font: 700 14px "Open Sans", sans-serif; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.contact-form button:hover { background: var(--orange); }
.form-note { font-size: 13px; }

/* Footer */
.footer { background: var(--navy); color: #fff; text-align: center; font-size: 14px; padding: 24px 16px; }
.footer p { margin: 0; }

/* Mobile */
@media (max-width: 820px) {
  .header { padding: 16px; }
  .burger { display: flex; flex-direction: column; gap: 6px; cursor: pointer; padding: 8px; }
  .burger span { width: 34px; height: 5px; border-radius: 3px; background: #d8d8d8; }
  .header nav { display: none; width: 100%; }
  .menu-toggle:checked ~ nav { display: block; }
  .header nav ul { flex-direction: column; padding-top: 14px; }
  .blocks { grid-template-columns: 1fr; gap: 20px; }
  .page-head, .content .inner { padding: 24px 16px; }
  .about h2 { font-size: 26px; }
}