/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* === DESIGN TOKENS — Option B: Anthropic-Inspired Warm Clean === */
:root {
  /* Primary palette */
  --bg-primary:       #faf9f6;
  --bg-accent:        #f0ede5;
  --bg-elevated:      #ffffff;
  --text-primary:     #1a1a1a;
  --text-secondary:   #555555;
  --text-muted:       #767676;
  --accent-blue:      #006ad4;
  --accent-blue-hover:#005bb5;
  --accent-gold:      #b8860b;
  --accent-gold-hover: #9a7209;
  --accent-active:    var(--accent-blue);
  --accent-active-hover: var(--accent-blue-hover);
  --gradient-cta-gold: linear-gradient(135deg, #b8860b, #9a7209);
  --border-subtle:    rgba(0,0,0,0.06);
  --border-medium:    rgba(0,0,0,0.12);

  /* Gradients */
  --gradient-cta:     linear-gradient(135deg, #006ad4, #005bb5);
  --gradient-mesh-1:  rgba(0, 106, 212, 0.08);
  --gradient-mesh-2:  rgba(99, 102, 241, 0.06);
  --gradient-mesh-3:  rgba(168, 162, 146, 0.10);

  /* Semantic */
  --color-success: #2e7d32;
  --color-warning: #f57c00;
  --color-error:   #c62828;

  /* Footer-only dark tokens */
  --footer-bg:         #1a1a1a;
  --footer-text:       #f8fafc;
  --footer-text-muted: #94a3b8;
  --footer-accent:     #006ad4;

  /* Shared */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.10);
  --transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  --section-padding: clamp(60px, 10vw, 100px);
  --container-max: 1200px;
}

/* === BASE === */
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-family);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-primary);
  overflow-x: hidden;
}
body.modal-open { overflow: hidden; }

/* === LINKS === */
a { color: var(--accent-blue); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-blue-hover); }
a:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-nav:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
img { max-width: 100%; height: auto; display: block; }

/* === UTILITIES === */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.text-center { text-align: center; }
.skip-nav {
  position: absolute;
  top: -100%;
  left: 16px;
  padding: 8px 16px;
  background: var(--text-primary);
  color: #ffffff;
  border-radius: 8px;
  z-index: 9999;
  font-size: 14px;
}
.skip-nav:focus { top: 8px; }

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
}
.headline-hero {
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  color: var(--text-primary);
}
.headline-section {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
  color: var(--text-primary);
}
.subhead {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5;
  max-width: 600px;
  color: var(--text-secondary);
}
.accent-text { color: var(--accent-blue); }

/* === SECTION MODES === */
.cream-section {
  background: var(--bg-accent);
  color: var(--text-primary);
}
.cream-section .subhead { color: var(--text-secondary); }
.cream-section a { color: var(--accent-blue); }
.cream-section .accent-text { color: var(--accent-blue); }

.light-section {
  background: var(--bg-primary);
  color: var(--text-primary);
}
.light-section .subhead { color: var(--text-secondary); }

.alt-section {
  background: var(--bg-accent);
  color: var(--text-primary);
}

/* === FINANCIAL BUSINESS LINE ACCENT OVERRIDE === */
body[data-business-line="financial"] {
  --accent-active: var(--accent-gold);
  --accent-active-hover: var(--accent-gold-hover);
}
body[data-business-line="financial"] .btn-primary {
  background: var(--gradient-cta-gold);
  box-shadow: 0 2px 12px rgba(184, 134, 11, 0.3);
}
body[data-business-line="financial"] .btn-primary:hover {
  box-shadow: 0 6px 24px rgba(184, 134, 11, 0.4);
}
body[data-business-line="financial"] .accent-text {
  color: var(--accent-gold);
}
body[data-business-line="financial"] .stat-value {
  color: var(--accent-gold);
}
body[data-business-line="financial"] .service-hero-icon svg {
  stroke: var(--accent-gold);
}