.hero-home { isolation:isolate; overflow:hidden; background:#0e2038 !important; }
.hero-photo { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .7s ease; }
.hero-photo.active { opacity:1; }
.hero-photo:first-child { object-position:50% 59%; }
.hero-shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(#06172935,#06172960 48%,#06172990); }
.hero-gallery-controls { position:absolute; bottom:78px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:16px; color:#fff; padding:6px 14px; background:#07182888; border:1px solid #ffffff35; border-radius:24px; font:14px Arial; white-space:nowrap; }
.hero-dots { display:flex; }
.hero-dot { width:36px; height:36px; display:grid; place-items:center; border:0; padding:0; background:transparent; cursor:pointer; }
.hero-dot::after { content:''; width:8px; height:8px; border:1px solid white; border-radius:50%; }
.hero-dot[aria-pressed="true"]::after { background:white; }
.hero-dot:focus-visible { outline:2px solid #8dc9ff; }
@media(max-width:600px) { .hero-gallery-controls { bottom:72px; gap:8px; font-size:13px; padding:3px 10px; } }
@media(max-height:600px) and (min-width:650px) { .hero-gallery-controls { left:24px; bottom:24px; transform:none; } }
@media(prefers-reduced-motion:reduce) { .hero-photo { transition:none; } }
.hero-gallery-controls { width:224px; flex-direction:column; gap:0; padding:10px 16px 3px; border-radius:18px; }
.hero-caption { display:block; width:100%; height:20px; line-height:20px; text-align:center; }
.hero-dots { justify-content:center; height:36px; }
.hero-arrow { position:absolute; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:52px; height:64px; padding:0; border:1px solid #ffffff55; border-radius:6px; color:#fff; background:#07182830; cursor:pointer; font:46px/1 Arial; z-index:3; }
.hero-prev { left:20px; } .hero-next { right:20px; }
.hero-arrow:hover { background:#07182870; }
.hero-arrow:focus-visible { outline:3px solid #8dc9ff; outline-offset:3px; }
@media(max-width:600px) { .hero-gallery-controls { width:208px; gap:0; padding:7px 12px 1px; } .hero-arrow { width:34px; height:52px; font-size:34px; } .hero-prev { left:10px; } .hero-next { right:10px; } }
@media(max-width:600px) { .hero-arrow { top:57%; } }
/* Full photo halves are click targets; visible controls stay unobtrusive. */
.hero-gallery-controls { background:transparent; border:0; border-radius:0; padding:0; bottom:72px; z-index:4; text-shadow:0 2px 8px #000c; }
.hero-arrow,.hero-arrow:hover { top:0; bottom:0; transform:none; width:50%; height:auto; border:0; border-radius:0; background:transparent; display:flex; align-items:center; z-index:1; }
.hero-prev { left:0; justify-content:flex-start; }
.hero-next { right:0; justify-content:flex-end; }
.hero-arrow span { margin:0 22px; text-shadow:0 2px 10px #000b; }
.hero-home h1 { position:relative; z-index:2; pointer-events:none; }
.hero-home .page-nav { z-index:3; }

.hero-home .scroll-about { z-index:4; }
.hero-arrow:focus-visible { outline:none; }
.hero-arrow:focus-visible span { outline:2px solid #8dc9ff; outline-offset:6px; }
@media(max-width:600px) { .hero-arrow span { margin:0 16px; transform:translateY(7svh); } }
@media(max-height:600px) and (min-width:650px) { .hero-gallery-controls { left:24px; bottom:24px; } }

.hero-gallery-controls { bottom:32px; }