.elementor-kit-6{--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-6 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 — Elementor Themelet
   Palette: #6E5849 (Mocha) / #D8CAB8 (Warm Sand)
   How to use:
   - Add class "locksmith-wrap" to the outer Section
   - For the 6 main services grid: add class "service-cards"
   - For the areas grid: add class "area-cards"
   - For the side list: add class "side-list"
   - For the 300/150-word text blocks: add class "text-block"
   ==============a=============== */

:root{
  --mocha:#6E5849;
  --sand:#D8CAB8;
  --ink:#3b3129;        /* readable body text */
  --paper:#f7f4ef;      /* soft background */
  --card:#ffffff;
  --line:rgba(0,0,0,.08);
  --radius:16px;
  --shadow:0 8px 18px rgba(0,0,0,.08);
  --shadow-hover:0 12px 28px rgba(0,0,0,.12);
}

/* Base wrapper (apply to your main Section/Container) */
.locksmith-wrap{
  background:
    radial-gradient(900px 500px at -10% -10%, rgba(216,202,184,.20), transparent 40%),
    radial-gradient(700px 400px at 110% 110%, rgba(110,88,73,.10), transparent 50%),
    var(--paper);
  color: var(--ink);
  padding: clamp(18px, 2vw, 28px);
}

/* Headings and accents */
.locksmith-wrap .section-kicker{
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mocha);
  background: rgba(110,88,73,.08);
  display: inline-block;
  padding: .35rem .6rem;
  border-radius: 999px;
  margin-bottom: .4rem;
}

.locksmith-wrap h2, 
.locksmith-wrap h3{
  color: var(--mocha);
  line-height: 1.25;
  margin: .25rem 0 .75rem;
}

.locksmith-wrap .divider{
  height: 4px;
  width: 80px;
  background: linear-gradient(90deg, var(--mocha), var(--sand));
  border-radius: 6px;
  margin: .25rem 0 1.25rem 0;
}

/* Text blocks (300w + 150w) */
.text-block{
  background: var(--card);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  padding: clamp(16px, 2.2vw, 28px);
  box-shadow: var(--shadow);
}

.text-block p{
  margin: 0 0 1rem 0;
  font-size: 1.05rem;
}

/* Generic card grid (used by services + areas) */
.card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(12px, 2vw, 18px);
}

/* Card style */
.card{
  position: relative;
  background: var(--card);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  padding: 18px 18px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(110,88,73,.12), transparent 45%),
    linear-gradient(0deg, rgba(216,202,184,.12), transparent 35%);
  pointer-events:none;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* Emoji badge (optional utility) */
.card .badge{
  font-size: 1.25rem;
  margin-right: .5rem;
}

/* Service cards (6 main) */
.service-cards .card-title{
  font-size: 1.05rem;
  color: var(--mocha);
  margin: 0;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
}

/* Area cards (city list) */
.area-cards .card-title{
  font-size: 1rem;
  margin: 0;
  color: var(--ink);
}
.area-cards .card{
  padding: 14px 16px;
}

/* =========================
   Nicer Side List (no scroll)
   ========================= */
.side-list{
  background: var(--card);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  padding: 18px 18px 8px;
  box-shadow: var(--shadow);
  position: static;          /* no sticky */
}

.side-list .chip{
  display: inline-block;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mocha);
  background: rgba(216,202,184,.45);
  border: 1px solid var(--sand);
  border-radius: 999px;
  padding: .25rem .55rem;
  margin-bottom: .35rem;
}

.side-list h3{
  margin: .2rem 0 .8rem 0;
  color: var(--mocha);
}

.side-list .subnote{
  font-size: .92rem;
  opacity: .85;
  margin: 0 0 12px 0;
}

/* grid layout for items */
.side-list .list-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 14px;
}

/* individual items */
.side-list .list-item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px dashed rgba(216,202,184,.7);
  border-radius: 12px;
  background: linear-gradient(0deg, rgba(216,202,184,.16), transparent 60%);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.side-list .list-item:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  background: linear-gradient(0deg, rgba(216,202,184,.24), transparent 60%);
}

.side-list .icon{
  font-size: 1.1rem;
  line-height: 1.1;
  margin-top: 2px;
  flex: 0 0 auto;
}

.side-list .label{
  font-size: .98rem;
  color: var(--ink);
}

/* tiny category separators (optional) */
.side-list .divider-row{
  height: 1px;
  background: linear-gradient(90deg, rgba(110,88,73,.25), rgba(216,202,184,.25));
  border-radius: 2px;
  margin: 8px 0;
}

/* responsive tweaks */
@media (max-width: 680px){
  .side-list{ padding: 16px; }
  .side-list .list-grid{ grid-template-columns: 1fr; }

}

/* Pills / tags (handy if you add quick badges) */
.pill{
  display: inline-block;
  font-size: .85rem;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: rgba(216,202,184,.45);
  color: var(--mocha);
  border: 1px solid var(--sand);
}

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1rem;
  border-radius: 10px;
  background: var(--mocha);
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
  opacity: .95;
}
.btn.outline{
  background: #fff;
  color: var(--mocha);
  border: 1px solid var(--mocha);
}

/* Responsive tweaks */
@media (max-width: 1024px){
  .side-list{ position: static; max-height: none; }
}
@media (max-width: 680px){
  .card-grid{ grid-template-columns: 1fr; }
  .text-block{ padding: 14px; }
}/* End custom CSS */