@font-face {
  font-family: "Exo 2";
  src: url("Exo2-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #262626;
  --muted: #555e68;
  --line: #d8dde3;
  --brand: #0070b8;
  --blueprint: #0a3e70;
  --ice: #c0eaff;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: #f6f8fb;
  color: var(--ink);
  font: 1rem/1.5 "Exo 2", Arial, sans-serif;
}

.wrap { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
.masthead { background: #fff; border-bottom: 1px solid var(--line); }
.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 100px;
}
.logo { display: block; width: 252px; max-width: 100%; height: auto; }
.masthead-label, .eyebrow, .operations h2, .contact > span:first-child {
  font-size: .76rem;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.masthead-label { color: var(--muted); }

.hero {
  margin-top: 32px;
  padding: clamp(28px, 5vw, 64px);
  border-top: 5px solid var(--brand);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(205px, .43fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  color: #fff;
  background-color: var(--blueprint);
  background-image: linear-gradient(90deg, #0a3e70 22%, transparent),
    linear-gradient(rgba(192, 234, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(192, 234, 255, .09) 1px, transparent 1px);
  background-size: 100% 100%, 32px 32px, 32px 32px;
}
.eyebrow { margin: 0 0 21px; display: flex; align-items: center; gap: 10px; color: var(--ice); }
.indicator { width: 8px; height: 8px; border: 1px solid currentColor; transform: rotate(45deg); }
h1 { margin: 0; font-size: clamp(2.1rem, 3.65vw, 3.25rem); font-weight: 800; line-height: 1.04; overflow-wrap: anywhere; }
h1 span { color: var(--ice); }
.lead { margin: 21px 0 0; max-width: 54ch; color: #e0f0ff; font-size: clamp(1rem, 1.8vw, 1.19rem); }

.operations { background: #083460; border: 1px solid #5186b6; padding: 22px; }
.operations h2 { margin: 0; color: var(--ice); }
.operations ul { list-style: none; margin: 12px 0 0; padding: 0; }
.operations li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #35648e; }
.operations li::before { content: ""; width: 6px; height: 6px; background: var(--ice); }

.contacts {
  margin-top: 24px;
  padding: clamp(20px, 4vw, 36px);
  border: 1px solid var(--line);
  background: #fff;
}
.contacts h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.8rem); line-height: 1.2; }
.contacts p { margin: 7px 0 19px; color: var(--muted); }
.contact-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.contact {
  position: relative;
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 76px;
  padding: 12px 35px 12px 14px;
  border: 1px solid var(--line);
  background: #f6f8fb;
  color: var(--blueprint);
  text-decoration: none;
}
.contact strong { font-size: clamp(1rem, 2vw, 1.2rem); }
.contact-primary { border-color: var(--brand); background: var(--brand); color: #fff; }
.contact .arrow { position: absolute; right: 14px; top: 12px; }
.contact:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.contact:focus-visible { outline: 3px solid var(--blueprint); outline-offset: 3px; }
.footer { padding-block: 24px; color: var(--muted); font-size: .85rem; }

@media (max-width: 780px) {
  .wrap { width: calc(100% - 32px); }
  .masthead-inner { min-height: 82px; }
  .logo { width: 218px; }
  .masthead-label { display: none; }
  .hero { margin-top: 16px; grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: clamp(1.6rem, 7.3vw, 2.1rem); }
  .operations ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .contact-links { grid-template-columns: minmax(0, 1fr); }
  .contacts { margin-top: 16px; }
}

@media (max-width: 380px) {
  .hero { padding: 20px; }
  .operations { padding: 14px; }
  .operations li { font-size: .88rem; gap: 6px; }
}