.salon-hero { position: relative; overflow: hidden; padding: 3.5rem 1.5rem 0; background: radial-gradient(ellipse at 8% 35%, #fdfbf7 10%, transparent 60%), linear-gradient(115deg, #f7f2ea 35%, #ece2d0); }
.salon-hero-layout { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 4rem; max-width: 1200px; margin: 0 auto; padding-bottom: 4rem; }
.salon-hero-copy { position: relative; z-index: 1; }
.salon-hero-copy > span { background: #fdfbf7b3; font-size: .65rem; letter-spacing: .17em; }
.salon-hero h1 { font-size: clamp(3rem, 4.7vw, 4.6rem); line-height: 1.04; letter-spacing: -.025em; }
.salon-hero-copy > p { font-size: .95rem; line-height: 1.9; max-width: 31rem; margin-bottom: 2rem; }
.hero-actions { gap: .75rem; }
.hero-actions a { padding: 1rem 1.5rem; font-size: .7rem; }
.salon-hero-copy .mt-5 p { border: 0; background: transparent; padding: 0; font-size: .65rem; letter-spacing: .12em; }
.salon-hero-visual { position: relative; min-width: 0; padding: 0 0 2rem 2rem; }
.hero-salon-photo { position: relative; margin: 0; height: clamp(460px, 44vw, 590px); overflow: hidden; border-radius: 45% 45% .8rem .8rem; background: #dfceb4; box-shadow: 0 20px 50px #5c44261a; }
.hero-salon-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: center 57%; }
.hero-salon-photo::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, #1c1917a6); pointer-events: none; }
.hero-salon-photo figcaption { position: absolute; z-index: 1; bottom: 1.5rem; right: 1.5rem; left: 1.5rem; color: #fdfbf7; display: flex; flex-direction: column; gap: .35rem; text-align: right; }
.hero-salon-photo figcaption span:first-child { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; }
.hero-salon-photo figcaption span:last-child { font-size: .6rem; letter-spacing: .08em; }
.hero-nail-photo { position: absolute; width: 38%; bottom: .5rem; left: -1.5rem; padding: .45rem .45rem 0; background: #fdfbf7; border-radius: .3rem; box-shadow: 0 12px 36px #3d2a1426; transform: rotate(-6deg); transition: transform .25s; }
.hero-nail-photo:hover { transform: rotate(-3deg) translateY(-4px); }
.hero-nail-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.hero-nail-photo > span { display: flex; align-items: center; justify-content: space-between; padding: .7rem .3rem; font-size: .65rem; color: #5c4426; }
.hero-photo-note { display: block; margin-top: 1rem; text-align: right; color: #9c784a; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.25rem; }
.hero-trust-wrap { max-width: 1200px; margin: 0 auto; border-top: 1px solid #cdb39180; padding: 1.6rem 0; }
.hero-trust { font-size: .65rem; }
@media (max-width: 959px) { .salon-hero { padding-top: 2.5rem; } .salon-hero-layout { grid-template-columns: 1fr; gap: 2.5rem; max-width: 600px; padding-bottom: 2rem; } .salon-hero h1 { font-size: clamp(2.8rem, 8vw, 4rem); } .salon-hero-visual { padding: 0 0 1.5rem 2rem; margin: 0 0 0 1rem; } .hero-salon-photo { height: 390px; border-radius: 42% 42% .8rem .8rem; } .hero-nail-photo { width: 34%; left: -2rem; bottom: 1rem; } .hero-photo-note { font-size: 1.1rem; } }
@media (max-width: 420px) { .salon-hero { padding-left: 1.25rem; padding-right: 1.25rem; } .hero-salon-photo { height: 320px; } .hero-salon-photo figcaption { right: 1rem; bottom: 1rem; } .hero-salon-photo figcaption span:first-child { font-size: 1.5rem; } .hero-salon-photo figcaption span:last-child { font-size: .5rem; } .hero-trust { gap: 1.25rem .5rem; font-size: .58rem; letter-spacing: .08em; } }
@media (prefers-reduced-motion: reduce) { .hero-nail-photo { transition: none; } .hero-nail-photo:hover { transform: rotate(-6deg); } }

/* Keep the mobile booking action visible at the bottom of the screen. */
@media (max-width: 767px) {
  body .floating-booking-bar {
    top: auto;
    bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
    gap: .75rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .floating-booking-bar > div { min-width: 0; }
  .floating-booking-bar > a { flex-shrink: 0; white-space: nowrap; }
}

/* Keep mobile navigation visible throughout the page. */
@media (max-width: 767px) {
  html { scroll-padding-top: calc(5rem + env(safe-area-inset-top, 0px)); }
  body {
    padding-top: calc(5rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
  }
  body > header.glass-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    padding-top: env(safe-area-inset-top, 0px);
  }
  #mobileMenu {
    max-height: calc(100dvh - 5rem - env(safe-area-inset-top, 0px));
    overflow-y: auto;
  }
}

/* Hide the platform-injected public branding badge. */
iframe#nl-badge-frame { display: none !important; }

/* Make each treatment in the service menu a visible booking link. */
#services a[data-service-id] {
  border-radius: .25rem;
  transition: background-color .2s;
}
#services a[data-service-id]:hover { background-color: #f7f2ea; }
#services a[data-service-id]:focus-visible {
  outline: 2px solid #9c784a;
  outline-offset: 6px;
}