/* Design | Build's 11 Margo comparison reuses the existing editorial base.
   Home styles and timings remain untouched. */
/* Full-bleed revision: all three room pairs span their section; only reading matter is inset. */
#db-transformation .mp-wrap{width:100%;margin:0}
#db-transformation .mp-intro,#db-transformation .mp-copy,#db-transformation .mp-compare>figcaption,#db-transformation .mp-controls,#db-transformation .mp-static-labels,#db-transformation .mp-source-note{width:min(1360px,calc(100% - 112px));margin-inline:auto}
#db-transformation .mp-intro{padding-bottom:38px}
#db-transformation .mp-row,#db-transformation .mp-row-reverse{display:block;padding:0 0 28px}
#db-transformation .mp-copy,#db-transformation .mp-row-reverse .mp-copy{display:grid;grid-template-columns:36px minmax(0,1fr) minmax(0,1.2fr) auto;gap:24px;align-items:center;max-width:none;padding:32px 0}
#db-transformation .mp-number{margin:0}
#db-transformation h3{margin:0;max-width:13ch}
#db-transformation .mp-copy>p{margin:0;max-width:36ch}
#db-transformation .mp-copy>.mp-link{justify-self:end;white-space:nowrap}
#db-transformation .mp-compare{width:100%;margin:0}
#db-transformation .mp-compare-frame,#db-transformation .mp-compare-frame>img{border-radius:0}
#db-transformation .mp-compare>figcaption{margin-top:12px}
#db-transformation .mp-controls{margin-top:9px}
#db-transformation .mp-source-note{max-width:1360px;margin-top:5px}
@media(max-width:1100px){
  #db-transformation .mp-intro,#db-transformation .mp-copy,#db-transformation .mp-compare>figcaption,#db-transformation .mp-controls,#db-transformation .mp-static-labels,#db-transformation .mp-source-note{width:calc(100% - 80px)}
  #db-transformation .mp-copy,#db-transformation .mp-row-reverse .mp-copy{grid-template-columns:30px minmax(0,1fr) minmax(0,1.2fr);column-gap:22px;row-gap:16px}
  #db-transformation .mp-number{grid-column:1;grid-row:1 / 3;align-self:start;margin-top:4px}
  #db-transformation h3{grid-column:2;grid-row:1 / 3;align-self:center}
  #db-transformation .mp-copy>p{grid-column:3;grid-row:1}
  #db-transformation .mp-copy>.mp-link{grid-column:3;grid-row:2;justify-self:start}
}
@media(max-width:760px){
  #db-transformation .mp-intro,#db-transformation .mp-copy,#db-transformation .mp-compare>figcaption,#db-transformation .mp-controls,#db-transformation .mp-static-labels,#db-transformation .mp-source-note{width:calc(100% - 40px)}
  #db-transformation .mp-intro{padding-bottom:30px}
  #db-transformation .mp-row,#db-transformation .mp-row-reverse{display:block;padding:28px 0 24px}
  #db-transformation .mp-copy,#db-transformation .mp-row-reverse .mp-copy{grid-template-columns:30px minmax(0,1fr);column-gap:15px;row-gap:0;padding:0 0 24px}
  #db-transformation .mp-number{grid-column:1;grid-row:1 / 4;margin-top:5px}
  #db-transformation h3{grid-column:2;grid-row:1;max-width:14ch;margin-bottom:14px}
  #db-transformation .mp-copy>p{grid-column:2;grid-row:2;max-width:100%;margin-bottom:12px}
  #db-transformation .mp-copy>.mp-link{grid-column:2;grid-row:3;justify-self:start}
  #db-transformation .mp-compare>figcaption{margin-top:10px}
  #db-transformation .mp-source-note{margin-top:0}
}

#db-transformation{--mp-parallax-support:1}
#db-transformation .mp-copy,#db-transformation .mp-row-reverse .mp-copy{grid-template-columns:36px minmax(0,1fr)}
#db-transformation h3{max-width:none}
#db-transformation.mp-layout-ready .mp-compare-frame{aspect-ratio:1.60858;align-items:center}
#db-transformation.mp-layout-ready .mp-static-labels{display:none}
#db-transformation.mp-layout-ready .mp-controls[hidden]{display:block!important;visibility:hidden;pointer-events:none}
#db-transformation .mp-parallax-plane{position:absolute;inset:0;transform:none;transform-origin:50% 50%;border-radius:0}
#db-transformation .mp-parallax-plane>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;transform:none;border-radius:0}
#db-transformation .mp-parallax-on .mp-parallax-plane{transform:translate3d(0,calc(var(--mp-parallax-y,0px) * 3),0) scale(1.3);will-change:transform}
@media(max-width:760px){
  #db-transformation .mp-copy,#db-transformation .mp-row-reverse .mp-copy{grid-template-columns:30px minmax(0,1fr)}
  #db-transformation h3{margin:0}
}
@media(prefers-reduced-motion:reduce){
  #db-transformation .mp-parallax-on .mp-parallax-plane{transform:none;will-change:auto}
}