/* Scoped to .lsx-* — reuses the site's design tokens, fonts, buttons & reveal animation.
   Left 45% copy · Right 55% image (rounded + soft shadow, vertically centered). */
.lsx{background:var(--paper)}
.lsx .wrap{max-width:1600px;margin:0 auto;padding:0 40px}
.lsx-grid{display:grid;grid-template-columns:38% 62%;gap:56px;align-items:stretch}
.lsx-copy{min-width:0;align-self:center}
.lsx-copy h2{font-size:clamp(30px,3.6vw,46px);font-weight:800;color:var(--navy-2);
  text-transform:uppercase;margin:18px 0 0}
.lsx-copy p{color:var(--steel);font-size:16.5px;margin-top:16px;max-width:56ch}
.lsx-list{list-style:none;margin:28px 0 34px;display:grid;gap:14px}
.lsx-list li{display:flex;gap:13px;align-items:flex-start;color:var(--ink);font-size:15px;line-height:1.5}
.lsx-list li svg{width:22px;height:22px;flex:0 0 22px;color:var(--amber);margin-top:2px}
.lsx-media{border-radius:8px;overflow:hidden;box-shadow:0 30px 70px rgba(10,31,60,.16);min-height:560px}
.lsx-media img{width:100%;height:100%;min-height:560px;object-fit:cover;display:block}
/* Tablet: balanced stacked layout */
@media(max-width:1100px){
  .lsx .wrap{padding:0 24px}
  .lsx-grid{grid-template-columns:1fr;gap:44px}
  .lsx-media{max-width:100%;min-height:420px}
  .lsx-media img{min-height:420px}
}
@media(max-width:560px){
  .lsx-media{min-height:300px}
  .lsx-media img{min-height:300px}
}
/* Mobile: content first, image below */
@media(max-width:560px){
  .lsx-copy{order:1}
  .lsx-media{order:2}
}