/*
 * Toulouse Founders — global styles.
 * The page layout itself lives as inline styles in the views to stay faithful
 * to the source design; this file holds the global rules, interactions and the
 * responsive overrides (which need !important to win over inline styles).
 */

html { scroll-behavior: smooth; }
body { margin: 0; background: #1B1815; }
* { box-sizing: border-box; }

::selection { background: #CA6B4B; color: #1B1815; }

input, textarea, select { font-family: 'Spectral', serif; }
input:focus, textarea:focus, select:focus { outline: none; border-color: #CA6B4B !important; }

.tf-cta:hover { background: #b85b3d !important; }
.tf-ghost:hover { color: #ECE3D6 !important; border-color: #CA6B4B !important; }

/* Tablet and below: collapse multi-column grids, tighten gutters and titles. */
@media (max-width: 900px) {
  .tf-grid-3 { grid-template-columns: 1fr !important; }
  .tf-grid-2 { grid-template-columns: 1fr !important; gap: 28px !important; }
  .tf-process { grid-template-columns: 1fr !important; gap: 40px !important; }
  .tf-form-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .tf-section { padding-left: 24px !important; padding-right: 24px !important; }
  .tf-header { padding-left: 24px !important; padding-right: 24px !important; }
  .tf-hero-inner { padding: 50px 24px 90px !important; }
  .tf-h1 { font-size: 48px !important; }
  .tf-manifesto { font-size: 30px !important; }
  .tf-h2 { font-size: 36px !important; }
}

/* Phones: stack the email/phone row and shrink the hero headline further. */
@media (max-width: 560px) {
  .tf-form-row { flex-direction: column !important; gap: 20px !important; }
  .tf-h1 { font-size: 38px !important; }
  .tf-manifesto { font-size: 26px !important; }
  .tf-h2 { font-size: 30px !important; }
  .tf-section { padding-top: 72px !important; padding-bottom: 72px !important; }
}