/*
Theme Name: Bennys Locksmiths
Theme URI: https://bennyslocksmiths.com/
Author: Codex
Description: Custom SEO-focused one-page WordPress theme converted from the Bennys Locksmiths homepage.
Version: 1.4.6
License: GPL-2.0-or-later
Text Domain: bennys-locksmiths
*/

:root {
  --blue: #FDDB00;
  --blue-dark: #000000;
  --red: #ff2350;
  --ink: #000000;
  --muted: #4c4c4c;
  --soft: #f8f8f8;
  --line: #EAEAEA;
  --yellow: #FFEE02;
  --white: #ffffff;
  --max: 1180px;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
  --icon-unlock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='10' width='12' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 7.5-2'/%3E%3Cpath d='M12 14v2'/%3E%3C/svg%3E");
  --icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3Cpath d='M4 4l3 3'/%3E%3Cpath d='M20 4l-3 3'/%3E%3C/svg%3E");
  --icon-location: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-4.4 7-11a7 7 0 0 0-14 0c0 6.6 7 11 7 11z'/%3E%3Cpath d='m9.5 10.5 1.7 1.7 3.6-3.8'/%3E%3C/svg%3E");
  --icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 4l9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Crect x='9' y='13' width='6' height='5' rx='1'/%3E%3C/svg%3E");
  --icon-car: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 17h12l1-5-3-4H8l-3 4 1 5z'/%3E%3Ccircle cx='8' cy='17' r='2'/%3E%3Ccircle cx='16' cy='17' r='2'/%3E%3Cpath d='M9 8h6'/%3E%3C/svg%3E");
  --icon-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M6 20V7h12v13'/%3E%3Cpath d='M9 10h1'/%3E%3Cpath d='M14 10h1'/%3E%3Cpath d='M9 14h1'/%3E%3Cpath d='M14 14h1'/%3E%3C/svg%3E");
  --icon-siren: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v3'/%3E%3Cpath d='M5 6l2 2'/%3E%3Cpath d='M19 6l-2 2'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M8 18h8l1-7a5 5 0 0 0-10 0z'/%3E%3C/svg%3E");
  --icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 5 3.5 8.5 7 10 3.5-1.5 7-5 7-10V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.3 1.3.4 2.6.6 4 .6.7 0 1.2.5 1.2 1.2v3.5c0 .7-.5 1.2-1.2 1.2C10.5 22 2 13.5 2 3.4 2 2.7 2.5 2.2 3.2 2.2h3.6c.7 0 1.2.5 1.2 1.2 0 1.4.2 2.7.6 4 .1.4 0 .8-.3 1.2z'/%3E%3C/svg%3E");
  --icon-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='12' r='3.5'/%3E%3Cpath d='M11 12h10'/%3E%3Cpath d='M17 12v3'/%3E%3Cpath d='M20 12v2'/%3E%3Ccircle cx='7.5' cy='12' r='.7'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: Oxygen, Arial, sans-serif; line-height: 1.6; background: #fff; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }
img { max-width: 100%; height: auto; display: block; }
.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.section { padding: 82px 0; }
.section.soft { background: var(--soft); }
.eyebrow { color: var(--red); font-weight: 700; text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0; margin: 0 0 8px; }
h1, h2 { font-family: 'Passion One', 'Roboto Condensed', Arial, sans-serif; font-weight: 700; line-height: 1.08; margin: 0 0 16px; color: var(--ink); }
h3, h4 { font-family: 'Roboto Condensed', Arial, sans-serif; line-height: 1.08; margin: 0 0 16px; color: var(--ink); }
h1 { font-size: clamp(2.6rem, 6vw, 5.8rem); text-transform: uppercase; max-width: 760px; }
h2 { font-size: clamp(2rem, 4vw, 3.55rem); text-transform: uppercase; }
h3 { font-size: 1.45rem; }
p { margin: 0 0 18px; color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 24px; border-radius: 999px; font-weight: 700; background: var(--red); color: #fff; border: 2px solid var(--red); box-shadow: 0 10px 24px rgba(255, 35, 80, .22); }
.btn:hover { background: #000000; border-color: #000000; color: #fff; }
.btn.secondary { background: var(--blue); color: #000; border-color: var(--blue); box-shadow: 0 10px 24px rgba(253, 219, 0, .24); }

.site-header { position: sticky; top: 0; z-index: 20; background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .08); }
.header-inner { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo img { width: 178px; }
.nav { display: flex; align-items: center; gap: 26px; font-weight: 700; color: var(--blue-dark); }
.nav .menu { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.header-call { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 18px; border-radius: 999px; background: var(--red); color: #fff; font-weight: 800; white-space: nowrap; box-shadow: 0 10px 22px rgba(255,35,80,.24); }
.header-call:hover { background: #000; color: #fff; }
.header-call svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 18px; }
.menu-toggle { display: none; border: 0; background: var(--red); color: #fff; width: 48px; height: 48px; border-radius: 999px; position: relative; box-shadow: 0 10px 22px rgba(255,35,80,.22); }
.menu-toggle span, .menu-toggle::before, .menu-toggle::after { content: ""; width: 20px; height: 2px; border-radius: 999px; background: currentColor; position: absolute; left: 14px; }
.menu-toggle span { top: 23px; }
.menu-toggle::before { top: 16px; }
.menu-toggle::after { top: 30px; }

.hero { min-height: 720px; display: flex; align-items: center; color: #000; background: url('assets/images/van-hero.png') right top/contain no-repeat, var(--blue); }
.hero h1 { color: #000; }
.hero p { color: #171717; }
.hero .lead { color: #000; font-size: clamp(1.15rem, 2vw, 1.55rem); max-width: 660px; font-weight: 700; }
.hero-copy { width: min(700px, 100%); padding: 86px 0 76px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0; }
.feature-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 860px; }
.feature { background: #fff; border: 1px solid rgba(0,0,0,.1); border-top: 4px solid var(--red); padding: 18px; border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.feature h3 { color: #000; font-size: 1.2rem; margin-bottom: 6px; }
.feature p { color: var(--muted); margin: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.image-stack { position: relative; min-height: 430px; }
.image-stack img { border-radius: 18px; box-shadow: var(--shadow); object-fit: cover; }
.image-stack .main { width: 76%; height: 390px; }
.image-stack .accent { position: absolute; width: 52%; right: 0; bottom: 0; border: 8px solid #fff; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
.stat { border-left: 4px solid var(--red); padding: 12px 14px; background: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.08); }
.stat strong { display: block; font-size: 2.15rem; color: var(--red); font-family: 'Roboto Condensed', Arial, sans-serif; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 34px; }
.card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: 16px; padding: 26px; box-shadow: 0 12px 30px rgba(0,0,0,.07); }
.card h3 { color: var(--blue-dark); }
.card a { color: var(--red); font-weight: 700; }
.card h3, .feature h3 { display: flex; align-items: center; gap: 10px; }
.card h3::before, .feature h3::before { content: ""; width: 34px; height: 34px; flex: 0 0 34px; background: center / contain no-repeat var(--icon-shield); }
.feature:nth-child(1) h3::before { background-image: var(--icon-unlock); }
.feature:nth-child(2) h3::before { background-image: var(--icon-clock); }
.feature:nth-child(3) h3::before { background-image: var(--icon-location); }
.cards .card:nth-child(1) h3::before { background-image: var(--icon-home); }
.cards .card:nth-child(2) h3::before { background-image: var(--icon-car); }
.cards .card:nth-child(3) h3::before { background-image: var(--icon-building); }
.cards .card:nth-child(4) h3::before { background-image: var(--icon-siren); }
.why-items .card:nth-child(1) h3::before { background-image: var(--icon-clock); }
.why-items .card:nth-child(2) h3::before { background-image: var(--icon-location); }
.why-items .card:nth-child(3) h3::before { background-image: var(--icon-clock); }
.why-items .card:nth-child(4) h3::before { background-image: var(--icon-unlock); }
.process .card:nth-child(1) h3::before { background-image: var(--icon-phone); }
.process .card:nth-child(2) h3::before { background-image: var(--icon-clock); }
.process .card:nth-child(3) h3::before { background-image: var(--icon-shield); }
.process .card:nth-child(4) h3::before { background-image: var(--icon-key); }
.cta-band { background: var(--blue-dark); color: #fff; padding: 54px 0; border-top: 6px solid var(--blue); border-bottom: 6px solid var(--blue); }
.cta-band .container { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.cta-band h2, .cta-band p { color: #fff; margin-bottom: 8px; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.project-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; }
.service-list { columns: 2; padding-left: 20px; color: var(--muted); }
.service-list li { margin-bottom: 8px; break-inside: avoid; }
.why-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 36px; align-items: stretch; }
.why-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.why-photo { border-radius: 18px; min-height: 460px; object-fit: cover; width: 100%; height: 100%; }
.pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 30px; }
.price-card { background: #fff; border-radius: 18px; border: 1px solid var(--line); border-top: 4px solid var(--blue); padding: 30px; box-shadow: var(--shadow); }
.price-card .price { font-size: 3rem; color: var(--red); font-family: 'Roboto Condensed', Arial, sans-serif; font-weight: 700; }
.price-card ul { padding: 0; list-style: none; margin: 20px 0 0; }
.price-card li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--muted); }
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; }
.process .card { counter-increment: step; }
.process .card::before { content: counter(step, decimal-leading-zero); display: block; color: var(--red); font-weight: 800; margin-bottom: 12px; }
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.review { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.stars { color: #f5a400; font-weight: 900; }
.faq { max-width: 900px; margin: 30px auto 0; }
details { border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 18px 20px; margin-bottom: 12px; }
summary { cursor: pointer; font-weight: 800; color: var(--blue-dark); }
summary + p { margin-top: 12px; }
.contact-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.contact-card { background: #000; color: #fff; padding: 34px; border-radius: 18px; border-top: 6px solid var(--blue); }
.contact-card h1, .contact-card h2, .contact-card h3, .contact-card h4, .contact-card p, .contact-card li, .contact-card strong, .contact-card a { color: #fff; }
.contact-card .eyebrow { color: var(--blue); }
.contact-card a:hover { color: var(--blue); }
.contact-form { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px; box-shadow: var(--shadow); }
.contact-form label { display: block; font-weight: 700; margin-bottom: 14px; color: var(--blue-dark); }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 14px; min-height: 46px; padding: 12px; font: inherit; margin-top: 6px; }
.contact-form textarea { min-height: 120px; resize: vertical; }
.site-footer { background: #000; color: #d7e7f4; padding: 58px 0 28px; border-top: 6px solid var(--blue); }
.footer-grid { display: grid; grid-template-columns: 1.3fr .8fr 1fr; gap: 34px; }
.site-footer h3, .site-footer h4 { color: #fff; }
.site-footer p, .site-footer li { color: #b9ccdc; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; }
.footer-logo { width: 190px; margin-bottom: 18px; }
.copyright { border-top: 1px solid rgba(255,255,255,.12); margin-top: 36px; padding-top: 20px; font-size: .92rem; color: #9eb5c8; }
.mobile-call, .mobile-floating-contact { display: none; }
.mobile-floating-contact__button { position: fixed; z-index: 40; bottom: 18px; width: 58px; height: 58px; border-radius: 999px; color: #fff; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(0,0,0,.28); }
.mobile-floating-contact__button svg { width: 29px; height: 29px; fill: currentColor; }
.mobile-floating-contact__button--call { left: 18px; background: var(--red); }
.mobile-floating-contact__button--whatsapp { right: 18px; background: #25d366; }
@media (max-width: 980px) {
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 82px; background: #fff; padding: 18px 20px 24px; flex-direction: column; align-items: flex-start; box-shadow: 0 16px 22px rgba(5,27,44,.12); }
  .nav .menu { flex-direction: column; align-items: flex-start; }
  .nav.is-open { display: flex; }
  .header-call { display: none; }
  .hero { min-height: auto; background: linear-gradient(rgba(0,0,0,.88), rgba(0,0,0,.82)), url('assets/images/van-hero.png') center bottom/contain no-repeat, #f8f8f8; padding-bottom: 220px; }
  .grid-2, .why-grid, .contact-panel, .footer-grid { grid-template-columns: 1fr; }
  .cards, .stats, .process, .testimonials { grid-template-columns: repeat(2, 1fr); }
  .project-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .container { width: min(100% - 28px, var(--max)); }
  .section { padding: 58px 0; }
  .hero { color: #000; background: url('assets/images/van-hero.png') center bottom/contain no-repeat, linear-gradient(180deg, #fff 0%, #fff 62%, var(--blue) 62%, var(--blue) 78%, var(--soft) 78%, var(--soft) 100%); padding-bottom: 190px; }
  .hero h1 { color: #000; }
  .hero p { color: var(--muted); }
  .hero .lead { color: #000; }
  .hero-copy { padding: 64px 0 54px; }
  .feature { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--blue); box-shadow: 0 12px 30px rgba(0,0,0,.07); }
  .feature h3 { color: #000; }
  .feature p { color: var(--muted); }
  .feature-strip, .cards, .stats, .process, .testimonials, .pricing, .project-grid, .why-items { grid-template-columns: 1fr; }
  .service-list { columns: 1; }
  .cta-band .container { display: block; }
  .cta-band .btn { margin-top: 18px; }
  .mobile-floating-contact { display: block; }
  .mobile-floating-contact__button { display: inline-flex; }
}