that contains the editor markup plus the actual

. Pad the inputs and
   the editor textarea directly, but NOT the wysiwyg wrapper div. */
.jet-form-builder .jet-form-builder__field:not(.wysiwyg-field),
.jet-form-builder .wp-editor-area {
	min-height: 1.5em;
	padding: 0.7em;
}

.jet-form-builder .jet-form-builder__label {
	margin-top: 1em;
	margin-bottom: 0.4em;
}

/* Message textarea needs more height than a single-line input, and
   should only be resizable vertically — letting users widen it would
   break the form's column layout. */
.jet-form-builder .jet-form-builder__field.textarea-field {
	min-height: 8em;
	resize: vertical;
	width: 100%;
	max-width: 100%;
}

.jet-form-builder .jet-form-builder__action-button.jet-form-builder__submit {
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--black);
	border: none;
	padding: 0.7em;
	font-family: var(--wp--preset--font-family--aileron-bold);
	cursor: pointer;
}

.jet-form-builder .jet-form-builder__action-button.jet-form-builder__submit:hover,
.jet-form-builder .jet-form-builder__action-button.jet-form-builder__submit:focus {
	background: var(--wp--preset--color--yellow);
	opacity: 0.85;
}

/* Inverted form skin — opt-in via the `whiteOnBlack` class on the SAME
   element as `.jet-form-builder` (i.e. on the <form> itself). The form
   sits on a black surface, so labels are WHITE and the input boxes get
   black backgrounds with WHITE text inside, framed by a thin WHITE
   border. The yellow submit stays yellow because it's the brand colour. */
.jet-form-builder.whiteOnBlack,
.jet-form-builder.whiteOnBlack .jet-form-builder__label-text {
	color: var(--wp--preset--color--white);
}

.jet-form-builder.whiteOnBlack .jet-form-builder__field:not(.wysiwyg-field),
.jet-form-builder.whiteOnBlack .wp-editor-area {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--white);
}

.jet-form-builder.whiteOnBlack .jet-form-builder__field:not(.wysiwyg-field)::placeholder,
.jet-form-builder.whiteOnBlack .wp-editor-area::placeholder {
	color: var(--wp--preset--color--grey);
}

/* WYSIWYG wrapper: matching black-on-white-border frame. The wrapper div
   carries the border so the editor's chrome (toolbar) is enclosed too,
   the inner textarea has its own black bg + white text but no border
   so we don't get a double frame.
   `!important` is needed because WordPress's editor.min.css is loaded
   inline INSIDE the wysiwyg wrapper, so it cascades after our style.css
   and would otherwise win on equal specificity for `.wp-editor-area`. */
.jet-form-builder.whiteOnBlack .jet-form-builder__field.wysiwyg-field,
.jet-form-builder.whiteOnBlack .jet-form-builder__field.wysiwyg-field .wp-editor-wrap,
.jet-form-builder.whiteOnBlack .jet-form-builder__field.wysiwyg-field .wp-editor-container,
.jet-form-builder.whiteOnBlack .jet-form-builder__field.wysiwyg-field .wp-editor-area {
	background: var(--wp--preset--color--black) !important;
	color: var(--wp--preset--color--white) !important;
}

.jet-form-builder.whiteOnBlack .jet-form-builder__field.wysiwyg-field {
	border: 1px solid var(--wp--preset--color--white);
}
.jet-form-builder.whiteOnBlack .jet-form-builder__field.wysiwyg-field .wp-editor-area {
	border: none !important;
}

/* Submit stays yellow (brand) — keep text black for contrast. */
.jet-form-builder.whiteOnBlack .jet-form-builder__action-button.jet-form-builder__submit {
	color: var(--wp--preset--color--black);
}

/* Page-transition fade overlay. Sits below the header (z-index 20), so the
   logo + nav stay visible during the fade; covers everything else. The
   overlay is rendered with the `fade-out` class already applied (PHP), so
   the page literally fades IN from black on first paint. JS removes the
   class on DOMContentLoaded to fade it out, and re-adds it before each
   navigation to fade back in. */
#gsm-page-fader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #000;
	z-index: 15;
	opacity: 0;
	pointer-events: none;
	/* Fade IN (overlay → transparent): 0.5s */
	transition: opacity 0.5s ease-in-out;
}
#gsm-page-fader.fade-out {
	opacity: 1;
	/* Fade OUT (overlay → black): 0.3s */
	transition: opacity 0.3s ease-in-out;
}

.outerWrap.alignfull {
	overflow:hidden;
	padding:0 15px;
}

.outerWrap.alignfull.nopadding {
	padding:0;
}
 
.wp-block-image.size-full {
	text-align:center;
}

.wp-site-blocks header {
	position:fixed;
	left:0;
	top:0;
	right:0;
	z-index:20;
	transition: transform 0.5s ease-in-out;
}

/*
:not(.has-modal-open) .wp-site-blocks header.fixed.hidden {
	overflow:hidden;
}*/

.has-modal-open .wp-site-blocks header.fixed {
	bottom:0;
	transform:none !Important;
}

header .wp-block-wpm-language-switcher {
	background:var(--wp--preset--color--white);
	position:absolute;
	right:0;
}

header .wp-block-wpm-language-switcher ul li {
	float:left;
}

.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container {
	align-items:flex-end;
}

/*
.wp-block-navigation .wp-block-navigation-item:not(.wp-block-navigation-link) {
	display:none;
}*/

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-item:not(.wp-block-navigation-link) {
	display:flex;
}

@media (min-width: 600px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
}

@media (min-width: 600px) {
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display:none;
    }
}

@media (min-width: 1050px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none;
    }
	
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block;
    }
	
	
	header.hidden .siteSwitch {
		bottom:55px;
	}
}

/* / */

.siteSwitch {
	/*background:var(--wp--preset--color--grey);*/
	position:absolute;
	/*top:118px;*/
	bottom:0;
	right:0;
	margin-bottom:-40px;
	overflow:hidden;
	z-index:10;
	transition: bottom 0.5s ease-in-out;
	width:136px;
}

/*
.siteSwitch .wp-block-group:nth-child(2) {
	background:var(--wp--preset--color--yellow);
}*/

.siteSwitch .wp-block-image a {
	padding:30px 2px 6px;
	outline:none;
	width:100%;
}

.siteSwitch .wp-block-image a img {
	width:100%;
}

.siteSwitch .wp-block-group {
	height:10px;
	min-height:10px;
	width:100%;
	transition: height 0.5s ease-in-out;
}

.siteSwitch.pos1 .wp-block-group:nth-child(1) {
	height:auto;
}

.siteSwitch.pos2 .wp-block-group:nth-child(2) {
	height:auto;
}

.siteSwitch.extended .wp-block-group:nth-child(1) {
	height:75px;
}

/* The current zone's button stays visible (it's the one shown by
   default — pos1 = first child, pos2 = second child) but must not
   act as a link to itself. Kill the pointer cursor and any click
   handling so it reads as the "you are here" indicator, while the
   other-zone button (revealed on hover via .extended) remains the
   only active link. */
.siteSwitch.pos1 .wp-block-group:nth-child(1) a,
.siteSwitch.pos2 .wp-block-group:nth-child(2) a {
	pointer-events: none;
	cursor: default;
}

/*
header.hidden .siteSwitch.pos2 .wp-block-group:nth-child(2) {
	height:10px;
}
*/
header.hidden .siteSwitch.pos2 .wp-block-group:nth-child(2) .wp-block-image img {
	opacity:0;
	transition: opacity 0.5s ease-in-out;
}

.siteSwitchModal {
	display:none;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:var(--wp--preset--color--black);
	padding:60px 0 0 0;
}

/* siteSwitchModal.js rebuilds the modal body into a 3-item list
   styled like the regular mobile-menu items: right-aligned, 21 px
   bold Aileron, white text on black. The current zone gets the
   same rectangle around its label as a .current-menu-item in the
   regular mobile menu. */
.siteSwitchModal .ssm-list {
	list-style: none;
	margin: 0;
	padding: 80px 30px 0 30px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.siteSwitchModal .ssm-item {
	margin: 0 0 30px;
	text-align: right;
}
.siteSwitchModal .ssm-item:last-child {
	margin-bottom: 0;
}
.siteSwitchModal .ssm-link {
	color: var(--wp--preset--color--white);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--aileron);
	font-size: 21px;
	font-weight: bold;
	display: inline-block;
}
.siteSwitchModal .ssm-link:hover,
.siteSwitchModal .ssm-link:focus {
	text-decoration: none;
}
.siteSwitchModal .ssm-current .ssm-label {
	border: 2px solid var(--wp--preset--color--white);
	padding: 0 6px;
	animation: gsm-current-menu-rect-white 0.5s ease-in-out 0.1s both;
}
/* "ZURÜCK" gets the theme yellow so it reads as a separate
   "secondary action" — visually distinguishable from the two
   primary zone choices above it. */
.siteSwitchModal .ssm-back .ssm-link {
	color: var(--wp--preset--color--yellow);
}

/* Lower-left non-interactive prompt. Same typography as .ssm-link
   so it reads as part of the same menu vocabulary, but no hover/
   focus affordance — a pointer-events:none guarantees it can't be
   clicked even if a future style introduces a cursor. */
.siteSwitchModal .ssm-hint {
	position: absolute;
	left: 30px;
	bottom: 30px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--aileron);
	font-size: 21px;
	font-weight: bold;
	text-transform: uppercase;
	pointer-events: none;
	user-select: none;
}

/* Branding zone — invert the colour scheme. siteSwitchModal.js
   adds `body.branding` when location.pathname is under /branding/
   (functions.php only adds it from a site-wide option, which is
   wrong on a single-install setup where /branding/ is just a path).
   White surface, black labels, black "current-zone" rectangle
   using the matching black keyframe. ZURÜCK falls under the same
   `body.branding ... .ssm-link` rule and goes black too — yellow
   on a white surface reads poorly, and black still works as
   "secondary action" because it's the only label without the
   rectangle. The existing
   `.siteSwitchModal.brandingSiteSwitch .siteSwitchModalClose svg`
   rule (further down in this file) already inverts the X icon to
   black, but it only fires if that legacy class is present in the
   page content — `body.branding` is the reliable trigger, so we
   add an equivalent rule here. */
body.branding .siteSwitchModal {
	background: var(--wp--preset--color--white);
}
body.branding .siteSwitchModal .ssm-link {
	color: var(--wp--preset--color--black);
}
body.branding .siteSwitchModal .ssm-current .ssm-label {
	border-color: var(--wp--preset--color--black);
	animation: gsm-current-menu-rect-black 0.5s ease-in-out 0.1s both;
}
body.branding .siteSwitchModal .siteSwitchModalClose svg {
	color: var(--wp--preset--color--black);
}
body.branding .siteSwitchModal .ssm-hint {
	color: var(--wp--preset--color--black);
}

.siteSwitchModal .wp-block-buttons.wp-block-buttons-is-layout-flex {
	gap:0;
	margin:0 0 0 100px !important;
}

.siteSwitchModal .wp-block-button {
	width:100%;
	text-align:right;	
}

.siteSwitchModal .wp-block-button a {
	padding: 140px 80px 75px 0;
	text-align:right;
	/*max-width:340px;*/
}

/*
.siteSwitchModal .wp-block-button.smGoBlock {
	background:var(--wp--preset--color--white);
}*/

@media (max-width: 1049px) {
	.siteSwitch {
		top:0;
		right:25%;
		width:104px;
		margin-top:-10px;
		bottom:auto;
	}
	
	.siteSwitch.pos2 .wp-block-group:nth-child(2) {
		padding:0 3px 7px;
	}
	
	.siteSwitch .wp-block-group {
		height:0;
	}
	
	.siteSwitch .wp-block-image a {
		padding:0 2px;
	}
	
	
	.siteSwitchModal.shown {
		display:block;
	}
	
	.langSwitcher.lsDesktop {
		display:none;
	}
	
	header .alignFlexEnd {
		align-self:center;
	}
}

.siteSwitchModal .siteSwitchModalClose {
	position:absolute;
	top:45px;
	right:5px;
}

.siteSwitchModal .siteSwitchModalClose svg {
	width:42px;
	height:42px;
	color:var(--wp--preset--color--yellow);
}

.siteSwitchModal.brandingSiteSwitch .siteSwitchModalClose svg {
	color:var(--wp--preset--color--black);
}

.siteSwitchModal .wp-block-group.btnImg {
	position:absolute;
	top:0;
	right:0;
	pointer-events:none;
}

.siteSwitchModal .wp-block-group.btnImg .wp-block-group:nth-child(1) {
	position: absolute;
    top: 140px;
    right: 80px;
    width: 127px;
}

/*
.siteSwitchModal .wp-block-group.btnImg .wp-block-image:nth-child(1) img {
	background:#fff;
}*/

.siteSwitchModal .wp-block-group.btnImg .wp-block-group:nth-child(2) {
	position: absolute;
    right: 80px;
    top: 470px;
    width: 127px;
}

.flexBlock {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:60px;
}

.flexBlock .wp-block-image {
	flex-basis:25%;
}

.wp-block-image.fullSizeImage, .wp-block-cover.fullSizeImage {
	max-width:none;
}

.wp-block-image.fullSizeImage img, .wp-block-cover.fullSizeImage img {
	width:100%;
}

.wp-block-heading em {
	font-style: normal;
	color:var(--wp--preset--color--yellow);
}

@media (max-width:781px){
	.hide_below_desktop {
		display:none;
	}
}

@media (min-width:781px){
	.hide_above_desktop {
		display:none;
	}
}

footer .footer_design_block {
	position:absolute;
	left:0;
}

@media (max-width:1375px){
	footer > .wp-block-group {
		padding-left:130px !important;
		padding-right:15px !important;
	}
	
	footer .wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
		max-width:calc(var(--wp--style--global--content-size) - 130px)
	}
}

@media (max-width:781px){
	footer .foooter_column_element {
		flex-direction: row-reverse; /* Lays out items from right to left */
		flex-wrap: wrap-reverse !important;
	}
	
	footer .foooter_column_element .wp-block-column:last-child {
		margin-bottom:30px;
	}
	
	footer > .wp-block-group {
		padding-left:15px !important;
		padding-right:15px !important;
	}
	
	footer p.has-x-large-font-size {
		font-size: var(--wp--preset--font-size--medium) !important;
		text-align:left;
	}
	
	footer .footer_design_block { 
		display:none;
	}
	
	footer .foooter_column_element .wp-block-column:last-child p {
		font-size: var(--wp--preset--font-size--medium) !important;
		text-align:left;
	}
	
	footer .footer_design_block + .wp-block-group {
		margin-top:70px;
	}
	
	.noPaddingTopOnMobile {
		padding-top:5px !important;
	}
	
	.inlineParagraphs p:first-child {
		display:block;
	}
}

.outerWrap.alignfull.cauroselwrap {
	width:140%;
	margin-left:-20%;
}

.wp-block-cb-carousel-v2 .cb-pagination.swiper-pagination .swiper-pagination-bullet.cb-pagination-bullet {
	width:28px;
	height:28px;
	border-radius:0;
	border:none;
	background:var(--wp--preset--color--white);
	opacity:1;
	margin:0 15px 0 0;
}

.wp-block-cb-carousel-v2 .cb-pagination .cb-pagination-bullet:last-child {
	margin-right:0;
}

.wp-block-cb-carousel-v2 .cb-pagination .cb-pagination-bullet.swiper-pagination-bullet.swiper-pagination-bullet-active {
	background:var(--wp--preset--color--yellow);
}

.wp-block-cb-carousel-v2[data-cb-pagination=true] .swiper-horizontal {
	margin-bottom:90px;
}

.wp-block-cb-carousel-v2 .cb-pagination.swiper-pagination-horizontal {
	bottom:0;
	margin-bottom:-88px;
}

h5.wp-block-heading {
	font-style:normal !important;
	font-family:var(--wp--preset--font-family--aileron-bold);
	font-size:var(--wp--preset--font-size--medium);
	letter-spacing: -0.1px;
	margin-top:35px;
	margin-bottom:8px;
}

.inlineParagraphs p {
	display:inline;
}

.Appear {

opacity: 0.0;
    transform: translate(0px, 50px);
}

.AppearTransition {

transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out;
}

.Appeared {

opacity: 1;
    transform: translate(0, 0) rotateX(0deg);
}

.previewBlock {
	width:auto;
	border:1px solid #000;
	background:var(--wp--preset--color--grey);
	color:var(--wp--preset--color--black);
	margin:20px 0;
	padding:40px;
}

.alignFlexEnd {
	align-self:flex-end;
}

.genericPHblock  {
	width:100%;
	padding:10px;
	margin:10px;
	background:#ccc;
	color:var(--wp--preset--color--black);
	font-family:var(--wp--preset--font-family--aileron);
}

:root :where(.wp-block-button .wp-block-button__link) {
	letter-spacing: -0.32px;
}

/* Buttons inside the topmost cover (the hero/header) are decorative
   scroll cues — no navigation, so kill the link pointer. The
   `is-topmost-cover` class is added at runtime by script.js to the
   first .wp-block-cover in the main content. */
.is-topmost-cover .wp-block-button__link {
	cursor: default;
}

.alignContentBottom {
	position:relative;
}

.alignContentBottom figure {
	position:absolute;
	bottom:0;
}

.header-columns .wp-block-column:first-child {
	display:flex;
	flex-direction:column;
}

.header-columns .wp-block-column:first-child .wp-block-group:last-child {
	margin-top:auto;
}

.header-columns .wp-block-column:last-child img {
	max-width:none;
}

.wp-block-cover.alignItemsTop {
	align-items:flex-start;
}

/* native header styles */

header nav .wp-block-navigation__container {
	margin: 80px 15px 0;
	align-items: baseline;
	width: calc(100% - 30px);
}

header nav .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
	font-size:var(--wp--preset--font-size--medium);
	text-transform:uppercase;
	font-family:var(--wp--preset--font-family--aileron);
	font-size:22px;
	line-height:1.4;
}

header nav .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:focus {
	outline:none;
}

header nav .wp-block-navigation .wp-block-navigation-item {
	padding:0 6px;
	border:2px solid transparent;
}

@keyframes gsm-current-menu-rect-white {
	from { border-color: transparent; }
	to   { border-color: var(--wp--preset--color--white); }
}

@keyframes gsm-current-menu-rect-black {
	from { border-color: transparent; }
	to   { border-color: var(--wp--preset--color--black); }
}

header nav .wp-block-navigation .wp-block-navigation-item.current-menu-item {
	border-color:var(--wp--preset--color--white);
	animation: gsm-current-menu-rect-white 0.5s ease-in-out 0.1s both;
}

header nav .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
header nav .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content:hover {
	text-decoration:none;
}

/* Hover underline for nav items — exact match for the bottom edge
   of the .current-menu-item rectangle (2 px solid, white in dark
   theme / black in phs_color1). The text-decoration:underline that
   the WP nav block applies on link hover is suppressed so the only
   indicator is the bottom-border segment. */
header nav .wp-block-navigation .wp-block-navigation-item__content:hover,
header nav .wp-block-navigation .wp-block-navigation-item__content:focus {
	text-decoration: none;
}

/* Top-level items already carry `border: 2px solid transparent`
   (see rule above) which the .current-menu-item rectangle is
   built on. On hover for any non-current item, draw a 2 px line
   at the same y-position and width as the rectangle's bottom
   edge — but as a separate ::after pseudo-element rather than by
   colouring the LI's border-bottom-color. Reason: a coloured
   border-bottom inside a 4-side transparent border gets 45°
   miters where it meets the (transparent) left/right borders,
   which render as visible diagonal cut-offs at the line ends.
   A pseudo-element has no neighbouring borders, so its ends are
   square. Negative left/right/bottom of -2px aligns the pseudo
   with the LI's border-box (= rectangle's exact outline). */
header nav .wp-block-navigation .wp-block-navigation-item {
	position: relative;
}
header nav .wp-block-navigation .wp-block-navigation-item::after {
	content: '';
	position: absolute;
	left: -2px;
	right: -2px;
	bottom: -2px;
	height: 2px;
	background: transparent;
	transition: background-color 0.15s ease-in-out;
	pointer-events: none;
}
/* Hover-state underlines — desktop ONLY (≥ 1050 px, the same
   threshold the mobile responsive container CSS uses). Below this
   width we ARE the mobile layout regardless of pointer type, and
   :hover on touch devices "sticks" after a tap — leaving a white
   line on the last-tapped item until you tap elsewhere. Gating
   the hover rules to ≥ 1050 px makes the mobile menu purely
   tap-driven with no hover decoration at all. */
@media (min-width: 1050px) {
	header nav .wp-block-navigation .wp-block-navigation-item:hover:not(.current-menu-item)::after {
		background-color: var(--wp--preset--color--white);
	}
	body.phs_color1 header nav .wp-block-navigation .wp-block-navigation-item:hover:not(.current-menu-item)::after {
		background-color: var(--wp--preset--color--black);
	}
	header nav .wp-block-navigation__submenu-container .wp-block-navigation-item.wp-block-navigation-link:hover {
		border-bottom-color: var(--wp--preset--color--white);
	}
	body.phs_color1 header nav .wp-block-navigation__submenu-container .wp-block-navigation-item.wp-block-navigation-link:hover {
		border-bottom-color: var(--wp--preset--color--black);
	}
}

/* The transparent baseline border-bottom and its transition stay
   outside the hover media query — the transition is harmless on
   touch (nothing tries to flip the colour there) and the baseline
   border keeps height stable on hover-capable devices, which is
   what we wanted. */
header nav .wp-block-navigation__submenu-container .wp-block-navigation-item.wp-block-navigation-link {
	border-bottom: 2px solid transparent;
	transition: border-bottom-color 0.15s ease-in-out;
}

/* Suppress focus / focus-visible / active outline + box-shadow on
   the chevron toggle. The button is a real <button>, so without
   this the browser draws its default focus ring on click, which on
   the dark mobile menu reads as a 2 px white halo around the arrow
   that lingers until focus moves elsewhere. */
header nav .wp-block-navigation-submenu__toggle:focus,
header nav .wp-block-navigation-submenu__toggle:focus-visible,
header nav .wp-block-navigation-submenu__toggle:focus-within,
header nav .wp-block-navigation-submenu__toggle:active,
header nav .wp-block-navigation__submenu-icon:focus,
header nav .wp-block-navigation__submenu-icon:focus-visible,
header nav .wp-block-navigation__submenu-icon:focus-within,
header nav .wp-block-navigation__submenu-icon:active {
	outline: none;
	box-shadow: none;
}

/* Suppress every browser focus / focus-visible / active outline AND
   box-shadow on nav items and their links. The existing rule above
   only kills `:focus` on `__content`, but modern browsers also draw
   a `:focus-visible` ring (briefly visible on mousedown in some
   browsers) which on a dark header renders as a 2 px white outline
   that's visually indistinguishable from the .current-menu-item
   rectangle — very confusing during a click. Keyboard accessibility
   is preserved through the hover/focus-within underline above
   (white bottom-line that matches the rectangle's bottom edge). */
header nav .wp-block-navigation .wp-block-navigation-item__content:focus,
header nav .wp-block-navigation .wp-block-navigation-item__content:focus-visible,
header nav .wp-block-navigation .wp-block-navigation-item__content:active,
header nav .wp-block-navigation .wp-block-navigation-item:focus,
header nav .wp-block-navigation .wp-block-navigation-item:focus-visible,
header nav .wp-block-navigation .wp-block-navigation-item:focus-within,
header nav .wp-block-navigation .wp-block-navigation-item:active {
	outline: none;
	box-shadow: none;
}

header nav .wp-block-navigation__responsive-container-close {
	right: 4px;
    top: 46px;
}

header nav .wp-block-navigation__responsive-container-close svg {
	width:42px;
	height:42px;
	color:var(--wp--preset--color--yellow);
}

header nav .wp-block-navigation__responsive-container-close svg path {
	color:var(--wp--preset--color--yellow);
}

header .menuBranding nav .wp-block-navigation__responsive-container-close svg path {
	color:var(--wp--preset--color--black);
}

html.has-modal-open header .wp-block-site-logo, html.has-modal-open header .wp-block-image.custom-logo {
	z-index:999999;
}

header .wp-block-site-logo .custom-logo, header .wp-block-image.custom-logo img {
	width:60px;
	height:auto;
}

header nav .wp-block-navigation__responsive-container-open svg {
	width:43px;
	height:43px;
	margin-top:15px;
	margin-right:5px;
}

header nav .wp-block-navigation__responsive-container-open:focus {
	outline:none;
}

header nav .wp-block-navigation__responsive-container-open svg path {
	color:var(--wp--preset--color--yellow);
}

header .menuBranding  nav .wp-block-navigation__responsive-container-open svg path {
	color:var(--wp--preset--color--black);
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background:var(--wp--preset--color--black);
}

.wp-block-navigation__submenu-container li a.wp-block-navigation-item__content {
	white-space:nowrap;
}

body header .wp-block-navigation .has-child .wp-block-navigation-item__content:has(+ .wp-block-navigation-submenu__toggle[aria-expanded=true]) {
	z-index:10;
}

body header .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
	left:0;
	right:auto;
	padding-top:45px;
	margin-top:-29px;
	margin-left:-2px;
	padding-left:2px;
	z-index:5;
	border:none;
}

/* Desktop submenu fade — fade in on hover / focus, fade out on blur.
   Scoped to ≥ 1050 px so the mobile responsive menu keeps its own behaviour. */
@media (min-width: 1050px) {
	body header .wp-block-navigation .has-child .wp-block-navigation__submenu-container.wp-block-navigation-submenu {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s;
	}

body header .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity 0.5s ease-in-out, visibility 0s linear 0s;
	}

/* When pagefade.js restores the hovered submenu on load, it adds
	   `no-fade` so the panel appears instantly. `!important` beats the
	   more specific [aria-expanded=true] selector above. The class is
	   removed on the next frame so subsequent open/close still fade. */
	body header .wp-block-navigation .has-child .wp-block-navigation__submenu-container.wp-block-navigation-submenu.no-fade {
		transition: none !important;
	}

/* While submenuFade.js is driving the fade, GSAP controls
	   opacity + visibility inline (via autoAlpha). The stylesheet
	   must step aside for two reasons:

1. WP-core's default rule collapses the submenu container to
	      0 × 0 with overflow:hidden whenever [aria-expanded=true] /
	      :hover / :focus-within aren't matched — which would
	      physically hide the panel during GSAP's fade-out no matter
	      what we do with opacity.
	   2. The theme's expanded positioning (left / padding-top /
	      margin-top …) is scoped to [aria-expanded=true], so the
	      layout would jump at the moment the toggle flips back to
	      false, mid-fade.

Pin the expanded geometry AND positioning always, and let
	   GSAP's inline opacity+visibility govern what's actually
	   visible. */
	body.has-submenu-gsap header .wp-block-navigation .has-child .wp-block-navigation__submenu-container.wp-block-navigation-submenu.wp-block-navigation-submenu {
		opacity: unset;
		visibility: unset;
		pointer-events: unset;
		transition: none;
		height: auto;
		width: auto;
		min-width: 200px;
		overflow: visible;
		left: 0;
		right: auto;
		margin-left: -2px;
		padding-left: 2px;
		z-index: 5;
		border: none;
		/* Extend the submenu element UPWARD so it covers the top-
		   level item's area as well — this single element now
		   renders BOTH the folder-tab (behind the top item) AND the
		   panel (below it). submenuFade.js measures the item and
		   publishes --li-width / --li-height; the defaults keep the
		   original 45 / −29 geometry until JS kicks in. */
		margin-top: calc(-1 * var(--li-height, 29px));
		padding-top: calc(16px + var(--li-height, 29px));
		/* No own background — the two rectangles are drawn by the
		   ::before and ::after pseudos below so they can have their
		   own border-radius on specific corners. The theme's inherited
		   `filter: drop-shadow(...)` still applies to the combined
		   rendered content, so the silhouette gets one unified shadow. */
		background-image: none;
	}

/* Tab rectangle — same width as the hovered top item (not wider),
	   reaches 6 px past its bottom edge to meet the panel exactly.
	   Rounded on its top two corners only; the bottom two corners are
	   INSIDE the combined folder silhouette (covered by the panel
	   below) so they stay sharp. */
	body.has-submenu-gsap header .wp-block-navigation .has-child .wp-block-navigation__submenu-container.wp-block-navigation-submenu::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: var(--li-width, 100%);
		height: calc(var(--li-height, 29px) + 6px);
		background: linear-gradient(to bottom right, #262626, #202020);
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		z-index: -1;
	}

/* Panel rectangle — full submenu width, from just below the tab
	   downward. Rounded on top-right, bottom-left and bottom-right;
	   top-left stays sharp so it tucks seamlessly under the tab's
	   sharp bottom-left corner. Dropped to z-index: -2 so the
	   .gsm-submenu-dots canvas (z-index: -1) sits between this
	   solid fill and the menu items on top. */
	body.has-submenu-gsap header .wp-block-navigation .has-child .wp-block-navigation__submenu-container.wp-block-navigation-submenu::after {
		content: '';
		position: absolute;
		top: calc(var(--li-height, 29px) + 6px);
		left: 0;
		width: 100%;
		height: calc(100% - var(--li-height, 29px) - 6px);
		background: linear-gradient(to bottom right, #262626, #16161655);

border-top-right-radius: 4px;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		z-index: -2;
	}

/* Subtle dot-cloud backdrop inside the submenu panel — same look
	   as the embeddable-content dotCloudBW (Fibonacci sphere of
	   points projected + slowly rotated) but drawn with a very low
	   alpha on top of the #262626 panel fill, so the dots read as
	   a faint shimmering texture and never compete with the menu
	   labels. Covers only the panel region; the tab stays plain.
	   JS creates the <canvas> and starts/stops its rAF loop with
	   the submenu's open/close so there's no CPU cost while the
	   panel is invisible. */
	.gsm-submenu-dots {
		position: absolute;
		left: 0;
		top: calc(var(--li-height, 29px) + 6px);
		width: 100%;
		height: calc(100% - var(--li-height, 29px) - 6px);
		pointer-events: none;
		z-index: -1;
		border-top-right-radius: 4px;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		overflow: hidden;
	}

/* Stack every top-level nav item in front of any sibling's open
	   submenu panel. The submenu (z-index: 5) extends into the area
	   next to its trigger item, and its transparent top padding
	   overlaps the neighbouring items' hover targets — without this
	   rule those neighbours can't be hovered while a sibling's menu
	   is visible. */
	body.has-submenu-gsap header .wp-block-navigation__container > .wp-block-navigation-item {
		position: relative;
		z-index: 6;
	}

/* Pin the trigger link above its own submenu at ALL times (not
	   just when aria-expanded=true, as the existing :has(...) rule
	   does). The submenu now extends upward across the top-item
	   area — if the link ever fell below the submenu's z-index:5,
	   the tab rectangle would cover the link text during the fade-
	   out, flashing the title away before the panel disappears. */
	body.has-submenu-gsap header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		position: relative;
		z-index: 11;
	}
}

body header .wp-block-navigation .has-child .wp-block-navigation__submenu-container.wp-block-navigation-submenu .wp-block-navigation-item.wp-block-navigation-link {
	padding:0 4px; 
	margin-bottom:0;
}
body header .wp-block-navigation .has-child .wp-block-navigation__submenu-container.wp-block-navigation-submenu .wp-block-navigation-item__content {
	padding:0;
	line-height:1.2
}

body header .wp-block-navigation .has-child .wp-block-navigation__submenu-icon.wp-block-navigation-submenu__toggle {
	display:none;
}

body header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
	display:block;
    width: 27px;
	height: 27px;
    position: absolute;
    right: 0;
}

body header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon[aria-expanded=true] {
	transform:rotate(180deg);
}

body header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	margin-right:50px;
}

body header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation-submenu .wp-block-navigation-item__content {
	margin-right:0;
}

body header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu {
	width:100%;	
}

body header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	padding:0;
}

body header .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container.wp-block-navigation-submenu {
	position:relative;
	display:none;
}

body header .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
	/* Mobile expanded submenu (driven by aria-expanded — set by
	   either the user tapping the chevron or by
	   currentMenuMatch.js auto-expanding the ancestor of the
	   current page on first mobile-menu open). 30 px top margin
	   gives breathing room between the parent top-level item and
	   the first submenu item. No bottom-margin so the next
	   top-level item sits flush after the submenu closes — that's
	   what was reading as the "horizontal line at the end of the
	   submenu". */
	position: relative;
	display: block;
	padding: 0;
	margin: 30px 0 0;
	width: 100%;
}

body header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-weight:bold;
	font-size:21px;
}

body header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation-submenu .wp-block-navigation-item__content {
	font-weight:normal;
}

body header .wp-block-navigation .has-child .wp-block-navigation__submenu-container.wp-block-navigation-submenu .wp-block-navigation-item.wp-block-navigation-link {
	/* Earlier rule (~line 870) set `padding: 0 4px`; keep that
	   4 px on the left but bump right to 6 px so long labels
	   don't touch the panel border. */
	padding-right:6px;
	margin-bottom:10px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg path {
	color:var(--wp--preset--color--yellow);
}

@media (min-width: 1050px) {
	header .wp-block-site-logo .custom-logo, header .wp-block-image.custom-logo img {
		width:100px;
		height:auto;
	}
	
	.wp-block-navigation__responsive-container:not(.is-menu-open) ul.wp-block-navigation__container .langSwitcher {
		display:none;
	}
	
	header nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
		margin: 97px 140px 0 0;
	}
	
	.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container {
		align-items:flex-start;
	}
}

@media (min-width: 1400px) {
	header nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
		margin-right:125px;
	}
}

/* header settings */

.headerBgLayer {
	background:var(--wp--preset--color--black);
}

body.phs_color0:not(.phs_bg1) .headerBgLayer {
	background:var(--wp--preset--color--black);
}

body.phs_color1:not(.phs_bg1) .headerBgLayer {
	background:var(--wp--preset--color--white);
}

body.phs_bg1 .headerBgLayer {
	background-color:transparent;
	transition: background-color 0.15s ease-out;
}

header .wp-block-navigation__container li.wp-block-navigation-item, header .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
	color:var(--wp--preset--color--white);
}

/* Submenu items slightly darker than the stark white top-level
   labels, so they read as secondary while still legible on the
   #262626 folder panel. Same (0,2,2) specificity as the rule
   above — source-order wins it for submenu descendants. The
   light-theme rule below (body.phs_color1, 0,3,3) is more
   specific and keeps submenu items black in light mode. */
header .wp-block-navigation__submenu-container li.wp-block-navigation-item {
	color: #B0B0B0;
}

body.phs_color1 header .wp-block-navigation__container li.wp-block-navigation-item, body.phs_color1 header .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
	color:var(--wp--preset--color--black);
}

body.phs_color1 header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background:var(--wp--preset--color--white);
}

body.phs_content1 .wp-site-blocks .entry-content > div:first-child {
	padding-top:0;
}

header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background:linear-gradient(to bottom, transparent 35px, #262626 35px);
	filter:drop-shadow(0 0 14px rgba(0,0,0,1));
}

body.phs_color1 header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background:linear-gradient(to bottom, transparent 35px, var(--wp--preset--color--white) 35px);
	filter:drop-shadow(0 0 14px rgba(255,255,255,0.65));
}

/* Mobile menu: the LI spans the full width of the responsive panel,
   so showing the .current-menu-item rectangle on the LI would draw
   it from the far-left edge of the panel out past the chevron
   toggle on the right. Instead, suppress the LI-level rectangle in
   the open mobile menu and put it on the inline `__label` span
   inside the link, so it wraps exactly the menu word and nothing
   else. The span is already inline so its border hugs the text
   width naturally, regardless of whatever display value the link
   wrapper has. The same keyframe is reused so the rectangle still
   fades in identically. */
header nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item {
	animation: none;
	border-color: transparent;
}

/* The selector uses ` > .__content ` (direct child of the
   current LI) instead of a descendant combinator. Reason: every
   nav-item — including submenu items inside the current LI — has
   its own `__label` span. With a plain descendant selector, marking
   a top-level item current would inadvertently rectangle-wrap every
   submenu label too. Direct-child constrains it to the current
   item's own label. */
header nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label {
	border: 2px solid var(--wp--preset--color--white);
	padding: 0 6px;
	animation: gsm-current-menu-rect-white 0.5s ease-in-out 0.1s both;
}
body.phs_color1 header nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label {
	border-color: var(--wp--preset--color--black);
	animation: gsm-current-menu-rect-black 0.5s ease-in-out 0.1s both;
}

/* Mirror the desktop fade-out on navigation: when pagefade.js sets
   body.is-navigating-away, the rectangle on the label fades to
   transparent over 0.3 s alongside the page. */
body.is-navigating-away header nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label {
	animation: none;
	border-color: transparent;
	transition: border-color 0.3s ease-in-out;
}

body.phs_color1 header nav .wp-block-navigation .wp-block-navigation-item.current-menu-item {
	border-color:var(--wp--preset--color--black);
	animation: gsm-current-menu-rect-black 0.5s ease-in-out 0.5s both;
}

/* While a navigation is in flight (body.is-navigating-away set by
   pagefade.js on link click), fade the current-item indicator frame
   out alongside the page. Same 0.3s as the page fade-out. */
body.is-navigating-away header nav .wp-block-navigation .wp-block-navigation-item.current-menu-item {
	animation: none;
	border-color: transparent;
	transition: border-color 0.3s ease-in-out;
}

/* (Removed) — previously this rule transparent-ed the rectangle
   border for `.current-menu-item` inside the open mobile menu, so
   the active page had no visible indicator there. The rectangle is
   meant to read in mobile too, so the rule is gone. */

/* / */

body .fullSizeCover, body.phs_content0 .fullSizeCover {
	min-height:calc(100vh - var(--header-height) - 36px);
}

body.phs_content1 .fullSizeCover {
	min-height:100vh;
}

.wp-site-blocks .entry-content > div:first-child {
	padding-top:157px;
}

@media (max-width: 1050px) {

body .fullSizeCover, body.phs_content0 .fullSizeCover {
		min-height:calc(100vh - 157px);
	}
	
	.wp-site-blocks .entry-content > div:first-child {
		padding-top:106px;
	}
}

@media (min-width: 1050px) {
	body .fullSizeCover, body.phs_content0 .fullSizeCover {
		min-height:calc(100vh - var(--header-height) - 36px);
	}
}

/* custom block variation styles */

.is-style-gsm-li-medium-black {
	font-size:var(--wp--preset--font-size--medium);
	color:var(--wp--preset--color--black);
	font-family:var(--wp--preset--font-family--aileron);
	line-height:1.5;
	margin:20px 0;
	padding:0;
}

.is-style-gsm-p-medium-black {
	font-size:var(--wp--preset--font-size--medium);
	color:var(--wp--preset--color--black);
	font-family:var(--wp--preset--font-family--aileron);
	line-height:1.5;
	margin:20px 0;
	padding:0;
}

.is-style-gsm-p-medium-bold-white {
	font-size:var(--wp--preset--font-size--medium);
	color:var(--wp--preset--color--white);
	font-family:var(--wp--preset--font-family--aileron-black);
	line-height:1.4;
	margin:0;
	padding:0;
}

.is-style-gsm-p-large-italic-black {
	font-size:var(--wp--preset--font-size--large);
	color:var(--wp--preset--color--black);
	font-family:var(--wp--preset--font-family--aileron-thinitalic);
	line-height:1.4;
	margin:0 0 5px;
	padding:0;
	font-style:italic;
}

.is-style-gsm-p-large-italic-white {
	font-size:var(--wp--preset--font-size--x-large);
	color:var(--wp--preset--color--white);
	font-family:var(--wp--preset--font-family--aileron);
	line-height:1.4;
	margin:0 0 50px;
	padding:0;
	font-style:italic;
}

.is-style-gsm-p-medium-italic-white {
	font-size:var(--wp--preset--font-size--medium);
	color:var(--wp--preset--color--white);
	font-family:var(--wp--preset--font-family--aileron-thinitalic);
	line-height:1.4;
	margin:0 0 50px;
	padding:0;
	font-style:italic;
}

.is-style-gsm-p-xl-teal {
	font-size:var(--wp--preset--font-size--x-large);
	color:var(--wp--preset--color--teal);
	font-family:var(--wp--preset--font-family--aileron-black);
	line-height:1.4;
	margin:0;
	padding:0;
}

.is-style-gsm-p-cover {
	font-size:100px;
	color:var(--wp--preset--color--black);
	font-family:var(--wp--preset--font-family--aileron-bold);
	line-height:0.9;
	margin:0;
	padding:0;
}

.is-style-gsm-h-section-headline {
	font-size:var(--wp--preset--font-size--xx-large);
	color:var(--wp--preset--color--black);
	font-family:var(--wp--preset--font-family--aileron-thinitalic);
	line-height:1.1;
	margin:60px 0 70px;
	padding:0;
	font-style:italic;
}

.is-style-gsm-h-fluid-large-content {
	font-size:var(--wp--preset--font-size--gsm-fluid-large);
	color:var(--wp--preset--color--light-grey);
	font-family:var(--wp--preset--font-family--aileron-bold);
	line-height:1.1;
	margin:0;
	padding:0;
}

.is-style-gsm-h-large-semibold-black {
	font-size:var(--wp--preset--font-size--x-large);
	color:var(--wp--preset--color--black);
	font-family:var(--wp--preset--font-family--aileron-semibold);
	line-height:1.4;
	margin:0 0 30px;
	padding:0;
}

.is-style-gsm-h-content-yellow-bold {
	font-size:62px;
	color:var(--wp--preset--color--yellow);
	font-family:var(--wp--preset--font-family--aileron-bold);
	line-height:1.1;
	margin:0;
	padding:0;
}

.is-style-gsm-h-content-medium-bold {
	font-size:var(--wp--preset--font-size--medium);
	color:var(--wp--preset--color--black);
	font-family:var(--wp--preset--font-family--aileron-bold);
	line-height:1.4;
	margin:0;
	padding:0;
}

.is-style-gsm-h-sub-section-headline {
	font-size:75px;
	color:var(--wp--preset--color--black);
	font-family:var(--wp--preset--font-family--aileron-thinitalic);
	line-height:1.2;
	margin:0;
	padding:0;
	font-style:italic;
}

.is-style-gsm-h-cover {
	font-size:106px;
	color:var(--wp--preset--color--black);
	font-family:var(--wp--preset--font-family--aileron-bold);
	line-height:1.1;
	margin:0 0 250px;
	padding:0;
}

.is-style-gsm-h-branding-x-large {
	font-size:var(--wp--preset--font-size--gsm-b-fluid-x-large);
	color:var(--wp--preset--color--black);
	font-family:var(--wp--preset--font-family--aileron-bold);
	line-height:1.1;
	margin:0;
	padding:0;
	
}
 
.is-style-gsm-h-int-project-title {

--font-min: 2.5;      /* minimum font size in rem */
	--font-max: 3.5;        /* maximum font size in rem */
	--view-min: 400;      /* viewport min in px */
	--view-max: 1050;     /* viewport max in px */

--slope: calc((var(--font-max) - var(--font-min)) * 16 / (var(--view-max) - var(--view-min)));
	--intercept: calc(var(--font-min) - var(--slope) * var(--view-min) / 16);