/* CSS Variables for Color Palette - Art Nouveau Inspired */
:root {
  --color-primary-dark: #4A6B5D; /* Muted Teal/Forest Green */
  --color-secondary-dark: #3A544A; /* Darker Muted Teal/Forest Green */
  --color-accent: #C0A062; /* Old Gold/Bronze */
  --color-accent-dark: #A08450; /* Darker Old Gold/Bronze */
  --color-text-dark: #5D4037; /* Dark Brown */
  --color-bg-light: #F5F5DC; /* Beige/Cream */
  --color-bg-white: #FFF8E1; /* Ivory */
  --color-bg-card: #E8E0D1; /* Light Beige/Parchment */
  --color-text-placeholder: #8D6E63; /* Muted Brown */
  --color-white: #FAF0E6; /* Linen / Very light off-white, for text on dark backgrounds */

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-xxl: 4rem;
  --space-xxxl: 6rem;
}

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'EB Garamond', serif;
  line-height: 1.7;
  color: var(--color-text-dark);
  background: var(--color-bg-light);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display SC', serif;
  color: var(--color-text-dark);
  line-height: 1.3; /* Slightly adjusted for Playfair */
  margin-bottom: var(--space-sm);
  font-weight: 700; /* Ensure headings are bold */
}

h1 { font-size: 2.8rem; margin-bottom: var(--space-md); } /* Slightly reduced for Playfair */
h2 { font-size: 2.3rem; margin-bottom: var(--space-lg); } /* Slightly reduced */
h3 { font-size: 1.9rem; color: var(--color-accent); margin-bottom: var(--space-xl); }
h4 { font-size: 1.3rem; margin-bottom: var(--space-sm); }


a {
  text-decoration: none;
  color: inherit;
  outline: none;
}

*:focus {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Navigation */
.nav {
  background: var(--color-secondary-dark);
  color: var(--color-white);
  padding: var(--space-sm) 0;
  /* box-shadow: 0 2px 5px rgba(58, 84, 74, 0.2); /* Optional subtle shadow */
}

.nav-inner-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo a {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 1.4rem;
  font-weight: 700; /* For 'Playfair Display SC' if Great Vibes is too much */
  color: var(--color-white);
}

.nav-logo a:hover,
.nav-logo a:focus {
  color: var(--color-accent);
  outline: none;
}

.nav-logo i {
  font-size: 1.8rem; /* Adjusted icon size */
}
.nav-logo a span {
  font-family: 'Great Vibes', cursive;
  font-size: 2rem; /* Larger for script font */
  line-height: 1;
  position: relative;
  top: -2px; /* Fine-tune vertical alignment */
}


.nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--space-lg);
}

.nav a {
  color: var(--color-white);
  font-weight: 600; /* EB Garamond can be 600 for boldish */
  transition: color 0.3s ease;
  padding: var(--space-xs) 0;
  font-family: 'EB Garamond', serif; /* Ensure nav links use body font or a slightly bolder version */
}

.nav ul a:hover,
.nav ul a:focus {
  color: var(--color-accent);
  outline: 0px ;
}

/* --- Pipe Separator for Language Link ONLY --- */
.nav ul .lang-switcher-item::before {
  content: '|';
  margin-right: var(--space-lg); /* Use the same value as your nav gap for consistency */
  color: var(--color-accent);
  opacity: 0.6;
}


/* Header */
header {
  background: var(--color-primary-dark);
  color: var(--color-white);
  padding: var(--space-xxxl) var(--space-sm);
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid var(--color-accent-dark); /* Decorative border */
}

header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Art Nouveau inspired subtle pattern */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E");
  opacity: 0.08; /* Subtle */
  z-index: 0;
}

header > * {
  position: relative;
  z-index: 1;
}

header h1 {
  color: var(--color-white);
  text-shadow: 1px 1px 2px rgba(93, 64, 55, 0.3); /* Dark brown shadow */
  margin-bottom: var(--space-sm);
}

header p {
  font-size: 1.2rem;
  opacity: 0.9;
  text-shadow: 1px 1px 2px rgba(93, 64, 55, 0.2); /* Dark brown shadow */
  font-family: 'EB Garamond', serif; /* Ensure consistent body font */
}

/* Hero Section */
.hero {
  background: linear-gradient(135deg, var(--color-secondary-dark) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  padding: var(--space-xxxl) var(--space-sm);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Art Nouveau inspired subtle pattern */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E");
  opacity: 0.12; /* Slightly more visible on gradient */
  z-index: 0;
}

.hero > * {
  position: relative;
  z-index: 1;
}


.hero h2 {
  color: var(--color-white);
  text-shadow: 1px 1px 3px rgba(93, 64, 55, 0.3); /* Dark brown shadow */
  margin-bottom: var(--space-md);
}

.hero p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto var(--space-xl);
  text-shadow: 1px 1px 2px rgba(93, 64, 55, 0.2); /* Dark brown shadow */
  font-family: 'EB Garamond', serif;
}

.btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-accent);
  color: var(--color-primary-dark); /* Text color on button */
  border: none;
  border-radius: 30px; /* Pill shape */
  font-weight: 600; /* EB Garamond boldish */
  font-size: 1.1rem;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease, color 0.3s ease;
  box-shadow: 0 4px 8px rgba(93, 64, 55, 0.15);
  outline: none;
  text-transform: none; /* More classic feel */
  letter-spacing: 0.5px;
  font-family: 'EB Garamond', serif;
}

.btn:hover,
.btn:focus {
  background: var(--color-accent-dark);
  color: var(--color-white); /* Text color on hover */
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(93, 64, 55, 0.25);
}

/* Sections */
.services, .about, .contact {
  padding: var(--space-xxl) 0;
}

/* Services Section */
.services {
  background: var(--color-bg-white); /* Ivory */
  box-shadow: 0 0px 10px rgba(93, 64, 55, 0.05);
}

.services h3 {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.service-list {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap to the next line */
  justify-content: center; /* This is the magic! It centers items on each line */
  gap: var(--space-lg);
}

.service {
  background: var(--color-bg-card); /* Parchment */
  padding: var(--space-lg);
  border-radius: 12px; /* Softer curves */
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 2px 5px rgba(93, 64, 55, 0.08);
  overflow: hidden;
  position: relative;
  border: 1px solid transparent;

  flex: 0 1 350px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 280px */
}

.service i {
  font-size: 3rem; /* Slightly reduced */
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
  transition: transform 0.3s ease, color 0.3s ease;
}

.service:hover i {
  transform: scale(1.1);
  color: var(--color-accent-dark);
}


.service h4 {
  margin-bottom: var(--space-xs);
}

.service p {
  font-size: 0.95rem;
  line-height: 1.6; /* Garamond might need slightly more line height */
}

.service:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 20px rgba(93, 64, 55, 0.15);
  border-color: var(--color-accent-dark);
}

/* About Section */
.about {
  background: var(--color-bg-light); /* Beige/Cream */
}

.about h3 {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.about-content {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.about-text {
  flex: 1;
  min-width: 0;
}

.about-text p {
  margin-bottom: var(--space-md);
}

.about-text p:last-child {
  margin-bottom: 0;
}


.about-image-placeholder {
  flex: 1;
  min-width: 250px;
  background: var(--color-bg-card); /* Parchment */
  height: 350px;
  border-radius: 12px; /* Softer */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-text-placeholder);
  font-size: 1.1rem;
  text-align: center;
  border: 2px solid var(--color-accent-dark); /* Changed from dashed */
  padding: var(--space-md);
  /* animation: pulseBorder 3s ease-in-out infinite; Removed pulsing */
}
.about-image-placeholder i { /* Style the icon within */
  font-size: 4rem;
  color: var(--color-accent); /* Use accent color */
  margin-bottom: var(--space-sm);
}


/* Contact Section */
.contact {
  background: var(--color-primary-dark);
  color: var(--color-white);
  text-align: center;
}

.contact h3 {
  margin-bottom: var(--space-lg);
  color: var(--color-white); /* Keep white on dark background */
  text-shadow: 1px 1px 3px rgba(93, 64, 55, 0.3);
}

.contact form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  background: var(--color-secondary-dark);
  border-radius: 12px; /* Softer */
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.contact input, .contact textarea {
  padding: var(--space-sm);
  border: 1px solid var(--color-accent-dark); /* Consistent border */
  border-radius: 8px; /* Softer */
  font-size: 1rem;
  background: var(--color-bg-white); /* Ivory */
  color: var(--color-text-dark);
  width: 100%;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  font-family: 'EB Garamond', serif;
}

.contact input::placeholder,
.contact textarea::placeholder {
  color: var(--color-text-placeholder);
  opacity: 1;
  font-family: 'EB Garamond', serif;
}

.contact input:focus,
.contact textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 8px rgba(192, 160, 98, 0.5); /* Accent color glow */
}


.contact button { /* Inherits .btn styles mostly, specific overrides here */
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-accent);
  color: var(--color-primary-dark);
  border: none;
  border-radius: 30px;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease, color 0.3s ease;
  box-shadow: 0 4px 8px rgba(93, 64, 55, 0.15);
  width: auto;
  align-self: center;
  outline: none;
  text-transform: none; /* More classic */
  letter-spacing: 0.5px;
  font-family: 'EB Garamond', serif;
}

.contact button:hover,
.contact button:focus {
  background: var(--color-accent-dark);
  color: var(--color-white);
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(93, 64, 55, 0.25);
}

/* --- FIX for Consent Checkbox Alignment --- */
.form-consent-container {
  display: flex;          /* Use Flexbox for alignment */
  align-items: center;    /* Vertically center the checkbox with the text */
  justify-content: flex-start; /* Align to the left, matching other inputs */
  gap: 12px;              /* Space between checkbox and label */
  text-align: left;       /* Override the form's text-align: center */
  margin-left: 5px;       /* Small indent to align with text in inputs above */
}

/* Style the checkbox itself slightly */
.form-consent-container input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0; /* Prevents the checkbox from shrinking */
}

/* Style the label text using your color variables */
.form-consent-container label {
  font-size: 0.95rem;
  color: var(--color-white); /* Use your existing color for text on dark bg */
}

/* Style the link within the label */
.form-consent-container label a {
  color: var(--color-accent); /* Use your gold accent color for the link */
  text-decoration: underline;
  transition: color 0.3s ease;
}

.form-consent-container label a:hover {
  color: var(--color-accent-dark);
}

/* Style for the status message */
#form-status-message {
  margin-top: var(--space-sm);
  text-align: center;
  font-weight: 600; /* EB Garamond boldish */
  min-height: 1.2em; /* Reserve space to prevent layout shifts */
  font-size: 0.95rem; /* Slightly smaller than main text */
  color: var(--color-white); /* Default color on dark background */
}

#form-status-message.success {
  color: var(--color-accent); /* Use accent for success */
}

#form-status-message.error {
  color: var(--color-error); /* Use defined error color */
}


/* Footer */
footer {
  background: var(--color-secondary-dark);
  color: var(--color-white);
  text-align: center;
  padding: var(--space-lg) 0;
  font-size: 0.95rem;
  border-top: 2px solid var(--color-primary-dark); /* Subtle separation */
}

footer .container {
  display: flex;
  flex-direction: column; /* This is the key: stacks items vertically */
  align-items: center;    /* This centers the stacked items */
  gap: 0.5rem;            /* Adds a small space between the copyright and the links */
}

.footer-links a {
  color: var(--color-white);
  text-decoration: underline;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.footer-links a:hover {
  opacity: 1;
}

/* --- POPUP STYLES START --- */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(58, 84, 74, 0.7); /* --color-secondary-dark with alpha */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup-overlay.show {
  opacity: 1;
  visibility: visible;
}

.popup-content {
  background: var(--color-bg-white); /* Ivory */
  padding: var(--space-xl);
  border-radius: 12px; /* Softer */
  box-shadow: 0 5px 20px rgba(93, 64, 55, 0.3); /* Dark brown shadow */
  text-align: center;
  position: relative;
  max-width: 450px;
  width: 90%;
  color: var(--color-text-dark);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.popup-overlay.show .popup-content {
  transform: scale(1);
}

.popup-content h4 {
  color: var(--color-accent);
  margin-top: 0;
  margin-bottom: var(--space-sm);
  font-size: 1.8rem;
}

.popup-content p {
  margin-bottom: var(--space-lg);
  font-size: 1rem;
  line-height: 1.6;
}

.close-popup-btn {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  font-size: 2rem;
  color: var(--color-text-placeholder);
  cursor: pointer;
  line-height: 1;
  transition: color 0.3s ease;
  border: none;
  background: transparent;
}

.close-popup-btn:hover,
.close-popup-btn:focus {
  color: var(--color-text-dark);
  outline: none;
}

.popup-ok-btn { /* Inherits from .btn, ensure consistency or override */
  background: var(--color-accent);
  color: var(--color-primary-dark);
  /* Other .btn styles are inherited */
}
.popup-ok-btn:hover,
.popup-ok-btn:focus {
  background: var(--color-accent-dark);
  color: var(--color-white);
}
/* --- POPUP STYLES END --- */


/* Responsive Design */
@media (max-width: 900px) {
  .about-content {
    flex-direction: column;
    gap: var(--space-lg);
  }
  .about-image-placeholder {
    width: 100%;
    max-width: 400px; /* Limit width on tablet */
    height: 280px;
  }
  .about-text p {
    text-align: center;
  }
  .services, .about, .contact {
    padding: var(--space-xxl) var(--space-sm);
  }
  .container {
    padding: 0 var(--space-sm);
  }
}

@media (max-width: 768px) {
  h1 { font-size: 2.3rem; }
  h2 { font-size: 1.9rem; margin-bottom: var(--space-md); }
  h3 { font-size: 1.7rem; margin-bottom: var(--space-lg); }
  h4 { font-size: 1.2rem; }

  .hero p {
    font-size: 1.1rem;
    margin-bottom: var(--space-lg);
  }
  .btn, .contact button { /* Ensure responsive button also targets contact button */
    padding: var(--space-sm) var(--space-md);
    font-size: 1rem;
  }
  .service i {
    font-size: 2.8rem;
  }
  .service p {
    font-size: 0.9rem;
  }
  .contact form {
    padding: var(--space-lg);
    gap: var(--space-sm);
  }
  .nav ul {
    gap: var(--space-md);
  }
}

@media (max-width: 480px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.7rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.1rem; }

  header p { font-size: 1rem; }
  .hero p { font-size: 1rem; }

  .btn, .contact button {
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.9rem;
  }
  .service i {
    font-size: 2.5rem;
  }
  .service p {
    font-size: 0.85rem;
  }

  .nav-inner-container {
    flex-direction: column;
    align-items: center; /* Center logo and nav links */
    gap: var(--space-md); /* Increased gap for better separation */
  }
  .nav-logo a {
    font-size: 1.2rem; /* Adjust logo size if needed */
  }
  .nav-logo a span {
    font-size: 1.8rem; /* Adjust script font size */
  }
  .nav ul {
    flex-direction: row; /* Keep horizontal on small screens if space permits */
    gap: var(--space-sm); /* Reduced gap between items */
    width: auto; /* Don't take full width */
    align-items: center; /* Align nav items to center */
    flex-wrap: wrap; /* Allow wrapping if items are too many */
    justify-content: center;
  }
  .services, .about, .contact {
    padding: var(--space-xl) var(--space-sm);
  }
  .contact form {
    padding: var(--space-md);
  }
  .about-image-placeholder {
    height: 200px;
    font-size: 1rem;
  }
  .about-image-placeholder i {
    font-size: 3rem;
  }
  .popup-content h4 {
    font-size: 1.5rem;
  }
  .popup-content p {
    font-size: 0.9rem;
  }
  #form-status-message {
    font-size: 0.85rem;
  }
}


/* --- LEGAL PAGE STYLES --- */
.legal-page-section {
  padding: var(--space-xxl) var(--space-md);
  background-color: var(--color-bg-white); /* Use the ivory background */
}

.legal-text-container {
  max-width: 800px; /* Constrain width for better readability */
  margin: 0 auto;   /* Center the container */
}

.legal-text-container h2 {
  font-size: 1.8rem;
  color: var(--color-primary-dark);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #ddd;
}

.legal-text-container p,
.legal-text-container li {
  line-height: 1.8;
  margin-bottom: 1rem;
}

.legal-text-container ul {
  list-style-position: inside;
  padding-left: 1rem;
}

.legal-text-container a {
  color: var(--color-accent);
  text-decoration: underline;
  font-weight: 600;
}

.legal-text-container a:hover {
  color: var(--color-accent-dark);
}

/* --- TABLE STYLES --- */
/* Apply this to a container div around your table for better responsive handling */
.table-container {
  overflow-x: auto; /* Allows horizontal scrolling on small screens */
  margin: var(--space-lg) 0;
  border: 1px solid var(--color-bg-card);
  border-radius: 8px; /* Softer curves consistent with the design */
  box-shadow: 0 2px 5px rgba(93, 64, 55, 0.08); /* Subtle shadow from .service card */
}

table {
  width: 100%;
  border-collapse: collapse; /* Cleaner borders */
  background-color: var(--color-bg-white); /* Ivory background */
  font-size: 0.95rem; /* Slightly smaller text for data density */
  line-height: 1.6;
}

table th,
table td {
  padding: var(--space-sm); /* Consistent spacing */
  text-align: left;
  border-bottom: 1px solid var(--color-bg-card); /* Parchment colored lines */
  vertical-align: top; /* Aligns content to the top of the cell */
}

/* Table Header */
table thead {
  background-color: var(--color-secondary-dark); /* Dark Teal/Green */
  color: var(--color-white);
}

table th {
  font-family: 'Playfair Display SC', serif; /* Use the heading font */
  font-weight: 700;
  font-size: 0.8rem;
  border-bottom: 2px solid var(--color-accent); /* Gold accent border */
  text-transform: none; /* Keep it classic, no uppercase */
  letter-spacing: 0.5px;
}

/* Table Body */
table tbody tr:nth-child(even) {
  background-color: var(--color-bg-light); /* Subtle beige striping for readability */
}

table tbody tr:hover {
  background-color: var(--color-bg-card); /* Parchment color on hover */
  transition: background-color 0.2s ease-in-out;
}

table strong {
  color: var(--color-primary-dark); /* Makes strong text stand out more */
  font-weight: 600; /* Garamond bold */
}