/* Keep the hero wide and align the following content to the Figma column. */
@media (min-width: 992px) {
  .rf-page > .rf-feature-grid,
  .rf-page > .rf-section,
  .rf-page > .rf-contact {
    width: 89.3%;
    margin-left: 5.25%;
  }

  .rf-page .rf-hero { min-height: 550px; }
  .rf-page .rf-feature-card { min-height: 202px; }
  .rf-page h2 { font-size: 26px; }
  .rf-page .rf-benefits,
  .rf-page .rf-service { margin-top: 36px; }
  .rf-page .rf-order { margin-top: 56px; }
  .rf-page .rf-gallery { margin-top: 40px; }
  .rf-page .rf-gallery__grid { max-width: 825px; }
  .rf-page .rf-contact__card {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 55px;
    max-width: 850px;
    min-height: 360px;
    margin-top: 56px;
    padding: 46px 39px;
  }
  .rf-page .rf-contact > h2 { font-size: 36px; }
  .rf-page .rf-feature-card > img { filter: brightness(0); }
}

.rf-page .rf-contact__links a[href^="tel:"] {
  text-decoration: none !important;
}
.rf-page .rf-contact__links a[href^="mailto:"] {
  text-decoration: underline !important;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px;
}
.rf-page .rf-contact__links a:hover {
  text-decoration: none !important;
}

/* Both price-list buttons are white until hovered. */
.rf-page .rf-hero__actions .rf-button {
  min-height: 64px;
  padding: 14px 26px;
  border-color: #fff;
  background: #fff;
  color: #161616 !important;
  font-size: 17px;
  line-height: 1.2;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.rf-page .rf-hero__actions .rf-button:hover,
.rf-page .rf-hero__actions .rf-button:focus-visible {
  border-color: var(--rf-blue);
  background: var(--rf-blue);
  color: #fff !important;
}

.rf-page .rf-benefits .rf-button--request {
  min-width: 220px;
  min-height: 64px;
  padding: 14px 28px;
  font-size: 18px;
  line-height: 1.2;
}

@media (max-width: 767px) {
  .rf-page .rf-order__steps li { padding-left: 0 !important; }
}

/* Figma connects each step label to its number before the horizontal line. */
@media (min-width: 768px) {
  .rf-page .rf-order__steps { padding-top: 0; }
  .rf-page .rf-order__steps:after {
    left: 9.5%;
    right: 9.5%;
    bottom: 20px;
    background-color: transparent;
    background-image: url("/ramochnye-fasady/img/icon-13.svg");
    background-repeat: repeat-x;
    background-size: 137px 1px;
  }
  .rf-page .rf-order__steps li {
    grid-template-rows: 48px minmax(77px, auto) 21px 26px;
    padding: 0 !important;
  }
  .rf-page .rf-order__steps li:before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 30px;
    width: 1px;
    height: 18px;
    background: url("/ramochnye-fasady/img/icon-15.svg") center top / 1px 17.5px no-repeat;
  }
  .rf-page .rf-order__steps li:after {
    grid-row: 4;
    width: 26px;
    height: 26px;
    border: 0;
  }
  .rf-page .rf-order__steps span { padding: 0 8px 8px; }
}