/* HM @ Yelahanka - microsite styles
   Brand colors: accent #FDE703 (HM yellow, background/accent only), dark #2B2926 (HM charcoal).
   WCAG AA: yellow is NEVER used as text on a light surface - it is a BACKGROUND that carries
   charcoal text (buttons, CTAs, nav CTA, form submit). Body text, headings, and links on light
   surfaces are charcoal. Yellow appears as TEXT only on the dark (charcoal) footer / dark
   section, where it passes 11:1. Source of truth: builders/hm-constructions/hm-constructions.json
   -> branding.colors. HM uses a system font stack (font.family "system", selfHosted false), so
   there are no @font-face declarations - the font vars resolve to the system UI stack. */

:root {
  /* Canonical 3+3+3+2 brand tokens, recoloured to HM with role-preserving, WCAG-AA values. */
  --brand-primary:   #FDE703;   /* HM yellow - accent / button & CTA BACKGROUND (with charcoal text) */
  --brand-secondary: #2B2926;   /* HM charcoal - darker accent, hover, headings */
  --brand-tertiary:  #FEF9CC;   /* pale yellow-cream - light tints, cream sections, hover bg */
  --dark-primary:    #2B2926;   /* HM charcoal - body text, headlines, dark surfaces */
  --dark-secondary:  #4A4744;   /* secondary text (>=9:1 on white) */
  --dark-tertiary:   #6B6864;   /* muted text (>=5:1 on white) */
  --light-primary:   #FAFAF8;   /* off-white page background */
  --light-secondary: #FFFFFF;   /* card / elevated surface */
  --light-tertiary:  #F0EFEA;   /* alt panel / nested surface */
  --state-success:   #176A2C;   /* form success */
  --state-error:     #861123;   /* form error */
  /* Derived border tint */
  --brand-line: #e6e4dd;
  --shadow-soft: 0 16px 48px rgba(20, 20, 20, 0.08);
  --shadow-card: 0 6px 22px rgba(20, 20, 20, 0.07);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--dark-primary);
  background: var(--light-secondary);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--dark-secondary);
  text-decoration: none;
  transition: color 0.18s ease;
}

a:hover {
  color: var(--dark-primary);
}

p a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.6em;
  color: var(--dark-primary);
}

h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p {
  margin: 0 0 1em;
}

ul, ol {
  margin: 0 0 1em;
  padding-left: 1.4em;
}

li {
  margin-bottom: 0.4em;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.page-updated {
  margin: 0.6rem 0 1.2rem;
  color: var(--dark-primary);
  font-size: 0.92rem;
  font-family: var(--font-sans);
}

.page-updated time {
  font-weight: 600;
}

/* ---------- NAV ---------- */
.ba-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--light-secondary);
  border-bottom: 1px solid var(--brand-line);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
}

.ba-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  max-width: 1280px;
  margin: 0 auto;
}

.ba-nav__brand {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--dark-primary);
}

.ba-nav__brand img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
}

.ba-nav__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.ba-nav__brand-developer {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dark-secondary);
}

.ba-nav__brand-project {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark-primary);
}

.ba-nav__links {
  display: flex;
  align-items: center;
  gap: 1.3rem;
}

.ba-nav__link {
  color: var(--dark-secondary);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.ba-nav__link:hover {
  color: var(--dark-secondary);
}

.ba-nav__cta {
  background: var(--brand-primary);
  color: var(--dark-primary);
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ba-nav__cta:hover {
  color: var(--dark-primary);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-primary) 45%, transparent);
}

.ba-nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--brand-line);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
}

.ba-nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--dark-primary);
  margin: 4px 0;
  border-radius: 2px;
}

@media (max-width: 1024px) {
  .ba-nav__links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--light-secondary);
    border-bottom: 1px solid var(--brand-line);
    padding: 0.5rem 0;
  }
  .ba-nav.is-open .ba-nav__links {
    display: flex;
  }
  .ba-nav__link, .ba-nav__cta {
    padding: 0.85rem 1.25rem;
    border-radius: 0;
    text-align: left;
    width: 100%;
  }
  .ba-nav__cta {
    margin: 0.4rem 1.25rem;
    width: auto;
    border-radius: 999px;
    text-align: center;
  }
  .ba-nav__toggle {
    display: inline-block;
  }
}

/* ---------- HERO (split layout: image left, content right) ---------- */
.ba-hero {
  background: linear-gradient(180deg, var(--brand-tertiary) 0%, var(--light-secondary) 100%);
  border-bottom: 1px solid var(--brand-line);
}

.ba-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  padding: clamp(2.4rem, 5vw, 4.2rem) 1.25rem;
  max-width: 1280px;
  margin: 0 auto;
}

.ba-hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--light-tertiary);
}

.ba-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.ba-hero__tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark-secondary);
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.ba-hero__title {
  margin: 0 0 0.6rem;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
}

.ba-hero__lede {
  font-size: 1.05rem;
  color: var(--dark-secondary);
  max-width: 56ch;
}

.ba-hero__actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}

.ba-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--brand-line);
}

.ba-hero__stat-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-tertiary);
  margin-bottom: 0.25rem;
}

.ba-hero__stat-value {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--dark-primary);
}

@media (max-width: 1024px) {
  .ba-hero__inner {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  .ba-hero__media {
    order: -1;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  font-family: var(--font-sans);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn-primary {
  background: var(--brand-primary);
  color: var(--dark-primary);
}

.btn-primary:hover {
  color: var(--dark-primary);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-primary) 40%, transparent);
}

.btn-outline {
  background: transparent;
  color: var(--dark-primary);
  border-color: var(--dark-secondary);
}

.btn-outline:hover {
  background: var(--dark-primary);
  color: var(--light-secondary);
}

.btn-dark {
  background: var(--dark-primary);
  color: var(--light-secondary);
}

.btn-dark:hover {
  color: var(--light-secondary);
  background: var(--dark-secondary);
}

/* ---------- Sections ---------- */
.section {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.section--cream {
  background: var(--brand-tertiary);
}

.section--dark {
  background: var(--dark-primary);
  color: var(--brand-tertiary);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
  color: var(--light-secondary);
}

.section--dark a {
  color: var(--brand-primary);
}

.section__label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark-secondary);
  margin-bottom: 0.5rem;
}

.section__title {
  margin: 0 0 1rem;
}

.section__lede {
  font-size: 1.05rem;
  color: var(--dark-secondary);
  max-width: 60ch;
  margin: 0 0 1.8rem;
}

.section--dark .section__lede {
  color: var(--light-tertiary);
}

.section__actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* ---------- Highlights grid ---------- */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.highlight-card {
  background: var(--light-secondary);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow-card);
}

.section--cream .highlight-card {
  background: var(--light-secondary);
}

.highlight-card__num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--dark-secondary);
  display: block;
  margin-bottom: 0.2rem;
}

.highlight-card__label {
  font-size: 0.94rem;
  color: var(--dark-secondary);
}

/* ---------- Two column ---------- */
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.2rem;
  align-items: start;
}

.two-col__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

@media (max-width: 1024px) {
  .two-col {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}

/* ---------- Gallery (6 cards) ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.gallery-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--light-tertiary);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 0;
  padding: 0;
}

.gallery-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.gallery-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: var(--dark-primary);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1.5rem;
}

.lightbox.is-open {
  display: flex;
}

.lightbox__img {
  max-width: 92vw;
  max-height: 84vh;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px var(--dark-primary);
}

.lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--light-secondary);
  color: var(--dark-primary);
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.3rem;
  cursor: pointer;
}

/* ---------- Floor plans (3 cards) ---------- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 1.5rem;
}

.plan-card {
  background: var(--light-secondary);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.plan-card__media {
  background: var(--light-tertiary);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.plan-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.5rem;
}

.plan-card__body {
  padding: 1.1rem 1.3rem 1.4rem;
}

.plan-card__title {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
}

.plan-card__meta {
  color: var(--dark-secondary);
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0 0 0.6rem;
}

.plan-card__desc {
  color: var(--dark-secondary);
  font-size: 0.95rem;
}

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

/* ---------- Amenities ---------- */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.7rem;
  margin-top: 1.5rem;
}

.amenity-chip {
  background: var(--light-secondary);
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
  color: var(--dark-secondary);
}

.section--cream .amenity-chip {
  background: var(--light-secondary);
}

/* ---------- Data table ---------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0;
  background: var(--light-secondary);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--brand-line);
  font-size: 0.95rem;
}

.data-table th {
  background: var(--brand-tertiary);
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--dark-primary);
}

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

/* ---------- FAQ ---------- */
.faq-list {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.7rem;
}

.faq-item {
  background: var(--light-secondary);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-md);
  padding: 0.2rem 1.2rem;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  color: var(--dark-primary);
  position: relative;
  padding-right: 2rem;
}

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

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 1rem;
  font-size: 1.4rem;
  color: var(--dark-secondary);
  transition: transform 0.2s ease;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item__answer {
  padding: 0 0 1rem;
  color: var(--dark-secondary);
  font-size: 0.96rem;
  margin: 0;
}

/* ---------- Contact form ---------- */
.form-card {
  background: var(--light-secondary);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-soft);
  max-width: 720px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
  color: var(--dark-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--dark-primary);
  background: var(--light-secondary);
  transition: border-color 0.15s ease;
}

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

.field-error {
  display: block;
  color: var(--state-error);
  font-size: 0.82rem;
  margin-top: 0.3rem;
  min-height: 1em;
}

.form-submit {
  background: var(--brand-primary);
  color: var(--dark-primary);
  border: 0;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-submit:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-primary) 45%, transparent);
}

.form-status {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}

.form-status.success, #form-message.success {
  background: color-mix(in srgb, var(--state-success) 12%, transparent);
  color: var(--state-success);
  border: 1px solid color-mix(in srgb, var(--state-success) 35%, transparent);
}

.form-status.error, #form-message.error {
  background: color-mix(in srgb, var(--state-error) 12%, transparent);
  color: var(--state-error);
  border: 1px solid color-mix(in srgb, var(--state-error) 35%, transparent);
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- Footer ---------- */
.ba-footer {
  background: var(--dark-primary);
  color: var(--light-tertiary);
  padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
}

.ba-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.ba-footer__brand img {
  width: 48px;
  height: 48px;
  margin-bottom: 0.6rem;
  border-radius: 6px;
}

.ba-footer__brand .footer-heading {
  color: var(--light-secondary);
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
}

.ba-footer__brand p {
  color: var(--light-tertiary);
  font-size: 0.9rem;
}

.ba-footer__col h4,
.ba-footer__col p.footer-heading {
  font-family: var(--font-sans);
  color: var(--light-secondary);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
  font-weight: 600;
}

.ba-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ba-footer__col li {
  margin-bottom: 0.5rem;
}

.ba-footer__col a {
  color: var(--light-tertiary);
  font-size: 0.92rem;
}

.ba-footer__col a:hover {
  color: var(--brand-primary);
}

.ba-footer__disclaimer {
  border-top: 1px solid var(--light-secondary);
  padding-top: 1.4rem;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--brand-tertiary) 65%, transparent);
  line-height: 1.6;
}

.ba-footer__copy {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--brand-tertiary) 65%, transparent);
}

@media (max-width: 1024px) {
  .ba-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .ba-footer__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Page hero (subpages) ---------- */
.page-hero {
  background: linear-gradient(180deg, var(--brand-tertiary) 0%, var(--light-secondary) 100%);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--brand-line);
}

.page-hero__breadcrumb {
  font-size: 0.85rem;
  color: var(--dark-tertiary);
  margin-bottom: 0.6rem;
}

.page-hero__breadcrumb a {
  color: var(--dark-secondary);
}

.page-hero__title {
  margin: 0 0 0.4rem;
}

.page-hero__lede {
  font-size: 1.05rem;
  color: var(--dark-secondary);
  max-width: 60ch;
}

.page-hero--with-form .container {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}

.page-hero--with-form .form-card {
  margin: 0;
}

@media (max-width: 1024px) {
  .page-hero--with-form .container {
    grid-template-columns: 1fr;
  }
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: 0.6rem 1rem;
  background: var(--dark-primary);
  color: var(--light-secondary);
  border-radius: 6px;
  z-index: 99;
}

/* ---------- Closing CTA ---------- */
.closing-cta {
  background: var(--dark-primary);
  color: var(--light-secondary);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  text-align: center;
}

.closing-cta h2 {
  color: var(--light-secondary);
  margin-bottom: 0.6rem;
}

.closing-cta p {
  color: var(--light-tertiary);
  max-width: 50ch;
  margin: 0 auto 1.4rem;
}

/* ---------- Map embed ---------- */
.map-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--brand-line);
  background: var(--light-tertiary);
}

.map-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* fleet: nav links title-case + 12px (2026-06-05) */
.ba-nav__link{font-size:12px !important;text-transform:none !important}

/* fleet: nav collapses at tablet 1024 (2026-06-05) */
@media(min-width:1025px){.ba-nav__links{display:flex !important}.ba-nav__toggle{display:none !important}}
@media(max-width:1024px){.ba-nav__links{display:none !important}.ba-nav__toggle{display:inline-block !important}.ba-nav__links.is-open,.is-open .ba-nav__links,.ba-nav__links.open,.open .ba-nav__links,.ba-nav__links.active,.active .ba-nav__links,.ba-nav__links.w--open,.w--open .ba-nav__links,.ba-nav__links.on,.on .ba-nav__links,.ba-nav__links.visible,.visible .ba-nav__links,.ba-nav__links.is-visible,.is-visible .ba-nav__links,.ba-nav__links.expanded,.expanded .ba-nav__links,.ba-nav__links.show,.show .ba-nav__links,.ba-nav__links.shown,.shown .ba-nav__links,.ba-nav__links.opened,.opened .ba-nav__links,.ba-nav__links.menu-open,.menu-open .ba-nav__links,.ba-nav__links.nav-open,.nav-open .ba-nav__links,.ba-nav__links[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}
/* 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;
}

/* WCAG AA (inert on HM - no related-projects block is rendered): if ever used, the meta
   label and primary button must avoid yellow-on-white (yellow #FDE703 as text fails badly).
   --brand-secondary is HM charcoal #2B2926 (>=11:1 on white), so these rules stay safe. */
.related-projects .related-projects__meta { color: var(--brand-secondary); }
.related-projects .related-projects__btn--primary { background: var(--brand-secondary); border-color: var(--brand-secondary); color: var(--light-secondary); }

/* WCAG AA fix: in-content list links. Global `p a` already underlines prose links inside
   paragraphs; list-item links in the body (e.g. the hmconstructions.com developer link on
   /contact and /about-builder, the K-RERA link) need the same affordance — their colour vs
   surrounding body text is < 3:1, so the underline is what distinguishes them. Scoped to
   .section content lists, so nav/footer/breadcrumb/related-project links are untouched.
   HM's yellow palette is unchanged. */
.section li a {
  text-decoration: underline;
  text-underline-offset: 2px;
}