/* DTTW Electric — Figma-faithful site styling (reversible, site-level) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700;800&display=swap');

:root {
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Montserrat', 'Inter', system-ui, sans-serif;
  --color-primary-50: #f0fbfd; --color-primary-100: #e0f6fb; --color-primary-400: #45c0dd;
  --color-primary-500: #009dc4; --color-primary-600: #0088ac; --color-primary-700: #007695;
  --color-primary-800: #005f77; --color-primary-900: #023544;
  --color-neutral-50: #f5fafd; --color-neutral-100: #e2e8f0; --color-neutral-200: #cbd5e0;
  --color-neutral-300: #a0aec0; --color-neutral-500: #718096; --color-neutral-600: #718096;
  --color-neutral-700: #4a5568; --color-neutral-800: #2d3748; --color-neutral-900: #1a202c;
  --color-neutral-950: #1a202c;
  --radius-lg: 12px; --radius-md: 8px; --container-max: 1280px;
}

body { font-family: var(--font-sans); }
.heading, .card-title, .hero-title { font-family: var(--font-heading); }

/* Header — sticky white bar per Figma */
.site-header { position: sticky; top: 0; z-index: 50; background: #ffffff; border-bottom: 1px solid #e2e8f0; }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 32px; }
.site-nav ul { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }
.site-nav a { font-weight: 500; font-size: 13px; color: #1a202c; }
.site-nav a:hover, .site-nav a.active { color: #009dc4; }
.site-brand { font-family: var(--font-heading); font-weight: 800; color: transparent; background: url('/media/ea591397/l5hxro.png') left center / contain no-repeat; display: inline-block; min-width: 132px; min-height: 44px; }

/* Buttons — gold primary, 6px radius per Figma */
.btn { border-radius: 6px; font-family: var(--font-heading); font-weight: 700; font-size: 14px; padding: 14px 32px; }
.btn--primary { background: #f9c515; color: #1a202c; }
.btn--primary:hover { background: #e8b514; color: #1a202c; }
.btn--secondary { border-color: #009dc4; color: #009dc4; background: transparent; }

/* Hero — flat navy overlay per Figma */
.hero::before { background: rgba(26,32,44,0.72); }
.hero-title { font-weight: 800; }
.hero .btn--primary { background: #f9c515; color: #1a202c; }

/* Cards */
.card { border-radius: 12px; border-color: #e2e8f0; }
.card:hover { box-shadow: 0 10px 24px rgba(26,32,44,0.10); }
.card-title { font-weight: 800; font-size: 18px; }
.card-footer { color: #009dc4; font-family: var(--font-heading); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; }

/* Contact band — navy per Figma */
.section--bg-strong { background: #1a202c; color: #ffffff; }
.section--bg-strong .heading { color: #ffffff; }
.section--bg-strong .rich-text { color: #a0aec0; }
.section--bg-strong a { color: #f9c515; }
.form { background: #ffffff; border-radius: 12px; padding: 24px; color: #1a202c; }
.form-label { font-weight: 600; font-size: 12px; color: #1a202c; }
.form-input, .form-textarea { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 12px; font-size: 13px; }

/* Footer — navy per Figma */
.site-footer { background: #1a202c; border-top: 1px solid #2d3748; color: #a0aec0; }
.site-footer a { color: #a0aec0; }
.site-footer a:hover { color: #009dc4; }
.site-footer .muted { color: #a0aec0; }

/* Light bands — dark text per Figma (subtle + none backgrounds are light) */
.section--bg-subtle, .section--bg-none { color: #4a5568; background: #f5fafd; }
.section--bg-subtle .heading, .section--bg-none .heading { color: #1a202c; }
.section--bg-subtle .card-title, .section--bg-none .card-title { color: #1a202c; }
.section--bg-subtle .rich-text, .section--bg-none .rich-text { color: #718096; }
.section--bg-subtle .rich-text strong, .section--bg-none .rich-text strong { color: #1a202c; }
.section--bg-subtle .rich-text h3, .section--bg-none .rich-text h3 { color: #1a202c; font-size: 15px; margin-top: 20px; }
.section--bg-subtle { background: #f5fafd; }
.section--bg-none { background: #ffffff; }