/* Knowza — tokens */
:root {
  --knowza-blue: #0777bd;
  --knowza-blue-dark: #065a91;
  --knowza-blue-light: #2aa8e6;
  --knowza-muted: #6c757d;
  --knowza-subtle: #3d9fd1;
  --knowza-black: #1f1f1f;
  --knowza-border-light: #e8e8e8;
  --knowza-gradient: linear-gradient(90deg,
      var(--knowza-blue) 0%,
      var(--knowza-blue-light) 100%);
  --knowza-font-body: "Segoe UI", system-ui, sans-serif;
  --knowza-font-display: "Montserrat", system-ui, sans-serif;
  --knowza-font-ui: "Montserrat", system-ui, sans-serif;
  --knowza-font-brand-alt: "Segoe UI", system-ui, sans-serif;
  --knowza-text-md: clamp(1rem, 0.94rem + 0.2vw, 1.825rem);
  --knowza-text-lg: clamp(1rem, 1rem + 0.32vw, 1.25rem);
}

html,
body {
  max-width: 100%;

}

body {
  overflow-x: hidden;
}

body {
  font-family: var(--knowza-font-body);
  font-size: var(--knowza-text-md);
  line-height: 1.5;
}

body.knowza-nav-open {
  overflow: hidden;
}

.font-montserrat {
  font-family: "Montserrat", system-ui, sans-serif;
}

.font-brand-alt {
  font-family: var(--knowza-font-brand-alt);
}

/* Visibility — matches Sapro breakpoint ~1030px */
.knowza-only-desktop {
  display: none !important;
}

.knowza-only-mobile {
  display: inline-flex !important;
}

@media (min-width: 1031px) {
  .knowza-only-desktop.menu-grid-trigger-knowza {
    display: inline-flex !important;
  }

  .knowza-only-desktop.header-btn-knowza {
    display: inline-flex !important;
  }

  .knowza-only-desktop.hero-btn-knowza {
    display: inline-flex !important;
  }

  .knowza-only-mobile {
    display: none !important;
  }
}

.bg-knowza-grad {
  background-image: var(--knowza-gradient);
}

/* Header shell — Sapro: absolutely overlays following hero */
.header-knowza-style1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1040;
  transition: background-color 0.3s ease;
}

.logo-wrapper-knowza>a {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: none;
  box-shadow: none;
}

.header-main-knowza {
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 0.25rem 1.25rem rgba(15, 29, 55, 0.06);
  padding: 0.875rem 0;
  position: relative;
  z-index: 1035;
}

.header-inner-knowza {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 1031px) {

  .logo-wrapper-knowza,
  .header-right-knowza {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .header-right-knowza {
    justify-content: flex-end;
  }

  .main-nav-knowza {
    flex: 0 0 auto;
    /* Don't grow, let the sides take the space */
    margin-inline: 2rem;
  }
}

.gap-knowza-header-actions {
  gap: 0.35rem;
}

@media (min-width: 1031px) {
  .gap-knowza-header-actions {
    gap: 0.5rem;
  }
}

.logo-wrapper-knowza .knowza-logo {
  max-height: 58px;
  width: auto;
}

/* Top bar (Sapro-style strip + Knowza blue) */
.top-bar-knowza-style1 {
  position: relative;
  z-index: 1035;
  background-color: rgba(11, 119, 189, 0.92);
  font-family: var(--knowza-font-display);
}

.top-bar-inner-knowza {
  padding-block: 0.6875rem 0.8125rem;
  row-gap: 0.65rem;
}

@media (max-width: 1030px) {
  .top-bar-knowza-style1 {
    display: none !important;
  }
}

.column-gap-knowza-topbar {
  column-gap: clamp(1rem, 2.5vw, 2rem);
}

.top-bar-contact-knowza>li:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 14px;
  margin-inline-start: clamp(0.65rem, 1.5vw, 1.15rem);
  background-color: rgba(255, 255, 255, 0.28);
  flex-shrink: 0;
}

.top-bar-explore-link {
  font-family: var(--knowza-font-body);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.top-bar-explore-link:hover,
.top-bar-explore-link:focus-visible {
  color: var(--knowza-blue-light);
}

.top-bar-vsep {
  width: 1px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

.top-bar-label-knowza {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.top-bar-link-knowza {
  font-family: var(--knowza-font-body);
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.top-bar-link-knowza:hover,
.top-bar-link-knowza:focus-visible {
  color: var(--knowza-blue-light);
}

.knowza-top-icon {
  width: 16px;
  height: 16px;
  font-size: 8px;
  color: var(--knowza-black);
}

.knowza-top-icon svg {
  display: block;
}

.knowza-top-icon svg path {
  stroke: currentColor;
}

/* Main nav — full-width white bar (links inline, dark text) */
.main-nav-knowza {
  font-family: var(--knowza-font-body);
  transition:
    right 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s ease;
}

@media (min-width: 1031px) {
  .main-nav-knowza {
    display: flex;
    justify-content: center;
    min-width: 0;
    overflow: visible;
    background-color: transparent !important;
    box-shadow: none !important;
    position: relative;
  }

  .main-nav-knowza-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 2.5rem;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    overflow: visible;
  }

  .main-nav-knowza-list>li {
    position: relative;
    padding: 0;
    margin: 0;
  }

  .main-nav-knowza-link {
    color: #1f1f1f;
    font-family: var(--knowza-font-body);
    font-size: 0.95rem;
    font-weight: 700;
    display: block;
    line-height: 1.35;
    padding: 0.5rem 0;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: all 0.3s ease;
    position: relative;
  }

  .main-nav-knowza-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--knowza-gradient);
    transition: width 0.3s ease;
  }

  .main-nav-knowza-link:hover::after,
  .main-nav-knowza-link:focus-visible::after {
    width: 100%;
  }

  .main-nav-knowza-link:hover,
  .main-nav-knowza-link:focus-visible {
    color: var(--knowza-blue);
  }

  .main-nav-knowza:not(.slidein) .menu-close-trigger-knowza {
    display: none !important;
  }

  /* Grid / overlay drawer on large screens */
  .main-nav-knowza.slidein {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 20rem;
    height: 100vh;
    padding: 5rem 1.875rem 2rem;
    overflow-y: auto;
    z-index: 10040;
    flex: none !important;
    margin: 0 !important;
    display: block !important;
    justify-content: initial !important;
    align-items: initial !important;
    background-color: #fff !important;
    border-radius: 0 !important;
    box-shadow: -10px 0 50px rgba(0, 0, 0, 0.15);
    pointer-events: auto !important;
  }

  .main-nav-knowza.slidein .main-nav-knowza-list {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
  }

  .main-nav-knowza.slidein .main-nav-knowza-list>li {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--knowza-border-light);
  }

  .main-nav-knowza.slidein .main-nav-knowza-list>li::before {
    display: none !important;
  }

  .main-nav-knowza.slidein .main-nav-knowza-link {
    color: #191917;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    padding: 1rem 0;
    white-space: normal;
  }

  .main-nav-knowza.slidein .menu-close-trigger-knowza {
    display: inline-flex !important;
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-image: var(--knowza-gradient);
    color: #fff !important;
    font-size: 1.35rem;
    line-height: 1;
    z-index: 1;
  }
}

@media (max-width: 1030px) {
  .main-nav-knowza {
    position: fixed;
    top: 0;
    right: -20rem;
    bottom: 0;
    width: 100%;
    max-width: 20rem;
    height: 100vh;
    padding: 5rem 1.875rem 2rem;
    overflow-y: auto;
    z-index: 10040;
    background-color: #fff !important;
    border-radius: 0 !important;
    box-shadow: -10px 0 50px rgba(0, 0, 0, 0.15);
    flex: none !important;
    margin: 0 !important;
  }

  .main-nav-knowza.slidein {
    right: 0;
    pointer-events: auto;
  }

  .main-nav-knowza:not(.slidein) {
    pointer-events: none;
  }

  .main-nav-knowza-list {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
  }

  .main-nav-knowza-list>li {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--knowza-border-light);
  }

  .main-nav-knowza-list>li::before {
    display: none !important;
  }

  .main-nav-knowza-link {
    color: #191917;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    padding: 1rem 0;
  }

  .main-nav-knowza-link:hover,
  .main-nav-knowza-link:focus-visible {
    color: var(--knowza-blue);
  }

  .menu-close-trigger-knowza {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-image: var(--knowza-gradient);
    color: #fff !important;
    font-size: 1.35rem;
    line-height: 1;
    z-index: 1;
  }
}

.menu-close-trigger-knowza span {
  margin-top: -2px;
}

/* Dropdowns */
.dropdown-menu-knowza {
  --bs-dropdown-min-width: 15rem;
  border-radius: 0.85rem;
  padding-block: 0.5rem;
  z-index: 1060;
}

.dropdown-menu-knowza .dropdown-item {
  font-size: 0.9375rem;
  padding: 0.45rem 1.25rem;
  color: var(--knowza-muted);
  transition:
    color 0.15s ease,
    background-color 0.15s ease;
}

.dropdown-menu-knowza .dropdown-item:hover,
.dropdown-menu-knowza .dropdown-item:focus {
  color: var(--knowza-blue-dark);
  background-color: rgba(11, 119, 189, 0.06);
}

.main-nav-knowza .dropdown-toggle::after {
  vertical-align: 0.15em;
}

.btn-outline-knowza {
  font-family: var(--knowza-font-ui);
  border: 2px solid var(--knowza-subtle);
  padding: 0.96rem 2.5rem;
  font-size: 0.738rem;
  font-weight: 700;
  color: var(--knowza-subtle);
  border-radius: 50rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.header-btn-knowza {
  margin-left: 0;
}

.hero-btn-knowza {
  margin-left: 0;
}

.btn-hero-knowza {
  display: inline-flex;
  font-family: var(--knowza-font-ui);
  background-color: var(--knowza-blue);
  /* Filled background */
  border: 2px solid var(--knowza-blue);
  padding: 0.96rem 2.5rem;
  font-size: 0.938rem;
  font-weight: 700;
  color: #ffffff !important;
  /* White text for contrast */
  border-radius: 50rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

/* Inverse Hover: Becomes an outline on hover */
.btn-hero-knowza:hover,
.btn-hero-knowza:focus-visible {
  background-color: transparent;
  border-color: var(--knowza-blue);
  color: var(--knowza-blue) !important;
}

/* Matching the header margin logic from your snippet */
.header-btn-knowza {
  margin-left: 0;
  border-color: var(--knowza-blue) !important;
  color: var(--knowza-blue) !important;
}

@media (min-width: 1031px) {
  .header-btn-knowza {
    margin-left: 0.85rem;
  }
}

.hero-btn-knowza {
  margin-left: 0;
  border-color: var(--knowza-blue) !important;
  color: white !important;
}

@media (min-width: 1031px) {
  .hero-btn-knowza {
    margin-left: 0.85rem;
  }
}



.btn-outline-knowza:hover,
.btn-outline-knowza:focus-visible {
  background-color: var(--knowza-blue) !important;
  border-color: var(--knowza-blue) !important;
  color: #fff !important;
}

.menu-grid-trigger-knowza {
  display: inline-flex;
  width: 3.5rem;
  height: 3.5rem;
  border: 2px solid var(--knowza-subtle);
  margin-left: 0.35rem;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

@media (min-width: 1031px) {
  .menu-grid-trigger-knowza {
    margin-left: 0.5rem;
  }
}

.menu-grid-trigger-knowza:hover,
.menu-grid-trigger-knowza:focus-visible {
  background-color: var(--knowza-subtle);
}

.menu-grid-trigger-knowza-inner {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
}

.menu-grid-trigger-knowza-inner i {
  width: 8px;
  height: 8px;
  border: 2px solid var(--knowza-subtle);
  border-radius: 50%;
  font-style: normal;
  transition: border-color 0.2s ease;
}

.menu-grid-trigger-knowza:hover .menu-grid-trigger-knowza-inner i,
.menu-grid-trigger-knowza:focus-visible .menu-grid-trigger-knowza-inner i {
  border-color: #fff;
}

@media (max-width: 1030px) {
  .menu-grid-trigger-knowza {
    width: 2.8rem;
    height: 2.8rem;
    margin-left: 0 !important;
  }

  .menu-grid-trigger-knowza-inner i {
    width: 6px;
    height: 6px;
    border-width: 1px;
  }
}

.menu-trigger-knowza {
  width: 2.5rem;
  height: 2.5rem;
  gap: 5px;
  flex-direction: column;
  padding: 0.5rem;
  border-radius: 0.3125rem;
  cursor: pointer;
  border: 2px solid var(--knowza-subtle) !important;
}

.menu-trigger-knowza span {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: var(--knowza-subtle);
  border-radius: 2px;
}

.knowza-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 29, 55, 0.35);
  z-index: 1032;
}

/* ═══════════════════════════════════════════════════════════
   HERO — Complete Redesign
═══════════════════════════════════════════════════════════ */

.hero-knowza {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: min(100vh, 100dvh);
}

.hero-knowza-fixed-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;

  background-color: #04131f;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;

  transition: background-image 0.8s ease-in-out;
}

@media (min-width: 992px) {
  .hero-knowza-fixed-bg {
    background-attachment: fixed;
  }
}

/* Richer 3-stop overlay + radial side vignette */
.hero-knowza-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
      rgba(4, 14, 26, 0.75) 0%,
      rgba(7, 80, 130, 0.32) 48%,
      rgba(4, 15, 28, 0.94) 100%);
  pointer-events: none;
}

.hero-knowza-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 100% at 50% 50%,
      transparent 45%,
      rgba(3, 10, 20, 0.5) 100%);
}

.hero-knowza-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(10rem, 16vw, 18rem);
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

/* ── Eyebrow ── */
.hero-knowza-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--knowza-font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--knowza-blue-light);
  margin-bottom: 1.25rem;
}

.hero-knowza-eyebrow::before,
.hero-knowza-eyebrow::after {
  content: "";
  display: block;
  height: 1px;
  width: 2.5rem;
  background: var(--knowza-gradient);
  opacity: 0.75;
}

/* ── Title ── */
.hero-knowza-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.8rem);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #fff;
}

/* Gradient clip on accent word */
.hero-title-accent {
  background: linear-gradient(90deg, #41b4f2 0%, #8de0ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Lead ── */
.hero-knowza-lead {
  font-family: var(--knowza-font-body);
  font-size: var(--knowza-text-lg);
  font-weight: 500;
  line-height: 1.75;
  max-width: 46rem;
  color: rgba(255, 255, 255, 0.75);
}

/* ── CTA button ── */
.hero-btn-knowza {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--knowza-font-ui);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: #fff !important;
  padding: 0.9rem 2.375rem;
  border-radius: 50rem;
  background: linear-gradient(135deg, #2aa8e6 0%, #0777bd 55%, #065a91 100%);
  border: none;
  box-shadow:
    0 0.4rem 1.5rem rgba(7, 119, 189, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.hero-btn-knowza::after {
  content: "→";
  transition: transform 0.2s ease;
}

@media (hover: hover) {

  .hero-btn-knowza:hover,
  .hero-btn-knowza:focus-visible {
    transform: translateY(-2px);
    box-shadow:
      0 0.65rem 2rem rgba(7, 119, 189, 0.65),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
    filter: brightness(1.08);
    color: #fff !important;
  }

  .hero-btn-knowza:hover::after {
    transform: translateX(4px);
  }
}

/* ── Gradient divider ── */
.hero-knowza-divider {
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.1) 15%,
      rgba(42, 168, 230, 0.3) 50%,
      rgba(255, 255, 255, 0.1) 85%,
      transparent 100%);
  margin-bottom: 2.5rem;
}

/* ═══════════════════════════════════════════════════════════
   TRUST-BADGE CARDS 
═══════════════════════════════════════════════════════════ */

.hero-knowza-services {
  max-width: 72rem;
  margin-inline: auto;
}

.hero-service-card-wrap {
  padding: 1px;
  border-radius: 0.625rem;
  background: rgba(255, 255, 255, 0.14);
  height: 100%;
  transition: background 0.25s ease;
}

@media (hover: hover) {
  .hero-service-card-wrap:hover {
    background: rgba(255, 255, 255, 0.26);
  }
}

.hero-service-card {
  min-height: 11.5rem;
  padding: 2rem 1.5rem 1.75rem;
  border-radius: 0.5625rem;
  background: rgba(8, 24, 40, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  cursor: default;
  height: 100%;
  transition: background 0.25s ease, transform 0.25s ease;
}

@media (hover: hover) {
  .hero-service-card-wrap:hover .hero-service-card {
    background: rgba(8, 26, 44, 0.72);
    transform: translateY(-3px);
  }
}

/* Numbered index — top-right */
.hero-service-num {
  position: absolute;
  top: 1rem;
  right: 1.525rem;
  font-family: var(--knowza-font-display);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.18);
  line-height: 1;
}

/* Icon circle — solid brand blue, no glow */
.hero-service-icon-wrap {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--knowza-blue);
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.25s ease;
}

@media (hover: hover) {
  .hero-service-card-wrap:hover .hero-service-icon-wrap {
    background: var(--knowza-blue-dark);
  }
}

.hero-service-icon {
  width: 22px;
  height: 22px;
}

/* Label */
.hero-service-label {
  font-family: var(--knowza-font-display);
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}

/* Thin top accent — single brand-blue line, static */
.hero-service-card-foot {
  position: absolute;
  top: 0;
  left: 1.5rem;
  right: 1.5rem;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--knowza-blue);
  opacity: 0.5;
  transition: opacity 0.25s ease;
}

@media (hover: hover) {
  .hero-service-card-wrap:hover .hero-service-card-foot {
    opacity: 0.85;
  }
}

/* Reduced motion */
/* @media (prefers-reduced-motion: reduce) {

  .hero-service-card,
  .hero-service-card-wrap,
  .hero-service-icon-wrap {
    transition: none;
    transform: none !important;
  }
} */

/* ═══════════════════════════════════════════════════════════
   SECTION SHELL — shared utilities for all page sections
═══════════════════════════════════════════════════════════ */
.section-knowza {
  padding-block: clamp(4rem, 8vw, 4rem);
}

.section-header-knowza {
  max-width: 52rem;
  margin-inline: auto;
}

.section-eyebrow-knowza {
  display: flex;
  justify-content: center;
  /* display: inline-block; */
  font-family: Montserrat, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  /* background: rgba(7, 119, 189, 0.08); */
  /* border: 1px solid rgba(7, 119, 189, 0.18); */
  padding: 0.3rem 1rem;
  border-radius: 50rem;
}


.about-us-eyebrow-knowza {
  display: flex;
  justify-content: center;
  /* display: inline-block; */
  font-family: Montserrat, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  /* background: rgba(7, 119, 189, 0.08); */
  /* border: 1px solid rgba(7, 119, 189, 0.18); */
  padding: 0.3rem 1rem;
  border-radius: 50rem;
}

.section-title-knowza {
  font-family: Montserrat, sans-serif;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--knowza-black);
  margin-bottom: 0rem;
}

/* ═══════════════════════════════════════════════════════════
   WHAT WE OFFER — Service Tiles
═══════════════════════════════════════════════════════════ */
.services-knowza {
  background-color: #f8fafc;
  position: relative;
}

/* Subtle top border line */
.services-knowza::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--knowza-gradient);
  opacity: 0.18;
}

.services-header-knowza {
  max-width: 52rem;
  margin-bottom: 3rem;
}

.services-eyebrow-knowza {

  /* display: inline-block; */
  font-family: Montserrat, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  /* background: rgba(7, 119, 189, 0.08); */
  /* border: 1px solid rgba(7, 119, 189, 0.18); */
  padding: 0rem 0.2rem;
  border-radius: 50rem;

}


/* ── Tile base ────────────────────────────────────────────── */
.svc-tile {
  background: #fff;
  border: 1px solid var(--knowza-border-light);
  border-radius: 1.525rem;
  padding: 2rem 1.75rem 1.75rem;
  color: var(--knowza-black);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

/* Gradient top accent bar */
.svc-tile::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--knowza-gradient);
  border-radius: 1.525rem 1.525rem 0 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  .svc-tile:hover {
    transform: translateY(-6px);
    box-shadow:
      0 1.25rem 3rem rgba(7, 119, 189, 0.12),
      0 0 0 1px rgba(7, 119, 189, 0.1);
    border-color: rgba(7, 119, 189, 0.2);
  }

  .svc-tile:hover::before {
    opacity: 1;
  }

  .svc-tile:hover .svc-tile-icon-wrap {
    box-shadow:
      0 0.5rem 1.25rem rgba(7, 119, 189, 0.35),
      0 0 0 6px rgba(42, 168, 230, 0.12);
    transform: translateY(-2px);
  }

  .svc-tile:hover .svc-tile-cta {
    color: var(--knowza-blue-dark);
    gap: 0.6rem;
  }
}

/* ── Icon wrap ─────────────────────────────────────────────── */
.svc-tile-icon-wrap {
  width: 56px;
  height: 56px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--knowza-blue);
  border-radius: 0.875rem;
  flex-shrink: 0;
  box-shadow:
    0 0.25rem 0.85rem rgba(7, 119, 189, 0.3),
    0 0 0 4px rgba(42, 168, 230, 0.1);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.svc-tile-icon {
  width: 26px;
  height: 26px;
  color: #fff;
  display: block;
}

/* ── Text content ──────────────────────────────────────────── */
.svc-tile-title {
  font-family: Montserrat, sans-serif;
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.525rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--knowza-black);
  margin: 0 0 0.5rem;
}

.svc-tile-summary {
  font-family: Montserrat, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  margin: 0 0 0.875rem;
  line-height: 1.4;
}

.svc-tile-desc {
  font-family: Montserrat, sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--knowza-muted);
  margin: 0;
  flex: 1;
}

.svc-tile-cta {
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: Montserrat, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--knowza-blue);
  padding-top: 1.25rem;
  border-top: 1px solid var(--knowza-border-light);
  margin-top: 1.25rem;
  width: 100%;
  transition: color 0.25s ease, gap 0.25s ease;
}

/* ── Accent CTA tile (6th tile — "Explore All") ───────────── */
.svc-tile--accent {
  background: var(--knowza-blue);
  border-color: transparent;
  color: #fff;
}

.svc-tile--accent::before {
  display: none;
}

.svc-tile--accent .svc-tile-icon-wrap {
  background: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 0.25rem 0.85rem rgba(0, 0, 0, 0.15),
    0 0 0 4px rgba(255, 255, 255, 0.1);
}

.svc-tile--accent .svc-tile-icon {
  color: #fff;
}

.svc-tile--accent .svc-tile-title {
  color: #fff;
}

.svc-tile--accent .svc-tile-desc {
  color: rgba(255, 255, 255, 0.85);
}

.svc-tile--accent .svc-tile-cta {
  color: #fff;
  border-top-color: rgba(255, 255, 255, 0.25);
  justify-content: center;
}

.teams-knowza {
  background-color: #f8fafc;
}

.svc-tile-desc {
  font-family: var(--knowza-font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--knowza-muted);
  margin: 0 0 1rem;
  flex: 1;
}

.svc-tile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--knowza-border-light);
  width: 100%;
}

.svc-tile-tag {
  font-family: var(--knowza-font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  background: rgba(7, 119, 189, 0.06);
  border: 1px solid rgba(7, 119, 189, 0.15);
  padding: 0.22rem 0.65rem;
  border-radius: 50rem;
}

@media (hover: hover) {
  .svc-tile--accent:hover {
    box-shadow:
      0 1.5rem 3.5rem rgba(7, 119, 189, 0.4),
      0 0 0 1px rgba(255, 255, 255, 0.15);
    border-color: transparent;
    filter: brightness(1.08);
  }

  .svc-tile--accent:hover .svc-tile-cta {
    color: #fff;
  }
}

/* @media (prefers-reduced-motion: reduce) {

  .svc-tile,
  .svc-tile-icon-wrap {
    transition: none;
    transform: none !important;
  }
} */



/* ═══════════════════════════════════════════════════════════
   OUR PROCESS SECTION
═══════════════════════════════════════════════════════════ */

.process-knowza {
  padding-block: clamp(4.5rem, 9vw, 4.5rem);
  background-color: #f5f8fb;
  position: relative;
  overflow: hidden;
}

/* Subtle dot-grid background */
.process-knowza::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(7, 119, 189, 0.055) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}

/* ── Left column ──────────────────────────────────────────── */

.process-knowza-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--knowza-font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  margin-bottom: 1rem;
}

/* .process-knowza-eyebrow::before {
  content: "";
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--knowza-gradient);
  flex-shrink: 0;
  border-radius: 2px;
} */

.process-knowza-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--knowza-black);
  margin-bottom: 1.25rem;
}

.process-knowza-lead {
  font-family: var(--knowza-font-body);
  font-size: var(--knowza-text-md);
  font-weight: 400;
  line-height: 1.8;
  color: var(--knowza-muted);
  margin-bottom: 2.5rem;
  max-width: 34rem;
}

.process-knowza-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--knowza-font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  padding: 0.9rem 2.125rem;
  border-radius: 50rem;
  background: linear-gradient(135deg, #2aa8e6 0%, #0777bd 55%, #065a91 100%);
  box-shadow: 0 0.35rem 1.25rem rgba(7, 119, 189, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.process-knowza-cta::after {
  content: "→";
  transition: transform 0.2s ease;
}

@media (hover: hover) {

  .process-knowza-cta:hover,
  .process-knowza-cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 0.55rem 1.75rem rgba(7, 119, 189, 0.48);
    filter: brightness(1.06);
    color: #fff;
  }

  .process-knowza-cta:hover::after {
    transform: translateX(4px);
  }
}

/* ── Steps ────────────────────────────────────────────────── */

.process-knowza-steps {
  position: relative;
}

/* Vertical connector line — sits behind the markers */
/* Vertical connector line — sits behind the markers */
.process-knowza-steps::before {
  content: "";
  position: absolute;
  top: 1.75rem;
  /* updated: align with centre of new badge */
  bottom: 1.75rem;
  /* updated: align with centre of new badge */
  left: 1.75rem;
  /* updated: half of new badge width (3.5rem / 2) */
  width: 1px;
  background: linear-gradient(180deg,
      rgba(7, 119, 189, 0.5) 0%,
      rgba(7, 119, 189, 0.12) 100%);
  z-index: 0;
}

.process-knowza-step {
  display: flex;
  align-items: flex-start;
  gap: 1.625rem;
  position: relative;
  z-index: 1;
}

.process-knowza-step+.process-knowza-step {
  margin-top: 2.5rem;
}

/* Marker column: badge + line */
.process-step-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

/* Number badge */
/* Number badge */
.process-step-num {
  width: 3.5rem;
  /* increased from 2.625rem */
  height: 3.5rem;
  /* increased from 2.625rem */
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--knowza-blue);
  box-shadow: 0 0 0 4px rgba(7, 119, 189, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--knowza-font-display);
  font-size: 0.875rem;
  /* increased from 0.5rem */
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--knowza-blue);
  flex-shrink: 0;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) {
  .process-knowza-step:hover .process-step-num {
    background: var(--knowza-blue);
    color: #fff;
    box-shadow: 0 0 0 5px rgba(7, 119, 189, 0.14),
      0 0.3rem 0.9rem rgba(7, 119, 189, 0.3);
  }
}

/* Step text */
.process-step-body {
  flex: 1;
  padding-top: 0.4rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--knowza-border-light);
}

.process-knowza-step:last-child .process-step-body {
  border-bottom: none;
  padding-bottom: 0;
}

.process-step-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.525rem, 1rem + 0.5vw, 1.35rem);
  /* increased min and max */
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--knowza-black);
  margin-bottom: 0.5rem;
}

.process-step-desc {
  font-family: var(--knowza-font-body);
  font-size: 1.05rem;
  /* increased from 0.9375rem */
  font-weight: 400;
  line-height: 1.75;
  color: var(--knowza-muted);
  margin: 0;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 991.98px) {

  /* Hide connector line on mobile — looks odd without fixed widths */
  .process-knowza-steps::before {
    display: none;
  }

  .process-knowza-lead {
    max-width: 100%;
  }
}

/* ── Reduced motion ───────────────────────────────────────── */

/* @media (prefers-reduced-motion: reduce) {

  .process-knowza-cta,
  .process-knowza-cta::after,
  .process-step-num {
    transition: none;
    transform: none !important;
  }
} */

.knowza-hr {
  position: relative;
  border: none;
  height: 2px;
  margin: 0;

  background: linear-gradient(90deg,
      transparent 0%,
      rgba(7, 119, 189, 0.25) 10%,
      var(--knowza-blue-dark) 50%,
      rgba(7, 119, 189, 0.25) 90%,
      transparent 100%);

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 10px rgba(7, 119, 189, 0.18);

  opacity: 1 !important;
}


/* ═══════════════════════════════════════════════════════════
   WHY CHOOSE US
═══════════════════════════════════════════════════════════ */

.why-knowza {
  padding-block: clamp(4.5rem, 9vw, 4.5rem);
  background-color: #f5f8fb;
}

/* ── Heading block ── */
.why-knowza-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  font-family: var(--knowza-font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  margin-bottom: 1rem;
}

.why-knowza-eyebrow::before,
.why-knowza-eyebrow::after {
  content: "";
  display: block;
  width: 1.75rem;
  height: 2px;
  background: var(--knowza-gradient);
  border-radius: 2px;
  flex-shrink: 0;
}

.why-knowza-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--knowza-black);
  margin: 0;
}

/* ── Feature cards ── */
.why-card {
  display: flex;
  align-items: flex-start;
  gap: 1.35rem;

  padding: 2rem 1.85rem;

  border: 1px solid var(--knowza-border-light);
  border-radius: 1rem;

  background: #ffff;

  min-height: 180px;
  height: 100%;

  transition:
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease;
}

@media (hover: hover) {
  .why-card:hover {
    border-color: rgba(7, 119, 189, 0.3);
    box-shadow: 0 0.5rem 1.5rem rgba(7, 119, 189, 0.09);
    transform: translateY(-3px);
  }

  .why-card:hover .why-card-icon {
    background: var(--knowza-blue);
    color: #fff;
  }
}

/* Icon */
.why-card-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;

  border-radius: 0.85rem;
  border: 1px solid var(--knowza-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--knowza-blue);
  background: #f5f8fb;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.why-card-icon svg {
  width: 35px;
  height: 35px;
  display: block;
}

/* Text */
.why-card-body {
  flex: 1;
  min-width: 0;
}

.why-card-title {
  font-family: var(--knowza-font-display);

  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--knowza-black);
  margin-bottom: 0.55rem;
  font-size: clamp(0.9rem, 0.82rem + 0.25vw, 1.5rem);
}

.why-card-desc {
  font-family: var(--knowza-font-body);
  font-size: 1.1rem;
  line-height: 1.75;
  font-weight: 400;

  color: var(--knowza-muted);
  margin: 0;
}

/* ── CTA ── */
.why-knowza-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--knowza-font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--knowza-blue);
  padding: 0.9rem 2.5rem;
  border-radius: 50rem;
  border: 2px solid var(--knowza-blue);
  background: transparent;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.why-knowza-cta::after {
  content: "→";
  transition: transform 0.3s ease;
}

@media (hover: hover) {
  .why-card:hover {
    border-color: rgba(7, 119, 189, 0.22);

    box-shadow:
      0 0.5rem 1.5rem rgba(7, 119, 189, 0.08),
      0 1.25rem 2.5rem rgba(15, 29, 55, 0.06);

    transform: translateY(-4px);
  }
}

@media (hover: hover) {

  .why-knowza-cta:hover,
  .why-knowza-cta:focus-visible {
    background: var(--knowza-blue);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 0.4rem 1.25rem rgba(7, 119, 189, 0.3);
  }

  .why-knowza-cta:hover::after {
    transform: translateX(4px);
  }
}

/* ── Reduced motion ── */
/* @media (prefers-reduced-motion: reduce) {

  .why-card,
  .why-card-icon,
  .why-knowza-cta {
     transition: none;
    transform: none !important; 
  }

   .why-knowza-cta::after {
    transition: none;
  } 
} */


/* ── Hero trust strip ── */
.hero-trust-strip {
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 2rem;
  margin-top: 3rem;
}

.hero-trust-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem clamp(1.25rem, 2.5vw, 2.5rem);
}

.hero-trust-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  opacity: 0.85;
}

.hero-trust-label {
  font-family: var(--knowza-font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}

.about-us-quote {
  font-family: var(--knowza-font-display);
  font-style: italic;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}

.hero-trust-sep {
  width: 1px;
  height: 1.25rem;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  align-self: center;
}

/* Stack to 2×2 on small screens */
@media (max-width: 767.98px) {
  .hero-trust-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .hero-trust-sep {
    display: none;
  }

  .hero-trust-item {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .hero-trust-item:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }

  .hero-trust-item:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .hero-trust-label {
    white-space: normal;
    font-size: 0.85rem;
  }
}


/* ═══════════════════════════════════════════════════════════
   CLIENTS SECTION
═══════════════════════════════════════════════════════════ */

.clients-knowza {
  padding-block: clamp(4.5rem, 9vw, 4.5rem);
  background: linear-gradient(150deg, #edf4fb 0%, #f8faff 50%, #edf3f9 100%);
  position: relative;
  overflow: hidden;
}

/* Soft radial glow behind hex grid */
.clients-knowza::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(7, 119, 189, 0.07) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Heading ── */
.clients-knowza-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  font-family: var(--knowza-font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  margin-bottom: 1rem;
}

.clients-knowza-eyebrow::before,
.clients-knowza-eyebrow::after {
  content: "";
  display: block;
  width: 1.75rem;
  height: 2px;
  background: var(--knowza-gradient);
  border-radius: 2px;
  flex-shrink: 0;
}

.clients-knowza-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--knowza-black);
}

.clients-knowza-lead {
  font-family: var(--knowza-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.8;
  color: var(--knowza-muted);
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: 0;
}

/* ── Outer hex layout ── */
.clients-hex-layout {
  display: flex;
  align-items: center;
  justify-content: center;

  /* increase spacing around center */
  gap: 1.5rem;
}

/* ── Side groups ── */
.clients-hex-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;

  /* push groups slightly downward */
  transform: translateY(10px);
}

.clients-hex-row {
  display: flex;
  gap: 10px;
}

.clients-hex-row+.clients-hex-row {
  margin-top: -29px;
}

.clients-hex-row--offset {
  margin-left: 59px;
  /* (108 + 10) / 2 */
}

/* ── Shell: handles drop-shadow (works through clip-path) ── */
.clients-hex-shell {
  flex-shrink: 0;
  filter: drop-shadow(0 3px 10px rgba(7, 119, 189, 0.1));
  transition: filter 0.22s ease, transform 0.22s ease;
}

@media (hover: hover) {
  .clients-hex-shell:hover {
    filter: drop-shadow(0 6px 18px rgba(7, 119, 189, 0.22));
    transform: scale(1.06);
  }
}



/* ── Hex cell ── */
.clients-hex-cell {
  width: 118px;
  height: 118px;
  background: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 22px;
  transition: background 0.22s ease;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 108'%3E%3Cpath d='M54 2C58 2 62 4 64 7L98 27C101 29 103 32 103 36V72C103 76 101 79 98 81L64 101C62 104 58 106 54 106C50 106 46 104 44 101L10 81C7 79 5 76 5 72V36C5 32 7 29 10 27L44 7C46 4 50 2 54 2Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;

  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 108'%3E%3Cpath d='M54 2C58 2 62 4 64 7L98 27C101 29 103 32 103 36V72C103 76 101 79 98 81L64 101C62 104 58 106 54 106C50 106 46 104 44 101L10 81C7 79 5 76 5 72V36C5 32 7 29 10 27L44 7C46 4 50 2 54 2Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (hover: hover) {
  .clients-hex-shell:hover .clients-hex-cell {
    background: #f0f7fd;
  }
}

/* ── Centre: BEG ── */
.clients-hex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Centre: BEG ── */
.clients-hex-cell--featured {
  width: 220px;
  /* increased from 150px */
  height: 220px;
  padding: 42px;
}

@media (hover: hover) {
  .clients-hex-shell:hover .clients-hex-cell--featured {
    filter: drop-shadow(rgba(7, 119, 189, 0.22) 0px 6px 18px);
  }
}

/* ── Logo images ── */
.clients-hex-logo {
  /* width: 100%; */
  height: 100%;
  object-fit: contain;
  /* filter: grayscale(1) opacity(0.65); */
  transition: filter 0.22s ease;
}

@media (hover: hover) {
  .clients-hex-shell:hover .clients-hex-logo {
    filter: grayscale(0) opacity(1);
  }
}

@media(max-width:768px) {
  .grid-responsive {
    padding-left: 53px;
  }
}


.clients-hex-logo--featured {
  /* filter: brightness(0) invert(1) !important; */
  transform: scale(1.15);
}

/* ── CTA ── */
.clients-knowza-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--knowza-font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  padding: 0.9rem 2.5rem;
  border-radius: 50rem;
  background: linear-gradient(135deg, #2aa8e6 0%, #0777bd 55%, #065a91 100%);
  box-shadow: 0 0.35rem 1.25rem rgba(7, 119, 189, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.clients-knowza-cta::after {
  content: "→";
  transition: transform 0.2s ease;
}

@media (hover: hover) {

  .clients-knowza-cta:hover,
  .clients-knowza-cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 0.55rem 1.75rem rgba(7, 119, 189, 0.48);
    filter: brightness(1.06);
    color: #fff;
  }

  .clients-knowza-cta:hover::after {
    transform: translateX(4px);
  }
}

/* ── Responsive ── */
@media (max-width: 1199.98px) {
  .clients-hex-cell {
    width: 92px;
    height: 92px;
    padding: 18px;
  }

  .clients-hex-cell--featured {
    width: 130px;
    height: 130px;
    padding: 28px;
  }

  .clients-hex-row+.clients-hex-row {
    margin-top: -23px;
  }

  .clients-hex-row--offset {
    margin-left: 51px;
  }
}

@media (max-width: 767.98px) {
  .clients-hex-layout {
    flex-direction: column;
    gap: 2rem;
  }

  .clients-hex-row--offset {
    margin-left: 0;
  }

  .clients-hex-row+.clients-hex-row {
    margin-top: 10px;
  }

  .clients-hex-group .clients-hex-row {
    justify-content: center;
  }

  .clients-hex-center {
    order: -1;
  }
}

/* @media (prefers-reduced-motion: reduce) {

  .clients-hex-shell,
  .clients-hex-logo,
  .clients-knowza-cta {
    transition: none;
    transform: none !important;
  }

  .clients-knowza-cta::after {
    transition: none;
  }
} */


/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════════════════════ */

.testi-knowza {
  padding-block: clamp(4.5rem, 9vw, 4.5rem);
  background-color: #fff;
}

/* ── Heading ── */
.testi-knowza-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  font-family: var(--knowza-font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  margin-bottom: 1rem;
}

/* .testi-knowza-eyebrow::before,
.testi-knowza-eyebrow::after {
  content: "";
  display: block;
  width: 1.75rem;
  height: 2px;
  background: var(--knowza-gradient);
  border-radius: 2px;
  flex-shrink: 0;
} */

.testi-knowza-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--knowza-black);
  margin: 0;
}

/* ── Slider track ── */
.testi-track-wrap {
  overflow: hidden;
}

.testi-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* ── Card ── */
.testi-card {
  flex: 0 0 calc(33.333% - 1rem);
  min-width: 0;
  background: #f5f8fb;
  border: 1px solid var(--knowza-border-light);
  border-radius: 0.875rem;
  padding: 2rem 1.875rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

@media (hover: hover) {
  .testi-card:hover {
    border-color: rgba(7, 119, 189, 0.25);
    box-shadow: 0 0.5rem 1.75rem rgba(7, 119, 189, 0.08);
  }
}

/* Quote icon */
.testi-card-quote {
  color: var(--knowza-blue);
  opacity: 0.18;
  width: 28px;
  flex-shrink: 0;
}

.testi-card-quote svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Body text */
.testi-card-body {
  font-family: var(--knowza-font-body);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.8;
  color: #374151;
  margin: 0;
  flex: 1;
}

/* Footer */
.testi-card-footer {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--knowza-border-light);
  margin-top: auto;
}

.testi-card-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--knowza-gradient);
  color: #fff;
  font-family: var(--knowza-font-display);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.testi-card-name {
  font-family: var(--knowza-font-display);
  font-size: 0.825rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--knowza-black);
  margin: 0 0 0.2rem;
  text-transform: uppercase;
}

.testi-card-role {
  font-family: var(--knowza-font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--knowza-muted);
  margin: 0;
}

/* ── Dot navigation ── */
.testi-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.testi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--knowza-border-light);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.testi-dot.is-active {
  background: var(--knowza-blue);
  transform: scale(1.3);
}

/* ── Responsive breakpoints ── */
@media (max-width: 991.98px) {
  .testi-card {
    flex: 0 0 calc(50% - 0.85rem);
  }
}

@media (max-width: 575.98px) {
  .testi-card {
    flex: 0 0 100%;
  }
}

/* ── CTA ── */
.testi-knowza-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--knowza-font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--knowza-blue);
  padding: 0.9rem 2.5rem;
  border-radius: 50rem;
  border: 2px solid var(--knowza-blue);
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.testi-knowza-cta::after {
  content: "→";
  transition: transform 0.2s ease;
}

@media (hover: hover) {

  .testi-knowza-cta:hover,
  .testi-knowza-cta:focus-visible {
    background: var(--knowza-blue);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 0.4rem 1.25rem rgba(7, 119, 189, 0.3);
  }

  .testi-knowza-cta:hover::after {
    transform: translateX(4px);
  }
}



/* ═══════════════════════════════════════════════════════════
   FOOTER CTA STRIP
═══════════════════════════════════════════════════════════ */

.footer-cta-strip {
  /* background: linear-gradient(150deg, #edf4fb 0%, #f8faff 50%, #edf3f9 100%); */

  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-block: clamp(1.5rem, 7vw, 1.5rem);
  position: relative;
  overflow: hidden;
}

/* Blue radial glow — left-anchored */
.footer-cta-strip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5%;
  transform: translateY(-50%);
  width: 45rem;
  height: 45rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(7, 119, 189, 0.13) 0%, transparent 65%);
  pointer-events: none;
}

.footer-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}

/* ── Text ── */
.footer-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--knowza-font-ui);
  font-size: 0.9875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--knowza-blue-light);
  margin-bottom: 1rem;
}

/* .footer-cta-eyebrow::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 2px;
  background: var(--knowza-gradient);
  border-radius: 2px;
  flex-shrink: 0;
} */

.footer-cta-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.12;
  color: var(--knowza-black);
  /* margin: 0 0 0.875rem; */
}

.footer-cta-sub {
  font-family: var(--knowza-font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--knowza-blue);
  margin: 0;
}

/* ── Action ── */
.footer-cta-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  flex-shrink: 0;
}

.footer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--knowza-font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  padding: 1rem 2.5rem;
  border-radius: 50rem;
  background: linear-gradient(135deg, #2aa8e6 0%, #0777bd 55%, #065a91 100%);
  box-shadow:
    0 0.4rem 1.5rem rgba(7, 119, 189, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.footer-cta-btn::after {
  content: "→";
  transition: transform 0.2s ease;
}

@media (hover: hover) {

  .footer-cta-btn:hover,
  .footer-cta-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow:
      0 0.65rem 2rem rgba(7, 119, 189, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
    filter: brightness(1.07);
    color: #fff;
  }

  .footer-cta-btn:hover::after {
    transform: translateX(4px);
  }
}

.footer-cta-note {
  font-family: var(--knowza-font-body);
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.28);
  margin: 0;
  padding-left: 0.25rem;
}

@media (max-width: 767.98px) {
  .footer-cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  .footer-cta-action {
    width: 100%;
  }

  .footer-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */

.footer-knowza {
  background-color: #0d1f2d;
  padding-top: clamp(2.5rem, 4vw, 1.5rem);
  padding-bottom: 0;
}

.footer-knowza-row {
  padding-bottom: clamp(1rem, 5vw, 1rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Brand col ── */
.footer-logo-link {
  display: inline-block;
  margin-bottom: 1.375rem;
}

.footer-logo {
  /* filter: brightness(0) invert(1); */
  opacity: 0.9;
  max-height: 44px;
  width: auto;
}

.footer-brand-desc {
  font-family: var(--knowza-font-body);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1.75rem;
  max-width: 30rem;
}

/* Offices */
.footer-offices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  align-items: start;
}

.footer-office-city {
  font-family: var(--knowza-font-display);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--knowza-blue-light);
  margin: 0 0 0.3rem;
}

.footer-office-addr {
  font-family: var(--knowza-font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 0.25rem;
}

.footer-office-link {
  font-family: var(--knowza-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
  display: block;
}

.footer-office-link:hover,
.footer-office-link:focus-visible {
  color: var(--knowza-blue-light);
}

@media (max-width: 767px) {
  .footer-offices {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

.footer-email {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.875rem;
}

/* ── Nav cols ── */
.footer-col-heading {
  font-family: var(--knowza-font-display);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.25rem;
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.footer-nav-link {
  font-family: var(--knowza-font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
  display: inline-block;
}

@media (hover: hover) {

  .footer-nav-link:hover,
  .footer-nav-link:focus-visible {
    color: var(--knowza-blue-light);
    padding-left: 4px;
  }
}

/* ── Social ── */
.footer-social {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.footer-social-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.footer-social-btn svg {
  width: 15px;
  height: 15px;
  display: block;
}

@media (hover: hover) {

  .footer-social-btn:hover,
  .footer-social-btn:focus-visible {
    background: var(--knowza-blue);
    border-color: var(--knowza-blue);
    color: #fff;
  }
}

/* ── Bottom bar ── */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.375rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-copy {
  font-family: var(--knowza-font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.3);
  margin: 0;
}

.footer-bottom-logo img {
  filter: brightness(0) invert(1);
  opacity: 0.25;
  max-height: 27px;
  width: auto;
  transition: opacity 0.2s ease;
}

@media (hover: hover) {
  .footer-bottom-logo:hover img {
    opacity: 0.5;
  }
}

@media (max-width: 575.98px) {
  .footer-bottom {
    justify-content: center;
    text-align: center;
  }

  .footer-bottom-logo {
    display: none;
  }
}

/* ── Footer restructure additions ── */
.footer-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.footer-contact-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 1px;
  flex-shrink: 0;
}

.footer-contact-icon svg {
  width: 13px;
  height: 13px;
  display: block;
}

.footer-contact-text {
  font-family: var(--knowza-font-body);
  font-size: 0.8375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.footer-contact-text a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-contact-text a:hover {
  color: var(--knowza-blue-light);
}

.footer-contact-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 0.5rem 0;
}

.footer-contact-sub {
  font-family: var(--knowza-font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  margin: 0 0 0.5rem;
}

.footer-pseb {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--knowza-font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50rem;
  padding: 0.25rem 0.75rem;
}

/* ═══════════════════════════════════════════════════════════
   ABOUT PAGE — HERO
═══════════════════════════════════════════════════════════ */

.about-hero-knowza {
  position: relative;
  display: flex;
  flex-direction: column;
}

.about-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #04131f;
  background-image: url("../images/SS1.jpg");
  /* swap for an about-specific image if available */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.about-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg,
      rgba(4, 14, 26, 0.92) 0%,
      rgba(6, 50, 90, 0.78) 50%,
      rgba(4, 20, 38, 0.88) 100%);
  pointer-events: none;
}

.about-hero-content {
  position: relative;
  z-index: 2;
  padding-top: clamp(9rem, 14vw, 10rem);
  padding-bottom: clamp(5rem, 7vw, 5rem);
}

/* ── Eyebrow ── */
.about-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--knowza-font-ui);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--knowza-blue-light);
  margin-bottom: 0.525rem;
}

/* .about-hero-eyebrow::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 2px;
  background: var(--knowza-gradient);
  border-radius: 2px;
  flex-shrink: 0;
} */

/* ── Title ── */
.about-hero-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.875rem, 1.2rem + 2.8vw, 3rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: #fff;
  margin-bottom: 1.5rem;
}

/* ── Body copy ── */
.about-hero-lead {
  font-family: var(--knowza-font-body);
  font-size: var(--knowza-text-lg);
  font-weight: 600;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 1rem;
}

.about-hero-body {
  font-family: var(--knowza-font-body);
  font-size: var(--knowza-text-md);
  font-weight: 400;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 2.5rem;
}

/* ── Buttons ── */
.about-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.875rem;
}

.about-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--knowza-font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 2.125rem;
  border-radius: 50rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease,
    background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.about-hero-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #2aa8e6 0%, #0777bd 55%, #065a91 100%);
  border: 0px solid transparent;
  box-shadow: 0 0.4rem 1.5rem rgba(7, 119, 189, 0.45);
}

.about-hero-btn--primary::after {
  content: "→";
  transition: transform 0.2s ease;
}

@media (hover: hover) {

  .about-hero-btn--primary:hover,
  .about-hero-btn--primary:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 0.65rem 2rem rgba(7, 119, 189, 0.6);
    filter: brightness(1.07);
    color: #fff;
  }

  .about-hero-btn--primary:hover::after {
    transform: translateX(4px);
  }
}

.about-hero-btn--ghost {
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.25);
}

@media (hover: hover) {

  .about-hero-btn--ghost:hover,
  .about-hero-btn--ghost:focus-visible {
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
    transform: translateY(-2px);
  }
}

/* ── Stat cards grid ── */
.about-hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.about-stat-card {
  padding: 1.75rem 1.5rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

@media (hover: hover) {
  .about-stat-card:hover {
    background: rgba(7, 119, 189, 0.12);
    border-color: rgba(42, 168, 230, 0.3);
    transform: translateY(-3px);
  }
}

.about-stat-num {
  font-family: var(--knowza-font-display);
  font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
  margin-bottom: 0.375rem;
}

.about-stat-num sup {
  font-size: 0.5em;
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
  opacity: 0.7;
}

.about-stat-label {
  font-family: var(--knowza-font-display);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}

.about-stat-desc {
  font-family: var(--knowza-font-body);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.4);
}

/* ── Responsive ── */
@media (max-width: 575.98px) {
  .about-hero-stats {
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
  }

  .about-stat-card {
    padding: 1.25rem 1rem;
  }
}

/* ABOUT US */

.about-hero-video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  margin-top: 33%;
  /* 16:9 */
  height: 0;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.about-hero-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 991.98px) {
  .about-hero-video-wrap {
    margin-top: 0%;

  }
}


/* ═══════════════════════════════════════════════════════════
   MISSION & WHO WE ARE
═══════════════════════════════════════════════════════════ */
.mission-knowza {
  padding-block: clamp(4.5rem, 9vw, 4.5rem);
  background-color: #fff;
}

.mission-block {
  padding-bottom: clamp(3.5rem, 7vw, 4rem);
  /* border-bottom: 1px solid var(--knowza-border-light); */
}

.mission-col {
  padding-inline: clamp(1.5rem, 3vw, 3rem);
}

.mission-col--center {
  border-left: 1px solid var(--knowza-border-light);
  border-right: 1px solid var(--knowza-border-light);
}

.mission-col-body {
  font-family: var(--knowza-font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.85;
  color: var(--knowza-muted);
  margin: 0;
}

.mission-quote {
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
}

.mission-quote::before {
  content: "\201C";
  position: absolute;
  top: -2.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, serif;
  font-size: 8rem;
  line-height: 1;
  color: var(--knowza-blue);
  opacity: 0.1;
  pointer-events: none;
}

.mission-quote p {
  text-align: center;
  font-family: var(--knowza-font-display);
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.1rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.8;
  letter-spacing: -0.01em;
  color: var(--knowza-black);
  margin: 0;
  position: relative;
  z-index: 1;
}

@media (max-width: 991.98px) {
  .mission-col {
    padding-inline: 0;
  }

  .mission-col--center {
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--knowza-border-light);
    border-bottom: 1px solid var(--knowza-border-light);
    padding-block: 2.5rem;
  }
}


/* ═══════════════════════════════════════════════════════════
   WHO WE ARE 
═══════════════════════════════════════════════════════════ */

.whoweare-knowza {
  padding-bottom: clamp(3.5rem, 7vw, 4rem);
  padding-top: clamp(4.5rem, 9vw, 4.5rem);
  background-color: #fff;
}

.whoweare-list {
  max-width: 62rem;
  margin-inline: auto;
  position: relative;
}

/* Vertical connector line */
.whoweare-list::before {
  content: "";
  position: absolute;
  top: 2.75rem;
  bottom: 2.75rem;
  left: 2.75rem;
  width: 1px;
  background: linear-gradient(180deg,
      rgba(7, 119, 189, 0.45) 0%,
      rgba(7, 119, 189, 0.08) 100%);
  z-index: 0;
  pointer-events: none;
}

/* ── Row ── */
.wwa-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0 2.25rem;
  position: relative;
  z-index: 1;
}

.wwa-row+.wwa-row {
  margin-top: 0;
}

/* ── Aside: icon + number ── */
.wwa-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.wwa-icon-wrap {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--knowza-blue);
  box-shadow:
    0 0 0 6px rgba(7, 119, 189, 0.07),
    0 0.5rem 1.5rem rgba(7, 119, 189, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.wwa-icon-wrap svg {
  width: 26px;
  height: 26px;
  color: var(--knowza-blue);
  display: block;
  transition: color 0.3s ease;
}

@media (hover: hover) {
  .wwa-row:hover .wwa-icon-wrap {
    background: var(--knowza-blue);
    box-shadow:
      0 0 0 7px rgba(7, 119, 189, 0.12),
      0 0.75rem 2rem rgba(7, 119, 189, 0.35);
  }

  .wwa-row:hover .wwa-icon-wrap svg {
    color: #fff;
  }
}

.wwa-num {
  font-family: var(--knowza-font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--knowza-blue);
  opacity: 0.4;
}

/* ── Body ── */
.wwa-body {
  padding-top: 1rem;
  padding-bottom: clamp(2rem, 4vw, 3.25rem);
  border-bottom: 1px solid var(--knowza-border-light);
}

.wwa-row:last-child .wwa-body {
  border-bottom: none;
  padding-bottom: 0;
}

.wwa-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--knowza-black);
  margin: 0 0 0.75rem;
  transition: color 0.25s ease;
}

@media (hover: hover) {
  .wwa-row:hover .wwa-title {
    color: var(--knowza-blue);
  }
}

.wwa-desc {
  font-family: var(--knowza-font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.85;
  color: var(--knowza-muted);
  margin: 0 0 1.125rem;
  max-width: 52rem;
}

/* Tags */
.wwa-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.wwa-tag {
  font-family: var(--knowza-font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--knowza-blue);
  background: rgba(7, 119, 189, 0.07);
  border: 1px solid rgba(7, 119, 189, 0.15);
  padding: 0.22rem 0.7rem;
  border-radius: 50rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
  .wwa-row:hover .wwa-tag {
    background: rgba(7, 119, 189, 0.12);
    border-color: rgba(7, 119, 189, 0.25);
  }
}

/* ── Responsive ── */
@media (max-width: 575.98px) {
  .whoweare-list::before {
    left: 2.25rem;
  }

  .wwa-row {
    grid-template-columns: 4.5rem 1fr;
    gap: 0 1.25rem;
  }

  .wwa-icon-wrap {
    width: 4.5rem;
    height: 4.5rem;
  }

  .wwa-icon-wrap svg {
    width: 22px;
    height: 22px;
  }
}

.values-knowza {
  background-color: #f8fafc;
}

.values-col {
  display: flex;
  flex-direction: column;
}

.values-col--left {
  padding-right: clamp(2rem, 4vw, 4rem);
  border-right: 1px solid var(--knowza-border-light);
}

.values-col--right {
  padding-left: clamp(2rem, 4vw, 4rem);
}

/* ── Value item ── */
.value-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding-block: 2rem;
  border-bottom: 1px solid var(--knowza-border-light);
  transition: transform 0.22s ease;
}

.value-item:first-child {
  padding-top: 0;
}

.value-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

@media (hover: hover) {
  .value-item:hover {
    transform: translateX(4px);
  }

  .value-item:hover .value-marker {
    background: var(--knowza-blue);
    color: #fff;
    border-color: var(--knowza-blue);
    box-shadow: 0 0.35rem 1rem rgba(7, 119, 189, 0.3);
  }

  .value-item:hover .value-marker.op {
    background: white;
    color: var(--knowza-blue);
    border-color: white;
  }


}


/* ── Accent / Inverted Value Item ── */
.value-item.value-item--accent {
  background: var(--knowza-blue-dark);
  border: 1px solid transparent;
  border-radius: 1rem;
  padding: 2rem;
  color: #fff;
}

/* Remove default divider line */
.value-item.value-item--accent {
  border-bottom: none;
}

/* White text */
.value-item.value-item--accent .value-title,
.value-item.value-item--accent .value-desc {
  color: #fff;
}

/* White marker with blue icon */
.value-item.value-item--accent .value-marker {
  background: #fff;
  color: var(--knowza-blue);
  border-color: #fff;
  box-shadow: none;
}

/* Hover state */
@media (hover: hover) {

  .value-item.value-item--accent:hover {
    transform: translateX(4px);
    box-shadow: 0 0.5rem 1.5rem rgba(7, 119, 189, 0.28);
  }

  .value-item.value-item--accent:hover .value-marker {
    background: transparent;
    color: #fff;
    border-color: #fff;
  }
}

/* ── Marker icon ── */
.value-marker {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 0.75rem;
  border: 1px solid var(--knowza-border-light);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--knowza-blue);
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.value-marker.op {
  border: 1px solid var(--knowza-border-light);
  background: var(--knowza-blue);
  color: white;

}

.value-marker svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* ── Text ── */
.value-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--knowza-black);
  margin: 0 0 0.5rem;
}



.value-desc {
  font-family: var(--knowza-font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--knowza-muted);
  margin: 0;
}

@media (max-width: 991.98px) {
  .values-col--left {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--knowza-border-light);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }

  .values-col--right {
    padding-left: 0;
  }

  .value-item:first-child {
    padding-top: 2rem;
  }
}


/* ── Process steps section ── */
.process-knowza-steps-section {
  background-color: #f8fafc;
  position: relative;
}

.psteps-wrap {
  position: relative;
}

/* Dashed connector line (desktop) */
.psteps-connector {
  display: none;
  position: absolute;
  top: 150px;
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  z-index: 0;
  transform: scaleX(-1);
  transform: rotate(4deg);
}

@media (min-width: 992px) {
  .psteps-connector {
    display: block;
  }
}

/* ── Grid ── */
.psteps-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 992px) {
  .psteps-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: start;
  }

  .psteps-grid .pstep:nth-child(2) {
    margin-top: 3.5rem;
  }
}

/* ── Step card ── */
.pstep {
  background: #fff;
  border: 1px solid var(--knowza-border-light);
  border-radius: 1rem;
  padding: 2rem 1.75rem 1.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

@media (hover: hover) {
  .pstep:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 2.5rem rgba(7, 119, 189, 0.1);
    border-color: rgba(7, 119, 189, 0.25);
  }

  .pstep:hover .pstep-bracket {
    border-color: var(--knowza-blue);
    opacity: 1;
  }
}

/* Accent (middle) step */
.pstep--accent {
  background: var(--knowza-blue-dark);
  border-color: transparent;
}

.pstep--accent .pstep-num {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.3);
}

.pstep--accent .pstep-arrow {
  color: rgba(255, 255, 255, 0.5);
}

.pstep--accent .pstep-icon {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.pstep--accent .pstep-title {
  color: #fff;
}

.pstep--accent .pstep-desc {
  color: rgba(255, 255, 255, 0.75);
}

.pstep--accent .pstep-tag {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
}

.pstep--accent .pstep-bracket {
  border-color: rgba(255, 255, 255, 0.35);
  opacity: 1;
}

@media (hover: hover) {
  .pstep--accent:hover {
    box-shadow: 0 1.25rem 3rem rgba(7, 119, 189, 0.5);
    border-color: transparent;
    filter: brightness(1.06);
  }

  .pstep--accent:hover .pstep-bracket {
    border-color: rgba(255, 255, 255, 0.7);
  }
}

/* ── Corner brackets ── */
.pstep-bracket {
  position: absolute;
  width: 16px;
  height: 16px;
  opacity: 0.4;
  transition: border-color 0.28s ease, opacity 0.28s ease;
}

.pstep-bracket--tl {
  top: 8px;
  left: 8px;
  border-top: 2px solid var(--knowza-blue);
  border-left: 2px solid var(--knowza-blue);
  border-radius: 0;
}

.pstep-bracket--tr {
  top: 8px;
  right: 8px;
  border-top: 2px solid var(--knowza-blue);
  border-right: 2px solid var(--knowza-blue);
  border-radius: 0;
}

.pstep-bracket--bl {
  bottom: 8px;
  left: 8px;
  border-bottom: 2px solid var(--knowza-blue);
  border-left: 2px solid var(--knowza-blue);
  border-radius: 0;
}

.pstep-bracket--br {
  bottom: 8px;
  right: 8px;
  border-bottom: 2px solid var(--knowza-blue);
  border-right: 2px solid var(--knowza-blue);
  border-radius: 0;
}

/* ── Step head ── */
.pstep-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pstep-num-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pstep-num {
  font-family: var(--knowza-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--knowza-blue);
  border: 1px solid rgba(7, 119, 189, 0.25);
  border-radius: 50rem;
  padding: 0.2rem 0.65rem;
  line-height: 1.5;
}

.pstep-arrow {
  color: var(--knowza-blue);
  opacity: 0.4;
  width: 18px;
  height: 18px;
}

.pstep-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Icon ── */
.pstep-icon {
  width: 48px;
  height: 48px;
  border-radius: 0.75rem;
  background: rgba(7, 119, 189, 0.06);
  border: 1px solid rgba(7, 119, 189, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--knowza-blue);
  flex-shrink: 0;
}

.pstep-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* ── Body ── */
.pstep-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.1rem, 0.9rem + 0.5vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--knowza-black);
  margin: 0 0 0.625rem;
}

.pstep-desc {
  font-family: var(--knowza-font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--knowza-muted);
  margin: 0;
  flex: 1;
}

.pstep-tag {
  display: inline-block;
  font-family: var(--knowza-font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  background: rgba(7, 119, 189, 0.06);
  border: 1px solid rgba(7, 119, 189, 0.14);
  padding: 0.3rem 0.75rem;
  border-radius: 50rem;
  margin-top: auto;
}


.pstair-section {
  background-color: #f8fafc;
}

.pstair-wrap {
  border-radius: 1.25rem;
  overflow: hidden;
  /* border: 1px solid var(--knowza-border-light); */
}

/* ── Staircase track ── */
.pstair-track {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  /* background-color: var(--knowza-border-light); */
  padding: 0;
}

/* ── Each block ── */
.pstair-blk {
  flex: 1;
  position: relative;
  background: #fff;
  padding: 1.5rem 1.5rem 1.75rem;

  display: flex;
  align-items: flex-start;

  min-width: 0;
}

.pstair-blk--1 {
  min-height: 360px;
}

.pstair-blk--2 {
  min-height: 430px;
}

.pstair-blk--3 {
  min-height: 500px;
}

/* ── L-bracket cutout (top + left bars meeting at corner) ── */
.pstair-bracket {
  position: absolute;
  top: 0;
  left: 0;
  width: 9rem;
  height: 9rem;
  border-top: 6px solid var(--knowza-blue);
  border-left: 6px solid var(--knowza-blue);
  border-radius: 0;
  pointer-events: none;
}

/* ── Step text ── */
.pstair-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  width: 100%;
}

.pstair-num {
  font-family: var(--knowza-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  display: block;
}

.pstair-name {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.05rem, 0.85rem + 0.6vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--knowza-black);
}

/* ── Description row ── */
.pstair-desc-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* border-top: 2px solid var(--knowza-blue); */
  background: #fff;
}

.pstair-desc {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  margin-top: auto;
}

.pstair-desc:not(:last-child) {
  border-right: 1px solid var(--knowza-border-light);
}

.pstair-desc-body {
  font-family: var(--knowza-font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--knowza-muted);
  margin: 0;

}

.pstair-desc-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--knowza-font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  background: rgba(7, 119, 189, 0.06);
  border: 1px solid rgba(7, 119, 189, 0.18);
  padding: 0.3rem 0.75rem;
  border-radius: 50rem;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
  .pstair-track {
    gap: 1px;
  }

  .pstair-blk--1 {
    height: 120px;
  }

  .pstair-blk--2 {
    height: 158px;
  }

  .pstair-blk--3 {
    height: 196px;
  }

  .pstair-bracket {
    border-width: 4px;
  }

  .pstair-blk {
    padding: 1rem 1rem 1.25rem;
  }

  .pstair-desc-row {
    grid-template-columns: 1fr;
  }

  .pstair-desc:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--knowza-border-light);
  }
}


.partner-knowza {
  background-color: #f8fafc;
}

/* ── Logo lockup row ── */
.partner-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

/* ── Logo cards ── */
.partner-logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  background: #fff;
  border: 1px solid var(--knowza-border-light);
  border-radius: 1.25rem;
  padding: 2rem 3rem 2rem;
  position: relative;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  min-width: 220px;
}

@media (hover: hover) {
  .partner-logo-card:hover {
    box-shadow: 0 0.5rem 1.75rem rgba(7, 119, 189, 0.09);
    border-color: rgba(7, 119, 189, 0.2);
  }
}

/* .partner-logo-card--featured {
  border: 2px solid rgba(7, 119, 189, 0.25);
  background: #fff;
} */

/* .partner-logo-card--featured::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--knowza-gradient);
  border-radius: 1.25rem 1.25rem 0 0;
} */

.partner-logo-img {
  max-height: 130px;
  max-width: 270px;
  width: auto;
  object-fit: contain;
}

.partner-logo-label {
  font-family: var(--knowza-font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  background: rgba(7, 119, 189, 0.06);
  border: 1px solid rgba(7, 119, 189, 0.15);
  padding: 0.25rem 0.75rem;
  border-radius: 50rem;
  white-space: nowrap;
}

/* ── Connector ── */
.partner-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.partner-connector-icon {
  width: 42px;
  height: 42px;
  display: block;
  flex-shrink: 0;
}

.partner-connector-line {
  width: 3rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(7, 119, 189, 0.15), rgba(7, 119, 189, 0.4));
}

.partner-connector-badge {
  font-family: var(--knowza-font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  background: #fff;
  border: 1px solid rgba(7, 119, 189, 0.2);
  border-radius: 50rem;
  padding: 0.2rem 0.65rem;
  white-space: nowrap;
}

/* ── Lead text ── */
.partner-lead {
  font-family: var(--knowza-font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.85;
  color: var(--knowza-muted);
  margin: 0;
}

.partner-lead a {
  color: #000000;
  text-decoration: none;
}

.partner-lead a:hover {
  color: #0777bd;
}

/* ── Institutions grid ── */
.partner-inst-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.partner-inst-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--knowza-font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--knowza-black);
  background: #fff;
  border: 1px solid var(--knowza-border-light);
  border-radius: 50rem;
  padding: 0.5rem 1.125rem 0.5rem 0.75rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
  .partner-inst-item:hover {
    border-color: rgba(7, 119, 189, 0.25);
    box-shadow: 0 0.25rem 0.75rem rgba(7, 119, 189, 0.08);
  }
}

.partner-inst-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--knowza-blue);
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
  .partner-connector {
    flex-direction: column;
    padding: 1rem 0;
  }

  .partner-connector-line {
    width: 1px;
    height: 2rem;
    background: linear-gradient(180deg, rgba(7, 119, 189, 0.15), rgba(7, 119, 189, 0.4));
  }

  .partner-lockup {
    flex-direction: column;
  }

  .partner-logo-card {
    width: 100%;
    max-width: 340px;
  }
}

/* ── Page intro ── */
.svcpage-lead {
  font-family: var(--knowza-font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.85;
  color: var(--knowza-muted);
  margin: 0;
}

/* Reuse svc-tile but left-align on this page */
.svc-tile--link .svc-tile-desc {
  font-family: var(--knowza-font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--knowza-muted);
  margin: 0 0 1rem;
  flex: 1;
}

/* ── Service detail section ── */
.svc-detail {
  padding-block: clamp(3.5rem, 7vw, 5rem);
  background: #fff;
}

/* Back button */
.svc-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--knowza-font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  background: rgba(7, 119, 189, 0.06);
  border: 1px solid rgba(7, 119, 189, 0.18);
  border-radius: 50rem;
  padding: 0.5rem 1.125rem 0.5rem 0.875rem;
  cursor: pointer;
  margin-bottom: 2.5rem;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.svc-back-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

@media (hover: hover) {
  .svc-back-btn:hover {
    background: rgba(7, 119, 189, 0.12);
    border-color: rgba(7, 119, 189, 0.3);
    transform: translateX(-3px);
  }
}

/* Eyebrow row */
.svc-detail-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}

.svc-detail-icon-wrap {
  font-size: 1.2em;
  font-weight: 600;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 0.75rem;
  background: rgba(7, 119, 189, 0.08);
  border: 1px solid rgba(7, 119, 189, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--knowza-blue);
}

.svc-detail-icon-wrap svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Title & text */
.svc-detail-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--knowza-black);
  margin: 0 0 0rem;
}

.svc-detail-lead {
  font-family: var(--knowza-font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.85;
  color: var(--knowza-black);
  margin: 0 0 1.125rem;
  border-left: 3px solid var(--knowza-blue);
  padding-left: 1.25rem;
}

.svc-detail-body {
  font-family: var(--knowza-font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.85;
  color: var(--knowza-black);
  margin: 0 0 1rem;
}

.svc-detail-subheading {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--knowza-black);
  margin: 2.5rem 0 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--knowza-border-light);
}

/* ── What We Offer list ── */
.svc-offer-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.svc-offer-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--knowza-border-light);
  transition: transform 0.2s ease;
}

.svc-offer-item:first-child {
  padding-top: 0;
}

.svc-offer-item:last-child {
  border-bottom: none;
}

@media (hover: hover) {
  .svc-offer-item:hover {
    transform: translateX(4px);
  }

  .svc-offer-item:hover .svc-offer-icon {
    background: var(--knowza-blue);
    color: #fff;
    border-color: var(--knowza-blue);
  }
}

.svc-offer-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 0.625rem;
  background: rgba(7, 119, 189, 0.06);
  border: 1px solid rgba(7, 119, 189, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--knowza-blue);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.svc-offer-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.svc-offer-title {
  font-family: var(--knowza-font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--knowza-black);
  margin: 0 0 0.3rem;
  letter-spacing: -0.01em;
}

.svc-offer-desc {
  font-family: var(--knowza-font-body);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--knowza-black);
  margin: 0;
}

/* ── Sidebar ── */
.svc-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 50px;
}



.svc-sidebar-card {
  background: #f8fafc;
  border: 1px solid var(--knowza-border-light);
  border-radius: 1rem;
  padding: 1.75rem;
}

.svc-sidebar-heading {
  font-family: var(--knowza-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  margin: 0 0 1.25rem;
}

.svc-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.svc-sidebar-list li {
  font-family: var(--knowza-font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--knowza-black);
  padding-left: 1.125rem;
  position: relative;
  line-height: 1.55;
}

.svc-sidebar-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--knowza-blue);
  flex-shrink: 0;
}

/* CTA card */
.svc-sidebar-cta {
  background: var(--knowza-blue);
  border-radius: 1rem;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.svc-sidebar-cta-title {
  font-family: var(--knowza-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -0.02em;
}

.svc-sidebar-cta-body {
  font-family: var(--knowza-font-body);
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

.svc-sidebar-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--knowza-font-display);
  font-size: 0.7125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--knowza-blue);
  background: #fff;
  border-radius: 50rem;
  padding: 0.75rem 1.375rem;
  transition: background 0.2s ease, transform 0.2s ease;
  align-self: flex-start;
}

@media (hover: hover) {
  .svc-sidebar-cta-btn:hover {
    background: rgba(255, 255, 255, 0.88);
    transform: translateY(-2px);
    color: var(--knowza-blue-dark);
  }
}

html {
  scroll-behavior: smooth;
}

.svc-detail {
  scroll-margin-top: 100px;
}


/* ── Services Hero ── */
.svc-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: min(60vh, 550px);
}

.svc-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #04131f;
  background-image: url('assets/images/SS2.jpg');
  background-position: 50% 40%;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (min-width: 992px) {
  .svc-hero-bg {
    background-attachment: fixed;
  }
}

.svc-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(170deg,
      rgba(4, 14, 26, 0.88) 0%,
      rgba(7, 80, 130, 0.38) 50%,
      rgba(4, 15, 28, 0.96) 100%);
  pointer-events: none;
}

.svc-hero-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 90% at 50% 50%,
      transparent 40%,
      rgba(3, 10, 20, 0.55) 100%);
}

.svc-hero-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(9rem, 14vw, 9rem);
  padding-bottom: clamp(2rem, 14vw, 2rem);
}

/* ── Eyebrow ── */
.svc-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-family: var(--knowza-font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--knowza-blue-light);
  margin-bottom: 0.5rem;
}

.svc-hero-eyebrow span {
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--knowza-gradient);
  opacity: 0.7;
  flex-shrink: 0;
}

/* ── Title ── */
.svc-hero-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.08;
  margin-bottom: 1.5rem;
}

/* ── Lead ── */
.svc-hero-lead {
  font-family: var(--knowza-font-body);
  font-size: var(--knowza-text-lg);
  font-weight: 400;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.7);
  max-width: 44rem;
  margin-bottom: 2.5rem;
}

/* ── Actions ── */
.svc-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.svc-hero-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--knowza-font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.82) !important;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 50rem;
  padding: 0.875rem 2.25rem;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
  .svc-hero-ghost:hover {
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff !important;
    transform: translateY(-2px);
  }
}

/* ── Quick-links strip ── */
.svc-hero-strip {
  display: flex;
  align-items: stretch;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(4, 14, 26, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-inline: calc(-0.5 * (100vw - 100%));
  padding-inline: calc(0.5 * (100vw - 100%));
}

.svc-hero-strip-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1.125rem 1rem;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--knowza-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
  border-bottom: 2px solid transparent;
  justify-content: center;
}

@media (hover: hover) {
  .svc-hero-strip-item:hover {
    color: #fff;
    background: rgba(7, 119, 189, 0.15);
    border-bottom-color: var(--knowza-blue-light);
  }

  .svc-hero-strip-item:hover .svc-hero-strip-icon {
    background: var(--knowza-blue);
    border-color: var(--knowza-blue);
    color: #fff;
  }
}

.svc-hero-strip-icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.svc-hero-strip-icon svg {
  width: 15px;
  height: 15px;
  display: block;
}

.svc-hero-strip-arrow {
  width: 14px;
  height: 14px;
  opacity: 0.4;
  flex-shrink: 0;
  margin-left: auto;
}

.svc-hero-strip-sep {
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  align-self: stretch;
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
  .svc-hero-strip {
    flex-wrap: wrap;
  }

  .svc-hero-strip-item {
    flex: 0 0 50%;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .svc-hero-strip-sep {
    display: none;
  }

  .svc-hero-strip-arrow {
    margin-left: auto;
  }
}

@media (max-width: 575.98px) {
  .svc-hero-strip-item {
    flex: 0 0 100%;
  }

  .svc-hero-strip-item span {
    font-size: 0.875rem;
  }
}


.teams-knowza {
  background-color: #f8fafc;
}

/* ── Two-column grid ── */
.teams-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--knowza-border-light);
  border-radius: 1.25rem;
  overflow: hidden;
}

/* ── Each item ── */
.tc-item {
  padding: 2.25rem 2.5rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  position: relative;
  transition: background 0.22s ease;
}

/* Right column items get left border */
.tc-item:nth-child(even) {
  border-left: 1px solid var(--knowza-border-light);
}

/* All but last row get bottom border */
.tc-item:not(:nth-last-child(-n+2)) {
  border-bottom: 1px solid var(--knowza-border-light);
}

/* Blue left accent on hover */
.tc-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2rem;
  bottom: 2rem;
  width: 3px;
  background: var(--knowza-gradient);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.tc-item:nth-child(even)::before {
  left: -1px;
}

@media (hover: hover) {
  .tc-item:hover {
    background: #f8fafc;
  }

  .tc-item:hover::before {
    opacity: 1;
  }

  .tc-item:hover .tc-icon {
    background: var(--knowza-blue);
    color: #fff;
    border-color: var(--knowza-blue);
    box-shadow: 0 0.35rem 1rem rgba(7, 119, 189, 0.3);
  }

  .tc-item:hover .tc-title {
    color: var(--knowza-blue);
  }
}

/* ── Header row ── */
.tc-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* ── Icon ── */
.tc-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 0.875rem;
  border: 1px solid var(--knowza-border-light);
  background: rgba(7, 119, 189, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--knowza-blue);
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.tc-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* ── Header text ── */
.tc-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.tc-num {
  font-family: var(--knowza-font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--knowza-blue);
  opacity: 0.5;
}

.tc-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--knowza-black);
  margin: 0;
  transition: color 0.22s ease;
}

/* ── Description ── */
.tc-desc {
  font-family: var(--knowza-font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--knowza-muted);
  margin: 0;
  flex: 1;
}

/* ── Tags ── */
.tc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--knowza-border-light);
}

.tc-tag {
  font-family: var(--knowza-font-display);
  font-size: 0.6375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  background: rgba(7, 119, 189, 0.06);
  border: 1px solid rgba(7, 119, 189, 0.15);
  padding: 0.22rem 0.65rem;
  border-radius: 50rem;
  white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
  .teams-two-col {
    grid-template-columns: 1fr;
  }

  .tc-item:nth-child(even) {
    border-left: none;
    border-top: 1px solid var(--knowza-border-light);
  }

  .tc-item:not(:last-child) {
    border-bottom: 1px solid var(--knowza-border-light);
  }

  .tc-item:nth-child(even)::before {
    left: 0;
  }
}

.fa-solid {
  display: flex !important;
  justify-content: center;
}


/* ── Accent / Inverted Team Card ── */
.tc-item.tc-item--accent {
  background: var(--knowza-blue);
  color: #fff;
  border-color: transparent;
}

/* Remove divider borders */
.tc-item.tc-item--accent,
.tc-item.tc-item--accent:nth-child(even),
.tc-item.tc-item--accent:not(:nth-last-child(-n+2)) {
  border-left: none;
  border-bottom: none;
}

/* Accent line becomes white */
.tc-item.tc-item--accent::before {
  background: rgba(255, 255, 255, 0.9);
}

/* White icon container */
.tc-item.tc-item--accent .tc-icon {
  background: #fff;
  color: var(--knowza-blue);
  border-color: #fff;
  box-shadow: none;
}

/* White typography */
.tc-item.tc-item--accent .tc-num,
.tc-item.tc-item--accent .tc-title,
.tc-item.tc-item--accent .tc-desc {
  color: #fff;
}

.tc-item.tc-item--accent .tc-num {
  opacity: 0.65;
}

/* White divider */
.tc-item.tc-item--accent .tc-tags {
  border-top-color: rgba(255, 255, 255, 0.16);
}

/* Inverted tags */
.tc-item.tc-item--accent .tc-tag {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Hover */
@media (hover: hover) {

  .tc-item.tc-item--accent:hover {
    background: #0668a7;
  }

  .tc-item.tc-item--accent:hover .tc-icon {
    background: transparent;
    color: #fff;
    border-color: #fff;
    box-shadow: 0 0.35rem 1rem rgba(255, 255, 255, 0.12);
  }

  .tc-item.tc-item--accent:hover .tc-title {
    color: #fff;
  }
}


.svc-scroll-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 50%;
  background: var(--knowza-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 10px 30px rgba(7, 119, 189, 0.28);

  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease,
    background 0.2s ease;
}

.svc-scroll-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.svc-scroll-top svg {
  width: 24px;
  height: 24px;
}

@media (hover: hover) {
  .svc-scroll-top:hover {
    background: var(--knowza-blue-dark);
    transform: translateY(-4px);
  }
}

@media (max-width: 575.98px) {
  .svc-scroll-top {
    width: 52px;
    height: 52px;
    right: 1rem;
    bottom: 1rem;
  }
}


/* SECTION */
.svc-pill-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
}

/* PILL */
.svc-pill {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 0.7rem;

  padding: 0.8rem 1.15rem;

  border-radius: 999px;

  background: #0777bd0f;

  border: 1px solid rgba(7, 119, 189, 0.12);

  color: var(--knowza-blue);

  text-decoration: none;

  font-family: var(--knowza-font-body);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;

  box-shadow:
    0 0.25rem 1.2rem rgba(15, 29, 55, 0.04);

  overflow: hidden;
}

/* subtle glow */
.svc-pill::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(135deg,
      rgba(42, 168, 230, 0.08),
      rgba(7, 119, 189, 0.02));

  opacity: 0;

  transition: opacity 0.2s ease;
}

/* HOVER */
@media (hover: hover) {

  .svc-pill:hover {
    background: var(--knowza-blue);
    color: #fff;

    border-color: transparent;

    box-shadow:
      0 1rem 2.5rem rgba(7, 119, 189, 0.25);
  }

  .svc-pill:hover::before {
    opacity: 1;
  }

  .svc-pill:hover .svc-pill-icon {
    background: var(--knowza-blue);
    color: #fff;
  }
}

/* ICON */
.svc-pill-icon {
  position: relative;
  z-index: 1;

  width: 2rem;
  height: 2rem;

  border-radius: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background:
    rgba(7, 119, 189, 0.08);

  border:
    1px solid rgba(7, 119, 189, 0.12);

  color: var(--knowza-blue);

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;

  flex-shrink: 0;
}

.svc-pill-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* TEXT */
.svc-pill-text {
  position: relative;
  z-index: 1;

  white-space: nowrap;

  line-height: 1;
}

/* ACTIVE / FEATURED */
.svc-pill--active {
  background: var(--knowza-blue);
  color: #fff;

  border-color: transparent;

  box-shadow:
    0 1rem 2.5rem rgba(7, 119, 189, 0.25);
}

.svc-pill--active .svc-pill-icon {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* MOBILE */
@media (max-width: 767px) {

  .svc-pill-wrap {
    gap: 0.7rem;
  }

  .svc-pill {
    width: 100%;
    justify-content: flex-start;

    padding: 0.9rem 1rem;

    border-radius: 1rem;
  }

  .svc-pill-text {
    white-space: normal;
  }
}


/* ═══════════════════════════════════════════════════════════
   PLATFORM SOLUTIONS — LMS / VLE / CRM cards
═══════════════════════════════════════════════════════════ */
.platform-grid-knowza {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.platform-card-knowza {
  background: #fff;
  border: 1px solid var(--knowza-border-light);
  border-radius: 1.25rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {
  .platform-card-knowza:hover {
    transform: translateY(-5px);
    box-shadow: 0 1.25rem 3rem rgba(7, 119, 189, 0.12);
  }
}

.platform-card-header-knowza {
  background: #f8fafc;
  padding: 1.5rem 1.5rem 1.25rem;
}

.platform-card-header-knowza-blue {
  background: #0d3a5c;
  color: white;
}

.platform-card-acronym-knowza {

  font-size: clamp(2.2rem, 1.8rem + 1.5vw, 3.25rem);
  font-weight: 800;
  color: #0d3a5c;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
}

.platform-card-acronym-knowza-white {
  font-size: clamp(2.2rem, 1.8rem + 1.5vw, 3.25rem);
  font-weight: 800;

  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
  color: #ffffff;
}

.platform-card-subtitle-knowza {

  font-size: 0.825rem;
  font-weight: 700;
  color: var(--knowza-black);
  line-height: 1.35;
  margin: 0;
}

.platform-card-subtitle-knowza-white {
  font-size: 0.825rem;
  font-weight: 700;

  line-height: 1.35;
  margin: 0;
  color: white;

}

.platform-card-body-knowza {
  background: #f8fafc;
  padding: 1.25rem 1.5rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.platform-card-body-knowza-blue {

  background: #0d3a5c;
}

.platform-card-desc-knowza {

  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.7;
  color: #374151;
  margin: 0 0 1rem;
}

.platform-card-desc-knowza-white {
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.7;

  margin: 0 0 1rem;
  color: white;
}

.platform-card-list-knowza {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: auto;
}

.platform-card-list-knowza-white {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: auto;
}

.platform-card-list-knowza li {

  font-size: 0.875rem;
  font-weight: 400;
  color: #374151;
  line-height: 1.55;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.platform-card-list-knowza-white li {

  font-size: 0.875rem;
  font-weight: 400;

  line-height: 1.55;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;

  color: white;

}

.platform-card-list-knowza li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--knowza-blue);
  border-radius: 50%;
  margin-top: 0.45rem;
  flex-shrink: 0;
}

.platform-card-list-knowza-white li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  margin-top: 0.45rem;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 900px) {
  .platform-grid-knowza {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 600px) and (max-width: 900px) {
  .platform-grid-knowza {
    grid-template-columns: repeat(2, 1fr);
  }

  .platform-card-knowza:last-child {
    grid-column: 1 / -1;
  }
}

/* ═══════════════════════════════════════════════════════════
   ARTWORK & DESIGN — table layout
═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════ */
.artwork-table-knowza {
  width: 100%;
  /* FIX: Change collapse to separate and remove spacing */
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.875rem;
  overflow: hidden;
  /* Optional: adds a subtle outer border if you want the whole container outlined */
  border: 1px solid rgba(0, 0, 0, 0.5);
}

/* Base row styles & entrance animation setup */
.artwork-table-knowza tr {
  opacity: 0;
  transform: translateY(15px);
  animation: tableRowFadeIn 0.6s ease forwards;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* FIX: Apply horizontal row borders to the cells (td) instead of the tr, 
   as tr borders behave inconsistently in separate mode */
.artwork-table-knowza tr td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Remove bottom border from the very last row */
.artwork-table-knowza tr:last-child td {
  border-bottom: none;
}

/* ─── ALTERNATING ROW COLORS ─── */

/* ODD ROWS (1st, 3rd): Light Blue */
.artwork-table-knowza tr:nth-child(odd) {
  background: #f8fafc;
}

/* Override the cell border for odd rows to ensure contrast against light blue */
.artwork-table-knowza tr:nth-child(odd) td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Text color adjustment for readability on light blue */
.artwork-table-knowza tr:nth-child(odd) .artwork-label-knowza span {
  color: var(--knowza-black);
}

.artwork-table-knowza tr:nth-child(odd) .artwork-desc-knowza {
  color: var(--knowza-black);
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  /* Darker border separator for light row */
}

/* EVEN ROWS (2nd, 4th): Dark Blue */
.artwork-table-knowza tr:nth-child(even) {
  background: #0d3a5c;
}

.artwork-table-knowza tr:nth-child(even) .artwork-label-knowza span {
  color: var(--knowza-border-light);
}

.artwork-table-knowza tr:nth-child(even) .artwork-desc-knowza {
  color: var(--knowza-border-light);
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}

/* ─── CELL PADDING & TYPOGRAPHY ─── */

.artwork-label-knowza {
  width: 34%;
  padding: 1.5rem 2rem;
  vertical-align: middle;
  text-align: center;
}

.artwork-label-knowza span {
  font-family: Montserrat, sans-serif;
  font-size: clamp(0.82rem, 0.75rem + 0.3vw, 0.95rem);
  font-weight: 700;
  line-height: 1.45;
}

.artwork-desc-knowza {
  padding: 1.5rem 2rem;
  vertical-align: middle;
  font-family: Montserrat, sans-serif;
  font-size: clamp(0.85rem, 0.8rem + 0.2vw, 0.9375rem);
  font-weight: 400;
  line-height: 1.7;
}

/* ─── HOVER ANIMATION ─── */
.artwork-table-knowza tr:hover {
  transform: scale(1.01);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  z-index: 2;
  position: relative;
}

/* Optional: Slight background shift on hover to make it feel responsive */


.artwork-table-knowza tr:nth-child(even):hover {
  background: var(--knowza-blue-dark);
}

/* ─── STAGGERED ENTRANCE DELAYS ─── */
.artwork-table-knowza tr:nth-child(1) {
  animation-delay: 0.1s;
}

.artwork-table-knowza tr:nth-child(2) {
  animation-delay: 0.2s;
}

.artwork-table-knowza tr:nth-child(3) {
  animation-delay: 0.3s;
}

.artwork-table-knowza tr:nth-child(4) {
  animation-delay: 0.4s;
}

@keyframes tableRowFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── RESPONSIVE (MOBILE) ─── */
@media (max-width: 640px) {

  .artwork-table-knowza,
  .artwork-table-knowza tbody,
  .artwork-table-knowza tr,
  .artwork-table-knowza td {
    display: block;
    width: 100%;
  }

  .artwork-table-knowza tr:hover {
    transform: none;
    /* Disable 3D scale on mobile for better scrolling */
  }

  .artwork-label-knowza {
    padding: 1.1rem 1.5rem 0.75rem;
    text-align: left;
    border-left: 3px solid #e07a5f;
  }

  .artwork-desc-knowza {
    padding: 0.75rem 1.5rem 1.25rem;
    border-left: 3px solid rgba(224, 122, 95, 0.2);
  }
}


/* ═══════════════════════════════════════════════════════════
   WEB DEVELOPMENT — numbered grid
═══════════════════════════════════════════════════════════ */
.webdev-knowza {
  background: #fff;
}

/* Override heading colour for dark bg */

.webdev-grid-knowza {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.625rem;
  overflow: hidden;
}

/* ==========================================
   1. BASE CARD BACKINGS (Dark vs Light)
   ========================================== */

/* Original Dark Theme */
.webdev-item-knowza {
  background: #0d3a5c;
  padding: 2.25rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  /* Animation & Transition Setup */
  opacity: 0;
  transform: translateY(20px);
  animation: webdevFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: background-color 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* New Inverted Grey Theme */
.webdev-item-knowza-grey {
  background: #f8fafc;
  /* Clean slate grey-white */
  padding: 2.25rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  /* Animation & Transition Setup */
  opacity: 0;
  transform: translateY(20px);
  animation: webdevFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: background-color 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ==========================================
   2. NESTED ELEMENTS (Shared & Varied Styles)
   ========================================== */

/* Large Numbers styling + Pop transition */
.webdev-num-knowza {
  font-family: var(--knowza-font-display);
  font-size: clamp(2rem, 1.6rem + 1.5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.25rem;
  display: block;
  transition: transform 0.4s ease, color 0.4s ease;

  /* Default color for dark card */
  color: var(--knowza-blue-light);
}

/* Invert the number color specifically when inside a grey card */
.webdev-item-knowza-grey .webdev-num-knowza {
  color: var(--knowza-blue-dark);
  /* Darker blue for contrast on light grey */
}

/* Item Titles */
.webdev-item-title-knowza {
  font-family: var(--knowza-font-display);
  font-size: clamp(0.85rem, 0.78rem + 0.3vw, 0.9375rem);
  font-weight: 700;
  line-height: 1.4;
  margin: 0;

  /* Default color for dark card */
  color: #fff;
}

/* Invert the title color when inside a grey card */
.webdev-item-knowza-grey .webdev-item-title-knowza {
  color: var(--knowza-black);
}

/* Item Descriptions */
.webdev-item-desc-knowza {
  font-family: var(--knowza-font-body);
  font-size: clamp(0.85rem, 0.8rem + 0.2vw, 0.9375rem);
  font-weight: 400;
  line-height: 1.7;
  margin: 0;

  /* Default color for dark card */
  color: var(--knowza-border-light);
}

/* Invert the description color when inside a grey card */
.webdev-item-knowza-grey .webdev-item-desc-knowza {
  color: #475569;
  /* Using a dark slate grey for softer, readable body text */
}


/* ==========================================
   3. HOVER EFFECTS (Media Gated)
   ========================================== */
@media (hover: hover) {

  /* --- Dark Theme Hover --- */
  .webdev-item-knowza:hover {
    background: #086dae;
    /* Subtle shift slightly lighter than blue-dark */
    transform: translateY(-4px);
  }

  .webdev-item-knowza:hover .webdev-num-knowza {
    transform: scale(1.08) translateX(2px);
    color: #fff;
    /* Number turns white to pop on bright blue */
  }

  /* --- Grey Theme Hover --- */
  .webdev-item-knowza-grey:hover {
    background: #f1f5f9;
    /* Subtle shift to a slightly darker grey background */
    transform: translateY(-4px);
  }

  .webdev-item-knowza-grey:hover .webdev-num-knowza {
    transform: scale(1.08) translateX(2px);
    color: var(--knowza-blue-light);
    /* Number brightens up to highlight the step */
  }
}

/* ─── STAGGERED ENTRANCE DELAYS ─── */
.webdev-item-knowza:nth-child(1) {
  animation-delay: 0.1s;
}

.webdev-item-knowza:nth-child(2) {
  animation-delay: 0.2s;
}

.webdev-item-knowza:nth-child(3) {
  animation-delay: 0.3s;
}

.webdev-item-knowza:nth-child(4) {
  animation-delay: 0.4s;
}

/* Add more lines if you have 5 or 6 items in your grid */

@keyframes webdevFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── RESPONSIVE (MOBILE) ─── */
@media (max-width: 640px) {
  .webdev-grid-knowza {
    grid-template-columns: 1fr;
  }

  /* Disable hover lift on mobile to keep scrolling smooth */
  .webdev-item-knowza:hover {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   DIGITAL MARKETING — acronym grid
═══════════════════════════════════════════════════════════ */
/* ==========================================================================
   DIGITAL MARKETING — Acronym Grid
   ========================================================================== */

.digmkt-grid-knowza {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(7, 119, 189, 0.15);
  border: 1px solid rgba(7, 119, 189, 0.15);
  border-radius: 0.75rem;
  overflow: hidden;
}

/* --- Base Dark Item --- */
.digmkt-item-knowza {
  background: #0d3a5c;
  padding: 2rem 1.75rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: relative;

  /* Entrance Animation Baseline */
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  animation: digmktFadeIn 0.65s cubic-bezier(0.25, 1, 0.5, 1) forwards;

  /* Interactive Transitions */
  transition:
    background-color 0.3s ease,
    transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.3s ease;
}

/* --- Base Grey Item (Inverted Theme) --- */
.digmkt-item-knowza-grey {
  background: #f8fafc;
  /* Crisp, premium slate-white background */
  padding: 2rem 1.75rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: relative;

  /* Entrance Animation Baseline */
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  animation: digmktFadeIn 0.65s cubic-bezier(0.25, 1, 0.5, 1) forwards;

  /* Interactive Transitions */
  transition:
    background-color 0.3s ease,
    transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.3s ease;
}

/* --- Typography Elements --- */
.digmkt-acronym-knowza {
  display: block;
  font-family: var(--knowza-font-display);
  font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.3rem;
  transform-origin: left center;
  transition: transform 0.3s ease, color 0.3s ease;

  /* Dark theme default color */
  color: var(--knowza-blue-light);
}

/* Contextual color rule for the inverted grey acronym */
.digmkt-item-knowza-grey .digmkt-acronym-knowza {
  color: #0d3a5c;
  /* Dark slate blue for clean, high-contrast separation */
}

.digmkt-item-title-knowza {
  font-family: var(--knowza-font-display);
  font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.9rem);
  font-weight: 700;
  line-height: 1.4;
  margin: 0;

  /* Dark theme default color */
  color: #fff;
}

/* Contextual color rule for the inverted grey title */
.digmkt-item-knowza-grey .digmkt-item-title-knowza {
  color: var(--knowza-black);
}

.digmkt-item-desc-knowza {
  font-family: var(--knowza-font-body);
  font-size: clamp(0.83rem, 0.78rem + 0.2vw, 0.9375rem);
  font-weight: 400;
  line-height: 1.7;
  margin: 0.1rem 0 0;
  transition: color 0.3s ease;

  /* Dark theme default color */
  color: #a8c8de;
}

/* Contextual color rule for the inverted grey description */
.digmkt-item-knowza-grey .digmkt-item-desc-knowza {
  color: #64748b;
  /* Mid-tone slate grey for clear hierarchy */
}


/* ==========================================================================
   ─── HOVER INTERACTIONS ───
   ========================================================================== */
@media (hover: hover) {

  /* --- Dark Theme Hover Behavior --- */
  .digmkt-item-knowza:hover {
    background: var(--knowza-blue-dark);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    z-index: 2;
  }

  .digmkt-item-knowza:hover .digmkt-acronym-knowza {
    transform: scale(1.06);
    color: #fff;
  }

  .digmkt-item-knowza:hover .digmkt-item-desc-knowza {
    color: var(--knowza-border-light);
  }

  /* --- Grey Theme Hover Behavior --- */
  .digmkt-item-knowza-grey:hover {
    background: #f1f5f9;
    /* Shifts smoothly to a slightly deeper grey shade */
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
    /* Sophisticated, soft drop-shadow */
    z-index: 2;
  }

  .digmkt-item-knowza-grey:hover .digmkt-acronym-knowza {
    transform: scale(1.06);
    color: var(--knowza-blue-light);
    /* Pops bright blue to isolate user focus */
  }

  .digmkt-item-knowza-grey:hover .digmkt-item-desc-knowza {
    color: var(--knowza-black);
    /* Steps up readability completely on hover */
  }
}

/* ─── STAGGERED MATRIX DELAYS (Top-Left to Bottom-Right Cascade) ─── */
.digmkt-item-knowza:nth-child(1) {
  animation-delay: 0.05s;
}

.digmkt-item-knowza:nth-child(2) {
  animation-delay: 0.12s;
}

.digmkt-item-knowza:nth-child(3) {
  animation-delay: 0.19s;
}

.digmkt-item-knowza:nth-child(4) {
  animation-delay: 0.26s;
}

.digmkt-item-knowza:nth-child(5) {
  animation-delay: 0.33s;
}

.digmkt-item-knowza:nth-child(6) {
  animation-delay: 0.40s;
}

@keyframes digmktFadeIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ─── RESPONSIVE (TABLET & MOBILE) ─── */
@media (max-width: 768px) {
  .digmkt-grid-knowza {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .digmkt-grid-knowza {
    grid-template-columns: 1fr;
  }

  /* Strip translation effects on mobile devices to prevent layout jarring during fast scrolls */
  .digmkt-item-knowza:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   CTA BANNER — hero-matched style
═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   CTA BANNER — hero-matched style
═══════════════════════════════════════════════════════════ */
.svc-cta-banner {
  position: relative;
  overflow: hidden;
  background-color: #04131f;
  text-align: center;

  /* ─── Box Squeezing Controls (Decreased) ─── */
  max-width: 960px;
  /* Reduced from 1140px to trim layout width */
  margin: 3.5rem auto;
  /* Reduced from 5rem to tighten page flow */
  border-radius: 1rem;
  /* Refined from 1.25rem to match new scales */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);

  /* Thinned down top padding profiles */
  padding-top: clamp(2.5rem, 4.5vw, 3.5rem);
  /* Reduced from clamp(3.5rem, 6vw, 5rem) */
}

.svc-cta-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(170deg,
      rgba(4, 14, 26, 0.88) 0%,
      rgba(7, 80, 130, 0.38) 50%,
      rgba(4, 15, 28, 0.96) 100%);
  pointer-events: none;
}

.svc-cta-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 90% at 50% 50%,
      transparent 40%,
      rgba(3, 10, 20, 0.55) 100%);
}

.svc-cta-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  /* Snugged down from 680px for a tighter frame */
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.svc-cta-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.35rem);
  /* Reduced maximum header cap from 2.8rem */
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.12;
  /* Slightly expanded for dynamic readability at smaller scales */
  color: #fff;
  margin: 0 0 1rem;
  /* Reduced bottom gap from 1.25rem */
}

.svc-cta-title em {
  font-style: normal;
  color: var(--knowza-blue-light);
}

.svc-cta-lead {
  font-family: var(--knowza-font-body);
  font-size: 1rem;
  /* Changed from absolute large variable to balanced base size */
  font-weight: 400;
  line-height: 1.65;
  /* Tightened down line height from 1.8 */
  color: rgba(255, 255, 255, 0.7);
  max-width: 38rem;
  /* Snugged down text boundary from 44rem */
  margin: 0 auto 1.75rem;
  /* Significantly reduced bottom margin from 2.5rem */
}

.svc-cta-url {
  margin: 0;
  font-family: var(--knowza-font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
}

.svc-cta-url a {
  color: var(--knowza-blue-light);
  text-decoration: none;
}

/* ── Stat strip (Locks perfectly to bottom of the new box shape) ── */
.svc-cta-strip {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(4, 14, 26, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.svc-cta-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  padding-block: 1rem;
  /* Trimmed structural padding from 1.25rem */
}

.svc-cta-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 2rem;
  /* Compressed lateral widths from 2.5rem */
}

.svc-cta-stat-num {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.35rem);
  /* Scaled down slightly from 1.5rem max */
  font-weight: 700;
  color: var(--knowza-blue-light);
  line-height: 1;
}

.svc-cta-stat-label {
  font-family: var(--knowza-font-display);
  font-size: 0.65rem;
  /* Shifted slightly down from 0.68rem */
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.25rem;
}

.svc-cta-strip-divider {
  width: 1px;
  height: 1.75rem;
  /* Trimmed divider height from 2rem to match */
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

/* ─── Box Responsiveness Safeguards ─── */
@media (max-width: 1200px) {
  .svc-cta-banner {
    margin-inline: 1.5rem;
  }
}

@media (max-width: 560px) {
  .svc-cta-banner {
    margin: 2.5rem 1rem;
    /* Tighter gutters on mobile frames */
    border-radius: 0.75rem;
  }

  .svc-cta-strip-divider {
    display: none;
  }

  .svc-cta-stat {
    padding: 0.6rem 1.25rem;
  }

  .svc-cta-strip-inner {
    gap: 0;
  }
}


/* ═══════════════════════════════════════════════════════════
   PORTFOLIO PAGE
═══════════════════════════════════════════════════════════ */

/* ── Inner-page hero ── */
.portfolio-page-hero {
  background: #04131f;
  position: relative;
  overflow: hidden;
  padding: clamp(10rem, 12vw, 4rem) 0 clamp(4rem, 6vw, 4rem);
  text-align: center;
}

.portfolio-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(42, 168, 230, 0.10) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}

.portfolio-page-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(180deg, transparent 0%, #04131f 100%);
  pointer-events: none;
}

.portfolio-page-hero-inner {
  position: relative;
  z-index: 2;
}

.portfolio-page-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--knowza-font-ui);
  /* font-size: 0.6875rem; */
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--knowza-blue-light);
  margin-bottom: 0.2rem;
  justify-content: center;
}

/* .portfolio-page-hero-eyebrow::before,
.portfolio-page-hero-eyebrow::after {
  content: "";
  display: block;
  height: 1px;
  width: 2.5rem;
  background: var(--knowza-gradient);
  opacity: 0.75;
} */

.portfolio-page-hero-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: #fff;
  margin-bottom: 1.25rem;
}

.portfolio-page-hero-lead {
  font-family: var(--knowza-font-body);
  font-size: clamp(0.9rem, 0.82rem + 0.3vw, 1.05rem);
  font-weight: 400;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.62);
  max-width: 50rem;
  margin: 0 auto;
}

/* ── Filter tabs ── */
.pf-filter-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.5rem;
  margin-bottom: 3rem;
}

.pf-tab {
  font-family: var(--knowza-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--knowza-muted);
  background: #f5f8fb;
  border: 1.5px solid var(--knowza-border-light);
  border-radius: 50rem;
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.pf-tab:hover {
  background: rgba(7, 119, 189, 0.06);
  border-color: rgba(7, 119, 189, 0.3);
  color: var(--knowza-blue);
}

.pf-tab.is-active {
  background: var(--knowza-blue);
  border-color: var(--knowza-blue);
  color: #fff;
}

/* ── Portfolio grid ── */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 991.98px) {
  .pf-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .pf-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Card ── */
.pf-card {
  background: #fff;
  border: 1px solid var(--knowza-border-light);
  border-radius: 1.25rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  animation: pf-in 0.35s ease both;
}

@keyframes pf-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pf-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 1.25rem 3rem rgba(7, 119, 189, 0.12), 0 0 0 1px rgba(7, 119, 189, 0.12);
  border-color: rgba(7, 119, 189, 0.2);
}

/* gradient top line on hover */
.pf-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--knowza-gradient);
  border-radius: 1.25rem 1.25rem 0 0;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.pf-card:hover::before {
  opacity: 1;
}

/* ── Logo panel (replaces thumbnail) ── */
.pf-card-visual {
  position: relative;
  background: #f0f4f8;
  max-height: 240px;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background 0.28s ease;
}

.pf-card:hover .pf-card-visual {
  background: #e8f0f8;
}

/* subtle radial glow */
.pf-card-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(7, 119, 189, 0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}

.pf-card:hover .pf-card-visual::after {
  opacity: 1;
}

/* tag strip overlay at bottom of visual — mirrors Neon Labs */
.pf-card-tags {
  position: absolute;
  bottom: 0.85rem;
  left: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  z-index: 2;
}

.pf-card-tag {
  font-family: var(--knowza-font-display);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--knowza-blue);
  border-radius: 50rem;
  padding: 0.22rem 0.6rem;
  white-space: nowrap;
}

.pf-card-logo {
  max-height: 68%;
  max-width: 68%;
  width: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: grayscale(15%);
  transition: filter 0.28s ease, transform 0.28s ease;
}

.pf-card:hover .pf-card-logo {
  filter: none;
  transform: scale(1.05);
}

/* monogram fallback */
.pf-card-mono {
  width: 68px;
  height: 68px;
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--knowza-blue) 0%, var(--knowza-blue-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--knowza-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
  transition: transform 0.28s ease;
}

.pf-card:hover .pf-card-mono {
  transform: scale(1.06);
}

/* ── Card body ── */
.pf-card-body {
  padding: 1.25rem 1.375rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--knowza-border-light);
}

.pf-card-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(0.9rem, 0.82rem + 0.22vw, 1.05rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--knowza-black);
  margin: 0 0 0.25rem;
  line-height: 1.3;
}

.pf-card-client {
  font-family: var(--knowza-font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--knowza-muted);
  margin: 0 0 0.75rem;
}

.pf-card-desc {
  font-family: var(--knowza-font-body);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--knowza-muted);
  margin: 0 0 1.125rem;
  flex: 1;
}

.pf-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--knowza-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  text-decoration: none;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--knowza-border-light);
  transition: color 0.2s ease, gap 0.2s ease;
}

.pf-card-cta:hover {
  color: var(--knowza-blue-dark);
  gap: 0.6rem;
}

/* hidden state */
.pf-card.is-hidden {
  display: none;
}

/* empty state */
.pf-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 1rem;
  font-family: var(--knowza-font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--knowza-muted);
  display: none;
}



/* ═══════════════════════════════════════════════════════════
   CAREERS PAGE
═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   CAREERS PAGE — additional rules
═══════════════════════════════════════════════════════════ */

/* ── Teams grid ── */
.teams-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 991.98px) {
  .teams-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .teams-grid {
    grid-template-columns: 1fr;
  }
}

.team-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 1.375rem;
  background: #fff;
  border: 1px solid var(--knowza-border-light);
  border-radius: 1rem;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.team-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--knowza-gradient);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 2rem rgba(7, 119, 189, 0.1);
  border-color: rgba(7, 119, 189, 0.22);
}

.team-card:hover::before {
  opacity: 1;
}

.team-card-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 0.75rem;
  background: rgba(7, 119, 189, 0.07);
  border: 1px solid rgba(7, 119, 189, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--knowza-blue);
  transition: background 0.22s ease, color 0.22s ease;
}

.team-card-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.team-card:hover .team-card-icon {
  background: var(--knowza-blue);
  color: #fff;
}

.team-card-body {
  flex: 1;
  min-width: 0;
}

.team-card-title {
  font-family: var(--knowza-font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--knowza-black);
  margin: 0 0 0.3rem;
}

.team-card-desc {
  font-family: var(--knowza-font-body);
  font-size: 0.825rem;
  line-height: 1.6;
  color: var(--knowza-muted);
  margin: 0;
}

/* ── Culture banner ── */
.culture-banner {
  background: linear-gradient(135deg, #04131f 0%, #073456 55%, #0777bd 100%);
  border-radius: 1.5rem;
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
  position: relative;
  overflow: hidden;
}

.culture-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(42, 168, 230, 0.1) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

.culture-banner-inner {
  position: relative;
  z-index: 1;
}

.culture-banner-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 1rem;
}

.culture-banner-body {
  font-family: var(--knowza-font-body);
  font-size: clamp(0.88rem, 0.82rem + 0.2vw, 1rem);
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.72);
  max-width: 52rem;
  margin-bottom: 1.75rem;
}

.culture-banner-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--knowza-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--knowza-blue-light);
  border-bottom: 1px solid rgba(42, 168, 230, 0.4);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.culture-banner-link:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}

/* ── Application form ── */
.careers-form-wrap {
  background: #f8fafc;
  border: 1px solid var(--knowza-border-light);
  border-radius: 1.5rem;
  padding: clamp(2rem, 4vw, 3rem);
}

.careers-form-notice {
  background: rgba(7, 119, 189, 0.05);
  border: 1px solid rgba(7, 119, 189, 0.15);
  border-left: 3px solid var(--knowza-blue);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  font-family: var(--knowza-font-body);
  font-size: 0.825rem;
  line-height: 1.7;
  color: var(--knowza-muted);
  margin-bottom: 2rem;
}

.careers-form-notice strong {
  display: block;
  font-family: var(--knowza-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  margin-bottom: 0.35rem;
}

.careers-form-notice-alto {
  background: rgba(7, 119, 189, 0.05);
  border: 1px solid rgba(7, 119, 189, 0.15);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  font-family: var(--knowza-font-body);
  font-size: 0.825rem;
  line-height: 1.7;
  color: var(--knowza-muted);
  margin-bottom: 2rem;
  text-align: center;
}

.careers-form-notice-alto strong {
  text-align: center;
  display: block;
  font-family: var(--knowza-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  margin-bottom: 0.35rem;
}

/* ── Success state card ── */
.cf-success {
  display: none;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  padding: 0.5rem 0 2rem;
}

.cf-success.is-visible {
  display: flex;
  animation: cfSuccessIn 0.45s ease both;
}

@keyframes cfSuccessIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cf-success-card {
  width: 100%;
  max-width: 640px;
  background: #fff;
  border: 1px solid var(--knowza-border-light);
  border-radius: 1.25rem;
  padding: 2.5rem 2.25rem;
  text-align: center;
  box-shadow: 0 1rem 2.5rem rgba(7, 119, 189, 0.08);
  position: relative;
  overflow: hidden;
}

/* Gradient top accent — matches service tiles */
.cf-success-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--knowza-gradient);
}

/* Checkmark icon */
.cf-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--knowza-gradient);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 0.35rem 1rem rgba(7, 119, 189, 0.3);
}

.cf-success-icon svg {
  width: 28px;
  height: 28px;
}

/* Title */
.cf-success-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.15rem, 1rem + 0.45vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--knowza-black);
  margin: 0 0 1.25rem;
}

/* Body text */
.cf-success-body {
  font-family: var(--knowza-font-body);
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--knowza-muted);
  margin-bottom: 1.75rem;
}

.cf-success-body p {
  margin: 0 0 0.75rem;
}

.cf-success-body p:last-child {
  margin-bottom: 0;
}

.cf-success-lead {
  font-weight: 500;
  color: var(--knowza-black);
}

.cf-success-muted {
  font-size: 0.875rem;
  opacity: 0.85;
}

/* CTA button — matches Knowza pill buttons */
.cf-success-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--knowza-font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  padding: 0.9rem 2.25rem;
  border-radius: 50rem;
  background: linear-gradient(135deg, #2aa8e6 0%, #0777bd 55%, #065a91 100%);
  box-shadow: 0 0.35rem 1.25rem rgba(7, 119, 189, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.cf-success-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.55rem 1.75rem rgba(7, 119, 189, 0.45);
  filter: brightness(1.06);
  color: #fff;
}

@media (max-width: 575.98px) {
  .cf-success-card {
    padding: 2rem 1.5rem;
    border-radius: 1rem;
  }
}

.cf-group {
  margin-bottom: 1.25rem;
}

.cf-label {
  display: block;
  font-family: var(--knowza-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--knowza-black);
  margin-bottom: 0.45rem;
}

.cf-label span {
  color: var(--knowza-blue);
  margin-left: 1px;
}

.cf-input,
.cf-select,
.cf-textarea {
  width: 100%;
  font-family: var(--knowza-font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--knowza-black);
  background: #fff;
  border: 1.5px solid var(--knowza-border-light);
  border-radius: 0.625rem;
  padding: 0.7rem 1rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.cf-input:focus,
.cf-select:focus,
.cf-textarea:focus {
  border-color: var(--knowza-blue);
  box-shadow: 0 0 0 3px rgba(7, 119, 189, 0.1);
}

.cf-input::placeholder,
.cf-textarea::placeholder {
  color: #b0bbc6;
}

.cf-textarea {
  resize: vertical;
  min-height: 90px;
}

.cf-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c757d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.cf-file-wrap {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1.5px dashed rgba(7, 119, 189, 0.3);
  border-radius: 0.625rem;
  transition: border-color 0.2s ease, background 0.2s ease;
  cursor: pointer;
}

.cf-file-wrap:hover {
  border-color: var(--knowza-blue);
  background: rgba(7, 119, 189, 0.03);
}

.cf-file-wrap svg {
  color: var(--knowza-blue);
  flex-shrink: 0;
}

.cf-file-label {
  font-family: var(--knowza-font-body);
  font-size: 0.85rem;
  color: var(--knowza-muted);
}

.cf-file-label strong {
  font-weight: 600;
  color: var(--knowza-blue);
}

.cf-file-wrap input[type="file"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cf-check-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem;
  background: #fff;
  border: 1.5px solid var(--knowza-border-light);
  border-radius: 0.75rem;
}

.cf-check-wrap input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 1px;
  accent-color: var(--knowza-blue);
  cursor: pointer;
}

.cf-check-text {
  font-family: var(--knowza-font-body);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--knowza-muted);
}

.cf-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--knowza-font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #2aa8e6 0%, #0777bd 55%, #065a91 100%);
  border: none;
  border-radius: 50rem;
  padding: 0.925rem 2.5rem;
  cursor: pointer;
  box-shadow: 0 0.35rem 1.25rem rgba(7, 119, 189, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.cf-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.55rem 1.75rem rgba(7, 119, 189, 0.45);
  filter: brightness(1.06);
}

.cf-success {
  display: none;
  /* background: rgba(10, 124, 66, 0.07);
  border: 1px solid rgba(10, 124, 66, 0.22);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  font-family: var(--knowza-font-body);
  font-size: 0.9rem;
  line-height: 1.7;
  color: #0a7c42;
  margin-top: 1.5rem;
  align-items: flex-start;
  gap: 0.75rem; */
}

.cf-success.is-visible {
  display: flex;
}

/* ── Footer speculative CTA ── */
.careers-footer-cta {
  background: #f8fafc;
  border: 1px solid var(--knowza-border-light);
  border-radius: 1.5rem;
  padding: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.careers-footer-cta-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--knowza-black);
  margin-bottom: 0.3rem;
}

.careers-footer-cta-sub {
  font-family: var(--knowza-font-body);
  font-size: 0.9rem;
  color: var(--knowza-muted);
  margin: 0;
}

.careers-footer-cta-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  gap: 0.55rem;
  font-family: var(--knowza-font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #2aa8e6 0%, #0777bd 55%, #065a91 100%);
  border: none;
  border-radius: 50rem;
  padding: 0.925rem 2.5rem;
  cursor: pointer;
  box-shadow: 0 0.35rem 1.25rem rgba(7, 119, 189, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.careers-footer-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.55rem 1.75rem rgba(7, 119, 189, 0.45);
  filter: brightness(1.06);
}

@media (max-width: 575.98px) {
  .careers-footer-cta {
    flex-direction: column;
    text-align: center;
  }
}


/* ═══════════════════════════════════════════════════════════
   CAREERS PAGE
═══════════════════════════════════════════════════════════ */

.careers-knowza {
  padding-block: clamp(3.5rem, 7vw, 5rem);
  background: #fff;
}

/* ── Table wrapper ── */
.careers-table-wrap {
  border: 1px solid var(--knowza-border-light);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 0.25rem 1.5rem rgba(7, 119, 189, 0.06);
}

/* ── Table ── */
.careers-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--knowza-font-body);
}

.careers-table thead tr {
  background: linear-gradient(90deg, var(--knowza-blue) 0%, var(--knowza-blue-light) 100%);
}

.careers-table thead th {
  font-family: var(--knowza-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  padding: 1rem 1.25rem;
  white-space: nowrap;
  border: none;
}

.careers-table thead th:first-child {
  border-radius: 0;
  width: 52px;
}

/* ── Body rows ── */
.careers-table tbody tr {
  border-bottom: 1px solid var(--knowza-border-light);
  transition: background 0.2s ease;
}

.careers-table tbody tr:last-child {
  border-bottom: none;
}

.careers-table tbody tr:nth-child(even) {
  background: #f8fafc;
}

.careers-table tbody tr:hover {
  background: rgba(7, 119, 189, 0.04);
}

.careers-table tbody td {
  padding: 1.125rem 1.25rem;
  vertical-align: middle;
  font-size: 0.9rem;
  color: var(--knowza-black);
  line-height: 1.5;
}

/* S.No column */
.careers-td-num {
  font-family: var(--knowza-font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--knowza-blue);
  text-align: center;
  width: 52px;
}

/* Title column */
.careers-td-title {
  font-family: var(--knowza-font-body);
  font-weight: 600;
  color: var(--knowza-black);
  min-width: 260px;
}

/* Posts column */
.careers-td-posts {
  text-align: center;
  font-weight: 500;
  color: var(--knowza-muted);
  white-space: nowrap;
}

/* Closing date */
.careers-td-date {
  white-space: nowrap;
  font-weight: 500;
  color: var(--knowza-muted);
  font-size: 0.85rem;
}

/* Status badge */
.careers-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--knowza-font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.75rem;
  border-radius: 50rem;
  white-space: nowrap;
}

.careers-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.careers-status--open {
  color: #0a7c42;
  background: rgba(10, 124, 66, 0.09);
  border: 1px solid rgba(10, 124, 66, 0.2);
}

.careers-status--open::before {
  background: #0a7c42;
}

.careers-status--closed {
  color: #b0001e;
  background: rgba(176, 0, 30, 0.07);
  border: 1px solid rgba(176, 0, 30, 0.18);
}

.careers-status--closed::before {
  background: #b0001e;
}

/* Apply button */
.careers-apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--knowza-font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--knowza-blue);
  border: 1.5px solid var(--knowza-blue);
  border-radius: 50rem;
  padding: 0.45rem 1.1rem;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.careers-apply-btn:hover {
  background: var(--knowza-blue);
  color: #fff;
  transform: translateY(-1px);
}

.careers-apply-btn--closed {
  color: var(--knowza-muted);
  border-color: var(--knowza-border-light);
  pointer-events: none;
  opacity: 0.55;
}

/* ── No openings state ── */
.careers-empty {
  text-align: center;
  padding: 4rem 1rem;
  font-family: var(--knowza-font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--knowza-muted);
}

/* ── Mobile: horizontal scroll ── */
@media (max-width: 767.98px) {
  .careers-table-wrap {
    border-radius: 0.875rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .careers-table thead th,
  .careers-table tbody td {
    padding: 0.875rem 1rem;
  }

  .careers-td-title {
    min-width: 200px;
  }
}



.culture-knowza {
  background-color: #f8fafc;
  position: relative;
  overflow: hidden;
}

.culture-knowza::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(7, 119, 189, 0.08) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}

.culture-knowza::after {
  content: "";
  position: absolute;
  top: 40%;
  left: 35%;
  transform: translate(-50%, -50%);
  width: 55%;
  height: 55%;
  background: radial-gradient(ellipse, rgba(7, 119, 189, 0.08) 0%, transparent 72%);
  pointer-events: none;
}

.culture-inner {
  position: relative;
  z-index: 1;
}

.culture-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--knowza-font-ui);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  margin-bottom: 0.25rem;
}


.culture-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--knowza-black);
  margin-bottom: 1.375rem;
}

.culture-title em {
  font-style: normal;
  background: linear-gradient(90deg, #0777bd 0%, #2aa8e6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.culture-body {
  font-family: var(--knowza-font-body);
  font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1.05rem);
  font-weight: 400;
  line-height: 1.85;
  color: #5f6b76;
  margin-bottom: 2.25rem;
  max-width: 38rem;
}

.culture-body strong {
  color: var(--knowza-black);
  font-weight: 600;
}

.culture-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--knowza-font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  padding: 0.9rem 2.25rem;
  border-radius: 50rem;
  background: linear-gradient(135deg, #2aa8e6 0%, #0777bd 55%, #065a91 100%);
  box-shadow: 0 0.35rem 1.25rem rgba(7, 119, 189, 0.2);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.culture-cta::after {
  content: "→";
  transition: transform 0.2s ease;
}

@media (hover: hover) {
  .culture-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.55rem 1.75rem rgba(7, 119, 189, 0.32);
    filter: brightness(1.05);
    color: #fff;
  }

  .culture-cta:hover::after {
    transform: translateX(4px);
  }
}

/* ==========================================================================
   CULTURE / VALUES — Clean Centered Grid
   ========================================================================== */

.culture-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: stretch;
}

/* ─────────────────────────────
   Card
───────────────────────────── */
.cv-card {
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;

  min-height: 210px;
  padding: 2rem 1.5rem;

  border-radius: 1.1rem;
  background: #ffffff;
  border: 1px solid rgba(7, 119, 189, 0.08);

  /* ── ADDED BASE SHADOW ── */
  /* Layer 1: Soft ambient sprawl, Layer 2: Subtle depth drop */
  box-shadow:
    0 4px 20px rgba(15, 29, 55, 0.04),
    0 8px 24px rgba(7, 119, 189, 0.1);

  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    background 0.28s ease;
}

/* hover */
@media (hover: hover) {
  .cv-card:hover {
    transform: translateY(-5px);
    border-color: rgba(7, 119, 189, 0.18);
    /* Elevates beautifully out of the base shadow smoothly */
    box-shadow: 0 1rem 2.5rem rgba(7, 119, 189, 0.08);
    background: #fcfeff;
  }

  .cv-card:hover .cv-icon {
    transform: scale(1.08);
    color: var(--knowza-blue);
  }

  .cv-card:hover .cv-label {
    color: var(--knowza-blue);
  }
}

/* ─────────────────────────────
   Icon (NO BOX)
───────────────────────────── */
.cv-icon {
  width: auto;
  height: auto;
  min-width: auto;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 0;
  border-radius: 0;

  color: var(--knowza-blue);

  transition:
    transform 0.28s ease,
    color 0.28s ease;
}

.cv-icon svg {
  width: 2.15rem;
  height: 2.2rem;
  display: block;
  stroke-width: 1.7;
}

/* ─────────────────────────────
   Label
───────────────────────────── */
.cv-label {
  font-family: var(--knowza-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.015em;

  color: var(--knowza-black);

  transition: color 0.28s ease;
}

/* ─────────────────────────────
   Responsive
───────────────────────────── */
@media (max-width: 991.98px) {
  .culture-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .culture-values-grid {
    grid-template-columns: 1fr;
  }

  .cv-card {
    min-height: 180px;
    padding: 1.75rem 1.25rem;
  }
}


.teams-hire-knowza {
  background-color: #fff;
}

.th-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.th-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--knowza-border-light);
  border-radius: 1.25rem;
  background: #fff;
  position: relative;
  transition: all 0.22s ease;
}

.th-row:first-child {
  border-top: 1px solid var(--knowza-border-light);
}

@media (hover: hover) {
  .th-row:hover {
    background: rgba(7, 119, 189, 0.025);
    /* padding-left: 1.25rem; */
    margin-left: -1.25rem;
    padding-right: 1.25rem;
    margin-right: -1.25rem;
  }

  .th-row:hover::before {
    opacity: 1;
  }

  .th-row:hover .th-num {
    color: var(--knowza-blue);
    opacity: 1;
  }

  .th-row:hover .th-icon-wrap {
    background: var(--knowza-blue);
    border-color: var(--knowza-blue);
    color: #fff;
  }

  .th-row:hover .th-title {
    color: var(--knowza-blue);
  }

  .th-row:hover .th-pill {
    background: rgba(7, 119, 189, 0.09);
    border-color: rgba(7, 119, 189, 0.22);
    color: var(--knowza-blue-dark);
  }
}

.th-aside {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.th-num {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.85rem, 1.5rem + 1vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--knowza-blue-dark);
  opacity: 1;
  line-height: 1;
  transition: color 0.22s ease, opacity 0.22s ease;
  user-select: none;
}

.th-body {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  min-width: 0;
}

.th-icon-wrap {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 0.875rem;
  border: 1px solid var(--knowza-border-light);
  background: #f5f8fb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--knowza-blue);
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.th-icon-wrap svg {
  width: 22px;
  height: 22px;
  display: block;
}

.th-text {
  min-width: 0;
}

.th-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(0.95rem, 0.88rem + 0.22vw, 1.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--knowza-black);
  margin: 0 0 0.2rem;
  white-space: nowrap;
  transition: color 0.22s ease;
}

.th-count {
  font-family: var(--knowza-font-body);
  font-size: 0.775rem;
  font-weight: 400;
  color: var(--knowza-muted);
}

.th-pills {
  grid-column: 1 / -1;
  justify-content: flex-start;
  padding-left: calc(4.5rem + 1.25rem);
  margin-top: 0.25rem;
}

.th-pill {
  font-family: var(--knowza-font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--knowza-blue);
  background: rgba(7, 119, 189, 0.06);
  border: 1px solid rgba(7, 119, 189, 0.14);
  padding: 0.28rem 0.75rem;
  border-radius: 50rem;
  white-space: nowrap;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

@media (max-width: 991.98px) {
  .th-list {
    grid-template-columns: 1fr;
  }

  .th-row {
    grid-template-columns: 3rem 1fr;
    grid-template-rows: auto auto;
    gap: 0.75rem 1rem;
  }

  .th-pills {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-left: calc(3rem + 1rem);
  }
}

@media (max-width: 575.98px) {
  .th-row {
    grid-template-columns: 2.25rem 1fr;
    gap: 0.6rem 0.75rem;
  }

  .th-pills {
    padding-left: calc(2.25rem + 0.75rem);
  }

  .th-title {
    white-space: normal;
  }
}


.appproc-knowza {
  background-color: #f5f8fb;
  position: relative;
}

.appproc-knowza::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(7, 119, 189, 0.055) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}

.appproc-track {
  position: relative;
}

@media (min-width: 1200px) {
  .appproc-track::before {
    content: "";
    position: absolute;
    top: 25px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(7, 119, 189, 0.3) 10%,
        rgba(7, 119, 189, 0.55) 50%,
        rgba(7, 119, 189, 0.3) 90%,
        transparent 100%);
    z-index: 0;
  }
}

@media (max-width: 1199.98px) {
  .appproc-track::before {
    display: none;
  }
}

.appproc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

@media (min-width: 576px) and (max-width: 1199.98px) {
  .appproc-item {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 1.25rem;
  }
}

.appproc-node {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--knowza-blue);
  box-shadow: 0 0 0 5px rgba(7, 119, 189, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--knowza-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--knowza-blue);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  margin-bottom: 1.5rem;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

@media (min-width: 576px) and (max-width: 1199.98px) {
  .appproc-node {
    margin-bottom: 0;
    margin-top: 0.2rem;
  }
}

@media (min-width: 1200px) {
  .appproc-node::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 1.5rem;
    background: linear-gradient(180deg, rgba(7, 119, 189, 0.4), transparent);
  }
}

.appproc-node--final {
  background: var(--knowza-blue);
  color: #fff;
  border-color: var(--knowza-blue);
  box-shadow: 0 0 0 5px rgba(7, 119, 189, 0.15), 0 0.35rem 1rem rgba(7, 119, 189, 0.28);
}

@media (hover: hover) {
  .appproc-item:hover .appproc-node {
    background: var(--knowza-blue);
    color: #fff;
    box-shadow: 0 0 0 7px rgba(7, 119, 189, 0.12), 0 0.35rem 1rem rgba(7, 119, 189, 0.28);
    transform: scale(1.08);
  }

  .appproc-item:hover .appproc-card:not(.appproc-card--accent) {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 2rem rgba(7, 119, 189, 0.1), 0 0 0 1px rgba(7, 119, 189, 0.1);
    border-color: rgba(7, 119, 189, 0.22);
  }

  .appproc-item:hover .appproc-card:not(.appproc-card--accent)::before {
    opacity: 1;
  }

  .appproc-item:hover .appproc-card:not(.appproc-card--accent) .appproc-icon {
    background: var(--knowza-blue);
    color: #fff;
    border-color: var(--knowza-blue);
  }

  .appproc-item:hover .appproc-card--accent {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 2rem rgba(6, 90, 145, 0.45);
    filter: brightness(1.06);
  }

  .appproc-item:hover .appproc-node--final {
    background: var(--knowza-blue-dark);
    border-color: var(--knowza-blue-dark);
  }
}

.appproc-card {
  background: #fff;
  border: 1px solid var(--knowza-border-light);
  border-radius: 1rem;
  padding: 1.5rem 1.375rem 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  position: relative;
  overflow: hidden;
  width: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.appproc-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--knowza-blue), var(--knowza-blue-light));
  border-radius: 1rem 1rem 0 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.appproc-card::after {
  content: attr(data-num);
  position: absolute;
  bottom: -1.25rem;
  right: 0.5rem;
  font-family: var(--knowza-font-display);
  font-size: 6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--knowza-blue);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
}

.appproc-card--accent {
  background: var(--knowza-blue-dark);
  border-color: transparent;
}

.appproc-card--accent::before {
  display: none;
}

.appproc-card--accent::after {
  color: rgba(255, 255, 255, 0.06);
  opacity: 1;
}

.appproc-card--accent .appproc-step-label {
  color: rgba(255, 255, 255, 0.5);
}

.appproc-card--accent .appproc-title {
  color: #fff;
}

.appproc-card--accent .appproc-desc {
  color: rgba(255, 255, 255, 0.7);
}

.appproc-card--accent .appproc-icon {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.appproc-card--accent .appproc-tag {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.appproc-icon {
  width: 38px;
  height: 38px;
  border-radius: 0.5625rem;
  background: rgba(7, 119, 189, 0.07);
  border: 1px solid rgba(7, 119, 189, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--knowza-blue);
  flex-shrink: 0;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.appproc-icon svg {
  width: 17px;
  height: 17px;
  display: block;
}

.appproc-step-label {
  font-family: var(--knowza-font-display);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  opacity: 0.75;
}

.appproc-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(0.88rem, 0.82rem + 0.2vw, 1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--knowza-black);
  margin: 0;
}

.appproc-desc {
  font-family: var(--knowza-font-body);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--knowza-muted);
  margin: 0;
  flex: 1;
}

.appproc-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--knowza-font-display);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  background: rgba(7, 119, 189, 0.06);
  border: 1px solid rgba(7, 119, 189, 0.14);
  padding: 0.22rem 0.65rem;
  border-radius: 50rem;
  align-self: center;
  margin-top: auto;
}

@media (min-width: 576px) and (max-width: 1199.98px) {
  .appproc-tag {
    align-self: flex-start;
  }
}

.appproc-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--knowza-font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  padding: 0.9rem 2.25rem;
  border-radius: 50rem;
  background: linear-gradient(135deg, #2aa8e6 0%, #0777bd 55%, #065a91 100%);
  box-shadow: 0 0.35rem 1.25rem rgba(7, 119, 189, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.appproc-cta::after {
  content: "→";
  transition: transform 0.2s ease;
}

@media (hover: hover) {
  .appproc-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.55rem 1.75rem rgba(7, 119, 189, 0.48);
    filter: brightness(1.07);
    color: #fff;
  }

  .appproc-cta:hover::after {
    transform: translateX(4px);
  }
}


/* ═══════════════════════════════════════════════════════════
   FAQs PAGE
═══════════════════════════════════════════════════════════ */

/* ── Category tabs (reuses .pf-tab shape, new context) ── */
.faq-filter-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 3rem;
}

/* ── FAQ group ── */
.faq-group {
  display: none;
}

.faq-group.is-active {
  display: block;
}

/* ── Accordion item ── */
.faq-item {
  border: 1px solid var(--knowza-border-light);
  border-radius: 0.875rem;
  background: #fff;
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.faq-item.is-open {
  border-color: rgba(7, 119, 189, 0.28);
  box-shadow: 0 0.4rem 1.25rem rgba(7, 119, 189, 0.07);
}

/* trigger button */
.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.faq-trigger-text {
  font-family: var(--knowza-font-display);
  font-size: clamp(0.875rem, 0.82rem + 0.18vw, 1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--knowza-black);
  line-height: 1.4;
  transition: color 0.2s ease;
}

.faq-item.is-open .faq-trigger-text {
  color: var(--knowza-blue);
}

/* +/- icon */
.faq-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--knowza-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--knowza-muted);
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.3s ease;
}

.faq-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.faq-item.is-open .faq-icon {
  background: var(--knowza-blue);
  border-color: var(--knowza-blue);
  color: #fff;
  transform: rotate(45deg);
}

/* panel */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq-item.is-open .faq-panel {
  grid-template-rows: 1fr;
}

.faq-panel-inner {
  overflow: hidden;
  padding: 0 1.5rem;
}

.faq-item.is-open .faq-panel-inner {
  padding-bottom: 1.375rem;
}

.faq-answer {
  font-family: var(--knowza-font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--knowza-muted);
  margin: 0;
  padding-top: 0.1rem;
  border-top: 1px solid var(--knowza-border-light);
  padding-top: 1rem;
}

/* ── Contact nudge ── */
.faq-contact-nudge {
  margin-top: 3.5rem;
  padding: 2.25rem 2.5rem;
  background: #f5f8fb;
  border: 1px solid var(--knowza-border-light);
  border-radius: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.faq-contact-nudge-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--knowza-black);
  margin-bottom: 0.3rem;
}

.faq-contact-nudge-sub {
  font-family: var(--knowza-font-body);
  font-size: 0.875rem;
  color: var(--knowza-muted);
  margin: 0;
}

.faq-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--knowza-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--knowza-blue);
  border-radius: 50rem;
  padding: 0.875rem 2rem;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}

.faq-contact-btn:hover {
  background: var(--knowza-blue-dark);
  color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 575.98px) {
  .faq-contact-nudge {
    flex-direction: column;
    text-align: center;
  }

  .faq-trigger {
    padding: 1rem 1.125rem;
  }

  .faq-panel-inner {
    padding: 0 1.125rem;
  }

  .faq-item.is-open .faq-panel-inner {
    padding-bottom: 1.125rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════════════════════ */

.contact-page {
  padding-block: clamp(4rem, 8vw, 6rem);
}

/* ── Large display title ── */
.contact-display-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(2.6rem, 2rem + 4vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.0;
  color: var(--knowza-black);
  margin-bottom: 0.35rem;
}

.contact-display-title span {
  background: var(--knowza-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.contact-display-sub {
  font-family: var(--knowza-font-body);
  font-size: clamp(0.9rem, 0.82rem + 0.3vw, 1.05rem);
  color: var(--knowza-muted);
  font-weight: 400;
  margin-bottom: 3rem;
}

/* ── Two-panel layout ── */
.contact-panels {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 1199.98px) {
  .contact-panels {
    grid-template-columns: 320px 1fr;
  }
}

@media (max-width: 991.98px) {
  .contact-panels {
    grid-template-columns: 1fr;
  }
}

/* ── Dark info panel ── */
.contact-info-panel {
  background: #0d3a5c;
  border-radius: 1.5rem;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  min-height: 520px;
  position: relative;
  overflow: hidden;
}

/* dot grid */
.contact-info-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(42, 168, 230, 0.1) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

.contact-info-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contact-info-eyebrow {
  font-family: var(--knowza-font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--knowza-blue-light);
  margin-bottom: 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.contact-info-eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--knowza-blue-light);
  opacity: 0.6;
  flex-shrink: 0;
}

/* detail rows */
.contact-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.contact-info-item {
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-info-item:first-child {
  padding-top: 0;
}

.contact-info-item:last-child {
  border-bottom: none;
}

.contact-info-item-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--knowza-font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.5rem;
}

.contact-info-item-label svg {
  width: 13px;
  height: 13px;
  display: block;
}

.contact-info-item-value {
  font-family: var(--knowza-font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.6;
  margin: 0;
}

.contact-info-item-value a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-info-item-value a:hover {
  color: var(--knowza-blue-light);
}

/* sub-label for second office */
.contact-info-item-sub {
  font-family: var(--knowza-font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin: 0.85rem 0 0.35rem;
}

/* social links */
.contact-info-socials {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.contact-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--knowza-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-social-link:hover {
  color: var(--knowza-blue-light);
}

.contact-social-arrow {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.contact-social-link:hover .contact-social-arrow {
  background: var(--knowza-blue);
  border-color: var(--knowza-blue);
}

.contact-social-arrow svg {
  width: 10px;
  height: 10px;
  display: block;
}

/* ── Form panel ── */
.contact-form-panel {
  background: #f5f8fb;
  border-radius: 1.5rem;
  padding: clamp(2rem, 3.5vw, 2.75rem);
}

/* underline-style inputs */
.cf-input--line,
.cf-select--line,
.cf-textarea--line {
  width: 100%;
  font-family: var(--knowza-font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--knowza-black);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid #d0d9e2;
  border-radius: 0;
  padding: 0.65rem 0;
  outline: none;
  transition: border-color 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.cf-input--line:focus,
.cf-select--line:focus,
.cf-textarea--line:focus {
  border-bottom-color: var(--knowza-blue);
}

.cf-input--line::placeholder,
.cf-textarea--line::placeholder {
  color: #b0bbc6;
}

.cf-select--line {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c757d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 1.5rem;
  cursor: pointer;
  color: #b0bbc6;
}

.cf-select--line.has-value {
  color: var(--knowza-black);
}

.cf-textarea--line {
  resize: none;
  min-height: 120px;
  display: block;
}

.cf-line-group {
  margin-bottom: 1.625rem;
}

.cf-line-label {
  display: block;
  font-family: var(--knowza-font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--knowza-black);
  margin-bottom: 0.35rem;
}

.cf-line-label .cf-opt {
  font-weight: 500;
  color: var(--knowza-muted);
  font-size: 0.72rem;
  letter-spacing: 0;
}

/* submit row */
.contact-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
}

.contact-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--knowza-font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #2aa8e6 0%, #0777bd 55%, #065a91 100%);
  border: none;
  border-radius: 50rem;
  padding: 0.95rem 2.5rem;
  cursor: pointer;
  box-shadow: 0 0.35rem 1.25rem rgba(7, 119, 189, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.contact-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.55rem 1.75rem rgba(7, 119, 189, 0.45);
  filter: brightness(1.06);
}

.contact-form-note {
  font-family: var(--knowza-font-body);
  font-size: 0.775rem;
  color: var(--knowza-muted);
  margin: 0;
  line-height: 1.6;
}

/* success */
.contact-success {
  display: none;
  align-items: flex-start;
  gap: 0.75rem;
  background: rgba(10, 124, 66, 0.07);
  border: 1px solid rgba(10, 124, 66, 0.22);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
  font-family: var(--knowza-font-body);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--knowza-blue);
}

.contact-success.is-visible {
  display: flex;
}

/* ── Map ── */
.contact-map-section {
  margin-top: 4rem;
}

.contact-map-wrap {
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--knowza-border-light);
  position: relative;
}

.contact-map-wrap iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: none;
}

.contact-map-gdpr {
  position: absolute;
  inset: 0;
  background: #f0f4f8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  z-index: 2;
}

.contact-map-gdpr.is-accepted {
  display: none;
}

.contact-map-gdpr-title {
  font-family: var(--knowza-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--knowza-black);
  margin: 0.875rem 0 0.5rem;
}

.contact-map-gdpr-body {
  font-family: var(--knowza-font-body);
  font-size: 0.825rem;
  line-height: 1.7;
  color: var(--knowza-muted);
  max-width: 28rem;
  margin-bottom: 1.25rem;
}

.contact-map-gdpr-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--knowza-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--knowza-blue);
  border: none;
  border-radius: 50rem;
  padding: 0.75rem 1.75rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.contact-map-gdpr-btn:hover {
  background: var(--knowza-blue-dark);
  transform: translateY(-1px);
}

@media (max-width: 575.98px) {
  .contact-map-wrap iframe {
    height: 260px;
  }
}



/* Container adjustments */
.reveal-container {
  line-height: 1.6;
}

/* Base style for every single character */
.reveal-container .letter {
  display: inline-block;
  /* 1. Un-scrolled state: Dim/low opacity text */
  color: rgba(255, 255, 255, 0.2);
  transition: color 0.15s ease;
}

/* 2. Scrolled state: Triggers vibrant full color */
.reveal-container .letter.active {
  color: #ffffff;
  /* Change to your brand accent color if desired */
}

/* Prevents words from breaking clumsily across lines on mobile */
.reveal-word {
  display: inline-block;
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════
   CORE VALUES — Sticky scroll-pin with contained image
═══════════════════════════════════════════════════════════ */

/*
  Outer div is tall: its height = block height + scroll distance for 6 reveals.
  200px per reveal × 6 cards = 1200px of scroll distance.
  The sticky inner stays fixed inside this tall wrapper.
*/
.val-scroll-outer {
  position: relative;
  height: calc(100vh + 1200px);
}

@media (max-width: 767.98px) {
  .val-scroll-outer {
    height: calc(100vh + 900px);
  }
}

.val-sticky-inner {
  position: sticky;
  top: 0;
  padding-block: 2rem 2.5rem;
  /* breathing room while pinned */
}

/* ── Contained image block — matches row g-0 dimensions ── */
.val-bg-block {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  background-image: url('../images/about-us.jpg');
  background-size: cover;
  background-position: center 40%;
  /* No background-attachment: fixed — image is contained, not full-page */
}

.val-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(4, 14, 26, 0.91) 0%,
      rgba(6, 58, 100, 0.76) 50%,
      rgba(4, 15, 28, 0.93) 100%);
  pointer-events: none;
}

/* ── Grid: 1px gap acts as divider lines ── */
.val-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  position: relative;
  z-index: 1;
  /* Gap colour = the divider line colour */
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 767.98px) {
  .val-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Cards ── */
.val-card {
  background: rgba(8, 24, 40, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  overflow: hidden;

  /* Hidden state — left cards slide from left, right from right */
  opacity: 0;
  transition:
    opacity 0.55s ease,
    transform 0.55s ease,
    background 0.28s ease,
    box-shadow 0.28s ease;
}

.val-card:nth-child(odd) {
  transform: translateX(-36px);
}

.val-card:nth-child(even) {
  transform: translateX(36px);
}

/* Gradient top bar */
.val-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--knowza-blue), var(--knowza-blue-light));
  opacity: 0;
  transition: opacity 0.28s ease;
}

/* ── Revealed state ── */
.val-card.is-revealed {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

@media (hover: hover) {
  .val-card.is-revealed:hover {
    background: rgba(7, 119, 189, 0.14);
    box-shadow: inset 0 0 0 1px rgba(42, 168, 230, 0.28);
    transform: translateX(0) translateY(-4px);
  }

  .val-card.is-revealed:hover::before {
    opacity: 1;
  }

  .val-card.is-revealed:hover .val-card-icon {
    background: var(--knowza-blue);
    border-color: var(--knowza-blue);
    color: #fff;
  }
}

/* ── Icon ── */
.val-card-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--knowza-blue-light);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.val-card-icon svg {
  width: 23px;
  height: 23px;
  display: block;
}

/* ── Title ── */
.val-card-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #fff;
  margin: 0;
}

/* ── Description ── */
.val-card-desc {
  font-family: var(--knowza-font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════
   INFINITE MARQUEE TICKER
   ─────────────────────────────────────────────────────────
   SIZE CONTROLS (all in one place):
     --mqt-logo-h   : logo image height
     --mqt-card-w   : width of each logo card
     --mqt-gap      : horizontal gap between cards
     --mqt-speed    : scroll duration — lower = faster
     --mqt-row-gap  : vertical gap between the two rows
═══════════════════════════════════════════════════════════ */

.mqt-section {
  padding-block: clamp(4rem, 8vw, 4rem);
  background: #f8fafc;
  overflow: hidden;
}

.mqt-wrapper {
  /* ── EDIT THESE TO CONTROL SIZE ── */
  --mqt-logo-h: 70px;
  --mqt-card-w: 160px;
  --mqt-gap: 1.25rem;
  --mqt-speed: 38s;
  --mqt-row-gap: 1.25rem;
  /* ───────────────────────────── */

  display: flex;
  flex-direction: column;
  gap: var(--mqt-row-gap);

  /* Soft edge fade — controls how wide the fade zone is */
  -webkit-mask-image: linear-gradient(90deg,
      transparent 0%,
      #000 7%,
      #000 93%,
      transparent 100%);
  mask-image: linear-gradient(90deg,
      transparent 0%,
      #000 7%,
      #000 93%,
      transparent 100%);
}

.mqt-row {
  overflow: hidden;
}

.mqt-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.mqt-set {
  display: flex;
  align-items: center;
  gap: var(--mqt-gap);
  padding-right: var(--mqt-gap);
  padding-bottom: 50px;
  /* closes the seam between clones */
}

/* ── Logo card ── */
.mqt-item {
  flex-shrink: 0;
  width: var(--mqt-card-w);
  height: calc(var(--mqt-logo-h) + 1.75rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.25rem;
  background: #fff;
  border: 1px solid var(--knowza-border-light);
  border-radius: 0.75rem;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.mqt-item img {
  max-height: var(--mqt-logo-h);
  max-width: calc(var(--mqt-card-w) - 2.5rem);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(1) opacity(1);
  transition: filter 0.22s ease, transform 0.22s ease;
}

@media (hover: hover) {
  .mqt-item:hover {
    border-color: rgba(7, 119, 189, 0.28);
    box-shadow: 0 0.35rem 1.25rem rgba(7, 119, 189, 0.1);
  }

  .mqt-item:hover img {
    filter: grayscale(0) opacity(1);
    transform: scale(1.06);
  }

  /* Pause row on hover */
  .mqt-row:hover .mqt-track {
    animation-play-state: paused;
  }
}

/* ── Keyframes ── */
@keyframes mqt-scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes mqt-scroll-right {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

.mqt-row[data-mqt-dir="left"] .mqt-track {
  animation: mqt-scroll-left var(--mqt-speed) linear infinite;
}

.mqt-row[data-mqt-dir="right"] .mqt-track {
  animation: mqt-scroll-right var(--mqt-speed) linear infinite;
}

/* ── Responsive — smaller cards on mobile ── */
@media (max-width: 575.98px) {
  .mqt-wrapper {
    --mqt-logo-h: 36px;
    --mqt-card-w: 130px;
    --mqt-gap: 1rem;
    --mqt-speed: 28s;
  }
}

/* ═══════════════════════════════════════════════════════════
   STATS SECTION
═══════════════════════════════════════════════════════════ */

.stats-knowza {
  padding-block: clamp(4rem, 8vw, 4rem);
  background: #fff;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: start;
}

/* Staggered vertical offset — mirrors the reference layout */


/* ── Base card ── */
.stats-card {
  border-radius: 1.25rem;
  padding: 2.25rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  position: relative;
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

@media (hover: hover) {
  .stats-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1.25rem 3rem rgba(7, 119, 189, 0.15);
  }
}

/* ── Top row: number + badge ── */
.stats-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: auto;
}

/* ── Number ── */
.stats-num {
  font-family: var(--knowza-font-display);
  font-size: clamp(2.75rem, 2.2rem + 2.2vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  display: block;
}

/* ── Badge — {Label} ── */
.stats-badge {
  font-family: var(--knowza-font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 0.3rem 0.65rem;
  border-radius: 0.375rem;
  border: 1.5px solid currentColor;
  opacity: 0.85;
  flex-shrink: 0;
  margin-top: 0.35rem;
}

.stats-badge-brace {
  color: var(--knowza-blue);
  font-weight: 800;
}

/* ── Description ── */
.stats-desc {
  font-family: var(--knowza-font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.75;
  margin: 2rem 0 0;
}

/* ══ Colour variants ══ */

/* Light */
.stats-card--light {
  background: #fff;
  border: 1px solid var(--knowza-border-light);
  box-shadow: 0 0.25rem 1.5rem rgba(7, 119, 189, 0.06);
}

.stats-card--light .stats-num {
  color: var(--knowza-black);
}

.stats-card--light .stats-badge {
  color: var(--knowza-black);
  border-color: var(--knowza-border-light);
}

.stats-card--light .stats-desc {
  color: var(--knowza-muted);
}

/* Blue */
.stats-card--blue {
  background: var(--knowza-blue);
  border: 1px solid transparent;
}

.stats-card--blue .stats-num {
  color: #fff;
}

.stats-card--blue .stats-badge {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.stats-card--blue .stats-badge .stats-badge-brace {
  color: rgba(255, 255, 255, 0.65);
}

.stats-card--blue .stats-desc {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
}

/* Dark */
.stats-card--dark {
  background: #0d1f2d;
  border: 1px solid transparent;
}

.stats-card--dark .stats-num {
  color: #fff;
}

.stats-card--dark .stats-badge {
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.2);
}

.stats-card--dark .stats-badge .stats-badge-brace {
  color: var(--knowza-blue-light);
}

.stats-card--dark .stats-desc {
  color: rgba(255, 255, 255, 0.55);
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid .stats-card:nth-child(2),
  .stats-grid .stats-card:nth-child(3) {
    margin-top: 0;
  }

  .stats-card {
    min-height: auto;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .stats-grid .stats-card:nth-child(2) {
    margin-top: 1rem;
  }

  .stats-grid .stats-card:nth-child(3) {
    margin-top: 2rem;
  }
}


/* ── Section shell ───────────────────────────────────── */
.ctc-section {
  background: #fff;
  padding: 5rem 0;
}

.ctc-container {
  max-width: 1140px;
}

/* ── Two-column grid ─────────────────────────────────── */
.ctc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: stretch;
}

/* ── Map ─────────────────────────────────────────────── */
.ctc-map-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 480px;
  /* floor; stretches to match form card */
}

.ctc-map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* Dark-map trick — no API key required */

}

/* Subtle blue-tinted vignette on map edges */
.ctc-map-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 16px;
  box-shadow: inset 0 0 40px rgba(4, 19, 31, 0.55);
  border: 1px solid rgba(7, 119, 189, 0.25);
}

/* ── Form card ───────────────────────────────────────── */
.ctc-form-card {
  background: #f5f8fb;
  border: 1px solid var(--knowza-border-light);
  border-radius: 16px;
  padding: 2.5rem 2.25rem;
  display: flex;
  flex-direction: column;
}

/* ── Eyebrow ─────────────────────────────────────────── */
.ctc-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--knowza-font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--knowza-blue-light);
  margin-bottom: 0.6rem;
}

.ctc-eyebrow-icon {
  font-size: 0.7rem;
}

/* ── Heading ─────────────────────────────────────────── */
.ctc-heading {
  font-family: var(--knowza-font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--knowza-black);
  line-height: 1.1;
  margin: 0 0 2rem;
}

/* ── Form layout ─────────────────────────────────────── */
.ctc-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1;
}

.ctc-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.ctc-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* ── Labels ──────────────────────────────────────────── */
.ctc-label {
  font-family: var(--knowza-font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--knowza-black);
}

/* ── Inputs ──────────────────────────────────────────── */
.ctc-input {
  background: #fff;
  border: 1px solid var(--knowza-border-light);
  border-radius: 8px;
  color: var(--knowza-black);
  font-family: var(--knowza-font-body);
  font-size: 0.92rem;
  padding: 0.7rem 0.9rem;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  outline: none;
  width: 100%;
}

.ctc-input::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.ctc-input:focus {
  background: rgba(7, 119, 189, 0.08);
  border-color: var(--knowza-blue);
  box-shadow: 0 0 0 3px rgba(7, 119, 189, 0.15);
}

.ctc-input.is-invalid {
  border-color: #e05252;
  box-shadow: none;
}

.ctc-textarea {
  min-height: 110px;
  resize: vertical;
}

/* ── Validation error text ───────────────────────────── */
.ctc-err {
  font-size: 0.75rem;
  color: #e05252;
  min-height: 1rem;
}

/* ── Submit button ───────────────────────────────────── */
.ctc-submit {
  width: 100%;
  padding: 0.85rem 1.5rem;
  background: var(--knowza-gradient);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-family: var(--knowza-font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  margin-top: auto;
}

.ctc-submit:hover {
  opacity: 0.88;
}

.ctc-submit:active {
  transform: scale(0.985);
}

.ctc-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Privacy note ────────────────────────────────────── */
.ctc-privacy {
  font-family: var(--knowza-font-body);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.38);
  text-align: center;
  margin: 0;
}

.ctc-privacy-link {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}

.ctc-privacy-link:hover {
  color: var(--knowza-blue-light);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1031px) {
  .ctc-grid {
    grid-template-columns: 1fr;
  }

  .ctc-map-wrap {
    min-height: 300px;
    height: 300px;
    /* fixed height in stacked layout */
  }

  .ctc-map-frame {
    position: absolute;
    /* keep absolute inside relative wrap */
  }
}

@media (max-width: 576px) {
  .ctc-form-card {
    padding: 1.75rem 1.25rem;
  }

  .ctc-row-2 {
    grid-template-columns: 1fr;
  }

  .ctc-map-wrap {
    min-height: 220px;
    height: 220px;
  }
}


/* ================================================================
   Portfolio Masonry Grid — pf-masonry.css
   Replaces .pf-grid and all .pf-card-* styles
   ================================================================ */

/* ── Outer grid ─────────────────────────────────────────────────── */
.pfm-grid {
  column-count: 3;
  column-gap: 14px;
  margin-top: 2.5rem;
}

@media (max-width: 1200px) {
  .pfm-grid {
    column-count: 3;
  }
}

@media (max-width: 800px) {
  .pfm-grid {
    column-count: 2;
  }
}

@media (max-width: 500px) {
  .pfm-grid {
    column-count: 1;
  }
}

/* ── Card shell ─────────────────────────────────────────────────── */
.pfm-card {
  break-inside: avoid;
  margin-bottom: 14px;
  position: relative;
  background: #f5f8fb;
  border-radius: 13px;
  border: 1px solid var(--knowza-border-light);
  overflow: hidden;
  cursor: pointer;

  /* scroll-reveal start state */
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.pfm-card.pfm-visible {
  opacity: 1;
  transform: translateY(0);
}

.pfm-card.pfm-visible:hover {
  transform: scale(1.025);
  border-color: rgba(7, 119, 189, 0.35);
  transition: transform 0.35s ease, border-color 0.35s ease;
}

.pfm-card.is-hidden {
  display: none;
}

/* ── Height tiers ───────────────────────────────────────────────── */
.pfm-card.pfm-sm {
  height: 155px;
}

.pfm-card.pfm-md {
  height: 210px;
}

.pfm-card.pfm-lg {
  height: 270px;
}

/* ── Logo area ──────────────────────────────────────────────────── */
.pfm-logo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.pfm-img {
  max-width: 72%;
  max-height: 72%;
  object-fit: contain;
  filter: brightness(1.05);
  transition: filter 0.3s ease;
}

.pfm-card:hover .pfm-img {
  filter: brightness(0.7);
}

/* Monogram fallback */
.pfm-mono {
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--knowza-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(42, 168, 230, 0.45);
}

/* ── Hover overlay ──────────────────────────────────────────────── */
.pfm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 24, 0.96);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;

  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.32s ease, transform 0.32s ease;
  pointer-events: none;
}

.pfm-card:hover .pfm-overlay {
  opacity: 1;
  transform: translateY(0);
}

.pfm-overlay-body {
  flex: 1;
}

/* ── Overlay typography ─────────────────────────────────────────── */
.pfm-co-name {
  font-family: var(--knowza-font-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: #6b9fd8;
  /* steel blue matching reference image */
  margin: 0 0 5px;
  line-height: 1.25;
}

.pfm-co-sub {
  font-family: var(--knowza-font-body);
  font-size: 0.82rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.68);
  margin: 0 0 7px;
  line-height: 1.3;
}

.pfm-co-tags {
  font-family: var(--knowza-font-body);
  font-size: 0.76rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.42);
  margin: 0;
  line-height: 1.55;
}

/* ── Year badge — bottom-right ──────────────────────────────────── */
.pfm-year {
  align-self: flex-end;
  font-family: var(--knowza-font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.25);
  margin-top: auto;
  padding-top: 6px;
}

/* ── Empty state ────────────────────────────────────────────────── */
.pf-empty {
  display: none;
  column-span: all;
  text-align: center;
  color: var(--knowza-muted);
  font-family: var(--knowza-font-body);
  padding: 3rem 0;
  font-size: 0.9rem;
}

/* ── Filter bar ─────────────────────────────────────────────────── */
.pf-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.pf-filter-btn {
  font-family: var(--knowza-font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.45rem 1.1rem;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pf-filter-btn:hover {
  background: rgba(7, 119, 189, 0.12);
  border-color: rgba(7, 119, 189, 0.4);
  color: rgba(255, 255, 255, 0.85);
}

.pf-filter-btn.pf-filter-active {
  background: var(--knowza-blue, #0777bd);
  border-color: var(--knowza-blue, #0777bd);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   BLOG PAGE
═══════════════════════════════════════════════════════════ */

/* ── Featured card ── */
.blog-hero-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 1.375rem;
  overflow: hidden;
  background: #04131f;
  min-height: 320px;
  margin-bottom: 2.5rem;
  text-decoration: none;
  position: relative;
  transition: box-shadow 0.28s ease;
}

.blog-hero-card:hover {
  box-shadow: 0 1.5rem 3.5rem rgba(4, 19, 31, 0.22);
}

@media (max-width: 767.98px) {
  .blog-hero-card {
    grid-template-columns: 1fr;
  }
}

/* dot grid */
.blog-hero-text {
  padding: clamp(2rem, 4vw, 2.75rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}

.blog-hero-text::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(42, 168, 230, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

.blog-hero-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
  position: relative;
  z-index: 1;
}

.blog-hero-cat {
  font-family: var(--knowza-font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--knowza-blue-light);
}

.blog-hero-meta-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.blog-hero-date {
  font-family: var(--knowza-font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.4);
}

.blog-hero-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.2rem, 0.9rem + 1.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 0.875rem;
  position: relative;
  z-index: 1;
  transition: color 0.2s ease;
}

.blog-hero-card:hover .blog-hero-title {
  color: var(--knowza-blue-light);
}

.blog-hero-excerpt {
  font-family: var(--knowza-font-body);
  font-size: 0.875rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-hero-img-wrap {
  position: relative;
  overflow: hidden;
  min-height: 260px;
}

@media (max-width: 767.98px) {
  .blog-hero-img-wrap {
    min-height: 220px;
  }
}

.blog-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: transform 0.45s ease;
}

.blog-hero-card:hover .blog-hero-img {
  transform: scale(1.04);
}

/* placeholder when no image */
.blog-hero-img-placeholder {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-hero-img-placeholder[data-cat="marketing"] {
  background: linear-gradient(135deg, #0d3b6e 0%, #0777bd 100%);
}

.blog-hero-img-placeholder[data-cat="website"] {
  background: linear-gradient(135deg, #7c2d12 0%, #c2500a 100%);
}

.blog-hero-img-placeholder[data-cat="curriculum"] {
  background: linear-gradient(135deg, #0f3460 0%, #0777bd 100%);
}

.blog-hero-img-placeholder[data-cat="elearning"] {
  background: linear-gradient(135deg, #064e3b 0%, #0a7c42 100%);
}

.blog-hero-img-placeholder[data-cat="lms"] {
  background: linear-gradient(135deg, #3b0764 0%, #6d28d9 100%);
}

.blog-hero-img-placeholder[data-cat="industry"] {
  background: linear-gradient(135deg, #0f2c55 0%, #065a91 100%);
}

.blog-hero-img-placeholder svg {
  width: 52px;
  height: 52px;
  color: rgba(255, 255, 255, 0.25);
}

/* ── Mini card grid ── */
.blog-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.75rem;
}

@media (max-width: 991.98px) {
  .blog-mini-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .blog-mini-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Mini card ── */
.blog-mini-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  gap: 0;

}

/* Find your wrapper and add these shadow rules */
.blog-mini-img-wrap {
  border-radius: 0.875rem;
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 3;
  background: #f0f4f8;
  margin-bottom: 1rem;
  flex-shrink: 0;

  /* Adds a smooth, soft shadow beneath the image frame */
  box-shadow: 0 10px 30px rgba(4, 19, 31, 0.1);
}


.blog-mini-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: transform 0.4s ease;
}


.blog-mini-card:hover .blog-mini-img {
  transform: scale(1.05);
}

/* placeholder fill for cards without image */
.blog-mini-img-placeholder {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-mini-img-placeholder[data-cat="marketing"] {
  background: linear-gradient(135deg, #e8f2fb 0%, #cce4f6 100%);
}

.blog-mini-img-placeholder[data-cat="website"] {
  background: linear-gradient(135deg, #fef3e8 0%, #fde6cc 100%);
}

.blog-mini-img-placeholder[data-cat="curriculum"] {
  background: linear-gradient(135deg, #e8f1fb 0%, #ccdff6 100%);
}

.blog-mini-img-placeholder[data-cat="elearning"] {
  background: linear-gradient(135deg, #e8f8f2 0%, #cceee0 100%);
}

.blog-mini-img-placeholder[data-cat="lms"] {
  background: linear-gradient(135deg, #f3e8fb 0%, #e5ccf6 100%);
}

.blog-mini-img-placeholder[data-cat="industry"] {
  background: linear-gradient(135deg, #e8eef8 0%, #ccd9f0 100%);
}

.blog-mini-img-placeholder svg {
  width: 36px;
  height: 36px;
  color: var(--knowza-blue);
  opacity: 0.3;
}

/* meta row: category / date + arrow */
.blog-mini-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.blog-mini-meta-left {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.blog-mini-cat {
  font-family: var(--knowza-font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--knowza-blue);
}

.blog-mini-meta-sep {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--knowza-muted);
  flex-shrink: 0;
}

.blog-mini-date {
  font-family: var(--knowza-font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--knowza-muted);
}

/* arrow icon — top right of meta row, matches reference */
.blog-mini-arrow {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--knowza-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--knowza-muted);
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.blog-mini-arrow svg {
  width: 10px;
  height: 10px;
  display: block;
}

.blog-mini-card:hover .blog-mini-arrow {
  background: var(--knowza-blue);
  border-color: var(--knowza-blue);
  color: #fff;
}

.blog-mini-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(0.9rem, 0.82rem + 0.22vw, 1.05rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--knowza-black);
  margin: 0;
  transition: color 0.2s ease;
}

.blog-mini-card:hover .blog-mini-title {
  color: var(--knowza-blue);
}

/* hidden via filter */
.blog-mini-card.is-hidden {
  display: none;
}

.blog-hero-card.is-hidden {
  display: none;
}

/* ── Newsletter strip (unchanged from before) ── */
.blog-newsletter {
  margin-top: 3.5rem;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  background: linear-gradient(135deg, #04131f 0%, #073456 55%, #0777bd 100%);
  border-radius: 1.5rem;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.blog-newsletter::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(42, 168, 230, 0.1) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

.blog-newsletter-text {
  position: relative;
  z-index: 1;
}

.blog-newsletter-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 0.35rem;
}

.blog-newsletter-sub {
  font-family: var(--knowza-font-body);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.blog-newsletter-form {
  display: flex;
  gap: 0.625rem;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.blog-newsletter-input {
  font-family: var(--knowza-font-body);
  font-size: 0.875rem;
  color: var(--knowza-black);
  background: #fff;
  border: none;
  border-radius: 50rem;
  padding: 0.75rem 1.375rem;
  outline: none;
  min-width: 220px;
  transition: box-shadow 0.2s ease;
}

.blog-newsletter-input:focus {
  box-shadow: 0 0 0 3px rgba(42, 168, 230, 0.4);
}

.blog-newsletter-input::placeholder {
  color: #b0bbc6;
}

.blog-newsletter-btn {
  font-family: var(--knowza-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  background: #fff;
  border: none;
  border-radius: 50rem;
  padding: 0.75rem 1.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.blog-newsletter-btn:hover {
  background: var(--knowza-blue-light);
  color: #fff;
  transform: translateY(-1px);
}

@media (max-width: 767.98px) {
  .blog-newsletter {
    flex-direction: column;
  }

  .blog-newsletter-form {
    width: 100%;
  }

  .blog-newsletter-input {
    flex: 1;
    min-width: 0;
  }
}

/* ── Search bar ── */
.blog-search-wrap {
  margin-bottom: 3rem;
  width: 100%;
  max-width: 100%;
  /* Prevents the wrapper itself from overflowing */
  overflow: hidden;
  /* Acts as a safeguard against any micro-spillover */
  padding: 0.5rem;
  /* Optional: adds a tiny bit of breathing room so the shadow isn't cut off */
  box-sizing: border-box;
}

.blog-search-inner {
  position: relative;
  max-width: 650px;
  width: 100%;
  /* Ensures it scales down to fit mobile screens */
  margin: 0 auto;
  /* Centers the container */
  box-sizing: border-box;
  /* Keeps everything contained */
}

.blog-search-icon {
  position: absolute;
  left: 1.25rem;
  /* Pushed in slightly to match thicker padding */
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  /* Increased from 17px for higher visibility */
  height: 22px;
  color: var(--knowza-muted);
  pointer-events: none;
}

.blog-search-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* CRITICAL: Prevents padding/borders from breaking the width */
  font-family: var(--knowza-font-body);
  font-size: 1.1rem;
  color: var(--knowza-black);
  background: #fff;
  border: 2px solid var(--knowza-border-light);
  border-radius: 50rem;
  padding: 1rem 3.5rem 1rem 3.2rem;
  outline: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  appearance: none;
}

.blog-search-input::-webkit-search-cancel-button {
  display: none;
}

.blog-search-input:focus {
  border-color: var(--knowza-blue);
  /* Combines the focus ring with a slightly elevated drop shadow */
  box-shadow: 0 0 0 4px rgba(7, 119, 189, 0.15), 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
  /* Slight lift effect on focus */
}

.blog-search-clear {
  position: absolute;
  right: 1.25rem;
  /* Adjusted to match new padding */
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.4rem;
  /* Increased from 1.1rem */
  line-height: 1;
  color: var(--knowza-muted);
  cursor: pointer;
  padding: 0.2rem 0.3rem;
  transition: color 0.2s ease;
}

.blog-search-clear:hover {
  color: var(--knowza-black);
}


/* ============================================================
   LEGAL PAGES (Terms, Privacy, Complaints etc.)
============================================================ */
:root {
  --color-navy: #132f46;
  --color-dark: #142737;
  --color-gold: #feb648;
  --color-black: #1a1a1a;
  --color-white: #ffffff;
  --color-heading: #1f1f25;
  --color-body: rgb(113, 113, 115);
  --color-border: #e6e6e6;
  --color-primary: #feb648;
  --color-primary-light: #f8f9fc;
  --radius: 4px;
  --transition: 0.3s ease;
}

.beg-legal-section {
  background: #fff;
  padding: 60px 0 70px;
}

/* ── Sticky sidebar nav ── */
.beg-legal-nav {
  position: sticky;
  top: 50px;
  background: #f8f9fa;
  border-left: 3px solid var(--knowza-blue-light);
  border-radius: 0 6px 6px 0;
  padding: 24px 20px;
}

.beg-legal-nav-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--knowza-blue-light);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--knowza-blue-dark);
}

.beg-legal-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.beg-legal-nav ul li {
  margin-bottom: 6px;
}

.beg-legal-nav ul li a {
  font-size: 0.8rem;
  color: var(--color-body);
  text-decoration: none;
  line-height: 1.5;
  display: block;
  padding: 4px 0;
  border-bottom: none;
  transition: color var(--transition), padding-left var(--transition);
}

.beg-legal-nav ul li a:hover {
  color: var(--color-navy);
  padding-left: 4px;
}

/* ── Main body ── */
.beg-legal-body {
  padding-left: 40px;
  border-left: 1px solid var(--color-border);
}

/* ── Intro meta box ── */
.beg-legal-meta {
  background: var(--color-navy);
  border-radius: 6px;
  padding: 16px 22px;
  margin-bottom: 36px;
}

.beg-legal-meta p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
  margin: 0;
  font-style: italic;
}

/* ── Each numbered section ── */
.beg-legal-section-block {

  padding-bottom: 36px;
  /* border-bottom: 1px solid var(--color-border); */
}

.beg-legal-section-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ── Section heading ── */
.beg-legal-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--knowza-blue-light);
  display: inline-block;
}

/* ── Paragraphs ── */
.beg-legal-body p {
  font-size: 0.9rem;
  color: var(--color-body);
  line-height: 1.85;
  margin-bottom: 10px;
}

.beg-legal-body ul {
  font-size: 0.9rem;
  color: var(--color-body);
  line-height: 1.85;
  margin-bottom: 10px;
}

.beg-legal-body p:last-child {
  margin-bottom: 0;
}

.beg-legal-body strong {
  color: var(--color-navy);
  font-weight: 600;
}

.beg-legal-body a {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.beg-legal-body a:hover {
  color: var(--knowza-blue-light);
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .beg-legal-body {
    padding-left: 0;
    border-left: none;
    margin-top: 32px;
  }
}

@media (max-width: 575px) {
  .beg-legal-section {
    padding: 40px 0 50px;
  }

  .beg-legal-heading {
    font-size: 0.95rem;
  }

  .beg-legal-body p {
    font-size: 0.85rem;
  }
}

/* ── Table Styling ── */
.beg-legal-body .table {
  font-size: 0.9rem;
  /* Matches your paragraph text size */
  color: var(--color-body);
  border-color: var(--color-border);
  margin-bottom: 20px;
}

.beg-legal-body .table th {
  color: var(--color-navy);
  /* Matches your headings and strong text */
  font-weight: 600;
  background-color: #f8f9fa;
  /* Matches your sticky nav background */
  border-bottom: 2px solid var(--color-border);
  /* Echoes the section heading style */
  padding: 14px 16px;
  vertical-align: bottom;
}

.beg-legal-body .table td {
  padding: 14px 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
  border-top: none;
}

/* ── Cleaner Borders (Optional, removes vertical lines for a modern look) ── */
.beg-legal-body .table-bordered {
  border: none;
}

.beg-legal-body .table-bordered th,
.beg-legal-body .table-bordered td {
  border-left: none;
  border-right: none;
}

/* ── Mobile Responsive Adjustment ── */
@media (max-width: 575px) {
  .beg-legal-body .table {
    font-size: 0.85rem;
    /* Matches your mobile paragraph adjustments */
  }

  .beg-legal-body .table th,
  .beg-legal-body .table td {
    padding: 10px 12px;
  }
}



/* ═══════════════════════════════════════════════════════════
   BLOG POST DETAIL
═══════════════════════════════════════════════════════════ */

/* ── Post hero ── */
.post-hero {
  position: relative;
  padding: 110px 0 90px;
  overflow: hidden;
  /* clips the oversized bg during parallax travel */
  color: #fff;
}

/* gradient overlay – replaces the inline linear-gradient */
.post-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(6, 18, 34, .75), rgba(6, 18, 34, .75));
  pointer-events: none;
}

/* parallax image layer */
.post-hero-bg {
  position: absolute;
  inset: -30% 0;
  /* extra vertical room for travel */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: transform;
  z-index: 0;
}

.post-hero-inner {
  position: relative;
  z-index: 2;
}

.post-hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.post-hero-breadcrumb a,
.post-hero-breadcrumb span {
  font-family: var(--knowza-font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
  /* Boosted slightly from 0.4 for better contrast */
  transition: color 0.2s ease;
}

.post-hero-breadcrumb a:hover {
  color: var(--knowza-blue-light);
}

.post-hero-breadcrumb .sep {
  color: rgba(255, 255, 255, 0.3);
  /* Boosted slightly from 0.2 */
  font-size: 0.65rem;
}

.post-hero-breadcrumb .current {
  color: rgba(255, 255, 255, 0.8);
  /* Boosted slightly from 0.65 */
}

.post-hero-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.post-hero-cat {
  font-family: var(--knowza-font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--knowza-blue);
  border-radius: 50rem;
  padding: 0.25rem 0.75rem;
}

.post-hero-date,
.post-hero-read {
  font-family: var(--knowza-font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  /* Boosted slightly from 0.4 */
}

.post-hero-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.post-hero-title {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.75rem, 1.2rem + 3vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: #fff;
  max-width: 48rem;
  margin: 0 0 1.5rem;
}

.post-hero-lead {
  font-family: var(--knowza-font-body);
  font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.1rem);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.6);
  max-width: 44rem;
  margin: 0;
}

/* ── Featured image ── */
.post-featured-img-wrap {
  border-radius: 1.25rem;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background: #f0f4f8;
  margin-bottom: 3.5rem;
  position: relative;
}

.post-featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

/* gradient placeholder */
.post-featured-img-placeholder {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0d3b6e 0%, #0777bd 60%, #2aa8e6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-featured-img-placeholder svg {
  width: 64px;
  height: 64px;
  color: rgba(255, 255, 255, 0.2);
}

/* ── Two-column layout ── */
.post-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 3.5rem;
  align-items: start;
}

@media (max-width: 1199.98px) {
  .post-layout {
    grid-template-columns: 1fr 250px;
    gap: 2.5rem;
  }
}

@media (max-width: 991.98px) {
  .post-layout {
    grid-template-columns: 1fr;
  }
}

/* ── Article body ── */
.post-body {
  min-width: 0;
}

.post-content {
  font-family: var(--knowza-font-body);
  font-size: clamp(0.95rem, 0.88rem + 0.22vw, 1.0625rem);
  line-height: 1.85;
  color: #2e3a45;
}

.post-content p {
  margin-bottom: 1.5rem;
}

.post-content p:last-child {
  margin-bottom: 0;
}

.post-content h2 {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--knowza-black);
  margin: 2.75rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--knowza-border-light);
  line-height: 1.25;
}

.post-content h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.post-content h3 {
  font-family: var(--knowza-font-display);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--knowza-black);
  margin: 2rem 0 0.75rem;
  line-height: 1.3;
}

.post-content ul,
.post-content ol {
  padding-left: 1.25rem;
  margin-bottom: 1.5rem;
}

.post-content li {
  margin-bottom: 0.5rem;
  line-height: 1.75;
}

.post-content strong {
  font-weight: 700;
  color: var(--knowza-black);
}

.post-content a {
  color: var(--knowza-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.post-content a:hover {
  color: var(--knowza-blue-dark);
}

/* pull-quote */
.post-pullquote {
  border-left: 3px solid var(--knowza-blue);
  background: rgba(7, 119, 189, 0.04);
  border-radius: 0 0.75rem 0.75rem 0;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  font-family: var(--knowza-font-display);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--knowza-blue-dark);
  line-height: 1.6;
}

/* ── Post footer: tags + share ── */
.post-footer {
  padding-top: 2.5rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--knowza-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.post-tag {
  font-family: var(--knowza-font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  background: rgba(7, 119, 189, 0.06);
  border: 1px solid rgba(7, 119, 189, 0.15);
  border-radius: 50rem;
  padding: 0.25rem 0.7rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.post-tag:hover {
  background: var(--knowza-blue);
  color: #fff;
}

.post-share {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.post-share-label {
  font-family: var(--knowza-font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--knowza-muted);
}

.post-share-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--knowza-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--knowza-muted);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.post-share-btn svg {
  width: 14px;
  height: 14px;
  display: block;
}

.post-share-btn:hover {
  background: var(--knowza-blue);
  border-color: var(--knowza-blue);
  color: #fff;
}

/* ── Sidebar ── */
.post-sidebar {
  position: sticky;
  top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (max-width: 991.98px) {
  .post-sidebar {
    position: static;
  }
}

.post-sidebar-widget {
  background: #f8fafc;
  border: 1px solid var(--knowza-border-light);
  border-radius: 1.125rem;
  padding: 1.5rem;
}

.post-sidebar-heading {
  font-family: var(--knowza-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--knowza-black);
  margin: 0 0 1.125rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--knowza-border-light);
}

/* TOC */
.post-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.post-toc-item {
  border-bottom: 1px solid var(--knowza-border-light);
}

.post-toc-item:last-child {
  border-bottom: none;
}

.post-toc-link {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0;
  font-family: var(--knowza-font-body);
  font-size: 0.825rem;
  font-weight: 500;
  color: var(--knowza-muted);
  text-decoration: none;
  line-height: 1.45;
  transition: color 0.2s ease;
}

.post-toc-link:hover {
  color: var(--knowza-blue);
}

.post-toc-num {
  font-family: var(--knowza-font-display);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--knowza-blue);
  opacity: 0.6;
  min-width: 18px;
  margin-top: 1px;
  flex-shrink: 0;
}

/* Related posts */
.post-related-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--knowza-border-light);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.post-related-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.post-related-item:first-child {
  padding-top: 0;
}

.post-related-item:hover {
  opacity: 0.75;
}

.post-related-thumb {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.post-related-thumb svg {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.3);
}

.post-related-title {
  font-family: var(--knowza-font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--knowza-black);
  line-height: 1.35;
  margin: 0 0 0.25rem;
}

.post-related-cat {
  font-family: var(--knowza-font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--knowza-blue);
}

/* sidebar CTA */
.post-sidebar-cta {
  background: linear-gradient(135deg, #04131f 0%, #073456 55%, #0777bd 100%);
  border-radius: 1.125rem;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}

.post-sidebar-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(42, 168, 230, 0.1) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
}

.post-sidebar-cta-inner {
  position: relative;
  z-index: 1;
}

.post-sidebar-cta-title {
  font-family: var(--knowza-font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 0.5rem;
}

.post-sidebar-cta-body {
  font-family: var(--knowza-font-body);
  font-size: 0.8rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 1.125rem;
}

.post-sidebar-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--knowza-font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--knowza-blue);
  background: #fff;
  border-radius: 50rem;
  padding: 0.6rem 1.375rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.post-sidebar-cta-btn:hover {
  background: var(--knowza-blue-light);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   AI HERO — Enhanced Design
═══════════════════════════════════════════════════════════ */

.ai-hero {
  position: relative;
  overflow: hidden;
  min-height: min(100vh, 900px);
}

.ai-hero .svc-hero-bg {
  background-image: none;
  background-color: #04131f;
}

/* Animated dot grid background */
.ai-grid-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(42, 168, 230, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  animation: gridMove 20s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes gridMove {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(32px, 32px);
  }
}

/* Bottom fade to next section */
.ai-hero-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent 0%, #04131f 100%);
  pointer-events: none;
  z-index: 2;
}

/* bullet list */
.ai-feature-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 2rem;
}

.ai-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--knowza-border-light);
  font-family: var(--knowza-font-body);
  font-size: 0.9375rem;
  color: var(--knowza-muted);
  line-height: 1.65;
}

.ai-feature-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  min-width: 6px;
  border-radius: 50%;
  background: var(--knowza-blue);
  margin-top: 0.55em;
  flex-shrink: 0;
}

/* ── Layout ── */
.ai-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  position: relative;
  z-index: 3;

  padding-bottom: clamp(2rem, 8vw, 1rem);
}

.ai-hero-text {
  flex: 1;
  min-width: 0;
  max-width: 640px;
}

.ai-hero .svc-hero-eyebrow {
  justify-content: flex-start;

}

.ai-hero .svc-hero-title {
  font-size: clamp(2.2rem, 1.5rem + 3vw, 3.5rem);
  line-height: 1.05;
  margin-bottom: 1.5rem;
}

.ai-hero .svc-hero-lead {
  max-width: 520px;
  margin-bottom: 2rem;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
}

/* ── Actions ── */
.ai-hero .svc-hero-actions {
  justify-content: flex-start;
  margin-bottom: 3rem;
  gap: 1rem;
}

/* ── Stats ── */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1.75rem;
}

.stat-item:first-child {
  padding-left: 0;
}

.stat-num {
  font-family: var(--knowza-font-display);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  font-weight: 700;
  color: var(--knowza-blue-light);
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-num span {
  font-size: 0.75em;
  opacity: 0.8;
}

.stat-label {
  font-family: var(--knowza-font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
  align-self: center;
}

/* ── Brain Visual ── */
.hero-visual {
  position: relative;
  width: 550px;
  height: 550px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brain-ring {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Outer ambient glow */
.ring-glow {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(7, 119, 189, 0.15) 0%, transparent 70%);
  animation: pulseGlow 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pulseGlow {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* Rings */
.ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(7, 119, 189, 0.25);
}

.ring-1 {
  inset: 0;
  animation: spin 30s linear infinite;
}

.ring-2 {
  inset: 35px;
  border-color: rgba(42, 168, 230, 0.2);
  animation: spin 22s linear infinite reverse;
}

.ring-3 {
  inset: 70px;
  border-color: rgba(7, 119, 189, 0.15);
  animation: spin 18s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Ring dots */
.ring-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--knowza-blue-light);
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 16px var(--knowza-blue-light), 0 0 32px rgba(42, 168, 230, 0.4);
}

.ring-dot:hover {
  scale: 1.1;
  background: #81c8ea;
}

.ring-dot-violet {
  background: var(--knowza-blue);
  box-shadow: 0 0 16px var(--knowza-blue), 0 0 32px rgba(7, 119, 189, 0.4);
}

/* Brain center */
.brain-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  background: rgba(7, 119, 189, 0.08);
  border: 1.5px solid rgba(7, 119, 189, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.brain-pulse {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(42, 168, 230, 0.3);
  animation: brainPulse 2s ease-out infinite;
}

@keyframes brainPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.15);
    opacity: 0;
  }
}

.brain-icon {
  width: 48px;
  height: auto;
  object-fit: contain;
  filter: brightness(1.2);
}

.brain-label {
  font-family: var(--knowza-font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--knowza-blue-light);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Floating Chips ── */
.float-chip {
  position: absolute;
  background: rgba(4, 14, 26, 0.7);
  border: 1px solid rgba(7, 119, 189, 0.25);
  border-radius: 12px;
  padding: 0.6rem 1rem;
  font-family: var(--knowza-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(7, 119, 189, 0.1);
  animation: floaty 5s ease-in-out infinite;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.float-chip:hover {
  transform: scale(1.05) translateY(-2px) !important;
  border-color: rgba(42, 168, 230, 0.5);
}

.float-chip .chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--knowza-blue-light);
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}

/* Position chips around the ring */
.float-chip:nth-of-type(5) {
  top: 5%;
  left: -10px;
  animation-delay: 0s;
}

.float-chip:nth-of-type(6) {
  top: 50%;
  right: -40px;
  animation-delay: -1.2s;
}

.float-chip:nth-of-type(7) {
  bottom: 8%;
  left: 5px;
  animation-delay: -2.5s;
}

.float-chip:nth-of-type(8) {
  top: 25%;
  right: 0px;
  animation-delay: -3.8s;
}

@keyframes floaty {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* ── Responsive ── */
@media (max-width: 1199.98px) {
  .ai-hero-inner {
    gap: 3rem;
  }

  .hero-visual {
    width: 360px;
    height: 360px;
  }
}

@media (max-width: 1031px) {
  .ai-hero-inner {
    flex-direction: column;
    text-align: center;
    gap: 3.5rem;
  }

  .ai-hero-text {
    max-width: 100%;
  }

  .ai-hero .svc-hero-eyebrow {
    justify-content: center;
  }

  .ai-hero .svc-hero-actions {
    justify-content: center;
  }

  .hero-stats {
    justify-content: center;
  }

  .hero-visual {
    width: 340px;
    height: 340px;
  }
}

@media (max-width: 767.98px) {
  .hero-visual {
    width: 300px;
    height: 300px;
  }

  .brain-center {
    width: 120px;
    height: 120px;
  }

  .brain-icon {
    width: 38px;
  }

  .stat-item {
    padding: 0 1rem;
  }

  .stat-label br {
    display: none;
  }

  .float-chip {
    font-size: 0.7rem;
    padding: 0.45rem 0.75rem;
  }
}

@media (max-width: 575.98px) {
  .ai-hero-inner {
    padding-top: 7rem;
  }

  .hero-visual {
    width: 260px;
    height: 260px;
  }

  .ring-2 {
    inset: 25px;
  }

  .ring-3 {
    inset: 50px;
  }

  .stat-divider {
    display: none;
  }

  .hero-stats {
    gap: 1.5rem;
    flex-wrap: wrap;
  }

  .stat-item {
    padding: 0;
    flex: 1;
    min-width: 100px;
  }

  .float-chip:nth-of-type(5) {
    left: -5px;
  }

  .float-chip:nth-of-type(6) {
    right: -20px;
  }

  .float-chip:nth-of-type(7) {
    left: 0;
  }

  .float-chip:nth-of-type(8) {
    right: -10px;
  }
}

/* 4-col intelligence grid */
.ai-intel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.625rem;
  overflow: hidden;
}

@media (max-width: 991px) {
  .ai-intel-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .ai-intel-grid {
    grid-template-columns: 1fr;
  }
}

/* animation delays for grey items (5–8 are children of .ai-intel-grid) */
.ai-intel-grid>.webdev-item-knowza-grey:nth-child(5) {
  animation-delay: 0.5s;
}

.ai-intel-grid>.webdev-item-knowza-grey:nth-child(6) {
  animation-delay: 0.6s;
}

.ai-intel-grid>.webdev-item-knowza-grey:nth-child(7) {
  animation-delay: 0.7s;
}

.ai-intel-grid>.webdev-item-knowza-grey:nth-child(8) {
  animation-delay: 0.8s;
}

/* extend table row animation to 8 rows */
.artwork-table-knowza tr:nth-child(5) {
  animation-delay: 0.5s;
}

.artwork-table-knowza tr:nth-child(6) {
  animation-delay: 0.6s;
}

.artwork-table-knowza tr:nth-child(7) {
  animation-delay: 0.7s;
}

.artwork-table-knowza tr:nth-child(8) {
  animation-delay: 0.8s;
}

/* tech stack */
.ai-tech-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  max-width: 900px;
  margin-inline: auto;
}

.ai-tech-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--knowza-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--knowza-black);
  background: #f5f8fb;
  border: 1px solid var(--knowza-border-light);
  padding: 0.45rem 1rem;
  border-radius: 50rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: default;
}

.ai-tech-tag:hover {
  background: rgba(7, 119, 189, 0.07);
  border-color: rgba(7, 119, 189, 0.25);
  color: var(--knowza-blue);
}

/* sectors section lead */
.ai-sectors-lead {
  font-family: var(--knowza-font-body);
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--knowza-muted);
  max-width: 50rem;
  margin-inline: auto;
}


.cf-line-group.is-invalid .cf-input,
.cf-line-group.is-invalid .cf-select,
.cf-line-group.is-invalid .cf-textarea {
  border-color: #dc3545;
}

.cf-line-group.is-valid .cf-input,
.cf-line-group.is-valid .cf-select,
.cf-line-group.is-valid .cf-textarea {
  border-color: #0a7c42;
}

.cf-error-msg {
  display: block;
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════
   FLOATING HOME BUTTON
═══════════════════════════════════════════════════════════ */

.float-home-btn {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 999;

  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  padding: 0.75rem 0.75rem 0.75rem 0.85rem;
  border-radius: 50rem;

  background: linear-gradient(135deg, #2aa8e6 0%, #0777bd 55%, #065a91 100%);
  color: #fff;
  text-decoration: none;

  font-family: var(--knowza-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  box-shadow: 0 0.4rem 1.5rem rgba(7, 119, 189, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  border: none;

  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease, gap 0.25s ease;
  cursor: pointer;
}

.float-home-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}

/* Label starts hidden, slides out on hover */
.float-home-label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.3s ease, opacity 0.3s ease, margin-left 0.3s ease;
}

/* Hover state */
@media (hover: hover) {
  .float-home-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.65rem 2rem rgba(7, 119, 189, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    filter: brightness(1.08);
    gap: 0.65rem;
    padding-right: 1.1rem;
  }

  .float-home-btn:hover .float-home-label {
    max-width: 60px;
    opacity: 1;
    margin-left: 0.1rem;
  }
}

/* Active / pressed state */
.float-home-btn:active {
  transform: translateY(-1px) scale(0.97);
}

/* Entrance animation */
@keyframes floatHomeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.float-home-btn {
  animation: floatHomeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 1s;
  /* Appears after page load */
}

/* ── Mobile adjustments ── */
@media (max-width: 575.98px) {
  .float-home-btn {
    bottom: 1rem;
    left: 1rem;
    padding: 0.65rem;
  }

  .float-home-btn svg {
    width: 20px;
    height: 20px;
  }

  /* Always show label on mobile for clarity */
  .float-home-label {
    max-width: 60px;
    opacity: 1;
    margin-left: 0.2rem;
    font-size: 0.7rem;
  }
}

/* ── Hide on home page (optional) ── */
body.home-page .float-home-btn,
body.page-index .float-home-btn {
  display: none !important;
}