/* ==========================================================================
   IK7 Locksmith — Design System
   Palette:  Navy #0B1E3B / #12294D   Gold #C6A24D / #E8D18E
   Type:     Display — 'Fraunces' (serif, cut like a key blank)
             Body/UI — 'Inter'
   Signature: the "ward line" — a thin gold hairline that traces a lock
   ward-cut silhouette through the hero and section dividers.
   ========================================================================== */

:root{
  --navy-900:#12308A;
  --navy-800:#1C49CA;
  --navy-700:#2C5FE0;
  --navy-600:#4574EC;
  --gold-500:#F0B429;
  --gold-400:#F5C452;
  --gold-300:#F9D67E;
  --orange-500:#F2601C;
  --orange-400:#FF7A33;
  --sky-600:#2C5FE0;
  --sky-500:#4574EC;
  --sky-400:#7B9DF2;
  --sky-100:#EAF0FD;
  --ivory:#F7F5F0;
  --paper:#FFFFFF;
  --ink:#151B26;
  --ink-soft:#4A5568;
  --line:#E4E1D8;
  --danger:#B3402A;
  --success:#3A6B4C;

  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:14px;

  --shadow-sm:0 1px 3px rgba(8,20,38,.08);
  --shadow-md:0 8px 24px rgba(8,20,38,.12);
  --shadow-lg:0 20px 48px rgba(8,20,38,.18);

  --container:1200px;
  --gutter:clamp(1.25rem, 4vw, 3rem);
}

*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden;
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100vw;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--font-display);margin:0 0 .5em;line-height:1.15;font-weight:600;color:var(--navy-800)}
h1{font-size:clamp(2.2rem,5.2vw,3.6rem);letter-spacing:-.015em;line-height:1.1}
h2{font-size:clamp(1.75rem,3.8vw,2.6rem);letter-spacing:-.015em}
h3{font-size:clamp(1.2rem,2.4vw,1.55rem)}
p{margin:0 0 1em;color:var(--ink-soft);line-height:1.65}
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
section{padding-block:clamp(3.5rem,9vw,7.5rem)}

/* Focus visibility (accessibility) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--gold-500);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
.skip-link{
  position:absolute;left:-999px;top:0;background:var(--gold-500);color:var(--navy-900);
  padding:.75rem 1.25rem;z-index:1000;border-radius:0 0 8px 0;font-weight:600;
}
.skip-link:focus{left:0}

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-body);font-weight:700;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:#8A5A00;margin-bottom:.75rem;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold-500)}
.hero .eyebrow{color:#fff}
.hero .eyebrow::before{background:#fff}

/* Homepage hero location label - brand orange accent, scoped to this one use */
.hero-location-label{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-body);font-weight:700;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;margin-bottom:1.1rem;
}
.hero-location-label::before{content:"";width:26px;height:2px;background:var(--orange-500);flex:none}
@media(max-width:640px){
  .hero-location-label{font-size:.68rem;justify-content:flex-start;text-align:left}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.9rem 1.6rem;border-radius:var(--radius-md);
  font-family:var(--font-body);font-weight:700;font-size:.98rem;
  border:1px solid transparent;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold-500);color:var(--navy-900);box-shadow:var(--shadow-sm)}
.btn-gold:hover{background:var(--gold-400);box-shadow:var(--shadow-md)}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn-outline:hover{border-color:var(--gold-400);color:var(--gold-300)}
.btn-navy{background:var(--navy-800);color:#fff}
.btn-navy:hover{background:var(--navy-700)}
.btn-sky{background:var(--sky-500);color:#fff}
.btn-sky:hover{background:var(--sky-600)}
.btn-block{width:100%}
@media(max-width:520px){.btn-block-mobile{width:100%}}
.btn-lg{padding:1.1rem 2rem;font-size:1.05rem}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:200;background:rgba(18,48,138,.97);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid rgba(198,162,77,.25);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;min-height:76px;padding-block:.55rem;gap:.75rem;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:.65rem;color:#fff;font-family:var(--font-display);font-size:1.3rem;font-weight:600;flex-shrink:1;min-width:0}
.brand .mark{width:34px;height:34px;flex:none}
.brand small{display:block;font-family:var(--font-body);font-size:.62rem;letter-spacing:.16em;color:var(--gold-300);font-weight:700;text-transform:uppercase;white-space:nowrap}

.main-nav{display:none}
.main-nav ul{display:flex;align-items:center;gap:2rem}
.main-nav a{color:#EDEBE3;font-weight:600;font-size:.95rem;position:relative;padding:.4rem 0}
.main-nav a:hover,.main-nav a.active{color:var(--gold-300)}
.dropdown{
  display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:var(--paper);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  min-width:220px;padding:1.4rem .6rem .6rem;margin-top:0;border:1px solid var(--line);
}
.dropdown a{color:var(--ink);display:block;padding:.55rem .75rem;border-radius:6px;font-size:.9rem;font-weight:500}
.dropdown a:hover{background:var(--ivory);color:var(--navy-800)}
.has-dropdown{position:relative;padding-bottom:1rem;margin-bottom:-1rem}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{display:block}

.header-cta{display:flex;align-items:center;gap:.9rem;flex-shrink:0}
.header-call{display:none;align-items:center;gap:.5rem;color:#fff;font-weight:700}
.header-call svg{color:var(--gold-400)}

.nav-toggle{
  display:inline-flex;background:none;border:none;color:#fff;padding:.4rem;cursor:pointer;flex:none;
}

/* Narrow phones (iPhone SE/mini and similar, ~375-390px): tighten header
   sizing so brand text, Call Now button, and hamburger all fit on one line
   without overflow or clipping. */
@media(max-width:479px){
  .site-header .container{gap:.65rem}
  .brand{font-size:1.18rem;gap:.55rem}
  .brand .mark{width:31px;height:31px}
  .brand small{font-size:.6rem;letter-spacing:.08em}
  .header-cta{gap:.4rem}
  .header-cta .btn{padding:.55rem .8rem;font-size:.85rem}
  .nav-toggle{padding:.2rem}
  .nav-toggle svg{width:22px;height:22px}
}
.mobile-nav{
  display:none;position:fixed;inset:76px 0 0 0;background:var(--navy-900);z-index:190;
  overflow-y:auto;padding:1.5rem var(--gutter) 3rem;
}
.mobile-nav.open{display:block}
.mobile-nav ul{display:flex;flex-direction:column;gap:.25rem}
.mobile-nav a{display:block;padding:.9rem .25rem;color:#fff;font-weight:600;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-nav .sub{padding-left:1rem;display:flex;flex-direction:column}
.mobile-nav .sub a{color:#C9C6BC;font-weight:500;font-size:.95rem;padding:.65rem .25rem;border-bottom:none}
.mobile-group-label{color:var(--gold-400);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;margin:1.4rem 0 .3rem;font-weight:700}

@media (min-width:960px){
  .main-nav{display:block}
  .header-call{display:flex}
  .nav-toggle{display:none}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;background:linear-gradient(135deg,#0F5FBF,#1677D2 55%,#237CB8);
  color:#fff;overflow:hidden;padding-block:clamp(3.5rem,9vw,7rem);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:radial-gradient(circle at 85% 20%, rgba(255,255,255,.18), transparent 45%);
}
.hero-grid{display:grid;gap:2.5rem;position:relative;z-index:1}
.hero h1{color:#fff}
.hero .lead{color:#fff;font-size:1.1rem;max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.75rem}
.hero-badges{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:2.25rem;color:#fff;font-size:.88rem}
.hero-badges strong{color:#fff;display:block;font-family:var(--font-display);font-size:1.4rem}
.ward-graphic{width:100%;max-width:420px;margin-inline:auto}

@media (min-width:900px){
  .hero-grid{grid-template-columns:1.05fr .95fr;align-items:center}
}

/* ---------- Section headers ---------- */
.section-head{max-width:640px;margin-bottom:3.25rem}
.section-head.center{margin-inline:auto;text-align:center}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:1.75rem}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.9rem;transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.card .icon{display:inline-flex;width:44px;height:44px;color:var(--gold-500);margin-bottom:1rem}
.card .icon svg{width:100%;height:100%}
.card h3{margin-bottom:.5rem}
.card p{margin-bottom:.75rem;font-size:.95rem}
.card a.card-link{font-weight:700;color:var(--sky-600);font-size:.9rem}
.card a.card-link:hover{color:var(--gold-500)}

.card-dark{background:var(--navy-800);border-color:var(--navy-600);color:#fff}
.card-dark h3{color:#fff}
.card-dark p{color:#C9C6BC}
.card-dark .icon{color:var(--gold-400)}

/* Service cards with real photos (4:3, object-fit cover, clickable) */
.service-card{display:block;padding:0;overflow:hidden;position:relative;box-sizing:border-box}
.service-card picture{display:block;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:10px 10px 0 0;background:var(--ivory)}
.service-card-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.service-card h3,.service-card p,.service-card .card-link{padding-inline:2.1rem}
.service-card h3{margin-top:1.4rem}
.service-card .card-link{display:block;padding-bottom:2.1rem}
.service-card:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px}
@media(min-width:601px){
  .service-card-img{transition:transform .3s ease}
  .service-card:hover .service-card-img{transform:scale(1.05)}
}

/* Homepage "Our Most Requested Services" grid.
   Scoped to this section only; does not affect .grid-3 used elsewhere on the site. */
#services .container{box-sizing:border-box}
.service-cards-grid{
  display:grid;
  gap:1.75rem;
  grid-template-columns:repeat(4,1fr);   /* desktop default: 4 columns */
  width:100%;
}
@media(max-width:959px){
  .service-cards-grid{grid-template-columns:repeat(2,1fr)}   /* tablet: 2 columns */
}
@media(max-width:600px){
  #services .container{
    width:100%;
    max-width:100%;
    padding-left:16px;
    padding-right:16px;
    box-sizing:border-box;
  }
  .service-cards-grid{
    grid-template-columns:1fr;   /* mobile: exactly 1 column */
    width:100%;
    max-width:none;
  }
  .service-cards-grid .service-card,
  .service-cards-grid .service-card.card{
    width:100%;
    max-width:none;
    min-width:0;
  }
  .service-cards-grid .service-card-img{
    transform:none !important;
  }
}


/* ---------- Section variants ---------- */
.section-ivory{background:linear-gradient(180deg,var(--ivory),var(--sky-100) 140%)}
.section-navy{background:var(--navy-800);color:#fff}
.section-navy h2,.section-navy h3{color:#fff}
.section-navy p{color:#C9C6BC}

/* ---------- Emergency banner ---------- */
.emergency{
  background:linear-gradient(135deg,var(--navy-900),var(--navy-800));
  border-top:1px solid rgba(198,162,77,.35);border-bottom:1px solid rgba(198,162,77,.35);
  color:#fff;
}
.emergency-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.emergency h2{color:#fff;display:flex;align-items:center;gap:.6rem}
.pulse-dot{width:10px;height:10px;border-radius:50%;background:var(--gold-400);display:inline-block;animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(198,162,77,.55)}70%{box-shadow:0 0 0 12px rgba(198,162,77,0)}100%{box-shadow:0 0 0 0 rgba(198,162,77,0)}}

/* ---------- Why choose us ---------- */
.stat{text-align:center}
.stat strong{display:block;font-family:var(--font-display);font-size:clamp(2rem,4vw,2.6rem);color:var(--navy-800)}
.stat span{color:var(--ink-soft);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}

/* ---------- Reviews ---------- */
.review{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.75rem}
.stars{color:var(--gold-500);letter-spacing:.15em;margin-bottom:.75rem;font-size:1rem}
.review p{color:var(--ink);font-style:italic}
.review-author{font-weight:700;color:var(--navy-800);font-style:normal;display:block;margin-top:.75rem;font-size:.9rem}

/* ---------- Service areas list ---------- */
.area-pill{
  display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:1rem 1.2rem;font-weight:700;color:var(--navy-800);transition:.15s ease;
}
.area-pill:hover{border-color:var(--sky-500);background:var(--sky-100)}
.area-pill span{display:block;font-weight:400;color:var(--ink-soft);font-size:.82rem;margin-top:.15rem}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  cursor:pointer;padding:1.25rem 0;font-weight:700;color:var(--navy-800);
  display:flex;justify-content:space-between;align-items:center;list-style:none;gap:1rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.5rem;color:var(--gold-500);flex:none;line-height:1}
.faq-item[open] summary::after{content:"–"}
.faq-item p{padding-bottom:1.25rem}

/* ---------- Forms ---------- */
.form-grid{display:grid;gap:1rem}
@media(min-width:640px){.form-grid.two{grid-template-columns:1fr 1fr}}
label{display:block;font-weight:600;font-size:.85rem;margin-bottom:.4rem;color:var(--navy-800)}
input,select,textarea{
  width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:.95rem;background:#fff;color:var(--ink);
}
input:focus,select:focus,textarea:focus{border-color:var(--gold-500)}
.field{margin-bottom:1rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-900);color:#C9C6BC;padding-block:3.5rem 1.5rem}
.footer-grid{display:grid;gap:2.5rem;grid-template-columns:1fr}
.footer-col h4{color:#fff;font-family:var(--font-body);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem}
.footer-col a{display:block;color:#C9C6BC;padding:.35rem 0;font-size:.92rem}
.footer-col a:hover{color:var(--gold-400)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:2.5rem;padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.8rem}
@media(min-width:760px){.footer-grid{grid-template-columns:1.2fr 1fr 1fr 1fr 1fr}}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:.82rem;color:var(--ink-soft);padding-block:1rem}
.breadcrumb a{color:var(--sky-600);font-weight:600}
.breadcrumb a:hover{color:var(--gold-500)}

/* ---------- Sticky mobile call bar ---------- */
.sticky-call{
  position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--gold-500);
  display:flex;box-shadow:0 -4px 16px rgba(0,0,0,.15);
}
.sticky-call a{
  flex:1;text-align:center;padding:.95rem;font-weight:800;color:var(--navy-900);
  display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.95rem;
}
@media(min-width:960px){.sticky-call{display:none}}
body{padding-bottom:60px}
@media(min-width:960px){body{padding-bottom:0}}

/* ---------- Trust strip (homepage, below emergency banner) ---------- */
.trust-strip{background:var(--paper);border-bottom:1px solid var(--line);padding-block:1.6rem}
.trust-strip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem 1rem}
.trust-item{display:flex;align-items:center;gap:.7rem;font-weight:700;color:var(--navy-800);font-size:.92rem}
.trust-item .icon{display:inline-flex;width:26px;height:26px;color:var(--orange-500);flex:none}
.trust-item .icon svg{width:100%;height:100%}
@media(min-width:760px){
  .trust-strip-grid{grid-template-columns:repeat(4,1fr)}
  .trust-item{justify-content:center;font-size:.98rem}
}

/* ---------- Business hours ---------- */
.hours-table{width:100%;border-collapse:collapse;font-size:.92rem}
.hours-table tr{border-bottom:1px solid var(--line)}
.hours-table tr:last-child{border-bottom:none}
.hours-table th,.hours-table td{padding:.55rem 0;text-align:left;font-weight:400;color:var(--ink-soft)}
.hours-table th{font-weight:600;color:var(--navy-800);width:45%}
.hours-table td{text-align:right}
.footer-col .hours-table th,.footer-col .hours-table td{color:#C9C6BC}
.footer-col .hours-table th{color:#fff}
.footer-col .hours-table tr{border-bottom:1px solid rgba(255,255,255,.12)}

/* ---------- Utility ---------- */
.text-center{text-align:center}
.mt-0{margin-top:0}
.lazy-img{background:var(--ivory)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}