/* ============================================================
   SERVICE PAGE — additional styles (loaded alongside site.css)
   ============================================================ */

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb {
  padding: 14px clamp(24px, 8vw, 120px);
  background: var(--bg-0);
  border-bottom: 1px solid var(--line);
  font-size: .82rem;
  color: var(--tx-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.breadcrumb a { color: var(--tx-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--teal); opacity: 1; }
.breadcrumb [aria-current="page"] { color: var(--tx-2); }

/* ── Service hero ────────────────────────────────────────── */
.sp-hero {
  padding: clamp(72px, 10vw, 130px) clamp(24px, 8vw, 120px);
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
}
.sp-hero-inner { max-width: 780px; }
.sp-hero h1 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.04;
  margin: .12em 0 .5em;
  color: var(--tx-1);
}
.sp-lead {
  font-size: clamp(1rem, 1.8vw, 1.16rem);
  line-height: 1.65;
  color: var(--tx-2);
  max-width: 620px;
  margin-bottom: 2rem;
}

/* ── Warning signs / feature list ───────────────────────── */
.sp-signs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 820px;
  margin-top: 1rem;
}
.sp-sign-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .88rem;
  color: var(--tx-2);
  line-height: 1.5;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .2s;
}
.sp-sign-item:hover { border-color: var(--teal-border); }
.sp-sign-item svg { flex-shrink: 0; margin-top: 2px; }

/* ── CTA block ───────────────────────────────────────────── */
.sp-cta {
  background: var(--bg-2);
  border-top: 1px solid var(--teal-border);
  position: relative;
  overflow: hidden;
}
.sp-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(0,196,176,.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(0,196,176,.07) 0%, transparent 60%);
  pointer-events: none;
}
.sp-cta > .section { position: relative; z-index: 1; }
.sp-cta-inner { max-width: 700px; }
.sp-cta h2 {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.06;
  margin: .1em 0 .5em;
  color: var(--tx-1);
}

/* ── Related service cards (anchor elements) ─────────────── */
.sp-related-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: block;
}
.sp-related-card h3 { color: var(--tx-1); transition: color .2s; }
.sp-related-card:hover { opacity: 1; }
.sp-related-card:hover h3 { color: var(--teal); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .sp-signs { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sp-hero h1 { font-size: 2rem; }
}