/* Navbar */

.navbar {
	padding-top: 24px;
	padding-bottom: 24px;
}

.nav-link {
	color: var(--dark-grey);
}

.navbar-brand img{
	width: 100px;
}

.nav-item:not(:last-child) {
	margin-right: 24px;
}

.navbar>.container-fluid {
	padding-left: 54px;
	padding-right: 54px;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
	color: var(--red);
}

.dropdown-menu {
	font-size: 14px;
}

/* ──────────────────────────────────────────────────────────
   Modals — LIGHT THEME (Jonite-inspired)
   Clean white surface, dark text, subtle borders, brand red
   accents. Applies globally to every Bootstrap modal across
   the site. Individual modals (e.g. the bespoke .hn-join-modal)
   can layer their own styles on top.
   ────────────────────────────────────────────────────────── */

.modal-content {
	background-color: #ffffff;
	color: var(--dark-grey);
	border: none;
	border-radius: 20px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
	overflow: hidden;
}

.modal-header {
	background: transparent;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	padding: 22px 28px 18px;
	align-items: center;
	gap: 12px;
}

.modal-title {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 1.4rem;
	color: var(--black);
	margin: 0;
	line-height: 1.3;
}

.modal-body {
	padding: 24px 28px;
	color: var(--dark-grey);
	font-size: 14px;
	line-height: 1.6;
}

.modal-body p {
	margin-bottom: 12px;
}

.modal-body p:last-child {
	margin-bottom: 0;
}

.modal-body .buttons {
	padding: 24px 0 0;
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.modal-footer {
	background: transparent;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	padding: 14px 28px 18px;
	justify-content: center;
	color: var(--grey);
	font-size: 13px;
	gap: 8px;
}

.modal-footer p {
	margin: 0;
}

.modal-footer a {
	color: var(--red);
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}

.modal-footer a:hover {
	color: var(--rosewood);
	text-decoration: underline;
}

/* Close button — pill background, rotates 90° on hover */
.modal .btn-close {
	background-color: rgba(0, 0, 0, 0.06);
	border-radius: 50%;
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	opacity: 0.7;
	background-position: center;
	background-size: 12px;
	transition: background-color 0.25s ease, opacity 0.25s ease, transform 0.3s ease;
}

.modal .btn-close:hover {
	background-color: var(--peach);
	opacity: 1;
	transform: rotate(90deg);
}

.modal .btn-close:focus {
	box-shadow: 0 0 0 0.2rem rgba(145, 9, 17, 0.15);
	outline: none;
}

/* Backdrop — deeper, warmer black for contrast against white modals */
.modal-backdrop.show {
	background-color: #0a0606;
	opacity: 0.55;
}

/* Entrance animation — subtle scale + fade */
.modal.fade .modal-dialog {
	transform: translateY(-16px) scale(0.98);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.show .modal-dialog {
	transform: translateY(0) scale(1);
}

/* Mobile padding tweak */
@media (max-width: 576px) {
	.modal-header,
	.modal-body,
	.modal-footer {
		padding-left: 20px;
		padding-right: 20px;
	}
	.modal-content {
		border-radius: 16px;
	}
	.modal-title {
		font-size: 1.2rem;
	}
}

/* Landing Page */
.landing-page {
	height: calc(100vh - 88px);
	padding-left: 54px;
	padding-right: 54px;
}

.landing-section {
	display: flex;
    align-items: center;
}

.landing-page-content h1, .section-subheading {
	font-family: 'Playfair Display', serif;
	font-weight: 900;
	font-size: 2.7rem;
}

.floating-img img {
	width: 100%;
}

.landing-page-links > :not(:last-child) {
	margin-right: 2.7rem;
}

.landing-page-links {
	margin-top: 54px;
}

section {
	padding-left: 54px;
	padding-right: 54px;
}

.section-heading {
	font-size: 24px;
	color: var(--red);
}

#services, #recruitment, .landing-page {
	margin-bottom: 108px;
}

#services .col-md-6 {
	display: flex;
    align-items: center;
	justify-content: center;
}

#services .page-content {
	width: 700px;
}

.card {
	max-width: 400px;
	border: none;
	box-shadow: rgb(0 0 0 / 16%) 0px 12px 24px;
}

.card-header {
	font-family: 'Playfair Display', serif;
	font-weight: 900;
	font-size: 54px;
	background: none;
	border-bottom: none;
	padding: 24px 24px 0px 24px;
}

.card-title {
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 24px;
}

.card-text {
	margin-bottom: 24px;
}

.card-body {
	padding: 16px 24px 24px 24px;
}

#clients {
	background: var(--red);
	padding: 54px 24px;
}

#clientCarousel .img-container {
	max-width: 100px;
}

.owl-carousel .owl-item {
	display: flex;
	justify-content: center;
}

footer {
	background-color: var(--peach);
	color: var(--red);
	padding: 54px;
}

footer img {
	width: 150px;
}

.footer-heading {
	font-weight: 600;
	margin-bottom: 24px;
}

footer ul {
	padding-left: 0px;
}

footer ul li {
	list-style-type: none;
	margin-bottom: 16px;
}

/* Steps */

.steps-section {
	min-height: 100vh;
	display: flex;
    justify-content: center;
    align-items: center;
	margin-top: 54px;
}

.process-form img {
	position: absolute;
	width: 150px;
	margin-top: 38px;
}

.step {
	display: flex;
    flex-direction: column;
    align-items: center;
}

.circular-button {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: background-color 0.3s ease, transform 0.3s ease;
	margin-bottom: 8px;
	background: none;
	border: 1px solid var(--grey);
    color: var(--grey);
}

.step-description {
	color: var(--grey);
	margin-bottom: 8px;
	font-size: 12px;
}

.vertical-line {
    width: 2px;
    height: 24px;
    background-color: var(--grey);
    margin: 0 auto;
	margin-bottom: 8px;
}

.step.active .circular-button {
	background-color: var(--red);
	color: var(--peach);
	border: 1px solid var(--red);
}

.step.active .step-description {
	color: var(--red);
	font-weight: 600;
}

.step.active .vertical-line {
	background-color: var(--red);
}

.circle-button span {
    display: block;
}

.process-form .card {
	border-radius: 32px;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
	width: 100%;
	max-width: 100%;
	height: 80%;
	padding: 54px;
}

.process-form .card-body {
	padding: 0px;
}

.process-form .card-title {
	font-family: 'Playfair Display', serif;
	font-weight: 900;
}

.floating-logo {
	position: absolute;
    margin-top: 38px;
    padding: 0px;
	display: contents;
}

.process-form .logo-container {
	width: 150px;
}

.form-section hr {
	margin: 24px 0px;

}

.form-section {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100%;
	width: 100%;
	margin-top: 24px;
}

.form-section form {
	padding-bottom: 120px;
}

.form-control,.form-select {
	padding: 12px 24px;
    font-size: 14px;
	background-color: var(--light-grey);
	border-radius: 16px;
	border: none;
}

.form-control:focus {
	border-color: var(--peach);
	box-shadow: 0 0 0 .25rem var(--peach);
}

label {
	margin-bottom: 8px;
}

.checks {
	margin-top: 10px;
}

.form-check-input:checked {
    background-color: var(--red);
    border-color: var(--red);
}

.form-check-input:focus {
	box-shadow: 0 0 0 .25rem var(--peach);
}

.button-group {
	position: absolute;
	bottom: 54px;
}

/* Success Page */

.wrapper {
	display: flex;
    flex-direction: column;
    min-height: calc(100vh - 88px);
}

/* ── Enrollment success (revamped, role-aware) ── */
.es-section {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 72px 24px 96px;
	background:
		radial-gradient(ellipse at 50% -10%, rgba(254, 215, 201, 0.45) 0%, transparent 55%),
		#ffffff;
}

.es-card {
	width: 100%;
	max-width: 620px;
	text-align: center;
}

/* Animated check badge */
.es-check {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--peach);
	color: var(--red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 34px;
	margin-bottom: 26px;
	position: relative;
	animation: esPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.es-check::after {
	content: "";
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	border: 2px solid var(--peach);
	opacity: 0;
	animation: esRing 0.9s ease-out 0.2s both;
}

@keyframes esPop {
	from { transform: scale(0.4); opacity: 0; }
	to   { transform: scale(1); opacity: 1; }
}

@keyframes esRing {
	from { transform: scale(0.8); opacity: 0.8; }
	to   { transform: scale(1.25); opacity: 0; }
}

.es-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 14px;
}

.es-title {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: clamp(2rem, 4vw, 2.8rem);
	color: var(--black);
	line-height: 1.1;
	margin: 0 0 16px;
}

.es-title .accent { color: var(--red); font-style: italic; }

.es-lede {
	color: #666;
	font-size: 15px;
	line-height: 1.75;
	max-width: 52ch;
	margin: 0 auto 40px;
}

/* Trial-subscription notice (enrollment success). */
.es-trial {
	display: flex;
	gap: 14px;
	text-align: left;
	background: #fff7ed;
	border: 1px solid #f4c98a;
	border-radius: 16px;
	padding: 18px 20px;
	margin: 0 auto 36px;
	max-width: 60ch;
}
.es-trial-icon {
	flex-shrink: 0;
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	background: #fbe4c2; color: #b45309;
	border-radius: 50%;
	font-size: 17px;
}
.es-trial-body { font-size: 14px; line-height: 1.65; color: #7c4a12; }
.es-trial-body strong { color: #5c3608; }
.es-trial-cta {
	display: inline-block; margin-top: 8px; font-weight: 700;
	color: var(--red); text-decoration: none;
}
.es-trial-cta:hover { text-decoration: underline; }

/* Next-step cards */
.es-steps {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
	margin-bottom: 36px;
}

.es-step {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 16px;
	text-decoration: none;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.es-step:hover {
	border-color: rgba(145, 9, 17, 0.25);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.07);
	transform: translateY(-2px);
}

.es-step-icon {
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: var(--peach);
	color: var(--red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	flex-shrink: 0;
	transition: background 0.25s ease, color 0.25s ease;
}

.es-step:hover .es-step-icon { background: var(--red); color: var(--peach); }

.es-step-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.es-step-text strong {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 2px;
}

.es-step-text small {
	font-size: 12.5px;
	color: #888;
	line-height: 1.45;
}

.es-step-arrow {
	color: var(--grey);
	font-size: 13px;
	flex-shrink: 0;
	transition: color 0.25s ease, transform 0.25s ease;
}

.es-step:hover .es-step-arrow { color: var(--red); transform: translateX(4px); }

/* Primary actions */
.es-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.es-home-link {
	font-size: 13px;
	font-weight: 600;
	color: var(--grey);
	letter-spacing: 0.02em;
}

.es-home-link:hover { color: var(--red); }

.es-note {
	margin: 32px auto 0;
	max-width: 50ch;
	font-size: 12.5px;
	color: var(--grey);
	line-height: 1.6;
}

.es-note i { color: var(--red); margin-right: 6px; }

@media (max-width: 576px) {
	.es-section { padding: 48px 18px 64px; }
	.es-step { padding: 14px; gap: 12px; }
	.es-step-text small { display: none; }
}

/* Workforce Page */

#workforce {
	padding-top: 24px;
	padding-bottom: 54px;
}

header {
	background-image: url('../img/header.png');
	text-align: center;
	color: var(--peach);
	padding: 24px;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100vw;
	min-height: 180px;
	margin-bottom: 24px;
}

header h1 {
	font-family: 'Playfair Display', serif;
	font-weight: 900;
	font-size: 54px;
}

.subheading {
	display: flex;
	justify-content: center;
}

.subheading p {
	text-align: center;
}

#workforce .img-frame, #contact .img-frame {
	width: 200px;
    height: 200px;
    border: 1px solid var(--peach);
    border-radius: 50%;
    display: flex;
    align-items: center;
	justify-content: center;
	margin: 24px auto;
}

.member .card-body, .contact-info .card-body {
	text-align: center;
	padding-bottom: 54px;
}

.member h5, .contact-info h5{
	font-size: 14px;
    color: var(--red);
}

.card.member, .card.contact-info {
	border-radius: 16px;
	margin-bottom: 24px;
}

#contact {
	margin-top: 54px;
	margin-bottom: 54px;
}

#contact .img-frame img {
	max-height: 4rem;
}

.contact-form {
	width: 75%;
	margin-left: auto;
	margin-right: auto;
}

#skills {
	text-align: center;
	margin-bottom: 54px;
}

.skill {
	display: flex;
	justify-content: center;
}

.skill img {
	width: 100px;
	margin: 0px auto 24px;
}

.skill .card {
	background-color: var(--peach);
	width: 600px;
	padding: 54px;
	text-align: center;
}

.skill h5 {
	color: var(--red);
}

/* ============================================================
   Public error pages (marketing side: 400/401/403/404/429/500/503).
   A brand-styled centred card. Deliberately DISTINCT from the
   dashboard error pages (which keep the full app shell) — warm
   surface + logo instead of the cool app chrome — while sharing the
   brand red and type scale so both read as one product.
   ============================================================ */
.hn-pub-err {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	background:
		radial-gradient(58% 60% at 50% -8%, rgba(145, 9, 17, 0.06), transparent 70%),
		#F7F5F4;
}
.hn-pub-err-card {
	width: 100%;
	max-width: 500px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.hn-pub-err-brand { display: inline-block; margin-bottom: 30px; }
.hn-pub-err-brand img { height: 32px; width: auto; }
.hn-pub-err-badge {
	width: 86px;
	height: 86px;
	border-radius: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 33px;
	background: var(--peach);
	color: var(--red);
	margin-bottom: 22px;
}
.hn-pub-err-badge.is-danger { background: #FBE3E4; color: #C0362C; }
.hn-pub-err-badge.is-warn   { background: #FCEFD6; color: #B4770C; }
.hn-pub-err-badge.is-info   { background: #E6EEF6; color: #2E6F9E; }
.hn-pub-err-code {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--grey);
	margin: 0 0 10px;
}
.hn-pub-err-title {
	margin: 0;
	font-size: clamp(24px, 5vw, 32px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--dark-grey);
	line-height: 1.15;
}
.hn-pub-err-desc {
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: #5B5B5B;
	max-width: 44ch;
}
.hn-pub-err-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 28px;
}
.hn-pub-err-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: all 0.15s ease;
	text-decoration: none;
}
.hn-pub-err-btn-primary { background: var(--red); color: #fff; border-color: var(--red); }
.hn-pub-err-btn-primary:hover { background: #75070D; border-color: #75070D; color: #fff; }
.hn-pub-err-btn-ghost { background: #fff; color: var(--dark-grey); border-color: #E4DFDC; }
.hn-pub-err-btn-ghost:hover { border-color: var(--red); color: var(--red); }
.hn-pub-err-meta { margin-top: 22px; font-size: 13px; line-height: 1.6; color: var(--grey); }
.hn-pub-err-meta a { color: var(--red); font-weight: 600; }
@media (max-width: 520px) {
	.hn-pub-err-actions { width: 100%; }
	.hn-pub-err-btn { flex: 1 1 auto; justify-content: center; }
}

@media (min-width: 1800px){

}

@media (min-width: 769px) and (max-width: 1300px) {

}

@media (max-width: 576px){
	.navbar>.container-fluid {
		padding-left: 24px;
		padding-right: 24px;
	}
	.landing-page {
		padding-left: 24px;
		padding-right: 24px;
		text-align: center;
	}

	.landing-page > .row {
		flex-direction: column-reverse;
	}

	.landing-page-content h1 {
		font-size: 1.7rem;
		margin-top: 16px;
	}

	.landing-page-links {
		margin-top: 54px;
		display: flex;
		flex-direction: column;
	}

	.landing-page-links {
		margin-top: 24px;
		display: inline-flex;
		flex-direction: column;
	}

	.landing-page-links > :not(:last-child) {
		margin-bottom: 8px;
		margin-right: 0px;
	}

	section {
		padding-left: 24px;
		padding-right: 24px;
	}

	#services .floating-img {
		margin-bottom: 24px;
		margin-top: 24px;
	}

	#recruitment .card.h-100 {
		margin-bottom: 24px;
		height: auto !important;
	}

	footer {
		padding: 24px;
	}

	.btn-large {
		padding: 20px 54px;
	}

	.navbar-collapse {
		position: absolute;
		top: 54px;
		background: rgb(255 255 255 / 90%);
		padding: 24px;
		border-radius: 16px;
	}

	.navbar-toggler:focus {
		box-shadow: none;
	}

	header h1 {
		font-size: 24px;
	}

	.contact-form {
		width: 100%;
	}

	.auth .row.h-100 {
		height: 100% !important;
	}

	.side-overlay.h-100.w-100 {
		height: 140px !important;
        margin-bottom: 24px;
	}

	.process-form .card {
		border-radius: 24px;
		padding: 24px;
	}

	.process-form .card-title {
		font-size: 32px;
	}

	.process-form .button-group {
		position: unset;
	}

	.steps-section {
		min-height: unset;
		margin-top: 108px;
	}

	.multi-form {
		border-bottom: 1px solid lightgrey;
		padding-bottom: 1rem;
	}
}


/* ================================================================
   REDESIGNED LANDING PAGE — 2025
   All styles below are additive. Existing page styles untouched.
   ================================================================ */

/* --------------------------------
   NAVBAR — Jonite-Style (focus dim + bottom sub-bar)
   -------------------------------- */

/* Outer shell */
#mainNav.hn-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #ffffff;
	border-bottom: 1px solid transparent;
	transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

#mainNav.hn-nav.nav-scrolled {
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 1px 24px rgba(0, 0, 0, 0.06);
}

/* Main bar */
.hn-nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 54px;
	gap: 32px;
}

.hn-brand {
	flex-shrink: 0;
	display: inline-block;
}

.hn-brand img {
	width: 100px;
	display: block;
}

/* Nav list */
.hn-nav-list {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 38px;
	align-items: center;
}

.hn-nav-item {
	position: relative;
	transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hn-nav-item > a {
	color: var(--dark-grey);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 6px 0;
	display: inline-block;
	position: relative;
	transition: color 0.3s ease;
}

.hn-nav-item > a > span {
	position: relative;
	display: inline-block;
}

/* Underline indicator */
.hn-nav-item > a > span::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 1.5px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hn-nav-item:hover > a,
.hn-nav-item.is-active > a {
	color: var(--red);
}

.hn-nav-item:hover > a > span::after,
.hn-nav-item.is-active > a > span::after {
	transform: scaleX(1);
}

/* Spotlight dim: when nav is being hovered, dim the others */
.hn-nav.nav-is-hovering .hn-nav-item:not(:hover):not(.is-active) {
	opacity: 0.28;
}

/* Right-side actions */
.hn-nav-actions {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-shrink: 0;
}

.hn-signin {
	color: var(--dark-grey);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.3s ease;
}

.hn-signin:hover {
	color: var(--red);
}

.hn-nav-actions .hn-cta {
	padding: 11px 26px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* ── Authenticated account menu (public nav) ── */
.hn-account .hn-cta.dropdown-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 18px 8px 8px;
	text-transform: none;
	letter-spacing: 0.02em;
}

.hn-account .hn-cta.dropdown-toggle::after {
	margin-left: 2px;
	border-top-color: currentColor;
}

.hn-account-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--peach);
	color: var(--red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
}

.hn-account-name {
	font-size: 12.5px;
	font-weight: 600;
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hn-account-menu {
	border: none;
	border-radius: 14px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
	padding: 8px;
	min-width: 220px;
	margin-top: 10px;
}

.hn-account-menu .dropdown-item {
	border-radius: 9px;
	padding: 9px 12px;
	font-size: 13px;
	font-weight: 500;
	color: var(--dark-grey);
	display: flex;
	align-items: center;
}

.hn-account-menu .dropdown-item:hover,
.hn-account-menu .dropdown-item:focus {
	background: var(--light-grey);
	color: var(--red);
}

.hn-account-menu form { margin: 0; }
.hn-account-menu .dropdown-item i { color: var(--red); width: 18px; }

/* Mobile toggler */
.hn-mobile-toggle {
	display: none;
	background: none;
	border: none;
	color: var(--dark-grey);
	font-size: 22px;
	padding: 6px 10px;
	cursor: pointer;
}

.hn-mobile-toggle:focus {
	outline: none;
}

/* The "Get Started" trigger is also a sub-panel opener — drop a small
   chevron indicator and slight active-state animation. */
.hn-cta-trigger {
	position: relative;
	transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.hn-cta-trigger.is-active {
	background-color: var(--rosewood);
	border-color: var(--rosewood) !important;
	box-shadow: 0 6px 18px rgba(145, 9, 17, 0.25);
}

/* ─── Sub-nav (bottom bar) ─── */
.hn-subnav {
	max-height: 0;
	overflow: hidden;
	background: #ffffff;
	border-top: 1px solid transparent;
	transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
				border-color 0.3s ease;
}

.hn-nav.nav-is-open .hn-subnav {
	max-height: 130px;
	border-top-color: rgba(0, 0, 0, 0.06);
}

.hn-subnav-inner {
	position: relative;
	padding: 16px 54px 22px;
	min-height: 88px;
}

/* Each panel stacks in the same position, fade between */
.hn-sub-panel {
	position: absolute;
	top: 16px;
	bottom: 22px;
	left: 54px;
	right: 54px;
	display: flex;
	gap: 28px;
	flex-wrap: nowrap;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity 0.32s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hn-sub-panel.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Sub-link */
.hn-sub-link {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	padding: 8px 16px 8px 10px;
	border-radius: 12px;
	transition: background 0.25s ease, transform 0.25s ease;
	min-width: 0;
	flex: 0 0 auto;
}

.hn-sub-link:hover {
	background: var(--light-grey);
}

.hn-sub-icon {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--peach);
	color: var(--red);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
	transition: background 0.25s ease, color 0.25s ease;
}

.hn-sub-link:hover .hn-sub-icon {
	background: var(--red);
	color: var(--peach);
}

.hn-sub-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	min-width: 0;
}

.hn-sub-text strong {
	font-size: 13px;
	font-weight: 600;
	color: var(--dark-grey);
	margin-bottom: 1px;
	white-space: nowrap;
}

.hn-sub-text small {
	font-size: 11px;
	color: #888;
	font-weight: 400;
	white-space: nowrap;
}

/* ─── Join (Get Started) sub-panel — peach background ───
   Triggered by .subnav-join-mode (set by JS when the join
   panel is the active one). Differentiates this CTA panel
   from the informational sub-nav above it.
*/
.hn-subnav.subnav-join-mode {
	background: var(--peach);
	border-top-color: rgba(145, 9, 17, 0.12) !important;
}

.hn-subnav.subnav-join-mode .hn-sub-link {
	background: rgba(255, 255, 255, 0.4);
}

.hn-subnav.subnav-join-mode .hn-sub-link:hover {
	background: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(145, 9, 17, 0.12);
}

/* Invert icon colours so they're legible on peach */
.hn-subnav.subnav-join-mode .hn-sub-icon {
	background: var(--red);
	color: var(--peach);
}

.hn-subnav.subnav-join-mode .hn-sub-link:hover .hn-sub-icon {
	background: var(--rosewood);
}

.hn-subnav.subnav-join-mode .hn-sub-text strong {
	color: var(--rosewood);
}

.hn-subnav.subnav-join-mode .hn-sub-text small {
	color: rgba(103, 6, 13, 0.65);
}

/* ──────────────────────────────────────────────────────────
   REVAMPED JOIN MODAL (used by deep-page CTAs, NOT the navbar)
   ────────────────────────────────────────────────────────── */
.hn-join-modal .modal-content {
	background: #ffffff;
	color: var(--dark-grey);
	border-radius: 24px;
	border: none;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
}

.hn-join-modal .modal-body {
	padding: 0;
}

.hn-join-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.06);
	color: var(--dark-grey);
	z-index: 10;
	transition: background 0.2s ease, transform 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hn-join-close:hover {
	background: var(--red);
	color: var(--peach);
	transform: rotate(90deg);
}

.hn-join-header {
	text-align: center;
	padding: 40px 32px 28px;
	background: linear-gradient(180deg, var(--peach) 0%, rgba(254, 215, 201, 0) 100%);
}

.hn-join-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 14px;
}

.hn-join-dot {
	width: 6px;
	height: 6px;
	background: var(--red);
	border-radius: 50%;
}

.hn-join-header h2 {
	font-family: 'Playfair Display', serif;
	font-weight: 900;
	font-size: 2rem;
	color: var(--black);
	margin-bottom: 8px;
	line-height: 1.2;
}

.hn-join-header p {
	color: var(--dark-grey);
	margin: 0;
	font-size: 14px;
	opacity: 0.75;
}

.hn-join-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	padding: 8px 28px 28px;
}

.hn-join-card {
	display: flex;
	flex-direction: column;
	padding: 22px 20px 18px;
	border: 1.5px solid rgba(0, 0, 0, 0.07);
	border-radius: 16px;
	text-decoration: none;
	color: inherit;
	background: #ffffff;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.hn-join-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.hn-join-card:hover {
	border-color: var(--red);
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(145, 9, 17, 0.12);
}

.hn-join-card:hover::before {
	transform: scaleX(1);
}

.hn-join-card-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--peach);
	color: var(--red);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	margin-bottom: 14px;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.hn-join-card:hover .hn-join-card-icon {
	background: var(--red);
	color: var(--peach);
	transform: scale(1.05);
}

.hn-join-card strong {
	font-size: 15px;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 6px;
	line-height: 1.3;
}

.hn-join-card small {
	font-size: 12px;
	color: #777;
	line-height: 1.55;
	margin-bottom: 16px;
	flex: 1;
}

.hn-join-card-cta {
	font-size: 11px;
	font-weight: 700;
	color: var(--red);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.hn-join-card-cta i {
	transition: transform 0.25s ease;
	font-size: 10px;
}

.hn-join-card:hover .hn-join-card-cta i {
	transform: translateX(5px);
}

.hn-join-footer {
	text-align: center;
	padding: 12px 28px 32px;
	font-size: 13px;
	color: var(--grey);
	margin: 0;
}

.hn-join-footer a {
	color: var(--red);
	font-weight: 600;
}

.hn-join-footer a:hover {
	color: var(--rosewood);
}

@media (max-width: 576px) {
	.hn-join-grid {
		grid-template-columns: 1fr;
		padding: 8px 18px 22px;
	}
	.hn-join-header {
		padding: 32px 20px 22px;
	}
	.hn-join-header h2 {
		font-size: 1.6rem;
	}
}

/* ──────────────────────────────────────────────────────────
   MINI MODAL — used by the hero "Hire Talent" / "Find Work"
   CTAs. Light theme, single-purpose, vertically stacked.
   ────────────────────────────────────────────────────────── */
.hn-mini-modal .modal-content {
	border-radius: 20px;
	overflow: hidden;
}

.hn-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 5;
}

.hn-mini-modal .modal-body {
	padding: 36px 28px 24px;
}

.hn-mini-header {
	text-align: center;
	margin-bottom: 24px;
}

.hn-mini-icon {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: var(--peach);
	color: var(--red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin-bottom: 16px;
}

.hn-mini-header h2 {
	font-family: 'Playfair Display', serif;
	font-weight: 900;
	font-size: 1.6rem;
	color: var(--black);
	margin: 0 0 8px;
	line-height: 1.25;
}

.hn-mini-header p {
	color: var(--grey);
	font-size: 13.5px;
	line-height: 1.55;
	margin: 0;
}

/* Stacked role-picker links (used inside #getHired) */
.hn-mini-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hn-mini-option {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1.5px solid rgba(0, 0, 0, 0.07);
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
	background: #fff;
	transition: border-color 0.22s ease, background 0.22s ease, transform 0.2s ease;
}

.hn-mini-option:hover {
	border-color: var(--red);
	background: var(--peach);
	transform: translateX(2px);
}

.hn-mini-option-icon {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--peach);
	color: var(--red);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
	transition: background 0.22s ease, color 0.22s ease;
}

.hn-mini-option:hover .hn-mini-option-icon {
	background: var(--red);
	color: var(--peach);
}

.hn-mini-option-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	flex: 1;
	min-width: 0;
}

.hn-mini-option-text strong {
	font-size: 14px;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 1px;
}

.hn-mini-option-text small {
	font-size: 11.5px;
	color: var(--grey);
	margin: 0;            /* override the global small margin-top */
}

.hn-mini-option-arrow {
	color: var(--clay);
	font-size: 12px;
	transition: transform 0.22s ease, color 0.22s ease;
}

.hn-mini-option:hover .hn-mini-option-arrow {
	color: var(--red);
	transform: translateX(4px);
}

.hn-mini-footer {
	margin: 18px 0 0;
	font-size: 12px;
	color: var(--grey);
	text-align: center;
}

.hn-mini-footer a {
	color: var(--red);
	font-weight: 600;
}

@media (max-width: 576px) {
	.hn-mini-modal .modal-body {
		padding: 28px 20px 18px;
	}
	.hn-mini-header h2 {
		font-size: 1.4rem;
	}
}

/* ──────────────────────────────────────────────────────────
   WIZARD SIDE PROGRESS RAIL
   Sits in the col-md-3 next to enrollment forms. Shows:
     • Step counter ("Step 2 of 4")
     • Horizontal progress fill
     • Numbered step list with checkmarks for completed steps
   Replaces the older .steps / .circular-button look.
   ────────────────────────────────────────────────────────── */

/* The OLD floating-logo block in process-form templates positions the
   HotelNet logo absolutely in the top-left corner — that now collides
   with the new .wiz-side rail. Hide it here so we can keep the existing
   templates intact, and render the logo INSIDE .wiz-side instead. */
.process-form .floating-logo,
.process-form .floating-logo * {
	display: none !important;
	visibility: hidden !important;
}

.wiz-side {
	padding: 24px 16px;
	width: 100%;
	max-width: 280px;
	position: relative;
	z-index: 2;     /* keep above any stray absolutely-positioned elements */
}

.wiz-logo {
	display: block;
	margin-bottom: 36px;
	position: relative;   /* establish own stacking context */
}

/* The original CSS has `.process-form img { position: absolute; width: 150px;
   margin-top: 38px; }` which leaks into our new logo image. Override with
   higher specificity. */
.wiz-side .wiz-logo img,
.process-form .wiz-side .wiz-logo img {
	position: static !important;
	width: 110px !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
}

.wiz-summary {
	margin-bottom: 28px;
}

.wiz-step-counter {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--red);
	margin: 0 0 10px;
}

.wiz-progress-bar {
	height: 6px;
	background: rgba(0, 0, 0, 0.06);
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 8px;
}

.wiz-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--red) 0%, var(--clay) 100%);
	border-radius: 3px;
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.wiz-percent {
	font-size: 11.5px;
	color: var(--grey);
	margin: 0;
}

/* Step list */
.wiz-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
}

.wiz-step {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 8px 0;
	position: relative;
	min-height: 56px;
	transition: opacity 0.25s ease;
}

/* The connector line that runs through the dots */
.wiz-step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 38px;
	left: 14px;
	bottom: -8px;
	width: 2px;
	background: rgba(0, 0, 0, 0.07);
	z-index: 0;
}

.wiz-step.is-done::after,
.wiz-step.is-current::after {
	background: var(--peach);
}

.wiz-step.is-done + .wiz-step.is-done::after,
.wiz-step.is-done + .wiz-step.is-current::after {
	background: var(--red);
}

.wiz-step-dot {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid rgba(0, 0, 0, 0.12);
	color: var(--grey);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 13px;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.wiz-step-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	padding-top: 4px;
}

.wiz-step-text strong {
	font-size: 13px;
	font-weight: 600;
	color: var(--dark-grey);
	margin-bottom: 1px;
}

.wiz-step-text small {
	font-size: 11px;
	color: var(--grey);
	line-height: 1.4;
}

/* Future (default) — already styled above */

/* Done */
.wiz-step.is-done .wiz-step-dot {
	background: var(--red);
	border-color: var(--red);
	color: var(--peach);
	font-family: inherit;
	font-size: 11px;
}

.wiz-step.is-done .wiz-step-text strong {
	color: var(--rosewood);
}

/* Current */
.wiz-step.is-current .wiz-step-dot {
	background: #fff;
	border-color: var(--red);
	border-width: 2px;
	color: var(--red);
	box-shadow: 0 0 0 4px rgba(145, 9, 17, 0.12);
}

.wiz-step.is-current .wiz-step-text strong {
	color: var(--red);
}

/* Future (after current) — slightly dimmer */
.wiz-step:not(.is-done):not(.is-current) {
	opacity: 0.7;
}

/* ──────────────────────────────────────────────────────────
   GLOBAL FIELD-FEEDBACK (driven by form-enhancements.js)
   Mirrored here from auth.css so wizard pages get the styles
   too without having to load the auth-specific stylesheet.
   ────────────────────────────────────────────────────────── */
input.is-valid,
input.is-invalid,
textarea.is-valid,
textarea.is-invalid {
	background-image: none !important;
}

input.is-valid,
textarea.is-valid {
	border-color: #2a9d3f !important;
	box-shadow: 0 0 0 1px rgba(42, 157, 63, 0.12) inset !important;
}

input.is-invalid,
textarea.is-invalid {
	border-color: #d9534f !important;
	box-shadow: 0 0 0 1px rgba(217, 83, 79, 0.12) inset !important;
}

.field-feedback {
	display: block;
	font-size: 11.5px;
	margin-top: 5px;
	line-height: 1.4;
}

.field-feedback-ok  { color: #2a9d3f; }
.field-feedback-bad { color: #d9534f; }

.field-feedback-ok::before,
.field-feedback-bad::before {
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	margin-right: 4px;
}

.field-feedback-ok::before  { content: '\f00c'; }
.field-feedback-bad::before { content: '\f071'; }

.char-counter {
	display: block;
	text-align: right;
	font-size: 11px;
	color: var(--grey);
	margin-top: 4px;
	font-variant-numeric: tabular-nums;
}

.char-counter-near { color: #c79434; }
.char-counter-over { color: #d9534f; font-weight: 600; }

/* ──────────────────────────────────────────────────────────
   CUSTOM AUTOCOMPLETE DROPDOWN
   Injected by chained-location.js next to an area-input. Replaces
   the browser-native <datalist> which renders as a tall black panel
   on dark-mode systems and is mostly unstylable.
   ────────────────────────────────────────────────────────── */
.ac-panel {
	position: absolute;
	z-index: 30;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	max-height: 240px;
	overflow-y: auto;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 14px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
	padding: 6px;
	color: var(--dark-grey);

	/* Force light-mode UI even on dark-mode OSes. */
	color-scheme: light;
}

.ac-item {
	display: block;
	width: 100%;
	text-align: left;
	background: transparent;
	border: none;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 13.5px;
	color: var(--dark-grey);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	font-family: inherit;
}

.ac-item:hover,
.ac-item.is-active {
	background: var(--peach);
	color: var(--rosewood);
}

.ac-item:focus {
	outline: none;
	background: var(--peach);
}

/* ──────────────────────────────────────────────────────────
   EDUCATION FORM — card-per-entry layout
   Used by candidate/intern enrollment step "education".
   ────────────────────────────────────────────────────────── */
.edu-row {
	background: var(--light-grey);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 16px;
	padding: 20px 22px 22px;
	margin-bottom: 16px;
	position: relative;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.edu-row:hover {
	border-color: rgba(145, 9, 17, 0.12);
}

.edu-row-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.edu-row-title {
	font-family: 'Playfair Display', serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--red);
	margin: 0;
	letter-spacing: 0.01em;
}

.edu-row-num {
	color: var(--rosewood);
}

.edu-row-remove {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.06);
	color: var(--dark-grey);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
	font-size: 13px;
}

.edu-row-remove:hover:not(:disabled) {
	background: var(--red);
	color: var(--peach);
	transform: rotate(90deg);
}

.edu-row-remove:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.edu-row-hidden {
	display: none;
}

.edu-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--dark-grey);
	margin-bottom: 6px;
	letter-spacing: 0.01em;
}

/* "Add another qualification" button — dashed outline, full width */
.edu-add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 14px 16px;
	background: transparent;
	border: 2px dashed rgba(145, 9, 17, 0.3);
	border-radius: 16px;
	color: var(--red);
	font-weight: 500;
	font-size: 13.5px;
	letter-spacing: 0.02em;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
	margin-top: 4px;
}

.edu-add-btn:hover:not(:disabled) {
	border-color: var(--red);
	background: rgba(254, 215, 201, 0.4);
	color: var(--rosewood);
}

.edu-add-btn:disabled,
.edu-add-btn.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* On mobile, tighten padding */
@media (max-width: 576px) {
	.edu-row {
		padding: 16px 14px 18px;
	}
}

/* "Save & finish later" — secondary text-style button on wizards */
.wiz-save-exit {
	color: var(--grey);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: 13px;
	padding: 8px 12px;
	box-shadow: none !important;
}

.wiz-save-exit:hover {
	color: var(--red);
	text-decoration: underline;
}

.wiz-save-exit:focus {
	box-shadow: none !important;
}


/* ── Mobile: collapse rail into a compact bar above the form ── */
@media (max-width: 991.98px) {
	.wiz-side {
		max-width: 100%;
		padding: 16px 0 8px;
	}

	.wiz-summary {
		margin-bottom: 16px;
	}

	.wiz-steps {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 6px;
		scrollbar-width: thin;
	}

	.wiz-step {
		flex-direction: column;
		align-items: center;
		min-width: 110px;
		min-height: 0;
		gap: 6px;
		padding: 4px 6px;
		text-align: center;
	}

	.wiz-step:not(:last-child)::after {
		top: 16px;
		left: 50%;
		right: -50%;
		bottom: auto;
		width: auto;
		height: 2px;
		transform: translateX(50%);
	}

	.wiz-step-text small {
		display: none;     /* save vertical space on mobile */
	}

	.wiz-step-text strong {
		font-size: 11.5px;
	}
}

/* ════════════════════════════════════════════════════════════════
   MOBILE OFF-CANVAS DRAWER
   Replaces the old Bootstrap collapse. A right-side sheet that mirrors
   the desktop sub-nav IA as progressive-disclosure accordions. Its own
   solid white surface keeps it readable over ANY bar theme (incl. the
   v2 rosewood on-hero bar). Driven by navbar.js, which portals the
   scrim + panel to <body> so position:fixed is viewport-relative.
   ════════════════════════════════════════════════════════════════ */

/* Scrim — dims the page; fades in/out and toggles hit-testing. */
.hn-drawer-scrim {
	position: fixed;
	inset: 0;
	z-index: 1190;
	background: rgba(17, 10, 10, 0.44);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.hn-drawer-scrim.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.35s ease;
}

/* Panel — full-height sheet sliding from the right. */
.hn-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1200;
	width: min(92vw, 400px);
	display: flex;
	flex-direction: column;
	background: #ffffff;
	box-shadow: -24px 0 60px -30px rgba(17, 10, 10, 0.55);
	transform: translateX(100%);
	visibility: hidden;                     /* keep the closed panel out of the tab order + AT tree */
	transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.42s;
	will-change: transform;
}
.hn-drawer.is-open {
	transform: translateX(0);
	visibility: visible;
	transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header — logo + close */
.hn-drawer-head {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 17px 20px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.hn-drawer-head .hn-brand img { width: 96px; }
.hn-drawer-close {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: var(--light-grey);
	color: var(--dark-grey);
	font-size: 16px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.hn-drawer-close:hover { background: var(--peach); color: var(--red); }
.hn-drawer-close:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Body — scroll region */
.hn-drawer-body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 6px 14px 14px;
}

/* Accordion section */
.hn-drawer-sec { border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
.hn-drawer-sec-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 10px;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--dark-grey);
	transition: color 0.2s ease;
}
.hn-drawer-sec-btn:hover { color: var(--red); }
.hn-drawer-sec-btn:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; border-radius: 8px; }
.hn-drawer-chev {
	flex-shrink: 0;
	font-size: 12px;
	color: var(--grey);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
}
.hn-drawer-sec.is-open > .hn-drawer-sec-btn { color: var(--red); }
.hn-drawer-sec.is-open > .hn-drawer-sec-btn .hn-drawer-chev { transform: rotate(180deg); color: var(--red); }

/* Collapsible panel — animated via grid-template-rows 0fr → 1fr. */
.hn-drawer-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.hn-drawer-sec.is-open > .hn-drawer-panel { grid-template-rows: 1fr; }
.hn-drawer-panel-in {
	overflow: hidden;
	visibility: hidden;                     /* keeps collapsed links out of the tab order */
	padding: 0 0 8px;
	transition: visibility 0s linear 0.35s;
}
.hn-drawer-sec.is-open > .hn-drawer-panel .hn-drawer-panel-in {
	visibility: visible;
	transition: visibility 0s;
}

/* Sub-link (icon chip + title + description) — same model as the desktop sub-nav. */
.hn-drawer-link {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 9px 10px;
	margin-bottom: 2px;
	border-radius: 12px;
	text-decoration: none;
	transition: background 0.2s ease;
}
.hn-drawer-link:hover,
.hn-drawer-link:focus-visible { background: var(--light-grey); outline: none; }
.hn-drawer-ico {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: var(--peach);
	color: var(--red);
	font-size: 14px;
	transition: background 0.2s ease, color 0.2s ease;
}
.hn-drawer-link:hover .hn-drawer-ico { background: var(--red); color: var(--peach); }
.hn-drawer-txt {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.35;
}
.hn-drawer-txt strong { font-size: 13.5px; font-weight: 600; color: var(--dark-grey); }
.hn-drawer-txt small { font-size: 11.5px; color: #8a8a8a; }
.hn-drawer-link-slim { padding-top: 7px; padding-bottom: 7px; }

/* Direct (non-accordion) row, e.g. Contact */
.hn-drawer-direct {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--dark-grey);
	transition: color 0.2s ease;
}
.hn-drawer-direct:hover { color: var(--red); }
.hn-drawer-arrow { flex-shrink: 0; font-size: 12px; color: var(--grey); transition: transform 0.2s ease, color 0.2s ease; }
.hn-drawer-direct:hover .hn-drawer-arrow { transform: translateX(3px); color: var(--red); }

/* Join section — peach treatment mirroring the desktop "Get Started" panel. */
.hn-drawer-sec-join {
	margin-top: 14px;
	padding: 2px 8px 6px;
	border-bottom: none;
	border-radius: 16px;
	background: var(--peach);
}
.hn-drawer-sec-join > .hn-drawer-sec-btn,
.hn-drawer-sec-join.is-open > .hn-drawer-sec-btn { color: var(--rosewood); }
.hn-drawer-sec-join .hn-drawer-chev { color: var(--rosewood); }
.hn-drawer-sec-join .hn-drawer-link:hover,
.hn-drawer-sec-join .hn-drawer-link:focus-visible { background: rgba(255, 255, 255, 0.55); }
.hn-drawer-sec-join .hn-drawer-ico { background: var(--red); color: var(--peach); }
.hn-drawer-sec-join .hn-drawer-link:hover .hn-drawer-ico { background: var(--rosewood); }
.hn-drawer-sec-join .hn-drawer-txt strong { color: var(--rosewood); }
.hn-drawer-sec-join .hn-drawer-txt small { color: rgba(103, 6, 13, 0.62); }

/* Signed-in account block */
.hn-drawer-account { padding: 6px 0 4px; }
.hn-drawer-acct-id {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 10px 12px;
}
.hn-drawer-acct-id .hn-account-avatar { width: 42px; height: 42px; font-size: 15px; }
.hn-drawer-acct-meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.hn-drawer-acct-meta .name { font-size: 15px; font-weight: 600; color: var(--dark-grey); }
.hn-drawer-acct-meta .sub { font-size: 12px; color: var(--grey); }

/* Sticky footer — primary actions always reachable. */
.hn-drawer-foot {
	flex-shrink: 0;
	padding: 15px 18px calc(15px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid rgba(0, 0, 0, 0.07);
	background: #ffffff;
}
.hn-drawer-foot .btn { width: 100%; }
.hn-drawer-foot-row { display: flex; gap: 10px; }
.hn-drawer-foot-row .btn { flex: 1 1 0; }

/* Body scroll-lock while the drawer is open. */
body.hn-drawer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.hn-drawer,
	.hn-drawer-scrim,
	.hn-drawer-panel,
	.hn-drawer-chev,
	.hn-drawer-arrow { transition-duration: 0.01ms !important; }
}

/* ─── Responsive — desktop nav vs. mobile drawer ─── */
@media (min-width: 992px) {
	.hn-mobile-toggle { display: none !important; }
	.hn-drawer,
	.hn-drawer-scrim { display: none !important; }
}

@media (max-width: 991.98px) {
	.hn-nav-list,
	.hn-nav-actions,
	.hn-subnav {
		display: none !important;
	}

	.hn-mobile-toggle {
		display: block;
	}

	.hn-nav-bar {
		padding: 14px 24px;
	}

	.hn-brand img {
		width: 90px;
	}
}

/* --------------------------------
   HERO — Redesigned
   -------------------------------- */
.hero-section {
	min-height: calc(100vh - 88px);
	padding: 60px 54px;
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--peach);
	color: var(--red);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: 3rem;
	margin-bottom: 28px;
}

.hero-eyebrow .live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--red);
	display: inline-block;
	animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.3; transform: scale(0.7); }
}

.hero-section h1 {
	font-family: 'Playfair Display', serif;
	font-weight: 900;
	font-size: 3.5rem;
	line-height: 1.15;
	color: var(--black);
	margin-bottom: 24px;
}

.hero-subtitle {
	font-size: 15px;
	color: #555;
	max-width: 460px;
	margin-bottom: 40px;
	line-height: 1.75;
}

.hero-ctas {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.hero-ctas .or-divider {
	color: var(--grey);
	font-size: 13px;
}

/* Hero image + blob */
.hero-img-col {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 420px;
}

.hero-blob {
	position: absolute;
	width: 420px;
	height: 420px;
	background: var(--peach);
	border-radius: 62% 38% 55% 45% / 50% 62% 38% 50%;
	bottom: 0;
	right: 0;
	z-index: 0;
	animation: morph-blob 9s ease-in-out infinite;
}

@keyframes morph-blob {
	0%, 100% { border-radius: 62% 38% 55% 45% / 50% 62% 38% 50%; }
	33%       { border-radius: 42% 58% 44% 56% / 62% 40% 60% 38%; }
	66%       { border-radius: 54% 46% 62% 38% / 38% 55% 45% 62%; }
}

.hero-img-col img {
	position: relative;
	z-index: 1;
	width: 88%;
	max-width: 480px;
	animation: hero-float 5.5s ease-in-out infinite;
	filter: drop-shadow(0 20px 40px rgba(0,0,0,0.12));
}

@keyframes hero-float {
	0%, 100% { transform: translateY(0px); }
	50%       { transform: translateY(-18px); }
}

/* --------------------------------
   STATS BANNER — "HotelNet by the numbers"
   -------------------------------- */
.stats-bar {
	position: relative;
	overflow: hidden;
	padding: 72px 54px;
	background:
		radial-gradient(ellipse at 12% 0%, rgba(145, 9, 17, 0.40) 0%, transparent 42%),
		radial-gradient(ellipse at 90% 120%, rgba(254, 215, 201, 0.08) 0%, transparent 45%),
		linear-gradient(180deg, #14090a 0%, #0c0707 100%);
	border-top: 1px solid rgba(254, 215, 201, 0.08);
	border-bottom: 1px solid rgba(254, 215, 201, 0.08);
}

/* Faint grid texture, masked to fade at edges */
.stats-bar::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
	pointer-events: none;
}

.stats-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	pointer-events: none;
	z-index: 0;
}

.stats-glow-1 {
	width: 360px; height: 360px;
	left: -120px; top: -160px;
	background: radial-gradient(circle, rgba(145, 9, 17, 0.45) 0%, transparent 70%);
}

.stats-glow-2 {
	width: 260px; height: 260px;
	right: -80px; bottom: -140px;
	background: radial-gradient(circle, rgba(254, 215, 201, 0.12) 0%, transparent 70%);
}

.stats-bar > *:not(.stats-glow) { position: relative; z-index: 1; }

.stats-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 48px;
}

.stats-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--peach);
	margin-bottom: 16px;
}

.stats-eyebrow .live-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--peach);
	box-shadow: 0 0 0 3px rgba(254, 215, 201, 0.25);
	animation: liveDotPulse 2s ease-in-out infinite;
}

.stats-title {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	color: #fff;
	line-height: 1.2;
	margin: 0;
	letter-spacing: -0.01em;
}

.stats-bar .stats-inner {
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.stat-item {
	text-align: center;
	flex: 1;
	min-width: 150px;
	max-width: 280px;
	padding: 8px 20px;
}

.stat-ico {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: rgba(254, 215, 201, 0.08);
	border: 1px solid rgba(254, 215, 201, 0.15);
	color: var(--peach);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	margin-bottom: 18px;
}

.stat-number {
	font-family: 'Playfair Display', serif;
	font-weight: 900;
	font-size: 2.8rem;
	color: var(--peach);
	display: block;
	line-height: 1;
	margin-bottom: 10px;
}

.stat-label {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.5;
	max-width: 18ch;
	margin: 0 auto;
}

.stat-sep {
	width: 1px;
	align-self: center;
	height: 96px;
	background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.14), transparent);
	flex-shrink: 0;
}

.stats-foot {
	text-align: center;
	margin: 48px auto 0;
	max-width: 64ch;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.45);
	line-height: 1.6;
}

.stats-foot i { color: var(--peach); margin-right: 6px; }

/* --------------------------------
   FEATURES / WHAT WE DO
   -------------------------------- */
.features-section {
	padding: 108px 54px;
}

.features-section .section-intro {
	max-width: 520px;
}

.feature-card {
	background: var(--light-grey);
	border-radius: 24px;
	padding: 40px 32px;
	height: 100%;
	border: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
	overflow: hidden;
}

.feature-card::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s ease;
}

.feature-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 28px 48px rgba(145, 9, 17, 0.1);
}

.feature-card:hover::after {
	transform: scaleX(1);
}

.feature-icon {
	width: 56px;
	height: 56px;
	background: var(--peach);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
	font-size: 22px;
	color: var(--red);
	transition: background 0.3s ease;
}

.feature-card:hover .feature-icon {
	background: var(--red);
	color: var(--peach);
}

.feature-card h4 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 1.25rem;
	margin-bottom: 12px;
	color: var(--black);
}

.feature-card p {
	color: #666;
	font-size: 13.5px;
	line-height: 1.75;
	margin-bottom: 0;
}

/* --------------------------------
   HOW IT WORKS — Tabbed
   -------------------------------- */
.how-it-works {
	padding: 108px 54px;
	background: var(--peach);
}

.hiw-tab-wrapper {
	display: flex;
	justify-content: center;
	margin-bottom: 56px;
}

.hiw-tabs {
	background: rgba(145, 9, 17, 0.08);
	border-radius: 3rem;
	padding: 4px;
	gap: 4px;
	display: flex;
	border: none;
}

.hiw-tabs .nav-link {
	border-radius: 3rem !important;
	border: none !important;
	padding: 10px 28px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--red);
	transition: all 0.3s ease;
	white-space: nowrap;
}

.hiw-tabs .nav-link.active {
	background: var(--red) !important;
	color: var(--peach) !important;
	box-shadow: 0 4px 14px rgba(145, 9, 17, 0.3);
}

.hiw-steps-col {
	padding-right: 48px;
}

.hiw-step {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	margin-bottom: 36px;
	position: relative;
}

.step-num-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
}

.hiw-step-number {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--red);
	color: var(--peach);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Playfair Display', serif;
	font-weight: 900;
	font-size: 1.1rem;
	flex-shrink: 0;
}

.step-connector {
	width: 2px;
	flex: 1;
	background: rgba(145, 9, 17, 0.25);
	min-height: 28px;
	margin-top: 6px;
}

.hiw-step:last-child .step-connector {
	display: none;
}

.hiw-step-content {
	padding-top: 10px;
}

.hiw-step-content h5 {
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 4px;
	color: var(--black);
}

.hiw-step-content p {
	font-size: 13px;
	color: #555;
	line-height: 1.65;
	margin-bottom: 0;
}

.hiw-img-col {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hiw-img-col img {
	width: 88%;
	max-width: 380px;
	animation: hero-float 6s ease-in-out infinite;
	filter: drop-shadow(0 16px 32px rgba(0,0,0,0.1));
}

/* --------------------------------
   SUPPLIERS — Enhanced Secondary
   -------------------------------- */
#suppliers {
	padding: 108px 54px;
}

.supplier-features-list {
	list-style: none;
	padding: 0;
	margin: 28px 0 40px;
}

.supplier-features-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 18px;
	font-size: 14px;
	color: var(--dark-grey);
	line-height: 1.6;
}

.supplier-features-list li .check-icon {
	color: var(--red);
	font-size: 15px;
	margin-top: 2px;
	flex-shrink: 0;
}

/* --------------------------------
   INDUSTRY FACTS
   -------------------------------- */
.industry-section {
	background: var(--rosewood);
	padding: 108px 54px;
	position: relative;
	overflow: hidden;
}

.industry-section .deco-quote {
	position: absolute;
	font-family: 'Playfair Display', serif;
	font-size: 480px;
	color: rgba(255, 255, 255, 0.03);
	top: -120px;
	left: -30px;
	line-height: 1;
	pointer-events: none;
	user-select: none;
}

.industry-section .section-label {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--peach);
	font-weight: 700;
	margin-bottom: 16px;
}

.industry-section h2 {
	font-family: 'Playfair Display', serif;
	font-weight: 900;
	font-size: 2.4rem;
	color: white;
	line-height: 1.25;
	margin-bottom: 20px;
}

.industry-section .lead-text {
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	line-height: 1.8;
	max-width: 480px;
}

.industry-section .blockquote-text {
	color: rgba(255, 255, 255, 0.6);
	font-style: italic;
	font-size: 15px;
	line-height: 1.8;
	border-left: 3px solid var(--peach);
	padding-left: 20px;
}

.industry-section .blockquote-source {
	color: var(--peach);
	font-size: 12px;
	font-weight: 600;
	margin-top: 12px;
	padding-left: 20px;
}

.industry-fact-card {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 32px 24px;
	height: 100%;
	transition: background 0.3s ease, transform 0.3s ease;
}

.industry-fact-card:hover {
	background: rgba(255, 255, 255, 0.11);
	transform: translateY(-4px);
}

.fact-number {
	font-family: 'Playfair Display', serif;
	font-weight: 900;
	font-size: 2.6rem;
	color: var(--peach);
	line-height: 1;
	margin-bottom: 10px;
}

.fact-label {
	font-size: 13px;
	font-weight: 500;
	color: white;
	margin-bottom: 8px;
	line-height: 1.5;
}

.fact-source {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.45);
}

/* --------------------------------
   CTA SECTION
   -------------------------------- */
.cta-section {
	background: var(--red);
	padding: 108px 54px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.cta-section .cta-bubble-1 {
	position: absolute;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.03);
	top: -30%;
	right: -10%;
	pointer-events: none;
}

.cta-section .cta-bubble-2 {
	position: absolute;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.06);
	bottom: -30%;
	left: -5%;
	pointer-events: none;
}

.cta-section h2 {
	font-family: 'Playfair Display', serif;
	font-weight: 900;
	font-size: 2.8rem;
	color: var(--peach);
	margin-bottom: 16px;
	position: relative;
	z-index: 1;
}

.cta-section .cta-subtitle {
	color: rgba(254, 215, 201, 0.78);
	font-size: 15px;
	margin-bottom: 44px;
	position: relative;
	z-index: 1;
}

.cta-section .cta-btns {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}

/* --------------------------------
   FOOTER — Lively Dark Redesign
   -------------------------------- */
footer.site-footer {
	position: relative;
	background:
		radial-gradient(ellipse at 15% 0%, rgba(145, 9, 17, 0.25) 0%, transparent 35%),
		radial-gradient(ellipse at 85% 100%, rgba(254, 215, 201, 0.06) 0%, transparent 40%),
		linear-gradient(180deg, #0c0707 0%, #110a0a 100%);
	color: rgba(255, 255, 255, 0.7);
	padding: 0 54px 24px;
	overflow: hidden;
	border-top: 1px solid rgba(254, 215, 201, 0.08);
}

/* Decorative blobs */
.footer-glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(60px);
	z-index: 0;
}

.footer-glow-1 {
	width: 380px;
	height: 380px;
	left: -120px;
	top: -120px;
	background: radial-gradient(circle, rgba(145, 9, 17, 0.45) 0%, transparent 70%);
	animation: footerFloat 12s ease-in-out infinite;
}

.footer-glow-2 {
	width: 280px;
	height: 280px;
	right: -80px;
	bottom: 20%;
	background: radial-gradient(circle, rgba(254, 215, 201, 0.12) 0%, transparent 70%);
	animation: footerFloat 14s ease-in-out infinite reverse;
}

@keyframes footerFloat {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(20px, -16px) scale(1.05); }
}

footer.site-footer > *:not(.footer-glow) {
	position: relative;
	z-index: 1;
}

/* ── Top banner ─────────────────────────────── */
.footer-banner {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 40px;
	align-items: center;
	padding: 64px 0 56px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.footer-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--peach);
	margin-bottom: 18px;
}

.footer-eyebrow .live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--peach);
	box-shadow: 0 0 0 3px rgba(254, 215, 201, 0.25);
	animation: liveDotPulse 2s ease-in-out infinite;
}

.footer-headline {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: clamp(1.9rem, 3.2vw, 2.7rem);
	line-height: 1.15;
	color: #fff;
	margin: 0;
	letter-spacing: -0.01em;
	max-width: 22ch;
}

.footer-headline .accent {
	color: var(--peach);
	font-style: italic;
}

.footer-banner-right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	justify-self: end;
}

.footer-banner-cta {
	padding: 14px 32px;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
}

.footer-banner-link {
	color: rgba(255, 255, 255, 0.5);
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: all 0.25s ease;
}

.footer-banner-link:hover {
	color: var(--peach);
	gap: 10px;
}

/* ── Main columns ───────────────────────────── */
.footer-main {
	display: grid;
	grid-template-columns: 1.2fr 2.4fr;
	gap: 72px;
	padding: 60px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.footer-brand-col {
	display: flex;
	flex-direction: column;
}

footer.site-footer .footer-logo img {
	width: 130px;
	margin-bottom: 22px;
	filter: drop-shadow(0 4px 12px rgba(145, 9, 17, 0.3));
}

footer.site-footer .footer-tagline {
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.8;
	margin-bottom: 28px;
	padding-right: 16px;
	max-width: 38ch;
}

.footer-quick {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 28px;
}

.footer-quick-item {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: rgba(255, 255, 255, 0.65);
	font-size: 13px;
	text-decoration: none;
	transition: color 0.25s ease, transform 0.25s ease;
}

a.footer-quick-item:hover {
	color: var(--peach);
	transform: translateX(3px);
}

.footer-quick-item i {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: rgba(254, 215, 201, 0.08);
	color: var(--peach);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	flex-shrink: 0;
	transition: all 0.25s ease;
}

a.footer-quick-item:hover i {
	background: var(--red);
	color: var(--peach);
}

.footer-socials {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.footer-socials a {
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.footer-socials a::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--red), var(--rosewood));
	border-radius: 50%;
	transform: scale(0);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-socials a:hover {
	border-color: var(--red);
	color: var(--peach);
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(145, 9, 17, 0.35);
}

.footer-socials a:hover::before {
	transform: scale(1);
}

.footer-socials a i {
	position: relative;
	z-index: 1;
}

/* ── Link columns ────────────────────────────── */
.footer-links-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

footer.site-footer .footer-col-heading {
	font-size: 11px;
	font-weight: 700;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin-bottom: 22px;
	position: relative;
	padding-bottom: 12px;
}

footer.site-footer .footer-col-heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 20px;
	height: 2px;
	background: var(--red);
}

footer.site-footer ul {
	padding-left: 0;
	list-style: none;
	margin: 0;
}

footer.site-footer ul li {
	margin-bottom: 12px;
}

footer.site-footer ul li a {
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	position: relative;
}

footer.site-footer ul li a::before {
	content: "";
	width: 0;
	height: 1px;
	background: var(--peach);
	transition: width 0.25s ease;
	display: inline-block;
}

footer.site-footer ul li a:hover {
	color: var(--peach);
}

footer.site-footer ul li a:hover::before {
	width: 12px;
	margin-right: 4px;
}

.footer-tag {
	display: inline-block;
	background: rgba(254, 215, 201, 0.15);
	color: var(--peach);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 2px 8px;
	border-radius: 999px;
	text-transform: uppercase;
}

.footer-tag.hot {
	background: var(--red);
	color: #fff;
	animation: tagPulse 2.4s ease-in-out infinite;
}

@keyframes tagPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(145, 9, 17, 0.6); }
	50% { box-shadow: 0 0 0 6px rgba(145, 9, 17, 0); }
}

/* ── Trust strip ────────────────────────────── */
.footer-trust {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
	padding: 36px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.footer-trust-item {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 14px 18px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.05);
	transition: all 0.3s ease;
}

.footer-trust-item:hover {
	background: rgba(254, 215, 201, 0.04);
	border-color: rgba(254, 215, 201, 0.15);
	transform: translateY(-2px);
}

.footer-trust-item > i {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--red), var(--rosewood));
	color: var(--peach);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}

.footer-trust-item strong {
	display: block;
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	margin-bottom: 2px;
	letter-spacing: 0.01em;
}

.footer-trust-item small {
	display: block;
	color: rgba(255, 255, 255, 0.40);
	font-size: 10.5px;
	line-height: 1.3;
}

/* ── Bottom bar ────────────────────────────── */
.footer-bottom-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding-top: 24px;
	gap: 18px;
}

.footer-bottom-left {
	display: flex;
	align-items: center;
	gap: 22px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.35);
	flex-wrap: wrap;
}

.footer-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	color: rgba(40, 200, 100, 0.85);
}

.footer-status .status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #28c864;
	box-shadow: 0 0 0 3px rgba(40, 200, 100, 0.18);
	animation: statusPulse 2.4s ease-in-out infinite;
}

@keyframes statusPulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(40, 200, 100, 0.18); }
	50% { box-shadow: 0 0 0 7px rgba(40, 200, 100, 0.05); }
}

.footer-bottom-legal {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 12px;
	justify-self: center;
	flex-wrap: wrap;
	justify-content: center;
}

.footer-bottom-legal a {
	color: rgba(255, 255, 255, 0.4);
	transition: color 0.2s ease;
}

.footer-bottom-legal a:hover { color: var(--peach); }

.footer-bottom-legal .legal-sep {
	color: rgba(255, 255, 255, 0.18);
}

.footer-bottom-right {
	display: flex;
	align-items: center;
	gap: 18px;
	justify-self: end;
}

.made-with {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.45);
}

/* Mini Kenyan flag — stacked black/red/green/white bars */
.ke-flag {
	display: inline-flex;
	flex-direction: column;
	width: 20px;
	height: 14px;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.ke-flag span {
	display: block;
	flex: 1;
}

.ke-flag span:nth-child(1) { background: #000; }
.ke-flag span:nth-child(2) { background: #fff; flex: 0 0 1px; }
.ke-flag span:nth-child(3) { background: #ce1126; }
.ke-flag span:nth-child(4) { background: #006b3f; }

.back-to-top {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(254, 215, 201, 0.25);
	background: rgba(254, 215, 201, 0.06);
	color: var(--peach);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.back-to-top:hover {
	background: var(--red);
	border-color: var(--red);
	color: var(--peach);
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(145, 9, 17, 0.35);
}

/* ── Footer responsive ──────────────────────── */
@media (max-width: 992px) {
	footer.site-footer { padding: 0 32px 24px; }
	.footer-banner {
		grid-template-columns: 1fr;
		padding: 48px 0 44px;
		gap: 28px;
	}
	.footer-banner-right { justify-self: start; }
	.footer-main {
		grid-template-columns: 1fr;
		gap: 48px;
		padding: 48px 0;
	}
	.footer-links-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
	.footer-trust { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 28px 0; }
	.footer-bottom-bar { grid-template-columns: 1fr; }
	.footer-bottom-legal,
	.footer-bottom-right { justify-self: start; }
}

@media (max-width: 576px) {
	footer.site-footer { padding: 0 22px 22px; }
	.footer-headline { font-size: 1.6rem; }
	.footer-links-grid { grid-template-columns: 1fr; gap: 28px; }
	.footer-trust { grid-template-columns: 1fr; }
	.footer-bottom-left { gap: 12px; font-size: 11px; }
	.footer-banner-cta { padding: 12px 22px; }
}

/* --------------------------------
   SCROLL REVEAL
   -------------------------------- */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }

/* --------------------------------
   RESPONSIVE — Redesigned Sections
   -------------------------------- */
@media (max-width: 992px) {
	.hero-section h1 { font-size: 2.8rem; }
	.hiw-steps-col { padding-right: 0; margin-bottom: 40px; }
}

@media (max-width: 768px) {
	.hero-section {
		padding: 48px 24px 64px;
		min-height: unset;
	}
	.hero-section h1 { font-size: 2.1rem; }
	.hero-subtitle { max-width: 100%; }
	.hero-blob { width: 280px; height: 280px; }
	.hero-img-col { min-height: 280px; margin-top: 40px; }

	.stats-bar { padding: 56px 24px; }
	.stats-head { margin-bottom: 36px; }
	.stat-sep { display: none; }
	.stats-bar .stats-inner { gap: 28px 8px; }
	.stat-item { min-width: 44%; }
	.stat-number { font-size: 2.3rem; }
	.stats-foot { margin-top: 36px; }

	.features-section { padding: 72px 24px; }

	.how-it-works { padding: 72px 24px; }
	.hiw-tabs .nav-link { padding: 8px 18px; font-size: 12px; }

	#suppliers { padding: 72px 24px; }

	.industry-section { padding: 72px 24px; }
	.industry-section h2 { font-size: 1.9rem; }

	.cta-section { padding: 72px 24px; }
	.cta-section h2 { font-size: 2rem; }

	footer.site-footer { padding: 60px 24px 36px; }
}


/* ================================================================
   EDITORIAL PAGES — About / Contact / Workforce (Jonite-inspired)
   Large display type, ample whitespace, modular sections, brand
   accents in red & peach. Additive — does not touch existing rules.
   ================================================================ */

/* ── Reusable editorial hero (replaces the old <header>) ────────── */
.editorial-hero {
	position: relative;
	background: #faf6f3;
	padding: 110px 54px 90px;
	overflow: hidden;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.editorial-hero::before {
	content: "";
	position: absolute;
	right: -160px;
	top: -160px;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background: var(--peach);
	opacity: 0.55;
	z-index: 0;
}

.editorial-hero::after {
	content: "";
	position: absolute;
	left: -100px;
	bottom: -120px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: rgba(189, 102, 91, 0.18);
	z-index: 0;
}

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

.editorial-hero .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--red);
	margin-bottom: 22px;
}

.editorial-hero .eyebrow::before {
	content: "";
	width: 32px;
	height: 1.5px;
	background: var(--red);
	display: inline-block;
}

.editorial-hero h1 {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: clamp(2.4rem, 5vw, 4.2rem);
	color: var(--black);
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0 0 24px;
	max-width: 14ch;
}

.editorial-hero h1 .accent {
	color: var(--red);
	font-style: italic;
}

.editorial-hero .lede {
	font-size: 1.05rem;
	line-height: 1.75;
	color: #555;
	max-width: 58ch;
	margin: 0;
}

.editorial-hero .hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 36px;
	margin-top: 40px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding-top: 26px;
	max-width: 720px;
}

.editorial-hero .hero-meta-item {
	display: flex;
	flex-direction: column;
}

.editorial-hero .hero-meta-item .label {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--grey);
	margin-bottom: 4px;
}

.editorial-hero .hero-meta-item .value {
	font-family: 'Playfair Display', serif;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--black);
}

/* ── Section wrapper for editorial pages ───────────────────────── */
.editorial-section {
	padding: 110px 54px;
}

.editorial-section.tight { padding: 80px 54px; }

.editorial-section .section-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 16px;
}

.editorial-section .section-title {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: clamp(2rem, 3.5vw, 2.9rem);
	color: var(--black);
	line-height: 1.15;
	margin: 0 0 22px;
	max-width: 18ch;
}

.editorial-section .section-title .accent {
	color: var(--red);
	font-style: italic;
}

.editorial-section .section-body {
	color: #555;
	line-height: 1.85;
	font-size: 15px;
}

/* ── Two-column "Our Story" with image ──────────────────────────── */
.story-block .story-image {
	border-radius: 20px;
	overflow: hidden;
	height: 100%;
	min-height: 460px;
	background-size: cover;
	background-position: center;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
}

.story-block .story-quote {
	margin-top: 32px;
	padding-left: 22px;
	border-left: 3px solid var(--red);
	font-family: 'Playfair Display', serif;
	font-style: italic;
	color: var(--black);
	font-size: 1.15rem;
	line-height: 1.55;
}

.story-block .story-quote cite {
	display: block;
	margin-top: 12px;
	font-style: normal;
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--grey);
}

/* ── Mission / Vision two-card split ────────────────────────────── */
.mv-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 20px;
	padding: 44px 36px;
	height: 100%;
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.mv-card:hover {
	transform: translateY(-4px);
	border-color: rgba(145, 9, 17, 0.25);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
}

.mv-card .mv-icon {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: var(--peach);
	color: var(--red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin-bottom: 24px;
}

.mv-card h3 {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: 1.75rem;
	color: var(--black);
	margin-bottom: 14px;
}

.mv-card p {
	color: #555;
	line-height: 1.8;
	margin: 0;
}

/* ── Values grid ────────────────────────────────────────────────── */
.values-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.value-tile {
	padding: 38px 30px;
	border-right: 1px solid rgba(0, 0, 0, 0.08);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	background: #fff;
	transition: background 0.3s ease;
}

.value-tile:hover { background: #fff8f4; }

.value-tile .value-num {
	font-family: 'Playfair Display', serif;
	font-size: 14px;
	font-style: italic;
	color: var(--red);
	margin-bottom: 18px;
	letter-spacing: 0.1em;
}

.value-tile h5 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--black);
	margin-bottom: 12px;
}

.value-tile p {
	color: #666;
	font-size: 13.5px;
	line-height: 1.7;
	margin: 0;
}

/* ── Timeline / Milestones ──────────────────────────────────────── */
.timeline {
	position: relative;
	padding: 0 0 0 36px;
}

.timeline::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: linear-gradient(to bottom, var(--peach), var(--red), var(--rosewood));
}

.timeline-item {
	position: relative;
	padding: 0 0 38px 0;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
	content: "";
	position: absolute;
	left: -33px;
	top: 6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--red);
}

.timeline-item .year {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: 1.6rem;
	color: var(--red);
	margin-bottom: 6px;
	letter-spacing: -0.01em;
}

.timeline-item h5 {
	font-weight: 700;
	color: var(--black);
	font-size: 1.05rem;
	margin-bottom: 6px;
}

.timeline-item p {
	color: #666;
	line-height: 1.7;
	margin: 0;
	font-size: 14px;
}

/* ── Leadership / Team grid ─────────────────────────────────────── */
.leader-card {
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	height: 100%;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.leader-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.10);
}

.leader-card .leader-photo {
	height: 280px;
	background: linear-gradient(135deg, var(--peach) 0%, #ffd0bd 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.leader-card .leader-photo i {
	font-size: 90px;
	color: var(--red);
	opacity: 0.55;
}

.leader-card .leader-body {
	padding: 22px 24px 26px;
}

.leader-card h5 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 4px;
	font-size: 1.15rem;
}

.leader-card .leader-role {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 12px;
}

.leader-card .leader-bio {
	font-size: 13px;
	color: #666;
	line-height: 1.6;
	margin: 0;
}

/* ── Partner / Press strip ──────────────────────────────────────── */
.partners-strip {
	background: var(--black);
	color: rgba(255, 255, 255, 0.7);
	padding: 64px 54px;
}

.partners-strip .partners-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--peach);
	margin-bottom: 28px;
	text-align: center;
}

.partners-strip .partner-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 64px;
}

.partners-strip .partner-row span {
	font-family: 'Playfair Display', serif;
	font-size: 1.5rem;
	font-style: italic;
	color: rgba(255, 255, 255, 0.45);
	letter-spacing: -0.01em;
	transition: color 0.3s ease;
}

.partners-strip .partner-row span:hover {
	color: var(--peach);
}

/* ── Big editorial pull quote ───────────────────────────────────── */
.pull-quote {
	background: var(--peach);
	padding: 110px 54px;
	text-align: center;
}

.pull-quote blockquote {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-style: italic;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	line-height: 1.4;
	color: var(--rosewood);
	max-width: 24ch;
	margin: 0 auto 30px;
}

.pull-quote .pull-author {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--red);
}

/* ================================================================
   CONTACT PAGE
   ================================================================ */
.contact-split {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 0;
	background: #fff;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.contact-split .contact-side {
	background: linear-gradient(160deg, var(--rosewood) 0%, var(--red) 60%, #a8131c 100%);
	color: rgba(255, 255, 255, 0.85);
	padding: 60px 48px;
	position: relative;
	overflow: hidden;
}

.contact-split .contact-side::after {
	content: "";
	position: absolute;
	right: -120px;
	bottom: -120px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: rgba(254, 215, 201, 0.12);
}

.contact-split .contact-side > * {
	position: relative;
	z-index: 1;
}

.contact-split .contact-side h2 {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: 2rem;
	color: white;
	margin-bottom: 14px;
	line-height: 1.2;
}

.contact-split .contact-side .lede {
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 36px;
	line-height: 1.7;
}

.contact-channel {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 18px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.13);
}

/* Keep the channel text compact — sized to content, capped, and wrapping
   inside the panel rather than stretching the full width or overflowing. */
.contact-channel > div { min-width: 0; flex: 0 1 auto; max-width: 280px; }

.contact-channel:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.13); }

.contact-channel .ch-icon {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.12);
	color: var(--peach);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	flex-shrink: 0;
}

.contact-channel .ch-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--peach);
	margin-bottom: 4px;
}

.contact-channel .ch-value {
	color: white;
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
	overflow-wrap: anywhere;   /* long emails/numbers wrap, never overflow */
}

/* Global safety net: the Turnstile Cloudflare logo must never render at its
   intrinsic 800px size, even on a page that doesn't load auth.css. */
img.turnstile-cf-logo { height: 40px; width: auto; max-width: 48px; margin: 0; }

.contact-side .side-social {
	display: flex;
	gap: 10px;
	margin-top: 40px;
}

.contact-side .side-social a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	transition: all 0.25s ease;
}

.contact-side .side-social a:hover {
	background: var(--peach);
	color: var(--red);
	border-color: var(--peach);
	transform: translateY(-2px);
}

.contact-form-side {
	padding: 60px 54px;
	background: #fff;
}

.contact-form-side h3 {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: 1.65rem;
	color: var(--black);
	margin-bottom: 6px;
}

.contact-form-side .form-intro {
	color: #666;
	margin-bottom: 30px;
	font-size: 14px;
}

.contact-form-side .form-floating-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--grey);
	margin-bottom: 6px;
	display: block;
}

.contact-form-side .form-control {
	background: #f8f5f3;
	border-radius: 12px;
	padding: 14px 18px;
	border: 1px solid transparent;
	transition: all 0.25s ease;
}

.contact-form-side .form-control:focus {
	background: #fff;
	border-color: var(--red);
	box-shadow: 0 0 0 .2rem rgba(254, 215, 201, 0.5);
}

.contact-form-side .submit-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 14px;
	gap: 16px;
	flex-wrap: wrap;
}

.contact-form-side .submit-row .helper {
	font-size: 12px;
	color: #888;
}

/* Office cards */
.office-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 18px;
	padding: 32px 28px;
	height: 100%;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.office-card:hover {
	transform: translateY(-4px);
	border-color: rgba(145, 9, 17, 0.2);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.07);
}

.office-card .office-flag {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 10px;
}

.office-card h5 {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: 1.3rem;
	color: var(--black);
	margin-bottom: 14px;
}

.office-card p {
	color: #555;
	font-size: 13.5px;
	line-height: 1.7;
	margin: 0 0 6px;
}

.office-card .office-hours {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px dashed rgba(0, 0, 0, 0.1);
	font-size: 12px;
	color: var(--grey);
}

/* FAQ accordion */
.faq-list {
	max-width: 820px;
	margin: 0 auto;
}

.faq-item {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding: 26px 0;
}

.faq-item:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

.faq-item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	list-style: none;
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--black);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
	content: "+";
	color: var(--red);
	font-size: 1.6rem;
	font-weight: 300;
	transition: transform 0.3s ease;
	line-height: 1;
}

.faq-item[open] summary::after {
	content: "−";
}

.faq-item .faq-answer {
	margin-top: 14px;
	color: #555;
	line-height: 1.8;
	font-size: 14px;
}

/* Contact map placeholder */
.map-placeholder {
	margin-top: 64px;
	height: 360px;
	border-radius: 20px;
	overflow: hidden;
	position: relative;
	background:
		linear-gradient(135deg, #2b1f1f 0%, #110a0a 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.7);
}

.map-placeholder::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 30% 40%, rgba(254, 215, 201, 0.15) 0%, transparent 30%),
		radial-gradient(circle at 70% 65%, rgba(145, 9, 17, 0.35) 0%, transparent 30%),
		linear-gradient(90deg, transparent 0%, transparent 49%, rgba(255,255,255,0.04) 50%, transparent 51%, transparent 100%);
	background-size: 100% 100%, 100% 100%, 80px 80px;
}

.map-placeholder .map-pin {
	position: relative;
	z-index: 2;
	text-align: center;
}

.map-placeholder .map-pin i {
	font-size: 32px;
	color: var(--peach);
	margin-bottom: 10px;
	animation: mapPinPulse 2s ease-in-out infinite;
}

.map-placeholder .map-pin h5 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: white;
	margin-bottom: 4px;
}

.map-placeholder .map-pin p {
	font-size: 12px;
	margin: 0;
	color: rgba(255, 255, 255, 0.55);
}

@keyframes mapPinPulse {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

/* ── Reusable footprint map (homepage + contact) ────────────────── */
.footprint-section {
	padding: 110px 54px;
	background: #ffffff;
}

.map-placeholder-lg {
	margin-top: 24px;
	height: 520px;
	border-radius: 24px;
	padding: 32px;
	background:
		radial-gradient(ellipse at 30% 35%, rgba(254, 215, 201, 0.10) 0%, transparent 35%),
		radial-gradient(ellipse at 75% 70%, rgba(145, 9, 17, 0.30) 0%, transparent 38%),
		linear-gradient(135deg, #1a1010 0%, #0c0707 100%);
	position: relative;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
}

.map-placeholder-lg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse at center, black 50%, transparent 85%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 50%, transparent 85%);
}

.map-placeholder-lg::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 70%;
	height: 80%;
	background: radial-gradient(ellipse at center, rgba(254, 215, 201, 0.06) 0%, transparent 60%);
	pointer-events: none;
}

/* Pin marker on the abstract map */
.map-pin-marker {
	position: absolute;
	transform: translate(-50%, -50%);
	z-index: 2;
	cursor: pointer;
}

.map-pin-marker .pin-dot {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(254, 215, 201, 0.7);
	box-shadow: 0 0 0 4px rgba(254, 215, 201, 0.15),
		0 0 0 10px rgba(254, 215, 201, 0.06);
	position: relative;
	animation: pinPulse 2.6s ease-in-out infinite;
}

.map-pin-marker.is-primary .pin-dot {
	width: 14px;
	height: 14px;
	background: var(--red);
	box-shadow: 0 0 0 5px rgba(145, 9, 17, 0.35),
		0 0 0 12px rgba(145, 9, 17, 0.18);
	animation-duration: 2s;
}

.map-pin-marker .pin-label {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	transform: translateX(-50%);
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	padding: 6px 12px;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, 6px);
	transition: all 0.25s ease;
	pointer-events: none;
}

.map-pin-marker:hover .pin-label,
.map-pin-marker.is-primary .pin-label {
	opacity: 1;
	transform: translate(-50%, 0);
}

.map-pin-marker .pin-label strong {
	display: block;
	font-family: 'Playfair Display', serif;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
}

.map-pin-marker .pin-label small {
	display: block;
	font-size: 10.5px;
	color: rgba(254, 215, 201, 0.75);
	letter-spacing: 0.06em;
	margin-top: 2px;
}

@keyframes pinPulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(254, 215, 201, 0.15), 0 0 0 10px rgba(254, 215, 201, 0.06); }
	50% { box-shadow: 0 0 0 8px rgba(254, 215, 201, 0.22), 0 0 0 18px rgba(254, 215, 201, 0.10); }
}

/* Legend strip on the bottom of the map */
.map-legend {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 24px;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	padding: 14px 20px;
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	z-index: 3;
}

.map-legend .legend-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.7);
	letter-spacing: 0.04em;
}

.map-legend .legend-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(254, 215, 201, 0.7);
	box-shadow: 0 0 0 3px rgba(254, 215, 201, 0.18);
}

.map-legend .legend-dot-primary {
	background: var(--red);
	box-shadow: 0 0 0 3px rgba(145, 9, 17, 0.30);
}

.map-legend .legend-stat {
	margin-left: auto;
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.map-legend .legend-stat span {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: 1.6rem;
	color: var(--peach);
	line-height: 1;
}

.map-legend .legend-stat small {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 768px) {
	.footprint-section { padding: 72px 24px; }
	.map-placeholder-lg { height: 420px; padding: 18px; }
	.map-legend { gap: 14px; padding: 10px 14px; }
	.map-legend .legend-stat { margin-left: 0; }
	.map-pin-marker .pin-label { font-size: 11px; padding: 4px 8px; }
}

@media (max-width: 576px) {
	.map-placeholder-lg { height: 360px; }
	.map-pin-marker .pin-label strong { font-size: 12px; }
	.map-pin-marker .pin-label small { display: none; }
}

/* ================================================================
   WORKFORCE PAGE
   ================================================================ */
.workforce-strip {
	background: #fff;
	border-radius: 20px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	padding: 30px 32px;
	margin-top: -50px;
	margin-bottom: 48px;
	position: relative;
	z-index: 5;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.workforce-strip .wf-stat {
	text-align: center;
	padding: 8px 12px;
	border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.workforce-strip .wf-stat:last-child { border-right: none; }

.workforce-strip .wf-stat .wf-num {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: 2rem;
	color: var(--red);
	line-height: 1.1;
}

.workforce-strip .wf-stat .wf-lbl {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--grey);
	margin-top: 4px;
}

.workforce-filters {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 36px;
	align-items: center;
}

.workforce-filters .filter-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--grey);
	margin-right: 6px;
}

.workforce-filters .filter-chip {
	border: 1px solid rgba(0, 0, 0, 0.12);
	background: #fff;
	color: var(--dark-grey);
	padding: 8px 18px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.workforce-filters .filter-chip:hover {
	border-color: var(--red);
	color: var(--red);
}

.workforce-filters .filter-chip.is-active {
	background: var(--red);
	border-color: var(--red);
	color: var(--peach);
}

/* Refined member card */
.member-card-v2 {
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.05);
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.member-card-v2:hover {
	transform: translateY(-6px);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.10);
	border-color: rgba(145, 9, 17, 0.18);
}

.member-card-v2 .mc-photo {
	height: 220px;
	background: linear-gradient(135deg, var(--peach) 0%, #ffe7da 100%);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.member-card-v2 .mc-photo img {
	width: 130px;
	height: 130px;
	border-radius: 50%;
	border: 4px solid #fff;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
	object-fit: cover;
	background: #fff;
}

.member-card-v2 .mc-availability {
	position: absolute;
	top: 16px;
	right: 16px;
	background: rgba(255, 255, 255, 0.92);
	padding: 5px 12px 5px 10px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 600;
	color: #0a8a3a;
	display: flex;
	align-items: center;
	gap: 6px;
}

.member-card-v2 .mc-availability::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #0a8a3a;
	display: inline-block;
	box-shadow: 0 0 0 3px rgba(10, 138, 58, 0.18);
}

/* "Placed" / not-currently-available state */
.member-card-v2 .mc-availability-off { color: #8a6d0a; }
.member-card-v2 .mc-availability-off::before {
	background: #c79a17;
	box-shadow: 0 0 0 3px rgba(199, 154, 23, 0.18);
}

/* Verified-employment badge (top-left, mirrors availability pill) */
.member-card-v2 .mc-verified {
	position: absolute;
	top: 16px;
	left: 16px;
	background: var(--red);
	color: var(--peach);
	padding: 5px 11px 5px 9px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
	box-shadow: 0 6px 16px rgba(145, 9, 17, 0.28);
}

.member-card-v2 .mc-verified i { font-size: 11px; }

/* Candidate location line */
.member-card-v2 .mc-location {
	font-size: 12px;
	color: #777;
	margin: -6px 0 14px;
	display: flex;
	align-items: center;
	gap: 7px;
}

.member-card-v2 .mc-location i { color: var(--red); font-size: 11px; }

.member-card-v2 .mc-body {
	padding: 22px 24px 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.member-card-v2 .mc-body h4 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--black);
	margin-bottom: 4px;
}

.member-card-v2 .mc-role {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 14px;
}

.member-card-v2 .mc-bio {
	color: #666;
	font-size: 13px;
	line-height: 1.65;
	margin: 0 0 18px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.member-card-v2 .mc-cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--red);
	transition: gap 0.25s ease;
}

.member-card-v2 .mc-cta:hover { gap: 14px; }

.member-card-v2 .mc-cta i { font-size: 11px; }

/* Departments showcase */
.dept-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 40px;
}

.dept-tile {
	background: #fff;
	border-radius: 16px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	padding: 28px 26px;
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}

.dept-tile:hover {
	background: var(--red);
	border-color: var(--red);
	transform: translateY(-3px);
}

.dept-tile:hover .dept-icon { background: rgba(255, 255, 255, 0.15); color: var(--peach); }
.dept-tile:hover h5 { color: var(--peach); }
.dept-tile:hover .dept-count { color: rgba(254, 215, 201, 0.7); }
.dept-tile:hover .dept-arrow { color: var(--peach); transform: translateX(4px); }

.dept-tile .dept-icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--peach);
	color: var(--red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	margin-bottom: 18px;
	transition: all 0.3s ease;
}

.dept-tile h5 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: var(--black);
	font-size: 1.15rem;
	margin-bottom: 4px;
	transition: color 0.3s ease;
}

.dept-tile .dept-count {
	font-size: 12px;
	color: var(--grey);
	letter-spacing: 0.06em;
	transition: color 0.3s ease;
}

.dept-tile .dept-arrow {
	position: absolute;
	top: 26px;
	right: 26px;
	font-size: 14px;
	color: var(--grey);
	transition: all 0.3s ease;
}

.workforce-empty {
	text-align: center;
	padding: 80px 24px;
	border: 1px dashed rgba(0, 0, 0, 0.12);
	border-radius: 20px;
	background: #fafafa;
	color: var(--grey);
}

.workforce-empty i {
	font-size: 34px;
	color: var(--peach);
	margin-bottom: 14px;
}

.workforce-empty h4 {
	font-family: 'Playfair Display', serif;
	color: var(--black);
	margin-bottom: 6px;
}

/* ================================================================
   EDITORIAL — RESPONSIVE
   ================================================================ */
@media (max-width: 992px) {
	.editorial-hero { padding: 80px 28px 60px; }
	.editorial-section { padding: 72px 28px; }
	.values-grid { grid-template-columns: repeat(2, 1fr); }
	.contact-split { grid-template-columns: 1fr; }
	.contact-form-side, .contact-split .contact-side { padding: 44px 32px; }
	.workforce-strip { grid-template-columns: repeat(2, 1fr); gap: 18px; }
	.workforce-strip .wf-stat { border-right: none; }
	.dept-grid { grid-template-columns: repeat(2, 1fr); }
	.partners-strip .partner-row { gap: 32px; }
	.partners-strip .partner-row span { font-size: 1.2rem; }
}

@media (max-width: 576px) {
	.editorial-hero { padding: 64px 20px 48px; }
	.editorial-section { padding: 60px 20px; }
	.editorial-section.tight { padding: 48px 20px; }
	.values-grid { grid-template-columns: 1fr; }
	.dept-grid { grid-template-columns: 1fr; }
	.partners-strip { padding: 48px 24px; }
	.pull-quote { padding: 72px 24px; }
	.story-block .story-image { min-height: 280px; margin-bottom: 28px; }
	.contact-form-side, .contact-split .contact-side { padding: 36px 24px; }
	.workforce-strip { grid-template-columns: 1fr; margin-top: -30px; padding: 22px; }
	.workforce-filters { gap: 6px; }
}


/* ================================================================
   HOMEPAGE — Phase 2 additions
   Partner strip · Live roles · Verification · Comparison · Press ·
   Newsletter · Testimonials · Industry cite tweak · Hero breathing.
   ================================================================ */

/* Bleed line between hero and stats bar */
.hero-section { padding-bottom: 32px; }
.hero-section + .trust-strip { margin-top: 0; }

/* Industry cite — lighter, less competing */
.industry-section .industry-cite {
	border-left: 2px solid rgba(254, 215, 201, 0.45);
	padding: 4px 0 4px 22px;
}

.industry-section .cite-text {
	font-size: 0.95rem;
	line-height: 1.7;
	color: rgba(254, 215, 201, 0.85);
	margin: 0 0 10px;
	font-style: italic;
}

.industry-section .cite-source {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(254, 215, 201, 0.55);
	margin: 0;
}

/* --------------------------------
   TRUST STRIP (post-hero)
   -------------------------------- */
.trust-strip {
	background: #ffffff;
	border-top: 1px solid rgba(0, 0, 0, 0.04);
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
	padding: 36px 54px;
	text-align: center;
}

.trust-strip .trust-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--grey);
	margin-bottom: 18px;
}

.trust-strip .trust-logos {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 22px;
}

.trust-strip .trust-logos span:not(.dot) {
	font-family: 'Playfair Display', serif;
	font-size: 1.15rem;
	font-style: italic;
	font-weight: 600;
	color: #888;
	letter-spacing: -0.01em;
	transition: color 0.25s ease;
}

.trust-strip .trust-logos span:not(.dot):hover {
	color: var(--red);
}

.trust-strip .trust-logos .dot {
	color: rgba(0, 0, 0, 0.18);
	font-size: 1rem;
}

/* --------------------------------
   LIVE ROLES PREVIEW
   -------------------------------- */
.live-roles-section {
	padding: 110px 54px;
	background: #faf6f3;
}

.live-roles-section .section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.live-dot-inline {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--red);
	box-shadow: 0 0 0 3px rgba(145, 9, 17, 0.18);
	animation: liveDotPulse 2s ease-in-out infinite;
}

@keyframes liveDotPulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(145, 9, 17, 0.18); }
	50% { box-shadow: 0 0 0 6px rgba(145, 9, 17, 0.30); }
}

.role-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 18px;
	padding: 24px 24px 20px;
	height: 100%;
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.role-card:hover {
	transform: translateY(-4px);
	border-color: rgba(145, 9, 17, 0.18);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.08);
}

.role-card .role-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}

.role-card .role-dept {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--red);
}

.role-card .role-posted {
	font-size: 11px;
	color: var(--grey);
}

.role-card .role-title {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: var(--black);
	font-size: 1.35rem;
	margin: 0 0 14px;
}

.role-card .role-meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.10);
}

.role-card .role-meta span {
	font-size: 13px;
	color: #666;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.role-card .role-meta i {
	color: var(--red);
	width: 14px;
	font-size: 12px;
}

.role-card .role-footer {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.role-card .role-tag {
	font-size: 11px;
	font-weight: 600;
	color: var(--rosewood);
	background: var(--peach);
	padding: 4px 12px;
	border-radius: 999px;
}

.role-card .role-arrow {
	margin-left: auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--light-grey);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--dark-grey);
	font-size: 12px;
	transition: all 0.25s ease;
}

.role-card:hover .role-arrow {
	background: var(--red);
	color: var(--peach);
	transform: rotate(-45deg);
}

/* --------------------------------
   VERIFICATION FLOW
   -------------------------------- */
.verification-section {
	padding: 110px 54px;
	background: #ffffff;
}

.verify-flow {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr;
	align-items: stretch;
	gap: 24px;
	margin-top: 36px;
}

.verify-step {
	background: linear-gradient(180deg, #fff 0%, #faf6f3 100%);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 22px;
	padding: 34px 30px 28px;
	position: relative;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.verify-step:hover {
	transform: translateY(-4px);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
}

.verify-step .verify-num {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: 0.95rem;
	font-style: italic;
	color: var(--red);
	letter-spacing: 0.18em;
	margin-bottom: 18px;
}

.verify-step .verify-icon {
	width: 64px;
	height: 64px;
	border-radius: 18px;
	background: var(--peach);
	color: var(--red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	margin-bottom: 22px;
}

.verify-step h5 {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: 1.4rem;
	color: var(--black);
	margin-bottom: 12px;
}

.verify-step p {
	color: #666;
	font-size: 14px;
	line-height: 1.75;
	margin: 0 0 18px;
}

.verify-step .verify-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(145, 9, 17, 0.06);
	color: var(--red);
	font-size: 12px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 999px;
}

.verify-step .verify-check i {
	font-size: 10px;
	width: 16px;
	height: 16px;
	background: var(--red);
	color: var(--peach);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.verify-connector {
	align-self: center;
	width: 40px;
	height: 2px;
	background: repeating-linear-gradient(
		90deg,
		var(--red) 0,
		var(--red) 5px,
		transparent 5px,
		transparent 10px
	);
	position: relative;
}

.verify-connector::after {
	content: "";
	position: absolute;
	right: -6px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid var(--red);
}

.verify-footnote {
	margin-top: 36px;
	padding: 18px 24px;
	border-radius: 14px;
	background: var(--light-grey);
	color: #555;
	font-size: 13px;
	text-align: center;
}

.verify-footnote i {
	color: var(--red);
	margin-right: 8px;
}

/* --------------------------------
   COMPARISON BLOCK
   -------------------------------- */
.comparison-section {
	padding: 110px 54px;
	background: #faf6f3;
}

.comparison-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	margin-top: 16px;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.cmp-card {
	border-radius: 22px;
	padding: 44px 38px 36px;
	position: relative;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.cmp-card:hover { transform: translateY(-4px); }

.cmp-card .cmp-flag {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.cmp-card h3 {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: 1.55rem;
	line-height: 1.25;
	margin-bottom: 26px;
}

.cmp-card .cmp-list {
	list-style: none;
	padding: 0;
	margin: 0 0 26px;
}

.cmp-card .cmp-list li {
	display: flex;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	font-size: 14px;
	line-height: 1.55;
}

.cmp-card .cmp-list li:last-child { border-bottom: none; }

.cmp-card .cmp-list li i {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	margin-top: 2px;
}

.cmp-card .cmp-bottom {
	padding-top: 22px;
	border-top: 1px dashed rgba(0, 0, 0, 0.12);
	font-size: 13px;
	font-weight: 500;
}

.cmp-card .cmp-stat {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: 1.4rem;
	margin-right: 8px;
}

/* Old way — muted, somber */
.cmp-old {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.07);
	color: #555;
}

.cmp-old .cmp-flag { color: #888; }
.cmp-old h3 { color: #444; }
.cmp-old .cmp-list li { color: #666; }
.cmp-old .cmp-list li i { background: rgba(0, 0, 0, 0.06); color: #999; }
.cmp-old .cmp-stat { color: #444; }
.cmp-old .cmp-bottom { color: #888; }

/* New way — branded, confident */
.cmp-new {
	background: linear-gradient(165deg, var(--red) 0%, var(--rosewood) 100%);
	color: rgba(255, 255, 255, 0.92);
	box-shadow: 0 30px 70px rgba(145, 9, 17, 0.22);
	overflow: hidden;
}

.cmp-new::before {
	content: "";
	position: absolute;
	right: -100px;
	top: -100px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: rgba(254, 215, 201, 0.10);
	pointer-events: none;
}

.cmp-new .cmp-flag { color: var(--peach); }
.cmp-new h3 { color: #fff; position: relative; }
.cmp-new .cmp-list li { color: rgba(255, 255, 255, 0.85); border-bottom-color: rgba(255, 255, 255, 0.10); position: relative; }
.cmp-new .cmp-list li i { background: var(--peach); color: var(--red); }
.cmp-new .cmp-stat { color: var(--peach); position: relative; }
.cmp-new .cmp-bottom { color: rgba(254, 215, 201, 0.75); border-top-color: rgba(255, 255, 255, 0.15); position: relative; }

/* --------------------------------
   TESTIMONIALS
   -------------------------------- */
.testimonials-section {
	padding: 110px 54px;
	background: #ffffff;
}

.testimonial-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 20px;
	padding: 36px 32px 30px;
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.testimonial-card:hover {
	transform: translateY(-4px);
	border-color: rgba(145, 9, 17, 0.18);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.07);
}

.testimonial-card.featured {
	background: linear-gradient(165deg, var(--peach) 0%, #ffe4d5 100%);
	border-color: rgba(145, 9, 17, 0.10);
}

.testimonial-card .t-quote-mark {
	font-family: 'Playfair Display', serif;
	font-size: 5rem;
	line-height: 0.6;
	color: var(--red);
	opacity: 0.15;
	margin-bottom: -10px;
}

.testimonial-card.featured .t-quote-mark { opacity: 0.30; }

.testimonial-card .t-body {
	color: #444;
	line-height: 1.75;
	font-size: 14px;
	margin: 0 0 26px;
	flex: 1;
}

.testimonial-card.featured .t-body {
	color: var(--rosewood);
	font-weight: 500;
}

.testimonial-card .t-author {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 20px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.testimonial-card.featured .t-author { border-top-color: rgba(145, 9, 17, 0.12); }

.testimonial-card .t-avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	flex-shrink: 0;
}

.testimonial-card .t-author strong {
	display: block;
	font-family: 'Playfair Display', serif;
	color: var(--black);
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 2px;
}

.testimonial-card .t-author small {
	display: block;
	font-size: 11.5px;
	color: #888;
	letter-spacing: 0.02em;
}

.testimonial-card.featured .t-author strong { color: var(--rosewood); }
.testimonial-card.featured .t-author small { color: var(--red); opacity: 0.7; }

/* --------------------------------
   PRESS STRIP
   -------------------------------- */
.press-strip {
	background: #faf6f3;
	padding: 72px 54px;
	text-align: center;
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.press-strip .press-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 26px;
}

.press-strip .press-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 40px 56px;
	margin-bottom: 30px;
}

.press-strip .press-name {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 1.35rem;
	color: #555;
	letter-spacing: -0.01em;
	transition: color 0.3s ease, transform 0.3s ease;
	cursor: default;
}

.press-strip .press-name:hover {
	color: var(--red);
	transform: translateY(-2px);
}

.press-strip .press-bd { font-style: italic; }
.press-strip .press-std { font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 1.1rem; }
.press-strip .press-nation { font-family: 'Poppins', sans-serif; font-weight: 700; letter-spacing: -0.02em; }
.press-strip .press-cap { font-family: 'Poppins', sans-serif; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; font-size: 1rem; }
.press-strip .press-citizen { font-weight: 800; }
.press-strip .press-techin { font-style: italic; font-weight: 600; }

.press-strip .press-foot {
	max-width: 56ch;
	margin: 0 auto;
	font-family: 'Playfair Display', serif;
	font-size: 1.05rem;
	font-style: italic;
	color: #555;
	line-height: 1.55;
}

.press-strip .press-foot em {
	color: var(--red);
	font-style: normal;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-family: 'Poppins', sans-serif;
}

/* --------------------------------
   NEWSLETTER
   -------------------------------- */
.newsletter-section {
	padding: 80px 54px;
	background: #ffffff;
}

.newsletter-card {
	position: relative;
	border-radius: 28px;
	padding: 64px 56px;
	background:
		radial-gradient(circle at 80% 20%, rgba(254, 215, 201, 0.18) 0%, transparent 50%),
		linear-gradient(150deg, var(--black) 0%, #1c0d0d 100%);
	color: rgba(255, 255, 255, 0.85);
	overflow: hidden;
	box-shadow: 0 40px 80px rgba(0, 0, 0, 0.20);
}

.newsletter-card .nl-deco-1 {
	position: absolute;
	right: -120px;
	top: -120px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(254, 215, 201, 0.10) 0%, transparent 70%);
}

.newsletter-card .nl-deco-2 {
	position: absolute;
	left: -80px;
	bottom: -80px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(145, 9, 17, 0.30) 0%, transparent 70%);
}

.newsletter-card > .row {
	position: relative;
	z-index: 1;
}

.newsletter-card .nl-heading {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: clamp(1.6rem, 2.7vw, 2.3rem);
	line-height: 1.2;
	color: white;
	margin-bottom: 18px;
}

.newsletter-card .nl-heading .accent {
	color: var(--peach);
	font-style: italic;
}

.newsletter-card .nl-body {
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.75;
	margin: 0;
}

.newsletter-card .nl-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--peach);
	margin-bottom: 10px;
	display: block;
}

.newsletter-card .nl-input-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.newsletter-card .nl-input-row .form-control {
	flex: 1;
	min-width: 200px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: white;
	padding: 14px 18px;
	border-radius: 12px;
}

.newsletter-card .nl-input-row .form-control:focus {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--peach);
	box-shadow: 0 0 0 .2rem rgba(254, 215, 201, 0.25);
	color: white;
}

.newsletter-card .nl-input-row .form-control::placeholder {
	color: rgba(255, 255, 255, 0.40) !important;
}

.newsletter-card .nl-fineprint {
	margin-top: 14px;
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.45);
}

.newsletter-card .nl-fineprint i {
	color: var(--peach);
}

.newsletter-card .nl-success {
	display: none;
	margin-top: 14px;
	color: var(--peach);
	font-size: 13px;
}

.newsletter-card .nl-success.show {
	display: block;
}

/* --------------------------------
   PHASE 2 — RESPONSIVE
   -------------------------------- */
@media (max-width: 992px) {
	.verify-flow {
		grid-template-columns: 1fr;
	}
	.verify-connector {
		width: 2px;
		height: 32px;
		margin: 0 auto;
		background: repeating-linear-gradient(
			180deg,
			var(--red) 0,
			var(--red) 5px,
			transparent 5px,
			transparent 10px
		);
	}
	.verify-connector::after {
		right: 50%;
		top: 100%;
		transform: translateX(50%);
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 6px solid var(--red);
		border-bottom: none;
	}
	.comparison-grid {
		grid-template-columns: 1fr;
	}
	.newsletter-card { padding: 48px 36px; }
}

@media (max-width: 768px) {
	.trust-strip { padding: 28px 24px; }
	.trust-strip .trust-logos { gap: 14px; }
	.trust-strip .trust-logos span:not(.dot) { font-size: 1rem; }
	.live-roles-section,
	.verification-section,
	.comparison-section,
	.testimonials-section { padding: 72px 24px; }
	.press-strip { padding: 56px 24px; }
	.press-strip .press-row { gap: 22px 36px; }
	.press-strip .press-name { font-size: 1.1rem; }
	.newsletter-section { padding: 60px 24px; }
	.newsletter-card { padding: 40px 28px; }
}

@media (max-width: 576px) {
	.trust-strip .trust-logos .dot { display: none; }
	.cmp-card { padding: 32px 24px 28px; }
	.role-card { padding: 20px; }
	.role-card .role-title { font-size: 1.2rem; }
	.testimonial-card { padding: 28px 24px; }
	.verify-step { padding: 28px 24px; }
	.press-strip .press-row { gap: 16px 24px; }
	.press-strip .press-name { font-size: 1rem; }
	.newsletter-card { padding: 32px 22px; border-radius: 22px; }
	.newsletter-card .nl-input-row .form-control { min-width: 100%; }
	.newsletter-card .nl-input-row .btn { width: 100%; }
}


/* ================================================================
   PRICING PAGE
   ================================================================ */

/* Audience switcher (Hotels / Professionals / Suppliers) */
.pricing-aud-row {
	display: flex;
	justify-content: center;
}

.pricing-aud-toggle {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 999px;
	padding: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.pricing-aud-toggle .aud-opt {
	background: none;
	border: none;
	padding: 11px 24px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--dark-grey);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	transition: all 0.25s ease;
	white-space: nowrap;
}

.pricing-aud-toggle .aud-opt i { font-size: 13px; }
.pricing-aud-toggle .aud-opt:hover { color: var(--red); }

.pricing-aud-toggle .aud-opt.is-active {
	background: var(--red);
	color: var(--peach);
	box-shadow: 0 6px 18px rgba(145, 9, 17, 0.25);
}

/* Tier panels — one shown at a time */
.pricing-panel { display: none; }
.pricing-panel.is-visible { display: block; animation: panelFade 0.4s ease; }

@keyframes panelFade {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.pricing-panel-blurb {
	text-align: center;
	max-width: 60ch;
	margin: 0 auto 40px;
	color: #666;
	line-height: 1.8;
	font-size: 15px;
}

.pc-features li.pc-inherit {
	color: var(--rosewood);
	font-weight: 600;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
	padding-bottom: 12px;
	margin-bottom: 4px;
}

.pc-features li.pc-inherit i { background: transparent; color: var(--rosewood); }

.pc-featured .pc-features li.pc-inherit {
	color: var(--peach);
	border-bottom-color: rgba(255, 255, 255, 0.18);
}
.pc-featured .pc-features li.pc-inherit i { color: var(--peach); }

.pricing-foot-note {
	max-width: 70ch;
	margin: 48px auto 0;
	text-align: center;
	font-size: 12.5px;
	color: var(--grey);
	line-height: 1.7;
}

.pricing-foot-note i { color: var(--red); margin-right: 6px; }

.pricing-toggle-row {
	display: flex;
	justify-content: center;
}

.pricing-toggle {
	display: inline-flex;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 999px;
	padding: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.pricing-toggle .pt-opt {
	background: none;
	border: none;
	padding: 10px 26px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--dark-grey);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: all 0.25s ease;
	letter-spacing: 0.02em;
}

.pricing-toggle .pt-opt:hover { color: var(--red); }

.pricing-toggle .pt-opt.is-active {
	background: var(--red);
	color: var(--peach);
	box-shadow: 0 6px 18px rgba(145, 9, 17, 0.25);
}

.pricing-toggle .pt-save {
	display: inline-block;
	background: var(--peach);
	color: var(--red);
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pricing-toggle .pt-opt.is-active .pt-save {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

/* Pricing grid */
.pricing-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	align-items: stretch;
}

.pricing-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: 22px;
	padding: 36px 28px 32px;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.pricing-card:hover {
	transform: translateY(-4px);
	border-color: rgba(145, 9, 17, 0.18);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.07);
}

.pricing-card .pc-tag {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 12px;
}

.pricing-card .pc-name {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: 1.85rem;
	color: var(--black);
	margin-bottom: 12px;
	line-height: 1;
}

.pricing-card .pc-blurb {
	color: #666;
	font-size: 13.5px;
	line-height: 1.7;
	margin: 0 0 28px;
	min-height: 70px;
}

.pricing-card .pc-price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 6px;
	flex-wrap: wrap;
}

.pricing-card .pc-currency {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: 2.4rem;
	color: var(--red);
	letter-spacing: -0.01em;
}

.pricing-card .pc-currency-prefix {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--grey);
	letter-spacing: 0.04em;
}

.pricing-card .pc-amount {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: 2.4rem;
	color: var(--black);
	letter-spacing: -0.02em;
	line-height: 1;
}

.pricing-card .pc-unit {
	font-size: 12px;
	color: var(--grey);
	font-weight: 500;
}

.pricing-card .pc-per {
	color: #888;
	font-size: 12px;
	margin: 0 0 24px;
}

.pricing-card .pc-features {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	padding-top: 22px;
	flex: 1;
}

.pricing-card .pc-features li {
	display: flex;
	gap: 12px;
	font-size: 13px;
	color: #555;
	line-height: 1.55;
	padding: 7px 0;
	align-items: flex-start;
}

.pricing-card .pc-features li i {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--peach);
	color: var(--red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	margin-top: 3px;
}

.pricing-card .pc-cta {
	width: 100%;
	margin-bottom: 12px;
	padding: 14px 24px;
}

.pricing-card .pc-fineprint {
	font-size: 11.5px;
	color: var(--grey);
	margin: 0;
	text-align: center;
}

/* Featured / popular variant */
.pricing-card.pc-featured {
	background: linear-gradient(165deg, var(--red) 0%, var(--rosewood) 100%);
	color: rgba(255, 255, 255, 0.9);
	border: none;
	box-shadow: 0 30px 60px rgba(145, 9, 17, 0.30);
	transform: translateY(-12px);
	overflow: hidden;
}

.pricing-card.pc-featured:hover {
	transform: translateY(-18px);
	box-shadow: 0 40px 80px rgba(145, 9, 17, 0.40);
}

.pricing-card.pc-featured::before {
	content: "";
	position: absolute;
	right: -100px;
	top: -100px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(254, 215, 201, 0.12) 0%, transparent 70%);
	pointer-events: none;
}

.pricing-card.pc-featured > * { position: relative; z-index: 1; }

.pricing-card.pc-featured .pc-ribbon {
	position: absolute;
	top: 20px;
	right: 20px;
	background: var(--peach);
	color: var(--red);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
	z-index: 2;
	animation: tagPulse 2.4s ease-in-out infinite;
}

.pricing-card.pc-featured .pc-tag { color: var(--peach); }
.pricing-card.pc-featured .pc-name { color: #fff; }
.pricing-card.pc-featured .pc-blurb { color: rgba(255, 255, 255, 0.78); }
.pricing-card.pc-featured .pc-currency-prefix { color: rgba(254, 215, 201, 0.7); }
.pricing-card.pc-featured .pc-amount { color: #fff; }
.pricing-card.pc-featured .pc-unit { color: rgba(254, 215, 201, 0.7); }
.pricing-card.pc-featured .pc-per { color: rgba(254, 215, 201, 0.8); }
.pricing-card.pc-featured .pc-features { border-top-color: rgba(255, 255, 255, 0.15); }
.pricing-card.pc-featured .pc-features li { color: rgba(255, 255, 255, 0.85); }
.pricing-card.pc-featured .pc-features li i { background: var(--peach); color: var(--red); }
.pricing-card.pc-featured .pc-fineprint { color: rgba(254, 215, 201, 0.6); }

.pricing-card.pc-featured .pc-cta {
	background: var(--peach);
	color: var(--red);
	border-color: var(--peach) !important;
}

.pricing-card.pc-featured .pc-cta:hover {
	background: #fff;
	border-color: #fff !important;
}

/* Enterprise band */
.enterprise-band {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 40px;
	align-items: center;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: 24px;
	padding: 48px 44px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.04);
}

.enterprise-band .enterprise-right {
	justify-self: end;
	text-align: right;
}

.enterprise-band .enterprise-meta {
	margin-top: 12px;
	font-size: 12.5px;
	color: var(--grey);
}

.enterprise-bullets {
	list-style: none;
	padding: 0;
	margin: 22px 0 0;
}

.enterprise-bullets li {
	display: flex;
	gap: 10px;
	padding: 6px 0;
	font-size: 13.5px;
	color: #555;
}

.enterprise-bullets li i {
	color: var(--red);
	margin-top: 3px;
	flex-shrink: 0;
}

/* Pricing table */
.pricing-table-wrap {
	overflow-x: auto;
	border-radius: 18px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	background: #fff;
}

.pricing-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 720px;
}

.pricing-table thead th {
	padding: 20px 18px;
	text-align: left;
	font-size: 12px;
	letter-spacing: 0.06em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	background: #faf6f3;
	vertical-align: top;
}

.pricing-table thead th span {
	display: block;
	font-family: 'Playfair Display', serif;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 2px;
}

.pricing-table thead th small {
	display: block;
	font-size: 11.5px;
	color: var(--grey);
	font-weight: 500;
}

.pricing-table thead th.pt-highlight,
.pricing-table tbody td.pt-highlight {
	background: rgba(145, 9, 17, 0.04);
	color: var(--rosewood);
}

.pricing-table thead th.pt-highlight span { color: var(--red); }

.pricing-table tbody td {
	padding: 14px 18px;
	font-size: 13px;
	color: #555;
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.pricing-table tbody td:first-child {
	color: var(--dark-grey);
	font-weight: 500;
}

.pricing-table tbody td i.fa-check {
	color: var(--red);
	font-size: 12px;
}

.pricing-table tbody tr.pt-group td {
	background: #faf6f3;
	color: var(--red);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 14px 18px;
}

/* ================================================================
   SUPPLIERS PAGE
   ================================================================ */
.supplier-flow {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin-top: 24px;
}

.sup-step {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 20px;
	padding: 32px 26px;
	position: relative;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.sup-step:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.08);
}

.sup-step .sup-num {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: 0.95rem;
	font-style: italic;
	color: var(--red);
	letter-spacing: 0.18em;
	margin-bottom: 16px;
}

.sup-step .sup-icon {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: var(--peach);
	color: var(--red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	margin-bottom: 20px;
}

.sup-step h5 {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: 1.2rem;
	color: var(--black);
	margin-bottom: 10px;
}

.sup-step p {
	color: #666;
	font-size: 13.5px;
	line-height: 1.7;
	margin: 0;
}

/* Supplier card */
.supplier-card {
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.05);
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.supplier-card:hover {
	transform: translateY(-5px);
	border-color: rgba(145, 9, 17, 0.18);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
}

.supplier-card .sc-head {
	height: 140px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.supplier-card .sc-mark {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: var(--red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.supplier-card .sc-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	background: rgba(0, 0, 0, 0.55);
	color: var(--peach);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	backdrop-filter: blur(8px);
}

.supplier-card .sc-badge i { font-size: 9px; }

.supplier-card .sc-body {
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.supplier-card .sc-body h5 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--black);
	margin-bottom: 4px;
}

.supplier-card .sc-cat {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 14px;
}

.supplier-card .sc-bio {
	color: #666;
	font-size: 13px;
	line-height: 1.6;
	margin: 0 0 16px;
}

.supplier-card .sc-meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 14px;
	border-top: 1px dashed rgba(0, 0, 0, 0.1);
	margin-bottom: 16px;
}

.supplier-card .sc-meta span {
	font-size: 12px;
	color: #666;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.supplier-card .sc-meta i {
	color: var(--red);
	width: 14px;
	font-size: 11px;
}

/* Supplier "show all categories" */
.supplier-all-cats {
	margin-top: 36px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 14px;
	padding: 14px 20px;
}

.supplier-all-cats summary {
	cursor: pointer;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--red);
	list-style: none;
}

.supplier-all-cats summary::-webkit-details-marker { display: none; }
.supplier-all-cats summary::after {
	content: " ↓";
	color: var(--red);
}

.supplier-all-cats[open] summary::after { content: " ↑"; }

.supplier-cat-list {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.supplier-cat-pill {
	background: var(--light-grey);
	color: var(--dark-grey);
	font-size: 12px;
	padding: 6px 14px;
	border-radius: 999px;
	transition: all 0.2s ease;
}

.supplier-cat-pill:hover {
	background: var(--red);
	color: var(--peach);
}

/* ================================================================
   PRICING / SUPPLIERS — RESPONSIVE
   ================================================================ */
@media (max-width: 1200px) {
	.pricing-grid { grid-template-columns: repeat(2, 1fr); }
	.pricing-card.pc-featured { transform: none; }
	.pricing-card.pc-featured:hover { transform: translateY(-6px); }
}

@media (max-width: 992px) {
	.enterprise-band { grid-template-columns: 1fr; padding: 36px 28px; }
	.enterprise-band .enterprise-right { justify-self: start; text-align: left; }
	.supplier-flow { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
	.pricing-grid { grid-template-columns: 1fr; gap: 18px; }
	.supplier-flow { grid-template-columns: 1fr; }
	.pricing-card.pc-featured .pc-ribbon { top: 16px; right: 16px; }
}


/* ================================================================
   SECTION RHYTHM NORMALIZATION  (load-order: must stay last)
   Every major marketing section shares one vertical-padding token so
   the page reads as a single consistent rhythm. Horizontal padding is
   left to each section's own rule. The token is redefined per
   breakpoint in base.css, so this scales the whole site at once.
   ================================================================ */
.features-section,
.how-it-works,
#suppliers,
.industry-section,
.cta-section,
.live-roles-section,
.verification-section,
.comparison-section,
.testimonials-section,
.footprint-section,
.newsletter-section,
.editorial-section {
	padding-top: var(--hn-section-py);
	padding-bottom: var(--hn-section-py);
}

/* "Tight" editorial sections (sub-bands within a page) sit a notch closer. */
.editorial-section.tight {
	padding-top: var(--hn-section-py-tight);
	padding-bottom: var(--hn-section-py-tight);
}

/* Slim full-width bands share their own (smaller) consistent rhythm. */
.trust-strip,
.press-strip {
	padding-top: var(--hn-band-py);
	padding-bottom: var(--hn-band-py);
}

/* Collapse the doubled gap between two adjacent same-background (white)
   sections: drop the SECOND section's top padding so only one section's
   padding separates them. */
.verification-section + #suppliers,           /* homepage: verification → suppliers */
.editorial-section + .footprint-section {      /* contact/suppliers: form → footprint map */
	padding-top: 0;
}

/* ──────────────────────────────────────────────────────────────
   Revamped enrolment form (right pane of the wizard). Modern card
   with sectioned fieldsets, a 2-col field grid, and searchable
   "pick" grids for counties / products. Uses the brand CSS vars
   (--red/--clay/--peach/--grey/--dark-grey/--rosewood).
   ────────────────────────────────────────────────────────────── */
.wiz-main { width: 100%; padding: 24px 0 32px; }
.wiz-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 16px;
	box-shadow: 0 6px 30px rgba(20, 28, 50, 0.06);
	padding: 30px 32px;
	/* The card grows with its content and the page scrolls naturally (matching
	   the other enrollment forms). Long pick-lists get their own inner scroll
	   via .wiz-pick-scroll, so the whole form is never clipped at a fixed height. */
}
.wiz-card-head h2 {
	font-family: 'Playfair Display', serif;
	font-weight: 900;
	font-size: 26px; color: #161616; margin: 0 0 6px;
}
.wiz-card-head p { color: var(--grey); font-size: 14px; margin: 0 0 22px; line-height: 1.5; }

.wiz-fieldset { border: 0; padding: 0; margin: 0 0 24px; }
.wiz-legend {
	font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--red); display: flex; align-items: center; gap: 8px;
	margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.wiz-legend .opt { color: var(--grey); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 11.5px; }

.wiz-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 18px; }
.wiz-grid .wiz-full { grid-column: 1 / -1; }
.wiz-field { display: flex; flex-direction: column; gap: 6px; }
.wiz-field > label { font-size: 13px; font-weight: 600; color: var(--dark-grey); }
/* Required-field marker — global. The .wiz-field-scoped rule below styles the
   supplier v2 forms; this bare .req covers the candidate/intern/employer step
   forms, which use the .card layout rather than .wiz-field. */
.req { color: var(--red); margin-left: 2px; font-weight: 700; }
.req-note { font-size: 12px; color: var(--grey); margin: 2px 0 16px; }
.wiz-field .req { color: var(--red); margin-left: 2px; }
.wiz-field input, .wiz-field select, .wiz-field textarea {
	border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.14);
	padding: 10px 12px; font-size: 14px; width: 100%; background: #fff; color: var(--dark-grey);
}
/* Radios & checkboxes must NOT pick up the text-input styling above — width:100%
   + border-radius + padding stretches them into ovals (the reported bug). Render
   them as native controls with the brand accent instead. */
.wiz-field input[type="radio"], .wiz-field input[type="checkbox"] {
	-webkit-appearance: auto; appearance: auto;
	width: 16px; height: 16px; min-width: 16px; flex: 0 0 auto;
	padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
	accent-color: var(--red);
}
.wiz-field textarea { resize: vertical; min-height: 76px; }
.wiz-field input:focus, .wiz-field select:focus, .wiz-field textarea:focus {
	outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(145, 9, 17, 0.12);
}
.wiz-field input.is-invalid, .wiz-field select.is-invalid { border-color: #c0261c; }
/* Dropdown chevron. Bootstrap sets `appearance:none` on .form-select (hiding
   the native arrow) and draws its own chevron via background-image — but the
   shared rule above uses the `background` shorthand, which wipes that image and
   resets background-repeat to its initial `repeat`. So the revamped select had
   NO affordance at all. Restore a single, non-tiling chevron. */
.wiz-field select {
	--wiz-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
	-webkit-appearance: none;
	appearance: none;
	background-image: var(--wiz-chevron);
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 13px;
	padding-right: 36px;
}
/* The live-validator (form-enhancements.js) also stamps .is-valid / .is-invalid
   on selects; Bootstrap then layers a check / ✗ icon on top — and with
   background-repeat reset to `repeat` above, that icon TILES across the whole
   control (the reported bug). Force just our single chevron in those states;
   the coloured border carries the validity cue, matching the text inputs. */
.wiz-field select.is-valid,
.wiz-field select.is-invalid {
	background-image: var(--wiz-chevron) !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 13px !important;
	padding-right: 36px !important;
}
.wiz-field select.is-valid { border-color: #2a9d3f; }
.wiz-help { font-size: 11.5px; color: var(--grey); }
.wiz-err { font-size: 11.5px; color: #c0261c; }
.wiz-check { flex-direction: row; align-items: center; gap: 10px; }
.wiz-check input { width: 18px; height: 18px; accent-color: var(--red); }
.wiz-check label { font-size: 13px; color: var(--dark-grey); margin: 0; }

.wiz-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.wiz-btn { border: 0; border-radius: 10px; padding: 12px 24px; font-size: 14px; font-weight: 600; cursor: pointer; }
.wiz-btn-primary { background: var(--red); color: #fff; }
.wiz-btn-primary:hover { background: var(--rosewood); }
.wiz-btn-ghost { background: #fff; border: 1px solid rgba(0, 0, 0, 0.16); color: var(--dark-grey); }
.wiz-btn-link { background: none; border: 0; color: var(--grey); text-decoration: underline; cursor: pointer; font-size: 13px; margin-left: auto; }

/* Searchable pick grid (counties / products). The toolbar sits ABOVE the list;
   only .wiz-pick-scroll scrolls, so the search box never overlaps the options. */
.wiz-pick-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; background: #fff; padding: 4px 0; }
.wiz-search { flex: 1; min-width: 200px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.14); padding: 10px 14px; font-size: 14px; }
.wiz-search:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(145, 9, 17, 0.12); }
.wiz-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 8px; }
/* The list is the ONLY scroll container — the card grows naturally, so the
   search toolbar above stays put while just the options scroll. */
.wiz-pick-scroll { padding: 4px 4px 4px 2px; max-height: 360px; overflow-y: auto; }
.wiz-pick {
	display: flex; align-items: center; gap: 9px; border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px; padding: 9px 12px; cursor: pointer; font-size: 13px;
	background: #fff; transition: border-color 0.15s ease, background 0.15s ease;
}
.wiz-pick:hover { border-color: var(--peach); }
.wiz-pick input { width: 16px; height: 16px; accent-color: var(--red); flex-shrink: 0; }
.wiz-pick input:checked ~ span { font-weight: 600; color: var(--rosewood); }
.wiz-pick.is-hidden, .wiz-catblock.is-hidden, .wiz-pick-empty.is-hidden { display: none; }
.wiz-cat { font-size: 12px; font-weight: 700; color: var(--dark-grey); margin: 18px 0 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.wiz-cat:first-child { margin-top: 0; }
.wiz-pick-count { font-size: 12px; color: var(--grey); }
.wiz-pick-empty { font-size: 13px; color: var(--grey); padding: 14px 2px; }

@media (max-width: 640px) {
	.wiz-grid { grid-template-columns: 1fr; }
	.wiz-card { padding: 20px 18px; }
	.wiz-card-head h2 { font-size: 21px; }
}