/* Loaded last so shared mobile rules override page-specific inline styles. */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* Tighten the vertical gaps between the site's major content bands. */
.hero,
.practice,
.intro-section,
.services-section,
.approach-section,
.when-section,
.values-section {
    padding-block: clamp(56px, 5vw, 72px);
}

.cta-section {
    padding-block: 64px;
}

@media (max-width: 900px) {
    .brand, .brand a { max-width: 100%; min-width: 0; }
    .header-logo { transform: none; width: min(280px, 100%); }
    .header-right { white-space: normal; }
    .main-nav { width: 100%; gap: 4px 16px; }
    .main-nav > a, .nav-dropdown-trigger { white-space: normal; text-align: center; }
    .nav-dropdown-menu { min-width: 0; width: min(260px, 84vw); }
    .nav-dropdown-menu a { white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 780px) {
    /* Allow grid/flex children and long translated words to shrink and wrap. */
    main, main section, main section * { min-width: 0; }
    main, .contact-strip, .site-footer, dialog { overflow-wrap: anywhere; }
    .hero, .about-hero, .practice-hero { min-height: auto; padding: 52px 0; }
    .hero { padding-inline: 6%; }
    .hero-inner, .practice-hero .hero-inner { width: 88%; }
    .hero-content { width: 100%; max-width: 100%; }
    .hero h1, .about-hero h1, .practice-hero h1 {
        font-size: clamp(24px, 7vw, 48px);
        line-height: 1.08;
        max-width: 100%;
        overflow-wrap: normal;
        margin-bottom: 24px;
    }
    .hero p, .hero-description { font-size: clamp(17px, 4.4vw, 20px); line-height: 1.65; margin-bottom: 28px; }
    .red-line { width: min(220px, 100%); margin-bottom: 24px; }
    .eyebrow, .section-label { font-size: 16px; letter-spacing: 1px; }
    main section h1, main section h2, main section h3 {
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }
    main section h2 { font-size: clamp(22px, 6vw, 36px); line-height: 1.15; }
    .overview-inner h2 { font-size: clamp(18px, 5.5vw, 34px); }
    .intro-copy p, .overview-copy p, .attorney-copy p, .approach-copy p,
    .approach-content p, .when-content p, .services-heading p,
    .values-heading p, .practice-intro p, .travel-intro, .cta-section p { font-size: 17px; line-height: 1.75; }
    .attorney-copy p { text-align: start; }
    .intro-section, .overview-section, .services-section, .values-section,
    .attorney-section, .approach-section, .when-section, .travel-section,
    .practice, .cta-section { padding: 52px 6%; }
    .intro-inner, .overview-inner, .attorney-inner, .approach-inner, .when-inner { gap: 32px; }
    .services-heading, .values-heading { margin-bottom: 32px; }
    .service-grid, .values-grid, .practice-grid, .features, .travel-grid { grid-template-columns: minmax(0, 1fr); }
    .service-card, .value-card, .practice-card { min-height: auto; padding: 30px 22px; }
    .service-card h3, .value-card h3, .practice-card h3 { font-size: clamp(20px, 5.5vw, 25px); }
    .feature > div { min-width: 0; }
    .feature-icon { flex: 0 0 42px; }
    .attorney-photo { height: auto; min-height: 0; max-width: 440px; margin-inline: auto; }
    .buttons { width: 100%; gap: 12px; }
    .button, .cta-section .button-red {
        min-width: 0; max-width: 100%; width: 100%; min-height: 48px;
        padding: 14px 18px; font-size: 15px; line-height: 1.5;
        white-space: normal; text-align: center;
    }
    .cta-inner { gap: 24px; }
    .contact-item, .contact-item a, .footer-inner > div { min-width: 0; }
    .contact-strip { padding: 12px 6%; font-size: 16px; }
    .contact-item span { flex-shrink: 0; }
    .imm-news { padding: 22px; }
}

@media (max-width: 600px) {
    .site-header { padding: 10px 6%; gap: 2px; }
    .header-logo { width: min(240px, 100%); }
    .header-right { gap: 2px; }
    .main-nav { gap: 0 12px; }
    .main-nav > a, .nav-dropdown-trigger,
    .main-nav > a:hover, .main-nav > a:focus,
    .nav-dropdown-trigger:hover, .nav-dropdown-trigger:focus,
    .nav-dropdown:hover .nav-dropdown-trigger,
    .nav-dropdown:focus-within .nav-dropdown-trigger { font-size: 12px; min-height: 44px; padding: 12px 0; }
    .language-switcher { gap: 6px; font-size: 13px; }
    .language-switcher button { min-width: 44px; min-height: 44px; padding: 8px 4px; }
}