/* Novelle: animations only. Every static property is a Designer class; this file holds the motion states
   (set by the site script), hover motion, and the few properties the Style panel cannot hold. */
:root { --ivory: var(--_colour---ivory); --beige: var(--_colour---beige); --tan: var(--_colour---tan); --latte: var(--_colour---latte); --oak: var(--_colour---oak); --espresso: var(--_colour---espresso); --shade: 26 21 19; --font-display: var(--_font---display); --font-body: var(--_font---body); --gutter: var(--_size---gutter); --nav-h: var(--_size---nav-height); --ease-out: cubic-bezier(.19, 1, .22, 1); --ease-in-out: cubic-bezier(.77, 0, .18, 1); --ease-curtain: cubic-bezier(.62, .05, .18, 1); --ease-soft: cubic-bezier(.25, .46, .45, .94); --ease-reveal: cubic-bezier(.6, .05, .25, 1); }
/* Not supported by the Style panel */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scrollbar-gutter: stable; } html.is-locked { overflow: hidden; }
/* The button's colours follow the header's state inside the header */
.btn { --btn-ink: var(--ivory); --btn-line: rgb(247 242 237 / .55); --btn-fill: var(--ivory); --btn-fill-ink: var(--espresso); }
.btn--dark { --btn-ink: var(--espresso); --btn-line: rgb(58 50 48 / .4); --btn-fill: var(--espresso); --btn-fill-ink: var(--ivory); }
.nav .btn { color: var(--btn-ink); border-color: var(--btn-line); background-image: linear-gradient(var(--btn-fill), var(--btn-fill)); }
@media (hover: hover) { .nav .btn:hover { color: var(--btn-fill-ink); border-color: var(--btn-fill); } }
/* Overlays and hidden starting states */
.js .enter { display: grid; }
.js .enter__texture { opacity: 0; transform: scale(1.08); }
.js .enter__mark { clip-path: inset(100% 0 0 0); }
.js .enter__logo { opacity: 0; transform: translateY(14px); filter: blur(6px); }
.js .enter__tagline { opacity: 0; }
.js .enter__ring { transform: rotate(-90deg); }
.js .enter__label { opacity: 0; }
.js .enter__foot { opacity: 0; }
.js .menu { display: block; }
.js .menu { visibility: hidden; }
.js .menu__bg { transform: translate3d(0, -100%, 0); }
.js .menu__list { opacity: 0; }
.js .menu__link { transform: translate3d(0, 115%, 0); }
.js .menu__sub { opacity: 0; }
.js .menu__aside { opacity: 0; transform: translate3d(0, 1.5rem, 0); }
html.is-locked { overflow: hidden; }
.js [data-rv] { opacity: 0; transform: translate3d(0, 1rem, 0); transition: opacity 1.8s ease var(--rd, 0s), transform 2.2s var(--ease-soft) var(--rd, 0s); }
[data-rv].is-in { opacity: 1; transform: none; }
html:not(.js) .enter { display: none; }
[data-skip-enter] .enter { display: none; }
.enter__button { -webkit-tap-highlight-color: transparent; }
.enter__ring circle { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: .5; transition: stroke-dashoffset 2.2s var(--ease-in-out) 2.1s, opacity .6s ease; }
.enter.is-ready .enter__texture { opacity: 1; transform: none; }
.enter.is-ready .enter__mark { clip-path: inset(0 0 0 0); }
.enter.is-ready .enter__logo { opacity: 1; transform: none; filter: none; }
.enter.is-ready .enter__tagline { opacity: 1; letter-spacing: .34em; padding-left: .34em; }
.enter.is-ready .enter__ring circle { stroke-dashoffset: 0; }
.enter.is-ready .enter__label { opacity: 1; }
.enter.is-ready .enter__foot { opacity: 1; }
.enter.is-leaving { clip-path: inset(0 0 100% 0); pointer-events: none; }
.enter.is-leaving .enter__inner { opacity: 0; transform: translateY(-6vh); }
.enter.is-leaving .enter__texture { transform: translateY(-4%); transition: transform 1.8s var(--ease-in-out); }
.menu-open .nav__menu-bar:first-child { transform: translate(0, 0) rotate(45deg) scaleX(.74); }
.menu-open .nav__menu-bar:last-child { transform: translate(0, 0) rotate(-45deg) scaleX(.74); }
.menu-open .nav__menu-word { transform: translateY(-100%); }
.nav.is-solid { color: var(--espresso); }
.nav.is-solid::before { opacity: 1; }
.nav.is-solid .nav__logo-dark { opacity: 1; }
.nav.is-solid .nav__logo-light { opacity: 0; }
.nav.is-solid .btn { --btn-ink: var(--espresso); --btn-line: rgb(58 50 48 / .4); --btn-fill: var(--espresso); --btn-fill-ink: var(--ivory); }
.nav.is-hidden { transform: translate3d(0, -100%, 0); }
.menu-open .nav { color: var(--ivory); transform: none; }
.menu-open .nav::before { opacity: 0; }
.menu-open .nav .nav__logo-dark { opacity: 0; }
.menu-open .nav .nav__logo-light { opacity: 1; }
.menu-open .nav .btn { --btn-ink: var(--ivory); --btn-line: rgb(247 242 237 / .55); --btn-fill: var(--ivory); --btn-fill-ink: var(--espresso); }
.menu-open .menu { visibility: visible; transition-delay: 0s; }
.menu__bg { will-change: transform; }
.menu-open .menu__bg { transform: translate3d(0, 0, 0); transition: transform 1.1s var(--ease-curtain); }
.menu-open .menu__list { opacity: 1; transition: none; }
.menu-open .menu__link { transform: translate3d(0, 0, 0); transition: transform 1.2s var(--ease-out) calc(.42s + var(--i) * .06s), opacity .5s ease; }
.menu-open .menu__sub { opacity: 1; transition: opacity 1s ease .95s; }
.menu-open .menu__aside { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 1.1s ease .65s, transform 1.4s var(--ease-out) .65s; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media[data-reel] .hero__video { opacity: 0; filter: saturate(.82) contrast(.96) sepia(.08); transition: opacity 1.4s ease; }
.hero__media[data-reel] .hero__video.is-active { opacity: 1; }
.js .hero__media[data-reel] .hero__video { transition: opacity 1.4s ease, transform 3.6s var(--ease-out); }
.hero__toggle[aria-pressed="true"] .hero__toggle-icon { border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.js .nav { opacity: 0; transition: opacity 1.4s ease, transform .9s var(--ease-curtain), color .6s ease; --d: 1.2s; }
.js .hero__video { transform: scale(1.12); transition: transform 3.6s var(--ease-out); }
.js .hero__title .line > span { transform: translate3d(0, 110%, 0); transition: transform 1.7s var(--ease-out); }
.js .hero__title .line:nth-child(1) > span { --d: .85s; }
.js .hero__title .line:nth-child(2) > span { --d: 1s; }
.js [data-intro] { opacity: 0; transform: translate3d(0, 1rem, 0); transition: opacity 1.3s ease, transform 1.6s var(--ease-out); }
.js .hero__foot::before { transform: scaleX(0); transition: transform 2s var(--ease-in-out); }
.is-entered .nav { opacity: 1; transform: none; }
.is-entered [data-intro] { opacity: 1; transform: none; }
.is-entered .hero__video { transform: none; }
.is-entered .hero__title .line > span { transform: none; }
.is-entered .hero__foot::before { transform: scaleX(1); }
.is-intro .nav { transition-delay: var(--d, 0s); }
.is-intro [data-intro] { transition-delay: var(--d, 0s); }
.is-intro .hero__title .line > span { transition-delay: var(--d, 0s); }
.is-intro .hero__foot::before { transition-delay: var(--d, 0s); }
.js .shead__title { opacity: 0; transform: translate3d(0, .5rem, 0); transition: opacity 1.8s ease, transform 2.2s var(--ease-soft), color .4s ease; }
.js .shead__rule { transform: scaleX(0); transition: transform 2.6s var(--ease-soft) .1s; }
.shead__title.is-in { opacity: 1; transform: none; }
.shead__rule.is-in { transform: scaleX(1); }
.js .value__reveal { transform: translate3d(0, 100%, 0); transition: transform 1.9s var(--ease-reveal) var(--stagger, 0s); }
.js .value__img { translate: 0 -84.746%; scale: 1.08; transition: translate 1.9s var(--ease-reveal) var(--stagger, 0s), scale 3.2s var(--ease-soft) var(--stagger, 0s); }
.js .value__num { opacity: 0; transform: translate3d(0, 1rem, 0); transition: opacity 1.8s ease, transform 2.2s var(--ease-soft); }
.js .value__title { opacity: 0; transform: translate3d(0, 1rem, 0); transition: opacity 1.8s ease, transform 2.2s var(--ease-soft); }
.js .value__body { opacity: 0; transform: translate3d(0, 1rem, 0); transition: opacity 1.8s ease, transform 2.2s var(--ease-soft); }
.js .value__num { transition-delay: calc(var(--stagger, 0s) + .8s); }
.js .value__title { transition-delay: calc(var(--stagger, 0s) + .95s); }
.js .value__body { transition-delay: calc(var(--stagger, 0s) + 1.1s); }
.value.is-in .value__reveal { transform: translate3d(0, 0, 0); }
.value.is-in .value__img { translate: 0 0; scale: 1; }
.value.is-in .value__num { opacity: 1; transform: none; }
.value.is-in .value__title { opacity: 1; transform: none; }
.value.is-in .value__body { opacity: 1; transform: none; }
.treatments__intro { text-wrap: pretty; }
.treat:has(a:focus-visible) { outline: 1px solid var(--latte); outline-offset: 6px; }
.js .treat__window { transform: translate3d(0, 100%, 0); transition: transform 1.9s var(--ease-reveal) var(--rd, 0s); }
.js .treat__img { translate: 0 -100%; scale: 1.08; transition: translate 1.9s var(--ease-reveal) var(--rd, 0s), scale 3.2s var(--ease-soft) var(--rd, 0s), transform 1.4s var(--ease-soft); }
.js .treat__text { opacity: 0; transform: translate3d(0, 1rem, 0); transition: opacity 1.8s ease calc(var(--rd, 0s) + .8s), transform 2.2s var(--ease-soft) calc(var(--rd, 0s) + .8s); }
.treat.is-in .treat__window { transform: translate3d(0, 0, 0); }
.treat.is-in .treat__img { translate: 0 0; scale: 1; }
.treat.is-in .treat__text { opacity: 1; transform: none; }
.treat--family .treat__title { max-width: 20ch; font-size: clamp(1.6rem, 1.1rem + .95vw, 2.1rem); }
.treat--family .treat__body { max-width: 40ch; margin-bottom: 2rem; }
.js .founding__fill { transform: scaleX(0); transition: transform 2.6s var(--ease-soft) .6s; }
.founding__count.is-in .founding__fill { transform: scaleX(calc(var(--taken, 0) / 100)); }
.love__count { font-variant-numeric: tabular-nums; }
.is-page .nav { --d: .2s; }
.menu__link.w--current .menu__num { color: var(--ivory); }
.footer__links a.w--current { color: var(--ivory); }
.footer__legal a.w--current { color: var(--ivory); }
.phero__title .line > span { text-wrap: balance; }
.jcards .frame { aspect-ratio: 3 / 2; }
.post__body h2 { margin: 2.75rem 0 1rem; color: var(--espresso); font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); font-weight: 300; line-height: 1.2; }
.post__body blockquote { margin: 2.5rem 0; padding: 0 0 0 1.5rem; border-left: 1px solid var(--line); color: var(--espresso); font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + .6vw, 1.75rem); line-height: 1.4; }
.post__body img { width: 100%; height: auto; margin: 2.5rem 0; }
.js .phero__img { transform: scale(1.08); transition: transform 3.6s var(--ease-out); }
.js .phero__title .line > span { transform: translate3d(0, 110%, 0); transition: transform 1.7s var(--ease-out); }
.js .phero__title .line:nth-child(1) > span { --d: .35s; }
.js .phero__title .line:nth-child(2) > span { --d: .5s; }
.is-entered .phero__img { transform: none; }
.is-entered .phero__title .line > span { transform: none; }
.is-intro .phero__title .line > span { transition-delay: var(--d, 0s); }
.band { --line: rgb(58 50 48 / .18); --muted: rgb(58 50 48 / .8); --label: var(--latte); }
.band--ivory + .band--ivory { padding-top: 0; }
.standfirst__text { text-wrap: pretty; }
.chapter--top .chapter__media { margin-top: .4rem; }
.chapter__title + .chapter__body { margin-top: .4rem; }
.chapter__title + .prices { margin-top: .4rem; }
.chapter__text > * + .chapter__title { margin-top: clamp(3.5rem, 9vh, 5.5rem); }
.chapter__body a { text-decoration-thickness: 1px; text-underline-offset: .22em; }
.chapter__body + .chapter__num { margin-top: 2.5rem; }
.pullquote blockquote { margin: 0; color: var(--espresso); font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + .55vw, 1.6rem); font-weight: 300; line-height: 1.4; text-wrap: pretty; }
.pullquote blockquote p { margin: 0; }
.chapter__media .fcard { margin: 0 auto; }
.frame--square .frame__drift { inset: 0; }
.js .frame__reveal { transform: translate3d(0, 100%, 0); transition: transform 1.9s var(--ease-reveal) var(--rd, 0s); }
.js .frame__img { translate: 0 -84.746%; scale: 1.08; transition: translate 1.9s var(--ease-reveal) var(--rd, 0s), scale 3.2s var(--ease-soft) var(--rd, 0s); }
.frame.is-in .frame__reveal { transform: translate3d(0, 0, 0); }
.frame.is-in .frame__img { translate: 0 0; scale: 1; }
.rich > :first-child { margin-top: 0; }
.rich > :last-child { margin-bottom: 0; }
.chapter__title + .rich { margin-top: .4rem; }
.phero__img[data-focus="left" i] { object-position: 30% 50%; }
.phero__img[data-focus="right" i] { object-position: 70% 50%; }
.phero__title .line:has(> span:empty, > span > em:empty) { display: none; }
.fpage { --line: rgb(58 50 48 / .2); --muted: rgb(58 50 48 / .8); --label: var(--latte); }
.fcol__lead { text-wrap: balance; }
.fcol__title { text-wrap: balance; }
.fbenefits { counter-reset: benefit; }
.fbenefit { counter-increment: benefit; }
.fbenefit__title { text-wrap: balance; }
:root:has(.fpage):not(.menu-open) .nav:not(.is-solid) { color: var(--espresso); }
:root:has(.fpage):not(.menu-open) .nav:not(.is-solid) .nav__logo-dark { opacity: 1; }
:root:has(.fpage):not(.menu-open) .nav:not(.is-solid) .nav__logo-light { opacity: 0; }
:root:has(.fpage):not(.menu-open) .nav:not(.is-solid) .btn { --btn-ink: var(--espresso); --btn-line: rgb(58 50 48 / .4); --btn-fill: var(--espresso); --btn-fill-ink: var(--ivory); }
.closing__text { text-wrap: balance; }
.closing__body p + p { margin-top: 1.1em; }
.famnav__link.w--current { color: var(--espresso); }
.famnav__link.w--current::after { opacity: .45; }
.tmenu__item + .tmenu__item { margin-top: clamp(3rem, 8vh, 4.5rem); }
.tmenu__name { text-wrap: balance; }
.tmenu__body .prices { border-top: 0; }
.tmenu__heading + .prices { border-top: 1px solid var(--line); }
.tmenu__body > :first-child { margin-top: 0; }
.family .chapter__actions { margin-top: auto; padding-top: clamp(1.75rem, 4vh, 2.5rem); }
.family__lead { text-wrap: balance; }
.result__img figcaption { margin-top: .8rem; color: var(--label); }
.faq__item.is-open .faq__icon::after { transform: rotate(0deg); }
.js .faq__answer { grid-template-rows: 0fr; transition: grid-template-rows .8s var(--ease-soft); }
.js .faq__item.is-open .faq__answer { grid-template-rows: 1fr; }
.faq__rich p { margin: 0; }
.faq__rich p + p { margin-top: 1.1em; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.7) sepia(.18) contrast(.96); }
.map.is-loaded .map__fallback { visibility: hidden; }
.booking__after a { text-decoration-thickness: 1px; text-underline-offset: .22em; }
@media (hover: hover) {
.link:hover::after { animation: link-line 1s var(--ease-out); }
.enter__button:hover .enter__fill { transform: scale(1); }
.enter__button:hover .enter__label { color: var(--ivory); }
.enter__button:hover .enter__ring circle { opacity: 1; }
:root:not(.menu-open) .nav__menu:hover .nav__menu-bar:last-child { transform: translate(0, 4px) rotate(0deg) scaleX(1); }
.menu__list:hover .menu__link { opacity: .4; }
.menu__list .menu__link:hover { opacity: 1; }
.treat:hover .treat__img { transform: scale(1.04); }
.treat:hover .treat__title { color: var(--latte); }
.treat:hover .btn { color: var(--btn-fill-ink); border-color: var(--btn-fill); background-size: 100% 100%; }
.jcard__link:hover .jcard__title { color: var(--latte); }
}
@media (min-width: 1100px) {
.value { --stagger: calc(var(--i) * .2s); }
}
@media (max-width: 699px) {
.treatments__list .treat { --rd: 0s !important; }
}
@media (min-width: 900px) {
.tmenu__item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.tmenu__head { grid-column: 1 / span 5; margin-bottom: 0; }
.tmenu__body { grid-column: 7 / span 6; }
}
@media (max-width: 767px) {
.family + .family { margin-top: clamp(5rem, 12vh, 7rem); }
.family .frame { width: 86%; }
.family:nth-child(2) .frame { margin-left: auto; }
}
@media (min-width: 900px) and (max-width: 1199px) {
.consult-layout__main .standfirst__text { font-size: clamp(1.45rem, 1rem + 1.15vw, 2.25rem); line-height: 1.32; }
}
@media (max-width: 900px) and (min-height: 50rem) {
.menu__figure { display: block; flex: 0 0 auto; align-self: flex-start; width: auto; height: clamp(5rem, 13vh, 9rem); min-height: 0; aspect-ratio: 1200 / 1674; }
}
@keyframes link-line {
  0%   { transform: scaleX(1); transform-origin: 100% 50%; }
  45%  { transform: scaleX(0); transform-origin: 100% 50%; }
  46%  { transform: scaleX(0); transform-origin: 0 50%; }
  100% { transform: scaleX(1); transform-origin: 0 50%; }
}