/*
 * Nobatino looks: the visual tokens a demo (or a buyer, through Site Editor → Styles) picks.
 *
 * Keyword tokens live in theme.json settings.custom.nbt.look (→ --wp--custom--nbt--look--*):
 *   texture      none | dots | grid | waves | grain | diagonal | terrazzo
 *   card         plain | arch | ticket | polaroid | tile | blob
 *   bands        none | accent | dark | alternating
 *   header-size  compact | regular | tall
 *   header-tone  base | accent | dark
 *   type-scale   calm | bold | poster
 *   scene        auto | blob | arch | circle | grid | none
 * functions.php turns them into body classes (nbt-texture-dots, nbt-card-arch, …); in the
 * editor canvas a tiny script does the same from the CSS variables, live.
 * Per block overrides are block styles: Group → is-style-nbt-band-accent|dark|none,
 * services/staff/testimonials/pricing → is-style-nbt-cut-<card>.
 *
 * Never letter-spacing on Persian; every colour is a palette token.
 */

/* ------------------------------------------------------------------ palette capture
   Bands redefine the palette variables inside a section; these keep the originals. */
body {
	--nbt-o-base: var(--wp--preset--color--base);
	--nbt-o-surface: var(--wp--preset--color--surface);
	--nbt-o-contrast: var(--wp--preset--color--contrast);
	--nbt-o-muted: var(--wp--preset--color--muted);
	--nbt-o-accent: var(--wp--preset--color--accent);
	--nbt-o-accent-ink: var(--wp--preset--color--accent-ink);
	--nbt-o-accent-soft: var(--wp--preset--color--accent-soft);
	--nbt-o-secondary: var(--wp--preset--color--secondary);
	--nbt-display-size: var(--wp--custom--nbt--display, clamp(2.375rem, 1.2rem + 3.6vw, 4.25rem));
	--nbt-display-xl-size: var(--wp--custom--nbt--display-xl, clamp(2.75rem, 1rem + 6.4vw, 6.75rem));
	--nbt-display-weight: 800;
	--nbt-display-lh: 1.32;
	--nbt-header-pad: clamp(0.85rem, 1.6vw, 1.25rem);
}

/* ------------------------------------------------------------------ section rhythm */
:where(.wp-block-post-content, .entry-content) > :is(.nbt-hero, .nbt-section, .nbt-cta) {
	margin-block: 0;
}

/* Header, page and footer meet edge to edge (each brings its own padding). */
.wp-site-blocks > :is(main, footer) {
	margin-block-start: 0;
}

:where(.wp-block-post-content) > .nbt-hero:first-child {
	margin-block-start: 0;
}

.nbt-hero {
	position: relative;
	overflow: clip;
}

/* ------------------------------------------------------------------ bands
   Accent band: the section sits on the accent colour; text, links and buttons invert. */
.wp-block-group.is-style-nbt-band-accent,
body.nbt-bands-accent .nbt-section:nth-child(3n+2 of .nbt-section):not([class*="is-style-nbt-band"], :has(+ .is-style-nbt-band-accent)),
body.nbt-bands-alternating .nbt-section:nth-child(4n+2 of .nbt-section):not([class*="is-style-nbt-band"], :has(+ .is-style-nbt-band-accent)),
body.nbt-header-tone-accent .nbt-header {
	--wp--preset--color--base: var(--nbt-o-accent);
	--wp--preset--color--surface: var(--nbt-o-accent);
	--wp--preset--color--surface-2: var(--nbt-o-accent);
	--wp--preset--color--contrast: var(--nbt-o-accent-ink);
	--wp--preset--color--muted: var(--nbt-o-accent-ink);
	--wp--preset--color--line: color-mix(in srgb, var(--nbt-o-accent-ink) 38%, var(--nbt-o-accent));
	--wp--preset--color--accent: var(--nbt-o-accent-ink);
	--wp--preset--color--accent-ink: var(--nbt-o-accent);
	--wp--preset--color--accent-soft: var(--nbt-o-accent);
	--wp--preset--color--secondary: var(--nbt-o-accent-ink);
	--nbt-scene-fill: color-mix(in srgb, var(--nbt-o-accent-ink) 16%, var(--nbt-o-accent));
	--nbt-scene-paper: color-mix(in srgb, var(--nbt-o-accent-ink) 34%, var(--nbt-o-accent));
	background-color: var(--nbt-o-accent) !important;
	color: var(--nbt-o-accent-ink) !important;
}

/* Dark band: the inverse of the design (contrast colour as the ground) — dark on light
   designs, light on dark ones. The pairs used stay the palette's AA-checked pairs. */
.wp-block-group.is-style-nbt-band-dark,
body.nbt-bands-dark .nbt-section:nth-child(3n+2 of .nbt-section):not([class*="is-style-nbt-band"]),
body.nbt-bands-alternating .nbt-section:nth-child(4n of .nbt-section):not([class*="is-style-nbt-band"]),
body.nbt-header-tone-dark .nbt-header {
	--wp--preset--color--base: var(--nbt-o-contrast);
	--wp--preset--color--surface: color-mix(in srgb, var(--nbt-o-contrast) 90%, var(--nbt-o-base));
	--wp--preset--color--surface-2: color-mix(in srgb, var(--nbt-o-contrast) 82%, var(--nbt-o-base));
	--wp--preset--color--contrast: var(--nbt-o-base);
	--wp--preset--color--muted: color-mix(in srgb, var(--nbt-o-base) 80%, var(--nbt-o-contrast));
	--wp--preset--color--line: color-mix(in srgb, var(--nbt-o-base) 26%, var(--nbt-o-contrast));
	--wp--preset--color--accent: var(--nbt-o-accent-soft);
	--wp--preset--color--accent-ink: var(--nbt-o-contrast);
	--wp--preset--color--accent-soft: color-mix(in srgb, var(--nbt-o-accent-soft) 24%, var(--nbt-o-contrast));
	--wp--preset--color--secondary: var(--nbt-o-accent-soft);
	background-color: var(--nbt-o-contrast) !important;
	color: var(--nbt-o-base) !important;
}

/* Buttons on a band: outline buttons take the band's text colour. */
:is(.is-style-nbt-band-accent, .is-style-nbt-band-dark) .wp-block-button.is-style-outline > .wp-element-button,
body:is(.nbt-bands-accent, .nbt-bands-dark, .nbt-bands-alternating) .nbt-section .wp-block-button.is-style-outline > .wp-element-button {
	color: var(--wp--preset--color--contrast);
	border-color: currentColor;
}

/* ------------------------------------------------------------------ textures
   One layer per section (::before), tinted with the section's own text colour, so it reads
   on light, dark and banded sections alike. The mask is the only per-texture value. */
body.nbt-texture-dots {
	--nbt-tex: radial-gradient(circle, #000 1.4px, transparent 1.9px);
	--nbt-tex-size: 22px 22px;
	--nbt-tex-strength: 16%;
}

body.nbt-texture-grid {
	--nbt-tex: linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px);
	--nbt-tex-size: 32px 32px;
	--nbt-tex-strength: 9%;
}

body.nbt-texture-diagonal {
	--nbt-tex: repeating-linear-gradient(-45deg, #000 0 1.5px, transparent 1.5px 14px);
	--nbt-tex-size: auto;
	--nbt-tex-strength: 9%;
}

body.nbt-texture-waves {
	--nbt-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='22'%3E%3Cpath d='M0 11q7-8 14 0t14 0 14 0 14 0' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
	--nbt-tex-size: 56px 22px;
	--nbt-tex-strength: 13%;
}

body.nbt-texture-grain {
	--nbt-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.2 -1'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url%28%23n%29'/%3E%3C/svg%3E");
	--nbt-tex-size: 180px 180px;
	--nbt-tex-strength: 15%;
}

body.nbt-texture-terrazzo {
	--nbt-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cpath d='M18 16l11-4 4 9-10 5zM98 28l14 2-3 11-12-4zM132 92l9 7-7 8-7-7zM28 122l13-1 2 9-14 2zM76 110l7-7 7 7-7 5zM60 64l9-2 1 8-9 1zM150 150l7-5 4 7-8 3z'/%3E%3Ccircle cx='146' cy='24' r='3'/%3E%3Ccircle cx='12' cy='78' r='2.5'/%3E%3Ccircle cx='112' cy='140' r='3.5'/%3E%3Ccircle cx='84' cy='160' r='2'/%3E%3Ccircle cx='164' cy='60' r='2'/%3E%3C/svg%3E");
	--nbt-tex-size: 170px 170px;
	--nbt-tex-strength: 20%;
}

body[class*="nbt-texture-"]:not(.nbt-texture-none) :is(.nbt-hero, .nbt-section, .nbt-cta, .nbt-footer, .nbt-header) {
	position: relative;
	isolation: isolate;
}

body[class*="nbt-texture-"]:not(.nbt-texture-none) :is(.nbt-hero, .nbt-section, .nbt-cta, .nbt-footer, .nbt-header)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: color-mix(in srgb, currentColor var(--nbt-tex-strength, 12%), transparent);
	-webkit-mask-image: var(--nbt-tex);
	mask-image: var(--nbt-tex);
	-webkit-mask-size: var(--nbt-tex-size);
	mask-size: var(--nbt-tex-size);
}

/* The header stays above later sections (its phone menu opens over them). */
.nbt-header {
	position: relative;
	z-index: 20;
}

/* ------------------------------------------------------------------ header */
.nbt-header {
	padding-block: var(--nbt-header-pad);
}

body.nbt-header-compact {
	--nbt-header-pad: 0.5rem;
}

body.nbt-header-tall {
	--nbt-header-pad: clamp(1.25rem, 3vw, 2.25rem);
}

body.nbt-header-tall .nbt-header .wp-block-site-title {
	font-size: var(--wp--preset--font-size--x-large);
}

.nbt-header .wp-block-navigation {
	font-size: max(1rem, var(--wp--preset--font-size--medium));
	gap: clamp(1rem, 2vw, 2rem);
}

.nbt-header .wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.4rem;
}

.nbt-header .wp-element-button {
	font-size: 1rem;
	padding: 0.7rem 1.4rem;
}

body.nbt-header-compact .nbt-header .wp-element-button {
	padding: 0.55rem 1.15rem;
}

.nbt-header-note {
	margin-block: 0;
}

/* A site title on a coloured header follows the header's text colour. */
.has-background .wp-block-site-title a {
	color: inherit;
}

@media (max-width: 599px) {
	.nbt-header .wp-block-group:has(> .wp-block-site-title):has(> .wp-block-buttons) {
		flex-wrap: nowrap;
		gap: 0.75rem;
	}

	.nbt-header .wp-block-group:has(> .wp-block-site-title) > .wp-block-site-title {
		flex: 1 1 auto;
		min-inline-size: 0;
		font-size: var(--wp--preset--font-size--large);
	}

	.nbt-header .wp-block-group:has(> .wp-block-site-title) > .wp-block-buttons {
		flex-shrink: 0;
	}

	.nbt-header .wp-element-button {
		padding: 0.6rem 1rem;
	}
}

/* ------------------------------------------------------------------ display type */
/* Inside a hero column the headline also scales with the column (cqi), so long Persian
   words never have to break. */
.nbt-hero .wp-block-column {
	container-type: inline-size;
}

.nbt-display {
	font-size: min(var(--nbt-display-size), 12.5cqi) !important;
	font-weight: var(--nbt-display-weight);
	line-height: var(--nbt-display-lh);
	overflow-wrap: break-word;
	text-wrap: balance;
}

.nbt-display--xl {
	font-size: min(var(--nbt-display-xl-size), 13cqi) !important;
	line-height: 1.22;
}

body.nbt-type-bold {
	--nbt-display-weight: 900;
}

body.nbt-type-bold :where(h2, h3) {
	font-weight: 800;
}

body.nbt-type-poster {
	--nbt-display-weight: 900;
	--nbt-display-lh: 1.24;
}

body.nbt-type-poster :where(h2) {
	font-weight: 900;
	line-height: 1.3;
}

/* ------------------------------------------------------------------ small hero parts */
.nbt-eyebrow {
	inline-size: fit-content;
	max-inline-size: 100%;
	margin-block-end: 0;
	padding: 0.3rem 0.95rem;
	border-radius: var(--wp--custom--radius--pill, 999px);
	border: var(--wp--custom--border--width, 1px) solid color-mix(in srgb, currentColor 22%, transparent);
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.nbt-eyebrow::before {
	content: "";
	display: inline-block;
	inline-size: 0.55em;
	block-size: 0.55em;
	margin-inline-end: 0.5em;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	vertical-align: 0.1em;
}

.nbt-lead {
	max-inline-size: 40rem;
}

.nbt-chips {
	gap: 0.5rem;
}

.nbt-chip {
	margin: 0;
	padding: 0.35rem 0.85rem;
	border: var(--wp--custom--border--width, 1px) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
}

.nbt-chip::before {
	content: "";
	display: inline-block;
	inline-size: 0.45em;
	block-size: 0.8em;
	margin-inline-end: 0.5em;
	border: solid var(--wp--preset--color--accent);
	border-width: 0 0.16em 0.16em 0;
	transform: rotate(45deg) translateY(-0.15em);
}

.nbt-stats {
	gap: 0.75rem;
	margin-block-start: var(--wp--preset--spacing--50);
}

.nbt-stat {
	padding: 1rem 1.25rem;
	border-radius: var(--wp--custom--nbt--card-radius, 14px);
	background: var(--wp--preset--color--surface);
	border: var(--wp--custom--border--width, 1px) solid var(--wp--preset--color--line);
}

.nbt-stat p {
	margin: 0;
}

.nbt-stat strong {
	color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------------ scenes
   A bundled hero.svg composed on a big backdrop: shape + ring + dot patch + spark, all in
   palette colours. Size 300px (phone) to ~560px (1440). Shape: the wrapper's is-<shape>
   class, else blob; the look token scene (body class nbt-scene-<shape>) overrides both. */
.nbt-scene {
	--nbt-scene-r: 58% 42% 47% 53% / 46% 52% 48% 54%;
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	inline-size: 100%;
	max-inline-size: 640px;
	aspect-ratio: 6 / 5;
	margin-inline: auto;
}

.nbt-scene > span {
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

.nbt-scene__shape {
	inset: 5% 4% 3%;
	background-color: var(--nbt-scene-fill, var(--wp--preset--color--accent-soft));
	border-radius: var(--nbt-scene-r);
	transform: rotate(-4deg);
}

.nbt-scene__ring {
	inline-size: 30%;
	aspect-ratio: 1;
	inset-block-start: 0;
	inset-inline-start: 2%;
	border: 3px solid var(--wp--preset--color--secondary);
	border-radius: 50%;
}

.nbt-scene__dots {
	inline-size: 30%;
	block-size: 24%;
	inset-block-end: 0;
	inset-inline-end: 0;
	background-image: radial-gradient(circle, var(--wp--preset--color--accent) 2.2px, transparent 2.8px);
	background-size: 18px 18px;
	opacity: 0.55;
}

.nbt-scene::after {
	content: "";
	position: absolute;
	z-index: -1;
	inline-size: 9%;
	aspect-ratio: 1;
	inset-block-start: 14%;
	inset-inline-end: 6%;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

.nbt-scene .nbt-art {
	/* The art's soft fills become paper cut-outs on the backdrop. */
	--wp--preset--color--accent-soft: var(--nbt-scene-paper, var(--wp--preset--color--base));
	inline-size: 90%;
	background: none;
	overflow: visible;
}

.nbt-scene .nbt-art svg {
	color: var(--wp--preset--color--contrast);
	filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent));
}

/* Shapes. */
.nbt-scene.is-arch,
body.nbt-scene-arch .nbt-scene:not(.is-none) {
	--nbt-scene-r: 50% 50% 1.5rem 1.5rem / 42% 42% 1.5rem 1.5rem;
}

.nbt-scene.is-arch .nbt-scene__shape,
body.nbt-scene-arch .nbt-scene:not(.is-none) .nbt-scene__shape {
	inset: 0 16% 0;
	transform: none;
}

.nbt-scene.is-arch .nbt-scene__ring,
body.nbt-scene-arch .nbt-scene:not(.is-none) .nbt-scene__ring {
	inline-size: auto;
	aspect-ratio: auto;
	inset: 6% 10% -2% 22%;
	border-radius: 50% 50% 1.5rem 1.5rem / 42% 42% 1.5rem 1.5rem;
}

.nbt-scene.is-circle .nbt-scene__shape,
body.nbt-scene-circle .nbt-scene:not(.is-none) .nbt-scene__shape {
	inset: 4% auto;
	block-size: 92%;
	aspect-ratio: 1;
	border-radius: 50%;
	transform: none;
}

.nbt-scene.is-circle .nbt-scene__ring,
body.nbt-scene-circle .nbt-scene:not(.is-none) .nbt-scene__ring {
	inline-size: auto;
	block-size: 100%;
	inset-block-start: 0;
	inset-inline-start: auto;
	border-style: dashed;
}

.nbt-scene.is-grid .nbt-scene__shape,
body.nbt-scene-grid .nbt-scene:not(.is-none) .nbt-scene__shape {
	inset: 6% 3%;
	border-radius: var(--wp--custom--radius--large, 14px);
	transform: rotate(-2deg);
	background-image:
		linear-gradient(color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent) 1px, transparent 1px);
	background-size: 28px 28px;
}

.nbt-scene.is-grid .nbt-scene__ring,
body.nbt-scene-grid .nbt-scene:not(.is-none) .nbt-scene__ring {
	border-radius: var(--wp--custom--radius--medium, 10px);
	transform: rotate(12deg);
}

.nbt-scene.is-blob .nbt-scene__shape,
body.nbt-scene-blob .nbt-scene:not(.is-none) .nbt-scene__shape {
	inset: 5% 4% 3%;
	aspect-ratio: auto;
	block-size: auto;
	border-radius: 58% 42% 47% 53% / 46% 52% 48% 54%;
	background-image: none;
	transform: rotate(-4deg);
}

.nbt-scene.is-none > span,
.nbt-scene.is-none::after,
body.nbt-scene-none .nbt-scene > span,
body.nbt-scene-none .nbt-scene::after {
	display: none;
}

/* ------------------------------------------------------------------ heroes */
.nbt-hero .wp-block-columns.alignwide {
	gap: clamp(1.5rem, 4.5vw, 4.5rem);
	margin-block: 0;
}

.nbt-hero .wp-block-column > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.nbt-hero .wp-block-column > .wp-block-heading {
	margin-block-start: var(--wp--preset--spacing--40);
}

.nbt-hero .nbt-hero-media .nbt-scene {
	min-block-size: clamp(260px, 36vw, 560px);
	max-inline-size: 680px;
}

.nbt-hero .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Booking-first: the live form is the hero. */
.nbt-hero--booking .nbt-hero-form-col .nbt-shell {
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--raised, 0 8px 24px rgb(0 0 0 / 10%));
}

.nbt-hero--booking .nbt-scene {
	max-inline-size: 460px;
	margin-inline: 0;
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Card over a framed scene. */
.nbt-frame {
	padding: clamp(1rem, 3vw, 2.5rem);
	background: var(--wp--preset--color--accent-soft);
	border-radius: var(--wp--custom--nbt--card-radius, 14px);
	overflow: hidden;
}

.nbt-frame .nbt-scene {
	min-block-size: clamp(260px, 34vw, 520px);
}

.nbt-hero-card {
	position: relative;
	z-index: 1;
	box-shadow: var(--wp--preset--shadow--raised, 0 8px 24px rgb(0 0 0 / 10%));
	border-radius: var(--wp--custom--nbt--card-radius, 14px);
}

@media (min-width: 782px) {
	.nbt-hero--card-over .nbt-hero-card {
		margin-inline-start: -22%;
	}
}

/* Type-only: oversized name, with two big rings in the corner. */
.nbt-hero--type {
	padding-block: clamp(3rem, 8vw, 7rem) !important;
}

.nbt-hero--type::after {
	content: "";
	position: absolute;
	z-index: 0;
	inline-size: clamp(180px, 30vw, 460px);
	aspect-ratio: 1;
	inset-block-end: -34%;
	inset-inline-end: -10%;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-soft);
	box-shadow: 0 0 0 clamp(14px, 2.4vw, 34px) var(--wp--preset--color--base), 0 0 0 clamp(17px, 2.7vw, 38px) var(--wp--preset--color--secondary);
}

.nbt-hero--type > * {
	position: relative;
	z-index: 1;
}

.nbt-hero-foot {
	gap: var(--wp--preset--spacing--50);
	margin-block-start: var(--wp--preset--spacing--60);
}

/* Full-bleed half: the scene fills half the screen edge to edge. */
/* Only the block margins: the inline ones are WordPress's negative root padding that lets
   the columns reach both screen edges. */
.nbt-hero--photo .wp-block-columns.alignfull {
	gap: 0;
	margin-block: 0;
}

.nbt-hero-bleed {
	display: grid;
	place-items: center;
	padding: clamp(1.5rem, 4vw, 3rem);
	background: var(--wp--preset--color--accent-soft);
	min-block-size: clamp(320px, 52vw, 680px);
}

.nbt-hero-text {
	padding: clamp(2rem, 5vw, 5rem) var(--wp--style--root--padding-right, 1.5rem);
	max-inline-size: 640px;
}

/* Gradient band. */
.nbt-hero--gradient {
	background-image:
		radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--nbt-o-secondary) 45%, transparent), transparent 42%),
		linear-gradient(225deg, var(--nbt-o-accent) 30%, color-mix(in oklab, var(--nbt-o-accent) 72%, var(--nbt-o-secondary)));
}

/* Poster: oversized type on a full-colour field. */
.nbt-hero--poster {
	padding-block: clamp(2.5rem, 6vw, 5.5rem) !important;
}

.nbt-hero--poster .nbt-display {
	max-inline-size: 18ch;
}

.nbt-hero--poster .nbt-hero-media .nbt-scene {
	min-block-size: clamp(220px, 22vw, 340px);
	max-inline-size: 460px;
}

/* On wide screens the poster headline is capped by the viewport too, so the lead and the
   booking button stay above the fold under a two-line headline. */
@media (min-width: 782px) {
	.nbt-hero--poster .nbt-display--xl {
		font-size: min(var(--nbt-display-xl-size), 13cqi, 6.6vw) !important;
	}
}

@media (max-width: 781px) {
	.nbt-hero .nbt-hero-media .nbt-scene {
		min-block-size: 0;
		max-inline-size: 420px;
	}

	.nbt-hero--booking .nbt-scene {
		display: none;
	}

	.nbt-hero-bleed {
		min-block-size: 0;
	}
}

/* Sections: card grids span the wide width. */
.nbt-section-head {
	margin-block-end: var(--wp--preset--spacing--50);
}

.nbt-section-head > * {
	margin-block: 0;
}

.nbt-section-head > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.nbt-step-num {
	display: grid;
	place-items: center;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-soft);
	line-height: 1;
}

.nbt-about .nbt-scene {
	max-inline-size: 520px;
}

/* ------------------------------------------------------------------ card cuts
   Cards: service, team and testimonial cards from the plugin, theme cards (.nbt-card) and
   hero frames (.nbt-frame). Team portraits get the cut on the photo. */
body.nbt-card-arch .nbt-blk:not([class*="is-style-nbt-cut-"]) :is(.nbt-blk-card, .nbt-blk-highlight),
.nbt-blk.is-style-nbt-cut-arch :is(.nbt-blk-card, .nbt-blk-highlight),
body.nbt-card-arch .nbt-card {
	border-radius: 50% 50% var(--wp--custom--radius--medium, 10px) var(--wp--custom--radius--medium, 10px) / 5rem 5rem var(--wp--custom--radius--medium, 10px) var(--wp--custom--radius--medium, 10px);
	padding-block-start: 3rem;
}

body.nbt-card-arch .nbt-blk:not([class*="is-style-nbt-cut-"]) .nbt-blk-card :is(.nbt-art, .nbt-blk-card-img),
.nbt-blk.is-style-nbt-cut-arch .nbt-blk-card :is(.nbt-art, .nbt-blk-card-img) {
	border-radius: 50% 50% var(--wp--custom--radius--small, 6px) var(--wp--custom--radius--small, 6px) / 40% 40% var(--wp--custom--radius--small, 6px) var(--wp--custom--radius--small, 6px);
}

body.nbt-card-arch .nbt-blk:not([class*="is-style-nbt-cut-"]) .nbt-blk-portrait .nbt-blk-photo,
.nbt-blk.is-style-nbt-cut-arch .nbt-blk-portrait .nbt-blk-photo {
	aspect-ratio: 4 / 5 !important;
	border-radius: 50% 50% var(--wp--custom--radius--medium, 10px) var(--wp--custom--radius--medium, 10px) / 38% 38% var(--wp--custom--radius--medium, 10px) var(--wp--custom--radius--medium, 10px) !important;
}

body.nbt-card-arch .nbt-frame {
	border-radius: 50% 50% var(--wp--custom--radius--large, 14px) var(--wp--custom--radius--large, 14px) / 34% 34% var(--wp--custom--radius--large, 14px) var(--wp--custom--radius--large, 14px);
	padding-block-start: clamp(3rem, 8vw, 6rem);
}

body.nbt-card-ticket .nbt-blk:not([class*="is-style-nbt-cut-"]) :is(.nbt-blk-card, .nbt-blk-highlight),
.nbt-blk.is-style-nbt-cut-ticket :is(.nbt-blk-card, .nbt-blk-highlight),
body.nbt-card-ticket .nbt-card,
body.nbt-card-ticket .nbt-frame {
	border-style: dashed;
	border-radius: var(--wp--custom--radius--small, 6px);
	-webkit-mask: radial-gradient(circle 15px at 0 50%, transparent 98%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 15px at 100% 50%, transparent 98%, #000) 100% 0 / 51% 100% no-repeat;
	mask: radial-gradient(circle 15px at 0 50%, transparent 98%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 15px at 100% 50%, transparent 98%, #000) 100% 0 / 51% 100% no-repeat;
	padding-inline: 28px;
}

body.nbt-card-ticket .nbt-blk:not([class*="is-style-nbt-cut-"]) .nbt-blk-portrait .nbt-blk-photo,
.nbt-blk.is-style-nbt-cut-ticket .nbt-blk-portrait .nbt-blk-photo {
	border-radius: var(--wp--custom--radius--small, 6px) !important;
	-webkit-mask: radial-gradient(circle 14px at 50% 0, transparent 98%, #000) 0 0 / 100% 51% no-repeat, radial-gradient(circle 14px at 50% 100%, transparent 98%, #000) 0 100% / 100% 51% no-repeat;
	mask: radial-gradient(circle 14px at 50% 0, transparent 98%, #000) 0 0 / 100% 51% no-repeat, radial-gradient(circle 14px at 50% 100%, transparent 98%, #000) 0 100% / 100% 51% no-repeat;
}

body.nbt-card-polaroid .nbt-blk:not([class*="is-style-nbt-cut-"]) :is(.nbt-blk-card, .nbt-blk-highlight),
.nbt-blk.is-style-nbt-cut-polaroid :is(.nbt-blk-card, .nbt-blk-highlight),
body.nbt-card-polaroid .nbt-card,
body.nbt-card-polaroid .nbt-frame {
	border: 0;
	border-radius: 3px;
	padding: 12px 12px 2.75rem;
	background: var(--wp--preset--color--base);
	box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 0 12px 28px rgb(0 0 0 / 14%);
	transform: rotate(-1.3deg);
}

body.nbt-card-polaroid .nbt-blk:not([class*="is-style-nbt-cut-"]) :is(li.nbt-blk-card:nth-child(even), li:nth-child(even) > figure.nbt-blk-card),
.nbt-blk.is-style-nbt-cut-polaroid :is(li.nbt-blk-card:nth-child(even), li:nth-child(even) > figure.nbt-blk-card) {
	transform: rotate(1.1deg);
}

body.nbt-card-polaroid .nbt-blk:not([class*="is-style-nbt-cut-"]) .nbt-blk-card :is(.nbt-art, .nbt-blk-card-img),
.nbt-blk.is-style-nbt-cut-polaroid .nbt-blk-card :is(.nbt-art, .nbt-blk-card-img) {
	border-radius: 0;
}

body.nbt-card-polaroid .nbt-blk:not([class*="is-style-nbt-cut-"]) .nbt-blk-portrait .nbt-blk-photo,
.nbt-blk.is-style-nbt-cut-polaroid .nbt-blk-portrait .nbt-blk-photo {
	border-radius: 2px !important;
	aspect-ratio: 1 !important;
	border: 10px solid var(--wp--preset--color--base);
	border-block-end-width: 2.25rem;
	box-shadow: 0 10px 24px rgb(0 0 0 / 16%);
	transform: rotate(-1.5deg);
}

body.nbt-card-tile .nbt-blk:not([class*="is-style-nbt-cut-"]) :is(.nbt-blk-card, .nbt-blk-highlight),
.nbt-blk.is-style-nbt-cut-tile :is(.nbt-blk-card, .nbt-blk-highlight),
body.nbt-card-tile .nbt-card,
body.nbt-card-tile .nbt-frame {
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	box-shadow: 6px 6px 0 var(--wp--preset--color--accent);
}

body.nbt-card-tile .nbt-blk:not([class*="is-style-nbt-cut-"]) .nbt-blk-card :is(.nbt-art, .nbt-blk-card-img),
.nbt-blk.is-style-nbt-cut-tile .nbt-blk-card :is(.nbt-art, .nbt-blk-card-img) {
	border-radius: 0;
}

body.nbt-card-tile .nbt-blk:not([class*="is-style-nbt-cut-"]) .nbt-blk-portrait .nbt-blk-photo,
.nbt-blk.is-style-nbt-cut-tile .nbt-blk-portrait .nbt-blk-photo {
	border-radius: 0 !important;
	border: 2px solid var(--wp--preset--color--contrast);
	box-shadow: 6px 6px 0 var(--wp--preset--color--accent);
}

body.nbt-card-blob .nbt-blk:not([class*="is-style-nbt-cut-"]) :is(.nbt-blk-card, .nbt-blk-highlight),
.nbt-blk.is-style-nbt-cut-blob :is(.nbt-blk-card, .nbt-blk-highlight),
body.nbt-card-blob .nbt-card {
	border-radius: 4.5rem 1.25rem 5rem 1.5rem / 3.5rem 1.5rem 4rem 1.25rem;
	padding: 28px 26px 32px;
}

body.nbt-card-blob .nbt-blk:not([class*="is-style-nbt-cut-"]) .nbt-blk-card :is(.nbt-art, .nbt-blk-card-img),
.nbt-blk.is-style-nbt-cut-blob .nbt-blk-card :is(.nbt-art, .nbt-blk-card-img) {
	border-radius: 2.25rem 0.75rem 2.5rem 1rem / 2rem 1rem 2.25rem 0.75rem;
}

body.nbt-card-blob .nbt-blk:not([class*="is-style-nbt-cut-"]) .nbt-blk-portrait .nbt-blk-photo,
.nbt-blk.is-style-nbt-cut-blob .nbt-blk-portrait .nbt-blk-photo {
	border-radius: 58% 42% 47% 53% / 46% 52% 48% 54% !important;
}

body.nbt-card-blob .nbt-frame {
	border-radius: 58% 42% 47% 53% / 46% 52% 48% 54%;
}


/* ------------------------------------------------------------------ service cards without a picture
   In a grid that mixes services with and without a picture, a service with neither photo
   nor illustration is not stretched to a picture card's height and left empty: the
   picture cards fill the grid first, and the text-only ones follow as compact full-width
   rows (name and description, then duration and price, then the button), marked by an
   accent edge. A grid with no pictures at all keeps its uniform cards. */
.nbt-blk-services .nbt-blk-cards:has(> .nbt-blk-card > :is(.nbt-art, .nbt-blk-card-img)) > .nbt-blk-card:not(:has(> .nbt-art, > .nbt-blk-card-img)) {
	order: 1;
	border-inline-start: 0.4rem solid var(--wp--preset--color--accent);
}

@media (min-width: 601px) {
	.nbt-blk-services .nbt-blk-cards:has(> .nbt-blk-card > :is(.nbt-art, .nbt-blk-card-img)) > .nbt-blk-card:not(:has(> .nbt-art, > .nbt-blk-card-img)) {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		align-items: center;
		column-gap: clamp(1rem, 3vw, 2.5rem);
		row-gap: 0.25rem;
		padding-block: 1.1rem;
		padding-inline: 1.5rem;
		transform: none;
	}

	/* Arch and blob cuts read as stray curves on a wide, short row: a plain rounded row. */
	body:is(.nbt-card-arch, .nbt-card-blob) .nbt-blk-services .nbt-blk-cards:has(> .nbt-blk-card > :is(.nbt-art, .nbt-blk-card-img)) > .nbt-blk-card:not(:has(> .nbt-art, > .nbt-blk-card-img)) {
		border-radius: var(--wp--custom--radius--large, 14px);
	}

	.nbt-blk-services .nbt-blk-cards:has(> .nbt-blk-card > :is(.nbt-art, .nbt-blk-card-img)) > .nbt-blk-card:not(:has(> .nbt-art, > .nbt-blk-card-img)) > * {
		grid-column: 1;
		margin: 0;
	}

	.nbt-blk-services .nbt-blk-cards:has(> .nbt-blk-card > :is(.nbt-art, .nbt-blk-card-img)) > .nbt-blk-card:not(:has(> .nbt-art, > .nbt-blk-card-img)) > .nbt-blk-line {
		grid-column: 2;
		grid-row: 1 / span 2;
		flex-direction: column;
		align-items: flex-end;
		gap: 0.15rem;
	}

	.nbt-blk-services .nbt-blk-cards:has(> .nbt-blk-card > :is(.nbt-art, .nbt-blk-card-img)) > .nbt-blk-card:not(:has(> .nbt-art, > .nbt-blk-card-img)) > .nbt-blk-card-action {
		grid-column: 3;
		grid-row: 1 / span 2;
		margin: 0 !important;
		padding: 0;
	}
}

/* ------------------------------------------------------------------ category headings
   Category titles in service lists, price columns and price tables read as sub-headings
   at every type scale, not as small muted captions. */
.nbt-blk :is(.nbt-blk-group, .nbt-blk-cat > th) {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
	font-weight: 700;
	line-height: 1.45;
	color: var(--wp--preset--color--contrast);
}

.nbt-blk-services .nbt-blk-group {
	margin-block: 1.75rem 0.6rem;
}

.nbt-blk-services .nbt-blk-group:first-child {
	margin-block-start: 0;
}

body.nbt-type-calm .nbt-blk :is(.nbt-blk-group, .nbt-blk-cat > th) {
	font-weight: 600;
}

body.nbt-type-poster .nbt-blk :is(.nbt-blk-group, .nbt-blk-cat > th) {
	font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.75rem);
	font-weight: 800;
}

/* ------------------------------------------------------------------ team placeholders
   A team member without a photo shows the initial in a palette-coloured shape that
   follows the site's card cut, not a bare letter. */
.nbt-blk-staff .nbt-blk-initial {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(circle at 80% 18%, var(--wp--preset--color--accent) 0 3.5%, transparent 4%),
		linear-gradient(150deg, var(--wp--preset--color--accent-soft) 0%, color-mix(in srgb, var(--wp--preset--color--secondary) 38%, var(--wp--preset--color--accent-soft)) 100%);
	color: var(--wp--preset--color--accent);
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--wp--preset--color--accent) 28%, transparent);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	line-height: 1;
}

.nbt-blk-staff .nbt-blk-initial::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-inline-start: -18%;
	inset-block-end: -28%;
	inline-size: 72%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 20%, transparent);
}

.nbt-blk-staff .nbt-blk-card > .nbt-blk-initial {
	inline-size: 104px;
	block-size: 104px;
	font-size: 2.6rem;
}

.nbt-blk-staff .nbt-blk-portrait .nbt-blk-initial {
	font-size: clamp(4.5rem, 14vw, 7.5rem);
}

body.nbt-card-arch .nbt-blk-staff:not([class*="is-style-nbt-cut-"]) .nbt-blk-card > .nbt-blk-initial,
.nbt-blk-staff.is-style-nbt-cut-arch .nbt-blk-card > .nbt-blk-initial {
	block-size: 120px;
	border-radius: 50% 50% var(--wp--custom--radius--small, 6px) var(--wp--custom--radius--small, 6px) / 46% 46% var(--wp--custom--radius--small, 6px) var(--wp--custom--radius--small, 6px) !important;
}

body.nbt-card-ticket .nbt-blk-staff:not([class*="is-style-nbt-cut-"]) .nbt-blk-card > .nbt-blk-initial,
.nbt-blk-staff.is-style-nbt-cut-ticket .nbt-blk-card > .nbt-blk-initial {
	border-radius: var(--wp--custom--radius--small, 6px) !important;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--base), inset 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
}

body.nbt-card-polaroid .nbt-blk-staff:not([class*="is-style-nbt-cut-"]) .nbt-blk-card > .nbt-blk-initial,
.nbt-blk-staff.is-style-nbt-cut-polaroid .nbt-blk-card > .nbt-blk-initial {
	border-radius: 2px !important;
	border: 6px solid var(--wp--preset--color--base);
	border-block-end-width: 1.25rem;
	box-shadow: 0 6px 16px rgb(0 0 0 / 14%);
	transform: rotate(-2deg);
}

body.nbt-card-tile .nbt-blk-staff:not([class*="is-style-nbt-cut-"]) .nbt-blk-card > .nbt-blk-initial,
.nbt-blk-staff.is-style-nbt-cut-tile .nbt-blk-card > .nbt-blk-initial {
	border-radius: 0 !important;
	border: 2px solid var(--wp--preset--color--contrast);
	box-shadow: 5px 5px 0 var(--wp--preset--color--accent);
	overflow: visible;
}

body.nbt-card-blob .nbt-blk-staff:not([class*="is-style-nbt-cut-"]) .nbt-blk-card > .nbt-blk-initial,
.nbt-blk-staff.is-style-nbt-cut-blob .nbt-blk-card > .nbt-blk-initial {
	border-radius: 58% 42% 47% 53% / 46% 52% 48% 54% !important;
}

/* ------------------------------------------------------------------ phone menu overlay
   The opened phone menu sits on the header's own colours (the header redefines the
   palette for accent and dark tones, so dark demos stay dark), with large links and a
   44px close button. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	padding: clamp(1rem, 5vw, 1.75rem) clamp(1.25rem, 6vw, 2rem) !important;
	border-block-start: 0.4rem solid var(--wp--preset--color--accent);
	background-image: radial-gradient(circle at 0 100%, color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent) 0 30%, transparent 30.5%) !important;
}

body.nbt-header-tone-accent .wp-block-navigation__responsive-container.is-menu-open {
	border-block-start-color: var(--wp--preset--color--contrast);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-block-start: 3.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	inline-size: 100%;
	gap: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	inline-size: 100%;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 16%, transparent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.25rem, 1rem + 2vw, 1.6rem);
	font-weight: 700;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	inline-size: 100%;
	padding-block: 0.85rem !important;
	font-size: clamp(1.25rem, 1rem + 2vw, 1.6rem) !important;
	line-height: 1.5;
	color: inherit;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 9%, transparent);
	color: var(--wp--preset--color--contrast);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	inline-size: 26px;
	block-size: 26px;
}