/* ==========================================================================
   Contact page – modern layout on top of the base .ct rules in listings.css:
   split hero with quick-contact cards, glass form card, "what happens next"
   timeline and card-style FAQ. Load-in motion is CSS only.
   ========================================================================== */
.ct {
    --ct-fill: #f6f5f2;
    --ct-tint: #eaf1f9;
    --ct-ink: #1d5eac;
    --ct-ink-2: #6a7cf0;
    --ct-navy: #0f1d36;
    --ct-ring: rgba(29, 94, 172, .16);
    --ct-line: #e3e9f2;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(48rem 26rem at 88% -4%, rgba(106, 124, 240, .14), transparent 70%),
        radial-gradient(40rem 24rem at 4% 2%, rgba(29, 94, 172, .1), transparent 70%),
        var(--c-white);
}
/* Faint grid behind the hero */
.ct:before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 40rem;
    background:
        linear-gradient(rgba(29, 94, 172, .05) 1px, transparent 1px) 0 0 / 3rem 3rem,
        linear-gradient(90deg, rgba(29, 94, 172, .05) 1px, transparent 1px) 0 0 / 3rem 3rem;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent);
    mask-image: linear-gradient(180deg, #000, transparent);
    pointer-events: none;
}
.ct > .lp-wrap { position: relative; }

.ct-eyebrow { margin: 0 0 .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ct-ink); }


/* ---------- Hero ---------- */
.ct-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    padding: 1.75rem 0 clamp(2.5rem, 5vw, 4rem);
}
.ct-hero .breadcrumb { margin-bottom: 1.75rem; }
.ct-pill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1.25rem;
    padding: .4rem .9rem .4rem .7rem;
    border: 1px solid var(--ct-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .8);
    font-size: .82rem;
    font-weight: 600;
    color: var(--c-ink);
    box-shadow: 0 .5rem 1rem -.75rem rgba(15, 29, 54, .3);
}
.ct-pill i { position: relative; width: .55rem; height: .55rem; border-radius: 50%; background: #2e9d63; }
.ct-pill i:after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: ctPulse 2s ease-out infinite; }
.ct-hero .ct-title {
    margin: 0;
    font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.05em;
    color: var(--c-ink);
    text-wrap: balance;
}
.ct-title span { background: linear-gradient(90deg, var(--ct-ink), var(--ct-ink-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ct-hero .ct-lead { max-width: 34rem; margin-top: 1.25rem; font-size: 1.12rem; line-height: 1.65; }
.ct-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.ct-hero-actions .btn { display: inline-flex; align-items: center; gap: .5rem; height: 3rem; padding: 0 1.35rem; }
.ct-hero-actions .icon { width: 1rem; height: 1rem; }
.ct-hero-actions .btn-dark .icon { transition: transform .2s; }
.ct-hero-actions .btn-dark:hover .icon { transform: translateX(3px); }


/* ---------- Quick contact cards ---------- */
.ct-quick { display: grid; gap: .875rem; margin: 0; padding: 0; list-style: none; }
.ct-quick a,
.ct-quick li > div {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    align-items: center;
    padding: 1.25rem 3rem 1.25rem 1.25rem;
    border: 1px solid var(--ct-line);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(10px);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 1rem 2rem -1.75rem rgba(15, 29, 54, .4);
    transition: transform .25s, border-color .25s, box-shadow .25s;
}
.ct-quick a:hover { transform: translateX(-4px); border-color: #bcd2ee; box-shadow: 0 1.5rem 2.5rem -1.5rem rgba(29, 94, 172, .45); }
.ct-quick span {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: .95rem;
    background: linear-gradient(135deg, var(--ct-ink), var(--ct-ink-2));
    color: #fff;
    box-shadow: 0 .75rem 1.25rem -.75rem rgba(29, 94, 172, .8);
}
.ct-quick li:nth-child(3) span { background: var(--ct-navy); box-shadow: none; }
.ct-quick span .icon { width: 1.25rem; height: 1.25rem; }
.ct-quick small { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); }
.ct-quick b { overflow: hidden; font-size: 1.05rem; font-weight: 600; color: var(--c-ink); text-overflow: ellipsis; white-space: nowrap; }
.ct-quick li > div b { white-space: normal; }
.ct-quick-go { position: absolute; top: 50%; right: 1.25rem; width: 1.1rem; height: 1.1rem; margin-top: -.55rem; color: #9fb3cc; transition: transform .2s, color .2s; }
.ct-quick a:hover .ct-quick-go { transform: translate(2px, -2px); color: var(--ct-ink); }


/* ---------- Form card ---------- */
.ct-layout { align-items: stretch; }
.ct-panel {
    position: relative;
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    border: 1px solid var(--ct-line);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2rem 4rem -2.5rem rgba(15, 29, 54, .35);
}
.ct-panel:before { content: ""; position: absolute; top: -1px; left: 2rem; right: 2rem; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--ct-ink), var(--ct-ink-2)); }
.ct-panel-title { font-size: 1.6rem; letter-spacing: -.03em; }
.ct-topics legend { margin-bottom: .75rem; }
.ct-topics .choice-group { gap: .5rem; }
.ct-topics .choice span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 2.6rem;
    padding: 0 1rem;
    border: 1px solid var(--ct-line);
    border-radius: .85rem;
    background: #fff;
    font-weight: 500;
    transition: border-color .2s, background .2s, color .2s, transform .2s;
}
.ct-topics .choice span .icon { width: 1rem; height: 1rem; color: #8aa3c2; transition: color .2s; }
.ct-topics .choice span:hover { border-color: #b9cde6; color: var(--ct-ink); transform: translateY(-1px); }
.ct-topics .choice input:checked + span { border-color: var(--ct-ink); background: var(--ct-tint); color: var(--ct-ink); font-weight: 600; box-shadow: 0 0 0 3px var(--ct-ring); }
.ct-topics .choice input:checked + span .icon { color: var(--ct-ink); }
.ct-topics .choice input:focus-visible + span { outline: 2px solid var(--ct-ink); outline-offset: 2px; }

.ct-form .field input,
.ct-form .field select,
.ct-form .field textarea {
    border-radius: .85rem;
    background: #f8fafd;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.ct-form .field input:hover,
.ct-form .field textarea:hover { background: #fff; }
.ct-form .field input:focus,
.ct-form .field select:focus,
.ct-form .field textarea:focus {
    border-color: var(--ct-ink);
    background: #fff;
    box-shadow: 0 0 0 4px var(--ct-ring);
    outline: none;
}
.ct-submit { border-top-color: var(--ct-line); }
.ct-submit .btn { display: inline-flex; align-items: center; gap: .5rem; height: 3rem; padding: 0 1.6rem; border-radius: .9rem; background: linear-gradient(135deg, #12284a, #1d5eac); }
.ct-submit .btn .icon { width: 1rem; height: 1rem; transition: transform .2s; }
.ct-submit .btn:hover .icon { transform: translateX(3px); }
.ct-sent-mark { background: linear-gradient(135deg, #2e9d63, #46c086); color: #fff; }


/* ---------- What happens next ---------- */
.ct-next {
    position: relative;
    overflow: hidden;
    height: 100%;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border-radius: 1.5rem;
    background:
        radial-gradient(20rem 14rem at 100% 0%, rgba(106, 124, 240, .35), transparent 70%),
        radial-gradient(18rem 12rem at 0% 100%, rgba(29, 94, 172, .45), transparent 70%),
        var(--ct-navy);
    color: rgba(255, 255, 255, .7);
}
.ct-next .ct-art { stroke: rgba(170, 200, 235, .14); }
.ct-next h2 { position: relative; margin: 0 0 1.75rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; color: #fff; }
.ct-next ol { position: relative; display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; counter-reset: ct-step; }
.ct-next li { position: relative; display: grid; gap: .25rem; padding-left: 3rem; counter-increment: ct-step; }
.ct-next li:before {
    content: counter(ct-step);
    position: absolute;
    top: -.15rem;
    left: 0;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ct-ink), var(--ct-ink-2));
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
}
.ct-next li:not(:last-child):after { content: ""; position: absolute; top: 2.15rem; bottom: -1.3rem; left: 1rem; width: 1px; background: linear-gradient(180deg, rgba(157, 187, 224, .5), rgba(157, 187, 224, .1)); }
.ct-next b { color: #fff; font-weight: 600; }
.ct-next li span { font-size: .92rem; line-height: 1.55; }
.ct-next > p { position: relative; margin: 2rem 0 0; padding: 1rem 1.1rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 1rem; background: rgba(255, 255, 255, .05); font-size: .9rem; }
.ct-next > p a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(157, 187, 224, .45); text-underline-offset: .1875rem; }


/* ---------- FAQ ---------- */
.ct-faq { border-top: 0; }
.ct-faq-intro .ct-eyebrow { margin: 0 0 .75rem; font-size: .75rem; color: var(--ct-ink); }
.ct-faq-intro .ct-section-title { font-size: clamp(1.9rem, 3.5vw, 2.75rem); letter-spacing: -.04em; line-height: 1.1; }
.ct-faq-intro a { color: var(--ct-ink); }
.ct-faq-list { display: grid; gap: .75rem; border-top: 0; }
.ct-qa {
    border: 1px solid var(--ct-line);
    border-radius: 1.1rem;
    background: #fff;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.ct-qa:hover { border-color: #c9d9ee; }
.ct-qa summary { padding-inline: 1.35rem; }
.ct-qa > :not(summary) { padding-inline: 1.35rem; }
.ct-qa > :last-child { padding-bottom: 1.1rem; }
.ct-qa[open] { border-color: #bcd2ee; background: linear-gradient(180deg, #f7faff, #fff); box-shadow: 0 1rem 2rem -1.75rem rgba(29, 94, 172, .5); }
.ct-qa[open] > :not(summary) { animation: ctReveal .35s ease both; }
.ct-qa-sign { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--ct-tint); }
.ct-qa-sign::before, .ct-qa-sign::after { left: 50%; top: 50%; width: .75rem; margin: -1px 0 0 -.375rem; background: var(--ct-ink); }
.ct-qa[open] .ct-qa-sign { background: var(--ct-ink); }
.ct-qa[open] .ct-qa-sign::before, .ct-qa[open] .ct-qa-sign::after { background: #fff; }


/* ---------- Load-in motion ---------- */
.ct-hero-copy > * { animation: ctRise .7s cubic-bezier(.2, .7, .2, 1) both; }
.ct-hero-copy > :nth-child(2) { animation-delay: .06s; }
.ct-hero-copy > :nth-child(3) { animation-delay: .12s; }
.ct-hero-copy > :nth-child(4) { animation-delay: .2s; }
.ct-hero-copy > :nth-child(5) { animation-delay: .28s; }
.ct-quick li { animation: ctSlide .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 120ms + .25s); }
.ct-layout { animation: ctRise .8s cubic-bezier(.2, .7, .2, 1) .45s both; }
@keyframes ctRise { from { opacity: 0; transform: translateY(1.25rem); } }
@keyframes ctSlide { from { opacity: 0; transform: translateX(1.5rem); } }
@keyframes ctReveal { from { opacity: 0; transform: translateY(-.35rem); } }
@keyframes ctPulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.8); opacity: 0; } }


@media (max-width: 900px) {
    .ct-hero { grid-template-columns: minmax(0, 1fr); }
    .ct-quick li { animation-name: ctRise; }
}
@media (max-width: 640px) {
    .ct-hero-actions .btn { flex: 1 1 100%; justify-content: center; }
    .ct-quick a, .ct-quick li > div { padding: 1rem 2.75rem 1rem 1rem; }
    .ct-panel { border-radius: 1.15rem; }
    .ct-next { border-radius: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ct-hero-copy > *, .ct-quick li, .ct-layout, .ct-qa[open] > :not(summary), .ct-pill i:after { animation: none !important; }
    .ct-quick a, .ct-quick-go, .ct-topics .choice span, .ct-submit .btn .icon { transition: none; }
}