/* Shared CSS for service-detail pages */

.svc-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  margin-top: 24px;
}
@media (max-width: 1000px) { .svc-hero { grid-template-columns: 1fr; } }
.svc-hero__img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--surface);
}
.svc-hero__img image-slot { width: 100%; height: 100%; display: block; }

.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .features-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .features-grid { grid-template-columns: 1fr; } }
.feature {
  padding: 28px;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feature__num { font-family: var(--font-mono); font-size: 12px; color: var(--ember); letter-spacing: .1em; }
.feature h3 { font-size: 20px; }
.feature p { margin: 0; color: var(--ink-soft); font-size: 15px; }

.process-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.process-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 28px;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.process-item:last-child { border-bottom: 0; }
.process-item__num { font-family: var(--font-mono); font-size: 13px; color: var(--ember); letter-spacing: .1em; padding-top: 4px; }
.process-item strong { display: block; font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.process-item p { margin: 0; color: var(--ink-soft); font-size: 15px; max-width: 60ch; }

.cost-block {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
  padding: clamp(40px, 5vw, 64px);
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
@media (max-width: 900px) { .cost-block { grid-template-columns: 1fr; gap: 24px; } }
.cost-block__text p { margin: 0 0 14px; color: var(--ink-soft); }

.ref-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .ref-feature { grid-template-columns: 1fr; } }
.ref-feature__img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: #2A2A24;
}
.ref-feature__img image-slot { width: 100%; height: 100%; display: block; }
.ref-meta {
  list-style: none;
  padding: 24px 0 0;
  margin: 24px 0 0;
  border-top: 1px solid rgba(246,243,236,.15);
  display: grid;
  gap: 14px;
}
.ref-meta li { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(246,243,236,.1); font-family: var(--font-mono); font-size: 13px; }
.ref-meta span { color: rgba(246,243,236,.6); text-transform: uppercase; letter-spacing: .08em; }
.ref-meta strong { color: var(--bg); font-weight: 500; font-family: var(--font-sans); }

.faq-list { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.faq-item { border-bottom: 1px solid var(--hairline); padding: 24px 0; }
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding-right: 8px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 26px;
  color: var(--ember);
  font-weight: 400;
  transition: transform .2s ease;
  line-height: 1;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item__body { padding-top: 14px; max-width: 70ch; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }