/* ==========================================================================
   Samtastic Properties
   ========================================================================== */

:root {
	--ink: #0b1626;
	--ink-2: #16283f;
	--ink-soft: #5b6879;
	--line: #e4e8ee;
	--line-dark: rgba(255, 255, 255, .16);
	--paper: #ffffff;
	--wash: #f6f8fb;
	--gold: #a9812f;
	--gold-light: #c9a44c;
	--green: #0e7a45;

	--display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--radius: 16px;
	--radius-sm: 10px;
	--shadow: 0 1px 2px rgba(11, 22, 38, .05), 0 14px 34px -20px rgba(11, 22, 38, .4);
	--shadow-lg: 0 2px 4px rgba(11, 22, 38, .05), 0 30px 60px -30px rgba(11, 22, 38, .5);
	--header-h: 76px;

	/* Feed the plugin's shortcode styles from the theme palette. */
	--sam-ink: var(--ink);
	--sam-ink-soft: var(--ink-soft);
	--sam-line: var(--line);
	--sam-gold: var(--gold);
	--sam-radius: var(--radius);
	--sam-shadow: var(--shadow);
}

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

body {
	margin: 0;
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.15; letter-spacing: -.012em; margin: 0 0 .5em; }

.wrap { width: min(1180px, calc(100% - 44px)); margin-inline: auto; }
.wrap--narrow { width: min(760px, calc(100% - 44px)); }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 999; width: auto; height: auto;
	clip: auto; padding: 10px 16px; background: var(--ink); color: #fff; border-radius: 8px;
}

/* Buttons ---------------------------------------------------------------- */

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 26px; border: 1px solid transparent; border-radius: 999px;
	font-family: var(--sans); font-size: .93rem; font-weight: 600; letter-spacing: .01em;
	text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn--sm { padding: 9px 18px; font-size: .85rem; }
.btn--primary { background: var(--gold); color: #fff; }
.btn--primary:hover { background: #916d24; color: #fff; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-2); color: #fff; }
.btn--ghost { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .5); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: #fff; color: var(--ink); }
.btn--ghost-dark { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost-dark:hover { border-color: var(--ink); }
.btn--whatsapp { background: #1faa59; color: #fff; width: 100%; }
.btn--whatsapp:hover { background: #178645; color: #fff; }

/* Header ----------------------------------------------------------------- */

.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255, 255, 255, .96);
	border-bottom: 1px solid var(--line);
	backdrop-filter: saturate(180%) blur(12px);
	transition: background .3s, border-color .3s, box-shadow .3s;
}
.site-header__inner { display: flex; align-items: center; gap: 28px; height: var(--header-h); }

.brand__text { display: block; text-decoration: none; line-height: 1.15; }
.brand__name { display: block; font-family: var(--display); font-size: 1.22rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.brand__tag { display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-top: 3px; }
.custom-logo { max-height: 48px; width: auto; }

.site-nav { margin-left: auto; }
/* 1.1.11: Wei Yun — the header nav was showing an item's label wrapped onto
   2 lines, "ugly" (the newest item, "Private Transactions", was the longest
   label added yet). flex-wrap: wrap lets the whole menu drop extra items to
   a second row as a last resort on a cramped desktop width, rather than ever
   breaking a single label's text mid-word; white-space: nowrap on each link
   is what actually stops that word-wrap from happening in the first place. */
.nav-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; list-style: none; margin: 0; padding: 0; }
.nav-menu a { display: inline-block; white-space: nowrap; text-decoration: none; font-size: .92rem; font-weight: 500; color: var(--ink); padding: 6px 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.nav-menu a:hover, .nav-menu .current-menu-item > a { color: var(--gold); border-color: var(--gold); }
.nav-menu .sub-menu { display: none; }

/* Scrollable nav — Wei Yun: "can you make the top menu scrollable? It
   should only show 7 menu at any time." Replaces the earlier auto-
   collapsing "More ▾" dropdown (which used to tuck overflowing items into
   a menu at the end): theme.js now measures the real rendered width of
   the first 7 items and caps .nav-menu to exactly that, so the header
   always shows about 7 items and the rest scroll into view horizontally
   (drag, trackpad/touch swipe, or the arrow buttons below) rather than
   being hidden behind a click. Only kicks in once JS adds .is-scroll-nav
   (see below); with JS off, .nav-menu falls back to today's wrap-to-a-
   second-row behaviour above.
   1.1.37 fix: theme.js adds .is-scroll-nav on EVERY screen width (only the
   measuring logic itself skips mobile), so ".site-nav.is-scroll-nav" was
   unscoped and its "display: flex" (2 classes) outranked the mobile
   drawer's plain ".site-nav { display: none; }" (1 class) inside the
   820px media query below -- the closed hamburger drawer could never
   actually hide, leaving a full-width fixed nav sitting over the whole
   screen on mobile. Wrapping this whole block in a min-width media query
   keeps it strictly desktop-only, so it can never fight the mobile
   drawer's own open/closed toggle again. */
@media (min-width: 821px) {
	.site-nav.is-scroll-nav { display: flex; align-items: center; min-width: 0; }
	.site-nav.is-scroll-nav .nav-menu {
		flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth;
		scrollbar-width: none; -ms-overflow-style: none;
	}
	.site-nav.is-scroll-nav .nav-menu::-webkit-scrollbar { display: none; }
	.site-nav.is-scroll-nav .nav-menu > li { flex: 0 0 auto; }
	.site-nav.is-scroll-nav.has-overflow .nav-scroll-btn { display: inline-flex; }
}
.nav-scroll-btn {
	display: none; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%;
	background: #fff; color: var(--ink); cursor: pointer; padding: 0;
}
.nav-scroll-btn svg { width: 9px; height: 9px; }
.nav-scroll-btn--prev { margin-right: 10px; }
.nav-scroll-btn--next { margin-left: 10px; }
.nav-scroll-btn:disabled { opacity: .3; cursor: default; }
.nav-scroll-btn:not(:disabled):hover { border-color: var(--gold); color: var(--gold); }

.site-header__actions { display: flex; align-items: center; gap: 14px; }
.header-phone { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-weight: 600; font-size: .9rem; color: var(--ink); white-space: nowrap; }
.header-phone:hover { color: var(--gold); }
.header-admin-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 600; font-size: .82rem; color: var(--ink-muted, #6b7280); white-space: nowrap; opacity: .75; }
.header-admin-link:hover { color: var(--gold); opacity: 1; }

/* 1.1.12: Wei Yun — "can you change the top Whatsapp Me to be a WhatsApp
   icon?" A round WhatsApp-brand-green icon button, same glyph as the
   floating .wa-float chat button, replacing the old text pill. */
.header-whatsapp { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #25d366; flex-shrink: 0; transition: background .2s, transform .15s; }
.header-whatsapp:hover { background: #1ebe5b; transform: scale(1.05); }
.header-whatsapp svg { display: block; }

.nav-toggle { display: none; width: 42px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; padding: 10px 9px; flex-direction: column; justify-content: space-between; }
.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Transparent header while the hero is under it. */
body.has-hero .site-header:not(.is-stuck) {
	background: transparent; border-color: transparent; backdrop-filter: none;
}
body.has-hero .site-header:not(.is-stuck) .brand__name,
body.has-hero .site-header:not(.is-stuck) .nav-menu a,
body.has-hero .site-header:not(.is-stuck) .header-phone { color: #fff; }
body.has-hero .site-header:not(.is-stuck) .brand__tag { color: rgba(255, 255, 255, .72); }
body.has-hero .site-header:not(.is-stuck) .nav-toggle { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); }
body.has-hero .site-header:not(.is-stuck) .nav-toggle span { background: #fff; }
body.has-hero .site-header:not(.is-stuck) .nav-scroll-btn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); color: #fff; }
body.has-hero .site-header { position: fixed; left: 0; right: 0; }
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }
body.has-hero .site-header.is-stuck { box-shadow: 0 1px 20px rgba(11, 22, 38, .08); }

/* 1.1.21: Wei Yun — "sometimes the buttons are not clickable" on mobile.
   The header is sticky/fixed at all times (--header-h tall), so jumping to
   #enquire via the header/footer "Enquire" links landed the section flush
   against the very top of the viewport, tucking its heading and first
   field behind the header. scroll-margin-top leaves --header-h of clearance
   above it when the browser scrolls the anchor into view. */
#enquire { scroll-margin-top: var(--header-h); }

/* Hero ------------------------------------------------------------------- */

/* 1.2.0: a solid dark fallback behind the whole section, not just the
   absolutely-positioned .hero__bg/.hero__scrim inside .hero__slide -- the
   new .hero__stats strip sits below the overlapping search card, past the
   bottom edge of the slide's own photo/scrim box, so without this it was
   sitting on the plain white page background instead of the hero's dark
   backdrop (barely-visible white-on-white text). Only used on the front
   page (single-samtastic_launch.php's own hero uses .launch-hero, a
   different class), so this can't affect any other template. */
.hero { position: relative; background: var(--ink); }
.hero__slides { position: relative; }
.hero__slide {
	position: relative; min-height: min(86vh, 780px);
	display: flex; align-items: flex-end; padding: calc(var(--header-h) + 40px) 0 190px;
	overflow: hidden;
}
.hero--slider .hero__slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .8s ease; }
.hero--slider .hero__slide.is-active { position: relative; opacity: 1; pointer-events: auto; }

.hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--ink-2); transform: scale(1.02); }
.hero--slider .hero__slide.is-active .hero__bg { animation: heroZoom 14s ease-out forwards; }
@keyframes heroZoom { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.hero__bg--plain { background: linear-gradient(140deg, #1d3557 0%, #16283f 45%, #0b1626 100%); }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,22,38,.72) 0%, rgba(11,22,38,.28) 38%, rgba(11,22,38,.86) 100%); }

.hero__inner { position: relative; }
.hero__content { max-width: 720px; color: #fff; }
.hero__eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; font-size: .84rem; }
.hero__district { color: rgba(255, 255, 255, .85); letter-spacing: .04em; }
.hero__title { font-size: clamp(2.4rem, 6vw, 4.1rem); color: #fff; margin: 0 0 12px; letter-spacing: -.02em; }
.hero__tagline { font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(255, 255, 255, .84); margin: 0 0 28px; max-width: 46ch; }

.hero__facts { display: flex; flex-wrap: wrap; gap: 14px 42px; list-style: none; margin: 0 0 30px; padding: 0; }
.hero__facts li { display: flex; flex-direction: column; gap: 2px; }
.hero__facts span { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.hero__facts strong { font-family: var(--display); font-size: 1.3rem; font-weight: 500; color: #fff; }
.hero__facts em { font-style: normal; font-size: .78rem; color: var(--gold-light); font-weight: 600; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 168px; display: flex; gap: 9px; z-index: 3; }
.hero__dot { width: 32px; height: 3px; border: 0; padding: 0; border-radius: 3px; background: rgba(255, 255, 255, .38); cursor: pointer; transition: background .3s; }
.hero__dot.is-active { background: var(--gold-light); }

/* Search bar ------------------------------------------------------------- */

.hero__search { position: relative; z-index: 4; margin-top: -78px; }
.launch-search {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 18px;
	align-items: end; background: #fff; border-radius: var(--radius);
	padding: 22px 24px; box-shadow: var(--shadow-lg);
}
.launch-search--compact { box-shadow: none; border: 1px solid var(--line); padding: 18px 20px; }
.launch-search__field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.launch-search__field label { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.launch-search__field select {
	appearance: none; width: 100%; padding: 12px 38px 12px 14px; border: 1px solid var(--line);
	border-radius: var(--radius-sm); font: inherit; font-size: .93rem; background: #fff; color: var(--ink);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235b6879' stroke-width='2'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center;
}
.launch-search__field select:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }
.launch-search__submit { height: 47px; white-space: nowrap; }

.archive-filter { margin: -26px auto 0; position: relative; z-index: 3; }

/* 1.1.32: "Browse by topic" -- the content-calendar IA's blog Topics
   (samtastic_blog_pillar), shown on the blog archive and each Topic's own
   archive page. See index.php.
   1.1.39: Wei Yun -- "The sub menu is very messy." Unlike .archive-filter
   just above (which only ever wraps a solid white search-bar card with its
   own background), this row's negative top margin pulled it up to overlap
   the bottom of the dark .page-head hero -- fine for the pill links
   themselves (solid #fff background, so they read clearly either way), but
   .blog-pillar-nav__label is bare text in var(--ink-soft), a grey tone
   meant for a white background. Sitting right at the hero's boundary, the
   label rendered nearly illegible against the dark navy behind it. Removed
   the overlap entirely (positive margin-top instead of negative) so the
   whole row sits cleanly in the white section below the hero -- never
   touching the dark background -- rather than trying to find a text color
   that would work against both. */
.blog-pillar-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 28px auto 40px; position: relative; z-index: 3; }
.blog-pillar-nav__label { font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); }
.blog-pillar-nav__link { font-size: .88rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; transition: color .15s ease, border-color .15s ease; }
.blog-pillar-nav__link:hover, .blog-pillar-nav__link.is-active { color: #fff; background: var(--gold); border-color: var(--gold); }

/* Auto-appended "More in [Topic]" cross-links on a single blog post -- see
   samtastic_blog_related_posts_block() in includes/blog-pillars.php. */
.samtastic-blog-related { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.samtastic-blog-related h3 { font-size: 1.05rem; margin: 0 0 12px; }
.samtastic-blog-related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.samtastic-blog-related a { color: var(--gold); font-weight: 600; text-decoration: none; }
.samtastic-blog-related a:hover { text-decoration: underline; }

/* Sections --------------------------------------------------------------- */

.section { padding: 84px 0; }
.section--launches { padding-top: 96px; }
.section--calendar { background: var(--wash); }
.section--about { background: var(--ink); color: rgba(255, 255, 255, .82); }
.section--related { background: var(--wash); }
.section--archive { padding-top: 56px; }

.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 38px; flex-wrap: wrap; }
.section__eyebrow { margin: 0 0 8px; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.section__title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 0; }
.section--about .section__title { color: #fff; }
.section__more { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-weight: 600; font-size: .92rem; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.section__more:hover { color: var(--gold); border-color: var(--gold); }

/* Explore by area (1.21.206) ---------------------------------------------
   Homepage entry point into the HDB town / URA district / BTO project page
   families -- see samtastic_shortcode_explore_areas() (includes/shortcodes.php)
   and its docblock for why this exists. */

.section--explore-areas { background: var(--wash); }
.explore-areas { display: grid; gap: 36px; }
.explore-areas__group + .explore-areas__group { padding-top: 32px; border-top: 1px solid var(--line); }
.explore-areas__heading { margin: 0 0 16px; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.explore-areas__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.explore-areas__chips li { margin: 0; }
.explore-areas__chips a {
	display: inline-block; padding: 8px 16px; border-radius: 999px;
	background: #fff; border: 1px solid var(--line); color: var(--ink);
	font-size: .88rem; font-weight: 600; text-decoration: none;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.explore-areas__chips a:hover { border-color: var(--gold); color: var(--gold); background: #fff; }
.explore-areas__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; text-decoration: none; font-weight: 600; font-size: .88rem; color: var(--gold); }
.explore-areas__more:hover { color: var(--gold-light); }

/* Launch cards ----------------------------------------------------------- */

.launch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }

.launch-card {
	display: flex; flex-direction: column; background: #fff;
	border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
	box-shadow: var(--shadow); transition: transform .3s ease, box-shadow .3s ease;
}
.launch-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.launch-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--wash); }
.launch-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.launch-card:hover .launch-card__media img { transform: scale(1.05); }
.launch-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #e8ecf2, #dbe2ec); }

.badge {
	display: inline-block; padding: 6px 12px; border-radius: 999px;
	font-family: var(--sans); font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	background: rgba(255, 255, 255, .95); color: var(--ink);
}
.launch-card__media .badge { position: absolute; top: 14px; left: 14px; }
.badge--selling { background: var(--green); color: #fff; }
.badge--launching { background: #b8791b; color: #fff; }
.badge--preview { background: #4a3fa5; color: #fff; }
.badge--upcoming { background: #1f4f82; color: #fff; }
.badge--top_soon { background: #0f6d7d; color: #fff; }
.badge--fully_sold { background: #6b7280; color: #fff; }

.launch-card__countdown {
	position: absolute; bottom: 14px; left: 14px;
	background: rgba(11, 22, 38, .82); color: #fff; backdrop-filter: blur(4px);
	padding: 6px 12px; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .02em;
}

.launch-card__body { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 22px; flex: 1; }
.launch-card__district { margin: 0; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.launch-card__title { margin: 0; font-size: 1.32rem; }
.launch-card__title a { text-decoration: none; }
.launch-card__title a:hover { color: var(--gold); }
.launch-card__tagline { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; }

.launch-card__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 14px 0 0; }
.launch-card__facts > div { display: flex; flex-direction: column; min-width: 0; }
.launch-card__facts dt { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.launch-card__facts dd { margin: 2px 0 0; font-weight: 600; font-size: .96rem; }

.launch-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.launch-card__date { margin: 16px 0 0; display: flex; flex-direction: column; }
.launch-card__foot .launch-card__date { margin: 0; }
.launch-card__date span { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.launch-card__date strong { font-size: .98rem; font-weight: 600; }
.launch-card__link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: .88rem; font-weight: 600; color: var(--gold); white-space: nowrap; }
.launch-card__link:hover { gap: 10px; }

/* Calendar --------------------------------------------------------------- */

.calendar-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; align-items: start; }
.calendar-intro__text { color: var(--ink-soft); margin: 0 0 24px; max-width: 42ch; }

.calendar { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.calendar__row { display: grid; grid-template-columns: 84px 1fr auto; gap: 22px; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.calendar__row:last-child { border-bottom: 0; }
.calendar__date { text-align: center; line-height: 1.05; padding: 8px 0; border-right: 1px solid var(--line); }
.calendar__day { display: block; font-family: var(--display); font-size: 1.9rem; font-weight: 600; }
.calendar__month { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.calendar__year { display: block; font-size: .68rem; color: var(--ink-soft); }
.calendar__body h3 { margin: 0 0 2px; font-size: 1.12rem; }
.calendar__body h3 a { text-decoration: none; }
.calendar__body h3 a:hover { color: var(--gold); }
.calendar__body p { margin: 0; font-size: .86rem; color: var(--ink-soft); }
.calendar__countdown { font-size: .78rem; font-weight: 600; color: var(--ink); background: var(--wash); border-radius: 999px; padding: 7px 14px; white-space: nowrap; }

/* About ------------------------------------------------------------------ */

.about-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; }
.about-copy__text p { color: rgba(255, 255, 255, .78); margin: 0 0 16px; }
.about-points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; }
.about-points li { display: flex; flex-direction: column; gap: 3px; padding-left: 20px; border-left: 2px solid var(--gold); }
.about-points strong { color: #fff; font-size: .98rem; }
.about-points span { color: rgba(255, 255, 255, .66); font-size: .9rem; }

.about-card { --sam-paper: #fff; }
.section--about .sam-form { border: 0; box-shadow: var(--shadow-lg); }

/* CTA -------------------------------------------------------------------- */

.section--cta { background: var(--wash); }
.cta-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.cta-text { color: var(--ink-soft); max-width: 44ch; }

/* Page heads ------------------------------------------------------------- */

.page-head { background: var(--ink); color: #fff; padding: calc(var(--header-h) + 46px) 0 74px; }
body:not(.has-hero) .page-head { padding-top: 60px; }
.page-head__title { color: #fff; font-size: clamp(2rem, 4.4vw, 3rem); margin: 0 0 10px; }
.page-head__intro { color: rgba(255, 255, 255, .74); margin: 0; max-width: 60ch; }

/* 1.21.19: Wei Yun — "can you set a counter value on each page with a human
   icon with the counter starting today?" A quiet "N views" line with a
   small person icon, next to every page's title. Every insertion point
   (.page-head, .hero, .launch-hero) has a dark background, so this defaults
   to light/translucent text rather than the usual muted-gray a light-bg
   page would use. */
.page-views { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 12px; font-size: .82rem; color: rgba(255, 255, 255, .62); }
.page-views svg { flex-shrink: 0; }
.hero__views { margin-top: -6px; margin-bottom: 18px; }
.hero__views .page-views, .launch-hero .page-views { margin-bottom: 10px; color: rgba(255, 255, 255, .68); }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .8rem; margin-bottom: 18px; color: rgba(255, 255, 255, .6); }
.crumbs a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs__current { color: rgba(255, 255, 255, .6); }

.archive-count { color: var(--ink-soft); font-size: .88rem; margin: 34px 0 20px; }

/* Single launch ---------------------------------------------------------- */

.launch-hero { position: relative; padding: calc(var(--header-h) + 60px) 0 68px; overflow: hidden; }
.launch-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--ink-2); }
.launch-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,22,38,.78) 0%, rgba(11,22,38,.4) 40%, rgba(11,22,38,.88) 100%); }
.launch-hero__inner { position: relative; color: #fff; }
.launch-hero__eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; color: rgba(255, 255, 255, .85); font-size: .85rem; }
.launch-hero__title { color: #fff; font-size: clamp(2.1rem, 5vw, 3.4rem); margin: 0 0 10px; }
.launch-hero__tagline { color: rgba(255, 255, 255, .8); font-size: 1.05rem; margin: 0; max-width: 52ch; }

.launch-layout { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 56px; align-items: start; padding: 56px 0 80px; }
.launch-aside__sticky { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 20px; }

.launch-keyfacts {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px;
	background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 46px;
}
.keyfact { background: #fff; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.keyfact:last-child { grid-column: auto / -1; }
.keyfact__label { font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); }
.keyfact__value { font-family: var(--display); font-size: 1.2rem; font-weight: 500; }

.launch-section { margin-bottom: 52px; }
.launch-section > h2 { font-size: 1.6rem; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }

.prose { line-height: 1.75; color: #26364a; }
.prose p { margin: 0 0 1.1em; }
.prose h2 { font-size: 1.5rem; margin: 1.6em 0 .5em; }
.prose h3 { font-size: 1.22rem; margin: 1.4em 0 .5em; }
.prose ul, .prose ol { padding-left: 22px; }
.prose a { color: var(--gold); }
.prose blockquote { margin: 1.5em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--gold); color: var(--ink-soft); font-style: italic; }
.prose img { border-radius: var(--radius-sm); }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 32px; line-height: 1.55; }
.ticks li::before {
	content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%;
	background: rgba(169, 129, 47, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a9812f' stroke-width='3.2'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center no-repeat;
}

.table-scroll { overflow-x: auto; }
.unit-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.unit-table th, .unit-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.unit-table th { font-family: var(--sans); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; background: var(--wash); }
.unit-table tbody tr:hover { background: var(--wash); }
.fineprint { font-size: .78rem; color: var(--ink-soft); margin: 12px 0 0; }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gallery-grid__item { display: block; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/3; }
.gallery-grid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-grid__item:hover img { transform: scale(1.06); }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.plan { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.plan img { display: block; width: 100%; background: #fff; }
.plan figcaption { padding: 10px 14px 0; font-size: .82rem; color: var(--ink-soft); border-top: 1px solid var(--line); }
.plan__visualize-3d { display: block; width: calc(100% - 28px); margin: 10px 14px 14px; text-align: center; }

.location-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; }
.location-list li { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.location-list strong { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; padding-top: 3px; }

.map-embed, .video-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.video-embed iframe { width: 100%; aspect-ratio: 16/9; height: auto; display: block; border: 0; }

.launch-price-card { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 26px; }
.launch-price-card__label { margin: 0; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.launch-price-card__price { margin: 4px 0 18px; font-family: var(--display); font-size: 2.2rem; color: #fff; line-height: 1; }
.launch-countdown { display: flex; flex-direction: column; gap: 3px; padding: 16px 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); margin-bottom: 18px; }
.launch-countdown__label { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .58); }
.launch-countdown__date { font-size: 1.05rem; font-weight: 600; }
.launch-countdown__days { font-size: .82rem; color: var(--gold-light); font-weight: 600; }
.launch-preview-date { margin: -8px 0 18px; font-size: .84rem; color: rgba(255, 255, 255, .7); }
.launch-price-card__actions { display: grid; gap: 10px; }
.launch-price-card__actions .btn--ghost-dark { color: #fff; border-color: rgba(255, 255, 255, .34); }
.launch-price-card__actions .btn--ghost-dark:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* Market Watch (1.21.213) -- projects Wei Yun covers for search traffic
   but does not represent. Deliberately a colder, flatter, more "notice"
   like palette than the warm gold launch styling above it, so a listing
   never reads as one of her own at a glance. ------------------------- */

.market-watch-banner { background: #3f3f46; color: #fff; padding: 14px 0; }
.market-watch-banner__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.market-watch-banner__badge {
	display: inline-block; flex-shrink: 0; padding: 5px 12px; border-radius: 999px;
	background: #6b7280; color: #fff; font-size: .72rem; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase;
}
.market-watch-banner__text { margin: 0; font-size: .9rem; color: rgba(255, 255, 255, .88); }

.market-watch-cta {
	margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius);
	background: #f7f7f8; text-align: center;
}
.market-watch-cta p { margin: 0 0 12px; color: var(--ink-soft); font-size: .92rem; }

.market-watch__disclosure {
	max-width: 760px; margin: 0 0 34px; padding: 14px 18px; border-radius: var(--radius);
	background: #f2f2f4; color: var(--ink-soft); font-size: .92rem;
}
.market-watch__cta { margin-top: 44px; text-align: center; }
.market-watch__cta p { color: var(--ink-soft); margin: 0 0 14px; }

/* Blog / pages ----------------------------------------------------------- */

.post-list { display: grid; gap: 30px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.post-item { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.post-item__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.post-item__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-item__date { margin: 0; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.post-item__title { margin: 0; font-size: 1.24rem; }
.post-item__title a { text-decoration: none; }
.post-item__excerpt { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.post-item__link { margin-top: auto; font-weight: 600; font-size: .88rem; color: var(--gold); text-decoration: none; }

.page-thumb { margin: 0 0 32px; border-radius: var(--radius); overflow: hidden; }

.pagination { display: flex; justify-content: center; margin-top: 46px; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px;
	padding: 0 12px; margin: 0 4px; border: 1px solid var(--line); border-radius: 10px;
	text-decoration: none; font-size: .92rem; font-weight: 600; color: var(--ink);
}
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }
.pagination .page-numbers:hover { border-color: var(--gold); color: var(--gold); }

.empty-state { text-align: center; padding: 70px 20px; }
.empty-state h1, .empty-state h2 { font-size: 1.8rem; margin-bottom: 10px; }
.empty-state p { color: var(--ink-soft); margin: 0 0 20px; }

/* Footer ----------------------------------------------------------------- */

.site-footer { background: var(--ink); color: rgba(255, 255, 255, .72); padding: 66px 0 30px; }
.site-footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid var(--line-dark); }
.site-footer__name { font-family: var(--display); font-size: 1.35rem; color: #fff; margin: 0 0 4px; }
.site-footer__tag { margin: 0 0 18px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); }
.site-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-footer__contact a, .footer-menu a { color: rgba(255, 255, 255, .78); text-decoration: none; font-size: .92rem; }
.site-footer__contact a:hover, .footer-menu a:hover { color: var(--gold-light); }
.site-footer__links h4 { color: #fff; font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
.footer-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-menu .muted { color: rgba(255, 255, 255, .45); font-size: .9rem; }
.site-footer__widgets { display: grid; gap: 22px; }
.site-footer__widgets ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer__widgets a { color: rgba(255, 255, 255, .78); text-decoration: none; font-size: .92rem; }
.site-footer__widgets a:hover { color: var(--gold-light); }
.widget-title { font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
.site-footer__legal { padding-top: 24px; font-size: .8rem; color: rgba(255, 255, 255, .5); }
.site-footer__legal p { margin: 0 0 8px; }
.site-footer__disclaimer { max-width: 100ch; line-height: 1.6; font-size: .74rem; }
.widget-title { color: #fff; }

/* 1.21.188: Wei Yun — "the telegram icon... seems to be blocking my website
   navigation controls... unable to click it unless it is scrolled away from
   the telegram icon." The actual bug: .tg-prompt (the recurring reminder
   popup) sat in normal document flow inside this flex column at its full
   272px width even while hidden (opacity: 0 is still a laid-out box, not
   display: none) -- so .float-stack's real footprint, on every single page
   load, was a ~272px-wide invisible column reaching from the bottom-right
   corner up past the two 56px buttons, not just the small circles
   themselves. Anything else on the page that happened to render underneath
   that invisible region (any "close by" button, as reported) could have its
   clicks swallowed by it, since a plain, unstyled box still participates in
   hit-testing across its whole area even with nothing visible painted there.
   Two independent fixes, belt-and-braces: (1) .tg-prompt is now
   position: absolute, floated above the buttons instead of occupying flow
   space, so the column's real box shrinks back down to just the two round
   buttons; (2) pointer-events: none on the container itself, re-enabled only
   on the actual clickable pieces, so even the "gap" space between/around the
   buttons can never intercept a click meant for something else on the page. */
.float-stack { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }

.wa-float, .tg-float {
	width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
	flex-shrink: 0; transition: transform .2s;
	position: relative;
	pointer-events: auto;
}
.wa-float { background: #1faa59; color: #fff; box-shadow: 0 10px 26px -8px rgba(31, 170, 89, .8); }
.tg-float { box-shadow: 0 10px 26px -8px rgba(41, 169, 235, .8); }
.wa-float:hover, .tg-float:hover { transform: scale(1.06); }

/* Quiet, always-on pulse ring on the Telegram button (1.1.22) --------------
 * A subtler, permanent companion to the recurring popup above: even on a
 * visit where the popup's cooldown hasn't come back around yet, this keeps
 * a gentle nudge toward Telegram specifically (not WhatsApp) without ever
 * feeling like it's shouting -- slow cycle, low opacity, restrained scale,
 * in keeping with this being a professional real-estate site.
 */
.tg-float::before {
	content: ''; position: absolute; inset: 0; border-radius: 50%;
	background: #29a9eb; opacity: .55;
	animation: tg-float-pulse 2.4s ease-out infinite;
	pointer-events: none;
}
@keyframes tg-float-pulse {
	0% { transform: scale(1); opacity: .45; }
	70% { transform: scale(1.55); opacity: 0; }
	100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.tg-float::before { animation: none; display: none; }
}

/* Permanent "attract" label beside the floating Telegram button (1.21.198)
 * -- Wei Yun: "can you update the telegram icon on the bottom right to
 * prompt with words to attract the user to click." Unlike .tg-prompt below
 * (a one-time popup that shows briefly then hides itself for days), this
 * sits right next to the round icon on every single page view, with no
 * timer, no cooldown and no close button. .tg-float itself (the round icon
 * + its pulse ring) is untouched -- this only adds a sibling pill to its
 * left inside a small flex row, so nothing about the icon's own long-
 * standing click-area fix (1.21.188) is at risk. Same pointer-events
 * pattern as .float-stack: the row inherits pointer-events: none from its
 * ancestor, re-enabled only on the two actual links.
 */
.tg-float-row { display: flex; align-items: center; gap: 10px; }
.tg-float__badge {
	pointer-events: auto;
	background: #fff; color: var(--ink); text-decoration: none; white-space: nowrap;
	font-size: .82rem; font-weight: 600; line-height: 1;
	padding: 12px 16px; border-radius: 999px;
	box-shadow: 0 10px 26px -8px rgba(15, 28, 46, .35);
	transition: transform .2s, background .2s;
}
.tg-float__badge:hover { background: var(--wash); transform: scale(1.04); }
@media (max-width: 380px) {
	/* Narrow phones: keep just the icon (with its own aria-label) so the
	   row never crowds the edge of the screen or wraps awkwardly. */
	.tg-float__badge { display: none; }
}

.tg-prompt {
	/* 1.21.188: absolute + anchored to the bottom-right corner of the fixed
	   .float-stack, instead of sitting in its normal flex flow -- see the
	   note above .float-stack. This is what actually stops the hidden popup
	   from reserving a big invisible click-blocking box on every page. */
	position: absolute; right: 0; bottom: calc(100% + 12px); width: 272px; max-width: calc(100vw - 40px);
	background: #fff; border: 1px solid var(--line); border-radius: 14px;
	box-shadow: var(--shadow-lg); padding: 16px 18px 16px;
	opacity: 0; transform: translateY(8px) scale(.98); pointer-events: none;
	transition: opacity .3s ease, transform .3s ease;
}
.tg-prompt.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.tg-prompt__close {
	position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border: 0; border-radius: 50%;
	background: transparent; color: var(--ink-soft); font-size: 18px; line-height: 1; cursor: pointer;
}
.tg-prompt__close:hover { background: var(--wash); color: var(--ink); }
.tg-prompt__text { margin: 0 20px 12px 0; font-size: .88rem; line-height: 1.5; color: var(--ink); }
.tg-prompt__cta {
	display: inline-flex; align-items: center; justify-content: center; width: 100%;
	padding: 10px 16px; border-radius: 999px; background: #29a9eb; color: #fff;
	font-size: .86rem; font-weight: 600; text-decoration: none; transition: background .2s;
}
.tg-prompt__cta:hover { background: #1c8ec4; color: #fff; }

/* Brochure code modal (1.21.158) ------------------------------------------ */

.brochure-modal[hidden] { display: none; }
.brochure-modal {
	position: fixed; inset: 0; z-index: 200;
	display: flex; align-items: center; justify-content: center; padding: 20px;
}
.brochure-modal__backdrop {
	position: absolute; inset: 0; background: rgba(11, 22, 38, .6); backdrop-filter: blur(2px);
}
.brochure-modal__panel {
	position: relative; width: min(420px, 100%);
	background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
	padding: 32px 28px 28px; text-align: center;
}
.brochure-modal__close {
	position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%;
	background: transparent; color: var(--ink-soft); font-size: 22px; line-height: 1; cursor: pointer;
}
.brochure-modal__close:hover { background: var(--wash); color: var(--ink); }
.brochure-modal__title { margin-bottom: 10px; font-size: 1.3rem; }
.brochure-modal__body p { margin: 0 0 12px; font-size: .93rem; line-height: 1.55; color: var(--ink-soft); }
.brochure-modal__code {
	font-family: var(--display); font-size: 2rem; font-weight: 600; letter-spacing: .12em;
	color: var(--ink); background: var(--wash); border: 1px dashed var(--line);
	border-radius: var(--radius-sm); padding: 12px 8px; margin: 0 0 16px;
}
.brochure-modal__cta {
	display: inline-flex; width: 100%; margin: 4px 0 14px;
	background: #29a9eb; color: #fff;
}
.brochure-modal__cta:hover { background: #1c8ec4; color: #fff; }
.brochure-modal__hint { font-size: .8rem !important; color: var(--ink-soft); }
.brochure-modal__error { color: #b3261e !important; }

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1080px) {
	.launch-layout { grid-template-columns: 1fr; }
	.launch-aside__sticky { position: static; }
	.calendar-layout, .about-layout, .cta-layout { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 900px) {
	.launch-grid, .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.launch-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.launch-search__submit { grid-column: 1 / -1; }
	.gallery-grid { grid-template-columns: repeat(2, 1fr); }
	.site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
	.nav-toggle { display: flex; }
	.site-nav {
		position: fixed; inset: var(--header-h) 0 auto; background: #fff; border-bottom: 1px solid var(--line);
		padding: 18px 22px 26px; display: none; box-shadow: var(--shadow-lg);
	}
	.site-nav.is-open { display: block; }
	.nav-menu { flex-direction: column; align-items: stretch; gap: 4px; overflow-x: visible !important; max-width: none !important; }
	.nav-menu a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink) !important; }
	body.has-hero .site-header:not(.is-stuck) .site-nav.is-open .nav-menu a { color: var(--ink) !important; }
	/* The scroll arrows and the 7-item width cap are a desktop-only
	   space-saver (theme.js resets .nav-menu's max-width below this width) —
	   this is just a safety net so nothing looks broken if it's ever left
	   applied at this width. The hamburger drawer always lists every item,
	   full-width, one per line, with nothing to scroll. */
	.nav-scroll-btn { display: none !important; }
	.header-phone span { display: none; }
	.header-admin-link span { display: none; }
	.hero__slide { min-height: 74vh; padding-bottom: 220px; }
	.hero__dots { bottom: 196px; }
	.hero__facts { gap: 12px 26px; }
}

@media (max-width: 620px) {
	.wrap { width: calc(100% - 32px); }
	.site-header__inner { gap: 12px; }
	.site-header__actions .btn--sm { display: none; }
	.brand__name { font-size: 1.02rem; }
	.brand__tag { font-size: .58rem; letter-spacing: .12em; }
	.hero__title { font-size: 2.1rem; }
	.launch-card__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.section { padding: 60px 0; }
	.launch-grid, .post-list { grid-template-columns: 1fr; }
	.launch-search { grid-template-columns: 1fr; }
	.hero__search { margin-top: -60px; }
	.calendar__row { grid-template-columns: 62px 1fr; row-gap: 10px; padding: 18px; }
	.calendar__countdown { grid-column: 2; justify-self: start; }
	.location-list li { grid-template-columns: 1fr; gap: 4px; }
	.gallery-grid { grid-template-columns: 1fr 1fr; }
	.site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
	.launch-keyfacts { grid-template-columns: 1fr 1fr; }
}

/* Mobile app-style layout ------------------------------------------------- */
/* 1.1.9: Wei Yun — "are you able to create a segregated theme for mobile
   users? It should look like an app similar to facebook. It will have
   navigation icons at the bottom based on the pages we have." Rather than a
   second theme, the existing header shrinks into a slim app-style top bar
   and a fixed bottom tab bar (samtastic_mobile_app_nav(), footer.php)
   appears — both only at true phone widths, so tablet/desktop are
   completely unaffected. */

.mobile-app-nav { display: none; }

@media (max-width: 680px) {
	/* --header-h drives every sticky-offset/padding calc across the theme
	   (hero, page-head, launch-hero, sticky sidebars, etc.) — shrinking the
	   variable itself keeps all of those in sync automatically, rather than
	   resizing .site-header__inner on its own and having everything else on
	   the page fall out of alignment with it. */
	:root { --header-h: 58px; }

	.brand__tag { display: none; }
	.site-header__inner { gap: 10px; }

	body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

	.mobile-app-nav {
		display: flex;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
		background: rgba(255, 255, 255, .98);
		border-top: 1px solid var(--line);
		backdrop-filter: saturate(180%) blur(14px);
		padding: 5px 2px calc(5px + env(safe-area-inset-bottom));
	}
	.mobile-app-nav__item {
		flex: 1 1 0; min-width: 0;
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		gap: 3px; padding: 5px 1px; text-decoration: none; color: var(--ink-soft);
		font-family: var(--sans); font-size: .6rem; font-weight: 600; letter-spacing: .01em;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	.mobile-app-nav__item svg { flex-shrink: 0; }
	.mobile-app-nav__item.is-active { color: var(--gold); }

	/* Keep the floating WhatsApp/Telegram buttons clear of the new bottom
	   tab bar instead of overlapping it. */
	.float-stack { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}

/* Homepage revamp (theme 1.1.40) -- Wei Yun: "can you also re-design the
   homepage to make it more appealing for the user to scroll through the
   website?" Two of that revamp's three pieces are still in play under the
   1.2.0 full revamp below: a thin scroll-progress bar pinned to the top of
   the window (.scroll-progress, filled in by theme.js as the page
   scrolls), and a one-way scroll-reveal fade/rise-in for each section and
   card (.reveal / .reveal.is-visible, driven by an IntersectionObserver in
   theme.js -- nothing is ever hidden unless JavaScript actually adds the
   .reveal class itself, so a page with JS disabled renders normally, and
   `@media (prefers-reduced-motion: reduce)` above forces every
   transition/animation off site-wide regardless). Its third piece --
   background bands behind the old MAS-rates/Latest-Transactions/Town-Pulse/
   Property-Finder section stack above the hero -- no longer applies:
   1.2.0 replaced that whole stack with the "Free tools" section below,
   which frames each of those same shortcodes in its own .tool-card instead. */
.section--bot-promo { background: var(--paper); }

.scroll-progress {
	position: fixed; top: 0; left: 0; height: 3px; width: 0%;
	background: linear-gradient(90deg, var(--gold), var(--gold-light));
	z-index: 150; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Front page: structure (1.2.0) + editorial redesign (1.3.0) + bold/modern
   redesign (1.4.0)
   ==========================================================================
   1.2.0 -- Wei Yun: "Do a full revamp of the front page... free to redesign
   to something that can engage the user... any change." Restructured
   front-page.php's section order (see that file's own docblock).
   1.3.0 -- Wei Yun on the result: "it looks ugly. re-design with a complete
   theme." Chose "warm luxury & editorial", named layout/spacing and overall
   feel (not colour/type) as the problem. Rebuilt the same structure with a
   quieter, editorial visual language (hairline rules, a numbered index, a
   magazine feature story) on the SAME navy/gold palette and Fraunces/Inter
   type -- those were never the complaint that round.
   1.4.0 -- Wei Yun asked to start over again, this time explicitly opening
   up colour and type too. Chosen direction: "bold & modern" -- high
   contrast, big type, punchy colour blocks, a confident/energetic feel.
   Page STRUCTURE and section order are unchanged from 1.2.0/1.3.0; only the
   palette, type and component styling changed. New palette: near-black ink
   + a single bold electric-blue accent (was navy + gold), Space Grotesk
   replacing Fraunces as the display face (Inter stays as the body face).
   Every new/changed rule below is scoped to `body.home` (front page only)
   or is a brand-new class used only on the front page -- nothing here can
   affect single-samtastic_launch.php, archive-samtastic_launch.php or the
   taxonomy templates, which keep the original navy/gold/Fraunces look. */

/* --- Design tokens: bold/modern palette + type, front page only --------- */
body.home {
	--ink: #0a0a0f;
	--ink-2: #17171f;
	--ink-soft: #63636d;
	--line: rgba(10, 10, 15, .16);
	--line-dark: rgba(255, 255, 255, .18);
	--paper: #ffffff;
	--wash: #f2f2f0;
	--gold: #3355ff;       /* var name kept so shared components (buttons,
	                           badges' eyebrow text, links, etc.) that already
	                           read var(--gold) pick up the new bold accent
	                           automatically -- it's an electric blue here,
	                           not a gold, on the front page only. */
	--gold-light: #7089ff;
	--green: #12b76a;
	--pop: #ccff33;         /* secondary energetic accent -- used sparingly:
	                           the hero's "live" pulse dot, nothing else. */
	--display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
	--radius: 12px;
	--radius-sm: 8px;
	--shadow: 5px 5px 0 rgba(10, 10, 15, 1);
	--shadow-lg: 9px 9px 0 rgba(10, 10, 15, 1);
}
body.home h1, body.home h2, body.home h3, body.home h4 { font-weight: 700; }
body.home .nav-menu a { text-transform: uppercase; font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
body.home .brand__name { font-weight: 700; }

/* Bold buttons: squared-off corners, a solid ink border and a hard offset
   shadow that "presses in" on hover -- the classic confident bold-UI button
   treatment. Only applied to the two solid button styles (primary/dark);
   .btn--ghost stays a plain outline since it sits over a photo in the hero. */
body.home .btn { border-radius: 8px; font-weight: 700; }
body.home .btn--primary,
body.home .btn--dark {
	border: 2px solid var(--ink);
	transition: transform .15s ease, box-shadow .15s ease, background .2s, color .2s, border-color .2s;
}
body.home .btn--primary { box-shadow: 4px 4px 0 var(--ink); }
body.home .btn--dark { border-color: var(--gold); box-shadow: 4px 4px 0 var(--gold); }
body.home .btn--primary:hover,
body.home .btn--dark:hover { transform: translate(2px, 2px); }
body.home .btn--primary:hover { box-shadow: 2px 2px 0 var(--ink); }
body.home .btn--dark:hover { box-shadow: 2px 2px 0 var(--gold); }
body.home .btn--ghost { border-width: 2px; font-weight: 700; }
body.home .btn--ghost-dark { border-width: 2px; font-weight: 700; }

/* --- Hero: bold stat tiles -----------------------------------------------
   1.4.0: back to solid blocked tiles (like 1.2.0) rather than 1.3.0's plain
   text line, restyled in the new palette -- solid accent-blue blocks with a
   white 2px border instead of 1.2.0's translucent glass-panel effect.
   Numbers are real, computed in front-page.php from an actual post count
   and the site's fixed district/town lists -- never invented -- and count
   up from 0 on load via theme.js; with JS or reduced-motion off they simply
   render at their final value immediately. */
.hero-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.hero-stat {
	display: flex; flex-direction: column; gap: 2px; min-width: 128px;
	padding: 14px 20px; background: var(--gold); border: 2px solid #fff;
	border-radius: var(--radius-sm); color: #fff;
}
.hero-stat strong { font-family: var(--display); font-size: 1.7rem; font-weight: 700; line-height: 1; }
.hero-stat span { font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .92); }
.hero-stat--live {
	flex-direction: row; align-items: center; gap: 10px;
	background: transparent; border: 2px solid rgba(255, 255, 255, .5); padding: 12px 18px;
}
.hero-stat--live span { text-transform: none; letter-spacing: 0; font-size: .82rem; color: rgba(255, 255, 255, .95); }
.hero-stat__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pop); flex-shrink: 0; animation: heroStatPulse 2s infinite; }
@keyframes heroStatPulse {
	0% { box-shadow: 0 0 0 0 rgba(204, 255, 51, .6); }
	70% { box-shadow: 0 0 0 9px rgba(204, 255, 51, 0); }
	100% { box-shadow: 0 0 0 0 rgba(204, 255, 51, 0); }
}
@media (prefers-reduced-motion: reduce) { .hero-stat__dot { animation: none; } }
@media (max-width: 620px) {
	.hero-stat { min-width: 106px; padding: 12px 16px; }
	.hero-stat strong { font-size: 1.4rem; }
}

body.home .launch-search { border: 2px solid var(--ink); }

/* --- Section intro line (shared by any section header that wants one line
   of supporting copy under the eyebrow/title). --------------------------- */
.section__intro { margin: -18px 0 34px; max-width: 62ch; color: var(--ink-soft); }

body.home .section { padding: 100px 0; }
body.home .section--launches { padding-top: 92px; }
@media (max-width: 620px) { body.home .section { padding: 60px 0; } }

/* --- Currently marketing: bold feature card --------------------------------
   A large, thick-bordered, hard-shadowed feature card for the top launch
   (a completely different treatment from 1.3.0's border-free magazine
   story), followed by the same plain .launch-grid for the rest -- restyled
   below with the same bold border/shadow language, home-page only. */
.feature-launch {
	display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
	border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden;
	margin-bottom: 56px; box-shadow: var(--shadow-lg);
}
.feature-launch__media { display: block; aspect-ratio: 4 / 3; background: var(--wash); }
.feature-launch__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-launch__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #e6e6ea, #d5d5db); }
.feature-launch__body { padding: 40px; display: flex; flex-direction: column; }
.feature-launch__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.feature-launch__eyebrow .badge { border-radius: 6px; }
.feature-launch__eyebrow span:last-child { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.feature-launch__title { margin: 0 0 12px; font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.feature-launch__title a { text-decoration: none; }
.feature-launch__title a:hover { color: var(--gold); }
.feature-launch__tagline { margin: 0 0 22px; color: var(--ink-soft); font-size: 1rem; }
.feature-launch__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; list-style: none; margin: 0 0 26px; padding: 20px 0 0; border-top: 2px solid var(--ink); }
.feature-launch__facts span { display: block; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.feature-launch__facts strong { font-family: var(--display); font-size: 1.1rem; font-weight: 700; }
.feature-launch__link {
	display: inline-flex; align-items: center; gap: 8px; margin-top: auto; align-self: flex-start;
	text-decoration: none; font-weight: 700; font-size: .92rem; color: #fff;
	background: var(--ink); border: 2px solid var(--ink); padding: 12px 20px; border-radius: 999px;
	transition: background .2s, border-color .2s;
}
.feature-launch__link:hover { background: var(--gold); border-color: var(--gold); }
@media (max-width: 900px) {
	.feature-launch { grid-template-columns: 1fr; }
	.feature-launch__body { padding: 28px; }
}

/* Shared .launch-card (also used on the archive/taxonomy templates) gets the
   bold border/shadow treatment ONLY when rendered on the front page. */
body.home .launch-card { border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
body.home .launch-card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 rgba(10, 10, 15, 1); }
body.home .launch-card__district { color: var(--gold); }
body.home .launch-card__link { color: var(--ink); font-weight: 700; }
body.home .launch-card__link:hover { color: var(--gold); }

/* --- Free tools: bold card grid ---------------------------------------------
   1.3.0's numbered editorial index is replaced with a 2-up grid of thick-
   bordered, hard-shadowed cards -- a round ink number badge, label and
   description stacked above the tool's own completely untouched markup (no
   hiding, no tabs, so nothing that measures its own on-load size, chief
   among them the Property Finder's Leaflet map, ever renders into a
   zero-size box). */
.section--tools { background: var(--wash); }
.tool-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.tool-index__row {
	display: flex; flex-direction: column; gap: 18px;
	background: #fff; border: 2px solid var(--ink); border-radius: var(--radius);
	padding: 30px; box-shadow: var(--shadow);
}
.tool-index__label { display: flex; flex-direction: column; gap: 8px; }
.tool-index__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 999px; background: var(--ink); color: #fff;
	font-family: var(--display); font-weight: 700; font-size: .92rem;
}
.tool-index__label h3 { margin: 6px 0 0; font-size: 1.25rem; }
.tool-index__label p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.tool-index__content { min-width: 0; }
.tool-index__content > div:first-child,
.tool-index__content > section:first-child { margin: 0; }
@media (max-width: 900px) {
	.tool-index { grid-template-columns: minmax(0, 1fr); }
}

/* --- Launch calendar: bold timeline -----------------------------------------
   Each row is now its own thick-bordered, hard-shadowed card with a solid
   ink date block instead of 1.3.0's hairline-divided plain rows. */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.timeline__item {
	display: grid; grid-template-columns: 96px 1fr; gap: 0; align-items: stretch;
	border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden;
	background: #fff; box-shadow: var(--shadow);
}
.timeline__date { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--ink); color: #fff; padding: 16px 8px; text-align: center; }
.timeline__day { display: block; font-family: var(--display); font-size: 1.9rem; font-weight: 700; line-height: 1; }
.timeline__month { display: block; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); font-weight: 700; margin-top: 4px; }
.timeline__card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; padding: 20px 24px; }
.timeline__card h3 { margin: 0 0 2px; font-size: 1.12rem; }
.timeline__card h3 a { text-decoration: none; }
.timeline__card h3 a:hover { color: var(--gold); }
.timeline__card p { margin: 0; font-size: .86rem; color: var(--ink-soft); }
.timeline__countdown { font-size: .76rem; font-weight: 700; color: #fff; background: var(--gold); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 620px) {
	.timeline__item { grid-template-columns: 72px 1fr; }
	.timeline__day { font-size: 1.4rem; }
	.timeline__card { flex-direction: column; align-items: flex-start; padding: 16px 18px; }
}

/* --- Explore by area: bold chips -------------------------------------------
   Shared .explore-areas__chips (also used nowhere else currently, but kept
   scoped defensively) gets thicker borders and an ink-fill hover instead of
   the soft gold-outline hover used elsewhere. */
body.home .explore-areas__chips a { border: 2px solid var(--ink); border-radius: 8px; font-weight: 700; }
body.home .explore-areas__chips a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
body.home .explore-areas__more { font-weight: 700; }

/* --- About + enquiry -------------------------------------------------------
   Same dark ink section as before; the accent rule down the side of each
   "why buyers work with me" point is thicker, and the enquiry form card
   gets the same bold border/hard-shadow treatment as everything else. */
body.home .about-points li { border-left-width: 4px; }
body.home .section--about .sam-form { border: 2px solid #fff; box-shadow: 9px 9px 0 var(--gold); border-radius: var(--radius); }

/* --- Closing CTA band -------------------------------------------------------
   1.3.0's dark ink band is replaced with a full-bleed solid accent-blue
   block -- the boldest, highest-contrast moment on the page, deliberately
   saved for the last thing before the footer. The button colours are
   swapped here specifically: .btn--primary's default background is the same
   accent blue as this section, so on its own it would vanish against it. */
.section--closing-cta { background: var(--gold); border-top: 0; }
.closing-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.closing-cta__text { max-width: 56ch; }
.closing-cta__text .section__eyebrow { color: rgba(10, 10, 15, .68); }
.closing-cta__text .section__title { color: #fff; margin-bottom: 8px; }
.closing-cta__text p { margin: 0; color: rgba(255, 255, 255, .92); }
.closing-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }
.closing-cta__actions .btn--primary { background: #fff; color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.closing-cta__actions .btn--primary:hover { background: var(--ink); color: #fff; }
.closing-cta__actions .btn--ghost-dark { color: #fff; border-color: #fff; }

/* --- Property Smart Bot promo: full bold/modern restyle --------------------
   1.4.5 -- Wei Yun: "redesign the property smart bot advertisement to match
   the theme. Redesign it 100%." The [samtastic_bot_promo] shortcode's markup
   and CSS live in the samtastic-core plugin (public.css), styled with the
   navy-gradient / frosted-glass / gold-CTA look from before the 1.4.0 bold
   redesign -- it was never touched when the rest of the front page changed
   palette, so it kept its dark-navy gradient background, translucent glass
   panel, gold button and blurred glow blobs, clashing hard against the
   near-black / electric-blue / hard-shadow language everywhere else on the
   page. The clash is almost entirely hardcoded hex/rgba colours in the
   plugin's CSS (the navy gradient, the white glass tints), not the shared
   --sam-* variables, so redefining those variables alone would not have
   fixed it. Rather than edit the plugin's own stylesheet -- shared,
   plugin-owned code that could in principle be reused off the front page --
   every rule below overrides it from here by selector specificity
   (`body.home .bot-promo...` beats the plugin's plain single-class
   selectors regardless of stylesheet load order), the same scoping pattern
   used for the rest of this bold redesign. Structure/markup/copy/behaviour
   (the walkthrough, the demo chat, the share button, the feature list) are
   completely unchanged -- this is a visual restyle only. */
body.home .bot-promo {
	background: var(--ink);
	border: 2px solid var(--ink);
	box-shadow: var(--shadow-lg);
}
body.home .bot-promo::before,
body.home .bot-promo::after {
	/* The soft blurred glow blobs were part of the old glass-panel look --
	   they don't suit the hard-edged bold aesthetic, so they're dropped
	   here rather than just recoloured. */
	display: none;
}
body.home .bot-promo__panel {
	background: var(--ink-2);
	border: 2px solid rgba(255, 255, 255, .18);
	border-radius: calc(var(--radius) - 2px);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
}
body.home .bot-promo__eyebrow { color: var(--gold); }
body.home .bot-promo__username {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .32);
	border-radius: 6px;
}
body.home .bot-promo__title,
body.home .bot-promo__walkthrough-title {
	font-family: var(--display);
	font-weight: 700;
}
body.home .bot-promo__features li {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, .22);
	border-radius: 8px;
}
body.home .bot-promo__cta {
	background: var(--gold);
	color: #fff;
	border: 2px solid var(--gold);
	border-radius: 8px;
	font-weight: 700;
	box-shadow: 4px 4px 0 #fff;
	transition: transform .15s ease, box-shadow .15s ease, background .2s, color .2s, border-color .2s;
}
body.home .bot-promo__cta:hover {
	background: #fff;
	color: var(--ink);
	border-color: #fff;
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 #fff;
}
body.home .bot-promo__share {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, .4);
	border-radius: 8px;
	font-weight: 700;
}
body.home .bot-promo__share:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
body.home .bot-promo__walkthrough {
	background: rgba(255, 255, 255, .04);
	border: 2px solid rgba(255, 255, 255, .18);
	border-radius: var(--radius-sm);
}
body.home .bot-promo__step-icon {
	background: var(--gold);
	border-radius: 8px;
}
body.home .bot-promo__bubble--you {
	background: var(--gold);
	color: #fff;
	border-radius: 10px 10px 2px 10px;
}
body.home .bot-promo__bubble--bot {
	background: rgba(255, 255, 255, .06);
	border: 2px solid rgba(255, 255, 255, .18);
	color: #fff;
	border-radius: 10px 10px 10px 2px;
}
@media (max-width: 480px) {
	body.home .bot-promo { padding: 24px 16px; }
}
.closing-cta__actions .btn--ghost-dark:hover { background: #fff; color: var(--ink); }

/* --- Property Smart Bot: section title + "online" pulse -------------------
   1.4.6 -- Wei Yun: "give the property bot banner a title. And I need it to
   be animated." Bot promo was the only section on the page with no
   section-level eyebrow/title of its own (it went straight into the
   shortcode's dark panel) -- this gives it the same section__head pattern
   as Free tools/Currently marketing/etc, plus a small pulsing "Online now"
   badge. The dot reuses the existing heroStatPulse keyframes (defined above,
   under the hero stat tiles) rather than a new animation, so the motion
   language stays consistent site-wide. */
.bot-promo-head { align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.bot-promo-live {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: var(--ink);
	padding: 8px 14px; border: 2px solid var(--ink); border-radius: 999px;
	background: #fff;
}
.bot-promo-live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; animation: heroStatPulse 2s infinite; }
@media (prefers-reduced-motion: reduce) { .bot-promo-live__dot { animation: none; } }

/* A crisp, hard-edged pulse ring around the whole panel -- replaces the
   motion the old blurred glow blobs used to provide (removed above for
   clashing with the hard-edged look), without reintroducing any blur. */
body.home .bot-promo { animation: botPromoRing 3.2s ease-in-out infinite; }
@keyframes botPromoRing {
	0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(51, 85, 255, .45); }
	50% { box-shadow: var(--shadow-lg), 0 0 0 10px rgba(51, 85, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { body.home .bot-promo { animation: none; } }