/* Process IQ 2026 visual refresh
   A calm, editorial system inspired by enterprise AI sites: clear hierarchy,
   generous spacing, readable sans-serif typography, and one focused accent. */
:root {
  --piq-ink: #132238;
  --piq-muted: #53657d;
  --piq-paper: #f7f9fb;
  --piq-sage: #e6f3f6;
  --piq-green: #087f98;
  --piq-green-dark: #102b43;
  --piq-line: #dbe4eb;
}

html { font-size: 16px; }
body {
  color: var(--piq-ink);
  background: var(--piq-paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.01em;
}

#main-nav {
  background: rgba(247, 248, 245, .94) !important;
  border-bottom: 1px solid var(--piq-line) !important;
  box-shadow: none !important;
}
.nav-inner { max-width: 1440px; height: 78px; padding: 0 40px; }
.nav-logo img { height: 52px !important; }
.nav-links { gap: 4px; }
.nav-link { color: var(--piq-ink) !important; font-size: 13px; padding: 9px 13px; }
.nav-link:hover { color: var(--piq-green) !important; background: var(--piq-sage) !important; }
.nav-dropdown { border: 1px solid var(--piq-line); border-radius: 12px; box-shadow: 0 18px 50px rgba(21,34,31,.12); }
.nav-dropdown a:hover { background: var(--piq-sage); color: var(--piq-green); }
.nav-cta, .btn-primary, .btn-submit {
  background: var(--piq-green) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.nav-cta:hover, .btn-primary:hover, .btn-submit:hover { background: var(--piq-green-dark) !important; }

.hero {
  min-height: auto !important;
  padding: 150px 0 96px !important;
  background: var(--piq-paper) !important;
}
.hero-bg-canvas, .hero-grid, .orb { display: none !important; }
.hero-inner { max-width: 1440px; padding: 0 40px; grid-template-columns: minmax(0, 1.03fr) minmax(420px, .97fr); gap: 96px; }
.hero-label { color: var(--piq-green) !important; letter-spacing: .14em; }
.hero-label::before { background: var(--piq-green) !important; }
.hero-h1 { max-width: 720px; font-family: Inter, ui-sans-serif, system-ui, sans-serif !important; font-size: clamp(44px, 6vw, 84px) !important; font-weight: 700 !important; letter-spacing: -.065em; line-height: .98 !important; }
.hero-h1 em { color: var(--piq-green) !important; font-style: normal; }
.hero-sub { max-width: 590px; font-size: 18px; line-height: 1.65; color: var(--piq-muted); }
.hero-trust { gap: 12px; }
.trust-item { color: var(--piq-muted); }
.hero-stats { background: var(--piq-sage); border: 0; border-radius: 18px; }
.hero-stat { border-right-color: rgba(19,122,90,.14); }
.hero-stat-num { color: var(--piq-green); }

.dashboard-card { border: 1px solid var(--piq-line); border-radius: 22px; box-shadow: 0 20px 55px rgba(21,34,31,.10); }
.hero-art { height: 220px; }
.hero-art::after { background: linear-gradient(90deg, rgba(16,43,67,.82), rgba(8,127,152,.14)); }
.dc-header { background: var(--piq-green-dark); }
.dc-title { color: #bfe8d5; }
.flow-icon { background: var(--piq-sage); color: var(--piq-green); }
.pipe-node.active { background: var(--piq-sage); border-color: var(--piq-green); color: var(--piq-green-dark); }
.dc-metric-val, .dc-bar-meta span:last-child { color: var(--piq-green); }

.metrics-bar { background: var(--piq-sage); border: 0; }
.metrics-grid { background: rgba(19,122,90,.12); }
.m-cell { background: var(--piq-sage); }
.m-num { color: var(--piq-green); }

.wwd-section, .consult-section { background: var(--piq-paper) !important; }
.sec-label { color: var(--piq-green) !important; }
.sec-h2, .form-title { font-family: Inter, ui-sans-serif, system-ui, sans-serif !important; font-weight: 700 !important; letter-spacing: -.045em; }
.sec-sub, .recv-desc { color: var(--piq-muted); }
.ust-card-deck { border-color: var(--piq-line); border-radius: 16px; box-shadow: none; }
.ust-card.active { background: var(--piq-sage); border-color: rgba(19,122,90,.18); }
.ust-card.active .ust-card-title, .ust-card-link { color: var(--piq-green-dark); }

.impact-section { background: var(--piq-green-dark) !important; }
.impact-card, .news-card { border-radius: 16px; }
.news-section { background: var(--piq-paper) !important; }
.btn-outline-teal { color: var(--piq-green) !important; border-color: var(--piq-green) !important; border-radius: 999px; }
.btn-outline-teal:hover { background: var(--piq-green) !important; color: #fff !important; }

.form-card { background: #fff; border-color: var(--piq-line) !important; border-radius: 20px !important; box-shadow: 0 18px 50px rgba(21,34,31,.08) !important; }
.finput { border-color: var(--piq-line) !important; border-radius: 10px !important; }
.finput:focus { border-color: var(--piq-green) !important; box-shadow: 0 0 0 3px rgba(19,122,90,.12) !important; }

.big-footer { background: #17221f !important; }
.footer-top { max-width: 1440px; }
.footer-top, .footer-bottom { border-color: rgba(167,220,230,.35) !important; }
.footer-brand-col::before { content: 'About Process IQ'; }
.footer-social::before, .fc-title { color: #eef8f2 !important; }
.fc-links a, .footer-tagline { color: #b9c8d6 !important; }
.fc-links a:hover, .footer-legal a:hover { color: #b9e6ee !important; }

/* Impact: preserve the strong dark panel, but keep every line readable. */
.impact-section { padding: 112px 0 !important; }
.impact-section .sec-label { color: #63c5d6 !important; }
.impact-section p { color: #c9d6e1 !important; }
.impact-section .impact-inner > div:first-child { max-width: 390px; }
.impact-section .impact-cards { align-items: stretch; }
.impact-section .impact-card { box-shadow: 0 18px 44px rgba(0,0,0,.18); }
@media (max-width: 1100px) {
  .impact-section .impact-inner { grid-template-columns: 1fr !important; }
  .impact-section .impact-inner > div:first-child { max-width: 620px; }
  .impact-section .impact-cards { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .impact-section .impact-card { min-width: 0; }
}
@media (max-width: 700px) {
  .impact-section .impact-cards { grid-template-columns: 1fr; }
}

/* Consultation: give the qualification copy a full-height, readable home. */
.consult-section { background: #f1f6f8 !important; }
.consult-inner { align-items: stretch !important; }
.consult-inner > div:first-child {
  display: flex; flex-direction: column; justify-content: center;
  padding: 48px !important; border: 1px solid var(--piq-line);
  border-radius: 20px; background: linear-gradient(145deg, #e7f3f6, #f8fbfc);
}
.consult-inner > div:first-child .sec-h2 { color: var(--piq-ink) !important; }
.recv-list { gap: 24px; }
.recv-item { padding: 14px 0; border-top: 1px solid rgba(8,127,152,.16); }
.recv-title { font-size: 15px; color: var(--piq-ink); }
.recv-desc { color: #53657d; }
.recv-icon { background: #fff; border-color: #b8dce4; color: var(--piq-green); }

/* How we work: four clear cards instead of loose text on a blank canvas. */
#how-it-works {
  background: #f7f9fb !important; border-top: 1px solid var(--piq-line);
  border-bottom: 1px solid var(--piq-line); padding: 112px 0 104px !important;
}
#how-it-works > div:first-child { max-width: 820px !important; margin-bottom: 52px !important; }
#how-it-works > div:first-child h2 { color: var(--piq-ink) !important; }
#how-it-works .m-stack { position: relative; gap: 18px !important; }
#how-it-works .m-stack > div {
  position: relative; min-height: 214px; padding: 30px 26px !important;
  background: #fff; border: 1px solid var(--piq-line); border-radius: 18px;
  box-shadow: 0 12px 30px rgba(19,49,72,.06);
}
#how-it-works .m-stack > div > div:first-child {
  width: 48px; height: 48px; display: grid; place-items: center;
  margin-bottom: 28px !important; border-radius: 50%;
  background: var(--piq-green) !important; color: #fff !important;
  -webkit-text-stroke: 0 !important; font-size: 16px !important; font-weight: 800 !important;
}
#how-it-works .m-stack h3 { color: var(--piq-ink) !important; font-size: 18px !important; }
#how-it-works .m-stack p { color: var(--piq-muted) !important; font-size: 14px !important; line-height: 1.7 !important; }
#how-it-works .btn-primary { margin-top: 8px; }
@media (min-width: 901px) {
  #how-it-works .m-stack:before {
    content: ''; position: absolute; left: 11%; right: 11%; top: 54px;
    height: 1px; background: #a8d8e0; z-index: 0;
  }
  #how-it-works .m-stack > div { z-index: 1; }
}
@media (max-width: 700px) {
  .consult-inner > div:first-child { padding: 32px 24px !important; }
  #how-it-works .m-stack > div { min-height: 0; }
}

/* Keep the experience calm and accessible: no looping decorative motion. */
*, *::before, *::after { animation: none !important; }
.fade-up { opacity: 1 !important; transform: none !important; transition: none !important; }

@media (max-width: 900px) {
  .nav-inner { height: 72px; padding: 0 22px; }
  .hero { padding: 118px 0 64px !important; }
  .hero-inner { padding: 0 22px; gap: 48px; }
  .hero-h1 { font-size: clamp(42px, 12vw, 64px) !important; }
  .hero-sub { font-size: 17px; }
}


/* Freepik free-photo assets: hosted by the source CDN; attribution/licence notes are kept in the repository. */
.hero-art { background-image: linear-gradient(90deg, rgba(8,27,44,.88), rgba(8,127,152,.18)), url('https://img.magnific.com/free-photo/smiling-business-team-using-laptop_74855-2205.jpg') !important; background-size:cover !important; background-position:center 48% !important; }
.hero-art > img { opacity:0 !important; }
.impact-card:nth-child(1) .ic-img { background-image:linear-gradient(0deg,rgba(5,23,36,.76),rgba(5,23,36,.10)), url('https://img.magnific.com/free-photo/diverse-business-colleagues-working-together-meeting-vertical-top-view_1163-4889.jpg') !important; background-size:cover !important; background-position:center 45% !important; }
.news-card:nth-child(3) .nc-img { background-image:linear-gradient(0deg,rgba(5,23,36,.62),rgba(5,23,36,.08)), url('https://img.magnific.com/free-photo/smiling-business-team-using-laptop_74855-2205.jpg') !important; background-size:cover !important; background-position:center 45% !important; }