/* Buttons */
.btn {
  display: inline-block; padding: 10px 20px; border: 0; border-radius: 30px;
  font-family: inherit; font-size: 16px; line-height: 1; letter-spacing: 3px; text-transform: uppercase; font-weight: 400;
  background: var(--cyan); color: var(--light); text-align: center; transition: background .2s, color .2s;
}
.btn:hover { background: var(--navy); color: var(--light); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--cyan); color: var(--navy); }
.btn--pill-plain { text-transform: none; letter-spacing: 0; font-weight: 700; border-radius: 20px; padding: 8px 20px; }

/* Horizontal rule style used between sections */
.divider { border: 0; border-top: 1px solid var(--navy); margin: 0; }
.divider--cyan { border-top-color: var(--cyan); }
.divider--light { border-top-color: var(--light); }

/* Pages that only load Arvo 700 on the live site render every heading bold */

/* Page hero (title banner) */
.page-hero { position: relative; background-size: cover; background-position: center; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: var(--navy); opacity: .77; }
.page-hero__inner { position: relative; min-height: 235px; display: flex; align-items: center; justify-content: center; }
.page-hero__title { margin: 0; font-family: var(--font-slab); font-weight: 700; font-size: 102px; line-height: 1.25; color: var(--light); text-transform: none; text-align: center; }

/* Full-width image banners */
.banner { position: relative; min-height: 317px; background-position: center; background-repeat: repeat; background-size: auto; }

/* Toggle / accordion (Elementor "toggle" look) */
.toggle__item { border-bottom: 1px solid var(--light); }
.toggle__heading { margin: 0; font-size: inherit; font-weight: inherit; text-transform: none; }
.toggle__title { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 15px; background: none; border: 0; text-align: left; font-family: var(--font-body); font-size: 20px; line-height: 1.3; color: var(--light); cursor: pointer; }
.toggle__icon { flex: 0 0 auto; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 8px; border-color: transparent transparent transparent currentColor; transition: transform .2s; }
.acc__item.is-open .toggle__icon { transform: rotate(-90deg); }
.toggle__panel { display: none; }
.acc__item.is-open .toggle__panel { display: block; }
.toggle__content { padding: 15px 15px 25px; font-size: 20px; line-height: 1.7; color: var(--light); }
.toggle__content p:last-child { margin-bottom: 0; }

/* Carousel */
.carousel { position: relative; padding: 0 0 30px; }
.carousel__viewport { overflow: hidden; }
.carousel__track { display: flex; transition: transform .7s ease; will-change: transform; }
.carousel__slide { flex: 0 0 calc(100% / var(--cols, 2)); padding: 5px 8px 50px; box-sizing: border-box; }
.carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: none; border: 0; padding: 0; color: #6a6ae6; line-height: 0; cursor: pointer; }
.carousel__arrow--prev { left: 8px; }
.carousel__arrow--next { right: 8px; }
.carousel__dots { display: flex; justify-content: center; gap: 6px; margin-top: 0; }
.carousel__dot { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; background: #d1d1d1; cursor: pointer; }
.carousel__dot.is-active { background: #222; }
.tm { display: flex; flex-direction: column; height: 100%; }
.tm__card { padding: 25px 25px 27px; border-radius: 5px; text-align: center; }
.tm__title { font-size: 20px; margin: 0 0 3px; }
.tm__rating { color: #ffd726; font-size: 22px; line-height: 1; margin-bottom: 5px; letter-spacing: 1px; }
.tm__content { font-size: 16px; line-height: 2.1; margin-bottom: 15px; }
.tm__content p { margin: 0; }
.tm__content img { margin: 0 auto 10px; max-height: 142px; width: auto; max-width: 100%; }
.tm__meta { text-align: center; margin-top: 10px; font-size: 20px; }
.carousel--review .tm__card { background: var(--navy); color: var(--light); }
.carousel--review .tm__title { color: var(--light); }
.carousel--review .tm__meta { color: #222; }
.carousel--logo .carousel__slide { padding: 5px 7.5px 50px; }
.carousel--logo .tm__card { background: #f8f8f8; color: #444; padding: 25px 25px 27px; }
.carousel--logo .tm__content { color: #444; margin-bottom: 0; }
.carousel--logo .tm__content img { width: 100%; max-width: 100%; max-height: none; margin-bottom: 20px; }

/* Counter boxes */
.counters { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.counter { margin: 50px 0; }
.counter__n { font-family: 'OpenSansBold', 'Times New Roman', Times, serif; font-size: 60px; font-weight: 900; color: var(--navy); letter-spacing: 2px; line-height: 1.3em; margin-top: 20px; }
.counter__label { font-family: 'OpenSansBold', 'Times New Roman', Times, serif; font-size: 27px; font-weight: 900; letter-spacing: 2px; color: var(--navy); margin: 20px 0 0; line-height: 1.3em; min-height: 56px; text-transform: none; }

/* Royal "wpr" pill buttons with icon */
.wbtn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 20px; border-radius: 50px; font-size: 27px; font-weight: 400; color: #fff; line-height: 1; border: 2px solid transparent; transition: background .3s; }
.wbtn--cyan { background: var(--cyan); border-color: var(--light); min-width: 279px; }
.wbtn--cyan:hover { background: var(--navy); }
.wbtn--navy { background: var(--navy); border-color: var(--cyan); padding: 20px 40px; min-width: 289px; }
.wbtn--navy:hover { background: var(--cyan); }
@media (max-width: 1024px) { .page-hero__inner { min-height: 400px; } .counters { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .page-hero__inner { min-height: 136px; } .page-hero__title { font-size: 56px; } .counters { grid-template-columns: 1fr; } .carousel__slide { flex-basis: 100%; } }
.carousel--static .carousel__arrow, .carousel--static .carousel__dots { display: none; }

/* Before/after + lazy video (shared) */
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 20px; max-width: 1140px; margin: 0 auto; }
.ba { position: relative; overflow: hidden; user-select: none; --pos: 50%; }
.ba__before { position: relative; }
.ba__after { position: absolute; inset: 0; }
.ba__before img { width: 100%; height: auto; display: block; }
.ba__after img { width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 var(--pos)); }
.ba__divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 10px; margin-left: -5px; background: var(--navy); pointer-events: none; }
.ba__handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50px; background: var(--cyan); color: #e8e8e8; }
.ba__label { position: absolute; bottom: 20px; padding: 7px 15px; background: var(--navy); color: #fff; font-size: 14px; line-height: 1.5; pointer-events: none; }
.ba__label--before { left: 16px; }
.ba__label--after { right: 16px; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.lives__divider { margin: 36px 0 44px; }
.video-wrap { max-width: 1140px; }
.video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.video__play img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.video__icon { position: absolute; top: 50%; left: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); background: rgba(33,33,33,.8); border-radius: 12px; }
.video__icon::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #fff; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Elementor "heading widget" headings render at normal weight on pages that load Arvo 400 */
.h-reg { font-weight: 400; }

/* Horizontal tabs (publications) */
.htabs__list { display: flex; }
.htabs__tab { flex: 0 1 auto; padding: 20px 25px; background: none; border: 4px solid transparent; border-bottom: 0; font-family: var(--font-body); font-size: 20px; line-height: 1.25; color: var(--navy); text-align: left; cursor: pointer; width: 16.66%; }
.htabs__tab.is-active { border-color: var(--cyan); background: var(--light); position: relative; top: 4px; }
.htabs__panels { border: 4px solid var(--cyan); padding: 20px 25px; }
.htabs__panel img { margin: 0 auto; max-width: 100%; }
.htabs__panel p { margin: 0; }

.htabs--video .htabs__tab { width: auto; padding: 20px 28px; border-width: 3px; color: var(--light); }
.htabs--video .htabs__tab.is-active { top: 3px; background: var(--navy); color: var(--light); }
.htabs--video .htabs__panels { border-width: 3px; padding: 20px 20px 30px; }
.ba-grid > * { min-width: 0; }
.counters > *, .carousel__slide, .tabs__panels, .htabs__panels { min-width: 0; }
@media (max-width: 767px) {
  .ba-grid { grid-template-columns: 1fr; }
  .page-hero__title { font-size: 48px; padding: 0 10px; }
  .counter__n { font-size: 44px; }
}