.jah-wrap {
	--jah-title: #111827;
	--jah-accent: #002cb4;
	--jah-accent-2: #ff7b00;
	--jah-hover: #ff7b00;
	--jah-angle: 110deg;
	--jah-deco-length: 54px;
	--jah-line: 3px;
	--jah-gap: 14px;
	--jah-radius: 16px;
	--jah-duration: 650ms;
	--jah-align: start;
	position: relative;
	width: 100%;
	color: var(--jah-title);
	isolation: isolate;
}

.jah-wrap[dir="auto"] { direction: inherit; }
.jah-wrap[dir="rtl"] { direction: rtl; }
.jah-wrap[dir="ltr"] { direction: ltr; }

.jah-shell {
	position: relative;
	width: 100%;
	margin-inline: auto;
	transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.jah-title-row,
.jah-meta-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--jah-gap);
	justify-content: var(--jah-align);
}

.jah-meta-row { min-height: 1px; }

.jah-title {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: 0;
	color: var(--jah-title);
	line-height: 1.25;
	font-size: clamp(2rem, 5vw, 4.5rem);
	font-weight: 800;
	word-break: normal;
	overflow-wrap: anywhere;
}

.jah-title-link {
	color: inherit;
	text-decoration: none;
}

.jah-title-before,
.jah-highlight,
.jah-title-after {
	position: relative;
	display: inline;
}

.jah-highlight {
	z-index: 1;
	color: var(--jah-accent);
	transition: color .28s ease, background-position .55s ease, transform .28s ease;
}

.jah-highlight-break .jah-highlight { display: block; width: fit-content; }
.jah-after-break .jah-title-after { display: block; }

.jah-eyebrow {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1.4;
}

.jah-description {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 70ch;
	line-height: 1.9;
	margin-inline: 0;
}

.jah-ornament {
	position: relative;
	display: none;
	flex: 0 1 var(--jah-deco-length);
	width: var(--jah-deco-length);
	height: var(--jah-line);
	background: var(--jah-accent);
	border-radius: 99px;
}

.jah-rail,
.jah-corner { display: none; }

.jah-number {
	position: absolute;
	z-index: 0;
	inset-block-start: -0.48em;
	inset-inline-start: -0.08em;
	font-size: clamp(5rem, 14vw, 12rem);
	font-weight: 900;
	line-height: 1;
	color: color-mix(in srgb, var(--jah-accent) 9%, transparent);
	user-select: none;
	pointer-events: none;
}

.jah-icon {
	position: relative;
	z-index: 2;
	display: inline-grid;
	place-items: center;
	width: 2.4em;
	height: 2.4em;
	flex: 0 0 auto;
	color: #fff;
	background: linear-gradient(var(--jah-angle), var(--jah-accent), var(--jah-accent-2));
	border-radius: 50%;
	box-shadow: 0 12px 28px color-mix(in srgb, var(--jah-accent) 30%, transparent);
}

.jah-icon i { color: inherit; }
.jah-icon svg { fill: currentColor; }

/* 01 — Minimal line */
.jah-preset-minimal-line .jah-title-row::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: calc(var(--jah-line) * -2.5);
	width: var(--jah-deco-length);
	height: var(--jah-line);
	background: linear-gradient(90deg, var(--jah-accent), var(--jah-accent-2));
	border-radius: 99px;
	transition: width .35s ease;
}
.jah-preset-minimal-line:hover .jah-title-row::after { width: calc(var(--jah-deco-length) * 1.45); }

/* 02 — Center lines */
.jah-preset-center-lines .jah-ornament { display: block; }
.jah-preset-center-lines .jah-title-row { justify-content: center; }
.jah-preset-center-lines .jah-ornament-end { background: var(--jah-accent-2); }

/* 03 — Gradient */
.jah-preset-gradient .jah-title,
.jah-preset-gradient .jah-title-link {
	background: linear-gradient(var(--jah-angle), var(--jah-title) 5%, var(--jah-accent) 48%, var(--jah-accent-2) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.jah-preset-gradient .jah-highlight { color: inherit; }

/* 04 — Marker */
.jah-preset-marker .jah-highlight {
	padding-inline: .12em;
	background: linear-gradient(to top, color-mix(in srgb, var(--jah-accent) 28%, transparent) 0 42%, transparent 42% 100%);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* 05 — Brush underline */
.jah-preset-brush .jah-highlight::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-inline: -4%;
	inset-block-end: -.08em;
	height: .24em;
	background: var(--jah-accent-2);
	clip-path: polygon(1% 42%, 9% 25%, 20% 36%, 32% 16%, 48% 29%, 63% 10%, 77% 30%, 91% 17%, 100% 42%, 96% 76%, 82% 67%, 65% 90%, 48% 68%, 31% 92%, 14% 70%, 2% 83%);
	transform: scaleX(.72) rotate(-1deg);
	transform-origin: center;
	opacity: .8;
	transition: transform .45s ease;
}
.jah-preset-brush:hover .jah-highlight::after { transform: scaleX(1) rotate(-1deg); }

/* 06 — Framed box */
.jah-preset-boxed .jah-shell {
	padding: clamp(20px, 4vw, 46px);
	border: var(--jah-line) solid color-mix(in srgb, var(--jah-accent) 70%, transparent);
	border-radius: var(--jah-radius);
	background: color-mix(in srgb, var(--jah-accent) 4%, transparent);
}
.jah-preset-boxed .jah-shell::before,
.jah-preset-boxed .jah-shell::after {
	content: "";
	position: absolute;
	width: var(--jah-deco-length);
	height: var(--jah-line);
	background: var(--jah-accent-2);
}
.jah-preset-boxed .jah-shell::before { inset-block-start: calc(var(--jah-line) * -1); inset-inline-start: 10%; }
.jah-preset-boxed .jah-shell::after { inset-block-end: calc(var(--jah-line) * -1); inset-inline-end: 10%; }

/* 07 — Vertical rail */
.jah-preset-vertical-rail .jah-shell { padding-inline-start: calc(var(--jah-gap) + var(--jah-line) * 2); }
.jah-preset-vertical-rail .jah-rail {
	display: block;
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: calc(var(--jah-line) * 1.5);
	background: linear-gradient(to bottom, var(--jah-accent), var(--jah-accent-2));
	border-radius: 99px;
}

/* 08 — Split accent block */
.jah-preset-split-block .jah-highlight {
	display: inline-block;
	padding: .02em .22em .08em;
	color: #fff;
	background: var(--jah-accent);
	border-radius: calc(var(--jah-radius) * .35);
	box-shadow: .12em .12em 0 var(--jah-accent-2);
}

/* 09 — Outline */
.jah-preset-outline .jah-title {
	color: transparent;
	-webkit-text-stroke: max(1px, calc(var(--jah-line) * .45)) var(--jah-title);
	text-stroke: max(1px, calc(var(--jah-line) * .45)) var(--jah-title);
}
.jah-preset-outline .jah-highlight {
	color: var(--jah-accent);
	-webkit-text-stroke-color: var(--jah-accent);
}

/* 10 — Dimensional shadow */
.jah-preset-depth .jah-title {
	text-shadow:
		1px 1px 0 color-mix(in srgb, var(--jah-accent) 70%, #fff),
		2px 2px 0 color-mix(in srgb, var(--jah-accent) 58%, #fff),
		3px 3px 0 color-mix(in srgb, var(--jah-accent) 46%, #fff),
		6px 10px 22px color-mix(in srgb, var(--jah-title) 22%, transparent);
}

/* 11 — Neon */
.jah-preset-neon .jah-shell {
	padding: clamp(18px, 4vw, 42px);
	background: #050816;
	border: 1px solid color-mix(in srgb, var(--jah-accent) 52%, transparent);
	border-radius: var(--jah-radius);
	box-shadow: inset 0 0 35px color-mix(in srgb, var(--jah-accent) 9%, transparent);
}
.jah-preset-neon .jah-title { color: #fff; text-shadow: 0 0 8px color-mix(in srgb, var(--jah-accent) 70%, transparent); }
.jah-preset-neon .jah-highlight { color: #fff; text-shadow: 0 0 6px var(--jah-accent), 0 0 18px var(--jah-accent), 0 0 36px var(--jah-accent-2); }
.jah-preset-neon .jah-description { color: rgba(255,255,255,.68); }

/* 12 — Glass */
.jah-preset-glass .jah-shell {
	padding: clamp(20px, 4vw, 46px);
	background: linear-gradient(135deg, rgba(255,255,255,.38), rgba(255,255,255,.08));
	border: 1px solid rgba(255,255,255,.42);
	border-radius: var(--jah-radius);
	box-shadow: 0 24px 60px rgba(15,23,42,.12);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	overflow: hidden;
}
.jah-preset-glass .jah-shell::before {
	content: "";
	position: absolute;
	width: 180px;
	height: 180px;
	inset-block-start: -90px;
	inset-inline-end: -70px;
	background: radial-gradient(circle, color-mix(in srgb, var(--jah-accent) 35%, transparent), transparent 70%);
}

/* 13 — Brackets */
.jah-preset-brackets .jah-corner { display: block; position: absolute; width: var(--jah-deco-length); height: var(--jah-deco-length); }
.jah-preset-brackets .jah-corner-a { inset-block-start: 0; inset-inline-start: 0; border-block-start: var(--jah-line) solid var(--jah-accent); border-inline-start: var(--jah-line) solid var(--jah-accent); }
.jah-preset-brackets .jah-corner-b { inset-block-end: 0; inset-inline-end: 0; border-block-end: var(--jah-line) solid var(--jah-accent-2); border-inline-end: var(--jah-line) solid var(--jah-accent-2); }
.jah-preset-brackets .jah-shell { padding: clamp(18px, 4vw, 42px); }

/* 14 — Ribbon */
.jah-preset-ribbon .jah-eyebrow {
	padding: .5em 1em;
	color: #fff !important;
	background: linear-gradient(var(--jah-angle), var(--jah-accent), var(--jah-accent-2));
	border-radius: 999px;
	box-shadow: 0 8px 20px color-mix(in srgb, var(--jah-accent) 24%, transparent);
}

/* 15 — Numbered */
.jah-preset-numbered .jah-shell { padding-block: clamp(28px, 6vw, 80px); overflow: hidden; }
.jah-preset-numbered .jah-title,
.jah-preset-numbered .jah-description,
.jah-preset-numbered .jah-eyebrow { position: relative; z-index: 2; }

/* 16 — Editorial */
.jah-preset-editorial .jah-meta-row::after {
	content: "";
	flex: 1 1 80px;
	max-width: var(--jah-deco-length);
	height: 1px;
	background: currentColor;
	opacity: .35;
}
.jah-preset-editorial .jah-title { font-weight: 650; line-height: 1.05; }
.jah-preset-editorial .jah-highlight { font-style: italic; color: var(--jah-accent); }
.jah-preset-editorial .jah-description { padding-inline-start: clamp(18px, 4vw, 54px); border-inline-start: 1px solid color-mix(in srgb, var(--jah-title) 18%, transparent); }

/* 17 — Kinetic gradient */
.jah-preset-kinetic .jah-highlight {
	display: inline-block;
	background: linear-gradient(90deg, var(--jah-accent), var(--jah-accent-2), var(--jah-hover), var(--jah-accent));
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: jah-gradient-flow 5s linear infinite;
}
@keyframes jah-gradient-flow { to { background-position: 300% 0; } }

/* 18 — Double rule */
.jah-preset-double-rule .jah-shell {
	padding-block: calc(var(--jah-gap) * 1.25);
	border-block: var(--jah-line) solid var(--jah-accent);
}
.jah-preset-double-rule .jah-shell::before,
.jah-preset-double-rule .jah-shell::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	height: 1px;
	background: var(--jah-accent-2);
}
.jah-preset-double-rule .jah-shell::before { inset-block-start: calc(var(--jah-line) + 4px); }
.jah-preset-double-rule .jah-shell::after { inset-block-end: calc(var(--jah-line) + 4px); }

/* 19 — Spotlight */
.jah-preset-spotlight .jah-shell {
	padding: clamp(22px, 5vw, 58px);
	border-radius: var(--jah-radius);
	background:
		radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--jah-accent) 24%, transparent), transparent 30%),
		radial-gradient(circle at 20% 85%, color-mix(in srgb, var(--jah-accent-2) 18%, transparent), transparent 34%),
		color-mix(in srgb, var(--jah-title) 3%, transparent);
	overflow: hidden;
}

/* 20 — Icon badge */
.jah-preset-icon-badge .jah-meta-row { align-items: center; }
.jah-preset-icon-badge .jah-title-row { padding-inline-start: calc(2.4em + var(--jah-gap)); }
.jah-preset-icon-badge .jah-meta-row .jah-icon + .jah-eyebrow { margin-inline-start: 0; }

/* Entrance animations */
.jah-animate {
	opacity: 0;
	transition-property: opacity, transform, clip-path;
	transition-duration: var(--jah-duration);
	transition-timing-function: cubic-bezier(.2,.75,.25,1);
}
.jah-animation-fade-up { transform: translateY(24px); }
.jah-animation-fade-down { transform: translateY(-24px); }
.jah-animation-slide-start { transform: translateX(-28px); }
[dir="rtl"].jah-animation-slide-start { transform: translateX(28px); }
.jah-animation-slide-end { transform: translateX(28px); }
[dir="rtl"].jah-animation-slide-end { transform: translateX(-28px); }
.jah-animation-zoom { transform: scale(.94); }
.jah-animation-clip { clip-path: inset(0 100% 0 0); }
[dir="rtl"].jah-animation-clip { clip-path: inset(0 0 0 100%); }
.jah-animate.is-visible { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

.jah-hover-lift:hover .jah-shell { transform: translateY(-6px); }
.jah-wrap:hover .jah-highlight { color: var(--jah-hover); }
.jah-preset-gradient:hover .jah-highlight,
.jah-preset-kinetic:hover .jah-highlight { color: transparent; }

@supports not (color: color-mix(in srgb, red 50%, white)) {
	.jah-number { color: rgba(0,44,180,.08); }
	.jah-preset-boxed .jah-shell { background: rgba(0,44,180,.04); border-color: rgba(0,44,180,.7); }
	.jah-preset-neon .jah-shell { border-color: rgba(0,44,180,.5); }
}

@media (max-width: 767px) {
	.jah-title-row { gap: calc(var(--jah-gap) * .65); }
	.jah-preset-center-lines .jah-ornament { flex-basis: calc(var(--jah-deco-length) * .55); width: calc(var(--jah-deco-length) * .55); }
	.jah-preset-icon-badge .jah-title-row { padding-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.jah-wrap,
	.jah-wrap *,
	.jah-wrap *::before,
	.jah-wrap *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.jah-animate { opacity: 1; transform: none; clip-path: none; }
}