.area-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.area-card{
  position:relative; text-decoration:none; color:#fff;
  display:flex; flex-direction:column;
  background:rgba(10,15,28,.92);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden; isolation:isolate;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.area-card::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(160deg, rgba(0,39,104,.55) 0%, rgba(10,15,28,0) 55%);
  opacity:0; transition:opacity .25s ease;
}
.area-card:hover{
  border-color:var(--accent); transform:translateY(-6px);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.9);
}
.area-card:hover::before{ opacity:1; }

/* Top band */
.area-card .top{
  position:relative; z-index:1;
  padding:26px 28px 22px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.area-card .top .idx{
  font-family:ui-monospace,Menlo,monospace; font-size:12px; letter-spacing:.2em;
  color:var(--accent); font-weight:700; display:block; margin-bottom:14px;
}
.area-card .top .state{
  font-family:"Archivo",sans-serif; font-weight:800; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6);
}
.area-card .top .city{
  font-family:"Archivo Black",sans-serif; text-transform:uppercase;
  font-size:clamp(28px,3vw,40px); line-height:.92; letter-spacing:-.02em; margin-top:6px; color:#fff; overflow-wrap:break-word;
}
.area-card .top .city::after{
  content:""; display:block; width:44px; height:4px; background:var(--accent);
  margin-top:16px; transition:width .25s ease;
}
.area-card:hover .top .city::after{ width:88px; }

/* Body */
.area-card .body{ position:relative; z-index:1; padding:24px 28px 26px; flex:1; display:flex; flex-direction:column; }
.area-card .body p{ font-size:14.5px; line-height:1.62; color:rgba(255,255,255,.75); margin:0 0 22px; flex:1; }
.area-card .tag{
  display:inline-flex; align-self:flex-start; align-items:center; gap:6px;
  font-family:"Archivo",sans-serif; font-weight:800; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  background:rgba(200,38,42,.1); border:1px solid rgba(200,38,42,.4);
  padding:6px 12px; margin-bottom:20px; border-radius:2px;
}
.area-card .go{
  display:flex; align-items:center; justify-content:space-between;
  font-family:"Archivo",sans-serif; font-weight:800; font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase; color:#fff;
  padding-top:18px; border-top:1px solid rgba(255,255,255,.1);
}
.area-card .go .arrow{
  font-size:16px; color:var(--accent); transition:transform .25s ease;
}
.area-card:hover .go{ color:var(--accent); }
.area-card:hover .go .arrow{ transform:translateX(6px); }
@media(max-width:880px){ .area-grid{ grid-template-columns:1fr; } }

/* A separate dark closing band, between the light markets and Give Back. */
.cta-band.areas-cta{background:#0B1326 url('../../assets/blueprint-bg-darker.webp') center/cover;padding-block:clamp(56px,6vw,88px);color:#fff}
.areas-cta h2{color:#fff}
.areas-cta h2 .ink{color:var(--accent)}
.areas-cta .btn{background:var(--accent)}
.areas-cta .btn-ghost{background:transparent}
.areas-cta .btn-ghost:hover{background:#fff;color:var(--ink)}