/* contact page: same light, grid + glow look as the homepage hero and sass/page-hero.css */
main .ct-hero, main .ct-info, main .ct-main{--ct-ink: #14213d; --ct-slate: #5b6477; --ct-blue: #0b75d6; --ct-violet: #7b61ff; --ct-rule: #dfe7f3;}

/* hero */
main .ct-hero{position: relative; isolation: isolate; overflow: hidden; padding: 64px 0 150px; text-align: center; background: linear-gradient(180deg, #fbfcff 0%, #ffffff 60%, #f7faff 100%);}
main .ct-hero::before{content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(560px 380px at 50% 30%, rgba(11,117,214,.10), transparent 70%), radial-gradient(460px 340px at 92% 0%, rgba(123,97,255,.10), transparent 70%), radial-gradient(420px 320px at 4% 100%, rgba(11,117,214,.06), transparent 70%);}
main .ct-hero::after{content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(20,33,61,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(20,33,61,.045) 1px, transparent 1px); background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(700px 420px at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(700px 420px at 50% 40%, #000 20%, transparent 75%);}
main .ct-hero .ct-hero-content{position: relative; max-width: 760px; margin: 0 auto;}
main .ct-hero .ct-hero-title{margin: 0 0 20px; font-size: 52px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance;
    background: linear-gradient(100deg, var(--ct-ink) 0%, var(--ct-ink) 40%, var(--ct-blue) 72%, var(--ct-violet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;}
main .ct-hero .ct-hero-text{max-width: 620px; margin: 0 auto; color: var(--ct-slate); font-size: 19px; line-height: 31px;}

/* info cards: glass, overlapping the hero */
main .ct-info{position: relative; z-index: 2; margin-top: -96px;}
main .ct-info .ct-info-card{display: block; height: 100%; padding: 32px 28px; border-radius: 20px; text-align: center; color: var(--ct-ink); text-decoration: none;
    background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); border: 1px solid #fff;
    box-shadow: 0 0 0 1px rgba(20,33,61,.06), 0 24px 48px -28px rgba(38,60,160,.45); transition: transform .3s ease, box-shadow .3s ease;}
main .ct-info a.ct-info-card:hover{transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(11,117,214,.2), 0 28px 54px -26px rgba(11,117,214,.5);}
main .ct-info .ct-info-icon{display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: 18px; border-radius: 16px; font-size: 21px;
    color: var(--ct-blue); background: linear-gradient(145deg, #eef4ff, #f2efff); border: 1px solid rgba(11,117,214,.12); transition: background .3s ease, color .3s ease, box-shadow .3s ease;}
main .ct-info .ct-info-card:hover .ct-info-icon{background: linear-gradient(145deg, #2f7bf0, var(--ct-violet)); border-color: transparent; color: #fff; box-shadow: 0 10px 20px -10px rgba(37,99,235,.8);}
main .ct-info .ct-info-card h3{margin: 0 0 8px; color: var(--ct-ink); font-size: 19px; font-weight: 700;}
main .ct-info .ct-info-card p{margin: 0; color: var(--ct-slate); font-size: 15.5px; line-height: 26px; word-break: break-word;}

/* form + map panel */
main .ct-main{padding: 64px 0 100px; background: #fff;}
main .ct-main .ct-panel{overflow: hidden; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(20,33,61,.06), 0 40px 80px -44px rgba(38,60,160,.45);}
main .ct-main .form-main{padding: 52px 52px 48px;}
main .ct-main .form-main h2{margin: 0 0 8px; color: var(--ct-ink); font-size: 30px; font-weight: 700; letter-spacing: -0.01em;}
main .ct-main .form-main .ct-form-sub{margin-bottom: 32px; color: var(--ct-slate); font-size: 16px; line-height: 26px;}
main .ct-main .ct-grid{display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px;}
main .ct-main .ct-grid .ct-full{grid-column: 1 / -1;}
main .ct-main .form-main label{display: block; margin-bottom: 7px; color: var(--ct-ink); font-size: 14px; font-weight: 600;}
main .ct-main .form-main label span{color: #e5484d !important; margin-left: 2px;}
main .ct-main .form-main .input-text{width: 100%; margin-bottom: 18px; padding: 13px 16px; border: 1px solid var(--ct-rule); border-radius: 12px; outline: none; background: #fbfcff; color: var(--ct-ink); font-size: 15px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;}
main .ct-main .form-main .input-text::placeholder{color: #9aa3b5;}
main .ct-main .form-main .input-text:hover{border-color: #c9d6ea;}
main .ct-main .form-main .input-text:focus{border-color: var(--ct-blue); background: #fff; box-shadow: 0 0 0 4px rgba(11,117,214,.12);}
main .ct-main .form-main select.input-text{appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
    background: #fbfcff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6477' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;}
main .ct-main .form-main textarea.input-text{min-height: 130px; resize: vertical;}
main .ct-main .form-main span[id^="msg_"]{display: block; margin: -12px 0 12px; font-size: 13px;}
main .ct-main .form-main span[id^="msg_"]:empty{display: none;}
main .ct-main .form-main .submit-btn{margin-top: 6px;}
main .ct-main .form-main .submit-btn span[id^="msg_"]{margin: 0 0 12px;}
main .ct-main .form-main .submit-btn .btn-5{display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 26px; border: 0; border-radius: 12px; outline: 0; cursor: pointer;
    background: linear-gradient(100deg, var(--ct-blue), #3d6cf0 60%, var(--ct-violet)); color: #fff; font-size: 16px; font-weight: 600; line-height: 1;
    box-shadow: 0 14px 28px -12px rgba(11,117,214,.6); transition: transform .25s ease, box-shadow .25s ease;}
main .ct-main .form-main .submit-btn .btn-5::after{content: ''; width: 18px; height: 18px; background: currentColor; transition: transform .25s ease;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;}
main .ct-main .form-main .submit-btn .btn-5:hover{background: linear-gradient(100deg, var(--ct-blue), #3d6cf0 60%, var(--ct-violet)); color: #fff; outline: 0; transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(11,117,214,.7);}
main .ct-main .form-main .submit-btn .btn-5:hover::after{transform: translateX(3px);}
main .ct-main .form-main .submit-btn .btn-5:focus-visible{outline: 2px solid var(--ct-blue); outline-offset: 3px;}

/* map: rounded, inset in its column, fills the panel height */
main .ct-main .row > [class*="col-"]:last-child{display: flex; padding: 12px;}
main .ct-main .ct-map{position: relative; flex: 1; min-height: 460px; overflow: hidden; border-radius: 20px; background: #eef2f8; box-shadow: inset 0 0 0 1px rgba(20,33,61,.06);}
main .ct-main .ct-map iframe{position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0;}

@media (max-width: 1199px){
    main .ct-hero .ct-hero-title{font-size: 44px;}
}
@media (max-width: 991px){
    main .ct-hero{padding: 48px 0 140px;}
    main .ct-hero .ct-hero-title{font-size: 38px;}
    main .ct-main{padding: 48px 0 72px;}
    main .ct-main .form-main{padding: 36px 32px;}
    main .ct-main .row > [class*="col-"]:last-child{padding: 0 12px 12px;}
    main .ct-main .ct-map{min-height: 340px;}
}
@media (max-width: 575px){
    main .ct-hero{padding: 36px 0 120px;}
    main .ct-hero .container, main .ct-info .container, main .ct-main .container{padding-left: 16px; padding-right: 16px;}
    main .ct-hero .ct-hero-title{font-size: 32px; margin-bottom: 14px;}
    main .ct-hero .ct-hero-text{font-size: 16px; line-height: 27px;}
    main .ct-info{margin-top: -84px;}
    main .ct-info .ct-info-card{padding: 26px 22px; border-radius: 18px;}
    main .ct-main{padding: 36px 0 56px;}
    main .ct-main .ct-panel{border-radius: 20px;}
    main .ct-main .form-main{padding: 26px 20px;}
    main .ct-main .form-main h2{font-size: 24px;}
    main .ct-main .ct-grid{grid-template-columns: 1fr;}
    main .ct-main .ct-map{min-height: 280px; border-radius: 14px;}
}
