/* ============================================================
   RESPONSIVE  — breakpoints: 1100 / 900 / 640 / 420
   ============================================================ */

/* ---- Large tablet ---- */
@media (max-width: 1100px) {
  .container           { padding: 0 36px; }
  .nav                 { padding: 24px 36px; }
  .nav.scrolled        { padding: 16px 36px; }
  .cards-grid          { grid-template-columns: repeat(2, 1fr); }
  .cards-section       { padding: 0 36px 100px; }
  .analysis-header     { padding: 140px 36px 60px; }
  .page-hero__content  { padding: 0 48px; }
}

/* ---- Tablet ---- */
@media (max-width: 900px) {
  .nav-links           { display: none; }
  .intro               { padding: 100px 0; }
  .timeline-section    { padding: 80px 0 100px; }
  .footer-cta          { padding: 100px 36px; }
  .page-hero__content  { padding: 0 36px; }
  .page-hero           { height: 48vh; padding-bottom: 56px; }
  .content-section     { padding: 72px 0; }
  .page-nav .container { flex-direction: column; gap: 32px; align-items: flex-start; }
  .page-nav__item--next{ align-items: flex-start; text-align: left; }
  .site-footer         { flex-direction: column; gap: 10px; text-align: center; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .container           { padding: 0 24px; }
  .nav                 { padding: 20px 24px; }
  .nav.scrolled        { padding: 14px 24px; }
  .hero__content       { padding: 0 24px; }
  .hero__subtitle      { max-width: 100%; }
  .intro__inner        { padding: 0 24px; }
  .ornament            { padding: 0 24px; }
  .footer-cta          { padding: 80px 24px; }
  .site-footer         { padding: 28px 24px; }
  .cards-grid          { grid-template-columns: 1fr; }
  .cards-section       { padding: 0 24px 80px; }
  .analysis-header     { padding: 120px 24px 48px; }
  .timeline-section__header { padding: 0 24px; }
  .timeline-section    { padding: 60px 0 80px; }
  .page-hero__content  { padding: 0 24px; }
  .page-hero           { height: 44vh; min-height: 320px; padding-bottom: 40px; }
  .content-section     { padding: 56px 0; }
  .page-nav            { padding: 40px 0 56px; }
}

/* ---- Small mobile ---- */
@media (max-width: 420px) {
  .hero__title         { letter-spacing: .03em; }
  .card__image         { aspect-ratio: 3/2; }
}

/* ---- Regulatory highlights grid ---- */
@media (max-width: 900px) {
  .rf-highlights { grid-template-columns: 1fr; }
}