:root {
  /* Fonts */
  --font-sans: 'Montserrat', system-ui, sans-serif;
  --font-serif: 'Cormorant Garamond', serif;

  /* Colors */
  --color-bg: #fdfcfb;
  --color-surface: #ffffff;
  --color-surface-alt: #f4efe9;
  
  --color-text-main: #3a3836;
  --color-text-muted: #6b6661;
  --color-heading: #2c2a28;
  
  --color-accent-gold: #c8a97e;
  --color-accent-green: #89967c;
  
  --border-radius: 4px;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text-main);
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--color-heading);
  line-height: 1.1;
  font-weight: 600;
}

p {
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.card-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-text-main);
  text-decoration: none;
  font-size: 1.05rem;
  transition: all 0.3s ease;
}

.card-link::before {
  content: '';
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.card-link[href^="tel:"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233a3836" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>');
}

.card-link[href^="mailto:"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233a3836" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>');
}

.card-link[href*="instagram"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="%233a3836"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>');
}

.card-link:hover {
  color: var(--color-accent-gold);
  transform: translateX(5px);
}

.card-link:hover::before {
  opacity: 1;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

/* Header & Nav */
.header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgba(253, 252, 251, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 1000;
}



.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 5%;
  max-width: 1400px;
  margin: 0 auto;
}

.logo {
  display: flex;
  flex-direction: column;
}

.logo-main {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  letter-spacing: 1px;
}

.logo-sub {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-accent-gold);
  font-weight: 500;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.nav-link {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

.nav-link:hover {
  color: var(--color-accent-gold);
}

.btn-outline {
  border: 1px solid var(--color-heading);
  padding: 0.6rem 1.5rem;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
  border-radius: var(--border-radius);
}

.btn-outline:hover {
  background-color: var(--color-heading);
  color: var(--color-bg);
}

.btn-solid {
  background-color: var(--color-heading);
  color: var(--color-bg);
  padding: 1rem 2rem;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
  border-radius: var(--border-radius);
  display: inline-block;
}

.btn-solid:hover {
  background-color: var(--color-accent-gold);
}

.btn-text {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
  color: var(--color-heading);
}

.btn-text:hover {
  color: var(--color-accent-green);
}

/* Hero Section */
.hero-split {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 6rem 5% 0;
  max-width: 1400px;
  margin: 0 auto;
}

.hero-text {
  flex: 1;
  padding-right: 5rem;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.8rem;
  color: var(--color-accent-gold);
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.hero-text h1 {
  font-size: clamp(3rem, 5vw, 5.5rem);
  margin-bottom: 1.5rem;
  text-wrap: balance;
}

.hero-text h1 span {
  font-style: italic;
  color: var(--color-accent-green);
}

.subtitle {
  font-size: 1.1rem;
  max-width: 80%;
  margin-bottom: 3rem;
  font-weight: 300;
}

.hero-buttons {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.hero-image {
  flex: 1;
  height: 80vh;
  position: relative;
}

.image-wrapper {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 0;
  position: relative;
}

.badge {
  position: absolute;
  bottom: -2rem;
  left: -2rem;
  background-color: var(--color-surface);
  padding: 1.5rem 2rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.badge-icon {
  background-color: var(--color-accent-green);
  color: white;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.8rem;
}

.badge-text {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
}

/* Services */
.services-section {
  padding: 8rem 5%;
  background-color: var(--color-surface-alt);
}

.section-title {
  text-align: center;
  margin-bottom: 5rem;
}

.section-title h2 {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  margin-bottom: 1.5rem;
}

.divider {
  width: 60px;
  height: 2px;
  background-color: var(--color-accent-gold);
  margin: 0 auto 1.5rem;
}

.services-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 4rem;
  max-width: 1200px;
  margin: 0 auto;
}

.service-box {
  background-color: var(--color-surface);
  padding: 4rem;
  box-shadow: 0 5px 30px rgba(0,0,0,0.02);
}

.service-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-surface-alt);
}

.icon-circle {
  font-size: 2rem;
  width: 60px;
  height: 60px;
  background-color: var(--color-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.service-header h3 {
  font-size: 2rem;
  margin-bottom: 0.2rem;
}

.service-professional {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-accent-gold);
  margin-bottom: 0;
  font-weight: 500;
}

.clean-list {
  list-style: none;
}

.clean-list li {
  margin-bottom: 1.2rem;
  padding-left: 1.5rem;
  position: relative;
  font-weight: 300;
  color: var(--color-text-main);
}

.clean-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-accent-gold);
}

/* Contact */
.contact-section {
  padding: 8rem 5%;
  max-width: 1200px;
  margin: 0 auto;
}

.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: 3rem;
  align-items: stretch;
}

.contact-info h2 {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  margin-bottom: 1.5rem;
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.contact-card {
  padding: 3rem;
  background-color: var(--color-surface-alt);
  border-left: 3px solid var(--color-accent-green);
}

.card-title {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.card-name {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--color-heading);
  margin-bottom: 1.5rem;
}



.social-link {
  margin-top: 2rem;
  font-weight: 500;
}

/* Footer */
.site-footer {
  text-align: center;
  padding: 3rem 5%;
  border-top: 1px solid var(--color-surface-alt);
  font-size: 0.9rem;
}

/* Animations */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

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

.fade-in-left {
  animation: fadeInLeft 1s ease-out forwards;
}

.fade-in-right {
  animation: fadeInRight 1s ease-out forwards;
}

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes revealUp {
      from { opacity: 0; transform: translateY(40px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .reveal-up {
      animation: revealUp linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 25%;
    }
  }
}

/* Responsive */
@media (max-width: 992px) {
  .hero-split {
    flex-direction: column;
    padding-top: 8rem;
  }
  .hero-text {
    padding-right: 0;
    margin-bottom: 4rem;
  }
  .hero-image {
    width: 100%;
    height: 50vh;
  }
  .badge {
    left: 0;
    bottom: -1rem;
  }
  .contact-wrapper {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .nav-container {
    flex-direction: column;
    gap: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .nav-menu {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8rem;
  }
  .nav-link {
    font-size: 0.85rem;
    padding: 0.4rem 0;
  }
  .contact-cards {
    grid-template-columns: 1fr;
  }
  .service-box {
    padding: 2rem;
  }
}

/* NEW SPECIALTY SECTIONS STYLES */
.specialty-container {
  background-color: var(--color-surface);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: var(--border-radius);
  padding: 4rem;
  box-shadow: 0 20px 40px rgba(0,0,0,0.02);
  margin-bottom: 3rem;
}

.specialty-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-surface-alt);
}

.specialty-header.has-photo {
  align-items: flex-start;
}

.profile-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 4px solid var(--color-surface-alt);
}

.icon-circle.large {
  width: 80px;
  height: 80px;
  font-size: 2.5rem;
}

.specialty-title h3 {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  color: var(--color-heading);
  margin-bottom: 0.25rem;
}

.professional-title {
  font-weight: 600;
  color: var(--color-accent-green);
  font-size: 1.1rem;
  letter-spacing: 1px;
}

.credentials {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.specialty-desc {
  font-size: 1.1rem;
  line-height: 1.6;
}

.practice-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.practice-card {
  background-color: var(--color-surface-alt);
  padding: 2rem;
  border-radius: var(--border-radius);
}

.practice-card h4 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--color-accent-gold);
}

.practice-card ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.practice-card li {
  margin-bottom: 0.5rem;
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.practice-card li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-accent-gold);
}

.business-advisory {
  background-color: var(--color-heading);
  color: var(--color-surface);
  padding: 2.5rem;
  border-radius: var(--border-radius);
  margin-bottom: 3rem;
  text-align: center;
}

.business-advisory h4 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: var(--color-accent-gold);
}

.business-advisory p {
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.95);
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0 0;
  text-align: left;
}

.highlights-grid li {
  background: var(--color-surface);
  padding: 1rem 1.5rem;
  border-radius: var(--border-radius);
  font-size: 0.95rem;
  border-left: 3px solid var(--color-accent-green);
  box-shadow: 0 4px 6px rgba(0,0,0,0.02);
  color: var(--color-heading);
}

.documentation-section h4 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

.accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.accordion details {
  background-color: var(--color-surface-alt);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.accordion summary {
  padding: 1.5rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary::after {
  content: '+';
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--color-accent-green);
  transition: transform 0.3s ease;
}

.accordion details[open] summary::after {
  content: '-';
}

.accordion details ul {
  padding: 0 1.5rem 1.5rem 3rem;
  margin: 0;
  color: var(--color-text-muted);
}

.accordion details li {
  margin-bottom: 0.5rem;
}

.contact-notes {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: var(--color-surface-alt);
  border-left: 3px solid var(--color-accent-gold);
}

.contact-notes p {
  margin-bottom: 0.5rem;
  color: var(--color-heading);
}

.contact-notes p:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .specialty-container {
    padding: 2rem;
  }
  .specialty-header {
    flex-direction: column;
    text-align: center;
    align-items: center !important;
  }
}

.card-link[href^="https://wa.me"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="%233a3836"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-23.1-115-65-157zM223.9 411.3c-33.1 0-65.6-8.9-94-25.7l-6.7-4-69.8 18.3L72 331.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>');
}