/*
 * Sai Lux Sunrise Living — About Us
 *
 * Scoped under .sls-ab so the Entox theme and Elementor can't bleed in.
 * Shares the visual language of the amenities page (same tokens, same radii,
 * same accent palette) so the two pages read as one site.
 */

.sls-ab {
	--sls-ink:        var(--b-navy);
	--sls-ink-soft:   var(--b-ink-soft);
	--sls-line:       var(--b-line);
	--sls-radius:     20px;
	--sls-shadow:     0 1px 2px rgba(var(--b-navy-rgb), .04), 0 8px 24px rgba(var(--b-navy-rgb), .05);
	--sls-shadow-lif: 0 2px 4px rgba(var(--b-navy-rgb), .05), 0 18px 40px rgba(var(--b-navy-rgb), .11);
	--sls-teal:       var(--b-gold-d);
	--sls-font:       "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	box-sizing: border-box;
	font-family: var(--sls-font);
	color: var(--sls-ink);
	-webkit-font-smoothing: antialiased;
}

.sls-ab *,
.sls-ab *::before,
.sls-ab *::after { box-sizing: border-box; }

/* Zero-specificity reset: `:where()` keeps this from out-weighing the rules
   below, which is exactly the trap that broke the amenities hero. */
:where(.sls-ab) :where(ul, li) { list-style: none; margin: 0; padding: 0; }
:where(.sls-ab) :where(p) { margin: 0; }
:where(.sls-ab) :where(h1, h2, h3) { margin: 0; line-height: 1.18; color: var(--sls-ink); }
:where(.sls-ab) :where(blockquote) { margin: 0; padding: 0; border: 0; }
:where(.sls-ab) :where(figcaption) { margin: 0; }

.sls-ab ul, .sls-ab li { list-style: none !important; }

.sls-ab [data-accent="teal"] { --a-ink: var(--a1-ink); --a-tint: var(--a1-tint); --a-edge: var(--a1-edge); --a-glow: var(--a1-rgb); }
.sls-ab [data-accent="amber"] { --a-ink: var(--a2-ink); --a-tint: var(--a2-tint); --a-edge: var(--a2-edge); --a-glow: var(--a2-rgb); }
.sls-ab [data-accent="sky"] { --a-ink: var(--a3-ink); --a-tint: var(--a3-tint); --a-edge: var(--a3-edge); --a-glow: var(--a3-rgb); }
.sls-ab [data-accent="violet"] { --a-ink: var(--a5-ink); --a-tint: var(--a5-tint); --a-edge: var(--a5-edge); --a-glow: var(--a5-rgb); }

/* --- Hero ----------------------------------------------------------------- */
.sls-ab__hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(440px, 62vh, 660px);
	overflow: hidden;
	isolation: isolate;

	/* Break out of Elementor's 1200px content wrapper so the banner runs edge
	   to edge. The few px that 100vw overshoots (scrollbar width) are clipped
	   by the theme's html { overflow-x: hidden } — verified on this install. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.sls-ab__hero-img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	/* The source photo is a bright daytime shot, so it is darkened and cooled
	   here rather than in the file — the same asset stays usable elsewhere. */
	filter: brightness(.64) saturate(.93) contrast(1.05);
}

/* Two stacked scrims: a broad top-to-bottom darkening for overall contrast,
   plus a heavier foot so the headline always lands on near-black regardless
   of what is behind it. */
.sls-ab__hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Two layers only. A third, full-bleed vignette was tried and removed: at
	   .30 it stacked on top of the linear gradient's own top stop and washed
	   the building out of the picture entirely. Keep the darkening where the
	   text sits, and leave the upper half of the photo readable. */
	background:
		linear-gradient(to top, rgba(13, 27, 43, .88) 0%, rgba(13, 27, 43, .68) 28%, rgba(13, 27, 43, .30) 58%, rgba(13, 27, 43, .44) 100%),
		radial-gradient(120% 80% at 20% 100%, rgba(13, 27, 43, .48), transparent 70%);
}

.sls-ab__hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 64px 24px 64px;
	color: #fff;
}

.sls-ab__hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .30);
	backdrop-filter: blur(8px);
	border-radius: 999px;
	padding: 9px 18px 9px 14px;
	margin-bottom: 20px;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

.sls-ab__hero-badge svg { width: 17px; height: 17px; flex: none; }

.sls-ab__hero-title {
	max-width: 16ch;
	font-size: clamp(40px, 7vw, 82px);
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.02;
	color: #fff;
	/* Layered shadow: a tight dark edge for legibility, a wide soft one for
	   depth. A single shadow either looks harsh or does nothing. */
	text-shadow:
		0 2px 4px rgba(0, 0, 0, .55),
		0 8px 28px rgba(0, 0, 0, .55),
		0 18px 60px rgba(0, 0, 0, .40);
}

.sls-ab__hero-sub {
	margin-top: 20px;
	font-size: clamp(16px, 1.7vw, 19.5px);
	line-height: 1.66;
	color: rgba(255, 255, 255, .93);
	text-shadow: 0 2px 10px rgba(0, 0, 0, .65), 0 1px 3px rgba(0, 0, 0, .5);
}

.sls-ab__hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

/* --- Buttons -------------------------------------------------------------- */
.sls-ab__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none !important;
	border-radius: 999px;
	padding: 15px 30px;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.sls-ab__btn--solid {
	color: var(--b-navy-d) !important;
	background: #fff;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}

.sls-ab__btn--solid:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 36px rgba(0, 0, 0, .38);
	color: var(--b-navy-d) !important;
}

.sls-ab__btn--ghost {
	color: #fff !important;
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .45);
	backdrop-filter: blur(8px);
}

.sls-ab__btn--ghost:hover {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, .20);
	color: #fff !important;
}

/* --- Body ----------------------------------------------------------------- */
.sls-ab__body {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px 24px;
}

.sls-ab__eyebrow {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sls-teal);
	margin-bottom: 12px !important;
}

.sls-ab__section { padding: 68px 0 8px; }

.sls-ab__section-head {
	margin-bottom: 34px;
}

.sls-ab__section-head h2,
.sls-ab__intro h2,
.sls-ab__founder h2 {
	font-size: clamp(26px, 3.4vw, 40px);
	font-weight: 800;
	letter-spacing: -.028em;
}

.sls-ab__section-lede {
	margin-top: 16px;
	font-size: clamp(15.5px, 1.5vw, 17.5px);
	line-height: 1.72;
	color: var(--sls-ink-soft);
}

/* --- Intro ---------------------------------------------------------------- */
.sls-ab__intro {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
	padding: 72px 0 8px;
}

.sls-ab__intro-text p {
	margin-top: 16px;
	font-size: clamp(15.5px, 1.5vw, 17px);
	line-height: 1.78;
	color: var(--sls-ink-soft);
}

.sls-ab__intro-text strong { color: var(--sls-ink); font-weight: 700; }

.sls-ab__inline-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 24px !important;
}

.sls-ab__inline-link a {
	font-weight: 700;
	color: var(--sls-teal) !important;
	text-decoration: none !important;
	border-bottom: 2px solid rgba(var(--b-gold-rgb), .3);
	transition: border-color .2s ease;
}

.sls-ab__inline-link:hover a { border-bottom-color: var(--sls-teal); }
.sls-ab__inline-link svg { width: 17px; height: 17px; color: var(--sls-teal); }

.sls-ab__highlights {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.sls-ab__highlights li {
	padding: 24px 22px;
	border: 1px solid var(--sls-line);
	border-radius: var(--sls-radius);
	background: linear-gradient(160deg, var(--a-tint, var(--b-cream-l)) 0%, #fff 70%);
	box-shadow: var(--sls-shadow);
	transition: transform .26s cubic-bezier(.22, 1, .36, 1), box-shadow .26s ease;
}

.sls-ab__highlights li:hover {
	transform: translateY(-4px);
	box-shadow: var(--sls-shadow-lif);
}

.sls-ab__hl-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 15px;
	border-radius: 13px;
	color: var(--a-ink);
	background: #fff;
	border: 1px solid var(--a-edge);
	box-shadow: 0 2px 6px rgba(var(--b-navy-rgb), .05);
}

.sls-ab__hl-icon svg { width: 23px; height: 23px; }

.sls-ab__highlights h3 {
	font-size: 16.5px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.sls-ab__highlights p {
	margin-top: 7px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--sls-ink-soft);
}

/* --- Services ------------------------------------------------------------- */
.sls-ab__services {
	display: grid;
	gap: 12px;
}

.sls-ab__service {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 20px;
	padding: 22px 24px;
	border: 1px solid var(--sls-line);
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--sls-shadow);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.sls-ab__service:hover {
	transform: translateX(3px);
	border-color: var(--b-cream-d);
	box-shadow: var(--sls-shadow-lif);
}

/* The included service is the differentiator, so it gets the accent treatment
   rather than sitting flat among the on-request ones. */
.sls-ab__service.is-included {
	background: linear-gradient(120deg, var(--b-cream-l) 0%, #fff 58%);
	border-color: var(--b-cream-d);
}

.sls-ab__service-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	flex: none;
	border-radius: 14px;
	color: var(--sls-teal);
	background: #fff;
	border: 1px solid var(--b-cream-d);
	box-shadow: 0 2px 6px rgba(var(--b-navy-rgb), .05);
}

.sls-ab__service-icon svg { width: 25px; height: 25px; }

.sls-ab__service h3 {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.sls-ab__service p {
	margin-top: 5px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--sls-ink-soft);
}

.sls-ab__service-tag {
	flex: none;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 7px 14px;
	border-radius: 999px;
	color: var(--sls-ink-soft);
	background: var(--b-cream);
	border: 1px solid var(--sls-line);
}

.sls-ab__service.is-included .sls-ab__service-tag {
	color: #fff;
	background: var(--sls-teal);
	border-color: var(--sls-teal);
}

/* --- Travel brands -------------------------------------------------------- */
.sls-ab__brands {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
}

.sls-ab__brand {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 30px 28px 28px;
	border: 1px solid var(--sls-line);
	border-radius: 24px;
	background: linear-gradient(165deg, var(--b-cream-l) 0%, #fff 55%);
	box-shadow: var(--sls-shadow);
	transition: transform .26s cubic-bezier(.22, 1, .36, 1), box-shadow .26s ease, border-color .26s ease;
}

.sls-ab__brand::after {
	content: "";
	position: absolute;
	top: -60px;
	right: -60px;
	width: 190px;
	height: 190px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--b-gold-rgb), .14), transparent 70%);
	opacity: 0;
	transition: opacity .3s ease;
}

.sls-ab__brand:hover {
	transform: translateY(-5px);
	border-color: var(--b-cream-d);
	box-shadow: var(--sls-shadow-lif);
}

.sls-ab__brand:hover::after { opacity: 1; }
.sls-ab__brand > * { position: relative; z-index: 1; }

.sls-ab__brand-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 18px;
	border-radius: 16px;
	color: var(--sls-teal);
	background: #fff;
	border: 1px solid var(--b-cream-d);
	box-shadow: 0 2px 6px rgba(var(--b-navy-rgb), .05), 0 10px 22px rgba(var(--b-gold-rgb), .10);
}

.sls-ab__brand-icon svg { width: 27px; height: 27px; }

.sls-ab__brand-note {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sls-teal);
	margin-bottom: 8px !important;
}

.sls-ab__brand h3 {
	font-size: clamp(21px, 2.3vw, 25px);
	font-weight: 800;
	letter-spacing: -.02em;
}

.sls-ab__brand-desc {
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--sls-ink-soft);
}

.sls-ab__brand-tel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-size: 14.5px;
	font-weight: 600;
}

.sls-ab__brand-tel svg { width: 17px; height: 17px; color: var(--sls-teal); }
.sls-ab__brand-tel a { color: var(--sls-ink) !important; text-decoration: none !important; }
.sls-ab__brand-tel a:hover { color: var(--sls-teal) !important; }

.sls-ab__brand-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: auto;
	padding-top: 22px;
	font-size: 15px;
	font-weight: 700;
	color: var(--sls-teal) !important;
	text-decoration: none !important;
}

.sls-ab__brand-link svg {
	width: 18px;
	height: 18px;
	transition: transform .22s ease;
}

.sls-ab__brand-link:hover svg { transform: translateX(4px); }

/* --- Founder -------------------------------------------------------------- */
.sls-ab__founder {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: 52px;
	align-items: start;
	margin-top: 72px;
	padding: 48px 44px;
	border-radius: 28px;
	background:
		radial-gradient(70% 100% at 6% 0%, rgba(var(--b-gold-rgb), .10), transparent 62%),
		radial-gradient(60% 100% at 98% 100%, rgba(217, 119, 6, .09), transparent 60%),
		var(--b-cream-l);
	border: 1px solid var(--sls-line);
}

.sls-ab__founder-photo {
	position: sticky;
	top: 24px;
	margin: 0;
	text-align: center;
}

.sls-ab__founder-photo img {
	width: 100%;
	max-width: 300px;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center top;
	border-radius: 24px;
	background: var(--b-navy);
	box-shadow: 0 4px 10px rgba(var(--b-navy-rgb), .10), 0 26px 54px rgba(var(--b-navy-rgb), .22);
}

.sls-ab__founder-photo figcaption {
	margin-top: 18px;
	line-height: 1.5;
}

.sls-ab__founder-photo strong {
	display: block;
	font-size: 17.5px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--sls-ink);
}

.sls-ab__founder-photo span {
	display: block;
	margin-top: 4px;
	font-size: 13.5px;
	color: var(--sls-ink-soft);
}

.sls-ab__quote-mark {
	display: block;
	margin: 22px 0 -6px;
	color: rgba(var(--b-gold-rgb), .38);
}

.sls-ab__quote-mark svg { width: 42px; height: 42px; }

.sls-ab__founder blockquote p {
	margin-top: 17px;
	font-size: clamp(15.5px, 1.5vw, 17px);
	line-height: 1.82;
	color: var(--sls-ink-soft);
}

.sls-ab__founder blockquote p:first-child {
	font-size: clamp(17px, 1.8vw, 19.5px);
	line-height: 1.72;
	color: var(--sls-ink);
	font-weight: 500;
}

/* --- FAQ ------------------------------------------------------------------ */
.sls-ab__faq {
	display: grid;
	gap: 12px;
}

.sls-ab__faq details {
	border: 1px solid var(--sls-line);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--sls-shadow);
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.sls-ab__faq details[open] {
	border-color: var(--b-cream-d);
	box-shadow: var(--sls-shadow-lif);
}

.sls-ab__faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	cursor: pointer;
	list-style: none;
}

.sls-ab__faq summary::-webkit-details-marker { display: none; }

.sls-ab__faq summary h3 {
	font-size: 16.5px;
	font-weight: 700;
	letter-spacing: -.01em;
	display: inline;
}

/* A CSS-drawn plus/minus, so there is no icon font or image to load. */
.sls-ab__faq summary::after {
	content: "";
	flex: none;
	width: 13px;
	height: 13px;
	background:
		linear-gradient(var(--sls-teal), var(--sls-teal)) center / 100% 2px no-repeat,
		linear-gradient(var(--sls-teal), var(--sls-teal)) center / 2px 100% no-repeat;
	transition: transform .25s ease;
}

/* Open state is a minus: drop the vertical stroke only. Do NOT also rotate —
   rotating the remaining horizontal bar by 90deg turns the minus back into a
   vertical bar, which is what it did on the first pass. */
.sls-ab__faq details[open] summary::after {
	background: linear-gradient(var(--sls-teal), var(--sls-teal)) center / 100% 2px no-repeat;
}

.sls-ab__faq details p {
	padding: 0 24px 22px;
	font-size: 15px;
	line-height: 1.72;
	color: var(--sls-ink-soft);
}

/* --- Closing CTA ---------------------------------------------------------- */
.sls-ab__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	margin: 72px 0 20px;
	padding: 42px 44px;
	border-radius: 26px;
	color: #fff;
	background:
		radial-gradient(80% 140% at 8% 0%, rgba(var(--b-gold-rgb), .55), transparent 60%),
		radial-gradient(70% 130% at 96% 100%, rgba(217, 119, 6, .38), transparent 58%),
		var(--b-navy);
	box-shadow: 0 20px 50px rgba(var(--b-navy-rgb), .22);
}

.sls-ab__cta > div { flex: 1 1 420px; }

.sls-ab__cta h2 {
	color: #fff;
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 800;
	letter-spacing: -.02em;
}

.sls-ab__cta p {
	margin-top: 11px;
	font-size: 15.5px;
	line-height: 1.68;
	color: rgba(255, 255, 255, .8);
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
	.sls-ab__intro { grid-template-columns: 1fr; gap: 40px; }
	.sls-ab__founder { grid-template-columns: 1fr; gap: 34px; padding: 40px 32px; }
	.sls-ab__founder-photo { position: static; text-align: left; }
	.sls-ab__founder-photo img { max-width: 240px; }
}

@media (max-width: 782px) {
	.sls-ab__hero { min-height: 460px; }
	.sls-ab__hero-inner { padding: 48px 20px 46px; }
	.sls-ab__section { padding: 52px 0 4px; }
	.sls-ab__intro { padding: 52px 0 4px; }
	.sls-ab__service { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 20px; }
	.sls-ab__service-tag { grid-column: 2; justify-self: start; }
	.sls-ab__cta { padding: 32px 26px; }
}

@media (max-width: 520px) {
	.sls-ab__body { padding: 0 16px 16px; }
	.sls-ab__hero-inner { padding: 38px 16px 38px; }
	.sls-ab__highlights { grid-template-columns: 1fr; }
	.sls-ab__brands { grid-template-columns: 1fr; }
	.sls-ab__brand { padding: 24px 20px; }
	.sls-ab__founder { padding: 30px 20px; border-radius: 22px; }
	.sls-ab__founder-photo img { max-width: 100%; }
	.sls-ab__hero-cta { flex-direction: column; align-items: stretch; }
	.sls-ab__btn { width: 100%; }
	.sls-ab__faq summary { padding: 17px 18px; }
	.sls-ab__faq details p { padding: 0 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.sls-ab *,
	.sls-ab *::before,
	.sls-ab *::after { transition: none !important; animation: none !important; }
	.sls-ab__highlights li:hover,
	.sls-ab__brand:hover,
	.sls-ab__service:hover { transform: none; }
}

@media print {
	.sls-ab__hero { min-height: auto; }
	.sls-ab__hero-img, .sls-ab__hero-scrim { display: none; }
	.sls-ab__hero-inner { color: #000; padding: 0 0 24px; }
	.sls-ab__hero-title, .sls-ab__hero-sub { color: #000; text-shadow: none; }
	.sls-ab__hero-badge { color: #000; border-color: #999; background: none; }
	.sls-ab__hero-cta, .sls-ab__cta { display: none; }
	.sls-ab__faq details { border-color: #ccc; box-shadow: none; break-inside: avoid; }
	/* A closed <details> prints as just its summary, so every answer would be
	   lost on paper. Forcing the children visible reveals them all. */
	.sls-ab__faq details > *:not(summary) { display: block; }
	.sls-ab__faq summary::after { display: none; }
}