.eleven-cs{
    --cs-wide:1800px;
    --cs-medium:1180px;
    --cs-text:760px;
    --cs-media-ratio:4/3;
    width:min(var(--cs-wide),calc(100vw - 48px));
    max-width:none;
    position:relative;
    left:50%;
    transform:translateX(-50%);
    box-sizing:border-box;
}

.eleven-cs *,
.eleven-cs *::before,
.eleven-cs *::after{
    box-sizing:border-box;
}

.eleven-cs-editor-placeholder{
    padding:18px;
    border:1px dashed currentColor;
    opacity:.65;
    font-size:14px;
}

.eleven-cs__section{
    width:100%;
    margin:clamp(52px,7vw,110px) auto;
}

.eleven-cs__section:first-child{
    margin-top:clamp(18px,2.6vw,38px);
}

.eleven-cs__section:last-child{
    margin-bottom:clamp(56px,8vw,120px);
}

/* Text is centered inside the wider case-study canvas. */
.eleven-cs__section--text,
.eleven-cs__section--highlight{
    max-width:var(--cs-text);
    margin-left:auto;
    margin-right:auto;
}

/* Wide sections now use the centered case-study canvas itself,
   avoiding the previous left/right drift. */
.eleven-cs__section--wide{
    width:100%;
    max-width:none;
    position:static;
    left:auto;
    transform:none;
}

.eleven-cs__title{
    margin:0 0 clamp(16px,2vw,26px);
    font:inherit;
    font-size:clamp(34px,3.8vw,52px);
    line-height:.98;
    letter-spacing:-.025em;
    font-weight:700;
}

.eleven-cs__copy{
    max-width:680px;
    font:inherit;
    font-size:clamp(16px,1.15vw,19px);
    line-height:1.55;
}

.eleven-cs__copy>:first-child{margin-top:0}
.eleven-cs__copy>:last-child{margin-bottom:0}
.eleven-cs__copy p{margin:0 0 1.15em}

.eleven-cs__image,
.eleven-cs__video-file{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
}

/* Equal image boxes for Two Images and Image Grid. */
.eleven-cs__media-frame{
    aspect-ratio:var(--cs-media-ratio);
    overflow:hidden;
    width:100%;
}

.eleven-cs__media-frame .eleven-cs__image{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

.eleven-cs__two-images{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(14px,1.5vw,24px);
    align-items:start;
}

.eleven-cs__text-image{
    display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:clamp(36px,6vw,92px);
    align-items:center;
    max-width:var(--cs-medium);
    margin-left:auto;
    margin-right:auto;
}

.eleven-cs__text-image-copy{
    max-width:520px;
}

.eleven-cs__text-image--left .eleven-cs__text-image-media{order:1}
.eleven-cs__text-image--left .eleven-cs__text-image-copy{order:2}
.eleven-cs__text-image--right .eleven-cs__text-image-copy{order:1}
.eleven-cs__text-image--right .eleven-cs__text-image-media{order:2}

.eleven-cs__grid{
    display:grid;
    grid-template-columns:repeat(var(--eleven-cs-cols,2),minmax(0,1fr));
    gap:clamp(14px,1.5vw,24px);
}

.eleven-cs__highlight--center{text-align:center}

.eleven-cs__highlight-text{
    max-width:900px;
    font:inherit;
    font-size:clamp(38px,4.5vw,64px);
    line-height:.92;
    letter-spacing:-.035em;
    font-weight:700;
}

/* Responsive YouTube/Vimeo and uploaded video. */
.eleven-cs__video-file{
    width:100%;
    height:auto;
}

.eleven-cs__embed{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
}

.eleven-cs__embed iframe{
    position:absolute;
    inset:0;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
}

@media(max-width:1024px){
    .eleven-cs{
        width:calc(100vw - 40px);
    }

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

    .eleven-cs__text-image{
        grid-template-columns:1fr 1fr;
        gap:34px;
        max-width:100%;
    }

    .eleven-cs__section--text,
    .eleven-cs__section--highlight{
        max-width:min(var(--cs-text),100%);
    }
}

@media(max-width:767px){
    .eleven-cs{
        width:calc(100vw - 32px);
        left:50%;
        transform:translateX(-50%);
    }

    .eleven-cs__section{
        margin:clamp(38px,12vw,64px) auto;
    }

    .eleven-cs__section:first-child{
        margin-top:28px;
    }

    .eleven-cs__section--text,
    .eleven-cs__section--highlight{
        width:100%;
        max-width:100%;
    }

    .eleven-cs__two-images,
    .eleven-cs__grid,
    .eleven-cs__text-image{
        grid-template-columns:1fr;
    }

    .eleven-cs__two-images,
    .eleven-cs__grid{
        gap:12px;
    }

    .eleven-cs__text-image{
        gap:22px;
    }

    .eleven-cs__text-image-copy{
        order:1!important;
        max-width:100%;
    }

    .eleven-cs__text-image-media{
        order:2!important;
    }

    .eleven-cs__title{
        font-size:clamp(32px,8.2vw,40px);
        line-height:1;
        letter-spacing:-.035em;
        max-width:100%;
        overflow-wrap:normal;
        word-break:normal;
    }

    .eleven-cs__copy{
        max-width:100%;
        font-size:16px;
        line-height:1.55;
    }

    .eleven-cs__highlight-text{
        font-size:clamp(36px,10vw,48px);
    }
}


/* Clean YouTube preview + custom timeline and minimalist controls. */
.eleven-cs__yt-card{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    cursor:pointer;
    background-color:#111;
}

.eleven-cs__yt-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.06);
    pointer-events:none;
    z-index:1;
}

.eleven-cs__yt-card.is-playing::after{
    display:none;
}

.eleven-cs__yt-play,
.eleven-cs__yt-center-toggle{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:8;
    width:82px;
    height:82px;
    border:0;
    border-radius:999px;
    background:#fff;
    color:#111;
    display:grid;
    place-items:center;
    cursor:pointer;
    padding:0;
    box-shadow:0 8px 30px rgba(0,0,0,.16);
    transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}

.eleven-cs__yt-play:hover,
.eleven-cs__yt-center-toggle:hover{
    transform:translate(-50%,-50%) scale(1.06);
    box-shadow:0 10px 34px rgba(0,0,0,.22);
}

.eleven-cs__yt-play-icon{
    width:0;
    height:0;
    border-top:11px solid transparent;
    border-bottom:11px solid transparent;
    border-left:18px solid #111;
    margin-left:4px;
}

.eleven-cs__yt-center-toggle{
    opacity:0;
    pointer-events:none;
}

.eleven-cs__yt-card.is-paused .eleven-cs__yt-center-toggle,
.eleven-cs__yt-center-toggle.is-flashing{
    opacity:1;
    pointer-events:auto;
}

.eleven-cs__yt-center-toggle svg{
    width:28px;
    height:28px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.eleven-cs__yt-center-toggle .icon-fill{
    fill:currentColor;
    stroke:none;
}

.eleven-cs__yt-click-layer{
    position:absolute;
    inset:0;
    z-index:3;
    background:transparent;
}

.eleven-cs__yt-player-host,
.eleven-cs__yt-card iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    z-index:1;
}

/* Mute + fullscreen stay vertically centered on the left. */
.eleven-cs__yt-controls{
    position:absolute;
    right:16px;
    left:auto;
    top:50%;
    transform:translateY(-50%);
    z-index:9;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    opacity:1;
    transition:opacity .22s ease;
    pointer-events:auto;
}

.eleven-cs__yt-card.is-controls-hidden .eleven-cs__yt-controls,
.eleven-cs__yt-card.is-controls-hidden .eleven-cs__yt-timeline{
    opacity:0;
    pointer-events:none;
}

.eleven-cs__yt-control{
    width:44px;
    height:44px;
    border:1.5px solid rgba(255,255,255,.96);
    border-radius:999px;
    background:rgba(0,0,0,.16);
    color:#fff;
    display:grid;
    place-items:center;
    padding:0;
    cursor:pointer;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    transition:background .18s ease, transform .18s ease;
}

.eleven-cs__yt-control:hover{
    background:rgba(0,0,0,.32);
    transform:scale(1.04);
}

.eleven-cs__yt-control svg{
    width:19px;
    height:19px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.eleven-cs__yt-control .icon-fill{
    fill:currentColor;
    stroke:none;
}

/* Custom seek timeline */
.eleven-cs__yt-timeline{
    position:absolute;
    left:78px;
    right:18px;
    bottom:16px;
    z-index:9;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
    color:#fff;
    opacity:1;
    transition:opacity .22s ease;
    pointer-events:auto;
}

.eleven-cs__yt-time{
    font:inherit;
    font-size:12px;
    line-height:1;
    color:#fff;
    text-shadow:0 1px 4px rgba(0,0,0,.35);
    min-width:34px;
}

.eleven-cs__yt-time:last-child{
    text-align:right;
}

.eleven-cs__yt-range{
    width:100%;
    margin:0;
    cursor:pointer;
    accent-color:#fff;
    background:transparent;
}

.eleven-cs__yt-range::-webkit-slider-runnable-track{
    height:3px;
    background:rgba(255,255,255,.42);
    border-radius:99px;
}

.eleven-cs__yt-range::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:12px;
    height:12px;
    margin-top:-4.5px;
    border:0;
    border-radius:50%;
    background:#fff;
}

.eleven-cs__yt-range::-moz-range-track{
    height:3px;
    background:rgba(255,255,255,.42);
    border-radius:99px;
}

.eleven-cs__yt-range::-moz-range-progress{
    height:3px;
    background:#fff;
    border-radius:99px;
}

.eleven-cs__yt-range::-moz-range-thumb{
    width:12px;
    height:12px;
    border:0;
    border-radius:50%;
    background:#fff;
}

@media(max-width:767px){
    .eleven-cs__yt-play,
    .eleven-cs__yt-center-toggle{
        width:64px;
        height:64px;
    }

    .eleven-cs__yt-play-icon{
        border-top-width:9px;
        border-bottom-width:9px;
        border-left-width:15px;
    }

    .eleven-cs__yt-center-toggle svg{
        width:23px;
        height:23px;
    }

    .eleven-cs__yt-controls{
        right:12px;
        left:auto;
        gap:8px;
    }

    .eleven-cs__yt-control{
        width:40px;
        height:40px;
    }

    .eleven-cs__yt-timeline{
        left:12px;
        right:12px;
        bottom:10px;
        gap:8px;
    }

    .eleven-cs__yt-time{
        font-size:11px;
        min-width:30px;
    }
}

/* Custom HTML5 player for uploaded MP4/WebM.
   No native controls or third-party branding. */
.eleven-cs__player{
    position:relative;
    width:100%;
    overflow:hidden;
    background:#111;
    cursor:pointer;
}

.eleven-cs__player .eleven-cs__video-file{
    width:100%;
    height:auto;
    display:block;
}

.eleven-cs__player-big-play{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:4;
    width:82px;
    height:82px;
    border:0;
    border-radius:999px;
    background:#fff;
    display:grid;
    place-items:center;
    padding:0;
    cursor:pointer;
    box-shadow:0 8px 30px rgba(0,0,0,.16);
    transition:opacity .2s ease, transform .2s ease;
}

.eleven-cs__player-big-play:hover{
    transform:translate(-50%,-50%) scale(1.06);
}

.eleven-cs__player-big-play.is-hidden{
    opacity:0;
    pointer-events:none;
}

.eleven-cs__player-big-play-icon{
    width:0;
    height:0;
    border-top:11px solid transparent;
    border-bottom:11px solid transparent;
    border-left:18px solid #111;
    margin-left:4px;
}

.eleven-cs__player-controls{
    position:absolute;
    left:16px;
    right:16px;
    bottom:16px;
    z-index:5;
    display:flex;
    align-items:center;
    gap:10px;
    opacity:1;
    transform:translateY(0);
    transition:opacity .22s ease, transform .22s ease;
    pointer-events:auto;
}

.eleven-cs__player.is-controls-hidden .eleven-cs__player-controls{
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
}

.eleven-cs__player-control{
    width:44px;
    height:44px;
    border:1.5px solid rgba(255,255,255,.96);
    border-radius:999px;
    background:rgba(0,0,0,.16);
    color:#fff;
    display:grid;
    place-items:center;
    padding:0;
    cursor:pointer;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    transition:background .18s ease, transform .18s ease;
}

.eleven-cs__player-control:hover{
    background:rgba(0,0,0,.32);
    transform:scale(1.04);
}

.eleven-cs__player-control svg{
    width:19px;
    height:19px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.eleven-cs__player-control .icon-fill{
    fill:currentColor;
    stroke:none;
}

@media(max-width:767px){
    .eleven-cs__player-big-play{
        width:64px;
        height:64px;
    }

    .eleven-cs__player-big-play-icon{
        border-top-width:9px;
        border-bottom-width:9px;
        border-left-width:15px;
    }

    .eleven-cs__player-controls{
        left:12px;
        right:12px;
        bottom:12px;
        gap:8px;
    }

    .eleven-cs__player-control{
        width:40px;
        height:40px;
    }
}


/* DN AGRAR case-study intro hierarchy.
   JS adds these classes only to the title + Post Content immediately before
   the case-study shortcode, so the green URL/services card is untouched. */
.eleven-cs-intro-title-widget .elementor-heading-title{
    font-size:clamp(44px,4.2vw,60px)!important;
    line-height:.96!important;
    letter-spacing:-.03em!important;
    font-weight:700!important;
}

.eleven-cs-intro-copy-widget .elementor-widget-container,
.eleven-cs-intro-copy-widget p,
.eleven-cs-intro-copy-widget li{
    font-size:clamp(17px,1.12vw,19px)!important;
    line-height:1.55!important;
}

.eleven-cs-intro-copy-widget p{
    margin-bottom:1.05em;
}

@media(max-width:767px){
    .eleven-cs-intro-title-widget .elementor-heading-title{
        font-size:clamp(36px,10vw,48px)!important;
        line-height:.98!important;
    }

    .eleven-cs-intro-copy-widget .elementor-widget-container,
    .eleven-cs-intro-copy-widget p,
    .eleven-cs-intro-copy-widget li{
        font-size:16px!important;
        line-height:1.55!important;
    }
}


/* Wider editorial intro row for the DN AGRAR case study. */
.eleven-cs-intro-row > .e-con-inner{
    width:min(1180px,calc(100vw - 48px))!important;
    max-width:1180px!important;
    margin-left:auto!important;
    margin-right:auto!important;
}

/* Keep the left intro text readable even though the whole intro row is wider. */
.eleven-cs-intro-left{
    min-width:0!important;
}

.eleven-cs-intro-copy-widget{
    max-width:720px;
}

/* Text + Image chapter titles belong to the same hierarchy as Text Section titles. */
.eleven-cs__text-image .eleven-cs__title{
    font-size:clamp(34px,3.8vw,52px);
    line-height:.98;
    letter-spacing:-.025em;
    font-weight:700;
}

@media(max-width:1024px){
    .eleven-cs-intro-row > .e-con-inner{
        width:calc(100vw - 40px)!important;
        max-width:none!important;
    }
}

@media(max-width:767px){
    .eleven-cs-intro-row > .e-con-inner{
        width:calc(100vw - 32px)!important;
        max-width:none!important;
    }

    .eleven-cs__text-image .eleven-cs__title{
        font-size:clamp(32px,8.2vw,40px);
        line-height:1;
        letter-spacing:-.035em;
    }
}


/* Tighter transition from the green project-info card to the first case-study image on mobile. */
@media(max-width:767px){
    .eleven-cs-intro-row{
        margin-bottom:0!important;
        padding-bottom:0!important;
    }

    .eleven-cs__section:first-child{
        margin-top:8px!important;
    }
}


/* --------------------------------------------------------------
   Editorial section rhythm
   Use one controlled gap between blocks instead of large margins
   on both sides. This makes the case study feel more deliberate.
-------------------------------------------------------------- */
.eleven-cs__section{
    margin-top:0;
    margin-bottom:0;
}

.eleven-cs__section:first-child{
    margin-top:clamp(18px,2.6vw,36px);
}

.eleven-cs__section + .eleven-cs__section{
    margin-top:clamp(58px,5.2vw,82px);
}

.eleven-cs__section:last-child{
    margin-bottom:clamp(72px,7vw,108px);
}

/* Image followed by chapter copy: keep the relationship obvious. */
.eleven-cs__section--wide + .eleven-cs__section--text{
    margin-top:clamp(48px,4vw,64px);
}

/* Chapter copy followed by its supporting image pair. */
.eleven-cs__section--text + .eleven-cs__two-images{
    margin-top:clamp(48px,4vw,64px);
}

/* Consecutive visual blocks belong to the same visual chapter. */
.eleven-cs__two-images + .eleven-cs__video{
    margin-top:clamp(26px,2.5vw,40px);
}

/* Video → statement. */
.eleven-cs__video + .eleven-cs__section--highlight{
    margin-top:clamp(52px,4.5vw,70px);
}

/* Statement → next large visual. */
.eleven-cs__section--highlight + .eleven-cs__section--wide{
    margin-top:clamp(52px,4.5vw,70px);
}

/* Large visual → mixed text/image chapter. */
.eleven-cs__section--wide + .eleven-cs__text-image{
    margin-top:clamp(52px,4.5vw,72px);
}

/* Mixed chapter → closing image grid. */
.eleven-cs__text-image + .eleven-cs__grid{
    margin-top:clamp(44px,4vw,62px);
}

@media(max-width:767px){
    /* Keep the green info card and first hero visually connected. */
    .eleven-cs__section:first-child{
        margin-top:8px!important;
    }

    /* Consistent default mobile rhythm. */
    .eleven-cs__section + .eleven-cs__section{
        margin-top:34px;
    }

    /* Hero → chapter title/copy. */
    .eleven-cs__section--wide + .eleven-cs__section--text{
        margin-top:28px;
    }

    /* Chapter copy → paired images. */
    .eleven-cs__section--text + .eleven-cs__two-images{
        margin-top:28px;
    }

    /* Two Images → video: they are one visual sequence. */
    .eleven-cs__two-images + .eleven-cs__video{
        margin-top:18px;
    }

    /* Video → highlight. */
    .eleven-cs__video + .eleven-cs__section--highlight{
        margin-top:30px;
    }

    /* Highlight → next hero image. */
    .eleven-cs__section--highlight + .eleven-cs__section--wide{
        margin-top:30px;
    }

    /* Hero image → Text + Image chapter. */
    .eleven-cs__section--wide + .eleven-cs__text-image{
        margin-top:30px;
    }

    /* Keep text and its image slightly tighter inside Text + Image. */
    .eleven-cs__text-image{
        gap:18px;
    }

    /* Text + Image → final gallery. */
    .eleven-cs__text-image + .eleven-cs__grid{
        margin-top:28px;
    }

    /* Image stacks should read as a single gallery. */
    .eleven-cs__two-images,
    .eleven-cs__grid{
        gap:8px;
    }

    .eleven-cs__section:last-child{
        margin-bottom:48px;
    }
}


/* --------------------------------------------------------------
   Subtle editorial scroll reveal
   No layout shift, and disabled automatically for reduced motion.
-------------------------------------------------------------- */
.eleven-cs.eleven-cs--reveal-ready .eleven-cs__section{
    opacity:0;
    transform:translateY(22px);
    transition:
        opacity .72s cubic-bezier(.2,.7,.2,1),
        transform .72s cubic-bezier(.2,.7,.2,1);
    will-change:opacity,transform;
}

.eleven-cs.eleven-cs--reveal-ready .eleven-cs__section.is-visible{
    opacity:1;
    transform:none;
}

.eleven-cs.eleven-cs--reveal-ready .eleven-cs__section--wide img,
.eleven-cs.eleven-cs--reveal-ready .eleven-cs__two-images img,
.eleven-cs.eleven-cs--reveal-ready .eleven-cs__grid img,
.eleven-cs.eleven-cs--reveal-ready .eleven-cs__video video,
.eleven-cs.eleven-cs--reveal-ready .eleven-cs__yt-card{
    transform:scale(1.012);
    transition:transform .9s cubic-bezier(.2,.7,.2,1);
}

.eleven-cs.eleven-cs--reveal-ready .eleven-cs__section.is-visible img,
.eleven-cs.eleven-cs--reveal-ready .eleven-cs__section.is-visible video,
.eleven-cs.eleven-cs--reveal-ready .eleven-cs__section.is-visible .eleven-cs__yt-card{
    transform:scale(1);
}

@media(max-width:767px){
    .eleven-cs.eleven-cs--reveal-ready .eleven-cs__section{
        transform:translateY(14px);
        transition-duration:.6s;
    }
}

@media(prefers-reduced-motion:reduce){
    .eleven-cs.eleven-cs--reveal-ready .eleven-cs__section,
    .eleven-cs.eleven-cs--reveal-ready .eleven-cs__section img,
    .eleven-cs.eleven-cs--reveal-ready .eleven-cs__section video,
    .eleven-cs.eleven-cs--reveal-ready .eleven-cs__yt-card{
        opacity:1!important;
        transform:none!important;
        transition:none!important;
        will-change:auto!important;
    }
}


/* --------------------------------------------------------------
   Previous / Next Project navigation
   Compact two-column layout on desktop, compact stacked cards on mobile.
-------------------------------------------------------------- */
.eleven-cs__project-nav{
    margin-top:clamp(64px,6vw,92px)!important;
}

.eleven-cs__project-nav-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.eleven-cs__project-nav-card,
.eleven-cs__project-nav-card:visited{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:16/10;
    min-height:0;
    overflow:hidden;
    text-decoration:none!important;
    background:#efefef;
    color:#fff!important;
}

.eleven-cs__project-nav-image,
.eleven-cs__project-nav-placeholder{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.eleven-cs__project-nav-image{
    object-fit:cover;
    object-position:center;
    transform:scale(1.001);
    transition:transform .65s cubic-bezier(.2,.7,.2,1);
}

.eleven-cs__project-nav-placeholder{
    background:#efefef;
}

.eleven-cs__project-nav-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(
        180deg,
        rgba(0,0,0,.02) 25%,
        rgba(0,0,0,.12) 58%,
        rgba(0,0,0,.62) 100%
    );
}

.eleven-cs__project-nav-content{
    position:absolute;
    left:26px;
    right:76px;
    bottom:24px;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:7px;
}

.eleven-cs__project-nav-label{
    font-size:11px;
    line-height:1;
    font-weight:650;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:.92;
}

.eleven-cs__project-nav-title{
    display:block;
    font-size:clamp(27px,2.7vw,42px);
    line-height:.96;
    letter-spacing:-.03em;
    font-weight:700;
}

.eleven-cs__project-nav-arrow{
    position:absolute;
    right:22px;
    bottom:22px;
    z-index:3;
    width:48px;
    height:48px;
    border-radius:999px;
    background:#fff;
    color:#111;
    display:grid;
    place-items:center;
    transition:transform .22s ease;
}

.eleven-cs__project-nav-arrow svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.eleven-cs__project-nav-card.no-image{
    color:#111!important;
}

.eleven-cs__project-nav-card.no-image .eleven-cs__project-nav-content{
    right:74px;
}

.eleven-cs__project-nav-card.no-image .eleven-cs__project-nav-arrow{
    background:#111;
    color:#fff;
}

@media(hover:hover){
    .eleven-cs__project-nav-card:hover .eleven-cs__project-nav-image{
        transform:scale(1.025);
    }

    .eleven-cs__project-nav-card:hover .eleven-cs__project-nav-arrow{
        transform:scale(1.06);
    }
}

@media(max-width:767px){
    .eleven-cs__project-nav{
        margin-top:42px!important;
    }

    .eleven-cs__project-nav-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .eleven-cs__project-nav-card,
    .eleven-cs__project-nav-card:visited{
        aspect-ratio:16/9;
    }

    .eleven-cs__project-nav-content{
        left:16px;
        right:62px;
        bottom:15px;
        gap:5px;
    }

    .eleven-cs__project-nav-label{
        font-size:9px;
    }

    .eleven-cs__project-nav-title{
        font-size:clamp(24px,7.5vw,34px);
        line-height:.98;
    }

    .eleven-cs__project-nav-arrow{
        right:14px;
        bottom:14px;
        width:40px;
        height:40px;
    }

    .eleven-cs__project-nav-arrow svg{
        width:17px;
        height:17px;
    }
}


/* Desktop: Previous Project arrow sits on the left edge. */
@media(min-width:768px){
    .eleven-cs__project-nav-card--previous .eleven-cs__project-nav-arrow{
        left:22px;
        right:auto;
    }

    .eleven-cs__project-nav-card--previous .eleven-cs__project-nav-content{
        left:84px;
        right:26px;
    }

    .eleven-cs__project-nav-card--previous.no-image .eleven-cs__project-nav-content{
        left:84px;
        right:26px;
    }
}

/* Match the site's typography in project navigation. */
.eleven-cs__project-nav-title{
    font-family:"Unbounded", sans-serif!important;
}

.eleven-cs__project-nav-label{
    font-family:"Mulish", sans-serif!important;
}


/* --------------------------------------------------------------
   Case-study image interactions + lightbox
-------------------------------------------------------------- */
.eleven-cs .eleven-cs__image{
    cursor:zoom-in;
}


.eleven-cs__text-image-media{
    overflow:hidden;
}

@media(hover:hover){
    .eleven-cs__section--wide > .eleven-cs__image,
    .eleven-cs__media-frame .eleven-cs__image,
    .eleven-cs__text-image-media .eleven-cs__image{
        transition:transform .55s cubic-bezier(.2,.7,.2,1);
    }

    .eleven-cs__section--wide > .eleven-cs__image:hover,
    .eleven-cs__media-frame .eleven-cs__image:hover,
    .eleven-cs__text-image-media .eleven-cs__image:hover{
        transform:scale(1.012);
    }
}

body.eleven-cs-lightbox-open{
    overflow:hidden!important;
}

.eleven-cs-lightbox{
    position:fixed;
    inset:0;
    z-index:1000000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px 76px 48px;
    background:rgba(8,8,8,.94);
    opacity:0;
    visibility:hidden;
    transition:opacity .22s ease, visibility .22s ease;
}

.eleven-cs-lightbox.is-open{
    opacity:1;
    visibility:visible;
}

.eleven-cs-lightbox__image{
    display:block;
    max-width:min(92vw,1800px);
    max-height:88vh;
    width:auto;
    height:auto;
    object-fit:contain;
    user-select:none;
    -webkit-user-drag:none;
    transform:scale(.985);
    transition:transform .25s cubic-bezier(.2,.7,.2,1);
}

.eleven-cs-lightbox.is-open .eleven-cs-lightbox__image{
    transform:scale(1);
}

.eleven-cs-lightbox__button{
    position:absolute;
    z-index:2;
    width:48px;
    height:48px;
    border:1px solid rgba(255,255,255,.26);
    border-radius:999px;
    background:rgba(255,255,255,.12);
    color:#fff;
    padding:0;
    display:grid;
    place-items:center;
    cursor:pointer;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:background .18s ease, transform .18s ease;
}

.eleven-cs-lightbox__button:hover{
    background:rgba(255,255,255,.22);
    transform:scale(1.05);
}

.eleven-cs-lightbox__button svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.eleven-cs-lightbox__close{
    top:22px;
    right:22px;
}

.eleven-cs-lightbox__prev{
    left:20px;
    top:50%;
    transform:translateY(-50%);
}

.eleven-cs-lightbox__prev:hover{
    transform:translateY(-50%) scale(1.05);
}

.eleven-cs-lightbox__next{
    right:20px;
    top:50%;
    transform:translateY(-50%);
}

.eleven-cs-lightbox__next:hover{
    transform:translateY(-50%) scale(1.05);
}

.eleven-cs-lightbox__counter{
    position:absolute;
    left:50%;
    bottom:20px;
    transform:translateX(-50%);
    color:rgba(255,255,255,.82);
    font-family:"Mulish",sans-serif;
    font-size:12px;
    line-height:1;
    letter-spacing:.04em;
}

@media(max-width:767px){
    .eleven-cs-lightbox{
        padding:68px 12px 70px;
    }

    .eleven-cs-lightbox__image{
        max-width:100%;
        max-height:78vh;
    }

    .eleven-cs-lightbox__button{
        width:44px;
        height:44px;
    }

    .eleven-cs-lightbox__close{
        top:12px;
        right:12px;
    }

    .eleven-cs-lightbox__prev{
        left:12px;
        top:auto;
        bottom:12px;
        transform:none;
    }

    .eleven-cs-lightbox__prev:hover{
        transform:scale(1.05);
    }

    .eleven-cs-lightbox__next{
        right:12px;
        top:auto;
        bottom:12px;
        transform:none;
    }

    .eleven-cs-lightbox__next:hover{
        transform:scale(1.05);
    }

    .eleven-cs-lightbox__counter{
        bottom:28px;
    }
}

@media(prefers-reduced-motion:reduce){
    .eleven-cs-lightbox,
    .eleven-cs-lightbox__image,
    .eleven-cs-lightbox__button{
        transition:none!important;
    }
}

/* --------------------------------------------------------------
   Project navigation hover
   Subtle editorial motion for Previous / Next project cards.
-------------------------------------------------------------- */
.eleven-cs__project-nav-card{
    transition:
        transform .28s cubic-bezier(.2,.7,.2,1),
        box-shadow .28s ease;
}

.eleven-cs__project-nav-overlay{
    transition:background .32s ease;
}

.eleven-cs__project-nav-content{
    transition:transform .30s cubic-bezier(.2,.7,.2,1);
}

.eleven-cs__project-nav-label{
    transition:opacity .24s ease, transform .30s cubic-bezier(.2,.7,.2,1);
}

.eleven-cs__project-nav-title{
    transition:transform .30s cubic-bezier(.2,.7,.2,1);
}

.eleven-cs__project-nav-arrow{
    transition:
        transform .30s cubic-bezier(.2,.7,.2,1),
        background .22s ease,
        color .22s ease;
}

@media(hover:hover) and (pointer:fine){
    .eleven-cs__project-nav-card:hover{
        transform:translateY(-4px);
        box-shadow:0 16px 36px rgba(0,0,0,.12);
    }

    .eleven-cs__project-nav-card:hover .eleven-cs__project-nav-image{
        transform:scale(1.035);
    }

    .eleven-cs__project-nav-card:hover .eleven-cs__project-nav-overlay{
        background:linear-gradient(
            180deg,
            rgba(0,0,0,.01) 20%,
            rgba(0,0,0,.10) 54%,
            rgba(0,0,0,.68) 100%
        );
    }

    .eleven-cs__project-nav-card:hover .eleven-cs__project-nav-content{
        transform:translateY(-4px);
    }

    .eleven-cs__project-nav-card:hover .eleven-cs__project-nav-label{
        opacity:1;
        transform:translateY(-1px);
    }

    .eleven-cs__project-nav-card--previous:hover .eleven-cs__project-nav-arrow{
        transform:translateX(-6px) scale(1.04);
    }

    .eleven-cs__project-nav-card--next:hover .eleven-cs__project-nav-arrow{
        transform:translateX(6px) scale(1.04);
    }
}

@media(prefers-reduced-motion:reduce){
    .eleven-cs__project-nav-card,
    .eleven-cs__project-nav-image,
    .eleven-cs__project-nav-overlay,
    .eleven-cs__project-nav-content,
    .eleven-cs__project-nav-label,
    .eleven-cs__project-nav-title,
    .eleven-cs__project-nav-arrow{
        transition:none!important;
    }
}


/* --------------------------------------------------------------
   Video width
   Keep YouTube/video slightly smaller than full-width imagery so
   compressed streams look sharper and the page rhythm stays balanced.
-------------------------------------------------------------- */
.eleven-cs__video{
    width:min(100%,var(--cs-medium));
    max-width:var(--cs-medium);
    margin-left:auto!important;
    margin-right:auto!important;
}

@media(max-width:1024px){
    .eleven-cs__video{
        width:100%;
        max-width:100%;
    }
}


/* --------------------------------------------------------------
   Case-study image hover
   Same visual language as Previous / Next Project cards.
-------------------------------------------------------------- */
.eleven-cs__image-card{
    position:relative;
    overflow:hidden;
    transition:
        transform .28s cubic-bezier(.2,.7,.2,1),
        box-shadow .28s ease;
}

.eleven-cs__image-card .eleven-cs__image{
    cursor:pointer!important;
    transition:transform .65s cubic-bezier(.2,.7,.2,1)!important;
    will-change:transform;
}

.eleven-cs__image-caption{
    position:absolute;
    left:14px;
    bottom:14px;
    z-index:3;
    max-width:calc(100% - 28px);
    padding:7px 10px;
    border-radius:5px;
    background:rgba(0,0,0,.56);
    color:#fff;
    font-family:"Mulish",sans-serif;
    font-size:11px;
    line-height:1.25;
    font-weight:600;
    letter-spacing:.01em;
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
    box-shadow:0 4px 16px rgba(0,0,0,.10);
    transition:
        transform .30s cubic-bezier(.2,.7,.2,1),
        background .22s ease;
}

@media(hover:hover) and (pointer:fine){
    .eleven-cs__image-card:hover{
        transform:translateY(-4px);
        box-shadow:0 16px 36px rgba(0,0,0,.12);
    }

    .eleven-cs__image-card:hover .eleven-cs__image{
        transform:scale(1.035)!important;
    }

    .eleven-cs__image-card:hover .eleven-cs__image-caption{
        transform:translateY(-3px);
        background:rgba(0,0,0,.64);
    }
}

@media(max-width:767px){
    .eleven-cs__image-caption{
        left:10px;
        bottom:10px;
        max-width:calc(100% - 20px);
        padding:6px 8px;
        font-size:10px;
    }
}

@media(prefers-reduced-motion:reduce){
    .eleven-cs__image-card,
    .eleven-cs__image-card .eleven-cs__image,
    .eleven-cs__image-caption{
        transition:none!important;
    }

    .eleven-cs__image-card:hover{
        transform:none!important;
    }

    .eleven-cs__image-card:hover .eleven-cs__image{
        transform:none!important;
    }
}


/* Captions stay hidden until hover on desktop.
   Touch devices keep captions visible because there is no hover state. */
@media(hover:hover) and (pointer:fine){
    .eleven-cs__image-caption{
        opacity:0;
        transform:translateY(6px);
        pointer-events:none;
        transition:
            opacity .22s ease,
            transform .28s cubic-bezier(.2,.7,.2,1),
            background .22s ease;
    }

    .eleven-cs__image-card:hover .eleven-cs__image-caption{
        opacity:1;
        transform:translateY(-3px);
    }
}

@media(hover:none), (pointer:coarse){
    .eleven-cs__image-caption{
        opacity:1;
        transform:none;
    }
}


/* --------------------------------------------------------------
   Project intro polish — safe version
   Keep Elementor's original two-column geometry and only refine the
   existing green info card. No CSS grid override and no duplicated URL arrow.
-------------------------------------------------------------- */
.eleven-cs-intro-title-widget .elementor-heading-title{
    font-family:"Unbounded",sans-serif!important;
}

.eleven-cs-intro-copy-widget,
.eleven-cs-intro-copy-widget p,
.eleven-cs-intro-copy-widget li{
    font-family:"Mulish",sans-serif!important;
}

/* Compact the existing card without rebuilding its content. */
.eleven-cs-intro-info{
    min-height:0!important;
    height:auto!important;
    padding:20px 22px!important;
    border-radius:14px!important;
    box-shadow:0 10px 26px rgba(0,0,0,.07);
    align-self:end!important;
}

/* Reduce large Elementor gaps inside the card, but keep its structure intact. */
.eleven-cs-intro-info > .e-con-inner{
    gap:14px!important;
}

.eleven-cs-intro-info .elementor-widget{
    margin-bottom:0!important;
}

.eleven-cs-intro-info .elementor-widget-heading .elementor-heading-title{
    font-family:"Mulish",sans-serif!important;
    font-size:11px!important;
    line-height:1.15!important;
    font-weight:800!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
}

/* Keep the custom Project URL widget's own icon. Do not add another arrow. */
.eleven-cs-intro-info a,
.eleven-cs-intro-info a:visited{
    font-family:"Mulish",sans-serif!important;
    text-decoration:none!important;
}

/* Gentle separation between URL area and services when Elementor provides
   multiple widgets in the card. */
.eleven-cs-intro-info .elementor-widget-heading + .elementor-widget{
    margin-top:2px!important;
}

@media(max-width:767px){
    .eleven-cs-intro-info{
        width:100%!important;
        max-width:100%!important;
        padding:16px 18px!important;
        border-radius:12px!important;
    }

    .eleven-cs-intro-info > .e-con-inner{
        gap:10px!important;
    }
}


/* --------------------------------------------------------------
   Project intro refinement v2
   Keep Elementor geometry; simplify the green card and improve hierarchy.
-------------------------------------------------------------- */

/* Remove the large dead space below the intro without changing its columns. */
.eleven-cs-intro-row{
    margin-bottom:0!important;
    padding-bottom:0!important;
    min-height:0!important;
}

.eleven-cs-intro-row > .e-con-inner{
    padding-bottom:0!important;
    min-height:0!important;
}

.eleven-cs__section:first-child{
    margin-top:clamp(34px,3.2vw,54px)!important;
}

/* One green surface only: flatten nested card backgrounds. */
.eleven-cs-intro-info{
    min-height:0!important;
    height:auto!important;
    padding:26px 28px!important;
    border-radius:16px!important;
    box-shadow:0 12px 30px rgba(0,0,0,.07)!important;
}

.eleven-cs-intro-info .e-con,
.eleven-cs-intro-info .e-con > .e-con-inner{
    background:transparent!important;
    box-shadow:none!important;
}

/* Make the small labels readable. */
.eleven-cs-intro-info .elementor-widget-heading .elementor-heading-title{
    font-family:"Mulish",sans-serif!important;
    font-size:12.5px!important;
    line-height:1.15!important;
    font-weight:800!important;
    letter-spacing:.075em!important;
    text-transform:uppercase!important;
}

/* URL should be a clear secondary focal point. */
.eleven-cs-intro-info a.eleven-cs-intro-url,
.eleven-cs-intro-info a.eleven-cs-intro-url:visited{
    font-family:"Mulish",sans-serif!important;
    font-size:19px!important;
    line-height:1.25!important;
    font-weight:750!important;
    text-decoration:none!important;
}

/* Add a quiet divider before services using the existing services label widget. */
.eleven-cs-intro-info__services-label{
    margin-top:20px!important;
    padding-top:20px!important;
    border-top:1px solid rgba(255,255,255,.24);
}

/* Service pills */
.eleven-cs-intro-services{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:2px;
}

.eleven-cs-intro-service{
    display:inline-flex;
    align-items:center;
    min-height:31px;
    padding:6px 11px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:inherit;
    font-family:"Mulish",sans-serif;
    font-size:12px;
    line-height:1.15;
    font-weight:700;
}

/* If services are not converted to pills for any reason, keep the fallback readable. */
.eleven-cs-intro-info .elementor-widget-text-editor,
.eleven-cs-intro-info .elementor-widget-text-editor p,
.eleven-cs-intro-info .elementor-widget-text-editor li{
    font-family:"Mulish",sans-serif!important;
    font-size:15px!important;
    line-height:1.45!important;
}

@media(max-width:767px){
    .eleven-cs-intro-info{
        padding:18px 20px!important;
        border-radius:13px!important;
    }

    .eleven-cs-intro-info .elementor-widget-heading .elementor-heading-title{
        font-size:11.5px!important;
    }

    .eleven-cs-intro-info a.eleven-cs-intro-url,
    .eleven-cs-intro-info a.eleven-cs-intro-url:visited{
        font-size:17px!important;
    }

    .eleven-cs-intro-info__services-label{
        margin-top:16px!important;
        padding-top:16px!important;
    }

    .eleven-cs-intro-service{
        min-height:29px;
        padding:5px 9px;
        font-size:11px;
    }

    .eleven-cs__section:first-child{
        margin-top:18px!important;
    }
}


/* --------------------------------------------------------------
   Intro card cleanup + tighter transition to first hero
-------------------------------------------------------------- */

/* Force the green info card to read as ONE surface.
   Elementor can place backgrounds on inner widget containers, so clear them too. */
.eleven-cs-intro-info > .e-con-inner,
.eleven-cs-intro-info .e-con,
.eleven-cs-intro-info .e-con > .e-con-inner,
.eleven-cs-intro-info .elementor-widget-container{
    background:transparent!important;
    background-color:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
}

/* Keep only intentional pill styling. */
.eleven-cs-intro-info .eleven-cs-intro-service{
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.28)!important;
}

/* Reduce the oversized white gap below the intro on desktop. */
@media(min-width:768px){
    .eleven-cs-intro-row{
        margin-bottom:-24px!important;
    }

    .eleven-cs__section:first-child{
        margin-top:24px!important;
    }
}

/* Mobile should stay compact without using a negative margin. */
@media(max-width:767px){
    .eleven-cs-intro-row{
        margin-bottom:0!important;
    }

    .eleven-cs__section:first-child{
        margin-top:12px!important;
    }
}


/* --------------------------------------------------------------
   Remove the remaining inner frame from the green project-info card.
-------------------------------------------------------------- */
.eleven-cs-intro-info > .e-con-inner,
.eleven-cs-intro-info .e-con,
.eleven-cs-intro-info .e-con > .e-con-inner,
.eleven-cs-intro-info .elementor-widget-container{
    border:none!important;
    border-width:0!important;
    border-style:none!important;
    border-color:transparent!important;
    border-radius:0!important;
    outline:none!important;
    box-shadow:none!important;
}

/* Elementor/JegKit can also draw the frame with pseudo-elements. */
.eleven-cs-intro-info > .e-con-inner::before,
.eleven-cs-intro-info > .e-con-inner::after,
.eleven-cs-intro-info .e-con::before,
.eleven-cs-intro-info .e-con::after,
.eleven-cs-intro-info .elementor-widget-container::before,
.eleven-cs-intro-info .elementor-widget-container::after{
    content:none!important;
    display:none!important;
    border:none!important;
    box-shadow:none!important;
    background:none!important;
}

/* Restore intentional styling for service pills only. */
.eleven-cs-intro-info .eleven-cs-intro-service{
    border:1px solid rgba(255,255,255,.28)!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.08)!important;
}


/* --------------------------------------------------------------
   Final cleanup for the inner green-card shadow/frame.
   Reset every Elementor wrapper INSIDE the info card, while preserving
   the outer green card itself and the intentional service pills/divider.
-------------------------------------------------------------- */
.eleven-cs-intro-info .elementor-element,
.eleven-cs-intro-info .elementor-widget,
.eleven-cs-intro-info .elementor-widget-wrap,
.eleven-cs-intro-info .elementor-widget-container,
.eleven-cs-intro-info .e-con,
.eleven-cs-intro-info .e-con-inner,
.eleven-cs-intro-info .elementor-container,
.eleven-cs-intro-info .elementor-column,
.eleven-cs-intro-info .elementor-column-wrap{
    background:transparent!important;
    background-color:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    -webkit-box-shadow:none!important;
    filter:none!important;
    -webkit-filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    outline:none!important;
}

/* Remove rounded inner shells as well. */
.eleven-cs-intro-info .elementor-widget-wrap,
.eleven-cs-intro-info .elementor-widget-container,
.eleven-cs-intro-info .e-con,
.eleven-cs-intro-info .e-con-inner,
.eleven-cs-intro-info .elementor-container,
.eleven-cs-intro-info .elementor-column,
.eleven-cs-intro-info .elementor-column-wrap{
    border:none!important;
    border-radius:0!important;
}

/* Kill any decorative pseudo-element used by a kit/widget to create the inset frame. */
.eleven-cs-intro-info .elementor-element::before,
.eleven-cs-intro-info .elementor-element::after,
.eleven-cs-intro-info .elementor-widget::before,
.eleven-cs-intro-info .elementor-widget::after,
.eleven-cs-intro-info .elementor-widget-container::before,
.eleven-cs-intro-info .elementor-widget-container::after,
.eleven-cs-intro-info .e-con::before,
.eleven-cs-intro-info .e-con::after,
.eleven-cs-intro-info .e-con-inner::before,
.eleven-cs-intro-info .e-con-inner::after{
    box-shadow:none!important;
    -webkit-box-shadow:none!important;
    filter:none!important;
    -webkit-filter:none!important;
    background:none!important;
    border:none!important;
}

/* Re-apply only the intentional visual elements. */
.eleven-cs-intro-info__services-label{
    border-top:1px solid rgba(255,255,255,.24)!important;
}

.eleven-cs-intro-info .eleven-cs-intro-service{
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.28)!important;
    border-radius:999px!important;
    box-shadow:none!important;
    filter:none!important;
}


/* --------------------------------------------------------------
   Final fix: the tagged .eleven-cs-intro-info is the INNER container.
   The visible rounded rectangle came from styling applied to this element
   itself, not only from its descendants. Make this inner layer invisible.
-------------------------------------------------------------- */
.eleven-cs-intro-info{
    background:transparent!important;
    background-color:transparent!important;
    background-image:none!important;
    border:none!important;
    border-radius:0!important;
    outline:none!important;
    box-shadow:none!important;
    -webkit-box-shadow:none!important;
    filter:none!important;
    -webkit-filter:none!important;
}

/* Elementor background-overlay elements can sit as real children,
   so remove those inside the inner info container as well. */
.eleven-cs-intro-info .elementor-background-overlay,
.eleven-cs-intro-info > .elementor-background-overlay,
.eleven-cs-intro-info .e-con-full.e-con > .elementor-background-overlay{
    display:none!important;
    opacity:0!important;
    background:none!important;
    box-shadow:none!important;
}

/* Preserve only the intentional divider and service pills. */
.eleven-cs-intro-info__services-label{
    border-top:1px solid rgba(255,255,255,.24)!important;
}

.eleven-cs-intro-info .eleven-cs-intro-service{
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.28)!important;
    border-radius:999px!important;
    box-shadow:none!important;
}


/* Captions are desktop-hover only. Hide them completely on touch/mobile. */
@media(hover:none), (pointer:coarse), (max-width:767px){
    .eleven-cs__image-caption{
        display:none!important;
        opacity:0!important;
        visibility:hidden!important;
        pointer-events:none!important;
    }
}


/* --------------------------------------------------------------
   Project page background
   Portfolio background sampled from screenshot: #EFEADF.
   Uses a JS marker so it works regardless of the custom post type body class.
-------------------------------------------------------------- */
body.eleven-case-study-page{
    background:#EFEADF!important;
}

body.eleven-case-study-page .eleven-cs-page-surface,
body.eleven-case-study-page .elementor-location-single,
body.eleven-case-study-page .elementor-location-single > .elementor,
body.eleven-case-study-page main,
body.eleven-case-study-page .site-main,
body.eleven-case-study-page .eleven-cs-intro-row,
body.eleven-case-study-page .eleven-cs{
    background:#EFEADF!important;
    background-color:#EFEADF!important;
}

/* Elementor often paints white on the top-level containers themselves. */
body.eleven-case-study-page .elementor-location-single > .elementor > .e-con,
body.eleven-case-study-page .elementor-location-single > .elementor > .elementor-element{
    background-color:#EFEADF!important;
}

/* Preserve intentionally colored components inside the page. */
body.eleven-case-study-page .eleven-cs-intro-info,
body.eleven-case-study-page .eleven-cs__image-card,
body.eleven-case-study-page .eleven-cs__media-frame,
body.eleven-case-study-page .eleven-cs__video,
body.eleven-case-study-page .eleven-cs__project-nav-card{
    /* their own backgrounds/images stay untouched */
}


/* --------------------------------------------------------------
   Coffeeholics navigation-card crop only.
   All other Previous / Next cards keep their original framing.
-------------------------------------------------------------- */
.eleven-cs__project-nav-card--post-coffeeholics .eleven-cs__project-nav-image{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center 42%!important;
    transform:scale(1.16)!important;
    transform-origin:center center;
}

@media(hover:hover) and (pointer:fine){
    .eleven-cs__project-nav-card--post-coffeeholics:hover .eleven-cs__project-nav-image{
        transform:scale(1.20)!important;
    }
}

@media(max-width:767px){
    .eleven-cs__project-nav-card--post-coffeeholics .eleven-cs__project-nav-image{
        object-position:center 40%!important;
        transform:scale(1.18)!important;
    }
}


/* --------------------------------------------------------------
   Intro card: projects without a Project URL
-------------------------------------------------------------- */
.eleven-cs-intro-info--no-url .eleven-cs-intro-info__url-label{
    display:none!important;
}

.eleven-cs-intro-info--no-url .eleven-cs-intro-info__services-label{
    margin-top:0!important;
    padding-top:0!important;
    border-top:0!important;
}


/* --------------------------------------------------------------
   Intro URL: clean one-line domain label
-------------------------------------------------------------- */
.eleven-cs-intro-info a.eleven-cs-intro-url,
.eleven-cs-intro-info a.eleven-cs-intro-url:visited{
    white-space:nowrap!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
}

.eleven-cs-intro-url__display{
    white-space:nowrap!important;
}