/* A restrained motion layer; native scrolling and keyboard behavior stay intact. */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); }
html { scrollbar-gutter: stable; }
dialog.is-closing[open] { opacity: 0; transform: translateY(0) scale(1); transition: opacity 170ms ease; pointer-events: none; }
dialog.is-closing[open]::backdrop { opacity: 0; transition: opacity 170ms ease; }
/* Warm olive surfaces tie the service and photo popups to the salon palette. */
dialog, #lightbox {
  background: linear-gradient(145deg, #282c23, #1b1e18 75%);
  color: var(--cream);
  border: 1px solid #c3a77550;
  border-radius: 24px;
  box-shadow: 0 28px 90px #00000070, inset 0 1px 0 #ffffff08;
  scrollbar-width: thin;
  scrollbar-color: #776b51 #1b1e18;
}
dialog .eyebrow { color: var(--gold); }
dialog > p:not(.eyebrow), #detail-extra { color: #c7c9be; }
dialog h2 { color: var(--cream); }
.booking-note { color: #b9bcae; border-color: #c3a77530; }
dialog .button { border-radius: 10px; }
dialog .dialog-close {
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: #c3a7750c;
  color: var(--gold);
}
dialog .dialog-close:hover { color: var(--cream); background: #c3a77520; }
#lightbox { padding-top: 64px; }
#lightbox img { border-radius: 12px; }
@media (max-width: 800px) { dialog, #lightbox { border-radius: 18px; } }
.header nav a, .mobile-menu > a { position: relative; transition: color 250ms ease; }
.header nav a::after { content: ''; position: absolute; bottom: -7px; left: 0; right: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--ease-out); }
.header nav a:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.button { transition: background 300ms ease, transform 350ms var(--ease-out), box-shadow 350ms ease; }
.button[data-book] { border-radius: 10px; }
.button:hover { box-shadow: 0 8px 24px #00000020; }
.button:active { transform: translateY(0) scale(.98); }
.button span, .text-link span, .service-row .arrow, .gallery-item b { display: inline-block; transition: transform 400ms var(--ease-out); }
.button:is(:hover, :focus-visible) span, .text-link:is(:hover, :focus-visible) span, .gallery-item:is(:hover, :focus-visible) b { transform: translate(3px, -3px); }
.text-link { transition: color 250ms ease, border-color 250ms ease; }
.service-row { transition: background 350ms ease; }
.service-row:hover { padding-left: 0; background: #c3a7750a; }
.service-row h3, .service-row .number { transition: transform 450ms var(--ease-out), color 300ms ease; }
.service-row:is(:hover, :focus-visible) h3 { transform: translateX(8px); color: var(--gold); }
.service-row:is(:hover, :focus-visible) .arrow { transform: translate(4px, -4px); }
.service-row:active .arrow { transform: translate(6px, -6px) scale(.92); }
.gallery-item img { transition: transform 800ms var(--ease-out), filter 600ms ease; }
.gallery-item:is(:hover, :focus-visible) img { transform: scale(1.025); filter: saturate(1); }
.dialog-close { transition: transform 300ms var(--ease-out), color 250ms ease; }
.dialog-close:hover { transform: rotate(90deg); color: #947340; }
/* Discrete transitions keep the modal and backdrop present during their exit. */
dialog { opacity: 0; transform: translateY(16px) scale(.985); transition: opacity 240ms ease, transform 350ms var(--ease-out), display 350ms allow-discrete, overlay 350ms allow-discrete; }
dialog[open] { opacity: 1; transform: translateY(0) scale(1); }
dialog::backdrop { opacity: 0; transition: opacity 300ms ease, display 350ms allow-discrete, overlay 350ms allow-discrete; }
dialog[open]::backdrop { opacity: 1; }
.mobile-menu { opacity: 0; transform: translateY(-10px); transition: opacity 220ms ease, transform 300ms var(--ease-out), display 300ms allow-discrete; }
.mobile-menu:not([hidden]) { opacity: 1; transform: translateY(0); }
@starting-style {
  dialog[open] { opacity: 0; transform: translateY(22px) scale(.985); }
  dialog[open]::backdrop { opacity: 0; }
  .mobile-menu:not([hidden]) { opacity: 0; transform: translateY(-10px); }
}
/* JS completes the exit fade before native close; never run a second native exit. */
dialog { transition-property: opacity, transform; }
dialog::backdrop { transition-property: opacity; }
dialog:not([open]) { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  dialog, dialog[open], .mobile-menu:not([hidden]) { transform: none; }
  .service-row:is(:hover, :focus-visible) h3, .service-row:is(:hover, :focus-visible) .arrow, .gallery-item:is(:hover, :focus-visible) img, .dialog-close:hover { transform: none; }
}