Fix carousel height jumping by stacking slides with CSS grid

Replace display:none/flex slide toggling with CSS grid stacking so all
slides always occupy the same layout cell. The container height is now
fixed at the tallest image height — no more text jumping below the
carousel as slides change. Also enables the existing opacity fade
transition which was previously blocked by display:none.

Affects: index.html, articles/why-we-built-hoa-ledgeriq.html,
         articles/hoa-financial-blind-spots.html, and all future articles.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

styles.css

@@ -902,13 +902,19 @@ body {
 .carousel-slides {
   position: relative;
   width: 100%;
+  display: grid; /* stack all slides — prevents height jump on slide change */
 }
 .carousel-slide {
-  display: none;
+  grid-area: 1 / 1; /* all slides share the same grid cell */
+  display: flex;
   flex-direction: column;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.4s ease;
 }
 .carousel-slide.active {
-  display: flex;
+  opacity: 1;
+  pointer-events: auto;
 }
 .carousel-slide img {
   width: 100%;
@@ -972,15 +978,6 @@ body {
   border-radius: 4px;
 }
 
-/* Fade transition */
-.carousel-slide {
-  opacity: 0;
-  transition: opacity 0.4s ease;
-}
-.carousel-slide.active {
-  opacity: 1;
-}
-
 /* ---- Request Quote pricing ---- */
 .price-amount--quote {
   font-size: 32px;