/* ── /help/ and /contact-us/ ──────────────────────────────────────────────
   Both pages render through page.php, so everything here sits inside
   .cul-page__body. The page shell's own typography is scoped to its DIRECT
   children, which is why this markup — nested inside .cul-sup — is left alone
   by it and can style itself.

   Every rule carries two classes minimum. Elementor's global kit sets
   `.elementor-kit-83 a { color:#000 }` and `.elementor-kit-83 h2 {
   font-size:36px }` at (0,1,1), which beats a single class, and the kit still
   loads sitewide. A one-class rule here would lose and the cards would come
   out with black link text.
   ────────────────────────────────────────────────────────────────────────── */

.cul-sup {
    --sup-navy:  var(--cul-brand, #1B3A5C);
    --sup-ink:   #1A1A18;
    --sup-muted: #5C6B7A;
    --sup-line:  #E2E8EF;
    --sup-tint:  #F4F7FB;
    font-family: var(--cul-font, 'DM Sans', system-ui, sans-serif);
    color: var(--sup-ink);
    padding: 8px 0 24px;
}

/* Head ─────────────────────────────────────────────────────────────────── */
.cul-sup .cul-sup__head { text-align: center; max-width: 40em; margin: 0 auto 36px; }
.cul-sup .cul-sup__eyebrow {
    margin: 0 0 10px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--cul-accent, #E87722);
}
.cul-sup .cul-sup__h1 {
    font-family: var(--cul-font-display, 'Poppins', sans-serif);
    font-size: clamp(30px, 4.4vw, 42px);
    line-height: 1.12; letter-spacing: -.02em;
    color: var(--sup-navy);
    margin: 0 0 14px;
}
.cul-sup .cul-sup__lede {
    font-size: 17px; line-height: 1.6; color: var(--sup-muted); margin: 0;
}

/* Cards ────────────────────────────────────────────────────────────────── */
.cul-sup .cul-sup__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 0 0 32px;
}
.cul-sup .cul-sup__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cul-sup .cul-sup__card {
    display: block;
    background: #fff;
    border: 1px solid var(--sup-line);
    border-radius: 10px;
    padding: 26px 24px 22px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cul-sup a.cul-sup__card:hover {
    border-color: #C9D6E4;
    box-shadow: 0 6px 20px rgba(27, 58, 92, .10);
    transform: translateY(-2px);
}
.cul-sup a.cul-sup__card:focus-visible {
    outline: 2px solid var(--sup-navy);
    outline-offset: 3px;
}
/* The address card is not a link — it must not look clickable. */
.cul-sup .cul-sup__card--static { background: var(--sup-tint); }

.cul-sup .cul-sup__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; margin: 0 0 16px;
    border-radius: 9px;
    background: var(--sup-tint);
    color: var(--sup-navy);
}
.cul-sup .cul-sup__card--static .cul-sup__icon { background: #fff; }
.cul-sup .cul-sup__icon svg { width: 21px; height: 21px; }

.cul-sup .cul-sup__card-h {
    font-family: var(--cul-font-display, 'Poppins', sans-serif);
    font-size: 19px; line-height: 1.25; color: var(--sup-navy);
    margin: 0 0 8px;
}
.cul-sup .cul-sup__card-p {
    font-size: 15.5px; line-height: 1.55; color: var(--sup-muted); margin: 0 0 14px;
}
.cul-sup .cul-sup__mono {
    font-size: 17px; color: var(--sup-ink); font-weight: 600;
}
.cul-sup .cul-sup__go {
    display: inline-block;
    font-size: 13.5px; font-weight: 600; color: var(--cul-accent-strong, #BC5A0E);
}
.cul-sup .cul-sup__card--static .cul-sup__go { color: var(--sup-muted); font-weight: 400; }

/* Closing band ─────────────────────────────────────────────────────────── */
.cul-sup .cul-sup__band {
    background: var(--sup-navy);
    border-radius: 10px;
    padding: 30px 28px;
    text-align: center;
    color: #fff;
}
.cul-sup .cul-sup__band-h {
    font-family: var(--cul-font-display, 'Poppins', sans-serif);
    font-size: 21px; margin: 0 0 6px; color: #fff;
}
.cul-sup .cul-sup__band-p {
    font-size: 15.5px; margin: 0 0 18px; color: #C9D8E6;
}
.cul-sup a.cul-sup__btn {
    display: inline-block;
    background: var(--cul-accent-strong, #BC5A0E);
    color: #fff;
    font-size: 15px; font-weight: 600;
    padding: 11px 24px;
    border-radius: 100px;
    text-decoration: none;
}
.cul-sup a.cul-sup__btn:hover { background: var(--cul-accent, #E87722); color: #fff; }

@media (max-width: 860px) {
    .cul-sup .cul-sup__grid,
    .cul-sup .cul-sup__grid--3 { grid-template-columns: minmax(0, 1fr); }
    .cul-sup .cul-sup__head { margin-bottom: 28px; }
}