/* Global responsive-image base rule.
   The theme never had one: a classic-editor post image carries fixed
   `width`/`height` HTML attributes (e.g. width="1024"), and with nothing
   capping it in CSS the browser honours that literal pixel width on every
   screen, overflowing the page sideways on anything narrower. `height: auto`
   keeps the upload's own aspect ratio once the width is capped, rather than
   the browser stretching it to the fixed `height` attribute.
   Every t4n-* component image already has its own class-based width/height
   (a stronger selector than this bare tag), so none of them are affected --
   this only reaches plain <img> tags with no sizing rule of their own, which
   is exactly the case that was overflowing. */
img {
	max-width: 100%;
	height: auto;
}

/* A captioned image (the [caption] shortcode, still reachable from the
   classic editor) is wrapped by WordPress core itself in
   `<div class="wp-caption" style="width: NNpx">` -- a fixed pixel width
   written as an INLINE style on the wrapper, not the <img>. Capping the
   <img> alone (above) does nothing there, since 100% of an oversized parent
   is still oversized; max-width here is a different property than the
   inline `width`, so this needs no !important to win. */
.wp-caption {
	max-width: 100%;
}

/* Magnific Popup CSS */

.grecaptcha-badge {
	visibility: hidden;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 989999;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: rgba(0,0,0,0.75);
  }

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: left;
  width: 100%;
  margin: 0 auto;
  text-align: left;
  z-index: 989999; }

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }

.mfp-ajax-cur {
  cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
  cursor: auto; }

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.mfp-loading.mfp-figure {
  display: none; }

.mfp-hide {
  display: none !important; }

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044; }
  .mfp-preloader a {
	color: #CCC; }
	.mfp-preloader a:hover {
	  color: #FFF; }

.mfp-s-ready .mfp-preloader {
  display: none; }

.mfp-s-error .mfp-content {
  display: none; }


button::-moz-focus-inner {
  padding: 0;
  border: 0; }


  .mfp-close:hover,
  .mfp-close:focus {
	opacity: 1;
	filter: alpha(opacity=100); }
  .mfp-close:active {
	top: 1px; }

.mfp-close-btn-in .mfp-close {
  color: #333;
  position: absolute;
  top: 20px;
  right: 20px;
  }

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; }

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap; }

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  filter: alpha(opacity=65);
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent; }
  .mfp-arrow:active {
	margin-top: -54px; }
  .mfp-arrow:hover,
  .mfp-arrow:focus {
	opacity: 1;
	filter: alpha(opacity=100); }
  .mfp-arrow:before,
  .mfp-arrow:after,
  .mfp-arrow .mfp-b,
  .mfp-arrow .mfp-a {
	content: '';
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	left: 0;
	top: 0;
	margin-top: 35px;
	margin-left: 35px;
	border: medium inset transparent; }
  .mfp-arrow:after,
  .mfp-arrow .mfp-a {
	border-top-width: 13px;
	border-bottom-width: 13px;
	top: 8px; }
  .mfp-arrow:before,
  .mfp-arrow .mfp-b {
	border-top-width: 21px;
	border-bottom-width: 21px;
	opacity: 0.7; }

.mfp-arrow-left {
  left: 0; }
  .mfp-arrow-left:after,
  .mfp-arrow-left .mfp-a {
	border-right: 17px solid #FFF;
	margin-left: 31px; }
  .mfp-arrow-left:before,
  .mfp-arrow-left .mfp-b {
	margin-left: 25px;
	border-right: 27px solid #3F3F3F; }

.mfp-arrow-right {
  right: 0; }
  .mfp-arrow-right:after,
  .mfp-arrow-right .mfp-a {
	border-left: 17px solid #FFF;
	margin-left: 39px; }
  .mfp-arrow-right:before,
  .mfp-arrow-right .mfp-b {
	border-left: 27px solid #3F3F3F; }

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px; }
  .mfp-iframe-holder .mfp-content {
	line-height: 0;
	width: 100%;
	max-width: 900px; }
  .mfp-iframe-holder .mfp-close {
	top: -40px; }

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%; }
  .mfp-iframe-scaler iframe {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
	background: #000; }

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure {
  line-height: 0; }
  .mfp-figure:after {
	content: '';
	position: absolute;
	left: 0;
	top: 40px;
	bottom: 40px;
	display: block;
	right: 0;
	width: auto;
	height: auto;
	z-index: -1;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
	background: #444; }
  .mfp-figure small {
	color: #BDBDBD;
	display: block;
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	line-height: var(--t4n-caption-m-lh, 1.3); }
  .mfp-figure figure {
	margin: 0; }

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto; }

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px; }

.mfp-image-holder .mfp-content {
  max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
	   * Remove all paddings around the image on small screen
	   */
  .mfp-img-mobile .mfp-image-holder {
	padding-left: 0;
	padding-right: 0; }
  .mfp-img-mobile img.mfp-img {
	padding: 0; }
  .mfp-img-mobile .mfp-figure:after {
	top: 0;
	bottom: 0; }
  .mfp-img-mobile .mfp-figure small {
	display: inline;
	margin-left: 5px; }
  .mfp-img-mobile .mfp-bottom-bar {
	background: rgba(0, 0, 0, 0.6);
	bottom: 0;
	margin: 0;
	top: auto;
	padding: 3px 5px;
	position: fixed;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; }
	.mfp-img-mobile .mfp-bottom-bar:empty {
	  padding: 0; }
  .mfp-img-mobile .mfp-counter {
	right: 5px;
	top: 3px; }
  .mfp-img-mobile .mfp-close {
	top: 0;
	right: 0;
	width: 35px;
	height: 35px;
	line-height: 35px;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	text-align: center;
	padding: 0; } }

@media all and (max-width: 900px) {
  .mfp-arrow {
	-webkit-transform: scale(0.75);
	transform: scale(0.75); }
  .mfp-arrow-left {
	-webkit-transform-origin: 0;
	transform-origin: 0; }
  .mfp-arrow-right {
	-webkit-transform-origin: 100%;
	transform-origin: 100%; }
  .mfp-container {
	padding-left: 0px;
	padding-right: 0px; } }

.mfp-ie7 .mfp-img {
  padding: 0; }

.mfp-ie7 .mfp-bottom-bar {
  width: 600px;
  left: 50%;
  margin-left: -300px;
  margin-top: 5px;
  padding-bottom: 5px; }

.mfp-ie7 .mfp-container {
  padding: 0; }

.mfp-ie7 .mfp-content {
  padding-top: 44px; }

.mfp-ie7 .mfp-close {
  top: 0;
  right: 0;
  padding-top: 0; }


.sl-wrapper .sl-close,.sl-wrapper .sl-navigation button{height:44px;line-height:44px;font-family:Arial,Baskerville,monospace}.sl-wrapper .sl-close:focus,.sl-wrapper .sl-navigation button:focus{outline:0}body.hidden-scroll{overflow:hidden}.sl-overlay{position:fixed;left:0;right:0;top:0;bottom:0;background:#fff;opacity:.98;display:none;z-index:1035}.sl-wrapper .sl-close,.sl-wrapper .sl-counter{top:30px;display:none;color:#000;position:fixed}.sl-wrapper{z-index:1040}.sl-wrapper button{border:0;background:0 0;font-size:28px;padding:0;cursor:pointer}.sl-wrapper button:hover{opacity:.7}.sl-wrapper .sl-close{right:30px;z-index:10060;margin-top:-14px;margin-right:-14px;width:44px;font-size:3rem}.sl-wrapper .sl-counter{left:30px;z-index:1060;font-size:1rem}.sl-wrapper .sl-navigation{width:100%;display:none}.sl-wrapper .sl-navigation button{position:fixed;top:50%;margin-top:-22px;width:22px;text-align:center;display:block;z-index:10060;color:#000}.sl-wrapper .sl-navigation button.sl-next{right:5px;font-size:2rem}.sl-wrapper .sl-navigation button.sl-prev{left:5px;font-size:2rem}@media (min-width:35.5em){.sl-wrapper .sl-navigation button{width:44px}.sl-wrapper .sl-navigation button.sl-next{right:10px;font-size:3rem}.sl-wrapper .sl-navigation button.sl-prev{left:10px;font-size:3rem}.sl-wrapper .sl-image img{border:0}}@media (min-width:50em){.sl-wrapper .sl-navigation button{width:44px}.sl-wrapper .sl-navigation button.sl-next{right:20px;font-size:3rem}.sl-wrapper .sl-navigation button.sl-prev{left:20px;font-size:3rem}.sl-wrapper .sl-image img{border:0}}.sl-wrapper .sl-image{position:fixed;-ms-touch-action:none;touch-action:none;z-index:10000}.sl-wrapper .sl-image img{margin:0;padding:0;display:block;border:0;width:100%;height:auto}.sl-wrapper .sl-image iframe{background:#000;border:0}@media (min-width:35.5em){.sl-wrapper .sl-image iframe{border:0}}@media (min-width:50em){.sl-wrapper .sl-image iframe{border:0}}.sl-wrapper .sl-image .sl-caption{display:none;padding:10px;color:#fff;background:rgba(0,0,0,.8);font-size:1rem;position:absolute;bottom:0;left:0;right:0}.sl-wrapper .sl-image .sl-caption.pos-top{bottom:auto;top:0}.sl-wrapper .sl-image .sl-caption.pos-outside{bottom:auto}.sl-wrapper .sl-image .sl-download{display:none;position:absolute;bottom:5px;right:5px;color:#000;z-index:1060}.sl-spinner{display:none;border:5px solid #333;border-radius:40px;height:40px;left:50%;margin:-20px 0 0 -20px;opacity:0;position:fixed;top:50%;width:40px;z-index:1007;-webkit-animation:pulsate 1s ease-out infinite;-moz-animation:pulsate 1s ease-out infinite;-ms-animation:pulsate 1s ease-out infinite;-o-animation:pulsate 1s ease-out infinite;animation:pulsate 1s ease-out infinite}.sl-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}.sl-transition{transition:-moz-transform ease .2s;transition:-ms-transform ease .2s;transition:-o-transform ease .2s;transition:-webkit-transform ease .2s;transition:transform ease .2s}@-webkit-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-moz-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-o-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-ms-keyframes pulsate{0%,100%{opacity:0}0%{transform:scale(.1)}50%{opacity:1}100%{transform:scale(1.2)}}


/* fonts */

.cc-revoke, .cc-window {
	font-family:"Theinhardt-Regular";
}
.cc-btn {
	font-family:"Theinhardt-Regular";
}
/* Cookie banner "Ok": the palette in script-gl-26.js sets #9a998f on #383839
   (4.09:1). Use the theme's .greyText grey instead (7.2:1). */
.cc-window .cc-btn.cc-dismiss {
	color: #CECAC5 !important;
}

@font-face {
	font-family:"Theinhardt-Regular";
	src:url("..//fonts/Theinhardt-Regular.woff2") format("woff2"),url("..//fonts/Theinhardt-Regular.woff") format("woff"),url("..//fonts/Theinhardt-Regular.otf") format("opentype");
	font-style:normal;font-weight:400;
}


@font-face {
	font-family:"Theinhardt-Bold";
	src:url("..//fonts/Theinhardt-Bold.woff2") format("woff2"),url("..//fonts/Theinhardt-Bold.woff") format("woff"),url("..//fonts/Theinhardt-Bold.otf") format("opentype");
	font-style:normal;font-weight:400;
}


#wpadminbar a {
	color: white !important;
}


.Dark {
	background: #2C2E2F !important; color: #ffffff !important;
}
	.lightGray {
		background: #E9E7E5 !important;
	}
	.Pink {
		background: #E5D6D4 !important;
	}
	.Green {
		background: #E6E8E2 !important;
	}

		.White {
		background: #FFFFFF !important;
	}

.whiteText {
	color: white !important;
}
/* Legacy blocks (e.g. Saudi Arabia) where the editor picked white text on a
   light background: #a6dbe0 gave 1.5:1 and #6ebb45 2.4:1. Use the dark ink
   there (9:1 and 5.8:1). Only text elements, so filled buttons keep theirs. */
.whiteText[style*="#a6dbe0" i],
.whiteText[style*="#6ebb45" i],
.whiteText[style*="#a6dbe0" i] :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, b, i, div),
.whiteText[style*="#6ebb45" i] :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, b, i, div) {
	color: #142e51 !important;
}
.whiteText[style*="#a6dbe0" i] a:not([class*="btn"]),
.whiteText[style*="#6ebb45" i] a:not([class*="btn"]) {
	color: #142e51 !important;
	text-decoration: underline;
}
.greyText {
	color: #CECAC5 !important;
}
.redText, .redText a,  a.redText:link  {
	color: #F26662 !important;
}

.vh100 {
	height: 100vh !important;
}

.vh75 {
	height: 75vh !important;
}
.vh80 {
	height: 80vh !important;
}

.vh60 {
	height: 60vh !important;
}

.vh60min {
	min-height: 60vh !important;
}

.vh50 {
	height:	50vh !important;
}

.vh40 {
	height:	40vh !important;
}

.vh30 {
	height:	30vh !important;
}

.vh33 {
	height:	33.3vh !important;
}
.vh25 {
	height: 25vh !important;
}

/* webfonts */


* {
  -webkit-border-radius: 0 !important;
	 -moz-border-radius: 0 !important;
		  border-radius: 0 !important;
}


.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}



.video {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;

		}

	.video iframe {
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 100%;
		overflow: hidden;
		}


		#player {

			max-width: 100% !important;
			overflow: hidden;
		}
/* loading option */
.animsition-loading,
.animsition-loading:after {
  width: 32px;
  height: 32px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -16px;
  margin-left: -16px;
  border-radius: 50%;
  z-index: 100;
}

.animsition-loading {
  background-color: transparent;
border: 0 !important;
  -webkit-transform: translateZ(0);
		  transform: translateZ(0);
  -webkit-animation-iteration-count:infinite;
		  animation-iteration-count:infinite;
  -webkit-animation-timing-function: linear;
		  animation-timing-function: linear;
  -webkit-animation-duration: .8s;
		  animation-duration: .8s;
  -webkit-animation-name: animsition-loading;
		  animation-name: animsition-loading;
}

@-webkit-keyframes animsition-loading {
  0% {
	-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
  }
  100% {
	-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
  }
}

@keyframes animsition-loading {
  0% {
	-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
  }
  100% {
	-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
  }
}


.boxOver > .image-overlay {

		transition: all 0.5s ease-in-out;
		cursor: pointer !important;
	}

	.boxOver:hover > .image-overlay {

		opacity:0.8;
				transition: all 0.5s ease-in-out;
				cursor: pointer  !important;

}


	.boxOver:hover  a.whiteOutlineButton {


		background: white !important;
		padding: 10px 10px 8px 10px;
		border: 1px solid white;
		color: #000 !important;
}

	.boxOver:hover  a.redButton {


		background: transparent !important;
		padding: 10px 0px 8px 0px;
		border: 0px solid white !important;
		color: #464646 !important;
}





* {

	transition: ease-in-out;
	-webkit-transition: ease-in-out;
}

html {-webkit-font-smoothing: antialiased; 	}



.no-gutter-left {padding-left: 0px !important;}
.no-gutter-right {padding-right: 0px !important; }


.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* Advanced selectors */
.image-overlay-site {
position:absolute;
	background-color:rgba(126,97,51,1.0);
	opacity:0.15;
	bottom:0;
	left:0;
	right:0;
	top:0;
	margin-left:0px !important;
	margin-right:0px !important;
}


.image-overlay-project {
position:absolute;
	background-color:rgba(0,0,0,1.0);
	opacity:0.15;
	bottom:0;
	left:0;
	right:0;
	top:0;
	margin-left:0px !important;
	margin-right:0px !important;
}

.image-overlay {
	position: absolute;
background-image: linear-gradient(to left bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
opacity: 0.0;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin-left: 0px !important;
margin-right: 0px !important;
}






h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	padding-top: 0;
	font-weight:  100;
}


h1, .h1 {
	font-family: var(--t4n-title-xxl-font, 'Theinhardt-Regular', sans-serif);
}

h2, .h2 {
	font-family: var(--t4n-title-xxl-font, 'Theinhardt-Regular', sans-serif);
}

h3, .h3 {
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
}

h4, .h4 {
	font-family: var(--t4n-body-m-font, 'Theinhardt-Regular', sans-serif);
}

h5, .h5 {
	font-family: 'Theinhardt-Regular', sans-serif;
}

strong {
	font-family: 'Theinhardt-Bold', sans-serif;
}


.h1, h1 {
font-size: var(--t4n-title-xxl-size, 40px);
line-height: var(--t4n-title-xxl-lh, normal);
}

body {
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px) !important;
	line-height: var(--t4n-caption-m-lh, 1.3) !important;
	background: #062B36;
	font-weight: 300 !important;
	color: #ffffff !important;
}



.hideFirst{display:none;}

#login-icon{position:fixed;z-index:2;}
.login-icon{background-image:url('..//images/gl-menu-green@2x-no.png');width:45px;height:45px;cursor:pointer;background-position:center center;background-size:contain;background-repeat:no-repeat;transition:all 0.1s ease;}
.login-icon-close{background-image:url('..//images/gl-close-green@2x-no.png');width:45px;height:45px;cursor:pointer;background-position:center center;background-size:contain;background-repeat:no-repeat;margin-right:0px;transition:all 0.1s ease;z-index:0;}
#login-menu{top:0px;left:0px;position:fixed;background-color:#e8f1f0;margin:0 auto;padding-top:0px;padding-right:0px;width:50vw;height:100% !important;z-index:2;}



.hidden-xs {
	 display: block !important;
}
.visible-xs {
	 display: none !important;
}



			.styled-select {
   background: white;
   height: 40px;
   overflow: hidden;
   width: inherit;
	font-family: 'Nunito Sans', sans-serif;
	text-transform: uppercase !important;
	font-size: inherit !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	border-radius: 0px !important;
}

.styled-select select {
   background: transparent;
   border: none;
   height: 40px;
   width: inherit;
	font-family: 'Nunito Sans', sans-serif;
	text-transform: uppercase !important;
	font-size: inherit !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	border-radius: 0px !important;
	padding: 10px 10px 8px 10px;
}





/* t4n-button: unified hero/banner button component. Color tokens default
   here and are overridden by Tech4Nature Options > Buttons (site-wide) and,
   per instance, by the button's own Background/Text Color fields. */
:root {
	--t4n-button-bg: #2D2E2F;
	--t4n-button-bg-hover: #202122; /* fallback; derived from --t4n-button-bg below */
	--t4n-button-text: #FFFFFF;
	--t4n-button-height: 56px;
	--t4n-button-padding-x: 24px;
	--t4n-button-padding-y: 12px;
	--t4n-button-radius: 2px;
	--t4n-button-shadow: 0px 1px 10.2px rgba(0, 0, 0, 0.25);
	--t4n-button-font-size: 20px;
	--t4n-button-line-height: 26px;

	/* Secondary button: label + underline only, no fill and no hover state. */
	--t4n-button-secondary-text: #FFFFFF;
	--t4n-button-secondary-font-size: 20px;
	--t4n-button-secondary-line-height: 1.3;
	--t4n-button-secondary-stroke-width: 0.2px;

	--t4n-button-outline-text: #036E9B;
	/* The label colour once the rule fills in on hover. */
	--t4n-button-outline-fill: #FFFFFF;
	--t4n-button-outline-border: 2px;
	--t4n-button-outline-padding-x: 32px;
	--t4n-button-outline-padding-y: 16px;
}

.t4n-button {
	--t4n-button-bg-current: var(--t4n-button-bg);
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 0;
	min-height: var(--t4n-button-height);
	max-width: 100%;
	padding: var(--t4n-button-padding-y) var(--t4n-button-padding-x);
	color: var(--t4n-button-text) !important;
	font-family: "Theinhardt-Regular", sans-serif;
	font-size: var(--t4n-button-font-size);
	font-weight: 400;
	line-height: var(--t4n-button-line-height);
	text-align: center;
	text-decoration: none;
	border: none;
	overflow-wrap: break-word;
	cursor: pointer;
}

.t4n-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--t4n-button-bg-current);
	border-radius: var(--t4n-button-radius);
	box-shadow: var(--t4n-button-shadow);
	transition: background-color .2s ease-in-out;
}

/*
 * ARCHIVED "torn paper" edge -- removed 2026-09-28, kept here for reference
 * in case the effect is wanted again. To restore it:
 *
 * 1. Add these two custom properties back to the :root block above (they
 *    sat right after --t4n-button-shadow):
 *
 *      --t4n-button-outline-width: 7px;
 *      --t4n-button-outline-offset: -3.5px;
 *
 * 2. Replace the .t4n-button::before rule above with:
 *
 *      .t4n-button::before {
 *          content: "";
 *          position: absolute;
 *          inset: 0;
 *          z-index: -1;
 *          background-color: var(--t4n-button-bg-current);
 *          border-radius: var(--t4n-button-radius);
 *          box-shadow: var(--t4n-button-shadow);
 *          outline: var(--t4n-button-outline-width) solid var(--t4n-button-bg-current);
 *          outline-offset: var(--t4n-button-outline-offset);
 *          filter: url(#t4n-button-rough-edge);
 *          transition: background-color .2s ease-in-out, outline-color .2s ease-in-out;
 *      }
 *
 *    (the outline is the same colour as the fill, inset by half its width,
 *    so it spreads the silhouette outward before the filter chews into it --
 *    it has to darken together with the fill on hover, hence the extra
 *    outline-color transition.)
 *
 * 3. Uncomment t4n_button_rough_edge_svg() and its wp_footer hook at the
 *    bottom of wp-content/themes/greenlist/inc/t4n-button.php -- that
 *    function defines the #t4n-button-rough-edge SVG filter (feTurbulence +
 *    feDisplacementMap) referenced above, including the notes on the
 *    Chrome/Firefox tuning it needed.
 */

/* Hover darkens the fill. text-decoration is restated because Bootstrap's
   `a:hover { text-decoration: underline }` would otherwise win over the
   base rule's lower specificity. */
.t4n-button:hover,
.t4n-button:focus-visible {
	--t4n-button-bg-current: var(--t4n-button-bg-hover);
	color: var(--t4n-button-text) !important;
	text-decoration: none;
}

/* Derive the hover shade from whichever background is actually in effect, so
   a theme-option colour or a per-instance override darkens automatically.
   This has to be declared on the button itself, not on :root: var() inside a
   custom property is substituted on the element that declares it, so a :root
   declaration would always mix the :root background and ignore overrides. */
@supports (background: color-mix(in srgb, red, blue)) {
	.t4n-button:hover,
	.t4n-button:focus-visible {
		--t4n-button-bg-current: color-mix(in srgb, var(--t4n-button-bg) 72%, #000);
	}
}

/* t4n-button-secondary: standalone text link component. No fill, no border,
   and intentionally identical in every interaction state. border/background
   are forced because several blocks style bare `a` contextually (e.g.
   `.bannerLinks a { border-bottom: 1px solid white }`), which would double
   up with the text underline. */
.t4n-button-secondary {
	display: inline-block;
	padding: 0;
	background: none !important;
	border: 0 !important;
	color: var(--t4n-button-secondary-text) !important;
	font-family: "Theinhardt-Regular", sans-serif;
	font-size: var(--t4n-button-secondary-font-size);
	font-weight: 400;
	line-height: var(--t4n-button-secondary-line-height);
	-webkit-text-stroke-width: var(--t4n-button-secondary-stroke-width);
	-webkit-text-stroke-color: var(--t4n-button-secondary-text);
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
	cursor: pointer;
}

.t4n-button-secondary:hover,
.t4n-button-secondary:focus,
.t4n-button-secondary:focus-visible,
.t4n-button-secondary:active {
	color: var(--t4n-button-secondary-text) !important;
	text-decoration-line: underline;
}

/* t4n-button-outline: hollow rectangle, used for a "load more" control under a
   grid -- a plain class rather than an anchor-only style, so it backs a real
   <button> when the control reveals content already on the page instead of
   linking anywhere (see t4n-news-rows). The rule is drawn with `outline`
   rather than `border` so it does not collide with the contextual
   `a { border-bottom }` rules several blocks set, and the legacy
   `* { border-radius: 0 !important }` reset forces the radius. Filling in on
   hover is what distinguishes it from the plain rule. */
.t4n-button-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--t4n-button-outline-padding-y) var(--t4n-button-outline-padding-x);
	background: transparent !important;
	border: 0 !important;
	border-radius: var(--t4n-button-radius) !important;
	outline: var(--t4n-button-outline-border) solid var(--t4n-button-outline-text);
	outline-offset: calc(var(--t4n-button-outline-border) * -1);
	color: var(--t4n-button-outline-text) !important;
	font-family: "Theinhardt-Regular", sans-serif;
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease-in-out, color .2s ease-in-out;
}

/* Restated at (0,2,0) because Bootstrap's `a:hover { text-decoration:
   underline }` (0,1,1) outranks the bare class above. */
.t4n-button-outline:hover,
.t4n-button-outline:focus,
.t4n-button-outline:focus-visible {
	background: var(--t4n-button-outline-text) !important;
	color: var(--t4n-button-outline-fill) !important;
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.t4n-button-outline {
		transition: none;
	}
}

	a.whiteOutlineButton {
		background: transparent !important;
		padding: 10px 10px 8px 10px;
		border: 3px solid white !important;
		transition: all .2s ease-in-out;
		color: white !important;
		font-family:"Theinhardt-Bold";
	}

		a.whiteOutlineButton:hover {
		background: white !important;
		padding: 10px 10px 8px 10px;
		border: 3px solid white;
		color: #000 !important;
		font-family:"Theinhardt-Bold";
	}


		.whiteOutlineButton {
		background: transparent !important;
		padding: 10px 10px 8px 10px;
		border: 3px solid white !important;
		transition: all .2s ease-in-out;
		color: white !important;
		font-family:"Theinhardt-Bold";
	}



	a.whiteButton {
		background: white !important;
		padding: 10px 10px 8px 10px;
		border: 3px solid white !important;
		transition: all .2s ease-in-out;
		color: #083B49 !important;
		font-family:"Theinhardt-Bold";
	}

		a.whiteButton:hover {
		background: white !important;
		padding: 10px 10px 8px 10px;
		border: 3px solid white;
		color: #083B49 !important;
		font-family:"Theinhardt-Bold";
	}


		.whiteButton {
		background: white !important;
		padding: 10px 10px 8px 10px;
		border: 3px solid white !important;
		transition: all .2s ease-in-out;
		color: #083B49 !important;
		font-family:"Theinhardt-Bold";
	}

		a.greenButton {
		background: #10635a !important;
		padding: 10px 10px 8px 10px;
		border: 3px solid #10635a !important;
		transition: all .2s ease-in-out;
		color: white !important;
		font-family:"Theinhardt-Bold";
	}

		a.greenButton:hover {
		background: white !important;
		padding: 10px 10px 8px 10px;
		border: 3px solid #10635a;
		color: #10635a !important;
		font-family:"Theinhardt-Bold";
	}


		.greenButton {
		background: #10635a !important;
		padding: 10px 10px 8px 10px;
		border: 3px solid #10635a !important;
		transition: all .2s ease-in-out;
		color: white !important;
		font-family:"Theinhardt-Bold";
	}


		.wpcf7-text, .wpcf7-textarea {

		width: 100% !important;
	}

	input.wpcf7-submit {
		background: white !important;
		padding: 10px 10px 8px 10px;
		border: 3px solid white;
		color: #083B49 !important;
		font-family:"Theinhardt-Bold";
	}

		input.wpcf7-submit:hover {
		background: white !important;
		padding: 10px 10px 8px 10px;
		border: 3px solid white;
		color: #083B49 !important;
		font-family:"Theinhardt-Bold";

	}







	#share {

		position: fixed; bottom: 30px; right: 30px; z-index: 1;
	}


		.alm-btn-wrap .alm-load-more-btn {
font-size: inherit !important;
font-weight: 300 !important;
width: 100% !important;
height: inherit !important;
line-height: inherit !important;
color: white !important;
border: none;
border-radius: 0px !important;
margin: 0 0 4px;
display: inline-block;
position: relative;
text-align: center;
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
background: #D31B00 !important;
		padding: 10px 10px 8px 10px !important;
		border: 1px solid #D31B00 !important;
		transition: padding .2s ease-in-out;
}

.alm-btn-wrap .alm-load-more-btn:hover {
background-color: #e06464;
color: #fff;
text-decoration: none;
}

	.extraRowPad {

		padding-left: 30px;
		padding-right: 30px;
	}



.underline-link {
	display: inline-block;
	color: #e4e2dc;
	text-decoration: none;
}

.underline-link::after {
	content: '';
	display: block;
	width: 0;
	height: 2px;
	background: #e4e2dc;
	transition: width .3s;
}

.underline-link:hover::after {
	width: 100%;
	transition: width .3s;
}

.current_page_item a, .current-menu-item a, .current-projects-ancestor a {
border-bottom: 2px solid #2d6a50;
color: #2d6a50 !important;
padding-bottom: 2px;
}

#menu-greenlist li {
display: block;
padding-left: 0px;
}

#menu-greenlist li:first-child {
display: block;
padding-left: 0px;
}

.menu-greenlist-container {
padding-top: 0px;
}

header {
	background: white !important;
	font-family: 'Graphik-Regular', sans-serif;
}



	.boxOver:hover .show1 {

		opacity:1.0;
				transition: all 0.5s ease-in-out;

}


				.show1 {
					opacity: 0.0;
					transition: all 0.5s ease-in-out;
				}


	.mb-60 {

				margin-bottom: 60px !important;
			}





			   .heightFix {
				   height:calc(100% - 75px);
				   }

				   .menu a {

					   color: black !important;
				   }

				   .padHelp {
					   margin-top: 75px !important;
				   }

						 #left-gl {
					position: fixed;
					z-index: 999999;
					left: -66px;
					top: 160px;
					transform: rotate(90deg) !important;
				   }

		.sideBar {
					   width: 75px; float: left; position: fixed; border-right: 0px solid black; background: #e8f1f0 !important; height: 100vh; z-index: 3;
				   }

				   .mainContent {
						width: calc(100% - 75px); float: left; margin-left: 75px !important;
				   }



				   #top-border {

					   position: fixed;
					   z-index: 1;
					   border-bottom: 1px solid black;
					   height: 75px;
				   width: calc(100% - 75px);
				   margin-left: 75px !important;
				   pointer-events: none !important;
				   }




				 #login-icon {
					   left: 15px !important;
					   top: 50% !important;

				 }



					 .logoSVG {
				   width: 100% !important;
				   }


			  h2, .h2 {
	font-size: var(--t4n-title-xxl-size, 40px) !important;
	line-height: var(--t4n-title-xxl-lh, normal) !important;
}



/* Media Queries */

@media only screen and (max-width : 1400px) {

.hidden-xl {
	 display: none !important;
}
.visible-xl {
	 display: block !important;
}


.h1, h1 {
font-size: var(--t4n-title-xxl-size, 40px);
line-height: var(--t4n-title-xxl-lh, normal);
}

h2, .h2 {
	font-size: var(--t4n-title-xxl-size, 40px) !important;
	line-height: var(--t4n-title-xxl-lh, normal) !important;
}

}


@media only screen and (max-width : 1200px) {

	 #login-icon {
					   left: 11px !important;
					   top: 50%  !important;

				 }

.hidden-lg {
	 display: none !important;
}
.visible-lg {
	 display: block !important;
}


.h1, h1 {
font-size: var(--t4n-title-xxl-size, 40px);
line-height: var(--t4n-title-xxl-lh, normal);
}
h2, .h2 {
	font-size: var(--t4n-title-xxl-size, 40px) !important;
	line-height: var(--t4n-title-xxl-lh, normal) !important;
}
h3, .h3 {
	font-size: var(--t4n-body-xl-size, 24px) !important;
	line-height: var(--t4n-body-xl-lh, normal) !important;
}
h4, .h4 {
	font-size: var(--t4n-body-m-size, 20px) !important;
	line-height: var(--t4n-body-m-lh, 1.3) !important;
}

body {
	font-size: var(--t4n-caption-m-size, 16px) !important;
}

.vh33 {
	height:	27.5vh !important;
}


.vh60 {
	height: 50vh !important;
}


				   .logoSVG {
				   width: 100% !important;
				   }

				   .sideBar {
					   width: 65px;
				   }

				   .mainContent {
						width: calc(100% - 65px); margin-left: 65px !important;
				   }

						.heightFix {
				   height:calc(100% - 65px);
				   }


							  #left-gl {
					left: -72px;
					top: 150px;
				   }





				   .padHelp {
					   margin-top: 65px !important;
				   }

						  #top-border {

					   position: fixed;
					   z-index: 1;
					   border-bottom: 1px solid black;
					   height: 65px;
				   width: calc(100% - 65px);
				   margin-left: 65px !important;
				   pointer-events: none !important;
				   }


}

@media only screen and (max-width : 979px) {


	.pl-4 {
		padding-left: 1rem !important;
	}

	.pt-4 {
		padding-top: 1.15rem!important;
	}

	.pb-4 {
		padding-left: 1rem !important;
	}

	.mr-4 {
		margin-right: 1rem !important;
	}


.hidden-md {
	 display: none !important;
}
.visible-md {
	 display: block !important;
}



.h1, h1 {
font-size: var(--t4n-title-xxl-size, 40px);
line-height: var(--t4n-title-xxl-lh, normal);
}
h2, .h2 {
	font-family: var(--t4n-title-xl-font, 'Theinhardt-Regular', sans-serif) !important;
	font-size: var(--t4n-title-xl-size, 36px) !important;
	line-height: var(--t4n-title-xl-lh, normal) !important;
}
h3, .h3 {
	font-family: var(--t4n-body-m-font, 'Theinhardt-Regular', sans-serif) !important;
	font-size: var(--t4n-body-m-size, 20px) !important;
	line-height: var(--t4n-body-m-lh, 1.3) !important;
}
h4, .h4 {
	font-size: var(--t4n-body-m-size, 20px) !important;
	line-height: var(--t4n-body-m-lh, 1.3) !important;
}

body {

	font-size: var(--t4n-caption-m-size, 16px) !important;
}

.vh33 {
	height:	22.5vh !important;
}


.vh60 {
	height: 40vh !important;
}





							  .logoSVG {

				   width: 100% !important;
				   }


				   .sideBar {
					   width: 60px;
				   }

				   .padHelp {
					   margin-top: 60px !important;
				   }

				   #left-gl {
					position: fixed;
					z-index: 999999;
					left: -74px;
					top: 140px;
				   }

						.heightFix {
				   height:calc(100% - 60px);
				   }



						#top-border {

					   position: fixed;
					   z-index: 1;
					   border-bottom: 1px solid black;
					   height: 60px;
				   width: calc(100% - 60px);
				   margin-left: 60px !important;
				   pointer-events: none !important;
				   }

				   .mainContent {
						width: calc(100% - 60px); float: left; margin-left: 60px !important;
				   }

					#login-icon {
					   left: 7.5px !important;
					   top: 50%  !important;

				 }
}


@media only screen and (max-width: 767px) {



		.show1 {
					opacity: 1.0 !important;
					transition: all 0.5s ease-in-out;
				}


.vh33 {
	height:	20vh !important;
}


.vh60 {
	height: 40vh !important;
}

.vh75 {
	height: 50vh !important;
}
.vh80 {
	height: 75vh !important;
}

.vh100 {
	height: 100vh !important;
}

 .login-icon{
	 width:40px;
	 height:40px;
}
.login-icon-close{
	width:40px;
	height:40px;
}


.hidden-xs {
	 display: none !important;
}
.visible-xs {
	 display: block !important;
}

h1, .h1 {
	font-size: var(--t4n-title-xxl-size, 40px) !important;
	line-height: var(--t4n-title-xxl-lh, normal) !important;
}
h2, .h2 {
	font-family: var(--t4n-title-xl-font, 'Theinhardt-Regular', sans-serif) !important;
	font-size: var(--t4n-title-xl-size, 36px) !important;
	line-height: var(--t4n-title-xl-lh, normal) !important;
}
h3, .h3 {
		font-family: var(--t4n-body-m-font, 'Theinhardt-Regular', sans-serif) !important;
		font-size: var(--t4n-body-m-size, 20px) !important;
		line-height: var(--t4n-body-m-lh, 1.3) !important;
}
h4, .h4 {
	font-family: var(--t4n-body-s-font, 'Theinhardt-Regular', sans-serif) !important;
	font-size: var(--t4n-body-s-size, 18px) !important;
	line-height: var(--t4n-body-s-lh, 1.3) !important;
}

body {
	font-size: var(--t4n-caption-m-size, 16px) !important;
	line-height: var(--t4n-caption-m-lh, 1.3) !important;

}







	.slick-dots {
margin-top: -160px;
margin-left: 20px;
}

#login-icon {
right: 0px !important;
top: 2px !important;
left: auto !important;
}




	.pl-4 {
		padding-left: .75rem !important;
	}

	.pt-4 {
		padding-top: .85rem!important;
	}

	.pb-4 {
		padding-left: .75rem !important;
	}

	.mr-4 {
		margin-right: .75rem !important;
	}

				   mvh100 {

						   height: 40vh !important;
					   }

					   .padHelp {
					   margin-top: 55px !important;
				   }

				   .sideBar {
					   width: 100%;
				   }

					   .vh100.sideBar {
				   height: 60px !important;
				   }

						.heightFix {
				   height:calc(100% - 55px);
				   }

				   .mobHeightFix {

					   height: 37.5vh !important;
				   }

				   #left-gl {
					position: fixed;
					z-index: 999999;
					left: 50px;
					top: 17px;
					transform: rotate(0deg) !important;
				   }

						#top-border {

					   position: fixed;
					   z-index: 1;
					   border-bottom: 1px solid black;
					   height: 55px;
				   width: calc(100% - 55px);
				   margin-left: 55px !important;
				   pointer-events: none !important;
				   }

						 #top-border-menu {
					   height: 55px;
				   }

				   .mainContent {
						width: 100%;
						float: left;
						margin-left: 0px !important;
						padding-top: 60px;

				   }
							  .logoSVG {

				   width: 100% !important;
				   }

				   .rightMenu .h1 {
					   font-style: 1.3rem !important;
				   }



				 .mt-5 {
					   margin-top: 1rem !important;
				   }
				   .ml-5 {
					   margin-left: 1rem !important;
				   }


				   .pt-5 {
					   padding-top: 1rem !important;
				   }
				   .pb-5 {
					   padding-bottom: 1rem !important;
				   }
				   .pl-5 {
					   padding-left: 1rem !important;
				   }
				   .pr-5 {
					   padding-right: 1rem !important;
				   }


.vh100-video {

	height: 80vh !important;
	object-fit: cover !important;
}

#login-menu{top: 0px;
left: 0px;
position: fixed;
background-color: #014B45;
margin: 0 auto;
padding-top: 30px;
padding-right: 0px;
width: 100vw;
height: 100% !important;
z-index: 2;}

}

@media only screen and (max-width: 420px) {


	.vh33 {
	height:	35vh !important;
}

.vh40 {

	height: 62.5vh !important;
}


.hidden-xs {
	 display: none !important;
}

	   .mvh100 {

						   height: 40vh !important;
					   }



}

/* Foobox styles */
.fbx-light .fbx-inner{
		background: none;
		border: none;
}

.fbx-rounded.fbx-light .fbx-close{
		background: none;
		border: none;
		right: 0.5em;
		top: 0.5em;
		color: #fff!important;
}

.fbx-rounded .fbx-close, .fbx-rounded .fbx-close:hover{
		border: none;
		box-shadow: none;
}

.fbx-modal, .fbx-caption-title{
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	line-height: var(--t4n-caption-m-lh, 1.3);
}

.fbx-light .fbx-caption{
	background: none;
	text-align: left;
}

.fbx-close-caption{
	display: none;
}

.fbx-rounded .fbx-prev.fbx-btn-shadow, .fbx-rounded .fbx-prev.fbx-btn-shadow:hover,
.fbx-rounded .fbx-next.fbx-btn-shadow, .fbx-rounded .fbx-next.fbx-btn-shadow:hover {
		box-shadow: none;
		background: none;
		color: #fff!important;
}

.logos p{display: flex; flex-wrap: wrap; justify-content: right; align-items: center; gap: 2rem; margin-bottom: 0;}
.logos img{
	height: 3rem;
	width: auto;
	/* filter: saturate(0%) brightness(0%) invert(12%) sepia(80%) saturate(2106%) hue-rotate(180deg) brightness(90%) contrast(101%); */
}

@media only screen and (max-width: 767px) {
	.logos p{
		max-width: 100vw;
		display: flex;
		justify-content: left;
		gap: 1rem; }
	.logos img{height: unset;}
}


/* =========================================================================
   Global typography tokens
   ====================================================================== */

/* Secondary theme typeface, alongside Theinhardt (primary). Loaded via
   Google Fonts (add-inter-font in functions.php). Named type-scale tokens
   (Tech4Nature Options > Typography) can also select Inter per style; this
   custom property is the plain, reusable fallback for anything that just
   needs "the secondary font" directly. */
:root {
	--t4n-font-secondary: 'Inter', sans-serif;
}

/* =========================================================================
   t4n-header: site-wide header component (see inc/t4n-header.php)
   ====================================================================== */

/* Colour tokens default here and are overridden site-wide by
   Tech4Nature Options > Header. Everything else is a layout token, kept as a
   custom property so the breakpoints below only restate what actually
   changes. */
:root {
	--t4n-header-bg: #E8F1F0;
	--t4n-header-link: #4A7425;
	--t4n-header-link-hover: #3B5D1E; /* fallback; derived from --t4n-header-link below */
	--t4n-header-link-active-stroke: 0.6px;
	--t4n-header-submenu-text: #060708;

	--t4n-header-padding-x: 40px;
	--t4n-header-padding-top: 24px;
	--t4n-header-padding-bottom: 16px;
	--t4n-header-gap: 32px;
	--t4n-header-brand-gap: 10px;
	--t4n-header-mark-height: 40px;
	--t4n-header-wordmark-height: 28px;

	--t4n-header-panel-padding-y: 24px;
	--t4n-header-panel-gap: 24px;
	--t4n-header-panel-width: 452px;

	--t4n-header-card-width: 360px;
	--t4n-header-card-height: 173px; /* reference min-height: the real height follows the wrapped label */
	--t4n-header-card-padding: 24px;
	--t4n-header-card-padding-top: 40px; /* clearance from the card's top edge to the arrow icon */
	--t4n-header-card-icon-size: 20px;
	--t4n-header-card-icon-gap: 16px; /* minimum space between the icon and the label below it */
	--t4n-header-card-radius: 8px;
	--t4n-header-card-text: #FFFFFF;
	--t4n-header-card-bg: #2D6A50;
	--t4n-header-card-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.11) 0%, rgba(0, 0, 0, 0.80) 100%);

	--t4n-header-social-size: 20px;
	--t4n-header-social-stroke: 1.5px; /* contour of the outlined brand marks */

	--t4n-header-search-width: 180px; /* expanded input width on desktop */
	--t4n-header-search-width-tablet: 320px; /* capped width inside the open mobile menu, tablet down to 768px -- phones below that go full width instead */

	--t4n-header-z: 1000;
	--t4n-header-backdrop: rgba(6, 7, 8, 0.4); /* mobile-menu scrim, below var(--t4n-header-z) */
}

/* The legacy fixed rail and its overlay menu are replaced by .t4n-header.
   They stay in the markup so anything still referencing them keeps resolving,
   so they are hidden here instead of being removed. display is forced because
   .sideBar also carries Bootstrap's .d-flex utility. */
.sideBar,
#login-menu {
	display: none !important;
}

/* The rail used to reserve a gutter on the left of every page. */
.mainContent {
	float: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	padding-top: 0 !important;
}

/* background is forced, and the font restated, because of the theme's legacy
   `header { background: white !important; font-family: 'Graphik-Regular' }`
   rule further up. That rule is left untouched so anything else still relying
   on it keeps working. */
.t4n-header {
	position: sticky;
	top: 0;
	z-index: var(--t4n-header-z);
	background: var(--t4n-header-bg) !important;
	color: var(--t4n-header-link);
	font-family: var(--t4n-link-l-font, 'Theinhardt-Regular', sans-serif);
}

.t4n-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--t4n-header-gap);
	padding: var(--t4n-header-padding-top) var(--t4n-header-padding-x) var(--t4n-header-padding-bottom);
}

/* Brand ---------------------------------------------------------------- */

.t4n-header__brand {
	display: flex;
	align-items: center;
	gap: var(--t4n-header-brand-gap);
	flex-shrink: 0;
	text-decoration: none;
}

.t4n-header__logo,
.t4n-header__wordmark {
	display: block;
	width: auto;
	max-width: 100%;
}

.t4n-header__logo {
	height: var(--t4n-header-mark-height);
	max-width: 140px;
}

.t4n-header__wordmark {
	height: auto;
	max-width: 140px;
}

/* Toggle --------------------------------------------------------------- */

/* Hidden on desktop, where the panels open on hover and focus. */
.t4n-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	background: none;
	border: 0;
	border-radius: 4px;
	color: var(--t4n-header-link);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.t4n-header__toggle:focus-visible {
	outline: 2px solid var(--t4n-header-link);
	outline-offset: 2px;
}

/* The open/close icons swap on the button's own state, so no script has to
   touch them. */
.t4n-header__toggle-icon--close,
.t4n-header__toggle[aria-expanded="true"] .t4n-header__toggle-icon--open {
	display: none;
}

.t4n-header__toggle[aria-expanded="true"] .t4n-header__toggle-icon--close {
	display: inline-block;
}

/* Navigation ----------------------------------------------------------- */

.t4n-header__collapse {
	display: flex;
	align-self: stretch;
	align-items: center;
	gap: var(--t4n-header-gap);
}

/* Hidden outside the mobile range, where it becomes the tap target and scrim
   behind the collapsed nav (see the 979px media query below). */
.t4n-header__backdrop {
	display: none;
}

/* The nav, its list and its items all fill the height of the header row. That
   is what lets a menu item's box reach down to the header's bottom padding,
   where the panel begins, so the pointer never leaves the item on its way into
   the submenu. It also gives each item a comfortably larger hover target. */
.t4n-header__nav {
	display: flex;
	align-self: stretch;
}

/* Wraps as a whole rather than letting individual labels break: the design has
   a single row, and a menu long enough to overflow degrades into a second row
   instead of hyphenating item names or scrolling the page sideways. */
.t4n-header__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-end;
	gap: 12px var(--t4n-header-gap);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Deliberately not positioned: the panels are absolute against .t4n-header so
   they can span the full width of the header, as in the design. */
.t4n-header__item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.t4n-header__link {
	color: var(--t4n-header-link);
	font-family: var(--t4n-link-l-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-link-l-size, 20px);
	line-height: var(--t4n-link-l-lh, 1.3);
	-webkit-text-stroke-width: 0;
	-webkit-text-stroke-color: currentColor;
	white-space: nowrap;
	text-decoration: none;
	transition: color .2s ease-in-out;
}

.t4n-header__link:hover,
.t4n-header__link:focus {
	color: var(--t4n-header-link-hover);
	text-decoration: none;
}

/* The active item is emphasised, as in the design. The weight comes from a
   text stroke rather than from swapping in Theinhardt-Bold, because a change
   of face would change the label's width and shove the rest of the row
   sideways on every hover. Same technique as .t4n-button-secondary. */
.t4n-header__item:hover > .t4n-header__link,
.t4n-header__item:focus-within > .t4n-header__link,
.t4n-header__item.is-open > .t4n-header__link {
	-webkit-text-stroke-width: var(--t4n-header-link-active-stroke);
}

/* Active item. The colour, border and padding are restated because the theme's
   legacy `.current-menu-item a { border-bottom; color !important }` rule also
   matches inside this component; it is left in place for the rest of the site.
   Bolded with the same text-stroke trick as the hover/open state above rather
   than an underline, and for the same reason: a real font-weight swap would
   change the label's width and shove the rest of the row sideways. */
.t4n-header .current-menu-item > .t4n-header__link,
.t4n-header .current-menu-ancestor > .t4n-header__link {
	color: var(--t4n-header-link) !important;
	padding-bottom: 0;
	border-bottom: 0;
	text-decoration: none;
	-webkit-text-stroke-width: var(--t4n-header-link-active-stroke);
}

.t4n-header .current-menu-item > .t4n-header__sublink {
	color: var(--t4n-header-submenu-text) !important;
	padding-bottom: 0;
	border-bottom: 0;
	text-decoration: none;
	-webkit-text-stroke-width: var(--t4n-header-link-active-stroke);
}

.t4n-header .current-menu-item > .t4n-header__card {
	padding-bottom: var(--t4n-header-card-padding);
	border-bottom: 0;
}

.t4n-header__panel-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 0;
	color: var(--t4n-header-link);
	line-height: 0;
	cursor: pointer;
}

.t4n-header__panel-toggle:focus-visible {
	outline: 2px solid var(--t4n-header-link);
	outline-offset: 2px;
}

.t4n-header__chevron {
	display: block;
	transition: transform .2s ease-in-out;
}

.t4n-header__item.is-open .t4n-header__chevron {
	transform: rotate(180deg);
}

/* Panels --------------------------------------------------------------- */

/* Starts inside the header's bottom padding instead of below it, so it meets
   the bottom edge of its menu item and the pointer never crosses a dead strip
   on its way into the submenu. The bottom padding is added back on top so the
   content still sits where the design puts it, and since the panel and the
   header share a background the overlap is invisible. */
.t4n-header__panel {
	display: none;
	position: absolute;
	top: calc(100% - var(--t4n-header-padding-bottom));
	left: 0;
	right: 0;
	/* Same room below the cards as above them, so they don't sit pressed
	   against the bottom edge of the dropdown (IUCN feedback, 16-oct). */
	padding: calc(var(--t4n-header-panel-padding-y) + var(--t4n-header-padding-bottom)) var(--t4n-header-padding-x);
	background: var(--t4n-header-bg);
}

.t4n-header__panel--cards {
	padding-right: var(--t4n-header-panel-padding-y);
	padding-left: var(--t4n-header-panel-padding-y);
}

.t4n-header__item.is-open > .t4n-header__panel {
	display: block;
}

.t4n-header__submenu {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Text submenu: a single right-aligned column, left-aligned inside. */
.t4n-header__submenu--list {
	display: flex;
	flex-direction: column;
	gap: var(--t4n-header-panel-gap);
	max-width: var(--t4n-header-panel-width);
	margin-left: auto;
}

.t4n-header__sublink {
	color: var(--t4n-header-submenu-text);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	line-height: var(--t4n-caption-m-lh, 1.3);
	text-decoration: none;
	transition: color .2s ease-in-out;
}

.t4n-header__sublink:hover,
.t4n-header__sublink:focus {
	color: var(--t4n-header-link);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Card submenu: shown as soon as one item of the submenu has an image. */
.t4n-header__submenu--cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--t4n-header-panel-gap);
}

/* The list item owns the track width so a single token controls the layout at
   every breakpoint; the card simply fills it. */
.t4n-header__subitem--card {
	flex: 0 1 var(--t4n-header-card-width);
	max-width: 100%;
}

/* Column with the arrow at the top-left and the label at the bottom. The
   height token is only a minimum: a label wrapping to more lines grows the
   card instead of being clipped. The top padding is larger than the rest so
   the arrow keeps its 40px clearance from the card's top edge. */
.t4n-header__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	min-height: var(--t4n-header-card-height);
	padding: var(--t4n-header-card-padding-top) var(--t4n-header-card-padding) var(--t4n-header-card-padding);
	background-color: var(--t4n-header-card-bg);
	/* !important is required: the legacy `* { border-radius: 0 !important }`
	   reset near the top of this stylesheet would otherwise square the card. */
	border-radius: var(--t4n-header-card-radius) !important;
	overflow: hidden;
	text-decoration: none;
}

.t4n-header__card:hover,
.t4n-header__card:focus {
	text-decoration: none;
}

.t4n-header__card-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--t4n-crop-pos, center);
	transform: scale(var(--t4n-crop-zoom, 1));
	transform-origin: var(--t4n-crop-pos, center);
	transition: transform .3s ease-in-out;
}

.t4n-header__card:hover .t4n-header__card-media,
.t4n-header__card:focus .t4n-header__card-media {
	transform: scale(calc(var(--t4n-crop-zoom, 1) * 1.04));
}

@media (prefers-reduced-motion: reduce) {
	.t4n-header__card-media {
		transition: none;
	}

	.t4n-header__card:hover .t4n-header__card-media,
	.t4n-header__card:focus .t4n-header__card-media {
		transform: scale(var(--t4n-crop-zoom, 1));
	}
}

/* Darkens the image so the label stays readable whatever is behind it. */
.t4n-header__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--t4n-header-card-overlay);
	border-radius: inherit !important; /* see the card's own border-radius */
}

/* First item of the card's column, so it sits in the top-left corner; the
   bottom margin is the floor for the gap that the label's `margin-top: auto`
   otherwise stretches. */
.t4n-header__card-icon {
	position: relative;
	z-index: 2;
	display: inline-flex;
	margin-bottom: var(--t4n-header-card-icon-gap);
	color: var(--t4n-header-card-text);
}

.t4n-header__card-icon img,
.t4n-header__card-arrow {
	display: block;
	width: var(--t4n-header-card-icon-size);
	height: var(--t4n-header-card-icon-size);
	object-fit: contain;
}

/* Pushed to the bottom of the card by the auto margin, so it always sits on
   the bottom padding whatever the card's final height turns out to be. */
.t4n-header__card-label {
	position: relative;
	z-index: 2;
	display: block;
	margin-top: auto;
	/* Never wider than the card's content box, and a single word too long for
	   it breaks instead of running over the right-hand padding (a flex item
	   otherwise refuses to shrink below its longest word). */
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	color: var(--t4n-header-card-text);
	font-family: var(--t4n-card-label-font, 'Inter', sans-serif);
	font-weight: 500;
	font-size: var(--t4n-card-label-size, 20px);
	line-height: var(--t4n-card-label-lh, 1.2);
}

/* Search ----------------------------------------------------------------- */

/* Collapsed to a single icon on desktop, so it stays discreet and does not
   compete with the nav/social row for space; the toggle expands the input in
   place. Overridden in the 979px media query below, where it is always shown
   expanded instead, inside the mobile menu. */
.t4n-header__search {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.t4n-header__search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 4px 8px;
	background: none;
	border: 0;
	border-radius: 4px;
	color: var(--t4n-header-link);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.t4n-header__search-toggle:focus-visible {
	outline: 2px solid var(--t4n-header-link);
	outline-offset: 2px;
}

/* Same open/close icon-swap idiom as .t4n-header__toggle. */
.t4n-header__search-icon--close,
.t4n-header__search-toggle[aria-expanded="true"] .t4n-header__search-icon--open {
	display: none;
}

.t4n-header__search-toggle[aria-expanded="true"] .t4n-header__search-icon--close {
	display: inline-block;
}

.t4n-header__search-form {
	display: flex;
	align-items: center;
	gap: 4px;
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-width .3s ease-in-out, opacity .2s ease-in-out;
}

.t4n-header__search.is-open .t4n-header__search-form {
	max-width: var(--t4n-header-search-width);
	opacity: 1;
}

.t4n-header__search-input {
	width: var(--t4n-header-search-width);
	min-width: 0;
	padding: 4px 0;
	background: none;
	border: 0;
	border-bottom: 1px solid currentColor;
	color: var(--t4n-header-link);
	/* Same type token as the top-level menu links (.t4n-header__link), so the
	   field reads at the same size as the rest of the menu. */
	font-family: var(--t4n-link-l-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-link-l-size, 20px);
	line-height: var(--t4n-link-l-lh, 1.3);
}

/* !important, not just full opacity: footer.php prints a global, unscoped
   `::placeholder { color: rgba(255,255,255,0.5) !important }` in its own
   inline <style> block (site-wide, since get_footer() runs on every page).
   Being !important, it wins over any plain rule regardless of specificity --
   this is what actually made the placeholder read white/illegible, not the
   opacity. Matches the typed value and the underline, so it always
   contrasts exactly as much as the rest of the header does against
   whichever background/link colours are set in Tech4Nature Options >
   Header. Neutralised locally per greenlist-legacy-css-traps rather than
   editing footer.php's rule, which the rest of the site still relies on. */
.t4n-header__search-input::placeholder {
	color: var(--t4n-header-link) !important;
	opacity: 1;
}

/* Same trap, second rule: footer.php's inline <style> also has a long
   input[type="…"]:focus, … { color: white !important } list (its own focus
   ring for legacy plain inputs) that applies to input[type="text"]:focus --
   this input included -- and, being !important, overrode the typed-text
   colour above the instant the field was focused (i.e. exactly while
   typing). The caret has no separate colour of its own here, so it went
   white and invisible along with the text.
   A class selector here is not enough to neutralise it: with both sides
   !important, the higher-specificity selector wins outright regardless of
   source order, and `input[type="text"]:focus` (0,2,1) already beats
   `.t4n-header__search-input:focus` (0,2,0) -- confirmed by measuring the
   focused input's computed color, which was still white. The id this input
   already carries settles it unambiguously. */
#t4n-header-search-input:focus {
	color: var(--t4n-header-link) !important;
	caret-color: var(--t4n-header-link);
}

.t4n-header__search-input:focus-visible,
.t4n-header__search-submit:focus-visible {
	outline: 2px solid var(--t4n-header-link);
	outline-offset: 2px;
}

.t4n-header__search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 4px;
	background: none;
	border: 0;
	color: var(--t4n-header-link);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.t4n-header__search-form {
		transition: none;
	}
}

/* Social --------------------------------------------------------------- */

.t4n-header__social {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.t4n-header__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 4px;
	border-radius: 4px;
	color: var(--t4n-header-link);
	font-size: var(--t4n-header-social-size);
	line-height: 1;
	text-decoration: none;
	transition: color .2s ease-in-out;
}

.t4n-header__social-link:hover,
.t4n-header__social-link:focus {
	color: var(--t4n-header-link-hover);
	text-decoration: none;
}

/* The design draws the brand marks as outlines: only the contour of the glyph
   is painted and its inside stays empty, filling in on hover. Font Awesome
   ships filled glyphs only, so instead of a second icon set the fill is turned
   off and the same glyph is stroked -- the stroke follows the brand silhouette
   exactly. `currentColor` still resolves to the link's `color` (which -webkit-
   text-fill-color overrides for the fill only), so both states keep following
   the header link colour.

   Guarded by @supports so that anywhere the stroke is unavailable the icons
   stay filled and visible instead of turning into transparent gaps. */
@supports (-webkit-text-stroke: 1px currentColor) {
	.t4n-header__social-link i {
		-webkit-text-fill-color: transparent;
		-webkit-text-stroke: var(--t4n-header-social-stroke) currentColor;
		transition: -webkit-text-fill-color .2s ease-in-out;
	}

	.t4n-header__social-link:hover i,
	.t4n-header__social-link:focus i {
		-webkit-text-fill-color: currentColor;
	}
}

/* Derive the hover shade from whichever link colour is actually in effect.
   Declared on the elements themselves rather than on :root, because var()
   inside a custom property is substituted on the element that declares it. */
@supports (color: color-mix(in srgb, red, blue)) {
	.t4n-header__link:hover,
	.t4n-header__link:focus,
	.t4n-header__social-link:hover,
	.t4n-header__social-link:focus {
		--t4n-header-link-hover: color-mix(in srgb, var(--t4n-header-link) 70%, #000);
	}
}

/* Desktop only: hovering or tabbing into an item opens its panel. Wrapped in
   a media query so a tap on a touch device does not leave a panel stuck open
   below the breakpoint, where the toggle button owns that job. */
@media only screen and (min-width: 980px) {

	.t4n-header__item--has-panel:hover > .t4n-header__panel,
	.t4n-header__item--has-panel:focus-within > .t4n-header__panel {
		display: block;
	}

	.t4n-header__item--has-panel:hover .t4n-header__chevron,
	.t4n-header__item--has-panel:focus-within .t4n-header__chevron {
		transform: rotate(180deg);
	}
}

@media only screen and (max-width : 1200px) {

	:root {
		--t4n-header-padding-x: 24px;
		--t4n-header-gap: 24px;
	}
}

/* Below this width the navigation collapses behind the toggle button. Kept in
   sync with T4N_HEADER_MOBILE_BREAKPOINT and js/t4n-header.js. */
@media only screen and (max-width : 979px) {

	.t4n-header__toggle {
		display: inline-flex;
	}

	.t4n-header__collapse {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--t4n-header-panel-gap);
		max-height: calc(100vh - 100%);
		/* `vh` on a phone is the viewport with the browser toolbars retracted,
		   so it is taller than what is actually visible and the bottom of the
		   panel (the social icons) sits below the screen edge where no amount
		   of scrolling inside the panel reaches it. `dvh` tracks the visible
		   height; a browser without it drops this line (invalid in calc) and
		   keeps the `vh` one above. */
		max-height: calc(100dvh - 100%);
		padding: var(--t4n-header-panel-padding-y) var(--t4n-header-padding-x);
		/* Clears the home indicator on notched phones. */
		padding-bottom: calc(var(--t4n-header-panel-padding-y) + env(safe-area-inset-bottom, 0px));
		background: var(--t4n-header-bg);
		overflow-y: auto;
		overscroll-behavior: contain;
		/* The fade/slide itself never touches `display` -- Firefox and Safari
		   do not animate a display change even with allow-discrete/
		   @starting-style in practice, which is what this replaced. Instead
		   js/t4n-header.js's openNav()/closeNav() add `is-mounted` (flips
		   `display`, below) an instant before -- and remove it only
		   `NAV_TRANSITION_MS` after -- toggling `is-open` (animates opacity/
		   transform), so the panel is already laid out before the transition
		   starts and stays laid out until it finishes. */
		opacity: 0;
		transform: translateY(-24px);
		transition: opacity .4s ease-in-out, transform .4s ease-in-out;
	}

	.t4n-header.is-mounted .t4n-header__collapse {
		display: flex;
	}

	.t4n-header.is-open .t4n-header__collapse {
		opacity: 1;
		transform: translateY(0);
	}

	/* A real, tappable scrim behind the open menu. As a sibling of <header> it
	   sits outside the sticky header's own stacking context, so it can cover
	   the page below it while the header (z: var(--t4n-header-z)) and its
	   dropdown stay above it. */
	.t4n-header__backdrop {
		opacity: 0;
		transition: opacity .4s ease-in-out;
	}

	.t4n-header.is-mounted ~ .t4n-header__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: calc(var(--t4n-header-z) - 1);
		background: var(--t4n-header-backdrop);
	}

	.t4n-header.is-open ~ .t4n-header__backdrop {
		opacity: 1;
	}

	@media (prefers-reduced-motion: reduce) {
		.t4n-header__collapse,
		.t4n-header__backdrop {
			transition: none;
		}
	}

	/* Stops the page behind the open menu from scrolling (and, with it, the
	   rubber-band bounce iOS would otherwise show through the backdrop). */
	body.t4n-nav-open {
		overflow: hidden;
	}

	.t4n-header__nav {
		width: 100%;
	}

	.t4n-header__menu {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--t4n-header-panel-gap);
		width: 100%;
	}

	.t4n-header__item {
		flex-wrap: wrap;
		width: 100%;
	}

	/* In the collapsed nav the panel is an accordion inside its own item, not
	   a layer over the page. */
	.t4n-header__panel,
	.t4n-header__panel--cards {
		position: static;
		width: 100%;
		padding: var(--t4n-header-panel-gap) 0 0;
	}

	.t4n-header__submenu--list {
		max-width: none;
		margin-left: 0;
		padding-left: 16px;
	}

	.t4n-header__submenu--cards {
		justify-content: flex-start;
	}

	/* Inside the open mobile menu the search is always shown expanded -- the
	   discreet icon-toggle is a desktop-only affordance, not needed once the
	   whole row is already hidden until the hamburger is opened. Capped to a
	   reasonable width rather than stretched to fill the panel -- a tablet has
	   plenty of room left over at that width. Phones go full width instead,
	   restated below at the 767px breakpoint. */
	.t4n-header__search {
		width: 100%;
		max-width: var(--t4n-header-search-width-tablet);
	}

	.t4n-header__search-toggle {
		display: none;
	}

	.t4n-header__search-form {
		max-width: none;
		width: 100%;
		opacity: 1;
		overflow: visible;
		transition: none;
	}

	.t4n-header__search-input {
		width: 100%;
		flex: 1 1 auto;
	}
}

@media only screen and (max-width: 767px) {

	:root {
		--t4n-header-padding-x: 16px;
		--t4n-header-padding-top: 16px;
		--t4n-header-padding-bottom: 16px;
		--t4n-header-mark-height: 32px;
		--t4n-header-wordmark-height: 22px;
		--t4n-header-panel-gap: 16px;
		--t4n-header-card-width: 100%;
		/* Full-width cards need less minimum height: the label wraps to fewer
		   lines than in the 360px desktop track. */
		--t4n-header-card-height: 148px;
	}

	.t4n-header__card-label {
		font-size: 16px;
		line-height: 1.2;
	}

	/* Below tablet width there is no longer room to spare -- fill the panel
	   like the nav above it, instead of the tablet-only cap. */
	.t4n-header__search {
		max-width: none;
	}
}

@media only screen and (max-width: 420px) {

	:root {
		--t4n-header-mark-height: 28px;
		--t4n-header-wordmark-height: 18px;
		--t4n-header-brand-gap: 8px;
	}
}


/* =========================================================================
   t4n-footer: site-wide footer component (see inc/t4n-footer.php)
   ====================================================================== */

/* Colour tokens default here and are overridden site-wide by
   Tech4Nature Options > Footer. Everything else is a layout token, kept as a
   custom property so the breakpoints below only restate what actually
   changes. Type comes from the global scale: Title L for the title,
   Caption M for every other string. */
:root {
	--t4n-footer-bg: #2D2E2F;
	--t4n-footer-text: #FFFFFF;
	--t4n-footer-muted: #B3B3B3;

	--t4n-footer-padding-x: 45px;
	--t4n-footer-padding-y: 130px;
	--t4n-footer-column-gap: 40px;
	--t4n-footer-title-width: 400px; /* wraps the tagline as the design does */
	--t4n-footer-title-gap: 40px; /* title to about line */
	--t4n-footer-legal-gap: 32px; /* about line to legal lines */
	--t4n-footer-title-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

	--t4n-footer-social-gap: 18px;
	--t4n-footer-social-size: 24px; /* line icons, e.g. the globe */
	--t4n-footer-social-glyph-size: 20px; /* brand silhouettes, optically matched */
	--t4n-footer-social-stroke: 1.5px;

	--t4n-footer-logo-height: 94px;
	--t4n-footer-logo-gap: 16px; /* each side of a separator: 16 + 1 + 16 */
	--t4n-footer-separator: rgba(255, 255, 255, 0.5);

	--t4n-footer-to-top-size: 36px;
	--t4n-footer-to-top-top: 24px;
	--t4n-footer-to-top-gap: 16px;
	--t4n-footer-to-top-disc: #FFFFFF;
	--t4n-footer-to-top-arrow: #000000;
}

.t4n-footer {
	background-color: var(--t4n-footer-bg);
	color: var(--t4n-footer-text);
}

/* The padding lives here rather than on .t4n-footer so the scroll-to-top
   control can be positioned against the padded box and sit in the corner,
   above the content, instead of taking part in the flow. */
.t4n-footer__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--t4n-footer-column-gap);
	padding: var(--t4n-footer-padding-y) var(--t4n-footer-padding-x);
}

/* Intro column ---------------------------------------------------------- */

.t4n-footer__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

/* The blocks own their top spacing, since the design's gaps differ (40px
   under the title, 32px under the about line). max-width keeps a long line --
   the copyright is the widest string in the footer -- wrapping inside the
   column instead of pushing the page into horizontal scroll on a phone. */
.t4n-footer__intro > * {
	max-width: 100%;
}

.t4n-footer__intro > :first-child {
	margin-top: 0;
}

.t4n-footer__title {
	margin: 0;
	/* Bounded so the tagline breaks into the design's short lines instead of
	   running the full width of the column. */
	max-width: var(--t4n-footer-title-width);
	color: var(--t4n-footer-text);
	font-family: var(--t4n-title-l-font, 'Theinhardt-Regular', sans-serif);
	/* The token is the ceiling: under ~560px the title follows the viewport so
	   a three-line tagline never overflows a phone screen. */
	font-size: clamp(20px, 5vw, var(--t4n-title-l-size, 28px));
	font-weight: 400;
	line-height: var(--t4n-title-l-lh, normal);
	text-shadow: var(--t4n-footer-title-shadow);
}

/* About line ------------------------------------------------------------ */

.t4n-footer__about {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--t4n-footer-social-gap);
	margin-top: var(--t4n-footer-title-gap);
}

/* font-weight is restated on every string in the footer because the theme
   sets `font-weight: 300 !important` on body, which would otherwise inherit
   into a component the design draws in the regular weight. */
.t4n-footer__about-text,
.t4n-footer__about-link {
	color: var(--t4n-footer-text);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
	text-decoration: none;
}

.t4n-footer__about-link:hover,
.t4n-footer__about-link:focus {
	color: var(--t4n-footer-text);
	text-decoration: underline;
}

.t4n-footer__social {
	display: flex;
	align-items: center;
	gap: var(--t4n-footer-social-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Flex rather than a list-item line box, so the row is exactly as tall as the
   icons and the design's spacing above and below it survives. */
.t4n-footer__social-item {
	display: flex;
	align-items: center;
}

.t4n-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--t4n-footer-text);
	font-size: var(--t4n-footer-social-glyph-size);
	line-height: 1;
	text-decoration: none;
	transition: color .2s ease-in-out;
}

.t4n-footer__social-link:hover,
.t4n-footer__social-link:focus {
	color: var(--t4n-footer-text);
	text-decoration: none;
}

/* Brand silhouettes are drawn as the outline of the mark -- no fill, thin
   stroke -- and fill in on hover, the same treatment as the header's social
   icons (see .t4n-header__social-link i). */
.t4n-footer__social-icon {
	display: block;
	width: var(--t4n-footer-social-glyph-size);
	height: auto;
	fill: none;
	stroke: currentColor;
	/* In user units of a 24 viewBox drawn at 20px, so ~1.15px on screen --
	   the weight the design's outline has. */
	stroke-width: 1.4;
	transition: fill .2s ease-in-out, opacity .2s ease-in-out;
}

.t4n-footer__social-link:hover .t4n-footer__social-icon:not(.t4n-footer__social-icon--line),
.t4n-footer__social-link:focus .t4n-footer__social-icon:not(.t4n-footer__social-icon--line) {
	fill: currentColor;
}

/* Line icons (the globe) are strokes to begin with: filling them would turn
   them into a blob, so hover only brings them to full strength. */
.t4n-footer__social-icon--line {
	width: var(--t4n-footer-social-size);
	stroke-width: 1.2;
	stroke-linecap: round;
	opacity: .9;
}

.t4n-footer__social-link:hover .t4n-footer__social-icon--line,
.t4n-footer__social-link:focus .t4n-footer__social-icon--line {
	opacity: 1;
}

/* Font Awesome glyphs get the outline through the text stroke, exactly as in
   the header; guarded so that without stroke support they stay filled and
   visible rather than becoming transparent gaps. */
@supports (-webkit-text-stroke: 1px currentColor) {
	.t4n-footer__social-link i {
		-webkit-text-fill-color: transparent;
		-webkit-text-stroke: var(--t4n-footer-social-stroke) currentColor;
		transition: -webkit-text-fill-color .2s ease-in-out;
	}

	.t4n-footer__social-link:hover i,
	.t4n-footer__social-link:focus i {
		-webkit-text-fill-color: currentColor;
	}
}

/* Legal ----------------------------------------------------------------- */

.t4n-footer__legal {
	margin-top: var(--t4n-footer-legal-gap);
}

.t4n-footer__copyright,
.t4n-footer__credit {
	margin: 0;
	color: var(--t4n-footer-text);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
}

.t4n-footer__credit-link {
	color: var(--t4n-footer-muted);
	text-decoration: none;
	transition: color .2s ease-in-out;
}

.t4n-footer__credit-link:hover,
.t4n-footer__credit-link:focus {
	color: var(--t4n-footer-text);
	text-decoration: underline;
}

/* Partner logos --------------------------------------------------------- */

.t4n-footer__logos {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: var(--t4n-footer-logo-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.t4n-footer__logo {
	display: flex;
	align-items: center;
	gap: var(--t4n-footer-logo-gap);
}

/* The separator is drawn here rather than baked into the artwork, so a single
   logo can be replaced without re-cutting the whole strip. */
.t4n-footer__logo + .t4n-footer__logo::before {
	content: "";
	flex: 0 0 auto;
	width: 1px;
	height: var(--t4n-footer-logo-height);
	background-color: var(--t4n-footer-separator);
}

.t4n-footer__logo-link {
	display: block;
	line-height: 0;
	text-decoration: none;
}

/* One height for every slot, so the strip reads as one row whatever is
   uploaded; width follows each logo's own aspect ratio. */
.t4n-footer__logo-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--t4n-footer-logo-height);
}

/* Scroll to top --------------------------------------------------------- */

.t4n-footer__to-top {
	position: absolute;
	top: var(--t4n-footer-to-top-top);
	right: var(--t4n-footer-padding-x);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--t4n-footer-to-top-gap);
	color: var(--t4n-footer-text);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
}

.t4n-footer__to-top:hover,
.t4n-footer__to-top:focus {
	color: var(--t4n-footer-text);
	text-decoration: none;
}

.t4n-footer__to-top-icon {
	display: block;
	flex: 0 0 auto;
	width: var(--t4n-footer-to-top-size);
	height: var(--t4n-footer-to-top-size);
	transition: transform .2s ease-in-out;
}

.t4n-footer__to-top:hover .t4n-footer__to-top-icon,
.t4n-footer__to-top:focus .t4n-footer__to-top-icon {
	transform: translateY(-3px);
}

.t4n-footer__to-top-disc {
	fill: var(--t4n-footer-to-top-disc);
}

.t4n-footer__to-top-arrow {
	stroke: var(--t4n-footer-to-top-arrow);
}

/* Responsive ------------------------------------------------------------ */

@media only screen and (max-width: 1279px) {

	:root {
		--t4n-footer-padding-y: 96px;
		--t4n-footer-column-gap: 32px;
		--t4n-footer-logo-height: 80px;
	}
}

/* The logo strip drops under the intro column here rather than at a smaller
   width: side by side, the two stop fitting at about 1150px and the strip
   wraps mid-row, which would leave a separator at the start of a line. The
   scroll-to-top control joins the flow at the same time, since the reduced top
   padding no longer leaves room for it in the corner. */
@media only screen and (max-width: 1199px) {

	.t4n-footer__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.t4n-footer__to-top {
		position: static;
		align-self: flex-end;
	}

	.t4n-footer__logos {
		justify-content: flex-start;
	}
}

@media only screen and (max-width: 991px) {

	:root {
		--t4n-footer-padding-x: 32px;
		--t4n-footer-padding-y: 64px;
		--t4n-footer-logo-height: 72px;
	}
}

@media only screen and (max-width: 767px) {

	:root {
		--t4n-footer-padding-x: 20px;
		--t4n-footer-padding-y: 48px;
		--t4n-footer-title-gap: 32px;
		--t4n-footer-legal-gap: 24px;
		--t4n-footer-social-gap: 16px;
		--t4n-footer-logo-height: 56px;
		--t4n-footer-logo-gap: 12px;
	}

	.t4n-footer__inner {
		gap: 32px;
	}

	/* A wrapped row would start a line with a separator, so on phones the
	   strip becomes a plain wrapping grid without them. */
	.t4n-footer__logo + .t4n-footer__logo::before {
		display: none;
	}

	.t4n-footer__logos {
		gap: 24px var(--t4n-footer-logo-gap);
	}
}

/* === t4n-hero: home hero (see inc-blocks/banner_video.php, inc/t4n-hero.php) === */
:root {
	--t4n-hero-bg: #122D47;
	--t4n-hero-overlay: rgba(0, 0, 0, 0.22);
	--t4n-hero-text: #FFFFFF;
	--t4n-hero-padding-x: clamp(24px, 6vw, 84px);
	--t4n-hero-padding-y: clamp(48px, 14vw, 216px);
	--t4n-hero-content-width: 578px;
	--t4n-hero-content-gap: 79px;
	--t4n-hero-title-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	--t4n-hero-min-height: 480px;
	--t4n-hero-max-height: 940px;
}

.t4n-hero {
	position: relative;
	display: flex;
	width: 100%;
	overflow: hidden;
	background: var(--t4n-hero-bg);
	aspect-ratio: 1512 / 939;
	min-height: var(--t4n-hero-min-height);
	max-height: var(--t4n-hero-max-height);
}

.t4n-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--t4n-crop-pos, center);
	transform: scale(var(--t4n-crop-zoom, 1));
	transform-origin: var(--t4n-crop-pos, center);
	border: 0;
}

/* Later in the DOM than the image, so a playing video covers the poster. */
.t4n-hero__media--video {
	z-index: 1;
	overflow: hidden;
}

/* Set by js/t4n-hero.js when the player reports it cannot play. Removing the
   frame from the flow reveals the background image (or the hero's own colour)
   instead of the player's opaque error panel. */
.t4n-hero--video-unavailable .t4n-hero__media--video {
	display: none;
}

.t4n-hero__video-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	border: 0;
}

/* A Vimeo <iframe> ignores object-fit: the player letterboxes the clip inside
   the frame, so the background image showed as bands whenever the hero was
   not the clip's shape (wide screens, phones). Give the frame the clip's
   ratio (426x240) and make it cover the hero, centred; the wrapper's
   overflow clips the rest. */
.t4n-hero__media--video {
	container-type: size;
}

iframe.t4n-hero__video-frame {
	inset: auto;
	top: 50%;
	left: 50%;
	width: max(100cqw, 177.5cqh);
	height: max(100cqh, 56.34cqw);
	transform: translate(-50%, -50%);
}

.t4n-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--t4n-hero-overlay);
}

.t4n-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: start;
	width: 100%;
	padding: var(--t4n-hero-padding-y) var(--t4n-hero-padding-x);
}

.t4n-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--t4n-hero-content-gap);
	max-width: var(--t4n-hero-content-width);
}

.t4n-hero__title {
	margin: 0;
	color: var(--t4n-hero-text);
	text-shadow: var(--t4n-hero-title-shadow);
}

.t4n-hero__cta {
	display: flex;
}

@media (max-width: 991px) {
	:root {
		--t4n-hero-content-gap: 48px;
		--t4n-hero-padding-y: clamp(40px, 12vw, 140px);
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-hero-min-height: 420px;
		--t4n-hero-content-gap: 32px;
		--t4n-hero-padding-x: clamp(20px, 6vw, 32px);
		--t4n-hero-padding-y: clamp(32px, 10vw, 80px);
	}

	.t4n-hero {
		aspect-ratio: auto;
	}

	.t4n-hero__content {
		max-width: 100%;
	}
}

/* === t4n-featured-cards: image card grid (see inc-blocks/featured_content.php,
      inc/t4n-featured-cards.php) === */
:root {
	--t4n-featured-cards-bg: #E9E3D3;
	--t4n-featured-cards-text: #083B49;
	--t4n-featured-cards-padding-x: 180px;
	--t4n-featured-cards-padding-y: 80px;
	--t4n-featured-cards-gap: 24px;
	--t4n-featured-cards-columns: 3;
	/* Only used when the block carries an eyebrow/title pair. */
	--t4n-featured-cards-header-gap: 16px;
	--t4n-featured-cards-header-margin: 48px;

	--t4n-card-bg: #122D47;
	--t4n-card-text: #FFFFFF;
	--t4n-card-padding: 24px;
	--t4n-card-radius: 2px;
	/* Card 368x549 in the design. Kept as a ratio so the tiles keep their
	   proportion at every column width instead of a fixed height. */
	--t4n-card-ratio: 368 / 549;
	--t4n-card-min-height: 320px;
	/* The design's card width. Caps the grid (see below) so a card is never
	   wider -- and, through the ratio, never taller -- than in the design. */
	--t4n-card-max-width: 368px;
	/* Flat 50% black -- darkens the photo evenly so white text sits on it,
	   rather than a wash that varies by position. */
	--t4n-card-overlay: rgba(0, 0, 0, 0.50);
	--t4n-card-arrow-size: 19px;
	--t4n-card-arrow-inset: 10px;
	--t4n-card-title-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
	--t4n-card-title-width: 200px;
	--t4n-card-text-gap: 50px;
	--t4n-card-text-padding-top: 12px;
	--t4n-card-text-padding-bottom: 64px;
}

.t4n-featured-cards {
	padding: var(--t4n-featured-cards-padding-y) var(--t4n-featured-cards-padding-x);
	background: var(--t4n-featured-cards-bg);
}

/* The legacy `header { background: white !important; font-family: Graphik }`
   rule (~line 1071) matches this element, so both are neutralised locally
   rather than edited, since the rest of the site still relies on it. The
   header is capped to the grid's own width so it starts flush with the first
   card rather than with the band's padding. */
.t4n-featured-cards__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--t4n-featured-cards-header-gap);
	max-width: calc(
		var(--t4n-featured-cards-columns) * var(--t4n-card-max-width)
		+ (var(--t4n-featured-cards-columns) - 1) * var(--t4n-featured-cards-gap)
	);
	margin: 0 auto var(--t4n-featured-cards-header-margin);
	background: transparent !important;
	font-family: inherit;
}

.t4n-featured-cards__eyebrow {
	margin: 0;
	color: var(--t4n-featured-cards-text);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
}

/* Class-based and tag-agnostic, so the heading level stays a document-outline
   choice; the size and line-height carry !important only to outrank the legacy
   `h2...h6 { font-size: ... !important }` rules earlier in this file. */
.t4n-featured-cards__title {
	margin: 0;
	color: var(--t4n-featured-cards-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal) !important;
}

/* Centred and capped at the design's card width, so fewer columns give the
   same size card with wider outer margins rather than stretching each tile.
   At 1512px the cap equals the available width exactly (3 x 368 + 2 x 24). */
.t4n-featured-cards__list {
	display: grid;
	grid-template-columns: repeat(var(--t4n-featured-cards-columns), minmax(0, 1fr));
	gap: var(--t4n-featured-cards-gap);
	max-width: calc(
		var(--t4n-featured-cards-columns) * var(--t4n-card-max-width)
		+ (var(--t4n-featured-cards-columns) - 1) * var(--t4n-featured-cards-gap)
	);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* The ratio lives on the grid item, not the card: the row then sizes to the
   tallest item and every card stretches to match, so a card with a longer
   title grows the whole row instead of standing taller than its siblings. */
.t4n-featured-cards__item {
	display: flex;
	aspect-ratio: var(--t4n-card-ratio);
	min-height: var(--t4n-card-min-height);
}

.t4n-card {
	position: relative;
	z-index: 0;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	background: var(--t4n-card-bg);
	color: var(--t4n-card-text);
}

.t4n-card__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--t4n-crop-pos, center);
	transform-origin: var(--t4n-crop-pos, center);
}

.t4n-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--t4n-card-overlay);
}

.t4n-card__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--t4n-card-padding) var(--t4n-card-padding) 0;
}

.t4n-card__arrow {
	display: flex;
	align-self: flex-end;
	padding: var(--t4n-card-arrow-inset);
	border-radius: var(--t4n-card-radius);
}

.t4n-card__arrow-icon {
	width: var(--t4n-card-arrow-size);
	height: var(--t4n-card-arrow-size);
	color: var(--t4n-card-text);
}

.t4n-card__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--t4n-card-text-gap);
	padding-top: var(--t4n-card-text-padding-top);
	padding-bottom: var(--t4n-card-text-padding-bottom);
	border-radius: var(--t4n-card-radius);
}

/* Styled by class, never by tag, so the editor can pick any heading level
   without changing the look. font-size/line-height need !important only
   because the legacy `h2, .h2 { font-size: ... !important }` rules further up
   this file would otherwise win on the chosen tag. */
.t4n-card__title {
	margin: 0;
	/* Wraps to the design's short lines rather than the full card width. */
	max-width: var(--t4n-card-title-width);
	color: var(--t4n-card-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal) !important;
	text-shadow: var(--t4n-card-title-shadow);
}

/* t4n-featured-cards--v2: the tech4nature-award variant (see
   inc/t4n-featured-cards.php's "Card Style" field) -- a wider title and a
   plain, non-underlined link, everything else identical to the default card. */
.t4n-featured-cards--v2 {
	--t4n-card-title-width: 320px;
}

.t4n-featured-cards--v2 .t4n-card__link {
	text-decoration: none !important;
}

/* Client request, /tech4nature-award/ only: a tighter bottom edge in place of
   the desktop 80px. Scoped to the page rather than the variant, and left to
   the smaller 64/48px figures the ladder already uses below 1200px. */
@media (min-width: 1200px) {
	.page-id-868 .t4n-featured-cards {
		padding-bottom: 40px;
	}
}

/* Stretched over the whole tile so the card is clickable while staying a
   single link in the accessibility tree. */
.t4n-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.t4n-card__image {
	transform: scale(var(--t4n-crop-zoom, 1));
}

.t4n-card:hover .t4n-card__image,
.t4n-card:focus-within .t4n-card__image {
	transform: scale(calc(var(--t4n-crop-zoom, 1) * 1.03));
}

.t4n-card__image {
	transition: transform .4s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
	.t4n-card__image {
		transition: none;
	}

	.t4n-card:hover .t4n-card__image,
	.t4n-card:focus-within .t4n-card__image {
		transform: scale(var(--t4n-crop-zoom, 1));
	}
}

@media (max-width: 1399px) {
	:root {
		--t4n-featured-cards-padding-x: 100px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-featured-cards-padding-x: 60px;
		--t4n-featured-cards-padding-y: 64px;
		--t4n-card-text-gap: 32px;
		--t4n-card-text-padding-bottom: 40px;
		--t4n-card-title-width: 100%;
	}
}

@media (max-width: 991px) {
	:root {
		--t4n-featured-cards-columns: 2;
		--t4n-featured-cards-padding-x: 40px;
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-featured-cards-columns: 1;
		--t4n-featured-cards-padding-x: 10px;
		--t4n-featured-cards-padding-y: 48px;
		--t4n-card-padding: 20px;
		--t4n-card-text-gap: 24px;
		--t4n-card-text-padding-bottom: 32px;
		/* Floor for the one-card-per-row tile. */
		--t4n-card-min-height: 340px;
	}

	.t4n-featured-cards__list {
		max-width: none;
	}

	/* One card per row, kept at the design's portrait ratio and capped near
	   its desktop width, centred in the band. */
	.t4n-featured-cards__item {
		aspect-ratio: 368 / 549;
		max-width: 378px;
		margin: auto;
		width: 80%;
	}
}

/* === t4n-latest-news: recent posts grid (see inc/t4n-latest-news.php) === */
:root {
	--t4n-latest-news-bg: #F0EFEC;
	--t4n-latest-news-heading: #333333;
	--t4n-latest-news-padding-x: 180px;
	--t4n-latest-news-padding-y: 64px;
	--t4n-latest-news-header-gap: 24px;
	--t4n-latest-news-columns: 3;
	--t4n-latest-news-gap: 8px;

	--t4n-news-card-text: #083B49;
	--t4n-news-card-meta: rgba(8, 59, 73, 0.80);
	--t4n-news-card-gap: 10px;
	--t4n-news-card-radius: 4px;
	/* 379x317 in the design; kept as a ratio so the thumbnails stay aligned
	   across the row at any column width. */
	--t4n-news-card-image-ratio: 379 / 317;
	--t4n-news-card-image-placeholder: rgba(8, 59, 73, 0.10);
}

.t4n-latest-news {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--t4n-latest-news-header-gap);
	padding: var(--t4n-latest-news-padding-y) var(--t4n-latest-news-padding-x);
	background: var(--t4n-latest-news-bg);
}

/* The legacy `header { background: white !important; font-family: Graphik }`
   rule (~line 1071) matches this element, so both are neutralised locally
   rather than edited, since the rest of the site still relies on it. */
.t4n-latest-news__header {
	width: 100%;
	background: transparent !important;
	font-family: inherit;
}

/* Styled by class, never by tag, so the editor picks the heading level purely
   for the document outline. font-size/line-height need !important only to beat
   the legacy `h2, .h2 { font-size: … !important }` rules earlier in this file,
   which would otherwise win on whichever tag was chosen. */
.t4n-latest-news__title {
	margin: 0;
	color: var(--t4n-latest-news-heading);
	font-family: var(--t4n-title-xxl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-title-xxl-size, 40px) !important;
	font-weight: 400;
	line-height: var(--t4n-title-xxl-lh, normal) !important;
}

.t4n-latest-news__subtitle {
	margin: 0;
	color: var(--t4n-latest-news-heading);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
}

.t4n-latest-news__list {
	display: grid;
	grid-template-columns: repeat(var(--t4n-latest-news-columns), minmax(0, 1fr));
	gap: calc(var(--t4n-latest-news-gap) * 3) var(--t4n-latest-news-gap);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.t4n-latest-news__item {
	display: flex;
}

.t4n-news-card {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--t4n-news-card-gap);
}

/* The legacy `* { border-radius: 0 !important }` reset near the top of this
   file zeroes any radius, so the design's 4px has to be forced. */
.t4n-news-card__image {
	width: 100%;
	height: auto;
	aspect-ratio: var(--t4n-news-card-image-ratio);
	object-fit: cover;
	border-radius: var(--t4n-news-card-radius) !important;
}

.t4n-news-card__image--empty {
	display: block;
	background: var(--t4n-news-card-image-placeholder);
}

/* Same pill as .t4n-news-tile__tag (inc/t4n-news-tile.php), reusing its
   colour tokens so both card designs read as one system. This card has no
   hover state of its own, so unlike the tile the pill never swaps colour. */
.t4n-news-card__tag {
	/* 4px on top of this card's own flex gap: the same "closer to the title
	   than to the image" rule t4n-news-tile__tag uses. */
	margin: 0 0 4px;
	padding: 8px 16px;
	background: var(--t4n-news-tile-pill-bg, #E3E2DF);
	border-radius: 80px !important;
	color: var(--t4n-news-tile-pill-text, rgba(8, 59, 73, 0.80));
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
}

.t4n-news-card__title {
	margin: 0;
	color: var(--t4n-news-card-text);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px) !important;
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3) !important;
}

/* Stretched over the whole card so the thumbnail and title share one link,
   which is also why nothing else in the card may be a link. */
.t4n-news-card__link {
	color: var(--t4n-news-card-text) !important;
	text-decoration: none;
}

.t4n-news-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.t4n-news-card__link:hover,
.t4n-news-card__link:focus {
	text-decoration: underline;
}

.t4n-news-card__date {
	color: var(--t4n-news-card-meta);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
}

@media (max-width: 1399px) {
	:root {
		--t4n-latest-news-padding-x: 100px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-latest-news-padding-x: 60px;
	}
}

@media (max-width: 991px) {
	:root {
		--t4n-latest-news-columns: 2;
		--t4n-latest-news-padding-x: 40px;
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-latest-news-columns: 1;
		--t4n-latest-news-padding-x: 20px;
		--t4n-latest-news-padding-y: 48px;
		/* One card per row: at the design's portrait-ish ratio a full-width
		   thumbnail would be taller than most of the phone screen. */
		--t4n-news-card-image-ratio: 16 / 9;
	}
}
/* === t4n-breadcrumb: trail band above a page hero (see inc/t4n-breadcrumb.php) === */
:root {
	--t4n-breadcrumb-bg: #083B49;
	--t4n-breadcrumb-text: #FFFFFF;
	--t4n-breadcrumb-padding-x: 64px;
	--t4n-breadcrumb-padding-y: 12px;
	--t4n-breadcrumb-gap: 4px;
	--t4n-breadcrumb-separator-size: 24px;
}

/* The band is meant to sit flush against the hero below it, so it carries no
   margin of its own and neither does the list inside it. */
.t4n-breadcrumb {
	display: block;
	padding: var(--t4n-breadcrumb-padding-y) var(--t4n-breadcrumb-padding-x);
	margin: 0;
	background: var(--t4n-breadcrumb-bg);
	color: var(--t4n-breadcrumb-text);
}

.t4n-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--t4n-breadcrumb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.t4n-breadcrumb__item {
	display: flex;
	align-items: flex-end;
	gap: var(--t4n-breadcrumb-gap);
	min-width: 0;
}

.t4n-breadcrumb__separator {
	flex: none;
	width: var(--t4n-breadcrumb-separator-size);
	height: var(--t4n-breadcrumb-separator-size);
}

.t4n-breadcrumb__link,
.t4n-breadcrumb__current {
	color: var(--t4n-breadcrumb-text);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
}

/* Colour is forced past Bootstrap's own `a` colour, and the hover state is
   restated at (0,2,0) so its `a:hover { text-decoration: underline }` (0,1,1)
   does not underline the whole trail on the way past. */
.t4n-breadcrumb__link {
	color: var(--t4n-breadcrumb-text) !important;
	text-decoration: none;
}

.t4n-breadcrumb__link:hover,
.t4n-breadcrumb__link:focus {
	text-decoration: underline;
}

@media (max-width: 991px) {
	:root {
		--t4n-breadcrumb-padding-x: 40px;
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-breadcrumb-padding-x: 20px;
		/* The chevron is oversized next to 16px text once the trail wraps. */
		--t4n-breadcrumb-separator-size: 20px;
	}

	/* On a phone the trail is always ONE line. The parents keep their natural
	   width while they fit; the current page (last item) takes what is left
	   and is cut with an ellipsis when it does not fit. */
	.t4n-breadcrumb__list {
		flex-wrap: nowrap;
		align-items: center;
		overflow: hidden;
	}

	.t4n-breadcrumb__item {
		flex: 0 1 auto;
		min-width: 0;
		align-items: center;
		white-space: nowrap;
	}

	/* A parent crumb that is itself too long shrinks with an ellipsis too,
	   so the trail can never spill out of the band. */
	.t4n-breadcrumb__link {
		display: block;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.t4n-breadcrumb__item:last-child {
		flex: 1 1 0;
		min-width: 0;
	}

	.t4n-breadcrumb__item:last-child .t4n-breadcrumb__current {
		display: block;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* === t4n-post-hero: single news post hero (see single.php) ===
   Desktop keeps the legacy layout (fixed 75vh body, label and date/share row
   absolutely positioned). On a phone those absolute pieces collided with the
   breadcrumb above and the title in the middle, so the body becomes a normal
   column: label, title, date + share, each in its own slot, and the hero grows
   with its content instead of a fixed height. */
.t4n-post-hero {
	position: relative;
}

/* Every text block of a news post -- breadcrumb, hero, article body, related
   news heading -- sits exactly this far from each screen edge on a phone. It
   is the TOTAL of every wrapper's padding and margin, not one padding: the
   wrappers that used to add to it (Bootstrap container, row, col-9) are zeroed
   below so the number here is the number on screen. */
:root {
	--t4n-post-gutter: 24px;
}

@media (max-width: 767px) {
	body.single-post .t4n-breadcrumb {
		--t4n-breadcrumb-padding-x: var(--t4n-post-gutter);
	}

	body.single-post .t4n-related-news {
		--t4n-related-news-padding-x: var(--t4n-post-gutter);
	}

	.t4n-post-body,
	.t4n-post-body__container {
		max-width: 100%;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.t4n-post-body__row {
		margin-left: 0;
		margin-right: 0;
	}

	.t4n-post-body__content {
		flex: 0 0 100%;
		max-width: 100%;
		padding-left: var(--t4n-post-gutter) !important;
		padding-right: var(--t4n-post-gutter) !important;
	}

	.t4n-post-hero__bg {
		top: 0;
		bottom: 0;
		height: auto !important;
	}

	/* The whole side budget is --t4n-post-gutter: this padding is the only
	   thing between the text and the screen edge (Bootstrap's own container
	   max-width and gutters are cancelled). */
	.t4n-post-hero__container {
		max-width: 100%;
		padding-left: var(--t4n-post-gutter);
		padding-right: var(--t4n-post-gutter);
	}

	.t4n-post-hero__container > .row {
		margin-left: 0;
		margin-right: 0;
	}

	.t4n-post-hero__body {
		position: relative;
		flex: 0 0 100%;
		max-width: 100%;
		height: auto !important;
		min-height: 50vh;
		flex-direction: column;
		align-items: stretch !important;
		justify-content: space-between;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.t4n-post-hero__label,
	.t4n-post-hero__meta {
		position: static !important;
		width: 100%;
	}

	.t4n-post-hero__label {
		padding-top: 24px !important;
	}

	.t4n-post-hero__title {
		flex: 1 0 auto;
		width: 100%;
		max-width: 100%;
		padding: 24px 0 !important;
		margin: 0;
		font-size: clamp(24px, 7vw, 30px) !important;
		line-height: 1.2 !important;
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	.t4n-post-hero__meta {
		margin: 0;
		padding-bottom: 24px !important;
		row-gap: 12px;
	}

	.t4n-post-hero__meta > .col-6 {
		flex: 0 0 100%;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.t4n-post-hero__meta > .col-6.justify-content-end {
		justify-content: flex-start !important;
	}

	.t4n-post-hero__meta ul {
		margin-bottom: 0;
	}
}

/* === t4n-site-hero: single site/park hero (see single.php) ===
   The hero text is absolutely positioned over a full-height photo. On a phone
   its bottom Ecosystem/Area row started at -15px (Bootstrap row margin) and the
   area value (a 30px bold h2, with 48px of side padding) ran past the right
   edge, so the page could be dragged sideways and the photo no longer looked
   centred. Everything below keeps the hero inside the viewport at any width. */
@media (max-width: 767px) {
	.t4n-site-hero {
		left: 0;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.t4n-site-hero > .row {
		margin-left: 0;
		margin-right: 0;
	}

	/* Same 20px side gutter as the breadcrumb band above. */
	.t4n-site-hero__head,
	.t4n-site-hero__stat {
		padding-left: 20px !important;
		padding-right: 20px !important;
		min-width: 0;
	}

	.t4n-site-hero__head {
		max-width: 100%;
	}

	.t4n-site-hero__title {
		font-size: clamp(28px, 9vw, 40px) !important;
		overflow-wrap: anywhere;
	}

	.t4n-site-hero__stats {
		left: 0 !important;
		right: 0;
		width: 100%;
		max-width: 100%;
	}

	.t4n-site-hero__stats > [class*="col-"] {
		min-width: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.t4n-site-hero__stat {
		padding-bottom: 24px !important;
	}

	/* The two figures share one row, so each gets half of it: sized to the
	   width available and allowed to break rather than widen the page. */
	.t4n-site-hero__stat .h2,
	.t4n-site-hero__stat h2 {
		font-size: clamp(16px, 5.2vw, 24px) !important;
		line-height: 1.25 !important;
		overflow-wrap: anywhere;
	}
}
/* === t4n-page-hero: interior page title band (see inc/t4n-page-hero.php) === */
:root {
	--t4n-page-hero-bg: #122D47;
	--t4n-page-hero-text: #FFFFFF;
	/* Darkens the artwork so the title keeps its contrast whatever the image
	   behind it is; same role as --t4n-hero-overlay on the home hero. */
	--t4n-page-hero-overlay: rgba(0, 0, 0, 0.20);
	/* The alternative wash, for a bright photo: black in the corner the title
	   sits in, gone by the opposite one, so the artwork stays readable
	   everywhere the type is not. */
	--t4n-page-hero-overlay-diagonal: linear-gradient(51deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
	--t4n-page-hero-title-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	/* The design wraps a long title into a column rather than letting it run
	   the width of the band; a short one is unaffected. */
	--t4n-page-hero-measure: 640px;
	--t4n-page-hero-padding-start: 180px;
	/* A block can set its own inset inline with -start-set (the "Side
	   Padding" field, 80px on the country pages). An inline property beats
	   any stylesheet rule, so -start-cap is the only way to hold a ceiling
	   over it as the page narrows. */
	--t4n-page-hero-padding-start-cap: 400px;
	--t4n-page-hero-padding-end: 44px;
	/* 216px of the design's 462px band sits above the title. Kept
	   proportional (216/1512) so the title holds the same relative position
	   as the viewport narrows, with a floor for small screens. */
	--t4n-page-hero-padding-top: clamp(96px, 14.3vw, 216px);
	--t4n-page-hero-padding-bottom: 40px;
	/* A block's own padding_bottom field rides in on -set, always beating this
	   rule as an inline style; -cap holds a ceiling over it so a page-specific
	   260px does not blow the band out on a phone, the same technique
	   --t4n-image-band-height-cap uses. */
	--t4n-page-hero-padding-bottom-cap: 400px;
	--t4n-page-hero-min-height: 462px;
}

.t4n-page-hero {
	position: relative;
	display: flex;
	width: 100%;
	min-height: var(--t4n-page-hero-min-height);
	overflow: hidden;
	background: var(--t4n-page-hero-bg);
}

/* A real <img> rather than a CSS background, so the browser can pick a size
   from its srcset; positioned to behave like one. The object-position falls
   back through two layers: the per-field crop (--t4n-crop-pos) if one was set
   with the Crop button, else the older "Image Position" keyword field, else
   dead centre -- so every hero saved before either field existed keeps
   drawing exactly the centre crop it always did. */
.t4n-page-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--t4n-crop-pos, var(--t4n-page-hero-image-position, center));
	transform: scale(var(--t4n-crop-zoom, 1));
	transform-origin: var(--t4n-crop-pos, var(--t4n-page-hero-image-position, center));
	border: 0;
}

.t4n-page-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--t4n-page-hero-overlay);
}

.t4n-page-hero--overlay-diagonal .t4n-page-hero__overlay {
	background: var(--t4n-page-hero-overlay-diagonal);
}

.t4n-page-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	width: 100%;
	padding:
		var(--t4n-page-hero-padding-top)
		var(--t4n-page-hero-padding-end)
		min(var(--t4n-page-hero-padding-bottom-set, var(--t4n-page-hero-padding-bottom)), var(--t4n-page-hero-padding-bottom-cap))
		min(var(--t4n-page-hero-padding-start-set, var(--t4n-page-hero-padding-start)), var(--t4n-page-hero-padding-start-cap));
}

/* Styled by class, never by tag, so the editor picks the heading level purely
   for the document outline. font-size/line-height need !important only to beat
   the legacy `h1, .h1 { font-size: … !important }` rules earlier in this file,
   which would otherwise win on whichever tag was chosen. */
.t4n-page-hero__title {
	margin: 0;
	max-width: var(--t4n-page-hero-measure);
	color: var(--t4n-page-hero-text);
	font-family: var(--t4n-title-xxl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-title-xxl-size, 40px) !important;
	font-weight: 400;
	line-height: var(--t4n-title-xxl-lh, normal) !important;
	text-shadow: var(--t4n-page-hero-title-shadow);
}

@media (max-width: 1399px) {
	:root {
		--t4n-page-hero-padding-start: 100px;
		--t4n-page-hero-padding-start-cap: 100px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-page-hero-padding-start: 60px;
		--t4n-page-hero-padding-start-cap: 60px;
		--t4n-page-hero-padding-end: 60px;
	}
}

@media (max-width: 991px) {
	:root {
		--t4n-page-hero-padding-start: 40px;
		--t4n-page-hero-padding-start-cap: 40px;
		--t4n-page-hero-padding-end: 40px;
		--t4n-page-hero-min-height: 380px;
		--t4n-page-hero-padding-bottom-cap: 200px;
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-page-hero-padding-start: 20px;
		--t4n-page-hero-padding-start-cap: 20px;
		--t4n-page-hero-padding-end: 20px;
		--t4n-page-hero-padding-bottom: 32px;
		--t4n-page-hero-min-height: 320px;
		--t4n-page-hero-padding-bottom-cap: 120px;
	}

	/* The token still governs the size; min() only steps in on the narrow
	   phones where a long page title at the full 40px would break out of the
	   band, so the type stays consistent with the rest of the site wherever
	   it fits. */
	.t4n-page-hero__title {
		font-size: min(var(--t4n-title-xxl-size, 40px), 8.5vw) !important;
	}
}
/* === t4n-text-columns: two-column text band (see inc/t4n-text-columns.php) === */
:root {
	--t4n-text-columns-bg: #0B848E;
	--t4n-text-columns-text: #FFFFFF;
	--t4n-text-columns-padding-x: 180px;
	--t4n-text-columns-padding-y: 64px;
	/* A block can override the 64px inline with --t4n-text-columns-padding-y-set
	   (the "Vertical Padding" field). That is a desktop decision, so this caps
	   it once the band reaches the narrow end of the ladder -- an inline
	   property beats any stylesheet rule, so a min() is the only way to hold a
	   ceiling over it. Effectively no ceiling until then. */
	--t4n-text-columns-padding-y-cap: 240px;
	--t4n-text-columns-header-gap: 24px;
	--t4n-text-columns-gap: 64px;
	/* The design insets the trailing column so its measure matches the leading
	   one instead of running to the section's edge. Collapses once the columns
	   stack, where there is no second column to align with. */
	--t4n-text-columns-inset-end: 64px;
	/* A lone column stops short of the right edge instead, so its measure
	   matches the two-column bands rather than running the full width. */
	--t4n-text-columns-inset-single: 300px;
	--t4n-text-columns-paragraph-gap: 16px;
	/* The optional "Read more" under the copy. */
	--t4n-text-columns-more-gap: 8px;
	--t4n-text-columns-arrow-size: 18px;

	/* Only used when the block carries a banner image. 424 of the design's
	   1512-wide band, kept as a share of the viewport so the crop holds its
	   proportion, with a floor and a ceiling for the extremes. */
	--t4n-text-columns-banner-height: clamp(220px, 30vw, 460px);
	--t4n-text-columns-overlay: rgba(0, 0, 0, 0.30);
	--t4n-text-columns-banner-zoom: 1.05;
	--t4n-text-columns-banner-transition: .6s ease-out;
}

/* The band is the coloured wrapper; its padding sits on __body instead, so an
   optional banner image above the copy can bleed the full width. */
.t4n-text-columns {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	background: var(--t4n-text-columns-bg);
	color: var(--t4n-text-columns-text);
}

.t4n-text-columns__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--t4n-text-columns-header-gap);
	padding:
		min(
			var(--t4n-text-columns-padding-y-set, var(--t4n-text-columns-padding-y)),
			var(--t4n-text-columns-padding-y-cap)
		)
		var(--t4n-text-columns-padding-x);
}

/* A fixed frame rather than the file's own ratio, so the crop matches the
   design whatever an editor uploads. */
.t4n-text-columns__banner {
	position: relative;
	display: block;
	width: 100%;
	height: var(--t4n-text-columns-banner-height);
	margin: 0;
	overflow: hidden;
}

/* A real <img> rather than a CSS background, so the browser can pick a size
   from its srcset. */
.t4n-text-columns__banner-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--t4n-crop-pos, center);
	border: 0;
	transform: scale(var(--t4n-crop-zoom, 1));
	transform-origin: var(--t4n-crop-pos, center);
	transition: transform var(--t4n-text-columns-banner-transition);
}

.t4n-text-columns__banner-overlay {
	position: absolute;
	inset: 0;
	background: var(--t4n-text-columns-overlay);
	transition: opacity var(--t4n-text-columns-banner-transition);
}

/* Decorative only: the wash lifts and the photo eases in slightly, revealing
   nothing that was not already visible, so there is nothing a keyboard user
   could miss by never triggering it. */
.t4n-text-columns__banner:hover .t4n-text-columns__banner-overlay {
	opacity: 0;
}

.t4n-text-columns__banner:hover .t4n-text-columns__banner-image {
	transform: scale(calc(var(--t4n-crop-zoom, 1) * var(--t4n-text-columns-banner-zoom)));
}

@media (prefers-reduced-motion: reduce) {
	.t4n-text-columns__banner-image,
	.t4n-text-columns__banner-overlay {
		transition: none;
	}

	.t4n-text-columns__banner:hover .t4n-text-columns__banner-image {
		transform: scale(var(--t4n-crop-zoom, 1));
	}
}

/* Class-based, tag-agnostic — see the note on .t4n-page-hero__title for why
   the size and line-height carry !important. */
.t4n-text-columns__title {
	margin: 0;
	color: var(--t4n-text-columns-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal) !important;
}

.t4n-text-columns__columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--t4n-text-columns-gap);
	width: 100%;
}

.t4n-text-columns--single .t4n-text-columns__columns {
	grid-template-columns: minmax(0, 1fr);
}

.t4n-text-columns--single .t4n-text-columns__column {
	padding-right: var(--t4n-text-columns-inset-single);
	max-width: 1200px;
}

/* Heading in the left half, copy in the right (the "Title Position" field).
   The two halves are equal, so the pair lines up with the two-column bands
   above and below it; the columns inside then stack in their own half, and
   a lone one drops the measure inset it would otherwise carry. */
.t4n-text-columns--title-beside .t4n-text-columns__body {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	/* Split rather than one figure for both: the 64px is the space between the
	   heading and the copy beside it, while anything the copy stacks over (the
	   "Read more") belongs to it and keeps the band's own 24px. */
	column-gap: var(--t4n-text-columns-gap);
	row-gap: var(--t4n-text-columns-header-gap);
}

.t4n-text-columns--title-beside .t4n-text-columns__columns {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--t4n-text-columns-header-gap);
}

.t4n-text-columns--title-beside.t4n-text-columns--single .t4n-text-columns__column {
	padding-right: 0;
}

.t4n-text-columns:not(.t4n-text-columns--single) .t4n-text-columns__column:last-child {
	padding-right: var(--t4n-text-columns-inset-end);
}

/* The column is editor-authored HTML, so the body style is declared on every
   text node it can produce rather than relying on inheritance alone (the
   legacy `body { font-weight: 300 !important }` reaches the descendants). */
.t4n-text-columns__column,
.t4n-text-columns__column p,
.t4n-text-columns__column li {
	color: var(--t4n-text-columns-text);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
}

.t4n-text-columns__column p,
.t4n-text-columns__column ul,
.t4n-text-columns__column ol {
	margin: 0 0 var(--t4n-text-columns-paragraph-gap);
}

/* A heading pasted into the editor would otherwise pick up the legacy
   `h2…h6 { font-size: … !important }` rules and dwarf the band. */
.t4n-text-columns__column h2,
.t4n-text-columns__column h3,
.t4n-text-columns__column h4,
.t4n-text-columns__column h5,
.t4n-text-columns__column h6 {
	margin: 0 0 var(--t4n-text-columns-paragraph-gap);
	color: var(--t4n-text-columns-text);
	font-family: var(--t4n-body-bold-m-font, 'Theinhardt-Bold', sans-serif);
	font-size: var(--t4n-body-bold-m-size, 20px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-bold-m-lh, 1.3) !important;
}

.t4n-text-columns__column > :last-child {
	margin-bottom: 0;
}

/* Bootstrap's `a:hover { text-decoration: underline }` (0,1,1) outranks a bare
   class, so the hover state is restated at (0,2,1). */
.t4n-text-columns__column a {
	color: var(--t4n-text-columns-text) !important;
	text-decoration: underline;
}

.t4n-text-columns__column a:hover,
.t4n-text-columns__column a:focus {
	text-decoration: none;
}

/* The optional call to action under the copy. A sibling of the columns rather
   than a child of one, so it sits under both of them and the band's own gap
   spaces it. */
.t4n-text-columns__more {
	display: inline-flex;
	align-items: center;
	gap: var(--t4n-text-columns-more-gap);
	color: var(--t4n-text-columns-text) !important;
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
	text-decoration: none;
}

/* Bootstrap's a:hover underline (0,1,1) outranks a bare class, so the state
   this link actually wants is restated at (0,2,1) either way. */
.t4n-text-columns__more:hover,
.t4n-text-columns__more:focus {
	color: var(--t4n-text-columns-text) !important;
	text-decoration: underline;
}

.t4n-text-columns__more-arrow {
	flex: 0 0 auto;
	width: var(--t4n-text-columns-arrow-size);
	height: var(--t4n-text-columns-arrow-size);
}

/* With the heading beside the copy the body is a two-column grid, so the link
   would otherwise start a third cell under the heading instead of following
   the copy it belongs to. */
.t4n-text-columns--title-beside .t4n-text-columns__more {
	grid-column: 2;
}

@media (max-width: 1399px) {
	:root {
		--t4n-text-columns-padding-x: 100px;
		--t4n-text-columns-inset-single: 200px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-text-columns-padding-x: 60px;
		--t4n-text-columns-gap: 40px;
		--t4n-text-columns-inset-end: 0px;
		--t4n-text-columns-inset-single: 80px;
	}
}

@media (max-width: 991px) {
	:root {
		--t4n-text-columns-padding-x: 40px;
		--t4n-text-columns-gap: 32px;
		--t4n-text-columns-inset-single: 0px;
	}

	.t4n-text-columns__columns,
	.t4n-text-columns--title-beside .t4n-text-columns__body {
		grid-template-columns: minmax(0, 1fr);
	}

	/* One column now, so there is no second one to sit under. */
	.t4n-text-columns--title-beside .t4n-text-columns__more {
		grid-column: auto;
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-text-columns-padding-x: 20px;
		--t4n-text-columns-padding-y: 48px;
		/* Holds a per-block figure down to the same 48px here. */
		--t4n-text-columns-padding-y-cap: 48px;
	}
}
/* === t4n-tabs: image band + colour-coded tab bar + one panel per tab
      (see inc/t4n-tabs.php, js/t4n-tabs.js) === */
:root {
	--t4n-tabs-text: #083B49;
	--t4n-tabs-more: #0885AB;
	--t4n-tabs-media-height: 384px;

	--t4n-tabs-tab-bg: #A6DBE0;
	--t4n-tabs-tab-min-width: 232px;
	--t4n-tabs-tab-padding-x: 24px;
	--t4n-tabs-tab-padding-y: 16px;

	--t4n-tabs-panel-bg: #A6DBE0;
	--t4n-tabs-card-bg: #9DD2D7;
	--t4n-tabs-panel-padding-x: 180px;
	--t4n-tabs-panel-padding-y: 64px;
	--t4n-tabs-panel-min-height: 390px;
	--t4n-tabs-panel-gap: 24px;

	--t4n-tabs-radius: 16px;
	--t4n-tabs-card-padding-x: 48px;
	--t4n-tabs-card-padding-y: 24px;
	--t4n-tabs-card-gap: 24px;
	--t4n-tabs-card-column-gap: 40px;
	--t4n-tabs-list-gap: 8px;

	--t4n-tabs-text-column-gap: 32px;
	--t4n-tabs-text-row-gap: 24px;

	--t4n-tabs-label-width: 224px;
	--t4n-tabs-label-padding: 24px;
	--t4n-tabs-label-gap: 8px;

	--t4n-tabs-link-column-gap: 64px;
	--t4n-tabs-link-row-gap: 16px;
	--t4n-tabs-link-padding-x: 24px;
	--t4n-tabs-link-padding-y: 16px;
	--t4n-tabs-link-icon-size: 20px;
}

/* A one-column grid rather than a flex column, so the image can run on behind
   the tab bar: the part of the bar the tabs leave empty shows the photograph
   instead of a flat colour. */
.t4n-tabs {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
	color: var(--t4n-tabs-text);
}

/* With an image: row 1 is the band, row 2 the tab bar, row 3 the open panel.
   The rows are set explicitly because the image, being absolutely positioned,
   occupies no cell, so auto-placement would drop the tab bar into row 1. */
.t4n-tabs--has-media {
	grid-template-rows: var(--t4n-tabs-media-height);
}

.t4n-tabs--has-media .t4n-tabs__tablist {
	grid-row: 2;
}

.t4n-tabs--has-media .t4n-tabs__panel {
	grid-row: 3;
}

/* Absolutely positioned against its grid area -- rows 1 and 2, the band plus
   the tab bar -- rather than the whole section, so it covers exactly the band
   and whatever height the bar takes, even when the tabs wrap onto a second
   line, and never needs the bar's height. Taking it out of flow is also what
   stops the photo's own proportions (a 1905px-wide image asks for ~480px)
   from sizing the rows. A negative margin on the bar would instead need that
   height hard-coded. */
.t4n-tabs__media {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	grid-column: 1;
	grid-row: 1 / 3;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--t4n-crop-pos, center);
	transform: scale(var(--t4n-crop-zoom, 1));
	transform-origin: var(--t4n-crop-pos, center);
	border: 0;
}

/* Tab bar ---------------------------------------------------------------- */

/* The tabs are content-sized from a common minimum rather than stretched to
   fill the row: in the mock they stop short of the section's right edge, and
   the long second label is allowed to run wider than the rest. */
.t4n-tabs__tablist {
	/* Positioned so it paints above the absolutely positioned image. */
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	/* The tabs stop short of the right edge, as in the mock, and the leftover
	   is transparent so the image behind it shows through. */
	background: transparent;
}

/* Colour comes from the tab's own inline custom property, so the bar reads as
   a colour key. The button reset is spelled out because .t4n-tabs__tab is a
   real button element. */
.t4n-tabs__tab {
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	justify-content: center;
	min-width: var(--t4n-tabs-tab-min-width);
	padding: var(--t4n-tabs-tab-padding-y) var(--t4n-tabs-tab-padding-x);
	background: var(--t4n-tabs-tab-bg);
	border: 0;
	color: var(--t4n-tabs-text);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
	text-align: center;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* The mock marks the open tab by size alone (20px against 16px), which is the
   Link L step. Its 500 weight is not available: the theme ships Theinhardt in
   Regular and Bold only, and Bold would read as 700. */
.t4n-tabs__tab.is-active {
	font-family: var(--t4n-link-l-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-link-l-size, 20px);
	line-height: var(--t4n-link-l-lh, 1.3);
}

.t4n-tabs__tab:focus-visible {
	outline: 2px solid var(--t4n-tabs-text);
	outline-offset: -4px;
}

/* Panels ----------------------------------------------------------------- */

.t4n-tabs__panel {
	display: flex;
	flex-direction: column;
	/* Centred rather than top-aligned: the mock centres the panel content in
	   its 390px band, which matters whenever the content is shorter. */
	justify-content: center;
	align-items: flex-start;
	gap: var(--t4n-tabs-panel-gap);
	min-height: var(--t4n-tabs-panel-min-height);
	padding: var(--t4n-tabs-panel-padding-y) var(--t4n-tabs-panel-padding-x);
	background: var(--t4n-tabs-panel-bg);
}

/* Class-based and tag-agnostic, with !important only to beat the legacy
   heading font-size rules earlier in this file. */
.t4n-tabs__heading {
	margin: 0;
	color: var(--t4n-tabs-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal) !important;
}

/* Panel design: cards with lists ----------------------------------------- */

.t4n-tabs__cards {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--t4n-tabs-card-gap);
	width: 100%;
}

/* flex-basis auto rather than 0: the mock sizes the cards to their content
   (the two-column Phase 2 card is wider than Phase 1), and only the leftover
   space is shared. The radius needs !important to beat the legacy
   universal border-radius reset near the top of this file. */
.t4n-tab-card {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	gap: var(--t4n-tabs-card-gap);
	padding: var(--t4n-tabs-card-padding-y) var(--t4n-tabs-card-padding-x);
	background: var(--t4n-tabs-card-bg);
	border-radius: var(--t4n-tabs-radius) !important;
}

.t4n-tab-card__title {
	margin: 0;
	color: var(--t4n-tabs-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal) !important;
}

.t4n-tab-card__columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--t4n-tabs-card-column-gap);
}

.t4n-tab-card__column {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--t4n-tabs-card-gap);
}

.t4n-tab-card__lead,
.t4n-tab-card__item {
	margin: 0;
	color: var(--t4n-tabs-text);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
}

.t4n-tab-card__list {
	display: flex;
	flex-direction: column;
	gap: var(--t4n-tabs-list-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Panel design: text columns with Read more ------------------------------- */

.t4n-tabs__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--t4n-tabs-text-row-gap);
	width: 100%;
}

/* Two tracks always, so a row holding a single column keeps the width of one
   half rather than running the full measure, as the mock's closing paragraph
   does. */
.t4n-tabs__text-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--t4n-tabs-text-column-gap);
	width: 100%;
}

.t4n-tabs__text-column,
.t4n-tabs__text-column p,
.t4n-tabs__text-column li {
	color: var(--t4n-tabs-text);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
}

.t4n-tabs__text-column p {
	margin: 0 0 var(--t4n-tabs-text-row-gap);
}

.t4n-tabs__text-column > :last-child {
	margin-bottom: 0;
}

/* height, not max-height: js/t4n-tabs.js animates from 0 to the measured
   scrollHeight and then clears the value, so the panel can still reflow. */
.t4n-tabs__more-content {
	display: flex;
	flex-direction: column;
	gap: var(--t4n-tabs-text-row-gap);
	width: 100%;
	overflow: hidden;
	transition: height 0.35s ease;
}

.t4n-tabs__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--t4n-tabs-more);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.t4n-tabs__more:hover .t4n-tabs__more-label,
.t4n-tabs__more:focus-visible .t4n-tabs__more-label {
	text-decoration: underline;
}

/* Both arrows are in the markup and only one is shown, so the state change is
   a pure CSS swap with no DOM work on click. */
.t4n-tabs__more-icon {
	flex: none;
}

.t4n-tabs__more[aria-expanded="false"] .t4n-tabs__more-icon--up,
.t4n-tabs__more[aria-expanded="true"] .t4n-tabs__more-icon--down {
	display: none;
}

/* Panel design: label chips ---------------------------------------------- */

.t4n-tabs__labels {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: var(--t4n-tabs-label-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Radius forced past the legacy universal border-radius reset. Theinhardt-Bold
   is named directly: the mock sets these chips at weight 700 and the type
   scale has no bold Caption M token. */
.t4n-tabs__label {
	display: flex;
	flex: 0 1 var(--t4n-tabs-label-width);
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: var(--t4n-tabs-label-padding);
	background: var(--t4n-tabs-card-bg);
	border-radius: var(--t4n-tabs-radius) !important;
	color: var(--t4n-tabs-text);
	font-family: 'Theinhardt-Bold', sans-serif;
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
	text-align: center;
}

/* Panel design: link list ------------------------------------------------ */

/* Flowing by column, with the row count handed in by PHP, is what fills the
   left column top to bottom before starting the right one, as the mock does.
   The DOM order matches that reading order, so the tab order does too. */
.t4n-tabs__links {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(var(--t4n-tabs-link-rows, 1), auto);
	gap: var(--t4n-tabs-link-row-gap) var(--t4n-tabs-link-column-gap);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.t4n-tabs__link-item {
	display: flex;
}

.t4n-tabs__link {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 10px;
	padding: var(--t4n-tabs-link-padding-y) var(--t4n-tabs-link-padding-x);
	background: var(--t4n-tabs-card-bg);
	border-radius: var(--t4n-tabs-radius) !important;
	color: var(--t4n-tabs-text) !important;
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
	text-decoration: none;
}

/* Restated at (0,2,0) so Bootstrap's a:hover underline rule (0,1,1) does not
   underline the whole pill. */
.t4n-tabs__link:hover .t4n-tabs__link-label,
.t4n-tabs__link:focus-visible .t4n-tabs__link-label {
	text-decoration: underline;
}

.t4n-tabs__link:hover,
.t4n-tabs__link:focus {
	text-decoration: none;
}

.t4n-tabs__link-label {
	flex: 1 1 0;
	min-width: 0;
}

.t4n-tabs__link-icon {
	flex: none;
	width: var(--t4n-tabs-link-icon-size);
	height: var(--t4n-tabs-link-icon-size);
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1399px) {
	:root {
		--t4n-tabs-panel-padding-x: 100px;
		--t4n-tabs-card-padding-x: 32px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-tabs-panel-padding-x: 60px;
		--t4n-tabs-media-height: 300px;
		--t4n-tabs-link-column-gap: 32px;
		--t4n-tabs-card-column-gap: 24px;
	}

	/* Below the mock's width the cards no longer fit side by side at their
	   content size, so they stack rather than squeezing the lists. */
	.t4n-tab-card {
		flex-basis: 100%;
	}
}

@media (max-width: 991px) {
	:root {
		--t4n-tabs-panel-padding-x: 40px;
		--t4n-tabs-panel-min-height: 0;
		--t4n-tabs-tab-min-width: 180px;
		--t4n-tabs-media-height: 240px;
	}

	.t4n-tabs__text-row {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Back to a single column in source order once there is only one track to
	   fill; the column flow above would otherwise put every link on one row. */
	.t4n-tabs__links {
		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
	}

	.t4n-tabs__label {
		flex-basis: calc(50% - var(--t4n-tabs-label-gap));
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-tabs-panel-padding-x: 20px;
		--t4n-tabs-panel-padding-y: 48px;
		--t4n-tabs-card-padding-x: 24px;
		--t4n-tabs-media-height: 200px;
		--t4n-tabs-label-padding: 16px;
	}

	/* One tab per row: four labels of this length cannot share a phone width
	   without truncating, and a horizontally scrolling tab bar hides tabs. */
	.t4n-tabs__tab {
		flex: 1 1 100%;
		min-width: 0;
	}

	/* Full-width tabs leave no gap for the image to show through, so the image
	   stops at the band instead of running on behind the bar. The end line is
	   spelled out: on an absolutely positioned item a bare `1` means `1 / auto`,
	   and `auto` there runs to the container's edge, over the panel too. */
	.t4n-tabs__media {
		grid-row: 1 / 2;
	}

	.t4n-tabs__label {
		flex-basis: 100%;
	}

	/* Accordion order: each tab is followed directly by its own panel, instead
	   of every tab first and the open panel after the last one. The markup is
	   unchanged (tab list, then panels); the tab list stops generating a box
	   (`display: contents`, its role is kept by current browsers) so its tabs
	   become items of the section's own grid, and each tab and panel is put on
	   an explicit row from its index (--t4n-tabs-i, printed by PHP): tab i on
	   row 2i+2, its panel on 2i+3. Row 1 is the image band (empty, and 0px,
	   when there is no image). A hidden panel takes no space. */
	.t4n-tabs__tablist {
		display: contents;
	}

	.t4n-tabs .t4n-tabs__tab {
		grid-column: 1;
		grid-row: calc(var(--t4n-tabs-i, 0) * 2 + 2);
	}

	.t4n-tabs .t4n-tabs__panel {
		grid-column: 1;
		grid-row: calc(var(--t4n-tabs-i, 0) * 2 + 3);
	}

	/* Smooth open/close. js/t4n-tabs.js sets the start and end height (and
	   vertical padding, which a border-box height cannot squeeze below) inline
	   and adds `is-animating` only for the duration, so a panel at rest is
	   untouched. Clipped while it runs so the content does not spill out. */
	.t4n-tabs__panel.is-animating {
		overflow: hidden;
		transition: height .4s ease-in-out, padding-top .4s ease-in-out, padding-bottom .4s ease-in-out;
	}

	@media (prefers-reduced-motion: reduce) {
		.t4n-tabs__panel.is-animating {
			transition: none;
		}
	}
}
/* === t4n-icon-columns: icon + caption columns band (see inc/t4n-icon-columns.php) === */
:root {
	--t4n-icon-columns-bg: #F0EFEC;
	--t4n-icon-columns-text: #083B49;
	--t4n-icon-columns-padding-left: 180px;
	--t4n-icon-columns-padding-right: 180px;
	--t4n-icon-columns-padding-top: 64px;
	--t4n-icon-columns-padding-bottom: 85px;
	/* The mock reaches this with a 10px auto-layout gap plus 64px of padding on
	   the row itself; collapsed into one gap here, and the row's matching 64px
	   bottom padding dropped, so the band is not lopsided. */
	--t4n-icon-columns-header-gap: 64px;
	--t4n-icon-columns-gap: 32px;
	--t4n-icon-columns-item-gap: 8px;
	--t4n-icon-columns-icon-size: 32px;
	--t4n-icon-columns-per-row: 3;
}

.t4n-icon-columns {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--t4n-icon-columns-header-gap);
	padding: var(--t4n-icon-columns-padding-top) var(--t4n-icon-columns-padding-right) var(--t4n-icon-columns-padding-bottom) var(--t4n-icon-columns-padding-left);
	background: var(--t4n-icon-columns-bg);
	color: var(--t4n-icon-columns-text);
}

/* Class-based, tag-agnostic — see the note on .t4n-page-hero__title for why
   the size and line-height carry !important. */
.t4n-icon-columns__title {
	margin: 0;
	color: var(--t4n-icon-columns-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal) !important;
}

@media (max-width: 599px) {
	.t4n-icon-columns__title {
		text-align: center;
		width: 100%;
	}
}

/* A list, so the columns are announced as a set. The legacy `ul` rules would
   otherwise add the markers and indentation the design does not have. */
.t4n-icon-columns__list {
	display: grid;
	grid-template-columns: repeat(var(--t4n-icon-columns-per-row), minmax(0, 1fr));
	gap: var(--t4n-icon-columns-gap);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.t4n-icon-columns__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--t4n-icon-columns-item-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 599px) { 
	.t4n-icon-columns__item {
		align-items: center;
	}
}

.t4n-icon-columns__item::before,
.t4n-icon-columns__item::marker {
	content: none;
}

/* Fixed box whatever the upload's aspect ratio, so the captions below it stay
   on a shared baseline across the row. */
.t4n-icon-columns__icon {
	flex: none;
	width: var(--t4n-icon-columns-icon-size);
	height: var(--t4n-icon-columns-icon-size);
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}

/* The legacy `body { font-weight: 300 !important }` reaches this paragraph, so
   the body style is declared on the element itself rather than inherited. */
.t4n-icon-columns__text {
	margin: 0;
	color: var(--t4n-icon-columns-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px);
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal);
}

@media (max-width: 599px) {
	.t4n-icon-columns__text {
		font-size: var(--t4n-body-l-size, 20px);
		text-align: center;
	}
}

/* The step down for a column carrying a paragraph rather than a caption
   (the "Text Size" field). Still a token, never a one-off size. */
.t4n-icon-columns--text-standard .t4n-icon-columns__text {
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	line-height: var(--t4n-caption-m-lh, 1.3);
}

/* Phase 8 of the client-feedback plan: a second, separate box rather than a
   change to --t4n-icon-columns-icon-size itself, so a row saved before this
   field existed keeps its original 32px icon. */
.t4n-icon-columns--icon-large {
	--t4n-icon-columns-icon-size: 64px;
}

@media (max-width: 1399px) {
	:root {
		--t4n-icon-columns-padding-left: 100px;
		--t4n-icon-columns-padding-right: 100px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-icon-columns-padding-left: 60px;
		--t4n-icon-columns-padding-right: 60px;
	}
}

@media (max-width: 991px) {
	:root {
		--t4n-icon-columns-padding-left: 40px;
		--t4n-icon-columns-padding-right: 40px;
		--t4n-icon-columns-header-gap: 48px;
		--t4n-icon-columns-per-row: 2;
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-icon-columns-padding-left: 20px;
		--t4n-icon-columns-padding-right: 20px;
		--t4n-icon-columns-padding-top: 48px;
		--t4n-icon-columns-padding-bottom: 48px;
		--t4n-icon-columns-header-gap: 32px;
		--t4n-icon-columns-gap: 24px;
		--t4n-icon-columns-per-row: 1;
	}
}
/* === t4n-text-image: body copy beside an image on a colour band
      (see inc/t4n-text-image.php) === */
:root {
	--t4n-text-image-bg: #285A61;
	--t4n-text-image-text: #FFFFFF;
	--t4n-text-image-padding-x: 180px;
	--t4n-text-image-padding-y: 64px;
	--t4n-text-image-header-gap: 32px;
	--t4n-text-image-gap: 64px;
	--t4n-text-image-media-width: 646px;
	--t4n-text-image-paragraph-gap: 25px;
	/* Between a title and the copy under it, when the title sits in the
	   column rather than above the band -- and between the copy and the
	   button, since both are children of the same flex column. */
	--t4n-text-image-column-gap: 25px;
	/* Both only apply to the "title beside the media" arrangement. */
	--t4n-text-image-beside-padding-x: 80px;
	--t4n-text-image-beside-measure: 460px;
	/* A cover card takes an even half of the band rather than the 646px a
	   cropped photograph claims, which is what leaves the copy beside it the
	   matching 544px measure the design draws. The card's own dimensions live
	   with the shared t4n-publication-cover block. */
	--t4n-text-image-cover-column: 544px;
	--t4n-text-image-cover-container: 1138px;
	--t4n-text-image-cover-padding-x: 40px;
}

.t4n-text-image {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--t4n-text-image-header-gap);
	padding: var(--t4n-text-image-padding-y) var(--t4n-text-image-padding-x);
	background: var(--t4n-text-image-bg);
	color: var(--t4n-text-image-text);
}

/* Class-based and tag-agnostic, so the heading level stays a document-outline
   choice; the size and line-height carry !important only to outrank the legacy
   `h2...h6 { font-size: ... !important }` rules. */
.t4n-text-image__title {
	margin: 0;
	color: var(--t4n-text-image-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal) !important;
}

/* Two columns in a row. The copy takes whatever the media leaves rather than
   an even half: in the mock the image is a fixed 646px and the text column
   runs wider. space-between keeps the media on the right edge when the copy is
   held to a measure narrower than the room it has (--title-beside). */
.t4n-text-image__body {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--t4n-text-image-gap);
	width: 100%;
}

/* The column beside the media: a title, body copy, or both stacked. */
.t4n-text-image__column {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--t4n-text-image-column-gap);
	min-width: 0;
}

/* Capped at the media width but free to shrink below it, like the minmax()
   track it replaces. */
.t4n-text-image__media-column {
	flex: 0 1 var(--t4n-text-image-media-width);
	min-width: 0;
}

/* This arrangement has no heading spanning the band, so the design gives the
   two columns more room and pushes them apart: narrower gutters, and the copy
   held to its own measure rather than stretched to whatever the media leaves.
   Both are scoped to the modifier so a band with the title above keeps the
   180px gutters it shares with every other section on the page. */
.t4n-text-image--title-beside {
	padding-left: var(--t4n-text-image-beside-padding-x);
	padding-right: var(--t4n-text-image-beside-padding-x);
}

.t4n-text-image--title-beside .t4n-text-image__column {
	max-width: var(--t4n-text-image-beside-measure);
}

/* The button is inline-level, so without a block wrapper it would stretch to
   the width of the flex column it sits in. The 24px above it is the column's
   own gap, the same distance the copy uses between paragraphs. */
.t4n-text-image__actions {
	margin: 0;
}

/* The mock's button here reads at 16px, a size below --t4n-button-font-size's
   20px default. Scoped to this block's own button rather than the token
   itself, since the shared component is also the hero/banner button. */
.t4n-text-image__actions .t4n-button {
	--t4n-button-font-size: 16px;
}

/* The text is editor-authored HTML, so the body style is declared on every
   text node it can produce rather than relying on inheritance alone (the
   legacy `body { font-weight: 300 !important }` reaches the descendants). */
.t4n-text-image__text,
.t4n-text-image__text p,
.t4n-text-image__text li {
	color: var(--t4n-text-image-text);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
}

.t4n-text-image__text p,
.t4n-text-image__text ul,
.t4n-text-image__text ol {
	margin: 0 0 var(--t4n-text-image-paragraph-gap);
}

/* A heading pasted into the editor would otherwise pick up the legacy
   `h2...h6 { font-size: ... !important }` rules and dwarf the band. */
.t4n-text-image__text h2,
.t4n-text-image__text h3,
.t4n-text-image__text h4,
.t4n-text-image__text h5,
.t4n-text-image__text h6 {
	margin: 0 0 var(--t4n-text-image-paragraph-gap);
	color: var(--t4n-text-image-text);
	font-family: var(--t4n-body-bold-m-font, 'Theinhardt-Bold', sans-serif);
	font-size: var(--t4n-body-bold-m-size, 20px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-bold-m-lh, 1.3) !important;
}

.t4n-text-image__text > :last-child {
	margin-bottom: 0;
}

/* Bootstrap's `a:hover { text-decoration: underline }` (0,1,1) outranks a bare
   class, so the hover state is restated at (0,2,1). */
.t4n-text-image__text a {
	color: var(--t4n-text-image-text) !important;
	text-decoration: underline;
}

.t4n-text-image__text a:hover,
.t4n-text-image__text a:focus {
	text-decoration: none;
}

/* Fixed 3:2 frame, so the band keeps the mock's proportions whatever an editor
   uploads. */
.t4n-text-image__media {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 646 / 431;
	object-fit: cover;
	object-position: var(--t4n-crop-pos, center);
	transform: scale(var(--t4n-crop-zoom, 1));
	transform-origin: var(--t4n-crop-pos, center);
	border: 0;
}

/* A publication cover is artwork to be read rather than a photograph filling
   a frame, so it keeps its own proportions on a white card (the shared
   t4n-publication-cover block below) and the column around it only centres
   it.

   The design holds this arrangement to a centred 1200px container, heading
   included, rather than the full band between the standard gutters. Its own
   gutter is narrower so the 1200px is actually reached on a laptop-width
   screen; the container's max-width is what keeps it off the edges above
   that. */
.t4n-text-image--cover {
	padding-left: var(--t4n-text-image-cover-padding-x);
	padding-right: var(--t4n-text-image-cover-padding-x);
}

.t4n-text-image--cover .t4n-text-image__title,
.t4n-text-image--cover .t4n-text-image__body {
	width: 100%;
	max-width: var(--t4n-text-image-cover-container);
	margin-left: auto;
	margin-right: auto;
}

/* The column stretches to the row's height, so the card is centred against
   the copy both ways whichever of the two is taller. */
.t4n-text-image--cover .t4n-text-image__body {
	align-items: center;
}

.t4n-text-image--cover .t4n-text-image__media-column {
	display: flex;
	flex-basis: var(--t4n-text-image-cover-column);
	align-items: center;
	justify-content: center;
}

/* Video takes 16:9 rather than the image's 3:2 frame: that is the shape both
   uploaded files and provider players are actually delivered in, so anything
   else would letterbox them inside their own frame. */
video.t4n-text-image__media {
	aspect-ratio: 16 / 9;
	background-color: rgba(0, 0, 0, 0.25);
}

/* An embedded player cannot be cropped with object-fit, so the frame is the
   wrapper and the provider's iframe is stretched to fill it. */
.t4n-text-image__media--embed {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.25);
}

.t4n-text-image__media--embed iframe,
.t4n-text-image__media--embed video,
.t4n-text-image__media--embed embed,
.t4n-text-image__media--embed object {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 1399px) {
	:root {
		--t4n-text-image-padding-x: 100px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-text-image-padding-x: 60px;
		--t4n-text-image-gap: 40px;
		/* Capped tighter than 646 so the copy keeps the wider column once the
		   band loses its outer padding. */
		--t4n-text-image-media-width: 420px;
		/* Same reasoning for the cover card's column: it only has to hold a
		   290px cover, so the copy takes the room it gives back. */
		--t4n-text-image-cover-column: 380px;
		/* The 80px gutter is a desktop decision; below it the band rejoins the
		   standard ladder so it lines up with the sections around it. */
		--t4n-text-image-beside-padding-x: var(--t4n-text-image-padding-x);
		/* Likewise for the cover's gutter: once the screen is narrower than
		   its container, it simply follows the ladder. */
		--t4n-text-image-cover-padding-x: var(--t4n-text-image-padding-x);
	}
}

@media (max-width: 991px) {
	:root {
		--t4n-text-image-padding-x: 40px;
		--t4n-text-image-gap: 32px;
	}

	/* Stacked: the media column spans the band instead of keeping its 646px
	   cap, and a cover card stays centred inside it. */
	.t4n-text-image__body {
		flex-direction: column;
	}

	.t4n-text-image__column,
	.t4n-text-image__media-column,
	.t4n-text-image--cover .t4n-text-image__media-column {
		flex: 0 0 auto;
		width: 100%;
	}

	/* Stacked, the copy sits over a full-width video, so holding it to the
	   desktop measure would just leave it looking clipped. */
	.t4n-text-image--title-beside .t4n-text-image__column {
		max-width: none;
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-text-image-padding-x: 20px;
		--t4n-text-image-padding-y: 48px;
	}
}
/* === t4n-split-hero: colour panel beside a full-height photo
      (see inc/t4n-split-hero.php) === */
:root {
	--t4n-split-hero-bg: #2F7E66;
	--t4n-split-hero-text: #FFFFFF;
	--t4n-split-hero-icon: #FFFFFF;
	--t4n-split-hero-min-height: 616px;
	/* 951 of the design's 1512, so the split holds its proportion at any
	   width instead of the photo growing faster than the panel. */
	--t4n-split-hero-media-width: 62.9%;
	--t4n-split-hero-padding-start: 180px;
	--t4n-split-hero-padding-end: 40px;
	--t4n-split-hero-padding-y: 64px;
	/* The design floats the title inside its own 80px band rather than
	   centring it, which is what keeps the follow row low in the panel. */
	--t4n-split-hero-title-offset: 80px;
	--t4n-split-hero-title-width: 277px;
	--t4n-split-hero-follow-gap: 8px;
	--t4n-split-hero-social-size: 24px;
	--t4n-split-hero-social-box: 40px;
	--t4n-split-hero-social-stroke: 1.5px; /* contour of the outlined brand marks */
}

.t4n-split-hero {
	display: flex;
	align-items: stretch;
	width: 100%;
	min-height: var(--t4n-split-hero-min-height);
	overflow: hidden;
	background: var(--t4n-split-hero-bg);
	color: var(--t4n-split-hero-text);
}

.t4n-split-hero__panel {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 24px;
	min-width: 0;
	padding:
		calc(var(--t4n-split-hero-padding-y) + var(--t4n-split-hero-title-offset))
		var(--t4n-split-hero-padding-end)
		var(--t4n-split-hero-padding-y)
		var(--t4n-split-hero-padding-start);
	background: var(--t4n-split-hero-bg);
}

/* Styled by class, never by tag, so the editor picks the heading level purely
   for the document outline. font-size/line-height need !important only to beat
   the legacy `h1, .h1 { font-size: … !important }` rules earlier in this file,
   which would otherwise win on whichever tag was chosen. */
.t4n-split-hero__title {
	max-width: var(--t4n-split-hero-title-width);
	margin: 0 0 var(--t4n-split-hero-title-offset);
	color: var(--t4n-split-hero-text);
	font-family: var(--t4n-title-xxl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-title-xxl-size, 40px) !important;
	font-weight: 400;
	line-height: var(--t4n-title-xxl-lh, normal) !important;
}

.t4n-split-hero__follow {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--t4n-split-hero-follow-gap);
	width: 100%;
}

.t4n-split-hero__follow-label {
	margin: 0;
	color: var(--t4n-split-hero-text);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
}

.t4n-split-hero__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The legacy `* { border-radius: 0 !important }` reset near the top of this
   file zeroes any radius, so the design's 4px has to be forced. */
.t4n-split-hero__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--t4n-split-hero-social-box);
	height: var(--t4n-split-hero-social-box);
	padding: 8px;
	border-radius: 4px !important;
	color: var(--t4n-split-hero-icon) !important;
	font-size: var(--t4n-split-hero-social-size);
	line-height: 1;
	text-decoration: none;
}

/* Bootstrap's `a:hover { text-decoration: underline }` (0,1,1) outranks a bare
   class, so the hover state is restated at (0,2,0). */
.t4n-split-hero__social-link:hover,
.t4n-split-hero__social-link:focus {
	text-decoration: none;
}

/* Same outlined brand marks as the header (see .t4n-header__social-link):
   Font Awesome ships filled glyphs only, so the fill is turned off and the
   glyph is stroked instead, filling in on hover. Guarded because the property
   is -webkit- only -- engines without it keep the solid glyph. */
@supports (-webkit-text-stroke: 1px currentColor) {
	.t4n-split-hero__social-link i {
		-webkit-text-fill-color: transparent;
		-webkit-text-stroke: var(--t4n-split-hero-social-stroke) currentColor;
		transition: -webkit-text-fill-color .2s ease-in-out;
	}

	.t4n-split-hero__social-link:hover i,
	.t4n-split-hero__social-link:focus i {
		-webkit-text-fill-color: currentColor;
	}
}

@media (prefers-reduced-motion: reduce) {
	.t4n-split-hero__social-link i {
		transition: none;
	}
}

.t4n-split-hero__media {
	position: relative;
	flex: 0 0 var(--t4n-split-hero-media-width);
	width: var(--t4n-split-hero-media-width);
	overflow: hidden;
}

/* A real <img> rather than a CSS background, so the browser can pick a size
   from its srcset; positioned to behave like one. */
.t4n-split-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--t4n-crop-pos, center);
	transform: scale(var(--t4n-crop-zoom, 1));
	transform-origin: var(--t4n-crop-pos, center);
	border: 0;
}

.t4n-split-hero--no-media .t4n-split-hero__panel {
	padding-right: var(--t4n-split-hero-padding-start);
}

@media (max-width: 1399px) {
	:root {
		--t4n-split-hero-padding-start: 100px;
		--t4n-split-hero-title-offset: 56px;
		--t4n-split-hero-min-height: 560px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-split-hero-padding-start: 60px;
		--t4n-split-hero-padding-end: 32px;
		--t4n-split-hero-title-offset: 40px;
		--t4n-split-hero-min-height: 500px;
		/* Below this the panel would be too narrow for a 40px title, so the
		   photo gives back some of its share. */
		--t4n-split-hero-media-width: 50%;
	}

	.t4n-split-hero__title {
		max-width: none;
	}
}

/* Stacked: the photo becomes a band above the panel rather than a column
   beside it, which no longer has room for both. */
@media (max-width: 991px) {
	:root {
		--t4n-split-hero-padding-start: 40px;
		--t4n-split-hero-padding-end: 40px;
		--t4n-split-hero-title-offset: 32px;
		--t4n-split-hero-min-height: 0px;
	}

	.t4n-split-hero {
		flex-direction: column-reverse;
	}

	.t4n-split-hero__media {
		flex: none;
		width: 100%;
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-split-hero-padding-start: 20px;
		--t4n-split-hero-padding-end: 20px;
		--t4n-split-hero-padding-y: 48px;
		--t4n-split-hero-title-offset: 24px;
		--t4n-split-hero-social-box: 36px;
		--t4n-split-hero-social-size: 20px;
	}

	/* The token still governs the size; min() only steps in on the narrow
	   phones where a long title at the full 40px would break out of the
	   panel, so the type stays consistent with the rest of the site
	   wherever it fits. */
	.t4n-split-hero__title {
		font-size: min(var(--t4n-title-xxl-size, 40px), 8.5vw) !important;
	}
}
/* === t4n-numbered-columns: a lead-in line over numbered steps
      (see inc/t4n-numbered-columns.php) === */
:root {
	--t4n-numbered-columns-bg: #F0EFEC;
	--t4n-numbered-columns-text: #083B49;
	--t4n-numbered-columns-padding-x: 180px;
	--t4n-numbered-columns-padding-y: 64px;
	--t4n-numbered-columns-columns: 3;
	--t4n-numbered-columns-gap: 32px;
	/* The design breathes 64px between the lead-in line, the steps and the
	   closing note, on top of the band's own padding. */
	--t4n-numbered-columns-row-gap: 64px;
	--t4n-numbered-columns-number-gap: 8px;
	--t4n-numbered-columns-rule-gap: 24px;
	--t4n-numbered-columns-item-title-gap: 16px;
	--t4n-numbered-columns-paragraph-gap: 16px;
	--t4n-numbered-columns-rule: rgba(0, 0, 0, 0.14);
}

.t4n-numbered-columns {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--t4n-numbered-columns-row-gap);
	padding: var(--t4n-numbered-columns-padding-y) var(--t4n-numbered-columns-padding-x);
	background: var(--t4n-numbered-columns-bg);
	color: var(--t4n-numbered-columns-text);
}

/* Class-based and tag-agnostic, so the heading level stays a document-outline
   choice; the size and line-height carry !important only to outrank the legacy
   `h2...h6 { font-size: ... !important }` rules earlier in this file. */
.t4n-numbered-columns__title {
	margin: 0;
	color: var(--t4n-numbered-columns-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal) !important;
}

.t4n-numbered-columns__list {
	display: grid;
	grid-template-columns: repeat(var(--t4n-numbered-columns-columns), minmax(0, 1fr));
	gap: var(--t4n-numbered-columns-row-gap) var(--t4n-numbered-columns-gap);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.t4n-numbered-columns__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--t4n-numbered-columns-number-gap);
}

.t4n-numbered-columns__number {
	color: var(--t4n-numbered-columns-text);
	font-family: var(--t4n-title-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-title-m-size, 30px);
	font-weight: 400;
	line-height: var(--t4n-title-m-lh, normal);
}

/* The rule belongs to the body rather than to the number, so it starts under
   the digits and runs the full width of the column. */
.t4n-numbered-columns__item-body {
	width: 100%;
	padding: var(--t4n-numbered-columns-rule-gap) 0;
	border-top: 1px solid var(--t4n-numbered-columns-rule);
}

/* Tie the rule to whatever text colour the block is set to, so it stays a
   faint version of it on a dark band as well as on a light one. Guarded: the
   rgba() above stands in wherever color-mix() is unsupported. */
@supports (border-color: color-mix(in srgb, red, blue)) {
	.t4n-numbered-columns__item-body {
		border-top-color: color-mix(in srgb, var(--t4n-numbered-columns-text) 20%, transparent);
	}
}

.t4n-numbered-columns__item-title {
	margin: 0;
	color: var(--t4n-numbered-columns-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal) !important;
}

.t4n-numbered-columns__item-text {
	padding-top: var(--t4n-numbered-columns-item-title-gap);
}

/* Both the step text and the closing note are editor-authored HTML, so the
   body style is declared on every text node they can produce rather than
   relying on inheritance alone (the legacy `body { font-weight: 300
   !important }` reaches the descendants). */
.t4n-numbered-columns__item-text,
.t4n-numbered-columns__item-text p,
.t4n-numbered-columns__item-text li,
.t4n-numbered-columns__footnote,
.t4n-numbered-columns__footnote p,
.t4n-numbered-columns__footnote li {
	color: var(--t4n-numbered-columns-text);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
}

.t4n-numbered-columns__item-text p,
.t4n-numbered-columns__item-text ul,
.t4n-numbered-columns__item-text ol,
.t4n-numbered-columns__footnote p,
.t4n-numbered-columns__footnote ul,
.t4n-numbered-columns__footnote ol {
	margin: 0 0 var(--t4n-numbered-columns-paragraph-gap);
}

.t4n-numbered-columns__item-text > :last-child,
.t4n-numbered-columns__footnote > :last-child {
	margin-bottom: 0;
}

/* Bootstrap's `a:hover { text-decoration: underline }` (0,1,1) outranks a bare
   class, so the hover state is restated at (0,2,1). */
.t4n-numbered-columns__item-text a,
.t4n-numbered-columns__footnote a {
	color: var(--t4n-numbered-columns-text) !important;
	text-decoration: underline;
}

.t4n-numbered-columns__item-text a:hover,
.t4n-numbered-columns__item-text a:focus,
.t4n-numbered-columns__footnote a:hover,
.t4n-numbered-columns__footnote a:focus {
	text-decoration: none;
}

@media (max-width: 1399px) {
	:root {
		--t4n-numbered-columns-padding-x: 100px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-numbered-columns-padding-x: 60px;
		--t4n-numbered-columns-gap: 24px;
		--t4n-numbered-columns-row-gap: 48px;
	}
}

@media (max-width: 991px) {
	:root {
		--t4n-numbered-columns-padding-x: 40px;
		/* Three 24px-titled steps no longer fit across a tablet, and two keep
		   the paragraphs at a readable measure. */
		--t4n-numbered-columns-columns: 2;
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-numbered-columns-padding-x: 20px;
		--t4n-numbered-columns-padding-y: 48px;
		--t4n-numbered-columns-columns: 1;
		--t4n-numbered-columns-row-gap: 40px;
	}
}
/* === t4n-accordion: questions that open one at a time
      (see inc/t4n-accordion.php, js/t4n-accordion.js) === */
:root {
	--t4n-accordion-bg: #1E6E56;
	--t4n-accordion-text: #FFFFFF;
	--t4n-accordion-active-bg: rgba(0, 0, 0, 0.12);
	--t4n-accordion-padding-x: 180px;
	--t4n-accordion-padding-y: 64px;
	--t4n-accordion-header-gap: 32px;
	/* 996px in the design: the questions keep a readable measure instead of
	   running the full width of the band. */
	--t4n-accordion-max-width: 996px;
	--t4n-accordion-question-padding-x: 24px;
	--t4n-accordion-question-padding-y: 16px;
	--t4n-accordion-answer-padding-top: 24px;
	--t4n-accordion-answer-padding-bottom: 32px;
	/* The design insets the answer so it stops short of the question's right
	   edge; it collapses once the band is too narrow to spare the room. */
	--t4n-accordion-answer-inset-end: 300px;
	--t4n-accordion-open-gap: 16px;
	--t4n-accordion-accent-width: 2px;
	--t4n-accordion-icon-size: 36px;
	--t4n-accordion-paragraph-gap: 16px;
	--t4n-accordion-transition: .35s ease;
}

.t4n-accordion {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--t4n-accordion-header-gap);
	padding: var(--t4n-accordion-padding-y) var(--t4n-accordion-padding-x);
	background: var(--t4n-accordion-bg);
	color: var(--t4n-accordion-text);
}

/* Class-based and tag-agnostic, so the heading level stays a document-outline
   choice; the size and line-height carry !important only to outrank the legacy
   `h2...h6 { font-size: ... !important }` rules earlier in this file. */
.t4n-accordion__title {
	margin: 0;
	color: var(--t4n-accordion-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal) !important;
}

.t4n-accordion__list {
	width: 100%;
	max-width: var(--t4n-accordion-max-width);
}

/* Closed questions are separated by a hairline; the open one lifts out of the
   stack onto its own panel, so it takes the gap instead of the rule. */
.t4n-accordion__item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.36);
}

@supports (border-color: color-mix(in srgb, red, blue)) {
	.t4n-accordion__item {
		border-bottom-color: color-mix(in srgb, var(--t4n-accordion-text) 36%, transparent);
	}
}

.t4n-accordion__item.is-open {
	margin-bottom: var(--t4n-accordion-open-gap);
	border-bottom-color: transparent;
}

.t4n-accordion__item.is-open + .t4n-accordion__item {
	border-top: 0;
}

/* The heading is only there for the document outline; all of the look belongs
   to the button inside it. */
.t4n-accordion__question {
	margin: 0;
	font-size: inherit !important;
	line-height: inherit !important;
}

/* The fill and the accent bar mark the open *question*, not its answer, which
   sits plain on the section colour below. The legacy `* { border-radius: 0
   !important }` reset near the top of this file zeroes any radius, so the
   design's 2px has to be forced. */
.t4n-accordion__item.is-open .t4n-accordion__question {
	background: var(--t4n-accordion-active-bg);
	border-left: var(--t4n-accordion-accent-width) solid currentColor;
	border-radius: 2px !important;
}

/* Reset rather than restyle: a <button> arrives with the UA's own background,
   border, font and centring, none of which the design wants. */
.t4n-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: var(--t4n-accordion-question-padding-y) var(--t4n-accordion-question-padding-x);
	background: transparent;
	border: 0;
	color: var(--t4n-accordion-text);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
	text-align: left;
	cursor: pointer;
}

.t4n-accordion__trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.t4n-accordion__label {
	min-width: 0;
}

/* Both chevrons ship in the markup and one is shown at a time, so the swap
   costs no request and nothing has to be redrawn at runtime. */
.t4n-accordion__icon {
	position: relative;
	flex: none;
	width: var(--t4n-accordion-icon-size);
	height: var(--t4n-accordion-icon-size);
}

.t4n-accordion__chevron {
	display: block;
	width: 100%;
	height: 100%;
}

.t4n-accordion__chevron--up,
.t4n-accordion__item.is-open .t4n-accordion__chevron--down {
	display: none;
}

.t4n-accordion__item.is-open .t4n-accordion__chevron--up {
	display: block;
}

/* Animated on an explicit pixel height by the script, since `auto` is not an
   animatable value; overflow is what hides the answer on the way. */
.t4n-accordion__panel {
	overflow: hidden;
	transition: height var(--t4n-accordion-transition);
}

.t4n-accordion__answer {
	padding:
		var(--t4n-accordion-answer-padding-top)
		var(--t4n-accordion-answer-inset-end)
		var(--t4n-accordion-answer-padding-bottom)
		var(--t4n-accordion-question-padding-x);
}

/* The answer is editor-authored HTML, so the body style is declared on every
   text node it can produce rather than relying on inheritance alone (the
   legacy `body { font-weight: 300 !important }` reaches the descendants). */
.t4n-accordion__answer,
.t4n-accordion__answer p,
.t4n-accordion__answer li {
	color: var(--t4n-accordion-text);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
}

.t4n-accordion__answer p,
.t4n-accordion__answer ul,
.t4n-accordion__answer ol {
	margin: 0 0 var(--t4n-accordion-paragraph-gap);
}

/* A heading pasted into the editor would otherwise pick up the legacy
   `h2...h6 { font-size: ... !important }` rules and dwarf the answer. */
.t4n-accordion__answer h2,
.t4n-accordion__answer h3,
.t4n-accordion__answer h4,
.t4n-accordion__answer h5,
.t4n-accordion__answer h6 {
	margin: 0 0 var(--t4n-accordion-paragraph-gap);
	color: var(--t4n-accordion-text);
	font-family: var(--t4n-body-bold-m-font, 'Theinhardt-Bold', sans-serif);
	font-size: var(--t4n-body-bold-m-size, 20px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-bold-m-lh, 1.3) !important;
}

.t4n-accordion__answer > :last-child {
	margin-bottom: 0;
}

/* Bootstrap's `a:hover { text-decoration: underline }` (0,1,1) outranks a bare
   class, so the hover state is restated at (0,2,1). */
.t4n-accordion__answer a {
	color: var(--t4n-accordion-text) !important;
	text-decoration: underline;
}

.t4n-accordion__answer a:hover,
.t4n-accordion__answer a:focus {
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.t4n-accordion__panel {
		transition: none;
	}
}

@media (max-width: 1399px) {
	:root {
		--t4n-accordion-padding-x: 100px;
		--t4n-accordion-answer-inset-end: 180px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-accordion-padding-x: 60px;
		--t4n-accordion-answer-inset-end: 80px;
	}
}

@media (max-width: 991px) {
	:root {
		--t4n-accordion-padding-x: 40px;
		--t4n-accordion-answer-inset-end: var(--t4n-accordion-question-padding-x);
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-accordion-padding-x: 20px;
		--t4n-accordion-padding-y: 48px;
		--t4n-accordion-question-padding-x: 16px;
		--t4n-accordion-icon-size: 28px;
	}
}
/* === t4n-news-rows: one row of posts per category (see inc/t4n-news-rows.php).
      The tile is the shared t4n-news-card, styled in the t4n-latest-news block
      above. === */
:root {
	--t4n-news-rows-bg: #D0D2C1;
	--t4n-news-rows-text: #083B49;
	--t4n-news-rows-padding-x: 180px;
	--t4n-news-rows-padding-top: 64px;
	--t4n-news-rows-padding-bottom: 48px;
	--t4n-news-rows-header-gap: 64px;
	--t4n-news-rows-columns: 3;
	--t4n-news-rows-gap: 8px;
	--t4n-news-rows-row-gap: 64px;
	--t4n-news-rows-more-gap: 100px;
}

.t4n-news-rows {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--t4n-news-rows-header-gap);
	padding:
		var(--t4n-news-rows-padding-top)
		var(--t4n-news-rows-padding-x)
		var(--t4n-news-rows-padding-bottom);
	background: var(--t4n-news-rows-bg);
	color: var(--t4n-news-rows-text);
}

/* Class-based and tag-agnostic, so the heading level stays a document-outline
   choice; the size and line-height carry !important only to outrank the legacy
   `h2...h6 { font-size: ... !important }` rules earlier in this file. */
.t4n-news-rows__title {
	margin: 0;
	color: var(--t4n-news-rows-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal) !important;
}

.t4n-news-rows__rows {
	display: flex;
	flex-direction: column;
	gap: var(--t4n-news-rows-row-gap);
	width: 100%;
}

/* Each category is its own list, so the grouping survives for a screen reader
   as well as visually; the aria-label carries the category name. */
.t4n-news-rows__row {
	display: grid;
	grid-template-columns: repeat(var(--t4n-news-rows-columns), minmax(0, 1fr));
	gap: var(--t4n-news-rows-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.t4n-news-rows__item {
	display: flex;
	margin-bottom: 40px;
}

.t4n-news-rows__more {
	width: 100%;
	margin: 0;
	padding-top: calc(var(--t4n-news-rows-more-gap) - var(--t4n-news-rows-header-gap));
	text-align: center;
}

@media (max-width: 1399px) {
	:root {
		--t4n-news-rows-padding-x: 100px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-news-rows-padding-x: 60px;
		--t4n-news-rows-row-gap: 48px;
	}
}

@media (max-width: 991px) {
	:root {
		--t4n-news-rows-padding-x: 40px;
		--t4n-news-rows-columns: 2;
		--t4n-news-rows-header-gap: 40px;
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-news-rows-padding-x: 20px;
		--t4n-news-rows-padding-top: 48px;
		--t4n-news-rows-columns: 1;
		--t4n-news-rows-gap: 32px;
		--t4n-news-rows-more-gap: 64px;
	}
}
/* === t4n-image-band: a photograph bleeding edge to edge between two colour
      bands (see inc/t4n-image-band.php) === */
:root {
	--t4n-image-band-bg: #2F7E66;
	--t4n-image-band-height: 384px;
	/* A block can override the depth inline with --t4n-image-band-height-set
	   (the "Band Height" field). That is a desktop decision, and an inline
	   property beats any stylesheet rule, so a min() is the only way to hold a
	   ceiling over it as the page narrows. Effectively no ceiling until then. */
	--t4n-image-band-height-cap: 800px;
}

/* A <figure>, so Bootstrap's `figure { margin: 0 0 1rem }` has to be reset
   here or the band would carry a stripe of page background under it. */
.t4n-image-band {
	display: block;
	width: 100%;
	height: min(var(--t4n-image-band-height-set, var(--t4n-image-band-height)), var(--t4n-image-band-height-cap));
	margin: 0;
	overflow: hidden;
	background: var(--t4n-image-band-bg);
}

/* A real <img> rather than a CSS background, so the browser can pick a size
   from its srcset; cropped from the centre to the band's shallow shape unless
   the block's "Image Position" field anchors it elsewhere -- see the note on
   .t4n-page-hero__media for why that is a custom property with a fallback. */
.t4n-image-band__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--t4n-crop-pos, var(--t4n-image-band-image-position, center));
	transform: scale(var(--t4n-crop-zoom, 1));
	transform-origin: var(--t4n-crop-pos, var(--t4n-image-band-image-position, center));
	border: 0;
}

/* The band keeps roughly the design's quarter-of-the-viewport proportion as
   the page narrows, rather than eating the whole screen on a phone. */
@media (max-width: 991px) {
	:root {
		--t4n-image-band-height: 300px;
		--t4n-image-band-height-cap: 340px;
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-image-band-height: 220px;
		--t4n-image-band-height-cap: 240px;
	}
}
/* === t4n-publication-cover: the white card a publication front page sits on.
      Shared by t4n-text-image's "Publication cover" image style and the
      t4n-publications grid (see inc/t4n-publication-cover.php) === */
:root {
	--t4n-publication-cover-width: 290px;
	--t4n-publication-cover-padding-y: 17px;
	--t4n-publication-cover-radius: 4px;
	--t4n-publication-cover-shadow: 0 6px 6px rgba(0, 0, 0, 0.25);
}

/* Sized by its artwork rather than by the column, and centred in whatever
   space it is given. border-radius needs !important to survive the legacy
   `* { border-radius: 0 !important }` rule earlier in this file. */
.t4n-publication-cover {
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin: 0;
	padding: var(--t4n-publication-cover-padding-y) 0;
	background: #FFFFFF;
	border-radius: var(--t4n-publication-cover-radius) !important;
	box-shadow: var(--t4n-publication-cover-shadow);
}

/* The grid size: the same card, scaled, so its padding, radius and shadow stay
   in proportion to the artwork instead of looking heavy on a small one. */
.t4n-publication-cover--sm {
	--t4n-publication-cover-width: 152px;
	--t4n-publication-cover-padding-y: 10px;
	--t4n-publication-cover-radius: 2px;
	--t4n-publication-cover-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}

/* The artwork is shown whole -- no crop, no fixed ratio -- since a cover is
   read, not filled into a frame. */
.t4n-publication-cover__image {
	display: block;
	width: var(--t4n-publication-cover-width);
	max-width: 100%;
	height: auto;
	border: 0;
}
/* === t4n-figure-columns: headline figures over a rule and a caption
      (see inc/t4n-figure-columns.php) === */
:root {
	--t4n-figure-columns-bg: #F0EFEC;
	--t4n-figure-columns-text: #083B49;
	--t4n-figure-columns-rule: rgba(0, 0, 0, 0.14);
	--t4n-figure-columns-padding-x: 180px;
	/* The design pads the band and then pads the row inside it again; the two
	   are kept apart because only the outer one follows the page's ladder. */
	--t4n-figure-columns-padding-y: 64px;
	--t4n-figure-columns-inner-padding-y: 64px;
	--t4n-figure-columns-gap: 32px;
	--t4n-figure-columns-figure-gap: 8px;
	--t4n-figure-columns-rule-gap: 24px;
}

.t4n-figure-columns {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--t4n-figure-columns-gap);
	padding: var(--t4n-figure-columns-padding-y) var(--t4n-figure-columns-padding-x);
	background: var(--t4n-figure-columns-bg);
	color: var(--t4n-figure-columns-text);
}

/* Class-based and tag-agnostic, so the heading level stays a document-outline
   choice; the size and line-height carry !important only to outrank the legacy
   `h2...h6 { font-size: ... !important }` rules. */
.t4n-figure-columns__title {
	margin: 0;
	color: var(--t4n-figure-columns-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal) !important;
}

/* Equal columns whatever the copy under each figure runs to, and `stretch` so
   every rule can sit on the same line however tall the figure above it is. */
.t4n-figure-columns__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	align-items: stretch;
	gap: var(--t4n-figure-columns-gap);
	width: 100%;
	margin: 0;
	padding: var(--t4n-figure-columns-inner-padding-y) 0;
	list-style: none;
}

.t4n-figure-columns__item {
	display: flex;
	flex-direction: column;
	gap: var(--t4n-figure-columns-figure-gap);
	min-width: 0;
}

.t4n-figure-columns__figure {
	margin: 0;
	color: var(--t4n-figure-columns-text);
	font-family: var(--t4n-title-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-title-m-size, 30px);
	font-weight: 400;
	line-height: var(--t4n-title-m-lh, normal);
}

/* The rule belongs to the caption, not to the item, so it stops at the
   column's own width and a figure with no caption draws no line at all. It
   sits directly under its own figure — every figure is one line tall, so the
   rules land on a common line across the row without being pushed there. */
.t4n-figure-columns__text {
	margin: 0;
	padding: var(--t4n-figure-columns-rule-gap) 0;
	border-top: 1px solid var(--t4n-figure-columns-rule);
	color: var(--t4n-figure-columns-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px);
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal);
}

@media (max-width: 1399px) {
	:root {
		--t4n-figure-columns-padding-x: 100px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-figure-columns-padding-x: 60px;
		--t4n-figure-columns-inner-padding-y: 40px;
	}
}

@media (max-width: 991px) {
	:root {
		--t4n-figure-columns-padding-x: 40px;
		--t4n-figure-columns-inner-padding-y: 24px;
	}

	/* Two up rather than three squeezed: at this width a 24px caption in a
	   third of the band breaks after two or three words. */
	.t4n-figure-columns__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-figure-columns-padding-x: 20px;
		--t4n-figure-columns-padding-y: 48px;
		--t4n-figure-columns-inner-padding-y: 0px;
	}

	.t4n-figure-columns__list {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* === t4n-publications: a title beside a row of publication covers
      (see inc/t4n-publications.php) === */
:root {
	--t4n-publications-bg: #ECEFEA;
	--t4n-publications-text: #1E3A2F;
	--t4n-publications-padding-x: 180px;
	--t4n-publications-padding-y: 90px;
	--t4n-publications-title-width: 220px;
	--t4n-publications-list-width: 764px;
	/* The design insets the row from the right so the last cover does not run
	   to the band's edge. */
	--t4n-publications-list-inset: 90px;
	--t4n-publications-gap: 16px;
	--t4n-publications-item-gap: 32px;
	--t4n-publications-item-max: 190px;
}

.t4n-publications {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--t4n-publications-item-gap);
	padding: var(--t4n-publications-padding-y) var(--t4n-publications-padding-x);
	background: var(--t4n-publications-bg);
	color: var(--t4n-publications-text);
}

/* Class-based and tag-agnostic - see the note on .t4n-figure-columns__title. */
.t4n-publications__title {
	flex: 0 0 var(--t4n-publications-title-width);
	max-width: var(--t4n-publications-title-width);
	margin: 0;
	color: var(--t4n-publications-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal) !important;
}

.t4n-publications__list {
	display: flex;
	flex: 0 1 var(--t4n-publications-list-width);
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--t4n-publications-item-gap) var(--t4n-publications-gap);
	margin: 0;
	padding: 0 var(--t4n-publications-list-inset) 0 0;
	list-style: none;
}

/* The covers share the row equally, but a row of one or two must not stretch
   them past the size the design draws - hence the cap. */
.t4n-publications__item {
	flex: 1 1 0;
	min-width: 120px;
	max-width: var(--t4n-publications-item-max);
}

/* The whole tile is the link, not just the words under it. */
.t4n-publications__item > a,
.t4n-publications__item > div {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--t4n-publications-item-gap);
	color: var(--t4n-publications-text);
	text-decoration: none;
}

/* Bootstrap's `a:hover { text-decoration: underline }` (0,1,1) would put a
   line under the whole tile, so the anchor's own state is restated here and
   the underline lives on the label instead. */
.t4n-publications__item > a:hover,
.t4n-publications__item > a:focus {
	color: var(--t4n-publications-text);
	text-decoration: none;
}

.t4n-publications__label {
	color: var(--t4n-publications-text);
	font-family: var(--t4n-link-l-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-link-l-size, 20px);
	font-weight: 400;
	line-height: var(--t4n-link-l-lh, 1.3);
	text-decoration: underline;
}

.t4n-publications__item > a:hover .t4n-publications__label,
.t4n-publications__item > a:focus .t4n-publications__label {
	text-decoration: none;
}

/* The cover lifts slightly on hover, so a pointer anywhere on the tile shows
   it is one control. */
.t4n-publications__item > a .t4n-publication-cover {
	transition: transform 0.3s ease;
}

.t4n-publications__item > a:hover .t4n-publication-cover,
.t4n-publications__item > a:focus .t4n-publication-cover {
	transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
	.t4n-publications__item > a .t4n-publication-cover {
		transition: none;
	}

	.t4n-publications__item > a:hover .t4n-publication-cover,
	.t4n-publications__item > a:focus .t4n-publication-cover {
		transform: none;
	}
}

@media (max-width: 1399px) {
	:root {
		--t4n-publications-padding-x: 100px;
		--t4n-publications-list-inset: 40px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-publications-padding-x: 60px;
		--t4n-publications-list-inset: 0px;
	}
}

@media (max-width: 991px) {
	:root {
		--t4n-publications-padding-x: 40px;
		--t4n-publications-padding-y: 64px;
	}

	/* The title moves above the row: side by side it would be squeezed to a
	   word per line long before the covers stopped fitting. */
	.t4n-publications {
		flex-direction: column;
		align-items: stretch;
	}

	.t4n-publications__title {
		flex: 0 0 auto;
		max-width: none;
	}

	.t4n-publications__list {
		flex: 0 0 auto;
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-publications-padding-x: 20px;
		--t4n-publications-padding-y: 48px;
		--t4n-publications-item-gap: 24px;
	}

	.t4n-publications__item {
		flex: 1 1 140px;
	}
}
/* === t4n-news-slider: the hero of a news listing (see inc/t4n-news-slider.php).
      Slick does the sliding; the ".slick-" rules below are only what the
      section needs before and after it initialises. === */
:root {
	--t4n-news-slider-height: 462px;
	/* A block sets its own depth inline with --t4n-news-slider-height-set (the
	   "Height" field). An inline property beats any stylesheet rule, so a min()
	   is the only way to hold a ceiling over it as the page narrows -- the same
	   device t4n-image-band uses. Effectively no ceiling on a desktop. */
	--t4n-news-slider-height-cap: 900px;
	--t4n-news-slider-text: #FFFFFF;
	--t4n-news-slider-padding-left: 180px;
	--t4n-news-slider-padding-right: 80px;
	--t4n-news-slider-title-width: 390px;
	--t4n-news-slider-gap: 10px;
	/* The wash that keeps light text legible over any photograph. Flat across
	   the whole frame, replacing the leftward gradient the design drew
	   (0.34 -> 0.15 at 88deg): the headline sits left of centre, but the
	   arrows and the photographs themselves read better evenly darkened. */
	--t4n-news-slider-overlay: rgba(0, 0, 0, 0.30);
	--t4n-news-slider-arrow-bg: #FFFFFF;
	--t4n-news-slider-arrow-ink: #000000;
	--t4n-news-slider-arrow-size: 36px;
	/* How far each arrow sits in from its own edge of the photograph. */
	--t4n-news-slider-arrow-inset: 40px;
}

.t4n-news-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	color: var(--t4n-news-slider-text);
}

/* Until Slick has run there is no track to scroll, so the section shows the
   first slide alone and keeps the controls out of the way. */
.t4n-news-slider__track:not(.slick-initialized) .t4n-news-slider__slide:nth-child(n + 2) {
	display: none;
}

.t4n-news-slider__track:not(.slick-initialized) ~ .t4n-news-slider__controls {
	display: none;
}

.t4n-news-slider__slide {
	position: relative;
	height: min(
		var(--t4n-news-slider-height-set, var(--t4n-news-slider-height)),
		var(--t4n-news-slider-height-cap)
	);
	overflow: hidden;
}

/* A real <img> rather than a CSS background, so the browser can pick a size
   from its srcset. */
.t4n-news-slider__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.t4n-news-slider__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--t4n-news-slider-overlay);
}

.t4n-news-slider__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--t4n-news-slider-gap);
	height: 100%;
	padding: 0 var(--t4n-news-slider-padding-right) 0 var(--t4n-news-slider-padding-left);
}

/* A paragraph, not a heading: a carousel is a widget rather than document
   structure, so its rotating headlines stay out of the outline. */
.t4n-news-slider__title {
	max-width: var(--t4n-news-slider-title-width);
	margin: 0;
	color: var(--t4n-news-slider-text);
	font-family: var(--t4n-title-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-title-m-size, 30px);
	font-weight: 400;
	line-height: var(--t4n-title-m-lh, normal);
}

/* Bootstrap's `a:hover { text-decoration: underline }` (0,1,1) beats a plain
   class rule, so the link states are written as .class:hover (0,2,0). */
.t4n-news-slider__link {
	color: var(--t4n-news-slider-text) !important;
	font-family: var(--t4n-link-l-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-link-l-size, 20px);
	font-weight: 400;
	line-height: var(--t4n-link-l-lh, 1.3);
	text-decoration: underline;
	transition: opacity 0.2s ease;
}

.t4n-news-slider__link:hover,
.t4n-news-slider__link:focus {
	color: var(--t4n-news-slider-text) !important;
	text-decoration: underline;
	opacity: 0.75;
}

/* The label repeats on every slide, so the headline is what actually names the
   link -- carried for a screen reader only. */
.t4n-news-slider__link-context {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
}

/* One arrow at each edge of the photograph, so the bar spans the whole
   slider. It therefore lets pointer events straight through, and only the
   buttons take them back: a full-width overlay across the middle of the slide
   would otherwise swallow the drag gesture and the headline link under it. */
.t4n-news-slider__controls {
	position: absolute;
	z-index: 2;
	top: 50%;
	right: var(--t4n-news-slider-arrow-inset);
	left: var(--t4n-news-slider-arrow-inset);
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	pointer-events: none;
}

.t4n-news-slider__arrow {
	display: block;
	width: var(--t4n-news-slider-arrow-size);
	height: var(--t4n-news-slider-arrow-size);
	padding: 0;
	background: none;
	border: 0;
	line-height: 0;
	cursor: pointer;
	pointer-events: auto;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.t4n-news-slider__arrow:hover {
	transform: scale(1.08);
}

.t4n-news-slider__arrow:focus-visible {
	outline: 2px solid var(--t4n-news-slider-arrow-bg);
	outline-offset: 3px;
}

/* Coloured from CSS rather than from the exported fill/stroke attributes, so
   the discs can follow a theme without re-exporting the artwork. */
.t4n-news-slider__arrow-disc {
	fill: var(--t4n-news-slider-arrow-bg);
}

.t4n-news-slider__arrow-mark {
	stroke: var(--t4n-news-slider-arrow-ink);
}

@media (max-width: 1399px) {
	:root {
		--t4n-news-slider-padding-left: 100px;
		--t4n-news-slider-padding-right: 60px;
		--t4n-news-slider-arrow-inset: 32px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-news-slider-padding-left: 60px;
		--t4n-news-slider-padding-right: 40px;
	}
}

@media (max-width: 991px) {
	:root {
		--t4n-news-slider-padding-left: 40px;
		--t4n-news-slider-padding-right: 24px;
		--t4n-news-slider-arrow-inset: 24px;
		--t4n-news-slider-height-cap: 380px;
		--t4n-news-slider-title-width: 60%;
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-news-slider-padding-left: 20px;
		--t4n-news-slider-padding-right: 20px;
		--t4n-news-slider-height-cap: 320px;
		--t4n-news-slider-title-width: 100%;
		--t4n-news-slider-arrow-size: 32px;
		--t4n-news-slider-arrow-inset: 16px;
	}

	/* On a phone the headline runs the full width, so the arrows drop below it
	   rather than sitting on top of it -- still one at each edge. */
	.t4n-news-slider__controls {
		top: auto;
		bottom: 16px;
		transform: none;
	}

	.t4n-news-slider__content {
		padding-bottom: calc(var(--t4n-news-slider-arrow-size) + 32px);
	}

	.t4n-news-slider__title {
		font-size: min(var(--t4n-title-m-size, 30px), 6.5vw);
	}
}
/* === t4n-news-tile: one post in a news grid (see inc/t4n-news-tile.php).
      The tile t4n-news-grid draws; t4n-news-card beside it is the plainer one
      "Latest News" and "News by Category" use. === */
:root {
	--t4n-news-tile-radius: 4px;
	/* 282x223 in the design; kept as a ratio so the thumbnails stay aligned
	   across the row at any column width. */
	--t4n-news-tile-image-ratio: 282 / 223;
	--t4n-news-tile-image-placeholder: rgba(8, 59, 73, 0.10);
	--t4n-news-tile-text: #083B49;
	--t4n-news-tile-meta: rgba(8, 59, 73, 0.80);
	--t4n-news-tile-pill-bg: #E3E2DF;
	/* The lighter pill: what a tile shows on a coloured band, and what every
	   tile turns to on hover. */
	--t4n-news-tile-pill-alt-bg: #FFFBE6;
	--t4n-news-tile-pill-text: rgba(8, 59, 73, 0.80);
	--t4n-news-tile-hover-bg: #E9E3D3;
	--t4n-news-tile-padding-x: 8px;
	--t4n-news-tile-padding-y: 16px;
	--t4n-news-tile-gap: 12px;
	--t4n-news-tile-zoom: 1.15;
}

/* The legacy `* { border-radius: 0 !important }` reset near the top of this
   file zeroes any radius, so the design's 4px has to be forced -- here and on
   the tag below. */
.t4n-news-tile {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	background: transparent;
	transition: background-color 0.3s ease;
}

/* :focus-within as well as :hover, so reaching the tile with the keyboard
   shows the same state as reaching it with a pointer. */
.t4n-news-tile:hover,
.t4n-news-tile:focus-within {
	background: var(--t4n-news-tile-hover-bg);
}

.t4n-news-tile__media {
	position: relative;
	width: 100%;
	aspect-ratio: var(--t4n-news-tile-image-ratio);
	overflow: hidden;
}

.t4n-news-tile__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(var(--t4n-crop-zoom, 1));
	transition: transform 0.4s ease;
}

.t4n-news-tile__image--empty {
	background: var(--t4n-news-tile-image-placeholder);
}

.t4n-news-tile:hover .t4n-news-tile__image,
.t4n-news-tile:focus-within .t4n-news-tile__image {
	transform: scale(calc(var(--t4n-crop-zoom, 1) * var(--t4n-news-tile-zoom)));
}

.t4n-news-tile__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--t4n-news-tile-gap);
	width: 100%;
	padding: var(--t4n-news-tile-padding-y) var(--t4n-news-tile-padding-x);
}

.t4n-news-tile__tag {
	/* 4px on top of the 12px flex gap: the design sets the tag 16px off the
	   title while the title and date stay 12px apart. */
	margin: 0 0 4px;
	padding: 8px 16px;
	background: var(--t4n-news-tile-pill-bg);
	border-radius: 80px !important;
	color: var(--t4n-news-tile-pill-text);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
	transition: background-color 0.3s ease;
}

.t4n-news-tile:hover .t4n-news-tile__tag,
.t4n-news-tile:focus-within .t4n-news-tile__tag {
	background: var(--t4n-news-tile-pill-alt-bg);
}

/* Styled by class, never by tag, so the editor picks the heading level purely
   for the document outline. font-size/line-height need !important only to beat
   the legacy `h2, .h2 { font-size: ... !important }` rules earlier in this
   file. */
.t4n-news-tile__title {
	margin: 0;
	color: var(--t4n-news-tile-text);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px) !important;
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3) !important;
}

/* Stretched over the whole tile so the thumbnail, tag and title share one
   link, which is also why nothing else in the tile may be a link. */
.t4n-news-tile__link {
	color: var(--t4n-news-tile-text) !important;
	text-decoration: none;
}

.t4n-news-tile__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* The tile fills and its image zooms on hover, which is affordance enough, so
   the title carries no underline. Bootstrap's `a:hover { text-decoration:
   underline }` (0,1,1) has to be beaten, hence .class:hover (0,2,0). */
.t4n-news-tile__link:hover,
.t4n-news-tile__link:focus {
	color: var(--t4n-news-tile-text) !important;
	text-decoration: none;
}

.t4n-news-tile__date {
	color: var(--t4n-news-tile-meta);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
}

/* === t4n-news-grid: a band of news tiles (see inc/t4n-news-grid.php).
      The tile is t4n-news-tile above. The column count is a token rather than
      a per-block field so the responsive ladder at the end can step it down --
      an inline custom property would outrank every media query. === */
:root {
	--t4n-news-grid-bg: #F0EFEC;
	--t4n-news-grid-text: #083B49;
	--t4n-news-grid-label: #333333;
	--t4n-news-grid-padding-x: 180px;
	--t4n-news-grid-header-padding-top: 40px;
	--t4n-news-grid-header-padding-bottom: 16px;
	--t4n-news-grid-band-padding-y: 24px;
	--t4n-news-grid-padding-top: 71px;
	--t4n-news-grid-padding-bottom: 100px;
	--t4n-news-grid-columns: 4;
	--t4n-news-grid-gap: 8px;
	--t4n-news-grid-row-gap: 64px;
	--t4n-news-grid-label-gap: 10px;
}

.t4n-news-grid {
	background: var(--t4n-news-grid-bg);
	color: var(--t4n-news-grid-text);
}

/* The legacy `header { background: white !important; font-family: Graphik }`
   rule (~line 1071) matches this element, so both are neutralised locally
   rather than edited, since the rest of the site still relies on it. */
.t4n-news-grid__header {
	width: 100%;
	padding:
		var(--t4n-news-grid-header-padding-top)
		var(--t4n-news-grid-padding-x)
		var(--t4n-news-grid-header-padding-bottom);
	background: transparent !important;
	font-family: inherit;
}

.t4n-news-grid__title {
	margin: 0;
	color: var(--t4n-news-grid-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal) !important;
}

/* The plain section is the default shape; a block only becomes a coloured
   strip once an editor gives it a highlight colour. */
.t4n-news-grid__band {
	display: flex;
	flex-direction: column;
	gap: var(--t4n-news-grid-label-gap);
	padding:
		var(--t4n-news-grid-padding-top)
		var(--t4n-news-grid-padding-x)
		var(--t4n-news-grid-padding-bottom);
}

.t4n-news-grid--banded .t4n-news-grid__band {
	padding: var(--t4n-news-grid-band-padding-y) var(--t4n-news-grid-padding-x);
	background: var(--t4n-news-grid-band-bg);
}

/* A title above the band already opens the section, so the band stops adding
   a second opening gap under it. */
.t4n-news-grid__header + .t4n-news-grid__band {
	padding-top: var(--t4n-news-grid-band-padding-y);
}

.t4n-news-grid__label {
	margin: 0;
	color: var(--t4n-news-grid-label);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
}

.t4n-news-grid__list {
	display: grid;
	grid-template-columns: repeat(var(--t4n-news-grid-columns), minmax(0, 1fr));
	gap: var(--t4n-news-grid-row-gap) var(--t4n-news-grid-gap);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A coloured strip is one row deep in the design; when an editor puts more in
   it, the rows stay as tight as the columns rather than opening up. */
.t4n-news-grid--banded .t4n-news-grid__list {
	row-gap: var(--t4n-news-grid-gap);
}

.t4n-news-grid__item {
	display: flex;
}

/* The tiles on a coloured strip already sit on the accent, so their tags carry
   the lighter fill from the start. */
.t4n-news-grid--banded {
	--t4n-news-tile-pill-bg: var(--t4n-news-tile-pill-alt-bg);
}

@media (max-width: 1399px) {
	:root {
		--t4n-news-grid-padding-x: 100px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-news-grid-padding-x: 60px;
		--t4n-news-grid-columns: 3;
		--t4n-news-grid-row-gap: 48px;
	}
}

@media (max-width: 991px) {
	:root {
		--t4n-news-grid-padding-x: 40px;
		--t4n-news-grid-columns: 2;
		--t4n-news-grid-padding-top: 56px;
		--t4n-news-grid-padding-bottom: 72px;
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-news-grid-padding-x: 20px;
		--t4n-news-grid-columns: 1;
		--t4n-news-grid-padding-top: 40px;
		--t4n-news-grid-padding-bottom: 48px;
		--t4n-news-grid-row-gap: 32px;
		/* One tile per row: at the design's ratio a full-width thumbnail would
		   be taller than most of the phone screen. */
		--t4n-news-tile-image-ratio: 16 / 9;
	}
}
/* === t4n-logo-row: a label beside a row of partner logos (see
      inc/t4n-logo-row.php). Every logo is drawn inside the same square box and
      fitted to it, so files of different shapes line up without any of them
      being stretched or cropped. === */
:root {
	--t4n-logo-row-bg: #DCDDCF;
	--t4n-logo-row-text: #083B49;
	--t4n-logo-row-padding-x: 180px;
	--t4n-logo-row-padding-y: 24px;
	--t4n-logo-row-gap: 32px;
	--t4n-logo-row-title-width: 220px;
	--t4n-logo-row-logo-size: 80px;
	--t4n-logo-row-logo-padding: 12px;
	--t4n-logo-row-logo-gap: 24px;
}

.t4n-logo-row {
	display: flex;
	align-items: center;
	gap: var(--t4n-logo-row-gap);
	padding: var(--t4n-logo-row-padding-y) var(--t4n-logo-row-padding-x);
	background: var(--t4n-logo-row-bg);
	color: var(--t4n-logo-row-text);
}

/* Class-based and tag-agnostic; the size and line-height carry !important only
   to beat the legacy `h2, .h2 { font-size: ... !important }` rules earlier in
   this file. */
.t4n-logo-row__title {
	flex: 0 0 var(--t4n-logo-row-title-width);
	width: var(--t4n-logo-row-title-width);
	margin: 0;
	color: var(--t4n-logo-row-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal) !important;
}

.t4n-logo-row__list {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--t4n-logo-row-logo-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The box is what keeps the row even; the logo inside it is never resized past
   its own proportions. */
.t4n-logo-row__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: var(--t4n-logo-row-logo-size);
	padding: var(--t4n-logo-row-logo-padding);
}

.t4n-logo-row__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* width/height auto override the intrinsic attributes wp_get_attachment_image()
   prints, so max-width and max-height decide the size and the aspect ratio is
   kept whatever the file is. object-fit covers a logo whose own canvas is
   wider than the frame. */
.t4n-logo-row__logo {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

@media (max-width: 1399px) {
	:root {
		--t4n-logo-row-padding-x: 100px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-logo-row-padding-x: 60px;
		--t4n-logo-row-title-width: 180px;
		--t4n-logo-row-gap: 24px;
	}
}

@media (max-width: 991px) {
	:root {
		--t4n-logo-row-padding-x: 40px;
		--t4n-logo-row-padding-y: 32px;
		--t4n-logo-row-logo-size: 64px;
		--t4n-logo-row-logo-gap: 16px;
	}

	/* The label sits over the logos once the row is too narrow to hold both
	   side by side. */
	.t4n-logo-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.t4n-logo-row__title {
		flex: 0 0 auto;
		width: 100%;
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-logo-row-padding-x: 20px;
		--t4n-logo-row-logo-size: 56px;
		--t4n-logo-row-logo-padding: 8px;
	}
}
/* === t4n-fact-rows: a heading beside a list of labelled facts, one row per
      site (see inc/t4n-fact-rows.php). The rows are a repeater inside one
      block, so the vertical rhythm belongs to the row rather than to the
      section. === */
:root {
	--t4n-fact-rows-bg: #F0EFEC;
	--t4n-fact-rows-text: #083B49;
	--t4n-fact-rows-padding-x: 180px;
	--t4n-fact-rows-row-padding-y: 64px;
	--t4n-fact-rows-title-width: 220px;
	--t4n-fact-rows-body-width: 764px;
	--t4n-fact-rows-body-inset-end: 64px;
	--t4n-fact-rows-gap: 64px;
	--t4n-fact-rows-fact-gap: 16px;
}

.t4n-fact-rows {
	padding: 0 var(--t4n-fact-rows-padding-x);
	background: var(--t4n-fact-rows-bg);
	color: var(--t4n-fact-rows-text);
}

/* The design draws each site as its own band, so the space between two rows is
   the pair of paddings rather than a gap on a list. */
.t4n-fact-rows__row {
	display: grid;
	grid-template-columns: var(--t4n-fact-rows-title-width) minmax(0, var(--t4n-fact-rows-body-width));
	justify-content: space-between;
	gap: var(--t4n-fact-rows-gap);
	padding: var(--t4n-fact-rows-row-padding-y) 0;
}

/* Class-based and tag-agnostic; !important only to beat the legacy heading
   rules earlier in this file. */
.t4n-fact-rows__title {
	margin: 0;
	color: var(--t4n-fact-rows-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal) !important;
}

.t4n-fact-rows__facts {
	margin: 0;
	padding-right: var(--t4n-fact-rows-body-inset-end);
}

.t4n-fact-rows__fact + .t4n-fact-rows__fact {
	margin-top: var(--t4n-fact-rows-fact-gap);
}

/* Label and value run on as one paragraph, so both are inline; the whitespace
   between the two elements in the markup is the space after the colon. */
.t4n-fact-rows__label,
.t4n-fact-rows__value {
	display: inline;
	margin: 0;
	color: var(--t4n-fact-rows-text);
}

.t4n-fact-rows__label {
	font-family: var(--t4n-body-bold-m-font, 'Theinhardt-Bold', sans-serif);
	font-size: var(--t4n-body-bold-m-size, 20px);
	font-weight: 700;
	line-height: var(--t4n-body-bold-m-lh, 1.3);
}

/* Drawn by the design rather than typed into the field, so every fact
   punctuates the same way. */
.t4n-fact-rows__label::after {
	content: ":";
}

.t4n-fact-rows__value {
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
}

@media (max-width: 1399px) {
	:root {
		--t4n-fact-rows-padding-x: 100px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-fact-rows-padding-x: 60px;
		--t4n-fact-rows-title-width: 180px;
		--t4n-fact-rows-gap: 40px;
		--t4n-fact-rows-body-inset-end: 0px;
	}
}

@media (max-width: 991px) {
	:root {
		--t4n-fact-rows-padding-x: 40px;
		--t4n-fact-rows-row-padding-y: 40px;
		--t4n-fact-rows-gap: 24px;
	}

	/* The heading sits over its facts once the two no longer fit side by
	   side. */
	.t4n-fact-rows__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-fact-rows-padding-x: 20px;
		--t4n-fact-rows-row-padding-y: 32px;
	}
}
/* === t4n-link-list: a heading over a stack of link bars (see
      inc/t4n-link-list.php) === */
:root {
	--t4n-link-list-bg: #0B848E;
	--t4n-link-list-row-bg: rgba(24, 24, 24, 0.22);
	--t4n-link-list-text: #FFFFFF;
	--t4n-link-list-padding-x: 180px;
	--t4n-link-list-padding-y: 64px;
	--t4n-link-list-header-gap: 32px;
	/* The design stops the bars short of the right edge so they keep the same
	   measure as the body copy in the bands above. */
	--t4n-link-list-inset-end: 300px;
	--t4n-link-list-gap: 8px;
	--t4n-link-list-row-padding-x: 24px;
	--t4n-link-list-row-padding-y: 16px;
	--t4n-link-list-row-gap: 10px;
	--t4n-link-list-arrow-size: 18px;
}

.t4n-link-list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--t4n-link-list-header-gap);
	padding: var(--t4n-link-list-padding-y) var(--t4n-link-list-padding-x);
	background: var(--t4n-link-list-bg);
	color: var(--t4n-link-list-text);
}

/* Class-based and tag-agnostic; !important only to beat the legacy heading
   rules earlier in this file. */
.t4n-link-list__title {
	margin: 0;
	color: var(--t4n-link-list-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal) !important;
	max-width: 1200px;
}

.t4n-link-list__list {
	display: flex;
	flex-direction: column;
	gap: var(--t4n-link-list-gap);
	width: 100%;
	margin: 0;
	/* The browser's own ul padding-inline-start would otherwise indent the
	   bars past the section title above them; only the trailing inset is the
	   design's own. */
	padding: 0 var(--t4n-link-list-inset-end) 0 0;
	list-style: none;
}

@media(min-width: 1500px){
	.t4n-link-list__list {
		width: 1214px;
	}
}

/* Bootstrap a:hover { text-decoration: underline } (0,1,1) outranks a bare
   class, so the link states are written as .class:hover (0,2,0). */
.t4n-link-list__link {
	display: flex;
	align-items: center;
	gap: var(--t4n-link-list-row-gap);
	padding: var(--t4n-link-list-row-padding-y) var(--t4n-link-list-row-padding-x);
	background: var(--t4n-link-list-row-bg);
	color: var(--t4n-link-list-text) !important;
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

/* The bar itself answers the pointer, so the text needs no underline. The wash
   is mixed with white rather than replaced, so the hover reads over whatever
   colour an editor picks for the bar. */
.t4n-link-list__link:hover,
.t4n-link-list__link:focus {
	background: color-mix(in srgb, var(--t4n-link-list-row-bg) 70%, #FFFFFF 30%);
	color: var(--t4n-link-list-text) !important;
	text-decoration: none;
}

.t4n-link-list__link:focus-visible {
	outline: 2px solid var(--t4n-link-list-text);
	outline-offset: 2px;
}

.t4n-link-list__label {
	flex: 1;
	/* A flex item will not shrink below its own min-content width unless this
	   is set, and the label falls back to the raw URL when a link was saved
	   without text -- which has no break opportunity and would otherwise push
	   the bar out from under the arrow. break-word rather than anywhere: it
	   breaks the same way but leaves min-content sizing alone. */
	min-width: 0;
	overflow-wrap: break-word;
}

/* Never shrinks with the label beside it, and always ends the bar. */
.t4n-link-list__arrow {
	flex: 0 0 var(--t4n-link-list-arrow-size);
	color: var(--t4n-link-list-text);
}

@media (max-width: 1399px) {
	:root {
		--t4n-link-list-padding-x: 100px;
		--t4n-link-list-inset-end: 200px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-link-list-padding-x: 60px;
		--t4n-link-list-inset-end: 80px;
	}
}

@media (max-width: 991px) {
	:root {
		--t4n-link-list-padding-x: 40px;
		--t4n-link-list-padding-y: 48px;
		--t4n-link-list-inset-end: 0px;
		--t4n-link-list-header-gap: 24px;
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-link-list-padding-x: 20px;
		--t4n-link-list-padding-y: 40px;
		--t4n-link-list-row-padding-x: 16px;
	}
}
/* === t4n-related-news: a heading and a "Read all" link over a row of news
      tiles (see inc/t4n-related-news.php). The tile is the shared
      t4n-news-tile above. === */
:root {
	--t4n-related-news-bg: #F0EFEC;
	--t4n-related-news-text: #083B49;
	--t4n-related-news-padding-x: 180px;
	--t4n-related-news-padding-top: 64px;
	--t4n-related-news-padding-bottom: 100px;
	--t4n-related-news-header-gap: 24px;
	--t4n-related-news-title-width: 220px;
	--t4n-related-news-columns: 3;
	--t4n-related-news-gap: 8px;
	--t4n-related-news-row-gap: 64px;
	--t4n-related-news-more-padding: 16px;
	--t4n-related-news-more-radius: 2px;
	--t4n-related-news-more-gap: 10px;
	--t4n-related-news-arrow-size: 18px;
}

.t4n-related-news {
	padding:
		var(--t4n-related-news-padding-top)
		var(--t4n-related-news-padding-x)
		var(--t4n-related-news-padding-bottom);
	background: var(--t4n-related-news-bg);
	color: var(--t4n-related-news-text);
}

/* The legacy `header { background: white !important; font-family: Graphik }`
   rule (~line 1071) matches this element, so both are neutralised locally
   rather than edited, since the rest of the site still relies on it. */
.t4n-related-news__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: var(--t4n-related-news-header-gap);
	padding: 0;
	background: transparent !important;
	font-family: inherit;
}

/* Class-based and tag-agnostic; !important only to beat the legacy heading
   rules earlier in this file. */
.t4n-related-news__title {
	width: var(--t4n-related-news-title-width);
	margin: 0;
	color: var(--t4n-related-news-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal) !important;
}

/* Bootstrap a:hover { text-decoration: underline } (0,1,1) outranks a bare
   class, so the link states are written as .class:hover (0,2,0). */
.t4n-related-news__more {
	display: inline-flex;
	align-items: center;
	gap: var(--t4n-related-news-more-gap);
	padding: var(--t4n-related-news-more-padding);
	border-radius: var(--t4n-related-news-more-radius) !important;
	color: var(--t4n-related-news-text) !important;
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
	text-decoration: none;
	white-space: nowrap;
}

.t4n-related-news__more:hover,
.t4n-related-news__more:focus {
	color: var(--t4n-related-news-text) !important;
	text-decoration: underline;
}

.t4n-related-news__more-arrow {
	flex: 0 0 var(--t4n-related-news-arrow-size);
}

.t4n-related-news__list {
	display: grid;
	grid-template-columns: repeat(var(--t4n-related-news-columns), minmax(0, 1fr));
	gap: var(--t4n-related-news-row-gap) var(--t4n-related-news-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1399px) {
	:root {
		--t4n-related-news-padding-x: 100px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-related-news-padding-x: 60px;
		--t4n-related-news-title-width: auto;
		--t4n-related-news-row-gap: 48px;
	}
}

@media (max-width: 991px) {
	:root {
		--t4n-related-news-padding-x: 40px;
		--t4n-related-news-columns: 2;
		--t4n-related-news-padding-top: 56px;
		--t4n-related-news-padding-bottom: 72px;
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-related-news-padding-x: 20px;
		--t4n-related-news-columns: 1;
		--t4n-related-news-padding-top: 40px;
		--t4n-related-news-padding-bottom: 48px;
		--t4n-related-news-row-gap: 32px;
	}

	/* The label wraps under the title once the row is too narrow for both. */
	.t4n-related-news__header {
		flex-wrap: wrap;
		gap: 8px;
	}
}

/* === t4n-solution-card: a label and heading in the left margin beside a
      photograph carrying its own copy over a dark wash (see
      inc/t4n-solution-card.php) === */
:root {
	--t4n-solution-card-bg: #D0D2C1;
	--t4n-solution-card-text: #083B49;
	--t4n-solution-card-overlay: rgba(0, 0, 0, 0.64);
	--t4n-solution-card-overlay-text: #FFFFFF;
	--t4n-solution-card-padding-x: 180px;
	--t4n-solution-card-padding-top: 64px;
	--t4n-solution-card-padding-bottom: 48px;
	--t4n-solution-card-gap: 32px;
	--t4n-solution-card-intro-width: 220px;
	--t4n-solution-card-intro-gap: 16px;
	/* 764 of the design's 1512-wide band. A max rather than a fixed width, so
	   the picture keeps the design's measure on a wide screen and gives ground
	   before the left margin does on a narrow one. */
	--t4n-solution-card-media-width: 764px;
	--t4n-solution-card-media-padding-x: 24px;
	--t4n-solution-card-media-padding-top: 22px;
	--t4n-solution-card-media-padding-bottom: 62px;
	/* Shown while the photo loads, and behind it if it ever fails to. */
	--t4n-solution-card-media-bg: #BDC0A4;
	--t4n-solution-card-caption-gap: 16px;
	--t4n-solution-card-caption-width: 400px;
	--t4n-solution-card-badge-padding: 10px;
	--t4n-solution-card-arrow-size: 18px;
	--t4n-solution-card-transition: .6s ease-out;
	--t4n-solution-card-zoom: 1.04;
}

.t4n-solution-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--t4n-solution-card-gap);
	padding:
		var(--t4n-solution-card-padding-top)
		var(--t4n-solution-card-padding-x)
		var(--t4n-solution-card-padding-bottom);
	background: var(--t4n-solution-card-bg);
	color: var(--t4n-solution-card-text);
}

.t4n-solution-card__intro {
	display: flex;
	flex: 0 1 var(--t4n-solution-card-intro-width);
	flex-direction: column;
	align-items: flex-start;
	gap: var(--t4n-solution-card-intro-gap);
	max-width: var(--t4n-solution-card-intro-width);
}

/* The legacy `p { … !important }` rules reach any paragraph, so the label
   restates what it needs rather than inheriting it. */
.t4n-solution-card__label {
	margin: 0;
	color: var(--t4n-solution-card-text) !important;
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px) !important;
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3) !important;
}

/* Class-based and tag-agnostic — see the note on .t4n-page-hero__title for why
   the size and line-height carry !important. */
.t4n-solution-card__title {
	margin: 0;
	color: var(--t4n-solution-card-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal) !important;
}

.t4n-solution-card__media {
	flex: 0 1 var(--t4n-solution-card-media-width);
	max-width: var(--t4n-solution-card-media-width);
	min-width: 0;
}

/* The frame is the positioning context for everything stacked over the photo,
   and is either a link or a plain box depending on whether the card has one. */
.t4n-solution-card__frame {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* 764 x 549 in the design; a ratio rather than a height so the crop holds
	   its proportion at every width. */
	aspect-ratio: 764 / 549;
	width: 100%;
	padding:
		var(--t4n-solution-card-media-padding-top)
		var(--t4n-solution-card-media-padding-x)
		var(--t4n-solution-card-media-padding-bottom);
	overflow: hidden;
	background: var(--t4n-solution-card-media-bg);
	color: var(--t4n-solution-card-overlay-text) !important;
	text-decoration: none;
}

/* Bootstrap's `a:hover { text-decoration: underline }` (0,1,1) outranks the
   bare-class `text-decoration: none` above once the frame is hovered, and
   underlines the whole caption -- restated at (0,2,0) so hovering the card
   never underlines .t4n-solution-card__text. */
a.t4n-solution-card__frame:hover,
a.t4n-solution-card__frame:focus {
	text-decoration: none;
}

.t4n-solution-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--t4n-crop-pos, center);
	border: 0;
	transform: scale(var(--t4n-crop-zoom, 1));
	transform-origin: var(--t4n-crop-pos, center);
	transition: transform var(--t4n-solution-card-transition);
}

.t4n-solution-card__overlay {
	position: absolute;
	inset: 0;
	background: var(--t4n-solution-card-overlay);
}

/* Decorative only: the photo eases in slightly under the wash, revealing
   nothing that was not already legible, so a keyboard user misses nothing by
   never triggering it. */
a.t4n-solution-card__frame:hover .t4n-solution-card__image,
a.t4n-solution-card__frame:focus .t4n-solution-card__image {
	transform: scale(calc(var(--t4n-crop-zoom, 1) * var(--t4n-solution-card-zoom)));
}

@media (prefers-reduced-motion: reduce) {
	.t4n-solution-card__image {
		transition: none;
	}

	a.t4n-solution-card__frame:hover .t4n-solution-card__image,
	a.t4n-solution-card__frame:focus .t4n-solution-card__image {
		transform: scale(var(--t4n-crop-zoom, 1));
	}
}

/* The corner marker that says the picture is clickable. Absolute rather than a
   flex child, so the caption keeps the whole lower half to itself. */
.t4n-solution-card__badge {
	position: absolute;
	top: var(--t4n-solution-card-media-padding-top);
	right: var(--t4n-solution-card-media-padding-x);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--t4n-solution-card-badge-padding);
	border-radius: 2px;
	color: var(--t4n-solution-card-overlay-text);
}

.t4n-solution-card__arrow {
	display: block;
	width: var(--t4n-solution-card-arrow-size);
	height: var(--t4n-solution-card-arrow-size);
}

.t4n-solution-card__caption {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--t4n-solution-card-caption-gap);
	max-width: var(--t4n-solution-card-caption-width);
}

.t4n-solution-card__text {
	display: block;
	color: var(--t4n-solution-card-overlay-text);
	font-family: var(--t4n-body-bold-m-font, 'Theinhardt-Bold', sans-serif);
	font-size: var(--t4n-body-bold-m-size, 20px);
	font-weight: 400;
	line-height: var(--t4n-body-bold-m-lh, 1.2);
}

.t4n-solution-card__meta {
	display: block;
	color: var(--t4n-solution-card-overlay-text);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
}

@media (max-width: 1399px) {
	:root {
		--t4n-solution-card-padding-x: 100px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-solution-card-padding-x: 60px;
		--t4n-solution-card-intro-width: 180px;
		--t4n-solution-card-gap: 24px;
		--t4n-solution-card-media-padding-bottom: 40px;
	}
}

@media (max-width: 991px) {
	:root {
		--t4n-solution-card-padding-x: 40px;
		--t4n-solution-card-padding-top: 48px;
		--t4n-solution-card-padding-bottom: 48px;
		--t4n-solution-card-intro-width: 100%;
	}

	/* The left margin has nowhere left to sit, so the heading goes back above
	   the picture and the picture takes the full width. */
	.t4n-solution-card {
		flex-direction: column;
		align-items: stretch;
	}

	.t4n-solution-card__intro,
	.t4n-solution-card__media {
		flex: 0 0 auto;
		max-width: none;
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-solution-card-padding-x: 20px;
		--t4n-solution-card-media-padding-x: 16px;
		--t4n-solution-card-media-padding-bottom: 24px;
	}

	/* A phone-width column is far taller than the design's 764-wide frame, so
	   the crop is loosened rather than letting the picture run off the screen. */
	.t4n-solution-card__frame {
		aspect-ratio: 4 / 5;
	}
}

/* === t4n-countries-map: wraps the tech4nature-map plugin's [t4n_map]
      shortcode above the tiles on the /countries/ archive
      (inc/t4n-country-grid.php). No padding -- the map sits flush against the
      breadcrumb above and the "Participating countries" band below; the
      plugin's own stylesheet (map-app.css) handles everything else about the
      map itself. === */
.t4n-countries-map {
	padding: 0;
	background: #FFFFFF;
}

/* === t4n-country-grid: every country as a photograph carrying its name, three
      to a row, with no gap anywhere in the band. Draws both the /countries/
      archive and the "Countries Grid" block, which adds the title band above
      the same tiles (see inc/t4n-country-grid.php) === */
:root {
	--t4n-country-grid-bg: #083B49;
	--t4n-country-grid-text: #FFFFFF;
	--t4n-country-grid-columns: 3;
	/* The title band, when a block carries one. 40/80/32/40 in the design --
	   note the 40px start, where the other bands use 180. */
	--t4n-country-grid-header-padding-top: 40px;
	--t4n-country-grid-header-padding-bottom: 32px;
	--t4n-country-grid-header-padding-start: 40px;
	--t4n-country-grid-header-padding-end: 80px;
	/* The design sets the title in a 420px column rather than letting it run
	   the width of the band. */
	--t4n-country-grid-header-measure: 420px;
	/* 504 x 274 in the design. A height rather than a ratio on purpose: a row
	   holding fewer tiles stretches them wider without making them taller, so
	   every row in the band keeps the same depth. */
	--t4n-country-grid-height: 274px;
	--t4n-country-grid-padding: 24px;
	/* The design puts the name's line box 20px above the tile's bottom edge
	   (top: 214 in a 274-tall tile), so the offset is stated rather than
	   inherited from the 24px side inset -- our Theinhardt computes a looser
	   'normal' line height than Figma's rasterisation, which would otherwise
	   push the ink up by the difference. */
	--t4n-country-grid-title-offset: 20px;
	/* 21% black over the left quarter of the tile, gone by the right edge: it
	   darkens the corner the name sits in without dimming the photograph. */
	--t4n-country-grid-overlay: linear-gradient(90deg, rgba(0, 0, 0, 0.21) 25%, rgba(102, 102, 102, 0) 100%);
	/* The same wash at 35% for the hovered tile, which is how the design draws
	   the one tile it shows in that state. */
	--t4n-country-grid-overlay-hover: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 25%, rgba(102, 102, 102, 0) 100%);
	--t4n-country-grid-title-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
	/* 568.5 / 504 in the design's hovered tile, whose photograph is scaled up
	   from the centre by exactly that much. */
	--t4n-country-grid-zoom: 1.128;
	--t4n-country-grid-transition: .4s ease-out;
	--t4n-country-grid-arrow-size: 26px;
	--t4n-country-grid-arrow-top: 20px;
	--t4n-country-grid-arrow-right: 45px;
}

.t4n-country-grid {
	display: block;
	background: var(--t4n-country-grid-bg);
	color: var(--t4n-country-grid-text);
}

/* The title band a block can carry above the tiles. The legacy
   `header { background: white !important; font-family: Graphik }` rule
   (~line 1071) matches this element, so both are neutralised locally rather
   than edited, since the rest of the site still relies on them. */
.t4n-country-grid__header {
	padding:
		var(--t4n-country-grid-header-padding-top)
		var(--t4n-country-grid-header-padding-end)
		var(--t4n-country-grid-header-padding-bottom)
		var(--t4n-country-grid-header-padding-start);
	background: transparent !important;
	font-family: inherit;
}

/* Styled by class and tag-agnostic, so the level stays a document-outline
   choice; the size and line-height carry !important only to outrank the legacy
   `h2 … h6 { font-size: … !important }` rules earlier in this file. */
.t4n-country-grid__title {
	max-width: var(--t4n-country-grid-header-measure);
	margin: 0;
	color: var(--t4n-country-grid-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal) !important;
}

/* The archive's design shows no band at all, so its title is exposed to
   assistive technology and to the document outline only. The clip pattern
   rather than display:none, which would take it out of both. */
.t4n-country-grid__title--hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	max-width: none;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* flex-wrap rather than a grid, and this is the whole "never leave a gap"
   rule: with a basis of exactly one column a full row holds `columns` tiles,
   and whatever is left over on the last row grows to share that row's entire
   width -- two half-width tiles, or one full-width one. A grid would leave its
   empty tracks behind instead. */
.t4n-country-grid__list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* min-width: 0 keeps the flex base size authoritative: without it the name's
   own min-content width becomes the item's automatic minimum, which would push
   a row past 100% and wrap a tile early. The 0.5px comes off the basis so a
   fractional container width cannot round three tiles past the row either;
   flex-grow puts it straight back.

   z-index: 0 makes each tile its own stacking context, so the photograph, the
   wash and the name are only ever stacked against each other; and the tile is
   the positioning context the stretched link below measures itself against,
   which is why nothing between the two may be positioned. */
.t4n-country-grid__item {
	position: relative;
	z-index: 0;
	display: flex;
	flex: 1 1 calc(100% / var(--t4n-country-grid-columns) - 0.5px);
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
	height: var(--t4n-country-grid-height);
	padding: 0 var(--t4n-country-grid-padding) var(--t4n-country-grid-title-offset);
	overflow: hidden;
}

.t4n-country-grid__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	transform: scale(var(--t4n-crop-zoom, 1));
	transition: transform var(--t4n-country-grid-transition);
}

.t4n-country-grid__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--t4n-country-grid-overlay);
}

/* The darker wash of the hovered tile rides on its own layer at zero opacity:
   a gradient cannot be animated from one colour stop to another, so the two
   are cross-faded instead of swapped, which would jump next to the zoom. */
.t4n-country-grid__overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--t4n-country-grid-overlay-hover);
	opacity: 0;
	transition: opacity var(--t4n-country-grid-transition);
}

/* The "go to" marker. Inset from the top and right edges by the figures the
   client gave -- the icon itself sits where they put it, so the box carries no
   padding of its own to shift it. */
.t4n-country-grid__arrow {
	position: absolute;
	top: var(--t4n-country-grid-arrow-top);
	right: var(--t4n-country-grid-arrow-right);
	z-index: 2;
	display: flex;
	color: var(--t4n-country-grid-text);
	opacity: 0;
	transition: opacity var(--t4n-country-grid-transition);
}

.t4n-country-grid__arrow-icon {
	width: var(--t4n-country-grid-arrow-size);
	height: var(--t4n-country-grid-arrow-size);
}

/* Decorative only: the photograph eases in, the wash deepens and the marker
   appears, none of which reveals anything that was not already legible -- so a
   touch device, which never hovers, misses nothing. Driven from :focus-within
   as well, since the focus lands on the link inside. */
.t4n-country-grid__item:hover .t4n-country-grid__image,
.t4n-country-grid__item:focus-within .t4n-country-grid__image {
	transform: scale(calc(var(--t4n-crop-zoom, 1) * var(--t4n-country-grid-zoom)));
}

.t4n-country-grid__item:hover .t4n-country-grid__overlay::after,
.t4n-country-grid__item:focus-within .t4n-country-grid__overlay::after,
.t4n-country-grid__item:hover .t4n-country-grid__arrow,
.t4n-country-grid__item:focus-within .t4n-country-grid__arrow {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.t4n-country-grid__image,
	.t4n-country-grid__overlay::after,
	.t4n-country-grid__arrow {
		transition: none;
	}

	.t4n-country-grid__item:hover .t4n-country-grid__image,
	.t4n-country-grid__item:focus-within .t4n-country-grid__image {
		transform: scale(var(--t4n-crop-zoom, 1));
	}
}

/* The country's name, bottom-left of its tile: the last flex item of a column
   that packs to the end, rather than an absolutely positioned box, so the
   stretched link below still measures itself against the whole tile. z-index
   alone lifts it over the wash -- it applies to a flex item even while the
   item stays static, which is exactly why the name can afford not to be
   positioned.

   Styled by class and tag-agnostic, so the heading level stays a
   document-outline choice; font-size and line-height need !important only to
   outrank the legacy `h2, .h2 { font-size: … !important }` rules earlier in
   this file, whichever tag is in use. */
.t4n-country-grid__name {
	z-index: 2;
	margin: 0;
	color: var(--t4n-country-grid-text);
	font-family: var(--t4n-title-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-title-m-size, 30px) !important;
	font-weight: 400;
	line-height: var(--t4n-title-m-lh, normal) !important;
	text-shadow: var(--t4n-country-grid-title-shadow);
}

/* Colour is forced past Bootstrap's own `a` colour, and the hover state is
   restated at (0,2,0) because its `a:hover { text-decoration: underline }`
   (0,1,1) would otherwise underline every country name on the way past. */
.t4n-country-grid__link {
	color: var(--t4n-country-grid-text) !important;
	text-decoration: none;
}

.t4n-country-grid__link:hover,
.t4n-country-grid__link:focus {
	text-decoration: none;
}

/* Stretched over the whole tile, so the photograph is clickable while the
   accessibility tree keeps a single link per country. */
.t4n-country-grid__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.t4n-country-grid__empty {
	margin: 0;
	padding: var(--t4n-country-grid-padding);
	color: var(--t4n-country-grid-text) !important;
	font-family: var(--t4n-body-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-m-size, 20px) !important;
	line-height: var(--t4n-body-m-lh, 1.3) !important;
}

@media (max-width: 1199px) {
	:root {
		--t4n-country-grid-height: 240px;
	}
}

@media (max-width: 991px) {
	:root {
		/* Two to a row: a third of a tablet width is narrower than the name
		   needs, and the row still fills itself. */
		--t4n-country-grid-columns: 2;
		--t4n-country-grid-height: 260px;
		--t4n-country-grid-header-padding-top: 32px;
		--t4n-country-grid-header-padding-bottom: 24px;
		--t4n-country-grid-header-padding-end: 40px;
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-country-grid-columns: 1;
		--t4n-country-grid-height: 220px;
		--t4n-country-grid-padding: 20px;
		--t4n-country-grid-title-offset: 16px;
		--t4n-country-grid-header-padding-start: 20px;
		--t4n-country-grid-header-padding-end: 20px;
	}

	/* The token still governs the size; min() only steps in on the narrow
	   phones where a long name at the full 30px would reach the tile's edge,
	   so the type stays consistent with the rest of the site wherever it fits. */
	.t4n-country-grid__name {
		font-size: min(var(--t4n-title-m-size, 30px), 7vw) !important;
	}
}

/* t4n-404: the theme shipped with no 404 template at all, so this is new
   rather than a redesign. .t4n-header is position: sticky, not fixed, so
   normal document flow already clears it -- no extra top offset needed. */
.t4n-404 {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	padding: 80px 24px;
	text-align: center;
}

.t4n-404__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: 560px;
}

/* === t4n-sites-archive: the /sites/ page title (see
      inc/t4n-sites-archive.php) -- a real, visible <h1>, since the archive
      itself was previously blank rather than a page-builder block with a
      band of its own to name it. Only the padding is this component's own;
      the type comes free from the sitewide `h1, .h1` rule, and the side
      padding reuses --t4n-featured-cards-padding-x so the title lines up
      with the card grid rendered directly beneath it, at every breakpoint,
      without duplicating that ladder here. */
.t4n-sites-archive__title {
	margin: 0;
	padding: 48px var(--t4n-featured-cards-padding-x) 0;
}

/* === t4n-project-grid: every project as a photograph carrying its title and
      its primary category, three to a row, with a filter row above them.
      Draws the /projects/ archive and /project-category/<slug>/ (see
      inc/t4n-project-grid.php). The tile itself is the t4n-country-grid tile
      redrawn on the same tokens plus a category pill; the "never leave a gap"
      row rule is the identical flex trick, so read that block's comments for
      the reasoning behind min-width: 0 and the -0.5px basis. === */
:root {
	--t4n-project-grid-bg: #083B49;
	--t4n-project-grid-text: #FFFFFF;
	--t4n-project-grid-columns: 3;
	--t4n-project-grid-height: 274px;
	--t4n-project-grid-padding: 24px;
	--t4n-project-grid-overlay: linear-gradient(90deg, rgba(0, 0, 0, 0.21) 25%, rgba(102, 102, 102, 0) 100%);
	--t4n-project-grid-overlay-hover: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 25%, rgba(102, 102, 102, 0) 100%);
	--t4n-project-grid-title-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
	--t4n-project-grid-zoom: 1.128;
	--t4n-project-grid-transition: .4s ease-out;
	--t4n-project-grid-arrow-size: 26px;
	--t4n-project-grid-arrow-top: 20px;
	--t4n-project-grid-arrow-right: 45px;
	/* The filter row shares the theme's own padding ladder rather than the
	   tile band's fixed 24px, since it reads as a page-level nav rather than
	   part of the grid. */
	--t4n-project-grid-filters-padding-x: 180px;
	--t4n-project-grid-filters-padding-y: 24px;
	--t4n-project-grid-filters-gap: 24px;
	--t4n-project-grid-tag-bg: rgba(255, 255, 255, 0.16);
}

.t4n-project-grid {
	display: block;
	background: var(--t4n-project-grid-bg);
	color: var(--t4n-project-grid-text);
}

.t4n-project-grid__filters {
	padding: var(--t4n-project-grid-filters-padding-y) var(--t4n-project-grid-filters-padding-x) 0;
}

.t4n-project-grid__filters-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--t4n-project-grid-filters-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.t4n-project-grid__filter {
	color: var(--t4n-project-grid-text) !important;
	opacity: 0.6;
	font-family: var(--t4n-body-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-m-size, 20px) !important;
	line-height: var(--t4n-body-m-lh, 1.3) !important;
	text-decoration: none;
	transition: opacity 0.2s ease-out;
}

.t4n-project-grid__filter:hover,
.t4n-project-grid__filter:focus {
	opacity: 1;
	text-decoration: none;
}

.t4n-project-grid__filter--active {
	opacity: 1;
	text-decoration: underline;
}

/* flex-wrap, not grid -- see the t4n-country-grid block above for why. */
.t4n-project-grid__list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: var(--t4n-project-grid-filters-padding-y) var(--t4n-project-grid-filters-padding-x);
	list-style: none;
}

.t4n-project-grid__item {
	position: relative;
	z-index: 0;
	display: flex;
	flex: 1 1 calc(100% / var(--t4n-project-grid-columns) - 0.5px);
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
	height: var(--t4n-project-grid-height);
	padding: 0 var(--t4n-project-grid-padding) 20px;
	overflow: hidden;
}

.t4n-project-grid__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	transform: scale(var(--t4n-crop-zoom, 1));
	transition: transform var(--t4n-project-grid-transition);
}

.t4n-project-grid__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--t4n-project-grid-overlay);
}

.t4n-project-grid__overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--t4n-project-grid-overlay-hover);
	opacity: 0;
	transition: opacity var(--t4n-project-grid-transition);
}

.t4n-project-grid__arrow {
	position: absolute;
	top: var(--t4n-project-grid-arrow-top);
	right: var(--t4n-project-grid-arrow-right);
	z-index: 2;
	display: flex;
	color: var(--t4n-project-grid-text);
	opacity: 0;
	transition: opacity var(--t4n-project-grid-transition);
}

.t4n-project-grid__arrow-icon {
	width: var(--t4n-project-grid-arrow-size);
	height: var(--t4n-project-grid-arrow-size);
}

.t4n-project-grid__item:hover .t4n-project-grid__image,
.t4n-project-grid__item:focus-within .t4n-project-grid__image {
	transform: scale(calc(var(--t4n-crop-zoom, 1) * var(--t4n-project-grid-zoom)));
}

.t4n-project-grid__item:hover .t4n-project-grid__overlay::after,
.t4n-project-grid__item:focus-within .t4n-project-grid__overlay::after,
.t4n-project-grid__item:hover .t4n-project-grid__arrow,
.t4n-project-grid__item:focus-within .t4n-project-grid__arrow {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.t4n-project-grid__image,
	.t4n-project-grid__overlay::after,
	.t4n-project-grid__arrow {
		transition: none;
	}

	.t4n-project-grid__item:hover .t4n-project-grid__image,
	.t4n-project-grid__item:focus-within .t4n-project-grid__image {
		transform: scale(var(--t4n-crop-zoom, 1));
	}
}

.t4n-project-grid__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.t4n-project-grid__tag {
	display: inline-block;
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: 4px;
	background: var(--t4n-project-grid-tag-bg);
	color: var(--t4n-project-grid-text);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px) !important;
	line-height: var(--t4n-caption-m-lh, 1.3) !important;
}

.t4n-project-grid__title {
	margin: 0;
	color: var(--t4n-project-grid-text);
	font-family: var(--t4n-title-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-title-m-size, 30px) !important;
	font-weight: 400;
	line-height: var(--t4n-title-m-lh, normal) !important;
	text-shadow: var(--t4n-project-grid-title-shadow);
}

.t4n-project-grid__link {
	color: var(--t4n-project-grid-text) !important;
	text-decoration: none;
}

.t4n-project-grid__link:hover,
.t4n-project-grid__link:focus {
	text-decoration: none;
}

.t4n-project-grid__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.t4n-project-grid__empty {
	margin: 0;
	padding: var(--t4n-project-grid-filters-padding-y) var(--t4n-project-grid-filters-padding-x);
	color: var(--t4n-project-grid-text) !important;
	font-family: var(--t4n-body-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-m-size, 20px) !important;
	line-height: var(--t4n-body-m-lh, 1.3) !important;
}

@media (max-width: 1399px) {
	:root {
		--t4n-project-grid-filters-padding-x: 100px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-project-grid-height: 240px;
		--t4n-project-grid-filters-padding-x: 60px;
	}
}

@media (max-width: 991px) {
	:root {
		--t4n-project-grid-columns: 2;
		--t4n-project-grid-height: 260px;
		--t4n-project-grid-filters-padding-x: 40px;
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-project-grid-columns: 1;
		--t4n-project-grid-height: 220px;
		--t4n-project-grid-padding: 20px;
		--t4n-project-grid-filters-padding-x: 20px;
		--t4n-project-grid-filters-padding-y: 20px;
	}

	.t4n-project-grid__title {
		font-size: min(var(--t4n-title-m-size, 30px), 7vw) !important;
	}
}

/* === t4n-table: a real data table for the page builder (see
      inc/t4n-table.php). Scrolls sideways inside a focusable region by
      default; "Stacked cards" (.t4n-table--stack) turns each row into a card
      below 767px instead. === */
:root {
	--t4n-table-bg: #F0EFEC;
	--t4n-table-header-bg: #083B49;
	--t4n-table-header-text: #FFFFFF;
	--t4n-table-text: #083B49;
	--t4n-table-padding-x: 180px;
	--t4n-table-padding-y: 64px;
	--t4n-table-cell-padding-x: 24px;
	--t4n-table-cell-padding-y: 16px;
	--t4n-table-border: rgba(8, 59, 73, 0.16);
}

.t4n-table {
	padding: var(--t4n-table-padding-y) var(--t4n-table-padding-x);
	background: var(--t4n-table-bg);
	color: var(--t4n-table-text);
}

/* The region is what makes an overflowing table reachable by keyboard (WCAG
   2.1.1) -- a bare overflow-x: auto is not, since nothing inside it is
   normally focusable. */
.t4n-table__scroll {
	overflow-x: auto;
}

.t4n-table__scroll:focus-visible {
	outline: 2px solid var(--t4n-table-text);
	outline-offset: 2px;
}

.t4n-table__table {
	width: 100%;
	border-collapse: collapse;
}

/* Class-based and tag-agnostic; !important only to beat the legacy heading
   rules earlier in this file. caption-side is the default, set explicitly
   since the property exists specifically to be able to move it. */
.t4n-table__caption {
	margin-bottom: 16px;
	color: var(--t4n-table-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal) !important;
	text-align: left;
	caption-side: top;
}

.t4n-table__heading-cell,
.t4n-table__cell {
	padding: var(--t4n-table-cell-padding-y) var(--t4n-table-cell-padding-x);
	border-bottom: 1px solid var(--t4n-table-border);
}

.t4n-table__heading-cell {
	background: var(--t4n-table-header-bg);
	color: var(--t4n-table-header-text) !important;
	font-family: var(--t4n-body-bold-m-font, 'Theinhardt-Bold', sans-serif);
	font-size: var(--t4n-body-bold-m-size, 20px) !important;
	font-weight: 700;
	line-height: var(--t4n-body-bold-m-lh, 1.3) !important;
	white-space: nowrap;
}

.t4n-table__cell {
	color: var(--t4n-table-text);
	font-family: var(--t4n-caption-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-caption-m-size, 16px);
	font-weight: 400;
	line-height: var(--t4n-caption-m-lh, 1.3);
}

.t4n-table__row:last-child .t4n-table__cell {
	border-bottom: none;
}

@media (max-width: 1399px) {
	:root {
		--t4n-table-padding-x: 100px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-table-padding-x: 60px;
	}
}

@media (max-width: 991px) {
	:root {
		--t4n-table-padding-x: 40px;
		--t4n-table-padding-y: 48px;
		--t4n-table-cell-padding-x: 16px;
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-table-padding-x: 20px;
		--t4n-table-padding-y: 40px;
	}

	/* "Stacked cards": the table stops looking like a table and becomes one
	   card per row, each cell labelled from its own column heading via the
	   data-t4n-label attribute. The heading row is carried off-screen rather
	   than hidden outright, so a screen reader still gets it; the cell's own
	   alignment field is overridden because "align this column" stops meaning
	   anything once there is only one column of values, label on the left. */
	.t4n-table--stack .t4n-table__table,
	.t4n-table--stack .t4n-table__body,
	.t4n-table--stack .t4n-table__row,
	.t4n-table--stack .t4n-table__cell {
		display: block;
		width: 100%;
	}

	.t4n-table--stack .t4n-table__head {
		position: absolute;
		display: block;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		white-space: nowrap;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		border: 0;
	}

	.t4n-table--stack .t4n-table__row {
		margin-bottom: 16px;
		border: 1px solid var(--t4n-table-border);
	}

	.t4n-table--stack .t4n-table__row:last-child {
		margin-bottom: 0;
	}

	.t4n-table--stack .t4n-table__cell {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 16px;
		border-bottom: 1px solid var(--t4n-table-border);
		text-align: right !important;
	}

	.t4n-table--stack .t4n-table__cell:last-child {
		border-bottom: none;
	}

	.t4n-table--stack .t4n-table__cell[data-t4n-label]::before {
		content: attr(data-t4n-label);
		flex: 1 0 auto;
		color: var(--t4n-table-text);
		font-family: var(--t4n-body-bold-m-font, 'Theinhardt-Bold', sans-serif);
		font-weight: 700;
		text-align: left;
	}
}

/* === t4n-visuals-row: a heading beside a row of images at a chosen size
      (see inc/t4n-visuals-row.php). Deliberately separate from t4n-logo-row,
      whose 80px box is that block's own contract. === */
:root {
	--t4n-visuals-row-bg: #FFFFFF;
	--t4n-visuals-row-text: #083B49;
	--t4n-visuals-row-padding-x: 180px;
	--t4n-visuals-row-padding-y: 64px;
	--t4n-visuals-row-header-gap: 32px;
	--t4n-visuals-row-gap: 32px;
	--t4n-visuals-row-item-size: 80px;
}

.t4n-visuals-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--t4n-visuals-row-header-gap);
	padding: var(--t4n-visuals-row-padding-y) var(--t4n-visuals-row-padding-x);
	background: var(--t4n-visuals-row-bg);
	color: var(--t4n-visuals-row-text);
}

/* Class-based and tag-agnostic; !important only to beat the legacy heading
   rules earlier in this file. */
.t4n-visuals-row__title {
	margin: 0;
	color: var(--t4n-visuals-row-text);
	font-family: var(--t4n-body-xl-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-xl-size, 24px) !important;
	font-weight: 400;
	line-height: var(--t4n-body-xl-lh, normal) !important;
}

.t4n-visuals-row__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--t4n-visuals-row-gap);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.t4n-visuals-row__item {
	display: flex;
}

.t4n-visuals-row__link {
	display: flex;
}

/* Fixed square box whatever the upload's aspect ratio, so a row of mixed
   images still lines up -- the same idea as t4n-logo-row's own box, just
   unlocked to more than one fixed size via the modifiers below. */
.t4n-visuals-row__image {
	width: var(--t4n-visuals-row-item-size);
	height: var(--t4n-visuals-row-item-size);
	max-width: 100%;
	object-fit: contain;
}

.t4n-visuals-row--icon {
	--t4n-visuals-row-item-size: 32px;
}

.t4n-visuals-row--medium {
	--t4n-visuals-row-item-size: 160px;
}

.t4n-visuals-row--large {
	--t4n-visuals-row-item-size: 240px;
}

/* "Banner" keeps t4n-logo-row's own logo shape instead: free width, fixed
   height, for a wide sponsor banner a square box would otherwise squeeze
   down to its shortest side. */
.t4n-visuals-row--banner .t4n-visuals-row__image {
	width: auto;
	height: 120px;
	max-width: 100%;
}

@media (max-width: 1399px) {
	:root {
		--t4n-visuals-row-padding-x: 100px;
	}
}

@media (max-width: 1199px) {
	:root {
		--t4n-visuals-row-padding-x: 60px;
	}
}

@media (max-width: 991px) {
	:root {
		--t4n-visuals-row-padding-x: 40px;
		--t4n-visuals-row-header-gap: 24px;
		--t4n-visuals-row-gap: 24px;
	}
}

@media (max-width: 767px) {
	:root {
		--t4n-visuals-row-padding-x: 20px;
		--t4n-visuals-row-padding-y: 48px;
	}
}


/* === t4n-search-empty: the "no results" message on the search results
      template (see search.php). Static copy rather than an editable block --
      no Tech4Nature Options tab and no per-instance color option -- since
      it only ever appears in this one place. === */
:root {
	--t4n-search-empty-bg: #FFFFFF;
	--t4n-search-empty-text: #083B49;
	--t4n-search-empty-padding-y: 96px;
	--t4n-search-empty-padding-x: 40px;
	--t4n-search-empty-gap: 16px;
	--t4n-search-empty-text-width: 560px;
}

.t4n-search-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--t4n-search-empty-gap);
	width: 100%;
	padding: var(--t4n-search-empty-padding-y) var(--t4n-search-empty-padding-x);
	background: var(--t4n-search-empty-bg);
	color: var(--t4n-search-empty-text);
	text-align: center;
}

/* Class-based and tag-agnostic, like every other title in the redesign;
   !important only to beat the legacy h2 { font-size !important } rule
   earlier in this file. */
.t4n-search-empty__title {
	margin: 0;
	color: var(--t4n-search-empty-text);
	font-family: var(--t4n-title-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-title-m-size, 30px) !important;
	font-weight: 400;
	line-height: var(--t4n-title-m-lh, normal) !important;
}

.t4n-search-empty__text {
	max-width: var(--t4n-search-empty-text-width);
	margin: 0;
	color: var(--t4n-search-empty-text);
	font-family: var(--t4n-body-m-font, 'Theinhardt-Regular', sans-serif);
	font-size: var(--t4n-body-m-size, 20px) !important;
	line-height: var(--t4n-body-m-lh, 1.3) !important;
}

.t4n-search-empty__text strong {
	font-weight: 700;
}

@media (max-width: 767px) {
	:root {
		--t4n-search-empty-padding-y: 64px;
		--t4n-search-empty-padding-x: 20px;
	}
}