/* SS Computers
   Moved from inline <style> in: index.html
   Keep this file in the same stylesheet order shown in the HTML page(s).
*/

.home-banner{background:#f4f8fc;padding:14px 0 18px}
.home-banner-wrap{width:calc(100% - 16px);max-width:1600px;margin:0 auto}
.home-banner-images{position:relative;overflow:hidden;border-radius:14px;background:#eaf1f8;aspect-ratio:2.5/1}
.home-banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .7s ease}
.home-banner-img.active{opacity:1}
.home-banner-dots{position:absolute;z-index:4;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:9px}
.home-banner-dot{width:12px;height:12px;border:2px solid #fff;border-radius:50%;background:#9aabba;padding:0;cursor:pointer;box-shadow:0 1px 5px #0003}
.home-banner-dot.active{background:#0878ee}
.home-banner-seo{text-align:center;padding-top:14px}
.home-banner-seo h1{margin:0 0 6px;color:#102c55;font-size:clamp(24px,2.7vw,34px);line-height:1.2}
.home-banner-seo p{max-width:900px;margin:0 auto;color:#52657a;line-height:1.55}
@media(max-width:800px){.home-banner{padding-top:10px}.home-banner-wrap{width:calc(100% - 12px)}.home-banner-images{border-radius:10px;aspect-ratio:16/9}.home-banner-seo{padding:12px 14px 0}.home-banner-seo h1{font-size:25px}}

/* Modern Local Service Areas */
.home-service-areas{
  position:relative;
  overflow:hidden;
  padding:68px 0 72px;
  background:
    radial-gradient(circle at 12% 18%,rgba(14,165,233,.10),transparent 27%),
    radial-gradient(circle at 88% 78%,rgba(99,102,241,.10),transparent 30%),
    linear-gradient(135deg,#f8fbff 0%,#eef6ff 50%,#f9fbff 100%);
}
.home-service-areas::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;opacity:.38;
  background-image:radial-gradient(#8fb8e8 1px,transparent 1px);
  background-size:24px 24px;
}
.home-service-areas .container{position:relative;z-index:1}
.home-area-heading{text-align:center;max-width:880px;margin:0 auto 34px}
.home-area-kicker{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;padding:7px 14px;
  border:1px solid #cfe3fb;border-radius:999px;background:#fff;color:#0b67c2;
  font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  box-shadow:0 7px 22px rgba(24,74,130,.08)
}
.home-area-kicker svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.home-service-areas h2{
  margin:0;color:#123f7a;font-size:clamp(28px,3vw,40px);line-height:1.15;font-weight:800
}
.home-area-heading>p{
  max-width:760px;margin:13px auto 0;color:#5b6f86;font-size:16px;line-height:1.65
}
.home-area-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.home-area-grid .area-card{
  position:relative;display:flex;min-height:205px;flex-direction:column;align-items:flex-start;
  padding:23px 20px 20px;border:1px solid #d7e6f7;border-radius:18px;background:rgba(255,255,255,.94);
  color:#183b67;text-decoration:none;box-shadow:0 10px 30px rgba(31,78,129,.08);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease
}
/* Five neighborhood accent themes. All existing cards and links remain intact. */
.home-service-areas .home-area-grid .area-card:nth-child(1){--area-accent:#1976e8;--area-rgb:25,118,232;--area-tint:#eaf3ff}
.home-service-areas .home-area-grid .area-card:nth-child(2){--area-accent:#11945e;--area-rgb:17,148,94;--area-tint:#e9f8ef}
.home-service-areas .home-area-grid .area-card:nth-child(3){--area-accent:#884bdf;--area-rgb:136,75,223;--area-tint:#f3ebff}
.home-service-areas .home-area-grid .area-card:nth-child(4){--area-accent:#e87927;--area-rgb:232,121,39;--area-tint:#fff1e6}
.home-service-areas .home-area-grid .area-card:nth-child(5){--area-accent:#068da7;--area-rgb:6,141,167;--area-tint:#e7f8fc}
.home-service-areas .home-area-grid .area-card{
 border-color:rgba(var(--area-rgb),.29);
 box-shadow:0 8px 24px rgba(var(--area-rgb),.07),0 3px 12px rgba(16,52,95,.035);
}
.home-service-areas .home-area-grid .area-card::after{background:var(--area-accent)}
.home-service-areas .home-area-grid .area-card .area-pin{background:var(--area-tint);color:var(--area-accent);transition:transform .2s ease}
.home-service-areas .home-area-grid .area-card .area-link{color:var(--area-accent)}
.home-service-areas .home-area-grid .area-card:hover,
.home-service-areas .home-area-grid .area-card:focus-visible{
 border-color:var(--area-accent);
 box-shadow:0 14px 32px rgba(var(--area-rgb),.19),0 4px 14px rgba(var(--area-rgb),.09)
}
.home-service-areas .home-area-grid .area-card:hover .area-pin{transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){.home-service-areas .home-area-grid .area-card,.home-service-areas .home-area-grid .area-card .area-pin{transition:none}}
.home-area-grid .area-card::after{
  content:"";position:absolute;left:20px;right:20px;top:0;height:3px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#0b7be5,#5b5ee8);opacity:.85
}
.home-area-grid .area-card:hover,.home-area-grid .area-card:focus-visible{
  transform:translateY(-7px);border-color:#8fc4f6;box-shadow:0 18px 38px rgba(20,83,150,.16);outline:none
}
.area-pin{
  display:grid;place-items:center;width:46px;height:46px;margin-bottom:16px;border-radius:14px;
  background:linear-gradient(135deg,#e7f4ff,#edf0ff);color:#0874d8
}
.area-pin svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}
.area-card strong{display:block;color:#123f7a;font-size:18px;line-height:1.25}
.area-card small{display:block;margin-top:7px;color:#64778d;font-size:14px;line-height:1.45}
.area-card .area-link{margin-top:auto;padding-top:18px;color:#086bc8;font-size:13px;font-weight:800}
.area-card .area-link b{display:inline-block;transition:transform .2s ease}
.area-card:hover .area-link b{transform:translateX(4px)}
@media(max-width:1050px){.home-area-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){
  .home-service-areas{padding:48px 0 52px}
  .home-area-grid{grid-template-columns:repeat(2,1fr)}
  .home-area-grid .area-card{min-height:180px}
}
@media(max-width:520px){
  .home-service-areas{padding:42px 0 46px}
  .home-area-grid{grid-template-columns:1fr;gap:12px}
  .home-area-grid .area-card{min-height:0;padding:19px}
  .area-pin{width:42px;height:42px;margin-bottom:12px}
  .home-area-heading{margin-bottom:26px}
}


/* Service Areas multicolor fix: override later high-specificity shared homepage card styles. */
body.ss-unified .home-service-areas .home-area-grid > a.area-card:nth-child(1){--area-accent:#1976e8;--area-rgb:25,118,232;--area-tint:#eaf3ff}
body.ss-unified .home-service-areas .home-area-grid > a.area-card:nth-child(2){--area-accent:#11945e;--area-rgb:17,148,94;--area-tint:#e9f8ef}
body.ss-unified .home-service-areas .home-area-grid > a.area-card:nth-child(3){--area-accent:#884bdf;--area-rgb:136,75,223;--area-tint:#f3ebff}
body.ss-unified .home-service-areas .home-area-grid > a.area-card:nth-child(4){--area-accent:#e87927;--area-rgb:232,121,39;--area-tint:#fff1e6}
body.ss-unified .home-service-areas .home-area-grid > a.area-card:nth-child(5){--area-accent:#068da7;--area-rgb:6,141,167;--area-tint:#e7f8fc}
body.ss-unified .home-service-areas .home-area-grid > a.area-card{
  border:1px solid rgba(var(--area-rgb),.38)!important;
  box-shadow:0 9px 27px rgba(var(--area-rgb),.12),0 3px 12px rgba(16,52,95,.03)!important;
}
body.ss-unified .home-service-areas .home-area-grid > a.area-card::after{
 background:var(--area-accent)!important;
}
body.ss-unified .home-service-areas .home-area-grid > a.area-card .area-pin{
 background:var(--area-tint)!important;color:var(--area-accent)!important;
}
body.ss-unified .home-service-areas .home-area-grid > a.area-card .area-link{
 color:var(--area-accent)!important;
}
body.ss-unified .home-service-areas .home-area-grid > a.area-card:hover,
body.ss-unified .home-service-areas .home-area-grid > a.area-card:focus-visible{
 transform:translateY(-5px)!important;
 border-color:var(--area-accent)!important;
 box-shadow:0 16px 35px rgba(var(--area-rgb),.20),0 4px 13px rgba(var(--area-rgb),.10)!important;
}
@media(prefers-reduced-motion:reduce){
 body.ss-unified .home-service-areas .home-area-grid > a.area-card:hover{transform:none!important}
}