/* ---------- Hero ---------- */
.hero {
  padding-block: var(--space-xl) var(--space-2xl);
  text-align: center;
}

.hero h1 {
  margin-bottom: var(--space-lg);
}

.hero h1 span {
  color: var(--color-orange);
}

.hero__image {
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
  aspect-ratio: 12 / 7;
  object-fit: cover;
  border-bottom: 6px solid var(--color-orange);
}

/* ---------- Other services ---------- */
.other-services h2 {
  margin-bottom: var(--space-lg);
}

/* ---------- Ethos ---------- */
.ethos__inner {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.ethos__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: 12px 12px 0 var(--color-charcoal-deep);
}

.ethos__content {
  text-align: center;
}

.ethos__content h2 {
  margin-bottom: var(--space-sm);
}

.ethos__content p {
  margin: 0 auto var(--space-lg);
}

@media (min-width: 48em) {
  .ethos__inner {
    grid-template-columns: 2fr 3fr;
    gap: var(--space-2xl);
  }
}

/* ---------- About ---------- */
.about__images {
  display: grid;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.about__images img {
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
}

.about__images img + img {
  aspect-ratio: 7 / 6;
}

.about__copy {
  display: grid;
  gap: var(--space-sm);
  font-size: var(--fs-sm);
  text-align: center;
}

.about__copy p {
  margin-inline: auto;
}

@media (min-width: 48em) {
  .about__images {
    grid-template-columns: 5fr 7fr;
    max-width: 48rem;
    margin-inline: auto;
    margin-bottom: var(--space-xl);
  }

  .about__images img,
  .about__images img + img {
    aspect-ratio: auto;
    height: 24rem;
  }
}

/* ---------- Customer stories ---------- */
.story {
  text-align: left;
}

.story__title {
  margin-bottom: var(--space-md);
  padding-left: var(--space-md);
  border-left: 4px solid var(--color-orange);
  font-size: var(--fs-lg);
}

.story p {
  line-height: 1.7;
  opacity: 0.9;
}

@media (min-width: 48em) {
  .story p {
    font-size: var(--fs-md);
  }
}

.testimonials__controls {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* ---------- Contact ---------- */
.contact {
  background-color: var(--color-charcoal-dark);
  background-image: url("../../assets/images/pattern-cubes.svg");
  background-size: 120px 104px;
  color: var(--color-text-inverse);
  text-align: center;
}

.contact__area {
  max-width: none;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-orange);
}

.contact__intro {
  margin: var(--space-xs) auto var(--space-xl);
}