@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Headline:wght@200..700&family=Stack+Sans+Notch:wght@200..700&family=Stack+Sans+Text:wght@200..700&display=swap');

/* Fallback font stack if Google Fonts fails to load */
@supports (font-family: "system-ui") {
  body {
    font-family: var(--font-sans);
  }
}

/* Wordmark */
.wordmark {
  font-family: "Stack Sans Notch", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
}

/* Hero Headline */
.hero-headline {
  font-family: "Stack Sans Headline", sans-serif !important;
  font-size: var(--text-hero) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -1.5px !important;
  color: var(--color-text-primary) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.hero-headline .accent {
  font-family: "Stack Sans Notch", sans-serif !important;
  color: var(--color-accent);
  font-style: italic;
}

/* Section Heading */
.section-heading {
  font-family: "Stack Sans Notch", sans-serif !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.75px !important;
  color: var(--color-text-primary) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Section Label */
.section-label {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.125em !important;
  color: var(--color-accent) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Body Text */
.body-text {
  font-size: 1.125rem !important;
  line-height: 1.7 !important;
  color: var(--color-text-secondary) !important;
  max-width: 60ch !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Button */
.button {
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  display: inline-block !important;
  padding: var(--spacing-md) var(--spacing-lg) !important;
  border-radius: 4px !important;
  background-color: var(--color-accent) !important;
  color: var(--color-bg) !important;
  border: none !important;
  transition: var(--transition-default) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.button:hover {
  background-color: #d4ff1a;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 107, 53, 0.25);
}

/* Navigation Links */
nav a {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: var(--transition-default);
  position: relative;
}

nav a:hover {
  color: var(--color-accent);
}

/* Meta Text (client names, content type) */
.meta {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  font-weight: 400;
}

.meta .accent-text {
  color: var(--color-accent);
  font-weight: 500;
}