/*
Theme Name: BlankSlate
Theme URI: https://opencollective.com/blankslate
Author: Web Guy
Author URI: https://opencollective.com/blankslate#section-contributors
Description: Donate: https://opencollective.com/blankslate. Learn: https://blankslate.me/. BlankSlate is the definitive WordPress boilerplate starter theme. I've carefully constructed the most clean and minimalist theme possible for designers and developers to use as a base to build websites for clients or to build completely custom themes from scratch. Clean, simple, unstyled, semi-minified, unformatted, and valid code, SEO-friendly, jQuery-enabled, no programmer comments, standardized and as white label as possible, and most importantly, the CSS is reset for cross-browser-compatability, with no intrusive visual CSS styles added whatsoever. A perfect skeleton theme. For support and suggestions, go to: https://github.com/webguyio/blankslate/issues. Thank you.
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2026
Requires at least: 5.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: blankslate
 
BlankSlate WordPress Theme 2011-2026
BlankSlate is distributed under the terms of the GNU GPL
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth;overscroll-behavior:none}body{line-height:1}a{text-decoration-skip-ink:auto;text-decoration: none;}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{appearance:none;border-radius:0;outline: 0;}input[type="search"]{appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.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;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}

/* =========================
   Header Menu Custom Styles
========================= */

body {
    background: #fff;
    color: #000;
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
      -webkit-font-smoothing: antialiased;
}

html,
body {
    height: 100%;
    overflow: hidden;
}

body {
    position: fixed;
    inset: 0;
    width: 100%;
    overscroll-behavior: none;
    touch-action: pan-x pan-y;
}

.logo {position: fixed;top: 50%;left: 10%;text-transform: uppercase;font-weight: 700;font-size: 106px;transform: translateY(-50%);z-index: 99;mix-blend-mode: difference;color: #fff;pointer-events: none;}
.logo h1 {font-weight: 700;font-size: 106px;line-height: 1;}
.logo h2 {font-size: 65px;line-height: 1;padding-left: 8px;}

#menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#menu span {
    position: fixed;
    pointer-events: auto;
    writing-mode: vertical-rl;
    text-transform: uppercase;
    overflow: hidden;
    display: inline-block;
    color: #fff;
    mix-blend-mode: difference;
}

#menu span a {
    transition: transform linear .2s;
    text-decoration: none;
    color: inherit;
    font-size: 24px;
    font-family: 'Helvetica', Arial, sans-serif;
    line-height: 1.55;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
    position: relative;
}

#menu span a:hover {transform: translate3d(100%, 0, 0);}

#menu span a:after {content: attr(data-title);position: absolute;top: 0;left: -100%;width: 100%;height: 100%;}

/* Apply blend mode to header so menu text blends with page background/content */
#header {
    mix-blend-mode: difference;
}

#bg {
    background-image: linear-gradient(180deg, rgb(242, 242, 242) 0%, rgb(250, 247, 247) 100%);
    position: fixed;
    inset: 0;
    width: 100%;
    min-height: 100svh;
    height: 100dvh;
    z-index: -1;
}

/* Top Left */
#menu span:nth-child(1) {
    top: 40px;
    left: 40px;
}

/* Top Right */
#menu span:nth-child(2) {
    top: 40px;
    right: 40px;
}

/* Bottom Left */
#menu span:nth-child(3) {
    bottom: 40px;
    left: 40px;
}

/* Bottom Right */
#menu span:nth-child(4) {
    bottom: 40px;
    right: 40px;
}

/* =========================
   Popup styles
   ======================== */

.popup {
    position: fixed;
    inset: 0;
    width: 100vw;
    min-height: 100svh;
    height: 100dvh;
    background: #000;
    visibility: hidden;
    pointer-events: none;
    z-index: 99999; /* above everything */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity: 0;
    transform: translateY(30%) scale(.9);
    transition: all .3s ease-in-out;
    overflow: hidden;
}

.popup .popup-inner {
        display: block; /* keep in DOM so transitions can run */
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        z-index: 99999; /* above everything */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transition: opacity .25s ease-in-out;
    width: calc(100% - 60px);
    max-height: calc(100vh - 100px);
    overflow: auto;
}

.popup.is-open {
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
    opacity: 1;
}

.popup.is-open .popup-inner {
    transform: translate(-50%, -50%) translateY(0) scale(1);
    opacity: 1;
}
.popup-close-span {
    position: fixed;
    right: 40px;
    top: 40px;
    pointer-events: auto;
    writing-mode: vertical-rl;
    text-transform: uppercase;
    overflow: hidden;
    display: inline-block;
    color: #fff;
    mix-blend-mode: difference;
    z-index: 999;
}
.popup-close {
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform linear .2s;
    text-decoration: none;
    color: inherit;
    font-size: 24px;
    font-family: 'Helvetica', Arial, sans-serif;
    line-height: 1.55;
    font-weight: 600;
    display: inline-block;
    position: relative;
    text-transform: uppercase;
}

.popup-close:hover {transform: translate3d(100%, 0, 0);}

.popup-close:after {content: attr(data-title);position: absolute;top: 0;left: -100%;width: 100%;height: 100%;}

/* About-specific popup content placeholders */
.popup-content {
    background: #000;
    position: fixed;
    inset: 0;
    width: 100%;
    min-height: 100svh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    color: #fff;
}

#about .popup-content {padding: 20px 0px 20px 40px;}
#booking .popup-content {padding: 40px 40px 20px;}
#backstage .popup-content {}

#about .popup-content .about-body {
    width: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

#about .popup-content .about-text .about-text-style {
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
}

#about .popup-content .about-text .about-title {
    font-size: 3.226vw !important;
    letter-spacing: -3px;
    margin-bottom: 0px;
}

#about .popup-content .about-text .about-name {font-size: 10.323vw !important;line-height: 143px;letter-spacing: -9px;}
#about .popup-content .about-text .about-bio {font-size: 6.05vw !important;letter-spacing: -4.5px;transform: rotate(180deg);text-align: right;margin-bottom: 30px;margin-top: -20px;}
#about .popup-content .about-text a {line-height: 116px;font-size: 8.387vw !important;text-transform: uppercase;position: relative;transition: all linear .2s;transform: translate3d(0px, 0, 0);display: inline-block;color: #fff !important; opacity: 0.5;}
#about .popup-content .about-text span {overflow: hidden;display: inline-block;position: relative;}
#about .popup-content .about-text a:hover {transform: translate3d(0, -100%, 0);opacity: 1;}
#about .popup-content .about-text a:after {content: attr(data-title);position: absolute;top: 100%;left: 0;width: 100%;height: 100%;}


#about .popup-content .about-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#about .popup-content .about-img {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 40px);
    object-fit: contain;
    object-position: right;
}

/* Booking-specific popup content placeholders (fill as needed) */
#booking .booking-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

#booking .booking-content .booking-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding-right: 64px;
}

#booking .booking-content .booking-header-title {
    font-size: 90px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 90px;
    letter-spacing: -4px;
    display: inline-block;
}

#booking .booking-content .booking-header-links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
}

#booking .booking-content .booking-header-link {position: relative;color: #fff;text-transform: uppercase;font-size: 18px;text-align: right;}
#booking .booking-content .booking-header-link:hover {}
#booking .booking-content .booking-header-link::after {content: '';position: absolute; width: 100%; height: 1px; background: #fff;left: 0px;top: calc(100% - 2px);transform: scaleX(100%);transition: all .3s ease-in-out;}
#booking .booking-content .booking-header-link:hover::after {transform: scaleX(0%);}

#booking .booking-content .booking-header-socials {
    display: flex;
    gap: 20px;
    padding-top: 8px;
}

#booking .booking-content .booking-header-social-link {position: relative;background: #fff;color: #000;display: inline-block;height: 32px;width: 32px;display: flex;justify-content: center;align-items: center;border-radius: 50%;font-size: 18px;opacity: 0.5;transition: opacity .3s ease-in-out;}
#booking .booking-content .booking-header-social-link:hover {opacity: 1;}

#booking .booking-content .booking-body {
    background: rgba(255,255,255,0.1);
    padding: 20px;
}

/* =========================
   Contact Form 7 / form controls
   ======================== */

/* Reset native browser styling and normalize controls inside CF7 forms */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="search"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form button,
.wpcf7-form input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    line-height: 52px; /* visual height for inputs */
    height: 52px;
    padding: 0 12px;
}

/* Textarea: visually same height but different line-height; auto-resize handled by JS */
.wpcf7-form textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    line-height: 32px; /* internal line-height for text rendering */
    min-height: 52px; /* visual baseline */
    height: auto; /* allow JS to control exact height */
    padding: 5px 12px;
    overflow: hidden; /* hide native scrollbar; JS will expand */
    resize: none; /* prevent manual resize */
}

/* Remove native select arrow in Safari/Chrome */
.wpcf7-form select {
    background-image: none;
}

/* Remove focus outlines from controls (you can add custom focus styles if needed for accessibility) */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus,
.wpcf7-form button:focus {
    outline: none;
    box-shadow: none;
}

/* Placeholder styling: white and fully opaque */
.wpcf7-form ::-webkit-input-placeholder { color: #fff; opacity: 1; }
.wpcf7-form :-ms-input-placeholder { color: #fff; opacity: 1; }
.wpcf7-form ::-ms-input-placeholder { color: #fff; opacity: 1; }
.wpcf7-form ::placeholder { color: #fff; opacity: 1; }

/* Make sure form controls don't show browser autofill background (some browsers) */
.wpcf7-form input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    box-shadow: 0 0 0px 1000px transparent inset;
    -webkit-text-fill-color: inherit;
}

/* cap textarea visually so autosize doesn't grow unbounded */
.wpcf7-form textarea {
    max-height: 60vh;
}

/* Default low opacity for empty controls and custom selector */
.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select,
.cf-selected {
    opacity: 0.3;
    transition: opacity .18s ease-in-out;
}

/* Full opacity when focused/active or when has value */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus,
.cf-select.active .cf-selected,
.wpcf7-form input.has-value,
.wpcf7-form textarea.has-value,
.wpcf7-form select.has-value,
.cf-selected.has-value {
    opacity: 1;
}

/* Ensure wrapper-level has-value keeps control fully opaque (higher specificity) */
.wpcf7-form .wpcf7-form-control-wrap.has-value input,
.wpcf7-form .wpcf7-form-control-wrap.has-value textarea,
.wpcf7-form .wpcf7-form-control-wrap.has-value select {
    opacity: 1;
}

#booking .booking-content .booking-body .wpcf7-form {display: grid;grid-template-columns: 1fr 1fr;gap: 40px;}
#booking .booking-content .booking-body .wpcf7-form p {}
#booking .booking-content .booking-body .wpcf7-form p .my-selector {display: none;}
#booking .booking-content .booking-body .wpcf7-form > p:last-of-type {position: relative;grid-column-start: 1;grid-column-end: 3;justify-content: center;display: flex;}
#booking .booking-content .booking-body .wpcf7-form p .wpcf7-form-control-wrap {}
#booking .booking-content .booking-body .wpcf7-form p .wpcf7-form-control-wrap input {background: transparent;border: 0;color: #fff;border-bottom: 2px solid #fff;font-size: 22px;text-transform: uppercase;width: 100%;outline: 0;transition: all .2s ease-in-out;}
#booking .booking-content .booking-body .wpcf7-form p .wpcf7-form-control-wrap input:hover, #booking .booking-content .booking-body .wpcf7-form p span select:hover, #booking .booking-content .booking-body .wpcf7-form p .wpcf7-form-control-wrap input:focus, #booking .booking-content .booking-body .wpcf7-form p span select:focus {opacity: 1;}
#booking .booking-content .booking-body .wpcf7-form p .wpcf7-form-control-wrap textarea {background: transparent;border: 0;color: #fff;border-bottom: 2px solid #fff;font-size: 22px;text-transform: uppercase;line-height: 32px;width: 100%;font-family: inherit; min-height: 52px;transition: all .2s ease-in-out;}
#booking .booking-content .booking-body .wpcf7-form p .wpcf7-form-control-wrap textarea:hover, #booking .booking-content .booking-body .wpcf7-form p .wpcf7-form-control-wrap textarea:focus {opacity: 1;}
#booking .booking-content .booking-body .wpcf7-form p .wpcf7-submit {width: 50%;background: #fff;color: #000;font-size: 24px;text-transform: uppercase;cursor: pointer;border: 2px solid #fff;transition: all .3s ease-in-out;opacity: 1;}
#booking .booking-content .booking-body .wpcf7-form p .wpcf7-submit:hover {background: #000;color: #fff;}
#booking .booking-content .booking-body .wpcf7-form p .wpcf7-spinner {position: absolute;left: 0px;top: 0;margin: 14px;}
#booking .booking-content .booking-body .wpcf7-form .wpcf7-response-output {display: none;}
#booking .booking-content .booking-body .wpcf7-form .cf-select {color: #fff;font-size: 22px;text-transform: uppercase;width: 100%;outline: 0;transition: all .2s ease-in-out;cursor: pointer;position: relative;z-index: 999;}
#booking .booking-content .booking-body .wpcf7-form .cf-select .wpcf7-not-valid-tip {text-transform: initial;line-height: 24px;font-size: initial;}
#booking .booking-content .booking-body .wpcf7-form .cf-selected:hover, #booking .booking-content .booking-body .wpcf7-form .cf-select.active .cf-selected {opacity: 1;}
#booking .booking-content .booking-body .wpcf7-form .cf-selected {display: flex;width: 100%;gap: 10px;border-bottom: 2px solid #fff;line-height: 52px;height: 52px;padding: 0 12px;}
#booking .booking-content .booking-body .wpcf7-form .cf-selected::after {content: "↓";position: relative;top: -2px;right: 0;}
#booking .booking-content .booking-body .wpcf7-form .cf-dropdown {position: absolute;display: block;background: #fff;color: #000;padding: 10px 0px;font-size: 18px;line-height: 1.8;width: 100%;opacity: 0;pointer-events: none;visibility: hidden;transition: all .2s ease-in-out;z-index: 9;}
#booking .booking-content .booking-body .wpcf7-form .cf-dropdown p {display: flex;flex-direction: column;}
#booking .booking-content .booking-body .wpcf7-form .cf-select.active .cf-dropdown {opacity: 1; pointer-events: all; visibility: visible;}
#booking .booking-content .booking-body .wpcf7-form .cf-dropdown span {cursor: pointer;padding: 3px 20px 0;}
#booking .booking-content .booking-body .wpcf7-form .cf-dropdown span:hover {background: #ccc;}
#booking .booking-content .thankyou {position: fixed;z-index: 9999;padding: 40px 20px;width: 100%;min-height: 100svh;height: 100dvh;display: flex;align-items: center;justify-content: center;backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);background: rgba(0,0,0,0.3);left: 0px;top: 0px;pointer-events: none;transition: all .2s ease-in-out;opacity: 0;visibility: hidden;}
#booking .booking-content .thankyou.active {opacity: 1;visibility: visible;pointer-events: all;cursor: pointer;}
#booking .booking-content .thankyou span {padding: 30px 60px;display: block;background: #fff;color: #000;font-size: 20px;font-weight: 600;letter-spacing: -0.4px;line-height: initial;}


/* === Final override: ensure filled controls stay opaque === */
.wpcf7-form .wpcf7-form-control-wrap.has-value input,
.wpcf7-form .wpcf7-form-control-wrap.has-value textarea,
.wpcf7-form .wpcf7-form-control-wrap.has-value select,
.cf-selected.has-value {
    opacity: 1 !important;
    transition: opacity .12s ease-in-out;
}

/* Flatpickr minimal theme tweaks to match dark popup look */
.flatpickr-calendar {
    background: #000;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: none;
}
.flatpickr-months, .flatpickr-weekdays, .flatpickr-days { color: #fff; }
.flatpickr-day { color: #fff; }
.flatpickr-day.today { box-shadow: none; border-bottom: 2px solid #fff; }
.flatpickr-day:hover { background: rgba(255,255,255,0.06); }
.flatpickr-input[readonly] { cursor: pointer; }

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {background: #000 !important;border-color: #000 !important;}

#portfolio .popup-content {}
#portfolio .popup-content .portfolio-content {display: grid;grid-template-columns: 1fr 1fr 1fr;width: 100%;grid-template-rows: auto;}
#portfolio .popup-content .portfolio-content .portfolio-photo-item {height: 80vh;}
#portfolio .popup-content .portfolio-content .portfolio-photo {width: 100%;height: 100%;object-fit: cover;}

/* Portfolio hover zoom and lightbox styles (scoped to portfolio popup) */
#portfolio .popup-content .portfolio-content { display: grid; grid-template-columns: repeat(3, 1fr);  }
#portfolio .popup-content .portfolio-content .portfolio-photo-item { overflow: hidden; position: relative; }
#portfolio .popup-content .portfolio-content .portfolio-photo-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.9,.3,1); transform-origin: center center; cursor: zoom-in; }
#portfolio .popup-content .portfolio-content .portfolio-photo-item:hover img { transform: scale(1.1); }

/* Lightbox overlay (global) */
.lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 200000; display: none; align-items: flex-start; justify-content: center; overflow-y: auto; }
.lightbox-overlay.is-open { display: flex; }
.lightbox-inner { width: 100vw; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 0px; }
.lightbox-image { max-width: 100vw; width: 100%; height: auto; display: block; }
.lightbox-inner { position: relative; }
.lightbox-image { position: relative; }

/* Stage inside inner used for slide animations (no padding) */
.lightbox-stage { width: 100%; position: relative; overflow: hidden; box-sizing: border-box; }
.lightbox-stage .lightbox-image { position: relative; display: block; }
.lightbox-close, .lightbox-prev, .lightbox-next { position: fixed; background: #fff; color: #000; border: none; padding: 8px 12px; cursor: pointer; z-index: 200010; font-size: 18px; transition: all .2s ease-in-out;}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {background: #000; color: #FFF; }
.lightbox-close { right: 10px; top: 0px; mix-blend-mode: difference;background: transparent;font-size: 46px;color: #fff;}
.lightbox-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lightbox-caption { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; color: #fff; z-index: 200010; font-size: 14px; opacity: .9; background: rgba(0, 0, 0, 0.34);padding: 0px 12px;border-radius: 12px;}

#backstage .popup-content {}
#backstage .popup-content .backstage-content {grid-template-columns: repeat(3, 1fr);display: grid;}
#backstage .popup-content .backstage-content .backstage-video-item {height: 80vh;width: 100%;}
#backstage .popup-content .backstage-content .backstage-video-shell {position: relative;width: 100%;height: 100%;background: #000;overflow: hidden;}
#backstage .popup-content .backstage-content .backstage-video-poster {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;object-position: center;display: block;z-index: 2;transition: opacity .25s ease;}
#backstage .popup-content .backstage-content .backstage-video-item video {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;object-position: center;background: #000;}
#backstage .popup-content .backstage-content .backstage-video-play {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 74px;height: 74px;border-radius: 50%;border: 1px solid rgba(255,255,255,0.7);background: rgba(0,0,0,0.35);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);cursor: pointer;display: flex;align-items: center;justify-content: center;z-index: 3;transition: all .2s ease;}
#backstage .popup-content .backstage-content .backstage-video-play:hover {background: rgba(0,0,0,0.55);}
#backstage .popup-content .backstage-content .backstage-video-play-icon {display: block;width: 0;height: 0;border-top: 11px solid transparent;border-bottom: 11px solid transparent;border-left: 18px solid #fff;margin-left: 4px;}
#backstage .popup-content .backstage-content .backstage-video-item.is-playing .backstage-video-play,
#backstage .popup-content .backstage-content .backstage-video-item.is-playing .backstage-video-poster {opacity: 0;pointer-events: none;}

#main-screen-popup .popup-content {padding: 0; overflow: hidden;}
#main-screen-popup {transform: none;}
#main-screen-popup.is-open {transform: none;}
#main-screen-popup .main-screen-content {position: relative; width: 100%; height: 100dvh; cursor: none;}
#main-screen-popup .main-screen-viewer {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}
#main-screen-popup .main-screen-image-wrap {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    z-index: 2;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0 auto;
    height: 100%;
    padding: 24px 0;
}
#main-screen-popup .main-screen-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
#main-screen-popup .main-screen-slide {
    position: absolute;
    inset: 0;
    margin: auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100dvh - 48px);
    object-fit: contain;
    opacity: 0;
    z-index: 1;
    transform: translate3d(0,0,0);
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    user-select: none;
    pointer-events: none;
}
#main-screen-popup .main-screen-slide.is-current {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}
#main-screen-popup .main-screen-zone {
    height: 100%;
    cursor: none;
}
#main-screen-popup .main-screen-zone--left { grid-column: 1; }
#main-screen-popup .main-screen-zone--right { grid-column: 3; }
#main-screen-popup .main-screen-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    pointer-events: none;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    mix-blend-mode: difference;
    opacity: 0;
    transition: opacity .12s linear;
}
#main-screen-popup .main-screen-cursor i {
    font-size: 56px;
    line-height: 1;
}
.main-screen-open-ghost {
    position: fixed;
    z-index: 100001;
    pointer-events: none;
    object-fit: cover;
    will-change: left, top, width, height;
    transition: left 360ms cubic-bezier(.22,.8,.2,1), top 360ms cubic-bezier(.22,.8,.2,1), width 360ms cubic-bezier(.22,.8,.2,1), height 360ms cubic-bezier(.22,.8,.2,1), opacity 360ms cubic-bezier(.22,.8,.2,1);
}

.slider-paused #rec330190719 .tn-atom__sbs-anim-wrapper,
.slider-paused #rec330190719 .tn-atom__prx-wrapper {
    animation-play-state: paused !important;
}

@media (max-width: 800px) { #portfolio .popup-content .portfolio-content { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 420px) { #portfolio .popup-content .portfolio-content { grid-template-columns: 1fr; } }

/* =========================
   Responsive overrides
========================= */

#bg,
.popup,
.popup-content {
    min-height: 100svh;
    height: 100dvh;
}

/* Narrow screens by HEIGHT (landscape laptops / short viewports) */
@media (max-height: 900px) and (min-width: 1025px) {
    .logo {
        font-size: clamp(56px, 6vw, 92px);
        left: 6%;
    }

    #about .popup-content .about-body {
        gap: 24px;
    }

    #about .popup-content .about-text .about-name {
        font-size: clamp(74px, 8vw, 132px) !important;
        line-height: 0.86;
        letter-spacing: -0.06em;
    }

    #about .popup-content .about-text .about-bio {
        font-size: clamp(42px, 4.6vw, 82px) !important;
        margin-top: 0;
        margin-bottom: 14px;
    }

    #about .popup-content .about-text a {
        font-size: clamp(56px, 6.4vw, 112px) !important;
        line-height: 0.9;
    }

    #booking .booking-content .booking-header-title {
        font-size: clamp(58px, 6vw, 90px);
        line-height: 0.95;
    }
}


/* Tablet and below */
@media (max-width: 1024px) {
    .logo {
        /*! top: 24px; */
        /*! left: 20px; */
        /*! transform: none; */
        font-size: clamp(84px, 7vw, 62px);
    }

    #menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1000;
    }

    #menu span {
        position: fixed;
        writing-mode: vertical-rl;
        pointer-events: auto;
        color: #fff;
    }

    #menu span a {
        font-size: clamp(14px, 2vw, 18px);
        line-height: 1.35;
    }

    #menu span:nth-child(1) {
        top: calc(20px + env(safe-area-inset-top));
        left: calc(20px + env(safe-area-inset-left));
    }

    #menu span:nth-child(2) {
        top: calc(20px + env(safe-area-inset-top));
        right: calc(20px + env(safe-area-inset-right));
    }

    #menu span:nth-child(3) {
        bottom: calc(20px + env(safe-area-inset-bottom));
        left: calc(20px + env(safe-area-inset-left));
    }

    #menu span:nth-child(4) {
        bottom: calc(20px + env(safe-area-inset-bottom));
        right: calc(20px + env(safe-area-inset-right));
    }

    .popup-close-span {
        right: calc(20px + env(safe-area-inset-right));
        top: calc(20px + env(safe-area-inset-top));
        writing-mode: vertical-rl;
        mix-blend-mode: difference;
        color: #fff;
    }

    .popup-close {
        font-size: clamp(14px, 2vw, 18px);
        line-height: 1.35;
    }

    #about .popup-content {
        padding: calc(72px + env(safe-area-inset-top)) 20px calc(96px + env(safe-area-inset-bottom));
    }

    #booking .popup-content {
        padding: calc(20px + env(safe-area-inset-top)) 20px calc(96px + env(safe-area-inset-bottom));
    }
    
    #portfolio .popup-content,
    #backstage .popup-content {
        padding: 0;
    }

    #about .popup-content .about-body {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #about .popup-content .about-img {
        max-height: 46dvh;
        object-position: center;
    }

    #about .popup-content .about-text .about-title {
        font-size: clamp(20px, 4.4vw, 34px) !important;
        letter-spacing: -0.03em;
    }

    #about .popup-content .about-text .about-name {
        font-size: clamp(42px, 12vw, 96px) !important;
        line-height: 0.9;
        letter-spacing: -0.05em;
    }

    #about .popup-content .about-text .about-bio {
        font-size: clamp(26px, 8vw, 64px) !important;
        margin: 8px 0 14px;
        line-height: 0.9;
        letter-spacing: -1px;
    }

    #about .popup-content .about-text a {
        font-size: clamp(30px, 8.4vw, 70px) !important;
        line-height: 0.96;
    }

    #booking .booking-content {
        gap: 20px;
    }

    #booking .booking-content .booking-header {
        grid-template-columns: 1fr;
        gap: 14px;
        padding-right: 0;
    }

    #booking .booking-content .booking-header-title {
        font-size: clamp(36px, 9vw, 72px);
        line-height: 0.92;
        letter-spacing: -0.03em;
    }

    #booking .booking-content .booking-header-links {
        align-items: flex-start;
    }

    #booking .booking-content .booking-header-link {
        font-size: 16px;
        text-align: left;
    }

    #booking .booking-content .booking-body .wpcf7-form {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    #booking .booking-content .booking-body .wpcf7-form > p:last-of-type {
        grid-column: auto;
    }

    #booking .booking-content .booking-body .wpcf7-form p .wpcf7-submit {
        width: 100%;
        font-size: 20px;
    }

    #booking .booking-content .booking-body .wpcf7-form p .wpcf7-form-control-wrap input,
    #booking .booking-content .booking-body .wpcf7-form p .wpcf7-form-control-wrap textarea,
    #booking .booking-content .booking-body .wpcf7-form .cf-select {
        font-size: 14px;
    }

    #booking .booking-content .thankyou span {
        width: min(92vw, 420px);
        text-align: center;
    }

    #portfolio .popup-content .portfolio-content,
    #backstage .popup-content .backstage-content {
        grid-template-columns: 1fr 1fr;
    }

    #backstage .popup-content .backstage-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    #backstage .popup-content .backstage-content .backstage-video-item {
        width: 100%;
    }

    #portfolio .popup-content .portfolio-content .portfolio-photo-item,
    #backstage .popup-content .backstage-content .backstage-video-item {
        height: 42dvh;
    }

}

/* Phone */
@media (max-width: 640px) {
    body {
        font-size: 15px;
    }

    .logo {
        top: 50%;
        left: 14px;
        transform: translateY(-50%);
    }
    .logo h1 {font-size: clamp(58px, 10vw, 56px);}
    .logo h2 {font-size: clamp(38px, 10vw, 56px);}

    #menu {
        z-index: 1000;
    }

    #menu span {
        margin: 0;
    }

    #menu span a {
        font-size: 20px;
        line-height: 1.25;
    }

    #menu span:nth-child(1) {
        top: calc(12px + env(safe-area-inset-top));
        left: calc(12px + env(safe-area-inset-left));
    }

    #menu span:nth-child(2) {
        top: calc(12px + env(safe-area-inset-top));
        right: calc(12px + env(safe-area-inset-right));
    }

    #menu span:nth-child(3) {
        bottom: calc(12px + env(safe-area-inset-bottom));
        left: calc(12px + env(safe-area-inset-left));
    }

    #menu span:nth-child(4) {
        bottom: calc(12px + env(safe-area-inset-bottom));
        right: calc(12px + env(safe-area-inset-right));
    }

    .popup-close-span {
        top: calc(12px + env(safe-area-inset-top));
        right: calc(12px + env(safe-area-inset-right));
    }

    .popup-close {
        font-size: 18px;
        line-height: 1.25;
    }

    #portfolio .popup-content .portfolio-content,
    #backstage .popup-content .backstage-content {
        grid-template-columns: 1fr 1fr;
    }

    #backstage .popup-content .backstage-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    #backstage .popup-content .backstage-content .backstage-video-item {
        width: 100%;
    }

    #backstage .popup-content .backstage-content .backstage-video-shell {
        height: auto;
        min-height: 36dvh;
        aspect-ratio: 3 / 4;
    }
    .lightbox-inner {display: flex; align-items: center;}
    #portfolio .popup-content .portfolio-content .portfolio-photo-item,
    #backstage .popup-content .backstage-content .backstage-video-item {
        height: auto;
    }

    #booking .booking-content .booking-header-socials {
        gap: 10px;
    }

    #booking .booking-content .booking-header-social-link {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    #main-screen-popup .main-screen-viewer {grid-template-columns: 1fr auto 1fr;}
    #main-screen-popup .main-screen-cursor {display: none;}

}