@font-face {
  font-family: "Onest";
  src: url("../fonts/Onest-latin.woff2?ver=6dd3904df9d5") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-03FF, U+2000-206F, U+20A0-20CF, U+2100-214F, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest";
  src: url("../fonts/Onest-cyrillic.woff2?ver=3ad884e2a606") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0400-052F;
}

:root {
  color-scheme: light;
  --frost: #f7f7f7;
  --frost-bright: #fbfbfa;
  --silver: #c7c9cb;
  --silver-dark: #8a8d91;
  --text-muted: #56565a;
  --graphite: #171719;
  --graphite-soft: #2b2b2e;
  --gold: #9a7127;
  --gold-text: #7a5700;
  /* The same champagne, lifted so it stays rich against graphite. */
  --gold-on-graphite: #d0a85a;
  --brand-champagne: #7b633c;
  --brand-foil-dark: #9a7741;
  --brand-foil-mid: #c3a46d;
  --brand-foil-light: #e3ce9e;
  --line: rgba(23, 23, 25, 0.18);
  --line-strong: rgba(23, 23, 25, 0.34);
  --page-gutter: clamp(1.25rem, 4vw, 6rem);
  --page-max: 105rem;
  --header-height: 4.75rem;
  --utility-height: 2.75rem;
  --sticky-header-height: 0px;
  --section-gap: clamp(3.5rem, 6vw, 6rem);
  --section-half-gap: calc(var(--section-gap) / 2);
  --section-rule-margin: clamp(2rem, 3.5vw, 3rem);
  --section-rule-inset: clamp(1.5rem, 2.5vw, 2rem);
  --display: clamp(3.2rem, 6.2vw, 6rem);
  --h2: clamp(2.4rem, 4vw, 4.25rem);
  --body: 1rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-slow: 520ms;
  --icon-stroke: 1.5;
  --focus: 0 0 0 3px var(--frost), 0 0 0 5px var(--gold);
}
@media (min-width: 1024px) { :root { --body: 1.125rem; } }

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--utility-height) + 1rem);
  background: var(--frost);
}

body {
  margin: 0;
  min-width: 0;
  background: var(--frost);
  color: var(--graphite);
  font-family: "Onest", system-ui, sans-serif;
  font-size: var(--body);
  font-weight: 420;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html.menu-open { overflow: hidden; }
body.menu-open {
  position: fixed;
  inset-inline: 0;
  top: var(--menu-scroll-top, 0px);
  width: 100%;
  overflow: hidden;
}

.wp-site-blocks {
  min-height: 100dvh;
  background: var(--frost);
}

.wp-site-blocks > *,
.wp-block-template-part {
  margin-block-start: 0;
}

html body header.wp-block-template-part,
html body footer.wp-block-template-part,
html body.home header.wp-block-template-part,
html body.home footer.wp-block-template-part {
  display: block !important;
}

.wp-block-template-part > .site-header,
.wp-block-template-part > .site-footer,
.wp-block-template-part > .mobile-menu {
  margin-block-start: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.ui-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

/* Shared sprite paths need an explicit outline on every surface. */
.ui-icon,
.menu-icon,
.arrow-icon,
.service-symbol,
.social-icon,
.header-service-icon,
.catalog-search-icon,
.catalog-service-chevron,
.photo-open-icon,
.photo-close-icon,
.instagram-type-icon,
.aggregate-star,
.review-star {
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.icon-fill,
.brand-icon-fill {
  fill: currentColor;
  stroke: none;
}

::selection {
  background: var(--graphite);
  color: var(--frost-bright);
}

::-webkit-scrollbar {
  width: 0.72rem;
}

::-webkit-scrollbar-track {
  background: var(--frost);
}

::-webkit-scrollbar-thumb {
  background: var(--silver-dark);
  border: 0.2rem solid var(--frost);
}

img {
  display: block;
  max-width: 100%;
}

a,
button {
  color: inherit;
  font: inherit;
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}

button {
  border: 0;
}

a:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.skip-link {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 50;
  padding: 0.85rem 1rem;
  transform: translateY(-120%);
  background: var(--graphite);
  color: var(--frost-bright);
}

.skip-link:focus {
  transform: translateY(0);
}

.section-shell {
  width: min(100%, var(--page-max));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.header-offer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .15rem 1.25rem;
  min-height: 2.75rem;
  padding: .45rem 1rem;
  border-bottom: 1px solid rgb(199 170 113 / 20%);
  background: #0c0c0d;
  color: var(--gold-on-graphite);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.header-offer-action { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; color: var(--frost-bright); }
.header-offer-action .ui-icon { width: .9rem; height: .9rem; }
.header-offer:hover .header-offer-action { text-decoration: underline; text-underline-offset: .25em; }
.header-offer:focus-visible { outline: 2px solid var(--gold-on-graphite); outline-offset: -4px; }
/* The offer can be hidden: one quiet control at the end of the strip, the text stays centred. */
.header-offer-bar { position: relative; }
.header-offer-bar > .header-offer { padding-inline: 3rem; }
.header-offer-close {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 100%;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--silver);
  cursor: pointer;
}
.header-offer-close .ui-icon { width: .95rem; height: .95rem; }
.header-service-offer { display: none; }
@media (min-width: 1200px) {
  .header-offer-bar { display: none; }
  .header-service-offer:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 44px;
    margin-inline: auto;
    color: var(--gold-on-graphite);
    text-decoration: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .header-service-offer:hover .header-offer-action { text-decoration: underline; text-underline-offset: .25em; }
  .header-service-offer:focus-visible { outline: 2px solid var(--gold-on-graphite); outline-offset: -4px; }
  .header-service-bar:has(.header-service-offer:not([hidden])) .header-location-full { display: none; }
  .header-service-bar:has(.header-service-offer:not([hidden])) .header-location-short { display: inline; }
  .header-service-bar:has(.header-service-offer:not([hidden])) .header-contact-actions { margin-inline-start: 0; }
}
.header-offer-close:hover { color: var(--frost-bright); }
.header-offer-close:focus-visible { outline: 2px solid var(--gold-on-graphite); outline-offset: -4px; }
.header-booking-actions { display: flex; align-items: center; }
.header-booking-actions .header-action { min-height: 44px; padding-block: .6rem; }
.header-repeat-link { display: inline-flex; flex: none; align-items: center; gap: .6rem; min-height: 44px; color: var(--gold-on-graphite); font-size: inherit; line-height: 1.25; white-space: nowrap; text-decoration: none; }
.header-repeat-link .ui-icon { width: .95rem; height: .95rem; flex: none; }
.header-repeat-link:hover span { text-decoration: underline; text-underline-offset: .25em; }
.header-repeat-link:focus-visible { outline: 2px solid var(--gold-on-graphite); outline-offset: 2px; }
@media (max-width: 559px) {
  .header-offer { gap: 0 .75rem; padding-inline: .75rem; font-size: 0.8125rem; }
}

.header-shell {
  position: relative;
  z-index: 20;
  background: var(--frost);
}

.header-service-bar {
  display: flex;
  min-height: var(--utility-height);
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 1.6vw, 2rem);
  padding-inline: max(var(--page-gutter), calc(50% - var(--page-max) / 2 + var(--page-gutter)));
  background: var(--graphite);
  color: var(--frost-bright);
  font-size: 0.8125rem;
  font-weight: 420;
  letter-spacing: 0.015em;
}

.header-service-meta,
.header-location,
.header-hours,
.header-social,
.header-social a,
.header-quick-actions,
.header-quick-action,
.mobile-menu-social,
.mobile-menu-social a {
  display: flex;
  align-items: center;
}

.header-service-meta {
  min-width: 0;
  gap: clamp(1rem, 1.5vw, 2rem);
}

.header-contact-actions {
  --contact-gap: clamp(.75rem, 1.4vw, 1.5rem);
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--contact-gap);
  margin-inline-start: auto;
}

/* Short rules separate actions without dividing the whole utility bar into boxes. */
.header-contact-actions > .header-social,
.header-contact-actions > .header-repeat-link {
  position: relative;
  padding-inline-start: var(--contact-gap);
}

.header-contact-actions > .header-social::before,
.header-contact-actions > .header-repeat-link::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  height: 1.125rem;
  border-inline-start: 1px solid rgba(247, 247, 247, .24);
  transform: translateY(-50%);
}

.header-location,
.header-phone,
.header-social a {
  min-height: var(--utility-height);
  color: inherit;
  text-decoration: none;
}

.header-phone {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.55rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.header-location {
  min-width: 0;
  gap: 0.55rem;
}

.header-location span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-location-short,
.header-hours-compact {
  display: none;
}

.header-hours {
  flex: none;
  gap: 0.55rem;
  margin: 0;
  color: var(--silver);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Keep the return path visible on laptops; shorten the location and daily status first. */
@container (min-width: 64rem) and (max-width: 87.499rem) {
  .header-location-full,
  .header-hours-wide { display: none; }
  .header-location-short,
  .header-hours-compact { display: flex; }
}

.header-status-dot {
  width: 0.42rem;
  height: 0.42rem;
  flex: none;
  border-radius: 50%;
  background: var(--gold);
}

.header-hours.is-closed .header-status-dot {
  background: var(--silver-dark);
}

.header-social {
  flex: none;
  gap: 0;
}

/* Secondary channels stay reachable but stop competing with the booking action:
   one quiet icon each, with the name kept for assistive technology. */
.header-social a {
  min-width: 2.75rem;
  justify-content: center;
  gap: 0.45rem;
  opacity: 0.6;
  transition: color var(--motion-base) var(--ease-out), opacity var(--motion-base) var(--ease-out);
}

.header-social a:hover,
.header-social a:focus-visible {
  color: var(--gold-on-graphite);
  opacity: 1;
}

.header-service-bar a:hover,
.header-service-bar a:focus-visible {
  color: var(--gold-on-graphite);
}

.header-service-icon {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--icon-stroke);
  overflow: visible;
  transition: color var(--motion-base) var(--ease-out);
}

.header-social .header-service-icon {
  width: 1.15rem;
  height: 1.15rem;
}

.header-quick-action:focus-visible {
  color: var(--gold-text);
}

.header-quick-actions {
  display: none;
}

.header-quick-action {
  min-width: 2.75rem;
  min-height: 2.75rem;
  justify-content: center;
  color: var(--graphite);
}

.header-quick-action:hover {
  color: var(--gold-text);
}

.site-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(14.5rem, 0.9fr) minmax(23rem, 1.45fr) auto;
  column-gap: clamp(2rem, 3vw, 4rem);
  align-items: center;
  min-height: var(--header-height);
  /* Full-bleed surface, content on the same 105rem shell as every section, so the
     wordmark and navigation stay aligned with the page above 1680px. */
  padding-inline: max(var(--page-gutter), calc(50% - var(--page-max) / 2 + var(--page-gutter)));
  border-bottom: 1px solid var(--line);
  background: rgba(247, 247, 247, 0.94);
}

.brand {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  width: max-content;
  align-items: center;
  color: var(--graphite);
  line-height: 1;
  text-decoration: none;
}

/* GLAMROOM in Mynaruse Flare Light from the shared sprite (inc/header.php). The letters
   carry their own contrast, so the mark needs no stroke, shadow or passing reflection. */
.brand-logo {
  display: block;
  width: clamp(12rem, 13.5vw, 14.5rem);
  height: auto;
  /* At fractional offsets Chromium rasterised the SVG viewport clip a few device pixels
     short and cut the foot off the letters. The outlines sit inside the viewBox anyway. */
  overflow: visible;
}

.brand-logo-primary {
  width: clamp(10.5rem, 21vw, 19rem);
}

/* The compact cut is the same word at closer spacing: where the header narrows it keeps
   the width and gains about a sixth in letter size. */
.brand-logo-compact { display: none; }

/* One restrained signature: graphite on light surfaces, champagne foil on dark ones. */
.brand-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  max-width: 100%;
}
.brand-since {
  color: var(--brand-champagne);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.brand-lockup-foil { gap: 0.75rem; }
.brand-lockup-foil .brand-logo {
  color: var(--brand-foil-mid);
  fill: url("#glamroom-wordmark-champagne");
}
.brand-lockup-foil .brand-since { color: var(--brand-foil-mid); }
.checkout-header .brand-lockup { width: 100%; }
@media (max-width: 359px) {
  .site-header .brand-since { display: none; }
}

.desktop-nav {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 1.75vw, 2.25rem);
}

.desktop-nav a,
.site-footer nav a,
.footer-social a {
  position: relative;
  text-decoration: none;
}

.desktop-nav a {
  flex: 0 0 auto;
  font-weight: 420;
  white-space: nowrap;
}

.desktop-nav a::after,
.site-footer nav a::after,
.footer-social a::after {
  position: absolute;
  right: 0;
  bottom: -0.42rem;
  left: 0;
  height: 1px;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  background: var(--gold);
  transition: transform var(--motion-base) var(--ease-out);
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.site-footer nav a:hover::after,
.site-footer nav a:focus-visible::after,
.footer-social a:hover::after,
.footer-social a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* The current section keeps its underline on every page. The rule used to live only in
   catalog.css, so "Startseite", "Shop" and "Akademie" were marked for screen readers but
   looked unselected. */
.desktop-nav [aria-current="page"]::after,
.site-footer [aria-current="page"]::after {
  transform: scaleX(1);
}

/* Footer links stand in 2.75rem touch rows, so a line hung below the row sat next to the
   following link: on the home page "Startseite" seemed to underline "Leistungen". In the
   footer the line follows the text instead. */
.site-footer nav a::after,
.footer-social a::after {
  bottom: calc(50% - 0.8em);
}

.header-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.85rem, 1.5vw, 1.5rem);
}

.header-cart {
  position: relative;
  display: inline-flex;
  width: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  color: var(--graphite);
  text-decoration: none;
}

.header-cart-icon {
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--icon-stroke);
}

.header-cart-count {
  display: inline-flex;
  min-width: 1.15rem;
  min-height: 1.15rem;
  align-items: center;
  justify-content: center;
  padding-inline: 0.22rem;
  border-radius: 999px;
  background: var(--graphite);
  color: var(--frost-bright);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1;
}

.header-cart > .header-cart-count {
  position: absolute;
  top: 0.16rem;
  right: 0.05rem;
}

.header-cart-count[hidden] { display: none; }

.language-switch {
  display: flex;
  gap: 0.68rem;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
}

.language-switch [aria-current="page"] {
  color: var(--graphite);
  font-weight: 600;
}

.language-switch [aria-disabled="true"] {
  color: rgba(23, 23, 25, 0.48);
}

.header-action,
.menu-trigger {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.05rem;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--graphite);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.header-action:hover,
.menu-trigger:hover {
  background: var(--graphite);
  color: var(--frost-bright);
}

.header-action:active,
.menu-trigger:active,
.button:active {
  transform: translateY(1px);
}

/* Booking is the header's primary action, so it is filled on every width, as it already was
   below 64rem. The hover inverts to the frost surface. */
.site-header .header-action {
  border-color: var(--graphite);
  background: var(--graphite);
  color: var(--frost-bright);
}

.site-header .header-action:hover,
.site-header .header-action:focus-visible {
  border-color: var(--graphite);
  background: var(--frost-bright);
  color: var(--graphite);
}

/* The burger is the quiet partner of the booking button: one filled action per row. */
.menu-trigger {
  display: none;
  width: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--graphite);
}

.menu-trigger:hover,
.menu-trigger:focus-visible {
  border-color: var(--graphite);
  background: var(--graphite);
  color: var(--frost-bright);
}

.menu-trigger svg,
.arrow-icon,
.service-icon svg,
.social-icon {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-trigger svg,
.mobile-menu-close svg {
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
  stroke-width: var(--icon-stroke);
  transition: transform var(--motion-fast) var(--ease-out);
}

.menu-trigger:hover .menu-icon,
.menu-trigger:focus-visible .menu-icon,
.mobile-menu-close:hover .menu-icon,
.mobile-menu-close:focus-visible .menu-icon {
  transform: scale(0.9);
}

.arrow-icon {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
  stroke-width: var(--icon-stroke);
  transition: transform var(--motion-fast) var(--ease-out);
}

/* The drawer: one component for every width where the burger shows (320–1535 px). Full screen on
   phones, a sheet on the right from 768 px. Its inside answers to its own width (container
   "drawer"), never to the window, so moving the header threshold cannot break it again. */
.mobile-menu {
  container: drawer / inline-size;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  inset: 0;
  margin: 0 0 0 auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--frost-bright);
  color: var(--graphite);
}

@media (min-width: 768px) {
  .mobile-menu {
    width: min(100vw, 30rem);
    box-shadow: -1.5rem 0 3.5rem rgba(23, 23, 25, 0.18);
  }
}

.mobile-menu::backdrop {
  background: rgba(23, 23, 25, 0.42);
  backdrop-filter: blur(4px);
}

@media (prefers-reduced-motion: no-preference) {
  .mobile-menu {
    opacity: 0;
    transform: translateY(-0.65rem);
    transition:
      opacity var(--motion-base) var(--ease-out),
      transform var(--motion-base) var(--ease-out),
      display var(--motion-base) allow-discrete,
      overlay var(--motion-base) allow-discrete;
  }

  .mobile-menu[open] {
    opacity: 1;
    transform: none;
  }

  .mobile-menu::backdrop {
    opacity: 0;
    transition:
      opacity var(--motion-base) var(--ease-out),
      display var(--motion-base) allow-discrete,
      overlay var(--motion-base) allow-discrete;
  }

  .mobile-menu[open]::backdrop {
    opacity: 1;
  }

  @starting-style {
    .mobile-menu[open] {
      opacity: 0;
      transform: translateY(-0.65rem);
    }

    .mobile-menu[open]::backdrop {
      opacity: 0;
    }
  }

  /* The sheet slides in from its own edge. */
  @media (min-width: 768px) {
    .mobile-menu {
      transform: translateX(1.5rem);
    }

    @starting-style {
      .mobile-menu[open] {
        transform: translateX(1.5rem);
      }
    }
  }
}

.mobile-menu[open] {
  display: flex;
  flex-direction: column;
}

/* Opened by pointer, the dialog itself takes focus, so no ring appears on the close button. */
.mobile-menu:focus {
  outline: none;
}

.mobile-menu-top {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  padding: env(safe-area-inset-top) max(0.625rem, env(safe-area-inset-right)) 0 max(1.5rem, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
  background: var(--frost-bright);
}

.mobile-menu-brand {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--graphite);
  text-decoration: none;
}

/* Raised specificity: the header's .brand-logo sizes in media queries must not reach in here. */
.mobile-menu .mobile-menu-logo {
  display: block;
  width: 9.25rem;
  height: auto;
  fill: currentColor;
}

.mobile-menu-close {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--graphite);
  cursor: pointer;
}

.mobile-menu-close:hover,
.mobile-menu-close:focus-visible {
  color: var(--gold-text);
}

/* Levels slide over one another; only the active one is visible, focusable and announced. */
.mobile-menu-body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.mobile-menu-level {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.25rem max(1.5rem, env(safe-area-inset-right)) 2rem max(1.5rem, env(safe-area-inset-left));
  background: var(--frost-bright);
  visibility: hidden;
  transform: translateX(100%);
  transition:
    transform var(--motion-base) var(--ease-out),
    opacity var(--motion-base) var(--ease-out),
    visibility 0s linear var(--motion-base);
}

.mobile-menu-level.is-active {
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.mobile-menu-level.is-behind {
  opacity: 0;
  transform: translateX(-18%);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-level {
    transition: none;
  }
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
}

.mobile-menu-nav > a,
.mobile-menu-next {
  display: flex;
  width: 100%;
  min-height: 3.625rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: clamp(1.45rem, 6.4cqi, 1.7rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-align: start;
  text-decoration: none;
}

.mobile-menu-nav > a:hover,
.mobile-menu-nav > a:focus-visible,
.mobile-menu-next:hover,
.mobile-menu-next:focus-visible,
.mobile-menu-nav [aria-current="page"] {
  color: var(--gold-text);
}

.mobile-menu-nav .header-cart-count {
  position: static;
  min-width: 1.5rem;
  height: 1.5rem;
  margin-inline-start: auto;
  font-size: 0.8125rem;
  letter-spacing: 0;
}

.mobile-menu-chevron {
  width: 0.55rem;
  height: 0.55rem;
  flex: none;
  margin-inline-end: 0.35rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  opacity: 0.7;
  transform: rotate(45deg);
}

.mobile-repeat-link {
  display: flex;
  min-height: 3.75rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 0.9375rem;
  text-decoration: none;
}

.mobile-repeat-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gold-text);
  font-weight: 450;
  white-space: nowrap;
}

.mobile-repeat-link:hover .mobile-repeat-action,
.mobile-repeat-link:focus-visible .mobile-repeat-action {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.mobile-languages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.mobile-languages > * {
  display: inline-flex;
  min-width: 5.5rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0 0.9rem;
  border: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 450;
  text-decoration: none;
}

.mobile-languages [aria-current="page"],
.mobile-languages a:hover,
.mobile-languages a:focus-visible {
  border-color: var(--graphite);
  color: var(--graphite);
}

.mobile-menu-contact {
  display: grid;
  gap: 0.125rem;
  margin-top: 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.mobile-menu-contact-row {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.875rem;
  margin: 0;
  color: var(--graphite);
  text-decoration: none;
}

.mobile-menu-contact-row .header-service-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--gold-text);
}

.mobile-menu-contact-row small {
  display: block;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.mobile-menu-contact-row--plain {
  padding-inline-start: 2.125rem;
}

a.mobile-menu-contact-row:hover > span:not(.sr-only),
a.mobile-menu-contact-row:focus-visible > span:not(.sr-only) {
  color: var(--gold-text);
}

.mobile-menu-hours {
  color: var(--text-muted);
}

.mobile-menu-status {
  width: 0.42rem;
  height: 0.42rem;
  flex: none;
  margin-inline: 0.42rem 0.375rem;
  border-radius: 50%;
  background: var(--gold);
}

.mobile-menu-hours.is-closed .mobile-menu-status {
  background: var(--silver-dark);
}

.mobile-menu-social {
  flex-wrap: wrap;
  gap: 0;
  margin: 0.25rem 0 0 -0.75rem;
}

.mobile-menu-social a {
  min-width: 2.75rem;
  min-height: 2.75rem;
  justify-content: center;
  color: var(--graphite);
}

.mobile-menu-social a:hover,
.mobile-menu-social a:focus-visible {
  color: var(--gold-text);
}

.mobile-menu-social .header-service-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Drill-down levels. */
.mobile-menu-back {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  gap: 0.625rem;
  margin-inline-start: -0.125rem;
  padding: 0 0.25rem 0 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.9375rem;
}

.mobile-menu-back .mobile-menu-chevron {
  margin: 0 0 0 0.3rem;
  transform: rotate(-135deg);
}

.mobile-menu-back:hover,
.mobile-menu-back:focus-visible {
  color: var(--graphite);
}

/* The level title repeats the size of the root entry it opened from. */
.mobile-menu-heading {
  margin: 0.25rem 0 1rem;
  font-size: clamp(1.75rem, 7.5cqi, 2rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.mobile-menu-heading:focus {
  outline: none;
}

.mobile-menu-actions {
  display: grid;
  justify-items: start;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
}

.mobile-menu-actions--row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mobile-menu-primary,
.mobile-menu-secondary {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.125rem;
  border: 1px solid var(--graphite);
  font-size: 0.9375rem;
  font-weight: 450;
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.mobile-menu-primary {
  background: var(--graphite);
  color: var(--frost-bright);
}

.mobile-menu-primary:hover,
.mobile-menu-primary:focus-visible {
  background: var(--frost-bright);
  color: var(--graphite);
}

.mobile-menu-secondary {
  border-color: var(--line-strong);
  color: var(--graphite);
}

.mobile-menu-secondary:hover,
.mobile-menu-secondary:focus-visible {
  border-color: var(--graphite);
}

.mobile-menu-quiet {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.625rem;
  color: var(--gold-text);
  font-size: 0.9375rem;
  font-weight: 450;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.mobile-menu-quiet .service-symbol {
  width: 1.375rem;
  height: 1.375rem;
}

.mobile-menu-label {
  margin: 0 0 0.625rem;
  color: var(--text-muted);
}

/* Favourites: a snapping strip on phones, three equal photographs once the drawer has room. */
.mobile-menu-strip {
  display: flex;
  gap: 0.625rem;
  margin: 0 -1.5rem 1.75rem;
  padding: 0 1.5rem 0.25rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 1.5rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.mobile-menu-strip::-webkit-scrollbar {
  display: none;
}

.mobile-menu-card {
  position: relative;
  height: clamp(11.75rem, 54cqi, 13.25rem);
  flex: 0 0 clamp(9.25rem, 42cqi, 10.5rem);
  overflow: hidden;
  background: var(--graphite-soft);
  color: var(--frost-bright);
  text-decoration: none;
  isolation: isolate;
  scroll-snap-align: start;
}

.mobile-menu-card picture,
.mobile-menu-card img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.mobile-menu-card img {
  object-fit: cover;
  object-position: center 42%;
  transition: transform 500ms var(--ease-out);
}

.mobile-menu-card--hair img {
  object-position: center 45%;
}

.mobile-menu-card--lpg img {
  object-position: center 50%;
}

.mobile-menu-card:hover img,
.mobile-menu-card:focus-visible img {
  transform: scale(1.035);
}

.mobile-menu-card::after {
  position: absolute;
  inset: 34% 0 0;
  background: linear-gradient(transparent, rgba(23, 23, 25, 0.88));
  content: "";
  pointer-events: none;
}

.mobile-menu-card-text {
  position: absolute;
  z-index: 1;
  right: 0.75rem;
  bottom: 0.7rem;
  left: 0.75rem;
  display: grid;
  gap: 0.2rem;
  line-height: 1.25;
}

.mobile-menu-card-name {
  font-size: 0.9375rem;
  font-weight: 500;
  hyphens: manual;
  overflow-wrap: normal;
}

.mobile-menu-card-meta {
  color: var(--gold-on-graphite);
  font-size: 0.8125rem;
}

@container drawer (min-width: 29rem) {
  .mobile-menu-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .mobile-menu-card {
    height: 11.25rem;
  }

  .mobile-menu-card-text {
    right: 0.625rem;
    bottom: 0.625rem;
    left: 0.625rem;
  }

  .mobile-menu-card-name {
    font-size: 0.875rem;
  }

  .mobile-menu-card-meta {
    font-size: 0.8125rem;
  }
}

.mobile-menu-rows {
  border-top: 1px solid var(--line);
}

.mobile-menu-row {
  display: grid;
  min-height: 4.25rem;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 0.875rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.mobile-menu-tile {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--gold-text);
}

.mobile-menu-tile .service-symbol {
  width: 1.625rem;
  height: 1.625rem;
}

.mobile-menu-tile--pack {
  border: 0;
  background: radial-gradient(closest-side at 50% 42%, rgba(251, 251, 250, 0.12), transparent), var(--graphite-soft);
}

.mobile-menu-tile picture {
  display: block;
  width: 100%;
  height: 100%;
}

.mobile-menu-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-menu-tile .is-packshot img {
  padding: 0.3rem;
  object-fit: contain;
}

.mobile-menu-row-text {
  display: grid;
  min-width: 0;
  gap: 0.125rem;
}

.mobile-menu-row-name {
  font-size: 1.03rem;
  font-weight: 450;
  hyphens: manual;
  line-height: 1.3;
  overflow-wrap: normal;
}

.mobile-menu-row-meta {
  color: var(--text-muted);
  font-size: 0.84rem;
}

.mobile-menu-row:hover .mobile-menu-row-name,
.mobile-menu-row:focus-visible .mobile-menu-row-name {
  color: var(--gold-text);
}

.mobile-menu-row .mobile-menu-chevron {
  color: var(--text-muted);
}

/* The narrowest phones (320 px) keep every category name on two lines. */
@container drawer (max-width: 22rem) {
  .mobile-menu-level {
    padding-inline: max(1.25rem, env(safe-area-inset-left));
  }

  .mobile-menu-strip {
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
    scroll-padding-inline: 1.25rem;
  }

  .mobile-menu-row {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    gap: 0 0.75rem;
  }

  .mobile-menu-tile {
    width: 2.5rem;
    height: 2.5rem;
  }

  .mobile-menu-row-name {
    font-size: 0.97rem;
  }
}

/* Booking stays in reach on every level. */
.mobile-menu-foot {
  flex: none;
  padding: 0.75rem max(1.5rem, env(safe-area-inset-right)) calc(0.875rem + env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
  border-top: 1px solid var(--line);
  background: var(--frost-bright);
}

.mobile-menu-action {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.25rem;
  border: 1px solid var(--graphite);
  background: var(--graphite);
  color: var(--frost-bright);
  font-size: 1.0625rem;
  font-weight: 450;
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.mobile-menu-action:hover,
.mobile-menu-action:focus-visible {
  background: var(--frost-bright);
  color: var(--graphite);
}

.mobile-menu-action-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 400;
  opacity: 0.75;
}

.mobile-menu-external {
  transform: rotate(-45deg);
}

.button {
  display: inline-flex;
  min-height: 3.4rem;
  align-items: center;
  justify-content: center;
  padding: 0.86rem 1.35rem;
  text-decoration: none;
  gap: 1.5rem;
  transition: background-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.button-primary {
  background: var(--graphite);
  color: var(--frost-bright);
}

.button-primary:hover {
  background: var(--graphite-soft);
}

.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding-bottom: 0.22rem;
  text-decoration: none;
}

.text-link::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transition: transform var(--motion-base) var(--ease-out);
  transform-origin: left;
}

.text-link:hover::after,
.text-link:focus-visible::after {
  transform: scaleX(0.38);
}

.button:hover .arrow-icon,
.button:focus-visible .arrow-icon,
.text-link:hover .arrow-icon,
.text-link:focus-visible .arrow-icon,
.catalog-teaser-link:hover .arrow-icon,
.catalog-teaser-link:focus-visible .arrow-icon,
.service-selection-link:hover .arrow-icon,
.service-selection-link:focus-visible .arrow-icon {
  transform: translateX(0.22rem);
}

.services,
.team,
.social {
  padding-top: var(--section-gap);
}

.services-heading {
  display: grid;
  gap: 1.3rem;
  max-width: 56rem;
  margin: 0 0 clamp(3.4rem, 6vw, 6rem);
}

h2 {
  margin: 0;
  font-size: var(--h2);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
}

.services-heading p,
.social-copy p {
  max-width: 44rem;
  margin: 0;
  color: #46464a;
  font-size: clamp(1.04rem, 1vw + 0.8rem, 1.35rem);
}

.services-layout {
  display: grid;
  grid-template-columns: minmax(15rem, 0.72fr) minmax(28rem, 1.45fr);
  align-items: stretch;
  gap: clamp(2.5rem, 7vw, 8rem);
}

/* Container queries keep the header and service catalogue usable when browser
   zoom reduces their actual layout space without changing the viewport media
   query (for example, 1830px at 200% zoom behaves like a 915px container). */
.header-shell,
.services {
  container-type: inline-size;
}

.catalog-teaser-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 1rem;
  margin: clamp(3rem, 6vw, 6rem) 0 0 auto;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}

.catalog-teaser-link:hover,
.catalog-teaser-link:focus-visible {
  color: var(--gold-text);
}

.service-visual {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  align-self: start;
  min-height: 31rem;
  margin: 0;
  overflow: hidden;
  background: var(--silver);
}

.service-visual img {
  width: 100%;
  height: 100%;
  min-height: 31rem;
  object-fit: cover;
  object-position: 50% 50%;
  transition: filter var(--motion-base) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

.service-visual[data-visual-key="hair-care"] img {
  object-position: 52% 50%;
}

.service-visual[data-visual-key="treatment-room"] img {
  object-position: 58% 52%;
}

.service-visual[data-visual-key="workplace"] img {
  object-position: 62% 50%;
}

.service-visual[data-visual-key="team"] img {
  object-position: 50% 45%;
}

.service-visual.is-loading img {
  filter: saturate(0.72) brightness(0.88);
  transform: scale(1.012);
}

.service-visual figcaption {
  display: grid;
  gap: 0.25rem;
  padding: 1.2rem;
  background: rgba(23, 23, 25, 0.88);
  color: var(--frost-bright);
}

.service-visual figcaption span {
  font-size: 0.8125rem;
}

.service-visual figcaption strong {
  font-size: clamp(1.2rem, 2vw, 2rem);
  font-weight: 420;
}

.service-list {
  align-self: center;
  border-top: 1px solid var(--line-strong);
}

.service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: clamp(5.6rem, 9vw, 9rem);
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--graphite);
  cursor: pointer;
  text-align: left;
  transition: color var(--motion-base) var(--ease-out);
}

.service-icon {
  display: none;
}

.service-icon svg {
  width: 2.15rem;
  height: 2.15rem;
  stroke-width: var(--icon-stroke);
}

.service-name {
  font-size: clamp(2rem, 4.4vw, 4.75rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  transition: transform var(--motion-base) var(--ease-out);
}

.service-state {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  transition: color var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out);
}

.service-state .arrow-icon {
  width: 1.4rem;
  height: 1.4rem;
}

.state-label {
  display: none;
}

.service-row:hover,
.service-row:focus-visible,
.service-row[aria-pressed="true"] {
  color: var(--gold-text);
}

.service-row:hover .service-name,
.service-row:focus-visible .service-name,
.service-row[aria-pressed="true"] .service-name {
  transform: translateX(clamp(0.3rem, 0.7vw, 0.75rem));
}

.service-row:hover .service-state,
.service-row:focus-visible .service-state {
  transform: translateX(0.25rem);
}


.team-heading {
  max-width: 58rem;
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

.team-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(22rem, 31vw, 32rem);
  align-items: end;
  overflow: hidden;
  background: var(--graphite);
}

.team-photo {
  grid-column: 1 / -1;
  grid-row: 1;
  display: block;
  overflow: hidden;
  background: var(--silver);
}

.team-photo img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.team-proof {
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  gap: 1.25rem;
  margin: clamp(1rem, 2.5vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid var(--gold);
  background: linear-gradient(145deg, rgba(23, 23, 25, 0.97), rgba(43, 43, 46, 0.94));
  color: var(--frost-bright);
}

.team-proof h3 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1;
  text-wrap: balance;
}

.team-proof p {
  max-width: 34ch;
  margin: 0;
  color: #d8d4cd;
  line-height: 1.55;
}

.team-proof-link {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) 1.25rem;
  min-height: 3.5rem;
  align-items: center;
  gap: 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(247, 247, 247, 0.35);
  color: var(--frost-bright);
  text-decoration: none;
}

.team-proof-link .arrow-icon {
  justify-self: end;
}


.team-proof-link:hover .arrow-icon,
.team-proof-link:focus-visible .arrow-icon {
  transform: translateX(0.22rem);
}

.social {
  display: grid;
  grid-template-columns: minmax(16rem, 0.85fr) minmax(25rem, 1.3fr);
  gap: clamp(3rem, 8vw, 10rem);
  padding-bottom: var(--section-gap);
  box-shadow: inset 0 1px 0 var(--line);
}

.social-copy {
  display: grid;
  align-content: start;
  gap: 1.4rem;
}

.social-links {
  border-top: 1px solid var(--line-strong);
}

/* The row is padded so the hover band never touches the type, and the list is pulled back by
   the same amount so its rules stay aligned with the heading beside it. The pull-back only
   applies where the page gutter is wider than it: at 320px it pushed the document 2px past
   the viewport. */
@media (min-width: 768px) {
  .social-links {
    margin-inline: -1.15rem;
  }
}

.social-links a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto 1.5rem;
  min-height: 6.5rem;
  align-items: center;
  gap: 1rem;
  padding-inline: 1.15rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out);
}

.social-icon {
  width: 1.75rem;
  height: 1.75rem;
  stroke-width: var(--icon-stroke);
}

.social-name {
  font-size: clamp(1.6rem, 2.8vw, 3rem);
  font-weight: 300;
  letter-spacing: -0.03em;
}

.social-state {
  font-size: 0.8125rem;
}

.social-links a > * {
  transition: transform var(--motion-base) var(--ease-out);
}

.social-links a:hover,
.social-links a:focus-visible {
  background: var(--graphite);
  color: var(--frost-bright);
}

.social-links a:hover .social-name,
.social-links a:focus-visible .social-name {
  transform: translateX(0.5rem);
}

.social-links a:hover .social-state,
.social-links a:hover > .arrow-icon,
.social-links a:focus-visible .social-state,
.social-links a:focus-visible > .arrow-icon {
  transform: translateX(-0.5rem);
}

.site-footer {
  --footer-muted: #bbb8b2;
  --footer-line: rgba(247, 247, 247, 0.18);
  background: var(--graphite);
  color: var(--frost-bright);
  font-size: 1rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: 0 calc(5.5rem + env(safe-area-inset-bottom));
}

/* The footer opens like the studio's sign: the name, what and where, since when, and the
   one action, on a single centred axis. The details below keep their left-aligned grid. */
.footer-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
  border-bottom: 1px solid var(--footer-line);
  text-align: center;
}

.footer-signature {
  display: grid;
  align-self: center;
  width: fit-content;
  max-width: 100%;
  justify-items: center;
  gap: 0.9rem;
}

.site-footer .footer-descriptor {
  margin-top: 0.35rem;
  color: var(--frost-bright);
  font-size: 1rem;
  line-height: 1.4;
}
@media (min-width: 1024px) { .site-footer .footer-descriptor { font-size: 1.125rem; } }

.site-footer .footer-brand { color: var(--frost-bright); }

.site-footer .footer-since {
  justify-self: center;
  margin-top: -0.55rem;
  text-align: center;
  color: rgba(251, 251, 250, 0.64);
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

.footer-booking {
  display: inline-flex;
  min-width: min(17rem, 100%);
  min-height: 3.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0.95rem 1.2rem;
  background: var(--gold-on-graphite);
  color: var(--graphite);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--motion-base) var(--ease-out);
}

.footer-booking:hover,
.footer-booking:focus-visible { background: var(--frost-bright); }

.site-footer a:focus-visible {
  box-shadow: 0 0 0 3px var(--graphite), 0 0 0 5px var(--gold-on-graphite);
}

.site-footer nav a::after,
.site-footer .footer-social a::after { background: var(--gold-on-graphite); }

.footer-brand {
  justify-self: center;
}

.footer-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 2.5rem clamp(1.5rem, 4vw, 4rem);
  min-width: 0;
  padding-block: clamp(2.5rem, 4vw, 4rem);
}

.footer-contact,
.footer-hours,
.site-footer nav,
.footer-social {
  display: grid;
  align-content: start;
  gap: 0.65rem;
}

/* Link lists already carry 2.75rem touch rows; an extra gap on top of that spread the
   navigation over twice the height of the column beside it. */
.site-footer .footer-nav,
.site-footer .footer-social {
  gap: 0;
  justify-items: start;
}

/* `.site-footer nav` turned the legal pair into a stacked grid; they belong on one line. */
.site-footer .footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
}

/* The studio's week, folded into ranges and read from the same array as the header. */
.footer-week {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* `.footer-hours dl > div` stacks its pair, which was right for the single
   "schedule / to be confirmed" row it was written for. The week needs the day and its
   hours on one line, and wraps only when the column genuinely cannot hold both. */
.footer-hours .footer-week > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.85rem;
}

/* A fixed day column keeps "Mo.–Fr. 10:00–20:00" reading as one fact instead of stretching
   into a table with a hole in the middle. */
.footer-week dt {
  min-width: 4.25rem;
}

.footer-week dt {
  color: var(--footer-muted);
}

.site-footer .footer-hours dt { color: var(--footer-muted); }

.footer-week dd {
  margin: 0;
}

.footer-week-note {
  margin: 0.75rem 0 0;
  color: var(--footer-muted);
  font-size: 0.8125rem;
}

.footer-heading {
  margin: 0 0 0.35rem;
  color: var(--footer-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-transform: uppercase;
}

/* In the footer the column names are plain labels in sentence case, not spaced capitals. */
.site-footer .footer-heading {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* Seven sections read as a short two-column list beside the other columns, and as a
   wrapping grid where the navigation takes the full width. */
.site-footer .footer-nav {
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  column-gap: 1.5rem;
}
.site-footer .footer-nav .footer-heading { grid-column: 1 / -1; }
@media (max-width: 1159px) {
  .site-footer .footer-nav { grid-column: 1 / -1; }
}
@media (min-width: 1160px) {
  .site-footer .footer-nav { grid-template-columns: repeat(2, max-content); column-gap: 2rem; }
}
/* The menu already holds every section on a phone; the footer keeps address, contact,
   hours and profiles. */
@media (max-width: 767px) {
  .site-footer .footer-nav { display: none; }
}

/* On a phone the address takes the full width; the two short link lists share a row. */
@media (max-width: 599px) {
  .footer-groups { grid-auto-flow: row dense; }
  .site-footer .footer-address { grid-column: 1 / -1; }
}

.footer-inner > * { min-width: 0; }

.site-footer .footer-nav a,
.site-footer .footer-social a,
.site-footer .footer-contact a { color: var(--frost-bright); }

.site-footer .footer-nav a:hover,
.site-footer .footer-nav a:focus-visible,
.site-footer .footer-social a:hover,
.site-footer .footer-social a:focus-visible,
.site-footer .footer-contact a:hover,
.site-footer .footer-contact a:focus-visible { color: var(--gold-on-graphite); }

/* The contact column has no gap (see below), so the address takes the heading distance the
   other columns get from their gap and touch rows; its first line now aligns with theirs. */
.footer-contact address {
  margin-top: 0.6rem;
  margin-bottom: 0.35rem;
  font-style: normal;
  line-height: 1.6;
}

/* Phone and e-mail already carry 2.75rem touch rows; the column gap on top of them opened a
   hole between the lines of one contact block. */
.site-footer .footer-contact {
  gap: 0;
}

.footer-contact a {
  overflow-wrap: anywhere;
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  width: fit-content;
}

.footer-hours dl {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

.footer-hours dl > div {
  display: grid;
  gap: 0.4rem;
}

.footer-hours dt {
  color: var(--text-muted);
}

.footer-hours dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--footer-line);
  color: var(--footer-muted);
}

.site-footer p {
  margin: 0;
  white-space: normal;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.footer-legal-links a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--footer-muted);
  text-underline-offset: 0.24em;
}

.site-footer .footer-legal-links a:hover,
.site-footer .footer-legal-links a:focus-visible { color: var(--frost-bright); }

.legal-page-main {
  min-height: calc(100dvh - var(--header-height));
  padding-block: clamp(0.75rem, 1.5vw, 1.25rem) clamp(5rem, 9vw, 9rem);
}

/* A narrower measure is right for long legal text, but centring it inside the page shell put
   the column at 112px while the footer under it sat at 58px — a visible step on one page. The
   reading width stays; it now starts on the same column as every other surface. */
.legal-page-inner {
  width: min(100%, 76rem);
  margin-inline: 0;
}

.legal-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(2rem, 4vw, 4rem);
  color: var(--text-muted);
}

.legal-breadcrumb a,
.legal-document-nav a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--graphite);
  text-underline-offset: 0.24em;
}

.legal-document-header h1 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(2.8rem, 6.5vw, 6rem);
  font-weight: 420;
  letter-spacing: -0.035em;
  line-height: 0.98;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.legal-document-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-block: clamp(2.5rem, 5vw, 5rem) clamp(2rem, 4vw, 3.5rem);
  padding-block: 0.75rem;
  border-block: 1px solid var(--line);
}

.legal-document-nav a[aria-current="page"] {
  color: var(--gold-text);
  font-weight: 600;
  text-decoration-thickness: 2px;
}

.legal-copy {
  max-width: 70ch;
  color: var(--graphite);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.legal-copy h2 {
  max-width: 28ch;
  margin: 3rem 0 0.75rem;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 500;
  line-height: 1.25;
  text-wrap: balance;
}

.legal-copy p + p {
  margin-top: 1rem;
}

.legal-copy a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  max-width: 100%;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.service-preview-description {
  margin: 0 0 1rem;
  line-height: 1.6;
}

.content-page {
  min-height: calc(100dvh - var(--header-height));
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(5rem, 10vw, 10rem);
}

/* The page title opens the page directly under the header, as on every other page; the
   message, the way home and the other routes follow at one even interval. */
.content-page-inner {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
}
.content-page-inner > * { margin-block: 0; }

.content-page h1,
.content-page .wp-block-query-title {
  max-width: 12ch;
  margin: 0 0 clamp(2.5rem, 6vw, 5rem);
  font-size: clamp(3rem, 7.2vw, 7rem);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 0.96;
}

.content-page .wp-block-post-featured-image {
  margin: 0 0 clamp(2.5rem, 6vw, 5rem);
}

.content-page .wp-block-post-featured-image img {
  width: 100%;
  max-height: 52rem;
  object-fit: cover;
}

.content-page .wp-block-post-content,
.content-page .wp-block-post-excerpt,
.content-page .content-message {
  max-width: 48rem;
  color: #46464a;
  line-height: 1.75;
}

.content-page .wp-block-post-content > * + * {
  margin-block-start: 1.5rem;
}

.content-page .wp-block-post-template {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.content-page .wp-block-post-template > li {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.content-page .wp-block-post-title {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.75rem);
  font-weight: 300;
  letter-spacing: -0.03em;
}

.content-page .wp-block-post-title a {
  text-decoration: none;
}

.content-page .wp-block-post-title a:hover {
  color: var(--gold-text);
}

.reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {

  @keyframes surface-reveal {
    from {
      opacity: 0;
      transform: translateY(-0.35rem);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }
}

@media (max-width: 1279px) {
  :root {
    --page-gutter: clamp(2rem, 4vw, 3.5rem);
  }

  .site-header {
    grid-template-columns: minmax(13.5rem, 0.8fr) minmax(20rem, 1.25fr) auto;
  }

  .desktop-nav {
    gap: clamp(1.1rem, 2vw, 2rem);
  }

  .language-switch {
    display: none;
  }
}

@media (max-width: 1023px) {
  :root {
    --header-height: 4.25rem;
    --utility-height: 2.75rem;
    --page-gutter: clamp(1.5rem, 4vw, 2.5rem);
  }

  .header-service-bar {
    padding-inline: min(var(--page-gutter), 6cqi);
    font-size: 0.8125rem;
  }

  /* `space-between` across three items of different widths drops the status line at an
     arbitrary point in the middle. The address and the status read as one group with a fixed
     rhythm; only the telephone is pushed to the far edge. */
  .header-service-meta {
    width: 100%;
    justify-content: flex-start;
    gap: clamp(0.75rem, 3.5cqi, 1.5rem);
  }

  .header-phone {
    margin-inline-start: auto;
  }

  .header-social {
    display: none;
  }

  .header-location-full,
  .header-hours-wide {
    display: none;
  }

  .header-location-short,
  .header-hours-compact,
  .header-quick-actions {
    display: flex;
  }

  /* Three facts do not fit one narrow bar, and the address was the one that truncated.
     The number keeps its 44px target and its accessible name as an icon alone. */
  .header-phone {
    min-width: var(--utility-height);
    justify-content: center;
    gap: 0;
  }

  .header-phone span {
    display: none;
  }

  .site-header {
    grid-template-columns: 1fr auto;
  }

  .brand-logo {
    width: clamp(8.4rem, 32vw, 12rem);
  }

  /* On a phone the header carries only the mark, the booking action and the menu, so the
     word can take more width than the lockup ever could. */
  .brand-logo-primary {
    width: clamp(8.5rem, 36vw, 13rem);
  }

  header.wp-block-template-part {
    position: sticky;
    top: calc(-1 * var(--header-promo-height, 0px));
    z-index: 20;
  }

  .desktop-nav {
    display: none;
  }

  .header-action {
    padding-inline: 0.85rem;
    font-size: 0.875rem;
  }

  .language-switch {
    display: flex;
  }

  .menu-trigger {
    display: inline-flex;
  }

  .services-layout {
    grid-template-columns: minmax(13rem, 0.62fr) minmax(24rem, 1.25fr);
    gap: 2.5rem;
  }

}

@container (max-width: 63.999rem) {
  .header-service-bar {
    padding-inline: var(--page-gutter);
    font-size: 0.8125rem;
  }

  /* `space-between` across three items of different widths drops the status line at an
     arbitrary point in the middle. The address and the status read as one group with a fixed
     rhythm; only the telephone is pushed to the far edge. */
  .header-service-meta {
    width: 100%;
    justify-content: flex-start;
    gap: clamp(0.75rem, 3.5cqi, 1.5rem);
  }

  .header-phone {
    margin-inline-start: auto;
  }

  .header-social {
    display: none;
  }

  .header-location-full,
  .header-hours-wide {
    display: none;
  }

  .header-location-short,
  .header-hours-compact,
  .header-quick-actions {
    display: flex;
  }

  /* Three facts do not fit one narrow bar, and the address was the one that truncated.
     The number keeps its 44px target and its accessible name as an icon alone. */
  .header-phone {
    min-width: var(--utility-height);
    justify-content: center;
    gap: 0;
  }

  .header-phone span {
    display: none;
  }

  .site-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding-block: 0.4rem;
  }

  .brand-logo {
    width: clamp(8.4rem, 32vw, 12rem);
  }

  .desktop-nav,
  .site-header .language-switch {
    display: none;
  }

  .site-header .header-tools {
    margin-inline-start: auto;
  }

  .menu-trigger {
    display: inline-flex;
  }

  .services-layout {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  .service-visual {
    position: relative;
    top: auto;
    order: 2;
    width: min(88%, 30rem);
    min-height: 0;
    align-self: flex-end;
  }

  .service-visual img {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .service-list {
    order: 1;
  }

  .service-row {
    grid-template-columns: 2.75rem minmax(0, 1fr) 1.5rem;
    min-height: 4.6rem;
  }

  .service-name {
    font-size: clamp(1.7rem, 8vw, 2.35rem);
  }
}

/* The introduction spans the shell; details move to four columns only when they fit. */
@media (min-width: 1160px) {
  .footer-groups { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(0, 1.3fr) minmax(0, 0.95fr); }
}

@media (max-width: 767px) {
  .header-quick-action-secondary {
    display: none;
  }

  .team-stage {
    display: block;
  }

  .team-proof {
    margin: 0;
    padding: 1.75rem;
  }

  .team-proof h3 {
    max-width: 13ch;
  }
}

@media (max-width: 479px) {
  .site-header .header-quick-actions {
    display: none;
  }
}

@media (max-width: 767px) {
  :root {
    --header-height: 4rem;
    --utility-height: 2.75rem;
    --section-gap: 3.5rem;
    --page-gutter: 1.25rem;
    --display: clamp(2.65rem, 13vw, 4rem);
    --h2: clamp(2.1rem, 9vw, 3.2rem);
  }

  html {
    scroll-padding-top: calc(var(--header-height) + var(--utility-height) + 0.75rem);
  }

  .site-header {
    position: relative;
    min-height: var(--header-height);
    padding-inline: var(--page-gutter);
  }

  .brand-name {
    font-size: 1.125rem;
  }

  .brand-city {
    font-size: 0.8125rem;
  }

  .header-tools {
    gap: 0.3rem;
  }

  .language-switch {
    display: none;
  }

  .language-switch [aria-disabled="true"] {
    display: none;
  }

  .button-primary {
    width: 100%;
    justify-content: space-between;
  }

  .services-heading {
    gap: 1rem;
    margin-bottom: 2.8rem;
  }

  .services-layout {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  .catalog-teaser-link {
    width: 100%;
    justify-content: space-between;
    margin-top: 3rem;
  }

  .service-visual {
    position: relative;
    top: auto;
    order: 2;
    width: min(88%, 30rem);
    min-height: 0;
    align-self: flex-end;
  }

  .service-visual img {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .service-list {
    order: 1;
  }

  .service-row {
    grid-template-columns: 2.75rem minmax(0, 1fr) 1.5rem;
    min-height: 4.6rem;
  }

  .service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .service-name {
    font-size: clamp(1.7rem, 8vw, 2.35rem);
  }

  .service-row:hover .service-name,
  .service-row[aria-pressed="true"] .service-name {
    transform: translateX(0.25rem);
  }

  .social-links a {
    grid-template-columns: 2rem minmax(0, 1fr) 1.25rem;
  }

  .social-state {
    display: none;
  }

  .team-heading {
    margin-bottom: 2.4rem;
  }

  .team-photo {
    overflow: hidden;
    background: var(--graphite);
  }

  .team-photo img {
    width: 100%;
    min-width: 0;
    height: auto;
  }

  .social {
    display: block;
    padding-bottom: var(--section-gap);
  }

  .social-copy {
    margin-bottom: 2.8rem;
  }

  .social-links a {
    min-height: 5.5rem;
  }

  .footer-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 2.5rem 1.5rem;
  }

  .footer-intro { align-items: center; }

  .site-footer p {
    white-space: normal;
  }
}

/* `.brand` is `width: max-content`, so a percentage width on the mark inside it asks the
   container for a size the container is still deriving from the mark. Chromium resolved that
   circle one way and WebKit another: in Safari the image fell back to its 1020px attribute
   width, blew the footer track past the viewport and produced a horizontal scrollbar with the
   mark pushed off the right edge. The width is now a definite length, and the clamp is done by
   `max-width` against the grid area, which has a real size. */
.footer-brand {
  max-width: 100%;
}

.footer-brand .brand-logo {
  width: clamp(17.5rem, 32vw, 28.75rem);
  max-width: 100%;
}

@media (max-width: 599px) {
  .footer-intro { flex-direction: column; align-items: stretch; gap: 2.25rem; }
  .footer-booking { width: 100%; }
  .footer-hours { grid-column: 1 / -1; }
  .footer-meta { gap: 0.5rem; }
}

@media (max-width: 359px) {
  :root {
    --page-gutter: 1rem;
  }

  .header-service-meta {
    gap: 0.5rem;
  }

  .header-location {
    gap: 0.45rem;
  }

  .language-switch {
    display: none;
  }

  .service-row {
    grid-template-columns: 2.5rem minmax(0, 1fr) 1.25rem;
    gap: 0.55rem;
    padding-block: 0.9rem;
  }
}

@media (min-width: 1681px) {
  :root {
    --page-gutter: 6rem;
  }

  /* Keep the header full width: its shell padding is based on the containing
     block. Capping the header itself counts the outer gutters twice on 4K. */
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

@supports not (backdrop-filter: blur(4px)) {
  .mobile-menu::backdrop {
    background: rgba(23, 23, 25, 0.72);
  }
}

[hidden] { display: none !important; }

/* Standalone links have the same minimum touch area as buttons. */
.brand, .desktop-nav a, .site-footer nav a, .footer-social a, .text-link,
.catalog-teaser-link {
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}
.brand { justify-content: center; }
.service-selection-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 1rem 0;
  color: var(--gold-text);
  text-decoration: underline;
}
.service-selection-link span { overflow-wrap: anywhere; }
.service-selection-link:hover { color: var(--graphite); }
.service-list { min-width: 0; }
@media (prefers-reduced-motion: reduce) {
  .service-row .service-name, .service-row .service-state,
  .social-links a > *, .service-visual.is-loading img {
    transform: none !important;
  }
}
@media (forced-colors: active) {
  a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

@media (max-width: 559px) {
 .site-header .language-switch { display: none; }
}

/* Let enlarged text wrap the header before it can push the menu off-screen. */
@media (max-width: 1023px) {
 .site-header { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; padding-block: 0.4rem; }
 .site-header .header-tools { margin-inline-start: auto; }
}

/* Language links use the same quiet typography, with real touch targets. */
.language-switch { gap: 0; }
.language-switch > * { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.language-switch a:hover { color: var(--gold-text); text-decoration: underline; text-underline-offset: 0.25em; }
.desktop-nav small, .site-footer nav small { font-size: 0.7em; margin-inline-start: 0.25em; }
@media (max-width: 1023px) { .header-tools { gap: 0.4rem; } }
@media (min-width: 1024px) and (max-width: 1199px) {
 .catalog-page .language-switch { display: flex; }
 .catalog-page .site-header { grid-template-columns: auto 1fr auto; gap: 1rem; }
 .catalog-page .desktop-nav { gap: 1rem; }
}
.home h2 { overflow-wrap: anywhere; }
/* A language choice should be equally findable on every current surface. */
@media (min-width: 1024px) and (max-width: 1199px) {
 .language-switch { display: flex; }
 .site-header { grid-template-columns: auto 1fr auto; gap: 1rem; }
 .desktop-nav { gap: 1rem; }
}

/* Booking sits next to the menu in the header row, not inside the information strip:
   one band holds both actions, they share an edge and a height, and the graphite strip
   above stays an uninterrupted line of address and opening hours. */
@container (max-width: 63.999rem) {
 .site-header .header-action {
  display: inline-flex;
  min-width: 5rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--graphite);
  background: var(--graphite);
  color: var(--frost-bright);
  font-size: 0.9375rem;
 }
 .site-header .header-action:hover,
 .site-header .header-action:focus-visible {
  background: var(--frost-bright);
  color: var(--graphite);
 }
}
@media (max-width: 1023px) {
 .header-shell { padding-top: env(safe-area-inset-top); }
 .site-header .header-quick-actions { display: none; }
 .footer-inner { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
 /* The wordmark gives up the width the two actions need, and keeps its own lower bound. */
 .brand-logo { width: clamp(8.4rem, 32vw, 12rem); }
 .brand-logo-wide { display: none; }
 .brand-logo-compact { display: block; }
 .header-tools { gap: 0.45rem; }
}
/* The strip used to hide the status below 390px because it was crowded. It is not any more:
   the address collapses to an icon on its own container query long before the status has to
   go, and a bar that says nothing about opening hours is the least useful of the three. */

/* The narrowest phones keep the wordmark and both actions on one line. Authored after the
   mobile header block above, because both rules carry the same specificity. */
@media (max-width: 359px) {
 .brand-logo { width: clamp(7.6rem, 38vw, 10rem); }
 .site-header .header-action { min-width: 4rem; padding-inline: 0.65rem; font-size: 0.8125rem; }
 .header-tools { gap: 0.3rem; }
}

/* With the shop cart beside it the booking button used to push the menu onto a second row at 360-430px
   (a 110px header instead of 64px). The wordmark, cart, booking and menu share one row down to 360px. */
@media (max-width: 479px) {
 .site-header { gap: 0.4rem; }
 .brand-logo { width: clamp(6rem, 33vw, 8.25rem); }
 .header-tools { gap: 0.2rem; }
 .site-header .header-action { min-width: 0; padding-inline: 0.6rem; font-size: 0.8125rem; }
}
@media (max-width: 359px) {
 .brand-logo { width: 5.8rem; }
 .site-header .header-action { padding-inline: 0.45rem; font-size: 0.8125rem; }
}

/* The studio's neighbourhood, rendered from local files. No request leaves the site when
   this is shown, so it costs the visitor neither a cookie nor a consent dialog. */
.studio-map {
  min-width: 0;
  margin: 0;
}

.studio-map-link {
  display: block;
  overflow: hidden;
  background: var(--frost);
  outline-offset: 3px;
}

.studio-map-media,
.studio-map-media img {
  display: block;
  width: 100%;
}

.studio-map-media img {
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-slow) var(--ease-out), filter var(--motion-base) var(--ease-out);
}

.studio-map-link:hover .studio-map-media img,
.studio-map-link:focus-visible .studio-map-media img {
  transform: scale(1.015);
}

.studio-map-note {
  display: flex;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

.studio-map-note a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: inherit;
  text-underline-offset: 0.25em;
}

.studio-map-note a:hover,
.studio-map-note a:focus-visible { color: var(--graphite); }

.site-footer .studio-map-note { color: var(--footer-muted); }
.site-footer .studio-map-note a:hover,
.site-footer .studio-map-note a:focus-visible { color: var(--frost-bright); }

.studio-map--invitation .studio-map-media img { aspect-ratio: 16 / 10; }

/* In the footer the map is a locator strip: wide, low, and never the loudest thing there. */
.studio-map--footer {
  grid-column: 1 / -1;
  margin-top: 0;
}

/* A band of neighbourhood, not a panel: at 1325px the 16/5 crop stood 414px tall and was
   the largest object in the footer. The graphite underneath also holds the frame before
   the file arrives, so nothing flashes against the dark surface. */
.studio-map--footer .studio-map-media { background: var(--graphite-soft); }
.studio-map--footer .studio-map-media img { aspect-ratio: 21 / 5; }
.studio-map--invitation { max-width: 40rem; }

@media (max-width: 767px) {
  .studio-map--footer .studio-map-media img { aspect-ratio: 16 / 9; }
  .studio-map--invitation .studio-map-media img { aspect-ratio: 3 / 2; }
}

/* The service bar answers to its own width, not the viewport's — including at 200% zoom,
   where a 720px viewport gives the bar 360 of its own pixels.

   The three facts are measured, not guessed: the address group is 133px, the status group
   134px in DE/EN and 148px in RU, the number 44px. They fit a 368px bar in every locale and
   every daily status, so the phone bar keeps the address as words and spreads the three
   along the line instead of leaving a 153px hole in the middle of it. The 480px threshold
   this replaces removed the address from every portrait phone that exists. */
@container (max-width: 30rem) {
  .header-shell .header-service-meta {
    justify-content: space-between;
    gap: 0.75rem;
  }

  .header-shell .header-location {
    flex: 0 1 auto;
    min-width: 0;
  }

  .header-shell .header-phone {
    flex: none;
    margin-inline-start: 0;
  }
}

/* Below that the address becomes an icon instead of ellipsising, consistently across
   locales and daily status text. The icon keeps its 44px target and sits at the start of
   it, so it stays on the same left edge as the wordmark below rather than 13px inside it. */
@container (max-width: 23rem) {
  .header-shell .header-location-short {
    display: none;
  }

  .header-shell .header-location {
    min-width: var(--utility-height);
    justify-content: flex-start;
    gap: 0;
  }
}

/* Seven navigation entries, cart and languages need the existing compact header below 96rem. */
@container (min-width: 64rem) and (max-width: 95.999rem) {
 .header-shell .site-header { grid-template-columns: minmax(0, 1fr) auto; }
 .site-header .desktop-nav { display: none; }
 .site-header .menu-trigger { display: inline-flex; }
 .site-header .language-switch { display: flex; }
}

/* Reserve the required language gap when the full menu and cart share the row. */
@container (min-width: 96rem) {
 .header-shell .site-header { grid-template-columns: auto max-content auto; justify-content: space-between; column-gap: 2rem; }
 .site-header .header-tools { gap: 1.5rem; }
}

/* Laptops (78–95.999rem, so a 1280 px window with a classic scrollbar qualifies): the four main
   sections sit in the row; Startseite, Studio and Team stay in the burger with contacts. Below
   78rem the burger alone, from 96rem the full menu. */
@container (min-width: 78rem) and (max-width: 95.999rem) {
  .header-shell .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 2rem;
  }

  .site-header .desktop-nav {
    display: flex;
  }

  .site-header .desktop-nav .desktop-nav-more {
    display: none;
  }
}

/* The light cut loses its hairlines at header sizes next to the filled booking button: a
   restrained stroke keeps the hairlines legible (header and drawer only). The shared
   SVG frame includes room for the stroke on all sides, preserving the flared terminals. */
.site-header .brand-logo,
.mobile-menu .mobile-menu-logo {
  stroke: currentColor;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

.site-header .brand-logo-wide {
  stroke-width: 24px;
}

.site-header .brand-logo-compact,
.mobile-menu .mobile-menu-logo {
  stroke-width: 44px;
}

/* Recovery links on the 404 page. Every address of the previous site arrives here. */
.content-links {
  margin: -0.6rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
}

/* Standalone links, so they get the site's 2.75rem touch row. The negative top margin takes
   back the row's extra half-leading, so the links stay as close to the sentence introducing
   them as before. */
.content-links a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  text-underline-offset: 0.35em;
}

/* --- Footer rhythm ---------------------------------------------------------------
   The footer stood 1297px at 1440 and 1535px on a phone, because three stacked blocks
   each carried their own generous padding: the intro rule, the column block and the map.
   The blocks keep their separation; the compounding goes. */
.footer-groups {
  padding-block: clamp(2rem, 3.2vw, 3rem);
}

.site-footer .studio-map--footer + .footer-meta,
.site-footer .footer-meta {
  padding-top: clamp(1.5rem, 2.4vw, 2rem);
}

.footer-intro {
  padding-bottom: clamp(2rem, 3.2vw, 3rem);
}

/* The studio's own details lead; the map closes. */
.site-footer .studio-map--footer .studio-map-note {
  padding-top: 0.6rem;
}

@media (max-width: 767px) {
  /* A phone footer is a list, and its four blocks do not need desktop breathing room. */
  .footer-groups { gap: 2rem 1.5rem; padding-block: 2rem; }
  .footer-intro { padding-bottom: 1.75rem; }
  .site-footer .footer-booking { width: 100%; }
}

/* Keep Frankfurt behind the useful footer, inside the page's shared measure.
   A continuous graphite veil lets links read over both the sky and the buildings. */
.site-footer {
  background: transparent;
  width: min(100%, var(--page-max));
  margin-inline: auto;
  /* The footer continues the preceding dark scene. Space belongs inside its
     map/menu surfaces, never in a transparent strip between them. */
  padding: 0;
}
.footer-map-shell {
  padding-block: 1.5rem;
  background: var(--graphite);
}
.footer-map-shell .studio-map-media img {
  max-height: 16rem;
}
.site-footer .footer-inner {
  position: relative;
  isolation: isolate;
  padding-block: 2rem calc(4.5rem + env(safe-area-inset-bottom));
  background: var(--graphite);
  overflow: hidden;
}
.site-footer .footer-groups { padding-block: 0 1.5rem; }
.site-footer .footer-meta { padding-top: 1.25rem; }

.footer-skyline,
.footer-skyline img,
.site-footer .footer-inner::before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.footer-skyline { z-index: -2; }
.footer-skyline img { object-fit: cover; object-position: center bottom; }
.site-footer .footer-inner::before {
  z-index: -1;
  content: "";
  background: linear-gradient(180deg, rgba(23, 23, 25, 0.78), rgba(23, 23, 25, 0.68) 55%, rgba(23, 23, 25, 0.64));
}

@media (max-width: 767px) {
  .footer-skyline img { object-position: 38% bottom; }
}

/* imported catalogue rating with its source and date (inc/business-facts.php). The star is filled;
   the figures stay text so they read and copy as written. */
.rating-proof {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  min-height: 2.75rem;
  color: inherit;
  font-size: 0.9375rem;
  line-height: 1.35;
  text-decoration: none;
}
.rating-proof-score { font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rating-proof-star { width: 1.05rem; height: 1.05rem; flex: none; fill: currentColor; stroke: none; color: var(--gold-text); }
.rating-proof-text { color: var(--text-muted); }
.rating-proof-date { color: inherit; font-size: 0.8125rem; }
.rating-proof:hover .rating-proof-text,
.rating-proof:focus-visible .rating-proof-text { text-decoration: underline; text-underline-offset: 0.2em; }
.page-banner .rating-proof { margin-top: 0.75rem; color: var(--frost-bright); }
.page-banner .rating-proof-star { color: var(--gold-on-graphite); }
.page-banner .rating-proof-text { color: var(--silver); }
.page-banner .rating-proof-date { color: var(--silver); }
@media (max-width: 767px) {
  .rating-proof { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 0.15rem 0.4rem; width: fit-content; }
  .rating-proof-text { font-size: 0.8125rem; }
  /* Phones keep the date for assistive technology only; the link names imported catalogue as the source. */
  .rating-proof-date { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Existing extensions: per-strand prices and the request (inc/hair-care.php). */
.hair-care {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line-strong);
  background: var(--frost-bright);
  scroll-margin-top: calc(var(--sticky-header-height) + 1rem);
}
.hair-care-kicker {
  margin: 0;
  color: var(--gold-text);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hair-care-heading h2,
.hair-care-heading h3 {
  margin: 0.4rem 0 0.6rem;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 420;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.hair-care-heading p:last-child { max-width: 62ch; margin: 0; color: var(--text-muted); }
.hair-care-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hair-care-table th,
.hair-care-table td { padding: 0.8rem 0.5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.hair-care-table th:first-child { padding-left: 0; }
.hair-care-table td:last-child { padding-right: 0; }
.hair-care-table thead th {
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hair-care-table thead th:not(:first-child),
.hair-care-table .hair-care-price { text-align: right; white-space: nowrap; }
.hair-care-table .hair-care-price[colspan] { text-align: center; }
.hair-care-table tbody th { font-weight: 420; }
.hair-care-name { display: block; font-weight: 500; }
.hair-care-note { display: block; margin-top: 0.15rem; color: var(--text-muted); font-size: 0.875rem; }
.hair-care-price { font-weight: 500; }
.hair-care-footnote,
.hair-care-help { margin: 0; color: var(--text-muted); font-size: 0.875rem; }
.hair-care-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.hair-care-actions .text-link { display: inline-flex; min-height: 2.75rem; align-items: center; gap: 0.5rem; }
@media (max-width: 599px) {
  .hair-care-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hair-care-table,
  .hair-care-table tbody,
  .hair-care-table tr,
  .hair-care-table th,
  .hair-care-table td { display: block; }
  .hair-care-table tr { padding-block: 0.8rem; border-bottom: 1px solid var(--line); }
  .hair-care-table th,
  .hair-care-table td { padding: 0; border: 0; }
  .hair-care-table td { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; text-align: left; }
  .hair-care-table td::before { content: attr(data-label); color: var(--text-muted); font-weight: 420; }
  .hair-care-actions .button { width: 100%; justify-content: space-between; }
}

/* Phones keep the offer and booking visible; hours and contacts live in the menu. */
@media (max-width: 767px) {
  :root { --utility-height: 0px; }
  .header-service-bar { display: none; }
  .header-offer { flex-wrap: nowrap; gap: .65rem; padding-inline: .75rem; }
  .header-offer-bar > .header-offer { padding-inline: .75rem 2.75rem; }
  .header-offer > span:first-child { min-width: 0; }
  .header-offer-action > span { display: none; }
  .header-offer-action { flex: none; }
}

/* Shared square native fields; the chevron is the existing 24-unit gift-card icon. */
html body :is(.hair-picker select, .gift-amount-controls select, .shop-purchase select, .catalog-category-picker select) {
 -webkit-appearance: none;
 appearance: none;
 min-height: 3.25rem;
 height: 3.25rem;
 border: 1px solid var(--line-strong);
 border-radius: 0;
 padding: 0.7rem 2.75rem 0.7rem 0.9rem;
 color: var(--graphite);
 background-color: var(--frost-bright);
 font: inherit;
 font-size: 1rem;
 line-height: 1.4;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171719' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 0.95rem center;
 background-size: 0.9rem;
}
html body :is(.hair-picker select, .gift-amount-controls select, .shop-purchase select, .catalog-category-picker select):focus-visible {
 outline: 2px solid var(--gold-text);
 outline-offset: 2px;
}
/* Same height as the selects beside it; the calculator's own 3rem row rule would otherwise win. */
html body .hair-picker input[type="number"] { -moz-appearance: textfield; appearance: textfield; min-height: 3.25rem; height: 3.25rem; block-size: 3.25rem; min-block-size: 3.25rem; }
.hair-picker input[type="number"]::-webkit-inner-spin-button,
.hair-picker input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
@media (forced-colors: active) {
 html body :is(.hair-picker select, .gift-amount-controls select, .shop-purchase select, .catalog-category-picker select) { appearance: auto; background-image: none; }
}