.elementor-kit-6{--e-global-color-primary:#2F2483;--e-global-color-secondary:#009EE3;--e-global-color-text:#4E5968;--e-global-color-accent:#1A1A18;--e-global-color-a671d77:#009EE3;--e-global-color-8f1bdb8:#1A1A18;--e-global-color-c7a6b0b:#FFFFFF;--e-global-color-69f42f0:#000000;--e-global-color-5953b96:#F8F8F6;--e-global-color-7b5313d:#EEF2F5;--e-global-color-f0bf782:#3FA45B;--e-global-color-050134e:#F4A62A;--e-global-color-27e480c:#D84A4A;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:500;--e-global-typography-14182ea-font-family:"Montserrat";--e-global-typography-14182ea-font-size:var(--fs-hero);--e-global-typography-14182ea-font-weight:800;--e-global-typography-14182ea-line-height:1.1;--e-global-typography-bc85c70-font-family:"Montserrat";--e-global-typography-bc85c70-font-size:var(--fs-banner);--e-global-typography-bc85c70-font-weight:700;--e-global-typography-bc85c70-line-height:1.15;--e-global-typography-d9006cd-font-family:"Montserrat";--e-global-typography-d9006cd-font-size:var(--fs-section);--e-global-typography-d9006cd-font-weight:700;--e-global-typography-d9006cd-line-height:1.2;--e-global-typography-c6ee569-font-family:"Montserrat";--e-global-typography-c6ee569-font-size:var(--fs-card);--e-global-typography-c6ee569-font-weight:600;--e-global-typography-c6ee569-line-height:1.3;--e-global-typography-62016f0-font-family:"Inter";--e-global-typography-62016f0-font-size:var(--fs-body);--e-global-typography-62016f0-font-weight:400;--e-global-typography-62016f0-line-height:1.6;--e-global-typography-078da57-font-family:"Inter";--e-global-typography-078da57-font-size:var(--fs-small);--e-global-typography-078da57-line-height:1.5;--e-global-typography-1251ca3-font-family:"Inter";--e-global-typography-1251ca3-font-size:var(--fs-caption);--e-global-typography-1251ca3-font-weight:400;--e-global-typography-1251ca3-text-transform:uppercase;--e-global-typography-1251ca3-line-height:1.4;--e-global-typography-da2881e-font-family:"Inter";--e-global-typography-da2881e-font-size:var(--kc-fs-lead);--e-global-typography-da2881e-line-height:1.6;color:#4E5968;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:var( --e-global-color-secondary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --Whilte:#FFFFFF; --Black:#000000; --Success:#1E7F4F; --Warning:#A86A00; --Error:#C62828; --WhatsApp:#25D366; --Primary:#2F2483; --Secondary:#009EE3; --Accent:#C59A2E; --Accessible_Blue:#0072A3; --Accessible_Gold:#8E6F21; --Purple_Tint:#EEEDF5; --Blue_Tint:#EBF7FD; --Ink:#1C1A33; --Slate:#4A4A5E; --Concrete_Grey:#8C8F99; --Light_Concrete:#E3E4E8; --Off_White:#F5F5F7; --e-gv-b436702:Poppins; --Headings:Montserrat; --Body_and_UI:Inter; }
/* Start custom CSS */:root {
  /* ---- Font sizes (360px → 1440px fluid) ---- */
  --fs-hero:     clamp(2.375rem, 1.8333rem + 2.4074vw, 3.4rem);     /* 38 → 64px */
  --fs-banner:   clamp(2rem,     1.6667rem + 1.4815vw, 2.4rem);     /* 32 → 48px */
  --fs-section:  clamp(1.75rem,  1.5rem    + 1.1111vw, 2.5rem);   /* 28 → 40px */
  --fs-card:     clamp(1.25rem,  1.1667rem + 0.3704vw, 1.5rem);   /* 20 → 24px */
  --fs-body:     1rem;                                            /* 16px */
  --fs-small:    0.875rem;                                        /* 14px */
  --fs-caption:  0.875rem;                                        /* 14px */

  /* ---- Line heights (unitless) ---- */
  --lh-hero:     1.1;
  --lh-banner:   1.15;
  --lh-section:  1.2;
  --lh-card:     1.3;
  --lh-body:     1.6;
  --lh-small:    1.5;
  --lh-caption:  1.4;

  /* ---- Font weights ---- */
  --fw-hero:     800;
  --fw-banner:   700;
  --fw-section:  700;
  --fw-card:     600;
  --fw-body:     400;
  --fw-small:    400;
  --fw-caption:  500;
}

/* Kondody Concrete design tokens. Paste into Site Settings → Custom CSS. */
:root {
  /* Brand colours */
  --kc-purple: #2F2483;
  --kc-purple-700: #221A5E;
  --kc-purple-100: #DEDCEB;
  --kc-purple-50: #EEEDF5;
  --kc-blue: #009EE3;
  --kc-blue-text: #0072A3;   /* accessible blue for text, links, blue buttons */
  --kc-blue-800: #005C84;
  --kc-blue-200: #A8DEF5;
  --kc-blue-50: #EBF7FD;
  --kc-gold: #C59A2E;        /* accent only, never body text on white */
  --kc-ink: #1C1A33;
  --kc-slate: #4A4A5E;
  --kc-grey: #8C8F99;
  --kc-line: #E3E4E8;
  --kc-surface: #F5F5F7;
  --kc-white: #FFFFFF;
  --kc-success: #1E7F4F;
  --kc-warning: #A86A00;
  --kc-error: #C62828;
  --kc-whatsapp: #25D366;

  /* Fonts */
  --kc-font-heading: "Montserrat", "Segoe UI", Arial, sans-serif; /* demo-approved heading font */
  --kc-font-body: "Inter", "Segoe UI", Arial, sans-serif;

  /* Fluid type scale: 360px -> 1440px viewport */
  --kc-fs-hero:    clamp(2.375rem, 1.8333rem + 2.4074vw, 4rem);
  --kc-fs-banner:  clamp(2rem, 1.6667rem + 1.4815vw, 3rem);
  --kc-fs-section: clamp(1.75rem, 1.5rem + 1.1111vw, 2.5rem);
  --kc-fs-card:    clamp(1.25rem, 1.1667rem + 0.3704vw, 1.5rem);
  --kc-fs-lead:    clamp(1.0625rem, 1.0208rem + 0.1852vw, 1.1875rem);
  --kc-fs-stat:    clamp(2.25rem, 1.875rem + 1.6667vw, 3.375rem);
  --kc-fs-body:    1rem;
  --kc-fs-small:   0.875rem;
  --kc-fs-caption: 0.875rem;
  --kc-fs-eyebrow: 0.8125rem;

  /* Shape, spacing, depth */
  --kc-radius-sm: 6px;
  --kc-radius-md: 10px;
  --kc-radius-lg: 16px;
  --kc-radius-pill: 999px;
  --kc-space-section: clamp(3rem, 2rem + 4.4444vw, 7.5rem);
  --kc-container: 1240px;
  --kc-shadow-card: 0 6px 24px rgba(47, 36, 131, 0.08);
  --kc-shadow-card-hover: 0 14px 36px rgba(47, 36, 131, 0.16);
  --kc-focus-ring: 0 0 0 3px rgba(0, 114, 163, 0.35);
  --kc-ease: 0.2s ease;
}

/* ---------- Typography ---------- */
/* Home hero headline. 38 → 64px. Apply to: Heading (H1) */
:is(.elementor, body) .kc-hero-title {
  font-family: var(--kc-font-heading);
  font-size: var(--kc-fs-hero);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--kc-purple);
  margin: 0;
  text-wrap: balance;
}
/* Inner-page banner title. 32 → 48px. Apply to: Heading (H1) */
:is(.elementor, body) .kc-page-banner {
  font-family: var(--kc-font-heading);
  font-size: var(--kc-fs-banner);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--kc-purple);
  margin: 0;
  text-wrap: balance;
}
/* Section titles. 28 → 40px. Apply to: Heading (H2) */
:is(.elementor, body) .kc-section-heading {
  font-family: var(--kc-font-heading);
  font-size: var(--kc-fs-section);
  font-weight: 700;
  line-height: 1.2;
  color: var(--kc-purple);
  margin: 0;
  text-wrap: balance;
}
/* Card, feature and step titles. 20 → 24px. Apply to: Heading (H3) */
:is(.elementor, body) .kc-card-heading {
  font-family: var(--kc-font-heading);
  font-size: var(--kc-fs-card);
  font-weight: 600;
  line-height: 1.3;
  color: var(--kc-ink);
  margin: 0;
}
/* Intro paragraph under a banner or section heading. 17 → 19px. Apply to: Paragraph */
:is(.elementor, body) .kc-lead {
  font-family: var(--kc-font-body);
  font-size: var(--kc-fs-lead);
  font-weight: 400;
  line-height: 1.6;
  color: var(--kc-slate);
  max-width: 62ch;
  margin: 0;
}
/* Standard body text. 16px. Apply to: Paragraph */
:is(.elementor, body) .kc-body {
  font-family: var(--kc-font-body);
  font-size: var(--kc-fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--kc-ink);
  max-width: 70ch;
  margin: 0;
}
/* Fine print, form hints, meta text. 14px. Apply to: Paragraph */
:is(.elementor, body) .kc-small {
  font-family: var(--kc-font-body);
  font-size: var(--kc-fs-small);
  font-weight: 400;
  line-height: 1.5;
  color: var(--kc-slate);
  margin: 0;
}
/* Image captions and labels under stats. 14px, medium weight. Apply to: Paragraph */
:is(.elementor, body) .kc-caption {
  font-family: var(--kc-font-body);
  font-size: var(--kc-fs-caption);
  font-weight: 500;
  line-height: 1.4;
  color: var(--kc-slate);
  margin: 0;
}
/* Small uppercase label above a heading. Apply to: Paragraph / Heading */
:is(.elementor, body) .kc-eyebrow {
  font-family: var(--kc-font-body);
  font-size: var(--kc-fs-eyebrow);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kc-blue-text);
  margin: 0;
}
/* Big numbers in counters (600+). 36 → 54px. Apply to: Heading */
:is(.elementor, body) .kc-stat-number {
  font-family: var(--kc-font-heading);
  font-size: var(--kc-fs-stat);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--kc-purple);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
/* Testimonial quote text. Apply to: Paragraph */
:is(.elementor, body) .kc-quote {
  font-family: var(--kc-font-body);
  font-size: var(--kc-fs-lead);
  font-weight: 400;
  font-style: italic;
  line-height: 1.6;
  color: var(--kc-ink);
  margin: 0;
}
/* Inline and standalone text links (accessible blue). Apply to: Link / Paragraph link */
:is(.elementor, body) .kc-link {
  color: var(--kc-blue-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--kc-ease);
}
:is(.elementor, body) .kc-link:hover {
  color: var(--kc-purple);
  text-decoration-thickness: 2px;
}
:is(.elementor, body) .kc-link:focus-visible {
  outline: none;
  box-shadow: var(--kc-focus-ring);
  border-radius: 2px;
}

/* ---------- Text colour utilities ---------- */
/* Engineering Purple text. Apply to: Any text element (stack after a type class) */
:is(.elementor, body) .kc-text-purple {
  color: var(--kc-purple);
}
/* Accessible blue text (use on white). Apply to: Any text element (stack after a type class) */
:is(.elementor, body) .kc-text-blue {
  color: var(--kc-blue-text);
}
/* Default dark text. Apply to: Any text element (stack after a type class) */
:is(.elementor, body) .kc-text-ink {
  color: var(--kc-ink);
}
/* Secondary text. Apply to: Any text element (stack after a type class) */
:is(.elementor, body) .kc-text-slate {
  color: var(--kc-slate);
}
/* White text on purple or dark images. Apply to: Any text element (stack after a type class) */
:is(.elementor, body) .kc-text-white {
  color: var(--kc-white);
}
/* Softened white for paragraphs on purple. Apply to: Any text element on purple bands */
:is(.elementor, body) .kc-text-on-dark {
  color: rgba(255, 255, 255, 0.86);
}

/* ---------- Buttons ---------- */
/* Base button shape. Always combine with one colour class below. Apply to: Button */
:is(.elementor, body) .kc-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--kc-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  padding: 0.875rem 1.5rem;
  min-height: 48px;
  border-radius: var(--kc-radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--kc-ease), color var(--kc-ease), border-color var(--kc-ease), transform var(--kc-ease);
}
:is(.elementor, body) .kc-btn:focus-visible {
  outline: none;
  box-shadow: var(--kc-focus-ring);
}
/* Main CTA: Get a Quote. Apply to: Button (+ kc-btn) */
:is(.elementor, body) .kc-btn-primary {
  background-color: var(--kc-purple);
  color: var(--kc-white);
  border-color: var(--kc-purple);
}
:is(.elementor, body) .kc-btn-primary:hover {
  background-color: var(--kc-purple-700);
  border-color: var(--kc-purple-700);
  color: var(--kc-white);
}
:is(.elementor, body) .kc-btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--kc-focus-ring);
}
/* Outline button next to a primary CTA. Apply to: Button (+ kc-btn) */
:is(.elementor, body) .kc-btn-secondary {
  background-color: var(--kc-white);
  color: var(--kc-purple);
  border-color: var(--kc-purple);
}
:is(.elementor, body) .kc-btn-secondary:hover {
  background-color: var(--kc-purple-50);
  color: var(--kc-purple);
}
:is(.elementor, body) .kc-btn-secondary:focus-visible {
  outline: none;
  box-shadow: var(--kc-focus-ring);
}
/* Alternative CTA (Call Us). Apply to: Button (+ kc-btn) */
:is(.elementor, body) .kc-btn-blue {
  background-color: var(--kc-blue-text);
  color: var(--kc-white);
  border-color: var(--kc-blue-text);
}
:is(.elementor, body) .kc-btn-blue:hover {
  background-color: var(--kc-blue-800);
  border-color: var(--kc-blue-800);
  color: var(--kc-white);
}
:is(.elementor, body) .kc-btn-blue:focus-visible {
  outline: none;
  box-shadow: var(--kc-focus-ring);
}
/* WhatsApp CTA. Ink label for contrast. Apply to: Button (+ kc-btn) */
:is(.elementor, body) .kc-btn-whatsapp {
  background-color: var(--kc-whatsapp);
  color: var(--kc-ink);
  border-color: var(--kc-whatsapp);
}
:is(.elementor, body) .kc-btn-whatsapp:hover {
  background-color: #1EBE5A;
  border-color: #1EBE5A;
  color: var(--kc-ink);
}
:is(.elementor, body) .kc-btn-whatsapp:focus-visible {
  outline: none;
  box-shadow: var(--kc-focus-ring);
}
/* Solid white button on purple bands or hero images. Apply to: Button (+ kc-btn) */
:is(.elementor, body) .kc-btn-white {
  background-color: var(--kc-white);
  color: var(--kc-purple);
  border-color: var(--kc-white);
}
:is(.elementor, body) .kc-btn-white:hover {
  background-color: var(--kc-purple-50);
  border-color: var(--kc-purple-50);
}
:is(.elementor, body) .kc-btn-white:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}
/* Outline button on purple bands or hero images. Apply to: Button (+ kc-btn) */
:is(.elementor, body) .kc-btn-outline-white {
  background-color: transparent;
  color: var(--kc-white);
  border-color: rgba(255, 255, 255, 0.8);
}
:is(.elementor, body) .kc-btn-outline-white:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--kc-white);
}
:is(.elementor, body) .kc-btn-outline-white:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}
/* Compact size for headers and cards. Apply to: Button (+ kc-btn) */
:is(.elementor, body) .kc-btn-sm {
  font-size: 0.875rem;
  padding: 0.625rem 1.125rem;
  min-height: 40px;
}
/* Large size for hero CTAs. Apply to: Button (+ kc-btn) */
:is(.elementor, body) .kc-btn-lg {
  font-size: 1.0625rem;
  padding: 1.0625rem 2rem;
  min-height: 56px;
}
/* Full-width button (forms, mobile). Apply to: Button (+ kc-btn) */
:is(.elementor, body) .kc-btn-block {
  display: flex;
  width: 100%;
}

/* ---------- Sections and layout ---------- */
/* Standard vertical section padding. 48 → 120px. Apply to: Div block / Flexbox (section wrapper) */
:is(.elementor, body) .kc-section {
  box-sizing: border-box;
  padding-block: var(--kc-space-section);
  padding-inline: 16px;
}
/* Off-white alternate section background. Apply to: Div block / Flexbox (+ kc-section) */
:is(.elementor, body) .kc-section-surface {
  background-color: var(--kc-surface);
}
/* Light purple tint background. Apply to: Div block / Flexbox (+ kc-section) */
:is(.elementor, body) .kc-section-tint {
  background-color: var(--kc-purple-50);
}
/* Dark brand band. Use white text classes inside. Apply to: Div block / Flexbox (+ kc-section) */
:is(.elementor, body) .kc-section-purple {
  background-color: var(--kc-purple);
  color: var(--kc-white);
}
/* Purple overlay over a hero/banner background image, no extra element needed. Apply to: Div block / Flexbox with background image */
:is(.elementor, body) .kc-overlay-purple {
  box-shadow: inset 0 0 0 100vmax rgba(47, 36, 131, 0.72);
  color: var(--kc-white);
}
/* Centred content width (1240px). Apply to: Div block / Flexbox (inner wrapper) */
:is(.elementor, body) .kc-container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--kc-container);
  margin-inline: auto;
}
/* Vertical stack with consistent gaps (heading + text + buttons). Apply to: Flexbox */
:is(.elementor, body) .kc-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Row of buttons that wraps on mobile. Apply to: Flexbox */
:is(.elementor, body) .kc-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
/* Responsive card grid: 3 → 2 → 1 columns automatically. Apply to: Div block / Flexbox */
:is(.elementor, body) .kc-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.5rem;
}
/* Responsive grid for stats/icons: 4 → 2 → 1 columns. Apply to: Div block / Flexbox */
:is(.elementor, body) .kc-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1.5rem;
}

/* ---------- Cards and components ---------- */
/* White card with soft purple shadow. Apply to: Div block / Flexbox */
:is(.elementor, body) .kc-card {
  box-sizing: border-box;
  background-color: var(--kc-white);
  border: 1px solid var(--kc-line);
  border-radius: var(--kc-radius-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  box-shadow: var(--kc-shadow-card);
  transition: transform var(--kc-ease), box-shadow var(--kc-ease);
}
/* Lift effect for clickable cards. Apply to: Div block (+ kc-card) */
:is(.elementor, body) .kc-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--kc-shadow-card-hover);
}
/* Tinted card variant, no shadow. Apply to: Div block (+ kc-card) */
:is(.elementor, body) .kc-card-tint {
  background-color: var(--kc-purple-50);
  border-color: var(--kc-purple-100);
  box-shadow: none;
}
/* Purple card for highlights. Apply to: Div block (+ kc-card) */
:is(.elementor, body) .kc-card-dark {
  background-color: var(--kc-purple);
  border-color: var(--kc-purple);
  color: var(--kc-white);
}
/* Round icon holder (56px) in purple tint. Apply to: Icon / SVG / Div block */
:is(.elementor, body) .kc-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--kc-purple-50);
  color: var(--kc-purple);
  flex-shrink: 0;
}
/* Small pill label (e.g. grade, category). Apply to: Paragraph / Div block */
:is(.elementor, body) .kc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--kc-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.4375rem 0.75rem;
  border-radius: var(--kc-radius-pill);
  background-color: var(--kc-blue-50);
  color: var(--kc-blue-text);
}
/* Premium badge for ISO / awards, on purple or dark. Apply to: Paragraph / Div block (+ kc-badge) */
:is(.elementor, body) .kc-badge-gold {
  background-color: transparent;
  color: var(--kc-gold);
  border: 1.5px solid var(--kc-gold);
}
/* Stat counter block with a short gold accent line. Apply to: Flexbox (wraps number + label) */
:is(.elementor, body) .kc-stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 3px solid var(--kc-gold);
  width: fit-content;
  min-width: 140px;
}
/* Numbered circle for process steps. Apply to: Heading / Div block */
:is(.elementor, body) .kc-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--kc-purple);
  color: var(--kc-white);
  font-family: var(--kc-font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1;
  flex-shrink: 0;
}
/* Testimonial card with blue accent edge. Apply to: Div block / Flexbox */
:is(.elementor, body) .kc-testimonial {
  box-sizing: border-box;
  background-color: var(--kc-white);
  border: 1px solid var(--kc-line);
  border-left: 4px solid var(--kc-blue);
  border-radius: var(--kc-radius-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  box-shadow: var(--kc-shadow-card);
}
/* Note / info box (disclaimers, tips). Apply to: Div block */
:is(.elementor, body) .kc-callout {
  box-sizing: border-box;
  background-color: var(--kc-blue-50);
  border-left: 4px solid var(--kc-blue);
  border-radius: 0 var(--kc-radius-md) var(--kc-radius-md) 0;
  padding: 1rem 1.25rem;
  color: var(--kc-ink);
}
/* Thin horizontal rule. Apply to: Divider / Div block */
:is(.elementor, body) .kc-divider {
  border: 0;
  border-top: 1px solid var(--kc-line);
  width: 100%;
  height: 0;
  margin-block: 1.5rem;
}
/* Short blue bar under a section heading. Apply to: Div block (empty, under a heading) */
:is(.elementor, body) .kc-accent-bar {
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--kc-blue);
}
/* Rounded image corners matching cards. Apply to: Image */
:is(.elementor, body) .kc-img-rounded {
  border-radius: var(--kc-radius-lg);
  overflow: hidden;
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- Forms and status ---------- */
/* Form field label. Apply to: Form label / Paragraph */
:is(.elementor, body) .kc-label {
  display: block;
  font-family: var(--kc-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--kc-ink);
  margin-bottom: 0.375rem;
}
/* Text field style with accessible focus ring. Apply to: Input / textarea / select */
:is(.elementor, body) .kc-input {
  box-sizing: border-box;
  width: 100%;
  font-family: var(--kc-font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--kc-ink);
  background-color: var(--kc-white);
  border: 1px solid #C9CBD3;
  border-radius: 8px;
  padding: 0.75rem 0.875rem;
  min-height: 48px;
  transition: border-color var(--kc-ease), box-shadow var(--kc-ease);
}
:is(.elementor, body) .kc-input:hover {
  border-color: var(--kc-grey);
}
:is(.elementor, body) .kc-input:focus-visible {
  outline: none;
  border-color: var(--kc-blue-text);
  box-shadow: var(--kc-focus-ring);
}
/* Error message text. Apply to: Paragraph */
:is(.elementor, body) .kc-text-error {
  color: var(--kc-error);
  font-size: 0.875rem;
  font-weight: 500;
}
/* Success message text. Apply to: Paragraph */
:is(.elementor, body) .kc-text-success {
  color: var(--kc-success);
  font-size: 0.875rem;
  font-weight: 500;
}
/* Success message box. Apply to: Div block */
:is(.elementor, body) .kc-alert-success {
  background-color: #E8F4EE;
  border: 1px solid #B7DCC8;
  color: var(--kc-success);
  border-radius: var(--kc-radius-md);
  padding: 0.875rem 1rem;
}
/* Error message box. Apply to: Div block */
:is(.elementor, body) .kc-alert-error {
  background-color: #FCECEC;
  border: 1px solid #F2C2C2;
  color: var(--kc-error);
  border-radius: var(--kc-radius-md);
  padding: 0.875rem 1rem;
}

/* ---------- Extras ---------- */
/* Paragraph links inside body text pick up the brand link style automatically */
:is(.elementor, body) :is(.kc-body, .kc-lead, .kc-small) a {
  color: var(--kc-blue-text);
  text-underline-offset: 3px;
}
/* Links inside dark sections */
:is(.elementor, body) :is(.kc-section-purple, .kc-card-dark, .kc-overlay-purple) a:not([class*="kc-btn"]) {
  color: var(--kc-white);
}
/* Headings inside dark sections switch to white */
:is(.elementor, body) :is(.kc-section-purple, .kc-card-dark, .kc-overlay-purple) :is(.kc-hero-title, .kc-page-banner, .kc-section-heading, .kc-card-heading, .kc-stat-number) {
  color: var(--kc-white);
}
:is(.elementor, body) :is(.kc-section-purple, .kc-card-dark, .kc-overlay-purple) :is(.kc-lead, .kc-body, .kc-small, .kc-caption) {
  color: rgba(255, 255, 255, 0.86);
}
:is(.elementor, body) :is(.kc-section-purple, .kc-card-dark, .kc-overlay-purple) .kc-eyebrow {
  color: var(--kc-blue-200);
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  :is(.elementor, body) :is(.kc-btn, .kc-card, .kc-link, .kc-input) { transition: none; }
  :is(.elementor, body) .kc-card-hover:hover { transform: none; }
}/* End custom CSS */