/*
 * Beauty Demo components: the Stylist (GlowSkin) layout on legwork-base.
 * Values are Stylist's exact ones (design/stylist-reference/NOTES.md and the
 * bridge specs 02–04); deviations are commented with the reason.
 *
 * Mobile-first: base = ≤767, then 768 (tablet), 1025 (laptop), 1367 (desktop).
 * Hover only inside (hover: hover) and (pointer: fine); focus-visible always.
 */

/* ------------------------------------------------------------------ base */
@layer components {
	body {
		background: var(--bd-white);
		color: var(--bd-text);
		font-family: var(--bd-font-text);
		font-size: var(--bd-body);
		line-height: 2em;          /* kit "Text" preset (Elementor inherits the computed px) */
		letter-spacing: 0.4px;
		-webkit-font-smoothing: auto;
	}
	a { color: inherit; }
	h1, h2, h3, h4, h5, h6 {
		margin: 15px 0;            /* Kava theme default under Elementor */
		color: var(--bd-black);
		text-wrap: wrap;           /* Stylist doesn't balance headings */
	}
	h1 { font: 500 var(--bd-h1)/1.3em var(--bd-font-display); letter-spacing: -1px; }
	h2 { font: 500 var(--bd-h2)/1.2em var(--bd-font-display); letter-spacing: 0.2px; }
	h3 { font: 400 var(--bd-h3)/1.2em var(--bd-font-display); letter-spacing: 0; }
	h4 { font: 600 var(--bd-h4)/1.3em var(--bd-font-text); letter-spacing: 0.3px; }
	h5 { font: 600 var(--bd-h5)/1.3em var(--bd-font-text); letter-spacing: 0.5px; }
	h6 { font: 400 var(--bd-h6)/1.7em var(--bd-font-text); letter-spacing: 0.5px; }
	:focus-visible { outline: 2px solid var(--bd-accent); outline-offset: 3px; }

	/* Entrance fades (Elementor fadeIn, 1.25s ease, per-element delay --d).
	   Luca 2026-10-09: match Stylist, hero included. Hidden only with JS;
	   reduced motion shows everything at once. */
	html.js .bd-reveal { opacity: 0; }
	html.js .bd-reveal.is-in { animation: bd-fade-in var(--bd-fade-duration) var(--bd-ease) var(--d, 0ms) both; }
	@keyframes bd-fade-in { from { opacity: 0; } to { opacity: 1; } }
	@media (prefers-reduced-motion: reduce) {
		html.js .bd-reveal { opacity: 1; animation: none; }
	}
}

/* ---------------------------------------------------------------- button */
@layer components {
	/* Kit button + Stylist's custom CSS (overlay fades in over 1s, shrink 0.3s).
	   Colours: fixed for contrast (brand.css --bd-btn-*). */
	.bd-btn {
		position: relative; isolation: isolate; overflow: hidden;
		display: inline-block; text-align: center; vertical-align: baseline;
		padding: 15px 36px; border: 0; border-radius: 15px;
		font: 500 var(--bd-button)/1 var(--bd-font-button);
		letter-spacing: 0.5px; text-transform: capitalize; text-decoration: none;
		color: var(--bd-white);
		background-image: linear-gradient(115deg, var(--bd-btn-deep) 0%, var(--bd-btn-light) 100%);
		transition: transform 0.3s var(--bd-ease);
	}
	.bd-btn__label { position: relative; z-index: 1; }
	.bd-btn-wrap { text-align: center; }
	.bd-btn::after {
		content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
		background-image: linear-gradient(215deg, var(--bd-btn-deep) 0%, var(--bd-btn-light) 100%);
		opacity: 0; transition: opacity 1s var(--bd-ease);
	}
	.bd-btn:focus-visible::after { opacity: 1; }
	.bd-btn:is(.bd-btn--header, .bd-btn--hero):active { transform: scale(0.9); }

	.bd-btn--header {
		padding: 13px 32px;
		background-image: linear-gradient(136deg, var(--bd-btn-light) 0%, var(--bd-btn-deep) 100%);
	}
	.bd-btn--hero {
		padding: 15px 35px 15px 34px;
		background-image: linear-gradient(260deg, var(--bd-btn-light) 0%, var(--bd-btn-deep) 100%);
	}

	@media (hover: hover) and (pointer: fine) {
		.bd-btn:hover::after { opacity: 1; }
		.bd-btn:is(.bd-btn--header, .bd-btn--hero):hover { transform: scale(0.9); }
		.bd-btn--header:hover { background-image: linear-gradient(88deg, var(--bd-btn-deep) 0%, var(--bd-btn-light) 100%); }
		.bd-btn--hero:hover { background-image: linear-gradient(215deg, var(--bd-btn-deep) 0%, var(--bd-btn-light) 100%); }
	}
}

/* ---------------------------------------------------------------- header */
@layer components {
	/* Height and overlap measured on Stylist (1280px: header 104px, hero at 30px).
	   Stylist's header sits in Kava's #masthead, whose height bottoms out at 0,
	   then #content adds margin 30px 0. Same result here: the header pulls the
	   page up by min(overlap, own height) and .bd-main adds 30px. */
	.bd-header {
		position: relative; z-index: 10;
		min-height: 90px;          /* kit tablet/mobile min-height (border-box) */
		padding: 15px 0;
		margin-bottom: calc(-1 * var(--bd-header-overlap));
		border-bottom: 1px solid var(--bd-border);
		background: transparent;
	}
	.bd-header__inner {
		display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px;
		width: 100%; max-width: var(--bd-boxed); margin-inline: auto;
	}
	.bd-header__inner > * { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 10px; }
	.bd-main { margin-block: 30px; }
	.bd-header__logo { flex: 0 1 51%; }
	.bd-header__nav { flex: 0 1 44%; margin-right: -20px; align-items: flex-end; }
	.bd-header__cta { display: none; }

	.bd-logo { display: block; }
	.bd-logo__img { display: block; width: 100%; height: auto; }
	.bd-logo__name { font: 500 var(--bd-h4)/1.2 var(--bd-font-display); color: var(--bd-black); }

	/* Hamburger (Jeg jki-burger-menu-light): 67px wide, 30px icon. */
	.bd-burger {
		display: inline-grid; place-items: center; width: 67px; height: 30px; padding: 0;
		border: 0; background: transparent; color: var(--bd-secondary);
	}
	.bd-burger .lw-icon { width: 30px; height: 30px; }
	/* 67×30 as on Stylist; the hit area grows to 44px tall without moving anything (mobile-native). */
	.bd-burger { position: relative; }
	.bd-burger::before { content: ""; position: absolute; inset: -7px 0; }

	/* Desktop list: hidden until laptop. Without JS (no drawer) it shows, wrapped. */
	.bd-nav__list--bar { display: none; }
	html:not(.js) .bd-burger { display: none; }
	html:not(.js) .bd-nav__list--bar { display: flex; flex-wrap: wrap; justify-content: flex-end; }

	.bd-nav__list { margin: 0; padding: 0; list-style: none; }
	.bd-nav__link {
		display: flex; align-items: center; height: 100%;
		padding: 0 20px; border: 0; background: transparent;
		font: 500 var(--bd-menu)/1 var(--bd-font-text); letter-spacing: 1.5px;
		color: var(--bd-secondary); text-decoration: none;
		transition: all 0.4s var(--bd-ease);
	}

	@media (min-width: 768px) {
		.bd-header { padding: 15px 0 12px; }
		.bd-header__logo { flex-basis: 35%; }
		.bd-header__logo .bd-logo__img { width: 79%; }
		.bd-header__nav { flex-basis: 75%; margin-right: 0; }
		.bd-header__inner { flex-wrap: nowrap; }
	}
	@media (min-width: 1025px) {
		.bd-header__inner { min-height: 76px; }
		.bd-header__logo { flex-basis: 21%; }
		.bd-header__logo .bd-logo__img { width: 100%; }
		.bd-header__nav { flex-basis: 62%; align-items: stretch; }
		.bd-header__cta { display: flex; flex: 0 1 19%; align-items: center; justify-content: flex-start; }
		.bd-burger { display: none; }
		.bd-nav__list--bar { display: flex; justify-content: center; height: 40px; }
		html:not(.js) .bd-nav__list--bar { flex-wrap: nowrap; justify-content: center; }
	}
	@media (min-width: 1367px) {
		.bd-header__logo { flex-basis: 19%; }
		.bd-header__cta { flex-basis: 19.664%; }
		.bd-nav__list--bar { height: 45px; }
	}

	/* Submenu (desktop): fades in on hover over 0.4s; also opens on focus and
	   on click (touch laptops/tablets in landscape) via aria-expanded. */
	.bd-nav__list--bar > .bd-nav__item { position: relative; }
	.bd-nav__list--bar .bd-nav__sub {
		position: absolute; top: 100%; z-index: 1000;
		min-width: 220px; margin: 7px; padding: 15px 10px; list-style: none;
		background: var(--bd-white); border: 1px solid var(--bd-border); border-radius: 10px;
		box-shadow: 5px 9px 15px 5px rgba(170, 170, 170, 0.08);
		opacity: 0; visibility: hidden; transition: all 0.4s var(--bd-ease);
	}
	.bd-nav__list--bar .bd-nav__item:focus-within > .bd-nav__sub,
	.bd-nav__list--bar .bd-nav__toggle[aria-expanded="true"] + .bd-nav__sub { opacity: 1; visibility: visible; }
	.bd-nav__sublink {
		display: block; padding: 10px 20px; border-radius: 10px;
		font: 400 15px/1.8em var(--bd-font-text); letter-spacing: 0.5px;
		color: var(--bd-black); text-decoration: none;
		transition: all 0.4s var(--bd-ease);
	}

	@media (hover: hover) and (pointer: fine) {
		.bd-nav__link:hover { color: var(--bd-accent); }
		.bd-nav__list--bar .bd-nav__item:hover > .bd-nav__sub { opacity: 1; visibility: visible; }
		.bd-nav__list--bar .bd-nav__sublink:hover { background: var(--bd-accent); color: var(--bd-white); }
	}
	.bd-nav__toggle { cursor: pointer; }

	/* Drawer (≤1024): slides in from the left over 0.6s with Jeg's curve. */
	.bd-drawer {
		position: fixed; inset: 0 auto 0 0; margin: 0;
		width: 100%; max-width: 360px; height: 100dvh; max-height: none;
		padding: 10px 0; border: 0; overflow-y: auto; overscroll-behavior: contain;
		background: var(--bd-cream); color: var(--bd-secondary);
		transform: translateX(-110%);
		transition: transform 0.6s var(--bd-ease-panel), overlay 0.6s allow-discrete, display 0.6s allow-discrete;
	}
	.bd-drawer[open] { display: flex; flex-direction: column; transform: none; }
	@starting-style { .bd-drawer[open] { transform: translateX(-110%); } }
	.bd-drawer::backdrop { background: transparent; }
	body.admin-bar .bd-drawer { top: 46px; height: calc(100dvh - 46px); }
	@media (min-width: 783px) { body.admin-bar .bd-drawer { top: 32px; height: calc(100dvh - 32px); } }

	.bd-drawer__identity { display: flex; align-items: center; justify-content: space-between; }
	.bd-drawer__logo { display: block; max-width: 150px; margin: 5px 0; padding: 5px; }
	.bd-drawer__logo img { width: 100%; height: auto; object-fit: cover; }
	.bd-drawer__close {
		display: inline-grid; place-items: center; width: 45px; margin: 12px; padding: 8px;
		border: 0; border-radius: 3px; background: var(--bd-white); color: var(--bd-secondary);
	}
	.bd-drawer__close .lw-icon { width: 21px; height: 21px; }
	.bd-nav__list--drawer .bd-nav__link {
		display: block; width: 100%; height: auto; padding: 15px 15px 15px 30px; text-align: start; line-height: 1.3;
	}
	.bd-nav__list--drawer .bd-nav__link[aria-current="page"] { color: var(--bd-black); }
	.bd-nav__list--drawer .bd-nav__sub { display: none; margin: 0; padding: 0; list-style: none; }
	.bd-nav__list--drawer .bd-nav__toggle[aria-expanded="true"] + .bd-nav__sub { display: block; }
	.bd-nav__list--drawer .bd-nav__sublink { padding: 12px 15px 12px 45px; border-radius: 0; }
	@media (min-width: 768px) { .bd-drawer__logo { max-width: 155px; } }
	@media (hover: hover) and (pointer: fine) {
		.bd-drawer__close:hover { color: #000913; }
		.bd-nav__list--drawer .bd-nav__sublink:hover { background: transparent; color: var(--bd-accent); }
	}
}

/* ------------------------------------------------------------ Home 1 hero */
@layer components {
	.bd-hero {
		position: relative; isolation: isolate;
		display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
		padding: calc(8 * var(--bd-body)) 0 calc(3 * var(--bd-body));
		background: var(--bd-white) url("../img/hero-bg-mobile.jpg") top left / cover no-repeat;
	}
	/* Hard stop: top 62% shows the photo, bottom 38% is solid peach. */
	.bd-hero::before {
		content: ""; position: absolute; inset: 0; z-index: -1;
		background-image: linear-gradient(180deg, #FFFFFF00 62%, var(--bd-peach) 0%);
	}
	.bd-hero__col { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
	.bd-hero__col--a, .bd-hero__col--b, .bd-hero__col--e { display: none; }
	.bd-hero__col--b, .bd-hero__col--d { gap: 15px; padding: 10px; } /* measured: Elementor's default 10px */
	.bd-hero__col--c { flex: 0 1 100%; gap: 20px; padding: 10px; margin: -15px 0; }
	.bd-hero__col--d { flex: 0 1 100%; flex-direction: row; flex-wrap: nowrap; }
	.bd-hero__col--d > * { flex: 1 1 0; }

	.bd-tile { width: 100%; border-radius: 15px; overflow: hidden; }
	.bd-tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
	.bd-tile--centre, .bd-tile--edge-left, .bd-tile--edge-right { height: 40vh; }
	.bd-tile--tall { height: 20vh; }
	.bd-tile--short { height: 20vh; }
	.bd-tile--edge-left { border-radius: 0 15px 15px 1px; }
	.bd-tile--edge-right { border-radius: 15px 0 0 15px; }

	.bd-hero__mark { align-self: center; width: 10%; height: auto; margin-bottom: -20px; }
	.bd-hero__heading { position: relative; z-index: 3; align-self: center; width: 80%; text-align: center; }
	.bd-hero__title { margin: 15px 0 0; }
	.bd-hero__subtitle {
		margin: 0;
		font: 400 var(--bd-body)/2em var(--bd-font-text); letter-spacing: 0.4px;
		color: var(--bd-secondary);
	}
	/* Elementor button widget: an inline-block inside a line box (body line-height),
	   which adds ~12px under the button on Stylist; the wrapper reproduces it. */
	.bd-hero__cta { margin: 10px 0 15px; text-align: center; }

	@media (min-width: 768px) {
		.bd-hero {
			flex-wrap: nowrap;
			padding-top: calc(10 * var(--bd-body));
			background-image: url("../img/hero-bg.jpg");
			background-position: center left;
		}
		.bd-hero__col--a, .bd-hero__col--b, .bd-hero__col--e { display: flex; }
		.bd-hero__col--a, .bd-hero__col--e { flex: 0 1 8%; }
		.bd-hero__col--b, .bd-hero__col--d { flex: 0 1 22%; flex-direction: column; }
		.bd-hero__col--d > * { flex: none; }
		.bd-hero__col--c { flex: 0 1 40%; margin: 0; }
		.bd-tile--tall { height: 30vh; }
		/* Stylist quirk (measured): Elementor fixes the widget at 100% width, so
		   the kit's "0 -85px" margins don't widen it; they shift the heading
		   85px left of centre (-80px at laptop) until the ≥1200 override. */
		.bd-hero__heading { width: 100%; align-self: auto; margin: 0 0 0 -85px; }
	}
	@media (min-width: 1025px) {
		.bd-hero { background-position: center center; }
		.bd-tile--tall { height: 35vh; }
		.bd-hero__heading { margin: 0 0 0 -80px; }
	}
	/* Stylist custom CSS (59f39fd8): at ≥1200px the H1 sits on one line. */
	@media (min-width: 1200px) {
		.bd-hero__heading { width: 100%; margin: 0; }
		.bd-hero__title { white-space: nowrap; }
	}
	@media (min-width: 1367px) {
		.bd-hero__mark { width: 6%; margin-bottom: -15px; }
	}
}

/* ------------------------------------------------ Home 2 + 3 service cards */
@layer components {
	/* overflow-x clip: the right column's badges overhang the card by design and
	   would scroll the page sideways by ~1px at 320px. */
	.bd-cards { padding: 0 0 calc(5 * var(--bd-body)); overflow-x: clip; }
	.bd-cards--first {
		padding: calc(3 * var(--bd-body)) 0 var(--bd-body);
		background: linear-gradient(180deg, var(--bd-peach) 35%, var(--bd-white) 0%);
	}
	.bd-cards__inner {
		display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
		width: 95%; margin-inline: auto;
	}
	.bd-card {
		position: relative; flex: 0 1 48%; min-width: 0;
		display: flex; flex-direction: column; justify-content: flex-end;
		border-radius: 15px;
	}
	.bd-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 15px; }
	.bd-card__spacer { height: 27vh; }
	.bd-card__bar {
		position: relative; display: flex; justify-content: space-between; gap: 0;
		padding: 20px; border-radius: 0 0 15px 15px;
		background-image: linear-gradient(102deg, #F59F758F 0%, #E29463D1 100%);
	}
	.bd-card__bar::before {
		content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
		background-image: url("../img/card-texture.png"); opacity: 0.85;
	}
	.bd-card__title {
		position: relative; z-index: 1; flex: 0 1 90%; min-width: 0; margin: 0; padding: 0;
		font: 600 var(--bd-h5)/1.3 var(--bd-font-text); letter-spacing: 0.5px;
		color: var(--bd-secondary);
	}
	.bd-card__title a { color: inherit; text-decoration: none; }
	.bd-card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable when it has a link */
	.bd-card--link .bd-card__title { position: static; }
	.bd-card--link .bd-card__bar { position: static; }
	/* Badge: Elementor social-icons widget = a 10% slot pulled up 35px and
	   left 17px (mobile 20px); the 40px box overflows it to the right. */
	.bd-card__badge {
		position: relative; z-index: 2; flex: 0 1 10%; min-width: 0;
		margin: -35px 0 0 -20px;
	}
	.bd-card__badge-box {
		display: grid; place-items: center; width: 40px; height: 40px; border-radius: 5px;
		background: var(--bd-white); color: var(--bd-black);
		transition: all 0.3s var(--bd-ease);
	}
	.bd-card__badge .lw-icon { width: 20px; height: 20px; }

	@media (min-width: 768px) {
		.bd-cards--first { padding: calc(5 * var(--bd-body)) 0 var(--bd-body); }
		.bd-cards__inner { width: min(100%, 980px); gap: 20px; }
		.bd-card { flex-basis: 47%; }
		.bd-card__bar { gap: 20px; }
		.bd-card__badge { margin-left: -17px; }
	}
	@media (min-width: 1025px) {
		.bd-cards__inner { flex-wrap: nowrap; }
		.bd-card { flex-basis: 25%; }
	}
	@media (min-width: 1367px) {
		.bd-cards__inner { width: min(100%, var(--bd-boxed)); justify-content: flex-start; }
	}

	@media (hover: hover) and (pointer: fine) {
		.bd-card { transition: transform 0.5s var(--bd-ease), box-shadow 0.5s var(--bd-ease); }
		.bd-card:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(153, 90, 50, 0.14); }
		.bd-card__badge-box:hover { background: var(--bd-accent); color: var(--bd-white); opacity: 0.9; }
	}
	.bd-card--link:focus-within { outline: 2px solid var(--bd-accent); outline-offset: 3px; }
}

/* --------------------------------------------------------- eyebrow label */
@layer components {
	/* Jeg icon box, icon left: 38px mark in a 38×45 slot, 15px gap, label 12px down. */
	.bd-eyebrow { display: flex; align-items: flex-start; gap: 15px; margin: 0; }
	.bd-eyebrow__mark { flex: none; width: 38px; height: 38px; margin-bottom: 7px; }
	.bd-eyebrow__text {
		margin-top: 12px;
		font: 400 var(--bd-eyebrow)/1.4em var(--bd-font-eyebrow); letter-spacing: 1px; text-transform: uppercase;
		color: var(--bd-black);
	}
}

/* ------------------------------------------------- Home 4 why choose us */
@layer components {
	.bd-why {
		padding: 0 0 calc(3 * var(--bd-body));
		background: url("../img/leaves-corner.jpg") 0% 100% / 60% auto no-repeat;
	}
	.bd-why__inner { display: flex; flex-direction: column; width: 100%; max-width: var(--bd-boxed); margin-inline: auto; }
	.bd-why__intro {
		display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;
		padding: 10px; text-align: center;
	}
	.bd-why__title {
		margin: 0;
		font: 500 var(--bd-h2)/1.2em var(--bd-font-display); letter-spacing: 0.2px;
		color: var(--bd-secondary);
	}
	.bd-why__grid { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; padding: 10px; }
	.bd-why__cell { flex: 0 0 100%; min-width: 0; padding: 10px; } /* min-width 0: long titles mustn't force a wrap (2 per row from tablet, as Stylist) */

	.bd-feature {
		display: flex; flex-direction: column; /* no margin collapse, as in Jeg's box */
		height: 100%; padding: 30px 20px 35px;
		background: var(--bd-white); border: 0.8px solid var(--bd-peach); border-radius: 15px;
		text-align: center;
		transition: transform 0.45s var(--bd-ease), border-color 0.4s var(--bd-ease);
	}
	/* Jeg icon slot (kit 65×40, 13px margin) measures 46px on Stylist; the 65px
	   image spills below it. Measured: title top = icon top + 84px. */
	.bd-feature__icon { height: 46px; margin-bottom: 13px; }
	.bd-feature__icon img { width: 65px; height: 65px; margin-inline: auto; }
	.bd-feature__title {
		margin: 25px 0 10px;
		font: 500 var(--bd-f23)/1.3em var(--bd-font-display); letter-spacing: -0.5px;
		color: var(--bd-secondary);
		transition: color 0.45s var(--bd-ease);
	}
	.bd-feature__text {
		margin: 0;
		font: 400 14px/1.7em var(--bd-font-text); letter-spacing: 0.5px;
		color: var(--bd-text);
	}

	@media (min-width: 768px) {
		.bd-why { padding: calc(3 * var(--bd-body)) 0 calc(5 * var(--bd-body)); background-size: 35% auto; }
		.bd-why__inner { flex-direction: row; }
		.bd-why__intro, .bd-why__grid { flex: 0 0 50%; }
		.bd-why__intro { align-items: stretch; text-align: start; }
		.bd-why__grid { align-content: flex-start; }
		.bd-why__cell { flex-basis: 48%; }
	}
	@media (hover: hover) and (pointer: fine) {
		.bd-feature:hover { transform: translateY(-8px); border-color: #EE8F1D; }
		.bd-feature:hover .bd-feature__title { color: var(--bd-accent); }
	}
}

/* ---------------------------------------------------- Home 5 testimonials */
@layer components {
	.bd-reviews {
		padding: calc(5 * var(--bd-body)) 0 0;
		background: linear-gradient(180deg, var(--bd-peach) 60%, transparent 0%);
		overflow-x: clip; /* the desktop carousel bleeds 100px each side */
	}
	.bd-reviews__intro {
		display: flex; flex-direction: column; gap: 20px;
		width: 100%; max-width: var(--bd-boxed); margin-inline: auto; padding: 10px;
	}
	.bd-reviews__intro > * { flex: 1 1 0; min-width: 0; padding: 10px; }
	.bd-reviews__lead { display: flex; flex-direction: column; gap: 20px; }
	/* Stylist: this heading has no typography of its own, so Elementor's
	   default heading rule gives it the H1 preset (measured). */
	.bd-reviews__title {
		margin: 0;
		font: 500 var(--bd-h1)/1.3em var(--bd-font-display); letter-spacing: -1px;
		color: var(--bd-black);
	}
	.bd-reviews__text { display: flex; flex-direction: column; justify-content: center; }
	.bd-reviews__text p { margin: 0 0 1em; color: var(--bd-secondary); } /* Kava p margin */

	.bd-carousel { width: 95%; margin: 20px auto 0; }
	.bd-carousel__track {
		display: flex; align-items: flex-start; gap: 10px;
		margin: 0; padding: 0; list-style: none;
		overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; scrollbar-width: none;
	}
	.bd-carousel__track::-webkit-scrollbar { display: none; }
	.bd-carousel__item { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
	.bd-carousel.is-dragging .bd-carousel__track { scroll-snap-type: none; cursor: grabbing; }

	/* Card (Jeg style-3 + kit overrides): photo, then stars/quote/name/role.
	   Centred and stacked below 1025px; at laptop+ the text column is lifted
	   beside the photo with Stylist's own negative margin. */
	.bd-review {
		margin: 0; padding: 0 20px;
		background: var(--bd-white); border: 2px solid var(--bd-peach); border-radius: 15px;
		text-align: center;
	}
	.bd-review__photo { margin-bottom: 20px; }
	/* Inline image on a text line (as Stylist): the line adds ~12px under it,
	   which the stars' negative margin below is measured against. */
	.bd-review__photo img { display: inline-block; vertical-align: baseline; width: 170px; height: auto; margin: 20px 0 0; border-radius: 15px; object-fit: cover; }
	.bd-review__stars { display: flex; justify-content: center; gap: 5px; height: calc(2 * var(--bd-body)); /* one body line, as each star li */ margin: 0 0 10px; color: var(--bd-accent); }
	.bd-review__stars .lw-icon { width: 17px; height: 17px; align-self: center; }
	.bd-review__quote { margin: 0; }
	.bd-review__quote p {
		margin: 0; padding-bottom: 20px;
		font: italic 400 var(--bd-quote)/1.8em var(--bd-font-display); letter-spacing: 0.3px;
		color: var(--bd-secondary);
	}
	.bd-review__name {
		display: block;
		font: 600 var(--bd-h5)/1.3 var(--bd-font-text); letter-spacing: 0.5px;
		color: var(--bd-accent);
	}
	.bd-review__role {
		display: block; margin-bottom: 25px;
		font: 400 var(--bd-f14)/1.5em var(--bd-font-text); letter-spacing: 0.5px;
		color: var(--bd-text);
	}

	@media (min-width: 768px) {
		.bd-reviews__intro { flex-direction: row; }
		.bd-carousel { width: 97%; }
		.bd-carousel__item { flex-basis: calc((100% - 10px) / 2); }
		.bd-review__photo img { width: 130px; }
		.bd-review__role { line-height: 1em; }
	}
	@media (min-width: 1025px) {
		.bd-carousel { margin-top: 20px; }
		.bd-carousel__track { gap: 35px; }
		.bd-carousel__item { flex-basis: calc((100% - 35px) / 2); }
		.bd-review { padding: 20px 40px 60px 0; text-align: start; }
		.bd-review__photo img { width: 175px; margin-left: 20px; }
		.bd-review__stars { justify-content: flex-start; margin: -220px 0 10px 230px; }
		.bd-review__quote p, .bd-review__name, .bd-review__role { margin-left: 230px; }
		.bd-review__role { margin-bottom: 30px; }
	}
	@media (min-width: 1367px) {
		.bd-reviews__intro { padding-inline: 0; }
		.bd-carousel { width: auto; max-width: none; margin: 70px calc(50% - var(--bd-boxed) / 2 - 90px) 0; /* 20px gap + Stylist 50px */ }
		.bd-review__photo img { width: 230px; }
		.bd-review__stars { margin: -275px 0 10px 285px; }
		.bd-review__stars .lw-icon { width: 20px; height: 20px; }
		.bd-review__quote p, .bd-review__name, .bd-review__role { margin-left: 285px; }
		.bd-review__role { margin-bottom: 0; }
	}
}

/* ------------------------------------------------------- Home 6 logos */
@layer components {
	.bd-logos { padding: calc(2 * var(--bd-body)) 0; }
	.bd-logos__track {
		display: flex; gap: 15px; margin: 0; padding: 0 0 12px; list-style: none;
		overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	}
	.bd-logos__track::-webkit-scrollbar { display: none; }
	.bd-logos__item { flex: 0 0 calc((100% - 15px) / 2); padding: 0 10px; scroll-snap-align: start; }
	.bd-logos__item img { display: block; width: 100%; height: auto; }
	@media (min-width: 768px) {
		.bd-logos__track { gap: 30px; }
		.bd-logos__item { flex-basis: calc((100% - 3 * 30px) / 4); }
	}
	@media (min-width: 1025px) { .bd-logos__item { flex-basis: calc((100% - 4 * 30px) / 5); } }
	@media (min-width: 1367px) { .bd-logos__item { flex-basis: calc((100% - 5 * 30px) / 6); } }
}

/* ------------------------------------------------------- Home 7 promos */
@layer components {
	.bd-promos { display: flex; flex-direction: column; gap: 20px; padding: 10px; }
	.bd-promo {
		position: relative; isolation: isolate; overflow: hidden;
		display: flex; min-height: 367px; border-radius: 15px; /* 400px from tablet up */
	}
	.bd-promo__img { position: absolute; z-index: -1; bottom: 0; height: auto; pointer-events: none; }
	.bd-promo__body { display: flex; flex-direction: column; gap: 20px; }
	.bd-promo__label {
		align-self: center; width: 50%; margin: 0; padding: 4px 0; /* measured: 50% on phones, 45% from tablet */
		background: var(--bd-white); border-radius: 15px; text-align: center;
		font: 400 14px/1.7em var(--bd-font-text); letter-spacing: 0.5px; color: var(--bd-black);
	}
	.bd-promo__title {
		margin: 0;
		font: 400 var(--bd-h3)/1.2em var(--bd-font-display); letter-spacing: 0;
		color: var(--bd-white);
	}
	.bd-promo--narrow { background-image: linear-gradient(180deg, var(--bd-tan) 0%, var(--bd-peach-light) 100%); }
	.bd-promo--narrow .bd-promo__img { left: 0; width: 100%; }
	.bd-promo--narrow .bd-promo__body { flex: 1; padding-top: 45px; text-align: center; }
	.bd-promo--narrow .bd-promo__title { margin-top: -15px; }
	/* Wide promo: stacked and centred on phones (text block 283px, photo 76%
	   wide at the bottom centre); from tablet, text left and photo bottom-right. */
	.bd-promo--wide { flex-direction: column; background-image: linear-gradient(165deg, var(--bd-tan) 0%, var(--bd-peach-light) 100%); }
	.bd-promo--wide .bd-promo__img { left: 12%; width: 76%; }
	.bd-promo--wide .bd-promo__body { flex: 0 0 283px; justify-content: center; padding: 10px; text-align: center; }
	.bd-promo--wide .bd-promo__title { margin: 15px 0 5px; } /* Jeg heading box (measured) */
	.bd-promo .bd-btn-wrap { line-height: 0; } /* Jeg button wrapper: no text-line gap (measured) */


	.bd-btn--dark { padding: 15px 30px; background: var(--bd-black); transition: all 0.4s var(--bd-ease); }
	.bd-btn--dark::after { display: none; }

	@media (min-width: 768px) {
		.bd-promo { min-height: 400px; }
		.bd-promo__label { width: 45%; }
		.bd-promo--wide { flex-direction: row; padding-left: 50px; }
		.bd-promo--wide .bd-promo__img { left: auto; right: 0; width: 55%; }
		.bd-promo--wide .bd-promo__body { flex: 0 1 calc(100% - 207px); text-align: start; }
		.bd-promos { flex-direction: row; }
		.bd-promo--narrow { flex: 0 0 calc((100% - 20px) * 0.3633); }
		.bd-promo--wide { flex: 1 1 0; }
	}
}

/* ------------------------------------------------ FAQ 3 promo cards (bridge 13) */
@layer components {
	/* Two gradient cards; each is a row of a text column and an empty spacer
	   that leaves room for the art (a background, swapped on phones). Widths
	   come from flex-shrink exactly as on Stylist: the text column can't shrink
	   below its longest unbreakable run (the inline-block bold accent). */
	.bd-promos--faq { gap: 0; padding: 30px 0 0; }
	.bd-promo--card {
		flex-direction: column; min-height: 55vh; margin: 10px;
		background-image: linear-gradient(165deg, var(--bd-tan) 0%, var(--bd-peach-light) 100%);
	}
	.bd-promo--card::before {
		content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
		background: var(--art-m, var(--art)) no-repeat 50% 100% / 100% auto;
	}
	.bd-promos--faq > .bd-promo--card:nth-child(2)::before { background-size: 85% auto; }
	.bd-promo--card .bd-promo__body { flex: 1 1 auto; justify-content: center; padding: 10px; text-align: center; }
	.bd-promo--card .bd-promo__space { flex: 0 0 16.5vh; } /* measured: 148 of the 495px phone card */
	.bd-promo--card .bd-promo__label { width: 50%; padding: 6px 0; font-size: var(--bd-f14); line-height: 1.5em; }
	.bd-promo--card .bd-promo__title { margin: -5px 0 5px; } /* Jeg heading box: -20px widget, 15px h2, -10px wrapper (measured) */
	.bd-promo__accent { display: inline-block; font-weight: 700; } /* Jeg's span: real Rufina Bold, unbreakable */
	.bd-promo--card .bd-btn { width: 195px; white-space: nowrap; }

	@media (min-width: 768px) {
		.bd-promos--faq { gap: 10px; padding-top: 45px; }
		.bd-promo--card { flex: 1 1 0; flex-direction: row; min-height: 30vh; margin: 0; }
		.bd-promo--card::before { background-image: var(--art); background-position: 100% 50%; background-size: 82% auto; }
		.bd-promos--faq > .bd-promo--card:nth-child(2)::before { background-size: 80% auto; }
		.bd-promo--card .bd-promo__body { flex: 0 1 100%; text-align: start; }
		/* Spacer: card A 22% at every width, card B 40% (100% on desktop). Measured:
		   the flex-shrink of these bases gives Stylist's 501/109 and 438/173 at 1265. */
		.bd-promo--card .bd-promo__space { flex: 0 1 22%; }
		.bd-promos--faq > .bd-promo--card:nth-child(2) .bd-promo__space { flex-basis: 40%; }
		.bd-promo--card .bd-promo__label { align-self: flex-start; width: 58%; line-height: 1em; }
		.bd-promo--card .bd-btn-wrap { text-align: start; }
	}
	@media (min-width: 1025px) {
		.bd-promos--faq { padding-top: 54px; }
		.bd-promo--card { min-height: 40vh; }
		.bd-promo--card .bd-promo__body { margin-left: 10px; }
		/* Stylist pins the art at fixed offsets here, so it slides as the card resizes. */
		.bd-promo--card::before { background-position: 174px 0; }
		.bd-promos--faq > .bd-promo--card:nth-child(2)::before { background-position: 258px 0; }
		.bd-promos--faq > .bd-promo--card:nth-child(1) .bd-promo__label { width: 48%; }
		.bd-promos--faq > .bd-promo--card:nth-child(2) .bd-promo__label { width: 45%; }
	}
	@media (min-width: 1367px) {
		.bd-promos--faq { gap: 20px; max-width: var(--bd-boxed); margin-inline: auto; }
		.bd-promo--card { min-height: 32vh; }
		.bd-promo--card .bd-promo__body { margin-left: 50px; }
		.bd-promos--faq > .bd-promo--card:nth-child(2) .bd-promo__space { flex-basis: 100%; } /* card B's spacer has no desktop width on Stylist (measured 290px) */
		.bd-promos--faq > .bd-promo--card::before,
		.bd-promos--faq > .bd-promo--card:nth-child(2)::before { background-position: 100% 100%; background-size: 55% auto; }
		.bd-promos--faq > .bd-promo--card:nth-child(1) .bd-promo__label { width: 36%; }
		.bd-promos--faq > .bd-promo--card:nth-child(2) .bd-promo__label { width: 50%; }
	}

	/* Jeg button hovers. FAQ: Stylist's #BF7E5D under white text is 3.3:1, so it
	   takes the lighter button stop instead (4.51:1; Luca: "fix contrast, keep the
	   look"). Home 7 wide card: tan with black text, as Stylist (6.4:1). Home 7
	   narrow card: no hover on Stylist. */
	@media (hover: hover) and (pointer: fine) {
		.bd-promo--card .bd-btn--dark:hover { background: var(--bd-btn-light); }
		.bd-promo--wide .bd-btn--dark:hover { background: var(--bd-tan); color: var(--bd-black); }
	}
	.bd-promo--card .bd-btn--dark:focus-visible { background: var(--bd-btn-light); }
}

/* -------------------------------------------- eyebrow hover + stacked variant */
@layer components {
	/* Stylist's site-wide rule lifts every Jeg icon box (eyebrows, name boxes) 8px. */
	.bd-eyebrow, .bd-member__info { transition: transform 0.45s var(--bd-ease); }
	@media (hover: hover) and (pointer: fine) {
		.bd-eyebrow:hover, .bd-member__info:hover { transform: translateY(-8px); }
	}
	/* Icon on top, centred, at ≤1024 (Home 8): 34×42 slot, label margin 0 0 7px, widget -15px. */
	.bd-eyebrow--stack { flex-direction: column; align-items: center; gap: 0; margin-bottom: -15px; }
	.bd-eyebrow--stack .bd-eyebrow__mark { width: 34px; height: 34px; margin-bottom: 8px; }
	.bd-eyebrow--stack .bd-eyebrow__text { margin: 0 0 7px; }
	@media (min-width: 1025px) {
		.bd-eyebrow--stack { flex-direction: row; align-items: flex-start; gap: 15px; margin-bottom: 0; }
		.bd-eyebrow--stack .bd-eyebrow__mark { width: 38px; height: 38px; margin-bottom: 7px; }
		.bd-eyebrow--stack .bd-eyebrow__text { margin: 12px 0 0; }
	}
}

/* ----------------------------------------------------------- Home 8 team */
@layer components {
	.bd-team {
		display: flex; flex-direction: column; align-items: center; gap: 20px;
		width: 100%; max-width: var(--bd-boxed); margin-inline: auto;
		padding: calc(5 * var(--bd-body)) 0 0;
		overflow-x: clip; /* the 236px ring is wider than a phone column (as on Stylist) */
	}
	.bd-team__title {
		width: 80%; margin: 0; text-align: center;
		font: 500 var(--bd-h1)/1.3em var(--bd-font-display); letter-spacing: -1px; color: var(--bd-black);
	}
	.bd-team__title--h2 { font: 500 var(--bd-h2)/1.2em var(--bd-font-display); letter-spacing: 0.2px; }
	.bd-team__row {
		display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
		width: 100%; margin: 0; padding: 10px; list-style: none;
	}
	.bd-team__col {
		flex: 0 0 48%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
		gap: 20px; padding: 10px; min-width: 0;
	}

	/* Ring: 220px circle photo + padding + peach border (5+3 phone, 7+3 tablet/laptop, 10+4 desktop). */
	.bd-member {
		position: relative; overflow: hidden; flex: none;
		width: max-content; max-width: min(248px, 100%); margin-inline: auto; /* capped by the column: clips to a capsule on phones, as Stylist */
		padding: 5px; border: 3px solid var(--bd-peach); border-radius: 300px;
	}
	.bd-member__photo { display: block; width: 220px; height: 220px; object-fit: cover; border-radius: 50%; }
	.bd-member::before {
		content: ""; position: absolute; left: 0; top: 100%; z-index: 1; width: 100%; height: 100%;
		background: rgba(0, 0, 0, 0.7); opacity: 0; visibility: hidden;
		transition: all 0.4s var(--bd-ease) 0.2s;
	}
	.bd-member__hover {
		position: absolute; left: 0; top: 50%; z-index: 2; width: 100%; text-align: center;
		transform: translateY(-20%); opacity: 0; visibility: hidden;
		transition: all 0.3s var(--bd-ease);
	}
	.bd-member__socials { display: flex; justify-content: center; gap: 0; margin: 0; padding: 0; list-style: none; line-height: 36px; }
	.bd-member__socials li { margin: 0; }
	.bd-member__social {
		display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
		width: 30px; height: 30px; border-radius: 50%;
		background: var(--bd-accent); color: var(--bd-white);
		transition: all 0.3s;
	}
	.bd-member__social .lw-icon { width: 8px; height: 8px; }

	.bd-member__info { text-align: center; }
	.bd-member__name {
		margin: 0 0 5px;
		font: 500 var(--bd-f23)/1.3em var(--bd-font-display); letter-spacing: -0.5px; color: var(--bd-accent);
	}
	.bd-member__role {
		margin: 0;
		font: 400 var(--bd-f14)/1.5em var(--bd-font-text); letter-spacing: 0.5px; color: var(--bd-secondary);
	}

	/* Overlay shows on hover (pointer devices) and on keyboard focus inside. */
	.bd-member:focus-within::before { top: 0; opacity: 1; visibility: visible; transition-delay: 0s; }
	.bd-member:focus-within .bd-member__hover { transform: translateY(-50%); opacity: 1; visibility: visible; transition-delay: 0.1s; }
	@media (hover: hover) and (pointer: fine) {
		.bd-member:hover::before { top: 0; opacity: 1; visibility: visible; transition-delay: 0s; }
		.bd-member:hover .bd-member__hover { transform: translateY(-50%); opacity: 1; visibility: visible; transition-delay: 0.1s; }
		.bd-member__social:hover { background: var(--bd-peach); color: var(--bd-black); }
		.bd-member__social:hover .lw-icon { animation: bd-icon-y 0.4s forwards; }
	}
	@keyframes bd-icon-y {
		49% { transform: translateY(100%); }
		50% { opacity: 0; transform: translateY(-100%); }
		51% { opacity: 1; }
	}

	@media (min-width: 768px) {
		.bd-team__title { width: 50%; }
		.bd-team__row { flex-wrap: nowrap; gap: 0; margin-top: 30px; }
		.bd-team__col { flex: 1 1 0; justify-content: center; }
		.bd-member { padding: 7px; }
		.bd-member__socials { gap: 7px; }
		.bd-member__social .lw-icon { width: 12px; height: 12px; }
		.bd-member__role { line-height: 1em; }
	}
	@media (min-width: 1025px) {
		.bd-team__title { width: 40%; }
		.bd-team__row { gap: 20px; }
	}
	@media (min-width: 1367px) {
		.bd-member { padding: 10px; border-width: 4px; }
	}
}

/* ---------------------------------------------------------------- footer */
@layer components {
	.bd-footer { position: relative; display: flow-root; } /* keep the strip margin inside (Stylist: no collapse) */

	/* Footer 1: Instagram strip. */
	.bd-insta {
		position: relative; z-index: 1;
		display: flex; flex-direction: column; gap: 20px;
		width: 100%; max-width: var(--bd-boxed); margin: 30px auto 0;
		padding: calc(2 * var(--bd-body)) 0 0;
		background: var(--bd-white); border-bottom: 0.8px solid var(--bd-border);
	}
	.bd-insta__head { padding: 0 10px; text-align: center; }
	.bd-insta__sub {
		margin: 5px 0 0;
		font: 400 14px/1.7em var(--bd-font-text); letter-spacing: 0.5px; color: var(--bd-secondary);
	}
	.bd-insta__title {
		margin: 0;
		font: 700 var(--bd-f27)/1.3em var(--bd-font-display); letter-spacing: -0.5px; color: var(--bd-accent);
	}
	.bd-insta__title a { color: inherit; text-decoration: none; transition: color 0.3s; }
	.bd-insta__row {
		display: flex; flex-wrap: wrap; justify-content: center; gap: 5px;
		margin: 0 0 -75px; padding: 10px; list-style: none;
	}
	.bd-insta__col { flex: 0 0 32%; min-width: 0; padding: 0; }
	/* Stylist look (team-card CSS leaking onto these tiles): a 220px circle
	   inside a 15px-radius card that clips it when the card is narrower. */
	.bd-insta__tile {
		position: relative; overflow: hidden; width: 100%; max-width: 248px; height: 220px;
		margin-inline: auto; border-radius: 15px;
	}
	.bd-insta__img { display: block; width: 220px; max-width: 220px; height: 220px; object-fit: cover; border-radius: 50%; margin-inline: auto; }
	.bd-insta__tile::before {
		content: ""; position: absolute; left: 0; top: 100%; z-index: 1; width: 100%; height: 100%;
		background: rgba(0, 0, 0, 0.7); opacity: 0; visibility: hidden; transition: all 0.4s var(--bd-ease) 0.2s;
	}
	.bd-insta__hover {
		position: absolute; left: 0; top: 50%; z-index: 2; width: 100%; text-align: center;
		transform: translateY(-20%); opacity: 0; visibility: hidden; transition: all 0.3s var(--bd-ease);
	}
	.bd-insta__icon { width: 36px; height: 36px; }
	.bd-insta__icon .lw-icon { width: 16px; height: 16px; }

	/* Footer 2: cream, palm shadow bottom-right. */
	.bd-foot { position: relative; isolation: isolate; background: var(--bd-cream); padding: calc(7 * var(--bd-body)) 0 calc(3 * var(--bd-body)); }
	.bd-foot::before {
		content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.4;
		background: url("../img/palm-shadow.png") right bottom / 21% auto no-repeat;
	}
	.bd-foot__inner { display: flex; flex-direction: column; width: 100%; max-width: var(--bd-boxed); margin-inline: auto; }
	.bd-foot__map {
		display: flex; flex-direction: column; justify-content: center; align-items: center;
		min-height: 20vh; padding: 10px;
		background: center / cover no-repeat;
	}
	/* Stylist: ElementsKit prints a non-breaking space (a 36px line) above the pin. */
	.bd-foot__pin { width: 20%; padding: 36px 0 12px; line-height: 0; }
	.bd-foot__pin .lw-icon { width: 100%; height: auto; }
	.bd-foot__info { display: flex; flex-direction: column; gap: 20px; padding: 10px; }
	.bd-foot__upper { display: flex; flex-wrap: wrap; gap: 20px; padding: 0 5px; border-bottom: 1px solid var(--bd-peach); }
	.bd-foot__services { flex: 0 1 41%; display: flex; flex-direction: column; gap: 20px; padding: 0; }
	.bd-foot__hours { flex: 0 1 52%; display: flex; flex-direction: column; gap: 20px; padding: 0; }
	.bd-foot__heading {
		margin: 0;
		font: 600 var(--bd-h5)/1.3em var(--bd-font-text); letter-spacing: 0.5px; color: var(--bd-accent);
	}
	.bd-foot__links { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
	.bd-foot__links li { padding-bottom: 5px; font-size: var(--bd-f16); line-height: 1.5; } /* Elementor icon list: 5px padding + 5px margin */
	.bd-foot__links a {
		font: 400 var(--bd-f16)/1.5em var(--bd-font-text); letter-spacing: 0.2px; color: var(--bd-secondary);
		text-decoration: none; transition: color 0.3s;
	}
	.bd-hours { width: 100%; margin: -30px 0 0 -19px; padding: 19px 20px; } /* ElementsKit box (measured); fixed 100% width, so the margin shifts it */
	/* Phones: day above time (Stylist's rows are plain blocks there); flex from tablet. */
	.bd-hours__row { display: block; padding: 10px 0; border-bottom: 0.8px solid var(--bd-border); }
	.bd-hours__row:last-child { border-bottom: 0; }
	.bd-hours__day { font: 700 16px/2em var(--bd-font-text); font-size: 16px; line-height: calc(2 * var(--bd-body)); letter-spacing: -0.3px; color: var(--bd-secondary); }
	.bd-hours__time { margin: 0; font: 400 var(--bd-f16)/1.5em var(--bd-font-text); letter-spacing: 0.2px; color: var(--bd-accent); }

	.bd-foot__lower { display: flex; flex-direction: column; gap: 20px; padding: 10px; }
	.bd-foot__contact { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 10px; }
	.bd-foot__contact-title {
		margin: 0;
		font: 600 var(--bd-h4)/1.3em var(--bd-font-text); letter-spacing: 0.3px; color: var(--bd-accent);
	}
	.bd-foot__row { display: flex; flex-wrap: wrap; column-gap: 10px; margin: 0; }
	.bd-foot__row b { font: 700 var(--bd-body)/2em var(--bd-font-text); color: var(--bd-accent); }
	.bd-foot__row :is(a, span) {
		align-self: center;
		font: 400 var(--bd-f16)/1.5em var(--bd-font-text); letter-spacing: 0.2px; color: var(--bd-black);
		text-decoration: none; transition: color 0.3s;
	}
	.bd-foot__buttons { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 10px; }
	/* Stylist: 214deg #995A32 to #F4AC7C under white text; contrast-fixed like every button. */
	.bd-fbtn {
		display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
		padding: 14px 40px;
		background-image: linear-gradient(214deg, var(--bd-btn-deep) 0%, var(--bd-btn-light) 100%);
	}
	.bd-fbtn .bd-fbtn__icon { position: relative; z-index: 1; width: 1em; height: 1em; flex: none; }
	.bd-foot__buttons .bd-btn-wrap { padding-bottom: 12px; } /* the button widget's text-line slack on Stylist (measured 65px rhythm) */
	span.bd-fbtn { cursor: default; }

	/* Footer 3: copyright bar. */
	.bd-bar { background: var(--bd-accent); color: var(--bd-white); padding: 10px 0; }
	.bd-bar__inner {
		display: flex; flex-direction: column; align-items: center; gap: 10px;
		width: 100%; max-width: var(--bd-boxed); margin-inline: auto; text-align: center;
	}
	.bd-bar__nav, .bd-bar__copy { padding: 10px; }
	.bd-bar__links { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 6px; margin: 0; padding: 0; list-style: none; }
	.bd-bar__links li { position: relative; display: flex; align-items: center; padding: 0 12.5px; }
	.bd-bar__links li + li::before {
		content: ""; position: absolute; left: 0; top: 50%; height: 45%; transform: translateY(-50%);
		border-left: 1px solid #DDDDDD;
	}
	.bd-bar__links a {
		font: 400 var(--bd-f14)/1.5em var(--bd-font-text); letter-spacing: 0.5px; color: var(--bd-white);
		text-decoration: none; transition: color 0.3s;
	}
	.bd-bar__copy { margin: 0; font: 400 var(--bd-f16)/1.5em var(--bd-font-text); }

	@media (min-width: 768px) {
		.bd-insta__row { gap: 0; }
		.bd-insta__col { flex: 0 0 33%; padding: 10px; }
		.bd-foot__map { min-height: 30vh; background-size: 100% auto; background-position: center; }
		.bd-foot__pin { width: 9%; }
		.bd-foot__info { flex-direction: row; }
		.bd-foot__upper { flex: 0 1 50%; padding: 0 10px 30px; align-content: flex-start; }
		.bd-foot__services { flex-basis: 47%; padding: 10px; }
		.bd-foot__hours { flex-basis: 94%; padding: 10px; }
		.bd-hours { margin-left: -15px; }
		.bd-foot__lower { flex: 0 1 50%; }
		.bd-hours__row { display: flex; justify-content: space-between; gap: 10px; }
		.bd-hours__day { font-size: 17px; }
		.bd-bar__inner { flex-direction: row; justify-content: space-between; text-align: start; }
		.bd-bar__nav, .bd-bar__copy { flex: 1 1 50%; }
		.bd-bar__copy { text-align: end; }
		.bd-bar__links { justify-content: flex-start; }
		.bd-bar__links li { padding: 0 14.5px; }
		.bd-bar__links li:first-child { padding-left: 0; }
	}
	@media (min-width: 1025px) {
		.bd-insta__row { flex-wrap: nowrap; }
		.bd-insta__col { flex: 1 1 0; }
		.bd-foot__inner { flex-direction: row; }
		.bd-foot__map { flex: 0 1 60%; min-height: 0; background-size: cover; background-position: 0 0; }
		.bd-foot__pin { width: 14%; }
		.bd-foot__info { flex: 0 1 50%; flex-direction: column; }
		.bd-foot__upper { flex: none; flex-wrap: nowrap; }
		/* Measured split on Stylist: services 37.5% / hours 62.5% of the row minus the gap. */
		.bd-foot__services { flex: 0 0 calc((100% - 20px) * 0.375); }
		.bd-foot__hours { flex: 1 1 0; }
		.bd-hours__day { font-size: 16px; }
		.bd-foot__lower { flex: none; flex-direction: row; }
		.bd-foot__contact { flex: 0 1 60%; }
		.bd-foot__row { flex-direction: column; }
		.bd-foot__row :is(a, span) { align-self: flex-start; }
		.bd-foot__buttons { flex: 0 1 75%; justify-content: center; }
		.bd-bar__links a { line-height: 1em; }
	}
	@media (min-width: 1367px) {
		.bd-insta { margin-top: 60px; }
		.bd-foot__row { flex-direction: row; }
		.bd-foot__row :is(a, span) { align-self: center; }
		.bd-foot__buttons { justify-content: space-between; }
	}

	@media (hover: hover) and (pointer: fine) {
		.bd-insta__title a:hover { color: var(--bd-black); }
		.bd-insta__tile:hover::before { top: 0; opacity: 1; visibility: visible; transition-delay: 0s; }
		.bd-insta__tile:hover .bd-insta__hover { transform: translateY(-50%); opacity: 1; visibility: visible; transition-delay: 0.1s; }
		.bd-insta__icon:hover { background: var(--bd-peach); color: var(--bd-black); }
		.bd-foot__links a:hover, .bd-foot__row a:hover { color: var(--bd-accent); }
		a.bd-fbtn:hover::after { opacity: 1; }
		.bd-bar__links a:hover { color: var(--bd-peach-light); }
	}
}

/* ------------------------------------------------------ inner page hero */
@layer components {
	/* Stylist: Kava's breadcrumb row (20px + 51px) sits above #content on inner pages. */
	body.bd-inner .bd-main { margin-top: 101px; }

	/* Only the 70% overlay renders on Stylist (BG-09 over white). */
	.bd-phero { position: relative; isolation: isolate; }
	.bd-phero::before {
		content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.7;
		background: url("../img/hero-bg-mobile.jpg") center left / cover no-repeat;
	}
	.bd-page-contact .bd-phero::before { background-image: url("../img/inner-bg-contact.jpg"); } /* BG-010 on phones */
	.bd-phero__inner {
		display: flex; flex-direction: column; justify-content: space-around;
		width: 100%; max-width: var(--bd-boxed); margin-inline: auto;
		padding: calc(9 * var(--bd-body)) 0 20px; /* 20px: Stylist's empty image column (padding 10px) still stacks under the text on phones */
	}
	.bd-phero__text { display: flex; flex-direction: column; gap: 20px; padding: 10px; text-align: center; }
	.bd-phero__aside { display: none; }

	.bd-crumbs__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0; padding: 0; list-style: none; }
	.bd-crumbs__item {
		position: relative; margin-right: 33px;
		font: 400 var(--bd-eyebrow)/1.4em var(--bd-font-eyebrow); letter-spacing: 1px; text-transform: uppercase;
		color: var(--bd-accent);
	}
	.bd-crumbs__item:last-child { margin-right: 0; }
	.bd-crumbs__item + .bd-crumbs__item::before {
		content: ""; position: absolute; left: -16.5px; top: 50%; height: 50%; transform: translateY(-50%);
		border-left: 0.8px solid var(--bd-accent);
	}
	.bd-crumbs__item a { color: inherit; text-decoration: none; }

	.bd-phero__title {
		margin: 15px 0;
		font: 500 var(--bd-h2)/1.2em var(--bd-font-display); letter-spacing: 0.2px;
		color: var(--bd-secondary);
	}
	.bd-phero__focus { display: inline-block; color: var(--bd-accent); } /* wraps as one unit */

	@media (min-width: 768px) {
		.bd-phero::before, .bd-page-contact .bd-phero::before { background-image: url("../img/hero-bg-mobile.jpg"); background-position: top center; }
		.bd-page-about .bd-phero::before, .bd-page-hair-treatments .bd-phero::before, .bd-page-faq .bd-phero::before { background-size: contain; }
		.bd-phero__inner { flex-direction: row; padding-bottom: calc(2 * var(--bd-body)); }
		.bd-page-services .bd-phero__inner, .bd-page-pricing .bd-phero__inner { padding: calc(10 * var(--bd-body)) 0 calc(3 * var(--bd-body)); }
		.bd-phero__text { flex: 0 1 80%; text-align: start; }
		.bd-phero__aside { display: block; flex: 0 1 50%; padding: 10px; }
		.bd-crumbs__list { justify-content: flex-start; }
	}
	@media (min-width: 1025px) {
		.bd-phero::before { background-size: cover; }
		.bd-page-about .bd-phero::before, .bd-page-hair-treatments .bd-phero::before, .bd-page-faq .bd-phero::before { background-size: cover; }
		.bd-phero__inner { padding: calc(9 * var(--bd-body)) 0 var(--bd-body); }
		.bd-page-services .bd-phero__inner, .bd-page-pricing .bd-phero__inner { padding: calc(12 * var(--bd-body)) 0 calc(3 * var(--bd-body)); }
		.bd-phero__text { flex-basis: 50%; }
	}
	@media (min-width: 1367px) {
		.bd-phero__inner { padding: calc(12 * var(--bd-body)) 0 calc(3 * var(--bd-body)); }
	}
	@media (hover: hover) and (pointer: fine) {
		.bd-crumbs__item a { transition: color 0.3s; }
	}
}

/* ------------------------------------------------------------ About 2–6 */
@layer components {
	.bd-accent { color: var(--bd-accent); }

	/* About 2: welcome split. */
	.bd-welcome__inner { display: flex; flex-direction: column; width: 100%; max-width: var(--bd-boxed); margin-inline: auto; }
	.bd-welcome__media, .bd-welcome__text { padding: 10px; }
	.bd-welcome__text { display: flex; flex-direction: column; justify-content: center; gap: 20px; }
	/* 14px frame: peach on the left 35% only (hard stop), white elsewhere. */
	.bd-welcome__frame { width: 100%; padding: 14px; border-radius: 15px; background: linear-gradient(90deg, var(--bd-peach) 35%, var(--bd-white) 0%); }
	.bd-welcome__frame img { display: block; width: 100%; height: auto; border-radius: 15px; }
	.bd-welcome__title { margin: 0; font: 500 var(--bd-h2)/1.2em var(--bd-font-display); letter-spacing: 0.2px; color: var(--bd-secondary); }
	.bd-welcome__p, .bd-salon__p { margin: 0 0 1em; color: var(--bd-text); }

	/* About 3: feature boxes on white → peach (bottom 33%). Icon left at ≤1024. */
	.bd-abfeat { background: linear-gradient(180deg, var(--bd-white) 67%, var(--bd-peach) 0%); }
	.bd-abfeat__inner { display: flex; flex-wrap: wrap; width: 100%; max-width: var(--bd-boxed); margin-inline: auto; }
	.bd-abfeat__cell { flex: 0 0 100%; padding: 10px; }
	.bd-abfeat .bd-feature { flex-direction: row; align-items: flex-start; text-align: start; }
	.bd-abfeat .bd-feature__icon { flex: none; width: 55px; height: 40px; margin: 0 25px 0 0; }
	.bd-abfeat .bd-feature__icon img { width: 55px; height: 55px; margin: 0; }
	.bd-abfeat .bd-feature__title { margin: 0 0 10px; }

	/* About 4: photo band. */
	.bd-band {
		display: flex; flex-direction: column; gap: 10px;
		padding: 0 0 calc(3 * var(--bd-body));
		background: linear-gradient(180deg, var(--bd-peach) 50%, var(--bd-cream) 0%);
	}
	.bd-band__col { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; padding: 10px; }
	.bd-band__col--edge { display: none; }
	.bd-band__col--b, .bd-band__col--d { flex-direction: row; gap: 15px; }
	.bd-band__col--b > *, .bd-band__col--d > * { flex: 1 1 0; }
	.bd-band__col--c { margin: -15px 0; }
	.bd-band__tall, .bd-band__short { height: 20vh; }
	.bd-band__centre { height: 56vh; }

	/* About 5: counters (1140px box, cream). */
	.bd-counts { background: var(--bd-cream); padding: 10px 0; }
	.bd-counts__inner { display: flex; flex-wrap: wrap; width: 100%; max-width: 1140px; margin: 0 auto; padding: 0; list-style: none; }
	.bd-count { flex: 0 0 50%; padding: 10px; text-align: center; }
	.bd-count__num { margin: 0; font: 500 var(--bd-counter)/1.3 var(--bd-font-text); letter-spacing: -1px; color: var(--bd-accent); }
	.bd-count__plus { position: relative; top: -5px; vertical-align: super; font: 600 var(--bd-h5)/1.3 var(--bd-font-text); letter-spacing: 0.5px; color: var(--bd-text); }
	.bd-count__label { margin: 0; font: 400 var(--bd-f16)/1.5 var(--bd-font-text); letter-spacing: 0.2px; color: var(--bd-text); }

	/* About 6: our salon + mission / vision (cream). */
	.bd-salon { background: var(--bd-cream); padding: calc(3 * var(--bd-body)) 0; }
	.bd-salon__inner { display: flex; flex-direction: column; justify-content: space-around; width: 100%; max-width: var(--bd-boxed); margin-inline: auto; }
	.bd-salon__intro { display: flex; flex-direction: column; justify-content: center; padding: 10px; }
	.bd-salon__intro-box { display: flex; flex-direction: column; gap: 20px; }
	.bd-salon__title { margin: 0; font: 500 var(--bd-h2)/1.2em var(--bd-font-display); letter-spacing: 0.2px; color: var(--bd-black); }
	.bd-salon__aims { display: flex; flex-direction: column; gap: 20px; padding: 10px; }
	.bd-aim { align-self: flex-start; transition: transform 0.45s var(--bd-ease); }
	.bd-aim--mission { padding-bottom: 30px; border-bottom: 1px solid var(--bd-peach); }
	.bd-aim__title { margin: 25px 0 10px; font: 700 var(--bd-f27)/1.3 var(--bd-font-display); letter-spacing: -0.5px; color: var(--bd-accent); transition: color 0.45s var(--bd-ease); }
	.bd-aim__p { margin: 0; color: var(--bd-text); }

	@media (min-width: 768px) {
		.bd-welcome__inner { flex-direction: row; }
		.bd-welcome__media { flex: 0 1 60%; }
		.bd-welcome__text { flex: 0 1 40%; }
		.bd-welcome__frame { width: 90%; }

		.bd-abfeat { padding: calc(3 * var(--bd-body)) 0; }
		.bd-abfeat__cell { flex-basis: 50%; }

		.bd-band { flex-direction: row; justify-content: space-between; padding: calc(3 * var(--bd-body)) 0; }
		.bd-band__col--b, .bd-band__col--d { flex: 0 1 30%; flex-direction: column; }
		.bd-band__col--b > *, .bd-band__col--d > * { flex: none; }
		.bd-band__col--c { flex: 0 1 40%; margin: 0; }
		.bd-band__tall { height: 23vh; }
		.bd-band__centre { height: 45vh; }

		.bd-count { flex-basis: 25%; }

		.bd-salon__inner { flex-direction: row; }
		.bd-salon__intro { flex: 0 1 50%; }
		.bd-salon__aims { flex: 0 1 35%; }
		.bd-aim__title { font-size: var(--bd-f27); }
	}
	@media (min-width: 1025px) {
		.bd-welcome { padding: calc(3 * var(--bd-body)) 0; }
		.bd-abfeat__cell { flex-basis: 25%; }
		.bd-abfeat .bd-feature { flex-direction: column; align-items: stretch; text-align: center; }
		.bd-abfeat .bd-feature__icon { width: auto; height: 46px; margin: 0 0 13px; }
		.bd-abfeat .bd-feature__icon img { width: 65px; height: 65px; margin-inline: auto; }
		.bd-abfeat .bd-feature__title { margin: 25px 0 10px; }

		.bd-band__col--edge { display: block; flex: 0 1 8%; padding: 0; }
		.bd-band__col--b, .bd-band__col--d { flex-basis: 22%; }
		.bd-band__tall { height: 35vh; }
		.bd-band__centre { height: 56vh; }

		.bd-salon__intro-box { width: 90%; padding: 10px; }
	}
	@media (hover: hover) and (pointer: fine) {
		.bd-aim:hover { transform: translateY(-8px); }
		.bd-aim:hover .bd-aim__title { color: var(--bd-black); }
	}
}

/* ------------------------------------------------------------------- 404 */
@layer components {
	.bd-404 { position: relative; isolation: isolate; }
	.bd-404::before {
		content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.7;
		background: url("../img/hero-bg-mobile.jpg") 50% 0 / cover no-repeat; /* BG-09 */
	}
	.bd-404__inner {
		display: flex; flex-direction: column; align-items: center; gap: 20px;
		width: 100%; max-width: var(--bd-boxed); margin-inline: auto;
		padding: calc(9 * var(--bd-body) + 10px) 10px calc(var(--bd-body) + 10px);
		text-align: center;
	}
	.bd-404__label { margin: 0 0 6px; /* measured: illustration starts 57px below the label top */ font: 600 24px/1.3 var(--bd-font-text); color: var(--bd-secondary); }
	.bd-404__img img { display: block; width: 560px; max-width: 100%; height: auto; margin-inline: auto; }
	.bd-404__title { margin: 0; font: 400 var(--bd-h3)/1.2em var(--bd-font-display); letter-spacing: 0; color: var(--bd-secondary); }
	.bd-404__text { max-width: 498px; margin: 0 0 18px; color: var(--bd-text); }
	html.js .bd-reveal--up.is-in { animation-name: bd-fade-in-up; }
	@keyframes bd-fade-in-up { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
}

/* ------------------------------------------------------------ price list */
@layer components {
	.bd-prices { padding: calc(5 * var(--bd-body)) 0; }
	.bd-prices--pricing { padding: 0 0 calc(2 * var(--bd-body)); }
	.bd-prices__inner {
		display: flex; flex-wrap: wrap; gap: 40px 20px;
		width: 100%; max-width: var(--bd-boxed); margin-inline: auto;
	}
	.bd-pgroup { flex: 0 0 100%; min-width: 0; padding: 0 20px; }
	/* Jeg heading with a 4px gradient bar 30px left of the text. */
	.bd-pgroup__title {
		position: relative; padding-left: 30px;
		margin: 15px 0 45px; /* measured: first row 45px below the title */
		font: 700 var(--bd-f27)/1.3 var(--bd-font-display); letter-spacing: -0.5px; color: var(--bd-black);
	}
	.bd-pgroup__list { margin: 0; }
	.bd-pgroup__title::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--bd-accent) 0%, var(--bd-peach) 100%); }
	.bd-prow { display: flex; align-items: center; padding: 10px 0 10px 20px; }
	.bd-prow:nth-child(odd) { background: rgb(244 198 175 / 0.15); } /* rows 1 and 3: faint peach band */
	.bd-prow__name { flex: 0 1 60%; min-width: 0; font: 400 var(--bd-f16)/1.5em var(--bd-font-text); letter-spacing: 0.2px; color: var(--bd-secondary); }
	.bd-prow__line { flex: 0 1 26%; margin: 0; border-top: 0.8px dashed var(--bd-accent); }
	.bd-prow__price { flex: 1 1 auto; margin: 0; text-align: end; font: 700 16px/1.5em var(--bd-font-text); letter-spacing: -0.3px; color: var(--bd-secondary); }
	@media (min-width: 768px) {
		.bd-pgroup { flex-basis: 47%; padding: 0 30px; }
	}
}

/* ---------------------------------------------------------- contact block */
@layer components {
	.bd-cblock__inner { display: flex; flex-direction: column; width: 100%; max-width: var(--bd-boxed); margin-inline: auto; }
	.bd-cblock--services, .bd-cblock--faq { padding-top: calc(2 * var(--bd-body)); }
	.bd-cblock__left, .bd-cblock__right { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 10px; }
	.bd-cblock__text { display: flex; flex-direction: column; gap: 20px; padding: 0; text-align: center; }
	.bd-cblock__eyebrow { align-self: center; }
	.bd-cblock__title { margin: 0; font: 500 var(--bd-h2)/1.2em var(--bd-font-display); letter-spacing: 0.2px; color: var(--bd-secondary); }
	.bd-cblock__p { margin: 0 0 1em; color: var(--bd-text); }

	/* Opening hours: the ElementsKit box (fixed width; negative margins shift it). */
	.bd-cblock__hours { display: flex; flex-direction: column; padding: 0; } /* 10px from tablet up (measured) */
	.bd-hours--contact { align-self: center; width: 60%; margin: -45px 0 -30px 0; padding: 20px; }
	.bd-hours--contact .bd-hours__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
	.bd-hours--contact .bd-hours__day,
	.bd-hours--contact .bd-hours__time { font: 700 16px/2em var(--bd-font-text); line-height: calc(2 * var(--bd-body)); letter-spacing: -0.3px; } /* body line box */
	.bd-hours--contact .bd-hours__day { color: var(--bd-secondary); }
	.bd-hours--contact .bd-hours__time { color: var(--bd-accent); }
	@media (max-width: 480px) {
		.bd-hours--contact .bd-hours__row { display: block; }
	}

	/* Hair / Skin variant: framed photo (peach on the left 35%), 32vh. */
	.bd-cblock__media { padding: 0; }
	.bd-cblock__frame { padding: 14px; border-radius: 15px; background: linear-gradient(90deg, var(--bd-peach) 35%, var(--bd-white) 0%); }
	.bd-cblock__frame img { display: block; width: 100%; height: 32vh; object-fit: cover; border-radius: 15px; }

	@media (min-width: 768px) {
		.bd-cblock__inner { flex-direction: row; }
		.bd-cblock__left, .bd-cblock__right { flex: 0 1 50%; }
		.bd-cblock--services { padding-top: calc(3 * var(--bd-body)); }
		.bd-cblock--faq { padding-top: calc(5 * var(--bd-body)); }
		.bd-cblock__text { padding: 10px; text-align: start; }
		.bd-cblock__eyebrow { align-self: flex-start; }
		.bd-cblock__hours { padding: 10px; }
		.bd-hours--contact { align-self: auto; width: 100%; margin: -60px 0 0 -15px; padding: 19px 20px; }
		.bd-hours--contact .bd-hours__day, .bd-hours--contact .bd-hours__time { font-size: 17px; }
		.bd-cblock__media { width: 90%; margin-top: -25px; }
	}
	@media (min-width: 1025px) {
		.bd-cblock__text, .bd-cblock__hours { width: 90%; }
		.bd-hours--contact { width: 85%; }
		.bd-hours--contact .bd-hours__day, .bd-hours--contact .bd-hours__time { font-size: 16px; }
	}
	@media (min-width: 1367px) {
		.bd-cblock--services { padding-top: calc(5 * var(--bd-body)); }
		.bd-cblock--contact, .bd-cblock--hairskin { padding-top: var(--bd-body); }
		.bd-hours--contact { width: 80%; margin: -30px 0 0 -17px; }
	}

	/* Contact 3: phone / email / address boxes. */
	.bd-cboxes { padding: calc(2 * var(--bd-body)) 0 0; }
	.bd-cboxes__inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 500px; margin: 0 auto; padding: 0; list-style: none; }
	.bd-cboxes__col { width: 80%; padding: 10px; }
	.bd-cboxes__col:nth-child(2) { border-top: 1px solid var(--bd-border); border-bottom: 1px solid var(--bd-border); }
	.bd-cbox {
		display: flex; align-items: flex-start; gap: 15px; margin: 10px 0;
		color: inherit; text-decoration: none; text-align: start;
		transition: transform 0.45s var(--bd-ease);
	}
	.bd-cbox__icon {
		flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-top: 6px;
		border-radius: 15px; background: var(--bd-accent); color: var(--bd-white);
		transition: all 0.4s var(--bd-ease);
	}
	.bd-cbox__icon .lw-icon { width: 20px; height: 20px; }
	.bd-cbox__body { display: flex; flex-direction: column; }
	.bd-cbox__title { font: 400 14px/1.7em var(--bd-font-text); letter-spacing: 0.5px; color: var(--bd-accent); transition: color 0.45s var(--bd-ease); }
	.bd-cbox__value { font: 600 var(--bd-h5)/1.3em var(--bd-font-text); letter-spacing: 0.5px; color: var(--bd-accent); transition: color 0.45s var(--bd-ease); }
	@media (min-width: 768px) {
		.bd-cboxes__inner { flex-direction: row; flex-wrap: wrap; align-items: stretch; max-width: var(--bd-boxed); }
		.bd-cboxes__col { width: 33.333%; display: flex; align-items: center; justify-content: center; }
		.bd-cboxes__col:nth-child(2) { border: 0; border-left: 1px solid var(--bd-border); border-right: 1px solid var(--bd-border); }
		.bd-cbox { display: block; margin: 0; }
		.bd-cbox__title { margin-top: 10px; }
	}
	@media (min-width: 1025px) {
		.bd-cbox { display: flex; gap: 14px; }
		.bd-cbox__icon { width: 55px; height: 55px; margin-top: 0; }
		.bd-cbox__icon .lw-icon { width: 32px; height: 32px; }
		.bd-cbox__title { margin-top: 0; }
	}
	@media (hover: hover) and (pointer: fine) {
		.bd-cbox:hover { transform: translateY(-8px); }
		.bd-cbox:hover .bd-cbox__icon { background: var(--bd-peach); color: var(--bd-black); }
		.bd-cbox:hover .bd-cbox__title { color: var(--bd-text); }
		.bd-cbox:hover .bd-cbox__value { color: var(--bd-black); }
	}
	a.bd-cbox:focus-visible { outline: 2px solid var(--bd-accent); outline-offset: 4px; }
}

/* ------------------------------------------------------ price highlights */
@layer components {
	.bd-offers__inner { display: flex; flex-wrap: wrap; gap: 20px; width: 100%; max-width: var(--bd-boxed); margin-inline: auto; padding: 10px; }
	.bd-offer {
		position: relative; isolation: isolate; overflow: hidden;
		flex: 0 0 100%; min-width: 0; min-height: 46vh;
		display: flex; flex-direction: column; justify-content: space-between;
		padding: 10px; border-radius: 15px;
	}
	.bd-offer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--art) bottom center / contain no-repeat; }
	.bd-offer--a { background-image: linear-gradient(140deg, var(--bd-tan) 0%, var(--bd-peach-light) 100%); }
	.bd-offer--b { align-items: center; background-image: linear-gradient(230deg, var(--bd-tan) 0%, var(--bd-peach-light) 100%); }
	.bd-offer--b::before { background-size: 80% auto; }
	.bd-offer--c { align-items: center; min-height: 51vh; background: var(--bd-peach-light); }
	.bd-offer--c::before { background-size: 65% auto; }

	.bd-offer__head { padding-top: 30px; margin-bottom: -13px; text-align: center; }
	.bd-offer__title { margin: 0; font: 400 var(--bd-h3)/1.2em var(--bd-font-display); letter-spacing: 0; color: var(--bd-black); }
	.bd-offer__focus { display: inline-block; font-weight: 700; } /* ElementsKit base: the focused word is a real bold */
	.bd-offer__text { margin: 7px 50px 0; color: var(--bd-secondary); }
	.bd-offer--b .bd-offer__text { margin-inline: 37px; }
	.bd-offer--c .bd-offer__text { margin-inline: 30px; }

	/* Badge: black circle bottom-right. */
	.bd-offer__badge {
		align-self: flex-end; display: flex; flex-direction: column; align-items: center;
		margin: 0; padding: 24px; border-radius: 50%; background: var(--bd-black); color: var(--bd-white); text-align: center;
	}
	.bd-offer__lead { margin: 15px 0; font: 400 var(--bd-f14)/1.5em var(--bd-font-text); letter-spacing: 0.5px; }
	.bd-offer__price { margin-top: -32px; }
	.bd-offer__cur { font: 600 var(--bd-h4)/1.3 var(--bd-font-text); letter-spacing: 0.3px; }
	.bd-offer__num { display: inline-block; font: 500 var(--bd-h2)/1.2 var(--bd-font-display); letter-spacing: 0.2px; }

	/* Stylist defect kept behind its own rule (Luca to decide): at ≤1024 the
	   badges shrink to 70% and shift; on phones card C's badge resets. */
	@media (max-width: 1024px) {
		.bd-offer__badge { transform: translate(24px, 12px) scale(0.7); }
		.bd-offer__price { margin-top: -28px; }
	}
	@media (max-width: 767px) {
		.bd-offer--c .bd-offer__badge { transform: none; }
	}

	@media (min-width: 768px) {
		.bd-offer { flex-basis: 29%; flex-shrink: 1; min-height: 35vh; }
		.bd-offer--b { flex-basis: 36%; }
		.bd-offer__text, .bd-offer--b .bd-offer__text, .bd-offer--c .bd-offer__text { margin: 7px 0 0; }
		.bd-offer__lead { line-height: 1em; }
	}
	@media (min-width: 1025px) {
		.bd-offer { min-height: 40vh; }
		.bd-offer--a { flex-basis: 30%; }
	}
	@media (min-width: 1367px) {
		.bd-offer { min-height: 48vh; }
		.bd-offer--c { flex-basis: 30%; }
		.bd-offer__text { margin: 7px 50px 0; }
		.bd-offer--b .bd-offer__text { margin: 7px 70px 0; }
		.bd-offer--c .bd-offer__text { margin: 7px 50px 0; }
	}
}

@layer components {
	/* Services page card rows (measured): no peach band, 1em / 3em bottom padding. */
	.bd-cards--svc.bd-cards--first { padding: 0 0 var(--bd-body); background: none; }
	.bd-cards--svc.bd-cards--next { padding-bottom: calc(3 * var(--bd-body)); }
}

/* ------------------------------------------------ Skin & Body treatment cards */
@layer components {
	.bd-treats__inner { display: flex; flex-wrap: wrap; gap: 20px; width: 100%; max-width: var(--bd-boxed); margin-inline: auto; padding: 10px; }
	.bd-treat {
		position: relative; isolation: isolate; overflow: hidden;
		flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start;
		padding: 10px; border: 1px solid var(--bd-peach); border-radius: 15px;
	}
	.bd-treat::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--art-m, none) bottom center / 85% auto no-repeat; }
	.bd-treat--1 { min-height: 56vh; background-image: linear-gradient(140deg, var(--bd-tan), var(--bd-peach-light)); }
	.bd-treat--2 { min-height: 55vh; border-color: var(--bd-border); background: #F5F5F5 var(--bg-m, var(--bg, none)) center right / cover no-repeat; }
	.bd-treat--3 { min-height: 51vh; justify-content: center; border-color: var(--bd-border); background: #F5F5F5 var(--bg, none) center right / contain no-repeat; }
	.bd-treat--4 { min-height: 54vh; background-image: linear-gradient(250deg, var(--bd-accent), var(--bd-peach-light)); }
	.bd-treat--4::before { background-size: auto; }

	.bd-treat__inner { display: flex; flex-direction: column; gap: 20px; margin: 20px 0 0; text-align: center; }
	.bd-treat--2 .bd-treat__inner { margin-top: 19px; }
	.bd-treat--3 .bd-treat__inner { margin: 0 0 0 10px; text-align: start; }
	.bd-treat__head { margin-bottom: -13px; }
	.bd-treat--1 .bd-treat__head { margin-bottom: -20px; }
	.bd-treat__title { margin: 0; font: 400 var(--bd-h3)/1.2em var(--bd-font-display); letter-spacing: 0; color: var(--bd-black); }
	.bd-treat__text { margin: 7px 0 0; color: var(--bd-secondary); }
	.bd-treat__link {
		align-self: center; display: inline-flex; align-items: center; gap: 5px;
		font: 500 var(--bd-button)/1 var(--bd-font-button); letter-spacing: 0.5px; text-transform: capitalize;
		color: var(--bd-black); text-decoration: none; white-space: nowrap;
		transition: all 0.4s var(--bd-ease);
	}
	.bd-treat--3 .bd-treat__link { align-self: flex-start; }
	.bd-treat__link .lw-icon { width: 1em; height: 1em; }

	@media (min-width: 768px) {
		.bd-treat { min-height: 35vh; justify-content: center; }
		.bd-treat::before { background: var(--art, none) 125px 0 / contain no-repeat; }
		.bd-treat--4::before { background-position: 150px 0; }
		.bd-treat--1 { flex-basis: 49%; min-height: 34vh; }
		.bd-treat--2 { flex-basis: 48%; background-image: var(--bg, none); }
		.bd-treat--3 { flex-basis: 38%; }
		.bd-treat--4 { flex-basis: 60%; }
		.bd-treat__inner, .bd-treat--2 .bd-treat__inner, .bd-treat--3 .bd-treat__inner { margin: 0 0 0 15px; text-align: start; }
		.bd-treat__head, .bd-treat--1 .bd-treat__head { margin-bottom: -13px; }
		.bd-treat--1 .bd-treat__head { margin-bottom: -10px; }
		.bd-treat__link { align-self: flex-start; }
	}
	@media (min-width: 1025px) {
		.bd-treat, .bd-treat--1 { min-height: 34vh; }
		.bd-treat::before, .bd-treat--4::before { background-position: bottom right; }
		.bd-treat--1 { flex-basis: 50%; }
		.bd-treat--2 .bd-treat__text, .bd-treat--4 .bd-treat__text { margin-right: 275px; }
	}
	@media (min-width: 1367px) {
		.bd-treat--1, .bd-treat--2 { min-height: 30vh; }
		.bd-treat--3, .bd-treat--4 { min-height: 36vh; }
		.bd-treat--2 { background-size: contain; }
		.bd-treat__inner, .bd-treat--2 .bd-treat__inner, .bd-treat--3 .bd-treat__inner { margin-left: 45px; }
	}
	@media (hover: hover) and (pointer: fine) {
		.bd-treat--1 .bd-treat__link:hover, .bd-treat--4 .bd-treat__link:hover { color: var(--bd-white); }
		.bd-treat--2 .bd-treat__link:hover, .bd-treat--3 .bd-treat__link:hover { color: var(--bd-accent); }
	}
}

@layer components {
	/* Inner-page variants (measured on Teams / Skin & Body). */
	.bd-reviews--inner { padding-bottom: calc(5 * var(--bd-body)); }
	.bd-team--page { padding: calc(2 * var(--bd-body)) 0 calc(3 * var(--bd-body)); }
}

/* ---------------------------------------------------------- FAQ accordions */
@layer components {
	.bd-faq__inner { display: flex; flex-direction: column; width: 100%; max-width: var(--bd-boxed); margin-inline: auto; padding: 10px; }
	.bd-faq__col { padding: 10px; }
	.bd-faq__list { width: 100%; margin: 0 10px; } /* Stylist: full width plus a 10px left margin, so it runs 10px past the column (measured) */
	.bd-faq-item { margin: 10px 0; border-bottom: 0.8px solid var(--bd-border); }
	.bd-faq-item__q {
		position: relative; display: block; cursor: pointer; list-style: none;
		border: 1px solid transparent; /* Jeg's header button has its own 1px border inside the item's bottom rule (measured 67.1px item) */
		padding: 20px 10px 20px 0;
		font: 600 var(--bd-h5)/1.3 var(--bd-font-text); letter-spacing: 0.5px; color: var(--bd-secondary);
	}
	.bd-faq-item__q::-webkit-details-marker { display: none; }
	.bd-faq-item__title { display: inline-block; padding-right: 10px; }
	/* Stylist: the open question turns brown and jumps up 10px, instantly. */
	.bd-faq-item[open] > .bd-faq-item__q { margin-top: -10px; color: var(--bd-accent); }
	.bd-faq-item__q .lw-icon { position: absolute; right: 30px; top: 20px; margin-top: 20px; width: 10px; height: 10px; color: var(--bd-black); }
	.bd-faq-item__minus, .bd-faq-item[open] .bd-faq-item__plus { display: none; }
	.bd-faq-item[open] .bd-faq-item__minus { display: block; }
	.bd-faq-item__a { padding: 0 0 10px 5px; }
	.bd-faq-item__a p { margin: 0; font: 400 14px/1.7em var(--bd-font-text); letter-spacing: 0.5px; color: var(--bd-text); }
	.bd-faq-item__q:focus-visible { outline: 2px solid var(--bd-accent); outline-offset: 2px; }
	@media (prefers-reduced-motion: no-preference) {
		@supports (interpolate-size: allow-keywords) {
			.bd-faq { interpolate-size: allow-keywords; }
			.bd-faq-item::details-content { height: 0; overflow: clip; transition: height 0.4s var(--bd-ease-swing), content-visibility 0.4s allow-discrete; }
			.bd-faq-item[open]::details-content { height: auto; }
		}
	}
	@media (min-width: 768px) {
		.bd-faq__inner { flex-direction: row; }
		.bd-faq__col { flex: 1 1 50%; min-width: 0; }
		.bd-faq__list { margin: 0; }
		.bd-faq-item__q { padding: 20px; }
		.bd-faq-item__q .lw-icon { top: 50%; margin-top: -7.5px; width: 15px; height: 15px; }
		.bd-faq-item__a { padding: 0 70px 15px 23px; }
	}
	@media (min-width: 1367px) {
		.bd-faq__list { width: 95%; }
	}
}

/*
 * Unlayered overrides: WordPress core prints unlayered element styles (e.g.
 * figure { margin: 0 0 1em }) that beat every @layer rule. Keep this small.
 */
.bd-review { margin: 0; }