/* Design refresh: deepened palette, warm-neutral background, Fraunces headline pairing,
   one reserved gold accent for the hero signature and section dividers. Loaded after the
   Tailwind bundle so these custom-property overrides win the cascade. */

:root {
  --font-heading: "Fraunces", "DM Sans", "Inter", sans-serif;
  --color-primary: #1F5B42;
  --color-primary-light: #4F8A6D;
  --color-accent: #163f2e;
  --color-background: #F7F6F1;
  --color-surface-alt: #EFEDE5;
  --color-border: #E4E1D8;
  --color-gold: #B8955F;
  --color-gold-soft: #EFE6D6;
}

html.dark {
  --color-primary: #58b78a;
  --color-background: #10201a;
  --color-surface-alt: #1b2f27;
  --color-border: #24392f;
  --color-gold: #c9ab7c;
  --color-gold-soft: #2a2318;
}

h1, h2, h3, .font-heading {
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Hero signature: a hand-drawn gold line traced behind the portrait */
.hero-signature {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: .8;
}
.hero-signature path {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: hero-signature-draw 2.4s .3s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
  .hero-signature path { animation: none; stroke-dashoffset: 0; }
}
@keyframes hero-signature-draw {
  to { stroke-dashoffset: 0; }
}

/* Faint gold thread used as a section divider */
.section-thread {
  display: block;
  width: 100%;
  height: 20px;
  opacity: .35;
}
.section-thread path {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 1.5;
}

/* Testimonial quotes set in the display face, larger, with a proper opening mark */
.testimonial-quote {
  font-family: 'Fraunces', var(--font-heading), serif;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.5;
}
.testimonial-quote .quote-mark {
  font-family: 'Fraunces', var(--font-heading), serif;
  color: var(--color-gold);
  font-size: 2.75rem;
  line-height: 0;
  display: block;
  margin-bottom: .25rem;
}

/* Specialty icon chips: tinted circle behind a stroke icon, replacing raw emoji */
.specialty-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
}
.specialty-chip svg {
  width: 1.375rem;
  height: 1.375rem;
}