/* ==========================================================================
   Split Feature

   Controls set custom properties on the widget wrapper; this file consumes
   them with the defaults in the var() fallbacks. Never declare these variables
   on .taw-split itself -- it sits INSIDE the wrapper the controls target, and
   an element's own declaration beats a value inherited from an ancestor, which
   would make every control silently stop working.
   ========================================================================== */

.taw-split {
  display: flex;
  flex-direction: var(--taw-dir, row);
  align-items: stretch;
  min-height: var(--taw-min-h, 520px);
  background: var(--taw-panel-bg, #ffffff);
}

/* Full-bleed: centre the element on the viewport regardless of the container's
   width or padding. --taw-sbw is the scrollbar width, published by the shared
   runtime -- without subtracting it, 100vw overhangs the document and produces
   a horizontal scrollbar. Falls back to plain 100vw if the script has not run. */
.taw-split--full {
  --taw-vw: calc(100vw - var(--taw-sbw, 0px));
  position: relative;
  width: var(--taw-vw);
  max-width: var(--taw-vw);
  margin-left: calc(50% - (var(--taw-vw) / 2));
  margin-right: calc(50% - (var(--taw-vw) / 2));
}

/* ---------------------------------------------------------------- content */
.taw-split__content {
  display: flex;
  flex-direction: column;
  justify-content: var(--taw-content-align, center);
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--taw-panel-pad, 64px 72px);
  background: var(--taw-panel-bg, #ffffff);
  border-top: var(--taw-accent-w, 4px) solid var(--taw-accent, #e2761b);
}

/* The accent normally caps just the content half; this spans the whole widget
   instead, with the content panel dropping its own so they do not double up. */
.taw-split--accent-full { border-top: var(--taw-accent-w, 4px) solid var(--taw-accent, #e2761b); }
.taw-split--accent-full .taw-split__content { border-top: 0; }

.taw-split__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.taw-split .taw-split__eyebrow {
  color: var(--taw-eyebrow, #e2761b);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
}

.taw-split .taw-split__badge {
  flex: none;
  padding: 9px 16px;
  background: var(--taw-badge-bg, #dceee0);
  color: var(--taw-badge-color, #1c5c3a);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}

.taw-split .taw-split__title {
  color: var(--taw-title, #12291f);
  margin: 0 0 22px;
  padding: 0;
  font-size: 64px;
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.02em;
}

.taw-split .taw-split__text {
  color: var(--taw-text, #6b6b66);
  font-size: 17px;
  line-height: 1.65;
  max-width: 52ch;
}
.taw-split .taw-split__text :first-child { margin-top: 0; }
.taw-split .taw-split__text :last-child  { margin-bottom: 0; }

.taw-split__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid var(--taw-divider, #e6e6e1);
}

.taw-split__meta-icon {
  display: inline-flex;
  align-items: center;
  color: var(--taw-meta-icon, #e2761b);
  font-size: 17px;
  line-height: 1;
}
.taw-split__meta-icon svg { width: 17px; height: 17px; fill: currentColor; }

.taw-split .taw-split__meta-text {
  color: var(--taw-meta, #12291f);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.taw-split .taw-split__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  margin-top: 30px;
  color: var(--taw-link, #e2761b);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.taw-split .taw-split__link:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ media */
.taw-split__media {
  position: relative;
  flex: 0 0 var(--taw-media-w, 50%);
  min-width: 0;
  overflow: hidden;
  background: var(--taw-media-bg, #0f2748);
}

.taw-split__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--taw-media-fit, cover);
}

/* ---------------------------------------------------------------- carousel */
.taw-carousel {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.taw-carousel__track {
  display: flex;
  height: 100%;
  will-change: transform;
}

.taw-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
}
.taw-carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--taw-media-fit, cover);
}

/* Fade stacks the slides instead of sliding a track. */
.taw-carousel[data-effect="fade"] .taw-carousel__track { display: block; position: relative; }
.taw-carousel[data-effect="fade"] .taw-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--taw-car-speed, 500ms) ease;
}
.taw-carousel[data-effect="fade"] .taw-carousel__slide.is-current { opacity: 1; }

/* hello-elementor styles every bare <button>; two classes beats its single
   attribute selector regardless of which stylesheet loads last. */
.taw-carousel .taw-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--taw-arrow-bg, rgba(0, 0, 0, .28));
  color: var(--taw-arrow, #ffffff);
  cursor: pointer;
  z-index: 3;
  transition: background-color .18s ease;
}
.taw-carousel .taw-carousel__nav:hover { background: var(--taw-arrow-bg, rgba(0, 0, 0, .28)); filter: brightness(1.25); }
.taw-carousel .taw-carousel__nav:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.taw-carousel__nav svg { width: 22px; height: 22px; display: block; }
.taw-carousel__nav--prev { left: 18px; }
.taw-carousel__nav--next { right: 18px; }

.taw-carousel__dots {
  position: absolute;
  right: 18px;
  top: 18px;
  display: flex;
  gap: 8px;
  z-index: 3;
}
.taw-carousel .taw-carousel__dot {
  width: 9px;
  height: 9px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--taw-dot, rgba(255, 255, 255, .45));
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.taw-carousel .taw-carousel__dot.is-current {
  background: var(--taw-dot-on, #e2761b);
  transform: scale(1.25);
}
.taw-carousel .taw-carousel__dot:focus-visible { outline: 2px solid var(--taw-dot-on, #e2761b); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .taw-carousel__track,
  .taw-carousel[data-effect="fade"] .taw-carousel__slide { transition: none !important; }
}

@media (max-width: 767px) {
  .taw-carousel .taw-carousel__nav { width: 36px; height: 36px; }
  .taw-carousel__nav svg { width: 18px; height: 18px; }
  .taw-carousel__nav--prev { left: 10px; }
  .taw-carousel__nav--next { right: 10px; }
}

.taw-split__media-index {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  padding: var(--taw-media-pad, 48px 52px);
  color: var(--taw-media-index, #e2761b);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1;
}

.taw-split__media-caption {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--taw-media-pad, 48px 52px);
}

.taw-split .taw-split__media-title {
  color: var(--taw-media-title, #ffffff);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.taw-split .taw-split__media-sub {
  color: var(--taw-media-sub, rgba(255, 255, 255, .62));
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  .taw-split .taw-split__title { font-size: 46px; }
  .taw-split .taw-split__media-title { font-size: 24px; }
  .taw-split__content { padding: 48px 44px; }
}

@media (max-width: 767px) {
  .taw-split {
    flex-direction: column;
    min-height: 0;
  }
  /* the media half has no intrinsic height once stacked */
  .taw-split__media {
    flex: 0 0 auto;
    min-height: 300px;
  }
  /* by default the media leads; this puts the content first instead */
  .taw-split--stack-content .taw-split__media { order: 2; }

  .taw-split__content { padding: 36px 26px 40px; }
  .taw-split .taw-split__title { font-size: 36px; }
  .taw-split .taw-split__text { font-size: 15.5px; }
  .taw-split .taw-split__media-title { font-size: 21px; }
  .taw-split__head { margin-bottom: 20px; }
  .taw-split__meta { margin-top: 30px; padding-top: 22px; }
}