/* =====================================================
   CONTACT — PREMIUM MODERN REAL ESTATE UI
   Apple / Stripe inspired · glassmorphism · gradients
===================================================== */

.cp-section{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:#ffffff;
    padding:0 0 20px;
}

/* ---------- decorative gradient wash ---------- */
.cp-wash{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 12% 8%, rgba(14,165,233,.10), transparent 42%),
        radial-gradient(circle at 88% 20%, rgba(249,115,22,.09), transparent 40%),
        radial-gradient(circle at 50% 100%, rgba(14,165,233,.07), transparent 45%);
}

/* ---------- floating blur blobs ---------- */
.cp-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    z-index:0;
    pointer-events:none;
    opacity:.55;
    animation:cpFloat 14s ease-in-out infinite;
}

.cp-blob.cp-b1{
    width:420px;height:420px;
    top:-140px; left:-120px;
    background:radial-gradient(circle, rgba(14,165,233,.35), transparent 70%);
    animation-delay:0s;
}

.cp-blob.cp-b2{
    width:380px;height:380px;
    bottom:-160px; right:-100px;
    background:radial-gradient(circle, rgba(249,115,22,.30), transparent 70%);
    animation-delay:-4s;
}

.cp-blob.cp-b3{
    width:260px;height:260px;
    top:38%; right:8%;
    background:radial-gradient(circle, rgba(14,165,233,.22), transparent 70%);
    animation-delay:-8s;
}

@keyframes cpFloat{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(24px,-28px) scale(1.06); }
}

/* ---------- subtle animated particles ---------- */
.cp-particles{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

.cp-particles span{
    position:absolute;
    bottom:-20px;
    width:6px;height:6px;
    border-radius:50%;
    background:var(--sky);
    opacity:.35;
    animation:cpRise linear infinite;
}

.cp-particles span:nth-child(odd){ background:var(--orange); }

.cp-particles span:nth-child(1){ left:6%;  width:5px; height:5px; animation-duration:16s; animation-delay:0s; }
.cp-particles span:nth-child(2){ left:16%; width:8px; height:8px; animation-duration:20s; animation-delay:-3s; }
.cp-particles span:nth-child(3){ left:28%; width:4px; height:4px; animation-duration:14s; animation-delay:-6s; }
.cp-particles span:nth-child(4){ left:42%; width:7px; height:7px; animation-duration:22s; animation-delay:-1s; }
.cp-particles span:nth-child(5){ left:58%; width:5px; height:5px; animation-duration:18s; animation-delay:-9s; }
.cp-particles span:nth-child(6){ left:70%; width:9px; height:9px; animation-duration:24s; animation-delay:-5s; }
.cp-particles span:nth-child(7){ left:82%; width:4px; height:4px; animation-duration:15s; animation-delay:-11s; }
.cp-particles span:nth-child(8){ left:92%; width:6px; height:6px; animation-duration:19s; animation-delay:-7s; }

@keyframes cpRise{
    0%{ transform:translateY(0) translateX(0); opacity:0; }
    10%{ opacity:.4; }
    90%{ opacity:.25; }
    100%{ transform:translateY(-620px) translateX(24px); opacity:0; }
}

/* ---------- building line-art ---------- */
.cp-skyline{
    position:absolute;
    left:0; right:0; bottom:0;
    height:180px;
    z-index:0;
    pointer-events:none;
    opacity:.06;
}

.cp-skyline svg{ width:100%; height:100%; }

/* ---------- header ---------- */
.cp-head{ position:relative; z-index:1; }

.cp-badge{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 18px;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(14,165,233,.10), rgba(249,115,22,.10));
    border:1px solid rgba(14,165,233,.22);
    color:var(--sky-dark);
    font-family:var(--font-accent);
    font-weight:700;
    font-size:.8rem;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.cp-badge iconify-icon{ font-size:1.05em; color:var(--orange); }

/* ---------- split layout ---------- */
.cp-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:36px;
    align-items:start;
    margin-top:52px;
}

@media (max-width:960px){
    .cp-grid{ grid-template-columns:1fr; }
}

/* ---------- info column ---------- */
.cp-info{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.cp-card{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:22px 22px;
    border-radius:20px;
    background:rgba(255,255,255,.65);
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    border:1px solid rgba(255,255,255,.6);
    box-shadow:0 8px 32px rgba(14,165,233,.08);
    overflow:hidden;
    transition:transform .45s cubic-bezier(.4,0,.2,1), box-shadow .45s ease, border-color .45s ease;
}

.cp-card::before{
    content:"";
    position:absolute; inset:0;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(135deg, rgba(14,165,233,.35), rgba(249,115,22,.25), transparent 70%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:0;
    transition:opacity .4s ease;
    pointer-events:none;
}

.cp-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 48px rgba(14,165,233,.16);
}

.cp-card:hover::before{ opacity:1; }

.cp-card-icon{
    flex-shrink:0;
    width:52px; height:52px;
    display:flex; align-items:center; justify-content:center;
    border-radius:16px;
    background:linear-gradient(135deg, var(--sky), var(--orange));
    color:#fff;
    font-size:1.3rem;
    box-shadow:0 10px 24px rgba(14,165,233,.30);
    transition:transform .45s cubic-bezier(.4,0,.2,1);
}

.cp-card:hover .cp-card-icon{ transform:rotate(-8deg) scale(1.08); }

.cp-card-content h4{
    font-family:var(--font-accent);
    font-size:.95rem;
    font-weight:800;
    color:var(--text);
    margin:0 0 4px;
}

.cp-card-content p{
    margin:0;
    font-size:.88rem;
    line-height:1.55;
    color:var(--text3);
}

/* ---------- social card ---------- */
.cp-social-card{
    padding:22px;
    border-radius:20px;
    background:rgba(255,255,255,.65);
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    border:1px solid rgba(255,255,255,.6);
    box-shadow:0 8px 32px rgba(14,165,233,.08);
}

.cp-social-card h4{
    font-family:var(--font-accent);
    font-size:.78rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--text3);
    margin:0 0 14px;
}

.cp-social-row{ display:flex; gap:10px; flex-wrap:wrap; }

.cp-social-btn{
    width:42px; height:42px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:#fff;
    border:1.5px solid var(--border);
    color:var(--sky-dark);
    transition:all .35s cubic-bezier(.4,0,.2,1);
}

.cp-social-btn a{ display:flex; color:inherit; }

.cp-social-btn:hover{
    background:linear-gradient(135deg, var(--sky), var(--orange));
    border-color:transparent;
    color:#fff;
    transform:translateY(-4px) scale(1.06);
    box-shadow:0 12px 24px rgba(14,165,233,.30);
}

/* ---------- form card ---------- */
.cp-form-card{
    position:relative;
    padding:40px 38px 38px;
    border-radius:26px;
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(22px) saturate(160%);
    -webkit-backdrop-filter:blur(22px) saturate(160%);
    border:1px solid rgba(255,255,255,.65);
    box-shadow:0 24px 64px rgba(14,165,233,.14);
    overflow:hidden;
}

.cp-form-card::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:4px;
    background:linear-gradient(90deg, var(--sky), var(--orange));
}

.cp-form-head{ margin-bottom:26px; }

.cp-form-head h3{
    font-family:var(--font-display);
    font-size:1.55rem;
    font-weight:800;
    margin:0 0 6px;
    background:linear-gradient(135deg, var(--text) 40%, var(--sky-dark));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.cp-form-head p{
    margin:0;
    color:var(--text3);
    font-size:.92rem;
}

.cp-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

@media (max-width:560px){
    .cp-form-grid{ grid-template-columns:1fr; }
}

.cp-field{
    position:relative;
    margin-bottom:18px;
}

.cp-field label{
    display:block;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.02em;
    color:var(--text2);
    margin-bottom:7px;
}

.cp-field .cp-input-icon{
    position:absolute;
    left:16px;
    top:41px;
    color:var(--sky);
    font-size:1.05rem;
    pointer-events:none;
    transition:color .3s ease;
}

.cp-field input,
.cp-field select,
.cp-field textarea{
    width:100%;
    padding:13px 16px 13px 44px;
    border-radius:14px;
    border:1.5px solid var(--border);
    background:rgba(255,255,255,.9);
    font-family:var(--font-body);
    font-size:.92rem;
    color:var(--text);
    outline:none;
    transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.cp-field textarea{
    padding-left:16px;
    min-height:120px;
    resize:vertical;
}

.cp-field select{ padding-left:44px; appearance:none; cursor:pointer;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
}

.cp-field input:focus,
.cp-field select:focus,
.cp-field textarea:focus{
    border-color:var(--sky);
    background:#fff;
    box-shadow:0 0 0 4px rgba(14,165,233,.14);
}

.cp-field input:focus ~ .cp-input-icon,
.cp-field textarea:focus ~ .cp-input-icon{ color:var(--orange); }

/* ---------- gradient CTA button ---------- */
.cp-submit{
    position:relative;
    width:100%;
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:16px 24px;
    border:none;
    border-radius:16px;
    background:linear-gradient(135deg, var(--sky), var(--sky-dark) 45%, var(--orange));
    background-size:200% 100%;
    background-position:0% 0%;
    color:#fff;
    font-family:var(--font-accent);
    font-weight:800;
    font-size:1rem;
    letter-spacing:.01em;
    cursor:pointer;
    overflow:hidden;
    box-shadow:0 16px 36px rgba(14,165,233,.30);
    transition:background-position .6s ease, transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease;
}

.cp-submit iconify-icon{ font-size:1.15rem; color:#fff !important; }

.cp-submit:hover{
    background-position:100% 0%;
    transform:translateY(-3px);
    box-shadow:0 22px 48px rgba(249,115,22,.28);
}

.cp-submit::after{
    content:"";
    position:absolute;
    top:0; left:-60%;
    width:40%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
    transform:skewX(-20deg);
    transition:left .7s ease;
}

.cp-submit:hover::after{ left:130%; }

/* ---------- map wrap (premium touch) ---------- */
.cp-map-wrap{
    position:relative;
    z-index:1;
    border-radius:24px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.6);
    box-shadow:0 24px 60px rgba(14,165,233,.14);
    margin-top:56px;
}

.cp-map-wrap iframe{
    width:100%;
    height:380px;
    border:none;
    display:block;
    filter:grayscale(.15) saturate(1.05);
}

.cp-map-title{
    display:flex; align-items:center; gap:10px;
    font-family:var(--font-display);
    font-size:1.2rem;
    font-weight:800;
    color:var(--text);
    margin-bottom:20px;
    position:relative; z-index:1;
}

.cp-map-title iconify-icon{ color:var(--orange); font-size:1.2rem; }