/* ===== SERVICE PAGE SHARED STYLES ===== */

/* HERO */
.sp-hero {
  border-bottom: 1px solid var(--border);
}
.sp-hero-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 140px 40px 80px;
}
.sp-breadcrumb {
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 28px;
}
.sp-breadcrumb a {
  color: var(--text-faint); text-decoration: none; transition: color .2s;
}
.sp-breadcrumb a:hover { color: var(--text-muted); }
.sp-hero-inner h1 {
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 300; letter-spacing: -0.04em; line-height: 1;
  color: var(--text); margin-bottom: 28px;
}
.sp-hero-sub {
  font-size: 1rem; color: var(--text-muted); line-height: 1.75;
  max-width: 560px; margin-bottom: 40px;
}
.sp-cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bg); background: var(--text);
  border: none; border-radius: 100px; padding: 14px 28px;
  text-decoration: none; transition: opacity .2s; white-space: nowrap;
}
.sp-cta-btn:hover { opacity: 0.8; }

/* BODY */
.sp-body { background: var(--bg); }
.sp-body-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 0 40px 80px;
}

/* INTRO */
.sp-intro {
  padding: 80px 0 60px;
  border-bottom: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
}
.sp-intro h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 300; letter-spacing: -0.03em;
  color: var(--text); grid-column: 1 / -1;
  margin-bottom: 0;
}
.sp-intro p {
  font-size: 0.92rem; color: var(--text-muted); line-height: 1.8;
}

/* DELIVERABLES */
.sp-deliverables { padding: 60px 0; border-bottom: 1px solid var(--border); }
.sp-deliverables h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 300; letter-spacing: -0.03em;
  color: var(--text); margin-bottom: 48px;
}
.sp-items {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border); border: 1px solid var(--border);
}
.sp-item {
  background: var(--bg); padding: 32px 28px;
  display: flex; gap: 20px; align-items: flex-start;
}
.sp-item-num {
  font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-faint); padding-top: 4px; flex-shrink: 0; min-width: 24px;
}
.sp-item-title { font-size: 0.92rem; font-weight: 500; color: var(--text); margin-bottom: 8px; }
.sp-item-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.7; }

/* SUITABLE FOR */
.sp-suitable { padding: 60px 0; border-bottom: 1px solid var(--border); }
.sp-suitable h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 300; letter-spacing: -0.03em;
  color: var(--text); margin-bottom: 28px;
}
.sp-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-tags span {
  font-size: 0.78rem; color: var(--text-muted);
  border: 1px solid var(--border-mid); border-radius: 100px; padding: 8px 18px;
}

/* OTHER SERVICES */
.sp-other { padding: 60px 0 0; }
.sp-other h2 {
  font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 24px;
}
.sp-other-links {
  display: flex; flex-wrap: wrap; gap: 12px;
}
.sp-other-links a {
  font-size: 0.82rem; color: var(--text-muted);
  text-decoration: none; border-bottom: 1px solid var(--border-mid); padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.sp-other-links a:hover { color: var(--text); border-color: var(--text-muted); }

/* CTA SECTION */
.sp-cta-section {
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.sp-cta-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 80px 40px 100px;
}
.sp-cta-inner h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 300; letter-spacing: -0.03em; line-height: 1.1;
  color: var(--text); margin-bottom: 16px;
}
.sp-cta-inner p {
  font-size: 0.92rem; color: var(--text-muted); line-height: 1.75;
  max-width: 460px; margin-bottom: 36px;
}

/* MOBILE */
@media (max-width: 900px) {
  .sp-hero-inner { padding: 100px 20px 60px; }
  .sp-body-inner { padding: 0 20px 60px; }
  .sp-intro { grid-template-columns: 1fr; gap: 20px; padding: 52px 0 40px; }
  .sp-intro h2 { grid-column: 1; }
  .sp-items { grid-template-columns: 1fr; }
  .sp-deliverables, .sp-suitable, .sp-other { padding: 40px 0; }
  .sp-deliverables h2, .sp-suitable h2 { margin-bottom: 28px; }
  .sp-cta-inner { padding: 60px 20px 80px; }
}