:root {
  --accent: #FF5252;
  --red-heading: #F34F4C;
  --footer-red: #D3413F;
  --ink: #212121;
  --ink-strong: #1F1F1F;
  --grid: 1145px;
  --font-display: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Open Sans', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17.3333px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

img { max-width: 100%; display: block; border: 0; }

.wrap {
  width: var(--grid);
  max-width: 100%;
  margin: 0 auto;
}

.gap { height: 92px; }

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  padding: 0 16px 0 28px;
  display: flex;
  align-items: center;
  z-index: 20;
  transition: background-color .2s ease;
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}
.topbar-logo { width: 40px; height: 40px; object-fit: contain; }
.topbar-name {
  font-family: var(--font-display);
  font-size: 21.3333px;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  transition: color .2s ease;
}
body.scrolled .topbar { background: #fff; }
body.scrolled .topbar-name { color: var(--ink-strong); }

.hero {
  height: 430px;
  position: relative;
  display: flex;
  align-items: center;
  background-image: url('assets/hero-bg.jpg');
  background-size: cover;
  background-position: center center;
  background-color: #2b2b2b;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .25);
}
.hero .wrap { position: relative; z-index: 1; padding: 0; }

.hero h1 {
  margin: 0 0 0 8px;
  width: 934px;
  max-width: 100%;
  padding-bottom: 20px;
  position: relative;
  text-align: center;
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  text-transform: uppercase;
}
.hero h1::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 12px;
  background: var(--accent);
}

.cta { padding: 56px 0; text-align: center; }
.cta-button {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
  background: var(--footer-red);
  padding: 16px 42px;
  border-radius: 3px;
  text-decoration: none;
  transition: background-color .2s ease;
}
.cta-button:hover { background: #b83836; }

.welcome { padding: 36px 0; text-align: center; }
.welcome h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 38.6667px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink-strong);
  text-transform: uppercase;
}

.intro { padding: 32px 0; text-align: center; }
.intro p { margin: 0; }

.cards { padding: 24px 0; }
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 29.5px;
}
.card h3 {
  margin: 13px 0 0;
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--red-heading);
  text-align: center;
}
.card p {
  margin: 28px 0 0;
  text-align: center;
}

.about { padding: 24px 0; }
.about-image { width: 754px; max-width: 100%; margin: 0 auto; }
.about-copy { width: 754px; max-width: 100%; margin: 15px auto 0; }
.about-title { margin: 0; text-align: center; }
.about p { margin: 15px 0 0; text-align: center; }
.about p + p { margin-top: 24px; }

.footer {
  background: var(--footer-red);
  color: #fff;
  text-align: center;
  padding: 47px 0 35px;
}
.footer-address {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.42;
  text-transform: uppercase;
}
.footer-tel {
  margin: 19px 0 0;
  font-family: var(--font-display);
  font-size: 17.3333px;
  font-weight: 500;
}

@media (max-width: 1279px) {
  .wrap { width: 100%; padding: 0 24px; }
}
@media (max-width: 767px) {
  .wrap { padding: 0 16px; }
  .gap { height: 48px; }
  .hero { height: 320px; }
  .hero h1 { font-size: 40px; width: auto; margin-left: 0; padding-bottom: 12px; }
  .hero h1::after { height: 8px; }
  .cta { padding: 40px 0; }
  .cta-button { font-size: 16px; padding: 14px 30px; }
  .welcome h2 { font-size: 24px; }
  .cards-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-image { width: 100%; }
  .footer { padding: 32px 0 28px; }
  .footer-address { font-size: 16px; line-height: 1.4; }
  .topbar-name { font-size: 17px; }
}