.ff-hero-slides,.ff-hero-shade{position:absolute;inset:0;pointer-events:none}
.ff-hero-slides{z-index:0;overflow:hidden}
.ff-hero-layer{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;overflow:hidden}
.ff-hero-layer.is-active{opacity:1}
.hero-photo .ff-hero-slide,.hero-photo .ff-hero-backdrop{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.hero-photo .ff-hero-backdrop{filter:blur(22px) brightness(.65);transform:scale(1.12)}
.hero-photo .ff-hero-slide{z-index:1}
.ff-hero-shade{z-index:1;background:linear-gradient(180deg,#101e1926 0%,#0d1a1521 35%,#0c1c1733 65%,#0c1c1780 100%)}
.hero-photo.ff-hero-slideshow:before,.hero-photo.ff-hero-slideshow:after{z-index:2;pointer-events:none}
.hero-photo.ff-hero-slideshow>.brand-monogram{z-index:3!important;pointer-events:none}
.hero-photo.ff-hero-slideshow>small{z-index:3;color:#fff;text-shadow:0 1px 8px #0008}
.ff-hero-controls{position:absolute;right:14px;top:14px;z-index:4;display:flex;gap:4px}
.ff-hero-controls[hidden]{display:none}
.ff-hero-controls button{width:40px;height:40px;padding:0;border:1px solid #ffffff60;background:#10201859;color:#fff;display:grid;place-items:center;font:15px/1 'DM Sans',sans-serif;transition:background .2s}
.ff-hero-controls button:hover{background:#102018b3}
.ff-hero-controls button:focus-visible{outline:2px solid #fff;outline-offset:3px;background:#102018b3}
.hero-photo.ff-hero-slideshow .ff-hero-count{position:absolute;left:20px;top:27px;z-index:4;color:#fff;font:10px/1 'DM Sans',sans-serif;letter-spacing:2px;text-shadow:0 1px 7px #000a}
@media(max-width:540px){.ff-hero-controls{top:12px;right:12px}.ff-hero-controls button{width:38px;height:38px}.hero-photo.ff-hero-slideshow .ff-hero-count{left:16px;top:26px}}
@media(prefers-reduced-motion:reduce){.ff-hero-layer,.ff-hero-controls button{transition:none}}

/* Portrait hero frame; retain the centered FF logo and caption styling. */
.hero .hero-visual{width:min(100%,520px);justify-self:center}
.hero-visual>.hero-photo.ff-hero-slideshow{width:100%;height:auto;aspect-ratio:2/3}

@media(min-width:851px){.hero{grid-template-columns:minmax(0,1fr) 52%;gap:4%}}