/* One composition: the house carries the story, with a quiet column of copy.

   The scene has no background of its own. The house artwork is a cutout, so
   the sky in this section is literally the section's own navy showing through
   the SVG. That is why there is no rectangle behind the animation to blend,
   and why the section can run edge to edge without seams.

   The section carries no vertical padding: the stage is meant to reach the
   top and bottom of the section so the rain has somewhere to fall from. The
   copy column supplies its own padding instead. */
.rg-sec.rg-transform {
  position: relative;
  padding: 0;
  background: var(--rg-navy-ink);
  color: var(--rg-on-dark);
  overflow: hidden;
}
.rg-transform__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  /* Below roughly 1050px the scene's own aspect would collapse the section to a
     thin band. This floor keeps the height even across widths; any slack it
     creates is more sky, which is indistinguishable from the section itself. */
  min-height: clamp(380px, 40vw, 640px);
}
.rg-transform__stage {
  position: relative;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.rg-transform__viewport { width: 100%; }
.rg-transform__scene { display: block; width: 100%; height: auto; transform-origin: 50% 60%; will-change: transform; }
.rg-transform__copy { position: relative; max-width: 420px; padding: clamp(56px, 6vw, 88px) 0; }
.rg-transform__copy .rg-eyebrow { color: var(--rg-cyan-light); font-size: .8125rem; letter-spacing: .13em; margin-bottom: 18px; }
.rg-transform__copy h2 { color: white; font-family: var(--rg-font-head); font-size: clamp(2rem, 3.25vw, 3.125rem); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.rg-transform__lede { color: var(--rg-on-dark-dim); font-size: 1.0625rem; line-height: 1.75; max-width: 35ch; margin-top: 24px; }

@media (max-width: 1100px) {
  .rg-transform__layout { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 28px; }
  .rg-transform__copy h2 { font-size: clamp(1.875rem, 3.8vw, 2.5rem); }
  .rg-transform__lede { font-size: 1rem; line-height: 1.65; margin-top: 18px; }
}

@media (max-width: 860px) {
  .rg-transform__layout { display: flex; flex-direction: column; gap: 0; }
  .rg-transform__copy {
    order: -1;
    max-width: 520px;
    width: 100%;
    padding: clamp(44px, 9vw, 64px) 0 clamp(20px, 4vw, 28px);
  }
  .rg-transform__copy .rg-eyebrow { margin-bottom: 14px; }
  .rg-transform__copy h2 { font-size: clamp(2.25rem, 7vw, 3rem); }
  .rg-transform__lede { max-width: 43ch; }
  /* Full-bleed out of the container gutter: on a phone the scene is the whole
     point, and 16px of padding either side costs it a tenth of its width. */
  .rg-transform__stage {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

@media (prefers-reduced-motion: reduce) { .rg-transform__scene { will-change: auto; } }