/* ==========================================
   Mobile First: 320px base (default)
   ========================================== */

.hero {
  grid-template-columns: 1fr;
  padding: 0 20px;
  min-height: auto;
}

.hero-text { padding: 40px 0 20px; }

.portal-wrap {
  width: 280px;
  height: 280px;
  margin: 0 auto 40px;
}

h1 { font-size: 34px; }

header, .hdr { padding: 0 20px; }

section { padding: 48px 0; }

.container { padding: 0 20px; }

.sticky-bar .sticky-text { display: none; }
.sticky-bar { padding: 12px 20px; }

.about-grid    { grid-template-columns: 1fr; }
.experts-grid  { grid-template-columns: 1fr; }
.forwhom-grid  { grid-template-columns: 1fr; }
.cgrid         { grid-template-columns: 1fr; }
.fmt-grid      { grid-template-columns: 1fr; }
.footer-grid   { grid-template-columns: 1fr; }

.services-header {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.services-desc {
  text-align: left;
  max-width: 100%;
}

.cta-section { padding: 60px 20px; }
.cta-section h2 { font-size: 24px; }

.nav { display: none; }
.burger { display: flex; }

.expert-card { flex-direction: column; }

footer { padding: 40px 20px 20px; }

.footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

/* ==========================================
   768px+
   ========================================== */
@media (min-width: 768px) {
  h1 { font-size: 42px; }

  .hero {
    grid-template-columns: 1fr 1fr;
    padding: 0 36px;
  }

  .hero-text { padding: 60px 0; }

  .portal-wrap {
    width: 340px;
    height: 340px;
    margin: 0;
  }

  section { padding: 56px 0; }

  .container { padding: 0 36px; }

  .about-grid   { grid-template-columns: repeat(2, 1fr); }
  .experts-grid { grid-template-columns: repeat(2, 1fr); }
  .forwhom-grid { grid-template-columns: repeat(3, 1fr); }
  .cgrid        { grid-template-columns: repeat(2, 1fr); }
  .fmt-grid     { grid-template-columns: repeat(2, 1fr); }
  .footer-grid  { grid-template-columns: repeat(2, 1fr); }

  .sticky-bar .sticky-text { display: block; }
  .sticky-bar { padding: 14px 36px; }

  .nav { display: flex; }
  .burger { display: none; }

  .expert-card { flex-direction: row; }

  .services-header {
    flex-direction: row;
    align-items: flex-end;
  }

  .services-desc { text-align: right; }

  footer { padding: 48px 36px 24px; }

  .footer-bottom { flex-direction: row; text-align: left; }
}

/* ==========================================
   1200px+
   ========================================== */
@media (min-width: 1200px) {
  h1 { font-size: 50px; }

  .cgrid    { grid-template-columns: repeat(4, 1fr); }
  .fmt-grid { grid-template-columns: repeat(4, 1fr); }

  .footer-grid { grid-template-columns: repeat(3, 1fr); }

  .portal-wrap {
    width: 380px;
    height: 380px;
  }

  section { padding: 64px 0; }
}

/* ==========================================
   1440px+
   ========================================== */
@media (min-width: 1440px) {
  .container { max-width: 1360px; }
}