/* ===== Home banner carousel + compact intro strip (HOME_BANNER_20260929) ===== */
/* Full-bleed banner right under the sticky header. Frame is 4:1 (artwork 2000x500); other ratios get cropped into it. */
.home-banner { position: relative; overflow: hidden; background: var(--blue-deeper); }
.home-banner .swiper-wrapper { display: flex; }            /* pre-init: only the first slide shows, no layout jump */
.home-banner .swiper-slide { flex: 0 0 100%; width: 100%; position: relative; }
.home-banner .swiper-slide a { display: block; }
.home-banner .swiper-slide img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; object-fit: cover; object-position: center; }

/* Bar-style dots (as on the reference site), amber when active */
.home-banner .swiper-pagination { bottom: 18px; }
.home-banner .swiper-pagination-bullet { width: 34px; height: 5px; border-radius: 0; background: rgba(255,255,255,.55); opacity: 1; margin: 0 5px !important; transition: background .25s; }
.home-banner .swiper-pagination-bullet-active { background: var(--accent); }

/* Arrows appear on hover (desktop) */
.home-banner .swiper-button-prev, .home-banner .swiper-button-next { width: 44px; height: 44px; border-radius: 50%; color: #fff; background: rgba(15,23,42,.45); opacity: 0; transition: opacity .25s, background .25s; }
.home-banner .swiper-button-prev::after, .home-banner .swiper-button-next::after { font-size: 16px; font-weight: 700; }
.home-banner:hover .swiper-button-prev, .home-banner:hover .swiper-button-next,
.home-banner .swiper-button-prev:focus-visible, .home-banner .swiper-button-next:focus-visible { opacity: 1; }
.home-banner .swiper-button-prev:hover, .home-banner .swiper-button-next:hover { background: rgba(15,23,42,.8); }

/* Live-text caption over the artwork (demo on slide 1): a dark band hides the baked-in copy, HTML text goes on top */
.home-banner .banner-cap { position: absolute; top: 0; bottom: 0; left: 0; width: 72%; display: flex; flex-direction: column; justify-content: center; padding: 0 0 0 4.5vw; color: #fff; background: linear-gradient(90deg, #07132e 0%, #07132e 82%, rgba(7,19,46,0) 100%); }
.home-banner .cap-title { font-weight: 800; font-size: clamp(22px, 2.9vw, 56px); line-height: 1.06; letter-spacing: -.01em; text-transform: uppercase; }
.home-banner .cap-accent { color: #3b82f6; }
.home-banner .cap-sub { margin-top: .35em; font-weight: 700; font-size: clamp(15px, 1.5vw, 29px); text-transform: uppercase; letter-spacing: .01em; }
.home-banner .cap-desc { margin: .6em 0 0; font-size: clamp(13px, .95vw, 18px); color: rgba(255,255,255,.78); }
.home-banner .cap-feats { list-style: none; margin: 1.4em 0 0; padding: 0; display: flex; gap: 2.2vw; }
.home-banner .cap-feats li { display: flex; flex-direction: column; gap: 3px; padding-left: 12px; border-left: 2px solid rgba(255,255,255,.35); line-height: 1.2; }
.home-banner .cap-feats b { font-size: clamp(12px, .9vw, 17px); font-weight: 700; }
.home-banner .cap-feats span { font-size: clamp(11px, .7vw, 13px); color: rgba(255,255,255,.65); }
@media (max-width: 1024px) { .home-banner .cap-feats { display: none; } }
/* Right-hand variant: band on the right, text right-aligned (used when the artwork's own copy sits on the right) */
.home-banner .banner-cap--right { left: auto; right: 0; width: 40%; align-items: flex-end; text-align: right; padding: 0 4.5vw 0 0; background: linear-gradient(270deg, #07132e 0%, #07132e 55%, rgba(7,19,46,0) 100%); }
.home-banner .banner-cap--right .cap-title { font-size: clamp(24px, 3.4vw, 66px); line-height: 1; }
.home-banner .banner-cap--right .cap-desc { font-size: clamp(13px, 1vw, 19px); }

/* Page H1 kept for search engines / screen readers, visually hidden (no strip under the banner) */
.home-banner .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 768px) {
  /* 4:1 artwork would be 94px tall on a phone; show a 200px band anchored left, where the copy sits */
  .home-banner .swiper-slide img { aspect-ratio: auto; height: 200px; object-position: left center; }
  .home-banner .swiper-pagination { bottom: 10px; }
  .home-banner .swiper-pagination-bullet { width: 22px; height: 4px; }
  .home-banner .swiper-button-prev, .home-banner .swiper-button-next { display: none; }
  .home-banner .swiper-slide img.has-cap { object-position: right center; }   /* show the artwork side, keep the baked copy off-screen */
  .home-banner .banner-cap { width: 100%; padding: 0 16px; background: linear-gradient(90deg, rgba(7,19,46,.94) 0%, rgba(7,19,46,.8) 70%, rgba(7,19,46,.45) 100%); }
  .home-banner .cap-desc { display: none; }
  .home-banner .banner-cap--right { width: 100%; align-items: flex-start; text-align: left; justify-content: flex-end; padding: 0 16px 28px; background: linear-gradient(0deg, rgba(7,19,46,.92) 0%, rgba(7,19,46,.55) 45%, rgba(7,19,46,0) 75%); }
  .home-banner .swiper-slide img.has-cap[style*="center"] { object-position: 40% center; }
}