:root{
  --shadow-float: 0 24px 48px -28px rgba(8, 19, 48, 0.55);
}
/* ===--- 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%;
    /* The sticky header covers the top of the viewport, so the browser's own jumps to
       an #anchor (a link from another page, a back button) must stop below it.
       main.js measures the real header and sets --cc-header-offset inline on <html>,
       which overrides this default; until it has, the stock desktop header's height
       stands in. A runtime measurement, not a Theme Settings field. */
    --cc-header-offset: 6rem;
    scroll-padding-top: var(--cc-header-offset);
}
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 ---=== */
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);
  text-wrap: pretty;
}
.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: var(--font-ls-heading);
  text-wrap: balance;
}
.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-navy);
  padding: 1.2rem var(--section-inline);
}
.top-header .content {
  display: flex;
  justify-content: space-between;
  gap: 1.6rem;
  align-items: center;
}
.left-side{
  display: flex;
  gap: 2.4rem;
}
.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: 2.4rem;
}
.top-header .content p,
.top-header .content>ul li {
  margin: 0;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1;
    color: #cfd9ee;
}
.top-header .content>ul li a::before{
  --fa: "\f095";
  --fa-style: 300;
  --_fa-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Pro"));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--_fa-family);
  font-feature-settings: normal;
  font-style: normal;
  font-synthesis: none;
  font-variant: normal;
  font-weight: 400;
  text-align: center;
  text-rendering: auto;
  content: var(--fa) / "";
  font-size: 1.4rem;
  margin: 0 .8rem 0 0;
  line-height: 1;
} 
.top-header .content>ul li:nth-child(2) a::before{
  content: "\f303";
}
.top-header .content>ul li.highlight a{
  color: var(--color-sun);
} 
.top-header .content>ul li.highlight a::before{
  --fa: "\f109";
} 
.top-header .content>ul li a:hover,
.top-header .content>ul li.highlight a:hover{
  color: var(--color-aqua);
}
.top-header .content a{
  font-weight: 700;
  color: white;
  text-decoration: none;
}
.top-header .content a
.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: 1.6rem var(--section-inline);
  box-shadow: var(--shadow);
}
.jqueryslidemenu {
  width: 100%;
  max-width: var(--content-width-default);
  padding: 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.jqueryslidemenu a.logo {
  width: var(--logo-width);
  display: block;
  margin: 0;
  padding: 0;
}
.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(--header-nav-color);
  font-size: var(--header-nav-size);
  width: 100%;
  display: block;
  line-height: 1;
  text-decoration: none;
  position: relative;
  border-radius: 999px;
}
.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(--header-nav-color-hover);
  background: var(--color-aqua-100);
}
.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%;
}
.jqueryslidemenu ul li:has(ul) a{
  flex-direction: row-reverse;
  display: flex;
  gap: .8rem;
}
.jqueryslidemenu ul li:has(ul) a::before{
  --fa: "\f078";
  --fa-style: 300;
  --_fa-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Pro"));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--_fa-family);
  font-feature-settings: normal;
  font-style: normal;
  font-synthesis: none;
  font-variant: normal;
  font-weight: 400;
  text-align: center;
  text-rendering: auto;
  content: var(--fa) / "";
  font-size: 1.4rem;
  margin: 0;
  line-height: 1;
  transition: var(--animate-fast);
}
.jqueryslidemenu ul li:hover:has(ul) a::before{
  transform: rotate(180deg);
}
.jqueryslidemenu ul li:has(ul) ul li a{
  display: block;
}
.jqueryslidemenu ul li:has(ul) ul li a::before{
  display: none;
}
/* ----- NAV HIGHLIGHT (CTA) -----
   The admin's per-item "Highlight" flag is a real persisted column that emits
   <li class="highlight"> (includes/functions/navigation-renderer.php), but no rule
   for it existed in any stylesheet — so ticking Highlight changed nothing on the
   page. It is the obvious mechanism for a nav call-to-action ("Make a Donation",
   "Book Now"), which is presumably why the flag exists.
   Built from the --button-* tokens so it follows the theme's chosen Button Style.
   The li is a flex child sized to its content, so the chip hugs its text. */
.jqueryslidemenu ul li.highlight > a {
  background: var(--button-bg);
  color: var(--button-color);
  border-radius: var(--button-radius);
  padding-left: 2rem;
  padding-right: 2rem;
}
.jqueryslidemenu ul li.highlight > a:hover,
.jqueryslidemenu ul li.highlight:hover > a,
.jqueryslidemenu ul li.highlight.Selected > a,
.jqueryslidemenu ul li.highlight.Selected > a:hover {
  background: var(--button-bg-hover);
  color: var(--button-color-hover);
}
.jqueryslidemenu ul li.highlight > a::before{
  --fa: "\f095";
  --fa-style: 300;
  --_fa-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Pro"));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--_fa-family);
  font-feature-settings: normal;
  font-style: normal;
  font-synthesis: none;
  font-variant: normal;
  font-weight: 400;
  text-align: center;
  text-rendering: auto;
  content: var(--fa) / "";
  font-size: 1.4rem;
  margin: 0 .8rem 0 0;
  line-height: 1;
  transition: var(--animate-fast);
}
/* The nav's underline sweep would draw a rule across the bottom of the chip. */
.jqueryslidemenu ul li.highlight > a::after { display: none; }
/* ----- FIRST DROP-DOWN LAYER ----- */
.jqueryslidemenu ul li ul {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  position: absolute;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .8rem;
  visibility: hidden;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: none;
  width: 256px;
  background: var(--header-dropdown-bg);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-float);
  padding: .8rem;
  border-radius: 1.6rem;
}
.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;
  width: 100%;
}
.jqueryslidemenu ul li ul li a {
  color: var(--header-dropdown-color);
  padding: 1.6rem;
  margin: 0;
  background: none;
  border-radius: .8rem;
}
.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(--color-aqua-100);
}
/* ----- 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;
}
/* The bottom block: the policy links (when the site has policy pages) on their own line
   above the signature, so a narrow screen never wraps the company name away from our
   credit. The block carries the divider; the two lines sit close as one unit. */
footer .footer-bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding-top: 1.6rem;
  border-top: 2px solid hsla(0 0% 100% / .08);
}
footer p.signature,
footer .footer-policies {
  width: 100%;
  text-align: center;
  color: var(--footer-body-color);
  font-size: var(--footer-signature-size);
  line-height: 1.2;
  margin: 0;
}
footer p.signature a,
footer .footer-policies a {
  color: var(--footer-body-color);
  text-decoration: none;
}
footer p.signature a:hover,
footer .footer-policies 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;
    min-height: 0;   /* a text link is not a button-sized target: no --button-height floor */
}
/* 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-navy);
}
.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);
  color: #d3def2;
  font-size: 2rem;
}
.banner-container-constrained.banner-bar .banner-right p{
  padding-inline: 4rem 0;
}
/* Promotional Badge (an image custom field on the hero slides), between the copy and the
   buttons. Unstyled it rendered at its natural 890px: well across the photo on desktop,
   wider than the screen on a phone. It takes the tagline's spacing, grows with the screen,
   and gives way in height on short screens so the buttons stay in view. The <img> carries
   the same class as its wrapper, hence `.banner-content >` for the wrapper. */
.banner-container-constrained .banner-content > .cf-promotional_badge{
  display: block;
  width: 100%;
  max-width: var(--hero-p-max-width);
  margin: var(--hero-p-margin);
  line-height: 0;
}
.banner-container-constrained .banner-content > .cf-promotional_badge:last-child{
  margin-bottom: 0;
}
.banner-container-constrained .banner-content > .cf-promotional_badge img,
.banner-container-constrained .banner-content > .cf-promotional_badge svg{
  display: inline-block;
  max-width: 100%;
  max-height: clamp(16rem, 36svh, 40rem);
  border-radius: 1.6rem;
  filter: drop-shadow(0 1.2rem 2.4rem hsla(0 0% 0% / .3));
}
.banner-container-constrained .banner-content > .cf-promotional_badge img{
  width: auto;
  height: auto;
}
.banner-container-constrained .banner-content > .cf-promotional_badge svg{
  width: 100%;
  height: auto;
}
/* Bar layout: it grows with the screen (44rem on a laptop, 34vw from about 1300px, up to
   64rem) and may run over onto the photo; it sits above it. */
.banner-container-constrained.banner-bar .banner-content > .cf-promotional_badge{
  width: clamp(44rem, 34vw, 64rem);
  max-width: 100%;
}
.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;
  }
  /* Stacked and centred from here down, so the bar's desktop column (a share of the
     slide, padded on the side facing the image) no longer applies: the tagline takes
     the hero's own body width. It kept `width: 40%` (130px of a 326px phone column,
     nine lines), and a right-aligned slide also kept its 4rem side padding, because
     the desktop .banner-right rule outranks a plain `p` here. */
  .banner-container-constrained.banner-bar p,
  .banner-container-constrained.banner-bar .banner-right p{
    width: 100%;
    max-width: var(--hero-p-max-width);
    padding: 0;
  }
  /* The promotional badge follows the tagline into the stacked, centred column. */
  .banner-container-constrained.banner-bar .banner-content > .cf-promotional_badge{
    width: 100%;
    max-width: var(--hero-p-max-width);
  }
  .banner-container-constrained.banner-box-content .banner-content::after,
  .banner-container-constrained.banner-bar.banner-trans-bar .img-wrapper:before{
    display: none;
  }
  .banner-container-constrained .banner-details .banner-content,
  .banner-container-constrained .banner-left .banner-details .banner-content,
  .banner-container-constrained .banner-right .banner-details .banner-content {
    width: 100%;
    align-items: center;
  }
  .banner-container-constrained.banner-float li{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.2rem;
  }
  .banner-container-constrained.banner-float .banner-right .img-wrapper,
  .banner-container-constrained.banner-float .img-wrapper{
    position: initial;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .banner-container-constrained.banner-float .banner-right .banner-details,
  .banner-container-constrained.banner-float .banner-details{
    justify-content: center;
    text-align: center;
    padding: 3.2rem 0 0;
  }
  .banner-container-constrained.banner-float .banner-right .banner-content,
  .banner-container-constrained.banner-float .banner-content{
    padding: 0;
  }
  .banner-container-constrained .banner-next,
  .banner-container-constrained .banner-previous,
  .banner-container-constrained .banner-pause {
    display: none !important;
  }
}
/* ----- Banner pagination ----- */
.banner_pagination {
  display: flex;
  justify-content: center;
  width: 100%;
  position: absolute;
  bottom: 1rem;
  color: var(--hero-pagination-color);
  z-index: 1;
}
.banner_pagination>div {
  margin: 0 .3rem;
  cursor: pointer;
}
.banner_pagination>div:hover {
  color: var(--hero-pagination-color-hover);
}
.banner_pagination>.active {
  color: var(--hero-pagination-color-active);
}
@media screen and (max-width: 1024px) {
  .banner_pagination {
    display: none;
  }
}
/* ===--- Inner Header ---=== */
.inner_header {
  width: 100%;
  height: var(--inner-header-height);
  min-height: 24rem;
  background: url(/assets/images/layout/inner_header.jpg) center center no-repeat;
  background-size: cover;
}
/* Display Section Header (Site-wide Features): the page's H1 over the photo, a sub
   page's section as an eyebrow above it. The photo is darkened like an image-background
   strip on a dark band (the dark ground at the Image BG Overlay Opacity), and the text
   takes the dark band's colours through .dark, so it reads on any photo and both are
   set in Theme Settings. The header grows to fit a long title rather than spilling. */
.inner_header.has-title {
  position: relative;
  display: flex;
  align-items: center;
  height: auto;
  min-height: max(var(--inner-header-height), 24rem);
}
.inner_header.has-title::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-bg-dark);
  opacity: var(--section-img-bg-overlay-opacity);
}
.inner-header-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--section-block-sm) var(--section-inline);
}
.inner-header-overlay .inner-header-title {
  margin: 0;
  text-wrap: balance;
}
.inner-header-overlay .inner-header-eyebrow {
  margin: 0 0 .8rem;
}
/* ===--- Forms ---=== */
form{
  /* The row gap, and the value the half/third-width calc()s subtract. This used to
     hard-define --form-gap here, which fixed an install whose :root never emitted it
     but also SHADOWED the themed value, so Theme Settings > Gaps > Form Gap did
     nothing on the frontend. A fallback in the var() reference survives a missing
     definition without overriding the theme. Every use site must carry it: an
     invalid var() zeroes the gap AND voids the width calc()s, collapsing half/third
     fields to content width. */
  display: flex;
  gap: var(--form-gap, 1.6rem);
  flex-wrap: wrap;
}
fieldset{
  width: 100%;
  border: none;
  margin: 0;
  padding: 0;
  position: relative;
}
label{
  font-size: 1.4rem;
  line-height: 1;
  color: var(--font-color-body);
  opacity: .64;
  position: absolute;
  top: .8rem;
  left: .8rem;
  z-index: 1;
}
textarea,
input{
  background: var(--input-bg);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-radius);
  width: 100%;
  padding: var(--input-padding);
  margin: 0;
}
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;
}
/* Dynamic-form choice fields: radio groups, checkbox groups and a single checkbox.
   Each option is the design system's control below (.radio-container /
   .checkbox-container), and a group's question sits above its options. All of them
   are <label>s, and the base label{} rule above is a floating label positioned inside
   an input: applied to these it stacked every option of every group on one spot,
   faded and offset. Reset in the form only, so the components keep their own look
   wherever else they are used. */
form .form-group-label{
  position: static;
  display: block;
  margin: 0 0 1.2rem;
}
/* The question sits on the section, not inside a white input, so it takes the
   section's text colour, at full strength on a dark or brand-colour ground (the 64%
   floating-label fade is made for grey text on a white field). */
.light form .form-group-label{
  color: var(--font-color-body-light);
}
.dark form .form-group-label{
  color: var(--font-color-body-dark);
  opacity: 1;
}
.main form .form-group-label{
  color: var(--font-color-body-main);
  opacity: 1;
}
form .form-radio-group,
form .form-checkbox-group{
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
/* Body-size text whose first line centres on the 2.4rem control, and room to wrap a
   long option instead of the component's fixed height. */
form .form-radio-option,
form .form-checkbox-option{
  top: auto;
  left: auto;
  z-index: auto;
  opacity: 1;
  height: auto;
  min-height: 2.4rem;
  align-items: flex-start;
  font-size: var(--font-size-body);
  line-height: 2.4rem;
}
/* The real input stays focusable under the drawn control but takes no space: the base
   input{} rule gives every input a width, padding and border. Keyboard focus shows on
   the control the visitor sees. */
form .form-radio-option input,
form .form-checkbox-option input{
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
form .form-radio-option input:focus-visible ~ .radio-checkmark,
form .form-checkbox-option input:focus-visible ~ .checkmark{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
/* A form's fields keep their own colours in every band. Their ground is --input-bg,
   which no band changes, so the band text colours further up (.dark input …) made
   what a visitor typed white on a white field, placeholders included. The select
   trigger and an autofilled field already use the base pair. */
.light .form_holder input,
.light .form_holder textarea,
.dark .form_holder input,
.dark .form_holder textarea,
.main .form_holder input,
.main .form_holder textarea{
  color: var(--font-color-body);
}
/* 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);
  /* The shorthand resets every side to a medium width; the tick is two sides. */
  border-width: 0 2px 2px 0;
}
/* Custom Form Radio Button */
.radio-container {
  display: block;
  position: relative;
  padding-left: 32px;
  color: var(--font-color-body);
  margin-bottom: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 2.4rem;
  display: flex;
  align-items: center;
}
.light .radio-container{
  color: var(--font-color-body-light);
}
.main .radio-container{
  color: var(--font-color-body-main);
}
.dark .radio-container{
  color: var(--font-color-body-dark);
}
.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.radio-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 2.4rem;
  width: 2.4rem;
  background-color: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: 50%;
}
.light .radio-checkmark{
  background-color: var(--color-bg-light);
  border: 2px solid var(--color-border-light);
}
.main .radio-checkmark{
  background-color: var(--color-bg-main);
  border: 2px solid var(--color-border-main);
}
.dark .radio-checkmark{
  background-color: var(--color-bg-dark);
  border: 2px solid var(--color-border-dark);
}
.radio-container:hover input ~ .radio-checkmark,
.light .radio-container:hover input ~ .radio-checkmark,
.dark .radio-container:hover input ~ .radio-checkmark {
  border-color: var(--color-main);
}
.main .radio-container:hover input ~ .radio-checkmark {
  border-color: var(--color-bg);
}
.radio-container input:checked ~ .radio-checkmark,
.light .radio-container input:checked ~ .radio-checkmark,
.dark .radio-container input:checked ~ .radio-checkmark {
  background-color: var(--color-main);
  border-color: var(--color-main);
}
.main .radio-container input:checked ~ .radio-checkmark {
  background-color: var(--color-bg);
  border-color: var(--color-bg);
}
.radio-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.radio-container input:checked ~ .radio-checkmark:after {
  display: block;
}
.radio-container .radio-checkmark:after {
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-bg);
}
.light .radio-container .radio-checkmark:after{
    background: var(--color-bg-light);
}
.dark .radio-container .radio-checkmark:after{
    background: var(--color-bg-dark);
}
.main .radio-container .radio-checkmark:after{
    background: var(--color-bg-main);
}
/* Custom Form Switch */
.radio-container.switch-container,
.checkbox-container.switch-container{
  padding-left: 5.6rem;
}
.radio-container.switch-container .radio-checkmark,
.checkbox-container.switch-container .checkmark{
  width: 4.8rem;
  border-radius: 1.2rem;
}
.radio-container.switch-container .radio-checkmark::after,
.checkbox-container.switch-container .checkmark:after {
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  border: none;
  background: var(--color-bg-light);
  top: 1px;
  left: 1px;
  transform: none;
  border-radius: 50%;
  transition: var(--animate-fast);
}
.radio-container.switch-container:hover input ~ .radio-checkmark:after,
.checkbox-container:hover input ~ .checkmark:after{
  background: var(--color-main);
}
.radio-container.switch-container input:checked ~ .radio-checkmark:after,
.checkbox-container.switch-container input:checked ~ .checkmark:after{
  background: var(--color-main);
  left: calc(100% - 1.9rem);
}
/* Baseline Form */
.baseline-form label{
  position: initial;
  color: var(--font-color-body);
  margin: 0 0 .4rem;
  display: block;
}
.light .baseline-form label{
  color: var(--font-color-body-light);
}
.dark .baseline-form label{
  color: var(--font-color-body-dark);
}
.main .baseline-form label{
  color: var(--font-color-body-main);
}
/* ==========================================================================
   CUSTOM SELECT
   assets/js/custom-selects.js replaces every <select> inside .custom-select with
   a div widget: a .select-selected trigger plus a .select-items list, toggling
   .select-hide, .select-arrow-active and .same-as-selected.

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

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

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

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

.baseline-form .select-selected,
.baseline-form input,
.baseline-form textarea{
  border: none;
  border-radius: 0;
  background: var(--color-bg-light);
  border-bottom: 2px solid var(--color-main);
  padding: .8rem;
}
.light .baseline-form .select-selected,
.light .baseline-form input,
.light .baseline-form textarea{
  background: var(--color-bg);
  border-color: var(--color-main);
}
.dark .baseline-form .select-selected,
.dark .baseline-form input,
.dark .baseline-form textarea{
  background: hsla(0 0% 100% / .08);
  border-color: var(--color-main);
}
.main .baseline-form .select-selected,
.main .baseline-form input,
.main .baseline-form textarea{
  background: hsla(0 0% 100% / .08);
  border-color: var(--color-bg);
}
/* Outline Form */
.outline-form label{
  position: initial;
  color: var(--font-color-body);
  margin: 0 0 .4rem;
  display: block;
}
.light .outline-form label{
  color: var(--font-color-body-light);
}
.dark .outline-form label{
  color: var(--font-color-body-dark);
}
.main .outline-form label{
  color: var(--font-color-body-main);
}
.outline-form .select-selected,
.outline-form input,
.outline-form textarea{
  border-radius: 0;
  background: var(--color-bg-light);
  border: 2px solid var(--color-border);
  padding: .8rem;
}
.light .outline-form .select-selected,
.light .outline-form input,
.light .outline-form textarea{
  background: var(--color-bg);
  border: 2px solid var(--color-border-light);
}
.dark .outline-form .select-selected,
.dark .outline-form input,
.dark .outline-form textarea{
  background: hsla(0 0% 100% / .08);
  border: 2px solid var(--color-border-dark);
}
.main .outline-form .select-selected,
.main .outline-form input,
.main .outline-form textarea{
  background: hsla(0 0% 100% / .08);
  border: 2px solid var(--color-border-main);
}
/* Basic Form */
.basic-form label{
  position: initial;
  color: var(--font-color-body);
  margin: 0 0 .4rem;
  display: block;
  opacity: .64;
}
.light .basic-form label{
  color: var(--font-color-body-light);
}
.main .basic-form label{
  color: var(--font-color-body-main);
}
.dark .basic-form label{
  color: var(--font-color-body-dark);
}
.basic-form .select-selected,
.basic-form input,
.basic-form textarea{
  border-radius: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: .8rem;
}
.light .basic-form .select-selected,
.light .basic-form input,
.light .basic-form textarea{
  background: var(--color-bg-light);
  border: 1px solid var(--color-border-light);
}
.main .basic-form .select-selected,
.main .basic-form input,
.main .basic-form textarea{
  background: var(--color-main);
  border: 1px solid var(--color-border-main);
}
.dark .basic-form .select-selected,
.dark .basic-form input,
.dark .basic-form textarea{
  background: var(--color-bg-dark);
  border: 1px solid var(--color-border-dark);
}
/* ----- Placeholder  ------ */
::-webkit-input-placeholder {
  color: var(--font-color-body);
  opacity: 0.48;
}
::-moz-placeholder {
  color: var(--font-color-body);
  opacity: 0.48;
}
:-ms-input-placeholder {
  color: var(--font-color-body);
  opacity: 0.48;
}
:-moz-placeholder {
  color: var(--font-color-body);
  opacity: 0.48;
}
.light ::-webkit-input-placeholder {
  color: var(--font-color-body-light);
  opacity: 0.48;
}
.light ::-moz-placeholder {
  color: var(--font-color-body-light);
  opacity: 0.48;
}
.light :-ms-input-placeholder {
  color: var(--font-color-body-light);
  opacity: 0.48;
}
.light :-moz-placeholder {
  color: var(--font-color-body-light);
  opacity: 0.48;
}
.dark ::-webkit-input-placeholder {
  color: var(--font-color-body-dark);
  opacity: 0.48;
}
.dark ::-moz-placeholder {
  color: var(--font-color-body-dark);
  opacity: 0.48;
}
.dark :-ms-input-placeholder {
  color: var(--font-color-body-dark);
  opacity: 0.48;
}
.dark :-moz-placeholder {
  color: var(--font-color-body-dark);
  opacity: 0.48;
}
.main ::-webkit-input-placeholder {
  color: var(--font-color-body-main);
  opacity: 0.48;
}
.main ::-moz-placeholder {
  color: var(--font-color-body-main);
  opacity: 0.48;
}
.main :-ms-input-placeholder {
  color: var(--font-color-body-main);
  opacity: 0.48;
}
.main :-moz-placeholder {
  color: var(--font-color-body-main);
  opacity: 0.48;
}
/* A form's fields keep their own colours in every band (see the Forms rules), so
   their placeholders do too: a band colour here was white on a white field. */
.light .form_holder ::placeholder,
.dark .form_holder ::placeholder,
.main .form_holder ::placeholder{
  color: var(--font-color-body);
  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));
    }
}
/* A 3-column row stays two across down to 560px (v5.4.31). It went to one column at
   768px, so a tablet in portrait showed a single card per row at roughly 700px wide,
   while a 4-column row beside it stayed two across down to 320px. */
@media screen and (max-width: 560px) {
    .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;
}
/* A card's title links to its entry (v5.4.32 on pages cards). It keeps the heading
   colour whichever element the title field uses, not only h3. */
.card h3 a,
.card .cf-title a{
  text-decoration: none;
  color: var(--font-color-heading);
}
.light .card h3 a,
.light .card .cf-title a{
  color: var(--font-color-heading-light);
}
.dark .card h3 a,
.dark .card .cf-title a{
  color: var(--font-color-heading-dark);
}
.main .card h3 a,
.main .card .cf-title a{
  color: var(--font-color-heading-main);
}
.card h3 a:hover,
.card .cf-title a:hover{
  color: var(--card-title-color-hover);
}
.light .card h3 a:hover,
.light .card .cf-title a:hover{
  color: var(--card-title-color-hover-light);
}
.main .card h3 a:hover,
.main .card .cf-title a:hover{
  color: var(--card-title-color-hover-main);
}
.dark .card h3 a:hover,
.dark .card .cf-title 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 .cf-title a,
.box-list .card p{
  color: var(--box-text-color);
}
.box-list .card h3 a:hover,
.box-list .card .cf-title 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 .cf-title a,
.animated-box-list .card .cf-title 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;
  min-height: 0;   /* or the --button-height floor keeps the hidden button's space */
  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: 52rem;
  border-radius: 3.2rem;
  overflow: hidden;
}
.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% - 60rem);
}
.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;
  overflow: hidden;
  left: auto;
  right: 0;
}
.strip-list:nth-of-type(2n) .img-wrapper{
  right: auto;
  left: 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-start;
}
.strip-list:nth-of-type(2n) .content{
  justify-content: flex-end;
}
.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;
}
/* The + is drawn in the brand colour: invisible on a Colour (brand) section and faint
   on a dark one, so it takes the context's heading colour there. */
.dark .toggle-wrapper .toggle_faq .icon i {
  background: var(--font-color-heading-dark);
}
.main .toggle-wrapper .toggle_faq .icon i {
  background: var(--font-color-heading-main);
}
/* Outline Toggles and Shadow Toggles — the toggles widget's two Widget Layout options.
   Both were styled in v5.1.0; 514cce5 deleted the rules (with the context rules above)
   while the options stayed on offer, so choosing either rendered the plain default.
   Restored on the theme's tokens: the outline borders are the HR colour per context,
   the shadow surface is the Shadow Card's. */
.toggle-wrapper.outline-toggles {
  gap: 0;
}
.toggle-wrapper.outline-toggles .block {
  border: var(--border-hr-width) solid var(--border-hr-color);
  border-top: none;
}
.toggle-wrapper.outline-toggles .block:first-child {
  border-top: var(--border-hr-width) solid var(--border-hr-color);
}
.toggle-wrapper.outline-toggles .toggle_faq {
  padding: 0;
  gap: 0;
  align-items: unset;
}
.toggle-wrapper.outline-toggles .toggle_faq.active {
  border-bottom: var(--border-hr-width) solid var(--border-hr-color);
}
.toggle-wrapper.outline-toggles .toggle_faq .icon {
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 auto;
  width: 3.2rem;
  height: 3.2rem;
  margin-top: 5px;
}
.toggle-wrapper.outline-toggles .toggle_faq .question {
  padding: .8rem 1.6rem .8rem .8rem;
  border-left: var(--border-hr-width) solid var(--border-hr-color);
}
.toggle-wrapper.outline-toggles .toggler {
  padding: .8rem 1.6rem 1.6rem 4rem;
}
.light .toggle-wrapper.outline-toggles :is(.block, .toggle_faq.active, .toggle_faq .question) {
  border-color: var(--border-hr-color-light);
}
.dark .toggle-wrapper.outline-toggles :is(.block, .toggle_faq.active, .toggle_faq .question) {
  border-color: var(--border-hr-color-dark);
}
.main .toggle-wrapper.outline-toggles :is(.block, .toggle_faq.active, .toggle_faq .question) {
  border-color: var(--border-hr-color-main);
}
.toggle-wrapper.shadow-toggles {
  padding: var(--shadow-card-content-padding);
  border-radius: var(--shadow-card-radius);
  box-shadow: var(--shadow-card-shadow);
  background: var(--shadow-card--bg);
}
.light .toggle-wrapper.shadow-toggles {
  background: var(--shadow-card--bg-light);
}
.dark .toggle-wrapper.shadow-toggles {
  background: var(--shadow-card--bg-dark);
}
.main .toggle-wrapper.shadow-toggles {
  background: var(--shadow-card--bg-main);
}
/* ---=== Widget Slider ===--- */
.widget-slider {
  position: relative;
  padding-bottom: 4rem;
}
.widget-slider .swiper-slide {
  height: auto;
}
.widget-slider .swiper-slide .card{
  height: 100%;
  display: flex;
  align-items: center;
  gap: 3.2rem;
}
.widget-slider .swiper-slide .card .img-wrapper{
  width: 100%;
  max-width: 40rem;
  height: 100%;
}
.widget-slider .swiper-slide .card .img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.widget-slider .swiper-slide .card .content-wrapper{
  width: calc(100% - 43.2rem);
  padding-block: 3.2rem;
}
.widget-slider .swiper-button-prev,
.widget-slider .swiper-button-next {
  color: white;
  top: calc(50% - 2rem);
  background: var(--color-main);
  border-radius: 50%;
  height: 4rem;
  width: 4rem;
  left: -2rem;
}
.widget-slider .swiper-button-next{
  left: auto;
  right: -2rem;
}
.widget-slider .swiper-button-prev:hover,
.widget-slider .swiper-button-next:hover{
  background: var(--color-bg-dark);
}
.swiper .swiper-button-next:after, .swiper .swiper-button-prev:after{
  font-size: 2rem;
}
.widget-slider .swiper-pagination-bullet-active {
  background: var(--color-main);
}
.swiper-pagination{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  bottom: 15px;
}
@media screen and (max-width: 1024px) {
    .widget-slider .swiper-slide .card{
    flex-direction: column;
    }
    .widget-slider .swiper-slide .card .img-wrapper{
    aspect-ratio: 2 / 1;
    max-width: 100%;
    }
    .widget-slider .swiper-slide .card .content-wrapper{
    width: 100%;
    padding: 0;
    }
}
/* ---=== Widget Category Filter ===--- */
.widget-category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--flex-gap);
  margin-block: 1.6rem;
}
.widget-category-filter .filter-btn {
  padding: 0 2.4rem;
  border: 2px solid var(--color-border);
  background: var(--color-bg-light);
  cursor: pointer;
  border-radius: .4rem;
  font-size: 1.4rem;
  line-height: 1;
  transition: var(--animate-medium);
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.widget-category-filter .filter-btn:hover,
.widget-category-filter .filter-btn.active {
  background: var(--color-main);
  border-color: var(--color-main);
  color: var(--font-color-body-main);
}
/* ---=== Pop Up ===--- */
.cta-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  background: hsla(0 0% 0% / .5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cta-popup .pop-up {
  background: white;
  padding: 3.2rem;
  border-radius: 1.6rem 0 1.6rem 1.6rem;
  box-shadow: var(--shadow);
  width: 48rem;
  position: relative;
  text-align: center;
}
.cta-popup .pop-up .close-popup {
  width: 2.4rem;
  height: 2.4rem;
  position: absolute;
  top: -12px;
  right: -12px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-main);
  border-radius: 50%;
  transition: var(--animate-medium);
  cursor: pointer;
}
.cta-popup .pop-up .close-popup:hover {
  background: var(--color-bg-dark);
}
.cta-popup .pop-up h3 {
  font-size: 3.2rem;
  margin: 0 0 1.6rem;
}
.cta-popup .pop-up .button {
  margin: 1.6rem 0 0;
}
/* ---=== Pop Up ===--- */
.page-details.h6 {
  font-size: 1.6rem;
  line-height: 1;
  margin: 0 0 1.6rem;
  color: var(--font-color-body);
}
.page-details.h6 a {
  color: var(--font-color-body);
  text-decoration: none;
}
.page-details.h6 a:hover {
  color: var(--color-main);
}
/* ---=== Logo Slider ===--- */
#logo-link-slider {
  overflow: hidden;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#logo-link-slider .logo-link-slider-wrapper {
  display: block;
  width: 100%;
  position: relative;
}
#logo-link-slider .logo-link-slider-wrapper ul {
  position: relative;
  left: 0px;
  display: flex;
  justify-content: space-around;
  list-style: none;
}
#logo-link-slider .logo-link-slider-wrapper ul li {
  display: inline-block;
  position: relative;
  margin: 0px auto;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
#logo-link-slider .logo-link-slider-wrapper ul li a img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: 0 linear left;
  -moz-transition: 0 linear left;
  transition: 0 linear left;
  opacity: 0.65;
  width: 100%;
}
.logo_link_static {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.logo_link_static a img {
  width: 200px;
}
/* ----- Contact CTA ----- */
.contact-info-widget{
  position: relative;
}
.contact-info-widget .content{
  display: flex;
  flex-direction: column;
  --contact-gap: 4rem;
  gap: var(--contact-gap);
}
.contact-info-widget .content .contact-list{
  margin-top: 4rem;
}
.contact-info-widget.has-sidebar .content{
  flex-direction: row;
}
.contact-info-widget.has-sidebar .content .contact-info-sidebar,
.contact-info-widget.has-sidebar .content .contact-info-main{
  width: calc(50% - calc(var(--contact-gap) / 2));
}
.contact-info-widget.has-sidebar .content .contact-info-sidebar form .half_width,
.contact-info-widget.has-sidebar .content .contact-info-sidebar form .third_width{
  width: 100%;
}
.contact-info-widget.has-sidebar .content .contact-info-sidebar .img-wrapper{
  width: 100%;
  height: 100%;
}
.contact-info-widget.has-sidebar .content .contact-info-sidebar .map-holder iframe,
.contact-info-widget.has-sidebar .content .contact-info-sidebar .img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-info-widget.has-sidebar .content .contact-info-sidebar .map-holder{
  position: absolute;
  top: 0;
  right: 0;
  width: calc(50% - calc(var(--contact-gap) / 2));
  height: 100%;
}
form .button{
  margin: 0 0 0 auto;
}
@media screen and (max-width: 1024px) {
  .contact-info-widget.has-sidebar .content{
    flex-direction: column;
  }
  .contact-info-widget.has-sidebar .content .contact-info-sidebar,
  .contact-info-widget.has-sidebar .content .contact-info-main{
    width: 100%;
  }
  .contact-info-widget.has-sidebar .content .contact-info-sidebar .map-holder{
    position: initial;
    width: 100%;
    height: 40rem;
  }
}
.sidebar-widget .content{
  display: flex;
  --sidebar-gap: 6.4rem;
  gap: var(--sidebar-gap);
  flex-direction: row-reverse;
}
.sidebar-widget.aside-right .content{
  flex-direction: row;
}
.sidebar-widget .content .sidebar-layout{
  width: 100%;
  max-width: 40rem;
}
.sidebar-widget .content .editable_content{
  width: 100%;
  max-width: calc(100% - 40rem - var(--sidebar-gap));
}
.aside-group{
  margin: 1.6rem 0 0;
}
.aside-group > h4{
  margin: 0 0 .8rem;
}
.aside-group > ul{
  border-top: 1px solid var(--color-border);
  list-style: none;
  margin: 0;
  padding: 0;
}
.aside-group > ul > li{
  margin: 0;
  padding: .8rem;
  border-bottom: 1px solid var(--color-border);
}
.aside-group > ul > li a{
  text-decoration: none;
}
.page-detail-layout {
  align-items: flex-start;
}
.page-detail-layout.layout-image-right {
  flex-direction: row-reverse;
}
.page-detail-gallery__main img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.page-detail-gallery__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex-wrap: nowrap;
  margin-top: 12px;
  padding-bottom: 4px;
}
.page-detail-gallery__thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  padding: 0;
  margin: 0;
  background: none;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease, border-color 0.15s ease;
  overflow: hidden;
}
.page-detail-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-detail-gallery__thumb:hover,
.page-detail-gallery__thumb.is-active {
  opacity: 1;
  border-color: currentColor;
}
.page-detail-image {
  margin: 0;
}
.page-detail-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.page-detail-image figcaption {
  margin-top: 8px;
  font-size: 0.9em;
  opacity: 0.7;
}
@media screen and (max-width: 1024px) {
  .page-detail-layout.layout-image-right {
    flex-direction: column;
  }
}
/* ---=== Widget Card Pagination ===--- */
/* The category filter owns inline display; the pager owns this class, so the two
   compose. !important is what makes that work — the filter's .show() clears inline
   display and would otherwise reveal a card the pager has paged out. */
.is-paged-out {
  display: none !important;
}
.widget-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--flex-gap);
  margin-top: var(--flex-gap);
  width: 100%;
}
.widget-pagination .page-status {
  font-size: var(--font-size-body);
  color: var(--font-color-body);
  font-variant-numeric: tabular-nums;
}
.widget-pagination button {
  background: none;
  border: none;
  cursor: pointer;
  padding: .8rem 1.2rem;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  color: var(--link-color);
  transition: var(--animate-fast);
}
.widget-pagination button:hover:not(:disabled) {
  color: var(--link-color-hover);
}
.widget-pagination button:disabled {
  opacity: .35;
  cursor: default;
}
.dark .widget-pagination .page-status { color: var(--font-color-body-dark); }
.dark .widget-pagination button { color: var(--link-color-dark); }
.main .widget-pagination .page-status { color: var(--font-color-body-main); }
.main .widget-pagination button { color: var(--link-color-main); }

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

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

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

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

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

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

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

/* Payment modal — a <details> element, so open/close needs no JavaScript and the
   modal itself can never be what breaks. (The form inside still needs JS; every
   gateway's card widget does, and it says so in its own <noscript>.)
   The trigger carries the site's own .button class rather than a bespoke style, so a
   Pay button looks like every other CTA and follows the theme. */
/* The trigger is a .button, and its label is composed at RENDER time ("Pay {amount}",
   or any button_label with the amount substituted), so nobody can know its final width.
   Since v5.4.31 every .button grows to fit a wrapped label (button.css), which this rule
   used to do for the trigger alone. It keeps its own balanced vertical padding: a site
   whose theme stores the old top-heavy `2px 40px 0` button padding would otherwise give
   a wrapped Pay label no room above or below it. */
.gw-modal { display: inline-block; max-width: 100%; margin: var(--button-margin); }
.gw-modal > summary.gw-modal__trigger {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  margin: 0;               /* the margin lives on .gw-modal, or it double-applies */
  max-width: 100%;
  white-space: normal;
}
.gw-modal > summary { list-style: none; cursor: pointer; }
.gw-modal > summary::-webkit-details-marker,
.gw-modal > summary::marker { display: none; content: ''; }

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

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

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

/* Native date/time pickers on a dark-themed band. Same shadow-DOM problem as the
   admin: the glyph is drawn from the page's colour-scheme, so on a dark ground it
   renders black on black. `.dark` / `.colour` are the existing per-section context
   classes, so this follows the band the input actually sits in. */
.dark input[type="date"],
.dark input[type="time"],
.dark input[type="datetime-local"],
.colour input[type="date"],
.colour input[type="time"],
.colour input[type="datetime-local"] {
  color-scheme: dark;
}
/* ...except in a form, whose fields keep the white --input-bg in every band: a dark
   scheme drew the clock / calendar glyph white on white. */
.dark .form_holder input[type="date"],
.dark .form_holder input[type="time"],
.dark .form_holder input[type="datetime-local"],
.colour .form_holder input[type="date"],
.colour .form_holder input[type="time"],
.colour .form_holder input[type="datetime-local"] {
  color-scheme: normal;
}
/* Custom Styles */
.waterlines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.waterlines path {
  fill: none;
  stroke: #fff;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.waterlines path:nth-child(2n) {
  stroke-opacity: 0.55;
}
.waterlines path:nth-child(3n) {
  stroke: var(--color-aqua);
  stroke-opacity: 0.75;
}
.animate-hero .banner-container-constrained .waterlines path {
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
  animation: draw-line 2.6s cubic-bezier(0.22, 0.8, 0.26, 1) forwards;
}
@keyframes draw-line { 
  to { 
    stroke-dashoffset: 0; 
  } 
}
.animate-hero .banner-container-constrained .waterlines path:nth-child(2) {
  animation-delay: 0.15s;
}
.animate-hero .banner-container-constrained .waterlines path:nth-child(3) {
  animation-delay: 0.3s;
}
.animate-hero .banner-container-constrained .waterlines path:nth-child(4) {
  animation-delay: 0.45s;
}
.animate-hero .banner-container-constrained .waterlines path:nth-child(5) {
  animation-delay: 0.6s;
}
.animate-hero .banner-container-constrained .waterlines path:nth-child(6) {
  animation-delay: 0.75s;
}
section.content_container.quick-service{
  padding-block: 0;
  overflow: visible;
  position: relative;
  z-index: 1;
}
.quick-service .content{
  display: grid;
  grid-template-columns: 1fr 1.6fr auto;
  gap: 2rem;
  align-items: center;
  background: white;
  border-radius: 2.2rem;
  box-shadow: 0 24px 48px -28px rgba(8, 19, 48, 0.55);
  padding: clamp(2rem, 1.6rem + 1vw, 2.8rem) clamp(2rem, 1.6rem + 1.5vw, 3.6rem);
  border-top: 6px solid var(--color-sun);
  transform: translate(0, -50%);
}
.quick-service .flex{
  grid-column-start: 2;
  grid-row-start: 1;
}
.quick-service .flex .filter-item{
  width: calc(100% / 3 - (1.6rem * 2 / 3));
}
.quick-service .flex .card{
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 1.6rem;
  border-radius: 1.4rem;
  background: var(--color-waterline);
  color: var(--color-navy);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.2;
  border: 1.5px solid transparent;
  transition: var(--animate-medium);
}
.quick-service .flex .card:hover{
  background: white;
  border-color: var(--color-blue);
  color: var(--color-navy);
}
.quick-service .flex .card .img-wrapper{
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-service .flex .card .img-wrapper svg{
  fill: var(--color-blue);
}
.quick-service .flex .card .content-wrapper{
  padding: 0;
}
.quick-service .flex .card .button{
  padding: 0;
  border: none;
  background: none;
  color: var(--color-navy);
}
.quick-service .flex .card .button:hover{
  transform: none;
  box-shadow: none;
}
.quick-service .cf-phone_cta{
  grid-column-start: 3;
}
.quick-service .cf-phone_cta .grid{
  display: flex;
  align-items: center;
}
.quick-service .cf-phone_cta .grid p{margin: 0;font-size: 1.4rem;}
.quick-service .cf-phone_cta .grid a{
  display: block;
  font-size: 2rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-navy);
}
.quick-service .cf-phone_cta .grid a:hover{
  color: var(--color-blue);
}
.quick-service .cf-phone_cta .grid i{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-aqua-100);
  color: var(--color-blue);
  font-size: 2.4rem;
}
.intro-strip h1{
  max-width: 16ch;
}
.after::after{
  content: "";
  display: block;
  width: 56px;
  height: 5px;
  border-radius: 3px;
  background: var(--color-blue);
  margin-top: 0.45em;
}
.intro-strip .grid .grid{
  border-top: 1px solid var(--color-border);
  margin-top: 2.4rem;
  padding-top: 2.4rem;
}
.intro-strip .grid .grid h3{
  margin: 0 0 1.2rem;
}
.intro-strip .grid .grid p{
  font-size: 1.4rem;
  margin: 0;
}
.products-cta .flex{
  margin: 4rem 0 0;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.products-cta .flex .card{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  min-height: 300px;
  border-radius: 3.2rem;
  text-decoration: none;
  color: white;
  isolation: isolate;
}
.products-cta .flex .card:nth-child(1){
  grid-row: span 2;
  min-height: 440px;
}
.products-cta .flex .card .img-wrapper{
  position: absolute;
  inset: 0;
  z-index: -1;
}
.products-cta .flex .card .img-wrapper::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 19, 48, .82) 0%, rgba(8, 19, 48, .2) 55%, rgba(8, 19, 48, 0) 75%);
}
.products-cta .flex .card .img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.26, 1);
}
.products-cta .flex .card:hover .img-wrapper img{
  transform: scale(1.03);
}
.products-cta .flex .card .content-wrapper{
  padding: clamp(2.4rem, 2rem + 1vw, 3.6rem);
  position: relative;
}
.products-cta .flex .card:nth-child(1) .content-wrapper h3{
  color: white;
}
.products-cta .flex .card:nth-child(1) .content-wrapper p{
  color: #dbe4f4;
}
.products-cta .flex .card .content-wrapper .button{
  border: none;
  background: transparent;
  color: var(--color-navy);
  padding: 0;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: 1.4rem;
}
.products-cta .flex .card .content-wrapper .button:hover{
  border: none;
  background: transparent;
  color: var(--color-navy);
  transform: none;
  box-shadow: none;
}
.products-cta .flex .card .content-wrapper .button::before{
  --fa: "\f061";
  --fa-style: 300;
  --_fa-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Pro"));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--_fa-family);
  font-feature-settings: normal;
  font-style: normal;
  font-synthesis: none;
  font-variant: normal;
  font-weight: 400;
  text-align: center;
  text-rendering: auto;
  content: var(--fa) / "";
  font-size: 1.8rem;
  margin: 0 .8rem 0 0;
  line-height: 1;
  transition: var(--animate-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-blue);
  color: white;
  transition: var(--animate-medium);
}
.products-cta .flex .card:nth-child(1) .content-wrapper .button:hover::before{
  margin-left: .8rem;
  background: white;
  color: var(--color-navy);
}
.products-cta .flex .card:nth-child(1) .content-wrapper .button{
  color: white;
}
.products-cta .flex .card:nth-child(2),
.products-cta .flex .card:nth-child(3){
  color: var(--color-navy);
  background: var(--color-aqua-100);
  flex-direction: row;
  align-items: stretch;
}
.products-cta .flex .card:nth-child(3){
  background: #efe6dc;
}
.products-cta .flex .card .content-wrapper p{
  max-width: 48rem;
}
.products-cta .flex .card:nth-child(2) .img-wrapper,
.products-cta .flex .card:nth-child(3) .img-wrapper{
  position: relative;
  z-index: auto;
  flex: 1 1 45%;
  display: grid;
  place-items: center;
  padding: 2rem;
}
.products-cta .flex .card:nth-child(2) .img-wrapper::after,
.products-cta .flex .card:nth-child(3) .img-wrapper::after{
  display: none;
}
.products-cta .flex .card:nth-child(2) .img-wrapper img,
.products-cta .flex .card:nth-child(3) .img-wrapper img{
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.products-cta .flex .card:nth-child(2) .content-wrapper,
.products-cta .flex .card:nth-child(3) .content-wrapper{
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.products-cta .flex .card:nth-child(2) .content-wrapper .button,
.products-cta .flex .card:nth-child(3) .content-wrapper .button{
  text-align: left;
}
.products-cta .flex .card:nth-child(2) .content-wrapper .button:hover::before,
.products-cta .flex .card:nth-child(3) .content-wrapper .button:hover::before{
  background: var(--color-sun);
  color: var(--color-navy);
  margin-left: .8rem;
}
.wave-top,
.wave-bottom{
  position: relative;
}
.wave-top::before, .wave-bottom::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 48px;
  pointer-events: none;
  background: var(--color-aqua-100);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V30C240 6 480 0 720 14s480 34 720 10v24z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V30C240 6 480 0 720 14s480 34 720 10v24z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.wave-top::before {
  top: -47px;
}
.wave-bottom::after {
  bottom: -47px;
  transform: scaleY(-1);
  z-index: 1;
}
section.content_container.services-cta{
  background: var(--color-aqua-100);
}
section.content_container.services-cta .content{
  display: flex;
  gap: 8rem;
  align-items: flex-start;
}
section.content_container.services-cta .editable_content,
section.content_container.services-cta .flex{
  width: calc(50% - 4rem);
}
section.content_container.services-cta .flex{
  background: white;
  padding: 2.4rem 1.6rem;
  border-radius: 3.2rem;
  box-shadow: 0 10px 30px -22px rgba(8, 19, 48, 0.5);
  gap: 2.4rem;
}
section.content_container.services-cta .flex .card{
  flex-direction: row;
  display: flex;
  align-items: flex-start;
  padding: 0 0 2.4rem;
  border-bottom: 1px solid var(--color-border);
  background-color: none;
  box-shadow: none;
  margin: 0;
  border-radius: 0;
  text-align: left;
  gap: 1.6rem
}
section.content_container.services-cta .flex .card:last-child{
  border: none;
  padding: 0;
}
section.content_container.services-cta .flex .card .img-wrapper{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-aqua-100);
  position: initial;
  transform: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
section.content_container.services-cta .flex .card .img-wrapper svg{
  fill: var(--color-blue);
  width: 26px;
  height: auto;
}
section.content_container.services-cta .flex .card .content-wrapper{
  padding: 0;
  text-align: left;
  width: calc(100% - 52px - 16px);
}
section.content_container.services-cta .flex .card .content-wrapper .btn-wrapper{
  margin: 0;
  min-height: 0;
}
section.content_container.services-cta .flex .card .content-wrapper .button{
  height: auto;
  padding: 0;
  border-radius: 0;
  color: var(--color-blue);
  background: none;
  border: none;
  display: flex;
  gap: .8rem;
  position: relative;
  min-height: 0;
  margin: 1.6rem 0 0;
}
section.content_container.services-cta .flex .card .content-wrapper .button:hover{
  background: none;
  color: var(--color-navy);
  border: none;
  transform: none;
  box-shadow: none;
}
section.content_container.services-cta .flex .card .content-wrapper .button::after{
  --fa: "\f061";
  --fa-style: 300;
  --_fa-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Pro"));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--_fa-family);
  font-feature-settings: normal;
  font-style: normal;
  font-synthesis: none;
  font-variant: normal;
  font-weight: 400;
  text-align: center;
  text-rendering: auto;
  content: var(--fa) / "";
  font-size: 1.4rem;
  margin: 0 .8rem 0 0;
  line-height: 1;
  transition: var(--animate-medium);
  color: var(--color-blue);
}
section.content_container.services-cta .flex .card .content-wrapper .button:hover::after{
  color: var(--color-navy);
  transform: translate(.4rem , 0);
}
.card .anchor{
  display: none;
}
section.content_container.why-rin .content{
  display: grid;
  gap: 1.6rem 8rem;
  grid-template-columns: 0.85fr 1.15fr;
  grid-template-rows: auto auto;
}
section.content_container.why-rin .content .editable_content{
  grid-column-start: 2;
  grid-row-start: 1;
}
section.content_container.why-rin .content .editable_content::after{
  display: none;
}
section.content_container.why-rin .content .flex{
  grid-column-start: 2;
  grid-row-start: 2;
}
section.content_container.why-rin .content .cf-strip_image{
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 3;
  overflow: hidden;
  border-radius: 3.2rem;
}
section.content_container.why-rin .content .cf-strip_image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.content_container.why-rin .content .flex .card{
  padding: 0;
  display: flex;
  gap: 1.6rem;
  align-items: flex-start;
}
section.content_container.why-rin .content .flex .card .img-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-aqua-100);
}
section.content_container.why-rin .content .flex .card .img-wrapper svg{
  width: 2.6rem;
  height: auto;
  fill: var(--color-blue);
}
section.content_container.why-rin .content .flex .card .content-wrapper{
  padding: 0;
  width: calc(100% - 1.6rem - 5.2rem);
}
section.content_container.why-rin .content .flex .card h3{
  font-size: 1.8rem;
}
section.content_container.why-rin .content .flex .card p{
  font-size: 1.4rem;
  margin: 0;
}
.rev-cta .editable_content,
.brands-strip .editable_content{
  max-width: 56rem;
  margin: 0 0 4rem;
}
.brands-strip .card{
  background: white;
  border: 1px solid var(--color-border);
  padding: 1.6rem;
  border-radius: 1.6rem;
  text-align: center;
  transition: var(--animate-medium);
}
.brands-strip .card:hover{
  border-color: var(--color-navy);
}
.brands-strip .card .img-wrapper{
  max-width: 14rem;
  margin: 0 auto;
  filter: grayscale(1);
  transition: var(--animate-medium);
}
.brands-strip .card:hover .img-wrapper{
  filter: grayscale(0);
}
.brands-strip .card h3{
  margin: 0;
  color: var(--font-color-body);
  line-height: var(--font-lh-body);
  letter-spacing: 0;
  font-weight: var(--font-weight-body);
  text-transform: var(--font-transform-body);
  font-size: 1.4rem;
  text-wrap: pretty;
}
section.content_container.contact-cta{
  background: var(--color-bg);
}
.contact-cta .content{
  background: var(--color-navy);
  border-radius: 3.2rem;
  padding: clamp(4rem, 2.4rem + 4vw, 8rem);
  isolation: isolate;
  position: relative;
  overflow: hidden;
}
.contact-cta .content::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/assets/images/layout/graphic-waterlines.svg) right center no-repeat;
  background-size: cover;
    opacity: 0.55;
    z-index: 0;
}
.contact-cta .content .editable_content{
  max-width: 56rem;
  position: relative;
  z-index: 2;
}
.contact-cta .content .btn-wrapper{
  position: relative;
  z-index: 2;
}
p.lead{
  font-size: 2rem;
}
footer.wave-top::before{
  background-color: var(--color-ink);
}
.inner-intro{
  position: relative;
  overflow: hidden;
}
.inner-intro::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/assets/images/layout/graphic-waterlines.svg) right center no-repeat;
  background-size: cover;
  opacity: 0.55;
  z-index: 0;
}
.inner-intro .content{
  position: relative;
  z-index: 3;
}
.inner-intro.hot-tub-intro .img-wrapper{
  background: radial-gradient(circle at 50% 55%, var(--color-aqua-100), var(--color-aqua) 75%);
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inner-intro.hot-tub-intro .img-wrapper img{
  position: relative;
  inset: auto;
  width: min(82%, 520px);
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.inner-intro.fitness-intro .img-wrapper{
  background: radial-gradient(circle at 50% 55%, #fbf6f0, #eadccd 75%);
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inner-intro.fitness-intro .img-wrapper img{
  position: relative;
  inset: auto;
  width: min(82%, 520px);
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.product-section .editable_content{
  max-width: 56rem;
  margin: 0 0 4rem;
}
.product-section .card{
  border: 1px solid var(--color-border);
  border-radius: 3.2rem;
  overflow: hidden;
  transition: var(--animate-medium);
}
.product-section .card:hover{
  transform: translate(0 , -0.8rem);
  box-shadow: 0 10px 30px -22px rgba(8, 19, 48, 0.5);
}
.product-section .card .content-wrapper{
  padding: 3.2rem;
  border-top: 1px solid var(--color-border);
}
.product-section .card .content-wrapper .button{
  height: auto;
  padding: 0;
  border-radius: 0;
  color: var(--color-blue);
  background: none;
  border: none;
  display: flex;
  gap: .8rem;
  position: relative;
  min-height: 0;
  margin: 1.6rem 0 0;
}
.product-section .card .content-wrapper .button:hover{
  background: none;
  color: var(--color-navy);
  border: none;
  transform: none;
  box-shadow: none;
}
.product-section .card .content-wrapper .button::after{
  --fa: "\f061";
  --fa-style: 300;
  --_fa-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Pro"));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--_fa-family);
  font-feature-settings: normal;
  font-style: normal;
  font-synthesis: none;
  font-variant: normal;
  font-weight: 400;
  text-align: center;
  text-rendering: auto;
  content: var(--fa) / "";
  font-size: 1.4rem;
  margin: 0 .8rem 0 0;
  line-height: 1;
  transition: var(--animate-medium);
  color: var(--color-blue);
}
.product-section .card .content-wrapper .button:hover::after{
  color: var(--color-navy);
  transform: translate(.4rem , 0);
}
.card .btn-wrapper{
  margin: 0;
}
section.content_container.more-options{
  padding-top: 0;
}
section.content_container.more-options .content{
  display: flex;
  align-items: flex-end;
  gap: 8rem;
  padding: 4.8rem;
  border-radius: 3.2rem;
  background: var(--color-aqua-100);
  border: 1px solid var(--color-aqua);
}
section.content_container.more-options .editable_content{
  width: calc(100% - 8rem - 32rem);
}
section.content_container.pool-features,
section.content_container.install-strip{
  background: var(--color-aqua-100);
}
section.content_container.pool-features .editable_content{
  margin: 0 0 4rem;
  max-width: 56rem;
}
section.content_container.pool-features .card{
  padding: 2.4rem;
  border-radius: 1.6rem;
  border: 1px solid var(--color-aqua);
  background: white;
}
section.content_container.pool-features .card h3{
  font-size: 2rem;
}
.wellness-section .content .flex .card .img-wrapper{
  padding: 1.5rem;
  background: radial-gradient(circle at 50% 60%, white, var(--color-aqua-100) 72%);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wellness-section .content .flex .card .img-wrapper img{
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
section.content_container.nl-strip{
  background: var(--color-aqua-100);
}
section.content_container.nl-strip .editable_content figure{
  padding: 1.6rem;
  border-radius: .8rem;
  background: white;
  border: 1px solid var(--color-aqua);
  margin: 0 0 2.4rem;
}
.widget-category-filter{
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  align-items: flex-end;
  margin-bottom: 2.8rem;
  padding: 2.4rem;
  background: var(--color-waterline);
  border-radius: 1.6rem;
}
.widget-category-filter .filter-btn{
  min-height: 40px;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-line);
  background: white;
  font-size: 1.6rem;
  color: var(--color-navy);
  line-height: 1.2;
}
.widget-category-filter .filter-btn:hover{
  border-color: var(--color-blue);
  background: white;
  color: var(--color-navy);
}
.widget-category-filter .filter-btn.active{
  border-color: var(--color-navy);
  background: var(--color-navy);
  color: white;
}
.custom-fields-list{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 0;
  width: 100%;
}
/* The icon beside a small caption (the field's label, e.g. "Jet Count") above the value,
   so a bare "41" or "5'" says what it measures. The framework renders each li as
   <strong>Label</strong><p>value</p>; Show Label does not apply to li fields. */
.custom-fields-list li{
  margin: 0;
  padding: 0;
  width: calc(50% - .4rem);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .4rem;
  align-items: start;
}
.custom-fields-list li::before{
  grid-row: 1 / span 2;
  align-self: center;
  transform: none;
}
.custom-fields-list li strong{
  grid-column: 2;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-ink-soft);
}
.custom-fields-list li p{
  grid-column: 2;
}
.custom-fields-list > *::before{
  --fa: "\2b";
  --fa-style: 300;
  --_fa-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Pro"));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--_fa-family);
  font-feature-settings: normal;
  font-style: normal;
  font-synthesis: none;
  font-variant: normal;
  font-weight: 400;
  text-align: center;
  text-rendering: auto;
  content: var(--fa) / "";
  font-size: 1.4rem;
  margin: 0 .8rem 0 0;
  line-height: 1;
  transition: var(--animate-fast);
  transform: translate(0, 7px);
  color: var(--color-blue);
}
.cf-capacity::before,
.cf-seating_capacity::before{
  --fa: "\f500";
}
.cf-dimensions::before{
  --fa: "\f545";
}
.cf-hydrotherapy_jets::before,
.cf-jet_count::before{
  --fa: "\f72e";
}
.cf-swim_jets::before{
  --fa: "\f5c4"
}
.cf-electrical::before{
  --fa: "\f1e6";
}
.cf-cedar_construction::before{
  --fa: "\f6b2"
}
.cf-heater::before{
  --fa: "\f06d"
}
.cf-water_capacity::before{
  --fa: "\f775"
}
.cf-temperature_range::before{
  --fa: "\f2c8"
}
.custom-fields-list li.cf-swim_jets,
.custom-fields-list li.cf-cedar_construction,
.custom-fields-list li.cf-heater{
  width: 100%;
}
.products-list .flex .card{
  background: white;
  border: 1px solid var(--color-line);
  border-radius: 1.6rem;
  overflow: hidden;
  transition: var(--animate-medium);
}
.products-list .flex .card .img-wrapper{
  border-bottom: 1px solid var(--color-line);
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-waterline);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.6rem;
}
.products-list.sauna-list .flex .card .img-wrapper{
  background: radial-gradient(circle at 50% 55%, #fbf6f0, #eadccd 75%);
}
.products-list .flex .card .img-wrapper img {
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.products-list .flex .card .content-wrapper{
  padding: 2.4rem;
  display: flex;
  gap: 0 .8rem;
  flex-wrap: wrap;
}
.flex .card h3{
  width: 100%;
}
.flex .card .cf-list_price{
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 1.6rem 0;
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--color-navy);
  line-height: 1.2;
  width: 100%;
}
.flex .card .cf-list_price .cf-label{
  display: block;
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: var(--color-ink-soft);
  font-weight: 400;
}
.products-list .flex .card .btn-wrapper .button{
  background: none;
  border-color: var(--color-navy);
}
.products-list .flex .card .button:hover{
  background: var(--color-navy);
  color: white;
}
.product-page .content .img-wrapper{
  padding: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-waterline);
}
.product-page.sauna-page .content .img-wrapper{
  background: radial-gradient(circle at 50% 55%, #fbf6f0, #eadccd 75%);
}
.product-page .content .img-wrapper img{
  mix-blend-mode: multiply;
  max-height: 380px;
  object-fit: contain;
}
.product-page .content .content-wrapper{
  width: calc(100% - 60rem);
}
.product-page .content .content-wrapper h1.cf-title{
  font-size: var(--font-size-h2);
}
.product-page .content .content-wrapper .custom-fields-list{
  gap: 0;
  border-bottom: 1px solid var(--color-border);
}
.product-page .content .content-wrapper .custom-fields-list li{
  width: 100%;
  border-top: 1px solid var(--color-border);
  padding: 1.2rem;
}
.product-page .content .content-wrapper .custom-fields-list li p{
  margin: 0;
}
.product-page .content .content-wrapper .cf-list_price{
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 2.4rem 0;
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--color-navy);
  line-height: 1.2;
  width: 100%;
}
.product-page .content .content-wrapper .cf-list_price span.cf-label{
  display: block;
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: var(--color-ink-soft);
  font-weight: 400;
}
.products-list .content .editable_content{
  margin: 0 0 4rem;
}
.products-list .content .editable_content .grid .col-6:nth-child(2){
  align-content: end;
}
.products-list .content .editable_content .grid .col-6 > *:last-child{
  margin: 0;
}
.meet-jenny .content .editable_content .grid .col-6:nth-child(2){
  background: var(--color-aqua-100);
  padding: 3.2rem;
  border-radius: 2.4rem;
}
.meet-jenny .button.ghost-btn{
  background: transparent;
  border-color: var(--color-navy);
}
.meet-jenny .button:hover,
.meet-jenny .button.ghost-btn:hover{
  background: var(--color-navy);
  color: white;
  border-color: var(--color-navy);
}
section.content_container.pool-features.service-list .card{
  display: flex;
  gap: 1.6rem;
}
section.content_container.pool-features.service-list .card .img-wrapper{
  width: 5.2rem;
  height: 5.2rem;
  background: var(--color-aqua-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
section.content_container.pool-features.service-list .card .img-wrapper svg{
  fill: var(--color-blue);
  width: 2.6rem;
  height: auto;
}
section.content_container.pool-features.service-list .card .content-wrapper{
  width: calc(100% - 5.2rem - 1.6rem);
}
section.content_container.equip-list{
  background: var(--color-aqua-100);
  display: flex;
  align-items: center;
  gap: 4.8rem;
  flex-direction: column;
}
section.content_container.equip-list #equipment-categories{
  display: none;
}
section.content_container.equip-list .strip-list{
  width: 100%;
  background: white !important;
  border-radius: 3.2rem;
  overflow: hidden;
  box-shadow: 0 10px 30px -22px rgba(8, 19, 48, 0.5);
}
section.content_container.equip-list .strip-list .editable_content .editable_content{
  width: 100%;
}
.animated-box-list .card{
  border-radius: 2.4rem;
}
.animated-box-list .card::after{
  opacity: 1;
  height: 200%;
  background: linear-gradient(to bottom, transparent, hsla(223 65% 18% / .72) 40%,  hsla(223 65% 18% / 1) 50%, hsla(223 65% 18% / 1) 100%);
}
.animated-box-list .card:hover::after{
  top: -100%;
}
.animated-box-list .card .content-wrapper p{
  font-size: 1.4rem;
}
.animated-box-list .card:hover .content-wrapper p{
  height: calc(1.4rem * 1.65 * 3);
}
.animated-box-list .card .content-wrapper .button{
  padding: 0;
  border-radius: 0;
  color: white;
  background: none;
  border: none;
  display: flex;
  gap: .8rem;
  position: relative;
  min-height: 0;
  height: 0;
}
.animated-box-list .card:hover .content-wrapper .button{
  height: 2rem;
}
.animated-box-list .card .content-wrapper .button:hover{
  background: none;
  color: hsla(0 0% 100% / .72);
  border: none;
  transform: none;
  box-shadow: none;
}
.animated-box-list .card .content-wrapper .button::after{--fa: "\f061";
  --fa-style: 300;
  --_fa-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Pro"));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--_fa-family);
  font-feature-settings: normal;
  font-style: normal;
  font-synthesis: none;
  font-variant: normal;
  font-weight: 400;
  text-align: center;
  text-rendering: auto;
  content: var(--fa) / "";
  font-size: 1.4rem;
  margin: 0 .8rem 0 0;
  line-height: 1;
  transition: var(--animate-medium);
  color: white;
}
.animated-box-list .card .content-wrapper .button:hover::after {
  color: hsla(0 0% 100% / .72);
  transform: translate(.4rem, 0);
}
.page-detail-layout{
  gap: 8rem;
}
.page-detail-layout .page-detail-content,
.page-detail-layout aside.page-detail-gallery{
  width: calc(50% - 4rem);
}
.page-detail-layout aside.page-detail-gallery{
  padding: 3.2rem;
  border-radius: 2.4rem;
  background: var(--color-aqua-100);
  border: 1px solid var(--color-aqua);
}
.page-detail-gallery__thumb:hover, .page-detail-gallery__thumb.is-active{
  border-color: var(--color-blue);
}
/* Gallery Left takes Image Float's geometry: a 52rem image column, the 8rem gap, the
   copy in the rest (Image Float's calc(100% - 60rem)), centred vertically. */
.page-detail-layout{
  flex-wrap: nowrap;
  align-items: center;
}
.page-detail-layout aside.page-detail-gallery{
  flex: 0 1 52rem;
  min-width: 0;
}
.page-detail-layout .page-detail-content{
  flex: 1 1 0%;
  min-width: 0;
}
.page-detail-gallery__main img{
  aspect-ratio: auto;
}
/* Product pages: the gallery box looks like Image Float's image box. The copy column is
   reset because `.product-page .content .content-wrapper` (calc(100% - 60rem), written for
   Image Float) also matches it here, inside a column that is only part of the width,
   and collapsed it to one word per line. */
.product-page .page-detail-layout aside.page-detail-gallery{
  background: var(--color-waterline);
  border: 0;
  border-radius: 3.2rem;
}
.product-page.sauna-page .page-detail-layout aside.page-detail-gallery{
  background: radial-gradient(circle at 50% 55%, #fbf6f0, #eadccd 75%);
}
.product-page .page-detail-gallery__main{
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-page .page-detail-gallery__main img{
  width: auto;
  max-width: 100%;
  max-height: 380px;
  object-fit: contain;
  border-radius: 0;
  mix-blend-mode: multiply;
}
/* On the button, not its image: the thumb's opacity isolates the image, so a blend set on
   the image never reaches the box behind it and the white shows. */
.product-page .page-detail-gallery__thumb{
  mix-blend-mode: multiply;
}
.product-page .page-detail-layout .page-detail-content .content-wrapper{
  width: 100%;
}
@media screen and (max-width: 1024px){
  .page-detail-layout{
    flex-direction: column;
    align-items: center;
  }
  .page-detail-layout aside.page-detail-gallery{
    flex: none;
    width: 100%;
    max-width: 52rem;
  }
  .page-detail-layout .page-detail-content{
    flex: none;
    width: 100%;
  }
}
.contact-info-widget.has-sidebar{
  padding-bottom: 0;
}
.contact-info-widget.has-sidebar .content{
  position: relative;
}
.contact-info-widget.has-sidebar .content .contact-info-sidebar{
  border-radius: 3.2rem;
  overflow: hidden;
}
.contact-info-widget.has-sidebar .content .contact-info-main{
  border-radius: 3.2rem;
  overflow: hidden;
  background: var(--color-navy);
  padding: 3.2rem;
}
.contact-info-widget.has-sidebar .content .contact-info-sidebar .map-holder{
  position: initial;
  width: 100%;
}
.cf-department_emails ul,
.contact-info-widget.has-sidebar ul.contact-list{
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
}
.cf-department_emails ul li,
.contact-info-widget.has-sidebar ul.contact-list > li{
  display: flex;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
}
.cf-department_emails ul li,
.contact-info-widget.has-sidebar ul.contact-list pre,
.contact-info-widget.has-sidebar ul.contact-list li{
  color: white;
  font-weight: 700;
  font-size: 2rem;
}
.cf-department_emails ul li i,
.contact-info-widget.has-sidebar ul.contact-list li i{
  display: block;
  --fa-style: 300;
  color: var(--color-aqua);
  font-size: 2.4rem;
  width: 2.4rem;
}
.cf-department_emails ul li > span,
.contact-info-widget.has-sidebar ul.contact-list li > span{
  width: calc(100% - 4rem);
}
.cf-department_emails ul li strong,
.contact-info-widget.has-sidebar ul.contact-list li span strong{
  font-weight: 400;    
  color: #d3def2;
  font-size: 1.4rem;
  margin: 0 0 .4rem;
  display: block;
}
.cf-department_emails ul li a,
.contact-info-widget.has-sidebar ul.contact-list li a{
  color: white;
  text-decoration: none;
}
.cf-department_emails ul li a:hover,
.contact-info-widget.has-sidebar ul.contact-list li a:hover{
  color: var(--color-aqua);
}
.contact-info-widget.has-sidebar .cf-department_emails{
  margin: 0 0 1.6rem;
  padding: 0 0 1.6rem;
  border-bottom: 1px solid hsla(0 0% 100% / .08);
}
.contact-info-widget.has-sidebar .social_media ul li a{
  background: none;
  border: 1px solid hsla(0 0% 100% / .08);
  color: white;
  font-size: 1.4rem;
}
.contact-info-widget.has-sidebar .social_media ul li a:hover{
  background: white;
  border-color: white;
  color: var(--color-navy);
}
.contact-info-widget.has-sidebar .social_media ul li a i{
  font-size: 1.4rem;
}
section.content_container.quote-strip{
  background: var(--color-aqua-100);
}
section.content_container.quote-strip .form-block-inner{
  display: flex;
  gap: 8rem;
}
section.content_container.quote-strip .content .editable_content{
  width: calc(100% - 8rem - 64rem);
}
section.content_container.quote-strip .content .form_holder{
  width: 64rem;
  background: white;
  padding: 3.2rem;
  border-radius: 2.4rem;
  box-shadow: 0 10px 30px -22px rgba(8, 19, 48, 0.5);
}
form .form-terms{
  text-align: right;
}
form .form-radio-group, form .form-checkbox-group{
  flex-direction: row;
  flex-wrap: wrap;
}
section.content_container.wave-after{
  padding-bottom: 20rem;
}
section.content_container.wave-before{
  padding-top: 20rem;
}
.error-page{
  min-height: calc(100svh - 92px - 38px - 269px);
  display: flex;
  align-items: center;
  justify-content: center;
}
footer.wave-top::before,
footer{
  background-color: var(--color-navy-950);
}
footer .content p{
  font-size: 1.4rem;
  color: #b9c6e0;
}
footer .content .brand-col{
  max-width: 24rem;
}
footer .content .brand-col .logo{
  width: 170px;
  background: white;
  padding: 1rem 1.4rem;
  border-radius:  1.2rem;
  margin-bottom: 2rem;
}
footer .content .brand-col .social_media ul li a{
    background: none;
    border: 1px solid hsla(0 0% 100% / .08);
    color: white;
    font-size: 1.4rem;
    width: 3.2rem;
    height: 3.2rem;
}
footer .content .brand-col .social_media ul li a:hover{
  border-color: white;
  background: white;
  color: var(--color-navy);
}
footer .content .brand-col .social_media ul li a i{
    font-size: 1.4rem;
}
footer .content .service-col{
  background: var(--color-navy);
  border-radius: 1.2rem;
  padding: 2rem;
  max-width: 28rem;
}
footer .content .service-col .btn-wrapper{
  margin: 1.2rem 0 0;
  gap: 1.2rem;
}
footer .content .service-col .btn-wrapper .button{
  width: 100%;
  text-align: center;
  color: var(--color-navy);
  font-size: 1.4rem;
}
footer .content .service-col .btn-wrapper .button.ghost-btn{
  border: 1px solid white;
  color: white;
  background: transparent;
}
footer .content .service-col .btn-wrapper .button.ghost-btn:hover,
footer .content .service-col .btn-wrapper .button:hover{
  background: white;
  color: var(--color-ink);
  border-color: white;
}
footer .content .h4{
  font-weight: 500;
}
footer p.signature a, footer .footer-policies a,
footer .content ul li,
footer .content a{
  color: #b9c6e0;
}
footer .content ul li strong{
  display: block;
}footer p.signature{
  font-size: 1.2rem;
}
footer p.signature a:hover, footer .footer-policies a:hover,
footer .content a:hover{
  color: var(--color-sun);
}
footer .content .footer-contact ul{
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
footer .content .sitemap {
  width: 38rem;
}

/* ---=== Responsive: custom sections ===---
   The custom rules above are desktop layouts (side-by-side grids, fixed rem widths) that
   out-specify the framework's own stacking rules, so below 1024px they squeezed content
   into narrow columns and pushed the page wider than a phone screen. */
/* The Explore cards slide in from 4.8rem to the right (main.js "right" reveal); while
   they travel the page was wider than the screen and could be dragged sideways. */
section.content_container.products-cta{
  overflow-x: clip;
}
/* Eight nav items plus the Get A Quote button don't fit on one line until ~1280px:
   between 1024 and 1279 every label wrapped to two lines. Keep the mobile header
   (burger menu) up to 1279px. */
@media screen and (min-width: 1024px) and (max-width: 1279px){
  .full_header{
    display: none;
  }
  .mobile_header{
    display: inherit;
  }
}
@media screen and (max-width: 1024px){
  /* Inner-page heroes: the framework stacks the photo above the copy with a 32rem top
     pad, but section.content_container's padding out-specifies .img-fade, so the copy
     ran over the photo. */
  section.content_container.img-fade{
    padding-top: 32rem;
  }
  /* Stacked, the card is too tall to lift half of it over the hero, where it covered
     the hero's buttons; it sits below the hero instead. */
  section.content_container.quick-service{
    padding-top: 4rem;
  }
  .quick-service .content{
    grid-template-columns: 1fr;
    transform: none;
  }
  .quick-service .flex,
  .quick-service .cf-phone_cta{
    grid-column-start: auto;
    grid-row-start: auto;
  }
  .products-cta .flex{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .products-cta .flex .card:nth-child(1){
    grid-row: auto;
    min-height: 400px;
  }
  section.content_container.services-cta .content{
    flex-direction: column;
    gap: 4rem;
  }
  section.content_container.services-cta .editable_content,
  section.content_container.services-cta .flex{
    width: 100%;
  }
  section.content_container.why-rin .content{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 4rem;
  }
  section.content_container.why-rin .content .editable_content,
  section.content_container.why-rin .content .cf-strip_image,
  section.content_container.why-rin .content .flex{
    grid-column: auto;
    grid-row: auto;
  }
  section.content_container.why-rin .content .cf-strip_image{
    height: 36rem;
  }
  section.content_container.more-options .content{
    flex-direction: column;
    align-items: flex-start;
    gap: 3.2rem;
  }
  section.content_container.more-options .editable_content{
    width: 100%;
  }
  .product-page .content .content-wrapper{
    width: 100%;
  }
  .page-detail-layout{
    gap: 4rem;
  }
  .page-detail-layout .page-detail-content,
  .page-detail-layout aside.page-detail-gallery{
    width: 100%;
  }
  section.content_container.quote-strip .form-block-inner{
    flex-direction: column;
    gap: 4rem;
  }
  section.content_container.quote-strip .content .editable_content,
  section.content_container.quote-strip .content .form_holder{
    width: 100%;
  }
  footer .content .sitemap{
    width: 100%;
    max-width: 38rem;
  }
}
@media screen and (max-width: 768px){
  section.content_container.wave-after{
    padding-bottom: 12rem;
  }
  section.content_container.wave-before{
    padding-top: 12rem;
  }
}
@media screen and (max-width: 560px){
  .quick-service .flex .filter-item{
    width: 100%;
  }
  .products-cta .flex .card:nth-child(2),
  .products-cta .flex .card:nth-child(3){
    flex-direction: column;
  }
  .products-cta .flex .card:nth-child(2) .img-wrapper,
  .products-cta .flex .card:nth-child(3) .img-wrapper{
    flex: none;
  }
  .products-cta .flex .card:nth-child(2) .img-wrapper img,
  .products-cta .flex .card:nth-child(3) .img-wrapper img{
    max-height: 200px;
  }
  section.content_container.more-options .content,
  section.content_container.quote-strip .content .form_holder,
  .contact-info-widget.has-sidebar .content .contact-info-main,
  .page-detail-layout aside.page-detail-gallery{
    padding: 2.4rem;
  }
  .product-section .card .content-wrapper{
    padding: 2.4rem;
  }
}

/* ---=== Motion: page-load + scroll reveal ===---
   Items animate one by one, each with an entrance that suits it, rather than whole
   sections fading in. Everything uses keyframe animations on the individual
   translate / scale / rotate properties with fill-mode `backwards`, so once an
   entrance finishes nothing is left behind: the existing hover `transform`s and
   `transition`s work exactly as before.
   - Page load (CSS only): header, home hero, quick-service bar, inner-page intro.
   - Scroll (main.js "Scroll reveal"): tags items below the fold with .rv + data-rv,
     then adds .rv-in as each one enters. No JS means no .rv, so nothing is hidden.
   All of it is off under prefers-reduced-motion. */
:root{
  --rv-ease: cubic-bezier(0.22, 0.8, 0.26, 1);
  --rv-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --rv-dur: .9s;
}
@keyframes rv-up     { from { opacity: 0; translate: 0 3.2rem; } }
@keyframes rv-down   { from { opacity: 0; translate: 0 -1.6rem; } }
@keyframes rv-left   { from { opacity: 0; translate: -4.8rem 0; } }
@keyframes rv-right  { from { opacity: 0; translate: 4.8rem 0; } }
@keyframes rv-fade   { from { opacity: 0; } }
@keyframes rv-zoom   { from { opacity: 0; scale: .9; } }
@keyframes rv-rise   { from { opacity: 0; translate: 0 4.8rem; scale: .97; } }
@keyframes rv-focus  { from { opacity: 0; translate: 0 1.6rem; filter: blur(10px); } }
@keyframes rv-tilt   { from { opacity: 0; translate: 0 4rem; rotate: var(--rv-rot, -2deg); } }
@keyframes rv-pop    { 0% { opacity: 0; scale: .4; } 60% { opacity: 1; scale: 1.1; } }
@keyframes rv-float  { from { opacity: 0; translate: 0 2.4rem; rotate: -4deg; } }
@keyframes rv-settle { from { scale: 1.18; } }
@keyframes rv-bar    { from { scale: 0 1; } }
@keyframes rv-wipe-l { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes rv-wipe-r { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes rv-drift  { from { opacity: 0; translate: 6rem 0; } }
@keyframes rv-parallax { from { translate: 0 -5%; } to { translate: 0 5%; } }

/* --- Scroll reveal --- */
.rv:not(.rv-in){
  opacity: 0;
}
.rv-in{
  animation: var(--rv-name, rv-up) var(--rv-dur) var(--rv-ease) var(--rv-delay, 0s) backwards;
}
.rv[data-rv="up"]     { --rv-name: rv-up; }
.rv[data-rv="left"]   { --rv-name: rv-left; }
.rv[data-rv="right"]  { --rv-name: rv-right; }
.rv[data-rv="fade"]   { --rv-name: rv-fade; }
.rv[data-rv="zoom"]   { --rv-name: rv-zoom; }
.rv[data-rv="rise"]   { --rv-name: rv-rise; --rv-dur: 1s; }
.rv[data-rv="focus"]  { --rv-name: rv-focus; --rv-dur: 1.1s; }
.rv[data-rv="tilt"]   { --rv-name: rv-tilt; --rv-dur: 1s; }
.rv[data-rv="wipe-l"] { --rv-name: rv-wipe-l; --rv-dur: 1.2s; }
.rv[data-rv="wipe-r"] { --rv-name: rv-wipe-r; --rv-dur: 1.2s; }

/* A photo behind a wipe settles back from a slight zoom as it is uncovered. */
.rv-in[data-rv^="wipe"] img{
  animation: rv-settle 1.6s var(--rv-ease) var(--rv-delay, 0s) backwards;
}
/* Heading underline bars draw across once their heading is in. */
.rv-in.after::after,
.rv-in .after::after{
  transform-origin: left center;
  animation: rv-bar .9s var(--rv-ease) calc(var(--rv-delay, 0s) + .35s) backwards;
}
/* Containers flagged rv-kids bring their children in one after another
   (--rv-i is set per child by main.js). */
.rv-in.rv-kids .rv-kid{
  animation: rv-up .8s var(--rv-ease) calc(var(--rv-delay, 0s) + .25s + var(--rv-i, 0) * .12s) backwards;
}
/* Service + "why" icons pop in just after their card. */
.services-cta .rv-in .card .img-wrapper,
.why-rin .card.rv-in .img-wrapper,
.service-list .card.rv-in .img-wrapper{
  animation: rv-pop .7s var(--rv-ease-back) calc(var(--rv-delay, 0s) + .35s + var(--rv-i, 0) * .12s) backwards;
}
/* Product cut-outs float up into the two smaller "Explore" cards. */
.products-cta .flex .card.rv-in:not(:first-child) .img-wrapper img{
  animation: rv-float 1s var(--rv-ease) calc(var(--rv-delay, 0s) + .25s) backwards;
}
/* Feature cards lean in from alternating sides. */
.pool-features .flex > :nth-child(even){
  --rv-rot: 2deg;
}
/* The CTA panel's waterline graphic drifts in behind its copy. */
.contact-cta .content.rv-in::after{
  animation: rv-drift 1.6s var(--rv-ease) calc(var(--rv-delay, 0s) + .2s) backwards;
}
/* Product and project cards: the photo eases back from a zoom as the card rises. */
.products-list .flex > .rv-in .img-wrapper img,
.product-section .flex > .rv-in .img-wrapper img,
.animated-box-list > .rv-in .img-wrapper img{
  animation: rv-settle 1.2s var(--rv-ease) var(--rv-delay, 0s) backwards;
}

/* --- Page load --- */
@media (prefers-reduced-motion: no-preference){
  /* Header: top bar, logo and menu items drop in. */
  .top-header .content > *{
    animation: rv-down .7s var(--rv-ease) backwards;
  }
  .top-header .content > :nth-child(2){ animation-delay: .1s; }
  header.full_header .logo{
    animation: rv-down .8s var(--rv-ease) .1s backwards;
  }
  header.full_header nav > ul > li{
    animation: rv-down .7s var(--rv-ease) .2s backwards;
  }
  header.full_header nav > ul > li:nth-child(2){ animation-delay: .25s; }
  header.full_header nav > ul > li:nth-child(3){ animation-delay: .3s; }
  header.full_header nav > ul > li:nth-child(4){ animation-delay: .35s; }
  header.full_header nav > ul > li:nth-child(5){ animation-delay: .4s; }
  header.full_header nav > ul > li:nth-child(6){ animation-delay: .45s; }
  header.full_header nav > ul > li:nth-child(7){ animation-delay: .5s; }
  header.full_header nav > ul > li:nth-child(n+8){ animation-delay: .55s; }

  /* Home hero: copy line by line, photo uncovered from the right, waterlines drawn. */
  .banner-container-constrained.banner-bar .banner-content > *{
    animation: rv-up 1s var(--rv-ease) .55s backwards;
  }
  .banner-container-constrained.banner-bar .banner-content > :is(h1, h2, .h0){
    animation: rv-focus 1.2s var(--rv-ease) .3s backwards;
  }
  .banner-container-constrained.banner-bar .banner-content > :nth-child(3){ animation-delay: .75s; }
  .banner-container-constrained.banner-bar .banner-content > :nth-child(n+4){ animation-delay: .9s; }
  .banner-container-constrained.banner-bar .img-wrapper{
    animation: rv-wipe-r 1.4s var(--rv-ease) .15s backwards;
  }
  .banner-container-constrained.banner-bar .img-wrapper img{
    animation: rv-settle 2s var(--rv-ease) .15s backwards;
  }
  .banner-container-constrained > .waterlines path{
    stroke-dasharray: 2600;
    stroke-dashoffset: 2600;
    animation: draw-line 2.6s var(--rv-ease) .4s forwards;
  }
  .banner-container-constrained > .waterlines path:nth-child(2){ animation-delay: .55s; }
  .banner-container-constrained > .waterlines path:nth-child(3){ animation-delay: .7s; }
  .banner-container-constrained > .waterlines path:nth-child(4){ animation-delay: .85s; }
  .banner-container-constrained > .waterlines path:nth-child(5){ animation-delay: 1s; }
  .banner-container-constrained > .waterlines path:nth-child(6){ animation-delay: 1.15s; }

  /* Quick-service bar rises over the hero's edge (translate composes with the
     bar's own transform: translate(0, -50%)), then its three shortcuts pop. */
  .quick-service .content{
    animation: rv-rise 1s var(--rv-ease) .9s backwards;
  }
  .quick-service .flex .filter-item{
    animation: rv-pop .7s var(--rv-ease-back) 1.25s backwards;
  }
  .quick-service .flex .filter-item:nth-child(2){ animation-delay: 1.35s; }
  .quick-service .flex .filter-item:nth-child(3){ animation-delay: 1.45s; }
  .quick-service .cf-phone_cta{
    animation: rv-fade .8s var(--rv-ease) 1.55s backwards;
  }

  /* Inner-page intro: heading comes into focus, copy follows, image wipes in
     from the right and the waterline graphic drifts across behind it. */
  .inner-intro .editable_content > *{
    animation: rv-up .9s var(--rv-ease) .45s backwards;
  }
  .inner-intro .editable_content > :is(h1, h2):first-child{
    animation: rv-focus 1.2s var(--rv-ease) .2s backwards;
  }
  .inner-intro .editable_content > :nth-child(3){ animation-delay: .6s; }
  .inner-intro .editable_content > :nth-child(n+4){ animation-delay: .75s; }
  .inner-intro > .img-wrapper{
    animation: rv-wipe-r 1.4s var(--rv-ease) .1s backwards;
  }
  .inner-intro > .img-wrapper img{
    animation: rv-settle 2s var(--rv-ease) .1s backwards;
  }
  .inner-intro:is(.hot-tub-intro, .fitness-intro) > .img-wrapper img{
    animation: rv-float 1.3s var(--rv-ease) .6s backwards;
  }
  .inner-intro::after{
    animation: rv-drift 2s var(--rv-ease) .3s backwards;
  }
}

/* Scroll-linked parallax on the large feature photos (main.js adds .rv-px).
   Browsers without scroll timelines just get the static photo. */
@supports (animation-timeline: view()){
  .rv-px,
  .rv-in[data-rv^="wipe"] .rv-px{
    scale: 1.12;
    animation: rv-parallax linear both;
    animation-timeline: view();
  }
}

@media (prefers-reduced-motion: reduce){
  .rv, .rv *{
    opacity: 1 !important;
    animation: none !important;
  }
}
@media print{
  .rv, .rv *{
    opacity: 1 !important;
    animation: none !important;
  }
}
/* Project pages: the photos sit at the top of the page beside the copy, and stay in view
   while the copy scrolls (CR-2). Desktop only: below 1024px the gallery stacks above the copy. */
@media screen and (min-width: 1025px){
  .project-page .page-detail-layout{
    align-items: flex-start;
  }
  .project-page .page-detail-layout aside.page-detail-gallery{
    position: sticky;
    top: calc(var(--cc-header-offset, 6rem) + 2.4rem);
  }
}
/* Project pages: the main gallery image opens the lightbox (page-overview-block.php). The
   radius matches the image's, so the focus ring follows its corners. The lightbox set rides
   along hidden, like the strips' extra photos. */
.page-detail-gallery__zoom{
  display: block;
  border-radius: 8px;
  cursor: zoom-in;
}
.page-detail-gallery__lightbox{
  display: none !important;
}
/* Meet Jenny (Service, and Home through the linked section): Jenny stands in the Call Jenny card,
   beside its text, on the card's bottom edge where her picture is cut. On a phone she stands under the buttons. */
.meet-jenny .content .editable_content .grid .col-6:nth-child(2){
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24rem;
  column-gap: 2.4rem;
  align-content: center;
}
.meet-jenny .content .editable_content .grid .col-6:nth-child(2) > *{
  grid-column: 1;
}
.meet-jenny .content .editable_content .grid .col-6:nth-child(2) > figure{
  grid-column: 2;
  grid-row: 1 / span 10;
  align-self: end;
  margin: -8rem 0 -3.2rem;
}
.meet-jenny .content .editable_content .grid .col-6:nth-child(2) > figure img{
  width: 100%;
  height: auto;
}
.meet-jenny .content .editable_content .grid .col-6:nth-child(2) .btn-wrapper{
  flex-direction: column;
  align-items: stretch;
}
@media screen and (max-width: 640px){
  .meet-jenny .content .editable_content .grid .col-6:nth-child(2){
    display: flex;
    flex-direction: column;
  }
  .meet-jenny .content .editable_content .grid .col-6:nth-child(2) > figure{
    position: initial !important;
    margin: 2.4rem auto 0 !important;
  }
}
@media screen and (max-width: 600px){
  .meet-jenny .content .editable_content .grid .col-6:nth-child(2){
    grid-template-columns: minmax(0, 1fr);
  }
  .meet-jenny .content .editable_content .grid .col-6:nth-child(2) > figure{
    grid-column: 1;
    grid-row: auto;
    order: 1;
    justify-self: end;
    width: 18rem;
    margin: .8rem 0 -3.2rem;
  }
}