html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.residential-page {
  background: #fff;
}

.residential-stage-section {
  --stage-width: 1920px;
  --stage-height: 1081px;
  --stage-scale: clamp(0.4167, calc(100vw / 1920px), 1);
  position: relative;
  height: calc(var(--stage-height) * var(--stage-scale));
  overflow: hidden;
  background: #fff;
}

.residential-stage-section--description {
  --stage-height: 1099px;
}

.residential-stage-section--work {
  --stage-height: 1069px;
}

.residential-stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--stage-width);
  height: var(--stage-height);
  margin-left: calc(var(--stage-width) / -2);
  transform: scale(var(--stage-scale));
  transform-origin: top center;
}

@media (min-width: 1920px) {
  .residential-stage-section {
    --stage-scale: 1;
  }
}

.residential-hero {
  background: #faf5f2;
}

.residential-hero__bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1920px;
  height: 1081px;
  transform: translateX(-50%);
}

.residential-hero__image,
.residential-hero__overlay {
  position: absolute;
  inset: 0;
}

.residential-hero__image {
  width: 1920px;
  height: 1081px;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}

.residential-hero__overlay {
  pointer-events: none;
}

.residential-hero .site-header {
  position: absolute;
  top: 50px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}

.residential-hero__content {
  position: absolute;
  top: 255px;
  left: 260px;
  color: var(--color-ink);
}

.residential-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: "stolzlregular", sans-serif;
  font-size: 12px;
  line-height: 32px;
  color: rgba(1, 3, 0, 0.6);
  text-transform: uppercase;
}

.residential-eyebrow::before {
  content: "";
  flex: 0 0 44px;
  width: 44px;
  height: 1px;
  background: currentColor;
}

.residential-hero__title {
  width: 763px;
  margin: 29px 0 0 -9px;
  font-family: "stolzlthin", sans-serif;
  font-size: 90px;
  font-weight: 400;
  line-height: 100px;
}

.residential-hero__lead {
  width: 576px;
  margin: 38px 0 0;
  font-family: "stolzllight", sans-serif;
  font-size: 16px;
  line-height: 30px;
  color: #49443e;
}

.residential-hero__actions {
  display: flex;
  align-items: center;
  gap: 25px;
  margin: 27px 0 0;
}

.residential-primary-button,
.residential-outline-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border-radius: 8px;
  font-family: "stolzlregular", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.residential-primary-button {
  width: 190px;
  padding: 9px 24px 10px;
  overflow: hidden;
  background: #f44903;
  color: #fff;
}
.residential-primary-button:hover,
.residential-primary-button:focus-visible,
.residential-download-button:hover,
.residential-download-button:focus-visible {
  background: radial-gradient(39.54% 100% at 50.28% 100%, #f78353 0%, #f44903 100%), #f44903;
  color: #fff;
}

.residential-primary-button:focus-visible,
.residential-download-button:focus-visible {
  outline: 2px solid #f44903;
  outline-offset: 3px;
}


.residential-outline-button {
  width: 171px;
  padding: 18px 36px;
  border: 1px solid #eac9a8;
  border-radius: 10px;
  color: #f44903;
}

.residential-outline-button:hover,
.residential-outline-button:focus-visible {
  border-color: #f44903;
  background: #f44903;
  color: #ffffff;
}

.residential-hero__cards {
  position: absolute;
  top: 828px;
  left: 260px;
  display: flex;
  justify-content: space-between;
  width: 915px;
}

.residential-hero-card {
  position: relative;
  width: 210px;
  height: 163px;
  border: 1px solid rgba(245, 220, 195, 0.8);
  border-radius: 8px;
  background: rgba(255, 250, 244, 0.4);
}

.residential-hero-card__icon {
  position: absolute;
  top: 29px;
  left: 21px;
  width: 38px;
  height: 38px;
}

.residential-hero-card__icon--engineering {
  top: 25px;
  left: 20px;
  width: 39px;
  height: 41px;
}

.residential-hero-card__icon--lobby {
  top: 26px;
  left: 20px;
  width: 42px;
  height: 43px;
}

.residential-hero-card__icon--commissioning {
  top: 17px;
  left: 10px;
  width: 60px;
  height: 60px;
}

.residential-hero-card__title {
  position: absolute;
  top: 95px;
  left: 20px;
  width: 166px;
  margin: 0;
  font-family: "stolzlregular", sans-serif;
  font-size: 16px;
  line-height: 26px;
  color: #010300;
}

.residential-description__decor {
  position: absolute;
  top: 0;
  left: 596px;
  width: 1390px;
  height: 782px;
  max-width: none;
  object-fit: cover;
}

.residential-description__content {
  position: absolute;
  top: 160px;
  left: 260px;
}

.residential-description__eyebrow {
  color: rgba(1, 3, 0, 0.7);
}

.residential-section-title {
  margin: 34px 0 0;
  font-family: "stolzlregular", sans-serif;
  font-size: 70px;
  font-weight: 400;
  line-height: 100px;
  color: #010300;
}

.residential-description__text {
  width: 775px;
  margin: 12px 0 0 2px;
  font-family: "stolzlbook", sans-serif;
  font-size: 18px;
  line-height: 30px;
  color: #49443e;
}

.residential-download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  transition: background-color 0.2s ease, color 0.2s ease;
  width: 351px;
  min-height: 70px;
  margin-top: 29px;
  padding: 9px 24px 10px;
  overflow: hidden;
  border-radius: 8px;
  background: #f44903;
  color: #fff;
  font-family: "stolzlmedium", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}


.residential-download-button img {
  width: 28px;
  height: 33px;
}

.residential-description__cards {
  position: absolute;
  top: 594px;
  left: 258px;
  display: flex;
  gap: 25px;
  width: 1400px;
}

.residential-description-card {
  position: relative;
  width: 450px;
  height: 420px;
  overflow: hidden;
  border-radius: 30px;
}

.residential-description-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.residential-description-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(20.540868593093904deg, #faf5f2 16.192%, rgba(250, 245, 242, 0) 47.895%);
}

.residential-description-card:first-child::after {
  background: linear-gradient(11.166954837157917deg, #faf5f2 8.7291%, rgba(250, 245, 242, 0) 47.941%);
}

.residential-description-card:nth-child(3)::after {
  background: linear-gradient(19.718774626483196deg, #faf5f2 15.766%, rgba(250, 245, 242, 0) 47.935%);
}

.residential-description-card__caption {
  position: absolute;
  z-index: 2;
  left: 35px;
  bottom: 30px;
  width: 387px;
  margin: 0;
  font-family: "stolzlregular", sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  color: #010300;
}

.residential-work__head {
  position: absolute;
  top: 75px;
  left: 259px;
}

.residential-work__title {
  margin: 0;
}

.residential-work__lead {
  width: 657px;
  margin: 3px 0 0;
  font-family: "stolzlbook", sans-serif;
  font-size: 18px;
  line-height: 30px;
  color: #49443e;
}

.residential-work__button {
  width: 266px;
  min-height: 62px;
  margin-top: 40px;
  font-size: 18px;
}

.residential-work__steps {
  position: absolute;
  top: 390px;
  left: 258px;
  width: 413px;
  height: 519px;
  padding: 39px;
  border: 1px solid #f5dcc3;
  border-radius: 20px;
  --residential-work-step-index: 1;
}

.residential-work__steps::before {
  content: "";
  position: absolute;
  top: calc(9px + (var(--residential-work-step-index, 1) * 82px));
  left: -1px;
  width: 3px;
  height: 83px;
  background: #f44903;
  transition: top 0.2s ease;
}

.residential-work__steps-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.residential-work__steps-list li {
  display: flex;
  align-items: center;
  width: 333px;
  min-height: 82px;
  border-bottom: 1px solid rgba(245, 220, 195, 0.9);
  font-family: "stolzlregular", sans-serif;
  font-size: 18px;
  line-height: 30px;
  color: #010300;
  cursor: pointer;
  transition: color 0.2s ease;
}

.residential-work__steps-list li:hover,
.residential-work__steps-list li:focus-visible,
.residential-work__steps-list li.is-active {
  color: #f44903;
}

.residential-work__steps-list li:focus-visible {
  outline: 2px solid #f44903;
  outline-offset: 4px;
}

.residential-work__steps-list li:last-child {
  min-height: 59px;
  border-bottom: 0;
}

.residential-work__decor {
  position: absolute;
  top: 107px;
  left: 1206px;
  width: 712px;
  height: 545px;
  overflow: hidden;
  opacity: 0.7;
  pointer-events: none;
}

.residential-work__decor-image {
  position: absolute;
  top: 0;
  left: -436px;
  width: 1148px;
  height: 860px;
  max-width: none;
  object-fit: cover;
}

.residential-work__detail {
  position: absolute;
  top: 390px;
  left: 721px;
  width: 937px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.residential-work__detail.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.residential-work__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 91px;
  height: 34px;
  border-radius: 20px;
  background: rgba(245, 220, 195, 0.6);
  color: #8c7863;
  font-family: "stolzlmedium", sans-serif;
  font-size: 14px;
  line-height: 1;
}

.residential-work__detail-title {
  margin: 14px 0 0;
  font-family: "stolzllight", sans-serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 100px;
  color: #010300;
}

.residential-work__detail-text {
  width: 775px;
  margin: -8px 0 0;
  font-family: "stolzlbook", sans-serif;
  font-size: 18px;
  line-height: 30px;
  color: #49443e;
}

.residential-work__features {
  display: grid;
  grid-template-columns: 402px 428px;
  column-gap: 107px;
  row-gap: 52px;
  margin-top: 41px;
}

.residential-work-feature {
  display: grid;
  grid-template-columns: 68px 1fr;
  column-gap: 26px;
  min-height: 133px;
  border-bottom: 1px solid rgba(245, 220, 195, 0.9);
}

.residential-work-feature:nth-child(n + 3) {
  border-bottom: 0;
}

.residential-work-feature__icon {
  width: 68px;
  height: 78px;
  object-fit: contain;
}

.residential-work-feature__title {
  margin: 8px 0 0;
  font-family: "stolzlregular", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: #010300;
}

.residential-work-feature__text {
  width: 334px;
  margin: 11px 0 0;
  font-family: "stolzlbook", sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #49443e;
}

.residential-work-feature:first-child .residential-work-feature__text {
  width: 279px;
}