/**
 * Blue Arc: shared components (C2–C15 of the design-system audit).
 *
 * Every block documents the markup it expects. Page-specific layout
 * (grids, section spacing, copy) lives in assets/css/pages/{key}.css.
 *
 * @package BlueArcChild
 */

/* ==========================================================================
   C2. Separator ornament
   <div class="ba-sep [ba-sep--light]" aria-hidden="true">
     <span class="ba-sep__square">
       <span class="ba-sep__line ba-sep__line--left"></span>
       <span class="ba-sep__line ba-sep__line--right"></span>
     </span>
   </div>
   Inherits text-align: centred heads show both lines; left-aligned heads
   clip the left line (live .wt-separator-outer overflow).
   ========================================================================== */

.ba-sep {
	display: block;
	height: 20px;
	overflow: hidden;
	line-height: 20px;
}

.ba-sep__square {
	position: relative;
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-top: 5px;
	border: 3px solid var(--ba-ornament);
	vertical-align: top;
}

.ba-sep--light .ba-sep__square {
	border-color: var(--ba-white);
}

.ba-sep__line {
	position: absolute;
	top: 50%;
	width: 70px;
	height: 3px;
	margin-top: -1px;
	background-color: var(--ba-primary);
}

.ba-sep__line--left {
	left: -80px;
}

.ba-sep__line--right {
	right: -80px;
}

/* ==========================================================================
   C3/C4/C5. Section head
   <div class="ba-sec-head ba-sec-head--{legacy|project|modern} [--left] [--dark] [--on-photo]">
     [eyebrow]
     <h2 class="ba-sec-head__title">Featured <span class="ba-sec-head__accent">Developments</span></h2>
     [separator]
     <div class="ba-sec-head__subhead">…</div>   (project)
     <p class="ba-sec-head__subtitle">…</p>      (modern)
     <p class="ba-sec-head__text">…</p>          (legacy / team intro)
   </div>
   ========================================================================== */

.ba-sec-head {
	margin-bottom: var(--ba-head-mb);
	text-align: center;
}

.ba-sec-head--left {
	text-align: left;
}

.ba-sec-head__title {
	margin-top: 0;
	text-transform: uppercase;
}

.ba-sec-head__accent {
	color: var(--ba-primary);
}

.ba-sec-head__text {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 10px;
	color: var(--ba-text);
	font-size: 14px;
	line-height: 24px;
}

.ba-sec-head--left .ba-sec-head__text {
	margin-left: 0;
}

/* C5 legacy inner-page head (h2 24/24, #1a1a1a, mb 24; head mb 50). */
.ba-sec-head--legacy .ba-sec-head__title {
	color: var(--ba-text-strong);
	font-size: var(--ba-fs-h2);
	line-height: var(--ba-lh-h2);
}

/* C3 project-section head (38px/1.2 Roboto 700). */
.ba-sec-head--project {
	margin-bottom: var(--ba-head-mb-home);
}

.ba-sec-head--project .ba-sec-head__title {
	margin-bottom: 0;
	color: var(--ba-slate-900);
	font-size: var(--ba-fs-sec-title-proj);
	font-weight: var(--ba-fw-bold);
	line-height: 1.2;
}

.ba-sec-head__subhead {
	max-width: 720px;
	margin: 0 auto;
	color: var(--ba-slate-600);
	font-size: var(--ba-fs-subhead);
	line-height: 1.42857;
}

/* C4 modern head (42px/1.2 Roboto 900, eyebrow, optional two-tone). */
.ba-sec-head--modern {
	margin-bottom: var(--ba-head-mb-home);
}

.ba-sec-head--modern .ba-sec-head__title {
	margin-bottom: 0;
	color: var(--ba-slate-900);
	font-size: var(--ba-fs-sec-title);
	font-weight: var(--ba-fw-heavy);
	line-height: 1.2;
}

.ba-sec-head__subtitle {
	max-width: 700px;
	margin: 20px auto 0;
	padding-top: 10px;
	color: var(--ba-slate-600);
	font-size: var(--ba-fs-subtitle);
	line-height: 1.6;
}

.ba-sec-head--dark .ba-sec-head__title,
.ba-sec-head--on-photo .ba-sec-head__title,
.ba-sec-head--on-photo .ba-sec-head__text {
	color: var(--ba-white);
}

.ba-sec-head--dark .ba-sec-head__subtitle {
	margin-top: 0;
	font-size: 14px;
	line-height: 22.4px;
}

@media (max-width: 991px) {
	.ba-sec-head--modern .ba-sec-head__title {
		font-size: 36px;
	}
}

@media (max-width: 767px) {
	.ba-sec-head--modern,
	.ba-sec-head--project {
		margin-bottom: 40px;
	}

	.ba-sec-head--modern .ba-sec-head__title {
		font-size: 28px;
	}

	.ba-sec-head--project .ba-sec-head__title {
		line-height: normal;
	}
}

@media (max-width: 480px) {
	.ba-sec-head--modern .ba-sec-head__title {
		font-size: 24px;
	}
}

/* ==========================================================================
   C4/C6/C7. Eyebrow (.section-tag)
   Plain:    <div class="ba-eyebrow">Our Expertise</div>
   Lines:    <div class="ba-eyebrow ba-eyebrow--lines"><span class="ba-eyebrow__line"></span><span class="ba-eyebrow__text">…</span><span class="ba-eyebrow__line"></span></div>
   Icon:     <div class="ba-eyebrow ba-eyebrow--icon"><i class="fa fa-star"></i><span>…</span></div>
   Animated: <div class="ba-eyebrow ba-eyebrow--animated"><span class="ba-eyebrow__line"></span><span class="ba-eyebrow__text"><span class="ba-eyebrow__letter">L</span>…</span><span class="ba-eyebrow__line"></span></div>
   ========================================================================== */

.ba-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
	color: var(--ba-primary);
	font-family: var(--ba-font-body);
	font-size: var(--ba-fs-eyebrow);
	font-weight: var(--ba-fw-semibold);
	letter-spacing: var(--ba-ls-eyebrow);
	line-height: 20px;
	text-transform: uppercase;
}

.ba-eyebrow--icon .fa {
	font-size: 12px;
	line-height: 12px;
}

.ba-eyebrow--lines,
.ba-eyebrow--animated {
	display: flex;
	justify-content: center;
	gap: 15px;
}

.ba-eyebrow--lines .ba-eyebrow__line {
	width: 60px;
	height: 2px;
	background: linear-gradient(to right, transparent, var(--ba-primary));
}

.ba-eyebrow--lines .ba-eyebrow__line:last-child {
	background: linear-gradient(to left, transparent, var(--ba-primary));
}

.ba-eyebrow--animated .ba-eyebrow__line {
	width: 50px;
	height: 2px;
	background-color: var(--ba-primary);
	animation: ba-line-fade 2s ease-in-out infinite;
}

.ba-eyebrow__letter {
	display: inline-block;
	animation: ba-letter-wave 2s ease-in-out infinite;
}

.ba-eyebrow__letter:nth-child(2) { animation-delay: 0.1s; }
.ba-eyebrow__letter:nth-child(3) { animation-delay: 0.2s; }
.ba-eyebrow__letter:nth-child(4) { animation-delay: 0.3s; }
.ba-eyebrow__letter:nth-child(5) { animation-delay: 0.4s; }
.ba-eyebrow__letter:nth-child(6) { animation-delay: 0.5s; }
.ba-eyebrow__letter:nth-child(7) { animation-delay: 0.6s; }
.ba-eyebrow__letter:nth-child(8) { animation-delay: 0.7s; }
.ba-eyebrow__letter:nth-child(9) { animation-delay: 0.8s; }
.ba-eyebrow__letter:nth-child(10) { animation-delay: 0.9s; }

@keyframes ba-letter-wave {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		color: var(--ba-primary-glow);
		text-shadow: 0 0 10px rgba(var(--ba-primary-rgb), 0.7);
		transform: translateY(-8px);
	}
}

@keyframes ba-line-fade {
	0%,
	100% {
		opacity: 0.5;
		transform: scaleX(1);
	}

	50% {
		opacity: 1;
		transform: scaleX(1.2);
	}
}

@media (max-width: 480px) {
	.ba-eyebrow {
		font-size: 12px;
	}

	.ba-eyebrow__text {
		font-size: 14px;
	}
}

/* ==========================================================================
   C8. Buttons and text links
   <a class="ba-btn [ba-btn--{variant}]" href="…">Label <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
   ========================================================================== */

.ba-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 8px 17px;
	border: 0;
	border-radius: var(--ba-r-24);
	background-color: var(--ba-primary);
	box-shadow: var(--ba-sh-btn);
	color: var(--ba-white);
	cursor: pointer;
	font-family: var(--ba-font-body);
	font-size: 15px;
	font-weight: var(--ba-fw-semibold);
	letter-spacing: 0.5px;
	line-height: 1.42857;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: all var(--ba-t);
	-webkit-user-select: none;
	user-select: none;
}

.ba-btn .fa {
	margin-top: 4px;
	margin-left: 5px;
	font-size: 12px;
	transition: transform var(--ba-t);
}

.ba-btn .ba-btn__icon--before {
	margin-top: 0;
	margin-left: 0;
}

.ba-btn:hover,
.ba-btn:focus {
	background-color: var(--ba-primary-hover);
	box-shadow: var(--ba-sh-btn-hover);
	color: var(--ba-white);
	transform: translateY(-2px);
}

.ba-btn:hover .fa-arrow-right,
.ba-btn:focus .fa-arrow-right {
	transform: translateX(5px);
}

.ba-btn[disabled],
.ba-btn.is-disabled {
	cursor: not-allowed;
	opacity: 0.65;
	pointer-events: none;
}

/* B1b "View all" pill. */
.ba-btn--lg {
	gap: 4px;
	font-size: 16px;
	line-height: 22.86px;
}

/* B2 "Get Quote" (sentence case, fa-pencil before). */
.ba-btn--quote {
	min-width: 180px;
	gap: 8px;
	padding: 12px 28px;
	border-radius: var(--ba-r-pill);
	box-shadow: none;
	font-size: 15.5px;
	letter-spacing: 0;
	line-height: 22.14px;
	text-transform: none;
}

.ba-btn--quote .fa {
	margin: 0;
	font-size: inherit;
}

.ba-btn--quote:hover,
.ba-btn--quote:focus {
	box-shadow: var(--ba-sh-btn);
}

/* B3/B4 development slide buttons. */
.ba-btn--dev,
.ba-btn--dev-ghost {
	gap: 8px;
	padding: 10px 24px;
	border: 2px solid var(--ba-primary);
	border-radius: var(--ba-r-pill);
	box-shadow: var(--ba-sh-btn-dev);
	font-size: 13px;
	line-height: 1;
}

.ba-btn--dev:hover,
.ba-btn--dev:focus {
	border-color: var(--ba-primary-hover);
	box-shadow: var(--ba-sh-btn-dev-hover);
}

.ba-btn--dev-ghost {
	border-color: var(--ba-white);
	background-color: transparent;
	box-shadow: none;
}

.ba-btn--dev-ghost:hover,
.ba-btn--dev-ghost:focus {
	border-color: var(--ba-white);
	background-color: var(--ba-white);
	box-shadow: none;
	color: var(--ba-slate-900);
}

/* B5/B6 hero CTAs ('Muli' stack, never loaded on live). */
.ba-btn--hero,
.ba-btn--hero-ghost {
	gap: 0;
	padding: 8px 20px;
	border: 2px solid var(--ba-primary);
	border-radius: var(--ba-r-pill);
	box-shadow: var(--ba-sh-btn-hero);
	font-family: var(--ba-font-display);
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 1;
}

.ba-btn--hero:hover,
.ba-btn--hero:focus {
	border-color: var(--ba-primary-hover);
	box-shadow: var(--ba-sh-btn-hero-hover);
}

.ba-btn--hero-ghost {
	border-color: var(--ba-white);
	background-color: transparent;
	box-shadow: none;
}

.ba-btn--hero-ghost:hover,
.ba-btn--hero-ghost:focus {
	border-color: var(--ba-white);
	background-color: var(--ba-white);
	box-shadow: none;
	color: var(--ba-black);
}

@media (max-width: 768px) {
	.ba-btn--hero,
	.ba-btn--hero-ghost {
		padding: 7px 16px;
		font-size: 11px;
	}
}

@media (max-width: 480px) {
	.ba-btn--hero,
	.ba-btn--hero-ghost {
		width: 100%;
	}
}

/* B7 small solid "LEARN MORE" (live 8.5px raised to the 11px legibility floor). */
.ba-btn--sm {
	display: inline-block;
	padding: 10px 25px;
	border-radius: var(--ba-r-4);
	background-color: var(--ba-primary-deep);
	box-shadow: none;
	font-size: var(--ba-fs-min);
	line-height: 12px;
}

.ba-btn--sm:hover,
.ba-btn--sm:focus {
	background-color: var(--ba-primary-deeper);
	box-shadow: none;
	transform: none;
}

/* B8 outline cyan pill; add --wide for the centred 50% / 25% CTA width. */
.ba-btn--outline {
	gap: 0;
	border: 2px solid var(--ba-primary);
	background-color: var(--ba-white);
	color: var(--ba-primary);
	font-weight: var(--ba-fw-bold);
}

.ba-btn--outline:hover,
.ba-btn--outline:focus {
	background-color: var(--ba-primary);
	color: var(--ba-white);
}

.ba-btn--wide {
	display: block;
	width: 50%;
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 992px) {
	.ba-btn--wide {
		width: 25%;
	}
}

@media (max-width: 445px) {
	.ba-btn--wide {
		width: auto;
	}
}

/* L1/L2 legacy inner-page pair (instant hover, as live). */
.ba-btn--legacy,
.ba-btn--legacy-dark {
	gap: 0;
	height: 36px;
	box-shadow: none;
	font-size: 14px;
	font-weight: var(--ba-fw-regular);
	letter-spacing: 0;
	line-height: 20px;
	text-transform: none;
	transition: none;
}

.ba-btn--legacy .fa,
.ba-btn--legacy-dark .fa {
	margin-top: 0;
	margin-left: 10px;
	font-size: 14px;
}

.ba-btn--legacy .ba-btn__icon--before,
.ba-btn--legacy-dark .ba-btn__icon--before {
	width: 1.28571429em;
	margin-right: 4px;
	margin-left: 0;
	text-align: center;
}

.ba-btn--legacy:hover,
.ba-btn--legacy:focus {
	background-color: var(--ba-primary-hover-legacy);
	box-shadow: none;
	transform: none;
}

.ba-btn--legacy-dark {
	background-color: var(--ba-dark);
}

.ba-btn--legacy-dark:hover,
.ba-btn--legacy-dark:focus {
	background-color: var(--ba-dark-hover);
	box-shadow: none;
	transform: none;
}

.ba-btn--animated {
	transition: all var(--ba-t-legacy);
}

/* L3 inline "View All" pill. */
.ba-btn--viewall {
	gap: 0;
	padding: 8px 15px;
	border: 1px solid var(--ba-primary);
	box-shadow: none;
	font-size: 14px;
	letter-spacing: 0;
	line-height: 19px;
	transition: none;
}

.ba-btn--viewall .fa {
	margin-top: 0;
	font-size: 14px;
}

/* L4 "Get in Touch" pill. */
.ba-btn--touch {
	gap: 0;
	padding: 9px 12px;
	border: 1px solid transparent;
	box-shadow: none;
	font-size: 14px;
	font-weight: var(--ba-fw-regular);
	letter-spacing: 0;
	line-height: 20px;
	text-transform: none;
	transition: none;
}

.ba-btn--touch .fa {
	margin-top: 0;
	margin-left: 10px;
	font-size: 14px;
}

.ba-btn--viewall:hover,
.ba-btn--viewall:focus,
.ba-btn--touch:hover,
.ba-btn--touch:focus {
	box-shadow: none;
	transform: none;
}

/* L5 modal footer submit ("REQUEST INFO") and muted secondary. */
.ba-btn--modal {
	display: flex;
	width: 100%;
	gap: 0;
	padding: 10px 11px;
	border: 2px solid var(--ba-primary);
	border-radius: var(--ba-r-8);
	background-color: var(--ba-white);
	box-shadow: none;
	color: var(--ba-primary);
	font-size: 13px;
	font-weight: var(--ba-fw-bold);
	letter-spacing: 0;
	line-height: 20px;
}

.ba-btn--modal:hover,
.ba-btn--modal:focus {
	background-color: var(--ba-primary);
	box-shadow: none;
	color: var(--ba-white);
	transform: none;
}

.ba-btn--modal-muted {
	border-color: #a8a8a8;
	background-color: #a8a8a8;
	color: var(--ba-white);
}

.ba-btn-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* B9 "view more" text link. */
.ba-link-more {
	color: var(--ba-primary);
	font-size: 15px;
	font-weight: var(--ba-fw-semibold);
}

.ba-link-more:hover,
.ba-link-more:focus {
	color: var(--ba-primary);
	text-decoration: underline;
}

.ba-link-more--inner {
	font-size: 14px;
}

.ba-link-more--inner:hover,
.ba-link-more--inner:focus {
	color: var(--ba-black);
	text-decoration: none;
}

/* B10 text link + arrow ("View Details"). */
.ba-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ba-link-blue);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.ba-link-arrow:hover,
.ba-link-arrow:focus {
	color: var(--ba-link-blue);
}

.ba-link-arrow svg {
	width: 20px;
	height: 20px;
}

/* B11 round icon button. */
.ba-btn-round {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(203, 213, 225, 0.2);
	color: var(--ba-slate-600);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.ba-btn-round:hover,
.ba-btn-round:focus {
	background-color: rgba(203, 213, 225, 0.4);
}

.ba-btn-round svg {
	width: 22px;
	height: 22px;
}

/* ==========================================================================
   C9-K1. Project card (.resi_pro_item)
   <div class="ba-proj-grid">
     <article class="ba-proj-card">
       <a class="ba-proj-card__media" href="…"><img …></a>
       <div class="ba-proj-card__body">
         <h3 class="ba-proj-card__title"><a href="…">…</a></h3>
         <p class="ba-proj-card__desc">… <a class="ba-link-more" href="…">view more</a></p>
         <ul class="ba-proj-card__specs"><li><i class="fa fa-map-marker"></i> <strong>Plot Size:</strong> …</li></ul>
         <div class="ba-proj-card__actions">[B2]</div>
       </div>
     </article>
   </div>
   ========================================================================== */

.ba-proj-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
	gap: 30px;
	margin-top: 40px;
}

.ba-proj-card {
	overflow: hidden;
	border: 1px solid var(--ba-border-card);
	border-radius: var(--ba-r-14);
	background-color: var(--ba-white);
	box-shadow: var(--ba-sh-card);
	transition: all var(--ba-t-card);
}

.ba-proj-card:hover {
	border-color: var(--ba-primary);
	box-shadow: var(--ba-sh-card-hover);
	transform: translateY(-5px);
}

.ba-proj-card__media {
	display: block;
	height: 340px;
	overflow: hidden;
}

.ba-proj-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.55s ease;
}

.ba-proj-card:hover .ba-proj-card__media img {
	transform: scale(1.07);
}

.ba-proj-card__body {
	padding: 26px 24px 30px;
}

.ba-proj-card__title {
	margin: 0 0 14px;
	color: var(--ba-text-strong);
	font-size: 22px;
	line-height: 1.35;
}

.ba-proj-card__title a {
	color: var(--ba-slate-900);
}

.ba-proj-card__title a:hover,
.ba-proj-card__title a:focus {
	color: var(--ba-primary);
}

.ba-proj-card__desc {
	margin-bottom: 18px;
	color: var(--ba-slate-600);
	font-size: 15px;
	line-height: 1.65;
}

.ba-proj-card__specs {
	margin: 0 0 24px;
	padding: 0;
	color: var(--ba-slate-700);
	font-size: 14.5px;
	line-height: 2.1;
	list-style: none;
}

.ba-proj-card__specs li {
	margin-bottom: 6px;
}

.ba-proj-card__specs .fa {
	width: 22px;
	margin-right: 10px;
	color: var(--ba-primary);
	text-align: center;
}

.ba-proj-card__actions {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

@media (max-width: 767px) {
	.ba-proj-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ba-proj-card__media {
		height: 280px;
	}

	.ba-proj-card__actions .ba-btn {
		width: 100%;
	}
}

/* ==========================================================================
   C9-K2. Listed project row (.listed-project, inner listings)
   <article class="ba-listed">
     <a class="ba-listed__thumb" href="…"><img …></a>
     <div class="ba-listed__info">
       <h4 class="ba-listed__title"><a href="…">…</a></h4>
       <p class="ba-listed__text">…</p>
       <p class="ba-listed__spec"><i class="fa fa-map"></i> <strong>Plot Size:</strong> …</p>
       <div class="ba-btn-group">[L1 .ba-listed__view] [L1 .ba-listed__call] [L2]</div>
     </div>
   </article>
   ========================================================================== */

.ba-listed {
	position: relative;
	display: flex;
	margin: 30px 10px 10px 0;
	border: 1px solid var(--ba-border-legacy);
	border-top: 5px solid var(--ba-border-listed-top);
	border-radius: var(--ba-r-5);
	background-color: var(--ba-white);
}

.ba-listed::before {
	position: absolute;
	top: -5px;
	left: 0;
	width: 0;
	height: 5px;
	border-radius: 100px;
	background-color: var(--ba-primary-bar);
	content: "";
	transition: width 3s cubic-bezier(0.5, 0.5, 0.5, 1);
}

.ba-listed:hover::before {
	width: 100%;
}

.ba-listed__thumb {
	position: relative;
	flex: 0 0 53.5%;
	height: 327px;
	overflow: hidden;
	border-radius: 5px 0 0 5px;
}

.ba-listed__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ba-listed:hover .ba-listed__thumb img {
	transform: scale(1.08);
}

.ba-listed__info {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	padding: 20px 10px 20px 20px;
}

.ba-listed__title {
	margin-top: 0;
	margin-bottom: 15px;
}

.ba-listed__text {
	margin-bottom: 14px;
}

.ba-listed__spec {
	margin-bottom: 0;
	line-height: 24px;
}

.ba-listed__spec:last-of-type {
	margin-bottom: 10px;
}

.ba-listed__spec .fa {
	font-size: 14px;
}

.ba-listed__call {
	display: none;
}

@media (min-width: 425px) and (max-width: 768px) {
	.ba-listed {
		margin-left: 10px;
	}
}

@media (max-width: 658px) {
	.ba-listed {
		flex-direction: column;
		margin: 30px 10px 10px 5px;
		border-top-width: 1px;
	}

	.ba-listed__thumb {
		flex-basis: auto;
		height: auto;
		aspect-ratio: 16 / 9;
		background-color: var(--ba-black);
	}

	.ba-listed__view {
		display: none;
	}

	.ba-listed__call {
		display: inline-flex;
	}
}

/* ==========================================================================
   C9-K3. News card (Latest News marquee)
   <article class="ba-news-card">
     <img class="ba-news-card__img" …>
     <div class="ba-news-card__header">[C10 .ba-badge] <span class="ba-cat-tag">…</span></div>
     <div class="ba-news-card__body"><h3 class="ba-news-card__title">…</h3><div class="ba-news-card__text">…</div></div>
     <div class="ba-news-card__footer">[B10] [B11]</div>
   </article>
   ========================================================================== */

.ba-news-card {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	width: 400px;
	min-height: 220px;
	overflow: hidden;
	border: 1px solid var(--ba-border-slate-300);
	border-radius: var(--ba-r-16);
	background-color: rgba(241, 245, 249, 0.85);
	box-shadow: var(--ba-sh-news);
	color: var(--ba-slate-700);
	transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ba-news-card:hover {
	border-color: var(--ba-border-news-hover);
	box-shadow: var(--ba-sh-news-hover);
	transform: translateY(-4px);
}

.ba-news-card__img {
	display: block;
	width: 100%;
	height: 140px;
	margin: 0 0 10px;
	border-radius: 16px 16px 0 0;
	object-fit: cover;
}

.ba-news-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0 15px 5px;
	text-transform: uppercase;
}

.ba-news-card__body {
	flex: 1 1 0%;
	padding: 5px 15px 10px;
}

.ba-news-card__title {
	margin: 10px 0;
	color: var(--ba-slate-900);
	font-size: 18px;
	line-height: 1.2;
}

.ba-news-card__text {
	display: -webkit-box;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.6;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.ba-news-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding: 10px 15px 15px;
	border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.ba-news-card:hover .ba-badge {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
	transform: translateY(-1px);
}

@media (max-width: 480px) {
	.ba-news-card {
		width: min(400px, calc(100vw - 40px));
	}
}

/* ==========================================================================
   C9-K4. Expertise card (Why Choose Us; pairs with [data-ba-accordion])
   <div class="ba-expertise" data-ba-accordion-item>
     <button class="ba-expertise__head" data-ba-accordion-trigger>
       <span class="ba-expertise__icon"><i class="fa fa-wrench"></i></span>
       <span class="ba-expertise__title">…</span>
       <span class="ba-expertise__toggle"><i class="fa fa-chevron-down"></i></span>
     </button>
     <p class="ba-expertise__preview">…</p>
     <div class="ba-expertise__content" data-ba-accordion-panel><div class="ba-expertise__text">…</div></div>
   </div>
   ========================================================================== */

.ba-expertise {
	padding: 15px;
	border-left: 4px solid var(--ba-primary);
	border-radius: var(--ba-r-16);
	background-color: var(--ba-white);
	box-shadow: var(--ba-sh-soft);
	transition: all var(--ba-t);
}

.ba-expertise:hover {
	box-shadow: var(--ba-sh-soft-hover);
	transform: translateX(5px);
}

.ba-expertise__head {
	display: flex;
	align-items: center;
	gap: 15px;
	width: 100%;
	margin-bottom: 15px;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

.ba-expertise__icon {
	display: flex;
	flex: 0 0 50px;
	align-items: center;
	justify-content: center;
	height: 50px;
	border-radius: var(--ba-r-12);
	background: linear-gradient(135deg, var(--ba-primary) 0%, var(--ba-primary-hover) 100%);
	color: var(--ba-white);
	font-size: 24px;
}

.ba-expertise__title {
	flex: 1 1 auto;
	color: var(--ba-slate-900);
	font-family: var(--ba-font-heading);
	font-size: 20px;
	font-weight: var(--ba-fw-bold);
	line-height: 24px;
}

.ba-expertise__toggle {
	display: flex;
	flex: 0 0 30px;
	align-items: center;
	justify-content: center;
	height: 30px;
	border-radius: 50%;
	background-color: var(--ba-bg-slate-100);
	color: var(--ba-primary);
	transition: all var(--ba-t);
}

.ba-expertise.is-open .ba-expertise__toggle {
	background-color: var(--ba-primary);
	color: var(--ba-white);
	transform: rotate(180deg);
}

.ba-expertise__preview {
	margin-bottom: 10px;
	color: var(--ba-slate-600);
	font-size: 15px;
	line-height: 1.7;
}

.ba-expertise__content {
	overflow: hidden;
	transition: height 0.4s ease;
}

.ba-expertise__text {
	padding-top: 15px;
	border-top: 1px solid var(--ba-border-slate-200);
	color: var(--ba-slate-600);
	font-size: 15px;
	line-height: 27px;
}

@media (max-width: 767px) {
	.ba-expertise {
		padding: 20px;
	}

	.ba-expertise__icon {
		flex-basis: 45px;
		height: 45px;
	}
}

/* ==========================================================================
   C9-K5. Service photo card (home "Our Services")
   <div class="ba-service-row">
     <div class="ba-service-card">
       <div class="ba-service-card__bg" style="background-image:url(…)"></div>
       <div class="ba-service-card__content"><h3>…</h3><p>…</p>[B7]</div>
     </div>
   </div>
   ========================================================================== */

.ba-service-rows {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.ba-service-row {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.ba-service-card {
	position: relative;
	flex: 1 1 0%;
	min-width: 0;
	height: 420px;
	overflow: hidden;
	border-radius: var(--ba-r-service);
	transition: transform var(--ba-t-slow);
}

.ba-service-card:hover {
	z-index: 13;
	transform: scale(1.03);
}

.ba-service-card__bg {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	transition: transform var(--ba-t-slow);
}

.ba-service-card:hover .ba-service-card__bg {
	transform: scale(1.03);
}

.ba-service-card__content {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 25px 30px;
	background: linear-gradient(to top, #000 0%, transparent 100%);
	transform-origin: bottom;
	transition: transform var(--ba-t-slow);
}

.ba-service-card:hover .ba-service-card__content {
	transform: scale(1.03);
}

.ba-service-card__content h3 {
	margin: 0 0 8px;
	color: var(--ba-white);
	font-size: 26px;
	line-height: 24px;
}

.ba-service-card__content p {
	margin: 0 0 15px;
	color: var(--ba-on-dark-muted);
	font-size: 15px;
	line-height: 1.4;
	opacity: 0.9;
}

@media (max-width: 991px) {
	.ba-service-card {
		flex: 0 0 100%;
		max-width: 100%;
		height: 300px;
	}
}

@media (max-width: 767px) {
	.ba-service-card {
		height: 250px;
	}

	.ba-service-card__content {
		padding: 20px 25px;
	}

	.ba-service-card__content h3 {
		font-size: 14px;
	}

	.ba-service-card__content p {
		font-size: var(--ba-fs-min);
		line-height: 1.4;
	}
}

/* ==========================================================================
   C9-K6. Development slide (Featured Developments)
   <div class="ba-dev-slide">
     <img …><div class="ba-dev-slide__overlay"></div>
     <div class="ba-dev-slide__content"><span class="ba-dev-badge">…</span><h3>…</h3><p>…</p>
       <div class="ba-dev-slide__actions">[B3] [B4]</div></div>
   </div>
   ========================================================================== */

.ba-dev-slide {
	position: relative;
	height: 500px;
	overflow: hidden;
	border-radius: var(--ba-r-16);
	transition: transform var(--ba-t);
}

.ba-dev-slide:hover {
	transform: translateY(-5px);
}

.ba-dev-slide > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ba-t-slow);
}

.ba-dev-slide:hover > img {
	transform: scale(1.05);
}

.ba-dev-slide__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
}

.ba-dev-slide__content {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 35px;
	color: var(--ba-white);
}

.ba-dev-slide__content h3 {
	margin-bottom: 12px;
	color: var(--ba-white);
	font-size: 32px;
	line-height: 24px;
}

.ba-dev-slide__content p {
	margin-bottom: 20px;
	color: var(--ba-white);
	font-size: 15px;
	line-height: 1.6;
	opacity: 0.95;
}

.ba-dev-slide__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

@media (max-width: 768px) {
	.ba-dev-slide {
		height: 450px;
	}

	.ba-dev-slide__content h3 {
		font-size: 24px;
	}

	.ba-dev-slide__content p {
		font-size: 14px;
		line-height: 22.4px;
	}
}

@media (max-width: 767px) {
	.ba-dev-slide__actions .ba-btn {
		width: 100%;
	}
}

/* ==========================================================================
   C9-K7. Icon box + animated corner lines (.wt-icon-box-wraper + .animate_line)
   <div class="ba-animate-line">
     <div class="ba-icon-box">
       <div class="ba-icon-box__icon"><img …></div>
       <div class="ba-icon-box__body">…</div>
     </div>
   </div>
   ========================================================================== */

.ba-animate-line {
	position: relative;
	z-index: 0;
}

.ba-animate-line::before,
.ba-animate-line::after {
	position: absolute;
	z-index: -1;
	width: 0;
	height: 4px;
	background-color: transparent;
	content: "";
	transition: all var(--ba-t-slow);
}

.ba-animate-line::before {
	top: 0;
	right: 0;
}

.ba-animate-line::after {
	bottom: 0;
	left: 0;
}

.ba-animate-line:hover::before,
.ba-animate-line:hover::after {
	width: 50%;
	height: 50%;
	background-color: var(--ba-primary);
}

.ba-icon-box {
	margin: 5px;
	padding: 30px;
	background-color: var(--ba-white);
	text-align: center;
}

.ba-icon-box--left {
	text-align: left;
}

.ba-icon-box__icon {
	display: inline-block;
	width: 70px;
	margin-bottom: 20px;
}

.ba-icon-box__icon img {
	width: 70px;
	height: auto;
}

.ba-icon-box__body {
	overflow: hidden;
}

.ba-icon-box__body p {
	margin-bottom: 24px;
}

.ba-icon-box__body b {
	font-weight: var(--ba-fw-bold);
}

.ba-icon-box__lead {
	color: var(--ba-text);
	font-size: 18px;
	line-height: 24px;
}

/* ==========================================================================
   C9-K8. Image badge (about image "16+ Years Excellence")
   <div class="ba-image-badge"><div class="ba-image-badge__num">16+</div><div class="ba-image-badge__label">…</div></div>
   ========================================================================== */

.ba-image-badge {
	position: absolute;
	right: 30px;
	bottom: 30px;
	z-index: 2;
	padding: 20px 30px;
	border-radius: var(--ba-r-15);
	background-color: var(--ba-primary);
	box-shadow: var(--ba-sh-badge);
	color: var(--ba-white);
	text-align: center;
}

.ba-image-badge__num {
	margin-bottom: 5px;
	font-size: 36px;
	font-weight: 800;
	line-height: 1;
}

.ba-image-badge__label {
	font-size: 13px;
	font-weight: var(--ba-fw-semibold);
	letter-spacing: 0.5px;
	line-height: 1.42857;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.ba-image-badge {
		right: 20px;
		bottom: 20px;
		padding: 15px 20px;
	}

	.ba-image-badge__num {
		font-size: 28px;
	}

	.ba-image-badge__label {
		font-size: var(--ba-fs-min);
	}
}

/* ==========================================================================
   C9-K9. Gallery grid tiles (lightbox UI lives in modals.css)
   <div class="ba-gallery">
     <a class="ba-gallery__tile [ba-gallery__tile--mobile-only]" href="{original}" data-ba-lightbox-group="…">
       <img class="ba-gallery__img" data-ba-fade …><span class="ba-gallery__caption">…</span>
     </a>
   </div>
   ========================================================================== */

.ba-gallery {
	display: grid;
	grid-auto-flow: dense;
	grid-auto-rows: 130px;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
	padding: 30px 0 60px;
}

.ba-gallery__tile {
	position: relative;
	display: block;
	grid-column: span 2;
	grid-row: span 2;
	overflow: hidden;
	border-radius: var(--ba-r-14);
	background-color: var(--ba-bg-tile);
	box-shadow: var(--ba-sh-soft);
	transition: transform var(--ba-t-card), box-shadow var(--ba-t-card);
}

.ba-gallery__tile:nth-child(8n+1) {
	grid-column: span 4;
	grid-row: span 4;
}

.ba-gallery__tile:nth-child(8n+4) {
	grid-column: span 4;
	grid-row: span 2;
}

.ba-gallery__tile:nth-child(8n+6) {
	grid-column: span 2;
	grid-row: span 4;
}

.ba-gallery__tile:hover,
.ba-gallery__tile:focus-visible {
	z-index: 2;
	box-shadow: var(--ba-sh-tile-hover);
	transform: translateY(-6px);
}

.ba-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ba-t-slow), opacity var(--ba-t-slow), filter var(--ba-t-slow);
}

.ba-gallery__tile:hover .ba-gallery__img {
	transform: scale(1.06);
}

.ba-gallery__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 16px 18px 14px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
	color: var(--ba-white);
	font-size: 14px;
	font-weight: var(--ba-fw-semibold);
	letter-spacing: 0.2px;
	opacity: 0;
	text-align: left;
	transform: translateY(8px);
	transition: opacity var(--ba-t-card), transform var(--ba-t-card);
}

.ba-gallery__tile:nth-child(8n+1) .ba-gallery__caption,
.ba-gallery__tile:nth-child(8n+4) .ba-gallery__caption,
.ba-gallery__tile:nth-child(8n+6) .ba-gallery__caption {
	padding: 22px 22px 18px;
	font-size: 17px;
}

.ba-gallery__tile:hover .ba-gallery__caption,
.ba-gallery__tile:focus-visible .ba-gallery__caption {
	opacity: 1;
	transform: translateY(0);
}

.ba-gallery__tile--mobile-only {
	display: none;
}

@media (max-width: 991px) {
	.ba-gallery {
		grid-auto-rows: 110px;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 12px;
	}

	.ba-gallery__tile:nth-child(8n+1) {
		grid-row: span 3;
	}

	.ba-gallery__tile:nth-child(8n+6) {
		grid-row: span 3;
	}
}

@media (max-width: 767px) {
	.ba-gallery__tile--mobile-only {
		display: block;
	}
}

@media (max-width: 576px) {
	.ba-gallery {
		grid-auto-rows: 150px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.ba-gallery__tile,
	.ba-gallery__tile:nth-child(8n+6) {
		grid-column: span 1;
		grid-row: span 2;
	}

	.ba-gallery__tile:nth-child(8n+1),
	.ba-gallery__tile:nth-child(8n+4) {
		grid-column: span 2;
		grid-row: span 2;
	}

	.ba-gallery__caption {
		padding: 10px 12px;
		font-size: 12px;
	}

	.ba-gallery__tile:nth-child(8n+1) .ba-gallery__caption,
	.ba-gallery__tile:nth-child(8n+4) .ba-gallery__caption,
	.ba-gallery__tile:nth-child(8n+6) .ba-gallery__caption {
		padding: 12px 14px;
		font-size: 13px;
	}
}

/* Image fade/blur-up set by ui.js on images still loading ([data-ba-fade]). */
img.is-loading {
	opacity: 0;
	filter: blur(8px);
	transform: scale(1.03);
}

/* ==========================================================================
   C10. Badges and pills
   <span class="ba-badge ba-badge--{green|amber|blue}"><svg class="ba-badge__icon">…</svg>Label</span>
   <span class="ba-dev-badge">New Launch</span>  <span class="ba-cat-tag">Designer Villas</span>
   (Live 10px badge/category text raised to the 11px legibility floor.)
   ========================================================================== */

.ba-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 8px 3px 3px;
	border: 1px solid var(--ba-blue-border);
	border-radius: var(--ba-r-5);
	background-color: var(--ba-blue-bg);
	color: var(--ba-blue-text);
	font-size: var(--ba-fs-min);
	font-weight: var(--ba-fw-semibold);
	letter-spacing: 1px;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	transition: all var(--ba-t);
}

.ba-badge--green {
	border-color: var(--ba-green-border);
	background-color: var(--ba-green-bg);
	color: var(--ba-green-text);
}

.ba-badge--amber {
	border-color: var(--ba-amber-border);
	background-color: var(--ba-amber-bg);
	color: var(--ba-amber-text);
}

.ba-badge__icon {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	padding: 4px;
	border-radius: 50%;
	background-color: currentColor;
	fill: none;
	stroke: var(--ba-white);
	stroke-width: 2.5;
}

.ba-dev-badge {
	display: inline-block;
	margin-bottom: 15px;
	padding: 6px 16px;
	border-radius: var(--ba-r-20);
	background-color: var(--ba-primary);
	color: var(--ba-white);
	font-size: 12px;
	font-weight: var(--ba-fw-semibold);
	line-height: 1.42857;
	text-transform: uppercase;
}

.ba-cat-tag {
	color: var(--ba-slate-600);
	font-size: var(--ba-fs-min);
	font-weight: var(--ba-fw-bold);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* ==========================================================================
   C11. Form controls (shared by the contact/affiliate pages and inline forms)
   ========================================================================== */

.ba-form-card {
	padding: 20px;
	border: 1px solid var(--ba-border-legacy);
	border-radius: var(--ba-r-20);
	background-color: var(--ba-white);
	box-shadow: var(--ba-sh-form);
}

.ba-field {
	margin-bottom: 20px;
}

.ba-label {
	margin-bottom: 10px;
	color: var(--ba-text);
	font-size: 14px;
	font-weight: var(--ba-fw-semibold);
	line-height: 20px;
}

.ba-label__hint {
	font-weight: var(--ba-fw-regular);
	opacity: 0.8;
}

.ba-input,
.ba-select,
.ba-textarea {
	display: block;
	width: 100%;
	height: 40px;
	padding: 9px 12px;
	border: 1px solid var(--ba-border-input);
	border-radius: var(--ba-r-24);
	background-color: var(--ba-white);
	box-shadow: none;
	color: var(--ba-text-nav);
	font-family: var(--ba-font-body);
	font-size: var(--ba-fs-input);
	line-height: 20px;
	transition: all var(--ba-t-legacy);
}

.ba-textarea {
	height: 120px;
	border-radius: 0;
	resize: vertical;
}

.ba-input::placeholder,
.ba-textarea::placeholder {
	color: var(--ba-text-muted);
	opacity: 1;
}

.ba-input:focus,
.ba-select:focus,
.ba-textarea:focus {
	border-color: var(--ba-border-input-focus);
	outline: 0;
	box-shadow: none;
}

.ba-input:focus-visible,
.ba-select:focus-visible,
.ba-textarea:focus-visible {
	border-color: var(--ba-primary);
}

.ba-input[aria-invalid="true"],
.ba-select[aria-invalid="true"],
.ba-textarea[aria-invalid="true"] {
	border-color: var(--ba-error);
}

.ba-field__error {
	display: inline-block;
	margin-top: 4px;
	color: var(--ba-error);
	font-size: 13px;
	line-height: 18px;
}

/* ==========================================================================
   C12. Accordion (FAQ .wt-accordion.acc-bg-dark)
   <div class="ba-acc" data-ba-accordion="single">
     <div class="ba-acc__item is-open" data-ba-accordion-item>
       <h3 class="ba-acc__heading">
         <button class="ba-acc__trigger" type="button" aria-expanded="true" aria-controls="…" data-ba-accordion-trigger>
           <i class="fa fa-angle-double-right"></i> Question <span class="ba-acc__indicator"><i class="fa fa-plus"></i></span>
         </button>
       </h3>
       <div class="ba-acc__panel" id="…" data-ba-accordion-panel><div class="ba-acc__body">…</div></div>
     </div>
   </div>
   ========================================================================== */

.ba-acc {
	margin-bottom: 24px;
}

@media (min-width: 768px) {
	.ba-acc--narrow {
		width: 60%;
	}
}

.ba-acc__item {
	margin-bottom: 10px;
}

.ba-acc__heading {
	margin: 0;
	font-size: 14px;
	line-height: 18px;
}

.ba-acc__trigger {
	position: relative;
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 15px 40px 15px 15px;
	border: 0;
	border-radius: 0;
	background-color: var(--ba-primary);
	color: var(--ba-white);
	cursor: pointer;
	font-family: var(--ba-font-heading);
	font-size: 14px;
	font-weight: var(--ba-fw-bold);
	line-height: 18px;
	text-align: left;
	text-transform: uppercase;
}

.ba-acc__trigger > .fa {
	margin-right: 5px;
}

.ba-acc__indicator {
	position: absolute;
	top: 0;
	right: 0;
	padding: 15px;
}

.ba-acc__indicator .fa {
	transition: all var(--ba-t-legacy);
}

.ba-acc__trigger[aria-expanded="true"] .ba-acc__indicator .fa {
	transform: rotate(45deg);
}

.ba-acc__panel {
	overflow: hidden;
	transition: height 0.35s ease;
}

.ba-acc__body {
	padding: 15px 0;
	color: var(--ba-text-acc-body);
	font-size: 14px;
	line-height: 20px;
}

.ba-acc__body p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   C13. Page banner (.wt-bnr-inr) and C14 breadcrumb bar
   <section class="ba-page-banner" style="--ba-banner-d:url(…);--ba-banner-m:url(…)">
     <div class="ba-overlay ba-overlay--03"></div>
     <div class="ba-container ba-page-banner__inner"><h1 class="ba-page-banner__title">…</h1></div>
   </section>
   <nav class="ba-breadcrumb">…<ol class="ba-breadcrumb__list">…</ol></nav>
   ========================================================================== */

.ba-page-banner {
	position: relative;
	display: flex;
	align-items: center;
	height: var(--ba-banner-height);
	background-color: var(--ba-dark);
	background-image: var(--ba-banner-d);
	background-position: center center;
	background-size: cover;
}

.ba-page-banner__inner {
	position: relative;
	z-index: 1;
}

.ba-page-banner__title {
	margin: 20px 0 24px;
	color: var(--ba-white);
	font-size: var(--ba-fs-h1);
	line-height: var(--ba-lh-h1);
}

@media (max-width: 768px) {
	.ba-page-banner {
		background-image: var(--ba-banner-m, var(--ba-banner-d));
	}
}

@media (max-width: 767px) {
	.ba-page-banner__title {
		text-align: center;
	}
}

.ba-breadcrumb {
	padding: 15px 0;
	background-color: var(--ba-bg-gray-light);
}

.ba-breadcrumb__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ba-breadcrumb__item {
	position: relative;
	display: inline-block;
	margin-right: 3px;
	color: var(--ba-link-hover);
	font-size: 14px;
	font-weight: var(--ba-fw-semibold);
	line-height: 20px;
}

.ba-breadcrumb__item::after {
	margin-left: 7px;
	color: var(--ba-crumb-sep);
	content: "\f105";
	font-family: var(--ba-font-icon);
}

.ba-breadcrumb__item:last-child {
	color: var(--ba-crumb-current);
}

.ba-breadcrumb__item:last-child::after {
	content: none;
}

.ba-breadcrumb__item a {
	color: var(--ba-primary);
}

.ba-breadcrumb__item a:hover,
.ba-breadcrumb__item a:focus {
	color: var(--ba-primary);
}

.ba-breadcrumb__item .fa-home {
	font-size: 18px;
	line-height: 18px;
	vertical-align: text-top;
}

/* ==========================================================================
   C15. Carousel base + indicators (driven by slider.js / [data-ba-slider])
   ========================================================================== */

.ba-slider {
	position: relative;
}

.ba-slider__viewport {
	position: relative;
	overflow: hidden;
	touch-action: pan-y;
}

.ba-slider__track {
	display: flex;
	gap: var(--ba-gap, 0px);
	will-change: transform;
}

.ba-slider__track > * {
	flex: 0 0 calc((100% - (var(--ba-per-view, 1) - 1) * var(--ba-gap, 0px)) / var(--ba-per-view, 1));
	min-width: 0;
}

.ba-slider--fade .ba-slider__track {
	display: grid;
}

.ba-slider--fade .ba-slider__track > * {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ba-slider-speed, 600ms) ease, visibility 0s linear var(--ba-slider-speed, 600ms);
}

.ba-slider--fade .ba-slider__track > .is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity var(--ba-slider-speed, 600ms) ease, visibility 0s;
}

.ba-slider.is-dragging .ba-slider__viewport {
	cursor: grabbing;
}

.ba-slider.is-dragging a,
.ba-slider.is-dragging img {
	pointer-events: none;
}

.ba-slider.is-snapping * {
	transition: none !important;
}

.ba-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	padding: 0;
	border: 0;
	background-color: rgba(0, 0, 0, 0.31);
	color: var(--ba-white);
	cursor: pointer;
	font-size: 13px;
	line-height: 44px;
	transition: background-color 0.2s linear;
}

.ba-slider__arrow--prev {
	left: 0;
}

.ba-slider__arrow--next {
	right: 0;
}

.ba-slider__arrow .fa {
	transition: transform 0.5s linear;
}

.ba-slider__arrow:hover,
.ba-slider__arrow:focus-visible {
	outline: 2px solid var(--ba-white);
	outline-offset: -2px;
	background-color: rgba(0, 0, 0, 0.55);
}

.ba-slider__arrow:hover .fa,
.ba-slider__arrow:focus-visible .fa {
	transform: rotateX(360deg);
}

.ba-dots {
	margin: 0;
	padding: 0;
	line-height: 0;
	list-style: none;
	text-align: center;
}

.ba-dots__dot {
	display: inline-block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	vertical-align: middle;
}

.ba-dots__dot span {
	display: block;
}

/* Owl squares (testimonials, clients). */
.ba-dots--squares {
	margin-top: 20px;
}

.ba-dots--squares .ba-dots__dot span {
	width: 12px;
	height: 12px;
	margin: 5px 7px;
	border: 1px solid var(--ba-white);
	background-color: var(--ba-dot-color, var(--ba-dark));
	transition: opacity 0.2s ease;
}

.ba-dots--squares .ba-dots__dot:hover span,
.ba-dots--squares .ba-dots__dot.is-active span {
	background-color: var(--ba-dot-active, var(--ba-primary));
}

/* Hero lines. */
.ba-dots--lines {
	position: absolute;
	bottom: 30px;
	left: 0;
	z-index: 5;
	width: 100%;
}

.ba-dots--lines .ba-dots__dot {
	width: 36px;
	padding: 5px 7px;
}

.ba-dots--lines .ba-dots__dot span {
	width: 22px;
	height: 2px;
	background-color: rgba(255, 255, 255, 0.5);
	transition: all 0.1s linear;
}

.ba-dots--lines .ba-dots__dot:hover span,
.ba-dots--lines .ba-dots__dot:focus-visible span,
.ba-dots--lines .ba-dots__dot.is-active span {
	height: 4px;
	background-color: var(--ba-white);
}

@media (max-width: 768px) {
	.ba-dots--lines {
		bottom: 22px;
	}
}

@media (max-width: 480px) {
	.ba-dots--lines .ba-dots__dot {
		width: 28px;
		padding: 5px;
	}

	.ba-dots--lines .ba-dots__dot span {
		width: 18px;
	}
}

/* Cyan pill bullets (Featured Developments: authored style, not Swiper's #007aff default). */
.ba-dots--pill {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 30px 0;
}

.ba-dots--pill .ba-dots__dot {
	padding: 4px 0;
}

.ba-dots--pill .ba-dots__dot span {
	width: 10px;
	height: 10px;
	margin: 0 4px;
	border-radius: 50%;
	background-color: var(--ba-border-slate-300);
	transition: all 0.3s;
}

.ba-dots--pill .ba-dots__dot.is-active span {
	width: 30px;
	border-radius: 5px;
	background-color: var(--ba-primary);
}

/* Bootstrap 3 carousel indicators (round). */
.ba-dots--bullets .ba-dots__dot {
	padding: 1px;
}

.ba-dots--bullets .ba-dots__dot span {
	width: 10px;
	height: 10px;
	margin: 1px;
	border: 1px solid var(--ba-dot-color, var(--ba-white));
	border-radius: 10px;
}

.ba-dots--bullets .ba-dots__dot.is-active span {
	width: 12px;
	height: 12px;
	margin: 0;
	background-color: var(--ba-dot-active, var(--ba-white));
}

/* Revolution-slider "zeus" bullets. */
.ba-dots--zeus .ba-dots__dot {
	padding: 0 2.5px;
}

.ba-dots--zeus .ba-dots__dot span {
	position: relative;
	width: 17px;
	height: 17px;
	border: 2px solid var(--ba-white);
	border-radius: 50%;
}

.ba-dots--zeus .ba-dots__dot span::after {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-color: var(--ba-white);
	content: "";
	transform: scale(0);
	transition: transform 0.3s ease;
}

.ba-dots--zeus .ba-dots__dot:hover span::after,
.ba-dots--zeus .ba-dots__dot.is-active span::after {
	transform: scale(1.2);
}

/* ==========================================================================
   Marquee (scroller.js / [data-ba-marquee])
   ========================================================================== */

.ba-marquee {
	width: 100%;
	overflow: hidden;
}

.ba-marquee__track {
	display: flex;
	width: max-content;
	gap: var(--ba-marquee-gap, 20px);
	will-change: transform;
}

.ba-marquee.is-static {
	overflow-x: auto;
	scroll-snap-type: x proximity;
}

.ba-marquee.is-static .ba-marquee__track > * {
	scroll-snap-align: start;
}

/* ==========================================================================
   Flip card mechanics ([data-ba-flip]; faces styled per page)
   <div class="ba-flip" data-ba-flip><div class="ba-flip__front">…</div><div class="ba-flip__back">…</div></div>
   ========================================================================== */

.ba-flip {
	position: relative;
	perspective: 1000px;
}

.ba-flip__front,
.ba-flip__back {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: transform 0.6s ease;
}

.ba-flip__front {
	position: relative;
	z-index: 2;
	transform: rotateY(0deg);
}

.ba-flip__back {
	position: absolute;
	inset: 0;
	transform: rotateY(-180deg);
}

@media (hover: hover) {
	.ba-flip:hover .ba-flip__front {
		transform: rotateY(180deg);
	}

	.ba-flip:hover .ba-flip__back {
		transform: rotateY(0deg);
	}
}

.ba-flip.is-flipped .ba-flip__front,
.ba-flip:focus-within .ba-flip__front {
	transform: rotateY(180deg);
}

.ba-flip.is-flipped .ba-flip__back,
.ba-flip:focus-within .ba-flip__back {
	transform: rotateY(0deg);
}

/* ==========================================================================
   Video facade ([data-ba-video-facade])
   <button class="ba-video" data-ba-video-facade="{youtube id}" data-title="…"><img …><span class="ba-video__play"></span></button>
   ========================================================================== */

.ba-video {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	border: 0;
	background-color: var(--ba-black);
	cursor: pointer;
	aspect-ratio: 16 / 9;
}

.ba-video img,
.ba-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.ba-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 48px;
	border-radius: 14px;
	background-color: rgba(33, 33, 33, 0.8);
	transform: translate(-50%, -50%);
	transition: background-color 0.2s ease;
}

.ba-video__play::before {
	position: absolute;
	top: 50%;
	left: 50%;
	border-width: 11px 0 11px 19px;
	border-style: solid;
	border-color: transparent transparent transparent var(--ba-white);
	content: "";
	transform: translate(-40%, -50%);
}

.ba-video:hover .ba-video__play,
.ba-video:focus-visible .ba-video__play {
	background-color: #f00;
}

/* ==========================================================================
   Reveal ([data-ba-reveal]; ui.js only hides elements that start below the fold)
   ========================================================================== */

.ba-reveal-pending {
	opacity: 0;
	transform: translateY(20px);
}

.ba-reveal-pending[data-ba-reveal="fade"] {
	transform: none;
}

.ba-reveal-pending[data-ba-reveal="zoom"] {
	transform: scale(0.96);
}

.ba-revealed {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ==========================================================================
   Generic entry content, result lists, pagination and search form
   (page.php, single.php, index.php, search.php fallbacks)
   ========================================================================== */

.ba-entry::after {
	display: table;
	clear: both;
	content: "";
}

.ba-entry > :last-child {
	margin-bottom: 0;
}

.ba-entry ul,
.ba-entry ol {
	padding-left: 20px;
}

.ba-entry__meta {
	margin-bottom: 15px;
	color: var(--ba-text-muted);
	font-family: var(--ba-font-accent);
	font-style: italic;
}

.ba-entry__media {
	margin-bottom: 30px;
}

/* Imported CMS bodies (blog, event and project content): classes written by
   the content import in place of live's pasted inline styles. */
h2.ba-h1 {
	margin: 20px 0 24px;
	color: var(--ba-text-legacy-heading);
	font-family: var(--ba-font-heading);
	font-size: var(--ba-fs-h1);
	font-weight: var(--ba-fw-bold);
	line-height: var(--ba-lh-h1);
}

.has-text-align-center {
	text-align: center;
}

.has-text-align-right {
	text-align: right;
}

figure.image,
figure.table {
	margin: 0 0 24px;
}

figure.image img {
	max-width: 100%;
	height: auto;
}

figure.image_resized img {
	width: 100%;
}

figure.image.alignleft {
	float: left;
	margin-right: 15px;
}

figure.image.alignright {
	float: right;
	margin-left: 15px;
}

figure.table {
	overflow-x: auto;
}

figure.table table {
	border-collapse: collapse;
	border-spacing: 0;
}

figure.table th,
figure.table td {
	padding: 6px;
	border: 1px solid #bfbfbf;
}

mark.marker-blue {
	background: #72ccfd;
}

mark.marker-green {
	background: #62f962;
}

mark.pen-red {
	background: transparent;
	color: #e71313;
}

a.btn-blog {
	display: inline-block;
	padding: 5px 10px;
	border: 1px solid #2e6da4;
	border-radius: 3px;
	background: #337ab7;
	color: var(--ba-white);
	font-size: 12px;
	line-height: 1.5;
}

a.btn-blog:hover,
a.btn-blog:focus {
	border-color: #204d74;
	background: #286090;
	color: var(--ba-white);
}

.ba-post-list {
	display: grid;
	gap: 30px;
}

.ba-post-summary {
	display: flex;
	gap: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--ba-border-legacy);
}

.ba-post-summary__media {
	flex: 0 0 300px;
	align-self: flex-start;
	overflow: hidden;
	border-radius: var(--ba-r-5);
	aspect-ratio: 4 / 3;
}

.ba-post-summary__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ba-post-summary__body {
	flex: 1 1 auto;
	min-width: 0;
}

.ba-post-summary__meta {
	display: flex;
	gap: 15px;
	margin-bottom: 10px;
	color: var(--ba-text-muted);
	font-size: 13px;
	line-height: 20px;
}

.ba-post-summary__type {
	color: var(--ba-primary);
	font-weight: var(--ba-fw-semibold);
	text-transform: uppercase;
}

.ba-post-summary__title {
	margin-top: 0;
	margin-bottom: 15px;
	font-size: var(--ba-fs-h4);
	line-height: var(--ba-lh-h4);
}

.ba-post-summary__excerpt p {
	margin-bottom: 15px;
}

@media (max-width: 767px) {
	.ba-post-summary {
		flex-direction: column;
		gap: 15px;
	}

	.ba-post-summary__media {
		flex-basis: auto;
	}
}

.ba-pagination {
	margin-top: 40px;
}

.ba-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.ba-pagination .page-numbers {
	display: inline-block;
	min-width: 36px;
	padding: 8px 12px;
	border: 1px solid var(--ba-border-legacy);
	color: var(--ba-link-hover);
	line-height: 20px;
	text-align: center;
}

.ba-pagination .page-numbers.current,
.ba-pagination a.page-numbers:hover,
.ba-pagination a.page-numbers:focus {
	border-color: var(--ba-primary);
	background-color: var(--ba-primary);
	color: var(--ba-white);
}

.ba-search-bar {
	max-width: 600px;
	margin-bottom: 30px;
}

.ba-search-count {
	margin-bottom: 30px;
	font-weight: var(--ba-fw-semibold);
}

.search-form {
	display: flex;
	gap: 10px;
}

.search-form label {
	flex: 1 1 auto;
	margin: 0;
}

.search-form .search-field {
	display: block;
	width: 100%;
	height: 40px;
	padding: 9px 12px;
	border: 1px solid var(--ba-border-input);
	border-radius: var(--ba-r-24);
	color: var(--ba-text-nav);
	font-size: var(--ba-fs-input);
}

.search-form .search-submit {
	padding: 8px 20px;
	border: 0;
	border-radius: var(--ba-r-24);
	background-color: var(--ba-primary);
	color: var(--ba-white);
	font-weight: var(--ba-fw-semibold);
}

.search-form .search-submit:hover,
.search-form .search-submit:focus {
	background-color: var(--ba-primary-hover-legacy);
}

.ba-empty {
	max-width: 700px;
}