* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { color: #333; font: 14px/1.55 Montserrat, Arial, sans-serif; background: #fff; }
.hero { min-height: calc(100vh - 50px); position: relative; background-position: center; background-size: cover; background-repeat: no-repeat; }
.hero-home, .hero-references { background-image: url("assets/hero-home.jpg"); }
.hero-about { background-image: url("assets/hero-about.jpg"); }
.hero-services { background-image: url("assets/hero-services.jpg"); }
.hero-contact { background-image: url("assets/hero-contact.jpg"); }
.navigation { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100px; padding: 0 max(calc((100vw - 1140px) / 2), 28px); display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.70); }
.brand { display: flex; align-items: center; height: 100%; flex: 0 0 auto; }
.brand img { display: block; width: 110px; height: auto; }
.menu { height: 100%; margin: 0; padding: 0; display: flex; align-items: center; list-style: none; }
.menu a { display: block; padding: 18px 15px; color: #555; text-decoration: none; letter-spacing: .4px; font-size: 14px; white-space: nowrap; }
.menu li.active a, .menu a:hover { color: #fff; background: #e51e2a; }
.menu-toggle { display: none; border: 0; background: #e51e2a; color: #fff; padding: 10px 12px; font: inherit; }
.panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -42%); width: min(1140px, calc(100% - 50px)); max-height: calc(100% - 160px); overflow: auto; padding: 20px; background: rgba(255,255,255,.70); }
.panel h1 { margin: 0 0 18px; padding-left: 15px; font-size: 25px; font-weight: 400; }
.copy { padding: 0 15px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; }
.copy p { margin: 0 0 16px; }
.copy .lead { font-size: 16px; }
.services-copy { font-size: 16px; }
.services-copy h2 { font-size: 18px; margin: 15px 0 8px; }
.services-copy ul { padding-left: 24px; margin: 0 0 12px; }
.services-copy ul ul { margin-top: 4px; }
.references-panel { padding-bottom: 15px; }
.references { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: center; }
.references img { width: 100%; height: auto; object-fit: contain; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(230px, 1fr); gap: 20px; align-items: start; padding: 0 15px; }
.contact-grid iframe { width: 100%; height: 350px; border: 0; }
.contact-grid address { color: #717174; font-style: normal; padding-top: 2px; }
.contact-grid a { color: inherit; text-decoration: none; }
.footer { min-height: 50px; background: #fff; }
.footer-inner { width: min(1140px, calc(100% - 48px)); min-height: 50px; margin: auto; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; }
.copyright { justify-self: start; font-size: 13px; }
.social { justify-self: center; display: flex; align-items: center; gap: 14px; }
.social a { width: 40px; height: 40px; border-radius: 50%; background: #171717; color: #fff; display: grid; place-items: center; text-decoration: none; font-size: 18px; font-family: Arial, sans-serif; }
.social svg { width: 17px; height: 17px; fill: #fff; }
.social svg rect, .social svg circle { fill: none; stroke: #fff; stroke-width: 2; }
.social svg .dot { fill: #fff; stroke: none; }
.social svg .play { fill: #171717; }
.adg { justify-self: end; display: flex; align-items: center; }
.adg img { height: 28px; width: auto; }
@media (max-width: 850px) {
  .navigation { height: auto; min-height: 82px; padding: 0 22px; flex-wrap: wrap; }
  .brand img { width: 95px; }
  .menu-toggle { display: block; }
  .menu { display: none; width: 100%; height: auto; flex-direction: column; align-items: stretch; padding: 0 0 10px; }
  .menu.open { display: flex; }
  .menu a { padding: 12px 14px; }
  .panel { top: 105px; transform: translateX(-50%); width: calc(100% - 28px); max-height: calc(100% - 120px); }
  .references { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid iframe { height: 260px; }
  .footer-inner { grid-template-columns: 1fr auto; row-gap: 7px; padding: 8px 0; }
  .copyright { grid-column: 1 / -1; justify-self: center; order: 2; }
  .social { justify-self: start; gap: 8px; }
  .social a { width: 34px; height: 34px; }
  .adg { grid-column: 2; grid-row: 1; }
}
@media (max-width: 500px) { .references { grid-template-columns: repeat(2, 1fr); } .panel h1 { font-size: 22px; } }