.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 — "Mocha Sand"
   Palette: #6E5849 (Mocha), #D8CAB8 (Warm Sand)
   Feel: Editorial / Warm / Elegant
   Sections included: Hero, About, Services, Problem, Why Choose Us, CTA
   ========================================================= */

/* Base */
:root{
  --mocha:#6E5849;
  --sand:#D8CAB8;
  --ink:#3b3029;        /* deeper text */
  --cream:#f7f2ec;      /* soft paper */
  --line:rgba(110,88,73,.22);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background:
    linear-gradient(180deg, #efe6dc 0%, #f6f0e9 100%);
  color: var(--ink);
}

.locksmith-wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

/* Utility */
.kicker{
  display:inline-block;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--mocha);
  background: rgba(110,88,73,.10);
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 999px;
}

/* Links / Buttons */
.btn{
  display:inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration:none;
  font-weight:700;
  border:1px solid var(--mocha);
  color:#fff;
  background: var(--mocha);
  box-shadow: 0 6px 18px rgba(110,88,73,.23);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn.alt{
  background: transparent;
  color: var(--mocha);
  border-color: var(--mocha);
}
.btn.alt:hover{
  background: var(--mocha);
  color: #fff;
}

/* Section heading style */
.section-head{
  text-align:center;
  margin: 8px 0 22px;
}
.section-head h2{
  margin: 10px 0 8px;
  font-size: 2rem;
  color: var(--mocha);
  font-weight: 800;
  letter-spacing:.02em;
}
.section-head p{
  max-width: 760px;
  margin: 0 auto;
  color:#4a3d35;
}

/* =============== HERO (Split layout) ================= */
.hero{
  position: relative;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 26px;
  align-items: stretch;
  background:
    radial-gradient(900px 400px at -10% -20%, rgba(110,88,73,.12), transparent 50%),
    radial-gradient(700px 300px at 110% 120%, rgba(216,202,184,.35), transparent 60%),
    var(--cream);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 16px 36px rgba(110,88,73,.12);
  overflow:hidden;
}
.hero-text{
  padding: 12px 8px;
}
.hero h1{
  font-size: 2.35rem;
  line-height: 1.15;
  margin: 10px 0;
  color: var(--ink);
  letter-spacing:.01em;
}
.hero p.lead{
  font-size:1.05rem;
  line-height:1.7;
  color:#4a3f38;
  margin: 12px 0 18px;
}
.hero-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-side{
  position: relative;
  background:
    linear-gradient(180deg, rgba(216,202,184,.45) 0%, rgba(216,202,184,.75) 100%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="360"><defs><pattern id="p" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M0 20 L20 0" stroke="%23b8a896" stroke-width="0.6" opacity="0.35"/></pattern></defs><rect width="100%" height="100%" fill="url(%23p)"/></svg>');
  border-left: 1px dashed var(--line);
  border-radius: 14px;
  min-height: 240px;
  box-shadow: inset 0 0 0 1px rgba(110,88,73,.08);
}
.hero-badge{
  position:absolute; right:16px; bottom:16px;
  background: var(--mocha);
  color:#fff;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight:700;
  box-shadow: 0 10px 20px rgba(110,88,73,.25);
}

/* =============== ABOUT (Bordered card w/ corner tabs) ================= */
.about{
  margin-top: 28px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--line);
  padding: 26px;
  position: relative;
  box-shadow: 0 12px 26px rgba(110,88,73,.10);
}
.about::before,
.about::after{
  /* corner tabs */
/*  content:"";
  position:absolute;
  width: 44px; height: 44px;
  border: 2px solid var(--mocha);
  opacity:.28;
  border-radius: 8px; */
}
.about::before{ top:-10px; left:-10px; }
.about::after{ bottom:-10px; right:-10px; }
.about h2{
  margin: 0 0 10px;
  color: var(--mocha);
  font-size: 1.7rem;
}
.about p{
  color:#4a3f38;
  line-height:1.75;
}

/* =============== SERVICES (Editorial tiles) ================= */
.services{
  margin-top: 34px;
}
.service-grid{
  display:grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
}
.service-card{
  background:
    linear-gradient(180deg, #fff 0%, #fbf8f4 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 18px;
  position: relative;
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 10px 24px rgba(110,88,73,.08);
}
.service-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(110,88,73,.16);
}
.service-card .flag{
  position:absolute; top:12px; right:-44px;
  background: var(--sand);
  color: var(--mocha);
  font-weight: 800;
  padding: 2px 60px;
  transform: rotate(18deg);
  letter-spacing:.06em;
  box-shadow: 0 8px 18px rgba(216,202,184,.35);
}
.service-card h3{
  margin: 16px 0 6px;
  color: var(--mocha);
  font-size: 1.15rem;
}
.service-card p{
  color:#4b4039;
  line-height:1.65;
  margin: 8px 0 0;
}

/* =============== PROBLEM (Timeline list) ================= */
.problem{
  margin-top: 36px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 22px;
  box-shadow: 0 12px 28px rgba(110,88,73,.1);
}
.problem-list{
  margin: 16px 0 0;
  padding: 0 0 0 8px;
  position: relative;
}
.problem-list::before{
  content:"";
  position:absolute; left:16px; top:0; bottom:0;
  width:2px; background: linear-gradient(180deg, var(--mocha), rgba(110,88,73,.15));
  border-radius:2px;
}
.problem-item{
  list-style:none;
  position: relative;
  padding: 12px 12px 12px 46px;
  margin: 0 0 8px;
  border-bottom: 1px dashed var(--line);
}
.problem-item:last-child{ border-bottom: 0; }
.problem-item::before{
  content:"";
  position:absolute; left:9px; top:16px;
  width:16px; height:16px; border-radius:50%;
  background: var(--sand);
  border: 2px solid var(--mocha);
  box-shadow: 0 0 0 4px rgba(216,202,184,.35);
}
.problem-item h4{
  margin: 0 0 6px;
  color: var(--mocha);
  font-size: 1.05rem;
}
.problem-item p{
  margin: 0;
  color:#4a3f38;
  line-height:1.65;
}

/* =============== WHY CHOOSE US (Striped cards) ================= */
.why{
  margin-top: 36px;
  background:
    repeating-linear-gradient(135deg,
      rgba(216,202,184,.18) 0 10px,
      rgba(216,202,184,.10) 10px 20px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 22px;
  box-shadow: 0 12px 28px rgba(110,88,73,.10);
}
.why-grid{
  display:grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
  margin-top: 12px;
}
.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::after{
  content:"";
  position:absolute;
  inset: 0;
  background: radial-gradient(220px 120px at 10% 0%, rgba(110,88,73,.08), transparent 55%);
  pointer-events:none;
}
.why-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(110,88,73,.15);
}
.why-card h4{
  margin: 0 0 6px;
  color: var(--mocha);
  font-size: 1.05rem;
}
.why-card p{
  margin: 0;
  color:#4a3f38;
  line-height:1.6;
}

/* =============== CTA (Banner) ================= */
.cta{
  margin-top: 38px;
  background:
    linear-gradient(180deg, var(--mocha) 0%, #5f4b3e 100%);
  color: #fff;
  border-radius: 18px;
  padding: 26px 22px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 16px 40px rgba(110,88,73,.25);
}
.cta h3{
  margin: 0 0 6px;
  font-size: 1.5rem;
  letter-spacing:.01em;
}
.cta p{
  margin: 0;
  opacity:.96;
}
.cta .cta-actions{
  display:flex; gap: 10px; flex-wrap:wrap;
}
.cta .btn{ background:#fff; color: var(--mocha); border-color:#fff; }
.cta .btn:hover{ background: var(--sand); color: var(--mocha); }

/* =============== Responsive ================= */
@media (max-width: 1024px){
  .hero{
    grid-template-columns: 1fr;
  }
  .hero-side{ min-height: 160px; }
  .service-grid, .why-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; }
  .service-grid, .why-grid{
    grid-template-columns: 1fr;
  }
  .service-card h3{
  margin: 37px 0 6px;
  }
}/* End custom CSS */