/* Small-screen corrections only; desktop chapter composition stays unchanged. */
@media (max-width: 860px) {
    :root {
        --navbar-height: 68px;
        --container-padding: 20px;
    }

    .navbar {
        top: calc(8px + env(safe-area-inset-top));
        width: calc(100% - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right)));
    }
    .navbar .nav-brand-name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-height: 1.4;
    }
    .navbar .nav-menu {
        max-height: calc(100dvh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }

    .scroll-container.has-touch-pages > .section {
        padding: calc(var(--navbar-height) + 24px + env(safe-area-inset-top))
            max(var(--container-padding), env(safe-area-inset-right))
            calc(28px + env(safe-area-inset-bottom))
            max(var(--container-padding), env(safe-area-inset-left));
        scroll-padding-top: calc(var(--navbar-height) + 16px + env(safe-area-inset-top));
        scroll-padding-bottom: 24px;
    }
    .section .section-index { margin-bottom: 12px; font-size: 11px; }
    .section .section-title { font-size: clamp(28px, 8vw, 38px); line-height: 1.2; letter-spacing: 0; }
    .section .section-subtitle { margin: 10px 0 0; font-size: 13px; line-height: 1.7; letter-spacing: .04em; }

    .has-touch-pages .hero-content {
        min-height: calc(100svh - var(--navbar-height) - 52px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        padding: clamp(16px, 5svh, 44px) 0 0;
    }
    .hero-content h1 { width: 100%; font-size: clamp(34px, 9.5vw, 62px); line-height: 1.3; letter-spacing: -.025em; overflow-wrap: anywhere; }
    .hero-title-line { white-space: normal; }
    .hero-title-outline, .hero-title-outline::after { width: 100%; }
    .hero-content .section-index { margin-bottom: 24px; }
    .hero-content .subtitle { max-width: 100%; margin-top: 22px; font-size: clamp(16px, 4.4vw, 22px); line-height: 1.8; overflow-wrap: anywhere; }
    .hero-content .scroll-hint {
        position: static; transform: none; align-self: flex-start;
        min-height: 44px; margin-top: auto; padding-top: 48px; padding-bottom: 8px;
    }

    .about-wrapper { margin-top: 22px; padding-top: 22px; gap: 24px; }
    .about-content { padding: 22px 20px; }
    .about-content h3 { margin: 10px 0 14px; font-size: 23px; }
    .about-content .about-introduction p { font-size: 15px; line-height: 1.85; }
    .about-content .about-detail-btn { margin-top: 20px; }

    .business-heading { gap: 16px; margin-bottom: 16px; padding-bottom: 16px; }
    .business-total { gap: 8px; padding-left: 14px; }
    .business-total strong { font-size: 32px; }
    .business-section .business-card { padding: 18px; gap: 14px; }
    .business-card-heading h3 { font-size: 18px; }
    .business-section .business-summary {
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
        overflow: hidden; font-size: 14px; line-height: 1.8;
    }
    .business-detail-btn { min-height: 44px; padding: 10px 14px; font-size: 13px; }

    .contact-heading { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
    .contact-section .contact-wrapper { gap: 20px; margin-top: 22px; }
    .contact-wrapper > .contact-info, .contact-wrapper > .contact-platforms { padding: 18px 16px; }
    .contact-directory-heading { padding-bottom: 16px; margin-bottom: 16px; }
    .contact-directory-scroll .contact-cards-grid,
    .contact-directory-scroll .video-platform-grid { gap: 12px; padding: 3px; }
    .contact-directory-scroll .contact-card-item,
    .contact-directory-scroll .video-platform-card {
        flex-wrap: nowrap; gap: 14px; min-height: 84px; padding: 14px;
    }
    .contact-card-name, .video-platform-copy strong { font-size: 14px; line-height: 1.6; }
    .contact-card-hint, .video-platform-copy > span { font-size: 12px; }
    .contact-directory-scroll .contact-card-icon,
    .contact-platforms .video-platform-icon { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; }
    .footer-section { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
}

@media (max-width: 600px) {
    /* Beat the legacy 5+ contacts rule, which otherwise forces three phone columns. */
    .contact-section .contact-directory-scroll .contact-cards-grid,
    .contact-section .contact-directory-scroll .video-platform-grid { grid-template-columns: minmax(0, 1fr); }
    /* Put the controls below the full-width card instead of squeezing its text. */
    .company-carousel { padding: 0 0 58px; margin-top: 22px; }
    .company-carousel .company-grid { padding: 8px 2px; gap: 14px; }
    .company-carousel .company-card { flex-basis: 100%; min-height: 330px; }
    .company-carousel .company-card-content { padding: 20px; }
    .company-carousel .company-card-content h3 { font-size: 19px; }
    .company-carousel .company-card-content .btn-sm { min-height: 44px; }
    .company-carousel > .company-prev,
    .company-carousel > .company-next { top: auto; bottom: 0; transform: none; width: 44px; height: 44px; }
    .company-carousel > .company-prev { left: 0; }
    .company-carousel > .company-next { right: 0; }
    .company-carousel-position {
        left: 52px; right: 52px; bottom: 0; width: auto; height: 44px; margin: 0;
        clip-path: none; display: flex; align-items: center; justify-content: center;
        color: #a9bdd5; font-size: 13px; letter-spacing: .12em;
    }
}

@media (max-width: 520px) {
    .footer-top-row { gap: 16px; }
    .footer-section .footer-copyright { margin-left: 0; text-align: left; }
    .footer-section .footer-links-list { gap: 4px 18px; }
    .footer-section .footer-links-list a,
    .footer-section button.footer-filing-item,
    .footer-section a.footer-filing-item { min-height: 44px; }
    .footer-filing-item svg { flex-shrink: 0; }
}

@media (max-width: 360px) {
    :root { --container-padding: 16px; }
    .navbar .nav-brand { font-size: 12px; }
    .contact-wrapper > .contact-info, .contact-wrapper > .contact-platforms { padding: 16px 12px; }
}

/* Use the visible viewport for dialogs, including when the keyboard is open. */
@media (max-width: 1024px), (pointer: coarse) {
    .modal {
        top: var(--modal-viewport-top, 0px); bottom: auto;
        height: var(--modal-viewport-height, 100dvh);
        padding: calc(12px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
            calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
        align-items: flex-start; overflow: hidden;
        backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    .modal .modal-content {
        width: min(100%, 600px); min-width: 0; max-width: 100%;
        max-height: 100%; height: auto; margin-block: auto;
        padding: 18px 20px 24px; overscroll-behavior: contain;
        scroll-padding: 64px 0 20px; overflow-wrap: anywhere;
    }
    .modal .modal-close {
        position: sticky; top: 0; right: auto; margin: 0 0 8px auto;
        width: 44px; height: 44px; flex-shrink: 0; background: #19334e; border: 1px solid #3c5875;
    }
    .modal .modal-content > h3 { margin: 0 0 16px; font-size: 22px; }
    .modal .btn { min-height: 44px; }
    .modal :is(.contact-detail-row, .media-detail-row, .company-modal-detail-item, .about-detail-item) {
        display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
        padding: 14px 0; text-align: left;
    }
    .modal :is(.contact-detail-value, .media-detail-value, .company-modal-detail-value, .about-detail-value) {
        max-width: 100%; min-width: 0; padding-right: 0; text-align: left; overflow-wrap: anywhere;
    }
    .modal :is(.company-modal-detail-label, .contact-detail-label, .media-detail-label) { font-size: 13px; }
    .company-modal .company-modal-header { padding: 0 0 18px; gap: 14px; }
    .company-modal .company-modal-body { padding: 20px 0 0; }
    .company-modal .company-modal-logo { width: 64px; height: 64px; min-width: 64px; }
    .company-modal .company-modal-logo svg { width: 42px; height: 42px; }
    .company-modal .company-modal-title { font-size: 20px; }
    .company-modal .company-modal-subtitle { font-size: 13px; }
    .modal .contact-detail-icon img { padding: 0; background: none; border-radius: 0; box-shadow: none; }
}