:root{--navy:#101a87;--navy2:#0a166e;--gold:#a9e5f9;--paper:#f1f9ff;--ink:#101b62;--muted:#4b5b7b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);line-height:1.6}a{color:inherit}.wrap{width:min(1120px,calc(100% - 40px));margin:auto}.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:white;padding:10px;z-index:10}.site-header{background:var(--navy);color:white}.header-inner{display:flex;align-items:center;gap:28px;min-height:88px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-size:21px;font-weight:900;letter-spacing:1px;line-height:1}.brand small{display:block;font-size:10px;letter-spacing:3px;margin-top:6px}.brand-mark{display:grid;place-items:center;background:var(--gold);color:var(--navy);width:43px;height:43px;border-radius:9px;font-size:29px}.header-inner nav{display:flex;gap:17px;margin-left:auto}.header-inner nav a{text-decoration:none;font-size:13px;color:#d8e1eb}.header-inner nav a:hover,.header-inner nav a:focus{color:var(--gold)}.header-call{background:var(--gold);padding:12px 16px;border-radius:6px;text-decoration:none;color:var(--navy);font-size:13px;font-weight:bold;white-space:nowrap}.hero{background:radial-gradient(circle at 85% 15%,#2855bb 0%,transparent 40%),linear-gradient(135deg,#0b1479,#1644a8);color:white;padding:104px 0 95px}.hero-content{max-width:1120px}.eyebrow{display:block;color:var(--gold);font-weight:800;font-size:12px;letter-spacing:2px;margin-bottom:20px}.eyebrow.dark{color:#1654a5}.hero h1{font-size:clamp(43px,6vw,76px);line-height:1.08;letter-spacing:-2px;margin:0 0 24px;max-width:820px}.hero h1 em{font-style:normal;color:var(--gold)}.hero p{font-size:19px;max-width:610px;color:#d4dfeb}.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}.btn{display:inline-block;border-radius:6px;padding:15px 24px;font-weight:800;text-decoration:none;text-align:center}.primary{background:var(--gold);color:var(--navy)}.outline{border:1px solid #8191a7;color:white}.secondary{background:var(--navy);color:white}.hero-points{display:flex;flex-wrap:wrap;gap:20px;margin-top:45px;font-size:13px;color:#e1e9f2}.intro{padding:78px 0;display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.intro h2,.services h2,.promise h2,.contact h2{font-size:clamp(30px,4vw,43px);line-height:1.17;letter-spacing:-1px;margin:0}.intro p{color:var(--muted);font-size:18px}.services{background:var(--paper);padding:75px 0 90px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}.card{background:white;border:1px solid #e1e7ef;border-radius:12px;padding:27px 23px;box-shadow:0 8px 24px #102d840e}.symbol{width:46px;height:46px;display:grid;place-items:center;background:#e0f5ff;color:#1649a2;border-radius:10px;font-size:24px}.card h3{font-size:19px;margin:24px 0 8px}.card p{font-size:14px;color:var(--muted);margin:0}.promise{background:var(--navy2);color:white;padding:76px 0}.promise-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px}.promise p{color:#d3ddea}.promise ul{list-style:none;margin:0;padding:0}.promise li{padding:12px 0 12px 29px;position:relative;border-bottom:1px solid #ffffff20}.promise li:before{content:'✓';position:absolute;left:0;color:var(--gold);font-weight:bold}.fineprint{font-size:12px;color:#b9c5d3;margin-top:22px}.contact{text-align:center;padding:90px 0}.contact>p{max-width:610px;margin:20px auto;color:var(--muted)}.contact .center{justify-content:center}.contact p a{color:#134cbb}footer{background:#081254;color:#dce5ee;padding:30px 0}.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:15px;align-items:center;font-size:13px}.mobile-call{display:none}@media(max-width:950px){.header-inner{flex-wrap:wrap;padding:18px 0}.header-inner nav{order:3;width:100%;overflow-x:auto;margin:0;padding-top:12px}.header-call{margin-left:auto}.cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.wrap{width:min(100% - 30px,1120px)}.header-inner nav{gap:18px}.header-call{display:none}.hero{padding:76px 0}.hero p{font-size:17px}.intro,.promise-grid{grid-template-columns:1fr;gap:18px}.intro{padding:58px 0}.cards{grid-template-columns:1fr}.services,.promise{padding:58px 0}.contact{padding:65px 0 100px}.hero-points{gap:12px;flex-direction:column}.mobile-call{display:block;position:fixed;bottom:0;left:0;right:0;background:var(--gold);text-align:center;z-index:5;box-shadow:0 -3px 14px #0003}.mobile-call a{display:block;padding:14px;color:var(--navy);font-weight:900;text-decoration:none}}

/* Original Securo logo and brand-blue refinements */
.site-header{background:#fff;color:var(--ink);border-bottom:1px solid #d9eaf7;box-shadow:0 3px 16px #0b188510}
.header-inner{min-height:104px;gap:22px}
.brand{flex:0 0 auto;line-height:0}
.brand img{display:block;width:205px;max-width:100%;height:auto;object-fit:contain}
.header-inner nav a{color:#172b75;font-weight:700}
.header-inner nav a:hover,.header-inner nav a:focus{color:#1762c9}
.header-call,.btn.primary,.mobile-call{background:#101a87;color:#fff}
.header-call:hover,.btn.primary:hover,.mobile-call:hover{background:#1a48bd}
.hero{background:radial-gradient(circle at 85% 15%,#3767cf 0%,transparent 40%),linear-gradient(135deg,#0b1479,#1644a8)}
.hero h1 em{color:#b5ecff}.eyebrow{color:#b5ecff}.eyebrow.dark{color:#1557bb}
.hero-points{color:#eaf6ff}.symbol{background:#e0f5ff;color:#1649a2}
.promise li:before{color:#a9e5f9}.secondary{background:#122b91}
:focus-visible{outline:3px solid #4e9bff;outline-offset:3px}
@media(max-width:950px){.brand img{width:185px}}
@media(max-width:650px){.header-inner{gap:8px}.brand img{width:175px}.header-inner nav{padding-bottom:6px}.mobile-call a{color:white}}

/* White header with the original, unaltered Securo logo */
.site-header{background:#fff}
.brand img{height:auto;object-fit:contain}

/* Town pages */
.local-section{padding:65px 0}.local-section h2{font-size:clamp(28px,4vw,40px);line-height:1.2}.local-section p{max-width:780px;color:var(--muted)}.town-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.town-links a{background:#eaf6ff;border:1px solid #c6e3fa;padding:9px 14px;border-radius:7px;text-decoration:none;color:#102b87;font-weight:700}.town-links a:hover{text-decoration:underline}.local-note{background:#eef8ff;padding:18px 22px;border-left:4px solid #1644a8;border-radius:6px}.contact .actions{justify-content:center}
/* Securo homepage headline refinement */
.hero h1 {
    font-size: clamp(38px, 4.5vw, 64px);
    line-height: 1.12;
    letter-spacing: -1.5px;
}

@media (max-width: 950px) {
    .hero h1 {
        font-size: clamp(36px, 5vw, 52px);
    }
}

@media (max-width: 650px) {
    .hero h1 {
        font-size: 39px;
        letter-spacing: -1px;
    }
}
/* SECURO LOCKSMITHS - MOBILE IMPROVEMENTS */

@media (max-width: 650px) {

    /* Compact white header */
    .site-header {
        background: #ffffff;
    }

    .header-inner {
        padding: 12px 0;
        gap: 10px;
        min-height: auto;
    }

    /* Keep original logo */
    .brand img {
        width: 155px;
        height: auto;
    }

    /* Mobile navigation */
    .header-inner nav {
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 0 4px;
        overflow-x: auto;
    }

    .header-inner nav a {
        font-size: 12px;
        white-space: nowrap;
    }

    /* Homepage hero */
    .hero {
        padding: 48px 0 55px;
    }

    .hero h1 {
        font-size: 36px !important;
        line-height: 1.15;
        letter-spacing: -1px;
    }

    .hero p {
        font-size: 16px;
        line-height: 1.65;
    }

    .eyebrow {
        font-size: 10px;
        letter-spacing: 1px;
    }

    /* Easy-to-tap buttons */
    .hero .actions {
        flex-direction: column;
        gap: 12px;
    }

    .hero .actions .btn {
        width: 100%;
        padding: 16px;
    }

    /* Service cards */
    .cards {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .card {
        padding: 22px;
    }

    /* Contact section */
    .contact {
        padding-bottom: 110px;
    }

    /* Fixed telephone button */
    .mobile-call {
        display: block;
        background: #101a87;
        z-index: 100;
    }

       .mobile-call a {
        color: #ffffff;
        font-size: 17px;
        padding: 15px;
    }
}

/* SECURO - MOBILE HEADER AND HEADLINE REFINEMENT */

@media (max-width: 650px) {

    .header-inner {
        padding-top: 8px;
        padding-bottom: 8px;
        row-gap: 0;
    }

    .brand img {
        width: 145px;
    }

    .header-inner nav {
        padding-top: 0;
        padding-bottom: 4px;
        margin-top: 0;
    }

    .hero {
        padding-top: 38px;
    }

    .hero h1 {
        font-size: 30px !important;
        line-height: 1.18;
        letter-spacing: -0.8px;
    }

    .hero p {
        font-size: 16px;
        line-height: 1.55;
    }
}

/* SECURO - FINAL MOBILE LAYOUT FIX */
@media (max-width: 650px) {

  /* Compact white header */
  .site-header .header-inner {
    min-height: 0;
    padding: 10px 0 12px;
    gap: 0;
    row-gap: 0;
    align-items: flex-start;
  }

  /* Keep the original key logo */
  .site-header .brand img {
    width: 165px;
    height: auto;
  }

  /* Bring navigation closer to logo */
  .site-header .header-inner nav {
    order: 3;
    width: 100%;
    margin: 4px 0 0;
    padding: 0;
    gap: 12px;
    justify-content: space-between;
  }

  .site-header .header-inner nav a {
    font-size: 12px;
    white-space: nowrap;
  }

  /* Reduce space above headline */
  .hero {
    padding: 30px 0 45px;
  }

  .hero .eyebrow {
    font-size: 10px;
    letter-spacing: .6px;
    margin-bottom: 15px;
  }

  /* More balanced mobile headline */
  .hero h1 {
    font-size: 30px !important;
    line-height: 1.16;
    letter-spacing: -.7px;
    margin-bottom: 20px;
  }

  .hero p {
    font-size: 16px;
    line-height: 1.5;
  }

  /* Keep buttons clear of sticky call bar */
  .hero .actions {
    margin-top: 24px;
    gap: 12px;
  }

  .hero .actions .btn {
    width: 100%;
    padding: 14px 16px;
  }

  .mobile-call a {
    padding: 13px 10px;
    font-size: 15px;
  }
}

/* SECURO - COMPACT MOBILE HEADER */
@media (max-width: 650px) {

  .site-header .header-inner {
    min-height: 0;
    padding-top: 8px;
    padding-bottom: 10px;
    align-content: flex-start;
    row-gap: 0;
  }

  .site-header .brand {
    margin: 0;
    padding: 0;
  }

  .site-header .brand img {
    width: 165px;
    height: auto;
    display: block;
  }

  .site-header .header-inner nav {
    margin: 0;
    padding: 0 0 4px;
    width: 100%;
    gap: 8px;
  }

  .site-header .header-inner nav a {
    font-size: 12px;
    white-space: nowrap;
  }
}