@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,700;1,400&family=Source+Sans+Pro:wght@400;600&display=swap');
body, html { margin: 0; padding: 0; font-family: 'Source Sans Pro', sans-serif; color: #333; background: #fff; }
.legal-wrapper { display: flex; min-height: 100vh; }
.legal-sidebar { width: 320px; background: #1b2631; color: white; display: flex; flex-direction: column; padding: 50px 0; border-right: 5px solid #bdc3c7; flex-shrink: 0; }
.logo-area { text-align: center; margin-bottom: 60px; cursor: pointer; padding: 0 30px; }
.initials { width: 80px; height: 80px; border: 2px solid #bdc3c7; display: flex; align-items: center; justify-content: center; font-family: 'Merriweather', serif; font-size: 2rem; margin: 0 auto 20px auto; color: #bdc3c7; }
.logo-area h1 { font-family: 'Merriweather', serif; font-size: 1.8rem; font-weight: 300; margin: 0 0 5px 0; letter-spacing: 1px; }
.logo-area span { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 3px; color: #7f8c8d; }
.vertical-nav { display: flex; flex-direction: column; }
.vertical-nav a { padding: 15px 40px; color: #bdc3c7; text-decoration: none; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 2px; border-left: 3px solid transparent; cursor: pointer; transition: all 0.3s; }
.vertical-nav a:hover, .vertical-nav a.active { background: #2c3e50; color: white; border-left-color: #bdc3c7; }
.contact-card { margin-top: auto; padding: 0 40px; font-size: 0.9rem; color: #7f8c8d; line-height: 1.6; }
.pin-icon { font-size: 1.5rem; margin-bottom: 15px; }
.phone { display: block; color: white; text-decoration: none; font-size: 1.2rem; margin-top: 15px; font-family: 'Merriweather', serif; }
.legal-main { flex: 1; display: flex; flex-direction: column; background: #fdfdfd; }
.page { display: none; flex: 1; }
.page.active { display: block; animation: slideIn 0.5s; }
.page-header { height: 400px; background-size: cover; background-position: center 30%; position: relative; display: flex; align-items: flex-end; padding: 50px; }
.page-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent, rgba(0,0,0,0.8)); }
.page-header.dark { background: #eaeded; height: 250px; }
.page-header.dark::before { display: none; }
.page-header h2 { position: relative; color: white; font-family: 'Merriweather', serif; font-size: 3rem; font-weight: 300; margin: 0; }
.page-header.dark h2 { color: #1b2631; border-bottom: 2px solid #bdc3c7; padding-bottom: 20px; }
.text-content { padding: 60px 50px; max-width: 900px; }
.text-content h3 { font-family: 'Merriweather', serif; font-size: 2.2rem; color: #1b2631; margin-top: 0; }
.lead { font-size: 1.3rem; line-height: 1.8; color: #2c3e50; font-family: 'Merriweather', serif; font-weight: 300; }
.text-content p { font-size: 1.1rem; line-height: 1.8; margin-bottom: 20px; color: #555; }
.practice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.p-area { padding: 30px; background: white; border: 1px solid #eaeded; border-top: 4px solid #1b2631; }
.p-area h4 { font-family: 'Merriweather', serif; font-size: 1.4rem; margin: 0 0 15px 0; color: #1b2631; }
.p-area p { font-size: 1rem; margin: 0; }
.legal-form { display: flex; flex-direction: column; gap: 20px; background: white; padding: 40px; border: 1px solid #eaeded; }
.f-row { display: flex; gap: 20px; }
.f-row input { flex: 1; }
.legal-form input, .legal-form select, .legal-form textarea { padding: 15px; border: 1px solid #bdc3c7; font-family: 'Source Sans Pro', sans-serif; font-size: 1rem; border-radius: 0; }
.legal-form button { background: #1b2631; color: white; border: none; padding: 18px; font-family: 'Source Sans Pro', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: background 0.3s; }
.legal-form button:hover { background: #2c3e50; }
.legal-footer { padding: 30px 50px; background: #eaeded; color: #7f8c8d; font-size: 0.85rem; border-top: 1px solid #bdc3c7; }
.legal-footer a { color: #1b2631; text-decoration: none; margin-left: 10px; }
@keyframes slideIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }