/**
 * Components — buttons, cards, forms, pills, marquees, CTA band.
 *
 * @package Chelure_Enterprise
 */

/* =========================================================================
 * BUTTONS
 * ====================================================================== */
.ce-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border: 1px solid transparent;
	border-radius: var(--ce-radius-pill);
	font-family: var(--ce-font-body);
	font-size: var(--ce-fs-sm);
	font-weight: var(--ce-fw-semibold);
	line-height: 1;
	white-space: nowrap;
	transition:
		transform var(--ce-dur-fast) var(--ce-ease),
		box-shadow var(--ce-dur) var(--ce-ease),
		background var(--ce-dur-fast) var(--ce-ease);
	will-change: transform;
}

.ce-btn--primary {
	background: var(--ce-gradient);
	color: #fff;
	box-shadow: var(--ce-shadow-cta);
}

.ce-btn--primary:hover {
	opacity: 1;
	box-shadow: 0 16px 40px rgba(236, 30, 156, .5);
}

.ce-btn--ghost {
	background: var(--ce-surface-2);
	border-color: var(--ce-border-3);
	color: var(--ce-heading);
}

.ce-btn--ghost:hover { background: var(--ce-surface-hover); opacity: 1; }

/* Design secondary button: transparent with a hairline border. */
.ce-btn--outline {
	background: transparent;
	border-color: var(--ce-border-3);
	color: var(--ce-heading);
	padding: 16px 30px;
	font-size: var(--ce-fs-body);
}

.ce-btn--outline:hover { background: var(--ce-line); opacity: 1; }

.ce-btn:active { transform: scale(.97); }

/* =========================================================================
 * CARDS
 * ====================================================================== */
.ce-card {
	background: var(--ce-surface);
	border: 1px solid var(--ce-border);
	border-radius: var(--ce-radius-md);
	padding: 30px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition:
		transform var(--ce-dur) var(--ce-ease),
		border-color var(--ce-dur) var(--ce-ease),
		background var(--ce-dur) var(--ce-ease);
	height: 100%;
}

.ce-card:hover {
	transform: translateY(-8px);
	border-color: rgba(236, 30, 156, .5);
	background: var(--ce-surface-hover);
}

.ce-card__icon {
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	display: grid;
	place-items: center;
	border-radius: var(--ce-radius-tile);
	background: var(--ce-gradient);
	font-size: 22px;
	line-height: 1;
	margin: 0;
}

/* 17px, not the 22px card heading — at 22px these titles wrap onto two
   lines and the grid loses its rhythm. */
.ce-card__title {
	font-size: 17px;
	margin: 0;
}

.ce-card__desc {
	color: var(--ce-muted-soft);
	font-size: 13.5px;
	line-height: 1.6;
	margin: 0;
}

/* --- Project card -------------------------------------------------------- */
.ce-project {
	background: var(--ce-surface);
	border: 1px solid var(--ce-border);
	border-radius: 22px;
	overflow: hidden;
	transition: transform var(--ce-dur) var(--ce-ease), border-color var(--ce-dur) var(--ce-ease);
	display: flex;
	flex-direction: column;
}

.ce-project:hover { transform: translateY(-6px); border-color: var(--ce-border-3); }

.ce-project__media {
	height: 220px;           /* design uses a fixed band, not a ratio */
	overflow: hidden;
	background: var(--ce-surface-2);
}

.ce-project__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ce-dur-slow) var(--ce-ease);
}

.ce-project:hover .ce-project__img { transform: scale(1.06); }

.ce-project__body { padding: 22px; }

.ce-project__cat {
	display: block;
	font-size: 12px;
	font-weight: var(--ce-fw-bold);
	letter-spacing: var(--ce-ls-eyebrow);
	text-transform: uppercase;
	color: var(--ce-accent);
	margin-bottom: 10px;
}

.ce-project__title { font-size: var(--ce-fs-h4); margin-bottom: 8px; }
.ce-project__desc { color: var(--ce-muted); font-size: var(--ce-fs-sm); margin: 0; }

/* =========================================================================
 * GRIDS
 * ====================================================================== */
.ce-grid { display: grid; gap: 22px; }
.ce-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ce-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ce-grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1024px) {
	.ce-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.ce-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
	.ce-grid--4,
	.ce-grid--3,
	.ce-grid--2 { grid-template-columns: 1fr; }
}

/* =========================================================================
 * PILLS / TAGS
 * ====================================================================== */
.ce-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	border-radius: var(--ce-radius-pill);
	border: 1px solid var(--ce-border-2);
	background: var(--ce-surface-2);
	color: var(--ce-muted);
	font-size: var(--ce-fs-xs);
	font-weight: var(--ce-fw-medium);
	transition: all var(--ce-dur-fast) var(--ce-ease);
}

.ce-pill:hover { border-color: var(--ce-border-3); color: var(--ce-heading); opacity: 1; }

.ce-pill.is-active {
	background: var(--ce-gradient);
	border-color: transparent;
	color: #fff;
	box-shadow: var(--ce-shadow-cta);
}

.ce-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* =========================================================================
 * FORMS
 * ====================================================================== */
.ce-form {
	background: var(--ce-surface-2);
	border: 1px solid var(--ce-border-2);
	border-radius: var(--ce-radius-xl);
	padding: 32px;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.ce-form__head { margin-bottom: 24px; }
.ce-form__title { font-size: var(--ce-fs-h3); margin-bottom: 8px; }
.ce-form__subtitle { color: var(--ce-muted); font-size: var(--ce-fs-sm); margin: 0; }

.ce-form__fields {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 20px;
}

/* Phone + Company share a row, as designed. */
.ce-form__row { display: flex; gap: 12px; }
.ce-form__row .ce-field { flex: 1; min-width: 0; }

.ce-field__label {
	display: block;
	font-size: var(--ce-fs-xs);
	font-weight: var(--ce-fw-semibold);
	color: var(--ce-muted);
	margin-bottom: 8px;
}

.ce-field__input {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	border-radius: var(--ce-radius-xs);
	border: 1px solid var(--ce-border-3);
	background: var(--ce-surface-3);
	color: var(--ce-heading);
	font-family: var(--ce-font-body);
	font-size: var(--ce-fs-sm);
	transition: border-color var(--ce-dur-fast) var(--ce-ease), box-shadow var(--ce-dur-fast) var(--ce-ease);
}

.ce-field__input::placeholder { color: var(--ce-muted-soft); }

.ce-field__input:focus {
	outline: none;
	border-color: var(--ce-magenta);
	box-shadow: 0 0 0 3px rgba(236, 30, 156, .15);
}

.ce-field__textarea { resize: vertical; min-height: 110px; }

.ce-field__select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) center, calc(100% - 15px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-inline-end: 40px;
}

.ce-field.is-invalid .ce-field__input { border-color: var(--ce-magenta); }

.ce-field__error {
	display: block;
	min-height: 0;
	color: var(--ce-magenta);
	font-size: 12px;
	margin-top: 6px;
}

.ce-form__submit { width: 100%; }

.ce-form__status {
	margin: 16px 0 0;
	font-size: var(--ce-fs-sm);
	text-align: center;
	color: var(--ce-muted);
}

.ce-form__status.is-error { color: var(--ce-magenta); }

/* Success state replaces the form body, as designed. */
.ce-form.is-sent .ce-form__fields,
.ce-form.is-sent .ce-form__submit,
.ce-form.is-sent .ce-form__head { display: none; }

.ce-form.is-sent .ce-form__status {
	color: var(--ce-heading);
	font-family: var(--ce-font-heading);
	font-size: var(--ce-fs-h4);
	padding: 32px 8px;
	margin: 0;
}

.ce-form.is-busy { opacity: .7; pointer-events: none; }

@media (max-width: 680px) {
	.ce-form { padding: 24px; border-radius: var(--ce-radius-lg); }
	.ce-form__row { flex-direction: column; gap: 14px; }
}

/* =========================================================================
 * MARQUEE
 * ====================================================================== */
@keyframes ce-marquee     { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
@keyframes ce-marquee-rev { from { transform: translateX(-50%); }  to { transform: translateX(0); } }

.ce-marquee {
	overflow: hidden;
	position: relative;
	border-block: 1px solid var(--ce-line);
	max-width: 100vw;
	padding-block: 22px;
	background: var(--ce-surface);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ce-marquee__track {
	display: flex;
	width: max-content;
	gap: 64px;
	animation: ce-marquee 22s linear infinite;
}

.ce-marquee--reverse .ce-marquee__track { animation-name: ce-marquee-rev; animation-duration: 34s; }

/* The testimonial marquee carries cards, not words — no band chrome. */
.ce-marquee--cards {
	background: transparent;
	border: 0;
	padding-block: 8px;
}

.ce-marquee--cards .ce-marquee__track { gap: 24px; align-items: stretch; }

.ce-marquee:hover .ce-marquee__track { animation-play-state: paused; }

.ce-marquee__item {
	font-family: var(--ce-font-heading);
	font-size: var(--ce-fs-h4);
	font-weight: var(--ce-fw-bold);
	letter-spacing: var(--ce-ls-eyebrow);
	color: var(--ce-muted-soft);
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 64px;
}

.ce-marquee__item::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ce-gradient);
	flex: 0 0 8px;
}

@media (prefers-reduced-motion: reduce) {
	.ce-marquee__track { animation: none; }
}

/* --- Testimonial card ---------------------------------------------------- */
.ce-quote {
	width: 360px;
	flex: 0 0 360px;
	text-align: left;
	background: var(--ce-surface-2);
	border: 1px solid var(--ce-border-2);
	border-radius: var(--ce-radius-md);
	padding: 28px;
}

.ce-quote__stars { color: var(--ce-magenta); font-size: 20px; letter-spacing: 2px; margin-bottom: 14px; }
.ce-quote__text {
	color: var(--ce-text);
	font-size: var(--ce-fs-body);
	line-height: var(--ce-lh-loose);
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	quotes: none;
}
.ce-quote__name { color: var(--ce-heading); font-weight: var(--ce-fw-semibold); font-size: var(--ce-fs-sm); }
.ce-quote__role { color: var(--ce-muted-soft); font-size: var(--ce-fs-xs); }

/* Split section header: heading left, action right (portfolio teaser). */
.ce-splithead {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	max-width: var(--ce-container);
	margin: 0 auto 50px;
	position: relative;
	z-index: 1;
}

.ce-splithead__title { margin: 0; }
.ce-splithead__cta { padding: 14px 26px; font-size: var(--ce-fs-sm); white-space: nowrap; }

@media (max-width: 680px) {
	.ce-splithead { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 680px) {
	.ce-quote { width: 300px; flex-basis: 300px; padding: 22px; }
}

/* =========================================================================
 * CLOSING CTA BAND
 * ====================================================================== */
.ce-cta {
	position: relative;
	padding-block: var(--ce-section-y);
	overflow: hidden;
}

.ce-cta__card {
	position: relative;
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
	padding: 80px 50px;
	border-radius: var(--ce-radius-xl);
	background: linear-gradient(135deg, rgba(123, 47, 247, .25), rgba(236, 30, 156, .2));
	border: 1px solid var(--ce-border-3);
	overflow: hidden;
}

.ce-cta__title {
	color: var(--ce-heading);
	font-size: var(--ce-fs-h2);
	letter-spacing: var(--ce-ls-h2);
	margin-bottom: 16px;
	position: relative;
}

.ce-cta__text {
	color: var(--ce-muted);
	font-size: var(--ce-fs-lead);
	line-height: var(--ce-lh-body);
	max-width: 56ch;
	margin: 0 auto 32px;
	position: relative;
}

/* Design CTA button: solid white pill, near-black label. */
.ce-cta .ce-btn {
	background: #fff;
	color: #1a0b2e;
	padding: 17px 34px;
	font-weight: var(--ce-fw-bold);
	font-size: var(--ce-fs-body);
	box-shadow: none;
	position: relative;
}

.ce-cta .ce-btn:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }

@media (max-width: 680px) {
	.ce-cta__card { padding: 48px 24px; border-radius: var(--ce-radius-lg); }
}

/* =========================================================================
 * PROCESS STEPS
 * ====================================================================== */
.ce-process { position: relative; }

.ce-process__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

/* Connecting line behind the numbers. */
.ce-process__list::before {
	content: "";
	position: absolute;
	top: 26px;
	left: 6%;
	right: 6%;
	height: 2px;
	background: var(--ce-gradient-90);
	opacity: .35;
	z-index: 0;
}

.ce-process__step { position: relative; z-index: 1; text-align: left; }

/* A hollow circle with a gradient ring. The two-layer background plus
   background-clip is how you get a gradient border on a rounded element. */
.ce-process__num {
	width: 52px;
	height: 52px;
	margin: 0 0 22px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 2px solid transparent;
	background-image: linear-gradient(var(--ce-bg), var(--ce-bg)), var(--ce-gradient);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	color: var(--ce-heading);
	font-family: var(--ce-font-heading);
	font-weight: var(--ce-fw-bold);
	font-size: var(--ce-fs-body);
}

.ce-process__title {
	font-size: 18px;
	margin: 0 0 10px;
}

.ce-process__desc {
	color: var(--ce-muted-soft);
	font-size: var(--ce-fs-sm);
	line-height: 1.6;
	margin: 0;
}

@media (max-width: 1024px) {
	.ce-process__list { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
	.ce-process__list::before { display: none; }
}

@media (max-width: 680px) {
	.ce-process__list { grid-template-columns: 1fr; }
}

/* =========================================================================
 * STATS BAND
 * ====================================================================== */
.ce-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	text-align: center;
}

.ce-stat__value {
	font-family: var(--ce-font-heading);
	font-size: var(--ce-fs-display);
	font-weight: var(--ce-fw-bold);
	line-height: 1;
	color: var(--ce-heading);
	font-variant-numeric: tabular-nums;
}

.ce-stat__label {
	color: var(--ce-muted);
	font-size: var(--ce-fs-sm);
	margin-top: 6px;
}

@media (max-width: 680px) {
	.ce-stats { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
}

/* =========================================================================
 * SERVICE ROWS (Services page)
 * ====================================================================== */
.ce-srow {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	gap: 28px;
	align-items: start;
	padding: 36px 0;
	border-bottom: 1px solid var(--ce-line);
}

.ce-srow:first-child { border-top: 1px solid var(--ce-line); }

.ce-srow__icon {
	width: 72px;
	height: 72px;
	border-radius: var(--ce-radius-sm);
	background: var(--ce-gradient);
	display: grid;
	place-items: center;
	font-size: 30px;
	box-shadow: var(--ce-shadow-glow);
}

.ce-srow__num {
	display: block;
	font-size: var(--ce-fs-xs);
	font-weight: var(--ce-fw-bold);
	letter-spacing: var(--ce-ls-eyebrow);
	color: var(--ce-accent);
	margin-bottom: 8px;
}

.ce-srow__title { font-size: var(--ce-fs-h3); margin-bottom: 12px; }
.ce-srow__desc { color: var(--ce-muted); font-size: var(--ce-fs-body); margin-bottom: 18px; max-width: 68ch; }
.ce-srow__cta { align-self: center; }

@media (max-width: 1024px) {
	.ce-srow { grid-template-columns: 60px 1fr; }
	.ce-srow__icon { width: 60px; height: 60px; font-size: 26px; }
	.ce-srow__cta { grid-column: 2; justify-self: start; margin-top: 8px; }
}

@media (max-width: 680px) {
	.ce-srow { grid-template-columns: 1fr; gap: 18px; padding: 28px 0; }
	.ce-srow__cta { grid-column: 1; }
}

/* =========================================================================
 * INFO CARDS (Contact page)
 * ====================================================================== */
.ce-info {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	background: var(--ce-surface);
	border: 1px solid var(--ce-border);
	border-radius: var(--ce-radius-sm);
	padding: 24px;
}

.ce-info__icon {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border-radius: var(--ce-radius-xs);
	background: var(--ce-gradient);
	display: grid;
	place-items: center;
	font-size: 20px;
}

.ce-info__label {
	font-size: var(--ce-fs-xs);
	letter-spacing: var(--ce-ls-eyebrow);
	text-transform: uppercase;
	color: var(--ce-accent);
	font-weight: var(--ce-fw-bold);
	margin-bottom: 6px;
}

.ce-info__value { color: var(--ce-heading); font-size: var(--ce-fs-body); font-weight: var(--ce-fw-medium); }
.ce-info__value a { color: inherit; }

/* =========================================================================
 * PROSE (legal pages, blog)
 * ====================================================================== */
.ce-prose { max-width: var(--ce-prose); margin-inline: auto; }
.ce-prose h2 { font-size: var(--ce-fs-h3); margin-top: 2em; }
.ce-prose h3 { font-size: var(--ce-fs-h4); margin-top: 1.6em; }
.ce-prose p,
.ce-prose li { color: var(--ce-muted); line-height: var(--ce-lh-loose); }
.ce-prose a { text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
 * PAGE HERO (inner pages)
 * ====================================================================== */
.ce-page-hero {
	position: relative;
	padding-block: 72px 40px;
	text-align: center;
	overflow: hidden;
}

.ce-page-hero::before {
	content: "";
	position: absolute;
	top: -40%;
	left: 50%;
	width: 900px;
	height: 900px;
	margin-left: -450px;
	background: radial-gradient(circle, rgba(123, 47, 247, .14), transparent 62%);
	pointer-events: none;
}

.ce-page-hero > * { position: relative; }
.ce-page-hero h1 { font-size: var(--ce-fs-h1-sm); margin-bottom: 16px; }
.ce-page-hero .ce-lead { max-width: var(--ce-measure); margin-inline: auto; }
.ce-page-hero--narrow { text-align: left; }

/* =========================================================================
 * FILTER BAR
 * ====================================================================== */
.ce-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-bottom: 48px;
}

.ce-filterbar .ce-pill { cursor: pointer; }

/* =========================================================================
 * CONTACT LAYOUT
 * ====================================================================== */
.ce-contact {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 48px;
	align-items: start;
}

.ce-contact__info {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.ce-contact__info .ce-prose { grid-column: 1 / -1; }

@media (max-width: 1024px) {
	.ce-contact { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
	.ce-contact__info { grid-template-columns: 1fr; }
}

/* =========================================================================
 * TEAM MEMBER
 * ====================================================================== */
.ce-member { text-align: center; }

.ce-member__avatar {
	width: 96px;
	height: 96px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--ce-gradient);
	display: grid;
	place-items: center;
	color: #fff;
	font-family: var(--ce-font-heading);
	font-size: var(--ce-fs-h3);
	font-weight: var(--ce-fw-bold);
	letter-spacing: 1px;
	box-shadow: var(--ce-shadow-glow);
}

.ce-member__name { font-size: var(--ce-fs-h4); margin-bottom: 4px; }
.ce-member__role { color: var(--ce-muted); font-size: var(--ce-fs-sm); margin: 0; }

/* =========================================================================
 * SEARCH
 * ====================================================================== */
.ce-search { display: flex; gap: 10px; }
.ce-search .ce-field__input { flex: 1; }

/* =========================================================================
 * SINGLE MEDIA
 * ====================================================================== */
.ce-single__media {
	border-radius: var(--ce-radius-lg);
	overflow: hidden;
	border: 1px solid var(--ce-border);
	margin-bottom: 8px;
}

/* =========================================================================
 * PAGINATION
 * ====================================================================== */
.ce-section__foot .nav-links,
.pagination .nav-links {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}

.page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	border-radius: var(--ce-radius-pill);
	border: 1px solid var(--ce-border-2);
	color: var(--ce-muted);
	font-size: var(--ce-fs-sm);
}

.page-numbers.current {
	background: var(--ce-gradient);
	border-color: transparent;
	color: #fff;
}

/* =========================================================================
 * COMMENTS
 * ====================================================================== */
.ce-comments { list-style: none; margin: 0 0 40px; padding: 0; }
.ce-comments ol { list-style: none; padding-left: 28px; }
.ce-comments .comment-body {
	background: var(--ce-surface);
	border: 1px solid var(--ce-border);
	border-radius: var(--ce-radius-sm);
	padding: 20px 24px;
	margin-bottom: 14px;
}
.comment-form input:not([type="submit"]),
.comment-form textarea {
	width: 100%;
	padding: 13px 16px;
	border-radius: var(--ce-radius-xs);
	border: 1px solid var(--ce-border-2);
	background: var(--ce-surface);
	color: var(--ce-heading);
	margin-bottom: 14px;
}

/* The bloom's drift keyframe. Defined here rather than only in home.css,
   which is enqueued on the front page alone — without this the inner-page
   hero blooms would sit perfectly still. */
@keyframes ce-float1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(40px, -60px) scale(1.1); }
}

/* =========================================================================
 * INNER PAGE HERO
 * Design: 190px of top padding to clear the fixed nav, centred, with one
 * drifting radial bloom behind. Each page tints and offsets it differently.
 * ====================================================================== */
.ce-phero {
	position: relative;
	padding-block: 190px 100px;
	text-align: center;
	overflow: hidden;
}

.ce-phero--tight { padding-bottom: 70px; }
.ce-phero--left  { text-align: left; }

.ce-phero__inner { position: relative; z-index: 1; }

.ce-phero__bloom {
	position: absolute;
	top: -100px;
	left: var(--ce-bloom-x, 20%);
	width: 440px;
	height: 440px;
	border-radius: 50%;
	pointer-events: none;
	animation: ce-float1 14s ease-in-out infinite;
}

.ce-phero__bloom--magenta { background: radial-gradient(circle, rgba(236, 30, 156, .4), transparent 70%); }
.ce-phero__bloom--violet  { background: radial-gradient(circle, rgba(123, 47, 247, .4), transparent 70%); }

.ce-phero__title {
	font-size: var(--ce-fs-h1-hero, 56px);
	line-height: 1.1;
	letter-spacing: var(--ce-ls-h1);
	margin: 0 0 20px;
}

/* Longer headings step down a size rather than wrapping to three lines. */
.ce-phero__title--lg { font-size: 52px; line-height: 1.15; }

.ce-phero__intro { max-width: var(--ce-measure); margin-inline: auto; }
.ce-phero--left .ce-phero__intro { margin-inline: 0; }

.ce-phero__meta {
	color: var(--ce-muted-soft);
	font-size: var(--ce-fs-sm);
	margin: 0;
}

/* Long-form pages run the prose straight on from the title rather than
   leaving a full section's worth of air below it. */
.ce-phero--left + .ce-section { padding-top: 40px; }

@media (max-width: 1024px) {
	.ce-phero { padding-block: 150px 70px; }
	.ce-phero__title { font-size: 42px; }
	.ce-phero__title--lg { font-size: 38px; }
}

@media (max-width: 680px) {
	.ce-phero { padding-block: 120px 48px; }
	.ce-phero__title,
	.ce-phero__title--lg { font-size: 32px; letter-spacing: -1px; }
	.ce-phero__bloom { width: 280px; height: 280px; }
}

/* =========================================================================
 * TWO-COLUMN SPLIT (About story / global advantage)
 * ====================================================================== */
.ce-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.ce-split__copy h2 { margin-bottom: 20px; font-size: var(--ce-fs-h2); }
.ce-split__copy p { font-size: var(--ce-fs-body); line-height: var(--ce-lh-loose); }
.ce-split__lead { color: var(--ce-heading); font-weight: var(--ce-fw-semibold); }

@media (max-width: 1024px) {
	.ce-split { grid-template-columns: 1fr; gap: 40px; }
	/* On one column the copy always leads, whichever side it sits on. */
	.ce-split--reverse .ce-split__copy { order: -1; }
}

/* --- Stat tiles ---------------------------------------------------------- */
.ce-tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}

.ce-tile__value {
	font-family: var(--ce-font-heading);
	font-size: 40px;
	font-weight: var(--ce-fw-bold);
	color: var(--ce-heading);
	line-height: 1;
}

.ce-tile__label {
	color: var(--ce-muted-soft);
	font-size: var(--ce-fs-xs);
	margin-top: 6px;
}

/* --- Region cards -------------------------------------------------------- */
.ce-regions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.ce-region {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 24px;
	background: var(--ce-surface);
	border: 1px solid var(--ce-border);
	border-radius: var(--ce-radius-sm);
	transition: border-color var(--ce-dur) var(--ce-ease), transform var(--ce-dur) var(--ce-ease);
}

.ce-region:hover { border-color: var(--ce-border-3); transform: translateY(-4px); }
.ce-region__flag { font-size: 26px; line-height: 1; }
.ce-region__name { color: var(--ce-heading); font-weight: var(--ce-fw-semibold); font-size: var(--ce-fs-sm); }

/* =========================================================================
 * PILLARS BAND — tinted, like the home stats band
 * ====================================================================== */
.ce-section--pillars {
	background: linear-gradient(135deg, rgba(123, 47, 247, .1), rgba(236, 30, 156, .07));
	border-block: 1px solid var(--ce-surface-3);
}

/* =========================================================================
 * INNER PAGE CTA — no panel, just centred copy and a button
 * ====================================================================== */
.ce-pcta {
	padding-block: 0 120px;
	text-align: center;
}

.ce-pcta__title { font-size: var(--ce-fs-h2); letter-spacing: var(--ce-ls-h2); margin-bottom: 14px; }

.ce-pcta__text {
	color: var(--ce-muted);
	font-size: var(--ce-fs-lead);
	max-width: 52ch;
	margin: 0 auto 32px;
}

@media (max-width: 680px) {
	.ce-pcta { padding-bottom: 64px; }
}

/* =========================================================================
 * PORTFOLIO FILTER BAR position on its own page
 * ====================================================================== */
.ce-filterwrap { padding-top: 20px; }
.ce-section--grid { padding-block: 50px var(--ce-section-y); }
.ce-section--srows { padding-block: 20px var(--ce-section-y); }
.ce-section--story { padding-block: 40px 120px; }
.ce-section--global { padding-block: 0 var(--ce-section-y); }
.ce-section--pillars { padding-block: 60px var(--ce-section-y); }
.ce-section--contact { padding-block: 40px var(--ce-section-y); }

/* =========================================================================
   Rotating CE mark — shared decor
   -------------------------------------------------------------------------
   Defined here rather than in home.css because inner pages use it too and
   home.css is only enqueued on the front page.
   ========================================================================= */

.ce-decor {
	position: absolute;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	z-index: 0;
	max-width: none;
}

@keyframes ce-cspin {
	from { transform: rotate(0deg) scale(1); }
	50%  { transform: rotate(180deg) scale(1.1); }
	to   { transform: rotate(360deg) scale(1); }
}

/* =========================================================================
   FAQ page
   ========================================================================= */

.ce-section--faq {
	overflow: hidden;
	/*
	 * The shared page hero already carries 100px of bottom padding, so the
	 * full 130px section pad on top of it opens a hole. Every other inner
	 * page trims this the same way (see .ce-section--srows).
	 */
	padding-top: 24px;
}

.ce-decor--faq {
	bottom: -180px;
	right: -200px;
	width: 620px;
	height: 620px;
	opacity: .07;
	animation: ce-cspin 36s linear infinite;
}

/* --- Jump links ---------------------------------------------------------- */
.ce-faq-jump { margin-bottom: 72px; position: relative; z-index: 1; }

.ce-faq-jump__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center;
}

.ce-pill--link { text-decoration: none; }

/* --- Section grouping ---------------------------------------------------- */
.ce-faq-group { position: relative; z-index: 1; }
.ce-faq-group + .ce-faq-group { margin-top: 84px; }

.ce-faq-group__head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding-bottom: 20px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--ce-line);
}

.ce-faq-group__num {
	font-size: var(--ce-fs-xs);
	font-weight: var(--ce-fw-bold);
	letter-spacing: var(--ce-ls-eyebrow);
	color: var(--ce-accent);
	flex: 0 0 auto;
}

.ce-faq-group__title {
	font-size: var(--ce-fs-h3);
	margin: 0;
	max-width: 34ch;
}

/* --- The accordion itself ------------------------------------------------ */
.ce-faq-list { display: flex; flex-direction: column; gap: 12px; }

.ce-faq {
	border: 1px solid var(--ce-border-2);
	border-radius: var(--ce-radius-md);
	background: var(--ce-surface-2);
	transition: border-color var(--ce-dur) var(--ce-ease), background var(--ce-dur) var(--ce-ease);
}

.ce-faq:hover { border-color: var(--ce-border-3); }

.ce-faq[open] {
	background: var(--ce-surface-3);
	border-color: var(--ce-border-3);
}

.ce-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 26px;
	cursor: pointer;
	list-style: none;
	font-family: var(--ce-font-heading);
	font-size: var(--ce-fs-body);
	font-weight: var(--ce-fw-semibold);
	color: var(--ce-heading);
	line-height: 1.45;
}

/* Suppress the native disclosure triangle in every engine. */
.ce-faq__q::-webkit-details-marker { display: none; }
.ce-faq__q::marker { content: ""; }

.ce-faq__q:focus-visible {
	outline: 2px solid var(--ce-magenta);
	outline-offset: 2px;
	border-radius: var(--ce-radius-md);
}

.ce-faq__qtext { flex: 1 1 auto; }

.ce-faq__icon {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--ce-border-3);
	color: var(--ce-accent);
	transition: transform var(--ce-dur) var(--ce-ease), background var(--ce-dur) var(--ce-ease), color var(--ce-dur) var(--ce-ease);
}

.ce-faq[open] .ce-faq__icon {
	transform: rotate(135deg);
	background: var(--ce-gradient);
	border-color: transparent;
	color: #fff;
}

.ce-faq__a {
	padding: 0 26px 26px;
	color: var(--ce-muted);
	font-size: var(--ce-fs-sm);
	line-height: var(--ce-lh-body);
	max-width: 82ch;
}

.ce-faq__a > *:first-child { margin-top: 0; }
.ce-faq__a > *:last-child  { margin-bottom: 0; }
.ce-faq__a p  { margin: 0 0 14px; }
.ce-faq__a ul,
.ce-faq__a ol { margin: 0 0 14px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.ce-faq__a li { line-height: var(--ce-lh-body); }
.ce-faq__a li::marker { color: var(--ce-accent); }
.ce-faq__a strong { color: var(--ce-heading); font-weight: var(--ce-fw-semibold); }
.ce-faq__a a { color: var(--ce-accent); }

@media (max-width: 780px) {
	.ce-faq-group + .ce-faq-group { margin-top: 60px; }
	.ce-faq-group__head { flex-direction: column; gap: 6px; }
	.ce-faq__q { padding: 18px 20px; gap: 14px; font-size: var(--ce-fs-sm); }
	.ce-faq__a { padding: 0 20px 20px; }
	.ce-faq-jump { margin-bottom: 52px; }
	.ce-decor--faq { width: 380px; height: 380px; right: -140px; }
}

@media (prefers-reduced-motion: reduce) {
	.ce-decor--faq { animation: none; }
	.ce-faq,
	.ce-faq__icon { transition: none; }
}

/* --- Long-form prose: lists and emphasis ---------------------------------- */
.ce-prose ul,
.ce-prose ol {
	margin: 0 0 1.4em;
	padding-left: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ce-prose li::marker { color: var(--ce-accent); }
.ce-prose strong { color: var(--ce-heading); font-weight: var(--ce-fw-semibold); }
.ce-prose h2 + p,
.ce-prose h3 + p,
.ce-prose h2 + ul,
.ce-prose h2 + ol { margin-top: 0; }