.elementor-kit-9{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================
   Locksmith Theme — "Slate Copper Nouveau"
   Palette: #708090 (Slate Gray) / #B87333 (Copper)
   Sections: Hero, About, Services, Why Choose, Testimonials, CTA
   ========================================================= */

/* ---- Tokens ---- */
:root{
  --slate:#708090;
  --copper:#B87333;
  --ink:#1f2a32;
  --muted:#495868;
  --paper:#f6f8fb;
  --card:#ffffff;
  --line:rgba(31,42,50,.14);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background:
    radial-gradient(1200px 560px at -8% -10%, rgba(112,128,144,.10), transparent 55%),
    radial-gradient(900px 420px at 110% 120%, rgba(184,115,51,.12), transparent 60%),
    var(--paper);
  color:var(--ink);
}

/* ---- Wrapper ---- */
.locksmith-nouveau{
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px 64px;
}
.container{max-width:1100px;margin:0 auto}

/* ---- Utilities ---- */
.kicker{
  display:inline-block;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--copper);
  background:rgba(184,115,51,.10);
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:999px;
}
.btn-nv{
  display:inline-block; padding:12px 18px; border-radius:12px;
  text-decoration:none; font-weight:700;
  background:var(--copper); color:#fff; border:1px solid var(--copper);
  box-shadow:0 10px 22px rgba(184,115,51,.28);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-nv:hover{ transform: translateY(-2px) }
.btn-outline-nv{
  background:transparent; color:var(--copper); border:1px solid var(--copper);
}
.btn-slate{ background:var(--slate); border-color:var(--slate) }

/* ---- Section headings ---- */
.section-head{ text-align:center; margin:10px 0 24px }
.section-head h2{
  margin:10px 0 6px; font-size:2rem; color:var(--slate); font-weight:800; letter-spacing:.01em;
}
.section-head p{ max-width:760px; margin:0 auto; color:var(--muted) }

/* ================= HERO (blob layers) ================= */
.hero-nv{
  position:relative; overflow:hidden; color:#fff;
  border-radius:22px; padding:46px 28px;
  background: linear-gradient(135deg, #5b6c7f 0%, var(--slate) 60%, #6a7e93 100%);
  box-shadow:0 22px 50px rgba(112,128,144,.35);
}
.hero-nv::before,
.hero-nv::after{
  content:""; position:absolute; border-radius:50%;
  filter: blur(8px); opacity:.20; pointer-events:none;
}
.hero-nv::before{ width:520px; height:520px; background:var(--copper); right:-140px; top:-120px }
.hero-nv::after{ width:420px; height:420px; background:#a6642d; left:-120px; bottom:-140px }
.hero-nv h1{ font-size:2.4rem; line-height:1.15; margin:8px 0 12px }
.hero-nv .lead{ font-size:1.06rem; line-height:1.75; opacity:.98 }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px }

/* ================= ABOUT (layered corners) ================= */
.about-nv{
  margin-top:28px; background:var(--card);
  border:1px solid var(--line); border-radius:18px; padding:26px;
  position:relative; box-shadow:0 12px 28px rgba(31,42,50,.10);
}
.about-nv::before{
  content:""; position:absolute; right:-10px; top:-10px; width:62px; height:62px;
  border:2px solid var(--slate); opacity:.25; border-radius:12px;
}
.about-nv::after{
  content:""; position:absolute; left:-12px; bottom:-12px; width:72px; height:72px;
  border:2px solid var(--copper); opacity:.25; border-radius:14px;
}
.about-nv h2{ color:var(--slate); font-size:1.72rem; margin:0 0 8px }
.about-nv p{ color:#3f4e5b; line-height:1.75 }

/* ================= SERVICES (offset cards + emoji badges) ================= */
.services-nv{ margin-top:34px }
.services-nv-grid{
  display:grid; gap:20px; grid-template-columns:repeat(3, minmax(0,1fr));
}
.svc-card{
  background: linear-gradient(180deg,#fff 0%,#fbfdff 100%);
  border:1px solid var(--line); border-radius:16px; padding:22px 18px 24px;
  box-shadow: 0 10px 24px rgba(31,42,50,.08);
  transition: transform .25s ease, box-shadow .25s ease; position:relative; overflow:hidden;
}
.svc-card:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(31,42,50,.14) }
.svc-card h3{ margin:6px 0 6px; color:var(--slate); font-size:1.15rem }
.svc-card p{ color:#455868; line-height:1.65; margin:6px 0 0 }

/* emoji badge */
.svc-card::before{
  content:"🔐"; position:absolute; top:12px; right:12px; font-size:18px; line-height:1;
  width:34px; height:34px; display:grid; place-items:center; border-radius:999px;
  background:rgba(184,115,51,.2); border:1px solid rgba(184,115,51,.55);
  box-shadow:0 8px 18px rgba(184,115,51,.22);
}
.svc-card.residential::before{ content:"🏠" }
.svc-card.commercial::before{ content:"🏢" }
.svc-card.industrial::before{ content:"🏭" }
.svc-card.automotive::before{ content:"🚗" }
.svc-card.twentyfour::before{ content:"🕒" }
.svc-card.emergency::before{ content:"🚨" }

/* ================= WHY CHOOSE (split tiles with ticks) ================= */
.why-nv{
  margin-top:34px;
  background: repeating-linear-gradient(135deg, rgba(112,128,144,.08) 0 14px, rgba(112,128,144,.03) 14px 28px);
  border:1px solid var(--line); border-radius:18px; padding:24px 22px; box-shadow:0 12px 28px rgba(31,42,50,.10);
}
.why-nv-grid{
  display:grid; gap:18px; margin-top:12px; grid-template-columns:repeat(3, minmax(0,1fr));
}
.why-item{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 16px;
  transition: transform .2s ease, box-shadow .2s ease; position:relative;
}
.why-item:hover{ transform:translateY(-3px); box-shadow:0 12px 24px rgba(31,42,50,.12) }
.why-item h4{ margin:0 0 6px; color:var(--slate); font-size:1.05rem; padding-left:26px; position:relative }
.why-item h4::before{ content:"✅"; position:absolute; left:0; top:-2px; color:var(--copper); font-size:18px }
.why-item p{ margin:0; color:#425463; line-height:1.6 }

/* ================= TESTIMONIALS (stacked bubbles + stars) ================= */
.testimonials-nv{
  margin-top:34px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:24px 22px;
  box-shadow:0 12px 28px rgba(31,42,50,.10);
}
.tnv-grid{
  display:grid; gap:20px; margin-top:12px; grid-template-columns:repeat(3, minmax(0,1fr));
}
.tnv-card{
  background: linear-gradient(180deg,#ffffff 0%, #f9fbff 100%);
  border:1px solid rgba(31,42,50,.12); border-radius:16px; padding:18px 16px;
  position:relative; overflow:hidden; box-shadow:0 10px 22px rgba(31,42,50,.08);
}
.tnv-card::before{
  content:"💬"; position:absolute; right:10px; bottom:-6px; font-size:50px; opacity:.08
}
.tnv-stars{ font-weight:800; letter-spacing:2px; color:var(--copper); margin-bottom:8px }
.tnv-quote{ font-style:italic; color:#3e4d59; line-height:1.75; margin:0 0 10px }
.tnv-name{ color:#5b6a75; font-weight:700; font-size:.95rem }

/* star count via data attribute */
.tnv-card .tnv-stars::before{ content:"★★★★★" }
.tnv-card[data-stars="4"] .tnv-stars::before{ content:"★★★★☆" }
.tnv-card[data-stars="3"] .tnv-stars::before{ content:"★★★☆☆" }

/* ================= CTA (bold copper band) ================= */
.cta-nv{
  margin-top:36px; background: linear-gradient(135deg, var(--copper) 0%, #a6632e 100%);
  color:#fff; border-radius:20px; padding:24px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  box-shadow:0 20px 48px rgba(184,115,51,.35);
}
.cta-nv h3{ margin:0 0 6px; font-size:1.45rem }
.cta-nv p{ margin:0 }
.cta-actions{ display:flex; gap:10px; flex-wrap:wrap }

/* ================= Responsive ================= */
@media (max-width:1024px){
  .services-nv-grid, .why-nv-grid, .tnv-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .cta-nv{ flex-direction:column; text-align:center }
}
@media (max-width:640px){
  .section-head h2{ font-size:1.6rem }
  .services-nv-grid, .why-nv-grid, .tnv-grid{ grid-template-columns:1fr }
}/* End custom CSS */