:root {
  --blue: #0070c0;
  --dark-blue: #24469b;
  --pale-blue: #e7f1fa;
  --text: #161616;
  --header-height: 154px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: #f5f6f8;
  line-height: 1.48;
}
.project-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-height);
  z-index: 1000;
  background: white;
  box-shadow: 0 2px 14px rgba(0,0,0,.12);
}
.header-inner {
  height: 100%;
  max-width: 1180px;
  margin: 0 auto;
  overflow: hidden;
}
.header-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.page { padding: calc(var(--header-height) + 42px) 20px 70px; }
.project {
  width: min(850px, 100%);
  margin: 0 auto;
  background: white;
  padding: 42px 54px 54px;
  box-shadow: 0 2px 24px rgba(0,0,0,.07);
}
h1 {
  margin: 0 0 28px;
  color: var(--blue);
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.12;
}
.project-data, .contact-box {
  background: var(--pale-blue);
  border-left: 4px solid #4a83bd;
  padding: 12px 14px;
  margin: 0 0 36px;
}
.project-data p, .contact-box p { margin: 0 0 7px; }
.project-data p:last-child, .contact-box p:last-child { margin-bottom: 0; }
.project-data strong, .contact-box strong { color: var(--blue); }
h2 {
  color: var(--blue);
  font-size: 27px;
  margin: 0 0 8px;
}
h3 {
  margin: 0 0 16px;
  font-size: 24px;
  line-height: 1.25;
}
.date { margin: 0 0 25px; }
.lead-box {
  border: 1px solid #333;
  padding: 12px 14px;
  margin-bottom: 22px;
}
p { margin: 0 0 17px; }
@media (max-width: 700px) {
  :root { --header-height: 96px; }
  .page { padding-top: calc(var(--header-height) + 20px); padding-left: 10px; padding-right: 10px; }
  .project { padding: 28px 22px 40px; }
  h1 { font-size: 27px; }
  h3 { font-size: 20px; }
}
