:root {
  --black: #111111;
  --ink: #1b1b1a;
  --charcoal: #2b2a28;
  --gold: #b28a4a;
  --gold-deep: #8b682f;
  --gold-text: #745426;
  --gold-light: #d9bd84;
  --white: #ffffff;
  --paper: #f7f6f3;
  --soft: #eeece7;
  --line: rgba(21, 21, 21, 0.18);
  --line-light: rgba(255, 255, 255, 0.2);
  --scroll-progress: 0;
}

* {
  box-sizing: border-box;
}

html {
  /* Kein globales scroll-behavior: smooth. In Chrome animiert das auch
     Tastatur- und Scrollbalken-Bedienung und liess die Seite "Fahrt
     aufnehmen". Das JavaScript uebergibt beim Ankersprung ohnehin
     explizit behavior: 'smooth' - die Regel war ueberfluessig. */
  scroll-behavior: auto;
}

body {
  background: var(--paper);
  color: var(--ink);
  margin: 0;
  overflow-x: hidden;
  padding: 0;
}

body.video-lightbox-open {
  overflow: hidden;
}

body,
button,
input,
textarea,
select {
  font-family: Arial, Helvetica, sans-serif;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
p,
figure,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0;
}

.ifp-preview-app h1,
.ifp-preview-app h2,
.ifp-preview-app h3 {
  color: inherit !important;
}

p,
a,
span,
li,
dt,
dd {
  letter-spacing: 0;
}

.legal-page {
  background: var(--paper);
  min-height: 100vh;
}

.legal-hero {
  background: var(--soft);
  border-bottom: 1px solid var(--line);
  padding: clamp(8rem, 15vh, 11rem) 0 clamp(3.5rem, 7vw, 6rem);
}

.legal-hero h1 {
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  line-height: 0.92;
  margin-top: 1rem;
}

.legal-hero > .section-shell > p:last-child {
  color: var(--charcoal);
  font-size: 1.1rem;
  line-height: 1.7;
  margin-top: 1.5rem;
  max-width: 48rem;
}

.legal-layout {
  display: grid;
  gap: 0;
  max-width: 62rem;
  padding-bottom: clamp(5rem, 9vw, 8rem);
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
}

.legal-layout-wide {
  max-width: 70rem;
}

.legal-layout section {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 1rem;
  padding: 2rem 0;
}

.legal-layout section:first-child {
  border-top: 0;
}

.legal-layout h2 {
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.08;
}

.legal-layout p,
.legal-layout address {
  color: var(--charcoal);
  font-size: 1rem;
  font-style: normal;
  line-height: 1.75;
  max-width: 62rem;
}

.legal-layout a {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.2em;
}

.skip-link {
  background: var(--white);
  color: var(--black);
  left: 16px;
  padding: 12px 16px;
  position: fixed;
  top: -80px;
  z-index: 200;
}

.skip-link:focus {
  top: 16px;
}

:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 4px;
}

.scroll-progress {
  background: var(--gold);
  height: 3px;
  left: 0;
  position: fixed;
  top: 0;
  transform: scaleX(var(--scroll-progress));
  transform-origin: left;
  width: 100%;
  z-index: 150;
}

.section-shell {
  margin: 0 auto;
  max-width: 1320px;
  padding-left: 42px;
  padding-right: 42px;
  width: 100%;
}

.eyebrow {
  color: var(--gold-light);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.eyebrow-gold {
  color: var(--gold-deep);
}

.site-header {
  align-items: center;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid rgba(27, 27, 26, 0.13);
  color: var(--ink);
  display: grid;
  grid-template-columns: 230px 1fr auto;
  height: 88px;
  padding: 0 42px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.brand {
  align-items: center;
  display: grid;
  height: 100%;
  width: 190px;
}

.brand .cut-nav-label,
.brand .cut-nav-fragment {
  align-self: center;
}

.brand .cut-nav-flash {
  height: 74%;
  top: 13%;
}

.brand img {
  height: auto;
  width: 180px;
}

.desktop-nav {
  align-items: center;
  display: flex;
  gap: 38px;
  justify-content: center;
}

.desktop-nav-menu {
  align-items: center;
  display: flex;
  position: relative;
}

.desktop-nav-menu::after {
  content: "";
  height: 14px;
  left: -14px;
  position: absolute;
  right: -14px;
  top: 100%;
}

.desktop-nav-menu .cut-nav-link {
  z-index: 1;
}

.desktop-nav-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--ink);
  display: inline-flex;
  height: 36px;
  justify-content: center;
  margin-left: 5px;
  padding: 0;
  width: 18px;
}

.desktop-nav-toggle svg,
.desktop-nav-toggle .nav-chevron {
  height: 7px;
  transition: transform 180ms ease;
  width: 7px;
}

.desktop-nav-toggle .nav-chevron {
  border-bottom: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  display: block;
  transform: rotate(45deg) translate(-1px, -1px);
}

.desktop-nav-menu:has(.desktop-nav-dropdown.is-open) .desktop-nav-toggle svg {
  transform: rotate(180deg);
}

.desktop-nav-menu:has(.desktop-nav-dropdown.is-open) .desktop-nav-toggle .nav-chevron {
  transform: rotate(225deg) translate(-1px, -1px);
}

.desktop-nav-dropdown {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px rgba(17, 17, 17, 0.1);
  display: grid;
  left: -14px;
  min-width: 185px;
  opacity: 0;
  padding: 8px;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 9px);
  transform: translateY(-5px);
  transition:
    opacity 150ms ease,
    transform 150ms ease;
  z-index: 10;
}

.desktop-nav-dropdown.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.desktop-nav-dropdown .cut-nav-link {
  font-size: 0.7rem;
  padding: 12px 11px;
  white-space: nowrap;
}

.desktop-nav-dropdown .cut-nav-link:hover,
.desktop-nav-dropdown .cut-nav-link:focus-visible {
  background: var(--soft);
}

.desktop-nav a {
  color: var(--ink);
  display: grid;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.2;
  padding: 12px 0;
  position: relative;
  text-transform: uppercase;
}

.cut-nav-label,
.cut-nav-fragment {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.cut-nav-link {
  position: relative;
}

.footer-brand.cut-nav-link,
.mobile-booking.cut-nav-link {
  display: grid;
}

.footer-brand.cut-nav-link .cut-nav-label,
.footer-brand.cut-nav-link .cut-nav-fragment,
.mobile-booking.cut-nav-link .cut-nav-label,
.mobile-booking.cut-nav-link .cut-nav-fragment {
  align-items: center;
  display: flex;
  justify-content: center;
}

.cut-nav-fragment {
  opacity: 0;
  pointer-events: none;
}

.cut-nav-fragment-left {
  clip-path: polygon(
    0 0,
    var(--cut-position, 50%) 0,
    var(--cut-position, 50%) 100%,
    0 100%
  );
}

.cut-nav-fragment-right {
  clip-path: polygon(
    var(--cut-position, 50%) 0,
    100% 0,
    100% 100%,
    var(--cut-position, 50%) 100%
  );
}

.cut-nav-flash {
  background: var(--gold);
  height: 26px;
  left: var(--cut-position, 50%);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 5px;
  transform: rotate(-18deg) scaleY(0);
  transform-origin: center;
  width: 1px;
}

.cut-nav-link.is-cutting .cut-nav-label {
  opacity: 0;
}

.cut-nav-link.is-cutting .cut-nav-fragment {
  opacity: 1;
}

.cut-nav-link.is-cutting .cut-nav-fragment-left {
  animation: cut-nav-left 380ms cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
}

.cut-nav-link.is-cutting .cut-nav-fragment-right {
  animation: cut-nav-right 380ms cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
}

.cut-nav-link.is-cutting .cut-nav-flash {
  animation: cut-nav-flash 210ms ease-out forwards;
}

.cut-nav-link.is-cutting::after {
  transform: scaleX(0);
}

@keyframes cut-nav-left {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
  100% {
    opacity: 0;
    transform: translate(-7px, -3px) rotate(-2deg);
  }
}

@keyframes cut-nav-right {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
  100% {
    opacity: 0;
    transform: translate(7px, 3px) rotate(2deg);
  }
}

@keyframes cut-nav-flash {
  0% {
    opacity: 0;
    transform: rotate(-18deg) scaleY(0);
  }
  35% {
    opacity: 1;
    transform: rotate(-18deg) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: rotate(-18deg) scaleY(0.55);
  }
}

.desktop-nav a::after {
  background: var(--gold);
  bottom: 5px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
  width: 100%;
}

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

.header-booking {
  align-items: center;
  background: var(--black);
  color: var(--white);
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 800;
  gap: 9px;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  text-transform: uppercase;
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.header-booking.cut-nav-link {
  display: grid;
}

.header-booking .cut-nav-label,
.header-booking .cut-nav-fragment {
  align-items: center;
  display: flex;
  gap: 9px;
  justify-content: center;
}

.header-booking:hover,
.header-booking:focus-visible {
  background: var(--gold-light);
  box-shadow: 0 8px 18px rgba(20, 19, 17, 0.18);
  color: var(--black);
  transform: translateY(-2px);
}

.mobile-menu {
  display: none;
}

.hero {
  align-items: flex-end;
  background: var(--black);
  display: flex;
  height: 82svh;
  max-height: 840px;
  min-height: 620px;
  overflow: hidden;
  position: relative;
}

.hero-image,
.page-hero > img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.hero-image {
  object-position: center 56%;
}

.salon-film-section {
  background: var(--white);
  padding: 0 0 120px;
}

.salon-film-section .section-shell {
  border-top: 1px solid var(--line);
  padding-top: 76px;
}

.salon-film-heading {
  align-items: end;
  display: grid;
  gap: 70px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.48fr);
  margin-bottom: 58px;
}

.salon-film-heading h2 {
  font-size: 4.25rem;
  line-height: 1;
  margin-top: 18px;
}

.salon-film-heading > p {
  color: #68645d;
  line-height: 1.75;
}

.salon-video {
  aspect-ratio: 16 / 9;
  background: #050505;
  overflow: hidden;
  position: relative;
}

.salon-video video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.salon-video-center-play,
.salon-video-controls button {
  align-items: center;
  backdrop-filter: blur(8px);
  background: rgba(17, 17, 17, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--white);
  display: inline-flex;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.salon-video-center-play {
  border-radius: 50%;
  height: 72px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition:
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease;
  width: 72px;
  z-index: 3;
}

.salon-video-center-play:hover,
.salon-video-center-play:focus-visible,
.salon-video-controls button:hover,
.salon-video-controls button:focus-visible {
  background: var(--white);
  color: var(--black);
}

.salon-video-center-play:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

.salon-video-center-play svg {
  height: 28px;
  margin-left: 3px;
  width: 28px;
}

.salon-video::after {
  background: rgba(0, 0, 0, 0.14);
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 180ms ease;
  z-index: 2;
}

.salon-video.is-playing:hover::after,
.salon-video.is-playing:focus-within::after {
  opacity: 1;
}

.salon-video-center-play.is-starting {
  animation: play-button-press 150ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.salon-video-buffering {
  align-items: center;
  backdrop-filter: blur(8px);
  background: rgba(17, 17, 17, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--gold-light);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 800;
  gap: 9px;
  left: 50%;
  padding: 11px 14px;
  position: absolute;
  text-transform: uppercase;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
}

.salon-video-buffering svg {
  animation: barber-spinner 900ms linear infinite;
}

@keyframes barber-spinner {
  to { transform: rotate(360deg); }
}

@keyframes play-button-press {
  0% { transform: translate(-50%, -50%) scale(1); }
  55% { transform: translate(-50%, -50%) scale(0.88); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.salon-video-controls svg {
  height: 21px;
  width: 21px;
}

.salon-video.is-expanded {
  aspect-ratio: auto;
  background: #050505;
  inset: 0;
  position: fixed;
  z-index: 12000;
}

.salon-video.is-expanded video {
  object-fit: contain;
  object-position: center;
}

.salon-video-controls {
  align-items: center;
  bottom: 22px;
  display: flex;
  gap: 10px;
  position: absolute;
  right: 22px;
  z-index: 4;
}

.salon-video-controls,
.salon-video-timeline {
  transition: opacity 180ms ease, transform 180ms ease;
}

.salon-video-timeline {
  align-items: center;
  bottom: 22px;
  display: flex;
  gap: 10px;
  left: 22px;
  position: absolute;
  right: 286px;
  z-index: 4;
}

.salon-video-timeline span {
  backdrop-filter: blur(8px);
  background: rgba(17, 17, 17, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--white);
  font-size: 0.62rem;
  font-weight: 800;
  min-width: 43px;
  padding: 10px 7px;
  text-align: center;
  text-transform: uppercase;
}

.salon-video-timeline input {
  accent-color: var(--gold-light);
  cursor: none;
  flex: 1;
  min-width: 0;
  opacity: 0.82;
}

.salon-video-timeline input:disabled {
  opacity: 0.55;
}

.salon-volume-control {
  align-items: center;
  backdrop-filter: blur(8px);
  background: rgba(17, 17, 17, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.24);
  display: flex;
}

.salon-volume-control button {
  backdrop-filter: none;
  background: transparent;
  border: 0;
}

.salon-volume-control input {
  accent-color: var(--gold-light);
  height: 48px;
  margin: 0 15px 0 2px;
  opacity: 0.82;
  width: 108px;
}

.hero-shade,
.page-hero-shade {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.15) 78%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.58), transparent 50%);
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.hero-content {
  color: var(--white);
  margin: 0 auto;
  max-width: 1320px;
  padding: 0 42px 96px;
  position: relative;
  width: 100%;
  z-index: 2;
}

.hero-content h1 {
  color: var(--white) !important;
  font-size: 6.5rem;
  line-height: 0.9;
  margin-top: 24px;
  max-width: 850px;
}

.hero-content h1 span {
  color: var(--gold-light);
  display: block;
}

.hero-copy {
  font-size: 1.18rem;
  line-height: 1.65;
  margin-top: 30px;
  max-width: 650px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.button {
  align-items: center;
  border: 1px solid transparent;
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 800;
  gap: 10px;
  justify-content: center;
  min-height: 54px;
  padding: 0 24px;
  text-transform: uppercase;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.button:hover {
  box-shadow: 0 10px 24px rgba(20, 19, 17, 0.14);
  transform: translateY(-2px);
}

.button-gold {
  background: var(--gold);
  color: var(--black);
}

.button-gold:hover {
  background: var(--gold-light);
}

.button-ghost {
  border-color: rgba(255, 255, 255, 0.48);
  color: var(--white);
}

.button-ghost:hover {
  background: var(--white);
  color: var(--black);
}

.button.cut-nav-link {
  display: grid;
}

.button.cut-nav-link .cut-nav-label,
.button.cut-nav-link .cut-nav-fragment {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.button-dark {
  background: var(--black);
  color: var(--white);
}

.button-light {
  background: var(--white);
  color: var(--black);
}

.button-light:hover,
.button-light:focus-visible {
  background: var(--gold-light);
}

.scroll-cue {
  align-items: center;
  bottom: 34px;
  color: var(--white);
  display: flex;
  font-size: 0.72rem;
  font-weight: 800;
  gap: 9px;
  position: absolute;
  right: 42px;
  text-transform: uppercase;
  z-index: 2;
}

.intro-section {
  background: var(--paper);
  padding: 112px 0 120px;
}

.intro-grid {
  align-items: center;
  display: grid;
  gap: 80px;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.intro-copy h2,
.section-heading h2,
.salon-heading h2,
.practical-heading h2,
.contact-title h2,
.team-page-intro h2,
.services-page-intro h2,
.brands-section h2 {
  font-size: 4.25rem;
  line-height: 1;
  margin-top: 18px;
}

.intro-copy .lead {
  color: #4b4945;
  font-size: 1.08rem;
  line-height: 1.8;
  margin-top: 30px;
  max-width: 610px;
}

.signature-line {
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 34px;
  padding-top: 22px;
}

.signature-line span {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.intro-team {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

.intro-team img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

.ifp-route-transition {
  align-items: center;
  background: var(--paper);
  display: flex;
  inset: 0;
  justify-content: center;
  pointer-events: none;
  position: fixed;
  transform: translateY(100%);
  z-index: 18000;
}

.ifp-route-transition span {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 7vw, 6rem);
}

.ifp-route-transition.is-active {
  animation: ifp-route-curtain 1100ms cubic-bezier(0.72, 0, 0.18, 1) both;
}

@keyframes ifp-route-curtain {
  0% { transform: translateY(100%); }
  34%, 70% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

[data-preview-view] main:focus {
  outline: none;
}

html.ifp-instant-scroll {
  scroll-behavior: auto !important;
}

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

.intro-team figcaption {
  align-items: baseline;
  background: var(--black);
  color: var(--white);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  min-width: 0;
  padding: 18px 22px;
  position: static;
}

.intro-team figcaption strong {
  color: var(--gold-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  font-weight: 400;
}

.intro-team figcaption span {
  color: #c9c5bd;
  font-size: 0.82rem;
}

.home-services {
  background: var(--white);
  color: var(--ink);
  padding: 116px 0;
}

.section-heading {
  align-items: end;
  display: grid;
  gap: 70px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.48fr);
  margin-bottom: 64px;
}

.section-heading > p,
.salon-heading > p,
.team-page-intro > p,
.services-page-intro > p {
  color: #68645d;
  font-size: 1rem;
  line-height: 1.75;
}

.section-heading.inverse > p {
  color: #68645d;
}

.service-preview {
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-preview article {
  border-right: 1px solid var(--line);
  min-height: 310px;
  padding: 34px;
}

.service-preview article:last-child {
  border-right: 0;
}

.service-preview article > span,
.service-group-heading > span,
.value-lines span {
  color: var(--gold-text);
  font-size: 0.75rem;
  font-weight: 800;
}

.service-preview h3 {
  font-size: 2.4rem;
  margin-top: 65px;
}

.service-preview p {
  color: #68645d;
  line-height: 1.7;
  margin-top: 20px;
}

.plant-color-feature {
  align-items: center;
  background: var(--soft);
  border-left: 4px solid var(--gold);
  color: var(--ink);
  display: grid;
  gap: 34px;
  grid-template-columns: minmax(220px, 0.65fr) minmax(320px, 1fr) auto;
  margin-top: 42px;
  padding: 34px 38px;
}

.plant-color-feature > * {
  min-width: 0;
}

.plant-color-feature .eyebrow {
  color: var(--gold-text);
}

.plant-color-feature h3 {
  font-size: 2.35rem;
  margin-top: 7px;
}

.plant-color-feature > p {
  line-height: 1.65;
}

.text-link {
  align-items: center;
  border-bottom: 1px solid currentColor;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 800;
  gap: 10px;
  padding: 8px 0;
  text-transform: uppercase;
}

.text-link:hover,
.text-link:focus-visible {
  background: var(--gold-light);
  color: var(--black);
  padding-left: 12px;
  padding-right: 12px;
}

.text-link.cut-nav-link {
  display: inline-grid;
}

.text-link.cut-nav-link .cut-nav-label,
.text-link.cut-nav-link .cut-nav-fragment {
  align-items: center;
  display: flex;
  gap: 10px;
}

.text-link-light {
  color: var(--white);
}

.plant-color-feature .text-link {
  color: var(--black);
  white-space: nowrap;
}

.plant-color-feature .text-link {
  border: 1px solid var(--gold);
  padding: 13px 18px;
  transition: background 180ms ease, color 180ms ease;
}

.plant-color-feature .text-link:hover,
.plant-color-feature .text-link:focus-visible {
  background: var(--gold);
  color: var(--black);
  padding-left: 18px;
  padding-right: 18px;
}

.team-preview-section {
  background: var(--paper);
  padding: 118px 0 125px;
}

.team-preview-heading {
  margin-bottom: 54px;
  max-width: none;
}

.team-preview-heading h2 {
  font-size: 4.25rem;
  line-height: 1;
  margin-top: 18px;
  white-space: nowrap;
}

.team-teaser {
  background: #efede8;
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  color: var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(350px, 0.58fr);
  min-height: 540px;
  overflow: hidden;
  position: relative;
}

.team-teaser-portraits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
  position: relative;
}

.team-teaser-person {
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.team-teaser-person img {
  height: 125%;
  left: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  transform: scale(1.015);
  transition: filter 400ms ease;
  width: 100%;
}

.team-teaser-person-1 img {
  top: -3.5%;
}

.team-teaser-person-2 img {
  filter: contrast(0.98) saturate(0.94);
  top: -8.5%;
}

.team-teaser-person-2 figcaption {
  filter: blur(0.9px);
  opacity: 0.75;
}

.team-teaser-person-3 img {
  filter: blur(0.7px) brightness(0.92) saturate(0.86);
}

.team-teaser-person-3 figcaption {
  filter: blur(1.7px);
  opacity: 0.58;
}

.team-teaser-person-4 img {
  filter: blur(1.8px) brightness(0.78) saturate(0.7);
  top: -7.5%;
}

.team-teaser-person-4 figcaption {
  filter: blur(2.6px);
  opacity: 0.42;
}

.team-teaser-person::after {
  background: linear-gradient(90deg, transparent 55%, rgba(239, 237, 232, 0.13));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.team-teaser-person figcaption {
  background: rgba(255, 255, 255, 0.9);
  bottom: 18px;
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 800;
  left: 14px;
  padding: 8px 10px;
  position: absolute;
  text-transform: uppercase;
  z-index: 2;
}

.team-teaser-copy {
  align-content: center;
  border-left: 1px solid var(--line);
  color: var(--ink);
  display: grid;
  min-width: 0;
  padding: 58px 46px;
  transition:
    background 220ms ease,
    box-shadow 220ms ease,
    outline-color 220ms ease,
    transform 220ms ease;
}

.team-teaser-copy > p {
  color: var(--gold-deep);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.team-teaser-copy h3 {
  font-size: 2rem;
  line-height: 1.02;
  margin-top: 0;
}

.team-teaser-link {
  align-items: center;
  border-top: 1px solid var(--ink);
  display: flex;
  font-size: 0.78rem;
  font-weight: 800;
  gap: 10px;
  justify-content: space-between;
  margin-top: 46px;
  padding-top: 18px;
  text-transform: uppercase;
}

.team-teaser:has(.team-teaser-portraits:hover) .team-teaser-copy {
  animation: team-teaser-invite 1.1s ease-in-out infinite;
  background: rgba(255, 255, 255, 0.56);
  outline: 1px solid rgba(160, 108, 31, 0.34);
  outline-offset: -1px;
}

@keyframes team-teaser-invite {
  0%, 100% {
    box-shadow: 0 7px 16px rgba(20, 19, 17, 0.08);
    transform: translate(-2px, -2px);
  }

  50% {
    box-shadow: 0 18px 32px rgba(160, 108, 31, 0.2);
    transform: translate(-5px, -5px);
  }
}

.team-teaser-copy:hover,
.team-teaser-copy:focus-visible {
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 34px rgba(20, 19, 17, 0.13);
  outline: 1px solid rgba(160, 108, 31, 0.52);
  outline-offset: -1px;
  transform: translate(-7px, -7px);
}

.team-teaser:has(.team-teaser-portraits:hover) .team-teaser-link svg {
  transform: translateX(3px);
}

.team-teaser-copy:hover .team-teaser-link svg,
.team-teaser-copy:focus-visible .team-teaser-link svg {
  transform: translateX(8px);
}

.team-teaser-link svg {
  transition: transform 180ms ease;
}

.portrait-frame {
  background: #e7e3dc;
  overflow: hidden;
  position: relative;
}

.team-member img {
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  width: 100%;
}

body:not(.has-page-progress) .scroll-progress {
  display: none;
}

.member-copy {
  border-top: 1px solid var(--ink);
  margin-top: 15px;
  padding-top: 17px;
}

.member-copy p {
  color: var(--gold-deep);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.4;
  text-transform: uppercase;
}

.member-copy h3 {
  font-size: 2rem;
  margin-top: 8px;
}

.member-copy span {
  color: #68645d;
  display: block;
  font-size: 0.87rem;
  line-height: 1.55;
  margin-top: 8px;
}

.section-action {
  margin-top: 44px;
}

.salon-section {
  background: var(--white);
  padding: 116px 0 122px;
}

.salon-heading {
  align-items: end;
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.55fr);
  margin-bottom: 58px;
}

.salon-heading h2 {
  grid-column: 1;
}

.salon-heading h2 {
  margin-top: 0;
}

.salon-heading > p {
  grid-column: 2;
}

.salon-gallery {
  display: grid;
  gap: 18px;
  grid-template-columns: 1.2fr 0.8fr;
  grid-template-rows: 420px 290px;
}

.salon-gallery figure {
  height: 100%;
  overflow: hidden;
}

.salon-gallery img {
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
  width: 100%;
}

.salon-gallery figure:hover img {
  transform: scale(1.02);
}

.salon-gallery .gallery-wide {
  grid-column: 1;
  grid-row: 1;
}

.salon-gallery .gallery-tall {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.salon-gallery figure:nth-child(3),
.salon-gallery figure:nth-child(4) {
  grid-row: 2;
}

.salon-gallery figure:nth-child(3) {
  grid-column: 1;
  width: calc(58% - 9px);
}

.salon-gallery figure:nth-child(4) {
  grid-column: 1;
  justify-self: end;
  width: calc(42% - 9px);
}

.practical-section {
  background: var(--paper);
  color: var(--ink);
  padding: 100px 0;
}

.practical-heading {
  align-items: start;
  display: flex;
  margin-bottom: 46px;
}

.practical-heading .eyebrow {
  color: var(--gold-deep);
}

.practical-heading h2 {
  font-size: 3.55rem;
  line-height: 1.03;
}

.practical-list {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.practical-list li {
  align-items: center;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  display: flex;
  font-size: 0.88rem;
  font-weight: 800;
  gap: 14px;
  min-height: 82px;
  padding: 18px 22px;
  text-transform: uppercase;
}

.practical-list li:nth-child(3n) {
  border-right: 0;
}

.practical-list li:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.access-note {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: auto minmax(0, 1fr);
  margin-top: 38px;
  background: var(--white);
  border-left: 3px solid var(--gold);
  max-width: 820px;
  padding: 24px;
}

.access-note h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 800;
}

.access-note p,
.language-note {
  line-height: 1.7;
}

.access-note p {
  margin-top: 6px;
}

.language-note {
  margin-top: 28px;
}

.brands-band {
  align-items: center;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 70px;
  justify-content: center;
  min-height: 150px;
  padding: 32px 42px;
}

.brands-band-inline {
  border: 1px solid var(--line);
  border-left: 0;
  border-right: 0;
  margin-top: 42px;
}

.brands-band > p {
  color: #736f68;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.brands-band > div {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.brand-logo-row a {
  align-items: center;
  border: 1px solid transparent;
  display: flex;
  gap: 8px;
  min-height: 58px;
  padding: 8px 12px;
  transition:
    border-color 180ms ease,
    background 180ms ease;
}

.brand-logo-row a:hover,
.brand-logo-row a:focus-visible {
  background: var(--paper);
  border-color: var(--line);
}

.brand-logo-row img {
  filter: grayscale(1);
  height: 38px;
  object-fit: contain;
  width: 118px;
}

.brand-logo-row a:nth-child(2) img,
.brand-logo-row a:nth-child(4) img {
  height: 30px;
}

.booking-band {
  align-items: center;
  background: var(--charcoal);
  color: var(--white);
  display: flex;
  gap: 50px;
  justify-content: space-between;
  min-height: 280px;
  padding: 60px max(42px, calc((100vw - 1236px) / 2));
}

.booking-band p {
  color: var(--gold-light);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.booking-band h2 {
  color: var(--white) !important;
  font-size: 3rem;
  line-height: 1.05;
  margin-top: 13px;
  max-width: 800px;
}

.booking-band .button.cut-nav-link {
  align-self: center;
  display: grid;
  flex: 0 0 auto;
  min-height: 52px;
  padding: 0 20px;
  width: max-content;
}

.booking-band .button.cut-nav-link .cut-nav-label,
.booking-band .button.cut-nav-link .cut-nav-fragment {
  align-items: center;
  display: flex;
  gap: 9px;
  justify-content: center;
}

.contact-section {
  background: var(--white);
  color: var(--ink);
  padding: 110px 0 120px;
}

.contact-title > p:last-child {
  color: #625e57;
  margin-top: 18px;
}

.contact-grid {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 58px;
}

.contact-block {
  border-right: 1px solid var(--line);
  min-height: 300px;
  padding: 34px 36px;
}

.contact-block:last-child {
  border-right: 0;
}

.contact-block > svg {
  color: var(--gold-light);
}

.contact-block h3 {
  font-size: 2rem;
  margin-top: 42px;
}

.contact-block p,
.contact-block a:not(.text-link) {
  color: #68645d;
  display: block;
  line-height: 1.7;
  margin-top: 18px;
}

.contact-block .contact-main-link {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.65rem;
}

.contact-block .text-link {
  margin-top: 22px;
}

.contact-section .text-link-light {
  color: var(--ink);
}

.hours dl {
  margin-top: 18px;
}

.hours dl div {
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 7px 0;
}

.hours dt,
.hours dd {
  color: #68645d;
  font-size: 0.88rem;
}

footer {
  align-items: center;
  background: #050505;
  border-top: 1px solid rgba(184, 137, 57, 0.35);
  color: #aaa59b;
  display: grid;
  gap: 28px;
  grid-template-columns: 220px 1fr auto auto;
  min-height: 150px;
  padding: 35px 42px;
}

.footer-brand img {
  width: 180px;
}

.notfound-page {
  align-items: center;
  background: var(--soft);
  display: flex;
  min-height: calc(100svh - 90px);
  padding: 96px 0;
}

.notfound-inner {
  max-width: 820px;
}

.notfound-inner h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 400;
  line-height: 0.95;
  margin: 18px 0 28px;
}

.notfound-inner > p:not(.eyebrow) {
  color: #5f5a52;
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 640px;
}

.notfound-inner .button {
  margin-top: 30px;
}

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-contact a {
  align-items: center;
  display: inline-flex;
  font-size: 0.78rem;
  gap: 7px;
}

footer > p,
footer nav a {
  font-size: 0.72rem;
}

footer nav {
  display: flex;
  gap: 18px;
}

.mobile-booking,
.mobile-booking.cut-nav-link {
  display: none;
}

/* Inner page heroes */
.page-hero {
  align-items: flex-end;
  background: var(--black);
  color: var(--white);
  display: flex;
  height: 70svh;
  max-height: 760px;
  min-height: 560px;
  overflow: hidden;
  position: relative;
}

.services-page-hero > img {
  object-position: center 43%;
}

.page-hero-copy {
  margin: 0 auto;
  max-width: 1320px;
  padding: 0 42px 78px;
  position: relative;
  width: 100%;
  z-index: 2;
}

.page-hero-copy h1 {
  color: var(--white) !important;
  font-size: 5.3rem;
  line-height: 0.96;
  margin-top: 20px;
  max-width: 900px;
}

.page-hero-copy > p:last-child {
  font-size: 1.08rem;
  line-height: 1.7;
  margin-top: 24px;
  max-width: 650px;
}

/* Team page */
.team-editorial-hero {
  background: var(--paper);
  padding: 95px 0 0;
}

.team-editorial-copy {
  display: grid;
  gap: 30px 70px;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 0.42fr);
  margin-bottom: 58px;
}

.team-editorial-copy .eyebrow,
.team-editorial-copy h1 {
  grid-column: 1;
}

.team-editorial-copy .eyebrow {
  color: var(--gold-deep);
}

.team-editorial-copy h1 {
  font-size: 5.1rem;
  line-height: 0.97;
  max-width: 880px;
}

.team-editorial-copy > p:last-child {
  align-self: end;
  color: #68645d;
  grid-column: 2;
  line-height: 1.75;
}

.team-editorial-image {
  margin: 0 auto;
  max-width: 1320px;
  padding: 0 42px;
}

.team-editorial-image img {
  height: auto;
  width: 100%;
}

.team-page-section {
  background: var(--paper);
  padding: 110px 0 125px;
}

.team-page-intro {
  display: grid;
  gap: 50px;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.45fr);
  margin-bottom: 70px;
}

.team-page-intro .eyebrow,
.team-page-intro h2 {
  grid-column: 1;
}

.team-page-intro > p {
  grid-column: 2;
  grid-row: 2;
}

.team-grid {
  display: grid;
  gap: 46px 28px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.team-booking-feature {
  background: var(--charcoal);
  color: var(--white);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
  min-height: 520px;
}

.team-booking-feature figure {
  min-height: 520px;
  overflow: hidden;
}

.team-booking-feature img {
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  width: 100%;
}

.team-booking-copy {
  align-content: center;
  display: grid;
  justify-items: start;
  padding: 70px max(42px, calc((100vw - 1236px) / 2)) 70px 70px;
}

.team-booking-copy p {
  color: var(--gold-light);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.team-booking-copy h2 {
  color: var(--white) !important;
  font-size: 3.4rem;
  line-height: 1;
  margin-top: 18px;
  max-width: 600px;
}

.team-booking-copy .button {
  margin-top: 34px;
}

.team-member .portrait-frame {
  aspect-ratio: 4 / 5;
}

.team-lead {
  background: transparent;
  display: block;
  grid-column: auto;
}

.team-lead .portrait-frame {
  aspect-ratio: 4 / 5;
  background: #e7e3dc;
}

.team-lead .portrait-frame img {
  object-fit: cover;
  object-position: center 20%;
}

.team-lead .member-copy {
  border-top: 2px solid var(--gold);
  display: block;
  margin-top: 15px;
  padding: 17px 0 0;
}

.team-lead .member-copy p {
  color: var(--gold-deep);
}

.team-lead .member-copy h3 {
  color: var(--ink);
  font-size: 2rem;
}

.team-lead .member-copy span {
  color: #68645d;
}

.team-values {
  background: var(--black);
  color: var(--white);
  padding: 105px 0;
}

.team-values .section-shell {
  display: grid;
  gap: 80px;
  grid-template-columns: 0.65fr 1.35fr;
}

.team-values h2 {
  font-size: 3.8rem;
  line-height: 1;
  margin-top: 18px;
}

.value-lines {
  border-top: 1px solid var(--line-light);
}

.value-lines p {
  align-items: start;
  border-bottom: 1px solid var(--line-light);
  color: #d1cdc5;
  display: grid;
  gap: 22px;
  grid-template-columns: 38px 1fr;
  line-height: 1.65;
  padding: 28px 0;
}

/* Services page */
.services-index {
  background: var(--paper);
  padding: 110px 0 125px;
}

.services-page-intro {
  align-items: end;
  display: grid;
  gap: 70px;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 0.48fr);
  margin-bottom: 78px;
}

.services-page-intro h2,
.brands-section h2 {
  margin-top: 0;
}

.services-intro {
  line-height: 1.75;
}

.service-groups {
  border-top: 1px solid var(--ink);
}

.service-group {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 70px;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.7fr);
  padding: 52px 0;
}

.service-group-heading {
  display: grid;
  gap: 22px;
  grid-template-columns: 40px 1fr;
}

.service-group h2 {
  font-size: 3rem;
}

.service-group-heading p {
  color: #68645d;
  line-height: 1.65;
  margin-top: 10px;
}

.service-group ul {
  align-self: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-group li {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  line-height: 1.5;
  min-height: 44px;
  padding: 9px 0;
}

.service-group li svg {
  color: var(--gold-deep);
  flex: 0 0 auto;
}

.plant-feature-page {
  background: var(--black);
  color: var(--white);
}

.plant-feature-grid {
  align-items: stretch;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  max-width: none;
  padding: 0;
}

.plant-feature-grid figure {
  min-height: 620px;
}

.plant-collage {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.38fr) minmax(0, 0.62fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 0.72fr);
  padding: 18px;
}

.plant-collage img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.plant-collage-main {
  grid-row: 1 / span 2;
}

.plant-feature-grid > * {
  min-width: 0;
}

.plant-feature-grid figure img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.plant-feature-grid > div {
  align-self: center;
  padding: 70px;
}

.plant-feature-grid > div > svg {
  color: var(--gold-light);
  margin-bottom: 28px;
}

.plant-feature-grid h2,
.event-note h2 {
  font-size: 4rem;
  margin-top: 15px;
}

.plant-feature-grid h2 {
  color: var(--white) !important;
}

.plant-feature-grid > div > p:not(.eyebrow) {
  color: #b8b3aa;
  line-height: 1.8;
  margin: 28px 0;
}

.event-note {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  color: var(--ink);
  padding: 112px 0;
}

.event-note-grid {
  align-items: center;
  display: grid;
  gap: 80px;
  grid-template-columns: 0.8fr 1.2fr;
}

.event-note-grid > div:first-child svg {
  color: var(--gold-deep);
  margin-bottom: 20px;
}

.event-note-grid > div:first-child .eyebrow {
  margin-bottom: 16px;
}

.event-note-content {
  background: var(--white);
  border-left: 4px solid var(--gold);
  padding: 34px 42px 36px;
}

.event-note-content > p:first-child {
  font-size: 1.08rem;
  line-height: 1.8;
  max-width: 720px;
}

.event-note-highlights {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 28px;
}

.event-note-highlights span {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  color: var(--gold-deep);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 15px 14px;
  text-transform: uppercase;
}

.event-note-highlights span + span {
  border-left: 1px solid var(--line);
}

.event-note-content .text-link {
  margin-top: 28px;
}

.event-note .price-note {
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  font-weight: 800;
  margin-top: 28px;
  padding-top: 22px;
  text-transform: uppercase;
}

.brands-section {
  background: var(--paper);
  padding: 88px 0;
  text-align: center;
}

.brand-list {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 52px;
}

.brand-list a {
  align-items: center;
  border-right: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: center;
  min-height: 115px;
  padding: 28px 16px;
  transition: background 180ms ease;
}

.brand-list a:hover,
.brand-list a:focus-visible {
  background: var(--white);
}

.brand-list img {
  filter: grayscale(1);
  height: 48px;
  max-width: 160px;
  object-fit: contain;
  width: 100%;
}

.brand-list a:nth-child(2) img,
.brand-list a:nth-child(4) img {
  height: 35px;
}

.brand-list a:last-child {
  border-right: 0;
}

.back-link-wrap {
  background: var(--paper);
  padding: 38px 42px 55px;
  text-align: center;
}

.back-link-wrap .cut-nav-link {
  display: grid;
  margin: 0 auto;
  width: max-content;
}

.back-link-wrap .cut-nav-label,
.back-link-wrap .cut-nav-fragment {
  align-items: center;
  display: flex;
  gap: 10px;
}

/* Reveal and cursor */
[data-reveal] {
  /* Weg von 22px/650ms: waehrend des Scrollens bewegten sich die
     Inhalte zusaetzlich in dieselbe Richtung, was sich addierte und
     die Seite schneller wirken liess als die Eingabe war. */
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 380ms ease,
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal="image"] {
  transform: translateY(16px);
}

[data-reveal="hero"] {
  transform: translateY(16px);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.scissor-cursor {
  color: var(--gold);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  height: 40px;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transition:
    color 140ms ease,
    opacity 140ms ease;
  width: 40px;
  z-index: 20000;
}

.scissor-cursor.is-visible {
  opacity: 1;
}

.scissor-cursor.is-over-action {
  color: var(--gold-light);
}

.hair-scissor-icon {
  display: block;
  overflow: visible;
}

.scissor-blade {
  fill: currentColor;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 0.8;
}

.scissor-blade-b {
  fill: color-mix(in srgb, currentColor 72%, var(--ink));
}

.scissor-handle,
.scissor-ring {
  stroke: currentColor;
  stroke-width: 2.25;
}

.scissor-pivot {
  fill: var(--black);
  stroke: currentColor;
  stroke-width: 1.7;
}

.scissor-pivot-dot {
  fill: currentColor;
}

.scissor-half {
  transform-box: view-box;
  transform-origin: 16px 16px;
}

.scissor-cursor.is-snipping .scissor-half-a {
  animation: snip-upper 190ms ease-out;
}

.scissor-cursor.is-snipping .scissor-half-b {
  animation: snip-lower 190ms ease-out;
}

@keyframes snip-upper {
  0%,
  100% {
    transform: rotate(0);
  }
  42% {
    transform: rotate(12deg);
  }
}

@keyframes snip-lower {
  0%,
  100% {
    transform: rotate(0);
  }
  42% {
    transform: rotate(-12deg);
  }
}

@media (hover: hover) and (pointer: fine) {
  body.has-scissor-cursor,
  body.has-scissor-cursor a,
  body.has-scissor-cursor button,
  body.has-scissor-cursor input,
  body.has-scissor-cursor summary,
  body.has-scissor-cursor video {
    cursor: none;
  }
}

@media (max-width: 1120px) {
  .site-header {
    grid-template-columns: 190px 1fr auto;
    padding: 0 28px;
  }

  .desktop-nav {
    gap: 25px;
  }

  .section-shell {
    padding-left: 30px;
    padding-right: 30px;
  }

  .hero-content,
  .page-hero-copy {
    padding-left: 30px;
    padding-right: 30px;
  }

  .hero-content h1 {
    font-size: 5.3rem;
  }

  .intro-copy h2,
  .section-heading h2,
  .team-preview-heading h2,
  .salon-heading h2,
  .practical-heading h2,
  .contact-title h2,
  .salon-film-heading h2,
  .team-page-intro h2,
  .services-page-intro h2,
  .brands-section h2 {
    font-size: 3.55rem;
  }

  .team-teaser {
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.55fr);
    min-height: 490px;
  }

  .team-teaser-copy {
    padding: 42px 34px;
  }

  .team-teaser-copy h3 {
    font-size: 1.9rem;
  }

  .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .team-booking-copy {
    padding-left: 48px;
  }

  .team-booking-copy h2 {
    font-size: 3rem;
  }

  .team-editorial-copy h1 {
    font-size: 4.35rem;
  }

  .plant-feature-grid > div {
    padding: 48px;
  }

  footer {
    grid-template-columns: 190px 1fr auto;
  }

  footer > p {
    grid-column: 2;
    grid-row: 2;
  }

  footer nav {
    grid-column: 3;
    grid-row: 2;
  }
}

@media (max-width: 860px) {
  .team-preview-heading h2 {
    white-space: normal;
  }

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

  .brand,
  .brand img {
    width: 158px;
  }

  .desktop-nav,
  .site-header > .header-booking {
    display: none;
  }

  .mobile-menu {
    display: block;
    justify-self: end;
    position: relative;
  }

  .mobile-menu summary {
    align-items: center;
    border: 1px solid var(--line);
    display: flex;
    height: 44px;
    justify-content: center;
    list-style: none;
    width: 44px;
  }

  .mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .mobile-menu nav {
    background: var(--black);
    border: 1px solid rgba(184, 137, 57, 0.45);
    color: var(--white);
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 10px;
    position: absolute;
    right: 0;
    top: 54px;
    width: min(280px, calc(100vw - 36px));
    z-index: 30;
  }

  .mobile-menu nav a {
    border-bottom: 1px solid var(--line-light);
    font-size: 0.78rem;
    font-weight: 800;
    padding: 14px 12px;
    text-transform: uppercase;
  }

  .mobile-menu nav a:last-child {
    background: var(--gold);
    border-bottom: 0;
    color: var(--black);
    margin-top: 8px;
  }

  .hero {
    height: 77svh;
    min-height: 560px;
  }

  .hero-content {
    padding-bottom: 72px;
  }

  .hero-content h1 {
    font-size: 4.4rem;
  }

  .scroll-cue {
    display: none;
  }

  .intro-grid,
  .section-heading,
  .salon-heading,
  .salon-film-heading,
  .team-page-intro,
  .team-editorial-copy,
  .services-page-intro,
  .service-group,
  .event-note-grid,
  .team-values .section-shell {
    grid-template-columns: 1fr;
  }

  .intro-grid,
  .section-heading,
  .salon-heading,
  .salon-film-heading,
  .team-page-intro,
  .team-editorial-copy,
  .services-page-intro {
    gap: 38px;
  }

  .event-note-content {
    border-left: 0;
    border-top: 2px solid var(--gold);
    padding: 28px 0 0;
  }

  .salon-heading .eyebrow,
  .salon-heading h2,
  .salon-heading > p,
  .team-page-intro .eyebrow,
  .team-page-intro h2,
  .team-page-intro > p,
  .team-editorial-copy .eyebrow,
  .team-editorial-copy h1,
  .team-editorial-copy > p:last-child {
    grid-column: 1;
    grid-row: auto;
  }

  .service-preview {
    grid-template-columns: 1fr;
  }

  .service-preview article {
    border-bottom: 1px solid var(--line);
    border-right: 0;
    min-height: 0;
  }

  .service-preview h3 {
    margin-top: 28px;
  }

  .plant-color-feature {
    grid-template-columns: 1fr;
  }

  .team-teaser {
    grid-template-columns: 1fr;
  }

  .team-teaser-portraits {
    height: 500px;
  }

  .team-teaser-copy {
    border-left: 0;
    border-top: 1px solid var(--line);
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .team-teaser-copy > p,
  .team-teaser-copy h3 {
    grid-column: 1;
  }

  .team-teaser-link {
    align-self: end;
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0 0 0 34px;
    min-width: 190px;
  }

  .practical-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .practical-list li:nth-child(3n) {
    border-right: 1px solid var(--line);
  }

  .practical-list li:nth-child(2n) {
    border-right: 0;
  }

  .practical-list li:nth-last-child(-n + 3) {
    border-bottom: 1px solid var(--line);
  }

  .practical-list li:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .plant-feature-grid {
    grid-template-columns: 1fr;
  }

  .plant-feature-grid figure {
    min-height: 470px;
  }

  .booking-band {
    align-items: start;
    flex-direction: column;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-block {
    border-bottom: 1px solid var(--line);
    border-right: 0;
    min-height: 0;
  }

  .contact-block:last-child {
    border-bottom: 0;
  }

  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-booking-feature {
    grid-template-columns: 1fr;
  }

  .team-booking-feature figure {
    min-height: 430px;
  }

  .team-booking-copy {
    padding: 54px 30px 62px;
  }

  .team-lead {
    grid-column: auto;
  }

  .brand-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-list span:nth-child(2) {
    border-right: 0;
  }

  .brand-list span:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 600px) {
  .legal-hero h1 {
    font-size: 2.15rem;
    hyphens: none;
    line-height: 1;
    overflow-wrap: normal;
  }

  body:has(.legal-page) .mobile-booking,
  body.is-legal-route .mobile-booking {
    display: none;
  }

  body:has(.legal-page) footer,
  body.is-legal-route footer {
    padding-bottom: 45px;
  }

  .legal-layout,
  .legal-layout section,
  .legal-layout h2,
  .legal-layout p,
  .legal-layout address,
  .legal-layout a {
    min-width: 0;
  }

  .legal-layout h2,
  .legal-layout p,
  .legal-layout address,
  .legal-layout a {
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  .section-shell,
  .hero-content,
  .page-hero-copy {
    padding-left: 20px;
    padding-right: 20px;
  }

  .site-header {
    padding: 0 20px;
  }

  .hero {
    height: min(680px, calc(100svh - 76px));
    min-height: 520px;
  }

  .hero-image {
    object-position: 62% center;
  }

  .hero-shade,
  .page-hero-shade {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.28)),
      linear-gradient(0deg, rgba(0, 0, 0, 0.72), transparent 60%);
  }

  .hero-content {
    padding-bottom: 48px;
  }

  .hero-content h1 {
    font-size: 2.8rem;
    line-height: 0.93;
    margin-top: 17px;
  }

  .hero-copy {
    font-size: 1rem;
    line-height: 1.55;
    margin-top: 22px;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    margin-top: 24px;
  }

  .button {
    width: 100%;
  }

  .intro-section,
  .home-services,
  .team-preview-section,
  .salon-section,
  .practical-section,
  .salon-film-section,
  .contact-section,
  .team-page-section,
  .services-index,
  .brands-section {
    padding-bottom: 76px;
    padding-top: 76px;
  }

  .intro-grid {
    gap: 52px;
  }

  .intro-copy h2,
  .section-heading h2,
  .team-preview-heading h2,
  .salon-heading h2,
  .practical-heading h2,
  .contact-title h2,
  .salon-film-heading h2,
  .team-page-intro h2,
  .services-page-intro h2,
  .brands-section h2 {
    font-size: 2.65rem;
  }

  .intro-team figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .service-preview article {
    padding: 28px 0;
  }

  .service-preview h3 {
    font-size: 2.05rem;
  }

  .plant-color-feature {
    margin-left: -20px;
    margin-right: -20px;
    padding: 30px 20px;
  }

  .team-grid {
    gap: 34px 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-booking-feature figure {
    aspect-ratio: 3 / 2;
    min-height: 0;
  }

  .team-booking-feature img {
    object-position: center center;
  }

  .team-booking-copy {
    padding: 46px 20px 58px;
  }

  .team-booking-copy h2 {
    font-size: 2.35rem;
  }

  .team-preview-heading {
    margin-bottom: 34px;
  }

  .team-teaser-portraits {
    height: 390px;
  }

  .team-teaser-person figcaption {
    bottom: 10px;
    font-size: 0.6rem;
    left: 7px;
    padding: 6px 7px;
  }

  .team-teaser-copy {
    display: block;
    padding: 34px 24px 38px;
  }

  .team-teaser-copy h3 {
    font-size: 2.15rem;
  }

  .team-teaser-link {
    margin: 30px 0 0;
    min-width: 0;
  }

  .member-copy h3 {
    font-size: 1.6rem;
  }

  .member-copy p {
    min-height: 2.8em;
  }

  .member-copy span {
    font-size: 0.79rem;
  }

  .salon-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 260px 220px;
  }

  .salon-gallery .gallery-wide {
    grid-column: 1 / span 2;
    grid-row: 1;
  }

  .salon-gallery .gallery-tall {
    grid-column: 1;
    grid-row: 2;
  }

  .salon-gallery figure:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
  }

  .salon-gallery figure:nth-child(4) {
    display: none;
  }

  .practical-heading {
    align-items: start;
    flex-direction: column;
    gap: 12px;
  }

  .practical-list {
    grid-template-columns: 1fr;
  }

  .practical-list li,
  .practical-list li:nth-child(3n),
  .practical-list li:nth-child(2n),
  .practical-list li:nth-last-child(-n + 3),
  .practical-list li:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--line);
    border-right: 0;
  }

  .practical-list li:last-child {
    border-bottom: 0;
  }

  .brands-band {
    align-items: flex-start;
    flex-direction: column;
    gap: 25px;
    padding: 38px 20px;
  }

  .brands-band > div {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .brand-logo-row a {
    justify-content: center;
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
  }

  .brand-logo-row img {
    max-width: calc(100% - 22px);
  }

  .plant-feature-grid > div {
    padding: 64px 20px;
  }

  .plant-collage {
    min-height: 470px;
    padding: 12px;
  }

  .event-note-content {
    padding: 28px 20px 30px;
  }

  .event-note-highlights {
    grid-template-columns: 1fr;
  }

  .event-note-highlights span + span {
    border-left: 0;
    border-top: 0;
  }

  .salon-film-heading {
    gap: 24px;
    margin-bottom: 34px;
  }

  .salon-video-controls {
    bottom: 12px;
    gap: 6px;
    right: 12px;
  }

  .salon-video-timeline {
    backdrop-filter: blur(8px);
    background: rgba(17, 17, 17, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.24);
    bottom: 12px;
    gap: 6px;
    height: 44px;
    left: 12px;
    padding: 0 9px;
    right: 108px;
  }

  .salon-video-timeline span {
    backdrop-filter: none;
    background: transparent;
    border: 0;
    min-width: 39px;
    padding: 0;
  }

  .salon-volume-control input {
    display: none;
  }

  .salon-video-controls button,
  .salon-volume-control {
    height: 44px;
  }

  .salon-video-controls button {
    width: 44px;
  }

  .salon-video-center-play {
    height: 62px;
    width: 62px;
  }

  .salon-film-section {
    padding-top: 0;
  }

  .booking-band {
    min-height: 0;
    padding: 54px 20px 64px;
  }

  .booking-band h2 {
    font-size: 2.35rem;
  }

  .contact-grid {
    margin-top: 42px;
  }

  .contact-block {
    padding: 30px 0;
  }

  .contact-block h3 {
    margin-top: 26px;
  }

  footer {
    align-items: start;
    gap: 24px;
    grid-template-columns: 1fr;
    padding: 45px 20px 100px;
  }

  footer > p,
  footer nav {
    grid-column: auto;
    grid-row: auto;
  }

  .mobile-booking,
  .mobile-booking.cut-nav-link {
    display: none;
  }

  .page-hero {
    height: 64svh;
    min-height: 520px;
  }

  .services-page-hero > img {
    object-position: center 35%;
  }

  .page-hero-copy {
    padding-bottom: 52px;
  }

  .page-hero-copy h1 {
    font-size: 3.15rem;
  }

  .page-hero-copy > p:last-child {
    font-size: 0.98rem;
  }

  .team-page-intro,
  .services-page-intro {
    margin-bottom: 48px;
  }

  .team-editorial-hero {
    padding-top: 64px;
  }

  .team-editorial-copy {
    margin-bottom: 38px;
  }

  .team-editorial-copy h1 {
    font-size: 3.05rem;
  }

  .team-editorial-image {
    padding: 0 20px;
  }

  .team-lead {
    display: block;
    grid-column: auto;
  }

  .team-lead .member-copy {
    padding: 17px 0 0;
  }

  .team-values {
    padding: 78px 0;
  }

  .team-values .section-shell {
    gap: 45px;
  }

  .team-values h2 {
    font-size: 2.75rem;
  }

  .service-group {
    gap: 30px;
    padding: 40px 0;
  }

  .service-group h2 {
    font-size: 2.45rem;
  }

  .plant-feature-grid figure {
    min-height: 360px;
  }

  .plant-feature-grid h2 {
    font-size: 2.15rem;
    overflow-wrap: normal;
    word-break: normal;
  }

  .event-note h2 {
    font-size: 2.5rem;
  }

  .plant-color-feature h3 {
    font-size: 1.9rem;
    overflow-wrap: normal;
    word-break: normal;
  }

  .event-note {
    padding: 70px 0;
  }

  .event-note-grid {
    gap: 35px;
  }

  .brand-list a {
    min-height: 95px;
    padding: 22px 10px;
  }

  .brand-list img {
    height: 40px;
    max-width: 128px;
  }

  .back-link-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 340px) {
  .plant-feature-grid h2 {
    font-size: 1.72rem;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .scissor-cursor {
    display: none;
  }
}

.salon-carousel {
  margin-top: 54px;
}

.salon-gallery {
  display: none;
}

.salon-carousel-frame {
  background: #e9e5de;
  height: min(62vh, 620px);
  min-height: 420px;
  overflow: hidden;
  position: relative;
}

.salon-carousel-frame::after {
  background: rgba(20, 20, 18, 0.12);
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 180ms ease;
}

.salon-carousel-frame:hover::after,
.salon-carousel-frame:focus-within::after {
  opacity: 1;
}

.salon-carousel-frame img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.ifp-carousel-runtime {
  display: contents;
}

.ifp-carousel-runtime[hidden],
.salon-carousel-preview[hidden] {
  display: none !important;
}

.salon-carousel-edge {
  background: transparent;
  border: 0;
  cursor: pointer;
  height: 100%;
  position: absolute;
  top: 0;
  width: 22%;
  z-index: 1;
}

.salon-carousel-edge-left {
  left: 0;
}

.salon-carousel-edge-right {
  right: 0;
}

.salon-carousel-edge:hover,
.salon-carousel-edge:focus-visible {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent);
}

.salon-carousel-edge-right:hover,
.salon-carousel-edge-right:focus-visible {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.2), transparent);
}

.salon-carousel-caption {
  align-items: baseline;
  background: linear-gradient(90deg, rgba(20, 20, 18, 0.84), rgba(20, 20, 18, 0));
  bottom: 0;
  color: #fff;
  display: flex;
  gap: 18px;
  left: 0;
  padding: 18px 22px;
  pointer-events: none;
  position: absolute;
  right: 35%;
  z-index: 2;
}

.salon-carousel-caption span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
}

.salon-carousel-caption small {
  color: #d9d5cc;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.salon-carousel-controls {
  align-items: center;
  bottom: 20px;
  display: flex;
  gap: 14px;
  right: 20px;
  position: absolute;
}

.salon-carousel-preview {
  align-items: center;
  background: rgba(20, 20, 18, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.4);
  bottom: 22px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  opacity: 0;
  padding: 13px 16px;
  position: absolute;
  right: 22px;
  text-transform: uppercase;
  transition: background 180ms ease, opacity 180ms ease;
  z-index: 3;
}

.salon-carousel-frame:hover .salon-carousel-preview,
.salon-carousel-frame:focus-within .salon-carousel-preview {
  opacity: 1;
}

.salon-carousel-preview:hover,
.salon-carousel-preview:focus-visible {
  background: var(--gold);
  color: var(--black);
}

.salon-carousel-controls button,
.salon-carousel-dots button {
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(29, 29, 27, 0.2);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
}

.salon-carousel-controls button {
  height: 46px;
  width: 46px;
}

.salon-carousel-controls button:hover,
.salon-carousel-controls button:focus-visible {
  background: var(--gold);
}

.salon-carousel-close {
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(29, 29, 27, 0.2);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  height: 46px;
  justify-content: center;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 46px;
  z-index: 4;
}

.salon-carousel-close:hover,
.salon-carousel-close:focus-visible {
  background: var(--gold);
}

.salon-carousel.is-expanded .salon-carousel-frame {
  background: rgba(20, 20, 18, 0.98);
  height: auto;
  inset: 24px;
  min-height: 0;
  position: fixed;
  z-index: 100;
}

.salon-carousel.is-expanded .salon-carousel-frame img {
  object-fit: contain;
}

body.carousel-is-expanded::after {
  backdrop-filter: blur(12px);
  background: rgba(0, 0, 0, 0.68);
  content: "";
  inset: 0;
  position: fixed;
  z-index: 99;
}

.salon-carousel-controls span {
  background: rgba(29, 29, 27, 0.82);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 14px 12px;
}

.salon-carousel-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
}

.salon-carousel-dots button {
  background: var(--line);
  border: 0;
  height: 3px;
  padding: 0;
  transition: background 180ms ease, width 180ms ease;
  width: 28px;
}

.salon-carousel-dots button.is-active,
.salon-carousel-dots button:hover,
.salon-carousel-dots button:focus-visible {
  background: var(--gold);
  width: 52px;
}

@media (max-width: 700px) {
  .salon-carousel {
    margin-top: 34px;
  }

  .salon-carousel-frame {
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 0;
  }

  .salon-carousel-preview {
    bottom: 12px;
    opacity: 1;
    padding: 11px 13px;
    right: 12px;
  }

  .salon-carousel-controls {
    bottom: 12px;
    right: 12px;
  }

  .salon-carousel-caption {
    padding: 14px 112px 14px 14px;
    right: 0;
  }

  .salon-carousel-caption span {
    font-size: 1.05rem;
  }

  .salon-carousel.is-expanded .salon-carousel-frame {
    aspect-ratio: auto;
    inset: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
    touch-action: pan-y;
  }

  .salon-carousel.is-expanded .salon-carousel-edge,
  .salon-carousel.is-expanded .salon-carousel-caption,
  .salon-carousel.is-expanded .salon-carousel-controls,
  .salon-carousel.is-expanded .salon-carousel-dots {
    display: none;
  }

  .salon-carousel.is-expanded .salon-carousel-dots {
    bottom: max(20px, env(safe-area-inset-bottom));
    left: 18px;
    margin: 0;
    position: fixed;
    right: 18px;
    z-index: 102;
  }

  .salon-carousel-dots button {
    width: 20px;
  }

  .salon-carousel-dots button.is-active,
  .salon-carousel-dots button:hover,
  .salon-carousel-dots button:focus-visible {
    width: 36px;
  }
}

.salon-carousel.is-expanded .salon-carousel-frame img.swipe-in-next {
  animation: carousel-swipe-in-next 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.salon-carousel.is-expanded .salon-carousel-frame img.swipe-in-previous {
  animation: carousel-swipe-in-previous 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes carousel-swipe-in-next {
  from { opacity: 0.35; transform: translate3d(7%, 0, 0); }
}

@keyframes carousel-swipe-in-previous {
  from { opacity: 0.35; transform: translate3d(-7%, 0, 0); }
}

@media (max-width: 600px) {
  .intro-team {
    aspect-ratio: 4 / 5;
  }

  .intro-team img {
    object-position: center 43%;
  }
}

@media (hover: none), (pointer: coarse) {
  .salon-video.is-playing:not(.controls-visible) .salon-video-controls,
  .salon-video.is-playing:not(.controls-visible) .salon-video-timeline {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
  }

  .salon-video.is-playing:not(.controls-visible)::after {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ifp-route-transition.is-active {
    animation: none;
  }
}


/* ============================================================
   Nachtraegliche Korrekturen (v6)
   ============================================================ */

/* 1) Scherencursor: Theme-Stylesheets von WordPress setzen auf
      Buttons cursor:pointer und ueberstimmen die Regel weiter oben.
      Dadurch erschien neben der Schere zusaetzlich die Hand.
      Deshalb hier bewusst !important und auf alle Nachfahren. */
@media (hover: hover) and (pointer: fine) {
  body.has-scissor-cursor,
  body.has-scissor-cursor *,
  body.has-scissor-cursor *::before,
  body.has-scissor-cursor *::after {
    cursor: none !important;
  }
}

/* 2) Galerie direkt bedienbar, ohne vorher aufzuklappen.
      Schliessen-Button und das Pfeil-Duo bleiben der grossen
      Ansicht vorbehalten. */
.salon-carousel:not(.is-expanded) .salon-carousel-close,
.salon-carousel:not(.is-expanded) .salon-carousel-controls {
  display: none !important;
}

/* Randpfeile inline: nur bei echter Maus. Auf dem Handy wuerden
   sie die Wischflaeche zerschneiden - dort zaehlt der Swipe. */
.salon-carousel:not(.is-expanded) .salon-carousel-edge {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .salon-carousel:not(.is-expanded) .salon-carousel-edge {
    display: block;
  }

  .salon-carousel:not(.is-expanded) .salon-carousel-edge::after {
    align-items: center;
    background: rgba(20, 20, 18, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-size: 1.35rem;
    height: 44px;
    justify-content: center;
    line-height: 1;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 180ms ease, background 180ms ease;
    width: 44px;
  }

  .salon-carousel:not(.is-expanded) .salon-carousel-edge-left::after {
    content: "\2039";
    left: 18px;
  }

  .salon-carousel:not(.is-expanded) .salon-carousel-edge-right::after {
    content: "\203A";
    right: 18px;
  }

  .salon-carousel:not(.is-expanded):hover .salon-carousel-edge::after {
    opacity: 1;
  }

  .salon-carousel:not(.is-expanded) .salon-carousel-edge:hover::after {
    background: rgba(20, 20, 18, 0.82);
  }
}

/* Senkrechtes Scrollen muss auf dem Handy moeglich bleiben,
   waagerecht uebernehmen wir den Wisch selbst. */
.salon-carousel-frame {
  touch-action: pan-y;
}

/* Zaehler auch ohne grosse Ansicht sichtbar - sonst ahnt niemand,
   dass es weitere Bilder gibt. */
.salon-carousel:not(.is-expanded) .salon-carousel-caption small {
  opacity: 0.92;
}


/* ============================================================
   Nachtraegliche Korrekturen (v7)
   ============================================================ */

/* Auf Touchgeraeten ist der Button "Einblicke ansehen" ueberfluessig -
   dort tippt man ohnehin direkt aufs Bild. */
@media (hover: none), (pointer: coarse) {
  .salon-carousel:not(.is-expanded) .salon-carousel-preview {
    display: none !important;
  }
}

/* In der grossen Ansicht uebernehmen wir alle Gesten selbst
   (Wischen, Zwei-Finger-Zoom, Ziehen). */
.salon-carousel.is-expanded .salon-carousel-frame {
  touch-action: none;
}

.salon-carousel.is-expanded .salon-carousel-frame img {
  transform-origin: center center;
  will-change: transform;
}

/* Beim Hineinzoomen die Randpfeile wegnehmen - sie wuerden sonst
   das Verschieben des Bildes abfangen. */
.salon-carousel.is-zoomed .salon-carousel-edge {
  pointer-events: none;
  opacity: 0;
}

/* Echtes Vollbild: der Container wird zum Vollbildelement, das Video
   soll die Flaeche fuellen ohne beschnitten zu werden. */
.salon-video:fullscreen,
.salon-video:-webkit-full-screen {
  align-items: center;
  background: #000;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.salon-video:fullscreen video,
.salon-video:-webkit-full-screen video {
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}

/* Bedienelemente muessen im Vollbild oben liegen. */
.salon-video:fullscreen .salon-video-controls,
.salon-video:fullscreen .salon-video-timeline,
.salon-video:fullscreen .salon-video-center-play {
  z-index: 10;
}


/* ============================================================
   Karussell neu (v8) - natives CSS scroll-snap.
   Ersetzt die handgeschriebene Wischlogik vollstaendig.
   ============================================================ */

.salon-carousel.ifp-ready .salon-carousel-frame {
  aspect-ratio: auto;
  background: none;
  border-radius: 0;
  cursor: default;
  height: auto;
  overflow: visible;
  position: relative;
}

.ifp-track {
  -ms-overflow-style: none;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0 0;
  scroll-behavior: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Senkrecht scrollt die Seite, waagerecht das Karussell.
     Zoomen darf der Browser weiterhin selbst. */
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}

.ifp-track::-webkit-scrollbar { display: none; }

.ifp-slide {
  border-radius: 14px;
  cursor: zoom-in;
  flex: 0 0 86%;
  margin: 0;
  overflow: hidden;
  position: relative;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.ifp-slide img {
  aspect-ratio: 3 / 2;
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .ifp-slide:hover img { transform: scale(1.03); }
  .ifp-slide { flex-basis: 62%; }
}

@media (min-width: 1280px) {
  .ifp-slide { flex-basis: 52%; }
}

/* Pfeile nur bei echter Maus - auf dem Handy zaehlt der Wisch. */
.ifp-arrow { display: none; }

@media (hover: hover) and (pointer: fine) {
  .ifp-arrow {
    align-items: center;
    background: rgba(20, 20, 18, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    height: 46px;
    justify-content: center;
    opacity: 0;
    position: absolute;
    top: calc(50% - 26px);
    transform: translateY(-50%);
    transition: opacity 200ms ease, background 200ms ease;
    width: 46px;
    z-index: 3;
  }

  .salon-carousel:hover .ifp-arrow { opacity: 1; }
  .ifp-arrow:hover { background: rgba(20, 20, 18, 0.88); }
  .ifp-arrow:disabled { cursor: default; opacity: 0 !important; }
  .ifp-arrow-prev { left: 14px; }
  .ifp-arrow-next { right: 14px; }

  .ifp-arrow::before {
    content: "";
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    height: 11px;
    width: 11px;
  }
  .ifp-arrow-prev::before { transform: rotate(135deg) translate(-2px, -2px); }
  .ifp-arrow-next::before { transform: rotate(-45deg) translate(-2px, -2px); }
}

.ifp-dots {
  display: flex;
  gap: 7px;
  justify-content: center;
  padding: 16px 0 0;
}

.ifp-dot {
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  height: 24px;
  padding: 0;
  position: relative;
  transition: width 200ms ease;
  width: 24px;
}

.ifp-dot::before {
  background: rgba(29, 29, 27, 0.22);
  border-radius: 999px;
  content: "";
  height: 7px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background 200ms ease, width 200ms ease;
  width: 7px;
}

.ifp-dot.is-active {
  background: transparent;
  width: 32px;
}

.ifp-dot.is-active::before {
  background: var(--gold);
  width: 22px;
}

.ifp-caption {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 2px 0;
}

.ifp-caption span {
  font-size: 0.92rem;
  opacity: 0.85;
}

.ifp-caption small {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

/* ---------------- Grossansicht ---------------- */

body.carousel-is-expanded { overflow: hidden; }

.ifp-lightbox {
  backdrop-filter: blur(14px);
  background: rgba(8, 8, 8, 0.88);
  inset: 0;
  position: fixed;
  z-index: 100100;
}

.ifp-lightbox[hidden] { display: none; }

.ifp-lightbox-track {
  -ms-overflow-style: none;
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* pinch-zoom bleibt dem Browser ueberlassen: natives Zoomen
     ohne eigene Zoom-Mathematik. */
  touch-action: pan-x pinch-zoom;
  -webkit-overflow-scrolling: touch;
}

.ifp-lightbox-track::-webkit-scrollbar { display: none; }

.ifp-lightbox-slide {
  align-items: center;
  display: flex;
  flex: 0 0 100%;
  height: 100%;
  justify-content: center;
  padding: 56px 16px 84px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.ifp-lightbox-slide img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.ifp-lightbox-close {
  background: rgba(12, 12, 12, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 1.5rem;
  height: 44px;
  line-height: 1;
  position: absolute;
  right: 16px;
  top: 16px;
  width: 44px;
  z-index: 5;
}

.ifp-lightbox-arrow { display: none; }

@media (hover: hover) and (pointer: fine) {
  .ifp-lightbox-arrow {
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    height: 50px;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    z-index: 3;
  }
  .ifp-lightbox-prev { left: 20px; }
  .ifp-lightbox-next { right: 20px; }
  .ifp-lightbox-arrow::before {
    content: "";
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    height: 12px;
    width: 12px;
  }
  .ifp-lightbox-prev::before { transform: rotate(135deg) translate(-2px, -2px); }
  .ifp-lightbox-next::before { transform: rotate(-45deg) translate(-2px, -2px); }
}

.ifp-lightbox-caption {
  bottom: 0;
  color: rgba(255, 255, 255, 0.88);
  display: flex;
  gap: 14px;
  justify-content: center;
  left: 0;
  padding: 22px 16px 30px;
  position: absolute;
  right: 0;
}

.ifp-lightbox-caption small { opacity: 0.6; }

@media (hover: none), (pointer: coarse) {
  .ifp-lightbox-caption {
    display: none;
  }

  .ifp-lightbox-close {
    right: max(12px, env(safe-area-inset-right));
    top: max(12px, env(safe-area-inset-top));
  }

  .ifp-lightbox-slide {
    padding: 62px 0 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ifp-slide img { transition: none; }
}


/* ============================================================
   v9 - Korrektur: Wischen auf dem Handy ging nicht.
   Ursache: Altlasten aus v6/v7 setzten touch-action: pan-y auf
   .salon-carousel-frame. Das ist der Eltern-Container der neuen
   Scroll-Bahn, und touch-action beschraenkt auch alle Kinder -
   waagerechtes Ziehen wurde dadurch komplett verschluckt.
   ============================================================ */

.salon-carousel.ifp-ready .salon-carousel-frame,
.salon-carousel.ifp-ready.is-expanded .salon-carousel-frame {
  touch-action: auto !important;
}

/* Der Browser entscheidet selbst: waagerecht zieht das Karussell,
   senkrecht scrollt die Seite. Genau dafuer ist eine native
   Scroll-Box gemacht - jede Einschraenkung hier macht es kaputt. */
.ifp-track {
  touch-action: auto !important;
}

/* v2.1 - Zaehler ohne Bildunterschrift mittig setzen */
.ifp-caption-nur-zaehler {
  justify-content: center;
}

/* Sichtbare Rueckmeldung, wenn das Video nicht laedt. Vorher sah das
   aus, als sei die Seite kaputt. */
.salon-video.has-video-error .salon-video-center-play {
  border-color: rgba(255, 120, 100, 0.75);
}
/* v2.3 - Die Ladeanzeige hatte keinen z-index und lag damit UNTER dem
   Play-Button (z-index 3). Im Vollbild schob sich der Button sichtbar
   davor. Beide sind mittig positioniert, also muss die Reihenfolge
   eindeutig sein. */
.salon-video-buffering {
  z-index: 5;
}

.salon-video-center-play[hidden] {
  display: none !important;
}
/* v2.7 - Die Ladeanzeige liegt mittig ueber dem Video und schluckte
   Beruehrungen: ein Tipp genau darauf erreichte weder Play-Button noch
   Video. Man musste daneben tippen. Eine Statusanzeige darf niemals
   Eingaben abfangen. */
.salon-video-buffering {
  pointer-events: none;
}
/* ============================================================
   v2.7.2 - Der eigentliche Fehler hinter dem haengenden Ladesymbol.

   Das HTML-Attribut "hidden" wirkt ueber eine Standardregel des
   Browsers mit sehr schwacher Prioritaet. Sobald eine eigene Klasse
   ein display setzt - hier "display: inline-flex" - gewinnt die
   Klasse, und das Element bleibt sichtbar, obwohl im JavaScript
   buffering.hidden = true steht.

   Das Ladesymbol war deshalb DAUERHAFT im Bild, auf jedem Geraet.
   Beim Play-Button war die Absicherung vorhanden, hier fehlte sie.
   ============================================================ */
.salon-video-buffering[hidden] {
  display: none !important;
}

/* Gleiche Absicherung fuer die Ansichten, damit dort nicht dasselbe
   passieren kann. */
.ifp-view[hidden] {
  display: none !important;
}

/* Auf kleinen Displays ist die Bildbahn selbst die Bedienung. Pfeile,
   Punkte und Zaehler wuerden nur Bildflaeche belegen; gewischt wird nativ. */
@media (max-width: 600px) {
  .salon-carousel .ifp-arrow,
  .salon-carousel .ifp-dots,
  .salon-carousel .ifp-caption {
    display: none;
  }
}
/* ============================================================
   v2.8 - Bedienbarkeit auf Touchgeraeten.
   Gemessen am 05.08.2026 bei 375 px Breite: Karussellpunkte 7x7 px,
   Fusszeilenlinks 12 px hoch. Apple und Google empfehlen 44x44.
   Die Trefferflaechen werden unsichtbar vergroessert, das Aussehen
   bleibt unveraendert.
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  .ifp-dots {
    gap: 4px;
    padding-bottom: 6px;
  }

  /* Rechtslinks und Kontaktangaben im Fussbereich */
  footer nav a,
  .footer-contact a {
    display: inline-block;
    /* 16px Innenabstand bringt die 12px hohe Zeile auf 44px
       Trefferflaeche - der Richtwert von Apple und Google. */
    padding: 16px 12px;
  }

  footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
  }

  .footer-contact {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* Textlinks im Inhalt, etwa "Direkt zum Salon" */
  .text-link {
    padding-bottom: 6px;
    padding-top: 6px;
  }

  /* Videofortschritt laesst sich sonst kaum greifen */
  .salon-video-timeline input[type="range"] {
    height: 30px;
  }
}
/* ============================================================
   v2.8.1 - Kopfzeile auf Impressum und Datenschutz.
   Dort entfaellt die Bereichsnavigation. Das Raster war aber auf drei
   Spalten ausgelegt (230px 1fr auto) - ohne Navigation rutschte der
   Buchungsbutton in die mittlere Spalte und wurde ueberbreit.
   ============================================================ */
.site-header-schlicht {
  grid-template-columns: auto 1fr;
}

.site-header-schlicht .header-booking {
  justify-self: end;
}
/* ============================================================
   v2.8.4 - Fussbereich auf dem Handy einheitlich ausrichten.

   Gemessen bei 376 px: ich hatte nur zwei der vier Zeilen zentriert.
     footer-brand (Logo)  Abstand links/rechts  20/176   linksbuendig
     footer-contact                            132/133   mittig
     P (Copyright)                              20/184   linksbuendig
     NAV (Rechtslinks)                         101/102   mittig
   Dadurch wirkte die Copyright-Zeile nach links verrutscht.
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  footer {
    text-align: center;
  }

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

  footer > p {
    text-align: center;
  }

  /* Reserve fuer groessere Systemschrift: die Links duerfen umbrechen
     statt aus dem Bild zu laufen. */
  footer nav {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  footer nav a {
    white-space: nowrap;
  }
}
/* ============================================================
   v2.10.2 - Lange deutsche Woerter in Ueberschriften.

   "Datenschutzerklaerung" ist 20 Zeichen lang und passte auf schmalen
   Handys nicht in eine Zeile. Weil weder Silbentrennung noch Umbruch
   erlaubt waren, wurde das Wort schlicht abgeschnitten - gemessen 57 px
   bei 358 px Bildschirmbreite, 10 px selbst nach Verkleinern der Schrift.

   overflow-wrap: anywhere erlaubt den Umbruch auch innerhalb des Wortes,
   hyphens: auto setzt ihn an eine sinnvolle Silbengrenze (das html-Tag
   traegt lang="de", der Browser trennt also nach deutschen Regeln).

   .legal-hero h1 muss ausdruecklich mitgenannt werden: die Regel ist
   spezifischer als ein blosses h1 und wuerde sonst gewinnen.
   ============================================================ */
h1,
h2,
h3,
.legal-hero h1,
.section-shell h1,
.section-shell h2 {
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* ============================================================
   v2.10.3 - Einblend-Animation auf Handys abschalten.

   Alle Abschnitte starten mit opacity: 0 und blenden ueber 380 ms ein,
   sobald sie ins Bild kommen. Auf dem Desktop ist das ein huebsches
   Detail. Auf dem Handy ist die Startseite 10,7 Bildschirme lang - wer
   dort zuegig wischt, sieht staendig leere Flaechen, in die der Inhalt
   erst hineinblendet. Es wirkt, als komme die Seite dem Scrollen nicht
   hinterher.

   Gemessen bei 375 px Breite, Sprung um je 700 px:
     mit Einblendung   bis zu 8 Elemente im Bild noch unsichtbar
     ohne Einblendung  0

   Ein groesserer Vorlauf (rootMargin) allein reicht nicht - beim
   schnellen Wischen loest der Beobachter zu spaet aus. Auf Zeigegeraeten
   ohne Hover bleibt die Animation daher ganz aus. Der Desktop behaelt sie.
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ============================================================
   v2.11.2 - Kein Abdunkeln mehr, wenn die Maus auf dem Video liegt.

   .salon-video::after legte waehrend der Wiedergabe einen Schleier mit
   14 % Schwarz darueber, sobald der Zeiger darauf lag. Gedacht war es
   als Hinweis "hier kann man klicken". In der Praxis liegt die Maus oft
   einfach auf dem Video - und dann ist das Bild dauerhaft dunkler, ohne
   dass jemand etwas anklicken will. Bei Innenaufnahmen faellt das auf.

   Der Schleier bleibt im Markup, aber unsichtbar. So laesst sich die
   Entscheidung mit einer Zeile zurueckdrehen.
   ============================================================ */
.salon-video.is-playing:hover::after,
.salon-video.is-playing:focus-within::after {
  opacity: 0;
}