@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap");

/* ── Design tokens ── */
.ehi-service-banner {
	--ehi-sb-accent:          #c8102e;
	--ehi-sb-text:            #ffffff;
	--ehi-sb-font-heading:    "Bebas Neue", "Arial Black", sans-serif;
	--ehi-sb-font-body:       "Inter", "Helvetica Neue", Arial, sans-serif;
	--ehi-sb-overlay-opacity: 0.55;
}

/* ── Section shell ── */
.ehi-service-banner {
	position:         relative;
	background-color: #0a0a0b;
	background-size:  cover;
	background-position: center center;
	background-repeat:   no-repeat;
	padding-block:    clamp(80px, 10vw, 160px);
	overflow:         hidden;
	isolation:        isolate;
}

/* Dark gradient + diagonal pattern overlay */
.ehi-service-banner::before {
	content:        "";
	position:       absolute;
	inset:          0;
	z-index:        0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 80% 50% at 50% 0%,   rgba(200, 16, 46, 0.10), transparent 65%),
		radial-gradient(ellipse 55% 70% at 0%  100%,  rgba(0, 0, 0, 0.50),     transparent 55%),
		repeating-linear-gradient(
			-45deg,
			transparent,
			transparent 28px,
			rgba(255, 255, 255, 0.012) 28px,
			rgba(255, 255, 255, 0.012) 29px
		),
		rgba(10, 10, 11, var(--ehi-sb-overlay-opacity));
}

/* Faint horizon line */
.ehi-service-banner::after {
	content:          "";
	position:         absolute;
	left:             0;
	right:            0;
	top:              38%;
	height:           1px;
	background:       rgba(255, 255, 255, 0.04);
	pointer-events:   none;
	z-index:          0;
}

/* ── Inner container ── */
.ehi-sb-inner {
	position:       relative;
	z-index:        1;
	width:          min(100%, 1100px);
	margin:         0 auto;
	padding-inline: clamp(20px, 4vw, 56px);
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
}

/* ── Alignment modifiers ── */
.ehi-sb-inner--left   { align-items: flex-start; text-align: left; }
.ehi-sb-inner--center { align-items: center;     text-align: center; }
.ehi-sb-inner--right  { align-items: flex-end;   text-align: right; }

/* Breadcrumb pill stays inline regardless of alignment */
.ehi-sb-inner--center .ehi-sb-crumbs,
.ehi-sb-inner--right  .ehi-sb-crumbs { margin-inline: 0; }

/* ── Eyebrow ── */
.ehi-sb-eyebrow {
	font-family:    var(--ehi-sb-font-body);
	font-size:      13px;
	font-weight:    500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color:          #b9b9b3;
	margin:         0 0 10px;
}

/* ── Location ── */
.ehi-sb-location {
	font-family:    var(--ehi-sb-font-heading);
	font-size:      clamp(28px, 3.5vw, 44px);
	font-weight:    400;
	letter-spacing: 0.06em;
	line-height:    1.1;
	color:          var(--ehi-sb-text);
	margin:         0 0 14px;
}

/* ── Heading ── */
.ehi-sb-heading {
	font-family:    var(--ehi-sb-font-heading);
	font-size:      clamp(48px, 8vw, 110px);
	font-weight:    400;
	letter-spacing: 0.02em;
	line-height:    0.96;
	color:          var(--ehi-sb-text);
	text-transform: uppercase;
	margin:         0 0 20px;
}

/* ── Accent rule ── */
.ehi-sb-rule {
	width:      80px;
	height:     3px;
	background: var(--ehi-sb-accent);
	border:     none;
	border-radius: 2px;
	margin:     0 0 20px;
}

/* ── Classes line ── */
.ehi-sb-classes {
	font-family:    var(--ehi-sb-font-body);
	font-size:      clamp(15px, 1.4vw, 19px);
	font-weight:    400;
	letter-spacing: 0.05em;
	color:          rgba(255, 255, 255, 0.80);
	margin:         0 0 28px;
}

/* ── Breadcrumb pill ── */
.ehi-sb-crumbs {
	display:             inline-flex;
	align-items:         center;
	gap:                 8px;
	font-family:         var(--ehi-sb-font-body);
	font-size:           13px;
	font-weight:         400;
	color:               rgba(255, 255, 255, 0.75);
	background:          rgba(255, 255, 255, 0.08);
	backdrop-filter:     blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border:              1px solid rgba(255, 255, 255, 0.12);
	border-radius:       999px;
	padding:             7px 18px;
	margin:              0;
	text-decoration:     none;
}

.ehi-sb-crumbs a {
	color:           rgba(255, 255, 255, 0.75);
	text-decoration: none;
	transition:      color 0.2s ease;
}

.ehi-sb-crumbs a:hover {
	color: #ffffff;
}

.ehi-sb-crumbs [aria-hidden] {
	color: rgba(255, 255, 255, 0.40);
}

/* ── Responsive ── */
@media (max-width: 768px) {
	.ehi-sb-heading {
		font-size: clamp(40px, 12vw, 72px);
	}
}

@media (max-width: 480px) {
	.ehi-sb-eyebrow {
		font-size: 11px;
	}

	.ehi-sb-classes {
		font-size: 13px;
	}

	.ehi-sb-crumbs {
		font-size: 12px;
		padding:   6px 14px;
	}
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	.ehi-sb-crumbs a {
		transition: none;
	}
}