/* ================================================================
   YUVATI — Service Pages  |  extends styles.css
   ================================================================ */

/* ── BREADCRUMB ─────────────────────────────────────────────── */
.breadcrumb { background: var(--ds-primary); padding: 16px 0 0; }
.breadcrumb ol {
  display: flex; gap: 8px; align-items: center; list-style: none;
  font-family: var(--ds-font-mono); font-size: 0.72rem;
  letter-spacing: 0.05em; color: rgba(237,234,222,0.45);
}
.breadcrumb li + li::before { content: '/'; margin-right: 8px; }
.breadcrumb a { color: rgba(237,234,222,0.45); text-decoration: none; }
.breadcrumb a:hover { color: var(--ds-surface); }
.breadcrumb [aria-current] { color: rgba(237,234,222,0.72); }

/* ── SERVICE HERO ───────────────────────────────────────────── */
.svc-hero {
  background: var(--ds-primary);
  padding: clamp(40px,7vw,88px) 0 clamp(56px,8vw,96px);
}
.svc-hero-inner { max-width: 760px; }
.svc-hero-heading {
  font-family: var(--ds-font-display);
  font-size: clamp(2rem,5vw,3.5rem);
  font-weight: 700; line-height: 1.08;
  letter-spacing: -0.02em; color: var(--ds-surface);
  margin: 16px 0 24px; text-wrap: balance;
}
.svc-hero-intro {
  font-size: clamp(0.97rem,1.1vw + 0.6rem,1.12rem);
  line-height: 1.75; color: rgba(237,234,222,0.72);
  max-width: 62ch; margin-bottom: 36px;
}
.svc-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── CAPABILITIES ───────────────────────────────────────────── */
.svc-capabilities { padding: var(--ds-section-pad) 0; background: #fff; }
.svc-cap-grid {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(272px,1fr));
  gap: 20px; margin-top: 48px;
}
.svc-cap-item {
  display: flex; gap: 16px; padding: 22px 20px;
  border: 1px solid rgba(7,44,44,0.08); border-radius: var(--ds-radius-md);
  transition: box-shadow 0.2s;
}
.svc-cap-item:hover { box-shadow: 0 4px 16px rgba(7,44,44,0.06); }
.svc-cap-icon {
  flex-shrink: 0; width: 40px; height: 40px;
  border-radius: var(--ds-radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.svc-cap-name {
  font-weight: 700; font-size: 0.93rem;
  color: var(--ds-text); display: block; margin-bottom: 5px;
}
.svc-cap-desc { font-size: 0.87rem; line-height: 1.6; color: rgba(17,24,39,0.62); }

/* ── PROCESS STEPS ──────────────────────────────────────────── */
.svc-process { padding: var(--ds-section-pad) 0; background: var(--ds-surface); }
.svc-steps {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 32px; margin-top: 48px;
}
.svc-step-num {
  font-family: var(--ds-font-display); font-size: 3.2rem;
  font-weight: 700; color: rgba(7,44,44,0.10); line-height: 1; margin-bottom: 12px;
}
.svc-step-title { font-weight: 700; font-size: 1rem; color: var(--ds-text); margin-bottom: 8px; }
.svc-step-desc { font-size: 0.9rem; line-height: 1.65; color: rgba(17,24,39,0.62); }

/* ── TECH STACK ─────────────────────────────────────────────── */
.svc-tech {
  padding: 40px 0; background: #fff;
  border-top: 1px solid rgba(7,44,44,0.07); border-bottom: 1px solid rgba(7,44,44,0.07);
}
.svc-tech-label {
  font-family: var(--ds-font-mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(7,44,44,0.4); margin-bottom: 14px;
}
.svc-tech-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-tech-badge {
  padding: 5px 13px; border-radius: 100px; background: rgba(7,44,44,0.06);
  font-family: var(--ds-font-mono); font-size: 0.76rem;
  font-weight: 700; color: var(--ds-primary); letter-spacing: 0.03em;
}

/* ── PROOF / TESTIMONIAL ────────────────────────────────────── */
.svc-proof {
  padding: var(--ds-section-pad) 0;
  background: rgba(255,95,3,0.04);
  border-top: 1px solid rgba(255,95,3,0.12);
  border-bottom: 1px solid rgba(255,95,3,0.12);
}
.svc-proof-inner { max-width: 680px; margin: 0 auto; text-align: center; }
.svc-proof-quote {
  font-family: var(--ds-font-display);
  font-size: clamp(1.15rem,2.5vw,1.6rem);
  font-weight: 500; line-height: 1.45; color: var(--ds-primary); margin-bottom: 24px;
}
.svc-proof-quote::before {
  content: '\201C'; font-size: 4rem; line-height: 0;
  vertical-align: -0.4em; margin-right: 4px;
  color: var(--ds-secondary); opacity: 0.5;
}
.svc-proof-attr {
  font-family: var(--ds-font-mono); font-size: 0.76rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(7,44,44,0.45);
}
.svc-proof-outcome {
  display: inline-block; margin-top: 20px; padding: 8px 18px;
  border-radius: 100px; background: rgba(255,95,3,0.10);
  font-family: var(--ds-font-mono); font-size: 0.8rem;
  font-weight: 700; color: var(--ds-secondary); letter-spacing: 0.04em;
}

/* ── FAQ ────────────────────────────────────────────────────── */
.svc-faq { padding: var(--ds-section-pad) 0; background: #fff; }
.faq-list { margin-top: 48px; max-width: 760px; }
.faq-item { border-bottom: 1px solid rgba(7,44,44,0.09); padding: 22px 0; }
.faq-item:first-child { border-top: 1px solid rgba(7,44,44,0.09); }
.faq-question { font-weight: 700; font-size: 0.97rem; color: var(--ds-text); margin-bottom: 10px; }
.faq-answer { font-size: 0.91rem; line-height: 1.72; color: rgba(17,24,39,0.68); max-width: 68ch; }

/* ── PER-SERVICE ICON COLOURS ───────────────────────────────── */
.svc--bi  .svc-cap-icon { background: rgba(7,44,44,0.07);   color: var(--ds-primary); }
.svc--ai  .svc-cap-icon { background: rgba(255,95,3,0.10);  color: var(--ds-secondary); }
.svc--dev .svc-cap-icon { background: rgba(37,99,235,0.10); color: var(--ds-tertiary); }
.svc--leg .svc-cap-icon { background: rgba(109,40,217,0.08); color: #6D28D9; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .svc-cap-grid { grid-template-columns: 1fr; }
  .svc-steps    { grid-template-columns: 1fr; gap: 24px; }
}