/* ============================================================
   Nikoo Homes 8 (Bhartiya Garden Enclave) — BRUTALIST-CIVIC v1
   ------------------------------------------------------------
   Visual language: government infrastructure, museum signage,
   modernist housing. Pure squares, thick black rules, weighty
   architectural numerals, red as full-bleed accent blocks.
   Display: Outfit. Body: Manrope. Numerics: tabular monospace.
   Source of truth for colors:
     builders/bhartiya-urban/bhartiya-urban.json → branding.colors
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Canonical 3×3 brand tokens (validator contract). DO NOT rename. */
  --brand-primary:        #B81C14;   /* Bhartiya Urban red — AA-safe on cream (5.89 on #f5f3ee) */
  --brand-secondary:      #F2C200;   /* civic yellow — high-vis accent (meta/CTAs on dark) */
  --brand-tertiary:       #6E6E6E;   /* mid grey — secondary labels, eyebrows on dark */

  --dark-primary:         #111111;   /* page ink */
  --dark-secondary:       #4a4a4a;   /* muted body */
  --dark-tertiary:        #c8c8c8;   /* hairlines (rare; brutalist prefers heavy lines) */

  --light-primary:        #f5f3ee;   /* concrete paper — page bg */
  --light-secondary:      #ffffff;   /* card surface */
  --light-tertiary:       #e8e4dc;   /* recessed band */

  /* Civic palette extras (above-the-line). */
  --civic-ink:            #1D1D1B;   /* hard black ink */
  --civic-rule:           #1D1D1B;   /* thick black rules */
  --civic-paper:          #f5f3ee;   /* concrete paper */
  --civic-paper-2:        #ECE7DC;   /* darker concrete band */
  --civic-red:            #B81C14;   /* brand red, full-bleed - AA on cream */
  --civic-red-deep:       #9A170F;   /* hover state - deeper red */
  --civic-yellow:         #F2C200;   /* high-vis ledger accent (used very sparingly) */
  --state-success:        #176A2C;
  --state-error:          #861123;

  /* Typography. */
  --font-display: 'Outfit', 'Outfit Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body:    'Manrope', 'Manrope Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Roboto Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Brutalist: no curves. Every radius is 0; the lone exception is .radius-pill
     for absolutely-positioned icons (used only inside .amenity-item__icon). */
  --r-none:        0;
  --r-icon:        50%;

  /* Geometric rule weights — the real brand mark. */
  --rule-hair:     2px;
  --rule-bold:     3px;
  --rule-heavy:    4px;
  --rule-mono:     6px;     /* monumental: hero banner, full-bleed stripes */

  --container:     min(1400px, calc(100% - 2.5rem));
  --section-py:    5.5rem;
  --section-py-sm: 3.5rem;
  --transition:    0.18s cubic-bezier(.4,0,.2,1);

  /* Shadows: drop-shadow only, no blur. Brutalist surfaces are flat. */
  --hard-shadow:   6px 6px 0 var(--civic-ink);
  --hard-shadow-sm:3px 3px 0 var(--civic-ink);
  --hard-shadow-red:6px 6px 0 var(--civic-red);
}

/* ---------- 2. RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100%;
}
body {
  font-family: var(--font-body);
  background-color: var(--civic-paper);
  background-image:
    /* subtle blueprint grid that disappears on light bg — civic plan paper */
    linear-gradient(to right, color-mix(in srgb, var(--civic-ink) 3.5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--civic-ink) 3.5%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  color: var(--dark-primary);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: clip;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a   { color: var(--civic-red); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
button {
  cursor: pointer;
  font-family: var(--font-body);
  border: none;
  background: none;
  color: inherit;
}
input, select, textarea { font-family: var(--font-body); font-size: 1rem; }

:focus-visible {
  outline: 3px solid var(--civic-red);
  outline-offset: 3px;
}

::selection { background: var(--civic-red); color: white; }

/* ---------- 3. TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--civic-ink);
  line-height: 1.04;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  word-break: break-word;
}
h1 {
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  letter-spacing: -0.045em;
  text-transform: none;
}
h2 {
  font-size: clamp(1.9rem, 4vw, 3.25rem);
  letter-spacing: -0.03em;
}
h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}
h4 { font-size: 1.1rem; font-weight: 700; }

p { overflow-wrap: anywhere; word-break: break-word; }
strong, b { font-weight: 700; color: var(--civic-ink); }

/* ---------- 4. CIVIC PRIMITIVES ---------- */
.container {
  width: var(--container);
  max-width: 100%;
  margin-inline: auto;
  min-width: 0;
}

.section {
  position: relative;
  padding: var(--section-py) 0;
  max-width: 100%;
  min-width: 0;
}
.section + .section { border-top: var(--rule-bold) solid var(--civic-ink); }

.section--low    { background: var(--civic-paper); }
.section--dark   { background: var(--light-secondary); }
.section--mid    { background: var(--civic-paper-2); }
.section--high   { background: var(--civic-ink); color: white; }
.section--high h1, .section--high h2, .section--high h3 { color: white; }

/* Accessibility utilities */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--civic-ink); color: white;
  padding: .75rem 1.25rem;
  text-transform: uppercase; letter-spacing: 0.15em;
  font-family: var(--font-mono); font-size: .8rem;
  border: var(--rule-bold) solid var(--civic-red);
  z-index: 9999;
}
.skip-link:focus { top: 0; }

.page-wrapper { overflow-x: clip; }

/* ---------- 5. SECTION HEADERS / EYEBROWS ---------- */
.section-header {
  margin-bottom: 3rem;
  position: relative;
  padding-left: 1.5rem;
  border-left: var(--rule-mono) solid var(--civic-red);
}
.section-header--center {
  text-align: center;
  padding-left: 0;
  border-left: 0;
  padding-top: 1.5rem;
}
.section-header--center::before {
  content: "";
  display: block;
  width: 72px;
  height: var(--rule-mono);
  background: var(--civic-red);
  margin: 0 auto 1.25rem;
}

.section-header__tag,
.page-hero__tag,
.page-kicker,
.hero__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--civic-red);
  margin-bottom: 1rem;
  padding: 0;
  position: relative;
}
.section-header__tag::before,
.page-kicker::before {
  content: "// ";
  color: var(--civic-ink);
  opacity: 0.55;
}

.section-header__title { margin-bottom: 1rem; }
.section-header__desc {
  font-size: 1.05rem;
  color: var(--dark-secondary);
  line-height: 1.65;
  max-width: 65ch;
}
.section-header--center .section-header__desc { margin-inline: auto; }

/* ---------- 6. NAVBAR ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--civic-paper);
  border-bottom: var(--rule-heavy) solid var(--civic-ink);
}
.navbar__inner {
  width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 0;
  position: relative;
}
/* Red corner ticker on the nav — civic infrastructure feel */
.navbar__inner::before {
  content: "";
  position: absolute;
  left: -100vw;
  top: -3px;
  width: 100vw;
  height: 3px;
  background: var(--civic-red);
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  color: var(--civic-ink);
}
.navbar__logo {
  width: 48px;
  height: auto;
  border: var(--rule-hair) solid var(--civic-ink);
  background: white;
  padding: 4px;
}
.navbar__logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--civic-ink);
  text-transform: uppercase;
}

.navbar__menu, .nav-menu {
  display: flex;
  align-items: center;
  gap: 8px;
}
.navbar__link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--civic-ink);
  position: relative;
  padding: 0.4rem 0;
  border-bottom: var(--rule-hair) solid transparent;
  transition: var(--transition);
}
.navbar__link:hover,
.navbar__link[aria-current="page"] {
  color: var(--civic-red);
  text-decoration: none;
  border-bottom-color: var(--civic-red);
}
.navbar__cta {
  margin-left: 0.5rem;
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border: var(--rule-hair) solid var(--civic-ink);
  background: white;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--civic-ink);
  transition: var(--transition);
}

/* ---------- 7. BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r-none);
  border: var(--rule-hair) solid var(--civic-ink);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  position: relative;
  min-height: 48px;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 3px solid var(--civic-red); outline-offset: 3px; }

.btn-primary,
.button-solid {
  background: var(--civic-red);
  color: white;
  border-color: var(--civic-ink);
  box-shadow: var(--hard-shadow-sm);
}
.btn-primary:hover,
.button-solid:hover {
  background: var(--civic-red-deep);
  color: white;
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--civic-ink);
}
.btn-primary:active { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--civic-ink); }

.btn-outline {
  background: transparent;
  color: var(--civic-ink);
  border: var(--rule-bold) solid var(--civic-ink);
}
.btn-outline:hover {
  background: var(--civic-ink);
  color: white;
}

/* Stand-alone block-button used by 404 page */
.button-block {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

/* ---------- 8. HERO ---------- */
.hero {
  position: relative;
  background: var(--civic-paper);
  border-bottom: var(--rule-mono) solid var(--civic-ink);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(35%) contrast(1.05);
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--civic-paper) 5%, transparent) 0%, color-mix(in srgb, var(--civic-ink) 55%, transparent) 50%, color-mix(in srgb, var(--civic-ink) 85%, transparent) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--civic-ink) 45%, transparent) 0%, color-mix(in srgb, var(--civic-ink) 10%, transparent) 60%);
}

/* Red corner banner — civic poster */
.hero::before {
  content: "BHARTIYA URBAN / 011";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  background: var(--civic-red);
  color: white;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  padding: 0.75rem 1.5rem;
  border-left: var(--rule-bold) solid var(--civic-ink);
  border-bottom: var(--rule-bold) solid var(--civic-ink);
}
/* Diagonal corner marker, top-left */
.hero::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  z-index: 5;
  width: 0; height: 0;
  border-top: 80px solid var(--civic-red);
  border-right: 80px solid transparent;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: var(--container);
  margin-inline: auto;
  padding: 6rem 0 5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: end;
  min-height: 80vh;
}

.hero__content { color: white; max-width: 50ch; }

.hero__tag {
  color: var(--civic-red);
  background: white;
  padding: 0.5rem 0.9rem;
  border: var(--rule-bold) solid var(--civic-ink);
  margin-bottom: 1.5rem;
  font-size: 0.7rem;
}
.hero__tag::before { content: ""; }

.hero__title {
  color: white;
  font-size: clamp(2.8rem, 8vw, 6rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.05em;
  margin-bottom: 1rem;
  text-shadow: 0 2px 0 color-mix(in srgb, black 40%, transparent);
  position: relative;
  padding-bottom: 1rem;
}
.hero__title::after {
  content: "";
  display: block;
  width: 96px;
  height: var(--rule-mono);
  background: var(--civic-red);
  margin-top: 1rem;
}

.hero__subtitle {
  font-size: 1.05rem;
  line-height: 1.6;
  color: color-mix(in srgb, white 92%, transparent);
  max-width: 52ch;
  margin-bottom: 2rem;
  font-weight: 400;
}
.page-updated {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, white 70%, transparent);
  margin-bottom: 1rem;
}
.section--low .page-updated,
.page-hero .page-updated { color: var(--dark-secondary); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.hero__actions .btn-outline {
  background: color-mix(in srgb, white 8%, transparent);
  color: white;
  border-color: white;
}
.hero__actions .btn-outline:hover {
  background: white;
  color: var(--civic-ink);
}

/* Hero form panel — looks like a permit envelope */
.hero__form-panel, .glass-panel {
  background: var(--civic-paper);
  border: var(--rule-heavy) solid var(--civic-ink);
  padding: 1.75rem;
  box-shadow: var(--hard-shadow-red);
  position: relative;
}
.hero__form-panel::before, .glass-panel::before {
  content: "ENQUIRY · FORM-08";
  position: absolute;
  top: -14px;
  left: 1rem;
  background: var(--civic-ink);
  color: white;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 0.25rem 0.6rem;
}
.hero__form-title {
  font-size: 1.4rem;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  padding-bottom: 0.75rem;
  border-bottom: var(--rule-bold) solid var(--civic-ink);
}

/* ---------- 9. PAGE HERO (sub-pages) ---------- */
.page-hero {
  background: var(--civic-ink);
  color: white;
  padding: 4.5rem 0 4rem;
  border-bottom: var(--rule-mono) solid var(--civic-red);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(135deg, transparent 0 18px, color-mix(in srgb, white 2.5%, transparent) 18px 19px);
  pointer-events: none;
}
.page-hero .container { position: relative; }
.page-hero__title {
  color: white;
  font-size: clamp(2.2rem, 5vw, 4rem);
  letter-spacing: -0.04em;
  margin-bottom: 0.75rem;
}
.page-hero__tag {
  color: var(--civic-red);
  background: transparent;
  border: none;
  padding: 0;
}
.page-hero__desc {
  color: color-mix(in srgb, white 85%, transparent);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 70ch;
  margin-top: 1rem;
}
.page-hero__desc a { color: white; text-decoration: underline; text-decoration-color: var(--civic-red); text-decoration-thickness: 2px; }

/* ---------- 10. HIGHLIGHTS — architectural ledger ---------- */
.highlights {
  background: var(--civic-ink);
  color: white;
  padding: 0;
  border-top: var(--rule-bold) solid var(--civic-red);
  border-bottom: var(--rule-bold) solid var(--civic-red);
}
.highlights .container { padding: 3rem 0; }
.highlights__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border-top: var(--rule-hair) solid color-mix(in srgb, white 15%, transparent);
  border-bottom: var(--rule-hair) solid color-mix(in srgb, white 15%, transparent);
}
.highlights__item {
  text-align: left;
  padding: 2rem 1.25rem;
  border-right: var(--rule-hair) solid color-mix(in srgb, white 15%, transparent);
  position: relative;
}
.highlights__item:last-child { border-right: none; }
.highlights__item::before {
  content: counter(idx, decimal-leading-zero);
  counter-increment: idx;
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--civic-red);
  font-weight: 700;
}
.highlights__grid { counter-reset: idx; }
.highlights__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: white;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.5rem;
}
.highlights__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, white 65%, transparent);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.cta-row--center { justify-content: center; }

/* ---------- 11. SPLIT LAYOUT ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}
.split--reverse > *:first-child { order: 2; }
@media (min-width: 1025px) {
  /* Image column sticks while text column scrolls on desktop */
  .split > *:has(img),
  .location-grid > *:has(img) {
    position: sticky;
    top: 6rem;
    align-self: start;
  }
}
.split img,
.location-map-wrap img,
.masterplan-img-wrap img {
  width: 100%;
  border: var(--rule-bold) solid var(--civic-ink);
  border-radius: 0 !important;
  box-shadow: var(--hard-shadow);
}

/* ---------- 12. RICH CONTENT ---------- */
.rich-content,
.article-copy {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--dark-primary);
}
.rich-content p, .article-copy p { margin-bottom: 1.1rem; }
.rich-content h3, .article-copy h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-size: 1.4rem;
  padding-left: 0.75rem;
  border-left: var(--rule-bold) solid var(--civic-red);
}
.rich-content a, .article-copy a {
  color: var(--civic-red);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.rich-content strong, .article-copy strong { color: var(--civic-ink); font-weight: 700; }

/* Bullet list (404, generic) */
.bullet-list {
  list-style: none;
  padding: 1.5rem;
  border: var(--rule-bold) solid var(--civic-ink);
  background: white;
  display: inline-block;
  text-align: left;
}
.bullet-list li {
  padding: 0.4rem 0 0.4rem 1.4rem;
  position: relative;
  font-weight: 500;
}
.bullet-list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--civic-red);
  font-weight: 800;
}
.bullet-list li a { color: var(--civic-ink); text-decoration: underline; }

/* ---------- 13. USP CARDS ---------- */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  border: var(--rule-bold) solid var(--civic-ink);
  background: var(--civic-ink);
}
.usp-card {
  background: var(--civic-paper);
  padding: 2.25rem 1.75rem;
  border: var(--rule-hair) solid var(--civic-ink);
  position: relative;
  transition: background var(--transition);
}
.usp-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: var(--rule-bold);
  background: var(--civic-red);
}
.usp-card:hover { background: white; }
.usp-card__icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  width: 56px; height: 56px;
  background: white;
  border: var(--rule-bold) solid var(--civic-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}
.usp-card__title {
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
  text-transform: uppercase;
  letter-spacing: -0.015em;
}
.usp-card__desc {
  font-size: 0.95rem;
  color: var(--dark-secondary);
  line-height: 1.6;
}

/* ---------- 14. FLOOR PLANS ---------- */
.fp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.fp-card {
  background: white;
  border: var(--rule-bold) solid var(--civic-ink);
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}
.fp-card::before {
  content: "PLAN " counter(fpidx, decimal-leading-zero);
  counter-increment: fpidx;
  position: absolute;
  top: -1px; left: -1px;
  background: var(--civic-ink);
  color: white;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 0.35rem 0.7rem;
  z-index: 2;
}
.fp-grid { counter-reset: fpidx; }
.fp-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--hard-shadow-red);
}
.fp-card__img {
  background: var(--civic-paper-2);
  border-bottom: var(--rule-bold) solid var(--civic-ink);
  overflow: hidden;
}
.fp-card__img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.fp-card__body {
  padding: 1.25rem 1.25rem 1.5rem;
}
.fp-card__name {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
.fp-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--dark-secondary);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}
.fp-card__meta span:last-child {
  color: var(--civic-red);
  font-weight: 700;
}

/* ---------- 15. GALLERY ---------- */
.gallery-masonry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  border: var(--rule-bold) solid var(--civic-ink);
  aspect-ratio: 4/3;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition), filter var(--transition);
  filter: grayscale(20%);
}
.gallery-item:hover img { transform: scale(1.06); filter: grayscale(0); }
.gallery-item__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--civic-ink);
  color: white;
  padding: 0.6rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-top: var(--rule-hair) solid var(--civic-red);
}
.gallery-item__caption p { margin: 0; }
.subpage-gallery { margin-bottom: 2.5rem; }

/* ---------- 16. AMENITIES ---------- */
.amenity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
  border: var(--rule-bold) solid var(--civic-ink);
  background: var(--civic-ink);
}
.amenity-item {
  background: white;
  border: var(--rule-hair) solid var(--civic-ink);
  padding: 1.25rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--civic-ink);
  letter-spacing: -0.005em;
  position: relative;
  transition: background var(--transition), color var(--transition);
}
.amenity-item:hover {
  background: var(--civic-red);
  color: white;
}
.amenity-item__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--r-icon);
  background: var(--civic-paper);
  border: var(--rule-hair) solid var(--civic-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.amenity-item:hover .amenity-item__icon {
  background: white;
}

/* ---------- 17. CONNECTIVITY LIST ---------- */
.connectivity-list {
  display: flex;
  flex-direction: column;
  border-top: var(--rule-bold) solid var(--civic-ink);
}
.connectivity-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 1rem;
  border-bottom: var(--rule-hair) solid var(--civic-ink);
  background: white;
  transition: background var(--transition);
}
.connectivity-item:hover { background: var(--civic-paper-2); }
.connectivity-item__num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--civic-red);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
  padding-right: 1rem;
  border-right: var(--rule-bold) solid var(--civic-ink);
  text-align: center;
}
.connectivity-item__name {
  font-weight: 700;
  color: var(--civic-ink);
  font-size: 1.02rem;
  margin: 0;
}
.connectivity-item__detail {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--civic-red);
  font-weight: 600;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Location grid layout */
.location-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

/* ---------- 18. PRICING CARDS ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
.pricing-card {
  background: white;
  border: var(--rule-bold) solid var(--civic-ink);
  padding: 2rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}
.pricing-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: var(--rule-bold);
  background: var(--civic-ink);
}
.pricing-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--hard-shadow);
}
.pricing-card--featured {
  background: var(--civic-ink);
  color: white;
  border-color: var(--civic-red);
  box-shadow: var(--hard-shadow-red);
}
.pricing-card--featured::before { background: var(--civic-red); height: var(--rule-mono); }
.pricing-card--featured .pricing-card__type,
.pricing-card--featured .pricing-card__price,
.pricing-card--featured .pricing-card__price-label,
.pricing-card--featured .pricing-card__desc { color: white; }
.pricing-card--featured .pricing-card__spec-row {
  border-color: color-mix(in srgb, white 20%, transparent);
  color: color-mix(in srgb, white 80%, transparent);
}
.pricing-card--featured:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--civic-red);
}

.pricing-card__badge {
  position: absolute;
  top: -14px;
  right: 1rem;
  background: var(--civic-red);
  color: white;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border: var(--rule-hair) solid var(--civic-ink);
}
.pricing-card__type {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--civic-ink);
  margin-bottom: 0.5rem;
}
.pricing-card__desc {
  font-size: 0.92rem;
  color: var(--dark-secondary);
  line-height: 1.55;
  margin-bottom: 1.25rem;
}
.pricing-card__price-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--civic-red);
  margin-bottom: 0.25rem;
}
.pricing-card__price {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--civic-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 1.25rem;
}
.pricing-card__specs {
  margin-bottom: 1.25rem;
  padding-top: 0.75rem;
  border-top: var(--rule-hair) solid var(--civic-ink);
}
.pricing-card__spec-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: var(--rule-hair) solid var(--dark-tertiary);
  font-variant-numeric: tabular-nums;
}
.pricing-card__spec-row:last-child { border-bottom: none; }
.pricing-card__spec-row span:last-child {
  color: var(--civic-ink);
  font-weight: 700;
}
.pricing-card--featured .pricing-card__spec-row span:last-child { color: white; }
.pricing-card__cta {
  margin-top: auto;
  width: 100%;
}

/* ---------- 19. DATA TABLE ---------- */
.data-table {
  width: 100%;
  background: white;
  border: var(--rule-bold) solid var(--civic-ink);
  font-size: 0.92rem;
}
.data-table thead {
  background: var(--civic-ink);
  color: white;
}
.data-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.9rem 1rem;
  font-weight: 700;
  border-right: var(--rule-hair) solid color-mix(in srgb, white 20%, transparent);
}
.data-table th:last-child { border-right: none; }
.data-table td {
  padding: 0.85rem 1rem;
  border-bottom: var(--rule-hair) solid var(--dark-tertiary);
  border-right: var(--rule-hair) solid var(--dark-tertiary);
  font-variant-numeric: tabular-nums;
}
.data-table td:last-child { border-right: none; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:nth-child(even) { background: var(--civic-paper); }
.data-table tbody tr:hover { background: color-mix(in srgb, var(--brand-primary) 6%, transparent); }
.data-table td:first-child { font-weight: 700; color: var(--civic-ink); }
.data-table td:last-child { color: var(--civic-red); font-weight: 700; }

/* ---------- 20. DEV-STAT (architectural numerics) ---------- */
.dev-stats,
.metric-grid,
.highlights__grid.dev-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border: var(--rule-bold) solid var(--civic-ink);
  background: var(--civic-ink);
  margin-top: 2rem;
}
.dev-stat,
.metric-card {
  background: var(--civic-paper);
  padding: 1.75rem 1.25rem;
  border: var(--rule-hair) solid var(--civic-ink);
  position: relative;
}
.dev-stat::after,
.metric-card::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 32px;
  height: var(--rule-bold);
  background: var(--civic-red);
}
.dev-stat__value,
.metric-value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--civic-ink);
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
  margin-bottom: 0.5rem;
}
.dev-stat__label,
.metric-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark-secondary);
  font-weight: 600;
}

/* ---------- 21. ARTICLE CARD ---------- */
.article-card {
  background: white;
  border: var(--rule-bold) solid var(--civic-ink);
  padding: 2.5rem 2rem;
  max-width: 980px;
  margin: 0 auto;
  position: relative;
}
.article-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: var(--rule-mono);
  background: var(--civic-red);
}
.article-card h2 {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: var(--rule-bold) solid var(--civic-ink);
}

/* Text card (generic content block) */
.text-card {
  background: white;
  border: var(--rule-bold) solid var(--civic-ink);
  padding: 1.75rem 1.5rem;
  margin-bottom: 1.5rem;
}

/* Tag list (used on overview / location chips) */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}
.tag-list li {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  background: var(--civic-ink);
  color: white;
  border: var(--rule-hair) solid var(--civic-ink);
}
.tag-list li::before { content: "▸ "; color: var(--civic-red); }

/* Breadcrumb */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  color: color-mix(in srgb, white 75%, transparent);
}
.breadcrumb a {
  color: white;
  text-decoration: none;
  border-bottom: var(--rule-hair) solid var(--civic-red);
}
.breadcrumb a:hover { color: var(--civic-red); }
.breadcrumb__sep {
  display: inline-block;
  margin: 0 0.5rem;
  color: var(--civic-red);
  font-weight: 700;
}

/* ---------- 22. FAQ ---------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: var(--rule-bold) solid var(--civic-ink);
  background: var(--civic-ink);
}
.faq-item {
  background: white;
  border-bottom: var(--rule-hair) solid var(--civic-ink);
}
.faq-item:last-child { border-bottom: none; }
.faq-question {
  width: 100%;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  padding: 1.25rem 3.5rem 1.25rem 1.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
  display: block;
  position: relative;
  color: var(--civic-ink);
  transition: background var(--transition), color var(--transition);
}
.faq-question:hover { background: var(--civic-paper); }
.faq-question[aria-expanded="true"] {
  background: var(--civic-ink);
  color: white;
}
.faq-question__icon {
  position: absolute;
  top: 50%; right: 1.25rem;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  border: var(--rule-hair) solid currentColor;
  display: block;
}
.faq-question__icon::before,
.faq-question__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.faq-question__icon::before {
  top: 50%; left: 4px; right: 4px;
  height: 2px;
  transform: translateY(-50%);
}
.faq-question__icon::after {
  left: 50%; top: 4px; bottom: 4px;
  width: 2px;
  transform: translateX(-50%);
  transition: opacity var(--transition);
}
.faq-question[aria-expanded="true"] .faq-question__icon::after { opacity: 0; }
.faq-answer {
  display: none;
  padding: 0 1.25rem 1.5rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--dark-secondary);
  border-top: var(--rule-hair) solid var(--civic-ink);
  background: white;
}
.faq-item.is-open .faq-answer,
.faq-question[aria-expanded="true"] + .faq-answer { display: block; padding-top: 1.25rem; }

/* Classic FAQ variant (sub-pages) */
.faq-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: var(--rule-bold) solid var(--civic-ink);
}
.faq-section-item {
  background: white;
  padding: 1.5rem 1.5rem;
  border-bottom: var(--rule-hair) solid var(--civic-ink);
}
.faq-section-item:last-child { border-bottom: none; }
.faq-section-item h3 {
  margin-bottom: 0.6rem;
  font-size: 1.1rem;
  padding-left: 0.85rem;
  border-left: var(--rule-bold) solid var(--civic-red);
}
.classic-faq-body {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--dark-secondary);
}
.classic-faq-body p { margin-bottom: 0.75rem; }
.classic-faq-body p:last-child { margin-bottom: 0; }

/* ---------- 23. FORMS ---------- */
.form-group {
  margin-bottom: 1rem;
}
.form-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--civic-ink);
  margin-bottom: 0.45rem;
}
.form-control {
  display: block;
  width: 100%;
  padding: 0.8rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--civic-ink);
  background: white;
  border: var(--rule-bold) solid var(--civic-ink);
  border-radius: 0;
  transition: border-color var(--transition), box-shadow var(--transition);
  min-height: 46px;
}
.form-control::placeholder { color: color-mix(in srgb, var(--civic-ink) 45%, transparent); }
.form-control:focus {
  outline: none;
  border-color: var(--civic-red);
  box-shadow: 4px 4px 0 var(--civic-ink);
}
.form-control:user-invalid,
.form-control.is-invalid {
  border-color: var(--state-error);
}
.field-error {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--state-error);
  font-weight: 700;
}
.form-status {
  padding: 0.85rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  border: var(--rule-bold) solid var(--civic-ink);
  margin-top: 1rem;
}
.form-status.success { background: var(--state-success); color: white; }
.form-status.error   { background: var(--state-error);   color: white; }

.contact-form-panel {
  background: var(--civic-paper);
  border: var(--rule-heavy) solid var(--civic-ink);
  padding: 2rem;
  box-shadow: var(--hard-shadow-red);
  position: relative;
}
.contact-form-panel::before {
  content: "FORM-08 · NIKOO HOMES 8";
  position: absolute;
  top: -14px;
  left: 1.25rem;
  background: var(--civic-ink);
  color: white;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  padding: 0.3rem 0.7rem;
}
.contact-note {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--dark-secondary);
  border-top: var(--rule-hair) solid var(--civic-ink);
  padding-top: 0.85rem;
}

/* ---------- 24. CTA SECTION ---------- */
.cta-section {
  position: relative;
  padding: 5rem 0;
  background: var(--civic-red);
  color: white;
  border-top: var(--rule-mono) solid var(--civic-ink);
  border-bottom: var(--rule-mono) solid var(--civic-ink);
  overflow: hidden;
  isolation: isolate;
}
.cta-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cta-section__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(60%) contrast(1.05);
  opacity: 0.35;
}
.cta-section__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 92%, transparent) 0%, color-mix(in srgb, var(--brand-primary) 95%, transparent) 100%);
}
.cta-section__inner {
  position: relative;
  z-index: 2;
  width: var(--container);
  margin-inline: auto;
  text-align: center;
  max-width: 800px;
}
.cta-section__title {
  color: white;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: -0.035em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.cta-section__desc {
  color: color-mix(in srgb, white 92%, transparent);
  font-size: 1.05rem;
  margin-bottom: 1.75rem;
  line-height: 1.6;
}
.cta-section .btn-primary {
  background: var(--civic-ink);
  border-color: white;
  color: white;
}
.cta-section .btn-primary:hover {
  background: white;
  color: var(--civic-ink);
  box-shadow: 5px 5px 0 var(--civic-ink);
}
.cta-section .btn-outline {
  background: transparent;
  border-color: white;
  color: white;
}
.cta-section .btn-outline:hover {
  background: white;
  color: var(--civic-red);
}

/* ---------- 25. FOOTER ---------- */
.footer {
  background: var(--civic-ink);
  color: color-mix(in srgb, white 75%, transparent);
  padding: 4rem 0 1.5rem;
  border-top: var(--rule-mono) solid var(--civic-red);
  font-size: 0.92rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  color: white;
}
.footer-brand .navbar__logo {
  background: white;
  border-color: white;
}
.footer-brand .navbar__logo-text { color: white; }
.footer__brand-desc {
  color: color-mix(in srgb, white 70%, transparent);
  line-height: 1.65;
  max-width: 38ch;
}
.footer-heading {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-secondary);
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: var(--rule-hair) solid color-mix(in srgb, white 15%, transparent);
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: color-mix(in srgb, white 75%, transparent);
}
.footer__links a {
  color: color-mix(in srgb, white 75%, transparent);
  font-weight: 500;
  font-size: 0.92rem;
  text-decoration: none;
  transition: color var(--transition), padding-left var(--transition);
}
.footer__links a:hover {
  color: white;
  padding-left: 0.4rem;
  text-decoration: none;
}
.footer__disclaimer {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  line-height: 1.6;
  color: color-mix(in srgb, white 55%, transparent);
  border-top: var(--rule-hair) solid color-mix(in srgb, white 15%, transparent);
  padding-top: 1.5rem;
}
.footer__bottom {
  padding-top: 1.25rem;
  border-top: var(--rule-bold) solid var(--civic-red);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer__copy {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: color-mix(in srgb, white 60%, transparent);
  margin: 0;
}

/* ---------- 26. STAGING BANNER ---------- */
.staging-banner {
  background: var(--civic-yellow);
  color: var(--civic-ink);
  border-bottom: var(--rule-bold) solid var(--civic-ink);
  padding: 0.6rem 1rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- 27. PAGE GRID (sub-page layout) ---------- */
.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

/* ---------- 28. MASTER PLAN / LOCATION MAP WRAPPERS ---------- */
.masterplan-img-wrap,
.location-map-wrap {
  position: relative;
}
.masterplan-img-wrap::before,
.location-map-wrap::before {
  content: "PLAN · 1:1500";
  position: absolute;
  top: -14px; right: 0.75rem;
  background: var(--civic-red);
  color: white;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border: var(--rule-hair) solid var(--civic-ink);
  z-index: 2;
}
.location-map-wrap::before { content: "MAP · BLR-N"; }

/* ---------- 29. RELATED PROJECTS ---------- */
.related-projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

/* ---------- 30. RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 5rem 0 4rem;
    align-items: stretch;
  }
  .highlights__grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
  .highlights__item:nth-child(3n) { border-right: none; }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1024px) {
  :root {
    --section-py: 3.5rem;
  }
  .navbar__menu {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--civic-paper);
    border-top: var(--rule-bold) solid var(--civic-ink);
    border-bottom: var(--rule-heavy) solid var(--civic-red);
    padding: 1rem 1.5rem 1.5rem;
  }
  .navbar__menu.is-open { display: flex; }
  .navbar__link {
    padding: 0.85rem 0;
    border-bottom: var(--rule-hair) solid var(--civic-ink);
  }
  .navbar__cta { margin: 1rem 0 0; width: 100%; }
  .nav-toggle { display: flex; }

  .hero::before {
    font-size: 0.6rem;
    padding: 0.5rem 0.9rem;
  }
  .hero::after {
    border-top-width: 56px;
    border-right-width: 56px;
  }
  .hero__title { font-size: clamp(2.2rem, 11vw, 3.5rem); }
  .hero__subtitle { font-size: 0.98rem; }

  .highlights__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .highlights__item { border-right: none; border-bottom: var(--rule-hair) solid color-mix(in srgb, white 15%, transparent); }
  .highlights__item:nth-child(2n) { border-right: none; }
  .highlights__value { font-size: 2.2rem; }

  .split, .location-grid, .page-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .split--reverse > *:first-child { order: initial; }

  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .connectivity-item {
    grid-template-columns: 60px 1fr;
    gap: 0.85rem;
    padding: 0.85rem 0.5rem;
  }
  .connectivity-item__num {
    font-size: 1.6rem;
    padding-right: 0.65rem;
  }

  .pricing-card__price { font-size: 2rem; }
  .dev-stat__value, .metric-value { font-size: 2.1rem; }

  .data-table { font-size: 0.85rem; }
  .data-table th, .data-table td { padding: 0.6rem 0.7rem; }

  .article-card { padding: 1.75rem 1.25rem 1.75rem 1.5rem; }
}

@media (max-width: 640px) {
  .container { width: calc(100% - 1.5rem); }
  .btn { padding: 0.85rem 1.2rem; font-size: 0.8rem; }
  .section-header { padding-left: 1rem; }
  .hero__form-panel, .glass-panel, .contact-form-panel { padding: 1.5rem 1.25rem; }
}

/* ---------- 31. PRINT (civic document feel) ---------- */
@media print {
  .navbar, .footer, .cta-section, .nav-toggle, .skip-link, .hero__form-panel { display: none; }
  body { background: white; }
  .hero__overlay, .hero__bg { display: none; }
  .hero__inner { color: var(--civic-ink); padding: 2rem 0; }
  .hero__title, .hero__subtitle { color: var(--civic-ink); }
}

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

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