body {
  font-family: var(--font-body);
  background: var(--color-background);
  color: var(--color-text-primary);
}

html {
  scroll-behavior: smooth;
}

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

.utility-bar {
  background: var(--color-primary-dark);
  color: #fff;
}

.site-nav {
  background: rgba(248, 246, 246, 0.94);
  backdrop-filter: blur(8px);
}

.section-rule {
  width: 60%;
  margin: 0 auto;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--color-secondary) 70%, transparent);
}

.soft-card {
  border-radius: 10px;
  background: var(--color-surface);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--color-primary-light) 65%, white 35%);
}

.tile-card {
  border-radius: 10px;
  background: var(--color-surface);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--color-secondary) 70%, white 30%);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tile-card:hover {
  transform: translate(-2px, -2px);
}

.cta-button,
button,
input,
select,
textarea {
  border-radius: 12px;
}

.cta-button,
button[type="submit"] {
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08), 2px 2px 0 currentColor;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.cta-button:hover,
button[type="submit"]:hover {
  background: color-mix(in srgb, var(--color-surface) 82%, white 18%);
  transform: translate(-1px, -1px);
}

input,
select,
textarea {
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08);
  border: none;
  padding: 0.9rem 1rem;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-secondary);
}

img.rounded-media,
.map-frame {
  border-radius: 8px;
}

.map-frame {
  width: 100%;
  min-height: 320px;
  border: 0;
}

.hero-overlay {
  background: rgba(25, 22, 22, 0.26);
}

.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-radius: 12px;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--color-primary) 60%, white 40%);
  padding: 1rem;
}

.cookie-banner.hidden {
  display: none;
}

.footer-link:hover,
.nav-link:hover {
  color: var(--color-primary);
}

.hero-title,
.hero-sub {
  opacity: 0;
}

.reveal {
  opacity: 0.15;
}