/*
  PROJECT: Car Locksmith Landover
  DOMAIN: carlocksmithlandover.com
  NICHE: Auto Locksmith
  DESIGN SIGNATURE: Redline Mobile Key Desk
  COLOR SCHEME: #263238 + #d62828 + #f7f8fa
  FONTS: Oswald + Source Sans Pro
  LAYOUT STYLE: Custom
  HERO STYLE: split image with angled service desk treatment
  CARD STYLE: compact border cards with redline accent
  CTA STYLE: coupon-led banner and mobile call bar
  IMAGE STYLE: technician action, key programming, rekeying and service tools
*/
:root {
  --primary: #263238;
  --accent: #d62828;
  --secondary: #0f766e;
  --bg: #f7f8fa;
  --text: #1f2933;
  --muted: #5f6f7a;
  --line: #dfe5e8;
  --white: #ffffff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Source Sans Pro', Arial, sans-serif; color: var(--text); background: var(--bg); font-size: 17px; line-height: 1.65; overflow-x: hidden; }
a { color: var(--secondary); text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: 'Oswald', Arial, sans-serif; color: var(--primary); line-height: 1.1; letter-spacing: 0; }
h1 { font-size: clamp(2.55rem, 4vw, 4.8rem); margin: 0 0 1rem; }
h2 { font-size: clamp(2rem, 3vw, 3rem); margin: 0 0 1rem; }
h3 { font-size: 1.45rem; margin: 0 0 .7rem; }
p { margin: 0 0 1rem; }
.btn { min-height: 46px; border-radius: 6px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-accent { background: var(--accent); color: var(--white); border: 2px solid var(--accent); }
.btn-accent:hover { background: #b81f1f; border-color: #b81f1f; color: var(--white); }
.btn-outline-light { border: 2px solid rgba(255,255,255,.75); color: var(--white); }
.btn-outline-light:hover { background: var(--white); color: var(--primary); }
.btn-outline-dark { border: 2px solid var(--primary); color: var(--primary); }
.btn-outline-dark:hover { background: var(--primary); color: var(--white); }
.top-strip { background: var(--primary); color: var(--white); font-weight: 700; }
.top-strip-inner { min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.top-strip span { white-space: nowrap; }
.navbar { background: rgba(255,255,255,.97); box-shadow: 0 6px 24px rgba(31,41,51,.08); }
.navbar.scrolled { box-shadow: 0 10px 28px rgba(31,41,51,.16); }
.navbar-brand img { width: 210px; height: auto; }
.nav-link { color: var(--primary); font-weight: 700; white-space: nowrap; }
.dropdown-menu { border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 18px 40px rgba(31,41,51,.12); }
.dropdown-item { font-weight: 700; }
.header-phone { white-space: nowrap; }
.hero-section { background: linear-gradient(120deg, var(--primary) 0%, #31414a 55%, #f0f4f5 55%, #f0f4f5 100%); color: var(--white); padding: 5rem 0 4rem; }
.hero-section h1 { color: var(--white); }
.hero-copy { max-width: 660px; color: #eef4f6; font-size: 1.18rem; }
.eyebrow, .section-kicker, .section-heading span { display: inline-flex; align-items: center; min-height: 30px; padding: .25rem .65rem; border-left: 4px solid var(--accent); color: var(--accent); background: rgba(214,40,40,.08); font-weight: 800; text-transform: uppercase; font-size: .92rem; margin-bottom: .8rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0; }
.hero-badges span { background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.28); color: var(--white); border-radius: 6px; padding: .5rem .8rem; font-weight: 700; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.hero-photo-wrap { border: 8px solid var(--white); border-radius: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.22); transform: rotate(1deg); background: var(--white); }
.hero-photo { width: 100%; border-radius: 2px; aspect-ratio: 3 / 2; object-fit: cover; }
.section { padding: 4.5rem 0; }
.intro-section { background: var(--white); }
.section-photo { border-radius: 8px; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: 0 18px 38px rgba(31,41,51,.12); }
.content-section { background: linear-gradient(180deg, #f7f8fa 0%, #eef2f4 100%); }
.content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.content-block, .service-tile, .contact-details-panel, .form-panel, .location-grid article { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 1.4rem; box-shadow: 0 12px 26px rgba(31,41,51,.06); }
.content-block { border-top: 5px solid var(--accent); }
.content-list { padding-left: 1.2rem; margin-bottom: 1rem; }
.content-list li { margin-bottom: .35rem; }
.services-section { background: var(--white); }
.section-heading { max-width: 820px; margin-bottom: 2rem; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.service-tile { position: relative; overflow: hidden; }
.tile-mark { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; color: var(--white); background: var(--primary); font-family: 'Oswald', Arial, sans-serif; font-size: 1.3rem; margin-bottom: 1rem; }
.service-tile a { font-weight: 800; color: var(--accent); }
.before-after-section { background: #eef2f4; }
.before-after-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.before-after-grid figure { margin: 0; background: var(--white); border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.before-after-grid img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.before-after-grid figcaption { padding: .8rem 1rem; font-weight: 700; color: var(--primary); }
.gallery-section { background: var(--white); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.gallery-grid img { border-radius: 8px; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--line); }
.faq-section { background: #f9fbfb; }
.accordion-button { font-size: 1.05rem; font-weight: 800; color: var(--primary); }
.accordion-button:not(.collapsed) { color: var(--white); background: var(--primary); }
.coupon-section { background: linear-gradient(180deg, var(--white) 0%, #eef2f4 100%); }
.coupon-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .7fr); gap: 2rem; align-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 2.3rem; background: linear-gradient(135deg, var(--primary) 0%, #1b2a31 58%, var(--accent) 58%, #e12b2b 100%); box-shadow: 0 24px 60px rgba(31,41,51,.18); overflow: hidden; }
.coupon-layout::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 0 62%, rgba(255,255,255,.92) 62% 72%, transparent 72%); pointer-events: none; }
.coupon-layout > * { min-width: 0; position: relative; z-index: 1; }
.coupon-layout h2 { color: var(--white); }
.coupon-layout p { color: #edf4f6; max-width: 620px; }
.coupon-layout .section-kicker { color: var(--white); background: rgba(255,255,255,.12); border-left-color: var(--white); }
.coupon-link { display: block; }
.coupon-link img { max-width: 390px; margin-inline: auto; border-radius: 8px; border: 5px solid var(--white); background: var(--white); box-shadow: 0 22px 48px rgba(0,0,0,.24); }
.cta-band { background: var(--primary); color: var(--white); padding: 3.2rem 0; text-align: center; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: #e8f0f3; max-width: 760px; margin-inline: auto; }
.contact-band { background: linear-gradient(135deg, #eef2f4, #ffffff); }
.contact-list { padding-left: 0; list-style: none; display: grid; gap: .45rem; }
.contact-band .section-photo { margin-top: 1rem; }
.form-control { min-height: 48px; border-radius: 6px; border-color: #cbd5da; font-size: 1rem; }
.service-textarea { height: 120px; }
.btn-submit { min-width: 170px; }
.page-hero-simple { padding: 5rem 0 3.5rem; background: linear-gradient(135deg, #eef2f4, #ffffff); }
.page-hero-simple h1 { color: var(--primary); }
.location-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.sitemap-list { columns: 2; list-style: none; padding: 0; margin: 0; }
.sitemap-list li { break-inside: avoid; margin: .45rem 0; }
.site-footer { background: #1f2a30; color: #e8eef0; padding: 4rem 0 6rem; }
.site-footer h2 { color: var(--white); font-size: 1.25rem; margin-bottom: .8rem; }
.site-footer a { color: #d8f2ee; }
.site-footer ul { list-style: none; padding-left: 0; margin: 0; }
.site-footer li { margin-bottom: .35rem; }
.footer-grid { display: grid; grid-template-columns: 1.25fr repeat(5, 1fr) 1.2fr; gap: 1.4rem; align-items: start; }
.footer-logo { max-width: 210px; margin-bottom: .8rem; background: var(--white); border-radius: 8px; padding: .3rem; }
.footer-map { width: 100%; border: 0; border-radius: 8px; min-height: 180px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2rem; padding-top: 1.2rem; color: #cbd5da; }
.mobile-call-bar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--accent); z-index: 1040; display: none; }
.mobile-call-bar a { min-height: 54px; display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 800; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (max-width: 1199.98px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .hero-section { background: var(--primary); padding: 3.5rem 0; }
  .navbar-brand img { width: 180px; }
  .content-grid, .coupon-layout, .before-after-grid, .location-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header-phone { margin-top: .75rem; width: 100%; }
}
@media (max-width: 767.98px) {
  body { font-size: 16px; padding-bottom: 54px; }
  .section { padding: 3rem 0; }
  h1 { font-size: 2.55rem; }
  h2 { font-size: 2rem; }
  .top-strip-inner { justify-content: flex-start; gap: .6rem; font-size: .92rem; }
  .hero-actions .btn { width: 100%; }
  .hero-photo-wrap { transform: none; border-width: 5px; }
  .service-grid, .gallery-grid, .footer-grid { grid-template-columns: 1fr; }
  .coupon-layout { padding: 1.2rem; width: 100%; max-width: calc(100vw - 24px); margin-inline: auto; }
  .coupon-link, .coupon-link img { width: 100%; max-width: 100%; }
  .sitemap-list { columns: 1; }
  .mobile-call-bar { display: block; }
}