/* ===== Service pages (tile, hardwood, vinyl, carpet, commercial) =====
   Builds on style.css + project.css (p-hero, onsite-grid, spec-list, project-cta). */

/* Hero picture not supplied yet: a dark marble-toned panel with the emblem, so the page still looks finished */
.p-hero-media--pending {
  background:
    radial-gradient(120% 90% at 70% 30%, rgba(200,163,111,.18), rgba(200,163,111,0) 60%),
    linear-gradient(160deg, #2a2825 0%, #161412 55%, #0e0d0b 100%);
}
.p-hero-media--pending::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: min(260px, 40%); aspect-ratio: 1;
  background: url("../assets/brand/agora-temple-black.png") center / contain no-repeat;
  filter: invert(1); opacity: .08;
}

.svc-intro { background: var(--paper); }
.svc-intro .install-grid { margin-top: 8px; }

/* How we work */
.svc-steps-section { background: var(--marble); }
.svc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; counter-reset: step; }
.svc-steps li { counter-increment: step; border-top: 1px solid var(--line); padding-top: 22px; }
.svc-steps li::before { content: "0" counter(step); display: block; font: 600 40px/1 var(--serif); color: var(--bronze); margin-bottom: 14px; }
.svc-steps h3 { font-size: 24px; margin-bottom: 10px; }
.svc-steps p { font-size: 15px; color: var(--muted); margin: 0; }

.svc-photos .onsite-more { margin: 36px 0 0; text-align: center; }
.svc-photos .btn-ghost { color: var(--white); }
.svc-photos .spaces-grid figure { aspect-ratio: 16 / 10; }
.svc-note { margin: 22px 0 0; font-size: 14px; color: rgba(255,255,255,.55); }
.svc-note a { color: var(--bronze-light); }

/* FAQ */
.svc-faq { background: var(--paper); }
.faq-list { max-width: 860px; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer; padding: 24px 44px 24px 0; position: relative;
  font: 600 clamp(22px, 2.2vw, 27px)/1.25 var(--serif);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 20px; font: 400 30px/1 var(--sans); color: var(--bronze); transition: transform .3s var(--ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list .faq-a { padding: 0 0 26px; color: var(--muted); max-width: 70ch; }
.faq-list .faq-a p:last-child { margin-bottom: 0; }
.faq-list a { color: var(--bronze); }

/* Other services */
.svc-related { background: var(--marble); }
.svc-related + .project-cta { border-top: 1px solid var(--line); }
.svc-related-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.svc-related-list a {
  display: block; height: 100%; padding: 26px 24px; background: var(--paper); border: 1px solid var(--line);
  text-decoration: none; transition: border-color .3s, transform .3s var(--ease);
}
.svc-related-list a:hover { border-color: var(--bronze); transform: translateY(-2px); }
.svc-related-list strong { display: block; font: 600 24px/1.15 var(--serif); margin-bottom: 8px; }
.svc-related-list span { font-size: 15px; color: var(--muted); }

@media (max-width: 1080px) {
  .svc-steps { grid-template-columns: repeat(3, 1fr); }
  .svc-related-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  /* stacked hero: an empty picture panel would just be a dark block, so drop it until the picture exists */
  .p-hero-media--pending { display: none; }
}
@media (max-width: 620px) {
  .svc-steps, .svc-related-list { grid-template-columns: 1fr; }
}