/* === Custom Fonts === */
@font-face {
  font-family: 'Financier';
  src: url('path-to-Financier.woff2') format('woff2'),
       url('path-to-Financier.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('path-to-Inter.woff2') format('woff2'),
       url('path-to-Inter.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('path-to-Roboto.woff2') format('woff2'),
       url('path-to-Roboto.woff') format('woff');
  font-display: swap;
}

/* === Variables === */
:root {
  --primary: #215aff;
  --secondary: #434343;
  --accent: #ffb900;
  --dark: #222;
  --font-family-base: 'Inter', 'Roboto', Arial, sans-serif;
  --brand-font: 'Financier', serif;
}

/* === Typography === */
body {
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: 400;
  color: var(--secondary);
  background-color: #fff;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--brand-font);
  color: var(--primary);
}

/* === Buttons === */
.btn-getyourlawyer {
  background-color: var(--primary);
  color: #fff;
  border-radius: 3px;
  padding: 0.5rem 1.5rem;
  border: none;
  font-family: var(--brand-font);
  font-size: 1.1rem;
  transition: background .15s;
}
.btn-getyourlawyer:hover {
  background-color: var(--accent);
  color: var(--dark);
}

/* === Navigation === */
#mainMenu {
  background: var(--primary);
  color: #fff;
}
#mainMenu .nav-link {
  color: #fff;
  transition: color .15s;
}
#mainMenu .nav-link:hover {
  color: var(--accent);
}

/* === Footer === */
.footer {
  background: var(--secondary);
  color: #fff;
  padding: 2rem 0;
}
.footer h5, .footer h4 {
  color: var(--accent);
}
.footer a {
  color: #fff;
}
.footer a:hover {
  color: var(--primary);
}

/* === Custom Blocks === */
.teaser-box {
  background: #f8f9fc;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(33,90,255,0.07);
}
.teaser-box h3 {
  color: var(--primary);
}

/* === Utilities === */
.text-brand { color: var(--primary) !important; }
.bg-brand { background: var(--primary) !important; }
.rounded-6 { border-radius: 6px !important; }
.font-brand { font-family: var(--brand-font), serif !important; }

/* === Forms === */
.contact-form label {
  font-weight: 600;
  color: var(--primary);
}
.contact-form input,
.contact-form textarea {
  border: 2px solid var(--primary);
  border-radius: 5px;
  padding: 0.7rem 1rem;
}
.contact-form input:focus {
  border-color: var(--accent);
  outline: none;
}