* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: #1a1a1a;
  color: #e0e0e0;
  line-height: 1.6;
}

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

.navbar {
  background-color: #0f0f0f;
  border-bottom: 1px solid #2a2a2a;
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Add after the existing .navbar .container rule */
.navbar .container {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #404040 #1a1a1a;
}

.navbar .container::-webkit-scrollbar {
  height: 6px;
}

.navbar .container::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.navbar .container::-webkit-scrollbar-thumb {
  background: #404040;
  border-radius: 3px;
}

.navbar .container::-webkit-scrollbar-thumb:hover {
  background: #505050;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-brand {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.navbar-links {
  display: flex;
  list-style: none;
  gap: 32px;
}

.navbar-links a {
  color: #e0e0e0;
  text-decoration: none;
  font-size: 15px;
  transition: color 0.2s;
}

.navbar-links a:hover {
  color: #ffffff;
}

.hero {
  padding: 120px 0;
  background-color: #0f0f0f;
  border-bottom: 1px solid #2a2a2a;
}

.hero h1 {
  font-size: 48px;
  font-weight: 400;
  margin-bottom: 24px;
  max-width: 800px;
  line-height: 1.3;
}

.hero p {
  font-size: 18px;
  color: #b0b0b0;
  margin-bottom: 40px;
  max-width: 700px;
  line-height: 1.7;
}

.btn-primary {
  display: inline-block;
  padding: 14px 32px;
  background-color: transparent;
  color: #e0e0e0;
  text-decoration: none;
  border: 1px solid #404040;
  font-size: 15px;
  transition: all 0.2s;
}

.btn-primary:hover {
  background-color: #2a2a2a;
  border-color: #505050;
}

.projects-preview {
  padding: 100px 0;
  background-color: #1a1a1a;
}

.projects-preview h2 {
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 60px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.category-card {
  padding: 40px;
  background-color: #0f0f0f;
  border: 1px solid #2a2a2a;
}

.category-card h3 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 16px;
}

.category-card p {
  font-size: 15px;
  color: #b0b0b0;
  line-height: 1.6;
}

.trust-section {
  padding: 100px 0;
  background-color: #0f0f0f;
  border-top: 1px solid #2a2a2a;
}

.trust-section h2 {
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 24px;
}

.trust-section p {
  font-size: 18px;
  color: #b0b0b0;
  margin-bottom: 40px;
  max-width: 700px;
  line-height: 1.7;
}

.city-list {
  list-style: none;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.city-list li {
  font-size: 16px;
  color: #e0e0e0;
  padding: 12px 24px;
  border: 1px solid #2a2a2a;
  background-color: #1a1a1a;
}

.footer {
  padding: 60px 0;
  background-color: #0f0f0f;
  border-top: 1px solid #2a2a2a;
  text-align: center;
}

.footer p {
  font-size: 14px;
  color: #707070;
}

@media (max-width: 768px) {
  .navbar .container {
    flex-direction: column;
    gap: 16px;
  }

  .navbar-links {
    gap: 20px;
  }

  .hero {
    padding: 80px 0;
  }

  .hero h1 {
    font-size: 32px;
  }

  .hero p {
    font-size: 16px;
  }

  .category-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .city-list {
    flex-direction: column;
    gap: 16px;
  }

  .projects-preview,
  .trust-section {
    padding: 60px 0;
  }

  .projects-preview h2,
  .trust-section h2 {
    font-size: 24px;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: #1a1a1a;
  color: #e0e0e0;
  line-height: 1.6;
}

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

.navbar {
  background-color: #0f0f0f;
  border-bottom: 1px solid #2a2a2a;
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-brand {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.navbar-links {
  display: flex;
  list-style: none;
  gap: 32px;
}

.navbar-links a {
  color: #e0e0e0;
  text-decoration: none;
  font-size: 15px;
  transition: color 0.2s;
}

.navbar-links a:hover,
.navbar-links a.active {
  color: #ffffff;
}

.hero {
  padding: 120px 0;
  background-color: #0f0f0f;
  border-bottom: 1px solid #2a2a2a;
}

.hero h1 {
  font-size: 48px;
  font-weight: 400;
  margin-bottom: 24px;
  max-width: 800px;
  line-height: 1.3;
}

.hero p {
  font-size: 18px;
  color: #b0b0b0;
  margin-bottom: 40px;
  max-width: 700px;
  line-height: 1.7;
}

.btn-primary {
  display: inline-block;
  padding: 14px 32px;
  background-color: transparent;
  color: #e0e0e0;
  text-decoration: none;
  border: 1px solid #404040;
  font-size: 15px;
  transition: all 0.2s;
}

.btn-primary:hover {
  background-color: #2a2a2a;
  border-color: #505050;
}

.projects-preview {
  padding: 100px 0;
  background-color: #1a1a1a;
}

.projects-preview h2 {
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 60px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.category-card {
  padding: 40px;
  background-color: #0f0f0f;
  border: 1px solid #2a2a2a;
}

.category-card h3 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 16px;
}

.category-card p {
  font-size: 15px;
  color: #b0b0b0;
  line-height: 1.6;
}

.trust-section {
  padding: 100px 0;
  background-color: #0f0f0f;
  border-top: 1px solid #2a2a2a;
}

.trust-section h2 {
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 24px;
}

.trust-section p {
  font-size: 18px;
  color: #b0b0b0;
  margin-bottom: 40px;
  max-width: 700px;
  line-height: 1.7;
}

.city-list {
  list-style: none;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.city-list li {
  font-size: 16px;
  color: #e0e0e0;
  padding: 12px 24px;
  border: 1px solid #2a2a2a;
  background-color: #1a1a1a;
}

.page-header {
  padding: 80px 0 60px;
  background-color: #0f0f0f;
  border-bottom: 1px solid #2a2a2a;
}

.page-header h1 {
  font-size: 40px;
  font-weight: 400;
  margin-bottom: 16px;
}

.page-header p {
  font-size: 16px;
  color: #b0b0b0;
  max-width: 700px;
}

.projects-listing {
  padding: 60px 0 100px;
  background-color: #1a1a1a;
}

.filters {
  display: flex;
  gap: 16px;
  margin-bottom: 48px;
}

.filter-select {
  padding: 12px 20px;
  background-color: #0f0f0f;
  color: #e0e0e0;
  border: 1px solid #2a2a2a;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s;
}

.filter-select:hover {
  border-color: #404040;
}

.filter-select:focus {
  outline: none;
  border-color: #505050;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.project-card {
  padding: 32px;
  background-color: #0f0f0f;
  border: 1px solid #2a2a2a;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: all 0.2s;
}

.project-card:hover {
  border-color: #404040;
  background-color: #1a1a1a;
}

.project-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.project-card h3 {
  font-size: 20px;
  font-weight: 500;
  color: #e0e0e0;
}

.project-type {
  font-size: 13px;
  color: #909090;
  padding: 6px 12px;
  border: 1px solid #2a2a2a;
  background-color: #1a1a1a;
}

.project-city {
  font-size: 14px;
  color: #909090;
  margin-bottom: 12px;
}

.project-description {
  font-size: 15px;
  color: #b0b0b0;
  line-height: 1.6;
}

.footer {
  padding: 60px 0;
  background-color: #0f0f0f;
  border-top: 1px solid #2a2a2a;
  text-align: center;
}

.footer p {
  font-size: 14px;
  color: #707070;
}

@media (max-width: 768px) {
  .navbar .container {
    flex-direction: column;
    gap: 16px;
  }

  .navbar-links {
    gap: 20px;
  }

  .hero {
    padding: 80px 0;
  }

  .hero h1 {
    font-size: 32px;
  }

  .hero p {
    font-size: 16px;
  }

  .category-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .city-list {
    flex-direction: column;
    gap: 16px;
  }

  .projects-preview,
  .trust-section {
    padding: 60px 0;
  }

  .projects-preview h2,
  .trust-section h2 {
    font-size: 24px;
  }

  .page-header {
    padding: 60px 0 40px;
  }

  .page-header h1 {
    font-size: 28px;
  }

  .filters {
    flex-direction: column;
  }

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

  .project-card-header {
    flex-direction: column;
    gap: 12px;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: #1a1a1a;
  color: #e0e0e0;
  line-height: 1.6;
}

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

.navbar {
  background-color: #0f0f0f;
  border-bottom: 1px solid #2a2a2a;
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-brand {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.navbar-links {
  display: flex;
  list-style: none;
  gap: 32px;
}

.navbar-links a {
  color: #e0e0e0;
  text-decoration: none;
  font-size: 15px;
  transition: color 0.2s;
}

.navbar-links a:hover,
.navbar-links a.active {
  color: #ffffff;
}

.hero {
  padding: 120px 0;
  background-color: #0f0f0f;
  border-bottom: 1px solid #2a2a2a;
}

.hero h1 {
  font-size: 48px;
  font-weight: 400;
  margin-bottom: 24px;
  max-width: 800px;
  line-height: 1.3;
}

.hero p {
  font-size: 18px;
  color: #b0b0b0;
  margin-bottom: 40px;
  max-width: 700px;
  line-height: 1.7;
}

.btn-primary {
  display: inline-block;
  padding: 14px 32px;
  background-color: transparent;
  color: #e0e0e0;
  text-decoration: none;
  border: 1px solid #404040;
  font-size: 15px;
  transition: all 0.2s;
}

.btn-primary:hover {
  background-color: #2a2a2a;
  border-color: #505050;
}

.btn-secondary {
  display: inline-block;
  padding: 14px 32px;
  background-color: transparent;
  color: #b0b0b0;
  text-decoration: none;
  border: 1px solid #2a2a2a;
  font-size: 15px;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background-color: #1a1a1a;
  border-color: #404040;
  color: #e0e0e0;
}

.projects-preview {
  padding: 100px 0;
  background-color: #1a1a1a;
}

.projects-preview h2 {
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 60px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.category-card {
  padding: 40px;
  background-color: #0f0f0f;
  border: 1px solid #2a2a2a;
}

.category-card h3 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 16px;
}

.category-card p {
  font-size: 15px;
  color: #b0b0b0;
  line-height: 1.6;
}

.trust-section {
  padding: 100px 0;
  background-color: #0f0f0f;
  border-top: 1px solid #2a2a2a;
}

.trust-section h2 {
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 24px;
}

.trust-section p {
  font-size: 18px;
  color: #b0b0b0;
  margin-bottom: 40px;
  max-width: 700px;
  line-height: 1.7;
}

.city-list {
  list-style: none;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.city-list li {
  font-size: 16px;
  color: #e0e0e0;
  padding: 12px 24px;
  border: 1px solid #2a2a2a;
  background-color: #1a1a1a;
}

.page-header {
  padding: 80px 0 60px;
  background-color: #0f0f0f;
  border-bottom: 1px solid #2a2a2a;
}

.page-header h1 {
  font-size: 40px;
  font-weight: 400;
  margin-bottom: 16px;
}

.page-header p {
  font-size: 16px;
  color: #b0b0b0;
  max-width: 700px;
}

.projects-listing {
  padding: 60px 0 100px;
  background-color: #1a1a1a;
}

.filters {
  display: flex;
  gap: 16px;
  margin-bottom: 48px;
}

.filter-select {
  padding: 12px 20px;
  background-color: #0f0f0f;
  color: #e0e0e0;
  border: 1px solid #2a2a2a;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s;
}

.filter-select:hover {
  border-color: #404040;
}

.filter-select:focus {
  outline: none;
  border-color: #505050;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.project-card {
  padding: 32px;
  background-color: #0f0f0f;
  border: 1px solid #2a2a2a;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: all 0.2s;
}

.project-card:hover {
  border-color: #404040;
  background-color: #1a1a1a;
}

.project-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.project-card h3 {
  font-size: 20px;
  font-weight: 500;
  color: #e0e0e0;
}

.project-type {
  font-size: 13px;
  color: #909090;
  padding: 6px 12px;
  border: 1px solid #2a2a2a;
  background-color: #1a1a1a;
}

.project-city {
  font-size: 14px;
  color: #909090;
  margin-bottom: 12px;
}

.project-description {
  font-size: 15px;
  color: #b0b0b0;
  line-height: 1.6;
}

.property-header {
  padding: 80px 0 60px;
  background-color: #0f0f0f;
  border-bottom: 1px solid #2a2a2a;
}

.property-type-label {
  display: inline-block;
  font-size: 13px;
  color: #909090;
  padding: 6px 12px;
  border: 1px solid #2a2a2a;
  background-color: #1a1a1a;
  margin-bottom: 20px;
}

.property-header h1 {
  font-size: 40px;
  font-weight: 400;
  margin-bottom: 12px;
}

.property-location {
  font-size: 16px;
  color: #909090;
  margin-bottom: 20px;
}

.property-summary {
  font-size: 18px;
  color: #b0b0b0;
  max-width: 700px;
  line-height: 1.7;
}

.property-details {
  padding: 80px 0;
  background-color: #1a1a1a;
}

.property-details h2 {
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 48px;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background-color: #0f0f0f;
  border: 1px solid #2a2a2a;
}

.detail-label {
  font-size: 13px;
  color: #909090;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-value {
  font-size: 16px;
  color: #e0e0e0;
}

.decision-support {
  padding: 80px 0;
  background-color: #0f0f0f;
  border-top: 1px solid #2a2a2a;
}

.decision-support h2 {
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 48px;
}

.support-section {
  margin-bottom: 40px;
  max-width: 800px;
}

.support-section:last-child {
  margin-bottom: 0;
}

.support-section h3 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 16px;
  color: #e0e0e0;
}

.support-section p {
  font-size: 16px;
  color: #b0b0b0;
  line-height: 1.7;
}

.trust-presence {
  padding: 80px 0;
  background-color: #1a1a1a;
  border-top: 1px solid #2a2a2a;
}

.trust-presence h2 {
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 24px;
}

.trust-presence p {
  font-size: 18px;
  color: #b0b0b0;
  max-width: 700px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.presence-note {
  font-size: 16px;
  color: #909090;
}

.property-cta {
  padding: 80px 0;
  background-color: #0f0f0f;
  border-top: 1px solid #2a2a2a;
}

.property-cta h2 {
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 24px;
}

.property-cta p {
  font-size: 18px;
  color: #b0b0b0;
  max-width: 700px;
  line-height: 1.7;
  margin-bottom: 40px;
}

.cta-buttons {
  display: flex;
  gap: 16px;
}

.footer {
  padding: 60px 0;
  background-color: #0f0f0f;
  border-top: 1px solid #2a2a2a;
  text-align: center;
}

.footer p {
  font-size: 14px;
  color: #707070;
}

@media (max-width: 768px) {
  .navbar .container {
    flex-direction: column;
    gap: 16px;
  }

  .navbar-links {
    gap: 20px;
  }

  .hero {
    padding: 80px 0;
  }

  .hero h1 {
    font-size: 32px;
  }

  .hero p {
    font-size: 16px;
  }

  .category-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .city-list {
    flex-direction: column;
    gap: 16px;
  }

  .projects-preview,
  .trust-section {
    padding: 60px 0;
  }

  .projects-preview h2,
  .trust-section h2 {
    font-size: 24px;
  }

  .page-header {
    padding: 60px 0 40px;
  }

  .page-header h1 {
    font-size: 28px;
  }

  .filters {
    flex-direction: column;
  }

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

  .project-card-header {
    flex-direction: column;
    gap: 12px;
  }

  .property-header {
    padding: 60px 0 40px;
  }

  .property-header h1 {
    font-size: 28px;
  }

  .property-details,
  .decision-support,
  .trust-presence,
  .property-cta {
    padding: 60px 0;
  }

  .property-details h2,
  .decision-support h2,
  .trust-presence h2,
  .property-cta h2 {
    font-size: 24px;
  }

  .details-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cta-buttons {
    flex-direction: column;
  }
}

/* Add to css/main.css */

.page {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 250ms cubic-bezier(0.4, 0.0, 0.2, 1),
    transform 250ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.page.loaded {
  opacity: 1;
  transform: translateY(0);
}

.page.exiting {
  opacity: 0;
  transform: translateY(-8px);
}

/* Add to css/main.css */

.start-here-container {
  min-height: calc(100vh - 61px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0f0f0f;
  padding: 60px 0;
}

.start-here-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.start-here-content h1 {
  font-size: 36px;
  font-weight: 400;
  margin-bottom: 16px;
  color: #e0e0e0;
}

.start-here-subtitle {
  font-size: 16px;
  color: #909090;
  margin-bottom: 80px;
}

.persona-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.persona-card {
  padding: 48px 32px;
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
  cursor: pointer;
  transition: all 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
  text-align: left;
}

.persona-card h3 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 12px;
  color: #e0e0e0;
  transition: color 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.persona-card p {
  font-size: 15px;
  color: #909090;
  transition: color 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.persona-card[data-persona="investor"]:hover {
  border-color: #4a6b7c;
  background-color: rgba(74, 107, 124, 0.08);
}

.persona-card[data-persona="investor"]:hover h3 {
  color: #7ba3b8;
}

.persona-card[data-persona="investor"]:hover p {
  color: #a0b5c0;
}

.persona-card[data-persona="family"]:hover {
  border-color: #8a6f4a;
  background-color: rgba(138, 111, 74, 0.08);
}

.persona-card[data-persona="family"]:hover h3 {
  color: #b89a6f;
}

.persona-card[data-persona="family"]:hover p {
  color: #c0ad90;
}

.persona-card[data-persona="land"]:hover {
  border-color: #5a7a5a;
  background-color: rgba(90, 122, 90, 0.08);
}

.persona-card[data-persona="land"]:hover h3 {
  color: #7fa37f;
}

.persona-card[data-persona="land"]:hover p {
  color: #a0b8a0;
}

.persona-card[data-persona="business"]:hover {
  border-color: #501f06;
  background-color: rgba(138, 106, 90, 0.08);
}

.persona-card[data-persona="business"]:hover h3 {
  color: #b8927a;
}

.persona-card[data-persona="business"]:hover p {
  color: #c0ab98;
}

@media (max-width: 768px) {
  .start-here-container {
    min-height: auto;
    padding: 40px 0;
  }

  .start-here-content h1 {
    font-size: 28px;
  }

  .start-here-subtitle {
    margin-bottom: 60px;
  }

  .persona-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .persona-card {
    padding: 36px 24px;
  }
}

/* Add to css/main.css */

.start-here-container {
  position: relative;
  overflow: hidden;
}

.start-here-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

.start-here-container.bg-investor::before {
  background-image: linear-gradient(135deg, #0a1929 0%, #1a2332 100%);
  opacity: 0.4;
}

.start-here-container.bg-family::before {
  background-image: linear-gradient(135deg, #1f1810 0%, #2d2318 100%);
  opacity: 0.4;
}

.start-here-container.bg-land::before {
  background-image: linear-gradient(135deg, #0f1a0f 0%, #1a2a1a 100%);
  opacity: 0.4;
}

.start-here-container.bg-business::before {
  background-image: linear-gradient(135deg, #1a140f 0%, #2a1f18 100%);
  opacity: 0.4;
}

.start-here-container.selection-active::before {
  opacity: 0.05;
  transition: opacity 1200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.start-here-content {
  position: relative;
  z-index: 1;
}

.persona-grid {
  position: relative;
}

.persona-card {
  position: relative;
  transform-origin: center;
  will-change: transform, opacity;
}

.persona-card.is-hovered {
  transform: scale(1.08) translateZ(0);
  z-index: 10;
  transition: all 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.persona-card.is-dimmed {
  opacity: 0.25;
  filter: blur(2px);
  transition: all 600ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.persona-card.is-active {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(2.4);
  z-index: 100;
  border-color: transparent;
  background-color: #0f0f0f;
  opacity: 1;
  filter: none;
  pointer-events: none;
  transition: all 900ms cubic-bezier(0.4, 0.0, 0.2, 1);
  width: 450px;
  height: 240px;
}

.persona-card.is-active h3 {
  position: fixed;
  top: 20px;
  left: 24px;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
  z-index: 101;
  transition: all 900ms cubic-bezier(0.4, 0.0, 0.2, 1);
  transform: translateZ(0);
}

.persona-card.is-active p {
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.persona-card[data-persona="investor"].is-active h3 {
  color: #7ba3b8;
}

.persona-card[data-persona="family"].is-active h3 {
  color: #b89a6f;
}

.persona-card[data-persona="land"].is-active h3 {
  color: #7fa37f;
}

.persona-card[data-persona="business"].is-active h3 {
  color: #b8927a;
}

.persona-grid.selection-active .persona-card:not(.is-active) {
  opacity: 0;
  transform: scale(0.9);
  transition: all 700ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.start-here-content h1,
.start-here-subtitle {
  transition: opacity 600ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.persona-grid.selection-active~h1,
.selection-active .start-here-subtitle {
  opacity: 0;
}

/* Add horizontal scrolling to property proof section */
.property-proof {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.proof-grid {
  min-width: min-content;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===============================================
   FIX: Remove horizontal scroll from proof-grid
   =============================================== */

/* Desktop: Keep 3 blocks side-by-side, prevent overflow */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  overflow-x: visible;
  overflow-y: visible;
  max-width: 100%;
}

.proof-block {
  min-width: 0;
  overflow: hidden;
}

/* Tablet: 2 columns */
@media (max-width: 900px) {
  .proof-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

/* Mobile: Stack vertically */
@media (max-width: 768px) {
  .proof-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .persona-card.is-hovered {
    transform: scale(1.04) translateZ(0);
  }

  .persona-card.is-active {
    width: 90vw;
    height: 200px;
    transform: translate(-50%, -50%) scale(1.2);
  }

  .persona-card.is-active h3 {
    font-size: 16px;
  }
}

/* -------------------------------------------------
   PROCESS / PROOF THROUGH PROCESS (PHASE 8A)
------------------------------------------------- */
/* Add horizontal scrolling to progress section */
.progress-timeline {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

.progress-timeline li {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}

.process-proof {
  max-width: 1100px;
  /* aligns with premium content width */
  margin: 120px auto;
  /* vertical rhythm + centered container */
  padding: 0 48px;
  /* space from viewport edges */
}

.process-proof h2 {
  margin-bottom: 12px;
}

.process-intro {
  max-width: 720px;
  margin-bottom: 56px;
  color: #b5b5b5;
}

.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.process-step {
  max-width: 820px;
  /* keeps text readable */
}

.step-number {
  display: block;
  margin-bottom: 8px;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: #777;
}

/* -------------------------------------------------
   LOCAL AUTHORITY SIGNALS (PHASE 8B)
------------------------------------------------- */

.local-presence {
  max-width: 1100px;
  margin: 120px auto;
  padding: 0 48px;
}

.presence-intro {
  max-width: 720px;
  margin-bottom: 56px;
  color: #b5b5b5;
}

.presence-cities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 64px;
}

.city h3 {
  margin-bottom: 8px;
}

.city p {
  max-width: 420px;
  color: #cfcfcf;
}

/* -------------------------------------------------
   DECISION CONFIDENCE TOOLS (PHASE 8C)
------------------------------------------------- */

.decision-confidence {
  max-width: 1100px;
  margin: 120px auto;
  padding: 0 48px;
}

.decision-intro {
  max-width: 720px;
  margin-bottom: 56px;
  color: #b5b5b5;
}

.decision-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 72px;
}

.decision-block h3 {
  margin-bottom: 16px;
}

.decision-block ul {
  list-style: none;
  padding-left: 0;
}

.decision-block li {
  margin-bottom: 12px;
  color: #cfcfcf;
}

.property-block {
  margin: 48px 0;
}

.property-block ul {
  list-style: none;
  padding: 0;
}

.property-block li {
  margin-bottom: 8px;
  color: #cfcfcf;
}

.property-block.risk {
  border-left: 2px solid #444;
  padding-left: 24px;
}

/* PHASE F: PROPERTY TRANSPARENCY SECTION */

.property-transparency {
  padding: 100px 0;
  background-color: #0f0f0f;
  border-top: 1px solid #2a2a2a;
}

.transparency-heading {
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 16px;
  color: #e0e0e0;
}

.transparency-intro {
  font-size: 16px;
  color: #909090;
  margin-bottom: 60px;
  max-width: 700px;
}

.transparency-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.transparency-block {
  padding: 32px;
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
}

.transparency-block-risk {
  background-color: rgba(138, 106, 90, 0.05);
  border-color: rgba(163, 126, 107, 0.2);
}

.transparency-block-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #e0e0e0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 15px;
}

.transparency-content {
  color: #b0b0b0;
  font-size: 15px;
  line-height: 1.7;
}

.transparency-content p {
  margin-bottom: 12px;
}

.transparency-content p:last-child {
  margin-bottom: 0;
}

.transparency-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.transparency-list li {
  padding: 12px 0;
  border-bottom: 1px solid #2a2a2a;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.transparency-list li:last-child {
  border-bottom: none;
}

.transparency-list-label {
  font-weight: 500;
  color: #e0e0e0;
  flex-shrink: 0;
  margin-right: 20px;
}

.transparency-list-value {
  color: #b0b0b0;
  text-align: right;
}

.transparency-status {
  display: inline-block;
  padding: 4px 12px;
  font-size: 13px;
  border-radius: 2px;
  font-weight: 500;
}

.transparency-status.status-verified {
  background-color: rgba(107, 138, 107, 0.15);
  color: #7fa37f;
  border: 1px solid rgba(107, 138, 107, 0.3);
}

.transparency-status.status-pending {
  background-color: rgba(168, 133, 107, 0.15);
  color: #a8856b;
  border: 1px solid rgba(168, 133, 107, 0.3);
}

.transparency-status.status-available {
  background-color: rgba(107, 143, 163, 0.15);
  color: #6b8fa3;
  border: 1px solid rgba(107, 143, 163, 0.3);
}

.transparency-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}

.transparency-timeline li {
  padding: 16px 0;
  border-left: 2px solid #2a2a2a;
  padding-left: 20px;
  position: relative;
}

.transparency-timeline li::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 20px;
  width: 8px;
  height: 8px;
  background-color: #404040;
  border-radius: 50%;
}

.transparency-timeline li:last-child {
  border-left-color: transparent;
}

.transparency-timeline-label {
  font-weight: 500;
  color: #e0e0e0;
  display: block;
  margin-bottom: 4px;
}

.transparency-timeline-value {
  color: #909090;
  font-size: 14px;
}

.transparency-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.transparency-checklist li {
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.transparency-checklist-icon {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
}

.transparency-checklist-icon.available {
  background-color: rgba(107, 138, 107, 0.3);
  border: 1px solid #7fa37f;
}

.transparency-checklist-icon.on-request {
  background-color: rgba(107, 143, 163, 0.3);
  border: 1px solid #6b8fa3;
}

.transparency-risk-note {
  padding: 16px;
  background-color: rgba(138, 106, 90, 0.1);
  border-left: 3px solid rgba(163, 126, 107, 0.5);
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.6;
}

.transparency-risk-note:last-child {
  margin-bottom: 0;
}

.transparency-faq-item {
  margin-bottom: 24px;
}

.transparency-faq-item:last-child {
  margin-bottom: 0;
}

.transparency-faq-question {
  font-weight: 500;
  color: #e0e0e0;
  margin-bottom: 8px;
  font-size: 15px;
}

.transparency-faq-answer {
  color: #b0b0b0;
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .property-transparency {
    padding: 60px 0;
  }

  .transparency-heading {
    font-size: 24px;
  }

  .transparency-intro {
    margin-bottom: 40px;
  }

  .transparency-grid {
    gap: 24px;
  }

  .transparency-block {
    padding: 24px;
  }

  .transparency-list li {
    flex-direction: column;
    gap: 8px;
  }

  .transparency-list-value {
    text-align: left;
  }
}

/* PHASE F — Property Transparency */

.property-transparency {
  background: #0f1115;
  padding: 80px 0;
  color: #e8e8e8;
}

.transparency-heading {
  font-size: 32px;
  margin-bottom: 10px;
}

.transparency-subtext {
  color: #9aa0a6;
  margin-bottom: 40px;
}

.transparency-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.transparency-card {
  background: #161a20;
  border-radius: 10px;
  padding: 24px;
}

.transparency-card h3 {
  margin-bottom: 14px;
  font-size: 18px;
  color: #f5f5f5;
}

.transparency-card div p {
  font-size: 14px;
  color: #c9c9c9;
  margin: 6px 0;
}

.transparency-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  margin-left: 6px;
}

.badge-yes {
  background: #1f6f43;
}

.badge-no {
  background: #7a2d2d;
}

.badge-partial {
  background: #8a6f2d;
}

.transparency-card {
  cursor: pointer;
  transition: background 0.2s ease;
}

.transparency-card:hover {
  background: #1b2028;
}

.transparency-card div {
  margin-top: 12px;
}

/* PHASE G — PROPERTY PROOF */

.property-proof {
  padding: 100px 0;
  background-color: #1a1a1a;
  border-top: 1px solid #2a2a2a;
}

.proof-header {
  margin-bottom: 60px;
}

.verified-badge {
  display: inline-block;
  font-size: 13px;
  padding: 6px 14px;
  border: 1px solid #3a5f7a;
  color: #7ba3b8;
  margin-bottom: 16px;
}

.proof-subtext {
  color: #b0b0b0;
  max-width: 700px;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.proof-block {
  padding: 32px;
  background-color: #0f0f0f;
  border: 1px solid #2a2a2a;
}

.progress-timeline {
  list-style: none;
  padding-left: 0;
}

.progress-timeline li {
  padding: 10px 0;
  color: #909090;
}

.progress-timeline .completed {
  color: #7ba3b8;
}

.progress-timeline .active {
  color: #e0e0e0;
}

.audit-log {
  list-style: none;
  padding-left: 0;
}

.audit-log li {
  padding: 8px 0;
  font-size: 14px;
  color: #b0b0b0;
}

/* PHASE G-2 — INSTITUTIONAL TRUST */

.institutional-trust {
  padding: 120px 0;
  background-color: #0f0f0f;
  border-top: 1px solid #2a2a2a;
}

.institutional-trust h2 {
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 24px;
}

.trust-intro {
  font-size: 18px;
  color: #b0b0b0;
  max-width: 800px;
  margin-bottom: 60px;
  line-height: 1.7;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.trust-card {
  padding: 32px;
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
}

.trust-card h3 {
  font-size: 18px;
  margin-bottom: 12px;
}

.trust-card p {
  font-size: 15px;
  color: #b0b0b0;
  line-height: 1.6;
}

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

.projects-trust-strip {
  padding: 60px 0;
  border-top: 1px solid #2a2a2a;
  background-color: #0f0f0f;
}

.projects-trust-strip p {
  color: #909090;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.7;
}

.contact-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #0f0f0f;
  border-top: 1px solid #2a2a2a;
  display: flex;
  justify-content: space-around;
  padding: 14px 0;
  z-index: 999;
}

.contact-bar a {
  color: #b0b0b0;
  text-decoration: none;
  font-size: 14px;
}

.contact-bar a:hover {
  color: #ffffff;
}

.callback-section {
  padding: 80px 0;
  background-color: #1a1a1a;
  border-top: 1px solid #2a2a2a;
}

.callback-form {
  max-width: 500px;
}

.callback-form input {
  width: 100%;
  margin-bottom: 16px;
  padding: 12px;
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  color: #e0e0e0;
}

.appointment-section {
  padding: 80px 0;
  background-color: #0f0f0f;
  border-top: 1px solid #2a2a2a;
}

.appointment-form input {
  width: 100%;
  margin-bottom: 16px;
  padding: 12px;
}

/* PHASE I — INVESTMENT ANALYTICS */

.investment-analytics {
  padding: 100px 0;
  background-color: #1a1a1a;
  border-top: 1px solid #2a2a2a;
}

.analytics-intro {
  max-width: 700px;
  color: #b0b0b0;
  margin-bottom: 60px;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.analytics-card {
  padding: 32px;
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
}

.analytics-card input {
  width: 100%;
  margin-bottom: 12px;
  padding: 10px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  color: #e0e0e0;
}

.risk-bar {
  height: 12px;
  background: #2a2a2a;
  margin-top: 12px;
}

.risk-fill {
  width: 65%;
  height: 100%;
  background: #7ba3b8;
}

.knowledge-grid {
  padding: 100px 0;
  background: #ffffff;
}

.knowledge-grid .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.knowledge-card {
  padding: 32px;
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
}

.knowledge-card h3 {
  margin-bottom: 12px;
}

.knowledge-card p {
  color: #b0b0b0;
  line-height: 1.6;
}

.persona-paths {
  padding: 100px 0;
  background-color: #0f0f0f;
  border-top: 1px solid #2a2a2a;
}

.paths-intro {
  color: #b0b0b0;
  max-width: 700px;
  margin-bottom: 48px;
}

.paths-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.path-card {
  padding: 32px;
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
}

.path-card h3 {
  margin-bottom: 16px;
}

.path-card ul {
  list-style: none;
  padding-left: 0;
}

.path-card li {
  padding: 6px 0;
  color: #b0b0b0;
}

/* ==========================================================
   INSIGHTS — INSTITUTIONAL LAYOUT SYSTEM
   ========================================================== */

.insights-intro {
  padding: 80px 0;
  background: #0f0f0f;
  border-bottom: 1px solid #222;
}

.insights-statement {
  max-width: 860px;
  font-size: 18px;
  line-height: 1.75;
  color: #c2c2c2;
}

/* ------------------ SECTION BASE ------------------ */

.knowledge-foundation,
.persona-learning,
.insights-tools {
  padding: 110px 0;
}

.section-intro {
  max-width: 720px;
  margin-bottom: 64px;
  color: #b0b0b0;
  font-size: 17px;
  line-height: 1.7;
}

/* ------------------ CORE KNOWLEDGE ------------------ */

.knowledge-blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 42px;
}

.knowledge-block {
  padding: 36px;
  background: linear-gradient(180deg, #141414, #0e0e0e);
  border: 1px solid #242424;
}

.knowledge-block h3 {
  margin-bottom: 14px;
}

.knowledge-block p {
  color: #b6b6b6;
  line-height: 1.7;
}

.knowledge-points {
  margin-top: 18px;
  padding-left: 18px;
}

.knowledge-points li {
  color: #a8a8a8;
  margin-bottom: 6px;
}

/* ------------------ PERSONA TRACKS ------------------ */

.persona-tracks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}

.track-block {
  padding: 44px;
  background: linear-gradient(180deg, #131313, #0b0b0b);
  border: 1px solid #262626;
}

.track-block h3 {
  margin-bottom: 10px;
}

.track-block p {
  color: #b8b8b8;
  margin-bottom: 28px;
}

.track-topics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.topic-item strong {
  display: block;
  margin-bottom: 4px;
  color: #e4e4e4;
}

.topic-item span {
  color: #9f9f9f;
  font-size: 14px;
  line-height: 1.6;
}

/* ------------------ TOOLS ------------------ */

.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}

.tool-card {
  padding: 44px;
  background: linear-gradient(180deg, #121212, #0b0b0b);
  border: 1px solid #242424;
}

.tool-card p {
  color: #b0b0b0;
  margin-bottom: 22px;
}

.tool-inputs {
  display: grid;
  gap: 14px;
}

.tool-inputs input {
  padding: 12px;
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  color: #e0e0e0;
}

.tool-button {
  padding: 12px;
  background: #1a1a1a;
  border: 1px solid #3a3a3a;
  color: #d0d0d0;
  cursor: pointer;
}

.tool-result {
  margin-top: 18px;
  color: #c2c2c2;
}

/* ------------------ RESPONSIVE ------------------ */

@media (max-width: 900px) {

  .knowledge-blocks,
  .persona-tracks,
  .tools-grid {
    grid-template-columns: 1fr;
  }

  .track-topics {
    grid-template-columns: 1fr;
  }
}

.active-track {
  max-width: 600px;
  margin: 0 auto 80px;
  text-align: center;
}

.knowledge-index {
  padding: 100px 0;
}

.knowledge-entry {
  padding: 32px;
  border: 1px solid #2a2a2a;
  margin-bottom: 24px;
  background: #0f0f0f;
}

.knowledge-entry h3 {
  margin-bottom: 6px;
}

.knowledge-entry p {
  color: #909090;
  margin-bottom: 12px;
}

.guide-content {
  padding: 80px 0 120px;
}

.guide-content p {
  max-width: 760px;
  font-size: 17px;
  line-height: 1.7;
  color: #c0c0c0;
}

.knowledge-entry {
  padding: 32px;
  border: 1px solid #2a2a2a;
  margin-bottom: 24px;
  background: #0f0f0f;
}

/* ==========================================================
   PHASE E — LAND & MAP INTELLIGENCE (World-Class Styling)
   ========================================================== */

.property-map-section {
  margin-top: 80px;
  padding: 60px 0;
  background: linear-gradient(180deg, rgba(15, 18, 25, 0.85), rgba(15, 18, 25, 0.95));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.property-map-section .container {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: stretch;
}

.property-map-section h2 {
  grid-column: 1 / -1;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
  color: #e6ecf3;
}

/* ================= Map ================= */

#propertyMap {
  height: 420px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  background: #0f1219;
}

/* ================= Intelligence Grid ================= */

.land-context {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.land-context>div {
  padding: 22px 24px;
  border-radius: 14px;
  background: rgba(20, 24, 33, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.land-context>div:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  border-color: rgba(123, 163, 184, 0.5);
}

.land-context strong {
  display: block;
  margin-bottom: 10px;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #7ba3b8;
}

.land-context br {
  line-height: 1.9;
}

.land-context {
  color: #d3dbe5;
  font-size: 0.95rem;
}

/* ================= Responsive ================= */

@media (max-width: 900px) {
  .property-map-section .container {
    grid-template-columns: 1fr;
  }

  #propertyMap {
    height: 360px;
  }
}

@media (max-width: 500px) {
  .land-context {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   PHASE L — TRUST & AUTHORITY STACK
   ========================================================== */

.trust-authority {
  padding: 110px 0;
  background: #0f0f0f;
  border-top: 1px solid #2a2a2a;
}

.trust-authority h2 {
  font-size: 32px;
  margin-bottom: 10px;
}

.trust-subtext {
  max-width: 700px;
  color: #b0b0b0;
  margin-bottom: 60px;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.trust-seal {
  padding: 28px;
  background: #161a20;
  border: 1px solid #2a2a2a;
  transition: all 0.25s ease;
}

.trust-seal strong {
  display: block;
  margin-bottom: 8px;
}

.trust-seal span {
  color: #9aa0a6;
  font-size: 14px;
}

.trust-seal:hover {
  border-color: #7ba3b8;
  background: #1b2028;
  transform: translateY(-4px);
}

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

/* ==========================================================
   PHASE M — DECISION PSYCHOLOGY
   ========================================================== */

.micro-commit {
  padding: 60px 0;
  background: #0f1219;
  border-top: 1px solid #2a2a2a;
  text-align: center;
}

.micro-text {
  font-size: 18px;
  color: #e0e0e0;
  margin-bottom: 24px;
}

.micro-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.micro-btn {
  padding: 12px 28px;
  border: 1px solid #7ba3b8;
  background: transparent;
  color: #7ba3b8;
  cursor: pointer;
  transition: all 0.25s ease;
}

.micro-btn.secondary {
  border-color: #444;
  color: #aaa;
}

.micro-btn:hover {
  background: rgba(123, 163, 184, 0.15);
}

/* ==========================================================
   PHASE N — RETENTION & RETURN EXPERIENCE
   ========================================================== */

.return-banner {
  display: none;
  background: #10151c;
  border-bottom: 1px solid #2a2a2a;
  padding: 14px 0;
  color: #7ba3b8;
  font-size: 14px;
}

body.return-visitor .return-banner {
  display: block;
}

/* ==========================================================
   PHASE O — STRATEGIC INTELLIGENCE CONSOLE (INSTITUTIONAL)
   ========================================================== */

.analytics-subtitle {
  font-size: 15px;
  color: #8f97a3;
  margin-bottom: 64px;
  letter-spacing: 0.3px;
}

/* ---------- GRID ---------- */

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 42px 48px;
}

/* ---------- CARDS ---------- */

.analytics-card {
  position: relative;
  padding: 40px 42px 46px;
  background: linear-gradient(180deg, #0f1115 0%, #0b0d11 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

/* subtle internal glow */
.analytics-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 60% at 10% -20%, rgba(123, 163, 184, 0.06), transparent 60%);
  pointer-events: none;
}

/* ---------- TITLES ---------- */

.analytics-card h3 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #7ba3b8;
  margin-bottom: 22px;
}

/* ---------- DATA LINES ---------- */

.analytics-card p {
  font-size: 15px;
  color: #d0d7df;
  line-height: 1.8;
  display: flex;
  justify-content: space-between;
}

.analytics-card p:not(:last-child) {
  margin-bottom: 10px;
}

.analytics-card p span {
  color: #9aa5b1;
}

/* ---------- EMPHASIS ---------- */

.analytics-card p strong {
  color: #e8edf2;
  font-weight: 500;
}

/* ---------- HOVER BEHAVIOR ---------- */

.analytics-card:hover {
  border-color: rgba(123, 163, 184, 0.45);
  box-shadow:
    0 60px 140px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
  transition: all 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ---------- RESPONSIVE ---------- */

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

  .analytics-card {
    padding: 34px 32px 38px;
  }
}

/* ---------- Executive Readability Enhancements ---------- */

.analytics-card p {
  font-size: 16px;
}

.analytics-card p span {
  font-size: 14px;
  color: #9aa5b1;
}

.analytics-card h3 {
  font-size: 13px;
  letter-spacing: 1.2px;
}

.analytics-card strong {
  font-weight: 600;
}

.analytics-guidance {
  border-left: 3px solid #7ba3b8;
  background: linear-gradient(180deg, #10151c, #0c0f14);
}

/* ================= EXECUTIVE REFINEMENT ================= */

.analytics-card h3 {
  font-size: 15px;
  letter-spacing: 1.1px;
}

.analytics-card p {
  font-size: 16px;
  line-height: 1.9;
}

.analytics-card span {
  color: #9aa5b1;
}

.card-note {
  margin-top: 14px;
  font-size: 13px;
  color: #7f8894;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 10px;
}

.action-list {
  margin-top: 12px;
  padding-left: 18px;
}

.action-list li {
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.7;
}

.analytics-guidance {
  border-left: 4px solid #7ba3b8;
  background: linear-gradient(180deg, #10151c, #0c1016);
}

/* ================= Confidence & Trend Layer ================= */

.confidence-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 14px;
}

.confidence-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #7ba3b8, #9fd3f0);
  transition: width 0.6s ease;
}

.analytics-card:hover .confidence-fill {
  width: calc(var(--confidence) * 1%);
}

/* ================= Forecast Panel ================= */

.forecast-card {
  border-left: 4px solid #8fd18b;
  background: linear-gradient(180deg, #0f1411, #0c100e);
}

.forecast-card h3 {
  color: #8fd18b;
}

/* ================= Buyer Priority Panel ================= */

.priority-card {
  border-left: 4px solid #d1a85f;
  background: linear-gradient(180deg, #15110b, #0f0b07);
}

.priority-card h3 {
  color: #d1a85f;
}

/* ================= Market Focus & Opportunity ================= */

.opportunity-card {
  border-left: 4px solid #6da6d9;
  background: linear-gradient(180deg, #0f141b, #0b1016);
}

.opportunity-card h3 {
  color: #6da6d9;
}

/* ================= Command Layer ================= */

.followup-card {
  border-left: 4px solid #7fbf9f;
  background: linear-gradient(180deg, #0f1513, #0b100e);
}

.followup-card h3 {
  color: #7fbf9f;
}

.playbook-card {
  border-left: 4px solid #c78bd6;
  background: linear-gradient(180deg, #140f16, #100b12);
}

.playbook-card h3 {
  color: #c78bd6;
}

/* ================= Team Performance ================= */

.team-card {
  border-left: 4px solid #f0a868;
  background: linear-gradient(180deg, #15110b, #100c08);
}

.team-card h3 {
  color: #f0a868;
}

/* ================= Executive Summary ================= */

.executive-card {
  border-left: 5px solid #4aa3df;
  background: linear-gradient(180deg, #0f1419, #0b1015);
}

.executive-card h3 {
  color: #4aa3df;
}

/* ========================================
   PHASE W1: MOBILE & RESPONSIVE PERFECTION
   ======================================== */

/* Enhanced Mobile Container */
@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }
}

/* Touch-Friendly Navigation */
@media (max-width: 768px) {
  .navbar {
    padding: 16px 0;
  }

  .navbar-links a {
    padding: 8px 12px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* Improved Mobile Typography */
@media (max-width: 480px) {
  .hero h1 {
    font-size: 28px;
    line-height: 1.25;
  }

  .hero p {
    font-size: 15px;
  }

  .page-header h1,
  .property-header h1 {
    font-size: 24px;
    line-height: 1.3;
  }

  .projects-preview h2,
  .trust-section h2,
  .property-details h2,
  .decision-support h2,
  .trust-presence h2,
  .property-cta h2 {
    font-size: 22px;
  }
}

/* Enhanced Button Touch Targets */
@media (max-width: 768px) {

  .btn-primary,
  .btn-secondary {
    padding: 16px 28px;
    min-height: 48px;
    width: 100%;
    text-align: center;
  }

  .cta-buttons {
    width: 100%;
  }

  .cta-buttons .btn-primary,
  .cta-buttons .btn-secondary {
    width: 100%;
  }
}

/* Improved Grid Spacing Mobile */
@media (max-width: 768px) {

  .category-grid,
  .projects-grid,
  .details-grid {
    gap: 20px;
  }

  .category-card,
  .project-card,
  .detail-item {
    padding: 28px 20px;
  }
}

/* Mobile Form Elements */
@media (max-width: 768px) {
  .filter-select {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"] {
    width: 100%;
    font-size: 16px;
    padding: 14px;
  }
}

/* Landscape Mobile Optimization */
@media (max-width: 900px) and (max-height: 500px) {
  .hero {
    padding: 60px 0;
  }

  .page-header,
  .property-header {
    padding: 50px 0 35px;
  }
}

/* Small Device Optimization */
@media (max-width: 375px) {
  body {
    font-size: 15px;
  }

  .navbar-brand {
    font-size: 16px;
  }

  .navbar-links {
    gap: 16px;
  }

  .navbar-links a {
    font-size: 14px;
  }
}

/* Tablet Portrait Refinement */
@media (min-width: 769px) and (max-width: 1024px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

/* Touch Interaction States */
@media (hover: none) and (pointer: coarse) {

  .btn-primary:active,
  .btn-secondary:active {
    transform: scale(0.98);
    transition: transform 0.1s;
  }

  .project-card:active,
  .category-card:active {
    transform: scale(0.99);
  }

  .navbar-links a:active {
    opacity: 0.7;
  }
}

/* ========================================
   PHASE W2: VISUAL & UX REFINEMENT
   ======================================== */

/* Enhanced Visual Hierarchy */
.hero h1,
.page-header h1,
.property-header h1 {
  letter-spacing: -0.02em;
}

.projects-preview h2,
.trust-section h2,
.property-details h2,
.decision-support h2,
.property-cta h2 {
  letter-spacing: -0.01em;
}

/* Improved Contrast & Readability */
.hero p,
.trust-section p,
.property-summary {
  color: #b8b8b8;
}

.category-card p,
.project-description,
.detail-value,
.support-section p {
  color: #b5b5b5;
}

/* Enhanced Card Affordance */
.category-card,
.project-card {
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.category-card:hover {
  border-color: #353535;
  background-color: #151515;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Improved Focus States */
.btn-primary:focus,
.btn-secondary:focus,
.filter-select:focus,
input:focus {
  outline: 2px solid #7ba3b8;
  outline-offset: 2px;
}

/* Enhanced Status Indicators */
.transparency-status {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.verified-badge {
  font-weight: 600;
  letter-spacing: 0.5px;
  background-color: rgba(123, 163, 184, 0.08);
}

/* Refined Border Treatments */
.navbar,
.hero,
.projects-preview,
.trust-section,
.page-header,
.footer {
  border-color: #252525;
}

.category-card,
.project-card,
.detail-item,
.transparency-block {
  border-color: #282828;
}

/* Enhanced List Spacing */
.city-list {
  gap: 32px;
}

.city-list li {
  transition: all 0.2s;
}

.city-list li:hover {
  border-color: #353535;
  background-color: #1f1f1f;
}

/* Improved Section Rhythm */
.projects-preview,
.trust-section,
.property-details,
.decision-support,
.trust-presence,
.property-cta {
  padding: 110px 0;
}

@media (max-width: 768px) {

  .projects-preview,
  .trust-section,
  .property-details,
  .decision-support,
  .trust-presence,
  .property-cta {
    padding: 70px 0;
  }
}

/* Enhanced Property Type Labels */
.project-type,
.property-type-label {
  font-weight: 600;
  letter-spacing: 0.5px;
  border-color: #2d2d2d;
}

/* Refined Detail Items */
.detail-label {
  font-weight: 600;
  color: #999;
}

.detail-value {
  font-weight: 500;
}

/* Enhanced Presence Note */
.presence-note {
  color: #999;
}

/* Visual Consistency for Sections */
.property-transparency,
.property-proof,
.institutional-trust,
.investment-analytics,
.trust-authority {
  border-color: #252525;
}

/* Improved Map Intelligence */
.land-context>div {
  border-color: rgba(255, 255, 255, 0.08);
}

.land-context>div:hover {
  border-color: rgba(123, 163, 184, 0.6);
}

/* Enhanced Analytics Cards */
.analytics-card {
  border-color: rgba(255, 255, 255, 0.08);
}

.analytics-card:hover {
  border-color: rgba(123, 163, 184, 0.5);
}

/* ========================================
   PHASE W3: SEO & DISCOVERABILITY
   ======================================== */

/* Semantic Emphasis Enhancement */
h1,
h2,
h3 {
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

/* Improved Content Scannability */
.hero p,
.page-header p,
.property-summary,
.trust-section p,
.property-cta p {
  max-width: 720px;
}

.section-intro,
.trust-intro,
.analytics-intro,
.paths-intro {
  max-width: 740px;
}

/* Enhanced Link Affordance */
a {
  text-decoration-skip-ink: auto;
}

.navbar-links a,
.project-card {
  position: relative;
}

.navbar-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #7ba3b8;
  transition: width 0.3s ease;
}

.navbar-links a:hover::after,
.navbar-links a.active::after {
  width: 100%;
}

/* Category & Project Clarity */
.category-card h3,
.project-card h3 {
  color: #efefef;
}

.project-city {
  font-weight: 500;
  color: #999;
}

/* Enhanced Status Communication */
.transparency-status,
.verified-badge {
  text-transform: uppercase;
  font-size: 12px;
}

/* Location Context Enhancement */
.property-location {
  font-weight: 500;
}

/* Improved Action Hierarchy */
.btn-primary {
  font-weight: 500;
}

.btn-secondary {
  font-weight: 400;
}

/* List Item Enhancement */
.city-list li {
  font-weight: 500;
}

/* Enhanced Detail Labels */
.detail-label {
  font-size: 12px;
}

/* Section Heading Consistency */
.transparency-heading,
.proof-header h2,
.institutional-trust h2,
.investment-analytics h2,
.trust-authority h2 {
  letter-spacing: -0.01em;
}

/* Improved Descriptive Text */
.transparency-intro,
.proof-subtext,
.analytics-intro {
  line-height: 1.75;
}

/* Enhanced Card Titles */
.transparency-block-title,
.analytics-card h3,
.trust-card h3 {
  font-weight: 600;
}

/* Better Visual Anchors */
.property-type-label,
.project-type {
  text-transform: uppercase;
}

/* Footer Enhancement */
.footer p {
  color: #808080;
}

/* ========================================
   PHASE W4: PERFORMANCE & PAGE SPEED
   ======================================== */

/* GPU Acceleration for Animations */
.navbar,
.btn-primary,
.btn-secondary,
.category-card,
.project-card,
.persona-card,
.analytics-card {
  will-change: transform;
  transform: translateZ(0);
}

/* Optimized Transition Performance */
.category-card,
.project-card,
.city-list li,
.filter-select,
.navbar-links a,
.btn-primary,
.btn-secondary {
  transition-property: transform, opacity, background-color, border-color;
}

/* Reduce Paint Operations */
.navbar {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Optimize Font Rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}

h1,
h2,
h3 {
  text-rendering: optimizeLegibility;
}

/* Efficient Background Handling */
.hero,
.projects-preview,
.trust-section,
.page-header,
.property-details,
.footer {
  background-attachment: scroll;
}

/* Contain Layout Shifts */
.category-grid,
.projects-grid,
.details-grid,
.transparency-grid,
.analytics-grid,
.trust-grid {
  content-visibility: auto;
}

/* Optimize Image Placeholder Space */
.site-image {
  aspect-ratio: 16 / 9;
}

/* Defer Non-Critical Animations */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Efficient Hover States */
@media (hover: hover) {

  .category-card:hover,
  .project-card:hover,
  .analytics-card:hover {
    transform: translateY(-2px) translateZ(0);
  }
}

/* Optimize Fixed Elements */
.navbar {
  contain: layout style paint;
}

.contact-bar {
  contain: layout style;
}

/* Reduce Composite Layers */
.transparency-block,
.analytics-card,
.trust-card,
.detail-item {
  transform: translate3d(0, 0, 0);
}

/* Efficient Grid Rendering */
.category-grid,
.projects-grid,
.details-grid {
  contain: layout;
}

/* Optimize Scrolling Performance */
.start-here-container,
.property-map-section {
  overflow: hidden;
  contain: paint;
}

/* Efficient Border Rendering */
.category-card,
.project-card,
.detail-item,
.transparency-block,
.analytics-card {
  isolation: isolate;
}

/* ===============================
   PHASE W — VIEWPORT SAFETY FIX
   =============================== */

html,
body {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.page,
.container,
.app,
main {
  height: auto;
  min-height: 100%;
  overflow: visible;
}

/* ===============================
   PHASE W — TABLET STABILITY
   =============================== */

@media (min-width: 768px) and (max-width: 1024px) {
  body {
    overflow-y: auto;
  }

  nav,
  footer,
  .bottom-bar {
    position: relative;
  }
}

/* ===============================
   PROPERTY PAGE CLIPPING FIX
   =============================== */

body {
  overflow-x: hidden;
  overflow-y: auto;
}

.property-page,
.property-wrapper,
.property-container,
.page {
  overflow: visible !important;
  height: auto !important;
  min-height: 100%;
}

.property-gallery,
.gallery,
.image-gallery {
  overflow: visible;
  max-width: 100%;
}

nav {
  position: relative;
  z-index: 9999;
}

/* ===============================
   EMERGENCY LAYOUT RECOVERY
   =============================== */

/* Stop containers from clipping content */
* {
  max-width: none;
}

/* Allow full page expansion */
html,
body {
  width: 100%;
  min-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
}

/* Kill any hidden overflow on structural containers */
.page,
.container,
.app,
main,
section,
.property-page,
.property-wrapper,
.property-container {
  overflow: visible !important;
  height: auto !important;
  min-height: 100% !important;
  max-width: none !important;
}

/* Ensure navbar and gallery never get clipped */
nav,
.property-gallery,
.gallery,
.image-gallery {
  overflow: visible !important;
  position: relative;
}

/* Allow horizontal scrolling when needed */
body {
  overscroll-behavior-x: contain;
}

/* ===============================
   NAVBAR CLIPPING FIX (ISOLATED)
   =============================== */

/* Make sure no parent can clip the navbar */
header,
nav,
.navbar,
.topbar {
  overflow: visible !important;
  max-width: none !important;
}

/* Force navbar container to allow its own horizontal scroll */
nav {
  display: block;
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

/* Prevent body from interfering */
body {
  overflow-x: hidden;
}

/* ===============================
   TARGETED HORIZONTAL SCROLL FIX
   =============================== */

/* Ensure body doesn't create horizontal scroll */
body {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Allow specific sections to scroll horizontally */
.navbar .container,
.property-proof,
.proof-grid,
.progress-timeline {
  overflow-x: auto !important;
}

/* ==========================================================
   DEVELOPMENT TIMELINE — PREMIUM VISUAL SYSTEM
========================================================== */

.progress-timelinee {
  list-style: none;
  padding: 0;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.progress-timelinee li {
  position: relative;
  padding: 12px 16px 12px 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #b8c0cc;
  font-size: 14px;
  line-height: 1.4;
  transition: all 0.25s ease;
}

/* Timeline Dot */
.progress-timelinee li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #5a6472;
}

/* Completed Step */
.progress-timelinee li.completed {
  border-color: rgba(92, 210, 146, 0.45);
  background: rgba(92, 210, 146, 0.08);
  color: #d9f6e6;
}

.progress-timelinee li.completed::before {
  background: #5cd292;
  box-shadow: 0 0 0 4px rgba(92, 210, 146, 0.25);
}

/* Active Step */
.progress-timelinee li.active {
  border-color: rgba(96, 164, 255, 0.55);
  background: rgba(96, 164, 255, 0.12);
  color: #e5f0ff;
  font-weight: 600;
}

.progress-timelinee li.active::before {
  background: #60a4ff;
  box-shadow: 0 0 0 4px rgba(96, 164, 255, 0.25);
}

/* Pending Step */
.progress-timelinee li:not(.completed):not(.active) {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: #8b94a1;
}

.property-transparency .transparency-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* Responsive fallback */
@media (max-width: 900px) {
  .property-transparency .transparency-grid {
    grid-template-columns: 1fr;
  }
}

.gallery-section {
  padding: 100px 0;
  background: linear-gradient(180deg, #0e1117, #0b0e13);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px;
}

.gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #0f1219;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
  transition: all 0.35s ease;
}

.gallery-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
}

.gallery-overlay strong {
  font-size: 16px;
  color: #fff;
}

.gallery-overlay span {
  font-size: 13px;
  color: #b0b0b0;
}

.gallery-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
}

.property-recommendations {
  padding: 100px 0;
  background: linear-gradient(180deg, #0b0e13, #0e1117);
}

.recommend-subtext {
  margin-bottom: 40px;
  color: #9aa3ad;
}

.recommend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
}

.recommend-card {
  padding: 32px;
  border-radius: 14px;
  background: #10141c;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

.recommend-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7);
}

.recommend-card h3 {
  color: #fff;
  margin-bottom: 6px;
}

.recommend-card p {
  color: #b0b8c3;
  margin-bottom: 10px;
}

.recommend-card span {
  display: block;
  font-size: 13px;
  color: #7d8896;
  margin-bottom: 16px;
}

.lead-signal {
  margin-top: 16px;
  display: inline-flex;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  letter-spacing: 0.4px;
}

.lead-signal .signal-label {
  color: #9aa3ad;
}

.lead-signal .signal-value {
  color: #fff;
}

.lead-signal[data-level="hot-lead"] {
  border-color: rgba(255, 80, 80, 0.4);
  background: rgba(255, 80, 80, 0.12);
}

.lead-signal[data-level="warm-lead"] {
  border-color: rgba(255, 180, 80, 0.4);
  background: rgba(255, 180, 80, 0.12);
}

.lead-signal[data-level="cold-lead"] {
  border-color: rgba(100, 140, 255, 0.35);
  background: rgba(100, 140, 255, 0.10);
}

.sales-playbook {
  padding: 100px 0;
  background: linear-gradient(180deg, #0e1117, #0b0e13);
}

.playbook-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.playbook-card {
  padding: 28px;
  border-radius: 14px;
  background: #10141c;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

.playbook-card h3 {
  margin-bottom: 12px;
  color: #fff;
}

.playbook-card p {
  font-size: 14px;
  color: #b0b8c3;
}

.followup-system {
  padding: 100px 0;
  background: linear-gradient(180deg, #0b0e13, #0e1117);
}

.followup-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.followup-card {
  padding: 26px;
  border-radius: 14px;
  background: #0f131b;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.4);
}

.followup-card h3 {
  margin-bottom: 10px;
  color: #fff;
}

.followup-card p {
  font-size: 14px;
  color: #b0b8c3;
}

.admin-panel {
  padding: 100px 0;
  background: linear-gradient(180deg, #0e1117, #0b0e13);
}

.admin-controls {
  margin-bottom: 24px;
}

.admin-controls select {
  background: #0f131b;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 14px;
  border-radius: 8px;
}

.lead-table {
  display: grid;
  gap: 10px;
}

.lead-row {
  display: grid;
  grid-template-columns: 60px 1fr 1fr 1.5fr;
  padding: 14px;
  background: #0f131b;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #c7d0da;
}

.lead-table-header {
  display: grid;
  grid-template-columns: 60px 1fr 1fr 1.5fr;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #9aa3ad;
  font-size: 13px;
  letter-spacing: 0.4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.reporting-system {
  padding: 100px 0;
  background: linear-gradient(180deg, #0e1117, #0b0e13);
}

.report-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.report-card {
  padding: 22px;
  border-radius: 12px;
  background: #0f131b;
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
  color: #fff;
}

.social-proof {
  padding: 100px 0;
  background: linear-gradient(180deg, #0b0e13, #0e1117);
}

.social-proof h2 {
  margin-bottom: 10px;
}

.social-subtitle {
  color: #9aa3ad;
  margin-bottom: 40px;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.proof-card {
  padding: 28px;
  border-radius: 14px;
  background: #10141c;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

.proof-card h4 {
  color: #fff;
  margin-bottom: 8px;
}

.proof-card p {
  font-size: 14px;
  color: #b0b8c3;
  margin-bottom: 12px;
}

.proof-tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #c7d0da;
}

/* APPEND THIS CSS TO YOUR STYLESHEET */

.testimonials-section {
  width: 100%;
  background-color: #f5f5f5;
  padding: 80px 0 0 0;
  margin: 0;
}

.testimonials-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 60px 20px;
}

.testimonials-title {
  font-size: 48px;
  font-weight: 700;
  color: #ff6b35;
  text-align: center;
  letter-spacing: 2px;
  margin: 0 0 80px 0;
  text-transform: uppercase;
}

.testimonials-carousel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 450px;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #d0d0d0;
  cursor: pointer;
  padding: 10px;
  transition: color 0.3s ease;
  z-index: 10;
}

.carousel-arrow:hover {
  color: #ff6b35;
}

.carousel-arrow-left {
  left: 0;
}

.carousel-arrow-right {
  right: 0;
}

.testimonials-content {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 80px;
}

.testimonial-slide {
  display: none;
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.testimonial-slide.active {
  display: block;
  opacity: 1;
}

.testimonial-avatar {
  width: 180px;
  height: 180px;
  margin: 0 auto 30px auto;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-name {
  font-size: 20px;
  color: #ff6b35;
  font-weight: 600;
  margin-bottom: 30px;
}

.testimonial-text {
  font-size: 18px;
  line-height: 1.8;
  color: #333;
  margin: 0;
  padding: 0 20px;
}

.testimonials-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #d0d0d0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dot.active {
  background-color: #ff6b35;
}

.dot:hover {
  background-color: #ff6b35;
}

.metrics-bar {
  width: 100%;
  background-color: #1a4d7c;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 50px 20px;
  gap: 40px;
}

.metric {
  text-align: center;
  color: white;
  flex: 1;
}

.metric-number {
  font-size: 56px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1;
}

.metric-label {
  font-size: 16px;
  font-weight: 400;
  opacity: 0.95;
}

@media (max-width: 768px) {
  .testimonials-title {
    font-size: 36px;
    margin-bottom: 50px;
  }

  .testimonials-carousel {
    min-height: 400px;
  }

  .testimonials-content {
    margin: 0 60px;
  }

  .carousel-arrow {
    padding: 5px;
  }

  .carousel-arrow svg {
    width: 30px;
    height: 30px;
  }

  .testimonial-avatar {
    width: 140px;
    height: 140px;
  }

  .testimonial-name {
    font-size: 18px;
  }

  .testimonial-text {
    font-size: 16px;
    padding: 0 10px;
  }

  .metrics-bar {
    flex-wrap: wrap;
    padding: 40px 20px;
    gap: 30px;
  }

  .metric {
    flex-basis: calc(50% - 15px);
  }

  .metric-number {
    font-size: 42px;
  }

  .metric-label {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .testimonials-container {
    padding: 0 15px 40px 15px;
  }

  .testimonials-carousel {
    min-height: 450px;
  }

  .testimonials-content {
    margin: 0 50px;
  }

  .metric {
    flex-basis: 100%;
  }
}

/* ==========================================================================
   AUTHORITY MEDIA SYSTEM — INSTITUTIONAL EDITION
   Lead Engineer: $10k / page tier
   ========================================================================== */

:root {
  --ink-0: #ffffff;
  --ink-1: #e8edf3;
  --ink-2: #b8c2cc;
  --ink-3: #8c96a1;
  --obsidian-0: #07090c;
  --obsidian-1: #0b0e13;
  --obsidian-2: #0f131b;
  --obsidian-3: #141923;
  --accent-0: #ff5a1f;
  --accent-1: #ff7848;
  --steel: rgba(255, 255, 255, 0.06);
  --depth: rgba(0, 0, 0, 0.65);
}

.authority-media {
  position: relative;
  isolation: isolate;
  padding: 180px 0 140px;
  background:
    radial-gradient(1200px 400px at 50% -200px, rgba(255, 90, 31, 0.18), transparent 60%),
    linear-gradient(180deg, var(--obsidian-1), var(--obsidian-0));
}

.authority-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 30%, rgba(255, 255, 255, 0.03));
  pointer-events: none;
}

.authority-media .container {
  position: relative;
  z-index: 2;
}

.authority-media h2 {
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--ink-0);
  margin-bottom: 18px;
}

.authority-subtitle {
  max-width: 760px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 90px;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 48px 40px;
}

.media-logo {
  position: relative;
  height: 96px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--steel);
  color: var(--ink-1);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  box-shadow:
    0 25px 80px var(--depth),
    inset 0 1px rgba(255, 255, 255, 0.06);
  transition: transform .45s cubic-bezier(.16, .8, .25, 1),
    box-shadow .45s cubic-bezier(.16, .8, .25, 1),
    color .25s ease;
}

.media-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg,
      transparent 28%,
      rgba(255, 255, 255, 0.10),
      transparent 72%);
  opacity: .45;
  pointer-events: none;
}

.media-logo:hover {
  transform: translateY(-10px);
  box-shadow:
    0 45px 140px rgba(0, 0, 0, 0.85),
    inset 0 1px rgba(255, 255, 255, 0.1);
  color: var(--ink-0);
}

/* Micro detail: subtle accent edge on focus */
.media-logo:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px var(--accent-0),
    0 35px 120px rgba(0, 0, 0, 0.9);
}

/* Mobile precision */
@media (max-width: 640px) {
  .authority-media {
    padding: 140px 0 110px;
  }

  .authority-subtitle {
    margin-bottom: 64px;
  }
}

.authority-awards {
  background: linear-gradient(180deg, #05070b, #090c12);
  padding: 140px 0 120px;
}

.authority-awards-inner {
  max-width: 1280px;
  margin: auto;
  padding: 0 60px;
}

.awards-header h3 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .3px;
  color: #fff;
}

.awards-header p {
  margin-top: 8px;
  color: rgba(255, 255, 255, .65);
  max-width: 560px;
}

.awards-grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}

.award-tile {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01));
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 38px 28px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .7);
}

.award-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .6px;
  color: rgba(255, 255, 255, .9);
  text-transform: uppercase;
}

@media(max-width:900px) {
  .authority-awards-inner {
    padding: 0 24px;
  }
}

.leadership-authority {
  background: linear-gradient(180deg, #070a10, #0b0f16);
  padding: 160px 0;
  color: #fff;
}

.leadership-inner {
  max-width: 1280px;
  margin: auto;
  padding: 0 60px;
}

.leadership-header h2 {
  font-size: 42px;
  font-weight: 600;
  letter-spacing: .3px;
}

.leadership-header p {
  margin-top: 14px;
  max-width: 720px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .75);
}

.leadership-grid {
  margin-top: 100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
}

.leader-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01));
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 54px 42px;
  box-shadow: 0 50px 120px rgba(0, 0, 0, .75);
}

.leader-role {
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #ff5a1f;
}

.leader-card h4 {
  margin-top: 14px;
  font-size: 20px;
  font-weight: 600;
}

.leader-card p {
  margin-top: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .78);
}

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

  .leadership-inner {
    padding: 0 24px;
  }
}

.lead-row {
  display: grid;
  grid-template-columns: 60px 1fr 1fr 1fr 1fr 1.5fr 1fr;
  padding: 14px;
  background: #0f131b;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #c7d0da;
}

.lead-row select {
  background: #0f131b;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.risk.high {
  color: #ff4d4d;
}

.risk.medium {
  color: #ffc14d;
}

.risk.low {
  color: #4dff88;
}

.lead-row button {
  background: transparent;
  color: #ff5a1f;
  border: 1px solid rgba(255, 90, 31, 0.4);
  padding: 4px 10px;
  cursor: pointer;
}

.kpi-panel {
  margin-bottom: 40px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
}

.kpi-box {
  background: #0e1219;
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 20px;
}

.kpi-label {
  font-size: 12px;
  color: #999;
}

.kpi-box strong {
  font-size: 28px;
}

/* ===============================
   OPERATING PRESENCE — FINAL
   =============================== */

.trust-section {
  padding: 90px 0 120px;
  background: #fff;
}

.trust-section h2 {
  text-align: center;
  font-size: 38px;
  letter-spacing: 0.08em;
  color: #ff5a00;
  margin-bottom: 14px;
}

.trust-section p {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
  color: #666;
}

.city-list {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 300px 215px;
  gap: 22px;
}

/* Visual order exactly like reference */
.city-list li:nth-child(2) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

/* Hyderabad big */
.city-list li:nth-child(1) {
  grid-column: 2 / 4;
  grid-row: 1 / 2;
}

/* Vizag */
.city-list li:nth-child(3) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

/* Vizianagaram */
.city-list li:nth-child(4) {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

/* Srikakulam */

.city-list li {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
  transition: background-size 0.9s ease;
}

/* Dark overlay */
.city-list li::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  z-index: 1;
}

/* Text panel */
.city-list li span {
  position: relative;
  z-index: 2;
  padding: 14px 32px;
  background: rgba(0, 0, 0, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 20px;
  backdrop-filter: blur(4px);
  transition: transform 0.9s ease;
}

/* Hover animation */
.city-list li:hover {
  background-size: 112%;
}

.city-list li:hover span {
  transform: scale(0.92);
}

/* Images */
.city-list li:nth-child(1) {
  background-image: url("../images/index-images/visakhapatnam.jpg");
}

.city-list li:nth-child(2) {
  background-image: url("../images/index-images/hyderabad.jpg");
}

.city-list li:nth-child(3) {
  background-image: url("../images/index-images/vizianagaram.jpg");
}

.city-list li:nth-child(4) {
  background-image: url("../images/index-images/srikakulam.jpg");
}

@media (max-width: 900px) {
  .city-list {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 240px);
  }
}

/* ===== OPERATING PRESENCE — TEXT + ANIMATION FIX ===== */

/* Create the text panel even without HTML span */
.city-list li::after {
  content: attr(data-label);
  position: absolute;
  z-index: 3;
  padding: 14px 32px;
  background: rgba(0, 0, 0, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 20px;
  backdrop-filter: blur(4px);
  transition: transform 0.9s ease;
}

/* Reset zoom so images start correctly */
.city-list li {
  background-size: 100%;
}

/* Hover behavior — synchronized */
.city-list li:hover {
  background-size: 112%;
}

.city-list li:hover::after {
  transform: scale(0.92);
}

/* ===== FINAL LAYER + TEXT SYNC FIX ===== */

/* Heading & subtext bold */
.trust-section h2 {
  font-weight: 700 !important;
}

.trust-section p {
  font-weight: 600;
}

/* Ensure panel is above overlay */
.city-list li::after {
  z-index: 4;
}

/* Force text above the panel */
.city-list li {
  position: relative;
}

.city-list li::after {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Put the real text inside the panel visually */
.city-list li {
  color: transparent;
}

.city-list li::after {
  color: #ffffff;
}

/* Sync zoom: box + text together */
.city-list li:hover::after {
  transform: scale(0.92);
}

/* ===== OPERATING PRESENCE — FINAL BEHAVIOR FIX ===== */

/* Reset image size to natural state */
.city-list li {
  background-size: 100%;
  background-repeat: no-repeat;
}

/* Hover zoom */
.city-list li:hover {
  background-size: 112%;
}

/* Text box content */
.city-list li::after {
  position: absolute;
  z-index: 5;
  padding: 14px 32px;
  background: rgba(0, 0, 0, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 18px;
  backdrop-filter: blur(4px);
  transition: transform 0.9s ease;
}

/* City labels */
.city-list li:nth-child(2)::after {
  content: "Projects in Hyderabad";
}

.city-list li:nth-child(1)::after {
  content: "Projects in Visakhapatnam";
}

.city-list li:nth-child(3)::after {
  content: "Projects in Vizianagaram";
}

.city-list li:nth-child(4)::after {
  content: "Projects in Srikakulam";
}

/* Sync text with hover */
.city-list li:hover::after {
  transform: scale(0.92);
}

.topbar {
  width: 100%;
  height: 54px;
  /* exact feel match */
  background: #1b4a7a;
}

.topbar-container {
  max-width: 1320px;
  /* gives same breathing room */
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.topbar-phone {
  color: #ffffff;
  font-size: 14.5px;
  /* slightly larger like original */
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}

.topbar-right a {
  color: #ffffff;
  font-size: 15px;
  transition: opacity 0.2s ease;
}

.topbar-right a:hover {
  opacity: 0.85;
}

@media (max-width: 768px) {
  .topbar {
    display: none;
  }
}

.topbar-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  color: #ffffff;
  transition: all 0.25s ease;
}

.topbar-icon:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.topbar {
  background: #1c4b7f;
  /* exact corporate blue */
  width: 100%;
}

.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  color: #ffffff;
}

.topbar-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ===== NAVIGATION REPLICA LOCK ===== */

#header {
  background: #ffffff;
  border-bottom: 1px solid #eeeeee;
}

#header .navbar {
  min-height: 96px;
  padding-left: 32px;
  padding-right: 32px;
}

#header .navbar-brand img {
  height: 58px;
  width: auto;
}

#header .navbar-nav {
  align-items: center;
}

#header .nav-link {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: #666666 !important;
  padding: 0 11px;
}

#header .nav-link:hover {
  color: #ff4500 !important;
}

#header .nav-item.active .nav-link {
  color: #ff4500 !important;
}

#header .dropdown-toggle::after {
  margin-left: 6px;
  vertical-align: middle;
}

/* ===== NAVBAR REBUILD TO MATCH OLD SITE ===== */

.navbar {
  background: #0f0f0f;
  height: 72px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

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

.navbar-brand {
  color: #ffffff;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.navbar-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
}

.navbar-links li a {
  color: #e0e0e0;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.navbar-links li a:hover {
  color: #ffffff;
}

.navbar {
  padding-left: 32px;
  padding-right: 32px;
}

/* === NAVBAR BACKGROUND FIX === */
.navbar {
  background: #ffffff !important;
}

.navbar-brand {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
}

.navbar-brand img {
  height: 110px;
  /* adjust this ONE value if needed */
  width: auto;
  display: block;
}

/* === NAV LINKS VISUAL MATCH LEGACY === */
.navbar-links a {
  color: #000000 !important;
  font-weight: 700;
}

/* START HERE special */
.navbar-links a[href*="start-here"] {
  color: #ff6a00 !important;
  /* same orange family as logo */
  font-weight: 800;
}

/* ============================================================================
   ULTRA-LUXURY START SCREEN (FINAL REVISION)
   ============================================================================ */

:root {
  --ease-luxury: cubic-bezier(0.2, 0, 0.2, 1);
  /* Silk-like easing */
  --duration-crossfade: 1.4s;
  /* Slow, dreamy transition */
  --duration-card: 0.6s;
}

/* 1. FULL VIEWPORT IMMERSION */
.start-here-container {
  position: relative;
  width: 100%;
  height: 100vh;
  /* Force full viewport */
  min-height: 800px;
  /* Prevent cramping on small screens */
  margin-top: -96px;
  /* Pull up behind navbar (assuming navbar is ~96px) */
  padding-top: 96px;
  /* Push content back down */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #0b0d10;
  /* Deep anchors */
  z-index: 1;
}

/* 2. THE 4-LAYER BACKGROUND SYSTEM (Pseudo-elements) */
/* We use ::before/::after on Container AND Content to get 4 separate layers */

/* Layer Base Styling */
.start-here-container::before,
.start-here-container::after,
.start-here-content::before,
.start-here-content::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Cover entire screen */
  background-size: cover;
  background-position: center;
  opacity: 0;
  /* Hidden by default */
  transform: scale(1.1);
  /* Slight zoom for motion */
  transition: opacity var(--duration-crossfade) var(--ease-luxury),
    transform 8s ease-out;
  /* Continuous drift */
  z-index: -1;
  /* Behind content */
  pointer-events: none;
  filter: brightness(0.55) saturate(0.9) blur(0px);
}

/* Specific Image Assignments */
.start-here-container::before {
  background-image: url('../images/investor-hero.jpg');
  z-index: -4;
}

.start-here-container::after {
  background-image: url('../images/legacy-hero.jpg');
  z-index: -3;
}

/* NOTE: .start-here-content needs static positioning for its pseudos to fill the parent container */
.start-here-content {
  position: static;
}

.start-here-content::before {
  background-image: url('../images/software-hero.jpg');
  z-index: -2;
}

.start-here-content::after {
  background-image: url('../images/business-hero.jpg');
  z-index: -1;
}

/* 3. ACTIVE STATES (Triggered by JS classes on Container) */

/* Investor Active */
.start-here-container.viewing-investor::before {
  opacity: 1;
  transform: scale(1);
  z-index: -1;
  /* Bring to "front" of background stack */
}

/* Family Active */
.start-here-container.viewing-family::after {
  opacity: 1;
  transform: scale(1);
  z-index: -1;
}

/* Land Active - Implemented via .start-here-content.bg-land::before selector below */

/* REVISED SELECTORS FOR CONTENT LAYERS (To work via Container Class) */
/* Since .start-here-content is a child, we can't style its pseudo-elements based on the PARENT'S class 
   without :has(). To adhere to strict constraints, we will rely on JS to add classes to the CONTAINER 
   and we will style the CONTENT'S pseudo elements if possible, OR we define a simpler fallback. 
   
   BETTER SOLUTION FOR NO-HTML-TOUCH:
   We will move layers 3 & 4 to be independent if possible. 
   Actually, standard CSS allows styling a child based on parent class IF the child is a real element. 
   Pseudoelements belong to the child.
   
   CORRECTION: We can simply add the class to the .start-here-content div via JS as well.
*/

/* 4. ACTUAL ACTIVATION LOGIC */

/* Investor (Container ::before) */
.start-here-container.bg-investor::before {
  opacity: 1;
  transform: scale(1);
}

/* Family (Container ::after) */
.start-here-container.bg-family::after {
  opacity: 1;
  transform: scale(1);
}

/* Land (Content ::before) - Triggered by class on CONTENT div */
.start-here-content.bg-land::before {
  opacity: 1;
  transform: scale(1);
}

/* Business (Content ::after) - Triggered by class on CONTENT div */
.start-here-content.bg-business::after {
  opacity: 1;
  transform: scale(1);
}


/* 5. CONTENT STYLING (Text & Grid) */
/* Re-establish relative positioning for the inner content wrapper to sit above backgrounds */
.start-here-content-inner {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

/* Note: Since we can't add a new inner div, we rely on the grid itself */
.persona-grid {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 60px;
}

.start-here-content>h1,
.start-here-content>p {
  position: relative;
  z-index: 10;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
}

.start-here-content h1 {
  font-size: 48px;
  font-weight: 300;
  color: #fff;
  margin-bottom: 12px;
}

.start-here-subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
}


/* 6. PERSONA CARDS (Glassmorphism) */
.persona-card {
  position: relative;
  height: 380px;
  /* Tall, elegant cards */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(10, 12, 16, 0.6) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
  transition: all var(--duration-card) var(--ease-luxury);
  cursor: pointer;
  overflow: hidden;
}

/* Hover Effect */
.persona-card:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(10, 12, 16, 0.8) 100%);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-12px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

/* Dimming Siblings */
.persona-card.is-dimmed {
  opacity: 0.3;
  filter: blur(3px) grayscale(100%);
  transform: scale(0.96);
}

/* Text Handling */
.persona-card h3 {
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 8px;
  transform: translateY(0);
  transition: transform var(--duration-card) var(--ease-luxury);
}

.persona-card p {
  font-size: 14px;
  color: #9aa0a6;
  opacity: 0.8;
  transform: translateY(0);
  transition: opacity var(--duration-card) ease;
}

.persona-card:hover h3 {
  transform: translateY(-4px);
}

.persona-card:hover p {
  opacity: 1;
  color: #fff;
}

/* 7. EXIT SEQUENCE */
body.transition-out .start-here-container::before,
body.transition-out .start-here-container::after,
body.transition-out .start-here-content::before,
body.transition-out .start-here-content::after {
  filter: brightness(0.1) blur(10px);
  transform: scale(1.05);
  transition: all 1s ease;
}

body.transition-out .persona-grid {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

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

  .start-here-container {
    height: auto;
    min-height: 100vh;
    padding-bottom: 60px;
  }
}

@media (max-width: 600px) {
  .persona-grid {
    grid-template-columns: 1fr;
  }
}
/* ==============================================
   FIX: FORCE INVESTOR CARD ANIMATION
   ============================================== */

/* Ensure the background layer for investor is visible when class is active */
.start-here-container.bg-investor::before {
    opacity: 1 !important;
    transform: scale(1) !important;
    z-index: -1;
}

/* Force the hover lift and glow for the Investor card specifically */
.persona-card[data-persona="investor"]:hover {
    transform: translateY(-12px) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(10, 12, 16, 0.8) 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5) !important;
    opacity: 1 !important;
}

/* Ensure text inside Investor card highlights correctly */
.persona-card[data-persona="investor"]:hover h3 {
    color: #fff !important;
    transform: translateY(-4px);
}

.persona-card[data-persona="investor"]:hover p {
    color: #fff !important;
    opacity: 1 !important;
}
/* ============================================================================
   CROSS-PAGE TRANSITION ENGINE (LUXURY GRADE)
   ============================================================================ */

/* --- SHARED VARIABLES --- */
:root {
    --transition-speed: 0.8s;
    --luxury-ease: cubic-bezier(0.2, 0.0, 0.2, 1);
}

/* ============================================================================
   EXIT STATE (Start-Here.html)
   ============================================================================ */

/* When leaving, we hide the content but KEEP the background */
body.transition-out .start-here-content,
body.transition-out .persona-grid,
body.transition-out .navbar {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity var(--transition-speed) var(--luxury-ease),
                transform var(--transition-speed) var(--luxury-ease);
}

/* Ensure background stays fixed and calm during exit */
body.transition-out .start-here-container::before,
body.transition-out .start-here-container::after {
    transition: none !important; /* Lock it in place */
    opacity: 1 !important; /* Force visibility */
}


/* ============================================================================
   ENTRANCE STATE (Index.html)
   ============================================================================ */

/* 1. INITIAL HIDE: Hide main content on Index load to prevent "pop" */
body.persona-transitioning .hero .container,
body.persona-transitioning .navbar,
body.persona-transitioning .projects-preview,
body.persona-transitioning .trust-section {
    opacity: 0;
    transform: translateY(15px);
    animation: luxuryFadeIn 1s var(--luxury-ease) forwards;
    animation-delay: 0.2s; /* Give background moment to stabilize */
}

/* 2. THE STAGE: Prepare the Hero section to receive the persona background */
.hero {
    position: relative;
    background: #0b0d10 !important; /* Match start-here base */
    overflow: hidden;
    z-index: 1;
}

/* 3. THE ACTOR: Injecting the Image via Pseudo-element */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0; /* Hidden by default */
    z-index: -1;
    filter: brightness(0.4) saturate(0.9); /* Cinematic styling */
    transition: opacity 1.5s ease-out;
}

/* 4. PERSONA BINDINGS: Mapping classes to images */
/* These match the start-here images exactly */
body.persona-investor .hero::before {
    background-image: url('../images/investor-hero.jpg');
    opacity: 1;
}

body.persona-family .hero::before {
    background-image: url('../images/legacy-hero.jpg');
    opacity: 1;
}

body.persona-land .hero::before {
    background-image: url('../images/software-hero.jpg');
    opacity: 1;
}

body.persona-business .hero::before {
    background-image: url('../images/business-hero.jpg');
    opacity: 1;
}

/* 5. ANIMATION DEFINITION */
@keyframes luxuryFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ============================================================================
   PHASE 2: INDEX PAGE ARRIVAL (THE ILLUSION)
   ============================================================================ */

/* 1. INITIAL HIDE: Instantly hide Index content so it can fade in */
/* This prevents the "hard cut" feeling */
body.persona-transitioning .hero .container,
body.persona-transitioning .navbar,
body.persona-transitioning .projects-preview,
body.persona-transitioning .trust-section {
    opacity: 0;
    transform: translateY(15px);
    animation: luxuryFadeIn 1s cubic-bezier(0.2, 0.0, 0.2, 1) forwards;
    animation-delay: 0.2s; /* Wait for background to stabilize */
}

/* 2. THE STAGE: Prepare the Hero section to hold the persona image */
.hero {
    position: relative;
    background: #0b0d10 !important; /* Match start-here base color */
    overflow: hidden;
    z-index: 1;
}

/* 3. THE ACTOR: Injecting the Image via Pseudo-element */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0; /* Hidden by default */
    z-index: -1;
    filter: brightness(0.4) saturate(0.9);
    transition: opacity 1.5s ease-out;
}

/* 4. PERSONA BINDINGS: These trigger based on the JS we just added */
body.persona-investor .hero::before {
    background-image: url('../images/investor-hero.jpg');
    opacity: 1;
}

body.persona-family .hero::before {
    background-image: url('../images/legacy-hero.jpg');
    opacity: 1;
}

body.persona-land .hero::before {
    background-image: url('../images/software-hero.jpg');
    opacity: 1;
}

body.persona-business .hero::before {
    background-image: url('../images/business-hero.jpg');
    opacity: 1;
}

/* 5. ANIMATION DEFINITION */
@keyframes luxuryFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ============================================================================
   VISUAL OVERRIDE: PROJECTS PREVIEW SECTION
   Goal: Shift from Dark/Corporate to Bright/Trust-First Legacy Tone
   ============================================================================ */

/* 1. SECTION BACKGROUND & SPACING
   Switches from dark corporate background to a clean, premium off-white.
   Maintains the original grid layout while increasing visual breathing room. */
.projects-preview {
    background-color: #f7f9fc !important; /* Light, calming foundation */
    color: #2d3436 !important; /* Reset inherited text color for light mode */
}

/* 2. SECTION HEADING
   Aligns with the 'Trust' brand color (from Topbar #1b4a7a).
   Uses high contrast for authority and readability. */
.projects-preview h2 {
    color: #1b4a7a !important; /* Corporate Trust Blue */
    font-weight: 700 !important;
    letter-spacing: -0.5px !important; /* Modern, tight typesetting */
    text-align: center;
    margin-bottom: 60px !important;
}

/* 3. CARD CONTAINER
   Removes the harsh dark borders and fills.
   Introduces a 'Paper' metaphor: White surface, soft shadow, friendly corners. */
.category-card {
    background-color: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.04) !important; /* Ultra-subtle definition */
    border-radius: 12px !important; /* Softer, approachable corners */
    box-shadow: 0 8px 24px rgba(0,0,0,0.05) !important; /* Soft, expensive lift */
    padding: 48px 32px !important; /* Increased internal whitespace */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* 4. HOVER INTERACTION
   Provides a gentle, responsive lift instead of a color shift.
   Maintains the 'calm' emotional target. */
.category-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 32px rgba(0,0,0,0.08) !important;
    background-color: #ffffff !important;
    border-color: rgba(0,0,0,0.04) !important;
}

/* 5. CARD TYPOGRAPHY
   Ensures text is legible and warm against the white card background. */
.category-card h3 {
    color: #2d3436 !important; /* Dark Slate for clarity */
    font-size: 22px !important;
    font-weight: 600 !important;
    margin-bottom: 16px !important;
}

.category-card p {
    color: #636e72 !important; /* Warm Grey for approachability */
    font-size: 16px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    opacity: 1 !important; /* Removes any legacy opacity settings */
}
/* ============================================================================
   VISUAL OVERRIDE: INSTITUTIONAL TRUST SECTION
   Goal: Transform from Dark/Heavy to Bright, Calm, Trust-First Legacy Tone
   ============================================================================ */

/* 1. SECTION BACKGROUND
   Shift from dark (#0f0f0f) to a calm, premium off-white.
   Removes the harsh top border to create a seamless flow. */
.institutional-trust {
    background-color: #f8f9fa !important; /* Soft, neutral light grey */
    border-top: none !important; /* Remove harsh divider */
    color: #2d3436 !important; /* Reset text color for light mode */
}

/* 2. SECTION TYPOGRAPHY
   Aligns main heading with the corporate trust blue (#1b4a7a).
   Updates intro text to a warm grey for approachability and readability. */
.institutional-trust h2 {
    color: #1b4a7a !important; /* Corporate Trust Blue */
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
}

.trust-intro {
    color: #636e72 !important; /* Warm grey for introductory text */
    font-weight: 400 !important;
    opacity: 1 !important; /* Ensure full visibility */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* 3. TRUST CARDS
   Replaces dark, bordered cards with clean white surfaces.
   Uses soft shadows to create depth without visual noise. */
.trust-card {
    background-color: #ffffff !important; /* Pure white surface */
    border: 1px solid rgba(0,0,0,0.03) !important; /* Barely visible boundary */
    border-radius: 12px !important; /* Softer, friendlier corners */
    box-shadow: 0 12px 24px rgba(0,0,0,0.04) !important; /* Premium, diffused shadow */
    padding: 40px 32px !important; /* Increased vertical breathing room */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* 4. HOVER INTERACTION
   Subtle lift on hover to indicate interactivity without jarring changes. */
.trust-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
    background-color: #ffffff !important;
}

/* 5. CARD CONTENT STYLING
   Ensures hierarchy and contrast within the cards. */
.trust-card h3 {
    color: #2d3436 !important; /* Dark Slate for clear hierarchy */
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
}

.trust-card p {
    color: #636e72 !important; /* Readable, soft grey body text */
    font-size: 15px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}
/* ============================================================================
   VISUAL OVERRIDE: AUTHORITY MEDIA SECTION
   Goal: Transform from Dark/Cinematic to Bright, Calm, Trust-First Legacy Tone
   ============================================================================ */

/* 1. SECTION BACKGROUND
   Removes the dark radial gradients and overlay effects.
   Establishes a clean, light foundation consistent with the 'Trust' section. */
.authority-media {
    background: #f9fafb !important; /* Calm, premium off-white */
    padding-top: 100px !important;   /* Maintained vertical rhythm */
    padding-bottom: 100px !important;
}

.authority-media::before {
    display: none !important; /* Removes the dark texture overlay */
}

/* 2. TYPOGRAPHY
   Aligns heading with the corporate 'Trust Blue'.
   Updates subtitle to a warm, readable grey. */
.authority-media h2 {
    color: #1b4a7a !important; /* Legacy Trust Blue */
    font-weight: 700 !important;
    text-shadow: none !important; /* Removes any glowing text effects */
}

.authority-subtitle {
    color: #64748b !important; /* Slate grey for readability */
    font-weight: 400 !important;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* 3. MEDIA CARDS (LOGOS)
   Transforms dark glass cards into solid white tiles.
   Removes tech-heavy borders and replaces them with soft shadows. */
.media-logo {
    background: #ffffff !important; /* Clean white surface */
    border: 1px solid #e2e8f0 !important; /* Subtle, neutral border */
    border-radius: 8px !important; /* Gentle rounding */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important; /* Soft lift */
    color: #94a3b8 !important; /* Muted grey for logos (inactive state) */
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
}

/* 4. INTERACTION
   Provides a gentle lift and color shift on hover.
   Eliminates the 'shine' animation for a calmer feel. */
.media-logo:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08) !important;
    border-color: #cbd5e1 !important;
    color: #1b4a7a !important; /* Brand color activation on hover */
}

.media-logo::after {
    display: none !important; /* Removes the 'shine' sweep animation */
}
/* ============================================================================
   REFINEMENT: AUTHORITY MEDIA SECTION (User Request)
   Goal: Bolder text, larger cards, and higher contrast hover states.
   ============================================================================ */

/* 1. SUBTITLE EMPHASIS
   Increases size and weight for the description text below the heading. */
.authority-subtitle {
    font-size: 18px !important;     /* Larger for readability */
    font-weight: 600 !important;    /* Bold weight */
    color: #334155 !important;      /* Darker slate for better contrast */
    max-width: 850px;
}

/* 2. CARD SIZING & LOGO TEXT
   Increases the physical footprint of the cards and emboldens the text inside. */
.media-logo {
    padding: 45px 25px !important;  /* significantly increases card size */
    font-size: 16px !important;     /* Larger text inside card */
    font-weight: 800 !important;    /* Extra bold for authority */
    min-height: 140px !important;   /* Enforces a taller, substantial look */
    
    /* Flexbox ensures text remains perfectly centered in the larger card */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 3. HOVER INTERACTION - DARKER BACKGROUND
   Switches to a distinct light grey on hover for clear feedback. */
.media-logo:hover {
    background-color: #f1f5f9 !important; /* Visible darker grey (not pitch black) */
    border-color: #94a3b8 !important;     /* Darker border to match */
    color: #1b4a7a !important;            /* Trust Blue text on hover */
    transform: translateY(-6px) !important;
}
/* ============================================================================
   VISUAL OVERRIDE: AUTHORITY AWARDS SECTION
   Goal: Transform from Dark/Corporate to Bright, Calm, Trust-First Tone
   ============================================================================ */

/* 1. SECTION BACKGROUND
   Replaces dark gradients with a clean, trustworthy light grey.
   Ensures consistent vertical rhythm with other trust sections. */
.authority-awards {
    background: #f8f9fa !important; /* Premium off-white */
    padding: 100px 0 !important;    /* Increased breathing room */
    color: #2d3436 !important;      /* Reset text color */
}

/* 2. HEADER TYPOGRAPHY
   Aligns headings with the brand's 'Trust Blue'.
   Softens description text for better readability. */
.awards-header h3 {
    color: #1b4a7a !important;      /* Corporate Trust Blue */
    font-size: 32px !important;     /* Ensure visual hierarchy */
    font-weight: 700 !important;
    text-align: center !important;  /* Center align for balance */
    margin-bottom: 16px !important;
}

.awards-header p {
    color: #64748b !important;      /* Warm slate grey */
    font-size: 16px !important;
    text-align: center !important;
    max-width: 600px !important;
    margin: 0 auto 60px auto !important; /* Center and add space below */
}

/* 3. AWARD TILES (CARDS)
   Transforms dark/glass tiles into solid white credentials.
   Uses soft borders and shadows to simulate a physical certificate feel. */
.award-tile {
    background: #ffffff !important;       /* Clean white surface */
    border: 1px solid #e2e8f0 !important; /* Subtle neutral border */
    border-radius: 12px !important;       /* Friendly rounded corners */
    box-shadow: 0 4px 6px rgba(0,0,0,0.04) !important; /* Soft depth */
    padding: 32px 24px !important;        /* Comfortable internal spacing */
    text-align: center !important;
    transition: all 0.3s ease !important;
    display: flex !important;             /* Ensure centering */
    align-items: center !important;
    justify-content: center !important;
    min-height: 120px !important;         /* Substantial click target */
}

/* 4. TILE TYPOGRAPHY
   Ensures the award names are legible and professional. */
.award-label {
    color: #334155 !important;      /* Dark slate for high contrast */
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important; /* Legacy professional style */
}

/* 5. INTERACTION STATES
   Gentle lift on hover to suggest interactivity and premium quality. */
.award-tile:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 20px rgba(0,0,0,0.08) !important;
    border-color: #cbd5e1 !important; /* Slightly darker border on hover */
}
/* ============================================================================
   REFINEMENT: CERTIFICATIONS LAYOUT (User Request)
   Goal: Force the last award card ('Top Developer') to span the full grid width.
   ============================================================================ */

/* Target the specific last card in the grid */
.awards-grid .award-tile:last-child {
    grid-column: 1 / -1 !important; /* Force span from start (1) to end (-1) */
    width: 100% !important;        /* Ensure it occupies full track width */
    margin-top: 0 !important;      /* Remove any unintended gaps */
    
    /* Ensure text remains centered in the wider space */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}
/* ============================================================================
   VISUAL OVERRIDE: LEADERSHIP & GOVERNANCE SECTION
   Goal: Transform from Dark/Heavy to Bright, Calm, Trust-First Tone
   ============================================================================ */

/* 1. SECTION BACKGROUND
   Removes the dark gradients and establishes a light, premium foundation. */
.leadership-authority {
    background: #f8f9fa !important; /* Premium off-white */
    padding: 100px 0 !important;    /* Maintain breathing room */
    color: #2d3436 !important;      /* Reset text color to dark */
}

/* 2. HEADER TYPOGRAPHY
   Aligns heading with the 'Trust Blue' and softens body text. */
.leadership-header h2 {
    color: #1b4a7a !important;      /* Corporate Trust Blue */
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    text-shadow: none !important;
}

.leadership-header p {
    color: #64748b !important;      /* Warm slate grey */
    font-weight: 400 !important;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* 3. LEADER CARDS
   Transforms dark cards into clean, white professional tiles.
   Replaces harsh borders with soft, diffused shadows. */
.leader-card {
    background: #ffffff !important;       /* Clean white surface */
    border: 1px solid #e2e8f0 !important; /* Subtle neutral border */
    border-radius: 12px !important;       /* Friendly rounded corners */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05) !important; /* Soft paper-like shadow */
    padding: 40px 32px !important;        /* Comfortable internal spacing */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* 4. HOVER INTERACTION
   Gentle lift instead of color inversion or heavy glowing. */
.leader-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 24px -4px rgba(0,0,0,0.08) !important;
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
}

/* 5. CARD CONTENT STYLING
   Updates text colors for high contrast and readability. */
.leader-role {
    color: #64748b !important;      /* Muted slate (was neon orange) - Calmer tone */
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    display: block !important;
    margin-bottom: 12px !important;
}

.leader-card h4 {
    color: #1e293b !important;      /* Dark slate for titles */
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

.leader-card p {
    color: #475569 !important;      /* Readable mid-grey */
    font-size: 15px !important;
    line-height: 1.6 !important;
    opacity: 1 !important;          /* Remove transparency */
}
/* ============================================================================
   VISUAL OVERRIDE: FOOTER & CONTACT BAR
   Goal: Transform from Dark/Heavy to Bright, Calm, Trust-First Tone
   ============================================================================ */

/* 1. FOOTER (COPYRIGHT AREA)
   Switches to a clean, minimal white background.
   Reduces visual weight for a calm page ending. */
.footer {
    background-color: #ffffff !important;   /* Pure white foundation */
    border-top: 1px solid #f1f5f9 !important; /* Ultra-subtle separation */
    padding: 40px 0 !important;             /* Balanced vertical spacing */
}

.footer p {
    color: #94a3b8 !important;              /* Soft slate grey for metadata */
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* 2. STICKY CONTACT BAR
   Transforms from a dark tool strip to a premium, floating app-like bar.
   Uses shadow instead of borders for separation. */
.contact-bar {
    background: #ffffff !important;           /* Clean white surface */
    border-top: none !important;              /* Remove harsh line */
    box-shadow: 0 -4px 20px rgba(0,0,0,0.06) !important; /* Soft, premium lift */
    padding: 16px 0 !important;               /* More comfortable height */
    backdrop-filter: blur(10px) !important;   /* Modern glass feel support */
}

/* 3. CONTACT LINKS (CTA)
   Updates text to high-contrast slate for readability.
   Improves touch target size for mobile accessibility. */
.contact-bar a {
    color: #334155 !important;                /* Trustworthy dark slate */
    font-size: 14px !important;
    font-weight: 600 !important;              /* Medium weight for clarity */
    letter-spacing: 0.3px !important;
    padding: 8px 12px !important;             /* Larger tap area */
    border-radius: 8px !important;            /* Friendly corners */
    transition: all 0.2s ease !important;
}

/* 4. HOVER & ACTIVE STATES
   Provides a subtle background tint and brand color shift. */
.contact-bar a:hover {
    background-color: #f1f5f9 !important;     /* Gentle interaction cue */
    color: #1b4a7a !important;                /* Trust Blue activation */
    transform: translateY(-1px) !important;   /* subtle feedback */
}
/* ============================================================================
   VISUAL OVERRIDE: GALLERY PAGE
   Goal: Transform from Dark/Cinematic to Bright, Open, Premium Gallery
   ============================================================================ */

/* 1. PAGE CONTEXT & HEADER
   Scopes changes to the gallery page to ensure safety.
   Switches header from dark corporate to bright & welcoming. */
body[data-page="gallery"] {
    background-color: #f8f9fa !important;
}

body[data-page="gallery"] .page-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding-top: 120px !important; /* Visual balance with light mode */
}

body[data-page="gallery"] .page-header h1 {
    color: #1b4a7a !important; /* Trust Blue */
    font-weight: 700 !important;
}

body[data-page="gallery"] .page-header p {
    color: #64748b !important; /* Warm Slate */
    font-weight: 400 !important;
}

/* 2. GALLERY SECTION BACKGROUND
   Removes dark gradients and establishes a clean canvas. */
.gallery-section {
    background: #f8f9fa !important; /* Premium off-white */
    padding-top: 60px !important;
}

/* 3. GALLERY CARD TRANSFORMATION (The "Tile" Look)
   Refactors the card from an image overlay to a stacked tile layout 
   using CSS Flexbox, without changing HTML. */
.gallery-card {
    display: flex !important;
    flex-direction: column !important; /* Stacks image and text vertically */
    background: #ffffff !important;    /* Clean white surface */
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    height: auto !important; /* Allows card to grow with content */
    min-height: 320px !important;
}

.gallery-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08) !important;
    border-color: #cbd5e1 !important;
}

/* 4. IMAGE STYLING
   Ensures the image fills the top portion of the card perfectly. */
.gallery-card img {
    height: 220px !important; /* Fixed height for uniformity */
    width: 100% !important;
    object-fit: cover !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* 5. TEXT CONTAINER (Formerly Overlay)
   Moves from an absolute position overlay to a static content block below the image. */
.gallery-overlay {
    position: relative !important; /* Resets absolute positioning */
    inset: auto !important;
    background: transparent !important; /* Removes dark gradient */
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    flex-grow: 1 !important;
}

/* 6. TYPOGRAPHY
   Updates colors to match the light theme. */
.gallery-overlay strong {
    color: #1e293b !important; /* Dark Slate Title */
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

.gallery-overlay span {
    color: #64748b !important; /* Muted Location Text */
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* 7. INTERACTION STATE
    subtle color shift on the title when hovering the card */
.gallery-card:hover .gallery-overlay strong {
    color: #1b4a7a !important; /* Trust Blue Highlight */
}
/* ============================================================================
   VISUAL OVERRIDE: PROJECTS PAGE
   Goal: Transform from Dark/Heavy to Bright, Open, Trust-First Tone
   ============================================================================ */

/* 1. PAGE HEADER (Global Internal Header)
   Switches from dark to clean white with brand-aligned typography. */
.page-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding-top: 100px !important;
    padding-bottom: 60px !important;
}

.page-header h1 {
    color: #1b4a7a !important; /* Corporate Trust Blue */
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
}

.page-header p {
    color: #64748b !important; /* Warm Slate Grey */
    font-size: 18px !important;
    max-width: 700px;
}

/* 2. PROJECTS LISTING SECTION
   Sets a premium off-white foundation for the main content area. */
.projects-listing {
    background-color: #f8f9fa !important; /* Soft Light Grey */
    padding-top: 60px !important;
}

/* 3. FILTERS
   Transforms dark inputs into clean, accessible UI components. */
.filter-select {
    background-color: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

.filter-select:hover, .filter-select:focus {
    border-color: #1b4a7a !important;
    outline: none !important;
}

/* 4. PROJECT CARDS
   Replaces dark blocks with white "Trust Cards".
   Focuses on readability and a premium tactile feel. */
.project-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 32px !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.project-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 30px -5px rgba(0,0,0,0.08) !important;
    border-color: #cbd5e1 !important;
    background-color: #ffffff !important; /* Prevent dark hover revert */
}

/* Card Content Styling */
.project-card h3 {
    color: #1e293b !important; /* Dark Slate Title */
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

.project-type {
    background-color: #f1f5f9 !important; /* Subtle Pill Background */
    color: #1b4a7a !important;            /* Brand Blue Text */
    border: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.project-city {
    color: #64748b !important;
    font-weight: 500 !important;
    margin-bottom: 16px !important;
}

.project-description {
    color: #475569 !important; /* Readable Body Text */
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* 5. PROCESS PROOF SECTION
   Transforms into a clean, white informational section. */
.process-proof {
    background-color: #ffffff !important;
    color: #334155 !important;
    padding: 100px 0 !important;
    border-top: 1px solid #e2e8f0 !important;
}

.process-proof h2 {
    color: #1b4a7a !important;
    font-weight: 700 !important;
}

.process-intro {
    color: #64748b !important;
}

/* Process Steps */
.step-number {
    color: #e2e8f0 !important; /* Subtle numbering */
    font-size: 14px !important;
    font-weight: 800 !important;
}

.process-step h3 {
    color: #1e293b !important;
    font-size: 18px !important;
}

.process-step p {
    color: #475569 !important;
}

/* 6. TRUST STRIP
   Uses the brand blue to create a distinct visual break. */
.projects-trust-strip {
    background-color: #1b4a7a !important; /* Solid Brand Blue */
    padding: 40px 0 !important;
    border: none !important;
    margin-top: 60px !important;
}

.projects-trust-strip p {
    color: #ffffff !important;
    opacity: 0.95 !important;
    font-weight: 500 !important;
    font-size: 16px !important;
}

/* 7. LOCAL PRESENCE SECTION
   Returns to the off-white background for visual variety. */
.local-presence {
    background-color: #f8f9fa !important;
    padding: 100px 0 !important;
    color: #334155 !important;
}

.local-presence h2 { color: #1b4a7a !important; }
.presence-intro { color: #64748b !important; }

.city {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 32px !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.03) !important;
}

.city h3 {
    color: #1e293b !important;
    font-size: 18px !important;
}

.city p {
    color: #475569 !important;
    font-size: 14px !important;
}
/* ============================================================================
   FIX: REMOVE BLACK STRIPS & LAYOUT GAPS
   Goal: Force sections to touch edges and remove legacy margins.
   ============================================================================ */

/* 1. GLOBAL SAFETY
   Ensure the underlying page canvas is light, so any tiny gaps are invisible. */
body {
    background-color: #f8f9fa !important;
}

/* 2. RESTRUCTURE "PROCESS PROOF" SECTION
   Change from a centered box to a full-width strip. */
.process-proof {
    width: 100% !important;
    max-width: none !important; /* Allow background to hit edges */
    margin: 0 !important;       /* Remove vertical gaps (black strips) */
    padding: 100px 0 !important; /* Use padding for spacing instead */
    background-color: #ffffff !important;
}

/* Center the content inside the full-width strip */
.process-proof > h2,
.process-proof > .process-intro,
.process-proof > .process-steps {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* 3. RESTRUCTURE "LOCAL PRESENCE" SECTION
   Change from a centered box to a full-width strip. */
.local-presence {
    width: 100% !important;
    max-width: none !important; /* Allow background to hit edges */
    margin: 0 !important;       /* Remove vertical gaps (black strips) */
    padding: 100px 0 !important; /* Use padding for spacing instead */
    background-color: #f8f9fa !important;
}

/* Center the content inside the full-width strip */
.local-presence > h2,
.local-presence > .presence-intro,
.local-presence > .presence-cities {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* 4. TRUST STRIP ADJUSTMENT
   Ensure the blue strip inside Process Proof extends fully without gaps. */
.projects-trust-strip {
    width: 100% !important;
    max-width: none !important;
    margin-top: 80px !important;
    margin-bottom: 0 !important;
}
/* ============================================================================
   VISUAL OVERRIDE: PROPERTY PAGE (BRAND ALIGNMENT)
   Goal: Trustworthy, Human, Premium. Blue for Trust, Orange for Warmth.
   ============================================================================ */

/* 1. GLOBAL SECTIONS - Light & Airy Foundation
   Removes the dark corporate weight. Creates a clean canvas for information. */

.property-header, 
.decision-support, 
.property-cta, 
.property-proof, 
.trust-authority,
.property-recommendations,
.callback-section,
.appointment-section {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

.property-details, 
.trust-presence, 
.decision-confidence, 
.property-transparency, 
.property-map-section, 
.investment-analytics,
.process-proof,
.micro-commit {
    background-color: #f8f9fa !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

/* 2. TYPOGRAPHY - Trust & Clarity
   Headings use the Brand Blue to signal authority.
   Body text uses warm slate for comfortable reading (not harsh black). */

.property-header h1,
.property-details h2,
.decision-support h2,
.trust-presence h2,
.property-cta h2,
.transparency-heading,
.proof-header h2,
.investment-analytics h2,
.decision-confidence h2,
.micro-text,
.trust-authority h2,
.property-recommendations h2,
.callback-section h2,
.appointment-section h2 {
    color: #1b4a7a !important; /* Deep Trust Blue */
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    text-shadow: none !important;
}

.property-summary, 
.presence-note, 
.analytics-intro, 
.transparency-subtext,
.proof-subtext,
.recommend-subtext,
.decision-intro,
.trust-subtext,
.process-intro {
    color: #64748b !important; /* Warm Slate Grey */
    font-weight: 400 !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
}

/* 3. CARDS & SURFACES - The "Physical Document" Feel
   Transforms dark boxes into white cards with soft, premium shadows. */

.detail-item,
.transparency-card, 
.analytics-card, 
.proof-block, 
.trust-seal,
.recommend-card,
.decision-block,
.process-step,
.land-context > div {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    /* Soft blue-tinted shadow for a "premium" rather than "dirty" feel */
    box-shadow: 0 4px 12px -2px rgba(27, 74, 122, 0.06) !important;
    padding: 32px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.detail-item:hover,
.transparency-card:hover, 
.analytics-card:hover, 
.recommend-card:hover,
.trust-seal:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px -6px rgba(27, 74, 122, 0.12) !important;
    border-color: #cbd5e1 !important;
}

/* 4. DATA & LABELS - Hierarchy via Color
   Using Orange sparingly for "Labels" adds warmth and directs the eye. */

.detail-label,
.property-type-label,
.step-number {
    color: #ff6b35 !important; /* Warm Brand Orange */
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

.detail-value {
    color: #1e293b !important; /* High-contrast Slate */
    font-weight: 600 !important;
    font-size: 16px !important;
    margin-top: 4px !important;
    display: block !important;
}

.property-type-label {
    background: rgba(255, 107, 53, 0.08) !important; /* Soft Orange tint */
    border: 1px solid rgba(255, 107, 53, 0.2) !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    margin-bottom: 16px !important;
}

.property-location {
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    margin-bottom: 24px !important;
}

/* 5. INTERACTIVE ELEMENTS - Confidence & Warmth
   Inputs feel clean. Buttons use the Brand Blue for trust. */

input[type="text"], 
input[type="tel"], 
input[type="email"], 
input[type="number"], 
input[type="date"], 
input[type="time"] {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    transition: border-color 0.2s ease !important;
}

input:focus {
    outline: none !important;
    border-color: #1b4a7a !important; /* Focus Color = Trust Blue */
    box-shadow: 0 0 0 3px rgba(27, 74, 122, 0.1) !important;
}

/* Primary Button - Trust Blue */
.btn-primary {
    background-color: #1b4a7a !important;
    border-color: #1b4a7a !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 14px 32px !important;
}

.btn-primary:hover {
    background-color: #163c63 !important;
    transform: translateY(-1px) !important;
}

/* Secondary Button - Clean Outline */
.btn-secondary {
    background-color: transparent !important;
    border: 2px solid #e2e8f0 !important;
    color: #475569 !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}

.btn-secondary:hover {
    border-color: #1b4a7a !important;
    color: #1b4a7a !important;
    background-color: #ffffff !important;
}

/* 6. TIMELINE & PROGRESS - Visual Continuity */

.progress-timelinee li {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
}

/* Completed Step - Trust Green */
.progress-timelinee li.completed {
    background: rgba(31, 111, 67, 0.04) !important;
    border-color: rgba(31, 111, 67, 0.2) !important;
    color: #1f6f43 !important;
}

/* Active Step - Brand Blue */
.progress-timelinee li.active {
    background: rgba(27, 74, 122, 0.04) !important;
    border-color: rgba(27, 74, 122, 0.3) !important;
    color: #1b4a7a !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(27, 74, 122, 0.08) !important;
}

/* 7. CARD HEADINGS & LISTS */

.transparency-card h3, 
.analytics-card h3, 
.proof-block h3,
.recommend-card h3,
.decision-block h3,
.support-section h3 {
    color: #1e293b !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
    letter-spacing: -0.2px !important;
    text-transform: none !important;
}

.decision-block ul li,
.support-section p,
.transparency-content {
    color: #475569 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

/* 8. MICRO COMMITMENT - Gentle Prompt */
.micro-commit {
    border-top: 2px solid #ff6b35 !important; /* Orange top border for attention */
}

.micro-btn {
    border: 1px solid #1b4a7a !important;
    color: #1b4a7a !important;
    font-weight: 600 !important;
}

.micro-btn:hover {
    background-color: #1b4a7a !important;
    color: #ffffff !important;
}
/* ============================================================================
   PHASE-4 RECOVERY PATCH: AUTHORITY, HIERARCHY & TRUST RESTORATION
   ============================================================================ */

/* 1. GLOBAL TEXT LEGIBILITY & CONTRAST
   Enforces strict, high-contrast readable type across the entire page. */
body, .page, p, li, div {
    color: #4b5563 !important; /* Secondary text: Readable Slate */
}

h1, h2, h3, h4, strong, b, .detail-value {
    color: #1f2933 !important; /* Primary text: Deep Charcoal Authority */
}

.meta, small, .detail-label, .presence-note, .proof-subtext {
    color: #6b7280 !important; /* Muted text: Neutral Gray */
}

/* 2. REINSTATE CONTROLLED DEPTH (BACKGROUND ARCHITECTURE)
   Creates a layered structure using the requested light-blue/gray palette. */
body {
    background-color: #f4f7fb !important; /* Base Page Background */
}

/* Primary Content Layers (White) */
.property-header, 
.property-cta, 
.decision-support, 
.property-recommendations, 
.callback-section, 
.appointment-section {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* Trust & Analysis Layers (Soft Contrast #eef2f7) */
.property-details,
.property-transparency,
.trust-authority,
.investment-analytics,
.property-proof,
.process-proof,
.trust-presence,
.decision-confidence,
.property-map-section {
    background-color: #eef2f7 !important;
    border-top: 1px solid #dbeafe !important;
    border-bottom: 1px solid #dbeafe !important;
}

/* 3. BRAND PSYCHOLOGY: HEADINGS & ACCENTS
   Brand Blue (#1b4a7a) for Trust. Brand Orange (#ff6b35) for Energy. */
h1, h2 {
    color: #1b4a7a !important;
    letter-spacing: -0.025em !important;
}

/* Authority Accent Line under H2s */
h2 {
    position: relative;
    margin-bottom: 2rem !important;
    padding-bottom: 12px !important;
}

h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0; /* Align left for strong read line */
    width: 60px;
    height: 4px;
    background-color: #ff6b35 !important; /* Brand Orange Accent */
    border-radius: 2px;
}

/* Centered headers in specific sections get centered accents */
.property-header h2::after, 
.trust-authority h2::after,
.property-cta h2::after {
    left: 50%;
    transform: translateX(-50%);
}

/* 4. THE AUTHORITY CARD SYSTEM
   Elevated white cards with Brand Blue left-border anchors. */
.transparency-card, 
.analytics-card, 
.trust-seal, 
.decision-block, 
.support-section, 
.process-step, 
.proof-block, 
.recommend-card,
.detail-item {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #1b4a7a !important; /* Trust Anchor */
    border-radius: 8px !important;
    padding: 24px 28px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 24px !important;
}

/* Card Titles */
.transparency-card h3, 
.analytics-card h3, 
.trust-seal strong, 
.decision-block h3, 
.process-step h3 {
    color: #1b4a7a !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

/* 5. FORM AUTHORITY & CONVERSION
   Elevated containers and commanding Orange CTAs. */
.callback-form, 
.appointment-form {
    background-color: #ffffff !important;
    padding: 40px !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #e5e7eb !important;
    max-width: 500px;
    margin: 0 auto;
}

/* Inputs */
input[type="text"], input[type="tel"], input[type="email"], input[type="date"], input[type="time"], input[type="number"] {
    background-color: #f9fafb !important;
    border: 1px solid #d1d5db !important;
    color: #1f2933 !important;
    font-weight: 500 !important;
    padding: 14px 16px !important;
    border-radius: 6px !important;
}

input:focus {
    background-color: #ffffff !important;
    border-color: #1b4a7a !important;
    box-shadow: 0 0 0 3px rgba(27, 74, 122, 0.15) !important;
    outline: none !important;
}

/* Primary CTA - Brand Orange */
.btn-primary {
    background-color: #ff6b35 !important;
    border: 1px solid #ff6b35 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 16px 32px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 6px -1px rgba(255, 107, 53, 0.3) !important;
    width: 100%; /* Force full width in forms */
}

.btn-primary:hover {
    background-color: #e65100 !important;
    transform: translateY(-1px);
}

/* 6. MICRO-ACCENTS & DETAILS
   Using Orange to guide the eye to key data points. */
.step-number, 
.detail-label, 
.transparency-status,
.verified-badge {
    color: #ff6b35 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.05em !important;
}

.property-type-label {
    background: #fff5eb !important; /* Light Orange Tint */
    color: #ff6b35 !important;
    border: 1px solid #fed7aa !important;
    font-weight: 700 !important;
}
/* ============================================================================
   FINAL LAYOUT ADJUSTMENT: FIX GAPS & NARROW COMMIT BLOCKS
   ============================================================================ */

/* 1. FIX "BLACK BLOCKS" (ELIMINATE GAPS)
   Force lower sections to be full-width with zero vertical margins.
   This ensures the light backgrounds connect seamlessly without showing gaps. */
.property-details,
.property-transparency,
.investment-analytics,
.decision-confidence,
.micro-commit,
.property-cta {
    width: 100% !important;
    max-width: none !important; /* Override any legacy constraints */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 2. RESIZE "ORANGE BLOCK" & PRECEDING BLOCK
   Constrain the width of the content inside the bottom sections and center it,
   matching the requested narrower block size. */

/* Target the sections */
.decision-confidence, /* Block above the orange one */
.micro-commit {       /* The "Orange Block" */
    padding-left: 32px !important; /* Ensure safe padding on small screens */
    padding-right: 32px !important;
}

/* Target all direct children elements to constrain their width & center them */
.decision-confidence > *,
.micro-commit > * {
    max-width: 900px !important; /* Set the narrower block width */
    margin-left: auto !important; /* Center horizontally */
    margin-right: auto !important;
}
/* ============================================================================
   FINAL LAYOUT ADJUSTMENT: NARROW BOTTOM BLOCKS (CORRECTED)
   Goal: Force the bottom two colored blocks to be narrower and centered.
   ============================================================================ */

/* Target the bottom two container blocks directly */
.decision-confidence,
.micro-commit {
    /* 1. Define the narrower maximum width */
    max-width: 900px !important;
    width: 90% !important; /* Responsive width for smaller screens */

    /* 2. Center the blocks horizontally on the page */
    margin-left: auto !important;
    margin-right: auto !important;

    /* 3. Add vertical spacing so they don't touch other sections */
    margin-top: 60px !important;
    margin-bottom: 60px !important;

    /* 4. Round corners to make them look like distinct blocks */
    border-radius: 12px !important;
    
    /* Ensure padding is contained within the width */
    box-sizing: border-box !important;
}
/* ============================================================================
   FINAL CORRECTED PATCH: FULL WIDTH BACKGROUNDS + NARROW CONTENT BLOCKS
   ============================================================================ */

/* 1. RESET SECTIONS TO FULL WIDTH (Fixes Black Gaps) */
/* This ensures the white/grey background touches the screen edges. */
.property-cta,
.micro-commit,
.decision-confidence,
.property-details, 
.property-transparency, 
.investment-analytics {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* 2. CONSTRAIN CONTENT TO CENTER BLOCK (Fixes Massive Orange Bar) */
/* We target the .container INSIDE these sections to shrink the content width. */
.property-cta .container,
.micro-commit .container,
.decision-confidence .container {
    max-width: 700px !important; /* Forces the narrow "Card" look */
    width: 90% !important;       /* Responsive padding */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;       /* Clean alignment */
}

/* 3. REFINE ORANGE BUTTON */
/* Ensures the button fills the narrow container nicely, looking like a solid block. */
.property-cta .btn-primary,
.micro-commit .micro-btn {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin-top: 20px !important;
    max-width: 100% !important; /* Prevents overflow */
}

/* 4. ALIGN TEXT */
/* Ensures the headers inside these narrow blocks look intentional */
.property-cta h2,
.property-cta p,
.micro-commit p {
    text-align: left !important; /* Or center, depending on preference. Keeping left for readability. */
}/* ============================================================================
   VISUAL CORRECTION: FORCE WHITE BACKGROUNDS & CARD VISIBILITY
   Goal: "Recommended for You" & "Next Steps" must be white with readable text.
   ============================================================================ */

/* 1. FORCE SECTIONS TO WHITE */
.property-recommendations,
.property-cta {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important; /* Kill any dark gradients */
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #334155 !important; /* Switch text to Dark Slate */
}

/* 2. FIX HEADINGS & SUBTEXT */
.property-recommendations h2,
.property-cta h2 {
    color: #1b4a7a !important; /* Brand Blue */
    text-shadow: none !important;
}

.recommend-subtext,
.property-cta p {
    color: #64748b !important; /* Readable Slate Grey */
}

/* 3. FIX "RECOMMENDED" CARDS (Make them visible on white) */
.recommend-card {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important; /* Visible border */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; /* Soft shadow */
    border-radius: 12px !important;
    padding: 24px !important;
}

/* Fix Text Inside Cards */
.recommend-card h3 {
    color: #1e293b !important; /* Dark Title */
    margin-bottom: 8px !important;
}

.recommend-card p,
.recommend-card span {
    color: #475569 !important; /* Dark Grey Text */
}

/* 4. HOVER STATE FOR CARDS */
.recommend-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 20px rgba(27, 74, 122, 0.15) !important; /* Blue-tint shadow */
    border-color: #1b4a7a !important;
}

/* 5. ENSURE CTA BUTTONS STAND OUT */
.property-cta .btn-secondary {
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

.property-cta .btn-secondary:hover {
    border-color: #1b4a7a !important;
    color: #1b4a7a !important;
    background: #f8fafc !important;
}/* ============================================================================
   VISUAL CORRECTION: DOCUMENT CHECKLIST TICKS
   Goal: Convert text "yes" badges into Green Checkboxes with White Ticks
   ============================================================================ */

/* 1. CONTAINER ALIGNMENT */
/* Ensures the checkbox and text align perfectly */
#pt-documents p {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    font-size: 16px !important;
    color: #334155 !important;
}

/* 2. TRANSFORM THE BADGE INTO A BOX */
.transparency-badge.badge-yes {
    /* Hide the original text 'yes' */
    font-size: 0 !important; 
    color: transparent !important;
    
    /* Box Styling */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    height: 24px !important;
    background-color: #16a34a !important; /* Trustworthy Green */
    border: 1px solid #15803d !important; /* Slight border definition */
    border-radius: 6px !important;        /* Modern soft square */
    padding: 0 !important;
    margin-right: 12px !important;        /* Space between box and text */
    margin-left: 0 !important;            /* Remove old margins */
    flex-shrink: 0 !important;            /* Prevent box from squishing */
}

/* 3. INJECT THE WHITE TICK */
.transparency-badge.badge-yes::after {
    content: "\2713";                     /* Checkmark Unicode */
    font-size: 16px !important;           /* Tick Size */
    color: #ffffff !important;            /* White Tick */
    font-weight: 900 !important;          /* Bold Tick */
    line-height: 1;
    display: block;
    transform: translateY(-1px);          /* Optical center alignment */
}/* ============================================================================
   VISUAL CORRECTION: MAP & INTELLIGENCE SECTION (FORCE WHITE)
   Goal: Switch Location/Map section to bright theme with readable text.
   ============================================================================ */

/* 1. SECTION BACKGROUND */
.property-map-section {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important; /* Removes dark gradient */
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #334155 !important; /* Switch text to Dark Slate */
}

/* 2. HEADINGS & TEXT */
.property-map-section h2 {
    color: #1b4a7a !important; /* Brand Blue */
    text-shadow: none !important;
}

/* 3. CONTEXT CARDS (The 4 boxes on the right) */
.land-context > div {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important; /* Visible Slate Border */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; /* Soft Shadow */
    color: #475569 !important; /* Dark Grey Body Text */
}

/* Hover Effect for Cards */
.land-context > div:hover {
    border-color: #1b4a7a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(27, 74, 122, 0.1) !important;
}

/* 4. CARD LABELS (Strong Text) */
.land-context strong {
    color: #1b4a7a !important; /* Blue labels */
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

/* 5. MAP CONTAINER STYLING */
#propertyMap {
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    background-color: #f1f5f9 !important; /* Light placeholder if map loads slow */
}/* ============================================================================
   VISUAL OVERRIDE: INSIGHTS PAGE (PHASE-4 ALIGNMENT)
   Goal: Convert Dark Blocks to White Cards with Trust-First Typography
   ============================================================================ */

/* 1. SECTIONS BACKGROUNDS (Global Light Shift) */
.insights-intro,
.knowledge-foundation,
.persona-learning,
.insights-tools {
    background-color: #ffffff !important;
    background: #ffffff !important; /* Remove any legacy gradients */
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 80px 0 !important;
}

/* Add alternating off-white background for visual rhythm */
.knowledge-foundation, 
.insights-tools {
    background-color: #f8f9fa !important;
}

/* 2. TEXT & INTRO TYPOGRAPHY */
.insights-statement,
.section-intro {
    color: #475569 !important; /* Warm Slate Grey */
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
}

/* 3. CARD TRANSFORMATION (Knowledge, Tracks, Tools)
   Turns black blocks into clean white cards with soft shadows */
.knowledge-block,
.track-block,
.tool-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    padding: 32px !important;
    margin-bottom: 24px !important; /* Ensure spacing */
}

/* Hover Lift Effect */
.knowledge-block:hover,
.tool-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 20px -4px rgba(27, 74, 122, 0.1) !important; /* Blue tint shadow */
    border-color: #cbd5e1 !important;
}

/* 4. CARD TYPOGRAPHY (Hierarchy) */
.knowledge-block h3,
.track-block h3,
.tool-card h3,
.insights-tools h2 {
    color: #1b4a7a !important; /* Trust Blue Headers */
    font-weight: 700 !important;
    margin-bottom: 16px !important;
}

.knowledge-block p,
.track-block p,
.tool-card p,
.topic-item span {
    color: #64748b !important; /* Readable Body Text */
    line-height: 1.6 !important;
}

.knowledge-points li,
.topic-item strong {
    color: #334155 !important; /* High Contrast List Items */
    font-weight: 600 !important;
}

/* 5. CALCULATOR INPUTS & BUTTONS (Modern UI) */
.tool-inputs input {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
}

.tool-inputs input::placeholder {
    color: #94a3b8 !important;
}

.tool-button {
    background-color: #1b4a7a !important; /* Brand Blue Button */
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    padding: 12px !important;
    transition: background-color 0.2s !important;
    cursor: pointer !important;
}

.tool-button:hover {
    background-color: #163c63 !important;
}

.tool-result {
    color: #1e293b !important;
    font-weight: 700 !important;
    border-top: 1px solid #e2e8f0 !important;
    margin-top: 20px !important;
    padding-top: 16px !important;
}/* ============================================================================
   VISUAL CORRECTION: HOME HERO (Text Color & Button Size)
   Goal: Make hero text white and shrink the massive orange button.
   ============================================================================ */

/* 1. HERO TEXT COLOR (Force White) */
/* The global authority patch forced all text to dark charcoal. 
   We must explicitly override this for the dark Hero section. */
.hero h1,
.hero p {
    color: #ffffff !important;       /* Pure White Text */
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Subtle shadow for legibility */
    text-align: left !important;     /* Force Left Alignment */
}

/* 2. HERO BUTTON (Shrink to Left) */
/* The global patch forced all buttons to 100% width. 
   We reset this specifically for the Hero CTA to make it a standard button. */
.hero .btn-primary {
    width: auto !important;           /* Natural width (Small) */
    display: inline-block !important; /* Sits on the left */
    max-width: none !important;       /* Remove constraints */
    margin-left: 0 !important;        /* Align to very left edge */
    margin-right: auto !important;
}

/* 3. HERO LAYOUT SAFETY */
/* Ensures the container itself aligns contents to the start (left). */
.hero .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Push everything to left corner */
    text-align: left !important;
}/* ============================================================================
   VISUAL CORRECTION: METRICS BAR
   Goal: Fix low contrast (grey on blue) and refine typography size.
   ============================================================================ */

/* 1. CONTAINER TEXT COLOR */
.metrics-bar {
    color: #ffffff !important; /* Force all child text to white */
}

/* 2. NUMBER SIZING & COLOR */
.metric-number {
    color: #ffffff !important;      /* Pure White */
    font-size: 42px !important;     /* Reduced from 56px for better balance */
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

/* 3. LABEL SIZING & COLOR */
.metric-label {
    color: #e2e8f0 !important;      /* Soft White (90% opacity) */
    font-size: 14px !important;     /* Reduced from 16px */
    font-weight: 500 !important;    /* Slightly lighter weight */
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}
/* ============================================================================
   VISUAL CORRECTION: GLOBAL HEADINGS (CENTER ALIGN + REMOVE LINES)
   Goal: Center all H2s and remove the orange under-bars/accents.
   ============================================================================ */

/* 1. FORCE CENTER ALIGNMENT FOR ALL H2s */
h2,
.projects-preview h2,
.trust-section h2,
.property-details h2,
.decision-support h2,
.trust-presence h2,
.property-cta h2,
.transparency-heading,
.proof-header h2,
.institutional-trust h2,
.investment-analytics h2,
.trust-authority h2,
.leadership-header h2,
.awards-header h3,
.social-proof h2,
.testimonials-title {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* 2. REMOVE ORANGE ACCENT LINES (::after pseudo-elements) */
/* This targets the specific code creating the orange bars and hides them. */
h2::after,
.projects-preview h2::after,
.trust-section h2::after,
.property-details h2::after,
.decision-support h2::after,
.trust-presence h2::after,
.property-cta h2::after,
.transparency-heading::after,
.proof-header h2::after,
.institutional-trust h2::after,
.investment-analytics h2::after,
.trust-authority h2::after,
.leadership-header h2::after,
.social-proof h2::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* 3. ENSURE SUBTEXT IS ALSO CENTERED (Visual Balance) */
/* If the heading is centered, the paragraph below it usually should be too. */
.section-intro,
.trust-intro,
.analytics-intro,
.transparency-subtext,
.proof-subtext,
.recommend-subtext,
.trust-subtext,
.leadership-header p,
.awards-header p,
.social-subtitle {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}/* ============================================================================
   VISUAL CORRECTION: TOP BAR VISIBILITY
   Goal: Make phone number and phone icon pure white for readability.
   ============================================================================ */

/* 1. PHONE TEXT COLOR */
.topbar-phone {
    color: #ffffff !important;       /* Force pure white text */
    font-weight: 600 !important;     /* Maintain bold weight */
    opacity: 1 !important;           /* Ensure no transparency dims it */
}

/* 2. PHONE ICON COLOR */
/* This targets the SVG or icon element inside the phone container */
.topbar-phone i, 
.topbar-phone svg,
.topbar-phone .icon {
    color: #ffffff !important;       /* Force icon to white */
    fill: #ffffff !important;        /* Force SVG fill to white */
    opacity: 1 !important;
}

/* 3. SOCIAL ICONS (Optional safety) */
/* Ensures the social icons on the right are also white */
.topbar-right a,
.topbar-right i,
.topbar-right svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    opacity: 1 !important;
}
/* ============================================================================
   FIX: FORCE INVESTOR CARD ANIMATION & BACKGROUND
   Add this to the END of your main.css file
   ============================================================================ */

/* 1. Ensure the background layer for investor is visible when class is active */
.start-here-container.bg-investor::before {
    opacity: 1 !important;
    transform: scale(1) !important;
    z-index: -1 !important;
    background-image: url('../images/investor-hero.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
}

/* 2. Force the hover lift and glow for the Investor card specifically */
.persona-card[data-persona="investor"]:hover {
    transform: translateY(-12px) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(10, 12, 16, 0.8) 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5) !important;
    opacity: 1 !important;
}

/* 3. Ensure text inside Investor card highlights correctly */
.persona-card[data-persona="investor"]:hover h3 {
    color: #fff !important;
    transform: translateY(-4px) !important;
}

.persona-card[data-persona="investor"]:hover p {
    color: #fff !important;
    opacity: 1 !important;
}

/* 4. Debug: Force initial state to be visible */
.start-here-container::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    opacity: 0 !important;
    z-index: -1 !important;
}
/* ===== SURGICAL FIX — START HERE TEXT COLORS ONLY ===== */

/* Main hero text */
.start-here-container h1,
.start-here-container .hero-title {
    color: #ffffff !important;
}

.start-here-container .hero-subtitle,
.start-here-container p.subtitle {
    color: rgba(255,255,255,0.85) !important;
}

/* Persona card titles */
.start-here-container .persona-card h3,
.start-here-container .persona-card .title {
    color: #ffffff !important;
}

/* Persona card descriptions */
.start-here-container .persona-card p,
.start-here-container .persona-card .description {
    color: rgba(255,255,255,0.82) !important;
}
.start-here-container .start-here-subtitle {
    color: rgba(255,255,255,0.85) !important;
}
/* ===== Page: Return Visitor Banner Text Fix ===== */
.return-banner p {
  color: #ffffff !important;
}
/* ================================
   KNOWLEDGE PAGE — COLOR REPAIR
   ================================ */

body[data-page="knowledge"] {
  background: #f6f9fc;
}

/* Header */
body[data-page="knowledge"] .page-header {
  background: #ffffff;
}

body[data-page="knowledge"] .page-header h1 {
  color: #1b4a7a;
}

body[data-page="knowledge"] .page-header p {
  color: #6b7c93;
}

/* Main section */
body[data-page="knowledge"] .knowledge-section {
  background: #f6f9fc;
}

/* Knowledge cards */
body[data-page="knowledge"] .knowledge-grid > div,
body[data-page="knowledge"] .knowledge-grid article,
body[data-page="knowledge"] .knowledge-grid .knowledge-card {
  background: #ffffff !important;
  color: #1b4a7a !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Category label */
body[data-page="knowledge"] .knowledge-grid small,
body[data-page="knowledge"] .knowledge-grid .category {
  color: #ff6a2b !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Titles */
body[data-page="knowledge"] .knowledge-grid h3,
body[data-page="knowledge"] .knowledge-grid h2 {
  color: #1b4a7a !important;
}

/* Descriptions */
body[data-page="knowledge"] .knowledge-grid p {
  color: #6b7c93 !important;
}

/* Links */
body[data-page="knowledge"] .knowledge-grid a {
  color: #ff6a2b !important;
  font-weight: 600;
}

/* Kill all dark overlays */
body[data-page="knowledge"] .knowledge-grid * {
  background-image: none !important;
}
/* ================================
   KNOWLEDGE PAGE — VISUAL RESTORE
   ================================ */

/* Page background */
body .knowledge-page,
body .knowledge-container,
body .knowledge-wrapper {
    background: #f5f8fc !important;
}

/* Main section spacing */
.knowledge-hero {
    padding: 90px 0 40px;
    background: #ffffff;
    text-align: center;
}

/* Title */
.knowledge-hero h1 {
    color: #123e6b !important;
    font-weight: 700;
}

/* Subtitle */
.knowledge-hero p {
    color: #6b7c93 !important;
}

/* Grid layout */
.knowledge-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 36px;
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 20px;
}

/* Card */
.knowledge-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 34px 32px !important;
    border: 1px solid #e6ecf2 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.04) !important;
    transition: transform .25s ease, box-shadow .25s ease;
}

.knowledge-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}

/* Category label */
.knowledge-card .category {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ff6b2d !important;
    margin-bottom: 12px;
}

/* Card title */
.knowledge-card h3 {
    color: #123e6b !important;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

/* Description */
.knowledge-card p {
    color: #6b7c93 !important;
    line-height: 1.6;
}

/* Read guide */
.knowledge-card a {
    display: inline-block;
    margin-top: 16px;
    font-weight: 700;
    color: #ff6b2d !important;
    text-decoration: none;
}

/* Kill any dark / old layout */
.knowledge-list,
.knowledge-dark,
.knowledge-row {
    background: transparent !important;
}

/* Responsive */
@media (max-width: 900px) {
    .knowledge-grid {
        grid-template-columns: 1fr;
    }
}
/* ============================
   KNOWLEDGE PAGE COLOR FIX
   (Text + Card Colors Only)
   ============================ */

/* Page background */
.knowledge-page,
.knowledge-container,
.knowledge-section {
  background: #f6f9fc !important;
}

/* Section heading */
.knowledge-hero h1,
.knowledge-title {
  color: #1b4a7a !important;
}

.knowledge-hero p,
.knowledge-subtitle {
  color: #6b7c93 !important;
}

/* Knowledge cards */
.knowledge-card {
  background: #ffffff !important;
  border: 1px solid #e6edf5 !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.03) !important;
}

/* Card category label */
.knowledge-card .category,
.knowledge-card small {
  color: #ff6b2c !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

/* Card title */
.knowledge-card h3 {
  color: #0b3a6f !important;
}

/* Card description */
.knowledge-card p {
  color: #5f6f85 !important;
}

/* Read Guide link */
.knowledge-card a,
.knowledge-card .read-guide {
  color: #ff6b2c !important;
  font-weight: 600 !important;
}

.knowledge-card a:hover {
  color: #ff4a00 !important;
}

/* Remove any dark / black overrides */
.knowledge-section *,
.knowledge-card * {
  background-color: transparent !important;
}

/* Prevent global dark text overrides from affecting this page */
body.knowledge-page * {
  color: inherit;
}
/* =====================================================================
   KNOWLEDGE PAGE — CARD RESTORATION (matches backup layout)
   ===================================================================== */

#knowledgeIndex,
.knowledge-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 40px !important;
  max-width: 1100px !important;
  margin: 80px auto 120px auto !important;
}

.knowledge-card,
.knowledge-entry {
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 36px 32px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04) !important;
  border: 1px solid #e6eef6 !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

.knowledge-card:hover,
.knowledge-entry:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.08) !important;
}

.knowledge-card small,
.knowledge-entry p:first-child {
  color: #ff6a33 !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
  display: block !important;
}

.knowledge-card h3,
.knowledge-entry h3 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #153e6f !important;
  margin-bottom: 12px !important;
}

.knowledge-card p,
.knowledge-entry p {
  color: #5f6f82 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.knowledge-card a,
.knowledge-entry a {
  margin-top: 18px !important;
  display: inline-block !important;
  color: #ff6a33 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.knowledge-card a:hover,
.knowledge-entry a:hover {
  text-decoration: underline !important;
}

/* =====================================================================
   GUIDE PAGE — LAYOUT RESTORATION (matches old screenshot)
   ===================================================================== */

#guideHeader h1 {
  font-size: 44px !important;
  font-weight: 800 !important;
  color: #1d3557 !important;
  margin-bottom: 40px !important;
}

#guideBody {
  max-width: 900px !important;
  margin: 0 auto 120px auto !important;
  padding-top: 30px !important;
}

#guideBody p {
  font-size: 17px !important;
  color: #4f6278 !important;
  line-height: 1.75 !important;
  margin-bottom: 22px !important;
}

#guideBody h3 {
  margin-top: 40px !important;
  margin-bottom: 12px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1f4c7d !important;
}

#guideBody .lead {
  font-style: italic !important;
  font-size: 18px !important;
  color: #2f4f6f !important;
  border-left: 4px solid #ff6a33 !important;
  padding-left: 18px !important;
  margin-bottom: 28px !important;
}
/* ================================
   DASHBOARD — LIGHT THEME OVERRIDE
   APPEND TO END OF main.css
   ================================ */

body[data-page="dashboard"] {
  background: #f6f9fc !important;
  color: #1b4a7a !important;
}

/* Global text fix */
body[data-page="dashboard"] h1,
body[data-page="dashboard"] h2,
body[data-page="dashboard"] h3,
body[data-page="dashboard"] p,
body[data-page="dashboard"] span,
body[data-page="dashboard"] div {
  color: #1b4a7a !important;
}

/* Remove all dark / black sections */
body[data-page="dashboard"] .sales-playbook,
body[data-page="dashboard"] .followup-system,
body[data-page="dashboard"] .reporting-system {
  background: #ffffff !important;
}

/* Main cards / blocks */
body[data-page="dashboard"] #intelligenceBoard > div,
body[data-page="dashboard"] .playbook-board > div,
body[data-page="dashboard"] .followup-board > div,
body[data-page="dashboard"] .report-summary > div {
  background: #ffffff !important;
  border: 1px solid #e3ebf5 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04) !important;
}

/* Section titles */
body[data-page="dashboard"] h1,
body[data-page="dashboard"] h2 {
  color: #1b4a7a !important;
}

/* Subtext */
body[data-page="dashboard"] .analytics-subtitle,
body[data-page="dashboard"] .playbook-subtext,
body[data-page="dashboard"] .followup-subtext,
body[data-page="dashboard"] .reporting-subtext {
  color: #5c7896 !important;
}

/* Buttons */
body[data-page="dashboard"] .btn-primary {
  background: #ff6b2d !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 8px 16px rgba(255,107,45,0.35) !important;
}

/* Remove any remaining dark overlays */
body[data-page="dashboard"] * {
  background-image: none !important;
}

/* Sales Playbook + Follow-up grid spacing fix */
body[data-page="dashboard"] .playbook-board,
body[data-page="dashboard"] .followup-board {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 20px !important;
}

/* Mobile safety */
@media (max-width: 768px) {
  body[data-page="dashboard"] {
    background: #ffffff !important;
  }
}
/* ============================================================================
   CONTACT PAGE (Clean White & Brand Colors)
   ============================================================================ */

/* 1. Force Pure White Background */
body[data-page="contact"] {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #334155 !important;
}

/* 2. Contact Hero (Pure White with Brand Typography) */
.contact-hero {
    background: #ffffff !important; /* Pure White */
    padding: 100px 0 80px 0;
    text-align: center;
    border-bottom: 1px solid #f1f5f9; /* Extremely subtle divider */
}

.contact-hero h1 {
    color: #1b4a7a !important; /* Trust Blue */
    font-size: 48px !important;
    font-weight: 800 !important;
    letter-spacing: -1px;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

/* The Signature Orange Underline */
.contact-hero h1::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background-color: #ff6b35; /* Action Orange */
    margin: 15px auto 0 auto;
    border-radius: 2px;
}

.contact-hero p {
    color: #475569 !important; /* Slate Grey */
    font-size: 18px;
    max-width: 600px;
    margin: 25px auto 0 auto;
    line-height: 1.6;
}

/* 3. Section Layout */
.contact-section {
    padding: 80px 0;
    background: #ffffff !important;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
}

/* 4. Form Styling (Clean & Minimal) */
.contact-form-wrapper {
    background: #ffffff;
    padding: 40px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.03); /* Soft Shadow */
}

.contact-form-wrapper h3 {
    color: #1b4a7a;
    font-size: 24px;
    margin-bottom: 30px;
    font-weight: 700;
}

.form-group { margin-bottom: 25px; }

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 16px;
    color: #1e293b;
    background: #f8fafc; /* Very light grey input bg */
    transition: all 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #1b4a7a;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(27, 74, 122, 0.1);
}

/* 5. Sidebar Info Cards */
.info-card {
    background: #f8fafc; /* Subtle contrast box */
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 30px;
    border: 1px solid #e2e8f0;
}

.info-card h3 {
    color: #1b4a7a;
    font-size: 18px;
    margin-bottom: 15px;
    border-bottom: 2px solid #ff6b35;
    padding-bottom: 10px;
    display: inline-block;
}

.info-card p {
    color: #475569;
    font-size: 15px;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .contact-hero h1 { font-size: 36px !important; }
}
/* ===========================
   ABOUT PAGE — FINAL FIX
=========================== */

.about-page {
  background: #f7fafc;
}

/* HERO */
.about-hero {
  background: #ffffff;
  padding: 80px 20px 50px;
  border-bottom: 1px solid #e6edf5;
}

.about-hero-overlay {
  display: none;
}

.about-hero-content h1 {
  color: #1f4e79;
  font-size: 48px;
  font-weight: 700;
  text-align: center;
}

.about-hero-content p {
  color: #6b7c93;
  text-align: center;
  margin-top: 10px;
}

/* INTRO SECTION */
.about-intro {
  background: #ffffff;
  padding: 70px 0;
}

.about-intro-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: start;
}

.about-intro-text h2 {
  color: #1f4e79;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 20px;
}

.about-intro-text p {
  color: #5c6f82;
  line-height: 1.7;
  margin-bottom: 16px;
}

/* MD CARD */
.md-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 30px 24px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.md-photo {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  object-fit: cover;
  border: 6px solid #1f4e79;
  margin-bottom: 18px;
}

.md-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1f4e79;
  margin-bottom: 6px;
}

.md-quote {
  font-size: 16px;
  color: #1f4e79;
  font-weight: 600;
  position: relative;
}

.md-quote::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: #ff6f2c;
  margin: 10px auto 0;
}

/* VISION / MISSION / VALUES */
.legacy-vmv {
  background: #ffffff;
  padding: 70px 0 90px;
}

.vmv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  text-align: center;
}

.vmv-col {
  background: transparent;
}

.vmv-icon {
  font-size: 38px;
  color: #2e7d32;
  margin-bottom: 12px;
}

.vmv-col h4 {
  font-size: 20px;
  font-weight: 700;
  color: #1f4e79;
  margin-bottom: 10px;
}

.vmv-col p {
  color: #5c6f82;
  line-height: 1.7;
  font-size: 15px;
}

.vmv-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vmv-col ul li {
  color: #1f4e79;
  font-weight: 600;
  margin: 6px 0;
}

.vmv-col ul li i {
  color: #2e7d32;
  margin-right: 6px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .about-intro-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

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

  .md-photo {
    width: 180px;
    height: 180px;
  }
}
/* ABOUT PAGE – final polish */

.vmv-icon,
.vmv-col i,
.vmv-col svg {
  color: #2e7d32 !important;     /* rich green */
  fill: #2e7d32 !important;
}

/* Telugu quote under MD */
.md-quote {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.5;
  letter-spacing: 0.3px;
}