/* -----------------------------------------------------------
   0. FONTS — Inter (same woff2 subsets as the HTML source, so the
   site renders in the real Inter font rather than a system fallback).
----------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-705d6250.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-9f73b2f4.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-04fe624f.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-c68aff86.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-9c1cad86.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-cf3eb50f.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-f11d729b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -----------------------------------------------------------
   1. ROOT VARIABLES
----------------------------------------------------------- */
:root {
  /* Colors — brand palette */
  --color-navy-900: #001e33;
  --color-navy-800: #00304f;
  --color-navy-700: #004b81; /* blue: rgba(0,75,129,1) */
  --color-navy-600: #005e9e;
  --color-teal-600: #00918f;
  --color-teal-500: #00abab; /* teal: rgba(0,171,171,1) */
  --color-teal-400: #3ecbc9;
  --color-teal-100: #f2fbfb; /* rgba(242,251,251,1) */
  --color-orange-500: #e87752;
  --color-bg-page: #f5fafb;
  --color-bg-hero: #e9f4f6;
  --color-bg-soft: #eef6f8;
  --color-white: #ffffff;
  --color-text-900: #001e33; /* black: rgba(0,30,51,1) */
  --color-text-600: #4b5e6b;
  --color-text-400: #a3a3a3;
  --color-border: #e2eaee;
  --color-border-soft: #e9eef1;
  --color-text-gray: #626262;

  /* Typography */
  --font-heading: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  --fs-h1: clamp(1rem, 1.4rem + 2.6vw, 3.375rem);
  --fs-h2: clamp(1.75rem, 1.1rem + 2.6vw, 3.375rem); /* 54px desktop */
  --fs-h3: clamp(1.15rem, 1rem + 0.6vw, 1.375rem);
  --fs-body-lg: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-body: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  --fs-small: clamp(0.8125rem, 0.8rem + 0.1vw, 0.875rem);
  --fs-xs: clamp(0.75rem, 0.73rem + 0.08vw, 0.8125rem);
  --fs-medium: clamp(1rem, 1rem + 0vw, 1rem);

  /* Spacing */
  --space-3xs: clamp(0.25rem, 0.22rem + 0.1vw, 0.375rem);
  --space-2xs: clamp(0.5rem, 0.45rem + 0.2vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.68rem + 0.3vw, 1rem);
  --space-sm: clamp(1rem, 0.9rem + 0.4vw, 1.5rem);
  --space-md: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --space-lg: clamp(2rem, 1.6rem + 1.6vw, 4.063rem);
  --space-xl: clamp(3rem, 2.2rem + 3.2vw, 5rem);
  --space-2xl: clamp(4rem, 3rem + 4vw, 7.5rem);

  /* Layout */
  --container-max: 81.125rem;
  --container-pad: clamp(1.25rem, 1rem + 2vw, 2rem);
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 62.4375rem;
  --radius-btn: 0.625rem; /* 10px */

  /* Motion */
  --ease-out: cubic-bezier(0.25, 0.8, 0.35, 1);
  --dur-fast: 150ms;
  --dur-med: 280ms;
  --dur-slow: 450ms;

  --shadow-sm: 0 2px 8px rgba(10, 44, 75, 0.06);
  --shadow-md: 0 10px 30px rgba(10, 44, 75, 0.1);
  --shadow-lg: 0 20px 45px rgba(10, 44, 75, 0.16);

  /* Decorative grid pattern (pattern.png reference) — coords kept inside tile bounds to avoid edge clipping */
  --pattern-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='384'%3E%3Cline x1='95' y1='0' x2='95' y2='384' stroke='%237FA5C9' stroke-opacity='0.35'/%3E%3Cline x1='285' y1='0' x2='285' y2='384' stroke='%237FA5C9' stroke-opacity='0.35'/%3E%3Cline x1='0' y1='96' x2='380' y2='96' stroke='%237FA5C9' stroke-opacity='0.35'/%3E%3Cline x1='0' y1='288' x2='380' y2='288' stroke='%237FA5C9' stroke-opacity='0.35'/%3E%3Cg stroke='%235A85AD' stroke-opacity='0.65' stroke-width='1.4'%3E%3Cline x1='279' y1='96' x2='291' y2='96'/%3E%3Cline x1='285' y1='90' x2='285' y2='102'/%3E%3Cline x1='89' y1='288' x2='101' y2='288'/%3E%3Cline x1='95' y1='282' x2='95' y2='294'/%3E%3C/g%3E%3C/svg%3E");
  --pattern-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='384'%3E%3Cline x1='95' y1='0' x2='95' y2='384' stroke='%23FFFFFF' stroke-opacity='0.12'/%3E%3Cline x1='285' y1='0' x2='285' y2='384' stroke='%23FFFFFF' stroke-opacity='0.12'/%3E%3Cline x1='0' y1='96' x2='380' y2='96' stroke='%23FFFFFF' stroke-opacity='0.12'/%3E%3Cline x1='0' y1='288' x2='380' y2='288' stroke='%23FFFFFF' stroke-opacity='0.12'/%3E%3Cg stroke='%23FFFFFF' stroke-opacity='0.3' stroke-width='1.4'%3E%3Cline x1='279' y1='96' x2='291' y2='96'/%3E%3Cline x1='285' y1='90' x2='285' y2='102'/%3E%3Cline x1='89' y1='288' x2='101' y2='288'/%3E%3Cline x1='95' y1='282' x2='95' y2='294'/%3E%3C/g%3E%3C/svg%3E");
}

.pb-0 {
  padding-bottom: 0 !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.text-center {
  text-align: center;
}
/* -----------------------------------------------------------
   2. RESET
----------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 100%;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text-900);
  background: var(--color-bg-page);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Use clip, not hidden: `overflow-x: hidden` makes <body> a scroll container,
     which makes the position: sticky header jitter/glitch while scrolling on
     Windows. `clip` contains horizontal overflow without creating that scroll
     container, so the sticky header stays smooth. */
  overflow-x: clip;
}
img {
  max-width: 100%;
  display: block;
}
a {
  text-decoration: none;
  color: inherit;
}
button {
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}
ul {
  list-style: none;
}
input {
  font: inherit;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  color: var(--color-navy-700);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: clamp(2.5rem, 1.4rem + 2.6vw, 4rem);
}
h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
}
h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 2px solid var(--color-teal-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -----------------------------------------------------------
   3. LAYOUT HELPERS
----------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
}
.section {
  padding-block: var(--space-2xl);
}
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--color-teal-500);
  color: var(--color-teal-600);
  font-size: var(--fs-xs);
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  background: var(--color-white);
}

/* -----------------------------------------------------------
   4. BUTTONS
----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--fs-medium);
  padding: 0.813rem 1.5rem;
  border-radius: var(--radius-btn);
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn svg {
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover svg {
  transform: translateX(3px);
}
.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--color-navy-700);
  color: var(--color-white);
}
.btn-primary:hover {
  background: var(--color-text-900);
}

.btn-outline {
  background: transparent;
  color: var(--color-navy-900);
  border: 1px solid var(--color-navy-900);
}
.btn-outline:hover {
  background: rgba(0, 75, 129, 0.1);
  border-color: var(--color-navy-700);
}

.btn-teal {
  background: transparent;
  color: var(--color-white);
  border: 1.5px solid var(--color-teal-500);
}
.btn-teal svg {
  color: var(--color-teal-400);
}
.btn-teal:hover {
  background: var(--color-teal-500);
  border-color: var(--color-teal-500);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}
.btn-teal:hover svg {
  color: var(--color-white);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-teal-700);
  font-weight: 400;
  font-size: var(--fs-small);
  position: relative;
}
.link-arrow svg {
  transition: transform var(--dur-fast) var(--ease-out);
}
.link-arrow:hover svg {
  transform: translateX(4px);
}
.link-arrow svg {
  transition: transform var(--dur-fast) var(--ease-out);
  color: teal;
  font-weight: 400;
}
/* -----------------------------------------------------------
   5. HEADER / NAV
----------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  /* Transition only appearance — never layout — so the scrolled state can't
     cause a jump/glitch while scrolling on Windows. */
  transition: background 0.3s ease, box-shadow 0.3s ease;
  /* Promote the sticky header to its own GPU layer so it tracks the scroll
     smoothly instead of jittering on Windows Chrome/Edge. */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-sm);
  gap: var(--space-md);
}
/* main.js adds .header-fixed on scroll — only the background + shadow change
   (never position/layout), so the sticky header stays smooth. */
.site-header.header-fixed {
  background: linear-gradient(90deg, #ffffff 0%, #e2f2f8 100%);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  color: var(--color-navy-700);
  letter-spacing: -0.02em;
  width: 200px;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 1rem + 1vw, 2.25rem);
}
.nav-item {
  position: relative;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--color-text-900);
  padding: 0.5rem 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-item.has-dropdown > .nav-link svg {
  transition: transform var(--dur-med) var(--ease-out);
}
.nav-link:hover,
.nav-item.open > .nav-link {
  color: var(--color-teal-600);
}
.nav-item.open > .nav-link svg {
  transform: rotate(180deg);
}
/* Active state: current page (or its dropdown parent) — matches the hover/open teal. */
.nav-link.active {
  color: var(--color-teal-600);
}
.mega-drop-link.active {
  background: var(--color-teal-100);
}
.mega-drop-link.active .title {
  color: var(--color-teal-600);
}

.mega-drop {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  transform: translate(-50%, 8px);
  width: min(90vw, 34rem);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out),
    visibility var(--dur-med);
  z-index: 50;
}
.nav-item.open .mega-drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.mega-drop-link {
  display: block;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.mega-drop-link:hover {
  background: var(--color-teal-100);
  /*transform: translateY(-2px);*/
}
.mega-drop-link .title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--color-navy-700);
  font-size: var(--fs-body);
  margin-bottom: 0.25rem;
}
.mega-drop-link .badge-new {
  color: var(--color-orange-500);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.mega-drop-link p {
  font-size: var(--fs-xs);
  color: var(--color-text-400);
  display: block;
  margin: 7px 0 0;
  font-size: 14px;
  line-height: 1.5;
  max-width: 220px
}

/* "About Us" simple dropdown — single column, left-aligned to the label and sized
   to content, matching the HTML source. Auto-detected: a dropdown with no
   description paragraphs (About Us / Careers) is the simple one, so this works
   regardless of any menu-item CSS class. The .mega-drop-simple class the walker adds
   is also honoured. */
.mega-drop.mega-drop-simple,
.mega-drop:not(:has(p)) {
  left: 0;
  transform: translateY(8px);
  width: auto;
  min-width: 12rem;
  grid-template-columns: 1fr;
  gap: 2px;
  border-radius: 14px;
  padding: 14px;
}
.nav-item.open .mega-drop.mega-drop-simple,
.nav-item.open .mega-drop:not(:has(p)) {
  transform: translateY(0);
}
.mega-drop.mega-drop-simple .mega-drop-link,
.mega-drop:not(:has(p)) .mega-drop-link {
  padding: 12px 14px;
  border-radius: 10px;
  white-space: nowrap;
}
.mega-drop.mega-drop-simple .mega-drop-link:hover,
.mega-drop:not(:has(p)) .mega-drop-link:hover {
  background: #e2f2f8;
  transform: none;
}
.mega-drop.mega-drop-simple .title,
.mega-drop:not(:has(p)) .title {
  margin-bottom: 0;
  font-weight: 500;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hamburger {
  display: none;
}

/* Client-login "Profile" dropdown (shown when logged in) --------------------- */
.nav-dropdown {
  position: relative;
}
.nav-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--color-navy-900);
  border-radius: var(--radius-md, 8px);
  background: transparent;
  color: var(--color-navy-900);
  font: inherit;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-dropdown__toggle:hover {
  background: rgba(0, 75, 129, 0.1);
  border-color: var(--color-navy-700);
}
.nav-dropdown__toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
.nav-dropdown.open .nav-dropdown__toggle svg,
.nav-dropdown__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  padding: 0.4rem;
  background: var(--color-white);
  border: 1px solid var(--color-border, rgb(214, 226, 234));
  border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-md, 0 12px 30px rgba(0, 30, 51, 0.14));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 1001;
}
.nav-dropdown.open .nav-dropdown__menu,
.nav-dropdown__toggle[aria-expanded="true"] + .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown__menu a {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  color: var(--color-navy-900);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease;
}
.nav-dropdown__menu a:hover {
  background: rgba(0, 75, 129, 0.08);
  color: var(--color-navy-700);
}

/* -----------------------------------------------------------
   6. HERO
----------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: transparent; /* single backdrop comes from body */
}

.hero > * {
  position: relative;
}
.hero h1 {
  letter-spacing: -3%;
}
.hero-grid {
  padding-block: var(--space-lg);
  align-items: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hero-copy {
  width: 40%;
}
.hero-media {
  position: relative;
  margin-bottom: -80px;
  width: calc(100% - 52%);
}
.hero-media img.media-img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);width: 500px;
}

.hero-copy h1 {
  margin-bottom: var(--space-sm);
  font-weight: 600;
  line-height: 58px;
}
.hero-copy p {
  color: var(--color-text-900);
  font-size: var(--fs-body-lg);
  max-width: 34rem;
  margin-bottom: var(--space-md);
}
.hero-form {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.hero-form input {
  flex: 1;
  min-width: 12rem;
  padding: 0.688rem 1.25rem;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.insights-hero h1 {
  font-weight: 600;
}
.hero-form input:focus {
  border-color: var(--color-teal-500);
  box-shadow: 0 0 0 4px var(--color-teal-100);
  outline: none;
}

.float-card {
  position: absolute;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 0.75rem 0.75rem;
  font-size: 10px;
  line-height: 15px;
  animation: floaty 5s ease-in-out infinite;
}
.float-card.card-top {
    top: 4%;
    left: -5%;
    animation-delay: 0s;
    width: 204px;
    gap: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;font-size: 13px;
}
.float-card.card-top strong {
    display: flex;
    margin-left: auto;
}
.float-card.card-banking {
  top: 7%;
  right: -2%;
  animation-delay: 0.4s;
}
.float-card.card-insurance {
     top: 34%;
    right: 1%;
  animation-delay: 0.9s;
}
.float-card.card-consumer {
  top: 62%;
  right: -2%;
  animation-delay: 1.3s;
}
.float-card.card-percent {
    bottom: 21%;
    left: -5%;
  display: flex;
  align-items: center;
  gap: 0rem;
  animation-delay: 0.6s;
  flex-direction: column;
  width: auto;
  padding-bottom: 24px;
}
.float-card.card-audience {
 bottom: 6%;
    left: 7%;
  display: flex;
  align-items: center;
  gap: 10px;
  animation-delay: 1s;
  width: fit-content;
}
.float-card.card-audience strong {
  background: #fff;
  color: #001e33;
  padding: 5px 9px;
  border-radius: 5px;
  text-align: center;
      font-size: 13px;
    font-weight: 600;
    color: rgb(0, 30, 51);
    background: rgb(223, 238, 250);
    border-radius: 6px;
    padding: 5px 10px;
    white-space: nowrap;
}
.float-card {
  width: 255px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border: 1px solid rgba(255, 255, 255, 0.7);

  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.float-card .cnt {
  width: calc(100% - 15px);
  display: flex;
  align-items: flex-start;
  position: relative;
  flex-direction: column;
  margin-top: -4px;
}
.float-card h4 {
  margin: 0 0 5px;
  font-size: 14px;
  font-weight: 600;
  color: #003d66;
}
.float-card .arrow {
  position: absolute;
  top: 0;
  right: 0;
  color: #8ca3b3;
  font-size: 18px;
}
.float-card .card-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-bottom: 0;
}

.float-card p {
  margin: 0;
  font-size: 11px;
  line-height: 15px;
  color: #001e33;
}

.float-card .blue {
  background: #004b81;
}

.float-card .orange {
  background: #f97316;
}

.float-card .green {
  background: #14b8a6;
}

.float-card .tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 5px;
}

.float-card .tags span,
.float-card .tags a {
  background: transparent;
  color: #004b81;
  font-size: 9px;
  padding: 4px 8px;
  border-radius: 20px;
  font-weight: 600;
  border: 0.91px solid #004b8140;
}
.card-insurance .tags span,
.card-insurance .tags a {
  background: rgba(255, 255, 255, 0.6);
  color: #e36d2d;
}
.card-consumer .tags span,
.card-consumer .tags a {
  border: 0.91px solid rgba(0, 171, 171, 0.25);
  color: rgba(0, 171, 171, 1);
}

@keyframes floaty {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
.ring {
  width: 52px;
  height: 52px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--color-navy-700);
}
/* Partners strip — pure CSS marquee (edge-to-edge, no JS dependency) */
.partners {
  background: transparent; /* single backdrop comes from body */
  overflow: hidden;padding-top: 40px;
}
.partners .eyebrow-pill {
  display: flex;
  margin-inline: auto;
  width: fit-content;
  margin-bottom: var(--space-lg);
  color: rgb(0,30,51);
  border: 1px solid rgba(0, 75, 129, 0.15);
  padding: 9px 1.875rem;
  font-size: var(--fs-body);
  font-weight: 500;
}
.partners-track {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
}
.partners-track .marquee-row {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  width: max-content;
  animation: marquee 22s linear infinite;
}
.partners-track:hover .marquee-row {
  animation-play-state: paused;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.logo-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--color-text-400);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    filter var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.logo-chip:hover {
  filter: grayscale(0);
  opacity: 1;
  color: var(--color-navy-700);
}

/* ============================================================
   Match the HTML source: page-wide grid + white→light-blue wash
   behind a transparent header, on the home AND all inner pages
   (the source uses this same body backdrop everywhere).
   ============================================================ */
body {
  background-color: #fff;
  background-image:
    linear-gradient(rgba(0, 75, 129, 0.05) 0.75px, transparent 0.75px),
    linear-gradient(90deg, rgba(0, 75, 129, 0.05) 0.75px, transparent 0.75px),
    linear-gradient(90deg, #ffffff 0%, #e2f2f8 100%);
  background-size: 189px 192px, 189px 192px, 100% 100%;
  background-position: top left;
  background-attachment: scroll;
}
/* Restore the container side padding (disabled globally) so home content
   isn't flush to the viewport edges — matches the source's clamp(20,5vw,40). */
body.home .container { padding-inline: clamp(20px, 5vw, 40px); }

/* Hero split — source is 0.85fr copy / 1.15fr graphic, centred, with the
   source's generous top/bottom padding. */
body.home .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(40px, 6vw, 80px) clamp(48px, 7vw, 90px);
}
body.home .hero-copy { width: auto; }
/* Copy column — match the source: paragraph capped at 460px and the heading's
   -0.03em letter-spacing (the base rule uses an invalid "-3%" that browsers drop). */
body.home .hero-copy p { max-width: 460px; }
body.home .hero-copy h1 { letter-spacing: -0.03em; }
/* Hero graphic — match the source frame: fixed 648:534 ratio, capped at 640px
   and centred in its column, so the photo (and the hero height) match the HTML
   instead of the photo filling the column at its natural, taller ratio. */
body.home .hero-media {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  aspect-ratio: 648 / 534;
}
body.home .hero-media img.media-img {
  width: 80%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}

/* Partner marquee logos — full colour, 34px tall, evenly spaced. */
.partners .logo-chip { padding-inline: 0; filter: none; opacity: 1; }
.partners .logo-chip img {
  height: 34px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

/* -----------------------------------------------------------
   7. OMNICHANNEL TRACKING
----------------------------------------------------------- */

.tracking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
  margin-bottom: var(--space-lg);
}
.tracking-grid p {
  color: var(--color-text-900);
  font-size: 18px;
  padding: 0px 0 0 60px;
}
.tracking-cards {
  padding: 22px 0;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.tracking-card {
  background: var(--color-white);
  padding: var(--space-md) var(--space-sm);
  border-right: 1px solid rgba(0, 30, 51, 0.1);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition:
    background var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}
.tracking-card:hover {
  transform: translateY(-4px);
}
.tracking-card .icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: transform var(--dur-med) var(--ease-out);
}
.tracking-card:hover .icon {
  transform: rotate(-8deg) scale(1.08);
}
.tracking-card h4 {
  font-size: 24px;
  margin-bottom: 0.688rem;
  color: var(--color-navy-700);
}
.tracking-card p {
  font-size: var(--fs-medium);
  color: var(--color-text-gray);
  flex: 1;
}

/* -----------------------------------------------------------
   8. STATS
----------------------------------------------------------- */
.stats {
  background-color: var(--color-navy-700);
  color: var(--color-white);
  padding-bottom: 0;
  background-image: url(../images/background-icon.png);
  background-repeat: no-repeat;
  background-position: top right;
}
.stats h2 {
  color: var(--color-white);
  max-width: 58rem;
  margin-bottom: var(--space-lg);
}
.stats h2 .accent {
  color: var(--color-teal-500);
}
.stats-grid {
  border-right: 1px solid #336f9a;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /*border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-md);
  overflow:hidden;*/
}
.stat-cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(
    --space-md
  );
  transition: background var(--dur-med) var(--ease-out);
  border-left: 1px solid #336f9a;
  border-top: 1px solid #336f9a;
  position: relative;
  height: 252px;
}
.stats-wrap {
  position: relative;
}
.line-1 {
  position: absolute;
  content: "";
  top: 0;
  width: 100%;
  border-top: 1px solid #336f9a;
}
.line-2 {
  position: absolute;
  content: "";
  top: 252px;
  width: 100%;
  border-top: 1px solid #336f9a;
}
.line-3 {
  position: absolute;
  content: "";
  top: 504px;
  width: 100%;
  border-top: 1px solid #336f9a;
}

.stat-cell:before {
  position: absolute;
  content: "+";
  font-size: 20px;
  line-height: 20px;
  top: -11px;
  left: -6px;
  color: #fff;
  font-weight: 400;
  z-index: 2;
}
.stat-cell:nth-child(4n):after {
  position: absolute;
  content: "+";
  font-size: 20px;
  line-height: 20px;
  top: -11px;
  right: -7px;
  color: #fff;
  font-weight: 400;
  z-index: 2;
}
.stat-cell:hover {
  background: rgba(255, 255, 255, 0.06);
}
.stat-cell .num {
  font-family: var(--font-heading);
  font-size: clamp(2.188rem, 1.5vw + 1rem, 2.938rem);
  line-height: clamp(2.5rem, 2vw + 1rem, 3.25rem);
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.stat-cell .num.orange {
  color: #e87752;
}
.stat-cell .num.yellow {
  color: #f1ca5f;
}
.stat-cell .num.blue {
  color: #00abab;
}
.stat-cell .label {
  font-size: var(--fs-xs);
  color: rgba(204, 234, 255, 1);
}
.stat-cell.img-cell {
  padding: 0;
}
.stats-grid .label {
  font-size: 16px;
}
.stat-cell.img-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 9rem;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* -----------------------------------------------------------
   9. INDUSTRIES
----------------------------------------------------------- */
.industries-grid {
  display: flex;
  justify-content: space-between;
}
.industries-copy p {
  color: var(--color-text-600);
  margin-block: var(--space-sm) var(--space-md);
  max-width: 26rem;
}
.industry-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 50px;
}
.industry-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(0, 30, 51, 0.5);
  font-size: 22px;
  font-weight: 500;
  color: rgba(0, 30, 51, 1);
  transition: 0.5s;
}
.industry-item:hover {
  padding-left: 0.35rem;
}
.industry-item .ic {
  color: var(--color-teal-600);
  flex-shrink: 0;
  width: 50px;
}
.industry-item span {
  width: calc(100% - 50px);
  font-size: 18px;
    font-weight: 500;
    color: rgb(0, 30, 51);
}

.industries-copy {
  width: 35%;
}
.industry-list {
  width: calc(100% - 45%);
}

/* -----------------------------------------------------------
   10. TESTIMONIALS
----------------------------------------------------------- */
.testimonials {
  overflow: hidden;
}
.testimonials .testi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.testimonials .testi-head h2 {
  margin-bottom: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: clamp(2.5rem, 4.2vw, 3.2rem);
}
.testi-track {
  margin: 0;
}
.testi-track .slick-list {
  overflow: hidden;
}

.testi-card {
  position: relative;
  width: 100%;
}
.testi-quote {
  position: absolute;
  z-index: 2;
  margin: auto 0 auto auto;
  background: var(--color-navy-700);
  color: var(--color-white);
  padding: clamp(20px,2.6vw,40px);
  border-radius: var(--radius-md);
  max-width: 25rem;
  margin-top: 0;
  margin-right: 0;
  right: 45px;
  top: 50%;
  transform: translateY(-50%);box-shadow: 0 10px 28px rgba(0, 30, 51, 0.28);
}
.quote {
  position: absolute;
  top: 0;
  right: 0;
}
.testi-quote p {
  font-size: 24px;
  line-height: 1.6;
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}
.testi-person {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.testi-person .av {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center; display: none;
}
.testi-person .designation {
  color: var(--color-teal-500);
  line-height: 20px;line-height: 25px;
}
.testi-person strong {
  display: block;
  font-size: clamp(15px,1.5vw,19px);
}
.testi-person span {
  font-size: clamp(14px,1.4vw,18px); color: rgb(153,196,220);
}
.slick-arrow-group {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}
.tracking-cards .slick-arrow-group{display: none;}
.carousel-arrow,
.carousel-arrow2 {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--color-teal-500);
  color: var(--color-teal-600);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.carousel-arrow:hover,
.carousel-arrow2:hover {
  background: #f2fbfb;
  border-color: var(--color-teal-500);
  color: var(--color-teal-600);
  transform: scale(1.06);
}
.carousel-arrow:active,
.carousel-arrow2:active {
  transform: scale(0.94);
}
.carousel-arrow svg,
.carousel-arrow2 svg {
  transition: transform var(--dur-fast) var(--ease-out);
}
.carousel-arrow.prev svg,
.carousel-arrow2.prev svg {
  transform: rotate(180deg);
}

/* -----------------------------------------------------------
   11. FAQ
----------------------------------------------------------- */
.faq {
  background: rgb(0, 75, 129);
  color: var(--color-white);
  position: relative;
}
.faq .container {
  padding-inline: clamp(20px, 5vw, 40px);
}
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: clamp(32px, 5vw, 72px);
}
.faq h2 {
  color: var(--color-white);
  font-size: clamp(34px, 4.5vw, 54px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 20px;
}
.faq h2 span {
  color: rgb(0, 171, 171);
}
.faq-copy p {
  color: rgb(204, 234, 255);
  margin: 0;
  max-width: 380px;
  font-size: 18px;
  line-height: 1.55;
}
.faq-item {
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.faq-item span.lft {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}
a.link-arrow {
  font-size: 16px;
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 4px;
  text-align: left;
  color: rgb(0, 171, 171);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.25;
  transition: color var(--dur-fast) var(--ease-out);
}
.faq-q .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(232, 119, 82);
  font-size: 0;
  flex-shrink: 0;
}
/* Plain teal "+" that becomes "−" when open — no circle/fill, matching source. */
.faq-toggle-ic {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  color: rgb(0, 171, 171);
}
.faq-toggle-ic::before,
.faq-toggle-ic::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: opacity var(--dur-med) var(--ease-out);
}
.faq-toggle-ic::before {
  width: 18px;
  height: 2px;
}
.faq-toggle-ic::after {
  width: 2px;
  height: 18px;
}
.faq-item.active .faq-toggle-ic::after {
  opacity: 0;
}
/* Smooth collapse via max-height — context-independent so it collapses to 0 on
   EVERY page. (The grid-template-rows:0fr trick worked on the home page but did
   not resolve to 0 inside the inner-page .cs-x1 wrapper, leaving answers open.)
   The cap is well above the tallest answer. */
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height var(--dur-med) var(--ease-out),
    padding var(--dur-med) var(--ease-out);
}
.faq-a > * {
  margin: 0;
}
.faq-item.active .faq-a {
  max-height: 600px;
  padding-bottom: 26px;
}
.faq-a p {
  color: rgb(204, 234, 255);
  font-size: 17px;
  line-height: 1.6;
  padding: 0 26px;
}

/* -----------------------------------------------------------
   12. FOOTER
----------------------------------------------------------- */
.site-footer {
  background: var(--color-navy-900);
  color: rgba(255, 255, 255, 0.7);
  padding-block: var(--space-lg) var(--space-md);
  border-top-left-radius:0px;
  border-top-right-radius: 0px;
  margin-top: 0px;
  position: relative;
  z-index: 2;
}

.footer-menu-row {
    display: flex;
    width: calc(100% - 45%);
    justify-content: space-around;
}

.footer-col.footer-logo-col {
    width: 35%;
}
.footer-logo img{width: 320px;}
.footer-top {
      display: flex;
    justify-content: space-between;
    gap: 0;
    margin-bottom: var(--space-lg);
  /*display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);*/
}
.footer-top P {
  color: var(--White, rgba(255, 255, 255, 1));
}
/* Phone is now a tel: link but keeps the plain address text look (no teal/underline). */
.footer-top p a.footer-tel {
  color: inherit;
}
.footer-top p a.footer-tel::after {
  content: none;
}
.footer-top p a.footer-tel:hover{color: var(--color-teal-400);}
.footer-logo {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-white);
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
}
.footer-col h5 {
  color: var(--color-white);
  font-size: var(--fs-small);
  margin-bottom: var(--space-sm);
  font-weight: 600;
}
.footer-col li {
  margin-bottom: 0.4rem;
}
.footer-col a {
  display: inline-block;
  font-size: 16px;
  color: var(--color-teal-500);
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
a .badge-new{font-size: 14px;}
.footer-col a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: rgb(0,120,120);
  transition: width var(--dur-med) var(--ease-out);
}
a .badge-new {
  color: rgba(232, 119, 82, 1);
}
.footer-col a:hover,
.footer-col a.active {
  color: rgb(0,120,120);
  text-decoration: none;
}
.footer-col a:hover::after,
.footer-col a.active::after {
  width: 100%;
}
.footer-logo:after,
.footer-logo:before {
  display: none;
}
.footer-social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.footer-social svg {
  transition: transform var(--dur-fast) var(--ease-out);
}
.footer-social a {
  align-items: center;
  gap: 12px;
  display: inline-flex;
}
.footer-social a:hover svg {
  transform: translateY(-2px);
  color: var(--color-teal-400);
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 18px;
}
.back-to-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition:
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  color: rgba(255, 255, 255, 1);
}
.back-to-top:hover {
  color: var(--color-teal-400);
  transform: translateY(-3px);
}

/* ---------------------------------------------------------
   Footer — match the HTML source: spacing (padding/margin),
   grid layout, logo size and font-sizes.
--------------------------------------------------------- */
.site-footer {
  color: #fff;
  padding-block: 0;
}
/* Restore side padding (disabled on .container globally) so the footer isn't
   flush to the viewport edges — source uses clamp(20px,5vw,40px). */
.site-footer .container {
  padding-inline: clamp(20px, 5vw, 40px);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(auto, 600px);
  gap: 40px clamp(40px, 8vw, 120px);
  align-items: start;
  margin-bottom: 0;
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: 40px;
}
.footer-menu-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  width: auto;
}
.footer-col.footer-logo-col {
  width: auto;
}
.footer-logo {
  margin-bottom: 26px;
}
.footer-logo img {
  height: 52px;
  width: auto;
}
.footer-logo-col p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -0.02em;
  color: #fff;
}
.footer-col h5 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-col li {
  margin: 0;
}
.footer-col a {
  font-size: 16px;
  letter-spacing: -0.02em;
}
.footer-social {
  gap: 12px;
}
.footer-social a {
  gap: 10px;
}
.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 24px 0 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 18px;
}
.footer-bottom .copy-right {
  width: auto;
  height: auto;
  justify-self: center;
}
.footer-bottom .copy-right img {
  height: 34px;
  width: auto;
}
.footer-bottom .back-to-top {
  justify-self: end;
  font-size: 18px;
}

/* =========================================================
   INSIGHTS PAGE
   ========================================================= */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.6rem 0.9rem;
  box-shadow: var(--shadow-sm);
  flex-wrap: nowrap;
  height: 3.75rem;
  box-sizing: border-box;
  overflow: hidden;
}
.filter-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: var(--fs-small);
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out);
}
.filter-toggle:hover {
  background: var(--color-teal-100);
}
.filter-pills {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pill {
  padding: 0.23rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-teal-500);
  font-size: 12px;
  font-weight: 400;
  color: var(--color-navy-700);
  transition: all var(--dur-fast) var(--ease-out);
}
.pill.active,
.pill:hover {
  background: var(--color-navy-700);
  color: var(--color-white);
  border-color: var(--color-navy-700);
}
.pill.active::before {
  content: "✓ ";
}
.filter-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  transition:
    opacity var(--dur-med) var(--ease-out),
    max-width var(--dur-med) var(--ease-out);
  overflow: hidden;
}
.filter-pills {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  transition:
    opacity var(--dur-med) var(--ease-out),
    max-width var(--dur-med) var(--ease-out);
  overflow-x: auto;
  max-width: 40rem;
  scrollbar-width: none;
}
.filter-pills::-webkit-scrollbar {
  display: none;
}

.filter-item{
    display:block;
}

.filter-pills{
    display:flex;
}

.filter-pills .pill{
    cursor:pointer;
}

.results-count {
  font-size: var(--fs-small);
  color: var(--color-text-400);
  white-space: nowrap;
  padding-right: var(--space-md);
  border-right: 1px solid var(--color-border);
}
.search-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  font-size: var(--fs-small);
  color: var(--color-teal-600);
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}
.search-toggle:hover {
  background: var(--color-teal-100);
}

/* Search expand-in-place (search.png) */
.search-box {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-width var(--dur-slow) var(--ease-out),
    opacity var(--dur-med) var(--ease-out),
    padding var(--dur-slow) var(--ease-out);
}
.filter-bar.search-open .filter-pills {
  max-width: 0;
  opacity: 0;
  margin: 0;
}
.filter-bar.search-open .filter-meta {
  max-width: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
}
.filter-bar.search-open .search-box {
  max-width: 60rem;
  opacity: 1;
  flex: 1;
  padding: 0.4rem 0.6rem;
}
.search-box svg {
  color: var(--color-teal-500);
  flex-shrink: 0;
}
.search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: var(--fs-body);
  color: var(--color-text-900);
  background: transparent;
  min-width: 0;
}
.search-box input::placeholder {
  color: var(--color-text-400);
  font-size: 16px;
}
/* Reset control — outline pill matching the filter design, no fixed width so it
   stays responsive and never overflows on mobile. Shown next to the results count
   when a search is active or a non-default tab is selected. */
.filter-reset {
  /* Hidden by default; shown only when .is-visible is present (added server-side
     on an active search, and toggled by JS for tab/search state). */
  display: none;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-teal-600);
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--color-teal-500);
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.filter-reset.is-visible {
  display: inline-flex;
}
.filter-reset:hover {
  background: var(--color-teal-500);
  border-color: var(--color-teal-500);
  color: var(--color-white);
}
.filter-reset svg {
  width: 11px;
  height: 11px;
}
/* Clear (×) button inside the expanded search field. */
.search-box-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--color-text-400);
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.search-box-clear:hover {
  background: var(--color-teal-100);
  color: var(--color-teal-600);
}
.search-box-clear svg {
  width: 15px;
  height: 15px;
  color: currentColor;
}

.section-heading {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-navy-700);
  margin-bottom: var(--space-md);
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.article-card {
  box-shadow: 0px 4px 15px 0px rgba(0, 75, 129, 0.1);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    border-color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}
.article-card:hover {
  border-color: var(--color-teal-500);
  box-shadow: var(--shadow-md);
  transform: translateY(-5px);
  box-shadow: 0px 4px 15px 0px rgba(0, 75, 129, 0.1);
}
.article-thumb {
  aspect-ratio: 16/10.5;
  overflow: hidden;
}
.article-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.article-card:hover .article-thumb img {
  transform: scale(1.08);
}
.article-body {
  padding: var(--space-sm) var(--space-sm) var(--space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tag {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid var(--color-teal-500);
  color: var(--color-navy-700);
  background: #f2fbfb;
  font-size: 12px;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-sm);
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.tag:hover,
.tag.active {
  background: var(--color-navy-700);
  border-color: var(--color-navy-700);
  color: var(--color-white);
}
.article-body h3 {
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  margin-bottom: var(--space-sm);
  flex: 1;
}
.article-body h3 a {
  transition: color var(--dur-fast) var(--ease-out);
  color: var(--color-text-900);
}
.newsletter p {
  font-size: 20px;
}
.pagination {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: var(--space-xl);
  background: #fff;
  border-radius: 50px;
  padding: 0.938rem 1.688rem;
  margin: 0 auto;
}
.page-btn {
  width: 1.688rem;
  height: 1.688rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-navy-700);
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.page-btn.active {
  background: var(--color-teal-500);
  color: var(--color-white);
}
.page-btn:hover {
  background: rgba(242, 251, 251, 1);
  color: rgba(0, 30, 51, 1);
}
.page-btn.nav-arrow:hover {
  background: transparent;
  color: var(--color-navy-700);
}
.page-dots {
  color: var(--color-text-400);
  padding-inline: 0.2rem;
}

.webinars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.webinar-card {
  box-shadow: 0px 4px 15px 0px rgba(0, 75, 129, 0.1);

  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  gap: var(--space-sm);
  transition:
    border-color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}
.webinar-card:hover {
  border-color: var(--color-teal-500);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  box-shadow: 0px 4px 15px 0px rgba(0, 75, 129, 0.1);
}
.date-box {
  border: 1px solid #d6e2ea;
  background: var(--color-bg-soft);
  border-radius: var(--radius-sm);
  text-align: center;
  padding: 14px;
  flex-shrink: 0;
  min-width: 4rem;
  height: fit-content;
}
.webinar-date {
  display: flex;
  gap: var(--space-sm);
  height: calc(100% - 60px);
}
.date-box .mon {
  font-size: 16px;
  color: var(--color-navy-700);
  font-weight: 400;
  letter-spacing: 0.05em;
}
.date-box .day {
  font-size: clamp(2rem, 3vw, 2.875rem);
  font-weight: 600;
  color: var(--color-navy-700);
  line-height: 1.1;
}
.webinar-body h4 {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: var(--space-sm);
  color: var(--color-text-900);
  line-height: 30px;
}
.webinar-body .closed {
  color: var(--color-navy-700);
  font-size: 16px;
  font-style: italic;
  display: flex;
  margin-top: auto;
}
.webinar-body {
  display: flex;
  flex-direction: column;
}
.webinar-body .link-arrow {
  display: flex;
  margin-top: auto;
}

.conferences-note {
  color: var(--color-text-900);
  font-size: 20px;
  font-weight: 400;
  margin-top: 20px;
}

.newsletter {
  background: var(--color-navy-700);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 4.688rem 4.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
  margin-bottom: var(--space-xl);
}
.newsletter h2 {
  color: var(--color-white);
  font-size: var(--fs-h2);
  margin-bottom: var(--space-sm);
}
.newsletter p {
  color: var(--Sky, rgba(204, 234, 255, 1));
}
.newsletter-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.newsletter-form input {
  padding: 14px 16px;
  border-radius: 6px;
  border: none;
  background: #fff;
  color: rgb(0, 30, 51);
  font-size: 16px;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.newsletter-form input::placeholder {
  color: #757575;
  opacity: 1;
}
.newsletter-form input:focus {
  outline: none;
  /*border-color: var(--color-teal-400);
  background: rgba(255, 255, 255, 0.14); color: #fff;*/
}
.newsletter-form input:nth-child(3) {
  grid-column: span 2;
}
.newsletter-form .btn {
  grid-column: span 2;
  width: fit-content;
  background: var(--color-navy-700);
}
.newsletter-form .btn:hover {
  background: rgba(0, 171, 171, 0.2);
}

/* --- Newsletter powered by Noptin: reproduce the original .newsletter-form design.
   The [noptin] shortcode wraps each field in .noptin-form-field-wrapper inside
   .noptin-form-fields, so the grid moves from the <form> onto that inner wrapper. --- */
.free-subscribe .newsletter-form.noptin-form {
  display: block;
}
.free-subscribe .newsletter-form .noptin-form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0;
  padding: 0;
}
.free-subscribe .newsletter-form .noptin-form-field-wrapper {
  margin: 0;
  padding: 0; max-width: 100%;
}
.free-subscribe .newsletter-form .noptin-form-field-email,
.free-subscribe .newsletter-form .noptin-form-notice {
  grid-column: 1 / -1;
}
/* Submit spans the row but shrinks to the button so the arrow sits inside it. */
.free-subscribe .newsletter-form .noptin-form-field-submit {
  grid-column: 1 / -1;
  justify-self: start;
  width: fit-content;
}
.free-subscribe .newsletter-form .noptin-form-field-wrapper label {
  display: none;
}
.free-subscribe .newsletter-form .noptin-form-field-wrapper input[type="text"],
.free-subscribe .newsletter-form .noptin-form-field-wrapper input[type="email"] {
  width: 100%;
  margin: 0;
}
/* Submit button → match the .btn.btn-teal look (input can't hold the SVG, so the
   arrow is added on the wrapper). */
.free-subscribe .newsletter-form .noptin-form-field-submit {
  position: relative;
}
.free-subscribe .newsletter-form .noptin-form-field-wrapper input::placeholder {
  color: #757575;
  opacity: 1;
}
.free-subscribe .newsletter-form .noptin-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  padding: 13px 44px 13px 22px;
  border-radius: 10px;
  background: transparent;
  color: var(--color-white);
  border: 1px solid rgb(0, 171, 171);
  width: fit-content;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.free-subscribe .newsletter-form .noptin-form-submit:hover {
  background: var(--color-teal-500);
  border-color: var(--color-teal-500);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}
.free-subscribe .newsletter-form .noptin-form-field-submit::after {
  content: "\2192"; /* → */
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgb(0, 171, 171);
  font-size: 16px;
  pointer-events: none;
}
.free-subscribe .newsletter-form .noptin-form-notice {
  margin-top: 6px; text-align: center;
}
@media (max-width: 767px) {
  .free-subscribe .newsletter-form .noptin-form-fields {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   SINGLE INSIGHT (post detail) — built from the existing design system.
   ========================================================================== */
/* Hero: reuse .insights-hero, but drop the archive's huge overlap padding. */
.insights-hero--single {
  padding-bottom: var(--space-lg);
}
.insight-eyebrow {
  display: inline-block;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal-600);
  transition: color var(--dur-fast) var(--ease-out);
}
.insight-eyebrow:hover {
  color: var(--color-navy-700);
}
.insights-hero--single h1 {
  margin-top: 0;
  margin-bottom: var(--space-sm);
}
.insight-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-gray);
  font-size: var(--fs-small);
}
.insight-meta__sep {
  color: var(--color-teal-500);
}

/* Body column */
.insights-hero.insights-hero--single{padding-bottom: 3rem;}
.insight-narrow {
  margin: 0 auto;
}
.insight-featured {
  margin: 0 0 var(--space-lg);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.insight-featured img {
  display: block;
  width: 100%;
  height: auto;
}

/* Prose */
.insight-content {
  color: var(--color-text-600);
  font-size: var(--fs-body-lg);
  line-height: 1.75;
}
.insight-content p {
  margin-bottom: 1.2em;
}
.insight-content h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.2;
  color: var(--color-navy-700);
  margin: 1.6em 0 0.6em;
}
.insight-content h3,
.insight-content h4 {
  color: var(--color-navy-700);
  margin: 1.4em 0 0.5em;
}
.insight-content h3 {
  font-size: var(--fs-h3);
}
.insight-content a {
  color: var(--color-navy-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.insight-content a:hover {
  color: var(--color-teal-600);
}
.insight-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.insight-content figure {
  margin: 1.5em 0;
}
.insight-content ul,
.insight-content ol {
  margin: 0 0 1.2em 1.25em;
}
.insight-content li {
  margin-bottom: 0.4em;
}
.insight-content strong {
  color: var(--color-text-900);
}
.insight-content blockquote {
  margin: 1.5em 0;
  padding: 0.25em 0 0.25em 1.25em;
  border-left: 3px solid var(--color-teal-500);
  color: var(--color-navy-700);
  font-style: italic;
}

/* Social share */
.insight-share {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: var(--space-lg) 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}
.insight-share__label {
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--color-navy-700);
}
.insight-share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.insight-share__link:hover {
  border-color: var(--color-teal-500);
  background: var(--color-teal-100);
  transform: translateY(-2px);
}
.insight-share__link svg {
  width: 16px;
  height: 16px;
}

/* Previous / Next */
.insight-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}
.insight-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.insight-nav__link:hover {
  border-color: var(--color-teal-500);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.insight-nav__next {
  text-align: right;
  align-items: flex-end;
}
.insight-nav__dir {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-teal-600);
}
.insight-nav__dir svg {
  width: 7px;
  height: auto;
}
.insight-nav__title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-navy-700);
}

/* Related Insights heading spacing (reuses .articles-grid + .article-card). */
.related-insights .section-heading {
  margin-bottom: var(--space-md);
}

@media (max-width: 767px) {
  .insight-nav {
    grid-template-columns: 1fr;
  }
  .insight-nav__next {
    text-align: left;
    align-items: flex-start;
  }
}

/* Mobile menu (built mobile-first-off, hidden on desktop) */
.mobile-menu {
  display: none;
}

/* -----------------------------------------------------------
   13. SECTIONS — single page backdrop lives on body (see top).
----------------------------------------------------------- */
.section {
  position: relative;
}
.pattern-bg {
  background-image: url("../images/pattern-bg.svg");
  background-repeat: repeat;
  background-position: top left;
  background-size: 385px 769px;
}

.testi-track .slick-slide {
  padding-right: 0.75rem;
}
.testi-wrapper {
  max-width: 81.125rem;
  margin: 0 auto;
  overflow: visible;
  position: relative;
}

.testi-track {
  width: calc(100% + 250px);
}

.testi-track .slick-list {
  overflow: hidden;
}

.testi-track .slick-slide {
  width: calc(81.125rem - 250px) !important;
  margin-right: 20px;
}

.slick-disabled {
  opacity: 0.3;
}
.testi-card img {
  width: 100%;
  height: 550px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.slide-card {
  position: relative;
}
.testi-quote img {
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Sections are transparent — the single page backdrop comes from body. */
.industrie-section,
.tracking {
  position: relative;
  overflow: hidden;
  background: transparent;
}
.insights-hero {
  position: relative;
}
.insights-hero .container,
.free-subscribe .container {
  position: relative;
  z-index: 2;
}


.featured-articles {
  margin-top: -24rem;
}

.insights-hero {
  padding-bottom: 25rem;
  border-bottom: 1px solid #d6e2eb;
}

.insights-hero h1 {
  margin-bottom: var(--space-md);
  margin-top: var(--space-lg);
}

hr {
  margin-top: 3.438rem;
  margin-bottom: 3.438rem;
  height: 0.5px;
  width: 1005;
  border: 0.5px solid rgba(0, 75, 129, 0.35);
  background: transparent;
  opacity: 0.5;
}

.free-subscribe {
  position: relative;
  padding: 4.688rem 0 5rem;
}
.mobil-img {
  display: none;
  width: 100%;
  margin-top: 3rem;
}
.mobil-img img {
  width: 100%;
}
.w-100 {
  width: 100%;
}
.slick-arrow.slick-hidden {
  display: flex !important;
}
span.results-count {
  color: #001e33;
}
a.link-arrow {
  color: #004b81;
}
form.newsletter-form input {
  border-radius: 7px; max-width: 100% !important;
}
.industry-list .for_mobile {
  display: none;
}
#whitepaper br{display: none;}
form.wpcf7-form p:last-of-type {position: relative;}
.cs-cf7 .wpcf7-spinner{position:absolute;left:50%;top:50%;transform: translate(-50%, -50%);z-index: 7;margin: 0;padding: 0;}
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output {
    border: 0 !important;text-align: center;
}
.articles-grid > p.no-results {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    text-align: center; font-size:1.6rem; color:var(--color-navy-700);
}

@media screen and (max-width: 600px) {
  .industries-grid .for_desktop {
    display: none;
  }
  .industry-list .for_mobile {
    width: fit-content;
    margin-top: 20px;
  }
  .slick-arrow-group {
    display: flex !important;
  }
  span.lft span {
    font-weight: 400;
  }
  .industry-list {
    grid-template-columns: 1fr;
    margin-top: 1rem !important;
  }
}
.mt-3{margin-top: 3rem;}
.error-page {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}
span.copy-right{width: 35px; height: 35px; display: inline-flex;}
.copy-right im{width: 100%; height: 100%;}
    header.site-header .btn {
    line-height: normal;
}
.float-card.card-consumer a {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}
.cs-captcha-row {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 16px;
    padding: 2px 16px 2px 5px;
    border: 1px solid rgb(214, 226, 234);
    border-radius: 10px;
    background: rgb(255, 255, 255);
    font-family: inherit;
    font-size: 16px;
    color: rgb(0, 30, 51);
    transition: border-color 0.14s ease, box-shadow 0.14s ease; 
}
.cs-captcha-row input, .cs-captcha-row input:focus, .cs-captcha-row input:hover{border:0 !important ; outline: none !important;box-shadow: none !important}
.cs-captcha-row p{display:flex;}
form p br {display: none;}