/* =========================================================
   Embassy Astra — Theme Styles
   Design system: gold + cream, Cormorant Garamond + Jost
   ========================================================= */

:root {
	/* Park West palette: deep emerald with cool neutrals. Variable names
	   retain the original 'gold' naming for compatibility across the theme.
	   Recolour the site by editing these values only, never individual rules. */
	--gold: #146B52;          /* deep emerald (primary accent) */
	--accent-rgb: 20, 107, 82; /* --gold as an RGB triple for rgba() tints */
	--gold-light: #2E9E7C;    /* lighter emerald (hover / on dark) */
	--gold-text: #0E5240;     /* deep emerald for text/icons on light bg (AA 9.1:1) */
	--gold-pale: #EAF4F0;     /* pale mint tint for section backgrounds */
	--cream: #F7FAF8;         /* soft cool off-white */
	--charcoal: #16211D;      /* near-black with a green cast (headings/dark bg) */
	--slate: #414A46;         /* cool slate body text */
	--light-gray: #E4EAE7;    /* cool light border */
	--mid-gray: #626B67;      /* AA-contrast muted gray on light bg */
	--mid-gray-soft: #9CA8A3; /* soft tone for dark backgrounds only */
	--white: #ffffff;
	--radius: 2px;
	--ease: 0.35s ease;
	--container: 1200px;
	--font-display: 'Cormorant Garamond', Georgia, serif;
	--font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	color: var(--slate);
	background: var(--cream);
	line-height: 1.7;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	overflow-x: hidden;
}

/* Media never overflows its container (prevents horizontal scroll on mobile) */
img, video, svg { max-width: 100%; height: auto; }

/* Normalise form controls across browsers (iOS Safari, Firefox, Opera) */
input, textarea, select, button {
	font-family: inherit;
	font-size: 100%;
}
.runo-form input, .runo-form textarea, .runo-form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* ---------- Cross-browser fallbacks (Safari < 15, older Edge/IE) ---------- */
/* inset:0 fallback */
.hero-slides, .hero-slide, .hero-overlay, .fp-lock, .gallery-label,
.subhero-slides, .subhero-slide, .runo-modal, .runo-lightbox {
	top: 0; right: 0; bottom: 0; left: 0;
}
/* aspect-ratio fallback via padding-box technique for cards/images */
.op-img, .fp-card, .gallery-item, .amenity-card,
.about-img { max-width: 100%; }
@supports not (aspect-ratio: 1 / 1) {
	.about-img { height: 440px; }
	.op-img { height: 280px; }
	.fp-card, .gallery-item { height: 290px; }
}

h1, h2, h3, h4, h5 {
	font-family: var(--font-display);
	font-weight: 500;
	color: var(--charcoal);
	line-height: 1.2;
	margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.5rem; }

a { color: var(--gold-text); text-decoration: none; transition: color var(--ease); }
a:hover { color: var(--gold-light); }

img { max-width: 100%; height: auto; display: block; }

p { margin: 0 0 1rem; }

.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

section { padding: 90px 0; }

.overline {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--gold-text);
	margin-bottom: 14px;
}

.section-title { margin-bottom: 18px; }
.section-intro { max-width: 760px; margin-bottom: 40px; color: var(--slate); }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.9rem;
	letter-spacing: 0.5px;
	padding: 13px 26px;
	border-radius: var(--radius);
	border: 1px solid transparent;
	cursor: pointer;
	transition: all var(--ease);
	text-align: center;
	line-height: 1;
}
.btn-gold { background: var(--gold); color: #fff; border-color: var(--gold); font-weight: 600; }
.btn-gold:hover { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }
.btn-dark { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.btn-dark:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-ghost-gold { background: transparent; color: var(--gold-text); border-color: var(--gold); }
.btn-ghost-gold:hover { background: var(--gold); color: #fff; }
.btn-ghost-green { background: transparent; color: #25932b; border-color: #25932b; }
.btn-ghost-green:hover { background: #25932b; color: #fff; }
.btn-whatsapp { background: #25932b; color: #fff; border-color: #25932b; }
.btn-whatsapp:hover { background: #1d7322; color: #fff; }
.btn-ghost { background: transparent; color: var(--charcoal); border-color: #cdc8bd; }
.btn-ghost:hover { border-color: var(--charcoal); }
.btn-mini { padding: 8px 16px; font-size: 0.8rem; }

/* ---------- Header ---------- */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 200;
	background: rgba(253, 250, 245, 0.96);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(var(--accent-rgb), 0.18);
	transition: background var(--ease);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; flex-wrap: nowrap; position: relative; }
.brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }

/* Text brand (replaces logo image) — compact, up to two tight rows */
.brand-text {
	display: inline-flex;
	flex-direction: column;
	line-height: 1.02;
	font-family: var(--font-display);
	color: var(--charcoal);
	letter-spacing: 0.3px;
}
.brand-text .brand-line1 { font-size: 1.42rem; font-weight: 700; }
.site-header .brand-text .brand-line2 { font-size: 1.42rem; font-weight: 400; color: var(--gold-text); }
.brand-text .brand-line2 { font-size: 1.42rem; font-weight: 400; }
.brand-text-two .brand-line1,
.brand-text-two .brand-line2 { font-size: 1.14rem; }
.site-header .brand-text-two .brand-line1 { color: var(--charcoal); }
.site-header .brand-text-two .brand-line2 { color: var(--gold-text); }
/* Single-line brand: gold accent handled inline by line1 only, keep charcoal */

.footer-brand-text {
	display: inline-flex;
	flex-direction: column;
	line-height: 1.05;
	font-family: var(--font-display);
	color: #fff;
	letter-spacing: 0.3px;
	margin-bottom: 16px;
	text-decoration: none;
}
.footer-brand-text .brand-line1 { font-size: 1.5rem; font-weight: 700; color: #fff; }
.footer-brand-text .brand-line2 { font-size: 1.5rem; font-weight: 400; color: var(--gold-light) !important; }
.footer-brand-text.brand-text-two .brand-line1,
.footer-brand-text.brand-text-two .brand-line2 { font-size: 1.2rem; }

.main-nav .nav-list { display: flex; align-items: center; flex-wrap: nowrap; gap: 28px; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.main-nav a { color: var(--charcoal); font-size: 0.9rem; font-weight: 400; letter-spacing: 0.4px; }
.main-nav a:hover { color: var(--gold); }
.caret { font-size: 0.7rem; color: var(--gold-text); }

.has-dropdown { position: relative; }
.dropdown {
	position: absolute;
	top: calc(100% + 14px);
	left: 0;
	right: auto;
	width: 760px;
	max-width: calc(100vw - 32px);
	background: #fff;
	border: 1px solid var(--light-gray);
	box-shadow: 0 18px 50px rgba(0,0,0,0.12);
	list-style: none;
	margin: 0; padding: 12px;
	opacity: 0; visibility: hidden;
	-webkit-transform: translateY(8px);
	transform: translateY(8px);
	-webkit-transition: opacity var(--ease), visibility var(--ease), -webkit-transform var(--ease);
	transition: opacity var(--ease), visibility var(--ease), transform var(--ease);
	border-radius: var(--radius);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px 6px;
	z-index: 210;
	box-sizing: border-box;
}
.dropdown a { min-width: 0; }
/* Names must wrap, not clip — nowrap+ellipsis truncates every entry to the shared brand prefix. */
.dropdown a > * { overflow: visible; text-overflow: clip; white-space: normal; }
.has-dropdown:hover .dropdown,
.has-dropdown.open .dropdown { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); }
.dropdown li { margin: 0; }
.dropdown a { display: block; padding: 8px 12px; border-radius: var(--radius); line-height: 1.25; }
.dropdown a:hover { background: var(--gold-pale); }
.dropdown a { padding: 9px 12px; }
.dd-brand {
	display: block;
	font-size: 0.63rem;
	font-weight: 500;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--mid-gray);
	margin-bottom: 1px;
}
.dd-name {
	display: block;
	font-weight: 600;
	font-size: 0.94rem;
	line-height: 1.25;
	color: var(--charcoal);
}
.dd-city { display: block; font-size: 0.72rem; color: var(--mid-gray); letter-spacing: 0.5px; }

.header-actions { display: flex; align-items: center; gap: 12px; }
.header-phone { white-space: nowrap; }

.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.hamburger span { width: 24px; height: 2px; background: var(--charcoal); transition: var(--ease); }

.mobile-nav {
	display: none;
	position: fixed;
	top: 80px; left: 0; right: 0;
	background: var(--charcoal);
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	transform: translateY(-120%);
	transition: transform var(--ease);
	z-index: 199;
}
.mobile-nav.open { transform: translateY(0); }
.mobile-nav ul { list-style: none; margin: 0; padding: 16px 0; }
.mobile-nav a { display: block; padding: 12px 28px; color: #f2efe9; font-size: 1rem; }
.mobile-nav a small { color: var(--gold-light); margin-left: 6px; font-size: 0.75rem; }
.mob-explore-head { padding: 12px 28px 6px; color: var(--gold); text-transform: uppercase; letter-spacing: 2px; font-size: 0.72rem; }
.mob-divider { height: 1px; background: rgba(255,255,255,0.12); margin: 10px 28px; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; display: flex; align-items: flex-end; padding-bottom: 9vh; }
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 0; transition: opacity 1.2s ease;
}
.hero-slide.active { opacity: 1; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20,20,20,0.15) 0%, rgba(20,20,20,0.1) 45%, rgba(20,20,20,0.45) 70%, rgba(20,20,20,0.82) 100%); }
.hero-content { position: relative; z-index: 3; color: #fff; max-width: 720px; }
.hero-text-slide { display: none; }
.hero-text-slide.active { display: block; -webkit-animation: heroFade 0.8s ease; animation: heroFade 0.8s ease; }
@-webkit-keyframes heroFade { from { opacity: 0; -webkit-transform: translateY(12px); } to { opacity: 1; -webkit-transform: translateY(0); } }
@keyframes heroFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.hero-tag {
	display: inline-block; font-size: 0.8rem; letter-spacing: 2.5px; text-transform: uppercase;
	color: var(--gold-light); border: 1px solid rgba(var(--accent-rgb), 0.5); padding: 7px 16px;
	border-radius: var(--radius); margin-bottom: 22px;
}
/* Hero titles are now full descriptive headlines of up to ~85 characters, so
   the measure is wider and the size capped lower than a short brand title. */
.hero-title { color: #fff; font-size: clamp(1.7rem, 3.0vw, 2.4rem); font-weight: 400; letter-spacing: 0.3px; line-height: 1.18; margin-bottom: 14px; max-width: 34ch; }
.hero-subtitle { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: var(--gold-pale); font-weight: 400; margin-bottom: 20px; }
.hero-desc { font-size: 1.06rem; color: rgba(255,255,255,0.9); max-width: 600px; margin-bottom: 32px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-dots { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 4; }
.hero-dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid #fff; background: transparent; cursor: pointer; transition: var(--ease); padding: 0; }
.hero-dot.active { background: var(--gold); border-color: var(--gold); }
.scroll-indicator { position: absolute; bottom: 34px; right: 40px; z-index: 4; color: rgba(255,255,255,0.7); font-size: 0.75rem; letter-spacing: 2px; writing-mode: vertical-rl; text-transform: uppercase; }

/* ---------- Stats bar ---------- */
.stats-bar { background: var(--charcoal); padding: 56px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.stat { text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,0.1); padding: 0 8px; }
.stat:last-child { border-right: none; }
.stat-value { font-family: var(--font-display); font-size: 2rem; color: var(--gold-light); line-height: 1.1; }
.stat-label { font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mid-gray); margin-top: 6px; }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 0.85fr 1fr; gap: 60px; align-items: center; }
.about-media { position: relative; }
.about-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: center; display: block; position: relative; z-index: 2; border-radius: var(--radius); }
.about-media::before { content: ''; position: absolute; top: 24px; left: 24px; right: -24px; bottom: -24px; border: 1px solid var(--gold); z-index: 1; border-radius: var(--radius); }
.about-loc { position: absolute; bottom: 20px; left: 20px; z-index: 3; background: var(--charcoal); color: #fff; padding: 10px 18px; font-size: 0.82rem; letter-spacing: 1px; }
.about-loc strong { color: var(--gold-light); }
.fact-boxes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 28px 0; }
.fact-box { border-left: 2px solid var(--gold); padding: 6px 0 6px 16px; }
.fact-box strong { display: block; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; color: var(--charcoal); margin-bottom: 2px; }
.fact-box span { display: block; font-size: 0.8rem; color: var(--mid-gray); letter-spacing: 0.5px; text-transform: uppercase; }

/* ---------- Highlights ---------- */
.highlights { background: var(--charcoal); color: #fff; }
.highlights .section-title, .highlights h2 { color: #fff; }
.highlights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 50px; margin-top: 30px; }
.highlight-row { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.hl-label { color: var(--mid-gray); font-size: 0.9rem; letter-spacing: 0.5px; }
.hl-val { color: #fff; font-weight: 400; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.hl-label { flex: 0 0 auto; }

/* ---------- Price ---------- */
.price-head { margin-bottom: 14px; }
.price-table { width: 100%; border-collapse: collapse; margin-top: 24px; }
.price-table th, .price-table td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--light-gray); }
.price-table thead th { background: var(--charcoal); color: #fff; font-family: var(--font-body); font-weight: 500; font-size: 0.82rem; letter-spacing: 1px; text-transform: uppercase; }
.price-table tbody tr:hover { background: var(--gold-pale); }
.price-table .price-row td { font-size: 0.98rem; }
.price-note { font-size: 0.85rem; color: var(--mid-gray); margin-top: 16px; font-style: italic; }
.section-cta { margin-top: 28px; }
.section-cta .btn { font-weight: 500; }

/* ---------- Payment ---------- */
.payment-section { background: var(--light-gray); }
.payment-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 36px 0 30px; }
.pay-card { background: #fff; padding: 38px 28px; text-align: center; border-radius: var(--radius); border-top: 3px solid var(--gold); }
.pay-pct { font-family: var(--font-display); font-size: 3rem; color: var(--gold); line-height: 1; }
.pay-card h4 { margin: 14px 0 8px; }
.bank-banner { background: #eaf6ea; border: 1px solid #bfe3bf; color: #1d7322; text-align: center; padding: 16px; border-radius: var(--radius); font-weight: 500; letter-spacing: 0.5px; }

/* ---------- Floor plans ---------- */
.feature-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 36px; }
.pill { background: var(--gold-pale); color: var(--gold-text); border: 1px solid rgba(var(--accent-rgb), 0.3); padding: 8px 16px; border-radius: 40px; font-size: 0.82rem; letter-spacing: 0.5px; }
.fp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fp-card { position: relative; cursor: pointer; border-radius: var(--radius); overflow: hidden; background: var(--light-gray); aspect-ratio: 4/3.4; }
.fp-img { width: 100%; height: 100%; object-fit: cover; filter: blur(9px); transform: scale(1.06); transition: var(--ease); }
.fp-card.unlocked .fp-img { filter: none; transform: none; }
.fp-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(20,20,20,0.55); color: #fff; transition: var(--ease); }
.fp-card.unlocked .fp-lock { opacity: 0; visibility: hidden; }
.lock-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.fp-unlock { font-size: 0.82rem; letter-spacing: 1px; text-transform: uppercase; }
.fp-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 16px; background: linear-gradient(transparent, rgba(20,20,20,0.85)); color: #fff; font-family: var(--font-display); font-size: 1.1rem; z-index: 2; }

/* ---------- Gallery ---------- */
.gallery { background: var(--charcoal); }
.gallery h2, .gallery .section-title { color: #fff; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gallery-item { position: relative; overflow: hidden; cursor: pointer; aspect-ratio: 4/3.4; border-radius: var(--radius); padding: 0; border: none; background: var(--charcoal); display: block; width: 100%; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-label { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 16px; background: linear-gradient(transparent 55%, rgba(20,20,20,0.8)); color: #fff; opacity: 0; transition: var(--ease); font-family: var(--font-display); font-size: 1.15rem; pointer-events: none; }
.gallery-item:hover .gallery-label { opacity: 1; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 860px; margin: 30px auto 0; }
.faq-item { border-bottom: 1px solid var(--light-gray); }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; background: none; border: none; text-align: left; padding: 22px 0; cursor: pointer; font-family: var(--font-display); font-size: 1.2rem; color: var(--charcoal); }
.faq-toggle { color: var(--gold-text); font-size: 1.4rem; transition: var(--ease); flex-shrink: 0; }
.faq-item.open .faq-toggle { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--ease); }
.faq-a p { padding: 0 0 22px; color: var(--slate); margin: 0; }

/* ---------- Location ---------- */
.location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; margin-top: 30px; }
.location-map { width: 100%; border-radius: var(--radius); border: 1px solid var(--light-gray); overflow: hidden; }
.location-map img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
.location-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.loc-cat h4 { color: var(--gold-text); border-bottom: 1px solid var(--light-gray); padding-bottom: 8px; margin-bottom: 12px; }
.loc-cat ul { list-style: none; margin: 0; padding: 0; }
.loc-cat li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 0.9rem; border-bottom: 1px dashed var(--light-gray); }
.loc-cat li span { color: var(--mid-gray); white-space: nowrap; }

/* ---------- Amenities ---------- */
.amenities { background: var(--light-gray); }
.amenity-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 30px 0 40px; }
.amenity-tab { background: #fff; border: 1px solid #ddd9d0; padding: 11px 26px; border-radius: var(--radius); cursor: pointer; font-family: var(--font-body); font-size: 0.9rem; color: var(--slate); transition: var(--ease); }
.amenity-tab.active { background: var(--gold); border-color: var(--gold); color: var(--charcoal); font-weight: 600; }
.amenity-panel { display: none; }
.amenity-panel.active { display: block; }
.amenity-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.amenity-card { background: #fff; padding: 26px 18px; text-align: center; border-radius: var(--radius); transition: var(--ease); border: 1px solid transparent; }
.amenity-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.amenity-card .icon { font-size: 1.8rem; margin-bottom: 10px; }
.amenity-card span { font-size: 0.92rem; color: var(--charcoal); }

/* ---------- Other projects ---------- */
.other-projects { background: var(--cream); }
.op-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 36px; }
.op-card { background: #fff; border: 1px solid var(--light-gray); border-radius: var(--radius); overflow: hidden; transition: var(--ease); display: flex; flex-direction: column; }
.op-card:hover { box-shadow: 0 18px 44px rgba(0,0,0,0.1); transform: translateY(-5px); }
.op-img-link { position: relative; display: block; overflow: hidden; }
.op-img { width: 100%; aspect-ratio: 4/3.2; object-fit: cover; display: block; transition: transform 0.5s ease; }
.op-card:hover .op-img { transform: scale(1.05); }
.op-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.op-type { font-size: 0.74rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-text); margin: 0 0 4px; }
.op-title { font-size: 1.4rem; margin: 0 0 6px; }
.op-title a { color: var(--charcoal); }
.op-title a:hover { color: var(--gold-text); }
.op-city { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(20,20,20,0.78); color: #fff; font-size: 0.74rem; letter-spacing: 0.5px; padding: 4px 12px; border-radius: var(--radius); }
.op-price { font-family: var(--font-display); font-size: 1.2rem; color: var(--charcoal); margin: 0 0 16px; }
.op-link { margin-top: auto; align-self: flex-start; font-weight: 500; color: var(--gold-text); }
.op-link:hover { color: var(--charcoal); }

/* ---------- Contact ---------- */
.contact-section { background: var(--charcoal); color: #fff; }
.contact-section h2, .contact-section .section-title { color: #fff; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.contact-info p { color: rgba(255,255,255,0.82); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.contact-form-card { background: #fff; padding: 28px 26px; border-radius: var(--radius); max-width: 460px; width: 100%; }
.contact-form-card h3 { color: var(--charcoal); margin-bottom: 16px; }
.contact-disclaimer { margin-top: 28px; font-size: 0.78rem; color: var(--mid-gray); }

/* ---------- Forms ---------- */
.runo-form .form-field { margin-bottom: 12px; }
.runo-form input { width: 100%; padding: 11px 14px; border: 1px solid #d8d3c8; border-radius: var(--radius); font-family: var(--font-body); font-size: 15px; background: var(--cream); transition: var(--ease); }
.runo-form input:focus { outline: none; border-color: var(--gold); background: #fff; }
.runo-hp { position: absolute !important; left: -9999px !important; }
.form-submit { width: 100%; }
.form-consent { margin: 2px 0 14px; }
.form-consent label { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 0.82rem; line-height: 1.45; color: var(--slate); }
/* The generic .runo-form input rule also matches this checkbox, so every
   inherited property is reset explicitly and the control is drawn here. */
.form-consent input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	min-width: 18px;
	padding: 0;
	margin: 2px 0 0;
	border: 1.5px solid #c4cec9;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	position: relative;
	transition: background-color .15s ease, border-color .15s ease;
}
.form-consent input[type="checkbox"]:hover { border-color: var(--gold); }
.form-consent input[type="checkbox"]:checked { background: var(--gold); border-color: var(--gold); }
.form-consent input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.form-consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.form-consent label { align-items: center; }
.form-consent a { color: var(--gold-text); text-decoration: underline; }
.form-message { margin-top: 14px; font-size: 0.9rem; padding: 10px 14px; border-radius: var(--radius); display: none; }
.form-message.show { display: block; }
.form-message.success { background: #eaf6ea; color: #1d7322; border: 1px solid #bfe3bf; }
.form-message.error { background: #fbeaea; color: #b32d2e; border: 1px solid #e6bcbc; }

/* ---------- Sub-page hero ---------- */
.subhero { position: relative; height: 62vh; height: 62svh; min-height: 360px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; text-align: center; padding-bottom: 7vh; }
.subhero-slides { position: absolute; inset: 0; }
.subhero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease; }
.subhero-slide.active { opacity: 1; }
.subhero-content { position: relative; z-index: 3; color: #fff; }
.subhero-content h1 { color: #fff; }
.subhero-tagline { color: var(--gold-pale); font-size: 1.05rem; margin-top: 8px; max-width: 640px; margin-left: auto; margin-right: auto; }
.subhero-dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 4; }
.subhero-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; background: transparent; cursor: pointer; }
.subhero-dot.active { background: var(--gold); border-color: var(--gold); }
.breadcrumb-bar { background: var(--light-gray); padding: 14px 0; font-size: 0.84rem; }
.breadcrumb-bar a { color: var(--slate); transition: color var(--ease); }
.breadcrumb-bar a:hover { color: var(--gold-text); }
.breadcrumb-bar span { color: var(--mid-gray); margin: 0 8px; }
.breadcrumb-bar span:last-child { color: var(--charcoal); font-weight: 500; margin-left: 8px; }

/* ---------- About page ---------- */
.about-stats { background: var(--charcoal); padding: 50px 0; }
.about-page { padding: 80px 0; }
.about-page p { max-width: 820px; }
.checklist { list-style: none; margin: 18px 0 0; padding: 0; max-width: 720px; }
.checklist li { position: relative; padding: 10px 0 10px 32px; border-bottom: 1px solid var(--light-gray); color: var(--slate); }
.checklist li::before { content: "\2713"; position: absolute; left: 0; top: 10px; width: 20px; height: 20px; background: var(--gold); color: var(--charcoal); border-radius: 50%; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.about-facts { background: var(--charcoal); padding: 80px 0; }
.about-facts .section-title, .about-facts .hl-val { color: #fff; }
.about-facts .highlights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 50px; margin-top: 24px; }
.why-grid-section { padding: 80px 0; background: var(--cream); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }
.why-card { background: #fff; border: 1px solid var(--light-gray); border-top: 3px solid var(--gold); border-radius: var(--radius); padding: 28px 24px; }
.why-card h4 { color: var(--charcoal); margin-bottom: 8px; }
.why-card p { color: var(--slate); margin: 0; font-size: 0.95rem; }
.about-cta { background: var(--charcoal); padding: 60px 0; text-align: center; }
.about-cta .section-title { color: #fff; }
.about-cta .contact-actions { justify-content: center; }

/* ---------- Legal page ---------- */
.legal-page { padding: 70px 0; }
.legal-content { max-width: 860px; }
.legal-content h2 { font-size: 1.5rem; margin: 32px 0 10px; color: var(--charcoal); }
.legal-content p { color: var(--slate); margin-bottom: 14px; }
.legal-content ul { color: var(--slate); padding-left: 20px; margin-bottom: 14px; }
.legal-content li { margin-bottom: 8px; }
.legal-updated { margin-top: 30px; color: var(--mid-gray); font-size: 0.85rem; }

/* ---------- Page links (sub-page quick nav) ---------- */
.page-links { background: var(--gold-pale); padding: 50px 0; }
.page-links-title { text-align: center; margin-bottom: 24px; }
.page-links-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.page-link { display: inline-block; background: #fff; border: 1px solid rgba(var(--accent-rgb), 0.35); color: var(--charcoal); padding: 11px 24px; border-radius: var(--radius); font-size: 0.92rem; font-weight: 500; transition: all var(--ease); }
.page-link:hover { background: var(--gold); border-color: var(--gold); color: var(--charcoal); }

/* ---------- Contact strip ---------- */
.contact-strip { background: var(--gold-pale); }
.contact-strip-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.contact-strip-form { background: #fff; padding: 30px; border-radius: var(--radius); }

/* ---------- Footer ---------- */
.site-footer { background: #141414; color: #cfc9bd; padding: 70px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; }
.footer-brand p { font-size: 0.9rem; color: #a8a294; }
/* International Properties spans the full grid width and flows into two
   columns, so the 34 partner links read as a block rather than one long list.
   Collapses to a single column below 480px, where two columns would wrap
   the longer project names onto three lines each. */
.footer-col-intl { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 26px; margin-top: 4px; }
.footer-intl-list { -webkit-columns: 2 240px; -moz-columns: 2 240px; columns: 2 240px; column-gap: 40px; }
.footer-intl-list li { -webkit-column-break-inside: avoid; break-inside: avoid; }
@media (max-width: 480px) { .footer-intl-list { -webkit-columns: 1; -moz-columns: 1; columns: 1; column-gap: 0; } .footer-col-intl { padding-top: 20px; } }
.footer-rera { color: var(--gold-light); font-size: 0.82rem; overflow-wrap: anywhere; }
.footer-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.footer-col h4 { color: #fff; font-size: 1.15rem; margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: #b3ada0; font-size: 0.9rem; }
.footer-col a:hover { color: var(--gold-light); }
.footer-rera-box { overflow-wrap: anywhere; margin-top: 16px; padding: 10px 14px; background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.25); border-radius: var(--radius); font-size: 0.78rem; color: var(--gold-light); }
.footer-legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	padding: 18px 24px 4px;
	border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-legal-links a { color: #b3ada0; font-size: 0.82rem; }
.footer-legal-links a:hover { color: var(--gold-light); }
.footer-disclaimer { padding: 26px 24px; border-top: 1px solid rgba(255,255,255,0.08); }
.footer-disclaimer p { font-size: 0.76rem; line-height: 1.8; color: #8d887c; max-width: 100%; margin: 0; }
.footer-bottom { background: #0d0d0d; padding: 18px 0; }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 0.8rem; color: #8d887c; }
.footer-bottom-links a { color: #8d887c; margin-left: 18px; }
.footer-bottom-links a:hover { color: var(--gold-light); }

/* ---------- WhatsApp float ---------- */
.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 150; width: 56px; height: 56px; border-radius: 50%; background: #25932b; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(37,147,43,0.4); transition: var(--ease); }
.wa-float:hover { background: #1d7322; color: #fff; transform: scale(1.08); }

/* ---------- Mobile bottom bar ---------- */
.mobile-bar { display: none; }
/* Full styling lives in the MOBILE ACTION BAR block at the end of this file. */

/* ---------- Modals ---------- */
.runo-modal { position: fixed; inset: 0; z-index: 300; background: rgba(20,20,20,0.7); display: none; align-items: center; justify-content: center; padding: 20px; }
.runo-modal.open { display: flex; }
.runo-modal-inner { background: var(--cream); border-radius: var(--radius); padding: 40px 36px; max-width: 440px; width: 100%; position: relative; max-height: 92vh; overflow-y: auto; }
.runo-modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 1.7rem; line-height: 1; color: var(--mid-gray); cursor: pointer; }
.runo-modal-close:hover { color: var(--charcoal); }
.modal-title { margin-bottom: 6px; }
.modal-sub { font-size: 0.88rem; color: var(--slate); margin-bottom: 20px; }

/* ---------- Lightbox ---------- */
.runo-lightbox { position: fixed; inset: 0; z-index: 320; background: rgba(10,10,10,0.94); display: none; align-items: center; justify-content: center; }
.runo-lightbox.open { display: flex; }
.lb-img { max-width: 88vw; max-height: 84vh; border-radius: var(--radius); }
.lb-close { position: absolute; top: 22px; right: 28px; background: none; border: none; color: #fff; font-size: 2.4rem; cursor: pointer; line-height: 1; }
.lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); color: #fff; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; font-size: 1.3rem; transition: var(--ease); }
.lb-arrow:hover { background: var(--gold); border-color: var(--gold); }
.lb-prev { left: 26px; }
.lb-next { right: 26px; }
.lb-counter { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 0.9rem; letter-spacing: 1px; }


/* ---------- Toast ---------- */
.runo-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--charcoal); color: #fff; padding: 14px 26px; border-radius: var(--radius); z-index: 340; opacity: 0; visibility: hidden; transition: var(--ease); font-size: 0.9rem; border-left: 3px solid var(--gold); }
.runo-toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* page padding offset for fixed header */
.front-page-main, .project-main, .subpage-main { padding-top: 80px; }

/* anchor scroll offset so fixed header doesn't cover section headings */
section[id] { scroll-margin-top: 90px; }

/* =========================================================
   Responsive
   ========================================================= */
/* Tablet & below — switch to hamburger menu (same behaviour as mobile) */
@media (max-width: 1024px) {
	.about-grid, .location-grid, .contact-grid, .contact-strip-inner { grid-template-columns: 1fr; gap: 36px; }
	.stats-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 12px; }
	.stat:nth-child(3) { border-right: none; }
	.amenity-cards { grid-template-columns: repeat(3, 1fr); }
	.location-cats { grid-template-columns: 1fr 1fr; }
	.highlights-grid { grid-template-columns: 1fr; gap: 0; }

	/* Hamburger navigation on tablet */
	.main-nav { display: none; }
	.hamburger { display: -webkit-box; display: -ms-flexbox; display: flex; }
	.mobile-nav { display: block; }
	.header-phone { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }

	/* Footer: 4 columns are too tight on portrait tablets — go to 2. */
	.footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
	.footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
	section { padding: 60px 0; }
	.header-phone { display: none; }
	.header-actions .btn-gold { display: none; }
	.wa-float { bottom: 76px; }
	.fp-grid, .gallery-grid, .op-grid, .payment-steps { grid-template-columns: 1fr; }
	.fp-grid, .gallery-grid { grid-template-columns: 1fr 1fr; }
	.amenity-cards { grid-template-columns: 1fr 1fr; }
	.fact-boxes { grid-template-columns: 1fr 1fr; }
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
	.footer-legal-links { justify-content: center; text-align: center; }
	.hero { min-height: 560px; }
	.runo-toast { bottom: 80px; }

	/* Contact form comfortable on tablet/mobile */
	.contact-form-card { padding: 28px 22px; }
	.contact-strip-form { padding: 24px 20px; }

	/* Stack price table into cards on mobile */
	.price-table, .price-table thead, .price-table tbody, .price-table tr, .price-table th, .price-table td { display: block; width: 100%; }
	.price-table thead { display: none; }
	.price-table tr.price-row { margin-bottom: 16px; border: 1px solid var(--light-gray); border-radius: var(--radius); overflow: hidden; }
	.price-table td { border-bottom: 1px solid var(--light-gray); display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px; }
	.price-table td:last-child { border-bottom: none; }
	.price-table td::before { content: attr(data-label); font-weight: 600; color: var(--charcoal); font-size: 0.8rem; letter-spacing: 0.5px; }
}

@media (max-width: 480px) {
	.container { padding: 0 18px; }
	.brand-text .brand-line1, .brand-text .brand-line2 { font-size: 1.18rem; }
	.brand-text-two .brand-line1, .brand-text-two .brand-line2 { font-size: 0.98rem; }
	.stats-grid { grid-template-columns: 1fr 1fr; }
	.stat { border-right: none; }
	.fp-grid, .gallery-grid, .amenity-cards, .location-cats, .fact-boxes { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
	.footer-brand { grid-column: 1 / -1; }
	.hero-cta { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
	.hero-cta .btn { width: 100%; }
	.runo-modal-inner { padding: 32px 22px; }
	.amenity-tabs { gap: 6px; }
	.amenity-tab { padding: 9px 16px; font-size: 0.82rem; }
}

/* =========================================================
   Page intro paragraph (sub-page content under title)
   ========================================================= */
.page-intro { padding: 48px 0 8px; }
.page-intro p { max-width: 880px; margin: 0 auto; color: var(--slate); font-size: 1.04rem; line-height: 1.8; text-align: center; }
.page-intro a { color: var(--gold-text); font-weight: 500; }
.page-intro a:hover { color: var(--gold-light); }

/* Contact page action points */
.contact-points { list-style: none; margin: 18px 0 14px; padding: 0; }
.contact-points li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--slate); font-size: 1.02rem; }
.contact-points li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 700; }

/* Dedicated contact sub-page layout */
.contact-page { padding: 72px 0; }
.contact-page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact-lines { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 18px; }
.contact-lines a { color: var(--charcoal); }
.contact-page-form { background: #fff; border: 1px solid var(--light-gray); padding: 28px 26px; border-radius: var(--radius); max-width: 460px; width: 100%; box-shadow: 0 12px 36px rgba(28,28,28,0.06); }
.contact-page-form h3 { color: var(--charcoal); margin-bottom: 16px; }

@media (max-width: 860px) {
	.contact-page-grid { grid-template-columns: 1fr; gap: 34px; }
	.contact-page-form { max-width: 100%; }
}

@media ( max-width: 640px ) {
	.page-intro { padding: 32px 0 4px; }
	.page-intro p { font-size: 0.98rem; text-align: left; }
}

/* =========================================================
   Location intro paragraphs (per-project, under location title)
   ========================================================= */
.location-intro { max-width: 900px; margin: 0 0 34px; }
.location-intro p { color: var(--slate); font-size: 1.02rem; line-height: 1.8; margin-bottom: 16px; }
.location-intro p:last-child { margin-bottom: 0; }

/* Outbound / contextual links inside FAQ answers */
.faq-a a { color: var(--gold-text); font-weight: 500; }
.faq-a a:hover { color: var(--gold-light); }

@media ( max-width: 640px ) {
	.location-intro p { font-size: 0.96rem; }
}

/* =========================================================================
   PROJECT PHASES & CLUSTERS (optional, currently unused)
   ========================================================================= */
.project-phases { background: var(--cream); }
.phase-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-top: 10px;
}
.phase-card {
	background: #fff;
	border: 1px solid var(--gold-pale);
	border-top: 3px solid var(--gold);
	border-radius: var(--radius);
	padding: 30px 26px;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--ease), transform var(--ease);
}
.phase-card:hover { box-shadow: 0 14px 40px rgba(28,28,28,0.10); transform: translateY(-3px); }
.phase-card.phase-current { background: var(--gold-pale); border-top-color: var(--gold-text); }
.phase-head { margin-bottom: 16px; }
.phase-name { margin: 0 0 4px; color: var(--charcoal); }
.phase-config { font-size: 13px; color: var(--gold-text); font-weight: 600; }
.phase-meta { list-style: none; margin: 0 0 18px; padding: 0; }
.phase-meta li { padding: 6px 0; border-bottom: 1px solid rgba(var(--accent-rgb), 0.14); font-size: 14px; color: var(--slate); }
.phase-meta li:last-child { border-bottom: none; }
.phase-meta strong { color: var(--charcoal); font-weight: 600; }
.phase-clusters { margin-bottom: 20px; }
.phase-clusters-label {
	display: block;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--gold-text);
	margin-bottom: 10px;
}
.cluster-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cluster-chip {
	display: inline-flex;
	flex-direction: column;
	background: var(--cream);
	border: 1px solid var(--gold-pale);
	border-radius: var(--radius);
	padding: 6px 10px;
	line-height: 1.3;
}
.phase-current .cluster-chip { background: #fff; }
.chip-name { font-size: 13px; font-weight: 600; color: var(--charcoal); }
.chip-status { font-size: 11px; color: var(--gold-text); }
.phase-cta { margin-top: auto; align-self: flex-start; }
.phase-note {
	margin-top: 30px;
	padding: 22px 26px;
	background: #fff;
	border-left: 3px solid var(--gold);
	border-radius: var(--radius);
}
.phase-note p { margin: 0; color: var(--slate); font-size: 14.5px; }

@media (max-width: 900px) {
	.phase-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   OTHER PROJECTS — SLIDER + CLUSTER BUTTONS
   ========================================================================= */
.op-slider { position: relative; margin-top: 36px; }
.op-track {
	display: flex;
	gap: 26px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 4px 2px 14px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.op-track::-webkit-scrollbar { display: none; }
.op-slider .op-card {
	flex: 0 0 clamp(280px, 31%, 360px);
	scroll-snap-align: start;
}
.op-arrow {
	position: absolute;
	top: 38%;
	transform: translateY(-50%);
	z-index: 5;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--gold);
	background: #fff;
	color: var(--gold-text);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(28,28,28,0.14);
	transition: background var(--ease), color var(--ease), opacity var(--ease);
}
.op-arrow:hover { background: var(--gold); color: #fff; }
.op-arrow:disabled { opacity: 0.35; cursor: default; }
.op-prev { left: -14px; }
.op-next { right: -14px; }

@media (max-width: 900px) {
	.op-slider .op-card { flex: 0 0 82%; }
	.op-prev { left: 4px; }
	.op-next { right: 4px; }
}

/* =========================================================================
   CLUSTER PILLS (optional, currently unused)
   ========================================================================= */
.cluster-pills { background: var(--gold-pale); text-align: center; }
.cluster-pills .overline { display: block; }
.cluster-pills .section-title { margin-bottom: 34px; }
.pill-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	max-width: 980px;
	margin: 0 auto;
}
.cluster-pill {
	display: inline-block;
	background: #fff;
	color: var(--charcoal);
	font-size: 0.98rem;
	font-weight: 500;
	line-height: 1.2;
	padding: 15px 30px;
	border-radius: 999px;
	border: 1px solid transparent;
	box-shadow: 0 2px 10px rgba(28,28,28,0.06);
	transition: background var(--ease), color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.cluster-pill:hover {
	color: var(--gold-text);
	box-shadow: 0 6px 20px rgba(28,28,28,0.12);
	transform: translateY(-2px);
}
.cluster-pill.is-current {
	background: var(--charcoal);
	color: #fff;
	font-weight: 600;
	box-shadow: 0 8px 24px rgba(28,28,28,0.22);
}
.cluster-pill.is-current:hover { color: #fff; }

@media (max-width: 640px) {
	.pill-nav { gap: 12px; }
	.cluster-pill { padding: 13px 22px; font-size: 0.9rem; }
}

/* =========================================================
   LOGO (header + footer)
   Drop assets/images/logo.png (or .svg/.webp) into the theme,
   or set one under Appearance > Customize > Site Identity.
   ========================================================= */
/* Authorised Sales Partner lockup sits beside the project name. The artwork
   is roughly 4:1, so 30px tall is about 122px wide; the divider and the
   project name follow. Sizes below are chosen so the brand block plus the
   full nav still fit at 1025px, the narrowest desktop-nav width. */
.brand-logo {
	display: block;
	height: 26px;          /* -> ~106px wide at 4.06:1 */
	width: auto;
	max-width: 100%;
	object-fit: contain;
	flex: 0 0 auto;
	overflow: hidden;
	transition: height .25s ease, max-width .3s ease, opacity .2s ease;
}
/* Nudge the lockup toward the container edge so it optically aligns with the
   content below rather than sitting inset from it. */
.brand-has-logo { display: inline-flex; align-items: center; gap: 9px; min-width: 0; margin-left: -6px; }
/* Pipe between the partner lockup and the project name. */
.brand-sep {
	flex: 0 0 auto;
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1;
	color: var(--light-gray);
	transform: translateY(-1px);
	overflow: hidden;
	transition: max-width .3s ease, opacity .2s ease;
}
.brand-has-logo .brand-text { min-width: 0; }
/* The project name is what the visitor needs to read first, so it carries
   more weight than the partner lockup beside it. */
.brand-has-logo .brand-text .brand-line1,
.brand-has-logo .brand-text .brand-line2 { font-size: 1.26rem; font-weight: 700; }
.brand-has-logo .brand-text .brand-line1 { color: var(--charcoal); }
.brand-has-logo .brand-text .brand-line2 { color: var(--gold-text); }
.brand-has-logo .brand-text-two .brand-line1,
.brand-has-logo .brand-text-two .brand-line2 { font-size: 1.1rem; font-weight: 700; }
.site-header.scrolled .brand-logo { height: 24px; }

.footer-brand-logo { display: inline-block; margin-bottom: 14px; }
.footer-brand-logo img { height: 40px; width: auto; max-width: 100%; object-fit: contain; }

/* Tighten the nav gap just before the hamburger takes over, so the brand
   block and the menu never compete for the same pixels. */
@media (max-width: 1180px) {
	.main-nav .nav-list { gap: 20px; }
	.main-nav a { font-size: 0.86rem; }
	.brand-logo { height: 28px; }
	/* The brand lockup needs the room. The number stays reachable from the
	   Enquire button, the mobile dock and the footer. */
	.header-phone { display: none; }
}
@media (max-width: 1024px) {
	.brand-logo, .site-header.scrolled .brand-logo { height: 25px; }
	.brand-has-logo { gap: 8px; }
	.brand-sep { font-size: 1.35rem; }
}
/* Phones keep the full Authorised Sales Partner lockup. Below 768px the header
   phone and Enquire buttons are already hidden, so only the hamburger shares
   the row and there is room for both the lockup and the project name. */
@media (max-width: 560px) {
	.brand-logo, .site-header.scrolled .brand-logo { height: 22px; }
	.brand-has-logo { gap: 7px; margin-left: -4px; }
	.brand-sep { font-size: 1.2rem; }
	.brand-has-logo .brand-text .brand-line1,
	.brand-has-logo .brand-text .brand-line2 { font-size: 1.04rem; }
	.brand-has-logo .brand-text-two .brand-line1,
	.brand-has-logo .brand-text-two .brand-line2 { font-size: 0.94rem; }
}
@media (max-width: 380px) {
	.brand-logo, .site-header.scrolled .brand-logo { height: 20px; }
	.brand-has-logo { gap: 6px; }
	.brand-sep { font-size: 1.05rem; }
	.brand-has-logo .brand-text-two .brand-line1,
	.brand-has-logo .brand-text-two .brand-line2 { font-size: 0.86rem; }
	.footer-brand-logo img { height: 34px; }
}
@media (max-width: 480px) {
	.footer-brand-logo img { height: 34px; }
}

/* Page title section: partner lockup above the project name. */
.about-title { line-height: 1.18; }
.about-title-sub {
	display: block;
	margin-top: 6px;
	font-size: 0.52em;
	font-weight: 400;
	letter-spacing: 0.3px;
	color: var(--gold-text);
}
@media (max-width: 640px) { .about-title-sub { font-size: 0.6em; } }

/* ---------- Scrolled header ----------
   The Authorised Sales Partner lockup does its job on page load. Once the
   visitor starts scrolling it collapses away and the project name takes the
   space, so the sticky bar carries the project, the menu, the phone number
   and the enquiry button. */
.site-header.scrolled .brand.brand-has-logo .brand-logo,
.site-header.scrolled .brand.brand-has-logo .brand-sep {
	max-width: 0;
	opacity: 0;
	pointer-events: none;
}
.site-header.scrolled .brand.brand-has-logo {
	gap: 0;
	margin-left: 0;
}
/* With the lockup gone the project name can carry a little more presence. */
.site-header.scrolled .brand-has-logo .brand-text .brand-line1,
.site-header.scrolled .brand-has-logo .brand-text .brand-line2 { font-size: 1.34rem; }
.site-header.scrolled .brand-has-logo .brand-text-two .brand-line1,
.site-header.scrolled .brand-has-logo .brand-text-two .brand-line2 { font-size: 1.16rem; }
.brand-text .brand-line1, .brand-text .brand-line2 { transition: font-size .25s ease; }
/* The number is hidden at this width to make room for the lockup. Once the
   lockup collapses there is space, so bring it back while scrolling. */
@media (min-width: 1025px) and (max-width: 1180px) {
	.site-header.scrolled .header-phone { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
}
@media (max-width: 560px) {
	.site-header.scrolled .brand-has-logo .brand-text .brand-line1,
	.site-header.scrolled .brand-has-logo .brand-text .brand-line2 { font-size: 1.08rem; }
	.site-header.scrolled .brand-has-logo .brand-text-two .brand-line1,
	.site-header.scrolled .brand-has-logo .brand-text-two .brand-line2 { font-size: 0.98rem; }
}
@media (prefers-reduced-motion: reduce) {
	.brand-logo, .brand-sep, .brand-text .brand-line1, .brand-text .brand-line2 { transition: none; }
}

.subhero-logo {
	display: block;
	height: 34px;
	width: auto;
	max-width: 70vw;
	margin: 0 auto 16px;
	object-fit: contain;
}
@media (max-width: 768px) { .subhero-logo { height: 28px; margin-bottom: 12px; } }
@media (max-width: 480px) { .subhero-logo { height: 24px; } }
@media (max-width: 360px) {
	.brand-logo, .site-header.scrolled .brand-logo { height: 25px; }
}

/* =========================================================
   CROSS-DEVICE HARDENING
   Covers iOS/iPadOS Safari, Android Chrome, Samsung Internet,
   Windows/macOS desktop, and notched phones (iPhone 14-17 Pro
   Max, Galaxy S23-S26 Ultra, Pixel Pro).
   ========================================================= */

/* Never allow a stray wide element to create sideways scroll. */
html, body { max-width: 100%; overflow-x: hidden; }
body { overflow-wrap: break-word; }
*, *::before, *::after { -webkit-tap-highlight-color: rgba(0,0,0,0.06); }
img, svg, video, table { max-width: 100%; }

/* Header height as a variable so the mobile panel always docks to it. */
:root { --header-h: 80px; }
@media (max-width: 1024px) { :root { --header-h: 72px; } }
@media (max-width: 480px)  { :root { --header-h: 64px; } }

/* ---------- Hamburger: 44x44 minimum tap target (Apple HIG / Material) ---------- */
.hamburger {
	width: 44px; height: 44px;
	align-items: center; justify-content: center;
	padding: 0;
	-webkit-appearance: none; appearance: none;
	touch-action: manipulation;
	border-radius: 6px;
}
.hamburger span {
	display: block;
	transform-origin: center;
	transition: transform .28s ease, opacity .2s ease;
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hamburger:focus-visible { outline: 2px solid var(--gold, #3E7B4F); outline-offset: 2px; }

/* ---------- Mobile nav panel ---------- */
.mobile-nav {
	top: var(--header-h);
	max-height: calc(100vh - var(--header-h));
	max-height: calc(100dvh - var(--header-h));
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Comfortable, thumb-sized rows. */
.mobile-nav a { padding: 14px 24px; min-height: 48px; display: flex; align-items: center; }
.mobile-nav a:active { background: rgba(255,255,255,0.07); }

/* Lock background scroll while the panel is open. */
body.nav-open { overflow: hidden; touch-action: none; }

/* ---------- Notch / home-indicator safe areas ---------- */
.wa-float {
	right: calc(18px + env(safe-area-inset-right, 0px));
	bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}
.runo-toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Forms: stop iOS auto-zoom on focus (needs >=16px) ---------- */
.runo-form input,
.runo-form select,
.runo-form textarea { font-size: 16px; min-height: 48px; }
.runo-form button,
.runo-form .btn { min-height: 48px; touch-action: manipulation; }

/* ---------- Tables: never break the layout on narrow screens ---------- */
.price-table-wrap, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Large phones / small tablets ---------- */
@media (max-width: 1024px) {
	.wa-float { width: 54px; height: 54px; }
}

/* ---------- Phones ---------- */
@media (max-width: 768px) {
	/* Hero: dynamic viewport units so iOS Safari's collapsing
	   address bar doesn't clip the headline. */
	.hero { height: 100svh; min-height: 520px; padding-bottom: 12vh; }
	.hero-title { font-size: clamp(1.3rem, 5.2vw, 1.85rem); line-height: 1.2; }
	.hero-desc  { font-size: clamp(0.92rem, 3.6vw, 1.05rem); }
	.subhero { min-height: 380px; }
	.section-title { font-size: clamp(1.35rem, 5.4vw, 1.9rem); }
	.wa-float { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
	/* Anything anchored must clear the sticky header. */
	[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
}

/* ---------- Small phones (iPhone SE, compact Android) ---------- */
@media (max-width: 380px) {
	.container { padding: 0 15px; }
	.hero { min-height: 470px; }
	.footer-grid { grid-template-columns: 1fr; }
	.stats-grid { grid-template-columns: 1fr 1fr; }
	.amenity-tab { padding: 9px 13px; font-size: 0.78rem; }
}

/* ---------- Landscape phones: don't force a full-height hero ---------- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
	.hero { height: auto; min-height: 420px; padding: 110px 0 60px; }
	.mobile-nav { max-height: calc(100dvh - var(--header-h)); }
}

/* ---------- Tablets in portrait (iPad, Galaxy Tab) ---------- */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.op-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Very large desktops ---------- */
@media (min-width: 1600px) {
	.container { max-width: 1360px; }
}

/* ---------- Accessibility / motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Print ---------- */
@media print {
	.site-header, .mobile-nav, .mobile-bar, .wa-float, .runo-modal, .hamburger { display: none !important; }
	body { color: #000; }
}

/* =========================================================
   MOBILE ACTION BAR — slim Call / Enquire dock
   Phones and small tablets only. Hidden from 769px up.
   ========================================================= */
.mobile-bar {
	display: none;
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 160;
	align-items: stretch;
	background: rgba(30, 26, 27, 0.97);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	border-top: 1px solid rgba(245, 240, 238, 0.12);
	box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.22);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-bar .mb-action {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 54px;
	margin: 0;
	padding: 0 10px;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.3px;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
	touch-action: manipulation;
	transition: background-color .2s ease, color .2s ease;
}

/* Hairline divider rather than a gap — keeps the dock reading as one object. */
.mobile-bar .mb-sep {
	width: 1px;
	align-self: center;
	height: 24px;
	background: rgba(242, 239, 233, 0.18);
}

.mobile-bar .mb-ico { flex: none; opacity: 0.9; }

/* Call — quiet, secondary. */
.mobile-bar .mb-call { color: #f5f0ee; }
.mobile-bar .mb-call:active { background: rgba(242, 239, 233, 0.09); }

/* Enquire — the primary action, carried by the brand green. */
.mobile-bar .mb-enquire { color: #ffffff; background: var(--gold, #3E7B4F); }
.mobile-bar .mb-enquire:active { -webkit-filter: brightness(0.92); filter: brightness(0.92); }

.mobile-bar .mb-action:focus-visible { outline: 2px solid #f2efe9; outline-offset: -3px; }

/* Show the dock and keep page content clear of it. */
@media (max-width: 768px) {
	.mobile-bar { display: flex; }
	/* Reserve the dock's height so the footer's last line is never covered. */
	body { padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }
	/* Float the WhatsApp bubble above the dock. */
	.wa-float { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
	.runo-toast { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 360px) {
	.mobile-bar .mb-action { font-size: 0.79rem; gap: 6px; padding: 0 6px; }
}

/* Landscape phones: trim the dock so it doesn't eat the short viewport. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
	.mobile-bar .mb-action { min-height: 46px; }
	body { padding-bottom: calc(46px + env(safe-area-inset-bottom, 0px)); }
}

/* The dock is a mobile affordance only. */
@media (min-width: 769px) { .mobile-bar { display: none !important; } }

/* Mobile nav: distinctive project name leads, city follows. */
.mob-project .mob-name { font-weight: 600; }
.mob-project a small { opacity: 0.72; font-size: 0.76rem; margin-left: 4px; }

/* Dropdown falls to 2 columns on narrow laptops so names never crowd. */
@media (max-width: 1180px) {
	.dropdown { width: min(600px, calc(100vw - 32px)); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   BLOG — single post, index and archives
   Uses the existing palette variables and container widths. No new fonts,
   no new images, no JS. Reading column is capped at 68ch, which is the
   comfortable measure for body text regardless of screen width.
   ========================================================================== */
.container-narrow { max-width: 760px; }
.runo-post-head { padding: 46px 0 10px; }
.runo-post-crumb { font-size: 0.82rem; color: #6d7b76; margin-bottom: 14px; }
.runo-post-crumb a { color: var(--gold-text); }
.runo-post-crumb span { margin: 0 7px; color: #b6c2bd; }
.runo-post-title { font-size: clamp(1.7rem, 4.2vw, 2.6rem); line-height: 1.22; margin: 0 0 14px; color: var(--ink, #16211D); }
.runo-post-meta { font-size: 0.85rem; color: #6d7b76; margin: 0; }
.runo-post-updated { margin-left: 14px; padding-left: 14px; border-left: 1px solid #d6e0dc; }
.runo-post-thumb { margin: 26px auto 0; }
.runo-post-thumb img { width: 100%; height: auto; border-radius: 10px; display: block; }
.runo-post-body { padding: 26px 0 50px; max-width: 68ch; font-size: 1.02rem; line-height: 1.75; color: #26332E; }
.runo-post-body p { margin: 0 0 1.15em; }
.runo-post-body h2 { font-size: clamp(1.3rem, 2.7vw, 1.65rem); line-height: 1.3; margin: 1.9em 0 0.6em; color: var(--gold-text); }
.runo-post-body h3 { font-size: 1.12rem; margin: 1.5em 0 0.5em; }
.runo-post-body a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 2px; }
.runo-post-body a:hover { color: var(--gold); }
.runo-post-body ul, .runo-post-body ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.runo-post-body li { margin-bottom: 0.45em; }
.runo-post-body img { max-width: 100%; height: auto; border-radius: 8px; }
.runo-post-body blockquote { margin: 1.5em 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--gold); color: #3c4a44; }
.runo-post-body table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 0.94rem; }
.runo-post-body th, .runo-post-body td { border: 1px solid #dbe5e1; padding: 9px 11px; text-align: left; }
.runo-post-body th { background: var(--gold-pale, #EAF4F0); }
.runo-post-cta { background: var(--gold-pale, #EAF4F0); padding: 44px 0; }
.runo-post-cta h2 { margin: 0 0 8px; font-size: 1.4rem; color: var(--gold-text); }
.runo-post-cta p { margin: 0 0 20px; color: #3c4a44; font-size: 0.95rem; }

.runo-blog-list { padding: 46px 0 56px; }
.runo-blog-title { font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 0 0 10px; }
.runo-blog-intro { color: #5d6b65; margin: 0 0 30px; }
.runo-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px; }
.runo-blog-card { border: 1px solid #e2ebe7; border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.runo-blog-card-img img { width: 100%; height: 180px; object-fit: cover; display: block; }
.runo-blog-card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.runo-blog-card-date { font-size: 0.78rem; color: #7b8883; }
.runo-blog-card-title { font-size: 1.08rem; line-height: 1.35; margin: 7px 0 9px; }
.runo-blog-card-title a { color: var(--ink, #16211D); }
.runo-blog-card-title a:hover { color: var(--gold-text); }
.runo-blog-card-excerpt { font-size: 0.9rem; color: #5d6b65; line-height: 1.6; margin: 0 0 14px; flex: 1; }
.runo-blog-card-link { font-size: 0.86rem; font-weight: 500; color: var(--gold-text); }
.runo-blog-pagination { margin-top: 34px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.runo-blog-pagination .page-numbers { padding: 7px 13px; border: 1px solid #dbe5e1; border-radius: 6px; font-size: 0.88rem; color: var(--gold-text); }
.runo-blog-pagination .page-numbers.current { background: var(--gold); border-color: var(--gold); color: #fff; }
.runo-blog-empty { color: #5d6b65; }

@media (max-width: 600px) {
  .runo-post-head { padding: 30px 0 6px; }
  .runo-post-body { padding: 20px 0 38px; font-size: 1rem; }
  .runo-post-cta { padding: 32px 0; }
  .runo-blog-grid { grid-template-columns: 1fr; gap: 20px; }
}