:root {
  --noir: #1d1d1b;
  --pine: #245e55;
  --blue: #3a66d2;
  --blue-dark: #29417c;
  --linen: #eae4da;
  --linen-light: #f3f2f1;
  --amber: #eac119;
  --amber-dark: #322905;
  --clay: #c96c5b;
  --clay-dark: #7c382b;
  --error: #dc2626;
}

* {
  scroll-behavior: smooth;
}

html,
body {
  background: var(--linen);
  color: var(--noir);
  font-family: "Wix Madefor Text", system-ui, sans-serif;
}

h1,
h2,
h3,
h4,
.font-display {
  font-family: "Wix Madefor Display", system-ui, sans-serif;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fade-up 0.5s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

[x-cloak] {
  display: none !important;
}

.focus-ring:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* GSAP scroll-reveal: JS animates from this state, noscript above forces it visible */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  will-change: transform, opacity;
}

.photo-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
}

.photo-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.photo-card:hover img {
  transform: scale(1.06);
}

.photo-card .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(29, 29, 27, 0.85) 0%, rgba(29, 29, 27, 0.15) 55%, transparent 100%);
}

.hero-photo {
  position: relative;
  overflow: hidden;
}

.hero-photo img,
.hero-photo video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 115%;
  object-fit: cover;
  object-position: center 20%;
}

.hero-photo .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(29, 29, 27, 0.55) 0%, rgba(29, 29, 27, 0.35) 45%, rgba(234, 228, 218, 1) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo img,
  .hero-photo video {
    height: 100%;
  }
}