/* ===--- 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%;
}
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;
    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);
}
.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;
}
.main a {
  color: var(--link-color-main);
}
.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);
}
.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);
}
.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: -0.025em;
  text-wrap: balance;
}
.h0 b,
h1 b,
.h1 b,
h2 b,
.h2 b,
h3 b,
.h3 b,
h4 b,
.h4 b{
  color: var(--color-main);
}
.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);
}
.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);
}
.dark h5,
.dark .h5,
.dark h6,
.dark .h6 {
  color: var(--font-color-accent-dark);
}
.main h5,
.main .h5,
.main h6,
.main .h6 {
  color: var(--font-color-accent-main);
}
.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);
}
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.main{
    background: var(--color-main);
}
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);
}
.main .editable_content table{
    border-left: 2px solid var(--color-main);
}
.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);
}
.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: var(--color-bg);
  width: 100%;
  z-index: 999;
  top: 0;
  position: sticky;
  padding: 0 var(--section-inline);
  box-shadow: var(--shadow);
}
.jqueryslidemenu {
  width: 100%;
  max-width: var(--content-width-md);
  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;
}
.jqueryslidemenu a.logo img {
  width: 100%;
  height: auto;
}
.jqueryslidemenu nav {
  width: calc(100% - var(--logo-width) - 32px);
}
.jqueryslidemenu ul {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  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: var(--color-body);
  font-size: var(--header-nav-size);
  width: 100%;
  display: block;
  line-height: 1;
  text-decoration: none;
  position: relative;
}
.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-heading);
}
.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%;
}
/* ----- 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);
}
.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: var(--header-nav-size);
  line-height: 1;
  font-weight: var(--header-nav-weight);
  text-decoration: none;
  display: block;
  text-transform: none;
}
.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);
  margin-top: auto;
  padding: 3.2rem var(--section-inline) 1.6rem;
}
footer .content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.6rem 3.2rem;
}
footer a.logo {
  width: var(--footer-logo-width);
  display: block;
}
footer a.logo img {
  width: 100%;
  height: auto;
}
footer .h4 {
  color: var(--footer-heading-color);
  font-size: var(--footer-heading-size);
  font-weight: var(--footer-heading-weight);
  line-height: 1;
  margin: 0 0 .8rem;
}
footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
footer ul li,
footer ul li a {
  margin: 0;
  padding: 0;
  color: var(--footer-body-color);
  font-size: var(--footer-body-size);
}
footer ul li a {
  text-decoration: none;
}
footer ul li a:hover {
  color: var(--footer-body-color-hover);
}
footer .sitemap {
  width: 32rem;
}
footer .sitemap ul {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.6rem;
}
footer .sitemap ul li {
  width: calc(50% - (1.6rem * 2 / 3));
}
footer .footer-contact,
footer .footer-social {
  width: auto;
}
footer .social_media ul {
  gap: calc(1.6rem / 2);
  justify-content: flex-start;
}
footer .social_media ul li a {
  width: 2.8rem;
  height: 2.8rem;
}
footer .social_media ul li a {
  background: var(--footer-social-bg);
  color: var(--footer-social-color);
}
footer .social_media ul li a:hover {
  background: var(--footer-social-bg-hover);
  color:  var(--footer-social-color-hover);
}
footer .social_media ul li a i {
  font-size: 1.6rem;
}
footer p.signature {
  width: 100%;
  text-align: center;
  color: var(--footer-body-color);
  font-size: var(--footer-signature-size);
  line-height: 1.2;
  padding-top: 1.6rem;
  border-top: 2px solid hsla(0 0% 100% / .08);
  margin: 0;
}
footer p.signature a {
  color: var(--footer-body-color);
  text-decoration: none;
}
footer p.signature a:hover {
  color: var(--footer-body-color-hover);
}
/* Vertical Footer */
footer.vertical-footer .content{
  flex-direction: column;
  gap: 2.4rem;
  align-items: center;
}
footer.vertical-footer .sitemap,
footer.vertical-footer .footer-contact,
footer.vertical-footer .footer-social{
  width: 100%;
  padding-top: 2.4rem;
  border-top: 2px solid hsla(0 0% 100% / .08);
}
footer.vertical-footer .sitemap ul{
  justify-content: space-around;
}
footer.vertical-footer .sitemap ul li{
  width: auto;
}
footer.vertical-footer .footer-contact ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
footer.vertical-footer .footer-contact li{
  text-align: center;
  width: 33.3333%;
}
footer.vertical-footer .footer-contact strong{
  display: block;
}
footer.vertical-footer .h4{
  text-align: center;
  margin: 0 0 1.2rem;
}
footer.vertical-footer .social_media ul{
  justify-content: center;
}
@media screen and (max-width: 1024px) {
  footer{
    padding: 2.4rem 2.4rem 1.6rem;
  }
  footer .content {
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    text-align: center;
  }
  footer .footer-social,
  footer .footer-contact,
  footer .sitemap,
  footer .sitemap ul li {
    width: 100%;
  }
  footer .social_media ul {
    justify-content: center;
  }
  footer.vertical-footer .footer-contact li,
  footer.vertical-footer .sitemap ul li{
    width: 100%;
  }
  footer.vertical-footer .footer-contact ul,
  footer.vertical-footer .sitemap ul{
    gap: 1.2rem;
  }
}
/* ---=== 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);
}
.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);
}
.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: 3 / 4;
  }
  .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: 1px solid var(--color-border);
  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);
}
.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);
}
.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.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);
  }
  .col-1{
    grid-column: span 1;
  }
  .col-2 {
    grid-column: span 2;
  }
  .col-3,
  .col-4 {
    grid-column: span 4;
  }
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11 {
    grid-column: span 8;
  }
}
@media screen and (max-width: 768px){
  .grid{
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap);
  }
  .col-1{
    grid-column: span 1;
  }
  .col-2,
  .col-3 {
    grid-column: span 2;
  }

  .col-4 {
    grid-column: span 4;
  }
}
@media screen and (max-width: 520px){
  .col-1{
    grid-column: span 2;
  }
  .col-2,
  .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);
}
.main .card{
    background: var(--card--bg-main);
}
a.card{
    text-decoration: none;
}
.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);
}
.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);
}
.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: 42rem;
}
.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;
}
.img-float .img-wrapper{
  max-width: 40rem;
  width: 100%;
}
.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);
}
.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);
}
.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;
}
/* ---=== 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.
   ========================================================================== */
.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. */
.gw-modal { display: inline-block; }
.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;
}
.lead{
  font-size: clamp(1.7rem, 1.6rem + 0.35vw, 2rem);
}
.small{
  font-size: 1.5rem;
}
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  font-family: var(-font-body);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-main);
  margin-bottom: 1.6rem;
  color: var(--color-body);
}
.eyebrow::before{
  content: '';
  width: 28px;
  height: 2px;
  background: var(--color-main);
  flex: none;
}
.stat{
  font-size: clamp(4rem, 1.76rem + 6vw, 8.8rem);
}
.banner-container-constrained.banner-float .img-wrapper{
  border-radius: 999px;
  overflow: hidden;
}
.banner-container-constrained.banner-float .banner-content{
  width: 80%;
  max-width: 100%;
  padding-right: 0;
  align-items: flex-start;
}
.banner-container-constrained.banner-float .banner-content .impact-figure{
  margin-top: 2.4rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  width: 32rem;
  padding: 2.4rem;
  border-radius: 1.6rem;
  background: var(--color-main);
  color: var(--color-bg);
  text-align: center;
  position: absolute;
  bottom: 0;
  right: -5.6rem;
  box-shadow: var(--shadow);
}
header.full_header{
  padding-block: 1.6rem;
}
header .jqueryslidemenu{
  max-width: var(--content-width-default);
}
header .jqueryslidemenu ul{
  justify-content: flex-end;
  gap: 4.8rem;
}
header .jqueryslidemenu ul li.highlight{
  margin: 0;
}
section.top-header{
  padding-block: 1.6rem;
  position: relative;
  z-index: 9999;
  border-bottom: 1px solid var(--color-border);
}
section.top-header ul li a{
  text-decoration: none;
  color: var(--color-body);
}
section.top-header ul li a:hover{
  color: var(--color-main);
}
.btn-wrapper{
  display: flex;
  margin: 2.4rem 0 0;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.btn-wrapper .button{
  margin: 0;
}
.light .button.ghost-btn,
.button.ghost-btn{
  background: transparent;
  color: var(--color-heading);
  border: 2px solid var(--color-border-light);
}
.light .button.ghost-btn:hover,
.button.ghost-btn:hover{
  border-color: var(--color-heading);
  background: var(--color-heading);
  color: var(--color-bg);
}
.light .button.ghost-btn::before,
.button.ghost-btn::before{
  color: var(--color-heading);
}
.light .button.ghost-btn:hover::before,
.button.ghost-btn:hover::before{
  color: var(--color-bg);
}
.index-intro{
  border-block: 1px solid var(--color-border)
}
.index-intro .editable_content .grid{
  gap: 9.6rem;
}
.upcoming-meeting .content{
  display: flex;
  align-items: flex-end;
  gap: 9.6rem;
}
.upcoming-meeting .content .editable_content{
  max-width: 42rem;
}
.upcoming-meeting .content .flex{
  width: calc(100% - 42rem - 9.6rem);
}
.upcoming-meeting .content .flex .card{
  background: var(--color-bg-dark);
  padding: 3.2rem;
  border-radius: 1.6rem;
}
.upcoming-meeting .content .flex .card .content-wrapper{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.6rem;
  padding: 0;
  position: relative;
}
.upcoming-meeting .content .flex .card .content-wrapper::before{
  content: 'Upcoming';
  grid-column-start: 1;
  grid-row-start: 1;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 6px 14px;
  margin-bottom: 1.6rem;
  background: rgba(255, 255, 255, .12);
  color: white;
  border-radius: 999px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  width: auto;
  justify-self: start;
  padding-left: 2.8rem;
  align-self: start;
  padding-bottom: 4px;
}
.upcoming-meeting .content .flex .card .content-wrapper::after{
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ADE80;
  flex: none;
  position: absolute;
  top: 12px;
  left: 13px;
}
.upcoming-meeting .content .flex .card .content-wrapper h3{
  grid-column-start: 1;
  grid-row-start: 2;
  color: var(--color-bg);
}
.upcoming-meeting .content .flex .card .content-wrapper p{
  grid-column-start: 1;
  grid-row-start: 3;
  color: var(--color-bg);
  font-size: 1.5rem;
}
.upcoming-meeting .content .flex .card .content-wrapper .cf-meeting_date{
  grid-column-start: 2;
  grid-row-start: 1;
  color: var(--color-bg);
  display: flex;
  justify-content: space-between;
  padding: 1.2rem .8rem;
  border-block: 1px solid var(--color-border-dark);
  font-size: 1.5rem;
}
.upcoming-meeting .content .flex .card .content-wrapper .cf-meeting_date .cf-label{
  color: rgba(255, 255, 255, .55);
}
.upcoming-meeting .content .flex .card .content-wrapper details.gw-modal{
  grid-column-start: 2;
  grid-row-start: 2;
  grid-row-end: 4;
  align-self: end;
  margin-right: 0;
}
.upcoming-meeting .content .flex .card .content-wrapper details.gw-modal summary.button{
  margin: 0;
  padding-inline: 1.2rem;
  font-size: 1.5rem;
  width: 100%;
  font-weight: 600;
}
.upcoming-meeting .content .flex .card .content-wrapper details.gw-modal summary.button:hover{
  background: var(--color-bg);
  border-color: var(--color-bg);
  color: var(--color-heading);
}
.upcoming-meeting .content .flex .card .content-wrapper details.gw-modal summary.button:hover::before{
  color: var(--color-heading);
}
section.content_container.last-meeting{
  border-block: 1px solid var(--color-border);
  background: var(--color-cream-2)
}
section.content_container.last-meeting .content .flex{
  margin-top: 4rem;
}
section.content_container.last-meeting .content .flex .card{
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  padding: 3.2rem;
  border-radius: 1.6rem;
}
section.content_container.last-meeting .content .flex .card .content-wrapper{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.6rem;
  padding: 0;
  position: relative;
}
section.content_container.last-meeting .content .flex .card .content-wrapper::before{
  content: 'Completed';
  grid-column-start: 1;
  grid-row-start: 1;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 6px 14px;
  margin-bottom: 1.6rem;
  background: var(--color-main-tint);
  color: var(--color-main-dark);
  border-radius: 999px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  width: auto;
  justify-self: start;
  align-self: start;
  padding-bottom: 4px;
}
section.content_container.last-meeting .content .flex .card .content-wrapper h3{
  grid-column-start: 1;
  grid-row-start: 2;
}
section.content_container.last-meeting .content .flex .card .content-wrapper p{
  grid-column-start: 1;
  grid-row-start: 3;
}
section.content_container.last-meeting .content .flex .card .content-wrapper .cf-meeting_date{
  grid-column-start: 2;
  grid-row-start: 1;
  margin: 0;
  border-block: 1px solid var(--color-border);
  padding: .8rem;
  align-self: start;
}
section.content_container.last-meeting .content .flex .card .content-wrapper .cf-location_name{
  grid-column-start: 2;
  grid-row-start: 2;
  margin: 0;
  border-bottom: 1px solid var(--color-border);
  padding: .8rem;
  align-self: start;
}
section.content_container.last-meeting .content .flex .card .content-wrapper .cf-charity_awarded{
  grid-column-start: 2;
  grid-row-start: 3;
  margin: 0;
  border-bottom: 1px solid var(--color-border);
  padding: .8rem;
  align-self: start;
}
section.content_container.last-meeting .content .flex .card .content-wrapper .cf-meeting_date,
section.content_container.last-meeting .content .flex .card .content-wrapper .cf-location_name,
section.content_container.last-meeting .content .flex .card .content-wrapper .cf-charity_awarded{
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  color: var(--color-heading);
  font-size: 1.5rem;
}
section.content_container.last-meeting .content .flex .card .content-wrapper .cf-meeting_date span.cf-label,
section.content_container.last-meeting .content .flex .card .content-wrapper .cf-location_name span.cf-label,
section.content_container.last-meeting .content .flex .card .content-wrapper .cf-charity_awarded span.cf-label{
  font-weight: 500;
  color: var(--color-ink-3);
}
section.content_container.last-meeting .content .flex .card .content-wrapper .cf-location_name,
section.content_container.last-meeting .content .flex .card .content-wrapper .cf-charity_awarded{
  margin-top: -7px;
}
section.content_container.last-meeting .content .flex .card .content-wrapper details.gw-modal{
  grid-column-start: 2;
  grid-row-start: 4;
  margin: 0;
}
section.content_container.last-meeting .content .flex .card .content-wrapper details.gw-modal summary.button{
  margin: 0;
  width: 100%;
}
section.content_container.last-meeting .content .flex .card .content-wrapper > a.button{
  grid-column-start: 2;
  grid-row-start: 5;    
  background: transparent;
  color: var(--color-heading);
  border: 2px solid var(--color-border-light);
  margin: 1.6rem 0 0;
}
section.content_container.last-meeting .content .flex .card .content-wrapper > a.button:hover{
  border-color: var(--color-heading);
  background: var(--color-heading);
  color: var(--color-bg);
}
section.content_container.last-meeting .content .flex .card .content-wrapper > a.button::before{
  color: var(--color-heading);
}
section.content_container.last-meeting .content .flex .card .content-wrapper > a.button:hover::before{
  color: var(--color-bg);
}
section.content_container.join-cta{
  position: relative;
  overflow: hidden;
}
section.content_container.join-cta::before{
  content: '';
  position: absolute;
  left: 50%;
  top: -60%;
  width: min(900px, 100vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(204, 33, 39, .28) 0%, rgba(204, 33, 39, 0) 65%);
  pointer-events: none;
  z-index: 3;
}
section.content_container.join-cta .img-wrapper::before{
  content: '';
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  backdrop-filter: blur(12px);
}
section.content_container.join-cta .img-wrapper::after{
  z-index: 2;
  opacity: .88;
}
section.content_container.join-cta .content{
  z-index: 4;
}
section.content_container.join-cta .content .editable_content{
  text-align: center;
}
section.content_container.join-cta .content .eyebrow{
  margin-inline: auto;
}
section.content_container.join-cta .content .btn-wrapper{
  justify-content: center;
}
.dark .button.ghost-btn{
    background: transparent;
    color: var(--color-bg);
    border: 2px solid var(--color-border-dark);
}
.dark .button.ghost-btn:hover{
    background: var(--color-bg);
    color: var(--color-heading);
    border-color: var(--color-bg);
}
.dark .button.ghost-btn:hover::before{
  color: var(--color-heading);  
}
.inner-intro .content .editable_content .grid{
  --grid-gap: 6.4rem;
}
.inner-intro .content .editable_content .grid .col-5{
  padding: 0 0 .8rem 1.6rem;
  border-left: 4px solid var(--color-main);
  align-self: start;
}
.inner-intro .content .editable_content .grid .col-5 .eyebrow::before{
  display: none;
}
.inner-intro .content .editable_content .grid .col-5 h1{
  margin: 0;
}
section.content_container.how-it-works{
  border-block: 1px solid var(--color-border);
  background: var(--color-cream-2);
}
section.content_container.how-it-works .editable_content{
  max-width: 768px;
}
section.content_container.how-it-works .flex{
  margin: 4rem 0 0;
}
section.content_container.how-it-works .flex .card{
  padding: 2.4rem;
  border-radius: 1.6rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  transition: var(--animate-medium);
}
section.content_container.how-it-works .flex .card:hover{
  box-shadow: var(--shadow);
  transform: translate(0 , -8px);
  border-color: var(--color-border-light);
}
section.content_container.how-it-works .flex .card::before{
  content: '01';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 2.4rem;
  background: var(--color-main-tint);
  color: var(--color-main);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.8rem;
  font-variant-numeric: tabular-nums;
}
section.content_container.how-it-works .flex .card:nth-child(2)::before{
  content: '02';
}
section.content_container.how-it-works .flex .card:nth-child(3)::before{
  content: '03';
}
section.content_container.how-it-works .flex .card:nth-child(4)::before{
  content: '04';  
}
section.content_container.how-it-works .flex .card .content-wrapper{
  padding: 0;
}
section.content_container.how-it-works .flex .card h3{
  font-size: var(--font-size-h3);
}
section.content_container.how-it-works .flex .card P{
  font-size: 1.5rem;
  margin: 0;
}
section.content_container.light.upcoming-inner{
  background: var(--color-cream-2);
  border-block: 1px solid var(--color-border)
}
section.content_container.past-meetings .content .editable_content{
  max-width: 768px;
  margin: 0 0 4rem;
}
section.content_container.past-meetings .content .flex .card{
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  padding: 2.4rem;
  border-radius: 1.6rem;
}
section.content_container.past-meetings .content .flex .card .content-wrapper{
  padding: 0;
}
section.content_container.past-meetings .content .flex .card .content-wrapper p{
  font-size: 1.5rem;
  margin: 0 0 1.6rem;
}
section.content_container.past-meetings .content .flex .card .content-wrapper .cf-charity_awarded,
section.content_container.past-meetings .content .flex .card .content-wrapper .cf-meeting_date{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-weight: 600;
  color: var(--color-heading);
  font-size: 1.5rem;
  margin: 0;
  border-block: 1px solid var(--color-border);
  padding: .8rem;
  gap: .4rem .8rem;
}
section.content_container.past-meetings .content .flex .card .content-wrapper .cf-charity_awarded{
  border-top: none;
}
section.content_container.past-meetings .content .flex .card .content-wrapper .cf-charity_awarded span,
section.content_container.past-meetings .content .flex .card .content-wrapper .cf-meeting_date span{
  color: var(--color-body);
  font-weight: 500;
}
section.content_container.past-meetings .content .flex .card .content-wrapper details{
  margin: 1.6rem 0 0;
  width: 100%;
}
section.content_container.past-meetings .content .flex .card .content-wrapper details .button{
  margin: 0;
  font-size: 1.5rem;
  width: 100%;
}
section.content_container.past-meetings .content .flex .card .content-wrapper > a.button{
  font-size: 1.5rem;
  width: 100%;
  background: transparent;
  color: var(--color-heading);
  border: 2px solid var(--color-border-light);
  margin: 1.6rem 0 0;
}
section.content_container.past-meetings .content .flex .card .content-wrapper > a.button:hover{
  border-color: var(--color-heading);
  background: var(--color-heading);
  color: var(--color-bg);
}
section.content_container.past-meetings .content .flex .card .content-wrapper > a.button::before{
  color: var(--color-heading);
}
section.content_container.past-meetings .content .flex .card .content-wrapper > a.button:hover::before{
  color: var(--color-bg);
}
section form .form-terms{
  text-align: right;
}
footer .content a.logo{
  width: 20rem;
}
footer .content .eyebrow{
  color: rgba(255, 255, 255, .5);
  margin-bottom: 2.4rem;
}
footer .content .eyebrow::before{
  display: none;
}
footer .content .brand-col{
  max-width: 25rem;
  width: 100%;
}
footer .content > div{
  width: auto;
}
footer .content .sitemap ul{
  gap: 1.6rem;
}
footer .content .sitemap ul li{
  width: 100%;
}
footer .content p{
  color: rgba(255,255,255,.72);
  font-size: 1.5rem;
  margin: 1.6rem 0 0;
}
footer .content ul{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1.6rem;
}
footer .content ul li, 
footer .content ul li a{
  color: rgba(255,255,255,.72);
  font-size: 1.5rem;
  margin: 0;
  padding: 0;
}
footer .content ul li a:hover{
  color: white;
}
footer .content p.signature{
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, .45);
  font-size: 1.3rem;
}
footer .content p.signature a{
  color: rgba(255, 255, 255, .45);
}
footer .content p.signature a:hover{
  color: white;
}
.error-page{
  min-height: calc(100svh - 4.7rem - 9.2rem - 31.3rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.meeting-minutes .content .content-wrapper{
  display: grid;
  grid-column: repeat(12, 1fr);
  gap: 0 1.6rem;
}
.meeting-minutes .content .content-wrapper .editable_content{
  grid-column: span 12;
  grid-row-start: 5;
  padding-top: 3.2rem;
  margin-top: 3.2rem;
  border-top: 1px solid var(--color-border);
}
.meeting-minutes .content .content-wrapper .cf-tax_receipt_contact,
.meeting-minutes .content .content-wrapper .cf-charity_awarded,
.meeting-minutes .content .content-wrapper .cf-location_name,
.meeting-minutes .content .content-wrapper .cf-meeting_date{
  grid-column-start: 1;
  grid-column-end: 8;
  background: white;
  padding: 1.6rem;
  margin: 0;
  border: 1px solid var(--color-border);
  border-top: none;
}
.meeting-minutes .content .content-wrapper .cf-meeting_date{
  grid-row-start: 1;
    border-radius: 1.6rem 1.6rem 0 0;
    border: 1px solid var(--color-border);
}
.meeting-minutes .content .content-wrapper .cf-location_name{
  grid-row-start: 2;
}
.meeting-minutes .content .content-wrapper .cf-charity_awarded{
  grid-row-start: 3;
}
.meeting-minutes .content .content-wrapper .cf-tax_receipt_contact{
  grid-row-start: 4;
    border-radius: 0 0 1.6rem 1.6rem;
}
.meeting-minutes .content .content-wrapper details.gw-modal{
  grid-column-start: 8;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 5;    
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
@media screen and (max-width: 1264px){
  .upcoming-meeting .content{
    flex-direction: column;
    gap: 4rem;
    align-items: flex-start;
  }
  .upcoming-meeting .content .flex,
  .upcoming-meeting .content .editable_content{
    width: 100%;
  }
}
@media screen and (max-width: 1024px){
  .banner-container-constrained p{
    margin: 0;
  }
  .banner-container-constrained.banner-float .banner-content .impact-figure{
    position: initial;
    width: 100%;
    margin-top: 4rem;
  }
  .index-intro .editable_content .grid{
    gap: 4rem;
  }
  .grid .col-5, .grid .col-6, .grid .col-7, .grid .col-8, .grid .col-9, .grid .col-10, .grid .col-11, .grid .col-12{
    grid-column: span 8;
  }
  section.content_container.last-meeting .content .flex .card .content-wrapper{
    display: flex;
    flex-direction: column;
  }
  section.content_container.last-meeting .content .flex .card .content-wrapper details.gw-modal,
  section.content_container.last-meeting .content .flex .card .content-wrapper .cf-meeting_date{
    margin-top: 1.6rem;
  }
  section.content_container.last-meeting .content .flex .card .content-wrapper .cf-meeting_date, section.content_container.last-meeting .content .flex .card .content-wrapper .cf-location_name, section.content_container.last-meeting .content .flex .card .content-wrapper .cf-charity_awarded{
    width: 100%;
    flex-wrap: wrap;
  }
  section.content_container.last-meeting .content .flex .card .content-wrapper .cf-location_name, section.content_container.last-meeting .content .flex .card .content-wrapper .cf-charity_awarded{
    margin: 0;
  }
  .inner-intro .content .editable_content .grid{
    --grid-gap: 3.2rem;
  }
  .meeting-minutes .content .content-wrapper details.gw-modal,
  .meeting-minutes .content .content-wrapper .cf-tax_receipt_contact, .meeting-minutes .content .content-wrapper .cf-charity_awarded, .meeting-minutes .content .content-wrapper .cf-location_name, .meeting-minutes .content .content-wrapper .cf-meeting_date{
    grid-column-start: 1;
    grid-column-end: 13;
    justify-items: start;
    align-content: start;
  }
  .meeting-minutes .content .content-wrapper details.gw-modal{
    grid-row-start: 5;
    grid-row-end: 6;
    justify-content: flex-start;
  }
  .meeting-minutes .content .content-wrapper .editable_content{
    grid-row-start: 6;
  }
}
@media screen and (max-width: 768px){
  .upcoming-meeting .content .flex .card .content-wrapper{
    display: flex;
    flex-direction: column;
  }
  .upcoming-meeting .content .flex .card .content-wrapper details.gw-modal{
    align-self: start;
  }
  .upcoming-meeting .content .flex .card .content-wrapper details.gw-modal summary.button{
    padding-inline: 2.4rem;
  }
}
@media screen and (max-width: 640px){
  .btn-wrapper{
    flex-direction: column;
  }
}
@media screen and (max-width: 580px){
  section.content_container.how-it-works .flex .card{
    width: 100%;
  }
}