/* ── Typography ─────────────────────────────────── */ 
h1 { font-size: 2.4rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.35rem; margin-top: 20px; }
.hero .lead { font-size: 1.05rem; }

/* ── Spacing ────────────────────────────────────── */
.vpadded      { padding-top: 44px; padding-bottom: 44px; }
.padded       { padding: 24px; }
.padded-small { padding: 16px; }
.topmargin    { margin-top: 36px; }
.topmargin-med { margin-top: 24px; }
.margined     { margin: 36px auto; }
.bottommargin { margin-bottom: 36px; }
.grid-gap     { gap: 12px !important; }

/* ── Container ──────────────────────────────────── */
.container { width: 92%; }

/* ── Flex ───────────────────────────────────────── */
.flex { flex-wrap: wrap; }
.flex .half  { width: 100%; margin-right: 0; }
.flex .third { width: 100%; margin-right: 0; }
.right { text-align: left !important; }
.buttons { flex-direction: column; gap: 12px; }
.buttons .button { text-align: center; }

/* ── Grids → single column ──────────────────────── */
.grid-2,
.grid-3,
.grid-4,
.grid-5 { grid-template-columns: 1fr !important; gap: 12px; }

.span-1, .span-2, .span-3,
.span-4, .span-5 { grid-column: span 1 !important; }

/* ── Header ─────────────────────────────────────── */
header .logo { width: 200px; }
header .container { padding-right: 56px; }

/* ── Hero ───────────────────────────────────────── */
.hero h1     { font-size: 2.2rem; }
.hero .stats { margin-top: 24px; }
.hero .stats.grid-2  { grid-template-columns: repeat(2,1fr) !important; gap: 10px; }
.hero .stats .span-2 { grid-column: span 2 !important; }
.hero .stats .stat .number { font-size: 1.6rem; }

/* ── About portrait ─────────────────────────────── */
.portrait { aspect-ratio: 4/3; max-height: 280px; }
.signature { flex-wrap: wrap; gap: 10px; }

/* ── Timeline ───────────────────────────────────── */
.timeline::before { left: 14px; }
.timeline-item { padding: 0 0 36px 50px; }
.timeline-item .marker { width: 30px; height: 30px; font-size: 0.7rem; }

/* ── Case study cards ───────────────────────────── */
.case-study { grid-template-columns: 1fr !important; }
.case-study .cs-logo {
  border-right: none;
  border-bottom: 1px solid rgba(214,215,216,0.06);
  padding: 20px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.case-study .cs-logo .logo-box  { width: 52px; height: 52px; font-size: 1.4rem; flex-shrink: 0; }
.case-study .cs-body            { padding: 20px; }
.case-study .cs-body .integrations { gap: 6px; }

/* ── API diagram ────────────────────────────────── */
.api-diagram { flex-direction: column; align-items: center; gap: 20px; padding: 24px 0; }
.api-diagram .api-hub { margin: 6px 0; }
.api-diagram .api-spokes { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 7px; }
.api-diagram .api-spokes.left,
.api-diagram .api-spokes.right { align-items: center; margin: 0; }
.api-node { font-size: 0.75rem; padding: 7px 11px; }
.api-node::after { display: none; }

/* ── Integration logo grid ──────────────────────── */
.int-logo-grid { grid-template-columns: repeat(3,1fr) !important; gap: 8px; }
.int-logo { padding: 12px 8px; }
.int-logo i { font-size: 1.1rem; }
.int-logo span { font-size: 0.65rem; }

/* ── Use-case & AI cards ────────────────────────── */
.use-case, .ai-feature { padding: 20px; }

/* ── Filter bar ─────────────────────────────────── */
.filter-bar { gap: 7px; }
.filter-chip { font-size: 0.8rem; padding: 7px 12px; }
#portfolio-grid { grid-template-columns: 1fr !important; }

/* ── Contact form ───────────────────────────────── */
.contact-form .field-row  { grid-template-columns: 1fr; gap: 0; }
.contact-form .submit-row { flex-direction: column; align-items: flex-start; gap: 12px; }
.contact-detail { padding: 18px; }

/* ── Footer ─────────────────────────────────────── */
.site-footer .footer-bottom {
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
.site-footer .footer-bottom .legal { justify-content: center; }