.elementor-kit-9{--e-global-color-primary:#FCFCFC;--e-global-color-secondary:#707070;--e-global-color-text:#080708;--e-global-color-accent:#FFF347;--e-global-color-a0d37e6:#F4F4F4;--e-global-color-b55d4ec:#CC78E3;--e-global-typography-primary-font-family:"Neue Montreal";--e-global-typography-secondary-font-family:"Neue Montreal";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Neue Montreal";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Neue Montreal";--e-global-typography-accent-font-weight:500;background-color:var( --e-global-color-primary );--e-preloader-animation-duration:1500ms;--e-preloader-delay:0ms;}.elementor-kit-9 e-page-transition{background-color:var( --e-global-color-a0d37e6 );}.elementor-kit-9 p{margin-block-end:1vh;}.elementor-kit-9 input:not([type="button"]):not([type="submit"]),.elementor-kit-9 textarea,.elementor-kit-9 .elementor-field-textual{border-style:solid;border-width:0px 0px 1px 0px;border-color:var( --e-global-color-text );border-radius:0px 0px 0px 0px;padding:10px 0px 3px 0px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:2100px;}.e-con{--container-max-width:2100px;--container-default-padding-top:10px;--container-default-padding-right:10px;--container-default-padding-bottom:10px;--container-default-padding-left:10px;}.elementor-widget:not(:last-child){margin-block-end:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1366px){.e-con{--container-default-padding-top:20px;--container-default-padding-right:20px;--container-default-padding-bottom:20px;--container-default-padding-left:20px;}}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ----------------------------------- */
/* ROOT VARIABLES */
/* ----------------------------------- */
:root {
--fs-body: clamp(1rem, 1vw, 1.125rem);
  /* 16px → ~18px */

  --fs-h1: clamp(2.25rem, 4.5vw, 3.5rem);
  /* ~36px → ~56px */
--fs-h2: clamp(2rem, 3.5vw, 2.75rem);
/* ~32px → ~44px */
--fs-h3: clamp(1.6rem, 2.5vw, 2.25rem);
/* ~25.6px → ~36px */
  --fs-h4: clamp(1.25rem, 1.5vw, 1.5rem);
  /* ~20px → ~24px (also your lead size) */
  --fs-small: clamp(0.8rem, 0.9vw, 0.85rem);
  /* ~13px → ~14px */

  --fs-hero: clamp(3rem, 6vw, 4.5rem);
  /* ~48px → ~72px */

  /* Layout */
  --menu-width: clamp(7rem, 8vw, 9rem); 
  --footer-height: 100vh;
  

  /* Colours */
  --dark-colour: #080708;
  --light-colour: #FCFCFC;
  --callout-colour: #EBEBEB;
  --grey-colour: #707070;
  --footer-color-1: #fff347;
  --light-grey: #e8eaed;

}

/* ----------------------------------- */
/* CONTENT AREA */
/* ----------------------------------- */

.main_content {
  width: calc(100% - var(--menu-width));
  max-width: none;
    margin: 0 0 100vh 0;
  padding: 0;
  box-sizing: border-box;
}

/* Mobile override */
@media (max-width: 767px) {
  .main_content {
    width: 100vw;
  }
}

html, body {
  overscroll-behavior-y: contain; /* stops bouncing */
}


/* ----------------------------------- */
/* TYPE */
/* ----------------------------------- */

body, h1, h2, h3, h4,
.lead, .small, .quote,
.elementor-button, alt-heading-l, alt-heading {
  font-family: 'Neue Montreal', sans-serif;
  font-weight: 530;
  color: var(--dark-colour);
}

body {
  font-size: var(--fs-body);
  line-height: 1.37;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: var(--fs-h1);
  line-height: 1.05 !important;
}

h2 {
  font-size: var(--fs-h2);
line-height: 1.1 !important;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
}

h4 {
  font-size: var(--fs-h4);
  line-height: 1.25;
}

.alt-heading .elementor-heading-title {
  font-size: var(--fs-h4);
  line-height: 1.2;
}

.alt-heading-l .elementor-heading-title {
  font-size: var(--fs-hero);
  line-height: 1;
}


.lead {
  font-size: var(--fs-h4);
  line-height: 1.35;
}

.lead-large {
  font-size: var(--fs-h2);
  line-height: 1.17;
}

.small {
  font-size: var(--fs-small);
  line-height: 1.4;
}

.archive-title {
  font-size: var(--fs-body);
  line-height: 1.15;
}

.quote {
  font-size: var(--fs-h3);
  color: var(--grey-colour);
  line-height: 1.25;
}



/* ----------------------------------- */
/* LINKS */
/* ----------------------------------- */

a,
.blog_content a,
.work-text a {
  color: var(--dark-colour);
  text-decoration-line: underline;
  cursor: pointer;
}


/* ----------------------------------- */
/* BUTTON STYLES */
/* ----------------------------------- */

/* All Buttons */
.elementor-button {
  all: unset;
  font-size: var(--fs-body);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  text-decoration: none;
  color: var(--dark-colour);
}

/* Ensure children inherit colour */
.elementor-button * {
  color: inherit;
}

/* Back button overrides */
.elementor-button-info .elementor-button {
  background: none !important;
  border: none;
  padding: 0;
}

/* ----------------------------------- */
/* Arrow Styles (shared base) */
/* ----------------------------------- */
.elementor-button::after,
.elementor-button-info .elementor-button::before {
  content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s ease;
}

/* Forward Arrow (only if NOT inside .elementor-button-info) */
.elementor-button:not(.elementor-button-info .elementor-button)::after {
  background-image: url("/wp-content/uploads/2025/08/arrow-forwards-01.svg");
}

/* Back Arrow */
.elementor-button-info .elementor-button::before {
  background-image: url("/wp-content/uploads/2025/07/arrow-back.svg");
  transform-origin: center center;
}

/* ----------------------------------- */
/* Hover Effects */
/* ----------------------------------- */
.elementor-button:hover,
.elementor-button:focus {
  color: var(--dark-colour);
}

.elementor-button:hover::after {
  transform: translateX(0.15em);
}

.elementor-button-info .elementor-button:hover::before {
  transform: translateX(-0.15em);
}


/* ----------------------------------- */
/* SPACING */
/* ----------------------------------- */


.spacer {
  padding-top: clamp(2.8em, 5vw, 4.2em);
  padding-bottom: clamp(2.8em, 5vw, 4.2em);
}

.spacer-top {
  padding-top: clamp(3.8em, 6vw, 5.2em);
}

.spacer-s {
  padding-top: clamp(0.9em, 1.8vw, 1.5em);
  padding-bottom: clamp(1.4em, 1.8vw, 1.7em);
}

.spacer-top-s {
  padding-top: clamp(0.9em, 1.8vw, 1.5em);
}


.spacer-bottom-mobile {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* ----------------------------------- */
/* ACCORDION */
/* ----------------------------------- */

.elementor-widget-n-accordion .e-n-accordion-item-title-text {
  font-size: var(--fs-h4) !important;
}

/* ----------------------------------- */
/* MENU DESKTOP */
/* ----------------------------------- */
.menu_wrapper {
  width: var(--menu-width);
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  box-sizing: border-box;
  background: var(--light-colour, #FCFCFC);
  padding: 0;
  overflow: hidden;
  transform: translateX(0);
 transition: transform 0.35s ease-in-out;
}

.menu_wrapper.footer-active {
  transform: translateX(100%);
}

.nav_item {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding-top: 10px;
  height: 100%;
  display: flex;
  align-items: center;
  width: calc(var(--menu-width) / 4);
  font-size: var(--fs-h4);
  border-right: 1px solid;
  color: var(--dark-colour, #000);
  cursor: pointer;
  box-sizing: border-box;
}

.nav_item > span {
  display: inline-block;        /* stabilises baseline */
  will-change: transform;       /* pre-renders for smoothness */
  transition: transform 0.3s ease, color 0.3s ease;
}

.nav_item:hover > span {
  transform: translateY(0.3em); /* smoother on rotated vertical text */
  color: var(--dark-colour, #000);
}

/* ----------------------------------- */
/* MOBILE MENU */
/* ----------------------------------- */

/* hide desktop menu on mobile */
@media (max-width: 767px) {
  .menu_wrapper {
    display: none !important;
  }
}

/* mobile menu wrapper & close */
.mobile-menu-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10001;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  overflow-y: auto;
}

body.menu-active .mobile-menu-wrapper {
  transform: translateX(0);
  pointer-events: auto;
}

.mobile-menu-close {
  position: absolute;
  cursor: pointer;
  z-index: 300000;
}

/* mobile toggle button */
.mobile-menu-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2147483647;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.3s ease;
}
/* ----------------------------------- */
/* LOGO & HEADER                       */
/* ----------------------------------- */

.logo-header {
  opacity: 1;
  position: relative;
  z-index: 1;
  transform: none; /* remove previous slide/flip */
  transition:
    opacity 0.1s ease,
    background-color 0.3s ease;
}

.logo-header.is-hidden {
  opacity: 0;
  pointer-events: none; /* keeps it unclickable when hidden */
  transform: none;      /* remove slide effect */
}

.logo-header.white-bg {
  background-color: var(--light-colour);
}

/* Header container */
.header-container.is-hidden {
  pointer-events: none !important;
}

/* Mobile toggle hidden state */
.mobile-menu-toggle.is-hidden {
  transform: translateY(-100%) !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.mobile-menu-toggle.is-hidden .menu-open {
  pointer-events: none;
}

/* ----------------------------------- */
/* FOOTER INTERACTIONS */
/* ----------------------------------- */
.menu_wrapper.footer-active + .logo-header.white-bg {
  background-color: transparent;
}


/* ----------------------------------- */
/* WORK ARCHIVE */
/* ----------------------------------- */
/* hover image */
.work-img {
  position: relative;
  display: inline-block;
}

.work-img .main-img {
  z-index: 1;
  width: 100%;
  height: auto;
  opacity: 1;
}

.work-img .hover-img {
  position: absolute;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

.work-img:hover .hover-img {
  opacity: 1;
}



/* ----------------------------------- */
/* BLOG POST */
/* ----------------------------------- */

/* TOC */
.elementor-201 .elementor-element.elementor-element-8175467 .elementor-toc__header-title {
  font-size: var(--fs-body);
  margin-bottom: -1.5em;
}

/* base style for all TOC */
.elementor-toc__list-wrapper a {
  font-size: var(--fs-body);
  text-decoration: none;
  color: var(--grey-colour) !important; 
}

/* vertical spacing between each list item */
.elementor-toc__list-item {
  margin-bottom: 0.8em;
}

/* Add a subtle hover effect to inactive links */
.elementor-toc__list-wrapper a:hover {
  color: var(--dark-colour);
}

/* list item text for active state */
.elementor-toc__body .elementor-toc__list-item-text.elementor-item-active {
  color: var(--dark-colour) !important;
  position: relative;
  /* Removed bold weight for emphasis */
}

/* forward arrow for active list item */
.elementor-toc__body .elementor-toc__list-item-text.elementor-item-active::before {
  content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  background-image: url("/wp-content/uploads/2025/08/arrow-forwards-01.svg"); /* Use the consistent SVG arrow */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 0.4em; /* Adjust spacing between arrow and text */
}

.blog_content body {
  line-height: 1.45; 
}


/* Headings spacing */
.blog_content h2 {
  margin-top: 0.6em;
}

.blog_content h3 {
  margin-top: 0.5em;
}

.blog_content h4 {
  margin-top: 0.4em;
}

.blog_content h5 {
  margin-top: 0.3em;
}

.blog_content p {
  margin: 1em 0;
}

.wp-caption-text {
  font-size: var(--fs-small);
  font-style: normal; /* remove italic */
  text-align: left;   /* align text left */
}



.blog_content > * + * {
  margin-top: 1em;
}

.blog_content img,
.blog_content video,
.blog_content figure,
.blog_content iframe {
  margin-top: 1em; 
  display: block;  
}

/* ----------------------------------- */
/* LISTS */
/* ----------------------------------- */

ol,
ul {
  margin: 1.2em 0;
  padding-left: 2em;
}

ol + *,
ul + * {
  margin-top: 1.1em;
}

* + ol,
* + ul {
  margin-top: 1em;
}

/* Unordered list styling */
ul {
  list-style-type: disc;
}

ul > li {
  margin: 0.5em 0;
  padding-left: 0.5em;
  line-height: 1.6;
}

/* Ordered list custom numbers */
ol {
  list-style: none;
  counter-reset: list-counter;
}

ol > li {
  counter-increment: list-counter;
  position: relative;
  padding-left: 2em;
  margin-bottom: 0.7em;
  line-height: 1.6;
}

ol > li::before {
  content: counter(list-counter);
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.5em;
  height: 1.5em;
  border: 2px solid var(--dark-colour);
  border-radius: 50%;
  background-color: transparent;
  font-size: var(--fs-small);
  font-weight: 700;
  text-align: center;
  line-height: 1.2em;
  font-family: 'Neue Montreal', sans-serif;
  color: var(--dark-colour);
}


/* ----------------------------------- */
/* CALLOUT BOX */
/* ----------------------------------- */

.callout-box {
  background-color: var(--callout-colour);
  padding: 20px;
  border-radius: 20px;
  margin-top: 1em;
  margin-bottom: 1em !important;
}

/* ----------------------------------- */
/* TABLE */
/* ----------------------------------- */

.table-wrapper {
  overflow-x: auto;
  margin: 1em 0;
}

.table-wrapper table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: none;
}

.table-wrapper th,
.table-wrapper td {
  padding: 0.75em 0.5em;
  text-align: left;
  border: none;
  background: none !important;
  border-top: 1px solid var(--grey-colour);
}

.table-wrapper tr:last-child th,
.table-wrapper tr:last-child td {
  border-bottom: 1px solid var(--grey-colour);
}


/* ----------------------------------- */
/* Blog Numbering */
/* ----------------------------------- */

body:not(.rtl) .elementor-pagination .page-numbers {
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  border: 0.1em solid var(--dark-colour);
  border-radius: 50%;
  background-color: transparent;
  font-size: var(--fs-body);
  font-weight: 530;
  text-align: center;
  line-height: 1.15em;
  font-family: 'Neue Montreal', sans-serif;
  color: var(--dark-colour);
  margin: 0 0.2em;
}

body:not(.rtl) .elementor-pagination .page-numbers.current {
  background-color: var(--dark-colour);
  color: #ffffff !important;
}
/* ----------------------------------- */
/* AUTHOR */
/* ----------------------------------- */

.elementor-author-box__bio, .elementor-author-box__bio p {
  font-size: var (--fs-body);
}

/* ----------------------------------- */
/* FORM */
/* ----------------------------------- */

.elementor-field.elementor-field-textual {
  font-size: 1em;
}

.elementor-form .elementor-button {
  font-size: var(--fs-h3);
  display: inline-flex;
}



/* BACKGROUND BLEND ON SCROLL */
.background-blend { 
    background-color: var(--light-colour); 
    /* Or any other color you want */ 
    transition: background-color 0.3s ease; } 
.background-blend.active  { 
        background-color: var(--light-grey); }


/* ----------------------------------- */
/* LANGUAGE SWITCH */
/* ----------------------------------- */

.wpml-ls-legacy-dropdown,
.wpml-ls-legacy-dropdown a,
.wpml-ls-legacy-dropdown li,
.wpml-ls-legacy-dropdown ul.wpml-ls-sub-menu {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
}

.wpml-ls-legacy-dropdown .wpml-ls-item-toggle::after {
  content: none !important;
  display: none !important;
}


.wpml-ls-legacy-dropdown .wpml-ls-item-toggle {
  position: relative;
}

.wpml-ls-legacy-dropdown .wpml-ls-item-toggle::before {
  content: "⌄";
  position: absolute;
  right: 25px; 
  top: 40%;
  transform: translateY(-65%);
  color: #000;
  font-size: 1em;
}

.wpml-ls-legacy-dropdown ul.wpml-ls-sub-menu li {
  padding: 7px 0 !important;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Neue Montreal';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://www.nineblaess.de/wp-content/uploads/2025/07/PPNeueMontreal-Medium.woff2') format('woff2'),
		url('https://www.nineblaess.de/wp-content/uploads/2025/07/PPNeueMontreal-Medium.woff') format('woff'),
		url('https://www.nineblaess.de/wp-content/uploads/2025/07/PPNeueMontreal-Medium.ttf') format('truetype');
}
/* End Custom Fonts CSS */