/* ============================================================
   CHASE — Responsive layers (mobile-first corrections)
   ============================================================ */

/* ---------- <= 1180px ---------- */
@media (max-width: 1180px) {
  :root { --shell: 1040px; }
  .nav { gap: 26px; }
  .article-layout { grid-template-columns: minmax(0, 1fr) 260px; }
}

/* ---------- <= 1024px (tablet landscape) ---------- */
@media (max-width: 1024px) {
  .section { padding: 20px 0; }
  .split { grid-template-columns: 1fr; gap: 46px; }
  .split--reverse .split__media { order: 0; }
  .sechead { grid-template-columns: 1fr; align-items: start; gap: 26px; margin-bottom: 52px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .posts { grid-template-columns: repeat(2, 1fr); }
  .article-layout { grid-template-columns: 1fr; }
  .aside { position: static; grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
}

/* ---------- <= 900px: switch to mobile nav ---------- */
@media (max-width: 900px) {
  :root { --header-h: 72px; }
  .nav, .header__cta { display: none; }
  .burger { display: flex; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__meta { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 14px; }
  .hero__meta .goldline { width: 40px; height: 1px; background: linear-gradient(to right, transparent, var(--gold)); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { border-bottom: 1px solid var(--border); padding: 38px 24px; }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-last-child(-n + 2) { border-bottom: 0; }
  .post--wide { flex-direction: column; }
  .post--wide .post__media { min-height: 240px; }
}

/* ---------- <= 768px (tablet portrait / large phone) ---------- */
@media (max-width: 768px) {
  .section, .section--tight { padding: 20px 0; }
  .phero { padding: calc(var(--header-h) + 76px) 0 66px; }
  .cards { grid-template-columns: 1fr; }
  .card { min-height: 0; }
  .posts { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .step { grid-template-columns: 1fr; gap: 10px; padding: 30px 0 30px 26px; }
  .step__n { padding-top: 0; }
  .footer { padding: 64px 0 30px; }
  .footer__bottom { margin-top: 48px; }
  .hero { min-height: 92svh; padding-bottom: 90px; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: space-between; }
  .aside { grid-template-columns: 1fr; }
}

/* ---------- <= 560px (phones) ---------- */
@media (max-width: 560px) {
  :root { --gutter: 20px; }
  body { font-size: 15.5px; }
  .h-display { font-size: clamp(2.25rem, 11.5vw, 3.1rem); }
  .h-section { font-size: clamp(1.9rem, 8.5vw, 2.5rem); }
  .label { margin-bottom: 20px; letter-spacing: 0.26em; }
  .footer__grid { grid-template-columns: 1fr; gap: 40px; }
  .minigrid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; }
  .stat:last-child { border-bottom: 0; }
  .pills { gap: 8px; }
  .pill { padding: 8px 12px; letter-spacing: 0.18em; }
  .media-badge { padding: 16px 18px; }
  .form { padding: 24px 20px; }
  .prose blockquote { padding-left: 20px; }
}

/* ---------- <= 380px (small phones: 320–375) ---------- */
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .logo__name { font-size: 21px; letter-spacing: 0.22em; text-indent: 0.22em; }
  .logo__mark { width: 28px; height: 28px; }
  .logo__sub { font-size: 6.8px; letter-spacing: 0.24em; }
  .btn { padding: 15px 20px; font-size: 10.5px; letter-spacing: 0.18em; }
  .h-display { font-size: clamp(2rem, 12vw, 2.5rem); }
  .card { padding: 26px 20px; }
  .card__foot { font-size: 9.5px; letter-spacing: 0.16em; }
  .post__body { padding: 24px 20px; }
  .mnav__list a { font-size: 2rem; }
  .footer__bottom { font-size: 9px; letter-spacing: 0.14em; }
}

/* ---------- Landscape phones: shorter hero ---------- */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: 640px; }
  .scrollcue { display: none; }
}

/* ---------- Wide screens ---------- */
@media (min-width: 1600px) {
  :root { --shell: 1440px; }
  .section { padding: 50px 0; }
}