/* Professional Typography Fix for Hero Title */
.hero-text h1 {
    color: var(--ocean-deep) !important;
    font-size: 2.8rem !important;
    margin-bottom: 1.5rem !important;
    font-family: 'Playfair Display', serif !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    hyphens: none !important;
    word-break: keep-all !important;
    white-space: nowrap !important;
}

/* Alternative styling options - uncomment the one you prefer */

/* Option 1: Two-line stacked layout */
.hero-text h1 .title-line-1 {
    display: block;
    font-size: 2.2rem;
    color: var(--fire-red);
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.hero-text h1 .title-line-2 {
    display: block;
    font-size: 3.2rem;
    color: var(--ocean-deep);
    font-weight: 800;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .hero-text h1 {
        font-size: 2.4rem !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }
    
    .hero-text h1 .title-line-1 {
        font-size: 1.9rem;
    }
    
    .hero-text h1 .title-line-2 {
        font-size: 2.8rem;
    }
}

@media (max-width: 768px) {
    .hero-text h1 {
        font-size: 2rem !important;
        text-align: center !important;
    }
    
    .hero-text h1 .title-line-1 {
        font-size: 1.6rem;
    }
    
    .hero-text h1 .title-line-2 {
        font-size: 2.4rem;
    }
}

@media (max-width: 480px) {
    .hero-text h1 {
        font-size: 1.7rem !important;
    }
    
    .hero-text h1 .title-line-1 {
        font-size: 1.4rem;
    }
    
    .hero-text h1 .title-line-2 {
        font-size: 2rem;
    }
}