/**
 * Banner and creator-card treatment.
 *
 * Loaded last so it overrides the inherited card styling. The 3D carousel
 * motion is untouched — JavaScript owns the transforms, and nothing here
 * competes with them. Only the surface of each card changes: a deeper corner
 * radius, a lit edge, and a shadow that carries the brand pink.
 */

/* --- banner carousel cards ------------------------------------------- */

.video-wrapper {
	border-radius: 18px;
	background: #101014;
	border: 1px solid rgba(255, 46, 136, 0.22);
	box-shadow:
		0 20px 45px -14px rgba(0, 0, 0, 0.8),
		0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.video-card-slide {
	border-radius: 17px;
}

/* A light source falling across the top-left, so the cards read as physical
   panels rather than flat rectangles. Sits above the media, below the motion. */
.video-wrapper::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background:
		linear-gradient(158deg, rgba(255, 255, 255, 0.11) 0%, transparent 44%),
		linear-gradient(0deg, rgba(255, 46, 136, 0.10) 0%, transparent 38%);
}

/* --- creator wall cards ----------------------------------------------- */

.video-card {
	border-radius: 18px;
	border: 1px solid rgba(255, 46, 136, 0.24);
	box-shadow:
		0 18px 42px -16px rgba(0, 0, 0, 0.75),
		0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.video-card:hover {
	border-color: rgba(255, 46, 136, 0.55);
	box-shadow:
		0 0 0 1px rgba(255, 46, 136, 0.5),
		0 22px 50px -14px rgba(255, 46, 136, 0.28);
}

.video-card .video-media,
.video-card .video-image,
.video-card .video-overlay {
	border-radius: 17px;
}

/* The stat strip sits on the media, so it needs its own ground to stay legible
   over a bright frame. */
.video-content {
	background: linear-gradient(0deg, rgba(10, 10, 12, 0.92) 12%, transparent 100%);
	left: 0;
	right: 0;
	bottom: 0;
	padding: 42px 18px 16px;
}

@media (max-width: 768px) {
	.video-wrapper,
	.video-card { border-radius: 14px; }
	.video-card-slide,
	.video-card .video-media,
	.video-card .video-image,
	.video-card .video-overlay { border-radius: 13px; }
}

/* --- services grid ------------------------------------------------------ */

.services-section { background: #0A0A0C; }

/* One soft light behind the grid, so the cards sit on something rather than
   floating on flat black. */
.services-glow {
	position: absolute;
	top: 18%;
	left: 50%;
	width: min(1100px, 90vw);
	height: 520px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(255, 46, 136, 0.13), transparent 68%);
	filter: blur(50px);
	pointer-events: none;
}

.services-eyebrow { color: #FF2E88; display: inline-flex; align-items: center; gap: 12px; }
.services-eyebrow-rule { display: inline-block; width: 34px; height: 1px; background: currentColor; opacity: .85; }

.services-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 34px 30px 36px;
	border-radius: 20px;
	background: linear-gradient(168deg, #131117 0%, #0D0C10 100%);
	overflow: hidden;
	text-decoration: none;
	isolation: isolate;
	transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}

/* The resting edge. A real border would jump when the gradient one arrives, so
   both are drawn as rings and only their opacity changes. */
.service-card::before,
.service-card::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	pointer-events: none;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	transition: opacity .4s ease;
}

.service-card::before { background: rgba(255, 255, 255, 0.08); opacity: 1; }

.service-card::after {
	background: linear-gradient(140deg, #FF2E88, #FF7A2F 48%, #FFC13B);
	opacity: 0;
}

.service-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 26px 54px -22px rgba(255, 46, 136, 0.42);
}
.service-card:hover::before { opacity: 0; }
.service-card:hover::after  { opacity: 1; }

/* The numeral sits behind everything as a watermark, not as a label. */
.service-card__ghost {
	position: absolute;
	top: 6px;
	right: 18px;
	z-index: -1;
	font-family: 'Poppins', sans-serif;
	font-size: 82px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: rgba(255, 255, 255, 0.045);
	transition: color .4s ease, transform .4s ease;
}
.service-card:hover .service-card__ghost {
	color: rgba(255, 46, 136, 0.14);
	transform: translateY(-3px);
}

.service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	color: #FF2E88;
	background: rgba(255, 46, 136, 0.10);
	border: 1px solid rgba(255, 46, 136, 0.22);
	transition: color .4s ease, background-color .4s ease, border-color .4s ease;
}
.service-card__icon svg { width: 23px; height: 23px; }

.service-card:hover .service-card__icon {
	color: #FFC13B;
	background: rgba(255, 193, 59, 0.12);
	border-color: rgba(255, 193, 59, 0.34);
}

.service-card__title { margin: 0; }
.service-card__text  { margin: 0; flex: 1; }

.service-card__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	color: #6F6878;
	transition: color .35s ease, gap .35s ease;
}
.service-card__link svg { transition: transform .35s ease; }

.service-card:hover .service-card__link { color: #FFC13B; gap: 12px; }
.service-card:hover .service-card__link svg { transform: translateX(2px); }

/* Seven cards strand one on the last row at three columns and at two. That
   card spreads across the row and turns sideways — icon, copy and link in a
   line — so it reads as a feature rather than a tile stretched to three times
   its width. The selector is tied to the seventh-and-last card on purpose: an
   eighth would fill the row and the rule switches itself off. */
@media (min-width: 641px) {
	.services-grid > .service-card:nth-child(7):last-child {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"icon title link"
			"icon text  link";
		column-gap: 26px;
		row-gap: 8px;
		align-items: center;
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.services-grid > .service-card:nth-child(7):last-child .service-card__icon  { grid-area: icon; align-self: start; }
	.services-grid > .service-card:nth-child(7):last-child .service-card__title { grid-area: title; align-self: end; }
	.services-grid > .service-card:nth-child(7):last-child .service-card__text  { grid-area: text; align-self: start; max-width: 72ch; }
	.services-grid > .service-card:nth-child(7):last-child .service-card__link  { grid-area: link; margin-top: 0; }
	.services-grid > .service-card:nth-child(7):last-child .service-card__ghost { right: 26px; }
}

@media (max-width: 1024px) {
	.services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.services-grid { grid-template-columns: 1fr; gap: 14px; }
	.service-card  { padding: 28px 24px 30px; }
	.service-card__ghost { font-size: 64px; }
}

@media (prefers-reduced-motion: reduce) {
	.service-card,
	.service-card__ghost,
	.service-card__icon,
	.service-card__link,
	.service-card__link svg { transition: none; }
	.service-card:hover { transform: none; }
}

/* --- the rest of the page's cards -------------------------------------- */

/* Same language as the banner: deeper radius, pink hairline, lit top edge.
   Only the surface changes — nothing here touches transforms, so the existing
   scroll and hover animations keep running untouched. */
.compare-card,
.step-card,
.case-card,
.stat-box,
.yn-rvs-card > div {
	border-radius: 18px;
	border: 1px solid rgba(255, 46, 136, 0.18);
	box-shadow:
		0 16px 40px -18px rgba(0, 0, 0, 0.7),
		0 0 0 1px rgba(255, 255, 255, 0.03) inset;
	transition: border-color .35s ease, box-shadow .35s ease;
}

.compare-card:hover,
.step-card:hover,
.case-card:hover {
	border-color: rgba(255, 46, 136, 0.42);
	box-shadow:
		0 0 0 1px rgba(255, 46, 136, 0.34),
		0 20px 46px -16px rgba(255, 46, 136, 0.22);
}

.faq-item {
	border-radius: 16px;
	border: 1px solid rgba(255, 46, 136, 0.14);
	transition: border-color .35s ease, background-color .35s ease;
}
.faq-item:hover,
.faq-item[open] { border-color: rgba(255, 46, 136, 0.38); }

.partner-logo-item {
	border-radius: 14px;
	transition: border-color .3s ease, transform .3s ease;
}

/* --- case-study slider -------------------------------------------------- */

/* The two case studies used to stack, which made the section very tall. They
   now occupy the same space, one at a time.
   
   Deliberately not a scrolling track: the cards carry floating badges pinned up
   to 100px outside their own bounds, and any overflow container clips them. So
   the slides sit on top of each other and cross-fade instead — nothing is
   clipped, and with two items there is nothing to scroll anyway. */
.cs-slider { position: relative; }

.cs-track { position: relative; }

/* Before the script runs, the first case study is simply on the page. Once the
   slider is live it takes over: every slide is stacked in the same box and only
   the active one is in flow, so the section is as tall as one card. */
.cs-slide {
	transition: opacity .45s ease;
}

.cs-slider.is-ready .cs-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
}

.cs-slider.is-ready .cs-slide.is-active {
	position: relative;
	inset: auto;
	opacity: 1;
	visibility: visible;
}

.cs-slider:not(.is-ready) .cs-slide:not(:first-child) {
	display: none;
}

.cs-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 34px;
}

.cs-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	border: 1px solid rgba(255, 46, 136, 0.32);
	background: rgba(20, 19, 23, 0.9);
	color: #fff;
	cursor: pointer;
	transition: border-color .3s ease, background-color .3s ease, opacity .3s ease;
}
.cs-arrow:hover:not(:disabled) { border-color: #FF2E88; background: rgba(255, 46, 136, 0.14); }
.cs-arrow:disabled { opacity: .32; cursor: default; }

.cs-dots { display: flex; align-items: center; gap: 9px; }

.cs-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.26);
	cursor: pointer;
	transition: width .3s ease, background-color .3s ease;
}
.cs-dot.is-active { width: 26px; background: #FF2E88; }

@media (max-width: 768px) {
	.cs-nav   { margin-top: 24px; gap: 14px; }
	.cs-arrow { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
	.cs-slide { transition: none; }
}

/* Without JavaScript the nav would do nothing, so it is not shown. */
.no-js .cs-nav { display: none; }

/* --- how it works: one connected line ----------------------------------- */

.hiw-section { background: #0A0A0C; }

.hiw-glow {
	position: absolute;
	top: 24%;
	left: 50%;
	width: min(980px, 92vw);
	height: 420px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(255, 122, 47, 0.11), transparent 70%);
	filter: blur(60px);
	pointer-events: none;
}

.hiw-eyebrow { color: #FFC13B; }

.hiw-flow {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px;
	/* The list reset used to zero this, which also threw away the mt-20 the
	   markup asks for — the rail sat on the intro paragraph's baseline. */
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 768px) { .hiw-flow { margin-top: 72px; } }

/* The rail runs behind the nodes and fills once the row is in view, so the
   four steps read as a single sequence rather than four separate cards. */
.hiw-rail {
	position: absolute;
	top: 33px;
	left: 12.5%;
	right: 12.5%;
	height: 2px;
	background: rgba(255, 255, 255, 0.09);
	border-radius: 2px;
	overflow: hidden;
}

.hiw-rail-fill {
	display: block;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, #FF2E88, #FF7A2F 55%, #FFC13B);
	transition: width 1.5s cubic-bezier(.22, 1, .36, 1);
}

.hiw-flow.is-in .hiw-rail-fill { width: 100%; }

.hiw-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 18px;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .6s ease, transform .6s ease;
	transition-delay: calc(var(--i) * 180ms + 250ms);
}

.hiw-flow.is-in .hiw-step { opacity: 1; transform: none; }

.hiw-node {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	color: #FF2E88;
	background: #101014;
	border: 1px solid rgba(255, 46, 136, 0.32);
	box-shadow: 0 0 0 6px #0A0A0C;   /* punches a hole in the rail behind it */
	transition: color .35s ease, border-color .35s ease, transform .35s ease;
}
.hiw-node svg { width: 26px; height: 26px; }

.hiw-step:hover .hiw-node {
	color: #FFC13B;
	border-color: rgba(255, 193, 59, 0.5);
	transform: translateY(-3px);
}

.hiw-node-num {
	position: absolute;
	right: -6px;
	bottom: -4px;
	min-width: 24px;
	padding: 2px 6px;
	border-radius: 999px;
	font-family: 'Poppins', sans-serif;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	color: #0A0A0C;
	background: linear-gradient(135deg, #FF2E88, #FF7A2F);
}

/* One line each at desktop: "Content & Creator Strategy" wrapped at 15ch
   while its neighbours did not, so the four descriptions started at three
   different heights. */
.hiw-step-title { margin: 0; max-width: 26ch; font-size: 18px; }
.hiw-step-text  { margin: 0; max-width: 30ch; }

.hiw-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 15px 30px;
	border-radius: 999px;
	color: #fff;
	text-decoration: none;
	background: linear-gradient(135deg, #FF2E88, #FF7A2F);
	transition: transform .35s ease, box-shadow .35s ease, gap .35s ease;
}
.hiw-cta:hover { transform: translateY(-2px); gap: 13px; box-shadow: 0 16px 34px -14px rgba(255, 46, 136, .6); }

@media (max-width: 900px) {
	.hiw-flow { grid-template-columns: 1fr; gap: 34px; }
	/* Grid rather than flex, so the node spans both rows and the copy stacks
	   beside it instead of the title and text sitting side by side. */
	.hiw-step {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: 'node title' '. text';
		align-items: start;
		text-align: left;
		column-gap: 18px;
		row-gap: 8px;
	}
	.hiw-node       { grid-area: node; }
	.hiw-step-title { grid-area: title; align-self: center; }
	.hiw-step-text  { grid-area: text; }
	.hiw-step-title, .hiw-step-text { max-width: none; }

	/* On one column the rail runs down the left, through the nodes. */
	.hiw-rail { top: 20px; bottom: 20px; left: 32px; right: auto; width: 2px; height: auto; }
	.hiw-rail-fill { width: 100%; height: 0; transition: height 1.5s cubic-bezier(.22, 1, .36, 1); }
	.hiw-flow.is-in .hiw-rail-fill { height: 100%; }
	.hiw-node { flex: 0 0 auto; width: 56px; height: 56px; }
	.hiw-node svg { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.hiw-step { opacity: 1; transform: none; transition: none; }
	.hiw-rail-fill { transition: none; width: 100%; }
}

/* --- comparison table --------------------------------------------------- */

.cmp-section { background: #0A0A0C; }

.cmp-glow {
	position: absolute;
	top: 20%;
	left: 50%;
	width: min(900px, 92vw);
	height: 460px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(255, 46, 136, 0.12), transparent 70%);
	filter: blur(60px);
	pointer-events: none;
}

.cmp-eyebrow { color: #FF2E88; }

.cmp-table {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	background: linear-gradient(168deg, #131117 0%, #0D0C10 100%);
	overflow: hidden;
}

.cmp-head,
.cmp-row {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	align-items: center;
	gap: 14px;
	padding: 0 26px;
}

.cmp-head {
	padding-top: 22px;
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cmp-head-factor,
.cmp-head-col {
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	color: #A8A2B0;
}

.cmp-head-col { text-align: center; }

/* Our column carries a tint the whole way down, so the eye stays on it
   without every cell needing its own treatment. */
.cmp-head-col.is-us,
.cmp-cell.is-us {
	position: relative;
	color: #fff;
}
.cmp-head-col.is-us::before,
.cmp-cell.is-us::before {
	content: '';
	position: absolute;
	inset: -22px -14px;
	background: rgba(255, 46, 136, 0.055);
	pointer-events: none;
	z-index: -1;
}
.cmp-head-col.is-us::before { border-radius: 12px 12px 0 0; }

.cmp-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #0A0A0C;
	background: linear-gradient(135deg, #FF2E88, #FF7A2F);
}

.cmp-row {
	padding-top: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	isolation: isolate;
	transition: background-color .3s ease;
}
.cmp-row:last-child { border-bottom: 0; }
.cmp-row:hover { background: rgba(255, 255, 255, 0.018); }

.cmp-factor {
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #fff;
}

.cmp-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	color: #A8A2B0;
	text-align: center;
}

.cmp-cell-label { display: none; }

.cmp-text-us { color: #fff; font-weight: 500; }

.cmp-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 13px;
	line-height: 1;
}
.cmp-yes { color: #0A0A0C; background: linear-gradient(135deg, #FF2E88, #FF7A2F); }
.cmp-no  { color: #6F6878; background: rgba(255, 255, 255, 0.06); }

/* On a phone each row becomes its own card, with the column names inline —
   the copy is written once and read both ways. */
@media (max-width: 860px) {
	.cmp-head { display: none; }

	.cmp-table { border-radius: 16px; }

	.cmp-row {
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 20px 20px 22px;
	}

	.cmp-factor {
		font-size: 16px;
		font-weight: 600;
		padding-bottom: 4px;
	}

	.cmp-cell {
		justify-content: space-between;
		gap: 16px;
		text-align: right;
	}
	.cmp-cell.is-us::before { inset: -6px -12px; border-radius: 10px; }

	.cmp-cell-label {
		display: inline;
		font-size: 12px;
		font-style: normal;
		color: #6F6878;
	}
	.cmp-cell.is-us .cmp-cell-label { color: #FF2E88; }
}

/* --- hero, below the call to action ------------------------------------- */

/* The homepage hero used to end in a scrolling wall of creator clips. That
   footage now carries the Meta Ads page, where it is the argument rather than
   decoration, so what follows the button on all three heroes is the client
   strip. */
.hero-partners { margin-top: clamp(36px, 3.6vw, 52px); }

/* The strip's heading ships hidden, and the 39px that used to sit under its
   wrapper was dead space with nothing above it. The gap belongs to the heading
   instead, so it costs nothing until someone shows it. */
.hero-partners > .reveal > h4 { margin-bottom: 28px; }

@media (max-width: 768px) {
	.hero-partners { margin-top: 30px; }
}

/* --- client logo strip --------------------------------------------------- */

/* marquee-slides.css sizes these, but Elementor's `.elementor img { height:
   auto }` carries the same specificity and is printed after it, so the strip
   was drawing every file at its natural height — roughly twice the size the
   design asks for. One more class settles it. */
.partner-marquee-section .partner-logo-item img {
	height: 42px;
	width: auto;
	max-width: 150px;
	object-fit: contain;
}

.partner-marquee-section .partner-logo-item { padding: 16px 26px; }
.partner-marquee-section .marquee-track-horizontal { gap: 48px; }

@media (max-width: 768px) {
	.partner-marquee-section .partner-logo-item img { height: 28px; max-width: 104px; }
	.partner-marquee-section .partner-logo-item { padding: 12px 16px; }
	.partner-marquee-section .marquee-track-horizontal { gap: 30px; }
}

/* --- vertical rhythm ----------------------------------------------------- */

/* Sections had arrived at five different paddings — one even carried
   `py-[40px] py-0` — so the page never settled into a rhythm. An id selector
   outranks a Tailwind utility, so this sets one spacing scale without having to
   unpick the class lists in every template. */
/* 128px a side put roughly 290px of black between one section's last line and
   the next section's heading; the page read as a series of islands. 80px a
   side lands at 160px plus whatever lead-in the section carries itself, which
   is where an airy page stops feeling empty. */
#ugc,
#growth,
#services,
#how-it-works,
#case-studies,
#comparison,
#faq,
#results {
	padding-top: 56px;
	padding-bottom: 56px;
}

/* The closing sections hold their card or form flush to the footer. */
#cta,
#contact { padding-top: 64px; padding-bottom: 0; }

/* The Meta Ads case-study section arrived with a relative -100px shift, which
   slid its box over the section above and left a 100px hole beneath it, since
   relative offsets move the paint and not the flow. */
#case-studies { top: auto; }

@media (min-width: 768px) {
	#ugc,
	#growth,
	#services,
	#how-it-works,
	#case-studies,
	#comparison,
	#faq,
	#results {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	#cta,
	#contact { padding-top: 80px; }
}

/* Two dark sections meeting shouldn't read as one long block. */
#growth,
#how-it-works,
#faq { border-top: 1px solid rgba(255, 255, 255, 0.05); }

/* --- type scale ---------------------------------------------------------- */

/* Section headings ranged from 34px to 96px with three different line heights.
   One scale: the hero leads, every section heading sits a step below it, and
   nothing else competes. */
#hero h1 {
	font-size: clamp(40px, 7.4vw, 74px);
	line-height: 0.98;
	letter-spacing: -0.03em;
}

#hero h4 {
	font-size: clamp(19px, 3.1vw, 30px);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

#ugc h2,
#growth h2,
#services h2,
#how-it-works h2,
#case-studies h2,
#comparison h2,
#faq h2,
#cta h2 {
	font-size: clamp(32px, 4.6vw, 56px);
	line-height: 1.06;
	letter-spacing: -0.025em;
}

/* The card was a fixed 570px with three lines centred in it — about 200px of
   glow above and below the copy, which the eye reads as the gap to the next
   section. Shorter, and it still breathes. */
#cta .cta-card { height: 440px; }
@media (max-width: 640px) { #cta .cta-card { min-height: 360px; } }

/* The contact sections borrow the same card for a two-column form, which is
   as tall as its content — never a fixed height. */
#contact .cta-card { height: auto; min-height: 0; }

/* The "brands we have worked with" row inside that card drew the logos at
   their natural size — six marks from 98px to 120px tall, edge to edge. */
/* the client logos inside the contact card — the same twelve as the strip */
.logo-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px 18px;
	align-items: center;
	margin: 14px 0 28px;
}
.logo-grid-item {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 34px;
}
/* Two classes deep, so it outranks Elementor's `.elementor img { height: auto }`,
   which is printed after the theme's sheets. */
.logo-grid .logo-grid-item img { height: 22px; width: auto; max-width: 100%; max-height: 22px; object-fit: contain; opacity: .85; }
@media (max-width: 1023px) { .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.logo-grid { gap: 10px 14px; margin-bottom: 22px; }
	.logo-grid-item { height: 28px; }
	.logo-grid .logo-grid-item img { height: 18px; max-height: 18px; }
}

/* Card and step headings, so the middle of the scale is settled too. */
.service-card__title,
.hiw-step-title,
.cmp-factor,
.faq-question {
	letter-spacing: -0.01em;
}

/* Body copy: one measure, one leading. */
#hero p,
#growth p,
#services p,
#how-it-works p,
#comparison p,
#faq .faq-answer,
#cta p {
	line-height: 1.75;
}

/* A paragraph is hard to read past about 70 characters. */
.hiw-step-text,
.service-card__text,
.cmp-section p,
.hiw-section p { max-width: 66ch; }

/* The hero ends in the client strip, which draws its own dark band — so the
   hero needs almost nothing under it, and the section that always follows
   (#ugc, on both pages) takes a shorter lead-in than the general rhythm. The
   two together used to add up to 256px of black under the logos. */
#hero { padding-bottom: 24px; }
#ugc  { padding-top: 40px; }

@media (min-width: 768px) {
	#hero { padding-bottom: 32px; }
	#ugc  { padding-top: 56px; }
}

/* --- headings that sat flush on their sub-line ---------------------------- */

/* Three heading pairs had no gap at all between the title and the line under
   it — a 64px heading with a 36px sub-line touching its descenders. */
#hero.hero h4 { margin-bottom: 12px; }
.ma-hiw h2 + p,
.ma-results h2 + p { margin-top: 14px; }

/* The button row needs air beneath it whether or not the strip follows. */
.hero-ctas { margin-bottom: 0; }

/* --- inner page hero ----------------------------------------------------- */

.ph-section {
	background: #0A0A0C;
	padding-top: 150px;
	padding-bottom: 72px;
}

.ph-glow {
	position: absolute;
	top: -140px;
	left: 50%;
	width: min(1000px, 96vw);
	height: 560px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(255, 46, 136, 0.16), transparent 70%);
	filter: blur(70px);
	pointer-events: none;
}

.ph-eyebrow { color: #FF2E88; display: inline-flex; align-items: center; gap: 12px; }
.ph-eyebrow-rule { display: inline-block; width: 30px; height: 1px; background: currentColor; opacity: .85; }

.ph-title {
	font-size: clamp(36px, 5.6vw, 62px);
	line-height: 1.04;
	letter-spacing: -0.028em;
}

.ph-accent {
	background: linear-gradient(96deg, #FF2E88, #FF7A2F 55%, #FFC13B);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.ph-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 15px 30px;
	border-radius: 999px;
	color: #fff;
	text-decoration: none;
	background: linear-gradient(135deg, #FF2E88, #FF7A2F);
	transition: transform .35s ease, box-shadow .35s ease, gap .35s ease;
}
.ph-cta:hover { transform: translateY(-2px); gap: 13px; box-shadow: 0 16px 34px -14px rgba(255,46,136,.6); }

.ph-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin-top: 64px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}
.ph-stat { background: #0C0B0F; padding: 26px 28px; }
.ph-stat-value { display: block; font-size: 30px; line-height: 1; letter-spacing: -0.02em; }
.ph-stat-label { display: block; margin-top: 9px; font-size: 11px; color: #6F6878; }

@media (max-width: 640px) {
	.ph-section { padding-top: 124px; }
	.ph-stats { grid-template-columns: 1fr; }
}

/* --- service detail ------------------------------------------------------ */

.sb-section { background: #0A0A0C; padding-bottom: 80px; }

.sb-block {
	display: grid;
	grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
	gap: 24px 56px;
	padding: 44px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.sb-block:first-child { border-top: 0; padding-top: 0; }

.sb-label { color: #FF2E88; padding-top: 4px; }

.sb-lead {
	margin: 0;
	font-size: clamp(18px, 2.2vw, 22px);
	line-height: 1.62;
	letter-spacing: -0.01em;
}

.sb-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sb-list li { display: flex; align-items: flex-start; gap: 12px; }
.sb-dot { flex: 0 0 auto; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: #FFC13B; }

.sb-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
.sb-card {
	position: relative;
	padding: 26px 24px 28px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	background: linear-gradient(168deg, #131117, #0D0C10);
	transition: border-color .35s ease, transform .35s ease;
}
.sb-card:hover { border-color: rgba(255, 46, 136, 0.32); transform: translateY(-3px); }
.sb-card h3 { margin: 10px 0 0; }
.sb-card p  { margin: 8px 0 0; }
.sb-card-num { font-size: 12px; font-weight: 700; color: #FF2E88; letter-spacing: .06em; }

.sb-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 22px; }
.sb-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.sb-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	color: #0A0A0C;
	background: linear-gradient(135deg, #FF2E88, #FF7A2F);
}
.sb-step h3, .sb-step p { margin: 0; }
/* The reset above also swallowed the paragraph's mt-1.5, leaving the step
   title touching its description. */
.sb-step h3 + p { margin-top: 7px; }

.sb-fit { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.sb-fit li { display: flex; align-items: flex-start; gap: 13px; }
.sb-tick { flex: 0 0 auto; color: #4FE3E3; font-size: 15px; line-height: 1.5; }

@media (max-width: 860px) {
	.sb-block { grid-template-columns: 1fr; gap: 16px; padding: 34px 0; }
	.sb-list, .sb-cards { grid-template-columns: 1fr; }
}

/* --- nav dropdown -------------------------------------------------------- */

.nav-dropdown { position: relative; }

.nav-dropdown-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
}
.nav-dropdown-trigger svg { transition: transform .3s ease; }
.nav-dropdown.is-open .nav-dropdown-trigger svg { transform: rotate(180deg); }

.nav-dropdown-panel {
	position: absolute;
	top: calc(100% + 16px);
	left: 50%;
	width: 340px;
	padding: 10px;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	background: rgba(14, 13, 17, 0.97);
	backdrop-filter: blur(18px);
	box-shadow: 0 28px 60px -22px rgba(0, 0, 0, .9);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -8px);
	transition: opacity .28s ease, transform .28s ease, visibility .28s;
	z-index: 200;
}

.nav-dropdown.is-open .nav-dropdown-panel,
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* Bridges the gap between the trigger and the panel, so moving the cursor
   down does not close it. */
.nav-dropdown-panel::before {
	content: '';
	position: absolute;
	top: -16px;
	left: 0;
	right: 0;
	height: 16px;
}

.nav-dropdown-item {
	display: block;
	padding: 11px 13px;
	border-radius: 12px;
	text-decoration: none;
	transition: background-color .25s ease;
}
.nav-dropdown-item:hover { background: rgba(255, 46, 136, 0.1); }

.nav-dropdown-title {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
}
.nav-dropdown-note {
	display: block;
	margin-top: 2px;
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	color: #6F6878;
}

.nav-dropdown-all {
	display: block;
	margin-top: 6px;
	padding: 11px 13px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #FFC13B;
	text-decoration: none;
}

/* --- mobile flyout services --------------------------------------------- */

.flyout-services-label {
	display: block;
	margin-bottom: 6px;
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #FF2E88;
}
.flyout-services-list { margin: 0 0 6px; padding: 0 0 0 2px; list-style: none; }
.flyout-services-list li { padding: 5px 0; }
.flyout-services-list a { font-size: 15px; opacity: .86; }

@media (prefers-reduced-motion: reduce) {
	.nav-dropdown-panel, .nav-dropdown-trigger svg { transition: none; }
}

/* --- service page: results strip and questions -------------------------- */

.sb-results {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin: 0 0 8px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}
.sb-result { background: #0C0B0F; padding: 24px 26px; }
.sb-result-value {
	display: block;
	font-size: 26px;
	line-height: 1;
	letter-spacing: -0.02em;
	background: linear-gradient(120deg, #FF2E88, #FF7A2F 60%, #FFC13B);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.sb-result-label { display: block; margin-top: 9px; font-size: 11px; color: #6F6878; }

.sb-faqs { display: grid; gap: 10px; }

.sb-faq {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	background: #0C0B0F;
	transition: border-color .3s ease;
}
.sb-faq[open] { border-color: rgba(255, 46, 136, 0.34); }

.sb-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 18px 22px;
	cursor: pointer;
	list-style: none;
}
.sb-faq summary::-webkit-details-marker { display: none; }
.sb-faq summary::marker { content: ''; }

.sb-faq-icon {
	flex: 0 0 auto;
	font-size: 20px;
	line-height: 1;
	color: #6F6878;
	transition: transform .3s ease, color .3s ease;
}
.sb-faq[open] .sb-faq-icon { transform: rotate(45deg); color: #FF2E88; }

.sb-faq p { margin: 0; padding: 0 60px 20px 22px; }

@media (max-width: 640px) {
	.sb-results { grid-template-columns: 1fr; }
	.sb-faq p { padding-right: 22px; }
}

/* --- inner page hero with a visual --------------------------------------- */

.ph-grid.has-visual {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 56px;
	align-items: center;
}

.ph-visual {
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.09);
	box-shadow: 0 30px 66px -26px rgba(0, 0, 0, .9);
}
.ph-visual img { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
	.ph-grid.has-visual { grid-template-columns: 1fr; gap: 36px; }
}

/* --- contact details ----------------------------------------------------- */

.cd-section { background: #0A0A0C; padding-bottom: 24px; }

.cd-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.cd-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 28px 26px 30px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	background: linear-gradient(168deg, #131117, #0D0C10);
	text-decoration: none;
	transition: border-color .35s ease, transform .35s ease;
}
.cd-card:hover { border-color: rgba(255, 46, 136, 0.36); transform: translateY(-4px); }

.cd-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 10px;
	border-radius: 12px;
	color: #FF2E88;
	background: rgba(255, 46, 136, 0.1);
	border: 1px solid rgba(255, 46, 136, 0.22);
}
.cd-icon svg { width: 20px; height: 20px; }

.cd-label { font-size: 11px; color: #6F6878; }
.cd-value { font-size: 16px; font-weight: 500; word-break: break-word; }
.cd-note  { font-size: 13px; color: #6F6878; }

.cd-expect { margin-top: 44px; }
.cd-expect-label { color: #FF2E88; }

.cd-expect-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 44px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}
.cd-expect-list li { display: flex; align-items: flex-start; gap: 14px; }
.cd-expect-num {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	color: #FFC13B;
	padding-top: 3px;
}

@media (max-width: 900px) {
	.cd-cards, .cd-expect-list { grid-template-columns: 1fr; }
}

/* --- about story --------------------------------------------------------- */

.as-section { background: #0A0A0C; padding-bottom: 80px; }

.as-story {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 56px;
	padding-bottom: 56px;
}

.as-label { color: #FF2E88; display: block; }

.as-heading {
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.08;
	letter-spacing: -0.025em;
}

.as-prose { display: grid; gap: 18px; }
.as-prose p { margin: 0; max-width: 66ch; }

.as-lead {
	font-size: clamp(17px, 2vw, 20px);
	line-height: 1.66;
	letter-spacing: -0.01em;
}

.as-heading .as-dim { color: #A8A2B0; }

.as-figures {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}
.as-figure { background: #0C0B0F; padding: 26px 24px; }
.as-figure-value {
	display: block;
	font-size: 30px;
	line-height: 1;
	letter-spacing: -0.02em;
	background: linear-gradient(120deg, #FF2E88, #FF7A2F 60%, #FFC13B);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.as-figure-label { display: block; margin-top: 9px; font-size: 11px; color: #6F6878; }

.as-values { margin-top: 64px; }

.as-values-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 20px;
}

.as-value {
	padding: 28px 26px 30px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	background: linear-gradient(168deg, #131117, #0D0C10);
	transition: border-color .35s ease;
}
.as-value:hover { border-color: rgba(255, 46, 136, 0.3); }
.as-value h3 { margin: 10px 0 0; }
.as-value p  { margin: 9px 0 0; }
.as-value-num { font-size: 12px; font-weight: 700; color: #FF2E88; letter-spacing: .06em; }

@media (max-width: 900px) {
	.as-story { grid-template-columns: 1fr; gap: 28px; }
	.as-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-values-grid { grid-template-columns: 1fr; }
}

/* --- menu output --------------------------------------------------------- */

/* wp_nav_menu emits a list; the header lays its items out in a row. */
.nav-container > ul,
.nav-container ul.menu {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav-container > ul > li { display: contents; }

/* The mobile flyout keeps a normal list, with any children indented. */
.flyout-nav-container .flyout-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}
.flyout-nav-container .flyout-menu > li { padding: 6px 0; }
.flyout-nav-container .flyout-menu .sub-menu {
	margin: 4px 0 6px;
	padding-left: 14px;
	list-style: none;
	border-left: 1px solid rgba(255, 46, 136, 0.3);
}
.flyout-nav-container .flyout-menu .sub-menu a { font-size: 15px; opacity: .86; }

/* --- responsive guards --------------------------------------------------- */

/* A handful of pills carry a fixed width with !important — 388px is wider than
   a small phone, which pushes the page sideways. Let them shrink. */
.tag-pill {
	max-width: 100%;
	width: auto !important;
	height: auto !important;
	min-height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Two sections lay their content out without a max-width container. On a wide
   monitor that leaves the copy running the full width of the screen. */
#ugc > .container,
#ugc > div:not([class*="glow"]),
.ma-offer-shell {
	max-width: 1440px;
	margin-inline: auto;
}

/* Nothing should be able to scroll the page sideways. */
html, body { overflow-x: hidden; }

/* Media never exceeds its box, whatever width an editor uploads. */
img, video, iframe, svg { max-width: 100%; }
video { height: auto; }

/* Long unbroken strings — an email or a URL — must wrap rather than overflow. */
.cd-value, .sb-lead, .as-lead, .nav-dropdown-title { overflow-wrap: anywhere; }

/* --- touch targets ------------------------------------------------------- */

/* A dot is 8px because that is how it should look, but a finger needs about
   44px. The visual stays small; the hit area grows around it. */
.cs-dot {
	position: relative;
	touch-action: manipulation;
}
.cs-dot::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

/* Same idea for the slider arrows on a touch screen. */
@media (pointer: coarse) {
	.cs-arrow { width: 46px; height: 46px; }
}

/* Footer and inline text links sit at their line height, which is around 20px.
   Padding gives them a usable target without moving anything visually, since
   the surrounding layout uses gaps rather than tight stacking. */
@media (max-width: 900px) {
	footer a,
	.flyout-nav-container a,
	.nav-dropdown-item {
		display: inline-block;
		padding-block: 12px;
		touch-action: manipulation;
	}
	footer li { line-height: 1.2; }

	/* The wordmark is a link too, and sits at its own small height. */
	.brand-wordmark { display: inline-block; padding-block: 10px; }
}

/* Stat pairs are readable one per row on the narrowest phones. */
@media (max-width: 480px) {
	.as-figures,
	.ph-stats { grid-template-columns: 1fr; }
}

/* Stop iOS zooming the page when a form field is focused, which happens when
   the font is under 16px. */
@media (max-width: 900px) {
	input, select, textarea { font-size: 16px; }
}

/* --- Elementor form ------------------------------------------------------ */

/* Elementor's Form widget ships light-theme defaults, so it has to be dressed
   to match the rest of the site. Everything here targets Elementor's own
   classes; the theme's fallback form is styled by its Tailwind classes. */

.dm-elementor-form .elementor-field-group > label,
.dm-elementor-form .elementor-field-label {
	margin-bottom: 8px;
	font-family: 'Poppins', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6F6878;
}

.dm-elementor-form .elementor-field-textual {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid #3A3644;
	border-radius: 14px;
	background: #1C1A20;
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;   /* under 16px and iOS zooms the page on focus */
	line-height: 1.5;
	transition: border-color .3s ease, background-color .3s ease;
}

.dm-elementor-form .elementor-field-textual::placeholder { color: #6F6878; }

.dm-elementor-form .elementor-field-textual:focus {
	border-color: #FF2E88;
	background: #201D26;
	outline: none;
	box-shadow: none;
}

/* The select needs its own arrow once the native one is hidden. */
.dm-elementor-form select.elementor-field-textual {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236F6878' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 44px;
}

.dm-elementor-form .elementor-button[type="submit"] {
	width: 100%;
	padding: 16px 30px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, #FF2E88, #FF7A2F);
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: transform .3s ease, box-shadow .3s ease;
}
.dm-elementor-form .elementor-button[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -14px rgba(255, 46, 136, .6);
}

.dm-elementor-form .elementor-message {
	margin-top: 14px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
}
.dm-elementor-form .elementor-message-success { color: #4FE3E3; }
.dm-elementor-form .elementor-message-danger,
.dm-elementor-form .elementor-message-error { color: #FF4D5A; }

.dm-elementor-form .elementor-field-required .elementor-field-label::after {
	content: ' *';
	color: #FF2E88;
}

@media (max-width: 640px) {
	/* Elementor's percentage widths put two fields on a row; on a phone each
	   one needs the full width. */
	.dm-elementor-form .elementor-field-group { width: 100% !important; }
}

/* --- meta ads: creative player ------------------------------------------ */

.mc-section { background: #0A0A0C; padding-block: 56px; }
@media (min-width: 768px) { .mc-section { padding-block: 80px; } }

.mc-glow {
	position: absolute;
	top: 12%;
	right: -10%;
	width: min(760px, 90vw);
	height: 520px;
	background: radial-gradient(ellipse at center, rgba(255, 122, 47, 0.14), transparent 70%);
	filter: blur(70px);
	pointer-events: none;
}

.mc-eyebrow { color: #FF7A2F; }
.mc-head h2 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.06; letter-spacing: -0.025em; }

/* Stage on the left, playlist on the right — deliberately not the strip used
   on the homepage or the scrolling wall in the UGC section. */
.mc-player {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: 28px;
	margin-top: 52px;
	align-items: start;
}

.mc-stage {
	position: relative;
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.09);
	background: #0C0B0F;
	aspect-ratio: 4 / 5;
}

.mc-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s ease;
}
.mc-slide.is-active { opacity: 1; visibility: visible; }

.mc-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: #0C0B0F;
}

.mc-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 44px 22px 20px;
	background: linear-gradient(0deg, rgba(10, 10, 12, .94) 14%, transparent 100%);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}
.mc-caption-title { font-size: 15px; font-weight: 500; color: #fff; }
.mc-caption-metric {
	flex: 0 0 auto;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.1;
	text-align: right;
	background: linear-gradient(120deg, #FF2E88, #FFC13B);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.mc-caption-metric em {
	display: block;
	font-size: 10px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6F6878;
	-webkit-text-fill-color: #6F6878;
}

.mc-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.mc-item {
	position: relative;
	width: 100%;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 15px;
	background: #0C0B0F;
	text-align: left;
	cursor: pointer;
	overflow: hidden;
	transition: border-color .3s ease, background-color .3s ease;
}
.mc-item:hover { border-color: rgba(255, 122, 47, 0.34); }
.mc-item.is-active { border-color: rgba(255, 46, 136, 0.5); background: #131117; }

.mc-item-index { font-size: 11px; font-weight: 700; color: #6F6878; }
.mc-item.is-active .mc-item-index { color: #FF2E88; }

.mc-item-body { display: block; min-width: 0; }
.mc-item-title { display: block; font-size: 14px; font-weight: 500; color: #fff; }
.mc-item-metric { display: block; margin-top: 3px; font-size: 12px; color: #6F6878; }

/* Fills while the active clip plays, so the playlist shows where you are. */
.mc-item-bar {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 0;
	background: linear-gradient(90deg, #FF2E88, #FFC13B);
}
.mc-item.is-active .mc-item-bar { width: 100%; transition: width 6s linear; }

.mc-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin-top: 28px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}
.mc-stat { background: #0C0B0F; padding: 24px 26px; }
.mc-stat-value { display: block; font-size: 26px; line-height: 1; letter-spacing: -0.02em; color: #fff; }
.mc-stat-label { display: block; margin-top: 8px; font-size: 11px; color: #6F6878; }

@media (max-width: 900px) {
	.mc-player { grid-template-columns: 1fr; gap: 18px; }
	.mc-stage { aspect-ratio: 1 / 1; }
	.mc-stats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.mc-slide, .mc-item, .mc-item-bar { transition: none; }
}

/* --- Meta Ads hero ------------------------------------------------------- */

/* The page used to open with the card fan laid over the heading, so the first
   sentence was read against moving footage and lost. The copy leads now and the
   fan sits under it, which also gives the carousel room to be a carousel. */

.ma-hero {
	background: #000;
	padding-top: 170px;
	text-align: center;
	isolation: isolate;
}

.ma-hero-copy { max-width: 820px; margin: 0 auto; }

.ma-hero .container { max-width: 1180px; }

.ma-hero-glow {
	position: absolute;
	top: -180px;
	left: 50%;
	width: min(1180px, 128vw);
	height: 760px;
	transform: translateX(-50%);
	background:
		radial-gradient(46% 46% at 42% 44%, rgba(255, 46, 136, .24) 0%, transparent 70%),
		radial-gradient(42% 42% at 60% 24%, rgba(255, 122, 47, .15) 0%, transparent 70%);
	filter: blur(30px);
	pointer-events: none;
	z-index: 0;
}

.ma-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid rgba(255, 46, 136, .32);
	background: rgba(255, 46, 136, .08);
	color: #FFA8CC;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.ma-hero-badge::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #FF2E88;
	box-shadow: 0 0 0 4px rgba(255, 46, 136, .16);
}

.ma-hero-kicker {
	margin-top: 26px;
	color: #FFC13B;
	font-family: 'Poppins', sans-serif;
	font-size: clamp(15px, 1.5vw, 20px);
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -.01em;
}

.ma-hero-title {
	margin: 10px auto 0;
	max-width: 16ch;
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: clamp(40px, 6vw, 74px);
	font-weight: 600;
	line-height: 98%;
	letter-spacing: -.035em;
}

.ma-hero-lead {
	margin: 22px auto 0;
	max-width: 58ch;
	color: #A8A2B0;
	font-family: 'Poppins', sans-serif;
	font-size: clamp(15px, 1.3vw, 18px);
	font-weight: 400;
	line-height: 176%;
}

.ma-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 34px;
}

.ma-hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 60px;
	padding: 0 30px;
	border-radius: 999px;
	background: linear-gradient(96deg, #FF2E88 0%, #FF7A2F 100%);
	color: #0A0A0C;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	box-shadow: 0 12px 34px rgba(255, 46, 136, .26);
	transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}

.ma-hero-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(255, 46, 136, .34); }
.ma-hero-btn svg { transition: transform .3s ease; }
.ma-hero-btn:hover svg { transform: translateX(3px); }

.ma-hero-btn-ghost {
	display: inline-flex;
	align-items: center;
	height: 60px;
	padding: 0 28px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .16);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: border-color .3s ease, background .3s ease;
}

.ma-hero-btn-ghost:hover { border-color: rgba(255, 193, 59, .55); background: rgba(255, 193, 59, .08); }

.ma-hero-proof {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 56px;
	margin: 44px 0 0;
	padding: 26px 0 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.ma-hero-proof li { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.ma-hero-proof strong {
	color: #fff;
	font-size: clamp(22px, 2.3vw, 30px);
	font-weight: 600;
	letter-spacing: -.02em;
}

.ma-hero-proof span {
	color: #6F6878;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* --- Meta Ads hero: the creative fan ------------------------------------- */

.ma-reels {
	position: relative;
	z-index: 10;
	width: 100%;
	margin-top: clamp(48px, 5vw, 72px);
}

.ma-reels-stage {
	position: relative;
	height: 520px;
	cursor: grab;
	touch-action: pan-y;
	-webkit-mask: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
	        mask: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
}

.ma-reels.is-dragging .ma-reels-stage { cursor: grabbing; }

.ma-reels-track {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ma-reel {
	position: absolute;
	width: 248px;
	height: 440px;
	will-change: transform, opacity;
	transition: transform .78s cubic-bezier(.22, .61, .36, 1), opacity .5s ease;
}

/* Depth without transparency: the further a card is from the front, the more
   of this veil sits over it. The script writes --dim. */
.ma-reel::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 26px;
	background: #05050A;
	opacity: var(--dim, 0);
	transition: opacity .6s ease;
	pointer-events: none;
	z-index: 4;
}

/* The one place a card jumps is the far side of the ring, where it is already
   transparent — animating that jump is what used to make the loop visible. */
.ma-reel.is-far { transition: none; pointer-events: none; }
.ma-reel.is-far::after { transition: none; }
.ma-reels.is-dragging .ma-reel::after { transition: none; }
.ma-reels.is-dragging .ma-reel { transition: none; }

/* Before the script measures, show one card rather than a stack of nine. */
.ma-reels:not(.is-ready) .ma-reel:not(:first-child) { opacity: 0; }

.ma-reel-frame {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 26px;
	overflow: hidden;
	background: #101014;
	cursor: pointer;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
	-webkit-tap-highlight-color: transparent;
}

.ma-reel-frame::before {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 46%;
	background: linear-gradient(180deg, transparent, rgba(6, 5, 8, .86));
	z-index: 1;
	pointer-events: none;
}

.ma-reel-frame::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 26px;
	border: 1px solid rgba(255, 255, 255, .08);
	transition: border-color .4s ease, box-shadow .4s ease;
	pointer-events: none;
	z-index: 3;
}

.ma-reel.is-active .ma-reel-frame::after {
	border-color: rgba(255, 46, 136, .55);
	box-shadow: 0 0 0 1px rgba(255, 46, 136, .22), 0 0 46px rgba(255, 46, 136, .26);
}

.ma-reel-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: #0A0A0C;
}

.ma-reel-tag {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(10, 10, 12, .62);
	-webkit-backdrop-filter: blur(8px);
	        backdrop-filter: blur(8px);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: background .4s ease, color .4s ease, border-color .4s ease;
}

.ma-reel.is-active .ma-reel-tag { background: #FF2E88; border-color: #FF2E88; color: #0A0A0C; }

.ma-reel-label {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: -.01em;
	text-align: left;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .4s ease, transform .4s ease;
}

.ma-reel.is-active .ma-reel-label { opacity: 1; transform: none; }

.ma-reels-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 34px;
}

.ma-reels-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .03);
	color: #fff;
	cursor: pointer;
	transition: border-color .3s ease, background .3s ease, transform .3s ease;
}

.ma-reels-arrow:hover { border-color: rgba(255, 46, 136, .6); background: rgba(255, 46, 136, .12); transform: translateY(-1px); }

.ma-reels-dots {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ma-reels-dot {
	position: relative;
	display: block;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .2);
	cursor: pointer;
	transition: width .4s cubic-bezier(.22, 1, .36, 1), background .3s ease;
}

/* An 8px dot is not a tappable target; the hit area is grown without growing
   the mark. */
.ma-reels-dot::before { content: ''; position: absolute; inset: -16px; }

.ma-reels-dot.is-active { width: 26px; background: linear-gradient(90deg, #FF2E88, #FFC13B); }


@media (max-width: 1023px) {
	.ma-reels-stage { height: 442px; }
	.ma-reel { width: 198px; height: 352px; }
	.ma-reel::after, .ma-reel-frame, .ma-reel-frame::after { border-radius: 20px; }
}

@media (max-width: 640px) {
	.ma-hero { padding-top: 128px; text-align: center; }
	.ma-hero-title { max-width: none; }
	.ma-hero-lead { margin-inline: auto; }
	.ma-hero-ctas { justify-content: center; }
	.ma-hero-btn, .ma-hero-btn-ghost { width: 100%; justify-content: center; }
	/* Three across rather than two-then-one, which left the last figure
	   stranded on a line of its own. */
	.ma-hero-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }
	.ma-hero-proof li { align-items: center; text-align: center; }
	.ma-hero-proof strong { font-size: 21px; }
	.ma-hero-proof span { font-size: 9px; letter-spacing: .08em; }
	.ma-reels-stage { height: 330px; }
	.ma-reel { width: 158px; height: 282px; }
	.ma-reel::after, .ma-reel-frame, .ma-reel-frame::after { border-radius: 16px; }
	.ma-reel-tag { top: 10px; left: 10px; padding: 4px 9px; font-size: 9px; }
	.ma-reel-label { left: 10px; right: 10px; bottom: 10px; font-size: 11px; }
	.ma-reels-controls { gap: 14px; margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.ma-reel, .ma-reel::after, .ma-reels-dot, .ma-hero-btn { transition: none; }
}

/* --- header breakpoint --------------------------------------------------- */

/* The header markup asks for the pill nav at xl and the hamburger below it
   (`hidden xl:flex` / `xl:hidden`), but base.css loads after Tailwind and sets
   .nav-container to flex outright, only taking it away under 768px. Between
   768 and 1280 that left the desktop nav on at a width it does not fit — the
   wordmark sat on top of the first link and the last one ran off the edge —
   with no hamburger above 991px to fall back to. The markup's intent is
   restored here rather than in base.css, which is the original build. */
@media (max-width: 1279px) {
	.nav-container { display: none; }
	.menu-toggle { display: flex; }
}

/* --- site footer --------------------------------------------------------- */

/* One responsive layout in place of two copies of the markup. The giant
   outlined wordmark is the footer's one flourish: it runs under the columns
   and the bottom bar cuts it off, so the page ends on the brand without
   another block of filled type shouting over the call to action above. */

.sf {
	position: relative;
	background: #000;
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.sf-rule {
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 46, 136, .55) 30%, rgba(255, 193, 59, .55) 70%, transparent);
}

.sf-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 72px 32px 0;
}

.sf-grid {
	display: grid;
	grid-template-columns: 1.35fr .9fr .8fr 1fr;
	gap: 48px 40px;
	align-items: start;
}

/* brand ------------------------------------------------------------------ */

.sf-wordmark {
	display: inline-block;
	font-size: 26px;
	font-weight: 800;
	line-height: .92;
	letter-spacing: -.02em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}
.sf-wordmark span { display: block; }
.sf-wordmark-accent { color: #FF2E88; }

.sf-tagline {
	margin: 20px 0 0;
	max-width: 34ch;
	color: #fff;
	font-size: 15px;
	line-height: 170%;
}

.sf-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

.sf-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .03);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.sf-pill svg { color: #FF2E88; flex: 0 0 auto; }
.sf-pill:hover { border-color: rgba(255, 46, 136, .5); background: rgba(255, 46, 136, .08); }

/* columns ---------------------------------------------------------------- */

.sf-heading {
	margin: 6px 0 18px;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.sf-links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.sf-links a {
	display: inline-block;
	color: #fff;
	font-size: 14.5px;
	line-height: 150%;
	text-decoration: none;
	transition: color .25s ease, transform .25s ease;
}
.sf-links a:hover { color: #FFC13B; transform: translateX(3px); }

/* the WP menu adds its own classes; the same rules apply */
.sf-links li { margin: 0; padding: 0; }

.sf-cta-text {
	margin: 0 0 18px;
	color: #fff;
	font-size: 14px;
	line-height: 168%;
	max-width: 30ch;
}

.sf-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 50px;
	padding: 0 24px;
	border-radius: 999px;
	background: linear-gradient(96deg, #FF2E88 0%, #FF7A2F 100%);
	color: #0A0A0C;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 10px 28px rgba(255, 46, 136, .22);
	transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
.sf-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(255, 46, 136, .3); }
.sf-btn svg { transition: transform .3s ease; }
.sf-btn:hover svg { transform: translateX(3px); }

.sf-social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: color .25s ease;
}
.sf-social:hover { color: #fff; }
.sf-social svg { color: #FF2E88; }

.sf-ext { width: 11px; height: 11px; margin-left: 1px; opacity: .75; flex: 0 0 auto; }

/* the giant wordmark ----------------------------------------------------- */

.sf-giant {
	position: relative;
	margin-top: 48px;
	height: clamp(30px, 8vw, 118px);
	overflow: hidden;
	text-align: center;
	pointer-events: none;
	-webkit-mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .7) 78%, rgba(0, 0, 0, .15) 100%);
	        mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .7) 78%, rgba(0, 0, 0, .15) 100%);
}

.sf-giant span {
	display: block;
	/* Sized to the viewport so the whole word fits at every width; the floor
	   is what a 390px phone can hold. */
	font-size: clamp(34px, 9.8vw, 146px);
	font-weight: 800;
	line-height: .82;
	letter-spacing: -.035em;
	text-transform: uppercase;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 46, 136, .72);
	background: linear-gradient(180deg, rgba(255, 46, 136, .26), rgba(255, 46, 136, .02));
	-webkit-background-clip: text;
	        background-clip: text;
}

/* bottom bar -------------------------------------------------------------- */

.sf-bottom { border-top: 1px solid rgba(255, 255, 255, .08); }

.sf-bottom-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	padding-top: 20px;
	padding-bottom: 22px;
}

.sf-bottom-row p {
	margin: 0;
	color: #fff;
	font-size: 12.5px;
	line-height: 150%;
}

.sf-credit { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

.sf-credit a {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: #FF2E88;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 46, 136, .5);
	transition: color .25s ease, border-color .25s ease;
}
.sf-credit a:hover { color: #FFC13B; border-color: #FFC13B; }

@media (max-width: 1023px) {
	.sf-grid { grid-template-columns: 1fr 1fr; gap: 44px 32px; }
	.sf-brand { grid-column: 1 / -1; }
	.sf-cta { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
	.sf-inner { padding: 52px 20px 0; }
	.sf-grid { gap: 36px 24px; }
	.sf-tagline { max-width: none; }
	.sf-links a { font-size: 14px; }
	/* The touch-target padding on footer links already gives each row 45px;
	   the grid gap on top of it spread seven services over 400px. */
	.sf-links { gap: 2px; }
	.sf-pill { padding-block: 11px; }
	.sf-giant { margin-top: 40px; }
	.sf-bottom-row { flex-direction: column; align-items: flex-start; padding-top: 16px; padding-bottom: 18px; }
}

/* --- Meta Ads: What We Handle -------------------------------------------- */

.mg-section { background: #0A0A0C; padding-block: 56px; }
@media (min-width: 768px) { .mg-section { padding-block: 80px; } }

.mg-glow {
	position: absolute;
	top: -120px;
	left: 50%;
	width: min(1000px, 120vw);
	height: 640px;
	transform: translateX(-50%);
	background: radial-gradient(48% 48% at 50% 40%, rgba(255, 46, 136, .16) 0%, transparent 70%);
	filter: blur(30px);
	pointer-events: none;
}

.mg-head { text-align: center; max-width: 820px; margin: 0 auto; }

.mg-title {
	margin: 0;
	color: #fff;
	font-size: clamp(32px, 4.6vw, 56px);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -.025em;
}
.mg-title .mg-dim { color: #A8A2B0; font-weight: 400; }

.mg-intro {
	margin: 18px auto 0;
	max-width: 62ch;
	color: #A8A2B0;
	font-size: clamp(15px, 1.3vw, 17px);
	line-height: 176%;
}

.mg-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 48px 56px;
	align-items: center;
	margin-top: 56px;
	padding: 48px;
	border-radius: 28px;
	background: linear-gradient(168deg, #131117 0%, #0D0C10 100%);
	position: relative;
	isolation: isolate;
}

.mg-card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(140deg, rgba(255, 46, 136, .55), rgba(255, 122, 47, .25) 50%, rgba(255, 193, 59, .35));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
}

.mg-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #FFC13B;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.mg-eyebrow::before { content: ''; width: 22px; height: 1px; background: #FFC13B; }

.mg-card-title {
	margin: 16px 0 0;
	color: #fff;
	font-size: clamp(28px, 3.2vw, 40px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.025em;
}

.mg-text {
	margin: 18px 0 0;
	color: #A8A2B0;
	font-size: 16px;
	line-height: 176%;
	max-width: 46ch;
}
.mg-text b { color: #fff; font-weight: 600; }

.mg-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 30px;
	height: 56px;
	padding: 0 28px;
	border-radius: 999px;
	background: linear-gradient(96deg, #FF2E88 0%, #FF7A2F 100%);
	color: #0A0A0C;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 12px 30px rgba(255, 46, 136, .24);
	transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
.mg-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(255, 46, 136, .32); }
.mg-btn svg { transition: transform .3s ease; }
.mg-btn:hover svg { transform: translateX(3px); }

/* the workflow rail */
.mg-steps {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px;
}

.mg-steps::before {
	content: '';
	position: absolute;
	top: 22px;
	bottom: 22px;
	left: 19px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, #FF2E88, #FF7A2F 55%, #FFC13B);
	opacity: .55;
}

.mg-step {
	position: relative;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	padding: 10px 14px 10px 0;
	border-radius: 14px;
	transition: background .3s ease;
}
.mg-step:hover { background: rgba(255, 255, 255, .03); }

.mg-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #101014;
	border: 1px solid rgba(255, 46, 136, .4);
	box-shadow: 0 0 0 5px #0F0E12;
	color: #FF2E88;
	font-size: 12px;
	font-weight: 700;
	position: relative;
	z-index: 1;
	transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.mg-step:hover .mg-step-num { background: #FF2E88; border-color: #FF2E88; color: #0A0A0C; }

.mg-step-body { display: flex; flex-direction: column; gap: 3px; padding-top: 8px; }
.mg-step-title { color: #fff; font-size: 15px; font-weight: 600; line-height: 140%; letter-spacing: -.01em; }
.mg-step-note  { color: #8A8394; font-size: 13.5px; line-height: 160%; }

@media (max-width: 1023px) {
	.mg-card { grid-template-columns: 1fr; padding: 36px 28px; gap: 36px; }
	.mg-text { max-width: none; }
}
@media (max-width: 640px) {
	.mg-card { margin-top: 40px; padding: 28px 20px; border-radius: 22px; }
	.mg-step { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
	.mg-step-num { width: 36px; height: 36px; font-size: 11px; }
	.mg-steps::before { left: 17px; }
	.mg-btn { width: 100%; justify-content: center; }
}

/* --- Meta Ads: Why Us ---------------------------------------------------- */

.mr-section { background: #0A0A0C; }

.mr-glow {
	position: absolute;
	top: 10%;
	left: -160px;
	width: 640px;
	height: 640px;
	background: radial-gradient(50% 50% at 50% 50%, rgba(255, 46, 136, .18) 0%, transparent 70%);
	filter: blur(30px);
	pointer-events: none;
}

.mr-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 48px 72px;
	align-items: center;
}

.mr-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #FFC13B;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.mr-eyebrow::before { content: ''; width: 22px; height: 1px; background: #FFC13B; }

.mr-title {
	margin: 16px 0 0;
	color: #fff;
	font-size: clamp(32px, 4.6vw, 56px);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -.025em;
	max-width: 14ch;
}

.mr-sub {
	margin: 14px 0 0;
	color: #FF2E88;
	font-size: clamp(18px, 2vw, 24px);
	font-weight: 500;
	line-height: 1.3;
}

.mr-text {
	margin: 20px 0 0;
	color: #A8A2B0;
	font-size: 16px;
	line-height: 176%;
	max-width: 50ch;
}

.mr-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 30px;
	height: 56px;
	padding: 0 28px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .16);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.mr-btn:hover { border-color: rgba(255, 46, 136, .6); background: rgba(255, 46, 136, .1); transform: translateY(-2px); }
.mr-btn svg { transition: transform .3s ease; }
.mr-btn:hover svg { transform: translateX(3px); }

.mr-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.mr-item {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
	padding: 18px 22px;
	border-radius: 18px;
	background: linear-gradient(168deg, #131117 0%, #0D0C10 100%);
	border: 1px solid rgba(255, 255, 255, .07);
	transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.mr-item:hover {
	border-color: rgba(255, 46, 136, .4);
	transform: translateX(4px);
	box-shadow: 0 18px 40px -24px rgba(255, 46, 136, .5);
}

.mr-item-num {
	color: #FF2E88;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	min-width: 22px;
}

.mr-item-body { display: flex; flex-direction: column; gap: 3px; }
.mr-item-title { color: #fff; font-size: 16px; font-weight: 600; line-height: 140%; letter-spacing: -.01em; }
.mr-item-text  { color: #8A8394; font-size: 13.5px; line-height: 160%; }

.mr-item-check {
	color: #FFC13B;
	opacity: .55;
	transition: opacity .3s ease, transform .3s ease;
}
.mr-item:hover .mr-item-check { opacity: 1; transform: scale(1.1); }

@media (max-width: 1023px) {
	.mr-grid { grid-template-columns: 1fr; gap: 40px; }
	.mr-title { max-width: none; }
	.mr-text { max-width: none; }
}
@media (max-width: 640px) {
	.mr-item { padding: 14px 16px; gap: 12px; border-radius: 14px; }
	.mr-btn { width: 100%; justify-content: center; }
}

/* --- case studies: slider and grid ---------------------------------------- */

.csl-section { background: #0A0A0C; }
.csg-section { background: #0A0A0C; }

.csl-glow {
	position: absolute;
	top: 20%;
	right: -200px;
	width: 700px;
	height: 700px;
	background: radial-gradient(50% 50% at 50% 50%, rgba(255, 46, 136, .14) 0%, transparent 70%);
	filter: blur(30px);
	pointer-events: none;
}

.csl-head { text-align: center; max-width: 760px; margin: 0 auto 48px; }

.csl-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #FFC13B;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.csl-eyebrow::before,
.csl-eyebrow::after { content: ''; width: 22px; height: 1px; background: #FFC13B; }

.csl-title {
	margin: 16px 0 0;
	color: #fff;
	font-size: clamp(32px, 4.6vw, 56px);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -.025em;
}

.csl-intro {
	margin: 16px auto 0;
	max-width: 56ch;
	color: #A8A2B0;
	font-size: clamp(15px, 1.3vw, 17px);
	line-height: 176%;
}

/* one slide */
.csl-slide {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 40px 56px;
	align-items: center;
	padding: 28px;
	border-radius: 28px;
	background: linear-gradient(168deg, #131117 0%, #0D0C10 100%);
	border: 1px solid rgba(255, 255, 255, .07);
}

.csl-cover,
.csg-cover {
	position: relative;
	display: block;
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: #101014;
}
.csl-cover img:first-child,
.csg-cover img:first-child {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.csl-cover:hover img:first-child,
.csg-card:hover .csg-cover img:first-child { transform: scale(1.04); }

.csl-logo {
	position: absolute;
	left: 18px;
	bottom: 18px;
	display: inline-flex;
	align-items: center;
	height: 46px;
	padding: 0 16px;
	border-radius: 999px;
	background: rgba(10, 10, 12, .72);
	border: 1px solid rgba(255, 255, 255, .12);
	-webkit-backdrop-filter: blur(8px);
	        backdrop-filter: blur(8px);
}
.csl-logo img { height: 20px; width: auto; max-width: 120px; object-fit: contain; display: block; }

.csl-tag {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 46, 136, .32);
	background: rgba(255, 46, 136, .08);
	color: #FFA8CC;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.csl-headline {
	margin: 18px 0 0;
	color: #fff;
	font-size: clamp(26px, 2.8vw, 36px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.025em;
}
.csl-accent {
	display: block;
	background: linear-gradient(96deg, #FF2E88, #FF7A2F 60%, #FFC13B);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
}

.csl-summary {
	margin: 16px 0 0;
	color: #A8A2B0;
	font-size: 15px;
	line-height: 176%;
	max-width: 50ch;
}

.csl-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}
.csl-stats > * {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .07);
}
.csl-stats strong { color: #fff; font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.csl-stats span   { color: #6F6878; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.35; }

.csl-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .3s ease, gap .3s ease;
}
.csl-link svg { transition: transform .3s ease; }
.csl-link:hover, .csg-card:hover .csl-link { color: #FFC13B; gap: 12px; }
.csl-link:hover svg, .csg-card:hover .csl-link svg { transform: translateX(2px); }

/* the grid on the Case Studies page */
.csg-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

.csg-card {
	display: flex;
	flex-direction: column;
	padding: 18px;
	border-radius: 24px;
	background: linear-gradient(168deg, #131117 0%, #0D0C10 100%);
	border: 1px solid rgba(255, 255, 255, .07);
	text-decoration: none;
	transition: transform .4s cubic-bezier(.22, 1, .36, 1), border-color .4s ease, box-shadow .4s ease;
}
.csg-card:hover {
	transform: translateY(-6px);
	border-color: rgba(255, 46, 136, .4);
	box-shadow: 0 26px 54px -22px rgba(255, 46, 136, .42);
}

.csg-body { display: flex; flex-direction: column; align-items: flex-start; padding: 22px 10px 8px; }
.csg-body > .csl-stats { align-self: stretch; }
.csg-headline { display: block; margin-top: 16px; color: #fff; font-size: clamp(24px, 2.3vw, 30px); font-weight: 600; line-height: 1.12; letter-spacing: -.025em; }
.csg-summary  { display: block; margin-top: 14px; color: #A8A2B0; font-size: 14.5px; line-height: 172%; }
.csg-stats    { margin-top: 20px; }

@media (max-width: 1023px) {
	.csl-slide { grid-template-columns: 1fr; gap: 28px; padding: 20px; }
	.csl-summary { max-width: none; }
	.csg-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.csl-head { margin-bottom: 36px; }
	.csl-slide { padding: 14px; border-radius: 22px; }
	.csl-cover, .csg-cover { border-radius: 16px; }
	.csl-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.csl-stats > * { padding: 10px 10px; }
	.csl-stats strong { font-size: 18px; }
	.csl-stats span { font-size: 9px; letter-spacing: .06em; }
	.csg-card { padding: 12px; }
	.csg-body { padding: 18px 6px 6px; }
}

/* --- why work with us: three product screens ------------------------------ */

.gp-section { background: #0A0A0C; }

.gp-glow {
	position: absolute;
	top: 30%;
	left: 50%;
	width: min(1100px, 130vw);
	height: 700px;
	transform: translateX(-50%);
	background: radial-gradient(46% 46% at 50% 50%, rgba(255, 46, 136, .14) 0%, transparent 70%);
	filter: blur(30px);
	pointer-events: none;
}

.gp-head { text-align: center; max-width: 820px; margin: 0 auto; }

.gp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #FFC13B;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.gp-eyebrow::before,
.gp-eyebrow::after { content: ''; width: 22px; height: 1px; background: #FFC13B; }

.gp-title {
	margin: 16px 0 0;
	color: #fff;
	font-size: clamp(30px, 4.2vw, 50px);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -.025em;
}
.gp-title .gp-dim { color: #A8A2B0; font-weight: 400; }

.gp-intro {
	margin: 18px auto 0;
	max-width: 64ch;
	color: #A8A2B0;
	font-size: clamp(15px, 1.3vw, 17px);
	line-height: 176%;
}

.gp-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 56px;
	align-items: start;
}

/* one column is a phone: a dark frame with a gradient edge, a caption card
   on top and the screen beneath */
.gp-col {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px;
	border-radius: 30px;
	background: #0F0E12;
	isolation: isolate;
}
.gp-col::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(160deg, rgba(255, 46, 136, .5), rgba(255, 255, 255, .06) 45%, rgba(255, 193, 59, .4));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
}
.gp-col-mid { margin-top: -28px; }

.gp-caption {
	padding: 22px 22px 20px;
	border-radius: 20px;
	background: linear-gradient(168deg, #17141C 0%, #110F15 100%);
	border: 1px solid rgba(255, 255, 255, .06);
}
.gp-caption h3 {
	margin: 0;
	color: #fff;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.015em;
}
.gp-caption p {
	margin: 8px 0 0;
	color: #A8A2B0;
	font-size: 13.5px;
	line-height: 168%;
}
.gp-caption-end { margin-top: 0; }

/* the screen */
.gp-panel {
	padding: 18px 18px 20px;
	border-radius: 20px;
	background: #131117;
	border: 1px solid rgba(255, 255, 255, .07);
}

.gp-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 12px;
	margin-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.gp-panel-name { color: #fff; font-size: 13px; font-weight: 600; letter-spacing: -.01em; }

.gp-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .1);
	background: rgba(255, 255, 255, .04);
	color: #D6D2DC;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.gp-pill-live { color: #FF2E88; border-color: rgba(255, 46, 136, .35); background: rgba(255, 46, 136, .08); }
.gp-pill-live::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #FF2E88;
	box-shadow: 0 0 0 3px rgba(255, 46, 136, .18);
}

.gp-panel-title { margin: 0 0 14px; color: #fff; font-size: 15px; font-weight: 500; line-height: 1.3; }
.gp-panel-sub { display: block; margin-top: 3px; color: #6F6878; font-size: 11.5px; font-weight: 400; }

/* four KPI tiles, two by two — the panel is a phone's width */
.gp-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gp-stats li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .06);
}
.gp-stats strong { color: #fff; font-size: 22px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.gp-stats span { color: #6F6878; font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }

.gp-progress { margin-top: 14px; }
.gp-progress-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.gp-progress-row span { color: #A8A2B0; font-size: 12px; }
.gp-progress-row strong { color: #FFC13B; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }

.gp-bar {
	display: block;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
	overflow: hidden;
}
.gp-bar > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #FF2E88, #FF7A2F 60%, #FFC13B);
}
.gp-bar-thin { height: 6px; }

.gp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.gp-chips span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .08);
	color: #D6D2DC;
	font-size: 11px;
	font-weight: 500;
}
.gp-chips span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #FF7A2F; }
.gp-chips-verdict span:nth-child(1)::before { background: #FF2E88; }
.gp-chips-verdict span:nth-child(2)::before { background: #FFC13B; }
.gp-chips-verdict span:nth-child(3)::before { background: #6F6878; }

/* the queue */
.gp-queue { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.gp-queue-row {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .06);
}
.gp-queue-num { color: #6F6878; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.gp-queue-name { color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-queue-state {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 9px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}
.gp-queue-state::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.is-done   .gp-queue-state { color: #FF2E88; background: rgba(255, 46, 136, .1); }
.is-review .gp-queue-state { color: #FFC13B; background: rgba(255, 193, 59, .1); }
.is-wait   .gp-queue-state { color: #FF7A2F; background: rgba(255, 122, 47, .1); }
.is-queue  .gp-queue-state { color: #8A8394; background: rgba(255, 255, 255, .05); }
.is-queue  .gp-queue-name { color: #A8A2B0; }

.gp-panel-foot { margin: 14px 0 0; color: #6F6878; font-size: 11.5px; line-height: 160%; }

/* the report */
.gp-report { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.gp-report li { display: grid; gap: 6px; }
.gp-report-label { color: #D6D2DC; font-size: 12px; font-weight: 500; }

.gp-tiers { margin-top: 18px; }
.gp-tiers-label { display: block; color: #6F6878; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.gp-tiers-bar { display: flex; gap: 3px; height: 10px; border-radius: 999px; overflow: hidden; }
.gp-tiers-bar span { display: block; height: 100%; }
.gp-tiers-bar span:nth-child(1) { background: #FF2E88; }
.gp-tiers-bar span:nth-child(2) { background: #FF7A2F; }
.gp-tiers-bar span:nth-child(3) { background: #FFC13B; }
.gp-tiers-bar span:nth-child(n+4) { background: #6F6878; }
.gp-tiers-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.gp-tiers-key span { display: inline-flex; align-items: center; gap: 6px; color: #A8A2B0; font-size: 11px; }
.gp-tiers-key i { width: 8px; height: 8px; border-radius: 2px; background: #6F6878; }
.gp-tiers-key span:nth-child(1) i { background: #FF2E88; }
.gp-tiers-key span:nth-child(2) i { background: #FF7A2F; }
.gp-tiers-key span:nth-child(3) i { background: #FFC13B; }

@media (max-width: 1023px) {
	.gp-grid { grid-template-columns: 1fr; gap: 20px; max-width: 520px; margin-inline: auto; }
	.gp-col-mid { margin-top: 0; }
}
@media (max-width: 640px) {
	.gp-grid { margin-top: 40px; }
	.gp-col { padding: 10px; border-radius: 24px; }
	.gp-caption { padding: 18px 18px 16px; }
	.gp-panel { padding: 16px 14px 18px; }
	.gp-stats strong { font-size: 20px; }
}

/* --- homepage hero: headline, kicker, proof row --------------------------- */

/* Three sentences, one per line, the last one carrying the accent. The old
   single-clause headline sat at 74px; this one needs a step down to stay
   inside three lines on a laptop. */
.hero-headline {
	max-width: 17ch;
	margin-inline: auto;
	font-size: clamp(30px, 4.6vw, 54px);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -.03em;
}
.hero-headline span { display: block; }
.hero-headline .hero-accent {
	background: linear-gradient(96deg, #FF2E88, #FF7A2F 55%, #FFC13B);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
}

.hero-kicker {
	margin-bottom: 14px;
	color: #FFC13B;
	font-size: clamp(15px, 1.6vw, 20px);
	font-weight: 500;
	line-height: 1.25;
}

.hero-proof {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1px;
	max-width: 1120px;
	margin: 44px auto 0;
	padding: 0;
	list-style: none;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 18px;
	background: rgba(255, 255, 255, .08);
	overflow: hidden;
}
.hero-proof li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 16px;
	background: #0A0A0C;
	text-align: center;
}
.hero-proof strong {
	color: #fff;
	font-size: clamp(19px, 1.9vw, 25px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.02em;
}
.hero-proof span {
	color: #6F6878;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 1.35;
	text-transform: uppercase;
}

@media (max-width: 1023px) {
	.hero-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.hero-headline { max-width: none; }
	.hero-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
	.hero-proof li { padding: 14px 10px; }
	.hero-proof span { font-size: 9.5px; letter-spacing: .06em; }
}

/* --- inner page hero: a muted setup line --------------------------------- */

/* A two-tone title — a muted setup line, then the statement. The reference the
   client sent is set heavy and tight, so a title carrying one goes a size up
   and a weight up; the setup line stays a step behind it. */
.ph-title.is-two-tone {
	font-size: clamp(42px, 7vw, 82px);
	font-weight: 700;
	line-height: 0.96;
	letter-spacing: -0.04em;
}

.ph-title .ph-muted {
	display: block;
	color: #5C5668;
	font-weight: 600;
}