/* Motion & depth layer v2 for the selected 63942016 design.
   Colours, type, copy and positions stay untouched.
   Performance rule: only transform/opacity are animated, and scroll motion runs on CSS
   scroll timelines (compositor) — no scroll JavaScript, no animated filters or layout. */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --shadow-soft:
    0 1px 1px rgb(23 23 23 / 3%),
    0 4px 8px -2px rgb(23 23 23 / 4%),
    0 18px 36px -12px rgb(23 23 23 / 8%);
  --shadow-lift:
    0 1px 1px rgb(23 23 23 / 4%),
    0 8px 16px -4px rgb(23 23 23 / 6%),
    0 30px 60px -28px rgb(23 23 23 / 18%);
  --highlight: inset 0 1px 0 rgb(255 255 255 / 75%);
}

/* ---------- Static depth (painted once, never animated) ---------- */
.site-nav.is-scrolled {
  box-shadow: 0 10px 30px -20px rgb(23 23 23 / 25%);
}
.button,
.nav-cta,
.mob-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.button-light {
  box-shadow: var(--shadow-soft), var(--highlight);
}
.why > .container,
.prices .section-intro,
.prices .cat-guide-stage,
.home-page .book-cta {
  box-shadow: var(--shadow-soft), var(--highlight);
}
.prices .cat-guide-btn.active {
  box-shadow: 0 8px 20px -10px rgb(23 23 23 / 50%);
}
.price-disclosure[open] {
  box-shadow: var(--shadow-soft);
}
.home-page:not(.hero-variant-b) .hero-circle-blue::before {
  box-shadow:
    inset -30px -50px 90px -50px rgb(23 23 23 / 7%),
    inset 30px 40px 70px -40px rgb(255 255 255 / 80%);
}
.hero-circle-blue img {
  filter: drop-shadow(0 22px 22px rgb(23 23 23 / 18%));
}

/* ---------- Hover (compositor-only: opacity + transform of pre-painted layers) ---------- */
.button::before,
.nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 22%) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform 0.9s var(--ease-out);
}
.button-light::before {
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 90%) 48%, transparent 66%);
}
.button,
.nav-cta {
  transition:
    background 0.3s,
    color 0.3s,
    transform 0.5s var(--ease-spring);
}
@media (hover: hover) {
  .button:hover,
  .nav-cta:hover {
    transform: translateY(-2px);
  }
  .button:hover::before,
  .nav-cta:hover::before {
    transform: translateX(120%);
  }
}
.button:active,
.nav-cta:active {
  transform: scale(0.97);
  transition-duration: 0.12s;
}

.service-row,
.salon-row {
  position: relative;
  isolation: isolate;
}
.service-row::before,
.salon-row::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--gutter) * -0.35);
  z-index: -1;
  border-radius: var(--panel-radius, 16px);
  background: rgb(255 255 255 / 62%);
  box-shadow: var(--shadow-lift), var(--highlight);
  opacity: 0;
  transform: translateY(6px) scale(0.985);
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.6s var(--ease-out);
}
.salon-district {
  transition: transform 0.8s var(--ease-spring);
}
.footer-emblem {
  transition: transform 1.1s var(--ease-spring);
}
@media (hover: hover) {
  .service-row:hover::before,
  .salon-row:hover::before {
    opacity: 1;
    transform: none;
  }
  .salon-row:hover .salon-district {
    transform: rotate(-20deg) scale(1.08);
  }
  .flogo:hover .footer-emblem {
    transform: rotate(-180deg);
  }
}

/* The original hover animated padding (layout every frame); the same nudge as a transform. */
.service-row,
.service-row:hover {
  padding-left: 0;
}
.service-row > * {
  transition: transform 0.6s var(--ease-out);
}
@media (hover: hover) {
  .service-row:hover > h3 {
    transform: translateX(10px);
  }
}

/* ---------- Load: hero pieces join the existing masked title reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-stage .eyebrow {
    animation: mp-rise 0.9s var(--ease-out) both;
  }
  .hero-tagline {
    animation: mp-rise 1s var(--ease-out) 0.35s both;
  }
  .hero-bottom > .container > * {
    animation: mp-rise 0.9s var(--ease-out) 0.15s both;
  }
  /* rotate/scale are individual properties, so the emblem's own position is untouched. */
  .home-page:not(.hero-variant-b) .hero-circle-blue img {
    animation: mp-emblem-in 1.4s var(--ease-spring) 0.25s both;
  }
}

/* ---------- Scroll: CSS scroll timelines, run off the main thread ---------- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Reading progress as a hairline under the navigation. */
    .site-nav::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      background: var(--ink);
      transform-origin: left;
      animation: mp-progress linear both;
      animation-timeline: scroll(root);
    }

    /* Hero exit: the title lines part, the circle swells, the emblem keeps turning. */
    .hero .title-line:first-child {
      animation: mp-part-left linear both;
      animation-timeline: scroll(root);
      animation-range: 0 85vh;
    }
    .hero .title-line:nth-child(2) {
      animation: mp-part-right linear both;
      animation-timeline: scroll(root);
      animation-range: 0 85vh;
    }
    .hero-tagline {
      animation:
        mp-rise 1s var(--ease-out) 0.35s both,
        mp-fade-out linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 10vh 70vh;
    }
    .home-page:not(.hero-variant-b) .hero-circle-blue::before {
      animation: mp-swell linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
    /* Load spin uses `rotate`, scroll spin uses `transform`; both compose. */
    .home-page:not(.hero-variant-b) .hero-circle-blue img {
      animation:
        mp-emblem-in 1.4s var(--ease-spring) 0.25s both,
        mp-spin linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 100vh;
    }
    .hero-circle-gray {
      animation: mp-drift-up linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }

    /* Content arrives as it enters the viewport; already-visible content is simply there. */
    .section-intro > *,
    .editorial-heading > *,
    .editorial-body > *,
    .why-grid > *,
    .fact-card,
    .service-row,
    .prices .cat-guide,
    .price-disclosure,
    .salon-row,
    .founder-inner > *,
    .value-card,
    .faq-item,
    .book-cta > :not(h2) {
      animation: mp-arrive linear both;
      animation-timeline: view();
      animation-range: entry 0 entry 240px;
    }
    /* The district badges roll in like the footer emblem. */
    .salon-district {
      animation: mp-roll-in linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 35%;
    }
    .why > .container {
      animation: mp-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    .book-cta h2 {
      animation: mp-grow linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
    }
    .book-cta::before {
      animation: mp-turn-in linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    .footer-emblem {
      animation: mp-roll-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
  }
}

@keyframes mp-rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes mp-emblem-in {
  from { opacity: 0; rotate: -180deg; scale: 0.6; }
  to { opacity: 1; rotate: 0deg; scale: 1; }
}
@keyframes mp-spin {
  to { transform: rotate(-150deg); }
}
@keyframes mp-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes mp-part-left {
  to { transform: translate3d(-9vw, 0, 0); }
}
@keyframes mp-part-right {
  to { transform: translate3d(9vw, 0, 0); }
}
@keyframes mp-fade-out {
  to { opacity: 0; }
}
@keyframes mp-swell {
  to { transform: translate3d(-6%, 10%, 0) scale(1.22); }
}
@keyframes mp-drift-up {
  to { transform: translate3d(0, -28vh, 0); }
}
@keyframes mp-arrive {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes mp-settle {
  from { opacity: 0.4; transform: translate3d(0, 48px, 0) scale(0.965); }
  to { opacity: 1; transform: none; }
}
@keyframes mp-roll-in {
  from { rotate: -200deg; scale: 0.55; opacity: 0; }
  to { rotate: 0deg; scale: 1; opacity: 1; }
}
@keyframes mp-grow {
  from { transform: scale(0.88); opacity: 0.2; }
  to { transform: none; opacity: 1; }
}
@keyframes mp-turn-in {
  from { transform: translate3d(0, 12%, 0) scale(0.8); }
  to { transform: translate3d(-8%, -6%, 0) scale(1.15); }
}

/* ---------- Price finder (built by price-finder.js from the tables below it) ---------- */
.pf {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 0;
  margin-bottom: 48px;
  border: 1px solid #dededb;
  border-radius: var(--panel-radius, 16px);
  background: #fff;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.pf-head {
  grid-column: 1 / -1;
  padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) 0;
}
.pf-head .eyebrow {
  margin-bottom: 12px;
}
.pf-title {
  font-family: Syne, sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.04em;
}
.pf-steps {
  display: grid;
  gap: 22px;
  align-content: start;
  padding: 28px clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px);
}
.pf-label {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.pf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pf-chip {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #dededb;
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  line-height: 1.3;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 0.4s var(--ease-spring);
}
.pf-chip[aria-checked="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgb(23 23 23 / 50%);
}
.pf-chip:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.pf-chip:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
@media (hover: hover) {
  .pf-chip:not([aria-checked="true"]):not(:disabled):hover {
    background: var(--yellow);
    border-color: var(--ink);
    transform: translateY(-2px);
  }
}
.pf-chip:active:not(:disabled) {
  transform: scale(0.96);
}
.pf-result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 28px clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) 0;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--panel-radius, 16px);
  background: var(--yellow);
  box-shadow: var(--highlight);
}
.pf-summary {
  font-size: 15px;
  color: var(--muted);
}
.pf-price {
  font-family: Syne, sans-serif;
  font-weight: 800;
  font-size: clamp(64px, 7vw, 110px);
  line-height: 1;
  letter-spacing: -0.05em;
  margin: 12px 0 16px;
  font-variant-numeric: tabular-nums;
}
.pf-from {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 0.32em;
  letter-spacing: 0;
}
.pf-note {
  font-size: 14px;
  color: var(--muted);
  max-width: 40ch;
}
.pf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 24px;
}
@media (max-width: 980px) {
  .pf {
    grid-template-columns: 1fr;
  }
  /* The price stays pinned while choosing, so every tap shows its result. */
  .pf {
    overflow: visible;
  }
  .pf-result {
    position: sticky;
    /* clears the floating chat launcher in the bottom corner */
    bottom: 84px;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 10px;
    margin: 0 8px 8px;
    padding: 12px 14px;
    box-shadow: var(--shadow-lift), var(--highlight);
  }
  .pf-result {
    grid-template-areas:
      "summary summary"
      "includes includes"
      "price actions";
  }
  .pf-summary {
    grid-area: summary;
    font-size: 13px;
  }
  .pf-result .pf-includes {
    grid-area: includes;
    font-size: 12px;
    line-height: 1.4;
    margin: 2px 0 0;
  }
  .pf-price {
    grid-area: price;
  }
  .pf-actions {
    grid-area: actions;
  }
  .pf-price {
    font-size: 40px;
    margin: 0;
    white-space: nowrap;
  }
  .pf-note,
  .pf-table {
    display: none;
  }
  .pf-actions {
    margin: 0;
  }
  .pf-actions .button {
    min-height: 46px;
    padding: 12px 18px;
  }
  .pf-actions .button .icon {
    display: none;
  }
}
@media (max-width: 360px) {
  .pf-price {
    font-size: 34px;
  }
}

/* Category guide lives inside the finder now; the full lists sit behind one toggle. */
.pf-ready .cat-guide {
  display: none;
}
.pf-desc {
  margin-top: 14px;
  padding: 14px 18px;
  border-left: 2px solid var(--ink);
  background: #f7f7f5;
  border-radius: 0 12px 12px 0;
  font-size: 15px;
  line-height: 1.6;
  animation: mp-rise 0.45s var(--ease-out) both;
}
.pf-desc p + p {
  margin-top: 8px;
}
.pf-desc strong {
  font-weight: 600;
}
.pf-includes {
  font-size: 14px;
  margin-bottom: 6px;
}
.pf-lists-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 4px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: Syne, sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.02em;
  text-align: left;
}
.pf-lists-toggle .icon {
  transition: transform 0.5s var(--ease-spring);
}
.pf-lists-toggle[aria-expanded="true"] .icon {
  transform: rotate(45deg);
}
@media (hover: hover) {
  .pf-lists-toggle:hover .icon {
    transform: rotate(90deg);
  }
  .pf-lists-toggle[aria-expanded="true"]:hover .icon {
    transform: rotate(135deg);
  }
}
.pf-lists {
  padding-top: 32px;
  animation: mp-rise 0.5s var(--ease-out) both;
}

/* Wandering circles: slow, offset drifts on the individual `translate` property,
   so they compose with the scroll-linked `transform` animations and stay on the compositor. */
@media (prefers-reduced-motion: no-preference) {
  .home-page:not(.hero-variant-b) .hero-circle-blue::before,
  .lim::after {
    animation: mp-wander-a 14s ease-in-out infinite;
  }
  .hero-circle-gray,
  .how::after {
    animation: mp-wander-b 10s ease-in-out infinite;
  }
  .facts::after,
  .book-cta::before {
    animation: mp-wander-c 9s ease-in-out infinite;
  }
  .salon-district {
    animation: mp-wander-badge 4s ease-in-out infinite;
  }
  .salon-row:nth-child(2n) .salon-district {
    animation-delay: -3s;
  }
}
/* Where scroll timelines exist, the scroll effect and the drift run side by side. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .home-page:not(.hero-variant-b) .hero-circle-blue::before {
      animation: mp-swell linear both, mp-wander-a 14s ease-in-out infinite;
      animation-timeline: scroll(root), auto;
      animation-range: 0 100vh, normal;
    }
    .hero-circle-gray {
      animation: mp-drift-up linear both, mp-wander-b 10s ease-in-out infinite;
      animation-timeline: scroll(root), auto;
      animation-range: 0 100vh, normal;
    }
    .book-cta::before {
      animation: mp-turn-in linear both, mp-wander-c 12s ease-in-out infinite;
      animation-timeline: view(), auto;
      animation-range: entry 0% exit 100%, normal;
    }
    .salon-district {
      animation: mp-roll-in linear both, mp-wander-badge 4s ease-in-out infinite;
      animation-timeline: view(), auto;
      animation-range: entry 10% cover 35%, normal;
    }
    .salon-row:nth-child(2n) .salon-district {
      animation-delay: 0s, -3s;
    }
  }
}

/* Wander paths: closed, irregular loops (start = end) so the circles drift without a visible turn-around. */
@keyframes mp-wander-a {
  0%, 100% { translate: 0 0; scale: 1; }
  25% { translate: -4vw 3vw; scale: 1.04; }
  50% { translate: -1vw 6vw; scale: 0.97; }
  75% { translate: 3vw 2vw; scale: 1.03; }
}
@keyframes mp-wander-b {
  0%, 100% { translate: 0 0; scale: 1; }
  30% { translate: 5vw -3vw; scale: 1.08; }
  60% { translate: 2vw -7vw; scale: 0.94; }
  80% { translate: -3vw -2vw; scale: 1.04; }
}
@keyframes mp-wander-c {
  0%, 100% { translate: 0 0; }
  33% { translate: -3vw 2vw; }
  66% { translate: 2vw 4vw; }
}
/* Badges only nudge — they sit next to text. */
@keyframes mp-wander-badge {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

/* ---------- More wandering circles (pure CSS pseudo-elements: no requests, no layout) ---------- */
.why,
.services,
.prices,
.salons,
.founder,
.joinus,
.values-section,
.faq-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.why::before,
.services::before,
.services::after,
.prices::before,
.prices::after,
.salons::before,
.salons::after,
.founder::before,
.founder::after,
.joinus::before,
.joinus::after,
.values-section::before,
.values-section::after,
.faq-section::before,
.faq-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}
/* grey = white-gray, yellow = the deeper hero yellow; on dark the yellow is faint */
.why::before { width: clamp(140px, 16vw, 260px); left: -4%; bottom: 6%; background: var(--white-gray); }
.services::before { width: clamp(180px, 22vw, 340px); left: -9%; bottom: -6%; background: var(--white-gray); }
.services::after { width: clamp(70px, 7vw, 110px); right: 7%; top: 9%; background: #fff0bd; }
.prices::before { width: clamp(120px, 13vw, 210px); right: -3%; top: 3%; background: #fff0bd; }
.prices::after { width: clamp(50px, 5vw, 80px); left: 3%; bottom: 14%; background: var(--white-gray); }
.salons::before { width: clamp(90px, 9vw, 150px); right: 4%; top: 5%; background: var(--white-gray); }
.salons::after { width: clamp(200px, 26vw, 400px); left: -12%; bottom: -10%; background: #fff0bd; }
.founder::before { width: clamp(100px, 11vw, 170px); left: 6%; top: 16%; background: #fff0bd; }
.founder::after { width: clamp(46px, 4.5vw, 72px); right: 12%; bottom: 18%; background: var(--white-gray); }
.joinus::before { width: clamp(220px, 28vw, 440px); right: -10%; top: -18%; background: rgb(255 249 227 / 7%); }
.joinus::after { width: clamp(60px, 6vw, 96px); left: 4%; bottom: 10%; background: rgb(255 249 227 / 12%); }
.values-section::before { width: clamp(80px, 8vw, 130px); left: 2%; top: 8%; background: var(--white-gray); }
.values-section::after { width: clamp(150px, 17vw, 270px); right: -6%; bottom: 4%; background: #fff0bd; }
.faq-section::before { width: clamp(110px, 12vw, 190px); right: 5%; top: -4%; background: var(--white-gray); }
.faq-section::after { width: clamp(60px, 6vw, 100px); left: 8%; bottom: 8%; background: rgb(255 255 255 / 70%); }

@media (prefers-reduced-motion: no-preference) {
  .why::before { animation: mp-wander-b 13s ease-in-out -4s infinite; }
  .services::before { animation: mp-wander-a 17s ease-in-out -2s infinite; }
  .services::after { animation: mp-wander-c 8s ease-in-out -5s infinite; }
  .prices::before { animation: mp-wander-b 15s ease-in-out -7s infinite; }
  .prices::after { animation: mp-wander-c 10s ease-in-out -1s infinite; }
  .salons::before { animation: mp-wander-c 9s ease-in-out -3s infinite; }
  .salons::after { animation: mp-wander-a 19s ease-in-out -9s infinite; }
  .founder::before { animation: mp-wander-b 12s ease-in-out -6s infinite; }
  .founder::after { animation: mp-wander-c 7s ease-in-out -2s infinite; }
  .joinus::before { animation: mp-wander-a 20s ease-in-out -11s infinite; }
  .joinus::after { animation: mp-wander-b 11s ease-in-out -3s infinite; }
  .values-section::before { animation: mp-wander-c 9s ease-in-out -4s infinite; }
  .values-section::after { animation: mp-wander-a 16s ease-in-out -8s infinite; }
  .faq-section::before { animation: mp-wander-b 14s ease-in-out -5s infinite; }
  .faq-section::after { animation: mp-wander-c 8s ease-in-out -2s infinite; }
}

/* Arriving from a service row: the result card gives one soft pulse. */
@media (prefers-reduced-motion: no-preference) {
  .pf-result.pf-flash {
    animation: mp-flash 0.9s var(--ease-spring) 0.35s both;
  }
  @keyframes mp-flash {
    0% { transform: scale(1); }
    40% { transform: scale(1.035); }
    100% { transform: scale(1); }
  }
}