/* ============================================================
   00b — Solution section (LIGHT THEME).
   Deliberate exception to the red/white/black system, per client
   request. Everything is scoped under .solution so no style can
   leak into the dark site.
   ============================================================ */
.solution {
	--sol-ink: #111111;
	--sol-ink-60: rgba(17, 17, 17, 0.62);
	--sol-ink-40: rgba(17, 17, 17, 0.40);
	--sol-line: rgba(17, 17, 17, 0.12);
	--sol-green: #22C55E;
	--sol-orange: #F97316;
	--sol-radius: 26px;

	background: #FFFFFF;
	color: var(--sol-ink);
	padding: 120px var(--section-pad-x);
	position: relative;
	z-index: 2;
}

.solution__inner {
	max-width: var(--content-max);
	margin: 0 auto;
}

/* ---- Two-column split ---- */
.solution__split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: start;
}

.solution__title {
	font-family: var(--font);
	font-size: clamp(2.1rem, 3.6vw, 3.3rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.035em;
	color: var(--sol-ink);
	margin: 0 0 22px;
}

.solution__lead {
	font-size: 17px;
	line-height: 1.65;
	color: var(--sol-ink-60);
	max-width: 46ch;
	margin: 0 0 34px;
}

.solution__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 58px;
	padding: 0 38px;
	border-radius: 999px;
	background: var(--sol-ink);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}

.solution__cta:hover {
	background: #000;
	color: #fff;
	transform: translateY(-2px);
}

/* ---- Numbered accordion list ---- */
.solution__list {
	margin-top: 60px;
	border-top: 1px solid var(--sol-line);
}

.sol-item {
	border-bottom: 1px solid var(--sol-line);
}

.sol-item__head {
	width: 100%;
	display: grid;
	grid-template-columns: 46px 1fr 28px;
	align-items: center;
	gap: 10px;
	background: none;
	border: 0;
	padding: 26px 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--font);
}

.sol-item__num {
	font-size: 13px;
	font-weight: 600;
	color: var(--sol-ink-40);
	letter-spacing: 0.02em;
	transition: color 0.3s var(--ease);
}

.sol-item__title {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--sol-ink-40);
	transition: color 0.3s var(--ease);
	line-height: 1.35;
}

.sol-item.is-open .sol-item__num,
.sol-item.is-open .sol-item__title,
.sol-item__head:hover .sol-item__title {
	color: var(--sol-ink);
}

.sol-item__arrow {
	width: 24px;
	height: 24px;
	color: var(--sol-ink);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.sol-item__arrow svg {
	width: 100%;
	height: 100%;
}

.sol-item.is-open .sol-item__arrow {
	opacity: 1;
	transform: translateX(0);
}

.sol-item__panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.4s var(--ease);
}

.sol-item__desc {
	margin: 0;
	padding: 0 60px 26px 46px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--sol-ink-60);
}

/* ---- Right media panel ---- */
.solution__media {
	border-radius: var(--sol-radius);
	overflow: hidden;
	background: #F6F3EE;
}

.solution__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Full-bleed band with chat bubbles ---- */
.solution__band {
	position: relative;
	margin-top: 110px;
	border-radius: var(--sol-radius);
	overflow: hidden;
	background: #F1ECE3;
}

.solution__band-img {
	display: block;
	width: 100%;
	height: auto;
}

.sol-bubble {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: min(420px, 46%);
	animation: solFloat 0.7s var(--ease) both;
}

.sol-bubble--user {
	left: 12%;
	top: 44%;
	align-items: flex-end;
	animation-delay: 0.15s;
}

.sol-bubble--ai {
	left: 8%;
	top: 62%;
	animation-delay: 0.45s;
}

@keyframes solFloat {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

.sol-bubble__tag {
	align-self: flex-start;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #fff;
	padding: 5px 12px;
	border-radius: 999px;
	line-height: 1;
}

.sol-bubble--user .sol-bubble__tag {
	align-self: flex-end;
}

.sol-bubble__tag--green  { background: var(--sol-green); }
.sol-bubble__tag--orange { background: var(--sol-orange); }

.sol-bubble__msg {
	background: #fff;
	color: var(--sol-ink);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.45;
	padding: 16px 22px;
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba(17, 17, 17, 0.14);
}

@media (prefers-reduced-motion: reduce) {
	.sol-bubble { animation: none; }
	.sol-item__panel { transition: none; }
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.solution__split {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.solution__media {
		max-height: 520px;
	}

	.sol-bubble { max-width: 60%; }
	.sol-bubble--user { left: 8%; top: 38%; }
	.sol-bubble--ai   { left: 6%; top: 60%; }
	.sol-bubble__msg  { font-size: 14px; padding: 13px 17px; }
}

@media (max-width: 768px) {
	.solution {
		padding: 84px var(--section-pad-x);
	}

	.solution__list { margin-top: 42px; }

	.sol-item__head {
		grid-template-columns: 36px 1fr 22px;
		padding: 20px 0;
	}

	.sol-item__title { font-size: 16.5px; }
	.sol-item__desc  { padding: 0 0 20px 36px; font-size: 14.5px; }

	.solution__cta { width: 100%; }

	.solution__band { margin-top: 64px; }

	/* Bubbles below the artwork on small screens so nothing overlaps badly. */
	.solution__band {
		background: #F1ECE3;
	}

	.sol-bubble {
		position: static;
		max-width: 100%;
		margin: 0 16px 14px;
		animation: none;
	}

	.sol-bubble--user { align-items: flex-start; }
	.sol-bubble--user .sol-bubble__tag { align-self: flex-start; }
	.sol-bubble:first-of-type { margin-top: -28px; }
	.sol-bubble:last-of-type  { margin-bottom: 22px; }
	.sol-bubble__msg { box-shadow: 0 10px 26px rgba(17,17,17,0.10); }
}

/* Brand film in the solution band */
.solution__video{display:block;width:100%;height:auto;object-fit:cover}
@media (prefers-reduced-motion: reduce){.solution__video{display:none}.solution__band{background-image:var(--sol-poster);background-size:cover;background-position:center;min-height:320px}}