/* ===== Global typography ===== */
:root {
  --base-font-family: Averta, Arial, sans-serif;

  --base-font-size: 16px; /* full website base size */
  --base-text-color: #1f2933; /* dark grey instead of pure black */
  --brand-blue: #1177e8;
  --brand-navy: #07345e;
  --midnight-blue: #07345e;
  --section-title-size: 48px;
  --section-subtitle-size: clamp(1rem, 1.35vw, 1.18rem);
  --section-white: #ffffff;
  --section-soft: #f7fbff;
  --section-soft-alt: #eef6ff;
  --section-border: #dfeaf4;
}

html {
  font-size: var(--base-font-size);
  scroll-behavior: smooth; /* keep your smooth scroll here too */
}

body {
  font-family: var(--base-font-family);
  color: var(--base-text-color);
  line-height: 1.6;
  background: var(--section-soft);
}

/* All paragraph text */
p {
  font-size: 0.98rem; /* ~15.5px, adjust if you want bigger/smaller */
  margin-bottom: 0.75rem;
}

h1,
.h1 {
  color: var(--midnight-blue) !important;
  letter-spacing: -0.06rem !important;
  margin-top: 0;
  margin-bottom: 20px;
  font-family: var(--base-font-family) !important;
  font-size: var(--section-title-size) !important;
  font-weight: 700 !important;
  line-height: 1.2em !important;
}
h2,
.h2 {
  color: var(--midnight-blue) !important;
  letter-spacing: -0.06rem !important;
  margin-top: 0;
  margin-bottom: 20px;
  font-family: var(--base-font-family) !important;
  font-size: var(--section-title-size) !important;
  font-weight: 700 !important;
  line-height: 1.2em !important;
}
h3,
.h3 {
  font-size: 1.4rem;
  font-weight: 600;
}
h4,
h5,
h6 {
  font-weight: 600;
}

.navbar-brand,
.nav-link,
.dropdown-item,
.btn,
button,
input,
textarea,
select {
  font-family: var(--base-font-family);
}

.hero-title,
.clients-logo-wall-title,
.clients-title,
.digital-title,
.action-title,
.hr-app-title,
.platform-title,
.news-room-title,
.insights-title,
.industries-title,
.about-transform-title,
.hrms-platform-title,
.our-mission-title,
.values-title,
.hrms-cta-title,
.featured-title,
.section-title,
.questions-title,
.hrms-hero-title,
.emp-record-title {
  color: var(--midnight-blue) !important;
  letter-spacing: -0.06rem !important;
  margin-top: 0;
  margin-bottom: 20px;
  font-family: var(--base-font-family) !important;
  font-size: var(--section-title-size) !important;
  font-weight: 700 !important;
  line-height: 1.2em !important;
}

.hero-subtitle,
.digital-subtitle,
.action-subtitle,
.industries-subtitle,
.questions-subtitle,
.hrms-platform-subtitle {
  color: #5d6673 !important;
  letter-spacing: 0 !important;
  font-family: var(--base-font-family) !important;
  font-size: var(--section-subtitle-size) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

.home-page .hero-kicker,
.home-page .hero-title,
.home-page .hero-subtitle {
  color: #ffffff !important;
}

/* ===== Home page white / sky-blue section rhythm ===== */
.home-page {
  background: #ffffff;
}

.home-page #clients,
.home-page #action,
.home-page #platform,
.home-page #industries {
  background: #ffffff !important;
  border-top: 1px solid #e5f1fb;
  border-bottom: 1px solid #e5f1fb;
}

.home-page #digital,
.home-page #hr-app,
.home-page .news-room-section {
  background: #f3f5fa !important;
  border-top: 1px solid #d9ecff;
  border-bottom: 1px solid #d9ecff;
}

.home-page #clients {
  padding-top: 50px;
  padding-bottom: 48px;
}

.home-page #clients,
.home-page #digital,
.home-page #action,
.home-page #hr-app,
.home-page #platform,
.home-page .news-room-section,
.home-page #industries,
.home-page .footer-section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 720px;
}

.home-page .digital-card,
.home-page .action-tour,
.home-page .action-step,
.home-page .action-main-screen,
.home-page .action-mini-screen,
.home-page .feature-box,
.home-page .platform-card,
.home-page .platform-list li,
.home-page .news-room-card,
.home-page .industries-points span,
.home-page .industries-panel,
.home-page .clients-logo-wall-item {
  border-color: transparent;
  background-color: transparent;
}

.home-page .clients-logo-wall-grid {
  background: transparent;
}

.home-page .platform-section::before {
  display: none;
}

@media (max-width: 767.98px) {
  :root {
    --section-title-size: clamp(2rem, 9vw, 48px);
  }

  .home-page #clients {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .home-page .clients-logo-wall-grid {
    background: transparent;
  }
}