/* ==========================================================================
   Contact page colour accents
   Same soft palette as the About and text pages: sky, sand, mint, lilac.
   ========================================================================== */
.ct {
    --ct-fill: #f6f5f2;
    --ct-tint: #eaf1f9;
    --ct-ink: #3f6aa0;
    --ct-ring: rgba(63, 106, 160, .18);
    background:
        radial-gradient(56rem 24rem at 90% 0%, rgba(103, 149, 200, .13), transparent 70%),
        radial-gradient(44rem 22rem at 0% 4%, rgba(237, 236, 248, .85), transparent 70%),
        var(--c-white);
}

/* ---------- Form ---------- */
.ct-panel {
    border-color: transparent;
    background: linear-gradient(180deg, #f5f8fc 0%, var(--c-white) 16rem);
    box-shadow: 0 0 0 1px var(--c-line), 0 1.5rem 3rem -2.25rem rgba(30, 50, 80, .3);
}
.ct-topics .choice span:hover { border-color: #b9cde6; color: var(--ct-ink); }
.ct-topics .choice input:checked + span { border-color: var(--ct-ink); background: var(--ct-tint); color: var(--ct-ink); font-weight: 500; }
.ct-topics .choice input:focus-visible + span { outline-color: var(--ct-ink); }

.ct-form .field input:focus,
.ct-form .field select:focus,
.ct-form .field textarea:focus {
    border-color: var(--ct-ink);
    box-shadow: 0 0 0 3px var(--ct-ring);
    outline: none;
}
.ct-submit { border-top-color: #e3eaf3; }

/* ---------- Direct contact: deep navy instead of black ---------- */
.ct-direct {
    background:
        radial-gradient(18rem 12rem at 100% 100%, rgba(103, 149, 200, .35), transparent 70%),
        linear-gradient(160deg, #1c2d45 0%, #14213a 100%);
    color: rgba(255, 255, 255, .7);
}
.ct-art { stroke: rgba(170, 200, 235, .18); }
.ct-lines dt { color: #9dbbe0; }
.ct-lines a { text-decoration-color: rgba(157, 187, 224, .45); }

/* ---------- Map ---------- */
.ct-map iframe { filter: grayscale(.35) saturate(.9); }
.ct-map figcaption { background: var(--ct-fill); border-top-color: transparent; }

/* ---------- Offices ---------- */
.ct-offices li {
    --tone: var(--ct-tint);
    --tone-ink: var(--ct-ink);
    padding: 1.5rem;
    border-top: 0;
    border-radius: var(--r-panel);
    background: var(--tone);
}
.ct-offices li:nth-child(2) { --tone: #f4eee4; --tone-ink: #8a5f28; }
.ct-offices li:nth-child(3) { --tone: #e7f2ec; --tone-ink: #2e7d57; }
.ct-offices .eyebrow {
    display: inline-block;
    margin-bottom: .75rem;
    padding: .25rem .625rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--tone-ink);
}
.ct-offices .text-link { text-decoration-color: currentColor; color: var(--tone-ink); }

/* ---------- FAQ ---------- */
.ct-faq { border-top: 0; }
.ct-faq-intro a { color: var(--ct-ink); }
.ct-faq-list { display: grid; gap: .5rem; border-top: 0; }
.ct-qa {
    border-bottom: 0;
    border-radius: var(--r-media);
    background: var(--ct-fill);
    transition: background-color .25s;
}
.ct-qa:hover { background: #f0eee9; }
.ct-qa[open] { background: var(--ct-tint); }
.ct-qa summary { padding: 1rem 1.25rem; border-radius: var(--r-media); }
.ct-qa summary:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--ct-ink); }
.ct-qa[open] .ct-qa-sign { color: var(--ct-ink); }
.ct-qa p { margin: -.25rem 0 0; padding: 0 1.25rem 1.25rem; color: var(--c-text); }