.deck-mvp {
  --deck-ink: #172a37;
  --deck-copy: #334852;
  --deck-muted: #5f696f;
  --deck-cream: #f2eee7;
  --deck-paper: #fbfaf7;
  --deck-white: #fff;
  --deck-line: #d9d3ca;
  --deck-copper: #995526;
  color: var(--deck-ink);
  background: var(--deck-paper);
}

.deck-mvp main :where(h1, h2, h3),
.deck-mvp .hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -.04em;
}

.deck-mvp .hero.hero-deck-design {
  min-height: 720px;
  margin-top: 90px;
  background-image:
    linear-gradient(90deg, rgba(10, 25, 34, .96) 0%, rgba(10, 25, 34, .86) 42%, rgba(10, 25, 34, .28) 72%, rgba(10, 25, 34, .12) 100%),
    url("../images/deck-design-bcin-barrie-simcoe-county.webp");
  background-position: center 68%;
}

.deck-mvp .hero.hero-deck-design::after {
  display: none;
}

.deck-mvp .hero.hero-deck-design .hero-content {
  max-width: 720px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.deck-mvp .hero.hero-deck-design .hero-eyebrow {
  color: #efbe98;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.deck-mvp .hero.hero-deck-design h1 {
  max-width: 11ch;
  margin-top: 1.1rem;
  color: var(--deck-white);
  font-size: clamp(3.4rem, 6.8vw, 6.7rem);
  line-height: .96;
}

.deck-mvp .hero.hero-deck-design p {
  max-width: 56ch;
  color: #f3f5f6;
  font-size: clamp(1.05rem, 1.45vw, 1.24rem);
  line-height: 1.7;
}

.deck-mvp .hero.hero-deck-design .btn {
  min-height: 52px;
  padding: .9rem 1.25rem;
  border-radius: 4px;
}

.deck-mvp .hero.hero-deck-design .btn-primary {
  border-color: var(--deck-white);
  color: var(--deck-ink);
  background: var(--deck-white);
}

.deck-mvp .hero.hero-deck-design .btn-primary:hover {
  border-color: #efbe98;
  color: var(--deck-ink);
  background: #efbe98;
}

.deck-mvp .hero.hero-deck-design .btn-ghost {
  border-color: rgba(255, 255, 255, .72);
  color: var(--deck-white);
}

.deck-mvp .hero-mini-list {
  gap: 0;
  margin-top: 2rem;
}

.deck-mvp .hero-mini-list span {
  padding: .7rem 1rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 0;
  color: var(--deck-white);
  background: rgba(10, 25, 34, .38);
}

.deck-mvp main {
  padding-bottom: 0;
  background: var(--deck-paper);
}

.deck-mvp main .page-section {
  width: 100%;
  padding: clamp(5rem, 9vw, 8rem) max(1rem, calc((100% - 1180px) / 2));
  background: var(--deck-paper);
}

.deck-mvp main .page-section > .muted {
  margin-bottom: 1rem;
  color: var(--deck-copper);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.deck-mvp main .section-title {
  max-width: 18ch;
  margin-bottom: 2.2rem;
  color: var(--deck-ink);
  font-size: clamp(2.4rem, 4.4vw, 4.7rem);
  line-height: 1.03;
}

.deck-mvp #overview,
.deck-mvp #planning-checks,
.deck-mvp #service-area,
.deck-mvp #faq {
  background: var(--deck-paper);
}

.deck-mvp #drawings,
.deck-mvp #barrie-planning,
.deck-mvp #orillia-planning,
.deck-mvp #contact-form-section {
  background: var(--deck-cream);
}

.deck-mvp .cards {
  gap: 0;
}

.deck-mvp .card {
  padding: 1.8rem;
  border: 1px solid var(--deck-line);
  border-radius: 0;
  color: var(--deck-ink);
  background: var(--deck-white);
  box-shadow: none;
}

.deck-mvp .about-cards {
  grid-template-columns: 1.25fr .75fr;
}

.deck-mvp .card :where(p, li) {
  color: var(--deck-copy);
  line-height: 1.72;
}

.deck-mvp .card h3 {
  color: var(--deck-ink);
  font-size: 1.5rem;
}

.deck-mvp #drawings .cards {
  border-top: 1px solid var(--deck-line);
  border-left: 1px solid var(--deck-line);
}

.deck-mvp #drawings .card {
  min-height: 350px;
  border-top: 0;
  border-left: 0;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.deck-mvp #drawings .card:hover {
  position: relative;
  z-index: 1;
  color: var(--deck-white);
  background: var(--deck-ink);
  transform: translateY(-4px);
}

.deck-mvp #drawings .card:hover :where(h3, p, li) {
  color: var(--deck-white);
}

.deck-mvp :where(#barrie-planning, #orillia-planning, #planning-checks) .steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--deck-line);
  border-left: 1px solid var(--deck-line);
}

.deck-mvp :where(#barrie-planning, #orillia-planning, #planning-checks) .step {
  min-height: 190px;
  padding: 1.5rem;
  border: 0;
  border-right: 1px solid var(--deck-line);
  border-bottom: 1px solid var(--deck-line);
  border-radius: 0;
  color: var(--deck-copy);
  line-height: 1.72;
  background: var(--deck-white);
  box-shadow: none;
}

.deck-mvp :where(#barrie-planning, #orillia-planning, #planning-checks) .step strong {
  color: var(--deck-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.18rem;
  font-weight: 500;
}

.deck-mvp :where(#barrie-planning, #orillia-planning) > .message {
  margin-top: 1.5rem;
  padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--deck-copper);
  border-radius: 0;
  color: var(--deck-copy);
  background: var(--deck-paper);
}

.deck-mvp :where(#barrie-planning, #orillia-planning) > .message a {
  color: #7a421e;
  font-weight: 700;
}

.deck-mvp #process {
  background: var(--deck-ink);
}

.deck-mvp #process > .muted {
  color: #efbe98;
}

.deck-mvp #process .section-title {
  color: var(--deck-white);
}

.deck-mvp #process .steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  border-left: 1px solid rgba(255, 255, 255, .18);
}

.deck-mvp #process .step {
  min-height: 270px;
  padding: 1.6rem;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .18);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  border-radius: 0;
  color: #e8edf0;
  line-height: 1.72;
  background: transparent;
  box-shadow: none;
}

.deck-mvp #process .step strong {
  display: inline-block;
  margin-bottom: .65rem;
  color: var(--deck-white);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.18rem;
  font-weight: 500;
}

.deck-mvp #service-area .about-cards {
  grid-template-columns: 1fr;
}

.deck-mvp #faq .about-cards {
  display: block;
  border-top: 1px solid var(--deck-line);
}

.deck-mvp #faq .about-dropdown {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--deck-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.deck-mvp #faq .about-dropdown summary {
  padding: 1.4rem 0;
  color: var(--deck-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.18rem;
  font-weight: 500;
}

.deck-mvp #faq .about-dropdown-content {
  padding: 0 2.5rem 1.4rem 0;
}

.deck-mvp #faq .about-dropdown-content p {
  color: var(--deck-copy);
}

.deck-mvp .contact-grid {
  gap: clamp(2rem, 6vw, 5rem);
}

.deck-mvp .contact-grid form,
.deck-mvp .contact-grid aside {
  padding: clamp(1.5rem, 3vw, 2.3rem);
  border: 1px solid var(--deck-line);
  border-radius: 0;
  color: var(--deck-ink);
  background: var(--deck-white);
  box-shadow: none;
}

.deck-mvp .contact-grid label {
  color: var(--deck-ink);
  font-weight: 700;
}

.deck-mvp .contact-grid :where(input, select, textarea) {
  border: 1px solid #bcb6ad;
  border-radius: 3px;
  color: var(--deck-ink);
  background: var(--deck-white);
}

.deck-mvp .contact-grid :where(input, select, textarea):focus {
  border-color: var(--deck-copper);
  outline: 3px solid rgba(164, 95, 46, .2);
}

.deck-mvp .contact-grid .btn-primary {
  border-color: var(--deck-ink);
  border-radius: 4px;
  color: var(--deck-white);
  background: var(--deck-ink);
}

.deck-mvp .contact-grid .btn-primary:hover {
  border-color: var(--deck-copper);
  background: var(--deck-copper);
}

.deck-mvp .contact-grid a {
  color: #73401f;
}

@media (max-width: 900px) {
  .deck-mvp .hero.hero-deck-design {
    min-height: 650px;
    background-image:
      linear-gradient(rgba(10, 25, 34, .88), rgba(10, 25, 34, .82)),
      url("../images/deck-design-bcin-barrie-simcoe-county.webp");
  }

  .deck-mvp #process .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .deck-mvp .hero.hero-deck-design {
    min-height: 620px;
    margin-top: 72px;
  }

  .deck-mvp .hero.hero-deck-design h1 {
    font-size: clamp(3rem, 14vw, 4.5rem);
  }

  .deck-mvp main .page-section {
    padding-inline: 1rem;
  }

  .deck-mvp .about-cards,
  .deck-mvp :where(#barrie-planning, #orillia-planning, #planning-checks) .steps,
  .deck-mvp #process .steps {
    grid-template-columns: 1fr;
  }

  .deck-mvp #drawings .card,
  .deck-mvp #process .step {
    min-height: 0;
  }
}