/* ES 24/7 Client App — mobile-first professional login */
.client-app-brand{display:none}
@media (max-width:560px){
  #login-view.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px 16px;background:radial-gradient(circle at 50% 0%,rgba(239,59,59,.12),transparent 38%),#071226}
  #login-view .hero{display:none}
  #login-view .login-panel{width:100%;max-width:420px;padding:30px 22px 24px;border-radius:24px;background:rgba(16,29,54,.98);border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 70px rgba(0,0,0,.42)}
  #login-view .client-app-brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:24px}
  #login-view .client-app-brand .brand-mark{width:82px;height:82px;border-radius:22px;margin-bottom:16px;background:linear-gradient(135deg,#24d8c0,#62a8ff);font-size:24px;box-shadow:0 12px 30px rgba(36,216,192,.18)}
  #login-view .client-app-brand h1{margin:0 0 7px;font-size:27px;line-height:1.15;letter-spacing:-.02em}
  #login-view .client-app-brand p{margin:0;color:#aebbd0;font-size:15px;line-height:1.4}
  #login-view .login-panel > .eyebrow,#login-view .login-panel > h2,#login-view .login-panel > .muted:first-of-type{display:none}
  #login-view .login-panel label{margin:14px 0;color:#dfe8f4;font-size:13px}
  #login-view .login-panel input{min-height:50px;padding:13px 14px;margin-top:8px;border-radius:13px;background:#08162a;border:1px solid #30435c}
  #login-view .login-panel input:focus{border-color:#ef3b3b;box-shadow:0 0 0 3px rgba(239,59,59,.12)}
  #login-view .password-field{margin-top:8px}
  #login-view .password-toggle{min-width:68px;border-radius:13px;background:#192943;border-color:#30435c}
  #login-view .login-panel .btn.primary{min-height:54px;margin-top:18px;border-radius:14px;background:#ef3b3b;color:#fff;box-shadow:0 10px 24px rgba(239,59,59,.22);font-size:17px}
  #login-view .login-panel .btn.primary:hover{background:#f04b4b}
  #login-view .login-panel .tiny{text-align:center;margin-top:20px}
  #login-view .login-panel .tiny a{color:#ff7676;font-weight:700}
}

/* ES 24/7 Client Home — the four emergency images are the actual clickable buttons. */
.es247-client-home{position:relative!important;width:min(100%,560px)!important;max-width:560px!important;margin:0 auto!important;min-height:0!important;padding:0 4.1% 14.8%!important;box-sizing:border-box!important;background:#071226!important;overflow:hidden!important}

/* The official ES 24/7 logo is rendered separately above the controls. */
.es247-client-home>.hero-logo{display:block!important;position:relative!important;width:100%!important;height:31%!important;min-height:180px!important;margin:0 auto!important;background:var(--es247-atlas-url) center top / 100% auto no-repeat!important;font-size:0!important;color:transparent!important}

/* Keep the requested wording between the logo and the emergency buttons. */
.es247-client-home>.client-welcome{display:block!important;position:relative!important;margin:-1% 0 0!important;text-align:center!important;color:#24d8c0!important;font-size:clamp(21px,5.2vw,32px)!important;font-weight:800!important;line-height:1.12!important;letter-spacing:-.02em!important;text-shadow:0 2px 12px rgba(0,0,0,.55)!important}
.es247-client-home>.client-urgent{display:block!important;position:relative!important;margin:1.5% 0 3.5%!important;text-align:center!important;color:#fff!important;font-size:clamp(17px,4.2vw,26px)!important;font-weight:700!important;line-height:1.15!important;text-shadow:0 2px 10px rgba(0,0,0,.55)!important}
.es247-client-home .client-app-footer{display:block!important;position:relative!important;margin:7% 0 0!important;text-align:center!important;color:#8e9aab!important;font-size:13px!important}

/* Functional grid: each real <button> contains one complete artwork panel. */
.es247-client-home .client-panic-wrap{position:relative!important;width:100%!important;margin:0!important;padding:0!important;z-index:10!important;background:transparent!important}
.es247-client-home .client-panic-grid{position:relative!important;width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;gap:16px!important;margin:0!important;padding:0!important;background:transparent!important}
.es247-client-home .client-panic-button,
.es247-client-home .client-panic-button:hover,
.es247-client-home .client-panic-button:active,
.es247-client-home .client-panic-button:focus{position:relative!important;min-height:0!important;width:100%!important;aspect-ratio:512 / 475!important;height:auto!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;overflow:hidden!important;transform:none!important;filter:none!important;opacity:1!important;color:transparent!important;appearance:none!important;-webkit-appearance:none!important}

/* The picture itself is the visible button. There is no coloured overlay behind it. */
.es247-client-home .panic-vehicle-picture{position:absolute!important;inset:0!important;z-index:1!important;display:block!important;width:100%!important;height:100%!important;background-repeat:no-repeat!important;background-size:100% 100%!important;background-position:center!important;background-color:transparent!important;box-shadow:none!important}
.es247-client-home .panic-vehicle-ambulance{background-image:var(--es247-ambulance-url)!important}
.es247-client-home .panic-vehicle-police{background-image:var(--es247-police-url)!important}
.es247-client-home .panic-vehicle-fire{background-image:var(--es247-fire-url)!important}
.es247-client-home .panic-vehicle-tow{background-image:var(--es247-tow-url)!important}

/* Pressing a button gives a subtle physical 3D press without covering the artwork. */
.es247-client-home .client-panic-button:active .panic-vehicle-picture{transform:translateY(5px);filter:brightness(.92)}
.es247-client-home .client-panic-button:focus-visible{outline:3px solid rgba(255,255,255,.9)!important;outline-offset:-6px!important}
.es247-client-home .client-panic-wrap>.notice{display:none!important}

@media(max-width:560px){
  .es247-client-home{width:100%!important;max-width:560px!important;padding-left:4.1%!important;padding-right:4.1%!important;padding-bottom:14.8%!important}
  .es247-client-home>.hero-logo{height:30vw!important;min-height:150px!important;max-height:205px!important;background-size:100% auto!important}
  .es247-client-home>.client-welcome{font-size:clamp(21px,6.2vw,30px)!important}
  .es247-client-home>.client-urgent{font-size:clamp(17px,5vw,25px)!important;margin-bottom:4%!important}
  .es247-client-home .client-panic-grid{gap:12px!important}
  .es247-client-home .client-app-footer{margin-top:6%!important}
}