.mobile-drawer { position: fixed; z-index: 300; inset: 0; visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility .3s ease; }
.mobile-drawer.is-open { visibility: visible; opacity: 1; }
.mobile-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(8,9,8,.55); backdrop-filter: blur(4px); }
.mobile-panel { position: absolute; top: calc(var(--header-h) + 1px); right: 0; width: min(100vw, 520px); height: calc(100% - var(--header-h) - 1px); display: grid; grid-template-rows: minmax(0, 1fr); overflow: hidden; color: var(--ink); background: var(--paper); transform: translateX(100%); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.mobile-drawer.is-open .mobile-panel { transform: none; }
.mobile-panel-top { display: none; }
.mobile-panel .brand-inverse { color: var(--ink); }
.mobile-panel .brand { max-width: min(230px, calc(100% - 62px)); }
.mobile-panel .brand-logo { max-height: 64px; object-fit: contain; object-position: left center; }
.mobile-close { width: 44px; height: 44px; flex: 0 0 auto; padding: 0; border: 1px solid rgba(23,24,22,.3); color: var(--ink); background: transparent; font-size: 1.55rem; line-height: 1; }
.mobile-close:hover { border-color: var(--accent-dark); color: var(--accent-dark); }

.mobile-console { min-height: 0; display: grid; grid-template-columns: 88px minmax(0, 1fr); }
.mobile-console-rail { min-height: 0; display: flex; flex-direction: column; align-items: center; padding: 26px 0 18px; color: var(--white); background: #000; }
.mobile-console-rail-label { margin-bottom: 28px; color: rgba(255,255,255,.62); font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mobile-console-tabs { display: grid; gap: 12px; }
.mobile-console-tab { position: relative; width: 42px; height: 42px; min-height: 42px; padding: 0; border: 1px solid rgba(255,255,255,.38); color: rgba(255,255,255,.58); background: transparent; font-size: .72rem; font-weight: 700; letter-spacing: .08em; transition: color .25s ease, border-color .25s ease; }
.mobile-console-tab::after { position: absolute; top: 50%; left: 100%; width: 0; height: 1px; background: currentColor; content: ""; transition: width .25s ease; }
.mobile-console-tab:hover, .mobile-console-tab[aria-selected="true"] { color: #e0a175; border-color: currentColor; }
.mobile-console-tab[aria-selected="true"]::after { width: 24px; }
.mobile-console-phone { width: 42px; margin-top: auto; display: grid; justify-items: center; gap: 10px; padding: 12px 0; color: rgba(255,255,255,.76); border: 1px solid rgba(255,255,255,.38); font-size: .68rem; letter-spacing: .08em; transition: color .25s ease, border-color .25s ease; }
.mobile-console-phone:hover { color: #e0a175; border-color: currentColor; }
.mobile-console-phone svg { order: 2; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; transform: rotate(-90deg); }
.mobile-console-phone span { order: 1; writing-mode: vertical-rl; transform: rotate(180deg); }

.mobile-console-main { min-width: 0; overflow: hidden; padding: 26px clamp(20px, 5vw, 34px) 28px; background-color: var(--paper); background-image: linear-gradient(rgba(247,245,240,.9), rgba(247,245,240,.9)), url("../assets/gallery/salon.webp"); background-size: cover; background-position: center; }
.mobile-console-panel[hidden] { display: none; }
.mobile-console-panel { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.mobile-console-kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; color: var(--accent-dark); font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.mobile-console-kicker::before { width: 12px; height: 12px; flex: 0 0 auto; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); content: ""; transform: translateY(3px); }
.mobile-console-title { margin-bottom: 22px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.9rem, 8vw, 2.6rem); font-weight: 400; line-height: 1.04; letter-spacing: -.035em; }
.mobile-console-title em { font-weight: 400; }
.mobile-console-pager { display: flex; align-items: center; gap: 7px; margin: 14px 0 0; }
.mobile-console-pager[hidden] { display: none; }
.mobile-console-page-button { width: 34px; height: 34px; min-height: 34px; padding: 0; border: 1px solid rgba(23,24,22,.34); color: var(--ink-soft); background: rgba(255,255,255,.48); font-size: .7rem; font-weight: 700; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.mobile-console-page-button:hover, .mobile-console-page-button[aria-pressed="true"] { color: var(--white); border-color: var(--accent-dark); background: var(--accent-dark); }
.mobile-console-page-button:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.mobile-console-nav-stack { min-height: 0; }
.mobile-console-nav { border-top: 1px solid rgba(23,24,22,.3); }
.mobile-console-nav[hidden] { display: none; }
.mobile-console-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 52px; padding: 9px 10px; border-bottom: 1px solid rgba(23,24,22,.22); background: transparent; transition: background-color .22s ease, color .22s ease; }
.mobile-console-link-copy { min-width: 0; }
.mobile-console-link strong { display: block; font-size: 1.08rem; font-weight: 650; line-height: 1.18; }
.mobile-console-link small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: .67rem; line-height: 1.35; }
.mobile-console-link-arrow { color: var(--accent-dark); font-size: 1rem; transition: transform .25s ease; }
.mobile-console-link:hover .mobile-console-link-arrow { transform: translate(3px, -3px); }
.mobile-console-link:hover, .mobile-console-link:focus-visible { background: rgba(224,190,163,.32); }
.mobile-console-link:focus-visible { outline: 2px solid rgba(141,77,37,.62); outline-offset: -2px; }
.mobile-console-link.is-active { color: var(--accent-dark); }
.mobile-console-actions { display: grid; grid-template-columns: minmax(0, 1fr) 42px 42px; gap: 7px; margin-top: 22px; }
.mobile-console-cta { min-width: 0; min-height: 44px; display: grid; grid-template-columns: minmax(0, 1fr) 38px; align-items: stretch; padding: 0; color: var(--ink); border: 1px solid var(--ink); background: rgba(255,255,255,.52); overflow: hidden; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.mobile-console-cta > span:first-child { display: flex; align-items: center; padding-left: 11px; }
.mobile-console-cta > span:last-child { display: grid; place-items: center; color: var(--white); background: var(--ink); transition: background .25s ease; }
.mobile-console-cta:hover { border-color: var(--accent-dark); }
.mobile-console-cta:hover > span:last-child { background: var(--accent-dark); }
.mobile-console-cta .icon-arrow { width: 18px; height: 18px; }
.mobile-console-cta:hover .icon-arrow { transform: none; }
.mobile-console-cta .site-arrow { width: 100% !important; min-width: 0 !important; min-height: 0 !important; justify-self: stretch; }
.mobile-console-social { width: 42px; height: 44px; display: grid; place-items: center; color: var(--ink); border: 1px solid rgba(23,24,22,.45); background: rgba(255,255,255,.52); transition: color .25s ease, border-color .25s ease, background .25s ease; }
.mobile-console-social:hover { color: var(--white); border-color: var(--accent-dark); background: var(--accent-dark); }
.mobile-console-social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.mobile-console-social svg path { fill: currentColor; stroke: none; }

.mobile-nav { display: none; }

@media (max-width: 380px) {
  .mobile-panel .brand-logo { max-height: 56px; }
  .mobile-console { grid-template-columns: 76px minmax(0, 1fr); }
  .mobile-console-main { padding-inline: 18px; }
  .mobile-console-title { font-size: 1.85rem; }
  .mobile-console-link { min-height: 49px; }
  .mobile-console-actions { grid-template-columns: minmax(0, 1fr) 38px 38px; gap: 5px; }
  .mobile-console-social { width: 38px; }
  .mobile-console-cta { grid-template-columns: minmax(0, 1fr) 34px; font-size: .61rem; }
}

@media (max-height: 720px) {
  .mobile-console-rail { padding-block: 18px 14px; }
  .mobile-console-rail-label { margin-bottom: 18px; }
  .mobile-console-main { padding-block: 18px; }
  .mobile-console-title { margin-bottom: 14px; font-size: clamp(1.65rem, 7vw, 2rem); }
  .mobile-console-pager { margin-top: 10px; }
  .mobile-console-link { min-height: 40px; padding-block: 5px; }
  .mobile-console-actions { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-panel, .mobile-console-tab::after, .mobile-console-link-arrow { transition-duration: .01ms; }
}