:root {
  --e-global-typography-primary-font-weight: 700 !important;
}

/* --- Typography --- */
@font-face {
  font-family: "Neue Montreal";
  src: url("../fonts/PPNeueMontreal-Book.otf") format("opentype");
  font-weight: 400; /* Standardized 'regular' to 400 */
  font-style: normal;
  font-display: swap; /* Improves loading performance */
}

@font-face {
  font-family: "Neue Montreal";
  src: url("../fonts/PPNeueMontreal-BookItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Neue Montreal";
  src: url("../fonts/PPNeueMontreal-SemiBold.otf") format("opentype");
  font-weight: 700; /* Standardized 'bold' to 700 */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Montreal";
  src: url("../fonts/PPNeueMontreal-SemiBoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* --- Global Resets & Body --- */
* {
  font-family: "Neue Montreal", Helvetica, Arial, sans-serif !important;
}

body {
  background-color: #F0F0EB !important;
  overflow: hidden;
  height: 100vh !important;
  font-size: 0.9rem;
}

a {
  color: var(--e-global-color-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:active,
a:hover {
  text-decoration: underline;
  color: var(--e-global-color-primary);
}

p {
  font-size: 1.125rem !important;
  line-height: 1.5 !important;
}

ul {
  padding-inline-start: 10px;
  list-style-type: "\2192"; /* Arrow bullet */
}

ul li {
  padding-left: 10px;
}

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -.02em;
  font-weight: 700 !important;
  margin-block-start: 0;
}

h1 { font-size: clamp(4rem, 4.745rem + 4.672vw, 10rem); line-height: 1.05; }
h2 { font-size: clamp(3rem, 2.686rem + 1.168vw, 4rem); line-height: 1.05; }
h3 { font-size: clamp(2.25rem, 2.093rem + .584vw, 2.75rem); line-height: 1.1; }
h4 { font-size: clamp(1.75rem, 1.593rem + .584vw, 2.25rem); line-height: 1.1; }
h5 { font-size: clamp(1.375rem, 1.336rem + .146vw, 1.5rem); line-height: 1.15; }
h6 { font-size: 1.125rem; font-weight: 700; line-height: 1.25; }

#descriptionBox h3 { margin-top: 0; }
#descriptionBox h5 { margin-block-end: 0.5rem; }

/* --- Utility Classes --- */
.text-label-sans,
.text-label-serif,
.text-label-sans h3 {
  font-size: .875rem !important;
  line-height: 1.2 !important;
}

.text-small {
  font-size: clamp(0.875rem, 2vh, 1.125rem) !important;
  line-height: 1.5 !important;
  letter-spacing: .02em;
}

p.text-small {
  margin-block-end: 0.45rem;
}

/* --- Windows & Layout --- */
#window01, #window02, #window03, #window04,
#closeButton, #exitCloseButton {
  transition-property: top, opacity;
  transition-duration: 1.2s;
  transition-timing-function: cubic-bezier(0.2, 0.0, 0, 1.0);
}

#w1col1, #window01, #window02, #window03, #window04 {
  max-height: 100vh;
  overflow: unset;
  overflow-x: hidden;
  overflow-y: auto;
}

#window01 { top: 0; }
#window02 { top: 100dvh; max-height: 100dvh; }

#window03 {
  top: 0vh;
  max-height: 100dvh;
  z-index: 100;
  background: #ffffff;
  opacity: 0;
}

#window04 {
  top: 0vh;
  max-height: 100dvh;
  z-index: 101;
  opacity: 0;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

#windowContent { top: 200vh; }

.onScreen { top: 0vh !important; }
.offScreen { top: -100dvh !important; }

#w1col1 > div:first-of-type,
#layerDescription {
  max-width: 660px;
}

#csContainer img,
#window04 img {
  border-radius: .25rem;
}

#csImg { max-height: 100vh; }

#imgContainer {
  max-height: 100dvh;
  overflow: visible;
  margin: 0;
  gap: 0 !important;
}

/* --- Layer Animations & Interactions --- */
.layerImg, .layerImg img, .closed, .open, .layer-shadow, .layerHover, .layerFade {
  transition: margin 0.5s, opacity 0.3s, transform 0.3s, filter 0.3s, background-color 0.3s, color 0.5s;
  transition-timing-function: cubic-bezier(0.2, 0.0, 0, 1.0);
  cursor: pointer;
}

.activeTab .elementor-widget-container, .tab, .tab * {
  transition: padding-left 0.6s, background-color 0.3s, color 0.5s, border-radius 0.3s;
  transition-delay: 0.5s, 0s, 0.3s, 0.5s;
  transition-timing-function: cubic-bezier(0.2, 0.0, 0, 1.0);
  cursor: pointer;
}

.layerImg {
  height: 30.8vh !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-bottom: -21vh !important;
  transform-origin: 50% 100%;
}

.layerImg img {
  border: 2px solid red;
  height: 100% !important;
  width: unset !important;
}

.layer-shadow {
  position: absolute;
  pointer-events: none;
  top: 0vh !important;
  bottom: -18vh !important;
  transform: scaleY(0.5) translateX(-2.5%);
  inset: 0;
  background: radial-gradient(circle, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0) 54%);
  z-index: -1;
}

/* States */
.open {
  margin-top: 33vh !important;
  margin-bottom: -26vh !important;
  transform: scale(1.2);
  filter: saturate(0.99) contrast(0.99) !important;
  -webkit-filter: saturate(0.99) contrast(0.99) !important;
}

.closed {
  margin-top: 0 !important;
  margin-bottom: -26vh !important;
  transform: scale(1);
}

.closed img,
.layerFade img:not(.open img) {
  filter: saturate(0.01) contrast(0.6);
  -webkit-filter: saturate(0.01) contrast(0.6);
}

.layerHover:not(.open) { transform: scale(1.1); }
.layerHover.closed img {
  filter: saturate(0.99) contrast(0.99) !important;
  -webkit-filter: saturate(0.99) contrast(0.99) !important;
}

/* --- Tabs & UI Elements --- */
.tab { max-width: calc(100% - 27px) !important; }

.tab > div {
  height: 2rem !important;
  align-content: center;
  max-width: 240px;
}

#closeButton, #exitCloseButton, #goBackButton, #caseStudyCloseButton { cursor: pointer; }

.activeTab .elementor-heading-title {
  color: #000 !important;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.elementor-widget-container { border-radius: 0rem; }
.activeTab .elementor-widget-container { border-radius: 1rem; }
.activeTab.whiteText .elementor-heading-title { color: #fff !important; }

#w1col1 .elementor-widget-heading:hover { text-decoration: underline; }
#w1col1 .activeTab.elementor-widget-heading:hover { text-decoration: none; }

/* Start Button */
#startButton {
  transition: all 0.6s ease-out;
  opacity: 0;
}

#startButton .elementor-button-content-wrapper {
  width: 15vw !important;
  height: 15vw !important;
  align-items: center;
}

#startButton .elementor-button { padding: 0 !important; }

/* --- Loading Screen --- */
#loadingScreen {
  cursor: pointer;
  width: 100dvw !important;
  height: 100dvh !important;
  top: 0;
  left: 0;
  position: absolute;
  clip-path: inset(0px 0px 0px 0%);
  transition: clip-path 0.6s ease-in, left 0.6s ease-in, top 0.6s ease-in;
  background-position: center center;
  animation: bgScale 30s infinite ease-in-out;
  z-index: 101;
  background-color: #FFFFFF;
  background-image: url("https://aude.bdp.com/wp-content/uploads/2024/04/GLOBE-1850-2022-MO.png");
}

@keyframes bgScale {
  0% { background-size: 150%; background-position: 0% 50%; }
  50% { background-size: 150%; background-position: 100% 50%; }
  100% { background-size: 150%; background-position: 0% 50%; }
}

#loadingScreen.done {
  clip-path: inset(0px 0px 0px 100%);
  left: 100vw;
  top: 0;
}

/* --- Elementor Specific Overrides --- */
body.elementor-editor-active { overflow: visible; }

body.elementor-editor-active #window01,
body.elementor-editor-active #window02,
body.elementor-editor-active #window03,
body.elementor-editor-active #window04,
body.elementor-editor-active #caseStudyContent {
  top: unset;
  min-height: 100vh;
  position: relative;
  opacity: 1;
}

body.elementor-editor-active #windowContent { top: unset; min-height: auto; position: relative; }
body.elementor-editor-active #loadingScreen { top: unset; animation: unset; position: relative; }

.elementor-accordion .elementor-accordion-item { border: none !important; }
.elementor-accordion .elementor-tab-content { border-top: 1px solid #C3C3BE !important; }

#img01, #img02, #img03, #img04, #img05, #img06, #img07 { overflow: visible; }

/* =========================================
   MEDIA QUERIES
   ========================================= */

/* Desktop / Tablet Portrait (Aspect Ratio based) */
@media (max-aspect-ratio: 1) {
  #startButton .elementor-button-content-wrapper {
    width: 15vh !important;
    height: 15vh !important;
  }
  #imgContainer { padding: 0; }
  .layerImg { height: 17vh !important; margin-bottom: -9vh !important; }
  .layerImg img { height: unset !important; width: 90% !important; }
  .open { margin-top: 12vh !important; margin-bottom: -12vh !important; }
  .closed { margin-top: 0 !important; margin-bottom: -10vh !important; }
  .tab { max-width: 90% !important; }
}

/* Mobile (Combined Landscape & Portrait) */
@media (max-width: 767px), (max-height: 400px) {
  #w1col1, #loadingScreen, #window02, #window03, #window04 {
    padding-bottom: unset;
  }
  #window02, #window03, #window04 { padding-top: unset; }
  #window04 { background: unset !important; }

  #loadingScreen.done {
    clip-path: inset(0px 0px 100% 0px);
    left: 0;
    top: -100vh;
  }

  .elementor {
    height: 100vh !important;
    max-width: 100vw !important;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #window01, #window02, #window03, #window04, #windowContent, #caseStudyContent {
    top: unset;
  }

  #closeButton, #exitCloseButton, #goBackButton { display: none; }
}

/* Mobile Portrait Only */
@media (max-width: 767px) {
  #startButton .elementor-button-content-wrapper {
    width: 20vh !important;
    height: 20vh !important;
  }
  .tab { max-width: 100% !important; }
}

/* Mobile Landscape Only */
@media (max-height: 400px) {
  @supports(padding:max(0px)) {
    body, header, footer {
      padding-left: min(0vmin, env(safe-area-inset-left)) !important;
      padding-right: min(0vmin, env(safe-area-inset-right)) !important;
    }
    #window01, #window02, #window03, #window04, #loadingScreen, #caseStudyContent {
      padding: 10px;
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
  }
  .elementor-8 .elementor-element.elementor-element-40ea7fb {
    width: 50vw !important;
  }
}

/* Touch Device Override */
[data-elementor-device-mode="mobile"] .elementor-element:not(#loadingScreen) {
  top: unset !important;
  position: relative !important;
  max-height: unset;
  min-height: unset;
}