/* Optional Salon Home HTML layout. All selectors are scoped to this layout. */
.yx-salon-home { background: #faf8f4; color: #19243f; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.yx-salon-home .yx-salon-shell { width: min(calc(100% - 64px), 1200px); margin-inline: auto; }
.yx-salon-hero { padding-block: clamp(42px, 6.5vw, 96px); }
.yx-salon-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(32px, 6vw, 90px); }
.yx-salon-home .yx-salon-kicker { display: block; margin: 0 0 24px; color: #6c695f; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 650; }
.yx-salon-home h1 { max-width: 630px; margin: 0 0 28px; font: 400 clamp(44px, 5.8vw, 82px)/1.03 Georgia, serif; letter-spacing: -.045em; color: #19243f; }
.yx-salon-home .yx-salon-intro { margin: 0 0 32px; max-width: 460px; color: #696d75; font-size: 16px; line-height: 1.8; }
.yx-salon-home .yx-salon-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; background: #263778; color: #fff; text-decoration: none; padding: 16px 24px; font-size: 13px; font-weight: 650; }
.yx-salon-home .yx-salon-link:hover { background: #111b43; }
.yx-salon-visual { position: relative; display: grid; place-items: center; min-height: 480px; padding: 32px; background: #e9e6df; overflow: hidden; border-radius: 48% 48% 4px 4px; }
.yx-salon-visual::before { content: ''; position: absolute; width: 370px; height: 370px; border: 1px solid #bab6aa; border-radius: 50%; }
.yx-salon-swatch-row { position: relative; display: flex; gap: 18px; transform: rotate(-13deg); }
.yx-salon-swatch { width: 70px; height: 175px; border-radius: 60px 60px 40px 40px; background: #b3756e; box-shadow: inset -8px -5px 16px #0000000f, inset 5px 3px 14px #ffffff4d, 0 18px 30px #433c2f24; }
.yx-salon-swatch:nth-child(2) { background: #e5b3a5; transform: translateY(-32px); }
.yx-salon-swatch:nth-child(3) { background: #805451; transform: translateY(10px); }
.yx-salon-visual-caption { position: absolute; bottom: 35px; left: 24px; right: 24px; text-align: center; color: #68645a; font-size: 10px; font-weight: 650; letter-spacing: .22em; text-transform: uppercase; }
.yx-salon-services { padding-block: 64px 84px; border-top: 1px solid #dedbd4; }
.yx-salon-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 36px; }
.yx-salon-home .yx-salon-section-heading .yx-salon-kicker { margin-bottom: 14px; }
.yx-salon-home h2 { margin: 0; color: #19243f; font: 400 clamp(30px, 4vw, 46px)/1.12 Georgia, serif; letter-spacing: -.025em; }
.yx-salon-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.yx-salon-service-card { padding: 28px 0 0; border-top: 1px solid #c8c5be; }
.yx-salon-home .yx-salon-service-number { color: #8a877e; font-size: 11px; letter-spacing: .12em; }
.yx-salon-home h3 { margin: 18px 0 12px; color: #19243f; font: 400 28px/1.2 Georgia, serif; }
.yx-salon-home .yx-salon-service-card p { max-width: 310px; margin: 0; color: #696d75; font-size: 14px; line-height: 1.8; }
.yx-salon-contact { padding-block: 64px; background: #eeebe4; }
.yx-salon-contact .yx-salon-shell { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
@media (max-width: 900px) { .yx-salon-visual { min-height: 380px; } .yx-salon-swatch { width: 55px; height: 145px; } .yx-salon-swatch-row { gap: 14px; } .yx-salon-visual::before { width: 280px; height: 280px; } }
@media (max-width: 640px) {
 .yx-salon-home .yx-salon-shell { width: calc(100% - 40px); }
 .yx-salon-hero-grid, .yx-salon-service-grid { grid-template-columns: 1fr; }
 .yx-salon-hero-grid { gap: 40px; } .yx-salon-visual { min-height: 330px; }
 .yx-salon-service-grid { gap: 30px; } .yx-salon-services { padding-block: 42px 52px; }
 .yx-salon-contact .yx-salon-shell, .yx-salon-section-heading { align-items: flex-start; flex-direction: column; }
 .yx-salon-contact { padding-block: 44px; }
}