/* ☑️ CLEAN 31 mar 2023 */


@import "../css/reset.css";
@import "../css/standards.css";
@import "grid-spacing-fox.css";
@import "nav-fox.css";
@import "htc.css";
@import "../css/fox-slide.css";
@import "type-fox.css";
@import "content-fox.css";


/* 00 Fixing heavy images load problem:; */
    .foxsimpleslide:not(.activeSlide) .visual-container .visual,
    .foxsimpleslide:not(.activeSlide) .extra-bg1,
    .foxsimpleslide:not(.activeSlide) .visual-container .iphone-ui,
    .foxsimpleslide:not(.activeSlide)#studio-mode .bg-w100-h100,
    .foxsimpleslide:not(.activeSlide)#juste-mode .bg-w100-h100-fixed,
    .foxsimpleslide:not(.activeSlide)#juste-mode .bg-w100-h100 .bg-inner,
    .foxsimpleslide:not(.activeSlide)#darius-mode .bg-w100-h100-fixed,
    .foxsimpleslide:not(.activeSlide)#darius-mode .bg-w100-h100 .bg-inner,
    .foxsimpleslide:not(.activeSlide) .col.press-mag-container .net-mag
    {
/* 🔴 make: only non-active and non-active-visited+2sec slides */
background-image:url('../img-fox/spacer.png')!important; /* spacer.png for chrome */
    }
    /* .activeSlide{
        opacity: 0.5;
    } */

/* 00 VARIOUS: */
    /* Section Anchor: */
        .section-anchor{
            position:absolute;
            top:0;
            left:0;
        }
        .section-anchor-top-minus25vh{
            top:calc(-25vh + 1px);
        }
        .section-anchor-top-minus50vh{
            top:calc(-50vh + 1px);
        }
        .section-anchor-for-hero-to-case-visual{
            top:calc( (-100vh + 800px) / 2 );
        }
    /* ANIMATION */
        .animateWhole .marker-client-project{
            transition: all 0.3s ease-in-out 0s, visibility 0s linear 0s, z-index 0s linear 0.0s; /* ✏️ might need to fasten it up to 0.2 - for quicker hover scanability */
        }
        /* Standard transition speed: */
        .animateWhole .studio-kicker, /* For London marker on-off */
        .animateWhole .marker-client-name,
        .animateWhole .marker-label p, /* City name */
        .animateWhole .marker-client-project .project-label-p,
        .animateWhole .marker-fill-borders,
        .animateWhole .marker-fill-bg,
        .animateWhole .standard-transition
        {
            transition: all 0.2s ease-in-out 0s, visibility 0s linear 0s, z-index 0s linear 0.0s;
        }
        .animateWhole .standard-transition-important,
        .foxsimpleslide#studio-mode .studio-close-svg-or-text
        {
            transition: all 0.2s ease-in-out 0s, visibility 0s linear 0s, z-index 0s linear 0.0s!important;
        }
        .animateWhole .marker .marker-top-block-gradient{
            transition: opacity 0.2s ease-in-out 0s, visibility 0s linear 0s, z-index 0s linear 0.0s; /* transition-property solo is not working on Safari */
        }
        .animateWhole .clients-map-container .marker::before, /* border L */
        .animateWhole .clients-map-container .marker::after /* border R */
        {
            transition: background-color 0.2s ease-in-out 0s, visibility 0s linear 0s, z-index 0s linear 0.0s; /* transition-property solo is not working on Safari */
        }
        /* For transition from CLIENTS-MAP to CLIENTS-CINEMATIC-LIST */
        body.body-maps-modal-on.animateWhole .clients-map-container div,
        body.body-maps-modal-on.animateWhole .clients-map-container p,
        body.body-maps-modal-on.animateWhole .clients-map-container a
        {
            transition:none!important;
        }
    /* CTAs: */
        /* CTA S: (Map: open modal)*/
            .cta-s{
                margin:0;
                cursor:pointer;
            }
            .cta-s-open-map-modal.cta-s{ /* ✏️ move */
                bottom:-14.5px;
                z-index:1;
                position:absolute;
                left:50%; transform:translateX(-50%);
            }
                .cta-s .inner{
                    float: left;
                    padding:9px 12px;
                    border:1px solid;
                    border-radius:15px;
                }
            /* ✏️ move */ /* 1100w max: */ 
            @media screen and (max-width:1100px){
                .cta-s-open-map-modal.cta-s{
                    bottom:-9px;
                }
            }
            /* ✏️ move */ /* 650w max: */ 
            @media screen and (max-width:650px){
                .cta-s-open-map-modal.cta-s{ 
                    bottom:-4.5px;
                }
            }
        /* CTA XS: (Map & Press: case buttons) */
            .cta-xs{
                margin:0; /* WAS margin:0 0 0px 6px; */
            }
            .cta-xs{
                font-size:9px; /* TYPE ✏️ */ 
                line-height:12px; /* P 5px */
                letter-spacing:1px;
                text-transform:uppercase;  
                /* font-family: 'bold', arial; */
            }
            /* ✏️ move? */ .clients-map-container .marker .cta-xs{
                margin-left:4px;
            }
                .cta-xs .inner{
                    display: inline-block;
                    position: relative;
                    border-radius:2px;
                    border:1px solid;
                    /* ✏️ FIX TYPOGRAPHY */ padding:0.5px 2px 1px 3.5px;
                }
                /* ✏️ move? */ .clients-map-container .cta-xs .inner{
                    /* ✏️ for marker */ top:-1px;
                }
                .animateWhole .cta-xs .inner{
                    /* ✏️ */ transition: all 0.3s ease-out 0s, visibility 0s linear 0s, z-index 0s linear 0.0s;
                }


/* 01 HERO: */
        .col-hero-vert-adjustment{
            margin-bottom:calc(42px * 0.75); /* ✏️ Responsive check-adjust (tablet) (mobile menu size) */
        }

/* 01.2 HTC → htc.css */

/* 02 CASE STUDIES: */
    /* Case: Client logo: */
        .client-logo{
            position:absolute;
            margin-top:-20px;
            height:20px;
            top:-40px;
        }
            .client-logo-inner{
                position:absolute;
                left:0; 
                bottom:0;
                background-size:100% auto;
                background-repeat: no-repeat;
                width:100px; /* Default */
                height:23px; 
            }
                .client-logo-inner .logo-svg{
                    position:absolute;
                }
                /* */
                .client-logo.wemod-logo,
                .client-logo.wemod-logo .client-logo-inner
                {
                    width:141px;
                }
                .client-logo.wemod-logo .client-logo-inner{
                    /* ✏️ to content.css? */
                    height:30px;
                    background-image: url('../content-fox/case/wemod/case-logo.png');
                }
                /* */
                .client-logo.disney-logo,
                .client-logo.disney-logo .client-logo-inner
                {
                    width:109px;
                }
                .client-logo.disney-logo .client-logo-inner .logo-svg{
                    height:39px;
                    margin-left:-9px; 
                    margin-top:-6px; 
                }
                /* */
                .client-logo.pindrip-logo,
                .client-logo.pindrip-logo .client-logo-inner
                {
                    width:100px;
                }
                .client-logo.pindrip-logo .client-logo-inner .logo-svg{
                    height:58px;
                    margin-top:-28.83px;
                }
                /* */
                .client-logo.kiddieskingdom-logo,
                .client-logo.kiddieskingdom-logo .client-logo-inner
                {
                    width:176px;
                }
                .client-logo.kiddieskingdom-logo .client-logo-inner .logo-svg{
                    height:35px;
                    margin-left:-2px;
                    margin-top:-4px;
                }
                /* */
                .client-logo.hairlooks-logo,
                .client-logo.hairlooks-logo .client-logo-inner
                {
                    width:106px;
                }
                .client-logo.hairlooks-logo .client-logo-inner .logo-svg{
                    height:28px;
                    margin-top:-4px;
                }
                /* */
                .client-logo.invideo-logo,
                .client-logo.invideo-logo .client-logo-inner
                {
                    width:119px;
                }
                .client-logo.invideo-logo .client-logo-inner .logo-svg{
                    margin-left:-3px;
                    height:30px;
                }
                /* */
                .client-logo.oxygean-logo,
                .client-logo.oxygean-logo .client-logo-inner
                {
                    width:46px;
                }
                .client-logo.oxygean-logo .client-logo-inner .logo-svg{
                    height:61px;
                    margin-top:-29px;
                }
        /* App stores logo */
            .apple-logo-xs svg{
                width:18px;
                height:21px;
                position:relative;
                padding:0 4px 0 0;
                top:1px;
            }
            /* 650 max: */
                @media screen and (max-width: 650px)
                {
                    .apple-logo-xs svg{
                        width:14.15px;
                        height:16.8px;
                        padding:0 3px 0 0;
                    }
                }
            .android-logo-xs svg{
                width:24px;
                height:13px;
                position:relative;
                padding:0 4px 0 0;
            }
            /* 650 max: */
                @media screen and (max-width: 650px)
                {
                    .android-logo-xs svg{
                        width:18.46px;
                        height:10.4px;
                        padding:0 2.75px 0 0;
                    }
                }
        /* News articles logo */
                .label-logo.ah-logo{
                }
            /* 650 max: */
                @media screen and (max-width: 650px)
                {
                    .label-logo.yorkshirepost .svg{
                        /* 0.7 for 320px res, 0.75 per figma */
                        height:calc(22px * 0.7); /* 🟠 2x check */
                        width:calc(201px * 0.7);
                    }
                }

    /* Deliverables divider: */
        .deliverables-divider{
            clear:left;
            float:left; /* For flexible width */
            display:block;
            border:1px solid;
            width:calc(100% - 2px);
            margin-top:40px;
        }
        .deliverables-divider-margin-top-bottom0{
            margin-top:0px!important;
            margin-bottom:0px!important;
        }


    /* Deliverables CTA: */
        .deliverables-cta{
            clear:left;
            float:left; /* For flexible width */
            display:block;
            border-radius:12px;
            padding:12px 22.5px 13.5px 22.5px;
            text-align:center;
            width:calc(100% - 0px - 45px);
            margin-top:40px;
        }
        /* 🟠 Do responsive too */

    /* Case: Visuals, iPhoneX, Video: */
        /* Container: */
        .visual-container{
            width:100%;
            height:100%;
            position:relative;
            clear:left;
        }
        .columns-grid .visual-container{
            margin-bottom:0!important;
        }
            .visual-container .visual{
                width:100%;
                height:100%;
                position:relative;
                clear:left;
                top:0;
                left:0;
            }
                .visual-container .visual .visual-inside-visual{
                    height:auto;
                    clear:none; float:left;
                    width:calc(100% - 32px);
                    margin:0 0 16px 16px;
                    background-color:transparent!important;
                }
            /* 1101w min: */ 
                @media screen and (min-width:1101px){
                    .visual-container .visual.visual-50p-width-min1101{
                        width:calc(50% - 16px - 8px);
                    }
                } 
            .visual-rounded{
                border-radius:24px;   
            }
                .visual .visual-label-inside{
                    position: relative;
                    float:left;  padding:16px 0 16px 0;
                    width:calc(100%);
                }
                .visual.visual-rounded .visual-inner-border{
                    border-radius:24px;
                }
                .visual .visual-inner-border{
                    position:absolute;
                    width:100%;
                    height:100%;
                    border:1px solid;
                    /* Inner border https://stackoverflow.com/questions/9601357/placing-border-inside-of-div-and-not-on-its-edge */
                    box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    -webkit-box-sizing: border-box;
                }
            .visual-container .visual.with-shadow{
                /* At content-fox.css */
            }
            .visual-container .visual.no-shadow{
                box-shadow:none!important; /* ✏️ color / remove? */
            }
            .visual-container .visual.no-bg-color{
                background-color:transparent!important;
            }
            .visual,
            .visual-container .visual,
            .visual-container .iphone-ui
            {
                background-size:100% auto;
                background-repeat:no-repeat;
                background-position:top center; /* ✏️ 'Bottom' or 'repeat': fix for top line bug, Chrome */
            }
            .visual.visual-v-center,
            .visual-container .visual.visual-v-center,
            .visual-container .iphone-ui.visual-v-center
            {
                background-position:center center;
            }
            .visual.visual-height-100p{
                background-size:auto 100%;
            }
            .visual-container .visual.visual-with-label-inside{
                background-position:0 42px;
            }
        /* iPhone X Container: */
            /* iPhone Border Quote */
            .iphone-border-quote-container{ /* USE CASE: Hairlooks */
                position:absolute;
                top:-1px;
                left:-1px;
                width:calc(100% + 2px);
                height:calc(100% + 2px);
            }
            /* iPhone */
            .visual-container .visual.iphone{
                border-radius:13.1% / 6.3%;
                padding-top:207.901%; 
                overflow: hidden;
                /* box-shadow → content-fox.css */
            }
            .visual-container .visual.iphone.no-iphone-visual{
                box-shadow:none;
                overflow:visible;
            }
                .visual-container .visual.iphone .iphone-bg{
                    width:100%;
                    height:100%;
                    position:absolute;
                    top:0;
                    left:0;
                }
                .visual-container .visual.iphone .iphone-ui::after{ /* iphone-notch */
                    width:100%;
                    padding-top:12.5%;
                    position:absolute;
                    top:-0.25px; /* Safari */
                    left:0;
                    content: "";
                    background-image: url('../img-fox/icons/notch-white.svg'); /* SVG image */
                    background-repeat:no-repeat;
                    background-size:100% auto;
                }
                .visual-container .visual.iphone.no-notch .iphone-ui::after{ /* NO iphone-notch */
                    background: none;
                    display: none;
                }
                @-moz-document url-prefix() {
                    .visual-container .visual.iphone .iphone-ui::after{ /* iphone-notch */
                        top:-0.5px;
                    }
                }
                .visual-container .visual.iphone .iphone-ui{
                    width:92.59%;
                    height:96.436%;
                    position:absolute;
                    top:1.782%;
                    left:3.705%;
                    border-radius:10.07% / 4.651%;
                    overflow:hidden; /* For video borders */
                }
            /* iPhoneX height X 2: */
            .visual-container .visual.iphone.iphone-height2{
                border-radius:13.1% / calc(6.3% / 1.963);
                padding-top:calc(207.901% * 1.963);
            }
                .visual-container .visual.iphone.iphone-height2 .iphone-ui{
                    border-radius:10.07% / calc(4.651% / 1.963);
                    top:calc(1.782% / 1.963);
                    height:calc(96.436% + 1.782%); /* Better (1.782% * 1.963 / 2) ? */
                }
            /* iPhoneX height x 1.5: */
            .visual-container .visual.iphone.iphone-height15{ /* ✏️OLD · Wrong proportions */
                border-radius:13.1% / calc(6.3% / 1.5);
                padding-top:calc(207.901% * 1.5);
            }
                .visual-container .visual.iphone.iphone-height15 .iphone-ui{
                    border-radius:10.07% / calc(4.651% / 1.5);
                    top:calc(1.782% / 2 * 1.5);
                    height:calc(96.436% + (1.782% / 2 * 1.5 ) );
                }
            /* iPhoneX height * 1.75: */
            .visual-container .visual.iphone.iphone-height175{ /* ✏️OLD · Wrong proportions */
                border-radius:13.1% / calc(6.3% / 1.75);
                padding-top:calc(207.901% * 1.75);
            }
                .visual-container .visual.iphone.iphone-height175 .iphone-ui{
                    border-radius:10.07% / calc(4.651% / 1.75);
                    top:calc(1.782% / 2 * 1.75);
                        height:calc(96.436% + (1.782% / 2 * 1.1 ) ); /*✏️OLD · '* 1.1': approximate ratio; */
                }
            /* iPhoneX height * 1.25 · 375px x 1235px-2470px height */
            .visual-container .visual.iphone.iphone-height125{ /* ✏️OLD · Wrong proportions */
                border-radius:13.1% / calc(6.3% / 1.25);
                /* padding-top:calc(207.901% * 1.25); */ padding-top:calc(207.901% * 1.25 * 0.99); /* height temp. fix for OX discover.jpg */
            }
                .visual-container .visual.iphone.iphone-height125 .iphone-ui{
                    border-radius:10.07% / calc(4.651% / 1.25);
                    top:calc(1.782% / 2 * 1.25 * 1.25);
                    /* height:calc(96.436% + (1.782% / 2 * 1.25 * 0.65 ) ); */ height:calc(96.436% + (1.782% / 2 * 1.25 * 0.65 ) ); /* height temp. fix for OX discover.jpg */
                }
        /* Video (visual): */
            .video-container-plus-margins{
                top:-0.5%;
                left:-0.5%;
                width:101%;
                height:101%;
                position:absolute;
                overflow:hidden!important;
            }
            .visual-container .video100p-w-and-h{
                position:absolute; /* for: top spacing = 0 */
                padding-top:0; /* Aspect ratio not required */
                width:100%;
                height:100%;
                /*
                top:0; 
                left:0; 
                margin-top:-4%; 
                width:100%; 
                height:108%;
                */
                opacity:0; /* Before load & play */
                visibility:hidden; /* For smooth foxslides transition disney-case, Chrome */
            }
            .visual-container .video100p-w-and-h.running-visible{
                visibility:visible; 
            }
            .iphone-ui .video100p-w-and-h{
                position:absolute; /* for: top spacing = 0 */
            }
            /* Safari 7.1+ (2020 Dec) */
            _::-webkit-full-page-media, _:future, :root .visual-container .iphone .video100p-w-and-h{ /* iPhone only */
                border-radius:10.07%/4.65%;
            }
        /* Visual: Wide (100% wide): */
            .visual-100p-wide{ /* USE CASE: WM design system, Disney multi-intro-frames */
                float:left;
                position: relative;
                left:50%;
                margin-left:-50vw;
                width:100vw;
                background-repeat:no-repeat;
                background-position:50% 50%;
                background-size:auto 100%;
            }
    /* Case: Google: */
        /* BG visual: */
        .section-intro-cover-w100-h100{
            width:100%;
            height:100%; height:100lvh; /* 100svh > 100dvh > 100lvh · HowTo https://stackoverflow.com/questions/68094609/ios-15-safari-floating-address-bar */
            top:0; 
            left:0; position:fixed;
            z-index:-1;
        }



/* 03 INFO: */

    /* US STUDIO: */
        .studio-kicker,
        .studio-client-logos
        {
            z-index:2;
        }
        /* BG visual: */
        .foxsimpleslide#studio-mode .bg-w100-h100{
            width:100%;
            height:100%; height:100lvh; /* 100svh > 100dvh > 100lvh · HowTo https://stackoverflow.com/questions/68094609/ios-15-safari-floating-address-bar */
            top:0; /* ✏️ no problem for tablet? */
            left:0; position:fixed;
            background-size:cover;
            background-position:50% 50%;
            background-repeat:no-repeat;
            z-index:-1; /* ✏️ problem for text in above slides */
        }
        /* Client logos: */
        .studio-client-logos{
            margin:-20px 0 -12px 0;
        }
            .studio-client-logo{
                position:relative;
                display:block;
                height:56px;
            }
            /* */
            .studio-client-logo.disney{
                width:89px;
                margin-left:-4px;
            }
            .studio-client-logo.google{
                width:86px;
            }
            .studio-client-logo.vans{
                width:72px;
            }
            .studio-client-logo.cat{
                width:45px;
            }
            .studio-client-logo.pwc{
                width:65px;
                margin-right:-4px;
            }
        /* MAP: markers-on-map-on */
        .visual-container.clients-map-container{
            height:674px;
        }
            .clients-map-container .visual{
                margin-left:50%; 
                width:1516px; left:-758px;
                height:100%;
                background-image: url('../content-fox/studio/map-transparent-2x.webp');  /* ✏️ Move to content? */
                background-position:50% 50%;
            }
            /* Map: Markers */
                .markers-on-map-on .clients-map-container .markers{
                    position:relative;
                    width:100%;
                    height:100%;
                }
                    .markers-on-map-on .clients-map-container .marker{
                        position:absolute;
                        width:20px;
                        margin-left:-10px; margin-bottom:5px; /* Adjusting position to match map bottom-mid */
                        z-index:2; /* ✏️ to make it work above J & D BG IMG -- test-fix it later / Also, for Boston (?) */
                    }
                    .markers-on-map-on .clients-map-container .marker:hover{
                        z-index:3;
                    }
                    /* London Marker Block */
                        .animateWhole .markers-on-map-on .london-marker-mask{
                            /* ✏️ */ transition: all 0.4s ease-in-out 0s, visibility 0s linear 0s, z-index 0s linear 0.0s;
                        }
                        .markers-on-map-on .london-marker-mask{
                            width:500px; margin-left:-250px;
                            height:1000px;
                            margin-bottom:calc(-30px + 5px); /* Give space for city name */
                            position:absolute;
                            z-index:1;
                            /* Mask: */
                            -webkit-mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 32.3%, rgba(0, 0, 0, 1) 38.5%); /* Howto: https://stackoverflow.com/questions/60359212/is-it-possible-to-animate-a-css-mask-image */
                                    mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 32.3%, rgba(0, 0, 0, 1) 38.5%);
                            -webkit-mask-size: 100% 200%;
                                    mask-size: 100% 200%;
                        }
                            .markers-on-map-on .london-marker-mask .marker{
                                margin-bottom:30px; /* Give space for city (London) name */
                            }
                    /* London Marker Hover: */
                        #studio-mode:has(.marker.marker-london:hover) .london-marker-mask{ /* Prev. was: #studio-mode:has(.markers-on-map-on .marker.marker-london:hover) .london-marker-mask - not working on Safari */
                            z-index:3;
                            -webkit-mask-position:right;
                                    mask-position:right;
                        }
                        /* ✏️ move  */
                        .animateWhole .studio-client-logos .default-svg-bg,
                        .animateWhole .studio-kicker,
                        .animateWhole .studio-kicker .highlight-text-top-min650w,
                        .animateWhole .studio-kicker .highlight-text-top-max650w,
                        .animateWhole .foxsimpleslide#studio-mode .studio-kicker .studio-kicker-plus-svg
                        { /* For London marker on-off */
                            transition: all 0.3s ease-in-out 0s, visibility 0s linear 0s, z-index 0s linear 0.0s; /* ✏️move */ 
                        }
                        /* 650w min: */ 
                            @media screen and (min-width:651px){
                                #studio-mode:has(.marker.marker-london:hover) .studio-kicker .highlight-text-top-min650w{
                                    background-color:var(--map-marker-cities-dimmed40); /* ✏️ move */
                                    background-image:url('../img-fox/spacer.png'); 
                                }
                            }
                        /* 650w max: */ 
                            @media screen and (max-width:650px){
                                #studio-mode:has(.marker.marker-london:hover) .studio-kicker .highlight-text-top-max650w{
                                    background-color:var(--map-marker-cities-dimmed40); /* ✏️ move */
                                    background-image:url('../img-fox/spacer.png');
                                }
                            }
                    /* HOVER Parent */ /* Howto: https://forum.freecodecamp.org/t/cant-apply-hover-effect-to-parent/556904/3 */
                        .markers-on-map-on .clients-map-container .visual:has(.marker.marker-north-a:hover) .marker.marker-north-a:not(:hover) p,
                        .markers-on-map-on .clients-map-container .visual:has(.marker.marker-europe:hover) .marker.marker-europe:not(:hover) p,
                        .markers-on-map-on .clients-map-container .visual:has(.marker.marker-asia:hover) .marker.marker-asia:not(:hover) p
                        {
                            color:var(--map-marker-cities-dimmed75)!important; /* ✏️ move */
                        }
                        .markers-on-map-on .clients-map-container .visual:has(.marker.marker-north-a:hover) .marker.marker-north-a:not(:hover)::before,
                        .markers-on-map-on .clients-map-container .visual:has(.marker.marker-europe:hover) .marker.marker-europe:not(:hover)::before,
                        .markers-on-map-on .clients-map-container .visual:has(.marker.marker-asia:hover) .marker.marker-asia:not(:hover)::before,
                        /* */
                        .markers-on-map-on .clients-map-container .visual:has(.marker.marker-north-a:hover) .marker.marker-north-a:not(:hover)::after,
                        .markers-on-map-on .clients-map-container .visual:has(.marker.marker-europe:hover) .marker.marker-europe:not(:hover)::after,
                        .markers-on-map-on .clients-map-container .visual:has(.marker.marker-asia:hover) .marker.marker-asia:not(:hover)::after
                        {
                            background:var(--map-marker-cities-dimmed75)!important; /* ✏️ move */
                        }
                        .markers-on-map-on .clients-map-container .visual:has(.marker.marker-north-a:hover) .marker.marker-north-a:not(:hover) .marker-fill-borders,
                        .markers-on-map-on .clients-map-container .visual:has(.marker.marker-europe:hover) .marker.marker-europe:not(:hover) .marker-fill-borders,
                        .markers-on-map-on .clients-map-container .visual:has(.marker.marker-asia:hover) .marker.marker-asia:not(:hover) .marker-fill-borders
                        {
                            fill:var(--map-marker-cities-dimmed75)!important;  /* ✏️ move */
                        }
                    /* Marker top, bottom */
                        .markers-on-map-on .clients-map-container .marker-top,
                        .markers-on-map-on .clients-map-container .marker-bottom
                        {
                            width:24px;
                            position:absolute;
                        }
                        .markers-on-map-on .clients-map-container .marker-top{
                            height:11px;
                            top:-5px;
                            left:-2px;
                        }
                        .markers-on-map-on .clients-map-container .marker-bottom{
                            height:6px;
                            bottom:-5px;
                            left:-2px;
                        }
                            .markers-on-map-on .clients-map-container .marker-top svg,
                            .markers-on-map-on .clients-map-container .marker-bottom svg
                            {
                                position:absolute;
                                left:2px;
                                top:0px;
                            }
                            .markers-on-map-on .clients-map-container .marker-top svg.default{
                                width:20px;
                                height:11px;
                            }
                            .markers-on-map-on .clients-map-container .marker-top svg.hover{
                                width:22px;
                                height:11px;
                                left:1px;
                                top:-2px;
                            }
                            .markers-on-map-on .clients-map-container .marker-bottom svg.hover{
                                width:22px;
                                height:8px;
                                left:1px;
                                bottom:-6px;
                            }
                            .markers-on-map-on .clients-map-container .marker-bottom svg.default{
                                width:20px;
                                height:6px;
                            }
                            /* SVG hover / non hover: */
                            .markers-on-map-on .clients-map-container .marker svg.hover{
                                opacity:0;
                            }
                            .markers-on-map-on .clients-map-container .marker:hover svg.hover{
                                opacity:1;
                            }
                            /* For Safar top-position bug: */
                            /* Safari 7.1+ (2023 Apr) 
                            ✏️ NOT FIXED YET
                            _::-webkit-full-page-media, _:future, :root .clients-map-container .marker-top svg{ 
                                height:12px;
                            } */
                    /* Marker borders: */
                        .markers-on-map-on .clients-map-container .marker::before, /* border L */
                        .markers-on-map-on .clients-map-container .marker::after /* border R */
                        {
                            content: "";
                            width:1px;
                            height:100%;
                            position:absolute;
                            z-index:-1;
                            top:0;
                        }
                        .markers-on-map-on .clients-map-container .marker::before{ /* border L */
                            left:0px;
                        }
                        .markers-on-map-on .clients-map-container .marker::after{ /* border R */
                            right:0px;
                        }
                        .markers-on-map-on .clients-map-container .marker:hover::before{
                            width:2px;
                            left:-1px;
                        }
                        .markers-on-map-on .clients-map-container .marker:hover::after{
                            width:2px;
                            right:-1px;
                        }
                    /* Marker client: */
                            .markers-on-map-on .marker .marker-client{
                                width:100%;
                                position:relative;
                                white-space:nowrap;
                                padding:2px 0 10px 0;
                                margin-bottom:-2px; /* Makes .clientX1project height=10px */
                                /* 🚧 */ opacity:0; /* Hides client dividers */
                            }
                            .markers-on-map-on .marker .marker-client:first-child{
                                padding-top:0px;
                            }
                            .markers-on-map-on .marker:hover .marker-client{
                                opacity:1;
                            }
                            .markers-on-map-on .marker-client:hover{
                                /* margin-bottom:0; */
                            }
                            .markers-on-map-on .marker-client:last-child:not(:first-child):hover{
                                margin-bottom:1px;
                            }
                            .markers-on-map-on .marker-client:first-child:hover{
                                padding-bottom:11px;
                            }
                                .markers-on-map-on .clients-map-container .marker-client svg.default,
                                .markers-on-map-on .clients-map-container .marker-client svg.hover,
                                .markers-on-map-on .clients-map-container .marker-client svg.hover-top
                                { 
                                    width:20px;
                                    height:11px;
                                    position: absolute;
                                    bottom:-10px;
                                    left:0px;
                                }
                                .markers-on-map-on .clients-map-container .marker-client:first-child:last-child svg.hover{
                                    bottom:-9px;
                                }
                                .markers-on-map-on .clients-map-container .marker-client .hover-top-container{
                                    top:-0.5px;
                                    left:0;
                                    position:absolute;
                                    width:100%;
                                    height:calc(100%);
                                    overflow:hidden;
                                }
                                    .markers-on-map-on .clients-map-container .marker-client svg.hover-top{
                                        top:1.5px;
                                        bottom:auto;
                                        height:1000px;
                                    }
                                /* SVG hover / non hover: */
                                .markers-on-map-on .clients-map-container .marker .marker-client svg.hover,
                                .markers-on-map-on .clients-map-container .marker .marker-client svg.hover-top{
                                    opacity:0;
                                }
                                .markers-on-map-on .clients-map-container .marker .marker-client:hover svg.hover,
                                .markers-on-map-on .clients-map-container .marker .marker-client:hover svg.hover-top
                                {
                                    opacity:1;
                                }
                                .markers-on-map-on .clients-map-container .marker-client:last-child svg.default{ 
                                    display:none; /* Last-bottom-client: no SVG line */
                                }
                    /* Marker client name: */
                                .foxsimpleslide#studio-mode.markers-on-map-on .marker-client-name{
                                    position:absolute;
                                    right:0;
                                    padding-right:calc(20px + 10px + 1.5px);
                                    top:-0.5px;
                                    /* 🚧 */ opacity:0;
                                    text-align:right;
                                    /* Blocks accidental hover: */
                                    max-width:0px; overflow:hidden; min-height:20px;
                                    display:none; /* Hidden to fix jumpy hover  */
                                }
                                .foxsimpleslide#studio-mode.markers-on-map-on .marker:hover .marker-client-name { 
                                    /* UnBlocks accidental hover: */
                                    max-width:1000px; overflow:visible;
                                    display:block;
                                }
                                .foxsimpleslide#studio-mode.markers-on-map-on .marker-client:hover .marker-client-name { /* .marker-client:not(:first-child) */
                                    top:2px;
                                    opacity:1;
                                }
                                .foxsimpleslide#studio-mode.markers-on-map-on .marker-client:first-child:hover .marker-client-name,
                                .foxsimpleslide#studio-mode.markers-on-map-on .marker-client:first-child:last-child:hover .marker-client-name 
                                {
                                    top:1px;
                                }
                                    .foxsimpleslide#studio-mode.markers-on-map-on .marker-client-name p{
                                        /* Xposition:absolute;
                                        Xight:0; */
                                    }
                    /* Marker client project: */
                            .markers-on-map-on .marker-client .marker-client-projects{ /* .marker-client:first-child .marker-client-projects{ Xmargin-top:0px; } */
                            }
                                .markers-on-map-on .marker-client-project{
                                    height:5.5px;
                                    position:relative;
                                    margin:-2px 0 6.5px 0;
                                    /* 🚧 */ opacity:0;
                                    /* Blocks accidental hover: */
                                    max-width:0px; overflow:hidden;
                                }
                                .markers-on-map-on .marker:hover .marker-client-project{
                                    /* UnBlocks accidental hover: */
                                    max-width:1000px; overflow:visible;
                                }
                                .markers-on-map-on .marker-client:hover .marker-client-project{
                                    margin-top:-1px;
                                    height:15.5px;
                                    opacity:1;
                                }
                                .markers-on-map-on .marker-client:hover .marker-client-project:first-child:last-child{
                                    padding-top:1.5px;
                                    height:8.5px;
                                }
                                .markers-on-map-on .marker-client:hover .marker-client-project:first-child{
                                    padding-top:1.5px;
                                }
                                .markers-on-map-on .marker-client:hover .marker-client-project:last-child{
                                    height:8.5px;
                                }
                                .markers-on-map-on .marker-client:first-child:hover .marker-client-project:first-child:last-child{
                                    padding-top:1.5px;
                                    height:7.5px;
                                }
                                .markers-on-map-on .marker-client:first-child:last-child:hover .marker-client-project:last-child{
                                    height:9px;
                                }
                                .markers-on-map-on .marker-client:last-child:hover .marker-client-project:last-child{
                                    height:7px;
                                }
                                .markers-on-map-on .marker-client-project:last-child{
                                    margin-bottom:-3.5px; /* was -12px */
                                }
                                    .foxsimpleslide#studio-mode.markers-on-map-on .marker-client-project .project-label-p,
                                    .foxsimpleslide#studio-mode.markers-on-map-on .project-label-p /* Client name */
                                    {
                                        /* 🌈 (CHECK ALL .fill)  */ color:var(--white55);
                                        margin-top:-1.5px;
                                        margin-left:calc(20px);
                                        padding-left:calc(10px + 1px);
                                        height:10px;
                                    }
                                    .foxsimpleslide#studio-mode.markers-on-map-on .marker-client:hover .marker-client-project .project-label-p{
                                        height:21px; /* For smooth hover scanning↑↓ */
                                    }
                                    .foxsimpleslide#studio-mode.markers-on-map-on .marker-client-project a.project-label-p:hover{
                                        /* 🌈🚧 */ color:var(--white);
                                    }
                                    .foxsimpleslide#studio-mode.markers-on-map-on .marker-client:last-child .marker-client-project:last-child .project-label-p{
                                        height:18.5px; /* To adjust space at the bottom of Marker */
                                    }
                    /* All labels shadow: */
                        .markers-on-map-on .clients-map-container .marker .marker-label,
                        .foxsimpleslide#studio-mode.markers-on-map-on .marker-client-name,
                        .foxsimpleslide#studio-mode.markers-on-map-on .project-label-p
                        {
                            text-shadow:0px 2px 4px var(--black25); /* Keep shadow-color here */
                        }
                    /* Marker Label (City): */
                        .markers-on-map-on .clients-map-container .marker .marker-label{
                            position:absolute;
                        }
                        /* Top Label: */
                        .markers-on-map-on .clients-map-container .marker .marker-label-t-l,
                        .markers-on-map-on .clients-map-container .marker .marker-label-t-c,
                        .markers-on-map-on .clients-map-container .marker .marker-label-t-r
                        {
                            top:calc(-16.5px - 9px);
                        }
                        /* Bottom Label: */
                        .markers-on-map-on .clients-map-container .marker .marker-label-b-l,
                        .markers-on-map-on .clients-map-container .marker .marker-label-b-c,
                        .markers-on-map-on .clients-map-container .marker .marker-label-b-r
                        {
                            bottom:calc(-16.5px - 8.5px);
                        }
                        /* Left, Right, Center Label */
                        .markers-on-map-on .clients-map-container .marker .marker-label-t-l,
                        .markers-on-map-on .clients-map-container .marker .marker-label-b-l
                        {
                            left:10px;                
                        }
                        .markers-on-map-on .clients-map-container .marker .marker-label-t-r,
                        .markers-on-map-on .clients-map-container .marker .marker-label-b-r
                        {
                            right:10px;
                            text-align:right;
                        }
                        .markers-on-map-on .clients-map-container .marker .marker-label-t-c,
                        .markers-on-map-on .clients-map-container .marker .marker-label-b-c
                        {
                            text-align:center;
                            width:20px; /* for Flex H-center */ justify-content:center; display:flex!important;
                        }
                    /* Marker Label P */
                            .foxsimpleslide#studio-mode.markers-on-map-on .clients-map-container .marker .marker-label p{
                                /* ✏️ width:150px; */
                                white-space: nowrap;
                                font-family: 'extrabold', arial; 
                            }
        /* MAP: markers-on-modal-on · CASES MODAL OPEN: */
            /* Reset: */
                .markers-on-modal-on .marker-top,
                .markers-on-modal-on .marker-bottom,
                .markers-on-modal-on .markers svg,
                .markers-on-modal-on .hover-top-container{
                    display:none;
                }
                .markers-on-modal-on .marker,
                .markers-on-modal-on .london-marker-mask
                {
                    position:relative;
                    left:initial!important; /* Reset */
                    bottom:initial!important; /* Reset */
                }
            /* Scroll as cinema titles: */
                #scroll-this-as-titles{
                    scroll-behavior:auto; /* we control smoothness with JS */
                    /* overflow:auto; this was in the initial code*/
                }
            /* Close button: */
                .maps-close-button-container{
                    position:fixed;
                    bottom:35px;
                    right:35px;
                    cursor:pointer;
                    z-index:22;
                    display:none;
                }
                .markers-on-modal-on .maps-close-button-container,
                .markers-on-modal-on .maps-close-button-container svg{
                    display:block;
                }
            /* 'Titles' layout: */
                body.body-maps-modal-on{
                    overflow:hidden;
                }
                .markers-on-modal-on .markers{
                    position:fixed;
                    z-index:22;
                    top:0;
                    left:0; /* left:max(50% - 725px, 0px); */
                    width:100%; /* max-width:1450px; */
                    height:calc(100% - 120px - 225px); padding:120px 0 225px 0; /* Note city to city margin · 225px for Close */
                    overflow-y:scroll;
                }
                    body .markers-on-modal-on .marker{
                        clear:left;
                        float:left;
                        width:100%;
                    }
                    /* ⏸️ WIP TITLES IN/OUT ANIMATION 
                    .markers OR .marker{
                        opacity:0.2;
                        transition:all 3s ease-in-out 0s, visibility 0s linear 0s, z-index 0s linear 0.0s!important;
                    }
                    body.body-maps-modal-on-stage2 .markers-on-modal-on .markers
                    or
                    body.body-maps-modal-on-stage2 .markers-on-modal-on .marker
                    {
                        opacity:1;
                    }
                    */
                        .markers-on-modal-on .marker .marker-label{ /* City name */
                            width:100%;
                            display:flex; justify-content:center; 
                            padding-top:80px; /* Between cities */
                            padding-bottom:50px; /* City name to projects*/
                        }
                /* ⏸️ move responsive code */
                /* 1100w max: */ 
                    @media screen and (max-width:1100px){
                        .markers-on-modal-on .markers{
                            height:calc(100% - 60px - 150px); padding:60px 0 150px 0;
                        }
                        .markers-on-modal-on .marker .marker-label{ /* City name */
                            padding-top:70px; /* Between cities */
                        }
                    } 

                /* 768w max: */ 
                    @media screen and (max-width:768px){
                    /* Close button: */
                        .maps-close-button-container{
                            bottom:30px;
                            right:30px;
                        }
                    } 
                /* 650w max: */ 
                    @media screen and (max-width:650px){
                        .markers-on-modal-on .markers{
                            height:calc(100% - 24px - 100px); padding:24px 0 100px 0;   
                        }
                        .markers-on-modal-on .marker .marker-label{ /* City name */
                            padding-bottom:44px; /* City name to projects*/
                        }
                    } 
                /* ... */
                        .markers-on-modal-on .marker:first-child:not(.marker-london) .marker-label{ 
                            padding-top:0px;
                        }
                        .markers-on-modal-on .marker-clients{
                        }
                            .markers-on-modal-on .marker-client{
                                width:100%;
                                clear:left;
                                float:left;
                                margin-top:30px;
                            }
                            .markers-on-modal-on .marker-client:first-child{
                                margin-top:0px;
                            }
                                .markers-on-modal-on .marker-client-name,
                                .markers-on-modal-on .marker-client-projects
                                {
                                    width:48.276%; /* NOTE: follow grid system */
                                }
                                .markers-on-modal-on .marker-client-name{
                                    float:left;
                                    margin-right:3.448%; /* NOTE: follow grid system */
                                    display:flex; justify-content:right;
                !background:gray;
                                }
                                    .markers-on-modal-on .marker-client-name p{
                !background:lightgray;
                                        /* clear:left;
                                        float:right!important; */
                                        width:100%; text-align:right; /* Fixes some weird Safari bug */
                                    }
                                .markers-on-modal-on .marker-client-projects{
                                    float:left;        
                !background:darkgray;
                                }
                                    .markers-on-modal-on .marker-client-project{
                                        clear:left;
                                        float:left;
                                        margin-top:18px;
                                    }
                                    .markers-on-modal-on .marker-client-project:first-child{
                                        margin-top:0px;
                                    }


        /* Services: Types: */
            .visual-container-services .visual{
                width:100%; /* Actual width: 300px */
                height:214px;
                background-size:300px auto;
                background-color:gray;
            }
            .visual-container-services1 .visual{
                background-image:url('../content-fox/studio/studio-services1.png'); /* ✏️ Img must have transparent BG */ /* ✏️ Move to content? */
            }
            .visual-container-services2 .visual{
                background-image:url('../content-fox/studio/studio-services2.png'); /* ✏️ Img must have transparent BG */ /* ✏️ Move to content? */
            }
            .visual-container-services3 .visual{
                background-image:url('../content-fox/studio/studio-services3.png'); /* ✏️ Img must have transparent BG */ /* ✏️ Move to content? */
            }
            .visual-container-services4 .visual{
                background-image:url('../content-fox/studio/studio-services4.png'); /* ✏️ Img must have transparent BG */ /* ✏️ Move to content? */
            }
        /* Services: Process: */
            .process-item-name-container .process-item-number,
            .col-process .process-item-name .name,
            .process-details-item,
            .process-item-name .connector1,
            .process-item-name .connector-mask
            {
                transition:all 0.4s ease-in-out 0s, visibility 0s linear 0s, z-index 0s linear 0.0s; /* ✏️ Move */
            }
            .col-process .process-item-name-container,
            .col-process .process-item-name,
            .process-details-item
            {
                position:relative;
                clear:left; float:left;
            }
                .col-process .process-item-name-container:not(.active) .process-item-name .name{
                    cursor:pointer;
                }
                    .process-item-number{
                        width:30px;
                        top:22.5px;
                        left:-41px;
                        text-align:right;
                        position:absolute;
                        opacity:0;
                    }
                .process-item-name-container.active .process-item-number{
                    opacity:1;
                }
                .process-details-item.process-details-item-desktop{
                    margin-top:-17px;
                    margin-bottom:25px;
                    padding-left:20px; padding-right:5px; /* Extra padding for overflow:hidden */
                    overflow:hidden;
                    /* Default (hidden) state: */
                    max-height:0;
                    padding-top:0px;
                    padding-bottom:0px;
                    opacity:0;
                }
                .process-item-name-container.active .process-details-item.process-details-item-desktop{
                    max-height:135px; /* Max 5 lines */
                    padding:10px 5px 5px 20px; /* Extra padding for overflow:hidden */
                    opacity:1;
                }

    /* JUSTE, DARIUS: */
        .col.col-jd-info-points{
            min-width:200px; /* For ~1101w */
        }
        /* BG visual: */
        .foxsimpleslide#juste-mode .bg-w100-h100-fixed,
        .foxsimpleslide#darius-mode .bg-w100-h100-fixed
        {
            width:100%;
            height:100%; height:100lvh; /* 100svh > 100dvh > 100lvh · HowTo https://stackoverflow.com/questions/68094609/ios-15-safari-floating-address-bar */
            top:0; /* ✏️ no problem for tablet? */
            left:0; 
            position:fixed;
            background-size:cover;
            background-position:50% 50%;
            background-repeat:no-repeat;
            z-index:-1; /* ✏️ problem for text in above slides (Process) */
        }

    /* PRESS: */
        .press-logo,
        .project-type,
        .project-name
        {
            clear:both; /* float:left; ✏️ problem for Tablet-mobile */
        }
            .press-logo{
                display:flex; /* For zero-space between Adweek/Net & 'featured project'*/
            }
            .press-logo-adweek{
                width:119px;
                height:43px;
                padding-top:50px;
            }
            .press-logo-net{
                width:120px;
                height:54px;
                padding-top:17px;
            }
        .wings-plus-svg{
            width:150px;
            height:calc(84px - 1px);
            position:relative;
            text-align:center;
        }
            .wings-plus-svg .wings{ /* SVG 16kb*3, PNG 4kb*/
                position:absolute;
                top:0;
                left:50%; margin-left:-75px;
                width:150px;
                height:84px;
                background-size:100% auto;
                background-image:url('../content-fox/press/wings-2x-tiny.png');  /* ✏️ Move to content? */
                opacity:0.55;
            }
                .wings-plus-svg .press-logo-wings-size{
                    width:150px;
                    left:50%; margin-left:-75px;
                    height:84px;
                    position:absolute;
                }
        .project-type{
            padding-top:30px;
        }
        .project-name{
            padding-top:18px;
        }
        .foxsimpleslide#press-mode .cta-xs{
            padding-top:20px;   
            clear:left; display:block; /* WAS float:left;  For Press: below <p> */
        }
        /* Mag: */
        .col.min-mag-height{
            min-height:664px; /* To push bottom awards down - not actual Mag height */
        }
            .col.press-mag-container .net-mag{
                position:absolute;
                top:-4px;
                left:-77px;
                width:1430px;
                height:1007px;
                background-size:100% auto;
                background-image:url('../content-fox/press/mag-full-2x.png');  /* ✏️ Move to content? */
            }


/* RESPONSIVE: */

    /* 1425 max: */
    /* Smaller case-h2 introduction (Pindrip, KK) */
        @media screen and (max-width:1425px) 
        {
        /* 02 CASE STUDIES: */
            /* Case: Client logo: */
                .client-logo{
                    top:-35px;
                    transform:scale(0.91); margin-left:-5px;
                }
        }

    /* 1325 max: */
    /* Smaller hero headline introduction */
        @media screen and (max-width:1325px) 
        {
        /* 01 HERO: */
                .col-hero-vert-adjustment{
                    margin-bottom:calc(42px * 1);
                }
        }

    /* 1100 max: */
    /* Col2 introduction */
        @media screen and (max-width:1100px) /* ✏️ make only 651>1100? */
        {
        /* 02 CASE STUDIES: */
            /* Case: Client logo: */
                .client-logo{
                    margin-left:0px; /* Reset */
                }
            /* Deliverables divider: */
                .deliverables-divider{
                    margin-top:50px;
                    margin-bottom:50px;
                    width:calc(100% - 2px);
                }
        /* 03 INFO: */
        /* US STUDIO: */
            /* Client logos: see 1000w */
            /* Map: */
                .markers-on-map-on .visual-container.clients-map-container{
                    height:800px; /* width normally = 100% */
                    margin-bottom:5px; /* H Was 805px - but globe-circle is 800; ✏️ MAP MARKERS position BROKEN */
                    overflow-x:scroll;
                    /* Mask: */ 
                    -webkit-mask-image: radial-gradient(ellipse 800px 800px at 50% 50%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.25) 50%);
                            mask-image: radial-gradient(ellipse 800px 800px at 50% 50%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.25) 50%);
                    -webkit-mask-size: 100% 100%;
                            mask-size: 100% 100%;
                }
                    .markers-on-map-on .map-overlay{
                        width:100%;
                        height:800px;
                        z-index:1;
                        left:0; position:sticky;
                        /* Mask for border (.inner): */
                        -webkit-mask-image: radial-gradient( ellipse 798px 798px at 50% 50%, rgba(0, 0, 0, 0) calc(50% - 1px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 1px) ); 
                                mask-image: radial-gradient( ellipse 798px 798px at 50% 50%, rgba(0, 0, 0, 0) calc(50% - 1px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 1px) ); 
                        -webkit-mask-size: 100% 100%;
                                mask-size: 100% 100%; 
                    }
                        .markers-on-map-on .map-overlay .inner{
                            width:800px; margin-left:calc(50% - 400px);
                            height:800px;
                            background: linear-gradient(to bottom,
                                   rgba(86,21,55,1) 0%,
                                   rgba(146, 63, 107, 0) 50%,
                                   rgba(206,104,158,1) 100%); /* ✏️ move to content */ 
                        }
                    .markers-on-map-on .clients-map-container .visual{
                        /* ✏️ Desktop: width:1516px; left:-758px; */
                        width:1316px; left:0px;  margin-left:0px; /* Note: 1316px w for tablet h-scroll */
                        background-size:auto 100%;
                        background-image: url('../content-fox/studio/map-tablet.jpg'); /* ✏️ Img must have transparent BG */ /* ✏️ Move to content? */
                        overflow:hidden; /* To cut map-markers on the right-side */
                        position: absolute;
                        /* Mask: */
                        -webkit-mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%); /* Howto: https://stackoverflow.com/questions/60359212/is-it-possible-to-animate-a-css-mask-image */
                                mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
                        -webkit-mask-size: 100% 100%;
                                mask-size: 100% 100%;
                    }
                        .markers-on-map-on .clients-map-container .markers{ 
                            margin-top:83px; 
                            /* 🚧 Adjusting markers to fit Desktop positions; Probable map-t img needs re-exporting 
                                margin-top:81px;
                                left:1.5px; */
                            height:674px;
                            width:1516px; margin-left:-100px; /* Note: 1316px w for tablet h-scroll */
                        }
        /* MAP: markers-on-modal-on */
                                .markers-on-modal-on .marker-client-name,
                                .markers-on-modal-on .marker-client-projects
                                {
                                    
                                    width:37.5%; /* NOTE: follow grid system */
                                }
                                .markers-on-modal-on .marker-client-name{
                                    margin-left:10%; /* NOTE: follow grid system */
                                    margin-right:5%; /* NOTE: follow grid system */
                                }
            /* Services: Process: */
                    .process-details-item{
                        /* Desktop: margin:-7px 0 30px 20px; */
                        margin-top:7px; /* To visually aligned with left-col*/
                        margin-left:0px;
                    }
                    .process-details-tablet-item{
                        opacity:0;
                        position:absolute;
                    }
                    .process-details-tablet-item.active{
                        opacity:1;
                    }
                    .process-details-tablet-item,
                    .process-details-tablet-item p
                    {
                        transition:all 0.4s ease-in-out 0s, visibility 0s linear 0s, z-index 0s linear 0.0s; /* ✏️ Move */
                    }
                    /* ⏸ BACKUP animation idea
                    .process-details-tablet-item:not(.active) p{
                        color:var(--map-marker-cities-dimmed40)!important;
                    } */
                /* Process connector: */
                    .process-item-name .connector1,
                    .process-item-name .connector-mask
                    {
                        position:absolute;
                        margin:0 0 0 11px;
                        width:calc(42.5vw - 100% - 11px - 10px );
                        opacity:0;
                    }
                    /* Animation in & out: */
                    .process-item-name-container .process-item-name .connector1 .connector,
                    .process-item-name-container .process-item-name .connector-mask .connector
                    {
                        transition:all 0.8s ease-in-out 0s, visibility 0s linear 0s, z-index 0s linear 0.0s; /* ✏️ Move */
                    }
                    .process-item-name-container .process-item-name .connector1 .connector,
                    .process-item-name-container .process-item-name .connector-mask .connector
                    {
                        top:0;
                        right:0;
                    }
                    .process-item-name-container:not(.active) .process-item-name .connector1 .connector,
                    .process-item-name-container:not(.active) .process-item-name .connector-mask .connector
                    {
                        width:0!important;
                        height:0!important; 
                    }
                    .process-item-name-container:not(.active) .process-item-name .connector1 .connector{
                        width:0%;
                    }
                    /* */
                    .process-item-name-container.active .connector1,
                    .process-item-name-container.active .connector-mask
                    {
                        opacity:1;
                    }
                    .process-item-name .connector-mask{
                        z-index:-1;
                        bottom:42px;
                        /* Keep mask-image style (no colors) in this .css: */
                        -webkit-mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 40%);
                                mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 40%);
                        -webkit-mask-size: 100% 250%;
                                mask-size: 100% 250%;
                    }
                    .process-item-name-container:not(.active) .process-item-name .connector-mask{
                        -webkit-mask-position:bottom;
                                mask-position:bottom;
                    }
                    .process-item-name .connector1{ /* Exception */
                        height:1px;
                        bottom:43.5px;
                    }
                        .process-item-name .connector{ /* Exception */
                            position:absolute;
                            height:100%;
                            width:100%;
                            background:linear-gradient(90deg, rgba(146,63,107,0), rgba(146,63,107,1)); /* ✏️ move to content */
                        }
                    .process-item-name .connector-mask.connector-mask1{
                        height:2px; /* ✏️ try to improve */
                    }
                    .process-item-name .connector-mask.connector-mask2{
                        height:52px;
                    }
                    .process-item-name .connector-mask.connector-mask3{
                        height:102px;
                    }
                    .process-item-name .connector-mask.connector-mask4{
                        height:152px;
                    }
                    .process-item-name .connector-mask.connector-mask5{
                        height:202px;
                    }
                    .process-item-name .connector-mask.connector-mask5.connector-mask-last{
                        bottom:calc(42px - 27px);
                    }
                        .process-item-name .connector-mask .connector{ /* HowTo http://jsfiddle.net/zaxy6pmn + https://stackoverflow.com/questions/18012420/draw-diagonal-lines-in-div-background-with-css */
                            position:absolute;
                            width:100%;
                            height:100%;
                            /* ✏️ move to content */ background: linear-gradient(to top left,
                                   rgba(146,63,107,0) 0%,
                                   rgba(146,63,107,0) calc(50% - 1px), 
                                   rgba(146,63,107,1) 50%,
                                   rgba(146,63,107,0) calc(50% + 1px),
                                   rgba(146,63,107,0) 100%);
                        }
                        /* Firefox */
                        @-moz-document url-prefix() {
                            .process-item-name .connector-mask .connector{
                                /* ✏️ move to content */ background: linear-gradient(to top left,
                                       rgba(146,63,107,0) 0%,
                                       rgba(146,63,107,0) calc(50% - 1.4px), /* thickness */
                                       rgba(146,63,107,1) 50%,
                                       rgba(146,63,107,0) calc(50% + 1.4px), /* thickness */
                                       rgba(146,63,107,0) 100%);
                            }
                        } 

        /* JUSTE, DARIUS: */
                .col.col-jd-info-points{
                    min-width:0px; /* reset */
                    max-width:180px;
                }
                .foxsimpleslide#juste-mode .col.col-jd-info-points{
                    max-width:195px;
                }
            /* BG visual: */
                .foxsimpleslide#juste-mode .bg-w100-h100-fixed,
                .foxsimpleslide#darius-mode .bg-w100-h100-fixed
                {
                    background:none!important;
                    display:none;
                }
                .foxsimpleslide#juste-mode .bg-w100-h100,
                .foxsimpleslide#darius-mode .bg-w100-h100
                { 
                    position:absolute;
                    z-index:-1; /* ✏️ problem for text in above slides */
                    left:0;
                    top:0px;
                    width:100%;
                    /* Tablet-mobile scroll amount */
                    height:300vh; /* 100svh > 100dvh > 100lvh · HowTo https://stackoverflow.com/questions/68094609/ios-15-safari-floating-address-bar */
                }
                /* 1000w max: */ 
                @media screen and (max-width:800px){
                    .foxsimpleslide#juste-mode .bg-w100-h100,
                    .foxsimpleslide#darius-mode .bg-w100-h100
                    { 
                        height:250vh;
                    }
                }



                .foxsimpleslide#juste-mode .bg-w100-h100 .bg-inner,
                .foxsimpleslide#darius-mode .bg-w100-h100 .bg-inner
                { 
                    /* Mask: */
                    /* !background:red!important; testing */
                    -webkit-mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%); /* Howto: https://stackoverflow.com/questions/60359212/is-it-possible-to-animate-a-css-mask-image */
                            mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%);
                    -webkit-mask-size: 100% 100%;
                            mask-size: 100% 100%;
                }


                .foxsimpleslide#darius-mode .bg-w100-h100{
                    top:-35px; /* Adjust D head position */
                }
                    .foxsimpleslide#juste-mode .bg-w100-h100 .sticky-section,
                    .foxsimpleslide#darius-mode .bg-w100-h100 .sticky-section
                    {
                            position:sticky;
                            top:0px;
                            min-height:100vh;
                    }
                    .foxsimpleslide#juste-mode .bg-w100-h100 .sticky-section{
height:calc(1055px + 69px); /* NOTE 69=head-top-space */
                    }
                    .foxsimpleslide#darius-mode .bg-w100-h100 .sticky-section{
height:calc(1035px + 35px + 35px); /* NOTE 35=head-top-space */
                    }
                        .foxsimpleslide#juste-mode .bg-w100-h100 .bg-inner,
                        .foxsimpleslide#darius-mode .bg-w100-h100 .bg-inner
                        {
                            position:absolute;
                            width:100%; /* img w 1100px */
                            bottom:0;
                            left:0;
                            background-size:auto 100%;
                            background-repeat:no-repeat;
                        }
                        .foxsimpleslide#juste-mode .bg-w100-h100 .bg-inner{
                            height:2121px; 
                            background-position:6.5% 0; 
                        }
                        .foxsimpleslide#darius-mode .bg-w100-h100 .bg-inner{
                            height:2500px; 
                            background-position:42% 0; 

                        }
        /* PRESS: */
            /* Mag: */
            .col.min-mag-height{
                min-height:0; /* reset */
            }
            .col.press-mag-container{
                height:842px; 
                margin-top:100px;
                margin-bottom:100px;
            }
                .col.press-mag-container .net-mag{
                    top:-1px;
                    left:-83.5px;  /* ✏️ Check various breakpoints; try div-width-100% & bg-position, similar as JD images? */
                    width:1100px;
                    height:1180px;
                    background-image:url('../content-fox/press/mag-t-2x.png'); /* ✏️ Move to content? */
                }
            /* */
            .press-logo-net{
                padding-top:0px;
            }
        }

    /* 1000w max: */ 
    @media screen and (max-width:1000px){
        /* 03 INFO: */
        /* US STUDIO: */
            /* Client logos: */
                    .studio-client-logos{
                        margin:-17px 0 -10px 0;
                    }
                        .studio-client-logo{
                            height:46px;
                        }
                        /* */
                        .studio-client-logo.disney{
                            width:73px;
                            margin-left:-3px;
                        }
                        .studio-client-logo.google{
                            width:70.5px;
                        }
                        .studio-client-logo.vans{
                            width:58px;
                        }
                        .studio-client-logo.cat{
                            width:37px;
                        }
                        .studio-client-logo.pwc{
                            width:53px;
                            margin-right:-3px;
                        }
    }

    /* 750w max: */ 
    @media screen and (max-width:750px){
        /* 03 INFO: */
        /* JUSTE, DARIUS: */
        .foxsimpleslide#juste-mode .bg-w100-h100 .bg-inner{
            background-position:17% 0; 
        }
    }

    /* 650w max: */ 
    /* Mobile */ 
    @media screen and (max-width:650px){
        /* 00 VARIOUS: */
            /* CTAs: */
                /* CTA XS: (Map & Press: case buttons) */
                    .cta-xs{
                        font-size:10px; /* TYPE ✏️ */ 
                        line-height:13px; /* P 6px */
                    }
                        .cta-xs .inner{
                            /* ✏️ FIX TYPOGRAPHY */ padding:1.5px 3px 1px 4.5px;
                        }
                        .foxsimpleslide#press-mode .cta-xs .inner{
                            top:-0.5px;
                        }
                        /* Safari 7.1+ (2020 Dec) */
                        _::-webkit-full-page-media, _:future, :root .cta-xs .inner{ /* iPhone only */
                            /* ✏️ FIX TYPOGRAPHY */ padding-top:2px;
                        }
        /* 01 HERO: */
                .col-hero-vert-adjustment{
                    margin-bottom:31px;
                }
        /* 02 CASE STUDIES: */
            /* Case: Client logo: */
                .client-logo{
                    top:-28px; /* =30px */
                    transform:scale(0.75);
                }
            /* Deliverables divider: */
                .deliverables-divider{
                    margin-top:45px;
                    margin-bottom:45px;
                }
            /* Case: Visuals, iPhoneX, Video: */
                    .visual-container .visual .visual-inside-visual{
                        width:calc(100% - 24px);
                        margin:0 0 12px 12px;
                    }
                    .visual-rounded,
                    .visual.visual-rounded .visual-inner-border
                    {
                        border-radius:20px;   
                    }
                    .visual .visual-label-inside{
                        /* padding:16px 0 16px 0; -- stays same */
                    }
                    .visual-inner-border.visual-inner-border-hor-max650w{
                        border-left:none;
                        border-right:none;
                    }
                    .visual-square-max650w,
                    .visual.visual-square-max650w .visual-inner-border
                    {
                        border-radius:0px;   
                    }
                    .visual-container .visual.visual-with-label-inside{
                        background-position:0 41px;
                    }
        /* 03 INFO: */
        /* US STUDIO: */
            /* Client logos: */
                    .studio-client-logos.studio-client-logos1{
                        margin-top:-15px;
                        margin-bottom:0px;
                    }
                    .studio-client-logos.studio-client-logos2{
                        margin-top:-20px;
                        margin-bottom:-9px;
                    }
                        .studio-client-logo{
                            height:42px;
                        }
                        /* */
                        .studio-client-logo.disney{
                            width:67px;
                            margin-left:-1px;
                        }
                        .studio-client-logo.google{
                            width:64.5px;
                        }
                        .studio-client-logo.vans{
                            width:53px;
                        }
                        .studio-client-logo.cat{
                            width:34px;
                            margin-left:-12px; /* To align with Vans-on-top */
                        }
                        .studio-client-logo.pwc{
                            width:49px;
                            margin-right:6.5px; /* To align with Google-on-top */
                        }
                        .studio-client-logo.toptal{ /* 650w only */
                            width:71px;
                            margin-left:-2px;
                        }
            /* MAP: */
                .markers-on-map-on  .visual-container.clients-map-container{
                    height:450px;
                    margin-bottom:9px;
                    /* Mask: */
                    -webkit-mask-image: radial-gradient(ellipse 450px 450px at 50% 50%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.25) 50%);
                            mask-image: radial-gradient(ellipse 450px 450px at 50% 50%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.25) 50%);
                    -webkit-mask-size: 100% 100%;
                            mask-size: 100% 100%; 
                }
                    .markers-on-map-on .map-overlay{
                        height:450px;
                        /* Mask for border (.inner): */
                        -webkit-mask-image: radial-gradient( ellipse 448px 448px at 50% 50%, rgba(0, 0, 0, 0) calc(50% - 1px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 1px) ); 
                                mask-image: radial-gradient( ellipse 448px 448px at 50% 50%, rgba(0, 0, 0, 0) calc(50% - 1px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 1px) ); 
                        -webkit-mask-size: 100% 100%;
                                mask-size: 100% 100%; 
                    }
                        .markers-on-map-on .map-overlay .inner{
                            width:450px; margin-left:calc(50% - 225px);
                            height:450px;
                        }
                    .markers-on-map-on .clients-map-container .visual{
                        width:904px; /* left:-452px; */
                        background-image:url('../content-fox/studio/map-mobile.jpg');/* ✏️ Move to content? */
                    }
                        .markers-on-map-on .clients-map-container .markers{
                            margin-top:13.5px;
                            width:1137px; margin-left:-116.5px;
                            height:505.5px;
                        }
                /* London Marker Block */
                    /* .markers-on-map-on .london-marker-mask{
                        background:gray;
                    } */
                    .markers-on-map-on .london-marker-mask{
                        height:176px;
                        /* Mask: */
                        -webkit-mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 42.6%);
                                mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 42.6%);
                        -webkit-mask-size: 100% 100%;
                                mask-size: 100% 100%; 
                    }
                /* Marker Label (City): */
                    /* Top Label: */
                    .markers-on-map-on .clients-map-container .marker .marker-label-t-l,
                    .markers-on-map-on .clients-map-container .marker .marker-label-t-c,
                    .markers-on-map-on .clients-map-container .marker .marker-label-t-r
                    {
                        top:calc(-16.5px - 9.5px);
                    }
                    /* Bottom Label: */
                    .markers-on-map-on .clients-map-container .marker .marker-label-b-l,
                    .markers-on-map-on .clients-map-container .marker .marker-label-b-c,
                    .markers-on-map-on .clients-map-container .marker .marker-label-b-r
                    {
                        bottom:calc(-16.5px - 7.5px);
                    }
        /* MAP: markers-on-modal-on */
                                .markers-on-modal-on .marker-client-name,
                                .markers-on-modal-on .marker-client-projects
                                {
                                    
                                    width:38%; /* NOTE: follow grid system */
                                }
                                .markers-on-modal-on .marker-client-name{
                                    margin-left:8%; /* NOTE: follow grid system */
                                    margin-right:8%; /* NOTE: follow grid system */
                                }
            /* Services: Process: */
                .col-process .process-item-name:not(:last-child){
                    padding-bottom:30px!important;
                }
                .process-details-item{
                    margin-top:3.5px; /* To visually aligned with left-col*/
                }
                /* Process connector: */
                    .process-item-name .connector1,
                    .process-item-name .connector-mask
                    {
                        margin-left:8px;
                        width:calc(46vw - 100% - 16px );
                    }
                    .process-item-name .connector-mask{
                        /* TEST: -webkit-mask-image:none; */
                    }
                    .process-item-name .connector1{ /* Exception */
                        bottom:41px;
                    }
                    .process-item-name .connector-mask.connector-mask2{
                        height:calc(45px * 1);
                    }
                    .process-item-name .connector-mask.connector-mask3{
                        height:calc(45px * 2);
                    }
                    .process-item-name .connector-mask.connector-mask4{
                        height:calc(45px * 3);
                    }
                    .process-item-name .connector-mask.connector-mask5{
                        height:calc(45px * 4);
                    }
                    .process-item-name .connector-mask.connector-mask5.connector-mask-last{
                        bottom:41px;
                        height:calc(45px * 5 - 44px);
                    }
            /* Services: Disciplines: */ /* ✏️ Note that tablet has those img size variety as well - check figma */
                .visual-container-services .visual{
                    /*  · ~0.625 of desktop 214 & 300: */
                    height:119px;
                    background-size:148px auto;
                }
                .visual-container-services1 .visual{
                    background-image:url('../content-fox/studio/studio-services1-650w.png'); /* ✏️ Img must have transparent BG */ /* ✏️ Move to content? */
                }
                .visual-container-services2 .visual{
                    background-image:url('../content-fox/studio/studio-services2-650w.png'); /* ✏️ Img must have transparent BG */ /* ✏️ Move to content? */
                }
                .visual-container-services3 .visual{
                    height:133px;
                    background-image:url('../content-fox/studio/studio-services4-650w.png'); /* ✏️ Img must have transparent BG */ /* ✏️ Move to content? */
                }
                .visual-container-services4 .visual{
                    height:133px;
                    background-image:url('../content-fox/studio/studio-services3-650w.png'); /* ✏️ Img must have transparent BG */ /* ✏️ Move to content? */
                }
        /* JUSTE, DARIUS: */
            /* BG visual: */
                .foxsimpleslide#darius-mode .bg-w100-h100{
                    top:0px; /* Reset: adjust D head position */
                }
                    .foxsimpleslide#juste-mode .bg-w100-h100 .sticky-section{
height:calc(596px + 200px); /* NOTE 200=head-top-space */

                    }
                    .foxsimpleslide#darius-mode .bg-w100-h100 .sticky-section{
height:calc(70px + 199px); /* NOTE 199=head-top-space */
                    }
                        .foxsimpleslide#juste-mode .bg-w100-h100 .bg-inner{
                            height:1402px;
                            background-position:9.5% 0; /* ✏️ problem: pay attention to 360w */
                        }
                        .foxsimpleslide#darius-mode .bg-w100-h100 .bg-inner{
                            height:1459px;
                            background-position:30.5% 0; 
                        }
        /* PRESS: */
                .press-logo-adweek{
                    width:88.18px;
                    height:32px;
                    padding-top:40px;
                }
                .press-logo-net{
                    width:90px;
                    height:40.5px;
                    padding-top:20px;
                }
                .wings-plus-svg{
                    width:132px;
                    height:73px;
                }
                    .wings-plus-svg .wings{ /* SVG 16kb*3, PNG 4kb*/
                        width:132px;
                        margin-left:-66px;
                        height:73px;
                        /*  background-image:url('../content-fox/press/wings-2x-tiny.png');  /* ✏️ export tablet size, Move to content? */
                    }
                    .wings-plus-svg .press-logo-wings-size{
                        width:134px; margin-left:-66px;
                        height:73px;
                    }
            /* */
                .project-type{
                    padding-top:25px;
                }
            /* Mag: */
                .col.press-mag-container{
                    height:497px; /* probable ok */
                    
                    margin-top:60px;  /* probable ok */
                    margin-bottom:0px;
                }
                    .col.press-mag-container .net-mag{
                        top:-1.5px;                    
                        left:-31px;  /* ✏️ Check various breakpoints; try div-width-100% & bg-position, similar as JD images? */
                        width:650px;
                        height:610px;
                        background-image:url('../content-fox/press/mag-m-2x.png'); /* ✏️ Move to content? */
                    }
    }

/* / */