/* DNR Sarjapur Road - microsite styles
   Bespoke theme, built for this site rather than cloned from a fleet sibling.
   DNR Corporation is a first-of-its-developer site, so nothing is inherited.

   Brief: modern, minimalistic, simple.
   - One typeface. Plus Jakarta Sans, variable 300-800, latin subset, self-hosted
     as a single 27 KB file. No display serif anywhere: hierarchy comes from size,
     weight and space, not from a second family.
   - Square geometry. --radius is 0 throughout. Structure is drawn with 1px
     hairlines; there are no drop shadows on any surface.
   - Near-monochrome. One accent, used sparingly.

   Brand colours: DNR's mark is a yellow-green, sampled off
   builders/dnr-corporation/dnr-corporation-logo.png as #84C048. That raw value is
   only 2.18:1 on white and fails AA for text or for a filled button, so it is NOT
   used as a UI colour. --brand-primary is the AA-tuned darker green #527A2A
   (5.03:1 on white, and the same 5.03:1 for white text on a filled button), with
   --brand-secondary #426122 (7.08:1) for hover and accents. The raw brand green
   survives only as --brand-mark, on non-text surfaces. */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
}

:root {
  /* 3+3+3+2 brand tokens, same contract as the rest of the fleet. */
  --brand-primary:   #527A2A;   /* AA-tuned DNR green - links, CTA fills, accents */
  --brand-secondary: #426122;   /* deeper green - hover, active */
  --brand-tertiary:  #EEF3E7;   /* pale green wash - accent panels */
  --dark-primary:    #14171A;   /* ink - body text and headlines */
  --dark-secondary:  #3A4048;   /* secondary text */
  --dark-tertiary:   #5A6169;   /* muted text, captions (6.11:1 on paper) */
  --light-primary:   #FCFCFB;   /* paper - page background */
  --light-secondary: #FFFFFF;   /* surface - cards, tables */
  --light-tertiary:  #F4F5F2;   /* panel - alternating sections */
  --state-success:   #1B6B33;
  --state-error:     #97121F;

  --brand-mark: #84C048;        /* raw DNR green. Non-text surfaces only. */
  --line: #E4E6E1;              /* hairline */
  --line-strong: #C9CDC3;       /* emphasised hairline */

  --radius: 0;                  /* the theme is square. Deliberate. */
  --measure: 44rem;             /* prose measure cap. Absolute, not ch: this face has
                                   wide tabular figures, so 1ch overstates by ~45%. */
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, Arial, sans-serif;
  --font-sans: var(--font);
  --font-display: var(--font);
  --font-body: var(--font);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.72;
  color: var(--dark-primary);
  background: var(--light-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums lining-nums;
}

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

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--dark-primary);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.14;
  margin: 0 0 0.7em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); font-weight: 700; letter-spacing: -0.038em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.12rem, 1.7vw, 1.3rem); letter-spacing: -0.015em; margin-top: 2.2rem; }
h4 { font-size: 1.02rem; letter-spacing: -0.005em; margin-top: 1.8rem; }

p { margin: 0 0 1.15rem; max-width: var(--measure); }
strong { font-weight: 650; color: var(--dark-primary); }
em { font-style: italic; }

a { color: var(--brand-primary); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--brand-secondary); text-decoration: underline; }
p a, li a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

ul, ol { margin: 0 0 1.2rem; padding-left: 1.15rem; max-width: var(--measure); }
li { margin-bottom: 0.5rem; }
li::marker { color: var(--line-strong); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: var(--light-tertiary);
  border: 1px solid var(--line);
  padding: 0.06em 0.34em;
  word-break: break-word;
}
.section--cream code { background: var(--light-secondary); }

blockquote.callout {
  margin: 1.7rem 0;
  padding: 1.05rem 0 1.05rem 1.35rem;
  border-left: 2px solid var(--brand-primary);
  max-width: var(--measure);
}
blockquote.callout p { margin: 0; font-size: 1.05rem; color: var(--dark-secondary); }

figure { margin: 0; }
.content-figure { margin: 2rem 0 2.2rem; max-width: 680px; }
.content-figure img { width: 100%; border: 1px solid var(--line); }
figcaption {
  margin-top: 0.65rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--dark-tertiary);
  letter-spacing: 0.005em;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--dark-primary);
  color: var(--light-secondary);
  padding: 0.7rem 1.1rem;
  z-index: 200;
}
.skip-link:focus { left: 0; }

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

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.6rem; }

/* Body copy runs as a single measured column. Sections therefore sit in a
   narrower container than the hero, nav and footer - the width change between
   full-bleed chrome and the reading column is the layout, not an accident. */
.section > .container,
.closing-cta > .container { max-width: 960px; }

.page-updated {
  margin: 0 0 1.4rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dark-tertiary);
}

/* ---------- Nav ---------- */
.ba-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(252, 252, 251, 0.92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.ba-nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.ba-nav__brand { display: flex; align-items: center; gap: 0.65rem; color: var(--dark-primary); }
.ba-nav__brand:hover { color: var(--dark-primary); text-decoration: none; }
.ba-nav__brand img { width: 34px; height: 34px; }
.ba-nav__brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.ba-nav__brand-developer {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dark-tertiary);
}
.ba-nav__brand-project { font-size: 0.98rem; font-weight: 650; letter-spacing: -0.02em; }
.ba-nav__links { display: flex; align-items: center; gap: 0.15rem; }
.ba-nav__link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--dark-secondary);
  padding: 0.5rem 0.6rem;
  border-bottom: 2px solid transparent;
}
.ba-nav__link:hover {
  color: var(--dark-primary);
  border-bottom-color: var(--brand-mark);
  text-decoration: none;
}
.ba-nav__cta {
  margin-left: 0.7rem;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--light-secondary);
  background: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  padding: 0.55rem 1.15rem;
}
.ba-nav__cta:hover {
  background: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: var(--light-secondary);
  text-decoration: none;
}
.ba-nav__toggle {
  display: none;
  width: 40px;
  height: 34px;
  padding: 0;
  background: none;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.ba-nav__toggle span { display: block; width: 16px; height: 1.5px; background: var(--dark-primary); }

@media (max-width: 1024px) {
  .ba-nav__toggle { display: flex; }
  .ba-nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--light-secondary);
    border-bottom: 1px solid var(--line);
    padding: 0.4rem 1.6rem 1.1rem;
    display: none;
  }
  .ba-nav.is-open .ba-nav__links { display: flex; }
  .ba-nav__link { padding: 0.75rem 0; font-size: 15px; border-bottom: 1px solid var(--line); }
  .ba-nav__link:hover { border-bottom-color: var(--line); }
  .ba-nav__cta { margin: 0.9rem 0 0; text-align: center; font-size: 14px; }
}

/* ---------- Home hero ---------- */
.ba-hero { border-bottom: 1px solid var(--line); background: var(--light-primary); }
.ba-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5.5rem) 1.6rem clamp(3rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.ba-hero__content { min-width: 0; }

.ba-hero__tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand-secondary);
  border-top: 2px solid var(--brand-mark);
  padding-top: 0.55rem;
  margin-bottom: 1.5rem;
}
.ba-hero__title { margin-bottom: 0.55rem; }
.ba-hero__lede {
  font-size: 1.06rem;
  color: var(--dark-secondary);
  max-width: 34rem;
  margin-bottom: 2rem;
}
.ba-hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 2.6rem; }
.ba-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.ba-hero__stats > div { padding: 1.1rem 1rem 0 0; }
.ba-hero__stat-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dark-tertiary);
  margin-bottom: 0.3rem;
}
.ba-hero__stat-value { display: block; font-size: 1.08rem; font-weight: 650; letter-spacing: -0.02em; }
.ba-hero__media { border: 1px solid var(--line); }
.ba-hero__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

@media (max-width: 900px) {
  .ba-hero__inner { grid-template-columns: 1fr; }
  .ba-hero__media { order: -1; }
}
@media (max-width: 560px) {
  .ba-hero__stats { grid-template-columns: 1fr; }
  .ba-hero__stats > div { border-bottom: 1px solid var(--line); padding-bottom: 0.9rem; }
  .ba-hero__stats > div:last-child { border-bottom: 0; }
}

/* ---------- Subpage hero ---------- */
.page-hero {
  padding: clamp(2.8rem, 5vw, 4.4rem) 0 clamp(2.2rem, 4vw, 3.2rem);
  border-bottom: 1px solid var(--line);
}
.page-hero__content { min-width: 0; }

.page-hero__breadcrumb {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-tertiary);
  margin-bottom: 1.2rem;
}
.page-hero__breadcrumb a { color: var(--dark-tertiary); text-decoration: none; }
.page-hero__breadcrumb a:hover { color: var(--brand-secondary); }
.page-hero__title { font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom: 0.5rem; }
.page-hero__lede { font-size: 1.06rem; color: var(--dark-secondary); max-width: 44rem; margin-bottom: 0; }
.page-hero--with-form .container {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) { .page-hero--with-form .container { grid-template-columns: 1fr; } }

/* ---------- Sections ---------- */
.section { padding: clamp(3.2rem, 6vw, 5rem) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section--cream { background: var(--light-tertiary); border-top: 1px solid var(--line); }
.section--cream + .section { border-top: 1px solid var(--line); }

.section__label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-secondary);
  margin-bottom: 0.95rem;
}
.section__label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--brand-mark);
  vertical-align: 0.25em;
  margin-right: 0.6rem;
}
.section__title { max-width: 18em; }
.section h2 { max-width: 18em; }
.section__lede { font-size: 1.06rem; color: var(--dark-secondary); }
.section__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: 0.015em;
  padding: 0.78rem 1.5rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--light-secondary);
}
.btn-primary:hover {
  background: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: var(--light-secondary);
}
.btn-outline {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--dark-primary);
}
.btn-outline:hover {
  background: var(--dark-primary);
  border-color: var(--dark-primary);
  color: var(--light-secondary);
}

/* ---------- Highlights ---------- */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  margin: 2.2rem 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.highlight-card {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 1.4rem;
  background: var(--light-secondary);
}
.section--cream .highlight-card { background: var(--light-secondary); }
.highlight-card__num {
  display: block;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 0.45rem;
}
.highlight-card__label { display: block; font-size: 0.86rem; line-height: 1.5; color: var(--dark-tertiary); }

/* ---------- Tables ---------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6rem 0 2rem;
  background: var(--light-secondary);
  border: 1px solid var(--line);
  font-size: 0.93rem;
}
.data-table th, .data-table td {
  text-align: left;
  padding: 0.82rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.data-table th {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dark-tertiary);
  background: var(--light-tertiary);
  border-bottom: 1px solid var(--line-strong);
}
.section--cream .data-table th { background: var(--light-primary); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td:first-child { color: var(--dark-secondary); }

/* A comparison matrix carries its row labels as <th scope="row"> so every data
   cell has both a column and a row header. Those cells sit in the body, not the
   header band, so they take the td treatment rather than the uppercase caption
   styling of `.data-table th` above. */
.data-table tbody th[scope="row"] {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: var(--dark-secondary);
  background: transparent;
  border-bottom: 1px solid var(--line);
}
.data-table tbody tr:last-child th[scope="row"] { border-bottom: 0; }

/* ---------- Gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 2rem 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.gallery-card {
  display: block;
  padding: 0;
  border: 0;
  background: var(--light-secondary);
  cursor: zoom-in;
  overflow: hidden;
}
.gallery-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s ease, opacity 0.2s ease;
}
.gallery-card:hover img { transform: scale(1.035); opacity: 0.94; }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } }

/* ---------- Plans ---------- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.4rem;
  margin: 2rem 0;
}
.plan-card { border: 1px solid var(--line); background: var(--light-secondary); }
.plan-card__media { background: var(--light-tertiary); aspect-ratio: 4 / 3; border-bottom: 1px solid var(--line); }
.plan-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 0.6rem; }
.plan-card__body { padding: 1.2rem 1.3rem 1.4rem; }
.plan-card__title { margin: 0 0 0.4rem; font-size: 1.12rem; }
.plan-card__meta {
  margin: 0 0 0.7rem;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-secondary);
}
.plan-card__desc { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--dark-tertiary); }

/* ---------- Amenities ---------- */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
  margin: 2rem 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.amenity-chip {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.95rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--dark-secondary);
  background: var(--light-secondary);
}
.section--cream .amenity-chip { background: var(--light-secondary); }

/* ---------- Map ---------- */
.map-frame { max-width: 760px; margin: 2rem auto 2.2rem; border: 1px solid var(--line); }
.map-frame img { width: 100%; height: auto; object-fit: contain; }

/* ---------- FAQ ---------- */
.faq-list { margin: 1.8rem 0 0; border-top: 1px solid var(--line-strong); max-width: 52rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.4rem 1.15rem 0;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--dark-primary);
  position: relative;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--brand-secondary);
}
.faq-item[open] > summary::after { content: "\2212"; }
.faq-item > summary:hover { color: var(--brand-secondary); }
.faq-item__answer {
  margin: 0;
  padding: 0 2.4rem 1.35rem 0;
  color: var(--dark-secondary);
  font-size: 0.98rem;
  max-width: var(--measure);
}

/* ---------- Closing CTA ---------- */
.closing-cta {
  background: var(--dark-primary);
  color: var(--light-primary);
  padding: clamp(3.2rem, 6vw, 4.8rem) 0;
}
.closing-cta h2 { color: var(--light-primary); max-width: 14em; }
.closing-cta p { color: #C9CEC3; max-width: 40rem; margin-bottom: 2rem; }
.closing-cta .btn-primary {
  background: var(--brand-mark);
  border-color: var(--brand-mark);
  color: #16210B;
}
.closing-cta .btn-primary:hover { background: #96CE5E; border-color: #96CE5E; color: #16210B; }
.closing-cta .btn-outline { border-color: #4A5150; color: var(--light-primary); }
.closing-cta .btn-outline:hover { background: var(--light-primary); border-color: var(--light-primary); color: var(--dark-primary); }

/* ---------- Contact form ---------- */
.form-card { border: 1px solid var(--line-strong); background: var(--light-secondary); padding: 1.6rem; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-tertiary);
  margin-bottom: 0.4rem;
}
.form-group input, .form-group textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--dark-primary);
  background: var(--light-primary);
  border: 1px solid var(--line-strong);
  padding: 0.72rem 0.8rem;
}
.form-group input:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: inset 0 0 0 1px var(--brand-primary);
}
.form-group textarea { resize: vertical; min-height: 88px; }
.field-error { display: block; margin-top: 0.3rem; font-size: 0.78rem; color: var(--state-error); }
.form-submit {
  width: 100%;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--light-secondary);
  background: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  padding: 0.85rem 1.4rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.form-submit:hover { background: var(--brand-secondary); border-color: var(--brand-secondary); }
.form-status { margin-top: 0.9rem; padding: 0.75rem 0.9rem; font-size: 0.88rem; border: 1px solid var(--line-strong); }

/* ---------- Footer ---------- */
.ba-footer {
  background: var(--light-primary);
  border-top: 1px solid var(--line-strong);
  padding: clamp(3rem, 5vw, 4rem) 0 2.2rem;
  font-size: 0.92rem;
}
.ba-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 2.2rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 900px) { .ba-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ba-footer__grid { grid-template-columns: 1fr; } }
.ba-footer__brand img { width: 40px; height: 40px; margin-bottom: 0.9rem; }
.ba-footer__brand p { font-size: 0.88rem; color: var(--dark-tertiary); line-height: 1.65; }
.footer-heading {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dark-primary);
  margin: 0 0 0.9rem;
}
.ba-footer__brand .footer-heading { font-size: 1rem; letter-spacing: -0.02em; text-transform: none; margin-bottom: 0.6rem; }
.ba-footer__col ul { list-style: none; margin: 0; padding: 0; }
.ba-footer__col li { margin-bottom: 0.55rem; }
.ba-footer__col a { color: var(--dark-tertiary); text-decoration: none; font-size: 0.9rem; }
.ba-footer__col a:hover { color: var(--brand-secondary); text-decoration: underline; }
.ba-footer__disclaimer {
  margin: 2rem 0 1rem;
  font-size: 0.78rem;
  line-height: 1.66;
  color: var(--dark-tertiary);
  max-width: none;
}
.ba-footer__copy { margin: 0; font-size: 0.78rem; color: var(--dark-tertiary); max-width: none; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(15, 17, 14, 0.92);
}
.lightbox.is-open { display: flex; }
.lightbox__img { max-width: min(1100px, 92vw); max-height: 88vh; object-fit: contain; }
.lightbox__close {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  width: 42px;
  height: 42px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--light-primary);
  background: transparent;
  border: 1px solid rgba(252, 252, 251, 0.45);
  cursor: pointer;
}
.lightbox__close:hover { background: var(--light-primary); color: var(--dark-primary); border-color: var(--light-primary); }

/* ---------- Contact modal (fleet module: tooling/add-contact-modal.mjs) ---------- */
.cm-modal {
  width: min(460px, 92vw);
  padding: 0;
  border: 1px solid var(--line-strong);
  background: var(--light-secondary);
  color: var(--dark-primary);
}
.cm-modal::backdrop { background: rgba(15, 17, 14, 0.55); }
.cm-modal__panel { position: relative; padding: 1.8rem 1.7rem 1.6rem; }
.cm-modal__close {
  position: absolute;
  top: 0.7rem;
  right: 0.8rem;
  width: 34px;
  height: 34px;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--dark-tertiary);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}
.cm-modal__close:hover { color: var(--dark-primary); border-color: var(--line-strong); }
.cm-modal__title { font-size: 1.22rem; margin: 0 0 1.2rem; max-width: 16em; }
.cm-form__field { margin-bottom: 0.9rem; }
.cm-form__field label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-tertiary);
  margin-bottom: 0.35rem;
}
.cm-form__field input, .cm-form__field textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 0.94rem;
  color: var(--dark-primary);
  background: var(--light-primary);
  border: 1px solid var(--line-strong);
  padding: 0.68rem 0.75rem;
}
.cm-form__field input:focus, .cm-form__field textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: inset 0 0 0 1px var(--brand-primary);
}
.cm-form__field textarea { resize: vertical; }
.cm-form__submit {
  width: 100%;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--light-secondary);
  background: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  padding: 0.8rem 1.2rem;
  cursor: pointer;
}
.cm-form__submit:hover { background: var(--brand-secondary); border-color: var(--brand-secondary); }
.cm-form__status { margin-top: 0.8rem; padding: 0.7rem 0.85rem; font-size: 0.86rem; }
.cm-form__hint { margin: 0.9rem 0 0; font-size: 0.74rem; line-height: 1.55; color: var(--dark-tertiary); }

/* ---------- Scroll reveal (opt-in only; no page content depends on it) ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .gallery-card img { transition: none; }
}

/* ---------- 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;
}

/* The comparison-guide template ships its own inline <style> with rounded
   corners. This theme is square, and the inline block loads after this file,
   so the override needs the extra .gcmp specificity to win. */
.gcmp .gcmp-btn,
.gcmp .gcmp-table,
.gcmp .gcmp-hero-img img,
.gcmp .gcmp-card a,
.gcmp .gcmp-faq-item {
  border-radius: 0;
}

.gcmp .gcmp-card a:hover {
  box-shadow: none;
  transform: none;
  border-color: var(--brand-primary);
}