.why-feature-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* Header logo on hero — only when navbar is transparent (not inside mobile offcanvas) */
body:has(.home-hero) .header:not(.header--scrolled) .header-logo,
body:has(.hero-banner) .header:not(.header--scrolled) .header-logo {
  mix-blend-mode: multiply;
}

.offcanvas .header-logo,
.offcanvas .header-logo img {
  mix-blend-mode: normal !important;
}

/* text-heading-color-1 selalu pakai accent (--heading-color-1) */
.text-heading-color-1 {
  color: var(--heading-color-1) !important;
}

.footer .text-color-3,
.footer-terms a {
  color: var(--text-secondary-color) !important;
}

.footer .text-color-3:hover,
.footer .text-color-3:focus,
.footer-terms a:hover,
.footer-terms a:focus {
  color: var(--heading-color-1) !important;
}

/* Contrast on dark section backgrounds */
.bg-heading-color-3 .text-heading-color-1,
.home-hero .hero-content .text-heading-color-1 {
  color: var(--heading-color-1) !important;
}

/* Body copy on light backgrounds — skip dark cards & overlay sections */
.bg-color:not(:has([class*="bg-overlay"])) p:not(.blog-excerpt) {
  color: #4a4a4a !important;
}

/* Dark cards & CTA overlays inside bg-color sections */
.bg-color .blog .blog-excerpt,
.bg-color .blog h4,
.bg-color .blog h4 a,
section.bg-color:has([class*="bg-overlay"]) .text-secondary-color,
section.bg-color:has([class*="bg-overlay"]) .text-color-1,
section.bg-color:has([class*="bg-overlay"]) p {
  color: var(--text-secondary-color) !important;
}

/* Tap targets */
.navbar-toggler,
.btn-close,
.icon-social,
.icon-contact,
.nav-link.dropdown-toggle.icon-submenu,
.btn-cta-primary,
.btn-cta-form,
.submit_form,
.submit_subscribe {
  min-width: 44px;
  min-height: 44px;
}

.icon-submenu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

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

  .kb-carousel .carousel-item img {
    transform: none !important;
  }

  .hero-copy-animate {
    animation: none !important;
  }
}

/* Fallback: keep catalog/listing content visible if AOS JS fails to load */
body:not(.aos-ready) [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

/* Service cards: show text without hover on touch / catalog pages */
@media (hover: none), (pointer: coarse) {
  .service-box .service-wrap {
    transform: translateY(0);
  }
}

.service-bg-white .service-box .service-wrap,
.blog-list-page .service-box .service-wrap {
  transform: translateY(0);
}

.service-bg-white .service-box:hover .service-wrap,
.blog-list-page .service-box:hover .service-wrap {
  transform: translateY(0);
}

/* Catalog pages without hero banner need space under fixed header */
body:not(:has(.hero-banner)) main > .section:first-child,
body:not(:has(.hero-banner)) main > div:first-child > .section:first-child {
  padding-top: 160px;
}

@media (max-width: 767.98px) {
  body:not(:has(.hero-banner)) main > .section:first-child,
  body:not(:has(.hero-banner)) main > div:first-child > .section:first-child {
    padding-top: 120px;
  }
}

section.service-bg-white {
  background-color: var(--secondary-color);
}

section.service-bg-white .text-heading-color-3,
section.service-bg-white h2.text-heading-color-3 {
  color: var(--heading-color-3) !important;
}

section.service-bg-white > .b-container > .row > .col-12 > p,
section.service-bg-white .col-12.col-xl-3.d-flex.align-items-end > p {
  color: #4a4a4a;
}

/* Defer paint for below-fold homepage sections */
.cv-auto-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

/* Keep partners bar fully visible above the overlapping services section */
section.our-partners .client-wrapper {
  position: relative;
  z-index: 2;
}

/* Prevent layout shift for hero */
.kb-carousel .carousel-item img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  min-height: 420px;
}

@media (min-width: 992px) {
  .kb-carousel .carousel-item img {
    min-height: 560px;
  }
}

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--heading-color-1);
  outline-offset: 2px;
}