.btc-showcase{
  --btc-navy:#0b1d3a;
  --btc-navy-rgb:11,29,58;
  --btc-orange:#f28a2e;
  --btc-white:#ffffff;
  --btc-controls-bg:#0b1d3a;
  --btc-copy-color:rgba(255,255,255,.88);
  --btc-border-color:rgba(11,29,58,.12);
  --btc-overlay-opacity:.74;
  --btc-radius:30px;
  --btc-cta-size:56px;
  --btc-header-shell:min(1240px,86vw);
  padding:36px 0;
  overflow:hidden;
  
  /* Breakout full viewport width */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.btc-showcase__shell{
  width:100%;
  max-width:none;
}

.btc-showcase__card{
  position:relative;
  display:block;
  border-radius:var(--btc-radius);
  overflow:hidden;
  color:var(--btc-white);
  text-decoration:none;
  isolation:isolate;
}

.btc-showcase--slider .btc-showcase__card{
  flex:0 0 var(--btc-header-shell);
  aspect-ratio:1260 / 680;
  scroll-snap-align:center;
}

.btc-showcase--box .btc-showcase__shell > .btc-showcase__box{
  width:min(100%, var(--btc-header-shell));
  margin:0 auto;
}

.btc-showcase--box .btc-showcase__card{
  aspect-ratio:4 / 5;
}

.btc-showcase__box--1-1 .btc-showcase__card{
  aspect-ratio:1 / 1;
}

.btc-showcase__box--16-9 .btc-showcase__card{
  aspect-ratio:16 / 9;
}

.btc-showcase__card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}

.btc-showcase__card:hover img{
  transform:scale(1.04);
}

.btc-showcase__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(var(--btc-navy-rgb),calc(var(--btc-overlay-opacity) * .78)) 0%,rgba(var(--btc-navy-rgb),calc(var(--btc-overlay-opacity) * .24)) 46%,rgba(var(--btc-navy-rgb),0) 76%),
    linear-gradient(180deg,rgba(var(--btc-navy-rgb),0) 24%,rgba(var(--btc-navy-rgb),var(--btc-overlay-opacity)) 100%);
  z-index:1;
}

.btc-showcase__copy{
  position:absolute;
  inset:auto 30px 30px 30px;
  z-index:2;
}

.btc-showcase__body{
  max-width:min(420px, calc(100% - var(--btc-cta-size) - 28px));
}

.btc-showcase__copy h3{
  margin-top:18px;
  color:var(--btc-white);
  font-size:var(--btc-title-size, clamp(34px,4vw,54px));
  line-height:var(--btc-title-line-height, .92);
  font-weight:var(--btc-title-weight, 700);
  text-transform:var(--btc-title-transform, none);
  font-style:var(--btc-title-style, normal);
  letter-spacing:var(--btc-title-spacing, -.06em);
  margin-bottom:var(--btc-title-margin, 0);
  text-shadow:0 10px 28px rgba(0,0,0,.45);
}

.btc-showcase__copy p{
  margin-top:12px;
  color:var(--btc-copy-color);
  font-size:var(--btc-desc-size, 17px);
  line-height:var(--btc-desc-line-height, 1.5);
  font-weight:var(--btc-desc-weight, 500);
  text-transform:var(--btc-desc-transform, none);
  font-style:var(--btc-desc-style, normal);
  letter-spacing:var(--btc-desc-spacing, normal);
  margin-bottom:var(--btc-desc-margin, 0);
}

.btc-showcase__cta{
  position:absolute;
  right:30px;
  bottom:30px;
  z-index:2;
  width:var(--btc-cta-size);
  height:var(--btc-cta-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--btc-white);
  color:var(--btc-navy);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  transition:transform .2s ease, background .2s ease, color .2s ease;
}

.btc-showcase__cta svg{
  width:22px;
  height:22px;
}

.btc-showcase__card:hover .btc-showcase__cta{
  transform:translateX(4px);
  background:var(--btc-orange);
  color:var(--btc-white);
}

.btc-showcase__categories{
  margin:0 auto 26px;
  width:fit-content;
  max-width:min(var(--btc-header-shell), calc(100% - 24px));
  box-sizing:border-box;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  padding:12px;
  border-radius:999px;
  background-color:var(--btc-white);
  border:1px solid var(--btc-border-color);
}

.btc-showcase__category{
  border:none;
  border-radius:999px;
  padding:12px 18px;
  background:transparent;
  color:#3a4d6d;
  font-size:14px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:.2s ease;
}

.btc-showcase__category:hover{
  background:rgba(242,138,46,.12);
  color:var(--btc-navy);
}

.btc-showcase__category.is-active{
  background:var(--btc-orange);
  color:var(--btc-white);
}

.btc-showcase__carousel{
  position:relative;
}

.btc-showcase__track{
  display:flex;
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:calc((100% - var(--btc-header-shell)) / 2);
  padding-inline:calc((100% - var(--btc-header-shell)) / 2);
  padding-bottom:6px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  touch-action:pan-y pinch-zoom;
  cursor:grab;
}

.btc-showcase__track:active{
  cursor:grabbing;
}

.btc-showcase__track::-webkit-scrollbar{
  display:none;
}

[data-btc-showcase-root]:focus-visible{
  outline:3px solid var(--btc-orange);
  outline-offset:4px;
  border-radius:var(--btc-radius);
}

.btc-showcase__controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:12px;
}

.btc-showcase__arrow,
.btc-showcase__toggle{
  width:44px;
  height:44px;
  border:none;
  border-radius:999px;
  background:var(--btc-controls-bg);
  color:var(--btc-white);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.2s ease;
}

.btc-showcase__arrow{
  font-size:28px;
  line-height:1;
}

.btc-showcase__arrow:hover,
.btc-showcase__toggle:hover{
  background:#132c55;
  transform:translateY(-1px);
}

.btc-showcase__icon{
  width:18px;
  height:18px;
}

.btc-showcase__icon--play{
  display:none;
}

.btc-showcase__toggle[data-state="paused"] .btc-showcase__icon--pause{
  display:none;
}

.btc-showcase__toggle[data-state="paused"] .btc-showcase__icon--play{
  display:block;
}

.btc-showcase__dots{
  display:flex;
  align-items:center;
  gap:10px;
  height:44px;
  padding:0 16px;
  border-radius:999px;
  background:var(--btc-controls-bg);
}

.btc-showcase__dot{
  width:8px;
  height:8px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.4);
  cursor:pointer;
  transition:.25s ease;
}

.btc-showcase__dot.is-active{
  width:34px;
  background:var(--btc-white);
}

.btc-showcase--box .btc-showcase__categories,
.btc-showcase--box .btc-showcase__controls{
  display:none;
}

.btc-showcase--variant-compact .btc-showcase__copy h3{
  font-size:clamp(28px, 3vw, 40px);
}

.btc-showcase--variant-compact .btc-showcase__copy p{
  font-size:15px;
  max-width:360px;
}

.btc-showcase--variant-minimal .btc-showcase__overlay{
  background:linear-gradient(180deg,rgba(7,19,38,calc(var(--btc-overlay-opacity) * .2)) 0%,rgba(7,19,38,calc(var(--btc-overlay-opacity) * .82)) 100%);
}

.btc-showcase--variant-minimal .btc-showcase__copy h3{
  letter-spacing:-.04em;
}

.btc-showcase--content-center-left .btc-showcase__copy{
  inset:50% auto auto 30px;
  transform:translateY(-50%);
}

.btc-showcase--content-top-left .btc-showcase__copy{
  inset:30px auto auto 30px;
}

.btc-showcase--content-center .btc-showcase__copy{
  inset:50% 30px auto 30px;
  transform:translateY(-50%);
}

.btc-showcase--content-center .btc-showcase__body{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.btc-showcase--content-center .btc-showcase__copy p{
  margin-left:auto;
  margin-right:auto;
}

@media(max-width:1180px){
  .btc-showcase{
    --btc-header-shell:min(1100px,92vw);
  }
}

@media(max-width:1024px){
  .btc-showcase__categories{
    margin-bottom:22px;
  }

  .btc-showcase__copy{
    inset:auto 24px 24px 24px;
  }

  .btc-showcase__cta{
    right:24px;
    bottom:24px;
  }

  .btc-showcase--content-top-left .btc-showcase__copy{
    inset:24px auto auto 24px;
  }

  .btc-showcase--content-center-left .btc-showcase__copy,
  .btc-showcase--content-center .btc-showcase__copy{
    inset:50% 24px auto 24px;
  }
}

@media(max-width:680px){
  .btc-showcase{
    --btc-header-shell:min(94vw,520px);
  }

  .btc-showcase[data-btc-mobile-hide-categories="1"] .btc-showcase__categories{
    display:none;
  }

  .btc-showcase[data-btc-mobile-hide-controls="1"] .btc-showcase__controls{
    display:none;
  }

  .btc-showcase__categories{
    gap:10px;
    margin-bottom:18px;
    padding:10px 12px;
    border-radius:28px;
  }

  .btc-showcase__category{
    padding:11px 16px;
    font-size:13px;
  }

  .btc-showcase--slider .btc-showcase__card,
  .btc-showcase--box .btc-showcase__box--4-5 .btc-showcase__card{
    border-radius:min(var(--btc-radius), 28px);
    aspect-ratio:4 / 5;
  }

  .btc-showcase--box .btc-showcase__box--1-1 .btc-showcase__card{
    aspect-ratio:1 / 1;
  }

  .btc-showcase--box .btc-showcase__box--16-9 .btc-showcase__card{
    aspect-ratio:16 / 9;
  }

  .btc-showcase[data-btc-mobile-ratio="4-5"] .btc-showcase__card{
    aspect-ratio:4 / 5;
  }

  .btc-showcase[data-btc-mobile-ratio="1-1"] .btc-showcase__card{
    aspect-ratio:1 / 1;
  }

  .btc-showcase[data-btc-mobile-ratio="16-9"] .btc-showcase__card{
    aspect-ratio:16 / 9;
  }

  .btc-showcase[data-btc-mobile-content="bottom-left"] .btc-showcase__copy{
    inset:auto 24px 24px 24px;
    transform:none;
  }

  .btc-showcase[data-btc-mobile-content="top-left"] .btc-showcase__copy{
    inset:24px auto auto 24px;
    transform:none;
  }

  .btc-showcase[data-btc-mobile-content="center-left"] .btc-showcase__copy{
    inset:50% 24px auto 24px;
    transform:translateY(-50%);
  }

  .btc-showcase[data-btc-mobile-content="center-left"] .btc-showcase__body{
    margin-left:0;
    margin-right:0;
    text-align:left;
  }

  .btc-showcase[data-btc-mobile-content="bottom-left"] .btc-showcase__body,
  .btc-showcase[data-btc-mobile-content="top-left"] .btc-showcase__body{
    margin-left:0;
    margin-right:0;
    text-align:left;
  }

  .btc-showcase[data-btc-mobile-content="bottom-left"] .btc-showcase__copy p,
  .btc-showcase[data-btc-mobile-content="top-left"] .btc-showcase__copy p,
  .btc-showcase[data-btc-mobile-content="center-left"] .btc-showcase__copy p{
    margin-left:0;
    margin-right:0;
  }

  .btc-showcase[data-btc-mobile-content="center"] .btc-showcase__copy{
    inset:50% 24px auto 24px;
    transform:translateY(-50%);
  }

  .btc-showcase[data-btc-mobile-content="center"] .btc-showcase__body{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  .btc-showcase__copy h3{
    font-size:34px;
  }

  .btc-showcase__copy p{
    font-size:15px;
    max-width:none;
  }

  .btc-showcase__cta{
    width:min(var(--btc-cta-size), 50px);
    height:min(var(--btc-cta-size), 50px);
  }

  .btc-showcase__controls{
    gap:12px;
  }

  .btc-showcase__dots{
    gap:8px;
    padding:10px 14px;
  }
}
