/* Beacon Locksmith — Dual trust palette (blue + amber) */
:root{
  --bg:#0f1115; --panel:#151823; --card:#181d2a; --ink:#e8ecf1; --muted:#9aa4b2;
  --brand-amber:#ffc34d; --brand-blue:#4cc2ff; --brand-blue-ink:#0e88c8; --border:#22283a;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg); color:var(--ink); line-height:1.6}
section[id]{scroll-margin-top:128px}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.center{text-align:center}.muted{color:var(--muted)}.tiny{font-size:12px}
.header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:rgba(15,17,21,.85);backdrop-filter:blur(8px);border-bottom:1px solid #161a24}
.brand{display:flex;gap:10px;align-items:center;color:var(--ink);font-weight:800;text-decoration:none}
.brand-logo{width:64px;height:64px;object-fit:contain;display:block;filter:drop-shadow(0 0 3px rgba(255,255,255,.85)) drop-shadow(0 0 8px rgba(255,255,255,.22))}
.nav{display:flex;gap:14px;align-items:center}
.nav a{color:var(--ink);text-decoration:none;padding:6px 10px;border-radius:8px}
.nav a:hover{background:#161b28}
.btn{display:inline-block;padding:10px 14px;border:1px solid #2b3450;border-radius:10px;color:var(--ink);text-decoration:none}
.btn.primary{background:var(--brand-amber);color:#2b1b00;border-color:transparent;font-weight:700;box-shadow:0 0 0 0 rgba(255,195,77,.0)}
.btn.primary:hover{background:#e0a92f;color:#2b1b00;box-shadow:0 0 0 4px rgba(255,195,77,.15)}
.hero{padding:118px 0 90px;position:relative;background:url('assets/hero.jpg') center/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55))}
.hero-grid{position:relative;z-index:1;display:grid;gap:24px}
.hero-copy h1{font-size:clamp(28px,4vw,48px);line-height:1.1;margin:0 0 12px}
.lead{font-size:clamp(16px,2vw,20px);color:var(--muted)}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.trust-points{display:flex;gap:12px;list-style:none;padding:0;margin:18px 0 0;flex-wrap:wrap;align-items:flex-start}
.trust-points li{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(8,12,20,.55);color:#d8e2ef;line-height:1.25;min-height:44px}
.trust-points li span:last-child{display:block}
.trust-live{border-color:rgba(34,197,94,.28);background:rgba(10,28,18,.62)}
.trust-badge{display:grid;place-items:center;width:20px;height:20px;min-width:20px;border-radius:50%;background:rgba(34,197,94,.16);flex:0 0 auto}
.trust-badge-live{background:rgba(34,197,94,.12)}
.live-dot{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18),0 0 12px rgba(34,197,94,.52);animation:livePulse 2.2s ease-in-out infinite}
.trust-check{color:#22c55e;font-size:12px;font-weight:800}
.trust-points li svg{display:block;flex:0 0 auto}
.trust-icon{display:grid;place-items:center;width:22px;height:22px;min-width:22px;border-radius:50%;background:rgba(76,194,255,.16);color:var(--brand-blue);font-size:13px;font-weight:800;flex:0 0 auto;align-self:center}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.30), 0 0 10px rgba(34,197,94,.38); }
  65% { box-shadow: 0 0 0 8px rgba(34,197,94,0), 0 0 16px rgba(34,197,94,.46); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0), 0 0 10px rgba(34,197,94,.38); }
}
@media(max-width:640px){.trust-points{flex-direction:column;align-items:stretch}.trust-points li{width:100%}}

.section{padding:64px 0}
.section.alt{background:var(--panel)}
.grid{display:grid;gap:16px}
.cards-2{grid-template-columns:repeat(1,1fr)}
.cards-3{grid-template-columns:repeat(1,1fr)}
.cards-4{grid-template-columns:repeat(1,1fr)}
@media(min-width:720px){.cards-2{grid-template-columns:repeat(2,1fr)}.cards-3{grid-template-columns:repeat(3,1fr)}.cards-4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:0 0 0 rgba(0,0,0,0)}
.card:hover{box-shadow:var(--shadow)}
.service .icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(180deg,#141c2d,#0c111c);border:1px solid rgba(255,195,77,.62);box-shadow:0 0 0 4px rgba(255,195,77,.14),0 12px 24px rgba(0,0,0,.2);margin-bottom:12px;position:relative}
.icon::before{content:"";position:absolute;inset:0;display:block;background:url('assets/icon-key.svg') center/24px no-repeat}
.icon-lock::before{background-image:url('assets/icon-lock.svg')}
.icon-car::before{background-image:url('assets/icon-car.svg')}
.icon-door::before{background-image:url('assets/icon-door.svg')}
.icon-key::before{background-image:url('assets/icon-key.svg')}
.icon-home::before {
  background-image: url('assets/icon-home.svg');
}
.step{position:relative;padding-top:12px}
.step-num{width:28px;height:28px;border-radius:50%;background:var(--brand-amber);color:#2b1b00;display:grid;place-items:center;font-weight:800;margin-bottom:8px}
.faq details{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:0;overflow:hidden}
.faq details+details{margin-top:10px}
.faq summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq .faq-a{padding:0 18px 16px;color:#c9d2df}
.contact-section .contact-grid{display:grid;gap:18px}
@media(min-width:900px){.contact-section .contact-grid{grid-template-columns:1.2fr 1fr}}
.contact-list{list-style:none;padding:0;margin:10px 0 0}
.contact-section .contact-list a,
.contact-section .contact-list a:visited{color:#f4c542 !important}
.contact-section .contact-list a:hover,
.contact-section .contact-list a:focus-visible{color:#ffe8a3 !important}
.form{display:grid;gap:14px;min-height:360px}
.form label{display:grid;gap:6px;font-weight:600}
.form input,.form textarea{background:#0b0f18;border:1px solid #1c2336;color:var(--ink);border-radius:10px;padding:12px;font:inherit}
.form.is-success{opacity:.72;filter:grayscale(.25)}
.form.is-success input,
.form.is-success textarea,
.form.is-success label{pointer-events:none}
#contact-form-submit{transition:transform .45s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease}
.btn.is-success{background:#22c55e !important;color:#fff !important;border-color:transparent;box-shadow:0 0 0 4px rgba(34,197,94,.22) !important}
.btn.is-flip{animation:buttonFlip .65s ease}
@keyframes buttonFlip {
  0%{transform:rotateX(0deg) scale(1)}
  45%{transform:rotateX(90deg) scale(.97)}
  100%{transform:rotateX(0deg) scale(1)}
}
.footer{padding:28px 0;border-top:1px solid #161a24}
.footer-grid{display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;text-align:center}
.footer-brand{display:flex;gap:10px;align-items:center;justify-content:center;font-weight:800}
.footer-logo{width:34px;height:34px;object-fit:contain;display:block;filter:drop-shadow(0 0 2px rgba(255,255,255,.75))}
.footer-nav{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.footer-nav a{color:var(--ink);text-decoration:none;padding:6px 8px;border-radius:8px}
.footer-nav a:hover{background:#161b28} 

/* Floating Call Button */
.call-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #e53935; /* Red */
  color: white;
  font-size: 18px;
  font-weight: bold;
  padding: 14px 22px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: background 0.3s ease;
  z-index: 9999;
  display: block;
}

.call-button:hover {
  background-color: #c62828; /* Darker red */
}
/* Call Now button in hero section */
.btn.primary[href^="tel:"] {
  background-color: #e53935;
  color: #fff;
  border: none;
  box-shadow: none;
}

.btn.primary[href^="tel:"]:hover {
  background-color: #c62828;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(229,57,53,.18);
}
/* Pulse animation */
@keyframes pulse {
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(229,57,53,.45); }
  60%  { transform: scale(1.05);box-shadow: 0 0 0 14px rgba(229,57,53,0); }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(229,57,53,0); }
}

/* Apply pulse ONLY to floating button */
.call-button {
  animation: pulse 2s ease-in-out infinite;
}
.call-button.is-hidden{opacity:0;pointer-events:none;transform:translateY(14px)}
.call-bar{display:none}
@media (min-width:721px){
  .call-button{display:block}
  .call-bar{display:none !important}
}
/* ===== Mobile header: hamburger + slide-down menu ===== */

/* Hamburger button */
.hamburger{
  display:none;                /* shown on mobile via media query */
  width:40px;height:40px;
  margin-left:auto;
  border:0;background:transparent;padding:0;
  cursor:pointer;
}
.hamburger span{
  display:block;height:3px;width:28px;margin:7px auto;
  background:var(--ink,#fff);
  border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}

/* Default (desktop) – keep links inline */
.nav .nav-links{ display:flex; gap:18px; align-items:center; }

/* -------- Mobile layout -------- */
@media (max-width:720px){
  /* show hamburger, hide links by default */
  .hamburger{ display:inline-block; }
  .call-button{display:none !important}
  .call-bar{position:fixed;left:14px;right:14px;bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-radius:22px;background:#e53935;color:#fff;text-decoration:none;font-weight:800;font-size:17px;box-shadow:0 14px 28px rgba(0,0,0,.35);z-index:10000;opacity:0;transform:translateY(120%);pointer-events:none;transition:transform .45s ease, opacity .3s ease}
  .call-bar.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
  .call-bar.is-hidden{opacity:0;transform:translateY(120%);pointer-events:none}
  .call-bar span:last-child{font-size:15px;font-weight:700;opacity:.95}
  .nav .nav-links{
    position:fixed; left:0; right:0; top:64px;   /* below your header */
    display:none; flex-direction:column; gap:6px;
    padding:14px 16px;
    background:#0e1624;                          /* match header color */
    border-top:1px solid rgba(255,255,255,.06);
    z-index:9998;
    transform:translateY(-10px); opacity:0;
    transition:transform .2s ease, opacity .2s ease;
  }
  .nav .nav-links a{
    display:block; width:100%;
    padding:12px 10px; border-radius:8px; text-decoration:none;
  }
  .nav .nav-links a:hover{ background:#161b28; }

  /* Open state (toggled by JS) */
  .menu-open .nav .nav-links{
    display:flex;
    transform:translateY(0); opacity:1;
  }

  /* Turn hamburger into X when open */
  .menu-open .hamburger span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
  .menu-open .hamburger span:nth-child(2){ opacity:0; }
  .menu-open .hamburger span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

  /* Make header a bit tighter on phones (optional) */
  .header{ padding:10px 14px; }
  .brand-logo{width:52px;height:52px}
  .brand span{ font-size:16px; }
  .hero{padding:102px 0 82px}
  section[id]{scroll-margin-top:90px}
}
.residential-card {
  grid-column: 1 / -1;         /* full width */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  margin-top: 20px;
}
@media(min-width:720px){
  .dealership-card-service{grid-column:1 / -1}
}
.photo-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  margin: 48px 0;
}

.photo-section__image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

.photo-section__text h2 {
  margin-top: 0;
  color: var(--text-light);
}

.photo-section__text p {
  margin: 16px 0;
  line-height: 1.5;
}

.dealership-section{padding-top:28px}
.dealership-card{padding:34px;background:linear-gradient(135deg,rgba(255,195,77,.12),rgba(24,29,42,.98));border-color:rgba(255,195,77,.34);text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.eyebrow{margin:0 0 8px;color:var(--brand-amber);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.dealership-card h2{margin:0 0 10px;line-height:1.15;font-size:clamp(28px,4vw,40px)}
.dealership-copy{max-width:760px;margin:0 auto 24px}
.dealership-grid{margin:26px 0}
.dealership-grid > div{padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(10,14,22,.42)}
.dealership-grid h3{margin:0 0 8px}
.dealership-grid p{margin:0;color:#d7deea}
.dealership-card .btn{margin-top:4px}
.service-area-section{padding-top:22px;padding-bottom:22px}
.service-area-copy{max-width:860px;margin:0 auto;color:#d7deea}

.photo-section .btn.secondary {
  /* style link button similar to others but maybe softer color */
}

/* For larger screens: image + text side by side */
/* --- Photo + text sections (Automotive & Residential) --- */
.photo-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
  margin: 48px 0;
}

/* image */
.photo-section__image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

/* text */
.photo-section__text h2 {
  margin-top: 0;
  color: var(--text-light);
}
.photo-section__text p {
  margin: 16px 0;
  line-height: 1.5;
}

/* checklist (gold checks on all viewports) */
.photo-section .checklist {
  list-style: none;
  padding: 0;
  margin: 16px 0 0 0;
}
.photo-section .checklist li {
  position: relative;
  padding-left: 30px;
  margin: 10px 0;
  line-height: 1.6;
}
.photo-section .checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.1em;
  color: #f4c542 !important; /* gold */
  font-weight: 800;
}

/* Desktop layout: image + text side-by-side */
@media (min-width: 720px) {
  /* default two columns (Automotive, etc.) */
  .photo-section {
    grid-template-columns: 1.3fr 1fr; /* image a bit larger */
    gap: 36px;
  }

  /* Residential: keep LTR text but move image to the right on desktop */
  .residential-work {
    display: flex;               /* override grid for this one section */
    align-items: center;
    gap: 40px;
  }
  .residential-work .photo-section__image {
    order: 2;                    /* image on the right */
    flex: 1;
  }
  .residential-work .photo-section__text {
    order: 1;                    /* text on the left */
    flex: 1;
    text-align: left;
  }
}
/* ✅ Desktop fix: keep residential image on right, text on left */
@media (min-width: 720px) {
  .residential-work {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px; /* spacing between image and text */
  }
  .residential-work .photo-section__image {
    order: 2; /* image on the right */
    flex: 1;
  }
  .residential-work .photo-section__text {
    order: 1; /* text on the left */
    flex: 1;
    text-align: left;
  }
}

/* ✅ Mobile polish: push text/checks in a bit so they don’t touch the edges */
@media (max-width: 719px) {
  .photo-section__text {
    padding: 0 16px; /* add left/right breathing room */
  }
  .photo-section .checklist {
    padding-left: 20px; /* make checkmarks align nicely */
  }
}
/* --- Desktop fix specifically for the Residential block --- */
@media (min-width: 720px) {
  .residential-work {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;                     /* spacing between text and image */
  }

  .residential-work .photo-section__image {
    grid-column: 2;                /* image on the right */
  }

  .residential-work .photo-section__text {
    grid-column: 1;                /* text on the left */
    text-align: left;
    padding-left: 32px;            /* push away from left edge */
    max-width: 560px;              /* keep readable width */
  }
}
.photo-section__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* headings + bullets stay left */
}
.photo-section__text .btn {
  align-self: center;        /* button centered under the text */
  margin-top: 16px;
}
/* Align Call Now button with checklist text on all sizes */
:root { --check-indent: 30px; }               /* same indent as checklist */

.photo-section .checklist li {                 /* already present, kept in sync */
  padding-left: var(--check-indent);
}

/* Slightly larger indent on wider screens */
@media (min-width: 900px) {
  :root { --check-indent: 36px; }
}
.photo-section__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* headings + bullets stay left */
}
.photo-section__text .btn{
  align-self: center;      /* centers inside the text column */
  margin: 16px auto 0;     /* auto left/right centers; small top gap */
}
.photo-section__text {
  display: flex;
  flex-direction: column;
  align-items: center;    /* <-- centers text + bullets as a group */
  text-align: center;     /* <-- aligns the text inside */
  max-width: 560px;       /* keep it from going too wide */
  margin: 0 auto;         /* centers the whole block in its column */
}
/* --- Text/bullets/button alignment refinements --- */
.photo-section__text {
  /* keep the column left-aligned so list can sit flush left */
  align-items: flex-start;
}

/* center only the heading + paragraph */
.photo-section__text h2,
.photo-section__text p {
  text-align: center;
  align-self: center;   /* center within the text column */
  width: 100%;
}

/* bullets stay left and keep the gold check spacing */
.photo-section__text .checklist {
  align-self: flex-start;         /* keep the list on the left */
  padding-left: var(--check-indent, 30px);
  margin: 0;
}

/* center the Call Now button under the text/bullets */
.photo-section__text .btn {
  align-self: center;
  margin: 16px auto 0;
}
/* Center the whole text column on desktop, keep list tidy */
@media (min-width: 900px) {
  .photo-section__text {
    align-items: center;      /* center the column */
    text-align: center;       /* center headings + paragraph */
    max-width: 620px;         /* comfortable measure */
    margin: 0 auto;           /* center within its grid cell */
  }

  .photo-section__text .checklist {
    padding-left: 0;          /* no extra left indent on the UL */
  }

  .photo-section__text .checklist li {
    padding-left: 28px;       /* space for the check icon */
    text-align: left;         /* each line stays tidy */
  }

  .photo-section__text .btn {
    align-self: center;       /* button stays centered under list */
    margin: 16px auto 0;
  }
}

/* ensure gold checks everywhere (mobile & desktop) */
.photo-section .checklist li::before {
  color: #f4c542 !important;
}
/* === Unified layout overrides (mobile-first) === */
.photo-section__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

.photo-section .checklist {
  list-style: none;
  padding: 0;
  margin: 12px auto 0;
  display: inline-block;
  text-align: left;
}

.photo-section .checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0;
  line-height: 1.6;
}

.photo-section .checklist li::before {
  content: "✓";
  flex: 0 0 18px;
  width: 18px;
  color: #f4c542;
  font-weight: 800;
  text-align: center;
}

.photo-section__text .btn {
  align-self: center;
  margin: 16px auto 0;
}

@media (min-width: 900px) {
  .photo-section {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
  }

  .residential-work .photo-section__image {
    grid-column: 2;
  }

  .residential-work .photo-section__text {
    grid-column: 1;
    align-items: center;
    text-align: center;
    padding-left: 0;
    max-width: 680px;
    margin: 0 auto;
  }
}