/* AutoBolt Services — public site
   Palette from the shield logo: copper, chrome, ink, cream.
   Light workshop feel — not a dark theme, not a SaaS kit. */

:root {
    --copper: #E85A1A;
    --copper-dark: #C44712;
    --copper-deep: #9A360E;
    --copper-soft: #F8E4D6;
    --ink: #1C1916;
    --ink-soft: #3A342E;
    --muted: #6F6860;
    --cream: #F4EFE7;
    --paper: #FFFCF7;
    --white: #ffffff;
    --line: #E3DBD1;
    --chrome: #9AA3AB;
    --charcoal: #241F1B;
    --primary: #E85A1A;
    --primary-dark: #C44712;
    --primary-light: #F8E4D6;
    --primary-color: #E85A1A;
    --accent-color: #E85A1A;
    --secondary: #1C1916;
    --text-primary: #1C1916;
    --text-secondary: #6F6860;
    --text-muted: #8A837A;
    --border-color: #E3DBD1;
    --bg-light: #F4EFE7;
    --bg-white: #FFFCF7;
    --danger: #c2410c;
    --warning: #d97706;
    --success: #3f7d4e;
    --transition: all 0.25s ease;
    --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-body: 'Source Sans 3', 'Segoe UI', sans-serif;
    --radius: 6px;
    --shadow: 0 10px 30px rgba(28, 25, 22, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--ink); line-height: 1.7; background: var(--paper); }
a { text-decoration: none; color: inherit; transition: var(--transition); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3, h4, .hero-title, .section-title, .page-hero h1, .logo-text { font-family: var(--font-display); letter-spacing: 0.02em; font-weight: 700; line-height: 1.1; color: var(--ink); }
.header { position: fixed; top: 0; left: 0; right: 0; background: rgba(255, 252, 247, 0.96); border-bottom: 1px solid var(--line); z-index: 1000; backdrop-filter: blur(10px); }
.header.scrolled { box-shadow: 0 8px 24px rgba(28, 25, 22, 0.08); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; gap: 20px; }
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo img { height: 54px; width: auto; }
.logo-icon { width: 40px; height: 40px; background: var(--copper); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; }
.logo-text { font-size: 22px; color: var(--ink); }
.nav { flex: 1; display: flex; justify-content: center; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-link { display: flex; align-items: center; gap: 5px; padding: 8px 13px; font-size: 14px; font-weight: 600; color: var(--ink-soft); border-radius: var(--radius); }
.nav-link:hover, .nav-link.active { color: var(--copper); background: transparent; }
.nav-link i { font-size: 10px; }
.has-dropdown { position: relative; }
.dropdown { position: absolute; top: 100%; left: 0; min-width: 230px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: var(--transition); }
.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown li a { display: block; padding: 10px 12px; font-size: 14px; color: var(--ink-soft); border-radius: 4px; }
.dropdown li a:hover { background: var(--cream); color: var(--copper); }
.header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.header-phone { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.header-phone i { color: var(--copper); }
.header-phone:hover { color: var(--copper); }
.header-actions .btn { padding: 10px 18px; font-size: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; font-size: 15px; font-weight: 700; font-family: var(--font-body); border: none; border-radius: 4px; cursor: pointer; transition: var(--transition); }
.btn-primary { background: var(--copper); color: #fff; }
.btn-primary:hover { background: var(--copper-dark); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(232, 90, 26, 0.28); }
.btn-secondary { background: var(--cream); color: var(--ink); border: 1px solid var(--line); }
.btn-secondary:hover { border-color: var(--copper); color: var(--copper); }
.btn-outline { background: transparent; color: var(--copper); border: 1.5px solid var(--copper); }
.btn-outline:hover { background: var(--copper); color: white; }
.btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.7); }
.btn-ghost:hover { background: #fff; color: var(--ink); }
.btn-white { background: white; color: var(--copper-dark); }
.btn-white:hover { background: var(--cream); }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-block { display: flex; width: 100%; }
.mobile-menu-btn { display: none; flex-direction: column; gap: 5px; padding: 8px; background: none; border: none; cursor: pointer; }
.mobile-menu-btn span { display: block; width: 22px; height: 2px; background: var(--ink); }
main { padding-top: 76px; }