/*==============================================================================
Blessings Therapy Centre
About Page — Section 01: Premium Hero
Target: ₹20–30 lakh custom clinic website quality
Version: 2.0.0
==============================================================================*/

/*------------------------------------------------------------------------------
01. Design tokens and page foundation
------------------------------------------------------------------------------*/

.btc2-about {
	--btc2-green-950: #173c31;
	--btc2-green-900: #214b3d;
	--btc2-green-800: #2f604f;
	--btc2-green-700: #477b67;
	--btc2-green-500: #7fae97;
	--btc2-green-300: #bed8ca;
	--btc2-green-150: #e5efe9;
	--btc2-cream-50: #fffdf9;
	--btc2-cream-100: #fbf7f0;
	--btc2-cream-200: #f3ecdf;
	--btc2-gold-500: #b89457;
	--btc2-ink: #20342d;
	--btc2-muted: #65746e;
	--btc2-line: rgba(33, 75, 61, 0.14);
	--btc2-white: #ffffff;
	--btc2-shadow-sm: 0 14px 35px rgba(24, 57, 46, 0.08);
	--btc2-shadow-md: 0 24px 60px rgba(24, 57, 46, 0.13);
	--btc2-shadow-lg: 0 38px 90px rgba(24, 57, 46, 0.18);
	--btc2-radius-sm: 16px;
	--btc2-radius-md: 24px;
	--btc2-radius-lg: 36px;
	--btc2-container: 1320px;

	position: relative;
	width: 100%;
	color: var(--btc2-ink);
	background: var(--btc2-cream-50);
}

.btc2-about *,
.btc2-about *::before,
.btc2-about *::after {
	box-sizing: border-box;
}

.btc2-about img {
	max-width: 100%;
}

.btc2-container {
	width: min(calc(100% - 48px), var(--btc2-container));
	margin-inline: auto;
}

/*------------------------------------------------------------------------------
02. Hero shell
------------------------------------------------------------------------------*/

.btc2-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(32px, 4vw, 58px) 0 clamp(72px, 8vw, 118px);
	background:
		radial-gradient(
			circle at 88% 10%,
			rgba(184, 148, 87, 0.18) 0,
			rgba(184, 148, 87, 0) 28%
		),
		radial-gradient(
			circle at 8% 86%,
			rgba(127, 174, 151, 0.17) 0,
			rgba(127, 174, 151, 0) 34%
		),
		linear-gradient(135deg, #fffdf9 0%, #f8f3ea 48%, #eef5f0 100%);
}

.btc2-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -220px;
	left: -190px;
	width: 500px;
	height: 500px;
	border: 1px solid rgba(33, 75, 61, 0.11);
	border-radius: 50%;
	pointer-events: none;
}

.btc2-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -130px;
	bottom: -250px;
	width: 540px;
	height: 540px;
	border-radius: 50%;
	background:
		repeating-radial-gradient(
			circle,
			rgba(33, 75, 61, 0.055) 0 1px,
			transparent 1px 18px
		);
	opacity: 0.52;
	pointer-events: none;
}

/*------------------------------------------------------------------------------
03. Breadcrumb
------------------------------------------------------------------------------*/

.btc2-breadcrumb {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 clamp(38px, 5vw, 66px);
	color: #71807a;
	font-size: 13px;
	font-weight: 650;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

.btc2-breadcrumb a {
	color: var(--btc2-green-800);
	text-decoration: none;
	transition:
		color 220ms ease,
		transform 220ms ease;
}

.btc2-breadcrumb a:hover {
	color: var(--btc2-green-950);
}

.btc2-breadcrumb a:focus-visible {
	outline: 3px solid rgba(184, 148, 87, 0.36);
	outline-offset: 4px;
	border-radius: 4px;
}

.btc2-breadcrumb span[aria-hidden="true"] {
	color: rgba(33, 75, 61, 0.38);
}

/*------------------------------------------------------------------------------
04. Hero grid
------------------------------------------------------------------------------*/

.btc2-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.98fr) minmax(440px, 0.92fr);
	align-items: center;
	gap: clamp(58px, 7vw, 108px);
}

.btc2-hero-copy {
	max-width: 730px;
	padding-bottom: 8px;
}

.btc2-kicker {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	margin: 0 0 22px;
	color: var(--btc2-green-800);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.15em;
	line-height: 1.3;
	text-transform: uppercase;
}

.btc2-kicker::before {
	content: "";
	flex: 0 0 36px;
	width: 36px;
	height: 1px;
	background: var(--btc2-gold-500);
}

.btc2-hero h1 {
	max-width: 820px;
	margin: 0;
	color: var(--btc2-ink);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(52px, 5.6vw, 84px);
	font-weight: 400;
	letter-spacing: -0.047em;
	line-height: 0.99;
	text-wrap: balance;
}

.btc2-hero h1 em {
	display: block;
	margin-top: 8px;
	color: var(--btc2-green-700);
	font-weight: 400;
}

.btc2-hero-copy > p {
	max-width: 680px;
	margin: clamp(28px, 3.2vw, 42px) 0 0;
	color: var(--btc2-muted);
	font-size: clamp(17px, 1.28vw, 20px);
	font-weight: 400;
	line-height: 1.78;
	text-wrap: pretty;
}

/*------------------------------------------------------------------------------
05. Actions
------------------------------------------------------------------------------*/

.btc2-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: clamp(30px, 4vw, 46px);
}

.btc2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 56px;
	padding: 15px 25px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1;
	text-align: center;
	text-decoration: none !important;
	transition:
		transform 240ms cubic-bezier(.2, .8, .2, 1),
		background-color 240ms ease,
		border-color 240ms ease,
		box-shadow 240ms ease,
		color 240ms ease;
}

.btc2-btn-primary {
	border-color: var(--btc2-green-950);
	background: var(--btc2-green-950);
	color: var(--btc2-white) !important;
	box-shadow: 0 16px 34px rgba(23, 60, 49, 0.22);
}

.btc2-btn-secondary {
	border-color: rgba(33, 75, 61, 0.22);
	background: rgba(255, 255, 255, 0.68);
	color: var(--btc2-green-900) !important;
	box-shadow: 0 10px 30px rgba(24, 57, 46, 0.05);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

@media (hover: hover) and (pointer: fine) {
	.btc2-btn:hover {
		transform: translateY(-3px);
	}

	.btc2-btn-primary:hover {
		border-color: var(--btc2-green-800);
		background: var(--btc2-green-800);
		box-shadow: 0 20px 42px rgba(23, 60, 49, 0.28);
	}

	.btc2-btn-secondary:hover {
		border-color: rgba(33, 75, 61, 0.42);
		background: rgba(255, 255, 255, 0.94);
		box-shadow: 0 16px 34px rgba(24, 57, 46, 0.09);
	}
}

.btc2-btn:focus-visible {
	outline: 3px solid rgba(184, 148, 87, 0.42);
	outline-offset: 4px;
}

/*------------------------------------------------------------------------------
06. Inline reassurance note
------------------------------------------------------------------------------*/

.btc2-inline-note {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	margin-top: 26px;
	padding: 13px 16px;
	border: 1px solid rgba(33, 75, 61, 0.11);
	border-radius: var(--btc2-radius-sm);
	background: rgba(255, 255, 255, 0.58);
	box-shadow: 0 12px 30px rgba(24, 57, 46, 0.05);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.btc2-inline-note > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--btc2-green-150);
	color: var(--btc2-green-900);
	font-size: 15px;
	font-weight: 900;
}

.btc2-inline-note div {
	display: grid;
	gap: 3px;
}

.btc2-inline-note strong {
	color: var(--btc2-ink);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.25;
}

.btc2-inline-note small {
	color: #75827d;
	font-size: 12px;
	line-height: 1.45;
}

/*------------------------------------------------------------------------------
07. Hero media
------------------------------------------------------------------------------*/

.btc2-hero-media {
	position: relative;
	width: 100%;
	max-width: 545px;
	min-height: clamp(590px, 51vw, 720px);
	margin-left: auto;
}

.btc2-hero-media::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -34px;
	right: -36px;
	width: 76%;
	height: 78%;
	border: 1px solid rgba(184, 148, 87, 0.52);
	border-radius: 220px 220px 54px 54px;
	pointer-events: none;
}

.btc2-hero-media::after {
	content: "";
	position: absolute;
	z-index: -2;
	right: -30px;
	bottom: -28px;
	width: 82%;
	height: 74%;
	border-radius: 190px 190px 44px 44px;
	background: linear-gradient(145deg, #d5e6dc 0%, #aecdbd 100%);
	transform: rotate(2.5deg);
	pointer-events: none;
}

.btc2-hero-media .btc2-image-card {
	position: absolute;
	inset: 0 6% 0 4%;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.62);
	border-radius: 210px 210px 38px 38px;
	background: #dce9e2;
	box-shadow: var(--btc2-shadow-lg);
}

.btc2-hero-media .btc2-image-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			180deg,
			transparent 56%,
			rgba(18, 46, 37, 0.42) 100%
		);
	pointer-events: none;
}

.btc2-hero-media .btc2-image-card img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center 18%;
	transform: scale(1.002);
	transition: transform 1000ms cubic-bezier(.2, .8, .2, 1);
}

@media (hover: hover) and (pointer: fine) {
	.btc2-hero-media:hover .btc2-image-card img {
		transform: scale(1.035);
	}
}

.btc2-image-caption {
	position: absolute;
	z-index: 2;
	right: 30px;
	bottom: 28px;
	left: 30px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	color: #ffffff;
}

.btc2-image-caption strong {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(22px, 2vw, 30px);
	font-weight: 400;
	line-height: 1.15;
}

.btc2-image-caption span {
	padding-bottom: 3px;
	color: rgba(255, 255, 255, 0.84);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.35;
	text-align: right;
	text-transform: uppercase;
}

/*------------------------------------------------------------------------------
08. Achievement badges
------------------------------------------------------------------------------*/

.btc2-badge {
	position: absolute;
	z-index: 4;
	display: grid;
	gap: 4px;
	min-width: 178px;
	padding: 17px 19px;
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.88);
	box-shadow: 0 18px 46px rgba(24, 57, 46, 0.14);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.btc2-badge strong {
	color: var(--btc2-green-950);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.18;
}

.btc2-badge span {
	color: #73817b;
	font-size: 11px;
	font-weight: 750;
	letter-spacing: 0.055em;
	line-height: 1.35;
	text-transform: uppercase;
}

.btc2-badge-a {
	top: 10%;
	left: -30px;
}

.btc2-badge-b {
	right: -18px;
	bottom: 14%;
}

/*------------------------------------------------------------------------------
09. Trust strip
------------------------------------------------------------------------------*/

.btc2-trust-strip {
	position: relative;
	z-index: 5;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: clamp(54px, 7vw, 86px);
	overflow: hidden;
	border: 1px solid rgba(33, 75, 61, 0.11);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.64);
	box-shadow: var(--btc2-shadow-sm);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.btc2-trust-strip > div {
	position: relative;
	padding: 23px 28px;
	text-align: center;
}

.btc2-trust-strip > div:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 24%;
	right: 0;
	width: 1px;
	height: 52%;
	background: rgba(33, 75, 61, 0.13);
}

.btc2-trust-strip strong {
	display: block;
	color: var(--btc2-green-950);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.28;
}

.btc2-trust-strip span {
	display: block;
	margin-top: 5px;
	color: #75827d;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.015em;
	line-height: 1.45;
}

/*------------------------------------------------------------------------------
10. Tablet
------------------------------------------------------------------------------*/

@media (max-width: 1100px) {
	.btc2-container {
		width: min(calc(100% - 36px), var(--btc2-container));
	}

	.btc2-hero-grid {
		grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.86fr);
		gap: 48px;
	}

	.btc2-hero h1 {
		font-size: clamp(48px, 6.2vw, 68px);
	}

	.btc2-hero-media {
		min-height: 600px;
	}

	.btc2-badge-a {
		left: -12px;
	}

	.btc2-badge-b {
		right: -8px;
	}
}

/*------------------------------------------------------------------------------
11. Tablet portrait / small laptop
------------------------------------------------------------------------------*/

@media (max-width: 900px) {
	.btc2-hero {
		padding-bottom: 86px;
	}

	.btc2-hero-grid {
		grid-template-columns: 1fr;
		gap: 62px;
	}

	.btc2-hero-copy {
		max-width: 760px;
	}

	.btc2-hero-media {
		width: min(100%, 670px);
		min-height: 690px;
		margin-inline: auto;
	}

	.btc2-trust-strip {
		margin-top: 68px;
	}
}

/*------------------------------------------------------------------------------
12. Mobile
------------------------------------------------------------------------------*/

@media (max-width: 640px) {
	.btc2-container {
		width: min(calc(100% - 28px), var(--btc2-container));
	}

	.btc2-hero {
		padding: 24px 0 62px;
	}

	.btc2-breadcrumb {
		margin-bottom: 34px;
		font-size: 12px;
	}

	.btc2-hero-grid {
		gap: 48px;
	}

	.btc2-kicker {
		margin-bottom: 18px;
		font-size: 10px;
		letter-spacing: 0.12em;
	}

	.btc2-kicker::before {
		flex-basis: 27px;
		width: 27px;
	}

	.btc2-hero h1 {
		font-size: clamp(42px, 13vw, 58px);
		line-height: 1.02;
		letter-spacing: -0.038em;
	}

	.btc2-hero-copy > p {
		margin-top: 24px;
		font-size: 16px;
		line-height: 1.7;
	}

	.btc2-actions {
		align-items: stretch;
		flex-direction: column;
		margin-top: 30px;
	}

	.btc2-btn {
		width: 100%;
	}

	.btc2-inline-note {
		width: 100%;
	}

	.btc2-hero-media {
		min-height: 540px;
	}

	.btc2-hero-media::before {
		top: -18px;
		right: -10px;
		border-radius: 150px 150px 36px 36px;
	}

	.btc2-hero-media::after {
		right: -6px;
		bottom: -16px;
		border-radius: 145px 145px 32px 32px;
	}

	.btc2-hero-media .btc2-image-card {
		inset: 0;
		border-radius: 145px 145px 28px 28px;
	}

	.btc2-image-caption {
		right: 21px;
		bottom: 22px;
		left: 21px;
		align-items: flex-start;
		flex-direction: column;
		gap: 5px;
	}

	.btc2-image-caption span {
		padding-bottom: 0;
		text-align: left;
	}

	.btc2-badge {
		min-width: 0;
		max-width: 174px;
		padding: 14px 15px;
		border-radius: 15px;
	}

	.btc2-badge strong {
		font-size: 17px;
	}

	.btc2-badge span {
		font-size: 10px;
	}

	.btc2-badge-a {
		top: 9%;
		left: -4px;
	}

	.btc2-badge-b {
		right: -4px;
		bottom: 17%;
	}

	.btc2-trust-strip {
		grid-template-columns: 1fr;
		margin-top: 50px;
		border-radius: 20px;
	}

	.btc2-trust-strip > div {
		padding: 20px 18px;
	}

	.btc2-trust-strip > div:not(:last-child) {
		border-bottom: 1px solid rgba(33, 75, 61, 0.11);
	}

	.btc2-trust-strip > div:not(:last-child)::after {
		display: none;
	}
}

/*------------------------------------------------------------------------------
13. Very small phones
------------------------------------------------------------------------------*/

@media (max-width: 390px) {
	.btc2-container {
		width: min(calc(100% - 22px), var(--btc2-container));
	}

	.btc2-hero h1 {
		font-size: 39px;
	}

	.btc2-hero-media {
		min-height: 500px;
	}

	.btc2-badge {
		max-width: 152px;
		padding: 12px 13px;
	}

	.btc2-badge strong {
		font-size: 15px;
	}

	.btc2-badge span {
		font-size: 9px;
	}
}

/*------------------------------------------------------------------------------
14. Reduced motion
------------------------------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
	.btc2-btn,
	.btc2-hero-media .btc2-image-card img,
	.btc2-breadcrumb a {
		transition: none;
	}
}

/*==============================================================================
Blessings Therapy Centre
About Page — Section 02: The Blessings Difference
Target: ₹20–30 lakh custom clinic website quality
Version: 2.0.0
==============================================================================*/

.btc2-difference {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(92px, 10vw, 154px) 0;
	background:
		linear-gradient(
			180deg,
			var(--btc2-cream-50, #fffdf9) 0%,
			#f8f4ec 100%
		);
}

.btc2-difference::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 13%;
	right: -260px;
	width: 560px;
	height: 560px;
	border: 1px solid rgba(33, 75, 61, 0.08);
	border-radius: 50%;
	pointer-events: none;
}

.btc2-difference::after {
	content: "B";
	position: absolute;
	z-index: -1;
	left: -0.035em;
	bottom: -0.2em;
	color: rgba(33, 75, 61, 0.028);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(280px, 34vw, 560px);
	font-weight: 400;
	line-height: 1;
	pointer-events: none;
	user-select: none;
}

/*------------------------------------------------------------------------------
Intro
------------------------------------------------------------------------------*/

.btc2-difference-intro {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.72fr);
	align-items: start;
	gap: clamp(54px, 8vw, 120px);
}

.btc2-difference-heading {
	max-width: 760px;
}

.btc2-difference-heading h2 {
	max-width: 760px;
	margin: 0;
	color: var(--btc2-ink, #20342d);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(48px, 5vw, 75px);
	font-weight: 400;
	letter-spacing: -0.044em;
	line-height: 1.01;
	text-wrap: balance;
}

.btc2-difference-heading h2 em {
	display: block;
	margin-top: 7px;
	color: var(--btc2-green-700, #477b67);
	font-weight: 400;
}

.btc2-difference-copy {
	max-width: 520px;
	padding-top: 33px;
}

.btc2-difference-copy p {
	margin: 0;
	color: var(--btc2-muted, #65746e);
	font-size: 15px;
	line-height: 1.76;
	text-wrap: pretty;
}

.btc2-difference-copy p + p {
	margin-top: 19px;
}

.btc2-difference-copy .btc2-difference-lead {
	color: #384b44;
	font-size: 17px;
	font-weight: 560;
	line-height: 1.72;
}

/*------------------------------------------------------------------------------
Story composition
------------------------------------------------------------------------------*/

.btc2-difference-story {
	display: grid;
	grid-template-columns: minmax(340px, 0.78fr) minmax(0, 1.22fr);
	align-items: stretch;
	gap: clamp(28px, 4vw, 54px);
	margin-top: clamp(62px, 7vw, 96px);
}

/* Editorial statement panel */

.btc2-difference-editorial {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 620px;
	overflow: hidden;
	padding: clamp(30px, 4vw, 52px);
	border-radius: clamp(28px, 3vw, 42px);
	background:
		radial-gradient(
			circle at 82% 18%,
			rgba(190, 216, 202, 0.18),
			transparent 35%
		),
		linear-gradient(145deg, #173c31 0%, #285646 100%);
	color: #ffffff;
	box-shadow:
		0 34px 80px rgba(23, 60, 49, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.btc2-difference-editorial::before {
	content: "";
	position: absolute;
	z-index: -1;
	right: -125px;
	bottom: -135px;
	width: 390px;
	height: 390px;
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: 50%;
	box-shadow:
		0 0 0 42px rgba(255, 255, 255, 0.025),
		0 0 0 84px rgba(255, 255, 255, 0.018);
}

.btc2-difference-editorial::after {
	content: "“";
	position: absolute;
	z-index: -1;
	top: 80px;
	left: 0.09em;
	color: rgba(255, 255, 255, 0.055);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 300px;
	line-height: 1;
	pointer-events: none;
}

.btc2-difference-editorial-top,
.btc2-difference-editorial-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.btc2-difference-editorial-top {
	color: rgba(255, 255, 255, 0.66);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.15em;
	line-height: 1.3;
	text-transform: uppercase;
}

.btc2-difference-editorial blockquote {
	max-width: 520px;
	margin: clamp(58px, 8vw, 108px) 0;
	color: #ffffff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(34px, 3.6vw, 52px);
	font-weight: 400;
	letter-spacing: -0.035em;
	line-height: 1.12;
	text-wrap: balance;
}

.btc2-difference-editorial-bottom > div:first-child {
	display: grid;
	gap: 5px;
	max-width: 280px;
}

.btc2-difference-editorial-bottom strong {
	color: #ffffff;
	font-size: 14px;
	font-weight: 750;
	line-height: 1.35;
}

.btc2-difference-editorial-bottom span {
	color: rgba(255, 255, 255, 0.66);
	font-size: 12px;
	line-height: 1.55;
}

.btc2-difference-monogram {
	display: grid;
	flex: 0 0 70px;
	width: 70px;
	height: 70px;
	place-items: center;
	color: rgba(255, 255, 255, 0.76);
}

.btc2-difference-monogram svg {
	display: block;
	width: 100%;
	height: 100%;
}

/*------------------------------------------------------------------------------
Principles
------------------------------------------------------------------------------*/

.btc2-difference-principles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.btc2-difference-principle {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 300px;
	overflow: hidden;
	padding: clamp(26px, 3vw, 38px);
	border: 1px solid rgba(33, 75, 61, 0.12);
	border-radius: 28px;
	background: rgba(255, 255, 255, 0.7);
	box-shadow: 0 18px 45px rgba(24, 57, 46, 0.065);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition:
		transform 280ms cubic-bezier(.2, .8, .2, 1),
		border-color 280ms ease,
		background-color 280ms ease,
		box-shadow 280ms ease;
}

.btc2-difference-principle::after {
	content: "";
	position: absolute;
	right: -70px;
	bottom: -70px;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: rgba(127, 174, 151, 0.08);
	transition: transform 420ms cubic-bezier(.2, .8, .2, 1);
}

.btc2-difference-number {
	position: absolute;
	top: 25px;
	right: 27px;
	color: rgba(33, 75, 61, 0.34);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 13px;
	line-height: 1;
}

.btc2-difference-icon {
	display: grid;
	width: 52px;
	height: 52px;
	place-items: center;
	border: 1px solid rgba(33, 75, 61, 0.11);
	border-radius: 50%;
	background: var(--btc2-green-150, #e5efe9);
	color: var(--btc2-green-900, #214b3d);
}

.btc2-difference-icon svg {
	width: 23px;
	height: 23px;
}

.btc2-difference-principle h3 {
	max-width: 240px;
	margin: auto 0 0;
	color: var(--btc2-ink, #20342d);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.16;
}

.btc2-difference-principle p {
	position: relative;
	z-index: 1;
	max-width: 300px;
	margin: 13px 0 0;
	color: var(--btc2-muted, #65746e);
	font-size: 13px;
	line-height: 1.68;
}

@media (hover: hover) and (pointer: fine) {
	.btc2-difference-principle:hover {
		transform: translateY(-7px);
		border-color: rgba(33, 75, 61, 0.22);
		background: rgba(255, 255, 255, 0.92);
		box-shadow: 0 26px 58px rgba(24, 57, 46, 0.12);
	}

	.btc2-difference-principle:hover::after {
		transform: scale(1.32);
	}
}

/*------------------------------------------------------------------------------
Closing statement
------------------------------------------------------------------------------*/

.btc2-difference-closing {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 48px;
	margin-top: clamp(50px, 6vw, 78px);
	padding-top: clamp(34px, 4vw, 48px);
	border-top: 1px solid rgba(33, 75, 61, 0.14);
}

.btc2-difference-closing > p {
	max-width: 750px;
	margin: 0;
	color: var(--btc2-ink, #20342d);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(24px, 2.5vw, 36px);
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.32;
	text-wrap: balance;
}

.btc2-difference-signature {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 270px;
}

.btc2-difference-signature-line {
	display: block;
	flex: 0 0 46px;
	width: 46px;
	height: 1px;
	background: var(--btc2-gold-500, #b89457);
}

.btc2-difference-signature div {
	display: grid;
	gap: 3px;
}

.btc2-difference-signature strong {
	color: var(--btc2-green-950, #173c31);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.3;
}

.btc2-difference-signature span {
	color: #78857f;
	font-size: 11px;
	line-height: 1.45;
}

/*------------------------------------------------------------------------------
Responsive
------------------------------------------------------------------------------*/

@media (max-width: 1050px) {
	.btc2-difference-intro {
		grid-template-columns: minmax(0, 1fr) minmax(310px, 0.72fr);
		gap: 52px;
	}

	.btc2-difference-story {
		grid-template-columns: minmax(320px, 0.76fr) minmax(0, 1.24fr);
		gap: 24px;
	}

	.btc2-difference-editorial {
		min-height: 590px;
	}

	.btc2-difference-principle {
		min-height: 285px;
		padding: 27px;
	}
}

@media (max-width: 860px) {
	.btc2-difference-intro,
	.btc2-difference-story {
		grid-template-columns: 1fr;
	}

	.btc2-difference-copy {
		max-width: 680px;
		padding-top: 0;
	}

	.btc2-difference-editorial {
		min-height: 570px;
	}

	.btc2-difference-principle {
		min-height: 285px;
	}

	.btc2-difference-closing {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}

@media (max-width: 600px) {
	.btc2-difference {
		padding: 76px 0;
	}

	.btc2-difference-intro {
		gap: 28px;
	}

	.btc2-difference-heading h2 {
		font-size: clamp(40px, 12vw, 54px);
		line-height: 1.035;
	}

	.btc2-difference-copy .btc2-difference-lead {
		font-size: 16px;
	}

	.btc2-difference-story {
		margin-top: 48px;
	}

	.btc2-difference-editorial {
		min-height: 500px;
		padding: 29px 25px;
		border-radius: 28px;
	}

	.btc2-difference-editorial blockquote {
		margin: 52px 0;
		font-size: clamp(31px, 9vw, 40px);
	}

	.btc2-difference-editorial-bottom {
		align-items: flex-end;
	}

	.btc2-difference-monogram {
		flex-basis: 58px;
		width: 58px;
		height: 58px;
	}

	.btc2-difference-principles {
		grid-template-columns: 1fr;
	}

	.btc2-difference-principle {
		min-height: 250px;
		padding: 25px;
		border-radius: 23px;
	}

	.btc2-difference-principle h3 {
		max-width: 270px;
		font-size: 24px;
	}

	.btc2-difference-closing {
		margin-top: 48px;
		padding-top: 31px;
	}

	.btc2-difference-closing > p {
		font-size: 25px;
	}

	.btc2-difference-signature {
		min-width: 0;
	}
}

@media (max-width: 390px) {
	.btc2-difference-editorial {
		min-height: 470px;
		padding: 25px 21px;
	}

	.btc2-difference-editorial blockquote {
		font-size: 29px;
	}

	.btc2-difference-editorial-bottom span {
		font-size: 11px;
	}
}

/*------------------------------------------------------------------------------
Accessibility
------------------------------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
	.btc2-difference-principle,
	.btc2-difference-principle::after {
		transition: none;
	}
}

@media (forced-colors: active) {
	.btc2-difference-editorial,
	.btc2-difference-principle {
		border: 1px solid CanvasText;
	}
}

/*==============================================================================
LIVE-SITE STABILITY PATCH
Purpose:
1. Isolate Section 2 from theme/global SVG rules.
2. Prevent oversized icons and layout collapse.
3. Enforce desktop, tablet and mobile behaviour.
4. Keep all changes restricted to the About page.
==============================================================================*/

/* Page-level overflow and media safety */
.btc2-about {
	overflow-x: clip;
}

.btc2-about :where(svg, img) {
	max-width: 100%;
}

/* WordPress/theme SVG rules must never resize Section 2 icons */
.btc2-about .btc2-difference-monogram,
.btc2-about .btc2-difference-icon {
	position: relative !important;
	inset: auto !important;
	overflow: hidden !important;
}

.btc2-about .btc2-difference-monogram {
	display: grid !important;
	flex: 0 0 70px !important;
	width: 70px !important;
	height: 70px !important;
	min-width: 70px !important;
	max-width: 70px !important;
	min-height: 70px !important;
	max-height: 70px !important;
	place-items: center !important;
}

.btc2-about .btc2-difference-icon {
	display: grid !important;
	flex: 0 0 52px !important;
	width: 52px !important;
	height: 52px !important;
	min-width: 52px !important;
	max-width: 52px !important;
	min-height: 52px !important;
	max-height: 52px !important;
	place-items: center !important;
}

.btc2-about .btc2-difference-monogram > svg {
	position: static !important;
	inset: auto !important;
	display: block !important;
	width: 70px !important;
	height: 70px !important;
	min-width: 70px !important;
	max-width: 70px !important;
	min-height: 70px !important;
	max-height: 70px !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
	object-fit: contain !important;
}

.btc2-about .btc2-difference-icon > svg {
	position: static !important;
	inset: auto !important;
	display: block !important;
	width: 23px !important;
	height: 23px !important;
	min-width: 23px !important;
	max-width: 23px !important;
	min-height: 23px !important;
	max-height: 23px !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
	object-fit: contain !important;
}

/* Reinforce the intended Section 2 structure against theme block styles */
.btc2-about .btc2-difference {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	overflow: hidden !important;
}

.btc2-about .btc2-difference-intro {
	display: grid !important;
	grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.72fr) !important;
	align-items: start !important;
}

.btc2-about .btc2-difference-story {
	display: grid !important;
	grid-template-columns: minmax(340px, 0.78fr) minmax(0, 1.22fr) !important;
	align-items: stretch !important;
}

.btc2-about .btc2-difference-editorial {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	overflow: hidden !important;
}

.btc2-about .btc2-difference-principles {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.btc2-about .btc2-difference-principle {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
}

.btc2-about .btc2-difference-editorial blockquote {
	position: relative !important;
	width: auto !important;
	height: auto !important;
	max-width: 520px !important;
}

.btc2-about .btc2-difference-closing {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto !important;
}

/* Prevent inherited WordPress block margins from opening large gaps */
.btc2-about .btc2-difference :where(h2, h3, p, blockquote, figure, svg) {
	margin-block-start: 0;
}

.btc2-about .btc2-difference-principle > :last-child,
.btc2-about .btc2-difference-editorial > :last-child {
	margin-bottom: 0;
}

/* Large tablet / small laptop */
@media (max-width: 1050px) {
	.btc2-about .btc2-difference-intro {
		grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr) !important;
		gap: 44px !important;
	}

	.btc2-about .btc2-difference-story {
		grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.25fr) !important;
		gap: 22px !important;
	}

	.btc2-about .btc2-difference-principle {
		min-height: 270px !important;
	}
}

/* Tablet portrait */
@media (max-width: 860px) {
	.btc2-about .btc2-difference-intro,
	.btc2-about .btc2-difference-story {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.btc2-about .btc2-difference-copy {
		max-width: 720px !important;
		padding-top: 0 !important;
	}

	.btc2-about .btc2-difference-editorial {
		min-height: 540px !important;
	}

	.btc2-about .btc2-difference-principles {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.btc2-about .btc2-difference-closing {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Mobile */
@media (max-width: 640px) {
	.btc2-about {
		overflow-x: hidden;
	}

	.btc2-about .btc2-container {
		width: min(calc(100% - 28px), var(--btc2-container)) !important;
	}

	.btc2-about .btc2-difference {
		padding: 72px 0 !important;
	}

	.btc2-about .btc2-difference-intro,
	.btc2-about .btc2-difference-story,
	.btc2-about .btc2-difference-closing {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.btc2-about .btc2-difference-heading h2 {
		font-size: clamp(39px, 12vw, 52px) !important;
		line-height: 1.04 !important;
	}

	.btc2-about .btc2-difference-copy p {
		font-size: 15px !important;
	}

	.btc2-about .btc2-difference-story {
		margin-top: 46px !important;
	}

	.btc2-about .btc2-difference-editorial {
		min-height: 480px !important;
		padding: 27px 23px !important;
		border-radius: 27px !important;
	}

	.btc2-about .btc2-difference-editorial blockquote {
		margin: 48px 0 !important;
		font-size: clamp(29px, 9vw, 39px) !important;
	}

	.btc2-about .btc2-difference-principles {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 14px !important;
	}

	.btc2-about .btc2-difference-principle {
		min-height: 238px !important;
		padding: 24px !important;
		border-radius: 22px !important;
	}

	.btc2-about .btc2-difference-closing {
		gap: 28px !important;
	}

	.btc2-about .btc2-difference-monogram {
		flex-basis: 58px !important;
		width: 58px !important;
		height: 58px !important;
		min-width: 58px !important;
		max-width: 58px !important;
		min-height: 58px !important;
		max-height: 58px !important;
	}

	.btc2-about .btc2-difference-monogram > svg {
		width: 58px !important;
		height: 58px !important;
		min-width: 58px !important;
		max-width: 58px !important;
		min-height: 58px !important;
		max-height: 58px !important;
	}
}

/* Very small phones */
@media (max-width: 390px) {
	.btc2-about .btc2-container {
		width: min(calc(100% - 22px), var(--btc2-container)) !important;
	}

	.btc2-about .btc2-difference-editorial {
		min-height: 455px !important;
		padding: 24px 20px !important;
	}

	.btc2-about .btc2-difference-editorial blockquote {
		font-size: 28px !important;
	}

	.btc2-about .btc2-difference-principle {
		min-height: 225px !important;
	}
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
	.btc2-about *,
	.btc2-about *::before,
	.btc2-about *::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/*==============================================================================
ABOUT PAGE — DESKTOP HERO & QUALIFICATIONS REFINEMENT
Release: 2.4.1
This block must remain at the absolute end of about-page.css.
==============================================================================*/

/* Keep sticky navigation clear of section links and browser hash navigation. */
.btc2-about #qualifications-achievements {
    scroll-margin-top: 156px !important;
}

/* Qualification summary cards: exact chronological order from the HTML. */
.btc2-about #qualifications-achievements .btc2-feature-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1.5vw, 20px) !important;
    width: 100% !important;
}

.btc2-about #qualifications-achievements .btc2-feature-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 232px !important;
    padding: clamp(22px, 2vw, 28px) !important;
}

.btc2-about #qualifications-achievements .btc2-feature-card > span {
    align-self: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
}

.btc2-about #qualifications-achievements .btc2-feature-card small {
    margin-top: 28px !important;
}

.btc2-about #qualifications-achievements .btc2-feature-card h3 {
    margin-top: 9px !important;
    font-size: clamp(23px, 1.75vw, 29px) !important;
    line-height: 1.16 !important;
}

.btc2-about #qualifications-achievements .btc2-feature-card p {
    margin-top: 11px !important;
    font-size: 13px !important;
    line-height: 1.58 !important;
}

/* The full academic journey follows the same chronological order. */
.btc2-about #qualifications-achievements .btc2-credentials-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.72fr) !important;
    align-items: start !important;
    gap: clamp(38px, 4.5vw, 66px) !important;
    margin-top: clamp(46px, 5vw, 68px) !important;
}

.btc2-about #qualifications-achievements .btc2-research-card {
    top: 156px !important;
}

/* Compact the desktop hero so the complete introduction is visible sooner. */
@media (min-width: 1100px) {
    .btc2-about .btc2-hero {
        padding: 26px 0 78px !important;
    }

    .btc2-about .btc2-breadcrumb {
        margin-bottom: 34px !important;
    }

    .btc2-about .btc2-hero-grid {
        grid-template-columns: minmax(0, 1.04fr) minmax(430px, 0.86fr) !important;
        align-items: center !important;
        gap: clamp(48px, 5.5vw, 82px) !important;
    }

    .btc2-about .btc2-hero-copy {
        max-width: 690px !important;
        padding-bottom: 0 !important;
    }

    .btc2-about .btc2-hero h1 {
        max-width: 720px !important;
        font-size: clamp(54px, 4.7vw, 72px) !important;
        line-height: 1.015 !important;
        letter-spacing: -0.044em !important;
    }

    .btc2-about .btc2-hero-copy > p {
        max-width: 650px !important;
        margin-top: 28px !important;
        font-size: clamp(16px, 1.08vw, 18px) !important;
        line-height: 1.68 !important;
    }

    .btc2-about .btc2-actions {
        margin-top: 30px !important;
    }

    .btc2-about .btc2-inline-note {
        margin-top: 22px !important;
    }

    .btc2-about .btc2-hero-media {
        max-width: 500px !important;
        min-height: clamp(540px, 43vw, 620px) !important;
    }

    .btc2-about .btc2-trust-strip {
        margin-top: 44px !important;
    }

    .btc2-about #qualifications-achievements {
        padding-top: clamp(86px, 7vw, 108px) !important;
    }

    .btc2-about #qualifications-achievements .btc2-section-heading {
        align-items: start !important;
        margin-bottom: 40px !important;
    }

    .btc2-about #qualifications-achievements .btc2-section-intro {
        padding-top: 22px !important;
    }
}

/* Standard laptop: two rows maintain comfortable text width. */
@media (min-width: 900px) and (max-width: 1279px) {
    .btc2-about #qualifications-achievements .btc2-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .btc2-about #qualifications-achievements .btc2-feature-card {
        min-height: 210px !important;
    }
}

/* Tablet: cards remain two-up, detailed content becomes one column. */
@media (min-width: 760px) and (max-width: 1099px) {
    .btc2-about #qualifications-achievements {
        scroll-margin-top: 124px !important;
    }

    .btc2-about #qualifications-achievements .btc2-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .btc2-about #qualifications-achievements .btc2-credentials-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 34px !important;
    }

    .btc2-about #qualifications-achievements .btc2-research-card {
        position: static !important;
    }
}

/* Mobile: preserve the approved single-column layout and chronological order. */
@media (max-width: 759px) {
    .btc2-about #qualifications-achievements {
        scroll-margin-top: 96px !important;
    }

    .btc2-about #qualifications-achievements .btc2-feature-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .btc2-about #qualifications-achievements .btc2-feature-card {
        min-height: 0 !important;
        padding: 20px !important;
    }

    .btc2-about #qualifications-achievements .btc2-feature-card small {
        margin-top: 22px !important;
    }

    .btc2-about #qualifications-achievements .btc2-credentials-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 30px !important;
        margin-top: 34px !important;
    }

    .btc2-about #qualifications-achievements .btc2-research-card {
        position: static !important;
    }
}


/* ============================================================================
   About Page Release: 2.4.2
   Desktop / Tablet / Mobile qualification-card parity fix.
   - Removes the dark-green styling from the 2014 qualification card.
   - Keeps all four cards visually consistent at every breakpoint.
   - Preserves the approved responsive layout from v2.4.1.
============================================================================ */

.btc2-about #qualifications-achievements .btc2-feature-grid {
    align-items: stretch !important;
}

.btc2-about #qualifications-achievements .btc2-feature-card-dark {
    background: #ffffff !important;
    color: #23473f !important;
    border: 1px solid rgba(35, 71, 63, 0.08) !important;
    box-shadow: 0 16px 36px rgba(18, 47, 39, 0.06) !important;
}

.btc2-about #qualifications-achievements .btc2-feature-card-dark > span {
    background: #ecf2ee !important;
    color: #245649 !important;
}

.btc2-about #qualifications-achievements .btc2-feature-card-dark small {
    color: #2f6a59 !important;
}

.btc2-about #qualifications-achievements .btc2-feature-card-dark h3 {
    color: #173f35 !important;
}

.btc2-about #qualifications-achievements .btc2-feature-card-dark p {
    color: #536c64 !important;
}

@media (max-width: 1099px) {
    .btc2-about #qualifications-achievements .btc2-feature-card,
    .btc2-about #qualifications-achievements .btc2-feature-card-dark {
        min-height: 0 !important;
        height: auto !important;
    }
}

/* ============================================================================
   BLESSINGS THERAPY CENTRE — ABOUT / ABOUT US
   RESPONSIVE STABILISATION RELEASE 2.5.0

   This final block intentionally uses scoped, high-specificity declarations.
   The live WordPress site still contains legacy Additional CSS, so these rules
   must remain at the absolute end of about-page.css.
============================================================================ */

/* --------------------------------------------------------------------------
   1. Page-wide containment and text safety
   -------------------------------------------------------------------------- */

.btc2-about {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
}

.btc2-about,
.btc2-about *,
.btc2-about *::before,
.btc2-about *::after {
    box-sizing: border-box !important;
}

.btc2-about :where(img, svg, video, iframe) {
    max-width: 100% !important;
}

.btc2-about :where(h1, h2, h3, h4, p, li, a, strong, span, small) {
    overflow-wrap: break-word;
    word-break: normal;
}

.btc2-about .btc2-container {
    width: min(calc(100% - clamp(28px, 4vw, 56px)), 1320px) !important;
    max-width: 1320px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
}

.btc2-about :where(
    .btc2-hero-grid,
    .btc2-difference-intro,
    .btc2-difference-story,
    .btc2-section-heading,
    .btc2-split,
    .btc2-feature-grid,
    .btc2-credentials-layout,
    .btc2-quote-layout,
    .btc2-pillars-grid,
    .btc2-process-head,
    .btc2-process-grid,
    .btc2-expertise-layout,
    .btc2-topic-grid,
    .btc2-values-grid,
    .btc2-stat-grid,
    .btc2-metrics,
    .btc2-mission-grid,
    .btc2-cta-grid
) > * {
    min-width: 0 !important;
    max-width: 100%;
}

/* Keep hash-navigation targets clear of the sticky header. */
.btc2-about #qualifications-achievements {
    scroll-margin-top: 184px !important;
}

/* --------------------------------------------------------------------------
   2. Hero — badges are separate information cards, never image overlays
   -------------------------------------------------------------------------- */

.btc2-about .btc2-hero .btc2-hero-grid {
    align-items: center !important;
}

.btc2-about .btc2-hero .btc2-hero-media {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 14px !important;
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    min-height: 0 !important;
    height: auto !important;
    margin-inline: auto !important;
    overflow: visible !important;
}

/* Remove decorative layers that were expanding the media box and causing
   inconsistent overlap across desktop, tablet and mobile. */
.btc2-about .btc2-hero .btc2-hero-media::before,
.btc2-about .btc2-hero .btc2-hero-media::after {
    display: none !important;
}

.btc2-about .btc2-hero .btc2-hero-media .btc2-image-card {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 4.72 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 10px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: clamp(28px, 5vw, 46px) !important;
    background: #dce9e2 !important;
    box-shadow: 0 28px 70px rgba(24, 57, 46, 0.16) !important;
}

.btc2-about .btc2-hero .btc2-hero-media .btc2-image-card img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center 18% !important;
    transform: none !important;
}

.btc2-about .btc2-hero .btc2-image-caption {
    position: absolute !important;
    inset: auto 18px 18px 18px !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 12px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    border-radius: 18px !important;
    background: rgba(22, 55, 45, 0.88) !important;
    color: #ffffff !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.btc2-about .btc2-hero .btc2-image-caption strong {
    min-width: 0 !important;
    color: #ffffff !important;
    font-size: clamp(20px, 2vw, 28px) !important;
    line-height: 1.12 !important;
}

.btc2-about .btc2-hero .btc2-image-caption span {
    max-width: 170px !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    text-align: right !important;
}

.btc2-about .btc2-hero .btc2-hero-media .btc2-badge,
.btc2-about .btc2-hero .btc2-hero-media .btc2-badge-a,
.btc2-about .btc2-hero .btc2-hero-media .btc2-badge-b {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: grid !important;
    align-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 92px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(33, 75, 61, 0.12) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 34px rgba(24, 57, 46, 0.09) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.btc2-about .btc2-hero .btc2-hero-media .btc2-badge strong {
    color: #173c31 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(18px, 1.45vw, 22px) !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
}

.btc2-about .btc2-hero .btc2-hero-media .btc2-badge span {
    color: #687a73 !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    letter-spacing: 0.055em !important;
    line-height: 1.4 !important;
}

/* --------------------------------------------------------------------------
   3. Qualifications — all four cards use one consistent light design
   -------------------------------------------------------------------------- */

.btc2-about #qualifications-achievements .btc2-feature-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: clamp(14px, 1.5vw, 20px) !important;
    width: 100% !important;
}

.btc2-about #qualifications-achievements .btc2-feature-card,
.btc2-about #qualifications-achievements .btc2-feature-card-dark,
.btc2-about #qualifications-achievements .btc2-feature-grid > article:first-child {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 248px !important;
    height: auto !important;
    padding: clamp(22px, 2vw, 28px) !important;
    border: 1px solid rgba(33, 75, 61, 0.11) !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #20342d !important;
    box-shadow: 0 16px 38px rgba(24, 57, 46, 0.07) !important;
}

.btc2-about #qualifications-achievements .btc2-feature-card > span,
.btc2-about #qualifications-achievements .btc2-feature-card-dark > span,
.btc2-about #qualifications-achievements .btc2-feature-grid > article:first-child > span {
    align-self: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    background: #edf4ef !important;
    color: #245649 !important;
}

.btc2-about #qualifications-achievements .btc2-feature-card small,
.btc2-about #qualifications-achievements .btc2-feature-card-dark small,
.btc2-about #qualifications-achievements .btc2-feature-grid > article:first-child small {
    margin-top: 28px !important;
    color: #2f6a59 !important;
}

.btc2-about #qualifications-achievements .btc2-feature-card h3,
.btc2-about #qualifications-achievements .btc2-feature-card-dark h3,
.btc2-about #qualifications-achievements .btc2-feature-grid > article:first-child h3 {
    margin-top: 9px !important;
    color: #173f35 !important;
    font-size: clamp(23px, 1.75vw, 29px) !important;
    line-height: 1.16 !important;
}

.btc2-about #qualifications-achievements .btc2-feature-card p,
.btc2-about #qualifications-achievements .btc2-feature-card-dark p,
.btc2-about #qualifications-achievements .btc2-feature-grid > article:first-child p {
    margin-top: 11px !important;
    color: #536c64 !important;
    font-size: 13px !important;
    line-height: 1.58 !important;
}

/* --------------------------------------------------------------------------
   4. Desktop and large laptop
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
    .btc2-about .btc2-hero .btc2-hero-grid {
        grid-template-columns: minmax(0, 1.04fr) minmax(460px, 0.86fr) !important;
        gap: clamp(48px, 5.5vw, 82px) !important;
    }

    .btc2-about .btc2-hero .btc2-hero-copy {
        max-width: 700px !important;
    }

    .btc2-about .btc2-hero .btc2-hero-media {
        justify-self: end !important;
    }

    .btc2-about .btc2-section-heading {
        grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr) !important;
    }

    .btc2-about #qualifications-achievements .btc2-credentials-layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.72fr) !important;
    }
}

/* --------------------------------------------------------------------------
   5. Tablet landscape and small laptop
   -------------------------------------------------------------------------- */

@media (min-width: 900px) and (max-width: 1199px) {
    .btc2-about .btc2-hero .btc2-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(390px, 0.82fr) !important;
        gap: 40px !important;
    }

    .btc2-about .btc2-hero .btc2-hero-media {
        width: min(100%, 500px) !important;
    }

    .btc2-about .btc2-hero h1 {
        font-size: clamp(48px, 5.7vw, 64px) !important;
    }

    .btc2-about #qualifications-achievements .btc2-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .btc2-about #qualifications-achievements .btc2-feature-card,
    .btc2-about #qualifications-achievements .btc2-feature-card-dark {
        min-height: 220px !important;
    }

    .btc2-about #qualifications-achievements .btc2-credentials-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .btc2-about #qualifications-achievements .btc2-research-card {
        position: static !important;
        top: auto !important;
    }
}

/* --------------------------------------------------------------------------
   6. Tablet portrait
   -------------------------------------------------------------------------- */

@media (min-width: 640px) and (max-width: 899px) {
    .btc2-about #qualifications-achievements {
        scroll-margin-top: 132px !important;
    }

    .btc2-about .btc2-hero .btc2-hero-grid,
    .btc2-about .btc2-section-heading,
    .btc2-about .btc2-split,
    .btc2-about .btc2-quote-layout,
    .btc2-about .btc2-credentials-layout,
    .btc2-about .btc2-cta-grid,
    .btc2-about .btc2-difference-intro,
    .btc2-about .btc2-difference-story {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .btc2-about .btc2-hero .btc2-hero-media {
        width: min(100%, 620px) !important;
        justify-self: center !important;
    }

    .btc2-about #qualifications-achievements .btc2-feature-grid,
    .btc2-about .btc2-values-grid,
    .btc2-about .btc2-pillars-grid,
    .btc2-about .btc2-process-grid,
    .btc2-about .btc2-topic-grid,
    .btc2-about .btc2-stat-grid,
    .btc2-about .btc2-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .btc2-about .btc2-expertise-layout,
    .btc2-about .btc2-mission-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .btc2-about #qualifications-achievements .btc2-research-card {
        position: static !important;
        top: auto !important;
    }
}

/* --------------------------------------------------------------------------
   7. Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 639px) {
    .btc2-about #qualifications-achievements {
        scroll-margin-top: 102px !important;
    }

    .btc2-about .btc2-container {
        width: calc(100% - 28px) !important;
    }

    .btc2-about .btc2-hero .btc2-hero-grid,
    .btc2-about .btc2-section-heading,
    .btc2-about .btc2-split,
    .btc2-about .btc2-quote-layout,
    .btc2-about .btc2-credentials-layout,
    .btc2-about .btc2-cta-grid,
    .btc2-about .btc2-difference-intro,
    .btc2-about .btc2-difference-story,
    .btc2-about .btc2-process-head,
    .btc2-about .btc2-expertise-layout,
    .btc2-about .btc2-mission-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .btc2-about .btc2-hero .btc2-hero-media {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 470px !important;
        gap: 10px !important;
    }

    .btc2-about .btc2-hero .btc2-hero-media .btc2-image-card {
        aspect-ratio: 4 / 4.8 !important;
        border-width: 7px !important;
        border-radius: 28px !important;
    }

    .btc2-about .btc2-hero .btc2-image-caption {
        inset: auto 12px 12px 12px !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 4px !important;
        padding: 13px 14px !important;
    }

    .btc2-about .btc2-hero .btc2-image-caption span {
        max-width: none !important;
        text-align: left !important;
    }

    .btc2-about .btc2-hero .btc2-hero-media .btc2-badge,
    .btc2-about .btc2-hero .btc2-hero-media .btc2-badge-a,
    .btc2-about .btc2-hero .btc2-hero-media .btc2-badge-b {
        min-height: 0 !important;
        padding: 15px 16px !important;
    }

    .btc2-about #qualifications-achievements .btc2-feature-grid,
    .btc2-about .btc2-values-grid,
    .btc2-about .btc2-pillars-grid,
    .btc2-about .btc2-process-grid,
    .btc2-about .btc2-topic-grid,
    .btc2-about .btc2-stat-grid,
    .btc2-about .btc2-metrics {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .btc2-about #qualifications-achievements .btc2-feature-card,
    .btc2-about #qualifications-achievements .btc2-feature-card-dark {
        min-height: 0 !important;
        padding: 20px !important;
    }

    .btc2-about #qualifications-achievements .btc2-feature-card small,
    .btc2-about #qualifications-achievements .btc2-feature-card-dark small {
        margin-top: 21px !important;
    }

    .btc2-about #qualifications-achievements .btc2-research-card {
        position: static !important;
        top: auto !important;
    }
}

@media (max-width: 390px) {
    .btc2-about .btc2-container {
        width: calc(100% - 22px) !important;
    }

    .btc2-about .btc2-hero h1,
    .btc2-about .btc2-section-heading h2,
    .btc2-about .btc2-doctor-copy h2,
    .btc2-about .btc2-difference-heading h2,
    .btc2-about .btc2-cta h2 {
        font-size: 36px !important;
        line-height: 1.06 !important;
    }
}