/* ==========================================================================
   headings.css – Section headings used across the whole site:
   pill label (eyebrow), title with highlighted words, intro text and ornament.
   Highlight words in a title by wrapping them in <em>…</em> in the template.
   ========================================================================== */

/* ---------- Heading block ---------- */
.dp-section__head { position: relative; isolation: isolate; }
.dp-section__head:not(.dp-section__head--left)::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	left: 50%; top: 42%; width: min(620px, 100%); height: 240px; transform: translate(-50%, -50%);
	background: radial-gradient(ellipse at center, rgba(224, 146, 47, .12), transparent 70%);
}

/* ---------- Label → pill with diamonds ---------- */
.dp-section .dp-eyebrow {
	gap: 10px; padding: 7px 16px 7px 14px; margin-bottom: 18px; border-radius: 999px;
	background: rgba(224, 146, 47, .10); border: 1px solid rgba(224, 146, 47, .28);
	font-size: 12px; letter-spacing: .2em;
}
.dp-section .dp-eyebrow::before,
.dp-section__head:not(.dp-section__head--left) .dp-eyebrow::after {
	content: ""; width: 7px; height: 7px; flex-shrink: 0;
	background: currentColor; transform: rotate(45deg); border-radius: 1px;
}
.dp-section .dp-eyebrow--light { background: rgba(242, 184, 97, .12); border-color: rgba(242, 184, 97, .32); }

/* ---------- Title: highlighted words ---------- */
.dp-title em {
	font-style: italic; font-weight: 600; color: var(--dp-accent);
	padding: 0 .06em .06em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10 C 45 3 120 2 197 7' fill='none' stroke='%23e0922f' stroke-opacity='.55' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left 100% / 100% .3em;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.dp-section--dark .dp-title em,
.dp-team-join__box .dp-title em { color: var(--dp-accent-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10 C 45 3 120 2 197 7' fill='none' stroke='%23f2b861' stroke-opacity='.55' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* The underline draws itself in when the heading scrolls into view */
.dp-js [data-reveal] .dp-title em { background-size: 0% .3em; transition: background-size 1s cubic-bezier(.6, 0, .2, 1) .45s; }
.dp-js [data-reveal].is-revealed .dp-title em { background-size: 100% .3em; }

/* ---------- Intro text + ornament ---------- */
.dp-section__head .dp-lead { max-width: 640px; margin-left: auto; margin-right: auto; }
.dp-section__head--left .dp-lead { margin-left: 0; }
.dp-section__head:not(.dp-section__head--left)::after {
	content: ""; display: block; width: 132px; height: 12px; margin: 6px auto 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 12'%3E%3Cpath d='M0 6h52M80 6h52' stroke='%23e0922f' stroke-opacity='.55' stroke-width='1.2'/%3E%3Cpath d='M66 1l5 5-5 5-5-5z' fill='%23e0922f'/%3E%3Ccircle cx='56' cy='6' r='1.6' fill='%23e0922f' fill-opacity='.7'/%3E%3Ccircle cx='76' cy='6' r='1.6' fill='%23e0922f' fill-opacity='.7'/%3E%3C/svg%3E") no-repeat center / contain;
}

@media (max-width: 600px) {
	.dp-section .dp-eyebrow { font-size: 11px; letter-spacing: .14em; padding: 6px 13px; }
}
@media (prefers-reduced-motion: reduce) {
	.dp-js [data-reveal] .dp-title em { background-size: 100% .3em; transition: none; }
}
