/* Construction Services page specific styles */
.construction-page {
  --construction-accent-rgb: 72, 169, 166;
}

/* Divider image for construction hero section - using relative path */
.construction-image-hero {
  background-image: url("../img/album-thumbs/arctectural/1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Professional text block styling - matches about page */
.construction-page .large-text-block {
  margin: 4rem 0 5rem 0;
  padding: 0;
}

@media only screen and (min-width: 768px) {
  .construction-page .large-text-block {
    margin: 8rem 0 9rem 0;
  }
}

@media only screen and (min-width: 1200px) {
  .construction-page .large-text-block {
    margin: 10rem 0 11rem 0;
  }
}

.construction-page .large-text-block .block__title {
  margin-bottom: 1.6rem;
  font-weight: 600;
}

.construction-page .large-text-block p {
  margin-bottom: 1.6rem;
  color: var(--t-medium);
  max-width: none;
}

.construction-page .large-text-block ul {
  margin: 1rem 0 1.8rem 1.8rem;
}

/* Section separator - matches about page exactly */
.construction-page .section-sprater {
  width: calc(100% - 2rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--base-rgb), 0.06), transparent);
  margin: 2rem 1rem;
  border-radius: 2px;
  opacity: 0.95;
}

@media only screen and (min-width: 1200px) {
  .construction-page .section-sprater {
    margin: 3rem 1rem;
  }
}

/* Image styling - side positioned */
.construction-page .about-img {
  margin: 2.4rem 0;
  border-radius: 1.2rem;
  overflow: hidden;
}

.construction-page .about-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1.2rem;
}

.construction-page .about-img.side-left {
  float: left;
  width: 40%;
  margin-right: 2rem;
  margin-bottom: 1.4rem;
}

.construction-page .about-img.side-right {
  float: right;
  width: 40%;
  margin-left: 2rem;
  margin-bottom: 1.4rem;
}

/* Professional divider image */
.construction-page .divider-image {
  width: 100%;
  height: 40rem;
  margin-bottom: 3rem;
  border-radius: 1.2rem;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

/* CTA section styling */
.construction-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4rem;
  padding: 3.2rem;
  border-radius: 1.6rem;
  border: 1px solid rgba(var(--construction-accent-rgb), 0.2);
  background: linear-gradient(135deg, rgba(var(--construction-accent-rgb), 0.08), rgba(var(--construction-accent-rgb), 0.04));
  transition: all var(--_animspeed-medium) ease;
}

.construction-cta:hover {
  border-color: rgba(var(--construction-accent-rgb), 0.4);
  background: linear-gradient(135deg, rgba(var(--construction-accent-rgb), 0.12), rgba(var(--construction-accent-rgb), 0.06));
  transform: translateY(-2px);
}

.construction-cta__content {
  flex: 1;
}

.construction-cta__title {
  font: normal 500 2rem var(--_font-default);
  color: var(--t-bright);
  margin: 0 0 1rem 0;
}

.construction-cta__text {
  font: normal 400 1.8rem var(--_font-default);
  color: var(--t-medium);
  line-height: 1.6;
  margin: 0;
}

.construction-cta__action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Small icon button styling for CTA - theme-aware */
.construction-cta .btn-circle-icon {
  width: 5.6rem;
  height: 5.6rem;
  border: 1px solid rgba(var(--construction-accent-rgb), 0.3);
  background-color: var(--neutral-bright);
  color: var(--t-opp-bright);
  font-size: 2.2rem;
  transition: all var(--_animspeed-medium) ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.construction-cta .btn-circle-icon:hover {
  border-color: rgb(var(--construction-accent-rgb));
  background-color: rgba(var(--construction-accent-rgb), 0.2);
  color: rgb(var(--construction-accent-rgb));
  transform: translateX(3px);
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .construction-cta .btn-circle-icon {
    background-color: var(--neutral-dark);
    color: var(--t-bright);
  }

  .construction-cta .btn-circle-icon:hover {
    background-color: rgba(var(--construction-accent-rgb), 0.2);
    color: rgb(var(--construction-accent-rgb));
  }
}

@media only screen and (min-width: 768px) {
  .construction-cta .btn-circle-icon {
    width: 6.4rem;
    height: 6.4rem;
    font-size: 2.4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .construction-cta .btn-circle-icon {
    width: 7.2rem;
    height: 7.2rem;
    font-size: 2.8rem;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .construction-cta {
    flex-direction: column;
    text-align: center;
    gap: 1.8rem;
    padding: 2.4rem;
  }

  .construction-cta__title {
    font-size: 1.8rem;
  }

  .construction-cta__text {
    font-size: 1.6rem;
  }
}