/* Static pages — brand overrides (loaded after inline page styles) */
.page-service-brand {
  background: var(--bg);
}

/* Hero sections */
.page-service-brand [class$="-hero"] {
  background: var(--bg) !important;
  color: var(--dark) !important;
  border-bottom: 2px solid var(--brand-dark);
}

.page-service-brand [class$="-hero"] h1 {
  color: var(--dark) !important;
  font-weight: 900 !important;
}

.page-service-brand [class$="-hero"] h2,
.page-service-brand [class$="-hero"] p {
  color: var(--muted) !important;
}

.page-service-brand [class$="-hero"]::before {
  opacity: 0.12 !important;
}

/* Section backgrounds */
.page-service-brand [class$="-intro"],
.page-service-brand .profil-section,
.page-service-brand .kontak-info-section,
.page-service-brand .keunggulan-section {
  background: var(--brand-soft) !important;
}

.page-service-brand .bangunan-services,
.page-service-brand .layanan-section,
.page-service-brand .services-section,
.page-service-brand .lokasi-section,
.page-service-brand .page-content {
  background: var(--bg) !important;
}

.page-service-brand section h2 {
  color: var(--dark) !important;
  font-weight: 900 !important;
}

.page-service-brand .profil-text h2,
.page-service-brand .bangunan-text h3,
.page-service-brand .service-card h3,
.page-service-brand .layanan-content h3,
.page-service-brand .kontak-card h3,
.page-service-brand .keunggulan-item h4,
.page-service-brand .jam-operasional h3,
.page-service-brand .lokasi-content h3 {
  color: var(--dark) !important;
}

/* Cards & grids */
.page-service-brand .bangunan-item,
.page-service-brand .service-card,
.page-service-brand .layanan-card,
.page-service-brand .kontak-card,
.page-service-brand .keunggulan-item,
.page-service-brand .jam-operasional,
.page-service-brand .lokasi-card,
.page-service-brand .emergency-card,
.page-service-brand .usage-item,
.page-service-brand .security-item,
.page-service-brand .rights-item,
.page-service-brand .sidebar-card {
  background: #fff !important;
  border: 2px solid var(--line) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 26px rgba(20, 20, 20, 0.05) !important;
}

.page-service-brand .bangunan-item::before,
.page-service-brand .service-card::before,
.page-service-brand .layanan-card::before,
.page-service-brand .kontak-card::before {
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 100%) !important;
}

.page-service-brand .bangunan-item:hover,
.page-service-brand .service-card:hover,
.page-service-brand .layanan-card:hover,
.page-service-brand .kontak-card:hover,
.page-service-brand .keunggulan-item:hover,
.page-service-brand .usage-item:hover {
  border-color: var(--brand-dark) !important;
  box-shadow: 0 10px 28px rgba(20, 20, 20, 0.08) !important;
  transform: translateY(-2px);
}

.page-service-brand .bangunan-image,
.page-service-brand .layanan-image {
  border: 2px solid var(--line);
  border-radius: 12px;
}

.page-service-brand .profil-image img {
  border: 2px solid var(--line);
  box-shadow: 0 10px 30px rgba(20, 20, 20, 0.08) !important;
}

.page-service-brand .service-details {
  background: var(--brand-soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
}

.page-service-brand .service-details h4 {
  color: var(--dark) !important;
}

.page-service-brand .keunggulan-icon,
.page-service-brand .kontak-icon {
  color: var(--brand-deep) !important;
}

.page-service-brand .jam-item {
  background: var(--brand-soft) !important;
  border-left-color: var(--brand-dark) !important;
}

.page-service-brand .jam-item .hari {
  color: var(--dark) !important;
}

.page-service-brand .kontak-details .contact-item i {
  color: var(--brand-deep) !important;
}

.page-service-brand .btn-kontak {
  background: var(--brand) !important;
  color: var(--dark) !important;
  border: 2px solid var(--brand-dark);
  font-weight: 800;
}

.page-service-brand .btn-kontak:hover {
  background: var(--brand-dark) !important;
  color: var(--dark) !important;
  box-shadow: 0 8px 24px rgba(255, 204, 0, 0.25) !important;
}

/* CTA */
.page-service-brand .cta-section {
  background: var(--dark) !important;
  color: #f3f4f6 !important;
  border-top: 2px solid var(--brand-dark);
}

.page-service-brand .cta-section h2 {
  color: var(--brand) !important;
}

.page-service-brand .cta-section p {
  color: #d1d5db !important;
}

/* Legal / info pages */
.page-service-brand .page-header {
  background: var(--bg) !important;
  color: var(--dark) !important;
  border-bottom: 2px solid var(--brand-dark);
  margin-bottom: 2rem !important;
  padding: 3rem 0 2rem !important;
}

.page-service-brand .page-title {
  color: var(--dark) !important;
  font-weight: 900 !important;
}

.page-service-brand .page-subtitle,
.page-service-brand .page-meta {
  color: var(--muted) !important;
  opacity: 1 !important;
}

.page-service-brand .breadcrumb-item a {
  color: var(--brand-deep) !important;
}

.page-service-brand .breadcrumb-item.active {
  color: var(--muted) !important;
}

.page-service-brand .content-section h2 {
  color: var(--dark) !important;
  border-bottom-color: var(--brand-dark) !important;
}

.page-service-brand .content-section h3,
.page-service-brand .content-section h4 {
  color: var(--dark) !important;
}

.page-service-brand .content-section p,
.page-service-brand .content-section li {
  color: var(--muted) !important;
}

.page-service-brand .usage-icon,
.page-service-brand .security-icon,
.page-service-brand .rights-icon {
  background: var(--brand) !important;
}

.page-service-brand .usage-icon i,
.page-service-brand .security-icon i,
.page-service-brand .rights-icon i {
  color: var(--dark) !important;
}

.page-service-brand .doc-link {
  background: var(--brand-soft) !important;
  color: var(--dark) !important;
  border: 2px solid var(--line);
}

.page-service-brand .doc-link:hover {
  background: var(--brand) !important;
  color: var(--dark) !important;
}

.page-service-brand .btn-primary {
  background: var(--brand) !important;
  color: var(--dark) !important;
  border: 2px solid var(--brand-dark) !important;
  font-weight: 800;
}

.page-service-brand .btn-primary:hover {
  background: var(--brand-dark) !important;
  color: var(--dark) !important;
}

.page-service-brand .btn-warning {
  background: var(--brand) !important;
  color: var(--dark) !important;
  border: 2px solid var(--brand-dark) !important;
}

.page-service-brand .sidebar-section {
  background: #fff !important;
  border: 2px solid var(--line) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 26px rgba(20, 20, 20, 0.05) !important;
}

.page-service-brand .sidebar-title {
  background: var(--dark) !important;
  color: var(--brand) !important;
}