@font-face{font-family:Outfit;src:url("/assets/outfit.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Poppins;src:url("/assets/poppins-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url("/assets/poppins-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url("/assets/poppins-600.woff2") format("woff2");font-weight:600;font-display:swap}
:root{color-scheme:light;--p-bg:#fff;--p-surface:#f7f7f7;--p-ink:#171719;--p-muted:#45454a;--p-accent:#e00000;--p-action:#e00000;--p-action-ink:#fff;--bg:var(--p-bg);--surface:var(--p-surface);--ink:var(--p-ink);--muted:var(--p-muted);--accent:var(--p-accent);--accent-text:#b40000;--line:#e1e1e3;--line-strong:#d4d4d7;--dark:#151518;--on-dark:#fff;--font-body:Outfit,sans-serif;--font-display:Poppins,sans-serif;--gutter:clamp(20px,4.7vw,72px);--nav:102px;--section-space:clamp(56px,6.8vw,98px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--bg);font:400 1.125rem/1.5 var(--font-body)}
a{color:inherit;text-underline-offset:4px}
a:focus-visible,summary:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
:where(a,summary,button,input,select,textarea):focus{scroll-margin-top:calc(var(--nav) + 12px)}
h1,h2,h3,p,figure,ul{margin:0}
img{display:block;max-width:100%;height:auto}
.wrap{width:min(calc(100% - 2 * var(--gutter)),1120px);margin-inline:auto}
.skip{position:fixed;left:var(--gutter);top:-80px;z-index:6;padding:12px;background:var(--bg)}
.skip:focus{top:8px}
.header{height:var(--nav);position:fixed;inset:0 0 auto;background:var(--bg);border-bottom:1px solid var(--line);z-index:3}
.header-inner{height:100%;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr 1fr;align-items:center;column-gap:20px}
.brand{grid-row:1/-1;display:flex;align-items:center;width:182px;min-height:44px}
.brand img{width:100%}
.header-phone{justify-self:end;display:inline-flex;gap:8px;align-items:center;justify-content:center;min-height:44px;padding:4px 12px 4px 5px;border:1px solid #f3cdcd;border-radius:100px;background:#fff6f6;color:var(--accent-text);text-decoration:none;white-space:nowrap;font:600 1.1rem/1.2 var(--font-display);font-variant-numeric:tabular-nums}
.header-phone:hover{background:#ffe9e9;border-color:#e6a7a7}
.header-phone-mark{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--p-action);color:var(--p-action-ink)}
.header-phone-mark .icon{width:17px;height:17px}
.desktop-nav{justify-self:end;display:flex;gap:clamp(12px,1.7vw,26px);align-items:center;font-size:1rem;letter-spacing:.045em}
.desktop-nav a{white-space:nowrap}
@media (981px <= width <= 1150px){.desktop-nav{gap:12px;font-size:.875rem;letter-spacing:.03em}}
.desktop-nav a,.mobile-menu nav a{display:flex;align-items:center;min-height:44px;font-family:var(--font-display);font-weight:500;text-decoration:none}
.desktop-nav a:hover,.desktop-nav a[aria-current=page],.mobile-menu a[aria-current=page]{color:var(--accent-text);text-decoration:underline}
.mobile-menu{display:none}
.icon{width:1.15em;height:1.15em;flex:none}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,5vw,72px);align-items:center}
.hero{display:grid;padding:var(--section-space) 0;margin-top:var(--nav)}
.hero--banner{position:relative;isolation:isolate;align-items:center;min-height:500px;padding:78px 0 64px;background:var(--dark);color:var(--on-dark)}
.hero--banner>.wrap{position:relative;z-index:2}
.hero--banner::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgb(12 12 15/.94),rgb(12 12 15/.77) 49%,rgb(12 12 15/.18) 84%)}
.hero--banner:not(:has(.photo--locksmith-hero))::after{background:linear-gradient(90deg,rgb(12 12 15/.94),rgb(12 12 15/.72) 68%,rgb(12 12 15/.22) 100%)}
.hero--banner .photo{position:absolute;inset:0;z-index:0;height:100%;border-radius:0;aspect-ratio:auto;background:var(--dark)}
.hero--banner .photo img{object-position:center 32%}
@media (761px <= width <= 1100px){.hero--banner .photo--locksmith-hero img{object-position:85% 32%}}
.hero--banner :focus-visible,.footer :focus-visible{outline-color:var(--on-dark)}
.hero-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.hero--banner .hero-copy{max-width:38rem;margin-inline-start:clamp(0px,calc(16vw - 164px),68px)}
h1,h2,h3{line-height:1.13}
h1{font-size:clamp(2.25rem,3.62vw,3.25rem);font-weight:600;max-width:19ch;text-wrap:balance}
.hero--banner h1{font-weight:400;line-height:1}
.hero--banner h1 strong{font-weight:700}
h2,h3{font-family:var(--font-display);font-weight:600}
h2{font-size:clamp(1.75rem,2.44vw,2.1875rem);text-wrap:balance}
h3{font-size:clamp(1.13rem,1.43vw,1.3rem);line-height:1.35}
.hero-desc{margin-top:20px;font:400 1.125rem/1.5 var(--font-display);max-width:52ch;color:var(--muted)}
.hero--banner .hero-desc,.hero--banner .crumb{color:#f0f0f2}
.button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:0 24px;min-height:44px;background:var(--p-action);color:var(--p-action-ink);border:0;border-radius:100px;font:500 .9375rem/1.35 var(--font-display);text-decoration:none;cursor:pointer;transition:background-color .2s,transform .2s}
.button:not(:disabled):hover{background:var(--accent-text);transform:translateY(-2px)}
.button:not(:disabled):active{transform:translateY(1px)}
.button:disabled{background:var(--muted);cursor:default}
.arrow{font-size:1.2em}
.hero .button{margin-top:28px}
.hero--banner .button{margin:38px 0 0 20px}
.contact-number{margin-top:14px}
.contact-number a{display:inline-flex;align-items:center;min-height:44px}
.photo{overflow:hidden;border-radius:12px;background:#e0e0e2;min-width:0;aspect-ratio:4/3}
.photo picture,.photo img{display:block;width:100%;height:100%}
.photo img{object-fit:cover;object-position:center}
.photo--cutting img{object-position:42% center}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 .65rem;color:var(--muted);font-size:.9rem}
.crumb-step{display:inline-flex;align-items:center;gap:.65rem}
.crumb a{display:flex;align-items:center;min-height:44px}
.crumb+h1{margin-top:14px}
.screen{padding:var(--section-space) 0}
#main,.screen,.area-detail,#site-footer{scroll-margin-top:var(--nav)}
.area-detail{scroll-margin-top:calc(var(--nav) + 10px)}
.tinted{background:var(--surface)}
.section-copy>p{margin-top:18px;color:var(--muted);font-size:clamp(1rem,1.25vw,1.125rem);max-width:48ch}
.section-copy .fact-strip{font-size:.8rem!important;letter-spacing:.04em;border-top:1px solid var(--line);padding-top:16px}
.section-copy .text-link{margin-top:15px}
.text-link{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;font-weight:700;color:var(--accent-text)}
.text-link:hover{color:var(--ink)}
.bullet-list{margin-top:20px;padding:0;list-style:none;color:var(--muted)}
.bullet-list li+li{margin-top:4px}
.list-layout{align-items:start}
.service-overview{padding:0 0 clamp(38px,5vw,68px)}
.service-overview-title{background:var(--surface);text-align:center;padding:clamp(28px,2.78vw,40px) 0}
.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;list-style:none;padding:32px 0 0}
.service-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:11px;min-height:100%;padding:12px 0;text-decoration:none;transition:transform .2s}
.service-card:hover{transform:translateY(-2px)}
.service-card:hover h3{text-decoration:underline}
.service-card .icon{width:24px;height:24px;color:var(--accent)}
.service-card p{margin-top:10px;color:var(--muted);line-height:1.45}
@media(min-width:981px){.service-card h3{min-block-size:2.7em}}
.service-overview+.screen{padding-top:0}
#company .split{align-items:start}
.screen--reverse .photo{order:-1}
.rows{list-style:none;padding:0;border-top:1px solid var(--line-strong)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:13px;align-items:center;min-height:70px;padding:22px 0;border-bottom:1px solid var(--line-strong);text-decoration:none;transition:transform .2s}
.row:hover{transform:translateY(-2px)}
.row strong{display:block;font-size:1.25rem;font-weight:650;line-height:1.25}
.row small{display:block;font-size:.94rem;color:var(--muted);margin-top:4px}
.detail-notes{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:clamp(20px,3.3vw,36px)}
.detail-notes ul{margin:14px 0 22px;padding-inline-start:20px;color:var(--muted)}
.detail-notes li + li{margin-top:8px}
.detail-links{display:flex;flex-wrap:wrap;column-gap:24px}
.related-services{margin-top:24px}
.index-grid{display:grid;gap:18px;margin-top:25px}
.index-grid ul{list-style:none;padding:0;margin-top:4px;display:flex;flex-wrap:wrap;gap:0 16px}
.index-grid a{display:inline-flex;align-items:center;min-height:44px}
.statement{font-size:clamp(1.5rem,3vw,2.8rem);line-height:1.15;letter-spacing:-.035em;max-width:37ch;margin-top:36px}
.faq-list,.area-list{border-top:1px solid var(--line-strong)}
.faq-list details,.area-detail{border-bottom:1px solid var(--line-strong)}
.faq-list summary{padding:17px 0;min-height:50px;cursor:pointer;font-weight:650}
.faq-list p,.area-detail p{color:var(--muted);padding-bottom:15px}
.area-detail h3{padding-top:12px;margin-bottom:6px}
.form-panel{align-self:center;background:var(--surface);border-radius:12px;padding:clamp(18px,3.5vw,40px)}
.form-panel h2{font-size:clamp(2rem,4vw,3.1rem)}
.form-panel .preview-note{font-size:.88rem;color:var(--muted);margin-top:.75rem}
form{display:grid;gap:13px;margin-top:16px}
.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:13px}
label{display:grid;gap:5px;font-size:.9rem;font-weight:650}
input,select,textarea{width:100%;border:1px solid #85858b;border-radius:6px;padding:9px 10px;background:var(--bg);color:var(--ink);font:inherit;font-size:1rem;font-weight:400;min-height:44px}
textarea{resize:vertical}
.hero form .button{margin-top:0;justify-self:start}
#form-status:empty{position:absolute}
#form-status{margin:0;font-size:.9rem}
.footer{background:var(--dark);color:var(--on-dark);padding:var(--section-space) 0 44px}
.footer-cta p{margin:16px 0;color:#dcdce0}
.footer-cta .text-link{color:var(--on-dark)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px;margin-top:42px;padding-top:29px;border-top:1px solid #47474e}
.footer-grid strong{font-weight:650;font-size:1.18rem}
.footer-grid h3{font-size:1.05rem;margin-bottom:6px}
.footer-grid p{color:#dcdce0;margin-top:7px}
.footer-grid .footer-credential{font-size:.875rem;font-weight:600}
.footer-grid a{display:flex;align-items:center;width:fit-content;min-height:36px;text-decoration:none}
.footer-grid a:hover{text-decoration:underline}
@media(max-width:980px){
  :root{--nav:88px}
  .hero--banner:not(:has(.photo--locksmith-hero))::after{background:linear-gradient(180deg,rgb(12 12 15/.91),rgb(12 12 15/.68))}
  .header-inner{grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:1fr;gap:8px}
  .brand{width:clamp(126px,35vw,162px);max-width:100%}
  .header-phone{font-size:1rem}
  .desktop-nav{display:none}
  .mobile-menu{display:block}
  .mobile-menu summary{cursor:pointer;min-width:44px;min-height:44px;display:grid;place-items:center;list-style:none}
  .mobile-menu summary .icon{width:20px;height:20px}
  .mobile-menu summary::-webkit-details-marker{display:none}
  .mobile-menu:not([open]) nav{display:none}
  .mobile-menu nav{position:absolute;inset:var(--nav) 0 auto;max-height:calc(100svh - var(--nav));overflow:auto;background:var(--bg);border-bottom:1px solid var(--line);display:grid;gap:0;padding:12px var(--gutter)}
}
@media(max-width:760px){
  .hero--banner{min-height:500px;padding:72px 0 56px;align-items:start}
  .hero--banner .hero-copy{align-items:center;text-align:center;margin-inline:auto}
  .hero--banner::after{background:linear-gradient(180deg,rgb(12 12 15/.95),rgb(12 12 15/.83) 47%,rgb(12 12 15/.19) 81%)}
  .hero--banner .photo img{object-position:67% center}
  .hero--banner .photo--locksmith-hero{inset:auto 0 0;height:70%;mask-image:linear-gradient(transparent,#000 22%)}
  .hero--banner .photo--locksmith-hero img{object-position:center 55%}
  h1{font-size:clamp(1.875rem,8.97vw,2.75rem)}
  h2{font-size:clamp(1.375rem,5.64vw,1.875rem)}
  .hero-desc{margin-top:16px;max-width:35ch}
  .hero .button{margin-top:21px}
  .hero--banner .button{align-self:flex-start;margin-top:32px}
  .hero--form{padding:32px 0 50px}
  .hero--form .split,.screen>.split{grid-template-columns:1fr;gap:24px}
  .hero form .button{justify-content:center}
  .screen--reverse .photo{order:0}
  .service-overview-title{text-align:left;padding:35px 0}
  .service-overview-title h2{margin-inline-start:20px}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 24px;padding-top:18px}
  .row{padding:17px 0;gap:8px}
  .bullet-list a{display:inline-flex;align-items:center;min-height:44px}
  .index-grid{grid-template-columns:1fr;gap:15px;margin-top:22px}
  .footer-grid{grid-template-columns:1fr 1fr;margin-top:26px}
  .footer-grid>div:first-child{grid-column:1/-1}
  .crumb a,.footer-grid a{min-width:44px}
  .footer-grid a{min-height:44px}
}
@media(max-width:385px){.form-pair{grid-template-columns:1fr}}
@media(max-width:360px){.hero--banner{min-height:max(500px,calc(100svh - var(--nav)))}}
@media(max-width:440px){
  .header-inner{width:calc(100% - 24px);gap:5px}
  .header-phone{gap:6px;padding-inline:4px 9px;font-family:var(--font-body)}
  .header-phone-mark{width:26px;height:26px}
}
@media(max-width:375px){
  .header-phone{gap:5px;padding-inline:4px 7px;font-size:.9rem}
  .header-phone-mark{width:23px;height:23px}
  .header-phone-mark .icon{width:14px;height:14px}
}
@media(max-width:480px){.service-grid{grid-template-columns:1fr;gap:0}.service-grid li+li{border-top:1px solid var(--line)}.service-card{padding:17px 0}}
@media(prefers-reduced-motion:reduce){.button,.row,.service-card{transition:none}.service-card:hover{transform:none}}
.section-copy .rows{margin-top:24px}
#service-index .index-grid{gap:15px}
#service-index .index-grid a{font-size:.91rem}
@media(max-width:760px){
  .section-copy .rows{margin-top:18px}
}