:root{
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
/* ===--- Resets---=== */
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
font,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
meter,
nav,
object,
ol,
output,
p,
pre,
progress,
q,
rp,
rt,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video,
xmp {
    border: 0;
    margin: 0;
    padding: 0;
    font-size: 100%;
}
html {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    /* The header is position:fixed (.full_header 76px, .mobile_header 59px) and
       nothing offset in-page anchors, so /about#leadership-team, /industries#…
       and /contact#form all landed with their target hidden under it. 9.6rem
       (96px at the 62.5% root) clears either header with room to spare. */
    scroll-padding-top: 9.6rem;
}
html,
body {
    height: 100%;
}
body {
    min-height: 100svh;
    background: var(--color-bg);
    color: var(--font-color-body);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    line-height: var(--font-lh-body);
    font-style: normal;
    font-optical-sizing: auto;
    padding: 0;
    margin: 0 !important;
    overflow-x: hidden !important;
    width: 100%;
    text-shadow: none;
    -webkit-text-size-adjust: none;
}
#page {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--page-bg);
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
b,
strong {
  font-weight: bold;
}
img {
  color: transparent;
  font-size: 0;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
}
li {
  display: list-item;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
th,
td,
caption {
  font-weight: normal;
  vertical-align: top;
  text-align: left;
}
q {
  quotes: none;
}
q:before,
q:after {
  content: "";
  content: none;
}
sub,
sup,
small {
  font-size: 75%;
}
sub,
sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
svg {
  overflow: hidden;
}
pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap !important;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  width: 100%;
}
input[name="hp_comment_verification"] {
  position: absolute !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
}
mark {
  background: var(--color-main);
  color: white;
}
/* ===--- Generic Tags ---=== */
*,
*:before,
*:after {
  box-sizing: border-box;
  font-size: 100%;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
::-moz-selection {
  background: var(--selection-bg);
  color: var(--selection-color);
}
::selection {
  background: var(--selection-bg);
  color: var(--selection-color);
}
hr {
  border: none;
  border-top-width: var(--border-hr-width);
  border-top-color: var(--border-hr-color);
  border-top-style: solid;
  margin: var(--hr-margin) auto;
}
.light hr{
  border-top-color: var(--border-hr-color-light);
}
.dark hr{
  border-top-color: var(--border-hr-color-dark);
}
.colour hr,
.main hr{
  border-top-color: var(--border-hr-color-main);
}
a {
  color: var(--link-color);
}
a:hover {
  color: var(--link-color-hover);
  text-decoration: none;
}
.light a {
  color: var(--link-color-light);
}
.light a:hover {
  color: var(--link-color-hover-light);
  text-decoration: none;
}
.dark a {
  color: var(--link-color-dark);
}
.dark a:hover {
  color: var(--link-color-hover-dark);
  text-decoration: none;
}
.colour a,
.main a {
  color: var(--link-color-main);
}
.colour a:hover,
.main a:hover {
  color: var(--link-color-hover-main);
  text-decoration: none;
}
a[href^="x-apple-data-detectors:"] {
  color: inherit;
  text-decoration: inherit;
}
.clear {
  clear: both;
}
/* ===--- Typography ---=== */
body,
p,
ol li,
ul li,
pre,
input,
textarea,
select {
  font-family: var(--font-body);
  line-height: var(--font-lh-body);
  margin: var(--font-margin-body);
  color: var(--font-color-body);
  font-weight: var(--font-weight-body);
  text-transform: var(--font-transform-body);
  letter-spacing: var(--font-ls-body);
  font-size: var(--font-size-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.light body,
.light p,
.light ol li,
.light ul li,
.light pre,
.light input,
.light textarea,
.light select {
  color: var(--font-color-body-light);
}
.dark body,
.dark p,
.dark ol li,
.dark ul li,
.dark pre,
.dark input,
.dark textarea,
.dark select {
  color: var(--font-color-body-dark);
}
.colour body,
.colour p,
.colour ol li,
.colour ul li,
.colour pre,
.colour input,
.colour textarea,
.colour select,
.main body,
.main p,
.main ol li,
.main ul li,
.main pre,
.main input,
.main textarea,
.main select {
  color: var(--font-color-body-main);
}
.h0,
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
  font-family: var(--font-heading);
  line-height: var(--font-lh-heading);
  margin: var(--font-margin-heading);
  color: var(--font-color-heading);
  font-weight: var(--font-weight-heading);
  text-transform: var(--font-transform-heading);
  letter-spacing: var(--font-ls-heading);
}
/* Bold accent in headings ("– Built To Solve More").
   The bright signal gold is 2.0:1 on the default page ground (#F3F3EF) and 2.3:1
   on white — under the 3:1 large text needs. So the BASE colour — which is what
   applies on the default `standard` theme, since it emits no class — is a 75% shade
   of the signal (3.5:1 page / 3.9:1 white), derived from the theme variable so it
   follows the brand if the gold changes. The hex is the fallback for browsers
   without color-mix(). Dark grounds restore the bright gold below. */
.h0 b,
h1 b,
.h1 b,
h2 b,
.h2 b,
h3 b,
.h3 b,
h4 b,
.h4 b{
  color: #AA7823;
  color: color-mix(in srgb, var(--color-signal) 75%, #000);
}
/* Every dark ground on this site is one of these: section themes emit .dark /
   .colour / .main, the inner banner carries .dark, banners take the theme class,
   and banner/footer text sits over a dark scrim or ground. The bright gold is
   8.1:1 on --color-bg-dark and 7.0:1 on navy. (0,2,1) beats the base (0,1,1). */
.dark :is(.h0, h1, .h1, h2, .h2, h3, .h3, h4, .h4) b,
.colour :is(.h0, h1, .h1, h2, .h2, h3, .h3, h4, .h4) b,
.main :is(.h0, h1, .h1, h2, .h2, h3, .h3, h4, .h4) b,
.banner-container-constrained :is(.h0, h1, .h1, h2, .h2, h3, .h3, h4, .h4) b,
.inner_header :is(.h0, h1, .h1, h2, .h2, h3, .h3, h4, .h4) b,
footer :is(.h0, h1, .h1, h2, .h2, h3, .h3, h4, .h4) b{
  color: var(--color-signal);
}
.light .h0,
.light h1,
.light .h1,
.light h2,
.light .h2,
.light h3,
.light .h3,
.light h4,
.light .h4{
  color: var(--font-color-heading-light);
}
.dark .h0,
.dark h1,
.dark .h1,
.dark h2,
.dark .h2,
.dark h3,
.dark .h3,
.dark h4,
.dark .h4{
  color: var(--font-color-heading-dark);
}
.colour .h0,
.colour h1,
.colour .h1,
.colour h2,
.colour .h2,
.colour h3,
.colour .h3,
.colour h4,
.colour .h4,
.main .h0,
.main h1,
.main .h1,
.main h2,
.main .h2,
.main h3,
.main .h3,
.main h4,
.main .h4{
  color: var(--font-color-heading-main);
}
h5,
.h5,
h6,
.h6 {
  font-family: var(--font-accent);
  line-height: var(--font-lh-accent);
  margin: var(--font-margin-accent);
  color: var(--font-color-accent);
  font-weight: var(--font-weight-accent);
  text-transform: var(--font-transform-accent);
  letter-spacing: var(--font-ls-accent);
}
.light h5,
.light .h5,
.light h6,
.light .h6 {
  color: var(--font-color-accent-light);
}
.colour h5,
.colour .h5,
.colour h6,
.colour .h6,
.main h5,
.main .h5,
.main h6,
.main .h6,
.dark h5,
.dark .h5,
.dark h6,
.dark .h6 {
  color: white;
}
.h0{
  font-size: var(--font-size-h0);
}
h1,
.h1 {
  font-size: var(--font-size-h1);
}
h2,
.h2 {
  font-size: var(--font-size-h2);
}
h3,
.h3 {
  font-size: var(--font-size-h3);
}
h4,
.h4 {
  font-size: var(--font-size-h4);
}
h5,
.h5 {
  font-size: var(--font-size-h5);
}
h6,
.h6 {
  font-size: var(--font-size-h6);
  display: inline-flex;
  align-items: center;
  gap: .7em;
}
h5::before,
.h5::before,
h6::before,
.h6::before {
  content: "";
  width: 2.4rem;
  height: .1rem;
  background: var(--color-signal);
  flex: none;
  transform: translate(0, -1px);
}
p,
pre{
  margin: var(--font-margin-body);
}
ul {
  list-style: disc outside none;
  margin: 0 0 1.2rem 2rem;
}
ul li {
  padding: 0;
  margin: 0 0 .8rem;
}
ol{
  list-style: decimal outside none;
  margin: 0 0 1.2rem 2rem;
}
ol li {
  padding: 0;
  margin: 0 0 .8rem;
}
/* ===--- Section Spacing ---=== */
section.content_container{
    width: 100%;
    background: var(--color-bg);
    padding: var(--section-block-md) var(--section-inline);
}
section.content_container.light{
    background: var(--color-bg-light);
}
section.content_container.dark{
    background: var(--color-bg-dark);
}
section.content_container.colour,
section.content_container.main{
    background: var(--color-navy-800);
}
section.content_container.spacious{
    padding: var(--section-block-xl) var(--section-inline);
}
section.content_container.relaxed{
    padding: var(--section-block-lg) var(--section-inline);
}
section.content_container.compact{
    padding: var(--section-block-sm) var(--section-inline);
}
.content{
    width: 100%;
    margin: 0 auto;
    /* The DEFAULT tier. This pointed at --content-width-lg, which made 'Default' and
       'Wide' the same width and left one of the six tiers unreachable. */
    max-width: var(--content-width-default);
}
.content-xl .content{
    max-width: var(--content-width-xl);
}
.content-lg .content{
    max-width: var(--content-width-lg);
}
.content-md .content{
    max-width: var(--content-width-md);
}
.content-sm .content{
    max-width: var(--content-width-sm);
}
.content-xs .content{
    max-width: var(--content-width-xs);
}
/* ===--- Text Alignment ---=== */
.align-left {
  text-align: left;
}
.align-center {
  text-align: center;
}
.align-center img {
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
}
.align-center figcaption {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.align-right {
  text-align: right;
}
.align-right img {
  margin-left: auto;
}
.align-right figcaption {
  text-align: right;
  margin-left: auto;
}
.align-justify {
  text-align: justify;
}
.float-left {
  float: left;
  margin-right: 1em;
  margin-bottom: 1em;
  max-width: 200px;
}
.float-right {
  float: right;
  margin-left: 1em;
  margin-bottom: 1em;
  max-width: 200px;
}
.valign-top {
  align-items: start;
}
.valign-middle {
  align-items: center;
}
.valign-bottom {
  align-items: end;
}
.outset-right {
  position: relative;
  width: calc(100% + 24px);
  max-width: calc(100% + 24px);
  transform: translateX(24px) translate3d(0, 0, 0);
  left: calc(24px * -1);
}
.outset-left {
  width: calc(100% + 24px);
  max-width: calc(100% + 24px);
  transform: translateX(calc(24px * -1)) translate3d(0, 0, 0);
}
.outset-both {
  position: relative;
  width: calc(100% + 24px + 24px);
  max-width: calc(100% + 24px + 24px);
  transform: translateX(-50%) translate3d(0, 0, 0);
  left: 50%;
}
.center-list {
  justify-content: center;
}
/* ===--- Editable Content  ---=== */
.editable_content::after {
    content: '';
    clear: both;
    display: block;
}
.editable_content > *:last-child {
    margin-bottom: 0;
}
.editable_content ul {
    list-style: disc outside none;
    margin: 0 0 1.6rem 2rem;
}
.editable_content ul li {
    padding: 0;
    margin: 0 0 .8rem;
}
.editable_content ol {
    list-style: decimal outside none;
    margin: 0 0 1.6rem 2rem;
}
.editable_content ol li {
    padding: 0;
    margin: 0 0 .8rem;
}
.editable_content figure {
    display: block;
}
.editable_content figure.float-left {
    float: left;
    margin: .8rem .8rem .8rem 0;
}
.editable_content figure.float-right {
    float: right;
    margin: .8rem 0 .8rem .8rem;
}
.editable_content figure.wrap-center {
    margin: .8rem auto
}
.editable_content iframe,
.editable_content img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}
.editable_content table{
    margin: var(--font-margin-body);
    width: 100%;
    display: table;
    border-left: 2px solid var(--color-bg);
}
.editable_content table tr th,
.editable_content table thead tr td {
    font-weight: var(--font-weight-heading);
    font-family: var(--font-heading);
    color: var(--color-bg-light);
    background: var(--color-bg-dark);
    border: none;
    border-right: 2px solid var(--color-bg);
    border-bottom: 2px solid var(--color-bg);
    padding: .8rem;
}
.editable_content table tr td {
    border-right: 2px solid var(--color-bg);
    border-bottom: 2px solid var(--color-bg);
    background: var(--color-bg-light);
    padding: .8rem;
}
@media screen and (max-width: 1024px) {
  .editable_content figure {
    margin: .8rem 0;
  }
  .editable_content figure.float-left,
  .editable_content figure.float-right {
    float: none;
  }
  .editable_content figure.wrap-center {
    margin: .8rem auto;
  }
  .editable_content table thead{
    display: none;
  }
  .editable_content table tbody tr td::before {
    content: attr(data-cell)':';
    font-weight: var(--font-weight-heading);
    font-family: var(--font-heading);
    color: var(--font-color-heading);
    margin: 0 .4rem 0 0;   
  }
  .editable_content table tbody{
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
  }
  .editable_content table tbody tr{
    display: flex;
    flex-direction: column;
    gap: .2rem;
  }
  .editable_content table tbody tr td{
    width: 100%;
  }
}
@media screen and (max-width: 560px){
  .editable_content table tbody tr td::before{
    display: block;
  }
}
.light .editable_content table{
    border-left: 2px solid var(--color-bg-light);
}
.light .editable_content table tr th,
.light .editable_content table thead tr td {
    color: var(--color-bg);
    border-right: 2px solid var(--color-bg-light);
    border-bottom: 2px solid var(--color-bg-light);
}
.light .editable_content table tr td {
    border-right: 2px solid var(--color-bg-light);
    border-bottom: 2px solid var(--color-bg-light);
    background: var(--color-bg);
}
.dark .editable_content table{
    border-left: 2px solid var(--color-bg-dark);
}
.dark .editable_content table tr th,
.dark .editable_content table thead tr td {
    background: var(--color-bg);
    color: var(--font-color-heading);
    border-right: 2px solid var(--color-bg-dark);
    border-bottom: 2px solid var(--color-bg-dark);
}
.dark .editable_content table tr td {
    border-right: 2px solid var(--color-bg-dark);
    border-bottom: 2px solid var(--color-bg-dark);
    background: var(--color-border-dark);
    color: var(--font-color-body-dark);
}
.colour .editable_content table,
.main .editable_content table{
    border-left: 2px solid var(--color-main);
}
.colour .editable_content table tr th,
.colour .editable_content table thead tr td ,
.main .editable_content table tr th,
.main .editable_content table thead tr td {
    background: var(--color-bg);
    color: var(--font-color-heading);
    border-right: 2px solid var(--color-main);
    border-bottom: 2px solid var(--color-main);
}
.colour .editable_content table tr td,
.main .editable_content table tr td {
    border-right: 2px solid var(--color-main);
    border-bottom: 2px solid var(--color-main);
    background: var(--color-border-main);
    color: var(--font-color-body-main);
}
/* ===--- Top Header ---=== */
.top-header {
  background: var(--color-bg-light);
  padding: .8rem var(--section-inline);
}
.top-header .content {
  display: flex;
  justify-content: flex-end;
  gap: 1.6rem;
  align-items: center;
}
.top-header .content .language {
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  gap: .8rem;
  margin-right: auto;
}
.top-header .content .language span {
  display: block;
}
.top-header .content .language span:first-of-type {
  padding-right: .8rem;
  border-right: 2px solid var(--color-border-light);
}
.top-header .content>ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.6rem;
}
.top-header .content>ul li {
  margin: 0;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1;
}
.top-header .content>ul li a:hover {
  color: var(--color-main);
}
.top-header .content .social_media ul {
  gap: .8rem;
  margin: 0;
  padding: 0;
}
.top-header .content .social_media ul li {
  margin: 0;
  padding: 0;
}
.top-header .content .social_media ul li a {
  width: 2.8rem;
  height: 2.8rem;
  background: var(--color-body);
  color: var(--color-bg-light);
}
.top-header .content .social_media ul li a:hover {
  background: var(--color-main);
}
.top-header .content .social_media ul li a i {
  font-size: 1.2rem;
}
@media screen and (max-width: 1024px) {
  .top-header {
    display: none;
  }
}
/* ===--- Full Header ---=== */
.full_header {
  display: none;
  background: transparent;
  width: 100%;
  z-index: 999;
  top: 0;
  position: fixed;
  padding: 0 var(--section-inline);
  box-shadow: none;
  transition: var(--animate-medium);
}
.full_header.header-bg{
  background: var(--color-bg);
  box-shadow: var(--shadow);
}
.jqueryslidemenu {
  width: 100%;
  max-width: var(--content-width-default);
  padding: 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.jqueryslidemenu a.logo {
  width: var(--logo-width);
  display: block;
  margin: 0;
  padding: 0;
  filter: brightness(0) invert(1);
  transition: var(--animate-medium);
}
.header-bg .jqueryslidemenu a.logo{
  filter: none;  
}
.jqueryslidemenu a.logo img {
  width: 100%;
  height: auto;
}

.jqueryslidemenu .button{
  margin: 0;
  background: var(--button-bg-dark);
  color: var(--button-color-dark);
  border-color: var(--button-bg-dark);
}
.jqueryslidemenu .button:hover{
  background: var(--button-bg-hover-dark);
  color: var(--button-color-hover-dark);
  border-color: var(--button-bg-hover-dark);
}
.header-bg .jqueryslidemenu .button{
  background: var(--button-bg);
  color: var(--button-color);
  border-color: var(--button-bg);
}
.header-bg .jqueryslidemenu .button:hover{
  background: var(--button-bg-hover);
  color: var(--button-color-hover);
  border-color: var(--button-bg-hover);
}
.jqueryslidemenu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 1.6rem;
  align-items: center;
}
.jqueryslidemenu ul li {
  position: relative;
  margin: 0;
  padding: 0;
}
.jqueryslidemenu ul li a {
  padding: var(--header-nav-padding);
  font-weight: var(--header-nav-weight);
  font-family: var(--header-nav-family);
  color: white;
  font-size: var(--header-nav-size);
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  letter-spacing: .11em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  position: relative;
}
.header-bg .jqueryslidemenu ul li a{
  color: var(--header-nav-color);
}
.jqueryslidemenu ul li a:hover,
.jqueryslidemenu ul li:hover a,
.jqueryslidemenu ul li.Selected a,
.jqueryslidemenu ul li:has(ul li.Selected) a,
.jqueryslidemenu ul li.Selected a:hover {
  color: var(--color-signal);
}
.header-bg .jqueryslidemenu ul li a:hover,
.header-bg .jqueryslidemenu ul li:hover a,
.header-bg .jqueryslidemenu ul li.Selected a,
.header-bg .jqueryslidemenu ul li:has(ul li.Selected) a,
.header-bg .jqueryslidemenu ul li.Selected a:hover {
  color: var(--header-nav-color-hover);
}
.jqueryslidemenu ul li a::after {
  content: "";
  display: var(--header-nav-after-active);
  background: var(--header-nav-after-bg);
  width: 0;
  height: 2px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  transition: var(--animate-medium);
}
.jqueryslidemenu ul li a:hover::after,
.jqueryslidemenu ul li:hover a::after,
.jqueryslidemenu ul li.Selected a::after,
.jqueryslidemenu ul li:has(ul li.Selected) a::after,
.jqueryslidemenu ul li.Selected a:hover::after {
  width: 100%;
}
/* ----- NAV HIGHLIGHT (CTA) -----
   The admin's per-item "Highlight" flag is a real persisted column that emits
   <li class="highlight"> (includes/functions/navigation-renderer.php), but no rule
   for it existed in any stylesheet — so ticking Highlight changed nothing on the
   page. It is the obvious mechanism for a nav call-to-action ("Make a Donation",
   "Book Now"), which is presumably why the flag exists.
   Built from the --button-* tokens so it follows the theme's chosen Button Style.
   The li is a flex child sized to its content, so the chip hugs its text. */
.jqueryslidemenu ul li.highlight > a {
  background: var(--button-bg);
  color: var(--button-color);
  border-radius: var(--button-radius);
  padding-left: 2rem;
  padding-right: 2rem;
}
.jqueryslidemenu ul li.highlight > a:hover,
.jqueryslidemenu ul li.highlight:hover > a,
.jqueryslidemenu ul li.highlight.Selected > a,
.jqueryslidemenu ul li.highlight.Selected > a:hover {
  background: var(--button-bg-hover);
  color: var(--button-color-hover);
}
/* The nav's underline sweep would draw a rule across the bottom of the chip. */
.jqueryslidemenu ul li.highlight > a::after { display: none; }
/* ----- FIRST DROP-DOWN LAYER ----- */
.jqueryslidemenu ul li ul {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  position: absolute;
  left: 0;
  display: block;
  visibility: hidden;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: none;
  width: 256px;
  background: var(--header-dropdown-bg);
  border-top-right-radius: 16px;
  corner-shape: bevel;
  overflow: hidden;
}
.jqueryslidemenu nav > ul > li:last-child ul{
  left: auto;
  right: 0;
}
.jqueryslidemenu ul li ul li {
  display: list-item;
  float: none;
  border: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
}
.jqueryslidemenu ul li ul li a {
  color: var(--header-dropdown-color);
  padding: 1.6rem;
  margin: 0;
  background: none;
}
.jqueryslidemenu ul li ul li a::after {
  display: none;
}
.jqueryslidemenu ul li:hover ul {
  visibility: visible;
}
.jqueryslidemenu ul li:hover ul li a {
  color: var(--header-dropdown-color);
  padding: 1.6rem;
  margin: 0;
  background: none;
}
.jqueryslidemenu ul li.Selected ul li a:hover,
.jqueryslidemenu ul li ul li a:hover {
  color: var(--header-dropdown-color);
  text-decoration: none;
  background: var(--header-dropdown-hover);
}
/* ----- SUB DROP-DOWN LAYERS AFTER 1ST ----- */
.jqueryslidemenu nav ul li ul li ul {
  top: 0;
  margin: 0;
  left: auto;
  right: 100%;
  display: none;
}
.jqueryslidemenu nav > ul > li:last-child ul li ul{
  left: auto;
  right: 100%;
}
.jqueryslidemenu ul li ul li:hover ul{
  display: block;
}
@media (min-width:1024px) {
  .full_header {
    display: inherit;
  }
}
/* ----- Cart Button ----- */
.jqueryslidemenu a.cart_button {
  position: absolute;
  bottom: -44px;
  right: 0;
  background: var(--color-main);
  color: var(--color-bg);
  padding: .8rem 1.6rem;
  border-radius: 0 0 .4rem .4rem;
  font-size: 2rem;
  text-decoration: none;
  transition: var(--animate-medium);
}
.jqueryslidemenu a.cart_button:hover {
  background: var(--color-bg-dark);
}
.jqueryslidemenu a.cart_button span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-9px, calc(-50% + 3px));
  width: 18px;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--color-main);
  background: var(--color-bg);
  transition: var(--animate-medium);
}
.jqueryslidemenu a.cart_button:hover span {
  color: var(--color-bg-dark);
}
/* ----- Mega Menu ----- */
header.mega-menu .jqueryslidemenu ul li:hover ul li ul,
header.mega-menu .jqueryslidemenu ul li:hover ul li ul li ul{
  visibility: visible;
  display: block;
}
header.mega-menu .jqueryslidemenu ul li:hover ul li ul,
header.mega-menu .jqueryslidemenu ul li:hover ul li ul li ul{
  position: initial;
}
header.mega-menu .jqueryslidemenu nav > ul > li{
  position: initial;
}
header.mega-menu .jqueryslidemenu nav > ul > li > ul{
  padding: .8rem 1.6rem;
  width: 100%;
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
header.mega-menu .jqueryslidemenu nav > ul > li > ul > li{
  width: calc(100% / 4 - calc(1.6rem * 3 / 4));
}
header.mega-menu .jqueryslidemenu nav > ul > li > ul > li > a{
  font-size: 1.6rem;
  line-height: 1.1;
  padding: .8rem 0;
  border-bottom: 1px solid hsla(0 0% 100% / .16);
}
header.mega-menu .jqueryslidemenu ul li ul li{
  position: initial;
}
header.mega-menu .jqueryslidemenu ul li ul li a{
  padding: 0;
}
header.mega-menu .jqueryslidemenu ul li ul li a:hover{
  background: none;
  color: hsla(0 0% 100% / .72);
}
header.mega-menu .jqueryslidemenu ul li ul li ul{
  width: 100%;
}
header.mega-menu .jqueryslidemenu ul li ul li ul li{
  padding:0;
}
header.mega-menu .jqueryslidemenu ul li ul li ul li a{
  padding: .8rem 0;
  font-size: 1.4rem;
  font-weight: 400;
}
header.mega-menu .jqueryslidemenu ul li ul li ul li ul{
  width: 100%;
}
/* ---------- 6. Mobile Header & Navigation ---------- */
.mobile_header {
  background: var(--color-bg);
  box-shadow: var(--shadow);
  padding: .8rem var(--section-inline);
  width: 100%;
  z-index: 999;
  position: sticky;
  display: inherit;
  top: 0;
}
@media (min-width: 1024px) {
  .mobile_header {
    display: none;
  }
}
.mobile_header .logo_area {
  padding: 0;
  width: 100%;
}
.mobile_header .logo_area>a {
  width: var(--logo-width-mobile);
  display: block;
  margin: 0 auto;
}
.mobile_header .logo_area img {
  width: 100%;
  height: auto;
}
.mobile_header a.menu-btn,
.mobile_header a.cart_link {
  color: var(--color-body);
  left: 2.4rem;
  position: absolute;
  text-decoration: none;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 2.4rem;
}
.mobile_header a.cart_link {
  left: auto;
  right: .8rem;
}
#menu .mm-list a {
  color: var(--header-mobile-nav-color);
  font-family: var(--header-nav-family);
  padding: 1.6rem;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: var(--header-nav-weight);
  text-decoration: none;
  display: block;
  text-transform: uppercase;
  letter-spacing: .04em;
}
#menu .mm-list li.mm-selected a{
  color: var(--color-signal);
}
.mm-ismenu {
  background: var(--header-mobile-nav-bg);
}
.mm-menu {
  color: hsl(0 0% 100%);
}
.mm-menu .mm-list>li:after {
  border-color: rgba(0, 0, 0, 0.15);
}
.mm-menu .mm-list>li>a.mm-subclose {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(255, 255, 255, 0.3);
}
.mm-menu .mm-list>li>a.mm-subopen:after,
.mm-menu .mm-list>li>a.mm-subclose:before {
  border-color: #fff;
}
.mm-menu .mm-list>li>a.mm-subopen:before {
  border-color: rgba(0, 0, 0, 0.15);
}
.mm-menu .mm-list>li.mm-selected>a:not(.mm-subopen),
.mm-menu .mm-list>li.mm-selected>span {
  background: rgba(0, 0, 0, 0.1);
}
.mm-menu .mm-list li.mm-label {
  background: rgba(255, 255, 255, 0.05);
}
.mm-menu.mm-vertical .mm-list li.mm-opened>a.mm-subopen,
.mm-menu.mm-vertical .mm-list li.mm-opened>ul {
  background: rgba(255, 255, 255, 0.05);
}
/* ---------- 7. Footer ---------- */
footer {
  background: var(--footer-bg);
  color: rgba(255,255,255,.7);
  margin-top: auto;
  padding: 0 var(--section-inline);
  position: relative;
  overflow: hidden;
}
/* Chevron field — abstracted from the arrow in the corporate mark (same as the dark CTA band) */
footer .footer-chevrons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M46 34 L72 60 L46 86 L52 92 L84 60 L52 28 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  -webkit-mask-image: radial-gradient(90% 70% at 88% 12%, #000 0%, transparent 72%);
  mask-image: radial-gradient(90% 70% at 88% 12%, #000 0%, transparent 72%);
}
footer .content,
footer .footer-funding,
footer .footer-bottom {
  position: relative;
  z-index: 1;
  max-width: var(--content-width-default);
  margin: 0 auto;
}
footer .content {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 3.6rem;
  padding-block: clamp(54px, 6vw, 84px) clamp(36px, 4vw, 56px);
}
footer a {
  text-decoration: none;
  transition: color .3s ease;
}
footer a:hover {
  color: var(--color-signal);
}
footer a.logo {
  width: var(--footer-logo-width);
  display: block;
  margin-bottom: 2.2rem;
}
footer a.logo img {
  width: 100%;
  height: auto;
}
footer .footer-blurb {
  font-size: 1.47rem;
  line-height: 1.68;
  max-width: 38ch;
  color: rgba(255,255,255,.6);
  margin: 0;
}
footer .h4 {
  color: #fff;
  font-family: var(--font-accent);
  font-size: 1.09rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0 0 2rem;
}
footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
footer ul li,
footer ul li a {
  margin: 0;
  padding: 0;
  color: rgba(255,255,255,.7);
  font-size: 1.49rem;
  line-height: 1.4;
}
footer ul li + li {
  margin-top: 1.1rem;
}
footer ul li a:hover {
  color: var(--color-signal);
}
footer .footer-address {
  color: rgba(255,255,255,.5);
  font-size: 1.4rem;
  line-height: 1.6;
}
footer .footer-social {
  margin-top: 3rem;
}
footer .social_media ul {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
}
footer .social_media ul li + li {
  margin-top: 0;
}
footer .social_media ul li a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--color-line-dark);
  color: rgba(255,255,255,.7);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
footer .social_media ul li a:hover {
  background: var(--color-signal);
  border-color: var(--color-signal);
  color: var(--color-ink);
}
footer .social_media ul li a i {
  font-size: 1.6rem;
}
/* FedDev Ontario funding acknowledgement */
footer .footer-funding {
  padding-block: 3.2rem;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--color-line-dark);
  align-items: center;
}
footer .footer-funding img {
  display: block;
  width: 100%;
  max-width: 52rem;
  height: auto;
}
footer .footer-funding .funding-content{
  max-width: 52rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
footer .footer-funding .funding-content p{
  margin: 0;
}
footer .footer-bottom {
  border-top: 1px solid var(--color-line-dark);
  padding-block: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2.8rem;
  align-items: center;
  justify-content: space-between;
}
footer p.signature,
footer p.footer-tagline {
  font-family: var(--font-accent);
  font-size: 1.06rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.6;
  /* 50%, not 45%: at 10.6px this is small text and needs 4.5:1. 45% white on the
     footer ink measured 4.48:1; 50% is 5.25:1. */
  color: rgba(255,255,255,.5);
  margin: 0;
}
footer p.signature span {
  margin: 0 .6rem;
  opacity: .5;
}
footer p.signature a {
  color: rgba(255,255,255,.5);
}
footer p.signature a:hover {
  color: var(--color-signal);
}
@media screen and (max-width: 1024px) {
  footer {
    padding: 0 2.4rem;
  }
  footer .content {
    grid-template-columns: 1fr 1fr;
    gap: 4.4rem 3.6rem;
  }
  footer .footer-brand {
    grid-column: 1 / -1;
  }
  footer .footer-funding {
    justify-content: flex-start;
  }
}
@media screen and (max-width: 600px) {
  footer .content {
    grid-template-columns: 1fr;
  }
  footer .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* ---=== Text Link ===--- */
.button.text-link {
    line-height: 1;
    font-weight: var(--text-link-weight);
    text-decoration: none;
    cursor: pointer;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--text-link-gap);
    transition: var(--animate-fast);
    background: none;
    border: none;
    color: var(--text-link-color);
    padding: 0;
    height: auto;
}
/* The colour deliberately does NOT change on hover — the growing rule below is the
   affordance (DS main.css:593-605). */
.button.text-link:hover {
    color: var(--text-link-color);
    background: none;
}
.dark .button.text-link,
.dark .button.text-link:hover {
    color: var(--text-link-color-dark);
}
.colour .button.text-link,
.colour .button.text-link:hover,
.main .button.text-link,
.main .button.text-link:hover {
    color: var(--text-link-color-main);
}
.button.text-link::before {
    content: '';
    position: initial;
    display: block;
    width: var(--text-link-rule-width);
    height: var(--text-link-rule-height);
    border: none;
    background: var(--text-link-rule-color);
    transition: var(--animate-fast);
}
.dark .button.text-link::before {
    background: var(--text-link-rule-color-dark);
}
.colour .button.text-link::before,
.main .button.text-link::before {
    background: var(--text-link-rule-color-main);
}
.button.text-link:hover::before {
    width: var(--text-link-rule-width-hover);
}
.button.text-link::after{
    display: none;
}
/* ===--- Hero Styles ---=== */
.banner-container-constrained{
  position: relative;
  height: var(--hero-height);
  background: var(--color-bg);
}
.banner-container-constrained.colour{
  background: var(--color-main);
}
.banner-container-constrained.dark{
  background: var(--color-bg-dark);
}
.banner-container-constrained.light{
  background: var(--color-bg-light);
}
ul.ms-banner-constrained{
  display: inline-flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
}
ul.ms-banner-constrained li{
  list-style: none;
  width: 100%;
  flex-shrink: 0;
  position: relative;
  margin: 0;
  opacity: 0;
}
.banner-container-constrained li:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: var(--color-bg);
  opacity: var(--hero-overlay-opacity);
}
.banner-container-constrained.light li:after{
  background: var(--color-bg-light);
}
.banner-container-constrained.dark li:after{
  background: var(--color-bg-dark);
}
.banner-container-constrained.colour li:after{
  background: var(--color-main);
}
.banner-container-constrained .img-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.banner-container-constrained .img-wrapper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.banner-container-constrained .banner-details{
  position: absolute;
  width: 100%;
  max-width: var(--hero-details-max-width);
  padding-inline: 3.2rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.banner-container-constrained .banner-left .banner-details{
  justify-content: flex-start;
  text-align: left;
}
.banner-container-constrained .banner-right .banner-details{
  justify-content: flex-end;
  text-align: right;
}
.banner-container-constrained .banner-content{
  width: 100%;
  max-width: var(--hero-content-max-width);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.banner-container-constrained .banner-left .banner-content{
  align-items: flex-start;
}
.banner-container-constrained .banner-right .banner-content{
  align-items: flex-end;
}
.banner-container-constrained .h6{
  margin: 0;
}
.banner-container-constrained .h0{
  margin: var(--hero-heading-margin);
}
.banner-container-constrained p{
  margin: var(--hero-p-margin);
  max-width: var(--hero-p-max-width);
  width: 100%;
}
.banner-container-constrained .button{
  margin: 0;
}
.banner-container-constrained.banner-bar li:after {
  display: none;
}
.banner-container-constrained.banner-bar .img-wrapper{
  width: var(--hero-bar-img-width);
  left: calc(100% - var(--hero-bar-img-width));
}
.banner-container-constrained.banner-bar .banner-right .img-wrapper{
  left: 0%;
}
.banner-container-constrained.banner-bar .img-wrapper:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: var(--color-bg);
  opacity: var(--hero-overlay-opacity);
}
.banner-container-constrained.banner-bar.light .img-wrapper:after{
  background: var(--color-bg-light);
}
.banner-container-constrained.banner-bar.colour .img-wrapper:after{
  background: var(--color-main);
}
.banner-container-constrained.banner-bar.dark .img-wrapper:after{
  background: var(--color-bg-dark);
}
.banner-container-constrained.banner-bar .banner-details{
  justify-content: flex-start;
  text-align: left;
}
.banner-container-constrained.banner-bar .banner-right .banner-details {
  justify-content: flex-end;
  text-align: right;
}
.banner-container-constrained.banner-bar .banner-content{
  align-items: flex-start;
  max-width: 100%;
}
.banner-container-constrained.banner-bar .banner-right .banner-content{
  align-items: flex-end;
}
.banner-container-constrained.banner-bar .h6,
.banner-container-constrained.banner-bar .h0{
  max-width: var(--hero-content-max-width);
}
.banner-container-constrained.banner-bar p{
  max-width: 100%;
  width: var(--hero-bar-p-width);
  padding-right: var(--hero-bar-p-padding);
}
.banner-container-constrained.banner-bar .banner-right p{
  padding-inline: 4rem 0;
}
.banner-container-constrained.banner-bar.banner-trans-bar .img-wrapper {
  width: 100%;
  left: 0;
}
.banner-container-constrained.banner-bar.banner-trans-bar .img-wrapper:before{
  content: "";
  position: absolute;
  width: var(--hero-trans-bar-width);
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: var(--color-bg);
  opacity: var(--hero-overlay-opacity);
}
.banner-container-constrained.banner-bar.banner-trans-bar.light .img-wrapper:before{
  background: var(--color-bg-light);
}
.banner-container-constrained.banner-bar.banner-trans-bar.colour .img-wrapper:before{
  background: var(--color-main);
}
.banner-container-constrained.banner-bar.banner-trans-bar.dark .img-wrapper:before{
  background: var(--color-bg-dark);
}
.banner-container-constrained.banner-bar.banner-trans-bar .banner-right .img-wrapper:before{
  left: auto;
  right: 0;
}
.banner-container-constrained.banner-box-content li:after{
  display: none;
}
.banner-container-constrained.banner-box-content .banner-content{
  max-width: var(--hero-box-max-width);
  padding: var(--hero-box-padding);
  position: relative;
  z-index: 1;
}
.banner-container-constrained.banner-box-content .banner-content::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: var(--color-bg);
  opacity: var(--hero-overlay-opacity);
}
.banner-container-constrained.banner-box-content.light .banner-content::after{
  background: var(--color-bg-light);
}
.banner-container-constrained.banner-box-content.colour .banner-content::after{
  background: var(--color-main);
}
.banner-container-constrained.banner-box-content.dark .banner-content::after{
  background: var(--color-bg-dark);
}
.banner-container-constrained.banner-float li:after{
  display: none;
}
.banner-container-constrained.banner-float .img-wrapper {
  width: var(--hero-float-img-width);
  max-width: var(--hero-float-img-max-width);
  height: calc(100% - (var(--hero-float-inset) * 2));
  position: absolute;
  top: var(--hero-float-inset);
  left: calc(100% - var(--hero-float-img-width));
  z-index: 0;
}
.banner-container-constrained.banner-float .banner-right .img-wrapper{
  left: auto;
  right: calc(100% - var(--hero-float-img-width));
}
.banner-container-constrained.banner-float .banner-details{
  justify-content: flex-start;
  text-align: left;
}
.banner-container-constrained.banner-float .banner-right .banner-details {
  justify-content: flex-end;
  text-align: right;
}
.banner-container-constrained.banner-float .banner-content{
  width: var(--hero-float-content-width);
  padding-right: var(--hero-float-content-padding);
  align-items: flex-start;
}
.banner-container-constrained.banner-float .banner-right .banner-content {
  align-items: flex-end;
  padding-inline: 8rem 0;
}
.banner-container-constrained .banner-next,
.banner-container-constrained .banner-previous,
.banner-container-constrained .banner-pause {
    top: var(--hero-nav-next-postition-top);
    right: var(--hero-nav-next-postition-right);
    bottom: var(--hero-nav-next-postition-bottom);
    left: var(--hero-nav-next-postition-left);
    border-top: var(--hero-nav-border-top);
    border-right: var(--hero-nav-border-right);
    border-bottom: var(--hero-nav-border-bottom);
    border-left: var(--hero-nav-border-left);
    border-radius: var(--hero-nav-radius);
    background: var(--hero-nav-bg);
    width: var(--hero-nav-width);
    height: var(--hero-nav-height);
    opacity: 0;
    position: absolute;
    display: flex !important;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: var(--animate-medium);
    z-index: 2;
}
.banner-container-constrained .banner-next:hover,
.banner-container-constrained .banner-previous:hover,
.banner-container-constrained .banner-pause:hover{
  background: var(--hero-nav-bg-hover);
}
.banner-container-constrained .banner-previous {
    top: var(--hero-nav-prev-postition-top);
    right: var(--hero-nav-prev-postition-right);
    bottom: var(--hero-nav-prev-postition-bottom);
    left: var(--hero-nav-prev-postition-left);
}
.banner-container-constrained .banner-pause {
    top: var(--hero-nav-pause-postition-top);
    right: var(--hero-nav-pause-postition-right);
    bottom: var(--hero-nav-pause-postition-bottom);
    left: var(--hero-nav-pause-postition-left);
    color: var(--hero-nav-color);
}
.banner-container-constrained.dark .banner-pause,
.banner-container-constrained.colour .banner-pause{
    color: var(--hero-nav-color-hover);
}
.banner-container-constrained:hover .banner-next,
.banner-container-constrained:hover .banner-previous,
.banner-container-constrained:hover .banner-pause {
  opacity: 1;
  cursor: pointer;
}
.banner-container-constrained .banner-next svg,
.banner-container-constrained .banner-previous svg {
  width: auto;
  height: var(--hero-nav-icon-height);
  fill: var(--hero-nav-icon-fill);
  transition: var(--animate-medium);
}
.banner-container-constrained.dark .banner-next svg,
.banner-container-constrained.dark .banner-previous svg{
  fill: var(--hero-nav-icon-fill-dark);
}
.banner-container-constrained.colour .banner-next svg,
.banner-container-constrained.colour .banner-previous svg{
  fill: var(--hero-nav-icon-fill-main);
}
/* Per-context border + hover background: these overrides did not exist, so a dark
   or brand-ground banner rendered identical controls to the light one. */
.banner-container-constrained.dark .banner-next,
.banner-container-constrained.dark .banner-previous,
.banner-container-constrained.dark .banner-pause{
  border-color: var(--hero-nav-border-color-dark);
}
.banner-container-constrained.colour .banner-next,
.banner-container-constrained.colour .banner-previous,
.banner-container-constrained.colour .banner-pause{
  border-color: var(--hero-nav-border-color-main);
}
.banner-container-constrained.dark .banner-next:hover,
.banner-container-constrained.dark .banner-previous:hover,
.banner-container-constrained.dark .banner-pause:hover{
  background: var(--hero-nav-bg-hover-dark);
}
.banner-container-constrained.colour .banner-next:hover,
.banner-container-constrained.colour .banner-previous:hover,
.banner-container-constrained.colour .banner-pause:hover{
  background: var(--hero-nav-bg-hover-main);
}
.banner-container-constrained .banner-next svg {
  transform: rotate(180deg);
}
.banner-container-constrained .banner-next:hover svg,
.banner-container-constrained .banner-previous:hover svg {
  fill: var(--hero-nav-icon-fill-hover);
}
.banner-container-constrained.dark .banner-next:hover svg,
.banner-container-constrained.dark .banner-previous:hover svg {
  fill: var(--hero-nav-icon-fill-hover-dark);
}
.banner-container-constrained.colour .banner-next:hover svg,
.banner-container-constrained.colour .banner-previous:hover svg {
  fill: var(--hero-nav-icon-fill-hover-main);
}
@media screen and (max-width: 1264px){
  .banner-container-constrained.banner-float .img-wrapper{
    left: auto;
    right: 3.2rem;
    width: calc(40% - 3.2rem);
  }
  .banner-container-constrained.banner-float .banner-right .img-wrapper {
    left: 3.2rem;
    right: auto;
    width: calc(40% - 3.2rem);
  }
}
@media screen and (max-width: 1024px){
  .banner-container-constrained{
    height: auto;
  }
  .banner-container-constrained li::after {
    display: none;
  }
  .banner-container-constrained .img-wrapper {
    position: initial;
    aspect-ratio: 1366 / 768;
    width: 100%;
    height: auto;
  }
  .banner-container-constrained.banner-bar .img-wrapper{
    width: 100%;
    position: relative;
    left: 0;
  }
  .banner-container-constrained .banner-details,
  .banner-container-constrained .banner-left .banner-details,
  .banner-container-constrained .banner-right .banner-details {
    position: initial;
    transform: none;
    padding: 4.8rem 3.2rem;
    justify-content: center;
    text-align: center;
  }
  .banner-container-constrained.banner-bar .banner-right .banner-details,
  .banner-container-constrained.banner-bar .banner-details{
    justify-content: center;
    text-align: center;
    padding-top: 0;
    margin-top: -6.5rem;
    position: relative;
    z-index: 2;
    top: auto;
    left: auto;
  }
  .banner-container-constrained.banner-bar p{
    padding: 0;
  }
  .banner-container-constrained.banner-box-content .banner-content::after,
  .banner-container-constrained.banner-bar.banner-trans-bar .img-wrapper:before{
    display: none;
  }
  .banner-container-constrained .banner-details .banner-content,
  .banner-container-constrained .banner-left .banner-details .banner-content,
  .banner-container-constrained .banner-right .banner-details .banner-content {
    width: 100%;
    align-items: center;
  }
  .banner-container-constrained.banner-float li{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.2rem;
  }
  .banner-container-constrained.banner-float .banner-right .img-wrapper,
  .banner-container-constrained.banner-float .img-wrapper{
    position: initial;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .banner-container-constrained.banner-float .banner-right .banner-details,
  .banner-container-constrained.banner-float .banner-details{
    justify-content: center;
    text-align: center;
    padding: 3.2rem 0 0;
  }
  .banner-container-constrained.banner-float .banner-right .banner-content,
  .banner-container-constrained.banner-float .banner-content{
    padding: 0;
  }
  .banner-container-constrained .banner-next,
  .banner-container-constrained .banner-previous,
  .banner-container-constrained .banner-pause {
    display: none !important;
  }
}
/* ----- Banner pagination ----- */
.banner_pagination {
  display: flex;
  justify-content: center;
  width: 100%;
  position: absolute;
  bottom: 1rem;
  color: var(--hero-pagination-color);
  z-index: 1;
}
.banner_pagination>div {
  margin: 0 .3rem;
  cursor: pointer;
}
.banner_pagination>div:hover {
  color: var(--hero-pagination-color-hover);
}
.banner_pagination>.active {
  color: var(--hero-pagination-color-active);
}
@media screen and (max-width: 1024px) {
  .banner_pagination {
    display: none;
  }
}
/* ===--- Inner Header ---=== */
.inner_header {
  width: 100%;
  height: var(--inner-header-height);
  min-height: 24rem;
  background: url(/assets/images/layout/inner_header.jpg) center center no-repeat;
  background-size: cover;
}
/* ===--- Forms ---=== */
form{
  /* The row gap, and the value the half/third-width calc()s subtract. This used to
     hard-define --form-gap here, which fixed an install whose :root never emitted it
     but also SHADOWED the themed value, so Theme Settings > Gaps > Form Gap did
     nothing on the frontend. A fallback in the var() reference survives a missing
     definition without overriding the theme. Every use site must carry it: an
     invalid var() zeroes the gap AND voids the width calc()s, collapsing half/third
     fields to content width. */
  display: flex;
  gap: var(--form-gap, 1.6rem);
  flex-wrap: wrap;
}
fieldset{
  width: 100%;
  border: none;
  margin: 0;
  padding: 0;
  position: relative;
}
label{
  font-size: 1.4rem;
  line-height: 1;
  color: var(--font-color-body);
  opacity: .64;
  position: absolute;
  top: .8rem;
  left: .8rem;
  z-index: 1;
}
textarea,
input{
  background: var(--input-bg);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-radius);
  width: 100%;
  padding: var(--input-padding);
}
textarea:focus,
textarea:focus-within,
textarea:focus-visible,
textarea:target,
input:focus,
input:focus-within,
input:focus-visible,
input:target,
.light textarea:focus,
.light textarea:focus-within,
.light textarea:focus-visible,
.light textarea:target,
.light input:focus,
.light input:focus-within,
.light input:focus-visible,
.light input:target{
  outline: none;
  border-color: var(--color-main);
  box-shadow: var(--shadow);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--font-color-body) !important;
  background: var(--color-bg) !important;
  color: var(--font-color-body) !important;
  -webkit-box-shadow: 0 0 0px 40rem var(--color-bg) inset !important;
}
.form_holder .message {
  margin: 0 0 1.6rem 0;
}
.form_holder .form_error {
  background: var(--color-danger);
  color: white;
  padding: 1.6rem;
  margin: 0 0 1.6rem;
}
form .form-terms {
  font-size: 1.2rem;
  line-height: 1.1;
  margin: 0;
  width: 100%;
  text-align: left;
  color: var(--font-color-body);
}
.light form .form-terms{
  color: var(--font-color-body-light);
}
.dark form .form-terms{
  color: var(--font-color-body-dark);
}
.colour form .form-terms,
.main form .form-terms{
  color: var(--font-color-body-main);
}
/* The width wrappers are flex COLUMNS so their <fieldset> (and the input inside it)
   always stretch to the wrapper's full width. A plain block <fieldset> can fail to
   fill a flex-item wrapper in some browsers — leaving the input at roughly half the
   column even though the wrapper itself is the right width. min-width:0 lets the
   fieldset shrink to the wrapper instead of its min-content. */
form .full_width,
form .half_width,
form .third_width{
  display: flex;
  flex-direction: column;
}
form .full_width > fieldset,
form .half_width > fieldset,
form .third_width > fieldset{
  min-width: 0;
}
form .full_width{
  width: 100%;
}
form .half_width{
  width: calc(50% - calc(var(--form-gap, 1.6rem) / 2));
}
form .third_width{
  width: calc(33.333% - calc(var(--form-gap, 1.6rem) * 2 / 3));
}
@media screen and (max-width: 1024px) {
  form .half_width,
  form .third_width{
    width: 100%;
  }
}
/* Dynamic-form section heading (the 'heading' field type) — groups the inputs
   beneath it (e.g. REFERRAL INFORMATION). Full width via .full_width; the title
   reads as an eyebrow rule. Colours inherit so it works in every section theme. */
.form-section-heading{
  margin: 2.4rem 0 0.8rem;
}
.form-section-heading:first-child{
  margin-top: 0;
}
.form-section-heading .form-section-heading-title{
  margin: 0;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--color-border);
  color: var(--font-color-body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.2rem;
  font-weight: 700;
}
/* Custom Form Checkbox */
.checkbox-container {
  display: block;
  position: relative;
  padding-left: 32px;
  color: var(--font-color-body);
  margin-bottom: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 2.4rem;
  display: flex;
  align-items: center;
}
.light .checkbox-container{
  color: var(--font-color-body-light);
}
.main .checkbox-container{
  color: var(--font-color-body-main);
}
.dark .checkbox-container{
  color: var(--font-color-body-dark);
}
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 2.4rem;
  width: 2.4rem;
  background-color: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: .4rem;
}
.light .checkmark {
  background-color: var(--color-bg-light);
  border: 2px solid var(--color-border-light);
}
.main .checkmark {
  background-color: var(--color-bg-main);
  border: 2px solid var(--color-border-main);
}
.dark .checkmark {
  background-color: var(--color-bg-dark);
  border: 2px solid var(--color-border-dark);
}
.checkbox-container:hover input ~ .checkmark,
.light .checkbox-container:hover input ~ .checkmark,
.dark .checkbox-container:hover input ~ .checkmark {
  border-color: var(--color-main);
}
.main .checkbox-container:hover input ~ .checkmark {
  border-color: var(--color-bg);
}
.checkbox-container input:checked ~ .checkmark,
.light .checkbox-container input:checked ~ .checkmark,
.dark .checkbox-container input:checked ~ .checkmark {
  background-color: var(--color-main);
  border-color: var(--color-main);
}
.main .checkbox-container input:checked ~ .checkmark {
  background-color: var(--color-bg);
  border-color: var(--color-bg);
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}
.checkbox-container .checkmark:after {
  left: 7px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--color-bg);
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.main .checkbox-container .checkmark:after{
  border: solid var(--color-main);
}
/* Custom Form Radio Button */
.radio-container {
  display: block;
  position: relative;
  padding-left: 32px;
  color: var(--font-color-body);
  margin-bottom: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 2.4rem;
  display: flex;
  align-items: center;
}
.light .radio-container{
  color: var(--font-color-body-light);
}
.main .radio-container{
  color: var(--font-color-body-main);
}
.dark .radio-container{
  color: var(--font-color-body-dark);
}
.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.radio-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 2.4rem;
  width: 2.4rem;
  background-color: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: 50%;
}
.light .radio-checkmark{
  background-color: var(--color-bg-light);
  border: 2px solid var(--color-border-light);
}
.main .radio-checkmark{
  background-color: var(--color-bg-main);
  border: 2px solid var(--color-border-main);
}
.dark .radio-checkmark{
  background-color: var(--color-bg-dark);
  border: 2px solid var(--color-border-dark);
}
.radio-container:hover input ~ .radio-checkmark,
.light .radio-container:hover input ~ .radio-checkmark,
.dark .radio-container:hover input ~ .radio-checkmark {
  border-color: var(--color-main);
}
.main .radio-container:hover input ~ .radio-checkmark {
  border-color: var(--color-bg);
}
.radio-container input:checked ~ .radio-checkmark,
.light .radio-container input:checked ~ .radio-checkmark,
.dark .radio-container input:checked ~ .radio-checkmark {
  background-color: var(--color-main);
  border-color: var(--color-main);
}
.main .radio-container input:checked ~ .radio-checkmark {
  background-color: var(--color-bg);
  border-color: var(--color-bg);
}
.radio-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.radio-container input:checked ~ .radio-checkmark:after {
  display: block;
}
.radio-container .radio-checkmark:after {
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-bg);
}
.light .radio-container .radio-checkmark:after{
    background: var(--color-bg-light);
}
.dark .radio-container .radio-checkmark:after{
    background: var(--color-bg-dark);
}
.main .radio-container .radio-checkmark:after{
    background: var(--color-bg-main);
}
/* Custom Form Switch */
.radio-container.switch-container,
.checkbox-container.switch-container{
  padding-left: 5.6rem;
}
.radio-container.switch-container .radio-checkmark,
.checkbox-container.switch-container .checkmark{
  width: 4.8rem;
  border-radius: 1.2rem;
}
.radio-container.switch-container .radio-checkmark::after,
.checkbox-container.switch-container .checkmark:after {
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  border: none;
  background: var(--color-bg-light);
  top: 1px;
  left: 1px;
  transform: none;
  border-radius: 50%;
  transition: var(--animate-fast);
}
.radio-container.switch-container:hover input ~ .radio-checkmark:after,
.checkbox-container:hover input ~ .checkmark:after{
  background: var(--color-main);
}
.radio-container.switch-container input:checked ~ .radio-checkmark:after,
.checkbox-container.switch-container input:checked ~ .checkmark:after{
  background: var(--color-main);
  left: calc(100% - 1.9rem);
}
/* Baseline Form */
.baseline-form label{
  position: initial;
  color: var(--font-color-body);
  margin: 0 0 .4rem;
  display: block;
}
.light .baseline-form label{
  color: var(--font-color-body-light);
}
.dark .baseline-form label{
  color: var(--font-color-body-dark);
}
.main .baseline-form label{
  color: var(--font-color-body-main);
}
/* ==========================================================================
   CUSTOM SELECT
   assets/js/custom-selects.js replaces every <select> inside .custom-select with
   a div widget: a .select-selected trigger plus a .select-items list, toggling
   .select-hide, .select-arrow-active and .same-as-selected.

   NONE of those had a rule anywhere in this stylesheet. The complete
   implementation lived in old-styles.css, which is not loaded by any template,
   so the widget shipped visually broken on every site: the JS hid the real
   <select>, then nothing hid .select-items — leaving every option rendered as
   plain text under a bare trigger, with the placeholder appearing twice (once in
   .select-selected, once as the first item). Every dynamic form with a select
   looked like that.

   The .baseline-form / .outline-form / .basic-form rules below DO style
   .select-selected, which is why this looked handled — but nothing in the
   codebase emits those wrapper classes, so they never match. Left in place
   rather than removed; the rules here are deliberately unscoped so they apply
   regardless.

   Styled from the --input-* tokens so the trigger is indistinguishable from the
   text inputs above it and follows the theme rather than the old hardcoded blue.
   ========================================================================== */
.custom-select {
  position: relative;
  width: 100%;
}
/* The native <select> was `display: none`, which removes it from the accessibility
   tree AND from the tab order — and its replacement (.select-selected / .select-items)
   is a plain <div> with no role, no tabindex and click-only handlers. So every select
   in every dynamic form was keyboard-inoperable and unnamed to a screen reader (axe
   `select-name`), which is a larger defect than the missing <label for> beside it.

   Visually hidden but still focusable and still announced: the real control stays the
   one assistive tech and the keyboard drive, the div widget is a decorative mirror
   (aria-hidden, set by the JS) that syncs from its `change` event. pointer-events:none
   so the 1px box can never swallow a click meant for the trigger. */
.custom-select select {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}
/* A keyboard user focuses the invisible native select, so the focus ring has to show
   on the visible trigger or there is no way to tell where you are. */
.custom-select:focus-within .select-selected {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}
.select-selected {
  background: var(--input-bg);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  padding-right: 3.2rem;      /* room for the arrow */
  width: 100%;
  cursor: pointer;
  user-select: none;
}
/* Caret. currentColor so it follows the inherited text colour in every context
   (light / dark / main) without needing four more rules. */
.select-selected::after {
  content: "";
  position: absolute;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-25%);
  width: 0;
  height: 0;
  border: 0.5rem solid transparent;
  border-top-color: currentColor;
  pointer-events: none;
}
.select-selected.select-arrow-active::after {
  border-top-color: transparent;
  border-bottom-color: currentColor;
  transform: translateY(-75%);
}
.select-items {
  position: absolute;
  top: calc(100% - var(--input-border-width));
  left: 0;
  right: 0;
  z-index: 99;
  background: var(--input-bg);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: 0 0 var(--input-radius) var(--input-radius);
  max-height: 24rem;
  overflow-y: auto;
}
.select-items div {
  padding: var(--input-padding);
  cursor: pointer;
  user-select: none;
}
.select-items div:hover,
.select-items div.same-as-selected {
  background: var(--color-bg);
}
/* Closed state. Scoped to .select-items so source order can never matter. */
.select-items.select-hide {
  display: none;
}

.baseline-form .select-selected,
.baseline-form input,
.baseline-form textarea{
  border: none;
  border-radius: 0;
  background: var(--color-bg-light);
  border-bottom: 2px solid var(--color-main);
  padding: .8rem;
}
.light .baseline-form .select-selected,
.light .baseline-form input,
.light .baseline-form textarea{
  background: var(--color-bg);
  border-color: var(--color-main);
}
.dark .baseline-form .select-selected,
.dark .baseline-form input,
.dark .baseline-form textarea{
  background: hsla(0 0% 100% / .08);
  border-color: var(--color-main);
}
.main .baseline-form .select-selected,
.main .baseline-form input,
.main .baseline-form textarea{
  background: hsla(0 0% 100% / .08);
  border-color: var(--color-bg);
}
/* Outline Form */
.outline-form label{
  position: initial;
  color: var(--font-color-body);
  margin: 0 0 .4rem;
  display: block;
}
.light .outline-form label{
  color: var(--font-color-body-light);
}
.dark .outline-form label{
  color: var(--font-color-body-dark);
}
.main .outline-form label{
  color: var(--font-color-body-main);
}
.outline-form .select-selected,
.outline-form input,
.outline-form textarea{
  border-radius: 0;
  background: var(--color-bg-light);
  border: 2px solid var(--color-border);
  padding: .8rem;
}
.light .outline-form .select-selected,
.light .outline-form input,
.light .outline-form textarea{
  background: var(--color-bg);
  border: 2px solid var(--color-border-light);
}
.dark .outline-form .select-selected,
.dark .outline-form input,
.dark .outline-form textarea{
  background: hsla(0 0% 100% / .08);
  border: 2px solid var(--color-border-dark);
}
.main .outline-form .select-selected,
.main .outline-form input,
.main .outline-form textarea{
  background: hsla(0 0% 100% / .08);
  border: 2px solid var(--color-border-main);
}
/* Basic Form */
.basic-form label{
  position: initial;
  color: var(--font-color-body);
  margin: 0 0 .4rem;
  display: block;
  opacity: .64;
}
.light .basic-form label{
  color: var(--font-color-body-light);
}
.main .basic-form label{
  color: var(--font-color-body-main);
}
.dark .basic-form label{
  color: var(--font-color-body-dark);
}
.basic-form .select-selected,
.basic-form input,
.basic-form textarea{
  border-radius: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: .8rem;
}
.light .basic-form .select-selected,
.light .basic-form input,
.light .basic-form textarea{
  background: var(--color-bg-light);
  border: 1px solid var(--color-border-light);
}
.main .basic-form .select-selected,
.main .basic-form input,
.main .basic-form textarea{
  background: var(--color-main);
  border: 1px solid var(--color-border-main);
}
.dark .basic-form .select-selected,
.dark .basic-form input,
.dark .basic-form textarea{
  background: var(--color-bg-dark);
  border: 1px solid var(--color-border-dark);
}
/* ----- Placeholder  ------ */
::-webkit-input-placeholder {
  color: var(--font-color-body);
  opacity: 0.48;
}
::-moz-placeholder {
  color: var(--font-color-body);
  opacity: 0.48;
}
:-ms-input-placeholder {
  color: var(--font-color-body);
  opacity: 0.48;
}
:-moz-placeholder {
  color: var(--font-color-body);
  opacity: 0.48;
}
.light ::-webkit-input-placeholder {
  color: var(--font-color-body-light);
  opacity: 0.48;
}
.light ::-moz-placeholder {
  color: var(--font-color-body-light);
  opacity: 0.48;
}
.light :-ms-input-placeholder {
  color: var(--font-color-body-light);
  opacity: 0.48;
}
.light :-moz-placeholder {
  color: var(--font-color-body-light);
  opacity: 0.48;
}
.dark ::-webkit-input-placeholder {
  color: var(--font-color-body-dark);
  opacity: 0.48;
}
.dark ::-moz-placeholder {
  color: var(--font-color-body-dark);
  opacity: 0.48;
}
.dark :-ms-input-placeholder {
  color: var(--font-color-body-dark);
  opacity: 0.48;
}
.dark :-moz-placeholder {
  color: var(--font-color-body-dark);
  opacity: 0.48;
}
.main ::-webkit-input-placeholder {
  color: var(--font-color-body-main);
  opacity: 0.48;
}
.main ::-moz-placeholder {
  color: var(--font-color-body-main);
  opacity: 0.48;
}
.main :-ms-input-placeholder {
  color: var(--font-color-body-main);
  opacity: 0.48;
}
.main :-moz-placeholder {
  color: var(--font-color-body-main);
  opacity: 0.48;
}
/* ----- Validation ----- */
/* Validating Entries */
.form_holder input:not([type="submit"]):focus:valid,
.form_holder textarea:focus:valid,
.form_holder select:focus:valid {
  box-shadow: 0px 0px 5px var(--color-alert);
}
/* Invalidating Entries */
.form_holder input:not([type="submit"]):focus:invalid,
.form_holder textarea:focus:invalid,
.form_holder select:focus:invalid {
  box-shadow: 0px 0px 5px var(--color-danger);
}
/* ----- Date Picker ----- */
.ui-datepicker .ui-datepicker-header {
  border: none;
  border-radius: 0;
  background-image: none;
  background: var(--color-main);
}
#ui-datepicker-div {
  padding: 0;
  border: 3px solid var(--color-main);
  border-radius: 0 0 .8rem .8rem;
}
.ui-datepicker .ui-datepicker-title {
  color: white;
}
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev {
  background-color: transparent !important;
  background-image: none;
  border: none;
}
.ui-datepicker .ui-datepicker-next span,
.ui-datepicker .ui-datepicker-prev span {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  background: transparent;
  width: 2rem;
  height: 2rem;
  transform: rotate(45deg);
  border-radius: 50%;
  border: none;
  cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev span {
  transform: rotate(-135deg);
}
.ui-datepicker .ui-datepicker-next:hover span,
.ui-datepicker .ui-datepicker-prev:not(.ui-state-disabled):hover span {
  background: white;
}
.ui-datepicker .ui-datepicker-next span::after,
.ui-datepicker .ui-datepicker-prev span::after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-5px, -3px);
}
.ui-datepicker .ui-datepicker-next:hover span::after,
.ui-datepicker .ui-datepicker-prev:not(.ui-state-disabled):hover span::after {
  border-color: var(--color-main);
}
.ui-datepicker table {
  margin: 0;
}
.ui-datepicker tbody tr td {
  border: 0;
  padding: 0;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
}
.ui-datepicker tbody tr td:last-child {
  border-right: none;
}
.ui-datepicker tbody tr:last-child td {
  border-bottom: none;
}
.ui-datepicker th {
  padding: 5px 0;
  background: var(--color-bg-light);
  border-right: 2px solid #eaeaea;
  border-bottom: 2px solid #eaeaea;
}
.ui-datepicker th:last-child {
  border-right: none
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: none;
}
table.ui-datepicker-calendar span {
  border: none !important;
  font-family: var(--font-body);
  text-transform: uppercase;
}
.ui-state-highlight,
.ui-widget-content {
  font-family: var(--font-body);
}
.ui-datepicker .ui-datepicker-title {
  text-transform: capitalize;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  background-image: none;
  color: white;
  background-color: #d5d1d1;
}
.ui-state-default:hover,
.ui-widget-content .ui-state-default:hover,
.ui-widget-header .ui-state-default:hover {
  color: var(--font-color-body);
  background: var(--color-bg-light);
}
.ui-state-disabled span,
.ui-widget-content .ui-state-disabled span,
.ui-widget-header .ui-state-disabled span {
  color: var(--font-color-body);
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  border-color: var(--color-main);
  background-image: none;
  background-color: hsl(0 0% 100%);
}
td.ui-datepicker-current-day a {
  background: var(--color-main) !important;
  color: hsl(0 0% 100%) !important;
}
td.ui-datepicker-current-day a:hover {
  background: var(--color-bg-dark) !important;
  color: hsl(0 0% 100%) !important;
}
td.ui-datepicker-days-cell-over.ui-datepicker-current-day.ui-datepicker-today a.ui-state-default.ui-state-highlight.ui-state-active {
  color: hsl(0 0% 20%) !important;
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: none;
  background: var(--color-main);
  color: white;
}
/* ----- Custom File Uploader ----- */
.resume {
  text-align: center;
  padding: 3.2rem 1.6rem;
  background: var(--color-bg-light);
  border-bottom: 3px solid var(--color-main);
}
.resume input[type="file"] {
  display: none;
}
.resume label {
  cursor: pointer;
  color: hsla(0 0% 0% / .35)
}
/* ---------- 12. Messages ---------- */
div.message_wrapper {
  margin: 0 0 1.6rem;
}
.content h2.hide_message {
  display: none;
}
.content h2.message_positive {
  width: 100%;
  color: white !important;
  background: var(--color-success) !important;
  padding: 1.6rem;
}
.content h2.message_negative {
  width: 100%;
  color: white !important;
  background: var(--color-danger) !important;
  padding: 1.6rem;
}
.message_wrapper a.message_link {
  color: white !important;
  text-decoration: underline;
}
.message_wrapper a.message_link:hover {
  text-decoration: none;
}

/* ===--- Flex ---=== */
.flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--flex-gap);
}
.flex>* {
    width: 100%;
}
.flex.flex-6>* {
    width: calc(calc(100% / 6) - calc(var(--flex-gap) * 5 / 6));
}
.flex.flex-5>* {
    width: calc(calc(100% / 5) - calc(var(--flex-gap) * 4 / 5));
}
.flex.flex-4>* {
    width: calc(calc(100% / 4) - calc(var(--flex-gap) * 3 / 4));
}
.flex.flex-3>* {
    width: calc(calc(100% / 3) - calc(var(--flex-gap) * 2 / 3));
}
.flex.flex-2>* {
    width: calc(calc(100% / 2) - calc(var(--flex-gap) / 2));
}
@media screen and (max-width: 1024px) {
    .flex.flex-6>*,
    .flex.flex-5>* {
        width: calc(calc(100% / 3) - calc(var(--flex-gap) * 2 / 3));
    }
    .flex.flex-4>*,
    .flex.flex-3>* {
        width: calc(calc(100% / 2) - calc(var(--flex-gap) / 2));
    }
    .flex.flex-2>* {
        width: 100%;
    }
}
@media screen and (max-width: 768px) {
    .flex.flex-6>*,
    .flex.flex-5>* {
        width: calc(calc(100% / 2) - calc(var(--flex-gap) / 2));
    }
}
/* .flex-3 used to drop to one column here at 768px, while .flex-4 holds two
   columns all the way down to 320px. At iPad-mini width that turned the Leadership
   and Service Pillars grids into a single column of 770–940px-tall photos (About was
   19,277px tall at 768px vs 9,856px on desktop). It now keeps the two columns it
   gets at 1024px and only stacks at phone width — 580px is this sheet's existing
   phone breakpoint. */
@media screen and (max-width: 580px) {
    .flex.flex-3>* {
        width: 100%;
    }
}
@media screen and (max-width: 320px) {
    .flex.flex-4>* {
        width: 100%;
    }
}
/* ===--- Grid ---=== */
.grid {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(12, 1fr);
}
.-grid .col-1 {
    grid-column: span 1;
}
.grid .col-2 {
    grid-column: span 2;
}
.grid .col-3 {
    grid-column: span 3;
}
.grid .col-4 {
    grid-column: span 4;
}
.grid .col-5 {
    grid-column: span 5;
}
.grid .col-6 {
    grid-column: span 6;
}
.grid .col-7 {
    grid-column: span 7;
}
.grid .col-8 {
    grid-column: span 8;
}
.grid .col-9 {
    grid-column: span 9;
}
.grid .col-10 {
    grid-column: span 10;
}
.grid .col-11 {
    grid-column: span 11;
}
.grid .col-12 {
    grid-column: span 12;
}
@media screen and (max-width: 1024px){
  .grid{
    grid-template-columns: repeat(8, 1fr);
  }
  .grid .col-1{
    grid-column: span 1;
  }
  .grid .col-2 {
    grid-column: span 2;
  }
  .grid .col-3,
  .grid .col-4 {
    grid-column: span 4;
  }
  .grid .col-5,
  .grid .col-6,
  .grid .col-7,
  .grid .col-8,
  .grid .col-9,
  .grid .col-10,
  .grid .col-11 {
    grid-column: span 8;
  }
}
@media screen and (max-width: 768px){
  .grid{
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap);
  }
  .grid .col-1{
    grid-column: span 1;
  }
  .grid .col-2,
  .grid .col-3 {
    grid-column: span 2;
  }

  .grid .col-5,
  .grid .col-6,
  .grid .col-7,
  .grid .col-8,
  .grid .col-9,
  .grid .col-10,
  .grid .col-11,
  .grid .col-4 {
    grid-column: span 4;
  }
}
@media screen and (max-width: 520px){
  .grid .col-1{
    grid-column: span 2;
  }
  .grid .col-2,
  .grid .col-3 {
    grid-column: span 4;
  }
}
/* ---=== Cards ===--- */
.card{
    padding-top: var(--card-padding-top);
    padding-right: var(--card-padding-right);
    padding-bottom: var(--card-padding-bottom);
    padding-left: var(--card-padding-left);
    border-radius: var(--card-radius);
    background: var(--card--bg);
    box-shadow: var(--card-shadow);
    overflow: var(--card-overflow);
    border-top: var(--card-border-top);
    border-right: var(--card-border-right);
    border-bottom: var(--card-border-bottom);
    border-left: var(--card-border-left);
}
.light .card{
    background: var(--card--bg-light);
}
.dark .card{
    background: var(--card--bg-dark);
}
.colour .card,
.main .card{
    background: var(--card--bg-main);
}
a.card{
    text-decoration: none;
}
/* pages-block.php renders .img-wrapper as an <a> whenever the card has a
   destination (click-through, a custom link, or a button field's URL) and as a
   <div> when it has none. The base card CSS never had an .img-wrapper rule, so the
   div was block-level only by default and the anchor arrived INLINE — the image
   escaped the card and the content overlapped it. Nothing here should depend on
   which element the block chose.
   Low specificity (0,0,1,1) on purpose: .inline-card/.icon-card/.box-list set their
   own .img-wrapper display at (0,0,3,0) and still win. */
a.img-wrapper{
  display: block;
}
.card img{
  width: 100%;
  height: auto;
}
.card .content-wrapper{
  padding-top: var(--card-content-padding-top);
  padding-right: var(--card-content-padding-right);
  padding-bottom: var(--card-content-padding-bottom);
  padding-left: var(--card-content-padding-left);
}
.card h3{
  font-size: var(--card-title-size);
  line-height: 1.1;
  margin: 0 0 1.2rem;
}
.card h3 a{
  text-decoration: none;
  color: var(--font-color-heading);
}
.light .card h3 a{
  color: var(--font-color-heading-light);
}
.dark .card h3 a{
  color: var(--font-color-heading-dark);
}
.colour .card h3 a,
.main .card h3 a{
  color: var(--font-color-heading-main);
}
.card h3 a:hover{
  color: var(--card-title-color-hover);
}
.light .card h3 a:hover{
  color: var(--card-title-color-hover-light);
}
.colour .card h3 a:hover,
.main .card h3 a:hover{
  color: var(--card-title-color-hover-main);
}
.dark .card h3 a:hover{
  color: var(--card-title-color-hover-dark);
}
.card p{
    margin: 0;
}
.card a.button{
  margin: 0;
}
/* Shadow Card
   The `shadow-card` widget_layout option shipped with NO css at all, so picking it
   rendered exactly like `standard`. The base .card is deliberately bare (DS 2.0 has
   no `.card{}` rule), so this variant owns its surface — every value is a Shadow Card
   theme field, never a literal, so a saved theme preset can restyle it. */
.shadow-card .card{
  background: var(--shadow-card--bg);
  box-shadow: var(--shadow-card-shadow);
  border-radius: var(--shadow-card-radius);
  overflow: var(--shadow-card-overflow);
}
.light .shadow-card .card{
  background: var(--shadow-card--bg-light);
}
.dark .shadow-card .card{
  background: var(--shadow-card--bg-dark);
}
.main .shadow-card .card{
  background: var(--shadow-card--bg-main);
}
.shadow-card .card .content-wrapper{
  padding: var(--shadow-card-content-padding);
}
/* Inline Card
   Image beside content. The card owns its surface (border/radius/overflow/background)
   rather than leaning on the shared --card-border-* composites, which default to
   `none` — so this variant previously had no border, no radius and no clipping at all.
   Every value is an Inline Card theme field. */
.inline-card .card{
  display: flex;
  background: var(--inline-card--bg);
  border: var(--inline-card-border-width) solid var(--inline-card-border-color);
  border-radius: var(--inline-card-radius);
  overflow: var(--inline-card-overflow);
}
.inline-card .card .img-wrapper{
  width: var(--inline-card-img-width);
  height: 100%;
  border-right: var(--inline-card-border-width) solid var(--inline-card-border-color);
}
.light .inline-card .card{
  background: var(--inline-card--bg-light);
}
.dark .inline-card .card{
  background: var(--inline-card--bg-dark);
}
.main .inline-card .card{
  background: var(--inline-card--bg-main);
}
.light .inline-card .card,
.light .inline-card .card .img-wrapper{
  border-color: var(--inline-card-border-color-light);
}
.main .inline-card .card,
.main .inline-card .card .img-wrapper{
  border-color: var(--inline-card-border-color-main);
}
.dark .inline-card .card,
.dark .inline-card .card .img-wrapper{
  border-color: var(--inline-card-border-color-dark);
}
.inline-card .card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.inline-card .card .content-wrapper{
  width: var(--inline-card-content-width);
  padding: var(--inline-card-content-padding);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.inline-card .card p{
  display: -webkit-box;
  -webkit-line-clamp: var(--inline-card-line-clamp);
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media screen and (max-width: 640px){
  /* Stacked: the image takes a fixed ratio and the divider moves to the bottom edge. */
  .inline-card .card{
    flex-direction: column;
  }
  .inline-card .card .img-wrapper{
    width: 100%;
    height: auto;
    aspect-ratio: var(--inline-card-img-aspect-mobile);
    border-right: none;
    border-bottom: var(--inline-card-border-width) solid var(--inline-card-divider-color-mobile);
  }
  .light .inline-card .card .img-wrapper,
  .dark .inline-card .card .img-wrapper,
  .main .inline-card .card .img-wrapper{
    border-bottom-color: var(--inline-card-divider-color-mobile);
  }
  .inline-card .card .content-wrapper{
    width: 100%;
  }
}
/* Icon Card */
/* The ring hangs half above the card, so the card must reserve that half above it
   (margin-top) and clear the half sitting INSIDE it, plus a gap, before content
   (padding-top). Both derive from the WRAPPER size: this maths used
   --card-icon-height (the 48px inner icon, not the 96px ring), which reserved only
   24px for a ring projecting 72px into the card — so the title rendered on top of
   it. The ring is also centred now, matching the design system. */
.icon-card .card{
  position: relative;
  background: var(--icon-card--bg);
  box-shadow: var(--icon-card-shadow);
  border-radius: var(--icon-card-radius);
  margin-top: calc(var(--card-icon-wrapper-height) / 2);
  padding: calc((var(--card-icon-wrapper-height) / 2) + var(--icon-card-content-gap))
           var(--icon-card-inline-padding)
           var(--icon-card-bottom-padding);
}
.light .icon-card .card{
  background: var(--icon-card--bg-light);
}
.dark .icon-card .card{
  background: var(--icon-card--bg-dark);
}
.main .icon-card .card{
  background: var(--icon-card--bg-main);
}
.icon-card .card .img-wrapper{
  width: var(--card-icon-wrapper-width);
  height: var(--card-icon-wrapper-height);
  border-radius: var(--card-icon-radius);
  position: absolute;
  top: calc(var(--card-icon-wrapper-height) / -2);
  left: 50%;
  transform: translate(-50%, 0);
  border-top: var(--card-icon-border-top);
  border-right: var(--card-icon-border-right);
  border-bottom: var(--card-icon-border-bottom);
  border-left: var(--card-icon-border-left);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The ring's inner padding is what makes a glyph: 24px inside a 96px ring leaves a
   48px content box. Fit 'cover' with Inset 0 turns the same component into an avatar. */
.icon-card .card .img-wrapper{
  padding: var(--icon-card-image-inset);
}
.icon-card .card .img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: var(--icon-card-image-fit);
}
.dark .icon-card .card .img-wrapper{
  border-color: var(--icon-card-ring-color-dark);
}
.main .icon-card .card .img-wrapper{
  border-color: var(--icon-card-ring-color-main);
}
/* Content aligns under the ring; .button is inline-flex so text-align carries it. */
.icon-card .card .content-wrapper{
  padding: 0;
  text-align: var(--icon-card-text-align);
}
/* Box Styles */
.box-list .card{
  position: relative;
  overflow: hidden;
}
.box-list .card::after{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--box-overlay);
  opacity: var(--box-overlay-opacity);
  transition: var(--animate-medium);
  z-index: 0;
}
.box-list .card:hover::after{
  opacity: var(--box-overlay-opacity-hover);
}
.light .box-list .card::after{
  background: var(--box-overlay-light);
}
.main .box-list .card::after{
  background: var(--box-overlay-main);
}
.dark .box-list .card::after{
  background: var(--box-overlay-dark);
}
.box-list .img-wrapper{
  width: 100%;
  height: 100%;
}
.box-list .img-wrapper img{
  height: 100%;
  object-fit: cover;
}
.box-list .content-wrapper{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: var(--box-content-padding);
    /* The scrim is a ::after, i.e. the card's LAST child, so at equal stacking level it
       painted over this wrapper and hid the text entirely. Its sibling variant
       .animated-box-list already lifts its wrapper; box-list simply missed it. */
    z-index: 1;
}
.box-list .card h3{
  margin: var(--box-title-margin);
}
/* The box-list text sits on the scrim, so it needs its own colour: without these
   rules it inherited the near-black heading/body colour and read as invisible. */
.box-list .card h3,
.box-list .card h3 a,
.box-list .card p{
  color: var(--box-text-color);
}
.box-list .card h3 a:hover{
  color: var(--box-title-color-hover);
}
.box-list .card p{
  display: none;
}
.box-list .card .button{
  display: none;
}
/* Animated Box */
.animated-box-list .card{
  position: relative;
  overflow: hidden;
}
.animated-box-list .card::after{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--box-overlay);
  opacity: var(--box-overlay-opacity);
  transition: var(--animate-medium);
  z-index: 0;
}
.animated-box-list .card:hover::after{
  opacity: var(--box-overlay-opacity-hover);
}
.animated-box-list .img-wrapper{
  width: 100%;
  height: 100%;
}
.animated-box-list .img-wrapper img{
  height: 100%;
  object-fit: cover;
}
.animated-box-list .card .content-wrapper{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: var(--animated-box-content-padding);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  z-index: 1;
}
/* Text sits on the scrim, so it needs its own colour — without this it inherited the
   near-black heading colour, exactly as box-list did. */
.animated-box-list .card h3,
.animated-box-list .card h3 a,
.animated-box-list .card h3 a:hover,
.animated-box-list .card p{
  color: var(--animated-box-text-color);
}
.animated-box-list .card h3{
  margin: var(--animated-box-title-margin);
  transition: var(--animate-medium);
}
.animated-box-list .card:hover h3{
  margin: var(--animated-box-title-margin-hover);
}
.animated-box-list .card p{
  display: -webkit-box;
  -webkit-line-clamp: var(--animated-box-line-clamp);
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 0;
  opacity: 0;
  margin: 0;
  transition: var(--animate-medium);
}
.animated-box-list .card:hover p{
  height: var(--animated-box-reveal-height);
  opacity: 1;
  margin: var(--animated-box-p-margin-hover);
}
/* The button gets its own palette on this variant: a light chip on the image that
   inverts to brand on hover, independent of the global --button-* colours. */
.animated-box-list .card .button{
  height: 0;
  opacity: 0;
  padding-block: 0;
  margin-top: 0;
  background: var(--animated-box-button-bg);
  color: var(--animated-box-button-color);
  border-color: var(--animated-box-button-bg);
}
.animated-box-list .card:hover .button{
  height: var(--button-height);
  opacity: 1;
}
.animated-box-list .card .button:hover{
  background: var(--animated-box-button-bg-hover);
  color: var(--animated-box-button-color-hover);
  border-color: var(--animated-box-button-bg-hover);
}
/* ---=== Section Styles ===--- */
.content_container .content > .img-wrapper{
  width: 100%;
  height: auto;
  max-width: calc(50% - 4rem);
}
.content_container .content > .img-wrapper img{
  width: 100%;
  height: auto;
}
/* Image Background */
.img-bg{
  position: relative;
  overflow: hidden;
}
.img-bg .img-wrapper{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.img-bg .img-wrapper::after{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-bg);
  opacity: var(--section-img-bg-overlay-opacity);
}
.img-bg .img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-bg .content{
  position: relative;
  z-index: 2;
}
.img-bg.light .img-wrapper::after{
  background: var(--color-bg-light);
}
.img-bg.colour .img-wrapper::after{
  background: var(--color-main);
}
.img-bg.dark .img-wrapper::after{
  background: var(--color-bg-dark);
}
/* Blur Overlay */
.img-bg.blur-overlay .content{
  padding: 3.2rem;
  border-radius: 1.6rem;
  border: 1px solid hsla(0 0% 100% / .16);
  background: hsla(0 0% 100% / .16);
  backdrop-filter: blur(8px);
}
/* Shadow Content */
.shadow-content .content{
  padding: 3.2rem;
  border-radius: 1.6rem;
  background: var(--shadow-content-bg);
  box-shadow: var(--shadow);
}
.shadow-content.light .content{
  background: var(--shadow-content-bg-light);
}
.shadow-content.main .content{
  background: var(--shadow-content-bg-main);
}
.shadow-content.dark .content{
  background: var(--shadow-content-bg-dark);
}
/* Image Float */
.img-float .content{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8rem;
}
.img-float .img-wrapper{
  max-width: 40rem;
  width: 100%;
  corner-shape: bevel;
  border-radius: 0 3.2rem 0 0;
  overflow: hidden;
}
.img-float .img-wrapper img{
  width: 100%;
  height: auto;
}
.img-float .editable_content{
  width: calc(100% - 48rem);
}
.img-float.img-right .content{
  flex-direction: row-reverse;
}
@media screen and (max-width: 1024px) {
  .img-float .content,
  .img-float.img-right .content{
    flex-direction: column;
    gap: 4rem;
  }
  .img-float .editable_content{
    width: 100%;
  }
}
/* Image Fade */
.img-fade{
  position: relative;
}
.img-fade .img-wrapper{
  width: 44%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.img-fade .img-wrapper::after{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to right, transparent 0%, var(--color-bg) 99%, var(--color-bg) 100%);
}
.img-fade .img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-fade .content{
  display: flex;
  justify-content: flex-end;
  position: relative;
}
.img-fade .editable_content{
  width: 60%;
}
.img-fade.img-right .img-wrapper{
  left: auto;
  right: 0;
}
.img-fade.img-right .img-wrapper::after{
  background: linear-gradient(to left, transparent 0%, var(--color-bg) 99%, var(--color-bg) 100%);
}
.img-fade.img-right .content{
  justify-content: flex-start;
}
.img-fade.light .img-wrapper::after{
  background: linear-gradient(to right, transparent 0%, var(--color-bg-light) 99%, var(--color-bg-light) 100%);
}
.img-fade.img-right.light .img-wrapper::after{
  background: linear-gradient(to left, transparent 0%, var(--color-bg-light) 99%, var(--color-bg-light) 100%);
}
.img-fade.colour .img-wrapper::after{
  background: linear-gradient(to right, transparent 0%, var(--color-main) 99%, var(--color-main) 100%);
}
.img-fade.img-right.colour .img-wrapper::after{
  background: linear-gradient(to left, transparent 0%, var(--color-main) 99%, var(--color-main) 100%);
}
.img-fade.dark .img-wrapper::after{
  background: linear-gradient(to right, transparent 0%, var(--color-bg-dark) 99%, var(--color-bg-dark) 100%);
}
.img-fade.img-right.dark .img-wrapper::after{
  background: linear-gradient(to left, transparent 0%, var(--color-bg-dark) 99%, var(--color-bg-dark) 100%);
}
@media screen and (max-width: 1024px){
  .img-fade{
    padding-top: 32rem; 
  }
  .img-fade .img-wrapper{
    width: 100%;
    height: 32rem;
  }
  .img-fade .editable_content{
    width: 100%;
  }
  .img-fade .img-wrapper::after,
  .img-fade.img-right .img-wrapper::after{
    background: linear-gradient(to bottom, transparent 0%, var(--color-bg) 99%, var(--color-bg) 100%);
  }
  .img-fade.light .img-wrapper::after,
  .img-fade.img-right.light .img-wrapper::after{
    background: linear-gradient(to bottom, transparent 0%, var(--color-bg-light) 99%, var(--color-bg-light) 100%);
  }
  .img-fade.colour .img-wrapper::after,
  .img-fade.img-right.colour .img-wrapper::after{
    background: linear-gradient(to bottom, transparent 0%, var(--color-main) 99%, var(--color-main) 100%);
  }
  .img-fade.dark .img-wrapper::after,
  .img-fade.img-right.dark .img-wrapper::after{
    background: linear-gradient(to bottom, transparent 0%, var(--color-bg-dark) 99%, var(--color-bg-dark) 100%);
  }
}
/* Shadow Overlay */
.img-fade.shadow-overlay .img-wrapper::after{
  display: none;
}
.img-fade.shadow-overlay .editable_content{
  padding: 3.2rem;
  border-radius: 1.6rem;
  background: var(--shadow-content-bg);
  box-shadow: var(--shadow);
  width: 64%;
}
.img-fade.shadow-overlay.light .editable_content{
  background: var(--shadow-content-bg-light);
}
.img-fade.shadow-overlay.main .editable_content{
  background: var(--shadow-content-bg-main);
}
.img-fade.shadow-overlay.dark .editable_content{
  background: var(--shadow-content-bg-dark);
}
@media screen and (max-width: 1024px){
  .img-fade.shadow-overlay{
    padding-top: 28rem;
  }
  .img-fade.shadow-overlay .editable_content{
    width: 100%;
  }
}
/* No Fade */
.img-fade.no-fade .img-wrapper::after{
  display: none;
}
.img-fade.no-fade .editable_content {
  width: 55%;
  padding-left: 6.4rem;
}
.img-fade.no-fade.img-right .editable_content {
  padding-left: 0;
  padding-right: 6.4rem;
}
@media screen and (max-width: 1024px){
  .img-fade.no-fade .editable_content,
  .img-fade.no-fade.img-right .editable_content{
    width: 100%;
    padding: 4.8rem 0 0;
  }
}
/* Strip List
   Full-bleed bands with an absolutely-positioned image column, so they carry their own
   inline padding rather than the section's — the copy is offset from an image edge, not
   the viewport. The desktop padding rule did not exist at all, so strip content sat
   flush against the band's top and bottom edges. */
.strip-list-wrapper{
  padding: 0;
}
.strip-list{
  position: relative;
  padding: var(--strip-padding-block) var(--strip-padding-inline);
  background: var(--strip-bg);
}
.light .strip-list{
  background: var(--strip-bg-light);
}
.dark .strip-list{
  background: var(--strip-bg-dark);
}
.colour .strip-list,
.main .strip-list{
  background: var(--strip-bg-main);
}
.strip-list:nth-of-type(2n){
  background: var(--strip-bg-alt);
}
.light .strip-list:nth-of-type(2n){
  background: var(--strip-bg-alt-light);
}
.dark .strip-list:nth-of-type(2n){
  background: var(--strip-bg-alt-dark);
}
.colour .strip-list:nth-of-type(2n),
.main .strip-list:nth-of-type(2n){
  background: var(--strip-bg-alt-main);
}
.strip-list .img-wrapper{
  width: var(--strip-img-width);
  height: 100%;
  /*position: absolute;*/
  top: 0;
  left: 0;
  overflow: hidden;
}
.strip-list:nth-of-type(2n) .img-wrapper{
  left: auto;
  right: 0;
}
.strip-list .img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Strip lightbox: the lead image becomes a swipebox trigger when the strip has
   more than one photo. The anchor has to fill the wrapper so the img's
   height:100% still resolves. Trailing photos ride along hidden. */
.strip-gallery-trigger{
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}
.strip-gallery-extra{
  display: none !important;
}
.strip-gallery-count{
  position: absolute;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1.2rem;
  border-radius: 999px;
  background: hsla(0 0% 0% / .55);
  color: white;
  font-size: 1.3rem;
  line-height: 1;
  backdrop-filter: blur(4px);
  transition: var(--animate-fast);
}
.strip-gallery-trigger:hover .strip-gallery-count{
  background: var(--color-main);
}
.strip-list .content{
  display: flex;
  justify-content: flex-end;
}
.strip-list:nth-of-type(2n) .content{
  justify-content: flex-start;
}
.strip-list .editable_content{
  width: calc(100% - var(--strip-img-width) - var(--strip-content-gutter));
}
/* Strip with no image uploaded: content runs full width (no image column). */
.strip-list.strip-no-image .content{
  justify-content: flex-start;
}
.strip-list.strip-no-image .editable_content{
  width: 100%;
}
@media screen and (max-width: 1024px){
  .strip-list-wrapper .strip-list{
    padding: var(--strip-padding-top-mobile) var(--strip-padding-inline-mobile) var(--strip-padding-bottom-mobile);
  }
  /* No image: drop the top padding reserved for the (absent) mobile image. */
  .strip-list-wrapper .strip-list.strip-no-image{
    padding-top: var(--strip-padding-bottom-mobile);
  }
  .strip-list .img-wrapper{
    width: 100%;
    height: var(--strip-img-height-mobile);
  }
  .strip-list .editable_content{
    width: 100%;
  }
}
/* ---=== Animations ===--- */
.fadeFromLeft {
  opacity: 0;
  transform: translateX(-10rem);
  transition: 0.5s ease-in-out;
}
.fadeFromRight {
  opacity: 0;
  transform: translateX(10rem);
  transition: 0.5s ease-in-out;
}
.fadeFromTop {
  opacity: 0;
  transform: translateY(-10rem);
  transition: 0.5s ease-in-out;
}
.fadeFromBottom {
  opacity: 0;
  transform: translateY(10rem);
  transition: 0.5s ease-in-out;
}
.fadeFromLeft.show,
.fadeFromRight.show,
.fadeFromTop.show,
.fadeFromBottom.show {
  opacity: 1;
  transform: translateY(0);
}
/* ---=== Swipebox Styles =--- */
.swipebox_full a img {
  width: 100%;
  height: auto;
  transition: var(--animate-medium);
}
.swipebox_full a img:hover {
  opacity: 0.48;
}
/* ---=== 19. Sub Page Menu ===---  */
.files-list a.button{
  margin: 0;
  width: 100%;
}
/* ---------- 20. Contact ---------- */
ul.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.contact-list li{
  margin: 0;
  padding: 0;
}
ul.contact-list li i,
ul.contact-list li .icon-wrapper{
  display: none;
}
ul.contact-list li strong{
  display: block;
}
ul.contact-list li address{
  font-style: normal;
}
ul.contact-list li a {
  text-decoration: none;
}
ul.contact-list li ul.hours{
  list-style: none;
  margin: 0;
}
/* Contact Shadow */
ul.contact-list.contact-shadow > li{
  background: var(--color-bg);
  padding: 1.6rem;
  border-radius: 1.6rem;
  box-shadow: var(--shadow);
}
.dark ul.contact-list.contact-shadow > li,
.main ul.contact-list.contact-shadow > li{
  background: hsla(0 0% 100% / .08);
}
/* Contact FA Icon */
ul.contact-list.contact-fa-icon li{
  display: flex;
  align-items: flex-start;
  gap: .8rem;
}
ul.contact-list.contact-fa-icon li i{
  margin: 2px 0 0;
  color: var(--color-main);
  display: block;
}
/* Contact Img Icon */
ul.contact-list.contact-img-icon li .icon-wrapper{
  display: flex;
  --icon-size: 6.4rem;
  width: var(--icon-size);
  height: var(--icon-size);
  border: 2px solid var(--color-main);
  margin: 0 0 0.8rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-bg);
}
ul.contact-list.contact-img-icon li .icon-wrapper img{
  width: 3.2rem;
  height: auto;
}
.main ul.contact-list.contact-img-icon li .icon-wrapper{
  background: var(--color-bg);
}
/* Contact Img Icon Inline */
ul.contact-list.contact-img-icon.icon-inline li{
  display: flex;
  gap: .8rem;
}
ul.contact-list.contact-img-icon.icon-inline li .icon-wrapper{
  margin: 0;
}
ul.contact-list.contact-img-icon.icon-inline li span{
  width: calc(100% - calc(.8rem - var(--icon-size)));
}
@media screen and (max-width: 420px) {
  ul.contact-list.contact-img-icon.icon-inline li{
    flex-direction: column;
  }
  ul.contact-list.contact-img-icon.icon-inline li span{
    width: 100%;
  }
}
/* Contact Img Icon Shadow */
ul.contact-list.contact-shadow.contact-img-icon > li{
  margin-top: 3.2rem;
}
ul.contact-list.contact-shadow.contact-img-icon li .icon-wrapper{
  margin-top: -4.8rem;
}
/* ---=== Contact Multi Location ===---*/
.multi-loc iframe {
  aspect-ratio: 6 / 3.5;
  width: 100%;
  height: auto;
}
.multi-loc h3 {
  font-size: 2.2rem;
  padding: 0 0 .8rem;
  margin: 0 0 .8rem;
  border-bottom: var(--color-border);
}
.multi-loc ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 0;
  margin: 0;
}
.multi-loc ul li{
  width: 100%;
  padding: 0;
  margin: 0;
}
.multi-loc strong {
  display: block;
  color: var(--color-heading);
}
.multi-loc address {
  font-style: normal;
}
.multi-loc a {
  text-decoration: none;
}
.multi-loc pre{
  margin: 0;
}
.dark .multi-loc h3{
  border-color: var(--color-border-dark);
}
.main .multi-loc h3{
  border-color: var(--color-border-main);
}
.dark .multi-loc strong{
  color: var(--font-color-heading-dark);
}
.main .multi-loc strong{
  color: var(--font-color-heading-main);
}
/* ---=== Map ===--- */
.map-holder {
  height: 42rem;
  overflow: hidden;
}
.map-holder iframe {
  height: 100%;
  width: 100%;
}
/* ---=== Social Media ===--- */
.social_media ul {
  display: flex;
  margin: 0;
  padding: 0;
  gap: 16px;
}
.social_media ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.social_media ul li a {
  width: 4rem;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  text-align: center;
  color: var(--color-bg);
  background: var(--color-main);
  border-radius: 50%;
  transition: var(--animate-medium);
}
.social_media ul li a:hover {
  background: var(--color-bg-dark);
}
.social_media ul li a i {
  font-size: 2.2rem;
  line-height: 1;
}
.main .social_media ul li a{
  background: var(--color-bg);
  color: var(--color-main);
}
.colour .social_media ul li a:hover{
  background: var(--color-bg-dark);
  color: var(--color-bg);
}
.dark .social_media ul li a:hover{
  background: var(--color-bg);
  color: var(--color-bg-dark);
}
/* ---=== Toggler ===--- */
h4.toggle,
h4.toggle.active.open {
  color: var(--color-heading);
  background: url(/assets/images/layout/toggle.png) no-repeat 10px 11px;
  padding: 8px 0 8px 35px;
  margin: 10;
  cursor: pointer;
}
h4.toggle.active,
h4.toggle.open {
  background-position: 10px -39px;
}
h4.toggle:hover,
h4.toggle.active.open:hover {
  background-position: 10px -39px;
}
div.toggler {
  border-top: none;
  margin: 0;
  overflow: hidden;
  padding: 0 0 0 24px;
}
div.toggler p {
  margin: 0 0 1.2rem;
  padding: 0;
}
.toggle-wrapper .toggler ul,
.toggle-wrapper .toggler ol {
  margin: 0 0 1.2rem 2rem;
}
div.toggler>*:last-child {
  margin-bottom: 0;
}
/* ---===. Products ===--- */
/* Search */
form.search_form {
  display: flex;
  margin: 0 0 3.2rem;
}
form.search_form input.search_input {
  width: calc(100% - 16px);
  border-radius: .4rem 0 0 .4rem;
  border: 1px solid hsla(0 0% 0% / .15);
  border-radius: none;
  background: hsla(0 0% 0% / .05);
  padding: .5rem .8rem;
}
form.search_form input.button {
  width: 16rem;
  border-radius: 0 .4rem .4rem 0;
  margin: 0;
}
/* ---=== Modal Styles ===--- */
summary.btn {
  cursor: pointer;
  display: inline-block;
  background-color: var(--color-main);
  padding: 5px 20px;
  border-radius: 10px;
  margin: 10px 0;
}
.details-with-modal summary::-webkit-details-marker {
  display: none;
}
details-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  max-height: 80vh;
  overflow: scroll;
  max-width: 90vw;
  width: 448px;
  background-color: var(--color-bg);
}
.details-with-modal[open]>summary:before {
  content: " ";
  background: hsla(0 0% 0% / 0.32);
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
}
.modal-header {
  padding: 20px;
  background-color: var(--color-main);
}
.modal-body {
  padding: 20px;
}
.modal-footer {
  padding: 20px;
  text-align: center;
}
.modal-footer button {
  width: 95%;
  display: inline-block;
  background-color: var(--color-main);
  font-size: 1rem;
  padding: 10px;
  cursor: pointer;
  transition: var(--animate-medium);
}
.modal-footer button:hover {
  background-color: var(--color-bg-dark);
  color: var(--color-bg);
}
/* ---=== Toggles ===--- */
.toggle-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.toggle-wrapper .toggle_faq {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: 2.4rem;
  margin: 0;
  cursor: pointer;
  padding-left: 2.4rem;
  position: relative;
}
.toggle-wrapper .toggle_faq .icon {
  width: 1.6rem;
  height: 1.6rem;
  display: block;
  position: absolute;
  transition: var(--animate-medium);
  left: 0;
  top: 5px;
}
.toggle-wrapper .toggle_faq.active .icon {
  transform: rotate(135deg);
}
.toggle-wrapper .toggle_faq .icon i {
  width: 1.6rem;
  height: .2rem;
  background: var(--color-main);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}
.toggle-wrapper h3.toggle_faq .icon i:nth-child(2) {
  transform: translate(-50%, -50%) rotate(0deg);
}
.toggle-wrapper .toggler {
  padding: .8rem 1.6rem 0 2.4rem;
}
/* ---=== Toggles: outline-toggles (accordion) ===---
   `outline-toggles` is an offered Widget Layout with no CSS behind it, so a widget
   set to it rendered exactly like the bare default. Styled after the prototype's
   FAQ (demo/resources.html .acc): hairline dividers, the + on the RIGHT that
   collapses to a minus when open, and room under the intro. Values transcribe 1:1
   because both sheets use a 62.5% root.
   Markup is toggles-block.php's: .block > h3.toggle_faq(.icon > i,i + .question)
   + .toggler, with main.js adding .active to the h3 and sliding the .toggler. */
.toggle-wrapper.outline-toggles {
  gap: 0;
  border-top: 1px solid var(--color-line);
}
/* "Space under the heading" — only when something (the intro) precedes the list. */
* + .toggle-wrapper.outline-toggles {
  margin-top: clamp(3.2rem, 4vw, 5.6rem);
}
.toggle-wrapper.outline-toggles .block {
  border-bottom: 1px solid var(--color-line);
}
.toggle-wrapper.outline-toggles .toggle_faq {
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.4rem;
  padding: 2.6rem 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.63rem, 1.5vw, 1.98rem);
  letter-spacing: -.02em;
  line-height: 1.35;
  transition: color .3s cubic-bezier(.22, .61, .36, 1);
}
.toggle-wrapper.outline-toggles .toggle_faq:hover {
  color: var(--color-main);
}
.toggle-wrapper.outline-toggles .toggle_faq .question {
  flex: 1;
}
/* The icon is FIRST in the markup; `order` moves it to the right without touching
   the template. Back in flow (the base rule pins it absolutely to the left). */
.toggle-wrapper.outline-toggles .toggle_faq .icon {
  order: 2;
  flex: none;
  position: relative;
  left: auto;
  top: auto;
  width: 1.8rem;
  height: 1.8rem;
  margin-top: .5rem;
  transform: none;
}
/* Base rotates the whole icon 135deg into an ×; the accordion becomes a minus. */
.toggle-wrapper.outline-toggles .toggle_faq.active .icon {
  transform: none;
}
.toggle-wrapper.outline-toggles .toggle_faq .icon i {
  width: 1.8rem;
  height: .2rem;
  background: var(--color-signal);
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
/* The first bar is the vertical one (base: rotate(90deg)). Collapsing its length
   leaves the horizontal bar — a minus. scaleX applies before the rotation, so it
   shortens the bar along its own length. */
.toggle-wrapper.outline-toggles .toggle_faq.active .icon i:nth-child(1) {
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}
.toggle-wrapper.outline-toggles .toggler {
  padding: 0 0 2.8rem;
  max-width: 78ch;
}
/* p and li set their own colour and line-height, so they are targeted directly. */
.toggle-wrapper.outline-toggles .toggler,
.toggle-wrapper.outline-toggles .toggler p,
.toggle-wrapper.outline-toggles .toggler li {
  color: var(--color-steel);
  line-height: 1.72;
}
@media (prefers-reduced-motion: reduce) {
  .toggle-wrapper.outline-toggles .toggle_faq,
  .toggle-wrapper.outline-toggles .toggle_faq .icon i {
    transition: none;
  }
}
/* ---=== Widget Slider ===--- */
.widget-slider {
  position: relative;
  padding-bottom: 4rem;
}
.widget-slider .swiper-slide {
  height: auto;
}
.widget-slider .swiper-slide .card{
  height: 100%;
  display: flex;
  align-items: center;
  gap: 3.2rem;
}
.widget-slider .swiper-slide .card .img-wrapper{
  width: 100%;
  max-width: 40rem;
  height: 100%;
}
.widget-slider .swiper-slide .card .img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.widget-slider .swiper-slide .card .content-wrapper{
  width: calc(100% - 43.2rem);
  padding-block: 3.2rem;
}
.widget-slider .swiper-button-prev,
.widget-slider .swiper-button-next {
  color: white;
  top: calc(50% - 2rem);
  background: var(--color-main);
  border-radius: 50%;
  height: 4rem;
  width: 4rem;
  left: -2rem;
}
.widget-slider .swiper-button-next{
  left: auto;
  right: -2rem;
}
.widget-slider .swiper-button-prev:hover,
.widget-slider .swiper-button-next:hover{
  background: var(--color-bg-dark);
}
.swiper .swiper-button-next:after, .swiper .swiper-button-prev:after{
  font-size: 2rem;
}
.widget-slider .swiper-pagination-bullet-active {
  background: var(--color-main);
}
.swiper-pagination{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  bottom: 15px;
}
@media screen and (max-width: 1024px) {
    .widget-slider .swiper-slide .card{
    flex-direction: column;
    }
    .widget-slider .swiper-slide .card .img-wrapper{
    aspect-ratio: 2 / 1;
    max-width: 100%;
    }
    .widget-slider .swiper-slide .card .content-wrapper{
    width: 100%;
    padding: 0;
    }
}
/* ---=== Widget Category Filter ===--- */
.widget-category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--flex-gap);
  margin-block: 1.6rem;
}
.widget-category-filter .filter-btn {
  padding: 0 2.4rem;
  border: 2px solid var(--color-border);
  background: var(--color-bg-light);
  cursor: pointer;
  border-radius: .4rem;
  font-size: 1.4rem;
  line-height: 1;
  transition: var(--animate-medium);
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.widget-category-filter .filter-btn:hover,
.widget-category-filter .filter-btn.active {
  background: var(--color-main);
  border-color: var(--color-main);
  color: var(--font-color-body-main);
}
/* ---=== Pop Up ===--- */
.cta-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  background: hsla(0 0% 0% / .5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cta-popup .pop-up {
  background: white;
  padding: 3.2rem;
  border-radius: 1.6rem 0 1.6rem 1.6rem;
  box-shadow: var(--shadow);
  width: 48rem;
  position: relative;
  text-align: center;
}
.cta-popup .pop-up .close-popup {
  width: 2.4rem;
  height: 2.4rem;
  position: absolute;
  top: -12px;
  right: -12px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-main);
  border-radius: 50%;
  transition: var(--animate-medium);
  cursor: pointer;
}
.cta-popup .pop-up .close-popup:hover {
  background: var(--color-bg-dark);
}
.cta-popup .pop-up h3 {
  font-size: 3.2rem;
  margin: 0 0 1.6rem;
}
.cta-popup .pop-up .button {
  margin: 1.6rem 0 0;
}
/* ---=== Pop Up ===--- */
.page-details.h6 {
  font-size: 1.6rem;
  line-height: 1;
  margin: 0 0 1.6rem;
  color: var(--font-color-body);
}
.page-details.h6 a {
  color: var(--font-color-body);
  text-decoration: none;
}
.page-details.h6 a:hover {
  color: var(--color-main);
}
/* ---=== Logo Slider ===--- */
#logo-link-slider {
  overflow: hidden;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#logo-link-slider .logo-link-slider-wrapper {
  display: block;
  width: 100%;
  position: relative;
}
#logo-link-slider .logo-link-slider-wrapper ul {
  position: relative;
  left: 0px;
  display: flex;
  justify-content: space-around;
  list-style: none;
}
#logo-link-slider .logo-link-slider-wrapper ul li {
  display: inline-block;
  position: relative;
  margin: 0px auto;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
#logo-link-slider .logo-link-slider-wrapper ul li a img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: 0 linear left;
  -moz-transition: 0 linear left;
  transition: 0 linear left;
  opacity: 0.65;
  width: 100%;
}
.logo_link_static {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.logo_link_static a img {
  width: 200px;
}
/* ----- Contact CTA ----- */
.contact-info-widget{
  position: relative;
}
.contact-info-widget .content{
  display: flex;
  flex-direction: column;
  --contact-gap: 4rem;
  gap: var(--contact-gap);
}
.contact-info-widget .content .contact-list{
  margin-top: 4rem;
}
.contact-info-widget.has-sidebar .content{
  flex-direction: row;
}
.contact-info-widget.has-sidebar .content .contact-info-sidebar,
.contact-info-widget.has-sidebar .content .contact-info-main{
  width: calc(50% - calc(var(--contact-gap) / 2));
}
.contact-info-widget.has-sidebar .content .contact-info-sidebar form .half_width,
.contact-info-widget.has-sidebar .content .contact-info-sidebar form .third_width{
  width: 100%;
}
.contact-info-widget.has-sidebar .content .contact-info-sidebar .img-wrapper{
  width: 100%;
  height: 100%;
}
.contact-info-widget.has-sidebar .content .contact-info-sidebar .map-holder iframe,
.contact-info-widget.has-sidebar .content .contact-info-sidebar .img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-info-widget.has-sidebar .content .contact-info-sidebar .map-holder{
  position: absolute;
  top: 0;
  right: 0;
  width: calc(50% - calc(var(--contact-gap) / 2));
  height: 100%;
}
form .button{
  margin: 0 0 0 auto;
}
@media screen and (max-width: 1024px) {
  .contact-info-widget.has-sidebar .content{
    flex-direction: column;
  }
  .contact-info-widget.has-sidebar .content .contact-info-sidebar,
  .contact-info-widget.has-sidebar .content .contact-info-main{
    width: 100%;
  }
  .contact-info-widget.has-sidebar .content .contact-info-sidebar .map-holder{
    position: initial;
    width: 100%;
    height: 40rem;
  }
}
.sidebar-widget .content{
  display: flex;
  --sidebar-gap: 6.4rem;
  gap: var(--sidebar-gap);
  flex-direction: row-reverse;
}
.sidebar-widget.aside-right .content{
  flex-direction: row;
}
.sidebar-widget .content .sidebar-layout{
  width: 100%;
  max-width: 40rem;
}
.sidebar-widget .content .editable_content{
  width: 100%;
  max-width: calc(100% - 40rem - var(--sidebar-gap));
}
.aside-group{
  margin: 1.6rem 0 0;
}
.aside-group > h4{
  margin: 0 0 .8rem;
}
.aside-group > ul{
  border-top: 1px solid var(--color-border);
  list-style: none;
  margin: 0;
  padding: 0;
}
.aside-group > ul > li{
  margin: 0;
  padding: .8rem;
  border-bottom: 1px solid var(--color-border);
}
.aside-group > ul > li a{
  text-decoration: none;
}
.page-detail-layout {
  align-items: flex-start;
}
.page-detail-layout.layout-image-right {
  flex-direction: row-reverse;
}
.page-detail-gallery__main img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.page-detail-gallery__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex-wrap: nowrap;
  margin-top: 12px;
  padding-bottom: 4px;
}
.page-detail-gallery__thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  padding: 0;
  margin: 0;
  background: none;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease, border-color 0.15s ease;
  overflow: hidden;
}
.page-detail-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-detail-gallery__thumb:hover,
.page-detail-gallery__thumb.is-active {
  opacity: 1;
  border-color: currentColor;
}
.page-detail-image {
  margin: 0;
}
.page-detail-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.page-detail-image figcaption {
  margin-top: 8px;
  font-size: 0.9em;
  opacity: 0.7;
}
@media screen and (max-width: 1024px) {
  .page-detail-layout.layout-image-right {
    flex-direction: column;
  }
}
/* ---=== Widget Card Pagination ===--- */
/* The category filter owns inline display; the pager owns this class, so the two
   compose. !important is what makes that work — the filter's .show() clears inline
   display and would otherwise reveal a card the pager has paged out. */
.is-paged-out {
  display: none !important;
}
.widget-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--flex-gap);
  margin-top: var(--flex-gap);
  width: 100%;
}
.widget-pagination .page-status {
  font-size: var(--font-size-body);
  color: var(--font-color-body);
  font-variant-numeric: tabular-nums;
}
.widget-pagination button {
  background: none;
  border: none;
  cursor: pointer;
  padding: .8rem 1.2rem;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  color: var(--link-color);
  transition: var(--animate-fast);
}
.widget-pagination button:hover:not(:disabled) {
  color: var(--link-color-hover);
}
.widget-pagination button:disabled {
  opacity: .35;
  cursor: default;
}
.dark .widget-pagination .page-status { color: var(--font-color-body-dark); }
.dark .widget-pagination button { color: var(--link-color-dark); }
.main .widget-pagination .page-status { color: var(--font-color-body-main); }
.main .widget-pagination button { color: var(--link-color-main); }

/* ==========================================================================
   Payments — the card field, amount and result states.

   Every value here resolves to an EXISTING theme variable. A card field is a
   form input, so it inherits the Forms group (--input-*) rather than defining
   a parallel set of tokens an admin would have to keep in sync by hand; the
   status colours come from the palette roles. Nothing is hardcoded, so a theme
   template restyles the pay form along with everything else.
   ========================================================================== */
/* ----- CUSTOM FIELD LABEL -----
   A custom field with "Show Label" on emits <span class="cf-label">Label: </span>
   before its value, but no stylesheet defined the class — so the label rendered
   identically to the value and "Date: Sept. 02, 2026" read as one undifferentiated
   string, i.e. the admin switch appeared to do nothing.
   Deliberately minimal: enough to separate label from value, using existing tokens
   so it follows the theme. (.cf-map-frame and .cf-summary-* are also unstyled, but
   correctly so — the iframe carries width/height attributes, and cf-summary-* is a
   per-key hook whose label is already a <strong>.) */
.cf-label {
  font-weight: 600;
  color: var(--color-heading);
}

.gw-card {
  width: 100%;
  margin: 0 0 var(--form-gap, 1.6rem);
}
.gw-card__label {
  /* The site's bare `label` rule is position:absolute — the floating-label pattern,
     which works because form inputs sit inside `fieldset{position:relative}`. These
     labels do not, so without an explicit static they escape to the nearest positioned
     ancestor: inside the payment modal that is the dialog itself, and the label lands on
     top of the modal title. */
  position: static;
  display: block;
  margin: 0 0 .6rem;
  color: var(--font-color-body);
  font-family: var(--font-body);
  font-size: 1.4rem;
  opacity: .64;
}
/* Stripe and Authorize.Net mount into this box, so it must look like an input
   the payer already recognises from the fields above it. Moneris renders its own
   iframe with its own chrome, hence the border reset below. */
.gw-card__field {
  background: var(--input-bg);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-radius);
  padding: 1.2rem;
  min-height: 4.8rem;
}
.gw-card__field iframe,
iframe.gw-card__field {
  background: none;
  border: 0;
  padding: 0;
}
.gw-card__row { margin: 0 0 .8rem; }
.gw-card__row:last-child { margin-bottom: 0; }
.gw-card__row label {
  position: static;   /* same reason as .gw-card__label above */
  display: block;
  margin: 0 0 .4rem;
  font-size: 1.4rem;
  opacity: .64;
}
.gw-card__row input {
  width: 100%;
  background: var(--input-bg);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-radius);
  padding: .8rem;
}
.gw-card__row--split { display: flex; gap: .8rem; }
.gw-card__row--split > span { flex: 1 1 0; }

.gw-card__errors {
  margin: .8rem 0 0;
  color: var(--color-danger);
  font-size: 1.4rem;
}
/* Empty by default — reserving space would leave a gap under every card field. */
.gw-card__errors:empty { display: none; }

.gw-amount {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.6rem;
  margin: 0 0 var(--form-gap, 1.6rem);
  padding: 1.2rem 0;
  border-top: 1px solid var(--color-border);
}
.gw-amount__label {
  color: var(--color-body);
  font-family: var(--font-body);
}
.gw-amount__value {
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.gw-noscript {
  margin: 0 0 var(--form-gap, 1.6rem);
  padding: 1.2rem;
  border-radius: var(--input-radius);
  background: var(--color-bg-light);
  color: var(--color-body);
}

.gw-success { text-align: center; }
.gw-success h3 { color: var(--color-success); }

/* Payment modal — a <details> element, so open/close needs no JavaScript and the
   modal itself can never be what breaks. (The form inside still needs JS; every
   gateway's card widget does, and it says so in its own <noscript>.)
   The trigger carries the site's own .button class rather than a bespoke style, so a
   Pay button looks like every other CTA and follows the theme. */
/* The trigger is a .button, but its label is not author-controlled the way "Learn More"
   is: a payment_button's label is "Pay {amount}" by default and arbitrary via
   button_label, with the amount substituted at RENDER time — so nobody can know the
   final width. "Make Your Donation - $104.50 CAD" overflowed its card and could not
   wrap, because .button fixes `height`. Here height becomes a MINIMUM, the vertical
   padding is balanced (the shared --button-padding is deliberately top-heavy, and only
   reads as centred because .button is inline-flex), and the label is allowed to wrap
   within the card. Scoped to the trigger rather than applied to .button generally,
   which would be a much wider visual change to every site. */
.gw-modal { display: inline-block; max-width: 100%; margin: var(--button-margin); }
.gw-modal > summary.gw-modal__trigger {
  height: auto;
  min-height: var(--button-height);
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  margin: 0;               /* the margin lives on .gw-modal, or it double-applies */
  max-width: 100%;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}
.gw-modal > summary { list-style: none; cursor: pointer; }
.gw-modal > summary::-webkit-details-marker,
.gw-modal > summary::marker { display: none; content: ''; }

.gw-modal__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: hsla(0 0% 0% / .48);
}
.gw-modal[open] .gw-modal__backdrop { display: block; }

.gw-modal__dialog {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: min(52rem, 92vw);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--color-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  text-align: left;
}
.gw-modal[open] .gw-modal__dialog { display: block; }

.gw-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.6rem 2.4rem;
  border-bottom: 1px solid var(--color-border);
}
.gw-modal__title {
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 600;
}
.gw-modal__close {
  background: none;
  border: 0;
  padding: 0 .4rem;
  color: var(--font-color-body);
  font-size: 2.8rem;
  line-height: 1;
  cursor: pointer;
}
.gw-modal__body { padding: 2.4rem; }

/* Native date/time pickers on a dark-themed band. Same shadow-DOM problem as the
   admin: the glyph is drawn from the page's colour-scheme, so on a dark ground it
   renders black on black. `.dark` / `.colour` are the existing per-section context
   classes, so this follows the band the input actually sits in. */
.dark input[type="date"],
.dark input[type="time"],
.dark input[type="datetime-local"],
.colour input[type="date"],
.colour input[type="time"],
.colour input[type="datetime-local"] {
  color-scheme: dark;
}
.banner-container-constrained{
  overflow: hidden;
}
.banner-container-constrained .hero-grid{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: clamp(80px, 9vw, 140px) clamp(80px, 9vw, 140px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
}
.banner-container-constrained .hero-sweep{
  position: absolute;
  right: -4%;
  top: 12%;
  width: min(46vw, 620px);
  z-index: 2;
  pointer-events: none;
  opacity: .16;
}
.banner-container-constrained .hero-sweep svg{
  width: 100%;
  height: auto;
}
.banner-container-constrained .hero-sweep svg .ch{
  animation: chdrift 5.5s var(--ease) infinite;
}
.banner-container-constrained .hero-sweep svg .ch:nth-child(2) {
  animation-delay: .35s;
}
.banner-container-constrained .hero-sweep svg .ch:nth-child(3) {
  animation-delay: .7s;
}
.banner-container-constrained.dark ul.ms-banner-constrained li:after{
  background: linear-gradient(180deg, rgba(10, 22, 40, .86) 0%, rgba(10, 22, 40, .5) 34%, rgba(10, 22, 40, .9) 100%), linear-gradient(90deg, rgba(16, 34, 70, .92) 0%, rgba(16, 34, 70, .34) 62%, rgba(16, 34, 70, .1) 100%);
  opacity: 1;
}
.banner-container-constrained.dark ul.ms-banner-constrained li .banner-content{
  padding-top: 7.6rem;
  max-width: 100%;
}
.banner-container-constrained.dark ul.ms-banner-constrained li .h6{
  color: rgba(255, 255, 255, .7);
  margin: 0 0 2.8rem;
}
.banner-container-constrained.dark ul.ms-banner-constrained li h1.h0{
  max-width: 22ch;
}
.banner-container-constrained.dark ul.ms-banner-constrained li p{
  color: rgba(255, 255, 255, .8);
  font-size: clamp(1.63rem, 1.45vw, 2.05rem);
  max-width: 56ch;
  margin-top: 26px;
}
@keyframes kenburns{
  from{
    transform:scale(1.02)
  }
  to{
    transform:scale(1.14)
  }
}
@keyframes chdrift{
  0%{
    opacity:0;
    transform:translateX(-26px)
  }
  35%{
    opacity:1
  }
  100%{
    opacity:0;
    transform:translateX(30px)
  }
}
@keyframes marquee{
  from{
    transform:translateX(0)
  }
  to{
    transform:translateX(-50%)
  }
}
p.lead{
  font-size: clamp(1.7rem, 1.5vw, 2.11rem);
  line-height: 1.6;
  font-weight: 400;
}
.grid-gap-lg .editable_content .grid{
  gap: 4.8rem;
}
.grid-align-end .editable_content .grid > *{
  align-content: end;
}
.grid-align-end .editable_content .grid > * > *:last-child{
  margin-bottom: 0;
}
section.content_container.stats-strip{
  padding-top: 0;
}
section.content_container.stats-strip .editable_content{
  margin: 0 0 4.8rem;
}
section.content_container.stats-strip .flex{
  --flex-gap: 0px;
  border: 1px solid var(--color-line);
}
section.content_container.stats-strip .flex .card{
  width: auto;
  flex-grow: 1;
  border-left: 1px solid var(--color-line);
  padding: 4rem 2.4rem;
  position: relative;
}
section.content_container.stats-strip .flex .card::before{
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 4.8rem;
  height: .2rem;
  background: var(--color-signal);
}
section.content_container.stats-strip .flex .card:first-child{
  border-left: none;
}
section.content_container.stats-strip .flex .card .content-wrapper{
  padding: 0;
}
section.content_container.stats-strip .flex .card .content-wrapper h3{
  color: var(--color-main);
  font-weight: 800;
  font-size: clamp(3.68rem, 3.7vw, 5.6rem);
  line-height: 1;
  margin: 0;
  display: flex;
  align-items: baseline;
  letter-spacing: -.045em;
}
section.content_container.stats-strip .flex .card .content-wrapper p{
  margin: 1.2rem 0 0;
  font-family: var(--font-accent);
  font-size: 1.2rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--color-steel);
  line-height: 1.5;
}
section.content_container.dark{
  position: relative;
  overflow: hidden;
}
section.content_container.dark::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--color-line-dark-soft) 1px, transparent 1px), linear-gradient(90deg, var(--color-line-dark-soft) 1px, transparent 1px);
  background-size: clamp(70px, 8vw, 120px) clamp(70px, 8vw, 120px);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 20%, #000 40%, transparent 100%);
  mask-image: radial-gradient(120% 80% at 50% 20%, #000 40%, transparent 100%);
}
section.content_container.dark::before{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M46 34 L72 60 L46 86 L52 92 L84 60 L52 28 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  -webkit-mask-image: radial-gradient(90% 70% at 88% 12%, #000 0%, transparent 72%);
  mask-image: radial-gradient(90% 70% at 88% 12%, #000 0%, transparent 72%);
}
.pillars-cta .flex{
  margin-top: 4rem;
}
.pillars-cta .flex .card{
  border-radius: 0 1.6rem 0 0;
  corner-shape: bevel;
  overflow: hidden;
  position: relative;
}
.pillars-cta .flex .card .img-wrapper{
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.pillars-cta .flex .card .img-wrapper::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
    background: linear-gradient(180deg, rgba(10, 22, 40, .32) 0%, rgba(20, 31, 48, .7) 38%, rgba(20, 31, 48, .94) 66%, rgb(20 31 48) 100%);
  transition: var(--animate-fast);
  width: 100%;
  height: 40%;
  top: auto;
  bottom: 0;
}
.pillars-cta .flex .card:hover .img-wrapper::after{
    background: linear-gradient(180deg, rgba(10, 22, 40, .32) 0%, rgba(20, 31, 48, .7) 38%, rgba(20, 31, 48, .94) 66%, rgb(20 31 48) 100%);
}
.pillars-cta .flex .card .img-wrapper img{
  transition: var(--animate-medium);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pillars-cta .flex .card:hover .img-wrapper img{
  transform: scale(105%);
}
.pillars-cta .flex .card .content-wrapper{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 0 2.4rem 2.4rem;
  z-index: 2;
  justify-content: flex-end;
  background: rgb(20, 31, 48);
  position: relative;
}
.pillars-cta .flex .card .content-wrapper p{
  font-size: 1.4rem;
  color: rgba(255, 255, 255, .74);
}
.pillars-cta .flex .card .content-wrapper .button{
  height: auto;
  background: none;
  border: none;
  color: white;
  border-bottom: 1px solid var(--color-line-dark-soft);
  padding-inline: .8rem;
  position: relative;
}
.pillars-cta .flex .card .content-wrapper .button:hover{
  background: none;
  color: white;
}
.pillars-cta .flex .card .content-wrapper .button::before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--color-signal);
  height: 1px;
  width: 0;
  transition: var(--animate-medium);
}
.pillars-cta .flex .card .content-wrapper .button:hover::before{
  width: 100%;
}
.pillars-cta .flex .card .content-wrapper .button::after{
  --fa: var(--button-icon);
  --fa-style: 400;
  --_fa-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Pro"));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: var(--fa-display, inline-block);
  font-family: var(--_fa-family);
  font-feature-settings: normal;
  font-style: normal;
  font-synthesis: none;
  font-variant: normal;
  font-weight: var(--fa-style, 900);
  text-align: center;
  text-rendering: auto;
  content: var(--fa) / "";
  color: var(--button-color);
  font-size: 1rem;
  margin-left: .8rem;
  line-height: 1;
  transition: var(--animate-medium);
}
.linked-cta .editable_content,
.industries-cta .editable_content{
  margin: 0 0 4.8rem;
}
.industries-cta .flex{
  --flex-gap: 0px;
  border: 1px solid var(--color-line-dark);
}
.industries-cta .flex .card{
  border-left: 1px solid var(--color-line-dark);
  padding: 3.2rem;
  position: relative;
}
.industries-cta .flex .card::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-signal);
  transition: var(--animate-medium);
}
.industries-cta .flex .card:hover::after{
  width: 100%;
}
.industries-cta .flex .card:first-child{
  border-left: none;
}
.industries-cta .flex .card .content-wrapper{
  padding: 0;
}
.industries-cta .flex .card .content-wrapper::before{
  content: '01';
  margin: 0 0 1.6rem;
  font-family: var(--font-accent);
  line-height: var(--font-lh-accent);
  color: var(--color-signal);
  font-weight: var(--font-weight-accent);
  text-transform: var(--font-transform-accent);
  letter-spacing: var(--font-ls-accent);
  font-size: var(--font-size-h6);
  display: block;
}
.industries-cta .flex .card:nth-child(2) .content-wrapper::before{
  content: '02';
}
.industries-cta .flex .card:nth-child(3) .content-wrapper::before{
  content: '03';
}
.industries-cta .flex .card:nth-child(4) .content-wrapper::before{
  content: '04';
}
.industries-cta .flex .card .content-wrapper p{
  color: rgba(255, 255, 255, .66);
  font-size: 1.4rem;
  margin: 0;
}
.industries-cta .flex .card .btn-wrapper{
  display: none;
}
.inner_header{
  padding: 18.4rem var(--section-inline) 8rem;
  position: relative;
  overflow: hidden;
  height: auto;
}
.inner_header::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10, 22, 40, .88) 0, rgba(16, 34, 70, .66) 55%, rgba(10, 22, 40, .92) 100%);
}
.inner_header .content{
  position: relative;
  z-index: 2;
}
section.content_container.locations-cta{
  background: var(--color-canvas);
}
section.content_container.news-cta .editable_content,
section.content_container.locations-cta .editable_content{
  margin-bottom: 4.8rem;
  max-width: 82rem;
}
section.content_container.locations-cta .flex{
  --flex-gap: 0px;
  border-left: 1px solid var(--color-line-soft);
  border-bottom: 1px solid var(--color-line-soft);
}
section.content_container.locations-cta .flex .card{
  background: var(--color-paper);
  border-right: 1px solid var(--color-line-soft);
  border-top: 1px solid var(--color-line-soft);
  position: relative;
  padding: 1.6rem 2.4rem;
  transition: var(--animate-medium);
}
section.content_container.locations-cta .flex .card.active,
section.content_container.locations-cta .flex .card:hover{
  background: var(--color-canvas);
}
section.content_container.locations-cta .flex .card::before{
  content: '';
  width: .2rem;
  height: 100%;
  opacity: 0;
  left: 0;
  top: 0;
  position: absolute;
  background: var(--color-signal);
  transition: var(--animate-medium);
}
section.content_container.locations-cta .flex .card:hover::before,
section.content_container.locations-cta .flex .card.active::before{
  opacity: 1;
}
section.content_container.locations-cta .flex .card .content-wrapper{
  padding: 0;
}
section.content_container.locations-cta .flex .card h3{
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -.018em;
}
section.content_container.locations-cta .flex .card p{
  margin: 0;
  font-size: 1.4rem;
  color: var(--color-steel);
  line-height: 1.5;
}
section.content_container.news-cta .flex .card .content-wrapper h3{
  margin-bottom: 2.4rem;
}
section.content_container.news-cta .flex .card .button{
  margin-top: 2.4rem;
}
section.content_container.news-intro{
  padding-bottom: 0;
}
section.content_container.news-list{
  padding-top: 4.8rem;
}
/* Intro -> card grid gap. /news has no intro so this never applied there, but the
   Resources "News & Insights" featured widget does: without it the paragraph sat
   directly on the card images. Same 4.8rem/82rem as add-ind, news-cta et al.
   (Add `news-list` to that widget's CSS Class to give it the /news card look.) */
section.content_container.news-list .editable_content{
  margin-bottom: 4.8rem;
  max-width: 82rem;
}
section.content_container.news-list .flex .card{
  border-radius: 0;
  border: 1px solid var(--color-line);
  box-shadow: none;
  background: white;
}
section.content_container.news-list .flex .card .content-wrapper{
  padding: 2.4rem;
}
section.content_container.news-list .flex .card .content-wrapper h3{
  font-size: 2rem;
  line-height: 1.4;
}
section.content_container.news-list .flex .card .content-wrapper p{
  color: var(--color-steel);
  margin: 0 0 1.6rem;
}
section.content_container.news-list .flex .card .content-wrapper .button{
  height: auto;
  background: none;
  border: none;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
  padding-inline: .8rem;
  position: relative;
}
section.content_container.news-list .flex .card .content-wrapper .button:hover{
  background: none;
  color: var(--color-ink);
}
section.content_container.news-list .flex .card .content-wrapper .button::before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--color-signal);
  height: 1px;
  width: 0;
  transition: var(--animate-medium);
}
section.content_container.news-list .flex .card .content-wrapper .button:hover::before{
  width: 100%;
}
section.content_container.news-list .flex .card .content-wrapper .button::after{
  --fa: var(--button-icon);
  --fa-style: 400;
  --_fa-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Pro"));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: var(--fa-display, inline-block);
  font-family: var(--_fa-family);
  font-feature-settings: normal;
  font-style: normal;
  font-synthesis: none;
  font-variant: normal;
  font-weight: var(--fa-style, 900);
  text-align: center;
  text-rendering: auto;
  content: var(--fa) / "";
  color: var(--color-ink);
  font-size: 1rem;
  margin-left: .8rem;
  line-height: 1;
  transition: var(--animate-medium);
}
section.content_container.strip-list-wrapper{
  padding: 0;
  border-bottom: 1px solid var(--color-line);
}
section.content_container.strip-list-wrapper .strip-list{
  padding: var(--section-block-md) var(--section-inline);
  background: var(--color-bg-light);
  border-top: 1px solid var(--color-line);
}
section.content_container.strip-list-wrapper .strip-list:nth-child(2n){
  background: var(--color-bg);
}
section.content_container.strip-list-wrapper .strip-list .content{
  position: relative;
  gap: 8rem;
  display: flex;
  align-items: flex-start;
  max-width: var(--content-width-default);
}
section.content_container.strip-list-wrapper .strip-list .content .img-wrapper{
  width: calc(40% - 4rem);
}
section.content_container.strip-list-wrapper .strip-list .content > .editable_content{
  width: calc(60% - 4rem);
}
section.content_container.strip-list-wrapper .strip-list .content .editable_content .editable_content{
  width: 100%;
}
section.content_container.strip-list-wrapper .strip-list .content .editable_content .editable_content ul{
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 0 0 1.6rem;
}
section.content_container.strip-list-wrapper .strip-list .content .editable_content .editable_content ul li{
  margin: 0;
  width: calc(50% - .4rem);
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
section.content_container.strip-list-wrapper .strip-list .content .editable_content .editable_content ul li::before{
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: .55em;
  background: var(--color-signal);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
section.content_container.strip-list-wrapper .strip-list .content .editable_content .editable_content h3{
  color: var(--color-main);
}
section.content_container.add-ind .editable_content{
  max-width: 82rem;
  margin: 0 0 4.8rem;
}
section.content_container.add-ind .flex{
  --flex-gap: 0px;
  border-left: 1px solid var(--color-line-soft);
  border-top: 1px solid var(--color-line-soft);
}
section.content_container.add-ind .flex .card{
  background: var(--color-paper);
  border-right: 1px solid var(--color-line-soft);
  border-bottom: 1px solid var(--color-line-soft);
  position: relative;
  padding: 1.6rem 2.4rem;
  transition: var(--animate-medium);
}
section.content_container.add-ind .flex .card.active,
section.content_container.add-ind .flex .card:hover{
  background: var(--color-canvas);
}
section.content_container.add-ind .flex .card::before{
  content: '';
  width: .2rem;
  height: 100%;
  opacity: 0;
  left: 0;
  top: 0;
  position: absolute;
  background: var(--color-signal);
  transition: var(--animate-medium);
}
section.content_container.add-ind .flex .card:hover::before,
section.content_container.add-ind .flex .card.active::before{
  opacity: 1;
}
section.content_container.add-ind .flex .card .content-wrapper{
  padding: 0;
}
section.content_container.add-ind .flex .card h3{
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -.018em;
}
section.content_container.add-ind .flex .card p{
  margin: 0;
  font-size: 1.4rem;
  color: var(--color-steel);
  line-height: 1.5;
}
section.content_container.strip-list-wrapper .strip-list .content{
  flex-direction: row;
}
section.content_container.strip-list-wrapper .strip-list:nth-child(2n) .content{
  flex-direction: row-reverse;
}
section.content_container.contact-info-strip .contact-list{
  padding: 4.8rem;
  background: var(--color-ink);
  corner-shape: bevel;
  border-radius: 0 3.2rem 0 0;
  margin: 4rem 0;
}
section.content_container.contact-info-strip .contact-list li{
  border-top: 1px solid var(--color-line-dark);
  padding-block: 2.4rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -.024em;
  color: white;
}
section.content_container.contact-info-strip .contact-list li:last-child{
  border-bottom: 1px solid var(--color-line-dark);
}
section.content_container.contact-info-strip .contact-list li strong{
  font-family: var(--font-accent);
  line-height: var(--font-lh-accent);
  margin: var(--font-margin-accent);
  color: rgba(255, 255, 255, .5);
  font-weight: var(--font-weight-accent);
  text-transform: var(--font-transform-accent);
  letter-spacing: var(--font-ls-accent);
  font-size: var(--font-size-h6);
}
section.content_container.contact-info-strip .contact-list li a{
  color: white;
}
section.content_container.contact-info-strip .contact-list li a:hover{
  color: var(--color-signal);
}
section.content_container.contact-info-strip .social_media ul li a{
  background: transparent;
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  border-radius: 0;
}
section.content_container.contact-info-strip .social_media ul li a:hover{
  background: var(--color-ink);
  color: white;
  border-color: var(--color-ink);
}
section.content_container.contact-info-strip .social_media ul li a i{
  font-size: 1.4rem;
}
.select-selected,
textarea, input, select{
  margin: 0;
  border: 1px solid var(--color-line);
  border-radius: .4rem;
}
section.content_container.contact-info-strip .form_holder{
  padding: 2.4rem;
  background: var(--color-canvas);
  border: 1px solid var(--color-line);
}
section.content_container.contact-info-strip .form_holder input.button{
  width: auto;
  margin-left: auto;
}
  section.content_container.error-page{
    min-height: calc(100svh - 270px);
    padding-top: 20rem;
    border-bottom: 1px solid var(--color-line-dark-soft);
  }
@media screen and (max-width: 1100px){
  .jqueryslidemenu ul{
    gap: .8rem;
  }
  .jqueryslidemenu ul li a{
    padding-inline: .8rem
  }
  .jqueryslidemenu .button{
    padding-inline: 1.2rem;
  }
}
@media screen and (max-width: 1024px){
  .banner-container-constrained .hero-sweep{
    display: none;
  }
  .banner-container-constrained.dark ul.ms-banner-constrained li .banner-content{
    padding-top: 0;
  }
  .grid-gap-lg .editable_content .grid {
    gap: 1.6rem;
  }
  .grid-align-end .editable_content .grid > * {
    align-content: unset;
  }
  section.content_container.stats-strip .flex .card{
    width: 50%;
  }
  section.content_container.stats-strip .flex .card:nth-child(3){
    border-left: none;
    border-top: 1px solid var(--color-line);
  }
  section.content_container.stats-strip .flex .card:nth-child(4){
    border-top: 1px solid var(--color-line);
  }
  .industries-cta .flex .card:nth-child(3){
    border-left: none;
  }
  .industries-cta .flex .card:nth-child(3),
  .industries-cta .flex .card:nth-child(4){
    border-top: 1px solid var(--color-line-dark);
  }
  .inner_header{
    padding: 9.6rem var(--section-inline) 3.2rem;
  }
  section.content_container.strip-list-wrapper .strip-list .content .editable_content .editable_content ul li{
    width: 100%;
  }
  section.content_container.strip-list-wrapper .strip-list .content,
  section.content_container.strip-list-wrapper .strip-list:nth-child(2n) .content{
    flex-direction: column;
    gap: 3.2rem;
  }
  section.content_container.strip-list-wrapper .strip-list .content .img-wrapper{
    width: 100%;
    max-width: 48rem;
  }
  section.content_container.strip-list-wrapper .strip-list .content > .editable_content{
    width: 100%;
  }
  section.content_container.contact-info-strip .contact-list{
    padding: 2.4rem;
  }
}
@media screen and (max-width: 768px){
  .pillars-cta .flex .card .content-wrapper .btn-wrapper{
    align-items: flex-start;
  }
}
@media screen and (max-width: 640px){
  section.content_container.stats-strip .flex .card{
    width: 100%;
    border-left: none;
  }
  section.content_container.stats-strip .flex .card:nth-child(2){
    border-top: 1px solid var(--color-line);
  }
}
@media screen and (max-width: 580px){
  .industries-cta .flex .card{
    width: 100%;
    border-left: none;
  }
  .industries-cta .flex .card:nth-child(2){
    border-top: 1px solid var(--color-line-dark);
  }
}
/* ==========================================================================
   Hover image cards
   A photo that fades in behind a card on hover. Opt in by adding
   `hover-image-cards` to the widget's CSS Class, and give the widget an IMAGE
   custom field with key `industry_image` and Scope = "Card (direct child)" —
   that scope renders it as a direct child of .card, outside .content-wrapper's
   padding, which is what lets the photo go edge to edge.

   Selectors are scoped `section.content_container.hover-image-cards …` on
   purpose. The text rules must outrank
   `section.content_container.add-ind .flex .card p` (0,4,2); a plain
   `.hover-image-cards .card:hover p` is only (0,3,1) and silently loses, which
   left the body copy dark and unreadable over the photo.

   Does NOT touch .card::after or .content-wrapper::before — the existing card
   styling already owns both (the amber hover underline and the 01/02/03 marker).
   ========================================================================== */
section.content_container.hover-image-cards .card{
  position: relative;
  overflow: hidden;
}
section.content_container.hover-image-cards .card .cf-industry_image{
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  /* NOT var(--animate-medium): that is the full shorthand `all 0.5s ease-in-out`,
     so `transition: opacity var(--animate-medium)` becomes
     `transition: opacity all 0.5s ease-in-out` — invalid, dropped, and the image
     snapped in with no fade at all. */
  transition: opacity .55s ease-in-out;
  pointer-events: none;
}
section.content_container.hover-image-cards .card:hover .cf-industry_image,
section.content_container.hover-image-cards .card:focus-within .cf-industry_image{
  opacity: 1;
}
section.content_container.hover-image-cards .card .cf-industry_image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Settles from a slight zoom as it fades — slower than the fade so the motion
     continues a beat after the image has arrived. */
  transform: scale(1.08);
  transition: transform 1.1s ease-out;
}
section.content_container.hover-image-cards .card:hover .cf-industry_image img{
  transform: scale(1);
}
/* Scrim. A gradient rather than a flat tint: heaviest at the bottom, where the
   small body copy sits, lightest at the top where the heading is large and bold —
   so the photo stays visible without the text fighting it. Literal rgba of the
   brand ink (--color-bg-dark) because gradient stops need concrete colours. */
section.content_container.hover-image-cards .card .cf-industry_image::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
              rgba(10, 22, 40, .62) 0%,
              rgba(10, 22, 40, .80) 45%,
              rgba(10, 22, 40, .92) 100%);
}
/* Lift the real content above the photo. */
section.content_container.hover-image-cards .card > *:not(.cf-industry_image){
  position: relative;
  z-index: 1;
}
/* Invert the text once a dark ground is behind it, fading in step with the photo. */
section.content_container.hover-image-cards .card .content-wrapper h1,
section.content_container.hover-image-cards .card .content-wrapper h2,
section.content_container.hover-image-cards .card .content-wrapper h3,
section.content_container.hover-image-cards .card .content-wrapper h4,
section.content_container.hover-image-cards .card .content-wrapper p,
section.content_container.hover-image-cards .card .content-wrapper li{
  transition: color .55s ease-in-out;
}
section.content_container.hover-image-cards .card:hover .content-wrapper h1,
section.content_container.hover-image-cards .card:hover .content-wrapper h2,
section.content_container.hover-image-cards .card:hover .content-wrapper h3,
section.content_container.hover-image-cards .card:hover .content-wrapper h4,
section.content_container.hover-image-cards .card:focus-within .content-wrapper h1,
section.content_container.hover-image-cards .card:focus-within .content-wrapper h2,
section.content_container.hover-image-cards .card:focus-within .content-wrapper h3,
section.content_container.hover-image-cards .card:focus-within .content-wrapper h4{
  color: var(--font-color-heading-dark, #fff);
}
section.content_container.hover-image-cards .card:hover .content-wrapper p,
section.content_container.hover-image-cards .card:hover .content-wrapper li,
section.content_container.hover-image-cards .card:focus-within .content-wrapper p,
section.content_container.hover-image-cards .card:focus-within .content-wrapper li{
  color: var(--font-color-body-dark, rgba(255, 255, 255, .92));
}
/* A card with no image uploaded yet must not dim or invert — with nothing to
   reveal, the scrim would just be a dark rectangle over the text. */
section.content_container.hover-image-cards .card:not(:has(.cf-industry_image)):hover .content-wrapper h1,
section.content_container.hover-image-cards .card:not(:has(.cf-industry_image)):hover .content-wrapper h2,
section.content_container.hover-image-cards .card:not(:has(.cf-industry_image)):hover .content-wrapper h3,
section.content_container.hover-image-cards .card:not(:has(.cf-industry_image)):hover .content-wrapper h4,
section.content_container.hover-image-cards .card:not(:has(.cf-industry_image)):hover .content-wrapper p,
section.content_container.hover-image-cards .card:not(:has(.cf-industry_image)):hover .content-wrapper li{
  color: inherit;
}
@media (prefers-reduced-motion: reduce){
  section.content_container.hover-image-cards .card .cf-industry_image,
  section.content_container.hover-image-cards .card .cf-industry_image img,
  section.content_container.hover-image-cards .card .content-wrapper h1,
  section.content_container.hover-image-cards .card .content-wrapper h2,
  section.content_container.hover-image-cards .card .content-wrapper h3,
  section.content_container.hover-image-cards .card .content-wrapper h4,
  section.content_container.hover-image-cards .card .content-wrapper p,
  section.content_container.hover-image-cards .card .content-wrapper li{
    transition: none;
  }
  section.content_container.hover-image-cards .card .cf-industry_image img{ transform: none; }
}
.gallery-strip .editable_content{
  max-width: 72rem;
}
.gallery-strip .widget-slider{
  margin-top: 4rem;
}
.gallery-strip .widget-slider .swiper-slide {
  padding: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-strip .widget-slider .swiper-slide > img{
  width: 100%;
  height: auto;
}
/* ---------- Team member bio page (editable_content.cf-bio) ----------
   The portrait is spliced into the RTE as its first child (image_in_content), so
   the bio is ONE grid: portrait down the left, every paragraph on the right. */
.editable_content.cf-bio{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 4.8rem;
  align-items: start;
}
.editable_content.cf-bio > *{
  grid-column: 5 / 13;
  max-width: 76rem;
}
/* Span every row the text creates — spanning only row 1 made that row as tall as
   the photo and left a large gap under the intro. Sticky keeps it beside the text. */
.editable_content.cf-bio div.img-wrapper{
  grid-column: 1 / 5;
  grid-row: 1 / span 60;
  position: sticky;
  top: 12rem;
  max-width: none;
  margin: 0;
  aspect-ratio: 4 / 5;
  background: var(--color-canvas-2);
  border: 1px solid var(--color-line);
  border-radius: 0 1.6rem 0 0;
  corner-shape: bevel;
  overflow: hidden;
}
.editable_content.cf-bio div.img-wrapper::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 6.4rem;
  height: 3px;
  background: var(--color-signal);
}
.editable_content.cf-bio div.img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
  box-shadow: none;
}
.editable_content.cf-bio p{
  font-size: 1.6rem;
  line-height: 1.75;
  color: var(--color-body);
  margin: 0 0 1.6rem;
}
/* The opening paragraph becomes the lead. Bios arrive in mixed shapes: a bold <p>,
   an <h5>, or a <p> after a repeated <h2> name — cover all three. */
.editable_content.cf-bio > :is(.img-wrapper + p, .img-wrapper + h5, .img-wrapper + h2 + p){
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 1.6vw, 2.3rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--color-ink);
  margin: 0 0 1.6rem;
}
.editable_content.cf-bio > :is(.img-wrapper + p, .img-wrapper + h5, .img-wrapper + h2 + p) :is(b, strong){
  font-weight: 500;
}
.editable_content.cf-bio > .img-wrapper + h2{
  font-size: clamp(2.8rem, 2.4vw, 3.6rem);
  margin: 0 0 1.6rem;
}
.editable_content.cf-bio > hr{
  border: 0;
  height: 1px;
  background: var(--color-line);
  margin: 2rem 0 1.2rem;
}
/* Section labels ("Professional Background:", "Achievements:" …) arrive either as
   an <h6> or as a paragraph holding only a bold run — restyle both as the site's
   eyebrow label (gold rule + navy mono caps). Inline layout, not flex, so a colon
   typed outside the bold run stays attached to it. */
.editable_content.cf-bio > :is(h6, p:has(> :is(b, strong):only-child)):not(.img-wrapper + p, .img-wrapper + h2 + p){
  display: block;
  font-family: var(--font-accent);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-navy);
  margin: 3.6rem 0 1.4rem;
}
.editable_content.cf-bio > :is(h6, p:has(> :is(b, strong):only-child)):not(.img-wrapper + p, .img-wrapper + h2 + p)::before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 2.4rem;
  height: 1px;
  margin: -.2rem 1.2rem 0 0;
  background: var(--color-signal);
}
.editable_content.cf-bio > :is(h6, p:has(> :is(b, strong):only-child)):not(.img-wrapper + p, .img-wrapper + h2 + p) :is(b, strong){
  font-weight: inherit;
}
@media screen and (max-width: 1024px) {
.editable_content.cf-bio{
  display: block;
}
.editable_content.cf-bio div.img-wrapper{
  position: relative;
  top: auto;
  max-width: 36rem;
  margin: 0 0 3.2rem;
}
footer .content{
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  align-items: center;
  text-align: center;
}
footer a.logo{
  margin-inline: auto;
}
footer .social_media ul{
  justify-content: center;
}
footer .footer-funding{
  flex-direction: column;
  gap: 2.4rem;
  text-align: center;
}
}
section.content_container.gallery-strip{
  overflow: hidden;
}
/* ---------- Locations map (Google Maps, branded to match the design's SVG map) ---------- */
.locations-map .locations-map__canvas {
  background: var(--color-ink);
  border: 1px solid var(--color-line);
}
.locations-map__pin {
  line-height: 0;
  cursor: pointer;
}
.locations-map .gm-style .gm-style-iw-c {
  background: var(--color-ink);
  border-radius: 0;
  border-top: 3px solid var(--color-signal);
  box-shadow: 0 1.2rem 3.2rem rgba(10,22,40,.45);
  padding: 0 !important;
}
.locations-map .gm-style .gm-style-iw-d {
  overflow: auto !important;
  padding: 0 1.8rem 1.8rem;
}
.locations-map .gm-style .gm-style-iw-chr {
  height: 3.2rem;
}
.locations-map .gm-style .gm-style-iw-chr button span {
  background-color: rgba(255,255,255,.6) !important;
}
.locations-map .gm-style .gm-style-iw-tc::after {
  background: var(--color-ink);
}
.locations-map__info {
  font-family: var(--font-body);
  font-size: 1.4rem;
  line-height: 1.55;
  color: rgba(255,255,255,.7);
  max-width: 26rem;
}
.locations-map__info strong {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .2rem;
}
.locations-map__info a {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-accent);
  font-size: 1.1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-signal);
  text-decoration: none;
}
.locations-map__info a:focus:not(:focus-visible) {
  outline: none;
}
.locations-map__info a:focus-visible {
  outline: 1px solid var(--color-signal);
  outline-offset: 3px;
}
.locations-map__info a:hover {
  color: #fff;
}
.locations-map .gm-style .gm-control-active,
.locations-map .gm-style .gm-fullscreen-control {
  border-radius: 0 !important;
}
section.content_container.stats-strip.cap-stats{
  padding-top: var(--section-block-xl);
}
section.content_container.no-pad-bot{
  padding-bottom: 0;
}

/* ---------- Additional Industries slider (industries page, widget class `add-ind`) ----------
   The add-ind rules above were written for the grid (.flex) layout; the widget is now
   a slider, so these give each slide the site's card language instead. Scoped to
   .add-ind so the gallery-strip slider is untouched. */
section.content_container.add-ind .widget-slider{
  padding-bottom: 8rem;
  overflow: hidden;
}
section.content_container.add-ind .widget-slider .swiper-slide{
  position: relative;
}
section.content_container.add-ind .widget-slider .swiper-slide .card{
  align-items: stretch;
  gap: 0;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: 0 2.4rem 0 0;
  corner-shape: bevel;
  overflow: hidden;
  padding: 0;
}
section.content_container.add-ind .widget-slider .swiper-slide .card .img-wrapper{
  flex: 0 0 46%;
  max-width: 46%;
  height: auto;
  min-height: 36rem;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  background: var(--color-canvas-2);
}
section.content_container.add-ind .widget-slider .swiper-slide .card .img-wrapper::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 6.4rem;
  height: 3px;
  background: var(--color-signal);
}
section.content_container.add-ind .widget-slider .swiper-slide .card .img-wrapper img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1);
}
section.content_container.add-ind .widget-slider .swiper-slide-active .card .img-wrapper img{
  transform: scale(1.03);
}
section.content_container.add-ind .widget-slider .swiper-slide .card .content-wrapper{
  flex: 1 1 auto;
  width: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5.6rem clamp(3.2rem, 5vw, 7.2rem);
}
/* Slide counter — Swiper writes "3 / 9" into each slide's aria-label. */
section.content_container.add-ind .widget-slider .swiper-slide .card .content-wrapper::before{
  content: "";
  display: block;
  width: 3.2rem;
  height: 2px;
  margin-bottom: 2.4rem;
  background: var(--color-signal);
}
section.content_container.add-ind .widget-slider .swiper-slide::after{
  content: attr(aria-label);
  position: absolute;
  top: 2.4rem;
  right: 3.2rem;
  font-family: var(--font-accent);
  font-size: 1.1rem;
  letter-spacing: .14em;
  color: var(--color-steel);
  pointer-events: none;
}
section.content_container.add-ind .widget-slider .swiper-slide .card .content-wrapper h3{
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 2.2vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--color-ink);
  margin: 0 0 1.6rem;
  max-width: 24ch;
}
section.content_container.add-ind .widget-slider .swiper-slide .card .content-wrapper p{
  font-size: 1.6rem;
  line-height: 1.75;
  color: var(--color-body);
  margin: 0;
  max-width: 58ch;
}
/* Navigation: square navy buttons bottom-right (the round mid-height arrows also
   drew Swiper's font glyph over its SVG icon, which read as an "X"). */
section.content_container.add-ind .widget-slider .swiper-button-prev,
section.content_container.add-ind .widget-slider .swiper-button-next{
  top: auto;
  bottom: 0;
  left: auto;
  right: 0;
  width: 4.8rem;
  height: 4.8rem;
  margin: 0;
  border-radius: 0;
  background: var(--color-navy);
  color: #fff;
  transition: background .3s ease, color .3s ease;
}
section.content_container.add-ind .widget-slider .swiper-button-prev{
  right: 5.6rem;
}
section.content_container.add-ind .widget-slider .swiper-button-prev:hover,
section.content_container.add-ind .widget-slider .swiper-button-next:hover{
  background: var(--color-signal);
  color: var(--color-ink);
}
section.content_container.add-ind .widget-slider .swiper-button-prev::after,
section.content_container.add-ind .widget-slider .swiper-button-next::after{
  display: none;
}
section.content_container.add-ind .widget-slider .swiper-navigation-icon{
  width: .9rem;
  height: 1.6rem;
}
section.content_container.add-ind .widget-slider .swiper-button-prev .swiper-navigation-icon{
  transform: rotate(180deg);
}
/* Pagination: short bars, left-aligned, the current one gold and longer. */
section.content_container.add-ind .widget-slider .swiper-pagination{
  bottom: 2.2rem;
  left: 0;
  width: auto;
  justify-content: flex-start;
  gap: .6rem;
}
section.content_container.add-ind .widget-slider .swiper-pagination-bullet{
  width: 2.4rem;
  height: 3px;
  margin: 0 !important;
  border-radius: 0;
  background: var(--color-line);
  opacity: 1;
  transition: width .3s ease, background .3s ease;
}
section.content_container.add-ind .widget-slider .swiper-pagination-bullet:hover{
  background: var(--color-steel);
}
section.content_container.add-ind .widget-slider .swiper-pagination-bullet-active,
section.content_container.add-ind .widget-slider .swiper-pagination-bullet-active:hover{
  width: 4.8rem;
  background: var(--color-signal);
}
@media screen and (max-width: 1024px) {
  section.content_container.add-ind .widget-slider .swiper-slide .card{
    flex-direction: column;
  }
  section.content_container.add-ind .widget-slider .swiper-slide .card .img-wrapper{
    flex: 0 0 auto;
    max-width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  section.content_container.add-ind .widget-slider .swiper-slide .card .content-wrapper{
    justify-content: flex-start;
    padding: 3.2rem 2.4rem;
  }
  section.content_container.add-ind .widget-slider .swiper-slide::after{
    top: 1.6rem;
    right: 1.6rem;
    color: #fff;
    text-shadow: 0 1px 4px rgba(10,22,40,.6);
  }
  section.content_container.add-ind .widget-slider .swiper-pagination{
    max-width: calc(100% - 11.2rem);
    flex-wrap: wrap;
  }
  section.content_container.add-ind .widget-slider .swiper-pagination-bullet{
    width: 1.2rem;
  }
  section.content_container.add-ind .widget-slider .swiper-pagination-bullet-active,
  section.content_container.add-ind .widget-slider .swiper-pagination-bullet-active:hover{
    width: 2.8rem;
  }
}

/* ---------- About: Core Values (widget class `core-values`) ----------
   The design's .feat card: paper, hairline border, gold mono index, steel body.
   No value has a photo, so the placeholder image is hidden rather than shown six
   times. The index is a CSS counter, so reordering in the admin renumbers itself. */
section.content_container.core-values .editable_content{
  margin-bottom: 4.8rem;
}
section.content_container.core-values .flex{
  counter-reset: core-value;
}
section.content_container.core-values .flex .card{
  counter-increment: core-value;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: 0;
  box-shadow: none;
  padding: clamp(2.4rem, 2.6vw, 3.6rem);
  transition: border-color .4s ease, transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;
}
section.content_container.core-values .flex .card:hover{
  transform: translateY(-4px);
  border-color: var(--color-navy);
  box-shadow: 0 2.6rem 5rem -2.6rem rgba(10,22,40,.32);
}
section.content_container.core-values .flex .card .img-wrapper:has(img[src*="no-photo"]){
  display: none;
}
section.content_container.core-values .flex .card::before{
  content: counter(core-value, decimal-leading-zero);
  font-family: var(--font-accent);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--color-signal-600);
  margin-bottom: 2.4rem;
}
/* Icon tile (inline SVG in the img-wrapper) top-left, index top-right on the same
   line — the design's .feat__top row. A card without an icon keeps the index inline. */
section.content_container.core-values .flex .card:has(.img-wrapper svg)::before{
  position: absolute;
  top: clamp(2.4rem, 2.6vw, 3.6rem);
  right: clamp(2.4rem, 2.6vw, 3.6rem);
  margin: 0;
}
section.content_container.core-values .flex .card .img-wrapper:has(svg){
  display: grid;
  place-items: center;
  width: 5.6rem;
  height: 5.6rem;
  aspect-ratio: auto;
  margin: 0 0 2.8rem;
  padding: 0;
  border-radius: 0;
  overflow: visible;
  background: color-mix(in srgb, var(--color-navy) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-navy) 16%, transparent);
  color: var(--color-navy);
  transition: background .4s ease, border-color .4s ease, color .4s ease;
}
section.content_container.core-values .flex .card .img-wrapper svg{
  width: 2.8rem;
  height: 2.8rem;
  fill: currentColor;
}
section.content_container.core-values .flex .card:hover .img-wrapper:has(svg){
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
}
/* Gold rule along the top edge that draws in on hover, like the design's stats. */
section.content_container.core-values .flex .card::after{
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: 3.8rem;
  height: 2px;
  background: var(--color-signal);
  transition: width .6s cubic-bezier(.16,1,.3,1);
}
section.content_container.core-values .flex .card:hover::after{
  width: calc(100% + 2px);
}
section.content_container.core-values .flex .card .content-wrapper{
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
section.content_container.core-values .flex .card .content-wrapper h3{
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--color-ink);
  margin: 0;
}
section.content_container.core-values .flex .card .content-wrapper p{
  font-size: 1.52rem;
  line-height: 1.66;
  color: var(--color-steel);
  margin: 0;
}

/* ---------- About: Mission & Vision (widget class `mission-vision`) ----------
   Two framed statements on the dark band: gold mono index + rule, a sized-down
   heading and the statement itself as a lead paragraph. */
section.content_container.mission-vision .editable_content .grid{
  counter-reset: mv;
  gap: 0;
  border: 1px solid var(--color-line-dark);
}
section.content_container.mission-vision .editable_content .grid > [class*="col-"]{
  counter-increment: mv;
  position: relative;
  padding: clamp(3.2rem, 4vw, 5.6rem);
}
section.content_container.mission-vision .editable_content .grid > [class*="col-"] + [class*="col-"]{
  border-left: 1px solid var(--color-line-dark);
}
section.content_container.mission-vision .editable_content .grid > [class*="col-"]::before{
  content: counter(mv, decimal-leading-zero);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-family: var(--font-accent);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--color-signal);
  margin-bottom: 2.4rem;
}
section.content_container.mission-vision .editable_content .grid > [class*="col-"]::after{
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: 3.8rem;
  height: 2px;
  background: var(--color-signal);
}
section.content_container.mission-vision .editable_content .grid h2{
  font-size: clamp(3.2rem, 3.4vw, 4.8rem);
  letter-spacing: -.035em;
  line-height: 1.05;
  margin: 0 0 2rem;
}
section.content_container.mission-vision .editable_content .grid p{
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 1.5vw, 2.2rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: rgba(255,255,255,.78);
  margin: 0;
  max-width: 46ch;
}
section.content_container.mission-vision .editable_content{
  background: hsla(0 0% 100% / .04);
}
@media screen and (max-width: 1024px) {
  section.content_container.mission-vision .editable_content .grid > [class*="col-"] + [class*="col-"]{
    border-left: 0;
    border-top: 1px solid var(--color-line-dark);
  }
}