:root {
  --spa-purple: #482D8F;
  --spa-purple-light: #6D53B5;
  --spa-red: #E63946;
  --spa-red-dark: #D32F2F;
  --spa-white: #ffffff;
  --spa-light: #F8F9FA;
  --spa-dark: #0B0E2A;
  --spa-muted: #4A4A4A;
  --spa-border: rgba(72, 45, 143, 0.08);
  --spa-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  --spa-shadow-hover: 0 20px 60px rgba(72, 45, 143, 0.12);
  --spa-radius: 16px;
  --spa-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* ═══════════════════════════════════════════════════════
   BASE & FLEXBOX ARCHITECTURE SHELL
═══════════════════════════════════════════════════════ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Prevent horizontal scrolling and keep layout within viewport */
html, body {
  overflow-x: hidden;
}

/* Ensure root containers don't exceed viewport width when zooming */
.spa-root, .spa-container, .spa-header, .spa-nav-panel {
  box-sizing: border-box;
  max-width: 100vw;
}

body {
  font-family: 'Outfit', sans-serif;
  color: var(--spa-dark);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
  background: radial-gradient(circle at 12% 12%, rgba(109, 83, 181, 0.14), transparent 20%),
              radial-gradient(circle at 88% 18%, rgba(230, 57, 70, 0.12), transparent 22%),
              linear-gradient(180deg, #f9f7ff 0%, #eef0fb 100%);
}

.lang-selector {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.62rem 0.95rem;
  border: 1px solid rgba(72, 45, 143, 0.16);
  border-radius: 999px;
  background: linear-gradient(135deg, #ffffff 0%, #f7f3ff 100%);
  color: #2b2344;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px rgba(35, 23, 77, 0.08);
  transition: all 0.2s ease;
}

.lang-btn:hover {
  border-color: #482d8f;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(35, 23, 77, 0.12);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  left: auto;
  min-width: 190px;
  background: #fff;
  border-radius: 0.95rem;
  border: 1px solid rgba(35, 23, 77, 0.1);
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.16);
  z-index: 2000;
  padding: 0.35rem 0;
  overflow: hidden;
}

.lang-menu[hidden] {
  display: none;
}

.lang-item {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
  text-align: left;
  color: #2b2344;
  font-size: 0.92rem;
  transition: background 0.18s ease;
}

.lang-item:hover {
  background: rgba(72, 45, 143, 0.08);
}

.lang-name {
  flex: 1;
}

@media (max-width: 768px) {
  .lang-selector {
    width: 100%;
  }

  .lang-btn {
    width: 100%;
    justify-content: flex-start;
    padding: 0.7rem 1rem;
  }

  .lang-menu {
    width: 100%;
    left: 0;
    right: 0;
  }

  .spa-hero-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .spa-hero-content {
    display: flex;
    flex-direction: column;
  }

  .spa-hero-visual {
    order: 1;
    margin-top: 0.25rem;
  }

  .spa-hero-content > .spa-tag,
  .spa-hero-content > .spa-hero-h1 {
    order: 2;
  }

  .spa-hero-content > .spa-hero-sub,
  .spa-hero-content > .spa-hero-actions,
  .spa-hero-content > .spa-compliance-badge {
    order: 3;
  }
}

/* Permanent structures */
.spa-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--spa-border);
  transition: var(--spa-transition);
}

.spa-header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.spa-root {
  flex-grow: 1; /* Pushes the footer down */
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: 80px; /* Offset for fixed header */
}

.spa-footer {
  flex-shrink: 0; /* Prevents footer from collapsing */
  background: #111430;
  color: #D1D5E3;
  padding: 5rem 0 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Containers */
.spa-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ═══════════════════════════════════════════════════════
   NAVIGATION BAR
═══════════════════════════════════════════════════════ */
.spa-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

.spa-logo-link {
  display: flex;
  align-items: center;
}

.spa-logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.spa-nav-panel {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.spa-nav-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
}

.spa-nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  color: var(--spa-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 50px;
  transition: var(--spa-transition);
  white-space: nowrap;
}

.spa-nav-link i {
  font-size: 1rem;
  opacity: 0.8;
}

.spa-nav-link:hover {
  color: var(--spa-purple);
  background: rgba(72, 45, 143, 0.05);
}

.spa-nav-link.active {
  color: var(--spa-white);
  background: var(--spa-purple);
}

.spa-nav-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.spa-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--spa-red);
  color: var(--spa-white);
  padding: 0.75rem 1.4rem;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.92rem;
  box-shadow: 0 4px 15px rgba(230, 57, 70, 0.2);
  transition: var(--spa-transition);
}

/* Compact boxed modifier for nav CTA */
.spa-nav-cta.boxed {
  padding: 0.45rem 0.6rem;
  border-radius: 12px;
  font-size: 0.86rem;
  min-width: 44px;
  height: 44px;
  justify-content: center;
  gap: 0.4rem;
}

.spa-nav-cta.boxed i {
  font-size: 1.05rem;
}

/* Hide the label on very small screens to keep header compact */
@media (max-width: 480px) {
  .spa-nav-cta.boxed span { display: none; }
}

/* Tabs / Navigation polish */
.spa-nav {
  padding: 0 1rem;
}

.spa-nav-links {
  gap: 0.25rem;
  align-items: center;
}

.spa-nav-link {
  position: relative;
  padding: 0.5rem 0.65rem;
  min-width: 0;
  justify-content: center;
  text-align: center;
  border: 1px solid transparent;
  background: transparent;
  white-space: nowrap;
}

.spa-nav-link i {
  margin-right: 0.4rem;
  opacity: 0.95;
}

.spa-nav-link::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  height: 3px;
  bottom: 6px;
  background: transparent;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s ease, background 0.22s ease;
}

.spa-nav-link:hover {
  color: var(--spa-purple);
  background: rgba(72,45,143,0.04);
  border-color: rgba(72,45,143,0.06);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(35,23,77,0.04);
}

.spa-nav-link:hover::after {
  background: rgba(72,45,143,0.08);
  transform: scaleX(1);
}

.spa-nav-link.active {
  color: var(--spa-white);
  background: linear-gradient(90deg, var(--spa-purple), var(--spa-purple-light));
  box-shadow: 0 10px 26px rgba(72,45,143,0.12);
  border-color: transparent;
}

.spa-nav-link.active::after {
  background: rgba(255,255,255,0.12);
  transform: scaleX(1);
}

.spa-nav-link:focus {
  outline: 3px solid rgba(72,45,143,0.12);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .spa-nav-panel .spa-nav-link {
    width: 100%;
    padding: 1rem 1.1rem;
    border-radius: 12px;
  }
  .spa-nav-panel .spa-nav-link::after { display: none; }
}

.spa-nav-cta:hover {
  background: var(--spa-red-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(230, 57, 70, 0.3);
}

/* Mobile Hamburger */
.spa-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.spa-hamburger span {
  width: 100%;
  height: 3px;
  background-color: var(--spa-purple);
  border-radius: 10px;
  transition: var(--spa-transition);
}

/* ═══════════════════════════════════════════════════════
   TAB ROUTING PANELS & ANIMATIONS
═══════════════════════════════════════════════════════ */
.spa-tab {
  display: none;
  width: 100%;
}

.spa-tab.active {
  display: block;
  animation: tabEnter 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes tabEnter {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════
   HERO SECTIONS
═══════════════════════════════════════════════════════ */
.spa-hero {
  position: relative;
  padding: 5rem 0 3rem;
  overflow: hidden;
}

.spa-hero-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.spa-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.15;
}

.spa-shape-purple {
  width: 400px;
  height: 400px;
  background: var(--spa-purple);
  top: -10%;
  right: -5%;
}

.spa-shape-red {
  width: 300px;
  height: 300px;
  background: var(--spa-red);
  bottom: -5%;
  left: -5%;
}

.spa-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: center;
}

.spa-hero-content {
  position: relative;
  padding: 2.5rem 2.2rem 2.5rem 2.2rem;
  background: var(--glass-bg);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 32px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--glass-shadow);
}

.spa-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--spa-purple);
  margin-bottom: 1.2rem;
  background: rgba(72, 45, 143, 0.08);
  padding: 0.4rem 1rem;
  border-radius: 50px;
}

.spa-tag-red {
  color: var(--spa-red);
  background: rgba(230, 57, 70, 0.08);
}

.spa-tag-purple {
  color: var(--spa-purple);
  background: rgba(72, 45, 143, 0.08);
}

.spa-hero-h1 {
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  font-weight: 900;
  line-height: 1.18;
  color: var(--spa-dark);
  margin-bottom: 1.5rem;
}

.spa-accent {
  color: var(--spa-purple);
  position: relative;
  display: inline-block;
}

.spa-accent::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 100%;
  height: 8px;
  background: rgba(230, 57, 70, 0.2);
  z-index: -1;
  border-radius: 4px;
}

.spa-hero-sub {
  font-size: 1.15rem;
  color: var(--spa-muted);
  margin-bottom: 2.5rem;
}

.spa-hero-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 2.2rem;
}

.spa-section-challenges {
  padding: 2rem 0;
}

.spa-challenges-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.8fr) minmax(240px, 1fr);
  gap: 1rem;
  align-items: center;
}

.spa-challenge-highlight {
  display: flex;
  gap: 1rem;
  padding: 1.8rem;
  border-radius: 28px;
  background: rgba(72, 45, 143, 0.08);
  border: 1px solid rgba(72, 45, 143, 0.12);
}

.spa-challenge-icon {
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(230, 57, 70, 0.12);
  color: var(--spa-red);
  font-size: 1.1rem;
}

.spa-challenge-highlight h3 {
  margin: 0 0 0.65rem;
  font-size: 1.15rem;
  font-weight: 800;
}

.spa-challenge-highlight p {
  margin: 0;
  color: var(--spa-muted);
  max-width: 44rem;
}

.spa-challenge-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.spa-challenge-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.2rem;
  border-radius: 24px;
  background: var(--spa-white);
  border: 1px solid rgba(72, 45, 143, 0.08);
  box-shadow: 0 15px 28px rgba(17, 24, 39, 0.05);
}

.spa-challenge-pill i {
  font-size: 1rem;
  color: var(--spa-red);
}

.spa-challenge-pill span {
  font-weight: 700;
  color: var(--spa-dark);
}

/* Buttons */
.spa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.8rem;
  border-radius: var(--spa-radius);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  cursor: pointer;
  transition: var(--spa-transition);
  border: 2px solid transparent;
}

.spa-btn-primary {
  background: var(--spa-red);
  color: var(--spa-white);
  box-shadow: 0 4px 15px rgba(230, 57, 70, 0.2);
}

.spa-btn-primary:hover {
  background: var(--spa-red-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(230, 57, 70, 0.3);
}

.spa-btn-secondary {
  background: var(--spa-white);
  color: var(--spa-dark);
  border-color: rgba(0, 0, 0, 0.08);
}

.spa-btn-secondary:hover {
  border-color: var(--spa-purple);
  color: var(--spa-purple);
  transform: translateY(-2px);
}

.spa-btn-outline {
  background: transparent;
  color: var(--spa-purple);
  border-color: var(--spa-purple);
}

.spa-btn-outline:hover {
  background: var(--spa-purple);
  color: var(--spa-white);
  transform: translateY(-2px);
}

.spa-btn-white {
  background: var(--spa-white);
  color: var(--spa-purple);
}

.spa-btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}

.spa-btn-outline-white {
  background: transparent;
  color: var(--spa-white);
  border-color: var(--spa-white);
}

.spa-btn-outline-white:hover {
  background: var(--spa-white);
  color: var(--spa-dark);
  transform: translateY(-2px);
}

.spa-btn-sm {
  padding: 0.6rem 1.2rem;
  font-size: 0.88rem;
  border-radius: 10px;
}

.spa-compliance-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #E8F5E9;
  color: #2E7D32;
  padding: 0.6rem 1.2rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.88rem;
}

.spa-compliance-link {
  color: #2E7D32;
  text-decoration: none;
  border-bottom: 2px dotted #2E7D32;
}

/* Hero Visuals */
.spa-hero-visual {
  position: relative;
  isolation: isolate;
  z-index: 0;
  align-self: start;
  margin-top: -1.4rem;
}

/* Services visual should not overflow its bounds */
.spa-visual-services {
  overflow: hidden;
  border-radius: 28px;
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  background: rgba(230, 57, 70, 0.06);
}

.spa-hero-visual > img,
.spa-hero-visual > .spa-hero-collage {
  display: block;
}

/* Pull hero visuals up for better tab opening visibility */
.spa-visual-home .spa-hero-collage,
.spa-page-hero .spa-hero-visual,
.spa-blog-hero .spa-visual-blog {
  margin-top: -1.4rem;
}

.spa-visual-home .spa-hero-collage {
  transform: translateY(-1.2rem);
}

.spa-visual-about .spa-page-hero-img,
.spa-visual-blog .spa-page-hero-img {
  transform: translateY(-0.8rem);
}

/* Services image stays within its container — no upward bleed */
.spa-visual-services .spa-page-hero-img {
  transform: none;
}

/* Lift blog hero image slightly more for better visibility */
.spa-blog-hero .spa-visual-blog {
  margin-top: -1.8rem;
}

.spa-visual-blog .spa-page-hero-img {
  transform: translateY(-1rem);
}

@media (max-width: 1024px) {
  .spa-hero-visual,
  .spa-visual-home .spa-hero-collage,
  .spa-page-hero .spa-hero-visual,
  .spa-blog-hero .spa-visual-blog {
    margin-top: 0;
    transform: none;
  }
}

.spa-visual-home::before,
.spa-visual-about::before,
.spa-visual-services::before,
.spa-visual-resources::before,
.spa-visual-cases::before,
.spa-visual-blog::before,
.spa-visual-contact::before {
  content: '';
  position: absolute;
  inset: auto;
  z-index: -1;
  border-radius: 42px;
  pointer-events: none;
}

.spa-visual-home::before {
  display: none;
}

.spa-visual-about::before {
  inset: 10px -10px -8px 10px;
  background: linear-gradient(135deg, rgba(72,45,143,0.10), rgba(230,57,70,0.08));
  transform: rotate(3deg);
}

.spa-visual-services::before {
  inset: 16px 8px -10px -8px;
  background: linear-gradient(135deg, rgba(230,57,70,0.12), rgba(72,45,143,0.08));
  transform: rotate(-2deg);
}

.spa-visual-resources::before {
  inset: -6px 10px 12px -6px;
  background: linear-gradient(135deg, rgba(72,45,143,0.12), rgba(255,255,255,0.7));
  transform: rotate(2deg);
}

.spa-visual-cases::before {
  inset: -10px -6px 14px 8px;
  background: linear-gradient(135deg, rgba(230,57,70,0.12), rgba(72,45,143,0.10));
  transform: rotate(-3deg);
}

.spa-visual-cases .spa-page-hero-img {
  clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
  object-fit: cover;
}

.spa-visual-blog::before {
  inset: 8px -8px -10px 10px;
  background: linear-gradient(135deg, rgba(72,45,143,0.08), rgba(230,57,70,0.10));
  transform: rotate(2deg);
}

.spa-visual-contact::before {
  inset: -8px 10px 12px -10px;
  background: linear-gradient(135deg, rgba(230,57,70,0.10), rgba(72,45,143,0.12));
  transform: rotate(-2deg);
}

.spa-visual-home .spa-hero-collage {
  border-radius: 44px;
  overflow: visible;
  border: 1px solid rgba(72,45,143,0.12);
  box-shadow: 0 22px 50px rgba(17,24,39,0.12);
}

.spa-visual-about .spa-page-hero-img,
.spa-visual-services .spa-page-hero-img,
.spa-visual-resources .spa-page-hero-img,
.spa-visual-cases .spa-page-hero-img,
.spa-visual-blog .spa-page-hero-img,
.spa-visual-contact .spa-page-hero-img {
  border-radius: 28px;
  border: 2px solid rgba(255,255,255,0.95);
  box-shadow: 0 20px 50px rgba(17,24,39,0.12);
}

.spa-visual-about .spa-page-hero-img {
  border-top-left-radius: 48px;
}

.spa-visual-services .spa-page-hero-img {
  border-bottom-right-radius: 48px;
}

.spa-visual-resources .spa-page-hero-img {
  border-top-right-radius: 48px;
}

.spa-visual-cases .spa-page-hero-img {
  border-bottom-left-radius: 48px;
}

.spa-visual-blog .spa-page-hero-img {
  border-radius: 34px;
}

.spa-visual-contact .spa-page-hero-img {
  border-radius: 36px;
  box-shadow: 0 24px 56px rgba(17,24,39,0.16);
}

/* ═══════════════════════════════════════════════════════
   SHAPED HERO IMAGE CONTAINERS (all 7 tabs)
   Pure CSS clip-path polygons — no extra files to upload.
   Home = brush stroke
   About = globe (circle)
   Services = jagged diamond (grid-square mosaic feel)
   Resources = paint drop
   Cases = paint splash
   Blog = speech-bubble blob (with a small chat tail)
   Contact = 6-lobe bloom blob
═══════════════════════════════════════════════════════ */
.spa-visual-home .spa-hero-img {
  clip-path: polygon(48.3% 100.0%, 41.09% 92.63%, 34.07% 85.01%, 26.81% 77.7%, 19.76% 70.11%, 14.0% 61.68%, 11.82% 57.95%, 4.59% 50.61%, 6.9% 50.62%, 0.0% 42.92%, 3.07% 43.68%, 2.1% 38.09%, 5.84% 39.07%, 6.98% 39.03%, 6.19% 31.5%, 8.41% 29.1%, 6.96% 25.59%, 6.1% 22.44%, 10.42% 18.15%, 14.46% 16.66%, 17.46% 13.6%, 19.91% 8.4%, 26.0% 9.98%, 25.58% 7.79%, 24.65% 2.35%, 30.6% 2.55%, 36.3% 0.0%, 44.71% 1.73%, 52.24% 4.59%, 56.04% 5.59%, 61.96% 8.37%, 69.79% 14.8%, 77.15% 21.97%, 83.82% 29.3%, 89.76% 36.45%, 96.97% 43.8%, 92.72% 44.8%, 94.01% 49.71%, 100.0% 58.17%, 97.49% 61.53%, 95.0% 63.45%, 89.16% 61.49%, 87.36% 65.53%, 89.46% 72.63%, 81.1% 68.24%, 84.63% 75.77%, 85.73% 81.48%, 82.45% 86.13%, 84.42% 89.72%, 86.03% 94.46%, 79.15% 90.45%, 74.98% 91.67%, 76.61% 99.05%, 70.81% 94.94%, 71.75% 98.31%, 69.24% 97.31%, 64.57% 96.97%, 59.71% 95.3%, 54.65% 90.47%, 50.66% 91.39%, 46.31% 92.73%, 49.45% 97.73%, 45.12% 94.25%, 41.52% 91.39%, 48.41% 99.19%, 64.18% 93.62%, 76.63% 95.46%, 45.21% 90.28%, 50.05% 90.55%, 18.28% 66.51%);
}

.spa-visual-about .spa-page-hero-img {
  clip-path: polygon(96.0% 50.0%, 95.43% 57.2%, 93.75% 64.21%, 90.99% 70.88%, 87.21% 77.04%, 82.53% 82.53%, 77.04% 87.21%, 70.88% 90.99%, 64.21% 93.75%, 57.2% 95.43%, 50.0% 96.0%, 42.8% 95.43%, 35.79% 93.75%, 29.12% 90.99%, 22.96% 87.21%, 17.47% 82.53%, 12.79% 77.04%, 9.01% 70.88%, 6.25% 64.21%, 4.57% 57.2%, 4.0% 50.0%, 4.57% 42.8%, 6.25% 35.79%, 9.01% 29.12%, 12.79% 22.96%, 17.47% 17.47%, 22.96% 12.79%, 29.12% 9.01%, 35.79% 6.25%, 42.8% 4.57%, 50.0% 4.0%, 57.2% 4.57%, 64.21% 6.25%, 70.88% 9.01%, 77.04% 12.79%, 82.53% 17.47%, 87.21% 22.96%, 90.99% 29.12%, 93.75% 35.79%, 95.43% 42.8%);
}

/* Services = elongated hexagon — clean geometric cut that keeps the
   full photo readable (unlike the other organic/jagged shapes) */
.spa-visual-services .spa-page-hero-img {
  clip-path: polygon(22% 0%, 78% 0%, 100% 50%, 78% 100%, 22% 100%, 0% 50%);
}

.spa-visual-resources .spa-page-hero-img {
  clip-path: polygon(43.88% 99.87%, 38.0% 98.88%, 32.31% 97.3%, 26.86% 95.17%, 21.74% 92.5%, 17.02% 89.33%, 12.77% 85.7%, 9.05% 81.66%, 5.91% 77.27%, 3.4% 72.59%, 1.56% 67.68%, 0.42% 62.62%, 0.0% 57.48%, 0.3% 52.33%, 1.32% 47.25%, 3.02% 42.3%, 5.35% 37.55%, 8.39% 33.11%, 12.18% 29.12%, 16.39% 25.45%, 18.66% 20.85%, 18.69% 15.69%, 21.62% 11.7%, 26.69% 13.21%, 26.95% 18.36%, 29.0% 23.15%, 33.89% 24.35%, 35.73% 19.47%, 38.0% 14.81%, 43.36% 16.11%, 48.61% 17.34%, 51.42% 12.94%, 50.96% 7.85%, 50.06% 2.8%, 54.5% 0.0%, 57.46% 3.87%, 56.53% 8.95%, 57.48% 14.04%, 61.02% 17.73%, 64.67% 14.78%, 65.4% 9.69%, 70.57% 9.01%, 71.82% 13.75%, 71.32% 18.79%, 74.16% 23.28%, 79.47% 24.26%, 81.64% 19.72%, 84.35% 15.46%, 88.62% 18.21%, 88.93% 23.36%, 89.8% 28.42%, 92.4% 33.07%, 94.87% 37.77%, 96.98% 42.6%, 98.64% 47.55%, 99.7% 52.63%, 100.0% 57.78%, 99.55% 62.92%, 98.38% 67.98%, 96.52% 72.88%, 94.0% 77.56%, 90.84% 81.94%, 87.09% 85.95%, 82.79% 89.54%, 78.03% 92.67%, 72.89% 95.3%, 67.43% 97.41%, 61.73% 98.97%, 55.84% 99.85%, 49.86% 100.0%);
}

.spa-visual-cases .spa-page-hero-img {
  clip-path: polygon(70.81% 100.0%, 67.02% 90.64%, 60.94% 84.37%, 56.67% 93.08%, 49.93% 94.77%, 42.13% 93.66%, 41.07% 83.43%, 35.52% 89.26%, 30.48% 96.16%, 30.78% 86.81%, 32.13% 80.74%, 25.84% 83.9%, 29.13% 74.6%, 21.46% 77.75%, 14.03% 75.71%, 18.72% 67.87%, 15.89% 61.82%, 17.22% 55.45%, 10.93% 51.2%, 2.28% 47.49%, 0.0% 38.21%, 8.37% 40.32%, 15.46% 47.3%, 17.86% 44.53%, 15.88% 37.88%, 18.94% 35.06%, 12.87% 27.36%, 19.36% 23.6%, 23.67% 18.9%, 32.2% 22.77%, 30.27% 15.63%, 24.12% 7.81%, 28.5% 0.0%, 35.5% 6.01%, 39.45% 15.69%, 42.24% 14.23%, 43.65% 8.3%, 48.37% 11.56%, 50.87% 4.36%, 55.19% 6.78%, 59.87% 0.1%, 60.25% 9.88%, 61.98% 18.93%, 64.25% 9.17%, 70.23% 14.31%, 67.91% 24.05%, 72.32% 17.55%, 78.08% 10.07%, 84.24% 16.25%, 80.36% 25.48%, 82.4% 32.64%, 89.22% 25.8%, 91.16% 34.04%, 85.51% 41.25%, 93.46% 38.81%, 100.0% 42.22%, 97.49% 50.56%, 96.95% 59.07%, 91.28% 61.64%, 91.16% 65.52%, 91.06% 71.3%, 83.01% 69.67%, 90.75% 75.01%, 94.12% 83.29%, 85.69% 83.49%, 79.09% 75.96%, 80.15% 83.29%, 74.46% 81.38%, 69.37% 84.43%, 75.0% 92.86%);
}

.spa-blog-hero .spa-hero-img {
  clip-path: polygon(86.74% 44.0%, 88.1% 49.28%, 87.03% 54.46%, 83.97% 58.9%, 79.81% 62.36%, 75.45% 65.06%, 71.43% 67.43%, 67.8% 69.8%, 64.25% 72.15%, 60.48% 74.12%, 56.37% 75.25%, 52.12% 75.29%, 48.0% 74.48%, 44.13% 73.4%, 40.31% 72.69%, 36.12% 72.67%, 31.2% 73.11%, 25.57% 73.23%, 30.0% 72.0%, 14.0% 86.0%, 40.0% 78.0%, 19.83% 72.17%, 14.97% 69.34%, 12.0% 64.79%, 11.43% 59.15%, 13.03% 53.37%, 15.87% 48.23%, 18.74% 44.0%, 20.68% 40.4%, 21.35% 36.86%, 21.15% 32.88%, 20.92% 28.36%, 21.5% 23.66%, 23.35% 19.35%, 26.4% 15.85%, 30.25% 13.26%, 34.46% 11.3%, 38.77% 9.56%, 43.24% 7.88%, 48.0% 6.48%, 53.01% 5.98%, 57.91% 7.01%, 62.15% 9.85%, 65.2% 14.22%, 66.96% 19.29%, 67.91% 24.09%, 68.92% 27.95%, 70.89% 30.79%, 74.25% 33.13%, 78.71% 35.77%, 83.29% 39.35%);
}

.spa-visual-contact .spa-page-hero-img {
  clip-path: polygon(86.0% 50.0%, 91.06% 54.32%, 93.59% 59.26%, 92.38% 63.77%, 87.72% 66.79%, 81.18% 68.0%, 74.84% 68.05%, 70.39% 68.36%, 68.36% 70.39%, 68.05% 74.84%, 68.0% 81.18%, 66.79% 87.72%, 63.77% 92.38%, 59.26% 93.59%, 54.32% 91.06%, 50.0% 86.0%, 46.79% 80.54%, 44.29% 76.84%, 41.52% 76.1%, 37.51% 78.05%, 32.0% 81.18%, 25.73% 83.4%, 20.18% 83.11%, 16.89% 79.82%, 16.6% 74.27%, 18.82% 68.0%, 21.95% 62.49%, 23.9% 58.48%, 23.16% 55.71%, 19.46% 53.21%, 14.0% 50.0%, 8.94% 45.68%, 6.41% 40.74%, 7.62% 36.23%, 12.28% 33.21%, 18.82% 32.0%, 25.16% 31.95%, 29.61% 31.64%, 31.64% 29.61%, 31.95% 25.16%, 32.0% 18.82%, 33.21% 12.28%, 36.23% 7.62%, 40.74% 6.41%, 45.68% 8.94%, 50.0% 14.0%, 53.21% 19.46%, 55.71% 23.16%, 58.48% 23.9%, 62.49% 21.95%, 68.0% 18.82%, 74.27% 16.6%, 79.82% 16.89%, 83.11% 20.18%, 83.4% 25.73%, 81.18% 32.0%, 78.05% 37.51%, 76.1% 41.52%, 76.84% 44.29%, 80.54% 46.79%);
}

/* Hero Visual Collage */
.spa-hero-collage {
  position: relative;
  width: 100%;
  aspect-ratio: 1.1 / 1;
}

/* Blog page hero */
.spa-blog-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f7f3ff 100%);
  padding-top: 4rem;
  padding-bottom: 2rem;
}

.spa-blog-hero .spa-hero-content {
  max-width: 520px;
}

.spa-blog-hero .spa-hero-h1 {
  font-size: 3.4rem;
  line-height: 1.02;
  margin-bottom: 1.1rem;
}

.spa-blog-hero .spa-hero-sub {
  font-size: 1rem;
  color: var(--spa-muted);
  max-width: 40rem;
  margin-bottom: 2rem;
}

.spa-blog-hero .spa-search-bar {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border: 1px solid rgba(72,45,143,0.12);
  border-radius: 999px;
  box-shadow: 0 18px 50px rgba(17,24,39,0.08);
}

.spa-blog-hero .spa-search-bar input {
  padding: 1rem 1.4rem;
  border-radius: 999px 0 0 999px;
  border: none;
  min-width: 0;
}

.spa-blog-hero .spa-search-btn {
  border-radius: 0 999px 999px 0;
  background: var(--spa-purple);
  width: 72px;
  border: none;
  color: var(--spa-white);
}

.spa-blog-hero .spa-visual-blog {
  align-self: center;
  position: relative;
}

.spa-blog-hero .spa-visual-blog::after {
  content: '';
  position: absolute;
  inset: 14% -8% auto auto;
  width: 54%;
  height: 52%;
  background: rgba(72,45,143,0.08);
  border-radius: 50%;
  z-index: 0;
}

.spa-blog-hero .spa-hero-img {
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(17,24,39,0.15);
  position: relative;
  z-index: 1;
}

.spa-collage-bg {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 90%;
  height: 90%;
  background: radial-gradient(circle, rgba(72,45,143,0.06) 0%, rgba(230,57,70,0.03) 100%);
  border-radius: 50% 30% 70% 40% / 50% 60% 30% 70%;
  animation: floatBG 15s ease-in-out infinite;
  z-index: 1;
}

.spa-hero-img {
  position: absolute;
  inset: 0;
  width: 90%;
  height: 90%;
  object-fit: cover;
  border-radius: 40px;
  z-index: 5;
  box-shadow: var(--spa-shadow);
  border: 4px solid var(--spa-white);
}

.spa-hero-badge {
  position: absolute;
  z-index: 3;
  background: var(--spa-white);
  padding: 0.8rem 1.5rem;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: floatBadge 6s ease-in-out infinite;
}

.spa-badge-purple {
  top: 20%;
  left: -5%;
  border-left: 4px solid var(--spa-purple);
}

.spa-badge-red {
  bottom: 15%;
  right: -5%;
  border-left: 4px solid var(--spa-red);
  animation-delay: -3s;
}

.spa-hero-badge strong {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--spa-dark);
}

.spa-hero-badge span {
  font-size: 0.72rem;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--spa-muted);
}

@keyframes floatBG {
  0%, 100% { border-radius: 50% 30% 70% 40% / 50% 60% 30% 70%; }
  50% { border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%; }
}

@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Page Hero (for sub-pages) */
.spa-page-hero {
  background: linear-gradient(135deg, rgba(72,45,143,0.03) 0%, rgba(230,57,70,0.02) 100%);
  padding: 4.5rem 0 3.5rem;
  border-bottom: 1px solid var(--spa-border);
}

/* ── Services hero: bigger heading that wraps across 3 lines ── */
#tab-services .spa-page-hero .spa-hero-h1 {
  font-size: 3.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

#tab-services .spa-page-hero .spa-hero-sub {
  font-size: 1rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.spa-page-hero.spa-resources-hero {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background: linear-gradient(135deg, rgba(72,45,143,0.08) 0%, rgba(244,246,250,1) 100%);
}

.spa-page-hero.spa-resources-hero .spa-hero-grid {
  align-items: flex-start;
  gap: 2.5rem;
}

.spa-page-hero.spa-resources-hero .spa-hero-content {
  max-width: 680px;
}

.spa-page-hero.spa-resources-hero .spa-hero-h1 {
  font-size: clamp(2.5rem, 4vw, 4rem);
  margin-bottom: 1.25rem;
}

.spa-page-hero.spa-resources-hero .spa-search-bar {
  max-width: 520px;
}

/* Nudge the hero visual up so the full image is visible on tab open */
.spa-page-hero.spa-resources-hero .spa-hero-visual {
  align-self: start;
  margin-top: -1.6rem;
}

@media (max-width: 1024px) {
  .spa-page-hero.spa-resources-hero .spa-hero-visual {
    /* remove negative offset on smaller screens so layout stays stable */
    margin-top: 0;
  }
}

.spa-page-hero.spa-resources-hero .spa-resource-feature-tabs {
  margin-top: 2.5rem;
}

.spa-page-hero-img {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  object-position: center;
  border-radius: 24px;
  box-shadow: var(--spa-shadow);
  border: 1px solid var(--spa-border);
  display: block;
}

/* Services image: fully contained within the hexagon clip-path card */
.spa-visual-services .spa-page-hero-img {
  max-height: none;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  display: block;
}

/* Resources tab hero feature tabs */
.spa-resource-feature-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.spa-resource-feature {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border: 1px solid rgba(72,45,143,0.12);
  border-radius: 20px;
  padding: 1rem 1.1rem;
  background: #ffffff;
  color: var(--spa-dark);
  font-weight: 700;
  text-align: left;
  transition: all 0.25s ease;
  cursor: pointer;
}

.spa-resource-feature i {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(72,45,143,0.08);
  color: var(--spa-purple);
  font-size: 1rem;
}

.spa-resource-feature.active,
.spa-resource-feature:hover {
  border-color: var(--spa-purple);
  background: rgba(72,45,143,0.08);
  color: var(--spa-purple);
}

.spa-resource-feature span {
  display: block;
}

.spa-section-header-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.spa-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

.spa-resource-card-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 0;
  color: var(--spa-muted);
  font-weight: 600;
}

.spa-resource-grid .spa-dynamic-card {
  min-height: 100%;
}

/* ═══════════════════════════════════════════════════════
   SECTIONS & GRIDS
═══════════════════════════════════════════════════════ */
.spa-section {
  padding: 6.5rem 0;
}

.spa-section-white {
  background-color: var(--spa-white);
}

.spa-section-light {
  background-color: var(--spa-light);
}

.spa-section-header {
  max-width: 650px;
  margin-bottom: 4rem;
}

.spa-section-header h2 {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.25;
}

/* Grids */
.spa-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.spa-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.spa-content-title {
  font-size: 2.1rem;
  font-weight: 800;
  margin-bottom: 1.8rem;
  line-height: 1.15;
}

.spa-two-col {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 3.5rem;
  align-items: center;
}

.spa-center {
  text-align: center;
}

/* ═══════════════════════════════════════════════════════
   STATS ROW / STATS BAR
═══════════════════════════════════════════════════════ */
.spa-stats-bar {
  background: var(--spa-white);
  padding: 3rem 0;
  border-bottom: 1px solid var(--spa-border);
}

.spa-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.spa-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.spa-stat-icon {
  font-size: 1.8rem;
  color: var(--spa-purple);
  width: 50px;
  height: 50px;
  background: rgba(72, 45, 143, 0.06);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spa-stat-body h2 {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--spa-dark);
  line-height: 1.2;
}

.spa-stat-body p {
  font-size: 0.82rem;
  color: var(--spa-muted);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════
   SERVICE CARDS (HOME PREVIEW)
═══════════════════════════════════════════════════════ */
.spa-service-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--spa-radius);
  padding: 2.2rem;
  transition: var(--spa-transition);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--glass-shadow);
}

.spa-service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 72px rgba(72, 45, 143, 0.16);
  border-color: rgba(255, 255, 255, 0.8);
}

.spa-service-icon {
  width: 54px;
  height: 54px;
  background: rgba(230, 57, 70, 0.06);
  color: var(--spa-red);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
  transition: var(--spa-transition);
}

.spa-service-card:hover .spa-service-icon {
  background: var(--spa-purple);
  color: var(--spa-white);
}

.spa-service-card h3 {
  font-size: 1.22rem;
  font-weight: 800;
  margin-bottom: 0.8rem;
  color: var(--spa-dark);
}

.spa-service-card p {
  font-size: 0.92rem;
  color: var(--spa-muted);
  margin-bottom: 1.5rem;
}

/* Expandable service details */
.spa-service-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.36s ease;
  margin-top: 0.8rem;
  background: rgba(248,249,250,0.95);
  border-radius: 12px;
  padding: 0 1rem;
}

.spa-service-details p {
  margin: 0.9rem 0;
  color: var(--spa-muted);
  font-size: 0.92rem;
}

.spa-learn-more i.rotated {
  transform: rotate(180deg);
  transition: transform 0.28s ease;
}

.spa-link {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--spa-purple);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(72, 45, 143, 0.18);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 45px rgba(72, 45, 143, 0.08);
  transition: var(--spa-transition);
}

.spa-link:hover {
  background: rgba(72, 45, 143, 0.1);
  color: var(--spa-dark);
  transform: translateY(-1px);
  box-shadow: 0 22px 48px rgba(72, 45, 143, 0.14);
}

.spa-link i {
  transition: var(--spa-transition);
}

.spa-link:hover i {
  transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════
   OUTCOMES & VALUES
═══════════════════════════════════════════════════════ */
.spa-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.spa-outcome-card {
  background: var(--glass-bg);
  border-radius: var(--spa-radius);
  padding: 2rem 1.8rem;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: var(--spa-transition);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.spa-outcome-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 64px rgba(72, 45, 143, 0.14);
}

.spa-outcome-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1.4rem;
}

.spa-icon-purple {
  background: rgba(72, 45, 143, 0.06);
  color: var(--spa-purple);
}

.spa-icon-red {
  background: rgba(230, 57, 70, 0.06);
  color: var(--spa-red);
}

.spa-icon-green {
  background: rgba(46, 125, 50, 0.06);
  color: #2E7D32;
}

.spa-outcome-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 0.6rem;
}

.spa-outcome-card p {
  font-size: 0.88rem;
  color: var(--spa-muted);
}

/* ═══════════════════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════════════════ */
.spa-testimonial-card {
  background: var(--spa-white);
  border: 1px solid var(--spa-border);
  border-radius: var(--spa-radius);
  padding: 2.2rem;
  box-shadow: var(--spa-shadow);
  position: relative;
}

.spa-quote-icon {
  font-size: 1.8rem;
  color: rgba(72, 45, 143, 0.1);
  margin-bottom: 1.2rem;
}

.spa-testimonial-card p {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--spa-muted);
  margin-bottom: 1.8rem;
  line-height: 1.6;
}

.spa-testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border-top: 1px solid var(--spa-border);
  padding-top: 1rem;
}

.spa-testimonial-author img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.spa-testimonial-author h5 {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--spa-dark);
}

.spa-testimonial-author p {
  font-size: 0.72rem;
  color: var(--spa-muted);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0;
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════
   CTA BANNER
═══════════════════════════════════════════════════════ */
.spa-cta-banner {
  background: linear-gradient(135deg, var(--spa-purple) 0%, #201347 100%);
  color: var(--spa-white);
  padding: 5.5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.spa-cta-banner::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: var(--spa-red);
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.15;
  bottom: -20%;
  right: -10%;
  pointer-events: none; /* ensure decorative element doesn't block taps */
}

.spa-cta-content {
  max-width: 650px;
  margin: 0 auto;
}

/* CTA card styling */
.spa-cta-banner {
  display: flex;
  justify-content: center;
  align-items: center;
}
.spa-cta-content {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border-radius: 20px;
  padding: 2rem 2.4rem;
  box-shadow: 0 20px 50px rgba(8,12,30,0.45);
  border: 1px solid rgba(255,255,255,0.06);
  text-align: center;
  position: relative;
  z-index: 1; /* keep content above decorative shapes */
}
.spa-cta-content h2 { margin-top: 0; }

/* CTA buttons as card controls */
.spa-cta-actions { margin-top: 0.6rem; }
.spa-cta-actions .spa-btn { min-width: 200px; }

/* Active state for CTA buttons (matches nav active) */
.spa-btn.active, .spa-btn[data-tab].active {
  color: var(--spa-white) !important;
  background: linear-gradient(90deg, var(--spa-purple), var(--spa-purple-light)) !important;
  box-shadow: 0 18px 40px rgba(72,45,143,0.18) !important;
  border-color: transparent !important;
}

/* Make outline-style button adapt when active */
.spa-btn-outline-white.active {
  background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  color: var(--spa-white) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

.spa-cta-content h2 {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.spa-cta-content p {
  font-size: 1.05rem;
  opacity: 0.9;
  margin-bottom: 2.2rem;
}

.spa-cta-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* Make CTA visually consistent and responsive across tabs */
.shared-cta {
  border-top: 1px solid rgba(255,255,255,0.04);
}

@media (max-width: 768px) {
  .spa-cta-banner {
    padding: 3.2rem 0;
  }

  .spa-cta-content h2 {
    font-size: 1.6rem;
    line-height: 1.2;
  }

  .spa-cta-content p {
    font-size: 0.98rem;
    margin-bottom: 1rem;
  }

  .spa-cta-actions {
    flex-direction: column;
    gap: 0.8rem;
  }

  .spa-cta-actions .spa-btn {
    width: 80%;
    margin: 0 auto;
  }
}

@media (max-width: 420px) {
  .spa-cta-actions .spa-btn {
    width: 100%;
    padding: 0.95rem 1rem;
    font-size: 0.98rem;
  }
}

/* ═══════════════════════════════════════════════════════
   ABOUT PAGE DETAILS
═══════════════════════════════════════════════════════ */
.spa-about-text p {
  margin-bottom: 1.2rem;
  color: var(--spa-muted);
}

.spa-about-stats-col {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.spa-about-stat-card {
  background: var(--spa-white);
  border: 1px solid var(--spa-border);
  padding: 1.8rem;
  border-radius: var(--spa-radius);
  box-shadow: var(--spa-shadow);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.spa-counter {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
}

.spa-counter-purple {
  color: var(--spa-purple);
}

.spa-about-stat-card p {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--spa-muted);
}

/* Values Grid */
.spa-values-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.2rem;
}

.spa-value-card {
  background: var(--spa-white);
  border-radius: var(--spa-radius);
  padding: 1.8rem 1.2rem;
  border: 1px solid var(--spa-border);
  text-align: center;
  box-shadow: var(--spa-shadow);
}

.spa-value-icon {
  font-size: 1.6rem;
  color: var(--spa-purple);
  margin-bottom: 1rem;
}

.spa-value-card h4 {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.spa-value-card p {
  font-size: 0.8rem;
  color: var(--spa-muted);
  line-height: 1.5;
}

/* Mission & Vision Row */
.spa-mv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.spa-mv-card {
  display: flex;
  flex-direction: column;
  background: var(--spa-white);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--spa-shadow);
  border: 1px solid var(--spa-border);
}

.spa-mv-card-reverse {
  flex-direction: column;
}

.spa-mv-img-wrap {
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.spa-mv-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}

.spa-mv-card:hover .spa-mv-img-wrap img {
  transform: scale(1.05);
}

.spa-mv-body {
  padding: 2.5rem;
  flex-grow: 1;
}

.spa-mv-purple {
  border-top: 4px solid var(--spa-purple);
}

.spa-mv-red {
  border-top: 4px solid var(--spa-red);
}

.spa-mv-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1.2rem;
}

.spa-mv-purple .spa-mv-icon {
  background: rgba(72, 45, 143, 0.06);
  color: var(--spa-purple);
}

.spa-mv-red .spa-mv-icon {
  background: rgba(230, 57, 70, 0.06);
  color: var(--spa-red);
}

.spa-mv-body h3 {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 0.6rem;
}

.spa-mv-body p {
  font-size: 0.92rem;
  color: var(--spa-muted);
}

/* Timeline Approach */
.spa-timeline {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  padding-left: 2rem;
}

.spa-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 30px;
  width: 2px;
  height: 100%;
  background: var(--spa-border);
}

.spa-timeline-item {
  position: relative;
  padding-bottom: 2.5rem;
}

.spa-timeline-item:last-child {
  padding-bottom: 0;
}

.spa-tl-circle {
  position: absolute;
  left: -20px;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  border: 3px solid var(--spa-white);
  box-shadow: var(--spa-shadow);
  z-index: 2;
}

.spa-tl-purple {
  background: var(--spa-purple);
  color: var(--spa-white);
}

.spa-tl-red {
  background: var(--spa-red);
  color: var(--spa-white);
}

.spa-tl-body {
  padding-left: 2.2rem;
}

.spa-tl-body h4 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
}

.spa-tl-body p {
  font-size: 0.92rem;
  color: var(--spa-muted);
}

/* ═══════════════════════════════════════════════════════
   SERVICES PAGE PILLARS & ACCORDIONS
═══════════════════════════════════════════════════════ */
.spa-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.spa-pillar-card {
  background: var(--spa-white);
  border-radius: 20px;
  padding: 2.5rem;
  border: 1px solid var(--spa-border);
  box-shadow: var(--spa-shadow);
  transition: var(--spa-transition);
}

.spa-pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--spa-shadow-hover);
}

.spa-pillar-hdr {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.spa-pillar-ico {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.spa-pillar-purple .spa-pillar-ico { background: rgba(72, 45, 143, 0.08); color: var(--spa-purple); }
.spa-pillar-red .spa-pillar-ico { background: rgba(230, 57, 70, 0.08); color: var(--spa-red); }
.spa-pillar-green .spa-pillar-ico { background: rgba(46, 125, 50, 0.08); color: #2E7D32; }
.spa-pillar-orange .spa-pillar-ico { background: rgba(239, 108, 0, 0.08); color: #EF6C00; }

.spa-pillar-hdr h3 {
  font-size: 1.3rem;
  font-weight: 800;
}

.spa-pillar-desc {
  font-size: 0.95rem;
  color: var(--spa-muted);
  margin-bottom: 1.5rem;
}

/* Accordion Drawer */
.spa-accordion-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1.2rem;
  background: var(--spa-light);
  border: 1px solid var(--spa-border);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--spa-dark);
  cursor: pointer;
  transition: var(--spa-transition);
}

.spa-accordion-btn:hover {
  border-color: var(--spa-purple);
  color: var(--spa-purple);
  background: var(--spa-white);
}

.spa-chevron {
  transition: transform 0.3s;
}

.spa-accordion-btn[aria-expanded="true"] .spa-chevron {
  transform: rotate(180deg);
}

.spa-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

.spa-accordion-list {
  list-style: none;
  padding-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.spa-accordion-list li {
  font-size: 0.88rem;
  color: var(--spa-muted);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.spa-accordion-list li i {
  color: #2E7D32;
  font-size: 0.82rem;
}

/* ═══════════════════════════════════════════════════════
   RESOURCES & BLOG SEARCH / SIDEBAR
═══════════════════════════════════════════════════════ */
.spa-search-bar {
  display: flex;
  background: var(--spa-white);
  padding: 0.4rem;
  border-radius: 50px;
  box-shadow: var(--spa-shadow);
  border: 1px solid var(--spa-border);
  max-width: 550px;
  margin-top: 1.8rem;
}

.spa-search-bar input {
  flex-grow: 1;
  border: none;
  outline: none;
  padding: 0.75rem 1.5rem;
  font-family: inherit;
  font-size: 0.95rem;
  background: transparent;
}

.spa-search-btn {
  background: var(--spa-purple);
  border: none;
  color: var(--spa-white);
  min-width: 44px;
  height: 44px;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1.4rem;
  font-size: 0.92rem;
  font-weight: 700;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--spa-transition);
}

.spa-search-btn:hover {
  background: var(--spa-purple-light);
  transform: translateY(-1px);
}

/* Sidebar Layout */
.spa-sidebar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.spa-sidebar-main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.spa-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.spa-sidebar-box {
  background: var(--spa-white);
  border: 1px solid rgba(72,45,143,0.08);
  border-radius: 28px;
  padding: 1.8rem;
  box-shadow: 0 22px 56px rgba(17,24,39,0.08);
}

.spa-sidebar-box h4 {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 1.2rem;
  border-bottom: 2px solid rgba(72,45,143,0.08);
  padding-bottom: 0.8rem;
}

.spa-sidebar-box h4 {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 1.2rem;
  border-bottom: 2px solid var(--spa-light);
  padding-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.spa-sidebar-box h4 i {
  color: var(--spa-purple);
}

.spa-sidebar-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.spa-sidebar-list li a {
  font-size: 0.9rem;
  color: var(--spa-dark);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.4;
  display: block;
}

.spa-sidebar-list li a:hover {
  color: var(--spa-purple);
}

.spa-sidebar-cta-box {
  background: linear-gradient(135deg, rgba(72,45,143,0.06) 0%, rgba(230,57,70,0.02) 100%);
  border-color: rgba(72, 45, 143, 0.12);
}

.spa-sidebar-cta-box h4 {
  border-color: rgba(72, 45, 143, 0.1);
}

.spa-sidebar-cta-box p {
  font-size: 0.88rem;
  color: var(--spa-muted);
  margin-bottom: 1.2rem;
}

.spa-sidebar-dark {
  background: #111430;
  color: var(--spa-white);
  border: none;
}

.spa-sidebar-dark h4 {
  color: var(--spa-white);
  border-color: rgba(255, 255, 255, 0.08);
}

.spa-sidebar-dark h4 i {
  color: var(--spa-red);
}

.spa-sidebar-dark p {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-bottom: 1.2rem;
}

.spa-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.spa-newsletter-form input {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--spa-white);
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
}

.spa-newsletter-form input:focus {
  border-color: var(--spa-purple-light);
}

/* Tag Cloud (Blog) */
.spa-tag-cloud {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  width: 100%;
}

.spa-cat-tag {
  width: 100%;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(72,45,143,0.12);
  padding: 0.95rem 1rem;
  border-radius: 16px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--spa-dark);
  cursor: pointer;
  transition: var(--spa-transition);
}

.spa-cat-tag:hover, .spa-cat-tag.active {
  background: var(--spa-purple);
  color: var(--spa-white);
  border-color: var(--spa-purple);
}

/* Content Loading Status */
.spa-resource-card-loading {
  grid-column: span 2;
  text-align: center;
  padding: 4rem;
  color: var(--spa-muted);
  font-weight: 600;
}

/* Dynamic Cards (Resources, Blog, Cases) */
.spa-dynamic-card {
  background: var(--spa-white);
  border: 1px solid rgba(72,45,143,0.08);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(17,24,39,0.08);
  display: flex;
  flex-direction: column;
  transition: var(--spa-transition);
}

.spa-dynamic-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 70px rgba(17,24,39,0.12);
}

.spa-card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.spa-card-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(72,45,143,0.95);
  color: #fff;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.spa-card-body {
  padding: 1.8rem;
}

.spa-card-body h3 {
  font-size: 1.2rem;
  margin-bottom: 0.9rem;
}

.spa-card-body p {
  font-size: 0.95rem;
  color: var(--spa-muted);
  margin-bottom: 1.3rem;
  line-height: 1.75;
}

.spa-card-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(72,45,143,0.08);
}

.spa-card-footer a {
  color: var(--spa-purple);
  font-weight: 700;
  text-decoration: none;
}

.spa-card-footer a:hover {
  color: var(--spa-purple-light);
}

  .spa-card-expand {
    background: none;
    border: none;
    color: var(--spa-purple);
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    font-size: 0.95rem;
    transition: color 0.25s ease;
  }

  .spa-card-expand:hover {
    color: var(--spa-purple-light);
  }

  .spa-card-full {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.35s ease;
  }

  .spa-card-full p {
    margin: 0;
  }

  .spa-dynamic-card.expanded .spa-card-full {
    max-height: 1000px;
    opacity: 1;
  }

  .spa-dynamic-card.expanded .spa-card-summary {
    margin-bottom: 1rem;
  }

.spa-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spa-card-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--spa-purple);
  color: var(--spa-white);
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.spa-card-body {
  padding: 1.8rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.spa-card-date {
  font-size: 0.75rem;
  color: var(--spa-muted);
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.spa-card-body h3 {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 0.8rem;
  color: var(--spa-dark);
}

.spa-card-body p {
  font-size: 0.88rem;
  color: var(--spa-muted);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.spa-case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: auto;
  font-size: 0.82rem;
  color: var(--spa-purple);
  font-weight: 700;
}

.spa-case-meta span {
  background: rgba(72, 45, 143, 0.08);
  padding: 0.65rem 0.9rem;
  border-radius: 999px;
}

.spa-card-footer {
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px solid var(--spa-border);
}

/* ═══════════════════════════════════════════════════════
   CONTACT TAB DETAILS
═══════════════════════════════════════════════════════ */
.spa-contact-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
}

.spa-response-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(72, 45, 143, 0.08);
  color: var(--spa-purple);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 1.5rem;
}

.spa-contact-form-card {
  background: var(--spa-white);
  border: 1px solid var(--spa-border);
  border-radius: 24px;
  padding: 3rem 2.5rem;
  box-shadow: var(--spa-shadow);
}

.spa-contact-form-card h3 {
  font-size: 1.45rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
}

.spa-form-subtitle {
  font-size: 0.9rem;
  color: var(--spa-muted);
  margin-bottom: 2rem;
}

/* Form inputs & structure */
.spa-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.spa-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

.spa-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.spa-field label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--spa-dark);
}

.spa-req {
  color: var(--spa-red);
}

.spa-field input, .spa-field select, .spa-field textarea {
  padding: 0.8rem 1.1rem;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-family: inherit;
  font-size: 0.92rem;
  background: var(--spa-white);
  outline: none;
  transition: var(--spa-transition);
}

.spa-field input:focus, .spa-field select:focus, .spa-field textarea:focus {
  border-color: var(--spa-purple);
  box-shadow: 0 0 0 3px rgba(72, 45, 143, 0.08);
}

.spa-field-err {
  font-size: 0.75rem;
  color: var(--spa-red);
  font-weight: 700;
  height: 14px;
}

.spa-submit-btn {
  margin-top: 0.5rem;
  width: auto;
  align-self: flex-start;
}

/* Alert States */
.spa-alert {
  padding: 1rem 1.2rem;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  line-height: 1.4;
}

.spa-alert-success {
  background: #E8F5E9;
  color: #2E7D32;
  border: 1px solid #C8E6C9;
}

.spa-alert-error {
  background: #FFEBEE;
  color: #C62828;
  border: 1px solid #FFCDD2;
}

/* Contact Info Area */
.spa-contact-info {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.spa-contact-info h3 {
  font-size: 1.45rem;
  font-weight: 800;
  margin-bottom: -0.5rem;
}

.spa-connect-row {
  display: flex;
  gap: 1.2rem;
}

.spa-connect-ico {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.spa-connect-row h5 {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
  color: var(--spa-dark);
}

.spa-connect-row a {
  display: block;
  font-size: 0.95rem;
  color: var(--spa-muted);
  text-decoration: none;
  font-weight: 600;
}

.spa-connect-row a:hover {
  color: var(--spa-purple);
}

.spa-sub-contact {
  font-size: 0.88rem !important;
  margin-top: 0.2rem;
}

/* WhatsApp Group Button link */
.spa-wa-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.spa-wa-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  background: #25D366;
  color: var(--spa-white) !important;
  padding: 0.6rem 1rem;
  border-radius: 50px;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.15);
  transition: var(--spa-transition);
  width: fit-content;
}

.spa-wa-btn:hover {
  background: #128C7E;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.25);
}

/* Social Row */
.spa-social-row {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.5rem;
}

.spa-social-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--spa-white);
  border: 1px solid var(--spa-border);
  color: var(--spa-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: var(--spa-transition);
  box-shadow: var(--spa-shadow);
}

.spa-social-ico:hover {
  background: var(--spa-purple);
  color: var(--spa-white);
  border-color: var(--spa-purple);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.spa-footer-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1fr;
  gap: 3.5rem;
  margin-bottom: 4rem;
}

.spa-footer-brand p {
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 1.2rem 0 1.5rem;
  opacity: 0.8;
}

.spa-footer-logo {
  height: 44px;
  width: auto;
}

.spa-footer-socials {
  display: flex;
  gap: 0.8rem;
}

.spa-footer-socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: #D1D5E3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 0.9rem;
  transition: var(--spa-transition);
}

.spa-footer-socials a:hover {
  background: var(--spa-purple);
  color: var(--spa-white);
  transform: translateY(-2px);
}

.spa-footer-col h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--spa-white);
  margin-bottom: 1.5rem;
}

.spa-footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.spa-footer-col ul li a {
  font-size: 0.88rem;
  color: #D1D5E3;
  text-decoration: none;
  transition: var(--spa-transition);
}

.spa-footer-col ul li a:hover {
  color: var(--spa-white);
  padding-left: 3px;
}

.spa-footer-contact li {
  display: flex;
  gap: 0.8rem;
  font-size: 0.88rem;
}

.spa-footer-contact li i {
  color: var(--spa-white);
  margin-top: 3px;
}

.spa-footer-contact li a {
  color: #D1D5E3;
  text-decoration: none;
  display: block;
}

.spa-footer-contact li a:hover {
  color: var(--spa-white);
}

.spa-footer-wa-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.spa-footer-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #25D366;
  color: var(--spa-white) !important;
  padding: 0.4rem 0.8rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
}

.spa-footer-wa-btn:hover {
  background: #128C7E;
}

.spa-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  opacity: 0.8;
}

.spa-admin-link {
  color: var(--spa-purple-light);
  text-decoration: none;
  font-weight: 700;
}

.spa-admin-link:hover {
  color: var(--spa-white);
}

/* ═══════════════════════════════════════════════════════
   ENLARGE SHAPED HERO IMAGE CONTAINERS ON MOBILE
   (About / Services / Resources / Cases / Blog / Contact)
   The clip-path shapes only fill part of their bounding
   box, so the box itself needs to grow on small screens
   to keep the visible shape prominent.
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .spa-hero-visual,
  .spa-page-hero .spa-hero-visual,
  .spa-blog-hero .spa-visual-blog {
    max-width: 100%;
    width: 100%;
  }

  .spa-page-hero-img {
    max-height: 62vh;
    min-height: 380px;
  }

  .spa-page-hero.spa-resources-hero .spa-hero-visual {
    margin-top: 0;
  }
}

@media (max-width: 480px) {
  .spa-page-hero-img {
    max-height: 58vh;
    min-height: 340px;
  }

  .spa-visual-home .spa-hero-img {
    max-height: 52vh;
    min-height: 300px;
  }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE DESIGN BREAKPOINTS
═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .spa-hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }
  .spa-resource-feature-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .spa-section-header-inline {
    flex-direction: column;
    align-items: stretch;
  }
  .spa-resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spa-hero-actions {
    justify-content: center;
  }

  .spa-hero-visual {
    order: 1;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
  }

  .spa-hero-content {
    order: 2;
  }

  .spa-hero-collage {
    aspect-ratio: 1.2 / 1;
  }

  .spa-visual-home .spa-hero-collage {
    position: static;
    aspect-ratio: auto;
    min-height: 420px;
    padding: 0;
    background: transparent;
    overflow: visible;
  }

  .spa-visual-home .spa-collage-bg {
    display: none;
  }

  .spa-visual-home .spa-hero-img {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    max-height: 560px;
    min-height: 340px;
    border-radius: 24px;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: var(--spa-shadow);
    z-index: 2;
  }

  .spa-visual-home .spa-hero-badge {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 1rem auto 0;
    transform: none;
  }

  .spa-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .spa-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .spa-grid-2 {
    grid-template-columns: 1fr;
  }

  .spa-outcomes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .spa-values-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .spa-mv-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .spa-sidebar-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .spa-contact-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .spa-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .spa-footer-grid > :last-child {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .spa-resource-feature-tabs {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .spa-resource-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .spa-hamburger {
    display: flex;
  }

  .spa-nav-panel {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background: var(--spa-white);
    flex-direction: column;
    padding: 2.5rem 1.5rem;
    gap: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-top: 1px solid var(--spa-border);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease;
    overflow-y: auto;
  }

  .spa-nav-panel.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .spa-page-hero.spa-resources-hero,
  .spa-blog-hero {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .spa-page-hero.spa-resources-hero .spa-hero-grid,
  .spa-blog-hero .spa-hero-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: center;
    justify-items: stretch;
  }

  .spa-page-hero.spa-resources-hero .spa-hero-content,
  .spa-blog-hero .spa-hero-content {
    width: 100%;
    max-width: 100%;
    text-align: left;
  }

  .spa-page-hero.spa-resources-hero .spa-hero-h1,
  .spa-blog-hero .spa-hero-h1 {
    margin-left: 0;
    margin-right: 0;
  }

  .spa-page-hero.spa-resources-hero .spa-search-bar,
  .spa-blog-hero .spa-search-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0;
    min-width: 0;
  }

  .spa-page-hero.spa-resources-hero .spa-search-bar input,
  .spa-blog-hero .spa-search-bar input {
    padding: 1rem 1rem;
    min-width: 0;
    width: 100%;
  }

  .spa-page-hero.spa-resources-hero .spa-search-btn,
  .spa-blog-hero .spa-search-btn {
    min-width: 48px;
    width: auto;
    border-radius: 0 999px 999px 0;
    padding: 0 1rem;
    height: 48px;
  }

  .spa-page-hero.spa-resources-hero .spa-hero-visual,
  .spa-blog-hero .spa-visual-blog {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }

  .spa-page-hero.spa-resources-hero .spa-resource-feature-tabs {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .spa-page-hero.spa-resources-hero .spa-resource-feature {
    width: 100%;
    box-sizing: border-box;
  }

  .spa-sidebar-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .spa-sidebar {
    width: 100%;
  }

  .spa-resource-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .spa-resource-grid .spa-dynamic-card {
    width: 100%;
    min-width: 0;
  }

  .spa-page-hero.spa-resources-hero {
    overflow-x: hidden;
  }

  .spa-page-hero.spa-resources-hero .spa-hero-visual img,
  .spa-blog-hero .spa-hero-img {
    max-width: 100%;
    height: auto;
  }

  .spa-resource-feature {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }

  .spa-resource-feature span {
    white-space: normal;
  }

  .spa-blog-hero .spa-search-bar input {
    border-radius: 999px 0 0 999px;
  }

  .spa-blog-hero .spa-search-btn {
    width: auto;
  }

  .spa-search-bar {
    max-width: 100%;
  }

  .spa-nav-links {
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
    align-items: flex-start;
  }

  .spa-nav-link {
    width: 100%;
    justify-content: flex-start;
    padding: 1rem 1.1rem;
    border-radius: 1.5rem;
  }

  .spa-nav-actions {
    flex-direction: column;
    width: 100%;
    gap: 1rem;
    align-items: stretch;
  }

  .spa-nav-cta {
    width: 100%;
    justify-content: center;
  }

  .lang-selector {
    width: 100%;
  }

  .lang-btn {
    width: 100%;
    justify-content: space-between;
  }

  .lang-menu {
    top: auto;
    bottom: calc(100% + 0.6rem);
    right: 0;
    left: auto;
    width: 100%;
  }

  .spa-hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .spa-hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .spa-hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -8px);
  }

  .spa-hero-h1 {
    font-size: 2.5rem;
  }

  .spa-two-col,
  .spa-pillars-grid,
  .spa-form-row {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 580px) {
  .spa-stats-grid {
    grid-template-columns: 1fr;
  }

  .spa-grid-3 {
    grid-template-columns: 1fr;
  }

  .spa-outcomes-grid {
    grid-template-columns: 1fr;
  }

  .spa-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .spa-footer-grid {
    grid-template-columns: 1fr;
  }

  .spa-footer-grid > :last-child {
    grid-column: span 1;
  }

  .spa-footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}

/* Extra small screens improvements */
@media (max-width: 420px) {
  .spa-hero,
  .spa-page-hero {
    padding: 2rem 0 2.5rem;
  }

  .spa-hero-h1,
  .spa-page-hero h1 {
    font-size: 1.6rem;
    line-height: 1.2;
  }

  .spa-hero-sub,
  .spa-page-hero p {
    font-size: 0.98rem;
    margin-bottom: 1rem;
  }

  .spa-hero-actions {
    flex-direction: column;
    gap: 0.6rem;
    align-items: stretch;
  }

  .spa-hero-actions .spa-btn {
    width: 100%;
    padding: 0.75rem 1rem;
  }

  .spa-hero-collage {
    aspect-ratio: 1.8 / 1;
    min-height: 200px;
  }

  .spa-visual-home .spa-hero-img,
  .spa-page-hero .spa-page-hero-img {
    max-height: 260px;
    border-radius: 18px;
  }

  .spa-hero-badge {
    display: none;
  }

  .spa-grid-3,
  .spa-outcomes-grid,
  .spa-stats-grid,
  .spa-values-grid,
  .spa-mv-grid {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .spa-service-card {
    padding: 1.2rem;
  }

  .spa-section {
    padding: 3.2rem 0;
  }

  .spa-challenges-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .spa-challenge-list {
    grid-template-columns: 1fr;
  }

  .spa-challenge-pill {
    padding: 0.72rem 0.9rem;
    font-size: 0.92rem;
    justify-content: flex-start;
  }

  .spa-tag {
    font-size: 0.68rem;
    padding: 0.32rem 0.7rem;
  }

  /* Section headers & timeline tighter */
  .spa-section-header h2 {
    font-size: 1.4rem;
  }

  .spa-timeline {
    padding-left: 1rem;
  }

  .spa-tl-body h4 {
    font-size: 1rem;
  }

  /* Compact header & nav */
  .spa-nav {
    height: 64px;
    padding: 0 0.75rem;
  }

  .spa-logo-img {
    height: 36px;
  }

  .spa-nav-links {
    display: none;
  }

  .spa-hamburger {
    display: flex;
  }

  .spa-nav-panel {
    top: 64px;
    height: calc(100vh - 64px);
    padding: 1.75rem 1rem;
  }
}

/* Ensure nav links are shown inside the mobile nav panel on very small screens */
@media (max-width: 420px) {
  .spa-nav-panel .spa-nav-links {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
    align-items: flex-start;
  }

  .spa-nav-panel .spa-nav-link {
    width: 100%;
    justify-content: flex-start;
    padding: 1rem 1.1rem;
    border-radius: 12px;
  }
}

/* ── Suppress ALL Google Translate visual chrome ────────────────────────────
   Covers: toolbar, banner frame, spinner, tooltip, progress bar, highlight,
   and the newer VIpgJd-* Material-Design elements Google injects.          */
#google_translate_element,
.skiptranslate,
.goog-te-banner-frame,
.goog-te-banner,
.goog-te-menu-frame,
iframe.goog-te-menu-frame,
.goog-te-gadget,
.goog-te-gadget-icon,
.goog-te-gadget-simple,
.goog-te-ftab,
.goog-te-spinner-pos,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight,
/* Newer Material spinner overlay selectors */
.VIpgJd-ZVi9od-aZ2wEe,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-aZ2wEe-OiiCO,
.VIpgJd-ZVi9od-SmfZ-OEVmcd,
.VIpgJd-ZVi9od-SmfZ,
.VIpgJd-yAWNEb-VIpgJd-fmcmS,
.VIpgJd-yAWNEb-hvhgNd,
/* Progress / loading bar */
[id^="goog-gt-tt"],
.goog-te-progress {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Prevent the body shift Google Translate applies during loading */
.goog-te-spinner-pos,
body > .goog-te-spinner-pos {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

body {
  top: 0 !important;
  position: static !important;
}

/* Hero adaptation when there is no custom banner image uploaded */
.spa-hero-grid.spa-hero-no-image {
  grid-template-columns: 1fr !important;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.spa-hero-grid.spa-hero-no-image .spa-hero-actions {
  justify-content: center;
}

.spa-hero-grid.spa-hero-no-image .spa-compliance-badge {
  justify-content: center;
}

/* Enlarge card image containers on mobile devices */
@media (max-width: 767px) {
  .spa-card-img-wrap {
    aspect-ratio: 16 / 12 !important; /* Taller image proportions */
    min-height: 220px !important;     /* Ensures image container remains prominent */
  }
}