/* =========================================================================
   Responsive rules — breakpoints: 1024px (laptop), 768px (tablet), 480px (mobile)
   ========================================================================= */

/* Reveal-on-scroll initial state (animated by main.js) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease,
  transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---- 1024px: laptops / large tablets ---------------------------------- */
@media (max-width: 1024px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .process, .process--four, .process--eight { grid-template-columns: repeat(2, 1fr); }
  .founder-grid { grid-template-columns: 1fr 1fr; }
  .founder-photo { grid-column: 1 / -1; max-width: 360px; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }

  /* who we help: 6-across needs become 3-across; drop vertical dividers */
  .needs-row { grid-template-columns: repeat(3, 1fr); row-gap: 2.6rem; }
  .need-col + .need-col { border-left: 0; }

  /* switch to hamburger nav */
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
}

/* ---- 768px: tablets --------------------------------------------------- */
@media (max-width: 768px) {
  :root { --header-h: 84px; }
  .header-tagline { font-size: 0.72rem; max-width: 18ch; padding-left: 0.7rem; }
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .divided .feature + .feature { border-left: 0; border-top: 1px solid var(--line-gold);
    padding-top: 1.8rem; }
  .section-head-row { flex-direction: column; align-items: flex-start; }

  .split, .split--wide, .founder-grid, .contact-grid { grid-template-columns: 1fr; }
  .split-media { order: -1; }
  .founder-photo { max-width: 100%; }
  .check-list--two { columns: 1; }

  .process, .process--four, .process--eight { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* who we help: needs 2-across; value stacks with horizontal dividers */
  .needs-row { grid-template-columns: repeat(2, 1fr); }
  .value-row { grid-template-columns: 1fr; }
  .value-col { padding: 1.7rem 0; }
  .value-col:first-child { padding-top: 0; }
  .value-col + .value-col { border-left: 0; border-top: 1px solid rgba(201, 168, 106, 0.3); }

  /* projects stack: image first, then content, then result (result is already
     inside body, which follows media in source order) */
  .project-row, .project-row--reverse { grid-template-columns: 1fr; }
  .project-row-media { order: -1; }
}

/* ---- 480px: phones ---------------------------------------------------- */
@media (max-width: 480px) {
  :root { --space: 3.2rem; }
  .field-row { grid-template-columns: 1fr; }
  .hero-actions .btn, .cta-actions .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .needs-row { grid-template-columns: 1fr; }
  :root { --header-h: 66px; }
  .logo-img { height: 44px; }
  .header-tagline { font-size: 0.6rem; max-width: 15ch; padding-left: 0.6rem;
    letter-spacing: 0.2px; }
  h1 { font-size: 2.05rem; }
}