/* Brigade Banashankari - microsite styles
   Brand colors: Brigade blue family. Source palette builders/brigade-group branding
   (brand.primary #0067AD, brand.secondary #F8C318 yellow, brand.tertiary #1D1D1B).
   #0067AD is 5.93:1 on white, so --brand-primary stays #0067AD for text/links/CTA fills;
   --brand-secondary is the deeper Brigade blue #00568F (7.70:1) for hover/accents. The
   brand yellow #F8C318 fails 4.5:1 on white (1.64:1), so it is NOT used as a text/UI-fill
   token — the UI shell stays on the blue family, matching the canonical fleet. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/inter-var.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/inter-var.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/inter-var.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/inter-var.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/playfair-var.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/playfair-var.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/playfair-var.woff2") format("woff2");
}

@font-face { font-family: "Inter Fallback"; src: local("Arial"); ascent-override: 90.00%; descent-override: 22.43%; line-gap-override: 0.00%; size-adjust: 107.12%; }
@font-face { font-family: "Playfair Display Fallback"; src: local("Georgia"); ascent-override: 97.25%; descent-override: 22.56%; line-gap-override: 0.00%; size-adjust: 109.94%; }


:root {
  /* Canonical 3+3+3+2 brand tokens. Source of truth:
     builders/brigade-group/brigade-group.json -> branding.colors.brand
     (#0067AD / #F8C318 / #1D1D1B). #0067AD already clears WCAG AA on white (5.93:1);
     the secondary maps to a deeper Brigade blue for hover/accent headroom; the brand
     yellow is decorative-only (1.64:1 on white) and is not bound to a UI-fill token. */
  --brand-primary:   #0067AD;   /* Brigade blue - main brand, links, CTA fills (5.93:1 on white) */
  --brand-secondary: #00568F;   /* deep Brigade blue - hover, accents (7.70:1 on white) */
  --brand-tertiary:  #E6F0F8;   /* pale Brigade blue - light tints, hover bg */
  --dark-primary:    #171717;   /* ink - body text, headlines */
  --dark-secondary:  #3F3F3F;   /* secondary text */
  --dark-tertiary:   #5C5C5C;   /* muted text */
  --light-primary:   #F6FAFD;   /* cool off-white page background */
  --light-secondary: #FFFFFF;   /* card / elevated surface */
  --light-tertiary:  #E4EEF5;   /* alt panel / nested surface */
  --state-success:   #176A2C;   /* form success */
  --state-error:     #861123;   /* form error */
  /* Derived cool border tint between light-tertiary and dark-tertiary */
  --brand-line: #d7e3ec;
  --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: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Playfair Display", "Playfair Display Fallback", Georgia, "Times New Roman", 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;
}

.closing-cta a {
  color: var(--light-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.closing-cta a:hover { color: #fff; }

/* ---------- 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 fix: the related-projects meta label is small bold (.72rem/700) text on a
   white card. --brand-primary blue (#0067AD) clears 4.5:1, but --brand-secondary
   (#00568F → 7.70:1) gives extra headroom for the small-bold size; staying on-brand
   and within the canonical 9 tokens. Higher specificity (.related-projects scope)
   beats the inline component rule; dark-variant meta keeps its own on-dark colour. */
.related-projects .related-projects__meta { color: var(--brand-secondary); }
/* Primary related-projects button: white text on --brand-secondary (#00568F → 7.70:1)
   for a confident, high-contrast CTA on the white card. */
.related-projects .related-projects__btn--primary { background: var(--brand-secondary); border-color: var(--brand-secondary); }

/* WCAG AA fix: footer link hover. The footer sits on --dark-primary (#171717); the
   --brand-primary blue (#0067AD) is only ~3.0:1 there. On the dark band only,
   hover to a lighter Brigade blue (#3D9BE0 → 5.94:1) — same hue, on-brand, AA-clear. */
.ba-footer__col a:hover { color: #3D9BE0; }

/* WCAG AA fix: primary-CTA button text. The Brigade blue fill --brand-primary (#0067AD)
   would carry dark ink (#171717) by default → fails 4.5:1. White text on the same blue is
   5.93:1 ✓. Applies to the pill CTAs that use the blue fill: .btn-primary, the nav contact
   CTA, and the form submit. */
.btn-primary,
.btn-primary:hover,
.ba-nav__cta,
.ba-nav__cta:hover,
.form-submit { color: #ffffff; }

/* 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 K-RERA verification link in the
   diligence checklists) 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. */
.section li a {
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ==== 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, #0067AD);
    --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;
    }
}

/* ---------- Build additions (2026-08-25) ----------
   Three classes the fleet markup uses but no stylesheet ever defined
   (.content-figure, figure/figcaption, blockquote), plus a .map-frame
   override: the inherited 16/9 `cover` rule cropped the location map, so it
   now sizes to its own intrinsic aspect and is shown whole. */
figure {
  margin: 0;
}

.content-figure {
  margin: 1.6rem auto 1.9rem;
  max-width: 680px;
}

.content-figure img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--brand-line);
}

figcaption {
  margin-top: 0.6rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--dark-tertiary);
  text-align: center;
}

.map-frame {
  aspect-ratio: auto;
  max-width: 760px;
  height: auto;
  margin: 1.6rem auto 1.9rem;
}

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

blockquote.callout {
  margin: 1.5rem 0;
  padding: 1rem 1.3rem;
  border-left: 3px solid var(--brand-primary);
  background: var(--brand-tertiary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.section--cream blockquote.callout,
blockquote.callout + blockquote.callout {
  background: var(--light-secondary);
}

blockquote.callout p {
  margin: 0;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--light-tertiary);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  word-break: break-word;
}

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

/* ---------- Wide-table overflow (2026-08-25) ----------
   Data tables on these pages carry three columns of prose and were pushing the
   whole document sideways at 390px. The table scrolls inside its own box now,
   so the page body never scrolls horizontally. .gcmp-table is the comparison-
   guide table, which loads this stylesheet from ../css/styles.css. */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.4rem 0 1.8rem;
}

.table-wrap > .data-table {
  margin: 0;
  min-width: 34rem;
}

@media (max-width: 720px) {
  .gcmp-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* A bare RERA registration number is a single 37-character token with no break
   opportunity, and at 390px it pushed the document 15px sideways. break-word
   (not anywhere) only breaks a token that cannot fit on a line of its own, so
   normal prose ragging is untouched and table columns are not starved. */
p, li, dd, figcaption, .faq-item__answer, .plan-card__desc, .highlight-card__label {
  overflow-wrap: break-word;
}