/* Styles for the service landing pages (/real-estate, /construction, /events) */

.hero--page {
  min-height: 74vh;
  align-items: center;
}

.hero--page .hero-content { padding-block: var(--space-8); }

/* Service-page heroes use brighter daylight imagery than the homepage, so the
   scrim needs more weight at the top (under the header) and through the middle
   (behind the body copy) to keep everything readable. */
.hero--page .hero-media::after {
  background:
    linear-gradient(180deg, rgba(10, 8, 6, 0.72) 0%, rgba(10, 8, 6, 0.5) 28%, rgba(10, 8, 6, 0.62) 62%, rgba(10, 8, 6, 0.95) 100%),
    linear-gradient(90deg, rgba(10, 8, 6, 0.68) 0%, rgba(10, 8, 6, 0.08) 62%);
}

.breadcrumb {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  /* Sits on the hero scrim, so it must stay light in both themes. */
  color: rgba(245, 239, 228, 0.72);
}
.breadcrumb a { color: inherit; text-decoration: none; opacity: 0.85; }
.breadcrumb a:hover { opacity: 1; text-decoration: underline; }
.breadcrumb span[aria-hidden] { opacity: 0.45; }

/* ---------- Process steps ---------- */
.step-list {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.15rem;
  align-items: start;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.step.is-visible { opacity: 1; transform: none; }
.step-num {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-inverse);
  background: var(--color-primary);
}
.step h4 {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.step p { margin: 0; color: var(--color-text-muted); line-height: 1.65; }

/* ---------- FAQ ---------- */
.faq-list {
  display: grid;
  gap: 0.85rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: 0 1.5rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.faq-item.is-visible { opacity: 1; transform: none; }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.2rem 2.25rem 1.2rem 0;
  position: relative;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--color-text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  opacity: 0.6;
  transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item p {
  margin: 0;
  padding: 0 0 1.35rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 62ch;
}

@media (max-width: 560px) {
  .step { padding: 1.15rem 1.15rem; gap: 0.9rem; }
  .faq-item { padding: 0 1.15rem; }
}