/* ═══════════════════════════════════════
   SERVICES.CSS — Out Shine Web Design
   The scope-of-work page of the proposal: one readable column,
   sections ruled off with a navy-and-blush pinstripe, the SEO
   add-on set apart on its own index card.
═══════════════════════════════════════ */

/* ── HERO ── (ruled sheet comes from main.css) */
.services-hero { padding: 5rem 5rem 4.5rem 6rem; }
.services-hero .hero-title { margin-bottom: 1.75rem; max-width: 20ch; font-size: clamp(2.6rem, 4.8vw, 4.4rem); line-height: 1.06; }
.services-hero .lead {
  max-width: 46ch;
  padding: 1.4rem 1.75rem;
  background: var(--cream);
  border: 1px solid rgba(var(--teal-rgb), .2);
  font-size: 1.12rem;
}
/* Service pages: breathing room between the lead box and the CTA */
.services-hero .lead + .btn-primary { margin-top: 2.25rem; }

/* ── ESSAY LAYOUT ── */
.services-essay {
  background: var(--cream);
  padding: var(--section-pad);
}
.essay-inner {
  max-width: 760px;
  margin: 0 auto;
}

.essay-block {
  padding: 4rem 0;
  position: relative;
}
.essay-block:first-child { padding-top: 0; }
/* Pinstripe rule between sections: navy line, blush line */
.essay-block + .essay-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  border-top: 1px solid var(--teal);
  border-bottom: 1px solid var(--blush);
}

.essay-block .eyebrow { margin-bottom: 0.75rem; }
.essay-block h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  margin-bottom: 1.5rem;
  line-height: 1.15;
}
.essay-block p {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.85;
  color: var(--ink);
  max-width: 65ch;
  margin-bottom: 1.25rem;
}
.essay-block p:last-child { margin-bottom: 0; }
.essay-block .check-list { margin: 1.5rem 0 0.5rem; }
.essay-block .check-list li { align-items: flex-start; }
.essay-block .check-list li::before { margin-top: 0.1rem; }

.essay-note {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: 1.75rem;
  margin-bottom: 0.25rem;
}

/* The SEO add-on gets its own index card so it reads as optional */
#seo {
  margin-top: 4rem;
  padding: 3rem 2.75rem;
  background: var(--tint);
  border-radius: 3px;
  box-shadow: var(--note-shadow);
}
#seo::before { display: none; }
#seo > p:last-child {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px dashed rgba(var(--teal-rgb), .3);
  font-size: 0.98rem;
}

/* ── CTA ── (ruled sheet comes from main.css) */
.services-cta {
  text-align: center;
  padding: 7rem 5rem;
}
.services-cta h2 { font-size: clamp(2.4rem, 4.6vw, 4rem); }
.services-cta .lead { margin: 0 auto 2.5rem; text-align: center; }

@media (max-width: 1100px) {
  .services-hero { padding: 4rem 3rem 4rem 4rem; }
  .services-cta { padding: 5rem 3rem; }
}
@media (max-width: 768px) {
  .services-hero { padding: 2.5rem 1.25rem 3rem 2rem; }
  .services-hero .lead { font-size: 1.08rem; padding: 1.15rem 1.25rem; }
  .essay-block { padding: 3rem 0; }
  .essay-block p { font-size: 1.12rem; }
  .essay-note { font-size: 0.9rem; }
  #seo { margin-top: 3rem; padding: 2rem 1.35rem; }
  .services-cta { padding: 4.5rem 1.5rem; }
}