/* ------------------------------------------------------------
   4. SHARED UTILITIES
   ------------------------------------------------------------ */
.ord-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
	position: relative;
	z-index: 2;
}

html {
	scroll-behavior: smooth;
}

.ord-section {
	padding: 96px 0;
	position: relative;
}

.ord-section-head {
	max-width: 720px;
	margin: 0 auto 60px;
	text-align: center;
}

.ord-section-title {
	font-size: clamp(1.9rem, 4vw, 2.9rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	margin: 14px 0 16px;
}

.ord-section-desc {
	font-size: 1.08rem;
	color: var(--muted);
	max-width: 620px;
	margin: 0 auto;
}

/* Eyebrow badge — pill, uppercase, mint pulsing dot */
.ord-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ord-font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
	background: var(--paper);
	border: 2px solid var(--ink);
	border-radius: var(--ord-pill);
	box-shadow: 3px 3px 0 0 var(--ink);
	padding: 7px 16px;
}

.ord-eyebrow::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mint);
	box-shadow: 0 0 0 0 rgba(255, 210, 30, 0.7);
	animation: ord-dot-pulse 2s infinite;
}

.ord-eyebrow--dark {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--paper);
	box-shadow: 3px 3px 0 0 var(--paper);
}

@keyframes ord-dot-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 210, 30, 0.7); }
	70% { box-shadow: 0 0 0 9px rgba(255, 210, 30, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 210, 30, 0); }
}

/* Highlight text — solid marker block behind the words */
.ord-grad-text,
.ord-grad-text--vc {
	display: inline;
	background: var(--mint);
	background-image: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: currentColor;
	color: var(--ink);
	padding: 0.02em 0.18em;
	margin: 0 0.06em;
	border-radius: 6px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* Buttons — pill, 2px border, hard shadow, arrow shift, press-in */
.ord-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--ord-font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	padding: 15px 30px;
	border: 2.5px solid var(--ink);
	border-radius: var(--ord-pill);
	box-shadow: 5px 5px 0 0 var(--ink);
	transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
	text-decoration: none;
	white-space: nowrap;
}

.ord-btn .ord-btn-arrow {
	display: inline-block;
	transition: transform 0.16s ease;
}

.ord-btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 0 var(--ink);
}

.ord-btn:hover .ord-btn-arrow {
	transform: translateX(4px);
}

.ord-btn:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 0 var(--ink);
}

.ord-btn--mint {
	background: var(--mint);
	color: var(--ink);
}

.ord-btn--mint:hover {
	background: #e6b800;
	color: var(--ink);
}

.ord-btn--ink {
	background: var(--ink);
	color: var(--paper);
}

.ord-btn--ink:hover {
	background: #2f1558;
	color: var(--paper);
}

.ord-btn--paper {
	background: var(--paper);
	color: var(--ink);
}

.ord-btn--paper:hover {
	background: var(--mist);
	color: var(--ink);
}

.ord-btn--violet {
	background: var(--violet);
	color: var(--paper);
}

.ord-btn--wa {
	background: #25d366;
	color: var(--ink);
}

.ord-btn--wa:hover {
	background: #1ebe5b;
	color: var(--ink);
}

.ord-btn--wa .bw-icon--whatsapp {
	font-size: 1.15em;
}

.ord-btn--sm {
	padding: 10px 18px;
	font-size: 0.88rem;
	box-shadow: 4px 4px 0 0 var(--ink);
}

.ord-btn--lg {
	padding: 18px 38px;
	font-size: 1.12rem;
	box-shadow: 6px 6px 0 0 var(--ink);
}

.ord-btn--lg:hover {
	box-shadow: 10px 10px 0 0 var(--ink);
}

/* Back-to-top — brutalist paper disc, yellow on hover (replaces the legacy
   glass circle from assets/css/main/29-back-to-top.css). */
.back-to-top {
	background: var(--paper);
	color: var(--ink);
	border: 2.5px solid var(--ink);
	box-shadow: 3px 3px 0 0 var(--ink);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.back-to-top:hover {
	background: var(--mint);
	color: var(--ink);
	border-color: var(--ink);
	box-shadow: 5px 5px 0 0 var(--ink);
}

/* Scroll reveal — hidden state only while JS is active (see header.php) */
html.bw-js .ord-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: var(--ord-delay, 0ms);
}

html.bw-js .ord-reveal.is-in {
	opacity: 1;
	transform: translateY(0);
	/* Release the compositor hint once the reveal is done: keeping `will-change`
	   on every revealed element leaves 100+ layers alive for the whole visit,
	   which is the main source of jank on long pages. Elements are composited
	   by the browser for the duration of the transition itself. */
	will-change: auto;
}