/* ==========================================================================
   Hair Noard Elementor Widgets ? Frontend styles
   Hero widget below. Other widgets append their own sections.
   ========================================================================== */

/* ---------- Hero ---------- */
.hairnoard-hero {
	position: relative;
	overflow: hidden;
	/* Top padding clears the fixed floating navbar so eyebrow stays visible */
	padding: calc(var(--header-h, 84px) + var(--header-gap, 14px) + 28px) 24px 64px;
	background: #0c1a33;
	color: #ffffff;
}

.hairnoard-hero__bg {
	position: absolute; inset: 0; z-index: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.hairnoard-hero__overlay {
	position: absolute; inset: 0; z-index: 1;
	background: rgba(8, 16, 32, 0.42);
	pointer-events: none;
}

.hairnoard-hero__inner {
	position: relative; z-index: 2;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 64px;
	align-items: center;
}

/* ----- Left side ----- */
.hairnoard-hero__eyebrow {
	display: inline-flex; align-items: center;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: .78rem; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.14);
	padding: 7px 14px;
	border-radius: 999px;
	margin-bottom: 18px;
}

.hairnoard-hero__title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: clamp(2.4rem, 5.2vw, 4rem);
	line-height: 1.08;
	letter-spacing: -0.025em;
	font-weight: 800;
	margin: 0 0 22px;
	color: #ffffff;
}
.hairnoard-hero__title em { font-style: normal; color: #7eb6e8; }

.hairnoard-hero__lead {
	font-family: "Inter", sans-serif;
	font-size: 1.12rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
	max-width: 48ch;
	margin: 0 0 32px;
}

.hairnoard-hero__trust {
	display: flex; flex-wrap: wrap; gap: 28px;
	font-family: "Inter", sans-serif;
}
.hairnoard-hero__trust-item strong {
	display: block;
	font-family: "Manrope", "Inter", sans-serif;
	font-size: 1.7rem;
	color: #ffffff;
}
.hairnoard-hero__trust-item span {
	font-size: .84rem;
	color: rgba(255, 255, 255, 0.72);
}

/* ----- Right side: form card ----- */
.hairnoard-hero-form {
	position: relative;
	background: #fff;
	border-radius: 24px;
	padding: 28px;
	box-shadow:
		0 24px 60px -16px rgba(17, 103, 177, 0.20),
		0 6px 18px rgba(16, 24, 40, 0.08);
	font-family: "Inter", sans-serif;
	color: #15171c; /* don't inherit white from .hairnoard-hero */
}

.hairnoard-hero-form__head { margin-bottom: 18px; }
.hairnoard-hero-form__title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: 1.45rem;
	letter-spacing: -0.015em;
	font-weight: 700;
	margin: 0 0 4px;
	color: #15171c;
}
.hairnoard-hero-form__sub {
	margin: 0;
	color: #7c828f;
	font-size: .92rem;
}

.hairnoard-hero-form__field { margin-bottom: 12px; }
.hairnoard-hero-form input[type="text"],
.hairnoard-hero-form input[type="email"],
.hairnoard-hero-form input[type="tel"],
.hairnoard-hero-form textarea {
	width: 100%;
	padding: 13px 16px;
	font-family: inherit;
	font-size: .95rem;
	color: #15171c;
	background: #f4f5fb;
	border: 1.5px solid transparent;
	border-radius: 14px;
	outline: none;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.hairnoard-hero-form input::placeholder,
.hairnoard-hero-form textarea::placeholder { color: #9aa0aa; }
.hairnoard-hero-form input:focus,
.hairnoard-hero-form textarea:focus {
	background: #fff;
	border-color: rgba(17, 103, 177, 0.45);
	box-shadow: 0 0 0 4px rgba(17, 103, 177, 0.10);
}
.hairnoard-hero-form input.is-invalid,
.hairnoard-hero-form textarea.is-invalid {
	border-color: #d83b3b;
	box-shadow: 0 0 0 4px rgba(216, 59, 59, 0.10);
}
.hairnoard-hero-form textarea { resize: vertical; min-height: 88px; }

/* honeypot ? hidden from real users */
.hairnoard-hero-form__hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px; height: 1px; overflow: hidden;
}

.hairnoard-hero-form__submit {
	width: 100%;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	margin-top: 6px;
	padding: 15px 22px;
	font-family: inherit;
	font-size: 1rem; font-weight: 600;
	color: #fff;
	background: #1167b1;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 10px 22px -6px rgba(17, 103, 177, 0.45);
	transition: transform .25s ease, background .2s ease, box-shadow .25s ease;
}
.hairnoard-hero-form__submit:hover { background: #0f5c9e; transform: translateY(-2px); }
.hairnoard-hero-form__submit:active { transform: translateY(0); }
.hairnoard-hero-form__submit svg { transition: transform .25s ease; }
.hairnoard-hero-form__submit:hover svg { transform: translateX(3px); }
.hairnoard-hero-form__submit[disabled] { opacity: .7; cursor: not-allowed; transform: none; }

.hairnoard-hero-form__status {
	margin: 14px 0 0;
	font-size: .9rem;
	min-height: 1.2em;
}
.hairnoard-hero-form__status.is-error   { color: #c0392b; }
.hairnoard-hero-form__status.is-success { color: #1167b1; font-weight: 600; }

.hairnoard-hero-form__privacy {
	margin: 12px 0 0;
	font-size: .8rem;
	color: #9aa0aa;
	text-align: center;
}

/* ---------- intl-tel-input look — match our inputs ---------- */
.iti {
	width: 100%;
	display: block;
	--iti-dialcode-color: #000000;
	--iti-text-gray: #000000;
}
.iti__tel-input,
.iti input[type="tel"] {
	width: 100%;
	padding-left: 102px !important;
}
.iti .iti__selected-dial-code,
.iti--separate-dial-code .iti__selected-dial-code,
.hairnoard-hero-form .iti__selected-dial-code,
.hairnoard-hero-form .iti__dial-code {
	font-family: inherit;
	color: #000000 !important;
	font-weight: 600;
	-webkit-text-fill-color: #000000 !important;
}
.iti--separate-dial-code .iti__country-container {
	background: transparent;
	border-radius: 14px 0 0 14px;
	color: #000000;
}
.iti__selected-country,
.iti__selected-country-primary {
	color: #000000 !important;
}
.iti__country-list {
	border-radius: 14px;
	box-shadow: 0 20px 50px -12px rgba(16, 24, 40, 0.22);
	border: 1px solid rgba(16, 24, 40, 0.08);
	font-size: .92rem;
	max-height: 280px;
	color: #000000;
}
.iti__country-name,
.iti__dial-code {
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
}
.iti__country.iti__highlight { background: rgba(17, 103, 177, 0.10); }
.iti__search-input {
	padding: 10px 14px !important;
	border-bottom: 1px solid rgba(16, 24, 40, 0.08) !important;
}

/* ==========================================================================
   Services widget
   ========================================================================== */
.hairnoard-services {
	padding: 96px 24px;
	background: transparent;
}
.hairnoard-services__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.hairnoard-services__head {
	max-width: 680px;
	margin: 0 auto 56px;
	text-align: center;
}
.hairnoard-services--align-left .hairnoard-services__head {
	margin-left: 0; margin-right: auto;
	text-align: left;
}

.hairnoard-services__eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: "Inter", sans-serif;
	font-size: .78rem; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase;
	color: #1167b1;
	margin-bottom: 18px;
}
.hairnoard-services__eyebrow-line {
	display: inline-block; width: 28px; height: 2px;
	background: #1167b1; border-radius: 2px;
}

.hairnoard-services__title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: clamp(1.9rem, 4vw, 2.8rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	font-weight: 800;
	margin: 0 0 14px;
	color: #15171c;
}

.hairnoard-services__sub {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-size: 1.05rem;
	line-height: 1.6;
	color: #4a4f5a;
}

.hairnoard-services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: start;
}

/* ----- Service Card ----- */
.hairnoard-service {
	position: relative;
	display: flex; flex-direction: column;
	height: auto;
	background: #fff;
	border-radius: 22px;
	padding: 8px 8px 28px;
	box-shadow:
		0 1px 2px rgba(16, 24, 40, 0.04),
		0 10px 30px -8px rgba(16, 24, 40, 0.10);
	transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .35s cubic-bezier(0.22, 1, 0.36, 1);
	overflow: hidden;
}
.hairnoard-service:hover {
	transform: translateY(-6px);
	box-shadow:
		0 1px 2px rgba(16, 24, 40, 0.04),
		0 24px 50px -12px rgba(17, 103, 177, 0.18);
}

.hairnoard-service__media {
	position: relative;
	height: 210px;
	flex: 0 0 auto;
	border-radius: 14px;
	background-color: #f4f5fb;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

/* Subtle inset shadow on top of the media for refined feel */
.hairnoard-service__media::after {
	content: "";
	position: absolute; inset: 0;
	box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.04);
	border-radius: inherit;
	pointer-events: none;
}

.hairnoard-service__icon {
	position: absolute;
	top: 14px; left: 14px;
	display: inline-grid; place-items: center;
	width: 42px; height: 42px;
	background: #fff;
	color: #1167b1;
	border-radius: 12px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.6) inset,
		0 6px 16px -6px rgba(16, 24, 40, 0.20),
		0 0 0 1px rgba(16, 24, 40, 0.04);
	font-size: 1.05rem;
	z-index: 2;
}
.hairnoard-service__icon svg { width: 18px; height: 18px; }
.hairnoard-service__icon i { font-size: 1rem; line-height: 1; }

.hairnoard-service__body {
	padding: 22px 18px 0;
	display: flex; flex-direction: column;
	flex: 0 1 auto;
	gap: 0;
}

.hairnoard-service__title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: 1.25rem;
	letter-spacing: -0.015em;
	font-weight: 700;
	margin: 0 0 10px;
	color: #15171c;
}

.hairnoard-service__desc {
	margin: 0 0 18px;
	font-family: "Inter", sans-serif;
	font-size: .95rem;
	line-height: 1.55;
	color: #4a4f5a;
}

.hairnoard-service__link {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: "Inter", sans-serif;
	font-size: .92rem;
	font-weight: 600;
	color: #1167b1;
	text-decoration: none;
	transition: gap .25s cubic-bezier(0.22, 1, 0.36, 1), color .2s ease;
	align-self: flex-start;
}
.hairnoard-service__link:hover { gap: 12px; color: #0f5c9e; }
.hairnoard-service__link svg { transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1); }
.hairnoard-service__link:hover svg { transform: translateX(3px); }

/* ==========================================================================
   Before / After widget
   ========================================================================== */
.hairnoard-ba {
	padding: 96px 24px;
}
.hairnoard-ba__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.hairnoard-ba__head {
	max-width: 680px;
	margin: 0 0 48px;
	text-align: left;
}
.hairnoard-ba--align-center .hairnoard-ba__head {
	margin-left: auto; margin-right: auto;
	text-align: center;
}

.hairnoard-ba__eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: "Inter", sans-serif;
	font-size: .78rem; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase;
	color: #1167b1;
	margin-bottom: 16px;
}
.hairnoard-ba__eyebrow-line {
	display: inline-block; width: 28px; height: 2px;
	background: #1167b1; border-radius: 2px;
}

.hairnoard-ba__title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: clamp(1.9rem, 4vw, 2.8rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 800;
	margin: 0 0 14px;
	color: #15171c;
}

.hairnoard-ba__sub {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-size: 1.05rem;
	line-height: 1.6;
	color: #4a4f5a;
}

.hairnoard-ba__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* ----- Card ----- */
.hairnoard-ba-card {
	display: flex; flex-direction: column;
	background: #fff;
	border-radius: 22px;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(16, 24, 40, 0.04),
		0 10px 30px -8px rgba(16, 24, 40, 0.10);
	transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hairnoard-ba-card:hover {
	transform: translateY(-4px);
	box-shadow:
		0 1px 2px rgba(16, 24, 40, 0.04),
		0 24px 50px -12px rgba(17, 103, 177, 0.18);
}

/* ----- Slider media ----- */
.hairnoard-ba__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #eef0f6;
	border-radius: 0;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
	cursor: ew-resize;
}
.hairnoard-ba__after {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	will-change: clip-path;
}
/* High-specificity image rules: ensure they stretch + cover regardless of
   global "img { height: auto }" rules from the theme or Elementor. */
.hairnoard-ba__media > img.hairnoard-ba__img,
.hairnoard-ba__after  > img.hairnoard-ba__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
	-webkit-user-drag: none;
}

/* Badges */
.hairnoard-ba__badge {
	position: absolute; top: 14px; z-index: 3;
	padding: 7px 14px;
	font-family: "Inter", sans-serif;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: #fff;
	background: rgba(15, 23, 42, 0.78);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-radius: 999px;
	pointer-events: none;
}
.hairnoard-ba__badge--before { left: 14px; }
.hairnoard-ba__badge--after  { right: 14px; }

/* Handle line + knob */
.hairnoard-ba__handle {
	position: absolute;
	top: 0; bottom: 0;
	width: 2px;
	background: #fff;
	transform: translateX(-50%);
	box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.10);
	z-index: 2;
	pointer-events: none;
}
.hairnoard-ba__knob {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 44px; height: 44px;
	display: grid; place-items: center;
	background: #fff;
	color: #1167b1;
	border-radius: 50%;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.6) inset,
		0 8px 20px -6px rgba(16, 24, 40, 0.28),
		0 0 0 1px rgba(16, 24, 40, 0.06);
	transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1);
}
.hairnoard-ba__media:hover .hairnoard-ba__knob,
.hairnoard-ba__media.is-dragging .hairnoard-ba__knob {
	transform: translate(-50%, -50%) scale(1.08);
}

/* The actual <input type="range"> sits invisible on top ? drives the slider for accessibility & touch */
.hairnoard-ba__range {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	opacity: 0;
	cursor: ew-resize;
	margin: 0;
	z-index: 4;
}

/* ----- Card body ----- */
.hairnoard-ba-card__body {
	padding: 20px 18px 22px;
	text-align: center;
}
.hairnoard-ba-card__title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: 1.18rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	margin: 0 0 4px;
	color: #15171c;
}
.hairnoard-ba-card__caption {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-size: .9rem;
	color: #7c828f;
}

/* ==========================================================================
   CTA Band widget
   ========================================================================== */
.hairnoard-cta {
	padding: 60px 24px;
}
.hairnoard-cta__inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 80px 64px;
	border-radius: 32px;
	overflow: hidden;
	background-color: #1167b1;
	color: #fff;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 30px 80px -20px rgba(17, 103, 177, 0.35),
		0 6px 16px rgba(16, 24, 40, 0.08);
	isolation: isolate;
}

/* Decorative aurora highlights */
.hairnoard-cta__inner::before,
.hairnoard-cta__inner::after {
	content: "";
	position: absolute;
	width: 480px; height: 480px;
	border-radius: 50%;
	filter: blur(60px);
	opacity: .35;
	pointer-events: none;
	z-index: 1;
}
.hairnoard-cta__inner::before {
	top: -160px; left: -120px;
	background: radial-gradient(circle, rgba(255,255,255,0.45), transparent 60%);
}
.hairnoard-cta__inner::after {
	bottom: -200px; right: -160px;
	background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 60%);
}

.hairnoard-cta__bg {
	position: absolute; inset: 0; z-index: 0;
}
.hairnoard-cta__bg > img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	max-width: none;
}

.hairnoard-cta__overlay {
	position: absolute; inset: 0; z-index: 1;
	background: rgba(12, 77, 133, 0.78);
	pointer-events: none;
}
.hairnoard-cta__inner--gradient .hairnoard-cta__overlay {
	background: linear-gradient(135deg, rgba(17, 103, 177, 0.85) 0%, rgba(12, 77, 133, 0.95) 100%);
}

.hairnoard-cta__content {
	position: relative;
	z-index: 2;
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}
.hairnoard-cta--align-left .hairnoard-cta__content {
	margin: 0; text-align: left;
}

.hairnoard-cta__eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: "Inter", sans-serif;
	font-size: .78rem; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
	background: transparent;
	padding: 0;
	margin-bottom: 20px;
}
.hairnoard-cta__eyebrow-line {
	display: inline-block; width: 26px; height: 2px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 2px;
}

.hairnoard-cta__title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: clamp(2rem, 4.5vw, 3.2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 16px;
	color: #fff;
}

.hairnoard-cta__sub {
	font-family: "Inter", sans-serif;
	font-size: 1.05rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 auto 32px;
	max-width: 560px;
}
.hairnoard-cta--align-left .hairnoard-cta__sub {
	margin-left: 0; margin-right: auto;
}

/* Buttons */
.hairnoard-cta__buttons {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
.hairnoard-cta--align-left .hairnoard-cta__buttons {
	justify-content: flex-start;
}

.hairnoard-cta__btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 15px 26px;
	font-family: "Inter", sans-serif;
	font-size: .98rem; font-weight: 600;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow .25s cubic-bezier(0.22, 1, 0.36, 1),
		background .2s ease;
}
.hairnoard-cta__btn svg { display: block; }

.hairnoard-cta__btn--primary {
	background: #fff;
	color: #1167b1;
	box-shadow:
		0 10px 24px -6px rgba(0, 0, 0, 0.25),
		0 1px 0 rgba(255, 255, 255, 0.4) inset;
}
.hairnoard-cta__btn--primary:hover {
	transform: translateY(-2px);
	box-shadow:
		0 16px 32px -8px rgba(0, 0, 0, 0.35),
		0 1px 0 rgba(255, 255, 255, 0.4) inset;
}
.hairnoard-cta__btn--primary svg { transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1); }
.hairnoard-cta__btn--primary:hover svg { transform: translateX(3px); }

.hairnoard-cta__btn--secondary {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45);
}
.hairnoard-cta__btn--secondary:hover {
	background: rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.75);
	transform: translateY(-2px);
}
.hairnoard-cta__btn-icon { display: inline-flex; }

/* ==========================================================================
   Blog Cards widget
   ========================================================================== */
.hairnoard-blog {
	padding: 80px 24px;
}
.hairnoard-blog__container {
	max-width: 1200px;
	margin: 0 auto;
}

/* Header */
.hairnoard-blog__head {
	max-width: 720px;
	margin: 0 0 48px;
	text-align: left;
}
.hairnoard-blog--align-center .hairnoard-blog__head {
	margin-left: auto; margin-right: auto;
	text-align: center;
}

.hairnoard-blog__eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: "Inter", sans-serif;
	font-size: .78rem; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--brand, #1167b1);
	background: transparent;
	margin-bottom: 16px;
}
.hairnoard-blog__eyebrow-line {
	display: inline-block; width: 26px; height: 2px;
	background: var(--brand, #1167b1);
	border-radius: 2px;
}

.hairnoard-blog__title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: #0c1a33;
	margin: 0;
}
.hairnoard-blog__subtitle {
	font-family: "Inter", sans-serif;
	font-size: 1.02rem;
	color: #4b5773;
	line-height: 1.6;
	margin: 14px 0 0;
}

/* Grid */
.hairnoard-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

/* Card */
.hairnoard-blog__card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 22px;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	box-shadow:
		0 1px 0 rgba(16, 24, 40, 0.04),
		0 12px 28px -16px rgba(16, 24, 40, 0.18);
	transition:
		transform .35s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hairnoard-blog__card:hover,
.hairnoard-blog__card:focus-visible {
	transform: translateY(-4px);
	box-shadow:
		0 1px 0 rgba(16, 24, 40, 0.04),
		0 24px 48px -20px rgba(16, 24, 40, 0.25);
}
.hairnoard-blog__card:focus-visible {
	outline: 2px solid var(--brand, #1167b1);
	outline-offset: 4px;
}

/* Media */
.hairnoard-blog__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, #eef2fb 0%, #dde4f3 100%);
	overflow: hidden;
}
.hairnoard-blog--ar-1-1   .hairnoard-blog__media { aspect-ratio: 1 / 1; }
.hairnoard-blog--ar-4-3   .hairnoard-blog__media { aspect-ratio: 4 / 3; }
.hairnoard-blog--ar-3-2   .hairnoard-blog__media { aspect-ratio: 3 / 2; }
.hairnoard-blog--ar-16-9  .hairnoard-blog__media { aspect-ratio: 16 / 9; }

.hairnoard-blog__media > img.hairnoard-blog__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%; height: 100%;
	max-width: none; margin: 0;
	object-fit: cover;
	object-position: center;
	transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hairnoard-blog__card:hover .hairnoard-blog__img {
	transform: scale(1.04);
}
.hairnoard-blog__placeholder {
	position: absolute; inset: 0;
	background:
		radial-gradient(circle at 70% 30%, rgba(17,103,177,0.18), transparent 60%),
		linear-gradient(135deg, #eef2fb 0%, #dde4f3 100%);
}

/* Body */
.hairnoard-blog__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 22px 24px;
}
.hairnoard-blog__post-title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	color: #0c1a33;
	margin: 0;
	line-height: 1.3;
	letter-spacing: -0.01em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hairnoard-blog__excerpt {
	font-family: "Inter", sans-serif;
	font-size: .92rem;
	color: #4b5773;
	line-height: 1.55;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hairnoard-blog__more {
	margin-top: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: "Inter", sans-serif;
	font-size: .92rem;
	font-weight: 600;
	color: var(--brand, #1167b1);
}
.hairnoard-blog__more svg {
	transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1);
}
.hairnoard-blog__card:hover .hairnoard-blog__more svg {
	transform: translateX(3px);
}

.hairnoard-blog__empty {
	text-align: center;
	color: #4b5773;
	font-family: "Inter", sans-serif;
}

/* ==========================================================================
   About Section widget
   ========================================================================== */
.hairnoard-about {
	padding: 96px 24px;
}
.hairnoard-about__inner {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 72px;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}

/* Image position swap */
.hairnoard-about--img-left .hairnoard-about__content { order: 2; }
.hairnoard-about--img-left .hairnoard-about__visual  { order: 1; }

/* ----- Left column: content ----- */
.hairnoard-about__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.hairnoard-about__eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: "Inter", sans-serif;
	font-size: .78rem; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--brand, #1167b1);
	background: transparent;
	margin-bottom: 16px;
}
.hairnoard-about__eyebrow-line {
	display: inline-block; width: 26px; height: 2px;
	background: var(--brand, #1167b1);
	border-radius: 2px;
}
.hairnoard-about__title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: clamp(1.9rem, 3.4vw, 2.8rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.12;
	color: #0c1a33;
	margin: 0 0 18px;
}
.hairnoard-about__desc {
	font-family: "Inter", sans-serif;
	font-size: 1.02rem;
	line-height: 1.65;
	color: #4b5773;
	margin: 0 0 28px;
	max-width: 520px;
}

/* Numbered feature list */
.hairnoard-about__list {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 28px;
	width: 100%;
	max-width: 560px;
}
.hairnoard-about__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 0;
}
.hairnoard-about__num {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: .85rem;
	font-weight: 800;
	letter-spacing: .05em;
	color: var(--brand, #1167b1);
	background: rgba(17, 103, 177, 0.08);
	padding: 4px 9px;
	border-radius: 999px;
	white-space: nowrap;
	flex-shrink: 0;
	margin-top: 2px;
}
.hairnoard-about__item-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.hairnoard-about__item-title {
	font-family: "Inter", sans-serif;
	font-size: .98rem;
	font-weight: 700;
	color: #0c1a33;
	line-height: 1.35;
}
.hairnoard-about__item-desc {
	font-family: "Inter", sans-serif;
	font-size: .87rem;
	color: #6a7390;
	line-height: 1.5;
}

/* Button */
.hairnoard-about__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 28px;
	background: var(--brand, #1167b1);
	color: #fff;
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 12px 24px -10px rgba(17, 103, 177, 0.45);
	transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow .25s cubic-bezier(0.22, 1, 0.36, 1);
}
.hairnoard-about__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 32px -12px rgba(17, 103, 177, 0.55);
}
.hairnoard-about__btn svg {
	transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1);
}
.hairnoard-about__btn:hover svg { transform: translateX(3px); }

/* ----- Right column: layered visual ----- */
.hairnoard-about__visual {
	position: relative;
	min-height: 480px;
	isolation: isolate;
}

.hairnoard-about__glow {
	position: absolute;
	width: 70%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(17, 103, 177, 0.18) 0%, transparent 65%);
	filter: blur(40px);
	top: 8%;
	right: -5%;
	z-index: 0;
	pointer-events: none;
}

.hairnoard-about__media {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 480px;
	margin-left: auto;
	aspect-ratio: 4 / 5;
	border-radius: 28px;
	overflow: hidden;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.4) inset,
		0 30px 60px -25px rgba(16, 24, 40, 0.25),
		0 8px 20px -8px rgba(16, 24, 40, 0.1);
	background: linear-gradient(135deg, #eef2fb 0%, #dde4f3 100%);
}
.hairnoard-about--ar-1-1 .hairnoard-about__media { aspect-ratio: 1 / 1; }
.hairnoard-about--ar-4-5 .hairnoard-about__media { aspect-ratio: 4 / 5; }
.hairnoard-about--ar-4-3 .hairnoard-about__media { aspect-ratio: 4 / 3; }
.hairnoard-about--ar-3-2 .hairnoard-about__media { aspect-ratio: 3 / 2; }

.hairnoard-about__media > img.hairnoard-about__img--main {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%; height: 100%;
	max-width: none; margin: 0;
	object-fit: cover;
	object-position: center;
}

.hairnoard-about__media-sm {
	position: absolute;
	z-index: 2;
	bottom: -32px;
	left: 0;
	width: 42%;
	aspect-ratio: 1 / 1;
	border-radius: 22px;
	overflow: hidden;
	border: 6px solid #fff;
	box-shadow: 0 24px 40px -18px rgba(16, 24, 40, 0.25);
	background: #eef2fb;
}
.hairnoard-about--img-left .hairnoard-about__media-sm {
	left: auto;
	right: 0;
}
.hairnoard-about__media-sm > img.hairnoard-about__img--small {
	display: block;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
	max-width: none;
	margin: 0;
}

/* Floating stat cards (glassmorphism) */
.hairnoard-about__stat {
	position: absolute;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	background: rgba(255, 255, 255, 0.85);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border-radius: 16px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.7) inset,
		0 18px 36px -16px rgba(16, 24, 40, 0.25),
		0 4px 10px rgba(16, 24, 40, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.6);
	white-space: nowrap;
}
.hairnoard-about__stat--tl { top: 16px;    left: -24px; }
.hairnoard-about__stat--tr { top: 16px;    right: -24px; }
.hairnoard-about__stat--bl { bottom: 24px; left: -24px; }
.hairnoard-about__stat--br { bottom: -8px; right: -24px; }
.hairnoard-about--img-left .hairnoard-about__stat--tl { left: auto;  right: -24px; }
.hairnoard-about--img-left .hairnoard-about__stat--tr { right: auto; left: -24px; }
.hairnoard-about--img-left .hairnoard-about__stat--bl { left: auto;  right: -24px; }
.hairnoard-about--img-left .hairnoard-about__stat--br { right: auto; left: -24px; }

.hairnoard-about__stat-value {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: 1.4rem;
	font-weight: 800;
	color: #0c1a33;
	letter-spacing: -0.01em;
	line-height: 1;
}
.hairnoard-about__stat-label {
	font-family: "Inter", sans-serif;
	font-size: .82rem;
	font-weight: 500;
	color: #4b5773;
	line-height: 1.25;
	max-width: 110px;
	white-space: normal;
}

/* ==========================================================================
   FAQ + Form widget
   ========================================================================== */
.hairnoard-faq {
	padding: 88px 24px;
}
.hairnoard-faq__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	max-width: 1200px;
	margin: 0 auto;
	align-items: start;
}

/* ----- Left column: FAQ ----- */
.hairnoard-faq__left { display: flex; flex-direction: column; }

.hairnoard-faq__eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: "Inter", sans-serif;
	font-size: .78rem; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--brand, #1167b1);
	background: transparent;
	margin-bottom: 14px;
}
.hairnoard-faq__eyebrow-line {
	display: inline-block; width: 26px; height: 2px;
	background: var(--brand, #1167b1);
	border-radius: 2px;
}
.hairnoard-faq__title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: clamp(1.8rem, 3.2vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.12;
	color: #0c1a33;
	margin: 0 0 28px;
}

.hairnoard-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.hairnoard-faq__item {
	background: #fff;
	border: 1.5px solid #e6eaf2;
	border-radius: 18px;
	overflow: hidden;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.hairnoard-faq__item--open {
	border-color: var(--brand, #1167b1);
	box-shadow: 0 6px 20px -10px rgba(17, 103, 177, 0.25);
}
.hairnoard-faq__q {
	all: unset;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 18px 20px;
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	color: #0c1a33;
	cursor: pointer;
	box-sizing: border-box;
}
.hairnoard-faq__q:focus-visible {
	outline: 2px solid var(--brand, #1167b1);
	outline-offset: -2px;
	border-radius: 18px;
}
.hairnoard-faq__q-text { flex: 1; }

.hairnoard-faq__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: rgba(17, 103, 177, 0.08);
	color: var(--brand, #1167b1);
	flex-shrink: 0;
	transition: background .25s ease;
}
.hairnoard-faq__item--open .hairnoard-faq__toggle {
	background: var(--brand, #1167b1);
	color: #fff;
}
.hairnoard-faq__icon-plus,
.hairnoard-faq__icon-close { display: block; }
.hairnoard-faq__icon-close { display: none; }
.hairnoard-faq__item--open .hairnoard-faq__icon-plus  { display: none; }
.hairnoard-faq__item--open .hairnoard-faq__icon-close { display: block; }

.hairnoard-faq__a {
	max-height: 0;
	overflow: hidden;
	transition: max-height .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hairnoard-faq__item--open .hairnoard-faq__a {
	max-height: 320px;
}
.hairnoard-faq__a > p {
	margin: 0;
	padding: 0 20px 18px;
	font-family: "Inter", sans-serif;
	font-size: .94rem;
	line-height: 1.6;
	color: #4b5773;
}

/* ----- Right column: form card ----- */
.hairnoard-faq__form {
	position: relative;
	background: #fff;
	border-radius: 24px;
	padding: 32px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.6) inset,
		0 30px 60px -25px rgba(16, 24, 40, 0.18),
		0 8px 18px -8px rgba(16, 24, 40, 0.08);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.hairnoard-faq__form-title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #0c1a33;
	margin: 0;
}
.hairnoard-faq__form-sub {
	font-family: "Inter", sans-serif;
	font-size: .92rem;
	color: #6a7390;
	margin: -8px 0 4px;
	line-height: 1.55;
}

.hairnoard-faq__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.hairnoard-faq__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.hairnoard-faq__lbl {
	font-family: "Inter", sans-serif;
	font-size: .82rem;
	font-weight: 600;
	color: #0c1a33;
}

.hairnoard-faq__field > input,
.hairnoard-faq__field > select,
.hairnoard-faq__select {
	font-family: "Inter", sans-serif;
	font-size: .95rem;
	color: #0c1a33;
	background: #f3f5fa;
	border: 1.5px solid transparent;
	border-radius: 12px;
	padding: 12px 14px;
	width: 100%;
	box-sizing: border-box;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
	appearance: none;
}
.hairnoard-faq__field > input:focus,
.hairnoard-faq__field > select:focus,
.hairnoard-faq__select:focus {
	outline: none;
	background: #fff;
	border-color: var(--brand, #1167b1);
	box-shadow: 0 0 0 4px rgba(17, 103, 177, 0.12);
}
.hairnoard-faq__field > input.is-invalid,
.hairnoard-faq__select.is-invalid {
	border-color: #d92d20;
	background: rgba(217, 45, 32, 0.04);
}
.hairnoard-faq__select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M3 5l4 4 4-4' fill='none' stroke='%234b5773' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px;
}

/* intl-tel-input integration */
.hairnoard-faq__field--phone .iti { width: 100%; }
.hairnoard-faq__field--phone .iti__tel-input {
	font-family: "Inter", sans-serif;
	font-size: .95rem;
	color: #0c1a33;
	background: #f3f5fa;
	border: 1.5px solid transparent;
	border-radius: 12px;
	padding: 12px 14px;
	width: 100%;
	box-sizing: border-box;
}
.hairnoard-faq__field--phone .iti__tel-input:focus {
	outline: none;
	background: #fff;
	border-color: var(--brand, #1167b1);
	box-shadow: 0 0 0 4px rgba(17, 103, 177, 0.12);
}

/* Consent checkbox */
.hairnoard-faq__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: "Inter", sans-serif;
	font-size: .84rem;
	color: #4b5773;
	line-height: 1.5;
	margin-top: 4px;
	cursor: pointer;
}
.hairnoard-faq__consent input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px; height: 18px;
	margin: 1px 0 0;
	accent-color: var(--brand, #1167b1);
	cursor: pointer;
}
.hairnoard-faq__consent input[type="checkbox"].is-invalid {
	outline: 2px solid #d92d20;
	outline-offset: 2px;
	border-radius: 4px;
}
.hairnoard-faq__consent strong { color: #0c1a33; }

/* Submit button */
.hairnoard-faq__btn {
	all: unset;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 26px;
	background: var(--brand, #1167b1);
	color: #fff;
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	border-radius: 999px;
	cursor: pointer;
	text-align: center;
	box-shadow: 0 12px 24px -10px rgba(17, 103, 177, 0.45);
	transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow .25s cubic-bezier(0.22, 1, 0.36, 1),
		opacity .2s ease;
	margin-top: 6px;
	box-sizing: border-box;
}
.hairnoard-faq__btn:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 18px 32px -12px rgba(17, 103, 177, 0.55);
}
.hairnoard-faq__btn:disabled { opacity: .6; cursor: progress; }
.hairnoard-faq__btn svg { transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1); }
.hairnoard-faq__btn:hover:not(:disabled) svg { transform: translateX(3px); }

.hairnoard-faq__msg {
	font-family: "Inter", sans-serif;
	font-size: .9rem;
	line-height: 1.5;
	color: #4b5773;
	min-height: 1em;
	text-align: center;
}
.hairnoard-faq__msg.is-success { color: #0f8552; }
.hairnoard-faq__msg.is-error   { color: #d92d20; }

/* ==========================================================================
   Page Hero + Breadcrumb widget
   ========================================================================== */
.hairnoard-ph {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	min-height: 220px;
	padding: 120px 24px 40px;
	background-color: #0c1a33;
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.hairnoard-ph__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.hairnoard-ph__bg > img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	max-width: none;
}

.hairnoard-ph__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(12, 26, 51, 0.7);
	pointer-events: none;
}
.hairnoard-ph--gradient .hairnoard-ph__overlay {
	background: linear-gradient(180deg,
		rgba(12, 26, 51, 0.85) 0%,
		rgba(12, 26, 51, 0.65) 50%,
		rgba(12, 26, 51, 0.85) 100%);
}

.hairnoard-ph__content {
	position: relative;
	z-index: 2;
	max-width: 1100px;
	margin: 0 auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.hairnoard-ph--align-left .hairnoard-ph__content {
	align-items: flex-start;
	text-align: left;
}

.hairnoard-ph__title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: clamp(1.8rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0;
	color: #fff;
}

.hairnoard-ph__sub {
	margin: 14px 0 0;
	font-family: "Inter", sans-serif;
	font-size: 1.02rem;
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.55;
	max-width: 56ch;
}

/* Breadcrumb */
.hairnoard-ph__crumbs {
	margin-top: 14px;
}
.hairnoard-ph__crumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
}
.hairnoard-ph__crumbs li {
	display: inline-flex;
	align-items: center;
	font-family: "Inter", sans-serif;
	font-size: .92rem;
	font-weight: 500;
}
.hairnoard-ph__crumbs a {
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
	padding: 4px 2px;
	transition: color .2s cubic-bezier(0.22, 1, 0.36, 1);
}
.hairnoard-ph__crumbs a:hover {
	color: #fff;
}
.hairnoard-ph__crumbs [aria-current="page"] {
	color: #fff;
	font-weight: 600;
}
.hairnoard-ph__sep {
	display: inline-flex;
	color: rgba(255, 255, 255, 0.4);
	margin: 0 10px;
	font-size: .95rem;
	line-height: 1;
}

/* ==========================================================================
   Services Grid widget (auto from CPT)
   ========================================================================== */
.hairnoard-sg {
	padding: 80px 24px;
}
.hairnoard-sg__container {
	max-width: 1200px;
	margin: 0 auto;
}

/* Header */
.hairnoard-sg__head {
	max-width: 720px;
	margin: 0 auto 48px;
	text-align: center;
}
.hairnoard-sg--align-left .hairnoard-sg__head { margin-left: 0; text-align: left; }
.hairnoard-sg__eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: "Inter", sans-serif;
	font-size: .78rem; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--brand, #1167b1);
	margin-bottom: 16px;
}
.hairnoard-sg__eyebrow-line {
	display: inline-block; width: 26px; height: 2px;
	background: var(--brand, #1167b1);
	border-radius: 2px;
}
.hairnoard-sg__title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.12;
	color: #0c1a33;
	margin: 0;
}
.hairnoard-sg__subtitle {
	font-family: "Inter", sans-serif;
	font-size: 1.02rem;
	color: #4b5773;
	line-height: 1.6;
	margin: 14px 0 0;
}

/* Grid */
.hairnoard-sg__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

/* Card */
.hairnoard-sg__card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 22px;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	box-shadow:
		0 1px 0 rgba(16, 24, 40, 0.04),
		0 12px 28px -16px rgba(16, 24, 40, 0.18);
	transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hairnoard-sg__card:hover,
.hairnoard-sg__card:focus-visible {
	transform: translateY(-4px);
	box-shadow:
		0 1px 0 rgba(16, 24, 40, 0.04),
		0 24px 48px -20px rgba(16, 24, 40, 0.25);
}
.hairnoard-sg__card:focus-visible {
	outline: 2px solid var(--brand, #1167b1);
	outline-offset: 4px;
}

/* Media */
.hairnoard-sg__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, #eef2fb 0%, #dde4f3 100%);
	overflow: hidden;
}
.hairnoard-sg--ar-1-1  .hairnoard-sg__media { aspect-ratio: 1 / 1; }
.hairnoard-sg--ar-4-3  .hairnoard-sg__media { aspect-ratio: 4 / 3; }
.hairnoard-sg--ar-3-2  .hairnoard-sg__media { aspect-ratio: 3 / 2; }
.hairnoard-sg--ar-16-9 .hairnoard-sg__media { aspect-ratio: 16 / 9; }

.hairnoard-sg__media > img.hairnoard-sg__img {
	position: absolute; inset: 0;
	display: block;
	width: 100%; height: 100%;
	max-width: none; margin: 0;
	object-fit: cover;
	object-position: center;
	transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hairnoard-sg__card:hover .hairnoard-sg__img {
	transform: scale(1.04);
}
.hairnoard-sg__placeholder {
	position: absolute; inset: 0;
	background:
		radial-gradient(circle at 70% 30%, rgba(17,103,177,0.18), transparent 60%),
		linear-gradient(135deg, #eef2fb 0%, #dde4f3 100%);
}

/* Floating icon badge over image */
.hairnoard-sg__icon {
	position: absolute;
	top: 14px;
	left: 14px;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--brand, #1167b1);
	font-size: 18px;
	box-shadow: 0 8px 18px -6px rgba(16, 24, 40, 0.25);
}

/* Body */
.hairnoard-sg__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 22px 24px;
}
.hairnoard-sg__title-card {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: 1.15rem;
	font-weight: 700;
	color: #0c1a33;
	margin: 0;
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.hairnoard-sg__desc {
	font-family: "Inter", sans-serif;
	font-size: .92rem;
	color: #4b5773;
	line-height: 1.55;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hairnoard-sg__more {
	margin-top: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: "Inter", sans-serif;
	font-size: .92rem;
	font-weight: 600;
	color: var(--brand, #1167b1);
}
.hairnoard-sg__more svg {
	transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1);
}
.hairnoard-sg__card:hover .hairnoard-sg__more svg {
	transform: translateX(3px);
}

/* Pagination */
.hairnoard-sg__pager {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 48px;
}
.hairnoard-sg__pager-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	background: #fff;
	color: #0c1a33;
	border: 1px solid rgba(16, 24, 40, 0.08);
	border-radius: 999px;
	font-family: "Inter", sans-serif;
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s cubic-bezier(0.22, 1, 0.36, 1),
		color .2s cubic-bezier(0.22, 1, 0.36, 1),
		transform .2s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow .2s cubic-bezier(0.22, 1, 0.36, 1),
		border-color .2s cubic-bezier(0.22, 1, 0.36, 1);
}
.hairnoard-sg__pager-btn:hover {
	background: var(--brand, #1167b1);
	color: #fff;
	border-color: var(--brand, #1167b1);
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -8px rgba(17, 103, 177, 0.45);
}
.hairnoard-sg__pager-btn.is-active {
	background: var(--brand, #1167b1);
	color: #fff;
	border-color: var(--brand, #1167b1);
	box-shadow: 0 10px 20px -8px rgba(17, 103, 177, 0.45);
	cursor: default;
}
.hairnoard-sg__pager-btn.is-disabled {
	opacity: .35;
	cursor: not-allowed;
	background: #fff;
	color: #0c1a33;
}
.hairnoard-sg__pager-gap {
	display: inline-flex;
	align-items: center;
	color: #98a0ad;
	padding: 0 4px;
	font-weight: 700;
}

/* Empty state */
.hairnoard-sg__empty {
	max-width: 520px;
	margin: 16px auto;
	padding: 56px 32px;
	text-align: center;
	background: #fff;
	border: 1px dashed rgba(16, 24, 40, 0.12);
	border-radius: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.hairnoard-sg__empty-icon {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(17, 103, 177, 0.08);
	color: var(--brand, #1167b1);
	font-size: 22px;
	margin-bottom: 4px;
}
.hairnoard-sg__empty-title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: 1.3rem;
	font-weight: 800;
	color: #0c1a33;
	margin: 0;
}
.hairnoard-sg__empty-text {
	font-family: "Inter", sans-serif;
	font-size: .96rem;
	color: #4b5773;
	line-height: 1.6;
	margin: 0;
}
.hairnoard-sg__empty-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	padding: 11px 20px;
	background: var(--brand, #1167b1);
	color: #fff;
	border-radius: 999px;
	font-family: "Inter", sans-serif;
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
	box-shadow: 0 8px 18px -6px rgba(17, 103, 177, 0.45);
}
.hairnoard-sg__empty-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -8px rgba(17, 103, 177, 0.55);
}

/* ==========================================================================
   Process / Journey widget
   ========================================================================== */
.hairnoard-process {
	padding: 80px 24px;
}
.hairnoard-process__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 80px;
	align-items: start;
}
.hairnoard-process--steps-left .hairnoard-process__inner {
	grid-template-columns: 1.05fr 1fr;
}
.hairnoard-process--steps-left .hairnoard-process__intro { order: 2; }
.hairnoard-process--steps-left .hairnoard-process__steps { order: 1; }

/* Intro column */
.hairnoard-process__intro {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.hairnoard-process__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: "Inter", sans-serif;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--brand, #1167b1);
}
.hairnoard-process__eyebrow-line {
	display: inline-block;
	width: 26px;
	height: 2px;
	background: var(--brand, #1167b1);
	border-radius: 2px;
}
.hairnoard-process__title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: clamp(2rem, 3.6vw, 2.9rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: #0c1a33;
	margin: 0;
}
.hairnoard-process__subtitle {
	font-family: "Inter", sans-serif;
	font-size: 1.02rem;
	color: #4b5773;
	line-height: 1.65;
}
.hairnoard-process__subtitle p {
	margin: 0 0 14px;
}
.hairnoard-process__subtitle p:last-child {
	margin-bottom: 0;
}
.hairnoard-process__btn {
	align-self: flex-start;
	margin-top: 8px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 24px;
	background: var(--brand, #1167b1);
	color: #fff;
	border-radius: 999px;
	font-family: "Inter", sans-serif;
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.15) inset,
		0 10px 22px -10px rgba(17, 103, 177, 0.55);
	transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow .25s cubic-bezier(0.22, 1, 0.36, 1);
}
.hairnoard-process__btn svg {
	transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1);
}
.hairnoard-process__btn:hover {
	transform: translateY(-2px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.15) inset,
		0 16px 30px -12px rgba(17, 103, 177, 0.65);
}
.hairnoard-process__btn:hover svg {
	transform: translateX(3px);
}

/* Steps column */
.hairnoard-process__steps {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}
.hairnoard-process__rail {
	position: absolute;
	top: 19px;
	bottom: 19px;
	left: 19px;
	width: 1px;
	background: rgba(12, 26, 51, 0.12);
	z-index: 0;
}
.hairnoard-process__step {
	position: relative;
	display: grid;
	grid-template-columns: 38px 1fr;
	gap: 22px;
	padding-bottom: 26px;
	align-items: start;
}
.hairnoard-process__step:last-child {
	padding-bottom: 0;
}
.hairnoard-process__num {
	position: relative;
	z-index: 1;
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid #0c1a33;
	color: #0c1a33;
	font-family: "Manrope", "Inter", sans-serif;
	font-size: .92rem;
	font-weight: 700;
	font-feature-settings: "tnum" 1;
	box-shadow: 0 1px 0 rgba(16, 24, 40, 0.04);
}
.hairnoard-process__step-body {
	padding-top: 6px;
}
.hairnoard-process__step-title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: 1.12rem;
	font-weight: 700;
	color: #0c1a33;
	margin: 0 0 6px;
	letter-spacing: -0.01em;
}
.hairnoard-process__step-desc {
	font-family: "Inter", sans-serif;
	font-size: .95rem;
	color: #4b5773;
	line-height: 1.55;
	margin: 0;
}

/* ==========================================================================
   Blog Grid widget (paginated)
   ========================================================================== */
.hairnoard-bg {
	padding: 80px 24px;
}
.hairnoard-bg__container {
	max-width: 1200px;
	margin: 0 auto;
}

/* Header */
.hairnoard-bg__head {
	max-width: 720px;
	margin: 0 auto 48px;
	text-align: center;
}
.hairnoard-bg--align-left .hairnoard-bg__head { margin-left: 0; text-align: left; }
.hairnoard-bg__eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: "Inter", sans-serif;
	font-size: .78rem; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--brand, #1167b1);
	margin-bottom: 16px;
}
.hairnoard-bg__eyebrow-line {
	display: inline-block; width: 26px; height: 2px;
	background: var(--brand, #1167b1);
	border-radius: 2px;
}
.hairnoard-bg__title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.12;
	color: #0c1a33;
	margin: 0;
}
.hairnoard-bg__subtitle {
	font-family: "Inter", sans-serif;
	font-size: 1.02rem;
	color: #4b5773;
	line-height: 1.6;
	margin: 14px 0 0;
}

/* Grid */
.hairnoard-bg__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

/* Card */
.hairnoard-bg__card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 22px;
	overflow: hidden;
	box-shadow:
		0 1px 0 rgba(16, 24, 40, 0.04),
		0 12px 28px -16px rgba(16, 24, 40, 0.18);
	transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hairnoard-bg__card:hover {
	transform: translateY(-4px);
	box-shadow:
		0 1px 0 rgba(16, 24, 40, 0.04),
		0 24px 48px -20px rgba(16, 24, 40, 0.25);
}

/* Media */
.hairnoard-bg__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #eef2fb 0%, #dde4f3 100%);
	overflow: hidden;
	text-decoration: none;
}
.hairnoard-bg--ar-1-1  .hairnoard-bg__media { aspect-ratio: 1 / 1; }
.hairnoard-bg--ar-4-3  .hairnoard-bg__media { aspect-ratio: 4 / 3; }
.hairnoard-bg--ar-3-2  .hairnoard-bg__media { aspect-ratio: 3 / 2; }
.hairnoard-bg--ar-16-9 .hairnoard-bg__media { aspect-ratio: 16 / 9; }

.hairnoard-bg__media > img.hairnoard-bg__img {
	position: absolute; inset: 0;
	display: block;
	width: 100%; height: 100%;
	max-width: none; margin: 0;
	object-fit: cover;
	object-position: center;
	transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hairnoard-bg__card:hover .hairnoard-bg__img {
	transform: scale(1.04);
}
.hairnoard-bg__placeholder {
	position: absolute; inset: 0;
	background:
		radial-gradient(circle at 70% 30%, rgba(17,103,177,0.18), transparent 60%),
		linear-gradient(135deg, #eef2fb 0%, #dde4f3 100%);
}

/* Category tag on image */
.hairnoard-bg__tag {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 6px 12px;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #0c1a33;
	font-family: "Inter", sans-serif;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: 999px;
	box-shadow: 0 8px 18px -6px rgba(16, 24, 40, 0.18);
}

/* Body */
.hairnoard-bg__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 22px 24px;
}
.hairnoard-bg__meta {
	font-family: "Inter", sans-serif;
	font-size: .78rem;
	letter-spacing: .04em;
	color: #6b7390;
	display: inline-flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 2px;
}
.hairnoard-bg__card-title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: 1.15rem;
	font-weight: 700;
	color: #0c1a33;
	margin: 0;
	line-height: 1.3;
	letter-spacing: -0.01em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hairnoard-bg__card-title a {
	color: inherit;
	text-decoration: none;
	transition: color .2s ease;
}
.hairnoard-bg__card-title a:hover {
	color: var(--brand, #1167b1);
}
.hairnoard-bg__excerpt {
	font-family: "Inter", sans-serif;
	font-size: .92rem;
	color: #4b5773;
	line-height: 1.55;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hairnoard-bg__more {
	margin-top: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: "Inter", sans-serif;
	font-size: .92rem;
	font-weight: 600;
	color: var(--brand, #1167b1);
	text-decoration: none;
	align-self: flex-start;
}
.hairnoard-bg__more svg {
	transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1);
}
.hairnoard-bg__card:hover .hairnoard-bg__more svg,
.hairnoard-bg__more:hover svg {
	transform: translateX(3px);
}

/* Pagination (same visual language as services grid) */
.hairnoard-bg__pager {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 48px;
}
.hairnoard-bg__pager-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	background: #fff;
	color: #0c1a33;
	border: 1px solid rgba(16, 24, 40, 0.08);
	border-radius: 999px;
	font-family: "Inter", sans-serif;
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s cubic-bezier(0.22, 1, 0.36, 1),
		color .2s cubic-bezier(0.22, 1, 0.36, 1),
		transform .2s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow .2s cubic-bezier(0.22, 1, 0.36, 1),
		border-color .2s cubic-bezier(0.22, 1, 0.36, 1);
}
.hairnoard-bg__pager-btn:hover {
	background: var(--brand, #1167b1);
	color: #fff;
	border-color: var(--brand, #1167b1);
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -8px rgba(17, 103, 177, 0.45);
}
.hairnoard-bg__pager-btn.is-active {
	background: var(--brand, #1167b1);
	color: #fff;
	border-color: var(--brand, #1167b1);
	box-shadow: 0 10px 20px -8px rgba(17, 103, 177, 0.45);
	cursor: default;
}
.hairnoard-bg__pager-btn.is-disabled {
	opacity: .35;
	cursor: not-allowed;
}
.hairnoard-bg__pager-gap {
	display: inline-flex;
	align-items: center;
	color: #98a0ad;
	padding: 0 4px;
	font-weight: 700;
}

/* Empty state */
.hairnoard-bg__empty {
	max-width: 520px;
	margin: 16px auto;
	padding: 56px 32px;
	text-align: center;
	background: #fff;
	border: 1px dashed rgba(16, 24, 40, 0.12);
	border-radius: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.hairnoard-bg__empty-icon {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(17, 103, 177, 0.08);
	color: var(--brand, #1167b1);
	font-size: 22px;
	margin-bottom: 4px;
}
.hairnoard-bg__empty-title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: 1.3rem;
	font-weight: 800;
	color: #0c1a33;
	margin: 0;
}
.hairnoard-bg__empty-text {
	font-family: "Inter", sans-serif;
	font-size: .96rem;
	color: #4b5773;
	line-height: 1.6;
	margin: 0;
}
.hairnoard-bg__empty-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	padding: 11px 20px;
	background: var(--brand, #1167b1);
	color: #fff;
	border-radius: 999px;
	font-family: "Inter", sans-serif;
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
	box-shadow: 0 8px 18px -6px rgba(17, 103, 177, 0.45);
}
.hairnoard-bg__empty-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -8px rgba(17, 103, 177, 0.55);
}

/* ==========================================================================
   Contact widget ? info bar + form + call card
   ========================================================================== */
.hairnoard-contact {
	--hn-brand: #1167b1;
	padding: 80px 24px;
}

/* Head */
.hairnoard-contact__head {
	max-width: 720px;
	margin: 0 auto 40px;
	text-align: center;
}
.hairnoard-contact__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: "Inter", sans-serif;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--hn-brand);
	margin-bottom: 16px;
}
.hairnoard-contact__eyebrow-line {
	display: inline-block;
	width: 26px;
	height: 2px;
	background: var(--hn-brand);
	border-radius: 2px;
}
.hairnoard-contact__title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.12;
	color: #0c1a33;
	margin: 0;
}
.hairnoard-contact__subtitle {
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	color: #4b5773;
	line-height: 1.6;
	margin: 12px 0 0;
}

/* Info bar */
.hairnoard-contact__infobar {
	max-width: 1200px;
	margin: 0 auto 36px;
	padding: 18px 18px;
	background: #fff;
	border-radius: 22px;
	box-shadow:
		0 1px 0 rgba(16, 24, 40, 0.04),
		0 18px 36px -22px rgba(16, 24, 40, 0.22);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	list-style: none;
}
.hairnoard-contact__info {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	border-radius: 14px;
	transition: background .2s ease;
}
.hairnoard-contact__info + .hairnoard-contact__info {
	border-left: 1px solid rgba(16, 24, 40, 0.06);
}
.hairnoard-contact__info-ic {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--hn-brand);
	color: #fff;
	font-size: 14px;
}
.hairnoard-contact__info-ic i,
.hairnoard-contact__info-ic svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}
.hairnoard-contact__info-body {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
}
.hairnoard-contact__info-label {
	font-family: "Inter", sans-serif;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6b7390;
	margin-bottom: 4px;
}
.hairnoard-contact__info-value {
	font-family: "Inter", sans-serif;
	font-size: .92rem;
	font-weight: 600;
	color: #0c1a33;
	text-decoration: none;
	transition: color .2s ease;
	word-break: break-word;
}
a.hairnoard-contact__info-value:hover { color: var(--hn-brand); }

/* Two columns */
.hairnoard-contact__cols {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 28px;
	align-items: stretch;
}

/* Form card */
.hairnoard-contact__form {
	background: #fff;
	border-radius: 24px;
	padding: 34px 34px 30px;
	box-shadow:
		0 1px 0 rgba(16, 24, 40, 0.04),
		0 18px 36px -22px rgba(16, 24, 40, 0.22);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.hairnoard-contact__form-title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: 1.35rem;
	font-weight: 800;
	color: #0c1a33;
	letter-spacing: -0.015em;
	margin: 0;
}
.hairnoard-contact__form-subtitle {
	font-family: "Inter", sans-serif;
	font-size: .92rem;
	color: #6b7390;
	margin: 0 0 6px;
}
.hairnoard-contact__form .hairnoard-hero-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.hairnoard-contact__form .hairnoard-hero-form__label {
	font-family: "Inter", sans-serif;
	font-size: .82rem;
	font-weight: 600;
	color: #4b5773;
}
.hairnoard-contact__form input[type="text"],
.hairnoard-contact__form input[type="email"],
.hairnoard-contact__form input[type="tel"],
.hairnoard-contact__form textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid rgba(16, 24, 40, 0.10);
	border-radius: 12px;
	background: #fff;
	font: inherit;
	color: #0c1a33;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.hairnoard-contact__form input:focus,
.hairnoard-contact__form textarea:focus {
	outline: none;
	border-color: var(--hn-brand);
	box-shadow: 0 0 0 4px rgba(17, 103, 177, 0.12);
}
.hairnoard-contact__form textarea {
	resize: vertical;
	min-height: 110px;
}
.hairnoard-contact__form .iti { width: 100%; }

/* Consent */
.hairnoard-contact__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: "Inter", sans-serif;
	font-size: .82rem;
	line-height: 1.5;
	color: #4b5773;
	margin-top: 4px;
	cursor: pointer;
}
.hairnoard-contact__consent input[type="checkbox"] {
	margin-top: 2px;
	width: 16px;
	height: 16px;
	accent-color: var(--hn-brand);
	flex: 0 0 auto;
}
.hairnoard-contact__consent a {
	color: #0c1a33;
	text-decoration: underline;
	font-weight: 600;
}

/* Submit button */
.hairnoard-contact__submit {
	margin-top: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 16px 24px;
	background: #0c1a33;
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform .2s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow .2s cubic-bezier(0.22, 1, 0.36, 1),
		background .2s ease;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.15) inset,
		0 14px 28px -14px rgba(12, 26, 51, 0.6);
}
.hairnoard-contact__submit:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.15) inset,
		0 20px 38px -16px rgba(12, 26, 51, 0.7);
}
.hairnoard-contact__submit:disabled { opacity: .7; cursor: wait; }
.hairnoard-contact__submit svg { transition: transform .2s ease; }
.hairnoard-contact__submit:hover svg { transform: translateX(3px); }

.hairnoard-contact__form .hairnoard-hero-form__status:not(:empty) {
	margin-top: 4px;
	padding: 12px 14px;
	border-radius: 12px;
	font-size: .92rem;
	font-family: "Inter", sans-serif;
}
.hairnoard-contact__form .hairnoard-hero-form__status.is-success {
	background: rgba(22, 163, 74, 0.08);
	color: #16a34a;
}
.hairnoard-contact__form .hairnoard-hero-form__status.is-error {
	background: rgba(220, 38, 38, 0.08);
	color: #dc2626;
}

/* Call card */
.hairnoard-contact__call {
	background: #fff;
	border-radius: 24px;
	padding: 36px 28px;
	box-shadow:
		0 1px 0 rgba(16, 24, 40, 0.04),
		0 18px 36px -22px rgba(16, 24, 40, 0.22);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
}
.hairnoard-contact__call-ic {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(17, 103, 177, 0.10);
	color: var(--hn-brand);
	font-size: 20px;
	margin-bottom: 6px;
}
.hairnoard-contact__call-title {
	font-family: "Manrope", "Inter", sans-serif;
	font-size: 1.2rem;
	font-weight: 800;
	color: #0c1a33;
	margin: 0;
	letter-spacing: -0.015em;
	line-height: 1.25;
}
.hairnoard-contact__call-subtitle {
	font-family: "Inter", sans-serif;
	font-size: .9rem;
	color: #6b7390;
	line-height: 1.55;
	margin: 0;
}
.hairnoard-contact__call-phone {
	display: inline-block;
	margin: 12px 0 4px;
	font-family: "Manrope", "Inter", sans-serif;
	font-size: 1.55rem;
	font-weight: 800;
	color: #0c1a33;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: color .2s ease, transform .2s ease;
}
.hairnoard-contact__call-phone:hover {
	color: var(--hn-brand);
	transform: translateY(-1px);
}
.hairnoard-contact__call-divider {
	display: block;
	width: 60px;
	height: 1px;
	background: rgba(16, 24, 40, 0.10);
	margin: 8px 0 12px;
}
.hairnoard-contact__call-wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	background: #25d366;
	color: #fff;
	border-radius: 999px;
	font-family: "Inter", sans-serif;
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
	box-shadow: 0 12px 22px -10px rgba(37, 211, 102, 0.55);
}
.hairnoard-contact__call-wa:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 30px -12px rgba(37, 211, 102, 0.65);
}
.hairnoard-contact__call-wa i { font-size: 16px; }
.hairnoard-contact__call-hours {
	font-family: "Inter", sans-serif;
	font-size: .82rem;
	color: #6b7390;
	margin: 14px 0 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.hairnoard-hero__inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.hairnoard-services__grid { grid-template-columns: repeat(2, 1fr); }
	.hairnoard-ba__grid       { grid-template-columns: repeat(2, 1fr); }
	.hairnoard-blog__grid     { grid-template-columns: repeat(2, 1fr); }
	.hairnoard-sg__grid       { grid-template-columns: repeat(2, 1fr); }
	.hairnoard-bg__grid       { grid-template-columns: repeat(2, 1fr); }

	.hairnoard-about__inner {
		grid-template-columns: 1fr;
		gap: 56px;
	}
	.hairnoard-about--img-left .hairnoard-about__content { order: 2; }
	.hairnoard-about--img-left .hairnoard-about__visual  { order: 1; }
	.hairnoard-about__visual  { min-height: 0; }
	.hairnoard-about__media   { margin: 0 auto; max-width: 520px; }

	.hairnoard-faq__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.hairnoard-process__inner,
	.hairnoard-process--steps-left .hairnoard-process__inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.hairnoard-process--steps-left .hairnoard-process__intro { order: 1; }
	.hairnoard-process--steps-left .hairnoard-process__steps { order: 2; }

	.hairnoard-contact__cols { grid-template-columns: 1fr; }
	.hairnoard-contact__infobar { grid-template-columns: repeat(2, 1fr); }
	.hairnoard-contact__info + .hairnoard-contact__info {
		border-left: 0;
	}
}
@media (max-width: 680px) {
	.hairnoard-hero {
		padding: calc(var(--header-h, 70px) + var(--header-gap, 14px) + 24px) 16px 48px;
	}
	.hairnoard-hero-form { padding: 22px; border-radius: 20px; }
	.hairnoard-hero__trust { gap: 18px 28px; }

	.hairnoard-services { padding: 64px 16px; }
	.hairnoard-services__grid { grid-template-columns: 1fr; }
	.hairnoard-services__head { margin-bottom: 40px; }
	.hairnoard-service__media { height: 180px; }

	.hairnoard-ba { padding: 64px 16px; }
	.hairnoard-ba__grid { grid-template-columns: 1fr; }
	.hairnoard-ba__head { margin-bottom: 32px; }

	.hairnoard-cta { padding: 48px 16px; }
	.hairnoard-cta__inner { padding: 56px 28px; border-radius: 24px; }
	.hairnoard-cta__btn { width: 100%; justify-content: center; }
	.hairnoard-cta__buttons { width: 100%; }

	.hairnoard-blog { padding: 64px 16px; }
	.hairnoard-blog__grid { grid-template-columns: 1fr; }
	.hairnoard-blog__head { margin-bottom: 32px; }

	.hairnoard-about { padding: 64px 16px; }
	.hairnoard-about__list { grid-template-columns: 1fr; gap: 14px; }
	.hairnoard-about__stat--tl,
	.hairnoard-about__stat--tr,
	.hairnoard-about__stat--bl,
	.hairnoard-about__stat--br,
	.hairnoard-about--img-left .hairnoard-about__stat--tl,
	.hairnoard-about--img-left .hairnoard-about__stat--tr,
	.hairnoard-about--img-left .hairnoard-about__stat--bl,
	.hairnoard-about--img-left .hairnoard-about__stat--br {
		left: 8px; right: 8px;
	}
	.hairnoard-about__stat--tl,
	.hairnoard-about__stat--tr { top: 8px; right: auto; left: 8px; }
	.hairnoard-about__stat--bl,
	.hairnoard-about__stat--br { bottom: 8px; right: auto; left: 8px; }
	.hairnoard-about__media-sm { width: 38%; bottom: -20px; }

	.hairnoard-faq { padding: 56px 16px; }
	.hairnoard-faq__form { padding: 24px; border-radius: 20px; }
	.hairnoard-faq__row { grid-template-columns: 1fr; gap: 14px; }

	.hairnoard-ph { padding: 100px 16px 32px; min-height: 180px; }
	.hairnoard-ph__sep { margin: 0 6px; }
	.hairnoard-ph__crumbs li { font-size: .85rem; }

	.hairnoard-sg { padding: 64px 16px; }
	.hairnoard-sg__grid { grid-template-columns: 1fr; gap: 20px; }
	.hairnoard-sg__head { margin-bottom: 36px; }
	.hairnoard-sg__pager { margin-top: 36px; }
	.hairnoard-sg__pager-btn { min-width: 36px; height: 36px; font-size: .85rem; }
	.hairnoard-sg__empty { padding: 40px 24px; }

	.hairnoard-process { padding: 64px 16px; }
	.hairnoard-process__btn { padding: 12px 20px; font-size: .9rem; }
	.hairnoard-process__step { grid-template-columns: 34px 1fr; gap: 16px; padding-bottom: 22px; }
	.hairnoard-process__num { width: 34px; height: 34px; font-size: .85rem; }
	.hairnoard-process__rail { left: 17px; }

	.hairnoard-bg { padding: 64px 16px; }
	.hairnoard-bg__grid { grid-template-columns: 1fr; gap: 20px; }
	.hairnoard-bg__head { margin-bottom: 36px; }
	.hairnoard-bg__pager { margin-top: 36px; }
	.hairnoard-bg__pager-btn { min-width: 36px; height: 36px; font-size: .85rem; }
	.hairnoard-bg__empty { padding: 40px 24px; }

	.hairnoard-contact { padding: 56px 16px; }
	.hairnoard-contact__head { margin-bottom: 28px; }
	.hairnoard-contact__infobar { grid-template-columns: 1fr; gap: 4px; padding: 12px; }
	.hairnoard-contact__form { padding: 24px; border-radius: 20px; }
	.hairnoard-contact__call { padding: 28px 22px; border-radius: 20px; }
	.hairnoard-contact__call-phone { font-size: 1.3rem; }
}

/* Restore hover transitions - Elementor zeros them under prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
	html .hairnoard-cta__btn,
	html .hairnoard-about__btn,
	html .hairnoard-process__btn,
	html .hairnoard-hero-form__submit,
	html .hairnoard-contact__submit,
	html .hairnoard-contact__call-wa,
	html .hairnoard-faq__btn,
	html .hairnoard-service,
	html .hairnoard-service__link,
	html .hairnoard-sg__card,
	html .hairnoard-blog__card,
	html .hairnoard-bg__card,
	html .hairnoard-ba-card {
		transition-duration: 0.3s !important;
		transition-delay: 0s !important;
	}
	html .hairnoard-service,
	html .hairnoard-sg__card,
	html .hairnoard-blog__card,
	html .hairnoard-ba-card {
		transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
	}
	html .hairnoard-cta__btn,
	html .hairnoard-about__btn,
	html .hairnoard-process__btn,
	html .hairnoard-hero-form__submit,
	html .hairnoard-contact__submit {
		transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, color 0.2s ease !important;
	}
}

/* Prevent Elementor flex containers from stretching service cards tall */
.elementor-widget-hairnoard-services,
.elementor-widget-hairnoard-services > .elementor-widget-container {
	height: auto !important;
	align-self: flex-start;
	width: 100%;
}