/* =============================================================================
   development.css
   Page-only styles for /development.html.
   Foundation styles live in /css/style.css — do not duplicate tokens here.
   Shared subpage shells (.svc-hero, .ds-detail, .crosslink-band, .faq-item,
   .cta-form, #contact overrides) live in design.css + mfr-subpage.css.
   ============================================================================= */

/* =============================================================================
   CAPABILITIES SECTION
   ============================================================================= */
#capabilities .section-head h2 {
  /* Smaller than the global h2 + a ~30ch wrap so the ~58-char headline fits in
     two lines max. */
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem);
  max-width: 30ch;
}

/* Tighter h3 for 5-card grid density — mirrors integrator-services pattern */
#capabilities .card h3 {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  font-weight: 500;
}

/* Industries / definition / sequence headlines: smaller and a wider wrap than
   the design-page default (26ch) so the longest one (~62 chars) lands on two
   lines instead of three. Overrides the .ds-detail__content h2 rule in
   design.css, which this page also loads. */
.ds-detail__content h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.15rem);
  max-width: 32ch;
}

/* "What we build" — 2-2-1 standard card grid. White rounded cards on a gray
   section--alt background (foundation handles both). Matches the card sections
   on the other subpages. The 5th card spans full width and is centered. */
/* 5th card = the "1" in 2-2-1: spans both columns, content centered. */
#capabilities .card--wide {
  grid-column: 1 / -1;
  align-items: center;
  text-align: center;
}
#capabilities .card--wide .card__body { max-width: 60ch; }

/* The grid sits outside .container (the header above has its own), so cap and
   centre it to the standard content width — matching the card sections on the
   other subpages, which live inside .container. */
#capabilities .card-grid {
  max-width: var(--w-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (max-width: 768px) {
  #capabilities .card--wide {
    grid-column: auto;
    align-items: stretch;
    text-align: left;
  }
}

/* "Industries we serve" inline SVG graphic (Claude Design handoff). Square
   720x720; rendered inline so the drop-shadow filter + JetBrains Mono / Space
   Grotesk fonts apply. .mono/.sans scoped to avoid global collisions. */
.ind-graphic {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}
.ind-graphic svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter:
    drop-shadow(0 22px 38px rgba(74, 155, 209, 0.22))
    drop-shadow(0 8px 14px rgba(15, 23, 42, 0.08));
}
.ind-graphic .mono { font-family: 'JetBrains Mono', monospace; }
.ind-graphic .sans { font-family: 'Space Grotesk', sans-serif; }

/* Contact CTA headline: smaller than the global h2 so the ~62-char question
   fits in two lines max within the 720px band. Scoped to this page. */
#contact .cta-band__inner h2 {
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
}

/* "The sequence" inline SVG graphic (Claude Design handoff). 5:4 landscape
   1000x800; rendered inline so the drop-shadow filter + JetBrains Mono / Space
   Grotesk fonts apply. .mono/.sans scoped to avoid global collisions. */
.seq-graphic {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 5 / 4;
}
.seq-graphic svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter:
    drop-shadow(0 22px 38px rgba(74, 155, 209, 0.22))
    drop-shadow(0 8px 14px rgba(15, 23, 42, 0.08));
}
.seq-graphic .mono { font-family: 'JetBrains Mono', monospace; }
.seq-graphic .sans { font-family: 'Space Grotesk', sans-serif; }