/* ===========================================================================
   BR Areas Covered - service-area chip grid (dark theme, gold accent)
   =========================================================================== */
.pxl-areas { --pxl-areas-accent: #bd9a5f; position: relative; }
.pxl-areas--glow {
    position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
    width: min(760px, 80%); height: 420px; pointer-events: none; z-index: 0;
    background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--pxl-areas-accent) 20%, transparent), transparent 72%);
    filter: blur(60px); opacity: .5;
}

/* ---------- Header ---------- */
.pxl-areas--header { position: relative; z-index: 1; text-align: center; max-width: 680px; margin: 0 auto 48px; }
.pxl-areas--eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    color: var(--pxl-areas-accent); font-size: 13px; font-weight: 600;
    letter-spacing: 2.4px; text-transform: uppercase; margin-bottom: 16px;
}
.pxl-areas--eyebrow-line { display: inline-block; width: 30px; height: 1px; background: var(--pxl-areas-accent); opacity: .75; }
.pxl-areas--title { font-size: clamp(28px, 3.4vw, 43px); line-height: 1.12; font-weight: 700; margin: 0 0 16px; letter-spacing: -.01em; }
.pxl-areas--intro { margin: 0 auto; font-size: 16px; line-height: 1.8; color: color-mix(in srgb, currentColor 62%, transparent); max-width: 600px; }

/* ---------- Grid ---------- */
.pxl-areas--grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
    max-width: 1200px; margin: 0 auto;
}
.pxl-areas--grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.pxl-areas--grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.pxl-areas--grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Card ---------- */
.pxl-areas-chip {
    position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 34px 26px 30px; border-radius: 16px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), border-color .4s ease, box-shadow .45s ease, background .4s ease;
}
.pxl-areas-chip:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--pxl-areas-accent) 55%, transparent);
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 30px 55px -32px rgba(0, 0, 0, .85);
}
.pxl-areas-chip__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; border-radius: 50%;
    color: var(--pxl-areas-accent); background: transparent;
    border: 1px solid color-mix(in srgb, var(--pxl-areas-accent) 40%, transparent);
    margin-bottom: 22px;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), background .4s ease, border-color .4s ease;
}
.pxl-areas-chip:hover .pxl-areas-chip__icon {
    transform: translateY(-3px);
    background: color-mix(in srgb, var(--pxl-areas-accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--pxl-areas-accent) 60%, transparent);
}
.pxl-areas-chip__pin { width: 26px; height: 26px; fill: currentColor; }
.pxl-areas-chip__name { font-size: 19px; font-weight: 700; line-height: 1.3; color: #fff; }
.pxl-areas-chip__borough {
    display: block; margin-top: 7px;
    font-size: 12px; font-weight: 600; line-height: 1.45;
    letter-spacing: 1.4px; text-transform: uppercase;
    color: color-mix(in srgb, var(--pxl-areas-accent) 88%, #ffffff 12%);
    opacity: .92;
}
.pxl-areas-chip__line { display: block; width: 30px; height: 2px; border-radius: 2px; background: var(--pxl-areas-accent); margin: 14px 0 15px; opacity: .9; }
.pxl-areas-chip__sub {
    font-size: 14px; font-weight: 500; line-height: 1.75;
    color: color-mix(in srgb, var(--pxl-areas-accent) 82%, #ffffff 6%);
}

/* ---------- Footer note ---------- */
.pxl-areas--note {
    position: relative; z-index: 1; text-align: center;
    margin: 44px auto 0; max-width: 620px; font-size: 15px; line-height: 1.7;
    color: color-mix(in srgb, currentColor 60%, transparent);
}

/* ---------- Footer CTA ---------- */
.pxl-areas--actions { position: relative; z-index: 1; text-align: center; margin-top: 42px; }
.pxl-areas--note + .pxl-areas--actions { margin-top: 24px; }
.pxl-areas--cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 34px; border-radius: 100px;
    background: var(--pxl-areas-accent); color: #fff !important;
    font-weight: 600; font-size: 15px; letter-spacing: .2px; line-height: 1;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
    box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--pxl-areas-accent) 70%, transparent);
}
.pxl-areas--cta:hover, .pxl-areas--cta:focus {
    transform: translateY(-3px); color: #fff !important;
    background: color-mix(in srgb, var(--pxl-areas-accent) 82%, #000);
    box-shadow: 0 20px 40px -14px color-mix(in srgb, var(--pxl-areas-accent) 80%, transparent);
}
.pxl-areas--cta span, .pxl-areas--cta i { color: #fff !important; }
.pxl-areas--cta i { font-size: 13px; transition: transform .3s ease; }
.pxl-areas--cta:hover i { transform: translateX(4px); }

/* ===========================================================================
   GSAP scroll-reveal initial state (only once JS marks the section ready)
   =========================================================================== */
.pxl-areas.pxl-ready[data-animate="yes"] [data-ar-anim],
.pxl-areas.pxl-ready[data-animate="yes"] [data-ar-item] { opacity: 0; will-change: transform, opacity; }

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 991px) {
    .pxl-areas--grid, .pxl-areas--grid.cols-5, .pxl-areas--grid.cols-4, .pxl-areas--grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
    .pxl-areas--header { margin-bottom: 38px; }
}
@media (max-width: 575px) {
    .pxl-areas--grid, .pxl-areas--grid.cols-5, .pxl-areas--grid.cols-4, .pxl-areas--grid.cols-3 { grid-template-columns: 1fr; gap: 14px; }
    .pxl-areas-chip { padding: 28px 22px 26px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pxl-areas.pxl-ready[data-animate="yes"] [data-ar-anim],
    .pxl-areas.pxl-ready[data-animate="yes"] [data-ar-item] { opacity: 1 !important; }
    .pxl-areas-chip, .pxl-areas-chip__icon { transition: none; }
}

/* Fallback where color-mix is unsupported */
@supports not (background: color-mix(in srgb, #000 10%, transparent)) {
    .pxl-areas--intro, .pxl-areas--note { color: rgba(255, 255, 255, .62); }
    .pxl-areas--glow { background: radial-gradient(50% 50% at 50% 50%, rgba(189, 154, 95, .2), transparent 72%); }
    .pxl-areas-chip:hover { border-color: rgba(189, 154, 95, .55); }
    .pxl-areas-chip__icon { border-color: rgba(189, 154, 95, .4); }
    .pxl-areas-chip__borough { color: rgba(189, 154, 95, .9); }
    .pxl-areas-chip__sub { color: rgba(189, 154, 95, .85); }
    .pxl-areas--cta { background: #bd9a5f; box-shadow: 0 14px 30px -12px rgba(189, 154, 95, .7); }
    .pxl-areas--cta:hover, .pxl-areas--cta:focus { background: #9c7b48; }
}