/* San Francisco Locksmith — clean light premium theme (call-first). Built by Digital Optima. */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#F7F5F1;         /* warm off-white / greige */
  --surface:#FFFFFF;
  --ink:#15223B;        /* deep navy text */
  --ink2:#26344F;
  --muted:#5C6675;
  --accent:#9C5320;     /* deep copper with readable contrast on light surfaces */
  --accent2:#743A14;    /* darker copper for hover and small text */
  --accent-soft:#FBEFE4;
  --line:#E7E1D7;
  --navy:#15223B;       /* alias so any flagship rule using --navy stays on-theme */
  --orange:#9C5320;     /* alias for flagship class names (.hcall/.btn use --orange) */
  --orange2:#743A14;
  --ink-on-accent:#FFFFFF;
  --radius:14px;
  --shadow:0 6px 24px rgba(21,34,59,.08);
  --shadow-lg:0 18px 48px rgba(21,34,59,.14);
}
html{scroll-behavior:smooth}
body{font-family:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{color:var(--ink);line-height:1.15;letter-spacing:-.01em;font-weight:800}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:10px;z-index:120;background:var(--accent);color:#fff;padding:10px 16px;border-radius:8px;font-weight:800}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.lede{color:var(--muted);font-size:1.06rem;max-width:60ch;margin:.4rem auto 0}
.center{text-align:center;margin-bottom:34px}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:22px;height:74px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;color:var(--ink)}
.brand__mark{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--accent);color:#fff;font-weight:900;font-size:.86rem;letter-spacing:.02em;box-shadow:var(--shadow)}
.brand__logo{height:48px;width:auto;display:block}
footer .brand__logo{height:40px}
.brand__name{font-size:1.06rem;letter-spacing:-.01em}
nav.main{display:flex;align-items:center;gap:6px;margin-left:6px}
nav.main .item{position:relative}
nav.main .item>a,nav.main .item>span{display:inline-flex;align-items:center;gap:4px;padding:10px 12px;border-radius:9px;color:var(--ink2);font-weight:650;font-size:.95rem;cursor:pointer}
nav.main .item>a:hover,nav.main .item>span:hover{background:var(--accent-soft);color:var(--accent2)}
nav.main .drop{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s;display:grid}
nav.main .drop.wide{min-width:460px;grid-template-columns:1fr 1fr}
nav.main .item:hover .drop{opacity:1;visibility:visible;transform:none}
nav.main .drop a{padding:9px 12px;border-radius:8px;color:var(--ink2);font-weight:600;font-size:.92rem}
nav.main .drop a:hover{background:var(--accent-soft);color:var(--accent2)}
.hcall{margin-left:auto;display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:800;padding:9px 15px;border:1.5px solid var(--line);border-radius:999px}
.hcall:hover{border-color:var(--accent);color:var(--accent2)}
.hcall .lbl{white-space:nowrap}
.navtoggle{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:6px}
nav.mobile{display:none;flex-direction:column;padding:10px 24px 20px;border-bottom:1px solid var(--line);background:var(--surface)}
nav.mobile.open{display:flex}
nav.mobile a{padding:11px 4px;color:var(--ink2);font-weight:650;border-bottom:1px solid var(--line)}
nav.mobile .h{margin-top:12px;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:999px;background:var(--accent);color:#fff;font-weight:800;font-size:1rem;border:2px solid var(--accent);transition:.16s;box-shadow:var(--shadow)}
.btn:hover{background:var(--accent2);border-color:var(--accent2);transform:translateY(-1px);box-shadow:var(--shadow-lg);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--surface);border-color:var(--accent);color:var(--accent2);transform:none;box-shadow:none}
.hero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.65)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}

/* ---------- hero ---------- */
.hero{position:relative;color:#fff;overflow:hidden;background:var(--ink)}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(15,20,32,.9) 0%,rgba(15,20,32,.62) 55%,rgba(15,20,32,.35) 100%);z-index:1}
.hero .wrap{position:relative;z-index:2;padding:88px 24px 92px}
.hero h1{color:#fff;font-size:clamp(2.1rem,5vw,3.5rem);max-width:16ch;margin:.5rem 0}
.hero .sub{color:#E8ECF3;font-size:1.12rem;max-width:52ch;margin-bottom:26px}
.hero .eyebrow{color:#F0C9A6}
.ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.trust{display:flex;gap:26px;flex-wrap:wrap;color:#DCE2EC;font-size:.9rem;font-weight:600}
.trust span{display:inline-flex;align-items:center;gap:8px}
.trust span:before{content:"✓";color:#F0C9A6;font-weight:900}

/* ---------- sections & grids ---------- */
section{padding:66px 0}
section.soft{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grid{display:grid;gap:20px}
.homegrid,.guidegrid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
#cities-lightning .grid,#svc-lightning .grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.18s;box-shadow:var(--shadow)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#D9CFC0}
.card img,.card__img{width:100%;height:168px;object-fit:cover}
.card h3{padding:16px 18px 4px;font-size:1.12rem}
.card p{padding:0 18px;color:var(--muted);font-size:.95rem}
.card .go{display:inline-block;padding:12px 18px 18px;color:var(--accent);font-weight:800;font-size:.9rem}
.split{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:center}
.split .content h2{font-size:1.5rem;margin:22px 0 10px}
.split .content h2:first-child{margin-top:0}
.split .content p{color:var(--ink2);margin-bottom:10px}
.split .content ul{margin:0 0 12px 20px;color:var(--ink2)}
.split .content li{margin-bottom:6px}
.split img{border-radius:var(--radius);box-shadow:var(--shadow-lg);height:100%;object-fit:cover}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}

/* ---------- map ---------- */
#svcmap{height:420px;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);z-index:1}
.geobanner{background:var(--accent-soft);color:var(--accent2);border:1px solid #E8D3BE;border-radius:10px;padding:12px 16px;margin-bottom:16px;font-weight:700;text-align:center}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(120deg,var(--ink) 0%,var(--ink2) 100%);color:#fff;text-align:center;padding:64px 24px;border-radius:0}
.cta-band h2{color:#fff}
.cta-band p{color:#D6DCE7;max-width:52ch;margin:10px auto 24px}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#C9D1DE;padding:56px 0 26px;margin-top:0}
footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px}
footer .brand,footer .brand__name{color:#fff}
footer h4{color:#fff;font-size:.98rem;margin-bottom:12px}
footer .cols a{display:block;color:#AEB8C7;padding:5px 0;font-weight:600;font-size:.94rem}
footer .cols a:hover{color:#F0C9A6}
.fblurb{font-size:.94rem;color:#AEB8C7;margin-top:10px}
.fblurb a{color:#F0C9A6}
.tmrow{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:20px}
.creds{color:#98A2B3;font-size:.9rem}
.legal{border-top:1px solid rgba(255,255,255,.12);margin-top:18px;padding-top:18px;color:#8A94A6;font-size:.85rem}
.legal a{color:#F0C9A6}

/* ---------- sticky mobile call bar ---------- */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:#fff;font-weight:800;padding:15px;box-shadow:0 -6px 24px rgba(21,34,59,.18)}

/* ---------- legacy agent page classes (city + supporting pages) mapped into the theme ---------- */
.page-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--ink) 0%,var(--ink2) 100%);color:#fff;padding:70px 0 62px}
.page-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.page-hero__overlay{position:absolute;inset:0;background:linear-gradient(120deg,rgba(15,20,32,.9) 0%,rgba(15,20,32,.6) 60%,rgba(15,20,32,.4) 100%);z-index:1}
.page-hero__content{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:0 24px}
.page-hero__actions .btn{background:var(--accent);border-color:var(--accent)}
.page-hero__eyebrow{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#F0C9A6;margin-bottom:10px}
.page-hero h1{color:#fff;font-size:clamp(1.9rem,4vw,2.9rem);max-width:22ch;margin-bottom:14px}
.page-hero p{color:#E8ECF3;max-width:62ch}
.page-hero__actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.section{padding:56px 0}
.container{max-width:1000px;margin:0 auto;padding:0 24px}
.container p{color:var(--ink2);margin-bottom:12px;font-size:1.03rem}
.container h2{margin:20px 0 10px}
.container h2:first-child{margin-top:0}
.container ul{margin:0 0 12px 20px;color:var(--ink2)}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:999px;background:var(--accent);color:#fff;font-weight:800;border:2px solid var(--accent);box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--accent2);border-color:var(--accent2);color:#fff}
/* legacy city pages get a call-to-action band appended via the agent going forward; this styles any inline one */

/* ---------- service directory and service landing pages ---------- */
.breadcrumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;color:#DCE2EC;font-size:.85rem;font-weight:700}
.breadcrumbs a{color:#F0C9A6}.breadcrumbs span:last-child{color:#fff}
.service-hero .btn.ghost,.service-directory-hero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.62);box-shadow:none}
.service-hero .btn.ghost:hover,.service-directory-hero .btn.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.service-page>.container,.service-directory-intro>.container{max-width:1120px}
.service-answer{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);gap:34px;align-items:start;margin-bottom:48px}
.service-answer h2{font-size:clamp(1.65rem,3vw,2.25rem);margin:8px 0 14px}
.section-label{display:inline-block;color:var(--accent2);font-size:.76rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.decision-card{background:var(--ink);color:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-lg)}
.decision-card strong{display:block;color:#F0C9A6;font-size:1.05rem;margin-bottom:10px}
.decision-card ul{margin:0 0 0 18px;color:#E8ECF3}.decision-card li{margin-bottom:8px}
.decision-card nav{display:grid;gap:7px}.decision-card nav a{display:block;color:#fff;border-bottom:1px solid rgba(255,255,255,.14);padding:7px 0;font-weight:750}
.service-copy{max-width:860px;margin:0 auto}.service-copy h2{margin-top:42px}.service-copy h3{font-size:1.06rem;margin-bottom:7px}
.use-case-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0 30px}
.use-case-grid article{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px;box-shadow:var(--shadow)}
.use-case-grid article p{font-size:.96rem;margin:0}
.technical-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0 34px}
.technical-facts article{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px 20px 18px 54px;box-shadow:var(--shadow)}
.technical-facts article span{position:absolute;left:16px;top:18px;color:var(--accent2);font-size:.75rem;font-weight:900;letter-spacing:.06em}.technical-facts article p{font-size:.96rem;margin:0}
.service-steps{counter-reset:service-step;list-style:none;margin:22px 0 32px;display:grid;gap:14px}
.service-steps li{display:grid;grid-template-columns:42px 1fr;column-gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:17px 18px}
.service-steps li:before{counter-increment:service-step;content:counter(service-step);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent2);font-weight:900;grid-row:1 / span 2}
.service-steps strong{align-self:end}.service-steps span{display:block;color:var(--ink2);font-size:.96rem;margin-top:4px}
.check-list{list-style:none!important;margin:18px 0 30px!important;display:grid;gap:10px}.check-list li{position:relative;padding:12px 14px 12px 42px;background:var(--surface);border:1px solid var(--line);border-radius:9px}.check-list li:before{content:"\2713";position:absolute;left:15px;color:var(--accent2);font-weight:900}
.service-faq,.related-services{max-width:860px;margin:58px auto 0}.service-faq h2,.related-services h2{margin:8px 0 20px}
.service-faq details{background:var(--surface);border:1px solid var(--line);border-radius:10px;margin-bottom:10px;padding:0 18px}
.service-faq summary{cursor:pointer;padding:17px 0;color:var(--ink);font-weight:800}.service-faq details p{padding:0 0 17px;margin:0}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.related-link{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;color:var(--ink);min-height:96px}
.related-link:hover{border-color:var(--accent);box-shadow:var(--shadow)}.related-link span{color:var(--accent2);font-size:.72rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.related-link strong{margin-top:5px}
.directory-return{margin-top:18px!important;font-weight:800}
.service-family{padding:46px 0 10px;border-top:1px solid var(--line)}
.service-family:first-of-type{border-top:0}.service-family__head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:20px}.service-family__head h2{margin:6px 0 0}.service-family__head>p{color:var(--muted);font-weight:750;white-space:nowrap}
.service-directory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.service-directory-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;color:var(--ink);box-shadow:var(--shadow);min-height:220px;transition:.18s}
.service-directory-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow-lg)}
.service-directory-card__type{color:var(--accent2);font-size:.72rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.service-directory-card h3{font-size:1.17rem;margin:10px 0 9px}.service-directory-card p{font-size:.93rem!important;color:var(--muted)!important}.service-directory-card__link{margin-top:auto;color:var(--accent2);font-weight:850;font-size:.88rem}
.directory-guidance{margin-top:52px}

/* ---------- responsive ---------- */
@media(max-width:900px){
  nav.main{display:none}
  .navtoggle{display:inline-flex;margin-left:auto}
  .hcall{margin-left:0}
  .split{grid-template-columns:1fr}
  .split img{order:-1;max-height:280px}
  footer .cols{grid-template-columns:1fr 1fr}
  .callbar{display:flex}
  .hero .wrap{padding:64px 24px 88px}
  .service-answer{grid-template-columns:1fr}.service-directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.related-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){footer .cols{grid-template-columns:1fr}.trust{gap:14px}.use-case-grid,.technical-facts,.service-directory-grid,.related-grid{grid-template-columns:1fr}.service-family__head{align-items:start;flex-direction:column}.service-family__head>p{white-space:normal}.service-steps li{grid-template-columns:36px 1fr}}