/* First-screen composition: the anchor owns the resting centre; its child alone moves. */
@media (min-width: 761px) {
  .brand-stage { --hero-lower-zone: clamp(108px, 15svh, 155px); --hero-logo-size: clamp(320px, 34vw, 500px); --hero-logo-half: calc(var(--hero-logo-size) / 2); --hero-travel: 32px; --hero-centre-y: calc((100% - var(--hero-lower-zone)) / 2); }
  .hero-logo-navigation { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; z-index: 3; display: block !important; transform: none !important; }
  .hero-logo-anchor { position: absolute; left: 50%; top: var(--hero-centre-y); width: var(--hero-logo-size); height: var(--hero-logo-size); transform: translate(-50%, -50%); z-index: 2; }
  .hero-logo-anchor .floating-logo { display: block; width: 100%; height: 100%; aspect-ratio: 1; border: 0; background: transparent; padding: 0; z-index: 2; cursor: pointer; text-decoration: none; }
  .hero-logo-motion { display: block; width: 100%; height: 100%; will-change: transform; }
  .hero-logo-motion img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .hero-logo-navigation .stage-link { position: absolute; z-index: 5; pointer-events: auto; white-space: nowrap; transition: transform .25s var(--ease), letter-spacing .25s var(--ease), color .25s var(--ease); }
  .hero-logo-navigation .book-now { top: clamp(30px, 7svh, 82px); left: 50%; margin: 0; transform: translateX(-50%); font-size: 12px; letter-spacing: 1.75px; }
  .hero-logo-navigation .about-link { top: var(--hero-centre-y); left: clamp(28px, 8vw, 160px); transform: translateY(-50%); }
  .hero-logo-navigation .treatments-link { top: var(--hero-centre-y); right: clamp(28px, 8vw, 160px); transform: translateY(-50%); }
  .hero-logo-navigation .reviews-link { top: calc(var(--hero-centre-y) + var(--hero-logo-half)); left: clamp(28px, 8vw, 160px); bottom: auto; }
  .hero-logo-navigation .experience-link { top: calc(var(--hero-centre-y) + var(--hero-logo-half)); right: clamp(28px, 8vw, 160px); bottom: auto; }
  .hero-logo-navigation .socials-link { display: block !important; visibility: visible !important; opacity: 1 !important; top: calc(var(--hero-centre-y) + var(--hero-logo-half) + var(--hero-travel) + 30px); bottom: auto; left: 50%; margin: 0; transform: translateX(-50%); }
  .brand-stage > .logo-shadow { left: 50%; top: calc(var(--hero-centre-y) + var(--hero-logo-half) + 8px); bottom: auto; transform: translateX(-50%); z-index: 1; pointer-events: none; }
  .hero-logo-navigation .stage-link:hover, .hero-logo-navigation .stage-link:focus { letter-spacing: 2.2px; color: var(--muted); transform: translateY(-3px); }
  .hero-logo-navigation .book-now:hover, .hero-logo-navigation .book-now:focus, .hero-logo-navigation .socials-link:hover, .hero-logo-navigation .socials-link:focus { transform: translate(-50%, -3px); }
  .hero-logo-navigation .about-link:hover, .hero-logo-navigation .about-link:focus, .hero-logo-navigation .treatments-link:hover, .hero-logo-navigation .treatments-link:focus { transform: translateY(calc(-50% - 3px)); }
}
@media (min-width: 761px) and (max-height: 820px) {
  .brand-stage { --hero-lower-zone: 108px; --hero-logo-size: clamp(300px, 32vw, 435px); --hero-travel: 26px; }
}
@media (max-width: 760px) {
  .hero-logo-anchor { display: contents; }
  .hero-logo-motion { display: block; width: 100%; height: 100%; }
}