.cms-banner { padding: 2.5rem 0; background: var(--color-bg-mint); }
.banner-carousel { position: relative; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); background: #fff; }
.banner-slide { display: none; grid-template-columns: 1.1fr 1fr; min-height: 330px; }
.banner-slide.is-active { display: grid; }
.banner-slide__media img { width: 100%; height: 100%; object-fit: cover; }
.banner-slide__content { padding: clamp(2rem, 5vw, 4rem); display: flex; flex-direction: column; justify-content: center; }
.banner-carousel__controls { position: absolute; inset: auto 1rem 1rem; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.banner-carousel__button { pointer-events: auto; border: 0; border-radius: 50%; width: 42px; height: 42px; background: rgba(255,255,255,.92); color: var(--color-primary-dark); box-shadow: var(--shadow-sm); cursor: pointer; }
.banner-carousel__dots { display: flex; gap: .5rem; pointer-events: auto; }
.banner-carousel__dot { width: 10px; height: 10px; border: 0; border-radius: 50%; background: rgba(36,122,114,.35); cursor: pointer; padding: 0; }
.banner-carousel__dot.is-active { background: var(--color-primary); }
.pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 2rem; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 40px; min-height: 40px; padding: .5rem .75rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); text-decoration: none; }
.pagination .is-current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.form-notice { padding: 1rem; margin-bottom: 1rem; border-radius: var(--radius-sm); }
.form-notice--success { background: #e8f7ef; color: #17603a; }
.form-notice--error { background: #fff0f0; color: #a12626; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
@media (max-width: 768px) { .banner-slide, .banner-slide.is-active { grid-template-columns: 1fr; } .banner-slide__media { min-height: 220px; } }
@media (prefers-reduced-motion: reduce) { .banner-slide { animation: none !important; } }