/* ============================================================
   APERGU DESIGN SYSTEM v1  (2026-09-22)
   One type scale, one palette, one button set, one section rhythm.
   Applied through role classes (ap-*) that the normalizer added to
   the Elementor data; selectors carry extra classes to outrank
   Elementor's inline per-element CSS. Remove this file (and the
   enqueue in functions.php) to fall back to the baseline look.
   ============================================================ */
:root {
  --ap-primary: #005461;
  --ap-primary-dark: #003D49;
  --ap-accent: #00A3BF;
  --ap-accent-light: #B1F4F4;
  --ap-navy: #061E29;
  --ap-surface: #FFFFFF;
  --ap-surface-2: #F9FAFB;
  --ap-border: #E5E7EB;
  --ap-text: #111827;
  --ap-text-2: #374151;
  --ap-text-3: #4B5563;
  --ap-muted: #6B7280;
  --ap-on-dark: #FFFFFF;
  --ap-on-dark-2: rgba(255,255,255,0.78);
  --ap-on-dark-3: rgba(255,255,255,0.62);
  --ap-font-head: 'Inter', 'DM Sans', sans-serif;
  --ap-font-body: 'Lato', sans-serif;
  --ap-font-ui: 'DM Sans', sans-serif;
  --ap-radius: 8px;
  --ap-radius-lg: 16px;
  --ap-section-y: clamp(48px, 5.5vw, 72px);
}

/* ---------- Type scale ---------- */
/* Animated (rotating) hero headlines keep their original Elementor sizing on
   tablet/desktop; only the phone size below is normalised. */
html body .elementor .elementor-element.elementor-widget.ap-h-display .elementor-heading-title {
  font-family: var(--ap-font-head);
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
html body .elementor .elementor-element.elementor-widget.ap-h2 .elementor-heading-title {
  font-family: var(--ap-font-head);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
html body .elementor .elementor-element.elementor-widget.ap-h3 .elementor-heading-title {
  font-family: var(--ap-font-head);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}
html body .elementor .elementor-element.elementor-widget.ap-h4 .elementor-heading-title {
  font-family: var(--ap-font-head);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}
html body .elementor .elementor-element.elementor-widget.ap-label .elementor-heading-title {
  font-family: var(--ap-font-ui);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
html body .elementor .elementor-element.elementor-widget.elementor-widget-heading.ap-lead .elementor-heading-title {
  font-family: var(--ap-font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}
html body .elementor .elementor-element.elementor-widget.elementor-widget-heading.ap-body .elementor-heading-title {
  font-size: 16px;
  line-height: 1.7;
}
html body .elementor .elementor-element.elementor-widget.elementor-widget-heading.ap-small .elementor-heading-title {
  font-size: 14px;
  line-height: 1.6;
}
html body .elementor .elementor-element.elementor-widget.elementor-widget-text-editor.ap-body,
html body .elementor .elementor-element.elementor-widget.elementor-widget-text-editor.ap-body p,
html body .elementor .elementor-element.elementor-widget.elementor-widget-text-editor.ap-body li {
  font-family: var(--ap-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}
html body .elementor .elementor-element.elementor-widget.elementor-widget-text-editor.ap-lead,
html body .elementor .elementor-element.elementor-widget.elementor-widget-text-editor.ap-lead p {
  font-family: var(--ap-font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
}
html body .elementor .elementor-element.elementor-widget.elementor-widget-text-editor.ap-small,
html body .elementor .elementor-element.elementor-widget.elementor-widget-text-editor.ap-small p,
html body .elementor .elementor-element.elementor-widget.elementor-widget-text-editor.ap-small li {
  font-family: var(--ap-font-body);
  font-size: 14px;
  line-height: 1.6;
}
/* Justified body copy on the insight/article template reads badly on phones */
html body .elementor .elementor-element.elementor-widget.elementor-widget-text-editor.ap-body[class*="elementor-element-"] p { text-align: inherit; }
html body .elementor-1882 .elementor-element.elementor-widget.elementor-widget-theme-post-content,
html body .elementor-1882 .elementor-element.elementor-widget.elementor-widget-text-editor { text-align: left; }

/* Rotating hero phrases cannot wrap (Elementor emits nbsp); keep them small enough for phones */
@media (max-width: 767px) {
  html body .elementor .elementor-element.elementor-widget.elementor-widget-animated-headline.ap-h-display .elementor-headline {
    font-size: clamp(22px, 6.5vw, 30px);
    line-height: 1.25;
  }
}

/* ---------- Colour roles (only widgets the normalizer marked ap-c) ---------- */
html body .elementor .elementor-element.elementor-widget.ap-c.ap-h2 .elementor-heading-title { color: var(--ap-primary); }
html body .elementor .elementor-element.elementor-widget.ap-c.ap-h3 .elementor-heading-title,
html body .elementor .elementor-element.elementor-widget.ap-c.ap-h4 .elementor-heading-title { color: var(--ap-text); }
html body .elementor .elementor-element.elementor-widget.ap-c.ap-label .elementor-heading-title { color: var(--ap-accent); }
html body .elementor .elementor-element.elementor-widget.elementor-widget-heading.ap-c.ap-body .elementor-heading-title,
html body .elementor .elementor-element.elementor-widget.elementor-widget-heading.ap-c.ap-lead .elementor-heading-title,
html body .elementor .elementor-element.elementor-widget.elementor-widget-heading.ap-c.ap-small .elementor-heading-title { color: var(--ap-text-3); }
html body .elementor .elementor-element.elementor-widget.elementor-widget-text-editor.ap-c { color: var(--ap-text-3); }
/* on dark sections */
html body .elementor .ap-dark .elementor-element.elementor-widget.ap-c.ap-h2 .elementor-heading-title { color: var(--ap-accent-light); }
html body .elementor .ap-dark .elementor-element.elementor-widget.ap-c.ap-h3 .elementor-heading-title,
html body .elementor .ap-dark .elementor-element.elementor-widget.ap-c.ap-h4 .elementor-heading-title { color: var(--ap-on-dark); }
html body .elementor .ap-dark .elementor-element.elementor-widget.ap-c.ap-label .elementor-heading-title { color: var(--ap-accent-light); }
html body .elementor .ap-dark .elementor-element.elementor-widget.elementor-widget-heading.ap-c.ap-body .elementor-heading-title,
html body .elementor .ap-dark .elementor-element.elementor-widget.elementor-widget-heading.ap-c.ap-lead .elementor-heading-title,
html body .elementor .ap-dark .elementor-element.elementor-widget.elementor-widget-heading.ap-c.ap-small .elementor-heading-title,
html body .elementor .ap-dark .elementor-element.elementor-widget.elementor-widget-text-editor.ap-c { color: var(--ap-on-dark-2); }

/* dark background carried by a column (legacy sections) */
html body .elementor .elementor-column.ap-dark .elementor-element.elementor-widget.ap-c.ap-h2 .elementor-heading-title { color: var(--ap-accent-light); }
html body .elementor .elementor-column.ap-dark .elementor-element.elementor-widget.ap-c.ap-h3 .elementor-heading-title,
html body .elementor .elementor-column.ap-dark .elementor-element.elementor-widget.ap-c.ap-h4 .elementor-heading-title { color: var(--ap-on-dark); }
html body .elementor .elementor-column.ap-dark .elementor-element.elementor-widget.ap-c.ap-label .elementor-heading-title { color: var(--ap-accent-light); }
html body .elementor .elementor-column.ap-dark .elementor-element.elementor-widget.elementor-widget-heading.ap-c.ap-body .elementor-heading-title,
html body .elementor .elementor-column.ap-dark .elementor-element.elementor-widget.elementor-widget-heading.ap-c.ap-lead .elementor-heading-title,
html body .elementor .elementor-column.ap-dark .elementor-element.elementor-widget.elementor-widget-heading.ap-c.ap-small .elementor-heading-title,
html body .elementor .elementor-column.ap-dark .elementor-element.elementor-widget.elementor-widget-text-editor.ap-c { color: var(--ap-on-dark-2); }

/* ---------- Buttons ---------- */
html body .elementor .elementor-element.elementor-widget.elementor-widget-button[class*="ap-btn-"] .elementor-button,
html body .elementor .elementor-element.elementor-widget.ap-cta .elementor-cta__button.elementor-button {
  font-family: var(--ap-font-ui);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  padding: 14px 28px;
  border-radius: var(--ap-radius);
  border: 1.5px solid transparent;
  box-shadow: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
html body .elementor .elementor-element.elementor-widget.elementor-widget-button.ap-btn-primary .elementor-button {
  background-color: var(--ap-primary); color: #fff; border-color: var(--ap-primary);
}
html body .elementor .elementor-element.elementor-widget.elementor-widget-button.ap-btn-primary .elementor-button:hover,
html body .elementor .elementor-element.elementor-widget.elementor-widget-button.ap-btn-primary .elementor-button:focus {
  background-color: var(--ap-primary-dark); color: #fff; border-color: var(--ap-primary-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,84,97,.25);
}
html body .elementor .elementor-element.elementor-widget.elementor-widget-button.ap-btn-ondark .elementor-button,
html body .elementor .elementor-element.elementor-widget.ap-cta .elementor-cta__button.elementor-button {
  background-color: #fff; color: var(--ap-primary); border-color: #fff;
}
html body .elementor .elementor-element.elementor-widget.elementor-widget-button.ap-btn-ondark .elementor-button:hover,
html body .elementor .elementor-element.elementor-widget.elementor-widget-button.ap-btn-ondark .elementor-button:focus,
html body .elementor .elementor-element.elementor-widget.ap-cta .elementor-cta__button.elementor-button:hover {
  background-color: var(--ap-accent-light); color: var(--ap-primary-dark); border-color: var(--ap-accent-light); transform: translateY(-1px);
}
html body .elementor .elementor-element.elementor-widget.elementor-widget-button.ap-btn-outline .elementor-button {
  background-color: transparent; color: var(--ap-primary); border-color: var(--ap-primary);
}
html body .elementor .elementor-element.elementor-widget.elementor-widget-button.ap-btn-outline .elementor-button:hover {
  background-color: var(--ap-primary); color: #fff;
}
html body .elementor .ap-dark .elementor-element.elementor-widget.elementor-widget-button.ap-btn-outline .elementor-button {
  color: #fff; border-color: rgba(255,255,255,.7); background-color: rgba(255,255,255,.08);
}
html body .elementor .ap-dark .elementor-element.elementor-widget.elementor-widget-button.ap-btn-outline .elementor-button:hover {
  background-color: #fff; color: var(--ap-primary); border-color: #fff;
}
html body .elementor .elementor-element.elementor-widget.elementor-widget-button.ap-btn-whatsapp .elementor-button { background-color: #25D366; color: #fff; border-color: #25D366; }
html body .elementor .elementor-element.elementor-widget.elementor-widget-button.ap-btn-whatsapp .elementor-button:hover { background-color: #1DB954; }
/* header CTA stays compact */
html body .elementor-location-header .elementor-element.elementor-widget.elementor-widget-button .elementor-button { padding: 11px 22px; font-size: 14px; }

/* ---------- CTA banner widget (all industry/service pages) ---------- */
html body .elementor .elementor-element.elementor-widget.ap-cta .elementor-cta__bg-overlay { background-color: rgba(6,30,41,.72); }
html body .elementor .elementor-element.elementor-widget.ap-cta .elementor-cta__title {
  font-family: var(--ap-font-head); font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; text-shadow: none; color: #fff;
}
html body .elementor .elementor-element.elementor-widget.ap-cta .elementor-cta__description {
  font-family: var(--ap-font-body); font-size: 17px; line-height: 1.7; color: var(--ap-on-dark-2); max-width: 720px; margin-left: auto; margin-right: auto;
}
html body .elementor .elementor-element.elementor-widget.ap-cta .elementor-cta__content { padding: clamp(56px, 7vw, 96px) 24px; }
html body .elementor .elementor-element.elementor-widget.ap-cta .elementor-cta { border-radius: var(--ap-radius-lg); overflow: hidden; }

/* ---------- Section rhythm ---------- */
html body .elementor .elementor-element.elementor-section.ap-section { padding-top: var(--ap-section-y); padding-bottom: var(--ap-section-y); }
html body .elementor .elementor-element.e-con.ap-section { --padding-top: var(--ap-section-y); --padding-bottom: var(--ap-section-y); }
html body .elementor .elementor-column.elementor-element.ap-col-rhythm > .elementor-widget-wrap.elementor-element-populated { padding-top: var(--ap-section-y); padding-bottom: var(--ap-section-y); }

/* ---------- Home: hand-written HTML widgets follow the same tokens ---------- */
html body .elementor #ap-services-grid .ap-card h3,
html body .elementor .feature-card .feature-title,
html body .elementor .ap-problem-card h3 { font-family: var(--ap-font-head) !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--ap-text); }
html body .elementor .feature-card .feature-title { color: #fff; }
html body .elementor #ap-services-grid .ap-card p,
html body .elementor .ap-problem-card p,
html body .elementor .feature-card .feature-desc { font-family: var(--ap-font-body) !important; }
html body .elementor #ap-services-grid .ap-card,
html body .elementor .ap-problem-card { border: 1px solid var(--ap-border); border-radius: var(--ap-radius-lg); box-shadow: none; }
html body .elementor #ap-services-grid .ap-card:hover,
html body .elementor .ap-problem-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.10); border-color: transparent; }
html body .elementor .feature-card { border-radius: var(--ap-radius-lg); }
html body .elementor .glass-dashboard { font-family: var(--ap-font-body); }

/* ---------- Cards built as Elementor containers (industry / service pages) ---------- */
html body .elementor .elementor-element.e-con.pkg-card { border: 1px solid var(--ap-border); border-radius: var(--ap-radius-lg); }
html body .elementor .grid-divider > .e-con { border-color: var(--ap-border); background-color: #fff; }
html body .elementor .elementor-element.e-con.grid-divider { background-color: transparent; border: 0; }

/* ---------- Header / footer polish ---------- */
html body .elementor-location-header .elementor-nav-menu--main .elementor-item { font-family: var(--ap-font-ui); font-size: 15px; font-weight: 500; }
html body .elementor-location-footer .elementor-icon-list-item, html body .elementor-location-footer .elementor-icon-list-text { font-family: var(--ap-font-body); font-size: 15px; }