/* ==================================================
   resetMod.css
   ================================================== */

/* ===============================
   Modern Universal Browser Reset v1.0
   - Explicit 10px root font-size (1rem = 10px)
   - Lint-friendly (no * selectors)
   - Modern browsers only (last 3–5 years)
   =============================== */


/* 1) Root: base font-size and box-sizing */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%; /* iOS Safari */
  tab-size: 4;
  /* color-scheme: light dark; */
}

/* 2) Elements inherit box-sizing, reset margin/padding */
body, div, section, article, header, footer, main,
p, h1, h2, h3, h4, h5, h6,
ul, ol, li, dl, dt, dd,
blockquote, pre, figure,
table, tr, td, th,
form, fieldset, legend,
button, input, select, textarea,
img, video, canvas, svg, iframe,
details, summary, div, a, span {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 3) Body baseline */
body {
  font-family: "Montserrat", Arial, sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: inherit;
  background: transparent;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
/* 4) Links */
a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}
a:active, a:hover { outline: none; }

/* 5) Buttons and form controls */
button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
  line-height: inherit;
  -webkit-appearance: none;
  appearance: none;
}
button { cursor: pointer; }
textarea { resize: vertical; }

/* 6) Focus handling */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid Highlight;
  outline-offset: 2px;
}

/* 7) Lists */
ul, ol, menu { list-style: none; }

/* 8) Media */
img, picture, svg, video, audio, iframe, canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-style: none;
}

/* 9) Tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

/* 10) Misc elements */
hr { border: none; height: 0; }
fieldset { border: 0; min-inline-size: 0; }
legend { padding: 0; white-space: normal; }
.spacer {
  display: block;
  height: 1rem;
  margin: 0;
  padding: 0;
}
/* 11) Accessibility helpers */
[hidden] { display: none !important; }

/* 12) Print adjustments */
@media print {
  body { background: #fff; }
  a[href]::after { content: " (" attr(href) ")"; }
}

/* 13) Optional tiny utilities */
.srOnly {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.invisible { visibility: hidden !important; }
.clear:after { content: ""; display: table; clear: both; }
.relative {
  position:relative;
}
.absolute { position:absolute; }

/* colors */

:root {
  --green: #5FA644;
  --blue: #00A3DA;
  --orange: #E78133;
  --lightGrey: #F0F0F0;
  --midGrey: #4C4C4C;
  --darkGrey: #1A1A1A;
}

.green {
  color: var(--green);
}
.blue {
  color: var(--blue);
}
.orange {
  color: var(--orange);
}


  .greenBg {
    background-color: var(--green);
  }
  .darkGreyBg {
    background-color: var(--darkGrey);
  }
  .orangeBg {
    background-color: var(--orange);
  }
  .midGreyBg {
    background-color: var(--midGrey);
  }
  .blueBg {
    background-color: var(--blue);
  }
  .whiteBg {
   background-color: white;
 
  }
  .blackBg {
    background-color: black;
  }
  
  .greenBg2 {
    background-color: #8fc17c;
  }
  .orangeBg2 {
    background-color: #eea770;

  }
  .blueBg2 {
    background-color: #4dbfe5;
  }


/* fonts */

@font-face {
  font-family: 'lightcase';
  src: url("/fnt/lightcase.eot");
  src: url("/fnt/lightcase.eot#iefix") format("embedded-opentype"), url("/fnt/lightcase.woff") format("woff"), url("/fnt/lightcase.ttf") format("truetype"), url("/fnt/lightcase.svg#lightcase") format("svg");
  font-weight: normal;
  font-style: normal;
}



/* ==================================================
   scrollTrigger.css
   ================================================== */


/* .catch{
	display:none;
  }

.mv_fade_in{
	display: block;
	padding: 20px;
	background-color: var(--rGreen);
}

.fade_in{
	display: block;
	margin: auto;
	margin-top: 50px;
	width: 200px;
	height: 100px;
	background-color: var(--rBlue);
} */

.u-fade-type-left{
	transform: translateX(-50rem);
	opacity: 0;
}

.u-fade-type-left.is-active{
	transition: 1s;
	transform: translateX(0);
	opacity: 1;
}


.u-fade-type-right{
	transform: translateX(50rem);
	opacity: 0;
}

.u-fade-type-right.is-active{
	transition: 1s;
	transform: translateX(0);
	opacity: 1;
}


.u-fade-type-down{
	transform: translateY(10rem);
	opacity: 0;
}

.u-fade-type-down.is-active{
	transition: 1s;
	transform: translateY(0);
	opacity: 1;
}


.u-fade-type-up{
	transform: translateY(-10rem);
	opacity: 0;
}

.u-fade-type-up.is-active{
	transition: 1s;
	transform: translateY(0);
	opacity: 1;
}


.u-fade-type-static{
	opacity: 0;
}

.u-fade-type-static.is-active{
	transition: 1s;
	opacity: 1;
}



/* ==================================================
   lightcase.css
   ================================================== */

/**
 * Lightcase - jQuery Plugin
 * The smart and flexible Lightbox Plugin.
 *
 * @author		Cornel Boppart <cornel@bopp-art.com>
 * @copyright	Author
 *
 * @version		2.5.0 (11/03/2018)
 */
/**
 * Lightcase settings
 *
 * Note: Override default settings for your project without touching this source code by simply
 * defining those variables within a SASS map called '$lightcase-custom'.
 *
 * // Example usage
 * $lightcase-custom: (
 *   'breakpoint': 768px
 * );
 */

/* line 12, ../scss/components/fonts/_font-lightcase.scss */
[class*='lightcase-icon-']:before {
  font-family: 'lightcase', sans-serif;
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  text-align: center;
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

/* Codes */
/* line 35, ../scss/components/fonts/_font-lightcase.scss */
.lightcase-icon-play:before {
  content: '\e800';
}

/* line 36, ../scss/components/fonts/_font-lightcase.scss */
.lightcase-icon-pause:before {
  content: '\e801';
}

/* line 37, ../scss/components/fonts/_font-lightcase.scss */
.lightcase-icon-close:before {
  content: '\e802';
}

/* line 38, ../scss/components/fonts/_font-lightcase.scss */
.lightcase-icon-prev:before {
  content: '\e803';
}

/* line 39, ../scss/components/fonts/_font-lightcase.scss */
.lightcase-icon-next:before {
  content: '\e804';
}

/* line 40, ../scss/components/fonts/_font-lightcase.scss */
.lightcase-icon-spin:before {
  content: '\e805';
}

/**
 * Mixin providing icon defaults to be used on top of font-lightcase.
 *
 * Example usage:
 * @include icon(#e9e9e9)
 */
/**
 * Mixin providing icon defaults including a hover status to be used
 * on top of font-lightcase.
 *
 * Example usage:
 * @include icon-hover(#e9e9e9, #fff)
 */
/**
 * Provides natural content overflow behavior and scrolling support
 * even so for touch devices.
 *
 * Example usage:
 * @include overflow()
 */
/**
 * Neutralizes/resets dimensions including width, height, position as well as margins,
 * paddings and styles. Used to enforce a neutral and unstyled look and behavoir!
 *
 * Example usage:
 * @include clear(true)
 *
 * @param boolean $important
 */
@-webkit-keyframes lightcase-spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-moz-keyframes lightcase-spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-o-keyframes lightcase-spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-ms-keyframes lightcase-spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes lightcase-spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
/* line 1, ../scss/components/modules/_case.scss */
#lightcase-case {
  display: none;
  position: fixed;
  z-index: 2002;
  top: 50%;
  left: 50%;
	/* font-family: 'Source Sans Pro', sans-serif; */
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  text-shadow: none;
}
@media screen and (max-width: 640px) {
  /* line 16, ../scss/components/modules/_case.scss */
  html[data-lc-type=inline] #lightcase-case, html[data-lc-type=ajax] #lightcase-case {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 55px 0 70px 0;
    width: 100% !important;
    height: 100% !important;
    overflow: auto !important;
  }
}

@media screen and (min-width: 641px) {
  /* line 4, ../scss/components/modules/_content.scss */
  html:not([data-lc-type=error]) #lightcase-content {
    position: relative;
    z-index: 1;
    text-shadow: none;
    background-color: #fff;
    box-shadow: none;
    -webkit-backface-visibility: hidden;
  }
}
@media screen and (min-width: 641px) {
  /* line 23, ../scss/components/modules/_content.scss */
  html[data-lc-type=image] #lightcase-content, html[data-lc-type=video] #lightcase-content {
    background-color: #333;
    background-color: #FFF;

  }
}
/* line 31, ../scss/components/modules/_content.scss */
html[data-lc-type=inline] #lightcase-content, html[data-lc-type=ajax] #lightcase-content, html[data-lc-type=error] #lightcase-content {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
@media screen and (max-width: 640px) {
  /* line 31, ../scss/components/modules/_content.scss */
  html[data-lc-type=inline] #lightcase-content, html[data-lc-type=ajax] #lightcase-content, html[data-lc-type=error] #lightcase-content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
  }
}
/* line 43, ../scss/components/modules/_content.scss */
html[data-lc-type=inline] #lightcase-content .lightcase-contentInner, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner, html[data-lc-type=error] #lightcase-content .lightcase-contentInner {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and (max-width: 640px) {
  /* line 43, ../scss/components/modules/_content.scss */
  html[data-lc-type=inline] #lightcase-content .lightcase-contentInner, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner, html[data-lc-type=error] #lightcase-content .lightcase-contentInner {
    padding: 15px;
  }
  /* line 52, ../scss/components/modules/_content.scss */
  html[data-lc-type=inline] #lightcase-content .lightcase-contentInner, html[data-lc-type=inline] #lightcase-content .lightcase-contentInner > *, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner > *, html[data-lc-type=error] #lightcase-content .lightcase-contentInner, html[data-lc-type=error] #lightcase-content .lightcase-contentInner > * {
    width: 100% !important;
    max-width: none !important;
  }
  /* line 59, ../scss/components/modules/_content.scss */
  html[data-lc-type=inline] #lightcase-content .lightcase-contentInner > *:not(iframe), html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner > *:not(iframe), html[data-lc-type=error] #lightcase-content .lightcase-contentInner > *:not(iframe) {
    height: auto !important;
    max-height: none !important;
  }
}
@media screen and (max-width: 640px) {
  /* line 70, ../scss/components/modules/_content.scss */
  html.lightcase-isMobileDevice[data-lc-type=iframe] #lightcase-content .lightcase-contentInner iframe {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media screen and (max-width: 640px) and (min-width: 641px) {
  /* line 74, ../scss/components/modules/_content.scss */
  html[data-lc-type=image] #lightcase-content .lightcase-contentInner, html[data-lc-type=video] #lightcase-content .lightcase-contentInner {
    line-height: 0.75;
  }
}

/* line 82, ../scss/components/modules/_content.scss */
html[data-lc-type=image] #lightcase-content .lightcase-contentInner {
  position: relative;
  overflow: hidden !important;
}
@media screen and (max-width: 640px) {
  /* line 91, ../scss/components/modules/_content.scss */
  html[data-lc-type=inline] #lightcase-content .lightcase-contentInner .lightcase-inlineWrap, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner .lightcase-inlineWrap, html[data-lc-type=error] #lightcase-content .lightcase-contentInner .lightcase-inlineWrap {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
  }
}
@media screen and (min-width: 641px) {
  /* line 100, ../scss/components/modules/_content.scss */
  html:not([data-lc-type=error]) #lightcase-content .lightcase-contentInner .lightcase-inlineWrap {
    padding: 30px;
    overflow: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 640px) {
  /* line 117, ../scss/components/modules/_content.scss */
  #lightcase-content h1, #lightcase-content h2, #lightcase-content h3, #lightcase-content h4, #lightcase-content h5, #lightcase-content h6, #lightcase-content p {
    color: #aaa;
  }
}
@media screen and (min-width: 641px) {
  /* line 117, ../scss/components/modules/_content.scss */
  #lightcase-content h1, #lightcase-content h2, #lightcase-content h3, #lightcase-content h4, #lightcase-content h5, #lightcase-content h6, #lightcase-content p {
    color: #333;
  }
}

/* line 3, ../scss/components/modules/_error.scss */
#lightcase-case p.lightcase-error {
  margin: 0;
  font-size: 17px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #aaa;
}
@media screen and (max-width: 640px) {
  /* line 3, ../scss/components/modules/_error.scss */
  #lightcase-case p.lightcase-error {
    padding: 30px 0;
  }
}
@media screen and (min-width: 641px) {
  /* line 3, ../scss/components/modules/_error.scss */
  #lightcase-case p.lightcase-error {
    padding: 0;
  }
}

/* line 4, ../scss/components/modules/_global.scss */
.lightcase-open body {
  overflow: hidden;
}
/* line 8, ../scss/components/modules/_global.scss */
.lightcase-isMobileDevice .lightcase-open body {
  max-width: 100%;
  max-height: 100%;
}

/* line 1, ../scss/components/modules/_info.scss */
#lightcase-info {
  position: absolute;
  padding-top: 15px;
}
/* line 9, ../scss/components/modules/_info.scss */
#lightcase-info #lightcase-title,
#lightcase-info #lightcase-caption {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-weight: normal;
  text-overflow: ellipsis;
}
/* line 19, ../scss/components/modules/_info.scss */
#lightcase-info #lightcase-title {
  font-size: 18px;
  color: var(--darkGrey);
  font-weight: 400;
}
@media screen and (max-width: 640px) {
  /* line 19, ../scss/components/modules/_info.scss */
  #lightcase-info #lightcase-title {
    position: fixed;
    top: 10px;
    left: 0;
    max-width: 87.5%;
    padding: 5px 15px;
/*     background: #333; */
  }
}
/* line 33, ../scss/components/modules/_info.scss */
#lightcase-info #lightcase-caption {
  clear: both;
  font-size: 14px;
  color: var(--darkGrey);
  font-weight: 300;
  
}
/* line 39, ../scss/components/modules/_info.scss */
#lightcase-info #lightcase-sequenceInfo {
  font-size: 14px;
  color: var(--green);
  font-weight: 300;
}
@media screen and (max-width: 640px) {
  /* line 45, ../scss/components/modules/_info.scss */
  .lightcase-fullScreenMode #lightcase-info {
    padding-left: 15px;
    padding-right: 15px;
  }
  /* line 51, ../scss/components/modules/_info.scss */
  html:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-info {
    position: static;
  }
}

/* line 1, ../scss/components/modules/_loading.scss */
#lightcase-loading {
  position: fixed;
  z-index: 9999;
  width: 1.123em;
  height: auto;
  font-size: 38px;
  line-height: 1;
  text-align: center;
  text-shadow: none;
  position: fixed;
  z-index: 2001;
  top: 50%;
  left: 50%;
  margin-top: -0.5em;
  margin-left: -0.5em;
  opacity: 1;
  font-size: 32px;
  text-shadow: none;
  -moz-transform-origin: 50% 53%;
  -webkit-animation: lightcase-spin 0.5s infinite linear;
  -moz-animation: lightcase-spin 0.5s infinite linear;
  -o-animation: lightcase-spin 0.5s infinite linear;
  animation: lightcase-spin 0.5s infinite linear;
}
/* line 20, ../scss/components/mixins/_presets.scss */
#lightcase-loading, #lightcase-loading:focus {
  text-decoration: none;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: color, opacity, ease-in-out 0.25s;
  -moz-transition: color, opacity, ease-in-out 0.25s;
  -o-transition: color, opacity, ease-in-out 0.25s;
  transition: color, opacity, ease-in-out 0.25s;
}
/* line 32, ../scss/components/mixins/_presets.scss */
#lightcase-loading > span {
  display: inline-block;
  text-indent: -9999px;
}

/* line 2, ../scss/components/modules/_navigation.scss */
a[class*='lightcase-icon-'] {
  position: fixed;
  z-index: 9999;
  width: 1.123em;
  height: auto;
  font-size: 38px;
  line-height: 1;
  text-align: center;
  text-shadow: none;
  outline: none;
  cursor: pointer;
}
/* line 20, ../scss/components/mixins/_presets.scss */
a[class*='lightcase-icon-'], a[class*='lightcase-icon-']:focus {
  text-decoration: none;
  color: var(--green);
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: color, opacity, ease-in-out 0.25s;
  -moz-transition: color, opacity, ease-in-out 0.25s;
  -o-transition: color, opacity, ease-in-out 0.25s;
  transition: color, opacity, ease-in-out 0.25s;
}
/* line 32, ../scss/components/mixins/_presets.scss */
a[class*='lightcase-icon-'] > span {
  display: inline-block;
  text-indent: -9999px;
}
/* line 49, ../scss/components/mixins/_presets.scss */
a[class*='lightcase-icon-']:hover {
  color: var(--darkGrey);
  text-shadow: none;
}
/* line 10, ../scss/components/modules/_navigation.scss */
.lightcase-isMobileDevice a[class*='lightcase-icon-']:hover {
  color: var(--darkGrey);
  text-shadow: none;
}
/* line 17, ../scss/components/modules/_navigation.scss */
a[class*='lightcase-icon-'].lightcase-icon-close {
  position: fixed;
  top: 15px;
  right: 15px;
  bottom: auto;
  margin: 0;
  opacity: 0;
  outline: none;
}
/* line 28, ../scss/components/modules/_navigation.scss */
a[class*='lightcase-icon-'].lightcase-icon-prev {
  left: 15px;
}
/* line 33, ../scss/components/modules/_navigation.scss */
a[class*='lightcase-icon-'].lightcase-icon-next {
  right: 15px;
}
/* line 38, ../scss/components/modules/_navigation.scss */
a[class*='lightcase-icon-'].lightcase-icon-pause, a[class*='lightcase-icon-'].lightcase-icon-play {
  left: 50%;
  margin-left: -0.5em;
}
@media screen and (min-width: 641px) {
  /* line 38, ../scss/components/modules/_navigation.scss */
  a[class*='lightcase-icon-'].lightcase-icon-pause, a[class*='lightcase-icon-'].lightcase-icon-play {
    opacity: 0;
  }
}
@media screen and (max-width: 640px) {
  /* line 2, ../scss/components/modules/_navigation.scss */
  a[class*='lightcase-icon-'] {
    bottom: 15px;
    font-size: 24px;
  }
}
@media screen and (min-width: 641px) {
  /* line 2, ../scss/components/modules/_navigation.scss */
  a[class*='lightcase-icon-'] {
    bottom: 50%;
    margin-bottom: -0.5em;
  }
  /* line 57, ../scss/components/modules/_navigation.scss */
  a[class*='lightcase-icon-']:hover, #lightcase-case:hover ~ a[class*='lightcase-icon-'] {
    opacity: 1;
  }
}

/* line 1, ../scss/components/modules/_overlay.scss */
#lightcase-overlay {
  display: none;
  width: 100%;
  min-height: 100%;
  position: fixed;
  z-index: 2000;
  top: -9999px;
  bottom: -9999px;
  left: 0;
  background: white;
  
}
@media screen and (max-width: 640px) {
  /* line 1, ../scss/components/modules/_overlay.scss */
  #lightcase-overlay {
    opacity: 1 !important;
  }
}



/* ==================================================
   smart.css
   ================================================== */

@media (max-width: 768px) {
    .desktop {
      display:none;
    }
    
    .smart {
      display:block;
    }
    
    .u-fade-type-left{
      transform: translateY(10rem);
    opacity: 0;
    }
    
    .u-fade-type-left.is-active{
      transition: 1s;
    transform: translateY(0);
    opacity: 1;
    }
    
    
    .u-fade-type-right{
      transform: translateY(10rem);
    opacity: 0;
    }
    
    .u-fade-type-right.is-active{
      transition: 1s;
    transform: translateY(0);
    opacity: 1;
    }
    
    
    .u-fade-type-down{
      transform: translateY(10rem);
      opacity: 0;
    }
    
    .u-fade-type-down.is-active{
      transition: 1s;
      transform: translateY(0);
      opacity: 1;
    }
    
    
    .u-fade-type-up{
      transform: translateY(10rem);
    opacity: 0;
    }
    
    .u-fade-type-up.is-active{
      transition: 1s;
    transform: translateY(0);
    opacity: 1;
    }
    
    
    .u-fade-type-static{
      opacity: 0;
    }
    
    .u-fade-type-static.is-active{
      transition: 1s;
      opacity: 1;
    }
    
    
    html,
    body {
      font-size: 10px;
    }
    
    
    /* smart menu */
    
    #menu-container {
      position:absolute;
      right:0;
      top:0;
    }
    #menu-wrapper {
      overflow: hidden;
      max-width: 9.4rem;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    
      /* background-color: rgb (225, 232, 241); */
    }
    
    #menu-wrapper #hamburger-menu {
      position: relative;
      width:3rem;
      height: 2.8rem;
      margin: 2.6rem;
      margin-top: 2.2rem;
      margin-bottom: 2.2rem;
    }
    
    #menu-wrapper #hamburger-menu .x {
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      left: 0;
      display: block;
      width: 100%;
      height: 0.3rem;
      border-radius: 1rem;
      background-color:  var(--green);
      position: absolute;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .4s ease-in-out;
      transition: .4s ease-in-out;
    }
    
    #menu-wrapper #hamburger-menu .x:nth-child(1) {
      top: 0;
    }
    
    #menu-wrapper #hamburger-menu .x:nth-child(2) {
      top: 1.2rem;
    }
    
    #menu-wrapper #hamburger-menu .x:nth-child(3) {
      top: 2.4rem;
    }
    
    #menu-wrapper #hamburger-menu.open .x:nth-child(1) {
      background-color: white;
      top: 1.2rem;
      -webkit-transform: rotate(135deg);
      transform: rotate(135deg);
    }
    
    #menu-wrapper #hamburger-menu.open .x:nth-child(2) {
      background-color: white;
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      right: -60px;
    }
    
    #menu-wrapper #hamburger-menu.open .x:nth-child(3) {
      background-color: white;
      top: 1.2rem;
      -webkit-transform: rotate(-135deg);
      transform: rotate(-135deg);
    }
    #menu-container .menu-list {
      padding-left: 0;
      display: block;
      position: absolute;
      width: 37rem;
      z-index: 9999;
      overflow-y: auto;
      overflow-x: hidden;
      right: -37rem;
      /* border-left: 1px solid white;
      border-bottom: 1px solid white; */
    }
    
    .liMain {
      font-size:2.2rem;
      line-height: 2;	
      text-transform: uppercase;
      font-weight: 500;
    
    }
    .liSub {
      font-size:2rem;
      line-height: 1.6;	
      text-transform: none;
      font-weight: 500;	
      
    }
    
    .liMain .aMain {
      position: relative;
      display:block;
      width:100%;
      color:white;
      border-top: 1px solid white;
      padding-left: 3.7rem;
    
    }
    .liSub .aSub {
      display:block;
      width:100%;
      color:black;
      padding-left: 3.7rem;
    }
    .liSub:last-of-type .aSub {
      padding-bottom: 1rem;
    }
    .liSub:first-of-type .aSub {
      padding-top: 1rem;
    }
    
    
    
    .revealContentNav {
      display: none;
    }
    
    
    
    
    
    .openNav {
      transition: all 0.2s linear;
      position: relative;
    }
    
    .openNav .faNav {
      position: absolute;
      text-align: left;
      left: 0;
      top: 0;
    }
    
    .revealPlusNav::before {
      content: "";
      position: absolute;
      transition: all 0.2s ease;
      left: 0;
      top: 0;
      width: 3rem;
      height: 4.5rem;
      background-image: url('/gfx/arrowDownWhite.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
      transition: all 0.2s linear;
      border-left: 1px solid var(--green);
    }
    
    .revealMinusNav::before {
      content: "";
      position: absolute;
      transition: all 0.2s ease;
      left: 0;
      top: 0;
      width: 3rem;
      height: 4.5rem;
      background-image: url('/gfx/arrowUpWhite.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
      border-left: 1px solid var(--green);
    }
    
    .headerSmart {
      width: 100%;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-left: auto;
      margin-right: auto;
      position:relative;
    }
    
    .headerSmartFixed {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 200;
      background-color: black;
    }
    
    .headerSmart  .logo {
      height: 7.2rem;
      float: left;
      padding-bottom: 1.6rem;
      padding-top:1.6rem;
    }
    
    .headerSmart .logo img {
      height: 100%;
      width: auto;
    }
    
    .flexCentreCentre {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .flexLeftTop {
      display: flex;
      justify-content: left;
      align-items: top;
    }
    
    .flexLeftCentre {
      display: flex;
      justify-content: left;
      align-items: center;
    }
    
    .flexLeftBottom {
      display: flex;
      justify-content: left;
      align-items: bottom;
    }
    
    .flexRightTop {
      display: flex;
      justify-content: right;
      align-items: top;
    }
    
    .flexRightCentre {
      display: flex;
      justify-content: right;
      align-items: center;
    }
    
    .flexRightBottom {
      display: flex;
      justify-content: right;
      align-items: bottom;
    }
    .headerOffset {
      width: 100%;
      background-color:black;
      height: 7.2rem;
    }
    
    .blackBg {
      background-color: black;
    }
    .lightGreyBg {
      background-color: var(--lightGrey);
    }
    
    
    .fatLineOuter {
      position: relative;
      width: 4px;
      border-left: 1.5px solid #aaaaaa;
      margin-top: 6rem;
      height: calc(100% -18rem);
      margin-bottom: 12rem;
      display:none;
    }
    
    
    .fatLineInner {
      position: absolute;
      top: 25%;
      left: -1.5px;   
      width: 4px; 
      height: 50%; 
      background: var(--green); 
      z-index: 10;
      display: none;
    }
    .container {
     width: 100%;
    }
    /* .inner66 {
      max-width:128rem;
      padding-left: 0;
      padding-right: 0;
      margin-left: auto;
      margin-right: auto;
    } */
    
    .inner66 {
      max-width:128rem;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-left: auto;
      margin-right: auto;
    }
    .inner60 {
      max-width:128rem;
      padding-left: 2rem;
      padding-right: 0;
      margin-left: auto;
      margin-right: auto;
    
    }
    .inner06 {
      max-width:128rem;
      padding-left: 0;
      padding-right: 2rem;
      margin-left: auto;
      margin-right: auto;
    
    }
    .inner40 {
      max-width:128rem;
      padding-left: 2rem;
      padding-right: 0;
      margin-left: auto;
      margin-right: auto;
    
    }
    
    .inner44 {
      max-width:128rem;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-left: auto;
      margin-right: auto;
    
    }
    .inner33 {
      max-width:128rem;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-left: auto;
      margin-right: auto;
    
    }
    .inner33 {
      max-width:128rem;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-left: auto;
      margin-right: auto;
    
    }
    
    .inner99 {
      max-width:128rem;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-left: auto;
      margin-right: auto;
    }
    .inner22 {
      max-width:128rem;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-left: auto;
      margin-right: auto;
    }
    
    .inner09 {
      max-width:128rem;
      padding-left: 0;
      padding-right: 0;
      margin-left: auto;
      margin-right: auto;
    }
    .inner90 {
      max-width:128rem;
      padding-left: 0;
      padding-right: 0;
      margin-left: auto;
      margin-right: auto;
    }
    
    .inner1212 {
      max-width:128rem;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-left: auto;
      margin-right: auto;
    }
    
    .pt6 {
      padding-top: 4rem;
    }
    .pb6 {
      padding-bottom: 4rem;
    }
    .pt4{
      padding-top: 4rem;
    }
    .pb4 {
      padding-bottom: 4rem;
    }
    .pt3 {
      padding-top: 3rem;
    }
    
    .pb3 {
      padding-bottom: 3rem;
    }
    .pt2 {
      padding-top: 2rem;
    }
    .pb2 {
      padding-bottom: 2rem;
    }
    .pt0 {
      padding-top: 0;
    }
    .pb0 {
      padding-bottom: 0;
    }
    
    
    
    
    
    .more {
      font-size: 1.7rem;
      line-height: 1;
      font-weight: 500;
    }
    .moreMini {
      font-size: 1.4rem;
      line-height: 1;
      font-weight: 500;
    }
    
    .mb4 {
      margin-bottom: 4rem !important;
    }
    .moreBlock {
      display:block;
      padding-right: 0 !important;
    }
    .moreButton {
      display:inline-block;
      padding: 1.2rem;
      padding-left: 1.8rem;
      padding-right: 1.8rem;
      border-style: solid;
      border-width: 1px;
      border-top-left-radius: 0.8rem;
      border-bottom-left-radius: 0.8rem;
      cursor: pointer;
    }
    .moreBesides {
      display: inline-block;
      width: 4.1rem;
      padding:1.2rem;
      border-style: solid;
      border-width: 1px;
      border-left: none;
      border-top-right-radius: 0.8rem;
      border-bottom-right-radius: 0.8rem;
      cursor: pointer;
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
    }
    
    .lessButton {
      display:inline-block;
      padding: 1.2rem;
      padding-left: 1.8rem;
      padding-right: 1.8rem;
      border-style: solid;
      border-width: 1px;
      border-top-right-radius: 0.8rem;
      border-bottom-right-radius: 0.8rem;
      cursor: pointer;
    }
    .lessBesides {
      display: inline-block;
      width: 4.1rem;
      padding:1.2rem;
      border-style: solid;
      border-width: 1px;
      border-right: none;
      border-top-left-radius: 0.8rem;
      border-bottom-left-radius: 0.8rem;
      cursor: pointer;
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
    }
    
    
    .moreButtonMini {
      display:inline-block;
      padding: 1.05rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      border-style: solid;
      border-width: 1px;
      border-top-left-radius: 0.5rem;
      border-bottom-left-radius: 0.5rem;
      cursor: pointer;
    }
    .moreBesidesMini {
      display: inline-block;
      width: 3.8rem;
      padding: 1.05rem;
      border-style: solid;
      border-width: 1px;
      border-left: none;
      border-top-right-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;
      cursor: pointer;
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
    }
     .sideBySide {
       display: inline-block;
       vertical-align: middle;
       margin-right: 4rem;
     }
     .sideBySidePlus {
        display: block;
        vertical-align: middle;
        margin-bottom: 1rem;
      }
     
     .sideBySide:last-of-type, .sideBySidePlus:last-of-type {
        margin-right: 0;
      }
    
    
    
    
          
          /* new buttons */
          
          .moreButton10111211 {
             border-color: white;
             color:white;
           }
          .moreBesides10111211 {
           border-color: white;
            background-image: url('/gfx/arrowRightWhite.png');
           }
          
           .more:hover .moreButton10111211,
           .more.hovered .moreButton10111211 {
            border-color: white;
            background-color: var(--green);
            color:white;
            }
          .more:hover .moreBesides10111211,
           .more.hovered .moreBesides10111211{
             border-color: white;
             color:white;
             background-color: var(--green);
              background-image: url('/gfx/arrowRightWhite.png');
             }
             
           /* ++++++++++ */
           
           .moreButton52552511 {
              border-color: var(--darkGrey);
              background-color: var(--green);
              color: var(--darkGrey);
            }
           .moreBesides52552511 {
              border-color: var(--darkGrey);
             background-image: url('/gfx/arrowRightDarkGrey.png');
             background-color: var(--green);
            }
           
            .more:hover .moreButton52552511,
            .more.hovered .moreButton52552511 {
             border-color: var(--green);
             background-color: var(--darkGrey);
             color:white;
             }
           .more:hover .moreBesides52552511,
            .more.hovered .moreBesides52552511 {
             border-color: var(--green);
              color:white;
             background-color: var(--darkGrey);
               background-image: url('/gfx/arrowRightWhite.png');
              }
              
      /* ++++++++++ */
       
       .moreButton52552522 {
          border-color: var(--darkGrey);
          background-color: var(--green);
          color: var(--darkGrey);
        }
       .moreBesides52552522 {
          border-color: var(--darkGrey);
         background-image: url('/gfx/arrowRightDarkGrey.png');
         background-color: var(--green);
        }
       
        .more:hover .moreButton52552522,
        .more.hovered .moreButton52552522 {
         border-color: var(--green);
         background-color: var(--darkGrey);
         color:var(--green);
         }
       .more:hover .moreBesides52552522,
        .more.hovered .moreBesides52552522 {
         border-color: var(--green);
          color:var(--green);
         background-color: var(--darkGrey);
           background-image: url('/gfx/arrowRightGreen.png');
          }
          
      
      /* ++++++++++ */
       
       .moreButton10113313 {
          border-color: white;
          background-color: transparent;
          color: white;
        }
       .moreBesides10113313 {
          border-color: white;
         background-image: url('/gfx/arrowRightWhite.png');
         background-color: transparent;
        }
       
        .more:hover .moreButton10113313,
        .more.hovered .moreButton10113313 {
         border-color: var(--blue);
         background-color: white;
         color:var(--blue);
         }
       .more:hover .moreBesides10113313,
        .more.hovered .moreBesides10113313 {
         border-color: var(--blue);
          color:var(--blue);
         background-color: white;
           background-image: url('/gfx/arrowRightBlue.png');
          }
          
      
              
      /* ++++++++++ */
       
       .moreButton53553511 {
          border-color: var(--darkGrey);
          background-color: var(--blue);
          color: var(--darkGrey);
        }
       .moreBesides53553511 {
          border-color: var(--darkGrey);
         background-image: url('/gfx/arrowRightDarkGrey.png');
         background-color: var(--blue);
        }
       
        .more:hover .moreButton53553511,
        .more.hovered .moreButton53553511 {
         border-color: var(--blue);
         background-color: var(--darkGrey);
         color:white;
         }
       .more:hover .moreBesides53553511,
        .more.hovered .moreBesides53553511 {
         border-color: var(--blue);
          color:white;
         background-color: var(--darkGrey);
           background-image: url('/gfx/arrowRightWhite.png');
          }
      /* ++++++++++ */
       
       .moreButton53553533 {
          border-color: var(--darkGrey);
          background-color: var(--blue);
          color: var(--darkGrey);
        }
       .moreBesides53553533 {
          border-color: var(--darkGrey);
         background-image: url('/gfx/arrowRightDarkGrey.png');
         background-color: var(--blue);
        }
       
        .more:hover .moreButton53553533,
        .more.hovered .moreButton53553533 {
         border-color: var(--blue);
         background-color: var(--darkGrey);
         color:var(--blue);
         }
       .more:hover .moreBesides53553533,
        .more.hovered .moreBesides53553533 {
         border-color: var(--blue);
          color:var(--blue);
         background-color: var(--darkGrey);
           background-image: url('/gfx/arrowRightBlue.png');
          }
        
            /* ++++++++++ */
    
      
             .moreButton10112122 {
                border-color: white;
                color:white;
              }
             .moreBesides10112122 {
              border-color: white;
               background-image: url('/gfx/arrowRightWhite.png');
              }
             
              .more:hover .moreButton10112122,
              .more.hovered .moreButton10112122 {
               border-color: var(--green);
               background-color: white;
               color:var(--green);
               }
             .more:hover .moreBesides10112122,
              .more.hovered .moreBesides10112122{
                border-color: var(--green);
                color: var(--green);
                background-color: white;
                 background-image: url('/gfx/arrowRightGreen.png');
                }
                
             
       /* ++++++++++ */
          
             .moreButton10111311 {
                border-color: white;
                color:white;
              }
             .moreBesides10111311 {
              border-color: white;
               background-image: url('/gfx/arrowRightWhite.png');
              }
             
              .more:hover .moreButton10111311,
              .more.hovered .moreButton10111311 {
               border-color: white;
               background-color: var(--blue);
               color:white;
               }
             .more:hover .moreBesides10111311,
              .more.hovered .moreBesides10111311{
                border-color: white;
                color:white;
                background-color: var(--blue);
                 background-image: url('/gfx/arrowRightWhite.png');
                }
    
      /* ++++++++++ */
             
             .moreButton30331311 {
                border-color: var(--blue);
                color:var(--blue);
              }
             .moreBesides30331311 {
              border-color: var(--blue);
               background-image: url('/gfx/arrowRightBlue.png');
              }
             
              .more:hover .moreButton30331311,
              .more.hovered .moreButton30331311 {
               border-color: white;
               background-color: var(--blue);
               color:white;
               }
             .more:hover .moreBesides30331311,
             .more.hovered .moreBesides30331311 {
                border-color: white;
                color:white;
                background-color: var(--blue);
                 background-image: url('/gfx/arrowRightWhite.png');
                }
      /* ++++++++++ */
                 
                 .moreButton50551211 {
                    border-color: var(--darkGrey);
                    color:var(--darkGrey);
                  }
                 .moreBesides50551211 {
                  border-color: var(--darkGrey);
                   background-image: url('/gfx/arrowRightDarkGrey.png');
                  }
                 
                  .more:hover .moreButton50551211,
                  .more.hovered .moreButton50551211 {
                   border-color: white;
                   background-color: var(--green);
                   color:white;
                   }
                 .more:hover .moreBesides50551211,
                 .more.hovered .moreBesides50551211 {
                    border-color: white;
                    color:white;
                    background-color: var(--green);
                     background-image: url('/gfx/arrowRightWhite.png');
                    }
                    
      /* ++++++++++ */
       
       .moreButton20221211 {
          border-color: var(--green);
          color:var(--green);
        }
       .moreBesides20221211 {
        border-color: var(--green);
         background-image: url('/gfx/arrowRightGreen.png');
        }
       
        .more:hover .moreButton20221211,
        .more.hovered .moreButton20221211 {
         border-color: white;
         background-color: var(--green);
         color:white;
         }
       .more:hover .moreBesides20221211,
       .more.hovered .moreBesides20221211 {
          border-color: white;
          color:white;
          background-color: var(--green);
           background-image: url('/gfx/arrowRightWhite.png');
          }
                    /* ++++++++++ */
                     
                     .moreButton50551011 {
                        border-color: var(--darkGrey);
                        color:var(--darkGrey);
                      }
                     .moreBesides50551011 {
                      border-color: var(--darkGrey);
                       background-image: url('/gfx/arrowRightDarkGrey.png');
                      }
                     
                      .more:hover .moreButton50551011,
                      .more.hovered .moreButton50551011 {
                       border-color: white;
                       background-color: transparent;
                       color:white;
                       }
                     .more:hover .moreBesides50551011,
                     .more.hovered .moreBesides50551011 {
                        border-color: white;
                        color:white;
                        background-color: transparent;
                         background-image: url('/gfx/arrowRightWhite.png');
                        }
    
    
                    /* ++++++++++ */
                         
                         .moreButton50551011 {
                            border-color: var(--darkGrey);
                            color:var(--darkGrey);
                          }
                         .moreBesides50551011 {
                          border-color: var(--darkGrey);
                           background-image: url('/gfx/arrowRightDarkGrey.png');
                          }
                         
                          .more:hover .moreButton50551011,
                          .more.hovered .moreButton50551011 {
                           border-color: white;
                           background-color: transparent;
                           color:white;
                           }
                         .more:hover .moreBesides50551011,
                         .more.hovered .moreBesides50551011 {
                            border-color: white;
                            color:white;
                            background-color: transparent;
                             background-image: url('/gfx/arrowRightWhite.png');
                            }
    
    
     /* ++++++++++ */
                     
                     .moreButton30331011 {
                        border-color: var(--blue);
                        color:var(--blue);
                      }
                     .moreBesides30331011 {
                      border-color: var(--blue);
                      background-image: url('/gfx/arrowRightBlue.png');
                      }
                     
                      .more:hover .moreButton30331011,
                      .more.hovered .moreButton30331011 {
                       border-color: white;
                       background-color: transparent;
                       color:white;
                       }
                     .more:hover .moreBesides30331011,
                     .more.hovered .moreBesides30331011 {
                        border-color: white;
                        color:white;
                        background-color: transparant;
                         background-image: url('/gfx/arrowRightWhite.png');
                        }
    
     /* ++++++++++ */
                         
                         .moreButton10111122 {
                            border-color: white;
                            color:white;
                          }
                         .moreBesides10111122 {
                          border-color: white;
                           background-image: url('/gfx/arrowRightWhite.png');
                          }
                         
                          .more:hover .moreButton10111122,
                          .more.hovered .moreButton10111122 {
                           border-color: white;
                           background-color: white;
                           color:var(--green);
                           }
                         .more:hover .moreBesides10111122,
                         .more.hovered .moreBesides10111122 {
                            border-color: white;
                            color:var(--green);
                            background-color: white;
                             background-image: url('/gfx/arrowRightGreen.png');
                            }
    
    /* ++++++++++ */
                             
                             .moreButton10111144 {
                                border-color: white;
                                color:white;
                              }
                             .moreBesides10111144 {
                              border-color: white;
                               background-image: url('/gfx/arrowRightWhite.png');
                              }
                             
                              .more:hover .moreButton10111144,
                              .more.hovered .moreButton10111144 {
                               border-color: orange;
                               background-color: white;
                               color:var(--orange);
                               }
                             .more:hover .moreBesides10111144,
                             .more.hovered .moreBesides10111144 {
                                border-color: orange;
                                color:var(--orange);
                                background-color: white;
                                 background-image: url('/gfx/arrowRightOrange.png');
                                }
    
    /* ++++++++++ */
                                 
                                 .moreButton10111411 {
                                    border-color: white;
                                    color:white;
                                  }
                                 .moreBesides10111411 {
                                  border-color: white;
                                   background-image: url('/gfx/arrowRightWhite.png');
                                  }
                                 
                                  .more:hover .moreButton10111411,
                                  .more.hovered .moreButton10111411 {
                                   border-color: white;
                                   background-color: var(--orange);
                                   color: white;
                                   }
                                 .more:hover .moreBesides10111411,
                                 .more.hovered .moreBesides10111411 {
                                    border-color: white;
                                    color: white;
                                    background-color: var(--orange);
                                     background-image: url('/gfx/arrowRightWhite.png');
                                    }
                                    
      /* ++++++++++ */
       
       .moreButton50551311 {
          border-color: var(--darkGrey);
          color:var(--darkGrey);
        }
       .moreBesides50551311 {
        border-color: var(--darkGrey);
         background-image: url('/gfx/arrowRightDarkGrey.png');
        }
       
        .more:hover .moreButton50551311,
        .more.hovered .moreButton50551311 {
         border-color: white;
         background-color: var(--blue);
         color:white;
         }
       .more:hover .moreBesides50551311,
       .more.hovered .moreBesides50551311 {
          border-color: white;
          color:white;
          background-color: var(--blue);
           background-image: url('/gfx/arrowRightWhite.png');
          }
    
    
    
    
    
     /* ++++++++++ */
           
           .lessButton20221211 {
              border-color: var(--green);
              color:var(--green);
            }
           .lessBesides20221211 {
            border-color: var(--green);
             background-image: url('/gfx/arrowLeftGreen.png');
            }
           
            .more:hover .lessButton20221211,
            .more.hovered .lessButton20221211 {
             border-color: white;
             background-color: var(--green);
             color:white;
             }
           .more:hover .lessBesides20221211,
           .more.hovered .lessBesides20221211 {
              border-color: white;
              color:white;
              background-color: var(--green);
               background-image: url('/gfx/arrowLeftWhite.png');
              }
    
    /* ++++++++++ */
               
               .lessButton30331011 {
                  border-color: var(--blue);
                  color:var(--blue);
                }
               .lessBesides30331011 {
                border-color: var(--blue);
                background-image: url('/gfx/arrowLeftBlue.png');
                }
               
                .more:hover .lessButton30331011,
                .more.hovered .lessButton30331011 {
                 border-color: white;
                 background-color: transparent;
                 color:white;
                 }
               .more:hover .lessBesides30331011,
               .more.hovered .lessBesides30331011 {
                  border-color: white;
                  color:white;
                  background-color: transparant;
                   background-image: url('/gfx/arrowLeftWhite.png');
                  }
    
    
    
    
    
    .gTxt {
      color: var(--darkGrey);
    }
    .gTxt h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .gTxt h3 {
      font-size: 2rem;
      line-height: 1.1;
      font-weight: 500;
      margin-bottom: 1.7rem;
    }
    .gTxt p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.7rem;
    }
    .gTxt p strong {
      font-weight: 600;
    }
    .gTxt ul {
      font-size: 1.7rem;
      line-height: 120%;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    
    
    }
    
    .gTxt ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .gTxt ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      color: var(--lightBlue);
      top: 0;
    }
    
    
    .gTxt ol {
      margin-bottom: 1rem;
      counter-reset: my-awesome-counter;
    }
    
    .gTxt ol li {
      font-weight: 300;
      font-size: 1.7rem;
      line-height: 120%;
      margin-bottom: 1rem;
      /* color: #ABACAE;  */
      counter-increment: my-awesome-counter;
    }
    
    .gTxt ol li {
      padding-left: 2rem;
      position: relative;
    }
    
    .gTxt ol li:before {
      content: counter(my-awesome-counter);
      width: 2rem;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      padding-left: 0;
      font-weight: 500;
      font-size: 1.7rem;
      line-height: 120%;
      color: var(--lightBlue);
    }
    
    
    
    
    /* header */
    .headerContainer {
      width: 100%;
      position: fixed;
      background-color: black;
      z-index: 100;
    }
    
    .headerContainer::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 10%;
      height: 100%;
      background-color: var(--green);
      pointer-events: none;
      /* ensures clicks pass through */
      z-index: -1;
      /* place behind content */
    }
    
    .logoArea {
      width: 20.8rem;
      height: 4rem;
      margin-bottom: 1.2rem;
      margin-top: 3.6rem;
    }
    
    .logoArea img {
      height: 4rem;
      width: auto;
    }
    .logoArea a {
      cursor: pointer !important;
    }
    
    .commsArea {
      height: 10rem;
      /* background-position: right top;
      background-repeat: repeat-x;
      background-image: url(/gfx/greenBlueStripe.webp);
      background-size: auto 10rem; */
      width: 22.4rem;
      text-wrap: nowrap;
      padding-left: 3rem;
      text-align: right;
      background-color: var(--green);
    }
    
    
    .commsArea a {
      display: block;
      width: 100%;
      color: white;
    }
    
    .commsArea a:hover,
    .commsArea a:focus  {
      color: black;
    }
    
    .phoneLink {
      font-size: 1.8rem;
      line-height: 1.4;
      font-weight: 500;
      margin-top: 2.6rem;
    }
    
    .emailLink {
      font-size: 1.8rem;
      line-height: 1.4;
      font-weight: 500;
    
    }
    
    
    /* home - hero video */
    
    .bg5 {
      background-color: rgba(0,0,0,0.05);
    }
    .bg10 {
      background-color: rgba(0,0,0,0.1);
    }
    .bg15 {
      background-color: rgba(0,0,0,0.15);
    }
    .bg20 {
      background-color: rgba(0,0,0,0.2);
    }
    .bg25 {
      background-color: rgba(0,0,0,0.25);
    }
    .bg30 {
      background-color: rgba(0,0,0,0.30);
    }
    .bg35 {
      background-color: rgba(0,0,0,0.35);
    }
    .bg40 {
      background-color: rgba(0,0,0,0.4);
    }
    .bg45 {
      background-color: rgba(0,0,0,0.45);
    }
    .bg50 {
      background-color: rgba(0,0,0,0.5);
    }
    
    
    
    
    
    
    .videoHomeContainer {
      position: relative;
      width: 100vw;
      padding-top: 54%;
      /* 16:9 aspect ratio (9/16 = 0.5625) */
      overflow: hidden;
    }
    
    /* Video fills the container and scales responsively */
    .videoHomeBg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Ensures video fills container proportionally */
      z-index: -1;
      pointer-events: none;
      /* Prevents video from interfering with interaction */
    }
    
    .videoMaskBg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Ensures video fills container proportionally */
      z-index: 2;
      pointer-events: none;
      /* Prevents video from interfering with interaction */
    }
    
    
    .heroTxtContainer {
      width: 100%;
      z-index: 10;
      position: absolute;
      top: 2rem;
      left: 0;
    }
    
    
    .heroTxt {
      width: 100%;
    }
    .heroTxt h1 {
      text-transform: uppercase;
      font-size: 2.8rem;
      font-weight: 600;
      line-height: 1;
      margin-bottom: 2rem;
      color:white;
    }
    .heroTxtASD h1 {
      color: var(--blue);
    }
    .heroTxt p {
      font-size: 2.4rem;
      font-weight: 500;
      line-height: 1.2;
      margin-bottom: 2rem;
      color:white;
      display:none;
    }
    .explore {
      display: none;
      width: 10rem;
      height: 6rem;
      border-top-left-radius: 0.8rem;
      border-top-right-radius: 0.8rem;
      background-color: var(--green);
      position: absolute;
      left: calc(50% - 5rem);
      bottom: 0;
      padding: 1.4rem;
    }
    .exploreASD {
      background-color: var(--blue);
    }
    .exploreBad {
      background-color: pink !important;
    
      /* opacity: 0;
      transition: opacity 0.6s ease-out;
      pointer-events: none;
      visibility: hidden; */
    }
    
    
    .exploreActive, .explore:hover {
      background-color: var(--midGrey) !important;
    }
    .exploreTxt {
      width: 100%;
      text-align: center;
      text-transform: uppercase;
      font-size: 1.2rem;
      font-weight: 500;
      line-height: 1;
      color: white;
      margin-bottom: 0.6rem;
    }
    .exploreImg {
      width: 3rem;
      height: auto;
      margin-left: auto;
      margin-right: auto;
    }
    .exploreImg img {
      width: 100%;
      height: auto;
    }
    
    
    
    
    
    
    /* quote/video block */
    .quoteVideoContainer {
      width: 100%;
      background-color: var(--lightGrey);
     margin-top: 0.5rem;
    }
    
    .quoteVideoArea {
      max-width: 128rem;
      padding-left: 6rem;
      padding-right: 6rem;
      margin-left: auto;
      margin-right: auto;
    }
    
      .quoteVideoGrid {
      grid-template-columns: 4px calc(100% - 4px);
      grid-template-rows: auto auto;
      grid-template-areas:
        "col1 col2"
        "col3 col3";
    }
    
    .quoteVideoGrid > :nth-child(1) { grid-area: col1; }
    .quoteVideoGrid > :nth-child(2) { grid-area: col2; }
    .quoteVideoGrid > :nth-child(3) { grid-area: col3; }
    
    /* optional: ensure full width for col3 */
    .quoteVideoGrid > :nth-child(3) {
      width: 100%;
    }
    
    
    .quoteTxt {
      /* border-right: solid 0.8rem white; */
      padding-top: 5rem;
      padding: 2rem;
      padding-top: 4rem;
      padding-bottom: 4rem;
    
    }
    
    .quoteTxt h2 {
      color: var(--green);
    }
    
    .videoArea {
      background-color: var(--green);
      /* border-right: solid 0.8rem white; */
    }
    
    .quoteVideoWrapper {
      position: relative;
      width: 100%;
      /* max-width: 800px; */
      margin: 0 auto;
      padding-top: 56.25%;
      /* 16:9 */
      background: #000;
      overflow: hidden;
    }
    
    .quoteVideo {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .videoSideTxt {
      padding: 2rem;
    }
    
    .videoSideTxt h3 {
      color: white;
    }
    
    .videoSideTxt p {
      font-size: 1.6rem;
      margin-bottom: 1.6rem;
      color: white;
    }
    
    
    
    
    /* /quote/video block */
    
    
    
    
    /* specialist services block */
    
    .headerSS {
      width: 100%;
      padding-bottom: 4rem;
    }
    .headerSS h2 {
    color: var(--green);
    }
    .headerSS p {
    font-size: 2rem;
    }
    .headerSS p strong {
      font-weight: 600;
    }
    
    .gridSS {
      display: grid;
      grid-template-columns:1fr;
      gap: 4rem;
      width: 100%; 
      margin-bottom: 4rem;
    }
    
    .itemSS {
      border-radius: 2rem;
      border-style: solid;
      border-width: 2.4px;
      overflow: hidden;
      }
    .imgSS {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .itemSS {
            position: relative;
            overflow: hidden;
            cursor: pointer;
          }
    
          
    .imgSS {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          /* .imgSS::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemSS:hover .imgSS::before {
            transform: scale(1.2);
          } */
          
    .txtSS {
      padding: 4rem;
      padding-top: 3rem;
    }
    
    .txtSS h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .txtSS p {
      font-size: 1.6rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtSS p strong {
      font-weight: 600;
    }
    
    /* /IST block */
    
    
    .gridIST {
      display: grid;
      grid-template-columns:1fr;
      gap: 4rem;
      width: 100%; 
      margin-bottom: 4rem;
    }
    
    .itemIST {
      border-radius: 2rem;
      border-style: solid;
      border-width: 2.4px;
      overflow: hidden;
      }
    .imgIST {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .itemIST {
            position: relative;
            overflow: hidden;
            cursor: pointer;
          }
          
          .itemISTNot {
            position: relative;
            overflow: hidden;
            cursor: default !important;
          }
    
    
          
    .imgIST, .imgISTNot {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          /* .imgIST::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemIST:hover .imgIST::before {
            transform: scale(1.2);
          } */
          
          
          /* .imgISTNot::before {
            display:none
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemISTNot:hover .imgISTNot::before {
            transform: scale(1);
          } */
    
          
    .txtIST {
      padding: 4rem;
      padding-top: 3rem;
    }
    
    .txtIST h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .txtIST p {
      font-size: 1.6rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtIST p strong {
      font-weight: 600;
    }
    
    .txtIST ul {
      font-size: 2rem;
      line-height: 1.2;
      font-weight: 400;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    
    
    }
    
    .txtIST ul li {
      padding-left: 2rem;
      margin-bottom: 0.4rem;
      position: relative;
    }
    
    
    .txtIST ul li:before {
      content: "\2022";
      font-size: 2.6rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 900;
      color: var(--green);
      top: -0.5rem;
    }
    
    
    /* /IST block */
    
    
    /* about us */
    
    
    
    .aboutVideoGrid {
      /* display: grid;
      grid-template-columns: 1fr 1fr;
      width: 100%; */
    }
    
    .splitLineTxtGrid {
      display: block;
    }
    
    .splitLineTxtGrid .fatLineOuter {
      display:none;
          position: relative;
        width: 4px;
        border-left: 1.5px solid #aaaaaa;
        height: 100%;
        float:left;
        margin-top: unset;
        margin-bottom: unset
      }
    .splitLineTxtGrid .fatLineInner {
        position: absolute;
        left: -1.5px; 
        top:25%  
        width: 4px; 
        height: 50%; 
        background: var(--green); 
        z-index: 10;
      }
    .aboutTxt {
      padding-right: 2rem;
      padding-left: 2rem;
      padding-top: 4rem;
      padding-bottom: 4rem;
    }
    
    .aVideoWrapper {
      position: relative;
      width: 100%;
      /* max-width: 800px; */
      margin: 0 auto;
      padding-top: 56.25%;
      /* 16:9 */
      background: #000;
      overflow: hidden;
    }
    
    .aboutVideo {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .aboutTxt h1 {
      font-size: 3.6rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green)
    }
    .aboutTxt h1 span {
      color: white;
    }
    .aboutTxt p {
      font-size: 2rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      color: white;
    }
    .aboutTxt p strong {
      font-weight: 600;
    }
    
    
    /* fifty line fifty block */
    
    .gridFLF {
      display: grid;
      grid-template-columns: 1fr;
      width: 100%; 
    }
    
    
    .imgFLF  {
      width:100%;
    }
    
    .imgFLF .imgArea {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 66.67%; /* 380/570 * 100% = 66.67% */
      width:100%;
    }
    .txtFLF {
      padding: 4rem;
      padding-left: 2rem;
    padding-right: 2rem;
    }
    
    .txtFLF h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green)
    }
    .txtFLF h2 span {
      color: white;
    }
    .txtFLF p {
      font-size: 1.6rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      color: white;
    }
    .txtFLF p strong {
      font-weight: 600;
    }
    .gridFLF .fatLineOuter {
      position: relative;
      width: 4px;
      border-left: 1.5px solid #aaaaaa;
      margin-top: 6rem;
      height: calc(100% -30rem);
      margin-bottom: 24rem;
    }
    
    /* /fifty line fifty block */
    
    
    /* masthead block */
    .mT5 {
      margin-top: 0.5rem;
     }
     .mt3 {
       margin-top:3rem;
      }
    
    .gridMast {
      display: grid;
      grid-template-columns: 1fr;
      width: 100%; /* Ensure it uses full width for percentage calculations */
    }
    
    
    
    
    .imgMast {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 56.25%; 
      width:100%;
    }
    .txtMast {
      padding-top: 4rem;
      padding-bottom: 4rem;
      padding-left: 2rem;
      padding-right: 2rem;
    }
    
    
    .txtMast h1 {
      font-size: 3.6rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green)
    }
    .txtMast h1 span {
      color: white;
    }
    .txtMast p {
      font-size: 2rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      color: white;
    }
    .txtMast p strong {
      font-weight: 600;
    }
    .txtMast .txtMastArea .fatLineOuter {
      position: relative;
      width: 4px;
      border-left: 1.5px solid #aaaaaa;
      height: 100%;
      float:left;
    }
    .txtMast .txtBlock .fatLineInner {
      display: none;
      position: absolute;
      top: 25%;
      left: -1.5px;   
      width: 4px; 
      height: 50%; 
      background: var(--green); 
      z-index: 10;
    }
    .txtMast .txtMastArea .txtBlockISS {
      padding-right: 0;
    }
    
    .txtMastASD {
      padding-top: 4rem;
      padding-bottom: 4rem;
    }
    
    
    
    
    
    
    
    .txtMastCAR h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green);
    }
    .txtMastCAR h3 {
      font-size: 2rem;
      line-height: 1.1;
      font-weight: 500;
      margin-bottom: 1.7rem;
      color: var(--green);
    }
    .txtMastCAR p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.7rem;
      color: var(--darkGrey);
    }
    .txtMastCAR p strong {
      font-weight: 600;
    }
    .txtMastCAR ul {
      font-size: 1.7rem;
      line-height: 120%;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
      color: var(--darkGrey);
    
    }
    
    .txtMastCAR ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .txtMastCAR ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      color: var(--green);
      top: 0;
    }
    
    
    
    
    .txtMastASD h1 {
      font-size: 3.6rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--blue)
    }
    .txtMastASD h1 span {
      color: white;
    }
    
    
    
    .txtMastASD h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--blue)
    }
    .txtMastASD h2 span {
      color: white;
    }
    
    .txtMastASD .txtBlock .fatLineInner {
      background: var(--blue); 
    }
    .txtMastASD .txtMastArea .txtBlock {
      width: 100%;
      position:relative;
    }
    
    
    .txtMastASD p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      text-transform: none;
      color: white;
    }
    
    
    
    .txtMastAbout {
      padding-top: 0;
      padding-bottom: 0;
    }
    .pl5 {
      padding-left: 0;
    }
    
    
    .txtMastAbout h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green)
    }
    .txtMastAbout h2 span {
      color: var(--darkGrey);
    }
    
    .txtMastAbout .txtBlock .fatLineInner {
      display:none;
      background: var(--green); 
    }
    .txtMastAbout .txtMastArea .txtBlock {
      /* padding-left: 5rem;
      padding-right: 7rem;
      width: 100%;
      border-left: 1.5px solid #aaaaaa;
      position:relative; */
    }
    
    
    .txtMastAbout p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      text-transform: none;
      color: var(--darkGrey);
    }
    
    .txtMastAbout2 h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green)
    }
    
    .txtMastAbout2 p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      text-transform: none;
      color: white;
    }
    
    .timelineArea h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 5.7rem;
      color: var(--green)
    }
    
    .timelineContent h3 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.4rem;
      color: var(--green)
    }
    
    
    .timelineContent p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      text-transform: none;
      color: var(--darkGrey);
    }
    
    
    
    
    .logoHero {
      display: inline-block;
      vertical-align: middle;
      max-width: 12rem;
      max-height: 5rem;
      margin-right: 3rem;
    }
    .logoHero:last-of-type {
      margin-right: 0;
    }
    
    .txtMastISS {
      min-height: 36rem;
    }
    
    
    .txtMastTE {
      min-height: 36rem;
    }
    
    .txtMastTE p {
      font-size: 2.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      color: white;
    }
    
    
    .txtMast .txtMastArea .txtBlockTE {
      padding-right: 0;
    }
    .txtMast .txtMastArea .txtBlockTE h1,
    .txtMast .txtMastArea .txtBlockTE h2,
    .txtMast .txtMastArea .txtBlockTE ul li::before {
      color: var(--orange);
    }
    
    .txtMast .txtMastArea .txtBlockTE ul {
      font-size: 1.7rem;
      line-height: 120%;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
      color: white;
    
    }
    
    .txtMast .txtMastArea .txtBlockTE ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .txtMast .txtMastArea .txtBlockTE ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      top: 0;
    }
    
    .txtMast .txtMastArea .txtBlockTE  h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .txtMast .txtBlockTE .fatLineInner {
      background: var(--orange); 
    }
    
    
    
    
    
    
    
    .txtMast .txtMastArea .txtBlockTE {
      padding-right: 0;
    }
    .txtMast .txtMastArea .txtBlockTE h1,
    .txtMast .txtMastArea .txtBlockTE h2,
    .txtMast .txtMastArea .txtBlockTE ul li::before {
      color: var(--orange);
    }
    
    .txtMast .txtMastArea .txtBlockTE ul {
      font-size: 1.7rem;
      line-height: 120%;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
      color: white;
    
    }
    
    .txtMast .txtMastArea .txtBlockTE ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .txtMast .txtMastArea .txtBlockTE ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      top: 0;
    }
    
    .txtMast .txtMastArea .txtBlockTE  h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .txtMast .txtBlockTE .fatLineInner {
      background: var(--orange); 
    }
    
    
    
    
    
    
    
    
    
    
    
    /* reputation block */
    
    .headerREP {
      width: 100%;
      padding-top: 4rem;
      padding-bottom: 4rem;
    }
    .headerREP h2 {
    color: var(--green);
    }
    .headerREP p {
    font-size: 2rem;
    }
    .headerREP p strong {
      font-weight: 600;
    }
    
    .gridREP {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4rem;
      width: 100%;
      padding-bottom: 4rem;
    }
    
    .itemREP {
      position: relative;
      border-radius: 2rem;
      border: 2.4px solid;
      overflow: hidden;   /* keeps children within border */
      cursor: pointer;
      border-color: var(--darkGrey);
      background-color: white;
    }
    
    .imgREP {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding-bottom: 67%;
      overflow: hidden;
      z-index: 1;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    
      /* remove top corners rounding */
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    .imgSpace {
      padding-bottom: 67%;
      overflow: hidden;
    width:100%;
    }
    
    
    /* .imgREP::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: inherit;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    
      border-bottom-left-radius: inherit;
      border-bottom-right-radius: inherit;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    
      transition: transform 0.6s ease;
      transform-origin: center center;
      transform: scale(1);
    }
    
    .itemREP:hover .imgREP::before {
      transform: scale(1.2);
    } */
    .txtREP {
      padding: 4rem;
      padding-top: 4rem;
    }
    
    .txtREP h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
      color: var(--green);
    }
    .txtREP p {
      font-size: 1.6rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtREP p strong {
      font-weight: 600;
    }
    
    /* /specialist services block */
    
    
    /* home - logo carousel */
    .logosPad {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }
    .logosBlock {
      overflow: hidden;
      position: relative;
      height: 11rem;
      width:100%;
    }
    
    .logosTrack {
      position: absolute;
      display: inline-block;
      white-space: nowrap;
      will-change: transform;
    }
    
    .logosBlock img {
      max-height: 5rem;
      height: auto;
      width: auto;
      max-width: 17rem;
      vertical-align: middle;
      margin-right: 5rem;
      display: inline-block;
      opacity: 0.65;
    }
    .gradLeft {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 9rem;
      height: 14rem; /* Ensure the height is defined */
      background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
      z-index: 10;
    }
    
    .gradRight {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 9rem;
      height: 14rem; /* Ensure the height is defined */
      background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
      z-index: 10;
    }
    
    /* security solutions list */
    
    .gridSecSol {
      display: grid;
      grid-template-columns:1fr;
      gap: 4rem;
      width: 100%; 
    }
    
    .itemSecSol {
      border-radius: 2rem;
      border-style: solid;
      border-width: 1px;
      overflow: hidden;
      }
    .imgSecSol {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .itemSecSol {
            position: relative;
            overflow: hidden;
            cursor: pointer;
          }
    
          
    .imgSecSol {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          /* .imgSecSol::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemSecSol:hover .imgSecSol::before {
            transform: scale(1.2);
          } */
          .itemSecSol:hover,
          .itemSecSol.hovered {
          --lightGrey: white;
          }
          
    .txtSecSol {
      padding: 2.6rem;
      padding-bottom: 9rem;
    }
    .moreAbsolute {
      position: absolute;
      bottom: 3.4rem;
      left: 2.6rem;
    }
    
    .moreCaption {
      position: absolute;
    }
    
    .txtSecSol h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
    }
    .txtSecSol p {
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtSecSol p strong {
      font-weight: 600;
    }
    
    /* /specialist services block */
    
    
    
    /* split columns of text-wrap:  */
    /* .columnSplit {
      column-count: 2;
      column-gap: 5rem;
      column-fill: balance; 
      widows: 2;
      orphans: 2;
    }
    .columnSplitWide {
      column-gap: 9rem;
    }
    
    
    .columnSplit h2,
    .columnSplit h3,
    .columnSplit h4,
    .columnSplit ul,
    .columnSplit ol,
    .columnSplit li {
      break-inside: avoid;
      -webkit-column-break-inside: avoid;
      page-break-inside: avoid;
    }
    
    .columnSplit p {
      break-inside: auto;  
      text-wrap: pretty;   
    }
    
    .columnSplit p:last-child {
      margin-bottom: 0;
    }
    
    .columnSplit ul,
    .columnSplit ol {
      margin: 1rem 0;
      padding-left: 1.5rem;
    } */
    
    
    /* category list T1*/
    
    .gridCatListT1 {
      display: grid;
      grid-template-columns:1fr;
      gap: 4rem;
      width: 100%; 
    }
    
    .itemCatListT1 {
      border-radius: 2rem;
      border-style: solid;
      border-width: 1px;
      overflow: hidden;
      }
    .imgCatListT1 {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .imgCatListT1Mod {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    
    .itemCatListT1 {
            position: relative;
            overflow: hidden;
          //  cursor: pointer;
          }
    
          
    .imgCatListT1 {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          .imgCatListT1Mod {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          
          /* .imgCatListT1Mod::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemCatListT1Mod:hover .imgCatListT1Mod::before {
            transform: scale(1.2);
          } */
          /* .imgCatListT1Mod:hover,
          .imgCatListT1Mod.hovered {
          --lightGrey: white;
          } */
          
    .txtCatListT1 {
      padding: 2.6rem;
      padding-bottom: 3.6rem;
    }
    
    .txtCatListT1Mod {
      padding-bottom: 10rem;
    }
    .moreAbsolute {
      position: absolute;
      bottom: 3.4rem;
      left: 2.6rem;
    }
    
    .txtCatListT1 h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
    }
    .txtCatListT1 p {
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtCatListT1 p strong,
    .txtCatListT1Mod p strong {
      font-weight: 600;
    }
    
    .txtCatListT1 ul {
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    
    
    }
    
    .txtCatListT1 ul li {
      padding-left: 1.6rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .txtCatListT1 ul li:before {
      content: "\2022";
      font-size: 1.6rem;
      line-height: 1.4;
      width: 1.6rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 900;
      color: var(--green);
      top: -0.3rem;
    }
    
    
    .txtCatListT1 ol {
      margin-bottom: 1rem;
      counter-reset: my-awesome-counter;
    }
    
    .txtCatListT1 ol li {
      font-weight: 300;
      font-size: 1.7rem;
      line-height: 120%;
      margin-bottom: 1rem;
      /* color: #ABACAE;  */
      counter-increment: my-awesome-counter;
    }
    
    .txtCatListT1 ol li {
      padding-left: 2rem;
      position: relative;
    }
    
    .txtCatListT1 ol li:before {
      content: counter(my-awesome-counter);
      width: 2rem;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      padding-left: 0;
      font-weight: 500;
      font-size: 1.7rem;
      line-height: 120%;
      color: var(--lightBlue);
    }
    
    .txtCatListT1Mod p {
      font-size: 1.8rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    
    }
    
    .hBlockTxt p {
      font-size: 2rem;
      line-height: 1.4;
      margin-bottom: 2.6rem;
    
    }
    .hBlockTxt h2 {
    color: white;
    }
    
    
    .imgCOIB {
      position: relative;
      /* padding-bottom: 56.5%; */
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
      background-image: none !important;
      padding-top: 4rem;
      padding-bottom: 4rem;
    }
    
    /* /specialist services block */
    
    
    /* promises */
    .itemPromise {
      position:relative;
      padding-left: 5rem;
    }
    .itemPromise .tickBox {
      position: absolute;
      width: 4rem;
      height: 4rem;
      top:0;
      left:0;
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
      background-image: url('/gfx/greenTick.webp');
    }
    .headerPromise {
      width: 100%;
      padding-bottom: 4rem;
    }
    .headerPromise h2 {
    color: var(--green);
    }
    .headerPromise p {
    font-size: 2rem;
    }
    .headerPromise p strong {
      font-weight: 600;
    }
    .headerPromise {
      padding-top: 0;
    }
    
    
    .gridPromises {
      display: grid;
      grid-template-columns: 1fr;
      column-gap: 4rem;
    }
    
    .gridPromises .column {
      display: flex;
      flex-direction: column;
      gap: 0; /* spacing between items, adjust if needed */
    }
    
    .itemPromise {
      display: flex;
      flex-direction: column;
    }
    
    
    .itemPromise h3 {
      font-size: 1.7rem;
      line-height: 1.3;
      font-weight: 500;
      margin-bottom: 0.4rem;
    }
    .itemPromise p {
      font-size: 1.7rem;
      line-height: 1.3;
      font-weight: 400;
      margin-bottom: 2rem;
    }
    .itemPromise p strong {
      font-weight: 600;
    }
    
    
    /* slides */
    
    .slideGridOnWhite {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      width: 100%;
    }
    .slideGridOnGreen {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      width: 100%;
    }
    
    .slideGridOnDark {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      width: 100%;
    }
    
    
    .slideImg {
      display:none;
      padding-bottom: 75%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }
    .slideTxt {
    padding-top:7rem;
    padding-bottom:3rem;
    padding-left:2rem;
    padding-right: 2rem;
    min-height: 52rem;
    
    }
    /* .txtOnWhite {
      padding-right: 0;
    }
    .txtOnGreen {
      padding-right: 14rem;
    }
    
    .txtOnDark {
      padding-left: 14rem;
    } */
    
    
    .slideTxt h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .slideTxt h3 {
      font-size: 2rem;
      text-transform: uppercase;
      line-height: 1.1;
      font-weight: 500;
      margin-bottom: 1.7rem;
    }
    .slideTxt p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.7rem;
    }
    .slideTxt p strong {
      font-weight: 600;
    }
    .slideTxt ul {
      font-size: 1.7rem;
      line-height: 120%;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    }
    
    .slideTxt ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .slideTxt ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      top: 0;
    }
    
    .txtOnWhite h2,
    .txtOnWhite ul li:before {
      color: var(--orange);
    }
    .txtOnWhite p,
    .txtOnWhite h3,
    .txtOnWhite ul li {
      color: var(--darkGrey);
    }
    
    
    .txtOnGreen h2,
    .txtOnGreen ul li:before {
      color: var(--green);
    }
    .txtOnGreen p,
    .txtOnGreen h3,
    .txtOnGreen ul li {
      color: white;
    }
    
    
    
    .txtOnDark h2,
    .txtOnDark ul li:before {
      color: var(--orange);
    }
    .txtOnDark p,
    .txtOnDark h3,
    .txtOnDark ul li {
      color: white;
    }
    
    
    /* meet the team */
    .teamHead {
      padding-bottom: 3rem;
    }
    .teamHead h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 0;
      color: var(--green);
    }
    
    .gridTeam {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4rem;
      width: 100%;
    }
    
    .areaPad {
      padding-bottom: 120%;
      display: block;
      width: 100%;
    }
    
    .itemTeam {
      position: relative;
      border-radius: 2rem;
      border: 2px solid var(--green);
      overflow: hidden;
      background-color: white;
    }
    
    /* The image block — only top corners rounded */
    .imgTeam {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top center;
      padding-bottom: 120%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      border-top-left-radius: calc(2rem - 2px);
      border-top-right-radius: calc(2rem - 2px);
      z-index: 10;
      transition: top 0.3s ease;
      /* will-change: top; */
    
    }
    
    /* Biography section (hidden underneath the image) */
    .biog {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 2.4rem;
      background-color: white;
      color: var(--darkGrey);
      box-sizing: border-box;
      z-index: 1;
    }
    
    /* Text section at bottom */
    .txtTeam {
      padding: 2.6rem 2.6rem 4rem;
      padding-top: 1.8rem;
      background-color: var(--green);
      text-align: center;
      border-bottom-left-radius: calc(2rem - 2px);
      border-bottom-right-radius: calc(2rem - 2px);
    }
    
    .txtTeam h2 {
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 0;
      color: white;
    }
    
    .txtTeam h3 {
      font-size: 1.7rem;
      font-weight: 500;
      margin-bottom: 0;
      color: white;
    }
    
    .txtTeam p {
      font-size: 1.4rem;
      line-height: 1.4;
      margin-bottom: 1.6rem;
    }
    
    /* Plus/minus toggle button */
    .biogPlus {
      width: 3rem;
      height: 3rem;
      position: absolute;
      left: calc(50% - 1.5rem);
      bottom: 0;
      background-color: white;
      border-left: 1px solid var(--green);
      border-top: 1px solid var(--green);
      border-right: 1px solid var(--green);
      border-top-left-radius: 0.4rem;
      border-top-right-radius: 0.4rem;
      background-image: url('/gfx/biogPlus.webp');
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 20;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    /* Active state (minus) */
    .biogPlus.active {
      background-color: var(--green);
      border-left: 1px solid white;
      border-top: 1px solid white;
      border-right: 1px solid white;
      background-image: url('/gfx/biogMinus.webp');
    }
    
    
    /* meet the team */
    
    .gridTeam2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      width: 100%;
    }
    
    
    .itemTeam2 {
      position: relative;
      border-radius: 2rem;
      border: 1.6px solid var(--green);
      overflow: hidden;
      background-color: white;
    }
    
    /* The image block — only top corners rounded */
    .imgTeam2 {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top center;
      padding-bottom: 120%;
      width: 100%;
      border-top-left-radius: 1.2rem;
      border-top-right-radius: 1.2rem;
    
    }
    
    
    
    /* Text section at bottom */
    .txtTeam2 {
      padding: 1.8rem;
      padding-top: 1.8rem;
      background-color: white;
      text-align: center;
      border-bottom-left-radius: 1.2rem;
      border-bottom-right-radius: 1.2rem;
    }
    
    .txtTeam2 h2 {
      font-size: 1.6rem;
      font-weight: 600;
      margin-bottom: 0;
      color: var(--green);
    }
    
    .txtTeam2 h3 {
      font-size: 1.4rem;
      font-weight: 500;
      margin-bottom: 0;
      color: var(--green);
    }
    
    .txtTeam2 p {
      font-size: 1.4rem;
      line-height: 1.4;
      margin-bottom: 1.6rem;
    }
    
    
    /* ASD blocks */
    
    
    .gridASD {
      display: grid;
      grid-template-columns:1fr;
      gap: 4rem;
      width: 100%; 
      margin-bottom: 4rem;
    }
    
    .itemASD {
      border-radius: 2rem;
      border-style: solid;
      border-width: 2.4px;
      overflow: hidden;
      background-color: var(--midGrey);
      border-color: var(--blue);
      }
    .imgASD {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .itemASD {
            position: relative;
            overflow: hidden;
            cursor: pointer;
          }
          
          .itemASDNot {
            position: relative;
            overflow: hidden;
            cursor: default !important;
          }
    
    
          
    .imgASD, .imgASDNot {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
            background-size: cover;
    
          }
          
          /* .imgASD::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemASD:hover .imgASD::before {
            transform: scale(1.2);
          } */
          
          
          /* .imgASDNot::before {
            display:none
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemASDNot:hover .imgISTNot::before {
            transform: scale(1);
          } */
    
          
    .txtASD {
      padding: 2rem;
      padding-top: 2rem;
    }
    
    .txtASD h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--blue);
    }
    .txtASD h3 {
      font-size: 2rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
      color: var(--blue);
    }
    
    .txtASD p {
      font-size: 1.6rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      color: white;
    }
    .txtASD p strong {
      font-weight: 600;
    }
    
    .txtASD ul {
      font-size: 2rem;
      line-height: 1.2;
      font-weight: 400;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    
    
    }
    
    .txtASD ul li {
      padding-left: 2rem;
      margin-bottom: 0.4rem;
      position: relative;
    }
    
    
    .txtASD ul li:before {
      content: "\2022";
      font-size: 2.6rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 900;
      color: var(--blue);
      top: -0.5rem;
    }
    
    
    /* /ASD blocks */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* case studies list */
    
    .gridCaseList {
      display: grid;
      grid-template-columns:1fr;
      gap: 4rem;
      width: 100%; 
    }
    
    .itemCaseList {
      border-radius: 2rem;
      border-style: solid;
      border-width: 1.8px;
      border-color: var(--green);
      overflow: hidden;
      background-color: white;
      }
    .imgCaseList {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .itemCaseList {
            position: relative;
            overflow: hidden;
            cursor: pointer;
          }
    
          
    .imgCaseList {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          /* .imgCaseList::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemCaseList:hover .imgCaseList::before {
            transform: scale(1.2);
          } */
          .itemCaseList:hover,
          .itemCaseList.hovered {
          --lightGrey: white;
          }
          
    .txtCaseList {
      padding: 2.6rem;
      padding-bottom: 9rem;
      color: var(--darkGrey);
    }
    .moreAbsolute {
      position: absolute;
      bottom: 3.4rem;
      left: 2.6rem;
    }
    
    .moreCaption {
      position: relative;
      display: block;
      margin-bottom: 1rem;
    
    }
    .moreCaption {
      left: 0 !important;
      top: 0 !important;
    }
    
    .txtCaseList h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
      color: var(--green);
    }
    .txtCaseList p {
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtCaseList p strong {
      font-weight: 600;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .caseDetailImgGrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }
    
    .caseDetailImgLink {
      display: block;
      position: relative;
      overflow: hidden; /* keeps scaling inside */
      aspect-ratio: 7 / 5; /* optional: enforces aspect ratio if you want one */
    }
    
    .caseDetailImg {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
    }
    
    .caseDetailImg::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: inherit;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      transition: transform 0.6s ease;
      transform: scale(1);
      z-index: 0;
    }
    
    /* Scale on hover */
    .caseDetailImgLink:hover .caseDetailImg::before {
      transform: scale(1.2);
    }
    
    /* Magnifier overlay */
    .magnifier {
      position: absolute;
      inset: 0;
      background-image: url(/gfx/magnifier.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 3.6rem;
      background-color: rgba(255,255, 255, 0.75);
      opacity: 0;
      transition: opacity 0.5s ease;
      z-index: 1;
    }
    
    .caseDetailImgLink:hover .magnifier {
      opacity: 1;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    /* testimonials list */
    
    .gridTestimonialList {
      display: grid;
      grid-template-columns:1fr;
      gap: 4rem;
      width: 100%; 
    }
    
    .itemTestimonialList {
      border-radius: 2rem;
      border-style: solid;
      border-width: 1.8px;
      border-color: var(--green);
      overflow: hidden;
      background-color: white;
      }
    
          
    .txtTestimonialList {
      padding: 2.6rem;
      color: var(--darkGrey);
    }
    
    .txtTestimonialList h2 {
      font-size: 2rem;
      line-height: 1.2;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
      color: var(--green);
      font-style: italic;
    }
    .txtTestimonialList h2::before {
      content:'\201C';
      font-weight: 600;
      font-size: 4rem;
      line-height: 1rem;
      display:inline-block;
      vertical-align: bottom;
      font-style: italic;
      color: var(--darkGrey);
      opacity: 0.3;
    padding-right: 0.5rem;
    }
    .txtTestimonialList h2::after {
      content:'\201D';
      font-weight: 600;
      font-size: 4rem;
      line-height: 1rem;
      display:inline-block;
      vertical-align: bottom;
      font-style: italic;
      color: var(--darkGrey);
      opacity: 0.3;
      padding-left: 0.5rem;
      
    }
    
    .txtTestimonialList p {
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.4rem;
    }
    .txtTestimonialList p strong {
      font-weight: 600;
    }
    .txtTestimonialList .author {
      font-size: 1.4rem;
      line-height: 1.2;
      font-weight: 600;
      margin-bottom: 1.6rem;
    color: var(--green);
      }
    .txtTestimonialList .edited {
        font-size: 1rem;
        line-height: 1;
        font-weight: 400;
        margin-bottom: 1.6rem;
        text-transform: uppercase;
      color: var(--green);
      margin-top: -0.8rem;
        }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* faqs */
    
    
    .faqArea h2 {
      padding-top: 4rem;
      padding-bottom: 2rem;
      color: var(--green);
      padding-left: 0;
      
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 0;
    
    }
    
    
    .revealSet {
      background-color: white;
      border: 1px solid var(--green);
      margin-bottom: 0;
      border-bottom: none;
    }
    
    .revealSet:last-of-type {
      background-color: white;
      border: 1px solid var(--green);
      margin-bottom: 0;
    }
    
    
    .revealSet>.open {
      display: block;
      text-decoration: none;
      transition: all 0.2s linear;
      position: relative;
      border-radius-top-right: 1.4rem;
    }
    
    /* .revealSet>.open .fa {
      position: absolute;
      text-align: left;
      left: 2rem;
      top: 1rem;
      width: 2.4rem;
      height: 2.4rem;
    } */
    
    .ta {
      box-sizing: border-box;
      display: block;
      font-weight: 500;
      font-size: 1.7rem;
      line-height: 120%;
      padding-top: 1rem;
      padding-bottom: 1rem;
      width: 100%;
      color: var(--darkGrey);
      padding-left: 4rem;
      padding-right: 6rem;
    
    
    }
    
    .highLight {
      background-color: var(--lightGrey);
      color: var(--darkGrey);
      transition: all 0.2s ease;
      border-bottom: 1px solid var(--green);
      /* border-left: 0.6rem solid #0F6B4A; */
      padding-left: 4rem;
    
    
    }
    
    .lowLight {
      background-color: white;
      color: var(--darkGrey);
      transition: all 0.2s ease;
      /* border-left: 0.6rem solid white; */
      padding-left: 4rem;
    
    
      /* padding-left: 4rem; */
      /* border-bottom: 1px solid rgb(55, 100, 161); */
    
    }
    
    .revealPlus::before {
      content: "";
      position: absolute;
      transition: all 0.2s ease;
      right: 0;
      top: 0;
      width: 3.7rem;
      height: 100%;
      background-image: url('/gfx/arrowDownGreen.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
      transition: all 0.2s linear;
      border-left: 1px solid var(--green);
    
    
    }
    
    .revealMinus::before {
      content: "";
      position: absolute;
      transition: all 0.2s ease;
      right: 0;
      top: 0;
      width: 3.7rem;
      height: 100%;
      background-image: url('/gfx/arrowUpWhite.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
      border-left: 1px solid var(--green);
      background-color: var(--green);
    
    }
    
    /* .open:hover .fa::before, .open:focus .fa::before {
      background-image: url('/gfx/arrowDownWhite.png');
      background-color: var(--green);
    }
    .open:active .fa::before, .open:active .fa::before {
    
    } */
    /* reveal content */
    .revealContent {
      /* margin-bottom: 2rem; */
      padding: 2rem;
      padding-bottom: 0.3rem;
      padding-left: 4rem;
      padding-right: 6rem;
    
      /* border-bottom: 1px solid #494949; */
    }
    
    .revealContent p {
      font-size: 1.7rem;
    line-height: 1.4;
    font-weight: 400;
    margin-bottom: 1.7rem;
    color: var(--darkGrey);
    }
    
    
    .revealContent ul {
      font-size: 1.7rem;
      line-height: 1.1;
      font-weight: 400;
      margin-bottom: 1.7rem;
      padding-left: 0; /* Remove default padding */
    }
    
    .revealContent ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .revealContent ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      color: var(--green);
      top: -0.4rem;;
    }
    
    .revealContent a, .revealContent a:focus {
      font-weight: 600;
    }
    .revealContent a:hover, .revealContent a:active {
      font-weight: 600;
      margin-bottom: 0.3rem;
      border-bottom: 1px solid var(--darkGrey);
    }
    
    
    .revealContent {
      display: none;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* footer */
    .gridFOOT {
      width: 100%;
    }
    .footerPad {
      padding-top: 4rem;
      padding-bottom: 4rem;
      border-top-color: var(--green);
      border-top-style: solid;
      border-top-width: 3px;
    }
    .footerLogo {
      width: 100%;
      margin-bottom: 3.6rem;
    }
    .footerLogo img {
      height: 4rem;
    }
    
    .phoneTxt a {
      display: block;
      width: 100%;
      color: var(--green);
    }
    
    .phoneTxt a:hover,
    .phoneTxt a:focus  {
      color: white;
    }
    
    .phoneTxt p {
      font-size: 2.4rem;
      line-height: 1.4;
      font-weight: 500;
    }
    .phoneTxt {
      margin-bottom: 3.6rem;
    }
    .addressTxt {
      margin-bottom: 3.6rem;
    }
    .addressTxt p {
      font-size: 1.8rem;
      line-height: 1.3;
      margin-bottom: 0;
      font-weight: 500;
      color: white;
    }
    .registeredTxt {
      margin-bottom: 1.8rem;
    }
    .registeredTxt p {
      font-size: 1.2rem;
      line-height: 1.4;
      margin-bottom: 0;
      font-weight: 400;
      color: white;
    
    }
    .accreditations {
      margin-bottom: 4rem;
    }
    
    .accreditations img {
      max-height: 5.8rem;
      width: auto;
      display: inline-block;
      margin-right: 1.6rem;
      vertical-align: middle;
      margin-bottom: 1.6rem;
    }
    
    .accreditations img:last-child {
      margin-right: 0;
    }
    
    .legalNav {
      margin-bottom: 1.2rem;
    }
    
    .legalNav ul li {
      display: inline-block;
      font-size: 1.5rem;
      line-height: 1.2;
      margin-bottom: 0;
      font-weight: 500;
    
    }
    
    .legalNav ul li a::after {
      content: "/";
      padding-left: 0.35rem;
      padding-right: 0.2rem;
    }
    
    .legalNav ul li:last-child a::after {
      content: "";
      padding: 0;
    }
    
    
    .legalNav ul li a {
      display: block;
      color: white;
    }
    
    .legalNav ul li a:hover, 
    .legalNav ul li a:focus,
    .legalNav ul li a.selected {
      color: var(--green);
    }
    
    
    
    
    .legalSignoff {
      padding-bottom: 4rem;
    }
    
    .legalSignoff p {
      font-size: 1.5rem;
      line-height: 140%;
      margin-bottom: 1.6rem;
      font-weight: normal;
      color: white;
      opacity: 0.7;
    
    }
    
    .siteBy p {
      font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 0.8rem;
    font-weight: 400;
    color: white;
    }
    
    .siteBy a {
      color: white;
    }
    
    .siteBy a:hover,
    .siteBy a:focus {
      color: var(--green);
    }
    
    .socialTxt {
      margin-bottom: 3rem;
    }
    
    .socialTxt h3, .accreditations h3 {
      font-size: 1.8rem;
      line-height: 1.4;
      margin-bottom: 1rem;
      font-weight: 500;
      color: var(--green);
    
    }
    
    .socialTxt ul li {
      padding-left: 0;
    }
    
    .socialTxt ul li::before {
      padding-left: 0;
      display: none;
    }
    
    .socialTxt ul li {
      display: inline-block;
      margin-right: 1.4rem;
    }
    
    
    .socialTxt ul li img {
      max-height: 6rem;
    
    }
    
    .socialTxt ul li a {
      display:block;
      background-color: white;
    }
    
    .socialTxt ul li a:hover,
    .socialTxt ul li a:focus {
      background-color: var(--green);
    
    } 
    
    .copyright p {
      font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 0;
    font-weight: 400;
    color: white;
    }
    
    .copyright a {
      color: white;
    }
    
    .copyright a:hover,
    .copyright a:focus {
      color: var(--green);
    }
    
    
    /* slider */
    .bx-wrapper .bx-prev {
      left: 2rem;
    }
    .bx-wrapper .bx-next {
      right: 2rem;
    }
    .bx-wrapper .bx-controls-direction a {
      position: absolute;
      top: 50%;
      margin-top: -2.2rem;
      outline: 0;
      width: 4.4rem;
      height: 4.4rem;
      text-indent: -9999px;
      z-index: 9999;
    }
    
    
    .bx-wrapper {
      position: relative;
      margin-bottom: 0;
      padding: 0;
      *zoom: 1;
      -ms-touch-action: pan-y;
      touch-action: pan-y;
    }
    .bx-wrapper img {
      max-width: 100%;
      display: block;
    }
    .bxslider {
      margin: 0;
      padding: 0;
      /*fix flickering when used background-image instead of <img> (on Chrome)*/
      -webkit-perspective: 1000;
    }
    ul.bxslider {
      list-style: none;
    }
    .bx-viewport {
      /* fix other elements on the page moving (in Chrome) */
      -webkit-transform: translateZ(0);
    }
    /** THEME
    ===================================*/
    .bx-wrapper {
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      border: none;
      background: transparent;
      position: relative;
    }
    
    /* LOADER */
    .bx-wrapper .bx-loading {
      min-height: 64px;
      background: url('/gfx/loading.webp') center center no-repeat;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 90;
    }
    /* PAGER */
    
    /* DIRECTION CONTROLS (NEXT / PREV) */
    
    .onWhite .bx-prev {
      background-image: url('/gfx/arrowLeftDarkGrey.png');
      border-color: var(--darkGrey);
      background-color: rgba(255,255,255,0.6);
    }
    .onWhite .bx-next {
      background-image: url('/gfx/arrowRightDarkGrey.png');
      border-color: var(--darkGrey);
      background-color: rgba(255,255,255,0.5);
    }
    .onWhite .bx-prev:hover,
    .onWhite .bx-prev:focus {
      background-color: var(--orange);
      background-image: url('/gfx/arrowLeftWhite.png');
      border-color: white;
    }
    .onWhite .bx-next:hover,
    .onWhite .bx-next:focus {
      background-color: var(--orange);
      background-image: url('/gfx/arrowRightWhite.png');
      border-color: white;
    }
    
    .onDark .bx-prev {
      background-image: url('/gfx/arrowLeftWhite.png');
      border-color: white;
      /* background-color: rgba(255,255,255,0.5); */
    }
    .onDark .bx-next {
      background-image: url('/gfx/arrowRightWhite.png');
      border-color: white;
      background-color: rgba(0,0,0,0.5);
    }
    .onDark .bx-prev:hover,
    .onDark .bx-prev:focus {
      background-color: var(--orange);
      background-image: url('/gfx/arrowLeftWhite.png');
      border-color: white;
    }
    .onDark .bx-next:hover,
    .onDark .bx-next:focus {
      background-color: var(--orange);
      background-image: url('/gfx/arrowRightWhite.png');
      border-color: white;
    }
    
    
    
    /* DIRECTION CONTROLS (NEXT / PREV) */
    
    .onGreen .bx-prev {
      background-image: url('/gfx/arrowLeftDarkGrey.png');
      border-color: var(--darkGrey);
      background-color: rgba(255,255,255,0.6);
    }
    .onGreen .bx-next {
      background-image: url('/gfx/arrowRightDarkGrey.png');
      border-color: var(--darkGrey);
      background-color: rgba(255,255,255,0.5);
    }
    .onGreen .bx-prev:hover,
    .onGreen .bx-prev:focus {
      background-color: var(--green);
      background-image: url('/gfx/arrowLeftWhite.png');
      border-color: white;
    }
    .onGreen .bx-next:hover,
    .onGreen .bx-next:focus {
      background-color: var(--green);
      background-image: url('/gfx/arrowRightWhite.png');
      border-color: white;
    }
    
    
    
    
    
    
    
    
    
    
    
    /* contact */
    
    .contactContainer {
      width: 100%;
    }
    
    
    .contactGrid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4rem;
    }
    
    
    .contactTxt h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green);
    
    }
    .contactTxt h3 {
      font-size: 2rem;
      line-height: 1.1;
      font-weight: 500;
      margin-bottom: 1.7rem;
      color: var(--green);
    
    }
    .contactTxt p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.7rem;
    }
    .contactTxt p strong {
      font-weight: 600;
    }
    
    
    .contactTxt {
      margin-bottom: 4rem;
    }
    
    
    .contactTxt p a, .contactTxt p a:active{
      font-weight: 600;
      color: var(--darkGrey);
    
    }
    .contactTxt p a:hover,   .contactTxt p a:focus {
      color: var(--green)
    }
    
    
    
    .google-maps {
      position: relative;
      padding-bottom: 125%; // This is the aspect ratio
      overflow: hidden;
      margin-top: 6rem;
      border: 1.2px solid var(--green);
    }
    
    .google-maps iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 100% !important;
    }
    
    
    
    
    
    
    
    
    
    .bx-wrapper .bx-prev,
    .bx-wrapper .bx-next {
      display: block;
      border-style: solid;
      border-width: 1.4px;
      border-radius: 0.6rem;
      width: 4.4rem;
      height: 4.4rem;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      position: absolute;
    
      /* top: calc(50% - 2.4rem); */
    }
    .bx-wrapper .bx-prev {
      left: 2rem;
    }
    .bx-wrapper .bx-next {
      right: 2rem;
    }
    .bx-wrapper .bx-controls-direction a {
      position: absolute;
      top: 2rem;
      margin-top: 0rem;
      outline: 0;
      width: 4.4rem;
      height: 4.4rem;
      text-indent: -9999px;
      z-index: 90;
    }
    .bx-wrapper .bx-controls-direction a.disabled {
      display: none;
    }
    
    .bx-wrapper .bx-prev.disabled,
    .bx-wrapper .bx-next.disabled {
      display: none;
    }
    
    
    
    
    
    
    
    
    
    /* 11022026 home slider */
    
    .explore { z-index: 50;}
    
    
    
    /* PAGER */
    .onNeutral .bx-pager {
      text-align: left;
      font-size: .85em;
      font-family: Arial;
      font-weight: bold;
      color: white;
      padding-top: 0;
      position: absolute;
      bottom: 4.8rem;
    }
    
    .onNeutral .bx-pager {
      max-width: 128rem;
      padding-left: 6rem;
      padding-right: 6rem;
      margin-left: auto;
      margin-right: auto;
    }
    .onNeutral .bx-pager.bx-default-pager a {
      background-color:white;
      text-indent: -9999px;
      display: block;
      width: 16px;
      height: 16px;
      margin: 0 8px;
      outline: 0;
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      border-radius: 8px;
    }
    .onNeutral .bx-pager.bx-default-pager a:hover,
    .onNeutral .bx-pager.bx-default-pager a.active,
    .onNeutral .bx-pager.bx-default-pager a:focus {
      background-color: var(--green);
    }
    .onNeutral .bx-pager-item,
    .onNeutral .bx-controls-auto .bx-controls-auto-item {
      display: inline-block;
      vertical-align: bottom;
      *zoom: 1;
      *display: inline;
    }
    .onNeutral .bx-pager-item {
      font-size: 0;
      line-height: 0;
    }
    
    .onNeutral .bx-prev,
    .onNeutral .bx-next {
      display: block;
      border-style: solid;
      border-width: 1.4px;
      border-radius: 0.6rem;
      width: 4.4rem;
      height: 4.4rem;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      position: absolute;
    
      /* top: calc(50% - 2.4rem); */
    }
    .onNeutral .bx-prev {
     left: 6rem;
    }
    .onNeutral .bx-next {
    right: 6rem;
    }
    .onNeutral .bx-controls-direction {
    }
    .onNeutral .bx-controls-direction a {
      outline: 0;
      width: 4.4rem;
      height: 4.4rem;
      text-indent: -9999px;
      z-index: 90;
      top: 30%;
    }
    .onNeutral .bx-controls-direction a.disabled {
      display: none;
    }
    
    .onNeutral .bx-prev.disabled,
    .onNeutral .bx-next.disabled {
      display: none;
    }
    
    .videoHomeBg video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .videoHomeBg {
      position: relative;
      width: 100%;
      height: 100%;
    }
    
    
    /* Make the bx-viewport relative so bottom:0 works */
    .bx-wrapper .bx-viewport {
      position: relative;
      overflow: hidden;
    }
    
    /* Position the explore button relative to the viewport */
    .HeroSliderContainer .explore {
      position: absolute;
      bottom: 0;          /* sticks to the bottom of the viewport */
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
    }
    
    .HeroSliderContainer .explore {
      margin: 0;
      padding: 0;
    }
    
    .heroTxtContainer {
      z-index: 5; /* above .videoMaskBg */
      pointer-events: auto; /* ensure text is selectable */
    }
    
    /* Buttons themselves */
    .more {
      z-index: 6; /* above everything inside the container */
      pointer-events: auto;
    }
    
    .videoHomeImg {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    }
    
    .onNeutral .bx-prev {
      background-image: url('/gfx/arrowLeftDarkGrey.png');
      border-color: white;
      background-color: rgba(255,255,255,0.6);
    }
    .onNeutral .bx-next {
      background-image: url('/gfx/arrowRightDarkGrey.png');
      border-color: white;
      background-color: rgba(255,255,255,0.5);
    }
    .onNeutral .bx-prev:hover,
    .onNeutral .bx-prev:focus {
      background-color: var(--green);
      background-image: url('/gfx/arrowLeftWhite.png');
      border-color: white;
    }
    .onNeutral .bx-next:hover,
    .onNeutral .bx-next:focus {
      background-color: var(--green);
      background-image: url('/gfx/arrowRightWhite.png');
      border-color: white;
    }
    
    
    /* 11022026 home slider */
    
    .explore { z-index: 50;}
    
    
    
    /* PAGER */
    .onNeutral .bx-pager {
      text-align: left;
      font-size: .85em;
      font-family: Arial;
      font-weight: bold;
      color: white;
      padding-top: 0;
      position: absolute;
      bottom: 4.8rem;
    }
    
    .onNeutral .bx-pager {
      max-width: 128rem;
      padding-left: 12rem;
      padding-right: 6rem;
      margin-left: auto;
      margin-right: auto;
      display:none;
    }
    .onNeutral .bx-pager.bx-default-pager a {
      background-color:white;
      text-indent: -9999px;
      display: block;
      width: 16px;
      height: 16px;
      margin: 0 8px;
      outline: 0;
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      border-radius: 8px;
    }
    .onNeutral .bx-pager.bx-default-pager a:hover,
    .onNeutral .bx-pager.bx-default-pager a.active,
    .onNeutral .bx-pager.bx-default-pager a:focus {
      background-color: var(--green);
    }
    .onNeutral .bx-pager-item,
    .onNeutral .bx-controls-auto .bx-controls-auto-item {
      display: inline-block;
      vertical-align: bottom;
      *zoom: 1;
      *display: inline;
    }
    .onNeutral .bx-pager-item {
      font-size: 0;
      line-height: 0;
    }
    
    .onNeutral .bx-prev,
    .onNeutral .bx-next {
      display: block;
      border-style: solid;
      border-width: 1.4px;
      border-radius: 0.6rem;
      width: 4.4rem;
      height: 4.4rem;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      position: absolute;
    
      /* top: calc(50% - 2.4rem); */
    }
    .onNeutral .bx-prev {
     left: 2rem;
    }
    .onNeutral .bx-next {
    right: 2rem;
    }
    .onNeutral .bx-controls-direction {
    }
    .onNeutral .bx-controls-direction a {
      outline: 0;
      width: 4.4rem;
      height: 4.4rem;
      text-indent: -9999px;
      z-index: 90;
      bottom: 3.4rem !important;
      top: unset;
    }
    .onNeutral .bx-controls-direction a.disabled {
      display: none;
    }
    
    .onNeutral .bx-prev.disabled,
    .onNeutral .bx-next.disabled {
      display: none;
    }
    
    .videoHomeBg video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .videoHomeBg {
      position: relative;
      width: 100%;
      height: 100%;
    }
    
    
    /* Make the bx-viewport relative so bottom:0 works */
    .bx-wrapper .bx-viewport {
      position: relative;
      overflow: hidden;
    }
    
    /* Position the explore button relative to the viewport */
    .HeroSliderContainer .explore {
      position: absolute;
      bottom: 0;          /* sticks to the bottom of the viewport */
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
    }
    
    .HeroSliderContainer .explore {
      margin: 0;
      padding: 0;
    }
    
    .heroTxtContainer {
      z-index: 5; /* above .videoMaskBg */
      pointer-events: auto; /* ensure text is selectable */
    }
    
    
    /* Buttons themselves */
    .more {
      z-index: 6; /* above everything inside the container */
      pointer-events: auto;
    }
    
    .videoHomeImg {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    }
    
    .onNeutral .bx-prev {
      background-image: url('/gfx/arrowLeftDarkGrey.png');
      border-color: white;
      background-color: rgba(255,255,255,0.6);
    }
    .onNeutral .bx-next {
      background-image: url('/gfx/arrowRightDarkGrey.png');
      border-color: white;
      background-color: rgba(255,255,255,0.5);
    }
    .onNeutral .bx-prev:hover,
    .onNeutral .bx-prev:focus {
      background-color: var(--green);
      background-image: url('/gfx/arrowLeftWhite.png');
      border-color: white;
    }
    .onNeutral .bx-next:hover,
    .onNeutral .bx-next:focus {
      background-color: var(--green);
      background-image: url('/gfx/arrowRightWhite.png');
      border-color: white;
    }
    
    
    /* image annotation */
    
    
    .numberSurround {
      position: relative;
      display: inline-block;
    }
    /* number Roundel */
    .numberRoundel {
      position:relative;
      display:block;
      width: 3.4rem;
      height: 3.4rem;
      /* Background-color: var(--blue); */
      border-radius: 1.7rem;
      border: solid 0.1rem white;
      font-size: 2.2rem;
      font-weight: 600;
      line-height: 1;
      padding-top: 0.6rem;
      padding-bottom: 0.6rem;
      text-align: center;
      color:white;
      z-index: 20;
    }
    
    .captionReveal {
      display: block;
      font-size: 1.4rem;
      font-weight: 400;
      line-height: 1.2;
      padding-left: 1.8rem;
      padding-right: 1.6rem;
      padding-top: 1.4rem;
      padding-bottom: 1.6rem;
      background-color: black;
      color:white;
      position:absolute;
      left: 1.7rem;
      top: 1.7rem;
      z-index: 10;
      border: solid 0.1rem white;
      min-width: 10rem;
      max-width: 18rem;
      opacity:0;
      transition:
          opacity 0.25s ease,
          transform 0.25s ease;
          border-radius: 1.7rem;
          cursor: default;
          border-bottom-right-radius: unset;
      }
    
    .numberRoundel:hover + .captionReveal {
        opacity: 0.85;
      }
    .numberRoundel {
        cursor: pointer;
        transition: transform 0.15s ease;
      }
      
      .numberRoundel:hover {
        transform: scale(1.15);
      }
      
      .imgKeyArea {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-top: 3.4rem;
        padding-bottom: 3.4rem;
        padding-left: 2rem;
        padding-right: 2rem;
      }
      .keyTxtP {
        font-size: 1.9rem;
        font-weight: 500;
        line-height: 1.2;
        padding-bottom: 1.2rem;
        margin:0;
        color:white;
      }
      .keyNum {
        position:relative;
        display:inline-block;
        width: 3.4rem;
        height: 3.4rem;
        /* Background-color: var(--blue); */
        border-radius: 1.7rem;
        border: solid 0.1rem white;
        font-size: 2.2rem;
        font-weight: 600;
        line-height: 1;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
        text-align: center;
        color:white;
        margin-right: 1rem;
      }
      .keyTxtA {
        color:white;
      }
      
     
    .keyTxtA:hover {
        color:var(--blue);
      }
      .keyTxtA:hover .keyNum {
        Background-color: black;
      }
      
     .keyTxtA, .keyTxtB {
         color:white;
       }
       
       
       .keyBlock p {
         break-inside: avoid;
       }
     .keyTxtA:hover {
         color:var(--blue);
       }
       .keyTxtB:hover {
         color:var(--green);
       }
     
       .keyTxtA:hover .keyNum,   .keyTxtB:hover .keyNum {
         Background-color: black;
       }
        
      
      
      
      
      .videoStdContainer {
        position: relative;
        width: 100vw;
        padding-top: 54%;
        /* 16:9 aspect ratio (9/16 = 0.5625) */
        overflow: hidden;
      }
      
      /* Video fills the container and scales responsively */
      .videoStdBg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Ensures video fills container proportionally */
        z-index: -1;
        pointer-events: none;
        /* Prevents video from interfering with interaction */
      }
      
      .videoStdBg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Ensures video fills container proportionally */
        z-index: 2;
        pointer-events: none;
        /* Prevents video from interfering with interaction */
      }
      
      
      .stdTxtContainer {
        width: 100%;
        z-index: 10;
        position: absolute;
        bottom: 0;
        left: 0;
      }
      
      
      .stdTxt {
        padding-bottom: 12rem;
        width: 100%;
      }
      .stdTxt h1 {
        text-transform: uppercase;
        font-size: 3.6rem;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 2rem;
        color:white;
        padding-right: 50%;
      }
      .stdTxtASD h1 {
        color: var(--blue);
      }
      .stdTxt p {
        font-size: 2.4rem;
        font-weight: 500;
        line-height: 1.2;
        margin-bottom: 2rem;
        color:white;
        padding-right: 50%;
      
      }
      .stdExplore {
        display: block;
        width: 10rem;
        height: 6rem;
        border-top-left-radius: 0.8rem;
        border-top-right-radius: 0.8rem;
        background-color: var(--green);
        position: absolute;
        left: calc(50% - 5rem);
        bottom: 0;
        padding: 1.4rem;
      }
      .stdExploreASD {
        background-color: var(--blue);
      }
      
      
      .stdExploreActive, .stdExplore:hover {
        background-color: var(--midGrey) !important;
      }
      .stdExploreTxt {
        width: 100%;
        text-align: center;
        text-transform: uppercase;
        font-size: 1.2rem;
        font-weight: 500;
        line-height: 1;
        color: white;
        margin-bottom: 0.6rem;
      }
      .stdExploreImg {
        width: 3rem;
        height: auto;
        margin-left: auto;
        margin-right: auto;
      }
      .stdExploreImg img {
        width: 100%;
        height: auto;
      }
    .imgABC {
        position: relative;
        padding-bottom: 56.5%;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
      }
    
    
    
    .inner99MinusPad
     {
      max-width:128rem;
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-left: auto;
      margin-right: auto;
    }
    
    
    
    
    
    /* new 25/08/2026 */
    .share-strip {
      --share-icon-size: 4rem;
      --share-gap: 0;
      padding-top: 2rem;
      padding-bottom: 1rem;
    }
    
    .share-strip__heading {
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 600;
    margin-bottom: 0.8rem;
    padding-left: 0.4rem;
    color: var(--green);
    }
    
    .share-strip__list {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      /* gap: var(--share-gap); */
      margin: 0;
      padding: 0;
    }
    
    /* Reset the link/button back to a plain icon-sized hit target — no box. */
    .share-strip__link {
      display: inline-flex;
      background: none;
      border: none;
      padding: 0;
      margin: 0;
      line-height: 0;
      cursor: pointer;
      border-radius: 4px; /* shapes the focus outline only, not a visible box */
    }
    
    .share-strip__icon-wrap {
      position: relative;
      display: block;
      width: var(--share-icon-size);
      height: var(--share-icon-size);
    }
    
    .share-strip__icon {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain; /* proportional, never distorted */
      transition: opacity 0.12s ease;
      opacity: 0.5;
    }
    
    .share-strip__icon--hover {
      opacity: 0;
    }
    
    .share-strip__link:hover .share-strip__icon--normal,
    .share-strip__link:focus-visible .share-strip__icon--normal {
      opacity: 0;
    }
    
    .share-strip__link:hover .share-strip__icon--hover,
    .share-strip__link:focus-visible .share-strip__icon--hover {
      opacity: 1;
    }
    
    /* .share-strip__link:focus-visible {
      outline: 3px solid var(--share-focus-color);
      outline-offset: 3px;
    } */
    
    .share-strip__feedback {
      margin: 0.75rem 0 0;
      font-size: 0.85rem;
      min-height: 1.2em;
    }
    
    
    
    
    /* blog new css */
    
          .blogList {
      display: grid;
      grid-template-columns: 1fr;
      gap: 3rem;
      width: 100%;
    }
    
    
    /* -------------------------------------------------------
       CARD
       ------------------------------------------------------- */
    
    .blogListItem {
      position: relative;
      display: block;
      width: 100%;
      border-radius: 2rem;
      border-style: solid;
      border-width: 1.8px;
      border-color: var(--green);
      overflow: hidden;
      background-color: white;
    }
    
    
    /* -------------------------------------------------------
       IMAGE
       ------------------------------------------------------- */
    
    .blogListImage {
      position: relative;
      overflow: hidden;
      width: 100%;
      padding-bottom: 67%;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
    }
    
    .blogListImage.plusBorder {
      border-right: 0;
    }
    
    
    /* -------------------------------------------------------
       TEXT
       ------------------------------------------------------- */
    
    .blogListText {
      color: var(--darkGrey);
      padding: 2.6rem !important;
      padding-bottom: 9rem !important;
      margin-bottom: 0;
    }
    
    .blogListText h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
      color: var(--green);
    }
    
    .blogListText p {
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    
    .blogListText p strong {
      font-weight: 600;
    }
    
    
    /* -------------------------------------------------------
       HIDE DESKTOP ARROW
       ------------------------------------------------------- */
    
    .blogListLink {
      display: none;
    }
    
    
    /* -------------------------------------------------------
       ORIGINAL MORE BUTTON
       ------------------------------------------------------- */
    
    .blogListMoreBlock {
      display: block;
    }
    
    .blogListMoreBlock.moreAbsolute {
      position: absolute;
      bottom: 3.4rem;
      left: 2.6rem;
    }
    
    
    /* -------------------------------------------------------
       REMOVE GAP BETWEEN MORE BUTTON AND ARROW
       ------------------------------------------------------- */
    
    .blogListMoreBlock .more {
      display: inline-flex;
      align-items: stretch;
      gap: 0;
      margin: 0;
      padding: 0;
    }
    
    .blogListMoreBlock .moreButton20221211,
    .blogListMoreBlock .moreBesides20221211 {
      margin: 0;
    }
    
    .blogListMoreBlock .moreBesides20221211 {
      margin-left: 0;
    }
    
    
    
    
     /* end blog new css */
    /* --- */
    .blogTxt h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.4rem;
      color: var(--green);
    }
    
    .blogTxt h3 {
      font-size: 1.8rem;
      line-height: 1.1;
      font-weight: 500;
      margin-bottom: 1.7rem;
      margin-top: 3.4rem;
    }
    
    .blogTxt h3:first-of-type {
        margin-top: 0;
    }
    
    .blogTxt p {
      font-size: 1.6rem;
      line-height: 1.5;
      font-weight: 400;
      margin-bottom: 1.2rem;
    }
    .blogTxt p strong {
      font-weight: 600;
    }
    .blogTxt ul {
      font-size: 1.6rem;
      line-height: 1.2;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    
    
    }
    
    .blogTxt ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .blogTxt ul li:before {
      content: "\2022";
      font-size: 1.8rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      color: var(--green);
      top: -0.2rem;
    }
    
    .blogVidGrid {
      display: grid;
      grid-template-columns:1fr;
      align-items: center;
      gap: 3rem;
      width: 100%; 
    }
    
    .blogVideoWrapper {
      position: relative;
      width: 100%;
      /* max-width: 800px; */
      margin: 0 auto;
      padding-top: 56.25%;
      /* 16:9 */
      background: var(--lightGrey);
      overflow: hidden;
    }
    
    .blogVideo {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
}


/* ==================================================
   tabletMinus.css
   ================================================== */

@media (min-width: 769px) and (max-width: 1023px) {
    .desktop {
      display:none;
    }
    .tablet {
      display:none;
    }
    .smart {
      display:block;
    }
    
    .u-fade-type-left{
      transform: translateY(10rem);
    opacity: 0;
    }
    
    .u-fade-type-left.is-active{
      transition: 1s;
    transform: translateY(0);
    opacity: 1;
    }
    
    
    .u-fade-type-right{
      transform: translateY(10rem);
    opacity: 0;
    }
    
    .u-fade-type-right.is-active{
      transition: 1s;
    transform: translateY(0);
    opacity: 1;
    }
    
    
    .u-fade-type-down{
      transform: translateY(10rem);
      opacity: 0;
    }
    
    .u-fade-type-down.is-active{
      transition: 1s;
      transform: translateY(0);
      opacity: 1;
    }
    
    
    .u-fade-type-up{
      transform: translateY(10rem);
    opacity: 0;
    }
    
    .u-fade-type-up.is-active{
      transition: 1s;
    transform: translateY(0);
    opacity: 1;
    }
    
    
    .u-fade-type-static{
      opacity: 0;
    }
    
    .u-fade-type-static.is-active{
      transition: 1s;
      opacity: 1;
    }
    
    
    html,
    body {
      font-size: 10px;
    }
    
    
    /* smart menu */
    
    #menu-container {
      position:absolute;
      right:0;
      top:0;
    }
    #menu-wrapper {
      overflow: hidden;
      max-width: 9.4rem;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    
      /* background-color: rgb (225, 232, 241); */
    }
    
    #menu-wrapper #hamburger-menu {
      position: relative;
      width:3rem;
      height: 2.8rem;
      margin: 2.6rem;
      margin-top: 2.2rem;
      margin-bottom: 2.2rem;
    }
    
    #menu-wrapper #hamburger-menu .x {
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      left: 0;
      display: block;
      width: 100%;
      height: 0.3rem;
      border-radius: 1rem;
      background-color:  var(--green);
      position: absolute;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .4s ease-in-out;
      transition: .4s ease-in-out;
    }
    
    #menu-wrapper #hamburger-menu .x:nth-child(1) {
      top: 0;
    }
    
    #menu-wrapper #hamburger-menu .x:nth-child(2) {
      top: 1.2rem;
    }
    
    #menu-wrapper #hamburger-menu .x:nth-child(3) {
      top: 2.4rem;
    }
    
    #menu-wrapper #hamburger-menu.open .x:nth-child(1) {
      background-color: white;
      top: 1.2rem;
      -webkit-transform: rotate(135deg);
      transform: rotate(135deg);
    }
    
    #menu-wrapper #hamburger-menu.open .x:nth-child(2) {
      background-color: white;
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      right: -60px;
    }
    
    #menu-wrapper #hamburger-menu.open .x:nth-child(3) {
      background-color: white;
      top: 1.2rem;
      -webkit-transform: rotate(-135deg);
      transform: rotate(-135deg);
    }
    #menu-container .menu-list {
      padding-left: 0;
      display: block;
      position: absolute;
      width: 37rem;
      z-index: 9999;
      overflow-y: auto;
      overflow-x: hidden;
      right: -37rem;
      /* border-left: 1px solid white;
      border-bottom: 1px solid white; */
    }
    
    .liMain {
      font-size:2.2rem;
      line-height: 2;	
      text-transform: uppercase;
      font-weight: 500;
    
    }
    .liSub {
      font-size:2rem;
      line-height: 1.6;	
      text-transform: none;
      font-weight: 500;	
      
    }
    
    .liMain .aMain {
      position: relative;
      display:block;
      width:100%;
      color:white;
      border-top: 1px solid white;
      padding-left: 3.7rem;
    
    }
    .liSub .aSub {
      display:block;
      width:100%;
      color:black;
      padding-left: 3.7rem;
    }
    .liSub:last-of-type .aSub {
      padding-bottom: 1rem;
    }
    .liSub:first-of-type .aSub {
      padding-top: 1rem;
    }
    
    
    
    .revealContentNav {
      display: none;
    }
    
    
    
    
    
    .openNav {
      transition: all 0.2s linear;
      position: relative;
    }
    
    .openNav .faNav {
      position: absolute;
      text-align: left;
      left: 0;
      top: 0;
    }
    
    .revealPlusNav::before {
      content: "";
      position: absolute;
      transition: all 0.2s ease;
      left: 0;
      top: 0;
      width: 3rem;
      height: 4.5rem;
      background-image: url('/gfx/arrowDownWhite.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
      transition: all 0.2s linear;
      border-left: 1px solid var(--green);
    }
    
    .revealMinusNav::before {
      content: "";
      position: absolute;
      transition: all 0.2s ease;
      left: 0;
      top: 0;
      width: 3rem;
      height: 4.5rem;
      background-image: url('/gfx/arrowUpWhite.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
      border-left: 1px solid var(--green);
    }
    
    .headerSmart {
      width: 100%;
      padding-left: 3rem;
      padding-right: 3rem;
      margin-left: auto;
      margin-right: auto;
      position:relative;
    }
    
    .headerSmartFixed {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 200;
      background-color: black;
    }
    
    .headerSmart  .logo {
      height: 7.2rem;
      float: left;
      padding-bottom: 1.6rem;
      padding-top:1.6rem;
    }
    
    .headerSmart .logo img {
      height: 100%;
      width: auto;
    }
    
    .flexCentreCentre {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .flexLeftTop {
      display: flex;
      justify-content: left;
      align-items: top;
    }
    
    .flexLeftCentre {
      display: flex;
      justify-content: left;
      align-items: center;
    }
    
    .flexLeftBottom {
      display: flex;
      justify-content: left;
      align-items: bottom;
    }
    
    .flexRightTop {
      display: flex;
      justify-content: right;
      align-items: top;
    }
    
    .flexRightCentre {
      display: flex;
      justify-content: right;
      align-items: center;
    }
    
    .flexRightBottom {
      display: flex;
      justify-content: right;
      align-items: bottom;
    }
    .headerOffset {
      width: 100%;
      background-color:black;
      height: 7.2rem;
    }
    
    .blackBg {
      background-color: black;
    }
    .lightGreyBg {
      background-color: var(--lightGrey);
    }
    
    
    .fatLineOuter {
      position: relative;
      width: 4px;
      border-left: 1.5px solid #aaaaaa;
      margin-top: 6rem;
      height: calc(100% -18rem);
      margin-bottom: 12rem;
      display:none;
    }
    
    
    .fatLineInner {
      position: absolute;
      top: 25%;
      left: -1.5px;   
      width: 4px; 
      height: 50%; 
      background: var(--green); 
      z-index: 10;
      display: none;
    }
    .container {
     width: 100%;
    }
    /* .inner66 {
      max-width:128rem;
      padding-left: 0;
      padding-right: 0;
      margin-left: auto;
      margin-right: auto;
    } */
    
    .inner66 {
      max-width:128rem;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-left: auto;
      margin-right: auto;
    }
    .inner60 {
      max-width:128rem;
      padding-left: 3rem;
      padding-right: 0;
      margin-left: auto;
      margin-right: auto;
    
    }
    .inner06 {
      max-width:128rem;
      padding-left: 0;
      padding-right: 3rem;
      margin-left: auto;
      margin-right: auto;
    
    }
    .inner40 {
      max-width:128rem;
      padding-left: 3rem;
      padding-right: 0;
      margin-left: auto;
      margin-right: auto;
    
    }
    
    .inner44 {
      max-width:128rem;
      padding-left: 3rem;
      padding-right: 3rem;
      margin-left: auto;
      margin-right: auto;
    
    }
    .inner33 {
      max-width:128rem;
      padding-left: 3rem;
      padding-right: 3rem;
      margin-left: auto;
      margin-right: auto;
    
    }
    .inner33 {
      max-width:128rem;
      padding-left: 3rem;
      padding-right: 3rem;
      margin-left: auto;
      margin-right: auto;
    
    }
    
    .inner99 {
      max-width:128rem;
      padding-left: 3rem;
      padding-right: 3rem;
      margin-left: auto;
      margin-right: auto;
    }
    .inner22 {
      max-width:128rem;
      padding-left: 3rem;
      padding-right: 3rem;
      margin-left: auto;
      margin-right: auto;
    }
    
    .inner09 {
      max-width:128rem;
      padding-left: 0;
      padding-right: 0;
      margin-left: auto;
      margin-right: auto;
    }
    .inner90 {
      max-width:128rem;
      padding-left: 0;
      padding-right: 0;
      margin-left: auto;
      margin-right: auto;
    }
    
    .inner1212 {
      max-width:128rem;
      padding-left: 3rem;
      padding-right: 3rem;
      margin-left: auto;
      margin-right: auto;
    }
    
    .pt6 {
      padding-top: 4rem;
    }
    .pb6 {
      padding-bottom: 4rem;
    }
    .pt4{
      padding-top: 4rem;
    }
    .pb4 {
      padding-bottom: 4rem;
    }
    .pt3 {
      padding-top: 3rem;
    }
    
    .pb3 {
      padding-bottom: 3rem;
    }
    .pt2 {
      padding-top: 2rem;
    }
    .pb2 {
      padding-bottom: 2rem;
    }
    .pt0 {
      padding-top: 0;
    }
    .pb0 {
      padding-bottom: 0;
    }
    
    
    
    
    
    .more {
      font-size: 1.7rem;
      line-height: 1;
      font-weight: 500;
    }
    .moreMini {
      font-size: 1.4rem;
      line-height: 1;
      font-weight: 500;
    }
    
    .mb4 {
      margin-bottom: 4rem !important;
    }
    .moreBlock {
      display:block;
      padding-right: 0 !important;
    }
    .moreButton {
      display:inline-block;
      padding: 1.2rem;
      padding-left: 1.8rem;
      padding-right: 1.8rem;
      border-style: solid;
      border-width: 1px;
      border-top-left-radius: 0.8rem;
      border-bottom-left-radius: 0.8rem;
      cursor: pointer;
    }
    .moreBesides {
      display: inline-block;
      width: 4.1rem;
      padding:1.2rem;
      border-style: solid;
      border-width: 1px;
      border-left: none;
      border-top-right-radius: 0.8rem;
      border-bottom-right-radius: 0.8rem;
      cursor: pointer;
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
    }
    
    .lessButton {
      display:inline-block;
      padding: 1.2rem;
      padding-left: 1.8rem;
      padding-right: 1.8rem;
      border-style: solid;
      border-width: 1px;
      border-top-right-radius: 0.8rem;
      border-bottom-right-radius: 0.8rem;
      cursor: pointer;
    }
    .lessBesides {
      display: inline-block;
      width: 4.1rem;
      padding:1.2rem;
      border-style: solid;
      border-width: 1px;
      border-right: none;
      border-top-left-radius: 0.8rem;
      border-bottom-left-radius: 0.8rem;
      cursor: pointer;
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
    }
    
    
    .moreButtonMini {
      display:inline-block;
      padding: 1.05rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      border-style: solid;
      border-width: 1px;
      border-top-left-radius: 0.5rem;
      border-bottom-left-radius: 0.5rem;
      cursor: pointer;
    }
    .moreBesidesMini {
      display: inline-block;
      width: 3.8rem;
      padding: 1.05rem;
      border-style: solid;
      border-width: 1px;
      border-left: none;
      border-top-right-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;
      cursor: pointer;
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
    }
     .sideBySide {
       display: inline-block;
       vertical-align: middle;
       margin-right: 4rem;
     }
     .sideBySidePlus {
        display: block;
        vertical-align: middle;
        margin-bottom: 1rem;
      }
     
     .sideBySide:last-of-type, .sideBySidePlus:last-of-type {
        margin-right: 0;
      }
    
    
    
    
          
          /* new buttons */
          
          .moreButton10111211 {
             border-color: white;
             color:white;
           }
          .moreBesides10111211 {
           border-color: white;
            background-image: url('/gfx/arrowRightWhite.png');
           }
          
           .more:hover .moreButton10111211,
           .more.hovered .moreButton10111211 {
            border-color: white;
            background-color: var(--green);
            color:white;
            }
          .more:hover .moreBesides10111211,
           .more.hovered .moreBesides10111211{
             border-color: white;
             color:white;
             background-color: var(--green);
              background-image: url('/gfx/arrowRightWhite.png');
             }
             
           /* ++++++++++ */
           
           .moreButton52552511 {
              border-color: var(--darkGrey);
              background-color: var(--green);
              color: var(--darkGrey);
            }
           .moreBesides52552511 {
              border-color: var(--darkGrey);
             background-image: url('/gfx/arrowRightDarkGrey.png');
             background-color: var(--green);
            }
           
            .more:hover .moreButton52552511,
            .more.hovered .moreButton52552511 {
             border-color: var(--green);
             background-color: var(--darkGrey);
             color:white;
             }
           .more:hover .moreBesides52552511,
            .more.hovered .moreBesides52552511 {
             border-color: var(--green);
              color:white;
             background-color: var(--darkGrey);
               background-image: url('/gfx/arrowRightWhite.png');
              }
              
      /* ++++++++++ */
       
       .moreButton52552522 {
          border-color: var(--darkGrey);
          background-color: var(--green);
          color: var(--darkGrey);
        }
       .moreBesides52552522 {
          border-color: var(--darkGrey);
         background-image: url('/gfx/arrowRightDarkGrey.png');
         background-color: var(--green);
        }
       
        .more:hover .moreButton52552522,
        .more.hovered .moreButton52552522 {
         border-color: var(--green);
         background-color: var(--darkGrey);
         color:var(--green);
         }
       .more:hover .moreBesides52552522,
        .more.hovered .moreBesides52552522 {
         border-color: var(--green);
          color:var(--green);
         background-color: var(--darkGrey);
           background-image: url('/gfx/arrowRightGreen.png');
          }
          
      
      /* ++++++++++ */
       
       .moreButton10113313 {
          border-color: white;
          background-color: transparent;
          color: white;
        }
       .moreBesides10113313 {
          border-color: white;
         background-image: url('/gfx/arrowRightWhite.png');
         background-color: transparent;
        }
       
        .more:hover .moreButton10113313,
        .more.hovered .moreButton10113313 {
         border-color: var(--blue);
         background-color: white;
         color:var(--blue);
         }
       .more:hover .moreBesides10113313,
        .more.hovered .moreBesides10113313 {
         border-color: var(--blue);
          color:var(--blue);
         background-color: white;
           background-image: url('/gfx/arrowRightBlue.png');
          }
          
      
              
      /* ++++++++++ */
       
       .moreButton53553511 {
          border-color: var(--darkGrey);
          background-color: var(--blue);
          color: var(--darkGrey);
        }
       .moreBesides53553511 {
          border-color: var(--darkGrey);
         background-image: url('/gfx/arrowRightDarkGrey.png');
         background-color: var(--blue);
        }
       
        .more:hover .moreButton53553511,
        .more.hovered .moreButton53553511 {
         border-color: var(--blue);
         background-color: var(--darkGrey);
         color:white;
         }
       .more:hover .moreBesides53553511,
        .more.hovered .moreBesides53553511 {
         border-color: var(--blue);
          color:white;
         background-color: var(--darkGrey);
           background-image: url('/gfx/arrowRightWhite.png');
          }
      /* ++++++++++ */
       
       .moreButton53553533 {
          border-color: var(--darkGrey);
          background-color: var(--blue);
          color: var(--darkGrey);
        }
       .moreBesides53553533 {
          border-color: var(--darkGrey);
         background-image: url('/gfx/arrowRightDarkGrey.png');
         background-color: var(--blue);
        }
       
        .more:hover .moreButton53553533,
        .more.hovered .moreButton53553533 {
         border-color: var(--blue);
         background-color: var(--darkGrey);
         color:var(--blue);
         }
       .more:hover .moreBesides53553533,
        .more.hovered .moreBesides53553533 {
         border-color: var(--blue);
          color:var(--blue);
         background-color: var(--darkGrey);
           background-image: url('/gfx/arrowRightBlue.png');
          }
        
            /* ++++++++++ */
    
      
             .moreButton10112122 {
                border-color: white;
                color:white;
              }
             .moreBesides10112122 {
              border-color: white;
               background-image: url('/gfx/arrowRightWhite.png');
              }
             
              .more:hover .moreButton10112122,
              .more.hovered .moreButton10112122 {
               border-color: var(--green);
               background-color: white;
               color:var(--green);
               }
             .more:hover .moreBesides10112122,
              .more.hovered .moreBesides10112122{
                border-color: var(--green);
                color: var(--green);
                background-color: white;
                 background-image: url('/gfx/arrowRightGreen.png');
                }
                
             
       /* ++++++++++ */
          
             .moreButton10111311 {
                border-color: white;
                color:white;
              }
             .moreBesides10111311 {
              border-color: white;
               background-image: url('/gfx/arrowRightWhite.png');
              }
             
              .more:hover .moreButton10111311,
              .more.hovered .moreButton10111311 {
               border-color: white;
               background-color: var(--blue);
               color:white;
               }
             .more:hover .moreBesides10111311,
              .more.hovered .moreBesides10111311{
                border-color: white;
                color:white;
                background-color: var(--blue);
                 background-image: url('/gfx/arrowRightWhite.png');
                }
    
      /* ++++++++++ */
             
             .moreButton30331311 {
                border-color: var(--blue);
                color:var(--blue);
              }
             .moreBesides30331311 {
              border-color: var(--blue);
               background-image: url('/gfx/arrowRightBlue.png');
              }
             
              .more:hover .moreButton30331311,
              .more.hovered .moreButton30331311 {
               border-color: white;
               background-color: var(--blue);
               color:white;
               }
             .more:hover .moreBesides30331311,
             .more.hovered .moreBesides30331311 {
                border-color: white;
                color:white;
                background-color: var(--blue);
                 background-image: url('/gfx/arrowRightWhite.png');
                }
      /* ++++++++++ */
                 
                 .moreButton50551211 {
                    border-color: var(--darkGrey);
                    color:var(--darkGrey);
                  }
                 .moreBesides50551211 {
                  border-color: var(--darkGrey);
                   background-image: url('/gfx/arrowRightDarkGrey.png');
                  }
                 
                  .more:hover .moreButton50551211,
                  .more.hovered .moreButton50551211 {
                   border-color: white;
                   background-color: var(--green);
                   color:white;
                   }
                 .more:hover .moreBesides50551211,
                 .more.hovered .moreBesides50551211 {
                    border-color: white;
                    color:white;
                    background-color: var(--green);
                     background-image: url('/gfx/arrowRightWhite.png');
                    }
                    
      /* ++++++++++ */
       
       .moreButton20221211 {
          border-color: var(--green);
          color:var(--green);
        }
       .moreBesides20221211 {
        border-color: var(--green);
         background-image: url('/gfx/arrowRightGreen.png');
        }
       
        .more:hover .moreButton20221211,
        .more.hovered .moreButton20221211 {
         border-color: white;
         background-color: var(--green);
         color:white;
         }
       .more:hover .moreBesides20221211,
       .more.hovered .moreBesides20221211 {
          border-color: white;
          color:white;
          background-color: var(--green);
           background-image: url('/gfx/arrowRightWhite.png');
          }
                    /* ++++++++++ */
                     
                     .moreButton50551011 {
                        border-color: var(--darkGrey);
                        color:var(--darkGrey);
                      }
                     .moreBesides50551011 {
                      border-color: var(--darkGrey);
                       background-image: url('/gfx/arrowRightDarkGrey.png');
                      }
                     
                      .more:hover .moreButton50551011,
                      .more.hovered .moreButton50551011 {
                       border-color: white;
                       background-color: transparent;
                       color:white;
                       }
                     .more:hover .moreBesides50551011,
                     .more.hovered .moreBesides50551011 {
                        border-color: white;
                        color:white;
                        background-color: transparent;
                         background-image: url('/gfx/arrowRightWhite.png');
                        }
    
    
                    /* ++++++++++ */
                         
                         .moreButton50551011 {
                            border-color: var(--darkGrey);
                            color:var(--darkGrey);
                          }
                         .moreBesides50551011 {
                          border-color: var(--darkGrey);
                           background-image: url('/gfx/arrowRightDarkGrey.png');
                          }
                         
                          .more:hover .moreButton50551011,
                          .more.hovered .moreButton50551011 {
                           border-color: white;
                           background-color: transparent;
                           color:white;
                           }
                         .more:hover .moreBesides50551011,
                         .more.hovered .moreBesides50551011 {
                            border-color: white;
                            color:white;
                            background-color: transparent;
                             background-image: url('/gfx/arrowRightWhite.png');
                            }
    
    
     /* ++++++++++ */
                     
                     .moreButton30331011 {
                        border-color: var(--blue);
                        color:var(--blue);
                      }
                     .moreBesides30331011 {
                      border-color: var(--blue);
                      background-image: url('/gfx/arrowRightBlue.png');
                      }
                     
                      .more:hover .moreButton30331011,
                      .more.hovered .moreButton30331011 {
                       border-color: white;
                       background-color: transparent;
                       color:white;
                       }
                     .more:hover .moreBesides30331011,
                     .more.hovered .moreBesides30331011 {
                        border-color: white;
                        color:white;
                        background-color: transparant;
                         background-image: url('/gfx/arrowRightWhite.png');
                        }
    
     /* ++++++++++ */
                         
                         .moreButton10111122 {
                            border-color: white;
                            color:white;
                          }
                         .moreBesides10111122 {
                          border-color: white;
                           background-image: url('/gfx/arrowRightWhite.png');
                          }
                         
                          .more:hover .moreButton10111122,
                          .more.hovered .moreButton10111122 {
                           border-color: white;
                           background-color: white;
                           color:var(--green);
                           }
                         .more:hover .moreBesides10111122,
                         .more.hovered .moreBesides10111122 {
                            border-color: white;
                            color:var(--green);
                            background-color: white;
                             background-image: url('/gfx/arrowRightGreen.png');
                            }
    
    /* ++++++++++ */
                             
                             .moreButton10111144 {
                                border-color: white;
                                color:white;
                              }
                             .moreBesides10111144 {
                              border-color: white;
                               background-image: url('/gfx/arrowRightWhite.png');
                              }
                             
                              .more:hover .moreButton10111144,
                              .more.hovered .moreButton10111144 {
                               border-color: orange;
                               background-color: white;
                               color:var(--orange);
                               }
                             .more:hover .moreBesides10111144,
                             .more.hovered .moreBesides10111144 {
                                border-color: orange;
                                color:var(--orange);
                                background-color: white;
                                 background-image: url('/gfx/arrowRightOrange.png');
                                }
    
    /* ++++++++++ */
                                 
                                 .moreButton10111411 {
                                    border-color: white;
                                    color:white;
                                  }
                                 .moreBesides10111411 {
                                  border-color: white;
                                   background-image: url('/gfx/arrowRightWhite.png');
                                  }
                                 
                                  .more:hover .moreButton10111411,
                                  .more.hovered .moreButton10111411 {
                                   border-color: white;
                                   background-color: var(--orange);
                                   color: white;
                                   }
                                 .more:hover .moreBesides10111411,
                                 .more.hovered .moreBesides10111411 {
                                    border-color: white;
                                    color: white;
                                    background-color: var(--orange);
                                     background-image: url('/gfx/arrowRightWhite.png');
                                    }
                                    
      /* ++++++++++ */
       
       .moreButton50551311 {
          border-color: var(--darkGrey);
          color:var(--darkGrey);
        }
       .moreBesides50551311 {
        border-color: var(--darkGrey);
         background-image: url('/gfx/arrowRightDarkGrey.png');
        }
       
        .more:hover .moreButton50551311,
        .more.hovered .moreButton50551311 {
         border-color: white;
         background-color: var(--blue);
         color:white;
         }
       .more:hover .moreBesides50551311,
       .more.hovered .moreBesides50551311 {
          border-color: white;
          color:white;
          background-color: var(--blue);
           background-image: url('/gfx/arrowRightWhite.png');
          }
    
    
    
    
    
     /* ++++++++++ */
           
           .lessButton20221211 {
              border-color: var(--green);
              color:var(--green);
            }
           .lessBesides20221211 {
            border-color: var(--green);
             background-image: url('/gfx/arrowLeftGreen.png');
            }
           
            .more:hover .lessButton20221211,
            .more.hovered .lessButton20221211 {
             border-color: white;
             background-color: var(--green);
             color:white;
             }
           .more:hover .lessBesides20221211,
           .more.hovered .lessBesides20221211 {
              border-color: white;
              color:white;
              background-color: var(--green);
               background-image: url('/gfx/arrowLeftWhite.png');
              }
    
    /* ++++++++++ */
               
               .lessButton30331011 {
                  border-color: var(--blue);
                  color:var(--blue);
                }
               .lessBesides30331011 {
                border-color: var(--blue);
                background-image: url('/gfx/arrowLeftBlue.png');
                }
               
                .more:hover .lessButton30331011,
                .more.hovered .lessButton30331011 {
                 border-color: white;
                 background-color: transparent;
                 color:white;
                 }
               .more:hover .lessBesides30331011,
               .more.hovered .lessBesides30331011 {
                  border-color: white;
                  color:white;
                  background-color: transparant;
                   background-image: url('/gfx/arrowLeftWhite.png');
                  }
    
    
    
    
    
    .gTxt {
      color: var(--darkGrey);
    }
    .gTxt h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .gTxt h3 {
      font-size: 2rem;
      line-height: 1.1;
      font-weight: 500;
      margin-bottom: 1.7rem;
    }
    .gTxt p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.7rem;
    }
    .gTxt p strong {
      font-weight: 600;
    }
    .gTxt ul {
      font-size: 1.7rem;
      line-height: 120%;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    
    
    }
    
    .gTxt ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .gTxt ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      color: var(--lightBlue);
      top: 0;
    }
    
    
    .gTxt ol {
      margin-bottom: 1rem;
      counter-reset: my-awesome-counter;
    }
    
    .gTxt ol li {
      font-weight: 300;
      font-size: 1.7rem;
      line-height: 120%;
      margin-bottom: 1rem;
      /* color: #ABACAE;  */
      counter-increment: my-awesome-counter;
    }
    
    .gTxt ol li {
      padding-left: 2rem;
      position: relative;
    }
    
    .gTxt ol li:before {
      content: counter(my-awesome-counter);
      width: 2rem;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      padding-left: 0;
      font-weight: 500;
      font-size: 1.7rem;
      line-height: 120%;
      color: var(--lightBlue);
    }
    
    
    
    
    /* header */
    .headerContainer {
      width: 100%;
      position: fixed;
      background-color: black;
      z-index: 100;
    }
    
    .headerContainer::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 10%;
      height: 100%;
      background-color: var(--green);
      pointer-events: none;
      /* ensures clicks pass through */
      z-index: -1;
      /* place behind content */
    }
    
    .logoArea {
      width: 20.8rem;
      height: 4rem;
      margin-bottom: 1.2rem;
      margin-top: 3.6rem;
    }
    
    .logoArea img {
      height: 4rem;
      width: auto;
    }
    .logoArea a {
      cursor: pointer !important;
    }
    
    .commsArea {
      height: 10rem;
      /* background-position: right top;
      background-repeat: repeat-x;
      background-image: url(/gfx/greenBlueStripe.webp);
      background-size: auto 10rem; */
      width: 22.4rem;
      text-wrap: nowrap;
      padding-left: 3rem;
      text-align: right;
      background-color: var(--green);
    }
    
    
    .commsArea a {
      display: block;
      width: 100%;
      color: white;
    }
    
    .commsArea a:hover,
    .commsArea a:focus  {
      color: black;
    }
    
    .phoneLink {
      font-size: 1.8rem;
      line-height: 1.4;
      font-weight: 500;
      margin-top: 2.6rem;
    }
    
    .emailLink {
      font-size: 1.8rem;
      line-height: 1.4;
      font-weight: 500;
    
    }
    
    
    /* home - hero video */
    
    .bg5 {
      background-color: rgba(0,0,0,0.05);
    }
    .bg10 {
      background-color: rgba(0,0,0,0.1);
    }
    .bg15 {
      background-color: rgba(0,0,0,0.15);
    }
    .bg20 {
      background-color: rgba(0,0,0,0.2);
    }
    .bg25 {
      background-color: rgba(0,0,0,0.25);
    }
    .bg30 {
      background-color: rgba(0,0,0,0.30);
    }
    .bg35 {
      background-color: rgba(0,0,0,0.35);
    }
    .bg40 {
      background-color: rgba(0,0,0,0.4);
    }
    .bg45 {
      background-color: rgba(0,0,0,0.45);
    }
    .bg50 {
      background-color: rgba(0,0,0,0.5);
    }
    
    
    
    
    .videoHomeContainer {
      position: relative;
      width: 100vw;
      padding-top: 54%;
      /* 16:9 aspect ratio (9/16 = 0.5625) */
      overflow: hidden;
    }
    
    /* Video fills the container and scales responsively */
    .videoHomeBg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Ensures video fills container proportionally */
      z-index: -1;
      pointer-events: none;
      /* Prevents video from interfering with interaction */
    }
    
    .videoMaskBg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Ensures video fills container proportionally */
      z-index: 2;
      pointer-events: none;
      /* Prevents video from interfering with interaction */
    }
    
    
    .heroTxtContainer {
      width: 100%;
      z-index: 10;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    
    
    .heroTxt {
      padding-bottom: 12rem;
      width: 100%;
    }
    .heroTxt h1 {
      text-transform: uppercase;
      font-size: 3.6rem;
      font-weight: 600;
      line-height: 1;
      margin-bottom: 2rem;
      color:white;
      /* padding-right: 50%; */
    }
    .heroTxtASD h1 {
      color: var(--blue);
    }
    .heroTxt p {
      font-size: 2.4rem;
      font-weight: 500;
      line-height: 1.2;
      margin-bottom: 2rem;
      color:white;
      /* padding-right: 50%; */
    
    }
    .explore {
      display: block;
      width: 10rem;
      height: 6rem;
      border-top-left-radius: 0.8rem;
      border-top-right-radius: 0.8rem;
      background-color: var(--green);
      position: absolute;
      left: calc(50% - 5rem);
      bottom: 0;
      padding: 1.4rem;
    }
    .exploreASD {
      background-color: var(--blue);
    }
    .exploreBad {
      background-color: pink !important;
    
      /* opacity: 0;
      transition: opacity 0.6s ease-out;
      pointer-events: none;
      visibility: hidden; */
    }
    
    
    .exploreActive, .explore:hover {
      background-color: var(--midGrey) !important;
    }
    .exploreTxt {
      width: 100%;
      text-align: center;
      text-transform: uppercase;
      font-size: 1.2rem;
      font-weight: 500;
      line-height: 1;
      color: white;
      margin-bottom: 0.6rem;
    }
    .exploreImg {
      width: 3rem;
      height: auto;
      margin-left: auto;
      margin-right: auto;
    }
    .exploreImg img {
      width: 100%;
      height: auto;
    }
    
    
    
    /* quote/video block */
    .quoteVideoContainer {
      width: 100%;
      background-color: var(--lightGrey);
     margin-top: 0.5rem;
    }
    
    .quoteVideoArea {
      max-width: 128rem;
      padding-left: 6rem;
      padding-right: 6rem;
      margin-left: auto;
      margin-right: auto;
    }
    
      .quoteVideoGrid {
      grid-template-columns: 4px calc(100% - 4px);
      grid-template-rows: auto auto;
      grid-template-areas:
        "col1 col2"
        "col3 col3";
    }
    
    .quoteVideoGrid > :nth-child(1) { grid-area: col1; }
    .quoteVideoGrid > :nth-child(2) { grid-area: col2; }
    .quoteVideoGrid > :nth-child(3) { grid-area: col3; }
    
    /* optional: ensure full width for col3 */
    .quoteVideoGrid > :nth-child(3) {
      width: 100%;
    }
    
    
    .quoteTxt {
      /* border-right: solid 0.8rem white; */
      padding-top: 5rem;
      padding: 2rem;
      padding-top: 4rem;
      padding-bottom: 4rem;
    
    }
    
    .quoteTxt h2 {
      color: var(--green);
    }
    
    .videoArea {
      background-color: var(--green);
      /* border-right: solid 0.8rem white; */
    }
    
    .quoteVideoWrapper {
      position: relative;
      width: 100%;
      /* max-width: 800px; */
      margin: 0 auto;
      padding-top: 56.25%;
      /* 16:9 */
      background: #000;
      overflow: hidden;
    }
    
    .quoteVideo {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .videoSideTxt {
      padding: 3rem;
    }
    
    .videoSideTxt h3 {
      color: white;
    }
    
    .videoSideTxt p {
      font-size: 1.6rem;
      margin-bottom: 1.6rem;
      color: white;
    }
    
    
    
    
    /* /quote/video block */
    
    
    
    
    /* specialist services block */
    
    .headerSS {
      width: 100%;
      padding-bottom: 4rem;
    }
    .headerSS h2 {
    color: var(--green);
    }
    .headerSS p {
    font-size: 2rem;
    }
    .headerSS p strong {
      font-weight: 600;
    }
    
    .gridSS {
      display: grid;
      grid-template-columns:1fr 1fr;
      gap: 3rem;
      width: 100%; 
      margin-bottom: 3rem;
    }
    
    .itemSS {
      border-radius: 2rem;
      border-style: solid;
      border-width: 2.4px;
      overflow: hidden;
      }
    .imgSS {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .itemSS {
            position: relative;
            overflow: hidden;
            cursor: pointer;
          }
    
          
    .imgSS {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          /* .imgSS::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemSS:hover .imgSS::before {
            transform: scale(1.2);
          } */
          
    .txtSS {
      padding: 4rem;
      padding-top: 3rem;
    }
    
    .txtSS h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .txtSS p {
      font-size: 1.6rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtSS p strong {
      font-weight: 600;
    }
    
    /* /IST block */
    
    
    .gridIST {
      display: grid;
      grid-template-columns:1fr 1fr;
      gap: 3rem;
      width: 100%; 
      margin-bottom: 3rem;
    }
    
    .itemIST {
      border-radius: 2rem;
      border-style: solid;
      border-width: 2.4px;
      overflow: hidden;
      }
    .imgIST {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .itemIST {
            position: relative;
            overflow: hidden;
            cursor: pointer;
          }
          
          .itemISTNot {
            position: relative;
            overflow: hidden;
            cursor: default !important;
          }
    
    
          
    .imgIST, .imgISTNot {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          /* .imgIST::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemIST:hover .imgIST::before {
            transform: scale(1.2);
          }
           */
          
          /* .imgISTNot::before {
            display:none
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemISTNot:hover .imgISTNot::before {
            transform: scale(1);
          } */
    
          
    .txtIST {
      padding: 4rem;
      padding-top: 3rem;
    }
    
    .txtIST h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .txtIST p {
      font-size: 1.6rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtIST p strong {
      font-weight: 600;
    }
    
    .txtIST ul {
      font-size: 2rem;
      line-height: 1.2;
      font-weight: 400;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    
    
    }
    
    .txtIST ul li {
      padding-left: 2rem;
      margin-bottom: 0.4rem;
      position: relative;
    }
    
    
    .txtIST ul li:before {
      content: "\2022";
      font-size: 2.6rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 900;
      color: var(--green);
      top: -0.5rem;
    }
    
    
    /* /IST block */
    
    
    /* about us */
    
    
    
    .aboutVideoGrid {
      /* display: grid;
      grid-template-columns: 1fr 1fr;
      width: 100%; */
    }
    
    .splitLineTxtGrid {
      display: block;
    }
    
    .splitLineTxtGrid .fatLineOuter {
      display:none;
          position: relative;
        width: 4px;
        border-left: 1.5px solid #aaaaaa;
        height: 100%;
        float:left;
        margin-top: unset;
        margin-bottom: unset
      }
    .splitLineTxtGrid .fatLineInner {
        position: absolute;
        left: -1.5px; 
        top:25%  
        width: 4px; 
        height: 50%; 
        background: var(--green); 
        z-index: 10;
      }
    .aboutTxt {
      padding-right: 2rem;
      padding-left: 2rem;
      padding-top: 4rem;
      padding-bottom: 4rem;
    }
    
    .aVideoWrapper {
      position: relative;
      width: 100%;
      /* max-width: 800px; */
      margin: 0 auto;
      padding-top: 56.25%;
      /* 16:9 */
      background: #000;
      overflow: hidden;
    }
    
    .aboutVideo {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .aboutTxt h1 {
      font-size: 3.6rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green)
    }
    .aboutTxt h1 span {
      color: white;
    }
    .aboutTxt p {
      font-size: 2rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      color: white;
    }
    .aboutTxt p strong {
      font-weight: 600;
    }
    
    
    /* fifty line fifty block */
    
    .gridFLF {
      display: grid;
      grid-template-columns: 1fr;
      width: 100%; 
    }
    
    
    .imgFLF  {
      width:100%;
    }
    
    .imgFLF .imgArea {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 66.67%; /* 380/570 * 100% = 66.67% */
      width:100%;
    }
    .txtFLF {
      padding: 4rem;
      padding-left: 3rem;
    padding-right: 3rem;
    }
    
    .txtFLF h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green)
    }
    .txtFLF h2 span {
      color: white;
    }
    .txtFLF p {
      font-size: 1.6rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      color: white;
    }
    .txtFLF p strong {
      font-weight: 600;
    }
    .gridFLF .fatLineOuter {
      position: relative;
      width: 4px;
      border-left: 1.5px solid #aaaaaa;
      margin-top: 6rem;
      height: calc(100% -30rem);
      margin-bottom: 24rem;
    }
    
    /* /fifty line fifty block */
    
    
    /* masthead block */
    .mT5 {
      margin-top: 0.5rem;
     }
     .mt3 {
       margin-top:3rem;
      }
    
    .gridMast {
      display: grid;
      grid-template-columns: 1fr;
      width: 100%; /* Ensure it uses full width for percentage calculations */
    }
    
    
    
    
    .imgMast {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 56.25%; 
      width:100%;
    }
    .txtMast {
      padding-top: 4rem;
      padding-bottom: 4rem;
      padding-left: 3rem;
      padding-right: 3rem;
    }
    
    
    .txtMast h1 {
      font-size: 3.6rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green)
    }
    .txtMast h1 span {
      color: white;
    }
    .txtMast p {
      font-size: 2rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      color: white;
    }
    .txtMast p strong {
      font-weight: 600;
    }
    .txtMast .txtMastArea .fatLineOuter {
      position: relative;
      width: 4px;
      border-left: 1.5px solid #aaaaaa;
      height: 100%;
      float:left;
    }
    .txtMast .txtBlock .fatLineInner {
      display: none;
      position: absolute;
      top: 25%;
      left: -1.5px;   
      width: 4px; 
      height: 50%; 
      background: var(--green); 
      z-index: 10;
    }
    .txtMast .txtMastArea .txtBlockISS {
      padding-right: 0;
    }
    
    .txtMastASD {
      padding-top: 4rem;
      padding-bottom: 4rem;
    }
    
    
    
    
    
    
    
    .txtMastCAR h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green);
    }
    .txtMastCAR h3 {
      font-size: 2rem;
      line-height: 1.1;
      font-weight: 500;
      margin-bottom: 1.7rem;
      color: var(--green);
    }
    .txtMastCAR p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.7rem;
      color: var(--darkGrey);
    }
    .txtMastCAR p strong {
      font-weight: 600;
    }
    .txtMastCAR ul {
      font-size: 1.7rem;
      line-height: 120%;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
      color: var(--darkGrey);
    
    }
    
    .txtMastCAR ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .txtMastCAR ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      color: var(--green);
      top: 0;
    }
    
    
    
    
    .txtMastASD h1 {
      font-size: 3.6rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--blue)
    }
    .txtMastASD h1 span {
      color: white;
    }
    
    
    
    .txtMastASD h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--blue)
    }
    .txtMastASD h2 span {
      color: white;
    }
    
    .txtMastASD .txtBlock .fatLineInner {
      background: var(--blue); 
    }
    .txtMastASD .txtMastArea .txtBlock {
      width: 100%;
      position:relative;
    }
    
    
    .txtMastASD p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      text-transform: none;
      color: white;
    }
    
    
    
    .txtMastAbout {
      padding-top: 0;
      padding-bottom: 0;
    }
    .pl5 {
      padding-left: 0;
    }
    
    
    .txtMastAbout h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green)
    }
    .txtMastAbout h2 span {
      color: var(--darkGrey);
    }
    
    .txtMastAbout .txtBlock .fatLineInner {
      display:none;
      background: var(--green); 
    }
    .txtMastAbout .txtMastArea .txtBlock {
      /* padding-left: 5rem;
      padding-right: 7rem;
      width: 100%;
      border-left: 1.5px solid #aaaaaa;
      position:relative; */
    }
    
    
    .txtMastAbout p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      text-transform: none;
      color: var(--darkGrey);
    }
    
    .txtMastAbout2 h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green)
    }
    
    .txtMastAbout2 p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      text-transform: none;
      color: white;
    }
    
    .timelineArea h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 5.7rem;
      color: var(--green)
    }
    
    .timelineContent h3 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.4rem;
      color: var(--green)
    }
    
    
    .timelineContent p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      text-transform: none;
      color: var(--darkGrey);
    }
    
    
    
    
    .logoHero {
      display: inline-block;
      vertical-align: middle;
      max-width: 12rem;
      max-height: 5rem;
      margin-right: 3rem;
    }
    .logoHero:last-of-type {
      margin-right: 0;
    }
    
    .txtMastISS {
      min-height: 36rem;
    }
    
    
    .txtMastTE {
      min-height: 36rem;
    }
    
    .txtMastTE p {
      font-size: 2.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      color: white;
    }
    
    
    .txtMast .txtMastArea .txtBlockTE {
      padding-right: 0;
    }
    .txtMast .txtMastArea .txtBlockTE h1,
    .txtMast .txtMastArea .txtBlockTE h2,
    .txtMast .txtMastArea .txtBlockTE ul li::before {
      color: var(--orange);
    }
    
    .txtMast .txtMastArea .txtBlockTE ul {
      font-size: 1.7rem;
      line-height: 120%;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
      color: white;
    
    }
    
    .txtMast .txtMastArea .txtBlockTE ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .txtMast .txtMastArea .txtBlockTE ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      top: 0;
    }
    
    .txtMast .txtMastArea .txtBlockTE  h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .txtMast .txtBlockTE .fatLineInner {
      background: var(--orange); 
    }
    
    
    
    
    
    
    
    .txtMast .txtMastArea .txtBlockTE {
      padding-right: 0;
    }
    .txtMast .txtMastArea .txtBlockTE h1,
    .txtMast .txtMastArea .txtBlockTE h2,
    .txtMast .txtMastArea .txtBlockTE ul li::before {
      color: var(--orange);
    }
    
    .txtMast .txtMastArea .txtBlockTE ul {
      font-size: 1.7rem;
      line-height: 120%;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
      color: white;
    
    }
    
    .txtMast .txtMastArea .txtBlockTE ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .txtMast .txtMastArea .txtBlockTE ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      top: 0;
    }
    
    .txtMast .txtMastArea .txtBlockTE  h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .txtMast .txtBlockTE .fatLineInner {
      background: var(--orange); 
    }
    
    
    
    
    
    
    
    
    
    
    
    /* reputation block */
    
    .headerREP {
      width: 100%;
      padding-top: 4rem;
      padding-bottom: 4rem;
    }
    .headerREP h2 {
    color: var(--green);
    }
    .headerREP p {
    font-size: 2rem;
    }
    .headerREP p strong {
      font-weight: 600;
    }
    
    .gridREP {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      width: 100%;
      padding-bottom: 4rem;
    }
    
    .itemREP {
      position: relative;
      border-radius: 2rem;
      border: 2.4px solid;
      overflow: hidden;   /* keeps children within border */
      cursor: pointer;
      border-color: var(--darkGrey);
      background-color: white;
    }
    
    .imgREP {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding-bottom: 67%;
      overflow: hidden;
      z-index: 1;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    
      /* remove top corners rounding */
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    .imgSpace {
      padding-bottom: 67%;
      overflow: hidden;
    width:100%;
    }
    
    
    /* .imgREP::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: inherit;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    
      border-bottom-left-radius: inherit;
      border-bottom-right-radius: inherit;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    
      transition: transform 0.6s ease;
      transform-origin: center center;
      transform: scale(1);
    }
    
    .itemREP:hover .imgREP::before {
      transform: scale(1.2);
    } */
    .txtREP {
      padding: 4rem;
      padding-top: 4rem;
    }
    
    .txtREP h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
      color: var(--green);
    }
    .txtREP p {
      font-size: 1.6rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtREP p strong {
      font-weight: 600;
    }
    
    /* /specialist services block */
    
    
    /* home - logo carousel */
    .logosPad {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }
    .logosBlock {
      overflow: hidden;
      position: relative;
      height: 11rem;
      width:100%;
    }
    
    .logosTrack {
      position: absolute;
      display: inline-block;
      white-space: nowrap;
      will-change: transform;
    }
    
    .logosBlock img {
      max-height: 5rem;
      height: auto;
      width: auto;
      max-width: 17rem;
      vertical-align: middle;
      margin-right: 5rem;
      display: inline-block;
      opacity: 0.65;
    }
    .gradLeft {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 9rem;
      height: 14rem; /* Ensure the height is defined */
      background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
      z-index: 10;
    }
    
    .gradRight {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 9rem;
      height: 14rem; /* Ensure the height is defined */
      background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
      z-index: 10;
    }
    
    /* security solutions list */
    
    .gridSecSol {
      display: grid;
      grid-template-columns:1fr 1fr;
      gap: 3rem;
      width: 100%; 
    }
    
    .itemSecSol {
      border-radius: 2rem;
      border-style: solid;
      border-width: 1px;
      overflow: hidden;
      }
    .imgSecSol {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .itemSecSol {
            position: relative;
            overflow: hidden;
            cursor: pointer;
          }
    
          
    .imgSecSol {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          /* .imgSecSol::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemSecSol:hover .imgSecSol::before {
            transform: scale(1.2);
          } */
          .itemSecSol:hover,
          .itemSecSol.hovered {
          --lightGrey: white;
          }
          
    .txtSecSol {
      padding: 2.6rem;
      padding-bottom: 9rem;
    }
    .moreAbsolute {
      position: absolute;
      bottom: 3.4rem;
      left: 2.6rem;
    }
    
    .moreCaption {
      position: absolute;
    }
    
    .txtSecSol h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
    }
    .txtSecSol p {
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtSecSol p strong {
      font-weight: 600;
    }
    
    /* /specialist services block */
    
    
    
    /* split columns of text-wrap:  */
    /* .columnSplit {
      column-count: 2;
      column-gap: 5rem;
      column-fill: balance; 
      widows: 2;
      orphans: 2;
    }
    .columnSplitWide {
      column-gap: 9rem;
    }
    
    
    .columnSplit h2,
    .columnSplit h3,
    .columnSplit h4,
    .columnSplit ul,
    .columnSplit ol,
    .columnSplit li {
      break-inside: avoid;
      -webkit-column-break-inside: avoid;
      page-break-inside: avoid;
    }
    
    .columnSplit p {
      break-inside: auto;  
      text-wrap: pretty;   
    }
    
    .columnSplit p:last-child {
      margin-bottom: 0;
    }
    
    .columnSplit ul,
    .columnSplit ol {
      margin: 1rem 0;
      padding-left: 1.5rem;
    } */
    
    
    /* category list T1*/
    
    .gridCatListT1 {
      display: grid;
      grid-template-columns:1fr 1fr;
      gap: 3rem;
      width: 100%; 
    }
    
    .itemCatListT1 {
      border-radius: 2rem;
      border-style: solid;
      border-width: 1px;
      overflow: hidden;
      }
    .imgCatListT1 {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .imgCatListT1Mod {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    
    .itemCatListT1 {
            position: relative;
            overflow: hidden;
          //  cursor: pointer;
          }
    
          
    .imgCatListT1 {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          .imgCatListT1Mod {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          
          /* .imgCatListT1Mod::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemCatListT1Mod:hover .imgCatListT1Mod::before {
            transform: scale(1.2);
          } */
          /* .imgCatListT1Mod:hover,
          .imgCatListT1Mod.hovered {
          --lightGrey: white;
          } */
          
    .txtCatListT1 {
      padding: 2.6rem;
      padding-bottom: 3.6rem;
    }
    
    .txtCatListT1Mod {
      padding-bottom: 10rem;
    }
    .moreAbsolute {
      position: absolute;
      bottom: 3.4rem;
      left: 2.6rem;
    }
    
    .txtCatListT1 h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
    }
    .txtCatListT1 p {
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtCatListT1 p strong,
    .txtCatListT1Mod p strong {
      font-weight: 600;
    }
    
    .txtCatListT1 ul {
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    
    
    }
    
    .txtCatListT1 ul li {
      padding-left: 1.6rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .txtCatListT1 ul li:before {
      content: "\2022";
      font-size: 1.6rem;
      line-height: 1.4;
      width: 1.6rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 900;
      color: var(--green);
      top: -0.3rem;
    }
    
    
    .txtCatListT1 ol {
      margin-bottom: 1rem;
      counter-reset: my-awesome-counter;
    }
    
    .txtCatListT1 ol li {
      font-weight: 300;
      font-size: 1.7rem;
      line-height: 120%;
      margin-bottom: 1rem;
      /* color: #ABACAE;  */
      counter-increment: my-awesome-counter;
    }
    
    .txtCatListT1 ol li {
      padding-left: 2rem;
      position: relative;
    }
    
    .txtCatListT1 ol li:before {
      content: counter(my-awesome-counter);
      width: 2rem;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      padding-left: 0;
      font-weight: 500;
      font-size: 1.7rem;
      line-height: 120%;
      color: var(--lightBlue);
    }
    
    .txtCatListT1Mod p {
      font-size: 1.8rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    
    }
    
    .hBlockTxt p {
      font-size: 2rem;
      line-height: 1.4;
      margin-bottom: 2.6rem;
    
    }
    .hBlockTxt h2 {
    color: white;
    }
    
    
    .imgCOIB {
      position: relative;
      /* padding-bottom: 56.5%; */
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
      background-image: none !important;
      padding-top: 4rem;
      padding-bottom: 4rem;
    }
    
    /* /specialist services block */
    
    
    /* promises */
    .itemPromise {
      position:relative;
      padding-left: 5rem;
    }
    .itemPromise .tickBox {
      position: absolute;
      width: 4rem;
      height: 4rem;
      top:0;
      left:0;
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
      background-image: url('/gfx/greenTick.webp');
    }
    .headerPromise {
      width: 100%;
      padding-bottom: 4rem;
    }
    .headerPromise h2 {
    color: var(--green);
    }
    .headerPromise p {
    font-size: 2rem;
    }
    .headerPromise p strong {
      font-weight: 600;
    }
    .headerPromise {
      padding-top: 0;
    }
    
    
    .gridPromises {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 3rem;
    }
    
    .gridPromises .column {
      display: flex;
      flex-direction: column;
      gap: 0; /* spacing between items, adjust if needed */
    }
    
    .itemPromise {
      display: flex;
      flex-direction: column;
    }
    
    
    .itemPromise h3 {
      font-size: 1.7rem;
      line-height: 1.3;
      font-weight: 500;
      margin-bottom: 0.4rem;
    }
    .itemPromise p {
      font-size: 1.7rem;
      line-height: 1.3;
      font-weight: 400;
      margin-bottom: 2rem;
    }
    .itemPromise p strong {
      font-weight: 600;
    }
    
    
    /* slides */
    
    .slideGridOnWhite {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      width: 100%;
    }
    .slideGridOnGreen {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      width: 100%;
    }
    
    .slideGridOnDark {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      width: 100%;
    }
    
    
    .slideImg {
      display:none;
      padding-bottom: 75%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }
    .slideTxt {
    padding-top:7rem;
    padding-bottom:3rem;
    padding-left:3rem;
    padding-right: 3rem;
    min-height: 42rem;
    
    }
    /* .txtOnWhite {
      padding-right: 0;
    }
    .txtOnGreen {
      padding-right: 14rem;
    }
    
    .txtOnDark {
      padding-left: 14rem;
    } */
    
    
    .slideTxt h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .slideTxt h3 {
      font-size: 2rem;
      text-transform: uppercase;
      line-height: 1.1;
      font-weight: 500;
      margin-bottom: 1.7rem;
    }
    .slideTxt p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.7rem;
    }
    .slideTxt p strong {
      font-weight: 600;
    }
    .slideTxt ul {
      font-size: 1.7rem;
      line-height: 120%;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    }
    
    .slideTxt ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .slideTxt ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      top: 0;
    }
    
    .txtOnWhite h2,
    .txtOnWhite ul li:before {
      color: var(--orange);
    }
    .txtOnWhite p,
    .txtOnWhite h3,
    .txtOnWhite ul li {
      color: var(--darkGrey);
    }
    
    
    .txtOnGreen h2,
    .txtOnGreen ul li:before {
      color: var(--green);
    }
    .txtOnGreen p,
    .txtOnGreen h3,
    .txtOnGreen ul li {
      color: white;
    }
    
    
    
    .txtOnDark h2,
    .txtOnDark ul li:before {
      color: var(--orange);
    }
    .txtOnDark p,
    .txtOnDark h3,
    .txtOnDark ul li {
      color: white;
    }
    
    
    /* meet the team */
    .teamHead {
      padding-bottom: 3rem;
    }
    .teamHead h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 0;
      color: var(--green);
    }
    
    .gridTeam {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      width: 100%;
    }
    
    .areaPad {
      padding-bottom: 120%;
      display: block;
      width: 100%;
    }
    
    .itemTeam {
      position: relative;
      border-radius: 2rem;
      border: 2px solid var(--green);
      overflow: hidden;
      background-color: white;
    }
    
    /* The image block — only top corners rounded */
    .imgTeam {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top center;
      padding-bottom: 120%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      border-top-left-radius: calc(2rem - 2px);
      border-top-right-radius: calc(2rem - 2px);
      z-index: 10;
      transition: top 0.3s ease;
      /* will-change: top; */
    
    }
    
    /* Biography section (hidden underneath the image) */
    .biog {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 2.4rem;
      background-color: white;
      color: var(--darkGrey);
      box-sizing: border-box;
      z-index: 1;
    }
    
    /* Text section at bottom */
    .txtTeam {
      padding: 2.6rem 2.6rem 4rem;
      padding-top: 1.8rem;
      background-color: var(--green);
      text-align: center;
      border-bottom-left-radius: calc(2rem - 2px);
      border-bottom-right-radius: calc(2rem - 2px);
    }
    
    .txtTeam h2 {
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 0;
      color: white;
    }
    
    .txtTeam h3 {
      font-size: 1.7rem;
      font-weight: 500;
      margin-bottom: 0;
      color: white;
    }
    
    .txtTeam p {
      font-size: 1.4rem;
      line-height: 1.4;
      margin-bottom: 1.6rem;
    }
    
    /* Plus/minus toggle button */
    .biogPlus {
      width: 3rem;
      height: 3rem;
      position: absolute;
      left: calc(50% - 1.5rem);
      bottom: 0;
      background-color: white;
      border-left: 1px solid var(--green);
      border-top: 1px solid var(--green);
      border-right: 1px solid var(--green);
      border-top-left-radius: 0.4rem;
      border-top-right-radius: 0.4rem;
      background-image: url('/gfx/biogPlus.webp');
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 20;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    /* Active state (minus) */
    .biogPlus.active {
      background-color: var(--green);
      border-left: 1px solid white;
      border-top: 1px solid white;
      border-right: 1px solid white;
      background-image: url('/gfx/biogMinus.webp');
    }
    
    
    /* meet the team */
    
    .gridTeam2 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 2rem;
      width: 100%;
    }
    
    
    .itemTeam2 {
      position: relative;
      border-radius: 2rem;
      border: 1.6px solid var(--green);
      overflow: hidden;
      background-color: white;
    }
    
    /* The image block — only top corners rounded */
    .imgTeam2 {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top center;
      padding-bottom: 120%;
      width: 100%;
      border-top-left-radius: 1.2rem;
      border-top-right-radius: 1.2rem;
    
    }
    
    
    
    /* Text section at bottom */
    .txtTeam2 {
      padding: 1.8rem;
      padding-top: 1.8rem;
      background-color: white;
      text-align: center;
      border-bottom-left-radius: 1.2rem;
      border-bottom-right-radius: 1.2rem;
    }
    
    .txtTeam2 h2 {
      font-size: 1.6rem;
      font-weight: 600;
      margin-bottom: 0;
      color: var(--green);
    }
    
    .txtTeam2 h3 {
      font-size: 1.4rem;
      font-weight: 500;
      margin-bottom: 0;
      color: var(--green);
    }
    
    .txtTeam2 p {
      font-size: 1.4rem;
      line-height: 1.4;
      margin-bottom: 1.6rem;
    }
    
    
    /* ASD blocks */
    
    
    .gridASD {
      display: grid;
      grid-template-columns:1fr 1fr;
      gap: 3rem;
      width: 100%; 
      margin-bottom: 4rem;
    }
    
    .itemASD {
      border-radius: 2rem;
      border-style: solid;
      border-width: 2.4px;
      overflow: hidden;
      background-color: var(--midGrey);
      border-color: var(--blue);
      }
    .imgASD {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .itemASD {
            position: relative;
            overflow: hidden;
            cursor: pointer;
          }
          
          .itemASDNot {
            position: relative;
            overflow: hidden;
            cursor: default !important;
          }
    
    
          
    .imgASD, .imgASDNot {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
            background-size: cover;
    
          }
          
          /* .imgASD::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemASD:hover .imgASD::before {
            transform: scale(1.2);
          }
           */
          
          /* .imgASDNot::before {
            display:none
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemASDNot:hover .imgISTNot::before {
            transform: scale(1);
          } */
    
          
    .txtASD {
      padding: 2rem;
      padding-top: 2rem;
    }
    
    .txtASD h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--blue);
    }
    .txtASD h3 {
      font-size: 2rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
      color: var(--blue);
    }
    
    .txtASD p {
      font-size: 1.6rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      color: white;
    }
    .txtASD p strong {
      font-weight: 600;
    }
    
    .txtASD ul {
      font-size: 2rem;
      line-height: 1.2;
      font-weight: 400;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    
    
    }
    
    .txtASD ul li {
      padding-left: 2rem;
      margin-bottom: 0.4rem;
      position: relative;
    }
    
    
    .txtASD ul li:before {
      content: "\2022";
      font-size: 2.6rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 900;
      color: var(--blue);
      top: -0.5rem;
    }
    
    
    /* /ASD blocks */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* case studies list */
    
    .gridCaseList {
      display: grid;
      grid-template-columns:1fr 1fr;
      gap: 3rem;
      width: 100%; 
    }
    
    .itemCaseList {
      border-radius: 2rem;
      border-style: solid;
      border-width: 1.8px;
      border-color: var(--green);
      overflow: hidden;
      background-color: white;
      }
    .imgCaseList {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .itemCaseList {
            position: relative;
            overflow: hidden;
            cursor: pointer;
          }
    
          
    .imgCaseList {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          /* .imgCaseList::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemCaseList:hover .imgCaseList::before {
            transform: scale(1.2);
          } */
          .itemCaseList:hover,
          .itemCaseList.hovered {
          --lightGrey: white;
          }
          
    .txtCaseList {
      padding: 2.6rem;
      padding-bottom: 9rem;
      color: var(--darkGrey);
    }
    .moreAbsolute {
      position: absolute;
      bottom: 3.4rem;
      left: 2.6rem;
    }
    
    .moreCaption {
      position: relative;
      display: block;
      margin-bottom: 1rem;
    
    }
    .moreCaption {
      left: 0 !important;
      top: 0 !important;
    }
    
    .txtCaseList h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
      color: var(--green);
    }
    .txtCaseList p {
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtCaseList p strong {
      font-weight: 600;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .caseDetailImgGrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }
    
    .caseDetailImgLink {
      display: block;
      position: relative;
      overflow: hidden; /* keeps scaling inside */
      aspect-ratio: 7 / 5; /* optional: enforces aspect ratio if you want one */
    }
    
    .caseDetailImg {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
    }
    
    .caseDetailImg::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: inherit;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      transition: transform 0.6s ease;
      transform: scale(1);
      z-index: 0;
    }
    
    /* Scale on hover */
    .caseDetailImgLink:hover .caseDetailImg::before {
      transform: scale(1.2);
    }
    
    /* Magnifier overlay */
    .magnifier {
      position: absolute;
      inset: 0;
      background-image: url(/gfx/magnifier.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 3.6rem;
      background-color: rgba(255,255, 255, 0.75);
      opacity: 0;
      transition: opacity 0.5s ease;
      z-index: 1;
    }
    
    .caseDetailImgLink:hover .magnifier {
      opacity: 1;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    /* testimonials list */
    
    .gridTestimonialList {
      display: grid;
      grid-template-columns:1fr 1fr;
      gap: 3rem;
      width: 100%; 
    }
    
    .itemTestimonialList {
      border-radius: 2rem;
      border-style: solid;
      border-width: 1.8px;
      border-color: var(--green);
      overflow: hidden;
      background-color: white;
      }
    
          
    .txtTestimonialList {
      padding: 2.6rem;
      color: var(--darkGrey);
    }
    
    .txtTestimonialList h2 {
      font-size: 2rem;
      line-height: 1.2;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
      color: var(--green);
      font-style: italic;
    }
    .txtTestimonialList h2::before {
      content:'\201C';
      font-weight: 600;
      font-size: 4rem;
      line-height: 1rem;
      display:inline-block;
      vertical-align: bottom;
      font-style: italic;
      color: var(--darkGrey);
      opacity: 0.3;
    padding-right: 0.5rem;
    }
    .txtTestimonialList h2::after {
      content:'\201D';
      font-weight: 600;
      font-size: 4rem;
      line-height: 1rem;
      display:inline-block;
      vertical-align: bottom;
      font-style: italic;
      color: var(--darkGrey);
      opacity: 0.3;
      padding-left: 0.5rem;
      
    }
    
    .txtTestimonialList p {
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.4rem;
    }
    .txtTestimonialList p strong {
      font-weight: 600;
    }
    .txtTestimonialList .author {
      font-size: 1.4rem;
      line-height: 1.2;
      font-weight: 600;
      margin-bottom: 1.6rem;
    color: var(--green);
      }
    .txtTestimonialList .edited {
        font-size: 1rem;
        line-height: 1;
        font-weight: 400;
        margin-bottom: 1.6rem;
        text-transform: uppercase;
      color: var(--green);
      margin-top: -0.8rem;
        }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* faqs */
    
    
    .faqArea h2 {
      padding-top: 4rem;
      padding-bottom: 2rem;
      color: var(--green);
      padding-left: 0;
      
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 0;
    
    }
    
    
    .revealSet {
      background-color: white;
      border: 1px solid var(--green);
      margin-bottom: 0;
      border-bottom: none;
    }
    
    .revealSet:last-of-type {
      background-color: white;
      border: 1px solid var(--green);
      margin-bottom: 0;
    }
    
    
    .revealSet>.open {
      display: block;
      text-decoration: none;
      transition: all 0.2s linear;
      position: relative;
      border-radius-top-right: 1.4rem;
    }
    
    /* .revealSet>.open .fa {
      position: absolute;
      text-align: left;
      left: 2rem;
      top: 1rem;
      width: 2.4rem;
      height: 2.4rem;
    } */
    
    .ta {
      box-sizing: border-box;
      display: block;
      font-weight: 500;
      font-size: 1.7rem;
      line-height: 120%;
      padding-top: 1rem;
      padding-bottom: 1rem;
      width: 100%;
      color: var(--darkGrey);
      padding-left: 4rem;
      padding-right: 6rem;
    
    
    }
    
    .highLight {
      background-color: var(--lightGrey);
      color: var(--darkGrey);
      transition: all 0.2s ease;
      border-bottom: 1px solid var(--green);
      /* border-left: 0.6rem solid #0F6B4A; */
      padding-left: 4rem;
    
    
    }
    
    .lowLight {
      background-color: white;
      color: var(--darkGrey);
      transition: all 0.2s ease;
      /* border-left: 0.6rem solid white; */
      padding-left: 4rem;
    
    
      /* padding-left: 4rem; */
      /* border-bottom: 1px solid rgb(55, 100, 161); */
    
    }
    
    .revealPlus::before {
      content: "";
      position: absolute;
      transition: all 0.2s ease;
      right: 0;
      top: 0;
      width: 3.7rem;
      height: 100%;
      background-image: url('/gfx/arrowDownGreen.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
      transition: all 0.2s linear;
      border-left: 1px solid var(--green);
    
    
    }
    
    .revealMinus::before {
      content: "";
      position: absolute;
      transition: all 0.2s ease;
      right: 0;
      top: 0;
      width: 3.7rem;
      height: 100%;
      background-image: url('/gfx/arrowUpWhite.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
      border-left: 1px solid var(--green);
      background-color: var(--green);
    
    }
    
    /* .open:hover .fa::before, .open:focus .fa::before {
      background-image: url('/gfx/arrowDownWhite.png');
      background-color: var(--green);
    }
    .open:active .fa::before, .open:active .fa::before {
    
    } */
    /* reveal content */
    .revealContent {
      /* margin-bottom: 2rem; */
      padding: 2rem;
      padding-bottom: 0.3rem;
      padding-left: 4rem;
      padding-right: 6rem;
    
      /* border-bottom: 1px solid #494949; */
    }
    
    .revealContent p {
      font-size: 1.7rem;
    line-height: 1.4;
    font-weight: 400;
    margin-bottom: 1.7rem;
    color: var(--darkGrey);
    }
    
    
    .revealContent ul {
      font-size: 1.7rem;
      line-height: 1.1;
      font-weight: 400;
      margin-bottom: 1.7rem;
      padding-left: 0; /* Remove default padding */
    }
    
    .revealContent ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .revealContent ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      color: var(--green);
      top: -0.4rem;;
    }
    
    .revealContent a, .revealContent a:focus {
      font-weight: 600;
    }
    .revealContent a:hover, .revealContent a:active {
      font-weight: 600;
      margin-bottom: 0.3rem;
      border-bottom: 1px solid var(--darkGrey);
    }
    
    
    .revealContent {
      display: none;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* footer */
    .gridFOOT {
      width: 100%;
    }
    .footerPad {
      padding-top: 4rem;
      padding-bottom: 4rem;
      border-top-color: var(--green);
      border-top-style: solid;
      border-top-width: 3px;
    }
    .footerLogo {
      width: 100%;
      margin-bottom: 3.6rem;
    }
    .footerLogo img {
      height: 4rem;
    }
    
    .phoneTxt a {
      display: block;
      width: 100%;
      color: var(--green);
    }
    
    .phoneTxt a:hover,
    .phoneTxt a:focus  {
      color: white;
    }
    
    .phoneTxt p {
      font-size: 2.4rem;
      line-height: 1.4;
      font-weight: 500;
    }
    .phoneTxt {
      margin-bottom: 3.6rem;
    }
    .addressTxt {
      margin-bottom: 3.6rem;
    }
    .addressTxt p {
      font-size: 1.8rem;
      line-height: 1.3;
      margin-bottom: 0;
      font-weight: 500;
      color: white;
    }
    .registeredTxt {
      margin-bottom: 1.8rem;
    }
    .registeredTxt p {
      font-size: 1.2rem;
      line-height: 1.4;
      margin-bottom: 0;
      font-weight: 400;
      color: white;
    
    }
    .accreditations {
      margin-bottom: 4rem;
    }
    
    .accreditations img {
      max-height: 5.8rem;
      width: auto;
      display: inline-block;
      margin-right: 1.6rem;
      vertical-align: middle;
      margin-bottom: 1.6rem;
    }
    
    .accreditations img:last-child {
      margin-right: 0;
    }
    
    .legalNav {
      margin-bottom: 1.2rem;
    }
    
    .legalNav ul li {
      display: inline-block;
      font-size: 1.5rem;
      line-height: 1.2;
      margin-bottom: 0;
      font-weight: 500;
    
    }
    
    .legalNav ul li a::after {
      content: "/";
      padding-left: 0.35rem;
      padding-right: 0.2rem;
    }
    
    .legalNav ul li:last-child a::after {
      content: "";
      padding: 0;
    }
    
    
    .legalNav ul li a {
      display: block;
      color: white;
    }
    
    .legalNav ul li a:hover, 
    .legalNav ul li a:focus,
    .legalNav ul li a.selected {
      color: var(--green);
    }
    
    
    
    
    .legalSignoff {
      padding-bottom: 4rem;
    }
    
    .legalSignoff p {
      font-size: 1.5rem;
      line-height: 140%;
      margin-bottom: 1.6rem;
      font-weight: normal;
      color: white;
      opacity: 0.7;
    
    }
    
    .siteBy p {
      font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 0.8rem;
    font-weight: 400;
    color: white;
    }
    
    .siteBy a {
      color: white;
    }
    
    .siteBy a:hover,
    .siteBy a:focus {
      color: var(--green);
    }
    
    .socialTxt {
      margin-bottom: 3rem;
    }
    
    .socialTxt h3, .accreditations h3 {
      font-size: 1.8rem;
      line-height: 1.4;
      margin-bottom: 1rem;
      font-weight: 500;
      color: var(--green);
    
    }
    
    .socialTxt ul li {
      padding-left: 0;
    }
    
    .socialTxt ul li::before {
      padding-left: 0;
      display: none;
    }
    
    .socialTxt ul li {
      display: inline-block;
      margin-right: 1.4rem;
    }
    
    
    .socialTxt ul li img {
      max-height: 6rem;
    
    }
    
    .socialTxt ul li a {
      display:block;
      background-color: white;
    }
    
    .socialTxt ul li a:hover,
    .socialTxt ul li a:focus {
      background-color: var(--green);
    
    } 
    
    .copyright p {
      font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 0;
    font-weight: 400;
    color: white;
    }
    
    .copyright a {
      color: white;
    }
    
    .copyright a:hover,
    .copyright a:focus {
      color: var(--green);
    }
    
    
    /* slider */
    .bx-wrapper .bx-prev {
      left: 2rem;
    }
    .bx-wrapper .bx-next {
      right: 2rem;
    }
    .bx-wrapper .bx-controls-direction a {
      position: absolute;
      top: 50%;
      margin-top: -2.2rem;
      outline: 0;
      width: 4.4rem;
      height: 4.4rem;
      text-indent: -9999px;
      z-index: 9999;
    }
    
    
    .bx-wrapper {
      position: relative;
      margin-bottom: 0;
      padding: 0;
      *zoom: 1;
      -ms-touch-action: pan-y;
      touch-action: pan-y;
    }
    .bx-wrapper img {
      max-width: 100%;
      display: block;
    }
    .bxslider {
      margin: 0;
      padding: 0;
      /*fix flickering when used background-image instead of <img> (on Chrome)*/
      -webkit-perspective: 1000;
    }
    ul.bxslider {
      list-style: none;
    }
    .bx-viewport {
      /* fix other elements on the page moving (in Chrome) */
      -webkit-transform: translateZ(0);
    }
    /** THEME
    ===================================*/
    .bx-wrapper {
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      border: none;
      background: transparent;
      position: relative;
    }
    
    /* LOADER */
    .bx-wrapper .bx-loading {
      min-height: 64px;
      background: url('/gfx/loading.webp') center center no-repeat;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 90;
    }
    /* PAGER */
    
    /* DIRECTION CONTROLS (NEXT / PREV) */
    
    .onWhite .bx-prev {
      background-image: url('/gfx/arrowLeftDarkGrey.png');
      border-color: var(--darkGrey);
      background-color: rgba(255,255,255,0.6);
    }
    .onWhite .bx-next {
      background-image: url('/gfx/arrowRightDarkGrey.png');
      border-color: var(--darkGrey);
      background-color: rgba(255,255,255,0.5);
    }
    .onWhite .bx-prev:hover,
    .onWhite .bx-prev:focus {
      background-color: var(--orange);
      background-image: url('/gfx/arrowLeftWhite.png');
      border-color: white;
    }
    .onWhite .bx-next:hover,
    .onWhite .bx-next:focus {
      background-color: var(--orange);
      background-image: url('/gfx/arrowRightWhite.png');
      border-color: white;
    }
    
    .onDark .bx-prev {
      background-image: url('/gfx/arrowLeftWhite.png');
      border-color: white;
      /* background-color: rgba(255,255,255,0.5); */
    }
    .onDark .bx-next {
      background-image: url('/gfx/arrowRightWhite.png');
      border-color: white;
      background-color: rgba(0,0,0,0.5);
    }
    .onDark .bx-prev:hover,
    .onDark .bx-prev:focus {
      background-color: var(--orange);
      background-image: url('/gfx/arrowLeftWhite.png');
      border-color: white;
    }
    .onDark .bx-next:hover,
    .onDark .bx-next:focus {
      background-color: var(--orange);
      background-image: url('/gfx/arrowRightWhite.png');
      border-color: white;
    }
    
    
    
    /* DIRECTION CONTROLS (NEXT / PREV) */
    
    .onGreen .bx-prev {
      background-image: url('/gfx/arrowLeftDarkGrey.png');
      border-color: var(--darkGrey);
      background-color: rgba(255,255,255,0.6);
    }
    .onGreen .bx-next {
      background-image: url('/gfx/arrowRightDarkGrey.png');
      border-color: var(--darkGrey);
      background-color: rgba(255,255,255,0.5);
    }
    .onGreen .bx-prev:hover,
    .onGreen .bx-prev:focus {
      background-color: var(--green);
      background-image: url('/gfx/arrowLeftWhite.png');
      border-color: white;
    }
    .onGreen .bx-next:hover,
    .onGreen .bx-next:focus {
      background-color: var(--green);
      background-image: url('/gfx/arrowRightWhite.png');
      border-color: white;
    }
    
    
    
    
    
    
    
    
    
    
    
    /* contact */
    
    .contactContainer {
      width: 100%;
    }
    
    
    .contactGrid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4rem;
    }
    
    
    .contactTxt h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green);
    
    }
    .contactTxt h3 {
      font-size: 2rem;
      line-height: 1.1;
      font-weight: 500;
      margin-bottom: 1.7rem;
      color: var(--green);
    
    }
    .contactTxt p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.7rem;
    }
    .contactTxt p strong {
      font-weight: 600;
    }
    
    
    .contactTxt {
      margin-bottom: 4rem;
    }
    
    
    .contactTxt p a, .contactTxt p a:active{
      font-weight: 600;
      color: var(--darkGrey);
    
    }
    .contactTxt p a:hover,   .contactTxt p a:focus {
      color: var(--green)
    }
    
    
    
    .google-maps {
      position: relative;
      padding-bottom: 125%; // This is the aspect ratio
      overflow: hidden;
      margin-top: 6rem;
      border: 1.2px solid var(--green);
    }
    
    .google-maps iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 100% !important;
    }
    
    
    
    
    
    
    
    
    
    .bx-wrapper .bx-prev,
    .bx-wrapper .bx-next {
      display: block;
      border-style: solid;
      border-width: 1.4px;
      border-radius: 0.6rem;
      width: 4.4rem;
      height: 4.4rem;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      position: absolute;
    
      /* top: calc(50% - 2.4rem); */
    }
    .bx-wrapper .bx-prev {
      left: 3rem;
    }
    .bx-wrapper .bx-next {
      right: 3rem;
    }
    .bx-wrapper .bx-controls-direction a {
      position: absolute;
      top: 2rem;
      margin-top: 0rem;
      outline: 0;
      width: 4.4rem;
      height: 4.4rem;
      text-indent: -9999px;
      z-index: 90;
    }
    .bx-wrapper .bx-controls-direction a.disabled {
      display: none;
    }
    
    .bx-wrapper .bx-prev.disabled,
    .bx-wrapper .bx-next.disabled {
      display: none;
    }
    
    
    
    
    /* 11022026 home slider */
    
    .explore { z-index: 50;}
    
    
    
    /* PAGER */
    .onNeutral .bx-pager {
      text-align: left;
      font-size: .85em;
      font-family: Arial;
      font-weight: bold;
      color: white;
      padding-top: 0;
      position: absolute;
      bottom: 4.8rem;
    }
    
    .onNeutral .bx-pager {
      max-width: 128rem;
      padding-left: 12rem;
      padding-right: 6rem;
      margin-left: auto;
      margin-right: auto;
    }
    .onNeutral .bx-pager.bx-default-pager a {
      background-color:white;
      text-indent: -9999px;
      display: block;
      width: 16px;
      height: 16px;
      margin: 0 8px;
      outline: 0;
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      border-radius: 8px;
    }
    .onNeutral .bx-pager.bx-default-pager a:hover,
    .onNeutral .bx-pager.bx-default-pager a.active,
    .onNeutral .bx-pager.bx-default-pager a:focus {
      background-color: var(--green);
    }
    .onNeutral .bx-pager-item,
    .onNeutral .bx-controls-auto .bx-controls-auto-item {
      display: inline-block;
      vertical-align: bottom;
      *zoom: 1;
      *display: inline;
    }
    .onNeutral .bx-pager-item {
      font-size: 0;
      line-height: 0;
    }
    
    .onNeutral .bx-prev,
    .onNeutral .bx-next {
      display: block;
      border-style: solid;
      border-width: 1.4px;
      border-radius: 0.6rem;
      width: 4.4rem;
      height: 4.4rem;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      position: absolute;
    
      /* top: calc(50% - 2.4rem); */
    }
    .onNeutral .bx-prev {
     left: 6rem;
    }
    .onNeutral .bx-next {
    right: 6rem;
    }
    .onNeutral .bx-controls-direction {
    }
    .onNeutral .bx-controls-direction a {
      outline: 0;
      width: 4.4rem;
      height: 4.4rem;
      text-indent: -9999px;
      z-index: 90;
      bottom: 3.4rem !important;
      top: unset;
    }
    .onNeutral .bx-controls-direction a.disabled {
      display: none;
    }
    
    .onNeutral .bx-prev.disabled,
    .onNeutral .bx-next.disabled {
      display: none;
    }
    
    .videoHomeBg video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .videoHomeBg {
      position: relative;
      width: 100%;
      height: 100%;
    }
    
    
    /* Make the bx-viewport relative so bottom:0 works */
    .bx-wrapper .bx-viewport {
      position: relative;
      overflow: hidden;
    }
    
    /* Position the explore button relative to the viewport */
    .HeroSliderContainer .explore {
      position: absolute;
      bottom: 0;          /* sticks to the bottom of the viewport */
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
    }
    
    .HeroSliderContainer .explore {
      margin: 0;
      padding: 0;
    }
    
    .heroTxtContainer {
      z-index: 5; /* above .videoMaskBg */
      pointer-events: auto; /* ensure text is selectable */
    }
    
    /* Buttons themselves */
    .more {
      z-index: 6; /* above everything inside the container */
      pointer-events: auto;
    }
    
    .videoHomeImg {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    }
    
    .onNeutral .bx-prev {
      background-image: url('/gfx/arrowLeftDarkGrey.png');
      border-color: white;
      background-color: rgba(255,255,255,0.6);
    }
    .onNeutral .bx-next {
      background-image: url('/gfx/arrowRightDarkGrey.png');
      border-color: white;
      background-color: rgba(255,255,255,0.5);
    }
    .onNeutral .bx-prev:hover,
    .onNeutral .bx-prev:focus {
      background-color: var(--green);
      background-image: url('/gfx/arrowLeftWhite.png');
      border-color: white;
    }
    .onNeutral .bx-next:hover,
    .onNeutral .bx-next:focus {
      background-color: var(--green);
      background-image: url('/gfx/arrowRightWhite.png');
      border-color: white;
    }
    
    
    /* image annotation */
    
    
    .numberSurround {
      position: relative;
      display: inline-block;
    }
    /* number Roundel */
    .numberRoundel {
      position:relative;
      display:block;
      width: 3.4rem;
      height: 3.4rem;
      /* Background-color: var(--blue); */
      border-radius: 1.7rem;
      border: solid 0.1rem white;
      font-size: 2.2rem;
      font-weight: 600;
      line-height: 1;
      padding-top: 0.6rem;
      padding-bottom: 0.6rem;
      text-align: center;
      color:white;
      z-index: 20;
    }
    
    .captionReveal {
      display: block;
      font-size: 1.4rem;
      font-weight: 400;
      line-height: 1.2;
      padding-left: 1.8rem;
      padding-right: 1.6rem;
      padding-top: 1.4rem;
      padding-bottom: 1.6rem;
      background-color: black;
      color:white;
      position:absolute;
      left: 1.7rem;
      top: 1.7rem;
      z-index: 10;
      border: solid 0.1rem white;
      min-width: 10rem;
      max-width: 18rem;
      opacity:0;
      transition:
          opacity 0.25s ease,
          transform 0.25s ease;
          border-radius: 1.7rem;
          cursor: default;
          border-bottom-right-radius: unset;
      }
    
    .numberRoundel:hover + .captionReveal {
        opacity: 0.85;
      }
    .numberRoundel {
        cursor: pointer;
        transition: transform 0.15s ease;
      }
      
      .numberRoundel:hover {
        transform: scale(1.15);
      }
      
      .imgKeyArea {
        width: 72.8rem;
        margin-left: auto;
        margin-right: auto;
        padding-top: 3.4rem;
        padding-bottom: 3.4rem;
      }
      .keyTxtP {
        font-size: 1.9rem;
        font-weight: 500;
        line-height: 1.2;
        padding-bottom: 1.2rem;
        margin:0;
        color:white;
      }
      .keyNum {
        position:relative;
        display:inline-block;
        width: 3.4rem;
        height: 3.4rem;
        /* Background-color: var(--blue); */
        border-radius: 1.7rem;
        border: solid 0.1rem white;
        font-size: 2.2rem;
        font-weight: 600;
        line-height: 1;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
        text-align: center;
        color:white;
        margin-right: 1rem;
      }
      .keyTxtA, .keyTxtB {
          color:white;
        }
        
        .keyBlock {
          column-count: 2;
          column-gap: 2rem;
        }
        
        .keyBlock p {
          break-inside: avoid;
        }
      .keyTxtA:hover {
          color:var(--blue);
        }
        .keyTxtB:hover {
          color:var(--green);
        }
      
        .keyTxtA:hover .keyNum,   .keyTxtB:hover .keyNum {
          Background-color: black;
        }
        
      
      
      
      
      
      .videoStdContainer {
        position: relative;
        width: 100vw;
        padding-top: 54%;
        /* 16:9 aspect ratio (9/16 = 0.5625) */
        overflow: hidden;
      }
      
      /* Video fills the container and scales responsively */
      .videoStdBg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Ensures video fills container proportionally */
        z-index: -1;
        pointer-events: none;
        /* Prevents video from interfering with interaction */
      }
      
      .videoStdBg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Ensures video fills container proportionally */
        z-index: 2;
        pointer-events: none;
        /* Prevents video from interfering with interaction */
      }
      
      
      .stdTxtContainer {
        width: 100%;
        z-index: 10;
        position: absolute;
        bottom: 0;
        left: 0;
      }
      
      
      .stdTxt {
        padding-bottom: 12rem;
        width: 100%;
      }
      .stdTxt h1 {
        text-transform: uppercase;
        font-size: 3.6rem;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 2rem;
        color:white;
        padding-right: 50%;
      }
      .stdTxtASD h1 {
        color: var(--blue);
      }
      .stdTxt p {
        font-size: 2.4rem;
        font-weight: 500;
        line-height: 1.2;
        margin-bottom: 2rem;
        color:white;
        padding-right: 50%;
      
      }
      .stdExplore {
        display: block;
        width: 10rem;
        height: 6rem;
        border-top-left-radius: 0.8rem;
        border-top-right-radius: 0.8rem;
        background-color: var(--green);
        position: absolute;
        left: calc(50% - 5rem);
        bottom: 0;
        padding: 1.4rem;
      }
      .stdExploreASD {
        background-color: var(--blue);
      }
      
      
      .stdExploreActive, .stdExplore:hover {
        background-color: var(--midGrey) !important;
      }
      .stdExploreTxt {
        width: 100%;
        text-align: center;
        text-transform: uppercase;
        font-size: 1.2rem;
        font-weight: 500;
        line-height: 1;
        color: white;
        margin-bottom: 0.6rem;
      }
      .stdExploreImg {
        width: 3rem;
        height: auto;
        margin-left: auto;
        margin-right: auto;
      }
      .stdExploreImg img {
        width: 100%;
        height: auto;
      }
    .imgABC {
        position: relative;
        padding-bottom: 56.5%;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
      }
    
    
    
    .inner99MinusPad
     {
      max-width:128rem;
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-left: auto;
      margin-right: auto;
    }
    
    
    
    
    /* new 25/08/2026 */
    .share-strip {
      --share-icon-size: 4rem;
      --share-gap: 0;
      padding-top: 2rem;
      padding-bottom: 1rem;
    }
    
    .share-strip__heading {
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 600;
    margin-bottom: 0.8rem;
    padding-left: 0.4rem;
    color: var(--green);
    }
    
    .share-strip__list {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      /* gap: var(--share-gap); */
      margin: 0;
      padding: 0;
    }
    
    /* Reset the link/button back to a plain icon-sized hit target — no box. */
    .share-strip__link {
      display: inline-flex;
      background: none;
      border: none;
      padding: 0;
      margin: 0;
      line-height: 0;
      cursor: pointer;
      border-radius: 4px; /* shapes the focus outline only, not a visible box */
    }
    
    .share-strip__icon-wrap {
      position: relative;
      display: block;
      width: var(--share-icon-size);
      height: var(--share-icon-size);
    }
    
    .share-strip__icon {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain; /* proportional, never distorted */
      transition: opacity 0.12s ease;
      opacity: 0.5;
    }
    
    .share-strip__icon--hover {
      opacity: 0;
    }
    
    .share-strip__link:hover .share-strip__icon--normal,
    .share-strip__link:focus-visible .share-strip__icon--normal {
      opacity: 0;
    }
    
    .share-strip__link:hover .share-strip__icon--hover,
    .share-strip__link:focus-visible .share-strip__icon--hover {
      opacity: 1;
    }
    
    /* .share-strip__link:focus-visible {
      outline: 3px solid var(--share-focus-color);
      outline-offset: 3px;
    } */
    
    .share-strip__feedback {
      margin: 0.75rem 0 0;
      font-size: 0.85rem;
      min-height: 1.2em;
    }
    
    
    
    
    /* blog new css */
    
    /* =========================================================
     BLOG LIST
     Dedicated styles - does not affect Case List
     ========================================================= */
    
    .blogList {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    width: 100%;
    }
    
    .blogListItem {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 3.1fr 4.2rem;
    align-items: center;
    gap: 3rem;
    width: 100%;
    border-radius: 2rem;
    border-style: solid;
    border-width: 1.8px;
    border-color: var(--green);
    overflow: hidden;
    background-color: white;
    cursor: pointer;
    }
    
    
    /* =========================================================
     IMAGE
     ========================================================= */
    
    .blogListImage {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: 67%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    }
    
    .blogListImage.plusBorder {
    border-right: 1px solid var(--green);
    }
    
    
    /* =========================================================
     TEXT
     ========================================================= */
    
    .blogListText {
    color: var(--darkGrey);
    padding: 0 !important;
    margin-bottom: 0;
    }
    
    .blogListText h2 {
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 600;
    text-transform: none;
    margin-bottom: 1.4rem;
    color: var(--green);
    }
    
    .blogListText p {
    font-size: 1.6rem;
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 0;
    }
    
    .blogListText p strong {
    font-weight: 600;
    }
    
    
    /* =========================================================
     DESKTOP / TABLET ARROW
     ========================================================= */
    
    .blogListLink {
    display: block;
    width: 4.2rem;
    height: 100%;
    border-left: 1px solid var(--green);
    background-image: url('/gfx/arrowRightGreen.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    }
    
    .blogListLink:hover,
    .blogListLink.hovered {
    border-left: 1px solid var(--green);
    background-color: var(--green);
    background-image: url('/gfx/arrowRightWhite.png');
    }
    
    
    /* =========================================================
     ORIGINAL MORE BUTTON
     Hidden on desktop/tablet
     ========================================================= */
    
    .blogListMoreBlock {
    display: none;
    }
    
     /* end blog new css */
    
    /* ----- */
    .blogTxt h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.4rem;
      color: var(--green);
    }
    
    .blogTxt h3 {
      font-size: 1.8rem;
      line-height: 1.1;
      font-weight: 500;
      margin-bottom: 1.7rem;
      margin-top: 3.4rem;
    }
    
    .blogTxt h3:first-of-type {
        margin-top: 0;
    }
    
    .blogTxt p {
      font-size: 1.6rem;
      line-height: 1.5;
      font-weight: 400;
      margin-bottom: 1.2rem;
    }
    .blogTxt p strong {
      font-weight: 600;
    }
    .blogTxt ul {
      font-size: 1.6rem;
      line-height: 1.2;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    
    
    }
    
    .blogTxt ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .blogTxt ul li:before {
      content: "\2022";
      font-size: 1.8rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      color: var(--green);
      top: -0.2rem;
    }
    
    .blogVidGrid {
      display: grid;
      grid-template-columns:1fr 1fr;
      align-items: center;
      gap: 3rem;
      width: 100%; 
    }
    
    .blogVideoWrapper {
      position: relative;
      width: 100%;
      /* max-width: 800px; */
      margin: 0 auto;
      padding-top: 56.25%;
      /* 16:9 */
      background: var(--lightGrey);
      overflow: hidden;
    }
    
    .blogVideo {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
}


/* ==================================================
   tabletPlus.css
   ================================================== */

@media (min-width: 1024px) and (max-width: 1199px) {
    /* html, body { font-size: 10px; } */
    /* Scaling System */
     html, body { font-size: 10px; }
    
    .desktop {
      display: none;
    }
    .smart {
      display: none;
    }
    .tablet {
      display: block;
    }
    
    
    .flexCentreCentre {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .flexLeftTop {
      display: flex;
      justify-content: left;
      align-items: top;
    }
    
    .flexLeftCentre {
      display: flex;
      justify-content: left;
      align-items: center;
    }
    
    .flexLeftBottom {
      display: flex;
      justify-content: left;
      align-items: bottom;
    }
    
    .flexRightTop {
      display: flex;
      justify-content: right;
      align-items: top;
    }
    
    .flexRightCentre {
      display: flex;
      justify-content: right;
      align-items: center;
    }
    
    .flexRightBottom {
      display: flex;
      justify-content: right;
      align-items: bottom;
    }
    .headerOffset {
      width: 100%;
      background-color: var(--darkGrey);
      height: 7.2rem;
    }
    
    
    /* smart menu */
    
    #menu-container {
      position:absolute;
      right:0;
      top:0;
    }
    #menu-wrapper {
      overflow: hidden;
      max-width: 9.4rem;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    
      /* background-color: rgb (225, 232, 241); */
    }
    
    #menu-wrapper #hamburger-menu {
      position: relative;
      width:3rem;
      height: 2.8rem;
      margin: 2.6rem;
      margin-top: 2.2rem;
      margin-bottom: 2.2rem;
    }
    
    #menu-wrapper #hamburger-menu .x {
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      left: 0;
      display: block;
      width: 100%;
      height: 0.3rem;
      border-radius: 1rem;
      background-color:  var(--green);
      position: absolute;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .4s ease-in-out;
      transition: .4s ease-in-out;
    }
    
    #menu-wrapper #hamburger-menu .x:nth-child(1) {
      top: 0;
    }
    
    #menu-wrapper #hamburger-menu .x:nth-child(2) {
      top: 1.2rem;
    }
    
    #menu-wrapper #hamburger-menu .x:nth-child(3) {
      top: 2.4rem;
    }
    
    #menu-wrapper #hamburger-menu.open .x:nth-child(1) {
      background-color: white;
      top: 1.2rem;
      -webkit-transform: rotate(135deg);
      transform: rotate(135deg);
    }
    
    #menu-wrapper #hamburger-menu.open .x:nth-child(2) {
      background-color: white;
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      right: -60px;
    }
    
    #menu-wrapper #hamburger-menu.open .x:nth-child(3) {
      background-color: white;
      top: 1.2rem;
      -webkit-transform: rotate(-135deg);
      transform: rotate(-135deg);
    }
    #menu-container .menu-list {
      padding-left: 0;
      display: block;
      position: absolute;
      width: 37rem;
      z-index: 9999;
      overflow-y: auto;
      overflow-x: hidden;
      right: -37rem;
      /* border-left: 1px solid white;
      border-bottom: 1px solid white; */
    }
    
    .liMain {
      font-size:2.2rem;
      line-height: 2;	
      text-transform: uppercase;
      font-weight: 500;
    
    }
    .liSub {
      font-size:2rem;
      line-height: 1.6;	
      text-transform: none;
      font-weight: 500;	
      
    }
    
    .liMain .aMain {
      position: relative;
      display:block;
      width:100%;
      color:white;
      border-top: 1px solid white;
      padding-left: 3.7rem;
    
    }
    .liSub .aSub {
      display:block;
      width:100%;
      color:black;
      padding-left: 3.7rem;
    }
    .liSub:last-of-type .aSub {
      padding-bottom: 1rem;
    }
    .liSub:first-of-type .aSub {
      padding-top: 1rem;
    }
    
    
    
    .revealContentNav {
      display: none;
    }
    
    
    
    
    
    .openNav {
      transition: all 0.2s linear;
      position: relative;
    }
    
    .openNav .faNav {
      position: absolute;
      text-align: left;
      left: 0;
      top: 0;
    }
    
    .revealPlusNav::before {
      content: "";
      position: absolute;
      transition: all 0.2s ease;
      left: 0;
      top: 0;
      width: 3rem;
      height: 4.5rem;
      background-image: url('/gfx/arrowDownWhite.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
      transition: all 0.2s linear;
      border-left: 1px solid var(--green);
    }
    
    .revealMinusNav::before {
      content: "";
      position: absolute;
      transition: all 0.2s ease;
      left: 0;
      top: 0;
      width: 3rem;
      height: 4.5rem;
      background-image: url('/gfx/arrowUpWhite.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
      border-left: 1px solid var(--green);
    }
    
    .headerSmart {
      width: 100%;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-left: auto;
      margin-right: auto;
      position:relative;
    }
    
    .headerSmartFixed {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 200;
      background-color: black;
    }
    
    .headerSmart  .logo {
      height: 7.2rem;
      float: left;
      padding-bottom: 1.6rem;
      padding-top:1.6rem;
    }
    
    .headerSmart .logo img {
      height: 100%;
      width: auto;
    }
    
    .blackBg {
      background-color: black;
    }
    .lightGreyBg {
      background-color: var(--lightGrey);
    }
    
    
    .fatLineOuter {
      position: relative;
      width: 4px;
      border-left: 1.5px solid #aaaaaa;
      margin-top: 6rem;
      height: calc(100% -18rem);
      margin-bottom: 12rem;
    }
    
    
    .fatLineInner {
      position: absolute;
      top: 25%;
      left: -1.5px;   
      width: 4px; 
      height: 50%; 
      background: var(--green); 
      z-index: 10;
    }
    .container {
     width: 100%;
    }
    /* .inner66 {
      max-width:128rem;
      padding-left: 0;
      padding-right: 0;
      margin-left: auto;
      margin-right: auto;
    } */
    
    .inner66 {
      max-width:128rem;
      padding-left: 4rem;
      padding-right: 4rem;
      margin-left: auto;
      margin-right: auto;
    }
    .inner60 {
      max-width:128rem;
      padding-left: 4rem;
      padding-right: 0;
      margin-left: auto;
      margin-right: auto;
    
    }
    .inner06 {
      max-width:128rem;
      padding-left: 0;
      padding-right: 4rem;
      margin-left: auto;
      margin-right: auto;
    
    }
    .inner40 {
      max-width:128rem;
      padding-left: 2rem;
      padding-right: 0;
      margin-left: auto;
      margin-right: auto;
    
    }
    
    .inner44 {
      max-width:128rem;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-left: auto;
      margin-right: auto;
    
    }
    .inner33 {
      max-width:128rem;
      padding-left: 3rem;
      padding-right: 3rem;
      margin-left: auto;
      margin-right: auto;
    
    }
    
    .inner99 {
      max-width:128rem;
      padding-left: 5rem;
      padding-right: 5rem;
      margin-left: auto;
      margin-right: auto;
    }
    .inner22 {
      max-width:128rem;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-left: auto;
      margin-right: auto;
    }
    
    .inner09 {
      max-width:128rem;
      padding-left: 0;
      padding-right: 5rem;
      margin-left: auto;
      margin-right: auto;
    }
    .inner90 {
      max-width:128rem;
      padding-left: 5rem;
      padding-right: 0;
      margin-left: auto;
      margin-right: auto;
    }
    
    .inner1212 {
      max-width:128rem;
      padding-left: 8rem;
      padding-right: 8rem;
      margin-left: auto;
      margin-right: auto;
    }
    
    .pt6 {
      padding-top: 5rem;
    }
    .pb6 {
      padding-bottom: 5rem;
    }
    .pt4{
      padding-top: 3rem;
    }
    .pb4 {
      padding-bottom: 3rem;
    }
    .pt3 {
      padding-top: 2rem;
    }
    
    .pb3 {
      padding-bottom: 2rem;
    }
    .pt2 {
      padding-top: 1rem;
    }
    .pb2 {
      padding-bottom: 1rem;
    }
    .pt0 {
      padding-top: 0;
    }
    .pb0 {
      padding-bottom: 0;
    }
    
    
    
    
    .txtBlock {
      padding-left: 2rem;
    }
    .more {
      font-size: 1.7rem;
      line-height: 1;
      font-weight: 500;
    }
    .moreMini {
      font-size: 1.4rem;
      line-height: 1;
      font-weight: 500;
    }
    
    .mb4 {
      margin-bottom: 2rem !important;
    }
    .moreBlock {
      display:block;
      padding-right: 0 !important;
    }
    .moreButton {
      display:inline-block;
      padding: 1.2rem;
      padding-left: 1.8rem;
      padding-right: 1.8rem;
      border-style: solid;
      border-width: 1px;
      border-top-left-radius: 0.8rem;
      border-bottom-left-radius: 0.8rem;
      cursor: pointer;
    }
    .moreBesides {
      display: inline-block;
      width: 4.1rem;
      padding:1.2rem;
      border-style: solid;
      border-width: 1px;
      border-left: none;
      border-top-right-radius: 0.8rem;
      border-bottom-right-radius: 0.8rem;
      cursor: pointer;
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
    }
    
    .lessButton {
      display:inline-block;
      padding: 1.2rem;
      padding-left: 1.8rem;
      padding-right: 1.8rem;
      border-style: solid;
      border-width: 1px;
      border-top-right-radius: 0.8rem;
      border-bottom-right-radius: 0.8rem;
      cursor: pointer;
    }
    .lessBesides {
      display: inline-block;
      width: 4.1rem;
      padding:1.2rem;
      border-style: solid;
      border-width: 1px;
      border-right: none;
      border-top-left-radius: 0.8rem;
      border-bottom-left-radius: 0.8rem;
      cursor: pointer;
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
    }
    
    
    .moreButtonMini {
      display:inline-block;
      padding: 1.05rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      border-style: solid;
      border-width: 1px;
      border-top-left-radius: 0.5rem;
      border-bottom-left-radius: 0.5rem;
      cursor: pointer;
    }
    .moreBesidesMini {
      display: inline-block;
      width: 3.8rem;
      padding: 1.05rem;
      border-style: solid;
      border-width: 1px;
      border-left: none;
      border-top-right-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;
      cursor: pointer;
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
    }
     .sideBySide {
       display: inline-block;
       vertical-align: middle;
       margin-right: 4rem;
     }
     .sideBySidePlus {
        display: inline-block;
        vertical-align: middle;
        margin-right: 6rem;
      }
     
     .sideBySide:last-of-type, .sideBySidePlus:last-of-type {
        margin-right: 0;
      }
    
    
    
    
          
          /* new buttons */
          
          .moreButton10111211 {
             border-color: white;
             color:white;
           }
          .moreBesides10111211 {
           border-color: white;
            background-image: url('/gfx/arrowRightWhite.png');
           }
          
           .more:hover .moreButton10111211,
           .more.hovered .moreButton10111211 {
            border-color: white;
            background-color: var(--green);
            color:white;
            }
          .more:hover .moreBesides10111211,
           .more.hovered .moreBesides10111211{
             border-color: white;
             color:white;
             background-color: var(--green);
              background-image: url('/gfx/arrowRightWhite.png');
             }
             
           /* ++++++++++ */
           
           .moreButton52552511 {
              border-color: var(--darkGrey);
              background-color: var(--green);
              color: var(--darkGrey);
            }
           .moreBesides52552511 {
              border-color: var(--darkGrey);
             background-image: url('/gfx/arrowRightDarkGrey.png');
             background-color: var(--green);
            }
           
            .more:hover .moreButton52552511,
            .more.hovered .moreButton52552511 {
             border-color: var(--green);
             background-color: var(--darkGrey);
             color:white;
             }
           .more:hover .moreBesides52552511,
            .more.hovered .moreBesides52552511 {
             border-color: var(--green);
              color:white;
             background-color: var(--darkGrey);
               background-image: url('/gfx/arrowRightWhite.png');
              }
              
      /* ++++++++++ */
       
       .moreButton52552522 {
          border-color: var(--darkGrey);
          background-color: var(--green);
          color: var(--darkGrey);
        }
       .moreBesides52552522 {
          border-color: var(--darkGrey);
         background-image: url('/gfx/arrowRightDarkGrey.png');
         background-color: var(--green);
        }
       
        .more:hover .moreButton52552522,
        .more.hovered .moreButton52552522 {
         border-color: var(--green);
         background-color: var(--darkGrey);
         color:var(--green);
         }
       .more:hover .moreBesides52552522,
        .more.hovered .moreBesides52552522 {
         border-color: var(--green);
          color:var(--green);
         background-color: var(--darkGrey);
           background-image: url('/gfx/arrowRightGreen.png');
          }
          
      
      /* ++++++++++ */
       
       .moreButton10113313 {
          border-color: white;
          background-color: transparent;
          color: white;
        }
       .moreBesides10113313 {
          border-color: white;
         background-image: url('/gfx/arrowRightWhite.png');
         background-color: transparent;
        }
       
        .more:hover .moreButton10113313,
        .more.hovered .moreButton10113313 {
         border-color: var(--blue);
         background-color: white;
         color:var(--blue);
         }
       .more:hover .moreBesides10113313,
        .more.hovered .moreBesides10113313 {
         border-color: var(--blue);
          color:var(--blue);
         background-color: white;
           background-image: url('/gfx/arrowRightBlue.png');
          }
          
      
              
      /* ++++++++++ */
       
       .moreButton53553511 {
          border-color: var(--darkGrey);
          background-color: var(--blue);
          color: var(--darkGrey);
        }
       .moreBesides53553511 {
          border-color: var(--darkGrey);
         background-image: url('/gfx/arrowRightDarkGrey.png');
         background-color: var(--blue);
        }
       
        .more:hover .moreButton53553511,
        .more.hovered .moreButton53553511 {
         border-color: var(--blue);
         background-color: var(--darkGrey);
         color:white;
         }
       .more:hover .moreBesides53553511,
        .more.hovered .moreBesides53553511 {
         border-color: var(--blue);
          color:white;
         background-color: var(--darkGrey);
           background-image: url('/gfx/arrowRightWhite.png');
          }
      /* ++++++++++ */
       
       .moreButton53553533 {
          border-color: var(--darkGrey);
          background-color: var(--blue);
          color: var(--darkGrey);
        }
       .moreBesides53553533 {
          border-color: var(--darkGrey);
         background-image: url('/gfx/arrowRightDarkGrey.png');
         background-color: var(--blue);
        }
       
        .more:hover .moreButton53553533,
        .more.hovered .moreButton53553533 {
         border-color: var(--blue);
         background-color: var(--darkGrey);
         color:var(--blue);
         }
       .more:hover .moreBesides53553533,
        .more.hovered .moreBesides53553533 {
         border-color: var(--blue);
          color:var(--blue);
         background-color: var(--darkGrey);
           background-image: url('/gfx/arrowRightBlue.png');
          }
        
            /* ++++++++++ */
    
      
             .moreButton10112122 {
                border-color: white;
                color:white;
              }
             .moreBesides10112122 {
              border-color: white;
               background-image: url('/gfx/arrowRightWhite.png');
              }
             
              .more:hover .moreButton10112122,
              .more.hovered .moreButton10112122 {
               border-color: var(--green);
               background-color: white;
               color:var(--green);
               }
             .more:hover .moreBesides10112122,
              .more.hovered .moreBesides10112122{
                border-color: var(--green);
                color: var(--green);
                background-color: white;
                 background-image: url('/gfx/arrowRightGreen.png');
                }
                
             
       /* ++++++++++ */
          
             .moreButton10111311 {
                border-color: white;
                color:white;
              }
             .moreBesides10111311 {
              border-color: white;
               background-image: url('/gfx/arrowRightWhite.png');
              }
             
              .more:hover .moreButton10111311,
              .more.hovered .moreButton10111311 {
               border-color: white;
               background-color: var(--blue);
               color:white;
               }
             .more:hover .moreBesides10111311,
              .more.hovered .moreBesides10111311{
                border-color: white;
                color:white;
                background-color: var(--blue);
                 background-image: url('/gfx/arrowRightWhite.png');
                }
    
      /* ++++++++++ */
             
             .moreButton30331311 {
                border-color: var(--blue);
                color:var(--blue);
              }
             .moreBesides30331311 {
              border-color: var(--blue);
               background-image: url('/gfx/arrowRightBlue.png');
              }
             
              .more:hover .moreButton30331311,
              .more.hovered .moreButton30331311 {
               border-color: white;
               background-color: var(--blue);
               color:white;
               }
             .more:hover .moreBesides30331311,
             .more.hovered .moreBesides30331311 {
                border-color: white;
                color:white;
                background-color: var(--blue);
                 background-image: url('/gfx/arrowRightWhite.png');
                }
      /* ++++++++++ */
                 
                 .moreButton50551211 {
                    border-color: var(--darkGrey);
                    color:var(--darkGrey);
                  }
                 .moreBesides50551211 {
                  border-color: var(--darkGrey);
                   background-image: url('/gfx/arrowRightDarkGrey.png');
                  }
                 
                  .more:hover .moreButton50551211,
                  .more.hovered .moreButton50551211 {
                   border-color: white;
                   background-color: var(--green);
                   color:white;
                   }
                 .more:hover .moreBesides50551211,
                 .more.hovered .moreBesides50551211 {
                    border-color: white;
                    color:white;
                    background-color: var(--green);
                     background-image: url('/gfx/arrowRightWhite.png');
                    }
                    
      /* ++++++++++ */
       
       .moreButton20221211 {
          border-color: var(--green);
          color:var(--green);
        }
       .moreBesides20221211 {
        border-color: var(--green);
         background-image: url('/gfx/arrowRightGreen.png');
        }
       
        .more:hover .moreButton20221211,
        .more.hovered .moreButton20221211 {
         border-color: white;
         background-color: var(--green);
         color:white;
         }
       .more:hover .moreBesides20221211,
       .more.hovered .moreBesides20221211 {
          border-color: white;
          color:white;
          background-color: var(--green);
           background-image: url('/gfx/arrowRightWhite.png');
          }
                    /* ++++++++++ */
                     
                     .moreButton50551011 {
                        border-color: var(--darkGrey);
                        color:var(--darkGrey);
                      }
                     .moreBesides50551011 {
                      border-color: var(--darkGrey);
                       background-image: url('/gfx/arrowRightDarkGrey.png');
                      }
                     
                      .more:hover .moreButton50551011,
                      .more.hovered .moreButton50551011 {
                       border-color: white;
                       background-color: transparent;
                       color:white;
                       }
                     .more:hover .moreBesides50551011,
                     .more.hovered .moreBesides50551011 {
                        border-color: white;
                        color:white;
                        background-color: transparent;
                         background-image: url('/gfx/arrowRightWhite.png');
                        }
    
    
                    /* ++++++++++ */
                         
                         .moreButton50551011 {
                            border-color: var(--darkGrey);
                            color:var(--darkGrey);
                          }
                         .moreBesides50551011 {
                          border-color: var(--darkGrey);
                           background-image: url('/gfx/arrowRightDarkGrey.png');
                          }
                         
                          .more:hover .moreButton50551011,
                          .more.hovered .moreButton50551011 {
                           border-color: white;
                           background-color: transparent;
                           color:white;
                           }
                         .more:hover .moreBesides50551011,
                         .more.hovered .moreBesides50551011 {
                            border-color: white;
                            color:white;
                            background-color: transparent;
                             background-image: url('/gfx/arrowRightWhite.png');
                            }
    
    
     /* ++++++++++ */
                     
                     .moreButton30331011 {
                        border-color: var(--blue);
                        color:var(--blue);
                      }
                     .moreBesides30331011 {
                      border-color: var(--blue);
                      background-image: url('/gfx/arrowRightBlue.png');
                      }
                     
                      .more:hover .moreButton30331011,
                      .more.hovered .moreButton30331011 {
                       border-color: white;
                       background-color: transparent;
                       color:white;
                       }
                     .more:hover .moreBesides30331011,
                     .more.hovered .moreBesides30331011 {
                        border-color: white;
                        color:white;
                        background-color: transparant;
                         background-image: url('/gfx/arrowRightWhite.png');
                        }
    
     /* ++++++++++ */
                         
                         .moreButton10111122 {
                            border-color: white;
                            color:white;
                          }
                         .moreBesides10111122 {
                          border-color: white;
                           background-image: url('/gfx/arrowRightWhite.png');
                          }
                         
                          .more:hover .moreButton10111122,
                          .more.hovered .moreButton10111122 {
                           border-color: white;
                           background-color: white;
                           color:var(--green);
                           }
                         .more:hover .moreBesides10111122,
                         .more.hovered .moreBesides10111122 {
                            border-color: white;
                            color:var(--green);
                            background-color: white;
                             background-image: url('/gfx/arrowRightGreen.png');
                            }
    
    /* ++++++++++ */
                             
                             .moreButton10111144 {
                                border-color: white;
                                color:white;
                              }
                             .moreBesides10111144 {
                              border-color: white;
                               background-image: url('/gfx/arrowRightWhite.png');
                              }
                             
                              .more:hover .moreButton10111144,
                              .more.hovered .moreButton10111144 {
                               border-color: orange;
                               background-color: white;
                               color:var(--orange);
                               }
                             .more:hover .moreBesides10111144,
                             .more.hovered .moreBesides10111144 {
                                border-color: orange;
                                color:var(--orange);
                                background-color: white;
                                 background-image: url('/gfx/arrowRightOrange.png');
                                }
    
    /* ++++++++++ */
                                 
                                 .moreButton10111411 {
                                    border-color: white;
                                    color:white;
                                  }
                                 .moreBesides10111411 {
                                  border-color: white;
                                   background-image: url('/gfx/arrowRightWhite.png');
                                  }
                                 
                                  .more:hover .moreButton10111411,
                                  .more.hovered .moreButton10111411 {
                                   border-color: white;
                                   background-color: var(--orange);
                                   color: white;
                                   }
                                 .more:hover .moreBesides10111411,
                                 .more.hovered .moreBesides10111411 {
                                    border-color: white;
                                    color: white;
                                    background-color: var(--orange);
                                     background-image: url('/gfx/arrowRightWhite.png');
                                    }
                                    
      /* ++++++++++ */
       
       .moreButton50551311 {
          border-color: var(--darkGrey);
          color:var(--darkGrey);
        }
       .moreBesides50551311 {
        border-color: var(--darkGrey);
         background-image: url('/gfx/arrowRightDarkGrey.png');
        }
       
        .more:hover .moreButton50551311,
        .more.hovered .moreButton50551311 {
         border-color: white;
         background-color: var(--blue);
         color:white;
         }
       .more:hover .moreBesides50551311,
       .more.hovered .moreBesides50551311 {
          border-color: white;
          color:white;
          background-color: var(--blue);
           background-image: url('/gfx/arrowRightWhite.png');
          }
    
    
    
    
    
     /* ++++++++++ */
           
           .lessButton20221211 {
              border-color: var(--green);
              color:var(--green);
            }
           .lessBesides20221211 {
            border-color: var(--green);
             background-image: url('/gfx/arrowLeftGreen.png');
            }
           
            .more:hover .lessButton20221211,
            .more.hovered .lessButton20221211 {
             border-color: white;
             background-color: var(--green);
             color:white;
             }
           .more:hover .lessBesides20221211,
           .more.hovered .lessBesides20221211 {
              border-color: white;
              color:white;
              background-color: var(--green);
               background-image: url('/gfx/arrowLeftWhite.png');
              }
    
    /* ++++++++++ */
               
               .lessButton30331011 {
                  border-color: var(--blue);
                  color:var(--blue);
                }
               .lessBesides30331011 {
                border-color: var(--blue);
                background-image: url('/gfx/arrowLeftBlue.png');
                }
               
                .more:hover .lessButton30331011,
                .more.hovered .lessButton30331011 {
                 border-color: white;
                 background-color: transparent;
                 color:white;
                 }
               .more:hover .lessBesides30331011,
               .more.hovered .lessBesides30331011 {
                  border-color: white;
                  color:white;
                  background-color: transparant;
                   background-image: url('/gfx/arrowLeftWhite.png');
                  }
    
    
    
    
    
    .gTxt {
      color: var(--darkGrey);
    }
    .gTxt h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .gTxt h3 {
      font-size: 2rem;
      line-height: 1.1;
      font-weight: 500;
      margin-bottom: 1.7rem;
    }
    .gTxt p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.7rem;
    }
    .gTxt p strong {
      font-weight: 600;
    }
    .gTxt ul {
      font-size: 1.7rem;
      line-height: 120%;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    
    
    }
    
    .gTxt ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .gTxt ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      color: var(--lightBlue);
      top: 0;
    }
    
    
    .gTxt ol {
      margin-bottom: 1rem;
      counter-reset: my-awesome-counter;
    }
    
    .gTxt ol li {
      font-weight: 300;
      font-size: 1.7rem;
      line-height: 120%;
      margin-bottom: 1rem;
      /* color: #ABACAE;  */
      counter-increment: my-awesome-counter;
    }
    
    .gTxt ol li {
      padding-left: 2rem;
      position: relative;
    }
    
    .gTxt ol li:before {
      content: counter(my-awesome-counter);
      width: 2rem;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      padding-left: 0;
      font-weight: 500;
      font-size: 1.7rem;
      line-height: 120%;
      color: var(--lightBlue);
    }
    
    
    
    
    /* header */
    .headerContainer {
      width: 100%;
      position: fixed;
      background-color: black;
      z-index: 100;
    }
    
    .headerContainer::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 10%;
      height: 100%;
      background-color: var(--green);
      pointer-events: none;
      /* ensures clicks pass through */
      z-index: -1;
      /* place behind content */
    }
    
    .logoArea {
      width: 20.8rem;
      height: 4rem;
      margin-bottom: 1.2rem;
      margin-top: 3.6rem;
    }
    
    .logoArea img {
      height: 4rem;
      width: auto;
    }
    .logoArea a {
      cursor: pointer !important;
    }
    
    .commsArea {
      height: 10rem;
      /* background-position: right top;
      background-repeat: repeat-x;
      background-image: url(/gfx/greenBlueStripe.webp);
      background-size: auto 10rem; */
      width: 22.4rem;
      text-wrap: nowrap;
      padding-left: 3rem;
      text-align: right;
      background-color: var(--green);
    }
    
    
    .commsArea a {
      display: block;
      width: 100%;
      color: white;
    }
    
    .commsArea a:hover,
    .commsArea a:focus  {
      color: black;
    }
    
    .phoneLink {
      font-size: 1.8rem;
      line-height: 1.4;
      font-weight: 500;
      margin-top: 2.6rem;
    }
    
    .emailLink {
      font-size: 1.8rem;
      line-height: 1.4;
      font-weight: 500;
    
    }
    
    .headerGrid {
      display: grid;
      grid-template-columns: 20.8rem 1fr 22.2rem;
      width: 100%;
    }
    
    
    .subContainer {
      width: 100%;
      position: fixed;
      top:-14rem;
      background-color: rgba(255,255,255,0.95);
      z-index: 90;
      border-bottom-style: solid;
      border-bottom-width: 3px;
      display:none;
      }
      .subContainerInner {
        max-width:106rem;
        padding-left: 5rem;
        padding-right: 5rem;
        margin-left: auto;
        margin-right: auto;
        padding-top: 2.8rem;
        padding-bottom: 2.8rem;
        min-height: 24rem;    
      }
    .subContainerGrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5rem;
      width: 100%;
    }
    .greenBorder {
      border-bottom-color: var(--green);
    
    }
    .blueBorder {
      border-bottom-color: var(--blue);
    
    }
    .orangeBorder {
      border-bottom-color: var(--blue);
    }
    
    
    
     
     .smaGreen::after,  .smaGreen:hover::after, .smaGreen:focus::after {
       content:'';
       width:2rem;
       height:2rem;
       display:inline-block;
       background-image: url('/gfx/arrowRightGreen.png');
       background-repeat: no-repeat;
       background-size: contain;
       margin-left: 0.2rem;
       vertical-align: middle;
     } 
     
     .smaBlue::after,  .smaBlue:hover::after, .smaBlue:focus::after {
        content:'';
        width:2rem;
        height:2rem;
        display:inline-block;
        background-image: url('/gfx/arrowRightBlue.png');
        background-repeat: no-repeat;
        background-size: contain;
        margin-left: 0.2rem;
        vertical-align: middle;
      } 
    
    
    .greenNav, 
    .blueNav, 
    .orangeNav {
      color: white;
    }
    .greenSubNav, 
    .blueSubNav, 
    .orangeSubNav {
      color: black;
    }
    
    .greenNav:hover,
    .greenNav:focus,
    .greenNav.selected,
    .greenSubNav a:hover,
    .greenSubNav a:focus,
    .greenSubNav a.selected {
      color: var(--green);
    }
    .blueNav:hover,
    .blueNav:focus,
    .blueNav.selected,
    .blueSubNav a:hover,
    .blueSubNav a:focus,
    .blueSubNav a.selected  {
      color: var(--blue);
    }
    .orangeNav:hover,
    .orangeNav:focus,
    .orangeNav.selected,
    .orangeSubNav a:hover,
    .orangeSubNav a:focus,
    .orangeSubNav a.selected {
      color: var(--orange);
    }
    
    /* home - hero video */
    
    .bg5 {
      background-color: rgba(0,0,0,0.05);
    }
    .bg10 {
      background-color: rgba(0,0,0,0.1);
    }
    .bg15 {
      background-color: rgba(0,0,0,0.15);
    }
    .bg20 {
      background-color: rgba(0,0,0,0.2);
    }
    .bg25 {
      background-color: rgba(0,0,0,0.25);
    }
    .bg30 {
      background-color: rgba(0,0,0,0.30);
    }
    .bg35 {
      background-color: rgba(0,0,0,0.35);
    }
    .bg40 {
      background-color: rgba(0,0,0,0.4);
    }
    .bg45 {
      background-color: rgba(0,0,0,0.45);
    }
    .bg50 {
      background-color: rgba(0,0,0,0.5);
    }
    
    
    
    
    .videoHomeContainer {
      position: relative;
      width: 100vw;
      padding-top: 54%;
      /* 16:9 aspect ratio (9/16 = 0.5625) */
      overflow: hidden;
    }
    
    /* Video fills the container and scales responsively */
    .videoHomeBg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Ensures video fills container proportionally */
      z-index: -1;
      pointer-events: none;
      /* Prevents video from interfering with interaction */
    }
    
    .videoMaskBg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Ensures video fills container proportionally */
      z-index: 2;
      pointer-events: none;
      /* Prevents video from interfering with interaction */
    }
    
    
    .heroTxtContainer {
      width: 100%;
      z-index: 10;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    
    
    .heroTxt {
      padding-bottom: 12rem;
      width: 100%;
    }
    .heroTxt h1 {
      text-transform: uppercase;
      font-size: 3.6rem;
      font-weight: 600;
      line-height: 1;
      margin-bottom: 2rem;
      color:white;
      padding-right: 50%;
    }
    .heroTxtASD h1 {
      color: var(--blue);
    }
    .heroTxt p {
      font-size: 2.4rem;
      font-weight: 500;
      line-height: 1.2;
      margin-bottom: 2rem;
      color:white;
      padding-right: 50%;
    
    }
    .explore {
      display: block;
      width: 10rem;
      height: 6rem;
      border-top-left-radius: 0.8rem;
      border-top-right-radius: 0.8rem;
      background-color: var(--green);
      position: absolute;
      left: calc(50% - 5rem);
      bottom: 0;
      padding: 1.4rem;
    }
    .exploreASD {
      background-color: var(--blue);
    }
    .exploreBad {
      background-color: pink !important;
    
      /* opacity: 0;
      transition: opacity 0.6s ease-out;
      pointer-events: none;
      visibility: hidden; */
    }
    
    
    .exploreActive, .explore:hover {
      background-color: var(--midGrey) !important;
    }
    .exploreTxt {
      width: 100%;
      text-align: center;
      text-transform: uppercase;
      font-size: 1.2rem;
      font-weight: 500;
      line-height: 1;
      color: white;
      margin-bottom: 0.6rem;
    }
    .exploreImg {
      width: 3rem;
      height: auto;
      margin-left: auto;
      margin-right: auto;
    }
    .exploreImg img {
      width: 100%;
      height: auto;
    }
    
    
    
    
    
    
    /* quote/video block */
    .quoteVideoContainer {
      width: 100%;
      background-color: var(--lightGrey);
     margin-top: 0.5rem;
    }
    
    .quoteVideoArea {
      max-width: 128rem;
      padding-left: 6rem;
      padding-right: 6rem;
      margin-left: auto;
      margin-right: auto;
    }
    
    .quoteVideoGrid {
      display: grid;
      grid-template-columns: 4px calc(64% - 4px)  36%;
      width: 100%; /* Ensure it uses full width for percentage calculations */
    }
    
    .quoteTxt {
      /* border-right: solid 0.8rem white; */
      padding-top: 5rem;
      padding-right: 8rem;
      padding-left: 6rem;
      padding-bottom: 6rem;
    }
    
    .quoteTxt h2 {
      color: var(--green);
    }
    
    .videoArea {
      background-color: var(--green);
      /* border-right: solid 0.8rem white; */
    }
    
    .quoteVideoWrapper {
      position: relative;
      width: 100%;
      /* max-width: 800px; */
      margin: 0 auto;
      padding-top: 56.25%;
      /* 16:9 */
      background: #000;
      overflow: hidden;
    }
    
    .quoteVideo {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .videoSideTxt {
      padding: 3.6rem;
    }
    
    .videoSideTxt h3 {
      color: white;
    }
    
    .videoSideTxt p {
      font-size: 1.6rem;
      margin-bottom: 1.6rem;
      color: white;
    }
    
    
    
    
    /* /quote/video block */
    
    
    
    
    /* specialist services block */
    
    .headerSS {
      width: 100%;
      padding-bottom: 4rem;
    }
    .headerSS h2 {
    color: var(--green);
    }
    .headerSS p {
    font-size: 2rem;
    }
    .headerSS p strong {
      font-weight: 600;
    }
    
    .gridSS {
      display: grid;
      grid-template-columns:1fr 1fr;
      gap: 7rem;
      width: 100%; 
      margin-bottom: 9rem;
    }
    
    .itemSS {
      border-radius: 2rem;
      border-style: solid;
      border-width: 2.4px;
      overflow: hidden;
      }
    .imgSS {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .itemSS {
            position: relative;
            overflow: hidden;
            cursor: pointer;
          }
    
          
    .imgSS {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          /* .imgSS::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemSS:hover .imgSS::before {
            transform: scale(1.2);
          } */
          
    .txtSS {
      padding: 4rem;
      padding-top: 3rem;
    }
    
    .txtSS h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .txtSS p {
      font-size: 1.6rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtSS p strong {
      font-weight: 600;
    }
    
    /* /IST block */
    
    
    .gridIST {
      display: grid;
      grid-template-columns:1fr 1fr;
      gap: 7rem;
      width: 100%; 
      margin-bottom: 9rem;
    }
    
    .itemIST {
      border-radius: 2rem;
      border-style: solid;
      border-width: 2.4px;
      overflow: hidden;
      }
    .imgIST {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .itemIST {
            position: relative;
            overflow: hidden;
            cursor: pointer;
          }
          
          .itemISTNot {
            position: relative;
            overflow: hidden;
            cursor: default !important;
          }
    
    
          
    .imgIST, .imgISTNot {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          /* .imgIST::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemIST:hover .imgIST::before {
            transform: scale(1.2);
          } */
          
          
          /* .imgISTNot::before {
            display:none
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemISTNot:hover .imgISTNot::before {
            transform: scale(1);
          } */
    
          
    .txtIST {
      padding: 4rem;
      padding-top: 3rem;
    }
    
    .txtIST h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .txtIST p {
      font-size: 1.6rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtIST p strong {
      font-weight: 600;
    }
    
    .txtIST ul {
      font-size: 2rem;
      line-height: 1.2;
      font-weight: 400;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    
    
    }
    
    .txtIST ul li {
      padding-left: 2rem;
      margin-bottom: 0.4rem;
      position: relative;
    }
    
    
    .txtIST ul li:before {
      content: "\2022";
      font-size: 2.6rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 900;
      color: var(--green);
      top: -0.5rem;
    }
    
    
    /* /IST block */
    
    
    /* about us */
    
    
    
    .aboutVideoGrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 100%; /* Ensure it uses full width for percentage calculations */
    }
    
    .splitLineTxtGrid {
      display: grid;
      grid-template-columns: 4px calc(100% - 4px);
      width: 100%; /* Ensure it uses full width for percentage calculations */
    
    }
    
    .splitLineTxtGrid .fatLineOuter {
          position: relative;
        width: 4px;
        border-left: 1.5px solid #aaaaaa;
        height: 100%;
        float:left;
        margin-top: unset;
        margin-bottom: unset
      }
    .splitLineTxtGrid .fatLineInner {
        position: absolute;
        left: -1.5px; 
        top:25%  
        width: 4px; 
        height: 50%; 
        background: var(--green); 
        z-index: 10;
      }
    .aboutTxt {
      padding-right: 8rem;
      padding-left: 6rem;
    }
    
    .aVideoWrapper {
      position: relative;
      width: 100%;
      /* max-width: 800px; */
      margin: 0 auto;
      padding-top: 56.25%;
      /* 16:9 */
      background: #000;
      overflow: hidden;
    }
    
    .aboutVideo {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .aboutTxt h1 {
      font-size: 3.6rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green)
    }
    .aboutTxt h1 span {
      color: white;
    }
    .aboutTxt p {
      font-size: 2rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      color: white;
    }
    .aboutTxt p strong {
      font-weight: 600;
    }
    
    
    /* fifty line fifty block */
    
    .gridFLF {
      display: grid;
      grid-template-columns: calc(50% + 4.5rem - 2px) 4px calc(50% - 4.5rem - 2px);
      width: 100%; /* Ensure it uses full width for percentage calculations */
    }
    
    .imgFLF  {
      width:100%;
      padding-right: 6rem;
    }
    
    .imgFLF .imgArea {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 66.67%; /* 380/570 * 100% = 66.67% */
      width:100%;
    }
    .txtFLF {
      padding: 6rem;
      padding-left: 6.4rem;
    padding-right: 0;
    }
    
    .txtFLF h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green)
    }
    .txtFLF h2 span {
      color: white;
    }
    .txtFLF p {
      font-size: 1.6rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      color: white;
    }
    .txtFLF p strong {
      font-weight: 600;
    }
    .gridFLF .fatLineOuter {
      position: relative;
      width: 4px;
      border-left: 1.5px solid #aaaaaa;
      margin-top: 6rem;
      height: calc(100% -30rem);
      margin-bottom: 24rem;
    }
    
    /* /fifty line fifty block */
    
    
    /* masthead block */
    .mT5 {
      margin-top: 0.5rem;
     }
     .mt3 {
       margin-top:3rem;
      }
    
    .gridMast {
      display: grid;
      grid-template-columns: calc(50% - 4.5rem)  calc(50% + 4.5rem);
      width: 100%; /* Ensure it uses full width for percentage calculations */
    }
    
    
    
    
    .imgMast {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 56.25%; 
      width:100%;
    }
    .txtMast {
      padding: 0 ;
    }
    
    
    .txtMast h1 {
      font-size: 3.6rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green)
    }
    .txtMast h1 span {
      color: white;
    }
    .txtMast p {
      font-size: 2rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      color: white;
    }
    .txtMast p strong {
      font-weight: 600;
    }
    .txtMast .txtMastArea .fatLineOuter {
      position: relative;
      width: 4px;
      border-left: 1.5px solid #aaaaaa;
      height: 100%;
      float:left;
    }
    .txtMast .txtBlock .fatLineInner {
      position: absolute;
      top: 25%;
      left: -1.5px;   
      width: 4px; 
      height: 50%; 
      background: var(--green); 
      z-index: 10;
    }
    .txtMast .txtMastArea .txtBlock {
      padding-left: 4rem;
      padding-right: 6rem;
      width: 100%;
      border-left: 1.5px solid #aaaaaa;
      position:relative;
    }
    .txtMast .txtMastArea .txtBlockISS {
      padding-right: 0;
    }
    
    .txtMastASD {
      padding-top: 6rem;
      padding-bottom: 6rem;
    }
    
    
    
    
    
    
    
    .txtMastCAR h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green);
    }
    .txtMastCAR h3 {
      font-size: 2rem;
      line-height: 1.1;
      font-weight: 500;
      margin-bottom: 1.7rem;
      color: var(--green);
    }
    .txtMastCAR p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.7rem;
      color: var(--darkGrey);
    }
    .txtMastCAR p strong {
      font-weight: 600;
    }
    .txtMastCAR ul {
      font-size: 1.7rem;
      line-height: 120%;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
      color: var(--darkGrey);
    
    }
    
    .txtMastCAR ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .txtMastCAR ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      color: var(--green);
      top: 0;
    }
    
    
    
    
    .txtMastASD h1 {
      font-size: 3.6rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--blue)
    }
    .txtMastASD h1 span {
      color: white;
    }
    
    
    
    .txtMastASD h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--blue)
    }
    .txtMastASD h2 span {
      color: white;
    }
    
    .txtMastASD .txtBlock .fatLineInner {
      background: var(--blue); 
    }
    .txtMastASD .txtMastArea .txtBlock {
      padding-left: 5rem;
      padding-right: 0;
      width: 100%;
      border-left: 1.5px solid #aaaaaa;
      position:relative;
    }
    
    
    .txtMastASD p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      text-transform: none;
      color: white;
    }
    
    
    
    .txtMastAbout {
      /* padding-top: 6rem;
      padding-bottom: 6rem; */
    }
    .pl5 {
      padding-left: 5rem;
    }
    
    
    .txtMastAbout h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green)
    }
    .txtMastAbout h2 span {
      color: var(--darkGrey);
    }
    
    .txtMastAbout .txtBlock .fatLineInner {
      background: var(--green); 
    }
    .txtMastAbout .txtMastArea .txtBlock {
      padding-left: 5rem;
      padding-right: 0;
      width: 100%;
      border-left: 1.5px solid #aaaaaa;
      position:relative;
    }
    
    
    .txtMastAbout p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      text-transform: none;
      color: var(--darkGrey);
    }
    
    .txtMastAbout2 h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green)
    }
    
    .txtMastAbout2 p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      text-transform: none;
      color: white;
    }
    
    .timelineArea h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green)
    }
    
    .timelineContent h3 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.4rem;
      color: var(--green)
    }
    
    
    .timelineContent p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      text-transform: none;
      color: var(--darkGrey);
    }
    
    
    
    
    .logoHero {
      display: inline-block;
      vertical-align: middle;
      max-width: 11rem;
      max-height: 4.5rem;
      margin-right: 2rem;
    }
    .logoHero:last-of-type {
      margin-right: 0;
    }
    
    .txtMastISS {
      min-height: 36rem;
    }
    
    
    .txtMastTE {
      min-height: 36rem;
    }
    
    .txtMastTE p {
      font-size: 2.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      color: white;
    }
    
    
    .txtMast .txtMastArea .txtBlockTE {
      padding-right: 0;
    }
    .txtMast .txtMastArea .txtBlockTE h1,
    .txtMast .txtMastArea .txtBlockTE h2,
    .txtMast .txtMastArea .txtBlockTE ul li::before {
      color: var(--orange);
    }
    
    .txtMast .txtMastArea .txtBlockTE ul {
      font-size: 1.7rem;
      line-height: 120%;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
      color: white;
    
    }
    
    .txtMast .txtMastArea .txtBlockTE ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .txtMast .txtMastArea .txtBlockTE ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      top: 0;
    }
    
    .txtMast .txtMastArea .txtBlockTE  h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .txtMast .txtBlockTE .fatLineInner {
      background: var(--orange); 
    }
    
    
    
    
    
    
    
    .txtMast .txtMastArea .txtBlockTE {
      padding-right: 0;
    }
    .txtMast .txtMastArea .txtBlockTE h1,
    .txtMast .txtMastArea .txtBlockTE h2,
    .txtMast .txtMastArea .txtBlockTE ul li::before {
      color: var(--orange);
    }
    
    .txtMast .txtMastArea .txtBlockTE ul {
      font-size: 1.7rem;
      line-height: 120%;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
      color: white;
    
    }
    
    .txtMast .txtMastArea .txtBlockTE ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .txtMast .txtMastArea .txtBlockTE ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      top: 0;
    }
    
    .txtMast .txtMastArea .txtBlockTE  h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .txtMast .txtBlockTE .fatLineInner {
      background: var(--orange); 
    }
    
    
    
    
    
    
    
    
    
    
    
    /* reputation block */
    
    .headerREP {
      width: 100%;
      padding-top: 6rem;
      padding-bottom: 4rem;
    }
    .headerREP h2 {
    color: var(--green);
    }
    .headerREP p {
    font-size: 2rem;
    }
    .headerREP p strong {
      font-weight: 600;
    }
    
    .gridREP {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7rem;
      width: 100%;
      padding-bottom: 9rem;
    }
    
    .itemREP {
      position: relative;
      border-radius: 2rem;
      border: 2.4px solid;
      overflow: hidden;   /* keeps children within border */
      cursor: pointer;
      border-color: var(--darkGrey);
      background-color: white;
    }
    
    .imgREP {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding-bottom: 67%;
      overflow: hidden;
      z-index: 1;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      /* remove top corners rounding */
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    .imgSpace {
      padding-bottom: 67%;
      overflow: hidden;
    width:100%;
    }
    
    
    /* .imgREP::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: inherit;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    
      border-bottom-left-radius: inherit;
      border-bottom-right-radius: inherit;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    
      transition: transform 0.6s ease;
      transform-origin: center center;
      transform: scale(1);
    }
    
    .itemREP:hover .imgREP::before {
      transform: scale(1.2);
    } */
    .txtREP {
      padding: 4rem;
      padding-top: 4rem;
    }
    
    .txtREP h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
      color: var(--green);
    }
    .txtREP p {
      font-size: 1.6rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtREP p strong {
      font-weight: 600;
    }
    
    /* /specialist services block */
    
    
    /* home - logo carousel */
    .logosPad {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }
    .logosBlock {
      overflow: hidden;
      position: relative;
      height: 14rem;
      width:100%;
    }
    
    .logosTrack {
      position: absolute;
      display: inline-block;
      white-space: nowrap;
      will-change: transform;
    }
    
    .logosBlock img {
      max-height: 8rem;
      height: auto;
      width: auto;
      max-width: 17rem;
      vertical-align: middle;
      margin-right: 5rem;
      display: inline-block;
      opacity: 0.65;
    }
    .gradLeft {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 9rem;
      height: 14rem; /* Ensure the height is defined */
      background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
      z-index: 10;
    }
    
    .gradRight {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 9rem;
      height: 14rem; /* Ensure the height is defined */
      background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
      z-index: 10;
    }
    
    /* security solutions list */
    
    .gridSecSol {
      display: grid;
      grid-template-columns:1fr 1fr;
      gap: 4rem;
      width: 100%; 
    }
    
    .itemSecSol {
      border-radius: 2rem;
      border-style: solid;
      border-width: 1px;
      overflow: hidden;
      }
    .imgSecSol {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .itemSecSol {
            position: relative;
            overflow: hidden;
            cursor: pointer;
          }
    
          
    .imgSecSol {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          /* .imgSecSol::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemSecSol:hover .imgSecSol::before {
            transform: scale(1.2);
          } */
          .itemSecSol:hover,
          .itemSecSol.hovered {
          --lightGrey: white;
          }
          
    .txtSecSol {
      padding: 2.6rem;
      padding-bottom: 9rem;
    }
    .moreAbsolute {
      position: absolute;
      bottom: 3.4rem;
      left: 2.6rem;
    }
    
    .moreCaption {
      position: absolute;
    }
    
    .txtSecSol h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
    }
    .txtSecSol p {
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtSecSol p strong {
      font-weight: 600;
    }
    
    /* /specialist services block */
    
    
    
    /* split columns of text-wrap:  */
    .columnSplit {
      column-count: 2;
      column-gap: 5rem;
      column-fill: balance; /* Try to even out columns */
      widows: 2;
      orphans: 2;
    }
    .columnSplitWide {
      column-gap: 9rem;
    }
    
    /* Prevent breaking inside structured elements */
    .columnSplit h2,
    .columnSplit h3,
    .columnSplit h4,
    .columnSplit ul,
    .columnSplit ol,
    .columnSplit li {
      break-inside: avoid;
      -webkit-column-break-inside: avoid;
      page-break-inside: avoid;
    }
    
    /* Paragraphs may break — but only naturally, not mid-word */
    .columnSplit p {
      break-inside: auto;  /* allow natural split if necessary */
      text-wrap: pretty;   /* more graceful wrapping in modern browsers */
    }
    
    /* Optional: prevent single lines from dangling */
    .columnSplit p:last-child {
      margin-bottom: 0;
    }
    
    /* Lists look cleaner this way */
    .columnSplit ul,
    .columnSplit ol {
      margin: 1rem 0;
      padding-left: 1.5rem;
    }
    
    
    /* category list T1*/
    
    .gridCatListT1 {
      display: grid;
      grid-template-columns:1fr 1fr;
      gap: 3rem;
      width: 100%; 
    }
    
    .itemCatListT1 {
      border-radius: 2rem;
      border-style: solid;
      border-width: 1px;
      overflow: hidden;
      }
    .imgCatListT1 {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .imgCatListT1Mod {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    
    .itemCatListT1 {
            position: relative;
            overflow: hidden;
          //  cursor: pointer;
          }
    
          
    .imgCatListT1 {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          .imgCatListT1Mod {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          
          /* .imgCatListT1Mod::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemCatListT1Mod:hover .imgCatListT1Mod::before {
            transform: scale(1.2);
          } */
          /* .imgCatListT1Mod:hover,
          .imgCatListT1Mod.hovered {
          --lightGrey: white;
          } */
          
    .txtCatListT1 {
      padding: 2.6rem;
      padding-bottom: 3.6rem;
    }
    
    .txtCatListT1Mod {
      padding-bottom: 10rem;
    }
    .moreAbsolute {
      position: absolute;
      bottom: 3.4rem;
      left: 2.6rem;
    }
    
    .txtCatListT1 h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
    }
    .txtCatListT1 p {
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtCatListT1 p strong,
    .txtCatListT1Mod p strong {
      font-weight: 600;
    }
    
    .txtCatListT1 ul {
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    
    
    }
    
    .txtCatListT1 ul li {
      padding-left: 1.6rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .txtCatListT1 ul li:before {
      content: "\2022";
      font-size: 1.6rem;
      line-height: 1.4;
      width: 1.6rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 900;
      color: var(--green);
      top: -0.3rem;
    }
    
    
    .txtCatListT1 ol {
      margin-bottom: 1rem;
      counter-reset: my-awesome-counter;
    }
    
    .txtCatListT1 ol li {
      font-weight: 300;
      font-size: 1.7rem;
      line-height: 120%;
      margin-bottom: 1rem;
      /* color: #ABACAE;  */
      counter-increment: my-awesome-counter;
    }
    
    .txtCatListT1 ol li {
      padding-left: 2rem;
      position: relative;
    }
    
    .txtCatListT1 ol li:before {
      content: counter(my-awesome-counter);
      width: 2rem;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      padding-left: 0;
      font-weight: 500;
      font-size: 1.7rem;
      line-height: 120%;
      color: var(--lightBlue);
    }
    
    .txtCatListT1Mod p {
      font-size: 1.8rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    
    }
    
    .hBlockTxt p {
      font-size: 2rem;
      line-height: 1.4;
      margin-bottom: 2.6rem;
    
    }
    .hBlockTxt h2 {
    color: white;
    }
    
    
    .imgCOIB {
      position: relative;
      padding-bottom: 56.5%;
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
    }
    
    /* /specialist services block */
    
    
    /* promises */
    .itemPromise {
      position:relative;
      padding-left: 5rem;
    }
    .itemPromise .tickBox {
      position: absolute;
      width: 4rem;
      height: 4rem;
      top:0;
      left:0;
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
      background-image: url('/gfx/greenTick.webp');
    }
    .headerPromise {
      width: 100%;
      padding-bottom: 4rem;
    }
    .headerPromise h2 {
    color: var(--green);
    }
    .headerPromise p {
    font-size: 2rem;
    }
    .headerPromise p strong {
      font-weight: 600;
    }
    .headerPromise {
      padding-top: 0;
    }
    
    
    .gridPromises {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 6rem;
    }
    
    .gridPromises .column {
      display: flex;
      flex-direction: column;
      gap: 0; /* spacing between items, adjust if needed */
    }
    
    .itemPromise {
      display: flex;
      flex-direction: column;
    }
    
    
    .itemPromise h3 {
      font-size: 1.7rem;
      line-height: 1.3;
      font-weight: 500;
      margin-bottom: 0.4rem;
    }
    .itemPromise p {
      font-size: 1.7rem;
      line-height: 1.3;
      font-weight: 400;
      margin-bottom: 2rem;
    }
    .itemPromise p strong {
      font-weight: 600;
    }
    
    
    /* slides */
    
    .slideGridOnWhite {
      display: grid;
      grid-template-columns: 43.5% 56.25%;
      gap: 0;
      width: 100%;
    }
    .slideGridOnGreen {
      display: grid;
      grid-template-columns: 43.5% 56.25%;
      gap: 0;
      width: 100%;
    }
    
    .slideGridOnDark {
      display: grid;
      grid-template-columns: 56.25% 43.5%;
      gap: 0;
      width: 100%;
    }
    
    
    .slideImg {
      padding-bottom: 75%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }
    .slideTxt {
      padding-top:3rem;
    padding-bottom:3rem;
    padding-left:6rem;
    padding-right: 6rem;
    }
    .txtOnWhite {
      padding-right: 14rem;
    }
    .txtOnGreen {
      padding-right: 14rem;
    }
    
    .txtOnDark {
      padding-left: 14rem;
    }
    
    
    .slideTxt h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .slideTxt h3 {
      font-size: 2rem;
      text-transform: uppercase;
      line-height: 1.1;
      font-weight: 500;
      margin-bottom: 1.7rem;
    }
    .slideTxt p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.7rem;
    }
    .slideTxt p strong {
      font-weight: 600;
    }
    .slideTxt ul {
      font-size: 1.7rem;
      line-height: 120%;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    }
    
    .slideTxt ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .slideTxt ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      top: 0;
    }
    
    .txtOnWhite h2,
    .txtOnWhite ul li:before {
      color: var(--orange);
    }
    .txtOnWhite p,
    .txtOnWhite h3,
    .txtOnWhite ul li {
      color: var(--darkGrey);
    }
    
    
    .txtOnGreen h2,
    .txtOnGreen ul li:before {
      color: var(--green);
    }
    .txtOnGreen p,
    .txtOnGreen h3,
    .txtOnGreen ul li {
      color: white;
    }
    
    
    
    .txtOnDark h2,
    .txtOnDark ul li:before {
      color: var(--orange);
    }
    .txtOnDark p,
    .txtOnDark h3,
    .txtOnDark ul li {
      color: white;
    }
    
    
    /* meet the team */
    .teamHead {
      padding-bottom: 3rem;
    }
    .teamHead h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 0;
      color: var(--green);
    }
    
    .gridTeam {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5.4rem;
      width: 100%;
    }
    
    .areaPad {
      padding-bottom: 120%;
      display: block;
      width: 100%;
    }
    
    .itemTeam {
      position: relative;
      border-radius: 2rem;
      border: 2px solid var(--green);
      overflow: hidden;
      background-color: white;
    }
    
    /* The image block — only top corners rounded */
    .imgTeam {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top center;
      padding-bottom: 120%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      border-top-left-radius: calc(2rem - 2px);
      border-top-right-radius: calc(2rem - 2px);
      z-index: 10;
      transition: top 0.3s ease;
      /* will-change: top; */
    
    }
    
    /* Biography section (hidden underneath the image) */
    .biog {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 2.4rem;
      background-color: white;
      color: var(--darkGrey);
      box-sizing: border-box;
      z-index: 1;
    }
    
    /* Text section at bottom */
    .txtTeam {
      padding: 2.6rem 2.6rem 4rem;
      padding-top: 1.8rem;
      background-color: var(--green);
      text-align: center;
      border-bottom-left-radius: calc(2rem - 2px);
      border-bottom-right-radius: calc(2rem - 2px);
    }
    
    .txtTeam h2 {
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 0;
      color: white;
    }
    
    .txtTeam h3 {
      font-size: 1.7rem;
      font-weight: 500;
      margin-bottom: 0;
      color: white;
    }
    
    .txtTeam p {
      font-size: 1.4rem;
      line-height: 1.4;
      margin-bottom: 1.6rem;
    }
    
    /* Plus/minus toggle button */
    .biogPlus {
      width: 3rem;
      height: 3rem;
      position: absolute;
      left: calc(50% - 1.5rem);
      bottom: 0;
      background-color: white;
      border-left: 1px solid var(--green);
      border-top: 1px solid var(--green);
      border-right: 1px solid var(--green);
      border-top-left-radius: 0.4rem;
      border-top-right-radius: 0.4rem;
      background-image: url('/gfx/biogPlus.webp');
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 20;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    /* Active state (minus) */
    .biogPlus.active {
      background-color: var(--green);
      border-left: 1px solid white;
      border-top: 1px solid white;
      border-right: 1px solid white;
      background-image: url('/gfx/biogMinus.webp');
    }
    
    
    /* meet the team */
    
    .gridTeam2 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 3.4rem;
      width: 100%;
    }
    
    
    .itemTeam2 {
      position: relative;
      border-radius: 2rem;
      border: 1.6px solid var(--green);
      overflow: hidden;
      background-color: white;
    }
    
    /* The image block — only top corners rounded */
    .imgTeam2 {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top center;
      padding-bottom: 120%;
      width: 100%;
      border-top-left-radius: 1.2rem;
      border-top-right-radius: 1.2rem;
    
    }
    
    
    
    /* Text section at bottom */
    .txtTeam2 {
      padding: 1.8rem;
      padding-top: 1.8rem;
      background-color: white;
      text-align: center;
      border-bottom-left-radius: 1.2rem;
      border-bottom-right-radius: 1.2rem;
    }
    
    .txtTeam2 h2 {
      font-size: 1.6rem;
      font-weight: 600;
      margin-bottom: 0;
      color: var(--green);
    }
    
    .txtTeam2 h3 {
      font-size: 1.4rem;
      font-weight: 500;
      margin-bottom: 0;
      color: var(--green);
    }
    
    .txtTeam2 p {
      font-size: 1.4rem;
      line-height: 1.4;
      margin-bottom: 1.6rem;
    }
    
    
    /* ASD blocks */
    
    
    .gridASD {
      display: grid;
      grid-template-columns:1fr 1fr;
      gap: 7rem;
      width: 100%; 
      margin-bottom: 5rem;
    }
    
    .itemASD {
      border-radius: 2rem;
      border-style: solid;
      border-width: 2.4px;
      overflow: hidden;
      background-color: var(--midGrey);
      border-color: var(--blue);
      }
    .imgASD {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .itemASD {
            position: relative;
            overflow: hidden;
            cursor: pointer;
          }
          
          .itemASDNot {
            position: relative;
            overflow: hidden;
            cursor: default !important;
          }
    
    
          
    .imgASD, .imgASDNot {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
            background-size: cover;
    
          }
          
          /* .imgASD::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemASD:hover .imgASD::before {
            transform: scale(1.2);
          }
           */
          
          /* .imgASDNot::before {
            display:none
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemASDNot:hover .imgISTNot::before {
            transform: scale(1);
          } */
    
          
    .txtASD {
      padding: 4rem;
      padding-top: 3rem;
    }
    
    .txtASD h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--blue);
    }
    .txtASD h3 {
      font-size: 2rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
      color: var(--blue);
    }
    
    .txtASD p {
      font-size: 1.6rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      color: white;
    }
    .txtASD p strong {
      font-weight: 600;
    }
    
    .txtASD ul {
      font-size: 2rem;
      line-height: 1.2;
      font-weight: 400;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    
    
    }
    
    .txtASD ul li {
      padding-left: 2rem;
      margin-bottom: 0.4rem;
      position: relative;
    }
    
    
    .txtASD ul li:before {
      content: "\2022";
      font-size: 2.6rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 900;
      color: var(--blue);
      top: -0.5rem;
    }
    
    
    /* /ASD blocks */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* case studies list */
    
    .gridCaseList {
      display: grid;
      grid-template-columns:1fr 1fr;
      gap: 5.4rem;
      width: 100%; 
    }
    
    .itemCaseList {
      border-radius: 2rem;
      border-style: solid;
      border-width: 1.8px;
      border-color: var(--green);
      overflow: hidden;
      background-color: white;
      }
    .imgCaseList {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .itemCaseList {
            position: relative;
            overflow: hidden;
            cursor: pointer;
          }
    
          
    .imgCaseList {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          /* .imgCaseList::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemCaseList:hover .imgCaseList::before {
            transform: scale(1.2);
          } */
          .itemCaseList:hover,
          .itemCaseList.hovered {
          --lightGrey: white;
          }
          
    .txtCaseList {
      padding: 2.6rem;
      padding-bottom: 9rem;
      color: var(--darkGrey);
    }
    .moreAbsolute {
      position: absolute;
      bottom: 3.4rem;
      left: 2.6rem;
    }
    
    .moreCaption {
      position: absolute;
    }
    
    .txtCaseList h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
      color: var(--green);
    }
    .txtCaseList p {
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtCaseList p strong {
      font-weight: 600;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .caseDetailImgGrid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 3.6rem;
    }
    
    .caseDetailImgLink {
      display: block;
      position: relative;
      overflow: hidden; /* keeps scaling inside */
      aspect-ratio: 7 / 5; /* optional: enforces aspect ratio if you want one */
    }
    
    .caseDetailImg {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
    }
    
    .caseDetailImg::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: inherit;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      transition: transform 0.6s ease;
      transform: scale(1);
      z-index: 0;
    }
    
    /* Scale on hover */
    .caseDetailImgLink:hover .caseDetailImg::before {
      transform: scale(1.2);
    }
    
    /* Magnifier overlay */
    .magnifier {
      position: absolute;
      inset: 0;
      background-image: url(/gfx/magnifier.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 3.6rem;
      background-color: rgba(255,255, 255, 0.75);
      opacity: 0;
      transition: opacity 0.5s ease;
      z-index: 1;
    }
    
    .caseDetailImgLink:hover .magnifier {
      opacity: 1;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    /* testimonials list */
    
    .gridTestimonialList {
      display: grid;
      grid-template-columns:1fr 1fr;
      gap: 5.4rem;
      width: 100%; 
    }
    
    .itemTestimonialList {
      border-radius: 2rem;
      border-style: solid;
      border-width: 1.8px;
      border-color: var(--green);
      overflow: hidden;
      background-color: white;
      }
    
          
    .txtTestimonialList {
      padding: 2.6rem;
      color: var(--darkGrey);
    }
    
    .txtTestimonialList h2 {
      font-size: 2rem;
      line-height: 1.2;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
      color: var(--green);
      font-style: italic;
    }
    .txtTestimonialList h2::before {
      content:'\201C';
      font-weight: 600;
      font-size: 4rem;
      line-height: 1rem;
      display:inline-block;
      vertical-align: bottom;
      font-style: italic;
      color: var(--darkGrey);
      opacity: 0.3;
    padding-right: 0.5rem;
    }
    .txtTestimonialList h2::after {
      content:'\201D';
      font-weight: 600;
      font-size: 4rem;
      line-height: 1rem;
      display:inline-block;
      vertical-align: bottom;
      font-style: italic;
      color: var(--darkGrey);
      opacity: 0.3;
      padding-left: 0.5rem;
      
    }
    
    .txtTestimonialList p {
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.4rem;
    }
    .txtTestimonialList p strong {
      font-weight: 600;
    }
    .txtTestimonialList .author {
      font-size: 1.4rem;
      line-height: 1.2;
      font-weight: 600;
      margin-bottom: 1.6rem;
    color: var(--green);
      }
    .txtTestimonialList .edited {
        font-size: 1rem;
        line-height: 1;
        font-weight: 400;
        margin-bottom: 1.6rem;
        text-transform: uppercase;
      color: var(--green);
      margin-top: -0.8rem;
        }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* faqs */
    
    
    .faqArea h2 {
      padding-top: 4rem;
      padding-bottom: 2rem;
      color: var(--green);
      padding-left: 0;
      
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 0;
    
    }
    
    
    .revealSet {
      background-color: white;
      border: 1px solid var(--green);
      margin-bottom: 0;
      border-bottom: none;
    }
    
    .revealSet:last-of-type {
      background-color: white;
      border: 1px solid var(--green);
      margin-bottom: 0;
    }
    
    
    .revealSet>.open {
      display: block;
      text-decoration: none;
      transition: all 0.2s linear;
      position: relative;
      border-radius-top-right: 1.4rem;
    }
    
    /* .revealSet>.open .fa {
      position: absolute;
      text-align: left;
      left: 2rem;
      top: 1rem;
      width: 2.4rem;
      height: 2.4rem;
    } */
    
    .ta {
      box-sizing: border-box;
      display: block;
      font-weight: 500;
      font-size: 1.7rem;
      line-height: 120%;
      padding-top: 1rem;
      padding-bottom: 1rem;
      width: 100%;
      color: var(--darkGrey);
      padding-left: 4rem;
      padding-right: 6rem;
    
    
    }
    
    .highLight {
      background-color: var(--lightGrey);
      color: var(--darkGrey);
      transition: all 0.2s ease;
      border-bottom: 1px solid var(--green);
      /* border-left: 0.6rem solid #0F6B4A; */
      padding-left: 4rem;
    
    
    }
    
    .lowLight {
      background-color: white;
      color: var(--darkGrey);
      transition: all 0.2s ease;
      /* border-left: 0.6rem solid white; */
      padding-left: 4rem;
    
    
      /* padding-left: 4rem; */
      /* border-bottom: 1px solid rgb(55, 100, 161); */
    
    }
    
    .revealPlus::before {
      content: "";
      position: absolute;
      transition: all 0.2s ease;
      right: 0;
      top: 0;
      width: 3.7rem;
      height: 100%;
      background-image: url('/gfx/arrowDownGreen.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
      transition: all 0.2s linear;
      border-left: 1px solid var(--green);
    
    
    }
    
    .revealMinus::before {
      content: "";
      position: absolute;
      transition: all 0.2s ease;
      right: 0;
      top: 0;
      width: 3.7rem;
      height: 100%;
      background-image: url('/gfx/arrowUpWhite.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
      border-left: 1px solid var(--green);
      background-color: var(--green);
    
    }
    
    /* .open:hover .fa::before, .open:focus .fa::before {
      background-image: url('/gfx/arrowDownWhite.png');
      background-color: var(--green);
    }
    .open:active .fa::before, .open:active .fa::before {
    
    } */
    /* reveal content */
    .revealContent {
      /* margin-bottom: 2rem; */
      padding: 2rem;
      padding-bottom: 0.3rem;
      padding-left: 4rem;
      padding-right: 6rem;
    
      /* border-bottom: 1px solid #494949; */
    }
    
    .revealContent p {
      font-size: 1.7rem;
    line-height: 1.4;
    font-weight: 400;
    margin-bottom: 1.7rem;
    color: var(--darkGrey);
    }
    
    
    .revealContent ul {
      font-size: 1.7rem;
      line-height: 1.1;
      font-weight: 400;
      margin-bottom: 1.7rem;
      padding-left: 0; /* Remove default padding */
    }
    
    .revealContent ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .revealContent ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      color: var(--green);
      top: -0.4rem;;
    }
    
    .revealContent a, .revealContent a:focus {
      font-weight: 600;
    }
    .revealContent a:hover, .revealContent a:active {
      font-weight: 600;
      margin-bottom: 0.3rem;
      border-bottom: 1px solid var(--darkGrey);
    }
    
    
    .revealContent {
      display: none;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* footer */
    .gridFOOT {
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 5rem;
      width: 100%;
    }
    .footerPad {
      padding-top: 6rem;
      padding-bottom: 6rem;
      border-top-color: var(--green);
      border-top-style: solid;
      border-top-width: 3px;
    }
    .footerLogo {
      width: 100%;
      margin-bottom: 3.6rem;
    }
    .footerLogo img {
      width: 28rem;
    }
    
    .phoneTxt a {
      display: block;
      width: 100%;
      color: var(--green);
    }
    
    .phoneTxt a:hover,
    .phoneTxt a:focus  {
      color: white;
    }
    
    .phoneTxt p {
      font-size: 2.4rem;
      line-height: 1.4;
      font-weight: 500;
    }
    .phoneTxt {
      margin-bottom: 3.4rem;
    }
    .addressTxt {
      margin-bottom: 3.4rem;
    }
    .addressTxt p {
      font-size: 1.8rem;
      line-height: 1.3;
      margin-bottom: 0;
      font-weight: 500;
      color: white;
    }
    .registeredTxt {
      margin-bottom: 1.7rem;
    }
    .registeredTxt p {
      font-size: 1.2rem;
      line-height: 1.4;
      margin-bottom: 0;
      font-weight: 400;
      color: white;
    
    }
    .accreditations {
      margin-bottom: 4rem;
    }
    
    .accreditations img {
      max-height: 6.2rem;
      width: auto;
      display: inline-block;
      margin-right: 1.4rem;
      vertical-align: middle;
    }
    
    .accreditations img:last-child {
      margin-right: 0;
    }
    
    .legalNav {
      margin-bottom: 1.2rem;
    }
    
    .legalNav ul li {
      display: inline-block;
      font-size: 1.5rem;
      line-height: 1.2;
      margin-bottom: 0;
      font-weight: 500;
    
    }
    
    .legalNav ul li a::after {
      content: "/";
      padding-left: 0.35rem;
      padding-right: 0.2rem;
    }
    
    .legalNav ul li:last-child a::after {
      content: "";
      padding: 0;
    }
    
    
    .legalNav ul li a {
      display: block;
      color: white;
    }
    
    .legalNav ul li a:hover, 
    .legalNav ul li a:focus,
    .legalNav ul li a.selected {
      color: var(--green);
    }
    
    
    
    
    .legalSignoff {
      padding-bottom: 4rem;
    }
    
    .legalSignoff p {
      font-size: 1.5rem;
      line-height: 140%;
      margin-bottom: 1.6rem;
      font-weight: normal;
      color: white;
      opacity: 0.7;
    
    }
    
    .siteBy p {
      font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 0;
    font-weight: 400;
    color: white;
    }
    
    .siteBy a {
      color: white;
    }
    
    .siteBy a:hover,
    .siteBy a:focus {
      color: var(--green);
    }
    
    .socialTxt {
      margin-bottom: 3.2rem;
    }
    
    .socialTxt h3, .accreditations h3 {
      font-size: 1.8rem;
      line-height: 1.4;
      margin-bottom: 1rem;
      font-weight: 500;
      color: var(--green);
    
    }
    
    .socialTxt ul li {
      padding-left: 0;
    }
    
    .socialTxt ul li::before {
      padding-left: 0;
      display: none;
    }
    
    .socialTxt ul li {
      display: inline-block;
      margin-right: 1.4rem;
    }
    
    
    .socialTxt ul li img {
      max-height: 6rem;
    
    }
    
    .socialTxt ul li a {
      display:block;
      background-color: white;
    }
    
    .socialTxt ul li a:hover,
    .socialTxt ul li a:focus {
      background-color: var(--green);
    
    } 
    
    .copyright p {
      font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 0;
    font-weight: 400;
    color: white;
    }
    
    .copyright a {
      color: white;
    }
    
    .copyright a:hover,
    .copyright a:focus {
      color: var(--green);
    }
    
    
    /* slider */
    
    .bx-wrapper {
      position: relative;
      margin-bottom: 0;
      padding: 0;
      *zoom: 1;
      -ms-touch-action: pan-y;
      touch-action: pan-y;
    }
    .bx-wrapper img {
      max-width: 100%;
      display: block;
    }
    .bxslider {
      margin: 0;
      padding: 0;
      /*fix flickering when used background-image instead of <img> (on Chrome)*/
      -webkit-perspective: 1000;
    }
    ul.bxslider {
      list-style: none;
    }
    .bx-viewport {
      /* fix other elements on the page moving (in Chrome) */
      -webkit-transform: translateZ(0);
    }
    /** THEME
    ===================================*/
    .bx-wrapper {
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      border: none;
      background: transparent;
      position: relative;
    }
    
    /* LOADER */
    .bx-wrapper .bx-loading {
      min-height: 64px;
      background: url('/gfx/loading.webp') center center no-repeat;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 90;
    }
    /* PAGER */
    
    /* DIRECTION CONTROLS (NEXT / PREV) */
    
    .onWhite .bx-prev {
      background-image: url('/gfx/arrowLeftDarkGrey.png');
      border-color: var(--darkGrey);
      background-color: rgba(255,255,255,0.6);
    }
    .onWhite .bx-next {
      background-image: url('/gfx/arrowRightDarkGrey.png');
      border-color: var(--darkGrey);
      background-color: rgba(255,255,255,0.5);
    }
    .onWhite .bx-prev:hover,
    .onWhite .bx-prev:focus {
      background-color: var(--orange);
      background-image: url('/gfx/arrowLeftWhite.png');
      border-color: white;
    }
    .onWhite .bx-next:hover,
    .onWhite .bx-next:focus {
      background-color: var(--orange);
      background-image: url('/gfx/arrowRightWhite.png');
      border-color: white;
    }
    
    .onDark .bx-prev {
      background-image: url('/gfx/arrowLeftWhite.png');
      border-color: white;
      /* background-color: rgba(255,255,255,0.5); */
    }
    .onDark .bx-next {
      background-image: url('/gfx/arrowRightWhite.png');
      border-color: white;
      background-color: rgba(0,0,0,0.5);
    }
    .onDark .bx-prev:hover,
    .onDark .bx-prev:focus {
      background-color: var(--orange);
      background-image: url('/gfx/arrowLeftWhite.png');
      border-color: white;
    }
    .onDark .bx-next:hover,
    .onDark .bx-next:focus {
      background-color: var(--orange);
      background-image: url('/gfx/arrowRightWhite.png');
      border-color: white;
    }
    
    
    
    /* DIRECTION CONTROLS (NEXT / PREV) */
    
    .onGreen .bx-prev {
      background-image: url('/gfx/arrowLeftDarkGrey.png');
      border-color: var(--darkGrey);
      background-color: rgba(255,255,255,0.6);
    }
    .onGreen .bx-next {
      background-image: url('/gfx/arrowRightDarkGrey.png');
      border-color: var(--darkGrey);
      background-color: rgba(255,255,255,0.5);
    }
    .onGreen .bx-prev:hover,
    .onGreen .bx-prev:focus {
      background-color: var(--green);
      background-image: url('/gfx/arrowLeftWhite.png');
      border-color: white;
    }
    .onGreen .bx-next:hover,
    .onGreen .bx-next:focus {
      background-color: var(--green);
      background-image: url('/gfx/arrowRightWhite.png');
      border-color: white;
    }
    
    
    
    
    
    
    
    
    
    
    
    /* contact */
    
    .contactContainer {
      width: 100%;
    }
    
    
    .contactGrid {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 6rem;
    }
    
    
    .contactTxt h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green);
    
    }
    .contactTxt h3 {
      font-size: 2rem;
      line-height: 1.1;
      font-weight: 500;
      margin-bottom: 1.7rem;
      color: var(--green);
    
    }
    .contactTxt p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.7rem;
    }
    .contactTxt p strong {
      font-weight: 600;
    }
    
    
    .contactTxt {
      margin-bottom: 4rem;
    }
    
    
    .contactTxt p a, .contactTxt p a:active{
      font-weight: 600;
      color: var(--darkGrey);
    
    }
    .contactTxt p a:hover,   .contactTxt p a:focus {
      color: var(--green)
    }
    
    
    
    .google-maps {
      position: relative;
      padding-bottom: 125%; // This is the aspect ratio
      overflow: hidden;
      margin-top: 6rem;
      border: 1.2px solid var(--green);
    }
    
    .google-maps iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 100% !important;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    .bx-wrapper .bx-prev,
    .bx-wrapper .bx-next {
      display: block;
      border-style: solid;
      border-width: 1.4px;
      border-radius: 0.6rem;
      width: 4.4rem;
      height: 4.4rem;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      position: absolute;
    
      /* top: calc(50% - 2.4rem); */
    }
    .bx-wrapper .bx-prev {
      left: 4rem;
    }
    .bx-wrapper .bx-next {
      right: 4rem;
    }
    .bx-wrapper .bx-controls-direction a {
      position: absolute;
      top: 50%;
      margin-top: -2.2rem;
      outline: 0;
      width: 4.4rem;
      height: 4.4rem;
      text-indent: -9999px;
      z-index: 90;
    }
    .bx-wrapper .bx-controls-direction a.disabled {
      display: none;
    }
    
    .bx-wrapper .bx-prev.disabled,
    .bx-wrapper .bx-next.disabled {
      display: none;
    }
    
    
    
    
    
    
    
    
    /* 11022026 home slider */
    
    .explore { z-index: 50;}
    
    
    
    /* PAGER */
    .onNeutral .bx-pager {
      text-align: left;
      font-size: .85em;
      font-family: Arial;
      font-weight: bold;
      color: white;
      padding-top: 0;
      position: absolute;
      bottom: 4.8rem;
    }
    
    .onNeutral .bx-pager {
      max-width: 128rem;
      padding-left: 12rem;
      padding-right: 6rem;
      margin-left: auto;
      margin-right: auto;
    }
    .onNeutral .bx-pager.bx-default-pager a {
      background-color:white;
      text-indent: -9999px;
      display: block;
      width: 16px;
      height: 16px;
      margin: 0 8px;
      outline: 0;
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      border-radius: 8px;
    }
    .onNeutral .bx-pager.bx-default-pager a:hover,
    .onNeutral .bx-pager.bx-default-pager a.active,
    .onNeutral .bx-pager.bx-default-pager a:focus {
      background-color: var(--green);
    }
    .onNeutral .bx-pager-item,
    .onNeutral .bx-controls-auto .bx-controls-auto-item {
      display: inline-block;
      vertical-align: bottom;
      *zoom: 1;
      *display: inline;
    }
    .onNeutral .bx-pager-item {
      font-size: 0;
      line-height: 0;
    }
    
    .onNeutral .bx-prev,
    .onNeutral .bx-next {
      display: block;
      border-style: solid;
      border-width: 1.4px;
      border-radius: 0.6rem;
      width: 4.4rem;
      height: 4.4rem;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      position: absolute;
    
      /* top: calc(50% - 2.4rem); */
    }
    .onNeutral .bx-prev {
     left: 6rem;
    }
    .onNeutral .bx-next {
    right: 6rem;
    }
    .onNeutral .bx-controls-direction {
    }
    .onNeutral .bx-controls-direction a {
      outline: 0;
      width: 4.4rem;
      height: 4.4rem;
      text-indent: -9999px;
      z-index: 90;
      bottom: 3.4rem !important;
      top: unset;
    }
    .onNeutral .bx-controls-direction a.disabled {
      display: none;
    }
    
    .onNeutral .bx-prev.disabled,
    .onNeutral .bx-next.disabled {
      display: none;
    }
    
    .videoHomeBg video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .videoHomeBg {
      position: relative;
      width: 100%;
      height: 100%;
    }
    
    
    /* Make the bx-viewport relative so bottom:0 works */
    .bx-wrapper .bx-viewport {
      position: relative;
      overflow: hidden;
    }
    
    /* Position the explore button relative to the viewport */
    .HeroSliderContainer .explore {
      position: absolute;
      bottom: 0;          /* sticks to the bottom of the viewport */
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
    }
    
    .HeroSliderContainer .explore {
      margin: 0;
      padding: 0;
    }
    
    .heroTxtContainer {
      z-index: 5; /* above .videoMaskBg */
      pointer-events: auto; /* ensure text is selectable */
    }
    
    /* Buttons themselves */
    .more {
      z-index: 6; /* above everything inside the container */
      pointer-events: auto;
    }
    
    .videoHomeImg {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    }
    
    .onNeutral .bx-prev {
      background-image: url('/gfx/arrowLeftDarkGrey.png');
      border-color: white;
      background-color: rgba(255,255,255,0.6);
    }
    .onNeutral .bx-next {
      background-image: url('/gfx/arrowRightDarkGrey.png');
      border-color: white;
      background-color: rgba(255,255,255,0.5);
    }
    .onNeutral .bx-prev:hover,
    .onNeutral .bx-prev:focus {
      background-color: var(--green);
      background-image: url('/gfx/arrowLeftWhite.png');
      border-color: white;
    }
    .onNeutral .bx-next:hover,
    .onNeutral .bx-next:focus {
      background-color: var(--green);
      background-image: url('/gfx/arrowRightWhite.png');
      border-color: white;
    }
    
    
    
    /* image annotation */
    
    .numberSurround {
      position: relative;
      display: inline-block;
    }
    /* number Roundel */
    .numberRoundel {
      position:relative;
      display:block;
      width: 3.4rem;
      height: 3.4rem;
      /* Background-color: var(--blue); */
      border-radius: 1.7rem;
      border: solid 0.1rem white;
      font-size: 2.2rem;
      font-weight: 600;
      line-height: 1;
      padding-top: 0.6rem;
      padding-bottom: 0.6rem;
      text-align: center;
      color:white;
      z-index: 20;
    }
    
    .captionReveal {
      display: block;
      font-size: 1.4rem;
      font-weight: 400;
      line-height: 1.2;
      padding-left: 1.8rem;
      padding-right: 1.6rem;
      padding-top: 1.4rem;
      padding-bottom: 1.6rem;
      background-color: black;
      color:white;
      position:absolute;
      left: 1.7rem;
      top: 1.7rem;
      z-index: 10;
      border: solid 0.1rem white;
      min-width: 10rem;
      max-width: 18rem;
      opacity:0;
      transition:
          opacity 0.25s ease,
          transform 0.25s ease;
          border-radius: 1.7rem;
          cursor: default;
          border-bottom-right-radius: unset;
      }
    
    .numberRoundel:hover + .captionReveal {
        opacity: 0.85;
      }
    .numberRoundel {
        cursor: pointer;
        transition: transform 0.15s ease;
      }
      
      .numberRoundel:hover {
        transform: scale(1.15);
      }
      
      .imgKeyArea {
        width: 85.2rem;
        margin-left: auto;
        margin-right: auto;
        padding-top: 3.4rem;
        padding-bottom: 3.4rem;
      }
      .keyTxtP {
        font-size: 1.9rem;
        font-weight: 500;
        line-height: 1.2;
        padding-bottom: 1.2rem;
        margin:0;
        color:white;
      }
      .keyNum {
        position:relative;
        display:inline-block;
        width: 3.4rem;
        height: 3.4rem;
        /* Background-color: var(--blue); */
        border-radius: 1.7rem;
        border: solid 0.1rem white;
        font-size: 2.2rem;
        font-weight: 600;
        line-height: 1;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
        text-align: center;
        color:white;
        margin-right: 1rem;
      }
     .keyTxtA, .keyTxtB {
         color:white;
       }
       
       .keyBlock {
         column-count: 2;
         column-gap: 2rem;
       }
       
       .keyBlock p {
         break-inside: avoid;
       }
     .keyTxtA:hover {
         color:var(--blue);
       }
       .keyTxtB:hover {
         color:var(--green);
       }
     
       .keyTxtA:hover .keyNum,   .keyTxtB:hover .keyNum {
         Background-color: black;
       }
       
      
      
      
      
      
      
      .videoStdContainer {
        position: relative;
        width: 100vw;
        padding-top: 54%;
        /* 16:9 aspect ratio (9/16 = 0.5625) */
        overflow: hidden;
      }
      
      /* Video fills the container and scales responsively */
      .videoStdBg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Ensures video fills container proportionally */
        z-index: -1;
        pointer-events: none;
        /* Prevents video from interfering with interaction */
      }
      
      .videoStdBg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Ensures video fills container proportionally */
        z-index: 2;
        pointer-events: none;
        /* Prevents video from interfering with interaction */
      }
      
      
      .stdTxtContainer {
        width: 100%;
        z-index: 10;
        position: absolute;
        bottom: 0;
        left: 0;
      }
      
      
      .stdTxt {
        padding-bottom: 12rem;
        width: 100%;
      }
      .stdTxt h1 {
        text-transform: uppercase;
        font-size: 3.6rem;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 2rem;
        color:white;
        padding-right: 50%;
      }
      .stdTxtASD h1 {
        color: var(--blue);
      }
      .stdTxt p {
        font-size: 2.4rem;
        font-weight: 500;
        line-height: 1.2;
        margin-bottom: 2rem;
        color:white;
        padding-right: 50%;
      
      }
      .stdExplore {
        display: block;
        width: 10rem;
        height: 6rem;
        border-top-left-radius: 0.8rem;
        border-top-right-radius: 0.8rem;
        background-color: var(--green);
        position: absolute;
        left: calc(50% - 5rem);
        bottom: 0;
        padding: 1.4rem;
      }
      .stdExploreASD {
        background-color: var(--blue);
      }
      
      
      .stdExploreActive, .stdExplore:hover {
        background-color: var(--midGrey) !important;
      }
      .stdExploreTxt {
        width: 100%;
        text-align: center;
        text-transform: uppercase;
        font-size: 1.2rem;
        font-weight: 500;
        line-height: 1;
        color: white;
        margin-bottom: 0.6rem;
      }
      .stdExploreImg {
        width: 3rem;
        height: auto;
        margin-left: auto;
        margin-right: auto;
      }
      .stdExploreImg img {
        width: 100%;
        height: auto;
      }
    .imgABC {
        position: relative;
        padding-bottom: 56.5%;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
      }
    
    
    
    
    /* new 25/08/2026 */
      .share-strip {
        --share-icon-size: 4rem;
        --share-gap: 0;
        padding-top: 2rem;
        padding-bottom: 1rem;
      }
      
      .share-strip__heading {
      font-size: 1.6rem;
      line-height: 1.4;
      font-weight: 600;
      margin-bottom: 0.8rem;
      padding-left: 0.4rem;
      color: var(--green);
      }
      
      .share-strip__list {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        /* gap: var(--share-gap); */
        margin: 0;
        padding: 0;
      }
      
      /* Reset the link/button back to a plain icon-sized hit target — no box. */
      .share-strip__link {
        display: inline-flex;
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        line-height: 0;
        cursor: pointer;
        border-radius: 4px; /* shapes the focus outline only, not a visible box */
      }
      
      .share-strip__icon-wrap {
        position: relative;
        display: block;
        width: var(--share-icon-size);
        height: var(--share-icon-size);
      }
      
      .share-strip__icon {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain; /* proportional, never distorted */
        transition: opacity 0.12s ease;
        opacity: 0.5;
      }
      
      .share-strip__icon--hover {
        opacity: 0;
      }
      
      .share-strip__link:hover .share-strip__icon--normal,
      .share-strip__link:focus-visible .share-strip__icon--normal {
        opacity: 0;
      }
      
      .share-strip__link:hover .share-strip__icon--hover,
      .share-strip__link:focus-visible .share-strip__icon--hover {
        opacity: 1;
      }
      
      /* .share-strip__link:focus-visible {
        outline: 3px solid var(--share-focus-color);
        outline-offset: 3px;
      } */
      
      .share-strip__feedback {
        margin: 0.75rem 0 0;
        font-size: 0.85rem;
        min-height: 1.2em;
      }
      
      
      
    
      /* blog new css */
      
      /* =========================================================
       BLOG LIST
       Dedicated styles - does not affect Case List
       ========================================================= */
      
      .blogList {
      display: grid;
      grid-template-columns: 1fr;
      gap: 3rem;
      width: 100%;
      }
      
      .blogListItem {
      position: relative;
      display: grid;
      grid-template-columns: 1.4fr 3.1fr 4.2rem;
      align-items: center;
      gap: 3rem;
      width: 100%;
      border-radius: 2rem;
      border-style: solid;
      border-width: 1.8px;
      border-color: var(--green);
      overflow: hidden;
      background-color: white;
      cursor: pointer;
      }
      
      
      /* =========================================================
       IMAGE
       ========================================================= */
      
      .blogListImage {
      position: relative;
      overflow: hidden;
      width: 100%;
      padding-bottom: 67%;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      }
      
      .blogListImage.plusBorder {
      border-right: 1px solid var(--green);
      }
      
      
      /* =========================================================
       TEXT
       ========================================================= */
      
      .blogListText {
      color: var(--darkGrey);
      padding: 0 !important;
      margin-bottom: 0;
      }
      
      .blogListText h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.4rem;
      color: var(--green);
      }
      
      .blogListText p {
      font-size: 1.6rem;
      line-height: 1.5;
      font-weight: 400;
      margin-bottom: 0;
      }
      
      .blogListText p strong {
      font-weight: 600;
      }
      
      
      /* =========================================================
       DESKTOP / TABLET ARROW
       ========================================================= */
      
      .blogListLink {
      display: block;
      width: 4.2rem;
      height: 100%;
      border-left: 1px solid var(--green);
      background-image: url('/gfx/arrowRightGreen.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      }
      
      .blogListLink:hover,
      .blogListLink.hovered {
      border-left: 1px solid var(--green);
      background-color: var(--green);
      background-image: url('/gfx/arrowRightWhite.png');
      }
      
      
      /* =========================================================
       ORIGINAL MORE BUTTON
       Hidden on desktop/tablet
       ========================================================= */
      
      .blogListMoreBlock {
      display: none;
      }
      
       /* end blog new css */
       
       
      /* ---- */
      .blogTxt h2 {
        font-size: 2.4rem;
        line-height: 1;
        font-weight: 600;
        text-transform: none;
        margin-bottom: 1.4rem;
        color: var(--green);
      }
      
      .blogTxt h3 {
        font-size: 1.8rem;
        line-height: 1.1;
        font-weight: 500;
        margin-bottom: 1.7rem;
        margin-top: 3.4rem;
      }
      
      .blogTxt h3:first-of-type {
          margin-top: 0;
      }
      
      .blogTxt p {
        font-size: 1.6rem;
        line-height: 1.5;
        font-weight: 400;
        margin-bottom: 1.2rem;
      }
      .blogTxt p strong {
        font-weight: 600;
      }
      .blogTxt ul {
        font-size: 1.6rem;
        line-height: 1.2;
        font-weight: 300;
        margin-bottom: 1rem;
        padding-left: 0; /* Remove default padding */
      
      
      }
      
      .blogTxt ul li {
        padding-left: 2rem;
        margin-bottom: 0.8rem;
        position: relative;
      }
      
      
      .blogTxt ul li:before {
        content: "\2022";
        font-size: 1.8rem;
        width: 2rem;
        display: block;
        position: absolute;
        left: 0;
        padding-left: 0;
        font-weight: 700;
        color: var(--green);
        top: -0.2rem;
      }
      
      .blogVidGrid {
        display: grid;
        grid-template-columns:1fr 1fr;
        align-items: center;
        gap: 3rem;
        width: 100%; 
      }
      
      .blogVideoWrapper {
        position: relative;
        width: 100%;
        /* max-width: 800px; */
        margin: 0 auto;
        padding-top: 56.25%;
        /* 16:9 */
        background: var(--lightGrey);
        overflow: hidden;
      }
      
      .blogVideo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
}


/* ==================================================
   desktop.css
   ================================================== */

@media (min-width: 1200px) {
    /* html, body { font-size: 10px; } */
    /* Scaling System */
     html, body { font-size: 10px; }
     @media screen and (min-width: 1280px) {
       html, body { font-size: clamp(10px, 0.78125vw, 24px); }
     }
    
    .desktop {
      display: block;
    }
    .smart {
      display: none;
    }
    .flexCentreCentre {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .flexLeftTop {
      display: flex;
      justify-content: left;
      align-items: top;
    }
    
    .flexLeftCentre {
      display: flex;
      justify-content: left;
      align-items: center;
    }
    
    .flexLeftBottom {
      display: flex;
      justify-content: left;
      align-items: bottom;
    }
    
    .flexRightTop {
      display: flex;
      justify-content: right;
      align-items: top;
    }
    
    .flexRightCentre {
      display: flex;
      justify-content: right;
      align-items: center;
    }
    
    .flexRightBottom {
      display: flex;
      justify-content: right;
      align-items: bottom;
    }
    .headerOffset {
      width: 100%;
      background-color: var(--darkGrey);
      height: 10rem;
    }
    
    .blackBg {
      background-color: black;
    }
    .lightGreyBg {
      background-color: var(--lightGrey);
    }
    
    
    .fatLineOuter {
      position: relative;
      width: 4px;
      border-left: 1.5px solid #aaaaaa;
      margin-top: 6rem;
      height: calc(100% -18rem);
      margin-bottom: 12rem;
    }
    
    
    .fatLineInner {
      position: absolute;
      top: 25%;
      left: -1.5px;   
      width: 4px; 
      height: 50%; 
      background: var(--green); 
      z-index: 10;
    }
    .container {
     width: 100%;
    }
    /* .inner66 {
      max-width:128rem;
      padding-left: 0;
      padding-right: 0;
      margin-left: auto;
      margin-right: auto;
    } */
    
    .inner66 {
      max-width:128rem;
      padding-left: 6rem;
      padding-right: 6rem;
      margin-left: auto;
      margin-right: auto;
    }
    .inner60 {
      max-width:128rem;
      padding-left: 6rem;
      padding-right: 0;
      margin-left: auto;
      margin-right: auto;
    
    }
    .inner06 {
      max-width:128rem;
      padding-left: 0;
      padding-right: 6rem;
      margin-left: auto;
      margin-right: auto;
    
    }
    .inner40 {
      max-width:128rem;
      padding-left: 4rem;
      padding-right: 0;
      margin-left: auto;
      margin-right: auto;
    
    }
    
    .inner44 {
      max-width:128rem;
      padding-left: 4rem;
      padding-right: 4rem;
      margin-left: auto;
      margin-right: auto;
    
    }
    .inner33 {
      max-width:128rem;
      padding-left: 3rem;
      padding-right: 3rem;
      margin-left: auto;
      margin-right: auto;
    
    }
    .inner33 {
      max-width:128rem;
      padding-left: 3rem;
      padding-right: 3rem;
      margin-left: auto;
      margin-right: auto;
    
    }
    
    .inner99 {
      max-width:128rem;
      padding-left: 9rem;
      padding-right: 9rem;
      margin-left: auto;
      margin-right: auto;
    }
    
    .innerBlog {
      max-width:1100rem;
      padding-left: 9rem;
      padding-right: 9rem;
      margin-left: auto;
      margin-right: auto;
    }
    .inner22 {
      max-width:128rem;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-left: auto;
      margin-right: auto;
    }
    
    .inner09 {
      max-width:128rem;
      padding-left: 0;
      padding-right: 9rem;
      margin-left: auto;
      margin-right: auto;
    }
    .inner90 {
      max-width:128rem;
      padding-left: 9rem;
      padding-right: 0;
      margin-left: auto;
      margin-right: auto;
    }
    
    .inner1212 {
      max-width:128rem;
      padding-left: 12rem;
      padding-right: 12rem;
      margin-left: auto;
      margin-right: auto;
    }
    
    .pt6 {
      padding-top: 6rem;
    }
    .pb6 {
      padding-bottom: 6rem;
    }
    .pt4{
      padding-top: 4rem;
    }
    .pb4 {
      padding-bottom: 4rem;
    }
    .pt3 {
      padding-top: 3rem;
    }
    
    .pb3 {
      padding-bottom: 3rem;
    }
    .pt2 {
      padding-top: 2rem;
    }
    .pb2 {
      padding-bottom: 2rem;
    }
    .pt0 {
      padding-top: 0;
    }
    .pb0 {
      padding-bottom: 0;
    }
    
    
    
    
    .txtBlock {
      padding-left: 4rem;
    }
    .more {
      font-size: 1.7rem;
      line-height: 1;
      font-weight: 500;
    }
    .moreMini {
      font-size: 1.4rem;
      line-height: 1;
      font-weight: 500;
    }
    
    .mb4 {
      margin-bottom: 4rem !important;
    }
    .moreBlock {
      display:block;
      padding-right: 0 !important;
    }
    .moreButton {
      display:inline-block;
      padding: 1.2rem;
      padding-left: 1.8rem;
      padding-right: 1.8rem;
      border-style: solid;
      border-width: 1px;
      border-top-left-radius: 0.8rem;
      border-bottom-left-radius: 0.8rem;
      cursor: pointer;
    }
    .moreBesides {
      display: inline-block;
      width: 4.1rem;
      padding:1.2rem;
      border-style: solid;
      border-width: 1px;
      border-left: none;
      border-top-right-radius: 0.8rem;
      border-bottom-right-radius: 0.8rem;
      cursor: pointer;
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
    }
    
    .lessButton {
      display:inline-block;
      padding: 1.2rem;
      padding-left: 1.8rem;
      padding-right: 1.8rem;
      border-style: solid;
      border-width: 1px;
      border-top-right-radius: 0.8rem;
      border-bottom-right-radius: 0.8rem;
      cursor: pointer;
    }
    .lessBesides {
      display: inline-block;
      width: 4.1rem;
      padding:1.2rem;
      border-style: solid;
      border-width: 1px;
      border-right: none;
      border-top-left-radius: 0.8rem;
      border-bottom-left-radius: 0.8rem;
      cursor: pointer;
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
    }
    
    
    .moreButtonMini {
      display:inline-block;
      padding: 1.05rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      border-style: solid;
      border-width: 1px;
      border-top-left-radius: 0.5rem;
      border-bottom-left-radius: 0.5rem;
      cursor: pointer;
    }
    .moreBesidesMini {
      display: inline-block;
      width: 3.8rem;
      padding: 1.05rem;
      border-style: solid;
      border-width: 1px;
      border-left: none;
      border-top-right-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;
      cursor: pointer;
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
    }
     .sideBySide {
       display: inline-block;
       vertical-align: middle;
       margin-right: 4rem;
     }
     .sideBySidePlus {
        display: inline-block;
        vertical-align: middle;
        margin-right: 8rem;
      }
     
     .sideBySide:last-of-type, .sideBySidePlus:last-of-type {
        margin-right: 0;
      }
    
    
    
    
          
          /* new buttons */
          
          .moreButton10111211 {
             border-color: white;
             color:white;
           }
          .moreBesides10111211 {
           border-color: white;
            background-image: url('/gfx/arrowRightWhite.png');
           }
          
           .more:hover .moreButton10111211,
           .more.hovered .moreButton10111211 {
            border-color: white;
            background-color: var(--green);
            color:white;
            }
          .more:hover .moreBesides10111211,
           .more.hovered .moreBesides10111211{
             border-color: white;
             color:white;
             background-color: var(--green);
              background-image: url('/gfx/arrowRightWhite.png');
             }
             
           /* ++++++++++ */
           
           .moreButton52552511 {
              border-color: var(--darkGrey);
              background-color: var(--green);
              color: var(--darkGrey);
            }
           .moreBesides52552511 {
              border-color: var(--darkGrey);
             background-image: url('/gfx/arrowRightDarkGrey.png');
             background-color: var(--green);
            }
           
            .more:hover .moreButton52552511,
            .more.hovered .moreButton52552511 {
             border-color: var(--green);
             background-color: var(--darkGrey);
             color:white;
             }
           .more:hover .moreBesides52552511,
            .more.hovered .moreBesides52552511 {
             border-color: var(--green);
              color:white;
             background-color: var(--darkGrey);
               background-image: url('/gfx/arrowRightWhite.png');
              }
              
      /* ++++++++++ */
       
       .moreButton52552522 {
          border-color: var(--darkGrey);
          background-color: var(--green);
          color: var(--darkGrey);
        }
       .moreBesides52552522 {
          border-color: var(--darkGrey);
         background-image: url('/gfx/arrowRightDarkGrey.png');
         background-color: var(--green);
        }
       
        .more:hover .moreButton52552522,
        .more.hovered .moreButton52552522 {
         border-color: var(--green);
         background-color: var(--darkGrey);
         color:var(--green);
         }
       .more:hover .moreBesides52552522,
        .more.hovered .moreBesides52552522 {
         border-color: var(--green);
          color:var(--green);
         background-color: var(--darkGrey);
           background-image: url('/gfx/arrowRightGreen.png');
          }
          
      
      /* ++++++++++ */
       
       .moreButton10113313 {
          border-color: white;
          background-color: transparent;
          color: white;
        }
       .moreBesides10113313 {
          border-color: white;
         background-image: url('/gfx/arrowRightWhite.png');
         background-color: transparent;
        }
       
        .more:hover .moreButton10113313,
        .more.hovered .moreButton10113313 {
         border-color: var(--blue);
         background-color: white;
         color:var(--blue);
         }
       .more:hover .moreBesides10113313,
        .more.hovered .moreBesides10113313 {
         border-color: var(--blue);
          color:var(--blue);
         background-color: white;
           background-image: url('/gfx/arrowRightBlue.png');
          }
          
      
              
      /* ++++++++++ */
       
       .moreButton53553511 {
          border-color: var(--darkGrey);
          background-color: var(--blue);
          color: var(--darkGrey);
        }
       .moreBesides53553511 {
          border-color: var(--darkGrey);
         background-image: url('/gfx/arrowRightDarkGrey.png');
         background-color: var(--blue);
        }
       
        .more:hover .moreButton53553511,
        .more.hovered .moreButton53553511 {
         border-color: var(--blue);
         background-color: var(--darkGrey);
         color:white;
         }
       .more:hover .moreBesides53553511,
        .more.hovered .moreBesides53553511 {
         border-color: var(--blue);
          color:white;
         background-color: var(--darkGrey);
           background-image: url('/gfx/arrowRightWhite.png');
          }
      /* ++++++++++ */
       
       .moreButton53553533 {
          border-color: var(--darkGrey);
          background-color: var(--blue);
          color: var(--darkGrey);
        }
       .moreBesides53553533 {
          border-color: var(--darkGrey);
         background-image: url('/gfx/arrowRightDarkGrey.png');
         background-color: var(--blue);
        }
       
        .more:hover .moreButton53553533,
        .more.hovered .moreButton53553533 {
         border-color: var(--blue);
         background-color: var(--darkGrey);
         color:var(--blue);
         }
       .more:hover .moreBesides53553533,
        .more.hovered .moreBesides53553533 {
         border-color: var(--blue);
          color:var(--blue);
         background-color: var(--darkGrey);
           background-image: url('/gfx/arrowRightBlue.png');
          }
        
            /* ++++++++++ */
    
      
             .moreButton10112122 {
                border-color: white;
                color:white;
              }
             .moreBesides10112122 {
              border-color: white;
               background-image: url('/gfx/arrowRightWhite.png');
              }
             
              .more:hover .moreButton10112122,
              .more.hovered .moreButton10112122 {
               border-color: var(--green);
               background-color: white;
               color:var(--green);
               }
             .more:hover .moreBesides10112122,
              .more.hovered .moreBesides10112122{
                border-color: var(--green);
                color: var(--green);
                background-color: white;
                 background-image: url('/gfx/arrowRightGreen.png');
                }
                
             
       /* ++++++++++ */
          
             .moreButton10111311 {
                border-color: white;
                color:white;
              }
             .moreBesides10111311 {
              border-color: white;
               background-image: url('/gfx/arrowRightWhite.png');
              }
             
              .more:hover .moreButton10111311,
              .more.hovered .moreButton10111311 {
               border-color: white;
               background-color: var(--blue);
               color:white;
               }
             .more:hover .moreBesides10111311,
              .more.hovered .moreBesides10111311{
                border-color: white;
                color:white;
                background-color: var(--blue);
                 background-image: url('/gfx/arrowRightWhite.png');
                }
    
      /* ++++++++++ */
             
             .moreButton30331311 {
                border-color: var(--blue);
                color:var(--blue);
              }
             .moreBesides30331311 {
              border-color: var(--blue);
               background-image: url('/gfx/arrowRightBlue.png');
              }
             
              .more:hover .moreButton30331311,
              .more.hovered .moreButton30331311 {
               border-color: white;
               background-color: var(--blue);
               color:white;
               }
             .more:hover .moreBesides30331311,
             .more.hovered .moreBesides30331311 {
                border-color: white;
                color:white;
                background-color: var(--blue);
                 background-image: url('/gfx/arrowRightWhite.png');
                }
      /* ++++++++++ */
                 
                 .moreButton50551211 {
                    border-color: var(--darkGrey);
                    color:var(--darkGrey);
                  }
                 .moreBesides50551211 {
                  border-color: var(--darkGrey);
                   background-image: url('/gfx/arrowRightDarkGrey.png');
                  }
                 
                  .more:hover .moreButton50551211,
                  .more.hovered .moreButton50551211 {
                   border-color: white;
                   background-color: var(--green);
                   color:white;
                   }
                 .more:hover .moreBesides50551211,
                 .more.hovered .moreBesides50551211 {
                    border-color: white;
                    color:white;
                    background-color: var(--green);
                     background-image: url('/gfx/arrowRightWhite.png');
                    }
                    
      /* ++++++++++ */
       
       .moreButton20221211 {
          border-color: var(--green);
          color:var(--green);
        }
       .moreBesides20221211 {
        border-color: var(--green);
         background-image: url('/gfx/arrowRightGreen.png');
        }
       
        .more:hover .moreButton20221211,
        .more.hovered .moreButton20221211 {
         border-color: white;
         background-color: var(--green);
         color:white;
         }
       .more:hover .moreBesides20221211,
       .more.hovered .moreBesides20221211 {
          border-color: white;
          color:white;
          background-color: var(--green);
           background-image: url('/gfx/arrowRightWhite.png');
          }
                    /* ++++++++++ */
                     
                     .moreButton50551011 {
                        border-color: var(--darkGrey);
                        color:var(--darkGrey);
                      }
                     .moreBesides50551011 {
                      border-color: var(--darkGrey);
                       background-image: url('/gfx/arrowRightDarkGrey.png');
                      }
                     
                      .more:hover .moreButton50551011,
                      .more.hovered .moreButton50551011 {
                       border-color: white;
                       background-color: transparent;
                       color:white;
                       }
                     .more:hover .moreBesides50551011,
                     .more.hovered .moreBesides50551011 {
                        border-color: white;
                        color:white;
                        background-color: transparent;
                         background-image: url('/gfx/arrowRightWhite.png');
                        }
    
    
                    /* ++++++++++ */
                         
                         .moreButton50551011 {
                            border-color: var(--darkGrey);
                            color:var(--darkGrey);
                          }
                         .moreBesides50551011 {
                          border-color: var(--darkGrey);
                           background-image: url('/gfx/arrowRightDarkGrey.png');
                          }
                         
                          .more:hover .moreButton50551011,
                          .more.hovered .moreButton50551011 {
                           border-color: white;
                           background-color: transparent;
                           color:white;
                           }
                         .more:hover .moreBesides50551011,
                         .more.hovered .moreBesides50551011 {
                            border-color: white;
                            color:white;
                            background-color: transparent;
                             background-image: url('/gfx/arrowRightWhite.png');
                            }
    
    
     /* ++++++++++ */
                     
                     .moreButton30331011 {
                        border-color: var(--blue);
                        color:var(--blue);
                      }
                     .moreBesides30331011 {
                      border-color: var(--blue);
                      background-image: url('/gfx/arrowRightBlue.png');
                      }
                     
                      .more:hover .moreButton30331011,
                      .more.hovered .moreButton30331011 {
                       border-color: white;
                       background-color: transparent;
                       color:white;
                       }
                     .more:hover .moreBesides30331011,
                     .more.hovered .moreBesides30331011 {
                        border-color: white;
                        color:white;
                        background-color: transparant;
                         background-image: url('/gfx/arrowRightWhite.png');
                        }
    
     /* ++++++++++ */
                         
                         .moreButton10111122 {
                            border-color: white;
                            color:white;
                          }
                         .moreBesides10111122 {
                          border-color: white;
                           background-image: url('/gfx/arrowRightWhite.png');
                          }
                         
                          .more:hover .moreButton10111122,
                          .more.hovered .moreButton10111122 {
                           border-color: white;
                           background-color: white;
                           color:var(--green);
                           }
                         .more:hover .moreBesides10111122,
                         .more.hovered .moreBesides10111122 {
                            border-color: white;
                            color:var(--green);
                            background-color: white;
                             background-image: url('/gfx/arrowRightGreen.png');
                            }
    
    /* ++++++++++ */
                             
                             .moreButton10111144 {
                                border-color: white;
                                color:white;
                              }
                             .moreBesides10111144 {
                              border-color: white;
                               background-image: url('/gfx/arrowRightWhite.png');
                              }
                             
                              .more:hover .moreButton10111144,
                              .more.hovered .moreButton10111144 {
                               border-color: orange;
                               background-color: white;
                               color:var(--orange);
                               }
                             .more:hover .moreBesides10111144,
                             .more.hovered .moreBesides10111144 {
                                border-color: orange;
                                color:var(--orange);
                                background-color: white;
                                 background-image: url('/gfx/arrowRightOrange.png');
                                }
    
    /* ++++++++++ */
                                 
                                 .moreButton10111411 {
                                    border-color: white;
                                    color:white;
                                  }
                                 .moreBesides10111411 {
                                  border-color: white;
                                   background-image: url('/gfx/arrowRightWhite.png');
                                  }
                                 
                                  .more:hover .moreButton10111411,
                                  .more.hovered .moreButton10111411 {
                                   border-color: white;
                                   background-color: var(--orange);
                                   color: white;
                                   }
                                 .more:hover .moreBesides10111411,
                                 .more.hovered .moreBesides10111411 {
                                    border-color: white;
                                    color: white;
                                    background-color: var(--orange);
                                     background-image: url('/gfx/arrowRightWhite.png');
                                    }
                                    
      /* ++++++++++ */
       
       .moreButton50551311 {
          border-color: var(--darkGrey);
          color:var(--darkGrey);
        }
       .moreBesides50551311 {
        border-color: var(--darkGrey);
         background-image: url('/gfx/arrowRightDarkGrey.png');
        }
       
        .more:hover .moreButton50551311,
        .more.hovered .moreButton50551311 {
         border-color: white;
         background-color: var(--blue);
         color:white;
         }
       .more:hover .moreBesides50551311,
       .more.hovered .moreBesides50551311 {
          border-color: white;
          color:white;
          background-color: var(--blue);
           background-image: url('/gfx/arrowRightWhite.png');
          }
    
    
    
    
    
     /* ++++++++++ */
           
           .lessButton20221211 {
              border-color: var(--green);
              color:var(--green);
            }
           .lessBesides20221211 {
            border-color: var(--green);
             background-image: url('/gfx/arrowLeftGreen.png');
            }
           
            .more:hover .lessButton20221211,
            .more.hovered .lessButton20221211 {
             border-color: white;
             background-color: var(--green);
             color:white;
             }
           .more:hover .lessBesides20221211,
           .more.hovered .lessBesides20221211 {
              border-color: white;
              color:white;
              background-color: var(--green);
               background-image: url('/gfx/arrowLeftWhite.png');
              }
    
    /* ++++++++++ */
               
               .lessButton30331011 {
                  border-color: var(--blue);
                  color:var(--blue);
                }
               .lessBesides30331011 {
                border-color: var(--blue);
                background-image: url('/gfx/arrowLeftBlue.png');
                }
               
                .more:hover .lessButton30331011,
                .more.hovered .lessButton30331011 {
                 border-color: white;
                 background-color: transparent;
                 color:white;
                 }
               .more:hover .lessBesides30331011,
               .more.hovered .lessBesides30331011 {
                  border-color: white;
                  color:white;
                  background-color: transparant;
                   background-image: url('/gfx/arrowLeftWhite.png');
                  }
    
    
    
    
    
    .gTxt {
      color: var(--darkGrey);
    }
    .gTxt h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .gTxt h3 {
      font-size: 2rem;
      line-height: 1.1;
      font-weight: 500;
      margin-bottom: 1.7rem;
    }
    .gTxt p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.7rem;
    }
    .gTxt p strong {
      font-weight: 600;
    }
    .gTxt ul {
      font-size: 1.7rem;
      line-height: 120%;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    
    
    }
    
    .gTxt ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .gTxt ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      color: var(--lightBlue);
      top: 0;
    }
    
    
    .gTxt ol {
      margin-bottom: 1rem;
      counter-reset: my-awesome-counter;
    }
    
    .gTxt ol li {
      font-weight: 300;
      font-size: 1.7rem;
      line-height: 120%;
      margin-bottom: 1rem;
      /* color: #ABACAE;  */
      counter-increment: my-awesome-counter;
    }
    
    .gTxt ol li {
      padding-left: 2rem;
      position: relative;
    }
    
    .gTxt ol li:before {
      content: counter(my-awesome-counter);
      width: 2rem;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      padding-left: 0;
      font-weight: 500;
      font-size: 1.7rem;
      line-height: 120%;
      color: var(--lightBlue);
    }
    
    
    
    
    /* header */
    .headerContainer {
      width: 100%;
      position: fixed;
      background-color: black;
      z-index: 100;
    }
    
    .headerContainer::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 10%;
      height: 100%;
      background-color: var(--green);
      pointer-events: none;
      /* ensures clicks pass through */
      z-index: -1;
      /* place behind content */
    }
    
    .logoArea {
      width: 20.8rem;
      height: 4rem;
      margin-bottom: 1.2rem;
      margin-top: 3.6rem;
    }
    
    .logoArea img {
      height: 4rem;
      width: auto;
    }
    .logoArea a {
      cursor: pointer !important;
    }
    
    .commsArea {
      height: 10rem;
      /* background-position: right top;
      background-repeat: repeat-x;
      background-image: url(/gfx/greenBlueStripe.webp);
      background-size: auto 10rem; */
      width: 22.4rem;
      text-wrap: nowrap;
      padding-left: 3rem;
      text-align: right;
      background-color: var(--green);
    }
    
    
    .commsArea a {
      display: block;
      width: 100%;
      color: white;
    }
    
    .commsArea a:hover,
    .commsArea a:focus  {
      color: black;
    }
    
    .phoneLink {
      font-size: 1.8rem;
      line-height: 1.4;
      font-weight: 500;
      margin-top: 2.6rem;
    }
    
    .emailLink {
      font-size: 1.8rem;
      line-height: 1.4;
      font-weight: 500;
    
    }
    
    .headerGrid {
      display: grid;
      grid-template-columns: 20.8rem 1fr 22.2rem;
      width: 100%;
    }
    
    
    .subContainer {
      width: 100%;
      position: fixed;
      top:-14rem;
      background-color: rgba(255,255,255,0.95);
      z-index: 90;
      border-bottom-style: solid;
      border-bottom-width: 3px;
      display:none;
      }
      .subContainerInner {
        max-width:106rem;
        padding-left: 5rem;
        padding-right: 5rem;
        margin-left: auto;
        margin-right: auto;
        padding-top: 2.8rem;
        padding-bottom: 2.8rem;
        min-height: 24rem;    
      }
    .subContainerGrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5rem;
      width: 100%;
    }
    .greenBorder {
      border-bottom-color: var(--green);
    
    }
    .blueBorder {
      border-bottom-color: var(--blue);
    
    }
    .orangeBorder {
      border-bottom-color: var(--blue);
    }
    
    
    
    /* navigation */
    .navigationArea ul {
      margin-left: auto;
      margin-right: auto;
      padding-top: 6.4rem;
    }
    
    .navigationArea ul li {
      display: inline-block;
    }
    
    .navigationArea {
      text-align: center;
    }
    
    .navigationArea ul li a::after {
      content: "/";
      padding-left: 0.8rem;
      padding-right: 0.6rem;
      color: var(--green) !important;
    
    }
    
    .navigationArea ul li:last-child a::after {
      content: "";
      padding: 0;
    }
    
    
    
    .navigationArea ul li a {
      text-transform: uppercase;
      font-size: 1.2rem;
      font-weight: 600;
      line-height: 1;
      padding-bottom: 2.4rem;
      letter-spacing: 0.06rem;
      display: block;
    }
    
    .subNavigationArea ul li a {
      font-size: 1.4rem;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: -0.01rem;
      display: block;
    }
    
    .subContainerGrid h2 {
      text-transform: uppercase;
      font-size: 1.8rem;
      font-weight: 600;
      line-height: 1;
      margin-bottom: 1rem;
      display: block;
    }
    
    .subContainerGrid p {
      font-size: 1.4rem;
      font-weight: 400;
      line-height: 1.4;
      margin-bottom: 1rem;
      display: block;
    }
     .subContainerGrid p strong {
       font-weight: 600;
    
     }
     
     .smaGreen::after,  .smaGreen:hover::after, .smaGreen:focus::after {
       content:'';
       width:2rem;
       height:2rem;
       display:inline-block;
       background-image: url('/gfx/arrowRightGreen.png');
       background-repeat: no-repeat;
       background-size: contain;
       margin-left: 0.2rem;
       vertical-align: middle;
     } 
     
     .smaBlue::after,  .smaBlue:hover::after, .smaBlue:focus::after {
        content:'';
        width:2rem;
        height:2rem;
        display:inline-block;
        background-image: url('/gfx/arrowRightBlue.png');
        background-repeat: no-repeat;
        background-size: contain;
        margin-left: 0.2rem;
        vertical-align: middle;
      } 
    
    
    .greenNav, 
    .blueNav, 
    .orangeNav {
      color: white;
    }
    .greenSubNav, 
    .blueSubNav, 
    .orangeSubNav {
      color: black;
    }
    
    .greenNav:hover,
    .greenNav:focus,
    .greenNav.selected,
    .greenSubNav a:hover,
    .greenSubNav a:focus,
    .greenSubNav a.selected {
      color: var(--green);
    }
    .blueNav:hover,
    .blueNav:focus,
    .blueNav.selected,
    .blueSubNav a:hover,
    .blueSubNav a:focus,
    .blueSubNav a.selected  {
      color: var(--blue);
    }
    .orangeNav:hover,
    .orangeNav:focus,
    .orangeNav.selected,
    .orangeSubNav a:hover,
    .orangeSubNav a:focus,
    .orangeSubNav a.selected {
      color: var(--orange);
    }
    
    /* home - hero video */
    
    .bg5 {
      background-color: rgba(0,0,0,0.05);
    }
    .bg10 {
      background-color: rgba(0,0,0,0.1);
    }
    .bg15 {
      background-color: rgba(0,0,0,0.15);
    }
    .bg20 {
      background-color: rgba(0,0,0,0.2);
    }
    .bg25 {
      background-color: rgba(0,0,0,0.25);
    }
    .bg30 {
      background-color: rgba(0,0,0,0.30);
    }
    .bg35 {
      background-color: rgba(0,0,0,0.35);
    }
    .bg40 {
      background-color: rgba(0,0,0,0.4);
    }
    .bg45 {
      background-color: rgba(0,0,0,0.45);
    }
    .bg50 {
      background-color: rgba(0,0,0,0.5);
    }
    
    
    
    
    .videoHomeContainer {
      position: relative;
      width: 100vw;
      padding-top: 54%;
      /* 16:9 aspect ratio (9/16 = 0.5625) */
      overflow: hidden;
    }
    
    /* Video fills the container and scales responsively */
    .videoHomeBg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Ensures video fills container proportionally */
      z-index: -1;
      pointer-events: none;
      /* Prevents video from interfering with interaction */
    }
    
    
    .videoMaskBg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Ensures video fills container proportionally */
      z-index: 2;
      pointer-events: none;
      /* Prevents video from interfering with interaction */
    }
    
    
    .heroTxtContainer {
      width: 100%;
      z-index: 10;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    
    
    .heroTxt {
      padding-bottom: 12rem;
      width: 100%;
    }
    .heroTxt h1 {
      text-transform: uppercase;
      font-size: 3.6rem;
      font-weight: 600;
      line-height: 1;
      margin-bottom: 2rem;
      color:white;
      padding-right: 50%;
    }
    .heroTxtASD h1 {
      color: var(--blue);
    }
    .heroTxt p {
      font-size: 2.4rem;
      font-weight: 500;
      line-height: 1.2;
      margin-bottom: 2rem;
      color:white;
      padding-right: 50%;
    
    }
    .explore {
      display: block;
      width: 10rem;
      height: 6rem;
      border-top-left-radius: 0.8rem;
      border-top-right-radius: 0.8rem;
      background-color: var(--green);
      position: absolute;
      left: calc(50% - 5rem);
      bottom: 0;
      padding: 1.4rem;
    }
    .exploreASD {
      background-color: var(--blue);
    }
    .exploreBad {
      background-color: pink !important;
    
      /* opacity: 0;
      transition: opacity 0.6s ease-out;
      pointer-events: none;
      visibility: hidden; */
    }
    
    
    .exploreActive, .explore:hover {
      background-color: var(--midGrey) !important;
    }
    .exploreTxt {
      width: 100%;
      text-align: center;
      text-transform: uppercase;
      font-size: 1.2rem;
      font-weight: 500;
      line-height: 1;
      color: white;
      margin-bottom: 0.6rem;
    }
    .exploreImg {
      width: 3rem;
      height: auto;
      margin-left: auto;
      margin-right: auto;
    }
    .exploreImg img {
      width: 100%;
      height: auto;
    }
    
    
    
    
    
    
    /* quote/video block */
    .quoteVideoContainer {
      width: 100%;
      background-color: var(--lightGrey);
     margin-top: 0.5rem;
    }
    
    .quoteVideoArea {
      max-width: 128rem;
      padding-left: 6rem;
      padding-right: 6rem;
      margin-left: auto;
      margin-right: auto;
    }
    
    .quoteVideoGrid {
      display: grid;
      grid-template-columns: 4px calc(67% - 4px)  33%;
      width: 100%; /* Ensure it uses full width for percentage calculations */
    }
    
    .quoteTxt {
      /* border-right: solid 0.8rem white; */
      padding-top: 5rem;
      padding-right: 8rem;
      padding-left: 6rem;
      padding-bottom: 6rem;
    }
    
    .quoteTxt h2 {
      color: var(--green);
    }
    
    .videoArea {
      background-color: var(--green);
      /* border-right: solid 0.8rem white; */
    }
    
    .quoteVideoWrapper {
      position: relative;
      width: 100%;
      /* max-width: 800px; */
      margin: 0 auto;
      padding-top: 56.25%;
      /* 16:9 */
      background: #000;
      overflow: hidden;
    }
    
    .quoteVideo {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .videoSideTxt {
      padding: 3.6rem;
    }
    
    .videoSideTxt h3 {
      color: white;
    }
    
    .videoSideTxt p {
      font-size: 1.6rem;
      margin-bottom: 1.6rem;
      color: white;
    }
    
    
    
    
    /* /quote/video block */
    
    
    
    
    /* specialist services block */
    
    .headerSS {
      width: 100%;
      padding-bottom: 4rem;
    }
    .headerSS h2 {
    color: var(--green);
    }
    .headerSS p {
    font-size: 2rem;
    }
    .headerSS p strong {
      font-weight: 600;
    }
    
    .gridSS {
      display: grid;
      grid-template-columns:1fr 1fr;
      gap: 7rem;
      width: 100%; 
      margin-bottom: 9rem;
    }
    
    .itemSS {
      border-radius: 2rem;
      border-style: solid;
      border-width: 2.4px;
      overflow: hidden;
      }
    .imgSS {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .itemSS {
            position: relative;
            overflow: hidden;
            cursor: pointer;
          }
    
          
    .imgSS {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          /* .imgSS::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemSS:hover .imgSS::before {
            transform: scale(1.2);
          } */
          
    .txtSS {
      padding: 4rem;
      padding-top: 3rem;
    }
    
    .txtSS h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .txtSS p {
      font-size: 1.6rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtSS p strong {
      font-weight: 600;
    }
    
    /* /IST block */
    
    
    .gridIST {
      display: grid;
      grid-template-columns:1fr 1fr;
      gap: 7rem;
      width: 100%; 
      margin-bottom: 9rem;
    }
    
    .itemIST {
      border-radius: 2rem;
      border-style: solid;
      border-width: 2.4px;
      overflow: hidden;
      }
    .imgIST {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .itemIST {
            position: relative;
            overflow: hidden;
            cursor: pointer;
          }
          
          .itemISTNot {
            position: relative;
            overflow: hidden;
            cursor: default !important;
          }
    
    
          
    .imgIST, .imgISTNot {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          /* .imgIST::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemIST:hover .imgIST::before {
            transform: scale(1.2);
          }
           */
          
          /* .imgISTNot::before {
            display:none
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemISTNot:hover .imgISTNot::before {
            transform: scale(1);
          } */
    
          
    .txtIST {
      padding: 4rem;
      padding-top: 3rem;
    }
    
    .txtIST h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .txtIST p {
      font-size: 1.6rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtIST p strong {
      font-weight: 600;
    }
    
    .txtIST ul {
      font-size: 2rem;
      line-height: 1.2;
      font-weight: 400;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    
    
    }
    
    .txtIST ul li {
      padding-left: 2rem;
      margin-bottom: 0.4rem;
      position: relative;
    }
    
    
    .txtIST ul li:before {
      content: "\2022";
      font-size: 2.6rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 900;
      color: var(--green);
      top: -0.5rem;
    }
    
    
    /* /IST block */
    
    
    /* about us */
    
    
    
    .aboutVideoGrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 100%; /* Ensure it uses full width for percentage calculations */
    }
    
    .splitLineTxtGrid {
      display: grid;
      grid-template-columns: 4px calc(100% - 4px);
      width: 100%; /* Ensure it uses full width for percentage calculations */
    
    }
    
    .splitLineTxtGrid .fatLineOuter {
          position: relative;
        width: 4px;
        border-left: 1.5px solid #aaaaaa;
        height: 100%;
        float:left;
        margin-top: unset;
        margin-bottom: unset
      }
    .splitLineTxtGrid .fatLineInner {
        position: absolute;
        left: -1.5px; 
        top:25%  
        width: 4px; 
        height: 50%; 
        background: var(--green); 
        z-index: 10;
      }
    .aboutTxt {
      padding-right: 8rem;
      padding-left: 6rem;
    }
    
    .aVideoWrapper {
      position: relative;
      width: 100%;
      /* max-width: 800px; */
      margin: 0 auto;
      padding-top: 56.25%;
      /* 16:9 */
      background: #000;
      overflow: hidden;
    }
    
    .aboutVideo {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .aboutTxt h1 {
      font-size: 3.6rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green)
    }
    .aboutTxt h1 span {
      color: white;
    }
    .aboutTxt p {
      font-size: 2rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      color: white;
    }
    .aboutTxt p strong {
      font-weight: 600;
    }
    
    
    /* fifty line fifty block */
    
    .gridFLF {
      display: grid;
      grid-template-columns: calc(50% + 4.5rem - 2px) 4px calc(50% - 4.5rem - 2px);
      width: 100%; /* Ensure it uses full width for percentage calculations */
    }
    
    .imgFLF  {
      width:100%;
      padding-right: 6rem;
    }
    
    .imgFLF .imgArea {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 66.67%; /* 380/570 * 100% = 66.67% */
      width:100%;
    }
    .txtFLF {
      padding: 6rem;
      padding-left: 6.4rem;
    padding-right: 0;
    }
    
    .txtFLF h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green)
    }
    .txtFLF h2 span {
      color: white;
    }
    .txtFLF p {
      font-size: 1.6rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      color: white;
    }
    .txtFLF p strong {
      font-weight: 600;
    }
    .gridFLF .fatLineOuter {
      position: relative;
      width: 4px;
      border-left: 1.5px solid #aaaaaa;
      margin-top: 6rem;
      height: calc(100% -30rem);
      margin-bottom: 24rem;
    }
    
    /* /fifty line fifty block */
    
    
    /* masthead block */
    .mT5 {
      margin-top: 0.5rem;
     }
     .mt3 {
       margin-top:3rem;
      }
    
    .gridMast {
      display: grid;
      grid-template-columns: calc(50% - 4.5rem)  calc(50% + 4.5rem);
      width: 100%; /* Ensure it uses full width for percentage calculations */
    }
    
    
    
    
    .imgMast {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 56.25%; 
      width:100%;
    }
    .txtMast {
      padding: 0 ;
    }
    
    
    .txtMast h1 {
      font-size: 3.6rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green)
    }
    .txtMast h1 span {
      color: white;
    }
    .txtMast p {
      font-size: 2rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      color: white;
    }
    .txtMast p strong {
      font-weight: 600;
    }
    .txtMast .txtMastArea .fatLineOuter {
      position: relative;
      width: 4px;
      border-left: 1.5px solid #aaaaaa;
      height: 100%;
      float:left;
    }
    .txtMast .txtBlock .fatLineInner {
      position: absolute;
      top: 25%;
      left: -1.5px;   
      width: 4px; 
      height: 50%; 
      background: var(--green); 
      z-index: 10;
    }
    .txtMast .txtMastArea .txtBlock {
      padding-left: 5rem;
      padding-right: 7rem;
      width: 100%;
      border-left: 1.5px solid #aaaaaa;
      position:relative;
    }
    .txtMast .txtMastArea .txtBlockISS {
      padding-right: 0;
    }
    
    .txtMastASD {
      padding-top: 6rem;
      padding-bottom: 6rem;
    }
    
    
    
    
    
    
    
    .txtMastCAR h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green);
    }
    .txtMastCAR h3 {
      font-size: 2rem;
      line-height: 1.1;
      font-weight: 500;
      margin-bottom: 1.7rem;
      color: var(--green);
    }
    .txtMastCAR p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.7rem;
      color: var(--darkGrey);
    }
    .txtMastCAR p strong {
      font-weight: 600;
    }
    .txtMastCAR ul {
      font-size: 1.7rem;
      line-height: 120%;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
      color: var(--darkGrey);
    
    }
    
    .txtMastCAR ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .txtMastCAR ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      color: var(--green);
      top: 0;
    }
    
    
    
    
    .txtMastASD h1 {
      font-size: 3.6rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--blue)
    }
    .txtMastASD h1 span {
      color: white;
    }
    
    
    
    .txtMastASD h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--blue)
    }
    .txtMastASD h2 span {
      color: white;
    }
    
    .txtMastASD .txtBlock .fatLineInner {
      background: var(--blue); 
    }
    .txtMastASD .txtMastArea .txtBlock {
      padding-left: 5rem;
      padding-right: 7rem;
      width: 100%;
      border-left: 1.5px solid #aaaaaa;
      position:relative;
    }
    
    
    .txtMastASD p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      text-transform: none;
      color: white;
    }
    
    
    
    .txtMastAbout {
      /* padding-top: 6rem;
      padding-bottom: 6rem; */
    }
    .pl5 {
      padding-left: 5rem;
    }
    
    
    .txtMastAbout h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green)
    }
    .txtMastAbout h2 span {
      color: var(--darkGrey);
    }
    
    .txtMastAbout .txtBlock .fatLineInner {
      background: var(--green); 
    }
    .txtMastAbout .txtMastArea .txtBlock {
      padding-left: 5rem;
      padding-right: 7rem;
      width: 100%;
      border-left: 1.5px solid #aaaaaa;
      position:relative;
    }
    
    
    .txtMastAbout p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      text-transform: none;
      color: var(--darkGrey);
    }
    
    .txtMastAbout2 h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green)
    }
    
    .txtMastAbout2 p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      text-transform: none;
      color: white;
    }
    
    .timelineArea h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green)
    }
    
    .timelineContent h3 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.4rem;
      color: var(--green)
    }
    
    
    .timelineContent p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      text-transform: none;
      color: var(--darkGrey);
    }
    
    
    
    
    .logoHero {
      display: inline-block;
      vertical-align: middle;
      max-width: 12rem;
      max-height: 5rem;
      margin-right: 3rem;
    }
    .logoHero:last-of-type {
      margin-right: 0;
    }
    
    .txtMastISS {
      min-height: 36rem;
    }
    
    
    .txtMastTE {
      min-height: 36rem;
    }
    
    .txtMastTE p {
      font-size: 2.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      color: white;
    }
    
    
    .txtMast .txtMastArea .txtBlockTE {
      padding-right: 0;
    }
    .txtMast .txtMastArea .txtBlockTE h1,
    .txtMast .txtMastArea .txtBlockTE h2,
    .txtMast .txtMastArea .txtBlockTE ul li::before {
      color: var(--orange);
    }
    
    .txtMast .txtMastArea .txtBlockTE ul {
      font-size: 1.7rem;
      line-height: 120%;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
      color: white;
    
    }
    
    .txtMast .txtMastArea .txtBlockTE ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .txtMast .txtMastArea .txtBlockTE ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      top: 0;
    }
    
    .txtMast .txtMastArea .txtBlockTE  h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .txtMast .txtBlockTE .fatLineInner {
      background: var(--orange); 
    }
    
    
    
    
    
    
    
    .txtMast .txtMastArea .txtBlockTE {
      padding-right: 0;
    }
    .txtMast .txtMastArea .txtBlockTE h1,
    .txtMast .txtMastArea .txtBlockTE h2,
    .txtMast .txtMastArea .txtBlockTE ul li::before {
      color: var(--orange);
    }
    
    .txtMast .txtMastArea .txtBlockTE ul {
      font-size: 1.7rem;
      line-height: 120%;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
      color: white;
    
    }
    
    .txtMast .txtMastArea .txtBlockTE ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .txtMast .txtMastArea .txtBlockTE ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      top: 0;
    }
    
    .txtMast .txtMastArea .txtBlockTE  h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .txtMast .txtBlockTE .fatLineInner {
      background: var(--orange); 
    }
    
    
    
    
    
    
    
    
    
    
    
    /* reputation block */
    
    .headerREP {
      width: 100%;
      padding-top: 6rem;
      padding-bottom: 4rem;
    }
    .headerREP h2 {
    color: var(--green);
    }
    .headerREP p {
    font-size: 2rem;
    }
    .headerREP p strong {
      font-weight: 600;
    }
    
    .gridREP {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7rem;
      width: 100%;
      padding-bottom: 9rem;
    }
    
    .itemREP {
      position: relative;
      border-radius: 2rem;
      border: 2.4px solid;
      overflow: hidden;   /* keeps children within border */
      cursor: pointer;
      border-color: var(--darkGrey);
      background-color: white;
    }
    
    .imgREP {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding-bottom: 67%;
      overflow: hidden;
      z-index: 1;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      /* remove top corners rounding */
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    .imgSpace {
      padding-bottom: 67%;
      overflow: hidden;
    width:100%;
    }
    
    
    /* .imgREP::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: inherit;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    
      border-bottom-left-radius: inherit;
      border-bottom-right-radius: inherit;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    
      transition: transform 0.6s ease;
      transform-origin: center center;
      transform: scale(1);
    } */
    /* 
    .itemREP:hover .imgREP::before {
      transform: scale(1.2);
    } */
    .txtREP {
      padding: 4rem;
      padding-top: 4rem;
    }
    
    .txtREP h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
      color: var(--green);
    }
    .txtREP p {
      font-size: 1.6rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtREP p strong {
      font-weight: 600;
    }
    
    /* /specialist services block */
    
    
    /* home - logo carousel */
    .logosPad {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }
    .logosBlock {
      overflow: hidden;
      position: relative;
      height: 14rem;
      width:100%;
    }
    
    .logosTrack {
      position: absolute;
      display: inline-block;
      white-space: nowrap;
      will-change: transform;
    }
    
    .logosBlock img {
      max-height: 8rem;
      height: auto;
      width: auto;
      max-width: 17rem;
      vertical-align: middle;
      margin-right: 5rem;
      display: inline-block;
      opacity: 0.65;
    }
    .gradLeft {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 9rem;
      height: 14rem; /* Ensure the height is defined */
      background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
      z-index: 10;
    }
    
    .gradRight {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 9rem;
      height: 14rem; /* Ensure the height is defined */
      background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
      z-index: 10;
    }
    
    /* security solutions list */
    
    .gridSecSol {
      display: grid;
      grid-template-columns:1fr 1fr 1fr;
      gap: 5.4rem;
      width: 100%; 
    }
    
    .itemSecSol {
      border-radius: 2rem;
      border-style: solid;
      border-width: 1px;
      overflow: hidden;
      }
    .imgSecSol {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .itemSecSol {
            position: relative;
            overflow: hidden;
            cursor: pointer;
          }
    
          
    .imgSecSol {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          /* .imgSecSol::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemSecSol:hover .imgSecSol::before {
            transform: scale(1.2);
          } */
          .itemSecSol:hover,
          .itemSecSol.hovered {
          --lightGrey: white;
          }
          
    .txtSecSol {
      padding: 2.6rem;
      padding-bottom: 9rem;
    }
    .moreAbsolute {
      position: absolute;
      bottom: 3.4rem;
      left: 2.6rem;
    }
    
    .moreCaption {
      position: absolute;
    }
    
    .txtSecSol h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
    }
    .txtSecSol p {
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtSecSol p strong {
      font-weight: 600;
    }
    
    /* /specialist services block */
    
    
    
    /* split columns of text-wrap:  */
    .columnSplit {
      column-count: 2;
      column-gap: 5rem;
      column-fill: balance; /* Try to even out columns */
      widows: 2;
      orphans: 2;
    }
    .columnSplitWide {
      column-gap: 9rem;
    }
    
    /* Prevent breaking inside structured elements */
    .columnSplit h2,
    .columnSplit h3,
    .columnSplit h4,
    .columnSplit ul,
    .columnSplit ol,
    .columnSplit li {
      break-inside: avoid;
      -webkit-column-break-inside: avoid;
      page-break-inside: avoid;
    }
    
    /* Paragraphs may break — but only naturally, not mid-word */
    .columnSplit p {
      break-inside: auto;  /* allow natural split if necessary */
      text-wrap: pretty;   /* more graceful wrapping in modern browsers */
    }
    
    /* Optional: prevent single lines from dangling */
    .columnSplit p:last-child {
      margin-bottom: 0;
    }
    
    /* Lists look cleaner this way */
    .columnSplit ul,
    .columnSplit ol {
      margin: 1rem 0;
      padding-left: 1.5rem;
    }
    
    
    /* category list T1*/
    
    .gridCatListT1 {
      display: grid;
      grid-template-columns:1fr 1fr 1fr;
      gap: 3rem;
      width: 100%; 
    }
    
    .itemCatListT1 {
      border-radius: 2rem;
      border-style: solid;
      border-width: 1px;
      overflow: hidden;
      }
    .imgCatListT1 {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .imgCatListT1Mod {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    
    .itemCatListT1 {
            position: relative;
            overflow: hidden;
          //  cursor: pointer;
          }
    
          
    .imgCatListT1 {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          .imgCatListT1Mod {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          
          /* .imgCatListT1Mod::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemCatListT1Mod:hover .imgCatListT1Mod::before {
            transform: scale(1.2);
          } */
          /* .imgCatListT1Mod:hover,
          .imgCatListT1Mod.hovered {
          --lightGrey: white;
          } */
          
    .txtCatListT1 {
      padding: 2.6rem;
      padding-bottom: 3.6rem;
    }
    
    .txtCatListT1Mod {
      padding-bottom: 10rem;
    }
    .moreAbsolute {
      position: absolute;
      bottom: 3.4rem;
      left: 2.6rem;
    }
    
    .txtCatListT1 h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
    }
    .txtCatListT1 p {
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtCatListT1 p strong,
    .txtCatListT1Mod p strong {
      font-weight: 600;
    }
    
    .txtCatListT1 ul {
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    
    
    }
    
    .txtCatListT1 ul li {
      padding-left: 1.6rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .txtCatListT1 ul li:before {
      content: "\2022";
      font-size: 1.6rem;
      line-height: 1.4;
      width: 1.6rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 900;
      color: var(--green);
      top: -0.3rem;
    }
    
    
    .txtCatListT1 ol {
      margin-bottom: 1rem;
      counter-reset: my-awesome-counter;
    }
    
    .txtCatListT1 ol li {
      font-weight: 300;
      font-size: 1.7rem;
      line-height: 120%;
      margin-bottom: 1rem;
      /* color: #ABACAE;  */
      counter-increment: my-awesome-counter;
    }
    
    .txtCatListT1 ol li {
      padding-left: 2rem;
      position: relative;
    }
    
    .txtCatListT1 ol li:before {
      content: counter(my-awesome-counter);
      width: 2rem;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      padding-left: 0;
      font-weight: 500;
      font-size: 1.7rem;
      line-height: 120%;
      color: var(--lightBlue);
    }
    
    .txtCatListT1Mod p {
      font-size: 1.8rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    
    }
    
    .hBlockTxt p {
      font-size: 2rem;
      line-height: 1.4;
      margin-bottom: 2.6rem;
    
    }
    .hBlockTxt h2 {
    color: white;
    }
    
    
    .imgCOIB {
      position: relative;
      padding-bottom: 56.5%;
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
    }
    
    /* /specialist services block */
    
    
    /* promises */
    .itemPromise {
      position:relative;
      padding-left: 5rem;
    }
    .itemPromise .tickBox {
      position: absolute;
      width: 4rem;
      height: 4rem;
      top:0;
      left:0;
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
      background-image: url('/gfx/greenTick.webp');
    }
    .headerPromise {
      width: 100%;
      padding-bottom: 4rem;
    }
    .headerPromise h2 {
    color: var(--green);
    }
    .headerPromise p {
    font-size: 2rem;
    }
    .headerPromise p strong {
      font-weight: 600;
    }
    .headerPromise {
      padding-top: 0;
    }
    
    
    .gridPromises {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 6rem;
    }
    
    .gridPromises .column {
      display: flex;
      flex-direction: column;
      gap: 0; /* spacing between items, adjust if needed */
    }
    
    .itemPromise {
      display: flex;
      flex-direction: column;
    }
    
    
    .itemPromise h3 {
      font-size: 1.7rem;
      line-height: 1.3;
      font-weight: 500;
      margin-bottom: 0.4rem;
    }
    .itemPromise p {
      font-size: 1.7rem;
      line-height: 1.3;
      font-weight: 400;
      margin-bottom: 2rem;
    }
    .itemPromise p strong {
      font-weight: 600;
    }
    
    
    /* slides */
    
    .slideGridOnWhite {
      display: grid;
      grid-template-columns: 43.5% 56.25%;
      gap: 0;
      width: 100%;
    }
    .slideGridOnGreen {
      display: grid;
      grid-template-columns: 43.5% 56.25%;
      gap: 0;
      width: 100%;
    }
    
    .slideGridOnDark {
      display: grid;
      grid-template-columns: 56.25% 43.5%;
      gap: 0;
      width: 100%;
    }
    
    
    .slideImg {
      padding-bottom: 75%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }
    .slideTxt {
      padding-top:3rem;
    padding-bottom:3rem;
    padding-left:6rem;
    padding-right: 6rem;
    }
    .txtOnWhite {
      padding-right: 14rem;
    }
    .txtOnGreen {
      padding-right: 14rem;
    }
    
    .txtOnDark {
      padding-left: 14rem;
    }
    
    
    .slideTxt h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
    }
    .slideTxt h3 {
      font-size: 2rem;
      text-transform: uppercase;
      line-height: 1.1;
      font-weight: 500;
      margin-bottom: 1.7rem;
    }
    .slideTxt p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.7rem;
    }
    .slideTxt p strong {
      font-weight: 600;
    }
    .slideTxt ul {
      font-size: 1.7rem;
      line-height: 120%;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    }
    
    .slideTxt ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .slideTxt ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      top: 0;
    }
    
    .txtOnWhite h2,
    .txtOnWhite ul li:before {
      color: var(--orange);
    }
    .txtOnWhite p,
    .txtOnWhite h3,
    .txtOnWhite ul li {
      color: var(--darkGrey);
    }
    
    
    .txtOnGreen h2,
    .txtOnGreen ul li:before {
      color: var(--green);
    }
    .txtOnGreen p,
    .txtOnGreen h3,
    .txtOnGreen ul li {
      color: white;
    }
    
    
    
    .txtOnDark h2,
    .txtOnDark ul li:before {
      color: var(--orange);
    }
    .txtOnDark p,
    .txtOnDark h3,
    .txtOnDark ul li {
      color: white;
    }
    
    
    /* meet the team */
    .teamHead {
      padding-bottom: 3rem;
    }
    .teamHead h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 0;
      color: var(--green);
    }
    
    .gridTeam {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 5.4rem;
      width: 100%;
    }
    
    .areaPad {
      padding-bottom: 120%;
      display: block;
      width: 100%;
    }
    
    .itemTeam {
      position: relative;
      border-radius: 2rem;
      border: 2px solid var(--green);
      overflow: hidden;
      background-color: white;
    }
    
    /* The image block — only top corners rounded */
    .imgTeam {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top center;
      padding-bottom: 120%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      border-top-left-radius: calc(2rem - 2px);
      border-top-right-radius: calc(2rem - 2px);
      z-index: 10;
      transition: top 0.3s ease;
      /* will-change: top; */
    
    }
    
    /* Biography section (hidden underneath the image) */
    .biog {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 2.4rem;
      background-color: white;
      color: var(--darkGrey);
      box-sizing: border-box;
      z-index: 1;
    }
    
    /* Text section at bottom */
    .txtTeam {
      padding: 2.6rem 2.6rem 4rem;
      padding-top: 1.8rem;
      background-color: var(--green);
      text-align: center;
      border-bottom-left-radius: calc(2rem - 2px);
      border-bottom-right-radius: calc(2rem - 2px);
    }
    
    .txtTeam h2 {
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 0;
      color: white;
    }
    
    .txtTeam h3 {
      font-size: 1.7rem;
      font-weight: 500;
      margin-bottom: 0;
      color: white;
    }
    
    .txtTeam p {
      font-size: 1.4rem;
      line-height: 1.4;
      margin-bottom: 1.6rem;
    }
    
    /* Plus/minus toggle button */
    .biogPlus {
      width: 3rem;
      height: 3rem;
      position: absolute;
      left: calc(50% - 1.5rem);
      bottom: 0;
      background-color: white;
      border-left: 1px solid var(--green);
      border-top: 1px solid var(--green);
      border-right: 1px solid var(--green);
      border-top-left-radius: 0.4rem;
      border-top-right-radius: 0.4rem;
      background-image: url('/gfx/biogPlus.webp');
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 20;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    /* Active state (minus) */
    .biogPlus.active {
      background-color: var(--green);
      border-left: 1px solid white;
      border-top: 1px solid white;
      border-right: 1px solid white;
      background-image: url('/gfx/biogMinus.webp');
    }
    
    
    /* meet the team */
    
    .gridTeam2 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 3.4rem;
      width: 100%;
    }
    
    
    .itemTeam2 {
      position: relative;
      border-radius: 2rem;
      border: 1.6px solid var(--green);
      overflow: hidden;
      background-color: white;
    }
    
    /* The image block — only top corners rounded */
    .imgTeam2 {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top center;
      padding-bottom: 120%;
      width: 100%;
      border-top-left-radius: 1.2rem;
      border-top-right-radius: 1.2rem;
    
    }
    
    
    
    /* Text section at bottom */
    .txtTeam2 {
      padding: 1.8rem;
      padding-top: 1.8rem;
      background-color: white;
      text-align: center;
      border-bottom-left-radius: 1.2rem;
      border-bottom-right-radius: 1.2rem;
    }
    
    .txtTeam2 h2 {
      font-size: 1.6rem;
      font-weight: 600;
      margin-bottom: 0;
      color: var(--green);
    }
    
    .txtTeam2 h3 {
      font-size: 1.4rem;
      font-weight: 500;
      margin-bottom: 0;
      color: var(--green);
    }
    
    .txtTeam2 p {
      font-size: 1.4rem;
      line-height: 1.4;
      margin-bottom: 1.6rem;
    }
    
    
    /* ASD blocks */
    
    
    .gridASD {
      display: grid;
      grid-template-columns:1fr 1fr;
      gap: 7rem;
      width: 100%; 
      margin-bottom: 5rem;
    }
    
    .itemASD {
      border-radius: 2rem;
      border-style: solid;
      border-width: 2.4px;
      overflow: hidden;
      background-color: var(--midGrey);
      border-color: var(--blue);
      }
    .imgASD {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .itemASD {
            position: relative;
            overflow: hidden;
            cursor: pointer;
          }
          
          .itemASDNot {
            position: relative;
            overflow: hidden;
            cursor: default !important;
          }
    
    
          
    .imgASD, .imgASDNot {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
            background-size: cover;
    
          }
          
          /* .imgASD::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemASD:hover .imgASD::before {
            transform: scale(1.2);
          } */
          
          
          /* .imgASDNot::before {
            display:none
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemASDNot:hover .imgISTNot::before {
            transform: scale(1);
          } */
    
          
    .txtASD {
      padding: 4rem;
      padding-top: 3rem;
    }
    
    .txtASD h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--blue);
    }
    .txtASD h3 {
      font-size: 2rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
      color: var(--blue);
    }
    
    .txtASD p {
      font-size: 1.6rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
      color: white;
    }
    .txtASD p strong {
      font-weight: 600;
    }
    
    .txtASD ul {
      font-size: 2rem;
      line-height: 1.2;
      font-weight: 400;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    
    
    }
    
    .txtASD ul li {
      padding-left: 2rem;
      margin-bottom: 0.4rem;
      position: relative;
    }
    
    
    .txtASD ul li:before {
      content: "\2022";
      font-size: 2.6rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 900;
      color: var(--blue);
      top: -0.5rem;
    }
    
    
    /* /ASD blocks */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* case studies list */
    
    .gridCaseList {
      display: grid;
      grid-template-columns:1fr 1fr 1fr;
      gap: 5.4rem;
      width: 100%; 
    }
    
    .itemCaseList {
      border-radius: 2rem;
      border-style: solid;
      border-width: 1.8px;
      border-color: var(--green);
      overflow: hidden;
      background-color: white;
      }
    .imgCaseList {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding-bottom: 67%;
    }
    .itemCaseList {
            position: relative;
            overflow: hidden;
            cursor: pointer;
          }
    
          
    .imgCaseList {
            position: relative;
            overflow: hidden;
            padding-bottom: 67%;
          }
          
          /* .imgCaseList::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: transform 0.6s ease;
            transform-origin: center center;
            transform: scale(1);
          }
          
          .itemCaseList:hover .imgCaseList::before {
            transform: scale(1.2);
          } */
          .itemCaseList:hover,
          .itemCaseList.hovered {
          --lightGrey: white;
          }
          
    .txtCaseList {
      padding: 2.6rem;
      padding-bottom: 9rem;
      color: var(--darkGrey);
    }
    .moreAbsolute {
      position: absolute;
      bottom: 3.4rem;
      left: 2.6rem;
    }
    
    .moreCaption {
      position: absolute;
    }
    
    .txtCaseList h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
      color: var(--green);
      text-transform: uppercase;
    }
    .txtCaseList p {
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.6rem;
    }
    .txtCaseList p strong {
      font-weight: 600;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .caseDetailImgGrid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 3.6rem;
    }
    
    .caseDetailImgLink {
      display: block;
      position: relative;
      overflow: hidden; /* keeps scaling inside */
      aspect-ratio: 7 / 5; /* optional: enforces aspect ratio if you want one */
    }
    
    .caseDetailImg {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
    }
    
    .caseDetailImg::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: inherit;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      transition: transform 0.6s ease;
      transform: scale(1);
      z-index: 0;
    }
    
    /* Scale on hover */
    .caseDetailImgLink:hover .caseDetailImg::before {
      transform: scale(1.2);
    }
    
    /* Magnifier overlay */
    .magnifier {
      position: absolute;
      inset: 0;
      background-image: url(/gfx/magnifier.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 3.6rem;
      background-color: rgba(255,255, 255, 0.75);
      opacity: 0;
      transition: opacity 0.5s ease;
      z-index: 1;
    }
    
    .caseDetailImgLink:hover .magnifier {
      opacity: 1;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    /* testimonials list */
    
    .gridTestimonialList {
      display: grid;
      grid-template-columns:1fr 1fr 1fr;
      gap: 5.4rem;
      width: 100%; 
    }
    
    .itemTestimonialList {
      border-radius: 2rem;
      border-style: solid;
      border-width: 1.8px;
      border-color: var(--green);
      overflow: hidden;
      background-color: white;
      }
    
          
    .txtTestimonialList {
      padding: 2.6rem;
      color: var(--darkGrey);
    }
    
    .txtTestimonialList h2 {
      font-size: 2rem;
      line-height: 1.2;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.7rem;
      color: var(--green);
      font-style: italic;
    }
    .txtTestimonialList h2::before {
      content:'\201C';
      font-weight: 600;
      font-size: 4rem;
      line-height: 1rem;
      display:inline-block;
      vertical-align: bottom;
      font-style: italic;
      color: var(--darkGrey);
      opacity: 0.3;
    padding-right: 0.5rem;
    }
    .txtTestimonialList h2::after {
      content:'\201D';
      font-weight: 600;
      font-size: 4rem;
      line-height: 1rem;
      display:inline-block;
      vertical-align: bottom;
      font-style: italic;
      color: var(--darkGrey);
      opacity: 0.3;
      padding-left: 0.5rem;
      
    }
    
    .txtTestimonialList p {
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.4rem;
    }
    .txtTestimonialList p strong {
      font-weight: 600;
    }
    .txtTestimonialList .author {
      font-size: 1.4rem;
      line-height: 1.2;
      font-weight: 600;
      margin-bottom: 1.6rem;
    color: var(--green);
      }
    .txtTestimonialList .edited {
        font-size: 1rem;
        line-height: 1;
        font-weight: 400;
        margin-bottom: 1.6rem;
        text-transform: uppercase;
      color: var(--green);
      margin-top: -0.8rem;
        }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* faqs */
    
    
    .faqArea h2 {
      padding-top: 4rem;
      padding-bottom: 2rem;
      color: var(--green);
      padding-left: 0;
      
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 0;
    
    }
    
    
    .revealSet {
      background-color: white;
      border: 1px solid var(--green);
      margin-bottom: 0;
      border-bottom: none;
    }
    
    .revealSet:last-of-type {
      background-color: white;
      border: 1px solid var(--green);
      margin-bottom: 0;
    }
    
    
    .revealSet>.open {
      display: block;
      text-decoration: none;
      transition: all 0.2s linear;
      position: relative;
      border-radius-top-right: 1.4rem;
    }
    
    /* .revealSet>.open .fa {
      position: absolute;
      text-align: left;
      left: 2rem;
      top: 1rem;
      width: 2.4rem;
      height: 2.4rem;
    } */
    
    .ta {
      box-sizing: border-box;
      display: block;
      font-weight: 500;
      font-size: 1.7rem;
      line-height: 120%;
      padding-top: 1rem;
      padding-bottom: 1rem;
      width: 100%;
      color: var(--darkGrey);
      padding-left: 4rem;
      padding-right: 6rem;
    
    
    }
    
    .highLight {
      background-color: var(--lightGrey);
      color: var(--darkGrey);
      transition: all 0.2s ease;
      border-bottom: 1px solid var(--green);
      /* border-left: 0.6rem solid #0F6B4A; */
      padding-left: 4rem;
    
    
    }
    
    .lowLight {
      background-color: white;
      color: var(--darkGrey);
      transition: all 0.2s ease;
      /* border-left: 0.6rem solid white; */
      padding-left: 4rem;
    
    
      /* padding-left: 4rem; */
      /* border-bottom: 1px solid rgb(55, 100, 161); */
    
    }
    
    .revealPlus::before {
      content: "";
      position: absolute;
      transition: all 0.2s ease;
      right: 0;
      top: 0;
      width: 3.7rem;
      height: 100%;
      background-image: url('/gfx/arrowDownGreen.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
      transition: all 0.2s linear;
      border-left: 1px solid var(--green);
    
    
    }
    
    .revealMinus::before {
      content: "";
      position: absolute;
      transition: all 0.2s ease;
      right: 0;
      top: 0;
      width: 3.7rem;
      height: 100%;
      background-image: url('/gfx/arrowUpWhite.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
      border-left: 1px solid var(--green);
      background-color: var(--green);
    
    }
    
    /* .open:hover .fa::before, .open:focus .fa::before {
      background-image: url('/gfx/arrowDownWhite.png');
      background-color: var(--green);
    }
    .open:active .fa::before, .open:active .fa::before {
    
    } */
    /* reveal content */
    .revealContent {
      /* margin-bottom: 2rem; */
      padding: 2rem;
      padding-bottom: 0.3rem;
      padding-left: 4rem;
      padding-right: 6rem;
    
      /* border-bottom: 1px solid #494949; */
    }
    
    .revealContent p {
      font-size: 1.7rem;
    line-height: 1.4;
    font-weight: 400;
    margin-bottom: 1.7rem;
    color: var(--darkGrey);
    }
    
    
    .revealContent ul {
      font-size: 1.7rem;
      line-height: 1.1;
      font-weight: 400;
      margin-bottom: 1.7rem;
      padding-left: 0; /* Remove default padding */
    }
    
    .revealContent ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .revealContent ul li:before {
      content: "\2022";
      font-size: 2rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      color: var(--green);
      top: -0.4rem;;
    }
    
    .revealContent a, .revealContent a:focus {
      font-weight: 600;
    }
    .revealContent a:hover, .revealContent a:active {
      font-weight: 600;
      margin-bottom: 0.3rem;
      border-bottom: 1px solid var(--darkGrey);
    }
    
    
    .revealContent {
      display: none;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* footer */
    .gridFOOT {
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 7rem;
      width: 100%;
    }
    .footerPad {
      padding-top: 6rem;
      padding-bottom: 6rem;
      border-top-color: var(--green);
      border-top-style: solid;
      border-top-width: 3px;
    }
    .footerLogo {
      width: 100%;
      margin-bottom: 3.6rem;
    }
    .footerLogo img {
      width: 28rem;
    }
    
    .phoneTxt a {
      display: block;
      width: 100%;
      color: var(--green);
    }
    
    .phoneTxt a:hover,
    .phoneTxt a:focus  {
      color: white;
    }
    
    .phoneTxt p {
      font-size: 2.4rem;
      line-height: 1.4;
      font-weight: 500;
    }
    .phoneTxt {
      margin-bottom: 3.6rem;
    }
    .addressTxt {
      margin-bottom: 3.6rem;
    }
    .addressTxt p {
      font-size: 1.8rem;
      line-height: 1.3;
      margin-bottom: 0;
      font-weight: 500;
      color: white;
    }
    .registeredTxt {
      margin-bottom: 1.8rem;
    }
    .registeredTxt p {
      font-size: 1.2rem;
      line-height: 1.4;
      margin-bottom: 0;
      font-weight: 400;
      color: white;
    
    }
    .accreditations {
      margin-bottom: 4rem;
    }
    
    .accreditations img {
      max-height: 6.8rem;
      width: auto;
      display: inline-block;
      margin-right: 1.6rem;
      vertical-align: middle;
    }
    
    .accreditations img:last-child {
      margin-right: 0;
    }
    
    .legalNav {
      margin-bottom: 1.2rem;
    }
    
    .legalNav ul li {
      display: inline-block;
      font-size: 1.5rem;
      line-height: 1.2;
      margin-bottom: 0;
      font-weight: 500;
    
    }
    
    .legalNav ul li a::after {
      content: "/";
      padding-left: 0.35rem;
      padding-right: 0.2rem;
    }
    
    .legalNav ul li:last-child a::after {
      content: "";
      padding: 0;
    }
    
    
    .legalNav ul li a {
      display: block;
      color: white;
    }
    
    .legalNav ul li a:hover, 
    .legalNav ul li a:focus,
    .legalNav ul li a.selected {
      color: var(--green);
    }
    
    
    
    
    .legalSignoff {
      padding-bottom: 4rem;
    }
    
    .legalSignoff p {
      font-size: 1.5rem;
      line-height: 140%;
      margin-bottom: 1.6rem;
      font-weight: normal;
      color: white;
      opacity: 0.7;
    
    }
    
    .siteBy p {
      font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 0;
    font-weight: 400;
    color: white;
    }
    
    .siteBy a {
      color: white;
    }
    
    .siteBy a:hover,
    .siteBy a:focus {
      color: var(--green);
    }
    
    .socialTxt {
      margin-bottom: 3rem;
    }
    
    .socialTxt h3, .accreditations h3 {
      font-size: 1.8rem;
      line-height: 1.4;
      margin-bottom: 1rem;
      font-weight: 500;
      color: var(--green);
    
    }
    
    .socialTxt ul li {
      padding-left: 0;
    }
    
    .socialTxt ul li::before {
      padding-left: 0;
      display: none;
    }
    
    .socialTxt ul li {
      display: inline-block;
      margin-right: 1.4rem;
    }
    
    
    .socialTxt ul li img {
      max-height: 6rem;
    
    }
    
    .socialTxt ul li a {
      display:block;
      background-color: white;
    }
    
    .socialTxt ul li a:hover,
    .socialTxt ul li a:focus {
      background-color: var(--green);
    
    } 
    
    .copyright p {
      font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 0;
    font-weight: 400;
    color: white;
    }
    
    .copyright a {
      color: white;
    }
    
    .copyright a:hover,
    .copyright a:focus {
      color: var(--green);
    }
    
    
    /* slider */
    
    .bx-wrapper {
      position: relative;
      margin-bottom: 0;
      padding: 0;
      *zoom: 1;
      -ms-touch-action: pan-y;
      touch-action: pan-y;
    }
    .bx-wrapper img {
      max-width: 100%;
      display: block;
    }
    .bxslider {
      margin: 0;
      padding: 0;
      /*fix flickering when used background-image instead of <img> (on Chrome)*/
      -webkit-perspective: 1000;
    }
    ul.bxslider {
      list-style: none;
    }
    .bx-viewport {
      /* fix other elements on the page moving (in Chrome) */
      -webkit-transform: translateZ(0);
    }
    /** THEME
    ===================================*/
    .bx-wrapper {
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      border: none;
      background: transparent;
      position: relative;
    }
    
    /* LOADER */
    .bx-wrapper .bx-loading {
      min-height: 64px;
      background: url('/gfx/loading.webp') center center no-repeat;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 90;
    }
    /* PAGER */
    
    /* DIRECTION CONTROLS (NEXT / PREV) */
    
    .onWhite .bx-prev {
      background-image: url('/gfx/arrowLeftDarkGrey.png');
      border-color: var(--darkGrey);
      background-color: rgba(255,255,255,0.6);
    }
    .onWhite .bx-next {
      background-image: url('/gfx/arrowRightDarkGrey.png');
      border-color: var(--darkGrey);
      background-color: rgba(255,255,255,0.5);
    }
    .onWhite .bx-prev:hover,
    .onWhite .bx-prev:focus {
      background-color: var(--orange);
      background-image: url('/gfx/arrowLeftWhite.png');
      border-color: white;
    }
    .onWhite .bx-next:hover,
    .onWhite .bx-next:focus {
      background-color: var(--orange);
      background-image: url('/gfx/arrowRightWhite.png');
      border-color: white;
    }
    
    .onDark .bx-prev {
      background-image: url('/gfx/arrowLeftWhite.png');
      border-color: white;
      /* background-color: rgba(255,255,255,0.5); */
    }
    .onDark .bx-next {
      background-image: url('/gfx/arrowRightWhite.png');
      border-color: white;
      background-color: rgba(0,0,0,0.5);
    }
    .onDark .bx-prev:hover,
    .onDark .bx-prev:focus {
      background-color: var(--orange);
      background-image: url('/gfx/arrowLeftWhite.png');
      border-color: white;
    }
    .onDark .bx-next:hover,
    .onDark .bx-next:focus {
      background-color: var(--orange);
      background-image: url('/gfx/arrowRightWhite.png');
      border-color: white;
    }
    
    
    
    /* DIRECTION CONTROLS (NEXT / PREV) */
    
    .onGreen .bx-prev {
      background-image: url('/gfx/arrowLeftDarkGrey.png');
      border-color: var(--darkGrey);
      background-color: rgba(255,255,255,0.6);
    }
    .onGreen .bx-next {
      background-image: url('/gfx/arrowRightDarkGrey.png');
      border-color: var(--darkGrey);
      background-color: rgba(255,255,255,0.5);
    }
    .onGreen .bx-prev:hover,
    .onGreen .bx-prev:focus {
      background-color: var(--green);
      background-image: url('/gfx/arrowLeftWhite.png');
      border-color: white;
    }
    .onGreen .bx-next:hover,
    .onGreen .bx-next:focus {
      background-color: var(--green);
      background-image: url('/gfx/arrowRightWhite.png');
      border-color: white;
    }
    
    
    .onNeutral .bx-prev {
      background-image: url('/gfx/arrowLeftDarkGrey.png');
      border-color: white;
      background-color: rgba(255,255,255,0.6);
    }
    .onNeutral .bx-next {
      background-image: url('/gfx/arrowRightDarkGrey.png');
      border-color: white;
      background-color: rgba(255,255,255,0.5);
    }
    .onNeutral .bx-prev:hover,
    .onNeutral .bx-prev:focus {
      background-color: var(--green);
      background-image: url('/gfx/arrowLeftWhite.png');
      border-color: white;
    }
    .onNeutral .bx-next:hover,
    .onNeutral .bx-next:focus {
      background-color: var(--green);
      background-image: url('/gfx/arrowRightWhite.png');
      border-color: white;
    }
    
    
    
    
    
    
    
    
    
    /* contact */
    
    .contactContainer {
      width: 100%;
    }
    
    
    .contactGrid {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 6rem;
    }
    
    
    .contactTxt h2 {
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 1.7rem;
      color: var(--green);
    
    }
    .contactTxt h3 {
      font-size: 2rem;
      line-height: 1.1;
      font-weight: 500;
      margin-bottom: 1.7rem;
      color: var(--green);
    
    }
    .contactTxt p {
      font-size: 1.7rem;
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 1.7rem;
    }
    .contactTxt p strong {
      font-weight: 600;
    }
    
    
    .contactTxt {
      margin-bottom: 4rem;
    }
    
    
    .contactTxt p a, .contactTxt p a:active{
      font-weight: 600;
      color: var(--darkGrey);
    
    }
    .contactTxt p a:hover,   .contactTxt p a:focus {
      color: var(--green)
    }
    
    
    
    .google-maps {
      position: relative;
      padding-bottom: 125%; // This is the aspect ratio
      overflow: hidden;
      margin-top: 6rem;
      border: 1.2px solid var(--green);
    }
    
    .google-maps iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 100% !important;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    .bx-wrapper .bx-prev,
    .bx-wrapper .bx-next {
      display: block;
      border-style: solid;
      border-width: 1.4px;
      border-radius: 0.6rem;
      width: 4.4rem;
      height: 4.4rem;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      position: absolute;
    
      /* top: calc(50% - 2.4rem); */
    }
    .bx-wrapper .bx-prev {
      left: 4rem;
    }
    .bx-wrapper .bx-next {
      right: 4rem;
    }
    .bx-wrapper .bx-controls-direction a {
      position: absolute;
      top: 50%;
      margin-top: -2.2rem;
      outline: 0;
      width: 4.4rem;
      height: 4.4rem;
      text-indent: -9999px;
      z-index: 90;
    }
    .bx-wrapper .bx-controls-direction a.disabled {
      display: none;
    }
    
    .bx-wrapper .bx-prev.disabled,
    .bx-wrapper .bx-next.disabled {
      display: none;
    }
    
    
    
    
    /* 11022026 home slider */
    
    .explore { z-index: 50;}
    
    
    
    /* PAGER */
    .onNeutral .bx-pager {
      text-align: left;
      font-size: .85em;
      font-family: Arial;
      font-weight: bold;
      color: white;
      padding-top: 0;
      position: absolute;
      bottom: 4.8rem;
    }
    
    .onNeutral .bx-pager {
      max-width: 128rem;
      padding-left: 12rem;
      padding-right: 6rem;
      margin-left: auto;
      margin-right: auto;
    }
    .onNeutral .bx-pager.bx-default-pager a {
      background-color:white;
      text-indent: -9999px;
      display: block;
      width: 16px;
      height: 16px;
      margin: 0 8px;
      outline: 0;
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      border-radius: 8px;
    }
    .onNeutral .bx-pager.bx-default-pager a:hover,
    .onNeutral .bx-pager.bx-default-pager a.active,
    .onNeutral .bx-pager.bx-default-pager a:focus {
      background-color: var(--green);
    }
    .onNeutral .bx-pager-item,
    .onNeutral .bx-controls-auto .bx-controls-auto-item {
      display: inline-block;
      vertical-align: bottom;
      *zoom: 1;
      *display: inline;
    }
    .onNeutral .bx-pager-item {
      font-size: 0;
      line-height: 0;
    }
    
    .onNeutral .bx-prev,
    .onNeutral .bx-next {
      display: block;
      border-style: solid;
      border-width: 1.4px;
      border-radius: 0.6rem;
      width: 4.4rem;
      height: 4.4rem;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      position: absolute;
    
      /* top: calc(50% - 2.4rem); */
    }
    .onNeutral .bx-prev {
     left: 6rem;
    }
    .onNeutral .bx-next {
    right: 6rem;
    }
    .onNeutral .bx-controls-direction {
    }
    .onNeutral .bx-controls-direction a {
      outline: 0;
      width: 4.4rem;
      height: 4.4rem;
      text-indent: -9999px;
      z-index: 90;
      bottom: 3.4rem !important;
      top: unset;
    }
    .onNeutral .bx-controls-direction a.disabled {
      display: none;
    }
    
    .onNeutral .bx-prev.disabled,
    .onNeutral .bx-next.disabled {
      display: none;
    }
    
    .videoHomeBg video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .videoHomeBg {
      position: relative;
      width: 100%;
      height: 100%;
    }
    
    
    /* Make the bx-viewport relative so bottom:0 works */
    .bx-wrapper .bx-viewport {
      position: relative;
      overflow: hidden;
    }
    
    /* Position the explore button relative to the viewport */
    .HeroSliderContainer .explore {
      position: absolute;
      bottom: 0;          /* sticks to the bottom of the viewport */
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
    }
    
    .HeroSliderContainer .explore {
      margin: 0;
      padding: 0;
    }
    
    .heroTxtContainer {
      z-index: 15; /* above .videoMaskBg */
      pointer-events: auto; /* ensure text is selectable */
    }
    
    /* Buttons themselves */
    .more {
      z-index: 6; /* above everything inside the container */
      pointer-events: auto;
    }
    
    .videoHomeImg {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    }
    
    .numberSurround {
      position: relative;
      display: inline-block;
    }
    /* number Roundel */
    .numberRoundel {
      position:relative;
      display:block;
      width: 3.4rem;
      height: 3.4rem;
      /* Background-color: var(--blue); */
      border-radius: 1.7rem;
      border: solid 0.1rem white;
      font-size: 2.2rem;
      font-weight: 600;
      line-height: 1;
      padding-top: 0.6rem;
      padding-bottom: 0.6rem;
      text-align: center;
      color:white;
      z-index: 20;
    }
    
    .captionReveal {
      display: block;
      font-size: 1.4rem;
      font-weight: 400;
      line-height: 1.2;
      padding-left: 1.8rem;
      padding-right: 1.6rem;
      padding-top: 1.4rem;
      padding-bottom: 1.6rem;
      background-color: black;
      color:white;
      position:absolute;
      left: 1.7rem;
      top: 1.7rem;
      z-index: 10;
      border: solid 0.1rem white;
      min-width: 10rem;
      max-width: 18rem;
      opacity:0;
      transition:
          opacity 0.25s ease,
          transform 0.25s ease;
          border-radius: 1.7rem;
          cursor: default;
          border-bottom-right-radius: unset;
      }
    
    .numberRoundel:hover + .captionReveal {
        opacity: 0.85;
      }
    .numberRoundel {
        cursor: pointer;
        transition: transform 0.15s ease;
      }
      
      .numberRoundel:hover {
        transform: scale(1.15);
      }
      
      .imgKeyArea {
        width: 85.2rem;
        margin-left: auto;
        margin-right: auto;
        padding-top: 3.4rem;
        padding-bottom: 3.4rem;
      }
      .keyTxtP {
        font-size: 1.9rem;
        font-weight: 500;
        line-height: 1.2;
        padding-bottom: 1.2rem;
        margin:0;
        color:white;
      }
      .keyNum {
        position:relative;
        display:inline-block;
        width: 3.4rem;
        height: 3.4rem;
        /* Background-color: var(--blue); */
        border-radius: 1.7rem;
        border: solid 0.1rem white;
        font-size: 2.2rem;
        font-weight: 600;
        line-height: 1;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
        text-align: center;
        color:white;
        margin-right: 1rem;
      }
      .keyTxtA, .keyTxtB {
        color:white;
      }
      
      .keyBlock {
        column-count: 2;
        column-gap: 2rem;
      }
      
      .keyBlock p {
        break-inside: avoid;
      }
    .keyTxtA:hover {
        color:var(--blue);
      }
      .keyTxtB:hover {
        color:var(--green);
      }
    
      .keyTxtA:hover .keyNum,   .keyTxtB:hover .keyNum {
        Background-color: black;
      }
      
      
      
      
      
      
      .videoStdContainer {
        position: relative;
        width: 100vw;
        padding-top: 54%;
        /* 16:9 aspect ratio (9/16 = 0.5625) */
        overflow: hidden;
      }
      
      /* Video fills the container and scales responsively */
      .videoStdBg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Ensures video fills container proportionally */
        z-index: -1;
        pointer-events: none;
        /* Prevents video from interfering with interaction */
      }
      
      .videoStdBg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Ensures video fills container proportionally */
        z-index: 2;
        pointer-events: none;
        /* Prevents video from interfering with interaction */
      }
      
      
      .stdTxtContainer {
        width: 100%;
        z-index: 10;
        position: absolute;
        bottom: 0;
        left: 0;
      }
      
      
      .stdTxt {
        padding-bottom: 12rem;
        width: 100%;
      }
      .stdTxt h1 {
        text-transform: uppercase;
        font-size: 3.6rem;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 2rem;
        color:white;
        padding-right: 50%;
      }
      .stdTxtASD h1 {
        color: var(--blue);
      }
      .stdTxt p {
        font-size: 2.4rem;
        font-weight: 500;
        line-height: 1.2;
        margin-bottom: 2rem;
        color:white;
        padding-right: 50%;
      
      }
      .stdExplore {
        display: block;
        width: 10rem;
        height: 6rem;
        border-top-left-radius: 0.8rem;
        border-top-right-radius: 0.8rem;
        background-color: var(--green);
        position: absolute;
        left: calc(50% - 5rem);
        bottom: 0;
        padding: 1.4rem;
      }
      .stdExploreASD {
        background-color: var(--blue);
      }
      
      
      .stdExploreActive, .stdExplore:hover {
        background-color: var(--midGrey) !important;
      }
      .stdExploreTxt {
        width: 100%;
        text-align: center;
        text-transform: uppercase;
        font-size: 1.2rem;
        font-weight: 500;
        line-height: 1;
        color: white;
        margin-bottom: 0.6rem;
      }
      .stdExploreImg {
        width: 3rem;
        height: auto;
        margin-left: auto;
        margin-right: auto;
      }
      .stdExploreImg img {
        width: 100%;
        height: auto;
      }
    .imgABC {
        position: relative;
        padding-bottom: 56.5%;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
      }
    
    
    /* new 25/08/2026 */
    .share-strip {
      --share-icon-size: 4rem;
      --share-gap: 0;
      padding-top: 2rem;
      padding-bottom: 1rem;
    }
    
    .share-strip__heading {
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 600;
    margin-bottom: 0.8rem;
    padding-left: 0.4rem;
    color: var(--green);
    }
    
    .share-strip__list {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      /* gap: var(--share-gap); */
      margin: 0;
      padding: 0;
    }
    
    /* Reset the link/button back to a plain icon-sized hit target — no box. */
    .share-strip__link {
      display: inline-flex;
      background: none;
      border: none;
      padding: 0;
      margin: 0;
      line-height: 0;
      cursor: pointer;
      border-radius: 4px; /* shapes the focus outline only, not a visible box */
    }
    
    .share-strip__icon-wrap {
      position: relative;
      display: block;
      width: var(--share-icon-size);
      height: var(--share-icon-size);
    }
    
    .share-strip__icon {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain; /* proportional, never distorted */
      transition: opacity 0.12s ease;
      opacity: 0.5;
    }
    
    .share-strip__icon--hover {
      opacity: 0;
    }
    
    .share-strip__link:hover .share-strip__icon--normal,
    .share-strip__link:focus-visible .share-strip__icon--normal {
      opacity: 0;
    }
    
    .share-strip__link:hover .share-strip__icon--hover,
    .share-strip__link:focus-visible .share-strip__icon--hover {
      opacity: 1;
    }
    
    /* .share-strip__link:focus-visible {
      outline: 3px solid var(--share-focus-color);
      outline-offset: 3px;
    } */
    
    .share-strip__feedback {
      margin: 0.75rem 0 0;
      font-size: 0.85rem;
      min-height: 1.2em;
    }
    
    
    /* blog new css */
    
    /* =========================================================
     BLOG LIST
     Dedicated styles - does not affect Case List
     ========================================================= */
    
    .blogList {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    width: 100%;
    }
    
    .blogListItem {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 3.1fr 4.2rem;
    align-items: center;
    gap: 3rem;
    width: 100%;
    border-radius: 2rem;
    border-style: solid;
    border-width: 1.8px;
    border-color: var(--green);
    overflow: hidden;
    background-color: white;
    cursor: pointer;
    }
    
    
    /* =========================================================
     IMAGE
     ========================================================= */
    
    .blogListImage {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: 67%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    }
    
    .blogListImage.plusBorder {
    border-right: 1px solid var(--green);
    }
    
    
    /* =========================================================
     TEXT
     ========================================================= */
    
    .blogListText {
    color: var(--darkGrey);
    padding: 0 !important;
    margin-bottom: 0;
    }
    
    .blogListText h2 {
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 600;
    text-transform: none;
    margin-bottom: 1.4rem;
    color: var(--green);
    }
    
    .blogListText p {
    font-size: 1.6rem;
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 0;
    }
    
    .blogListText p strong {
    font-weight: 600;
    }
    
    
    /* =========================================================
     DESKTOP / TABLET ARROW
     ========================================================= */
    
    .blogListLink {
    display: block;
    width: 4.2rem;
    height: 100%;
    border-left: 1px solid var(--green);
    background-image: url('/gfx/arrowRightGreen.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    }
    
    .blogListLink:hover,
    .blogListLink.hovered {
    border-left: 1px solid var(--green);
    background-color: var(--green);
    background-image: url('/gfx/arrowRightWhite.png');
    }
    
    
    /* =========================================================
     ORIGINAL MORE BUTTON
     Hidden on desktop/tablet
     ========================================================= */
    
    .blogListMoreBlock {
    display: none;
    }
    
     /* end blog new css */
     
     
    /* blog detail */
    
    
    .blogTxt h2 {
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 600;
      text-transform: none;
      margin-bottom: 1.4rem;
      color: var(--green);
    }
    
    .blogTxt h3 {
      font-size: 1.8rem;
      line-height: 1.1;
      font-weight: 500;
      margin-bottom: 1.7rem;
      margin-top: 3.4rem;
    }
    
    .blogTxt h3:first-of-type {
        margin-top: 0;
    }
    
    .blogTxt p {
      font-size: 1.6rem;
      line-height: 1.5;
      font-weight: 400;
      margin-bottom: 1.2rem;
    }
    .blogTxt p strong {
      font-weight: 600;
    }
    .blogTxt ul {
      font-size: 1.6rem;
      line-height: 1.2;
      font-weight: 300;
      margin-bottom: 1rem;
      padding-left: 0; /* Remove default padding */
    
    
    }
    
    .blogTxt ul li {
      padding-left: 2rem;
      margin-bottom: 0.8rem;
      position: relative;
    }
    
    
    .blogTxt ul li:before {
      content: "\2022";
      font-size: 1.8rem;
      width: 2rem;
      display: block;
      position: absolute;
      left: 0;
      padding-left: 0;
      font-weight: 700;
      color: var(--green);
      top: -0.2rem;
    }
    
    .blogVidGrid {
      display: grid;
      grid-template-columns:1fr 1fr;
      align-items: center;
      gap: 3rem;
      width: 100%; 
    }
    
    .blogVideoWrapper {
      position: relative;
      width: 100%;
      /* max-width: 800px; */
      margin: 0 auto;
      padding-top: 56.25%;
      /* 16:9 */
      background: var(--lightGrey);
      overflow: hidden;
    }
    
    .blogVideo {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    
    
}