.logo-wrap .leopati-logo,
.logo-wrap .custom-logo-link {
  display:inline-block;color:#fff;text-decoration:none;font-family:Muli,Arial,sans-serif;font-size:13px;font-weight:900;letter-spacing:5px;line-height:1;white-space:nowrap;text-transform:uppercase;
}
.logo-wrap img.custom-logo{max-height:42px;width:auto;display:block;}
.nav__list a,.social-fixed a,.copyr a{text-decoration:none;}
.case-study-name .leopati-hero-title,.fullscreen-image{text-transform:none;}
body{background:#111;}

/* V5.21 — the header stutter on a fast scroll-up.
   style.css gives .cd-header `transition: 0.3s linear`, which is shorthand for "animate
   ALL properties". The auto-hide header flips between position:absolute/top:0 and
   position:fixed/top:-100px with a translate3d, and when a fast flick reaches the top
   mid-reveal, is-fixed and is-visible are both removed at once — so position, top and
   transform all animate together and the header jumps.
   Limiting the base transition to background-color makes those structural changes instant
   (a clean cut, not a snap). The reveal itself still animates: .cd-header.is-fixed carries
   its own `transition: transform 0.3s`, which is more specific and unaffected. */
.cd-header{transition:background-color .3s linear;}

/* V5.19 — stop the overscroll "rubber-band" that reveals empty space past the top and
   bottom of the page. On a dark full-bleed site that gap is a bright flash of the browser
   canvas, and the requested fix. overscroll-behavior-y:none keeps the scroll chain from
   escaping the document without affecting normal scrolling inside it. Set on both html and
   body because which one owns the scroll differs between engines. */
html{overscroll-behavior-y:none;}
body{overscroll-behavior-y:none;}

/* V5.19 — the horizontal hero scrollbar ("01 — 08" indicator) sat at bottom:35px in
   style.css, low enough to fall under the browser chrome / dock and read as missing.
   Lifted ~55px, with the slide-number badge kept in step so their spacing is unchanged.
   Only the home hero is affected; these selectors exist nowhere else.

   Scoped to min-width:768px on purpose. Below that, a separate rule further down this file
   already pins the scrollbar to bottom:44px !important for phones; lifting only the number
   badge here would split the two apart (badge at 125, bar stuck at 44). Phones keep their
   existing layout untouched. */
@media(min-width:768px){
  .swiper-container-horizontal > .swiper-scrollbar{bottom:90px;}
  .case-study-images li .hero-number-fixed{bottom:125px;}
  .case-study-images li .hero-number{bottom:125px;}
}

.wpb-content-wrapper{position:relative;z-index:2;}
.leopati-page-content{min-height:100vh;background:#111;color:#fff;padding:150px 9vw 80px;}
/* V5.11 — a page built with Elementor brings its own full-bleed sections, its own
   backgrounds and its own vertical rhythm. The padding above then reads as a title band
   across the top and an 80px strip along the bottom, both in #111 against whatever the
   design's own background is, and the 9vw inset makes the front end narrower than the
   Elementor editor shows. On those pages the wrapper carries nothing of its own.
   Only the padding/box is dropped; the colour is kept so any unstyled text stays legible. */
.leopati-page-content--builder{min-height:0;background:transparent;padding:0;}

/* V5.13 — FAQ block ([leopati_faq]).
   <details>/<summary> so it works with the keyboard and without JS. The marker is replaced
   with a rotating chevron; answers stay in the DOM whether open or closed. */
.leopati-faq{max-width:760px;margin:0 auto;}
.leopati-faq__heading{margin:0 0 24px;font-size:clamp(22px,3vw,32px);font-weight:800;letter-spacing:-.02em;}
.leopati-faq__item{border-bottom:1px solid rgba(255,255,255,.12);}
.leopati-faq__q{
  position:relative;list-style:none;cursor:pointer;
  padding:20px 44px 20px 0;font-size:17px;font-weight:600;line-height:1.45;
  transition:color .2s ease;
}
.leopati-faq__q::-webkit-details-marker{display:none;}
.leopati-faq__q:hover{color:#a855f7;}
.leopati-faq__q:focus-visible{outline:2px solid #a855f7;outline-offset:4px;}
.leopati-faq__q::after{
  content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;
}
.leopati-faq__item[open] > .leopati-faq__q::after{transform:translateY(-30%) rotate(-135deg);}
.leopati-faq__item[open] > .leopati-faq__q{color:#a855f7;}
.leopati-faq__a{padding:0 44px 22px 0;}
.leopati-faq__a p{margin:0;color:#8b8bab;font-size:15px;line-height:1.75;}
@media(prefers-reduced-motion:reduce){
  .leopati-faq__q,.leopati-faq__q::after{transition:none!important;}
}
.leopati-page-content a{color:#fff;}
.leopati-portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding:20px 8vw 80px;background:#111;min-height:100vh;}
.leopati-portfolio-card{position:relative;overflow:hidden;aspect-ratio:3/4.4;min-height:0;background:#222;color:#fff;text-decoration:none;display:block;}
.leopati-portfolio-card__image{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s ease;opacity:.72;}
.leopati-portfolio-card:hover .leopati-portfolio-card__image{transform:scale(1.07);}
.leopati-portfolio-card__body{position:absolute;left:32px;right:32px;bottom:30px;z-index:2;}
.leopati-portfolio-card__body h2{font-size:42px;line-height:1;margin:0 0 8px;color:#fff;}
.leopati-portfolio-card__body span{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.7);}
@media(max-width:991px){.leopati-portfolio-grid{grid-template-columns:1fr 1fr}.leopati-portfolio-card__body h2{font-size:30px}}
@media(max-width:640px){.leopati-portfolio-grid{grid-template-columns:1fr;padding-left:24px;padding-right:24px}.case-study-name .leopati-hero-title{font-size:48px!important}}

/* Euthenia-style project detail sections */
.leopati-project-detail{background:#111;color:#fff;min-height:100vh;overflow:hidden;font-family:Muli,Arial,sans-serif;}
.leopati-project-detail .shadow-title{position:fixed;left:4vw;top:110px;z-index:0;font-size:12vw;line-height:.8;font-weight:900;color:rgba(255,255,255,.035);letter-spacing:-.08em;pointer-events:none;white-space:nowrap;}
.leopati-project-title-section{position:relative;z-index:2;padding:190px 0 60px;background:#111;}
.leopati-project-title-section .page-title h1{font-size:clamp(54px,9vw,142px);line-height:.86;margin:0;color:#fff;font-weight:900;letter-spacing:-.06em;}
.leopati-project-title-section .page-title p{margin:22px 0 0;color:rgba(255,255,255,.62);font-size:14px;line-height:1.6;letter-spacing:3px;text-transform:lowercase;}
.leopati-project-body-section{position:relative;z-index:2;background:#111;padding-bottom:90px;}
.leopati-project-body-section .container{max-width:1180px;}
.leopati-project-body-section .row{margin-bottom:54px;}
.leopati-image-row img,.leopati-full-gallery img{width:100%;height:auto;display:block;filter:brightness(.88);}
.leopati-project-body-section .img-wrap{overflow:hidden;background:#171717;}
.leopati-project-intro p{font-size:22px;line-height:1.75;color:rgba(255,255,255,.78);font-weight:300;margin:22px auto 8px;}
.leopati-video-row{margin-top:10px;margin-bottom:70px!important;}
/* Scoped to the [leopati_project_showcase] shortcode only. This used to be a bare
   `.video-section{...}` rule, which silently overrode Euthenia's own
   `.video-section{position:relative;width:100%;margin:0 auto}` (style.css 1562)
   everywhere — its display:flex + min-height:54vw + filter broke the demo's
   figure.youtube/figure.vimeo layout on the project detail page. */
.leopati-project-showcase-block .video-section{position:relative;width:100%;min-height:54vw;max-height:720px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;filter:brightness(.9);}
.leopati-play-link{width:94px;height:94px;border:1px solid rgba(255,255,255,.68);border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;background:rgba(0,0,0,.18);backdrop-filter:blur(4px);transition:transform .35s ease,background .35s ease;}
.leopati-play-link:hover{transform:scale(1.08);background:rgba(255,255,255,.08);}
.leopati-play-link span{display:block;width:0;height:0;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:22px solid #fff;margin-left:5px;}
.leopati-feature-row{padding:20px 0 30px;}
.leopati-feature-row h5{font-size:13px;line-height:1.2;margin:0 0 18px;color:#fff;font-weight:800;letter-spacing:4px;text-transform:lowercase;}
.leopati-feature-row p{font-size:15px;line-height:1.9;color:rgba(255,255,255,.62);font-weight:300;margin:0 auto;max-width:290px;}
.leopati-full-gallery .wpb_column{margin-bottom:42px;}
.leopati-content-row{padding:12px 0 30px;}
.leopati-wp-content{font-size:18px;line-height:1.9;color:rgba(255,255,255,.72);}
.leopati-wp-content p{margin-bottom:1.35em;}
.leopati-project-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;padding:38px 8vw 70px;background:#111;position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.08);}
.leopati-project-nav div:nth-child(2){text-align:center;}
.leopati-project-nav div:nth-child(3){text-align:right;}
.leopati-project-nav a{color:#fff;text-decoration:none;font-size:12px;letter-spacing:3px;text-transform:uppercase;opacity:.72;transition:opacity .25s ease;}
.leopati-project-nav a:hover{opacity:1;}
@media(max-width:991px){.leopati-project-title-section{padding-top:150px}.leopati-project-body-section .row{margin-bottom:36px}.leopati-project-intro p{font-size:19px}.leopati-project-showcase-block .video-section{min-height:62vw}.leopati-feature-row .wpb_column{margin-bottom:34px}.leopati-project-nav{grid-template-columns:1fr;text-align:center}.leopati-project-nav div{text-align:center!important}}
@media(max-width:640px){.leopati-project-title-section{padding:130px 0 42px}.leopati-project-title-section .page-title h1{font-size:48px;letter-spacing:-.04em}.leopati-project-title-section .page-title p{font-size:11px;letter-spacing:2px}.leopati-project-detail .shadow-title{font-size:22vw;top:92px}.leopati-project-body-section{padding-bottom:45px}.leopati-project-intro p{font-size:17px;line-height:1.7}.leopati-project-showcase-block .video-section{min-height:74vw}.leopati-play-link{width:70px;height:70px}.leopati-play-link span{border-top-width:10px;border-bottom-width:10px;border-left-width:16px}.leopati-project-nav{padding:28px 24px 50px}}

/* v3 exact Dark Dream project detail correction */
body.single-leopati_project,
body.single-leopati_project .animsition,
.leopati-dark-dream-detail{background:#1f2029;color:#fff;}
.leopati-dark-dream-detail{position:relative;overflow:hidden;font-family:Muli,Arial,sans-serif;}
.leopati-dark-dream-detail .wpb-content-wrapper{position:relative;z-index:2;background:#1f2029;}
.leopati-dark-dream-detail .shadow-title.parallax-top-shadow{position:fixed;left:2.1vw;top:118px;z-index:0;font-size:13.2vw;line-height:.76;font-weight:900;color:rgba(255,255,255,.035);letter-spacing:-.07em;pointer-events:none;white-space:nowrap;text-transform:none;}
.leopati-dark-dream-detail .leopati-project-title-section{position:relative;z-index:2;padding:168px 0 62px;background:#1f2029;}
.leopati-dark-dream-detail .page-title h1{font-family:Muli,Arial,sans-serif;font-size:clamp(64px,9.3vw,150px);line-height:.84;margin:0;color:#fff;font-weight:900;letter-spacing:-.07em;text-transform:none;}
.leopati-dark-dream-detail .page-title p{font-family:Muli,Arial,sans-serif;margin:20px 0 0;color:rgba(255,255,255,.58);font-size:15px;line-height:1.5;letter-spacing:0;text-transform:lowercase;font-weight:300;}
.leopati-dark-dream-detail .leopati-project-body-section{position:relative;z-index:2;background:#1f2029;padding-bottom:0;}
.leopati-dark-dream-detail .leopati-project-body-section .container{max-width:1210px;}
.leopati-dark-dream-detail .leopati-eu-row{margin-bottom:48px;}
.leopati-dark-dream-detail .wpb_column{position:relative;z-index:2;}
.leopati-dark-dream-detail .vc_column-inner{padding-left:15px;padding-right:15px;}
.leopati-dark-dream-detail .img-wrap{position:relative;overflow:hidden;background:#1b1c24;margin:0;}
.leopati-dark-dream-detail .vc_figure,.leopati-dark-dream-detail figure{margin:0;display:block;width:100%;}
.leopati-dark-dream-detail .vc_single_image-wrapper{display:block;width:100%;}
.leopati-dark-dream-detail .img-wrap img,
.leopati-dark-dream-detail .vc_single_image-img{display:block;width:100%;height:auto;max-width:100%;filter:brightness(.75);}
.leopati-dark-dream-detail .leopati-copy-row{margin-top:8px;margin-bottom:50px;}
.leopati-dark-dream-detail .lead,
.leopati-dark-dream-detail .leopati-project-intro p{font-family:Muli,Arial,sans-serif;font-size:20px;line-height:1.74;color:rgba(255,255,255,.72);font-weight:300;margin:0 auto;text-align:center;}
.leopati-dark-dream-detail .leopati-video-row{margin-top:0;margin-bottom:55px!important;}
.leopati-dark-dream-detail .video-section{position:relative;width:100%;min-height:0;max-height:none;background:none!important;display:block;filter:none;overflow:hidden;}
.leopati-dark-dream-detail .video-section figure{position:relative;width:100%;margin:0;}
.leopati-dark-dream-detail .video-section a{position:relative;display:block;width:100%;overflow:hidden;text-decoration:none;}
.leopati-dark-dream-detail .video-section img{display:block;width:100%;height:auto;filter:brightness(.70);transition:transform .7s ease,filter .7s ease;}
.leopati-dark-dream-detail .video-section a:hover img{transform:scale(1.025);filter:brightness(.82);}

/* V4.7 — The hand-written imitation of Euthenia's play-cursor effect was removed here.
   It used a 90px pulsing .leopati-video-play circle plus a body.leopati-cursor-play
   class that reshaped .cursor2 into a filled white play disc. The real demo does none
   of that: figure.youtube a:after/:before draw the 60px circle + triangle, hovering
   floods box-shadow to 1000px and fades both out, .video-cursor .cursor2.hover{opacity:0}
   hides the rings, and the mouse cursor itself becomes img/play.png. All of that already
   lives untouched in assets/style.css and assets/custom.js, so these overrides only
   fought it. Removed: .leopati-video-play (+:before), body.leopati-cursor-play block,
   @keyframes leopatiPlayPulse. */
.leopati-dark-dream-detail .leopati-mid-images{margin-bottom:54px;}
.leopati-dark-dream-detail .leopati-feature-row{padding:8px 0 50px;margin-bottom:34px;}
.leopati-dark-dream-detail .leopati-feature-row h5{font-family:Muli,Arial,sans-serif;font-size:22px;line-height:1.2;margin:0 0 16px;color:#fff;font-weight:400;letter-spacing:0;text-transform:lowercase;text-align:center;}
.leopati-dark-dream-detail .leopati-feature-row p{font-family:Muli,Arial,sans-serif;font-size:16px;line-height:1.82;color:rgba(255,255,255,.60);font-weight:300;margin:0 auto;max-width:310px;text-align:center;}
.leopati-dark-dream-detail .leopati-landscape-row{margin-bottom:48px;}
.leopati-dark-dream-detail .leopati-copy-row-bottom{margin-top:6px;margin-bottom:48px;}
.leopati-dark-dream-detail .leopati-final-image{margin-bottom:0;}
.leopati-dark-dream-detail .leopati-final-image .img-wrap{max-width:1200px;margin:0 auto;}
.leopati-project-footer-band{position:relative;z-index:2;background:#14151c!important;padding-top:125px!important;padding-bottom:115px!important;min-height:330px;overflow:hidden;}
.leopati-project-footer-band .shadow-on-footer{position:absolute;left:7vw;right:auto;bottom:12px;z-index:0;font-family:Muli,Arial,sans-serif;font-size:13vw;line-height:.78;font-weight:900;color:rgba(255,255,255,.035);letter-spacing:-.08em;white-space:nowrap;text-transform:none;pointer-events:none;}
.leopati-project-footer-band .container{position:relative;z-index:2;}
.leopati-project-footer-band .footer-lines{display:flex;align-items:center;justify-content:center;gap:70px;position:relative;}
.leopati-project-footer-band .footer-lines:before{content:"";position:absolute;left:50%;top:50%;width:1px;height:145px;background:rgba(255,255,255,.33);transform:translate(-50%,-50%);}
.leopati-project-footer-band .footer-lines a{display:inline-block;color:#fff;text-decoration:none;opacity:1;min-width:210px;}
.leopati-project-footer-band .footer-lines h4{font-family:Muli,Arial,sans-serif;font-size:34px;line-height:1;margin:0;color:#fff;font-weight:400;letter-spacing:0;text-transform:none;}
.leopati-project-footer-band .footer-lines a:hover h4{opacity:.68;}
body.single-leopati_project .social-fixed{z-index:20;}
body.single-leopati_project .copyr{z-index:20;}
body.single-leopati_project .scroll-to-top{z-index:20;}
/* Only the no-video fallback keeps custom styling. The player itself is now pure
   Euthenia: figure.youtube{padding-bottom:56.25%;height:0;overflow:hidden} sizes the
   16:9 box and .video-wrapper iframe fills it after custom.js swaps in the embed. */
.leopati-video-poster-only{aspect-ratio:16/9;min-height:0!important;overflow:hidden;background:#111;}
.leopati-video-poster-only>img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.72);}

/* V4.8 — Poster letterboxing fix. Euthenia sizes the poster with
   `width:auto;height:100%;max-width:none` (style.css 1582-1589), which only fills the
   16:9 figure when the source image is itself exactly 16:9 — every demo poster is, so
   the bug never shows there. Any other ratio (a portrait still, a square export) is
   scaled to the box height and left at its natural width, leaving the dark page
   background exposed beside it: a 1080x1350 poster renders 648px wide in a 1440px box.
   object-fit:cover fills the frame at any ratio and centres the crop. Identical output
   to Euthenia for 16:9 posters, so nothing regresses. Scoped to the project video row. */
.leopati-video-row figure.youtube a img,
.leopati-video-row figure.vimeo a img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  object-fit:cover;
  object-position:center center;
}
.leopati-project-notes-section{padding:72px 0 24px;background:#1f2029;color:#fff;}
.leopati-project-notes-section h2{font-size:clamp(28px,3vw,44px);letter-spacing:-.04em;color:#fff;margin-bottom:20px;}
.leopati-project-notes-section p{max-width:62ch;color:rgba(255,255,255,.72);line-height:1.75;}
.leopati-skip-link{position:fixed;left:20px;top:16px;z-index:10000;padding:10px 14px;background:#fff;color:#111;transform:translateY(-180%);transition:transform .2s ease;}
.leopati-skip-link:focus{transform:translateY(0);}
.leopati-home-intro{position:relative;z-index:5;padding:110px 0 125px;background:#1f2029;color:#fff;}
.leopati-home-intro h2{max-width:980px;margin:0 0 30px;color:#fff;font-size:clamp(46px,6.7vw,108px);line-height:.94;letter-spacing:-.06em;text-wrap:balance;}
.leopati-home-intro p{max-width:65ch;margin:0 0 36px;color:rgba(255,255,255,.72);font-size:clamp(17px,1.5vw,22px);line-height:1.65;}
.leopati-home-intro__links{display:flex;gap:28px;flex-wrap:wrap;}
.leopati-home-intro__links a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:5px;}
.leopati-home-intro__links a:hover{border-color:#fff;}
.nav a:focus-visible,.leopati-home-intro a:focus-visible,.leopati-archive-card:focus-visible{outline:3px solid #fff;outline-offset:5px;}
@media(max-width:640px){.leopati-home-intro{padding:80px 0 90px}.leopati-home-intro h2{font-size:46px}.leopati-project-notes-section{padding-top:48px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.leopati-skip-link,.leopati-home-intro__links a{transition:none!important}.parallax-fade-top,[data-scroll-reveal]{transform:none!important;opacity:1!important}}

/* Slider title typography — fixed to the approved Leopati specification. */
.case-study-name .leopati-hero-title{
  font-family:Muli,Arial,sans-serif!important;
  font-size:34px!important;
  font-weight:800!important;
  /* Must grow with the text: a fixed height clips wrapped titles and the subtitle,
     which is the next flex item, then renders on top of the second line. */
  height:auto!important;
  min-height:34px!important;
  line-height:34px!important;
  color:rgb(255,255,255)!important;
}
@media(max-width:991px){
  .leopati-dark-dream-detail .leopati-project-title-section{padding-top:142px;}
  .leopati-dark-dream-detail .leopati-eu-row{margin-bottom:34px;}
  .leopati-dark-dream-detail .lead,.leopati-dark-dream-detail .leopati-project-intro p{font-size:18px;line-height:1.7;}
  .leopati-project-footer-band .footer-lines{gap:38px;}
  .leopati-project-footer-band .footer-lines h4{font-size:27px;}
}
@media(max-width:767px){
  .leopati-dark-dream-detail .page-title h1{font-size:54px;letter-spacing:-.05em;}
  .leopati-dark-dream-detail .page-title p{font-size:13px;}
  .leopati-dark-dream-detail .vc_column-inner{padding-left:0;padding-right:0;}
  .leopati-dark-dream-detail .leopati-top-images .wpb_column:first-child{margin-bottom:30px;}
  .leopati-dark-dream-detail .leopati-mid-images .wpb_column:first-child,
  .leopati-dark-dream-detail .leopati-landscape-row .wpb_column:first-child{margin-bottom:30px;}
  .leopati-dark-dream-detail .leopati-feature-row .wpb_column{margin-bottom:32px;}
  .leopati-project-footer-band{padding-top:88px!important;padding-bottom:86px!important;min-height:260px;}
  .leopati-project-footer-band .footer-lines{flex-direction:column;gap:34px;}
  .leopati-project-footer-band .footer-lines:before{height:1px;width:120px;}
  .leopati-project-footer-band .footer-lines h4{font-size:24px;}
}


/* Elementor hero v3.2: slide subtitle + image/video background support */
.case-study-name a{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;}
.case-study-name .leopati-hero-subtitle{max-width:520px;margin:13px auto 0;color:rgba(255,255,255,.72);font-family:Muli,Arial,sans-serif;font-size:14px;line-height:1.7;font-weight:400;letter-spacing:1.2px;text-align:center;text-transform:none;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;pointer-events:none;}
.case-study-name.active .leopati-hero-subtitle{opacity:1;transform:translateY(0);}
.case-study-images li .leopati-hero-video{object-fit:cover;background:#111;z-index:3;}
.case-study-images li.show .leopati-hero-video.no-blur{opacity:.62;}
.case-study-images li .leopati-hero-video-poster{display:none!important;}
.case-study-images li.show .leopati-hero-video-poster.no-blur{display:none!important;opacity:0!important;}
.case-study-images li:has(.leopati-hero-video) .img-hero-background:not(.leopati-hero-video){display:none!important;}

/* YouTube hero background. The holder keeps the poster image so there is no black
   flash before the embed loads; the iframe is scaled to cover the viewport in both
   directions (an iframe has no object-fit, so 16:9 has to be forced by hand). */
.case-study-images li .leopati-hero-youtube{
  background-size:cover;
  background-position:center;
  overflow:hidden;
  z-index:3;
}
.case-study-images li .leopati-hero-youtube iframe{
  position:absolute;
  top:50%;
  left:50%;
  width:100vw;
  height:56.25vw;        /* 16:9 of the viewport width  */
  min-width:177.78vh;    /* 16:9 of the viewport height */
  min-height:100vh;
  transform:translate(-50%,-50%);
  border:0;
  pointer-events:none;   /* the slide stays clickable, the player does not steal taps */
}
.case-study-images li.show .leopati-hero-youtube.no-blur{opacity:.62;}
@media(max-width:640px){.case-study-name .leopati-hero-subtitle{max-width:82vw;font-size:12px;line-height:1.55;letter-spacing:.7px;margin-top:10px}}

/* v3.3 portfolio frontend fix + Euthenia-style archive */
body.single-leopati_project .leopati-project-elementor-content:empty{display:none;}
body.single-leopati_project .leopati-page-content{display:none;}
.leopati-dark-dream-detail .leopati-project-title-section{padding-top:188px;}
.leopati-dark-dream-detail .leopati-top-images{align-items:flex-start;}
.leopati-dark-dream-detail .leopati-video-row .vc_column-inner{padding-left:15px;padding-right:15px;}
.leopati-dark-dream-detail .video-section img{min-height:420px;object-fit:cover;}

body.post-type-archive-leopati_project,
body.post-type-archive-leopati_project .animsition,
.leopati-dark-dream-archive{background:#1f2029;color:#fff;}
.leopati-dark-dream-archive{position:relative;min-height:100vh;overflow:hidden;font-family:Muli,Arial,sans-serif;padding-bottom:90px;}
.leopati-dark-dream-archive .shadow-title{position:fixed;left:2.2vw;top:110px;z-index:0;font-size:13.2vw;line-height:.76;font-weight:900;color:rgba(255,255,255,.035);letter-spacing:-.07em;pointer-events:none;white-space:nowrap;text-transform:none;}
.leopati-archive-title-section{position:relative;z-index:2;padding:176px 0 70px;background:#1f2029;}
.leopati-archive-title-section h1{font-family:Muli,Arial,sans-serif;font-size:clamp(64px,9.3vw,150px);line-height:.84;margin:0;color:#fff;font-weight:900;letter-spacing:-.07em;text-transform:none;}
.leopati-archive-title-section p{font-family:Muli,Arial,sans-serif;margin:20px 0 0;color:rgba(255,255,255,.58);font-size:15px;line-height:1.5;font-weight:300;text-transform:lowercase;}
.leopati-archive-projects-section{position:relative;z-index:2;background:#1f2029;}
.leopati-archive-projects-section .container{max-width:1210px;}
.leopati-archive-project-col{margin-bottom:46px;}
.leopati-archive-card{display:block;position:relative;overflow:hidden;text-decoration:none;background:#171821;color:#fff;}
.leopati-archive-card__image{display:block;position:relative;overflow:hidden;background:#171821;}
/* V5.3 — A post with no featured image renders no <img> at all (category.php). Without an
   image the span has no height, so the absolutely-positioned __body would collapse onto
   nothing. Give it the same 1.18/1 box the images use so the card keeps its shape. */
.leopati-archive-card__image--blank{aspect-ratio:1.18/1;background:linear-gradient(140deg,#22232e,#171821);}
.leopati-archive-card__image img{display:block;width:100%;aspect-ratio:1.18/1;object-fit:cover;filter:brightness(.68);transition:transform .75s ease,filter .75s ease;}
.leopati-archive-card:hover .leopati-archive-card__image img{transform:scale(1.045);filter:brightness(.82);}
.leopati-archive-card__body{position:absolute;left:34px;right:34px;bottom:30px;z-index:3;display:flex;flex-direction:column;gap:8px;}
.leopati-archive-card__category{font-size:12px;line-height:1.4;color:rgba(255,255,255,.68);font-weight:600;text-transform:lowercase;}
.leopati-archive-card__body strong{font-size:38px;line-height:.98;color:#fff;font-weight:900;letter-spacing:-.045em;text-transform:none;}
@media(max-width:991px){.leopati-archive-title-section{padding-top:142px}.leopati-archive-card__body strong{font-size:30px}.leopati-dark-dream-detail .video-section img{min-height:320px}}
@media(max-width:767px){.leopati-archive-title-section h1{font-size:54px;letter-spacing:-.05em}.leopati-archive-title-section p{font-size:13px}.leopati-archive-card__body{left:24px;right:24px;bottom:24px}.leopati-dark-dream-detail .video-section img{min-height:260px}.leopati-dark-dream-detail .leopati-project-title-section{padding-top:145px}}

/* v3.6 global logo design controls base */
.logo-wrap{z-index:2100!important;}
.logo-wrap .custom-logo-link{line-height:1!important;text-decoration:none!important;}
.logo-wrap img,.logo-wrap img.custom-logo{object-fit:contain!important;display:block!important;}
.logo-wrap .leopati-logo{color:#fff!important;text-decoration:none!important;font-family:Muli,Arial,sans-serif!important;font-weight:900!important;line-height:1!important;text-transform:uppercase!important;white-space:nowrap!important;}

/* V3.8 — Restore original Euthenia luminous mouse cursor
   V5.0 — Recoloured white -> lilac. COLOUR ONLY: every size, blur radius and alpha below is
          the original value, unchanged. The white ones came from the V3.8 block here; the
          .cursor2.hover numbers (.1 fill, 12px/.2 glow) are Euthenia's own, style.css 163-166.
          --lilac #e5a6f3 = rgb(229,166,243), taken from the contact page palette.
          RGB triplet (not hex) so each rgba() below can keep its own alpha. */
:root{
  --leopati-cursor: 229,166,243;
}
.cursor,
.cursor2,
.cursor3{
  display:block;
  visibility:visible;
  pointer-events:none;
}
body:not(.scale-up) .cursor2,
body:not(.scale-up) .cursor3{
  opacity:1;
}
.cursor2{
  border:2px solid rgb(var(--leopati-cursor));
  box-shadow:0 0 22px rgba(var(--leopati-cursor),.65), 0 0 42px rgba(var(--leopati-cursor),.18);
}
.cursor3{
  box-shadow:0 0 40px rgba(var(--leopati-cursor),.16);
}
.cursor2.hover{
  background:rgba(var(--leopati-cursor),.1);
  box-shadow:0 0 12px rgba(var(--leopati-cursor),.2);
}
/* .cursor-dark (body flag custom.js adds over .background-dark-3 sections) is deliberately
   NOT touched — it was never white, it is Euthenia's own #4b4d64 for light backgrounds. */

/* V3.9: true fullscreen hero on desktop and mobile */
html, body {
  width: 100%;
  min-height: 100%;
}
body.home,
body.elementor-page {
  overflow-x: hidden;
}
.leopati-elementor-safe,
.leopati-elementor-safe > .row,
.leopati-elementor-safe .wpb_column,
.leopati-elementor-safe .vc_column-inner,
.leopati-elementor-safe .wpb_wrapper,
.elementor-widget-leopati_hero_slider,
.elementor-widget-leopati_hero_slider > .elementor-widget-container {
  min-height: 100vh !important;
  min-height: 100svh !important;
  height: 100vh !important;
  height: 100svh !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* V4.6 — Bug fix: .case-study-images (the absolutely-positioned hero
   background layer) has no positioned ancestor of its own — its direct
   parent, .wpb_wrapper, was never given `position`. That meant the browser
   anchored it to the next positioned ancestor up the tree instead:
   .wpb-content-wrapper, which wraps the ENTIRE page, not just the hero row.
   As soon as the hero isn't the very first thing on the page (another
   section above it, extra homepage blocks, etc.) the background image was
   positioned relative to the whole page rather than its own row, so it
   could drift and render on top of unrelated content below/above it.
   Anchoring it to its own row's wrapper — and clipping anything that still
   overflows — keeps the background image locked to the hero section only. */
.leopati-elementor-safe .wpb_wrapper,
.elementor-widget-leopati_hero_slider > .elementor-widget-container {
  position: relative !important;
  overflow: hidden !important;
}
.section.full-height,
.full-height,
#hero-slider,
.case-study-wrapper,
.case-study-wrapper .swiper-slide,
.case-study-images,
.case-study-images li,
.case-study-images .img-hero-background,
.case-study-images .leopati-hero-video {
  min-height: 100vh !important;
  min-height: 100svh !important;
  height: 100vh !important;
  height: 100svh !important;
}
.case-study-images,
.case-study-images li,
.case-study-images .img-hero-background,
.case-study-images .leopati-hero-video {
  width: 100vw !important;
  max-width: 100vw !important;
}
.case-study-images .img-hero-background {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.case-study-images .leopati-hero-video {
  object-fit: cover !important;
  object-position: center center !important;
}
@supports (height: 100dvh) {
  .leopati-elementor-safe,
  .leopati-elementor-safe > .row,
  .leopati-elementor-safe .wpb_column,
  .leopati-elementor-safe .vc_column-inner,
  .leopati-elementor-safe .wpb_wrapper,
  .elementor-widget-leopati_hero_slider,
  .elementor-widget-leopati_hero_slider > .elementor-widget-container,
  .section.full-height,
  .full-height,
  #hero-slider,
  .case-study-wrapper,
  .case-study-wrapper .swiper-slide,
  .case-study-images,
  .case-study-images li,
  .case-study-images .img-hero-background,
  .case-study-images .leopati-hero-video {
    min-height: 100dvh !important;
    height: 100dvh !important;
  }
}
@media (max-width: 767px) {
  .case-study-name .leopati-hero-title {
    max-width: 88vw;
    font-size: clamp(42px, 13vw, 74px) !important;
    line-height: .92 !important;
    word-break: normal;
  }
  .case-study-images h2.fullscreen-image {
    font-size: clamp(78px, 28vw, 170px) !important;
    line-height: .82 !important;
    bottom: 2vh !important;
  }
  .swiper-scrollbar {
    bottom: 44px !important;
  }
}

/* V4.5 — Portfolio detail alignment polish */
body.single-leopati_project .social-fixed{
  top:50% !important;
  bottom:auto !important;
  left:30px !important;
  transform:translateY(-50%) !important;
  z-index:95 !important;
}
body.single-leopati_project .copyr{
  top:50% !important;
  bottom:auto !important;
  right:30px !important;
  transform:translateY(-50%) rotate(180deg) !important;
  z-index:95 !important;
}
.leopati-dark-dream-detail .leopati-project-title-section{
  overflow:hidden;
}
.leopati-dark-dream-detail .shadow-title.parallax-top-shadow{
  display:none !important;
}
.leopati-dark-dream-detail .leopati-side-shadow-title{
  position:absolute;
  left:2.4vw;
  top:52%;
  transform:translateY(-50%);
  z-index:0;
  font-family:Muli,Arial,sans-serif;
  font-size:13.6vw;
  line-height:.76;
  font-weight:900;
  color:rgba(255,255,255,.042);
  letter-spacing:-.075em;
  white-space:nowrap;
  text-transform:none;
  pointer-events:none;
  user-select:none;
}
.leopati-dark-dream-detail .leopati-project-title-section .container{
  position:relative;
  z-index:2;
}
.leopati-project-footer-band .footer-lines.has-single-project-link{
  gap:0;
}
.leopati-project-footer-band .footer-lines.has-single-project-link:before{
  display:none !important;
}
.leopati-project-footer-band .footer-lines.has-both-project-links:before{
  display:block;
}
.leopati-project-footer-band .footer-lines.has-single-project-link a{
  min-width:0;
  text-align:center;
}
.leopati-project-footer-band .footer-lines.has-both-project-links a:first-child{
  text-align:right;
}
.leopati-project-footer-band .footer-lines.has-both-project-links a:last-child{
  text-align:left;
}
.leopati-project-footer-band .shadow-on-footer{
  left:2.4vw !important;
  right:auto !important;
  top:50% !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
  opacity:1;
  color:rgba(255,255,255,.032) !important;
}
@media(max-width:991px){
  body.single-leopati_project .social-fixed{
    left:22px !important;
  }
  body.single-leopati_project .copyr{
    right:22px !important;
  }
  .leopati-dark-dream-detail .leopati-side-shadow-title{
    left:4vw;
    top:48%;
    font-size:18vw;
  }
}
@media(max-width:767px){
  body.single-leopati_project .social-fixed{
    top:50% !important;
    bottom:auto !important;
    left:17px !important;
    transform:translateY(-50%) !important;
  }
  body.single-leopati_project .copyr{
    display:none;
  }
  .leopati-dark-dream-detail .leopati-project-title-section{
    padding-top:150px !important;
    min-height:390px;
  }
  .leopati-dark-dream-detail .leopati-side-shadow-title{
    left:8vw;
    top:48%;
    font-size:38vw;
    line-height:.74;
    color:rgba(255,255,255,.04);
  }
  .leopati-project-footer-band .footer-lines.has-single-project-link:before{
    display:none !important;
  }
}

/* V4.6 — Portfolio detail side/footer correction from Euthenia reference */
/* Social links return to the original lower-left Euthenia position. */
body.single-leopati_project .social-fixed{
  top:auto !important;
  bottom:40px !important;
  left:30px !important;
  transform:none !important;
  z-index:95 !important;
}
/* Copyright stays vertically centered on the right side. */
body.single-leopati_project .copyr{
  top:50% !important;
  bottom:auto !important;
  right:30px !important;
  transform:translateY(-50%) rotate(180deg) !important;
  z-index:95 !important;
}
/* Footer background word must be centered like the original shadow-on-footer. */
.leopati-project-footer-band .shadow-on-footer{
  left:-50% !important;
  right:auto !important;
  width:200% !important;
  top:auto !important;
  bottom:0 !important;
  transform:none !important;
  text-align:center !important;
  font-size:14vw !important;
  line-height:1 !important;
  color:rgba(200,200,200,.10) !important;
  background:linear-gradient(rgba(75,77,100,.25), rgba(75,77,100,0));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  opacity:1 !important;
}
/* Stop the broken single-project vertical rule; keep navigation clean when only Prev or only Next exists. */
.leopati-project-footer-band .footer-lines.has-single-project-link:before,
.leopati-project-footer-band .footer-lines.has-single-project-link:after{
  display:none !important;
  content:none !important;
}
.leopati-project-footer-band .footer-lines.has-single-project-link{
  justify-content:center !important;
  gap:0 !important;
}
.leopati-project-footer-band .footer-lines.has-single-project-link a{
  min-width:0 !important;
  text-align:center !important;
}
/* When both links exist, use a subtle center divider only between links. */
.leopati-project-footer-band .footer-lines.has-both-project-links:after{
  display:none !important;
  content:none !important;
}
.leopati-project-footer-band .footer-lines.has-both-project-links:before{
  display:block !important;
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:1px !important;
  height:145px !important;
  margin-left:0 !important;
  background:rgba(255,255,255,.33) !important;
  transform:translate(-50%,-50%) !important;
}
@media(max-width:991px){
  body.single-leopati_project .social-fixed{
    bottom:38px !important;
    left:22px !important;
    transform:none !important;
  }
  body.single-leopati_project .copyr{
    right:22px !important;
  }
}
@media(max-width:767px){
  body.single-leopati_project .social-fixed{
    top:auto !important;
    bottom:34px !important;
    left:22px !important;
    transform:none !important;
  }
  body.single-leopati_project .copyr{
    display:none !important;
  }
  .leopati-project-footer-band .shadow-on-footer{
    font-size:26vw !important;
    bottom:0 !important;
  }
  .leopati-project-footer-band .footer-lines.has-single-project-link:before,
  .leopati-project-footer-band .footer-lines.has-single-project-link:after{
    display:none !important;
    content:none !important;
  }
}

/* V4.7 — Restore original right copyright placement + animated Leopati dot */
/* The copyright rail belongs to the original lower-right Euthenia position, not the vertical center. */
body.single-leopati_project .copyr,
.copyr{
  top:auto !important;
  bottom:40px !important;
  right:30px !important;
  transform:rotate(180deg) !important;
  z-index:95 !important;
}

@media(max-width:991px){
  body.single-leopati_project .copyr,
  .copyr{
    top:auto !important;
    bottom:38px !important;
    right:22px !important;
    transform:rotate(180deg) !important;
  }
}

@media(max-width:767px){
  body.single-leopati_project .copyr,
  .copyr{
    display:block !important;
    top:auto !important;
    bottom:15px !important;
    right:17px !important;
    transform:rotate(180deg) !important;
  }
}

/* Keep social links in the original lower-left position. */
body.single-leopati_project .social-fixed,
.social-fixed{
  top:auto !important;
  bottom:40px !important;
  left:30px !important;
  transform:none !important;
  z-index:95 !important;
}

@media(max-width:991px){
  body.single-leopati_project .social-fixed,
  .social-fixed{
    bottom:38px !important;
    left:22px !important;
    transform:none !important;
  }
}

@media(max-width:767px){
  body.single-leopati_project .social-fixed,
  .social-fixed{
    top:auto !important;
    bottom:15px !important;
    left:17px !important;
    transform:none !important;
  }
}

/* Leopati logotype dot: soft blink + two slow signal rings. */
.logo-wrap .leopati-logo-dot{
  position:relative !important;
  display:inline-block !important;
  overflow:visible !important;
  isolation:isolate !important;
  animation:leopatiLogoDotPulse 2.85s ease-in-out infinite !important;
}
.logo-wrap .leopati-logo-dot::before,
.logo-wrap .leopati-logo-dot::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:54% !important;
  width:.62em !important;
  height:.62em !important;
  border-radius:999px !important;
  border:1px solid rgba(244,114,182,.52) !important;
  box-shadow:0 0 10px rgba(167,139,250,.26), inset 0 0 8px rgba(244,114,182,.12) !important;
  transform:translate(-50%,-50%) scale(.25) !important;
  opacity:0 !important;
  pointer-events:none !important;
  z-index:-1 !important;
  animation:leopatiLogoDotRipple 4.8s ease-out infinite !important;
}
.logo-wrap .leopati-logo-dot::after{
  animation-delay:2.4s !important;
  border-color:rgba(167,139,250,.42) !important;
}
@keyframes leopatiLogoDotPulse{
  0%,100%{opacity:1;filter:drop-shadow(0 0 0 rgba(244,114,182,0));}
  46%{opacity:.62;filter:drop-shadow(0 0 5px rgba(244,114,182,.38));}
  62%{opacity:1;filter:drop-shadow(0 0 8px rgba(167,139,250,.35));}
}
@keyframes leopatiLogoDotRipple{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25);}
  18%{opacity:.42;}
  70%{opacity:.10;}
  100%{opacity:0;transform:translate(-50%,-50%) scale(3.35);}
}

/* V4.8 — Restore original Euthenia-like portfolio footer navigation + visible up arrow */
body.single-leopati_project .leopati-project-footer-band{
  position:relative !important;
  min-height:330px !important;
  padding-top:125px !important;
  padding-bottom:115px !important;
  background:#14151c !important;
  overflow:hidden !important;
}
body.single-leopati_project .leopati-project-footer-band .shadow-on-footer{
  position:absolute !important;
  left:-50% !important;
  right:auto !important;
  width:200% !important;
  top:auto !important;
  bottom:0 !important;
  transform:none !important;
  text-align:center !important;
  font-family:Muli,Arial,sans-serif !important;
  font-size:14vw !important;
  line-height:.92 !important;
  font-weight:900 !important;
  letter-spacing:-.08em !important;
  white-space:nowrap !important;
  color:rgba(255,255,255,.045) !important;
  -webkit-text-fill-color:rgba(255,255,255,.045) !important;
  background:none !important;
  opacity:1 !important;
  pointer-events:none !important;
  z-index:0 !important;
}
body.single-leopati_project .leopati-project-footer-band .container,
body.single-leopati_project .leopati-project-footer-band .row,
body.single-leopati_project .leopati-project-footer-band .col-12{
  position:relative !important;
  z-index:2 !important;
}
body.single-leopati_project .leopati-project-footer-band .footer-lines{
  width:min(640px, 78vw) !important;
  min-height:145px !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:70px !important;
  position:relative !important;
  text-align:center !important;
}
body.single-leopati_project .leopati-project-footer-band .footer-lines:before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:1px !important;
  height:145px !important;
  background:rgba(255,255,255,.30) !important;
  transform:translate(-50%,-50%) !important;
}
body.single-leopati_project .leopati-project-footer-band .footer-lines:after{
  display:none !important;
  content:none !important;
}
body.single-leopati_project .leopati-project-footer-band .footer-lines a{
  min-width:210px !important;
  color:#fff !important;
  text-decoration:none !important;
  opacity:1 !important;
}
body.single-leopati_project .leopati-project-footer-band .footer-lines h4{
  font-family:Muli,Arial,sans-serif !important;
  font-size:34px !important;
  line-height:1 !important;
  margin:0 !important;
  color:#fff !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
body.single-leopati_project .leopati-project-footer-band .footer-lines.has-both-project-links a:first-child{
  text-align:right !important;
}
body.single-leopati_project .leopati-project-footer-band .footer-lines.has-both-project-links a:last-child{
  text-align:left !important;
}
body.single-leopati_project .leopati-project-footer-band .footer-lines.has-single-project-link.has-prev-project{
  justify-content:flex-start !important;
  gap:0 !important;
}
body.single-leopati_project .leopati-project-footer-band .footer-lines.has-single-project-link.has-prev-project a{
  width:calc(50% - 34px) !important;
  min-width:0 !important;
  text-align:right !important;
}
body.single-leopati_project .leopati-project-footer-band .footer-lines.has-single-project-link.has-next-project{
  justify-content:flex-end !important;
  gap:0 !important;
}
body.single-leopati_project .leopati-project-footer-band .footer-lines.has-single-project-link.has-next-project a{
  width:calc(50% - 34px) !important;
  min-width:0 !important;
  text-align:left !important;
}
/* The scroll-to-top asset path was unreliable; draw the arrow with CSS so it always appears. */
.scroll-to-top{
  right:32px !important;
  bottom:168px !important;
  width:26px !important;
  height:54px !important;
  background-image:none !important;
  background:none !important;
  z-index:260 !important;
}
.scroll-to-top:before{
  content:"↑" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  color:#fff !important;
  font-family:Arial,sans-serif !important;
  font-size:46px !important;
  font-weight:300 !important;
  line-height:1 !important;
  opacity:.98 !important;
}
.scroll-to-top:hover{bottom:172px !important;}
body.single-leopati_project .scroll-to-top{z-index:260 !important;}
@media(max-width:991px){
  body.single-leopati_project .leopati-project-footer-band .footer-lines{width:min(560px,76vw) !important;gap:46px !important;}
  body.single-leopati_project .leopati-project-footer-band .footer-lines h4{font-size:28px !important;}
  .scroll-to-top{right:24px !important;bottom:155px !important;}
  .scroll-to-top:hover{bottom:159px !important;}
}
@media(max-width:767px){
  body.single-leopati_project .leopati-project-footer-band{
    min-height:260px !important;
    padding-top:88px !important;
    padding-bottom:86px !important;
  }
  body.single-leopati_project .leopati-project-footer-band .shadow-on-footer{
    font-size:26vw !important;
    bottom:0 !important;
  }
  body.single-leopati_project .leopati-project-footer-band .footer-lines{
    width:78vw !important;
    min-height:120px !important;
  }
  body.single-leopati_project .leopati-project-footer-band .footer-lines:before{
    height:120px !important;
  }
  body.single-leopati_project .leopati-project-footer-band .footer-lines h4{font-size:24px !important;}
  .scroll-to-top{right:18px !important;bottom:112px !important;width:22px !important;height:46px !important;}
  .scroll-to-top:before{font-size:38px !important;}
  .scroll-to-top:hover{bottom:116px !important;}
}

/* V4.9 — Euthenia “The Battle” portfolio detail template */
body.single-leopati_project .leopati-battle-detail{position:relative;overflow:hidden;background:#1f2029;}
body.single-leopati_project .leopati-battle-detail .shadow-title.parallax-top-shadow{display:block!important;position:fixed;left:-3vw;top:120px;z-index:0;font-size:14vw;line-height:.78;font-weight:900;letter-spacing:-.075em;color:rgba(255,255,255,.035);white-space:nowrap;pointer-events:none;}
body.single-leopati_project .leopati-battle-title-section{padding-top:190px;padding-bottom:92px;position:relative;z-index:2;}
body.single-leopati_project .leopati-battle-title-section .page-title h1{font-size:8.2vw;line-height:.88;letter-spacing:-.065em;text-transform:none;}
body.single-leopati_project .leopati-battle-title-section .page-title p{font-size:16px;letter-spacing:.08em;text-transform:lowercase;}
body.single-leopati_project .leopati-battle-intro-section,
body.single-leopati_project .leopati-battle-services-section,
body.single-leopati_project .leopati-battle-gallery-section{position:relative;z-index:2;}
body.single-leopati_project .leopati-battle-detail .img-wrap,
body.single-leopati_project .leopati-battle-detail .vc_figure,
body.single-leopati_project .leopati-battle-detail .vc_single_image-wrapper{display:block;width:100%;margin:0;}
body.single-leopati_project .leopati-battle-detail .img-wrap img{display:block;width:100%;height:auto;}
body.single-leopati_project .leopati-battle-hero-image{max-width:960px;margin-left:auto!important;margin-right:auto!important;}
body.single-leopati_project .leopati-battle-intro-section .lead,
body.single-leopati_project .leopati-battle-gallery-section .lead{font-size:19px;line-height:1.8;color:rgba(255,255,255,.72);}
body.single-leopati_project .leopati-battle-split-row{align-items:stretch;}
body.single-leopati_project .leopati-battle-services-copy{display:flex;align-items:center;padding-top:55px;padding-bottom:55px;}
body.single-leopati_project .leopati-battle-services-copy>.vc-column-inner{width:100%;}
body.single-leopati_project .leopati-battle-service h5{font-size:17px;letter-spacing:.08em;text-transform:lowercase;color:#fff;}
body.single-leopati_project .leopati-battle-service p{font-size:14px;line-height:1.8;color:rgba(255,255,255,.57);}
body.single-leopati_project .leopati-battle-portrait-image img{min-height:720px;height:100%;object-fit:cover;}
body.single-leopati_project .leopati-battle-gallery-section{padding-bottom:115px;}
body.single-leopati_project .leopati-battle-gallery-section>.container{max-width:1140px;}
body.single-leopati_project .leopati-battle-gallery-section .col-sm-6 img{aspect-ratio:1.536/1;object-fit:cover;}
body.single-leopati_project .leopati-battle-final-image img{width:100%;}
body.single-leopati_project .leopati-wp-content p:last-child{margin-bottom:0;}
@media(min-width:1200px){
 body.single-leopati_project .leopati-battle-services-copy .row{width:100%;}
 body.single-leopati_project .leopati-battle-service{margin-left:41.666667%;flex:0 0 41.666667%;max-width:41.666667%;}
}
@media(max-width:1199px){
 body.single-leopati_project .leopati-battle-title-section .page-title h1{font-size:92px;}
 body.single-leopati_project .leopati-battle-portrait-image img{min-height:620px;}
}
@media(max-width:767px){
 body.single-leopati_project .leopati-battle-detail .shadow-title.parallax-top-shadow{top:135px;font-size:34vw;left:-5vw;}
 body.single-leopati_project .leopati-battle-title-section{padding-top:150px;padding-bottom:65px;}
 body.single-leopati_project .leopati-battle-title-section .page-title h1{font-size:58px;line-height:.94;}
 body.single-leopati_project .leopati-battle-title-section .page-title p{font-size:13px;}
 body.single-leopati_project .leopati-battle-intro-section .lead,
 body.single-leopati_project .leopati-battle-gallery-section .lead{font-size:17px;line-height:1.7;}
 body.single-leopati_project .leopati-battle-services-copy{padding:60px 30px 70px;}
 body.single-leopati_project .leopati-battle-portrait-image img{min-height:0;height:auto;}
 body.single-leopati_project .leopati-battle-service{text-align:center!important;}
 body.single-leopati_project .leopati-battle-gallery-section{padding-bottom:80px;}
}

/* V5.0 — Final portfolio footer sizing and right-rail collision fix */
body.single-leopati_project .leopati-project-footer-band{
  min-height:240px !important;
  padding-top:48px !important;
  padding-bottom:44px !important;
}
body.single-leopati_project .leopati-project-footer-band .col-12.py-5{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
body.single-leopati_project .leopati-project-footer-band .footer-lines{
  min-height:112px !important;
}
body.single-leopati_project .leopati-project-footer-band .footer-lines:before{
  height:112px !important;
}
body.single-leopati_project .leopati-project-footer-band .shadow-on-footer{
  font-size:11vw !important;
  line-height:.82 !important;
  bottom:-4px !important;
}
/* Keep the up-arrow clear of the vertical copyright rail. */
body.single-leopati_project .scroll-to-top{
  right:82px !important;
  bottom:34px !important;
  width:24px !important;
  height:44px !important;
}
body.single-leopati_project .scroll-to-top:hover{
  bottom:38px !important;
}
body.single-leopati_project .scroll-to-top:before{
  font-size:38px !important;
}
@media(max-width:991px){
  body.single-leopati_project .leopati-project-footer-band{
    min-height:220px !important;
    padding-top:42px !important;
    padding-bottom:40px !important;
  }
  body.single-leopati_project .leopati-project-footer-band .footer-lines,
  body.single-leopati_project .leopati-project-footer-band .footer-lines:before{
    min-height:100px !important;
    height:100px !important;
  }
  body.single-leopati_project .scroll-to-top{
    right:68px !important;
    bottom:30px !important;
  }
  body.single-leopati_project .scroll-to-top:hover{bottom:34px !important;}
}
@media(max-width:767px){
  body.single-leopati_project .leopati-project-footer-band{
    min-height:190px !important;
    padding-top:34px !important;
    padding-bottom:32px !important;
  }
  body.single-leopati_project .leopati-project-footer-band .footer-lines{
    min-height:88px !important;
  }
  body.single-leopati_project .leopati-project-footer-band .footer-lines:before{
    height:88px !important;
  }
  body.single-leopati_project .leopati-project-footer-band .shadow-on-footer{
    font-size:22vw !important;
  }
  body.single-leopati_project .scroll-to-top{
    right:54px !important;
    bottom:14px !important;
    width:20px !important;
    height:36px !important;
  }
  body.single-leopati_project .scroll-to-top:hover{bottom:18px !important;}
body.single-leopati_project .scroll-to-top:before{font-size:32px !important;}
}

/* V5.1 — One global right rail: back-to-top arrow sits above copyright everywhere. */
.leopati-right-rail{
  position:fixed;
  right:30px;
  bottom:40px;
  z-index:260;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.leopati-right-rail .scroll-to-top,
body.single-leopati_project .leopati-right-rail .scroll-to-top{
  position:relative!important;
  right:auto!important;
  bottom:auto!important;
  width:26px!important;
  height:54px!important;
  flex:0 0 54px;
}
.leopati-right-rail .scroll-to-top:hover,
body.single-leopati_project .leopati-right-rail .scroll-to-top:hover{
  bottom:auto!important;
  transform:translateY(-4px);
}
.leopati-right-rail .copyr,
body.single-leopati_project .leopati-right-rail .copyr{
  position:relative!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  flex:0 0 auto;
}
@media(max-width:991px){
  .leopati-right-rail{right:22px;bottom:38px;gap:16px;}
}
@media(max-width:767px){
  .leopati-right-rail{right:17px;bottom:15px;gap:12px;}
  .leopati-right-rail .scroll-to-top,
  body.single-leopati_project .leopati-right-rail .scroll-to-top{width:22px!important;height:46px!important;flex-basis:46px;}
  .leopati-right-rail .scroll-to-top:before{font-size:38px!important;}
}



/* V4.2 — header gutters follow the fixed side rails.
   The logo must sit the same distance from the left wall as .social-fixed, and the
   hamburger the same distance from the right wall as .leopati-right-rail. Both rails
   step 30 / 22 / 17px, so that ladder lives in --leopati-rail-gap and everything
   reads from it.

   Euthenia's base rule is .header-wrapper{width:calc(100% - 100px);margin-left:50px}
   — symmetric 50px gutters. V4.1 zeroed margin-left but kept the width, which left
   100px of dead space on the right and dragged the hamburger toward the centre. */
:root{--leopati-rail-gap:30px;}
@media(max-width:991px){:root{--leopati-rail-gap:22px;}}
@media(max-width:767px){:root{--leopati-rail-gap:17px;}}

/* One flex row instead of Euthenia's absolute logo + floated button. That is what
   puts the logo and the hamburger on the same optical line — previously the logo
   centred at 39px and the hamburger at 56px, so they read as misaligned. */
.header-wrapper{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  width:100%!important;
  min-height:100px;
  margin:0!important;
  padding:0 var(--leopati-rail-gap)!important;
  box-sizing:border-box!important;
}
.logo-wrap{
  position:static!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  display:flex!important;
  align-items:center!important;
  margin:0!important;
  padding:0!important;
}
.nav-but-wrap{
  float:none!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
}

/* Mobile nav overlay: 8 items x 80px = 848px of list in an 812px viewport, so the
   vertically-centred panel overflowed upwards and "Home" landed on top of the logo
   and the hamburger. Give it the full screen, clear the header, and let it scroll. */
@media(max-width:767px){
  .nav__content{
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:100dvh!important;
    transform:none!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding:112px var(--leopati-rail-gap) 92px!important;
    box-sizing:border-box!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  .nav__list{width:100%!important;margin:auto 0!important;}
  /* The <li> carries its own 65px font-size / 68px line-height, so shrinking only
     the <a> still left an 8 x 68px list. Both have to come down. */
  .nav__list-item{
    height:auto!important;
    font-size:clamp(26px,7.5vw,36px)!important;
    line-height:1.15!important;
  }
  .nav__list-item a{
    font-size:1em!important;
    line-height:1.4!important;
  }
}

/* Hero slider on mobile: slides are width:auto (slidesPerView:'auto'), so a slide
   was as wide as its longest title — 505px inside a 375px screen, which pushed the
   title off-centre and off the right edge. Pin each slide to the viewport and centre
   its contents; custom.js snaps one centred slide per view to match. */
@media(max-width:767px){
  .case-study-wrapper .case-study-name{
    width:100vw!important;
    max-width:100vw!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .case-study-name a{
    width:100%!important;
    max-width:100%!important;
    align-items:center!important;
    text-align:center!important;
    padding:0 var(--leopati-rail-gap)!important;
    box-sizing:border-box!important;
  }
  .case-study-name .leopati-hero-title{
    width:100%!important;
    max-width:100%!important;
    text-align:center!important;
  }
  .case-study-name .leopati-hero-subtitle{
    width:100%!important;
    max-width:100%!important;
    text-align:center!important;
  }
}

.case-study-name,.hero-title,.leopati-hero-title{
white-space:normal!important;
overflow-wrap:break-word;
word-break:normal;
line-height:1.1!important;
}
@media (max-width:768px){
.case-study-name .leopati-hero-title,
.hero-title,
.leopati-hero-title{
font-size:clamp(34px,10vw,54px)!important;
line-height:1.15!important;
max-width:95%!important;
height:auto!important;
min-height:0!important;
}
}

/* v4.6: the hero background photos/videos were rendered at .45–.62 opacity, inherited
   from the original dark, moody Euthenia demo photography. Real Leopati photo/video
   content looked dimmed/shadowed under that same opacity, so it is raised here while
   keeping the title/ghost-text overlays exactly as designed. */
.case-study-images li.show .img-hero-background.no-blur{opacity:.92!important;}
.case-study-images li.show .leopati-hero-video.no-blur{opacity:.92!important;}
.case-study-images li.show .leopati-hero-youtube.no-blur{opacity:.92!important;}

/* V5.4 — WordPress Core classes restored from the licensed Euthenia stylesheet.
   Whoever first vendored assets/style.css trimmed its "WordPress Core" block, so the
   theme shipped without the classes WordPress itself emits. Two consequences:
   image alignment and captions inside post content did nothing, and .screen-reader-text
   was undefined — which means every visually-hidden label WordPress prints (the
   "Search for:" label in get_search_form(), post navigation, skip links) rendered as
   visible on-screen text. That becomes visible the moment search.php exists, so it is
   restored here rather than editing the vendored file. */
.alignnone{margin:5px 20px 20px 0;}
.aligncenter,div.aligncenter{display:block;margin:5px auto 5px auto;}
.alignright{float:right;margin:5px 0 20px 20px;}
.alignleft{float:left;margin:5px 20px 20px 0;}
a img.alignright{float:right;margin:5px 0 20px 20px;}
a img.alignnone{margin:5px 20px 20px 0;}
a img.alignleft{float:left;margin:5px 20px 20px 0;}
a img.aligncenter{display:block;margin-left:auto;margin-right:auto;}
.wp-caption{background:#fff;border:1px solid #f0f0f0;max-width:96%;padding:5px 3px 10px;text-align:center;}
.wp-caption.alignnone{margin:5px 20px 20px 0;}
.wp-caption.alignleft{margin:5px 20px 20px 0;}
.wp-caption.alignright{margin:5px 0 20px 20px;}
.wp-caption img{border:0 none;height:auto;margin:0;max-width:98.5%;padding:0;width:auto;}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;margin:0;padding:0 4px 5px;}
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
  overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;
}
.screen-reader-text:focus{
  background-color:#eee;clip:auto!important;clip-path:none;color:#444;display:block;
  font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;
  text-decoration:none;top:5px;width:auto;z-index:100000;
}
.bypostauthor{display:inline-block;}

/* V5.4 — styles for the templates restored in this release (404 / search / single).
   Reuses the archive palette (#1f2029 page, #171821 panel, Muli) so nothing new is
   invented; only the pieces those templates actually introduce are defined. */

/* Search form (searchform.php) */
.leopati-search-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;max-width:520px;}
.leopati-search-form__field{
  flex:1 1 220px;min-width:0;background:#171821;border:1px solid rgba(255,255,255,.16);
  color:#fff;font-family:Muli,Arial,sans-serif;font-size:15px;font-weight:300;
  padding:13px 16px;border-radius:2px;
}
.leopati-search-form__field::placeholder{color:rgba(255,255,255,.42);}
.leopati-search-form__field:focus{outline:none;border-color:rgba(255,255,255,.55);}
.leopati-search-form__submit{
  flex:0 0 auto;background:transparent;border:1px solid rgba(255,255,255,.38);color:#fff;
  font-family:Muli,Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;padding:13px 24px;border-radius:2px;cursor:pointer;
  transition:background-color .25s ease,border-color .25s ease;
}
.leopati-search-form__submit:hover{background:#fff;border-color:#fff;color:#171821;}

/* V5.7 — cursor trail moved from left/top onto a composited transform.

   Euthenia positions .cursor/.cursor2/.cursor3 with left/top and gives the two trailing
   rings `transition: all .3s ease-out`. Because left/top are layout properties, every
   frame of that trail forced layout and a repaint of a 22px blurred box-shadow — never
   composited. The pointer therefore moved in visible steps, worst on pages that are
   already painting (the 404 canvas).

   custom.js now publishes the pointer as --lp-cx/--lp-cy and those feed a translate3d,
   which the compositor can animate on its own. left/top are pinned so nothing in this
   path can trigger layout again. The hover rule has to restate the position because it
   replaces `transform` wholesale — that is why it is repeated rather than inherited. */
.cursor,
.cursor2,
.cursor3{
  left:0;
  top:0;
  transform:translate3d(var(--lp-cx,-100px),var(--lp-cy,50vh),0) translate(-50%,-50%);
  will-change:transform;
}
.cursor2.hover,
.cursor3.hover{
  transform:translate3d(var(--lp-cx,-100px),var(--lp-cy,50vh),0) scale(2) translate(-25%,-25%);
}
/* The base rule's `transition: all` also covers custom properties, and an unregistered
   one cannot interpolate — it flips discretely halfway through the duration. Left as
   `all`, --lp-cx/--lp-cy would jump 150ms after the pointer moved, which is precisely
   the stepped motion this change is meant to remove. Name the properties instead, so
   the position updates immediately and only the visuals ease. */
.cursor2,
.cursor3{
  transition:transform .3s ease-out,
             background-color .3s ease-out,
             box-shadow .3s ease-out,
             border-color .3s ease-out,
             border-width .3s ease-out,
             opacity .3s ease-out;
}

/* V5.6 — .shadow-title must never intercept the pointer.
   The base rule (assets/style.css:427) makes it position:fixed, width:100%,
   height:300% — a viewport-covering layer — and never sets pointer-events. The theme
   only neutralised it in template-scoped overrides (.leopati-project-detail,
   .leopati-dark-dream-archive, …), so any template outside those scopes inherits a
   full-screen click trap. That is what broke the 404: the canvas received no clicks
   and no mousemove, so blobs neither followed the cursor nor popped, and the cursor
   reacted to the ghost text instead of the game.
   The 404 no longer loads this file (V5.8), but category.php, search.php, single.php
   and archive-leopati_project.php all still print .shadow-title and would hit the same
   trap. It is decorative text on every template, so the base rule belongs here. */
.shadow-title{pointer-events:none;}

/* V5.8 — the 404 rules that used to live here have moved to
   assets/leopati-404.css. 404.php is standalone now: it prints its own document and
   never loads this file, so keeping the rules here only shipped ~5 KB of dead CSS to
   every other page on the site. */

/* Single post (single.php) */
.leopati-post-meta{
  font-family:Muli,Arial,sans-serif;font-size:13px;color:rgba(255,255,255,.6);
  font-weight:600;text-transform:lowercase;letter-spacing:.4px;margin:0;
}
.leopati-post-meta a{color:rgba(255,255,255,.78);text-decoration:none;}
.leopati-post-meta a:hover{color:#fff;}
.leopati-post-cover{margin-bottom:46px;}
.leopati-post-cover img{width:100%;height:auto;display:block;}
.leopati-post-content{
  font-family:Muli,Arial,sans-serif;color:rgba(255,255,255,.82);
  font-size:17px;line-height:1.75;font-weight:300;max-width:820px;margin:0 auto;
}
.leopati-post-content h1,.leopati-post-content h2,.leopati-post-content h3,
.leopati-post-content h4,.leopati-post-content h5,.leopati-post-content h6{
  color:#fff;font-weight:900;letter-spacing:-.03em;margin:1.7em 0 .55em;line-height:1.15;
}
.leopati-post-content h2{font-size:clamp(28px,3.6vw,40px);}
.leopati-post-content h3{font-size:clamp(22px,2.7vw,30px);}
.leopati-post-content p{margin:0 0 1.5em;}
.leopati-post-content a{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.leopati-post-content img{max-width:100%;height:auto;}
.leopati-post-content ul,.leopati-post-content ol{margin:0 0 1.5em;padding-left:1.35em;}
.leopati-post-content li{margin-bottom:.55em;}
.leopati-post-content blockquote{
  margin:1.8em 0;padding:4px 0 4px 26px;border-left:2px solid rgba(255,255,255,.35);
  color:#fff;font-size:20px;line-height:1.55;font-weight:300;
}
.leopati-post-content code,.leopati-post-content pre{
  background:#171821;color:#fff;font-size:14px;border-radius:2px;
}
.leopati-post-content code{padding:2px 6px;}
.leopati-post-content pre{padding:18px 20px;overflow-x:auto;margin:0 0 1.5em;}
.leopati-post-content pre code{padding:0;background:none;}
/* wp-caption is white by default (WordPress Core block above); restyle for dark. */
.leopati-post-content .wp-caption{background:#171821;border-color:rgba(255,255,255,.12);}
.leopati-post-content .wp-caption p.wp-caption-text{color:rgba(255,255,255,.6);font-size:13px;}
.leopati-post-tags{margin-top:2.2em;font-size:13px;color:rgba(255,255,255,.55);text-transform:lowercase;}
.leopati-post-tags a{color:rgba(255,255,255,.78);text-decoration:none;}
.leopati-post-tags a:hover{color:#fff;}

/* Post/posts navigation shared by single.php, search.php and category.php */
.post-navigation,.posts-navigation{margin:56px 0 0;padding-top:34px;border-top:1px solid rgba(255,255,255,.12);}
.post-navigation .nav-links,.posts-navigation .nav-links{
  display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;
}
.post-navigation a,.posts-navigation a{
  color:#fff;text-decoration:none;font-family:Muli,Arial,sans-serif;
  font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.25;max-width:46ch;
}
.post-navigation a span,.posts-navigation a span{
  display:block;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:7px;
}
.post-navigation a:hover,.posts-navigation a:hover{color:rgba(255,255,255,.72);}
@media(max-width:767px){
  .leopati-post-content{font-size:16px;}
  .post-navigation .nav-links,.posts-navigation .nav-links{flex-direction:column;gap:22px;}
}