/* =====================================================
   CONTACT HERO — "REACH MAP"
   A short light-blue banner with a big blue label on the left and a filled
   brand-blue India mini-map on the right. The map pins the two office cities
   (Hyderabad, Bangalore) with pulsing "ping" markers and hangs out below the
   banner's bottom edge. A faint concentric-ring "radar" motif sits behind it.
===================================================== */

.contact-hero-banner{
    position:relative;
    /* Visible so the India map can hang out past the banner's bottom edge. */
    overflow:visible;
    width:100%;
    background:#e9f1fc;
    text-align:left;
    /* Top padding still clears the centred nav pill; the band is kept short by
       cutting the bottom padding and letting the map's overhang shrink the row. */
    padding:78px 0 26px;
}

/* Signature motif: concentric rings radiating from behind the panel — a quiet
   "reach / signal" mark in place of the hub's dot grid. */
.contact-hero-banner::before{
    content:"";
    position:absolute;
    /* Kept small so the ring motif stays inside the now-short banner (the
       banner overflows visible for the map, so oversized rings would bleed). */
    top:34%;
    right:-2%;
    width:min(320px,34vw);
    aspect-ratio:1;
    transform:translateY(-50%);
    background:
        repeating-radial-gradient(circle at center,
            rgba(47,103,183,.11) 0 1px,
            transparent 1px 46px);
    -webkit-mask-image:radial-gradient(circle at center,#000 28%,transparent 72%);
    mask-image:radial-gradient(circle at center,#000 28%,transparent 72%);
    pointer-events:none;
}

/* Faint blue glow highlight in the top-left corner. */
.contact-hero-banner::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 14% 16%,rgba(47,103,183,.07),transparent 38%);
    pointer-events:none;
}

.contact-hero-banner__content{
    position:relative;
    z-index:5;
    /* Mirror the site .container so the banner copy lines up with the grids
       and stats below it. */
    width:100%;
    max-width:var(--container);
    margin-inline:auto;
    padding-inline:var(--space-6);
}

/* Two-column layout: label + copy on the left, India map on the right. Top-
   aligned so the map's top sits by the heading and its lower half hangs out. */
.contact-hero-banner__content--split{
    display:grid;
    grid-template-columns:1fr auto;
    gap:clamp(24px,4vw,56px);
    align-items:start;
}

/* The label doubles as the hero's headline on the left, so it goes large. */
.contact-hero-banner__tag{
    color:#2F67B7;
    font-size:clamp(1.9rem,1rem + 3vw,3rem);
    font-weight:700;
    letter-spacing:1px;
    line-height:1.05;
    text-transform:uppercase;
    margin:0 0 14px;
    opacity:0;
    transform:scale(.8);
    animation:contactTagPopup .9s ease forwards;
}

@keyframes contactTagPopup{
    0%{opacity:0;transform:scale(.8) translateY(20px);}
    70%{transform:scale(1.05) translateY(-3px);}
    100%{opacity:1;transform:scale(1) translateY(0);}
}

.contact-hero-banner__description{
    margin:18px 0 0;
    max-width:520px;
    color:var(--fg-muted,#556);
    font-size:17px;
    line-height:1.6;
}

/* India mini-map on the right — a filled brand-blue silhouette with the two
   office cities pinned. A large negative bottom margin keeps the banner short
   and lets the map's lower half hang out below the banner's edge. */
.contact-hero-map{
    position:relative;
    z-index:20;
    align-self:start;
    margin-bottom:-150px;
    opacity:0;
    transform:translateX(40px);
    animation:contactMapIn 1s ease .15s forwards;
}

.contact-hero-map__svg{
    display:block;
    width:clamp(205px,21vw,255px);
    height:auto;
    overflow:visible;
    filter:drop-shadow(0 22px 40px rgba(31,54,102,.28));
}

.contact-hero-map__land{
    fill:url(#contactMapFill) #2F67B7;
    stroke:#0f2c52;
    stroke-width:2.5;
    stroke-linejoin:round;
}

/* City pins — orange dot with a pulsing "ping" ring, echoing the old panel. */
.contact-hero-map__dot{
    fill:#f2a63c;
    stroke:#fff;
    stroke-width:2;
}

.contact-hero-map__ping{
    fill:none;
    stroke:#f2a63c;
    stroke-width:2;
    transform-box:fill-box;
    transform-origin:center;
    animation:contactMapPing 2.4s ease-out infinite;
}

.contact-hero-map__pin:nth-of-type(2) .contact-hero-map__ping{
    animation-delay:1.2s;
}

.contact-hero-map__label{
    fill:#fff;
    font-size:15px;
    font-weight:700;
    letter-spacing:.2px;
    paint-order:stroke;
    stroke:rgba(15,44,82,.7);
    stroke-width:3.5;
    stroke-linejoin:round;
}

@keyframes contactMapPing{
    0%{opacity:.9;transform:scale(1);}
    70%{opacity:0;transform:scale(3.4);}
    100%{opacity:0;transform:scale(3.4);}
}

@keyframes contactMapIn{
    to{opacity:1;transform:translateX(0);}
}

@media (prefers-reduced-motion: reduce){
    .contact-hero-banner__tag,
    .contact-hero-map{
        opacity:1;
        transform:none;
        animation:none;
    }
    .contact-hero-map__ping{
        animation:none;
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:860px){
    .contact-hero-banner__content--split{
        grid-template-columns:1fr;
        gap:24px;
        justify-items:start;
    }
    /* Stacked: the map sits below the copy, so it only pokes out a little. */
    .contact-hero-map{
        margin-bottom:-56px;
    }
}

@media(max-width:900px){
    .contact-hero-banner{
        /* Wider pill on small screens needs a touch more top clearance. */
        padding:84px 0 26px;
    }
    .contact-hero-banner__description{
        font-size:16px;
    }
}

@media(max-width:640px){
    .contact-hero-banner__description{
        font-size:15px;
    }
}