/* ==========================================================================
   DSMS — New UI About Us (Figma About 88:4957, desktop 1440 / content 1200).
   Shared tokens/buttons: chrome.css · shared sections (heading, why): home.css
   ========================================================================== */

.hm-head__sub--xl { font-size: 20px; line-height: 1.5; }

/* ---------- Hero (image only) ---------- */
.ab-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 34px var(--hm-gutter);
}
/* Photo behind, dark title box (.sv-hero__box, service2.css) in the middle. */
.ab-hero__pic { position: absolute; inset: 0; }
.ab-hero__box { z-index: 1; }
.ab-hero {
	height: clamp(220px, 28.48vw, max(410px, 70svh)); /* 1440×410; grows with the width on larger screens */
	overflow: hidden;
	background: var(--hm-gray-bg);
}
.ab-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center 68%;
}

/* ---------- Intro ---------- */
.ab-intro__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 8px;
	color: var(--hm-text-2);
	font-size: 20px;
	line-height: 1.5;
	text-align: center;
}
.ab-intro__text p { margin: 0; }
.ab-intro__cap { font-size: 40px; font-weight: 600; line-height: 1; }
/* "Read more": only the first lines show (height set by assets/js/home.js), the rest fades out. */
.ab-intro__text[data-readmore-body] { overflow: hidden; transition: max-height .45s ease; }
.ab-intro__text.is-clamped {
	-webkit-mask-image: linear-gradient(to bottom, #000 70%, rgba(0, 0, 0, .45));
	mask-image: linear-gradient(to bottom, #000 70%, rgba(0, 0, 0, .45));
}
.ab-intro__text.is-measuring,
.ab-intro__text.is-measuring * { transform: none !important; transition: none !important; }
.ab-intro__toggle { margin: 20px 0 0; text-align: center; }
.ab-intro__btn { cursor: pointer; }
.ab-intro__btn-icon { width: 16px; height: 16px; transition: transform .3s ease; }
.ab-intro__btn[aria-expanded="true"] .ab-intro__btn-icon { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
	.ab-intro__text[data-readmore-body],
	.ab-intro__btn-icon { transition: none; }
}
@media (max-width: 767.98px) {
	.ab-intro__toggle { margin-top: 16px; }
}
.ab-intro__media {
	width: 100%;
	max-width: 995px;
	margin: 32px auto 0;
	aspect-ratio: 995 / 602;
	overflow: hidden;
}
.ab-intro__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- What we believe ---------- */
.ab-believe__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 32px;
	margin-top: 32px;
}
.ab-believe__card {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 380px;
	margin: 0;
	overflow: hidden;
}
.ab-believe__card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .6s ease;
}
.ab-believe__card:hover img { transform: scale(1.04); }
.ab-believe__caption {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	width: 100%;
	min-height: 0;
	padding: 16px 24px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 100%);
	color: var(--hm-neutral);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}
.ab-believe__title { display: block; }
@media (min-width: 1200px) {
	.ab-believe__caption { padding-inline: 16px; }
	.ab-believe__title { white-space: nowrap; }
}
.ab-believe__text { display: none; }

/* Desktop hover (Figma variant 173:10046): the dark gradient covers the whole card, the title
   and the description sit in the middle. */
@media (min-width: 768px) {
	.ab-believe__card.has-text .ab-believe__caption {
		min-height: 66px;
		padding-inline: 16px;
		transition: min-height .45s ease;
	}
	.ab-believe__card.has-text .ab-believe__text {
		display: block;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		color: #f4f3f6;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		transition: max-height .45s ease, opacity .3s ease;
	}
	.ab-believe__card.has-text:is(:hover, :focus-visible, :focus-within) .ab-believe__caption {
		min-height: 100%;
		padding-inline: 24px;
		justify-content: center;
	}
	.ab-believe__card.has-text:is(:hover, :focus-visible, :focus-within) .ab-believe__text {
		max-height: 10em;
		opacity: 1;
	}
	.ab-believe__card.has-text:focus-visible { outline: 2px solid var(--hm-primary, #fa925a); outline-offset: 3px; }
}

/* ---------- Services (alternating rows) ---------- */
.ab-services__list { margin-top: 32px; }
.ab-service {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	background: #fff;
}
.ab-service { min-height: 236px; }
.ab-service__media { position: relative; min-height: 236px; overflow: hidden; }
.ab-service__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ab-service__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 20px;
	padding: 32px;
}
.ab-service--flip .ab-service__media { order: 2; }
.ab-service__title { margin: 0; color: var(--hm-black); font-size: 24px; font-weight: 700; line-height: normal; }
.ab-service__link { color: inherit; text-decoration: none; transition: color .2s ease; }
.ab-service__link:hover,
.ab-service__link:focus-visible { color: var(--hm-primary); }
.ab-service__text { margin: -12px 0 0; color: var(--hm-text-2); font-size: 16px; line-height: 24px; }

/* ---------- Breathe life into your property ---------- */
.ab-breathe { margin-top: 0; }
.ab-breathe__grid {
	display: grid;
	grid-template-columns: minmax(0, 575fr) minmax(0, 578fr);
	column-gap: 47px;
	align-items: start;
}
.ab-breathe__img { margin: 0; overflow: hidden; }
.ab-breathe__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-breathe__img--tall { aspect-ratio: 575 / 780; }
.ab-breathe__img--wide { aspect-ratio: 578 / 517; }
.ab-breathe__side { display: flex; flex-direction: column; padding-top: 106px; }
.ab-breathe__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.ab-breathe__side .ab-breathe__img--wide { margin-top: 105px; }
.ab-breathe .hm-head { gap: 16px; }
.ab-breathe .hm-head--left .hm-head__bar { margin-bottom: 0; }
.ab-breathe:not(:has(.ab-breathe__img--tall)) .ab-breathe__grid { grid-template-columns: minmax(0, 1fr); }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
	.ab-breathe__side { padding-top: 48px; }
	.ab-breathe__side .ab-breathe__img--wide { margin-top: 48px; }
}

@media (max-width: 991.98px) {
	.ab-intro__text { font-size: 18px; }
	.ab-believe__card { height: 320px; }
	.ab-believe__caption { font-size: 20px; padding: 14px 16px; }
	.ab-breathe__grid { column-gap: 28px; }
	.ab-breathe__side { padding-top: 0; }
}

@media (max-width: 767.98px) {
	.ab-intro__text { font-size: 16px; }
	.ab-intro__cap { font-size: 32px; }
	.ab-intro__media { margin-top: 24px; }

	.ab-believe__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
	.ab-believe__card { height: auto; aspect-ratio: 384 / 300; }

	.ab-services__list { margin-top: 24px; }
	.ab-service { grid-template-columns: minmax(0, 1fr); }
	.ab-service--flip .ab-service__media { order: 0; }
	.ab-service { min-height: 0; }
	.ab-service__media { min-height: 0; aspect-ratio: 600 / 300; }
	.ab-service__body { padding: 24px 20px 28px; }
	.ab-service__title { font-size: 22px; }

	.ab-breathe__grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
	.ab-breathe__img--tall { aspect-ratio: 4 / 3; }
	.ab-breathe__side { padding-top: 0; }
	.ab-breathe__side .ab-breathe__img--wide { margin-top: 28px; }
	.ab-breathe .hm-head__sub--xl { font-size: 17px; }
}

/* ==========================================================================
   About on phones — Figma "About" mobile 440 (182:10176).
   ========================================================================== */
@media (max-width: 767.98px) {
	/* ---------- Hero (182:10228): tall portrait photo ---------- */
	.ab-hero--mimg { height: auto; aspect-ratio: 440 / 720; }
	.ab-hero { padding: 32px 24px; }
	.ab-hero--mimg .ab-hero__bg { object-position: center !important; }

	/* ---------- Intro (182:10181) ---------- */
	.dsms-ui2--about .ab-intro { padding-bottom: 0; }
	.ab-intro__text { gap: 16px; margin-top: 8px; color: var(--hm-text-2); font-size: 16px; line-height: 1.5; }
	/* The intro is now a long paragraph: same weight as the rest of the text (was a short bold lead). */
	.ab-intro__lead { font-size: 16px; font-weight: 400; line-height: 1.5; }
	.ab-intro__cap { font-size: 32px; font-weight: 700; line-height: 1.4; }
	.ab-intro__media { margin-top: 24px; aspect-ratio: 400 / 520; border-radius: 12px; }

	/* ---------- What we believe (182:10188): swipe carousel ---------- */
	.ab-believe { --in-w: calc(100vw - 78px); }
	.ab-believe__slider { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 24px; }
	.ab-believe .ab-believe__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;
	}
	.ab-believe .ab-believe__grid::-webkit-scrollbar { display: none; }
	.ab-believe .ab-believe__card {
		flex: 0 0 var(--in-w);
		height: 88%;
		aspect-ratio: auto;
		border-radius: 12px;
		scroll-snap-align: center;
		transition: height .35s ease;
	}
	.ab-believe .ab-believe__card.is-active { height: 100%; }
	.ab-believe__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;
		opacity: 0;
		transition: opacity .3s ease;
	}
	.ab-believe__card.is-active .ab-believe__caption { opacity: 1; }
	.ab-believe__title { font-size: 24px; line-height: 1.4; }
	.ab-believe__count { display: block; }

	/* ---------- Services (211:12148): one photo per service, title on a peach wave ---------- */
	.dsms-ui2--about .ab-services { padding: 0; background: none; }
	.ab-services .hm-wrap { position: relative; max-width: none; padding: 0; }
	.ab-services .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;
	}
	.ab-services .ab-services__list { position: relative; margin: 0; aspect-ratio: 440 / 854; overflow: hidden; }
	.ab-services .ab-service { position: absolute; inset: 0; display: block; min-height: 0; background: none; visibility: hidden; }
	.ab-services .ab-service.is-active { visibility: visible; }
	.ab-services .ab-service__media { position: absolute; top: 0; right: 0; left: 0; height: 96.02%; min-height: 0; aspect-ratio: auto; }
	.ab-services .ab-service.is-active .ab-service__media img { animation: hm-fade .45s ease; }
	.ab-services__list::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 2;
		height: 35.95%;
		background: url("../images/about/peach-wave.webp") center bottom / 100% 100% no-repeat;
		pointer-events: none;
	}
	.ab-services .ab-service__body {
		position: absolute;
		bottom: 24px;
		left: var(--hm-gutter);
		right: 116px;
		z-index: 3;
		display: block;
		padding: 0;
	}
	.ab-services .ab-service__title { color: var(--hm-heading); font-size: 24px; line-height: 1.4; }
	.ab-services .ab-service__text,
	.ab-services .ab-service__body .hm-btn-outline { display: none; }
	.ab-services__nav {
		position: absolute;
		right: var(--hm-gutter);
		bottom: 25px;
		z-index: 4;
		display: flex;
		gap: 12px;
	}

	/* ---------- Breathe life into your property (216:12192): text, then 2 photos ---------- */
	.ab-breathe .ab-breathe__grid { display: flex; flex-direction: column; gap: 20px; }
	.ab-breathe .ab-breathe__side { display: contents; }
	.ab-breathe .ab-breathe__text { order: -1; margin-bottom: 4px; }
	.ab-breathe .hm-head { gap: 16px; }
	.ab-breathe .hm-head--left .hm-head__bar { margin-bottom: -4px; }
	.ab-breathe .hm-head__sub--xl { color: #cfd1d7; font-size: 16px; line-height: 1.5; }
	.ab-breathe .ab-breathe__img { border-radius: 12px; }
	.ab-breathe .ab-breathe__img--tall { aspect-ratio: 400 / 305; }
	.ab-breathe .ab-breathe__side .ab-breathe__img--wide { margin-top: 0; aspect-ratio: 400 / 264; }
}

/* Large phones (576–767px): keep the phone layout in a 560px column. */
@media (min-width: 576px) and (max-width: 767.98px) {
	.dsms-ui2--about .hm-wrap { max-width: 560px; }
	.ab-hero--mimg { aspect-ratio: auto; height: 820px; }
	.ab-believe { --in-w: 440px; }
	.ab-services .ab-services__list { aspect-ratio: auto; height: 900px; }
	.dsms-ui2--about .ab-services .hm-wrap { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ab-believe__card img,
	.ab-believe__card,
	.ab-believe__caption { transition: none; }
	.ab-services .ab-service.is-active .ab-service__media img { animation: none; }
}