.clinics .hero {
	position: relative; overflow: hidden;
	width: 100%;
	height: 100vh;
	min-height: 780px;
	padding-block: 100px 60px;
}

.clinics .hero > img {
	position: absolute; inset: 0;
	object-fit: contain; z-index: -1;
}


.clinics .hero .hero-gradient,
.clinics .hero .hero-fade-bottom {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.clinics .hero .hero-gradient {
	left: 12%;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.00) 0%, #FFF 83.17%);
	z-index: -1;
}

.clinics .hero .hero-fade-bottom {
	top: auto; height: 220px; bottom: 0;
	background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
	z-index: 3;
}


.hero-grid {
	display: grid;
	grid-template-columns: minmax(440px, 0.95fr) 1.05fr;
	align-items: center;
	gap: 32px;
	min-height: calc(88vh - 120px);
	padding-block: 40px 30px;
}

.hero-title {
	font-weight: 700;
	font-size: 79px;
	line-height: 1.08;
	color: #232323;
	letter-spacing: -.5px;
}
.hero-subtitle {
	font-weight: 700;
	font-size: 37px;
	color: #232323;
}
.hero-text {
	margin: .7rem 0;
	font-size: 20px;
	color: #232323;
	max-width: 45ch;
	text-shadow: 0 0 1px white;
	border-bottom: 8px solid #9edfd088;
	padding-bottom: .8rem;
}

.hero-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 30px;
	flex-wrap: wrap;
}

/* buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	height: 3.5rem;
	font-weight: 500;
	font-size: 18px;
	padding: 14px 26px;
	border-radius: 999px;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}
.btn i {width: 20px; margin-top: 3px;}
.btn-ico { width: 20px; height: 20px; }
.btn-ico svg { width: 100%; height: 100%; }

.btn-primary {
	background: linear-gradient(90deg, var(--mint-1), var(--mint-2));
	color: var(--teal);
	box-shadow: 0 16px 30px -16px rgba(31,79,73,.55);
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.04); }

.btn-ghost {
	background: rgba(255,255,255,.9);
	color: #3a444e;
	border: 1px solid #dfe5e8;
	box-shadow: 0 16px 30px -16px rgba(31,79,73,.55);
}
.btn-ghost:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-soft); }

/* location card (sits bottom / end side of hero) */
.hero-aside {
	align-self: end;
	justify-self: end;          /* end = left in RTL */
	padding-bottom: 26px;
}
.location-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 230px;
	padding: 34px 20px 20px;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	text-align: center;
}
.location-card p {margin-bottom: 0;}

.clinics .hero .pin {
	width: 90px; height: 90px;
	display: grid; place-items: center;
	border-radius: 50%;
	margin-top: -80px; margin-bottom: .5rem;
	background: linear-gradient(135deg, var(--mint-1), var(--mint-2));
	color: var(--teal);
	box-shadow: 0 10px 20px -10px rgba(31,79,73,.5); cursor: pointer;
}
.clinics .hero .pin:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(31,79,73,.7); }
.clinics .hero .pin svg { width: 50px; height: 50px; }

.loc-title { font-weight: 700; color: black; font-size: 18px; }
.loc-addr  { color: black; font-size: 18px; }

@media screen and (max-width: 40em) {
	.clinics .hero {padding-block: 20px;}
	.clinics .hero > img {object-fit: cover; height: 100%;}
	.hero-subtitle {font-size: 22px;}
	.hero-text {line-height: 1.4; font-size: 17px;}
	.hero-grid {gap: 2rem;}
	.hero-content {padding: 0 1rem;}
	.hero-aside {justify-self: end !important; margin-left: 1rem;}
	.location-card {padding: 12px; z-index: 3;}
	.clinics .hero .pin {width: 60px; height: 60px; margin-top: -44px;}
	.clinics .hero .pin svg {width: 40px; height: 40px;}
}