/* SafeToOpen — contrast band: section heading + text in white on one side, photo on the other.
   Colours: --ink (near black), --blue (logo blue), --violet (deep purple). --img-left puts the photo first.
   Entrance animation runs when band.v1.js marks the band .in (only when that script is active). */
.band{position:relative;overflow:hidden;isolation:isolate;color:#fff;padding:clamp(64px,7.5vw,104px) 0}
.band--ink{background:#060a14}
.band--blue{background:linear-gradient(160deg,#0346b8 0%,#003ea5 45%,#002c7a 100%)}
.band--violet{background:linear-gradient(160deg,#4527a8 0%,#37208c 50%,#26166a 100%)}
.band::before{content:"";position:absolute;inset:-35%;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 46% at 28% 38%,rgba(255,255,255,.09),transparent 70%),
             radial-gradient(34% 42% at 74% 66%,rgba(31,247,178,.08),transparent 70%);
  animation:bandDrift 24s ease-in-out infinite alternate}
.band--ink::before{background:radial-gradient(38% 46% at 28% 38%,rgba(18,85,199,.30),transparent 70%),
             radial-gradient(34% 42% at 74% 66%,rgba(31,247,178,.10),transparent 70%)}
@keyframes bandDrift{0%{transform:translate3d(-5%,-3%,0) scale(1)}100%{transform:translate3d(5%,4%,0) scale(1.1)}}

/* the section a band introduces lost its heading block, so it needs less space on top */
.band+section{padding-top:clamp(44px,5vw,72px)!important}

.band__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(36px,5.5vw,84px);align-items:center}
.band--img-left .band__media{order:-1}
.band__text{max-width:560px}
.band__text h2,.band__text .h2{color:#fff;font-size:clamp(1.85rem,2.4vw + .7rem,2.75rem);line-height:1.1;letter-spacing:-.022em;margin:0 0 20px;text-align:start}
.band__text h2::after{content:"";display:block;width:56px;height:3px;margin-top:22px;border-radius:3px;background:#1ff7b2;transform-origin:left center}
.band__text p,.band__text .lead{color:rgba(255,255,255,.84);font-size:17px;line-height:1.7;margin:0 0 12px;text-align:start;max-width:54ch}
.band__text p:last-child{margin-bottom:0}
.band__text a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.band__text .kicker,.band__text [class*="eyebrow"]{color:#8ff5d2}
.band__media{position:relative;margin:0;border-radius:22px;overflow:hidden;
  box-shadow:0 34px 80px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.10)}
.band__media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}

/* entrance: photo unveils from the text side and settles; text rises in; accent line draws */
.band-anim .band__media{transition:clip-path 1.15s cubic-bezier(.65,0,.35,1)}
.band-anim .band__media img{transition:transform 1.9s cubic-bezier(.22,1,.36,1)}
.band-anim .band__text>*{transition:opacity .85s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.band-anim .band__text>*:nth-child(2){transition-delay:.12s}
.band-anim .band__text>*:nth-child(3){transition-delay:.24s}
.band-anim .band__text>*:nth-child(4){transition-delay:.36s}
.band-anim .band__text h2::after{transition:transform .9s cubic-bezier(.22,1,.36,1) .45s}
.band-anim .band:not(.in) .band__media{clip-path:inset(0 100% 0 0)}
.band-anim .band--img-left:not(.in) .band__media{clip-path:inset(0 0 0 100%)}
.band-anim .band:not(.in) .band__media img{transform:scale(1.12)}
.band-anim .band:not(.in) .band__text>*{opacity:0;transform:translateY(18px)}
.band-anim .band:not(.in) .band__text h2::after{transform:scaleX(0)}
.band-anim .band.in .band__media{clip-path:inset(0 0 0 0)}
[dir="rtl"] .band__text h2::after{transform-origin:right center}
[dir="rtl"].band-anim .band:not(.in) .band__media{clip-path:inset(0 0 0 100%)}
[dir="rtl"].band-anim .band--img-left:not(.in) .band__media{clip-path:inset(0 100% 0 0)}

@media (max-width:900px){
  .band__grid{grid-template-columns:minmax(0,1fr)}
  .band--img-left .band__media{order:0}
  .band__text{max-width:none}
  .band-anim .band:not(.in) .band__media,.band-anim .band--img-left:not(.in) .band__media{clip-path:inset(100% 0 0 0)}
}
@media (prefers-reduced-motion:reduce){
  .band::before{animation:none}
  .band-anim .band .band__media,.band-anim .band .band__media img,.band-anim .band .band__text>*,.band-anim .band .band__text h2::after{
    transition:none!important;clip-path:none!important;transform:none!important;opacity:1!important}
}