/* ==========================================================================
   Company pages — Portfolio, Platforms, Internships, Careers
   --------------------------------------------------------------------------
   Builds on the site's tokens in enhancements.css (fonts, type scale,
   colours). The hero reuses .main_dashboard_wrapper / .dashboard_heading
   from about.css, and headings reuse .common_Heading, so these pages match
   the rest of the site. New components use the cp_ prefix.
   ========================================================================== */

:root {
    --cp-blue: #066FB6;
    --cp-blue-2: #12B3E9;
    --cp-navy: #0d4a7c;
    --cp-ink: #0f172a;
    --cp-text: #334155;
    --cp-muted: #64748b;
    --cp-line: #e6edf5;
    --cp-soft: #f5f9fd;
    --cp-radius: 20px;
    --cp-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    --cp-shadow-hover: 0 22px 44px rgba(15, 23, 42, 0.11);
    --cp-gradient: linear-gradient(90deg, #12B3E9 0%, #066FB6 100%);
    --cp-gradient-brand: linear-gradient(90deg, #C750DC 0%, #19061C 100%);
}


/* ---- Section rhythm ---- */
.cp_section {
    padding: 88px 0;
}

.cp_section_alt {
    background: var(--cp-soft);
}

.cp_section .common_Heading {
    margin-bottom: 44px;
}


/* ---- Hero (extends .main_dashboard_wrapper) ---- */
.main_dashboard_wrapper.cp_hero {
    height: auto;
    min-height: 500px;
    margin-top: 0;
    padding: 48px 0 96px;
}

.cp_breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    font-size: var(--fs-2xs);
    font-weight: 500;
    color: var(--cp-muted);
}

.cp_breadcrumb li + li::before {
    content: "/";
    margin-right: 8px;
    color: #94a3b8;
}

.cp_breadcrumb a {
    color: var(--cp-blue);
    font-weight: 600;
}

.cp_breadcrumb a:hover {
    color: var(--cp-navy);
}

.cp_hero_tag {
    display: inline-block;
    margin-bottom: 14px;
    padding: 7px 16px;
    border-radius: 50px;
    background: rgba(56, 189, 248, 0.14);
    color: #0f4c81;
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}

.cp_hero .dashboard_heading h1 {
    margin-bottom: 16px;
}

.cp_hero .dashboard_heading > p {
    color: var(--cp-text);
    max-width: 560px;
}

.cp_hero_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.cp_hero .main_dashboard_img {
    height: 400px;
}


/* ---- Buttons ---- */
.cp_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 26px;
    border: 1.5px solid transparent;
    border-radius: 50px;
    font-family: var(--th-font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.cp_btn i {
    font-size: 0.8125rem;
}

.cp_btn:hover {
    transform: translateY(-2px);
}

.cp_btn_primary {
    background: var(--cp-gradient-brand);
    color: #ffffff;
}

.cp_btn_primary:hover {
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(116, 33, 130, 0.3);
}

.cp_btn_blue {
    background: var(--cp-gradient);
    color: #ffffff;
}

.cp_btn_blue:hover {
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(6, 111, 182, 0.3);
}

.cp_btn_outline {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.16);
    color: var(--cp-ink);
}

.cp_btn_outline:hover {
    border-color: var(--cp-blue);
    color: var(--cp-blue);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.cp_btn_light {
    background: #ffffff;
    color: var(--cp-navy);
}

.cp_btn_light:hover {
    color: var(--cp-blue);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
}

.cp_btn_ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff;
}

.cp_btn_ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.cp_btn_sm {
    min-height: 42px;
    padding: 0 20px;
    font-size: var(--fs-2xs);
}


/* ---- Stats strip (overlaps the hero) ---- */
.cp_stats_section {
    position: relative;
    z-index: 2;
    margin-top: -64px;
}

.cp_stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: #ffffff;
    border: 1px solid var(--cp-line);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.cp_stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 28px 16px;
    text-align: center;
}

.cp_stat + .cp_stat {
    border-left: 1px solid var(--cp-line);
}

.cp_stat_icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    background: rgba(6, 111, 182, 0.08);
    color: var(--cp-blue);
    font-size: 1.0625rem;
}

.cp_stat_value {
    font-family: var(--th-font-heading);
    font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    background: var(--cp-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Text values (e.g. "3 – 6 months") read better a size down */
.cp_stat_value.cp_stat_value_text {
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    line-height: 1.3;
}

.cp_stat_label {
    font-size: var(--fs-2xs);
    font-weight: 500;
    color: var(--cp-muted);
}


/* ---- Cards ---- */
.cp_card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 30px 28px;
    background: #ffffff;
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius);
    box-shadow: var(--cp-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.cp_card:hover {
    transform: translateY(-6px);
    box-shadow: var(--cp-shadow-hover);
    border-color: rgba(6, 111, 182, 0.22);
}

.cp_icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    background: rgba(6, 111, 182, 0.08);
    color: var(--cp-blue);
    font-size: 1.375rem;
    transition: background 0.3s ease, color 0.3s ease;
}

.cp_card:hover .cp_icon {
    background: var(--cp-gradient);
    color: #ffffff;
}

.cp_card_title {
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: 1.3;
    color: var(--cp-ink);
    margin-bottom: 10px;
}

.cp_card_text {
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: var(--cp-muted);
    margin-bottom: 0;
}

.cp_checklist {
    display: grid;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
}

.cp_checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--fs-2xs);
    line-height: 1.55;
    color: var(--cp-text);
}

.cp_checklist li i {
    flex: 0 0 auto;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--cp-blue);
}

/* Used on both <a> and <button> (the modal triggers), so it carries a full
   button reset — otherwise the browser's default grey chrome shows through
   and the control stretches across the card. */
.cp_card_link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    width: auto;
    margin-top: auto;
    padding: 22px 0 0;
    border: 0;
    background: none;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.4;
    color: var(--cp-blue);
    text-align: left;
    cursor: pointer;
    transition: gap 0.2s ease, color 0.2s ease;
}

.cp_card_link:hover {
    gap: 12px;
    color: var(--cp-navy);
}

.cp_card_link i {
    font-size: 0.75rem;
}

/* Numbered value cards (careers) */
.cp_value_num {
    font-family: var(--th-font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: rgba(6, 111, 182, 0.16);
    margin-bottom: 14px;
}


/* ---- Tags / chips ---- */
.cp_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.cp_tag {
    padding: 5px 12px;
    border-radius: 30px;
    background: rgba(56, 189, 248, 0.1);
    color: #0f4c81;
    font-size: 0.8125rem;
    font-weight: 600;
}

.cp_chip_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.cp_chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px 8px 8px;
    background: #ffffff;
    border: 1px solid var(--cp-line);
    border-radius: 50px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--cp-ink);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.cp_chip:hover {
    transform: translateY(-3px);
    border-color: rgba(6, 111, 182, 0.25);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.cp_chip img,
.cp_chip_icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex: 0 0 36px;
}

.cp_chip img {
    object-fit: contain;
    padding: 5px;
    background: #f1f5f9;
}

.cp_chip_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 111, 182, 0.08);
    color: var(--cp-blue);
    font-size: 0.9375rem;
}


/* ---- Portfolio: filters + project cards ---- */
.cp_filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}

.cp_filter_btn {
    padding: 11px 22px;
    border: 1px solid var(--cp-line);
    border-radius: 50px;
    background: #ffffff;
    color: var(--cp-text);
    font-family: var(--th-font-body);
    font-size: var(--fs-2xs);
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.cp_filter_btn:hover {
    border-color: rgba(6, 111, 182, 0.35);
    color: var(--cp-blue);
}

.cp_filter_btn.active {
    border-color: transparent;
    background: var(--cp-gradient);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(6, 111, 182, 0.25);
}

.cp_project_col.is_hidden {
    display: none;
}

.cp_project {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border: 1px solid var(--cp-line);
    border-radius: 22px;
    box-shadow: var(--cp-shadow);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cp_project:hover {
    transform: translateY(-6px);
    box-shadow: var(--cp-shadow-hover);
}

.cp_project_media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #0b1728;
}

.cp_project_media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.cp_project:hover .cp_project_media img {
    transform: scale(1.05);
}

.cp_project_badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 12px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--cp-navy);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cp_project_body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px 24px 26px;
}

.cp_project_title {
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: 1.3;
    color: var(--cp-ink);
    margin-bottom: 10px;
}

.cp_project_text {
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: var(--cp-muted);
    margin-bottom: 18px;
}

.cp_project .cp_tags {
    margin-top: auto;
}


/* ---- Steps (horizontal process) ---- */
.cp_steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
}

.cp_step {
    position: relative;
    padding: 30px 26px;
    background: #ffffff;
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius);
    box-shadow: var(--cp-shadow);
}

.cp_step_num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: var(--cp-gradient);
    color: #ffffff;
    font-family: var(--th-font-heading);
    font-size: 1.0625rem;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(6, 111, 182, 0.25);
}

.cp_step_title {
    font-size: var(--fs-h4);
    font-weight: 700;
    color: var(--cp-ink);
    margin-bottom: 8px;
}

.cp_step_text {
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: var(--cp-muted);
    margin-bottom: 0;
}


/* ---- Vertical timeline (hiring / selection process) ---- */
.cp_timeline {
    margin: 28px 0 0;
    padding: 0;
}

.cp_timeline li {
    position: relative;
    padding: 0 0 26px 66px;
}

.cp_timeline li::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 50px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(to bottom, rgba(6, 111, 182, 0.35), rgba(6, 111, 182, 0.05));
}

.cp_timeline li:last-child {
    padding-bottom: 0;
}

.cp_timeline li:last-child::after {
    display: none;
}

.cp_timeline_num {
    position: absolute;
    left: 0;
    top: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-gradient);
    color: #ffffff;
    font-family: var(--th-font-heading);
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 8px 18px rgba(6, 111, 182, 0.25);
}

.cp_timeline_title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cp-ink);
    margin-bottom: 4px;
    padding-top: 10px;
}

.cp_timeline_text {
    font-size: var(--fs-xs);
    line-height: 1.65;
    color: var(--cp-muted);
    margin-bottom: 0;
}


/* ---- Side panel (next to forms / lists) ---- */
.cp_panel {
    height: 100%;
    padding: 38px 34px;
    border-radius: 24px;
    background: linear-gradient(160deg, #0b86d0 0%, #066FB6 45%, #0d4a7c 100%);
    color: #ffffff;
}

.cp_panel_title {
    font-size: var(--fs-h3);
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    margin-bottom: 10px;
}

.cp_panel_text {
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0;
}

.cp_panel .cp_timeline_num {
    background: #ffffff;
    color: var(--cp-blue);
    box-shadow: none;
}

.cp_panel .cp_timeline li::after {
    background: rgba(255, 255, 255, 0.3);
}

.cp_panel .cp_timeline_title {
    color: #ffffff;
}

.cp_panel .cp_timeline_text {
    color: rgba(255, 255, 255, 0.8);
}

.cp_panel_contact {
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.85);
}

.cp_panel_contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: #ffffff;
    font-weight: 600;
}

.cp_panel_contact a:hover {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Eligibility / info list on a light card */
.cp_info_card {
    height: 100%;
    padding: 38px 34px;
    background: #ffffff;
    border: 1px solid var(--cp-line);
    border-radius: 24px;
    box-shadow: var(--cp-shadow);
}

.cp_info_card .cp_checklist li {
    font-size: var(--fs-xs);
}


/* ---- Job openings ---- */
.cp_jobs {
    display: grid;
    gap: 14px;
}

.cp_job {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 28px;
    background: #ffffff;
    border: 1px solid var(--cp-line);
    border-radius: 18px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.cp_job:hover {
    border-color: rgba(6, 111, 182, 0.3);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.cp_job_dept {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cp-blue);
}

.cp_job_title {
    font-size: var(--fs-h4);
    font-weight: 700;
    color: var(--cp-ink);
    margin-bottom: 10px;
}

.cp_job_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0;
    padding: 0;
    font-size: var(--fs-2xs);
    color: var(--cp-muted);
}

.cp_job_meta i {
    margin-right: 6px;
    color: var(--cp-blue);
}

.cp_job .cp_btn {
    flex: 0 0 auto;
}

.cp_jobs_note {
    margin: 26px 0 0;
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--cp-muted);
}

.cp_jobs_note a {
    font-weight: 600;
    color: var(--cp-blue);
}


/* ---- Application form ---- */
.cp_form_card {
    height: 100%;
    padding: 40px 38px;
    background: #ffffff;
    border: 1px solid var(--cp-line);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.cp_form_title {
    font-size: var(--fs-h3);
    font-weight: 800;
    color: var(--cp-ink);
    margin-bottom: 6px;
}

.cp_form_intro {
    font-size: var(--fs-xs);
    color: var(--cp-muted);
    margin-bottom: 26px;
}

.cp_form_card .git_input.form-select {
    font-size: 1rem;
    padding: 10px 40px 10px 14px;
    border: 1px solid #dbe3ec;
    border-radius: 12px;
    background-color: #f8fafc;
    color: #0f172a;
}

.cp_form_card .git_input.form-select:focus {
    background-color: #ffffff;
    border-color: #066FB6;
    box-shadow: 0 0 0 3px rgba(6, 111, 182, 0.12);
}

.cp_required {
    color: #e11d48;
}

/* Resume upload */
.cp_file {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 14px 16px;
    border: 1.5px dashed #c9d7e6;
    border-radius: 14px;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.cp_file:hover,
.cp_file:focus-within {
    border-color: var(--cp-blue);
    background: #f1f7fd;
}

/* Visually hidden but still focusable, so required-field validation works */
.cp_file input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cp_file_icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-gradient);
    color: #ffffff;
    font-size: 1rem;
}

.cp_file_text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cp_file_name {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--cp-ink);
    overflow-wrap: anywhere;
}

.cp_file_hint {
    font-size: var(--fs-2xs);
    color: var(--cp-muted);
}

.cp_form_submit {
    width: 100%;
    margin-top: 24px;
}

.cp_form_note {
    margin: 14px 0 0;
    text-align: center;
    font-size: var(--fs-2xs);
    color: var(--cp-muted);
}


/* ---- CTA band ---- */
.cp_cta_section {
    padding: 0 0 88px;
}

.cp_cta {
    position: relative;
    overflow: hidden;
    padding: 56px 60px;
    border-radius: 28px;
    background: linear-gradient(120deg, #0d4a7c 0%, #066FB6 55%, #12B3E9 100%);
    color: #ffffff;
}

.cp_cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../images/hero_bg.png) center / cover no-repeat;
    background: image-set(url(../images/hero_bg.webp) type("image/webp"), url(../images/hero_bg.png) type("image/png")) center / cover no-repeat;
    opacity: 0.16;
    mix-blend-mode: screen;
    pointer-events: none;
}

.cp_cta_inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 28px;
}

.cp_cta_title {
    max-width: 660px;
    margin-bottom: 10px;
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
}

.cp_cta_text {
    max-width: 620px;
    margin-bottom: 0;
    font-size: var(--fs-lead);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

.cp_cta_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}


/* ---- FAQ spacing inside company pages ---- */
.cp_section .frequently_asked_wrapper {
    padding-top: 0;
}


/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199.98px) {
    .main_dashboard_wrapper.cp_hero {
        padding: 36px 0 96px;
    }

    .cp_hero .main_dashboard_img {
        height: 340px;
    }
}

@media (max-width: 991.98px) {
    .cp_section {
        padding: 68px 0;
    }

    .cp_cta_section {
        padding-bottom: 68px;
    }

    .cp_hero .dashboard_heading {
        margin-bottom: 8px;
    }

    .cp_hero .main_dashboard_img {
        height: 300px;
    }

    .cp_steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cp_cta {
        padding: 44px 36px;
    }
}

@media (max-width: 767.98px) {
    .cp_section {
        padding: 56px 0;
    }

    .cp_section .common_Heading {
        margin-bottom: 32px;
    }

    .cp_cta_section {
        padding-bottom: 56px;
    }

    .main_dashboard_wrapper.cp_hero {
        padding: 28px 0 88px;
    }

    .cp_stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cp_stat:nth-child(3) {
        border-left: 0;
    }

    .cp_stat:nth-child(n + 3) {
        border-top: 1px solid var(--cp-line);
    }

    .cp_job {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 22px;
    }

    .cp_job .cp_btn {
        width: 100%;
    }

    .cp_form_card,
    .cp_panel,
    .cp_info_card {
        padding: 30px 22px;
        border-radius: 20px;
    }

    .cp_cta {
        padding: 38px 24px;
        border-radius: 22px;
        text-align: center;
    }

    .cp_cta_inner {
        justify-content: center;
    }

    .cp_cta_actions {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .cp_hero_actions .cp_btn {
        flex: 1 1 100%;
    }

    .cp_hero .main_dashboard_img {
        height: 240px;
    }

    /* Filters scroll sideways instead of wrapping into a tall block */
    .cp_filters {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        margin-inline: -12px;
        padding: 0 12px 8px;
        scrollbar-width: none;
    }

    .cp_filters::-webkit-scrollbar {
        display: none;
    }

    .cp_steps {
        grid-template-columns: 1fr;
    }

    .cp_card {
        padding: 26px 22px;
    }

    .cp_chip {
        font-size: var(--fs-2xs);
    }

    .cp_cta_actions .cp_btn {
        flex: 1 1 100%;
    }
}


/* ---- Inline text button (same look as .cp_jobs_note a, but for modal
       triggers, which must be <button> for keyboard and screen readers) ---- */
.cp_inline_btn {
    padding: 0;
    border: 0;
    background: none;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-weight: 600;
    color: var(--cp-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.cp_inline_btn:hover,
.cp_inline_btn:focus-visible {
    color: var(--cp-ink);
}


/* ---- Industry icon tints ----
   One accent per sector so a 15-card grid does not read as a wall of blue.
   All tones sit at the same darkness, which keeps the set coherent and keeps
   the glyph above 4.5:1 on the tint and on the solid hover fill. */
.cp_icon[class*="cp_icon_"] {
    background: color-mix(in srgb, var(--cp-icon) 11%, #ffffff);
    color: var(--cp-icon);
}

.cp_card:hover .cp_icon[class*="cp_icon_"] {
    background: var(--cp-icon);
    color: #ffffff;
}

.cp_icon_rose    { --cp-icon: #be123c; }
.cp_icon_green   { --cp-icon: #15803d; }
.cp_icon_amber   { --cp-icon: #b45309; }
.cp_icon_violet  { --cp-icon: #6d28d9; }
.cp_icon_teal    { --cp-icon: #0f766e; }
.cp_icon_blue    { --cp-icon: #1d4ed8; }
.cp_icon_sky     { --cp-icon: #0369a1; }
.cp_icon_orange  { --cp-icon: #c2410c; }
.cp_icon_indigo  { --cp-icon: #4338ca; }
.cp_icon_cyan    { --cp-icon: #0e7490; }
.cp_icon_emerald { --cp-icon: #047857; }
.cp_icon_slate   { --cp-icon: #334155; }
.cp_icon_lime    { --cp-icon: #4d7c0f; }
.cp_icon_fuchsia { --cp-icon: #a21caf; }
.cp_icon_pink    { --cp-icon: #be185d; }


/* ---- Hero CTA buttons ----
   style.css's `.dashboard_heading button` was written for one small hero button
   and hard-codes width, radius, font-size and border. These pages put real CTA
   buttons in the hero (a modal trigger must be a <button> for keyboard users),
   so restore the .cp_btn look here instead of touching the original rule. */
.dashboard_heading button.cp_btn {
    width: auto;
    border: 1.5px solid transparent;
    border-radius: 50px;
    font-size: var(--fs-xs);
}

.dashboard_heading button.cp_btn_outline {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.16);
}

.dashboard_heading button.cp_btn_outline:hover {
    border-color: var(--cp-blue);
}


/* ---- Counting stat figures ----
   Equal-width digits while the number runs, so it does not jitter sideways. */
.cp_stat_counting {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}


/* ---- Animated CTA band background ----
   The artwork is an SVG whose elements draw themselves one after another,
   hold as a finished picture, wipe away together and start again (the timing
   lives inside the SVG). A pair of soft light pools drifts over it. The copy
   stays above both layers, and reduced-motion users get the finished picture. */
.cp_cta::before {
    background: url(../images/pages/cta-build.svg) center / cover no-repeat;
    opacity: 1;
    mix-blend-mode: normal;
}

.cp_cta::after {
    content: "";
    position: absolute;
    inset: -40% -20%;
    background:
        radial-gradient(closest-side at 22% 38%, rgba(125, 211, 252, 0.36), rgba(125, 211, 252, 0) 100%),
        radial-gradient(closest-side at 78% 66%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 100%);
    background-size: 60% 90%, 52% 80%;
    background-repeat: no-repeat;
    background-position: 0% 20%, 100% 80%;
    pointer-events: none;
    animation: cpCtaGlow 14s ease-in-out infinite alternate;
}

/* keeps the copy and buttons above the moving layers */
.cp_cta_inner {
    z-index: 1;
}

@keyframes cpCtaGlow {
    0%   { transform: translate3d(-10%, 4%, 0); }
    50%  { transform: translate3d(4%, -5%, 0); }
    100% { transform: translate3d(12%, 3%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .cp_cta::before {
        background-image: url(../images/pages/cta-build-static.svg);
    }

    .cp_cta::after {
        animation: none;
    }
}


/* ---- Industry tiles (Portfolio) ----
   A linked tile per sector: tinted icon, name, one line on what we build.
   Icon colours come from the .cp_icon_* tints used on the Industries page. */
.cp_ind_grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp_ind_tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 18px 18px 18px 16px;
    background: #ffffff;
    border: 1px solid var(--cp-line);
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    color: var(--cp-ink);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* accent bar in the sector's own colour, revealed on hover */
.cp_ind_tile::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--cp-icon, var(--cp-blue));
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}

.cp_ind_tile .cp_icon {
    width: 50px;
    height: 50px;
    margin-bottom: 0;
    border-radius: 14px;
    font-size: 1.2rem;
}

.cp_ind_body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.cp_ind_name {
    font-family: var(--th-font-heading);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.3;
    color: var(--cp-ink);
}

.cp_ind_text {
    font-size: var(--fs-2xs);
    line-height: 1.45;
    color: var(--cp-muted);
}

.cp_ind_arrow {
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: var(--cp-blue);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.cp_ind_tile:hover,
.cp_ind_tile:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(6, 111, 182, 0.22);
    box-shadow: var(--cp-shadow-hover);
    color: var(--cp-ink);
}

.cp_ind_tile:hover::before,
.cp_ind_tile:focus-visible::before {
    transform: scaleY(1);
}

.cp_ind_tile:hover .cp_ind_arrow,
.cp_ind_tile:focus-visible .cp_ind_arrow {
    opacity: 1;
    transform: translateX(0);
}

.cp_ind_tile:hover .cp_icon[class*="cp_icon_"],
.cp_ind_tile:focus-visible .cp_icon[class*="cp_icon_"] {
    background: var(--cp-icon);
    color: #ffffff;
}

.cp_section_action {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

@media (max-width: 1199.98px) {
    .cp_ind_grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .cp_ind_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .cp_ind_tile {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }

    /* no hover on touch, so the arrow would only ever be dead space */
    .cp_ind_arrow {
        display: none;
    }
}

@media (max-width: 359.98px) {
    .cp_ind_grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp_ind_tile,
    .cp_ind_tile::before,
    .cp_ind_arrow {
        transition: none;
    }

    .cp_ind_tile:hover,
    .cp_ind_tile:focus-visible {
        transform: none;
    }
}


/* ---- Solution page hero illustrations ---- */
.main_dashboard_img .solution_hero_art {
    width: 100%;
    height: auto;
    max-height: 430px;
    object-fit: contain;
}

/* A media query in the page does not reach an SVG loaded through <img>, so
   reduced-motion users are served the still version of each illustration. */
@media (prefers-reduced-motion: reduce) {
    .solution_art_marketing { content: url("../images/solutions/marketing-hero-static.svg"); }
    .solution_art_seo { content: url("../images/solutions/seo-hero-static.svg"); }
    .solution_art_design { content: url("../images/solutions/design-hero-static.svg"); }
    .solution_art_android { content: url("../images/solutions/android-hero-static.svg"); }
    .solution_art_ios { content: url("../images/solutions/ios-hero-static.svg"); }
    .solution_art_wordpress { content: url("../images/solutions/wordpress-hero-static.svg"); }
    .solution_art_ecommerce { content: url("../images/solutions/ecommerce-hero-static.svg"); }
    .solution_art_shopify { content: url("../images/solutions/shopify-hero-static.svg"); }
    .solution_art_crm { content: url("../images/solutions/crm-hero-static.svg"); }
    .industries_hero_art { content: url("../images/pages/industries-hero-static.svg"); }
}


/* ---- Side panel: fill its height ----
   The panel stretches to match the form beside it, but its content used to sit
   at the top and leave a tall empty band underneath. The timeline now takes
   the spare height (each step grows, so the connecting lines lengthen) and the
   contact note sits at the bottom edge. */
.cp_panel {
    display: flex;
    flex-direction: column;
}

.cp_panel .cp_timeline {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cp_panel .cp_timeline li {
    flex: 1;
}

.cp_panel .cp_timeline li:last-child {
    flex: 0 0 auto;
}

.cp_panel .cp_panel_contact {
    margin-top: 26px;
}


/* ---- Timeline: steps light up in order ----
   Each number switches on in turn and a bright line runs down to the next
   one. When the last step is lit the whole thing holds, clears, and starts
   again from step one. Written for up to four steps. */
.cp_timeline li::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 50px;
    bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background: var(--cp-blue);
    box-shadow: 0 0 8px rgba(18, 179, 233, 0.6);
    transform: scaleY(0);
    transform-origin: top;
    z-index: 1;
    animation: cpLine1 8s ease-in-out infinite;
}

.cp_panel .cp_timeline li::before {
    background: #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.75);
}

.cp_timeline li:last-child::before {
    display: none;
}

.cp_timeline li:nth-child(2)::before { animation-name: cpLine2; }
.cp_timeline li:nth-child(3)::before { animation-name: cpLine3; }

.cp_timeline_num {
    animation: cpNum1 8s ease-in-out infinite;
}

.cp_timeline li:nth-child(2) .cp_timeline_num { animation-name: cpNum2; }
.cp_timeline li:nth-child(3) .cp_timeline_num { animation-name: cpNum3; }
.cp_timeline li:nth-child(4) .cp_timeline_num { animation-name: cpNum4; }

@keyframes cpLine1 { 0%, 6%  { transform: scaleY(0); opacity: 1; } 20%, 86% { transform: scaleY(1); opacity: 1; } 94%, 100% { transform: scaleY(1); opacity: 0; } }
@keyframes cpLine2 { 0%, 24% { transform: scaleY(0); opacity: 1; } 38%, 86% { transform: scaleY(1); opacity: 1; } 94%, 100% { transform: scaleY(1); opacity: 0; } }
@keyframes cpLine3 { 0%, 42% { transform: scaleY(0); opacity: 1; } 56%, 86% { transform: scaleY(1); opacity: 1; } 94%, 100% { transform: scaleY(1); opacity: 0; } }

@keyframes cpNum1 { 0%       { opacity: 0.5; transform: scale(0.9); } 4%  { opacity: 1; transform: scale(1.14); } 9%, 86%  { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0.5; transform: scale(0.9); } }
@keyframes cpNum2 { 0%, 18%  { opacity: 0.5; transform: scale(0.9); } 22% { opacity: 1; transform: scale(1.14); } 27%, 86% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0.5; transform: scale(0.9); } }
@keyframes cpNum3 { 0%, 36%  { opacity: 0.5; transform: scale(0.9); } 40% { opacity: 1; transform: scale(1.14); } 45%, 86% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0.5; transform: scale(0.9); } }
@keyframes cpNum4 { 0%, 54%  { opacity: 0.5; transform: scale(0.9); } 58% { opacity: 1; transform: scale(1.14); } 63%, 86% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0.5; transform: scale(0.9); } }

@media (prefers-reduced-motion: reduce) {
    .cp_timeline li::before,
    .cp_timeline_num {
        animation: none;
    }
}


/* ---- Value cards (Careers > What We Stand For) ----
   Each value has its own colour (the .cp_icon_* tint, also set on the card so
   --cp-icon reaches every part). Motion:
   - the four cards switch on one after another: icon wipes in, the outlined
     number rises, a line draws along the base; then all four hold, clear and
     the sequence starts again
   - a soft light keeps travelling round each card's border */
@property --cp-va {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.cp_value_card {
    position: relative;
    overflow: hidden;
    padding: 30px 26px 34px;
    background: linear-gradient(170deg, color-mix(in srgb, var(--cp-icon) 6%, #ffffff) 0%, #ffffff 55%);
    border-color: color-mix(in srgb, var(--cp-icon) 16%, var(--cp-line));
}

/* travelling light on the border */
.cp_value_card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--cp-va), transparent 0 72%, var(--cp-icon) 88%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
    animation: cpValBorder 7s linear infinite;
}

/* line along the base */
.cp_value_card::after {
    content: "";
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 18px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--cp-icon), color-mix(in srgb, var(--cp-icon) 35%, #ffffff));
    transform: scaleX(0);
    transform-origin: left;
    animation: cpValLine1 9s ease-in-out infinite;
}

.cp_value_card .cp_icon {
    margin-bottom: 20px;
}

.cp_value_card .cp_icon i {
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0 33.33%, #000 33.33% 66.66%, rgba(0, 0, 0, 0.28) 66.66% 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0 33.33%, #000 33.33% 66.66%, rgba(0, 0, 0, 0.28) 66.66% 100%);
    -webkit-mask-size: 300% 100%;
    mask-size: 300% 100%;
    animation: cpValIcon1 9s ease-in-out infinite;
}

/* big outlined numeral in the corner */
.cp_value_card .cp_value_num {
    position: absolute;
    top: 20px;
    right: 22px;
    margin: 0;
    font-size: 3.25rem;
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--cp-icon) 38%, #ffffff);
    animation: cpValNum1 9s ease-in-out infinite;
}

.cp_reveal_group > [class*="col-"]:nth-child(2) .cp_value_card::after { animation-name: cpValLine2; }
.cp_reveal_group > [class*="col-"]:nth-child(3) .cp_value_card::after { animation-name: cpValLine3; }
.cp_reveal_group > [class*="col-"]:nth-child(4) .cp_value_card::after { animation-name: cpValLine4; }
.cp_reveal_group > [class*="col-"]:nth-child(2) .cp_value_card .cp_icon i { animation-name: cpValIcon2; }
.cp_reveal_group > [class*="col-"]:nth-child(3) .cp_value_card .cp_icon i { animation-name: cpValIcon3; }
.cp_reveal_group > [class*="col-"]:nth-child(4) .cp_value_card .cp_icon i { animation-name: cpValIcon4; }
.cp_reveal_group > [class*="col-"]:nth-child(2) .cp_value_card .cp_value_num { animation-name: cpValNum2; }
.cp_reveal_group > [class*="col-"]:nth-child(3) .cp_value_card .cp_value_num { animation-name: cpValNum3; }
.cp_reveal_group > [class*="col-"]:nth-child(4) .cp_value_card .cp_value_num { animation-name: cpValNum4; }

.cp_value_card:hover {
    border-color: color-mix(in srgb, var(--cp-icon) 40%, var(--cp-line));
    box-shadow: 0 22px 44px color-mix(in srgb, var(--cp-icon) 18%, transparent);
}

.cp_value_card:hover .cp_icon i {
    -webkit-mask-image: none;
    mask-image: none;
}

@keyframes cpValBorder {
    to { --cp-va: 360deg; }
}

@keyframes cpValLine1 { 0% { transform: scaleX(0); opacity: 1; } 13%, 84% { transform: scaleX(1); opacity: 1; } 93%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes cpValIcon1 { 0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 11%, 84% { -webkit-mask-position: 50% 0; mask-position: 50% 0; } 93%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; } }
@keyframes cpValNum1 { 0% { opacity: 0.35; transform: translateY(6px); } 9%, 84% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0.35; transform: translateY(6px); } }
@keyframes cpValLine2 { 0%, 16% { transform: scaleX(0); opacity: 1; } 29%, 84% { transform: scaleX(1); opacity: 1; } 93%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes cpValIcon2 { 0%, 16% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 27%, 84% { -webkit-mask-position: 50% 0; mask-position: 50% 0; } 93%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; } }
@keyframes cpValNum2 { 0%, 16% { opacity: 0.35; transform: translateY(6px); } 25%, 84% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0.35; transform: translateY(6px); } }
@keyframes cpValLine3 { 0%, 32% { transform: scaleX(0); opacity: 1; } 45%, 84% { transform: scaleX(1); opacity: 1; } 93%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes cpValIcon3 { 0%, 32% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 43%, 84% { -webkit-mask-position: 50% 0; mask-position: 50% 0; } 93%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; } }
@keyframes cpValNum3 { 0%, 32% { opacity: 0.35; transform: translateY(6px); } 41%, 84% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0.35; transform: translateY(6px); } }
@keyframes cpValLine4 { 0%, 48% { transform: scaleX(0); opacity: 1; } 61%, 84% { transform: scaleX(1); opacity: 1; } 93%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes cpValIcon4 { 0%, 48% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 59%, 84% { -webkit-mask-position: 50% 0; mask-position: 50% 0; } 93%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; } }
@keyframes cpValNum4 { 0%, 48% { opacity: 0.35; transform: translateY(6px); } 57%, 84% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0.35; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
    .cp_value_card::before {
        display: none;
    }

    .cp_value_card::after {
        animation: none;
        transform: scaleX(1);
    }

    .cp_value_card .cp_icon i {
        -webkit-mask-image: none;
        mask-image: none;
        animation: none;
    }

    .cp_value_card .cp_value_num {
        animation: none;
    }
}

/* the border lights are offset so the four cards do not move in step */
.cp_reveal_group > [class*="col-"]:nth-child(2) .cp_value_card::before { animation-delay: -1.75s; }
.cp_reveal_group > [class*="col-"]:nth-child(3) .cp_value_card::before { animation-delay: -3.5s; }
.cp_reveal_group > [class*="col-"]:nth-child(4) .cp_value_card::before { animation-delay: -5.25s; }


/* ---- Stat strip: figures and words on one baseline ----
   A number ("50+") is set larger than a word value ("Built to fit"), so in a
   mixed row the icons above them sat at different heights. Every value now
   occupies the height of the large figure, which lines up the icons, values
   and labels across the row. */
.cp_stats {
    --cp-stat-h: calc(clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem) * 1.1);
}

.cp_stat_value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--cp-stat-h);
}

/* top-aligned, so a label that wraps onto two lines in one cell does not push
   that cell's icon and value out of line with its neighbours */
.cp_stat {
    justify-content: flex-start;
}


/* ---- Card border that draws itself on hover (.cp_card_trace) ----
   A line starts at the top of the card and runs clockwise round its edge
   while the pointer is over it, then unwinds. It is drawn on the card's own
   border box (inset -1px covers the 1px border) and, being inside the card,
   lifts with it on hover. --cp-trace is the angle drawn so far; a browser
   without @property shows the full border at once instead of animating. */
@property --cp-trace {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.cp_card_trace {
    position: relative;
}

.cp_card_trace::after {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(from 0deg, var(--cp-icon, var(--cp-blue)) var(--cp-trace), transparent var(--cp-trace));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
    transition: --cp-trace 0.9s ease-in-out;
}

.cp_card_trace:hover::after,
.cp_card_trace:focus-within::after {
    --cp-trace: 360deg;
}

@media (prefers-reduced-motion: reduce) {
    .cp_card_trace::after {
        transition: none;
    }
}


/* ---- Info cards: fill their height ----
   Two info cards sit side by side and stretch to the taller one. Their lists
   take up the spare height instead of leaving a blank band at the bottom. */
.cp_info_card {
    display: flex;
    flex-direction: column;
}

.cp_info_card .cp_timeline {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cp_info_card .cp_timeline li {
    flex: 1;
}

.cp_info_card .cp_timeline li:last-child {
    flex: 0 0 auto;
}

/* ---- Eligibility rows (Internships > Who Can Apply) ----
   Icon, a heading you can scan, and one line of detail, at a comfortable
   reading size. Each row is tinted with its own colour (.cp_icon_* on the row
   passes --cp-icon down). */
.cp_elig_list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.cp_elig_item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--cp-icon) 14%, var(--cp-line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--cp-icon) 5%, #ffffff);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.cp_elig_item:hover {
    transform: translateX(4px);
    border-color: color-mix(in srgb, var(--cp-icon) 38%, var(--cp-line));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--cp-icon) 14%, transparent);
}

.cp_elig_item .cp_icon {
    width: 48px;
    height: 48px;
    margin-bottom: 0;
    border-radius: 14px;
    font-size: 1.15rem;
    background: #ffffff;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--cp-icon) 16%, transparent);
}

.cp_elig_item:hover .cp_icon[class*="cp_icon_"] {
    background: var(--cp-icon);
    color: #ffffff;
}

.cp_elig_title {
    margin: 0 0 3px;
    font-family: var(--th-font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--cp-ink);
}

.cp_elig_text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--cp-text);
}

@media (max-width: 575.98px) {
    .cp_elig_item {
        align-items: flex-start;
        gap: 12px;
        padding: 12px;
    }

    .cp_elig_item .cp_icon {
        width: 42px;
        height: 42px;
    }

    .cp_elig_text {
        font-size: 0.9375rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp_elig_item {
        transition: none;
    }

    .cp_elig_item:hover {
        transform: none;
    }
}

/* the card is now a column, so its tag would stretch across; keep it a pill */
.cp_info_card > .cp_hero_tag {
    align-self: flex-start;
}

.cp_info_card > .cp_form_intro {
    margin-bottom: 0;
}

/* A traced card that carries a .cp_icon_* tint draws its line in that colour
   (--cp-icon); the others fall back to the brand blue. */
.cp_card_trace[class*="cp_icon_"]:hover {
    border-color: color-mix(in srgb, var(--cp-icon) 30%, var(--cp-line));
    box-shadow: 0 22px 44px color-mix(in srgb, var(--cp-icon) 16%, transparent);
}


/* Page header illustrations: reduced-motion users get the still version. */
@media (prefers-reduced-motion: reduce) {
    .page_art_portfolio { content: url("../images/pages/portfolio-hero-static.svg"); }
    .page_art_platforms { content: url("../images/pages/platforms-hero-static.svg"); }
    .page_art_internships { content: url("../images/pages/internships-hero-static.svg"); }
    .page_art_career { content: url("../images/pages/career-hero-static.svg"); }
}


/* ==========================================================================
   Contact page (ct_)
   ========================================================================== */

/* ---- Hero ---- */
.ct_hero {
    position: relative;
    overflow: hidden;
    padding-bottom: 72px;
}

.ct_hero > .container {
    position: relative;
    z-index: 1;
}

/* soft colour pools drifting behind the copy and the form */
.ct_blobs span {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    animation: ctBlob 16s ease-in-out infinite alternate;
}

.ct_blobs span:nth-child(1) { width: 380px; height: 380px; left: -90px; top: -60px; background: #bcd7ff; }
.ct_blobs span:nth-child(2) { width: 320px; height: 320px; right: 6%; top: 10%; background: #e3c8ff; animation-duration: 20s; animation-delay: -6s; }
.ct_blobs span:nth-child(3) { width: 300px; height: 300px; left: 38%; bottom: -120px; background: #b8f0e6; animation-duration: 24s; animation-delay: -11s; }

@keyframes ctBlob {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(50px, 36px, 0) scale(1.18); }
}

.ct_points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.ct_points li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--cp-ink);
}

.ct_points i {
    color: #16a34a;
}

.ct_quick {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.ct_quick_link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px 10px 10px;
    background: #ffffff;
    border: 1px solid var(--cp-line);
    border-radius: 50px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1.3;
    color: var(--cp-ink);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ct_quick_link small {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cp-muted);
}

.ct_quick_icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--cp-gradient);
    color: #ffffff;
}

.ct_quick_link:hover,
.ct_quick_link:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(6, 111, 182, 0.3);
    box-shadow: 0 14px 28px rgba(6, 111, 182, 0.16);
    color: var(--cp-blue);
}

/* ---- Form card ---- */
.ct_form_wrap {
    top: 0;
}

.ct_form_card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 30px 70px rgba(15, 42, 74, 0.16);
}

/* (no band along the top of the form card: removed on request) */

@keyframes ctBand {
    to { background-position: -300% 0; }
}

.ct_form_card .cdf_title {
    margin-bottom: 6px;
}

.ct_form_note {
    margin: 0 0 18px;
    font-size: var(--fs-2xs);
    line-height: 1.5;
    color: var(--cp-muted);
}

/* ---- Ways to reach us ---- */
.ct_method {
    align-items: flex-start;
    text-decoration: none;
    color: var(--cp-ink);
}

.ct_method:hover,
.ct_method:focus-visible {
    color: var(--cp-ink);
}

.ct_method_title {
    font-family: var(--th-font-heading);
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 4px;
}

.ct_method_value {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--cp-icon, var(--cp-blue));
    overflow-wrap: anywhere;
}

.ct_method_hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
    font-size: var(--fs-2xs);
    color: var(--cp-muted);
}

.ct_method_hint i {
    font-size: 0.7rem;
    transition: transform 0.25s ease;
}

.ct_method:hover .ct_method_hint i {
    transform: translateX(4px);
}

/* ---- Offices ---- */
.ct_office {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 34px 32px;
    border: 1px solid color-mix(in srgb, var(--cp-icon) 16%, var(--cp-line));
    border-radius: 24px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--cp-icon) 8%, #ffffff) 0%, #ffffff 60%);
    box-shadow: var(--cp-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ct_office:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px color-mix(in srgb, var(--cp-icon) 16%, transparent);
}

.ct_office_head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.ct_office_badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 50px;
    background: color-mix(in srgb, var(--cp-icon) 12%, #ffffff);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cp-icon);
}

.ct_office_city {
    margin: 10px 0 0;
    font-size: var(--fs-h3);
    font-weight: 800;
    line-height: 1.2;
    color: var(--cp-ink);
}

.ct_office_city small {
    margin-left: 6px;
    font-family: var(--th-font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--cp-muted);
}

.ct_office_flag,
.ct_soon_flag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.ct_office_flag img,
.ct_soon_flag img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.ct_office_address {
    display: flex;
    gap: 12px;
    margin: 0 0 18px;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--cp-text);
}

.ct_office_address i {
    margin-top: 5px;
    color: var(--cp-icon);
}

.ct_office_links {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 18px 0 0;
    border-top: 1px solid color-mix(in srgb, var(--cp-icon) 14%, var(--cp-line));
    list-style: none;
}

.ct_office_links a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--cp-ink);
    transition: color 0.2s ease;
}

.ct_office_links a i {
    width: 16px;
    color: var(--cp-icon);
}

.ct_office_links a:hover,
.ct_office_links a:focus-visible {
    color: var(--cp-icon);
}

.ct_soon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    margin-top: 26px;
    padding: 18px 24px;
    border: 1px dashed #cbd5e1;
    border-radius: 20px;
    background: var(--cp-soft);
}

.ct_soon_label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cp-muted);
    margin-right: 6px;
}

.ct_soon_item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 8px 8px;
    background: #ffffff;
    border: 1px solid var(--cp-line);
    border-radius: 50px;
}

.ct_soon_flag {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: none;
    background: var(--cp-soft);
}

.ct_soon_flag img {
    width: 26px;
    height: 26px;
}

.ct_soon_text {
    display: flex;
    flex-direction: column;
    font-size: var(--fs-2xs);
    line-height: 1.3;
    color: var(--cp-muted);
}

.ct_soon_text strong {
    font-size: var(--fs-xs);
    color: var(--cp-ink);
}

.ct_soon_pill {
    padding: 4px 10px;
    border-radius: 50px;
    background: #fef3c7;
    font-size: 0.75rem;
    font-weight: 700;
    color: #92400e;
}

@media (max-width: 991.98px) {
    .ct_hero {
        padding-bottom: 48px;
    }
}

@media (max-width: 575.98px) {
    .ct_quick_link {
        flex: 1 1 100%;
    }

    .ct_office {
        padding: 26px 22px;
    }

    .ct_soon {
        padding: 16px;
    }

    .ct_soon_item {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ct_blobs span {
        animation: none;
    }

    .ct_quick_link,
    .ct_office {
        transition: none;
    }

    .ct_quick_link:hover,
    .ct_office:hover {
        transform: none;
    }
}


/* ---- Contact page, second pass ---- */

/* richer hero surface: soft gradient with a faint dot grid under the colour pools */
.main_dashboard_wrapper.ct_hero {
    background:
        radial-gradient(rgba(6, 111, 182, 0.10) 1.2px, transparent 1.2px) 0 0 / 26px 26px,
        linear-gradient(135deg, #eaf2ff 0%, #f3edff 52%, #e9fbf5 100%);
}

.ct_blobs span {
    opacity: 0.7;
}

/* "we reply within 24 hours" pill with a live dot */
.ct_status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 8px 16px 8px 12px;
    border: 1px solid rgba(22, 163, 74, 0.25);
    border-radius: 50px;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.10);
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: #166534;
}

.ct_status_dot {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #16a34a;
}

.ct_status_dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #16a34a;
    animation: ctPing 1.8s ease-out infinite;
}

@keyframes ctPing {
    from { transform: scale(1); opacity: 0.7; }
    to   { transform: scale(3.2); opacity: 0; }
}

/* the middle of the headline in the brand gradient, with the colour sliding */
.cp_hero .dashboard_heading h1 .ct_h1_accent {
    background: linear-gradient(90deg, #066FB6, #12B3E9, #C750DC, #066FB6);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: ctBand 9s linear infinite;
}

/* style.css colours every <span> in a hero heading block; these pills set their own */
.dashboard_heading .ct_quick_link span {
    color: inherit;
}

.dashboard_heading .ct_quick_link .ct_quick_icon {
    color: #ffffff;
}

.dashboard_heading .ct_quick_link small {
    color: var(--cp-muted);
}

.dashboard_heading .ct_status_dot {
    color: transparent;
}

/* ---- What happens next: illustration + timeline ---- */
.ct_flow_visual {
    display: flex;
    justify-content: center;
}

.ct_flow_art {
    width: 100%;
    max-width: 520px;
    height: auto;
}

.common_Heading.ct_heading_left {
    align-items: flex-start;
    text-align: left;
    margin-bottom: 8px;
}

.common_Heading.ct_heading_left h2,
.common_Heading.ct_heading_left p {
    text-align: left;
    margin-left: 0;
}

.ct_timeline .cp_timeline_title {
    font-size: var(--fs-h4);
}

.ct_timeline .cp_timeline_text {
    font-size: var(--fs-xs);
    max-width: 520px;
}

@media (max-width: 991.98px) {
    .ct_flow_art {
        max-width: 400px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ct_status_dot::after,
    .cp_hero .dashboard_heading h1 .ct_h1_accent {
        animation: none;
    }

    .ct_flow_art {
        content: url("../images/pages/contact-flow-static.svg");
    }
}

/* style.css sets size, weight and colour on every <span> inside a hero heading
   block. The highlighted words in the headline must stay headline-sized. */
.cp_hero .dashboard_heading h1 .ct_h1_accent {
    font: inherit;
    letter-spacing: inherit;
    display: inline;
    margin: 0;
    padding: 0;
}

.dashboard_heading .ct_status_dot {
    display: inline-block;
    font-size: 0;
    margin: 0;
    padding: 0;
}

/* ---- Contact hero: call / email pills ----
   style.css gives every <span> in a hero heading block a 7px bottom margin and
   its own font size, which pushed the icon and the text off centre inside the
   pill. Reset that here, give the icon the same 10px clearance on its top,
   bottom and outer side, and the same clearance after the text in both. */
.dashboard_heading .ct_quick_link span,
.dashboard_heading .ct_quick_link small {
    margin: 0;
    font-family: inherit;
}

.dashboard_heading .ct_quick_link > span:last-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1.3;
}

.dashboard_heading .ct_quick_link small {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
}

.ct_quick_link {
    padding: 10px 24px 10px 10px;
}

/* text never wraps inside a pill; if both do not fit side by side, the second drops below */
.ct_quick_link {
    white-space: nowrap;
}


/* ==========================================================================
   Legal pages (lg_): Privacy Policy, Terms & Conditions
   ========================================================================== */

/* ---- Hero ---- */
.main_dashboard_wrapper.lg_hero {
    padding-bottom: 64px;
    background:
        radial-gradient(rgba(6, 111, 182, 0.09) 1.2px, transparent 1.2px) 0 0 / 26px 26px,
        linear-gradient(135deg, #eaf2ff 0%, #f3edff 55%, #eef8ff 100%);
}

.lg_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.lg_meta li {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px 10px 12px;
    background: #ffffff;
    border: 1px solid var(--cp-line);
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1.3;
    color: var(--cp-ink);
}

.lg_meta li i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(6, 111, 182, 0.1);
    color: var(--cp-blue);
}

.lg_meta small {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cp-muted);
}

.lg_hero .cp_hero_actions {
    margin-top: 26px;
}

/* ---- Body ---- */
.lg_body {
    padding: 64px 0 72px;
    background: #ffffff;
}

/* index that stays in view while the document scrolls */
.lg_toc {
    position: sticky;
    top: 24px;
    overflow: hidden;
    padding: 26px 22px 22px;
    background: var(--cp-soft);
    border: 1px solid var(--cp-line);
    border-radius: 20px;
}

/* reading progress along the top edge (filled by pages.js) */
.lg_toc_progress {
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: rgba(6, 111, 182, 0.12);
}

.lg_toc_progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--cp-gradient);
    transition: width 0.15s linear;
}

.lg_toc_title {
    margin: 0 0 12px;
    padding: 0 10px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cp-muted);
}

.lg_toc_list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lg_toc_list a {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1.4;
    color: var(--cp-text);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.lg_toc_list a span {
    flex: 0 0 auto;
    font-family: var(--th-font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.6;
    color: #94a3b8;
    transition: color 0.2s ease;
}

.lg_toc_list a:hover,
.lg_toc_list a:focus-visible {
    background: #ffffff;
    color: var(--cp-blue);
}

.lg_toc_list a.active {
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(6, 111, 182, 0.10);
    font-weight: 700;
    color: var(--cp-blue);
}

.lg_toc_list a.active span {
    color: var(--cp-blue);
}

.lg_toc_other {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 14px 10px 0;
    border-top: 1px solid var(--cp-line);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--cp-blue);
}

.lg_toc_other i:last-child {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.lg_toc_other:hover i:last-child {
    transform: translateX(4px);
}

/* the document itself: the old single white box becomes open, numbered sections */
.privacy_policy_wrapper .privacy-box.lg_content,
.lg_content.privacy-box {
    max-width: none;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.lg_intro {
    padding: 26px 28px;
    border: 1px solid var(--cp-line);
    border-left: 4px solid var(--cp-blue);
    border-radius: 16px;
    background: var(--cp-soft);
}

.lg_intro > :last-child {
    margin-bottom: 0;
}

.lg_section {
    padding: 34px 0 0;
    margin-top: 34px;
    border-top: 1px solid var(--cp-line);
    scroll-margin-top: 24px;
}

.lg_section > :last-child {
    margin-bottom: 0;
}

.lg_content.privacy-box .lg_section h2 {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    font-size: var(--fs-h3);
    line-height: 1.3;
}

.lg_num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--cp-gradient);
    box-shadow: 0 8px 18px rgba(6, 111, 182, 0.22);
    font-family: var(--th-font-heading);
    font-size: 0.9375rem;
    font-weight: 800;
    color: #ffffff;
}

.lg_content.privacy-box .info-box {
    border-radius: 14px;
}

@media (max-width: 991.98px) {
    .lg_body {
        padding: 44px 0 56px;
    }

    .lg_toc {
        position: static;
    }

    .lg_toc_list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 8px;
    }
}

@media (max-width: 575.98px) {
    .lg_toc_list {
        grid-template-columns: 1fr;
    }

    .lg_meta li {
        flex: 1 1 100%;
    }

    .lg_intro {
        padding: 20px;
    }

    .lg_num {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lg_art_privacy { content: url("../images/pages/privacy-hero-static.svg"); }
    .lg_art_terms { content: url("../images/pages/terms-hero-static.svg"); }

    .lg_toc_progress span {
        transition: none;
    }
}

/* printing: just the document */
@media print {
    #header,
    footer,
    .lg_toc,
    .lg_hero .main_dashboard_img,
    .lg_hero .cp_hero_actions,
    .cp_cta_section,
    .top_header_wrapper,
    .announcement_bar {
        display: none !important;
    }

    .lg_body .col-lg-8 {
        width: 100%;
    }

    .lg_section {
        break-inside: avoid-page;
    }
}

/* The site sets overflow-x: hidden on both <html> and <body>, which turns
   <body> into a scroll container of its own and stops position: sticky from
   working inside it. On the legal pages <body> clips instead (same visual
   result, no scroll container), so the index can stay in view. */
body:has(.lg_toc) {
    /* !important only because the rule it replaces in style.css uses it */
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* Legal pages: a plain document header, no illustration. Compact, with a
   quiet flat tint instead of the decorative gradient and dot grid. */
.main_dashboard_wrapper.lg_hero {
    min-height: 0;
    padding: 40px 0 44px;
    background: var(--cp-soft);
    border-bottom: 1px solid var(--cp-line);
}

.lg_hero .dashboard_heading > p {
    max-width: 720px;
}

/* drops the shared page-header picture (about.css) from the legal header */
section#dashboard.main_dashboard_wrapper.lg_hero {
    min-height: 0;
    height: auto;
    padding: 40px 0 44px;
    /* !important only because about.css sets the banner picture with it */
    background: var(--cp-soft) !important;
    border-bottom: 1px solid var(--cp-line);
}


/* ---- Internships: certificate section ---- */
.ic_cert_section {
    background:
        radial-gradient(60% 80% at 100% 0%, rgba(18, 179, 233, 0.10), rgba(18, 179, 233, 0) 70%),
        radial-gradient(50% 70% at 0% 100%, rgba(199, 80, 220, 0.08), rgba(199, 80, 220, 0) 70%),
        #ffffff;
}

.ic_cert_points {
    display: grid;
    gap: 16px;
    margin: 6px 0 30px;
    padding: 0;
    list-style: none;
}

.ic_cert_points li {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: var(--fs-xs);
    line-height: 1.55;
    color: var(--cp-text);
}

.ic_cert_points .cp_icon {
    width: 46px;
    height: 46px;
    margin-bottom: 0;
    border-radius: 14px;
    font-size: 1.1rem;
}

.ic_cert_points strong {
    display: block;
    font-family: var(--th-font-heading);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--cp-ink);
}

/* the certificate sits on a soft blue plate, tilted a little, and straightens on hover */
.ic_cert_frame {
    position: relative;
    margin: 0;
    padding: 34px 30px 22px;
    border-radius: 28px;
    background: linear-gradient(150deg, #eaf4ff 0%, #f3edff 100%);
    text-align: center;
}

.ic_cert_frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 26px 54px rgba(15, 42, 74, 0.20), 0 4px 10px rgba(15, 42, 74, 0.08);
    transform: rotate(-2deg);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
}

.ic_cert_frame:hover img {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 34px 64px rgba(15, 42, 74, 0.24), 0 6px 14px rgba(15, 42, 74, 0.10);
}

.ic_cert_frame figcaption {
    margin-top: 20px;
    font-size: var(--fs-2xs);
    color: var(--cp-muted);
}

@media (max-width: 575.98px) {
    .ic_cert_frame {
        padding: 22px 16px 16px;
        border-radius: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ic_cert_frame img {
        transition: none;
    }
}


/* ---- Side panel, compact variant (Internships > Ready to Start Learning?) ----
   Steps keep their normal spacing instead of stretching; the height left over
   beside the form carries a short "What you get" block, centred in that space,
   and the contact note stays at the bottom. */
.cp_panel_compact .cp_timeline {
    flex: 0 0 auto;
}

.cp_panel_compact .cp_timeline li {
    flex: 0 0 auto;
}

.cp_panel_perks {
    margin: auto 0;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.10);
}

.cp_panel_perks_title {
    margin: 0 0 16px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}

.cp_panel_perks ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp_panel_perks li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--fs-2xs);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.82);
}

.cp_panel_perks strong {
    display: block;
    font-family: var(--th-font-heading);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: #ffffff;
}

.cp_panel_perk_icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #ffffff;
    color: var(--cp-blue);
}

.cp_panel_compact .cp_panel_perks {
    margin-top: 28px;
    margin-bottom: 4px;
}

@media (min-width: 992px) {
    .cp_panel_compact .cp_panel_perks {
        margin: auto 0;
    }
}

@media (max-width: 399.98px) {
    .cp_panel_perks ul {
        grid-template-columns: 1fr;
    }
}

/* beside the form on desktop the panel is tall: a little more air inside the
   steps and the block, so the leftover space is shared out evenly */
@media (min-width: 1200px) {
    .cp_panel_compact .cp_timeline li:not(:last-child) {
        padding-bottom: 44px;
    }

    .cp_panel_compact .cp_panel_perks {
        padding: 28px 26px;
    }

    .cp_panel_compact .cp_panel_perks ul {
        gap: 24px 16px;
    }
}