/* Home page (index.html) — hero, quick-service tiles, about, partners. */

.hero {
	background-color: var(--color-surface);
	padding: 27px 0 18px;
	text-align: center;
}

.hero__title {
	display: inline-block;
	font-size: clamp(28px, 5vw, 44px);
	letter-spacing: 1px;
	background: linear-gradient(135deg, #4b006e, #8b5e00, #e4c203);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transition: font-size var(--transition);
}

.hero__title:hover {
	border-bottom: 1px solid var(--color-text);
}

/* Quick service tiles ------------------------------------------------------ */

.quick-services {
	background-color: var(--color-surface);
	padding: 40px 0;
}

.quick-services .container {
	max-width: 1440px;
}

.quick-services__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

.quick-services__item {
	position: relative;
	width: 442px;
	max-width: 100%;
	height: 286px;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.quick-services__item a {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 100%;
	padding: 20px;
	color: var(--color-text-invert);
	font-size: 1.2rem;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: font-size var(--transition);
}

.quick-services__item a::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.22);
}

.quick-services__item a span {
	position: relative;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

.quick-services__item:hover a {
	font-size: 1.3rem;
}

.quick-services__item--commercial a {
	background-image: url(../../img/construction.jpg);
}

.quick-services__item--life a {
	background-image: url(../../img/life_ins__banner_opt_2.png);
}

.quick-services__item--pension a {
	background-image: url(../../img/Pensions.jpg);
}

/* Shared .about-blurb and .logo-row rules live in CSS/site.css, since both
   sections repeat on every page unchanged. */