/* ======================================
   CORPORATE SERVICES - "Corporate / Industrial Espionage" (detective image left, editorial content right)
   used by corporate.html - every rule is scoped under .ce
====================================== */

.ce {
    --ce-red: #e31e24;
    --ce-black: #111111;
    --ce-charcoal: #1a1a1a;
    --ce-cream: #f8f6f2;
    --ce-text: #666666;
    --ce-line: rgba(17, 17, 17, 0.12);
    --ce-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    position: relative;
    padding: clamp(48px, 5vw, 76px) 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse 50% 60% at 100% 0%, rgba(227, 30, 36, 0.05), transparent 70%),
        var(--ce-cream);
    color: var(--ce-black);
    font-family: "DM Sans", sans-serif;
}

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

.ce-grid {
    display: grid;
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    gap: clamp(32px, 4.4vw, 72px);
    align-items: stretch;
}

/* ---- left: the detective image, slanted on its right edge, with a red slab behind it ---- */
.ce-visual {
    position: relative;
    min-height: 600px;
}

.ce-accent {
    position: absolute;
    top: 5%;
    right: -10px;
    bottom: 5%;
    width: 34%;
    background: linear-gradient(160deg, var(--ce-red) 0%, #a9141a 100%);
    clip-path: polygon(30% 0, 100% 0, 78% 100%, 0 100%);
}

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

.ce-frame {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 16px 0 0 16px;
    background: var(--ce-charcoal);
    clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
}

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

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

/* a little taller than the frame, so the scroll parallax never shows an edge */
.ce-img {
    position: absolute;
    top: -6%;
    left: 0;
    width: 100%;
    height: 112%;
    max-width: none;
    object-fit: cover;
    object-position: 74% 50%;
    filter: grayscale(0.55) contrast(1.08) brightness(0.92);
}

/* dark at the left and bottom, a red wash in the corner: black, charcoal and deep red */
.ce-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(17, 17, 17, 0.5) 0%, rgba(17, 17, 17, 0) 55%),
        linear-gradient(180deg, rgba(17, 17, 17, 0) 55%, rgba(17, 17, 17, 0.75) 100%),
        linear-gradient(135deg, rgba(227, 30, 36, 0.34) 0%, rgba(227, 30, 36, 0) 48%);
    pointer-events: none;
}

/* thin red evidence lines across the picture */
.ce-shade::before,
.ce-shade::after {
    content: "";
    position: absolute;
    height: 1px;
    background: rgba(227, 30, 36, 0.7);
    transform-origin: 0 50%;
}

.ce-shade::before {
    top: 18%;
    left: -4%;
    width: 52%;
    transform: rotate(14deg);
}

.ce-shade::after {
    top: 62%;
    left: 30%;
    width: 46%;
    transform: rotate(-11deg);
}

.ce-stamp {
    position: absolute;
    left: clamp(18px, 2.4vw, 32px);
    bottom: clamp(20px, 2.6vw, 34px);
    padding: 7px 14px 7px 16px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 3px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #ffffff;
    transform: rotate(-4deg);
    box-shadow: 0 0 0 1px rgba(227, 30, 36, 0.8), 0 0 0 5px rgba(227, 30, 36, 0.25);
    background: rgba(17, 17, 17, 0.35);
}

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

/* a faint fingerprint in the corner, behind the text */
.ce-print {
    position: absolute;
    top: 6%;
    right: -3%;
    width: clamp(150px, 16vw, 250px);
    height: auto;
    color: var(--ce-black);
    opacity: 0.07;
    z-index: -1;
    pointer-events: none;
}

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

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

.ce .ce-title {
    margin: 0 0 18px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(34px, 4.1vw, 58px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--ce-black);
}

.ce-line {
    display: block;
}

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

.ce-text {
    max-width: 730px;
    margin: 0 0 14px;
    font-size: clamp(14.5px, 1.05vw, 16px);
    line-height: 1.72;
    color: var(--ce-text);
}

/* ---- three highlights ---- */
.ce-hls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 730px;
    margin: 22px 0 22px;
    padding: 0;
    list-style: none;
}

.ce-hl {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 4px 10px 8px;
    text-align: center;
    transition: transform 0.35s var(--ce-ease);
}

.ce-hl + .ce-hl::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 22%;
    width: 1px;
    background: var(--ce-line);
}

.ce-hl-icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: rgba(227, 30, 36, 0.09);
    color: var(--ce-red);
    box-shadow: 0 0 0 0 rgba(227, 30, 36, 0);
    transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, transform 0.35s var(--ce-ease);
}

.ce-hl-icon svg {
    display: block;
    width: 30px;
    height: 30px;
}

.ce-hl-label {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ce-black);
}

.ce-hl-line {
    width: 34px;
    height: 2px;
    background: var(--ce-red);
    transform-origin: 50% 50%;
    transition: width 0.35s var(--ce-ease);
}

.ce-hl:hover {
    transform: translateY(-3px);
}

.ce-hl:hover .ce-hl-icon {
    background: var(--ce-red);
    color: #ffffff;
    box-shadow: 0 0 0 6px rgba(227, 30, 36, 0.14);
    transform: scale(1.05);
}

.ce-hl:hover .ce-hl-line {
    width: 52px;
}

/* ---- call to action: the site's own button, with an arrow that moves on hover ---- */
.ce-cta {
    margin-top: 10px;
}

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

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

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

/* ---- responsive ---- */
@media (max-width: 1199px) {
    .ce-grid {
        grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
        gap: 36px;
    }

    .ce-visual {
        min-height: 560px;
    }

    .ce-hl-icon {
        width: 58px;
        height: 58px;
    }

    .ce-hl-icon svg {
        width: 26px;
        height: 26px;
    }
}

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

    /* image first, compact */
    .ce-visual {
        min-height: 0;
        height: clamp(260px, 52vw, 400px);
        margin-right: 10px;
    }

    .ce-accent {
        top: 6%;
        bottom: 6%;
        right: -10px;
        width: 30%;
    }

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

    .ce-print {
        top: 0;
        right: 0;
    }
}

@media (max-width: 575px) {
    .ce-hls {
        grid-template-columns: 1fr;
        max-width: none;
        margin: 18px 0;
        border-top: 1px solid var(--ce-line);
    }

    .ce-hl {
        flex-direction: row;
        justify-content: flex-start;
        gap: 14px;
        padding: 12px 0;
        border-bottom: 1px solid var(--ce-line);
        text-align: left;
    }

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

    .ce-hl-icon {
        flex: 0 0 auto;
        width: 50px;
        height: 50px;
    }

    .ce-hl-icon svg {
        width: 24px;
        height: 24px;
    }

    .ce-hl-line {
        display: none;
    }

    .ce-stamp {
        font-size: 11px;
        letter-spacing: 0.16em;
    }
}

/* 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 the whole section is visible at once.
   On a screen that is too short for the text, it simply grows instead of clipping anything. */
@media (min-width: 1200px) and (min-height: 600px) {
    .ce {
        display: flex;
        align-items: center;
        min-height: 100vh;
        padding: clamp(14px, 2.6vh, 34px) 0;
    }

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

    .ce-grid {
        grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
        gap: clamp(32px, 3.6vw, 64px);
    }

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

    .ce-eyebrow {
        margin-bottom: clamp(7px, 1.3vh, 13px);
        font-size: clamp(11.5px, 1.3vh, 12.5px);
    }

    .ce .ce-title {
        margin-bottom: clamp(9px, 1.7vh, 17px);
        font-size: clamp(30px, min(4.1vw, 5.3vh), 58px);
    }

    .ce-text {
        max-width: min(100%, 920px);
        margin-bottom: clamp(6px, 1.1vh, 11px);
        font-size: clamp(12.5px, min(1.05vw, 1.6vh), 16px);
        line-height: 1.58;
    }

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

    .ce-hl {
        gap: clamp(5px, 0.9vh, 9px);
        padding: 2px 10px 4px;
    }

    .ce-hl-icon {
        width: clamp(40px, 5.8vh, 62px);
        height: clamp(40px, 5.8vh, 62px);
    }

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

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

    .ce-cta {
        margin-top: clamp(2px, 0.6vh, 8px);
    }

    .ce-print {
        width: clamp(120px, min(13vw, 24vh), 230px);
    }
}

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

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

/* ESPIONAGE: image on the RIGHT (desktop), text on the left. Below 992px the image stays above the text.
   The slanted edge, the red slab, the thin red lines and the shading all move to the picture's left side. */
@media (min-width: 992px) {
    .ce-grid {
        grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    }

    .ce-content {
        order: 1;
    }

    .ce-visual {
        order: 2;
    }

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

    .ce-frame {
        border-radius: 0 16px 16px 0;
        clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
    }

    .ce-shade {
        background:
            linear-gradient(270deg, rgba(17, 17, 17, 0.5) 0%, rgba(17, 17, 17, 0) 55%),
            linear-gradient(180deg, rgba(17, 17, 17, 0) 55%, rgba(17, 17, 17, 0.75) 100%),
            linear-gradient(225deg, rgba(227, 30, 36, 0.34) 0%, rgba(227, 30, 36, 0) 48%);
    }

    .ce-shade::before,
    .ce-shade::after {
        transform-origin: 100% 50%;
    }

    .ce-shade::before {
        left: auto;
        right: -4%;
        transform: rotate(-14deg);
    }

    .ce-shade::after {
        left: auto;
        right: 30%;
        transform: rotate(11deg);
    }

    .ce-stamp {
        left: clamp(30px, 3.4vw, 54px);
    }
}

@media (min-width: 1200px) and (min-height: 600px) {
    .ce-grid {
        grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    }
}