.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 — "Steel & Taupe"
   Palette: #4682B4 (Steel Blue), #C1B4A0 (Warm Taupe)
   Includes: Hero, About, Services, Problem, Why Choose, Testimonials, CTA
   Emoji support via ::before badges and data-attributes
   ========================================================= */

/* -------- Base / Tokens -------- */
:root{
  --steel:#4682B4;   /* primary */
  --taupe:#C1B4A0;   /* secondary */
  --ink:#26323b;     /* body text */
  --paper:#f7f9fb;   /* page bg */
  --card:#ffffff;    /* cards */
  --line:rgba(38,50,59,.12);
}

*{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 600px at -15% -15%, rgba(70,130,180,.10), transparent 50%),
    radial-gradient(900px 500px at 115% 115%, rgba(193,180,160,.15), transparent 55%),
    var(--paper);
  color: var(--ink);
}
.locksmith-steel{
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

/* small utilities */
.container{max-width:1100px;margin:0 auto}
.kicker{
  display:inline-block;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--steel);
  background: rgba(70,130,180,.08);
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:999px;
}

/* Links / Buttons */
.btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  border:1px solid var(--steel);
  background: var(--steel);
  color:#fff;
  box-shadow:0 8px 20px rgba(70,130,180,.28);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{
  background:transparent;
  color:var(--steel);
}
.btn.taupe{
  background: var(--taupe);
  border-color: var(--taupe);
  color:#26323b;
}

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

/* -------- HERO (angled banner) -------- */
.hero{
  background:
    linear-gradient(135deg, var(--steel) 0%, #3a6e96 45%, rgba(70,130,180,.95) 100%);
  color:#ffffff;
  border-radius:18px;
  padding:42px 26px;
  box-shadow:0 18px 44px rgba(70,130,180,.35);
  position:relative;
  overflow:hidden;
}
.hero::after{
  /* subtle taupe sweep */
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(25deg, transparent 55%, rgba(193,180,160,.18) 100%);
  mix-blend-mode: screen; pointer-events:none;
}
.hero h1{ font-size:2.35rem; line-height:1.15; margin:8px 0 10px }
.hero .lead{ font-size:1.05rem; line-height:1.75; opacity:.98 }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px }

/* -------- ABOUT (split border card) -------- */
.about{
  margin-top:26px; background:var(--card);
  border-radius:16px; border:1px solid var(--line);
  padding:26px; position:relative;
  box-shadow:0 12px 28px rgba(38,50,59,.08);
}
.about::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:6px;
  background: linear-gradient(180deg, var(--steel), var(--taupe));
  border-top-left-radius:16px; border-bottom-left-radius:16px;
}
.about h2{ color:var(--steel); font-size:1.7rem; margin:0 0 8px }
.about p{ color:#3d4b55; line-height:1.75 }

/* -------- SERVICES (badge + grid) -------- */
.services{ margin-top:32px }
.services-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.service-card{
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px 18px 22px 18px;
  position:relative; overflow:hidden;
  box-shadow:0 10px 24px rgba(38,50,59,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(38,50,59,.15) }
.service-card h3{ margin:6px 0 6px; color:var(--steel); font-size:1.15rem }
.service-card p{ color:#445461; line-height:1.65; margin:6px 0 0 }

/* emoji badge for service types */
.service-card::before{
  content:"🔒";   /* default lock emoji */
  position:absolute; top:12px; right:12px;
  font-size:20px; line-height:1;
  background:rgba(193,180,160,.25);
  border:1px solid rgba(193,180,160,.6);
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:50%;
  box-shadow:0 6px 16px rgba(193,180,160,.25);
}
.service-card.residential::before{ content:"🏡" }
.service-card.commercial::before{ content:"🏢" }
.service-card.industrial::before{ content:"🏭" }
.service-card.automotive::before{ content:"🚗" }
.service-card.twentyfour::before{ content:"🕒" }
.service-card.emergency::before{ content:"🚨" }

/* -------- PROBLEM (cards with left rail) -------- */
.problem{
  margin-top:34px; background:var(--card);
  border:1px solid var(--line); border-radius:16px; padding:24px 22px;
  box-shadow:0 12px 28px rgba(38,50,59,.08);
}
.problem-grid{
  display:grid; gap:16px; margin-top:10px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.problem-card{
  background:#f4f7fb;
  border:1px solid rgba(70,130,180,.18);
  border-left:5px solid var(--steel);
  border-radius:12px;
  padding:16px 18px;
}
.problem-card h4{ margin:0 0 6px; color:var(--steel) }
.problem-card p{ margin:0; color:#455664; line-height:1.6 }

/* optional emoji hook for problems */
.with-emoji::before{
  content: attr(data-emoji);
  margin-right:8px;
}

/* -------- WHY CHOOSE (taupe stripes + icon bullets) -------- */
.why{
  margin-top:34px;
  background:
    repeating-linear-gradient(135deg,
      rgba(193,180,160,.20) 0 12px,
      rgba(193,180,160,.10) 12px 24px);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px 22px;
  box-shadow:0 12px 28px rgba(38,50,59,.08);
}
.why-grid{
  display:grid; gap:16px; margin-top:12px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.why-card{
  background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:18px 16px; position:relative; overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.why-card:hover{ transform:translateY(-3px); box-shadow:0 12px 24px rgba(38,50,59,.12) }
.why-card h4{
  margin:0 0 6px; color:var(--steel); font-size:1.05rem;
  padding-left:26px; position:relative;
}
.why-card h4::before{
  content:"⭐";
  position:absolute; left:0; top:-2px; font-size:18px;
  color:var(--steel);
}
.why-card p{ margin:0; color:#42525f; line-height:1.6 }

/* -------- TESTIMONIALS (emoji quotes + stars) -------- */
.testimonials{
  margin-top:34px; background:var(--card);
  border:1px solid var(--line); border-radius:16px; padding:24px 22px;
  box-shadow:0 12px 28px rgba(38,50,59,.08);
}
.t-grid{
  display:grid; gap:18px; margin-top:10px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.t-card{
  background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
  border:1px solid rgba(70,130,180,.16);
  border-radius:14px; padding:18px 16px;
  position:relative; overflow:hidden;
  box-shadow:0 10px 22px rgba(38,50,59,.08);
}
.t-card::before{
  /* big faded quote emoji */
  content:"💬";
  position:absolute; right:10px; bottom:-6px;
  font-size:48px; opacity:.08;
}
.t-quote{
  font-style:italic; color:#3d4b55; line-height:1.7; margin:0 0 10px;
}
.t-stars{
  font-weight:800; letter-spacing:2px; color:var(--steel);
  margin-bottom:8px;
}
.t-name{
  color:#5b6a75; font-weight:700; font-size:.95rem;
}

/* Allow star count via data attribute (defaults to 5) */
.t-card .t-stars::before{ content:"★★★★★" }
.t-card[data-stars="4"] .t-stars::before{ content:"★★★★☆" }
.t-card[data-stars="3"] .t-stars::before{ content:"★★★☆☆" }

/* -------- CTA (split banner) -------- */
.cta{
  margin-top:36px;
  background: linear-gradient(135deg, var(--taupe) 0%, #b9a996 100%);
  color:#1f2a32; border-radius:18px; padding:22px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  box-shadow:0 16px 42px rgba(193,180,160,.35);
}
.cta h3{ margin:0 0 6px; font-size:1.45rem }
.cta p{ margin:0 }
.cta .cta-actions{ display:flex; gap:10px; flex-wrap:wrap }

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