:root  {  --primary: #c9a66b;  --primary-dark: #a6854b;  --secondary: #8b7355;  --text: #3d3530;  --text-light: #6b5f57;  --bg: #fdfcfa;  --bg-alt: #f7f3ef;  --radius: 8px;  --shadow: 0 4px 6px rgba(0,0,0,0.1);  --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);  }
 *  {  box-sizing: border-box;  margin: 0;  padding: 0;  }
 body  {  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;  line-height: 1.6;  color: var(--text);  background: var(--bg);  }
 .container  {  max-width: 1200px;  margin: 0 auto;  padding: 0 1rem;  }
 a  {  color: var(--primary);  text-decoration: none;  }
 a:hover  {  text-decoration: underline;  }
 img  {  max-width: 100%;  height: auto;  }
 h1, h2, h3, h4, h5, h6  {  line-height: 1.2;  margin-bottom: 1rem;  }
 h1  {  font-size: 2.5rem;  }
 h2  {  font-size: 2rem;  }
 h3  {  font-size: 1.5rem;  }
 p  {  margin-bottom: 1rem;  }
 .btn  {  display: inline-block;  padding: 0.75rem 1.5rem;  border-radius: var(--radius);  font-weight: 600;  text-align: center;  cursor: pointer;  transition: all 0.2s ease;  text-decoration: none;  border: 2px solid transparent;  }
 .btn-primary  {  background: var(--primary);  color: white;  border-color: var(--primary);  }
 .btn-primary:hover  {  background: var(--primary-dark);  border-color: var(--primary-dark);  text-decoration: none;  }
 .btn-secondary  {  background: transparent;  color: var(--primary);  border-color: var(--primary);  }
 .btn-secondary:hover  {  background: var(--primary);  color: white;  text-decoration: none;  }
 .site-header  {  position: sticky;  top: 0;  z-index: 100;  background: var(--bg);  box-shadow: 0 2px 10px rgba(0,0,0,0.05);  padding: 0.75rem 0;  }
 .site-header .container  {  display: flex;  align-items: center;  justify-content: space-between;  }
 .logo-img  {  max-width: 200px;  height: auto;  }
 .nav-toggle  {  display: flex;  flex-direction: column;  justify-content: center;  gap: 5px;  background: none;  border: none;  cursor: pointer;  padding: 0.5rem;  z-index: 101;  }
 .nav-toggle span  {  display: block;  width: 28px;  height: 3px;  background: var(--text);  border-radius: 2px;  transition: all 0.3s ease;  }
 .nav-toggle.active span:nth-child(1)  {  transform: rotate(45deg) translate(5px, 6px);  }
 .nav-toggle.active span:nth-child(2)  {  opacity: 0;  }
 .nav-toggle.active span:nth-child(3)  {  transform: rotate(-45deg) translate(5px, -6px);  }
 .main-nav  {  display: none;  position: fixed;  top: 0;  right: 0;  bottom: 0;  width: 300px;  background: var(--bg);  padding: 5rem 1.5rem 1.5rem;  box-shadow: -4px 0 20px rgba(0,0,0,0.1);  z-index: 100;  }
 .main-nav.active  {  display: block;  }
 .nav-menu  {  list-style: none;  padding: 0;  margin: 0;  }
 .nav-menu li  {  margin-bottom: 0;  }
 .nav-menu a  {  display: block;  padding: 1rem 0;  color: var(--text);  text-decoration: none;  font-size: 1.1rem;  border-bottom: 1px solid #eee;  font-weight: 500;  }
 .nav-menu a:hover  {  color: var(--primary);  text-decoration: none;  }
 .nav-menu .btn  {  margin-top: 1rem;  text-align: center;  }
 .nav-overlay  {  display: none;  position: fixed;  top: 0;  left: 0;  right: 0;  bottom: 0;  background: rgba(0,0,0,0.5);  z-index: 99;  }
 .nav-overlay.active  {  display: block;  }
 .hero  {  padding: 4rem 0;  background: var(--bg-alt);  }
 .hero-grid  {  display: grid;  grid-template-columns: 1fr;  gap: 2rem;  align-items: center;  }
 .hero-content h1  {  font-size: 2rem;  margin-bottom: 1rem;  }
 .lead  {  font-size: 1.125rem;  color: var(--text-light);  margin-bottom: 1.5rem;  }
 .hero-buttons  {  display: flex;  gap: 1rem;  flex-wrap: wrap;  }
 .hero-image img  {  border-radius: var(--radius);  box-shadow: var(--shadow-lg);  }
 @media (min-width: 768px)  {  .hero-grid  {    grid-template-columns: 1fr 1fr;    }
   .hero-content h1  {    font-size: 2.5rem;    }
  }
 .section  {  padding: 4rem 0;  }
 .section-alt  {  background: var(--bg-alt);  }
 .section-header  {  text-align: center;  margin-bottom: 3rem;  }
 .section-header h2  {  margin-bottom: 0.5rem;  }
 .section-header p  {  color: var(--text-light);  max-width: 600px;  margin: 0 auto;  }
 .service-grid  {  display: grid;  grid-template-columns: 1fr;  gap: 2rem;  }
 @media (min-width: 640px)  {  .service-grid  {    grid-template-columns: repeat(2, 1fr);    }
  }
 @media (min-width: 1024px)  {  .service-grid  {    grid-template-columns: repeat(3, 1fr);    }
  }
 .service-card  {  background: var(--bg);  padding: 2rem;  border-radius: var(--radius);  box-shadow: var(--shadow);  text-align: center;  }
 .service-card h3  {  margin-bottom: 0.5rem;  }
 .service-card .price  {  font-size: 1.25rem;  font-weight: 700;  color: var(--primary);  margin-bottom: 1rem;  }
 .service-card ul  {  list-style: none;  text-align: left;  margin-bottom: 1.5rem;  }
 .service-card ul li  {  padding: 0.25rem 0;  color: var(--text-light);  }
 .service-card ul li::before  {  content: "✓";  color: var(--primary);  margin-right: 0.5rem;  }
 .blog-grid  {  display: grid;  grid-template-columns: 1fr;  gap: 2rem;  }
 @media (min-width: 640px)  {  .blog-grid  {    grid-template-columns: repeat(2, 1fr);    }
  }
 @media (min-width: 1024px)  {  .blog-grid  {    grid-template-columns: repeat(3, 1fr);    }
  }
 .blog-card  {  background: var(--bg);  border-radius: var(--radius);  overflow: hidden;  box-shadow: var(--shadow);  }
 .blog-card-image  {  aspect-ratio: 16/9;  overflow: hidden;  }
 .blog-card-image img  {  width: 100%;  object-fit: cover;  object-position: top;  transition: transform 0.3s ease;  }
 .blog-card:hover .blog-card-image img  {  transform: scale(1.05);  }
 .blog-card-content  {  padding: 1.5rem;  }
 .blog-card .date  {  font-size: 0.875rem;  color: var(--text-light);  margin-bottom: 0.5rem;  }
 .blog-card h3  {  font-size: 1.125rem;  margin-bottom: 0.5rem;  }
 .blog-card h3 a  {  color: var(--text);  }
 .blog-card h3 a:hover  {  color: var(--primary);  }
 .blog-card p  {  font-size: 0.875rem;  color: var(--text-light);  margin-bottom: 0;  }
 .site-footer  {  background: var(--text);  color: white;  padding: 3rem 0;  text-align: center;  }
 .site-footer a  {  color: white;  opacity: 0.8;  }
 .site-footer a:hover  {  opacity: 1;  }
 .site-footer p  {  opacity: 0.7;  font-size: 0.875rem;  margin-bottom: 0.5rem;  }
 .site-footer  {  background: #1a202c;  color: white;  padding: 4rem 0 2rem;  }
 .footer-grid  {  text-align: left;  display: grid;  grid-template-columns: 1fr;  gap: 2.5rem;  margin-bottom: 3rem;  }
 @media (min-width: 640px)  {  .footer-grid  {    text-align: left;    grid-template-columns: repeat(2, 1fr);    }
  }
 @media (min-width: 1024px)  {  .footer-grid  {    text-align: left;    grid-template-columns: 2fr 1fr 1fr;    }
  }
 .footer-brand h3  {  font-size: 1.5rem;  margin-bottom: 1rem;  }
 .footer-brand p  {  opacity: 0.7;  font-size: 0.95rem;  line-height: 1.7;  margin-bottom: 1.5rem;  max-width: 400px;  }
 .social-links  {  display: flex;  gap: 1rem;  }
 .social-links a  {  display: flex;  align-items: center;  justify-content: center;  width: 40px;  height: 40px;  background: rgba(255,255,255,0.1);  border-radius: 50%;  transition: all 0.2s ease;  }
 .social-links a:hover  {  background: var(--primary);  transform: translateY(-2px);  }
 .social-links svg  {  opacity: 0.9;  }
 .footer-services h4, .footer-contact h4  {  font-size: 1rem;  text-transform: uppercase;  letter-spacing: 0.05em;  margin-bottom: 1.25rem;  opacity: 0.6;  }
 .footer-services ul  {  list-style: none;  padding: 0;  }
 .footer-services li  {  margin-bottom: 0.75rem;  }
 .footer-services a  {  color: white;  opacity: 0.8;  transition: opacity 0.2s ease;  }
 .footer-services a:hover  {  opacity: 1;  text-decoration: none;  }
 .footer-contact p  {  margin-bottom: 0.75rem;  opacity: 0.8;  }
 .footer-contact a  {  color: white;  opacity: 0.8;  }
 .footer-contact a:hover  {  opacity: 1;  }
 .footer-bottom  {  border-top: 1px solid rgba(255,255,255,0.1);  padding-top: 2rem;  text-align: center;  }
 .footer-bottom p  {  opacity: 0.5;  font-size: 0.875rem;  margin: 0;  }
 .blog-post  {  max-width: 800px;  margin: 0 auto;  padding: 3rem 1rem;  }
 .blog-post-header  {  text-align: center;  margin-bottom: 3rem;  }
 .blog-post-header h1  {  font-size: 2.5rem;  margin-bottom: 1rem;  }
 .blog-post-meta  {  color: var(--text-light);  font-size: 0.9rem;  margin-bottom: 1rem;  }
 .blog-post-image  {  margin-bottom: 2rem;  }
 .blog-post-image img  {  width: 100%;  border-radius: var(--radius);  box-shadow: var(--shadow);  }
 .blog-post-content  {  font-size: 1.1rem;  line-height: 1.8;  }
 .blog-post-content h2  {  font-size: 1.75rem;  margin-top: 2.5rem;  margin-bottom: 1rem;  }
 .blog-post-content h3  {  font-size: 1.35rem;  margin-top: 2rem;  margin-bottom: 0.75rem;  }
 .blog-post-content p  {  margin-bottom: 1.5rem;  }
 .blog-post-content ul, .blog-post-content ol  {  margin-bottom: 1.5rem;  padding-left: 1.5rem;  }
 .blog-post-content li  {  margin-bottom: 0.5rem;  }
 .blog-post-content a  {  color: var(--primary);  text-decoration: underline;  }
 .blog-post-content a:hover  {  color: var(--primary-dark);  }
 .blog-post-content blockquote  {  border-left: 4px solid var(--primary);  padding-left: 1.5rem;  margin: 2rem 0;  font-style: italic;  color: var(--text-light);  background: var(--bg-alt);  padding: 1.5rem;  border-radius: 0 var(--radius) var(--radius) 0;  }
 .blog-post-content img  {  max-width: 100%;  height: auto;  border-radius: var(--radius);  margin: 1.5rem 0;  }
 .blog-post-footer  {  margin-top: 3rem;  padding-top: 2rem;  border-top: 1px solid #eee;  }
 .blog-post-tags  {  display: flex;  flex-wrap: wrap;  gap: 0.5rem;  margin-bottom: 1.5rem;  }
 .blog-post-tags span  {  background: var(--bg-alt);  padding: 0.25rem 0.75rem;  border-radius: 20px;  font-size: 0.85rem;  color: var(--text-light);  }
 .related-posts  {  margin-top: 4rem;  padding-top: 3rem;  border-top: 1px solid #eee;  }
 .related-posts h3  {  margin-bottom: 1.5rem;  }
 .hero  {  padding: 5rem 0;  background: linear-gradient(135deg, #fdf8f3 0%, #f7e8d8 100%);  position: relative;  }
 .hero::before  {  content: '';  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-image: radial-gradient(circle at 20% 80%, rgba(212, 163, 115, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(212, 163, 115, 0.1) 0%, transparent 50%);  pointer-events: none;  }
 .hero .container  {  position: relative;  z-index: 1;  }
 .hero-grid  {  min-height: 400px;  }
 .service-card  {  display: flex;  flex-direction: column;  }
 .service-card ul  {  flex-grow: 1;  margin-bottom: 1.5rem;  }
 .service-card .btn  {  width: 100%;  margin-top: auto;  }
 .contact-grid  {  display: grid;  grid-template-columns: 1fr;  gap: 3rem;  }
 @media (min-width: 768px)  {  .contact-grid  {    grid-template-columns: 1fr 1fr;    }
  }
 .contact-form .form-group  {  margin-bottom: 1.5rem;  }
 .contact-form label  {  display: block;  margin-bottom: 0.5rem;  font-weight: 500;  color: var(--text);  }
 .contact-form input, .contact-form textarea, .contact-form select  {  width: 100%;  padding: 0.75rem;  border: 1px solid #ddd;  border-radius: var(--radius);  font-size: 1rem;  font-family: inherit;  background: var(--bg);  transition: border-color 0.2s ease;  }
 .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus  {  outline: none;  border-color: var(--primary);  box-shadow: 0 0 0 3px rgba(201, 166, 107, 0.2);  }
 .contact-form textarea  {  min-height: 150px;  resize: vertical;  }
 .contact-form .btn  {  width: 100%;  }
 .contact-info  {  padding: 2rem;  background: var(--bg-alt);  border-radius: var(--radius);  }
 .contact-info h3  {  margin-bottom: 1.5rem;  }
 .contact-info p  {  margin-bottom: 1rem;  display: flex;  align-items: center;  gap: 0.75rem;  }
 .contact-info a  {  color: var(--primary);  }
 .contact-info a:hover  {  color: var(--primary-dark);  }
 .contact-info svg  {  flex-shrink: 0;  color: var(--primary);  }
 img[loading="lazy"]  {  loading: lazy;  }
 img  {  decoding: async;  }
 .breadcrumb  {  padding: 1rem 0;  font-size: 0.875rem;  color: var(--text-light);  }
 .breadcrumb a  {  color: var(--primary);  }
 .breadcrumb a:hover  {  text-decoration: underline;  }
 .breadcrumb span  {  margin: 0 0.5rem;  }
 html, body  {  overflow-x: hidden;  max-width: 100vw;  }