* { box-sizing: border-box; }
:root {
  --red: #c71924;
  --red-dark: #920f18;
  --black: #090a0c;
  --dark: #121416;
  --gray: #70757b;
  --light: #f2f3f4;
  --white: #fff;
  --border: #dedfe1;
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Montserrat", Arial, sans-serif;
  color: var(--black);
  background: #fff;
  line-height: 1.65;
}
img { max-width: 100%; display: block; }
.container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(9,10,12,.96);
  border-bottom: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
}
.nav { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-weight: 800; letter-spacing: .04em; }
.brand img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; }
.brand small { display: block; font-size: 9px; letter-spacing: .12em; color: #c9c9c9; }
nav { display: flex; align-items: center; gap: 22px; }
nav a { color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; }
nav a:hover { color: #ff515b; }
.nav-cta { background: var(--red); padding: 11px 16px; border-radius: 6px; }
.nav-cta:hover { color: #fff; background: var(--red-dark); }
.menu-toggle { display:none; background:none; border:0; color:#fff; font-size:28px; }

.hero {
  position: relative; min-height: 690px; display: flex; align-items: center;
  background: url("mechanic.jpg") center 32%/cover no-repeat;
}
.hero-overlay { position:absolute; inset:0; background: linear-gradient(90deg, rgba(5,6,8,.92) 0%, rgba(5,6,8,.72) 48%, rgba(5,6,8,.2) 100%); }
.hero-content { position:relative; z-index:1; color:#fff; padding: 100px 0; }
.eyebrow { margin:0 0 12px; color: var(--red); font-size: 12px; font-weight: 800; letter-spacing: .17em; }
.hero h1 { margin:0; font-size: clamp(45px, 7vw, 78px); line-height: .98; letter-spacing: -.045em; max-width: 760px; }
.hero h1 span { color: #ef2a35; }
.hero-text { max-width: 610px; margin: 26px 0; font-size: 18px; color: #e6e6e6; }
.hero-buttons, .contact-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { display:inline-block; text-decoration:none; padding:14px 20px; border-radius:6px; font-weight:800; font-size:13px; border:2px solid transparent; transition:.2s; }
.primary { background:var(--red); color:#fff; }
.primary:hover { background:var(--red-dark); transform:translateY(-1px); }
.secondary { background:#fff; color:var(--black); }
.secondary:hover { background:#e7e7e7; }
.outline { border-color:#fff; color:#fff; }
.hours { margin-top: 25px; font-size: 13px; color:#d9d9d9; }

.trust-bar { background: var(--red); color:#fff; }
.trust-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.trust-grid div { padding:22px 25px; border-right:1px solid rgba(255,255,255,.22); }
.trust-grid div:last-child { border-right:0; }
.trust-grid strong, .trust-grid span { display:block; }
.trust-grid strong { font-size:14px; }
.trust-grid span { font-size:12px; opacity:.85; }

.section { padding: 90px 0; }
.section-heading { max-width: 720px; margin-bottom: 42px; }
.section-heading h2, .split-content h2, .contact-section h2 { margin:0 0 14px; font-size: clamp(32px, 4vw, 48px); line-height:1.08; letter-spacing:-.035em; }
.section-heading > p:last-child { color:var(--gray); margin:0; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { border:1px solid var(--border); padding:32px; border-radius:10px; background:#fff; box-shadow:0 8px 30px rgba(0,0,0,.05); }
.icon { color:var(--red); font-weight:800; font-size:13px; border-bottom:2px solid var(--red); padding-bottom:10px; width:max-content; }
.card h3 { font-size:21px; margin:22px 0 8px; }
.card p { color:var(--gray); font-size:14px; margin:0; }

.split-section { display:grid; grid-template-columns:1fr 1fr; background:var(--light); }
.split-image { min-height:560px; }
.split-image img { width:100%; height:100%; object-fit:cover; }
.split-content { padding:80px clamp(35px, 7vw, 100px); align-self:center; }
.split-content p { color:var(--gray); font-size:15px; }
.text-link { color:var(--red); font-weight:800; text-decoration:none; }
.text-link:hover { text-decoration:underline; }

.dark-section { background:var(--dark); color:#fff; }
.light .eyebrow { color:#ff4b55; }
.light > p:last-child { color:#b9bdc1; }
.area-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.area-grid div { border:1px solid #303338; border-radius:8px; padding:25px 12px; text-align:center; font-weight:800; font-size:13px; background:#181a1d; }

.gallery-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:14px; }
.gallery-grid img { width:100%; height:330px; object-fit:cover; border-radius:9px; }

.contact-section { background:var(--red); color:#fff; padding:70px 0; }
.contact-section .eyebrow { color:#ffd1d4; }
.contact-section h2 { margin-bottom:8px; }
.contact-section p { margin:0; opacity:.9; }
.contact-inner { display:flex; align-items:center; justify-content:space-between; gap:35px; }
.contact-actions { justify-content:flex-end; }

footer { background:#070809; color:#fff; padding:42px 0 18px; }
.footer-inner { display:flex; justify-content:space-between; align-items:flex-start; gap:30px; }
.footer-inner strong { font-size:16px; }
.footer-inner p { margin:4px 0; color:#aeb1b4; font-size:12px; }
.footer-inner > a { color:#fff; font-weight:800; text-decoration:none; }
.footer-inner > a:hover { color:#ff4b55; }
.copyright { border-top:1px solid #222; margin-top:30px; padding-top:18px; text-align:center; color:#70757b; font-size:11px; }

@media (max-width: 800px) {
  .menu-toggle { display:block; }
  nav { display:none; position:absolute; left:0; right:0; top:78px; background:#090a0c; padding:18px 20px 25px; flex-direction:column; align-items:stretch; }
  nav.open { display:flex; }
  nav a { padding:8px 0; }
  .nav-cta { text-align:center; }
  .hero { min-height:620px; background-position: 60% center; }
  .hero-overlay { background:rgba(5,6,8,.72); }
  .trust-grid, .cards, .area-grid, .gallery-grid { grid-template-columns:1fr; }
  .trust-grid div { border-right:0; border-bottom:1px solid rgba(255,255,255,.22); }
  .trust-grid div:last-child { border-bottom:0; }
  .split-section { grid-template-columns:1fr; }
  .split-image { min-height:420px; }
  .gallery-grid img { height:300px; }
  .contact-inner, .footer-inner { flex-direction:column; align-items:flex-start; }
  .contact-actions { justify-content:flex-start; }
}