/* ============================================================
   CONTACT.CSS  -  Alif Club contact page
   ------------------------------------------------------------
     1. Colors / helpers
     2. Background (typical-section.css ka same: sky-blue + dark moving blobs + grain)
     3. Top banner (image, ~45vh)
     4. Glass base + buttons
     5. Quick contact cards
     6. Form  (inputs: WHITE background, koi white border nahi)
     7. Side (map + help)
     8. Mobile
     9. Reduced motion
============================================================ */

/* ============================================================
   1. COLORS / HELPERS
============================================================ */
:root{
    --bubbg:
        radial-gradient(circle at 28% 22%,rgba(255,255,255,.65) 0,rgba(255,255,255,.18) 14%,rgba(255,255,255,0) 38%),
        radial-gradient(circle at 75% 90%,rgba(130,220,255,.40) 0,rgba(130,220,255,0) 55%),
        linear-gradient(180deg,rgba(255,255,255,.14),rgba(110,200,255,.10));
    --bubsh:
        inset 0 2px 3px rgba(255,255,255,.7),
        inset 0 -8px 14px rgba(0,130,210,.18),
        inset 3px 0 6px rgba(255,255,255,.18),
        0 8px 18px rgba(0,120,200,.18),
        0 0 14px rgba(120,220,255,.25);

    --ct-hdr:90px;           /* header ki height (fixed header ke piche content hide na ho). Zarurat ho to badlo */

    /* INPUT ke rang - yahin se badlo */
    --ct-input-bg:#ffffff;       /* input ka background (white) */
    --ct-input-text:#0b2a45;     /* input ke andar likha text */
    --ct-input-ph:#7b8da0;       /* placeholder */
    --ct-input-ico:#4f8fc0;      /* input ka icon */
}

.container{ max-width:1440px; margin:0 auto; padding:0 15px; }
.ct-band{ padding:6px 0 0; }
.ct-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ============================================================
   2. BACKGROUND  (typical-section.css ka bilkul same)
   ------------------------------------------------------------
   Laptop + mobile dono par same: moving dark blobs + grain.
   --bg1 = sky upar | --bg2 = gehre dark blobs | --bg3 = clouds
   Blob size unit --u : laptop 1vmax, mobile .75vmax
============================================================ */
@property --bg1  { syntax:'<color>'; inherits:true; initial-value:#bfe4fa; }
@property --bg2  { syntax:'<color>'; inherits:true; initial-value:#03163b; }
@property --bg3  { syntax:'<color>'; inherits:true; initial-value:#ffffff; }

@property --b1x { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b1y { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b1r { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b2x { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b2y { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b2r { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b3x { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b3y { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b3r { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b4x { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b4y { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b4r { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b5x { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b5y { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b5r { syntax:'<length>'; inherits:false; initial-value:0px; }

html{
    --bg1:#bfe4fa;      /* sky upar (light) */
    --bg2:#03163b;      /* gehra dark blue */
    --bg3:#ffffff;      /* safed clouds */
    --bg1b:color-mix(in srgb, var(--bg1) 45%, #1a5a92);   /* sky neeche: --bg1 se apne aap banta hai */
    --u:1vmax;          /* blob size ki unit: laptop par 1vmax */
    transition:--bg1 .3s ease, --bg2 .3s ease, --bg3 .3s ease;
}
@media(max-width:768px){
    html{ --u:.75vmax; }   /* mobile: blobs ka size laptop ke proportion me */
}

html::before{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(to bottom, var(--bg1), var(--bg1b));
}

html::after{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;

    --b1x:calc(15 * var(--u));                    --b1y:calc(15 * var(--u));                      --b1r:calc(42 * var(--u));
    --b2x:calc(100vw - 12.5 * var(--u));          --b2y:calc(100vh - 12.5 * var(--u));            --b2r:calc(39 * var(--u));
    --b3x:calc(12.5 * var(--u));                  --b3y:calc(55vh + 22.5 * var(--u));             --b3r:calc(32 * var(--u));
    --b4x:calc(40vw + 25 * var(--u));             --b4y:calc(10vh + 20 * var(--u));               --b4r:calc(22 * var(--u));
    --b5x:calc(55vw + 22.5 * var(--u));           --b5y:calc(45vh + 17.5 * var(--u));             --b5r:calc(20 * var(--u));

    background:
        radial-gradient(circle var(--b3r) at var(--b3x) var(--b3y), color-mix(in srgb, var(--bg2) 85%, transparent) 0%, transparent 100%),
        radial-gradient(circle var(--b2r) at var(--b2x) var(--b2y), color-mix(in srgb, var(--bg2) 92%, transparent) 0%, transparent 100%),
        radial-gradient(circle var(--b1r) at var(--b1x) var(--b1y), color-mix(in srgb, var(--bg2) 92%, transparent) 0%, transparent 100%);

    animation:
        alifB1 10s ease-in-out infinite alternate,
        alifB2 12s ease-in-out infinite alternate,
        alifB3 11s ease-in-out infinite alternate,
        alifB4 13s ease-in-out infinite alternate,
        alifB5 15s ease-in-out infinite alternate;
}
@keyframes alifB1{
    0%   { --b1x:calc(15 * var(--u));                  --b1y:calc(15 * var(--u));                  --b1r:calc(42 * var(--u)); }
    50%  { --b1x:calc(15 * var(--u) + 60vw);           --b1y:calc(15 * var(--u) + 30vh);           --b1r:calc(50 * var(--u)); }
    100% { --b1x:calc(15 * var(--u) + 20vw);           --b1y:calc(15 * var(--u) + 70vh);           --b1r:calc(38 * var(--u)); }
}
@keyframes alifB2{
    0%   { --b2x:calc(100vw - 12.5 * var(--u));        --b2y:calc(100vh - 12.5 * var(--u));        --b2r:calc(39 * var(--u)); }
    50%  { --b2x:calc(45vw - 12.5 * var(--u));         --b2y:calc(60vh - 12.5 * var(--u));         --b2r:calc(45 * var(--u)); }
    100% { --b2x:calc(80vw - 12.5 * var(--u));         --b2y:calc(25vh - 12.5 * var(--u));         --b2r:calc(39 * var(--u)); }
}
@keyframes alifB3{
    0%   { --b3x:calc(12.5 * var(--u));                --b3y:calc(55vh + 22.5 * var(--u));         --b3r:calc(32 * var(--u)); }
    50%  { --b3x:calc(12.5 * var(--u) + 70vw);         --b3y:calc(25vh + 22.5 * var(--u));         --b3r:calc(38 * var(--u)); }
    100% { --b3x:calc(12.5 * var(--u) + 90vw);         --b3y:calc(75vh + 22.5 * var(--u));         --b3r:calc(29 * var(--u)); }
}
@keyframes alifB4{
    0%   { --b4x:calc(40vw + 25 * var(--u));           --b4y:calc(10vh + 20 * var(--u));           --b4r:calc(22 * var(--u)); }
    50%  { --b4x:calc(-5vw + 25 * var(--u));           --b4y:calc(35vh + 20 * var(--u));           --b4r:calc(26.4 * var(--u)); }
    100% { --b4x:calc(-30vw + 25 * var(--u));          --b4y:calc(60vh + 20 * var(--u));           --b4r:calc(20.9 * var(--u)); }
}
@keyframes alifB5{
    0%   { --b5x:calc(55vw + 22.5 * var(--u));         --b5y:calc(45vh + 17.5 * var(--u));         --b5r:calc(20 * var(--u)); }
    50%  { --b5x:calc(5vw + 22.5 * var(--u));          --b5y:calc(15vh + 17.5 * var(--u));         --b5r:calc(23 * var(--u)); }
    100% { --b5x:calc(35vw + 22.5 * var(--u));         --b5y:calc(-5vh + 17.5 * var(--u));         --b5r:calc(20 * var(--u)); }
}

/* grain: overlay wala grayscale dana (baseFrequency .5), mobile par bhi laptop jaisa hi */
body::before{
    content:""; position:fixed; inset:-80px; z-index:-1; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:160px 160px;
    opacity:.5; mix-blend-mode:overlay;      /* halka: .35 | strong: .7 ; dana bada: baseFrequency .5 -> .4 */
    animation:alifGrain .8s steps(1) infinite;
}
@keyframes alifGrain{
    0%  { transform:translate(0,0); }
    25% { transform:translate(-30px,20px); }
    50% { transform:translate(25px,-30px); }
    75% { transform:translate(-15px,-35px); }
    100%{ transform:translate(0,0); }
}
body::after{ display:none; }

/* ============================================================
   3. TOP BANNER  -  image + height ~45vh (half screen se thodi kam)
   ------------------------------------------------------------
   Height badalni ho to sirf neeche clamp(min, ideal, max) badlo.
   padding-top = header ki height, taaki text header ke piche hide na ho.
   Image na mile to neeche ka gradient dikhta hai.
============================================================ */
.ct-hero{
    position:relative; box-sizing:border-box; overflow:hidden;
    height:clamp(300px, 45vh, 460px);
    padding-top:var(--ct-hdr);
    display:flex; align-items:center;
    background:linear-gradient(135deg,#0b3a66 0%,#1a6aa8 55%,#4f8fc0 100%);
}
.ct-hero-img{
    position:absolute; inset:0; z-index:0; width:100%; height:100%;
    object-fit:cover; object-position:center;
    -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);   /* neeche image sky me mil jaati hai */
}
.ct-hero::before{                    /* image ke upar halka dark overlay: text saaf dikhe */
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
        linear-gradient(90deg,rgba(3,22,59,.62) 0%,rgba(3,22,59,.28) 55%,rgba(3,22,59,.10) 100%),
        linear-gradient(0deg,rgba(6,34,58,.30) 0%,rgba(6,34,58,0) 45%);
}
.ct-hero-in{
    position:relative; z-index:2; width:100%;
    display:flex; align-items:center; justify-content:space-between; gap:30px;
}
.ct-hero-text{ color:#fff; text-shadow:0 2px 14px rgba(0,50,120,.55); max-width:640px; }
.ct-crumbs{ display:flex; gap:8px; align-items:center; font-size:13px; font-weight:600; color:rgba(255,255,255,.85); margin-bottom:10px; }
.ct-crumbs a{ color:#fff; text-decoration:none; }
.ct-crumbs a:hover{ text-decoration:underline; }
.ct-hero h1{
    font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(2rem,4.6vw,3.4rem);
    line-height:1.08; letter-spacing:-.01em; margin:0 0 10px;
}
.ct-hero p{ margin:0; font-size:clamp(.92rem,1.5vw,1.1rem); line-height:1.5; color:rgba(255,255,255,.92); }

/* envelope ka glass bubble */
.ct-seal{ position:relative; flex:none; width:clamp(84px,12vh,116px); aspect-ratio:1; display:grid; place-items:center; margin-right:4%; }
.ct-seal > *{ position:absolute; }
.ct-seal-disc{
    inset:0; border-radius:50%; display:grid; place-items:center;
    background:var(--bubbg), radial-gradient(circle at 30% 22%,rgba(255,255,255,.55),rgba(255,255,255,.12));
    border:1.5px solid rgba(255,255,255,.65);
    box-shadow:var(--bubsh), 0 20px 40px -18px rgba(0,25,55,.6);
    -webkit-backdrop-filter:blur(8px) saturate(160%); backdrop-filter:blur(8px) saturate(160%);
    animation:ctFloat 5s ease-in-out infinite alternate;
    color:#fff; font-size:clamp(1.9rem,4.3vh,2.6rem); text-shadow:0 4px 18px rgba(0,60,130,.55);
}
.ct-seal-ring{
    inset:0; border-radius:50%; border:1.5px solid rgba(255,255,255,.6); opacity:0;
    animation:ctRipple 3.6s cubic-bezier(.2,.6,.3,1) infinite;
}
.ct-seal-ring.r2{ animation-delay:1.8s; }
@keyframes ctFloat{ from{ transform:translateY(0); } to{ transform:translateY(-8px); } }
@keyframes ctRipple{ 0%{ transform:scale(.9); opacity:0; } 20%{ opacity:.8; } 100%{ transform:scale(1.7); opacity:0; } }

/* ============================================================
   4. GLASS BASE + BUTTONS
============================================================ */
.ct-glass{
    position:relative; isolation:isolate; overflow:hidden;
    background:
        radial-gradient(120% 70% at 12% 0%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 55%),
        linear-gradient(150deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 45%, rgba(255,255,255,.14) 100%);
    border:1px solid rgba(255,255,255,.38);
    border-radius:22px;
    box-shadow:
        inset 0 1.5px 1px rgba(255,255,255,.75),
        inset 1px 0 2px rgba(255,255,255,.25),
        inset 0 -14px 28px rgba(255,255,255,.06);
    -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
    color:#fff; text-shadow:0 1px 6px rgba(0,30,60,.4);
}

.ct-ico{
    display:grid; place-items:center; flex:none; width:52px; height:52px; margin-bottom:14px; border-radius:50%;
    background:var(--bubbg); border:1px solid rgba(255,255,255,.55); box-shadow:var(--bubsh);
    font-size:20px; color:#fff;
}
.ct-ico.sm{ width:42px; height:42px; margin:0; font-size:16px; }

.ct-btn{
    position:relative; isolation:isolate; cursor:pointer; font-family:inherit;
    display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 30px; border-radius:30px;
    color:#fff; text-decoration:none; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px;
    background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.45);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.45), 0 6px 16px -8px rgba(0,0,0,.6);
    -webkit-backdrop-filter:blur(6px) saturate(160%); backdrop-filter:blur(6px) saturate(160%);
    text-shadow:0 1px 4px rgba(0,20,40,.6);
    transition:transform .4s cubic-bezier(.25,1.25,.4,1), border-color .3s ease, opacity .2s;
}
.ct-btn::before{
    content:""; position:absolute; inset:2px; z-index:-1; pointer-events:none; border-radius:999px;
    opacity:0; transform:scale(.6);
    background:var(--bubbg); border:1px solid rgba(255,255,255,.5); box-shadow:var(--bubsh);
    transition:opacity .3s ease, transform .5s cubic-bezier(.25,1.25,.4,1);
}
.ct-btn:hover{ transform:translateY(-2px); border-color:rgba(25,194,255,.85); }
.ct-btn:hover::before{ opacity:1; transform:scale(1); }
.ct-btn i{ transition:transform .3s ease; }
.ct-btn:hover .fa-paper-plane{ transform:translate(3px,-3px); }
.ct-btn.ghost{ background:rgba(6,30,70,.35); }
.ct-btn:focus-visible, .ct-q:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* ============================================================
   5. QUICK CONTACT CARDS
============================================================ */
.ct-quick{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:46px; }
.ct-q{
    display:flex; flex-direction:column; align-items:flex-start; padding:24px 22px 26px;
    text-decoration:none; color:#fff;
    transition:transform .35s cubic-bezier(.25,1.25,.4,1), border-color .3s ease;
}
/* HOVER KAMPNE (vibration) KA FIX:
   Card hover par 6px upar uthta hai -> mouse agar card ke NEECHE ke kinare par ho to card uth jane se mouse bahar reh jata tha
   -> hover hat jata -> card wapas neeche -> phir hover ... (bahut teji se hilna).
   Fix: card ke neeche ek anjaan (invisible) patti (::after) jo card ke saath uthti hai aur neeche ki khali jagah ko dhak leti hai,
   isliye mouse hamesha card par hi rehta hai. (patti dikhne ke liye overflow:visible zaruri hai)
   Uthne ki height badalni ho to translateY(-6px) badlo, aur ::after ki height usse zyada rakho. */
.ct-q{ overflow:visible; }
.ct-q::after{ content:""; position:absolute; left:0; right:0; top:100%; height:16px; pointer-events:auto; }
a.ct-q:hover, a.ct-q.touch-active, div.ct-q:hover, div.ct-q.touch-active{ transform:translateY(-6px); border-color:rgba(255,255,255,.65); }
.ct-q h3{ margin:0 0 6px; font-size:1.1rem; font-weight:700; }
.ct-q p{ margin:0; font-size:.95rem; line-height:1.5; color:rgba(255,255,255,.92); overflow-wrap:anywhere; }

/* ============================================================
   6. FORM
   ------------------------------------------------------------
   Input: WHITE background, white border nahi (border:0).
   Kinara ki jagah halki parchhai; focus par neela ring.
   Rang badalne ho to section 1 ke --ct-input-* variables badlo.
============================================================ */
.ct-main{ display:grid; grid-template-columns:1.45fr 1fr; gap:24px; align-items:start; margin-top:30px; }
.ct-form-card{ padding:34px 36px 38px; }
.ct-form-card.touch-active{ border-color:rgba(255,255,255,.65); }
.ct-h{ margin:0 0 8px; font-size:1.7rem; font-weight:700; letter-spacing:.5px; }
.ct-sub{ margin:0 0 24px; line-height:1.6; font-size:.98rem; color:rgba(255,255,255,.92); }

.ct-form{ display:grid; gap:18px; }
.ct-form[hidden], .ct-done[hidden], .ct-alert[hidden], .ct-field[hidden]{ display:none; }
.ct-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ct-field{ min-width:0; }
.ct-field label{ display:block; margin:0 0 7px; font-size:.88rem; font-weight:700; letter-spacing:.2px; }
.ct-field label em{ font-style:normal; font-weight:500; color:rgba(255,255,255,.75); }

.ct-input{
    position:relative; display:flex; align-items:center;
    background:var(--ct-input-bg); border:0; border-radius:14px;
    box-shadow:0 4px 14px -6px rgba(0,30,60,.35);
    transition:box-shadow .25s ease;
}
.ct-input > i{ flex:none; width:44px; text-align:center; font-size:14px; color:var(--ct-input-ico); pointer-events:none; text-shadow:none; }
.ct-input input, .ct-input select, .ct-input textarea{
    flex:1; min-width:0; width:100%; padding:14px 14px 14px 0; border:0; background:transparent; outline:0;
    color:var(--ct-input-text); font:inherit; font-size:.97rem; text-shadow:none;
}
.ct-input textarea{ padding:14px 16px; resize:vertical; min-height:130px; line-height:1.6; }
.ct-input ::placeholder{ color:var(--ct-input-ph); opacity:1; }
.ct-input:hover{ box-shadow:0 6px 18px -6px rgba(0,30,60,.45); }
.ct-input:focus-within{
    box-shadow:0 6px 18px -6px rgba(0,30,60,.45), 0 0 0 4px rgba(25,194,255,.40);
}
.ct-area{ align-items:stretch; }

/* browser autofill par bhi white rahe */
.ct-input input:-webkit-autofill,
.ct-input input:-webkit-autofill:focus{
    -webkit-box-shadow:0 0 0 40px #fff inset;
    -webkit-text-fill-color:var(--ct-input-text);
    caret-color:var(--ct-input-text);
}

/* select: custom arrow (dark, white background par dikhe) */
.ct-select select{
    appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:40px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%234f8fc0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.ct-select select:invalid{ color:var(--ct-input-ph); }
.ct-select option{ color:#021a2b; background:#fff; }

/* ------------------------------------------------------------
   SELECT KI DROPDOWN LIST: GLASS look (transparent + blur)
   Chrome / Edge (customizable select, appearance:base-select) me chalta hai.
   Jo browser ise support nahi karta wahan purani simple list hi dikhegi
   (browser ki native list ko CSS se glass nahi banaya ja sakta).
   Rang / blur badalna ho to neeche ::picker(select) ka background / blur badlo.
------------------------------------------------------------ */
@supports (appearance:base-select){
    .ct-select select,
    .ct-select select::picker(select){ appearance:base-select; }

    .ct-select select{ background:none; padding-right:16px; }
    .ct-select select::picker-icon{
        color:var(--ct-input-ico); font-size:12px;
        transition:rotate .3s cubic-bezier(.25,1.25,.4,1);
    }
    .ct-select select:open::picker-icon{ rotate:180deg; }

    /* khulne wali glass list */
    .ct-select select::picker(select){
        margin-top:8px; padding:8px; min-width:anchor-size(width);
        border:1px solid rgba(255,255,255,.45); border-radius:16px;
        background:
            radial-gradient(120% 70% at 12% 0%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 55%),
            linear-gradient(150deg, rgba(8,45,95,.62) 0%, rgba(8,40,90,.45) 55%, rgba(8,45,95,.58) 100%);
        -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
        box-shadow:
            inset 0 1.5px 1px rgba(255,255,255,.65),
            inset 1px 0 2px rgba(255,255,255,.2),
            0 20px 40px -14px rgba(0,25,55,.65);
        opacity:0; transform:translateY(-6px);
        transition:opacity .25s ease, transform .35s cubic-bezier(.25,1.25,.4,1),
                   overlay .35s allow-discrete, display .35s allow-discrete;
    }
    .ct-select select:open::picker(select){ opacity:1; transform:none; }
    @starting-style{
        .ct-select select:open::picker(select){ opacity:0; transform:translateY(-6px); }
    }

    /* list ke options */
    .ct-select option{
        display:flex; align-items:center; gap:10px;
        padding:11px 14px; border-radius:10px; cursor:pointer;
        color:#fff; background:transparent; font-size:.95rem; font-weight:600;
        text-shadow:0 1px 4px rgba(0,30,60,.55);
        transition:background .2s ease;
    }
    .ct-select option:hover,
    .ct-select option:focus-visible{ background:rgba(255,255,255,.20); outline:0; }
    .ct-select option:checked{ background:rgba(25,194,255,.38); }
    .ct-select option::checkmark{ color:#fff; font-size:12px; }
    .ct-select option:disabled{ color:rgba(255,255,255,.55); cursor:default; }
}

/* error state */
.ct-err{ display:block; min-height:0; margin-top:6px; font-size:.82rem; font-weight:600; color:#ffd0d0; text-shadow:0 1px 4px rgba(90,0,0,.55); }
.ct-err:empty{ display:none; }
.ct-field.has-err .ct-input{ box-shadow:0 0 0 3px rgba(255,110,110,.85); }
.ct-meta{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.ct-meta .ct-err{ flex:1; }
.ct-count{ margin:6px 0 0 auto; font-size:.8rem; color:rgba(255,255,255,.8); font-variant-numeric:tabular-nums; }

.ct-alert{
    margin:0; padding:12px 16px; border-radius:12px; font-size:.9rem; font-weight:600; line-height:1.5;
    background:rgba(120,10,20,.45); border:1px solid rgba(255,140,140,.6); color:#fff;
}

/* submit */
.ct-submit{ justify-self:start; padding:15px 38px; font-size:14px; }
.ct-submit:disabled{ cursor:wait; opacity:.85; transform:none; }
.ct-spin{
    display:none; width:16px; height:16px; border-radius:50%;
    border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:ctSpin .7s linear infinite;
}
.ct-submit.is-busy .ct-spin{ display:block; }
.ct-submit.is-busy .fa-paper-plane{ display:none; }
@keyframes ctSpin{ to{ transform:rotate(360deg); } }

/* success panel */
.ct-done{ text-align:center; padding:26px 10px 8px; }
.ct-done.show{ animation:ctPop .6s cubic-bezier(.22,1,.36,1) both; }
.ct-done-ico{
    display:inline-grid; place-items:center; width:78px; height:78px; margin-bottom:16px; border-radius:50%;
    background:var(--bubbg), rgba(25,194,255,.28); border:1.5px solid rgba(255,255,255,.7); box-shadow:var(--bubsh);
    font-size:30px; color:#fff;
}
.ct-done h3{ margin:0 0 8px; font-size:1.5rem; font-weight:700; }
.ct-done p{ margin:0 auto 22px; max-width:46ch; line-height:1.7; color:rgba(255,255,255,.94); }
@keyframes ctPop{ 0%{ opacity:0; transform:translateY(16px) scale(.96); } 100%{ opacity:1; transform:none; } }

/* ============================================================
   7. SIDE (map + help)
============================================================ */
.ct-side{ display:grid; gap:20px; }
.ct-map{ padding:14px 14px 20px; }
.ct-map-frame{ position:relative; height:250px; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.5); background:rgba(6,30,70,.35); }
.ct-map-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.ct-map-info{ display:flex; align-items:center; gap:14px; padding:16px 8px 0; }
.ct-map-info h3{ margin:0 0 3px; font-size:1.05rem; font-weight:700; }
.ct-map-info p{ margin:0; font-size:.9rem; line-height:1.5; color:rgba(255,255,255,.92); }

.ct-help{ padding:24px 24px 26px; }
.ct-help h3{ margin:0 0 12px; font-size:1.1rem; font-weight:700; }
.ct-help > a{
    display:flex; align-items:center; gap:12px; padding:12px 0; color:#fff; text-decoration:none; font-size:.95rem; font-weight:600;
    border-top:1px solid rgba(255,255,255,.28);
}
.ct-help > a:hover{ color:#ffe066; }
.ct-help > a > i:first-child{ width:20px; text-align:center; color:#bff1ff; }
.ct-help > a .go{ margin-left:auto; font-size:12px; transition:transform .3s ease; }
.ct-help > a:hover .go{ transform:translateX(4px); }

.ct-social{ display:flex; gap:10px; padding-top:16px; border-top:1px solid rgba(255,255,255,.28); }
.ct-social a{
    position:relative; isolation:isolate; width:40px; height:40px; border-radius:50%;
    display:grid; place-items:center; font-size:16px; color:#fff; text-decoration:none;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.4);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.5), 0 6px 14px -6px rgba(0,25,50,.6);
    transition:transform .4s cubic-bezier(.25,1.25,.4,1), border-color .3s, color .3s;
}
.ct-social a::before{
    content:""; position:absolute; inset:0; border-radius:50%; z-index:-1; pointer-events:none;
    background:var(--bubbg); border:1px solid rgba(255,255,255,.5); box-shadow:var(--bubsh);
    opacity:0; transform:scale(.6); transition:opacity .3s ease, transform .5s cubic-bezier(.25,1.25,.4,1);
}
.ct-social a:hover{ transform:translateY(-3px) scale(1.08); border-color:rgba(25,194,255,.85); color:#ffe066; }
.ct-social a:hover::before{ opacity:1; transform:scale(1); }

.ct-main{ margin-bottom:60px; }

/* ============================================================
   8. MOBILE
============================================================ */
@media (max-width:1100px){
    .ct-quick{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
    :root{ --ct-hdr:72px; }
    .ct-main{ grid-template-columns:1fr; }
    .ct-hero{ height:clamp(280px, 42vh, 380px); }
    .ct-seal{ width:70px; margin-right:0; }
    .ct-seal-disc{ font-size:1.6rem; }
}
@media (max-width:768px){
    .ct-quick{ gap:14px; margin-top:34px; }
    .ct-q{ padding:20px 16px 22px; }
    .ct-form-card{ padding:24px 18px 28px; }
    .ct-h{ font-size:1.35rem; }
    .ct-row{ grid-template-columns:1fr; gap:18px; }
    .ct-submit{ width:100%; justify-self:stretch; }
    .ct-map-frame{ height:220px; }
    .ct-help{ padding:20px 18px 22px; }
    .ct-main{ margin-bottom:44px; }
    /* mobile par grain / blobs band nahi - laptop jaisa hi (typical-section jaisa) */
}
@media (max-width:420px){
    .ct-quick{ grid-template-columns:1fr; }
}

/* ============================================================
   9. REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion:reduce){
    html{ transition:none; }
    html::after, body::before{ animation:none; }
    .ct-seal-disc, .ct-seal-ring, .ct-done.show, .ct-spin{ animation:none; }
    .ct-seal-ring{ display:none; }
    .ct-q, .ct-btn, .ct-input{ transition:none; }
}