/* Service pages — cloud / ai / social / marketing
 * ---------------------------------------------------------------------
 * Loaded after figtree-cream.css. Styles partials/service-page.hbs.
 *
 * THE CAPABILITY LAYOUT IS THE INTERESTING PART
 * The nine capabilities are authored as plain h3 + paragraph pairs in the
 * Ghost editor -- no HTML card, no pasted markup -- so the page stays
 * editable by anyone. That means the CSS receives a FLAT sequence of
 * siblings, not nine wrapped blocks, and CSS cannot group flat siblings
 * into cards.
 *
 * Multi-column flow is what works with flat content: the pairs reflow into
 * columns and break-after/break-inside keep each heading with its own
 * paragraph. It is not pixel-identical to the old nine-card grid, and that
 * is the deliberate trade -- editability over an exact match. If the grid
 * turns out to matter more, the alternative is an HTML card per page, which
 * puts the markup back in the editor and takes the content back out of
 * reach of anyone who is not comfortable with HTML.
 */

.ft-service-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 5rem 0 4rem;
}

.ft-service-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.1;
  margin: 0.4rem 0 1rem;
}

.ft-service-pitch {
  max-width: 48rem;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.ft-service-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.ft-service-body { padding: 4rem 0; }

/* The flat h3 + p flow, in columns. */
.ft-service-capabilities {
  columns: 3;
  column-gap: 2.5rem;
}

.ft-service-capabilities h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  color: var(--green-dark);
  /* Keep a heading with its paragraph rather than orphaned at a column foot. */
  break-after: avoid;
  page-break-after: avoid;
}

.ft-service-capabilities p {
  margin: 0 0 2rem;
  line-height: 1.65;
  color: var(--text-muted);
  break-inside: avoid;
  page-break-inside: avoid;
}

.ft-service-cta {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 4rem 0;
  text-align: center;
}

.ft-service-cta h2 { margin: 0 0 1rem; }

.ft-service-cta p {
  max-width: 40rem;
  margin: 0 auto 2rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Breakpoints match figtree.css so the whole site steps together. */
@media (max-width: 960px) {
  .ft-service-capabilities { columns: 2; }
  .ft-service-hero { padding: 3.5rem 0 3rem; }
}

@media (max-width: 600px) {
  .ft-service-capabilities { columns: 1; }
  .ft-service-hero-actions { flex-direction: column; align-items: stretch; }
  .ft-service-hero-actions .ft-btn { text-align: center; }
}