/* pro.css — business typography for Services, case studies, and the home page
   "Custom projects" block. Scoped to .pro so the rest of the site keeps
   Fredoka/Nunito. Loaded only on pages that use it. */
.pro { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 17px; }
.pro h1, .pro h2, .pro h3, .pro .btn {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: -0.015em;
}
.pro h1 { font-weight: 700; }
.pro h2 { font-weight: 700; }
.pro h3 { font-weight: 600; letter-spacing: -0.01em; }
.pro .btn { font-weight: 600; }
.pro .eyebrow, .pro .section-tag {
  font-family: 'Inter', system-ui, sans-serif; font-weight: 600;
  letter-spacing: .1em; font-size: .75rem;
}
.pro .lead { font-size: 1.12rem; }

/* Case study figures */
.pro .figure { margin: var(--space-6) 0 var(--space-8); }
.pro .figure img { width: 100%; height: auto; display: block; border-radius: 14px;
  border: 1px solid var(--ink-100); box-shadow: var(--shadow-xs); }
.pro .figure figcaption { margin-top: var(--space-2); font-size: .9rem; color: var(--ink-500); }
.pro .callout { margin: var(--space-6) 0; padding: var(--space-4) var(--space-6);
  border-left: 4px solid var(--lake-michigan); background: rgba(0,0,0,.03); border-radius: 0 12px 12px 0; }
.pro .callout p { margin: 0 0 var(--space-2); }
.pro .callout p:last-child { margin-bottom: 0; }

/* Services contact reveal */
.pro .contact-box { margin-top: var(--space-4); }
.pro .contact-box .cf-turnstile { margin: var(--space-3) 0; min-height: 65px; }
.pro .contact-email-out { font-size: 1.2rem; font-weight: 600; }
.pro .contact-msg { color: var(--ink-500); font-size: .95rem; }

/* Case study timeline */
.pro .timeline { list-style: none; margin: var(--space-4) 0 var(--space-6); padding: 0; max-width: 72ch;
  border-left: 2px solid var(--ink-100); }
.pro .timeline li { position: relative; padding: 0 0 var(--space-4) var(--space-6); margin: 0; }
.pro .timeline li::before { content: ""; position: absolute; left: -7px; top: .45em; width: 12px; height: 12px;
  border-radius: 50%; background: var(--lake-michigan); box-shadow: 0 0 0 3px var(--paper, #fff); }
.pro .timeline .when { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--lake-michigan); }
.pro .principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-6); }
.pro .principles .card h3 { font-size: 1.05rem; margin-bottom: var(--space-2); }
.pro .principles .card p { margin: 0; color: var(--ink-500); font-size: .98rem; }