/* ==========================================================
   SB Contact Hero — standalone widget styles.
   Reuses the theme's global tokens/fonts/buttons (sb-global.css)
   and shared helpers (sb-sections.css: .sb-hl, .sb-mini-ico,
   .sb-reveal, .sb-bgimg). Everything here is scoped under
   .sb-chero so it never touches any other widget's classes.
   ========================================================== */

.sb-chero {
	position: relative;
	overflow: hidden;
	font-family: var(--sb-font);
	/* Plain white, like the other "top of page" sections (e.g. SB About
	   Intro) — no green-tinted gradient wash, so it sits flush with
	   Astra's own white page background instead of looking like a
	   different shade right under the header. */
	background: var(--sb-white);
	padding: 28px 0 56px;
}
.sb-chero * { box-sizing: border-box; }
.sb-chero a { text-decoration: none; box-shadow: none; }
.sb-chero :is(h1, h2, h3, p, ul) { margin: 0; padding: 0; font-family: var(--sb-font); }
.sb-chero ul { list-style: none; }

/* Soft decorative dot/radial pattern in the background, far left. */
.sb-chero__dots {
	position: absolute;
	left: -8%;
	top: -10%;
	width: 50%;
	height: 90%;
	background:
		radial-gradient(circle at 20% 30%, rgba(29, 107, 44, .08) 0, transparent 60%),
		radial-gradient(circle at 60% 70%, rgba(29, 107, 44, .06) 0, transparent 55%);
	pointer-events: none;
	z-index: 0;
}

/* ---------- Breadcrumb ---------- */
.sb-chero__crumb {
	position: relative;
	z-index: 1;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
	font-size: 13.5px;
	color: var(--sb-text);
}
.sb-chero__crumb-link { color: var(--sb-text); font-weight: 500; transition: color .25s var(--sb-ease); }
.sb-chero__crumb-link:hover { color: var(--sb-green); }
.sb-chero__crumb-cur { color: var(--sb-heading); font-weight: 600; }
.sb-chero__crumb-sep { font-size: 9px; color: #b9c2bb; display: inline-flex; }

/* ---------- Layout ---------- */
.sb-chero__inner {
	position: relative;
	z-index: 1;
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px 24px 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 40px;
}

/* ---------- Eyebrow ---------- */
.sb-chero__eyebrow {
	display: inline-block;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sb-green);
	margin: 0 0 12px;
}

/* ---------- Title ---------- */
.sb-chero__title {
	font-weight: 800;
	font-size: clamp(32px, 4vw, 50px);
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--sb-heading);
	margin: 0 0 30px;
	position: relative;
	padding-bottom: 22px;
}
.sb-chero__title::after {
	content: "";
	position: absolute;
	left: 2px;
	bottom: 10px;
	width: 54px;
	height: 3px;
	border-radius: 3px;
	background: var(--sb-orange);
}
.sb-chero__title .sb-hl { color: var(--sb-green); }

.sb-chero__text {
	font-size: var(--sb-body, 16px);
	line-height: 1.7;
	color: var(--sb-text);
	max-width: 48ch;
	margin: 0 0 8px;
}

/* ---------- Mini features ---------- */
.sb-chero__feats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-top: 26px !important; }
.sb-chero__feat { display: flex; align-items: center; gap: 10px; }
.sb-chero__feat .sb-mini-ico { width: 34px; height: 34px; font-size: 14px; }
.sb-chero__feat-title, .sb-chero__feat-text { display: block; }
.sb-chero__feat-title { font-size: 13.5px; font-weight: 700; color: var(--sb-heading); line-height: 1.3; }
.sb-chero__feat-text { font-size: 12px; color: var(--sb-text); line-height: 1.3; }
.sb-chero__feat:hover .sb-mini-ico { background: var(--sb-green); color: #fff; }

/* ---------- Media: photo + the theme's own rotated "band" vector accents ----------
   .sb-why__band is the same reusable rounded-rectangle, rotated-45deg shape
   the theme already uses in Why Choose Us / Process / FAQ (see sb-sections.css,
   "Rounded diamond image frame"). Reusing it here (instead of a one-off shape)
   keeps every decorative accent on the site visually identical. */
.sb-chero__media { position: relative; min-height: 360px; align-self: stretch; }
.sb-chero__img {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: #16261c center / cover no-repeat;
	border-radius: 20px;
	box-shadow: var(--sb-shadow);
}
.sb-chero__img:not([style*="background-image"]) {
	background: linear-gradient(135deg, var(--sb-green-soft), #dfeee1);
}

.sb-chero__band { position: absolute; z-index: 0; }
/* Small band peeking out top-right (behind the photo's top-right corner). */
.sb-chero__band--a {
	top: -10%;
	right: -4%;
	width: 90px;
	height: 42%;
	border-radius: 40px;
	transform: rotate(45deg);
	background: linear-gradient(180deg, #b8e2b6, var(--sb-green-light));
}
/* Larger band peeking out bottom-right, darker green (matches reference). */
.sb-chero__band--b {
	bottom: -14%;
	right: 6%;
	width: 120px;
	height: 60%;
	border-radius: 50px;
	transform: rotate(45deg);
	background: linear-gradient(180deg, var(--sb-green-light), var(--sb-green-dark));
	opacity: .95;
}

@media (max-width: 1024px) {
	.sb-chero__inner { grid-template-columns: 1fr; gap: 32px; }
	.sb-chero__media { order: -1; min-height: 300px; }
	.sb-chero__dots { display: none; }
}

@media (max-width: 600px) {
	.sb-chero { padding: 20px 0 40px; }
	.sb-chero__feats { grid-template-columns: 1fr; gap: 16px; }
}