/* ============================================================
   17 · Service pages — shared layout (themed via --svc)
   Each service page adds css/services/NN-name.css to set:
   --svc and --svc-rgb for its accent color.
   ============================================================ */

.s-page { position: relative; z-index: 2; }

.kicker {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--svc); margin-bottom: 16px;
}

/* page hero */
.s-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + clamp(48px, 9vw, 96px)) 0 clamp(28px, 5vw, 48px);
}
.s-hero::before {
  content: ""; position: absolute; top: -160px; left: -120px;
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--svc-rgb), .16), transparent 65%);
  filter: blur(30px); pointer-events: none;
}

.breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate-500); margin-bottom: 30px;
}
.breadcrumb a { color: var(--slate-400); transition: color .25s; }
.breadcrumb a:hover { color: var(--svc); }
.breadcrumb .sep { opacity: .5; }
.breadcrumb .current { color: var(--svc); }

.s-hero-title {
  font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.02em;
  margin: 14px 0 20px; max-width: 780px;
}
.s-grad {
  background: linear-gradient(120deg, var(--svc), var(--violet-400));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.s-hero-sub { color: var(--slate-400); max-width: 660px; font-size: 1.02rem; }
.s-hero-sub strong { color: var(--slate-100); }
.s-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.s-chips li {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate-300); padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(var(--svc-rgb), .3); background: rgba(var(--svc-rgb), .08);
}

/* content sections */
.s-section { padding: clamp(48px, 7vw, 88px) 0; position: relative; }
.s-section + .s-section { border-top: 1px solid rgba(148, 163, 184, .1); }
.s-kicker {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--svc); margin-bottom: 12px;
}
.s-block-title { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 36px; }

/* overview */
.s-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); }
.s-copy h2 { font-size: 1.35rem; margin-bottom: 16px; }
.s-copy p { color: var(--slate-400); margin-bottom: 14px; }
.s-copy p strong { color: var(--slate-100); }

/* curriculum topics */
.s-topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.s-topic {
  padding: 20px 22px; border-radius: var(--radius-md);
  border: 1px solid rgba(148, 163, 184, .2); background: rgba(255, 255, 255, .8);
  transition: transform .3s var(--ease), border-color .3s;
}
.s-topic:hover { transform: translateY(-4px); border-color: rgba(var(--svc-rgb), .5); }
.s-topic span { display: block; font-family: var(--font-mono); font-size: .8rem; color: var(--svc); margin-bottom: 8px; }
.s-topic h3 { font-size: 1rem; margin-bottom: 6px; }
.s-topic p { color: var(--slate-400); font-size: .85rem; }

/* deliverables */
.s-deliverables { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.s-deliverables li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border-radius: var(--radius-md);
  border: 1px solid rgba(148, 163, 184, .2); background: rgba(255, 255, 255, .8);
}
.s-deliverables li::before {
  content: "✓"; flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 8px; background: rgba(var(--svc-rgb), .15); color: var(--svc); font-size: .82rem;
}
.s-deliverables h3 { font-size: .98rem; margin-bottom: 4px; }
.s-deliverables p { color: var(--slate-400); font-size: .85rem; }

/* tools */
.s-tools { display: flex; flex-wrap: wrap; gap: 10px; }
.s-tool {
  font-family: var(--font-mono); font-size: .76rem; color: var(--slate-300);
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(var(--svc-rgb), .3); background: rgba(var(--svc-rgb), .07);
  transition: background .25s, color .25s, transform .25s var(--ease);
}
.s-tool:hover { background: rgba(var(--svc-rgb), .25); color: var(--svc); transform: translateY(-2px); }

/* CTA band */
.s-cta {
  position: relative; overflow: hidden; text-align: left;
  border-radius: var(--radius-lg); border: 1px solid rgba(var(--svc-rgb), .35);
  padding: clamp(40px, 6vw, 70px);
  background: linear-gradient(135deg, rgba(var(--svc-rgb), .14), rgba(124, 58, 237, .12));
  box-shadow: var(--shadow-1);
}
.s-cta h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin-bottom: 12px; }
.s-cta p { color: var(--slate-400); max-width: 560px; margin-bottom: 30px; }
.s-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* prev / next pager */
.s-pager { display: flex; justify-content: space-between; gap: 20px; margin-top: 40px; }
.s-pager a {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--slate-400); padding: 12px 18px; border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 999px; transition: border-color .25s, color .25s;
}
.s-pager a:hover { color: var(--svc); border-color: rgba(var(--svc-rgb), .5); }
.s-pager svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.pager-prev svg { transform: rotate(180deg); }
.pager-prev:hover svg { transform: rotate(180deg) translateX(3px); }
.pager-next:hover svg { transform: translateX(3px); }
.s-pager .pager-label { display: block; font-size: .6rem; letter-spacing: .18em; color: var(--slate-500); }
.s-pager .pager-name { display: block; margin-top: 2px; }

@media (max-width: 900px) {
  .s-grid-2, .s-deliverables { grid-template-columns: 1fr; }
  .s-topics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .s-topics { grid-template-columns: 1fr; }
  .s-pager { flex-direction: column; }
}