/* Home banner carousel */
.banner{position:relative;width:100%;overflow:hidden;background:#e9ecef;aspect-ratio:16/6.4;max-height:500px;padding:0;border:0;text-align:initial}
.banner__track{position:relative;height:100%}
.banner__slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#e9ecef;display:flex;align-items:center;justify-content:center}
.banner__slide.is-active{opacity:1}
.banner__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}/* bg-image shows; img is for SEO/alt only */
.banner__caption{position:relative;z-index:2;margin:0;padding:14px 22px;max-width:560px;text-align:center;background:rgba(8,12,10,.55);color:var(--ink);backdrop-filter:blur(2px);border-radius:10px}
.banner__title{margin:0 0 6px;font-size:24px;font-weight:800}
.banner__text{margin:0 0 10px;color:#dfe7e3;font-size:15px}
.banner__btn{display:inline-block;outline:2px solid transparent;outline-offset:3px;transition:outline-color .15s ease}
.banner__btn:hover,.banner__btn:focus-visible{outline-color:var(--green)}
.banner__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border:0;border-radius:50%;background:rgba(8,12,10,.5);color:#fff;font-size:18px;cursor:pointer}
.banner__prev{left:14px}.banner__next{right:14px}
.banner__nav:hover{background:var(--green);color:#05130d}
.banner__dots{position:absolute;left:0;right:0;bottom:12px;z-index:3;display:flex;gap:8px;justify-content:center}
.banner__dot{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer;padding:0}
.banner__dot.is-active{background:var(--green)}
.banner__nav:focus-visible,.banner__dot:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media (max-width:640px){.banner{aspect-ratio:16/10}.banner__title{font-size:19px}}
@media (prefers-reduced-motion:reduce){.banner__slide{transition:none}}
/* Pointer devices: caption/button hidden until banner hover; banner dims slightly on hover. Touch devices keep it always visible. */
@media (hover:hover){
  .banner__caption{opacity:0;transition:opacity .3s ease}
  .banner__slide::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(8,12,10,.3);opacity:0;transition:opacity .3s ease;pointer-events:none}
  .banner:hover .banner__slide.is-active .banner__caption,
  .banner__slide.is-active .banner__caption:focus-within{opacity:1}
  .banner:hover .banner__slide.is-active::after{opacity:1}
}
/* Stats band: Key Plans / Unit Types buttons */
.stat-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;padding:0 0 26px;margin-top:-8px}
/* Image lightbox (tall plan/unit-type images → scrollable overlay) */
.hp-lightbox{position:fixed;inset:0;z-index:60;display:none;overflow:auto;padding:24px;background:rgba(4,8,6,.82);backdrop-filter:blur(2px);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.4) transparent}
.hp-lightbox::-webkit-scrollbar{width:8px;height:8px}
.hp-lightbox::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:8px}
.hp-lightbox::-webkit-scrollbar-thumb:hover{background:var(--green)}
.hp-lightbox::-webkit-scrollbar-track{background:transparent}
.hp-lightbox.open{display:block}
.hp-lightbox img{display:block;margin:0 auto;max-width:min(100%,860px);height:auto;border-radius:10px;border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.hp-lightbox__close{position:fixed;top:16px;right:20px;z-index:61;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--ink);font-size:22px;cursor:pointer}
.hp-lightbox__close:hover{border-color:var(--green);color:var(--green)}