:root {
  --color-dark: #0f4c5c;
  --color-primary: #1a6b7c;
  --color-accent: #c9a84c;
  --color-accent-hover: #b8963e;
  --color-light: #f4f9f9;
  --color-warm: #fafaf8;
  --color-body: #374151;
  --color-muted: #6b7280;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--color-body);
  background-color: var(--color-warm);
}

h1, h2, h3, h4, .font-serif {
  font-family: 'Merriweather', serif;
}

/* Horizontal scroll for the quick-access strip on small screens */
.quick-access-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.quick-access-scroll::-webkit-scrollbar {
  display: none;
}

/* Active nav link state, toggled by data-page matching in js/main.js */
.nav-link.active,
.mobile-nav-link.active {
  color: var(--color-accent);
}

/* FAQ accordion */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq-item.open .faq-answer {
  max-height: 400px;
}
.faq-item .faq-icon {
  transition: transform 0.3s ease;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

/* Testimonials show more */
.testimonial-extra {
  display: none;
}
.testimonials-expanded .testimonial-extra {
  display: flex;
}

/* Mobile menu drawer */
#mobile-menu.hidden,
#icon-close.hidden,
#icon-open.hidden {
  display: none;
}

/* Hero section */
.hero-gradient {
  background: linear-gradient(180deg, #0f4c5c 0%, #4d8b93 55%, #e8f4f6 100%);
}

@keyframes heroLineFadeIn {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

.hero-divider {
  animation: heroLineFadeIn 1.2s ease-out both;
}

.hero-wave {
  display: block;
  width: 100%;
  height: auto;
}