/* Independent behavior for the original portfolio design. */
/* Disable the exported platform's hideContent animation on reveal parents. */
.standalone #header,.standalone section>.content-wrapper,.standalone footer{animation:none!important;opacity:1!important}
.standalone .preFade,.standalone .preScale{opacity:1!important;transform:none!important}
.standalone .gallery-grid-item-wrapper{opacity:1!important;aspect-ratio:3/2;height:auto;min-height:0;padding-bottom:0!important}
.standalone .gallery-grid-wrapper{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.standalone .gallery-grid-item img{object-fit:cover}
.standalone .gallery-grid-item-caption{display:none}
.standalone .gallery-grid-lightbox-link,.standalone .gallery-grid-lightbox-link *{cursor:pointer!important}
/* Lift desktop thumbnails above their neighbours without changing the grid. */
@media(min-width:768px) and (min-height:501px) and (hover:hover) and (pointer:fine),(min-width:1024px) and (hover:hover) and (pointer:fine){
 body.standalone{overflow-x:clip}
 .standalone .gallery-grid-wrapper,.standalone .portfolio-grid-overlay{isolation:isolate}
 .standalone .gallery-grid-item,.standalone .portfolio-grid-overlay>.grid-item{position:relative;z-index:0}
 .standalone .gallery-grid-item-wrapper,.standalone .portfolio-grid-overlay>.grid-item{transition:transform 240ms cubic-bezier(.2,.7,.3,1),box-shadow 240ms cubic-bezier(.2,.7,.3,1)}
 html:not(.site-entering) .standalone .gallery-grid-item:hover,html:not(.site-entering) .standalone .portfolio-grid-overlay>.grid-item:hover{z-index:8}
 html:not(.site-entering) .standalone .gallery-grid-item:hover>.gallery-grid-item-wrapper,html:not(.site-entering) .standalone .portfolio-grid-overlay>.grid-item:hover{transform:translateY(-3px) scale(1.025);box-shadow:0 10px 24px rgba(0,0,0,.5),0 0 6px rgba(0,0,0,.25)}
 @media(prefers-reduced-motion:reduce){
  html:not(.site-entering) .standalone .gallery-grid-item:hover>.gallery-grid-item-wrapper,html:not(.site-entering) .standalone .portfolio-grid-overlay>.grid-item:hover{transform:none}
 }
}
.standalone #header{z-index:100}
.standalone #header .header-display-desktop,.standalone #header .header-display-mobile{position:relative}
.standalone #header .header-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;text-align:center;width:max-content;max-width:calc(100% - 100px)}
.standalone #header .header-title-text{white-space:nowrap;padding:0!important}
.standalone #header .header-title-text a{text-transform:none;display:inline-flex;align-items:center;gap:10px}
.standalone #header .header-brand-logo{display:block;flex:none;width:36px;height:36px;object-fit:contain}
.standalone #header .header-display-desktop .header-title-text a{font-size:clamp(26px,2.25vw,32px);line-height:1;vertical-align:middle}
.standalone #header .header-display-desktop .header-brand-name{display:block;line-height:1;transform:translateY(-.15em)}
.standalone #header .header-display-mobile .header-title-text a{gap:8px}
.standalone #header .header-display-mobile .header-brand-logo{width:30px;height:30px}
.standalone #header .header-display-mobile .header-title-nav-wrapper{order:1;flex:1 1 auto;min-width:0;margin:0}
.standalone #header .header-display-mobile .header-title{position:static;left:auto;top:auto;transform:none;text-align:left;width:auto;max-width:none}
.standalone #header .header-display-mobile .header-nav,.standalone #header .header-display-mobile .header-actions{display:none}
.standalone #header .header-display-mobile .header-burger{display:flex;order:2;flex:0 0 44px;margin-left:auto;justify-content:flex-end}
.standalone #header .header-display-mobile .header-burger-btn{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0}
.standalone #header .header-display-mobile .burger-box{width:24px;height:24px}
.standalone #header .header-display-mobile .burger-inner .top-bun{width:24px;transform:translateY(-4px)}
.standalone #header .header-display-mobile .burger-inner .bottom-bun{width:24px;transform:translateY(4px)}
.standalone #header .header-display-mobile .burger-inner .patty{display:none}
.standalone #header .header-display-mobile .burger--active .top-bun{transform:rotate(-45deg)}
.standalone #header .header-display-mobile .burger--active .bottom-bun{transform:rotate(45deg)}
.standalone a[aria-label="Instagram"] svg{fill:none!important}
.standalone .header-burger-btn:focus-visible,.standalone a:focus-visible,.standalone button:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.standalone .standalone-video{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.standalone .standalone-video iframe,.standalone .standalone-video video{width:100%;height:100%;border:0;display:block}
.standalone .sqs-native-video{aspect-ratio:16/9}
.standalone .sqs-html-content a[href^="mailto:"],.standalone .sqs-html-content a[href^="tel:"]{color:inherit}
.standalone .contact-fields{display:grid;gap:20px}
.standalone #contact-form{font-family:Arimo,sans-serif;color:#000;font-size:16px;line-height:1.5}
.standalone #contact-form fieldset{border:0;padding:0;margin:0;min-width:0}
.standalone #contact-form legend{margin:0 0 4px;padding:0;font-size:16px}
.standalone .contact-name{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.standalone #contact-form label{display:block;font-size:16px;margin-bottom:4px}
.standalone .contact-name label{font-size:14px}
.standalone #contact-form label span{font-size:14px;margin-left:4px;color:#333}
.standalone #contact-form input,.standalone #contact-form textarea{box-sizing:border-box;width:100%;border:1px solid #000;border-radius:6.4px;background:transparent;color:#000;padding:5px 10px;font:inherit;line-height:24px;margin:0;outline-offset:3px}
.standalone #contact-form input{height:auto}
.standalone #contact-form textarea{height:100px;resize:vertical;min-height:100px;display:block}
.standalone .contact-send{margin-top:20px;border:1px solid #555;border-radius:100px;background:transparent;color:#000;font:inherit;padding:14px 21px;cursor:pointer;line-height:22px;transition:background .15s,color .15s}
.standalone .contact-send:hover{background:#000;color:#fff}
.standalone #form-status{font-size:14px;margin:16px 0 0}
.standalone #contact-form [hidden]{display:none}
.photo-viewer{box-sizing:border-box;position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;background:transparent;padding:calc(3vw + 20px) calc(3vw + 50px);margin:0;color:#fff;overflow:hidden}
.photo-viewer::backdrop{background:rgba(32,32,32,.9)}
.photo-viewer[open]{display:flex;align-items:center;justify-content:center}
.viewer-image{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.photo-viewer > button{position:absolute;padding:10px;background:transparent;color:#fff;border:0;cursor:pointer;display:grid;place-items:center;z-index:2;opacity:.85}
.photo-viewer > button:hover{opacity:1}
.photo-viewer > button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5}
.viewer-close{top:7px;right:14px}
.photo-viewer .viewer-prev,.photo-viewer .viewer-next{padding:0;top:calc(50% - 16px)}
.viewer-prev{left:calc(3vw - 10px)}
.viewer-next{right:calc(3vw - 10px)}
.photo-viewer .viewer-prev svg,.photo-viewer .viewer-next svg{width:32px;height:32px}
.viewer-count{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.video-stage{position:relative;width:min(100%,calc((100dvh - 6vw - 40px)*16/9));aspect-ratio:16/9;background:#000;z-index:1}
.video-stage iframe,.video-stage video,.video-stage .plyr{width:100%;height:100%;border:0;display:block}
.video-stage video{object-fit:contain}
.video-title{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);margin:0;max-width:75%;color:#fff;font:16px/1.4 Arimo,sans-serif;text-align:center}
.standalone .portfolio-grid-overlay .grid-item{-webkit-touch-callout:none;user-select:none}
.standalone .portfolio-grid-overlay .grid-item img{pointer-events:none}
.standalone .portfolio-grid-overlay .film-title-visible .portfolio-text{opacity:1!important}
.standalone .portfolio-grid-overlay .film-title-visible .portfolio-overlay{opacity:.85!important}
@media(hover:none){
 .standalone .portfolio-grid-overlay[data-show-text="after-hover"] .grid-item:not(.film-title-visible):not(:focus-visible) :is(.portfolio-text,.portfolio-overlay){opacity:0}
}
@media(min-width:768px){
 .standalone #header .header-inner{max-width:none}
 .standalone .portfolio-grid-overlay{column-gap:15px;row-gap:15px}
}
@media(max-width:767px),(orientation:landscape) and (max-height:500px) and (max-width:1023px){
 .standalone .gallery-grid{--mobile-gallery-spacing:6vw;padding-inline:var(--mobile-gallery-spacing)}
 .standalone .gallery-grid-wrapper{grid-template-columns:minmax(0,1fr)!important;gap:var(--mobile-gallery-spacing)}
 .standalone .gallery-grid-item-wrapper{aspect-ratio:auto;height:auto;min-height:0;padding-bottom:0!important}
 .standalone .gallery-grid-lightbox-link{position:static;height:auto}
 .standalone .gallery-grid .gallery-grid-item img{position:static;width:100%;height:auto;object-fit:contain}
 .photo-viewer{padding:4px}
 .video-stage{width:min(100%,calc((100dvh - 8px)*16/9))}
 .video-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
 .viewer-prev,.viewer-next{display:none!important}
 .viewer-close{top:max(1px,env(safe-area-inset-top));right:max(1px,env(safe-area-inset-right));background:rgba(32,32,32,.55)!important;border-radius:50%}
 .standalone .contact-name{gap:10px}
}
@media(orientation:landscape) and (max-height:500px) and (max-width:1023px){
 .standalone .portfolio-grid-overlay{column-gap:30px;row-gap:30px}
 .standalone #header .header-display-desktop{display:none}
 .standalone #header .header-display-mobile{display:flex}
 .standalone #header .header-announcement-bar-wrapper{padding-top:2px!important;padding-bottom:2px!important}
 .standalone #header .header-inner{min-height:44px}
 .standalone #header .header-title-text{font-size:16px!important;line-height:1.2}
 .standalone #header .header-burger-btn{min-height:44px;min-width:44px}
}
@media(prefers-reduced-motion:reduce){.standalone *{transition-duration:0s!important;animation-duration:0s!important}}

/* 1.5-second clockwise reveal along the actual lower-left logo cut of the stationary original JL mark. */
.site-loader{position:fixed;inset:0;z-index:10000;display:none;place-items:center;background:#000;color:#fff;pointer-events:auto}
html.site-loading .site-loader{display:grid}
.site-loader-logo{display:block;width:7.5vw;height:auto;aspect-ratio:1;clip-path:polygon(44.3375% 44.3375%,-26.373% 115.048%,-26.373% 115.048%);will-change:clip-path}
.site-loader-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
html.site-entering,html.site-entering body{overflow:hidden}
html.site-entering dialog[open],html.site-entering dialog[open]::backdrop{visibility:hidden!important}
@media(max-width:767px),(orientation:landscape) and (max-height:500px) and (max-width:1023px){.site-loader-logo{width:30vw}}
@media(prefers-reduced-motion:reduce){.site-loader-logo{clip-path:none;will-change:auto}}

/* Menu navigation begins its fade when the new page is actually presented. */
@view-transition{navigation:auto}
/* The root snapshot must never morph its size or transform between pages. */
::view-transition-group(root){animation:none!important;transform:none!important}
::view-transition-old(root),::view-transition-new(root){height:auto;object-fit:contain;object-position:left top}
::view-transition-image-pair(root){isolation:isolate}
::view-transition-old(root){animation:jl-navigation-out .12s ease-out both;mix-blend-mode:normal}
::view-transition-new(root){animation:jl-navigation-in 1.9s cubic-bezier(.4,0,.2,1) both;mix-blend-mode:normal;mask-image:linear-gradient(to bottom,#000 0%,#000 40%,transparent 60%,transparent 100%);mask-size:100% 250%;mask-repeat:no-repeat}
@keyframes jl-navigation-out{to{opacity:0}}
@keyframes jl-navigation-in{from{opacity:0;mask-position:0 100%}to{opacity:1;mask-position:0 0}}
@media(prefers-reduced-motion:reduce){::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation:none!important;mask-image:none!important}}
/* Mobile browser chrome can change snapshot height during navigation.
   Reveal the real DOM with GSAP instead, preserving every element's ratio. */
@media(max-width:767px),(orientation:landscape) and (max-height:500px) and (max-width:1023px){
 html{scrollbar-gutter:stable}
 @view-transition{navigation:none}
}
