@media (max-width: 620px) {
  body { overflow-x: hidden; }

  .hero-frame { object-position: 72% center; }
  .hero-content { width: 100%; }
  .hero h1 { font-size: clamp(42px, 13vw, 50px); }
  .hero-lead { max-width: 100%; overflow-wrap: anywhere; }

  .section-heading h2,
  .consultation h2,
  .closing h2 { font-size: clamp(36px, 10.5vw, 42px); }

  .calendar-weekdays,
  .calendar-grid { gap: 3px; }

  .materials-grid {
    display: flex;
    gap: 12px;
    margin-right: -18px;
    padding-right: 18px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .materials-grid::-webkit-scrollbar { display: none; }

  .materials-grid .material-card {
    flex: 0 0 calc(100% - 34px);
    min-height: 360px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
  }

  .slider-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #b8c0c8;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
  }

  .slider-dot.active {
    background: var(--blue);
    transform: scale(1.25);
  }

  .modal { padding: 30px 20px 24px; }
  .modal h3 { font-size: 28px; }

}