/* Banner boom: deeper banners, brand blue/gold colour wash, big headline, light sweep, sparkles, colourful controls.
   Only transform/opacity animate (no layout, no filters), and everything calms down for prefers-reduced-motion. */
:root{--home-banner-h:clamp(280px,40vh,520px);--xb-blue:#1f4fd8;--xb-gold:#ffb020}
@media(max-width:720px){:root{--home-banner-h:clamp(250px,36vh,290px)}}
div.xl-banner[data-xl-banner]{height:clamp(280px,40vh,520px);min-height:280px;max-height:520px}
@media(max-width:640px){div.xl-banner[data-xl-banner]{height:clamp(250px,36vh,290px);min-height:250px;max-height:300px}}
.xl-banner .page-title,.xl-banner h1{font-weight:800;font-size:clamp(1.8rem,4.6vw,3.4rem);letter-spacing:-.01em;text-shadow:0 2px 14px rgba(5,15,60,.55)}
.xl-banner .xl-banner-line{font-size:clamp(1rem,1.9vw,1.3rem);text-shadow:0 1px 8px rgba(5,15,60,.55)}
.xl-banner-in{padding-top:2rem;padding-bottom:2rem}
/* colour wash: brand blue on the left (text side), gold glow on the right */
.xl-boom{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .8s}
.xl-banner[data-xl-rot]:not(.xl-light) .xl-boom,.xag-photo-banner:not(.xl-light) .xl-boom{opacity:1}
.xl-boom-g{position:absolute;inset:0;background:radial-gradient(60% 120% at 100% 100%,rgba(255,176,32,.5) 0,rgba(255,176,32,0) 62%),linear-gradient(100deg,rgba(8,26,120,.84) 0,rgba(22,62,200,.62) 42%,rgba(20,60,190,.18) 72%,rgba(255,176,32,.22) 100%)}
.xl-boom-sweep{position:absolute;top:-10%;bottom:-10%;left:0;width:34%;background:linear-gradient(100deg,rgba(255,255,255,0) 0,rgba(255,236,190,.34) 50%,rgba(255,255,255,0) 100%);transform:translate3d(-130%,0,0) skewX(-18deg);animation:xbSweep 7.5s ease-in-out 1.2s infinite;will-change:transform}
@keyframes xbSweep{0%{transform:translate3d(-130%,0,0) skewX(-18deg)}38%,100%{transform:translate3d(330%,0,0) skewX(-18deg)}}
.xl-spark{position:absolute;width:10px;height:10px;background:#ffe39a;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:xbTwinkle 3.6s ease-in-out infinite}
.xl-spark:nth-of-type(1){left:58%;top:22%;animation-delay:.3s}
.xl-spark:nth-of-type(2){left:74%;top:58%;width:14px;height:14px;animation-delay:1.4s}
.xl-spark:nth-of-type(3){left:88%;top:24%;animation-delay:2.2s}
.xl-spark:nth-of-type(4){left:45%;top:70%;width:7px;height:7px;animation-delay:2.9s}
@keyframes xbTwinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:.95;transform:scale(1) rotate(45deg)}}
/* the home banner: bold headline per slide (HTML text, white on the blue wash) */
.xl-head{position:absolute;z-index:3;left:max(1.2rem,5vw);right:34%;top:44%;transform:translateY(-50%);margin:0;pointer-events:none;font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:clamp(1.6rem,4.4vw,3.6rem);line-height:1.1;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 14px rgba(5,15,60,.6);opacity:0;transition:opacity .7s ease}
.xl-head.on{opacity:1}
.xl-banner.xl-light .xl-head,.xag-photo-banner.xl-light .xl-head{opacity:0}
@media(max-width:640px){.xl-head{right:1rem;font-size:clamp(1.45rem,7vw,2rem)}}
.xl-logo-tag{font-size:clamp(1.15rem,2.8vw,2.1rem)}
/* controls: gradient arrows and dots; on the home page they sit above the strip the content overlaps (that overlap swallowed clicks) */
.xl-ctl{background:rgba(8,26,100,.85);padding:.15rem .45rem;gap:.15rem}
.xl-ctl .xl-nav,.xl-ctl .xl-pause{background:linear-gradient(135deg,var(--xb-blue),var(--xb-gold))}
.xl-ctl .xl-nav svg{width:11px;height:11px}
.xl-dot::before{background:rgba(255,255,255,.6)}
.xl-dot[aria-current="true"]::before{width:18px;border-radius:6px;transform:none;background:linear-gradient(90deg,#6c9bff,var(--xb-gold));box-shadow:0 0 8px rgba(255,176,32,.8)}
.xl-note{color:#fff;font:600 .68rem/1 'Manrope',system-ui,sans-serif;padding:0 .35rem 0 .15rem;white-space:nowrap}
@media(max-width:640px){.xl-note{display:none}}
@media(prefers-reduced-motion:reduce){.xl-boom-sweep,.xl-spark{animation:none!important;display:none}}

/* no visible toolbar: the controls exist for keyboard and screen-reader users and appear only while one of them has focus */
.xl-ctl:not(:focus-within){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;background:none;opacity:0;pointer-events:none}
.xl-ctl:focus-within{opacity:1}
#homePhotoBanner .xl-ctl:focus-within{bottom:46px}
.xl-ctl .xl-note{display:none}
@media(prefers-reduced-motion:reduce){.xl-ctl .xl-note{display:inline}}
@media(max-width:640px){.xl-ctl:focus-within .xl-note{display:none}}
.xl-banner-in{padding-top:2.4rem;padding-bottom:2.4rem}

/* subtitle + rotating sentences under the headline (every banner page) */
.xl-say{position:absolute;z-index:3;left:max(1.2rem,5vw);right:max(1rem,8%);bottom:1.1rem;max-width:44rem;pointer-events:none;font-family:'Manrope',system-ui,sans-serif;color:#fff;padding:.45rem .8rem;border-radius:12px;background:linear-gradient(90deg,rgba(6,20,80,.62),rgba(6,20,80,.35));text-shadow:0 1px 6px rgba(5,15,60,.7)}
#homePhotoBanner .xl-say{bottom:3.4rem}
#homePhotoBanner.xl-light .xl-say{display:none}
.xl-sub{margin:0 0 .2rem;font-weight:800;font-size:clamp(.82rem,1.9vw,1.1rem);line-height:1.25;text-wrap:balance}
.xl-rotline{margin:0;min-height:1.25em;font-weight:600;font-size:clamp(.82rem,1.8vw,1.1rem);line-height:1.25;text-wrap:balance;color:#fff4d6;opacity:1;transform:translateY(0);transition:opacity .45s ease,transform .45s ease}
.xl-rotline.out{opacity:0;transform:translateY(6px)}
.xl-head{top:30%;font-size:clamp(1.5rem,3.6vw,3rem);right:20%}
@media(max-width:640px){.xl-head{top:27%;right:1rem;font-size:clamp(1.3rem,6vw,1.7rem)}.xl-rotline{min-height:2.5em}}
@media(prefers-reduced-motion:reduce){.xl-rotline{transition:opacity 1.2s ease;transform:none}.xl-rotline.out{transform:none}}
@media(max-width:640px){.xl-say{left:1rem;right:1rem;bottom:.7rem;padding:.4rem .6rem}#homePhotoBanner .xl-say{bottom:2.6rem}}
.xl-banner .xl-say{left:1rem;right:1rem;bottom:1rem}
@media(max-width:640px){.xl-banner .xl-say{left:.6rem;right:.6rem;bottom:.6rem}}