/* ============================================================
   Prestige Falcon City Luxe - Site styling
   Prestige Group brand: black + gold (builders/prestige-group.json)
   Mobile-first responsive layout
   ============================================================ */

/* --- Custom Properties --- */
:root {
  /* Brand palette - builders/prestige-group/prestige-group.json */
  --brand-primary: #000000;
  --brand-secondary: #A58E42;
  --brand-tertiary: #333333;
  --dark-primary: #171717;
  --dark-secondary: #4a4a4a;
  --dark-tertiary: #d8d8d8;
  --light-primary: #f8f8f8;
  --light-secondary: #ffffff;
  --light-tertiary: #eeeeee;

  /* Form feedback (semantic; not part of the 9-colour brand grid) */
  --success: #059669;
  --success-bg: #ECFDF5;
  --error: #DC2626;
  --error-bg: #FEF2F2;

  /* Typography */
  --font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --line-height-tight: 1.25;
  --line-height-base: 1.6;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 64px;
  --border-radius-sm: 4px;
  --border-radius: 8px;
  --border-radius-lg: 12px;

  /* Aliases read by the injected related-projects block, so its cards and
     buttons pick up this site's radius and type instead of its own defaults. */
  --radius: var(--border-radius);
  --font-body: var(--font-family);
  --font-headline: var(--seo-serif, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif);
  --font-display: var(--font-headline);
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--brand-primary) 5%, transparent);
  --shadow: 0 1px 3px color-mix(in srgb, var(--brand-primary) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--brand-primary) 6%, transparent);
  --shadow-md: 0 4px 6px color-mix(in srgb, var(--brand-primary) 7%, transparent), 0 2px 4px color-mix(in srgb, var(--brand-primary) 6%, transparent);
  --shadow-lg: 0 10px 15px color-mix(in srgb, var(--brand-primary) 10%, transparent), 0 4px 6px color-mix(in srgb, var(--brand-primary) 5%, transparent);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
}


/* --- Reset & Base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + var(--space-4));
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--dark-primary);
  background-color: var(--light-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  background-color: var(--light-primary);
  border-radius: var(--border-radius);
}

a {
  color: var(--dark-primary);
  text-decoration: underline;
  text-decoration-color: var(--brand-secondary);
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--brand-tertiary);
}

a:focus-visible {
  outline: 2px solid var(--brand-secondary);
  outline-offset: 2px;
  border-radius: 2px;
}

ul, ol {
  list-style: none;
}

fieldset {
  border: none;
}


/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  color: var(--dark-primary);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
}

h1 {
  font-size: var(--font-size-3xl);
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--font-size-2xl);
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--font-size-xl);
}

h4 {
  font-size: var(--font-size-lg);
}

p {
  margin-bottom: var(--space-4);
  color: var(--dark-primary);
}

p:last-child {
  margin-bottom: 0;
}

.text-muted {
  color: var(--dark-secondary);
}

.text-sm {
  font-size: var(--font-size-sm);
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--dark-secondary);
  margin-top: var(--space-2);
  font-weight: var(--font-weight-normal);
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}


/* --- Layout --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.section {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.section-alt {
  background-color: var(--light-primary);
}

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-2 {
  grid-template-columns: 1fr;
}

.grid-3 {
  grid-template-columns: 1fr;
}

.grid-4 {
  grid-template-columns: 1fr;
}


/* --- Navigation --- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--light-secondary);
  border-bottom: 1px solid var(--dark-tertiary);
  height: var(--nav-height);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav-logo {
  color: var(--dark-primary);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* WCAG AA hover contrast: was var(--brand-secondary) #A58E42 on #ffffff = 3.21:1; same-hue darker gold #837135 = 4.80:1 */
.nav-logo:hover {
  color: #837135;
}

.nav-logo img {
  display: block;
  width: 42px;
  height: 42px;
  aspect-ratio: 1 / 1;
  flex: 0 0 42px;
}

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--dark-tertiary);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  padding: 0;
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--dark-primary);
  transition: transform var(--transition-base), opacity var(--transition-base);
  position: relative;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
}

.nav-toggle-icon::before {
  top: -6px;
}

.nav-toggle-icon::after {
  top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon {
  background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

.nav-menu {
  display: none;
  position: absolute;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background-color: var(--light-secondary);
  border-bottom: 1px solid var(--dark-tertiary);
  padding: var(--space-4);
  box-shadow: var(--shadow-md);
}

.nav-menu.is-open {
  display: block;
}

.nav-menu li {
  margin-bottom: var(--space-1);
}

.nav-menu a {
  display: block;
  padding: var(--space-3) var(--space-4);
  color: var(--dark-primary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius-sm);
  transition: background-color var(--transition-fast);
}

.nav-menu a:hover,
.nav-menu a.is-active {
  background-color: var(--light-primary);
  color: var(--dark-primary);
  box-shadow: inset 0 -2px 0 var(--brand-secondary);
}

.nav-menu a.nav-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  line-height: 1;
  background-color: var(--brand-primary);
  color: var(--light-secondary) !important;
  text-align: center;
  padding: 0 var(--space-6) !important;
  border-radius: var(--border-radius) !important;
  font-weight: var(--font-weight-semibold);
  margin-top: var(--space-2);
}

/* Higher specificity to beat .nav-menu a:hover (0-2-1 vs 0-2-0) */
.nav-menu a.nav-cta:hover {
  background-color: color-mix(in srgb, var(--brand-primary) 85%, black) !important;
  color: var(--light-secondary) !important;
}

.nav-menu a.nav-cta.is-active,
.nav-menu a.nav-cta:focus-visible {
  background-color: var(--brand-primary) !important;
  color: var(--light-secondary) !important;
}


/* --- Hero / Page Header --- */
.page-hero {
  position: relative;
  background-color: var(--light-primary);
  padding: var(--space-12) 0;
  overflow: hidden;
}

.page-hero .container {
  position: relative;
  z-index: 2;
}

.page-hero h1 {
  margin-bottom: var(--space-4);
}

.page-hero .hero-subtitle {
  font-size: var(--font-size-lg);
  color: var(--dark-secondary);
  max-width: 640px;
  margin-bottom: var(--space-6);
}

.hero-home {
  padding: var(--space-16) 0 var(--space-12);
  background-color: var(--brand-primary);
  color: var(--light-secondary);
  min-height: 420px;
  display: flex;
  align-items: center;
}

.hero-home h1 {
  color: var(--light-secondary);
  font-size: var(--font-size-3xl);
}

.hero-home .hero-subtitle {
  color: color-mix(in srgb, var(--light-secondary) 62%, transparent);
}

.hero-home .page-updated,
.hero-home .page-updated time {
  color: color-mix(in srgb, var(--light-secondary) 72%, transparent);
}

.hero-home .hero-image {
  margin-top: var(--space-8);
  width: 100%;
  height: clamp(240px, 46vw, 520px);
  display: block;
  border-radius: var(--border-radius-lg);
  object-fit: cover;
  background-color: transparent;
}

.hero-home .published-date {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.hero-image {
  width: min(100%, 920px);
  max-height: 520px;
  height: auto;
  display: block;
  margin-inline: auto;
  border-radius: var(--border-radius-lg);
  object-fit: contain;
  background-color: var(--light-primary);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Primary CTA: black btn on black hero has no contrast */
.hero-home .hero-actions .btn-primary {
  background-color: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: var(--brand-primary);
}

.hero-home .hero-actions .btn-primary:hover {
  background-color: color-mix(in srgb, var(--brand-secondary) 88%, black);
  border-color: color-mix(in srgb, var(--brand-secondary) 88%, black);
  color: var(--brand-primary);
}

.hero-home .hero-actions .btn-primary:focus-visible {
  outline-color: var(--light-secondary);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--dark-secondary);
  margin-bottom: var(--space-4);
}

.breadcrumb a {
  color: var(--brand-tertiary);
  text-decoration: none;
}

/* WCAG AA hover contrast: was var(--brand-secondary) #A58E42 on #f8f8f8 = 3.02:1; same-hue darker gold #837135 = 4.52:1 */
.breadcrumb a:hover {
  color: #837135;
  text-decoration: underline;
}

.breadcrumb-sep::after {
  content: '›';
  margin-left: var(--space-1);
}


/* --- Buttons --- */
.btn-primary {
  display: inline-flex;
  padding: var(--space-3) var(--space-6);
  background-color: var(--brand-primary);
  color: var(--light-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border: 2px solid var(--brand-primary);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
  text-align: center;
  line-height: 1.4;
}

.btn-primary:hover {
  background-color: color-mix(in srgb, var(--brand-primary) 85%, black);
  border-color: color-mix(in srgb, var(--brand-primary) 85%, black);
  color: var(--light-secondary);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  display: inline-flex;
  padding: var(--space-3) var(--space-6);
  background-color: transparent;
  color: var(--dark-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border: 2px solid var(--brand-secondary);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  text-align: center;
  line-height: 1.4;
}

.btn-secondary:hover {
  background-color: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: var(--brand-primary);
}

.btn-secondary:focus-visible {
  outline: 2px solid var(--brand-secondary);
  outline-offset: 2px;
}

.btn-white {
  display: inline-flex;
  padding: var(--space-3) var(--space-6);
  background-color: var(--light-secondary);
  color: var(--dark-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border: 2px solid var(--light-secondary);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color var(--transition-fast), opacity var(--transition-fast);
  text-align: center;
  line-height: 1.4;
}

.btn-white:hover {
  opacity: 0.9;
  color: var(--dark-primary);
}

.btn-primary,
.btn-secondary,
.btn-white {
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  vertical-align: middle;
}

.section-actions {
  display: flex;
  flex-flow: row wrap;
  gap: var(--space-3);
  align-items: center;
}

.section-actions > .btn-primary,
.section-actions > .btn-secondary,
.section-actions > .btn-white {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

.section-actions.center {
  justify-content: center;
}


/* --- Cards --- */
.card {
  background-color: var(--light-secondary);
  border: 1px solid var(--dark-tertiary);
  border-radius: var(--border-radius);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card h3 {
  margin-bottom: var(--space-2);
}

.card p {
  color: var(--dark-secondary);
  font-size: var(--font-size-sm);
}

.card-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--border-radius);
  margin-bottom: var(--space-4);
}


/* --- Stats Bar --- */
.stats-bar {
  background-color: var(--light-secondary);
  border-bottom: 1px solid var(--dark-tertiary);
  padding: var(--space-6) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  text-align: center;
}

.stat-item {
  padding: var(--space-4);
}

.stat-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--brand-secondary);
  display: block;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--dark-secondary);
  margin-top: var(--space-1);
  display: block;
}


/* --- Tables --- */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--dark-tertiary);
  border-radius: var(--border-radius);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.data-table th {
  background-color: var(--light-primary);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--dark-tertiary);
  white-space: nowrap;
}

.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--dark-tertiary);
}

/* Pricing-specific: center-align numeric cells */
.data-table.table-center th,
.data-table.table-center td {
  text-align: center;
}

.data-table.table-center th:first-child,
.data-table.table-center td:first-child {
  text-align: left;
}

/* Side-by-side tables on desktop */
.tables-side-by-side {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover td {
  background-color: var(--light-primary);
}


/* --- Key Details Table (overview) --- */
.details-table {
  width: 100%;
  border-collapse: collapse;
}

.details-table tr {
  border-bottom: 1px solid var(--dark-tertiary);
}

.details-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-medium);
  color: var(--dark-secondary);
  width: 40%;
  font-size: var(--font-size-sm);
  vertical-align: top;
}

.details-table td {
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}


/* --- Forms --- */
.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-2);
  color: var(--dark-primary);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--dark-primary);
  background-color: var(--light-secondary);
  border: 1px solid var(--dark-tertiary);
  border-radius: var(--border-radius);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--brand-secondary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-secondary) 22%, transparent);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--dark-tertiary);
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234a4a4a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--dark-tertiary);
  border-radius: var(--border-radius-sm);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.checkbox-label:hover {
  border-color: var(--brand-secondary);
}

.checkbox-label input[type="checkbox"] {
  accent-color: var(--brand-secondary);
}

.checkbox-label input[type="checkbox"]:checked + span {
  color: var(--brand-secondary);
}

/* --- Skip to Content --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background-color: var(--brand-primary);
  color: var(--light-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: var(--space-4);
}

#form-message {
  padding: var(--space-4);
  border-radius: var(--border-radius);
  margin-top: var(--space-6);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

#form-message[hidden] {
  display: none;
}

#form-message.success {
  background-color: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success);
}

#form-message.error {
  background-color: var(--error-bg);
  color: var(--error);
  border: 1px solid var(--error);
}

.contact-grid {
  display: grid;
  gap: var(--space-8);
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.contact-info-item .info-icon {
  font-size: var(--font-size-xl);
  flex-shrink: 0;
}

.contact-info-item h4 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
}

.contact-info-item p {
  font-size: var(--font-size-sm);
  color: var(--dark-secondary);
}


/* --- FAQ Accordion --- */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item:has(> .faq-question) {
  border: 1px solid var(--dark-tertiary);
  border-radius: var(--border-radius);
  margin-bottom: var(--space-2);
  overflow: hidden;
  padding: 0;
  margin-top: 0;
  background: var(--light-secondary);
  box-shadow: none;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  background: none;
  border: none;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--dark-primary);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  gap: var(--space-4);
}

.faq-question:hover {
  background-color: var(--light-primary);
}

.faq-question::after {
  content: '+';
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-normal);
  color: var(--dark-secondary);
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.faq-item.is-active .faq-question::after {
  content: '−';
}

.faq-item.is-active .faq-question {
  background-color: var(--light-primary);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.faq-answer-inner {
  padding: 0 var(--space-4) var(--space-3);
  color: var(--dark-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

.faq-answer-inner p + p {
  margin-top: var(--space-2);
}


/* --- Gallery --- */
.gallery-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  justify-content: center;
}

.gallery-tab {
  padding: var(--space-2) var(--space-4);
  background: none;
  border: 1px solid var(--dark-tertiary);
  border-radius: var(--border-radius);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--dark-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.gallery-tab:hover {
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
}

.gallery-tab.is-active {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--light-secondary);
}

.gallery-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

.gallery-item {
  border-radius: var(--border-radius);
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 260px;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.gallery-item.is-hidden {
  display: none;
}

.gallery-item figcaption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--dark-secondary);
  background-color: var(--light-primary);
}


/* --- Gallery Preview (homepage) --- */
.gallery-preview-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}

.gallery-preview-item {
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
  margin: 0;
}

.gallery-preview-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.gallery-preview-item:hover img {
  transform: scale(1.03);
}

.gallery-preview-item figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(transparent, color-mix(in srgb, var(--brand-primary) 55%, transparent));
  color: var(--light-secondary);
  font-size: var(--font-size-sm);
}

/* Amenity list inside cards */
.amenity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.amenity-list li {
  font-size: var(--font-size-sm);
  color: var(--dark-secondary);
  padding-left: var(--space-4);
  position: relative;
}

.amenity-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--brand-secondary);
  font-weight: var(--font-weight-semibold);
}

/* --- CTA Banner --- */
.cta-banner {
  background-color: color-mix(in srgb, var(--brand-secondary) 14%, var(--light-secondary));
  text-align: center;
  padding: var(--space-12) 0;
}

.cta-banner h2 {
  margin-bottom: var(--space-3);
}

.cta-banner p {
  color: var(--dark-primary);
  margin-bottom: var(--space-6);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}


/* --- Reviews --- */
.review-card {
  border: 1px solid var(--dark-tertiary);
  border-radius: var(--border-radius);
  padding: var(--space-6);
}

.review-card .review-label {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--dark-primary);
  background-color: color-mix(in srgb, var(--brand-secondary) 14%, var(--light-secondary));
  padding: var(--space-1) var(--space-3);
  border-radius: var(--border-radius-sm);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.review-card h3 {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-2);
}

.review-card p {
  font-size: var(--font-size-sm);
  color: var(--dark-secondary);
}


/* --- Amenities Grid --- */
.amenity-category {
  margin-bottom: var(--space-10);
}

.amenity-category h3 {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--brand-secondary);
  display: inline-block;
}

.amenity-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--dark-tertiary);
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: border-color var(--transition-fast);
}

.amenity-item:hover {
  border-color: var(--brand-secondary);
}

.amenity-icon {
  font-size: var(--font-size-xl);
  flex-shrink: 0;
}


/* --- Connectivity / Location --- */
.map-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--light-primary);
  border: 1px solid var(--dark-tertiary);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark-tertiary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.map-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  box-sizing: border-box;
  padding: var(--space-2);
  background-color: var(--light-secondary);
  border-radius: inherit;
}


/* --- Floor Plan Cards --- */
.floor-plan-card {
  border: 1px solid var(--dark-tertiary);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.floor-plan-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 300px;
  object-fit: contain;
  display: block;
  box-sizing: border-box;
  padding: var(--space-3);
  background-color: var(--light-primary);
  border-radius: 0;
}

.gallery-grid-floorplans .gallery-item img {
  max-height: 320px;
  object-fit: contain;
  box-sizing: border-box;
  padding: var(--space-2);
  background-color: var(--light-secondary);
}

.gallery-grid-floorplans .gallery-item figcaption {
  text-align: center;
}

.floor-plan-info {
  padding: var(--space-5);
}

.floor-plan-info h3 {
  margin-bottom: var(--space-2);
}

.floor-plan-info .area {
  color: var(--dark-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
}

.floor-plan-highlights {
  list-style: none;
}

.floor-plan-highlights li {
  font-size: var(--font-size-sm);
  color: var(--dark-secondary);
  padding: var(--space-1) 0;
  padding-left: var(--space-5);
  position: relative;
}

.floor-plan-highlights li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: var(--font-weight-bold);
}


/* --- Master Plan Zone Cards --- */
.zone-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--dark-tertiary);
  border-radius: var(--border-radius);
}

.zone-card .zone-icon {
  font-size: var(--font-size-2xl);
}

.zone-card h4 {
  margin-bottom: var(--space-1);
}

.zone-card p {
  font-size: var(--font-size-sm);
  color: var(--dark-secondary);
}


/* --- Footer --- */
.site-footer {
  background-color: var(--brand-primary);
  color: var(--light-secondary);
  padding: var(--space-12) 0 var(--space-6);
}

.footer-grid {
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.footer-logo {
  color: var(--light-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-3);
}

.footer-logo:hover {
  color: var(--brand-secondary);
}

.footer-logo img {
  display: block;
  width: 52px;
  height: 52px;
  aspect-ratio: 1 / 1;
  flex: 0 0 52px;
}

.site-footer p {
  color: color-mix(in srgb, var(--light-secondary) 62%, transparent);
  font-size: var(--font-size-sm);
}

.site-footer h3 {
  color: var(--light-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: var(--space-2);
}

.footer-links a {
  color: color-mix(in srgb, var(--light-secondary) 62%, transparent);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--light-secondary);
}

.footer-bottom {
  border-top: 1px solid color-mix(in srgb, var(--light-secondary) 10%, transparent);
  padding-top: var(--space-6);
}

.footer-disclaimer {
  font-size: var(--font-size-xs);
  color: color-mix(in srgb, var(--light-secondary) 62%, transparent);
  line-height: var(--line-height-base);
  max-width: 960px;
}

.footer-disclaimer p {
  font-size: var(--font-size-xs);
  color: color-mix(in srgb, var(--light-secondary) 62%, transparent);
  margin-bottom: var(--space-4);
}

.footer-rera {
  font-size: var(--font-size-xs);
  color: color-mix(in srgb, var(--light-secondary) 62%, transparent);
  margin-top: var(--space-4);
}

/* --- Related Projects --- */
.related-projects[data-related-projects-section] {
  padding: var(--space-16) var(--space-4);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--brand-secondary) 12%, transparent), transparent 32rem),
    var(--light-primary);
  color: var(--dark-primary);
  border-top: 1px solid var(--dark-tertiary);
}

.related-projects[data-related-projects-section] .related-projects__inner {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
}

.related-projects[data-related-projects-section] .related-projects__header {
  max-width: none !important;
  margin: 0 auto var(--space-10);
  text-align: center;
  width: 100%;
}

.related-projects[data-related-projects-section] .related-projects__header::before {
  content: none;
  display: none;
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 18%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-secondary) 14%, var(--light-secondary));
  color: var(--brand-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.related-projects[data-related-projects-section] .related-projects__header h2 {
  margin: 0;
  color: var(--dark-primary);
  max-width: none !important;
  display: block;
  width: 100%;
}

.related-projects[data-related-projects-section] .related-projects__header p {
  max-width: 680px;
  margin: var(--space-4) auto 0;
  color: var(--dark-secondary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-base);
}

.related-projects[data-related-projects-section] .related-projects__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.related-projects[data-related-projects-section] .related-projects__card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid var(--dark-tertiary);
  border-radius: var(--border-radius-lg);
  background: var(--light-secondary);
  box-shadow: var(--shadow);
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.related-projects[data-related-projects-section] .related-projects__card:hover {
  border-color: color-mix(in srgb, var(--brand-secondary) 35%, transparent);
  box-shadow: var(--shadow-lg);
}

.related-projects[data-related-projects-section] .related-projects__image {
  aspect-ratio: 4 / 3;
  background: color-mix(in srgb, var(--brand-secondary) 14%, var(--light-secondary));
}

.related-projects[data-related-projects-section] .related-projects__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-5);
}

.related-projects[data-related-projects-section] .related-projects__meta {
  margin-bottom: var(--space-2);
  color: var(--dark-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.07em;
}

.related-projects[data-related-projects-section] .related-projects__body h3 {
  margin: 0;
  color: var(--dark-primary);
  font-size: var(--font-size-xl);
  line-height: 1.28;
}

.related-projects[data-related-projects-section] .related-projects__body h3 a:hover {
  color: var(--brand-secondary);
  text-decoration: none;
}

.related-projects[data-related-projects-section] .related-projects__body p:last-child {
  margin-top: var(--space-3);
  color: var(--dark-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.7;
}

/* The injected block ships its own button look - square corners, system-ui,
   1.5px border - so pull the CTAs onto this site's .btn-primary/.btn-secondary. */
.related-projects[data-related-projects-section] .related-projects__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  border-width: 2px;
  border-style: solid;
  border-radius: var(--border-radius);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: normal;
}

.related-projects[data-related-projects-section] .related-projects__btn--primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--light-secondary);
}

.related-projects[data-related-projects-section] .related-projects__btn--primary:hover {
  background: color-mix(in srgb, var(--brand-primary) 85%, black);
  border-color: color-mix(in srgb, var(--brand-primary) 85%, black);
  color: var(--light-secondary);
  transform: none;
  opacity: 1;
}

.related-projects[data-related-projects-section] .related-projects__btn--primary:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.related-projects[data-related-projects-section] .related-projects__btn--secondary {
  background: transparent;
  border-color: var(--brand-secondary);
  color: var(--dark-primary);
}

.related-projects[data-related-projects-section] .related-projects__btn--secondary:hover {
  background: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: var(--brand-primary);
}

.related-projects[data-related-projects-section] .related-projects__btn--secondary:focus-visible {
  outline: 2px solid var(--brand-secondary);
  outline-offset: 2px;
}

@media (max-width: 1024px) {
  .related-projects[data-related-projects-section] .related-projects__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .related-projects[data-related-projects-section] {
    padding: var(--space-12) var(--space-4);
  }

  .related-projects[data-related-projects-section] .related-projects__header {
    text-align: left;
    max-width: none !important;
    width: 100%;
}

  .related-projects[data-related-projects-section] .related-projects__header p {
    margin-left: 0;
  }

  .related-projects[data-related-projects-section] .related-projects__grid {
    grid-template-columns: 1fr;
  }
}


/* --- Staging Banner --- */
.staging-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background-color: var(--light-tertiary);
  color: var(--brand-secondary);
  text-align: center;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-bottom: 1px solid var(--brand-secondary);
}

body.has-staging-banner {
  padding-top: 40px;
}

body.has-staging-banner .site-nav {
  top: 40px;
}


/* --- Page Content Prose --- */
.prose {
  max-width: 720px;
}

.prose p {
  margin-bottom: var(--space-4);
}

.prose ul,
.prose ol {
  list-style: disc;
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.prose ol {
  list-style: decimal;
}

.prose li {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--dark-secondary);
}

/* Long-form essay blocks (about-builder, reviews, etc.) */
.section-prose > .container.prose {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-10) clamp(var(--space-5), 4vw, var(--space-10));
  background: var(--light-secondary);
  border: 1px solid var(--dark-tertiary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
}

.section-prose > .container.prose > h2 {
  position: relative;
  margin-top: var(--space-10);
  margin-bottom: var(--space-5);
  padding-left: var(--space-5);
  font-size: var(--font-size-xl);
  letter-spacing: -0.015em;
}

.section-prose > .container.prose > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  bottom: 0.12em;
  width: 3px;
  border-radius: 2px;
  background-color: var(--brand-secondary);
}

.section-prose > .container.prose > h2:first-child {
  margin-top: 0;
}

.section-prose > .container.prose p {
  font-size: var(--font-size-base);
  line-height: 1.75;
  color: var(--dark-secondary);
  margin-bottom: var(--space-5);
}

.section-prose > .container.prose p:last-child {
  margin-bottom: 0;
}

.section-prose > .container.prose p strong {
  color: var(--dark-primary);
  font-weight: var(--font-weight-semibold);
}

.section-prose > .container.prose a {
  color: var(--dark-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-decoration-color: var(--brand-secondary);
  text-underline-offset: 2px;
}

.section-prose > .container.prose a:hover {
  color: var(--brand-tertiary);
}

.about-builder-intro > .container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-10) clamp(var(--space-5), 4vw, var(--space-10));
  background: var(--light-secondary);
  border: 1px solid var(--dark-tertiary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
}

.about-builder-intro .prose-lead {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-base);
  color: var(--dark-secondary);
  margin: var(--space-2) 0 var(--space-6);
}

.about-builder-intro h2 {
  margin-top: var(--space-6);
}

.about-builder-intro .data-table {
  margin: var(--space-6) 0;
}

.about-builder-intro .data-table td:first-child {
  width: 38%;
  font-weight: var(--font-weight-semibold);
  color: var(--dark-primary);
}

.about-builder-intro .section-actions {
  margin-top: var(--space-6);
}


/* --- Misc --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.published-date {
  font-size: var(--font-size-xs);
  color: var(--dark-secondary);
  margin-top: var(--space-4);
}


/* --- Sticky Image (overview section, desktop only) --- */
.sticky-img-container {
  align-self: start;
  height: 100%;
}

@media (min-width: 1025px) {
  .sticky-img-container .img-portrait {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-4));
  }
}

/* --- Utility Classes --- */
.text-center {
  text-align: center;
}

.mt-4 {
  margin-top: var(--space-4);
}

.mt-6 {
  margin-top: var(--space-6);
}

.mt-8 {
  margin-top: var(--space-8);
}

.mb-8 {
  margin-bottom: var(--space-8);
}

.w-full {
  width: 100%;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.gap-lg {
  gap: var(--space-12);
}

.items-center {
  align-items: center;
}

.img-landscape {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--border-radius-lg);
}

.img-portrait {
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 560px;
  height: clamp(240px, 34vw, 420px);
  display: block;
  margin-inline: auto;
  object-fit: cover;
  border-radius: var(--border-radius-lg);
}

.narrow-form {
  max-width: 640px;
  margin: 0 auto;
}

.figcaption-center {
  text-align: center;
  margin-top: var(--space-3);
}

.figure-reset {
  margin: 0;
}

.btn-full {
  width: 100%;
}


/* ============================================================
   RESPONSIVE - Tablet (≥768px)
   ============================================================ */
@media (min-width: 1025px) {
  :root {
    --font-size-3xl: 2.25rem;
    --font-size-4xl: 3rem;
  }

  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }

  .section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-preview-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .gallery-preview-featured {
    grid-row: span 2;
  }

  .gallery-preview-featured img {
    aspect-ratio: unset;
    height: 100%;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero-home {
    min-height: 500px;
    padding: var(--space-20) 0 var(--space-16);
  }

  .hero-home h1 {
    font-size: var(--font-size-4xl);
  }
}


/* ============================================================
   RESPONSIVE - Desktop (≥1024px)
   ============================================================ */
@media (min-width: 1025px) {
  /* Nav: horizontal layout */
  .nav-toggle {
    display: none;
  }

  .nav-menu {
    display: flex !important;
    position: static;
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
    align-items: center;
    gap: 0;
  }

  .nav-menu li {
    margin-bottom: 0;
  }

  .nav-menu a {
    padding: var(--space-2) var(--space-3);
    font-size: 12px;
  }

  .nav-menu a.nav-cta {
    margin-top: 0;
    min-height: 44px;
    padding: 0 var(--space-5) !important;
    font-size: 12px;
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .gallery-preview-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .tables-side-by-side {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-12);
  }
}

/* ── FAQ page: plain heading layout (legacy h2 blocks only) ─────────────── */
.faq-item > h2 { font-size: 1.125rem; font-weight: 600; line-height: 1.5;
  margin: 0 0 0.5rem; cursor: default; }

/* Subpage inline FAQ (added by tooling/migration/inline-faqs.mjs) */
#faq > .container,
#faq > .container.prose {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1.25rem, 4vw, 2rem);
  padding-right: clamp(1.25rem, 4vw, 2rem);
}

/* Subpage details/summary FAQs - match homepage .faq-question accordion */
#faq .faq-list {
  margin-top: var(--space-6);
}

#faq details.faq-item {
  border: 1px solid var(--dark-tertiary);
  border-radius: var(--border-radius);
  margin-bottom: var(--space-2);
  overflow: hidden;
  padding: 0;
  background: var(--light-secondary);
  box-shadow: none;
}

#faq details.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--dark-primary);
  line-height: var(--line-height-base);
  list-style: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  gap: var(--space-4);
}

#faq details.faq-item > summary::-webkit-details-marker {
  display: none;
}

#faq details.faq-item > summary:hover,
#faq details.faq-item[open] > summary {
  background-color: var(--light-primary);
}

#faq details.faq-item > summary::after {
  content: '+';
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-normal);
  color: var(--dark-secondary);
  flex-shrink: 0;
}

#faq details.faq-item[open] > summary::after {
  content: '−';
}

#faq details.faq-item > p {
  margin: 0 !important;
  padding: 0 var(--space-4) var(--space-3);
  color: var(--dark-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

#faq > .container.prose > h2 {
  color: var(--dark-primary);
  margin-bottom: 0.5rem;
}

#faq details.faq-item > summary:focus-visible {
  outline: 2px solid var(--brand-secondary);
  outline-offset: 2px;
}


/* phase-b brand-text */
.brand-logo-img { display: block; width: 48px; height: 48px; object-fit: contain; flex: 0 0 48px; filter: none !important; }
.brand-text { display: inline-flex; flex-direction: column; line-height: 1.15; gap: 0; margin-left: 0; color: inherit; text-decoration: none; }
.brand-developer { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
.brand-project { font-size: 1rem; font-weight: 700; }
a:has(> .brand-text), a.nav-logo, a.footer-logo, a.footer-brand, a.navbar_logo-link, a.footer_logo-link, a.navbar__brand, a.brand { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: inherit; }
.nav-logo { gap: 4px; }
.nav-logo .brand-text { margin-left: 0; }

/* fleet: nav links title-case + 12px (2026-06-05) */
.nav-menu a:not([class*="cta"]):not([class*="btn"]):not([class*="button"]){font-size:12px !important;text-transform:none !important}

/* fleet: nav collapses at tablet 1024 (2026-06-05) */
@media(min-width:1025px){.nav-menu{display:flex !important}.nav-toggle{display:none !important}}
@media(max-width:1024px){.nav-menu{display:none !important}.nav-toggle{display:flex !important}.nav-menu.is-open,.is-open .nav-menu,.nav-menu.open,.open .nav-menu,.nav-menu.active,.active .nav-menu,.nav-menu.w--open,.w--open .nav-menu,.nav-menu.on,.on .nav-menu,.nav-menu.visible,.visible .nav-menu,.nav-menu.is-visible,.is-visible .nav-menu,.nav-menu.expanded,.expanded .nav-menu,.nav-menu.show,.show .nav-menu,.nav-menu.shown,.shown .nav-menu,.nav-menu.opened,.opened .nav-menu,.nav-menu.menu-open,.menu-open .nav-menu,.nav-menu.nav-open,.nav-open .nav-menu,.nav-menu[data-nav-menu-open]{display:flex !important;flex-direction:column !important}}

/* fleet: nav brand text size cap — brand NAME <=15px so no logo text exceeds 16px (2026-06-06) */
[class*="brand-project"],[class*="brand-name"],[class*="brand-title"],[class*="brand-lockup__name"]{font-size:15px !important}
[class*="brand-developer"]{font-size:11px !important}

/* logo full-circle (ring-motif mark) */
.brand-logo-img { border-radius: 50%; }
/* Brand lockup split-line convention */
.brand-text,
.footer-brand-text,
.sow-nav__brand-text,
.sow-footer__brand-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1.08;
  min-width: 0;
}
/* Brand lockup hierarchy convention */
[class*="brand-developer"],
[class*="brand-title"],
[class*="brand-lockup__eyebrow"] {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.05 !important;
  text-transform: none !important;
}

[class*="brand-project"],
[class*="brand-subtitle"],
[class*="brand-name"],
[class*="brand-lockup__name"] {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  text-transform: none !important;
}


/* ==== contact-modal (fleet rollout — see tooling/add-contact-modal.mjs) ==== */
.cm-modal {
    /* Re-assert the UA's dialog centering: universal `* { margin: 0 }` resets
       (sattva/purva families and others) strip it, pinning the dialog top-left. */
    margin: auto;
    width: min(100%, 28rem);
    padding: 1rem;
    border: 0;
    background: transparent;
    overscroll-behavior: contain;
    --cm-accent: var(--brand-primary, #000000);
    --cm-ink: #ffffff;
}

/* Browsers without <dialog> ignore [open] and would render the form inline. */
.cm-modal:not([open]) {
    display: none;
}

/* Literal scrim: ::backdrop cannot reliably see page custom properties. */
.cm-modal::backdrop {
    background: rgba(15, 23, 42, 0.6);
}

.cm-modal__panel {
    position: relative;
    padding: 1.5rem;
    border-radius: 0.75rem;
    background: #ffffff;
    color: #1f2937;
    font-family: inherit;
    box-shadow: 0 20px 25px rgba(15, 23, 42, 0.15);
}

.cm-modal__title {
    margin: 0 0 1.25rem;
    padding-right: 2.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1f2937;
}

.cm-modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    color: #475569;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
}

.cm-modal__close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.cm-modal__close:focus-visible {
    outline: 2px solid var(--cm-accent);
    outline-offset: 2px;
}

.cm-form {
    display: grid;
    gap: 1rem;
}

.cm-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
}

.cm-form__field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f2937;
}

/* Form controls don't inherit fonts — font: inherit closes the gap. */
.cm-form input,
.cm-form textarea {
    width: 100%;
    min-width: 0;
    font: inherit;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
}

.cm-form input:focus-visible,
.cm-form textarea:focus-visible {
    outline: 2px solid var(--cm-accent);
    outline-offset: 1px;
}

.cm-form textarea {
    min-height: 5.5rem;
    resize: vertical;
}

.cm-form__submit {
    border: 0;
    border-radius: 6px;
    background: var(--cm-accent);
    color: var(--cm-ink);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
}

.cm-form__submit:hover {
    opacity: 0.92;
}

.cm-form__submit:focus-visible {
    outline: 2px solid #1f2937;
    outline-offset: 2px;
}

.cm-form__hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: #64748b;
}

.cm-form__hint a {
    color: inherit;
    text-decoration: underline;
}

/* Class-based, so it cannot fight any inline body.style.overflow use. */
body.has-modal-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    .cm-modal[open] {
        animation: cm-modal-in 160ms ease-out;
    }

    .cm-modal[open]::backdrop {
        animation: cm-modal-backdrop-in 160ms ease-out;
    }
}

@keyframes cm-modal-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
}

@keyframes cm-modal-backdrop-in {
    from {
        opacity: 0;
    }
}

/* ─── Long-form content blocks (build 2026-08-21) ─────────────────────────── */

/* Wide statistical tables must scroll inside their own box, never the page. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-4) 0 var(--space-8);
}
.table-wrap .data-table { margin: 0; min-width: 34rem; }

/* The arithmetic callouts: a worked calculation, set apart from the prose. */
blockquote.callout {
  margin: var(--space-6) 0 var(--space-8);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--brand-secondary);
  background: color-mix(in srgb, var(--brand-secondary) 8%, var(--light-secondary));
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
blockquote.callout p {
  margin: 0 0 var(--space-2);
  color: var(--dark-primary);
  line-height: var(--line-height-base);
}
blockquote.callout p:last-child { margin-bottom: 0; }

/* Inline monospace */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  padding: 0.1em 0.36em;
  border-radius: var(--border-radius-sm);
  background: var(--light-tertiary);
  word-break: break-word;
}

.prose h3 { margin: var(--space-8) 0 var(--space-3); }
.prose h4 { margin: var(--space-6) 0 var(--space-2); font-size: var(--font-size-lg); }

figure.content-figure { margin: var(--space-8) 0; }
figure.content-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius);
}

.figure-row { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .figure-row { grid-template-columns: 1fr 1fr; } }

.plan-grid { display: grid; gap: var(--space-8); margin: var(--space-8) 0; }
@media (min-width: 768px) { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
.plan-figure { margin: 0; }
.plan-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius);
  background: var(--light-secondary);
}
.plan-figure figcaption {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--dark-secondary);
}

/* The donor theme ships these class names with no rules — a form error that
   renders as unstyled body text reads as prose, not as a validation message. */
.contact-form-wrapper {
  padding: var(--space-6);
  background: var(--light-secondary);
  border: 1px solid var(--light-tertiary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
}
.field-error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--error);
}
.field-error[hidden] { display: none; }
.form-status {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}
.form-status[hidden] { display: none; }
.form-status.success { background: var(--success-bg); color: var(--success); }
.form-status.error { background: var(--error-bg); color: var(--error); }

/* Kicker line on the black homepage hero — the generic .section-subtitle grey
   (#4a4a4a) is 2.1:1 there; the brand gold clears AA at 6.6:1. */
.hero-home .hero-kicker {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  color: var(--brand-secondary);
}
.hero-home .stats-grid { margin-top: var(--space-8); }
.contact-info { min-width: 0; }

/* The homepage hero is black; the global link ink (--dark-primary) would be
   invisible there. The sister-link rewirer can inject into any first <p>. */
.hero-home a:not([class*="btn"]) {
  color: var(--brand-secondary);
  text-decoration-color: var(--brand-secondary);
}
.hero-home a:not([class*="btn"]):hover { color: var(--light-secondary); }

/* Data tables and image grids break out of the reading measure — a five-column
   comparison at 672px is clipped, and the scroll affordance is invisible. */
@media (min-width: 900px) {
  .container.prose > .table-wrap,
  .container.prose > .plan-grid,
  .container.prose > .figure-row,
  .container.prose > .gallery-grid {
    width: min(calc(100vw - 5rem), var(--max-width));
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

/* Channel-partner disclosure line in the brand lockup (nav + footer).
   Sits above the developer/project lines; inherits the lockup's own colour so
   it carries the same contrast ratio as the brand name in both contexts. */
.brand-prefix {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
  opacity: 0.85;
}
.ba-footer__brand .brand-prefix {
  color: var(--light-secondary);
  font-size: 9px;
  margin: 0 0 0.25rem;
}

/* One-line brand name (nav + footer): the developer and the project read as a
   single wordmark rather than stacking. Overrides the fleet "Brand lockup
   split-line convention" and "hierarchy convention" blocks above, which are
   !important, so these have to be !important and come last. */
.brand-text,
.ba-nav__brand-text {
  display: block !important;
  min-width: 0;
  line-height: 1.15;
}
[class*="brand-developer"],
[class*="brand-project"] {
  display: inline !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  opacity: 1 !important;
  color: inherit;
}

/* Webflow footer/nav lockup carries a legacy `width: 6rem` sized for an image
   logo; it would wrap the one-line name back onto two lines. */
a.footer_logo-link:has(.brand-text),
a.navbar_logo-link:has(.brand-text) {
  width: auto !important;
}

/* Longest names need one step down to hold a single line on a phone; every
   other site already fits at 15px, so this is invisible in practice. */
@media (max-width: 480px) {
  [class*="brand-developer"],
  [class*="brand-project"] {
    font-size: 14px !important;
  }
}

/* "One line" has to be enforced, not merely preferred: the webflow footer sits
   in a content-sized grid track that would otherwise wrap the name. */
.brand-text,
.ba-nav__brand-text {
  white-space: nowrap;
}

/* Below 360px the two longest names (Gardenia Estate - Phase 2, Residential @
   The Prestige Place) would reach the menu button; one more step clears it. */
@media (max-width: 360px) {
  [class*="brand-developer"],
  [class*="brand-project"] {
    font-size: 12px !important;
  }
}

/* ==== design port 2026-09-17: components the ported pages add ==== */
/* Card grids whose cards carry their own h2 (the page has no section heading
   above them), and card bodies that hold a list. */
.card h2{font-size:var(--font-size-xl);margin-bottom:var(--space-2)}
.card ul{list-style:disc;padding-left:var(--space-5);margin:var(--space-2) 0 0}
.card li{font-size:var(--font-size-sm);color:var(--dark-secondary);margin-bottom:var(--space-2)}
.card p + p{margin-top:var(--space-3)}
/* A stats grid inside a content section rather than the homepage stats bar. */
.section .section-header + .stats-grid,.section .prose + .stats-grid{margin-top:var(--space-8)}
.stats-grid + .prose,.stats-grid + .grid{margin-top:var(--space-8)}
/* Floor-plan cards that carry a written description under the plan. */
.floor-plan-info > p:not(.area){font-size:var(--font-size-sm);color:var(--dark-secondary)}
.floor-plan-info > p:not(.area) + p{margin-top:var(--space-3)}
/* Short highlight labels in a hero. */
.hero-badges{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-4) 0 0;padding:0;list-style:none}
.hero-badges li{padding:var(--space-1) var(--space-3);border:1px solid var(--dark-tertiary);border-radius:999px;font-size:var(--font-size-sm);color:var(--dark-secondary);background:var(--light-secondary)}
.hero-home .hero-badges li{border-color:color-mix(in srgb,var(--brand-secondary) 70%,transparent);color:var(--light-secondary);background:transparent}
.hero-home .hero-subtitle + .hero-subtitle{margin-top:var(--space-3)}
.page-hero .hero-subtitle + .hero-subtitle{margin-top:calc(-1 * var(--space-3))}
.page-hero .hero-actions{margin-top:0}
/* A closing banner that carries more than one paragraph. */
.cta-banner .prose{margin:0 auto var(--space-6);text-align:left}
.cta-banner .prose p{max-width:none}
.cta-banner .section-actions{justify-content:center}
/* Notes under a table or grid. */
.prose p.text-muted.text-sm{margin-top:var(--space-2)}
/* Lists in the text column of an image split: outside .prose the stylesheet
   strips list markers. */
.grid-2.items-center > div > ul,.grid-2.items-center > div > ol{list-style:disc;padding-left:var(--space-6);margin-bottom:var(--space-4)}
.grid-2.items-center > div > ul > li,.grid-2.items-center > div > ol > li{margin-bottom:var(--space-2);font-size:var(--font-size-sm);color:var(--dark-secondary)}
/* A long section subtitle keeps a reading measure. */
.section-header .section-subtitle{max-width:760px;margin-left:auto;margin-right:auto}
/* A long project name on the 404 panel. */
.nf-title{font-size:clamp(2rem,4.2vw,3.1rem)}
/* A project name too long for one line beside the menu button (Residential @
   The Prestige Place is 41 characters) wraps on a phone instead of pushing the
   button off the screen. A name that fits never wraps. */
@media (max-width: 480px){
  .nav-logo{flex-shrink:1;min-width:0;white-space:normal}
  .nav-logo .brand-text{white-space:normal}
}
/* From the desktop-menu breakpoint to 1199px the same long name crowds the
   menu: links wrapped onto two lines and pushed Contact past the edge at
   1025px. Tighter link padding, one-line links, and a name that may take two
   lines. */
@media (min-width: 1025px) and (max-width: 1199px){
  .nav-container{gap:var(--space-3)}
  .nav-menu a{padding-left:var(--space-2);padding-right:var(--space-2);white-space:nowrap}
  .nav-logo{flex-shrink:1;min-width:0;white-space:normal}
  .nav-logo .brand-text{white-space:normal}
}
.contact-info .map-placeholder img{display:block;width:100%;height:auto}
/* ---- second batch (Windgate, Dalasagere, Falcon City Luxe) ---- */
/* A stats bar of three figures. */
@media (min-width: 768px){.stats-grid.stats-grid-3{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 767px){.stats-grid.stats-grid-3{grid-template-columns:1fr;gap:var(--space-1)}.stats-grid.stats-grid-3 .stat-item{padding:var(--space-2)}}
/* Plans and maps beside text show whole, letterboxed, never cropped. */
.split-media .img-portrait.img-contain{object-fit:contain;background-color:var(--light-primary);padding:var(--space-2);box-sizing:border-box}
/* A plan, map or price sheet on its own: whole, and no larger than its file. */
* + .figure-plan{margin-top:var(--space-8)}
.figure-plan a{display:block}
.figure-plan img{display:block;width:auto;height:auto;max-width:min(100%,920px);max-height:560px;margin-inline:auto;border-radius:var(--border-radius-lg)}
/* A gallery of four photos: one row on a desktop. */
@media (min-width: 1025px){.gallery-grid.gallery-grid-4{grid-template-columns:repeat(4,1fr)}}
/* Price cards: a size list and an enquiry button. */
.price-card h2,.price-card h3{font-size:var(--font-size-xl);margin-bottom:var(--space-3)}
.price-card ul{margin:0 0 var(--space-4)}
.price-card .btn-primary{width:100%;justify-content:center}
/* Grids of tiles and galleries under a paragraph. */
.prose + .gallery-grid,.prose + .stats-grid{margin-top:var(--space-8)}
/* FAQ answers of several paragraphs, and an action row under a details FAQ. */
.faq-answer-inner p + p{margin-top:var(--space-2)}
#faq .faq-list + .section-actions{margin-top:var(--space-6)}

/* ==== build: site-nav family content components ==== */
.grid-2 .section-subtitle{margin-bottom:var(--space-4)}
.prose > * + h3{margin-top:var(--space-6)}
.prose .table-wrapper{margin:var(--space-2) 0 var(--space-6)}
.section-header + .prose,.section-header + .table-wrapper{margin-top:0}
.table-wrapper + .prose,.grid + .prose,.prose + .grid,.prose + .table-wrapper,.table-wrapper + .grid,.grid + .grid{margin-top:var(--space-8)}
.split-media figcaption{margin-top:var(--space-3);font-size:var(--font-size-sm);color:var(--dark-secondary);text-align:center}
.floor-plan-card img{width:100%}
.gallery-grid + .section-actions,.grid + .section-actions{margin-top:var(--space-8)}
.contact-info-item{display:flex;gap:var(--space-3);margin-bottom:var(--space-6)}
.contact-info-item > div{min-width:0}
.contact-info-item h3{font-size:var(--font-size-base);margin-bottom:var(--space-1)}
.map-placeholder{margin-top:var(--space-6);border:1px solid var(--dark-tertiary);border-radius:var(--border-radius-lg);overflow:hidden}
.field-error{display:block;margin-top:var(--space-1);font-size:var(--font-size-xs);color:var(--error)}

/* ---------- Phone widths: nothing may push the page wider than the screen ---------- */
/* Long unbroken words (a RERA number, a web address) wrap instead of running off the screen. */
body {
  overflow-wrap: break-word;
}

/* Table cells keep whole words; a wide table scrolls inside its wrapper instead. */
th,
td {
  overflow-wrap: normal;
}

/* Some pages wrap tables in .table-wrap rather than the theme's .table-wrapper: scroll those too. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* A 1fr grid column otherwise grows to fit its longest word. */
.grid > *,
.contact-grid > *,
.footer-grid > *,
.tables-side-by-side > * {
  min-width: 0;
}

/* The text beside a contact icon is a flex item: let it shrink so a RERA number wraps inside it. */
.contact-info-item > div {
  min-width: 0;
}

/* Action buttons are set never to shrink; cap them at the row width so a long label wraps. */
.section-actions > .btn-primary,
.section-actions > .btn-secondary,
.section-actions > .btn-white {
  max-width: 100%;
}

@media (max-width: 640px) {
  /* Key/value tables with a fixed-width label column: the value may break a long token
     without squeezing any other word. */
  .details-table td,
  .about-builder-intro .data-table td:nth-child(2) {
    overflow-wrap: anywhere;
  }
}

/* The 404 title is still ~36px on a narrow phone: one long word can make the
   panel's grid column wider than the panel, which has overflow:hidden and
   clips it. The head's rule is inline, so this needs the extra class. */
@media (max-width: 400px){.nf-panel .nf-title{font-size:1.75rem}}

/* A RERA number in the 404 copy is one unbreakable token wide enough to push
   the panel's grid column past the panel, which clips it. The inline rule
   only breaks tokens inside .nf-path. */
.nf-copy p{overflow-wrap:anywhere}