:root {
  --background: #ffffff;
  --foreground: #0b1220;
  --font-inter: Arial, Helvetica, sans-serif;
  --font-playfair: Georgia, "Times New Roman", serif;

  --color-navy: #0b1220;
  --color-navy-light: #12233a;
  --color-navy-lighter: #1c3352;
  --color-gold: #c9a227;
  --color-gold-light: #e0c264;
  --color-offwhite: #f6f7f9;
  --color-mist: #eef1f5;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-inter);
}

.font-display {
  font-family: var(--font-playfair);
}

/* Foco visível para acessibilidade via teclado */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* Animação sutil de fade-in + leve deslocamento vertical ao entrar na tela */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}

.reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Menu mobile: grid-template-rows não é suportado pelo plugin do Tailwind CDN,
   então controlamos a abertura/fechamento diretamente aqui. */
.mobile-menu {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.3s ease;
}

.mobile-menu.is-open {
  grid-template-rows: 1fr;
}

.mobile-menu > div {
  overflow: hidden;
}

/* Inversão de ordem (imagem/texto) dos serviços com número ímpar,
   replicando a inversão feita via Tailwind no Next.js — só a partir do
   breakpoint lg, igual ao componente original. */
@media (min-width: 1024px) {
  .service-row.is-reversed > .service-media {
    order: 2;
  }
}