.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 14px 24px;
  background: var(--color-cardinal);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  transition:
    background 0.18s,
    transform 0.18s;
  box-shadow: 0 12px 26px -12px #1b171624;
}
.button:hover {
  background: var(--color-cardinal-dark);
}
.button:active {
  transform: translateY(1px);
}
.button:disabled {
  opacity: 0.65;
}
.button--secondary {
  background: #ffffffd1;
  border-color: var(--color-border);
  color: var(--color-ink);
}
.button--secondary:hover {
  background: #fff;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.service-card {
  --accent: #c93d40;
  --tint: 221, 218, 210;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 156px;
  padding: 24px;
  border: 1px solid #e2dad0;
  border-radius: 8px;
  background: radial-gradient(
    ellipse at bottom right,
    #efe4d4 0%,
    #f7f4ee 54%,
    #fff 100%
  );
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-margin-top: 24px;
}
.accent-remodelling {
  --accent: #5f7f56;
  --tint: 205, 220, 202;
}
.accent-renovations {
  --accent: #c8913f;
  --tint: 231, 220, 184;
}
.accent-windows {
  --accent: #51717b;
  --tint: 204, 222, 224;
}
.accent-decks {
  --accent: #b76b44;
  --tint: 228, 211, 191;
}
.accent-flooring {
  --accent: #454b45;
  --tint: 211, 218, 212;
}
.accent-bar {
  display: block;
  flex: none;
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent, var(--color-cardinal));
}
.service-card h3 {
  font-size: 21px;
  line-height: 26px;
}
.service-card p {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted);
}
.service-card--image {
  min-height: 232px;
  border-color: rgb(var(--tint));
  background: #fff;
}
.service-card--image p {
  font-size: 16px;
  line-height: 26px;
}
.service-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.service-card--image:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      ellipse at bottom right,
      rgba(var(--tint), 0.58),
      #ffffff1a 65%,
      #ffffff9e
    ),
    linear-gradient(#ffffffb8, #ffffffb8);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  min-width: 0;
}
.contact-form input,
.contact-form textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #ffffffe6;
  padding: 14px 18px;
  font-size: 18px;
  line-height: 24px;
}
.contact-form input {
  height: 54px;
}
.contact-form textarea {
  min-height: 162px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--color-subtle);
}
.identity-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-form--stacked .identity-row {
  grid-template-columns: 1fr;
  gap: 12px;
}
.form-status:empty {
  display: none;
}
.form-status {
  font-size: 14px;
  line-height: 22px;
}
.form-status[data-state="error"] {
  color: #9f342f;
}
.form-status[data-state="success"] {
  color: #315348;
}
.email-link {
  font-weight: 600;
  color: var(--color-cardinal-dark);
  overflow-wrap: anywhere;
}
.icon-button {
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 30px;
  border-radius: 50%;
  background: #ffffff1f;
}
.icon-button:hover {
  background: #ffffff38;
}
@media (max-width: 1000px) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
  .identity-row {
    grid-template-columns: 1fr;
  }
  .service-card {
    min-height: 180px;
  }
  .service-card--image {
    min-height: 232px;
  }
}