/* Home hero crossfade (CA96, Ben via MAIN V10, Sept 29). Slide 1 stays in the page flow and sizes the hero; the
   others sit on top of it and fade in and out. */
.hero-sizzle .hero-stage{position:relative}
.hero-sizzle .hero-slide{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity var(--sizzle-fade,1s) ease}
.hero-sizzle .hero-slide.is-on{opacity:1}
.hero-photo.hero-sizzle .hero-slide img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;display:block}
.hero-see{position:absolute;right:10px;bottom:10px;z-index:5;max-width:calc(100% - 20px);padding:6px 12px;border-radius:999px;background:rgba(8,35,65,.8);color:#fff;font:600 14px/1.3 "Source Sans 3",Arial,sans-serif;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-see:hover{background:#082341;text-decoration:underline;text-underline-offset:3px}
.hero-see:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #082341}
.hero-sizzle .cr-tag{bottom:48px}   /* the "Computer render" tag sits just above the link */
@media (prefers-reduced-motion:reduce){.hero-sizzle .hero-slide{transition:none}}
/* Phones (CA117 fix 8): the caption fills the photo's bottom edge, so the link and the render tag sit at the top. */
@media (max-width:759px){.hero-see{top:10px;bottom:auto}.hero-sizzle .cr-tag{top:48px;bottom:auto}}