/*
================================================
ATTORNEYS.CSS - GARBACZ ZLOTOWITZ LAW FIRM
Full attorneys page styling with alternating layout
Elegant, sophisticated, minimal design with BLUE THEME
UPDATED: Blue color scheme matching areas-of-practice page
================================================
*/

/* ==========================================
   1. ATTORNEYS HERO SECTION - COMPACT WITH BACKGROUND IMAGE & BLUE THEME (RESPONSIVE FIXES)
   ========================================== */
.attorneys-hero {
    /* BLUE GRADIENT BACKGROUND - matching areas-of-practice */
    background: linear-gradient(135deg, #0a1628 0%, #1a2642 50%, #0f1d35 100%);
    padding-top: var(--header-height-mobile);
    min-height: 200px; /* SUPER COMPACT - Andrew appears much higher */
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    
    /* BACKGROUND IMAGE - MULTIPLE PATH OPTIONS - TRY EACH ONE */
    /* Option 1: Relative from css/ folder (MOST COMMON) */
    background-image: url('../images/attorneys-hero-image.jpg');
    
    /* If Option 1 doesn't work, comment it out and try Option 2: */
    /* background-image: url('/images/attorneys-hero-image.jpg'); */
    
    /* If neither work, try Option 3 with your domain: */
    /* background-image: url('https://yourdomain.com/images/attorneys-hero-image.jpg'); */
    
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

@media (min-width: 768px) {
    .attorneys-hero {
        padding-top: var(--header-height);
        min-height: 250px; /* SUPER COMPACT for desktop too */
        background-attachment: fixed;
    }
}

/* Dark overlay for text readability - BLUE TINTED */
.attorneys-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(10, 22, 40, 0.85) 0%,
        rgba(15, 29, 53, 0.75) 50%,
        rgba(10, 22, 40, 0.85) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Optional: Subtle accent gradient overlay */
.attorneys-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

.attorneys-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: min(800px, 95vw);
    margin: 0 auto;
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 3vw, 1rem);
    box-sizing: border-box;
}

.attorneys-hero-title {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.05; /* Tighter line height */
    margin-bottom: clamp(0.75rem, 2vw, 1rem);
    letter-spacing: -0.02em;
    max-width: 100%;
    word-wrap: break-word;
}

.attorneys-hero-title .line {
    display: block;
    overflow: hidden;
    padding: clamp(0.1rem, 0.5vw, 0.15rem) 0;
}

.attorneys-hero-title .line span {
    display: block;
    transform: translateY(100%);
}

.attorneys-hero-subtitle {
    font-size: clamp(0.9rem, 1.8vw, 1.05rem);
    color: var(--color-light-text-muted);
    line-height: 1.55;
    margin: 0;
    max-width: min(700px, 90vw);
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .attorneys-hero-subtitle {
        line-height: 1.6;
    }
}

/* ==========================================
   2. ATTORNEYS GRID SECTION - ALTERNATING LAYOUT WITH BLUE BACKGROUND (RESPONSIVE FIXES)
   ========================================== */
.attorneys-grid-section {
    /* BLUE GRADIENT BACKGROUND - matching hero */
    background: linear-gradient(180deg, #0a1628 0%, #0f1d35 50%, #1a2642 100%);
    padding-top: 2rem; /* Reduced from default to bring content up */
    overflow-x: hidden;
    width: 100%;
}

@media (min-width: 768px) {
    .attorneys-grid-section {
        padding-top: 3rem;
    }
}

.attorney-fullpage-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    margin-bottom: 4rem;
    animation: fadeInUp 0.8s ease forwards;
    opacity: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.attorney-fullpage-card:first-of-type {
    margin-top: 0; /* Remove any top margin from first card */
}

@media (min-width: 768px) {
    .attorney-fullpage-card {
        grid-template-columns: 50% 50%;
        gap: 3rem;
        margin-bottom: 5rem;
    }
}

@media (min-width: 1024px) {
    .attorney-fullpage-card {
        gap: 4rem;
    }
}

/* Stagger animations */
.attorney-fullpage-card:first-of-type {
    animation-delay: 0.1s;
}

.attorney-fullpage-card:nth-of-type(2) {
    animation-delay: 0.3s;
}

.attorney-fullpage-card:nth-of-type(3) {
    animation-delay: 0.5s;
}

.attorney-fullpage-card:nth-of-type(4) {
    animation-delay: 0.7s;
}

.attorney-fullpage-card:nth-of-type(5) {
    animation-delay: 0.9s;
}

.attorney-fullpage-card:nth-of-type(6) {
    animation-delay: 1.1s;
}

.attorney-fullpage-card:nth-of-type(7) {
    animation-delay: 1.3s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alternate layout for odd/even */
.attorney-right {
    direction: rtl;
}

@media (max-width: 767px) {
    .attorney-right {
        direction: ltr;
    }
}

/* Reverse text direction inside */
.attorney-right > * {
    direction: ltr;
}

/* ==========================================
   3. ATTORNEY IMAGE SIDE - BLUE BORDER GLOW (RESPONSIVE FIXES)
   ========================================== */
.attorney-image-side {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    aspect-ratio: 3 / 4;
    /* BLUE TINTED BACKGROUND */
    background: linear-gradient(135deg, #0a1628 0%, #1a2642 100%);
    border: 1px solid rgba(194, 166, 115, 0.3);
    transition: all var(--transition-slow);
    max-width: 100%;
    box-sizing: border-box;
}

.attorney-image-side:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 30px rgba(26, 38, 66, 0.6), 
                0 0 40px rgba(212, 175, 55, 0.2);
    transform: scale(1.02);
}

.attorney-image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform var(--transition-slow);
}

.attorney-image-side:hover img {
    transform: scale(1.08);
}

.image-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.1) 0%,
        transparent 50%
    );
    pointer-events: none;
}

/* ==========================================
   4. ATTORNEY CONTENT SIDE (RESPONSIVE FIXES)
   ========================================== */
.attorney-content-side {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: clamp(1rem, 3vw, 0);
    max-width: 100%;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .attorney-content-side {
        gap: 2.5rem;
    }
}

/* ==========================================
   5. ATTORNEY HEADER (RESPONSIVE FIXES)
   ========================================== */
.attorney-header {
    border-bottom: 2px solid rgba(194, 166, 115, 0.3);
    padding-bottom: 1.5rem;
    max-width: 100%;
}

.attorney-fullpage-name {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 0.5rem 0;
    color: var(--color-light-text);
    max-width: 100%;
    word-wrap: break-word;
}

.attorney-fullpage-title {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    color: var(--color-accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.title-divider {
    width: min(60px, 20vw);
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), transparent);
    margin-top: 1rem;
}

/* ==========================================
   6. ATTORNEY BIO SECTION (RESPONSIVE FIXES)
   ========================================== */
.attorney-bio-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 100%;
}

.attorney-bio-main {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.8;
    color: var(--color-light-text);
    margin: 0;
    max-width: 100%;
}

.attorney-bio-secondary {
    font-size: clamp(0.9rem, 1.5vw, 0.95rem);
    line-height: 1.7;
    color: var(--color-light-text-muted);
    margin: 0;
    max-width: 100%;
}

/* ==========================================
   7. EXPERTISE SECTION - BLUE THEMED TAGS (RESPONSIVE FIXES)
   ========================================== */
.expertise-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 100%;
}

.expertise-title {
    font-size: clamp(0.9rem, 1.8vw, 1rem);
    font-weight: 600;
    color: var(--color-light-text);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.expertise-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    max-width: 100%;
}

.expertise-tag {
    display: inline-flex;
    align-items: center;
    padding: clamp(0.4rem, 1vw, 0.5rem) clamp(0.75rem, 2vw, 1rem);
    /* BLUE BACKGROUND WITH GOLD BORDER */
    background: rgba(26, 38, 66, 0.6);
    border: 1px solid rgba(194, 166, 115, 0.4);
    border-radius: var(--radius-sm);
    color: var(--color-light-text-muted);
    font-size: clamp(0.8rem, 1.5vw, 0.85rem);
    font-weight: 500;
    transition: all var(--transition-fast);
    box-sizing: border-box;
    white-space: nowrap;
}

.expertise-tag:hover {
    background: rgba(26, 38, 66, 0.9);
    border-color: var(--color-accent);
    color: var(--color-accent);
    box-shadow: 0 0 15px rgba(194, 166, 115, 0.3);
}

/* ==========================================
   8. CREDENTIALS SECTION (RESPONSIVE FIXES)
   ========================================== */
.credentials-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 100%;
}

.credentials-title {
    font-size: clamp(0.9rem, 1.8vw, 1rem);
    font-weight: 600;
    color: var(--color-light-text);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.credentials-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    max-width: 100%;
}

.credentials-list li {
    font-size: clamp(0.9rem, 1.5vw, 0.95rem);
    color: var(--color-light-text-muted);
    line-height: 1.6;
    padding-left: 1.5rem;
    position: relative;
    transition: all var(--transition-fast);
    max-width: 100%;
    box-sizing: border-box;
}

.credentials-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: 700;
    font-size: 1.1rem;
}

.credentials-list li:hover {
    padding-left: 2rem;
    color: var(--color-light-text);
}

/* ==========================================
   9. ATTORNEY CONTACT OVERLAY (ALWAYS VISIBLE) - LARGER BUTTONS (RESPONSIVE FIXES)
   ========================================== */
.attorney-contact-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.25rem, 3vw, 1.5rem);
    padding: clamp(1.75rem, 4vw, 2rem);
    /* BLUE GRADIENT OVERLAY */
    background: linear-gradient(
        to bottom,
        rgba(10, 22, 40, 0) 0%,
        rgba(10, 22, 40, 0.3) 40%,
        rgba(15, 29, 53, 0.8) 70%,
        rgba(10, 22, 40, 1) 100%
    );
    opacity: 1;
    transform: translateY(0);
    transition: all var(--transition-medium);
    pointer-events: auto;
    z-index: 20;
    box-sizing: border-box;
}

.contact-overlay-btn {
    width: clamp(60px, 10vw, 70px);
    height: clamp(60px, 10vw, 70px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border: 2px solid var(--color-accent);
    border-radius: 50%;
    color: var(--color-accent);
    transition: all var(--transition-fast);
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
}

.contact-overlay-btn:hover {
    background: var(--color-accent);
    color: #0a1628; /* Dark blue text on gold background */
    transform: scale(1.15) translateY(-5px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4), 
                0 0 30px rgba(194, 166, 115, 0.3);
}

.contact-overlay-btn svg {
    width: clamp(28px, 5vw, 32px);
    height: clamp(28px, 5vw, 32px);
    transition: transform var(--transition-fast);
}

.contact-overlay-btn:hover svg {
    transform: scale(1.1);
}

/* Mobile - slightly smaller but still prominent */
@media (max-width: 767px) {
    .attorney-contact-overlay {
        padding: 1.75rem;
        gap: 1.25rem;
    }
    
    .contact-overlay-btn {
        width: 60px;
        height: 60px;
    }
    
    .contact-overlay-btn svg {
        width: 28px;
        height: 28px;
    }
}

/* Tablet optimization */
@media (min-width: 768px) and (max-width: 1023px) {
    .contact-overlay-btn {
        width: 65px;
        height: 65px;
    }
    
    .contact-overlay-btn svg {
        width: 30px;
        height: 30px;
    }
}

/* ==========================================
   10. MOBILE OPTIMIZATIONS (ENHANCED)
   ========================================== */
@media (max-width: 767px) {
    .attorneys-hero {
        min-height: 280px;
    }
    
    .attorney-fullpage-card {
        margin-bottom: 3rem;
        gap: 1.5rem;
    }
    
    .attorney-content-side {
        padding: 1rem;
    }
    
    .attorney-bio-section {
        gap: 1.25rem;
    }
    
    .expertise-tags {
        gap: 0.5rem;
    }
    
    .expertise-tag {
        font-size: 0.8rem;
        padding: 0.4rem 0.75rem;
    }
    
    .attorney-image-side {
        aspect-ratio: 2 / 3;
    }
}

/* ==========================================
   11. TABLET OPTIMIZATIONS (ENHANCED)
   ========================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .attorney-fullpage-card {
        grid-template-columns: 45% 55%;
        gap: 2.5rem;
        margin-bottom: 4rem;
    }
    
    .attorney-fullpage-name {
        font-size: 2.25rem;
    }
    
    .attorney-fullpage-title {
        font-size: 1.1rem;
    }
}

/* ==========================================
   12. LARGE DESKTOP OPTIMIZATIONS (RESPONSIVE FIXES)
   ========================================== */
@media (min-width: 1400px) {
    .attorney-fullpage-card {
        grid-template-columns: 45% 55%;
        gap: 5rem;
        margin-bottom: 6rem;
    }
    
    .attorney-fullpage-name {
        font-size: clamp(2.5rem, 4vw, 3rem);
    }
    
    .attorney-bio-main {
        font-size: clamp(1.1rem, 2vw, 1.2rem);
    }
}

/* ==========================================
   13. CTA SECTION - ENHANCED WITH BLUE THEME (RESPONSIVE FIXES)
   ========================================== */

.cta-enhanced-section {
    position: relative;
    overflow: hidden;
    /* BLUE GRADIENT BACKGROUND */
    background: linear-gradient(135deg, #0a1628 0%, #1a2642 100%);
    border-top: 1px solid rgba(194, 166, 115, 0.3);
    border-bottom: 1px solid rgba(194, 166, 115, 0.3);
    width: 100%;
}

/* Background Pattern */
.cta-background-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.cta-content-wrapper {
    position: relative;
    z-index: 1;
    max-width: min(700px, 95vw);
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 2rem);
    box-sizing: border-box;
    padding: 0 clamp(1rem, 3vw, 0);
}

.cta-icon-badge {
    width: clamp(64px, 12vw, 80px);
    height: clamp(64px, 12vw, 80px);
    background: rgba(212, 175, 55, 0.1);
    border: 2px solid var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    transition: all var(--transition-medium);
}

.cta-content-wrapper:hover .cta-icon-badge {
    background: rgba(212, 175, 55, 0.2);
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 0 30px rgba(194, 166, 115, 0.3);
}

.cta-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    max-width: 100%;
    word-wrap: break-word;
}

.cta-subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--color-light-text-muted);
    margin: 0;
    max-width: min(500px, 90vw);
}

/* Contact Options */
.cta-contact-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
    max-width: min(600px, 100%);
}

@media (min-width: 640px) {
    .cta-contact-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cta-contact-method {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: clamp(1rem, 3vw, 1.25rem) clamp(1.25rem, 3vw, 1.5rem);
    /* BLUE CARD BACKGROUND */
    background: rgba(15, 29, 53, 0.6);
    border: 1px solid rgba(194, 166, 115, 0.3);
    border-radius: var(--radius-md);
    transition: all var(--transition-medium);
    cursor: pointer;
    box-sizing: border-box;
    max-width: 100%;
}

.cta-contact-method:hover {
    border-color: var(--color-accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(26, 38, 66, 0.6),
                0 0 20px rgba(194, 166, 115, 0.2);
    background: rgba(15, 29, 53, 0.9);
}

.contact-method-icon {
    width: clamp(40px, 8vw, 48px);
    height: clamp(40px, 8vw, 48px);
    background: rgba(212, 175, 55, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.cta-contact-method:hover .contact-method-icon {
    background: var(--color-accent);
    color: #0a1628; /* Dark blue text */
    transform: scale(1.1);
}

.contact-method-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    flex-grow: 1;
    min-width: 0;
}

.contact-method-label {
    font-size: clamp(0.7rem, 1.2vw, 0.75rem);
    color: var(--color-light-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.contact-method-value {
    font-size: clamp(0.9rem, 1.8vw, 1rem);
    color: var(--color-light-text);
    font-weight: 500;
}

.cta-button-large {
    padding: clamp(0.8rem, 2vw, 1.1rem) clamp(1.5rem, 4vw, 2.5rem);
    font-size: clamp(0.9rem, 1.8vw, 1rem);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 100%;
    box-sizing: border-box;
}

.cta-button-large svg {
    transition: transform var(--transition-fast);
}

.cta-button-large:hover svg {
    transform: translateX(5px);
}

/* ==========================================
   14. FOOTER - MULTI-COLUMN LAYOUT WITH BLUE THEME (RESPONSIVE FIXES)
   ========================================== */

#main-footer {
    /* BLUE GRADIENT BACKGROUND */
    background: linear-gradient(180deg, #0a1628 0%, #0f1d35 100%);
    border-top: 1px solid rgba(194, 166, 115, 0.3);
    overflow-x: hidden;
    width: 100%;
}

.footer-main {
    padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.5rem, 3vw, 2rem);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 100%;
}

@media (min-width: 640px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
        gap: 4rem;
    }
}

/* Brand Column */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.footer-logo img {
    height: clamp(40px, 6vw, 45px);
    width: auto;
    opacity: 0.9;
    transition: opacity var(--transition-fast);
}

.footer-logo:hover img {
    opacity: 1;
}

.footer-tagline {
    font-size: clamp(0.9rem, 1.5vw, 0.95rem);
    color: var(--color-light-text-muted);
    line-height: 1.6;
    max-width: min(280px, 100%);
    margin: 0;
}

.footer-address {
    font-size: clamp(0.85rem, 1.5vw, 0.9rem);
    color: var(--color-light-text-muted);
    line-height: 1.6;
}

.footer-address p {
    margin: 0.25rem 0;
    max-width: 100%;
}

/* Column Titles */
.footer-column-title {
    font-size: clamp(0.9rem, 1.8vw, 1rem);
    font-weight: 600;
    color: var(--color-light-text);
    margin: 0 0 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Footer Links */
.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-links a {
    color: var(--color-light-text-muted);
    font-size: clamp(0.85rem, 1.5vw, 0.9rem);
    transition: color var(--transition-fast), padding-left var(--transition-fast);
    display: inline-block;
}

.footer-links a:hover {
    color: var(--color-accent);
    padding-left: 8px;
}

/* Footer Contact */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-contact li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-contact svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

.footer-contact a {
    color: var(--color-light-text-muted);
    font -size: clamp(0.85rem, 1.5vw, 0.9rem);
    transition: color var(--transition-fast);
}

.footer-contact a:hover {
    color: var(--color-accent);
}

/* Footer Bottom */
.footer-bottom {
    padding: 1.5rem 0;
    border-top: 1px solid rgba(194, 166, 115, 0.2);
}

.footer-bottom-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    text-align: center;
}

@media (min-width: 768px) {
    .footer-bottom-content {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.footer-copyright {
    font-size: clamp(0.8rem, 1.5vw, 0.85rem);
    color: var(--color-light-text-muted);
    margin: 0;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: clamp(0.8rem, 1.5vw, 0.85rem);
}

.footer-legal-links a {
    color: var(--color-light-text-muted);
    transition: color var(--transition-fast);
}

.footer-legal-links a:hover {
    color: var(--color-accent);
}

.footer-divider {
    color: rgba(194, 166, 115, 0.3);
}

.credit-bar {
    background: linear-gradient(90deg, 
        rgba(212, 175, 55, 0.03) 0%, 
        rgba(212, 175, 55, 0.08) 50%, 
        rgba(212, 175, 55, 0.03) 100%);
    border-top: 1px solid rgba(212, 175, 55, 0.15);
    padding: 0.75rem;
    text-align: center;
    font-size: clamp(0.75rem, 1.2vw, 0.8rem);
    color: var(--color-light-text-muted);
    font-family: var(--font-body);
    letter-spacing: 0.3px;
}

.credit-bar a {
    color: var(--color-accent);
    font-weight: 500;
    transition: color var(--transition-fast);
    text-decoration: none;
}

.credit-bar a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

/* ==========================================
   15. CTA & FOOTER MOBILE OPTIMIZATIONS (ENHANCED)
   ========================================== */

@media (max-width: 767px) {
    .cta-content-wrapper {
        gap: 1.5rem;
        padding: 0 0.5rem;
    }
    
    .cta-contact-options {
        grid-template-columns: 1fr;
    }
    
    .cta-button-large {
        padding: 1rem 2rem;
        font-size: 0.95rem;
    }
    
    .footer-grid {
        gap: 2rem;
    }
    
    .footer-tagline {
        max-width: none;
    }
    
    .cta-title {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
    }
    
    .cta-subtitle {
        font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    }
    
    .contact-method-icon {
        width: 40px;
        height: 40px;
    }
}

/* ==========================================
   16. ACCESSIBILITY (ENHANCED)
   ========================================== */
.attorney-fullpage-name:focus-visible,
.contact-overlay-btn:focus-visible {
    outline: 2px solid var(--color-accent-text);
    outline-offset: 4px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .attorney-image-side,
    .attorney-image-side img,
    .contact-overlay-btn,
    .expertise-tag {
        transition: none !important;
        animation: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .attorney-fullpage-card {
        border: 2px solid var(--color-accent);
        padding: 2rem;
        border-radius: var(--radius-lg);
    }
    
    .expertise-tag,
    .contact-overlay-btn {
        border-width: 2px;
    }
}

/* ==========================================
   17. PRINT STYLES
   ========================================== */
@media print {
    .attorney-image-side {
        border: 1px solid #000;
    }
    
    .contact-overlay-btn {
        border: 1px solid #000;
        background: white !important;
    }
    
    .expertise-tag {
        border: 1px solid #000;
        background: white !important;
    }
}

/* ==========================================
   18. BLUE THEME SUMMARY & CUSTOMIZATION GUIDE
   ========================================== */

/*
BLUE COLOR PALETTE (matching areas-of-practice):
- Primary Blue: #0a1628 (dark navy)
- Secondary Blue: #1a2642 (medium navy)
- Accent Blue: #0f1d35 (deep navy)
- Gold Accent: #c2a673 (warm gold)

KEY CHANGES FROM ORIGINAL:
1. Hero section: Blue gradient background
2. Grid section: Blue gradient background
3. Image cards: Blue-tinted backgrounds with gold borders
4. Expertise tags: Blue backgrounds with gold accents
5. Contact overlay: Blue gradient with enhanced gold glow
6. CTA section: Blue background with gold accents
7. Footer: Blue gradient background
8. All hover states: Blue + gold glow effects

CUSTOMIZATION OPTIONS:

To adjust blue intensity:
- Lighter: Use rgba(26, 38, 66, 0.4) instead of 0.6
- Darker: Use rgba(10, 22, 40, 0.9) instead of 0.8

To adjust gold accent visibility:
- More prominent: Increase rgba(212, 175, 55, X) alpha values
- Subtler: Decrease rgba(212, 175, 55, X) alpha values

BACKGROUND IMAGE:
- The hero section maintains support for custom background images
- The blue overlay provides excellent contrast with images
- Follow the original instructions in lines 24-27 for image paths

RESPONSIVE FIXES APPLIED:
1. Added overflow-x: hidden and width: 100% to all sections
2. Made all containers responsive with min() functions and clamp()
3. Enhanced responsive typography with better clamp() values
4. Fixed button and icon sizing to be fluid and responsive
5. Added box-sizing: border-box to prevent overflow issues
6. Made images and cards responsive with proper max-width constraints
7. Enhanced mobile optimizations with better padding and spacing
8. Fixed CTA section responsiveness with proper container constraints
9. Improved footer responsiveness with fluid typography and spacing
10. Added proper word-wrapping for long text elements
*/