/* ==========================================================================
   Contact Us (page 20) — sandbox template skyhigh-contact/template.php
   Namespaced .shx-ct-*. Hero mirrors the Events & Webinars hero (events.css
   .shx-ev-hero). Brand palette only (see events.css .shx-ev-page tokens).
   ========================================================================== */

.shx-ct-page {
    --navy: #1c164c; --navy-mid: #231d5e;
    --royal: #3664F4; --royal-dark: #3333cc; --link: #2929a3; --royal-light: #6699FF;
    --malibu: #9BB2FA; --malibu-soft: #B8C9FC; --arctic: #72ddf7;
    --off-white: #EBEFF4; --line: #d4defc; --tint: #e8edfe;
    --gray-500: #6B7280; --gray-700: #374151;
    background: #fff;
    color: var(--navy);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.shx-ct-page *, .shx-ct-page *::before, .shx-ct-page *::after { box-sizing: border-box; }

/* ----------------------------- Shared type ------------------------------ */
.shx-ct-eyebrow {
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 12px;
    margin: 0 0 .875rem;
}
.shx-ct-eyebrow::before { content: ''; width: 30px; height: 1px; background: currentColor; }
.shx-ct-eyebrow--royal { color: var(--royal); }
.shx-ct-eyebrow--arctic { color: var(--arctic); }

.shx-ct-h2 {
    font-weight: 800; font-size: clamp(28px, 3vw, 40px); line-height: 1.1;
    letter-spacing: -.03em; color: var(--navy); margin: 0 0 .75rem;
}
.shx-ct-h2--light { color: #fff; }
.shx-ct-lede {
    font-size: 17px; line-height: 1.6; color: var(--gray-700);
    margin: 0 0 2rem; max-width: 40rem;
}

/* ---------------------------------- Hero --------------------------------- */
.shx-ct-hero {
    position: relative;
    background: linear-gradient(180deg, #050510 0%, #0b0b22 16%, #14133f 34%, #1c164c 50%, #232a86 68%, #2f4fc4 84%, #3664f4 100%);
    color: #fff;
    overflow: hidden;
    padding: 2.25rem 0 9rem;
}
.shx-ct-hero__inner { position: relative; display: flex; align-items: center; min-height: 240px; }
.shx-ct-hero__content { flex: 1 1 auto; min-width: 0; }
.shx-ct-hero__eyebrow { color: var(--arctic); margin-bottom: 1rem; }
.shx-ct-hero__heading {
    font-weight: 800; font-size: clamp(32px, 4.1vw, 50px); line-height: 1.06;
    letter-spacing: -.03em; margin: 0 0 .875rem; color: #fff;
}
.shx-ct-hero__heading span { color: var(--malibu); }
.shx-ct-hero__copy {
    font-weight: 500; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6;
    color: #fff; margin: 0; max-width: 36rem;
}
@media (min-width: 1024px) { .shx-ct-hero__heading { font-size: 3rem; } }
@media (max-width: 1023px) { .shx-ct-hero { padding: 1.5rem 0 7.5rem; } }

/* ------------------------------ Help panel ------------------------------- */
.shx-ct-help { position: relative; z-index: 1; margin-top: -6rem; padding-bottom: 4.5rem; }
.shx-ct-panel {
    background: #fff; border-radius: 16px;
    box-shadow: 0 24px 60px rgba(20, 19, 81, .14);
    padding: 2.75rem 2.5rem 2.5rem;
}

/* --------------------------------- Grids --------------------------------- */
.shx-ct-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) {
    .shx-ct-grid--4, .shx-ct-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) { .shx-ct-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .shx-ct-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .shx-ct-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* --------------------------------- Cards --------------------------------- */
.shx-ct-card {
    display: flex; gap: 1rem; align-items: flex-start;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 1.5rem 1.25rem;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.shx-ct-card:hover { border-color: var(--royal); box-shadow: 0 12px 28px rgba(54, 100, 244, .12); transform: translateY(-2px); }
.shx-ct-card__icon { flex: 0 0 40px; width: 40px; height: 40px; }
.shx-ct-card__body { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.shx-ct-card__title { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--navy); margin: .25rem 0 .5rem; }
.shx-ct-card__copy { font-size: 15px; line-height: 1.55; color: var(--gray-500); margin: 0 0 1.25rem; }
.shx-ct-card__link {
    margin-top: auto;
    display: inline;
    font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--royal);
    text-decoration: none;
}
.shx-ct-card__link:hover, .shx-ct-card__link:focus { color: var(--link); text-decoration: underline; }
.shx-ct-arrow { white-space: nowrap; }
.shx-ct-arrow::after { content: '\2192'; display: inline-block; margin-left: .4rem; transition: transform .15s; }
.shx-ct-card:hover .shx-ct-arrow::after { transform: translateX(3px); }
/* Whole card is clickable via its one link. */
.shx-ct-card { position: relative; }
.shx-ct-card__link::before { content: ''; position: absolute; inset: 0; border-radius: 12px; }

.shx-ct-card--compact { flex-direction: column; gap: .875rem; }
/* Stack the icon wherever help cards are narrow (4-up and phones) so the media email stays on one line. */
@media (max-width: 639px), (min-width: 1400px) { .shx-ct-grid--4 .shx-ct-card { flex-direction: column; gap: .875rem; } }

.shx-ct-page a:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; box-shadow: none; }

@media (max-width: 575px) { .shx-ct-panel { padding: 2rem 1.25rem 1.5rem; } }

/* ---------------------------- Global presence ---------------------------- */
.shx-ct-global { background: linear-gradient(180deg, #f2f6ff 0%, var(--tint) 100%); padding: 5rem 0; }
.shx-ct-global__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; margin-bottom: 2.5rem; }
@media (min-width: 992px) { .shx-ct-global__top { grid-template-columns: 5fr 7fr; gap: 3rem; } }
.shx-ct-global .shx-ct-lede { margin-bottom: 1.75rem; }

.shx-ct-stats { display: flex; margin: 0; }
.shx-ct-stats > div { padding: 0 1.75rem; border-left: 1px solid var(--malibu-soft); }
.shx-ct-stats > div:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 400px) { .shx-ct-stats > div { padding: 0 1rem; } .shx-ct-stats dt { font-size: 24px; } }
.shx-ct-stats dt { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--navy); }
.shx-ct-stats dd { margin: .25rem 0 0; font-size: 14px; color: var(--gray-500); }

.shx-ct-map { position: relative; }
.shx-ct-map img { display: block; width: 100%; height: auto; }

.shx-ct-region {
    background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
/* Brand-palette accent bar per region (photos removed 2026-10-05; files kept in img/). */
.shx-ct-region { position: relative; }
.shx-ct-region::before { content: ''; display: block; height: 5px; background: var(--region-accent, var(--royal)); }
.shx-ct-region:nth-child(1) { --region-accent: var(--navy); }
.shx-ct-region:nth-child(2) { --region-accent: var(--royal-dark); }
.shx-ct-region:nth-child(3) { --region-accent: var(--royal); }
.shx-ct-region:nth-child(4) { --region-accent: var(--royal-light); }
.shx-ct-region:nth-child(5) { --region-accent: var(--arctic); }
.shx-ct-region__body { padding: 1.375rem 1.25rem 1.375rem; }
.shx-ct-region__name { font-size: 17px; font-weight: 700; color: var(--navy); margin: 0 0 .5rem; }
.shx-ct-region__cities { list-style: none; margin: 0; padding: 0; }
.shx-ct-region__cities li { font-size: 15px; line-height: 1.6; color: var(--gray-500); }

/* -------------------------- Additional resources ------------------------- */
.shx-ct-more { padding: 5rem 0 5.5rem; }