/* ==========================================================================
   DSMS — New UI service pages (Figma Leasing management 88:5050, 1440 / content 1200).
   Shared tokens/buttons: chrome.css · shared heading & sections: home.css
   ========================================================================== */

/* ---------- Hero ---------- */
.sv-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(320px, 31.39vw, max(452px, 70svh)); /* 1440×452; grows with the width on larger screens */
	padding: 34px var(--hm-gutter);
	overflow: hidden;
}
.sv-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.sv-hero__box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 987px;
	padding: 40px 48px;
	background: rgba(0, 20, 22, .6);
	text-align: center;
}
.sv-hero__title { margin: 0; color: #fff; font-size: 40px; font-weight: 700; line-height: normal; }
.sv-hero__text { max-width: 891px; margin: 0; color: #f4f3f6; font-size: 18px; line-height: 1.5; }

/* ---------- Photo cards (2 per row) ---------- */
.sv-cards__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	margin-top: 32px;
}
.sv-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 610px;
	margin: 0;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	background: #e9eaec;
}
.sv-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .6s ease;
}
.sv-card:hover img { transform: scale(1.03); }
.sv-card__caption {
	position: relative;
	width: 100%;
	padding: 16px 24px;
	background: linear-gradient(180deg, rgba(28, 15, 19, 0) 0%, rgba(28, 15, 19, .6) 100%);
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	line-height: normal;
	text-align: center;
	text-transform: uppercase;
}
a.sv-card:hover .sv-card__caption { color: var(--hm-primary); }

/* ---------- Units: photo + title with orange bar (grey band) ---------- */
.sv-units__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	margin-top: 32px;
}
.sv-unit { display: flex; flex-direction: column; gap: 24px; }
.sv-unit__media { height: 625px; overflow: hidden; }
.sv-unit__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-unit__body { display: flex; flex-direction: column; gap: 12px; }
.sv-unit__title {
	margin: 0;
	padding-left: 16px;
	border-left: 6px solid var(--hm-primary);
	color: #000;
	font-size: 24px;
	font-weight: 700;
	line-height: normal;
}
.sv-unit__text { margin: 0; color: var(--hm-text); font-size: 16px; line-height: 24px; }

/* ---------- Key steps (3 per row; a last, incomplete row is centred) ---------- */
.sv-steps__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px 32px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}
.sv-step {
	display: flex;
	flex: 0 0 calc((100% - 64px) / 3);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 166px;
	padding: 24px 20px;
	background: var(--hm-gray-bg);
	text-align: center;
}
.sv-step__icon { display: flex; align-items: center; justify-content: center; width: 86px; height: 86px; padding: 4px 6px; }
.sv-step__icon svg,
.sv-step__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sv-step__title { margin: 0; color: var(--hm-black); font-size: 18px; font-weight: 700; line-height: 1.5; }
.sv-step__text { margin: 2px 0 0; color: var(--hm-text); font-size: 14px; line-height: 20px; }

/* ---------- Photo slider (Interior Design) ---------- */
.sv-gallery { overflow: hidden; overflow: clip; }
.sv-gallery__stage { --per: 2; --gap: 32px; margin-top: 32px; }
.sv-gallery__track { position: relative; aspect-ratio: 1200 / 486; touch-action: pan-y; user-select: none; }
.sv-gallery__slide {
	--off: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: var(--slide-w, calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)));
	height: 100%;
	margin: 0;
	overflow: hidden;
	background: #e9eaec;
	transform: translateX(calc(var(--off) * (100% + var(--gap))));
	transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.sv-gallery__slide img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.sv-gallery__slide::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.sv-gallery__slide.is-peek { cursor: pointer; }
.sv-gallery__slide.is-peek::after { opacity: 1; }
.sv-gallery__slide.is-far { visibility: hidden; }
.sv-gallery__slide.no-anim { transition: none; }
.sv-gallery .hm-dots { margin-top: 32px; }

/* ---------- Rows: photo + grey text panel, alternating (Staging) ---------- */
.sv-rows__list { margin-top: 32px; }
.sv-row { display: grid; grid-template-columns: 599fr 601fr; min-height: 347px; }
.sv-row__media { position: relative; min-height: 347px; overflow: hidden; }
.sv-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sv-row__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
	padding: 48px 40px;
	background: var(--hm-gray-bg);
	color: #000;
}
.sv-row--flip { grid-template-columns: 601fr 599fr; }
.sv-row--flip .sv-row__media { order: 2; }
.sv-row__title { margin: 0; color: #000; font-size: 24px; font-weight: 700; line-height: normal; }
.sv-row__text { margin: 0; color: #000; font-size: 16px; line-height: 24px; }
.sv-row__body .hm-btn-outline { margin-top: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
	.sv-card { height: 50vw; max-height: 610px; }
	.sv-unit__media { height: auto; aspect-ratio: 584 / 625; }
}

@media (max-width: 991.98px) {
	.sv-hero__title { font-size: 34px; }
	.sv-step { flex-basis: calc((100% - 32px) / 2); }
}

@media (max-width: 767.98px) {
	.sv-hero { height: auto; min-height: 300px; }
	.sv-hero__box { padding: 28px 20px; }
	.sv-hero__title { font-size: 28px; }
	.sv-hero__text { font-size: 16px; }

	.sv-cards__grid,
	.sv-units__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 24px; }
	.sv-card { height: auto; aspect-ratio: 584 / 480; }
	.sv-card__caption { font-size: 20px; padding: 14px 16px; }
	.sv-unit { gap: 16px; }
	.sv-unit__title { font-size: 22px; }

	.sv-gallery__stage { --per: 1; --gap: 12px; --slide-w: 86%; margin-top: 24px; }
	.sv-gallery__track { aspect-ratio: 1.4; }
	.sv-gallery .hm-dots { margin-top: 20px; }

	.sv-rows__list { margin-top: 24px; }
	.sv-row,
	.sv-row--flip { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.sv-row--flip .sv-row__media { order: 0; }
	.sv-row__media { min-height: 0; aspect-ratio: 599 / 347; }
	.sv-row__body { padding: 24px 20px 28px; }
	.sv-row__title { font-size: 21px; }

	.sv-steps__grid { gap: 16px; margin-top: 24px; }
	.sv-step { flex-basis: calc((100% - 16px) / 2); min-height: 0; padding: 18px 12px; }
	.sv-step__icon { width: 70px; height: 70px; }
	.sv-step__title { font-size: 16px; }
}

/* ==========================================================================
   Service pages on phones — Figma mobile 440: Leasing management 182:10241,
   Interior design 182:10280, Staging 182:10313.
   ========================================================================== */
@media (max-width: 767.98px) {
	/* Headings centred (bar + title + subtitle), Figma "Heading_mobile". */
	:is(.sv-cards, .sv-units, .sv-steps, .sv-gallery, .sv-rows) .hm-head { align-items: center; max-width: none; text-align: center; }
	:is(.sv-cards, .sv-units, .sv-steps, .sv-gallery, .sv-rows) .hm-head__title,
	:is(.sv-cards, .sv-units, .sv-steps, .sv-gallery, .sv-rows) .hm-head__sub { align-self: stretch; text-align: center; }
	.sv-cards .hm-head__sub { font-size: 16px; line-height: 24px; }
	:is(.sv-steps, .sv-gallery) .hm-head__sub { color: var(--hm-text); font-size: 18px; line-height: 1.5; }

	/* ---------- Hero (182:10244): tall photo, dark box in the middle ---------- */
	.sv-hero { min-height: calc(100vw * 750 / 440); padding: 32px 24px; }
	.sv-hero--mimg .sv-hero__bg { object-position: center !important; }
	.sv-hero__box { gap: 8px; padding: 40px 24px; }
	.sv-hero__title { font-size: 24px; line-height: 1.4; }
	.sv-hero__text { font-size: 16px; line-height: 24px; }

	/* ---------- Photo cards → swipe carousel (182:10248) ---------- */
	.sv-cards { --in-w: calc(100vw - 78px); }
	.sv-cards__slider { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 24px; }
	.sv-cards .sv-cards__grid {
		display: flex;
		align-items: center;
		gap: 20px;
		width: 100vw;
		height: calc(var(--in-w) * 486 / 361);
		margin: 0 calc(var(--hm-gutter) * -1);
		padding-inline: calc((100vw - var(--in-w)) / 2);
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: calc((100vw - var(--in-w)) / 2);
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}
	.sv-cards .sv-cards__grid::-webkit-scrollbar { display: none; }
	.sv-cards .sv-card {
		flex: 0 0 var(--in-w);
		height: 88%;
		aspect-ratio: auto;
		border-radius: 12px;
		scroll-snap-align: center;
		transition: height .35s ease;
	}
	.sv-cards .sv-card.is-active { height: 100%; }
	.sv-cards .sv-card__caption {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 3px;
		padding: 16px 24px 20px;
		background: linear-gradient(0deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 104%);
		text-align: left;
		text-transform: none;
		opacity: 0;
		transition: opacity .3s ease;
	}
	.sv-cards .sv-card.is-active .sv-card__caption { opacity: 1; }
	.sv-card__count { display: block; }
	.sv-card__title { color: var(--hm-neutral); font-size: 24px; line-height: 1.4; }
	.sv-card__title::first-letter { text-transform: uppercase; }
	.sv-cards .sv-card__title { text-transform: capitalize; }

	/* ---------- Units → one at a time with arrows (220:12688) ---------- */
	.sv-units.hm-section { padding-top: 0; background: none; }
	.sv-units .hm-wrap { position: relative; max-width: none; padding: 0; }
	.sv-units .hm-head {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		z-index: 3;
		min-height: 278px;
		padding: 40px var(--hm-gutter) 60px;
		background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
		pointer-events: none;
	}
	.sv-units .hm-head__sub { display: none; }
	.sv-units .sv-units__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
	.sv-units .sv-unit { grid-area: 1 / 1; gap: 24px; visibility: hidden; }
	.sv-units .sv-unit.is-active { visibility: visible; }
	.sv-units .sv-unit.is-active .sv-unit__media img { animation: hm-fade .45s ease; }
	.sv-units .sv-unit__media { height: auto; aspect-ratio: 440 / 648; }
	.sv-units .sv-unit__body { gap: 12px; padding-inline: var(--hm-gutter); }
	.sv-unit__count { margin: 4px 0 8px; color: var(--hm-text); font-size: 12px; line-height: 24px; }
	.sv-unit__count b { color: var(--hm-primary); font-size: 16px; font-weight: 600; }
	.sv-units .sv-unit__title { color: #000; font-size: 24px; line-height: 1.4; }
	.sv-units .sv-unit__text { font-size: 18px; line-height: 1.5; }
	.sv-units__nav {
		position: absolute;
		top: calc(100vw * 648 / 440 + 24px);
		right: var(--hm-gutter);
		z-index: 4;
		display: flex;
		gap: 12px;
	}

	/* ---------- Key steps (220:12689): white cards, 2 per row, grey band ---------- */
	.sv-steps.hm-section { background: var(--hm-gray-bg); }
	.sv-steps .sv-steps__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
	.sv-steps .sv-step { flex: none; justify-content: flex-start; gap: 5px; min-height: 0; padding: 24px 12px; background: #fff; }
	.sv-steps .sv-step__icon { width: 60px; height: 60px; padding: 4px 6px; }
	.sv-steps .sv-step__title { font-size: 14px; line-height: 20px; }

	/* ---------- Photo slider (182:10289): one tall photo on the left, next one peeking ---------- */
	/* Scoped to the service sections: the project detail and Referral sliders set their own sizes. */
	.sv-gallery .sv-gallery__stage { --per: 1; --gap: 20px; --slide-w: calc(100% - 19px); margin-top: 24px; }
	.sv-gallery .sv-gallery__track { aspect-ratio: 381 / 620; }
	.sv-gallery__slide { border-radius: 12px; transition: transform .55s cubic-bezier(.22, .61, .36, 1), top .35s ease, height .35s ease; }
	.sv-gallery .sv-gallery__slide.is-peek { top: 4.76%; height: 90.48%; }
	.sv-gallery__slide.is-peek::after { opacity: 0; }
	.sv-gallery .hm-dots { margin-top: 24px; }

	/* ---------- Rows (182:10322): photo above a grey text panel ---------- */
	.sv-rows .sv-rows__list { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
	.sv-rows .sv-row__media { aspect-ratio: 400 / 452; }
	.sv-rows .sv-row__body { gap: 12px; padding: 32px 24px; }
	.sv-rows .sv-row__title { color: var(--hm-black); font-size: 24px; line-height: 1.4; }
	.sv-rows .sv-row__text { color: var(--hm-black); font-size: 18px; line-height: 1.5; }
}

/* Large phones (576–767px): keep photos at phone proportions in a 560px column. */
@media (min-width: 576px) and (max-width: 767.98px) {
	:is(.dsms-ui2--leasing, .dsms-ui2--interior, .dsms-ui2--staging) .hm-wrap { max-width: 560px; }
	.sv-hero { min-height: 820px; }
	.sv-cards { --in-w: 440px; }
	.sv-units .hm-wrap { max-width: none; }
	.sv-units .sv-unit__media { aspect-ratio: auto; height: 760px; }
	.sv-units .sv-unit__body { max-width: 560px; margin-inline: auto; width: 100%; }
	.sv-units__nav { top: calc(760px + 24px); right: max(var(--hm-gutter), calc((100vw - 560px) / 2 + var(--hm-gutter))); }
}

@media (prefers-reduced-motion: reduce) {
	.sv-card img,
	.sv-card,
	.sv-card__caption,
	.sv-gallery__slide { transition: none; }
	.sv-units .sv-unit.is-active .sv-unit__media img { animation: none; }
}