/* ======================================
   CORPORATE SERVICES - "Undercover Operation" (.cs-uo: dark, image left), "Financial Fraud Verification"
   (.cs-ff: warm white, image right) "Business / Background Verification" (.cs-bv: cream, content left)
   "Cheating Employee" (.cs-ce: cream, image left)
   and "Corporate Due Diligence" (.cs-dd: cream, evidence collage left with layered panels)
   used by corporate.html - every rule is scoped under .cs
====================================== */

.cs {
    --cs-red: #e31e24;
    --cs-black: #101010;
    --cs-charcoal: #1a1a1a;
    --cs-cream: #f7f4ef;
    --cs-text: #686868;
    --cs-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    position: relative;
    padding: clamp(40px, 4.4vw, 66px) 0;
    overflow: hidden;
    font-family: "DM Sans", sans-serif;
}

.cs *,
.cs *::before,
.cs *::after {
    box-sizing: border-box;
    font-style: normal;
}

.cs-grid {
    display: grid;
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
    gap: clamp(32px, 3.4vw, 54px);
    align-items: stretch;
}

/* ---- the image: a slanted edge, a red slab behind it, a slow zoom on hover ---- */
.cs-visual {
    position: relative;
    min-height: clamp(380px, 31vw, 560px);
}

.cs-accent {
    position: absolute;
    top: 5%;
    bottom: 5%;
    width: 30%;
    background: linear-gradient(160deg, var(--cs-red) 0%, #9d1218 100%);
}

.cs-reveal {
    position: absolute;
    inset: 0;
}

.cs-frame {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    background: var(--cs-charcoal);
}

.cs-zoom {
    position: absolute;
    inset: 0;
    transition: transform 1s var(--cs-ease);
}

.cs-frame:hover .cs-zoom {
    transform: scale(1.04);
}

/* a little taller than the frame, so a scroll parallax never shows an edge */
.cs-img {
    position: absolute;
    top: -6%;
    left: 0;
    width: 100%;
    height: 112%;
    max-width: none;
    object-fit: cover;
    transition: filter 0.6s ease;
}

.cs-frame:hover .cs-img {
    filter: brightness(1.08);
}

.cs-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cs-print {
    position: absolute;
    width: clamp(120px, 12vw, 210px);
    height: auto;
    pointer-events: none;
}

/* ---- text ---- */
.cs-content {
    position: relative;
    z-index: 1;
    min-width: 0;
    align-self: center;
}

.cs-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 12px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cs-red);
}

.cs-eyebrow::before {
    content: "";
    width: 38px;
    height: 2px;
    background: var(--cs-red);
}

.cs .cs-title {
    margin: 0 0 16px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(32px, 3.9vw, 56px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.015em;
}

.cs-word {
    display: inline-block;
}

.cs-red {
    color: var(--cs-red);
}

.cs-text {
    margin: 0 0 12px;
    font-size: clamp(14.5px, 1.02vw, 16px);
    line-height: 1.7;
}

/* ---- three highlights, separated by thin lines ---- */
.cs-hls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.cs-hl {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    margin: 0;
    padding: 4px clamp(12px, 1.6vw, 24px);
    transition: transform 0.35s var(--cs-ease);
}

.cs-hl:first-child {
    padding-left: 0;
}

.cs-hl + .cs-hl::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8%;
    bottom: 8%;
    width: 1px;
}

.cs-hl-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: var(--cs-red);
    transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, transform 0.35s var(--cs-ease);
}

.cs-hl-icon svg {
    display: block;
    width: 48%;
    height: 48%;
}

.cs-hl-label {
    min-width: 0;
    line-height: 1.25;
}

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

.cs-hl:hover .cs-hl-icon {
    background: var(--cs-red);
    color: #ffffff;
    transform: scale(1.06);
}

/* ======================================
   1 - UNDERCOVER OPERATION (dark, image left)
====================================== */

.cs-uo {
    background:
        radial-gradient(ellipse 55% 70% at 100% 0%, rgba(227, 30, 36, 0.13), transparent 65%),
        radial-gradient(ellipse 40% 50% at 0% 100%, rgba(227, 30, 36, 0.07), transparent 70%),
        var(--cs-black);
    color: #ffffff;
}

/* the text here is short: the picture only needs to be a little taller than it */
.cs-uo .cs-visual {
    min-height: clamp(340px, 23vw, 440px);
}

.cs-uo .cs-visual .cs-accent {
    right: -10px;
    clip-path: polygon(30% 0, 100% 0, 78% 100%, 0 100%);
}

.cs-uo .cs-frame {
    border-radius: 4px 0 0 4px;
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
}

.cs-uo .cs-img {
    object-position: 50% 22%;
    filter: contrast(1.06) saturate(0.9);
}

/* dark toward the text, a red wash from the corner, and two thin red evidence lines */
.cs-uo .cs-shade {
    background:
        linear-gradient(90deg, rgba(16, 16, 16, 0) 55%, rgba(16, 16, 16, 0.7) 100%),
        linear-gradient(180deg, rgba(16, 16, 16, 0.2) 0%, rgba(16, 16, 16, 0) 30%, rgba(16, 16, 16, 0.55) 100%),
        linear-gradient(135deg, rgba(227, 30, 36, 0.28) 0%, rgba(227, 30, 36, 0) 45%);
}

.cs-uo .cs-shade::before,
.cs-uo .cs-shade::after {
    content: "";
    position: absolute;
    height: 1px;
    background: rgba(227, 30, 36, 0.75);
    transform-origin: 0 50%;
}

.cs-uo .cs-shade::before {
    top: 20%;
    left: -3%;
    width: 46%;
    transform: rotate(13deg);
}

.cs-uo .cs-shade::after {
    top: 70%;
    left: 36%;
    width: 42%;
    transform: rotate(-12deg);
}

.cs-uo .cs-print-light {
    top: -8%;
    right: -2%;
    color: #ffffff;
    opacity: 0.07;
    z-index: -1;
}

.cs-uo .cs-title {
    color: #ffffff;
}

.cs-uo .cs-text {
    max-width: 700px;
    color: rgba(255, 255, 255, 0.78);
}

.cs-uo .cs-hl + .cs-hl::before {
    background: rgba(255, 255, 255, 0.16);
}

.cs-uo .cs-hl-icon {
    border: 1.5px solid var(--cs-red);
    background: transparent;
}

.cs-uo .cs-hl:hover .cs-hl-icon {
    box-shadow: 0 0 0 5px rgba(227, 30, 36, 0.18);
}

.cs-uo .cs-hl-label {
    max-width: 9em;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(15px, 1.2vw, 18px);
    font-weight: 500;
    color: #ffffff;
}

/* ======================================
   2 - FINANCIAL FRAUD VERIFICATION (warm white, image right)
====================================== */

.cs-ff {
    background:
        radial-gradient(ellipse 45% 55% at 0% 100%, rgba(227, 30, 36, 0.05), transparent 70%),
        var(--cs-cream);
    color: var(--cs-black);
}

.cs-ff .cs-visual .cs-accent {
    left: -10px;
    clip-path: polygon(0 0, 70% 0, 100% 100%, 22% 100%);
}

.cs-ff .cs-frame {
    border-radius: 0 4px 4px 0;
    clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
}

.cs-ff .cs-img {
    object-position: 100% 50%;
    filter: grayscale(0.35) contrast(1.08) brightness(0.95);
}

.cs-ff .cs-shade {
    background:
        linear-gradient(135deg, rgba(227, 30, 36, 0.24) 0%, rgba(227, 30, 36, 0) 40%),
        linear-gradient(180deg, rgba(16, 16, 16, 0) 60%, rgba(16, 16, 16, 0.5) 100%);
}

.cs-ff .cs-print-dark {
    bottom: 12%;
    left: -4%;
    color: var(--cs-black);
    opacity: 0.06;
    z-index: -1;
}

.cs-ff .cs-title {
    color: var(--cs-black);
}

.cs-ff .cs-text {
    max-width: 760px;
    color: var(--cs-text);
}

.cs-ff .cs-hls {
    max-width: 760px;
    margin-top: 20px;
}

.cs-ff .cs-hl + .cs-hl::before {
    background: rgba(16, 16, 16, 0.13);
}

.cs-ff .cs-hl-icon {
    background: rgba(227, 30, 36, 0.1);
}

.cs-ff .cs-hl:hover .cs-hl-icon {
    box-shadow: 0 0 0 5px rgba(227, 30, 36, 0.14);
}

.cs-ff .cs-hl-label {
    max-width: 7.5em;
    font-size: clamp(14px, 1.05vw, 15.5px);
    font-weight: 700;
    color: var(--cs-black);
}

/* the site's own red button, with an arrow that moves on hover */
.cs-cta {
    margin-top: 22px;
}

.cs-cta i {
    margin-left: 10px;
    transition: transform 0.3s var(--cs-ease);
}

.cs-cta:hover i,
.cs-cta:focus-visible i {
    transform: translateX(5px);
}

.cs-cta:focus-visible {
    outline: 2px solid var(--cs-black);
    outline-offset: 3px;
}

/* ---- responsive ---- */
@media (max-width: 1199px) {
    .cs-grid {
        gap: 32px;
    }

    .cs-visual,
    .cs-uo .cs-visual {
        min-height: 420px;
    }

    /* the text column is narrow here: icon above the label */
    .cs-hl {
        flex-direction: column;
        gap: 10px;
        padding: 4px 8px;
        text-align: center;
    }

    .cs-hl:first-child {
        padding-left: 8px;
    }

    .cs-uo .cs-hl-label,
    .cs-ff .cs-hl-label {
        max-width: none;
    }
}

@media (max-width: 991px) {
    .cs-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Undercover: image first, then the text. Financial Fraud: text first, then the image (the order of the markup). */
    .cs-visual,
    .cs-uo .cs-visual {
        min-height: 0;
        height: clamp(250px, 50vw, 400px);
    }

    .cs-uo .cs-visual {
        margin-right: 10px;
    }

    .cs-ff .cs-visual {
        margin-left: 10px;
    }

    .cs-img {
        height: 100%;
        top: 0;
    }

    .cs-hl {
        flex-direction: row;
        gap: 14px;
        padding: 4px clamp(12px, 2vw, 22px);
        text-align: left;
    }

    .cs-hl:first-child {
        padding-left: 0;
    }
}

@media (max-width: 575px) {
    .cs-hls {
        grid-template-columns: 1fr;
        margin-top: 18px;
    }

    .cs-hl,
    .cs-hl:first-child {
        padding: 12px 0;
    }

    .cs-uo .cs-hl {
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .cs-ff .cs-hl,
    .cs-ce .cs-hl {
        border-bottom: 1px solid rgba(16, 16, 16, 0.12);
    }

    .cs-hl + .cs-hl::before {
        display: none;
    }

    .cs-hl-icon {
        width: 46px;
        height: 46px;
    }

    .cs-cta {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .cs-print {
        display: none;
    }
}

/* ======================================
   3 - BUSINESS / BACKGROUND VERIFICATION (cream, content left 45%, image right 55%)
====================================== */

.cs-bv {
    background:
        radial-gradient(ellipse 40% 60% at 0% 0%, rgba(227, 30, 36, 0.05), transparent 70%),
        linear-gradient(90deg, #f7f4ef 0%, #f7f4ef 55%, #f1ede6 100%);
    color: var(--cs-black);
}

.cs-bv .cs-grid {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
}

.cs-bv .cs-visual {
    min-height: clamp(400px, 27vw, 520px);
}

.cs-bv .cs-title {
    font-size: clamp(32px, 3.5vw, 54px);
    color: var(--cs-black);
}

/* "Business /" on the first line, "Background Verification" (red) below it */
.cs-bv .cs-line {
    display: block;
}

.cs-bv .cs-text {
    max-width: 640px;
    font-size: clamp(14.5px, 1.06vw, 16.5px);
    color: #666666;
}

/* the three highlights: icon above the label, thin vertical lines between them */
.cs-bv .cs-hls {
    max-width: 640px;
    margin-top: 22px;
}

.cs-bv .cs-hl,
.cs-bv .cs-hl:first-child {
    flex-direction: column;
    gap: 10px;
    padding: 4px 12px 6px;
    text-align: center;
}

.cs-bv .cs-hl + .cs-hl::before {
    top: 14%;
    bottom: 14%;
    background: rgba(17, 17, 17, 0.15);
}

.cs-bv .cs-hl-icon {
    width: clamp(54px, 4.2vw, 68px);
    height: clamp(54px, 4.2vw, 68px);
    background: rgba(227, 30, 36, 0.1);
}

.cs-bv .cs-hl:hover .cs-hl-icon {
    box-shadow: 0 0 0 5px rgba(227, 30, 36, 0.14);
}

.cs-bv .cs-hl-label {
    max-width: 8.5em;
    font-size: clamp(14px, 1.05vw, 16px);
    font-weight: 700;
    color: var(--cs-black);
}

.cs-bv .cs-print-dark {
    top: -4%;
    right: 3%;
    bottom: auto;
    left: auto;
    opacity: 0.09;
}

/* the picture: a sharper slant, a red slab behind it and a thin red line running along the edge */
.cs-bv .cs-accent {
    left: -10px;
    clip-path: polygon(0 0, 70% 0, 100% 100%, 22% 100%);
}

.cs-bv .cs-frame {
    border-radius: 0;
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}

/* the photograph is dark on its left half, so it is enlarged and anchored right to show the board, lamp and desk */
.cs-bv .cs-img {
    left: auto;
    right: 0;
    width: 122%;
    object-position: 100% 72%;
    filter: brightness(1.75) contrast(1.12) saturate(1.1);
}

.cs-bv .cs-shade {
    background:
        linear-gradient(90deg, rgba(17, 17, 17, 0.4) 0%, rgba(17, 17, 17, 0) 32%),
        linear-gradient(180deg, rgba(17, 17, 17, 0.18) 0%, rgba(17, 17, 17, 0) 26%, rgba(17, 17, 17, 0.4) 100%);
}

.cs-edge {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: translateX(-26px);
    pointer-events: none;
}

.cs-edge line {
    stroke: var(--cs-red);
    stroke-width: 1.5;
}

/* a verification stamp over the photograph */
.cs-stamp {
    position: absolute;
    left: clamp(34px, 4.6vw, 70px);
    bottom: clamp(20px, 2.6vw, 34px);
    padding: 7px 14px 7px 16px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 3px;
    background: rgba(17, 17, 17, 0.4);
    box-shadow: 0 0 0 1px rgba(227, 30, 36, 0.8), 0 0 0 5px rgba(227, 30, 36, 0.25);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #ffffff;
    transform: rotate(-4deg);
}

@media (max-width: 1199px) {
    .cs-bv .cs-visual {
        min-height: 440px;
    }
}

@media (max-width: 991px) {
    /* stack: text first, then the image (the order of the markup) */
    .cs-bv .cs-grid {
        grid-template-columns: 1fr;
    }

    .cs-bv .cs-visual {
        min-height: 0;
        margin-left: 10px;
    }

    .cs-bv .cs-img {
        width: 100%;
        object-position: 78% 60%;
    }

    /* the text column is full width here, so the three highlights keep their icon-above-label look */
    .cs-bv .cs-hls {
        max-width: none;
    }

    .cs-edge {
        transform: translateX(-16px);
    }
}

@media (max-width: 575px) {
    /* phones: one highlight per row, icon on the left */
    .cs-bv .cs-hl,
    .cs-bv .cs-hl:first-child {
        flex-direction: row;
        gap: 14px;
        padding: 12px 0;
        text-align: left;
    }

    .cs-bv .cs-hl-label {
        max-width: none;
    }

    .cs-bv .cs-hl-icon {
        width: 46px;
        height: 46px;
    }

    .cs-bv .cs-hl {
        border-bottom: 1px solid rgba(17, 17, 17, 0.12);
    }

    .cs-stamp {
        left: 28px;
        font-size: 11px;
        letter-spacing: 0.16em;
    }
}

/* ======================================
   4 - CHEATING EMPLOYEE (cream, image left 45%, content right 55%, five paragraphs)
====================================== */

.cs-ce {
    background:
        radial-gradient(ellipse 40% 50% at 100% 0%, rgba(227, 30, 36, 0.06), transparent 70%),
        radial-gradient(ellipse 35% 45% at 0% 100%, rgba(227, 30, 36, 0.05), transparent 70%),
        var(--cs-cream);
    color: var(--cs-black);
}

.cs-ce .cs-grid {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
}

.cs-ce .cs-visual {
    min-height: clamp(420px, 30vw, 560px);
}

.cs-ce .cs-title {
    font-size: clamp(32px, 3.7vw, 56px);
    color: var(--cs-black);
}

.cs-ce .cs-text {
    max-width: 780px;
    margin-bottom: 11px;
    font-size: clamp(14px, 0.98vw, 15.5px);
    line-height: 1.66;
    color: #666666;
}

.cs-ce .cs-hls {
    max-width: 780px;
    margin-top: 20px;
}

.cs-ce .cs-hl + .cs-hl::before {
    background: rgba(17, 17, 17, 0.14);
}

.cs-ce .cs-hl-icon {
    background: rgba(227, 30, 36, 0.1);
}

.cs-ce .cs-hl:hover .cs-hl-icon {
    box-shadow: 0 0 0 5px rgba(227, 30, 36, 0.14);
}

.cs-ce .cs-hl-label {
    font-size: clamp(14px, 1.05vw, 15.5px);
    font-weight: 700;
    color: var(--cs-black);
}

.cs-ce .cs-print-dark {
    top: -3%;
    right: -2%;
    bottom: auto;
    left: auto;
    opacity: 0.08;
}

/* the picture: slanted on its right edge with a red slab and a thin red line outside it */
.cs-ce .cs-accent {
    right: -10px;
    clip-path: polygon(30% 0, 100% 0, 78% 100%, 0 100%);
}

.cs-ce .cs-frame {
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}

/* black and white photograph with deep red light: grey tones, a red wash from the top right and from the bottom */
.cs-ce .cs-img {
    object-position: 50% 78%;
    filter: grayscale(0.9) contrast(1.18) brightness(1.2);
}

.cs-ce .cs-shade {
    background:
        linear-gradient(225deg, rgba(227, 30, 36, 0.5) 0%, rgba(227, 30, 36, 0.12) 42%, rgba(227, 30, 36, 0) 60%),
        linear-gradient(180deg, rgba(17, 17, 17, 0.35) 0%, rgba(17, 17, 17, 0) 30%, rgba(17, 17, 17, 0.55) 100%);
}

.cs-ce .cs-edge {
    transform: translateX(28px);
}

@media (max-width: 1199px) {
    .cs-ce .cs-visual {
        min-height: 520px;
    }
}

@media (max-width: 991px) {
    /* stack: the image above the content (the order of the markup) */
    .cs-ce .cs-grid {
        grid-template-columns: 1fr;
    }

    .cs-ce .cs-visual {
        min-height: 0;
        margin-right: 10px;
    }

    .cs-ce .cs-img {
        object-position: 50% 72%;
    }

    .cs-ce .cs-edge {
        transform: translateX(16px);
    }
}

/* CHEATING EMPLOYEE: image on the RIGHT (desktop), text on the left. Below 992px the image stays above the text.
   The slanted edge, the red slab and the thin red line move to the picture's left side. */
@media (min-width: 992px) {
    .cs-ce .cs-grid {
        grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    }

    .cs-ce .cs-content {
        order: 1;
    }

    .cs-ce .cs-visual {
        order: 2;
    }

    .cs-ce .cs-accent {
        right: auto;
        left: -10px;
        clip-path: polygon(0 0, 70% 0, 100% 100%, 22% 100%);
    }

    .cs-ce .cs-frame {
        clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
    }

    .cs-ce .cs-edge {
        transform: translateX(-28px);
    }

    .cs-ce .cs-shade {
        background:
            linear-gradient(135deg, rgba(227, 30, 36, 0.5) 0%, rgba(227, 30, 36, 0.12) 42%, rgba(227, 30, 36, 0) 60%),
            linear-gradient(180deg, rgba(17, 17, 17, 0.35) 0%, rgba(17, 17, 17, 0) 30%, rgba(17, 17, 17, 0.55) 100%);
    }

    /* the fingerprint sits in the empty space beside the heading, not over the text */
    .cs-ce .cs-print-dark {
        top: -2%;
        right: 4%;
        width: clamp(90px, 8vw, 140px);
    }
}

/* CHEATING EMPLOYEE, ONE-SCREEN FIT (desktop): the section is exactly as tall as the screen (100vh), its content centred,
   and the type, image and spacing scale with the screen height so all five paragraphs, the highlights and the button are
   visible at once. On a screen that is too short for the text it grows instead of clipping anything. */
@media (min-width: 1200px) and (min-height: 600px) {
    .cs-ce {
        display: flex;
        align-items: center;
        min-height: 100vh;
        padding: clamp(14px, 2.6vh, 34px) 0;
    }

    .cs-ce > .container {
        width: 100%;
    }

    .cs-ce .cs-grid {
        gap: clamp(32px, 3.4vw, 56px);
    }

    /* the picture takes the height of the text column */
    .cs-ce .cs-visual {
        min-height: 0;
    }

    .cs-ce .cs-eyebrow {
        margin-bottom: clamp(6px, 1.2vh, 12px);
        font-size: clamp(11.5px, 1.3vh, 12.5px);
    }

    .cs-ce .cs-title {
        margin-bottom: clamp(8px, 1.5vh, 15px);
        font-size: clamp(30px, min(3.7vw, 5.2vh), 56px);
    }

    .cs-ce .cs-text {
        max-width: min(100%, 900px);
        margin-bottom: clamp(5px, 0.95vh, 10px);
        font-size: clamp(12px, min(0.98vw, 1.68vh), 15.5px);
        line-height: 1.58;
    }

    .cs-ce .cs-hls {
        max-width: min(100%, 780px);
        margin-top: clamp(8px, 1.6vh, 18px);
    }

    .cs-ce .cs-hl {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .cs-ce .cs-hl-icon {
        width: clamp(38px, 5.4vh, 54px);
        height: clamp(38px, 5.4vh, 54px);
    }

    .cs-ce .cs-hl-icon svg {
        width: 46%;
        height: 46%;
    }

    .cs-ce .cs-hl-label {
        font-size: clamp(12.5px, 1.5vh, 15px);
    }

    .cs-ce .cs-cta {
        margin-top: clamp(8px, 1.6vh, 16px);
    }

    .cs-ce .cs-print-dark {
        top: -9%;
        width: clamp(90px, min(8vw, 15vh), 140px);
    }

}

/* ======================================
   5 - CORPORATE DUE DILIGENCE (cream, evidence collage left 45% with two dark panels layered over it, content right 55%)
====================================== */

.cs-dd {
    background:
        radial-gradient(ellipse 45% 55% at 100% 0%, rgba(227, 30, 36, 0.06), transparent 70%),
        radial-gradient(ellipse 35% 45% at 0% 100%, rgba(227, 30, 36, 0.05), transparent 70%),
        var(--cs-cream);
    color: var(--cs-black);
}

.cs-dd .cs-grid {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
}

.cs-dd .cs-visual {
    min-height: clamp(520px, 38vw, 700px);
}

/* the picture, its red slab and the fingerprint sit in a stage that fills the visual (desktop) */
.cs-stage {
    position: absolute;
    inset: 0;
}

.cs-dd .cs-accent {
    right: -10px;
    clip-path: polygon(30% 0, 100% 0, 78% 100%, 0 100%);
}

.cs-dd .cs-frame {
    border-radius: 4px 0 0 4px;
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
}

/* noir treatment: grey tones, a red wash from the top left, dark at the bottom */
.cs-dd .cs-img {
    object-position: 50% 40%;
    filter: grayscale(0.85) contrast(1.15) brightness(0.95);
}

.cs-dd .cs-shade {
    background:
        linear-gradient(135deg, rgba(227, 30, 36, 0.36) 0%, rgba(227, 30, 36, 0.08) 38%, rgba(227, 30, 36, 0) 55%),
        linear-gradient(180deg, rgba(17, 17, 17, 0.3) 0%, rgba(17, 17, 17, 0) 25%, rgba(17, 17, 17, 0.55) 100%);
}

/* a red fingerprint half hidden behind the picture's edge */
.cs-print-red {
    top: 20%;
    right: -9%;
    z-index: 0;
    width: clamp(140px, 13vw, 230px);
    color: var(--cs-red);
    opacity: 0.3;
}

.cs-dd .cs-reveal {
    z-index: 1;
}

/* the two dark information panels, layered over the picture (and a little over its edge) */
.cs-panel {
    position: absolute;
    z-index: 3;
    width: clamp(190px, 31%, 270px);
    padding: clamp(12px, 1.2vw, 18px) clamp(14px, 1.3vw, 20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(17, 17, 17, 0.93);
    box-shadow: 0 22px 40px -16px rgba(0, 0, 0, 0.7);
    color: #ffffff;
}

.cs-panel-1 {
    top: 24%;
    right: 8%;
}

.cs-panel-2 {
    top: 57%;
    right: -3%;
}

.cs-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.cs-panel-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: clamp(28px, 2.4vw, 38px);
    height: clamp(28px, 2.4vw, 38px);
    color: var(--cs-red);
}

.cs-panel-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    stroke-width: 1.6;
}

.cs .cs-panel h3 {
    margin: 0;
    font-family: "DM Sans", sans-serif;
    font-size: clamp(13px, 1.02vw, 15.5px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    color: #ffffff;
}

.cs-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cs-panel li {
    position: relative;
    margin: 0;
    padding: 3px 0 3px 20px;
    font-size: clamp(12px, 0.92vw, 14px);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.88);
}

/* white check mark */
.cs-panel li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: 8px;
    height: 4px;
    border-left: 1.6px solid #ffffff;
    border-bottom: 1.6px solid #ffffff;
    transform: translateY(-65%) rotate(-45deg);
}

/* ---- content ---- */
.cs-dd .cs-title {
    font-size: clamp(32px, 3.7vw, 56px);
    color: var(--cs-black);
}

.cs-dd .cs-text {
    max-width: 830px;
    margin-bottom: 12px;
    font-size: clamp(14px, 0.98vw, 15.5px);
    line-height: 1.66;
    color: #666666;
}

/* three features: icon left, title and a short description right, thin lines between them */
.cs-dd .cs-hls {
    max-width: 830px;
    margin-top: 22px;
}

.cs-dd .cs-hl {
    align-items: flex-start;
    gap: 14px;
}

.cs-dd .cs-hl + .cs-hl::before {
    top: 4%;
    bottom: 4%;
    background: rgba(17, 17, 17, 0.14);
}

.cs-dd .cs-hl-icon {
    width: clamp(46px, 3.4vw, 56px);
    height: clamp(46px, 3.4vw, 56px);
    background: rgba(227, 30, 36, 0.1);
}

.cs-dd .cs-hl:hover .cs-hl-icon {
    box-shadow: 0 0 0 5px rgba(227, 30, 36, 0.14);
}

.cs-hl-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cs-dd .cs-hl-label {
    font-size: clamp(14px, 1.05vw, 16px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--cs-black);
}

.cs-hl-desc {
    font-size: clamp(12px, 0.88vw, 13.5px);
    line-height: 1.5;
    color: #777777;
}

/* the button and the line beside it */
.cs-ctarow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    margin-top: 22px;
}

.cs-ctarow .cs-cta {
    margin-top: 0;
}

.cs-tagline {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: clamp(13px, 0.95vw, 14.5px);
    color: #777777;
}

.cs-tagline::before {
    content: "";
    width: 38px;
    height: 2px;
    background: var(--cs-red);
}

@media (max-width: 1199px) {
    .cs-dd .cs-visual {
        min-height: 560px;
    }

    /* narrower picture: the two panels are wider relative to it and stay inside it */
    .cs-panel {
        width: 52%;
    }

    .cs-panel-1 {
        top: 14%;
        right: 6%;
    }

    .cs-panel-2 {
        top: 52%;
        right: -2%;
    }

    .cs-dd .cs-hl {
        flex-direction: column;
        gap: 10px;
        padding: 4px 8px;
    }

    .cs-dd .cs-hl:first-child {
        padding-left: 8px;
    }
}

@media (max-width: 991px) {
    /* stack: the picture first, then the two panels side by side, then the content */
    .cs-dd .cs-grid {
        grid-template-columns: 1fr;
    }

    .cs-dd .cs-visual {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        height: auto;
        min-height: 0;
        margin-right: 10px;
    }

    .cs-stage {
        position: relative;
        grid-column: 1 / -1;
        height: clamp(250px, 50vw, 400px);
    }

    .cs-dd .cs-img {
        height: 100%;
        top: 0;
    }

    .cs-panel,
    .cs-panel-1,
    .cs-panel-2 {
        position: static;
        width: auto;
    }

    .cs-print-red {
        right: -4%;
    }

    .cs-dd .cs-hl {
        flex-direction: row;
        gap: 14px;
        padding: 4px 8px;
    }
}

@media (max-width: 767px) {
    .cs-dd .cs-hls {
        grid-template-columns: 1fr;
    }

    .cs-dd .cs-hl,
    .cs-dd .cs-hl:first-child {
        padding: 12px 0;
        border-bottom: 1px solid rgba(17, 17, 17, 0.12);
    }

    .cs-dd .cs-hl + .cs-hl::before {
        display: none;
    }
}

@media (max-width: 575px) {
    .cs-dd .cs-visual {
        grid-template-columns: 1fr;
        margin-right: 0;
    }

    .cs-ctarow {
        flex-direction: column;
        align-items: stretch;
    }

    .cs-ctarow .cs-cta {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .cs-tagline {
        justify-content: center;
        text-align: center;
    }

    .cs-tagline::before {
        display: none;
    }
}

/* BUSINESS / BACKGROUND VERIFICATION with the image on the LEFT (desktop): image 55%, text 45%. Below 992px the text still
   comes first. The slanted edge, the red slab, the thin red line and the shading move to the picture's right side. */
@media (min-width: 992px) {
    .cs-bv .cs-grid {
        grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    }

    .cs-bv .cs-visual {
        order: -1;
    }

    .cs-bv .cs-accent {
        left: auto;
        right: -10px;
        clip-path: polygon(30% 0, 100% 0, 78% 100%, 0 100%);
    }

    .cs-bv .cs-frame {
        clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
    }

    .cs-bv .cs-shade {
        background:
            linear-gradient(270deg, rgba(17, 17, 17, 0.4) 0%, rgba(17, 17, 17, 0) 32%),
            linear-gradient(180deg, rgba(17, 17, 17, 0.18) 0%, rgba(17, 17, 17, 0) 26%, rgba(17, 17, 17, 0.4) 100%);
    }

    /* the thin red line keeps its "/" lean and runs 26px outside the picture's right edge (its top at 100%, its bottom at 88%) */
    .cs-bv .cs-edge {
        left: calc(88% + 26px);
        transform: none;
    }

    .cs-bv .cs-stamp {
        left: clamp(18px, 2.4vw, 32px);
    }

    .cs-bv .cs-print-dark {
        right: 2%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-zoom,
    .cs-img,
    .cs-hl,
    .cs-hl-icon,
    .cs-cta i {
        transition: none;
    }

    .cs-frame:hover .cs-zoom,
    .cs-hl:hover {
        transform: none;
    }
}