/* ===========================================================================
   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(5, 1fr); gap: 18px;
    max-width: 1080px; margin: 0 auto;
}
.pxl-areas--grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.pxl-areas--grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Chip ---------- */
.pxl-areas-chip {
    position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 9px; padding: 26px 16px 22px; border-radius: 15px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .09);
    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 26px 48px -30px rgba(0, 0, 0, .85);
}
.pxl-areas-chip__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%;
    color: var(--pxl-areas-accent);
    background: color-mix(in srgb, var(--pxl-areas-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--pxl-areas-accent) 30%, transparent);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), background .4s ease;
}
.pxl-areas-chip:hover .pxl-areas-chip__icon {
    transform: translateY(-3px);
    background: color-mix(in srgb, var(--pxl-areas-accent) 20%, transparent);
}
.pxl-areas-chip__pin { width: 22px; height: 22px; fill: currentColor; }
.pxl-areas-chip__name { font-size: 16px; font-weight: 600; line-height: 1.25; color: #fff; }
.pxl-areas-chip__sub {
    font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--pxl-areas-accent);
}

/* ---------- 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);
}

/* ===========================================================================
   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-4, .pxl-areas--grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
    .pxl-areas--header { margin-bottom: 38px; }
}
@media (max-width: 575px) {
    .pxl-areas--grid, .pxl-areas--grid.cols-4, .pxl-areas--grid.cols-3 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .pxl-areas-chip { padding: 22px 12px 18px; }
}

/* 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 { background: rgba(189, 154, 95, .12); border-color: rgba(189, 154, 95, .3); }
}