/*
 * NailsbySam Studio — 0.5.0 layer: motion and the new layout pieces.
 * Loaded after pages.css.
 *
 *  1. Hero entrances        7. Open times (LatePoint)
 *  2. Scroll reveals        8. Booking bar (phones)
 *  3. Ribbon                9. Booking page
 *  4. Photo band           10. Gallery: bring a look
 *  5. Turning badge        11. Full menu as editorial rows
 *  6. Hover and shine      12. Page transitions, print
 *
 * Rules kept from LEVELS and Dreamer: motion runs on timers and
 * IntersectionObserver, never tied to the scroll position; the H1 and the
 * largest picture of a page are never hidden (they only move or come into
 * focus), so the Largest Contentful Paint is not delayed; html.nbs-calm
 * (reduced motion, data saver) turns it all off.
 */

/* 1. Hero entrances ------------------------------------------------------------ */
/* Settles from slightly smaller: never wider than its frame (a zoom from
   larger made phones scroll sideways while it ran). */
@keyframes nbs-focus-in {
	from { filter: blur(14px) saturate(0.85); transform: scale(0.965); }
	to { filter: none; transform: none; }
}

@keyframes nbs-line-in {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes nbs-ring-in {
	from { opacity: 0; transform: scale(0.94) rotate(-4deg); }
	to { opacity: 1; transform: none; }
}

@keyframes nbs-drift-up {
	from { translate: 0 56px; }
	to { translate: 0 0; }
}

@keyframes nbs-pop {
	from { opacity: 0; scale: 0.6; }
	to { opacity: 1; scale: 1; }
}

@keyframes nbs-spin {
	to { rotate: 360deg; }
}

@keyframes nbs-swoosh {
	from { background-size: 0% 0.3em; }
	to { background-size: 100% 0.3em; }
}

/* Titles rise into place (never faded: they are the LCP on most pages). */
html.nbs-js:not(.nbs-calm) :is(.nbs-hero2__title, .nbs-pagehead__title, .nbs-svchero__title) {
	animation: nbs-rise 1s var(--nbs-ease) both;
}

/* A hand-drawn gold stroke under the italic word of each page title. */
:is(.nbs-hero__title, .nbs-hero2__title, .nbs-pagehead__title) em {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8.6C46 3.6 104 2.4 197 5.8' fill='none' stroke='%23C99A4E' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 96% / 100% 0.3em;
	padding-bottom: 0.04em;
}

html.nbs-js:not(.nbs-calm) :is(.nbs-hero__title, .nbs-hero2__title, .nbs-pagehead__title) em {
	animation: nbs-swoosh 1.1s var(--nbs-ease) 0.75s both;
}

/* Eyebrow, lead, buttons, chips, price box: one after another. */
html.nbs-js:not(.nbs-calm) :is(.nbs-hero2, .nbs-pagehead, .nbs-svchero) :is(.nbs-crumbs, .is-style-eyebrow, .is-style-lead, .wp-block-buttons, .nbs-chips, .nbs-pricebox, .nbs-hero2__openings, .nbs-hero2__quote) {
	animation: nbs-fade-rise 0.9s var(--nbs-ease) both;
}

html.nbs-js:not(.nbs-calm) :is(.nbs-hero2, .nbs-pagehead, .nbs-svchero) .is-style-eyebrow { animation-delay: 0.05s; }

/* The lead is often the largest text on arrival (the LCP): it only moves. */
html.nbs-js:not(.nbs-calm) :is(.nbs-hero, .nbs-hero2, .nbs-pagehead, .nbs-svchero) .is-style-lead {
	animation: nbs-rise 1s var(--nbs-ease) 0.1s both;
}
html.nbs-js:not(.nbs-calm) :is(.nbs-hero2, .nbs-pagehead, .nbs-svchero) .wp-block-buttons { animation-delay: 0.26s; }
html.nbs-js:not(.nbs-calm) :is(.nbs-hero2, .nbs-pagehead, .nbs-svchero) .nbs-chips { animation-delay: 0.36s; }
html.nbs-js:not(.nbs-calm) :is(.nbs-hero2, .nbs-svchero) :is(.nbs-pricebox, .nbs-hero2__openings) { animation-delay: 0.46s; }
html.nbs-js:not(.nbs-calm) .nbs-hero2__quote { animation-delay: 0.9s; }

/* The short gold line of the eyebrow draws itself. */
html.nbs-js:not(.nbs-calm) :is(.nbs-hero, .nbs-hero2, .nbs-pagehead, .nbs-svchero) .is-style-eyebrow::before {
	transform-origin: left center;
	animation: nbs-line-in 1s var(--nbs-ease) 0.3s both;
}

html.nbs-js:not(.nbs-calm) .nbs-hero2--centered .is-style-eyebrow::before {
	transform-origin: right center;
}

html.nbs-js:not(.nbs-calm) .nbs-hero2--centered .is-style-eyebrow::after {
	transform-origin: left center;
	animation: nbs-line-in 1s var(--nbs-ease) 0.3s both;
}

/* Pictures come into focus (painted from the first frame, so the LCP holds). */
html.nbs-js:not(.nbs-calm) :is(.nbs-hero2__photo img, .nbs-hero__video video, .nbs-hero__photo img, .nbs-hero2__strip-photo img, .nbs-hero2__band video, .nbs-hero2__bg video) {
	animation: nbs-focus-in 1.5s var(--nbs-ease) both;
}

html.nbs-js:not(.nbs-calm) .nbs-hero2__strip-photo:nth-child(2) img { animation-delay: 0.12s; }
html.nbs-js:not(.nbs-calm) .nbs-hero2__strip-photo:nth-child(3) img { animation-delay: 0.24s; }

/* Frames and rings around the hero pictures settle in after them. */
html.nbs-js:not(.nbs-calm) .nbs-hero__visual::after,
html.nbs-js:not(.nbs-calm) .nbs-hero2--oval .nbs-hero2__media::before,
html.nbs-js:not(.nbs-calm) .nbs-hero2--night .nbs-hero2__media::before,
html.nbs-js:not(.nbs-calm) .nbs-hero2--frame .nbs-hero2__media::before {
	animation: nbs-ring-in 1.4s var(--nbs-ease) 0.35s both;
}

/* Band heroes (Builder gel, Contact): the photo is at most one screen tall
   and stays in view while a long copy column scrolls by. Stretched to the
   copy (1400 px on Builder gel) it was cropped to a narrow strip and looked
   soft. */
@media (min-width: 900px) {
	/* clip, not hidden: a hidden overflow would stop the photo sticking. */
	.nbs-main section.nbs-hero2--band:not(.nbs-hero2--right) {
		overflow: clip;
	}

	.nbs-hero2--band:not(.nbs-hero2--right) > .nbs-hero2__grid {
		align-items: start;
		min-height: 0;
	}

	.nbs-hero2--band:not(.nbs-hero2--right) .nbs-hero2__media {
		position: sticky;
		top: 0;
		height: 100vh;
		min-height: 560px;
		max-height: 1000px;
	}

	.nbs-hero2--band:not(.nbs-hero2--right) .nbs-hero2__copy {
		align-self: center;
	}
}

/* Collage prints and the phone drift up into place. */
html.nbs-js:not(.nbs-calm) .nbs-hero2__tile {
	animation: nbs-drift-up 1.1s var(--nbs-ease) both;
}

html.nbs-js:not(.nbs-calm) .nbs-hero2__tile--2 { animation-delay: 0.12s; }
html.nbs-js:not(.nbs-calm) .nbs-hero2__tile--3 { animation-delay: 0.24s; }

html.nbs-js:not(.nbs-calm) .nbs-phone {
	animation: nbs-drift-up 1.2s var(--nbs-ease) 0.1s both;
}

/* 2. Scroll reveals (theme.js adds the classes; nothing waits on a timer) ------- */

/* Section titles: each word rises out of its own line. */
.nbs-words .nbs-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding: 0.12em 0.14em 0.2em;
	margin: -0.12em -0.14em -0.2em;
}

.nbs-words .nbs-w__i {
	display: inline-block;
}

html.nbs-js:not(.nbs-calm) .nbs-words:not(.is-in) .nbs-w__i {
	transform: translateY(115%);
}

html.nbs-js:not(.nbs-calm) .nbs-words .nbs-w__i {
	transition: transform 1s var(--nbs-ease);
	transition-delay: calc(var(--w, 0) * 55ms);
}

/* Pictures: uncovered from the bottom while settling from a slight zoom
   (the frame holds the zoom in, so nothing sticks out sideways). */
html.nbs-js:not(.nbs-calm) .nbs-wipe {
	overflow: hidden;
}

html.nbs-js:not(.nbs-calm) .nbs-wipe img {
	clip-path: inset(100% 0 0 0);
	transform: scale(1.14);
	transition: clip-path 1.25s cubic-bezier(0.65, 0, 0.25, 1), transform 1.8s var(--nbs-ease);
}

/* theme.js removes the classes once the picture is uncovered, so shadows,
   rounded frames and hover zooms work as before. */
html.nbs-js:not(.nbs-calm) .nbs-wipe.is-in img {
	clip-path: inset(0 0 0 0);
	transform: none;
}

/* Eyebrow lines draw when their section comes into view. */
html.nbs-js:not(.nbs-calm) .is-style-eyebrow.nbs-r::before {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1s var(--nbs-ease) 0.25s;
}

html.nbs-js:not(.nbs-calm) .is-style-eyebrow.nbs-r.is-in::before {
	transform: scaleX(1);
}

/* Lines that join steps draw from the first to the last. */
html.nbs-js:not(.nbs-calm) .nbs-timeline__steps.nbs-drawline::before {
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform 1.8s var(--nbs-ease) 0.2s;
}

html.nbs-js:not(.nbs-calm) .nbs-steps__list.nbs-drawline::before {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.6s var(--nbs-ease) 0.2s;
}

html.nbs-js:not(.nbs-calm) .nbs-drawline.is-in::before {
	transform: none;
}

@media (max-width: 899px) {
	html.nbs-js:not(.nbs-calm) .nbs-steps__list.nbs-drawline::before {
		transform: scaleY(0);
		transform-origin: top center;
	}

	html.nbs-js:not(.nbs-calm) .nbs-steps__list.nbs-drawline.is-in::before {
		transform: none;
	}
}

/* Step numbers pop in one after another. */
html.nbs-js:not(.nbs-calm) .nbs-drawline:not(.is-in) :is(.nbs-step__num, .nbs-timeline__num) {
	opacity: 0;
	scale: 0.6;
}

html.nbs-js:not(.nbs-calm) .nbs-drawline :is(.nbs-step__num, .nbs-timeline__num) {
	transition: opacity 0.5s ease, scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.nbs-js:not(.nbs-calm) .nbs-drawline > :nth-child(2) :is(.nbs-step__num, .nbs-timeline__num) { transition-delay: 0.35s; }
html.nbs-js:not(.nbs-calm) .nbs-drawline > :nth-child(3) :is(.nbs-step__num, .nbs-timeline__num) { transition-delay: 0.7s; }
html.nbs-js:not(.nbs-calm) .nbs-drawline > :nth-child(4) :is(.nbs-step__num, .nbs-timeline__num) { transition-delay: 1.05s; }

/* 3. Ribbon ---------------------------------------------------------------------- */
@keyframes nbs-marquee {
	to { transform: translateX(-50%); }
}

.nbs-main .nbs-ribbon {
	margin-block: 0 !important;
	padding-block: clamp(1rem, 2vw, 1.5rem);
	overflow: hidden;
	background: var(--nbs-linen);
	border-block: 1px solid var(--nbs-line);
}

.nbs-ribbon__track {
	display: flex;
	width: max-content;
	animation: nbs-marquee 46s linear infinite;
}

.nbs-ribbon:hover .nbs-ribbon__track,
.nbs-ribbon.is-paused .nbs-ribbon__track {
	animation-play-state: paused;
}

.nbs-ribbon__list {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0 clamp(1.25rem, 3vw, 2.5rem) 0 0;
	list-style: none;
}

.nbs-ribbon__list li {
	margin: 0;
	font-family: var(--nbs-serif);
	font-size: clamp(1.45rem, 2.5vw, 2.25rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.25;
	white-space: nowrap;
	color: var(--nbs-ink);
}

.nbs-ribbon__list .nbs-ribbon__star {
	display: grid;
	color: var(--nbs-gold);
}

.nbs-ribbon__star svg {
	display: block;
	width: 0.6em;
	height: 0.6em;
}

.nbs-main .nbs-ribbon--dark {
	background:
		radial-gradient(40% 140% at 50% 50%, rgba(201, 154, 78, 0.18), transparent 70%),
		var(--nbs-night);
	border-color: transparent;
}

.nbs-ribbon--dark .nbs-ribbon__list li {
	color: var(--nbs-ivory);
}

.nbs-ribbon--dark .nbs-ribbon__list li:nth-child(4n + 3) {
	color: var(--nbs-glow);
}

.nbs-main .nbs-ribbon--outline {
	background: var(--nbs-ivory);
	border-color: transparent;
}

.nbs-ribbon--outline .nbs-ribbon__track {
	animation-direction: reverse;
	animation-duration: 54s;
}

.nbs-ribbon--outline .nbs-ribbon__list li:not(.nbs-ribbon__star) {
	font-size: clamp(2.2rem, 4.6vw, 4rem);
	font-style: normal;
	font-weight: 450;
	letter-spacing: -0.015em;
	color: transparent;
	-webkit-text-stroke: 1.2px var(--nbs-bronze);
}

.nbs-ribbon--outline .nbs-ribbon__list li:nth-child(4n + 1):not(.nbs-ribbon__star) {
	color: var(--nbs-ink);
	-webkit-text-stroke: 0;
	font-style: italic;
	font-weight: 400;
}

html.nbs-calm .nbs-ribbon__track {
	animation: none;
}

/* 4. Photo band --------------------------------------------------------------------- */
.nbs-main section.nbs-band {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: center;
	min-height: clamp(440px, 52vw, 640px);
	margin-block: 0;
	padding: clamp(4rem, 8vw, 7rem) var(--nbs-gutter);
	overflow: hidden;
	background: var(--nbs-night);
}

.nbs-band__photo {
	position: absolute !important;
	inset: 0;
	z-index: -2;
	max-width: none !important;
	margin: 0 !important;
}

.nbs-band__photo img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: 62% 50%;
}

.nbs-band::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(20, 12, 8, 0.9) 0%, rgba(20, 12, 8, 0.66) 38%, rgba(20, 12, 8, 0.12) 75%),
		linear-gradient(0deg, rgba(20, 12, 8, 0.4), rgba(20, 12, 8, 0) 40%);
	pointer-events: none;
}

.nbs-band__inner {
	position: relative;
	width: min(100%, var(--nbs-wide));
	margin-inline: auto !important;
}

.nbs-band__inner > * {
	max-width: 36rem;
	margin-block: 0 !important;
}

.nbs-band .is-style-eyebrow {
	color: var(--nbs-gold);
	margin-bottom: 1.25rem !important;
}

.nbs-band__line {
	font-family: var(--nbs-serif);
	font-size: clamp(2.3rem, 4.8vw, 4.4rem);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--nbs-ivory);
	text-wrap: balance;
}

.nbs-band__line em {
	display: inline;
	font-style: italic;
	color: var(--nbs-glow);
}

.nbs-band__text {
	margin-top: 1.4rem !important;
	font-size: 1.125rem;
	line-height: 1.6;
	color: rgba(251, 247, 241, 0.86);
}

.nbs-band__actions {
	margin-top: 2rem !important;
}

.nbs-band__actions .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--nbs-gold);
	color: var(--nbs-night);
}

.nbs-band__actions .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--nbs-glow);
}

html.nbs-js:not(.nbs-calm) .nbs-band.nbs-r-band .nbs-band__photo img {
	transform: scale(1.12);
	transition: transform 2.6s var(--nbs-ease);
}

html.nbs-js:not(.nbs-calm) .nbs-band.nbs-r-band.is-in .nbs-band__photo img {
	transform: none;
}

@media (max-width: 781px) {
	.nbs-main section.nbs-band {
		align-items: end;
		min-height: 560px;
		padding-top: 12rem;
	}

	.nbs-band__photo img {
		object-position: 70% 30%;
	}

	.nbs-band::after {
		background: linear-gradient(0deg, rgba(20, 12, 8, 0.94) 0%, rgba(20, 12, 8, 0.7) 52%, rgba(20, 12, 8, 0.15) 100%);
	}
}

/* 5. Turning badge -------------------------------------------------------------------- */
.nbs-orbit {
	position: absolute;
	z-index: 3;
	width: clamp(96px, 9vw, 124px);
	aspect-ratio: 1;
	color: var(--nbs-night);
	pointer-events: none;
}

.nbs-orbit::before {
	content: "";
	position: absolute;
	inset: 3%;
	z-index: -1;
	border-radius: 50%;
	background: rgba(255, 253, 249, 0.95);
	box-shadow: var(--nbs-shadow-lift), inset 0 0 0 1px rgba(201, 154, 78, 0.35);
}

.nbs-orbit__ring {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.nbs-orbit text {
	font-family: var(--nbs-serif);
	font-size: 9.6px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	fill: currentColor;
}

.nbs-orbit__heart {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30%;
	height: auto;
	color: var(--nbs-gold);
	translate: -50% -50%;
}

html.nbs-js:not(.nbs-calm) .nbs-orbit {
	animation: nbs-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s both;
}

html.nbs-js:not(.nbs-calm) .nbs-orbit__ring {
	animation: nbs-spin 30s linear infinite;
}

.nbs-hero__orbit {
	top: 7%;
	right: -2.25rem;
}

.nbs-hero2__orbit {
	right: -1.5rem;
	bottom: 10%;
}

@media (max-width: 899px) {
	.nbs-hero__orbit {
		top: 4%;
		right: 0.35rem;
	}
}

/* 6. Hover and shine ----------------------------------------------------------------- */
.nbs-card2,
.nbs-related__item,
.nbs-tier {
	transition: transform 0.5s var(--nbs-ease), box-shadow 0.5s var(--nbs-ease), border-color 0.5s var(--nbs-ease);
}

@media (hover: hover) {
	.nbs-card2:hover,
	.nbs-related__item:hover,
	.nbs-tier:hover {
		transform: translateY(-5px);
		box-shadow: var(--nbs-shadow-lift);
		border-color: rgba(201, 154, 78, 0.5);
	}

	.nbs-card2:hover .nbs-card2__photo img {
		transform: scale(1.06);
	}
}

/* "Book this" at the foot of photo cards, level across a row. */
.nbs-card2__actions {
	margin-top: auto !important;
	padding: 1.25rem 1.5rem 1.6rem;
}

.nbs-card2__actions .wp-block-button__link {
	min-height: 46px;
	padding: 0.7rem 1.4rem;
	font-size: 0.9375rem;
}

/* The footer invitation's "here." catches the light now and then. */
@keyframes nbs-shine {
	0%, 55% { background-position: 120% 0; }
	100% { background-position: -120% 0; }
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	/* The gradient repeats (glow at both ends), so the word is never left without colour. */
	html.nbs-js:not(.nbs-calm) .nbs-footer__cta-title em {
		background: linear-gradient(100deg, var(--nbs-glow) 30%, #fff6e2 48%, var(--nbs-glow) 66%) 120% 0 / 260% 100% repeat-x;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		animation: nbs-shine 6s ease-in-out 1.5s infinite;
	}
}

/* 7. Open times (Core block dsc/openings, live from LatePoint) ------------------------- */
.dsc-openings {
	--dsc-accent: var(--nbs-night);
	--dsc-on-accent: var(--nbs-ivory);
	--dsc-surface: var(--nbs-cream);
	--dsc-input-bg: #fffdf9;
	--dsc-radius: var(--nbs-radius);
	gap: 1.1rem;
}

.dsc-openings__title {
	font-family: var(--nbs-serif);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nbs-bronze);
}

.dsc-openings__live {
	font-size: 0.8125rem;
	color: var(--nbs-cocoa);
}

.dsc-openings__tab {
	font-weight: 500;
}

.dsc-openings__d {
	font-family: var(--nbs-serif);
	font-weight: 400;
	color: var(--nbs-ink);
}

.dsc-openings__wd {
	font-weight: 600;
	color: var(--nbs-bronze);
}

.dsc-openings--week .dsc-openings__item {
	border-color: var(--nbs-line);
	box-shadow: 0 1px 2px rgba(42, 27, 19, 0.04);
	transition: border-color 0.3s ease, transform 0.4s var(--nbs-ease), box-shadow 0.4s var(--nbs-ease);
}

.dsc-openings--week .dsc-openings__item.is-today {
	border-color: rgba(201, 154, 78, 0.65);
	box-shadow: inset 0 3px 0 var(--nbs-gold);
}

@media (hover: hover) {
	.dsc-openings--week .dsc-openings__item:not(.is-loading):not(.is-full):not(.is-closed):hover {
		transform: translateY(-3px);
		box-shadow: var(--nbs-shadow);
	}
}

.dsc-openings__time {
	font-size: 0.9375rem;
	font-weight: 500;
	background: var(--nbs-cream);
	border-color: var(--nbs-line);
	color: var(--nbs-ink);
}

.dsc-openings__more {
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: rgba(169, 122, 61, 0.45);
	text-underline-offset: 0.2em;
}

.dsc-openings__state {
	font-style: italic;
}

.dsc-openings__all {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 44px;
	font-weight: 600;
	color: var(--nbs-ink);
	text-decoration: none;
}

.dsc-openings__all::after {
	content: "";
	width: 1.05rem;
	height: 1.05rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.3s var(--nbs-ease);
}

.dsc-openings__all:hover {
	color: var(--nbs-bronze);
}

.dsc-openings__all:hover::after {
	transform: translateX(4px);
}

html.nbs-js:not(.nbs-calm) .dsc-openings.is-ready .dsc-openings__item {
	animation: nbs-fade-rise 0.6s var(--nbs-ease) both;
	animation-delay: calc(var(--dsc-i, 0) * 60ms);
}

/* On the home page, under the three steps. */
.nbs-steps__openings {
	margin-top: clamp(2.5rem, 5vw, 3.75rem) !important;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--nbs-line);
	border-radius: var(--nbs-radius-lg);
	background: rgba(255, 253, 249, 0.7);
	box-shadow: var(--nbs-shadow);
	text-align: left;
}

/* In a hero price box: the next few times as chips; title and tabs share a
   row so the box stays short. */
.nbs-pricebox__openings {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	margin-top: 1.1rem !important;
	padding-top: 1rem;
	border-top: 1px dashed rgba(201, 154, 78, 0.45);
	gap: 0.7rem 0.9rem;
}

.nbs-pricebox__openings > :not(.dsc-openings__head):not(.dsc-openings__tabs) {
	grid-column: 1 / -1;
}

.nbs-pricebox__openings .dsc-openings__head:only-child,
.nbs-pricebox__openings .dsc-openings__head + .dsc-openings__panel {
	grid-column: 1 / -1;
}

/* Right-aligned while they fit; an auto margin (not justify-content) so a
   row too narrow scrolls from the first tab instead of cutting it off. */
.nbs-pricebox__openings .dsc-openings__tab:first-child {
	margin-left: auto;
}

@media (max-width: 479px) {
	.nbs-pricebox__openings {
		grid-template-columns: minmax(0, 1fr);
	}

	.nbs-pricebox__openings .dsc-openings__tabs {
		grid-column: 1 / -1;
	}

	.nbs-pricebox__openings .dsc-openings__tab:first-child {
		margin-left: 0;
	}
}

.nbs-pricebox__openings .dsc-openings__head,
.nbs-hero2__openings .dsc-openings__head {
	justify-content: flex-start;
}

.nbs-pricebox__openings .dsc-openings__live,
.nbs-hero2__openings .dsc-openings__live {
	display: none;
}

.nbs-pricebox__openings .dsc-openings__time,
.nbs-hero2__openings .dsc-openings__time {
	min-height: 40px;
	padding: 0.3rem 0.85rem;
	background: #fffdf9;
}

.nbs-pricebox__openings .dsc-openings__tab {
	min-height: 36px;
	padding: 0.3rem 0.85rem;
	font-size: 0.875rem;
}

.nbs-pricebox__openings .dsc-openings__foot {
	margin-top: -0.25rem;
}

/* Price box on a dark hero (Dual form): the box is light, so the open times
   take the light-card colours, not the dark section's. */
.is-style-night .nbs-pricebox .dsc-openings {
	--dsc-border: var(--nbs-line);
	--dsc-muted: var(--nbs-cocoa);
	--dsc-accent: var(--nbs-night);
	--dsc-on-accent: var(--nbs-ivory);
	--dsc-focus: var(--nbs-bronze);
	color: var(--nbs-ink);
}

.is-style-night .nbs-pricebox .dsc-openings .dsc-openings__title {
	color: var(--nbs-bronze);
}

.is-style-night .nbs-pricebox .dsc-openings :is(.dsc-openings__time, .dsc-openings__all, .dsc-openings__tab:not([aria-selected="true"])) {
	color: var(--nbs-ink);
}

.is-style-night .nbs-pricebox .dsc-openings :is(.dsc-openings__when, .dsc-openings__msg, .dsc-openings__state) {
	color: var(--nbs-cocoa);
}

.is-style-night .nbs-pricebox .dsc-openings .dsc-openings__time:hover,
.is-style-night .nbs-pricebox .dsc-openings .dsc-openings__time:hover .dsc-openings__when {
	color: var(--nbs-ivory);
}

/* Russian manicure: one centred line under the chips (title, times, link). */
.nbs-hero2__openings {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.6rem 0.9rem;
	margin-top: 1.25rem !important;
}

.nbs-hero2__openings .dsc-openings__list {
	justify-content: center;
}

.nbs-hero2__openings .dsc-openings__foot {
	margin: 0;
}

/* A section of its own (pedicures). */
.nbs-openings-sec {
	background:
		radial-gradient(45% 60% at 100% 0%, rgba(235, 207, 156, 0.3), transparent 70%),
		var(--nbs-ivory);
}

.nbs-openings-sec .dsc-openings {
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem) !important;
}

/* 8. Booking bar (phones) --------------------------------------------------------------- */
.nbs-mbar {
	display: none;
}

@media (max-width: 781px) {
	.nbs-mbar {
		position: fixed;
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		left: 12px;
		z-index: 80;
		display: flex;
		gap: 4px;
		padding: 5px;
		border-radius: 999px;
		background: rgba(32, 20, 14, 0.94);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(235, 207, 156, 0.18);
		transform: translateY(calc(100% + 24px));
		transition: transform 0.45s var(--nbs-ease);
	}

	.nbs-mbar.is-on {
		transform: none;
	}

	body.latepoint-lightbox-active .nbs-mbar,
	html.nbs-menu-open .nbs-mbar,
	.nbs-mbar.is-typing {
		transform: translateY(calc(100% + 24px));
	}

	.nbs-mbar a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.4rem;
		min-height: 48px;
		border-radius: 999px;
		font-size: 0.9375rem;
		font-weight: 600;
		text-decoration: none;
	}

	.nbs-mbar__link {
		flex: 0 0 auto;
		padding: 0 0.95rem;
		color: var(--nbs-ivory);
	}

	.nbs-mbar__link .dsc-icon {
		color: var(--nbs-glow);
	}

	.nbs-mbar__book {
		flex: 1 1 auto;
		background: var(--nbs-gold);
		color: var(--nbs-night);
	}

	.nbs-mbar__book .dsc-icon {
		width: 18px;
		height: 18px;
	}

	html.nbs-calm .nbs-mbar {
		transition: none;
	}
}

/* 9. Booking page ------------------------------------------------------------------------ */
.nbs-main section.nbs-book {
	padding-top: clamp(2.5rem, 5vw, 4rem);
	background:
		radial-gradient(40% 50% at 0% 0%, rgba(235, 207, 156, 0.25), transparent 70%),
		var(--nbs-ivory);
}

.nbs-book .nbs-book__grid {
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.75fr);
	gap: clamp(1.5rem, 3.5vw, 3rem);
}

.nbs-book .nbs-book__form {
	padding: clamp(0.75rem, 2vw, 1.5rem);
}

.nbs-book__aside .nbs-book__photo img {
	aspect-ratio: 16 / 10 !important;
	border-radius: var(--nbs-radius-lg) !important;
}

@media (max-width: 1099px) {
	.nbs-book .nbs-book__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.nbs-book__aside {
		position: static;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nbs-book__aside .nbs-book__photo {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.nbs-book__aside {
		grid-template-columns: minmax(0, 1fr);
	}

	.nbs-book .nbs-book__form {
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
	}
}

/* 10. Gallery: bring a look --------------------------------------------------------------- */
.nbs-bring {
	background:
		radial-gradient(50% 60% at 100% 100%, rgba(235, 207, 156, 0.3), transparent 70%),
		var(--nbs-cream);
}

.nbs-bring__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}

.nbs-bring__grid > *,
.nbs-bring__steps > *,
.nbs-bring__step > * {
	margin-block: 0 !important;
}

.nbs-bring__copy > * + * {
	margin-top: 1.25rem !important;
}

.nbs-bring__copy .wp-block-buttons {
	margin-top: 2rem !important;
}

.nbs-bring__steps {
	display: grid;
	gap: 1rem;
}

.nbs-bring__step {
	position: relative;
	padding: 1.4rem 1.6rem 1.45rem 5rem;
	border: 1px solid var(--nbs-line);
	border-radius: var(--nbs-radius-lg);
	background: #fffdf9;
	box-shadow: var(--nbs-shadow);
}

.nbs-bring__step:nth-child(2) {
	margin-left: clamp(0rem, 3vw, 2.5rem) !important;
}

.nbs-bring__step:nth-child(3) {
	margin-left: clamp(0rem, 6vw, 5rem) !important;
}

.nbs-bring__num {
	position: absolute;
	top: 1.35rem;
	left: 1.45rem;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--nbs-night);
	color: var(--nbs-glow);
	font-family: var(--nbs-serif);
	font-size: 0.95rem;
}

.nbs-bring__title {
	font-size: clamp(1.25rem, 0.8vw + 1rem, 1.45rem);
}

.nbs-bring__text {
	margin-top: 0.35rem !important;
	color: var(--nbs-cocoa);
}

@media (max-width: 899px) {
	.nbs-bring__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.nbs-bring__step:nth-child(n) {
		margin-left: 0 !important;
	}
}

/* 11. Full menu as editorial rows (wide screens) ------------------------------------------ */
@media (min-width: 1000px) {
	.nbs-fullmenu .dsc-menu {
		display: grid;
		columns: auto;
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.25rem, 2.5vw, 2rem);
	}

	.nbs-fullmenu .dsc-menu__nav {
		margin-bottom: 0.5rem;
	}

	.nbs-fullmenu .dsc-menu__group.has-photo {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		grid-template-rows: auto auto 1fr;
		align-content: start;
		column-gap: clamp(2rem, 4vw, 3.5rem);
		margin: 0;
		padding: clamp(1rem, 1.6vw, 1.4rem) clamp(1.5rem, 3vw, 2.75rem) clamp(1rem, 1.6vw, 1.4rem) clamp(1rem, 1.6vw, 1.4rem);
	}

	.nbs-fullmenu .dsc-menu__group.has-photo > * {
		grid-column: 2;
	}

	.nbs-fullmenu .dsc-menu__group.has-photo > .dsc-menu__media {
		position: sticky;
		top: calc(var(--nbs-header-h) + 1.25rem);
		grid-column: 1;
		grid-row: 1 / span 3;
		align-self: start;
		margin: 0;
		overflow: hidden;
		border-radius: calc(var(--nbs-radius-lg) - 8px);
	}

	.nbs-fullmenu .dsc-menu__group.has-photo .dsc-menu__photo {
		aspect-ratio: 4 / 3;
		border-radius: 0;
	}

	.nbs-fullmenu .dsc-menu__group.has-photo:has(.dsc-menu__item:nth-child(3)) .dsc-menu__photo {
		aspect-ratio: 1;
	}

	.nbs-fullmenu .dsc-menu__group.has-photo:has(.dsc-menu__item:nth-child(5)) .dsc-menu__photo {
		aspect-ratio: 4 / 5;
	}

	.nbs-fullmenu .dsc-menu__group.has-photo > .dsc-menu__head {
		padding-top: clamp(1rem, 2vw, 1.75rem);
	}

	.nbs-fullmenu .dsc-menu__group.has-photo:nth-of-type(even) {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		padding-right: clamp(1rem, 1.6vw, 1.4rem);
		padding-left: clamp(1.5rem, 3vw, 2.75rem);
	}

	.nbs-fullmenu .dsc-menu__group.has-photo:nth-of-type(even) > * {
		grid-column: 1;
	}

	.nbs-fullmenu .dsc-menu__group.has-photo:nth-of-type(even) > .dsc-menu__media {
		grid-column: 2;
	}
}

/* 12. Page transitions, print -------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root) {
		animation: nbs-vt-out 0.22s ease both;
	}

	::view-transition-new(root) {
		animation: nbs-vt-in 0.5s var(--nbs-ease) both;
	}
}

/* No view-transition-name on the sticky header: it made the header paint as
   its own layer and page text showed through it (0.5.0 review). */

@keyframes nbs-vt-out {
	to { opacity: 0; }
}

@keyframes nbs-vt-in {
	from { opacity: 0; transform: translateY(14px); }
}

@media print {
	.nbs-r,
	.nbs-words .nbs-w__i,
	.nbs-wipe img {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}

	.nbs-mbar,
	.nbs-ribbon,
	.nbs-orbit {
		display: none !important;
	}
}