/* 1) Safety net: no raw image/video/iframe can overflow its box.
              Element-level selector — class/inline sizing rules still win. */
        img, video { max-width: 100%; height: auto; }
        iframe { max-width: 100%; }

        /* 2) iOS Safari zooms in when a focused field's font-size < 16px.
              Force 16px on all form fields at phone widths to stop the jump. */
        @media (max-width: 768px) {
            .contact-form input,
            .contact-form textarea,
            .contact-form select,
            .vm-form input,
            .vm-form select,
            .vm-form textarea {
                font-size: 16px !important;
            }
        }

        /* 3) Bigger, thumb-friendly language switcher rows (was ~33px tall). */
        .lang-option { min-height: 44px; box-sizing: border-box; }

        /* 4) TABLET RANGE (769–1024px): the site mostly jumped from desktop
              grids straight to a 1-column mobile layout at 768px, leaving
              tablets with cramped or orphaned columns. Give them a clean
              intermediate layout. All classes below exist in the markup. */
        @media (min-width: 769px) and (max-width: 1024px) {
            .classes-grid { grid-template-columns: repeat(2, 1fr); }   /* 4 cards → tidy 2×2 instead of 3+1 */
            .gallery-grid { grid-template-columns: repeat(3, 1fr); }   /* was 4 tiny thumbs across */
            .contact-grid { grid-template-columns: 1fr; gap: 32px; }   /* info + form stack, no cramping */
        }