@font-face {
  font-family: "Montserrat Hao";
  src: url("/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --red: #bc1a28;
  --gold: #e5b144;
  --ivory: #fcf7ee;
  --ink: #3c1e1e;
  --muted: #6e5a50;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--ivory);
  font: 18px/1.45 "Segoe UI", sans-serif;
}

a { color: var(--red); }

.top {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
  background: var(--red);
  color: var(--ivory);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ivory);
  text-decoration: none;
  font-family: "Montserrat Hao", sans-serif;
  font-size: 22px;
}

.brand img { border-radius: 10px; }

.top nav { display: flex; gap: 16px; margin-left: auto; }

.top nav a, .top .phone { color: var(--ivory); text-decoration: none; }

.top .phone { font-weight: 700; white-space: nowrap; }

.btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

main { max-width: 980px; margin: 0 auto; padding: 32px 20px 48px; }

.hero h1, section h2, .card h3 {
  font-family: "Montserrat Hao", sans-serif;
  line-height: 1.15;
}

.eyebrow { color: var(--red); font-weight: 700; margin-bottom: 8px; }

.lead { font-size: 20px; max-width: 40em; }

.messengers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.messengers a, .foot-links a {
  display: inline-block;
  padding: 8px 14px;
  border: 2px solid var(--red);
  border-radius: 999px;
  color: var(--red);
  font-weight: 700;
  text-decoration: none;
}

.foot-links a {
  border-color: var(--gold);
  color: var(--gold);
  margin: 0 6px 8px;
}

h1 { font-size: 40px; margin: 0 0 12px; }

h2 { font-size: 30px; margin: 36px 0 16px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.card {
  background: #fff;
  border: 2px solid var(--red);
  border-radius: 18px;
  padding: 18px 18px 14px;
}

.tag {
  display: inline-block;
  margin: 0 0 8px;
  color: var(--red);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.card h3 { margin: 0 0 8px; font-size: 32px; color: var(--red); }

.card p { margin: 0; color: var(--muted); }

.price {
  margin-top: 14px !important;
  color: var(--ink) !important;
  font-family: "Montserrat Hao", sans-serif;
  font-size: 28px;
}

.note { color: var(--muted); }

ol { padding-left: 1.2em; }

ol li { margin: 6px 0; }

footer {
  padding: 24px;
  background: var(--red);
  color: var(--ivory);
  text-align: center;
}

.contact-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.contact-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: baseline;
  margin: 0 0 12px;
  padding: 16px 18px;
  background: #fff;
  border: 2px solid var(--red);
  border-radius: 18px;
}

.contact-list span {
  min-width: 11em;
  font-family: "Montserrat Hao", sans-serif;
  color: var(--red);
}

footer a { color: var(--gold); }

@media (max-width: 720px) {
  .top { flex-wrap: wrap; }
  .top nav { display: none; }
  .top .phone { margin-left: auto; }
  .grid, .grid.two { grid-template-columns: 1fr; }
  h1 { font-size: 32px; }
}