.sr-hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:48px;align-items:center;padding:56px 0}
.sr-hero--text-right{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.sr-hero--text-right .sr-hero__copy{order:2}
.sr-hero--glass-only{grid-template-columns:1fr}
.sr-hero__copywrap{position:relative}
/* When each photo carries its own words, the blocks stack and cross-fade. */
.sr-hero__copywrap.is-per-slide .sr-hero__copy{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .55s var(--sr-ease),visibility .55s}
.sr-hero__copywrap.is-per-slide .sr-hero__copy.is-active{position:relative;opacity:1;visibility:visible}
/* Every slide headline looks the same, whichever tag it uses. Only the first slide
   is a real page heading; the rest are divs so the page has one top-level heading. */
.sr-hero__title{margin:0 0 12px;
  font-family:var(--sr-font-head,var(--sr-font));
  font-size:calc(clamp(30px,4.2vw,44px) * var(--sr-head-scale,1));
  font-weight:var(--sr-head-weight,700);
  line-height:1.18;
  letter-spacing:var(--sr-head-track,-.4px);
  text-transform:var(--sr-head-case,none);
  color:var(--sr-ink)}
.sr-hero__sub{font-size:17px;color:var(--sr-muted);margin:0 0 24px;max-width:46ch}
.sr-hero__copy{--sr-hero-jc:flex-start}
.sr-hero__btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:var(--sr-hero-jc,flex-start)}

.sr-ws{position:relative;width:100%;max-width:100%;aspect-ratio:2400/1616;margin-inline:auto;
  transform:perspective(1900px) rotateY(calc(var(--sr-ws-tilt,8deg) * -1)) rotateX(1.6deg) scale(.98);
  transform-origin:50% 55%}
.sr-ws::after{content:"";position:absolute;left:6%;right:4%;bottom:-6%;height:9%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(11,31,58,.38),rgba(11,31,58,0) 70%);z-index:0}
.sr-ws__viewport{position:absolute;inset:0;overflow:hidden;z-index:1;
  -webkit-mask:var(--sr-ws-mask) center/100% 100% no-repeat;mask:var(--sr-ws-mask) center/100% 100% no-repeat}
.sr-ws__slide{position:absolute;inset:0;opacity:0;transition:opacity 900ms var(--sr-ease)}
.sr-ws__slide.is-active{opacity:1}
.sr-ws__slide{display:grid;place-items:center;overflow:hidden}
.sr-ws__slide img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:50% 50%}
/* Showing the whole photo and zooming it at the same time would crop it again. */
.sr-ws__slide img[style*="contain"]{animation:none!important}
.sr-ws[data-effect="zoom"] .sr-ws__slide.is-active img{animation:sr-ws-zoom var(--sr-ws-int,6000ms) linear forwards}
@keyframes sr-ws-zoom{from{transform:scale(1)}to{transform:scale(1.07)}}
/* Tint and reflection are strong enough here that the sliders make a visible
   difference; both default to full and can be pushed past it. */
.sr-ws__tint{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(150,200,186,.32),rgba(18,58,50,.20))}
.sr-ws__sheen{position:absolute;inset:-20%;pointer-events:none;
  background:linear-gradient(108deg,transparent 26%,rgba(255,255,255,.30) 33%,transparent 39%,transparent 46%,rgba(255,255,255,.17) 50%,transparent 55%)}
.sr-ws__wiper{position:absolute;top:-12%;bottom:-12%;width:9%;left:-20%;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));transform:rotate(-6deg)}
.sr-ws.is-wiping .sr-ws__wiper{opacity:1}
.sr-ws__frit,.sr-ws__frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sr-ws__frit{z-index:2}
.sr-ws__frame{z-index:3}
.sr-ws__dots{display:flex;gap:8px;justify-content:center;margin-top:26px}
.sr-ws__dots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:var(--sr-silver-strong);cursor:pointer;transition:background .25s}
.sr-ws__dots button[aria-selected="true"]{background:var(--sr-brand)}

@media (max-width:900px){
  .sr-hero{grid-template-columns:1fr;gap:28px;padding:36px 0}
  .sr-hero--text-right .sr-hero__copy{order:0}
  .sr-ws{transform:none}
  .sr-ws::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sr-ws__slide{transition:none}
  .sr-ws[data-effect="zoom"] .sr-ws__slide.is-active img{animation:none}
}