@charset "UTF-8";
:root {
  --button-border-color: #eee;
  --button-background-color: transparent;
  --button-font-size: 16px;
  --button-color: #222;
  --button-border-color-hover: #eee;
  --button-background-color-hover: #eee;
  --button-color-hover: #222;
}

.button {
  z-index: 1;
  overflow: hidden;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  padding: 16px;
  border-radius: 8px;
  border: 2px solid var(--button-border-color);
  color: var(--button-color);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  font-size: var(--button-font-size, 16px);
  will-change: border-color, color;
  transition-property: border-color, color;
  transition-duration: 0.6s;
  transition-delay: 0.0001s;
  transition-timing-function: ease;
}

.button:hover {
  border-color: var(--button-border-color-hover);
  color: var(--button-color-hover);
}

.button:before {
  content: "";
  z-index: -2;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--button-background-color);
}

.button:after {
  content: "";
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background: var(--button-background-color-hover);
  will-change: width;
  transition: width 0.4s 0.0001s ease;
}

.button:hover:after {
  width: 100%;
}

/* Slim */
.button.slim {
  padding: 8px 16px;
}

/* Main */
.button.main {
  --button-border-color: #222;
  --button-background-color: #222;
  --button-color: #fff;
  --button-border-color-hover: #345cad;
  --button-background-color-hover: #345cad;
  --button-color-hover: #fff;
}

/* Secondary */
.button.secondary {
  --button-border-color: #eee;
  --button-background-color: #eee;
  --button-color: #222;
  --button-border-color-hover: #222;
  --button-background-color-hover: #222;
  --button-color-hover: #fff;
}

/* Vars */
:root {
  --cols-col-gap-0: 0px;
  --cols-col-gap-s: 4px;
  --cols-col-gap-m: 8px;
  --cols-col-gap-l: 16px;
  --cols-col-gap-xl: 32px;
}

/* All sizes */
.cols {
  display: flex;
  flex-wrap: var(--cols-wrap);
  gap: var(--cols-col-gap, 0px);
  width: 100%;
}

/* inline-flex */
.cols.d-ifl {
  width: auto;
  display: inline-flex;
}

/* : alignment (vertical) */
.cols.at {
  align-items: flex-start;
}

.cols.ac {
  justify-items: center;
}

.cols.am {
  align-items: center;
}

.cols.ab {
  align-items: flex-end;
}

/* Column gap */
.cols.gap-0 {
  --cols-col-gap: var(--cols-col-gap-0, 0px);
}

.cols.gap-s {
  --cols-col-gap: var(--cols-col-gap-s, 4px);
}

.cols.gap-m {
  --cols-col-gap: var(--cols-col-gap-m, 8px);
}

.cols.gap-l {
  --cols-col-gap: var(--cols-col-gap-l, 16px);
}

.cols.gap-xl {
  --cols-col-gap: var(--cols-col-gap-xl, 32px);
}

/* Row reverse */
.cols.rr {
  flex-direction: row-reverse;
}

/* Column reverse */
.cols.cr {
  flex-direction: column-reverse;
}

/* : cols */
.cols > * {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: var(--cols-col-width);
}

.cols > *.at {
  align-content: flex-start;
}

.cols > *.am {
  align-content: center;
}

.cols > *.ab {
  align-content: flex-end;
}

/* Auto cols - no specific col count and no equal widths */
.cols.cols-auto > * {
  flex-basis: auto;
}

.cols.cols-auto > *.exp {
  flex: 1 1 auto;
}

/* Column count (vars) */
.cols.cols-1 {
  --cols-col-count: 1;
}

.cols.cols-2 {
  --cols-col-count: 2;
}

.cols.cols-3 {
  --cols-col-count: 3;
}

.cols.cols-4 {
  --cols-col-count: 4;
}

.cols.cols-5 {
  --cols-col-count: 5;
}

.cols.cols-6 {
  --cols-col-count: 6;
}

.cols.cols-7 {
  --cols-col-count: 7;
}

.cols.cols-8 {
  --cols-col-count: 8;
}

.cols.cols-9 {
  --cols-col-count: 9;
}

.cols.cols-10 {
  --cols-col-count: 10;
}

.cols.cols-11 {
  --cols-col-count: 11;
}

.cols.cols-12 {
  --cols-col-count: 12;
}

.cols.cols-13 {
  --cols-col-count: 13;
}

.cols.cols-14 {
  --cols-col-count: 14;
}

.cols.cols-15 {
  --cols-col-count: 15;
}

.cols.cols-16 {
  --cols-col-count: 16;
}

/* Flex wrap */
.cols.wrap {
  --cols-wrap: wrap;
}

.cols.no-wrap {
  --cols-wrap: nowrap;
}

/* device-s */
@media all and (max-width: 767px) {
  .cols {
    --cols-col-count: 1;
    --cols-wrap: wrap;
    /* Col gap */
    --cols-col-gap: var(--cols-col-gap-m);
    /* Col width */
    --cols-gap-count: calc(var(--cols-col-count) - 1);
    --cols-gap-total-px: calc(var(--cols-gap-count) * var(--cols-col-gap));
    --cols-gap-per-col-px: calc(var(--cols-gap-total-px) / var(--cols-col-count));
    --cols-col-width: calc(
        calc(100% / var(--cols-col-count) - var(--cols-gap-per-col-px))
    );
  }
  /* Column count (vars) */
  .cols.dv-s-cols-1 {
    --cols-col-count: 1;
  }
  .cols.dv-s-cols-2 {
    --cols-col-count: 2;
  }
  .cols.dv-s-cols-3 {
    --cols-col-count: 3;
  }
  .cols.dv-s-cols-4 {
    --cols-col-count: 4;
  }
  .cols.dv-s-cols-5 {
    --cols-col-count: 5;
  }
  .cols.dv-s-cols-6 {
    --cols-col-count: 6;
  }
  .cols.dv-s-cols-7 {
    --cols-col-count: 7;
  }
  .cols.dv-s-cols-8 {
    --cols-col-count: 8;
  }
  .cols.dv-s-cols-9 {
    --cols-col-count: 9;
  }
  .cols.dv-s-cols-10 {
    --cols-col-count: 10;
  }
  .cols.dv-s-cols-11 {
    --cols-col-count: 11;
  }
  .cols.dv-s-cols-12 {
    --cols-col-count: 12;
  }
  .cols.dv-s-cols-13 {
    --cols-col-count: 13;
  }
  .cols.dv-s-cols-14 {
    --cols-col-count: 14;
  }
  .cols.dv-s-cols-15 {
    --cols-col-count: 15;
  }
  .cols.dv-s-cols-16 {
    --cols-col-count: 16;
  }
  /* Column gap */
  .cols.dv-s-gap-0 {
    --cols-col-gap: var(--cols-col-gap-0, 0px);
  }
  .cols.dv-s-gap-s {
    --cols-col-gap: var(--cols-col-gap-s, 4px);
  }
  .cols.dv-s-gap-m {
    --cols-col-gap: var(--cols-col-gap-m, 8px);
  }
  .cols.dv-s-gap-l {
    --cols-col-gap: var(--cols-col-gap-l, 16px);
  }
  .cols.dv-s-gap-xl {
    --cols-col-gap: var(--cols-col-gap-xl, 32px);
  }
  /* Column reverse */
  .cols.dv-s-cr {
    flex-direction: column-reverse;
  }
  /* Row reverse */
  .cols.dv-s-rr {
    flex-direction: row-reverse;
  }
  /* Flex wrap */
  .cols.dv-s-wrap {
    --cols-wrap: wrap;
  }
  .cols.dv-s-no-wrap {
    --cols-wrap: nowrap;
  }
  /* Auto cols - expand */
  .cols.cols-auto > *.dv-s-exp {
    flex: 1 1 auto;
  }
}
/* device-m */
@media all and (min-width: 768px) and (max-width: 899px) {
  .cols {
    --cols-col-count: 2;
    --cols-wrap: wrap;
    /* Col gap */
    --cols-col-gap: var(--cols-col-gap-m);
    /* Col width */
    --cols-gap-count: calc(var(--cols-col-count) - 1);
    --cols-gap-total-px: calc(var(--cols-gap-count) * var(--cols-col-gap));
    --cols-gap-per-col-px: calc(var(--cols-gap-total-px) / var(--cols-col-count));
    --cols-col-width: calc(
        calc(100% / var(--cols-col-count) - var(--cols-gap-per-col-px))
    );
  }
  /* Column count (vars) */
  .cols.dv-m-cols-1 {
    --cols-col-count: 1;
  }
  .cols.dv-m-cols-2 {
    --cols-col-count: 2;
  }
  .cols.dv-m-cols-3 {
    --cols-col-count: 3;
  }
  .cols.dv-m-cols-4 {
    --cols-col-count: 4;
  }
  .cols.dv-m-cols-5 {
    --cols-col-count: 5;
  }
  .cols.dv-m-cols-6 {
    --cols-col-count: 6;
  }
  .cols.dv-m-cols-7 {
    --cols-col-count: 7;
  }
  .cols.dv-m-cols-8 {
    --cols-col-count: 8;
  }
  .cols.dv-m-cols-9 {
    --cols-col-count: 9;
  }
  .cols.dv-m-cols-10 {
    --cols-col-count: 10;
  }
  .cols.dv-m-cols-11 {
    --cols-col-count: 11;
  }
  .cols.dv-m-cols-12 {
    --cols-col-count: 12;
  }
  .cols.dv-m-cols-13 {
    --cols-col-count: 13;
  }
  .cols.dv-m-cols-14 {
    --cols-col-count: 14;
  }
  .cols.dv-m-cols-15 {
    --cols-col-count: 15;
  }
  .cols.dv-m-cols-16 {
    --cols-col-count: 16;
  }
  /* Column gap */
  .cols.dv-m-gap-0 {
    --cols-col-gap: var(--cols-col-gap-0, 0px);
  }
  .cols.dv-m-gap-s {
    --cols-col-gap: var(--cols-col-gap-s, 4px);
  }
  .cols.dv-m-gap-m {
    --cols-col-gap: var(--cols-col-gap-m, 8px);
  }
  .cols.dv-m-gap-l {
    --cols-col-gap: var(--cols-col-gap-l, 16px);
  }
  .cols.dv-m-gap-xl {
    --cols-col-gap: var(--cols-col-gap-xl, 32px);
  }
  /* Row reverse */
  .cols.dv-m-rr {
    flex-direction: row-reverse;
  }
  /* Column reverse */
  .cols.dv-m-cr {
    flex-direction: column-reverse;
  }
  /* Flex wrap */
  .dv-m-wrap {
    --cols-wrap: wrap;
  }
  .dv-m-no-wrap {
    --cols-wrap: nowrap;
  }
  /* Auto cols - expand */
  .cols.cols-auto > *.dv-m-exp {
    flex: 1 1 auto;
  }
}
/* device-l */
@media all and (min-width: 900px) and (max-width: 1199px) {
  .cols {
    --cols-col-count: 4;
    --cols-wrap: wrap;
    /* Col gap */
    --cols-col-gap: var(--cols-col-gap-m);
    /* Col width */
    --cols-gap-count: calc(var(--cols-col-count) - 1);
    --cols-gap-total-px: calc(var(--cols-gap-count) * var(--cols-col-gap));
    --cols-gap-per-col-px: calc(var(--cols-gap-total-px) / var(--cols-col-count));
    --cols-col-width: calc(
        calc(100% / var(--cols-col-count) - var(--cols-gap-per-col-px))
    );
  }
  /* Column count (vars) */
  .cols.dv-l-cols-1 {
    --cols-col-count: 1;
  }
  .cols.dv-l-cols-2 {
    --cols-col-count: 2;
  }
  .cols.dv-l-cols-3 {
    --cols-col-count: 3;
  }
  .cols.dv-l-cols-4 {
    --cols-col-count: 4;
  }
  .cols.dv-l-cols-5 {
    --cols-col-count: 5;
  }
  .cols.dv-l-cols-6 {
    --cols-col-count: 6;
  }
  .cols.dv-l-cols-7 {
    --cols-col-count: 7;
  }
  .cols.dv-l-cols-8 {
    --cols-col-count: 8;
  }
  .cols.dv-l-cols-9 {
    --cols-col-count: 9;
  }
  .cols.dv-l-cols-10 {
    --cols-col-count: 10;
  }
  .cols.dv-l-cols-11 {
    --cols-col-count: 11;
  }
  .cols.dv-l-cols-12 {
    --cols-col-count: 12;
  }
  .cols.dv-l-cols-13 {
    --cols-col-count: 13;
  }
  .cols.dv-l-cols-14 {
    --cols-col-count: 14;
  }
  .cols.dv-l-cols-15 {
    --cols-col-count: 15;
  }
  .cols.dv-l-cols-16 {
    --cols-col-count: 16;
  }
  /* Column gap */
  .cols.dv-l-gap-0 {
    --cols-col-gap: var(--cols-col-gap-0, 0px);
  }
  .cols.dv-l-gap-s {
    --cols-col-gap: var(--cols-col-gap-s, 4px);
  }
  .cols.dv-l-gap-m {
    --cols-col-gap: var(--cols-col-gap-m, 8px);
  }
  .cols.dv-l-gap-l {
    --cols-col-gap: var(--cols-col-gap-l, 16px);
  }
  .cols.dv-l-gap-xl {
    --cols-col-gap: var(--cols-col-gap-xl, 32px);
  }
  /* Row reverse */
  .cols.dv-l-rr {
    flex-direction: row-reverse;
  }
  /* Column reverse */
  .cols.dv-l-cr {
    flex-direction: column-reverse;
  }
  /* Flex wrap */
  .dv-l-wrap {
    --cols-wrap: wrap;
  }
  .dv-l-no-wrap {
    --cols-wrap: nowrap;
  }
  /* Auto cols - expand */
  .cols.cols-auto > *.dv-l-exp {
    flex: 1 1 auto;
  }
}
/* device-xl */
@media all and (min-width: 1200px) {
  .cols {
    --cols-col-count: 6;
    --cols-wrap: wrap;
    /* Col gap */
    --cols-col-gap: var(--cols-col-gap-m);
    /* Col width */
    --cols-gap-count: calc(var(--cols-col-count) - 1);
    --cols-gap-total-px: calc(var(--cols-gap-count) * var(--cols-col-gap));
    --cols-gap-per-col-px: calc(var(--cols-gap-total-px) / var(--cols-col-count));
    --cols-col-width: calc(
        calc(100% / var(--cols-col-count) - var(--cols-gap-per-col-px))
    );
  }
  /* Column count (vars) */
  .cols.dv-xl-cols-1 {
    --cols-col-count: 1;
  }
  .cols.dv-xl-cols-2 {
    --cols-col-count: 2;
  }
  .cols.dv-xl-cols-3 {
    --cols-col-count: 3;
  }
  .cols.dv-xl-cols-4 {
    --cols-col-count: 4;
  }
  .cols.dv-xl-cols-5 {
    --cols-col-count: 5;
  }
  .cols.dv-xl-cols-6 {
    --cols-col-count: 6;
  }
  .cols.dv-xl-cols-7 {
    --cols-col-count: 7;
  }
  .cols.dv-xl-cols-8 {
    --cols-col-count: 8;
  }
  .cols.dv-xl-cols-9 {
    --cols-col-count: 9;
  }
  .cols.dv-xl-cols-10 {
    --cols-col-count: 10;
  }
  .cols.dv-xl-cols-11 {
    --cols-col-count: 11;
  }
  .cols.dv-xl-cols-12 {
    --cols-col-count: 12;
  }
  .cols.dv-xl-cols-13 {
    --cols-col-count: 13;
  }
  .cols.dv-xl-cols-14 {
    --cols-col-count: 14;
  }
  .cols.dv-xl-cols-15 {
    --cols-col-count: 15;
  }
  .cols.dv-xl-cols-16 {
    --cols-col-count: 16;
  }
  /* Column gap */
  .cols.dv-xl-gap-0 {
    --cols-col-gap: var(--cols-col-gap-0, 0px);
  }
  .cols.dv-xl-gap-s {
    --cols-col-gap: var(--cols-col-gap-s, 4px);
  }
  .cols.dv-xl-gap-m {
    --cols-col-gap: var(--cols-col-gap-m, 8px);
  }
  .cols.dv-xl-gap-l {
    --cols-col-gap: var(--cols-col-gap-l, 16px);
  }
  .cols.dv-xl-gap-xl {
    --cols-col-gap: var(--cols-col-gap-xl, 32px);
  }
  /* Row reverse */
  .cols.dv-xl-rr {
    flex-direction: row-reverse;
  }
  /* Column reverse */
  .cols.dv-xl-cr {
    flex-direction: column-reverse;
  }
  /* Flex wrap */
  .dv-xl-wrap {
    --cols-wrap: wrap;
  }
  .dv-xl-no-wrap {
    --cols-wrap: nowrap;
  }
  /* Auto cols - expand */
  .cols.cols-auto > *.dv-xl-exp {
    flex: 1 1 auto;
  }
}
aside.main {
  z-index: 1000;
  position: fixed;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background: rgba(1, 1, 1, 0);
  overflow: hidden;
  pointer-events: none;
}

.aside-main-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  left: -101%;
  top: 0;
  width: 100%;
  max-width: 300px;
  height: 100%;
  background: #fff;
  opacity: 0;
}

/* Title bar */
.aside-main-panel-title-bar {
  width: 100%;
}

.aside-main-panel-title-bar .logo {
  max-width: 60px;
}

.aside-main-panel-title-bar .tel img {
  max-width: 24px;
}

.aside-main-panel-title-bar .aside-hide-trigger {
  cursor: pointer;
}

/* Contents */
.aside-main-panel-contents {
  width: 100%;
  flex: 1 1 auto;
  align-content: center;
  overflow: auto;
  padding: 16px;
}

/* Active state */
aside.main.active {
  transition: background 0.6s 0.0001s ease-in-out;
  width: 100%;
  background: rgba(1, 1, 1, 0.84);
  pointer-events: initial;
}

aside.main.active .aside-main-panel {
  will-change: left, opacity;
  transition-property: left, opacity;
  transition-duration: 0.6s;
  transition-delay: 0.6s;
  transition-timing-function: ease-in-out;
  left: 0;
  opacity: 1;
}

/* Nav */
nav.aside-nav a {
  display: block;
  text-decoration: none;
  color: inherit;
}

nav.aside-nav > a {
  padding: 8px 0;
  font-size: 18px;
}

nav.aside-nav > a:hover,
nav.aside-nav > a.active {
  color: #345dae;
}

/* : level 2 */
ul.aside-nav-l2 {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  will-change: opacity;
  transition: opacity 0.6s 0.001s ease-in-out;
}

ul.aside-nav-l2 li {
  padding: 4px 0 4px 8px;
}

ul.aside-nav-l2 a {
  font-size: 14px;
}

ul.aside-nav-l2 a:hover {
  color: #666;
}

/* : level 1 is active */
nav.aside-nav > a.active + ul.aside-nav-l2 {
  margin-bottom: 16px;
  max-height: none;
  opacity: 1;
}

footer {
  width: 100%;
  background-color: #222;
  background-image: linear-gradient(to bottom, #222, #333);
  color: #fff;
  line-height: 1.8;
}

footer a {
  color: inherit;
  text-decoration: none;
}

footer .logo {
  max-width: 137px;
  filter: brightness(0) invert(1);
}

footer nav > div {
  margin-bottom: 8px;
}

header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: rgb(255, 255, 255);
  color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease-in-out;
  z-index: 1000;
  /* Separator */
  /* border-bottom: 1px solid #ddd; */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  /* Transition */
  will-change: transform, box-shadow, background;
  transition-property: transform, box-shadow, background;
  transition-duration: 0.4s;
  transition-delay: 0.0001s;
  transition-timing-function: ease-in-out;
}

header img.logo {
  will-change: filter;
  transition: filter 0.5s ease;
  max-width: 137px;
}

header a.tel {
  color: inherit;
  text-decoration: none;
}

nav ul,
nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul.nav-main > li {
  position: relative;
  padding: 8px 0;
}

header nav a {
  color: inherit;
  text-decoration: none;
}

header nav a:hover {
  color: #2251a2;
}

/* Mode: opacity */
header.transparent {
  position: fixed;
  color: #222;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0);
  background: rgba(255, 255, 255, 0);
}

header.transparent img.logo {
  /* filter: brightness(0) invert(1); */
}

header.transparent nav a {
  color: inherit;
}

/* Mode: showHide */
header.hide {
  transform: translateY(-100%);
}

/* Flyout container */
.flyout-l2 {
  z-index: 1000;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  text-align: left;
  color: #222;
}

.flyout-l2,
.flyout-l2 li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.flyout-l2 {
  padding: 6px 0;
}

.flyout-l2 li a {
  display: block;
  padding: 12px;
  color: #222;
  text-decoration: none;
  font-size: 14px;
}

.flyout-l2 li a:hover {
  color: #2251a2;
}

/* Show on hover of parent <li> */
nav ul.nav-main li.has-flyout:hover > .flyout-l2,
nav ul.nav-main li.has-flyout:focus-within > .flyout-l2 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

/* Text Input */
.text-input {
  margin-bottom: 24px;
  position: relative;
}

.text-input-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  background: #f8f9fa;
  border: 2px solid #e1e4e8;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.text-input-label:hover {
  border-color: #c8ccd0;
}

.text-input-label:focus-within {
  border-color: #0066cc;
  background: white;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.text-input-icon {
  padding: 12px 16px;
  color: #6e7781;
  display: flex;
  align-items: center;
}

.text-input-field {
  flex: 1;
  padding: 12px 16px 12px 0;
  border: none;
  background: transparent;
  font-size: 15px;
  color: #24292f;
  outline: none;
}

/* Email Input */
.email-input {
  margin-bottom: 24px;
  position: relative;
}

.email-input-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  background: #f8f9fa;
  border: 2px solid #e1e4e8;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.email-input-label:hover {
  border-color: #c8ccd0;
}

.email-input-label:focus-within {
  border-color: #0066cc;
  background: white;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.email-input-icon {
  padding: 12px 16px;
  color: #6e7781;
  display: flex;
  align-items: center;
}

.email-input-field {
  flex: 1;
  padding: 12px 16px 12px 0;
  border: none;
  background: transparent;
  font-size: 15px;
  color: #24292f;
  outline: none;
}

/* Tel Input */
.tel-input {
  margin-bottom: 24px;
  position: relative;
}

.tel-input-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  background: #f8f9fa;
  border: 2px solid #e1e4e8;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.tel-input-label:hover {
  border-color: #c8ccd0;
}

.tel-input-label:focus-within {
  border-color: #0066cc;
  background: white;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.tel-input-icon {
  padding: 12px 16px;
  color: #6e7781;
  display: flex;
  align-items: center;
}

.tel-input-field {
  flex: 1;
  padding: 12px 16px 12px 0;
  border: none;
  background: transparent;
  font-size: 15px;
  color: #24292f;
  outline: none;
}

/* Password Input */
.password {
  margin-bottom: 24px;
  position: relative;
}

.password-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  background: #f8f9fa;
  border: 2px solid #e1e4e8;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.password-label:hover {
  border-color: #c8ccd0;
}

.password-label:focus-within {
  border-color: #0066cc;
  background: white;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.password-icon {
  padding: 12px 16px;
  color: #6e7781;
  display: flex;
  align-items: center;
}

.password-field {
  flex: 1;
  padding: 12px 16px 12px 0;
  border: none;
  background: transparent;
  font-size: 15px;
  color: #24292f;
  outline: none;
}

/* Textarea */
.textarea {
  margin-bottom: 24px;
  position: relative;
}

.textarea-label {
  display: block;
  cursor: pointer;
  position: relative;
  background: #f8f9fa;
  border: 2px solid #e1e4e8;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.textarea-label:hover {
  border-color: #c8ccd0;
}

.textarea-label:focus-within {
  border-color: #0066cc;
  background: white;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.textarea-icon {
  padding: 12px 16px;
  color: #6e7781;
  display: inline-flex;
  align-items: center;
}

.textarea-field {
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: transparent;
  font-size: 15px;
  color: #24292f;
  outline: none;
  font-family: inherit;
  resize: vertical;
  min-height: 100px;
}

/* Select */
.select {
  margin-bottom: 24px;
  position: relative;
}

.select-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  background: #f8f9fa;
  border: 2px solid #e1e4e8;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.select-label:hover {
  border-color: #c8ccd0;
}

.select-label:focus-within {
  border-color: #0066cc;
  background: white;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.select-icon {
  padding: 12px 16px;
  color: #6e7781;
  display: flex;
  align-items: center;
}

.select-field {
  flex: 1;
  padding: 12px 16px 12px 0;
  border: none;
  background: transparent;
  font-size: 15px;
  color: #24292f;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236e7781' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* Checkbox */
.checkbox {
  margin-bottom: 16px;
  position: relative;
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 12px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.checkbox-label:hover {
  background: #f8f9fa;
}

.checkbox-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid #d0d7de;
  border-radius: 4px;
  margin-right: 12px;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.checkbox-input:checked + .checkbox-custom {
  background: #0066cc;
  border-color: #0066cc;
}

.checkbox-input:checked + .checkbox-custom::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-input:focus + .checkbox-custom {
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.checkbox-text {
  font-size: 15px;
  color: #24292f;
}

/* Radio */
.radio {
  margin-bottom: 16px;
  position: relative;
}

.radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 12px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.radio-label:hover {
  background: #f8f9fa;
}

.radio-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.radio-custom {
  width: 20px;
  height: 20px;
  border: 2px solid #d0d7de;
  border-radius: 50%;
  margin-right: 12px;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.radio-input:checked + .radio-custom {
  border-color: #0066cc;
}

.radio-input:checked + .radio-custom::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0066cc;
}

.radio-input:focus + .radio-custom {
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.radio-text {
  font-size: 15px;
  color: #24292f;
}

/* Field Labels */
.field-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #24292f;
  margin-bottom: 8px;
}

/* Hide */
.hide {
  display: none;
}

/* device-s */
@media all and (max-width: 767px) {
  .dv-s-hide {
    display: none;
  }
}
/* device-m */
@media all and (min-width: 768px) and (max-width: 899px) {
  .dv-m-hide {
    display: none;
  }
}
/* device-l */
@media all and (min-width: 900px) and (max-width: 1199px) {
  .dv-l-hide {
    display: none;
  }
}
/* device-xl */
@media all and (min-width: 1200px) {
  .dv-xl-hide {
    display: none;
  }
}
:root {
  --max-width: none;
  --width: initial;
  --height: initial;
}

* {
  max-width: var(--max-width, none);
  width: var(--width);
  height: var(--height);
}

.mw-s {
  --max-width: 480px;
  margin: 0 auto;
}

.mw-m {
  --max-width: 900px;
  margin: 0 auto;
}

.mw-l {
  --max-width: 1200px;
  margin: 0 auto;
}

.mw-xl {
  --max-width: 1600px;
  margin: 0 auto;
}

.full-width {
  --width: 100%;
}

.full-height {
  --height: 100%;
}

/* device-s */
@media all and (max-width: 767px) {
  .dv-s-mw-s {
    --max-width: 480px;
    margin: 0 auto;
  }
  .dv-s-mw-m {
    --max-width: 900px;
    margin: 0 auto;
  }
  .dv-s-mw-l {
    --max-width: 1200px;
    margin: 0 auto;
  }
  .dv-s-mw-xl {
    --max-width: 1600px;
    margin: 0 auto;
  }
  .dv-s-full-width {
    --width: 100%;
  }
  .dv-s-full-height {
    --height: 100%;
  }
}
/* device-m */
@media all and (min-width: 768px) and (max-width: 899px) {
  .dv-m-mw-s {
    --max-width: 480px;
    margin: 0 auto;
  }
  .dv-m-mw-m {
    --max-width: 900px;
    margin: 0 auto;
  }
  .dv-m-mw-l {
    --max-width: 1200px;
    margin: 0 auto;
  }
  .dv-m-mw-xl {
    --max-width: 1600px;
    margin: 0 auto;
  }
  .dv-m-full-width {
    --width: 100%;
  }
  .dv-m-full-height {
    --height: 100%;
  }
}
/* device-l */
@media all and (min-width: 900px) and (max-width: 1199px) {
  .dv-l-mw-s {
    --max-width: 480px;
    margin: 0 auto;
  }
  .dv-l-mw-m {
    --max-width: 900px;
    margin: 0 auto;
  }
  .dv-l-mw-l {
    --max-width: 1200px;
    margin: 0 auto;
  }
  .dv-l-mw-xl {
    --max-width: 1600px;
    margin: 0 auto;
  }
  .dv-l-full-width {
    --width: 100%;
  }
  .dv-l-full-height {
    --height: 100%;
  }
}
/* device-xl */
@media all and (min-width: 1200px) {
  .dv-xl-mw-s {
    --max-width: 480px;
    margin: 0 auto;
  }
  .dv-xl-mw-m {
    --max-width: 900px;
    margin: 0 auto;
  }
  .dv-xl-mw-l {
    --max-width: 1200px;
    margin: 0 auto;
  }
  .dv-xl-mw-xl {
    --max-width: 1600px;
    margin: 0 auto;
  }
  .dv-xl-full-width {
    --width: 100%;
  }
  .dv-xl-full-height {
    --height: 100%;
  }
}
:root {
  --modern-list-font-size: 1rem;
  --modern-list-line-height: 1.5;
  --modern-list-color: #222;
  --modern-list-bullet-color: inherit;
  --modern-list-gap: 0.75rem;
  /* marker sizing & spacing */
  --modern-list-marker-size: 0.9rem; /* visual size of the marker */
  --modern-list-marker-gap: 0.6rem; /* space between marker and text */
  --modern-list-padding-left: calc(var(--modern-list-marker-size) + var(--modern-list-marker-gap));
  --modern-list-marker-shape: "⟶"; /* can be "➤", "—", emoji, etc. */
  /* optional background for the marker (e.g. soft dot) */
  --modern-list-marker-bg: transparent;
  --modern-list-marker-radius: 999px;
}

/* base reset */
ul.modern-list,
ol.modern-list {
  margin: 0;
  padding: 0;
  list-style: none; /* hide native marker */
  -webkit-padding-start: 0; /* Safari */
  font-size: var(--modern-list-font-size);
  line-height: var(--modern-list-line-height);
  color: var(--modern-list-color);
}

/* each item reserves space on the left for the custom marker */
ul.modern-list > li,
ol.modern-list > li {
  position: relative; /* containing block for ::before */
  padding-left: var(--modern-list-padding-left);
  margin: 0 0 var(--modern-list-gap) 0; /* gap between items */
}

/* the absolutely-positioned marker, vertically centered */
ul.modern-list > li::before,
ol.modern-list > li::before {
  content: var(--modern-list-marker-shape);
  position: absolute;
  left: 0; /* sits inside the left padding area */
  top: 50%;
  transform: translateY(-50%); /* vertical centering */
  width: var(--modern-list-marker-size);
  height: var(--modern-list-marker-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--modern-list-marker-size);
  line-height: 1;
  color: var(--modern-list-bullet-color);
  background: var(--modern-list-marker-bg);
  border-radius: var(--modern-list-marker-radius);
  pointer-events: none; /* non-interactive */
}

/* tidy final item spacing */
ul.modern-list > li:last-child,
ol.modern-list > li:last-child {
  margin-bottom: 0;
}

/* List style none */
ul.modern-list.ls-n,
ol.modern-list.ls-n {
  --modern-list-marker-shape: '';
}

/* device-s */
@media all and (max-width: 767px) {
  ul.modern-list.dv-s-ls-n,
  ol.modern-list.dv-s-ls-n {
    --modern-list-marker-shape: '';
  }
}
/* device-m */
@media all and (min-width: 768px) and (max-width: 899px) {
  ul.modern-list.dv-m-ls-n,
  ol.modern-list.dv-m-ls-n {
    --modern-list-marker-shape: '';
  }
}
/* device-l */
@media all and (min-width: 900px) and (max-width: 1199px) {
  ul.modern-list.dv-l-ls-n,
  ol.modern-list.dv-l-ls-n {
    --modern-list-marker-shape: '';
  }
}
/* device-xl */
@media all and (min-width: 1200px) {
  ul.modern-list.dv-xl-ls-n,
  ol.modern-list.dv-xl-ls-n {
    --modern-list-marker-shape: '';
  }
}
:root {
  --black: #000;
  --white: #fff;
  --dark-grey: #222;
  --mid-grey: #666;
  --light-grey: #eee;
  --grey: #ccc;
  --blue: #345dae;
}

/* Colours */
.color-black {
  color: var(--black, #000);
}

.color-white {
  color: var(--white, #fff);
}

.color-dark-grey {
  color: var(--dark-grey, #222);
}

.color-mid-grey {
  color: var(--mid-grey, #666);
}

.color-light-grey {
  color: var(--light-grey, #eee);
}

.color-grey {
  color: var(--grey, #ccc);
}

.color-blue {
  color: var(--blue, #345dae);
}

/* Backgrounds */
.bg-black {
  background: var(--black, #000);
}

.bg-white {
  background: var(--white, #fff);
}

.bg-dark-grey {
  background: var(--dark-grey, #222);
}

.bg-mid-grey {
  background: var(--mid-grey, #666);
}

.bg-light-grey {
  background: var(--light-grey, #eee);
}

.bg-grey {
  background: var(--grey, #ccc);
}

.bg-blue {
  background: var(--blue, #345dae);
}

/* Border */
.border-black {
  border-color: var(--black, #000);
}

.border-white {
  border-color: var(--white, #fff);
}

.border-dark-grey {
  border-color: var(--dark-grey, #222);
}

.border-mid-grey {
  border-color: var(--mid-grey, #666);
}

.border-light-grey {
  border-color: var(--light-grey, #eee);
}

.border-grey {
  border-color: var(--grey, #ccc);
}

.border-blue {
  border-color: var(--blue, #345dae);
}

/* Border style */
.border-style-solid {
  border-style: solid;
}

/* Border width */
.border-width-0 {
  border-width: 0;
}

.border-width-1 {
  border-width: 1px;
}

.border-width-2 {
  border-width: 2px;
}

.border-width-3 {
  border-width: 3px;
}

.border-width-4 {
  border-width: 4px;
}

/* Sticky */
.sticky {
  position: sticky;
}

/* device-s */
@media all and (max-width: 767px) {
  .dv-s-sticky {
    position: sticky;
  }
}
/* device-m */
@media all and (min-width: 768px) and (max-width: 899px) {
  .dv-m-sticky {
    position: sticky;
  }
}
/* device-l */
@media all and (min-width: 900px) and (max-width: 1199px) {
  .dv-l-sticky {
    position: sticky;
  }
}
/* device-xl */
@media all and (min-width: 1200px) {
  .dv-xl-sticky {
    position: sticky;
  }
}
/* Html, body */
html, body {
  padding: 0;
  margin: 0;
  color: #222;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
}

/* Body */
body.disable-scroll {
  overflow: hidden;
}

/* Box sizing */
*, *:before, *:after {
  box-sizing: border-box;
}

/* Pointer */
.pntr {
  cursor: pointer;
}

/* Shadows */
.shadow-s {
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15), 0 0 6px 0 rgba(0, 0, 0, 0.1);
}

.shadow-m {
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 0 12px 0 rgba(0, 0, 0, 0.1);
}

.shadow-l {
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15), 0 0 24px 0 rgba(0, 0, 0, 0.1);
}

.shadow-xl {
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.15), 0 0 48px 0 rgba(0, 0, 0, 0.1);
}

.shadow-xxl {
  box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.15), 0 0 96px 0 rgba(0, 0, 0, 0.1);
}

/* Word gradient */
.text-gradient {
  /* tweak these */
  --speed: 6s;
  --tile: 12em; /* width of one repeating gradient cycle */
  background-image: repeating-linear-gradient(90deg, #4169E1 0%, #FF4FD8 33%, #A56BFF 66%, #4169E1 100%);
  background-size: var(--tile) 100%;
  background-repeat: repeat;
  background-position: 0 50%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: wordGradientLoop var(--speed) linear infinite;
}

/* Left → right drift (no snap because it moves exactly 1 tile) */
@keyframes wordGradientLoop {
  from {
    background-position: 0 50%;
  }
  to {
    background-position: var(--tile) 50%;
  }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .text-gradient {
    animation: none;
  }
}
/* Reflections */
img.reflection {
  -webkit-box-reflect: below 0 linear-gradient(to top, rgba(0, 0, 0, 0.4) 0px, rgba(0, 0, 0, 0.25) 5px, rgba(0, 0, 0, 0.1) 12px, rgba(0, 0, 0, 0) 20px);
}

/* Position */
.p-r {
  position: relative;
}

.p-a {
  position: absolute;
}

.p-i {
  position: initial;
}

/* font-weight */
.fw-b {
  font-weight: bold;
}

.fw-n {
  font-weight: normal;
}

/* Textual CTA */
.textual-cta {
  display: inline-block;
  white-space: nowrap;
  font-weight: 700;
  font-size: 1.2em;
  background: linear-gradient(90deg, #666, #6da1fa, #666);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 1.2s linear infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: -200% center;
  }
}
/* Border radius */
.br-0 {
  border-radius: 0;
}

.br-xs {
  border-radius: 2px;
}

.br-s {
  border-radius: 4px;
}

.br-m {
  border-radius: 8px;
}

.br-l {
  border-radius: 16px;
}

.br-xl {
  border-radius: 32px;
}

.br-2xl {
  border-radius: 64px;
}

.br-50pc {
  border-radius: 50%;
}

/* device-s */
@media all and (max-width: 767px) {
  .dv-s-br-0 {
    border-radius: 0;
  }
  .dv-s-br-xs {
    border-radius: 2px;
  }
  .dv-s-br-s {
    border-radius: 4px;
  }
  .dv-s-br-m {
    border-radius: 8px;
  }
  .dv-s-br-l {
    border-radius: 16px;
  }
  .dv-s-br-xl {
    border-radius: 32px;
  }
  .dv-s-br-2xl {
    border-radius: 64px;
  }
  .dv-s-br-50pc {
    border-radius: 50%;
  }
}
/* device-m */
@media all and (min-width: 768px) and (max-width: 899px) {
  .dv-m-br-0 {
    border-radius: 0;
  }
  .dv-m-br-xs {
    border-radius: 2px;
  }
  .dv-m-br-s {
    border-radius: 4px;
  }
  .dv-m-br-m {
    border-radius: 8px;
  }
  .dv-s-br-l {
    border-radius: 16px;
  }
  .dv-m-br-xl {
    border-radius: 32px;
  }
  .dv-m-br-2xl {
    border-radius: 64px;
  }
  .dv-m-br-50pc {
    border-radius: 50%;
  }
}
/* device-l */
@media all and (min-width: 900px) and (max-width: 1199px) {
  .dv-l-br-0 {
    border-radius: 0;
  }
  .dv-l-br-xs {
    border-radius: 2px;
  }
  .dv-l-br-s {
    border-radius: 4px;
  }
  .dv-l-br-m {
    border-radius: 8px;
  }
  .dv-l-br-l {
    border-radius: 16px;
  }
  .dv-l-br-xl {
    border-radius: 32px;
  }
  .dv-l-br-2xl {
    border-radius: 64px;
  }
  .dv-l-br-50pc {
    border-radius: 50%;
  }
}
/* device-xl */
@media all and (min-width: 1200px) {
  .dv-xl-br-0 {
    border-radius: 0;
  }
  .dv-xl-br-xs {
    border-radius: 2px;
  }
  .dv-xl-br-s {
    border-radius: 4px;
  }
  .dv-xl-br-m {
    border-radius: 8px;
  }
  .dv-xl-br-l {
    border-radius: 16px;
  }
  .dv-xl-br-xl {
    border-radius: 32px;
  }
  .dv-xl-br-2xl {
    border-radius: 64px;
  }
  .dv-xl-br-50pc {
    border-radius: 50%;
  }
}
/* Font size */
.fs-0 {
  font-size: 0;
}

.fs-xs {
  font-size: 10px;
}

.fs-s {
  font-size: 12px;
}

.fs-m {
  font-size: 16px;
}

.fs-l {
  font-size: 32px;
}

.fs-xl {
  font-size: 64px;
}

/* device-s */
@media all and (max-width: 767px) {
  .dv-s-fs-xs {
    font-size: 10px;
  }
  .dv-s-fs-s {
    font-size: 12px;
  }
  .dv-s-fs-m {
    font-size: 16px;
  }
  .dv-s-fs-l {
    font-size: 32px;
  }
  .dv-s-fs-xl {
    font-size: 64px;
  }
}
/* device-m */
@media all and (min-width: 768px) and (max-width: 899px) {
  .dv-m-fs-xs {
    font-size: 10px;
  }
  .dv-m-fs-s {
    font-size: 12px;
  }
  .dv-m-fs-m {
    font-size: 16px;
  }
  .dv-m-fs-l {
    font-size: 32px;
  }
  .dv-m-fs-xl {
    font-size: 64px;
  }
}
/* device-l */
@media all and (min-width: 900px) and (max-width: 1199px) {
  .dv-l-fs-xs {
    font-size: 10px;
  }
  .dv-l-fs-s {
    font-size: 12px;
  }
  .dv-l-fs-m {
    font-size: 16px;
  }
  .dv-l-fs-l {
    font-size: 32px;
  }
  .dv-l-fs-xl {
    font-size: 64px;
  }
}
/* device-xl */
@media all and (min-width: 1200px) {
  .dv-xl-fs-xs {
    font-size: 10px;
  }
  .dv-xl-fs-s {
    font-size: 12px;
  }
  .dv-xl-fs-m {
    font-size: 16px;
  }
  .dv-xl-fs-l {
    font-size: 32px;
  }
  .dv-xl-fs-xl {
    font-size: 64px;
  }
}
/* display */
.d-ifl {
  display: inline-flex;
}

.d-fl {
  display: flex;
}

.d-i {
  display: inline;
}

.d-b {
  display: block;
}

.d-ib {
  display: inline-block;
}

/* device-s */
@media all and (max-width: 767px) {
  .dv-s-d-ifl {
    display: inline-flex;
  }
  .dv-s-d-fl {
    display: flex;
  }
  .dv-s-d-i {
    display: inline;
  }
  .dv-s-d-b {
    display: block;
  }
  .dv-s-d-ib {
    display: inline-block;
  }
}
/* device-m */
@media all and (min-width: 768px) and (max-width: 899px) {
  .dv-m-d-ifl {
    display: inline-flex;
  }
  .dv-m-d-fl {
    display: flex;
  }
  .dv-m-d-i {
    display: inline;
  }
  .dv-m-d-b {
    display: block;
  }
  .dv-m-d-ib {
    display: inline-block;
  }
}
/* device-l */
@media all and (min-width: 900px) and (max-width: 1199px) {
  .dv-l-d-ifl {
    display: inline-flex;
  }
  .dv-l-d-fl {
    display: flex;
  }
  .dv-l-d-i {
    display: inline;
  }
  .dv-l-d-b {
    display: block;
  }
  .dv-l-d-ib {
    display: inline-block;
  }
}
/* device-xl */
@media all and (min-width: 1200px) {
  .dv-xl-d-ifl {
    display: inline-flex;
  }
  .dv-xl-d-fl {
    display: flex;
  }
  .dv-xl-d-i {
    display: inline;
  }
  .dv-xl-d-b {
    display: block;
  }
  .dv-xl-d-ib {
    display: inline-block;
  }
}
/* position */
.rel {
  position: relative;
}

/* Alignment */
.al {
  text-align: left;
}

.ac {
  text-align: center;
}

.ar {
  text-align: right;
}

/* device-s */
@media all and (max-width: 767px) {
  .dv-s-al {
    text-align: left;
  }
  .dv-s-ac {
    text-align: center;
  }
  .dv-s-ar {
    text-align: right;
  }
}
/* device-m */
@media all and (min-width: 768px) and (max-width: 899px) {
  .dv-m-al {
    text-align: left;
  }
  .dv-m-ac {
    text-align: center;
  }
  .dv-m-ar {
    text-align: right;
  }
}
/* device-l */
@media all and (min-width: 900px) and (max-width: 1199px) {
  .dv-l-al {
    text-align: left;
  }
  .dv-l-ac {
    text-align: center;
  }
  .dv-l-ar {
    text-align: right;
  }
}
/* device-xl */
@media all and (min-width: 1200px) {
  .dv-xl-al {
    text-align: left;
  }
  .dv-xl-ac {
    text-align: center;
  }
  .dv-xl-ar {
    text-align: right;
  }
}
/* Vars */
:root {
  --pinned-section-height: 400vh;
  --sticky-content-background: transparent;
  --sticky-content-color: #222;
}

/* Pinned section */
.pinned-section {
  position: relative;
  height: var(--pinned-section-height, 400vh);
}

/* Sticky content */
.sticky-content {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--sticky-content-background, transparent);
  color: var(--sticky-content-color, #222);
}

.sticky-content .sideways-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px; /* thickness of the strip */
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center; /* vertical centering */
  justify-content: center; /* horizontal centering */
}

.sticky-content .sideways-title h2 {
  margin: 0;
  transform: rotate(-90deg);
  white-space: nowrap; /* prevent wrapping */
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 16px;
}

section.tripple-left {
  font-size: 0;
}

section.tripple-left .cols {
  height: 100%;
}

section.tripple-right {
  font-size: 0;
}

section.tripple-right .cols {
  height: 100%;
}

/* Padding */
.p-0 {
  padding: 0;
}

.p-xs {
  padding: 4px;
}

.p-s {
  padding: 8px;
}

.p-m {
  padding: 16px;
}

.p-l {
  padding: 32px;
}

.p-xl {
  padding: 64px;
}

.pt-0 {
  padding-top: 0;
}

.pt-xs {
  padding-top: 4px;
}

.pt-s {
  padding-top: 8px;
}

.pt-m {
  padding-top: 16px;
}

.pt-l {
  padding-top: 32px;
}

.pt-xl {
  padding-top: 64px;
}

.pr-0 {
  padding-right: 0;
}

.pr-xs {
  padding-right: 4px;
}

.pr-s {
  padding-right: 8px;
}

.pr-m {
  padding-right: 16px;
}

.pr-l {
  padding-right: 32px;
}

.pr-xl {
  padding-right: 64px;
}

.pb-0 {
  padding-bottom: 0;
}

.pb-xs {
  padding-bottom: 4px;
}

.pb-s {
  padding-bottom: 8px;
}

.pb-m {
  padding-bottom: 16px;
}

.pb-l {
  padding-bottom: 32px;
}

.pb-xl {
  padding-bottom: 64px;
}

.pl-0 {
  padding-left: 0;
}

.pl-xs {
  padding-left: 4px;
}

.pl-s {
  padding-left: 8px;
}

.pl-m {
  padding-left: 16px;
}

.pl-l {
  padding-left: 32px;
}

.pl-xl {
  padding-left: 64px;
}

/* device-s */
@media all and (max-width: 767px) {
  .dv-s-p-0 {
    padding: 0;
  }
  .dv-s-p-xs {
    padding: 4px;
  }
  .dv-s-p-s {
    padding: 8px;
  }
  .dv-s-p-m {
    padding: 16px;
  }
  .dv-s-p-l {
    padding: 32px;
  }
  .dv-s-p-xl {
    padding: 64px;
  }
  .dv-s-pt-0 {
    padding-top: 0;
  }
  .dv-s-pt-xs {
    padding-top: 4px;
  }
  .dv-s-pt-s {
    padding-top: 8px;
  }
  .dv-s-pt-m {
    padding-top: 16px;
  }
  .dv-s-pt-l {
    padding-top: 32px;
  }
  .dv-s-pt-xl {
    padding-top: 64px;
  }
  .dv-s-pr-0 {
    padding-right: 0;
  }
  .dv-s-pr-xs {
    padding-right: 4px;
  }
  .dv-s-pr-s {
    padding-right: 8px;
  }
  .dv-s-pr-m {
    padding-right: 16px;
  }
  .dv-s-pr-l {
    padding-right: 32px;
  }
  .dv-s-pr-xl {
    padding-right: 64px;
  }
  .dv-s-pb-0 {
    padding-bottom: 0;
  }
  .dv-s-pb-xs {
    padding-bottom: 4px;
  }
  .dv-s-pb-s {
    padding-bottom: 8px;
  }
  .dv-s-pb-m {
    padding-bottom: 16px;
  }
  .dv-s-pb-l {
    padding-bottom: 32px;
  }
  .dv-s-pb-xl {
    padding-bottom: 64px;
  }
  .dv-s-pl-0 {
    padding-left: 0;
  }
  .dv-s-pl-xs {
    padding-left: 4px;
  }
  .dv-s-pl-s {
    padding-left: 8px;
  }
  .dv-s-pl-m {
    padding-left: 16px;
  }
  .dv-s-pl-l {
    padding-left: 32px;
  }
  .dv-s-pl-xl {
    padding-left: 64px;
  }
}
/* device-m */
@media all and (min-width: 768px) and (max-width: 899px) {
  .dv-m-p-0 {
    padding: 0;
  }
  .dv-m-p-xs {
    padding: 4px;
  }
  .dv-m-p-s {
    padding: 8px;
  }
  .dv-m-p-m {
    padding: 16px;
  }
  .dv-m-p-l {
    padding: 32px;
  }
  .dv-m-p-xl {
    padding: 64px;
  }
  .dv-m-pt-0 {
    padding-top: 0;
  }
  .dv-m-pt-xs {
    padding-top: 4px;
  }
  .dv-m-pt-s {
    padding-top: 8px;
  }
  .dv-m-pt-m {
    padding-top: 16px;
  }
  .dv-m-pt-l {
    padding-top: 32px;
  }
  .dv-m-pt-xl {
    padding-top: 64px;
  }
  .dv-m-pr-0 {
    padding-right: 0;
  }
  .dv-m-pr-xs {
    padding-right: 4px;
  }
  .dv-m-pr-s {
    padding-right: 8px;
  }
  .dv-m-pr-m {
    padding-right: 16px;
  }
  .dv-m-pr-l {
    padding-right: 32px;
  }
  .dv-m-pr-xl {
    padding-right: 64px;
  }
  .dv-m-pb-0 {
    padding-bottom: 0;
  }
  .dv-m-pb-xs {
    padding-bottom: 4px;
  }
  .dv-m-pb-s {
    padding-bottom: 8px;
  }
  .dv-m-pb-m {
    padding-bottom: 16px;
  }
  .dv-m-pb-l {
    padding-bottom: 32px;
  }
  .dv-m-pb-xl {
    padding-bottom: 64px;
  }
  .dv-m-pl-0 {
    padding-left: 0;
  }
  .dv-m-pl-xs {
    padding-left: 4px;
  }
  .dv-m-pl-s {
    padding-left: 8px;
  }
  .dv-m-pl-m {
    padding-left: 16px;
  }
  .dv-m-pl-l {
    padding-left: 32px;
  }
  .dv-m-pl-xl {
    padding-left: 64px;
  }
}
/* device-l */
@media all and (min-width: 900px) and (max-width: 1199px) {
  .dv-l-p-0 {
    padding: 0;
  }
  .dv-l-p-xs {
    padding: 4px;
  }
  .dv-l-p-s {
    padding: 8px;
  }
  .dv-l-p-m {
    padding: 16px;
  }
  .dv-l-p-l {
    padding: 32px;
  }
  .dv-l-p-xl {
    padding: 64px;
  }
  .dv-l-pt-0 {
    padding-top: 0;
  }
  .dv-l-pt-xs {
    padding-top: 4px;
  }
  .dv-l-pt-s {
    padding-top: 8px;
  }
  .dv-l-pt-m {
    padding-top: 16px;
  }
  .dv-l-pt-l {
    padding-top: 32px;
  }
  .dv-l-pt-xl {
    padding-top: 64px;
  }
  .dv-l-pr-0 {
    padding-right: 0;
  }
  .dv-l-pr-xs {
    padding-right: 4px;
  }
  .dv-l-pr-s {
    padding-right: 8px;
  }
  .dv-l-pr-m {
    padding-right: 16px;
  }
  .dv-l-pr-l {
    padding-right: 32px;
  }
  .dv-l-pr-xl {
    padding-right: 64px;
  }
  .dv-l-pb-0 {
    padding-bottom: 0;
  }
  .dv-l-pb-xs {
    padding-bottom: 4px;
  }
  .dv-l-pb-s {
    padding-bottom: 8px;
  }
  .dv-l-pb-m {
    padding-bottom: 16px;
  }
  .dv-l-pb-l {
    padding-bottom: 32px;
  }
  .dv-l-pb-xl {
    padding-bottom: 64px;
  }
  .dv-l-pl-0 {
    padding-left: 0;
  }
  .dv-l-pl-xs {
    padding-left: 4px;
  }
  .dv-l-pl-s {
    padding-left: 8px;
  }
  .dv-l-pl-m {
    padding-left: 16px;
  }
  .dv-l-pl-l {
    padding-left: 32px;
  }
  .dv-l-pl-xl {
    padding-left: 64px;
  }
}
/* device-xl */
@media all and (min-width: 1200px) {
  .dv-xl-p-0 {
    padding: 0;
  }
  .dv-xl-p-xs {
    padding: 4px;
  }
  .dv-xl-p-s {
    padding: 8px;
  }
  .dv-xl-p-m {
    padding: 16px;
  }
  .dv-xl-p-l {
    padding: 32px;
  }
  .dv-xl-p-xl {
    padding: 64px;
  }
  .dv-xl-pt-0 {
    padding-top: 0;
  }
  .dv-xl-pt-xs {
    padding-top: 4px;
  }
  .dv-xl-pt-s {
    padding-top: 8px;
  }
  .dv-xl-pt-m {
    padding-top: 16px;
  }
  .dv-xl-pt-l {
    padding-top: 32px;
  }
  .dv-xl-pt-xl {
    padding-top: 64px;
  }
  .dv-xl-pr-0 {
    padding-right: 0;
  }
  .dv-xl-pr-xs {
    padding-right: 4px;
  }
  .dv-xl-pr-s {
    padding-right: 8px;
  }
  .dv-xl-pr-m {
    padding-right: 16px;
  }
  .dv-xl-pr-l {
    padding-right: 32px;
  }
  .dv-xl-pr-xl {
    padding-right: 64px;
  }
  .dv-xl-pb-0 {
    padding-bottom: 0;
  }
  .dv-xl-pb-xs {
    padding-bottom: 4px;
  }
  .dv-xl-pb-s {
    padding-bottom: 8px;
  }
  .dv-xl-pb-m {
    padding-bottom: 16px;
  }
  .dv-xl-pb-l {
    padding-bottom: 32px;
  }
  .dv-xl-pb-xl {
    padding-bottom: 64px;
  }
  .dv-xl-pl-0 {
    padding-left: 0;
  }
  .dv-xl-pl-xs {
    padding-left: 4px;
  }
  .dv-xl-pl-s {
    padding-left: 8px;
  }
  .dv-xl-pl-m {
    padding-left: 16px;
  }
  .dv-xl-pl-l {
    padding-left: 32px;
  }
  .dv-xl-pl-xl {
    padding-left: 64px;
  }
}
/* Margin */
.m-0 {
  margin: 0;
}

.m-xs {
  margin: 4px;
}

.m-s {
  margin: 8px;
}

.m-m {
  margin: 16px;
}

.m-l {
  margin: 32px;
}

.m-xl {
  margin: 64px;
}

.mt-0 {
  margin-top: 0;
}

.mt-xs {
  margin-top: 4px;
}

.mt-s {
  margin-top: 8px;
}

.mt-m {
  margin-top: 16px;
}

.mt-l {
  margin-top: 32px;
}

.mt-xl {
  margin-top: 64px;
}

.mr-a {
  margin-right: auto;
}

.mr-0 {
  margin-right: 0;
}

.mr-xs {
  margin-right: 4px;
}

.mr-s {
  margin-right: 8px;
}

.mr-m {
  margin-right: 16px;
}

.mr-l {
  margin-right: 32px;
}

.mr-xl {
  margin-right: 64px;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-xs {
  margin-bottom: 4px;
}

.mb-s {
  margin-bottom: 8px;
}

.mb-m {
  margin-bottom: 16px;
}

.mb-l {
  margin-bottom: 32px;
}

.mb-xl {
  margin-bottom: 64px;
}

.ml-a {
  margin-left: auto;
}

.ml-0 {
  margin-left: 0;
}

.ml-xs {
  margin-left: 4px;
}

.ml-s {
  margin-left: 8px;
}

.ml-m {
  margin-left: 16px;
}

.ml-l {
  margin-left: 32px;
}

.ml-xl {
  margin-left: 64px;
}

/* device-s */
@media all and (max-width: 767px) {
  .dv-s-m-0 {
    margin: 0;
  }
  .dv-s-m-xs {
    margin: 4px;
  }
  .dv-s-m-s {
    margin: 8px;
  }
  .dv-s-m-m {
    margin: 16px;
  }
  .dv-s-m-l {
    margin: 32px;
  }
  .dv-s-m-xl {
    margin: 64px;
  }
  .dv-s-mt-0 {
    margin-top: 0;
  }
  .dv-s-mt-xs {
    margin-top: 4px;
  }
  .dv-s-mt-s {
    margin-top: 8px;
  }
  .dv-s-mt-m {
    margin-top: 16px;
  }
  .dv-s-mt-l {
    margin-top: 32px;
  }
  .dv-s-mt-xl {
    margin-top: 64px;
  }
  .dv-s-mr-a {
    margin-right: auto;
  }
  .dv-s-mr-0 {
    margin-right: 0;
  }
  .dv-s-mr-xs {
    margin-right: 4px;
  }
  .dv-s-mr-s {
    margin-right: 8px;
  }
  .dv-s-mr-m {
    margin-right: 16px;
  }
  .dv-s-mr-l {
    margin-right: 32px;
  }
  .dv-s-mr-xl {
    margin-right: 64px;
  }
  .dv-s-mb-0 {
    margin-bottom: 0;
  }
  .dv-s-mb-xs {
    margin-bottom: 4px;
  }
  .dv-s-mb-s {
    margin-bottom: 8px;
  }
  .dv-s-mb-m {
    margin-bottom: 16px;
  }
  .dv-s-mb-l {
    margin-bottom: 32px;
  }
  .dv-s-mb-xl {
    margin-bottom: 64px;
  }
  .dv-s-ml-a {
    margin-left: auto;
  }
  .dv-s-ml-0 {
    margin-left: 0;
  }
  .dv-s-ml-xs {
    margin-left: 4px;
  }
  .dv-s-ml-s {
    margin-left: 8px;
  }
  .dv-s-ml-m {
    margin-left: 16px;
  }
  .dv-s-ml-l {
    margin-left: 32px;
  }
  .dv-s-ml-xl {
    margin-left: 64px;
  }
}
/* device-m */
@media all and (min-width: 768px) and (max-width: 899px) {
  .dv-m-m-0 {
    margin: 0;
  }
  .dv-m-m-xs {
    margin: 4px;
  }
  .dv-m-m-s {
    margin: 8px;
  }
  .dv-m-m-m {
    margin: 16px;
  }
  .dv-m-m-l {
    margin: 32px;
  }
  .dv-m-m-xl {
    margin: 64px;
  }
  .dv-m-mt-0 {
    margin-top: 0;
  }
  .dv-m-mt-xs {
    margin-top: 4px;
  }
  .dv-m-mt-s {
    margin-top: 8px;
  }
  .dv-m-mt-m {
    margin-top: 16px;
  }
  .dv-m-mt-l {
    margin-top: 32px;
  }
  .dv-m-mt-xl {
    margin-top: 64px;
  }
  .dv-m-mr-a {
    margin-left: auto;
  }
  .dv-m-mr-0 {
    margin-right: 0;
  }
  .dv-m-mr-xs {
    margin-right: 4px;
  }
  .dv-m-mr-s {
    margin-right: 8px;
  }
  .dv-m-mr-m {
    margin-right: 16px;
  }
  .dv-m-mr-l {
    margin-right: 32px;
  }
  .dv-m-mr-xl {
    margin-right: 64px;
  }
  .dv-m-mb-0 {
    margin-bottom: 0;
  }
  .dv-m-mb-xs {
    margin-bottom: 4px;
  }
  .dv-m-mb-s {
    margin-bottom: 8px;
  }
  .dv-m-mb-m {
    margin-bottom: 16px;
  }
  .dv-m-mb-l {
    margin-bottom: 32px;
  }
  .dv-m-mb-xl {
    margin-bottom: 64px;
  }
  .dv-m-ml-a {
    margin-left: auto;
  }
  .dv-m-ml-0 {
    margin-left: 0;
  }
  .dv-m-ml-xs {
    margin-left: 4px;
  }
  .dv-m-ml-s {
    margin-left: 8px;
  }
  .dv-m-ml-m {
    margin-left: 16px;
  }
  .dv-m-ml-l {
    margin-left: 32px;
  }
  .dv-m-ml-xl {
    margin-left: 64px;
  }
}
/* device-l */
@media all and (min-width: 900px) and (max-width: 1199px) {
  .dv-l-m-0 {
    margin: 0;
  }
  .dv-l-m-xs {
    margin: 4px;
  }
  .dv-l-m-s {
    margin: 8px;
  }
  .dv-l-m-m {
    margin: 16px;
  }
  .dv-l-m-l {
    margin: 32px;
  }
  .dv-l-m-xl {
    margin: 64px;
  }
  .dv-l-mt-0 {
    margin-top: 0;
  }
  .dv-l-mt-xs {
    margin-top: 4px;
  }
  .dv-l-mt-s {
    margin-top: 8px;
  }
  .dv-l-mt-m {
    margin-top: 16px;
  }
  .dv-l-mt-l {
    margin-top: 32px;
  }
  .dv-l-mt-xl {
    margin-top: 64px;
  }
  .dv-l-mr-a {
    margin-left: auto;
  }
  .dv-l-mr-0 {
    margin-right: 0;
  }
  .dv-l-mr-xs {
    margin-right: 4px;
  }
  .dv-l-mr-s {
    margin-right: 8px;
  }
  .dv-l-mr-m {
    margin-right: 16px;
  }
  .dv-l-mr-l {
    margin-right: 32px;
  }
  .dv-l-mr-xl {
    margin-right: 64px;
  }
  .dv-l-mb-0 {
    margin-bottom: 0;
  }
  .dv-l-mb-xs {
    margin-bottom: 4px;
  }
  .dv-l-mb-s {
    margin-bottom: 8px;
  }
  .dv-l-mb-m {
    margin-bottom: 16px;
  }
  .dv-l-mb-l {
    margin-bottom: 32px;
  }
  .dv-l-mb-xl {
    margin-bottom: 64px;
  }
  .dv-l-ml-a {
    margin-left: auto;
  }
  .dv-l-ml-0 {
    margin-left: 0;
  }
  .dv-l-ml-xs {
    margin-left: 4px;
  }
  .dv-l-ml-s {
    margin-left: 8px;
  }
  .dv-l-ml-m {
    margin-left: 16px;
  }
  .dv-l-ml-l {
    margin-left: 32px;
  }
  .dv-l-ml-xl {
    margin-left: 64px;
  }
}
/* device-xl */
@media all and (min-width: 1200px) {
  .dv-xl-m-0 {
    margin: 0;
  }
  .dv-xl-m-xs {
    margin: 4px;
  }
  .dv-xl-m-s {
    margin: 8px;
  }
  .dv-xl-m-m {
    margin: 16px;
  }
  .dv-xl-m-l {
    margin: 32px;
  }
  .dv-xl-m-xl {
    margin: 64px;
  }
  .dv-xl-mt-0 {
    margin-top: 0;
  }
  .dv-xl-mt-xs {
    margin-top: 4px;
  }
  .dv-xl-mt-s {
    margin-top: 8px;
  }
  .dv-xl-mt-m {
    margin-top: 16px;
  }
  .dv-xl-mt-l {
    margin-top: 32px;
  }
  .dv-xl-mt-xl {
    margin-top: 64px;
  }
  .dv-xl-mr-a {
    margin-left: auto;
  }
  .dv-xl-mr-0 {
    margin-right: 0;
  }
  .dv-xl-mr-xs {
    margin-right: 4px;
  }
  .dv-xl-mr-s {
    margin-right: 8px;
  }
  .dv-xl-mr-m {
    margin-right: 16px;
  }
  .dv-xl-mr-l {
    margin-right: 32px;
  }
  .dv-xl-mr-xl {
    margin-right: 64px;
  }
  .dv-xl-mb-0 {
    margin-bottom: 0;
  }
  .dv-xl-mb-xs {
    margin-bottom: 4px;
  }
  .dv-xl-mb-s {
    margin-bottom: 8px;
  }
  .dv-xl-mb-m {
    margin-bottom: 16px;
  }
  .dv-xl-mb-l {
    margin-bottom: 32px;
  }
  .dv-xl-mb-xl {
    margin-bottom: 64px;
  }
  .dv-xl-ml-a {
    margin-left: auto;
  }
  .dv-xl-ml-0 {
    margin-left: 0;
  }
  .dv-xl-ml-xs {
    margin-left: 4px;
  }
  .dv-xl-ml-s {
    margin-left: 8px;
  }
  .dv-xl-ml-m {
    margin-left: 16px;
  }
  .dv-xl-ml-l {
    margin-left: 32px;
  }
  .dv-xl-ml-xl {
    margin-left: 64px;
  }
}
/* Spacing */
.s-0 {
  height: 0;
}

.s-xs {
  height: 4px;
}

.s-s {
  height: 8px;
}

.s-m {
  height: 16px;
}

.s-l {
  height: 32px;
}

.s-xl {
  height: 64px;
}

/* device-s */
@media all and (max-width: 767px) {
  .dv-s-s-0 {
    height: 0;
  }
  .dv-s-s-xs {
    height: 4px;
  }
  .dv-s-s-s {
    height: 8px;
  }
  .dv-s-s-m {
    height: 16px;
  }
  .dv-s-s-l {
    height: 32px;
  }
  .dv-s-s-xl {
    height: 64px;
  }
}
/* device-m */
@media all and (min-width: 768px) and (max-width: 899px) {
  .dv-m-s-0 {
    height: 0;
  }
  .dv-m-s-xs {
    height: 4px;
  }
  .dv-m-s-s {
    height: 8px;
  }
  .dv-m-s-m {
    height: 16px;
  }
  .dv-m-s-l {
    height: 32px;
  }
  .dv-m-s-xl {
    height: 64px;
  }
}
/* device-l */
@media all and (min-width: 900px) and (max-width: 1199px) {
  .dv-l-s-0 {
    height: 0;
  }
  .dv-l-s-xs {
    height: 4px;
  }
  .dv-l-s-s {
    height: 8px;
  }
  .dv-l-s-m {
    height: 16px;
  }
  .dv-l-s-l {
    height: 32px;
  }
  .dv-l-s-xl {
    height: 64px;
  }
}
/* device-xl */
@media all and (min-width: 1200px) {
  .dv-xl-s-0 {
    height: 0;
  }
  .dv-xl-s-xs {
    height: 4px;
  }
  .dv-xl-s-s {
    height: 8px;
  }
  .dv-xl-s-m {
    height: 16px;
  }
  .dv-xl-s-l {
    height: 32px;
  }
  .dv-xl-s-xl {
    height: 64px;
  }
}
:root {
  --stroke-size: 1px;
  --stroke-color: #ccc;
}

hr.stroke {
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  border: none;
  border-top: var(--stroke-size, 1px) solid var(--stroke-color, #eee);
}

/* Modern, flexible table styling (works with or without <thead>/<tbody>) */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
  line-height: 1.35;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden; /* helps when table is wrapped or used with border-radius */
}

/* Cells */
.table th,
.table td {
  padding: 0.85rem 1rem;
  vertical-align: top;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Header cells (covers real <thead> and “header row” without <thead>) */
.table thead th,
.table tr:first-child > th {
  text-align: left;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

/* Remove last row divider (works with or without <tbody>) */
.table tbody tr:last-child > *,
.table > tr:last-child > * {
  border-bottom: 0;
}

/* Zebra + hover (safe when <tbody> missing) */
.table tbody tr:nth-child(even),
.table > tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.015);
}

.table tbody tr:hover,
.table > tr:hover {
  background: rgba(59, 130, 246, 0.08);
}

/* Sortable header affordance (optional) */
.table th[aria-sort] {
  cursor: pointer;
}

.table th[aria-sort=ascending]::after {
  content: " ▲";
  font-size: 0.8em;
  opacity: 0.6;
}

.table th[aria-sort=descending]::after {
  content: " ▼";
  font-size: 0.8em;
  opacity: 0.6;
}

/* Numeric alignment helper */
.table .is-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Optional sticky header (requires a scroll container) */
.table.is-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Responsive: horizontal scroll wrapper */
.table-wrap {
  display: grid;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px; /* matches .table */
}

/* Nice focus for keyboard users if rows/links are focusable */
.table :focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.65);
  outline-offset: 2px;
}

section.showcase {
  padding-left: 16px;
  padding-right: 16px;
  /* background: linear-gradient(to bottom, #004291 30%, #fff 30%, #fff 100%); */
  background: linear-gradient(to bottom, #222 30%, #fff 30%, #fff 100%);
}

/* Logo */
section.showcase img.logo {
  opacity: 0;
}

section.showcase img.logo-white {
  filter: brightness(0) invert(1);
}

/* Screenshot */
section.showcase .main-feature {
  position: relative;
  border-top-left-radius: 48px;
  border-top-right-radius: 48px;
  max-height: 50vh;
  box-shadow: 1px -16px 16px -14px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 1px -16px 16px -14px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 1px -16px 16px -14px rgba(0, 0, 0, 0.25);
  background: #fff;
  overflow: hidden;
}

section.showcase .main-feature:after {
  z-index: 3;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 150px;
  background: linear-gradient(to top, #fff 10%, transparent 100%);
  pointer-events: none;
}

section.showcase .main-feature img {
  max-width: 100%;
}

/* device-s */
@media all and (max-width: 767px) {
  section.showcase .main-feature {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }
}
/* device-m */
@media all and (min-width: 768px) and (max-width: 899px) {
  section.showcase .main-feature {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }
}
/* device-l */
@media all and (min-width: 900px) and (max-width: 1199px) {
  section.showcase .main-feature {
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
  }
}
/* device-xl */
@media all and (min-width: 1200px) {
  ul.modern-list.dv-xl-ls-n,
  ol.modern-list.dv-xl-ls-n {
    --modern-list-marker-shape: '';
  }
}
/* iMac */
section.showcase .main-feature .imac {
  position: relative;
  padding-bottom: 81.8%;
  transform: translateY(100%); /* completely below its final position */
}

section.showcase .main-feature .imac .device-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

section.showcase .main-feature .imac .screen {
  position: absolute;
  left: 3.4006376196%;
  top: 5.7142857143%;
  width: 93.1987247609%;
  height: 63.3766233766%;
  background: red;
}

section.showcase .main-feature .imac .screen img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}

section.strip {
  position: relative;
  /* border-top: 8px solid #fff;
  border-bottom: 8px solid #fff; */
  overflow: hidden;
}

section.strip .strip-bg {
  z-index: -1;
  position: absolute;
  right: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background: #eee;
}

section.strip .left-col {
  opacity: 0;
  transform: translateY(30px);
}

section.strip .right-col li {
  opacity: 0;
  transform: translateX(40px);
}

section.text-block {
  opacity: 0;
}

:root {
  --video-strip-min-height: 240px;
  --video-strip-background-color: #222;
  --video-strip-color: #fff;
}

section.video-strip {
  display: flex;
  align-items: center;
  position: relative;
  min-height: var(--video-strip-min-height, 240px);
  color: var(--video-strip-color, "#fff");
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

section.video-strip .video-strip-bg {
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--video-strip-background-color, #222);
  opacity: 0;
}

section.video-strip .video-strip-bg img,
section.video-strip .video-strip-bg video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

section.video-strip .video-strip-content {
  width: 100%;
  opacity: 0;
}

/* Titles */
.section-four-blocks .title h1,
.section-four-blocks .title h2 {
  color: #222;
  /* text-shadow: 0px 4px 16px rgba(1, 1, 1, 0.2); */
}

/* Section */
.section-four-blocks {
  background: #fff;
}

/* Four blocks */
.section-four-blocks .four-blocks > * {
  line-height: 1;
  text-align: left;
}

.section-four-blocks .four-blocks > *.empty {
  align-content: center;
  text-align: center;
}

.section-four-blocks .four-blocks a {
  text-decoration: none;
  color: inherit;
}

.section-four-blocks .four-blocks .title {
  position: relative;
  margin: 8px 0 0 0;
  font-weight: 700;
  text-align: right;
}

.section-four-blocks .four-blocks .title .exp {
  position: relative;
}

.section-four-blocks .four-blocks .title .exp:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 60px;
  height: 1px;
  margin-top: -2px;
  border-top: 2px solid #222;
  will-change: width;
  transition: width 0.4s 0.0001s ease-in-out;
}

.section-four-blocks .four-blocks a:hover .title .exp:after {
  width: 100%;
}

/* Block with text / key points */
.section-four-blocks .content-wrap {
  position: relative;
  padding-bottom: 66.6666666%;
  /* Diagonal metallic gradient (bottom-left → top-right) */
  background: linear-gradient(135deg, #ccc 0%, #f7f7f7 40%, #ffffff 50%, #f7f7f7 60%, #ccc 100%);
  background-size: cover; /* fill the box */
}

.section-four-blocks .content-wrap .content {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.section-four-blocks .key-points ul,
.section-four-blocks .key-points li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* GPT */
.section-four-blocks .key-points li {
  background: #fff;
  border-radius: 10px;
  margin-top: 16px;
  padding: 12px 18px;
  font-size: 1rem;
  font-weight: 500;
  color: #333;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  opacity: 0; /* hidden by default for animation */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.section-four-blocks .key-points li:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
}

.section-four-blocks .key-points li:first-child {
  margin-top: 0;
}

.section-four-blocks .content h2,
.section-four-blocks .content h3 {
  opacity: 0; /* gsap will animate in */
  text-align: center;
  line-height: 1.3;
}

.section-four-blocks .content h2 {
  font-size: 1.6rem;
  font-weight: 700;
}

.section-four-blocks .content h3 {
  font-size: 1.1rem;
  font-weight: 400;
  color: #666;
}

.section-intro-video {
  position: relative;
  height: 100vh;
  background: #222;
  color: #fff;
  animation: rainbow 20s infinite linear;
}

@keyframes rainbow {
  0% {
    background-color: #fff;
  }
  100% {
    background-color: #fff;
  }
}
.section-intro-video > * {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.section-intro-video > .video-content {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: #444;
}

.section-our-clients-marquees {
  padding-bottom: 64px;
  background: #222;
}

:root {
  --our-clients-marquees-row-gap: 18px;
  --our-clients-marquees-item-gap: 12px;
  --our-clients-marquees-overlay-scale: 0.6;
  --our-clients-marquees-overlay-hover-scale: 1;
  --our-clients-marquees-name-font: 16px;
  --our-clients-marquees-tint-bg: rgba(0,0,0,0.45);
  --our-clients-marquees-items-per-row: 4; /* change here */
}

.our-clients-marquees {
  display: flex;
  flex-direction: column;
  gap: var(--our-clients-marquees-row-gap);
  overflow: hidden;
}

.our-clients-marquees .row {
  overflow: hidden;
}

.our-clients-marquees .track-wrap {
  overflow: hidden;
  width: 100%;
}

.our-clients-marquees .track {
  display: flex;
  gap: var(--our-clients-marquees-item-gap);
  flex-wrap: nowrap;
  align-items: center;
  animation: marquee-scroll linear infinite;
}

.our-clients-marquees .row.reverse .track {
  animation-direction: reverse;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% - var(--our-clients-marquees-item-gap)));
  }
}
.our-clients-marquees .item {
  flex: 0 0 calc((100% - var(--our-clients-marquees-item-gap) * (var(--our-clients-marquees-items-per-row) - 1)) / var(--our-clients-marquees-items-per-row));
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  background: #111;
}

.our-clients-marquees .item img {
  width: 100%;
  aspect-ratio: 1695/1061;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.our-clients-marquees .name-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--our-clients-marquees-overlay-scale));
  transform-origin: center center;
  padding: 6px 10px;
  border-radius: 6px;
  transition: transform 280ms, background 280ms;
  display: inline-block;
  min-width: 60%;
  text-align: center;
  font-size: var(--our-clients-marquees-name-font);
  color: #fff;
  pointer-events: none;
  background: rgba(0, 0, 0, 0);
  opacity: 0;
}

.our-clients-marquees .name-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--our-clients-marquees-tint-bg);
  opacity: 0;
  transition: opacity 280ms ease;
  z-index: -1;
}

.our-clients-marquees .item:hover .name-overlay {
  opacity: 1;
  transform: translate(-50%, -50%) scale(var(--our-clients-marquees-overlay-hover-scale));
}

.our-clients-marquees .item:hover .name-overlay::before {
  opacity: 1;
}

.our-clients-marquees a.item {
  text-decoration: none;
  color: inherit;
  display: block;
}

@media (max-width: 900px) {
  :root {
    --our-clients-marquees-name-font: 14px;
    --our-clients-marquees-item-gap: 10px;
  }
}
@media (max-width: 520px) {
  :root {
    --our-clients-marquees-name-font: 13px;
    --our-clients-marquees-item-gap: 8px;
  }
}
.section-our-heritage {
  --section-our-heritage-background-color: #222;
  --section-our-heritage-color: #fff;
  background: var(--section-our-heritage-background-color, #eee);
  color: var(--section-our-heritage-color, #222);
}

.industry-column {
  position: relative;
  height: 200px; /* shows active + partials */
  overflow: hidden;
}

.section-our-heritage .industry-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.industry-item {
  flex: 0 0 80px; /* consistent height */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  opacity: 0.4;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.industry-item.active {
  opacity: 1;
  font-weight: bold;
  transform: scale(1.1);
}

.section-our-heritage .industry-column::before,
.section-our-heritage .industry-column::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  pointer-events: none;
  z-index: 2;
}

.section-our-heritage .industry-column::before {
  top: 0;
  background: linear-gradient(to bottom, var(--section-our-heritage-background-color, #eee), transparent);
}

.section-our-heritage .industry-column::after {
  bottom: 0;
  background: linear-gradient(to top, var(--section-our-heritage-background-color, #eee), transparent);
}

.section-our-heritage .logos-column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  justify-items: center;
  align-items: center;
}

.section-our-heritage .logos-column img {
  width: 100px;
  height: 60px;
  opacity: 0;
  transform: scale(0);
  -o-object-fit: contain;
     object-fit: contain;
  padding: 16px;
  border-radius: 8px;
  background: #fff;
}/*# sourceMappingURL=style.css.map */