/*
 * Sai Lux Sunrise Living — home page
 * Scoped under .sls-hm. Shares the tokens and accent language of the About
 * and Amenities pages so the whole site reads as one design.
 */

.sls-hm {
	--sls-ink:        var(--b-navy);
	--sls-ink-soft:   var(--b-ink-soft);
	--sls-line:       var(--b-line);
	--sls-teal:       var(--b-gold-d);
	--sls-teal-lt:    var(--b-gold-l);
	--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-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-hm *, .sls-hm *::before, .sls-hm *::after { box-sizing: border-box; }

/* Zero-specificity reset — see the note in about.css. */
:where(.sls-hm) :where(ul, li) { list-style: none; margin: 0; padding: 0; }
:where(.sls-hm) :where(p) { margin: 0; }
:where(.sls-hm) :where(h1, h2, h3) { margin: 0; line-height: 1.18; color: var(--sls-ink); }
:where(.sls-hm) :where(figure, figcaption, address) { margin: 0; font-style: normal; }
.sls-hm ul, .sls-hm li { list-style: none !important; }

/* --- Hero ----------------------------------------------------------------- */
.sls-hm__hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(560px, 84vh, 820px);
	overflow: hidden;
	isolation: isolate;

	/* Break out of Elementor's content wrapper for a full-bleed banner. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.sls-hm__hero-img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
	filter: brightness(.74) saturate(.98) contrast(1.04);
	/* Very slow drift gives the banner life without distracting from the copy. */
	animation: sls-hm-pan 34s ease-in-out infinite alternate;
}

@keyframes sls-hm-pan {
	from { transform: scale(1.06) translate3d(0, 0, 0); }
	to   { transform: scale(1.13) translate3d(-1.4%, -1.4%, 0); }
}

/* Two layers only — a third full-bleed vignette washes the photo out. */
.sls-hm__hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Lightened: the lower half was crushing the building into near-black.
	   The text still sits on ~.62 of darkening, which keeps it legible while
	   letting the photograph read. */
	background:
		linear-gradient(to top, rgba(13, 27, 43, .78) 0%, rgba(13, 27, 43, .56) 34%, rgba(13, 27, 43, .20) 64%, rgba(13, 27, 43, .36) 100%),
		radial-gradient(115% 80% at 18% 100%, rgba(13, 27, 43, .34), transparent 74%);
}

.sls-hm__hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	/* Top padding matters: the hero content is bottom-aligned, so on a short
	   viewport (or once the badge wraps) the badge ends up flush against the
	   header with nothing to breathe. */
	padding: 36px 24px 52px;
	color: #fff;
}

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

.sls-hm__hero-badge svg { width: 16px; height: 16px; flex: none; }

.sls-hm__hero-title {
	font-size: clamp(40px, 7.4vw, 88px);
	font-weight: 800;
	letter-spacing: -.038em;
	line-height: 1.0;
	color: #fff;
	text-shadow:
		0 2px 4px rgba(0, 0, 0, .55),
		0 8px 28px rgba(0, 0, 0, .55),
		0 20px 64px rgba(0, 0, 0, .42);
}

.sls-hm__hero-title span {
	/* Solid light gold, not a gradient. A gradient through the mid golds went
	   muddy against the photograph and the clipped fill needed a drop-shadow
	   filter, which read as a cheap emboss. One clean warm tone with the same
	   text-shadow as the white line above holds up over any part of the image. */
	color: var(--b-gold-pale);
	text-shadow:
		0 2px 4px rgba(0, 0, 0, .6),
		0 8px 28px rgba(0, 0, 0, .55),
		0 20px 64px rgba(0, 0, 0, .45);
}

.sls-hm__hero-sub {
	margin-top: 22px;
	font-size: clamp(16px, 1.75vw, 20px);
	line-height: 1.64;
	color: rgba(255, 255, 255, .94);
	text-shadow: 0 2px 10px rgba(0, 0, 0, .66), 0 1px 3px rgba(0, 0, 0, .5);
}

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

/* Trust strip along the bottom of the hero. */
.sls-hm__trust {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-top: 40px;
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, .18);
}

.sls-hm__trust li {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sls-hm__trust li > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 12px;
	color: var(--sls-teal-lt);
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .22);
}

.sls-hm__trust svg { width: 21px; height: 21px; }

.sls-hm__trust strong {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	color: #fff;
	line-height: 1.3;
}

.sls-hm__trust em {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	font-style: normal;
	color: rgba(255, 255, 255, .72);
}

/* --- Buttons -------------------------------------------------------------- */
.sls-hm__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-hm__btn--solid {
	color: var(--b-navy-d) !important;
	background: #fff;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}

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

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

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

.sls-hm__btn--dark {
	color: #fff !important;
	background: var(--sls-ink);
	box-shadow: 0 10px 26px rgba(var(--b-navy-rgb), .24);
}

.sls-hm__btn--dark:hover { transform: translateY(-2px); color: #fff !important; }

/* --- Shared section furniture --------------------------------------------- */
.sls-hm__body { max-width: 1240px; margin: 0 auto; padding: 0 24px 24px; }

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

.sls-hm__section { padding: 74px 0 8px; }

.sls-hm__section-head { margin-bottom: 36px; }

.sls-hm__section-head h2,
.sls-hm__intro h2,
.sls-hm__location h2,
.sls-hm__booking h2 {
	font-size: clamp(27px, 3.6vw, 43px);
	font-weight: 800;
	letter-spacing: -.03em;
}

.sls-hm__section-lede,
.sls-hm__lede {
	margin-top: 16px;
	font-size: clamp(15.5px, 1.55vw, 18px);
	line-height: 1.74;
	color: var(--sls-ink-soft);
}

.sls-hm__intro {
	padding: 78px 0 8px;
}

.sls-hm__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 30px !important;
}

.sls-hm__more a {
	font-weight: 700;
	font-size: 15.5px;
	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-hm__more:hover a { border-bottom-color: var(--sls-teal); }
.sls-hm__more svg { width: 18px; height: 18px; color: var(--sls-teal); transition: transform .22s ease; }
.sls-hm__more:hover svg { transform: translateX(4px); }

/* --- Gallery -------------------------------------------------------------- */
.sls-hm__gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.sls-hm__shot--wide { grid-column: span 2; }

.sls-hm__shot figure {
	position: relative;
	height: 100%;
	overflow: hidden;
	border-radius: 22px;
	box-shadow: var(--sls-shadow);
	transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}

.sls-hm__shot figure:hover {
	transform: translateY(-5px);
	box-shadow: var(--sls-shadow-lif);
}

.sls-hm__shot img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 260px;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.sls-hm__shot--wide img { min-height: 340px; }
.sls-hm__shot--tall img { min-height: 320px; }
.sls-hm__shot figure:hover img { transform: scale(1.05); }

.sls-hm__shot figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 46px 20px 18px;
	color: #fff;
	background: linear-gradient(to top, rgba(13, 27, 43, .94) 0%, rgba(13, 27, 43, .72) 45%, transparent 100%);
}

.sls-hm__shot-tag {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sls-teal-lt);
	margin-bottom: 6px;
}

.sls-hm__shot figcaption strong {
	display: block;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.28;
}

.sls-hm__shot-text {
	display: block;
	margin-top: 6px;
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .8);
}

/* --- Included ------------------------------------------------------------- */
.sls-hm__included {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 18px;
}

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

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

.sls-hm__inc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	margin-bottom: 16px;
	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), 0 10px 22px rgba(var(--b-gold-rgb), .10);
}

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

.sls-hm__included h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.sls-hm__included p { margin-top: 8px; font-size: 14.5px; line-height: 1.62; color: var(--sls-ink-soft); }

/* --- Services ------------------------------------------------------------- */
.sls-hm__services-wrap {
	margin-top: 78px;
	padding: 56px 48px 52px;
	border-radius: 30px;
	background:
		radial-gradient(70% 100% at 4% 0%, rgba(var(--b-gold-rgb), .10), transparent 60%),
		radial-gradient(60% 100% at 98% 100%, rgba(217, 119, 6, .10), transparent 58%),
		var(--b-cream-l);
	border: 1px solid var(--sls-line);
}

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

.sls-hm__services li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px 20px;
	border-radius: 18px;
	background: #fff;
	border: 1px solid var(--sls-line);
	box-shadow: var(--sls-shadow);
	transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

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

.sls-hm__services li > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	border-radius: 13px;
	color: var(--sls-teal);
	background: var(--b-cream-l);
	border: 1px solid var(--b-cream-d);
}

.sls-hm__services svg { width: 23px; height: 23px; }
.sls-hm__services strong { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.sls-hm__services em { margin-top: 5px; font-size: 13px; font-style: normal; color: var(--sls-ink-soft); line-height: 1.5; }

/* --- Location ------------------------------------------------------------- */
.sls-hm__location {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 52px;
	align-items: start;
	padding: 78px 0 8px;
}

.sls-hm__loc-list { margin-top: 28px; display: grid; gap: 12px; }

.sls-hm__loc-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--sls-ink-soft);
}

.sls-hm__loc-list svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--sls-teal); }

.sls-hm__card {
	padding: 32px 30px;
	border-radius: 24px;
	border: 1px solid var(--sls-line);
	background: linear-gradient(165deg, var(--b-cream-l) 0%, #fff 60%);
	box-shadow: var(--sls-shadow);
}

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

.sls-hm__card-addr { font-size: 15.5px; line-height: 1.72; color: var(--sls-ink-soft); }
.sls-hm__card-addr strong { color: var(--sls-ink); font-weight: 700; }

.sls-hm__card-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	font-size: 15px;
	font-weight: 600;
}

.sls-hm__card-row svg { width: 18px; height: 18px; flex: none; color: var(--sls-teal); }
.sls-hm__card-row a { color: var(--sls-ink) !important; text-decoration: none !important; word-break: break-word; }
.sls-hm__card-row a:hover { color: var(--sls-teal) !important; }
.sls-hm__card .sls-hm__btn { margin-top: 24px; width: 100%; }

/* --- Booking -------------------------------------------------------------- */
.sls-hm__booking { padding: 78px 0 8px; scroll-margin-top: 140px; }

/* The widget is hosted by the booking server and reports its own height over
   postMessage, so we set NO height here. The previous fixed 1100px frame is
   exactly what produced the large empty area under a short widget. */
.sls-bk__frame {
	border-radius: 24px;
	overflow: hidden;
	background: transparent;
}

.sls-bk__frame iframe {
	display: block;
	width: 100%;
	border: 0;
}

.sls-bk__fallback,
.sls-hm__booking-fallback {
	margin-top: 16px;
	font-size: 14.5px;
	color: var(--sls-ink-soft);
	text-align: center;
}

.sls-bk__fallback a,
.sls-hm__booking-fallback a {
	color: var(--sls-teal) !important;
	font-weight: 600;
	text-decoration: none !important;
	border-bottom: 1px solid rgba(var(--b-gold-rgb), .35);
}

/* --- CTA ------------------------------------------------------------------ */
.sls-hm__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	margin: 78px 0 20px;
	padding: 44px 46px;
	border-radius: 28px;
	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, .40), transparent 58%),
		var(--b-navy);
	box-shadow: 0 20px 50px rgba(var(--b-navy-rgb), .22);
}

.sls-hm__cta > div { flex: 1 1 400px; }
.sls-hm__cta h2 { color: #fff; font-size: clamp(23px, 2.7vw, 32px); font-weight: 800; letter-spacing: -.025em; }
.sls-hm__cta p { margin-top: 11px; font-size: 15.5px; line-height: 1.68; color: rgba(255, 255, 255, .8); }
.sls-hm__cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
	.sls-hm__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sls-hm__shot--wide { grid-column: span 2; }
	.sls-hm__services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sls-hm__location { grid-template-columns: 1fr; gap: 34px; }
	.sls-hm__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 782px) {
	.sls-hm__hero { min-height: 620px; }
	.sls-hm__hero-inner { padding: 26px 20px 40px; }
	.sls-hm__section, .sls-hm__intro, .sls-hm__location, .sls-hm__booking { padding: 54px 0 4px; }
	.sls-hm__services-wrap { margin-top: 56px; padding: 40px 24px 36px; }
	.sls-hm__cta { padding: 32px 26px; }
}

@media (max-width: 520px) {
	.sls-hm__body { padding: 0 16px 16px; }
	.sls-hm__hero-inner { padding: 0 16px 34px; }
	.sls-hm__hero-cta { flex-direction: column; align-items: stretch; }
	.sls-hm__btn { width: 100%; }
	.sls-hm__gallery { grid-template-columns: 1fr; }
	.sls-hm__shot--wide { grid-column: span 1; }
	.sls-hm__services { grid-template-columns: 1fr; }
	.sls-hm__trust { grid-template-columns: 1fr; }
	.sls-hm__card { padding: 26px 20px; }
	.sls-hm__cta-actions { width: 100%; flex-direction: column; }
	.sls-bk__frame { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.sls-hm *, .sls-hm *::before, .sls-hm *::after { transition: none !important; animation: none !important; }
	.sls-hm__hero-img { animation: none; transform: none; }
	.sls-hm__shot figure:hover, .sls-hm__included li:hover, .sls-hm__services li:hover { transform: none; }
}

@media print {
	.sls-hm__hero { min-height: auto; width: auto; margin: 0; }
	.sls-hm__hero-img, .sls-hm__hero-scrim { display: none; }
	.sls-hm__hero-inner { color: #000; padding: 0 0 20px; }
	.sls-hm__hero-title, .sls-hm__hero-sub { color: #000; text-shadow: none; }
	.sls-hm__hero-title span { color: #000; text-shadow: none; }
	.sls-hm__hero-cta, .sls-hm__cta, .sls-bk__frame { display: none; }
	.sls-hm__trust li > span { border-color: #999; }
	.sls-hm__trust strong, .sls-hm__trust em { color: #000; }
}

/* --- Elementor widget mode --------------------------------------------------
   Each SLS widget renders its own `.sls-hm > .sls-hm__body` wrapper so it keeps
   the 1240px measure and side padding when used standalone. On a page built
   from several widgets that repeats the wrapper's 24px bottom padding once per
   section, which quietly adds ~170px of extra whitespace down the page. Zero it
   for the nested case; the sections supply their own vertical rhythm. */
.elementor-widget-container > .sls-hm > .sls-hm__body {
	padding-bottom: 0;
}

/* --- Booking section ------------------------------------------------------ */
/* It now sits directly under the hero, so it does not need the full 78px lead
   in, and the 36 + 36 of stacked heading margins left the search bar marooned
   in white space. Tighten the rhythm and give the bar a surface of its own so
   it reads as a deliberate panel rather than a form floating on the page. */
.sls-hm__section.sls-hm__booking,
#book.sls-hm__section {
	padding-top: 56px;
}

#book .sls-hm__section-head { margin-bottom: 20px; }
#book .sls-hm__section-head .sls-hm__section-lede { margin-bottom: 0; }

.sls-bk__frame {
	/* Full section width, so the panel edges line up with the heading above
	   it rather than sitting inset from it. */
	width: 100%;
	padding: 14px;
	background: linear-gradient(180deg, #fff, var(--b-cream, #FBF7F1));
	border: 1px solid rgba(var(--b-navy-rgb), .08);
	box-shadow: 0 1px 2px rgba(var(--b-navy-rgb), .04), 0 14px 34px rgba(var(--b-navy-rgb), .09);
}

#book .sls-bk__fallback { margin-bottom: 0; }

@media (max-width: 782px) {
	.sls-hm__section.sls-hm__booking,
	#book.sls-hm__section { padding-top: 40px; }
	.sls-bk__frame { padding: 10px; border-radius: 18px; }
}