/* OTKO reference effects. Shared colors remain linked to Divi global colors. */
body.otko-motion {
 --otko-cream:var(--gcid-8657d911-3ab7-4db7-8914-ad1a38a1bf9c,#fff4e6);
 --otko-ink:var(--gcid-6ee2f0d0-ff42-4252-bd6e-11620eca2740,#2f2a2a);
 --otko-coral:var(--gcid-d322145a-ecd8-4198-8047-8e7586def352,#fe6f5e);
 --otko-red:var(--gcid-0b33f8f5-6d83-4616-9026-d04152bc4ca1,#f40d2a);
 --otko-line:var(--gcid-8d6f27ec-17f9-4579-bae7-e3d05deb6ef0,rgba(47,42,42,.14));
 --otko-gutter:var(--gvid-1df22b8e-fa35-4860-aa3b-22d06c2a3c50,clamp(22px,4vw,64px));
 --otko-ease:cubic-bezier(.16,1,.3,1); --otko-fast:.3s; --otko-medium:.6s;
 --otko-admin-offset:0px; --otko-header-height:84px;
}
body.otko-motion.admin-bar{--otko-admin-offset:32px}
.otko-motion :is(#main,#work,#capabilities,#realisation,#studio,#contact){scroll-margin-top:calc(var(--otko-header-height) + var(--otko-admin-offset) + 30px)}
.otko-motion .et-l--header{position:sticky;top:var(--otko-admin-offset);z-index:500}
.otko-motion #otko-header{background:transparent!important;transition:background var(--otko-medium) var(--otko-ease),backdrop-filter var(--otko-medium) var(--otko-ease)}
.otko-motion .et-l--header.otko-scrolled #otko-header{background:color-mix(in srgb,var(--otko-cream) 86%,transparent)!important;backdrop-filter:blur(10px)}
.otko-motion #otko-header .et_pb_menu{background:transparent!important}
.otko-motion .et-l--header{background:var(--otko-cream)}
.otko-motion #otko-header .et_pb_menu__logo img{width:90px!important;max-width:none!important;max-height:44px!important}
.otko-motion #otko-header .et_pb_menu__logo-wrap{flex:0 0 auto!important}
.otko-motion #otko-header .et_pb_menu__wrap{flex:1!important;justify-content:flex-end!important}
.otko-motion #otko-header .et_pb_menu_inner_container{width:100%;justify-content:space-between!important}
@media(min-width:981px){
 .otko-motion #otko-header .et-menu>li>a{font-size:14px!important}
 .otko-motion #otko-header .et-menu>.wpml-ls-current-language>a{padding-right:22px!important}
 .otko-motion #otko-header .et-menu>.wpml-ls-current-language>a:after{left:auto!important;right:0!important}
 .otko-motion #otko-header .et-menu>.wpml-ls-current-language>.sub-menu{left:auto;right:0;background:var(--otko-cream)}
}
.otko-motion #otko-header .et-menu>li:not(.wpml-ls-item)>a{position:relative}
.otko-motion #otko-header .et-menu>li:not(.wpml-ls-item)>a:after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--otko-coral);transition:width var(--otko-fast) var(--otko-ease)}
.otko-motion #otko-header .et-menu>li>a:hover:after,.otko-motion #otko-header .et-menu>li>a:focus-visible:after{width:100%}
.otko-motion #otko-header .wpml-ls-current-language>.sub-menu{transition:opacity .25s var(--otko-ease),transform .25s var(--otko-ease);transform:translateY(-6px);max-height:70vh;overflow-y:auto}
.otko-motion #otko-header .wpml-ls-current-language:is(:hover,:focus-within)>.sub-menu{visibility:visible;opacity:1;transform:translateY(0)}
.otko-motion #contact a{transition:color var(--otko-fast) var(--otko-ease)}
.otko-motion #contact a:is(:hover,:focus-visible){color:var(--otko-coral)!important}
.otko-motion #otko-footer a:is(:hover,:focus-visible){color:var(--otko-cream)!important}
.otko-motion :focus-visible{outline:2px solid var(--otko-coral);outline-offset:4px}
.otko-motion .otko-cursor{position:fixed;left:0;top:0;width:9px;height:9px;border-radius:50%;background:var(--otko-red);z-index:100001;pointer-events:none;opacity:0;transition:opacity .2s;will-change:transform}
@media(hover:hover) and (pointer:fine){.otko-motion.otko-cursor-ready,.otko-motion.otko-cursor-ready :is(a,button,[role=button]){cursor:none!important}.otko-cursor-ready .otko-cursor{opacity:1}}
.otko-motion .otko-rec{position:absolute;left:var(--otko-gutter);top:100%;margin-top:8px;display:flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--otko-line);border-radius:999px;background:color-mix(in srgb,var(--otko-cream) 80%,white);backdrop-filter:blur(6px);font:400 12px/1.5 inherit;color:var(--otko-ink);pointer-events:none;opacity:0;transform:translateY(-4px);transition:opacity .6s,transform .6s}
.otko-motion .otko-rec.is-visible{opacity:1;transform:none}
.otko-motion .otko-rec-dot{width:7px;height:7px;border-radius:50%;background:var(--otko-red);animation:otko-rec-pulse 1.8s ease-in-out infinite}
.otko-motion .otko-rec-time{font-variant-numeric:tabular-nums;font-weight:600}
@keyframes otko-rec-pulse{50%{opacity:.35}}
.otko-motion .otko-intro{position:fixed;inset:0;z-index:100000;background:var(--otko-cream);display:grid;place-items:center;opacity:1;transition:opacity 2.8s ease}
.otko-motion .otko-intro.is-fading{opacity:0;pointer-events:none}
.otko-motion .otko-intro video{width:min(42vw,460px);max-width:80vw;aspect-ratio:16/9;object-fit:contain;mix-blend-mode:multiply}
.otko-motion .otko-intro-skip{position:absolute;bottom:32px;right:var(--otko-gutter);color:var(--otko-ink);font:inherit;font-size:13px;background:none;border:0;border-bottom:1px solid currentColor;padding:5px 0}
body.otko-intro-active,body.otko-nav-open{overflow:hidden}
.otko-motion .otko-reveal{opacity:0;transform:translateY(22px);transition:opacity .85s var(--otko-ease),transform .85s var(--otko-ease)}
.otko-motion .otko-reveal.is-visible{opacity:1;transform:none}
.otko-motion .otko-cap-row .et_pb_heading{transition:transform var(--otko-medium) var(--otko-ease)}
.otko-motion .otko-cap-row:is(:hover,:focus-within) .et_pb_heading{transform:translateX(10px)}
.otko-motion .otko-cap-row:is(:hover,:focus-within) .et_pb_heading h2{color:var(--otko-coral)!important}
.otko-motion .otko-cap-row .et_pb_toggle_content{display:block!important;max-height:0;opacity:0;overflow:hidden;padding:0!important;transition:max-height var(--otko-medium) var(--otko-ease),opacity var(--otko-fast) var(--otko-ease),padding var(--otko-medium) var(--otko-ease)}
.otko-motion .otko-cap-row:is(.otko-hover,:focus-within) .et_pb_toggle_content,.otko-motion .otko-cap-row .et_pb_toggle_open .et_pb_toggle_content{max-height:800px;opacity:1;padding-top:16px!important}
.otko-motion .otko-cap-row .et_pb_toggle_content p{display:flex;flex-wrap:wrap;gap:9px}
.otko-motion .otko-cap-tag{font-size:13px;line-height:1.5;background:#fff;border:1px solid var(--otko-line);border-radius:999px;padding:6px 12px}
.otko-motion .otko-portrait{position:relative;display:block!important;overflow:hidden;cursor:pointer}
.otko-motion .otko-portrait img{transition:opacity var(--otko-medium) var(--otko-ease)}
.otko-motion .otko-portrait .otko-portrait-back{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.otko-motion .otko-portrait:is(:hover,:focus-visible,.is-active) .otko-portrait-back{opacity:1}
.otko-motion .otko-portrait:is(:hover,:focus-visible,.is-active)>img:not(.otko-portrait-back){opacity:0}
.otko-motion #work.otko-work-ready>.et_pb_row{max-width:none!important;width:100%!important;padding:0!important}
.otko-motion #work.otko-work-ready .et_pb_group_carousel{display:none!important}
.otko-motion .otko-marquee{position:relative;width:100%;height:clamp(320px,46vw,640px);overflow:hidden;background:var(--otko-ink);touch-action:pan-y}
.otko-motion .otko-marquee-track{display:flex;width:max-content;height:100%;transform:translate3d(calc(-1px * var(--otko-shift,0)),0,0);will-change:transform}
.otko-motion .otko-marquee-group{display:flex;height:100%;flex-shrink:0}
.otko-motion .otko-work-card{position:relative;height:100%;width:clamp(300px,42vw,650px);flex-shrink:0;overflow:hidden;margin:0}
.otko-motion .otko-work-card :is(img,video){display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--otko-ease)}
.otko-motion .otko-work-card:is(:hover,:focus-within) :is(img,video){transform:scale(1.045)}
.otko-motion .otko-work-caption{position:absolute;left:0;right:0;bottom:0;padding:24px 20px 18px;background:linear-gradient(to top,rgba(21,21,21,.7),transparent);color:var(--otko-cream);font-size:13px;line-height:1.5;pointer-events:none}
.otko-motion .otko-work-caption p{padding:0}
.otko-motion .otko-work-controls{display:flex;justify-content:flex-end;gap:10px;padding:10px var(--otko-gutter);background:var(--otko-cream)}
.otko-motion .otko-work-controls button{font:inherit;font-size:13px;color:var(--otko-ink);background:none;border:1px solid var(--otko-line);border-radius:4px;padding:7px 12px}
@media(max-width:980px){
 .otko-motion .otko-intro video{width:80vw}
 .otko-motion #otko-header .et_mobile_menu{position:fixed!important;inset:0!important;width:100%!important;height:100dvh;max-height:100dvh!important;overflow-y:auto!important;background:var(--otko-ink)!important;padding:100px var(--otko-gutter) 35px!important;border:0!important;transform:translateY(-16px);transition:transform .6s var(--otko-ease)}
 .otko-motion.otko-nav-open #otko-header .et_mobile_menu{transform:translateY(0)}
 .otko-motion #otko-header .et_mobile_menu a{color:var(--otko-cream)!important;font-size:22px!important;background:transparent!important;padding:12px 0!important;border:0!important}
 .otko-motion #otko-header .et_mobile_menu .wpml-ls-item a{font-size:16px!important;padding:8px 0!important}
 .otko-motion.otko-nav-open .et_pb_menu__logo-wrap,.otko-motion.otko-nav-open .otko-rec{visibility:hidden}
 .otko-motion #otko-header .et_mobile_menu .sub-menu{background:transparent!important;transform:none!important;max-height:none!important;visibility:visible!important;opacity:1!important}
 .otko-motion .mobile_menu_bar{position:relative;z-index:10000}
 .otko-motion.otko-nav-open .mobile_menu_bar:before{content:'\4d';color:var(--otko-cream)!important}
 .otko-motion .otko-marquee{height:60vw;min-height:270px}
 .otko-motion .otko-work-card{width:82vw}
 .otko-motion .otko-rec{font-size:10px;padding:4px 9px}
}
@media(max-width:782px){body.otko-motion.admin-bar{--otko-admin-offset:46px}}
@media(prefers-reduced-motion:reduce){
 .otko-motion *, .otko-motion *:before,.otko-motion *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .otko-motion .otko-reveal{opacity:1;transform:none}
 .otko-motion .otko-cursor{display:none}
 .otko-motion .otko-marquee{overflow-x:auto}
 .otko-motion .otko-marquee-track{transform:none!important}
 .otko-motion .otko-marquee-group[aria-hidden=true]{display:none}
 .otko-motion .otko-work-card:is(:hover,:focus-within) :is(img,video){transform:none}
}