/* ============================================================
   SUJA — Elementor Style Override  v4
   Matches: carecloud.com / HubSpot SaaS aesthetic
   ============================================================ */

/* === Unified background system tokens ===
   3-zone visual model: header zone (white) → hero zone (own bg) →
   unified body zone (var) → CTA gradient (intentional break) → footer
   (white). Change --suja-body-bg here to retheme the whole body in
   one place. */
:root{
  /* Unified page/content background — points at the global design-system
     token (--suja-section-bg, #edf4f9) so every page shares one tint. */
  --suja-body-bg: var(--suja-section-bg, #edf4f9);
  --suja-footer-bg:#ffffff;
  --suja-heading-dark:#0c1e35;
  --suja-text-dark:#475569;
  --suja-link-teal:#0891b2;
  --suja-divider:rgba(12,30,53,0.10);
}

/* ── Reset Elementor defaults that conflict ── */
.elementor-page { background: var(--suja-body-bg); }
.elementor-column > .elementor-widget-wrap { padding: 0 !important; }
.elementor-section.elementor-section-boxed > .elementor-container { max-width: 1220px; }

/* ── Typography globals ── */
.elementor-widget-heading .elementor-heading-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.elementor-widget-text-editor,
.elementor-widget-text-editor p { font-family: 'DM Sans', sans-serif; line-height: 1.75; }

/* ────────────────────────────────────────────
   HERO SLIDES
──────────────────────────────────────────── */
/* Per-slide gradient backgrounds */
.suja-hero .swiper-slide.elementor-slide:nth-child(1),
.suja-hero .elementor-slide:nth-child(1) {
  background: linear-gradient(140deg, #0c1e35 0%, #1a3a6b 55%, #0f2d5e 100%) !important;
}
.suja-hero .swiper-slide.elementor-slide:nth-child(2),
.suja-hero .elementor-slide:nth-child(2) {
  background: linear-gradient(140deg, #071b30 0%, #0a3d62 55%, #0891b2 100%) !important;
}
.suja-hero .swiper-slide.elementor-slide:nth-child(3),
.suja-hero .elementor-slide:nth-child(3) {
  background: linear-gradient(140deg, #0a1f1a 0%, #064e3b 55%, #059669 100%) !important;
}

/* Slide typography */
.elementor-slide-heading {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.3);
}
.elementor-slide-description {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
  opacity: 0.88;
  max-width: 560px;
}
.elementor-slide-button {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 16px 36px !important;
  font-size: 16px !important;
  letter-spacing: -0.01em;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
  display: inline-block !important;
}
.elementor-slide-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(255,107,53,0.4) !important;
}

/* Swiper navigation */
.elementor-swiper-button {
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 50% !important;
  width: 52px !important; height: 52px !important;
  backdrop-filter: blur(10px);
  transition: background 0.2s !important;
}
.elementor-swiper-button:hover { background: rgba(255,255,255,0.26) !important; }
.swiper-pagination-bullet {
  width: 8px !important; height: 8px !important;
  background: rgba(255,255,255,0.4) !important;
  opacity: 1 !important;
  transition: width 0.3s, background 0.3s, border-radius 0.3s !important;
}
.swiper-pagination-bullet-active {
  width: 28px !important;
  border-radius: 4px !important;
  background: #ff6b35 !important;
}

/* ────────────────────────────────────────────
   CLIENTS / LOGO MARQUEE
──────────────────────────────────────────── */
.suja-marquee-track { overflow: hidden; width: 100%; cursor: default; }
.suja-marquee-inner {
  display: flex;
  align-items: center;
  width: max-content;
  animation: suja-scroll 30s linear infinite;
}
.suja-marquee-track:hover .suja-marquee-inner { animation-play-state: paused; }
.suja-logo-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 44px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #b0bec5;
  white-space: nowrap;
  border-right: 1px solid #e8eef5;
  height: 64px;
  transition: color 0.25s;
  letter-spacing: -0.01em;
}
.suja-logo-pill:hover { color: #1a2e4a; }
.suja-logo-pill .suja-logo-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}
@keyframes suja-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ────────────────────────────────────────────
   STATS BAR
──────────────────────────────────────────── */
.suja-stats-bar .elementor-column {
  border-right: 1px solid #e8eef5;
}
.suja-stats-bar .elementor-column:last-child { border-right: none; }
.elementor-widget-counter { text-align: center; }
.elementor-counter-number-wrapper {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
  line-height: 1;
}
.elementor-counter-number-suffix,
.elementor-counter-number-prefix {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
}
.elementor-counter-title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  margin-top: 8px !important;
}

/* ────────────────────────────────────────────
   PRODUCT TABS
──────────────────────────────────────────── */
.suja-tabs .elementor-tabs-wrapper {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e8eef5;
  padding: 0;
  margin-bottom: 0;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.suja-tabs .elementor-tabs-wrapper::-webkit-scrollbar { display: none; }
.suja-tabs .elementor-tab-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #64748b !important;
  padding: 16px 28px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px;
  background: transparent !important;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s !important;
  letter-spacing: -0.005em;
}
.suja-tabs .elementor-tab-title a,
.suja-tabs .elementor-tab-title .elementor-tab-title-text {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: inherit !important;
}
.suja-tabs .elementor-tab-title.elementor-active,
.suja-tabs .elementor-tab-title:hover {
  color: #ff6b35 !important;
  border-bottom-color: #ff6b35 !important;
}
.suja-tabs .elementor-tab-content {
  border: none !important;
  padding: 0 !important;
}
.suja-tabs .elementor-tabs-content-wrapper {
  border: none !important;
}

/* Tab content inner layout */
.suja-tab-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 56px 0;
}
.suja-tab-tag {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #0891b2;
  background: rgba(8,145,178,0.08);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.suja-tab-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 30px;
  color: #1a2e4a;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 16px;
}
.suja-tab-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: #64748b;
  line-height: 1.75;
  margin: 0 0 28px;
}
.suja-tab-features {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.suja-tab-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: #334155;
  line-height: 1.5;
}
.suja-tab-check {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  margin-top: 2px;
}
.suja-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s;
  color: #fff;
}
.suja-tab-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
  color: #fff;
}
.suja-tab-visual {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}
.suja-product-card-mock {
  border-radius: 20px;
  padding: 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.suja-product-card-mock::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
}
.suja-product-card-mock::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
}
.suja-mock-icon { font-size: 72px; margin-bottom: 20px; display: block; }
.suja-mock-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  margin: 0 0 10px;
}
.suja-mock-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: rgba(232,244,248,0.75);
  margin: 0 0 28px;
}
.suja-mock-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.suja-mock-pill {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 6px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
}

/* ────────────────────────────────────────────
   ICON BOX CARDS  (.suja-cards section)
──────────────────────────────────────────── */
.suja-cards .elementor-icon-box-wrapper {
  background: #fff;
  border-radius: 14px;
  padding: 32px 28px;
  box-shadow: 0 4px 24px rgba(26,46,74,0.07);
  border: 1px solid #e8eef5;
  transition: box-shadow 0.25s, transform 0.25s;
  height: 100%;
}
.suja-cards .elementor-icon-box-wrapper:hover {
  box-shadow: 0 16px 48px rgba(26,46,74,0.14);
  transform: translateY(-4px);
}
.suja-cards .elementor-icon-box-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  color: #1a2e4a !important;
  letter-spacing: -0.01em;
}
.suja-cards .elementor-icon-box-description {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px !important;
  color: #64748b !important;
  line-height: 1.7 !important;
}

/* Icon boxes on dark bg */
.suja-dark .elementor-icon-box-wrapper {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
}
.suja-dark .elementor-icon-box-wrapper:hover {
  background: rgba(255,255,255,0.13) !important;
  transform: translateY(-4px);
}
.suja-dark .elementor-icon-box-title { color: #fff !important; }
.suja-dark .elementor-icon-box-description { color: rgba(184,204,216,0.85) !important; }

/* ────────────────────────────────────────────
   BUTTONS
──────────────────────────────────────────── */
.elementor-widget-button .elementor-button {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  letter-spacing: -0.01em;
  transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s !important;
}
.elementor-widget-button .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18) !important;
}

/* ────────────────────────────────────────────
   TESTIMONIALS
──────────────────────────────────────────── */
.elementor-widget-testimonial-carousel .elementor-testimonial {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(26,46,74,0.07);
  border: 1px solid #e8eef5;
  padding: 32px 28px;
}
.elementor-testimonial-content {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px; line-height: 1.75; color: #334155;
  font-weight: 400;
}
.elementor-testimonial-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600; color: #1a2e4a;
}
.elementor-testimonial-job { font-size: 13px; color: #94a3b8; }

/* ────────────────────────────────────────────
   SECTION EYEBROW TAGS
──────────────────────────────────────────── */
.suja-eyebrow .elementor-heading-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* ────────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .suja-tab-body { grid-template-columns: 1fr; gap: 40px; padding: 40px 0; }
}
@media (max-width: 767px) {
  .elementor-slide-heading { font-size: 28px !important; letter-spacing: -0.02em !important; }
  .elementor-slide-description { font-size: 16px !important; line-height: 1.7 !important; }
  .elementor-slide-button { padding: 14px 28px !important; font-size: 15px !important; }
  .suja-stats-bar .elementor-column { border-right: none; border-bottom: 1px solid #e8eef5; }
  .suja-stats-bar .elementor-column:last-child { border-bottom: none; }
  .elementor-counter-number-wrapper { font-size: 36px !important; }
  .suja-tabs .elementor-tab-title { padding: 12px 16px !important; font-size: 13px !important; }
  .suja-tab-body { grid-template-columns: 1fr; }
  .suja-tab-title { font-size: 24px; }
}
@media (max-width: 480px) {
  .elementor-section.elementor-section-boxed > .elementor-container { padding: 0 16px; }
}

/* ============================================================
   v5 ADDITIONS — Lovable-matched + CareCloud polish
   ============================================================ */

/* ── Hero stats bar below slides ── */
.suja-hero-stats-row{display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap;font-family:'Plus Jakarta Sans',sans-serif}
.suja-hs-item{display:flex;align-items:center;gap:12px}
.suja-hs-icon{width:42px;height:42px;border-radius:12px;background:rgba(8,145,178,.1);display:inline-flex;align-items:center;justify-content:center;font-size:20px}
.suja-hs-item strong{display:block;font-size:22px;font-weight:800;color:#1a2e4a;line-height:1.1}
.suja-hs-item span{font-size:13px;color:#64748b;font-family:'DM Sans',sans-serif}
.suja-hs-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px;background:linear-gradient(135deg,#0891b2,#1a2e4a);color:#fff;font-weight:700;font-size:13px;letter-spacing:.04em}

/* ── Product Detail Block (inside tabs) ── */
.suja-pd-block{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:64px 0}
.suja-pd-tag{display:inline-block;padding:6px 14px;border-radius:999px;background:rgba(8,145,178,.12);color:#0891b2;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:20px}
.suja-pd-title{font-family:'Plus Jakarta Sans',sans-serif!important;font-size:36px!important;font-weight:800!important;line-height:1.15!important;letter-spacing:-.025em!important;color:#1a2e4a!important;margin:0 0 20px!important}
.suja-pd-desc{font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.7;color:#64748b;margin:0 0 28px}
.suja-pd-features{list-style:none;padding:0;margin:0 0 32px;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.suja-pd-features li{display:flex;align-items:flex-start;gap:12px;font-family:'DM Sans',sans-serif;font-size:14px;color:#1a2e4a;line-height:1.5}
.suja-check{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-top:2px}
.suja-pd-btns{display:flex;flex-wrap:wrap;gap:14px}
.suja-pd-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:10px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:15px;text-decoration:none;transition:transform .2s,box-shadow .2s;border:1px solid transparent}
.suja-pd-btn-primary{color:#fff;box-shadow:0 4px 12px rgba(26,46,74,.15)}
.suja-pd-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(26,46,74,.22)}
.suja-pd-btn-outline{background:#fff;color:#1a2e4a;border-color:#e2e8f0}
.suja-pd-btn-outline:hover{border-color:#0891b2;color:#0891b2}
.suja-pd-visual{display:flex;justify-content:center}
.suja-pd-mock{width:100%;max-width:480px;aspect-ratio:4/3;border-radius:24px;padding:36px;color:#fff;box-shadow:0 20px 48px -12px rgba(26,46,74,.3);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;overflow:hidden}
.suja-pd-mock::before{content:"";position:absolute;top:-80px;right:-80px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.07)}
.suja-pd-icon{font-size:56px;margin-bottom:16px;position:relative;z-index:1}
.suja-pd-mock-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:26px;font-weight:700;margin:0 0 8px;position:relative;z-index:1}
.suja-pd-mock-sub{font-family:'DM Sans',sans-serif;font-size:13px;opacity:.75;margin:0 0 24px;position:relative;z-index:1}
.suja-pd-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;position:relative;z-index:1}
.suja-mock-chip{display:inline-block;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;letter-spacing:.03em}

/* ── Product Tabs styling ── */
.suja-product-tabs .elementor-tabs-wrapper{justify-content:center;gap:8px;padding:6px;background:#fff;border-radius:14px;box-shadow:0 4px 24px -4px rgba(26,46,74,.08);display:inline-flex!important;margin:0 auto 48px;flex-wrap:wrap}
.suja-product-tabs .elementor-tab-title{background:transparent!important;border:none!important;padding:12px 22px!important;border-radius:10px;transition:all .2s;color:#1a2e4a!important}
.suja-product-tabs .elementor-tab-title.elementor-active{background:#1a2e4a!important;color:#fff!important}
.suja-product-tabs .elementor-tab-title:hover:not(.elementor-active){background:#f1f5f9!important}
.suja-product-tabs .elementor-tab-desktop-title.elementor-active{border-bottom:none!important}
.suja-product-tabs .elementor-tab-content{border:none!important;padding:0!important;background:transparent}
.suja-product-tabs .elementor-tabs-content-wrapper{border:none!important}

/* ── Specialty Grid ── */
.suja-sp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0 0 40px}
.suja-sp-card{display:block;padding:24px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;text-decoration:none;color:inherit;transition:all .25s;position:relative}
.suja-sp-card:hover{border-color:#0891b2;box-shadow:0 12px 32px -8px rgba(8,145,178,.2);transform:translateY(-3px)}
.suja-sp-icon{display:inline-flex;width:48px;height:48px;border-radius:12px;background:rgba(8,145,178,.1);align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.suja-sp-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:700;color:#1a2e4a;margin:0 0 8px;line-height:1.3}
.suja-sp-desc{font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.6;color:#64748b;margin:0 0 16px}
.suja-sp-arrow{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;color:#0891b2}
.suja-sp-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:960px;margin:0 auto}
.suja-sp-tag{display:inline-block;padding:8px 16px;border-radius:999px;background:#f1f5f9;color:#1a2e4a;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;transition:background .2s}
.suja-sp-tag:hover{background:#0891b2;color:#fff}

/* ── AI Suite (dark) ── */
.suja-ai-section{position:relative;overflow:hidden}
.suja-ai-section::before{content:"";position:absolute;top:-200px;left:-200px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(8,145,178,.2),transparent 70%);pointer-events:none}
.suja-ai-section::after{content:"";position:absolute;bottom:-200px;right:-200px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,53,.15),transparent 70%);pointer-events:none}
.suja-ai-section .elementor-container{position:relative;z-index:1}
.suja-ai-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.suja-ai-card{padding:24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:16px;backdrop-filter:blur(8px);transition:all .25s}
.suja-ai-card:hover{background:rgba(255,255,255,.08);border-color:rgba(8,145,178,.5);transform:translateY(-3px)}
.suja-ai-icon{display:inline-flex;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#0891b2,rgba(8,145,178,.3));align-items:center;justify-content:center;font-size:22px;margin-bottom:16px}
.suja-ai-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:700;color:#fff;margin:0 0 8px}
.suja-ai-desc{font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.6;color:rgba(232,244,248,.75);margin:0}

/* ── CareAxes Workflow Tabs & Accordion ── */
.suja-ca-tabs .elementor-tabs-wrapper{justify-content:center;gap:4px;border-bottom:1px solid #e2e8f0;margin-bottom:32px}
.suja-ca-tabs .elementor-tab-title{background:transparent!important;border:none!important;border-bottom:2px solid transparent!important;padding:16px 24px!important;color:#64748b!important}
.suja-ca-tabs .elementor-tab-title.elementor-active{border-bottom-color:#0891b2!important;color:#0891b2!important}
.suja-ca-tabs .elementor-tab-content{border:none!important;padding:0!important;background:transparent}
.suja-ca-tabs .elementor-tabs-content-wrapper{border:none!important}
.suja-ca-accordion{display:flex;flex-direction:column;gap:12px;max-width:880px;margin:0 auto}
.suja-ca-item{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:0;overflow:hidden;transition:border-color .2s}
.suja-ca-item[open]{border-color:#0891b2;box-shadow:0 4px 24px -4px rgba(8,145,178,.12)}
.suja-ca-summary{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:700;color:#1a2e4a;padding:18px 22px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.suja-ca-summary::-webkit-details-marker{display:none}
.suja-ca-summary::after{content:"+";font-size:24px;color:#0891b2;font-weight:400;transition:transform .2s}
.suja-ca-item[open] .suja-ca-summary::after{content:"−"}
.suja-ca-body{padding:0 22px 20px;font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.7;color:#64748b}

/* ── Value Props (Why Suja) ── */
.suja-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.suja-why-card{text-align:center;padding:32px 20px}
.suja-why-icon{width:56px;height:56px;margin:0 auto 20px;border-radius:16px;background:rgba(8,145,178,.1);display:flex;align-items:center;justify-content:center;font-size:28px}
.suja-why-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:700;color:#1a2e4a;margin:0 0 10px;line-height:1.35}
.suja-why-desc{font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.7;color:#64748b;margin:0}

/* ── Testimonials grid ── */
.suja-test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.suja-test-card{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:36px 28px 28px;box-shadow:0 4px 24px -4px rgba(26,46,74,.08);transition:all .25s}
.suja-test-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px -8px rgba(26,46,74,.15);border-color:rgba(8,145,178,.3)}
.suja-test-quote{position:absolute;top:4px;left:18px;font-family:Georgia,serif;font-size:72px;color:rgba(8,145,178,.22);line-height:1}
.suja-test-body{font-family:'DM Sans',sans-serif!important;font-size:15px!important;line-height:1.7!important;color:#1a2e4a!important;margin:0 0 24px!important;position:relative;z-index:1}
.suja-test-author{display:flex;align-items:center;gap:14px;padding-top:18px;border-top:1px solid #f1f5f9}
.suja-test-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#0891b2,#1a2e4a);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:16px;flex-shrink:0}
.suja-test-author strong{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;color:#1a2e4a;line-height:1.3}
.suja-test-author span{font-family:'DM Sans',sans-serif;font-size:12px;color:#64748b;line-height:1.3}
@media (max-width:1024px){.suja-test-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.suja-test-grid{grid-template-columns:1fr}}

/* ── Testimonials carousel polish (legacy, unused in v5) ── */
.suja-testimonials .elementor-testimonial-wrapper{padding:36px 32px!important;background:#fff!important;border-radius:16px;box-shadow:0 4px 24px -4px rgba(26,46,74,.08);border:1px solid #e2e8f0}
.suja-testimonials .elementor-testimonial-wrapper:hover{box-shadow:0 12px 32px -8px rgba(26,46,74,.15)}
.suja-testimonials .elementor-testimonial-content{position:relative;padding-left:28px}
.suja-testimonials .elementor-testimonial-content::before{content:"\201C";position:absolute;left:-8px;top:-24px;font-family:Georgia,serif;font-size:72px;color:rgba(8,145,178,.25);line-height:1}
.suja-testimonials .elementor-testimonial-name{font-family:'Plus Jakarta Sans',sans-serif!important;font-weight:700!important}
.suja-testimonials .swiper-button-prev,
.suja-testimonials .swiper-button-next{color:#0891b2!important}

/* ── Blog cards ── */
.suja-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.suja-blog-card{display:block;background:#fff;border:1px solid #e2e8f0;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:all .25s}
.suja-blog-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px -8px rgba(26,46,74,.18);border-color:#0891b2}
.suja-blog-img{aspect-ratio:16/10;background-size:cover;background-position:center;position:relative;background-color:#1a2e4a}
.suja-blog-cat{position:absolute;top:14px;left:14px;padding:6px 12px;border-radius:999px;background:rgba(8,145,178,.95);color:#fff;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.suja-blog-body{padding:22px}
.suja-blog-date{font-family:'DM Sans',sans-serif;font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.suja-blog-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:700;color:#1a2e4a;line-height:1.35;margin:10px 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.suja-blog-excerpt{font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.65;color:#64748b;margin:0 0 16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.suja-blog-more{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;color:#0891b2}

/* ── CTA cards ── */
.suja-cta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:960px;margin:0 auto}
.suja-cta-card{padding:32px 24px;text-align:center;transition:all .25s}
.suja-cta-card:hover{transform:translateY(-3px)}
.suja-cta-icon{width:56px;height:56px;margin:0 auto 18px;border-radius:16px;background:rgba(255,107,53,.2);display:flex;align-items:center;justify-content:center;color:#ff6b35;font-size:24px;font-weight:700}
.suja-cta-card h4{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:700;color:#fff;margin:0 0 10px}
.suja-cta-card p{font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.6;color:rgba(232,244,248,.8);margin:0 0 20px}
.suja-cta-btn{display:inline-flex;padding:12px 24px;border-radius:10px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:14px;text-decoration:none;transition:all .2s}
.suja-cta-btn-primary{background:#ff6b35;color:#fff}
.suja-cta-btn-primary:hover{background:#e85a23;transform:translateY(-1px)}
.suja-cta-btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3)}
.suja-cta-btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* ── v5 responsive ── */
@media (max-width:1024px){
  .suja-pd-block{grid-template-columns:1fr;gap:40px;padding:48px 0}
  .suja-pd-features{grid-template-columns:1fr}
  .suja-sp-grid{grid-template-columns:repeat(2,1fr)}
  .suja-ai-grid{grid-template-columns:repeat(2,1fr)}
  .suja-why-grid{grid-template-columns:repeat(2,1fr)}
  .suja-blog-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  .suja-cta-grid{grid-template-columns:1fr;max-width:420px}
}
@media (max-width:767px){
  .suja-hero-stats-row{gap:20px}
  .suja-pd-title{font-size:26px!important}
  .suja-sp-grid{grid-template-columns:1fr}
  .suja-ai-grid{grid-template-columns:1fr}
  .suja-why-grid{grid-template-columns:1fr}
  .suja-ca-summary{font-size:14px;padding:14px 18px}
  .suja-ca-body{font-size:13px;padding:0 18px 16px}
}

/* ============================================================
   V6 — Custom Suja Hero Swiper Widget + Polish
   ============================================================ */
.suja-hero-swiper{
  position:relative;
  width:100%;
  overflow:hidden;
  background-color:#eef2f7;
  background-image:url('../images/hero-bg.jpg');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  background-attachment:scroll; /* static relative to section; slide content moves on top */
}
/* Make Swiper track/slides transparent so the section background stays fixed while slides animate */
.suja-hero-swiper .swiper,
.suja-hero-swiper .swiper-wrapper,
.suja-hero-swiper .swiper-slide{background:transparent !important}
/* Responsive hero height — clamp() base, refined per width tier below.
   Keeps the hero premium but compact so the client-logos section
   enters the first viewport on common desktop/laptop screens. */
.suja-hero-swiper .swiper{
  width:100%;
  min-height:clamp(480px, 60vh, 600px);
  position:relative;z-index:1;
}
.suja-hero-slide{
  display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;
  padding:clamp(32px, 4vh, 56px) 24px;
  min-height:clamp(480px, 60vh, 600px);
  height:auto;
  background:transparent !important;
}
/* Strip stray trailing margins so flex centering measures visible content only */
.suja-hero-text > *:first-child,
.suja-hero-visual > *:first-child{margin-top:0}
.suja-hero-text > *:last-child,
.suja-hero-visual > *:last-child{margin-bottom:0}
.suja-hero-inner{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:48px;
  align-items:center;
  max-width:1366px;
  width:100%;
  margin:0 auto;
  padding:0 24px;
}
.suja-hero-image{
  max-height:min(580px, 64vh);
  object-fit:cover;
  object-position:center;
}
.suja-hero-text{color:#0f172a}
.suja-hero-eyebrow{
  display:inline-block;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12px;font-weight:700;
  letter-spacing:2px;
  color:#0891b2;
  background:rgba(8,145,178,0.10);
  padding:6px 14px;border-radius:999px;
  margin-bottom:22px;
}
.suja-hero-heading{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(32px,4.2vw,58px);
  font-weight:800;line-height:1.08;
  letter-spacing:-0.02em;
  color:#0c1e35;margin:0 0 20px;
}
.suja-hero-highlight{
  display:block;
  background:linear-gradient(90deg,#0891b2 0%,#22d3ee 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.suja-hero-desc{
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.75;
  font-weight:400;
  color:#475569;
  max-width:560px;
  margin:0 0 32px;
}
.suja-hero-ctas{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin-bottom:30px}
.suja-hero-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 28px;
  /* Transparent border on every button so primary and outline match in
     total height (outline adds 1.5px each side, primary previously had 0). */
  border:1.5px solid transparent;
  border-radius:10px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;font-size:15px;
  line-height:1.2;
  min-height:50px;
  box-sizing:border-box;
  text-decoration:none;transition:all .25s ease;
  cursor:pointer;
  white-space:nowrap;
}
.suja-hero-btn-primary{background:#0c1e35;color:#fff}
.suja-hero-btn-primary:hover{background:#0891b2;color:#fff;transform:translateY(-2px)}
.suja-hero-btn-outline{
  background:transparent;color:#0c1e35;
  /* No visible border — base .suja-hero-btn keeps a transparent 1.5px
     border so heights still match the primary button exactly. */
}
.suja-hero-btn-outline:hover{background:rgba(12,30,53,0.06)}

.suja-hero-stats{
  display:inline-flex;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:16px 44px;
  padding-top:6px;
  max-width:100%;
}
.suja-hero-stat{
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:6px;
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  transition:none;
}
.suja-hero-stat:hover{
  background:transparent;
  border-color:transparent;
  transform:none;
}
.suja-hero-stat-icon{
  /* Sized to the SVG itself so the gap between icon and number isn't padded
     out by an oversized icon box. align-items:center on the parent keeps
     icon vertically centered against the number+label block. */
  width:27px;height:27px;flex:0 0 27px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:0;
  background:transparent;
  color:#0891b2;font-size:20px;
  line-height:1;
}
.suja-hero-stat-icon svg,
.suja-hero-stat-icon i{width:22px;height:22px;font-size:18px;color:#0891b2}
.suja-hero-stat-top{
  display:flex;flex-direction:row;align-items:center;justify-content:flex-start;
  gap:9px;line-height:1;
}
.suja-hero-stat strong{
  display:block;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:20px;font-weight:800;color:#0c1e35;line-height:1.05;
}
.suja-hero-stat span{
  display:block;font-family:'DM Sans',sans-serif;
  font-size:14px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;
  color:#0e7490;line-height:1.25;margin-top:1px;text-align:left;white-space:normal;max-width:150px;
}

/* ---- Certification / compliance strip (secondary trust signal) ----
   Sits below the stats. Small label + a row of normalized-height
   logos. No cards — clean, professional. */
.suja-hero-certs{
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid rgba(12,30,53,0.10);
  max-width:560px;
}
.suja-hero-certs-label{
  display:block;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:11px;font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:#64748b;
  margin-bottom:14px;
}
.suja-hero-certs-logos{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px 22px;
}
/* Each logo sits in a fixed-height cell; the image is contained inside
   so the differing source crops / embedded whitespace all normalize to
   the same visual height. High specificity + !important beats the
   Elementor/global image rules that were leaving them at natural size. */
.suja-hero-certs .suja-hero-certs-logos .suja-hero-cert{
  height:45px !important;          /* equal height */
  width:auto !important;
  max-width:150px !important;
  object-fit:contain;
  display:block;
  opacity:0.92;
  transition:opacity .2s ease;
}
.suja-hero-certs .suja-hero-certs-logos .suja-hero-cert:hover{ opacity:1; }
@media (max-width:1023px){
  .suja-hero-certs{ max-width:none; }
}
@media (max-width:600px){
  /* Compact: allow a horizontal scroll so the row never crowds. */
  .suja-hero-certs-logos{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:18px;
    padding-bottom:4px;
  }
  .suja-hero-certs .suja-hero-certs-logos .suja-hero-cert{
    height:38px !important; flex:0 0 auto;
  }
}

.suja-hero-visual{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  background:#ffffff;
  padding:0;
  /* Vertical centering relative to the slide's flex/grid row — pairs
     with the .suja-hero-slide flex container so the image block sits
     mid-height regardless of left-column content size. */
  align-self:center;
  margin:0;
  box-shadow:
    0 30px 60px -12px rgba(12,30,53,0.22),
    0 12px 24px -8px rgba(12,30,53,0.12),
    0 0 0 1px rgba(12,30,53,0.08);
  isolation:isolate;
}
.suja-hero-image{
  /* Uniform fixed height across slides 2 & 3 so the right-side image
     block is identical on every image slide. Slightly smaller than the
     previous 420–580 range per the brief. Slide 1 uses its own
     .suja-hero-visual--circle layout and is not affected. */
  width:100%;
  height:460px;
  display:block;
  border-radius:22px;
  overflow:hidden;
  object-fit:cover;
  object-position:center;
  background:#ffffff;
  /* Shared image frame — thin white border + visible teal hairline ring
     (so the frame reads on light images too) + a soft directional glow. */
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:
    16px 20px 42px -28px rgba(8,145,178,0.16),
    6px 8px 20px -16px rgba(12,30,53,0.09),
    0 0 0 1px rgba(8,145,178,0.16);
}
/* Video option for the right-side visual — reuses the .suja-hero-image frame. */
.suja-hero-video{ background:#0c1e35; }
.suja-hero-video-embed{ position:relative; padding:0; }
.suja-hero-video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.suja-hero-badge{
  position:absolute;bottom:20px;left:20px;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(10px);
  color:#0c1e35;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13px;font-weight:700;
  padding:10px 16px;border-radius:999px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.suja-hero-badge-dot{
  width:8px;height:8px;border-radius:50%;
  background:#10b981;
  box-shadow:0 0 0 3px rgba(16,185,129,0.2);
}

.suja-hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,0.85);
  border:1px solid rgba(12,30,53,0.12);
  cursor:pointer;z-index:10;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s ease;
  color:#0c1e35;
  box-shadow:0 8px 20px -6px rgba(12,30,53,0.25);
  backdrop-filter:blur(6px);
}
.suja-hero-arrow:hover{background:#0c1e35;color:#fff;border-color:#0c1e35}
.suja-hero-arrow:hover svg{color:#fff}
.suja-hero-arrow::before{display:none}
.suja-hero-arrow svg{display:block;color:#0c1e35}
.suja-hero-prev{left:24px}
.suja-hero-next{right:24px}

/* Pagination hidden per design — handled via CSS so Elementor data stays untouched */
.suja-hero-pagination,
.suja-hero-swiper .swiper-pagination{display:none !important}

@media (max-width: 1024px){
  .suja-hero-inner{grid-template-columns:1fr;gap:40px;text-align:left}
  .suja-hero-swiper .swiper,.suja-hero-slide{min-height:auto}
  .suja-hero-slide{padding:64px 24px}
  .suja-hero-stats{max-width:none;gap:16px 28px;}
  .suja-hero-arrow{display:none}
}
@media (max-width: 600px){
  .suja-hero-stats{gap:12px 16px;}
  .suja-hero-stat{padding:0;gap:8px;flex-direction:column;align-items:flex-start;text-align:left}
  .suja-hero-stat-icon{width:40px;height:40px;flex:0 0 40px;font-size:22px}
  .suja-hero-stat-icon svg,.suja-hero-stat-icon i{width:24px;height:24px;font-size:22px}
  .suja-hero-stat strong{font-size:18px}
  .suja-hero-heading{font-size:34px}
  .suja-hero-desc{font-size:16px}
  .suja-hero-ctas{flex-direction:column;align-items:stretch}
  .suja-hero-btn{justify-content:center}
}

/* ── V6 product blocks — smooth CareCloud rhythm ── */
.suja-product-block .elementor-heading-title{letter-spacing:-0.02em}
.suja-product-block .elementor-icon-list-item a,
.suja-product-block .elementor-icon-list-item{padding:4px 0}
.suja-product-block .elementor-widget-image img{border-radius:16px}

/* ── Icon box polish ── */
.elementor-widget-icon-box .elementor-icon-box-wrapper{transition:transform .25s ease}
.elementor-widget-icon-box:hover .elementor-icon-box-wrapper{transform:translateY(-3px)}

/* ── Product tabs bar — underline accent on hover ── */
.elementor-widget-icon-box .elementor-icon-box-icon{margin-bottom:14px}

/* ============================================================
   V6 — Global container grid (CareCloud-style boxed content)
   Section backgrounds stay edge-to-edge (stretch_section),
   but inner container caps at 1200px and centres.
   ============================================================ */
body .elementor-section.elementor-section-boxed > .elementor-container,
body .elementor-section.elementor-section-stretched > .elementor-container,
body .elementor-location-header .elementor-section > .elementor-container,
body .elementor-location-footer .elementor-section > .elementor-container,
body .elementor-location-header .e-con-inner,
body .elementor-location-footer .e-con-inner{
  max-width:1366px;
  margin-left:auto;margin-right:auto;
  padding-left:24px;padding-right:24px;
}
/* Guard: every product-family section is pinned to the 1366px grid,
   even if a per-section setting was tweaked downstream. */
body .elementor-section.suja-product-section > .elementor-container{
  max-width:1366px;
  margin-left:auto;margin-right:auto;
  padding-left:24px;padding-right:24px;
}
@media (max-width: 1024px){
  body .elementor-section.suja-product-section > .elementor-container{
    padding-left:20px;padding-right:20px;
  }
}
@media (max-width: 600px){
  body .elementor-section.suja-product-section > .elementor-container{
    padding-left:16px;padding-right:16px;
  }
}
@media (max-width: 1024px){
  body .elementor-section.elementor-section-boxed > .elementor-container,
  body .elementor-section.elementor-section-stretched > .elementor-container{
    padding-left:20px;padding-right:20px;
  }
}
@media (max-width: 600px){
  body .elementor-section.elementor-section-boxed > .elementor-container,
  body .elementor-section.elementor-section-stretched > .elementor-container{
    padding-left:16px;padding-right:16px;
  }
}

/* Hero is full-width by design — container stays uncapped so the
   swiper widget fills; CSS inside the widget handles inner 1200px cap. */
.elementor-widget-suja-hero-swiper{width:100%}
.elementor-widget-suja-hero-swiper > .elementor-widget-container{padding:0}

/* Keep product-block inner content visually balanced */
.suja-product-block > .elementor-container{align-items:center}

/* ============================================================
   V6 — Product tabs bar (card-style selector)
   ============================================================ */
.suja-products-tabbar{position:relative}
.suja-products-tabs-row > .elementor-container{
  gap:16px;
  flex-wrap:nowrap;
  align-items:stretch;
  justify-content:center;
}
.suja-products-tabs-row > .elementor-container > .elementor-column{
  flex:1 1 0;
  min-width:0;
  display:flex;
}
.suja-products-tabs-row > .elementor-container > .elementor-column > .elementor-column-wrap,
.suja-products-tabs-row > .elementor-container > .elementor-column > .elementor-widget-wrap{
  width:100%;
}
.suja-product-tab{
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:20px 16px !important;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
  box-shadow:0 1px 3px rgba(15,23,42,.04);
  cursor:pointer;
  min-width:0;
}
.suja-product-tab .elementor-widget-icon-box,
.suja-product-tab .elementor-widget-icon-box .elementor-widget-container{background:transparent !important}
.suja-product-tab:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(15,23,42,.10);
  border-color:#0891b2;
}
.suja-product-tab.is-active{
  background:#1a2e4a;
  border-color:#1a2e4a;
  box-shadow:0 14px 32px rgba(8,145,178,.25);
}
.suja-product-tab.is-active .elementor-icon-box-title,
.suja-product-tab.is-active .elementor-icon-box-title a{color:#ffffff !important}
.suja-product-tab.is-active .elementor-icon-box-description{color:rgba(255,255,255,.75) !important}
.suja-product-tab.is-active .elementor-icon svg,
.suja-product-tab.is-active .elementor-icon i{color:#22d3ee !important; fill:#22d3ee !important}
.suja-product-tab .elementor-icon-box-title a{text-decoration:none}

/* ============================================================
   V6 — Product blocks — unified layout, gap, image sizing
   Applies to: careaxes, gyneye, suja-ai, suja-rcm, suja-research
   ============================================================ */
.suja-product-block > .elementor-container{
  align-items:center;
  column-gap:60px;
  row-gap:40px;
}
.suja-product-block .elementor-widget-image{width:100%;display:flex;justify-content:center}
.suja-product-block .elementor-widget-image .elementor-widget-container{width:100%}
.suja-product-block .elementor-widget-image img{
  width:100%;
  height:auto;
  max-width:100%;
  display:block;
  margin:0 auto;
}
.suja-product-block .elementor-column[data-element_type="column"] > .elementor-widget-wrap,
.suja-product-block .elementor-column[data-element_type="column"] > .elementor-column-wrap{
  justify-content:center;
}
@media (max-width: 1024px){
  .suja-product-block > .elementor-container{column-gap:40px;row-gap:32px}
}
@media (max-width: 767px){
  .suja-product-block > .elementor-container{column-gap:0;row-gap:24px}
  .suja-product-block .elementor-widget-image img{max-width:520px}
}

/* ============================================================
   V6 — CareAxes 2-col bullets (3+3 grid)
   ============================================================ */
.suja-bullets-2col ul.elementor-icon-list-items{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:24px;
  row-gap:12px;
}
.suja-bullets-2col ul.elementor-icon-list-items > li.elementor-icon-list-item{margin:0 !important;padding:0 !important}
.suja-bullets-2col .elementor-icon-list-text{line-height:1.45}
@media (max-width: 767px){
  .suja-bullets-2col ul.elementor-icon-list-items{grid-template-columns:1fr}
}

/* Button row in CareAxes block — single-row on tablet+, stack only on small mobile */
/* Force the whole button row to sit flush-left under the bullets/text above */
.suja-careaxes-block .suja-btn-row,
.suja-careaxes-block .suja-btn-row > .elementor-container{
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
}
.suja-careaxes-block .suja-btn-row > .elementor-container{
  gap:14px;
  flex-wrap:nowrap;
  justify-content:flex-start !important;
  align-items:center;
}
.suja-careaxes-block .suja-btn-row .elementor-column{
  flex:0 0 auto;
  width:auto !important;
  padding:0 !important;
}
.suja-careaxes-block .suja-btn-row .elementor-column > .elementor-column-wrap,
.suja-careaxes-block .suja-btn-row .elementor-column > .elementor-widget-wrap{
  padding:0 !important;
  margin:0 !important;
}
/* Kill any default button widget left padding that offsets the first button */
.suja-careaxes-block .suja-btn-row .elementor-widget-button{
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
}
.suja-careaxes-block .suja-btn-row .elementor-widget-button > .elementor-widget-container{
  padding:0 !important;
  margin:0 !important;
}
.suja-careaxes-block .suja-btn-row .elementor-button-wrapper{
  text-align:left !important;
  padding:0 !important;
  margin:0 !important;
}
.suja-careaxes-block .suja-btn-row .elementor-button{
  min-height:48px;
  display:inline-flex;align-items:center;
  margin-left:0 !important;
}
@media (max-width: 480px){
  .suja-careaxes-block .suja-btn-row > .elementor-container{flex-wrap:wrap}
  .suja-careaxes-block .suja-btn-row .elementor-column{flex:1 1 100%}
  .suja-careaxes-block .suja-btn-row .elementor-button{width:100%;justify-content:center}
}

/* ============================================================
   V6 — Specialty cards (4-col grid) — 16/24/32 spacing scale
   ============================================================ */
.suja-specialty-section .elementor-widget-wrap{align-content:flex-start}
/* Own vertical rhythm via margins, not flex gap */
.suja-specialty-section > .elementor-container > .elementor-column > .elementor-widget-wrap{gap:0 !important}
.suja-specialty-section .suja-section-lede{margin-bottom:32px !important}
.suja-specialty-row{margin:0 0 24px 0 !important}
.suja-specialty-row:last-of-type{margin-bottom:32px !important}
.suja-specialty-row > .elementor-container{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:24px;
  align-items:stretch;
}
.suja-specialty-row > .elementor-container > .elementor-column{
  display:flex;
  width:100% !important;
  max-width:100% !important;
  min-width:0;
}
.suja-specialty-card{
  display:flex;
  flex-direction:column;
  height:100%;
  width:100%;
  padding:32px !important;
  background:#ffffff !important;
  border:1px solid #e2e8f0 !important;
  border-radius:16px !important;
  box-shadow:0 4px 20px rgba(15,23,42,0.05);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
/* Neutralize Elementor's inner wrap so styling lives on the column */
.suja-specialty-card > .elementor-column-wrap,
.suja-specialty-card > .elementor-widget-wrap{
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  flex:1;
  display:flex;
  flex-direction:column;
  width:100%;
  gap:0;
}
.suja-specialty-card .elementor-widget-icon-box{flex:1 1 auto;margin:0 !important}
.suja-specialty-card .elementor-icon-box-description{margin-top:12px}
.suja-specialty-card .elementor-widget-button{margin-top:24px;padding-top:0}
.suja-specialty-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 44px rgba(15,23,42,.12) !important;
  border-color:rgba(8,145,178,.35);
}
.suja-specialty-card .suja-link-btn .elementor-button{
  background:transparent !important;
  padding:0 !important;
  color:#0891b2 !important;
}
.suja-specialty-card .suja-link-btn .elementor-button:hover{color:#1a2e4a !important}
.suja-specialty-card .suja-link-btn .elementor-button .elementor-button-icon{transition:transform .2s ease}
.suja-specialty-card .suja-link-btn .elementor-button:hover .elementor-button-icon{transform:translateX(4px)}

/* Icon tile + alignment — icon, title, desc all share the same left edge */
.suja-specialty-iconbox .elementor-icon-box-wrapper{align-items:flex-start;text-align:left}
.suja-specialty-iconbox .elementor-icon-box-icon{margin:0 0 16px !important}
.suja-specialty-iconbox .elementor-icon-box-icon .elementor-icon{
  width:48px;height:48px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(8,145,178,.10);
  border-radius:12px;
  color:#0891b2;
  padding:0 !important;
}
.suja-specialty-iconbox .elementor-icon-box-icon .elementor-icon i,
.suja-specialty-iconbox .elementor-icon-box-icon .elementor-icon svg{font-size:20px}
.suja-specialty-iconbox .elementor-icon-box-title{margin:0 !important;min-height:48px}
.suja-specialty-spacer{
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  pointer-events:none;
}
@media (max-width: 1024px){
  .suja-specialty-row > .elementor-container{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  .suja-specialty-spacer{display:none}
}
@media (max-width: 600px){
  .suja-specialty-row{margin-bottom:0 !important}
  .suja-specialty-row > .elementor-container{
    grid-template-columns:1fr !important;
    gap:16px;
  }
  .suja-specialty-card{padding:24px !important}
  .suja-specialty-iconbox .elementor-icon-box-title{min-height:0}
}

/* ============================================================
   V6 — Additional Specialty Areas — framed card
   ============================================================ */
.suja-additional-card{
  max-width:1180px;
  margin:48px auto 0;
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:20px;
  padding:40px 44px;
  box-shadow:0 4px 20px rgba(15,23,42,.04);
}
.suja-additional-title{
  margin:0 0 10px;
  color:#1a2e4a;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:22px;font-weight:700;line-height:1.3;
}
.suja-additional-desc{
  margin:0 0 22px;
  color:#64748b;
  font-family:'DM Sans',sans-serif;
  font-size:15px;line-height:1.6;
}
.suja-pill-band{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:10px 10px;
}
.suja-pill{
  display:inline-flex;
  align-items:center;
  background:#f1f5f9;
  color:#1a2e4a;
  border:1px solid transparent;
  border-radius:999px;
  padding:8px 18px;
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  font-weight:500;
  line-height:1.2;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  cursor:default;
}
.suja-pill:hover{
  background:#e0f2fe;
  color:#0891b2;
  border-color:rgba(8,145,178,.25);
  transform:translateY(-1px);
}
@media (max-width: 767px){
  .suja-additional-card{padding:28px 24px;margin-top:32px}
  .suja-additional-title{font-size:20px}
}

/* Smooth anchor scroll across page */
html{scroll-behavior:smooth}

/* Mobile: horizontal scroll fallback for product tabs if cramped */
@media (max-width: 600px){
  .suja-products-tabs-row > .elementor-container{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
    scroll-snap-type:x mandatory;
  }
  .suja-products-tabs-row > .elementor-container > .elementor-column{
    flex:0 0 70%;
    scroll-snap-align:start;
  }
}

/* ============================================================
   V6 polish pass — logos, AI suite, testimonials slider
   ============================================================ */

/* Client logos — full-width, evenly distributed */
.suja-logos-row > .elementor-container{
  width:100%;
  max-width:1080px;
  margin:0 auto;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:16px 28px;
}
.suja-logos-row > .elementor-container > .elementor-column{
  flex:1 1 120px;
  min-width:100px;
}
.suja-logos-row .elementor-heading-title{
  text-transform:uppercase;
  transition:color .25s ease, opacity .25s ease;
  opacity:.85;
}
.suja-logos-row .elementor-widget-heading:hover .elementor-heading-title{
  color:#0891b2 !important;
  opacity:1;
}
@media (max-width: 767px){
  .suja-logos-row > .elementor-container{gap:12px 18px}
  .suja-logos-row > .elementor-container > .elementor-column{flex:1 1 40%}
  .suja-logos-row .elementor-heading-title{font-size:15px !important}
}

/* ============================================================
   V6 — SUJA AI Suite cards — 16/24/32 spacing scale
   ============================================================ */
.elementor-section[class*="elementor-element"] > .elementor-container > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap > .elementor-element.elementor-widget-icon-box{width:100%}
.suja-ai-suite-section .elementor-widget-wrap{align-content:flex-start}
/* Own vertical rhythm via margins, not flex gap */
.suja-ai-suite-section > .elementor-container > .elementor-column > .elementor-widget-wrap{gap:0 !important}
.suja-ai-suite-row{margin:0 0 24px 0 !important}
.suja-ai-suite-row:last-of-type{margin-bottom:0 !important}
.suja-ai-suite-row > .elementor-container{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:24px;
  align-items:stretch;
}
.suja-ai-suite-row > .elementor-container > .elementor-column{
  display:flex;
  width:100% !important;
  max-width:100% !important;
  min-width:0;
}
.suja-ai-suite-card{
  display:flex;
  flex-direction:column;
  height:100%;
  width:100%;
  padding:32px !important;
  background:rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  border-radius:14px !important;
  transition:background-color .25s ease, border-color .25s ease;
}
.suja-ai-suite-card:hover{
  background-color:rgba(34,211,238,0.07) !important;
  border-color:rgba(34,211,238,0.45) !important;
}
/* Neutralize Elementor's inner wrap so styling lives on the column */
.suja-ai-suite-card > .elementor-column-wrap,
.suja-ai-suite-card > .elementor-widget-wrap{
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  flex:1;
  display:flex;
  flex-direction:column;
  width:100%;
}
.suja-ai-suite-card .elementor-widget-icon-box{margin:0 !important;flex:1 1 auto}
.suja-ai-suite-card .elementor-icon-box-wrapper{align-items:flex-start;text-align:left}
.suja-ai-suite-card .elementor-icon-box-icon{margin:0 0 16px !important}
.suja-ai-suite-card .elementor-icon-box-icon .elementor-icon{
  width:48px;height:48px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(34,211,238,0.12);
  border-radius:12px;
  color:#22d3ee;
  padding:0 !important;
}
.suja-ai-suite-card .elementor-icon-box-icon .elementor-icon i,
.suja-ai-suite-card .elementor-icon-box-icon .elementor-icon svg{font-size:22px}
.suja-ai-suite-card .elementor-icon-box-title{margin:0 !important;min-height:28px}
.suja-ai-suite-card .elementor-icon-box-description{margin-top:12px;line-height:1.65}
@media (max-width: 1024px){
  .suja-ai-suite-row > .elementor-container{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px){
  .suja-ai-suite-row{margin-bottom:0 !important}
  .suja-ai-suite-row > .elementor-container{
    grid-template-columns:1fr !important;
    gap:16px;
  }
  .suja-ai-suite-card{padding:24px !important}
  .suja-ai-suite-card .elementor-icon-box-title{min-height:0}
}

/* Testimonials slider */
.suja-testimonials-section{position:relative}
.suja-testimonials-swiper{
  position:relative;
  max-width:1200px;
  margin:0 auto;
  padding:8px 56px 60px;
}
.suja-testimonials{overflow:hidden;padding-bottom:8px}
.suja-testimonials .swiper-slide{height:auto;display:flex}
.suja-testimonial-card{
  position:relative;
  display:flex;flex-direction:column;
  width:100%;
  background:#ffffff;
  border-radius:16px;
  padding:32px 28px 28px;
  box-shadow:0 6px 24px rgba(15,23,42,.08);
  border:1px solid rgba(15,23,42,.04);
  transition:transform .28s ease, box-shadow .28s ease;
}
.suja-testimonial-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(15,23,42,.12);
}
.suja-testimonial-quote{
  display:inline-flex;width:44px;height:44px;
  align-items:center;justify-content:center;
  border-radius:12px;
  background:rgba(8,145,178,.10);
  color:#0891b2;font-size:18px;
  margin-bottom:18px;
}
/* Dependency-free quote glyph — Font Awesome isn't guaranteed to be loaded on
   every page that reuses this section (e.g. the Gyneye product page). Hide the
   empty <i> and paint the mark with a currentColor SVG mask. */
.suja-testimonial-quote i{display:none}
/* The SVG mask below is a comma / "nine" glyph (fat lobe at top) = a CLOSING quote.
   The OPENING mark rotates it 180deg into a "six" (fat lobe at bottom); the closing
   mark uses it as-is — giving a proper matched 66 … 99 pair at the same height. */
.suja-testimonial-quote--close{ margin:0 0 18px auto; }
.suja-testimonial-quote::after{
  content:"";display:block;width:20px;height:20px;
  background-color:currentColor;
  transform:rotate(180deg);
  -webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20448%20512'%3E%3Cpath%20fill%3D'%23000'%20d%3D'M96%2096C43%2096%200%20139%200%20192s43%2096%2096%2096c11%200%2022-2%2032-6-4%2043-40%2070-72%2078-9%202-16%2010-16%2020%200%2012%2010%2022%2022%2020%2068-13%20146-70%20146-198V192c0-53-43-96-96-96zm256%200c-53%200-96%2043-96%2096s43%2096%2096%2096c11%200%2022-2%2032-6-4%2043-40%2070-72%2078-9%202-16%2010-16%2020%200%2012%2010%2022%2022%2020%2068-13%20146-70%20146-198V192c0-53-43-96-96-96z'%2F%3E%3C%2Fsvg%3E");
          mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20448%20512'%3E%3Cpath%20fill%3D'%23000'%20d%3D'M96%2096C43%2096%200%20139%200%20192s43%2096%2096%2096c11%200%2022-2%2032-6-4%2043-40%2070-72%2078-9%202-16%2010-16%2020%200%2012%2010%2022%2022%2020%2068-13%20146-70%20146-198V192c0-53-43-96-96-96zm256%200c-53%200-96%2043-96%2096s43%2096%2096%2096c11%200%2022-2%2032-6-4%2043-40%2070-72%2078-9%202-16%2010-16%2020%200%2012%2010%2022%2022%2020%2068-13%20146-70%20146-198V192c0-53-43-96-96-96z'%2F%3E%3C%2Fsvg%3E");
}
/* Closing mark keeps the mask's native "nine" orientation (higher specificity so it
   wins over the base rotate above). */
.suja-testimonial-quote.suja-testimonial-quote--close::after{ transform:none; }
.suja-testimonial-text{
  margin:0 0 24px;
  color:#334155;
  font-family:'DM Sans',sans-serif;
  font-size:18px;font-style:italic;line-height:1.75;
  font-weight:400;
}
@media (max-width: 1024px){ .suja-testimonial-text{ font-size:17px; } }
@media (max-width: 767px){  .suja-testimonial-text{ font-size:16px; line-height:1.7; } }
.suja-testimonial-meta{
  display:flex;align-items:center;gap:14px;
  padding-top:16px;
  border-top:1px solid rgba(15,23,42,.06);
}
.suja-testimonial-avatar{
  flex:0 0 48px;width:48px;height:48px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,#0891b2 0%,#1a2e4a 100%);
  color:#ffffff;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:15px;font-weight:800;letter-spacing:.5px;
  box-shadow:0 4px 10px rgba(8,145,178,.25);
}
.suja-testimonial-person{display:flex;flex-direction:column}
.suja-testimonial-person strong{
  color:#1a2e4a;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:15px;font-weight:700;line-height:1.2;
}
.suja-testimonial-person span{
  color:#64748b;
  font-family:'DM Sans',sans-serif;
  font-size:13px;margin-top:2px;
}

/* Testimonials nav arrows */
.suja-testimonials-arrow{
  position:absolute;top:calc(50% - 30px);
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 6px 18px rgba(15,23,42,.10);
  color:#0891b2;
  cursor:pointer;z-index:5;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.suja-testimonials-arrow:hover{background:#0891b2;color:#ffffff;transform:scale(1.05)}
.suja-testimonials-arrow:focus-visible{outline:2px solid #0891b2;outline-offset:2px}
.suja-testimonials-arrow.swiper-button-disabled{opacity:.4;pointer-events:none}
.suja-testimonials-prev{left:0}
.suja-testimonials-next{right:0}
/* Dependency-free chevrons (see quote note above). Hide the empty <i> and
   paint the chevron with a currentColor SVG mask so it inherits the hover
   colour flip. */
.suja-testimonials-arrow i{display:none}
.suja-testimonials-arrow::after{
  content:"";display:block;width:15px;height:15px;
  background-color:currentColor;
}
.suja-testimonials-prev::after{
  -webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolyline%20points%3D'15%2018%209%2012%2015%206'%2F%3E%3C%2Fsvg%3E");
          mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolyline%20points%3D'15%2018%209%2012%2015%206'%2F%3E%3C%2Fsvg%3E");
}
.suja-testimonials-next::after{
  -webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolyline%20points%3D'9%2018%2015%2012%209%206'%2F%3E%3C%2Fsvg%3E");
          mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolyline%20points%3D'9%2018%2015%2012%209%206'%2F%3E%3C%2Fsvg%3E");
}

/* Testimonials pagination */
.suja-testimonials-pagination{
  position:absolute;bottom:16px;left:0;right:0;
  text-align:center;
}
.suja-testimonials-pagination .swiper-pagination-bullet{
  width:10px;height:10px;
  background:rgba(8,145,178,.25);opacity:1;
  margin:0 4px;transition:all .25s ease;
}
.suja-testimonials-pagination .swiper-pagination-bullet-active{
  background:#0891b2;width:28px;border-radius:5px;
}

@media (max-width: 767px){
  .suja-testimonials-swiper{padding:8px 0 60px}
  .suja-testimonials-arrow{display:none}
  .suja-testimonial-card{padding:26px 22px 24px}
}

/* ============================================================
   V6 — Trusted By (Suja Logos Marquee custom widget, full-width)
   ============================================================ */
.suja-logos-section{background:#f8fafc;overflow:hidden;position:relative}
.suja-logos-section > .elementor-container{max-width:100% !important;width:100% !important;padding:0 !important}
.suja-logos-section .elementor-widget-suja-logos-marquee,
.suja-logos-section .elementor-widget-suja-logos-marquee > .elementor-widget-container{
  padding:0 !important;margin:0 !important;
}

.suja-logos-marquee-widget{
  --suja-logos-duration:40s;
  --suja-logos-gap:8px;          /* most spacing comes from fixed cells */
  --suja-logos-max-h:34px;       /* smaller, Razorpay-scale logos */
  --suja-logos-cell:168px;       /* equal-width cell per logo */
  width:100%;position:relative;
}

.suja-logos-heading{
  text-align:center;
  font-family:var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.14em;
  color:#64748b;
  margin:0 0 32px 0;
  text-transform:uppercase;
}

.suja-logos-viewport{
  position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%);
}

.suja-logos-track{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:var(--suja-logos-gap);
  width:max-content;
  padding:8px 0;
  /* Animation runs by default. The JS marks the track ready after all
     images load; this just ensures we never lock out the animation if
     the JS fails to run for any reason. */
  animation:suja-logos-scroll var(--suja-logos-duration) linear infinite;
  will-change:transform;
}

/* Visual hint: once JS finishes cloning, the animation runs unaltered.
   Before the ready flag flips, we keep the animation running too — this
   is intentional, so the track scrolls even if the JS cloner errors. */

.suja-logos-marquee-widget[data-pause-hover="1"]:hover .suja-logos-track{
  animation-play-state:paused;
}

/* Each logo sits in a FIXED-WIDTH cell so every gap is identical and no
   single logo can stretch the spacing. The logo is centred inside. */
.suja-logo-item{
  flex:0 0 var(--suja-logos-cell);
  width:var(--suja-logos-cell);
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.suja-logo-item a{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  text-decoration:none;
}
/* Default: every logo muted (grayscale + low opacity). */
.suja-logo-item img{
  max-height:var(--suja-logos-max-h);
  max-width:calc(var(--suja-logos-cell) - 48px);
  height:auto;width:auto;
  object-fit:contain;display:block;
  filter:grayscale(100%);
  opacity:.5;
  transition:filter .3s ease, opacity .3s ease, transform .3s ease;
}
/* Hovering ANYWHERE on the strip lifts EVERY logo to full colour at once
   — uniform across all logos, no "only one" inconsistency. */
.suja-logos-marquee-widget:hover .suja-logo-item img{
  filter:grayscale(0);
  opacity:1;
}
/* The specific logo under the cursor also gets a subtle scale. */
.suja-logo-item:hover img{
  transform:scale(1.06);
}

@keyframes suja-logos-scroll{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}

/* Laptop / small desktop — slightly smaller logos + tighter cells */
@media (max-width: 1199px){
  .suja-logos-marquee-widget{--suja-logos-max-h:30px;--suja-logos-cell:148px;}
}
/* Tablet / mobile — compact cells, faster loop, logos still equal-weight */
@media (max-width: 767px){
  .suja-logos-marquee-widget{--suja-logos-duration:28s;--suja-logos-max-h:26px;--suja-logos-cell:120px;}
  .suja-logo-item{height:48px;}
}

/* Reduced-motion users still see the marquee as a single horizontal strip
   (overflow:hidden on the viewport handles clipping). We just stop the
   animation — we don't reflow the layout into a wrapped grid, since that
   was producing two stacked rows of duplicated logos. */
@media (prefers-reduced-motion: reduce){
  .suja-logos-track{
    animation:none;
    transform:translateX(0);
    /* keep flex-wrap:nowrap and width:max-content from the base rule */
  }
}

/* ============================================================
   Suja Blog Grid — "What's New at Suja" section
   ============================================================ */
.suja-blog-section{
  padding:100px 20px;
  background:#f8fafc;
}
.suja-blog-inner{
  max-width:1200px;
  margin:0 auto;
}
.suja-blog-head{
  max-width:780px;
  margin:0 auto 48px;
  text-align:center;
}
.suja-blog-eyebrow{
  color:#0891b2;
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:14px;
}
.suja-blog-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:40px;
  font-weight:800;
  line-height:1.2;
  color:#1a2e4a;
  margin:0 0 16px;
}
.suja-blog-title .suja-brand-su{color:#0891b2;}
.suja-blog-title .suja-brand-j {color:#64748b;}
.suja-blog-title .suja-brand-a {color:#f59e0b;}
.suja-blog-sub{
  font-family:'DM Sans',sans-serif;
  font-size:16px;
  line-height:1.6;
  color:#64748b;
  margin:0;
}

.suja-blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
@media (max-width:1024px){
  .suja-blog-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:680px){
  .suja-blog-grid{grid-template-columns:1fr;}
  .suja-blog-title{font-size:30px;}
  .suja-blog-section{padding:70px 16px;}
}

.suja-blog-card{
  background:#ffffff;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:
    0 4px 18px rgba(12,30,53,0.06),
    0 0 0 1px rgba(12,30,53,0.04);
  transition:transform .3s ease, box-shadow .3s ease;
}
.suja-blog-card:hover{
  transform:translateY(-4px);
  box-shadow:
    0 18px 40px rgba(12,30,53,0.12),
    0 0 0 1px rgba(12,30,53,0.06);
}

.suja-blog-card-media{
  position:relative;
  display:block;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:#e2e8f0;
  text-decoration:none;
}
.suja-blog-card-media img{
  /* !important guards against Elementor/WP img{height:auto}, which would leave
     the image at its intrinsic height and expose the container's grey background
     as a gap below it. Fill the 4/3 frame so it covers cleanly. */
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.suja-blog-card:hover .suja-blog-card-media img{
  transform:scale(1.04);
}

.suja-blog-category{
  position:absolute;
  top:14px;
  left:14px;
  background:#0891b2;
  color:#ffffff;
  font-family:'DM Sans',sans-serif;
  font-size:12px;
  font-weight:600;
  padding:6px 14px;
  border-radius:999px;
  letter-spacing:.02em;
  z-index:2;
  box-shadow:0 4px 12px rgba(8,145,178,0.3);
}

.suja-blog-card-title-overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:40px 18px 18px;
  color:#ffffff;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:18px;
  font-weight:700;
  line-height:1.35;
  background:linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0) 100%);
  z-index:1;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.suja-blog-card-body{
  padding:20px 22px 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.suja-blog-date{
  color:#64748b;
  font-family:'DM Sans',sans-serif;
  font-size:13px;
}
.suja-blog-card-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:19px;
  font-weight:700;
  line-height:1.35;
  color:#1a2e4a;
  margin:0;
}
.suja-blog-card-title a{
  color:inherit;
  text-decoration:none;
  transition:color .2s ease;
}
.suja-blog-card-title a:hover{color:#0891b2;}
.suja-blog-excerpt{
  color:#64748b;
  font-family:'DM Sans',sans-serif;
  font-size:14px;
  line-height:1.6;
  margin:0;
}
.suja-blog-readmore{
  margin-top:auto;
  padding-top:6px;
  color:#0891b2;
  font-family:'DM Sans',sans-serif;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:gap .2s ease;
  align-self:flex-start;
}
.suja-blog-readmore:hover{gap:12px;}

.suja-blog-empty{
  grid-column:1 / -1;
  text-align:center;
  color:#64748b;
  font-family:'DM Sans',sans-serif;
  font-size:15px;
  padding:40px 0;
}

.suja-blog-viewall{
  text-align:center;
  margin-top:48px;
}
.suja-blog-viewall-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1.5px solid #0891b2;
  background:transparent;
  color:#0891b2;
  padding:13px 28px;
  border-radius:999px;
  font-family:'DM Sans',sans-serif;
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  transition:background .25s ease, color .25s ease, gap .2s ease;
}
.suja-blog-viewall-btn:hover{
  background:#0891b2;
  color:#ffffff;
  gap:12px;
}

/* ========================================================================
   "Ready to Transform Your Hospital?" CTA — flatten nested boxes,
   center the row, and add real gap between the three cards.
   The Elementor columns use IDs cta_c1 / cta_c2 / cta_c3 (and any
   future cta_c*). The post-specific stylesheet was painting a
   rgba(255,255,255,0.06) background on the inner .elementor-widget-wrap
   AND on the .elementor-element-populated, producing a visible "double
   box" effect inside each card. This override removes the inner one and
   keeps only the outer card.
   ======================================================================== */

/* Kill the inner widget-wrap background (the "second box") */
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-element[class*="elementor-element-cta_c"] > .elementor-widget-wrap,
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-element[class*="elementor-element-cta_c"] > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: transparent !important;
  background: none !important;
  box-shadow: none !important;
}

/* Strip any background overlay on the inner wrap */
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-element[class*="elementor-element-cta_c"] > .elementor-widget-wrap > .elementor-background-overlay {
  display: none !important;
}

/* Center the three cards and add gap between them */
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-section:has(> .elementor-container > .elementor-column[class*="elementor-element-cta_c"]) > .elementor-container,
:is(.elementor-32732,.elementor-32738,.elementor-33395) .e-con:has(> .e-con-inner > [class*="elementor-element-cta_c"]) > .e-con-inner {
  justify-content: center !important;
  align-items: stretch !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
}

/* Constrain card width so flex gap is visible and they don't stretch full row */
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-element.elementor-column[class*="elementor-element-cta_c"] {
  flex: 0 1 340px !important;
  max-width: 340px !important;
}

/* Tighten the card itself: keep the single outer rounded box */
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-element[class*="elementor-element-cta_c"] > .elementor-element-populated {
  padding: 28px !important;
  background-color: rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  height: 100%;
}

/* Mobile: stack cards full-width with comfortable gap */
@media (max-width: 767px) {
  :is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-element.elementor-column[class*="elementor-element-cta_c"] {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

/* === Remove the OUTER wrapper background around the 3-card row === */
/* The parent column / container that holds all three cta_c* cards must
   be transparent so only the cards themselves are visible against the
   section's gradient. Targets both classic .elementor-column and Flexbox
   .e-con parents that contain a cta_c child. */

/* Classic column parent (the inner row wrapper that holds all 3 cards) */
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-column:has(> .elementor-element-populated > .elementor-widget-wrap > .elementor-section .elementor-column[class*="elementor-element-cta_c"]) > .elementor-element-populated,
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-section:has(> .elementor-container > .elementor-column[class*="elementor-element-cta_c"]),
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-section:has(> .elementor-container > .elementor-column[class*="elementor-element-cta_c"]) > .elementor-container,
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-section:has(> .elementor-container > .elementor-column[class*="elementor-element-cta_c"]) > .elementor-background-overlay {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Flexbox container parent variant */
:is(.elementor-32732,.elementor-32738,.elementor-33395) .e-con:has(> .e-con-inner > [class*="elementor-element-cta_c"]),
:is(.elementor-32732,.elementor-32738,.elementor-33395) .e-con:has(> .e-con-inner > [class*="elementor-element-cta_c"]) > .e-con-inner,
:is(.elementor-32732,.elementor-32738,.elementor-33395) .e-con:has(> .e-con-inner > [class*="elementor-element-cta_c"]) > .elementor-background-overlay {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Also kill any background on the immediate parent column that wraps
   the row of cards (when the row sits inside another column). */
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-column:has(.elementor-column[class*="elementor-element-cta_c"]) > .elementor-element-populated {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* === OUTER wrapper around the 3 CTA cards — strip background ===
   The outer rectangle that wraps all three cards (separate from each
   card's own dark box) needs to disappear. Cover every wrapper that
   could be painting it: the cta_inner section, any parent column that
   contains the cards, plus any background overlay / motion-effects
   layer. The .elementor-element-cta_c* cards themselves are excluded
   so they keep their own translucent dark box. */

/* Inner section that holds the 3-column row */
body :is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-element.elementor-element-cta_inner,
body :is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-element.elementor-element-cta_inner > .elementor-container,
body :is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-element.elementor-element-cta_inner > .elementor-background-overlay,
body :is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-element.elementor-element-cta_inner > .elementor-shape,
body :is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-element.elementor-element-cta_inner > .elementor-motion-effects-container,
body :is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-element.elementor-element-cta_inner > .elementor-motion-effects-container > .elementor-motion-effects-layer,
/* Any section that contains a cta_c* column (handles renamed IDs) */
body :is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-section:has(> .elementor-container > .elementor-column[class*="elementor-element-cta_c"]),
body :is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-section:has(> .elementor-container > .elementor-column[class*="elementor-element-cta_c"]) > .elementor-container,
body :is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-section:has(> .elementor-container > .elementor-column[class*="elementor-element-cta_c"]) > .elementor-background-overlay,
/* Parent column whose .elementor-element-populated wraps the row */
body :is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-column:has(.elementor-column[class*="elementor-element-cta_c"]):not([class*="elementor-element-cta_c"]) > .elementor-element-populated,
body :is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-column:has(.elementor-column[class*="elementor-element-cta_c"]):not([class*="elementor-element-cta_c"]) > .elementor-element-populated > .elementor-background-overlay,
/* Flexbox container variants */
body :is(.elementor-32732,.elementor-32738,.elementor-33395) .e-con:has(> .e-con-inner > [class*="elementor-element-cta_c"]):not([class*="elementor-element-cta_c"]),
body :is(.elementor-32732,.elementor-32738,.elementor-33395) .e-con:has(> .e-con-inner > [class*="elementor-element-cta_c"]):not([class*="elementor-element-cta_c"]) > .e-con-inner {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ========================================================================
   HERO — Right-side product cards composition
   Used on slides where product_cards repeater has items. Replaces the
   single .suja-hero-image with a staggered 2-column card grid.
   ======================================================================== */

/* When in cards mode, the visual envelope must be transparent and unstyled
   — the cards themselves provide the visual weight. */
.suja-hero-visual.suja-hero-visual--cards{
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible !important;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:520px;
}

/* The 5-card grid (desktop): 2 columns × 3 rows.
   Row 1: HIMS (col 1) | Gyneye (col 2)
   Row 2: AI spans both columns (centered, raised via translateY)
   Row 3: RCM (col 1) | Research (col 2) */
.suja-hero-cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-auto-rows:auto;
  gap:18px;
  width:100%;
  max-width:520px;
  padding:8px;
  align-items:stretch;
}

/* Each card */
.suja-hero-card{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px;
  /* Glassmorphism: frosted translucent white, brighter at the
     top-left for a glass reflection. !important beats the Elementor
     kit inline CSS that pins background + radius on the homepage. */
  background:linear-gradient(135deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.12) 62%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border-radius:22px !important;
  border:1px solid rgba(255,255,255,0.45);
  box-shadow:
    0 18px 42px -16px rgba(8,145,178,0.26),   /* soft healthcare-blue float */
    0 8px 18px -10px rgba(12,30,53,0.14);
  text-decoration:none;
  color:inherit;
  transition:transform .28s ease, box-shadow .28s ease, background .28s ease, border-color .28s ease;
  isolation:isolate;
  min-height:96px;
  overflow:hidden;
}
.suja-hero-card::before{
  /* soft top-left light reflection — premium glass highlight */
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(125% 95% at 0% 0%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 55%);
  pointer-events:none;
  z-index:0;
}
/* keep icon + text above the reflection layer */
.suja-hero-card > *{ position:relative; z-index:1; }
.suja-hero-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,0.6);
  box-shadow:
    0 26px 54px -18px rgba(8,145,178,0.32),
    0 12px 26px -12px rgba(12,30,53,0.16);
}

/* Icon tile */
.suja-hero-card-icon{
  flex:0 0 40px;
  width:40px;height:40px;
  display:inline-flex;
  align-items:center;justify-content:center;
  background:#0891b2;
  color:#ffffff;
  border-radius:10px;
  font-size:18px;
  box-shadow:0 6px 14px -6px rgba(8,145,178,.55);
  transition:transform .25s ease;
}
.suja-hero-card-icon i,
.suja-hero-card-icon svg{
  width:18px;height:18px;
  font-size:18px;
  color:inherit;
  fill:currentColor;
}
.suja-hero-card:hover .suja-hero-card-icon{ transform:scale(1.06); }

/* Card body */
.suja-hero-card-body{
  display:flex;flex-direction:column;
  gap:4px;
  min-width:0; /* allow text truncation if needed */
}
.suja-hero-card-title{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-weight:700;
  font-size:17px;
  line-height:1.2;
  color:#0c1e35;
  letter-spacing:-0.01em;
}
.suja-hero-card-sub{
  font-family:'DM Sans', sans-serif;
  font-weight:400;
  font-size:13px;
  line-height:1.45;
  color:#5b6b80;
}

/* === Staggered placement (≥1100px) ===
   AI card (3rd) sits centered & raised; RCM/Research drop to row 3 */
@media (min-width: 1100px){
  .suja-hero-cards{
    max-width:560px;
    gap:20px;
  }
  .suja-hero-card[data-i="0"]{ grid-column:1; grid-row:1; transform:translateY(8px); }
  .suja-hero-card[data-i="1"]{ grid-column:2; grid-row:1; transform:translateY(0); }
  .suja-hero-card[data-i="2"]{
    grid-column:1 / span 2;
    grid-row:2;
    margin:0 36px;
    transform:translateY(-6px);
    box-shadow:
      0 18px 36px -12px rgba(12,30,53,0.22),
      0 6px 14px -6px rgba(12,30,53,0.10);
  }
  .suja-hero-card[data-i="2"]:hover{
    transform:translateY(-12px);
  }
  .suja-hero-card[data-i="3"]{ grid-column:1; grid-row:3; transform:translateY(-4px); }
  .suja-hero-card[data-i="4"]{ grid-column:2; grid-row:3; transform:translateY(4px); }
}

/* === Tablet (768–1099px): plain 2-col grid, no stagger, 5th spans full === */
@media (min-width: 768px) and (max-width: 1099px){
  .suja-hero-cards{
    max-width:480px;
    gap:14px;
  }
  .suja-hero-card[data-i="4"]{ grid-column:1 / span 2; }
}

/* === Mobile (≤767px): single column stack === */
@media (max-width: 767px){
  .suja-hero-visual.suja-hero-visual--cards{
    min-height:0;
    padding:8px 0;
  }
  .suja-hero-cards{
    grid-template-columns:1fr;
    gap:12px;
    max-width:100%;
    padding:0;
  }
  .suja-hero-card{
    padding:14px;
    min-height:0;
  }
  .suja-hero-card-title{ font-size:16px; }
  .suja-hero-card-sub{ font-size:12.5px; }
}

/* When the visual is in cards mode, the absolute-positioned badge would
   overlap card 4 — keep it above the cards on the bottom-right corner. */
.suja-hero-visual.suja-hero-visual--cards .suja-hero-badge{
  position:absolute;
  bottom:auto; top:-8px; left:auto; right:8px;
  background:rgba(255,255,255,0.95);
}
@media (max-width: 767px){
  .suja-hero-visual.suja-hero-visual--cards .suja-hero-badge{
    position:static;
    margin:0 auto 10px;
    display:inline-flex;
  }
}

/* ========================================================================
   HERO — Circle image + floating cards composition (cards_circle layout)
   Reference: doctor portrait in a center circle, 5 product cards floating
   around it. Used when slide.visual_layout === 'cards_circle'.
   ======================================================================== */

.suja-hero-visual.suja-hero-visual--circle{
  position:relative;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible !important;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:460px;
  width:100%;
}

/* The circle that holds the image. Transparent so PNG alpha shows through. */
.suja-hero-circle{
  --ring-a:#0891b2;
  --ring-b:#f97316;
  position:relative;
  width:380px;
  height:380px;
  border-radius:50%;
  overflow:visible;
  flex:0 0 auto;
  z-index:1;
  background:transparent;
  box-shadow:none;
}
.suja-hero-circle::before{
  /* Gradient ring removed per design — keep the rule but render nothing,
     so the Elementor "Ring Thickness/Color/Opacity" controls still resolve
     to a no-op without throwing CSS errors. */
  content:none;
}
.suja-hero-circle-img{
  position:relative;
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:contain;
  object-position:center;
  display:block;
  background:transparent;
  z-index:1;
}

/* Floating cards layer overlays the circle area */
.suja-hero-cards--floating{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  max-width:none;
  z-index:2;
}
.suja-hero-cards--floating .suja-hero-card{
  position:absolute;
  width:240px;
  pointer-events:auto;
  background:#ffffff;
  border-radius:14px;
  border:1px solid rgba(12,30,53,0.06);
  box-shadow:
    0 16px 32px -12px rgba(12,30,53,0.18),
    0 4px 10px -4px rgba(12,30,53,0.08);
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
  transition:transform .25s ease, box-shadow .25s ease;
  min-height:auto;
  isolation:isolate;
}
/* In circle mode the top hairline pseudo-element from grid mode is hidden */
.suja-hero-cards--floating .suja-hero-card::before{display:none;}

.suja-hero-cards--floating .suja-hero-card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 22px 40px -14px rgba(12,30,53,0.24),
    0 8px 16px -6px rgba(12,30,53,0.12);
}

/* Make the title color in circle mode the brand orange (matches reference) */
.suja-hero-cards--floating .suja-hero-card-title{
  color:#f97316;
  font-size:18px;
  font-weight:800;
}
.suja-hero-cards--floating .suja-hero-card-sub{
  font-size:12.5px;
  line-height:1.4;
  color:#5b6b80;
}

/* Icon tile — slightly larger, brand teal */
.suja-hero-cards--floating .suja-hero-card-icon{
  flex:0 0 44px;
  width:44px;height:44px;
  background:transparent !important;
  color:#0891b2 !important;
  font-size:30px;
  box-shadow:none;
  border-radius:0;
}
.suja-hero-cards--floating .suja-hero-card-icon i,
.suja-hero-cards--floating .suja-hero-card-icon svg{
  width:36px;height:36px;
  font-size:30px;
}

/* Custom inline SVG icons (e.g. Gyneye colposcope device) */
.suja-hero-cards--floating .suja-hero-card-svg{
  width:36px;
  height:36px;
  display:block;
  color:inherit;
}

/* ========================================================================
   LAPTOP LANDING FOLD — keep both the hero slide AND the
   "Trusted by Leading Healthcare Institutions" heading visible above the
   fold on common laptop viewports. Trigger when viewport width is laptop+
   AND viewport height is ≤900px (1366x768, 1440x900, 1536x864 etc).
   ======================================================================== */

/* ≤900px tall laptops (e.g. 1440x900, 1536x864): compress hero so logos peek in */
@media (min-width: 992px) and (max-height: 900px){
  .suja-hero-swiper .swiper{ min-height:520px; }
  .suja-hero-slide{
    min-height:520px;
    padding:24px 24px;
  }
  .suja-hero-inner{ gap:32px; padding:0 20px; }

  .suja-hero-visual.suja-hero-visual--circle{
    min-height:560px;
  }
  .suja-hero-circle{ width:340px; height:340px; margin:0 60px 0 0; }

  /* Cards stay generously sized; positions scale via percentages */
  .suja-hero-cards--floating .suja-hero-card{
    width:230px;
    padding:13px 15px;
  }
  .suja-hero-cards--floating .suja-hero-card-title{ font-size:16px; }
  .suja-hero-cards--floating .suja-hero-card-sub{ font-size:12.5px; line-height:1.35; }
  .suja-hero-cards--floating .suja-hero-card-icon{
    flex:0 0 40px;
    width:40px; height:40px;
    font-size:26px;
  }
  .suja-hero-cards--floating .suja-hero-card-icon i,
  .suja-hero-cards--floating .suja-hero-card-icon svg,
  .suja-hero-cards--floating .suja-hero-card-svg{
    width:32px; height:32px; font-size:26px;
  }

  /* Image slides 2/3 — keep image height in proportion with the
     compressed slide height. */
  .suja-hero-image{ height:400px; }

  /* Hero text: smaller heading + tighter rhythm so left column matches right */
  .suja-hero-eyebrow{ margin-bottom:14px; }
  .suja-hero-heading{ font-size:clamp(28px,3.2vw,44px); margin-bottom:12px; }
  /* .suja-hero-desc font-size now owned by typography.css (18/17/16 spec) */
  .suja-hero-desc{ margin-bottom:20px; }
  .suja-hero-ctas{ margin-bottom:22px; gap:12px; }
  .suja-hero-btn{ padding:12px 22px; min-height:46px; font-size:14px; }
  .suja-hero-stats{ gap:14px 24px; padding-top:16px; }
  .suja-hero-stat{ gap:8px; }
  .suja-hero-stat-icon{ width:28px; height:28px; flex:0 0 28px; font-size:20px; }
  .suja-hero-stat-icon svg, .suja-hero-stat-icon i{ width:22px; height:22px; font-size:20px; }
  .suja-hero-stat strong{ font-size:20px; }
  .suja-hero-stat span{ font-size:10.5px; letter-spacing:0.8px; }

  /* Logos section: trim 56px → 18px vertical padding so heading peeks in */
  .elementor-32732 .suja-logos-section{
    padding-top:18px !important;
    padding-bottom:18px !important;
  }
  .suja-logos-marquee-widget .suja-logos-heading{
    margin-bottom:14px;
  }
}

/* ≤800px tall (1366x768 etc.) — go tighter and drop stats to gain headroom */
@media (min-width: 992px) and (max-height: 800px){
  .suja-hero-swiper .swiper{ min-height:440px; }
  .suja-hero-slide{
    min-height:440px;
    padding:16px 24px;
  }
  .suja-hero-inner{ gap:28px; }

  .suja-hero-visual.suja-hero-visual--circle{
    min-height:480px;
  }
  .suja-hero-circle{ width:300px; height:300px; margin:0 50px 0 0; }

  .suja-hero-cards--floating .suja-hero-card{ width:215px; padding:11px 13px; }
  .suja-hero-cards--floating .suja-hero-card-title{ font-size:15px; }
  .suja-hero-cards--floating .suja-hero-card-sub{ font-size:12px; line-height:1.3; }
  .suja-hero-cards--floating .suja-hero-card-icon{
    flex:0 0 36px;
    width:36px; height:36px;
    font-size:22px;
  }
  .suja-hero-cards--floating .suja-hero-card-icon i,
  .suja-hero-cards--floating .suja-hero-card-icon svg,
  .suja-hero-cards--floating .suja-hero-card-svg{
    width:28px; height:28px; font-size:22px;
  }

  /* Image slides 2/3 — shorter image for the 1366×768 tier. */
  .suja-hero-image{ height:360px; }

  .suja-hero-eyebrow{ margin-bottom:10px; padding:4px 11px; font-size:11px; }
  .suja-hero-heading{ font-size:clamp(24px,2.8vw,36px); margin-bottom:10px; line-height:1.1; }
  /* .suja-hero-desc font-size now owned by typography.css (18/17/16 spec) */
  .suja-hero-desc{ margin-bottom:16px; }
  .suja-hero-ctas{ margin-bottom:14px; gap:10px; }
  .suja-hero-btn{ padding:10px 18px; min-height:42px; font-size:13.5px; }

  /* Stats kept visible on the floating-cards slide on tight 1366×768
     viewports. Tightened so they fit without pushing logos out of view. */
  .suja-hero-stats{ gap:10px 18px; padding-top:12px; margin-bottom:8px; }
  .suja-hero-stat{ gap:7px; }
  .suja-hero-stat-icon{ width:24px; height:24px; flex:0 0 24px; font-size:18px; }
  .suja-hero-stat-icon svg, .suja-hero-stat-icon i{ width:20px; height:20px; font-size:18px; }
  .suja-hero-stat strong{ font-size:18px; line-height:1.05; }
  .suja-hero-stat span{ font-size:10px; letter-spacing:0.6px; margin-top:1px; }

  .elementor-32732 .suja-logos-section{
    padding-top:14px !important;
    padding-bottom:14px !important;
  }
  .suja-logos-marquee-widget .suja-logos-heading{
    font-size:13px;
    letter-spacing:1.2px;
    margin-bottom:10px;
  }
  .suja-logos-track{ animation-duration:30s; }
  .suja-logo-item{ height:54px; }
}

/* === Desktop ≥1100px: floating composition around circle ===
   Reference layout: cards spread AROUND the circle with breathing room
   (not overlapping the circle, not crammed against its edge). Side cards
   extend a few % past the wrapper edges so they sit clearly outside the
   circle. RCM is fully below the circle's bottom edge. Circle stays put. */
@media (min-width: 1100px){
  .suja-hero-visual--circle{ min-height:540px; }
  .suja-hero-circle{ width:340px; height:340px; margin:0 52px 0 0; }

  .suja-hero-cards--floating .suja-hero-card{ width:230px; min-height:97px; box-sizing:border-box; padding:13px 15px; }
  .suja-hero-cards--floating .suja-hero-card-title{ font-size:17px; }
  .suja-hero-cards--floating .suja-hero-card-sub{ font-size:12.5px; }
  .suja-hero-cards--floating .suja-hero-card-icon{
    flex:0 0 44px;
    width:44px; height:44px;
    font-size:30px;
  }
  .suja-hero-cards--floating .suja-hero-card-icon i,
  .suja-hero-cards--floating .suja-hero-card-icon svg,
  .suja-hero-cards--floating .suja-hero-card-svg{
    width:36px; height:36px; font-size:30px;
  }

  /* Even circle: the five cards sit 72° apart on ONE shared radius around the
     circle's centre (~45% / 50% of the visual), so every gap is equal — this
     closes the previously wide HMIS↔Gyneye gap across the top. Each card is
     centred on its target point with translate(-50%,-50%), so the differing
     card heights don't skew the spacing. Positions are % so they scale. */
  .suja-hero-cards--floating .suja-hero-card[data-i]{
    right:auto; bottom:auto; margin:0; grid-area:auto;
    transform:translate(-50%, -50%);
  }
  .suja-hero-cards--floating .suja-hero-card[data-i]:hover{
    transform:translate(-50%, calc(-50% - 3px));
  }
  /* Even circle: 5 cards 72° apart on one radius, pushed outward so they ride
     the circle's edge. Angles RCM 18°, Research 90°, AI 162°, HMIS 234°,
     Gyneye 306° (0°=east, cw). Symmetric about the circle centre (45.3%). */
  .suja-hero-cards--floating .suja-hero-card[data-i="0"]{ left:17%;   top:10.9%; } /* HMIS     — top-left    */
  .suja-hero-cards--floating .suja-hero-card[data-i="1"]{ left:73.6%; top:10.9%; } /* Gyneye   — top-right   */
  .suja-hero-cards--floating .suja-hero-card[data-i="2"]{ left:3.6%;  top:58.2%; } /* AI       — left        */
  .suja-hero-cards--floating .suja-hero-card[data-i="3"]{ left:45.3%; top:95.8%; } /* Research — bottom-centre */
  .suja-hero-cards--floating .suja-hero-card[data-i="4"]{ left:88%;   top:58.2%; } /* RCM      — right       */
}

/* === 992–1099px: same arrangement, scaled === */
@media (min-width: 992px) and (max-width: 1099px){
  .suja-hero-visual--circle{ min-height:470px; }
  .suja-hero-circle{ width:300px; height:300px; margin:0 44px 0 0; }
  .suja-hero-cards--floating .suja-hero-card{ width:208px; min-height:90px; box-sizing:border-box; padding:11px 13px; }
  .suja-hero-cards--floating .suja-hero-card-title{ font-size:17px; }
  .suja-hero-cards--floating .suja-hero-card-sub{ font-size:12.5px; }
  .suja-hero-cards--floating .suja-hero-card-icon{
    flex:0 0 40px;
    width:40px; height:40px;
    font-size:26px;
  }
  .suja-hero-cards--floating .suja-hero-card-icon i,
  .suja-hero-cards--floating .suja-hero-card-icon svg,
  .suja-hero-cards--floating .suja-hero-card-svg{
    width:32px; height:32px; font-size:26px;
  }

  /* Even circle — 72° apart, equal radius. Values are tuned to THIS breakpoint's
     taller visual box + circle centre (~46.4% / 50%). */
  .suja-hero-cards--floating .suja-hero-card[data-i]{ right:auto; bottom:auto; margin:0; grid-area:auto; transform:translate(-50%, -50%); }
  .suja-hero-cards--floating .suja-hero-card[data-i]:hover{ transform:translate(-50%, calc(-50% - 3px)); }
  /* Even circle (same 72° layout as ≥1100, scaled to this box). */
  .suja-hero-cards--floating .suja-hero-card[data-i="0"]{ left:20.8%; top:23.3%; } /* HMIS */
  .suja-hero-cards--floating .suja-hero-card[data-i="1"]{ left:70.1%; top:23.3%; } /* Gyneye */
  .suja-hero-cards--floating .suja-hero-card[data-i="2"]{ left:5.6%;  top:60.2%; } /* AI */
  .suja-hero-cards--floating .suja-hero-card[data-i="3"]{ left:45.5%; top:83.0%; } /* Research */
  .suja-hero-cards--floating .suja-hero-card[data-i="4"]{ left:85.4%; top:60.2%; } /* RCM */
}

/* ============================================================
   HERO HEIGHT — width-based tiers
   Reduces the hero so the client-logos section enters the first
   viewport on common desktop/laptop widths. Slide 1 height is
   driven by .suja-hero-visual--circle min-height; slides 2 & 3
   by the swiper/slide min-height + image max-height.
   ============================================================ */

/* Large desktop (1440px+) — compact premium, not full-screen */
@media (min-width: 1440px){
  .suja-hero-swiper .swiper,
  .suja-hero-slide{ min-height:600px; }
  .suja-hero-slide{ padding:52px 24px; }
  .suja-hero-visual--circle{ min-height:540px; }
  .suja-hero-image{ max-height:480px; }
}

/* Standard desktop / laptop (1200–1439px) — slightly shorter */
@media (min-width: 1200px) and (max-width: 1439px){
  .suja-hero-swiper .swiper,
  .suja-hero-slide{ min-height:560px; }
  .suja-hero-slide{ padding:44px 24px; }
  .suja-hero-visual--circle{ min-height:510px; }
  .suja-hero-circle{ width:325px; height:325px; }
  .suja-hero-inner{ gap:40px; }
  .suja-hero-image{ max-height:440px; }
}

/* Small desktop / laptop (1025–1199px) — noticeably reduced so logos show */
@media (min-width: 1025px) and (max-width: 1199px){
  .suja-hero-swiper .swiper,
  .suja-hero-slide{ min-height:500px; }
  .suja-hero-slide{ padding:34px 24px; }
  .suja-hero-visual--circle{ min-height:452px; }
  .suja-hero-circle{ width:288px; height:288px; margin:0 40px 0 0; }
  .suja-hero-inner{ gap:32px; }
  .suja-hero-image{ max-height:400px; }
  .suja-hero-cards--floating .suja-hero-card{ width:206px; padding:11px 13px; }
  .suja-hero-cards--floating .suja-hero-card-title{ font-size:16px; }
  .suja-hero-cards--floating .suja-hero-card-sub{ font-size:12px; }
}

/* === 768–991px: stack — circle centered above, cards in 2-col grid below === */
@media (min-width: 768px) and (max-width: 991px){
  .suja-hero-visual--circle{
    flex-direction:column;
    min-height:auto;
    gap:24px;
    padding:8px 0;
  }
  .suja-hero-circle{ width:280px; height:280px; }
  .suja-hero-cards--floating{
    position:static;
    inset:auto;
    width:100%;
    height:auto;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
  }
  .suja-hero-cards--floating .suja-hero-card{
    position:static;
    inset:auto;
    width:100%;
    transform:none !important;
  }
  .suja-hero-cards--floating .suja-hero-card[data-i="4"]{
    grid-column:1 / span 2; /* Research spans full row */
  }
}

/* === Mobile ≤767px: single column stack === */
@media (max-width: 767px){
  .suja-hero-visual--circle{
    flex-direction:column;
    min-height:auto;
    gap:16px;
    padding:8px 0;
  }
  .suja-hero-circle{ width:240px; height:240px; }
  .suja-hero-cards--floating{
    position:static;
    inset:auto;
    width:100%;
    height:auto;
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }
  .suja-hero-cards--floating .suja-hero-card{
    position:static;
    inset:auto;
    width:100%;
    transform:none !important;
    padding:12px 14px;
  }
  .suja-hero-cards--floating .suja-hero-card-title{ font-size:16px; }
  .suja-hero-cards--floating .suja-hero-card-sub{ font-size:12px; }
}

/* Badge in circle mode: park it below the circle on desktop, hide on smaller */
.suja-hero-visual--circle .suja-hero-badge{
  position:absolute;
  left:50%;
  bottom:6%;
  transform:translateX(-50%);
  z-index:3;
}
@media (max-width: 991px){
  .suja-hero-visual--circle .suja-hero-badge{
    position:static;
    transform:none;
    margin:0 auto;
  }
}



/* ============================================================
   Footer template (post 32735) — white finish
   --------------------------------------------------------------
   Belt-and-braces on top of the data migration: force the footer
   sections to white with dark text in case any custom edit slips
   through. The migration handles each widget individually; this
   block catches anything global like buttons or list items.
   ============================================================ */
.elementor-32735 .elementor-section,
.elementor-32735 .elementor-container,
.elementor-32735 .e-con,
.elementor-32735 .elementor-element-populated{
  background-color: var(--suja-footer-bg) !important;
}
.elementor-32735{
  border-top: 1px solid rgba(12,30,53,0.06);
}
.elementor-32735 .elementor-heading-title,
.elementor-32735 .elementor-icon-list-text,
.elementor-32735 p,
.elementor-32735 li{
  color: var(--suja-heading-dark);
}
.elementor-32735 .elementor-text-editor{
  color: var(--suja-text-dark) !important;
}
.elementor-32735 .elementor-icon-list-icon i,
.elementor-32735 .elementor-icon-list-icon svg{
  color: var(--suja-link-teal) !important;
  fill: var(--suja-link-teal) !important;
}
.elementor-32735 a{ color: var(--suja-link-teal); }
.elementor-32735 a:hover{ color: #075985; }

/* Footer logo image: SVG renders its own colors — no filter needed
   for the colored Suja brand mark. If a future logo upload happens
   to be white-on-transparent, this filter clause is a safety net.
   To enable, change `none` to `invert(1) brightness(.2) saturate(2)`. */
.elementor-32735 img[src*="Logo.svg"]{
  filter: none;
}

/* Homepage body zone (post 32732) — section bg fallback in case data
   migration is bypassed. Hero swiper and CTA gradient explicitly opt
   out via :not() guards. */
.elementor-32732 > .elementor-section:not(.suja-hero-section):not(:has(.suja-hero-swiper)):not(:has(.elementor-element-cta_outer)){
  /* Migration sets these inline; this is a layered safety only,
     left non-!important so user edits still win. */
}


/* ============================================================
   AI Suite — "AI That Works Where Clinicians Work"
   --------------------------------------------------------------
   Section sits on the unified light body bg (#f8fafc). Cards
   need a visible white surface, dark title, muted description,
   teal icon — matches the rest of the page card system.
   ============================================================ */

/* Section eyebrow ("SUJA AI SUITE") — first heading in section */
.elementor-32732 .suja-ai-suite-section .elementor-widget-heading:first-of-type .elementor-heading-title{
  color:#0891b2 !important;
}

/* Section main heading ("AI That Works Where Clinicians Work") */
.elementor-32732 .suja-ai-suite-section .elementor-widget-heading:nth-of-type(2) .elementor-heading-title,
.elementor-32732 .suja-ai-suite-section h2.elementor-heading-title{
  color:#0c1e35 !important;
}

/* Card surface — solid white panel matching Specialty cards */
.elementor-32732 .suja-ai-suite-card{
  background-color:#ffffff !important;
  border:1px solid #e2e8f0 !important;
  border-radius:14px !important;
  box-shadow:0 4px 20px rgba(15,23,42,0.05);
  transition:transform .25s ease, box-shadow .25s ease;
}
.elementor-32732 .suja-ai-suite-card > .elementor-widget-wrap,
.elementor-32732 .suja-ai-suite-card > .elementor-element-populated{
  background-color:#ffffff !important;
  border-radius:14px;
}
.elementor-32732 .suja-ai-suite-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(15,23,42,0.08);
}

/* Card title — dark for contrast on white card */
.elementor-32732 .suja-ai-suite-card .elementor-icon-box-title,
.elementor-32732 .suja-ai-suite-card .elementor-icon-box-title *{
  color:#0c1e35 !important;
}

/* Card description — muted slate */
.elementor-32732 .suja-ai-suite-card .elementor-icon-box-description{
  color:#475569 !important;
}

/* Card icon — teal */
.elementor-32732 .suja-ai-suite-card .elementor-icon,
.elementor-32732 .suja-ai-suite-card .elementor-icon i,
.elementor-32732 .suja-ai-suite-card .elementor-icon svg{
  color:#0891b2 !important;
  fill:#0891b2 !important;
}

/* ============================================================
   CTA — "Ready to Transform Your Hospital?"
   --------------------------------------------------------------
   Section sits on the teal→navy gradient. Cards need a glass
   surface (translucent white + blur) so they read as elevated
   panels against the gradient, not bare text + button.
   ============================================================ */

/* Card surface — translucent glass on gradient */
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-element[class*="elementor-element-cta_c"]:not(.elementor-element-cta_inner):not(.elementor-element-cta_outer){
  /* nothing here — guard for the selector with same specificity below */
}

:is(.elementor-32732,.elementor-32738,.elementor-33395) [class*="elementor-element-cta_c"][data-element_type="column"]{
  /* Cards are top-level columns inside cta_inner */
}
/* Card surface — homepage hero product-card glassmorphism (light). */
:is(.elementor-32732,.elementor-32738,.elementor-33395) [class*="elementor-element-cta_c"][data-element_type="column"] > .elementor-element-populated,
:is(.elementor-32732,.elementor-32738,.elementor-33395) [class*="elementor-element-cta_c"][data-element_type="column"] > .elementor-widget-wrap{
  background:linear-gradient(135deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.12) 62%) !important;
  border:1px solid rgba(255,255,255,0.55) !important;
  border-radius:22px !important;
  box-shadow:
    0 18px 42px -16px rgba(8,145,178,0.26),
    0 8px 18px -10px rgba(12,30,53,0.14) !important;
  padding:30px 26px !important;
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  transition:transform .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
:is(.elementor-32732,.elementor-32738,.elementor-33395) [class*="elementor-element-cta_c"][data-element_type="column"]:hover > .elementor-element-populated,
:is(.elementor-32732,.elementor-32738,.elementor-33395) [class*="elementor-element-cta_c"][data-element_type="column"]:hover > .elementor-widget-wrap{
  transform:translateY(-4px);
  border-color:rgba(8,145,178,0.42) !important;
  box-shadow:
    0 26px 52px -18px rgba(8,145,178,0.36),
    0 10px 22px -10px rgba(12,30,53,0.18) !important;
}

/* CTA card icon — brand teal */
:is(.elementor-32732,.elementor-32738,.elementor-33395) [class*="elementor-element-cta_c"] .elementor-icon i,
:is(.elementor-32732,.elementor-32738,.elementor-33395) [class*="elementor-element-cta_c"] .elementor-icon svg{
  color:#0891b2 !important;
  fill:#0891b2 !important;
}

/* CTA card title — dark on light */
:is(.elementor-32732,.elementor-32738,.elementor-33395) [class*="elementor-element-cta_c"] .elementor-heading-title{
  color:#0c1e35 !important;
  font-weight:700;
}

/* CTA card description — slate on light */
:is(.elementor-32732,.elementor-32738,.elementor-33395) [class*="elementor-element-cta_c"] .elementor-widget-text-editor,
:is(.elementor-32732,.elementor-32738,.elementor-33395) [class*="elementor-element-cta_c"] .elementor-widget-text-editor p{
  color:#475569 !important;
}

/* CTA card buttons — equal-height, pill. Outline (non-primary) → teal. */
:is(.elementor-32732,.elementor-32738,.elementor-33395) [class*="elementor-element-cta_c"] .elementor-button{
  min-height:44px;
  border-radius:999px !important;
  transition:transform .2s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
:is(.elementor-32732,.elementor-32738,.elementor-33395) [class*="elementor-element-cta_c"] .elementor-button:hover{
  transform:translateY(-1px);
}
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-element-cta_c2_btn .elementor-button,
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-element-cta_c3_btn .elementor-button{
  color:#0891b2 !important; border:1.5px solid #0891b2 !important; background:transparent !important;
}
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-element-cta_c2_btn .elementor-button:hover,
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-element-cta_c3_btn .elementor-button:hover{
  background:#0891b2 !important; color:#ffffff !important;
}

/* Strip any earlier overrides that nulled the cta_c surfaces — those
   were added to fix a "double background" complaint that no longer
   applies now that the cards have their own glass surface. */
:is(.elementor-32732,.elementor-32738,.elementor-33395) [class*="elementor-element-cta_c"] > .elementor-widget-wrap{
  background-image:none;
}

/* ============================================================
   CTA outer section — restore the gradient
   --------------------------------------------------------------
   The "Ready to Transform" outer section was flattened to the
   unified body bg by the earlier unify-bg migration (its data
   didn't carry the gradient marker so the skip check missed
   it). This restores the teal→navy gradient so the CTA reads
   as the intentional visual break it was designed to be.
   Targets ANY top-level homepage section that contains the
   cta_inner row of cards — so no hard-coded element ID.
   ============================================================ */
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-section.elementor-top-section:has(.elementor-element-cta_inner),
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-section.elementor-top-section:has(.elementor-element-cta_inner):not(.elementor-motion-effects-element-type-background),
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-section.elementor-top-section:has(.elementor-element-cta_inner) > .elementor-motion-effects-container > .elementor-motion-effects-layer{
  background-color:#edf4f9 !important;
  background-image:none !important;
}

/* Inner CTA row stays transparent so the gradient shows through */
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-element.elementor-element-cta_inner,
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-element.elementor-element-cta_inner > .elementor-container,
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-element.elementor-element-cta_inner > .elementor-background-overlay{
  background:transparent !important;
}

/* CTA heading + description above the cards — dark on the light band */
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-section.elementor-top-section:has(.elementor-element-cta_inner) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-heading .elementor-heading-title{
  color:#0c1e35 !important;
}
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-section.elementor-top-section:has(.elementor-element-cta_inner) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor,
:is(.elementor-32732,.elementor-32738,.elementor-33395) .elementor-section.elementor-top-section:has(.elementor-element-cta_inner) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor p{
  color:#475569 !important;
}

/* ============================================================
   Footer (Theme Builder template 32735) — 5-column premium grid
   --------------------------------------------------------------
   Col 1 (.suja-ft-brand) — 32% — brand anchor: logo, description,
   social row, phone/email.
   Cols 2–5 (.suja-ft-col) — 17% each — Software, Services,
   Specialities, Company.
   ============================================================ */

/* Outer footer-main section: tighten gutter rhythm on wide desktops */
.elementor-32735 .suja-footer-main > .elementor-container{
  max-width:1220px;
  padding-left:24px;
  padding-right:24px;
}

/* Brand column — logo + description spacing */
.elementor-32735 .suja-ft-brand .elementor-widget-image{
  margin-bottom:6px;
}
.elementor-32735 .suja-ft-brand .elementor-widget-image img{
  width:140px;
  height:auto;
  display:block;
}
.elementor-32735 .suja-ft-brand .elementor-widget-text-editor p{
  color:#475569;
  font-family:'DM Sans', sans-serif;
  font-size:14px;
  line-height:1.65;
  max-width:340px;
  margin:0;
}

/* Social icons row */
.elementor-32735 .suja-ft-social .elementor-grid{
  justify-content:flex-start !important;
  gap:10px !important;
}
.elementor-32735 .suja-ft-social .elementor-social-icon{
  background-color:rgba(8,145,178,0.08) !important;
  color:#0891b2 !important;
  width:38px;
  height:38px;
  border-radius:10px;
  transition:background-color .25s ease, color .25s ease, transform .25s ease;
}
.elementor-32735 .suja-ft-social .elementor-social-icon:hover{
  background-color:#0891b2 !important;
  color:#ffffff !important;
  transform:translateY(-2px);
}
.elementor-32735 .suja-ft-social .elementor-social-icon svg,
.elementor-32735 .suja-ft-social .elementor-social-icon i{
  font-size:15px;
}

/* "Talk to us" eyebrow + contact lines */
.elementor-32735 .suja-ft-brand .elementor-widget-heading .elementor-heading-title{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#64748b !important; /* eyebrow muted, not full dark */
}
.elementor-32735 .suja-ft-contact .elementor-icon-list-item a{
  color:#0c1e35 !important;
  font-weight:600;
  font-size:15px;
  transition:color .2s ease;
}
.elementor-32735 .suja-ft-contact .elementor-icon-list-item a:hover{
  color:#0891b2 !important;
}
.elementor-32735 .suja-ft-contact .elementor-icon-list-icon{
  color:#0891b2 !important;
}
.elementor-32735 .suja-ft-contact .elementor-icon-list-icon i,
.elementor-32735 .suja-ft-contact .elementor-icon-list-icon svg{
  font-size:14px;
}

/* Link columns — heading style */
.elementor-32735 .suja-ft-col .elementor-widget-heading .elementor-heading-title{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#0c1e35 !important;
  margin:0 0 8px 0;
}

/* Link columns — list items */
.elementor-32735 .suja-ft-col .suja-ft-links .elementor-icon-list-items{
  display:flex;
  flex-direction:column;
}
.elementor-32735 .suja-ft-col .suja-ft-links .elementor-icon-list-item{
  margin:0;
}
.elementor-32735 .suja-ft-col .suja-ft-links .elementor-icon-list-item a{
  display:inline-block;
  font-family:'DM Sans', sans-serif;
  font-size:14px;
  line-height:1.45;
  color:#64748b !important;          /* matches product-card link text */
  text-decoration:none;
  transition:color .2s ease;
}
.elementor-32735 .suja-ft-col .suja-ft-links .elementor-icon-list-item a:hover{
  color:#475569 !important;          /* prior footer color → now the hover */
  text-decoration:none !important;   /* no underline, color change only */
  transform:none;
}

/* Bottom strip */
.elementor-32735 .suja-footer-bot > .elementor-container{
  max-width:1220px;
  padding-left:24px;
  padding-right:24px;
}
.elementor-32735 .suja-footer-bot p{
  color:#64748b !important;
  font-family:'DM Sans', sans-serif;
  font-size:13px;
  margin:0;
}
.elementor-32735 .suja-ft-policy .elementor-icon-list-items{
  justify-content:flex-end;
  gap:24px;
}
.elementor-32735 .suja-ft-policy .elementor-icon-list-item a{
  color:#64748b !important;
  font-family:'DM Sans', sans-serif;
  font-size:13px;
  transition:color .2s ease;
}
.elementor-32735 .suja-ft-policy .elementor-icon-list-item a:hover{
  color:#0891b2 !important;
}

/* === Responsive — tablet === */
@media (max-width: 1024px){
  .elementor-32735 .suja-footer-main{
    padding-top:56px !important;
    padding-bottom:32px !important;
  }
  .elementor-32735 .suja-ft-brand{
    margin-bottom:28px;
  }
  .elementor-32735 .suja-ft-brand .elementor-widget-text-editor p{
    max-width:none;
  }
  .elementor-32735 .suja-ft-col{
    margin-bottom:16px;
  }
}

/* === Responsive — mobile === */
@media (max-width: 767px){
  .elementor-32735 .suja-footer-main{
    padding-top:48px !important;
    padding-bottom:24px !important;
  }
  .elementor-32735 .suja-ft-brand,
  .elementor-32735 .suja-ft-col{
    margin-bottom:24px;
  }
  .elementor-32735 .suja-ft-brand .elementor-widget-image img{
    width:130px;
  }
  .elementor-32735 .suja-footer-bot > .elementor-container{
    flex-direction:column;
    gap:12px;
  }
  .elementor-32735 .suja-footer-bot p{
    text-align:center;
  }
  .elementor-32735 .suja-ft-policy .elementor-icon-list-items{
    justify-content:center;
    flex-wrap:wrap;
  }
}

/* Footer link/policy columns — hide the default check-mark icons.
   The 'hide_icon: yes' icon-list setting doesn't always apply on
   newer Elementor builds, so we force-hide via CSS. Contact column
   keeps its phone/envelope icons because it uses .suja-ft-contact. */
.elementor-32735 .suja-ft-col .elementor-icon-list-icon,
.elementor-32735 .suja-ft-policy .elementor-icon-list-icon{
  display:none !important;
}
.elementor-32735 .suja-ft-col .elementor-icon-list-text,
.elementor-32735 .suja-ft-policy .elementor-icon-list-text{
  padding-left:0 !important;
  margin-left:0 !important;
}

/* Footer column widths — force the 24/19×4 split because Elementor's
   per-page stylesheet isn't emitting the corresponding width rules for
   these column IDs (it leaves the columns at flex auto, which expands
   the brand column to fill leftover space). */
@media (min-width: 768px){
  .elementor-32735 .suja-footer-main > .elementor-container > .suja-ft-brand{
    width:24% !important;
    max-width:24% !important;
    flex:0 0 24% !important;
  }
  .elementor-32735 .suja-footer-main > .elementor-container > .suja-ft-col{
    width:19% !important;
    max-width:19% !important;
    flex:0 0 19% !important;
  }
}
@media (max-width: 767px){
  .elementor-32735 .suja-footer-main > .elementor-container > .suja-ft-brand,
  .elementor-32735 .suja-footer-main > .elementor-container > .suja-ft-col{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
  }
}


/* Brand column — 50px right gutter for breathing room before Software col.
   Applied as padding on the inner widget-wrap so the column box itself
   stays at 24% width (no overflow). Mobile stack unaffected. */
@media (min-width: 768px){
  .elementor-32735 .suja-ft-brand > .elementor-element-populated,
  .elementor-32735 .suja-ft-brand > .elementor-widget-wrap{
    padding-right:50px !important;
  }
}


/* ============================================================
   THE SUJA HEALTHTECH ECOSYSTEM — homepage section (v3.8.48)
   Featured glass card (left) + 2×3 grid of hover-reveal product
   cards (right). Shares the homepage hero glassmorphism family:
   translucent white surface, soft blue-tinted shadow, top-left
   light reflection, subtle hover lift.
   ============================================================ */
.suja-ecs-host > .elementor-container,
.suja-ecs-host .elementor-widget-suja-ecosystem-showcase,
.suja-ecs-host .elementor-widget-suja-ecosystem-showcase > .elementor-widget-container{
  width:100%;
  max-width:100%;
  padding:0;
  margin:0;
}

.suja-ecs-section{
  position:relative;
  /* Offset anchor jumps (e.g. "Explore Our Products" → /#suja-ecosystem) so the
     heading clears the fixed 81px .suja-navbar instead of hiding beneath it. */
  scroll-margin-top:100px;
  padding:clamp(72px, 9vw, 116px) 24px;
  /* Calm gradient field so the glass cards have something to refract. */
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(8,145,178,0.10), transparent 60%),
    radial-gradient(90% 80% at -5% 110%, rgba(37,99,235,0.08), transparent 55%),
    linear-gradient(180deg, #f7fbfd 0%, #eef5f9 100%);
  overflow:hidden;
}
.suja-ecs-container{
  max-width:1366px;
  margin:0 auto;
}

/* ---- Header ---- */
.suja-ecs-head{
  max-width:760px;
  margin:0 auto clamp(34px, 4vw, 52px);
  text-align:center;
}
.suja-ecs-eyebrow{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#0891b2;
  margin-bottom:14px;
}
.suja-ecs-heading{
  margin:0 0 14px;
  font-size:clamp(28px, 3.2vw, 42px);
  line-height:1.14;
  font-weight:800;
  letter-spacing:-0.01em;
  color:#0c1e35;
}
/* Gradient line — brand teal→orange, broken onto its own line. */
.suja-ecs-heading-grad{
  display:block;
  background:linear-gradient(90deg,#0891B2 0%,#FF7033 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.suja-ecs-desc{
  margin:0;
  font-size:clamp(15px, 1.1vw, 17px);
  line-height:1.7;
  color:#475569;
}

/* ---- Two-column grid ---- */
.suja-ecs-grid{
  display:grid;
  grid-template-columns:minmax(0, 33%) minmax(0, 1fr);
  /* Same gap as the product grid so the image card aligns identically. */
  gap:clamp(20px, 1.8vw, 26px);
  align-items:stretch;
}

/* ---- Featured card (left, full height) ----
   Full-bleed image fills the whole card; the title/subtitle/Explore
   sit overlaid on top of it, lifted for legibility by a bottom scrim. */
.suja-ecs-featured{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:100%;
  padding:26px;
  text-decoration:none;
  /* Shared image frame — white border + teal hairline ring + soft glow. */
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.55);
  /* Fallback backdrop shown only through any transparent areas. */
  background:linear-gradient(150deg, rgba(8,145,178,0.92) 0%, rgba(12,74,140,0.94) 100%);
  box-shadow:
    16px 22px 46px -28px rgba(8,145,178,0.20),
    8px 12px 26px -16px rgba(12,30,53,0.11),
    0 0 0 1px rgba(8,145,178,0.14);
  overflow:hidden;
  isolation:isolate;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
/* Image — absolutely fills the card behind everything. */
.suja-ecs-featured-img{
  position:absolute;
  inset:0;
  z-index:0;
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
}
.suja-ecs-featured-img img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
/* Bottom scrim so the overlaid white text stays readable on any image. */
.suja-ecs-featured::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(to top, rgba(6,18,38,0.88) 0%, rgba(6,18,38,0.34) 42%, rgba(6,18,38,0) 70%);
  pointer-events:none;
}
.suja-ecs-featured-body{
  position:relative;
  z-index:2;
  margin-top:0;
}
.suja-ecs-featured-title{
  margin:0 0 6px;
  font-size:clamp(20px, 1.6vw, 24px);
  font-weight:800;
  color:#fff;
  letter-spacing:-0.01em;
}
.suja-ecs-featured-sub{
  margin:0 0 16px;
  font-size:14px;
  line-height:1.5;
  color:rgba(255,255,255,0.82);
}
.suja-ecs-featured-cta{
  display:inline-flex;
  align-items:center;
  font-size:14px;
  font-weight:700;
  color:#fff;
  letter-spacing:0.01em;
  transition:gap .25s ease, transform .25s ease;
}
.suja-ecs-featured:hover{
  transform:translateY(-4px);
  box-shadow:
    20px 28px 54px -26px rgba(8,145,178,0.26),
    10px 16px 32px -16px rgba(12,30,53,0.14),
    0 0 0 1px rgba(8,145,178,0.18);
}
.suja-ecs-featured:hover .suja-ecs-featured-cta{
  transform:translateX(4px);
}

/* ---- Product cards grid (right, 3 cols × 2 rows) ---- */
.suja-ecs-products{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(20px, 1.8vw, 26px);
}
.suja-ecs-product{
  position:relative;
  display:block;
  min-height:250px;
  padding:28px 26px;
  text-decoration:none;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.55);
  background:linear-gradient(135deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.5) 62%);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:
    0 18px 40px -26px rgba(8,145,178,0.30),
    0 2px 8px -4px rgba(12,30,53,0.12);
  overflow:hidden;
  isolation:isolate;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.suja-ecs-product::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(120% 70% at 12% 0%, rgba(255,255,255,0.5), transparent 50%);
  z-index:0;
  pointer-events:none;
}
.suja-ecs-product > *{ position:relative; z-index:1; }

/* Default state: logo + name + link as an evenly-spaced group,
   vertically centered in the card, left-aligned. */
.suja-ecs-product-default{
  display:flex;
  flex-direction:column;
  height:100%;
  justify-content:center;
  align-items:flex-start;
  text-align:left;
  transition:opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
/* Brand logo above the product name — uniform compact size across all
   cards. Higher specificity + !important needed to beat Elementor's
   base ".elementor img{height:auto;max-width:100%}" (same specificity,
   loads later). Fixed height = identical visual size on every card. */
.suja-ecs-product-logo{
  display:block;
  height:20px;
  margin:0 0 16px;
}
.suja-ecs-section .suja-ecs-product .suja-ecs-product-logo img,
.elementor .suja-ecs-product-logo img{
  display:block !important;
  height:20px !important;
  width:auto !important;
  max-width:104px !important;
  object-fit:contain !important;
  object-position:left center !important;
}
.suja-ecs-product-name{
  margin:0 0 25px;        /* heading → link gap */
  font-size:26px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.01em;
  color:#1e293b;          /* clear, high-contrast dark slate */
}
.suja-ecs-product-link{
  font-size:13.5px;
  font-weight:600;
  color:#64748b;          /* muted gray link text, CareCloud-style */
  line-height:1.45;
}
.suja-ecs-product-arrow{
  color:#0891B2;          /* teal chevron accent */
  font-weight:700;
  font-size:17px;
  line-height:1;
}

/* Hover state: description + CTA fade up from below, hidden by default. */
.suja-ecs-product-hover{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  text-align:left;
  padding:28px 26px;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  /* Distinct light-teal panel so the overlay stands out from the card
     background (which is near-white on the light band). */
  background:linear-gradient(150deg, #eaf6fa 0%, #d6ecf3 100%);
  border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(8,145,178,0.14);
  transition:opacity .32s ease, transform .42s cubic-bezier(.22,.61,.36,1);
}
.suja-ecs-product-desc{
  margin:0 0 18px;
  font-size:14px;
  line-height:1.6;
  color:#334155;
}
/* Explore CTA — rounded outline (pill) button, pinned to the bottom. */
.suja-ecs-product-cta{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 18px;
  border:1.5px solid #0891B2;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  color:#0891B2;
  background:transparent;
  transition:background .25s ease, color .25s ease;
}
.suja-ecs-product-cta:hover{
  background:#0891B2;
  color:#fff;
}
.suja-ecs-product-cta:hover .suja-ecs-product-cta-arrow{ color:#fff; }
.suja-ecs-product-cta-arrow{
  font-size:17px;
  line-height:1;
  color:inherit;
}

/* Hover / focus / touch-active reveal. */
.suja-ecs-product:hover,
.suja-ecs-product:focus-visible,
.suja-ecs-product.is-open{
  transform:translateY(-4px);
  border-color:rgba(8,145,178,0.42);
  box-shadow:
    0 26px 52px -24px rgba(8,145,178,0.42),
    0 4px 12px -4px rgba(12,30,53,0.16);
}
.suja-ecs-product:hover .suja-ecs-product-default,
.suja-ecs-product:focus-visible .suja-ecs-product-default,
.suja-ecs-product.is-open .suja-ecs-product-default{
  opacity:0;
  transform:translateY(-8px);
}
.suja-ecs-product:hover .suja-ecs-product-hover,
.suja-ecs-product:focus-visible .suja-ecs-product-hover,
.suja-ecs-product.is-open .suja-ecs-product-hover{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.suja-ecs-product:hover .suja-ecs-product-cta{ transform:translateX(4px); }

/* ---- Entrance animations ---- */
@media (prefers-reduced-motion: no-preference){
  .suja-ecs-head{ animation:suja-ecs-fade-up 700ms cubic-bezier(.22,.61,.36,1) both; }
  .suja-ecs-featured{ animation:suja-ecs-fade-scale 800ms cubic-bezier(.22,.61,.36,1) both; animation-delay:120ms; }
  .suja-ecs-product{ animation:suja-ecs-fade-up 640ms cubic-bezier(.22,.61,.36,1) both; animation-delay:calc(180ms + var(--ecs-i, 0) * 80ms); }
}
@keyframes suja-ecs-fade-up{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes suja-ecs-fade-scale{
  from{ opacity:0; transform:scale(0.965); }
  to{ opacity:1; transform:scale(1); }
}

/* ---- Responsive ---- */
@media (max-width: 1024px){
  /* Featured on top (full width), products in 2 cols below. Image stays
     full-bleed; give the card a fixed min-height so it shows. */
  .suja-ecs-grid{ grid-template-columns:1fr; }
  .suja-ecs-featured{ min-height:360px; }
  .suja-ecs-products{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  .suja-ecs-featured{ min-height:320px; }
  .suja-ecs-products{ grid-template-columns:1fr; }
  /* Touch: cards stay tappable; reveal handled by .is-open via JS. */
  .suja-ecs-product{ min-height:0; }
  .suja-ecs-product-hover{ position:relative; inset:auto; opacity:1; transform:none; pointer-events:auto; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:14px 0 0; }
  .suja-ecs-product-default{ height:auto; }
}


/* ============================================================
   UNIFIED MID-PAGE BACKGROUND BAND — homepage (v3.8.52)
   CareCloud-style single continuous light field behind every
   section from the client-logos strip down to (but NOT including)
   the final "Ready to Transform Your Hospital?" CTA. Each section
   in the band shares one palette-matched tint so the seams between
   them disappear and the whole block reads as one background.

   Band sections (top-level, in order):
     0a38e3c  client logos marquee
     sujaecos1 SUJA HealthTech Ecosystem (featured + product cards)
     ecosec1  ecosystem overview
     55e65d8  specialty / product cards
     e7132ce  (mid section)
     9e993ed  testimonials
     fd94765e… blog grid
   Excluded: hero (above) and CTA 514401a + footer (below).
   ============================================================ */
.elementor-32732 .elementor-element-0a38e3c,
.elementor-32732 .elementor-element-sujaecos1,
.elementor-32732 .elementor-element-sujawf1,
.elementor-32732 .elementor-element-sujacs1,
.elementor-32732 .elementor-element-ecosec1,
.elementor-32732 .elementor-element-55e65d8,
.elementor-32732 .elementor-element-e7132ce,
.elementor-32732 .elementor-element-9e993ed,
.elementor-32732 .elementor-element-fd94765e-c0f8-44ad-9c81-fd1a36bd2fcb,
.elementor-32732 .elementor-element-514401a,
.elementor-32732 .elementor-element-514401a:not(.elementor-motion-effects-element-type-background){
  background-color:#edf4f9 !important;
  background-image:none !important;
}
/* Neutralize the per-widget backgrounds that would otherwise break
   the continuity (theme-painted), so the unified tint shows through. */
.elementor-32732 .suja-logos-section{ background:#edf4f9 !important; }
.elementor-32732 .suja-ecs-section{ background:#edf4f9 !important; }
/* Insights & News (blog) inner wrap paints #f8fafc — drop it so the
   unified band shows through with no white block. */
.elementor-32732 .suja-blog-section{ background:transparent !important; }
/* Switch off any section background-overlays inside the band. */
.elementor-32732 .elementor-element-ecosec1 > .elementor-background-overlay,
.elementor-32732 .elementor-element-55e65d8 > .elementor-background-overlay,
.elementor-32732 .elementor-element-e7132ce > .elementor-background-overlay,
.elementor-32732 .elementor-element-9e993ed > .elementor-background-overlay,
.elementor-32732 .elementor-element-fd94765e-c0f8-44ad-9c81-fd1a36bd2fcb > .elementor-background-overlay,
.elementor-32732 .elementor-element-514401a > .elementor-background-overlay{
  background:transparent !important;
  opacity:0 !important;
}


/* ============================================================
   SEAMLESS WORKFLOWS — homepage section (v3.8.78)
   Centered header → pill tab bar → split card (left accordion /
   right synced media). CareCloud-inspired, SUJA design system.
   ============================================================ */
.suja-wf-section{
  position:relative;
  padding:clamp(72px,9vw,116px) 24px;
  --suja-wf-accent:#0891B2;
}
.suja-wf-container{ max-width:1366px; margin:0 auto; }

/* ---- Header (centered) ---- */
.suja-wf-head{ max-width:760px; margin:0 auto clamp(30px,3.4vw,46px); text-align:center; }
.suja-wf-eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--suja-wf-accent); margin-bottom:14px;
}
.suja-wf-heading{
  margin:0 0 14px; font-size:clamp(28px,3.2vw,42px); line-height:1.14;
  font-weight:800; letter-spacing:-0.01em; color:#0c1e35;
}
.suja-wf-heading-grad{
  display:block;
  background:linear-gradient(90deg,#0891B2 0%,#FF7033 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.suja-wf-desc{ margin:0; font-size:clamp(15px,1.1vw,17px); line-height:1.7; color:#475569; }

/* ---- Pill tab bar ---- */
.suja-wf-tabs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px;
  width:max-content; max-width:100%; margin:0 auto clamp(26px,3vw,40px);
  padding:6px; border-radius:999px;
  background:rgba(255,255,255,0.6);
  border:1px solid rgba(8,145,178,0.14);
  box-shadow:0 10px 30px -22px rgba(8,145,178,0.30);
  backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
}
.suja-wf-tab{
  appearance:none; border:1px solid transparent; background:transparent; cursor:pointer;
  padding:11px 22px; border-radius:999px; font-family:'DM Sans',sans-serif;
  font-size:14.5px; font-weight:600; color:#475569; white-space:nowrap;
  transition:color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.suja-wf-tab:hover{ color:var(--suja-wf-accent); }
.suja-wf-tab.is-active{
  color:var(--suja-wf-accent); background:#ffffff;
  border-color:rgba(8,145,178,0.30);
  box-shadow:0 6px 18px -10px rgba(8,145,178,0.35);
}

/* ---- Split card panel ---- */
.suja-wf-panel{ display:none; }
.suja-wf-panel.is-active{
  display:grid; grid-template-columns:1fr 1.12fr;
  border-radius:24px; overflow:hidden; background:#ffffff;
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:
    16px 22px 46px -28px rgba(8,145,178,0.20),
    8px 12px 26px -16px rgba(12,30,53,0.11),
    0 0 0 1px rgba(8,145,178,0.10);
  animation:suja-wf-fade .45s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes suja-wf-fade{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

/* ---- Left: accordion ---- */
.suja-wf-accordion{ padding:clamp(18px,2vw,30px) clamp(18px,2vw,34px); }
.suja-wf-item{ border-bottom:1px solid #eef2f6; position:relative; }
.suja-wf-item:last-child{ border-bottom:0; }
.suja-wf-item-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:0; cursor:pointer; text-align:left;
  padding:20px 0 20px 18px; position:relative;
}
/* teal accent bar on the open item */
.suja-wf-item::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:0; border-radius:3px; background:var(--suja-wf-accent);
  transition:height .3s ease;
}
.suja-wf-item.is-open::before{ height:calc(100% - 18px); }
.suja-wf-item-title{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(17px,1.3vw,20px);
  font-weight:700; line-height:1.3; color:#334155; transition:color .25s ease;
}
.suja-wf-item.is-open .suja-wf-item-title{ color:#0c1e35; }
.suja-wf-chevron{
  flex:0 0 auto; width:11px; height:11px; border-right:2px solid #94a3b8;
  border-bottom:2px solid #94a3b8; transform:rotate(45deg); transition:transform .3s ease, border-color .25s ease;
  margin-right:2px;
}
.suja-wf-item.is-open .suja-wf-chevron{ transform:rotate(-135deg); border-color:var(--suja-wf-accent); }
.suja-wf-item-body{
  max-height:0; overflow:hidden; opacity:0; padding-left:18px;
  transition:max-height .4s ease, opacity .35s ease, padding-bottom .4s ease;
}
.suja-wf-item.is-open .suja-wf-item-body{ max-height:340px; opacity:1; padding-bottom:22px; }
.suja-wf-item-desc{ margin:0; font-size:14.5px; line-height:1.65; color:#475569; }

/* ---- Right: synced media ---- */
.suja-wf-media{
  position:relative; min-height:100%;
  background:linear-gradient(150deg,#eaf6fa 0%,#d6ecf3 100%);
  padding:clamp(22px,2.6vw,40px);
  display:flex;
}
.suja-wf-media-slide{
  position:absolute; inset:clamp(22px,2.6vw,40px); opacity:0; visibility:hidden;
  transition:opacity .4s ease; display:flex; align-items:center; justify-content:center;
}
.suja-wf-media-slide.is-active{ opacity:1; visibility:visible; }
.suja-wf-media-el{
  width:100%; height:100%; max-height:520px; object-fit:contain; display:block;
  background:transparent;
  /* drop-shadow follows the PNG's alpha shape, so transparent images float
     cleanly on the media panel instead of sitting in a white box. */
  filter:
    drop-shadow(0 24px 44px rgba(8,145,178,0.20))
    drop-shadow(0 8px 18px rgba(12,30,53,0.10));
}
/* ---- Multi-image cross-fade layers -------------------------------------
   Stacked in one box so the container size / radius / shadow are unchanged.
   The incoming layer fades in ON TOP of the current one (which stays fully
   opaque underneath), so there is never a translucent or blank frame. Only
   opacity animates — no slide, zoom or flip. ---- */
.suja-wf-media-seq{ position:relative; width:100%; height:100%; }
.suja-wf-media-seq .suja-wf-media-el{
  position:absolute; inset:0; opacity:0; z-index:0;
  /* Fill the layer box so object-fit:contain can centre the image. These are
     absolutely positioned (out of the flex flow), so align-items:center can't
     help — and Elementor/WP force `img{height:auto}`, which would otherwise
     collapse the image to its intrinsic height pinned at top:0. */
  width:100% !important; height:100% !important; object-fit:contain;
  transition:opacity 1.1s ease-in-out;
  will-change:opacity;
}
.suja-wf-media-seq .suja-wf-media-el.is-shown{ opacity:1; z-index:1; }
.suja-wf-media-seq .suja-wf-media-el.is-incoming{ opacity:1; z-index:2; }

.suja-wf-media-ph{
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:#0891b2; font-weight:700; font-size:15px; padding:24px;
  border:1px dashed rgba(8,145,178,0.4); object-fit:unset;
}

/* ---- Entrance ---- */
@media (prefers-reduced-motion: no-preference){
  .suja-wf-head{ animation:suja-wf-fade 700ms cubic-bezier(.22,.61,.36,1) both; }
  .suja-wf-tabs{ animation:suja-wf-fade 740ms cubic-bezier(.22,.61,.36,1) both; animation-delay:80ms; }
}

/* ---- Responsive ---- */
@media (max-width:900px){
  .suja-wf-panel.is-active{ grid-template-columns:1fr; }
  .suja-wf-media{ min-height:340px; order:-1; }      /* media on top when stacked */
  .suja-wf-tabs{ width:100%; overflow-x:auto; justify-content:flex-start; flex-wrap:nowrap; }
}
@media (max-width:560px){
  .suja-wf-tab{ padding:10px 16px; font-size:13.5px; }
  .suja-wf-media{ min-height:260px; }
}


/* ============================================================
   CUSTOMER STORIES — "Trusted by Leading Hospitals" (v3.8.83)
   Auto-playing two-column testimonial slider. Left = serif quote +
   author; Right = customer logo + Read link + 3 stats. SUJA glass.
   ============================================================ */
.suja-cs-section{
  position:relative;
  padding:clamp(72px,9vw,116px) 24px;
  --suja-cs-accent:#0891B2;
}
.suja-cs-container{ max-width:1180px; margin:0 auto; }

/* ---- Header (centered, no description) ---- */
.suja-cs-head{ text-align:center; margin:0 auto clamp(30px,3.6vw,48px); }
.suja-cs-eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--suja-cs-accent); margin-bottom:12px;
}
.suja-cs-heading{
  margin:0; font-size:clamp(28px,3.2vw,42px); line-height:1.14;
  font-weight:800; letter-spacing:-0.01em; color:#0c1e35;
}
.suja-cs-heading-grad{
  background:linear-gradient(90deg,#0891B2 0%,#FF7033 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---- Slider shell ---- */
.suja-cs-slider{ position:relative; }
.suja-cs-viewport{ overflow:hidden; border-radius:24px; }
.suja-cs-track{
  display:flex;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.suja-cs-slide{ flex:0 0 100%; min-width:0; }

/* ---- Split card ---- */
.suja-cs-grid{
  display:grid; grid-template-columns:1fr 1fr;
  border-radius:24px; overflow:hidden; background:#ffffff;
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:
    16px 22px 46px -28px rgba(8,145,178,0.20),
    8px 12px 26px -16px rgba(12,30,53,0.11),
    0 0 0 1px rgba(8,145,178,0.10);
}

/* ---- Left: quote panel ---- */
.suja-cs-quote{
  position:relative;
  background:linear-gradient(150deg,#eaf6fa 0%,#d6ecf3 100%);
  padding:clamp(32px,3.4vw,56px);
  display:flex; flex-direction:column; justify-content:center;
  text-align:center;
}
.suja-cs-qmark{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:clamp(64px,7vw,96px); line-height:0.7; height:42px;
  color:var(--suja-cs-accent); opacity:0.35; font-weight:700;
}
.suja-cs-quote-text{
  margin:18px 0 22px; padding:0; border:0;
  font-family:Georgia, 'Times New Roman', serif;
  font-size:clamp(18px,1.7vw,24px); line-height:1.5; font-weight:500;
  color:#1e293b;
}
/* Closing quote mark — mirrors the opening one, sits just below the text. */
.suja-cs-qmark--close{ height:auto; line-height:0.5; margin:0 0 4px; }
.suja-cs-author{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.suja-cs-author-img{ display:block; margin-bottom:12px; line-height:0; }
.suja-cs-author-img img{
  width:66px; height:66px; border-radius:999px; object-fit:cover; display:block;
  border:3px solid #ffffff;
  box-shadow:0 8px 20px -8px rgba(8,145,178,0.45), 0 0 0 1px rgba(8,145,178,0.22);
}
.suja-cs-author-name{ font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:#0c1e35; font-style:italic; }
.suja-cs-author-role{ font-family:'DM Sans',sans-serif; font-size:13.5px; color:#64748b; font-style:italic; }

/* ---- Right: case panel ---- */
.suja-cs-case{
  background:#ffffff;
  padding:clamp(32px,3.4vw,56px);
  display:flex; flex-direction:column; justify-content:center; gap:30px;
}
/* Selector kept more specific than Elementor's own `.elementor img{height:auto}`
   (equal specificity, loads later) so the logo height is actually honoured. */
.suja-cs-slide .suja-cs-logo img{ height:68px; width:auto; max-width:300px; object-fit:contain; object-position:left center; display:block; }
/* Sitara & Aeva marks are square, so they read smaller at the shared height —
   give them a taller box to match the wide logos' visual weight. */
.suja-cs-slide .suja-cs-logo img[src*="sitara-logo"],
.suja-cs-slide .suja-cs-logo img[src*="Aeva_Fertility"]{ height:80px; }
.suja-cs-location{ display:inline-flex; align-items:center; gap:9px; margin-top:-12px; font-size:17px; font-weight:600; color:#334155; }
.suja-cs-location svg{ width:21px; height:21px; color:var(--suja-cs-accent,#0891B2); flex:0 0 auto; }
.suja-cs-case-foot{ display:flex; flex-direction:column; gap:22px; }
.suja-cs-readlink{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  min-height:24px; /* WCAG 2.5.8 minimum tap target */
  font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:700;
  color:var(--suja-cs-accent); text-decoration:none;
  transition:gap .25s ease;
}
.suja-cs-readlink:hover{ gap:12px; }
.suja-cs-readarrow{ font-size:16px; line-height:1; }

/* Stats row (above the Read link) */
.suja-cs-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding-top:24px; border-top:1px solid #eef2f6; }
.suja-cs-stat{ display:flex; flex-direction:column; gap:2px; }
.suja-cs-stat-num{ font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(22px,2vw,28px); font-weight:800; line-height:1.1; color:var(--suja-cs-accent); letter-spacing:-0.01em; white-space:nowrap; }
.suja-cs-stat-label{ font-family:'Plus Jakarta Sans',sans-serif; font-size:13.5px; font-weight:700; color:#0c1e35; line-height:1.25; margin-top:6px; }
.suja-cs-stat-sub{ font-family:'DM Sans',sans-serif; font-size:12px; color:#64748b; line-height:1.3; }

/* ---- Controls ---- */
.suja-cs-controls{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:28px; }
.suja-cs-arrow{
  width:42px; height:42px; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:24px; line-height:1; color:var(--suja-cs-accent);
  background:#ffffff; border:1.5px solid rgba(8,145,178,0.35);
  box-shadow:0 8px 20px -12px rgba(8,145,178,0.4);
  transition:background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
}
.suja-cs-arrow:hover{ background:var(--suja-cs-accent); color:#fff; border-color:var(--suja-cs-accent); transform:translateY(-1px); }
/* Dots: the BUTTON is a 24px-tall tap target (WCAG 2.5.8 minimum); the
   visible 9px dot is painted by ::before so the design is unchanged.
   Gap is reduced to 2px because each button is now 24px wide — apparent
   spacing between dots stays visually similar and hit areas never overlap. */
.suja-cs-dots{ display:flex; align-items:center; gap:2px; }
.suja-cs-dot{
  position:relative; width:24px; height:24px; min-width:24px;
  border-radius:999px; cursor:pointer; padding:0; border:0;
  background:transparent; transition:width .3s ease;
}
.suja-cs-dot::before{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:9px; height:9px; border-radius:999px;
  background:rgba(8,145,178,0.25); transition:width .3s ease, background .3s ease;
}
.suja-cs-dot.is-active{ width:26px; min-width:26px; }
.suja-cs-dot.is-active::before{ width:26px; background:var(--suja-cs-accent); }

/* ---- Reduced motion: keep autoplay but drop the slide animation ---- */
@media (prefers-reduced-motion: reduce){
  .suja-cs-track{ transition:none; }
}

/* ---- Responsive ---- */
@media (max-width:860px){
  .suja-cs-grid{ grid-template-columns:1fr; }
  .suja-cs-quote{ order:-1; }
  .suja-cs-slide .suja-cs-logo img{ height:54px; }
}
@media (max-width:560px){
  .suja-cs-stats{ grid-template-columns:1fr 1fr; gap:16px; }
  .suja-cs-stat:nth-child(3){ grid-column:1 / -1; }
}


/* ============================================================
   MISSION & VISION — company-about page (v3.8.93)
   Centered header + two premium glass cards. SUJA design system.
   ============================================================ */
/* Background on the full-width Elementor section element (.suja-mv-host)
   so it spans edge-to-edge; the inner .suja-mv-section is transparent. */
.suja-mv-host{
  background:
    radial-gradient(110% 80% at 90% -10%, rgba(8,145,178,0.08), transparent 60%),
    linear-gradient(180deg, #f7fbfd 0%, #edf4f9 100%) !important;
}
.suja-mv-host > .elementor-container{ max-width:100% !important; }

/* Company-about hero — make its band full-bleed (the section container
   was capped at 1366px). Hero content stays centered via .suja-hero-inner. */
.suja-ca-hero > .elementor-container{
  max-width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* ============================================================
   BY THE NUMBERS — stats strip (v3.8.97)
   Full-width white band; a row of big numbers + labels with
   subtle dividers. No heading.
   ============================================================ */
.suja-stats-host{ background:#ffffff !important; }
.suja-stats-host > .elementor-container{ max-width:100% !important; }
.suja-stats-section{
  position:relative;
  padding:clamp(44px,5vw,68px) 24px;
  background:transparent;
  border-top:1px solid rgba(8,145,178,0.10);
  border-bottom:1px solid rgba(8,145,178,0.10);
}
.suja-stats-container{ max-width:1200px; margin:0 auto; }
.suja-stats-row{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  align-items:center;
}
.suja-stat{
  text-align:center;
  padding:6px clamp(12px,1.6vw,26px);
  position:relative;
}
.suja-stat + .suja-stat::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:56px; background:linear-gradient(180deg, transparent, rgba(8,145,178,0.22), transparent);
}
.suja-stat-num{
  display:block;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(30px,3.2vw,44px); font-weight:800; line-height:1;
  letter-spacing:-0.02em; color:#0891B2; margin-bottom:10px;
}
.suja-stat-label{
  display:block;
  font-family:'DM Sans',sans-serif;
  font-size:clamp(12.5px,0.95vw,14px); line-height:1.45; font-weight:500; color:#475569;
}

@media (prefers-reduced-motion: no-preference){
  .suja-stat{ animation:suja-ecs-fade-up 640ms cubic-bezier(.22,.61,.36,1) both; }
  .suja-stat:nth-child(2){ animation-delay:70ms; }
  .suja-stat:nth-child(3){ animation-delay:140ms; }
  .suja-stat:nth-child(4){ animation-delay:210ms; }
  .suja-stat:nth-child(5){ animation-delay:280ms; }
}

/* Responsive */
@media (max-width:900px){
  .suja-stats-row{ grid-template-columns:repeat(3, 1fr); gap:28px 0; }
  .suja-stat:nth-child(3n+1)::before{ display:none; }
}
@media (max-width:540px){
  .suja-stats-row{ grid-template-columns:repeat(2, 1fr); gap:26px 0; }
  .suja-stat::before{ display:none !important; }
}
.suja-mv-section{
  position:relative;
  padding:clamp(64px,8vw,104px) 24px;
  --suja-mv-accent:#0891B2;
  background:transparent;
  overflow:hidden;
}
.suja-mv-container{ max-width:1100px; margin:0 auto; }

/* Header */
.suja-mv-head{ text-align:center; max-width:720px; margin:0 auto clamp(32px,4vw,50px); }
.suja-mv-eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--suja-mv-accent); margin-bottom:12px;
}
.suja-mv-heading{
  margin:0 0 12px; font-size:clamp(28px,3.2vw,40px); line-height:1.16;
  font-weight:800; letter-spacing:-0.01em; color:#0c1e35;
}
.suja-mv-heading-grad{
  background:linear-gradient(90deg,#0891B2 0%,#FF7033 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.suja-mv-desc{ margin:0; font-size:clamp(15px,1.1vw,17px); line-height:1.7; color:#475569; }

/* Cards grid */
.suja-mv-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2vw,30px);
  align-items:stretch;
}
.suja-mv-card{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(28px,3vw,44px);
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.55);
  background:linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.32) 62%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  box-shadow:
    16px 22px 46px -28px rgba(8,145,178,0.22),
    8px 12px 26px -16px rgba(12,30,53,0.12),
    0 0 0 1px rgba(8,145,178,0.08);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.suja-mv-card::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 70% at 12% 0%, rgba(255,255,255,0.55), transparent 52%);
}
.suja-mv-card > *{ position:relative; z-index:1; }
.suja-mv-card:hover{
  transform:translateY(-4px);
  box-shadow:
    22px 30px 56px -26px rgba(8,145,178,0.30),
    10px 16px 32px -16px rgba(12,30,53,0.16),
    0 0 0 1px rgba(8,145,178,0.12);
}
.suja-mv-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:60px; height:60px; border-radius:16px; margin-bottom:22px;
  color:#fff; font-size:26px;
  background:linear-gradient(150deg, #0aa3c2 0%, #0c5b8c 100%);
  box-shadow:0 12px 26px -12px rgba(8,145,178,0.55);
}
.suja-mv-icon svg{ width:26px; height:26px; fill:currentColor; }
.suja-mv-title{
  margin:0 0 14px; font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(22px,1.8vw,26px); font-weight:800; letter-spacing:-0.01em; color:#0c1e35;
}
.suja-mv-text{ margin:0; font-size:clamp(15px,1.05vw,16.5px); line-height:1.75; color:#475569; }

/* Entrance */
@media (prefers-reduced-motion: no-preference){
  .suja-mv-head{ animation:suja-ecs-fade-up 700ms cubic-bezier(.22,.61,.36,1) both; }
  .suja-mv-card{ animation:suja-ecs-fade-up 700ms cubic-bezier(.22,.61,.36,1) both; }
  .suja-mv-card:nth-child(2){ animation-delay:110ms; }
}

/* Responsive */
@media (max-width:760px){
  .suja-mv-grid{ grid-template-columns:1fr; }
}


/* ============================================================
   EMPOWERING HEALTHCARE PRACTICES — capabilities (v3.8.98)
   Centered header + intro, then a split card: left accordion of
   outcomes, right image synced to the open item. (company-about)
   ============================================================ */
.suja-cap-host{
  background:
    radial-gradient(110% 80% at 90% -10%, rgba(8,145,178,0.07), transparent 60%),
    linear-gradient(180deg, #f7fbfd 0%, #edf4f9 100%) !important;
}
.suja-cap-host > .elementor-container{ max-width:100% !important; }
.suja-cap-section{ position:relative; padding:clamp(64px,8vw,108px) 24px; --suja-cap-accent:#0891B2; background:transparent; }
.suja-cap-container{ max-width:1200px; margin:0 auto; }

/* Header */
.suja-cap-head{ text-align:center; max-width:820px; margin:0 auto clamp(34px,4vw,52px); }
.suja-cap-eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--suja-cap-accent); margin-bottom:12px;
}
.suja-cap-heading{
  margin:0 0 18px; font-size:clamp(28px,3.2vw,42px); line-height:1.16;
  font-weight:800; letter-spacing:-0.01em; color:#0c1e35;
}
.suja-cap-heading-grad{
  background:linear-gradient(90deg,#0891B2 0%,#FF7033 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.suja-cap-intro p{ margin:0 0 12px; font-size:clamp(15px,1.1vw,16.5px); line-height:1.75; color:#475569; }
.suja-cap-intro p:last-child{ margin-bottom:0; }

/* Split card */
.suja-cap-grid{
  display:grid; grid-template-columns:1fr 1.1fr;
  border-radius:24px; overflow:hidden; background:#ffffff;
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:
    16px 22px 46px -28px rgba(8,145,178,0.20),
    8px 12px 26px -16px rgba(12,30,53,0.11),
    0 0 0 1px rgba(8,145,178,0.10);
}

/* Left: accordion */
.suja-cap-accordion{ padding:clamp(18px,2vw,32px) clamp(18px,2vw,36px); display:flex; flex-direction:column; justify-content:center; }
.suja-cap-item{ border-bottom:1px solid #eef2f6; position:relative; }
.suja-cap-item:last-child{ border-bottom:0; }
.suja-cap-item-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:0; cursor:pointer; text-align:left; padding:20px 0 20px 18px; position:relative;
}
.suja-cap-item::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:0; border-radius:3px; background:var(--suja-cap-accent); transition:height .3s ease;
}
.suja-cap-item.is-open::before{ height:calc(100% - 18px); }
.suja-cap-item-title{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(16.5px,1.25vw,19px);
  font-weight:700; line-height:1.3; color:#334155; transition:color .25s ease;
}
.suja-cap-item.is-open .suja-cap-item-title{ color:#0c1e35; }
.suja-cap-chevron{
  flex:0 0 auto; width:11px; height:11px; border-right:2px solid #94a3b8; border-bottom:2px solid #94a3b8;
  transform:rotate(45deg); transition:transform .3s ease, border-color .25s ease; margin-right:2px;
}
.suja-cap-item.is-open .suja-cap-chevron{ transform:rotate(-135deg); border-color:var(--suja-cap-accent); }
.suja-cap-item-body{
  max-height:0; overflow:hidden; opacity:0; padding-left:18px;
  transition:max-height .4s ease, opacity .35s ease, padding-bottom .4s ease;
}
.suja-cap-item.is-open .suja-cap-item-body{ max-height:320px; opacity:1; padding-bottom:22px; }
.suja-cap-item-desc{ margin:0; font-size:14.5px; line-height:1.65; color:#475569; }

/* Right: synced media */
.suja-cap-media{
  position:relative; min-height:100%;
  background:linear-gradient(150deg,#eaf6fa 0%,#d6ecf3 100%);
  padding:clamp(22px,2.6vw,40px); display:flex;
}
.suja-cap-slide{ position:absolute; inset:clamp(22px,2.6vw,40px); opacity:0; visibility:hidden; transition:opacity .4s ease; display:flex; align-items:center; justify-content:center; }
.suja-cap-slide.is-active{ opacity:1; visibility:visible; }
.suja-cap-media-el{
  width:100%; height:100%; max-height:520px; object-fit:cover; display:block; border-radius:18px; background:#fff;
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:16px 20px 42px -28px rgba(8,145,178,0.20), 6px 8px 20px -16px rgba(12,30,53,0.10), 0 0 0 1px rgba(8,145,178,0.12);
}

@media (prefers-reduced-motion: no-preference){
  .suja-cap-head{ animation:suja-ecs-fade-up 700ms cubic-bezier(.22,.61,.36,1) both; }
}

/* Responsive */
@media (max-width:900px){
  .suja-cap-grid{ grid-template-columns:1fr; }
  .suja-cap-media{ min-height:320px; order:-1; }
}
@media (max-width:560px){
  .suja-cap-media{ min-height:240px; }
}


/* ============================================================
   OUR LEADERSHIP — text + interview video (v3.9.0)
   Two columns: left content + CTA, right media (image / video).
   ============================================================ */
.suja-ldr-host{ background:#ffffff !important; }
.suja-ldr-host > .elementor-container{ max-width:100% !important; }
.suja-ldr-section{ position:relative; padding:clamp(64px,8vw,108px) 24px; --suja-ldr-accent:#0891B2; background:transparent; }
.suja-ldr-container{ max-width:1200px; margin:0 auto; }
.suja-ldr-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(32px,4vw,64px); align-items:center; }

/* Left */
.suja-ldr-text{ max-width:560px; }
.suja-ldr-eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--suja-ldr-accent); margin-bottom:14px;
}
.suja-ldr-heading{
  margin:0 0 18px; font-size:clamp(28px,3.2vw,42px); line-height:1.16;
  font-weight:800; letter-spacing:-0.01em; color:#0c1e35;
}
.suja-ldr-heading-grad{
  background:linear-gradient(90deg,#0891B2 0%,#FF7033 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.suja-ldr-desc{ margin:0 0 28px; font-size:clamp(15px,1.1vw,16.5px); line-height:1.78; color:#475569; }
.suja-ldr-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:999px;
  border:1.5px solid var(--suja-ldr-accent); color:var(--suja-ldr-accent); background:transparent;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:14.5px; font-weight:700; text-decoration:none;
  transition:background .25s ease, color .25s ease, gap .25s ease;
}
.suja-ldr-cta:hover{ background:var(--suja-ldr-accent); color:#fff; gap:12px; }
.suja-ldr-cta-arrow{ font-size:16px; line-height:1; }

/* Right media */
.suja-ldr-media{
  position:relative; border-radius:22px; overflow:hidden;
  aspect-ratio:16/10; background:#0a2540;
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:
    16px 22px 46px -28px rgba(8,145,178,0.26),
    8px 12px 26px -16px rgba(12,30,53,0.14),
    0 0 0 1px rgba(8,145,178,0.10);
}
.suja-ldr-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.suja-ldr-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:74px; height:74px; border-radius:999px; border:0; cursor:pointer;
  background:rgba(255,255,255,0.95); display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 34px -10px rgba(8,145,178,0.55); transition:transform .25s ease, background .25s ease;
}
.suja-ldr-play:hover{ transform:translate(-50%,-50%) scale(1.06); background:#ffffff; }
.suja-ldr-play-icon{ width:0; height:0; border-left:20px solid var(--suja-ldr-accent); border-top:13px solid transparent; border-bottom:13px solid transparent; margin-left:5px; }
.suja-ldr-media.is-playing .suja-ldr-play,
.suja-ldr-media.is-playing .suja-ldr-poster{ opacity:0; visibility:hidden; }
.suja-ldr-embed-wrap, .suja-ldr-embed{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.suja-ldr-embed{ object-fit:cover; background:#000; }

/* Pulsing ring on the play button */
.suja-ldr-media.is-video .suja-ldr-play::before{
  content:""; position:absolute; inset:-10px; border-radius:999px; border:2px solid rgba(255,255,255,0.5);
  animation:suja-ldr-pulse 2.4s ease-out infinite;
}
@keyframes suja-ldr-pulse{ 0%{ transform:scale(1); opacity:.6;} 70%{ transform:scale(1.35); opacity:0;} 100%{ opacity:0;} }
@media (prefers-reduced-motion: reduce){ .suja-ldr-media.is-video .suja-ldr-play::before{ animation:none; } }

@media (prefers-reduced-motion: no-preference){
  .suja-ldr-text{ animation:suja-ecs-fade-up 700ms cubic-bezier(.22,.61,.36,1) both; }
  .suja-ldr-media{ animation:suja-ecs-fade-scale 800ms cubic-bezier(.22,.61,.36,1) both; animation-delay:100ms; }
}

/* Responsive */
@media (max-width:900px){
  .suja-ldr-grid{ grid-template-columns:1fr; gap:32px; }
  .suja-ldr-text{ max-width:none; }
}

/* ============================================================
   OUR JOURNEY — Scroll-driven fixed-height timeline (company-about)
   The sticky stage pins to the viewport; milestones animate
   vertically with page scroll (two prominent at a time). Falls back
   to a plain readable list with no JS / reduced motion.
   ============================================================ */
.suja-tl-host{ background:#edf4f9 !important; overflow:visible !important; }
.suja-tl-host > .elementor-container{ max-width:100% !important; }
.suja-tl-section{ position:relative; --suja-tl-accent:#0891B2; background:transparent; overflow:visible; }
.suja-tl-scroll{ position:relative; }
.suja-tl-sticky{ position:relative; background:transparent; }
.suja-tl-container{ width:100%; max-width:1080px; margin:0 auto; padding:clamp(56px,8vh,104px) 24px; box-sizing:border-box; }

/* Header (stays pinned with the stage once active) */
.suja-tl-head{ text-align:center; max-width:680px; margin:0 auto clamp(28px,4vh,52px); }
.suja-tl-eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--suja-tl-accent); margin-bottom:12px;
}
.suja-tl-heading{
  margin:0; font-size:clamp(26px,3vw,40px); line-height:1.16;
  font-weight:800; letter-spacing:-0.01em; color:#0c1e35;
}
.suja-tl-heading-grad{
  background:linear-gradient(90deg,#0891B2 0%,#FF7033 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* Stage + CENTER progress rail */
.suja-tl-stage{ position:relative; --tl-gap:clamp(22px,3vw,48px); }
.suja-tl-rail{
  position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:3px;
  background:rgba(8,145,178,0.16); border-radius:999px; overflow:hidden;
}
.suja-tl-fill{
  position:absolute; left:0; top:0; width:100%; height:100%; transform-origin:top center;
  transform:scaleY(0); background:linear-gradient(180deg,#0891B2 0%,#22d3ee 100%); border-radius:999px;
}

/* Milestone row — alternating left / right of the centre line */
.suja-tl-item{ position:relative; width:50%; box-sizing:border-box; margin-bottom:clamp(22px,3vh,38px); }
.suja-tl-item:last-child{ margin-bottom:0; }
.suja-tl-item.is-left{ margin-left:0;   padding-right:var(--tl-gap); text-align:right; }
.suja-tl-item.is-right{ margin-left:50%; padding-left:var(--tl-gap);  text-align:left;  }

/* Node dot ON the centre line (pulsing) */
.suja-tl-node{
  position:absolute; top:50%; width:16px; height:16px; border-radius:50%;
  background:#fff; border:4px solid var(--suja-tl-accent); z-index:3;
  animation:suja-tl-pulse 2.6s ease-out infinite;
}
.suja-tl-item.is-left  .suja-tl-node{ right:0; left:auto; transform:translate(50%,-50%); }
.suja-tl-item.is-right .suja-tl-node{ left:0;  right:auto; transform:translate(-50%,-50%); }
@keyframes suja-tl-pulse{
  0%   { box-shadow:0 0 0 0 rgba(8,145,178,0.45); }
  70%  { box-shadow:0 0 0 10px rgba(8,145,178,0); }
  100% { box-shadow:0 0 0 0 rgba(8,145,178,0); }
}
.suja-tl-item.is-active .suja-tl-node{
  background:var(--suja-tl-accent); border-color:#fff;
  animation-duration:1.7s; box-shadow:0 0 0 5px rgba(8,145,178,0.18);
}
@media (prefers-reduced-motion: reduce){ .suja-tl-node{ animation:none; } }

/* Glass card (inline-block so item text-align pushes it toward the centre) */
.suja-tl-card{
  display:inline-block; position:relative; text-align:left; width:100%; max-width:440px;
  padding:22px 28px; border-radius:18px; transform-origin:center center;
  background:linear-gradient(135deg, rgba(255,255,255,0.74), rgba(255,255,255,0.5));
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:16px 22px 46px -30px rgba(8,145,178,0.18), 8px 12px 26px -18px rgba(12,30,53,0.10), 0 0 0 1px rgba(8,145,178,0.06);
  transition:box-shadow .3s ease, border-color .3s ease;
}
.suja-tl-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,0.5), rgba(255,255,255,0) 60%);
}
.suja-tl-item.is-active .suja-tl-card{
  border-color:rgba(8,145,178,0.30);
  box-shadow:20px 30px 60px -28px rgba(8,145,178,0.34), 10px 16px 34px -18px rgba(12,30,53,0.14), 0 0 0 1px rgba(8,145,178,0.12);
}
.suja-tl-year{
  display:inline-block; font-size:13px; font-weight:800; letter-spacing:0.06em;
  color:#fff; background:linear-gradient(90deg,#0891B2 0%,#22d3ee 100%);
  padding:4px 12px; border-radius:999px; margin-bottom:12px;
}
.suja-tl-title{ margin:0 0 8px; font-size:clamp(18px,1.6vw,22px); line-height:1.28; font-weight:800; color:#1e293b; }
.suja-tl-desc{ margin:0; font-size:clamp(14px,1.1vw,15.5px); line-height:1.66; color:#475569; }

/* ---- Animated mode (JS adds .is-ready) ---- */
.suja-tl-scroll.is-ready{ height:var(--tl-scroll-h); }
.suja-tl-scroll.is-ready .suja-tl-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; }
.suja-tl-scroll.is-ready .suja-tl-container{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.suja-tl-scroll.is-ready .suja-tl-head{ flex:0 0 auto; position:relative; z-index:5; }
.suja-tl-scroll.is-ready .suja-tl-stage{
  flex:1 1 auto; min-height:300px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
}
.suja-tl-scroll.is-ready .suja-tl-item{
  position:absolute; top:0; margin:0; opacity:0;
  will-change:transform, opacity; backface-visibility:hidden;
}
.suja-tl-scroll.is-ready .suja-tl-item.is-left{  left:0;   right:auto; }
.suja-tl-scroll.is-ready .suja-tl-item.is-right{ left:50%; right:auto; }

/* ---- Responsive: collapse to a single left rail under 760px ---- */
@media (max-width:760px){
  .suja-tl-rail{ left:18px; transform:none; }
  .suja-tl-item,
  .suja-tl-item.is-left,
  .suja-tl-item.is-right{
    width:100%; margin-left:0; text-align:left;
    padding-left:44px; padding-right:0;
  }
  .suja-tl-scroll.is-ready .suja-tl-item.is-left,
  .suja-tl-scroll.is-ready .suja-tl-item.is-right{ left:0; }
  .suja-tl-item.is-left .suja-tl-node,
  .suja-tl-item.is-right .suja-tl-node{ left:18px; right:auto; transform:translate(-50%,-50%); }
  .suja-tl-card{ max-width:none; }
}
@media (max-width:600px){
  .suja-tl-scroll.is-ready .suja-tl-stage{ min-height:340px; }
  .suja-tl-card{ padding:18px 20px; }
}

/* ============================================================
   CLIENTS & PARTNERS — partner logo grid (company-about)
   ============================================================ */
.suja-cp-host{ background:#ffffff !important; }
.suja-cp-host > .elementor-container{ max-width:100% !important; }
.suja-cp-section{ position:relative; padding:clamp(64px,8vw,104px) 24px; --suja-cp-accent:#0891B2; background:transparent; }
.suja-cp-container{ max-width:1120px; margin:0 auto; }

/* Header */
.suja-cp-head{ text-align:center; max-width:760px; margin:0 auto clamp(40px,5vw,60px); }
.suja-cp-eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--suja-cp-accent); margin-bottom:14px;
}
.suja-cp-heading{
  margin:0 0 16px; font-size:clamp(26px,3vw,40px); line-height:1.18;
  font-weight:800; letter-spacing:-0.01em; color:#0c1e35;
}
.suja-cp-heading-grad{
  background:linear-gradient(90deg,#0891B2 0%,#FF7033 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.suja-cp-desc{ margin:0 auto; max-width:680px; font-size:clamp(15px,1.1vw,16.5px); line-height:1.75; color:#475569; }

/* Logo grid */
.suja-cp-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:clamp(14px,1.6vw,22px); align-items:stretch;
}
.suja-cp-tile{
  display:flex; align-items:center; justify-content:center;
  min-height:104px; padding:22px 26px; border-radius:16px;
  background:linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,251,253,0.7));
  border:1px solid rgba(8,145,178,0.10);
  box-shadow:10px 16px 34px -26px rgba(8,145,178,0.18), 0 0 0 1px rgba(12,30,53,0.03);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
a.suja-cp-tile{ text-decoration:none; }
.suja-cp-logo{
  max-width:100%; max-height:52px; width:auto; height:auto; object-fit:contain; display:block;
  transition:filter .3s ease, opacity .3s ease;
}
.suja-cp-grid.is-grayscale .suja-cp-logo{ filter:grayscale(1); opacity:0.72; }
.suja-cp-tile:hover{
  transform:translateY(-4px);
  border-color:rgba(8,145,178,0.28);
  box-shadow:16px 24px 46px -26px rgba(8,145,178,0.30), 0 0 0 1px rgba(8,145,178,0.10);
}
.suja-cp-grid.is-grayscale .suja-cp-tile:hover .suja-cp-logo{ filter:grayscale(0); opacity:1; }

@media (prefers-reduced-motion: no-preference){
  .suja-cp-tile{ animation:suja-ecs-fade-up 600ms cubic-bezier(.22,.61,.36,1) both; }
}

@media (max-width:520px){
  .suja-cp-grid{ grid-template-columns:repeat(2,1fr); }
  .suja-cp-tile{ min-height:88px; padding:16px; }
  .suja-cp-logo{ max-height:42px; }
}

/* ============================================================
   HEADING DESIGN SYSTEM — site-wide standard (Home + all pages)
   ------------------------------------------------------------
   • ONE heading style: a single solid colour #192434
   • No gradient text, no two-tone words
   • Eyebrow / kicker labels are KEPT (their own teal style)
   • Future-proof: any widget whose markup follows the
     suja-*-heading / suja-*-heading-grad / suja-*-highlight
     naming inherits this automatically — so all new pages stay
     consistent with no extra CSS.
   ============================================================ */
:root{ --suja-heading:#192434; }

/* 1) All section headings -> one solid colour */
[class*="suja-"][class*="-heading"]{ color:var(--suja-heading) !important; }

/* 2) Neutralise gradient / teal emphasis spans -> same solid colour,
      so each heading reads as a single uniform style. Beats the
      per-widget Elementor "selectors" CSS (hence !important). */
[class*="suja-"][class*="-heading-grad"],
[class*="suja-"][class*="-highlight"],
.text-gradient{
  background:none !important;
  -webkit-background-clip:border-box !important;
          background-clip:border-box !important;
  -webkit-text-fill-color:var(--suja-heading) !important;
  color:var(--suja-heading) !important;
}

/* ============================================================
   CERTIFICATIONS & COMPLIANCE — two-group trust section (company-about)
   LEFT = certification logo cards · RIGHT = compliance icon badges
   ============================================================ */
.suja-cc-host{ background:#edf4f9 !important; }
.suja-cc-host > .elementor-container{ max-width:100% !important; }
.suja-cc-section{ position:relative; padding:clamp(64px,8vw,108px) 24px; --suja-cc-accent:#0891B2; background:transparent; }
.suja-cc-container{ max-width:1160px; margin:0 auto; }

/* Header */
.suja-cc-head{ text-align:center; max-width:760px; margin:0 auto clamp(40px,5vw,64px); }
.suja-cc-eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--suja-cc-accent); margin-bottom:14px;
}
.suja-cc-heading{ margin:0 0 16px; font-size:clamp(26px,3vw,40px); line-height:1.18; font-weight:800; letter-spacing:-0.01em; color:#192434; }
.suja-cc-desc{ margin:0 auto; max-width:720px; font-size:clamp(15px,1.1vw,16.5px); line-height:1.75; color:#475569; }

/* Two columns + centre divider */
.suja-cc-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px);
  align-items:start; position:relative;
}
.suja-cc-cols::before{
  content:""; position:absolute; top:6px; bottom:6px; left:50%; width:1px; transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(8,145,178,0) 0%, rgba(8,145,178,0.22) 18%, rgba(8,145,178,0.22) 82%, rgba(8,145,178,0) 100%);
}

/* Column heads */
.suja-cc-col-head{ display:flex; align-items:center; gap:12px; margin-bottom:clamp(20px,2.4vw,30px); }
.suja-cc-col-mark{
  flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(135deg,#0891B2 0%,#22d3ee 100%);
  box-shadow:0 8px 18px -10px rgba(8,145,178,0.6);
}
.suja-cc-col--comp .suja-cc-col-mark{ background:linear-gradient(135deg,#192434 0%,#33506b 100%); box-shadow:0 8px 18px -10px rgba(25,36,52,0.5); }
.suja-cc-col-mark svg{ width:20px; height:20px; }
.suja-cc-col-heading{ margin:0; font-size:clamp(19px,1.7vw,23px); font-weight:800; letter-spacing:-0.01em; color:#192434; }

/* LEFT — certification logo cards */
.suja-cc-cert-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.5vw,18px); }
.suja-cc-cert{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  min-height:188px; justify-content:flex-start;
  padding:24px 20px 20px; border-radius:16px; background:#ffffff;
  border:1px solid rgba(8,145,178,0.12);
  box-shadow:10px 16px 34px -28px rgba(8,145,178,0.18), 0 0 0 1px rgba(12,30,53,0.02);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.suja-cc-cert:hover, .suja-cc-cert:focus-visible{
  transform:translateY(-4px); outline:none;
  border-color:rgba(8,145,178,0.32);
  box-shadow:16px 26px 50px -26px rgba(8,145,178,0.30), 0 0 0 1px rgba(8,145,178,0.10);
}
/* Identical logo container for EVERY card (certs + compliance) so all
   logos — wide, square, tall — occupy the same fixed box and read evenly. */
.suja-cc-cert-logo{ width:100%; height:78px; display:grid; place-items:center; }
.suja-cc-cert-logo img{ max-width:100%; max-height:78px; width:auto; height:auto; object-fit:contain; }
.suja-cc-cert-title{ font-size:14.5px; font-weight:800; color:#192434; line-height:1.25; }
.suja-cc-cert-sub{ font-size:12.5px; color:#64748b; line-height:1.4; }

/* RIGHT — compliance icon badges (distinct: horizontal, icon-led, with copy) */
.suja-cc-comp-list{ display:flex; flex-direction:column; gap:clamp(12px,1.3vw,15px); }
.suja-cc-comp{
  display:flex; align-items:flex-start; gap:16px;
  padding:18px 20px; border-radius:14px;
  background:linear-gradient(135deg, rgba(255,255,255,0.92), rgba(248,251,253,0.7));
  border:1px solid rgba(25,36,52,0.10);
  box-shadow:8px 14px 30px -26px rgba(25,36,52,0.20);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.suja-cc-comp:hover{
  transform:translateX(4px);
  border-color:rgba(8,145,178,0.30);
  box-shadow:14px 20px 40px -24px rgba(8,145,178,0.28), 0 0 0 1px rgba(8,145,178,0.08);
}
.suja-cc-comp-icon{
  flex:0 0 auto; width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  color:var(--suja-cc-accent); background:rgba(8,145,178,0.10);
  border:1px solid rgba(8,145,178,0.18); transition:background .3s ease, color .3s ease;
}
.suja-cc-comp:hover .suja-cc-comp-icon{ background:var(--suja-cc-accent); color:#fff; border-color:var(--suja-cc-accent); }
.suja-cc-comp-icon svg{ width:22px; height:22px; }
.suja-cc-comp-body{ display:flex; flex-direction:column; gap:3px; }
.suja-cc-comp-name{ font-size:15.5px; font-weight:800; color:#192434; letter-spacing:-0.01em; }
.suja-cc-comp-desc{ font-size:13.5px; line-height:1.55; color:#475569; }

@media (prefers-reduced-motion: no-preference){
  .suja-cc-cert, .suja-cc-comp{ animation:suja-ecs-fade-up 600ms cubic-bezier(.22,.61,.36,1) both; }
}

/* ABDM Integration feature block */
.suja-cc-abdm{ margin-top:clamp(40px,5vw,68px); display:grid; grid-template-columns:2.15fr 0.7fr; gap:clamp(28px,4vw,56px); align-items:center;
  padding:clamp(28px,3.5vw,48px); border-radius:24px;
  background:linear-gradient(135deg, rgba(8,145,178,0.06), rgba(34,211,238,0.04)); border:1px solid rgba(8,145,178,0.16); }
.suja-cc-abdm-heading{ margin:0 0 16px; font-family:var(--font-heading,'Plus Jakarta Sans',sans-serif); font-size:clamp(20px,2.1vw,28px); line-height:1.2; font-weight:800; letter-spacing:-0.015em; color:#192434; }
.suja-cc-abdm-body p{ margin:0 0 14px; font-size:clamp(14.5px,1.05vw,16px); line-height:1.75; color:#475569; }
.suja-cc-abdm-body p:last-child{ margin-bottom:0; }
.suja-cc-abdm-media{ display:flex; justify-content:center; }
/* Transparent PNG badge — no white box; a drop-shadow follows the logo's alpha
   so it floats cleanly on the tinted card. */
.suja-cc-abdm-media img{ width:100%; max-width:360px; height:auto; background:transparent; filter:drop-shadow(0 20px 34px rgba(8,145,178,0.22)); }

/* Responsive — stack the two groups */
@media (max-width:880px){
  .suja-cc-cols{ grid-template-columns:1fr; gap:44px; }
  .suja-cc-cols::before{ display:none; }
  .suja-cc-col--comp{ padding-top:8px; border-top:1px solid rgba(8,145,178,0.14); }
  .suja-cc-abdm{ grid-template-columns:1fr; }
  .suja-cc-abdm-media{ order:-1; }
}
@media (max-width:420px){
  .suja-cc-cert-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   LEADERSHIP — listing grid (.suja-leadg-*) + single profile (.suja-leadp-*)
   SUJA design system: #192434 headings, teal accents, uniform portraits.
   ============================================================ */

/* Scroll-reveal helper (used by both) */
.suja-leadg .reveal, .suja-leadp .reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.suja-leadg .reveal.is-in, .suja-leadp .reveal.is-in{ opacity:1; transform:none; }
.suja-leadg-card.reveal{ transition-delay:calc(var(--d,0) * 55ms); }
@media (prefers-reduced-motion: reduce){
  .suja-leadg .reveal, .suja-leadp .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- LISTING GRID ---------- */
.suja-leadg-host{ background:#edf4f9 !important; }
.suja-leadg-host > .elementor-container{ max-width:100% !important; }
.suja-leadg-section{ position:relative; padding:clamp(64px,8vw,116px) 24px; --suja-leadg-accent:#0891B2; }
.suja-leadg-container{ max-width:1200px; margin:0 auto; }
.suja-leadg-head{ text-align:center; max-width:760px; margin:0 auto clamp(44px,5vw,68px); }
.suja-leadg-eyebrow{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--suja-leadg-accent); margin-bottom:14px; }
.suja-leadg-heading{ margin:0 0 16px; font-size:clamp(28px,3.2vw,42px); line-height:1.16; font-weight:800; letter-spacing:-0.01em; color:#192434; }
.suja-leadg-intro{ margin:0 auto; max-width:680px; font-size:clamp(15px,1.1vw,16.5px); line-height:1.75; color:#475569; }

.suja-leadg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:clamp(18px,2vw,28px); }
.suja-leadg-card{
  display:flex; flex-direction:column; text-decoration:none; overflow:hidden;
  background:#ffffff; border:1px solid rgba(8,145,178,0.12); border-radius:18px;
  box-shadow:12px 18px 40px -30px rgba(8,145,178,0.20), 0 0 0 1px rgba(12,30,53,0.02);
  transition:transform .32s cubic-bezier(.22,.61,.36,1), box-shadow .32s ease, border-color .32s ease;
}
.suja-leadg-card:hover{
  transform:translateY(-6px);
  border-color:rgba(8,145,178,0.34);
  box-shadow:22px 34px 60px -28px rgba(8,145,178,0.34), 0 0 0 1px rgba(8,145,178,0.12);
}
.suja-leadg-photo{
  position:relative; display:block; width:100%; aspect-ratio:1/1; overflow:hidden;
  background:linear-gradient(135deg,#e6f3f8,#dceaf2); display:grid; place-items:center;
}
.suja-leadg-photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.suja-leadg-card:hover .suja-leadg-photo img{ transform:scale(1.04); }
.suja-leadg-initials{ font-size:44px; font-weight:800; color:#0891B2; opacity:0.5; }
.suja-leadg-body{ display:flex; flex-direction:column; gap:6px; padding:20px 22px 22px; flex:1 1 auto; }
.suja-leadg-name{ font-size:18px; font-weight:800; color:#192434; line-height:1.25; }
.suja-leadg-role{ font-size:13px; font-weight:700; color:var(--suja-leadg-accent); line-height:1.35; }
.suja-leadg-snippet{ margin-top:4px; font-size:13.5px; line-height:1.6; color:#64748b;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.suja-leadg-cta{ margin-top:auto; padding-top:14px; font-size:13.5px; font-weight:700; color:var(--suja-leadg-accent); display:inline-flex; align-items:center; gap:7px; }
.suja-leadg-cta span{ transition:transform .25s ease; }
.suja-leadg-card:hover .suja-leadg-cta span{ transform:translateX(4px); }
@media (max-width:520px){ .suja-leadg-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } .suja-leadg-body{ padding:14px 14px 16px; } .suja-leadg-name{ font-size:15.5px; } }

/* ---------- SINGLE PROFILE ---------- */
.suja-leadp{ --suja-leadp-accent:#0891B2; background:#ffffff; }
.suja-leadp-wrap{ width:100%; max-width:1120px; margin:0 auto; padding:0 24px; box-sizing:border-box; }

/* Hero */
.suja-leadp-hero-host{ background:#edf4f9; padding:clamp(28px,4vw,40px) 0 clamp(56px,7vw,88px); }
.suja-leadp-back{ display:inline-flex; align-items:center; gap:8px; margin:clamp(16px,3vw,28px) 0 clamp(24px,3vw,38px); font-size:14px; font-weight:700; color:#475569; text-decoration:none; transition:color .25s ease, gap .25s ease; }
.suja-leadp-back:hover{ color:var(--suja-leadp-accent); gap:12px; }
.suja-leadp-hero{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:clamp(32px,4.5vw,68px); align-items:center; }
.suja-leadp-photo{
  position:relative; aspect-ratio:1/1; border-radius:24px; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(135deg,#e6f3f8,#dceaf2);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:24px 34px 66px -34px rgba(8,145,178,0.36), 8px 14px 30px -18px rgba(12,30,53,0.14), 0 0 0 1px rgba(8,145,178,0.08);
}
.suja-leadp-photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.suja-leadp-initials{ font-size:84px; font-weight:800; color:#0891B2; opacity:0.5; }
.suja-leadp-hero-text{ min-width:0; }
.suja-leadp-eyebrow{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--suja-leadp-accent); margin-bottom:14px; }
.suja-leadp-name{ margin:0 0 10px; font-size:clamp(30px,4vw,52px); line-height:1.08; font-weight:800; letter-spacing:-0.02em; color:#192434; }
.suja-leadp-role{ margin:0 0 22px; font-size:clamp(15px,1.5vw,18px); font-weight:700; color:var(--suja-leadp-accent); }
.suja-leadp-intro{ margin:0 0 28px; font-size:clamp(16px,1.2vw,18px); line-height:1.7; color:#334155; max-width:600px; }
.suja-leadp-actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* Buttons (shared) */
.suja-leadp-btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 24px; border-radius:999px; font-family:'Plus Jakarta Sans',sans-serif; font-size:14.5px; font-weight:700; text-decoration:none; transition:all .25s ease; }
.suja-leadp-btn--primary{ background:var(--suja-leadp-accent); color:#fff; border:1.5px solid var(--suja-leadp-accent); }
.suja-leadp-btn--primary:hover{ background:#0a7a96; border-color:#0a7a96; transform:translateY(-2px); box-shadow:0 12px 24px -12px rgba(8,145,178,0.6); }
.suja-leadp-btn--ghost{ background:transparent; color:var(--suja-leadp-accent); border:1.5px solid rgba(8,145,178,0.4); }
.suja-leadp-btn--ghost:hover{ background:var(--suja-leadp-accent); color:#fff; border-color:var(--suja-leadp-accent); transform:translateY(-2px); }
.suja-leadp-btn--text{ padding:12px 8px; color:#192434; }
.suja-leadp-btn--text:hover{ color:var(--suja-leadp-accent); gap:12px; }
.suja-leadp-btn-ico{ display:inline-flex; align-items:center; }
.suja-leadp-btn-ico svg{ width:18px; height:18px; display:block; }

/* Biography */
.suja-leadp-bio-host{ background:#ffffff; padding:clamp(56px,7vw,96px) 0; }
/* When the CTA (same white bg) directly follows the bio — i.e. there's no
   quote band between them — drop the bio's bottom padding so the gap comes
   solely from the CTA's top padding (avoids a double-padded void). When the
   quote band follows instead, the bio keeps its bottom padding for a clean
   white gap before the coloured band. */
.suja-leadp-bio-host:has(+ .suja-leadp-cta-host){ padding-bottom:0; }
.suja-leadp-bio-wrap{ max-width:820px; }
.suja-leadp-sec-head{ margin-bottom:clamp(22px,3vw,32px); }
.suja-leadp-sec-eyebrow{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--suja-leadp-accent); margin-bottom:10px; }
.suja-leadp-h2{ margin:0; font-size:clamp(24px,2.6vw,34px); line-height:1.2; font-weight:800; letter-spacing:-0.01em; color:#192434; }
.suja-leadp-bio p{ margin:0 0 20px; font-size:clamp(15.5px,1.15vw,17px); line-height:1.85; color:#475569; }
.suja-leadp-bio p:last-child{ margin-bottom:0; }

/* Philosophy quote */
.suja-leadp-quote-host{ background:#edf4f9; padding:clamp(56px,7vw,96px) 0; }
.suja-leadp-quote{ position:relative; max-width:900px; margin:0 auto; text-align:center; padding:0 clamp(8px,3vw,40px); }
.suja-leadp-quote-mark{ display:block; font-family:Georgia,'Times New Roman',serif; font-size:clamp(64px,9vw,120px); line-height:0.7; color:rgba(8,145,178,0.28); margin-bottom:8px; }
.suja-leadp-quote blockquote{ margin:0 0 22px; font-size:clamp(20px,2.4vw,30px); line-height:1.4; font-weight:700; letter-spacing:-0.01em; color:#192434; }
.suja-leadp-quote figcaption{ font-size:14px; font-weight:700; color:#64748b; }

/* CTA */
.suja-leadp-cta-host{ background:#ffffff; padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,110px); }
.suja-leadp-cta{
  position:relative; overflow:hidden; text-align:center; border-radius:26px;
  padding:clamp(40px,5vw,68px) clamp(24px,4vw,56px);
  background:linear-gradient(135deg, rgba(8,145,178,0.10), rgba(34,211,238,0.06));
  border:1px solid rgba(8,145,178,0.18);
}
.suja-leadp-cta-title{ margin:0 0 14px; font-size:clamp(22px,2.6vw,34px); line-height:1.2; font-weight:800; letter-spacing:-0.01em; color:#192434; max-width:680px; margin-inline:auto; }
.suja-leadp-cta-sub{ margin:0 auto 28px; max-width:560px; font-size:clamp(15px,1.1vw,16.5px); line-height:1.7; color:#475569; }
.suja-leadp-cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; }

/* Responsive */
@media (max-width:860px){
  .suja-leadp-hero{ grid-template-columns:1fr; gap:28px; }
  .suja-leadp-photo{ max-width:340px; margin:0 auto; }
  .suja-leadp-hero-text{ text-align:center; }
  .suja-leadp-intro{ margin-inline:auto; }
  .suja-leadp-actions{ justify-content:center; }
}

/* ============================================================
   RESOURCE CENTER HUB (.suja-res-*) — SUJA design system
   Hero featured card · category cards · latest-posts grid · CTA
   ============================================================ */
.suja-res-host{ background:#ffffff !important; }
.suja-res-host > .elementor-container{ max-width:100% !important; }
.suja-res{ --suja-res-accent:#0891B2; }
.suja-res-wrap{ width:100%; max-width:1200px; margin:0 auto; padding:0 24px; box-sizing:border-box; }

.suja-res .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.suja-res .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .suja-res .reveal{ opacity:1; transform:none; transition:none; } }

/* Section heads */
.suja-res-h2{ margin:0; font-size:clamp(24px,2.8vw,36px); line-height:1.18; font-weight:800; letter-spacing:-0.01em; color:#192434; }
.suja-res-sec-head{ margin-bottom:clamp(28px,3.4vw,44px); }
.suja-res-sec-sub{ margin:10px 0 0; font-size:clamp(15px,1.1vw,16.5px); line-height:1.7; color:#475569; }
.suja-res-sec-head--row{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.suja-res-viewall, .suja-res-readlink, .suja-res-cat-link{ font-weight:700; color:var(--suja-res-accent); text-decoration:none; display:inline-flex; align-items:center; gap:7px; font-size:14px; }
.suja-res-viewall span, .suja-res-readlink span, .suja-res-cat-link span{ transition:transform .25s ease; }

/* HERO */
.suja-res-hero-host{ background:#edf4f9; padding:clamp(56px,7vw,96px) 0 clamp(48px,6vw,80px); }
.suja-res-head{ text-align:center; max-width:760px; margin:0 auto clamp(36px,4.5vw,56px); }
.suja-res-eyebrow{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--suja-res-accent); margin-bottom:14px; }
.suja-res-heading{ margin:0 0 16px; font-size:clamp(30px,4vw,52px); line-height:1.1; font-weight:800; letter-spacing:-0.02em; color:#192434; }
.suja-res-intro{ margin:0 auto; max-width:680px; font-size:clamp(15px,1.15vw,17px); line-height:1.75; color:#475569; }

.suja-res-featured{
  display:grid; grid-template-columns:1.05fr 1fr; gap:0; text-decoration:none; overflow:hidden;
  background:#fff; border:1px solid rgba(8,145,178,0.12); border-radius:22px;
  box-shadow:20px 30px 60px -36px rgba(8,145,178,0.30), 0 0 0 1px rgba(12,30,53,0.02);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.suja-res-featured:hover{ transform:translateY(-4px); border-color:rgba(8,145,178,0.3); box-shadow:26px 40px 70px -34px rgba(8,145,178,0.4); }
.suja-res-featured-media{ position:relative; min-height:300px; overflow:hidden; background:linear-gradient(135deg,#e6f3f8,#dceaf2); }
.suja-res-featured-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.suja-res-featured:hover .suja-res-featured-media img{ transform:scale(1.04); }
.suja-res-tag{ position:absolute; top:16px; left:16px; z-index:2; font-size:11.5px; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; color:#fff; background:var(--suja-res-accent); padding:6px 12px; border-radius:999px; }
.suja-res-featured-body{ display:flex; flex-direction:column; justify-content:center; gap:12px; padding:clamp(28px,3.4vw,48px); }
.suja-res-meta{ font-size:13px; font-weight:600; color:#64748b; }
.suja-res-featured-title{ font-size:clamp(20px,2vw,28px); line-height:1.25; font-weight:800; color:#192434; letter-spacing:-0.01em; }
.suja-res-featured-exc{ font-size:15px; line-height:1.7; color:#475569; }
.suja-res-readlink{ margin-top:6px; }
.suja-res-featured:hover .suja-res-readlink span{ transform:translateX(4px); }

/* CATEGORY CARDS */
.suja-res-cats-host{ background:#ffffff; padding:clamp(56px,7vw,96px) 0; }
.suja-res-cats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:clamp(16px,1.8vw,24px); }
.suja-res-cat{
  display:flex; flex-direction:column; gap:12px; text-decoration:none; padding:28px 28px 24px; border-radius:18px;
  background:#fff; border:1px solid rgba(8,145,178,0.12);
  box-shadow:12px 18px 38px -30px rgba(8,145,178,0.2), 0 0 0 1px rgba(12,30,53,0.02);
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.suja-res-cat:hover{ transform:translateY(-5px); border-color:rgba(8,145,178,0.32); box-shadow:20px 30px 54px -28px rgba(8,145,178,0.32); }
.suja-res-cat-ico{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#0891B2 0%,#22d3ee 100%); box-shadow:0 10px 20px -10px rgba(8,145,178,0.6); }
.suja-res-cat-ico svg{ width:24px; height:24px; }
.suja-res-cat-title{ font-size:19px; font-weight:800; color:#192434; letter-spacing:-0.01em; }
.suja-res-cat-desc{ font-size:14px; line-height:1.6; color:#64748b; flex:1 1 auto; }
.suja-res-cat-link{ margin-top:4px; }
.suja-res-cat:hover .suja-res-cat-link span{ transform:translateX(4px); }

/* LATEST POSTS GRID */
.suja-res-latest-host{ background:#edf4f9; padding:clamp(56px,7vw,96px) 0; }
.suja-res-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:clamp(18px,2vw,28px); }
.suja-res-card{
  display:flex; flex-direction:column; text-decoration:none; overflow:hidden; background:#fff;
  border:1px solid rgba(8,145,178,0.1); border-radius:18px;
  box-shadow:12px 18px 40px -30px rgba(8,145,178,0.2), 0 0 0 1px rgba(12,30,53,0.02);
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.suja-res-card:hover{ transform:translateY(-6px); border-color:rgba(8,145,178,0.3); box-shadow:22px 34px 58px -28px rgba(8,145,178,0.32); }
.suja-res-card-media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(135deg,#e6f3f8,#dceaf2); }
.suja-res-card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.suja-res-card:hover .suja-res-card-media img{ transform:scale(1.05); }
.suja-res-card-body{ display:flex; flex-direction:column; gap:8px; padding:20px 22px 24px; flex:1 1 auto; }
.suja-res-card-title{ font-size:17px; line-height:1.32; font-weight:800; color:#192434; letter-spacing:-0.01em;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.suja-res-card-exc{ font-size:13.5px; line-height:1.6; color:#64748b;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* CTA */
.suja-res-cta-host{ background:#ffffff; padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,108px); }
.suja-res-cta{
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  padding:clamp(32px,4vw,52px) clamp(28px,4vw,56px); border-radius:24px;
  background:linear-gradient(135deg, rgba(8,145,178,0.10), rgba(34,211,238,0.06));
  border:1px solid rgba(8,145,178,0.18);
}
.suja-res-cta-title{ margin:0 0 8px; font-size:clamp(22px,2.4vw,30px); line-height:1.2; font-weight:800; letter-spacing:-0.01em; color:#192434; }
.suja-res-cta-sub{ margin:0; font-size:15px; line-height:1.65; color:#475569; max-width:560px; }
.suja-res-cta-btn{ flex:0 0 auto; display:inline-flex; align-items:center; padding:14px 30px; border-radius:999px; background:#FF7033; color:#fff; font-weight:700; font-size:15px; text-decoration:none; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; }
.suja-res-cta-btn:hover{ background:#f15f1c; transform:translateY(-2px); box-shadow:0 14px 26px -12px rgba(255,112,51,0.6); }

/* Responsive */
@media (max-width:820px){
  .suja-res-featured{ grid-template-columns:1fr; }
  .suja-res-featured-media{ min-height:220px; aspect-ratio:16/9; }
}
@media (max-width:520px){
  .suja-res-cats{ grid-template-columns:1fr; }
  .suja-res-cta{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   RESOURCE GRID — filterable archive (.suja-rg-*)
   ============================================================ */
.suja-rg-host{ background:#ffffff !important; }
.suja-rg-host > .elementor-container{ max-width:100% !important; }
.suja-rg-section{ position:relative; padding:clamp(56px,7vw,56px) 24px; --suja-rg-accent:#0891B2; }
.suja-rg-wrap{ max-width:1200px; margin:0 auto; }
.suja-rg-head{ text-align:center; max-width:720px; margin:0 auto clamp(32px,4vw,48px); }
.suja-rg-head--left{ text-align:left; max-width:820px; margin-left:0; margin-right:0; }
.suja-rg-eyebrow{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--suja-rg-accent); margin-bottom:12px; }
.suja-rg-heading{ margin:0 0 14px; font-size:clamp(30px,4vw,52px); line-height:1.08; font-weight:800; letter-spacing:-0.02em; color:#192434; }
.suja-rg-head--left .suja-rg-intro{ margin-left:0; }
.suja-rg-intro{ margin:0 auto; max-width:640px; font-size:clamp(15px,1.1vw,16.5px); line-height:1.7; color:#475569; }

/* FEATURED resource (large horizontal card, reference-style) */
.suja-rg-featwrap{ margin-bottom:clamp(28px,3.4vw,44px); }
.suja-rg-feat.is-hidden{ display:none !important; }
.suja-rg-feat{ display:grid; grid-template-columns:1.05fr 1fr; gap:32px; text-decoration:none; overflow:hidden; align-items:stretch;
  padding:32px; background:#f7f9fb; border:1px solid rgba(8,145,178,0.12); border-radius:22px;
  box-shadow:20px 30px 60px -36px rgba(8,145,178,0.28), 0 0 0 1px rgba(12,30,53,0.02);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease; }
.suja-rg-feat:hover{ transform:translateY(-4px); border-color:rgba(8,145,178,0.3); box-shadow:26px 40px 70px -34px rgba(8,145,178,0.4); }
.suja-rg-feat > .suja-rg-media{ aspect-ratio:auto; min-height:320px; border-radius:16px; overflow:hidden; }
.suja-rg-feat-body{ display:flex; flex-direction:column; justify-content:center; gap:14px; align-items:flex-start; padding:0; }
.suja-rg-feat-tag{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.02em; color:var(--suja-rg-accent); background:rgba(8,145,178,0.1); padding:6px 13px; border-radius:999px; }
.suja-rg-feat-title{ font-size:clamp(22px,2.2vw,32px); line-height:1.2; font-weight:800; color:#192434; letter-spacing:-0.015em; }
.suja-rg-feat-exc{ font-size:15.5px; line-height:1.7; color:#475569; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.suja-rg-feat-meta{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:2px; }
.suja-rg-feat-mi{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:#64748b; }
.suja-rg-feat-mi svg{ width:16px; height:16px; color:#94a3b8; flex:0 0 auto; }
.suja-rg-feat .suja-rg-cta-link{ margin-top:6px; }

/* Category tabs — standalone, reference-style underlined text tabs */
.suja-rg-tabs{ display:flex; gap:clamp(18px,2.4vw,34px); flex-wrap:wrap; border-bottom:1px solid rgba(8,145,178,0.16); margin-bottom:clamp(28px,3.4vw,44px); }
.suja-rg-tab{ position:relative; display:inline-block; padding:0 0 16px; border:none; background:none; color:#64748b; font-size:15.5px; font-weight:700; letter-spacing:-0.01em; cursor:pointer; border-radius:0; text-decoration:none; transition:color .2s ease; }
.suja-rg-tab:hover{ color:#192434; }
.suja-rg-tab.is-active{ color:#192434; }
.suja-rg-tab.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--suja-rg-accent); border-radius:3px 3px 0 0; }

/* Search + filters row (below the featured) */
.suja-rg-filters{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:clamp(22px,2.8vw,34px); }
.suja-rg-search{ position:relative; flex:1 1 280px; max-width:420px; }
.suja-rg-search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#94a3b8; }
.suja-rg-search-input{ width:100%; box-sizing:border-box; padding:12px 16px 12px 42px; border-radius:999px; border:1px solid rgba(8,145,178,0.2); background:#f8fbfd; font-size:14.5px; color:#192434; outline:none; transition:border-color .25s ease, box-shadow .25s ease; }
.suja-rg-search-input:focus{ border-color:var(--suja-rg-accent); box-shadow:0 0 0 3px rgba(8,145,178,0.12); }
.suja-rg-selects{ display:flex; gap:10px; flex-wrap:wrap; }
.suja-rg-filter{ appearance:none; padding:10px 38px 10px 16px; border-radius:999px; border:1px solid rgba(8,145,178,0.2); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; font-size:13.5px; font-weight:600; color:#334155; cursor:pointer; }

/* Category rows (grouped view) */
.suja-rg-groups{ display:flex; flex-direction:column; gap:clamp(44px,5.5vw,72px); }
.suja-rg-group{ scroll-margin-top:100px; }
.suja-rg-group-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:clamp(18px,2vw,26px); }
.suja-rg-group-label{ margin:0; font-size:13px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:#192434; }
.suja-rg-viewall{ flex:0 0 auto; font-weight:700; color:var(--suja-rg-accent); text-decoration:none; display:inline-flex; align-items:center; min-height:24px; gap:7px; font-size:14px; }
.suja-rg-viewall span{ transition:transform .25s ease; }
.suja-rg-viewall:hover span{ transform:translateX(4px); }
.suja-rg-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
@media (max-width:900px){ .suja-rg-grid3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .suja-rg-grid3{ grid-template-columns:1fr; } }
.suja-rg-flat[hidden]{ display:none; }
.suja-rg-flat{ display:block; }

/* Grid + cards (consistent heights) */
.suja-rg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:clamp(18px,2vw,26px); }
.suja-rg-card{ display:flex; flex-direction:column; text-decoration:none; overflow:hidden; background:#fff;
  border:1px solid rgba(8,145,178,0.1); border-radius:18px;
  box-shadow:12px 18px 40px -30px rgba(8,145,178,0.2), 0 0 0 1px rgba(12,30,53,0.02);
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease; }
.suja-rg-card.is-more{ display:none; }
.suja-rg-card:hover{ transform:translateY(-6px); border-color:rgba(8,145,178,0.3); box-shadow:22px 34px 58px -28px rgba(8,145,178,0.32); }
.suja-rg-media{ position:relative; max-width:100%; aspect-ratio:16/9; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(135deg,#0e7490,#22d3ee); }
.suja-rg-media img{ position:absolute; inset:0; width:100% !important; height:100% !important; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.suja-rg-card:hover .suja-rg-media img{ transform:scale(1.05); }
.suja-rg-media-ico{ color:rgba(255,255,255,0.92); }
.suja-rg-media-ico svg{ width:58px; height:58px; }
.suja-rg-media--case-study{ background:linear-gradient(135deg,#0c4a6e,#0891B2); }
.suja-rg-media--webinar{ background:linear-gradient(135deg,#5b21b6,#0891B2); }
.suja-rg-media--e-book{ background:linear-gradient(135deg,#0e7490,#14b8a6); }
.suja-rg-media--whitepaper{ background:linear-gradient(135deg,#1e293b,#334155); }
.suja-rg-media--guide{ background:linear-gradient(135deg,#0891B2,#0ea5e9); }
.suja-rg-badge{ position:absolute; top:14px; left:14px; z-index:2; font-size:11px; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; color:#192434; background:rgba(255,255,255,0.94); padding:5px 11px; border-radius:999px; }
.suja-rg-body{ display:flex; flex-direction:column; gap:8px; padding:20px 22px 22px; flex:1 1 auto; }
.suja-rg-meta{ font-size:12.5px; font-weight:600; color:#64748b; }
.suja-rg-title{ font-size:17px; line-height:1.32; font-weight:800; color:#192434; letter-spacing:-0.01em;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.suja-rg-exc{ font-size:13.5px; line-height:1.6; color:#64748b; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.suja-rg-cta-link{ margin-top:auto; padding-top:12px; font-size:13.5px; font-weight:700; color:var(--suja-rg-accent); display:inline-flex; align-items:center; gap:7px; }
.suja-rg-cta-link span{ transition:transform .25s ease; }
.suja-rg-card:hover .suja-rg-cta-link span, .suja-rg-feat:hover .suja-rg-cta-link span{ transform:translateX(4px); }
.suja-rg-empty{ text-align:center; color:#64748b; padding:40px 0; font-size:15px; }
.suja-rg-more-wrap{ text-align:center; margin-top:clamp(28px,3.4vw,44px); }
.suja-rg-more{ padding:13px 32px; border-radius:999px; border:1.5px solid var(--suja-rg-accent); background:transparent; color:var(--suja-rg-accent); font-weight:700; font-size:14.5px; cursor:pointer; transition:all .25s ease; }
.suja-rg-more:hover{ background:var(--suja-rg-accent); color:#fff; transform:translateY(-2px); }

/* CTA strip */
.suja-rg-cta{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  margin-top:clamp(48px,6vw,80px); padding:clamp(32px,4vw,52px) clamp(28px,4vw,56px); border-radius:24px;
  background:linear-gradient(135deg, rgba(8,145,178,0.10), rgba(34,211,238,0.06)); border:1px solid rgba(8,145,178,0.18); }
.suja-rg-cta-title{ margin:0 0 8px; font-size:clamp(22px,2.4vw,30px); line-height:1.2; font-weight:800; letter-spacing:-0.01em; color:#192434; }
.suja-rg-cta-sub{ margin:0; font-size:15px; line-height:1.65; color:#475569; max-width:560px; }
.suja-rg-cta-btn{ flex:0 0 auto; display:inline-flex; align-items:center; padding:14px 30px; border-radius:999px; background:#FF7033; color:#fff; font-weight:700; font-size:15px; text-decoration:none; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; }
.suja-rg-cta-btn:hover{ background:#f15f1c; transform:translateY(-2px); box-shadow:0 14px 26px -12px rgba(255,112,51,0.6); }

@media (max-width:1024px){ .suja-rg-feat{ padding:24px; gap:24px; } }
/* width:100% is required: with aspect-ratio:16/9 + min-height:200px the
   box derives its width from the height (200 * 16/9 = 355px) and blows
   past the single-column grid track, clipping the image. Pinning the
   width to the track makes the height follow the ratio instead. */
@media (max-width:760px){ .suja-rg-feat{ grid-template-columns:1fr; padding:20px; gap:20px; } .suja-rg-feat > .suja-rg-media{ min-height:200px; aspect-ratio:16/9; border-radius:14px; width:100%; max-width:100%; } }
@media (max-width:480px){ .suja-rg-feat{ padding:16px; gap:16px; } }
@media (max-width:520px){ .suja-rg-grid{ grid-template-columns:1fr; } .suja-rg-bar{ flex-direction:column; align-items:stretch; } .suja-rg-search{ flex-basis:auto; } .suja-rg-cta{ flex-direction:column; align-items:flex-start; } }

/* ============================================================
   PER-CATEGORY ARCHIVE LAYOUTS (.suja-rg-card--<type>)
   Each resource category gets its own distinct listing layout,
   sharing the SUJA design tokens (accent, radius, shadow, type).
   ============================================================ */
.suja-rg-listing{ margin-top:clamp(6px,1vw,12px); }
.suja-rg-sec-label{ margin:0 0 clamp(18px,2vw,26px); font-size:13px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:#192434; }

/* shared kickers + buttons across download/research/webinar cards */
.suja-rg-kicker{ font-size:12px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--suja-rg-accent); }
.suja-rg-btn{ margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:999px; font-size:13.5px; font-weight:700; background:var(--suja-rg-accent); color:#fff; transition:transform .25s ease, box-shadow .25s ease, filter .25s ease; }
.suja-rg-btn svg{ width:17px; height:17px; }
.suja-rg-card:hover .suja-rg-btn{ transform:translateY(-1px); box-shadow:0 12px 22px -12px rgba(8,145,178,0.6); }
.suja-rg-btn--outline{ background:transparent; border:1.5px solid var(--suja-rg-accent); color:var(--suja-rg-accent); }
.suja-rg-btn--outline em{ font-style:normal; font-size:12px; font-weight:800; letter-spacing:0.06em; padding:2px 7px; border-radius:6px; background:rgba(8,145,178,0.12); }

/* ---- Blog — magazine grid (image top · category + read-time · title · excerpt) ---- */
.suja-rg-grid--post{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,28px); }
.suja-rg-card--post .suja-rg-body{ padding:20px 22px 22px; gap:12px; }
.suja-rg-blog-meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.suja-rg-blog-cat{ font-size:12px; font-weight:700; color:var(--suja-rg-accent); background:rgba(8,145,178,0.08); border:1px solid rgba(8,145,178,0.2); padding:5px 12px; border-radius:999px; text-transform:capitalize; line-height:1.3; }
.suja-rg-blog-read{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:#64748b; flex:0 0 auto; white-space:nowrap; }
.suja-rg-blog-read svg{ width:15px; height:15px; color:#94a3b8; }
.suja-rg-card--post .suja-rg-title{ font-size:19px; line-height:1.3; -webkit-line-clamp:3; }
.suja-rg-card--post .suja-rg-exc{ -webkit-line-clamp:3; }
@media (max-width:900px){ .suja-rg-grid--post{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .suja-rg-grid--post{ grid-template-columns:1fr; } }

/* ---- Case Studies — full-width success stories ---- */
.suja-rg-grid--case-study{ display:flex; flex-direction:column; gap:clamp(20px,2.4vw,30px); }
.suja-rg-card--case-study{ flex-direction:row; align-items:stretch; }
.suja-rg-card--case-study .suja-rg-media{ flex:0 0 38%; aspect-ratio:auto; min-height:250px; }
.suja-rg-cs-body{ position:relative; flex:1; display:flex; flex-direction:column; justify-content:center; gap:12px; padding:clamp(24px,2.6vw,36px); }
.suja-rg-cs-edit{ display:flex; flex-direction:column; gap:12px; transition:opacity .3s ease; }
.suja-rg-cs-hover{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:20px; padding:clamp(24px,2.6vw,36px);
	background:linear-gradient(160deg,#f5fbfd,#e9f6fa); opacity:0; transform:translateY(10px); transition:opacity .32s ease, transform .32s ease; pointer-events:none; }
.suja-rg-card--case-study:hover .suja-rg-cs-hover, .suja-rg-card--case-study:focus-within .suja-rg-cs-hover{ opacity:1; transform:none; pointer-events:auto; }
.suja-rg-card--case-study:hover .suja-rg-cs-edit, .suja-rg-card--case-study:focus-within .suja-rg-cs-edit{ opacity:0; }
.suja-rg-cs-client{ font-size:12px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--suja-rg-accent); }
.suja-rg-card--case-study .suja-rg-title{ font-size:clamp(19px,1.7vw,24px); -webkit-line-clamp:2; }
.suja-rg-cs-stats{ display:flex; flex-wrap:wrap; gap:16px 30px; margin:4px 0; padding:16px 0; border-top:1px solid rgba(8,145,178,0.14); border-bottom:1px solid rgba(8,145,178,0.14); }
.suja-rg-cs-stat{ display:flex; flex-direction:column; gap:2px; }
.suja-rg-cs-stat b{ font-size:23px; font-weight:800; color:#192434; line-height:1.05; letter-spacing:-0.01em; }
.suja-rg-cs-stat i{ font-size:11.5px; font-weight:600; font-style:normal; color:#64748b; text-transform:uppercase; letter-spacing:0.03em; }
/* lead card — big trend stats */
.suja-rg-cs-body--stats{ justify-content:center; gap:22px; }
.suja-rg-cs-hstats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,32px); }
.suja-rg-cs-hstat{ display:flex; flex-direction:column; gap:8px; }
.suja-rg-cs-hval{ display:flex; align-items:center; gap:8px; font-size:clamp(28px,3.2vw,40px); font-weight:800; color:#192434; line-height:1; letter-spacing:-0.02em; }
.suja-rg-cs-arrow{ width:0.6em; height:0.6em; flex:0 0 auto; }
.suja-rg-cs-arrow--up{ color:#16a34a; }
.suja-rg-cs-arrow--down{ color:#f59e0b; }
.suja-rg-cs-hdesc{ font-size:14px; line-height:1.45; color:#475569; font-weight:500; }
/* editorial card — category pill + title */
.suja-rg-cs-tag{ align-self:flex-start; font-size:12px; font-weight:700; color:var(--suja-rg-accent); background:rgba(8,145,178,0.08); border:1px solid rgba(8,145,178,0.2); padding:5px 13px; border-radius:999px; text-transform:capitalize; }
@media (max-width:720px){ .suja-rg-card--case-study{ flex-direction:column; } .suja-rg-card--case-study .suja-rg-media{ aspect-ratio:16/9; min-height:0; } }
@media (max-width:480px){ .suja-rg-cs-hstats{ grid-template-columns:1fr; } }

/* ---- Webinars — event cards ---- */
.suja-rg-grid--webinar{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2vw,26px); }
.suja-rg-wb-media{ position:relative; }
.suja-rg-wb-play{ position:absolute; inset:0; margin:auto; width:58px; height:58px; display:grid; place-items:center; z-index:2; transition:transform .3s ease; }
.suja-rg-wb-play svg{ width:58px; height:58px; filter:drop-shadow(0 8px 16px rgba(0,0,0,0.28)); }
.suja-rg-card--webinar:hover .suja-rg-wb-play{ transform:scale(1.08); }
.suja-rg-wb-dur{ position:absolute; bottom:12px; right:12px; z-index:2; background:rgba(12,30,53,0.82); color:#fff; font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px; }
.suja-rg-wb-speaker{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#475569; }
.suja-rg-wb-speaker svg{ width:16px; height:16px; color:var(--suja-rg-accent); flex:0 0 auto; }
.suja-rg-wb-speaker span{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:640px){ .suja-rg-grid--webinar{ grid-template-columns:1fr; } }

/* ---- E-Books — download-led with book cover ---- */
.suja-rg-grid--e-book{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2vw,26px); }
.suja-rg-card--e-book{ flex-direction:row; align-items:stretch; }
.suja-rg-eb-cover{ position:relative; flex:0 0 42%; display:grid; place-items:stretch; overflow:hidden; background:linear-gradient(150deg,#0e7490,#14b8a6); box-shadow:inset -14px 0 24px -18px rgba(0,0,0,0.5); }
.suja-rg-eb-cover::before{ content:""; position:absolute; top:0; bottom:0; left:14px; width:2px; background:rgba(255,255,255,0.22); z-index:2; }
.suja-rg-eb-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.suja-rg-eb-cover-inner{ display:flex; flex-direction:column; gap:10px; padding:26px 22px 22px 30px; color:#fff; justify-content:center; }
.suja-rg-eb-kicker{ font-size:11px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; opacity:0.82; }
.suja-rg-eb-cover-t{ font-size:16px; font-weight:800; line-height:1.32; }
.suja-rg-eb-brand{ margin-top:auto; font-size:11px; font-weight:600; opacity:0.78; }
.suja-rg-card--e-book .suja-rg-body{ flex:1; padding:24px 26px; }
@media (max-width:640px){ .suja-rg-grid--e-book{ grid-template-columns:1fr; } }
@media (max-width:520px){ .suja-rg-card--e-book{ flex-direction:column; } .suja-rg-eb-cover{ flex:none; min-height:180px; } .suja-rg-eb-cover::before{ display:none; } }

/* ---- Whitepapers & Research — report rows ---- */
.suja-rg-grid--whitepaper{ display:flex; flex-direction:column; gap:16px; }
.suja-rg-card--whitepaper{ flex-direction:row; align-items:stretch; }
.suja-rg-wp-doc{ position:relative; flex:0 0 210px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:26px 20px; background:linear-gradient(160deg,#1e293b,#334155); overflow:hidden; }
.suja-rg-wp-doc-ico svg{ width:46px; height:46px; color:rgba(255,255,255,0.92); }
.suja-rg-wp-cat{ font-size:12px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.85); text-align:center; }
.suja-rg-card--whitepaper .suja-rg-body{ flex:1; padding:24px 28px; }
.suja-rg-wp-exlabel{ font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:#94a3b8; }
@media (max-width:640px){ .suja-rg-card--whitepaper{ flex-direction:column; } .suja-rg-wp-doc{ flex:none; flex-direction:row; justify-content:flex-start; gap:16px; padding:18px 22px; } .suja-rg-wp-doc-ico svg{ width:34px; height:34px; } }

/* ---- NABH / ABDM Guides — knowledge-center cards ---- */
.suja-rg-grid--guide{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); }
.suja-rg-card--guide{ padding:26px 24px; gap:12px; }
.suja-rg-gd-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.suja-rg-gd-ico{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(8,145,178,0.15),rgba(14,165,233,0.1)); flex:0 0 auto; }
.suja-rg-gd-ico svg{ width:25px; height:25px; color:var(--suja-rg-accent); }
.suja-rg-gd-tag{ font-size:12px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--suja-rg-accent); background:rgba(8,145,178,0.1); padding:5px 11px; border-radius:999px; }
.suja-rg-gd-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; margin-bottom:4px; }
.suja-rg-chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#475569; background:#f1f5f9; padding:5px 11px; border-radius:999px; }
.suja-rg-chip svg{ width:13px; height:13px; color:#94a3b8; }
@media (max-width:900px){ .suja-rg-grid--guide{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .suja-rg-grid--guide{ grid-template-columns:1fr; } }

/* ---- Customer Success Stories — video story card (plays on hover) ---- */
.suja-rg-grid--customer-success{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.4vw,30px); }
.suja-rg-card--customer-success{ padding:clamp(22px,2.4vw,30px); gap:16px; }
.suja-rg-su-title{ font-size:clamp(19px,1.8vw,23px); line-height:1.28; font-weight:800; color:#192434; letter-spacing:-0.015em;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.suja-rg-su-meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.suja-rg-su-tag{ font-size:12px; font-weight:700; color:var(--suja-rg-accent); background:rgba(8,145,178,0.08); border:1px solid rgba(8,145,178,0.2); padding:5px 13px; border-radius:999px; text-transform:capitalize; }
.suja-rg-su-watch{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:#64748b; white-space:nowrap; }
.suja-rg-su-watch svg{ width:16px; height:16px; color:#94a3b8; }
.suja-rg-su-media{ position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; display:grid; place-items:center; background:linear-gradient(135deg,#0c4a6e,#0891B2); }
.suja-rg-su-media img, .suja-rg-su-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.suja-rg-su-media .suja-rg-media-ico{ color:rgba(255,255,255,0.92); }
.suja-rg-su-media .suja-rg-media-ico svg{ width:52px; height:52px; }
.suja-rg-su-play{ position:relative; z-index:2; width:60px; height:60px; display:grid; place-items:center; transition:opacity .3s ease, transform .3s ease; filter:drop-shadow(0 8px 16px rgba(0,0,0,0.28)); }
.suja-rg-su-play svg{ width:60px; height:60px; }
.suja-rg-card--customer-success:hover .suja-rg-su-play, .suja-rg-card--customer-success:focus-within .suja-rg-su-play{ opacity:0; transform:scale(0.8); }
.suja-rg-card--customer-success .suja-rg-cta-link{ margin-top:auto; }
@media (max-width:720px){ .suja-rg-grid--customer-success{ grid-template-columns:1fr; } }

/* ---- Events — large hero card (content left, banner right) ---- */
.suja-rg-grid--event{ display:flex; flex-direction:column; gap:clamp(20px,2.4vw,30px); }
.suja-rg-card--event{ flex-direction:row; align-items:stretch; padding:0; }
.suja-rg-ev-content{ flex:1 1 54%; display:flex; flex-direction:column; justify-content:center; gap:14px; padding:clamp(28px,3vw,48px); }
.suja-rg-ev-top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.suja-rg-ev-loc{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:#64748b; }
.suja-rg-ev-loc svg{ width:15px; height:15px; color:var(--suja-rg-accent); flex:0 0 auto; }
.suja-rg-ev-when{ font-size:12px; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.suja-rg-ev-when--upcoming{ color:#0f766e; background:rgba(16,185,129,0.15); }
.suja-rg-ev-when--past{ color:#64748b; background:#eef2f6; }
.suja-rg-ev-date{ font-size:13px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--suja-rg-accent); }
.suja-rg-card--event .suja-rg-title{ font-size:clamp(23px,2.5vw,34px); line-height:1.16; -webkit-line-clamp:2; }
.suja-rg-card--event .suja-rg-exc{ font-size:15px; line-height:1.6; -webkit-line-clamp:2; }
.suja-rg-card--event .suja-rg-cta-link{ margin-top:6px; }
.suja-rg-ev-visual{ position:relative; flex:0 0 44%; min-height:300px; overflow:hidden; display:grid; place-items:center;
	background:linear-gradient(150deg,#1e1b4b 0%, #312e81 45%, #0891B2 100%); }
/* !important guards against Elementor/WP forcing img{height:auto}, which would
   collapse the image to its intrinsic height (pinned top) and reveal the visual's
   gradient background as a strip below it. Fill the frame so it covers cleanly. */
.suja-rg-ev-visual img{ position:absolute; inset:0; width:100% !important; height:100% !important; object-fit:cover; display:block; }
.suja-rg-ev-visual-inner{ display:flex; flex-direction:column; align-items:center; gap:14px; color:#fff; text-align:center; padding:24px; }
.suja-rg-ev-vicon svg{ width:58px; height:58px; color:rgba(255,255,255,0.92); }
.suja-rg-ev-vtype{ font-size:13px; font-weight:800; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.9); }
@media (max-width:760px){ .suja-rg-card--event{ flex-direction:column; } .suja-rg-ev-visual{ flex:none; min-height:200px; order:-1; } }

/* ---- Hub: stacked category sections ---- */
.suja-rg-sections{ display:flex; flex-direction:column; gap:clamp(48px,6vw,84px); margin-top:clamp(8px,1.4vw,18px); }
.suja-rg-secblock{ scroll-margin-top:100px; }
.suja-rg-sec-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:clamp(18px,2vw,26px); }
.suja-rg-secblock > .suja-rg-sec-head > .suja-rg-sec-label{ margin:0; font-size:13px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:#192434; }

/* Category-tab filtering (athenahealth style). In the "All Content" overview
   each section is collapsed to its preview cards; overflow cards (is-hubextra)
   stay hidden until that category's tab expands the section. When a single
   category is selected the "Explore All" shortcut is redundant, so hide it. */
.suja-rg-secblock:not(.is-expanded) .suja-rg-card.is-hubextra{ display:none; }
.suja-rg-secblock.is-expanded .suja-rg-viewall{ display:none; }
/* The post currently shown in the featured spotlight is hidden from the grid
   below so it is never listed twice (toggled by JS as the active tab changes). */
.suja-rg-card.is-featdup{ display:none !important; }

/* ============================================================
   SINGLE RESOURCE (.suja-rs-*)
   ============================================================ */
.suja-rs{ --suja-rs-accent:#0891B2; background:#fff; }
.suja-rs-wrap{ width:100%; max-width:1120px; margin:0 auto; padding:0 24px; box-sizing:border-box; }
.suja-rs .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.suja-rs .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .suja-rs .reveal{ opacity:1; transform:none; transition:none; } }

.suja-rs-hero-host{ background:#edf4f9; padding:clamp(24px,3vw,36px) 0 clamp(48px,6vw,80px); }
.suja-rs-back{ display:inline-flex; align-items:center; gap:8px; margin:clamp(14px,2.5vw,24px) 0 clamp(22px,3vw,34px); font-size:14px; font-weight:700; color:#475569; text-decoration:none; transition:color .25s ease, gap .25s ease; }
.suja-rs-back:hover{ color:var(--suja-rs-accent); gap:12px; }
.suja-rs-hero{ display:grid; grid-template-columns:1.12fr 0.88fr; gap:clamp(28px,4vw,56px); align-items:center; }
/* Events drop the hero media — no reserved right column. The hero text spans the
   full container width, left-aligned, starting directly above the gallery image. */
.suja-rs-hero--nomedia{ grid-template-columns:1fr; }
.suja-rs-badge{ display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:#fff; background:var(--suja-rs-accent); padding:6px 13px; border-radius:999px; margin-bottom:16px; }
.suja-rs-title{ margin:0 0 14px; font-size:clamp(26px,3.4vw,44px); line-height:1.12; font-weight:800; letter-spacing:-0.02em; color:#192434; }
.suja-rs-lead{ margin:0 0 22px; font-size:clamp(16px,1.2vw,18px); line-height:1.7; color:#334155; }
.suja-rs-facts{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-wrap:wrap; gap:22px; }
.suja-rs-facts li{ font-size:14.5px; font-weight:700; color:#192434; }
.suja-rs-facts li span{ display:block; font-size:11.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:#64748b; margin-bottom:3px; }
.suja-rs-hero-media{ position:relative; aspect-ratio:4/3; border-radius:22px; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(135deg,#0c4a6e,#0891B2);
  box-shadow:24px 34px 66px -34px rgba(8,145,178,0.4), 0 0 0 1px rgba(8,145,178,0.08); }
.suja-rs-hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.suja-rs-media-ico{ color:rgba(255,255,255,0.92); }
.suja-rs-media-ico svg{ width:84px; height:84px; }
.suja-rs-media--webinar{ background:linear-gradient(135deg,#5b21b6,#0891B2); }
.suja-rs-media--e-book{ background:linear-gradient(135deg,#0e7490,#14b8a6); }
.suja-rs-media--whitepaper{ background:linear-gradient(135deg,#1e293b,#334155); }
.suja-rs-media--guide{ background:linear-gradient(135deg,#0891B2,#0ea5e9); }

/* Buttons */
.suja-rs-btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 28px; border-radius:999px; font-weight:700; font-size:14.5px; text-decoration:none; transition:all .25s ease; }
.suja-rs-btn--primary{ background:var(--suja-rs-accent); color:#fff; border:1.5px solid var(--suja-rs-accent); }
.suja-rs-btn--primary:hover{ background:#0a7a96; border-color:#0a7a96; transform:translateY(-2px); box-shadow:0 12px 24px -12px rgba(8,145,178,0.6); }
.suja-rs-btn--ghost{ background:transparent; color:var(--suja-rs-accent); border:1.5px solid rgba(8,145,178,0.4); }
.suja-rs-btn--ghost:hover{ background:var(--suja-rs-accent); color:#fff; }

/* Body */
.suja-rs-body-host{ background:#fff; padding:clamp(48px,6vw,84px) 0; }
.suja-rs-body-wrap{ max-width:820px; }
.suja-rs-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:clamp(36px,4vw,52px); }
.suja-rs-stat{ text-align:center; padding:24px 16px; border-radius:16px; background:linear-gradient(135deg, rgba(8,145,178,0.08), rgba(34,211,238,0.05)); border:1px solid rgba(8,145,178,0.16); }
.suja-rs-stat-v{ display:block; font-size:clamp(24px,3vw,34px); font-weight:800; color:#0891B2; letter-spacing:-0.01em; }
.suja-rs-stat-l{ display:block; font-size:13px; color:#475569; margin-top:4px; }
.suja-rs-block{ margin-bottom:clamp(28px,3.4vw,40px); }
.suja-rs-block:last-child{ margin-bottom:0; }
.suja-rs-h2{ margin:0 0 12px; font-size:clamp(22px,2.4vw,30px); line-height:1.2; font-weight:800; letter-spacing:-0.01em; color:#192434; }
.suja-rs-block p{ margin:0; font-size:clamp(15.5px,1.15vw,17px); line-height:1.8; color:#475569; }
.suja-rs-kicker{ display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--suja-rs-accent); margin-bottom:6px; }
.suja-rs-rcat{ font-size:18px !important; font-weight:800 !important; color:#192434 !important; }
.suja-rs-richtext p{ margin-bottom:18px; }

/* CTA */
.suja-rs-cta-host{ background:#fff; padding:0 0 clamp(56px,7vw,100px); }
/* Single-resource above-footer CTA reuses the site-wide suja-cta-lite card.
   Its background matches the page tint (#edf4f9) like every other page, and a
   second "Back to Resource Center" ghost button sits beside the primary CTA. */
.suja-rs-ctal-host.suja-ctal-showcase{ background:var(--suja-section-bg,#edf4f9); padding:clamp(40px,5vw,84px) 24px clamp(56px,7vw,100px); }
.suja-rs-ctal-host .suja-ctal-action{ gap:14px; flex-wrap:wrap; }
.suja-rs-ctal-host .suja-ctal-btn--ghost{ background:#fff; color:var(--eco-teal,#0891b2); box-shadow:none; border:1.5px solid rgba(8,145,178,0.35); }
.suja-rs-ctal-host .suja-ctal-btn--ghost:hover{ background:#f0f9fc; color:#0a7fa0; box-shadow:0 12px 24px -14px rgba(8,145,178,0.4); }
.suja-rs-cta{ text-align:center; border-radius:24px; padding:clamp(36px,4.5vw,60px) clamp(24px,4vw,52px);
  background:linear-gradient(135deg, rgba(8,145,178,0.1), rgba(34,211,238,0.06)); border:1px solid rgba(8,145,178,0.18); }
.suja-rs-cta-title{ margin:0 0 12px; font-size:clamp(22px,2.5vw,32px); line-height:1.2; font-weight:800; letter-spacing:-0.01em; color:#192434; max-width:640px; margin-inline:auto; }
.suja-rs-cta-sub{ margin:0 auto 26px; max-width:540px; font-size:15px; line-height:1.65; color:#475569; }
.suja-rs-cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

@media (max-width:860px){
  .suja-rs-hero{ grid-template-columns:1fr; gap:28px; }
  .suja-rs-hero-media{ order:-1; max-width:420px; }
}
@media (max-width:560px){ .suja-rs-stats{ grid-template-columns:1fr; } }

/* ============================================================
   GLOBAL SECTION BACKGROUND STANDARDIZATION  (SUJA design system)
   ------------------------------------------------------------
   Every content section between the Hero and the Footer shares ONE
   background tint (--suja-section-bg, #edf4f9), for a unified premium
   look across Home, About, CareAxes, Resources, Leadership and every
   future page. Body already defaults to the token (theme.css), so
   transparent sections inherit it automatically; the rules below fold
   in the section hosts that previously painted white / off-white.
   Excluded on purpose: hero sections, the footer, and CARDS (which stay
   white for contrast on the tint). Override per-section only for an
   intentional visual break.
   ============================================================ */
.suja-logos-section,
.suja-blog-section,
.suja-stats-host,
.suja-ldr-host,
.suja-cp-host,
.suja-leadp-bio-host,
.suja-leadp-cta-host,
.suja-res-host,
.suja-res-cats-host,
.suja-res-cta-host,
.suja-rg-host,
.suja-rs-body-host,
.suja-rs-cta-host {
  background: var(--suja-section-bg, #edf4f9) !important;
  background-image: none !important;
}

/* ============================================================
   SUJA MODULE SHOWCASE  (suja-module-showcase widget)
   Enterprise platform-ecosystem section: sticky left aside +
   right grid of glassmorphism module cards grouped into category
   columns. Glass treatment mirrors the Home hero product cards.
   ============================================================ */
.suja-mod-showcase {
  background: transparent; /* inherits the global --suja-section-bg tint */
  padding: clamp(64px, 7vw, 112px) 24px;
}
.suja-mod-container { max-width: 1200px; margin: 0 auto; }
.suja-mod-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(40px, 4.5vw, 76px);
  align-items: start;
}

/* ---- Left aside ---- */
.suja-mod-aside { position: sticky; top: 96px; }
.suja-mod-eyebrow {
  display: inline-block;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--eco-teal, #0891b2);
  margin: 0 0 16px;
}
.suja-mod-title {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.16; font-weight: 700; letter-spacing: -0.02em;
  color: var(--eco-ink, #0c1e35);
  margin: 0 0 20px;
}
.suja-mod-desc {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 16px; line-height: 1.7; color: var(--eco-text, #475569);
  margin: 0 0 28px; max-width: 420px;
}
.suja-mod-badges { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.suja-mod-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px 9px 12px; border-radius: 999px;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 13px; font-weight: 600; color: var(--eco-ink, #0c1e35);
  background: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0.24));
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 6px 16px -10px rgba(12,30,53,0.18);
}
.suja-mod-badge-tick {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  background: var(--eco-teal, #0891b2);
  position: relative;
}
.suja-mod-badge-tick::after {
  content: ""; position: absolute; left: 4.5px; top: 3px;
  width: 3.5px; height: 6.5px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.suja-mod-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700; font-size: 15px; color: var(--eco-teal, #0891b2);
  text-decoration: none;
  transition: gap .25s ease, color .25s ease;
}
.suja-mod-cta:hover { gap: 12px; color: #0e7490; }

/* ---- Right module grid: 3 category columns ---- */
.suja-mod-main { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.suja-mod-cat { display: flex; flex-direction: column; }
.suja-mod-cat-label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--eco-muted, #64748b);
  margin: 0 0 14px; min-height: 20px;
}
.suja-mod-cat-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--eco-teal, #0891b2); flex: none; }
.suja-mod-cat-cards { display: flex; flex-direction: column; gap: 14px; }

/* ---- Glass module card (mirrors .suja-hero-card) ---- */
.suja-mod-card {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px;
  min-height: 158px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0.13) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 16px 38px -18px rgba(8,145,178,0.24), 0 6px 16px -10px rgba(12,30,53,0.12);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  isolation: isolate; overflow: hidden;
}
.suja-mod-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(125% 95% at 0% 0%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 55%);
}
.suja-mod-card > * { position: relative; z-index: 1; }
.suja-mod-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 13px; flex: none;
  color: var(--eco-teal, #0891b2);
  background: rgba(8,145,178,0.10);
  border: 1px solid rgba(8,145,178,0.16);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease;
}
.suja-mod-card-icon i, .suja-mod-card-icon svg { font-size: 20px; width: 20px; height: 20px; color: currentColor; fill: currentColor; }
.suja-mod-card-name {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--eco-ink, #0c1e35); margin: 0;
}
.suja-mod-card-desc {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 13.5px; line-height: 1.55; margin: 0;
  color: var(--eco-muted, #64748b);
  opacity: 0.72;
  transition: opacity .28s ease, color .28s ease;
}
.suja-mod-card:hover {
  transform: translateY(-4px);
  border-color: rgba(8,145,178,0.5);
  box-shadow: 0 26px 50px -18px rgba(8,145,178,0.34), 0 10px 22px -12px rgba(12,30,53,0.16);
  background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 62%);
}
.suja-mod-card:hover .suja-mod-card-icon { transform: translateY(-2px) scale(1.08); background: rgba(8,145,178,0.16); }
.suja-mod-card:hover .suja-mod-card-desc { opacity: 1; color: var(--eco-text, #475569); }

/* ---- Staggered entrance (only when JS enables it) ---- */
.suja-mod-showcase.js-anim .suja-mod-card { opacity: 0; transform: translateY(18px); }
.suja-mod-showcase.js-anim.suja-mod-in .suja-mod-card {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--stagger, 0) * 55ms);
}

/* ---- Tablet: aside on top, keep 3 card columns ---- */
@media (max-width: 1100px) {
  .suja-mod-grid { grid-template-columns: 1fr; gap: 40px; }
  .suja-mod-aside { position: static; }
  .suja-mod-desc { max-width: 640px; }
}
/* ---- Mobile: categories stack; cards become a swipeable row ---- */
@media (max-width: 820px) {
  .suja-mod-main { grid-template-columns: 1fr; gap: 30px; }
  .suja-mod-cat-cards {
    flex-direction: row;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 12px;
    margin: 0 -4px;
    scrollbar-width: none;
  }
  .suja-mod-cat-cards::-webkit-scrollbar { display: none; }
  .suja-mod-card { flex: 0 0 76%; scroll-snap-align: start; min-height: 150px; }
}
@media (max-width: 480px) {
  .suja-mod-card { flex-basis: 84%; }
}

/* ============================================================
   SUJA SPECIALTY EMR  (suja-specialty-emr widget)
   Clinical specialties showcase: left content column + right
   interactive glass specialty grid with a live preview panel.
   Glass + hover mirror the Home / module cards.
   ============================================================ */
.suja-emr-showcase { background: transparent; padding: clamp(64px, 7vw, 112px) 24px; }
.suja-emr-container { max-width: 1200px; margin: 0 auto; }
.suja-emr-grid { display: grid; grid-template-columns: 360px 1fr; gap: clamp(40px, 4.5vw, 76px); align-items: start; }

/* ---- Left aside ---- */
.suja-emr-aside { position: sticky; top: 96px; }
.suja-emr-eyebrow {
  display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--eco-teal, #0891b2); margin: 0 0 16px;
}
.suja-emr-heading {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(28px, 2.6vw, 40px); line-height: 1.16; font-weight: 700; letter-spacing: -0.02em;
  color: var(--eco-ink, #0c1e35); margin: 0 0 20px;
}
.suja-emr-desc {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 16px; line-height: 1.7; color: var(--eco-text, #475569);
  margin: 0 0 26px; max-width: 440px;
}
.suja-emr-feats { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.suja-emr-feat { display: flex; align-items: center; gap: 13px; }
.suja-emr-feat-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 11px; color: var(--eco-teal, #0891b2);
  background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16);
}
.suja-emr-feat-icon i, .suja-emr-feat-icon svg { width: 17px; height: 17px; font-size: 17px; color: currentColor; fill: currentColor; }
.suja-emr-feat-label {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 15px; font-weight: 600; color: var(--eco-ink, #0c1e35);
}
.suja-emr-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700; font-size: 15px; color: var(--eco-teal, #0891b2);
  text-decoration: none; transition: gap .25s ease, color .25s ease;
}
.suja-emr-cta:hover { gap: 12px; color: #0e7490; }

/* ---- Right: specialty chip grid ---- */
.suja-emr-main { min-width: 0; }
.suja-emr-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
}
.suja-emr-chip {
  position: relative; display: flex; flex-direction: column; gap: 11px; align-items: flex-start;
  text-align: left; width: 100%; cursor: pointer; font: inherit;
  padding: 16px; min-height: 118px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.12) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 14px 34px -18px rgba(8,145,178,0.22), 0 5px 14px -10px rgba(12,30,53,0.12);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  isolation: isolate; overflow: hidden; -webkit-appearance: none; appearance: none;
}
.suja-emr-chip::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(125% 95% at 0% 0%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 55%);
}
.suja-emr-chip > * { position: relative; z-index: 1; }
.suja-emr-chip-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 12px; color: var(--eco-teal, #0891b2);
  background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease;
}
.suja-emr-chip-icon i, .suja-emr-chip-icon svg { width: 18px; height: 18px; font-size: 18px; color: currentColor; fill: currentColor; }
.suja-emr-chip-name {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--eco-ink, #0c1e35);
}
.suja-emr-chip:hover, .suja-emr-chip.is-active {
  transform: translateY(-3px);
  border-color: rgba(8,145,178,0.5);
  box-shadow: 0 24px 46px -18px rgba(8,145,178,0.32), 0 9px 20px -12px rgba(12,30,53,0.16);
  background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 62%);
}
.suja-emr-chip:hover .suja-emr-chip-icon, .suja-emr-chip.is-active .suja-emr-chip-icon {
  transform: translateY(-2px) scale(1.08); background: rgba(8,145,178,0.16);
}

/* ---- Preview panel ---- */
.suja-emr-preview {
  display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: stretch;
  margin-top: 22px; padding: 18px; border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.16) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 20px 44px -20px rgba(8,145,178,0.26), 0 8px 18px -12px rgba(12,30,53,0.14);
}
.suja-emr-preview.is-swap { animation: suja-emr-swap .4s ease; }
@keyframes suja-emr-swap { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.suja-emr-preview-media {
  margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3;
  background: #dfe8f0; border: 1px solid rgba(15,23,42,0.06);
}
.suja-emr-preview-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.suja-emr-preview-body { display: flex; flex-direction: column; justify-content: center; padding: 6px 8px 6px 0; }
.suja-emr-preview-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.suja-emr-preview-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 13px; color: var(--eco-teal, #0891b2);
  background: rgba(8,145,178,0.12); border: 1px solid rgba(8,145,178,0.18);
}
.suja-emr-preview-icon i, .suja-emr-preview-icon svg { width: 20px; height: 20px; font-size: 20px; color: currentColor; fill: currentColor; }
.suja-emr-preview-name {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; letter-spacing: -0.01em;
  color: var(--eco-ink, #0c1e35); margin: 0;
}
.suja-emr-preview-desc {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 15px; line-height: 1.65; color: var(--eco-text, #475569); margin: 0 0 14px;
}
.suja-emr-preview-flow {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(8,145,178,0.06); border: 1px solid rgba(8,145,178,0.14);
}
.suja-emr-preview-flow-label {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--eco-teal, #0891b2);
}
.suja-emr-preview-flow-text {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 14px; line-height: 1.5; color: var(--eco-ink, #0c1e35); font-weight: 500;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .suja-emr-grid { grid-template-columns: 1fr; gap: 40px; }
  .suja-emr-aside { position: static; }
  .suja-emr-desc { max-width: 640px; }
  .suja-emr-chips { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .suja-emr-chips { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .suja-emr-chip { min-height: 108px; padding: 14px; }
  .suja-emr-preview { grid-template-columns: 1fr; gap: 16px; }
  .suja-emr-preview-media { aspect-ratio: 16 / 9; }
}

/* ============================================================
   SUJA INTEGRATION NAVIGATOR  (suja-integration-navigator widget)
   Connectivity showcase: left content + right vertical tab-cards
   driving a live content panel (image + desc + animated highlights).
   Glass + hover mirror the Home / module / specialty sections.
   ============================================================ */
.suja-int-showcase { background: transparent; padding: clamp(64px, 7vw, 112px) 24px; }
.suja-int-container { max-width: 1200px; margin: 0 auto; }
.suja-int-grid { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: clamp(40px, 4.5vw, 72px); align-items: start; }

/* ---- Left aside ---- */
.suja-int-aside { position: sticky; top: 96px; }
.suja-int-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-int-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 2.6vw, 40px); line-height: 1.16; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0 0 20px; }
.suja-int-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.7; color: var(--eco-text, #475569); margin: 0 0 28px; max-width: 420px; }
.suja-int-badges { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.suja-int-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px 9px 12px; border-radius: 999px; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 13px; font-weight: 600; color: var(--eco-ink, #0c1e35); background: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0.24)); -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 6px 16px -10px rgba(12,30,53,0.18); }
.suja-int-badge-tick { width: 15px; height: 15px; border-radius: 50%; flex: none; background: var(--eco-teal, #0891b2); position: relative; }
.suja-int-badge-tick::after { content: ""; position: absolute; left: 4.5px; top: 3px; width: 3.5px; height: 6.5px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.suja-int-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-weight: 700; font-size: 15px; color: var(--eco-teal, #0891b2); text-decoration: none; transition: gap .25s ease, color .25s ease; }
.suja-int-cta:hover { gap: 12px; color: #0e7490; }

/* ---- Right navigator: nav tabs + panel ---- */
.suja-int-navigator { display: grid; grid-template-columns: minmax(230px, 290px) 1fr; gap: 20px; align-items: start; min-width: 0; }
.suja-int-nav { display: flex; flex-direction: column; gap: 12px; }
.suja-int-navcard {
  position: relative; display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  cursor: pointer; font: inherit; padding: 16px 18px 16px 20px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.12) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 12px 30px -18px rgba(8,145,178,0.2), 0 5px 14px -10px rgba(12,30,53,0.1);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  overflow: hidden; -webkit-appearance: none; appearance: none;
}
.suja-int-nav-bar { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 0; border-radius: 0 3px 3px 0; background: var(--eco-teal, #0891b2); transition: height .3s ease; }
.suja-int-nav-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 12px; color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16); transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease; }
.suja-int-nav-icon i, .suja-int-nav-icon svg { width: 19px; height: 19px; font-size: 19px; color: currentColor; fill: currentColor; }
.suja-int-nav-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.suja-int-nav-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); }
.suja-int-nav-sub { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 12.5px; line-height: 1.3; color: var(--eco-muted, #64748b); }
.suja-int-navcard:hover { transform: translateY(-2px); border-color: rgba(8,145,178,0.4); box-shadow: 0 20px 40px -20px rgba(8,145,178,0.3), 0 8px 18px -12px rgba(12,30,53,0.14); }
.suja-int-navcard:hover .suja-int-nav-icon { transform: translateY(-1px) scale(1.06); background: rgba(8,145,178,0.15); }
.suja-int-navcard.is-active {
  border-color: rgba(8,145,178,0.55);
  background: linear-gradient(135deg, rgba(8,145,178,0.10) 0%, rgba(255,255,255,0.18) 70%);
  box-shadow: 0 22px 44px -20px rgba(8,145,178,0.34), 0 8px 18px -12px rgba(12,30,53,0.14);
}
.suja-int-navcard.is-active .suja-int-nav-bar { height: 62%; }
.suja-int-navcard.is-active .suja-int-nav-icon { background: rgba(8,145,178,0.18); }
.suja-int-navcard.is-active .suja-int-nav-title { color: var(--eco-teal, #0e7490); }

/* ---- Content panel ---- */
/* Flex column + gap rather than a margin on the media: the media is a
   <figure>, and Elementor's `.elementor .elementor-widget:not(...) figure
   { margin: 0 }` (specificity 0,3,1) outranks `.suja-int-panel-media`, so a
   margin-bottom there is silently dropped. Flex gap can't be overridden by
   that reset, so the separation is reliable. */
.suja-int-panel {
  position: relative; overflow: hidden; padding: 18px; border-radius: 22px;
  display: flex; flex-direction: column; gap: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.16) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 24px 50px -22px rgba(8,145,178,0.28), 0 8px 20px -12px rgba(12,30,53,0.14);
}
/* Shorter image (was 16/9) so the added gap doesn't grow the panel. */
.suja-int-panel-media { margin: 0; flex: none; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 7; background: #dfe8f0; border: 1px solid rgba(15,23,42,0.06); }
.suja-int-panel-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.suja-int-panel.is-swap .suja-int-panel-media { animation: suja-int-fade .4s ease; }
@keyframes suja-int-fade { from { opacity: .3; } to { opacity: 1; } }
.suja-int-panel-head { display: flex; align-items: center; gap: 11px; margin: 0 0 12px; }
/* Short brand accent line replaces the panel icon. */
.suja-int-panel-line { flex: none; width: 3px; height: 20px; border-radius: 3px; background: var(--eco-teal, #0891b2); }
.suja-int-panel-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(16px, 1.25vw, 19px); font-weight: 700; line-height: 1.3; letter-spacing: -0.012em; color: var(--eco-ink, #0c1e35); margin: 0; }
.suja-int-panel-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 15.5px; line-height: 1.65; color: var(--eco-text, #475569); margin: 0 0 18px; }
.suja-int-panel-hl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.suja-int-hl-item { display: flex; align-items: flex-start; gap: 9px; font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 14.5px; line-height: 1.45; color: var(--eco-ink, #0c1e35); font-weight: 500; }
.suja-int-hl-tick { flex: none; margin-top: 2px; color: var(--eco-teal, #0891b2); width: 16px; height: 16px; }
.suja-int-panel.is-swap .suja-int-hl-item { animation: suja-int-hlin .42s ease both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes suja-int-hlin { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* ---- Tablet: stack; horizontal integration selector ---- */
@media (max-width: 1100px) {
  .suja-int-grid { grid-template-columns: 1fr; gap: 40px; }
  .suja-int-aside { position: static; }
  .suja-int-desc { max-width: 640px; }
  .suja-int-navigator { grid-template-columns: 1fr; gap: 22px; }
  .suja-int-nav { flex-direction: row; overflow-x: auto; gap: 12px; padding-bottom: 6px; scrollbar-width: none; }
  .suja-int-nav::-webkit-scrollbar { display: none; }
  .suja-int-navcard { flex: 0 0 260px; }
  .suja-int-nav-bar { top: auto; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; border-radius: 3px 3px 0 0; transition: width .3s ease; }
  .suja-int-navcard.is-active .suja-int-nav-bar { height: 3px; width: 60%; }
}
/* ---- Mobile: swipeable tabs, image above content ---- */
@media (max-width: 600px) {
  .suja-int-navcard { flex-basis: 220px; padding: 14px; }
  .suja-int-panel-hl { grid-template-columns: 1fr; }
  .suja-int-panel-media { aspect-ratio: 16 / 9; }
}

/* ============================================================
   SUJA MODULE SHOWCASE v2 — scroll-pinned product walkthrough
   (suja-module-showcase widget, .suja-modx-* markup).
   Left heading/description stay fixed while pinned; modules advance
   one at a time (fade+slide) and the right image cross-fades.
   Runs for everyone; no-JS shows module 1 as a static 2-col block.
   ============================================================ */
.suja-modx-scroll { position: relative; }
.suja-modx-scroll.is-ready { height: calc((var(--n, 1) - 1) * var(--step, 58vh) + min(100vh, 700px)); }
.suja-modx-sticky { position: relative; background: transparent; }
.suja-modx-scroll.is-ready .suja-modx-sticky {
  position: sticky; top: 0; height: min(100vh, 700px); overflow: hidden;
  display: flex; align-items: center;
}
.suja-modx-inner {
  max-width: 1200px; width: 100%; margin: 0 auto; padding: clamp(48px, 6vh, 88px) 24px;
  display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(36px, 4vw, 68px); align-items: center;
}

/* ---- Left content (static heading + rotating module) ---- */
.suja-modx-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-modx-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3vw, 44px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0 0 20px; }
.suja-modx-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.7; color: var(--eco-text, #475569); margin: 0 0 34px; max-width: 460px; }

.suja-modx-stage { position: relative; min-height: 140px; display: flex; align-items: center; }
.suja-modx-module {
  position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 22px;
  opacity: 0; pointer-events: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
/* Enter/leave state: fade + slight upward drift, kept vertically centred. */
.suja-modx-module { transform: translateY(calc(-50% + 16px)); }
.suja-modx-module.is-active { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.suja-modx-mod-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 58px; height: 58px; border-radius: 16px; color: var(--eco-teal, #0891b2);
  background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16); margin: 0;
}
.suja-modx-mod-icon i, .suja-modx-mod-icon svg { width: 26px; height: 26px; font-size: 26px; color: currentColor; fill: currentColor; }
.suja-modx-mod-text { min-width: 0; }
.suja-modx-mod-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(21px, 1.9vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: var(--eco-ink, #0c1e35); margin: 0 0 8px; }
.suja-modx-mod-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16.5px; line-height: 1.65; color: var(--eco-text, #475569); margin: 0; max-width: 460px; }

/* ---- Progress (counter + bar) ---- */
.suja-modx-progress { display: flex; align-items: center; gap: 16px; margin-top: 34px; }
.suja-modx-count { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: var(--eco-ink, #0c1e35); flex: none; }
.suja-modx-count-cur { color: var(--eco-teal, #0891b2); }
.suja-modx-count-sep { margin: 0 3px; color: var(--eco-muted, #94a3b8); }
.suja-modx-count-total { color: var(--eco-muted, #94a3b8); }
.suja-modx-progress-track { position: relative; flex: 1; height: 3px; border-radius: 3px; background: rgba(12,30,53,0.10); overflow: hidden; max-width: 260px; }
.suja-modx-progress-fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: var(--eco-teal, #0891b2); border-radius: 3px; transition: transform .2s ease-out; }

/* ---- Right visual (cross-fading images) ---- */
.suja-modx-visual {
  position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden;
  background: #dfe8f0; border: 1px solid rgba(15,23,42,0.06);
  box-shadow: 0 40px 80px -34px rgba(8,145,178,0.30), 0 14px 30px -18px rgba(12,30,53,0.16);
}
.suja-modx-figure {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transform: scale(1.04); pointer-events: none;
  transition: opacity .65s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.suja-modx-figure.is-active { opacity: 1; transform: scale(1); }
.suja-modx-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Tablet ---- */
@media (max-width: 1024px) {
  .suja-modx-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .suja-modx-desc { margin-bottom: 26px; }
  .suja-modx-stage { min-height: 130px; }
}
/* ---- Mobile: image above content, still scroll-pinned ---- */
@media (max-width: 820px) {
  .suja-modx-inner { grid-template-columns: 1fr; gap: 26px; padding: 40px 20px; }
  .suja-modx-visual { order: -1; aspect-ratio: 16 / 10; border-radius: 18px; }
  .suja-modx-heading { font-size: clamp(24px, 6vw, 32px); margin-bottom: 14px; }
  .suja-modx-desc { font-size: 15px; margin-bottom: 22px; }
  .suja-modx-mod-icon { width: 50px; height: 50px; margin: 0; }
  .suja-modx-module { gap: 16px; }
  .suja-modx-stage { min-height: 120px; }
  .suja-modx-progress { margin-top: 24px; }
}

/* ============================================================
   SUJA SPECIALTY EMR v2 — centered at-a-glance grid
   (suja-specialty-emr widget, .suja-emr2-* markup).
   Centered intro + full-width responsive specialty grid. No hover/
   click reveal — breadth is visible at a glance. Deliberately a
   centered/full-width layout (vs the split layouts elsewhere) to give
   the page section-by-section variety within one design system.
   ============================================================ */
.suja-emr2-showcase { background: transparent; padding: clamp(64px, 7vw, 112px) 24px; }
.suja-emr2-container { max-width: 1140px; margin: 0 auto; }

/* ---- Centered intro ---- */
.suja-emr2-head { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 60px); text-align: center; }
.suja-emr2-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-emr2-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0 0 18px; }
.suja-emr2-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16.5px; line-height: 1.7; color: var(--eco-text, #475569); margin: 0 auto; max-width: 620px; }

/* ---- Feature chips (centered row) ---- */
.suja-emr2-feats { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.suja-emr2-feat {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 11px; border-radius: 999px;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 13.5px; font-weight: 600; color: var(--eco-ink, #0c1e35);
  background: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0.24));
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 6px 16px -10px rgba(12,30,53,0.18);
}
.suja-emr2-feat-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 8px; color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.10); }
.suja-emr2-feat-icon i, .suja-emr2-feat-icon svg { width: 13px; height: 13px; font-size: 13px; color: currentColor; fill: currentColor; }

/* ---- Specialty grid (at a glance) ---- */
.suja-emr2-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 14px; }
.suja-emr2-card {
  display: flex; align-items: center; gap: 14px; padding: 15px 16px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0.13) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 14px 32px -20px rgba(8,145,178,0.2), 0 5px 14px -10px rgba(12,30,53,0.1);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
.suja-emr2-card-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 12px; color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16); transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease; }
.suja-emr2-card-icon i, .suja-emr2-card-icon svg { width: 18px; height: 18px; font-size: 18px; color: currentColor; fill: currentColor; }
.suja-emr2-card-name { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 14.5px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); }
.suja-emr2-card:hover {
  transform: translateY(-3px);
  border-color: rgba(8,145,178,0.5);
  box-shadow: 0 24px 44px -20px rgba(8,145,178,0.3), 0 9px 20px -12px rgba(12,30,53,0.14);
  background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 62%);
}
.suja-emr2-card:hover .suja-emr2-card-icon { transform: translateY(-1px) scale(1.06); background: rgba(8,145,178,0.16); }

/* ---- CTA ---- */
.suja-emr2-cta-wrap { text-align: center; margin-top: clamp(36px, 4vw, 52px); }
.suja-emr2-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-weight: 700; font-size: 15px; color: var(--eco-teal, #0891b2); text-decoration: none; transition: gap .25s ease, color .25s ease; }
.suja-emr2-cta:hover { gap: 12px; color: #0e7490; }

/* ---- Staggered scroll reveal (only when JS enables it) ---- */
.suja-emr2-showcase.js-anim .suja-emr2-card { opacity: 0; transform: translateY(16px); }
.suja-emr2-showcase.js-anim.is-in .suja-emr2-card { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--stagger, 0) * 32ms); }

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .suja-emr2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .suja-emr2-card { padding: 13px; gap: 11px; min-width: 0; }
  .suja-emr2-card-name { font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
  .suja-emr2-card-icon { width: 38px; height: 38px; }
}

/* ============================================================
   SUJA BENEFITS SCROLL  (suja-benefits-scroll widget)
   Sticky realistic image on the LEFT that cross-fades as the visitor
   scrolls a list of benefits on the RIGHT. All benefits stay visible;
   the one in the focal band is emphasised (brand icon/title, accent
   line, glass highlight). Distinct from the pinned, one-at-a-time,
   right-image Primary Modules section.
   ============================================================ */
.suja-ben-showcase { background: transparent; padding: clamp(64px, 7vw, 112px) 24px; }
.suja-ben-container { max-width: 1200px; margin: 0 auto; }
.suja-ben-grid { display: grid; grid-template-columns: 1fr 0.96fr; gap: clamp(40px, 5vw, 80px); align-items: start; }

/* ---- Left column: eyebrow + heading + image pin together as one unit
   while the right benefit list scrolls past. ---- */
.suja-ben-left { position: sticky; top: clamp(88px, 14vh, 128px); align-self: start; }
.suja-ben-visual { position: relative; }
.suja-ben-visual-inner {
  position: relative; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden;
  background: #dfe8f0; border: 1px solid rgba(15,23,42,0.06);
  box-shadow: 0 44px 90px -38px rgba(8,145,178,0.32), 0 16px 34px -20px rgba(12,30,53,0.16);
}
.suja-ben-figure {
  position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.05);
  transition: opacity .6s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.suja-ben-figure.is-active { opacity: 1; transform: scale(1); }
.suja-ben-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.suja-ben-visual-glass {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 24px;
  background: radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,0.28), rgba(255,255,255,0) 55%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.42);
}

/* ---- Right: header + scrollable benefit list ---- */
.suja-ben-head { margin: 0 0 clamp(28px, 4vw, 44px); }
.suja-ben-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-ben-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 2.7vw, 40px); line-height: 1.16; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0 0 18px; }
.suja-ben-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.7; color: var(--eco-text, #475569); margin: 0; max-width: 500px; }
.suja-ben-content > .suja-ben-desc { margin: 0 0 clamp(24px, 3vw, 38px); }

.suja-ben-list { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 40px); }
.suja-ben-item {
  position: relative; display: flex; align-items: flex-start; gap: 18px;
  padding: 20px 22px; border-radius: 18px;
  border: 1px solid transparent; background: transparent;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .45s ease, border-color .45s ease, box-shadow .45s ease, transform .45s ease;
}
/* Clickable / selectable affordance */
.suja-ben-item:hover:not(.is-active) { background: rgba(8,145,178,0.05); border-color: rgba(8,145,178,0.16); }
.suja-ben-item:focus-visible { outline: 2px solid var(--eco-teal, #0891b2); outline-offset: 2px; }
.suja-ben-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: 14px; color: #94a3b8;
  background: rgba(148,163,184,0.12); border: 1px solid rgba(148,163,184,0.18);
  transition: color .45s ease, background .45s ease, border-color .45s ease, transform .45s ease;
}
.suja-ben-icon i, .suja-ben-icon svg { width: 21px; height: 21px; font-size: 21px; color: currentColor; fill: currentColor; }
.suja-ben-item-body { min-width: 0; }
.suja-ben-item-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; color: #475569; margin: 0; transition: color .45s ease, font-weight .1s ease; }
.suja-ben-accent { display: block; height: 3px; width: 0; border-radius: 3px; background: var(--eco-teal, #0891b2); margin: 8px 0 10px; transition: width .5s cubic-bezier(.22,.61,.36,1); }
.suja-ben-item-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 15.5px; line-height: 1.65; color: var(--eco-text, #475569); margin: 0; opacity: 0.6; transition: opacity .45s ease; max-width: 480px; }

/* Active benefit */
.suja-ben-item.is-active {
  background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.22) 62%);
  border-color: rgba(8,145,178,0.28);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 22px 46px -22px rgba(8,145,178,0.3), 0 8px 18px -12px rgba(12,30,53,0.12);
}
.suja-ben-item.is-active .suja-ben-icon { color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.14); border-color: rgba(8,145,178,0.22); transform: scale(1.06); }
.suja-ben-item.is-active .suja-ben-item-title { color: var(--eco-teal, #0e7490); font-weight: 800; }
.suja-ben-item.is-active .suja-ben-accent { width: 44px; }
.suja-ben-item.is-active .suja-ben-item-desc { opacity: 1; }

/* ---- Tablet / mobile: image sticks at top, benefits scroll below ---- */
@media (max-width: 900px) {
  .suja-ben-grid { grid-template-columns: 1fr; gap: 30px; }
  .suja-ben-left { position: static; }
  .suja-ben-visual { position: relative; top: auto; z-index: 1; }
  .suja-ben-visual-inner { aspect-ratio: 16 / 10; border-radius: 18px; }
  .suja-ben-desc { max-width: 640px; }
  .suja-ben-list { gap: 18px; }
}
@media (max-width: 480px) {
  .suja-ben-item { padding: 16px; gap: 14px; }
  .suja-ben-icon { width: 44px; height: 44px; }
}

/* ============================================================
   SUJA PLATFORM STORY  (suja-platform-story widget)
   Flagship pinned scroll-story: sticky left panel (label + heading +
   01/12 indicator + active platform title/desc/highlights + CTA +
   progress dots) beside a large right image that cross-fades + zooms
   through 12 platforms. Number-driven & richer than Primary Modules.
   ============================================================ */
.suja-plat-scroll { position: relative; }
/* Cap the pinned viewport so the centred content isn't lost in a huge
   whitespace band on tall monitors — keeps the pinned sections' top/bottom
   breathing room close to the static sections' rhythm. */
.suja-plat-scroll.is-ready { height: calc((var(--n, 1) - 1) * var(--step, 62vh) + min(100vh, 720px)); }
.suja-plat-sticky { position: relative; background: transparent; }
.suja-plat-scroll.is-ready .suja-plat-sticky { position: sticky; top: 0; height: min(100vh, 720px); overflow: hidden; display: flex; align-items: center; }
.suja-plat-inner {
  max-width: 1200px; width: 100%; margin: 0 auto; padding: clamp(40px, 5vh, 80px) 24px;
  display: grid; grid-template-columns: 1fr 0.82fr; gap: clamp(36px, 4.5vw, 72px); align-items: center;
}
/* Image on the LEFT, content panel on the RIGHT. */
.suja-plat-visual { order: -1; }

/* ---- Left sticky panel ---- */
.suja-plat-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 14px; }
.suja-plat-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(22px, 1.9vw, 28px); line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; color: var(--eco-ink, #0c1e35); margin: 0 0 26px; max-width: 440px; }
.suja-plat-count { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-weight: 800; letter-spacing: 0.02em; margin: 0 0 14px; line-height: 1; }
.suja-plat-count-cur { color: var(--eco-teal, #0891b2); font-size: 30px; font-variant-numeric: tabular-nums; }
.suja-plat-count-sep { color: var(--eco-muted, #94a3b8); font-size: 20px; margin: 0 4px; }
.suja-plat-count-total { color: var(--eco-muted, #94a3b8); font-size: 20px; font-variant-numeric: tabular-nums; }

.suja-plat-stage { position: relative; min-height: 210px; }
.suja-plat-item { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); display: flex; align-items: flex-start; gap: 20px; }
.suja-plat-item.is-active { opacity: 1; transform: none; pointer-events: auto; }
/* Icon left of the platform name — mirrors the Primary Modules layout. */
.suja-plat-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 58px; height: 58px; border-radius: 16px; color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16); margin-top: 4px; }
.suja-plat-icon i, .suja-plat-icon svg { width: 26px; height: 26px; font-size: 26px; color: currentColor; fill: currentColor; }
.suja-plat-body { min-width: 0; }
.suja-plat-name { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(26px, 2.6vw, 38px); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0 0 12px; }
.suja-plat-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.65; color: var(--eco-text, #475569); margin: 0 0 18px; max-width: 440px; }
.suja-plat-hl { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.suja-plat-hl-item {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 10px; border-radius: 999px;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 13px; font-weight: 600; color: var(--eco-ink, #0c1e35);
  background: rgba(8,145,178,0.07); border: 1px solid rgba(8,145,178,0.16);
}
.suja-plat-hl-item svg { color: var(--eco-teal, #0891b2); flex: none; }
.suja-plat-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-weight: 700; font-size: 15px; color: var(--eco-teal, #0891b2); text-decoration: none; transition: gap .25s ease, color .25s ease; }
.suja-plat-cta:hover { gap: 12px; color: #0e7490; }

.suja-plat-dots { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.suja-plat-dot { width: 9px; height: 9px; border-radius: 999px; background: rgba(12,30,53,0.16); border: none; padding: 0; cursor: pointer; transition: background .3s ease, width .3s ease; -webkit-appearance: none; appearance: none; }
.suja-plat-dot:hover { background: rgba(8,145,178,0.55); }
.suja-plat-dot.is-active { background: var(--eco-teal, #0891b2); width: 28px; }

/* ---- Right visual: cross-fade + zoom + glass reflection ---- */
.suja-plat-visual-inner { position: relative; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; background: #dfe8f0; border: 1px solid rgba(15,23,42,0.06); box-shadow: 0 46px 92px -38px rgba(8,145,178,0.34), 0 16px 34px -20px rgba(12,30,53,0.16); }
.suja-plat-figure { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.06); transition: opacity .65s ease, transform 1.1s cubic-bezier(.22,.61,.36,1); }
.suja-plat-figure.is-active { opacity: 1; transform: scale(1); }
.suja-plat-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.suja-plat-visual-glass { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 24px; background: radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,0.26), rgba(255,255,255,0) 55%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.42); }

/* ---- Tablet ---- */
@media (max-width: 1024px) {
  .suja-plat-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .suja-plat-heading { max-width: none; }
  .suja-plat-stage { min-height: 220px; }
}
/* ---- Mobile: image above content, still pinned ---- */
@media (max-width: 820px) {
  .suja-plat-inner { grid-template-columns: 1fr; gap: 24px; padding: 32px 20px; }
  .suja-plat-visual { order: -1; }
  .suja-plat-visual-inner { aspect-ratio: 16 / 10; border-radius: 18px; }
  .suja-plat-heading { display: none; }
  .suja-plat-stage { min-height: 200px; }
  .suja-plat-name { font-size: clamp(24px, 6vw, 30px); }
  .suja-plat-item { gap: 16px; }
  .suja-plat-icon { width: 50px; height: 50px; }
  .suja-plat-icon i, .suja-plat-icon svg { width: 22px; height: 22px; font-size: 22px; }
  .suja-plat-dots { margin-top: 20px; }
}

/* ============================================================
   SUJA REVENUE LEAKAGE v2  (suja-revenue-leakage widget, .suja-rl2-*)
   Split header (heading left / description right) above a centred flow
   of equal-weight glassmorphism cards, each with a prominent 01–07
   numeral, healthcare icon, growing accent line and ghost numeral.
   Not a uniform grid / sticky story / tab layout — a fresh pattern.
   Replaces the v1 .suja-rev-* pinned dashboard (removed).
   ============================================================ */
.suja-rl2-showcase { background: transparent; padding: clamp(64px, 7vw, 112px) 24px; }
.suja-rl2-container { max-width: 1240px; margin: 0 auto; }

/* ---- Split header ---- */
.suja-rl2-head { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 64px); align-items: end; margin: 0 0 clamp(40px, 5vw, 64px); }
.suja-rl2-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-rl2-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3.1vw, 42px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0; }
.suja-rl2-head-right { padding-bottom: 4px; }
.suja-rl2-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.72; color: var(--eco-text, #475569); margin: 0; }

/* ---- Centred card flow (7 cards → 4 + 3) ---- */
.suja-rl2-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.suja-rl2-card {
  position: relative; overflow: hidden; isolation: isolate;
  flex: 1 1 260px; max-width: 280px;
  padding: 24px 22px 26px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.14) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 16px 36px -20px rgba(8,145,178,0.22), 0 6px 16px -12px rgba(12,30,53,0.10);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.suja-rl2-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(125% 95% at 0% 0%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 55%);
}
/* Soft oversized numeral for depth */
.suja-rl2-ghost {
  position: absolute; right: 6px; bottom: -22px; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 96px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
  color: rgba(8,145,178,0.06); transition: color .3s ease;
}
.suja-rl2-card > *:not(.suja-rl2-ghost) { position: relative; z-index: 1; }

.suja-rl2-card-top { display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px; }
.suja-rl2-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: 14px; color: var(--eco-teal, #0891b2);
  background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease;
}
.suja-rl2-icon i, .suja-rl2-icon svg { width: 21px; height: 21px; font-size: 21px; color: currentColor; fill: currentColor; }
.suja-rl2-num {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; color: rgba(8,145,178,0.38); transition: color .3s ease;
}
.suja-rl2-accent { display: block; width: 32px; height: 3px; border-radius: 3px; background: var(--eco-teal, #0891b2); margin: 0 0 14px; transition: width .35s cubic-bezier(.22,.61,.36,1); }
.suja-rl2-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0 0 10px; }
.suja-rl2-card-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 13.5px; line-height: 1.62; color: var(--eco-text, #475569); margin: 0; }

/* Hover */
.suja-rl2-card:hover {
  transform: translateY(-6px);
  border-color: rgba(8,145,178,0.5);
  background: linear-gradient(135deg, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.2) 62%);
  box-shadow: 0 28px 52px -22px rgba(8,145,178,0.32), 0 10px 22px -14px rgba(12,30,53,0.16);
}
.suja-rl2-card:hover .suja-rl2-icon { transform: translateY(-2px) scale(1.07); background: rgba(8,145,178,0.16); }
.suja-rl2-card:hover .suja-rl2-num { color: var(--eco-teal, #0891b2); }
.suja-rl2-card:hover .suja-rl2-accent { width: 52px; }
.suja-rl2-card:hover .suja-rl2-ghost { color: rgba(8,145,178,0.10); }

/* ---- Staggered entrance (JS adds .js-anim, then removes it once done
   so hover transforms stay snappy) ---- */
.suja-rl2-showcase.js-anim .suja-rl2-card { opacity: 0; transform: translateY(18px); }
.suja-rl2-showcase.js-anim.is-in .suja-rl2-card {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .suja-rl2-head { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .suja-rl2-head-right { padding-bottom: 0; }
  .suja-rl2-desc { font-size: 15px; }
}
@media (max-width: 600px) {
  .suja-rl2-grid { gap: 14px; }
  .suja-rl2-card { flex: 1 1 100%; max-width: none; padding: 20px 18px 22px; }
}


/* ============================================================
   SUJA BILLING FLOW  (suja-billing-flow, .suja-bill-*)
   Connected patient-journey rail: an even row of workflow stages threaded by
   a single horizontal gradient track with glowing nodes and forward chevrons;
   each stage is a glassmorphism card. Collapses to a wrapped card grid on
   narrower screens.
   ============================================================ */
.suja-bill-showcase { background: transparent; padding: clamp(64px, 7vw, 112px) 24px; }
.suja-bill-container { max-width: 1240px; margin: 0 auto; }

/* ---- Centred header ---- */
.suja-bill-head { max-width: 780px; margin: 0 auto clamp(44px, 5vw, 72px); text-align: center; }
.suja-bill-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-bill-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3.1vw, 42px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0; }
.suja-bill-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.72; color: var(--eco-text, #475569); margin: 18px auto 0; max-width: 660px; }

/* ---- Connected rail ---- */
.suja-bill-rail { position: relative; display: flex; align-items: stretch; gap: 18px; }
/* Horizontal track threading the node centres (node centre sits at 8px) */
.suja-bill-track {
  position: absolute; top: 8px; left: calc(50% / var(--n, 5)); right: calc(50% / var(--n, 5));
  height: 2px; transform: translateY(-50%); z-index: 0; border-radius: 2px;
  background: rgba(8,145,178,0.16);
}
.suja-bill-track-fill {
  position: absolute; inset: 0; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, rgba(8,145,178,0.75), rgba(6,182,212,0.55));
}
.suja-bill-showcase.is-in .suja-bill-track-fill { width: 100%; transition: width 1.1s cubic-bezier(.22,.61,.36,1) .15s; }

.suja-bill-stage { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.suja-bill-node {
  width: 16px; height: 16px; border-radius: 50%; flex: none; position: relative; z-index: 2;
  background: var(--eco-teal, #0891b2);
  box-shadow: 0 0 0 5px rgba(8,145,178,0.12), 0 0 0 1px rgba(255,255,255,0.7) inset;
  margin: 0 0 26px;
  transition: transform .3s ease, box-shadow .3s ease;
}
/* Forward chevron riding the track between stages */
.suja-bill-chev {
  position: absolute; top: 8px; right: -11px; width: 8px; height: 8px; z-index: 2;
  border-top: 2px solid rgba(8,145,178,0.5); border-right: 2px solid rgba(8,145,178,0.5);
  transform: translateY(-50%) rotate(45deg);
}

/* ---- Stage card ---- */
.suja-bill-card {
  position: relative; overflow: hidden; isolation: isolate; width: 100%;
  flex: 1 1 auto; /* fill the stretched stage so all cards are even height */
  padding: 26px 22px 28px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.14) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 16px 36px -20px rgba(8,145,178,0.22), 0 6px 16px -12px rgba(12,30,53,0.10);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.suja-bill-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(125% 95% at 50% 0%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 55%);
}
.suja-bill-card > * { position: relative; z-index: 1; }
.suja-bill-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 54px; height: 54px; border-radius: 15px; color: var(--eco-teal, #0891b2); margin: 0 0 16px;
  background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease;
}
.suja-bill-icon i, .suja-bill-icon svg { width: 23px; height: 23px; font-size: 23px; color: currentColor; fill: currentColor; }
.suja-bill-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0 0 10px; }
.suja-bill-card-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 13.5px; line-height: 1.62; color: var(--eco-text, #475569); margin: 0; }

/* ---- Hover ---- */
.suja-bill-card:hover {
  transform: translateY(-6px); border-color: rgba(8,145,178,0.5);
  background: linear-gradient(135deg, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.2) 62%);
  box-shadow: 0 28px 52px -22px rgba(8,145,178,0.32), 0 10px 22px -14px rgba(12,30,53,0.16);
}
.suja-bill-card:hover .suja-bill-icon { transform: translateY(-2px) scale(1.07); background: rgba(8,145,178,0.16); }
.suja-bill-stage:hover .suja-bill-node { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(8,145,178,0.16), 0 0 0 1px rgba(255,255,255,0.7) inset; }

/* ---- Staggered entrance ---- */
.suja-bill-showcase.js-anim .suja-bill-stage { opacity: 0; transform: translateY(18px); }
.suja-bill-showcase.js-anim.is-in .suja-bill-stage {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* ---- Responsive: collapse rail to a wrapped card grid ---- */
@media (max-width: 1040px) {
  .suja-bill-rail { flex-wrap: wrap; gap: 16px; }
  .suja-bill-track, .suja-bill-node, .suja-bill-chev { display: none; }
  .suja-bill-stage { flex: 1 1 260px; }
}
@media (max-width: 600px) {
  .suja-bill-stage { flex: 1 1 100%; }
  .suja-bill-card { padding: 22px 18px 24px; }
}


/* ============================================================
   SUJA SUJASCRIBE  (suja-sujascribe, .suja-scribe-*)
   Centred AI product identity + "Core Capabilities" label + 2×2 capability
   cards with a gradient top-rail that draws in on scroll.
   ============================================================ */
.suja-scribe-showcase { background: transparent; padding: clamp(64px, 7vw, 112px) 24px; }
.suja-scribe-container { max-width: 1120px; margin: 0 auto; }

.suja-scribe-head { max-width: 760px; margin: 0 auto; text-align: center; }
.suja-scribe-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-scribe-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--eco-teal, #0891b2); box-shadow: 0 0 0 4px rgba(8,145,178,0.14); animation: sujaScribePulse 2.4s ease-in-out infinite; }
@keyframes sujaScribePulse { 0%,100% { box-shadow: 0 0 0 3px rgba(8,145,178,0.16); } 50% { box-shadow: 0 0 0 6px rgba(8,145,178,0.05); } }
.suja-scribe-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3.1vw, 42px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0; }
.suja-scribe-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.72; color: var(--eco-text, #475569); margin: 18px auto 0; max-width: 640px; }

.suja-scribe-grouprow { display: flex; justify-content: center; margin: clamp(36px, 4vw, 56px) 0 22px; }
.suja-scribe-group { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--eco-teal, #0891b2); padding: 7px 16px; border-radius: 999px; background: rgba(8,145,178,0.08); border: 1px solid rgba(8,145,178,0.18); }

.suja-scribe-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.suja-scribe-card {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 30px 28px 30px; border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.15) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 16px 36px -20px rgba(8,145,178,0.22), 0 6px 16px -12px rgba(12,30,53,0.10);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.suja-scribe-card-rail { position: absolute; top: 0; left: 0; height: 3px; width: 0; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, var(--eco-teal, #0891b2), #06b6d4); z-index: 2; }
.suja-scribe-showcase.is-in .suja-scribe-card-rail { width: 100%; transition: width .8s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i, 0) * 110ms + .1s); }
.suja-scribe-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 56px; height: 56px; border-radius: 16px; color: var(--eco-teal, #0891b2); margin: 0 0 18px;
  background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease;
}
.suja-scribe-icon i, .suja-scribe-icon svg { width: 24px; height: 24px; font-size: 24px; color: currentColor; fill: currentColor; }
.suja-scribe-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 19px; font-weight: 700; line-height: 1.28; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0 0 10px; }
.suja-scribe-card-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 14.5px; line-height: 1.66; color: var(--eco-text, #475569); margin: 0; }
.suja-scribe-card:hover { transform: translateY(-6px); border-color: rgba(8,145,178,0.5); background: linear-gradient(135deg, rgba(255,255,255,0.54) 0%, rgba(255,255,255,0.2) 62%); box-shadow: 0 28px 52px -22px rgba(8,145,178,0.32), 0 10px 22px -14px rgba(12,30,53,0.16); }
.suja-scribe-card:hover .suja-scribe-icon { transform: translateY(-2px) scale(1.07); background: rgba(8,145,178,0.16); }

.suja-scribe-showcase.js-anim .suja-scribe-card { opacity: 0; transform: translateY(18px); }
.suja-scribe-showcase.js-anim.is-in .suja-scribe-card { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i, 0) * 90ms); }

@media (max-width: 780px) {
  .suja-scribe-grid { grid-template-columns: 1fr; gap: 14px; }
  .suja-scribe-card { padding: 26px 22px; }
}


/* ============================================================
   SUJA MOBILE ENGAGEMENT  (suja-mobile-app, .suja-mob-*)
   Split: a pure-CSS phone mockup on the left beside a heading + a vertical
   stack of feature rows on the right.
   ============================================================ */
.suja-mob-showcase { background: transparent; padding: clamp(64px, 7vw, 112px) 24px; }
.suja-mob-container { max-width: 1200px; margin: 0 auto; }
.suja-mob-inner { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(32px, 5vw, 72px); align-items: center; }

/* Phone mockup */
.suja-mob-visual { display: flex; justify-content: center; }
.suja-mob-phone {
  position: relative; width: 260px; height: 520px; border-radius: 40px; padding: 12px;
  background: linear-gradient(150deg, #0c1e35 0%, #17324f 100%);
  box-shadow: 0 40px 80px -30px rgba(8,145,178,0.4), 0 14px 30px -18px rgba(12,30,53,0.5), inset 0 0 0 2px rgba(255,255,255,0.06);
  animation: sujaMobFloat 6s ease-in-out infinite;
}
@keyframes sujaMobFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.suja-mob-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 96px; height: 20px; border-radius: 0 0 14px 14px; background: #0c1e35; z-index: 3; }
.suja-mob-screen { position: relative; height: 100%; border-radius: 30px; overflow: hidden; padding: 40px 16px 18px; background: linear-gradient(170deg, #eef6fb 0%, #dcecf6 100%); display: flex; flex-direction: column; gap: 12px; }
/* Screenshot crossfade slideshow. */
.suja-mob-screen.has-shots { padding: 0; background: transparent; }
.suja-mob-shots { position: absolute; inset: 0; }
.suja-mob-shots .suja-mob-shot { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; opacity: 0; z-index: 0; transition: opacity 1.1s ease-in-out; will-change: opacity; }
.suja-mob-shots .suja-mob-shot.is-shown { opacity: 1; z-index: 1; }
.suja-mob-shots .suja-mob-shot.is-incoming { opacity: 1; z-index: 2; }
/* "Bare" mode: the uploaded screenshots already include a phone mockup, so drop
   this widget's device frame (bezel, notch, shadow) and show the full image
   uncropped (object-fit: contain). The gentle float is kept. */
.suja-mob-phone--bare { background: transparent; padding: 0; box-shadow: none; border-radius: 0; }
.suja-mob-phone--bare .suja-mob-notch { display: none; }
.suja-mob-phone--bare .suja-mob-screen { border-radius: 0; background: transparent; overflow: visible; }
.suja-mob-phone--bare .suja-mob-shots .suja-mob-shot { object-fit: contain; }
.suja-mob-screen-top { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 4px; }
.suja-mob-screen-brand { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); }
.suja-mob-screen-dots { display: inline-flex; gap: 4px; }
.suja-mob-screen-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(8,145,178,0.4); }
.suja-mob-screen-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.9); box-shadow: 0 6px 14px -10px rgba(12,30,53,0.3); }
.suja-mob-screen-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: 10px; color: #fff; background: linear-gradient(140deg, var(--eco-teal, #0891b2), #06b6d4); }
.suja-mob-screen-ic i, .suja-mob-screen-ic svg { width: 15px; height: 15px; font-size: 15px; color: #fff; fill: #fff; }
.suja-mob-screen-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.suja-mob-screen-lines b { display: block; height: 8px; width: 72%; border-radius: 5px; background: rgba(12,30,53,0.22); }
.suja-mob-screen-lines i { display: block; height: 6px; width: 48%; border-radius: 5px; background: rgba(12,30,53,0.12); }

/* Content + feature rows */
.suja-mob-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-mob-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(26px, 2.9vw, 40px); line-height: 1.16; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0; }
.suja-mob-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.72; color: var(--eco-text, #475569); margin: 16px 0 0; }
.suja-mob-list { margin: clamp(24px, 3vw, 34px) 0 0; display: flex; flex-direction: column; gap: 14px; }
.suja-mob-feat { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 16px; background: linear-gradient(135deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.16) 70%); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 12px 28px -20px rgba(8,145,178,0.2); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.suja-mob-feat-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: none; border-radius: 13px; color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16); transition: transform .3s ease, background .3s ease; }
.suja-mob-feat-icon i, .suja-mob-feat-icon svg { width: 20px; height: 20px; font-size: 20px; color: currentColor; fill: currentColor; }
.suja-mob-feat-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0 0 5px; }
.suja-mob-feat-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 14px; line-height: 1.62; color: var(--eco-text, #475569); margin: 0; }
.suja-mob-feat:hover { transform: translateX(4px); border-color: rgba(8,145,178,0.4); box-shadow: 0 20px 40px -24px rgba(8,145,178,0.3); }
.suja-mob-feat:hover .suja-mob-feat-icon { transform: scale(1.08); background: rgba(8,145,178,0.16); }

.suja-mob-showcase.js-anim .suja-mob-feat { opacity: 0; transform: translateY(16px); }
.suja-mob-showcase.js-anim.is-in .suja-mob-feat { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i, 0) * 90ms); }
.suja-mob-showcase.js-anim .suja-mob-visual { opacity: 0; transform: translateY(20px); }
.suja-mob-showcase.js-anim.is-in .suja-mob-visual { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }

@media (max-width: 960px) {
  .suja-mob-inner { grid-template-columns: 1fr; gap: 40px; }
  .suja-mob-content { order: 2; }
  .suja-mob-visual { order: 1; }
}


/* ============================================================
   SUJA SUPPORT SERVICES  (suja-support, .suja-sup-*)
   Compact support band: centred intro + a row of channel cards.
   ============================================================ */
.suja-sup-showcase { background: transparent; padding: clamp(56px, 6vw, 96px) 24px; }
.suja-sup-container { max-width: 1080px; margin: 0 auto; }
.suja-sup-head { max-width: 700px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }
.suja-sup-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 14px; }
.suja-sup-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(26px, 2.9vw, 40px); line-height: 1.16; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0; }
.suja-sup-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.7; color: var(--eco-text, #475569); margin: 16px auto 0; max-width: 620px; }
.suja-sup-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.suja-sup-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  padding: 26px 18px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.16) 70%);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 14px 30px -22px rgba(8,145,178,0.2);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.suja-sup-ic { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16); transition: transform .3s ease, background .3s ease; }
.suja-sup-ic i, .suja-sup-ic svg { width: 22px; height: 22px; font-size: 22px; color: currentColor; fill: currentColor; }
.suja-sup-label { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); }
.suja-sup-card:hover { transform: translateY(-5px); border-color: rgba(8,145,178,0.4); box-shadow: 0 24px 44px -26px rgba(8,145,178,0.32); }
.suja-sup-card:hover .suja-sup-ic { transform: scale(1.08); background: rgba(8,145,178,0.16); }

.suja-sup-showcase.js-anim .suja-sup-card { opacity: 0; transform: translateY(16px); }
.suja-sup-showcase.js-anim.is-in .suja-sup-card { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i, 0) * 80ms); }

@media (max-width: 780px) { .suja-sup-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .suja-sup-grid { grid-template-columns: 1fr; } }


/* ============================================================
   SUJA 12-IN-1 PLATFORM SCROLL  (.suja-plsc-*)
   Benefits-style interaction: a sticky left column (eyebrow + heading +
   cross-fading active image) beside a right internal-scroll list of all 12
   platforms. The item nearest the scroll centre becomes active and swaps the
   image. Hidden scrollbar + top/bottom fade overlays for a premium feel.
   ============================================================ */
.suja-plsc-showcase { background: transparent; padding: clamp(64px, 7vw, 112px) 24px; }
.suja-plsc-container { max-width: 1240px; margin: 0 auto; }
/* Sticky heading: eyebrow + heading (+ description) sit above the image inside
   the sticky left column, so they stay in view while the list scrolls past —
   the same behaviour as the Why CareAxes section. */
.suja-plsc-head { margin: 0 0 clamp(22px, 2.5vw, 32px); }
.suja-plsc-left .suja-plat-eyebrow { display: inline-block; max-width: none; margin: 0 0 14px; }
.suja-plsc-left .suja-plat-heading { display: block; max-width: none; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.16; margin: 0; }
.suja-plsc-gdesc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.7; color: var(--eco-text, #475569); margin: 14px 0 0; max-width: 480px; }

.suja-plsc-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(28px, 4vw, 60px); align-items: start; }

/* Left: sticky image (page-scroll pins it while the list scrolls past).
   Height reduced ~40%; image is contained & centred (no crop/distortion). */
.suja-plsc-left { position: sticky; top: clamp(88px, 14vh, 128px); align-self: start; }
.suja-plsc-visual { position: relative; height: clamp(276px, 43vh, 384px); border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,0.55); background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.14)); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 34px 66px -32px rgba(8,145,178,0.42), 0 12px 26px -18px rgba(12,30,53,0.22); }
.suja-plsc-visual-inner { position: absolute; inset: 0; }
.suja-plsc-figure { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; padding: 0; opacity: 0; transform: scale(1.045); transition: opacity .6s ease, transform .85s cubic-bezier(.22,.61,.36,1); }
.suja-plsc-figure.is-active { opacity: 1; transform: none; }
/* Full-bleed: the 1204x768 images match the frame's 1.57:1 ratio, so cover
   fills the whole frame edge-to-edge with essentially no crop. */
.suja-plsc-figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; margin: 0; }
.suja-plsc-visual-glass { position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: 24px; background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,0.34), rgba(255,255,255,0) 55%); }

/* Primary Modules (.suja-plsc-modx) only: the module screenshots vary in
   height, so a fixed-height frame leaves empty gaps above/below each image.
   Size the box to the ACTIVE screenshot instead — the active figure sits in
   normal flow and defines the height; the rest stay absolutely stacked for the
   cross-fade. Removes the gaps on both CareAxes and CureAxes. */
.suja-plsc-modx .suja-plsc-visual { height: auto; }
.suja-plsc-modx .suja-plsc-visual-inner { position: relative; }
.suja-plsc-modx .suja-plsc-figure.is-active { position: relative; }
.suja-plsc-modx .suja-plsc-figure img { height: auto; object-fit: contain; }

/* Right: list in normal page flow (Benefits-style) */
.suja-plsc-right { position: relative; }
.suja-plsc-scroll { display: flex; flex-direction: column; gap: clamp(14px, 2vh, 26px); }
.suja-plsc-item {
  display: flex; gap: 16px; align-items: flex-start; width: 100%; text-align: left;
  appearance: none; -webkit-appearance: none; font-family: inherit; color: inherit; cursor: pointer;
  margin: 0; padding: 18px 22px; border-radius: 18px; border: 1px solid transparent; background: transparent;
  opacity: 0.5; transition: opacity .4s ease, background .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s ease;
}
.suja-plsc-item-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; border-radius: 14px; color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16); transition: transform .4s ease, background .4s ease; }
.suja-plsc-item-icon i, .suja-plsc-item-icon svg { width: 21px; height: 21px; font-size: 21px; color: currentColor; fill: currentColor; }
.suja-plsc-item-body { display: block; flex: 1; min-width: 0; }
.suja-plsc-item-title { display: block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0; }
.suja-plsc-accent { display: block; width: 0; height: 3px; border-radius: 3px; background: var(--eco-teal, #0891b2); margin: 9px 0 0; transition: width .5s cubic-bezier(.22,.61,.36,1); }
.suja-plsc-item-desc { display: block; font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 14px; line-height: 1.62; color: var(--eco-text, #475569); margin: 9px 0 0; }
.suja-plsc-item:hover { opacity: 0.85; }
.suja-plsc-item.is-active { opacity: 1; background: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0.18)); border-color: rgba(8,145,178,0.28); box-shadow: 0 20px 44px -26px rgba(8,145,178,0.4); }
.suja-plsc-item.is-active .suja-plsc-item-icon { background: rgba(8,145,178,0.16); transform: scale(1.05); }
.suja-plsc-item.is-active .suja-plsc-accent { width: 46px; }

/* Fade overlays not used in page-scroll mode */
.suja-plsc-fade { display: none; }

/* ---- Image controls: counter (with progress ring) + play/pause ---- */
.suja-plsc-controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; pointer-events: none; }
.suja-plsc-controls > * { pointer-events: auto; }
.suja-plsc-counter { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(12,30,53,0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.suja-plsc-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.suja-plsc-ring-bg { fill: none; stroke: rgba(255,255,255,0.25); stroke-width: 3; }
.suja-plsc-ring-fg { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 126; stroke-dashoffset: 126; }
.suja-plsc-showcase.is-playing .suja-plsc-ring-fg { animation: sujaPlscRing var(--plsc-autoplay, 10s) linear infinite; }
@keyframes sujaPlscRing { from { stroke-dashoffset: 126; } to { stroke-dashoffset: 0; } }
.suja-plsc-count { position: relative; z-index: 1; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; color: #fff; letter-spacing: 0.02em; }
.suja-plsc-count .suja-plsc-cur { font-size: 14px; }
.suja-plsc-count .suja-plsc-sep { opacity: 0.6; margin: 0 1px; }
.suja-plsc-playpause { width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: rgba(12,30,53,0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; transition: background .25s ease, transform .25s ease; }
.suja-plsc-playpause:hover { background: rgba(12,30,53,0.66); transform: scale(1.06); }
.suja-plsc-playpause svg { width: 20px; height: 20px; }
.suja-plsc-playpause svg rect, .suja-plsc-playpause svg path { fill: #fff; }
.suja-plsc-playpause .suja-plsc-ic-pause { display: block; }
.suja-plsc-playpause .suja-plsc-ic-play { display: none; }
.suja-plsc-showcase.is-paused .suja-plsc-playpause .suja-plsc-ic-pause { display: none; }
.suja-plsc-showcase.is-paused .suja-plsc-playpause .suja-plsc-ic-play { display: block; }

/* ---- Per-item progress rail (fills over the rotation duration) ---- */
.suja-plsc-item { position: relative; padding-left: 30px; }
.suja-plsc-rail { position: absolute; left: 12px; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: rgba(8,145,178,0.16); overflow: hidden; }
.suja-plsc-rail-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; border-radius: 3px; background: var(--eco-teal, #0891b2); }
.suja-plsc-item.is-active .suja-plsc-rail { background: rgba(8,145,178,0.28); }
.suja-plsc-item.is-active .suja-plsc-rail-fill { height: 100%; }
.suja-plsc-showcase.is-playing .suja-plsc-item.is-active .suja-plsc-rail-fill { height: 0; animation: sujaPlscRail var(--plsc-autoplay, 10s) linear forwards; }
@keyframes sujaPlscRail { from { height: 0; } to { height: 100%; } }

/* ---- Dots below the image ---- */
/* Dots: the BUTTON is a 24px-tall tap target (WCAG 2.5.8 minimum); the
   visible 9px dot / 24px active pill is painted by ::before so the design
   is unchanged. Gap drops to 2px since each button is now 24px wide. */
.suja-plsc-dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; margin: 18px 0 0; }
.suja-plsc-dot { position: relative; width: 24px; height: 24px; min-width: 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: transparent; transition: width .3s ease; }
.suja-plsc-dot::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 9px; height: 9px; border-radius: 50%; background: rgba(8,145,178,0.22); transition: background .3s ease, width .3s ease, border-radius .3s ease; }
.suja-plsc-dot:hover::before { background: rgba(8,145,178,0.45); }
.suja-plsc-dot.is-active::before { width: 24px; border-radius: 5px; background: var(--eco-teal, #0891b2); }


/* ============================================================
   SUJA CTA LITE  (suja-cta-lite, .suja-ctal-*)
   Rounded tinted card: heading + description left, button right.
   ============================================================ */
.suja-ctal-showcase { background: transparent; padding: clamp(40px, 5vw, 84px) 24px; }
.suja-ctal-container { max-width: 1240px; margin: 0 auto; }
.suja-ctal-card {
  display: grid; grid-template-columns: 1fr auto; gap: clamp(28px, 4vw, 64px); align-items: center;
  padding: clamp(36px, 5vw, 68px) clamp(30px, 5vw, 72px);
  border-radius: 28px; background: #dbe8f1;
}
.suja-ctal-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0; max-width: 620px; }
.suja-ctal-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: var(--eco-text, #475569); margin: 16px 0 0; max-width: 560px; }
.suja-ctal-action { display: flex; justify-content: flex-end; }
.suja-ctal-btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-weight: 700; font-size: clamp(15px, 1.15vw, 18px);
  color: #fff; background: var(--eco-teal, #0891b2); padding: 16px 34px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 16px 30px -14px rgba(8,145,178,0.5); transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.suja-ctal-btn:hover { transform: translateY(-2px); background: #0a7fa0; box-shadow: 0 22px 42px -14px rgba(8,145,178,0.6); }
@media (max-width: 760px) {
  .suja-ctal-card { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .suja-ctal-action { justify-content: flex-start; }
}


/* ============================================================
   SUJA FORM PAGE  (suja-form-page, .suja-fp-*)
   Contact (split: form + info) / Request-a-Demo (centered form).
   ============================================================ */
.suja-fp-showcase { background: transparent; padding: clamp(48px, 6vw, 96px) 24px; }
.suja-fp-container { max-width: 1240px; margin: 0 auto; }
.suja-fp-head { text-align: center; max-width: 720px; margin: 0 auto clamp(32px, 4vw, 52px); }
.suja-fp-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 14px; }
.suja-fp-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0; }
.suja-fp-intro { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.7; color: var(--eco-text, #475569); margin: 16px auto 0; max-width: 620px; }

.suja-fp-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(24px, 3.5vw, 52px); align-items: start; }
.suja-fp-showcase.is-centered .suja-fp-grid { grid-template-columns: 1fr; max-width: 1040px; margin: 0 auto; }

/* Form card */
.suja-fp-formcard {
  background: #fff; border: 1px solid rgba(15,23,42,0.06); border-radius: 22px;
  padding: clamp(20px, 3vw, 34px);
  box-shadow: 0 30px 60px -34px rgba(8,145,178,0.28), 0 10px 24px -18px rgba(12,30,53,0.14);
}
.suja-fp-form-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(19px, 1.7vw, 24px); font-weight: 700; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0 0 18px; }
.suja-fp-embed { position: relative; width: 100%; }
.suja-fp-embed iframe { width: 100% !important; max-width: 100%; border: 0; display: block; }
.suja-fp-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; min-height: inherit; height: 100%; padding: 40px 20px; border: 1.5px dashed rgba(8,145,178,0.3); border-radius: 16px; color: var(--eco-text, #475569); }
.suja-fp-placeholder .suja-fp-ph-ic { color: var(--eco-teal, #0891b2); }
.suja-fp-placeholder p { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-weight: 700; color: var(--eco-ink, #0c1e35); margin: 6px 0 0; }
.suja-fp-placeholder span { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 13.5px; }

/* Contact info column */
.suja-fp-info { display: flex; flex-direction: column; gap: 18px; }
.suja-fp-info-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0 0 4px; }
.suja-fp-office {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0.2));
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.55);
}
.suja-fp-office-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 12px; color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16); }
.suja-fp-office-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0 0 4px; }
.suja-fp-office-addr { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 13.5px; line-height: 1.55; color: var(--eco-text, #475569); margin: 0; }
.suja-fp-talk { margin-top: 6px; padding: 20px; border-radius: 16px; background: var(--eco-ink, #0c1e35); }
.suja-fp-talk-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 12px; }
.suja-fp-line { display: flex; align-items: center; gap: 10px; font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 14.5px; color: rgba(255,255,255,0.9); text-decoration: none; padding: 5px 0; transition: color .25s ease; }
.suja-fp-line span { display: inline-flex; color: var(--eco-teal, #22b8cf); }
.suja-fp-line:hover { color: #fff; }

@media (max-width: 900px) {
  .suja-fp-grid { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 900px) {
  .suja-plsc-grid { grid-template-columns: 1fr; gap: 26px; }
  .suja-plsc-left { position: static; }
  .suja-plsc-head { margin-bottom: 20px; }
  .suja-plsc-left .suja-plat-heading { max-width: none; }
  .suja-plsc-visual { height: clamp(220px, 34vh, 300px); }
}


/* ============================================================
   SUJA PRIMARY MODULES GRID  (.suja-modx-gridsec, non-scroll)
   All modules visible at once as a centred header + responsive grid of
   horizontal icon-left cards (distinct from the 12-in-1 vertical cards).
   Replaces the former scroll-pinned walkthrough.
   ============================================================ */
.suja-modx-gridsec { background: transparent; padding: clamp(64px, 7vw, 112px) 24px; }
.suja-modx-gridwrap { max-width: 1240px; margin: 0 auto; }
.suja-modx-ghead { max-width: 800px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.suja-modx-gridsec .suja-modx-eyebrow { display: inline-block; margin: 0 0 16px; }
.suja-modx-gridsec .suja-modx-heading { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.14; margin: 0; text-align: center; }
.suja-modx-gdesc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.72; color: var(--eco-text, #475569); margin: 18px auto 0; max-width: 680px; }
.suja-modx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.suja-modx-gcard {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px 22px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.15) 65%);
  -webkit-backdrop-filter: blur(16px) saturate(145%); backdrop-filter: blur(16px) saturate(145%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 14px 32px -22px rgba(8,145,178,0.22);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.suja-modx-gicon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; flex: none; border-radius: 14px; color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16); transition: transform .3s ease, background .3s ease; }
.suja-modx-gicon i, .suja-modx-gicon svg { width: 21px; height: 21px; font-size: 21px; color: currentColor; fill: currentColor; }
.suja-modx-gtext { flex: 1; min-width: 0; }
.suja-modx-gtitle { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 16.5px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0 0 6px; }
.suja-modx-gdesc-card { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 13.5px; line-height: 1.6; color: var(--eco-text, #475569); margin: 0; }
.suja-modx-gcard:hover { transform: translateY(-5px); border-color: rgba(8,145,178,0.5); background: linear-gradient(135deg, rgba(255,255,255,0.54) 0%, rgba(255,255,255,0.2) 65%); box-shadow: 0 24px 46px -24px rgba(8,145,178,0.32); }
.suja-modx-gcard:hover .suja-modx-gicon { transform: scale(1.08); background: rgba(8,145,178,0.16); }
.suja-modx-gridsec.js-anim .suja-modx-gcard { opacity: 0; transform: translateY(16px); }
.suja-modx-gridsec.js-anim.is-in .suja-modx-gcard { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i, 0) * 50ms); }
@media (max-width: 980px) { .suja-modx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .suja-modx-grid { grid-template-columns: 1fr; } }


/* ============================================================
   SUJA IMPLEMENTATION JOURNEY v2  (suja-implementation-journey, .suja-impx-*)
   Flowing connected workflow: five glass icon circles alternate above and
   below a central curved SVG connector (a faint dashed rail + a gradient
   flow that draws left→right on scroll, with chevrons animating along it).
   Each circle has a gradient accent ring, a number badge and a title.
   Desktop: alternating zigzag. Tablet: 3 + 2 level grid. Mobile: vertical
   rail. Fully drawn without JS.
   ============================================================ */
.suja-impx-showcase { background: transparent; padding: clamp(36px, 3.6vw, 58px) 24px; }
.suja-impx-container { max-width: 1240px; margin: 0 auto; }

.suja-impx-head { text-align: center; margin: 0 auto; max-width: 780px; }
.suja-impx-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-impx-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3.1vw, 42px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0; }

/* ---- Workflow stage ---- */
.suja-impx-flow-wrap {
  --flow-h: 400px; --stagger: 170ms; --circle: 104px; --ring-w: 5px;
  --top: 38%; --bot: 62%; /* vertical positions of the top/bottom circles; must match the SVG vertices in PHP */
  position: relative; height: var(--flow-h); margin-top: clamp(28px, 3.4vw, 52px);
}
.suja-impx-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }
.suja-impx-rail { stroke: rgba(12,30,53,0.18); stroke-width: 2; stroke-dasharray: 1 8; stroke-linecap: round; }
.suja-impx-flow { stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.suja-impx-arrow { stroke: var(--eco-teal, #0891b2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Steps grid overlaid on the SVG ---- */
.suja-impx-steps { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); }
.suja-impx-step { position: relative; }

/* Circle (gradient ring disc + glass inner + number badge) */
.suja-impx-circle {
  position: absolute; left: 50%; transform: translate(-50%, -50%);
  width: var(--circle); height: var(--circle);
}
.suja-impx-step.is-bottom .suja-impx-circle { top: var(--bot, 62%); }
.suja-impx-step.is-top    .suja-impx-circle { top: var(--top, 38%); }
.suja-impx-circle::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 0;
  background: var(--ring, linear-gradient(135deg, #0891b2, #22d3ee));
  box-shadow: 0 14px 30px -12px rgba(8,145,178,0.45);
  transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, filter .3s ease;
}
.suja-impx-circle-inner {
  position: absolute; inset: var(--ring-w); z-index: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.72) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.9), 0 10px 22px -12px rgba(12,30,53,0.28);
}
.suja-impx-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--eco-teal, #0891b2); transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.suja-impx-icon i, .suja-impx-icon svg { width: calc(var(--circle) * 0.3); height: calc(var(--circle) * 0.3); font-size: calc(var(--circle) * 0.3); color: currentColor; fill: currentColor; line-height: 1; }
/* Title label, placed clear of the circle on the outer side */
.suja-impx-label { position: absolute; left: 50%; transform: translateX(-50%); width: min(220px, 90%); text-align: center; }
.suja-impx-step.is-bottom .suja-impx-label { top: calc(var(--bot, 62%) + var(--circle) / 2 + 16px); }
.suja-impx-step.is-top    .suja-impx-label { bottom: calc(var(--bot, 62%) + var(--circle) / 2 + 16px); }
.suja-impx-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 15.5px; font-weight: 700; line-height: 1.34; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0; }

/* ---- Hover ---- */
.suja-impx-step:hover .suja-impx-circle { z-index: 3; }
.suja-impx-step:hover .suja-impx-circle::before { box-shadow: 0 18px 40px -12px rgba(8,145,178,0.6), 0 0 0 6px rgba(8,145,178,0.10); filter: saturate(1.15); }
.suja-impx-step:hover .suja-impx-circle-inner { transform: scale(1.06); }
.suja-impx-step:hover .suja-impx-icon { transform: translateY(-3px) scale(1.06); }
.suja-impx-circle, .suja-impx-circle-inner { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.suja-impx-step:hover .suja-impx-circle { transform: translate(-50%, -50%) scale(1.05); }

/* ---- Scroll sequence. Base = finished state (no JS → fully drawn). ---- */
.suja-impx-showcase.js-anim .suja-impx-flow { stroke-dashoffset: 100; }
.suja-impx-showcase.js-anim .suja-impx-arrow { opacity: 0; }
.suja-impx-showcase.js-anim .suja-impx-circle { opacity: 0; }
.suja-impx-showcase.js-anim .suja-impx-circle::before { transform: rotate(-38deg); }
.suja-impx-showcase.js-anim .suja-impx-label { opacity: 0; transform: translateX(-50%) translateY(12px); }

.suja-impx-showcase.js-anim.is-in .suja-impx-flow {
  stroke-dashoffset: 0; transition: stroke-dashoffset 1.25s cubic-bezier(.4,0,.2,1);
}
.suja-impx-showcase.js-anim.is-in .suja-impx-arrow {
  opacity: 1; transition: opacity .4s ease; transition-delay: calc(var(--i, 0) * var(--stagger, 170ms) + 320ms);
}
.suja-impx-showcase.js-anim.is-in .suja-impx-circle {
  opacity: 1; transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * var(--stagger, 170ms));
}
.suja-impx-showcase.js-anim.is-in .suja-impx-circle::before {
  transform: rotate(0deg); transition: transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * var(--stagger, 170ms));
}
.suja-impx-showcase.js-anim.is-in .suja-impx-label {
  opacity: 1; transform: translateX(-50%) translateY(0);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * var(--stagger, 170ms) + 120ms);
}

/* ---- Tablet: 3 + 2 level grid, no zigzag, straight rails behind rows ---- */
@media (max-width: 1024px) {
  .suja-impx-flow-wrap { height: auto; }
  .suja-impx-svg { display: none; }
  .suja-impx-steps { position: static; grid-template-columns: repeat(3, 1fr); gap: 40px 20px; }
  .suja-impx-step { display: flex; flex-direction: column; align-items: center; padding-top: 20px; }
  .suja-impx-circle { position: relative; left: auto; top: auto !important; transform: none; margin: 0 0 18px; }
  .suja-impx-step:hover .suja-impx-circle { transform: scale(1.05); }
  .suja-impx-label { position: static; transform: none; width: min(240px, 100%); }
  .suja-impx-step.is-top .suja-impx-label,
  .suja-impx-step.is-bottom .suja-impx-label { top: auto; bottom: auto; }
  .suja-impx-showcase.js-anim .suja-impx-label,
  .suja-impx-showcase.js-anim.is-in .suja-impx-label { transform: none; }
  .suja-impx-showcase.js-anim.is-in .suja-impx-label { transform: none; }
}

/* ---- Mobile: vertical rail on the left ---- */
@media (max-width: 640px) {
  .suja-impx-steps { grid-template-columns: 1fr; gap: 0; position: relative; }
  .suja-impx-steps::before { content: ""; position: absolute; left: 33px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: repeating-linear-gradient(to bottom, rgba(12,30,53,0.2) 0 2px, transparent 2px 10px); }
  .suja-impx-step { flex-direction: row; align-items: center; gap: 18px; padding: 14px 0; }
  .suja-impx-circle { --circle: 68px; margin: 0; flex: none; }
  .suja-impx-label { text-align: left; width: auto; }
  .suja-impx-title { font-size: 15px; }
}

/* ============================================================
   SUJA AI PRODUCT SUITE  (suja-ai-suite widget, .suja-aix-*)
   Two-column ecosystem showcase: left content + secondary CTA; right a glass
   "constellation" — a central Suja AI hub ringed by eight floating app cards
   joined by animated connector lines over a soft blue radial glow.
   Desktop 40/60. Tablet: content above ring. Mobile: content, hub, 2-col grid.
   Fully drawn (static) without JS.
   ============================================================ */
.suja-aix-showcase { position: relative; overflow: hidden; background: transparent; padding: clamp(40px, 4vw, 64px) 24px; }
.suja-aix-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 2fr 3fr; gap: clamp(32px, 4vw, 68px); align-items: center; }

/* ---- Left content ---- */
.suja-aix-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-aix-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3vw, 42px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0 0 18px; }
.suja-aix-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.72; color: var(--eco-text, #475569); margin: 0; max-width: 46ch; }

/* Secondary button (mirrors .suja-hero-btn-outline) */
.suja-aix-cta {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 28px;
  padding: 13px 24px; border-radius: 10px;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-weight: 700; font-size: 15px; line-height: 1.2;
  color: var(--eco-ink, #0c1e35); text-decoration: none;
  background: transparent; border: 1.5px solid rgba(12,30,53,0.18);
  transition: background .25s ease, border-color .25s ease, gap .25s ease, transform .25s ease;
}
.suja-aix-cta svg { transition: transform .25s ease; }
.suja-aix-cta:hover { background: rgba(8,145,178,0.07); border-color: rgba(8,145,178,0.4); gap: 13px; }
.suja-aix-cta:hover svg { transform: translateX(3px); }

/* ---- Right visual stage ---- */
.suja-aix-visual { display: flex; justify-content: center; }
.suja-aix-stage {
  --stagger: 130ms; --glow: rgba(8,145,178,0.16);
  position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 1; margin: 0 auto;
}
/* Soft blue radial glow + a fainter blurred accent behind the ring. */
.suja-aix-stage::before {
  content: ""; position: absolute; inset: 6%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, var(--glow) 0%, rgba(8,145,178,0) 68%);
}
.suja-aix-stage::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 62%; height: 62%; transform: translate(-50%,-50%); z-index: 0; pointer-events: none;
  border-radius: 50%; border: 1px dashed rgba(8,145,178,0.18);
}

/* Connector lines */
.suja-aix-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.suja-aix-line { stroke: rgba(8,145,178,0.35); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }

/* Hub */
.suja-aix-hub {
  --hub-accent: #0891b2;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3;
  width: 34%; aspect-ratio: 1 / 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.28) 62%);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 24px 60px -20px rgba(8,145,178,0.45), inset 0 1px 3px rgba(255,255,255,0.9);
}
.suja-aix-hub::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, var(--hub-accent), rgba(56,189,248,0.7), var(--hub-accent), rgba(99,102,241,0.6), var(--hub-accent));
  opacity: 0.5; filter: blur(6px);
}
.suja-aix-hub-icon { display: inline-flex; color: var(--hub-accent); }
.suja-aix-hub-icon i, .suja-aix-hub-icon svg { width: clamp(24px, 3.4vw, 38px); height: clamp(24px, 3.4vw, 38px); font-size: clamp(24px, 3.4vw, 38px); color: currentColor; fill: currentColor; }
.suja-aix-hub-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(15px, 1.4vw, 19px); font-weight: 800; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); }

/* Orbiting nodes */
.suja-aix-nodes { position: absolute; inset: 0; z-index: 2; }
.suja-aix-node { position: absolute; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%,-50%); width: 116px; max-width: 30%; }
.suja-aix-float { will-change: transform; }
.suja-aix-card {
  --accent: #0891b2;
  position: relative; overflow: hidden; border-radius: 16px; padding: 14px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 62%);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 14px 30px -16px rgba(8,145,178,0.28), 0 6px 14px -10px rgba(12,30,53,0.12);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.suja-aix-card::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--accent), rgba(56,189,248,0.85)); opacity: 0.9;
}
.suja-aix-card-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 12px; color: var(--accent, #0891b2);
  background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease;
}
.suja-aix-card-icon i, .suja-aix-card-icon svg { width: 18px; height: 18px; font-size: 18px; color: currentColor; fill: currentColor; }
.suja-aix-card-name { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12.5px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); }

/* Hover */
.suja-aix-node:hover { z-index: 4; }
.suja-aix-node:hover .suja-aix-card {
  transform: translateY(-4px) scale(1.05);
  border-color: rgba(8,145,178,0.5);
  box-shadow: 0 24px 44px -18px rgba(8,145,178,0.42), 0 0 0 4px rgba(8,145,178,0.08);
}
.suja-aix-node:hover .suja-aix-card-icon { transform: scale(1.12); background: rgba(8,145,178,0.16); }

/* ---- Floating motion (starts after entrance via .is-floating) ---- */
@keyframes suja-aix-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.suja-aix-showcase.is-floating .suja-aix-float {
  animation: suja-aix-bob calc(5s + var(--i, 0) * 220ms) ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -370ms);
}

/* ---- Scroll entrance. Base = finished (no JS → fully drawn). ---- */
.suja-aix-showcase.js-anim .suja-aix-hub { opacity: 0; transform: translate(-50%,-50%) scale(0.7); }
.suja-aix-showcase.js-anim .suja-aix-line { stroke-dashoffset: 100; }
.suja-aix-showcase.js-anim .suja-aix-card { opacity: 0; transform: translateY(10px) scale(0.82); }

.suja-aix-showcase.js-anim.is-in .suja-aix-hub {
  opacity: 1; transform: translate(-50%,-50%) scale(1); transition: opacity .5s ease, transform .6s cubic-bezier(.34,1.4,.64,1);
}
.suja-aix-showcase.js-anim.is-in .suja-aix-line {
  stroke-dashoffset: 0; transition: stroke-dashoffset .55s ease; transition-delay: calc(0.35s + var(--i, 0) * var(--stagger, 130ms));
}
.suja-aix-showcase.js-anim.is-in .suja-aix-card {
  opacity: 1; transform: none; transition: opacity .45s ease, transform .5s cubic-bezier(.34,1.4,.64,1);
  transition-delay: calc(0.45s + var(--i, 0) * var(--stagger, 130ms));
}

/* ---- Tablet: content above, ring below ---- */
@media (max-width: 1024px) {
  .suja-aix-inner { grid-template-columns: 1fr; gap: 40px; }
  .suja-aix-content { text-align: center; }
  .suja-aix-desc { margin-left: auto; margin-right: auto; }
}

/* ---- Mobile: content, hub on top, 2-col card grid ---- */
@media (max-width: 640px) {
  .suja-aix-stage { max-width: none; aspect-ratio: auto; }
  .suja-aix-svg, .suja-aix-stage::after { display: none; }
  .suja-aix-hub { position: relative; left: auto; top: auto; transform: none; width: 148px; margin: 0 auto 26px; aspect-ratio: 1 / 1; }
  .suja-aix-showcase.js-anim.is-in .suja-aix-hub,
  .suja-aix-showcase.js-anim .suja-aix-hub { transform: none; }
  .suja-aix-nodes { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .suja-aix-node { position: static; left: auto; top: auto; transform: none; width: auto; max-width: none; }
  .suja-aix-card { flex-direction: row; justify-content: flex-start; text-align: left; padding: 14px; }
  .suja-aix-showcase.is-floating .suja-aix-float { animation: none; }
}

/* ============================================================
   CTA SECTION — pill tag + spacing (description removed)
   Glassmorphism pill above "Ready to Transform Your Hospital?" on the
   dark navy CTA. Grid gains a top margin now the description is gone.
   Used on both the Home page and the CareAxes HMIS page copy.
   ============================================================ */
/* Matches the site's ".suja-eyebrow" tags (e.g. "INSIGHTS & NEWS"):
   plain uppercase, letter-spaced teal text — no pill/badge chrome.
   Uses a brighter teal so it stays legible on the dark navy CTA. */
.suja-cta-pilltag-wrap { text-align: center; margin: 0 0 14px; }
.suja-cta-pilltag {
  display: inline-block;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #22d3ee;
}
.suja-cta .suja-cta-grid { margin-top: 44px; }

/* Hide the hero stats strip when a slide carries no stats (product pages
   like CureAxes omit them). :has() keeps it scoped to genuinely-empty strips. */
.suja-hero-stats:not(:has(.suja-hero-stat)) { display: none; }

/* ============================================================
   SUJA CHALLENGES  (suja-challenges widget, .suja-chl-*)
   Question-forward problem→solution section. Centred header above three
   equal-height glass cards: icon + category label, a prominent question
   (the pain point), then the CureAxes answer. Hover lift + staggered
   scroll entrance. Question-led hierarchy gives it its own identity.
   ============================================================ */
.suja-chl-showcase { background: transparent; padding: clamp(36px, 3.6vw, 58px) 24px; }
.suja-chl-container { max-width: 1240px; margin: 0 auto; }

.suja-chl-head { text-align: center; margin: 0 auto clamp(40px, 5vw, 60px); max-width: 780px; }
.suja-chl-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-chl-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3.1vw, 42px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0; }
.suja-chl-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.72; color: var(--eco-text, #475569); margin: 16px auto 0; max-width: 660px; }

.suja-chl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }

.suja-chl-card {
  position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  padding: 30px 28px 32px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.14) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 16px 36px -20px rgba(8,145,178,0.22), 0 6px 16px -12px rgba(12,30,53,0.10);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
/* Top accent bar — reads as the card's category colour. */
.suja-chl-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; z-index: 1; background: var(--eco-teal, #0891b2); }
.suja-chl-card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 55%);
}
.suja-chl-card > * { position: relative; z-index: 1; }

.suja-chl-card-top { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; }
.suja-chl-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 54px; height: 54px; border-radius: 15px; color: var(--eco-teal, #0891b2);
  background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease;
}
.suja-chl-icon i, .suja-chl-icon svg { width: 24px; height: 24px; font-size: 24px; color: currentColor; fill: currentColor; }
.suja-chl-cat { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eco-teal, #0891b2); }

.suja-chl-q { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(19px, 1.55vw, 22px); font-weight: 700; line-height: 1.32; letter-spacing: -0.015em; color: var(--eco-ink, #0c1e35); margin: 0 0 14px; }
.suja-chl-a { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 15px; line-height: 1.7; color: var(--eco-text, #475569); margin: 0; }

/* Hover */
.suja-chl-card:hover {
  transform: translateY(-6px);
  border-color: rgba(8,145,178,0.5);
  background: linear-gradient(135deg, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.2) 62%);
  box-shadow: 0 28px 52px -22px rgba(8,145,178,0.32), 0 10px 22px -14px rgba(12,30,53,0.16);
}
.suja-chl-card:hover .suja-chl-icon { transform: translateY(-2px) scale(1.07); background: rgba(8,145,178,0.16); }

/* Staggered entrance */
.suja-chl-showcase.js-anim .suja-chl-card { opacity: 0; transform: translateY(20px); }
.suja-chl-showcase.js-anim.is-in .suja-chl-card {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* Responsive: 3 → 1 column */
@media (max-width: 900px) {
  .suja-chl-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}

/* ---- Split variant: two cards per row, image left + text right ---- */
.suja-chl-showcase.is-split .suja-chl-grid { grid-template-columns: repeat(2, 1fr); max-width: none; margin: 0; }
.suja-chl-showcase.is-split .suja-chl-card { display: grid; grid-template-columns: minmax(150px, 36%) 1fr; gap: clamp(18px, 2vw, 28px); align-items: stretch; padding: 26px; }
.suja-chl-showcase.is-split .suja-chl-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.suja-chl-showcase.is-split .suja-chl-media {
  order: -1; margin: 0; align-self: stretch; min-height: 150px; border-radius: 16px; overflow: hidden;
  background: #dfe8f0; border: 1px solid rgba(15,23,42,0.06);
}
.suja-chl-showcase.is-split .suja-chl-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 980px) {
  .suja-chl-showcase.is-split .suja-chl-grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .suja-chl-showcase.is-split .suja-chl-card { grid-template-columns: 1fr; }
  .suja-chl-showcase.is-split .suja-chl-media { order: -1; align-self: auto; min-height: 0; aspect-ratio: 16 / 9; }
}
/* RCM "Revenue Challenges": images are placeholders — hide them and let the
   card text (icon + question + answer) fill the full width. Scoped to RCM. */
body.page-id-32281 .suja-chl-showcase.is-split .suja-chl-media { display: none; }
body.page-id-32281 .suja-chl-showcase.is-split .suja-chl-card { grid-template-columns: 1fr; }

/* ---- Category group-headers ---- */
.suja-chl-showcase.is-grouped .suja-chl-group { margin-top: clamp(34px, 4vw, 56px); }
.suja-chl-showcase.is-grouped .suja-chl-group:first-of-type { margin-top: 0; }
.suja-chl-grouphead {
  display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(18px, 2vw, 26px);
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); text-align: left;
}
.suja-chl-grouphead::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, rgba(8,145,178,0.35), rgba(8,145,178,0)); }
/* Grouped (no-image) card grid: 2 even columns */
.suja-chl-showcase.is-grouped .suja-chl-grid { grid-template-columns: repeat(2, 1fr); max-width: none; margin: 0; }
@media (max-width: 700px) { .suja-chl-showcase.is-grouped .suja-chl-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CUREAXES S3 — CORE CAPABILITIES  (.suja-cpg-*)  split header + 2x2 grid
   ============================================================ */
.suja-cpg-showcase { background: transparent; padding: clamp(36px, 3.6vw, 58px) 24px; }
.suja-cpg-container { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
.suja-cpg-head { position: sticky; top: 96px; }
.suja-cpg-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-cpg-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3vw, 40px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0; }
.suja-cpg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.suja-cpg-card {
  position: relative; overflow: hidden; isolation: isolate; padding: 26px 24px 28px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.14) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 16px 36px -20px rgba(8,145,178,0.22), 0 6px 16px -12px rgba(12,30,53,0.10);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.suja-cpg-card::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 55%); }
.suja-cpg-card > * { position: relative; z-index: 1; }
.suja-cpg-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 15px; margin: 0 0 16px; color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16); transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease; }
.suja-cpg-icon i, .suja-cpg-icon svg { width: 23px; height: 23px; font-size: 23px; color: currentColor; fill: currentColor; }
.suja-cpg-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0 0 10px; }
.suja-cpg-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 14px; line-height: 1.66; color: var(--eco-text, #475569); margin: 0; }
.suja-cpg-card:hover { transform: translateY(-6px); border-color: rgba(8,145,178,0.5); box-shadow: 0 28px 52px -22px rgba(8,145,178,0.32), 0 10px 22px -14px rgba(12,30,53,0.16); }
.suja-cpg-card:hover .suja-cpg-icon { transform: translateY(-2px) scale(1.07); background: rgba(8,145,178,0.16); }
.suja-cpg-showcase.js-anim .suja-cpg-card { opacity: 0; transform: translateY(20px); }
.suja-cpg-showcase.js-anim.is-in .suja-cpg-card { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i,0) * 90ms); }
@media (max-width: 980px) {
  .suja-cpg-container { grid-template-columns: 1fr; gap: 34px; }
  .suja-cpg-head { position: static; }
}
@media (max-width: 560px) { .suja-cpg-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CUREAXES S4 — PRIMARY MODULES  (.suja-mgd-*)  dense card grid
   ============================================================ */
.suja-mgd-showcase { background: transparent; padding: clamp(36px, 3.6vw, 58px) 24px; }
.suja-mgd-container { max-width: 1240px; margin: 0 auto; }
.suja-mgd-head { text-align: center; margin: 0 auto clamp(36px, 4vw, 52px); max-width: 780px; }
.suja-mgd-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-mgd-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3.1vw, 42px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0 0 14px; }
.suja-mgd-subline { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.7; color: var(--eco-text, #475569); margin: 0; }
.suja-mgd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.suja-mgd-card {
  position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: flex-start; gap: 15px; padding: 22px 20px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0.13) 62%);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 14px 30px -20px rgba(8,145,178,0.20), 0 5px 14px -12px rgba(12,30,53,0.10);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.suja-mgd-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border-radius: 13px; color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16); transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease; }
.suja-mgd-icon i, .suja-mgd-icon svg { width: 20px; height: 20px; font-size: 20px; color: currentColor; fill: currentColor; }
.suja-mgd-body { min-width: 0; }
.suja-mgd-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 15.5px; font-weight: 700; line-height: 1.28; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0 0 7px; }
.suja-mgd-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 13px; line-height: 1.6; color: var(--eco-text, #475569); margin: 0; }
.suja-mgd-card:hover { transform: translateY(-5px); border-color: rgba(8,145,178,0.5); box-shadow: 0 24px 44px -22px rgba(8,145,178,0.30), 0 8px 18px -14px rgba(12,30,53,0.14); }
.suja-mgd-card:hover .suja-mgd-icon { transform: translateY(-2px) scale(1.08); background: rgba(8,145,178,0.16); }
.suja-mgd-showcase.js-anim .suja-mgd-card { opacity: 0; transform: translateY(16px); }
.suja-mgd-showcase.js-anim.is-in .suja-mgd-card { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i,0) * 55ms); }
@media (max-width: 900px) { .suja-mgd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .suja-mgd-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CUREAXES S5 — SMART EMR SPECIALTIES  (.suja-emrs-*)  chip flow
   ============================================================ */
.suja-emrs-showcase { background: transparent; padding: clamp(36px, 3.6vw, 58px) 24px; }
.suja-emrs-container { max-width: 1080px; margin: 0 auto; }
.suja-emrs-head { text-align: center; margin: 0 auto; max-width: 760px; }
.suja-emrs-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-emrs-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3.1vw, 42px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0 0 16px; }
.suja-emrs-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.72; color: var(--eco-text, #475569); margin: 0 auto; max-width: 680px; }
.suja-emrs-sublabel { display: flex; align-items: center; justify-content: center; gap: 14px; margin: clamp(32px, 4vw, 48px) 0 24px; }
.suja-emrs-sublabel::before, .suja-emrs-sublabel::after { content: ""; height: 1px; width: 60px; background: linear-gradient(90deg, rgba(8,145,178,0), rgba(8,145,178,0.4)); }
.suja-emrs-sublabel::after { background: linear-gradient(90deg, rgba(8,145,178,0.4), rgba(8,145,178,0)); }
.suja-emrs-sublabel span { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--eco-muted, #64748b); }
.suja-emrs-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; }
.suja-emrs-chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 13px; border-radius: 999px;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 14px; font-weight: 600; color: var(--eco-ink, #0c1e35);
  background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.22) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 10px 24px -16px rgba(8,145,178,0.28), 0 4px 10px -8px rgba(12,30,53,0.12);
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
.suja-emrs-chip-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.12); }
.suja-emrs-chip-ic i, .suja-emrs-chip-ic svg { width: 13px; height: 13px; font-size: 13px; color: currentColor; fill: currentColor; }
.suja-emrs-chip:hover { transform: translateY(-3px); border-color: rgba(8,145,178,0.45); background: linear-gradient(135deg, rgba(255,255,255,0.66) 0%, rgba(255,255,255,0.34) 100%); box-shadow: 0 18px 34px -18px rgba(8,145,178,0.36); }
.suja-emrs-showcase.js-anim .suja-emrs-chip { opacity: 0; transform: translateY(12px) scale(0.96); }
.suja-emrs-showcase.js-anim.is-in .suja-emrs-chip { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s cubic-bezier(.34,1.4,.64,1); transition-delay: calc(var(--i,0) * 45ms); }

/* ============================================================
   CUREAXES S6 — INTEGRATIONS  (.suja-intl-*)  split header + right list
   ============================================================ */
.suja-intl-showcase { background: transparent; padding: clamp(36px, 3.6vw, 58px) 24px; }
.suja-intl-container { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
.suja-intl-head { position: sticky; top: 96px; }
.suja-intl-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-intl-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3vw, 40px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0; }
.suja-intl-list { display: flex; flex-direction: column; gap: 14px; }
.suja-intl-row {
  display: flex; align-items: flex-start; gap: 18px; padding: 22px 24px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0.13) 62%);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 14px 30px -20px rgba(8,145,178,0.20), 0 5px 14px -12px rgba(12,30,53,0.10);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.suja-intl-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 50px; height: 50px; border-radius: 14px; color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16); transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease; }
.suja-intl-icon i, .suja-intl-icon svg { width: 22px; height: 22px; font-size: 22px; color: currentColor; fill: currentColor; }
.suja-intl-body { min-width: 0; }
.suja-intl-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0 0 6px; }
.suja-intl-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 14.5px; line-height: 1.62; color: var(--eco-text, #475569); margin: 0; }
.suja-intl-row:hover { transform: translateX(4px); border-color: rgba(8,145,178,0.5); box-shadow: 0 22px 42px -22px rgba(8,145,178,0.30), 0 8px 18px -14px rgba(12,30,53,0.14); }
.suja-intl-row:hover .suja-intl-icon { transform: scale(1.08); background: rgba(8,145,178,0.16); }
.suja-intl-showcase.js-anim .suja-intl-row { opacity: 0; transform: translateY(16px); }
.suja-intl-showcase.js-anim.is-in .suja-intl-row { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i,0) * 80ms); }
@media (max-width: 980px) { .suja-intl-container { grid-template-columns: 1fr; gap: 34px; } .suja-intl-head { position: static; } }

/* ============================================================
   CUREAXES S7 — AI FEATURES  (.suja-aif-*)  gradient-ring card grid
   ============================================================ */
.suja-aif-showcase { position: relative; overflow: hidden; background: transparent; padding: clamp(36px, 3.6vw, 58px) 24px; }
.suja-aif-container { max-width: 1240px; margin: 0 auto; position: relative; z-index: 1; }
.suja-aif-head { text-align: center; margin: 0 auto clamp(38px, 4.5vw, 56px); max-width: 760px; }
.suja-aif-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-aif-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3.1vw, 42px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0; }
.suja-aif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.suja-aif-card {
  position: relative; overflow: hidden; isolation: isolate; height: 100%; padding: 28px 26px 30px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.15) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 16px 36px -20px rgba(8,145,178,0.22), 0 6px 16px -12px rgba(12,30,53,0.10);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.suja-aif-card::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 55%); }
.suja-aif-card > * { position: relative; z-index: 1; }
/* Gradient-ring icon — the AI identity cue. */
.suja-aif-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; margin: 0 0 18px; background: linear-gradient(135deg, #0891b2 0%, #22d3ee 100%); box-shadow: 0 12px 26px -12px rgba(8,145,178,0.5); }
.suja-aif-icon-in { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.suja-aif-icon-in i, .suja-aif-icon-in svg { width: 24px; height: 24px; font-size: 24px; color: #fff; fill: #fff; }
.suja-aif-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 17.5px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0 0 10px; }
.suja-aif-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 14.5px; line-height: 1.66; color: var(--eco-text, #475569); margin: 0; }
.suja-aif-card:hover { transform: translateY(-6px); border-color: rgba(8,145,178,0.5); box-shadow: 0 30px 54px -22px rgba(8,145,178,0.34), 0 10px 22px -14px rgba(12,30,53,0.16); }
.suja-aif-card:hover .suja-aif-icon { transform: translateY(-2px) scale(1.06); }
.suja-aif-icon { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.suja-aif-showcase.js-anim .suja-aif-card { opacity: 0; transform: translateY(20px); }
.suja-aif-showcase.js-anim.is-in .suja-aif-card { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i,0) * 80ms); }
@media (max-width: 980px) { .suja-aif-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .suja-aif-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CUREAXES S8 — WHY  (.suja-why-*)  split header + 2-col checklist
   ============================================================ */
.suja-why-showcase { background: transparent; padding: clamp(36px, 3.6vw, 58px) 24px; }
.suja-why-container { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
.suja-why-head { position: sticky; top: 96px; }
.suja-why-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-why-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3vw, 40px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0 0 18px; }
.suja-why-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.72; color: var(--eco-text, #475569); margin: 0; max-width: 46ch; }
.suja-why-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.suja-why-item {
  display: flex; align-items: center; gap: 13px; padding: 16px 18px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.16) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 10px 24px -18px rgba(8,145,178,0.24);
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, border-color .28s ease;
}
.suja-why-check { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: var(--eco-teal, #0891b2); box-shadow: 0 6px 14px -6px rgba(8,145,178,0.5); }
.suja-why-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.suja-why-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 14.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); }
.suja-why-itemdesc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 13px; line-height: 1.55; color: var(--eco-text, #475569); }
/* Items that carry a description read as a small card: top-aligned check +
   heavier title. Label-only items (e.g. CureAxes) stay compact/centred. */
.suja-why-item.has-desc { align-items: flex-start; padding: 18px 20px; }
.suja-why-item.has-desc .suja-why-check { margin-top: 1px; }
.suja-why-item.has-desc .suja-why-title { font-size: 15.5px; font-weight: 700; margin-bottom: 1px; }
.suja-why-item:hover { transform: translateY(-3px); border-color: rgba(8,145,178,0.45); box-shadow: 0 20px 36px -20px rgba(8,145,178,0.34); }
.suja-why-showcase.js-anim .suja-why-item { opacity: 0; transform: translateY(14px); }
.suja-why-showcase.js-anim.is-in .suja-why-item { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i,0) * 60ms); }
@media (max-width: 980px) { .suja-why-container { grid-template-columns: 1fr; gap: 34px; } .suja-why-head { position: static; } }
@media (max-width: 560px) { .suja-why-list { grid-template-columns: 1fr; } }

/* ============================================================
   CUREAXES S9 — PATIENT ENGAGEMENT  (.suja-eng-*)  image + content
   ============================================================ */
.suja-eng-showcase { background: transparent; padding: clamp(36px, 3.6vw, 58px) 24px; }
.suja-eng-container { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 4.5vw, 72px); align-items: center; }
.suja-eng-container.is-img-right .suja-eng-visual { order: 2; }
.suja-eng-visual { display: flex; justify-content: center; }
.suja-eng-media {
  margin: 0; width: 100%; max-width: 480px; overflow: hidden; border-radius: 24px; aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.12) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 28px 60px -24px rgba(8,145,178,0.30), 0 12px 26px -14px rgba(12,30,53,0.16);
  animation: suja-eng-float 6s ease-in-out infinite;
}
@keyframes suja-eng-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.suja-eng-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.suja-eng-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-eng-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3vw, 40px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0 0 clamp(24px, 3vw, 36px); }
.suja-eng-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.suja-eng-item { display: flex; align-items: flex-start; gap: 13px; }
.suja-eng-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 12px; color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16); transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease; }
.suja-eng-icon i, .suja-eng-icon svg { width: 19px; height: 19px; font-size: 19px; color: currentColor; fill: currentColor; }
.suja-eng-body { min-width: 0; }
.suja-eng-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 15.5px; font-weight: 700; line-height: 1.28; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0 0 5px; }
.suja-eng-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 13px; line-height: 1.6; color: var(--eco-text, #475569); margin: 0; }
.suja-eng-item:hover .suja-eng-icon { transform: translateY(-2px) scale(1.08); background: rgba(8,145,178,0.16); }
.suja-eng-showcase.js-anim .suja-eng-item { opacity: 0; transform: translateY(14px); }
.suja-eng-showcase.js-anim.is-in .suja-eng-item { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i,0) * 70ms); }
@media (max-width: 980px) {
  .suja-eng-container, .suja-eng-container.is-img-right { grid-template-columns: 1fr; gap: 40px; }
  .suja-eng-container.is-img-right .suja-eng-visual { order: 0; }
  .suja-eng-media { max-width: 380px; aspect-ratio: 16 / 12; }
}
@media (max-width: 560px) { .suja-eng-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CUREAXES S10 — BUSINESS IMPACT  (.suja-biz-*)  outcome card grid
   ============================================================ */
.suja-biz-showcase { background: transparent; padding: clamp(36px, 3.6vw, 58px) 24px; }
.suja-biz-container { max-width: 1240px; margin: 0 auto; }
.suja-biz-head { text-align: center; margin: 0 auto clamp(38px, 4.5vw, 56px); max-width: 760px; }
.suja-biz-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-biz-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3.1vw, 42px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0; }
.suja-biz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.suja-biz-card {
  position: relative; overflow: hidden; isolation: isolate; height: 100%; padding: 30px 26px 30px 30px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.14) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 16px 36px -20px rgba(8,145,178,0.22), 0 6px 16px -12px rgba(12,30,53,0.10);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
/* Left accent bar — the "impact / results" cue. */
.suja-biz-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 1; background: var(--eco-teal, #0891b2); }
.suja-biz-card > * { position: relative; z-index: 1; }
.suja-biz-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 15px; margin: 0 0 16px; color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16); transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease; }
.suja-biz-icon i, .suja-biz-icon svg { width: 23px; height: 23px; font-size: 23px; color: currentColor; fill: currentColor; }
.suja-biz-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 17.5px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0 0 10px; }
.suja-biz-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 14.5px; line-height: 1.66; color: var(--eco-text, #475569); margin: 0; }
.suja-biz-card:hover { transform: translateY(-6px); border-color: rgba(8,145,178,0.5); box-shadow: 0 28px 52px -22px rgba(8,145,178,0.32), 0 10px 22px -14px rgba(12,30,53,0.16); }
.suja-biz-card:hover .suja-biz-icon { transform: translateY(-2px) scale(1.07); background: rgba(8,145,178,0.16); }
.suja-biz-showcase.js-anim .suja-biz-card { opacity: 0; transform: translateY(20px); }
.suja-biz-showcase.js-anim.is-in .suja-biz-card { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i,0) * 80ms); }
@media (max-width: 980px) { .suja-biz-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .suja-biz-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CUREAXES S11 — DESIGNED FOR  (.suja-aud-*)  2x2 audience cards
   ============================================================ */
.suja-aud-showcase { background: transparent; padding: clamp(36px, 3.6vw, 58px) 24px; }
.suja-aud-container { max-width: 1120px; margin: 0 auto; }
.suja-aud-head { text-align: center; margin: 0 auto clamp(38px, 4.5vw, 54px); max-width: 720px; }
.suja-aud-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-aud-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3.1vw, 42px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0 0 14px; }
.suja-aud-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.7; color: var(--eco-text, #475569); margin: 0; }
.suja-aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.suja-aud-card {
  position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: flex-start; gap: 18px; padding: 28px 28px 30px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.14) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 16px 36px -20px rgba(8,145,178,0.22), 0 6px 16px -12px rgba(12,30,53,0.10);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.suja-aud-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; z-index: 1; background: var(--eco-teal, #0891b2); }
.suja-aud-card > * { position: relative; z-index: 1; }
.suja-aud-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 54px; height: 54px; border-radius: 15px; color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16); transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease; }
.suja-aud-icon i, .suja-aud-icon svg { width: 24px; height: 24px; font-size: 24px; color: currentColor; fill: currentColor; }
.suja-aud-body { min-width: 0; }
.suja-aud-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 18px; font-weight: 700; line-height: 1.28; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0 0 9px; }
.suja-aud-cdesc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 14.5px; line-height: 1.66; color: var(--eco-text, #475569); margin: 0; }
.suja-aud-card:hover { transform: translateY(-6px); border-color: rgba(8,145,178,0.5); box-shadow: 0 28px 52px -22px rgba(8,145,178,0.32), 0 10px 22px -14px rgba(12,30,53,0.16); }
.suja-aud-card:hover .suja-aud-icon { transform: translateY(-2px) scale(1.07); background: rgba(8,145,178,0.16); }
.suja-aud-showcase.js-anim .suja-aud-card { opacity: 0; transform: translateY(20px); }
.suja-aud-showcase.js-anim.is-in .suja-aud-card { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i,0) * 90ms); }
@media (max-width: 720px) { .suja-aud-grid { grid-template-columns: 1fr; } }

/* ============================================================
   GYNEYE — THE DEVICE  (suja-device-showcase widget, .suja-dev-*)
   MedTech device showcase: floating device image (soft glow) beside a
   content column with a grid of feature chips. Image side toggleable.
   ============================================================ */
.suja-dev-showcase { background: transparent; padding: clamp(36px, 3.6vw, 58px) 24px; }
.suja-dev-container { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 4.5vw, 72px); align-items: center; }
.suja-dev-container.is-img-right .suja-dev-visual { order: 2; }

/* ---- Device visual ---- */
.suja-dev-visual { position: relative; display: flex; justify-content: center; }
.suja-dev-visual::before {
  content: ""; position: absolute; inset: 8% 6%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(8,145,178,0.20) 0%, rgba(8,145,178,0) 68%);
  filter: blur(6px);
}
.suja-dev-media {
  position: relative; z-index: 1; margin: 0; width: 100%; max-width: 480px; overflow: hidden; border-radius: 24px; aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.12) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 28px 60px -24px rgba(8,145,178,0.30), 0 12px 26px -14px rgba(12,30,53,0.16);
  animation: suja-dev-float 6.5s ease-in-out infinite;
}
@keyframes suja-dev-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
.suja-dev-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Screens crossfade slideshow inside the device frame (like the CareAxes Mobile App section) */
.suja-dev-shots { position: absolute; inset: 0; }
.suja-dev-shots .suja-dev-shot { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; opacity: 0; z-index: 0; transition: opacity 1.1s ease-in-out; will-change: opacity; }
.suja-dev-shots .suja-dev-shot.is-shown { opacity: 1; z-index: 1; }
.suja-dev-shots .suja-dev-shot.is-incoming { opacity: 1; z-index: 2; }

/* ---- Content ---- */
.suja-dev-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-dev-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3vw, 40px); line-height: 1.16; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0 0 18px; }
.suja-dev-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.72; color: var(--eco-text, #475569); margin: 0 0 clamp(22px, 2.6vw, 32px); max-width: 52ch; }

/* ---- Feature chips ---- */
.suja-dev-features { display: flex; flex-wrap: wrap; gap: 11px; }
.suja-dev-chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 999px;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 13.5px; font-weight: 600; color: var(--eco-ink, #0c1e35);
  background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.22) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 10px 24px -16px rgba(8,145,178,0.28), 0 4px 10px -8px rgba(12,30,53,0.12);
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
.suja-dev-chip-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 9px; color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.12); }
.suja-dev-chip-ic i, .suja-dev-chip-ic svg { width: 14px; height: 14px; font-size: 14px; color: currentColor; fill: currentColor; }
.suja-dev-chip:hover { transform: translateY(-3px); border-color: rgba(8,145,178,0.45); background: linear-gradient(135deg, rgba(255,255,255,0.66) 0%, rgba(255,255,255,0.34) 100%); box-shadow: 0 18px 34px -18px rgba(8,145,178,0.36); }

.suja-dev-showcase.js-anim .suja-dev-chip { opacity: 0; transform: translateY(12px) scale(0.96); }
.suja-dev-showcase.js-anim.is-in .suja-dev-chip { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s cubic-bezier(.34,1.4,.64,1); transition-delay: calc(var(--i,0) * 60ms); }

@media (max-width: 980px) {
  .suja-dev-container, .suja-dev-container.is-img-right { grid-template-columns: 1fr; gap: 40px; }
  .suja-dev-container.is-img-right .suja-dev-visual { order: 0; }
  .suja-dev-media { max-width: 400px; aspect-ratio: 16 / 12; }
}

/* ============================================================
   GYNEYE — CORE CAPABILITIES  (suja-gyn-capabilities, .suja-gcap-*)
   Centred header + 3x2 glass cards (icon + title + desc) with a thin top
   accent line for a clean clinical feel.
   ============================================================ */
.suja-gcap-showcase { background: transparent; padding: clamp(36px, 3.6vw, 58px) 24px; }
.suja-gcap-container { max-width: 1240px; margin: 0 auto; }
.suja-gcap-head { text-align: center; margin: 0 auto clamp(38px, 4.5vw, 56px); max-width: 760px; }
.suja-gcap-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-gcap-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3.1vw, 42px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0; }
.suja-gcap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.suja-gcap-card {
  position: relative; overflow: hidden; isolation: isolate; height: 100%; padding: 30px 26px 32px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.14) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 16px 36px -20px rgba(8,145,178,0.22), 0 6px 16px -12px rgba(12,30,53,0.10);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.suja-gcap-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; z-index: 1; background: var(--eco-teal, #0891b2); }
.suja-gcap-card::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 55%); }
.suja-gcap-card > * { position: relative; z-index: 1; }
.suja-gcap-icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 15px; margin: 0 0 18px; color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16); transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease; }
.suja-gcap-icon i, .suja-gcap-icon svg { width: 24px; height: 24px; font-size: 24px; color: currentColor; fill: currentColor; }
.suja-gcap-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0 0 10px; }
.suja-gcap-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 14.5px; line-height: 1.66; color: var(--eco-text, #475569); margin: 0; }
.suja-gcap-card:hover { transform: translateY(-6px); border-color: rgba(8,145,178,0.5); box-shadow: 0 28px 52px -22px rgba(8,145,178,0.32), 0 10px 22px -14px rgba(12,30,53,0.16); }
.suja-gcap-card:hover .suja-gcap-icon { transform: translateY(-2px) scale(1.07); background: rgba(8,145,178,0.16); }
.suja-gcap-showcase.js-anim .suja-gcap-card { opacity: 0; transform: translateY(20px); }
.suja-gcap-showcase.js-anim.is-in .suja-gcap-card { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i,0) * 80ms); }
@media (max-width: 980px) { .suja-gcap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .suja-gcap-grid { grid-template-columns: 1fr; } }

/* ============================================================
   GYNEYE — AI-POWERED CLINICAL DOCUMENTATION  (.suja-aidoc-*)
   Split: sticky left content + secondary CTA beside a right 2-col grid of
   glass feature cards.
   ============================================================ */
.suja-aidoc-showcase { background: transparent; padding: clamp(36px, 3.6vw, 58px) 24px; }
.suja-aidoc-container { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
.suja-aidoc-head { position: sticky; top: 96px; }
.suja-aidoc-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-aidoc-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3vw, 40px); line-height: 1.16; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0 0 18px; }
.suja-aidoc-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.72; color: var(--eco-text, #475569); margin: 0 0 26px; max-width: 44ch; }
.suja-aidoc-cta { display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 10px; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-weight: 700; font-size: 15px; color: var(--eco-teal, #0891b2); text-decoration: none; background: transparent; border: 1.5px solid rgba(8,145,178,0.4); transition: background .25s ease, border-color .25s ease, gap .25s ease; }
.suja-aidoc-cta svg { transition: transform .25s ease; }
.suja-aidoc-cta:hover { background: rgba(8,145,178,0.08); border-color: rgba(8,145,178,0.6); gap: 13px; }
.suja-aidoc-cta:hover svg { transform: translateX(3px); }

.suja-aidoc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.suja-aidoc-card {
  position: relative; overflow: hidden; isolation: isolate; height: 100%; padding: 26px 24px 28px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.14) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 16px 36px -20px rgba(8,145,178,0.22), 0 6px 16px -12px rgba(12,30,53,0.10);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.suja-aidoc-card::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 55%); }
.suja-aidoc-card > * { position: relative; z-index: 1; }
.suja-aidoc-icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px; margin: 0 0 16px; color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16); transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease; }
.suja-aidoc-icon i, .suja-aidoc-icon svg { width: 22px; height: 22px; font-size: 22px; color: currentColor; fill: currentColor; }
.suja-aidoc-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 16.5px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0 0 9px; }
.suja-aidoc-cdesc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 14px; line-height: 1.64; color: var(--eco-text, #475569); margin: 0; }
.suja-aidoc-card:hover { transform: translateY(-6px); border-color: rgba(8,145,178,0.5); box-shadow: 0 28px 52px -22px rgba(8,145,178,0.32), 0 10px 22px -14px rgba(12,30,53,0.16); }
.suja-aidoc-card:hover .suja-aidoc-icon { transform: translateY(-2px) scale(1.07); background: rgba(8,145,178,0.16); }
.suja-aidoc-showcase.js-anim .suja-aidoc-card { opacity: 0; transform: translateY(20px); }
.suja-aidoc-showcase.js-anim.is-in .suja-aidoc-card { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i,0) * 80ms); }
@media (max-width: 980px) { .suja-aidoc-container { grid-template-columns: 1fr; gap: 34px; } .suja-aidoc-head { position: static; } }
@media (max-width: 560px) { .suja-aidoc-grid { grid-template-columns: 1fr; } }

/* ============================================================
   GYNEYE S5 — APPLICATION CARDS  (.suja-app-*)  3x2 cards + tags
   ============================================================ */
.suja-app-showcase { background: transparent; padding: clamp(36px, 3.6vw, 58px) 24px; }
.suja-app-container { max-width: 1240px; margin: 0 auto; }
.suja-app-head { text-align: center; margin: 0 auto clamp(38px, 4.5vw, 56px); max-width: 780px; }
.suja-app-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-app-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3.1vw, 42px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0 0 14px; }
.suja-app-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.7; color: var(--eco-text, #475569); margin: 0 auto; max-width: 680px; }
.suja-app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.suja-app-card {
  position: relative; overflow: hidden; isolation: isolate; height: 100%; display: flex; flex-direction: column; padding: 28px 26px 26px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.14) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 16px 36px -20px rgba(8,145,178,0.22), 0 6px 16px -12px rgba(12,30,53,0.10);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.suja-app-card::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 55%); }
.suja-app-card > * { position: relative; z-index: 1; }
.suja-app-card-top { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.suja-app-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border-radius: 13px; color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16); transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease; }
.suja-app-icon i, .suja-app-icon svg { width: 20px; height: 20px; font-size: 20px; color: currentColor; fill: currentColor; }
.suja-app-cat { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--eco-teal, #0891b2); }
.suja-app-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0 0 9px; }
.suja-app-cdesc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 14px; line-height: 1.62; color: var(--eco-text, #475569); margin: 0 0 16px; }
.suja-app-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.suja-app-tag { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 11.5px; font-weight: 600; color: var(--eco-teal, #0e7490); background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.18); }
.suja-app-card:hover { transform: translateY(-6px); border-color: rgba(8,145,178,0.5); box-shadow: 0 28px 52px -22px rgba(8,145,178,0.32), 0 10px 22px -14px rgba(12,30,53,0.16); }
.suja-app-card:hover .suja-app-icon { transform: translateY(-2px) scale(1.07); background: rgba(8,145,178,0.16); }
.suja-app-showcase.js-anim .suja-app-card { opacity: 0; transform: translateY(20px); }
.suja-app-showcase.js-anim.is-in .suja-app-card { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i,0) * 80ms); }
@media (max-width: 980px) { .suja-app-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .suja-app-grid { grid-template-columns: 1fr; } }

/* ============================================================
   GYNEYE S6 — SPECS  (.suja-spec-*)  spec strip
   ============================================================ */
.suja-spec-showcase { background: transparent; padding: clamp(36px, 3.6vw, 58px) 24px; }
.suja-spec-container { max-width: 1080px; margin: 0 auto; }
.suja-spec-head { text-align: center; margin: 0 auto clamp(32px, 4vw, 48px); max-width: 720px; }
.suja-spec-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(26px, 2.9vw, 38px); line-height: 1.16; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0 0 16px; }
.suja-spec-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.72; color: var(--eco-text, #475569); margin: 0 auto; max-width: 640px; }
.suja-spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.suja-spec-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 30px 20px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.16) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 16px 34px -20px rgba(8,145,178,0.26), 0 6px 16px -12px rgba(12,30,53,0.12);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.suja-spec-val { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--eco-teal, #0891b2); }
.suja-spec-lbl { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eco-muted, #64748b); }
.suja-spec-card:hover { transform: translateY(-6px); border-color: rgba(8,145,178,0.4); box-shadow: 0 26px 46px -22px rgba(8,145,178,0.34); }
.suja-spec-showcase.js-anim .suja-spec-card { opacity: 0; transform: translateY(18px) scale(0.96); }
.suja-spec-showcase.js-anim.is-in .suja-spec-card { opacity: 1; transform: none; transition: opacity .5s ease, transform .55s cubic-bezier(.34,1.4,.64,1); transition-delay: calc(var(--i,0) * 90ms); }
@media (max-width: 720px) { .suja-spec-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   GYNEYE S7 — GYNEYE WORKFLOW  (.suja-gwf-*)  horizontal connected steps
   ============================================================ */
.suja-gwf-showcase { background: transparent; padding: clamp(36px, 3.6vw, 58px) 24px; }
.suja-gwf-container { max-width: 1240px; margin: 0 auto; }
.suja-gwf-head { text-align: center; margin: 0 auto clamp(40px, 5vw, 60px); max-width: 780px; }
.suja-gwf-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-gwf-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3.1vw, 42px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0 0 14px; }
.suja-gwf-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.7; color: var(--eco-text, #475569); margin: 0 auto; max-width: 720px; }
.suja-gwf-track { --stagger: 180ms; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 0; }
.suja-gwf-step { display: flex; flex-direction: column; min-width: 0; }
.suja-gwf-node { display: flex; align-items: center; height: 28px; }
.suja-gwf-line { position: relative; flex: 1; height: 2px; border-radius: 99px; background: rgba(12,30,53,0.12); overflow: hidden; }
.suja-gwf-line-fill { position: absolute; inset: 0; border-radius: 99px; background: var(--eco-teal, #0891b2); transform-origin: left center; }
.suja-gwf-dot { position: relative; flex: none; width: 14px; height: 14px; margin: 0 9px; border-radius: 50%; background: var(--eco-teal, #0891b2); box-shadow: 0 0 0 4px rgba(8,145,178,0.14); }
.suja-gwf-step.is-first .suja-gwf-line-before, .suja-gwf-step.is-last .suja-gwf-line-after { visibility: hidden; }
.suja-gwf-card {
  margin: 20px 10px 0; padding: 26px 24px 28px; border-radius: 20px; flex: 1;
  background: linear-gradient(135deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.14) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 16px 36px -20px rgba(8,145,178,0.22), 0 6px 16px -12px rgba(12,30,53,0.10);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.suja-gwf-num { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: var(--eco-teal, #0891b2); margin: 0 0 10px; }
.suja-gwf-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 19px; font-weight: 700; line-height: 1.28; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0 0 9px; }
.suja-gwf-cdesc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 14px; line-height: 1.64; color: var(--eco-text, #475569); margin: 0; }
.suja-gwf-card:hover { transform: translateY(-5px); border-color: rgba(8,145,178,0.5); box-shadow: 0 26px 48px -22px rgba(8,145,178,0.3); }
/* entrance */
.suja-gwf-showcase.js-anim .suja-gwf-line-fill { transform: scaleX(0); }
.suja-gwf-showcase.js-anim .suja-gwf-dot { transform: scale(0.5); opacity: 0; }
.suja-gwf-showcase.js-anim .suja-gwf-card { opacity: 0; transform: translateY(20px); }
.suja-gwf-showcase.js-anim.is-in .suja-gwf-line-before .suja-gwf-line-fill { transform: none; transition: transform .5s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i,0) * var(--stagger,180ms)); }
.suja-gwf-showcase.js-anim.is-in .suja-gwf-dot { transform: none; opacity: 1; transition: transform .45s cubic-bezier(.34,1.4,.64,1), opacity .35s ease; transition-delay: calc(var(--i,0) * var(--stagger,180ms) + 60ms); }
.suja-gwf-showcase.js-anim.is-in .suja-gwf-line-after .suja-gwf-line-fill { transform: none; transition: transform .5s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i,0) * var(--stagger,180ms) + 140ms); }
.suja-gwf-showcase.js-anim.is-in .suja-gwf-card { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i,0) * var(--stagger,180ms) + 100ms); }
@media (max-width: 900px) {
  .suja-gwf-track { grid-template-columns: 1fr; row-gap: 0; }
  .suja-gwf-step { display: grid; grid-template-columns: 32px 1fr; column-gap: 16px; }
  .suja-gwf-node { flex-direction: column; align-items: center; height: auto; align-self: stretch; }
  .suja-gwf-line { width: 2px; height: auto; flex: 1; }
  .suja-gwf-line-fill { transform-origin: center top; }
  .suja-gwf-showcase.js-anim .suja-gwf-line-fill { transform: scaleY(0); }
  .suja-gwf-dot { margin: 9px 0; }
  .suja-gwf-card { margin: 0 0 18px; }
}

/* ============================================================
   GYNEYE S10 — HOW IT WORKS  (.suja-hiw-*)  vertical numbered stepper
   ============================================================ */
.suja-hiw-showcase { background: transparent; padding: clamp(36px, 3.6vw, 58px) 24px; }
.suja-hiw-container { max-width: 880px; margin: 0 auto; }
.suja-hiw-head { text-align: center; margin: 0 auto clamp(40px, 5vw, 60px); max-width: 720px; }
.suja-hiw-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-hiw-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3.1vw, 42px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0 0 14px; }
.suja-hiw-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.7; color: var(--eco-text, #475569); margin: 0 auto; max-width: 640px; }
.suja-hiw-list { list-style: none; margin: 0; padding: 0; }
.suja-hiw-step { display: grid; grid-template-columns: 56px 1fr; column-gap: 22px; }
.suja-hiw-rail { position: relative; display: flex; flex-direction: column; align-items: center; }
.suja-hiw-rail::after { content: ""; position: absolute; top: 56px; bottom: -6px; width: 2px; background: linear-gradient(to bottom, rgba(8,145,178,0.4), rgba(8,145,178,0.12)); }
.suja-hiw-step.is-last .suja-hiw-rail::after { display: none; }
.suja-hiw-badge {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border-radius: 16px;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: #fff; background: var(--eco-teal, #0891b2);
  box-shadow: 0 14px 30px -12px rgba(8,145,178,0.5);
}
.suja-hiw-body {
  margin: 0 0 22px; padding: 22px 24px 24px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.14) 62%);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 14px 30px -20px rgba(8,145,178,0.2), 0 5px 14px -12px rgba(12,30,53,0.1);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.suja-hiw-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0 0 8px; }
.suja-hiw-cdesc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 14.5px; line-height: 1.66; color: var(--eco-text, #475569); margin: 0; }
.suja-hiw-body:hover { transform: translateX(4px); border-color: rgba(8,145,178,0.4); box-shadow: 0 20px 40px -22px rgba(8,145,178,0.3); }
.suja-hiw-showcase.js-anim .suja-hiw-step { opacity: 0; transform: translateY(18px); }
.suja-hiw-showcase.js-anim.is-in .suja-hiw-step { opacity: 1; transform: none; transition: opacity .5s ease, transform .55s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i,0) * 110ms); }
@media (max-width: 560px) { .suja-hiw-step { grid-template-columns: 46px 1fr; column-gap: 16px; } .suja-hiw-badge { width: 44px; height: 44px; font-size: 16px; } .suja-hiw-rail::after { top: 48px; } }

/* ============================================================
   GYNEYE S11 — PRODUCT EDITIONS  (.suja-ed-*)  edition cards
   ============================================================ */
.suja-ed-showcase { background: transparent; padding: clamp(36px, 3.6vw, 58px) 24px; }
.suja-ed-container { max-width: 1100px; margin: 0 auto; }
.suja-ed-head { text-align: center; margin: 0 auto clamp(38px, 4.5vw, 54px); max-width: 720px; }
.suja-ed-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-ed-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3.1vw, 42px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0 0 14px; }
.suja-ed-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.7; color: var(--eco-text, #475569); margin: 0 auto; max-width: 640px; }
.suja-ed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.suja-ed-card {
  position: relative; overflow: hidden; isolation: isolate; height: 100%; display: flex; flex-direction: column; padding: 32px 28px 34px; border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.15) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 16px 36px -20px rgba(8,145,178,0.22), 0 6px 16px -12px rgba(12,30,53,0.10);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.suja-ed-card.is-featured { border-color: rgba(8,145,178,0.5); box-shadow: 0 26px 54px -22px rgba(8,145,178,0.4), 0 10px 22px -14px rgba(12,30,53,0.14); }
.suja-ed-card.is-featured::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; z-index: 1; background: linear-gradient(90deg, #0891b2, #22d3ee); }
.suja-ed-card > * { position: relative; z-index: 1; }
.suja-ed-card-head { margin: 0 0 20px; padding: 0 0 18px; border-bottom: 1px solid rgba(12,30,53,0.08); }
.suja-ed-name { display: block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 26px; font-weight: 800; letter-spacing: 0.02em; color: var(--eco-teal, #0891b2); }
.suja-ed-tag { display: block; margin-top: 6px; font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 14px; line-height: 1.5; color: var(--eco-text, #475569); }
.suja-ed-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.suja-ed-features li { display: flex; align-items: flex-start; gap: 11px; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--eco-ink, #0c1e35); }
.suja-ed-check { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px; color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.12); }
.suja-ed-card:hover { transform: translateY(-6px); border-color: rgba(8,145,178,0.5); box-shadow: 0 30px 56px -22px rgba(8,145,178,0.34), 0 10px 22px -14px rgba(12,30,53,0.16); }
.suja-ed-cta-wrap { text-align: center; margin-top: clamp(30px, 3.4vw, 44px); }
.suja-ed-cta { display: inline-flex; align-items: center; gap: 9px; padding: 14px 28px; border-radius: 10px; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-weight: 700; font-size: 15px; color: #fff; background: var(--eco-ink, #0c1e35); text-decoration: none; transition: background .25s ease, gap .25s ease, transform .25s ease; }
.suja-ed-cta svg { transition: transform .25s ease; }
.suja-ed-cta:hover { background: var(--eco-teal, #0891b2); gap: 13px; transform: translateY(-2px); }
.suja-ed-cta:hover svg { transform: translateX(3px); }
.suja-ed-showcase.js-anim .suja-ed-card { opacity: 0; transform: translateY(22px); }
.suja-ed-showcase.js-anim.is-in .suja-ed-card { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i,0) * 100ms); }
@media (max-width: 860px) { .suja-ed-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

/* ============================================================
   INTEGRATIONS — CATEGORY SECTION  (.suja-icat-*)  image + items split
   ============================================================ */
.suja-icat-showcase { background: transparent; padding: clamp(36px, 3.6vw, 58px) 24px; }
.suja-icat-container { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 4.5vw, 68px); align-items: start; }
.suja-icat-container.is-img-right .suja-icat-visual { order: 2; }
.suja-icat-visual { position: sticky; top: 96px; }
.suja-icat-media {
  position: relative; margin: 0; width: 100%; overflow: hidden; border-radius: 24px; aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.12) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 28px 60px -24px rgba(8,145,178,0.30), 0 12px 26px -14px rgba(12,30,53,0.16);
}
.suja-icat-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.suja-icat-head { margin: 0 0 24px; }
.suja-icat-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin: 0 0 16px; }
.suja-icat-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(26px, 2.8vw, 38px); line-height: 1.16; font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink, #0c1e35); margin: 0 0 16px; }
.suja-icat-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.72; color: var(--eco-text, #475569); margin: 0; max-width: 52ch; }
.suja-icat-items { display: flex; flex-direction: column; gap: 16px; }
.suja-icat-item {
  position: relative; overflow: hidden; isolation: isolate; padding: 22px 24px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.14) 62%);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 14px 30px -20px rgba(8,145,178,0.20), 0 5px 14px -12px rgba(12,30,53,0.10);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.suja-icat-item-top { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 12px; }
.suja-icat-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 12px; color: var(--eco-teal, #0891b2); background: rgba(8,145,178,0.10); border: 1px solid rgba(8,145,178,0.16); transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease; }
.suja-icat-icon i, .suja-icat-icon svg { width: 19px; height: 19px; font-size: 19px; color: currentColor; fill: currentColor; }
.suja-icat-item-tt { min-width: 0; }
.suja-icat-item-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 16.5px; font-weight: 700; line-height: 1.28; letter-spacing: -0.01em; color: var(--eco-ink, #0c1e35); margin: 0 0 4px; }
.suja-icat-item-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 13.5px; line-height: 1.55; color: var(--eco-text, #475569); margin: 0; }
.suja-icat-hl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.suja-icat-hl li { display: flex; align-items: flex-start; gap: 8px; font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 13px; line-height: 1.4; color: var(--eco-ink, #0c1e35); font-weight: 500; }
.suja-icat-hl svg { flex: none; margin-top: 2px; color: var(--eco-teal, #0891b2); }
.suja-icat-item:hover { transform: translateY(-4px); border-color: rgba(8,145,178,0.5); box-shadow: 0 24px 44px -22px rgba(8,145,178,0.30), 0 8px 18px -14px rgba(12,30,53,0.14); }
.suja-icat-item:hover .suja-icat-icon { transform: scale(1.08); background: rgba(8,145,178,0.16); }
.suja-icat-showcase.js-anim .suja-icat-item { opacity: 0; transform: translateY(18px); }
.suja-icat-showcase.js-anim.is-in .suja-icat-item { opacity: 1; transform: none; transition: opacity .5s ease, transform .55s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i,0) * 90ms); }
@media (max-width: 980px) {
  .suja-icat-container, .suja-icat-container.is-img-right { grid-template-columns: 1fr; gap: 34px; }
  .suja-icat-container.is-img-right .suja-icat-visual { order: 0; }
  .suja-icat-visual { position: static; }
  .suja-icat-media { max-width: 460px; margin: 0 auto; aspect-ratio: 16 / 11; }
}
@media (max-width: 520px) { .suja-icat-hl { grid-template-columns: 1fr; } }

/* ---- Integration Category · SHOWCASE layout ----
   Two columns: LEFT = left-aligned header + framed dashboard visual (app chrome
   + teal glow); RIGHT = a stack of glass integration cards. Reuses the
   .suja-icat-item glass + reveal system. */
.suja-icat-v-showcase { padding: clamp(64px, 7vw, 112px) 24px; background: transparent; }
.suja-icat-sc-wrap { max-width: 1240px; margin: 0 auto; }
.suja-icat-sc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 4.5vw, 72px); align-items: stretch; }
/* Reversed: cards on the left, header + image on the right. */
.suja-icat-sc-grid2--rev .suja-icat-sc-left  { order: 2; }
.suja-icat-sc-grid2--rev .suja-icat-sc-cards { order: 1; }
/* Left column is a flex stack — header (auto) + image (fills the rest) — so it
   matches the right column's height; the image is cropped to fit that height. */
.suja-icat-sc-left { display: flex; flex-direction: column; }
.suja-icat-sc-head { flex: 0 0 auto; margin: 0 0 clamp(20px, 2.4vw, 30px); }
.suja-icat-sc-head .suja-icat-heading { margin: 0 0 14px; }
.suja-icat-sc-head .suja-icat-desc { font-family: var(--font-body,'DM Sans',sans-serif); font-size: clamp(15px,1.1vw,17px); line-height: 1.7; color: var(--eco-text,#475569); margin: 0; }
/* Image flex-fills the left column so it stretches to the same height as the
   cards column — both columns end at exactly the same bottom (grid stretch). */
.suja-icat-sc-visual { position: relative; flex: 1 1 auto; min-height: 260px; margin: 0; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid rgba(8,145,178,0.14); box-shadow: 0 50px 90px -46px rgba(8,145,178,0.45), 0 16px 34px -22px rgba(12,30,53,0.18); }
.suja-icat-sc-visual img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
/* Cards flow naturally and are always fully visible; the image (above) grows to
   match, so each section's height adapts to its own number of cards. If a section
   ever has a very long list, its cards scroll past this tall threshold. */
.suja-icat-sc-cards { position: relative; min-height: 0; }
.suja-icat-sc-cards-scroll { display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 22px); }
/* All cards always show — NO internal scroll (page scrolls). Short sections: the
   image flex-fills so both columns are equal height, aligned top & bottom. Tall
   sections (4-5 cards → class .is-tall) keep a capped image + a sticky left
   column and the page scrolls — same interaction as the CareAxes "Primary
   Modules" section, no scrollbar. */
.suja-icat-sc-cards-scroll { overflow: visible; }
.suja-icat-v-showcase.is-tall .suja-icat-sc-left { align-self: start; position: sticky; top: 110px; }
.suja-icat-v-showcase.is-tall .suja-icat-sc-visual { flex: 0 0 auto; height: 460px; }
.suja-icat-sc-card { display: flex; flex-direction: row; align-items: flex-start; gap: 16px; padding: clamp(22px, 2.4vw, 28px); border-radius: 20px; flex: 0 0 auto; }
.suja-icat-sc-card .suja-icat-icon { width: 48px; height: 48px; border-radius: 14px; margin: 0; }
.suja-icat-sc-card-body { min-width: 0; }
.suja-icat-sc-card .suja-icat-item-title { font-size: 18px; margin: 0 0 6px; }
.suja-icat-sc-card .suja-icat-item-desc { font-size: 14px; margin: 0 0 14px; }
.suja-icat-sc-card .suja-icat-hl { grid-template-columns: 1fr 1fr; gap: 8px 16px; }
@media (prefers-reduced-motion: no-preference) {
  .suja-icat-v-showcase.js-anim .suja-icat-sc-visual { opacity: 0; transform: translateY(22px) scale(.985); }
  .suja-icat-v-showcase.js-anim.is-in .suja-icat-sc-visual { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
}
@media (max-width: 900px) {
  .suja-icat-sc-grid2 { grid-template-columns: 1fr; gap: 34px; }
  .suja-icat-v-showcase.is-tall .suja-icat-sc-left { position: static; }
  .suja-icat-sc-visual, .suja-icat-v-showcase.is-tall .suja-icat-sc-visual { flex: none; height: auto; aspect-ratio: 16 / 10; min-height: 0; }
  .suja-icat-sc-cards-scroll { max-height: none; overflow: visible; padding-right: 0; }
  .suja-icat-sc-card .suja-icat-hl { grid-template-columns: 1fr; }
}

/* ---- Integration Category · ROWS layout ----
   Centred header → one full-width row per item, alternating image / content. */
.suja-icat-v-rows { padding: clamp(64px, 7vw, 112px) 24px; background: transparent; }
.suja-icat-rows-wrap { max-width: 1180px; margin: 0 auto; }
.suja-icat-rows-head { max-width: 720px; margin: 0 auto clamp(36px, 4.5vw, 60px); text-align: center; }
.suja-icat-rows-head .suja-icat-heading { margin: 0 0 14px; }
.suja-icat-rows-head .suja-icat-desc { font-family: var(--font-body,'DM Sans',sans-serif); font-size: clamp(15px,1.1vw,17px); line-height: 1.7; color: var(--eco-text,#475569); margin: 0; }
.suja-icat-rows { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 52px); }
.suja-icat-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.suja-icat-row.is-img-right .suja-icat-row-media { order: 2; }
.suja-icat-row.is-img-right .suja-icat-row-body  { order: 1; }
.suja-icat-row-media { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 11; background: #eef4f9; border: 1px solid rgba(8,145,178,0.14); box-shadow: 0 44px 84px -46px rgba(8,145,178,0.42), 0 14px 30px -20px rgba(12,30,53,0.16); }
.suja-icat-row-media img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.suja-icat-row:hover .suja-icat-row-media img { transform: scale(1.04); }
.suja-icat-row-body .suja-icat-icon { width: 50px; height: 50px; border-radius: 14px; margin: 0 0 18px; }
.suja-icat-row-body .suja-icat-item-title { font-size: clamp(20px, 2vw, 26px); margin: 0 0 12px; }
.suja-icat-row-body .suja-icat-item-desc { font-size: clamp(14.5px, 1.05vw, 16px); line-height: 1.65; margin: 0 0 18px; }
.suja-icat-row-body .suja-icat-hl { grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.suja-icat-row-body .suja-icat-hl li { font-size: 13.5px; }
@media (prefers-reduced-motion: no-preference) {
  .suja-icat-v-rows.js-anim .suja-icat-row { opacity: 0; transform: translateY(30px); }
  .suja-icat-v-rows.js-anim .suja-icat-row.is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
}
@media (max-width: 860px) {
  .suja-icat-row, .suja-icat-row.is-img-right { grid-template-columns: 1fr; gap: 22px; }
  .suja-icat-row.is-img-right .suja-icat-row-media { order: 0; }
  .suja-icat-row.is-img-right .suja-icat-row-body  { order: 0; }
  .suja-icat-row-body .suja-icat-hl { grid-template-columns: 1fr; }
}

/* ============================================================
   INTEGRATIONS — FINAL CTA  (.suja-icta-*)  split content + image
   ============================================================ */
.suja-icta-showcase { background: transparent; padding: clamp(36px, 3.6vw, 58px) 24px; }
.suja-icta-card {
  max-width: 1240px; margin: 0 auto; overflow: hidden; border-radius: 28px; padding: clamp(36px, 4vw, 60px);
  background: linear-gradient(135deg, #0c1e35 0%, #0e2a44 55%, #0e7490 130%);
  box-shadow: 0 30px 70px -28px rgba(12,30,53,0.5);
  position: relative;
}
.suja-icta-card::before { content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(34,211,238,0.22), transparent 70%); pointer-events: none; }
.suja-icta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.suja-icta-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #67e8f9; margin: 0 0 16px; }
.suja-icta-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3.2vw, 42px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: #fff; margin: 0 0 16px; }
.suja-icta-desc { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.72; color: rgba(232,244,248,0.85); margin: 0 0 28px; max-width: 46ch; }
.suja-icta-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.suja-icta-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 10px; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-weight: 700; font-size: 15px; text-decoration: none; border: 1.5px solid transparent; transition: all .25s ease; }
.suja-icta-btn-primary { background: #FF7033; color: #fff; }
.suja-icta-btn-primary:hover { background: #e85a22; transform: translateY(-2px); }
.suja-icta-btn-outline { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.35); }
.suja-icta-btn-outline:hover { background: rgba(255,255,255,0.14); transform: translateY(-2px); }
.suja-icta-media { margin: 0; overflow: hidden; border-radius: 18px; aspect-ratio: 16 / 11; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 24px 50px -20px rgba(0,0,0,0.4); animation: suja-icta-float 6.5s ease-in-out infinite; }
@keyframes suja-icta-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.suja-icta-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.suja-icta-showcase.js-anim .suja-icta-content, .suja-icta-showcase.js-anim .suja-icta-visual { opacity: 0; transform: translateY(16px); }
.suja-icta-showcase.js-anim.is-in .suja-icta-content { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.suja-icta-showcase.js-anim.is-in .suja-icta-visual { opacity: 1; transform: none; transition: opacity .6s ease .12s, transform .6s cubic-bezier(.22,.61,.36,1) .12s; }
@media (max-width: 900px) {
  .suja-icta-inner { grid-template-columns: 1fr; gap: 32px; }
  .suja-icta-visual { order: -1; }
}

/* ============================================================
   SUJA SOLUTION CARDS  (suja-solution-cards, .suja-solc-*)
   Grid of solution cards; each card holds a category label,
   title, description and a stack of native <details> rows.
   ============================================================ */
.suja-solc-showcase { background: transparent; padding: clamp(64px, 7vw, 108px) 24px; }
.suja-solc-container { max-width: 1200px; margin: 0 auto; }

.suja-solc-head { max-width: 820px; margin: 0 0 clamp(36px, 4vw, 60px); }
.suja-solc-head:not(.is-left) { margin-left: auto; margin-right: auto; text-align: center; }
.suja-solc-eyebrow { display: inline-block; margin-bottom: 12px; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eco-teal, #0891b2); }
.suja-solc-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(26px, 3vw, 40px); font-weight: 800; line-height: 1.18; letter-spacing: -0.02em; color: #192434; margin: 0; }
.suja-solc-desc { margin: 14px 0 0; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.7; color: #475569; }

.suja-solc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 30px); align-items: start; }

.suja-solc-card {
  min-width: 0; padding: clamp(22px, 2vw, 30px);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.6);
  background: linear-gradient(150deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72));
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 26px 52px -30px rgba(8,145,178,0.34), 0 8px 20px -14px rgba(12,30,53,0.16);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.suja-solc-card:hover { transform: translateY(-4px); border-color: rgba(8,145,178,0.32); box-shadow: 0 34px 64px -30px rgba(8,145,178,0.42); }

.suja-solc-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.suja-solc-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: rgba(8,145,178,0.10); color: var(--eco-teal, #0891b2); }
.suja-solc-icon svg, .suja-solc-icon i { width: 18px; height: 18px; font-size: 17px; }
.suja-solc-label { min-width: 0; overflow-wrap: anywhere; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eco-teal, #0891b2); }

.suja-solc-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: #0c1e35; margin: 0 0 8px; }
.suja-solc-cdesc { margin: 0 0 16px; font-size: 14.5px; line-height: 1.65; color: #475569; }

.suja-solc-rows { border-top: 1px solid rgba(12,30,53,0.10); }
.suja-solc-row { border-bottom: 1px solid rgba(12,30,53,0.10); }
.suja-solc-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; min-height: 24px; cursor: pointer; list-style: none;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 14.5px; font-weight: 600; color: #0c1e35;
  transition: color .2s ease;
}
.suja-solc-summary::-webkit-details-marker { display: none; }
.suja-solc-summary:hover { color: var(--eco-teal, #0891b2); }
.suja-solc-rtitle { min-width: 0; }
.suja-solc-chev { flex: 0 0 auto; display: inline-flex; color: var(--eco-teal, #0891b2); transition: transform .25s ease; }
.suja-solc-row[open] .suja-solc-chev { transform: rotate(180deg); }
.suja-solc-rbody { padding: 0 0 14px; font-size: 14px; line-height: 1.65; color: #52627a; }

@media (max-width: 1024px) { .suja-solc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .suja-solc-grid { grid-template-columns: 1fr; } }
/* Per-card link (e.g. "Explore RCM →"). min-height 24px = WCAG tap target. */
.suja-solc-cta { display: inline-flex; align-items: center; gap: 7px; min-height: 24px; margin-top: 16px; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 14px; font-weight: 700; color: var(--eco-teal, #0891b2); text-decoration: none; transition: gap .25s ease; }
.suja-solc-cta:hover { gap: 12px; }
.suja-solc-cta-arrow { font-size: 15px; line-height: 1; }

/* ============================================================
   SujaScribe — SPLIT layout variant (.suja-scribe-showcase.is-split)
   Copy + plain bullet list on the left, image/video on the right.
   Scoped to .is-split so the original stacked layout (CareAxes) is
   completely untouched.
   ============================================================ */
.suja-scribe-showcase.is-split .suja-scribe-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4.5vw, 40px); align-items: center;
}
.suja-scribe-showcase.is-split .suja-scribe-col-text { min-width: 0; text-align: left; }
.suja-scribe-showcase.is-split .suja-scribe-heading { text-align: left; }
.suja-scribe-showcase.is-split .suja-scribe-desc { margin: 18px 0 0; max-width: none; text-align: left; }
.suja-scribe-showcase.is-split .suja-scribe-group { display: inline-block; margin: 22px 0 0; }

/* Two columns — roomier than 3-up, so most highlights sit on one line. */
.suja-scribe-showcase.is-split .suja-scribe-bullets {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 20px;
}
.suja-scribe-showcase.is-split .suja-scribe-bullet {
  display: flex; align-items: flex-start; gap: 12px; min-width: 0;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 16px; line-height: 1.55; color: var(--eco-ink, #0c1e35);
}
.suja-scribe-showcase.is-split .suja-scribe-bullet-dot {
  flex: 0 0 24px; width: 24px; height: 24px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(8,145,178,0.10); color: var(--eco-teal, #0891b2);
}
.suja-scribe-showcase.is-split .suja-scribe-bullet-text { min-width: 0; }

.suja-scribe-showcase.is-split .suja-scribe-col-media { min-width: 0; }
.suja-scribe-showcase.is-split .suja-scribe-media {
  width: 100%; height: auto; display: block;
  /* Show each screen FULL at its own aspect ratio — the media is mixed
     (video is 16:9, the dashboard screenshots are ~2:1), so a fixed box would
     crop the sides. Natural sizing means no cropping and no black bars. */
  aspect-ratio: auto; object-fit: contain;
  border-radius: 7px; border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 30px 60px -30px rgba(8,145,178,0.40), 0 10px 24px -16px rgba(12,30,53,0.18);
}

/* Reveal: text then media */
.suja-scribe-showcase.is-split.js-anim .suja-scribe-col-text,
.suja-scribe-showcase.is-split.js-anim .suja-scribe-col-media { opacity: 0; transform: translateY(16px); }
.suja-scribe-showcase.is-split.js-anim.is-in .suja-scribe-col-text,
.suja-scribe-showcase.is-split.js-anim.is-in .suja-scribe-col-media {
  opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease;
}
.suja-scribe-showcase.is-split.js-anim.is-in .suja-scribe-col-media { transition-delay: .12s; }

/* Mirror variant: media on the LEFT, content + bullets on the RIGHT.
   Same 2-col grid — just reorder the media column (DOM order unchanged, so the
   mobile stack below and the reveal animation keep working as-is). */
.suja-scribe-showcase.is-split.is-media-left .suja-scribe-col-media { order: -1; }
.suja-scribe-showcase.is-split.is-media-left.js-anim.is-in .suja-scribe-col-media { transition-delay: 0s; }
.suja-scribe-showcase.is-split.is-media-left.js-anim.is-in .suja-scribe-col-text { transition-delay: .12s; }

@media (max-width: 900px) {
  .suja-scribe-showcase.is-split .suja-scribe-split { grid-template-columns: 1fr; gap: 30px; }
  .suja-scribe-showcase.is-split .suja-scribe-col-media { order: -1; }
  .suja-scribe-showcase.is-split .suja-scribe-media { aspect-ratio: auto; }
}
@media (max-width: 600px) {
  /* single narrow column: 2-up would be too tight, so stack the bullets */
  .suja-scribe-showcase.is-split .suja-scribe-bullets { grid-template-columns: 1fr; gap: 13px; }
}

/* ============================================================
   SUJA EVENTS PORTAL  (suja-events-portal, .suja-ev-*)
   Premium events page — hero + featured event + layout-varied
   listing. Uses the shared design-system tokens throughout.
   ============================================================ */
.suja-ev-showcase { background: transparent; padding: clamp(56px, 6.5vw, 104px) 24px; }
.suja-ev-container { max-width: 1200px; margin: 0 auto; }

.suja-ev-head { max-width: 780px; margin: 0 0 clamp(34px, 4vw, 56px); }
.suja-ev-eyebrow { display: inline-block; margin-bottom: 12px; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--eco-teal, #0891b2); }
.suja-ev-heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(30px, 4vw, 52px); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; color: #192434; margin: 0; }
.suja-ev-intro { margin: 16px 0 0; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.7; color: #475569; }

.suja-ev-seclabel { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #64748b; margin: 0 0 18px; }
.suja-ev-seclabel--more { margin-top: clamp(40px, 4.5vw, 68px); }

.suja-ev-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.suja-ev-when { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; }
.suja-ev-when--upcoming { color: #0f766e; background: rgba(16,185,129,0.14); }
.suja-ev-when--past { color: #64748b; background: #eef2f6; }
.suja-ev-cat { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eco-teal, #0891b2); }

.suja-ev-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0 0; }
.suja-ev-metaitem { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: #52627a; }
.suja-ev-metaitem svg { color: var(--eco-teal, #0891b2); flex: 0 0 auto; }

.suja-ev-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 12px 22px; min-height: 44px; border-radius: 999px; background: var(--eco-teal, #0891b2); color: #fff; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 14.5px; font-weight: 700; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; box-shadow: 0 14px 30px -14px rgba(8,145,178,0.5); }
.suja-ev-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -16px rgba(8,145,178,0.6); }
.suja-ev-btn svg { transition: transform .25s ease; }
.suja-ev-btn:hover svg { transform: translateX(3px); }

.suja-ev-media { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 16 / 10; background: #dfe8f0; }
.suja-ev-media.is-tall { aspect-ratio: 4 / 3; height: 100%; }
.suja-ev-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.suja-ev-media--ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: linear-gradient(140deg, #0c4a6e 0%, #0891b2 60%, #22d3ee 100%); color: rgba(255,255,255,0.9); }
.suja-ev-ph-mark { display: inline-flex; opacity: .85; }
.suja-ev-ph-badge { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,0.16); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

.suja-ev-featured { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 3vw, 48px); align-items: stretch; padding: 32px; border-radius: 26px; border: 1px solid rgba(255,255,255,0.6); background: linear-gradient(150deg, rgba(255,255,255,0.94), rgba(255,255,255,0.78)); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 40px 80px -40px rgba(8,145,178,0.4), 0 12px 30px -18px rgba(12,30,53,0.18); }
.suja-ev-featured-media { display: block; border-radius: 18px; overflow: hidden; }
.suja-ev-featured:hover .suja-ev-media img { transform: scale(1.05); }
.suja-ev-featured-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.suja-ev-featured-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; line-height: 1.18; letter-spacing: -0.02em; color: #0c1e35; margin: 0; }
.suja-ev-featured-title a { color: inherit; text-decoration: none; }
.suja-ev-featured-title a:hover { color: var(--eco-teal, #0891b2); }
.suja-ev-featured-exc { margin: 14px 0 0; font-size: 16px; line-height: 1.7; color: #475569; }

.suja-ev-list--wide { display: grid; gap: clamp(22px, 2.4vw, 34px); }
.suja-ev-card--wide { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(22px, 2.6vw, 40px); align-items: center; padding: 24px; border-radius: 22px; border: 1px solid rgba(255,255,255,0.6); background: rgba(255,255,255,0.86); box-shadow: 0 26px 54px -34px rgba(8,145,178,0.32), 0 8px 20px -14px rgba(12,30,53,0.14); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.suja-ev-card--wide.is-reverse .suja-ev-card-media { order: 2; }
.suja-ev-card--wide:hover { transform: translateY(-4px); border-color: rgba(8,145,178,0.3); box-shadow: 0 36px 70px -34px rgba(8,145,178,0.44); }
.suja-ev-card--wide:hover .suja-ev-media img { transform: scale(1.06); }

.suja-ev-list--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 30px); align-items: start; }
.suja-ev-card--grid { min-width: 0; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,0.6); background: rgba(255,255,255,0.9); box-shadow: 0 24px 50px -32px rgba(8,145,178,0.3), 0 8px 18px -14px rgba(12,30,53,0.14); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.suja-ev-card--grid .suja-ev-card-media { display: block; }
.suja-ev-card--grid .suja-ev-media { border-radius: 0; aspect-ratio: 16 / 9; }
.suja-ev-card--grid .suja-ev-card-body { padding: 22px; }
.suja-ev-card--grid:hover { transform: translateY(-5px); border-color: rgba(8,145,178,0.3); box-shadow: 0 34px 64px -30px rgba(8,145,178,0.44); }
.suja-ev-card--grid:hover .suja-ev-media img { transform: scale(1.07); }

.suja-ev-card-body { min-width: 0; }
.suja-ev-card-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: #0c1e35; margin: 0; }
.suja-ev-card-title a { color: inherit; text-decoration: none; }
.suja-ev-card-title a:hover { color: var(--eco-teal, #0891b2); }
.suja-ev-card-exc { margin: 12px 0 0; font-size: 14.5px; line-height: 1.65; color: #475569; }
.suja-ev-card--grid .suja-ev-btn { margin-top: 18px; padding: 10px 18px; min-height: 40px; font-size: 13.5px; }

.suja-ev-empty { margin: clamp(28px, 3vw, 44px) 0 0; font-size: 15px; color: #64748b; font-style: italic; }

.suja-ev-reveal { opacity: 0; transform: translateY(18px); }
.suja-ev-reveal.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) { .suja-ev-reveal { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .suja-ev-featured { grid-template-columns: 1fr; padding: 22px; }
  .suja-ev-featured-media { order: -1; }
  .suja-ev-card--wide, .suja-ev-card--wide.is-reverse { grid-template-columns: 1fr; }
  .suja-ev-card--wide .suja-ev-card-media, .suja-ev-card--wide.is-reverse .suja-ev-card-media { order: -1; }
  .suja-ev-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .suja-ev-list--grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SINGLE BLOG POST  (.suja-bp-*)  — athenahealth-style article
   Light hero (category → title → byline → featured image) then a clean
   single-column article body with styled headings, lists and callouts.
   ============================================================ */
.suja-bp .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.suja-bp .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .suja-bp .reveal { opacity: 1; transform: none; transition: none; } }

.suja-bp-hero { background: var(--suja-section-bg, #edf4f9); padding: clamp(24px, 3vw, 40px) 0 clamp(30px, 4vw, 50px); }
.suja-bp-hero-wrap { max-width: 900px; }
.suja-bp-head { margin-top: clamp(16px, 2.4vw, 28px); }
.suja-bp-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #0891b2; margin-bottom: 14px; }
.suja-bp-title { margin: 0; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(28px, 3.6vw, 46px); line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; color: #192434; }
.suja-bp-byline { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 20px; }
.suja-bp-by-item { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: #64748b; }
.suja-bp-by-item svg { flex: 0 0 auto; color: #0891b2; }
.suja-bp-figure { margin: clamp(24px, 3vw, 40px) 0 0; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 80px -46px rgba(8,145,178,0.4), 0 12px 30px -18px rgba(12,30,53,0.16); }
.suja-bp-figure img { display: block; width: 100%; height: auto; }

.suja-bp-body-host { background: #fff; padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 6vw, 84px); }
.suja-bp-body-wrap { max-width: 820px; }

/* ---- Article typography ---- */
.suja-bp-content > *:first-child { margin-top: 0; }
.suja-bp-content h2 { margin: clamp(30px, 3.4vw, 46px) 0 12px; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; font-weight: 800; letter-spacing: -0.015em; color: #192434; }
.suja-bp-content h3 { margin: 26px 0 10px; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; letter-spacing: -0.01em; color: #0c1e35; }
.suja-bp-content p { margin: 0 0 18px; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.85; color: #475569; }
.suja-bp-content p strong { color: #0c1e35; font-weight: 700; }
.suja-bp-content a { color: #0891b2; text-decoration: underline; text-underline-offset: 2px; }
.suja-bp-content ul, .suja-bp-content ol { margin: 0 0 20px; padding-left: 24px; }
.suja-bp-content li { margin: 0 0 10px; font-size: clamp(15.5px, 1.1vw, 17px); line-height: 1.75; color: #475569; }
.suja-bp-content img { max-width: 100%; height: auto; border-radius: 14px; margin: 8px 0; }
.suja-bp-content figure { margin: clamp(24px,3vw,34px) 0; }
.suja-bp-content figcaption { margin-top: 8px; font-size: 13.5px; color: #94a3b8; text-align: center; }
/* Callout: WordPress blockquotes render as a highlighted panel. */
.suja-bp-content blockquote { margin: clamp(28px, 3vw, 40px) 0; padding: clamp(22px, 2.6vw, 30px) clamp(24px, 3vw, 34px); border: 0; border-left: 4px solid #0891b2; border-radius: 16px; background: linear-gradient(135deg, rgba(8,145,178,0.09), rgba(34,211,238,0.05)); }
.suja-bp-content blockquote p { margin: 0 0 8px; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; font-weight: 600; color: #0c1e35; }
.suja-bp-content blockquote p:last-child { margin-bottom: 0; }
.suja-bp-content blockquote cite { display: block; margin-top: 10px; font-style: normal; font-size: 14px; font-weight: 700; color: #0891b2; }

.suja-bp-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(22px, 3vw, 32px); border-top: 1px solid #eef2f6; }
.suja-bp-tag { font-size: 13px; font-weight: 600; color: #0891b2; background: rgba(8,145,178,0.08); border: 1px solid rgba(8,145,178,0.18); padding: 6px 14px; border-radius: 999px; text-decoration: none; transition: background .2s ease; }
.suja-bp-tag:hover { background: rgba(8,145,178,0.15); }

/* ============================================================
   SINGLE CASE STUDY  (.suja-cs-*)  — athenahealth-style layout
   Dark hero → Challenge/Solution cards → dark Results card with big
   stats → pull quote → narrative. SUJA palette (navy #0c1e35 + teal).
   ============================================================ */
/* Case-study body: wider than the default single-resource column so the
   Challenge/Solution cards and Results card have room; the narrative + quote
   re-center to a comfortable reading measure inside it (see below). */
.suja-rs[data-type="case-study"] .suja-rs-body-wrap { max-width: 1120px; }

/* ---- Dark hero ---- */
.suja-cs-hero { background: linear-gradient(160deg, #0c1e35 0%, #12294a 60%, #0e2b3f 100%); color: #fff; padding: clamp(26px, 3vw, 40px) 0 clamp(44px, 5vw, 72px); }
.suja-cs-back { color: rgba(255,255,255,0.78); }
.suja-cs-back:hover { color: #fff; }
.suja-cs-hero-grid { display: grid; grid-template-columns: 1.35fr 0.9fr; gap: clamp(28px, 4vw, 64px); align-items: end; margin-top: clamp(20px, 2.4vw, 34px); }
.suja-rs .suja-cs-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #5fd0e6; margin-bottom: 16px; }
.suja-cs-title { margin: 0; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(30px, 4vw, 52px); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.suja-cs-hero-side { padding-bottom: 6px; }
.suja-cs-intro { margin: 0 0 20px; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.65; color: rgba(255,255,255,0.82); }
.suja-cs-hero-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.suja-cs-hero-facts li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,0.9); }
.suja-cs-hero-facts svg { flex: 0 0 auto; color: #5fd0e6; }

/* ---- Customer snapshot ---- */
.suja-cs-snapshot { margin: clamp(36px, 4.5vw, 60px) 0 0; padding: clamp(24px, 3vw, 36px); border-radius: 20px; border: 1px solid #e6eef4; background: #fff; box-shadow: 0 30px 60px -44px rgba(12,30,53,0.28); }
.suja-cs-snapshot-title { margin: 0 0 clamp(16px,2vw,22px); font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #0891b2; }
.suja-cs-snap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(16px, 2vw, 26px); }
.suja-cs-snap-item { display: flex; flex-direction: column; gap: 5px; padding-left: 14px; border-left: 3px solid rgba(8,145,178,0.25); }
.suja-cs-snap-k { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; }
.suja-cs-snap-v { font-size: 15px; font-weight: 700; line-height: 1.35; color: #0c1e35; }

/* ---- Challenge / Solution cards ---- */
.suja-cs-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2vw, 28px); margin: clamp(24px, 3vw, 34px) 0 0; }
.suja-cs-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.suja-cs-list li { position: relative; padding-left: 28px; font-size: clamp(14.5px, 1.05vw, 16px); line-height: 1.6; color: #33475b; }
.suja-cs-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: rgba(8,145,178,0.12); }
.suja-cs-list li::after { content: ""; position: absolute; left: 5px; top: 7px; width: 7px; height: 4px; border-left: 2px solid #0891b2; border-bottom: 2px solid #0891b2; transform: rotate(-45deg); }
.suja-cs-card--challenge .suja-cs-list li::before { background: rgba(232,131,58,0.15); }
.suja-cs-card--challenge .suja-cs-list li::after { border-color: #e8833a; }
.suja-cs-card--solution .suja-cs-card-text { margin-bottom: 14px; font-weight: 600; color: #0c1e35; }
.suja-cs-card { position: relative; border-radius: 20px; padding: clamp(26px, 3vw, 38px); border: 1px solid #e6eef4; background: #f6fafd; }
.suja-cs-card--solution { background: #f2fbfb; border-color: #d7f0ef; }
.suja-cs-pill { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; }
.suja-cs-pill--challenge { background: #e8833a; }
.suja-cs-pill--solution { background: #12a594; }
.suja-cs-pill--results { background: rgba(95,208,230,0.18); color: #5fd0e6; }
.suja-cs-card-text { margin: 0; font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.7; color: #33475b; }
.suja-cs-card-tag { display: inline-block; margin-top: 16px; font-size: 12.5px; font-weight: 700; color: #0891b2; background: rgba(8,145,178,0.09); border: 1px solid rgba(8,145,178,0.2); padding: 6px 12px; border-radius: 999px; }

/* ---- Dark results card ---- */
.suja-cs-results { margin: clamp(24px, 3vw, 34px) 0 0; border-radius: 24px; padding: clamp(30px, 4vw, 54px); text-align: center; color: #fff; background: radial-gradient(120% 140% at 50% 0%, #16335a 0%, #0c1e35 70%); box-shadow: 0 40px 80px -46px rgba(12,30,53,0.5); }
.suja-cs-results-title { margin: 14px 0 0; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(22px, 2.6vw, 34px); line-height: 1.15; font-weight: 800; letter-spacing: -0.015em; color: #fff; }
.suja-cs-results-sub { max-width: 640px; margin: 12px auto 0; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,0.78); }
.suja-cs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); margin-top: clamp(26px, 3vw, 40px); }
.suja-cs-stat { display: flex; flex-direction: column; gap: 6px; }
.suja-cs-stat-v { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(34px, 4.6vw, 58px); line-height: 1; font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(180deg, #ffffff 0%, #9fe4f2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.suja-cs-stat-l { font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,0.72); }

/* ---- Pull quote + narrative (centered reading measure) ----
   Scoped to .suja-rs (case-study page) to avoid colliding with the home
   Customer Stories widget, which reuses .suja-cs-quote / .suja-cs-quote-text. */
.suja-rs .suja-cs-quote { position: relative; max-width: 820px; margin: clamp(40px, 5vw, 68px) auto 0; padding: 0 0 0 clamp(24px, 3vw, 40px); border-left: 4px solid #0891b2; }
.suja-rs .suja-cs-quote-mark { position: absolute; left: clamp(24px,3vw,40px); top: -18px; font-size: 60px; line-height: 1; color: rgba(8,145,178,0.22); font-family: Georgia, serif; }
.suja-rs .suja-cs-quote-text { margin: 0; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(20px, 2.2vw, 28px); line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; color: #0c1e35; }
.suja-rs .suja-cs-quote-cite { display: block; margin-top: 16px; font-style: normal; font-size: 14.5px; font-weight: 700; color: #0891b2; }
.suja-cs-narrative { max-width: 760px; margin: clamp(36px, 4.5vw, 60px) auto 0; }
.suja-cs-narrative h2 { margin: clamp(28px,3vw,40px) 0 12px; font-size: clamp(20px,2vw,27px); font-weight: 800; letter-spacing: -0.015em; color: #192434; }
.suja-cs-narrative h3 { margin: 22px 0 10px; font-size: clamp(17px,1.5vw,20px); font-weight: 700; color: #0891b2; }
.suja-cs-narrative p { margin: 0 0 16px; font-size: clamp(15.5px,1.1vw,17px); line-height: 1.8; color: #475569; }

@media (max-width: 860px) {
  .suja-cs-hero-grid { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .suja-cs-cards { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .suja-cs-stats { grid-template-columns: 1fr; gap: 22px; }
}

/* ============================================================
   SINGLE EVENT DETAIL  (.suja-rs[data-type="event"] .suja-rs-event-*)
   Two-column: rich event story + sticky Event Details card.
   Extends the shared single-resource (.suja-rs-*) design system.
   ============================================================ */
.suja-rs[data-type="event"] .suja-rs-body-wrap { max-width: 1160px; }
/* Events have no separate tinted hero band — the lead (badge + title + intro)
   lives at the top of the left column, above the gallery, so the whole left
   column reads as one flow and the Event Details aside sits in the right column
   from the top. The back link sits above the two-column grid. */
/* Back link + category badge share one row above the two columns. */
.suja-rs-event-topbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(18px, 2.4vw, 30px); }
.suja-rs-event-topbar .suja-rs-back--body { display: inline-flex; margin: 0; }
.suja-rs-event-topbar .suja-rs-badge { margin: 0; }
.suja-rs-event-lead { margin: 0 0 clamp(24px, 3.2vw, 44px); }
.suja-rs-event-lead .suja-rs-title { margin-top: 0; }

.suja-rs-event { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 4vw, 64px); align-items: start; }

/* ---- Rich event story (rendered from the post content) ---- */
.suja-rs-event-main { min-width: 0; }
.suja-rs-event-main h2 { margin: clamp(30px, 3.4vw, 44px) 0 12px; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(22px, 2.3vw, 30px); line-height: 1.2; font-weight: 800; letter-spacing: -0.015em; color: #192434; }
.suja-rs-event-main h2:first-child { margin-top: 0; }
.suja-rs-event-main h3 { margin: 6px 0 12px; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; letter-spacing: -0.01em; color: var(--eco-teal, #0891b2); }
.suja-rs-event-main p { margin: 0 0 16px; font-size: clamp(15.5px, 1.1vw, 17px); line-height: 1.8; color: #475569; }
.suja-rs-event-main p strong { color: #0c1e35; font-weight: 700; }
.suja-rs-event-main ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
.suja-rs-event-main ul li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; color: #0c1e35; font-weight: 600; }
.suja-rs-event-main ul li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: rgba(8,145,178,0.12); }
.suja-rs-event-main ul li::after { content: ""; position: absolute; left: 5px; top: 8px; width: 6px; height: 3px; border-left: 2px solid var(--eco-teal, #0891b2); border-bottom: 2px solid var(--eco-teal, #0891b2); transform: rotate(-45deg); }

/* ---- Sticky Event Details card ---- */
.suja-rs-event-aside { position: sticky; top: 96px; align-self: start; }
.suja-rs-event-card { padding: clamp(22px, 2vw, 30px); border-radius: 22px; border: 1px solid rgba(255,255,255,0.6); background: linear-gradient(150deg, rgba(255,255,255,0.96), rgba(255,255,255,0.82)); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 30px 62px -34px rgba(8,145,178,0.4), 0 10px 24px -16px rgba(12,30,53,0.16); }
.suja-rs-event-card-title { margin: 0 0 18px; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: #0c1e35; }

.suja-rs-event-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.suja-rs-event-facts li { display: flex; align-items: flex-start; gap: 12px; }
.suja-rs-event-fact-ic { flex: 0 0 34px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(8,145,178,0.10); color: var(--eco-teal, #0891b2); }
.suja-rs-event-fact-txt { min-width: 0; display: flex; flex-direction: column; }
.suja-rs-event-fact-k { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; }
.suja-rs-event-fact-v { font-size: 14.5px; font-weight: 600; line-height: 1.4; color: #0c1e35; overflow-wrap: anywhere; }

.suja-rs-event-theme { margin: 20px 0 0; padding: 16px 18px; border-radius: 14px; background: rgba(8,145,178,0.06); border: 1px solid rgba(8,145,178,0.16); }
.suja-rs-event-theme-k { display: block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--eco-teal, #0891b2); margin-bottom: 6px; }
.suja-rs-event-theme-v { font-size: 14.5px; line-height: 1.55; color: #0c1e35; font-style: italic; }

.suja-rs-event-cta { width: 100%; justify-content: center; margin-top: 22px; }

@media (max-width: 900px) {
  .suja-rs-event { grid-template-columns: 1fr; gap: 32px; }
  .suja-rs-event-aside { position: static; }
  .suja-rs-event-main ul { grid-template-columns: 1fr; }
}

/* ============================================================
   EVENT GALLERY SLIDESHOW  (.suja-rs-event-gallery)
   Large crossfade slideshow above the event story — images/video.
   ============================================================ */
.suja-rs-event-gallery { position: relative; margin: 0 0 clamp(32px, 4vw, 56px); border-radius: 24px; overflow: hidden; box-shadow: 0 40px 80px -44px rgba(8,145,178,0.4), 0 12px 30px -18px rgba(12,30,53,0.18); border: 1px solid rgba(255,255,255,0.55); }
.suja-rs-gal-track { position: relative; aspect-ratio: 16 / 9; background: #0c1e35; }
.suja-rs-gal-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease; }
.suja-rs-gal-slide.is-active { opacity: 1; visibility: visible; }
.suja-rs-gal-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.suja-rs-gal-slide video.suja-rs-gal-media { object-fit: contain; background: #000; }

/* Placeholder slide (no assets yet) */
.suja-rs-gal-slide--ph { position: static; opacity: 1; visibility: visible; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: linear-gradient(140deg, #0c4a6e 0%, #0891b2 60%, #22d3ee 100%); color: rgba(255,255,255,0.92); }
.suja-rs-gal-ph-mark { opacity: .9; }
.suja-rs-gal-ph-txt { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }

/* Arrows */
.suja-rs-gal-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); background: rgba(12,30,53,0.45); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .25s ease, transform .25s ease; }
.suja-rs-gal-nav:hover { background: var(--eco-teal, #0891b2); }
.suja-rs-gal-prev { left: 16px; }
.suja-rs-gal-next { right: 16px; }

/* Dots */
.suja-rs-gal-dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.suja-rs-gal-dot { width: 24px; height: 24px; min-width: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.suja-rs-gal-dot::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.5); transition: width .3s ease, background .3s ease; }
.suja-rs-gal-dot.is-active::before { width: 24px; border-radius: 5px; background: #fff; }

@media (max-width: 600px) {
  .suja-rs-gal-nav { width: 40px; height: 40px; }
  .suja-rs-gal-prev { left: 10px; }
  .suja-rs-gal-next { right: 10px; }
}

/* Gallery lives inside the left content column (above the story), not full width. */
.suja-rs-event-main .suja-rs-event-gallery { margin: 0 0 clamp(24px, 3vw, 40px); }
.suja-rs-event-main .suja-rs-richtext > h2:first-child,
.suja-rs-event-main .suja-rs-richtext > *:first-child { margin-top: 0; }

/* Customer Success Story hero — the story image fills the whole hero as a
   full-bleed background, with the brand dark gradient laid over it at 50%
   opacity so the white hero text stays readable. customer-success only. */
.suja-cs-hero--bg { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(400px, 46vh, 540px); }
.suja-cs-hero-overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(160deg, #0c1e35 0%, #12294a 60%, #0e2b3f 100%); opacity: 0.75; }
.suja-cs-hero--bg > .suja-rs-wrap { position: relative; z-index: 1; }
/* Tighter gap between the customer-success hero and the body content. */
.suja-rs[data-type="customer-success"] .suja-rs-body-host { padding-top: clamp(26px, 3vw, 40px); }
.suja-rs[data-type="customer-success"] .suja-cs-snapshot { margin-top: 0; }

/* Tables inside resource narratives (e.g. the Ashoka phased-rollout table). */
.suja-rs-richtext .suja-cs-table-wrap { margin: 24px 0; overflow-x: auto; border: 1px solid rgba(15,23,42,0.10); border-radius: 14px; }
.suja-rs-richtext table { width: 100%; border-collapse: collapse; margin: 0; font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 15px; min-width: 420px; }
.suja-rs-richtext .suja-cs-table-wrap table { border: 0; }
.suja-rs-richtext th { text-align: left; background: #edf4f9; color: #0c1e35; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-weight: 700; font-size: 12.5px; letter-spacing: 0.03em; text-transform: uppercase; padding: 13px 18px; border-bottom: 1px solid rgba(15,23,42,0.10); }
.suja-rs-richtext td { padding: 13px 18px; border-bottom: 1px solid rgba(15,23,42,0.08); color: #475569; vertical-align: top; line-height: 1.55; }
.suja-rs-richtext tbody tr:last-child td { border-bottom: 0; }
.suja-rs-richtext td:first-child { font-weight: 700; color: #0c1e35; white-space: nowrap; }

/* ============================================================
   LEGAL / PRIVACY POLICY  (tpl-privacy-policy.php, .suja-legal-*)
   athenahealth-style layout: compact hero + sticky TOC sidebar
   beside numbered policy sections.
   ============================================================ */
.suja-legal { --lg-ink: #0c1e35; --lg-text: #475569; --lg-teal: #0891b2; --lg-line: rgba(15,23,42,0.10); --lg-tint: #edf4f9; background: #fff; }

/* ---- Hero ---- */
.suja-legal-hero { background: linear-gradient(180deg, #eef5fa 0%, #f6fafc 100%); border-bottom: 1px solid var(--lg-line); padding: clamp(56px, 8vw, 104px) 24px clamp(40px, 5vw, 68px); }
.suja-legal-hero-inner { max-width: 1180px; margin: 0 auto; }
.suja-legal-eyebrow { display: inline-block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lg-teal); margin: 0 0 14px; }
.suja-legal-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(34px, 5vw, 56px); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; color: var(--lg-ink); margin: 0; }
.suja-legal-lede { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--lg-text); margin: 16px 0 0; max-width: 640px; }
.suja-legal-updated { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 14px; color: #64748b; margin: 22px 0 0; }
.suja-legal-updated time { font-weight: 700; color: var(--lg-ink); }

/* ---- Body layout ---- */
.suja-legal-body { padding: clamp(44px, 6vw, 84px) 24px clamp(64px, 8vw, 120px); }
.suja-legal-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 272px 1fr; gap: clamp(40px, 5vw, 84px); align-items: start; }

/* ---- Sticky table of contents ---- */
.suja-legal-toc { position: sticky; top: clamp(88px, 12vh, 120px); align-self: start; }
.suja-legal-toc-inner { max-height: calc(100vh - 150px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.suja-legal-toc-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #94a3b8; margin: 0 0 16px; }
.suja-legal-toc nav ol { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.suja-legal-toc nav li { margin: 0; }
.suja-legal-toc nav a { display: flex; gap: 12px; align-items: baseline; padding: 8px 12px; border-radius: 10px; border-left: 2px solid transparent; font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--lg-text); text-decoration: none; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.suja-legal-toc-num { flex: none; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 12px; font-weight: 700; color: #94a3b8; min-width: 16px; transition: color .2s ease; }
.suja-legal-toc nav a:hover { color: var(--lg-ink); background: var(--lg-tint); }
.suja-legal-toc nav a.is-active { color: var(--lg-teal); background: rgba(8,145,178,0.08); border-left-color: var(--lg-teal); font-weight: 700; }
.suja-legal-toc nav a.is-active .suja-legal-toc-num { color: var(--lg-teal); }

/* ---- Content sections ---- */
.suja-legal-content { min-width: 0; max-width: 760px; }
.suja-legal-section { padding: 0 0 clamp(32px, 4vw, 48px); margin: 0 0 clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--lg-line); scroll-margin-top: 110px; }
.suja-legal-section:last-child { border-bottom: 0; margin-bottom: 0; }
.suja-legal-heading { display: flex; gap: 16px; align-items: baseline; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; color: var(--lg-ink); margin: 0 0 18px; }
.suja-legal-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(8,145,178,0.10); color: var(--lg-teal); font-size: 16px; font-weight: 800; }
.suja-legal-subhead { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(16px, 1.5vw, 19px); font-weight: 700; color: var(--lg-ink); margin: 28px 0 10px; }
.suja-legal-subhead2 { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 15px; font-weight: 700; color: var(--lg-teal); margin: 20px 0 6px; }

/* ---- Table (cookie categories) ---- */
.suja-legal-table-wrap { overflow-x: auto; margin: 4px 0 18px; border: 1px solid var(--lg-line); border-radius: 14px; }
.suja-legal-table { width: 100%; border-collapse: collapse; font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 15px; min-width: 520px; }
.suja-legal-table thead th { text-align: left; background: var(--lg-tint); color: var(--lg-ink); font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; padding: 13px 18px; border-bottom: 1px solid var(--lg-line); }
.suja-legal-table td { padding: 14px 18px; vertical-align: top; border-bottom: 1px solid var(--lg-line); color: var(--lg-text); }
.suja-legal-table tbody tr:last-child td { border-bottom: 0; }
.suja-legal-table td strong { color: var(--lg-ink); }
.suja-legal-table td ul { margin: 0; padding: 0; list-style: none; }
.suja-legal-table td ul li { position: relative; padding: 0 0 0 16px; margin: 0 0 4px; line-height: 1.5; }
.suja-legal-table td ul li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--lg-teal); }

/* ---- Prose ---- */
.suja-legal-prose { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.75; color: var(--lg-text); }
.suja-legal-prose p { margin: 0 0 16px; }
.suja-legal-prose p:last-child { margin-bottom: 0; }
.suja-legal-prose strong { color: var(--lg-ink); font-weight: 700; }
.suja-legal-prose a { color: var(--lg-teal); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.suja-legal-prose a:hover { color: #0e7490; }
.suja-legal-list { margin: 0 0 16px; padding: 0; list-style: none; }
.suja-legal-list li { position: relative; padding: 0 0 0 26px; margin: 0 0 11px; line-height: 1.7; }
.suja-legal-list li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--lg-teal); }
.suja-legal-ph { color: #b45309; background: rgba(245,158,11,0.12); border: 1px dashed rgba(245,158,11,0.5); border-radius: 5px; padding: 1px 7px; font-size: 0.92em; font-style: italic; }

/* ---- Contact block ---- */
.suja-legal-contact { margin: 22px 0 0; }
.suja-legal-org { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 18px; font-weight: 700; color: var(--lg-ink); margin: 0 0 10px; }
.suja-legal-org span { font-weight: 500; color: var(--lg-text); font-size: 0.9em; }
.suja-legal-offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: 24px 0; }
.suja-legal-office { background: var(--lg-tint); border: 1px solid var(--lg-line); border-radius: 16px; padding: 20px 22px; }
.suja-legal-office h4 { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: var(--lg-teal); margin: 0 0 10px; }
.suja-legal-office address { font-style: normal; font-size: 14.5px; line-height: 1.6; color: var(--lg-text); }
.suja-legal-grievance { background: #fff; border: 1px solid var(--lg-line); border-left: 3px solid var(--lg-teal); border-radius: 14px; padding: 22px 24px; margin: 24px 0 0; }
.suja-legal-grievance h4 { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 15px; font-weight: 700; color: var(--lg-ink); margin: 0 0 12px; }
.suja-legal-fine { font-size: 13.5px; color: #64748b; }

/* ---- Back to top ---- */
.suja-legal-top { position: fixed; right: clamp(18px, 3vw, 34px); bottom: clamp(18px, 3vw, 34px); width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--lg-teal); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 16px 34px -14px rgba(8,145,178,0.6); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease, visibility .3s ease, background .3s ease; z-index: 40; }
.suja-legal-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.suja-legal-top:hover { background: #0e7490; }
.suja-legal-top svg { width: 22px; height: 22px; fill: currentColor; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .suja-legal-grid { grid-template-columns: 1fr; gap: 32px; }
  .suja-legal-toc { position: static; }
  .suja-legal-toc-inner { max-height: none; overflow: visible; background: var(--lg-tint); border: 1px solid var(--lg-line); border-radius: 16px; padding: 20px 20px 12px; }
  .suja-legal-content { max-width: none; }
}
@media (max-width: 560px) {
  .suja-legal-heading { gap: 12px; }
  .suja-legal-num { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
  .suja-legal-offices { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE SECTION RHYTHM  (v3.9.369)
   Normalise vertical section padding on phones/tablets so every
   content section shares ONE consistent gap. Overrides both the
   widget clamp() min and any per-element Elementor editor padding
   (hence !important). Horizontal gutters + heroes are untouched.
   ============================================================ */
@media (max-width: 767px){
  .suja-aidoc-showcase, .suja-aif-showcase, .suja-aix-showcase, .suja-app-showcase,
  .suja-aud-showcase, .suja-ben-showcase, .suja-bill-showcase, .suja-biz-showcase,
  .suja-chl-showcase, .suja-cpg-showcase, .suja-ctal-showcase, .suja-dev-showcase,
  .suja-ed-showcase, .suja-emr-showcase, .suja-emr2-showcase, .suja-emrs-showcase,
  .suja-eng-showcase, .suja-ev-showcase, .suja-fp-showcase, .suja-gcap-showcase,
  .suja-gwf-showcase, .suja-hiw-showcase, .suja-icat-showcase, .suja-icta-showcase,
  .suja-impx-showcase, .suja-int-showcase, .suja-intl-showcase, .suja-mgd-showcase,
  .suja-mob-showcase, .suja-plsc-showcase, .suja-rl2-showcase, .suja-scribe-showcase,
  .suja-solc-showcase, .suja-spec-showcase, .suja-sup-showcase, .suja-why-showcase,
  .suja-cap-section, .suja-cc-section, .suja-cp-section, .suja-ldr-section,
  .suja-leadg-section, .suja-rg-section,
  .suja-ecs-section, .suja-wf-section, .suja-cs-section, .suja-blog-section{
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* Homepage native (non-widget) sections — logos marquee strip + final CTA —
   folded into the same 40px mobile rhythm. Desktop padding unchanged. */
@media (max-width: 767px){
  .elementor-element-0a38e3c,
  .elementor-element-514401a{
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* Testimonial cards with a real photo avatar (v3.9.391) — fill the 48px circle */
.suja-testimonial-avatar--photo{ background:none; padding:0; overflow:hidden; }
.suja-testimonial-avatar--photo img{ width:48px; height:48px; object-fit:cover; border-radius:50%; display:block; }

/* ============================================================
   CAREERS — landing hero, Open Positions cards, job detail, apply form (v3.9.401)
   ============================================================ */
.suja-careers-hero{ background:linear-gradient(160deg,#eef5fb 0%,#e7f0f8 100%); padding:clamp(64px,9vw,120px) 24px clamp(48px,6vw,80px); text-align:center; }
.suja-careers-hero-inner{ max-width:860px; margin:0 auto; }
.suja-careers-hero-eyebrow{ display:inline-block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:#0891b2; margin-bottom:14px; }
.suja-careers-hero-title{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:clamp(30px,5vw,52px); line-height:1.12; color:#192434; margin:0; letter-spacing:-.01em; }
.suja-careers-hero-sub{ max-width:660px; margin:20px auto 0; color:#475569; font-family:'DM Sans',sans-serif; font-size:clamp(16px,1.35vw,19px); line-height:1.7; }

/* Content section shares the site-wide tint (--suja-section-bg, #edf4f9) so the
   glass job cards lift off the surface instead of washing out on white. */
.suja-careers-section{ background:var(--suja-section-bg,#edf4f9); padding:clamp(56px,7vw,96px) 24px; }
.suja-careers-inner{ max-width:1180px; margin:0 auto; }
.suja-careers-head{ text-align:center; max-width:720px; margin:0 auto clamp(32px,4vw,52px); }
.suja-careers-eyebrow{ display:inline-block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#0891b2; margin-bottom:10px; }
.suja-careers-heading{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:clamp(26px,3.6vw,40px); color:#192434; margin:0; }
.suja-careers-desc{ margin:14px 0 0; color:#475569; font-size:17px; line-height:1.7; }

.suja-careers-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.suja-careers-card{ display:flex; flex-direction:column; text-decoration:none;
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.86));
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(15,23,42,.08); border-radius:20px; padding:28px 26px;
  box-shadow:0 10px 30px -18px rgba(8,145,178,.25), 0 4px 12px -8px rgba(12,30,53,.08);
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease; }
.suja-careers-card:hover{ transform:translateY(-6px); border-color:#0891b2; box-shadow:0 26px 50px -22px rgba(8,145,178,.4), 0 8px 20px -12px rgba(12,30,53,.14); }
.suja-careers-card-title{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:20px; line-height:1.3; color:#0c1e35; margin:0 0 16px; }
.suja-careers-facts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.suja-careers-facts li{ display:flex; align-items:center; gap:9px; color:#475569; font-size:14.5px; }
.suja-careers-facts svg{ color:#0891b2; flex:0 0 auto; }
.suja-careers-tags{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.suja-careers-tags li{ font-size:12px; font-weight:600; color:#0e7490; background:rgba(8,145,178,.09); border:1px solid rgba(8,145,178,.16); padding:5px 11px; border-radius:999px; }
.suja-careers-cta{ display:inline-flex; align-items:center; gap:7px; margin-top:auto; padding-top:22px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:15px; color:#0891b2; }
.suja-careers-cta svg{ transition:transform .25s ease; }
.suja-careers-card:hover .suja-careers-cta svg{ transform:translateX(3px); }
.suja-careers-empty{ text-align:center; color:#64748b; font-size:16px; }

.suja-jobd{ background:#ffffff; }
.suja-jobd-hero{ background:linear-gradient(160deg,#eef5fb 0%,#e7f0f8 100%); padding:clamp(28px,4vw,48px) 24px clamp(32px,4vw,52px); }
.suja-jobd-hero-inner{ max-width:1120px; margin:0 auto; }
.suja-jobd-back{ display:inline-flex; align-items:center; gap:6px; color:#0891b2; font-weight:600; font-size:14px; text-decoration:none; margin-bottom:18px; }
.suja-jobd-back:hover{ text-decoration:underline; }
.suja-jobd-eyebrow{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#0891b2; margin-bottom:8px; }
.suja-jobd-title{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:clamp(26px,4vw,42px); color:#192434; margin:0; line-height:1.14; }
.suja-jobd-meta{ margin:14px 0 0; color:#475569; font-size:16px; font-weight:600; }
.suja-jobd-apply-cta{ display:inline-block; margin-top:22px; background:#e97b26; color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:15px; padding:13px 28px; border-radius:999px; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; box-shadow:0 10px 24px -12px rgba(233,123,38,.6); }
.suja-jobd-apply-cta:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(233,123,38,.7); }
.suja-jobd-body{ padding:clamp(40px,5vw,72px) 24px clamp(56px,7vw,96px); }
.suja-jobd-grid{ max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1fr 380px; gap:clamp(32px,4vw,56px); align-items:start; }
.suja-jobd-section{ margin:0 0 clamp(28px,3vw,40px); }
.suja-jobd-section:last-child{ margin-bottom:0; }
.suja-jobd-h2{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:clamp(19px,2.4vw,24px); color:#0c1e35; margin:0 0 14px; }
.suja-jobd-p{ color:#475569; font-size:16.5px; line-height:1.78; margin:0 0 12px; }
.suja-jobd-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; }
.suja-jobd-list li{ position:relative; padding-left:28px; color:#334155; font-size:16px; line-height:1.65; }
.suja-jobd-list li::before{ content:""; position:absolute; left:2px; top:9px; width:8px; height:8px; border-radius:50%; background:#0891b2; }
.suja-jobd-chips{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:10px; }
.suja-jobd-chips li{ font-size:14px; font-weight:600; color:#0e7490; background:rgba(8,145,178,.09); border:1px solid rgba(8,145,178,.18); padding:8px 15px; border-radius:10px; }

/* Job snapshot (Shift / Qualification / Location) */
.suja-jobd-snap{ list-style:none; margin:0; padding:18px 20px; display:grid; gap:12px; background:rgba(8,145,178,.05); border:1px solid rgba(8,145,178,.14); border-radius:14px; }
.suja-jobd-snap li{ display:flex; gap:14px; align-items:baseline; }
.suja-jobd-snap-k{ flex:0 0 108px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; color:#0e7490; }
.suja-jobd-snap-v{ color:#334155; font-size:15.5px; line-height:1.5; }
@media(max-width:520px){ .suja-jobd-snap li{ flex-direction:column; gap:2px; } .suja-jobd-snap-k{ flex:none; } }

.suja-jobd-aside{ position:sticky; top:100px; }
.suja-jobd-card{ background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,255,255,.78));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(15,23,42,.1); border-radius:20px; padding:28px 26px;
  box-shadow:0 18px 44px -22px rgba(8,145,178,.3), 0 6px 16px -10px rgba(12,30,53,.1); }
.suja-jobd-card-title{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:20px; color:#0c1e35; margin:0 0 4px; }
.suja-jobd-card-sub{ color:#64748b; font-size:14px; margin:0 0 20px; }
.suja-apply-field{ display:block; margin:0 0 14px; }
.suja-apply-field > span{ display:block; font-size:13.5px; font-weight:600; color:#334155; margin-bottom:6px; }
.suja-apply-field > span b{ color:#e11d48; }
.suja-apply-field > span small{ color:#94a3b8; font-weight:500; }
.suja-apply-field input, .suja-apply-field textarea{ width:100%; box-sizing:border-box; border:1px solid #d7dfea; border-radius:10px; padding:11px 13px; font-family:'DM Sans',sans-serif; font-size:15px; color:#0c1e35; background:#fff; transition:border-color .2s ease, box-shadow .2s ease; }
.suja-apply-field input:focus, .suja-apply-field textarea:focus{ outline:none; border-color:#0891b2; box-shadow:0 0 0 3px rgba(8,145,178,.14); }
.suja-apply-field input[readonly]{ background:#f1f5f9; color:#475569; }
.suja-apply-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.suja-apply-file input{ padding:9px; font-size:13.5px; }
.suja-apply-submit{ width:100%; margin-top:6px; border:0; cursor:pointer; border-radius:999px; background:#e97b26; color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:16px; padding:14px 20px; display:inline-flex; align-items:center; justify-content:center; gap:10px; transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease; box-shadow:0 12px 26px -12px rgba(233,123,38,.6); }
.suja-apply-submit:hover{ transform:translateY(-2px); box-shadow:0 18px 32px -12px rgba(233,123,38,.7); }
.suja-apply-submit:disabled{ opacity:.7; cursor:default; transform:none; }
.suja-apply-spinner{ display:none; width:18px; height:18px; border:2.5px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; animation:sujaApplySpin .7s linear infinite; }
.suja-apply-submit.is-loading .suja-apply-spinner{ display:inline-block; }
@keyframes sujaApplySpin{ to{ transform:rotate(360deg); } }
.suja-apply-msg{ display:none; background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; font-size:14px; line-height:1.5; padding:11px 14px; border-radius:10px; margin-bottom:14px; }
.suja-apply-success{ text-align:center; padding:14px 6px; }
.suja-apply-success-ic{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:rgba(16,185,129,.12); color:#059669; margin-bottom:14px; }
.suja-apply-success h3{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:20px; color:#0c1e35; margin:0 0 8px; }
.suja-apply-success p{ color:#475569; font-size:15px; margin:0; }

@media (max-width:1024px){
  .suja-careers-grid{ grid-template-columns:repeat(2,1fr); }
  .suja-jobd-grid{ grid-template-columns:1fr; }
  .suja-jobd-aside{ position:static; }
}
@media (max-width:767px){
  .suja-careers-grid{ grid-template-columns:1fr; }
  .suja-apply-row{ grid-template-columns:1fr; }
  .suja-jobd-apply-cta, .suja-apply-submit{ width:100%; text-align:center; }
}