/* ==========================================================================
   messe-display — Services
   Figma page SERVICES, frame "Service page" (7:16), 1440x3794.
   services pad 60/0; services-accordion pad 0/60; each item is separated by a
   1px #C5A059 rule; header-row 130 tall with 48px vertical padding;
   content-body has a 710 text column and a 498 image column, gap 32.
   ========================================================================== */

.md-services { padding: 60px 0; }
.md-accordion { padding: 0 60px; }

.md-acc {
	border-top: 1px solid var(--md-gold);
}
.md-acc:last-of-type { border-bottom: 1px solid var(--md-gold); }

.md-acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	width: 100%;
	padding: 48px 0;
	text-align: left;
	cursor: pointer;
	list-style: none;
}
.md-acc__head::-webkit-details-marker { display: none; }

.md-acc__icon {
	position: relative;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
}
/* +/- drawn from two rules so the open state only has to hide one. */
.md-acc__icon::before,
.md-acc__icon::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 15px;
	width: 24px;
	height: 2px;
	background: var(--md-ink);
	transition: transform .2s ease, opacity .2s ease;
}
.md-acc__icon::after { transform: rotate(90deg); }
.md-acc[open] .md-acc__icon::after { transform: rotate(0deg); opacity: 0; }

/* Proportional, not fixed: 710+498+32 gap = 1240 plus the 120px of section
   padding needs 1360px, so fixed columns overflowed every viewport under that. */
.md-acc__body {
	display: grid;
	grid-template-columns: minmax(0, 710fr) minmax(0, 498fr);
	gap: 32px;
	justify-content: space-between;
	padding-bottom: 80px;
}
/* Figma alternates which side the photography sits on, item by item. */
.md-acc__body--media-first { grid-template-columns: minmax(0, 498fr) minmax(0, 710fr); }
.md-acc__body--media-first .md-acc__media { order: 1; }
.md-acc__body--media-first .md-acc__text  { order: 2; }

.md-acc__text > p { margin: 0 0 32px; }
.md-acc__text > p:last-child { margin-bottom: 0; }

.md-acc__list { display: flex; flex-direction: column; gap: 12px; }
.md-acc__list li {
	position: relative;
	padding-left: 22px;
	font-family: var(--md-font-body);
	font-size: 18px;
	line-height: 28.8px;
	color: var(--md-ink-2);
}
.md-acc__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 12px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--md-purple);
}

/* image-column: itemSpacing 24, photos are 498 wide with cornerRadius 4. */
.md-acc__media { display: flex; flex-direction: column; gap: 24px; }
.md-acc__media img {
	width: 100%;
	border-radius: var(--md-r-4);
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Facts bar — Figma "facts-figures" 1383x161 on #342155, pad 38/70,
   three evenly spread stats.
   -------------------------------------------------------------------------- */
.md-facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin: 0 28px;
	padding: 38px 70px;
	background: var(--md-purple);
}
.md-facts__item { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 1099px) {
	.md-accordion { padding-inline: 32px; }
	.md-acc__body,
	.md-acc__body--media-first { grid-template-columns: 1fr; }
	.md-acc__body--media-first .md-acc__media { order: 2; }
	.md-acc__body--media-first .md-acc__text  { order: 1; }
	.md-facts { margin-inline: 16px; padding-inline: 32px; }
}
@media (max-width: 759px) {
	.md-services { padding: 32px 0; }
	.md-accordion { padding-inline: 16px; }
	.md-acc__head { padding: 28px 0; }
	.md-acc-title { font-size: 20px; line-height: 26px; }
	.md-acc__body { padding-bottom: 40px; }
	.md-facts { grid-template-columns: 1fr; gap: 28px; padding: 28px 20px; }
}