/* Keep the real room uncropped so the comparison shows exactly the same framing. */
.salon-home { background: #172239; color: #fff; padding: clamp(5rem,11vw,9rem) 0 clamp(2.2rem,7vw,6rem); }
.salon-home .salon-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); column-gap: clamp(2rem,5vw,5rem); align-content: center; }
.salon-copy { align-self: end; }
.salon-brand { font-weight: 700; letter-spacing: .03em; color: #bed3ec; }
.salon-home h1 { font-size: clamp(2.1rem,4vw,3.8rem); line-height: 1.1; letter-spacing: -.035em; color: #fff; overflow-wrap: break-word; margin: .7rem 0 1rem; }
.salon-lead { font-size: 1.1rem; line-height: 1.55; color: #e1e8f1; margin: 0; }
.salon-action { margin-top: 1.6rem; }
.salon-action .btn { background: #fff; color: #14233c; white-space: normal; font-weight: 700; padding: .8rem 1.25rem; border-radius: .6rem; }
.salon-action .btn:is(:hover,:focus-visible) { background: #e3efff; color: #13213a; }
.salon-action p, .salon-demo figcaption { margin: .65rem 0 0; font-size: .9rem; line-height: 1.5; color: #d6e0ef; }
.salon-demo { margin: 0; grid-column: 2; grid-row: 1 / 3; align-self: center; min-width: 0; }
.salon-frame { --split: 50%; position: relative; overflow: hidden; border-radius: .8rem; background: #28354a; aspect-ratio: 3 / 2; }
.salon-frame img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.salon-frame .original { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.salon-label { position: absolute; top: .65rem; left: .65rem; padding: .15rem .55rem; border-radius: .3rem; color: #fff; background: rgba(16,23,36,.85); font-size: .8rem; font-weight: 600; }
.salon-label.hdr { left: auto; right: .65rem; }
.salon-divider { position: absolute; inset: 0 auto 0 var(--split); width: 2px; background: #fff; transform: translateX(-50%); pointer-events: none; }
.salon-divider:after { content: '‹ ›'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; color: #182439; font: bold 1.25rem/1.65rem Arial,sans-serif; text-align: center; width: 2.25rem; border-radius: 1rem; box-shadow: 0 1px 6px #0006; }
.salon-range { position: absolute; inset: 0; appearance: none; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; direction: ltr; }
.salon-range::-webkit-slider-thumb { appearance: none; width: 1px; height: 44px; }
.salon-range::-moz-range-thumb { width: 1px; height: 44px; border: 0; }
.salon-frame:focus-within { outline: 3px solid #89caff; outline-offset: 3px; }
.salon-video { position: relative; aspect-ratio: 16 / 9; }
@media (max-width: 767px) {
  .salon-home { padding: 5.1rem 0 2.3rem; }
  .salon-home .salon-layout { grid-template-columns: minmax(0,1fr); gap: 1.15rem; }
  .salon-demo { grid-column: 1; grid-row: 2; }
  .salon-action { margin: 0; }
  .salon-home h1 { margin: .35rem 0 .55rem; }
}