/* ============================================
   VIGEO GROUP — DESIGN SYSTEM
   Client: D.G. Property Management LLC
   Archetype: C — Results & Performance
   Built: 2026-07-10
   Industry: Lawn Care, Pressure Washing & Junk Removal — Marietta, GA
   Fonts: Bebas Neue (display) + Source Sans 3 (body) — chosen via
   ui-ux-pro-max "Bold Statement" pairing, refined for a condensed,
   all-caps, high-impact headline face that reads as trade/results-driven
   rather than generic startup sans. Neither font is Inter/Roboto/Arial.
   Palette: warm terracotta + sage, cream background (updated 2026-07-11 —
   Marcus-approved "red clay" direction, replacing the earlier
   unapproved charcoal + signal-orange scheme). Terracotta reads as
   regional (Georgia red clay) across all three services; sage is the
   secondary accent for badges/trust elements.
   ============================================ */

:root {
  /* Primary palette — Terracotta & Sage (Option B) */
  --color-primary:      #2A2A22;
  --color-primary-dark: #1C1C15;
  --color-accent:       #B5642F;
  --color-accent-dark:  #954F25;
  --color-sage:         #5C7A52;
  --color-sage-dark:    #46603D;

  /* Neutrals (warm cream undertone) */
  --color-white:       #FFFFFF;
  --color-off-white:   #FBF7EF;
  --color-light-gray:  #EAE6DF;
  --color-mid-gray:    #8A8578;
  --color-dark-gray:   #3A362F;
  --color-black:       #121110;

  /* Typography */
  --font-display:  'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:     'Source Sans 3', 'Segoe UI', sans-serif;
  --font-size-base: 16px;
  --line-height-body: 1.7;

  /* Spacing (8px base grid) */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   32px;
  --space-xl:   64px;
  --space-2xl:  96px;
  --space-3xl:  128px;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1400px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   600ms ease;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:  0 16px 40px rgba(0,0,0,0.12);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-black);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0 0 var(--space-md);
  color: var(--color-primary);
}
h1 { font-size: clamp(2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
p { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }

/* Never smaller than 16px body per Phase 5 mobile standard */
body, p, li, label, input, textarea, select { font-size: max(16px, 1rem); }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

section { padding: var(--space-2xl) 0; }
@media (max-width: 640px) {
  section { padding: var(--space-xl) 0; }
  .container, .container-wide { padding: 0 var(--space-md); }
}

.bg-white   { background: var(--color-white); }
.bg-offwhite{ background: var(--color-off-white); }
.bg-dark    { background: var(--color-primary); color: var(--color-white); }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: var(--color-white); }

/* Focus visibility (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-accent);
  color: var(--color-white);
  padding: var(--space-sm) var(--space-md);
  z-index: 1000;
  font-weight: 600;
}
.skip-link:focus { left: var(--space-md); top: var(--space-md); }

/* Fade-in on load / on scroll (Phase 5 animation rules) */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-up.is-visible { opacity: 1; transform: translateY(0); }

/* Hero headline blur-in reveal. Hidden until JS wraps it into
   per-word spans, so there's no flash of plain text before the effect runs. */
.hero h1 { visibility: hidden; }