.sj-carousel{position:relative!important;display:block!important;overflow:hidden;isolation:isolate;min-height:640px;height:100svh;max-height:none;background:#080808!important;padding:0!important;touch-action:pan-y;color:#fff}
.sj-carousel__pictures,.sj-carousel__slide{position:absolute;inset:0}
.sj-carousel__pictures{z-index:0}
.sj-carousel__slide{opacity:0;visibility:hidden;transition:opacity 850ms ease,visibility 850ms;pointer-events:none}
.sj-carousel__slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.sj-carousel__slide img{display:block;width:100%;height:100%;object-fit:cover}
.sj-carousel__link{position:absolute;inset:0;display:block}
.sj-carousel__copy{position:relative;z-index:1;height:100%;padding:clamp(130px,10vw,180px) 2.5vw 110px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.48),rgba(0,0,0,.03) 80%)}
.sj-carousel__copy a{pointer-events:auto}
.sj-carousel__copy .hero-kicker,.sj-carousel__copy .hero-bottom{position:static!important;width:100%!important}
.sj-carousel__copy h1{position:static!important;margin:0!important;max-width:90%;color:#fff}
.sj-carousel__copy .hero-bottom p,.sj-carousel__copy .hero-kicker{color:#fff!important}
.sj-carousel__controls{position:absolute;z-index:3;bottom:30px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:8px 12px;border:1px solid #ffffff38;border-radius:100px;color:white;background:#0008;backdrop-filter:blur(16px)}
.sj-carousel__controls>button{border:1px solid #ffffff55;color:white;background:transparent;width:44px;height:44px;border-radius:50%;font:24px system-ui;cursor:pointer}
.sj-carousel__controls button:hover{background:#ffffff26}
.sj-carousel__controls button:focus-visible,.sj-carousel__link:focus-visible{outline:3px solid #dfff32;outline-offset:4px}
.sj-carousel__dots{display:flex;align-items:center;gap:0}
.sj-carousel__dots button{display:grid;place-items:center;min-width:32px;height:44px;border:0;background:transparent;cursor:pointer;padding:0}
.sj-carousel__dots button:after{content:'';display:block;width:7px;height:7px;border-radius:9px;background:#ffffff66;transition:width .2s,background .2s}
.sj-carousel__dots button.is-active:after{width:24px;background:#dfff32}
.sj-carousel__count{font:12px system-ui;white-space:nowrap;letter-spacing:.08em}
.sj-carousel--empty{background:radial-gradient(ellipse at 75% 40%,#28323b,#080808 65%)!important}
@media(max-width:760px){.sj-carousel{height:85svh;min-height:560px}.sj-carousel__copy{padding:115px 6vw 110px}.sj-carousel__copy h1{font-size:clamp(40px,8.5vw,66px)!important;max-width:100%}.sj-carousel__controls{max-width:94%;gap:5px;bottom:20px}.sj-carousel__dots button{min-width:20px}.sj-carousel__controls>button{width:40px;height:40px}.sj-carousel__count{font-size:11px}.sj-carousel__copy .circle-link{display:none}}
@media(prefers-reduced-motion:reduce){.sj-carousel__slide{transition:none}.sj-carousel__dots button:after{transition:none}}
@media(max-width:400px){.sj-carousel__count{display:none}.sj-carousel__dots button{min-width:20px}}

/* The original header was white text over the dark animation. Give image banners
   their own header surface, without blending against changing artwork. */
body:has(.sj-carousel) .site-nav{position:relative!important;inset:auto!important;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:clamp(20px,3vw,54px)!important;min-height:80px!important;height:auto!important;padding:20px clamp(20px,3vw,48px)!important;background:#fff!important;color:#151515!important;border-bottom:1px solid #e7e7e7!important;mix-blend-mode:normal!important;isolation:isolate;filter:none!important}
body:has(.sj-carousel) .site-nav a,body:has(.sj-carousel) .site-nav .wordmark,body:has(.sj-carousel) .site-nav .wordmark span,body:has(.sj-carousel) .site-nav .wordmark sup{color:#151515!important;text-shadow:none!important;mix-blend-mode:normal!important;filter:none!important;opacity:1!important}
body:has(.sj-carousel) .site-nav .wordmark{font-size:clamp(24px,2.1vw,32px)!important;line-height:1!important;letter-spacing:-.065em!important;white-space:nowrap}
body:has(.sj-carousel) .site-nav .nav-links{display:flex!important;justify-content:center!important;align-items:center!important;gap:clamp(16px,2.2vw,36px)!important;min-width:0!important;flex-wrap:wrap!important;font-size:clamp(14px,1.15vw,17px)!important;line-height:1.5!important}
body:has(.sj-carousel) .site-nav .nav-links a,body:has(.sj-carousel) .site-nav .nav-cta{white-space:nowrap!important;text-decoration:none}
body:has(.sj-carousel) .site-nav .nav-cta{justify-self:end!important;font-size:clamp(14px,1.15vw,17px)!important;line-height:1.5!important}
body:has(.sj-carousel) .site-nav a:hover{color:#5b650d!important}
body:has(.sj-carousel) .site-nav a:focus-visible{outline:2px solid #555;outline-offset:5px}

/* Fit the whole composition instead of cutting off text embedded in the image. */
.sj-carousel{height:calc(100svh - 80px)!important;min-height:0!important;max-height:1000px!important;background:#f5f5f5!important}
.sj-carousel__slide{background:#f5f5f5}
.sj-carousel__slide img{object-fit:contain!important;max-width:none!important}
.sj-carousel__controls{bottom:22px}
@media(max-width:1000px){
  body:has(.sj-carousel) .site-nav{grid-template-columns:1fr auto!important;gap:18px!important;padding:18px 24px!important}
  body:has(.sj-carousel) .site-nav .wordmark{grid-column:1;grid-row:1}
  body:has(.sj-carousel) .site-nav .nav-cta{grid-column:2;grid-row:1}
  body:has(.sj-carousel) .site-nav .nav-links{grid-column:1/-1;grid-row:2;justify-content:flex-start!important;gap:12px 28px!important;font-size:15px!important}
  .sj-carousel{height:calc(100svh - 117px)!important}
}
@media(max-width:600px){
  body:has(.sj-carousel) .site-nav{padding:16px 18px!important;gap:16px!important}
  body:has(.sj-carousel) .site-nav .wordmark{font-size:25px!important}
  body:has(.sj-carousel) .site-nav .nav-links{justify-content:space-between!important;gap:10px 14px!important;font-size:14px!important}
  body:has(.sj-carousel) .site-nav .nav-cta{font-size:14px!important}
  .sj-carousel{height:clamp(340px,65svh,640px)!important;min-height:0!important}
  .sj-carousel__copy{padding:32px 5vw 96px}
  .sj-carousel__copy h1{font-size:clamp(30px,7.5vw,46px)!important}
  .sj-carousel__copy .hero-kicker{font-size:10px!important}
  .sj-carousel__copy .hero-bottom p{font-size:13px!important}
}

/* Quiet controls: no capsule or counters over the artwork. */
.sj-carousel__controls{gap:8px;padding:0;border:0;border-radius:0;background:none;backdrop-filter:none;box-shadow:none;opacity:.3;transition:opacity .25s ease;bottom:20px}
.sj-carousel__controls:hover,.sj-carousel__controls:focus-within{opacity:1}
.sj-carousel__controls>button{width:44px;height:44px;border:0;border-radius:0;background:none!important;color:#171717;font:300 21px system-ui;text-shadow:0 1px 3px #fff9}
.sj-carousel__controls>button:hover{color:#000}
.sj-carousel__dots button{min-width:26px;height:44px}
.sj-carousel__dots button:after{width:5px;height:5px;background:#17171755;box-shadow:0 0 0 1px #ffffff60}
.sj-carousel__dots button.is-active:after{width:17px;height:3px;background:#171717;border-radius:3px}
.sj-carousel__count{display:none!important}
@media(hover:none){.sj-carousel__controls{opacity:.6}}
@media(prefers-reduced-motion:reduce){.sj-carousel__controls{transition:none}}

/* Let each banner continue behind the overlaid navigation. */
body:has(.sj-carousel) .site-nav{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:auto!important;z-index:30!important;background:rgba(255,255,255,.28)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.14)!important;transition:background .35s,color .35s}
.sj-carousel{height:100svh!important;max-height:none!important;min-height:440px!important}
.sj-carousel__slide img{object-fit:cover!important}
@media(max-width:600px){
  .sj-carousel{height:100svh!important;min-height:560px!important}
  .sj-carousel__copy{padding-top:160px}
}
body:has(.sj-carousel[data-tone=dark]) .site-nav{background:rgba(0,0,0,.22)!important;color:#fff!important}
body:has(.sj-carousel[data-tone=dark]) .site-nav a,body:has(.sj-carousel[data-tone=dark]) .site-nav .wordmark,body:has(.sj-carousel[data-tone=dark]) .site-nav .wordmark span,body:has(.sj-carousel[data-tone=dark]) .site-nav .wordmark sup{color:#fff!important}
.sj-carousel[data-tone=dark] .sj-carousel__controls>button{color:#fff;text-shadow:0 1px 3px #0008}
.sj-carousel[data-tone=dark] .sj-carousel__dots button:after{background:#ffffff66;box-shadow:0 0 0 1px #0002}
.sj-carousel[data-tone=dark] .sj-carousel__dots button.is-active:after{background:#fff}