/* ========== CHANNEL SOFTECH — COMMON CSS — Shared across all pages. ========== */
:root {
    /* colours */
    --cs-c-title: #393939;
    --cs-c-text: #73777a;
    --cs-c-blue: #0870af;
    --cs-c-cyan: #159dd3;
    --cs-c-title-light: #f8fdfe;
    --cs-c-text-light: rgba(255, 255, 255, 0.92);
    --cs-c-label-light: #3bb3e3;
    --cs-accent-gradient: linear-gradient(90deg, #0870af, #159dd3, #0870af);
    /* palette gradients — Blue #0870af · Grey #393939 · Light Blue #dff6fc · White #fcfdfe */
    --cs-grad-hero: linear-gradient(120deg, #fcfdfe 0%, #f1fbfe 45%, #dff6fc 100%);
    --cs-grad-light: linear-gradient(160deg, #fcfdfe 0%, #eef9fd 50%, #dff6fc 100%);
    --cs-grad-soft: linear-gradient(180deg, #f1fbfe 0%, #fcfdfe 100%);
    --cs-grad-brand: linear-gradient(135deg, #0870af 0%, #065a8c 100%);
    --cs-grad-dark: linear-gradient(135deg, #393939 0%, #2a2a2a 48%, #064a73 100%);
    /* section blending — every light section starts and ends on the same near-white (--cs-seam) */
    --cs-seam: #fcfdfe;
    --cs-feather: 160px;
    --cs-fade-top: linear-gradient(
        180deg,
        var(--cs-seam) 0,
        rgb(252 253 254 / 75%) calc(var(--cs-feather) * 0.25),
        rgb(252 253 254 / 35%) calc(var(--cs-feather) * 0.6),
        rgb(252 253 254 / 0%) var(--cs-feather)
    );
    --cs-fade-bottom: linear-gradient(
        0deg,
        var(--cs-seam) 0,
        rgb(252 253 254 / 75%) calc(var(--cs-feather) * 0.25),
        rgb(252 253 254 / 35%) calc(var(--cs-feather) * 0.6),
        rgb(252 253 254 / 0%) var(--cs-feather)
    );
    /* type scale */
    --cs-fs-hero: clamp(2rem, 1.05rem + 2vw, 3.05rem); /* 32px → 52px: page h1 */
    --cs-fs-title: clamp(1.71rem, 1.1rem + 1.6vw, 2.5rem); /* 28px → 45px: every section h2 */
    --cs-fs-subtext: clamp(0.875rem, 0.83rem + 0.2vw, 1rem); /* 14px → 16px */
    --cs-fs-label: 0.75rem; /* 12px */
    --cs-fs-card-title: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); /* 17px → 20px: h3 in cards */
    --cs-fs-group-title: clamp(
        1.25rem,
        1.1rem + 0.6vw,
        1.625rem
    ); /* 20px → 26px: sub-headings inside a section */
    /* spacing */
    --cs-section-y: 60px;
    --cs-section-y-compact: 40px;
    --cs-head-gap: 40px;
}

@media (max-width: 991.98px) {
    :root {
        --cs-section-y: 50px;
        --cs-section-y-compact: 34px;
        --cs-head-gap: 32px;
        --cs-feather: 120px;
    }
}

@media (max-width: 575.98px) {
    :root {
        --cs-section-y: 40px;
        --cs-section-y-compact: 28px;
        --cs-head-gap: 26px;
        --cs-fs-label: 0.7675rem;
        --cs-feather: 90px;
    }
}

/* ---------- global mobile safety ---------- */
html,
body {
    overflow-x: clip;
}

img,
iframe,
video {
    max-width: 100%;
}

/* ---------- palette gradient backgrounds ---------- */
.cs-bg-light {
    background: var(--cs-grad-light);
}
.cs-bg-soft {
    background: var(--cs-grad-soft);
}
.cs-bg-brand {
    background: var(--cs-grad-brand);
    color: #fcfdfe;
}
.cs-bg-dark {
    background: var(--cs-grad-dark);
    color: #fcfdfe;
}

/* headings, sub text and labels switch to light on the bold bands */
.cs-bg-dark .cs-title,
.cs-bg-brand .cs-title {
    color: #fcfdfe;
}

.cs-bg-dark .cs-title .cs-accent {
    background-image: linear-gradient(90deg, #5fc3ee, #dff6fc, #5fc3ee);
}

.cs-bg-brand .cs-title .cs-accent {
    background-image: linear-gradient(90deg, #dff6fc, #ffffff, #dff6fc);
}

.cs-bg-dark .cs-subtext,
.cs-bg-brand .cs-subtext {
    color: rgba(223, 246, 252, 0.82);
}

.cs-bg-dark .cs-eyebrow__text,
.cs-bg-brand .cs-eyebrow__text {
    border-color: rgba(255, 255, 255, 0.18);
    background: linear-gradient(90deg, rgba(223, 246, 252, 0.16), rgba(255, 255, 255, 0.04));
    box-shadow: none;
    color: #dff6fc;
}

/* Bootstrap g-5 / gx-5 rows have 48px gutters */
@media (max-width: 767.98px) {
    .row.g-5,
    .row.gx-5 {
        --bs-gutter-x: 1.5rem;
    }
}

/* ---------- paused while off screen ---------- */
.cs-offscreen,
.cs-offscreen::before,
.cs-offscreen::after,
.cs-offscreen *,
.cs-offscreen *::before,
.cs-offscreen *::after {
    animation-play-state: paused !important;
}

/* ---------- section spacing ---------- */
.cs-section {
    padding-top: var(--cs-section-y);
    padding-bottom: var(--cs-section-y);
}

.cs-section--compact {
    padding-top: var(--cs-section-y-compact);
    padding-bottom: var(--cs-section-y-compact);
}

/* ---------- heading blocks ---------- */
.cs-section-head {
    position: relative;
    z-index: 2;
    max-width: 870px;
    margin: 0 auto var(--cs-head-gap);
    padding: 0;
    text-align: center;
}

.cs-section-head .cs-subtext {
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 991.98px) {
    .cs-intro {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .cs-intro .cs-subtext {
        margin-left: auto;
        margin-right: auto;
    }

    .cs-intro .cs-eyebrow--start {
        text-align: center;
    }
}

/* ---------- label / eyebrow ---------- */
.cs-eyebrow {
    position: relative;
    z-index: 2;
    display: block;
    margin: 0 0 15px;
    line-height: 1.2;
    text-align: center;
}

.cs-eyebrow__line {
    display: none;
}

.cs-eyebrow__text {
    display: inline-flex;
    vertical-align: top;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 8px;
    border: 1px solid rgba(8, 112, 175, 0.16);
    border-radius: 50px;
    background: linear-gradient(90deg, #dff6fc 0%, #fcfdfe 100%);
    box-shadow: 0 8px 20px rgba(8, 112, 175, 0.08);
    color: var(--cs-c-blue);
    font-size: var(--cs-fs-label);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* dot: blue disc with a white core and a soft pulse */
.cs-eyebrow__text::before {
    content: "";
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle, #fcfdfe 0 3px, transparent 3.5px), var(--cs-grad-brand);
    box-shadow: 0 0 0 0 rgba(8, 112, 175, 0.35);
    animation: csEyebrowPulse 2.4s ease-out infinite;
}

@keyframes csEyebrowPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(8, 112, 175, 0.35);
    }
    70%,
    100% {
        box-shadow: 0 0 0 8px rgba(8, 112, 175, 0);
    }
}

/* follows its block: left on desktop, centred when the block centres on smaller screens */
.cs-eyebrow--start {
    text-align: inherit;
}

/* on dark backgrounds */
.cs-eyebrow--light .cs-eyebrow__text {
    border-color: rgba(255, 255, 255, 0.18);
    background: linear-gradient(90deg, rgba(223, 246, 252, 0.16), rgba(255, 255, 255, 0.04));
    box-shadow: none;
    color: #dff6fc;
}

.cs-eyebrow--light .cs-eyebrow__text::before {
    background: radial-gradient(circle, #0870af 0 3px, transparent 3.5px), #dff6fc;
}

@media (max-width: 575.98px) {
    .cs-eyebrow {
        margin-bottom: 14px;
    }

    .cs-eyebrow__text {
        gap: 8px;
        max-width: 100%;
        padding: 7px 14px 7px 8px;
        letter-spacing: 0.06em;
        line-height: 1.35;
        text-align: left;
    }

    .cs-eyebrow__text::before {
        flex-basis: 18px;
        width: 18px;
        height: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-eyebrow__text::before {
        animation: none;
    }
}

/* ---------- heading ---------- */
.cs-title {
    position: relative;
    z-index: 2;
    margin: 0;
    color: var(--cs-c-title);
    font-size: var(--cs-fs-title);
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: -0.025em;
    text-wrap: balance;
    overflow-wrap: break-word;
}

.cs-title--light {
    color: var(--cs-c-title-light);
}

.cs-title .cs-accent,
.cs-hero-title .cs-accent {
    display: inline;
    background: var(--cs-accent-gradient);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: csAccentMove 6s linear infinite;
}

@keyframes csAccentMove {
    to {
        background-position: 200% 0;
    }
}

/* lighter accent tone on dark sections */
.cs-title--light .cs-accent {
    background-image: linear-gradient(90deg, #2ba8f5, #3bb3e3, #2ba8f5);
}

/* the same gap under every section heading, whatever paragraph follows */
h2.cs-title + p {
    margin-top: 18px;
}

/* ---------- sub text ---------- */
.cs-subtext {
    position: relative;
    z-index: 2;
    max-width: 840px;
    margin: 14px 0 0;
    color: var(--cs-c-text);
    font-size: var(--cs-fs-subtext);
    line-height: 1.7;
}

.cs-subtext + .cs-subtext {
    margin-top: 12px;
}

.cs-subtext strong {
    color: var(--cs-c-blue);
    font-weight: 600;
}

.cs-subtext--light strong {
    color: var(--cs-c-title-light);
}

.cs-subtext--light {
    color: var(--cs-c-text-light);
}

/* ---------- divider line + text ---------- */
.cs-bridge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 34px;
}

.cs-bridge p {
    margin: 0;
    color: #55585a;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.cs-bridge__line {
    width: 80px;
    height: 1px;
    flex: 0 0 auto;
    background: linear-gradient(90deg, transparent, var(--cs-c-cyan));
}

.cs-bridge__line:last-child {
    background: linear-gradient(90deg, var(--cs-c-cyan), transparent);
}

@media (max-width: 575.98px) {
    .cs-bridge {
        margin-top: 26px;
    }

    .cs-bridge p {
        font-size: 14px;
    }

    /* lines only waste space on small screens */
    .cs-bridge__line {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-title .cs-accent,
    .cs-hero-title .cs-accent {
        animation: none;
    }
}

/* ---------- hero heading (h1) — same colours, larger size ---------- */
.cs-hero-title {
    position: relative;
    z-index: 2;
    margin: 0;
    color: var(--cs-c-title);
    font-size: var(--cs-fs-hero);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.03em;
    text-wrap: balance;
    overflow-wrap: break-word;
}

/* headings drop their manual line breaks on phones */
@media (max-width: 575.98px) {
    .cs-title br,
    .cs-hero-title br {
        display: none;
    }
}

/* ---------- comparison tables on phones ---------- */
@media (max-width: 767.98px) {
    table.cs-table-stack.cs-table-stack.cs-table-stack {
        display: block;
        width: 100%;
        min-width: 0;
        table-layout: auto;
    }

    /* the horizontal-scroll wrapper is no longer needed */
    :has(> table.cs-table-stack) {
        overflow: visible;
    }

    /* column headers stay available to screen readers only */
    table.cs-table-stack.cs-table-stack.cs-table-stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    table.cs-table-stack.cs-table-stack.cs-table-stack tbody,
    table.cs-table-stack.cs-table-stack.cs-table-stack tr {
        display: block;
        width: 100%;
    }

    table.cs-table-stack.cs-table-stack.cs-table-stack tbody tr:nth-child(n) {
        padding: 18px 20px;
        border-bottom: 1px solid var(--cs-border, #d0dade);
        background: transparent;
    }

    table.cs-table-stack.cs-table-stack.cs-table-stack tbody tr:last-child {
        border-bottom: 0;
    }

    /* row heading */
    table.cs-table-stack.cs-table-stack.cs-table-stack tbody tr th:nth-child(n) {
        display: block;
        width: 100%;
        padding: 0 0 10px;
        border: 0;
        background: transparent;
        color: var(--cs-c-title);
        font-size: 15px;
        text-align: left;
    }

    /* each value: column name on the left, text on the right */
    table.cs-table-stack.cs-table-stack.cs-table-stack tbody tr td:nth-child(n) {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 12px;
        width: 100%;
        padding: 9px 0;
        border: 0;
        background: transparent;
        color: var(--cs-c-text);
        font-size: 14px;
        line-height: 1.6;
        text-align: left;
    }

    table.cs-table-stack.cs-table-stack.cs-table-stack tbody tr td:nth-child(n) + td {
        border-top: 1px dashed var(--cs-border, #d0dade);
    }

    table.cs-table-stack.cs-table-stack.cs-table-stack tbody tr td:nth-child(n)::before {
        content: attr(data-label);
        color: var(--cs-c-blue);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }
}

/* ========== FORM STATUS MESSAGE (added by assets/js/form-submit.js) ========== */
.cs-form-status {
    margin: 0;
    font-size: 0.87rem;
    line-height: 1.5;
}

.cs-form-status:not(:empty) {
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    background: #e8f4fb;
    color: #0b4f7a;
    text-align: left;
}

.cs-form-status[data-state="success"] {
    background: #e7f6ec;
    color: #1d6b3a;
}

.cs-form-status[data-state="error"],
.cs-career-ref .cs-career-ref__status[data-state="error"] {
    background: #fdecec;
    color: #9b1c1c;
}