/* ==========================================================================
   SERENE LIFEWORLD - HEMATOGENIX MULTI-COLOR SYSTEM (LIGHTENED PALETTES)
   - Lighter, luminous background colors across all pages
   - Maximum-contrast typography (#14172a deep obsidian & #334155 slate)
   - High-visibility kickers, buttons, and frosted porcelain cards
   ========================================================================== */

/* ==========================================================================
   SERENE LIFEWORLD BRAND TYPOGRAPHY (NEW HERO - GEOMETRIC SANS-SERIF TYPE)
   ========================================================================== */
@font-face {
  font-family: "New Hero";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/NewHeroAccess-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "New Hero";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/NewHeroAccess-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "New Hero";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/NewHeroAccess-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "New Hero";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/NewHeroAccess-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "new-hero-access";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/NewHeroAccess-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "new-hero-access";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/NewHeroAccess-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "new-hero-access";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/NewHeroAccess-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "new-hero-access";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/NewHeroAccess-Bold.woff2") format("woff2");
}

/* Global Typography Smoothing & Selection Effects */
html, body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

::selection {
  background: rgba(108, 47, 168, 0.16) !important;
  color: inherit !important;
}
::-moz-selection {
  background: rgba(108, 47, 168, 0.16) !important;
  color: inherit !important;
}

/* 1. Base Reset & Stage */
body::before,
body::after {
  display: none !important;
}

#hematogenix-stage {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  will-change: transform !important;
}

/* Luminous White Ground Stage Overlay - Dissolves particles & tint seamlessly into pure white at the bottom */
#hematogenix-stage::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 25% !important;
  min-height: 160px !important;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 45%, #ffffff 88%, #ffffff 100%) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

/* Ambient Meshes in Stage */
.hemato-mesh-hero {
  position: absolute !important;
  inset: -5% !important;
  width: 110% !important;
  height: 110% !important;
  display: block !important;
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) !important;
  opacity: 1 !important;
  background: 
    radial-gradient(ellipse 75% 65% at 8% 12%, rgba(46, 48, 146, 0.14) 0%, rgba(46, 48, 146, 0.02) 52%, transparent 68%),
    radial-gradient(ellipse 70% 60% at 92% 25%, rgba(46, 48, 146, 0.04) 0%, rgba(46, 48, 146, 0.01) 50%, transparent 66%),
    radial-gradient(circle at 50% 50%, rgba(147, 111, 174, 0.06) 0%, transparent 55%),
    linear-gradient(165deg, #f0f4fc 0%, #f2f5fb 34%, #f7f3fb 58%, #ffffff 82%, #ffffff 100%) !important;
}

.hemato-mesh-content {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  opacity: 0 !important;
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: 
    radial-gradient(ellipse 75% 65% at 8% 12%, rgba(46, 48, 146, 0.14) 0%, rgba(46, 48, 146, 0.02) 52%, transparent 68%),
    radial-gradient(ellipse 70% 60% at 92% 25%, rgba(46, 48, 146, 0.04) 0%, rgba(46, 48, 146, 0.01) 50%, transparent 66%),
    radial-gradient(circle at 50% 50%, rgba(147, 111, 174, 0.06) 0%, transparent 55%),
    linear-gradient(165deg, #f0f4fc 0%, #f2f5fb 34%, #f7f3fb 58%, #ffffff 82%, #ffffff 100%) !important;
}

#hemato-canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), visibility 1s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 2. Bespoke Floating 3D Biological Objects in Fixed Stage */
/* Initial Load Guard: Keep all floating 3D elements and canvas particles hidden until proper page layout has loaded */
html:not(.page-loaded) #hematogenix-stage .hemato-floating-element,
html:not(.page-loaded) #hematogenix-stage #hemato-canvas,
body:not(.page-loaded) #hematogenix-stage .hemato-floating-element,
body:not(.page-loaded) #hematogenix-stage #hemato-canvas {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.hemato-floating-element {
  position: absolute !important;
  pointer-events: none !important;
  transform-style: preserve-3d !important;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hemato-bio-cluster {
  position: absolute !important;
  top: 14% !important;
  right: 3% !important;
  width: 390px !important;
  height: 390px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
  mix-blend-mode: normal !important;
  opacity: 0.96 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

@media (max-width: 1024px) {
  .hemato-bio-cluster {
    width: 300px !important;
    height: 300px !important;
    right: 2% !important;
    top: 20% !important;
    opacity: 0.7 !important;
  }
}

/* Floating Glass Lenses & Cell Discs */
.hemato-lens {
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.9), 0 15px 35px rgba(0, 0, 0, 0.05) !important;
}

.hemato-lens-1 { width: 130px; height: 130px; top: 12%; left: 8%; animation: floatLens 18s ease-in-out infinite alternate; }
.hemato-lens-2 { width: 90px; height: 90px; top: 68%; left: 4%; animation: floatLens 15s ease-in-out infinite alternate-reverse; }
.hemato-lens-3 { width: 170px; height: 170px; top: 22%; right: 7%; animation: floatLens 24s ease-in-out infinite alternate; }
.hemato-lens-4 { width: 75px; height: 75px; top: 78%; right: 12%; animation: floatLens 17s ease-in-out infinite alternate-reverse; }

@keyframes floatLens {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(16px, -24px, 0) rotate(8deg); }
  100% { transform: translate3d(-14px, 18px, 0) rotate(-6deg); }
}

.hemato-cell-disc {
  border-radius: 50% !important;
  filter: blur(2px) !important;
  pointer-events: none !important;
}

.hemato-cell-1 { width: 46px; height: 46px; top: 35%; left: 5%; animation: floatCell 16s ease-in-out infinite alternate; }
.hemato-cell-2 { width: 38px; height: 38px; top: 55%; right: 6%; animation: floatCell 12s ease-in-out infinite alternate-reverse; }
.hemato-cell-cyan { width: 28px; height: 28px; top: 72%; left: 22%; animation: floatCell 14s ease-in-out infinite alternate; }

@keyframes floatCell {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(18px, -26px, 0); }
}

/* 3. Header & Navigation (Clean Frosted White Bar) */
.site-header {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

.desktop-nav a {
  color: #14172a !important;
  font-weight: 600 !important;
}

.desktop-nav a.active::after,
.desktop-nav a:hover::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 12px !important;
  height: 2px !important;
  border-radius: 999px !important;
}

.breadcrumbs {
  background: rgba(255, 255, 255, 0.90) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  color: #334155 !important;
}

.breadcrumbs a { color: #1e257a !important; font-weight: 700 !important; transition: color 0.2s ease; }
.breadcrumbs a:hover { color: #5B42BE !important; }
.breadcrumbs span { color: #64748b !important; }

/* 4. Common Content Section Reset: Transparent to reveal lightened mesh background */
.purpose-section,
.values-section,
.about-locations,
.capabilities-section,
.capabilities-intro,
.catalog-group,
.product-note,
.quality-framework,
.quality-pillars-section,
.document-section,
.quality-locations,
.contact-options,
.contact-form-section,
.office-section,
.about-section,
.visual-journey-section,
.products-section,
.catalog-intro,
.inner-section {
  background: transparent !important;
}

.quality-pillars-section::before,
.quality-pillars-section::after,
.quality-orb,
.quality-orb-one,
.quality-orb-two,
.visual-journey-section::before,
.visual-journey-section::after,
.assurance-section::before,
.assurance-section::after,
.contact-form-section::before,
.contact-form-section::after {
  display: none !important;
  content: none !important;
}

/* Luminous White Ground Transition for Bottom Sections & Footer */
.contact-section {
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.70) 15%, #ffffff 40%, #ffffff 100%) !important;
  position: relative !important;
  z-index: 5 !important;
}

body[data-page="contact"] .contact-units-section {
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.75) 15%, #ffffff 40%, #ffffff 100%) !important;
  position: relative !important;
  z-index: 5 !important;
}

/* 5. Universal High-Visibility Typography (Sharp Obsidian & Slate) */
h1:not(.site-footer *):not(.visual-story-card *),
h2:not(.site-footer *):not(.visual-story-card *),
h3:not(.site-footer *):not(.visual-story-card *),
.page-hero-copy h1,
.creative-hero h1,
.creative-hero h1 span,
.creative-hero h1 [data-slide-title],
.section-heading h2,
.catalog-group-heading h2,
.visual-journey-heading h2,
.purpose-section h2,
.values-section h2,
.capabilities-section h2,
.quality-framework h2,
.catalog-intro h2,
.catalog-group-header h2,
#story-title,
#purpose-title,
#catalog-overview-title,
#antibiotics-title,
#gastro-title,
#wellness-support-title {
  color: #14172a !important;
  -webkit-text-fill-color: #14172a !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  text-shadow: none !important;
}

/* Universal WebView Hero Heading Formatting across all inner pages */
body:not([data-page="home"]) .page-hero-copy h1 {
  font-family: 'New Hero', 'new-hero-access', var(--font-sans, sans-serif) !important;
  font-size: clamp(52px, 5.2vw, 72px) !important;
  font-weight: 700 !important;
  line-height: 1.14 !important;
  letter-spacing: -0.025em !important;
  color: #14172a !important;
  -webkit-text-fill-color: #14172a !important;
  text-shadow: none !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

body:not([data-page="home"]) .page-hero-copy h1 .hero-accent,
.page-hero-copy h1 .hero-accent {
  font-family: 'New Hero', 'new-hero-access', var(--font-sans, sans-serif) !important;
  font-style: normal !important;
  font-weight: inherit !important;
  background: linear-gradient(135deg, #6C2FA8 0%, #5B42BE 50%, #2D3490 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline !important;
}


/* Refined Sub-Text Hierarchy across All Pages: Always smaller and subordinate to titles */

/* Tier 1: Hero Subtext (accompanies h1: 38px–52px) */
.creative-hero-intro,
.creative-hero p[data-slide-copy],
.page-hero-copy p,
.page-hero-copy > p:not(.section-kicker),
.page-hero p:not(.section-kicker) {
  font-family: 'New Hero', 'new-hero-access', var(--font-sans, sans-serif) !important;
  font-size: 16px !important;
  line-height: 1.62 !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-weight: 450 !important;
  letter-spacing: -0.005em !important;
  opacity: 1 !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Tier 2: Section Subtext & Intro Leads (accompanies h2: 30px–40px) */
.section-intro,
.section-lead,
.side-intro,
.about-lead,
.body-copy,
.about-section .about-lead,
.about-section .body-copy,
.about-section .about-grid > div:first-child p,
.about-grid p,
.story-grid .about-lead,
.story-grid .body-copy,
.story-grid > div:first-child p,
.catalog-intro p,
.catalog-group > p,
.catalog-group-heading p,
.section-heading p,
.purpose-section p:not(.purpose-detail-card p),
.capabilities-section p:not(.capabilities-grid p):not(.card-detail *),
.capabilities-intro p,
.quality-framework p:not(.quality-pillars-layout p),
.contact-copy > p:not(.section-kicker),
.contact-form-copy .section-intro,
.product-note p,
.medical-note,
.page-hero-copy > p:not(.section-kicker),
.page-hero p:not(.section-kicker) {
  font-family: 'New Hero', 'new-hero-access', var(--font-sans, sans-serif) !important;
  font-size: 15.5px !important;
  line-height: 1.62 !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-weight: 450 !important;
  letter-spacing: -0.005em !important;
  opacity: 1 !important;
  text-shadow: none !important;
  max-width: var(--title-block-width, 485px) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Tier 3: Card Subtext & Body Copy (accompanies h3: 22px–24px and h4: 18px) */
.purpose-detail-card p,
.capabilities-grid p,
.card-detail p,
.location-list article p,
.quality-pillars-layout article p,
.document-card p,
.accreditation-card p,
.contact-card p,
.contact-options article p,
.catalog-card p,
.product-card p,
.timeline-card p,
.value-card p,
.office-card p,
.story-facts article p,
.story-facts p {
  font-family: 'New Hero', 'new-hero-access', var(--font-sans, sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-weight: 400 !important;
  letter-spacing: -0.003em !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Tier 4: Footer Subtext (accompanies footer headline: 28px–38px) */
.footer-subtext {
  font-family: 'New Hero', 'new-hero-access', var(--font-sans, sans-serif) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #4A588B !important;
  -webkit-text-fill-color: #4A588B !important;
  font-weight: 450 !important;
  letter-spacing: -0.005em !important;
  -webkit-font-smoothing: antialiased !important;
}

@media (max-width: 768px) {
  .creative-hero-intro,
  .creative-hero p[data-slide-copy],
  .page-hero-copy p,
  .page-hero-copy > p:not(.section-kicker),
  .page-hero p:not(.section-kicker) {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }

  .section-intro,
  .section-lead,
  .side-intro,
  .about-lead,
  .catalog-intro p,
  .catalog-group > p,
  .catalog-group-heading p,
  .section-heading p,
  .purpose-section p:not(.purpose-detail-card p),
  .capabilities-section p:not(.capabilities-grid p):not(.card-detail *),
  .capabilities-intro p,
  .quality-framework p:not(.quality-pillars-layout p),
  .contact-copy > p:not(.section-kicker),
  .contact-form-copy .section-intro,
  .product-note p,
  .medical-note {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .body-copy,
  .purpose-detail-card p,
  .capabilities-grid p,
  .card-detail p,
  .location-list article p,
  .quality-pillars-layout article p,
  .document-card p,
  .accreditation-card p,
  .contact-card p,
  .contact-options article p,
  .catalog-card p,
  .product-card p,
  .timeline-card p,
  .value-card p,
  .office-card p,
  .story-facts article p,
  .story-facts p {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }

  .footer-subtext {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }
}

/* Frosted Porcelain Cards Across All Pages */
.purpose-detail-card,
.location-list article,
.capabilities-grid article,
.quality-pillars-layout article,
.document-card,
.accreditation-card,
.contact-card,
.contact-options article,
.contact-form,
.catalog-card,
.product-card,
.timeline-card,
.value-card,
.office-card,
.story-facts article {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06) !important;
  border-radius: 18px !important;
}

.purpose-detail-card h3,
.location-list article h3,
.capabilities-grid article h3,
.quality-pillars-layout article h3,
.document-card h3,
.accreditation-card h3,
.contact-card h3,
.contact-options article h3,
.catalog-card h3,
.product-card h3,
.timeline-card h3,
.value-card h3,
.office-card strong,
.story-facts article strong {
  color: #14172a !important;
  -webkit-text-fill-color: #14172a !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

.purpose-detail-card p,
.location-list article p,
.capabilities-grid article p,
.quality-pillars-layout article p,
.document-card p,
.accreditation-card p,
.contact-card p,
.contact-options article p,
.catalog-card p,
.product-card p,
.timeline-card p,
.value-card p,
.office-card p,
.office-card span,
.story-facts article p {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-shadow: none !important;
}

/* Form Controls & Footer */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea, select {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  color: #14172a !important;
  border-radius: 12px !important;
}

/* Footer theme handled by dark-footer.css */
.site-footer {
  position: relative !important;
  z-index: 50 !important;
}

.site-footer,
.site-footer * {
  -webkit-text-fill-color: initial;
}

.footer-main nav {
  justify-items: start !important;
}

.footer-main nav a {
  width: fit-content !important;
  max-width: fit-content !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-self: start !important;
  position: relative !important;
}

.footer-main nav a .underline-indicator {
  max-width: 100% !important;
  bottom: -2px !important;
}

/* ==========================================================================
   PAGE 1: HOME (LIGHTENED RUBY CORAL & SILKY ROSE)
   ========================================================================== */
body[data-page="home"] .hemato-mesh-hero {
  background: 
    radial-gradient(ellipse 75% 65% at 8% 12%, rgba(46, 48, 146, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 92% 25%, rgba(91, 66, 190, 0.14) 0%, transparent 60%),
    radial-gradient(circle at 50% 48%, rgba(147, 111, 174, 0.06) 0%, transparent 55%),
    linear-gradient(165deg, #f0f4fc 0%, #faf1f6 34%, #f7f3fb 58%, #ffffff 82%, #ffffff 100%) !important;
}

body[data-page="home"] .hemato-bio-cluster {
  width: 490px !important;
  height: 330px !important;
  top: 13% !important;
  right: 2.5% !important;
  background-image: none !important;
  background-color: transparent !important;
  pointer-events: none !important;
  cursor: default !important;
  z-index: 2 !important;
  animation: none !important;
}

body[data-page="home"] .hemato-bio-cluster:active {
  cursor: default !important;
}

body[data-page="home"] .hemato-bio-cluster::before {
  display: none !important;
}

.hemato-bio-home-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  filter: drop-shadow(0 20px 42px rgba(46, 48, 146, 0.22)) drop-shadow(0 8px 18px rgba(91, 66, 190, 0.15)) !important;
  transform-origin: 50% 50% !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  will-change: transform !important;
}

@media (max-width: 1200px) {
  body[data-page="home"] .hemato-bio-cluster {
    width: 420px !important;
    height: 280px !important;
    top: 15% !important;
    right: 2% !important;
  }
}

@media (max-width: 1024px) {
  body[data-page="home"] .hemato-bio-cluster {
    width: 350px !important;
    height: 235px !important;
    top: 18% !important;
    right: 2% !important;
    opacity: 0.88 !important;
  }
}

@media (max-width: 768px) {
  body[data-page="home"] .hemato-bio-cluster {
    width: 280px !important;
    height: 190px !important;
    top: 14% !important;
    right: 0% !important;
    opacity: 0.52 !important;
  }

  body[data-page="home"] .hemato-bio-home-img {
    filter: drop-shadow(0 10px 24px rgba(46, 48, 146, 0.14)) drop-shadow(0 4px 10px rgba(91, 66, 190, 0.10)) !important;
  }
}

@media (max-width: 480px) {
  body[data-page="home"] .hemato-bio-cluster {
    width: 280px !important;
    height: 190px !important;
    top: 12% !important;
    right: -10px !important;
    opacity: 0.50 !important;
  }
}

@keyframes floatBioHome {
  0% {
    transform: translate3d(0, 0, 0) rotate(-1.5deg);
  }
  100% {
    transform: translate3d(14px, -24px, 0) rotate(2deg);
  }
}

body[data-page="home"] .creative-hero {
  position: relative !important;
  background-color: #ffffff !important;
  background-image: 
    linear-gradient(180deg, transparent 0%, transparent 66%, rgba(255, 255, 255, 0.75) 84%, #ffffff 100%),
    radial-gradient(ellipse 75% 70% at 28% 46%, rgba(206, 192, 252, 0.40) 0%, rgba(212, 216, 252, 0.25) 50%, transparent 85%),
    url('../images/hero-slider-bg.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

body[data-page="home"] .creative-hero-overlay,
body[data-page="home"] .creative-hero-gridlines {
  display: none !important;
  opacity: 0 !important;
}

body[data-page="home"] .creative-hero-media .creative-slide-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  display: block !important;
  transition: opacity 0.8s ease, visibility 0.8s ease !important;
}

body[data-page="home"] .creative-hero-media .creative-slide-image.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

body[data-page="home"] .desktop-nav a.active,
body[data-page="home"] .site-nav-link:hover,
body[data-page="home"] .creative-hero h1 em,
body[data-page="home"] .creative-eyebrow,
body[data-page="home"] .section-kicker {
  color: #5B42BE !important;
  -webkit-text-fill-color: #5B42BE !important;
  font-weight: 800 !important;
}

body[data-page="home"] .desktop-nav a.active::after,
body[data-page="home"] .creative-eyebrow > span:first-child {
  width: 32px !important;
  height: 2.5px !important;
  border-radius: 99px !important;
  background: #5B42BE !important;
  box-shadow: 0 0 8px rgba(91, 66, 190, 0.40) !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}
body[data-page="home"] .section-kicker > span:first-child {
  background: #5B42BE !important;
  box-shadow: 0 0 8px rgba(91, 66, 190, 0.4) !important;
}

.creative-eyebrow [data-slide-eyebrow] {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: #5B42BE !important;
  -webkit-text-fill-color: #5B42BE !important;
  display: inline-block !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

body[data-page="home"] .button-primary,
body[data-page="home"] .header-cta {
  background: linear-gradient(135deg, #6C2FA8 0%, #5B42BE 50%, #2D3490 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(91, 66, 190, 0.32) !important;
  border: none !important;
  outline: none !important;
}

body[data-page="home"] .visual-story-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   HOME PAGE PARAGRAPH TEXT STYLING
   Clean, transparent backgrounds with high-contrast obsidian typography
   ========================================================================== */
body[data-page="home"] .creative-hero-intro {
  font-size: 16px !important;
  line-height: 1.65 !important;
  max-width: var(--hero-title-width, 385px) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-weight: 500 !important;
}

body[data-page="home"] .about-lead,
body[data-page="home"] .capabilities-section .section-intro,
body[data-page="home"] .visual-journey-section .section-intro,
body[data-page="home"] .products-section .section-intro,
body[data-page="home"] .quality-section .section-intro,
body[data-page="home"] .footprint-section .section-intro,
body[data-page="home"] .contact-copy > p:not(.section-kicker),
body[data-page="home"] .medical-note {
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-weight: 480 !important;
  position: relative !important;
  z-index: 3 !important;
  max-width: var(--title-block-width, 485px) !important;
}

body[data-page="home"] .about-section .body-copy {
  font-family: 'New Hero', 'new-hero-access', var(--font-sans, sans-serif) !important;
  font-size: 15.5px !important;
  line-height: 1.62 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-weight: 450 !important;
  letter-spacing: -0.005em !important;
  max-width: var(--title-block-width, 485px) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

body[data-page="home"] .about-section .about-grid > div:first-child {
  position: relative !important;
  z-index: 3 !important;
  background: transparent !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 768px) {
  body[data-page="home"] .creative-hero-intro {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    max-width: clamp(225px, 62vw, 255px) !important;
    text-shadow: 0 0 14px rgba(237, 232, 250, 0.95), 0 1px 3px rgba(255, 255, 255, 0.95), 0 0 1px #ede8fa !important;
  }

  body[data-page="home"] .about-lead,
  .about-section .about-lead,
  .story-grid .about-lead {
    font-size: 14.5px !important;
    line-height: 1.62 !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-weight: 500 !important;
    max-width: var(--title-block-width, 100%) !important;
    margin-top: 18px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    position: relative !important;
    z-index: 3 !important;
  }

  body[data-page="home"] .about-section .body-copy,
  .about-section .body-copy,
  .story-grid .body-copy {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    font-weight: 450 !important;
    letter-spacing: -0.003em !important;
    max-width: var(--title-block-width, 100%) !important;
    margin-top: 14px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    position: relative !important;
    z-index: 3 !important;
  }

  body[data-page="home"] .capabilities-section .section-intro,
  body[data-page="home"] .visual-journey-section .section-intro,
  body[data-page="home"] .products-section .section-intro,
  body[data-page="home"] .quality-section .section-intro,
  body[data-page="home"] .footprint-section .section-intro,
  body[data-page="home"] .contact-copy > p:not(.section-kicker),
  body[data-page="home"] .medical-note {
    font-size: 14px !important;
    line-height: 1.6 !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    max-width: var(--title-block-width, 100%) !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
}

/* ==========================================================================
   PAGE 2: ABOUT (SERENE SAPPHIRE & CRIMSON BRAND SYSTEM)
   ========================================================================== */
body[data-page="about"] .hemato-mesh-hero {
  background: 
    radial-gradient(ellipse 75% 65% at 8% 12%, rgba(46, 48, 146, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 92% 25%, rgba(91, 66, 190, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 75% 20%, rgba(15, 166, 216, 0.10) 0%, transparent 48%),
    radial-gradient(circle at 50% 48%, rgba(147, 111, 174, 0.06) 0%, transparent 55%),
    linear-gradient(165deg, #f0f4fc 0%, #faf1f6 34%, #f7f3fb 58%, #ffffff 82%, #ffffff 100%) !important;
}

body[data-page="about"] .hemato-bio-cluster {
  background-image: url('../images/bio-3d-about.png') !important;
  background-color: transparent !important;
  filter: drop-shadow(0 20px 45px rgba(46, 48, 146, 0.22)) !important;
  animation: floatBioAbout 20s ease-in-out infinite alternate !important;
}

@keyframes floatBioAbout {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(-16px, -22px, 0) rotate(-6deg) scale(1.04); }
  100% { transform: translate3d(12px, 18px, 0) rotate(5deg) scale(0.96); }
}

body[data-page="about"] .page-hero {
  background: 
    radial-gradient(circle at 75% 20%, rgba(46, 48, 146, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(15, 166, 216, 0.10) 0%, transparent 50%),
    transparent !important;
  border-bottom: none !important;
}

body[data-page="about"] .page-hero::before {
  border-color: rgba(46, 48, 146, 0.15) !important;
  box-shadow: 0 0 0 70px rgba(46, 48, 146, 0.05), 0 0 0 150px rgba(15, 166, 216, 0.03) !important;
}

body[data-page="about"] .desktop-nav a.active,
body[data-page="about"] .page-hero .section-kicker,
body[data-page="about"] .section-kicker,
body[data-page="about"] .page-hero h1 .hero-accent,
body[data-page="about"] .story-facts article span {
  color: #5B42BE !important;
  -webkit-text-fill-color: #5B42BE !important;
  font-weight: 800 !important;
}

body[data-page="about"] .desktop-nav a.active::after,
body[data-page="about"] .page-hero .section-kicker > span:first-child,
body[data-page="about"] .section-kicker > span:first-child {
  background: #5B42BE !important;
  box-shadow: 0 0 8px rgba(91, 66, 190, 0.4) !important;
}

body[data-page="about"] .button-primary,
body[data-page="about"] .page-hero-actions .button-primary {
  background: linear-gradient(135deg, #6C2FA8 0%, #5B42BE 50%, #2D3490 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(91, 66, 190, 0.30) !important;
  border: none !important;
}

body[data-page="about"] .purpose-detail-card:hover,
body[data-page="about"] .location-list article:hover {
  border-color: rgba(46, 48, 146, 0.35) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.10), 0 0 20px rgba(46, 48, 146, 0.15) !important;
}

/* ==========================================================================
   PAGE 3: CAPABILITIES (SKINOPTIX AMETHYST & SAPPHIRE SYSTEM)
   ========================================================================== */
body[data-page="capabilities"] .hemato-mesh-hero {
  background: 
    radial-gradient(ellipse 75% 65% at 8% 12%, rgba(46, 48, 146, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 92% 25%, rgba(91, 66, 190, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 75% 20%, rgba(147, 111, 174, 0.12) 0%, transparent 48%),
    radial-gradient(circle at 50% 48%, rgba(46, 48, 146, 0.06) 0%, transparent 55%),
    linear-gradient(165deg, #f0f4fc 0%, #faf1f6 34%, #f7f3fb 58%, #ffffff 82%, #ffffff 100%) !important;
}

body[data-page="capabilities"] .hemato-bio-cluster {
  background-image: url('../images/bio-3d-capabilities.png') !important;
  background-color: transparent !important;
  filter: drop-shadow(0 20px 45px rgba(147, 111, 174, 0.22)) !important;
  animation: floatBioCap 22s ease-in-out infinite alternate !important;
}

@keyframes floatBioCap {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(18px, -18px, 0) rotate(7deg) scale(1.03); }
  100% { transform: translate3d(-14px, 16px, 0) rotate(-5deg) scale(0.97); }
}

body[data-page="capabilities"] .page-hero {
  background: 
    radial-gradient(circle at 75% 20%, rgba(147, 111, 174, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(46, 48, 146, 0.10) 0%, transparent 50%),
    transparent !important;
  border-bottom: 1px solid rgba(147, 111, 174, 0.15) !important;
}

body[data-page="capabilities"] .page-hero::before {
  border-color: rgba(147, 111, 174, 0.15) !important;
  box-shadow: 0 0 0 70px rgba(147, 111, 174, 0.05), 0 0 0 150px rgba(46, 48, 146, 0.03) !important;
}

body[data-page="capabilities"] .desktop-nav a.active,
body[data-page="capabilities"] .page-hero .section-kicker,
body[data-page="capabilities"] .section-kicker,
body[data-page="capabilities"] .page-hero h1 .hero-accent,
body[data-page="capabilities"] .capabilities-grid article span {
  color: #5B42BE !important;
  -webkit-text-fill-color: #5B42BE !important;
  font-weight: 800 !important;
}

body[data-page="capabilities"] .desktop-nav a.active::after,
body[data-page="capabilities"] .page-hero .section-kicker > span:first-child,
body[data-page="capabilities"] .section-kicker > span:first-child {
  background: #5B42BE !important;
  box-shadow: 0 0 8px rgba(91, 66, 190, 0.4) !important;
}

body[data-page="capabilities"] .button-primary,
body[data-page="capabilities"] .page-hero-actions .button-primary {
  background: linear-gradient(135deg, #6C2FA8 0%, #5B42BE 50%, #2D3490 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(46, 48, 146, 0.30) !important;
  border: none !important;
}

body[data-page="capabilities"] .capability-card:hover,
body[data-page="capabilities"] .capabilities-grid article:hover {
  border-color: rgba(147, 111, 174, 0.35) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.10), 0 0 20px rgba(147, 111, 174, 0.15) !important;
}

/* ==========================================================================
   PAGE 4: PRODUCTS (SERENE CRIMSON & SAPPHIRE SYSTEM)
   ========================================================================== */
body[data-page="products"] .hemato-mesh-hero {
  background: 
    radial-gradient(ellipse 75% 65% at 8% 12%, rgba(46, 48, 146, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 92% 25%, rgba(91, 66, 190, 0.14) 0%, transparent 60%),
    radial-gradient(circle at 75% 20%, rgba(91, 66, 190, 0.10) 0%, transparent 48%),
    radial-gradient(circle at 50% 48%, rgba(147, 111, 174, 0.06) 0%, transparent 55%),
    linear-gradient(165deg, #f0f4fc 0%, #faf1f6 34%, #f7f3fb 58%, #ffffff 82%, #ffffff 100%) !important;
}

body[data-page="products"] .hemato-bio-cluster {
  background-image: url('../images/bio-3d-products.png') !important;
  background-color: transparent !important;
  filter: drop-shadow(0 20px 45px rgba(91, 66, 190, 0.22)) !important;
  animation: floatBioProd 19s ease-in-out infinite alternate !important;
}

@keyframes floatBioProd {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(-18px, 18px, 0) rotate(-6deg) scale(1.04); }
  100% { transform: translate3d(15px, -16px, 0) rotate(5deg) scale(0.96); }
}

body[data-page="products"] .page-hero-products,
body[data-page="products"] .page-hero {
  background: 
    radial-gradient(circle at 75% 20%, rgba(91, 66, 190, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(46, 48, 146, 0.10) 0%, transparent 50%),
    transparent !important;
  border-bottom: 1px solid rgba(91, 66, 190, 0.15) !important;
}

body[data-page="products"] .page-hero-products::before {
  border-color: rgba(91, 66, 190, 0.15) !important;
  box-shadow: 0 0 0 70px rgba(91, 66, 190, 0.05), 0 0 0 150px rgba(46, 48, 146, 0.03) !important;
}

body[data-page="products"] .desktop-nav a.active,
body[data-page="products"] .page-hero-products .section-kicker,
body[data-page="products"] .section-kicker,
body[data-page="products"] .page-hero-products h1 .hero-accent,
body[data-page="products"] .catalog-group-header .catalog-badge {
  color: #5B42BE !important;
  -webkit-text-fill-color: #5B42BE !important;
  font-weight: 800 !important;
}

body[data-page="products"] .desktop-nav a.active::after,
body[data-page="products"] .page-hero-products .section-kicker > span:first-child,
body[data-page="products"] .section-kicker > span:first-child {
  background: #5B42BE !important;
  box-shadow: 0 0 8px rgba(91, 66, 190, 0.4) !important;
}

body[data-page="products"] .page-hero-products-visual {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 241, 244, 0.94) 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 20px 50px rgba(46, 48, 146, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  border-radius: 28px !important;
}

body[data-page="products"] .page-hero-products-visual .orbit-path {
  border-color: rgba(46, 48, 146, 0.18) !important;
}

body[data-page="products"] .therapy-orbit {
  background: rgba(255, 255, 255, 0.98) !important;
  color: #14172a !important;
  border: 1.5px solid rgba(46, 48, 146, 0.20) !important;
  box-shadow: 0 8px 24px rgba(46, 48, 146, 0.08) !important;
}

body[data-page="products"] .therapy-orbit:hover {
  border-color: #5B42BE !important;
  box-shadow: 0 12px 30px rgba(91, 66, 190, 0.22) !important;
  transform: scale(1.05) !important;
}

body[data-page="products"] .therapy-orbit .orbit-label {
  color: #14172a !important;
  -webkit-text-fill-color: #14172a !important;
  font-weight: 700 !important;
}

body[data-page="products"] .therapy-orbit .orbit-badge {
  background: #5B42BE !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(91, 66, 190, 0.35) !important;
}

body[data-page="products"] .therapy-centre {
  background: linear-gradient(135deg, #6C2FA8 0%, #5B42BE 50%, #2D3490 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 36px rgba(46, 48, 146, 0.30) !important;
}

body[data-page="products"] .therapy-centre strong,
body[data-page="products"] .therapy-centre span,
body[data-page="products"] .therapy-centre small {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body[data-page="products"] .catalog-nav-link {
  color: #14172a !important;
  font-weight: 700 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10) !important;
}

body[data-page="products"] .catalog-nav-link span {
  color: #5B42BE !important;
  font-weight: 800 !important;
}

body[data-page="products"] .button-primary,
body[data-page="products"] .page-hero-actions .button-primary,
body[data-page="products"] .catalog-search-btn,
body[data-page="products"] .search-btn {
  background: linear-gradient(135deg, #6C2FA8 0%, #5B42BE 50%, #2D3490 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(91, 66, 190, 0.30) !important;
  border: none !important;
}

body[data-page="products"] .catalog-card:hover,
body[data-page="products"] .product-card:hover {
  border-color: rgba(46, 48, 146, 0.35) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.10), 0 0 20px rgba(46, 48, 146, 0.15) !important;
}

/* ==========================================================================
   PAGE 5: QUALITY & CERTIFICATES (SERENE CRIMSON & SAPPHIRE SYSTEM)
   ========================================================================== */
body[data-page="quality"] .hemato-mesh-hero,
body[data-page="certificates"] .hemato-mesh-hero {
  background: 
    radial-gradient(ellipse 75% 65% at 8% 12%, rgba(46, 48, 146, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 92% 25%, rgba(91, 66, 190, 0.14) 0%, transparent 60%),
    radial-gradient(circle at 75% 20%, rgba(91, 66, 190, 0.10) 0%, transparent 48%),
    radial-gradient(circle at 50% 48%, rgba(147, 111, 174, 0.06) 0%, transparent 55%),
    linear-gradient(165deg, #f0f4fc 0%, #faf1f6 34%, #f7f3fb 58%, #ffffff 82%, #ffffff 100%) !important;
}

body[data-page="quality"] .hemato-bio-cluster,
body[data-page="certificates"] .hemato-bio-cluster {
  background-image: url('../images/bio-3d-quality.png') !important;
  background-color: transparent !important;
  filter: drop-shadow(0 20px 45px rgba(91, 66, 190, 0.22)) !important;
  animation: floatBioQual 21s ease-in-out infinite alternate !important;
}

@keyframes floatBioQual {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(16px, 20px, 0) rotate(-6deg) scale(1.03); }
  100% { transform: translate3d(-16px, -14px, 0) rotate(5deg) scale(0.97); }
}

body[data-page="quality"] .page-hero,
body[data-page="certificates"] .page-hero {
  background: 
    radial-gradient(circle at 75% 20%, rgba(91, 66, 190, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(46, 48, 146, 0.10) 0%, transparent 50%),
    transparent !important;
  border-bottom: 1px solid rgba(91, 66, 190, 0.15) !important;
}

body[data-page="quality"] .page-hero::before,
body[data-page="certificates"] .page-hero::before {
  border-color: rgba(91, 66, 190, 0.15) !important;
  box-shadow: 0 0 0 70px rgba(91, 66, 190, 0.05), 0 0 0 150px rgba(46, 48, 146, 0.03) !important;
}

body[data-page="quality"] .desktop-nav a.active,
body[data-page="certificates"] .desktop-nav a.active,
body[data-page="quality"] .page-hero .section-kicker,
body[data-page="certificates"] .page-hero .section-kicker,
body[data-page="quality"] .section-kicker,
body[data-page="certificates"] .section-kicker,
body[data-page="quality"] .page-hero h1 .hero-accent,
body[data-page="certificates"] .page-hero h1 .hero-accent,
body[data-page="quality"] .quality-step span,
body[data-page="certificates"] .quality-step span {
  color: #5B42BE !important;
  -webkit-text-fill-color: #5B42BE !important;
  font-weight: 800 !important;
}

body[data-page="quality"] .breadcrumbs a,
body[data-page="certificates"] .breadcrumbs a {
  color: #2e3092 !important;
  font-weight: 700 !important;
}

body[data-page="quality"] .desktop-nav a.active::after,
body[data-page="certificates"] .desktop-nav a.active::after,
body[data-page="quality"] .page-hero .section-kicker > span:first-child,
body[data-page="certificates"] .page-hero .section-kicker > span:first-child,
body[data-page="quality"] .section-kicker > span:first-child,
body[data-page="certificates"] .section-kicker > span:first-child {
  background: #5B42BE !important;
  box-shadow: 0 0 8px rgba(91, 66, 190, 0.4) !important;
}

body[data-page="quality"] .button-primary,
body[data-page="certificates"] .button-primary,
body[data-page="quality"] .page-hero-actions .button-primary,
body[data-page="certificates"] .page-hero-actions .button-primary {
  background: linear-gradient(135deg, #6C2FA8 0%, #5B42BE 50%, #2D3490 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(91, 66, 190, 0.30) !important;
  border: none !important;
}

body[data-page="quality"] .quality-pillars-layout article:hover,
body[data-page="quality"] .document-card:hover,
body[data-page="certificates"] .document-card:hover {
  border-color: rgba(91, 66, 190, 0.35) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.10), 0 0 20px rgba(91, 66, 190, 0.15) !important;
}

/* Quality Page -> Certificates Route Card */
.quality-cert-banner {
  padding: 30px 0 70px !important;
}

.cert-route-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(246, 248, 253, 0.95) 100%);
  border: 1px solid rgba(226, 230, 243, 0.9);
  border-left: 4px solid #5B42BE;
  border-radius: 20px;
  padding: 36px 44px;
  box-shadow: 0 16px 40px rgba(22, 25, 46, 0.06);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cert-route-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px rgba(22, 25, 46, 0.10);
}

.cert-route-content {
  display: flex;
  align-items: center;
  gap: 26px;
}

.cert-route-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(91, 66, 190, 0.08);
  border: 1px solid rgba(91, 66, 190, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cert-route-kicker {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #5B42BE;
  display: block;
  margin-bottom: 6px;
}

.cert-route-copy h3 {
  font-size: 21px;
  font-weight: 700;
  color: #16192e;
  margin: 0 0 6px 0;
}

.cert-route-copy p {
  font-size: 14.5px;
  line-height: 1.58;
  color: #4a5568;
  margin: 0;
  max-width: 640px;
}

.cert-route-action {
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .cert-route-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
    gap: 24px;
  }
  .cert-route-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* ==========================================================================
   PAGE 6: CONTACT (SERENE SAPPHIRE & CRIMSON SYSTEM)
   ========================================================================== */
body[data-page="contact"] .hemato-mesh-hero {
  background: 
    radial-gradient(ellipse 75% 65% at 8% 12%, rgba(46, 48, 146, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 92% 25%, rgba(91, 66, 190, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 75% 20%, rgba(15, 166, 216, 0.10) 0%, transparent 48%),
    radial-gradient(circle at 50% 48%, rgba(147, 111, 174, 0.06) 0%, transparent 55%),
    linear-gradient(165deg, #f0f4fc 0%, #faf1f6 34%, #f7f3fb 58%, #ffffff 82%, #ffffff 100%) !important;
}

body[data-page="contact"] .hemato-bio-cluster {
  width: 490px !important;
  height: 320px !important;
  top: 12% !important;
  right: 2.5% !important;
  background-image: none !important;
  background-color: transparent !important;
  pointer-events: none !important;
  cursor: default !important;
  z-index: 2 !important;
  animation: none !important;
}

body[data-page="contact"] .hemato-bio-cluster:active {
  cursor: default !important;
}

body[data-page="contact"] .hemato-bio-cluster::before {
  display: none !important;
}

.hemato-bio-contact-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  filter: drop-shadow(0 24px 48px rgba(46, 48, 146, 0.22)) drop-shadow(0 8px 20px rgba(15, 166, 216, 0.18)) !important;
  transform-origin: 50% 50% !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  will-change: transform !important;
}

@media (max-width: 1200px) {
  body[data-page="contact"] .hemato-bio-cluster {
    width: 420px !important;
    height: 275px !important;
    top: 14% !important;
    right: 2% !important;
  }
}

@media (max-width: 1024px) {
  body[data-page="contact"] .hemato-bio-cluster {
    width: 350px !important;
    height: 230px !important;
    top: 17% !important;
    right: 2% !important;
    opacity: 0.88 !important;
  }
}

@media (max-width: 768px) {
  body[data-page="contact"] .hemato-bio-cluster {
    width: 280px !important;
    height: 185px !important;
    top: 21% !important;
    right: 3% !important;
    opacity: 0.75 !important;
  }
}

body[data-page="contact"] .page-hero {
  background: 
    radial-gradient(circle at 75% 20%, rgba(46, 48, 146, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(91, 66, 190, 0.08) 0%, transparent 50%),
    transparent !important;
  border-bottom: 1px solid rgba(46, 48, 146, 0.15) !important;
}

body[data-page="contact"] .page-hero::before {
  border-color: rgba(46, 48, 146, 0.15) !important;
  box-shadow: 0 0 0 70px rgba(46, 48, 146, 0.05), 0 0 0 150px rgba(91, 66, 190, 0.03) !important;
}

body[data-page="contact"] .desktop-nav a.active,
body[data-page="contact"] .page-hero .section-kicker,
body[data-page="contact"] .section-kicker,
body[data-page="contact"] .contact-kicker,
body[data-page="contact"] .page-hero h1 .hero-accent {
  color: #5B42BE !important;
  -webkit-text-fill-color: #5B42BE !important;
  font-weight: 800 !important;
}

body[data-page="contact"] .desktop-nav a.active::after,
body[data-page="contact"] .page-hero .section-kicker > span:first-child,
body[data-page="contact"] .section-kicker > span:first-child,
body[data-page="contact"] .contact-kicker > span:first-child {
  background: #5B42BE !important;
  box-shadow: 0 0 8px rgba(91, 66, 190, 0.4) !important;
}

body[data-page="contact"] .button-primary,
body[data-page="contact"] .page-hero-actions .button-primary {
  background: linear-gradient(135deg, #6C2FA8 0%, #5B42BE 50%, #2D3490 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(91, 66, 190, 0.30) !important;
  border: none !important;
}

body[data-page="contact"] .contact-card:hover,
body[data-page="contact"] .contact-options article:hover,
body[data-page="contact"] .accreditation-card:hover {
  border-color: rgba(46, 48, 146, 0.35) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.10), 0 0 20px rgba(46, 48, 146, 0.15) !important;
}

/* Reveal Elements Safety: 100% visible text at all times */
[data-reveal="title-3d"],
[data-reveal="lines"],
[data-reveal="words"] {
  opacity: 1 !important;
}

/* ==========================================================================
   UNIVERSAL TEXT DISPLAY & CLARITY SAFEGUARDS
   ========================================================================== */
[data-reveal],
[data-reveal="title-3d"],
[data-reveal="lines"],
[data-reveal="words"],
.section-heading h2,
.section-kicker,
.section-intro,
.about-lead,
.visual-journey-heading h2,
.page-hero-copy h1,
.page-hero-copy p {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

.oaksun-word-mask,
.oaksun-line-mask,
.oaksun-3d-word,
.oaksun-word-inner,
.oaksun-line-inner,
.oaksun-3d-word-inner {
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.arrow-icon {
  display: inline-block !important;
}

.arrow-icon:empty::before {
  content: "\2192" !important;
  display: inline-block !important;
}

.floating-contact svg {
  display: inline-block !important;
  vertical-align: -2.5px !important;
  margin-right: 6px !important;
  fill: currentColor !important;
}


/* ==========================================================================
   LIGHT LUXURY PHARMACEUTICAL CTA SECTION & GLASS CARD
   ========================================================================== */
.contact-section {
  padding: clamp(48px, 6vw, 76px) 0 !important;
  background: transparent !important;
  position: relative !important;
  z-index: 5 !important;
}

.shell.contact-shell,
section.contact-section .shell.contact-shell,
section.contact-section .contact-shell,
body:not([data-page="home"]) .contact-shell,
.contact-shell {
  position: relative !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr) !important;
  align-items: center !important;
  gap: 56px !important;
  border-radius: 36px !important;
  border: 1.5px solid rgba(108, 47, 168, 0.16) !important;
  background: 
    radial-gradient(circle at 10% 15%, rgba(108, 47, 168, 0.08) 0%, transparent 48%),
    radial-gradient(circle at 90% 85%, rgba(91, 66, 190, 0.07) 0%, transparent 52%),
    radial-gradient(circle at 45% 100%, rgba(220, 225, 248, 0.6) 0%, transparent 60%),
    linear-gradient(135deg, #F8FAFE 0%, #F5F7FD 50%, #EFF2FB 100%) !important;
  padding: clamp(38px, 4.8vw, 68px) !important;
  box-shadow: 
    0 24px 60px -12px rgba(108, 47, 168, 0.10),
    0 4px 16px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-sizing: border-box !important;
  margin-inline: auto !important;
}

.contact-copy h2,
#shared-contact-title,
.contact-shell .contact-copy h2,
.contact-section .contact-copy h2,
body:not([data-page="home"]) .contact-shell .contact-copy h2 {
  color: #163074 !important;
  -webkit-text-fill-color: #163074 !important;
  font-size: clamp(28px, 3.4vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em !important;
  text-shadow: none !important;
  margin: 0 !important;
}

.contact-title-accent {
  background: linear-gradient(135deg, #6C2FA8 0%, #5B42BE 50%, #2D3490 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

.contact-shell .contact-copy p,
.contact-section .contact-copy p,
.contact-copy > p:not(.section-kicker),
body:not([data-page="home"]) .contact-shell .contact-copy > p {
  color: #4A588B !important;
  -webkit-text-fill-color: #4A588B !important;
  font-size: 16px !important;
  line-height: 1.68 !important;
  text-shadow: none !important;
}

.contact-shell .contact-kicker,
.contact-section .contact-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #5B42BE !important;
  -webkit-text-fill-color: #5B42BE !important;
  margin: 0 0 16px 0 !important;
  background: #E5E4FC !important;
  border: 1px solid rgba(108, 47, 168, 0.22) !important;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 10px rgba(91, 66, 190, 0.10) !important;
}

.contact-shell .contact-kicker > span:first-child,
.contact-section .contact-kicker > span:first-child {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #5B42BE !important;
  box-shadow: 0 0 8px #5B42BE, 0 0 14px rgba(91, 66, 190, 0.45) !important;
  animation: kickerPulse 1.8s infinite ease-in-out !important;
  flex-shrink: 0 !important;
}

.contact-trust-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 24px !important;
}

.trust-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid rgba(108, 47, 168, 0.20) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  color: #163074 !important;
  -webkit-text-fill-color: #163074 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 2px 8px rgba(108, 47, 168, 0.05) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.trust-chip svg {
  color: #5B42BE !important;
  stroke: #5B42BE !important;
  flex-shrink: 0 !important;
}

.contact-actions {
  margin-top: 32px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 14px !important;
}

.contact-actions .button-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, #6C2FA8 0%, #5B42BE 50%, #2D3490 100%) !important;
  border: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 750 !important;
  font-size: 15px !important;
  padding: 13px 28px !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 24px rgba(91, 66, 190, 0.35) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
}

.contact-actions .button-primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 30px rgba(91, 66, 190, 0.48) !important;
  filter: brightness(1.08) !important;
}

.contact-shell .contact-call,
body:not([data-page="home"]) .contact-shell .contact-call {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(108, 47, 168, 0.22) !important;
  color: #163074 !important;
  -webkit-text-fill-color: #163074 !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  padding: 12px 26px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(108, 47, 168, 0.06) !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
}

.contact-shell .contact-call:hover,
body:not([data-page="home"]) .contact-shell .contact-call:hover {
  background: #EEF0FD !important;
  border-color: #5B42BE !important;
  color: #5B42BE !important;
  -webkit-text-fill-color: #5B42BE !important;
  transform: translateY(-2px) !important;
}

.contact-actions .contact-call svg {
  color: #5B42BE !important;
  stroke: #5B42BE !important;
  flex-shrink: 0 !important;
}

/* Light Luxury Pharmaceutical Address Card */
.contact-card,
.contact-shell .contact-card,
body:not([data-page="home"]) .contact-shell .contact-card {
  border: 1.5px solid rgba(108, 47, 168, 0.16) !important;
  border-radius: 24px !important;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 254, 0.95) 100%) !important;
  padding: 32px 30px !important;
  font-style: normal !important;
  box-shadow: 
    0 18px 45px -8px rgba(108, 47, 168, 0.10),
    0 4px 16px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.contact-card:hover,
body:not([data-page="home"]) .contact-shell .contact-card:hover {
  border-color: rgba(108, 47, 168, 0.35) !important;
  box-shadow: 
    0 24px 55px -6px rgba(108, 47, 168, 0.16),
    0 0 25px rgba(91, 66, 190, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  transform: translateY(-3px) !important;
}

.card-badge-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
}

.card-dept-tag,
.contact-card .card-dept-tag,
.contact-card > div:first-child > span.card-dept-tag {
  font-size: 11.5px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  color: #5B42BE !important;
  -webkit-text-fill-color: #5B42BE !important;
  background: #E5E4FC !important;
  border: 1px solid rgba(108, 47, 168, 0.20) !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.card-dept-tag svg {
  color: #5B42BE !important;
  stroke: #5B42BE !important;
}

.contact-shell .contact-card .card-status-dot,
.contact-shell .contact-card .card-status-dot span,
.contact-card .card-status-dot,
.card-status-dot {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  color: #4A588B !important;
  -webkit-text-fill-color: #4A588B !important;
  font-weight: 650 !important;
}

.card-status-dot::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #10B981 !important;
  box-shadow: 0 0 8px #10B981, 0 0 14px rgba(16, 185, 129, 0.6) !important;
  animation: kickerPulse 1.8s infinite ease-in-out !important;
}

.contact-shell .contact-card strong,
.contact-card strong {
  display: block !important;
  color: #163074 !important;
  -webkit-text-fill-color: #163074 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 8px !important;
  text-shadow: none !important;
}

.contact-shell .contact-card p,
.contact-shell .contact-card .address-map-link,
.contact-card p,
.contact-card .address-map-link {
  color: #4A588B !important;
  -webkit-text-fill-color: #4A588B !important;
  font-size: 13.5px !important;
  line-height: 1.68 !important;
  text-decoration: none !important;
  display: block !important;
  transition: color 0.25s ease !important;
  position: relative !important;
  padding-left: 24px !important;
}

.contact-shell .contact-card .address-map-link::before,
.contact-card .address-map-link::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 3px !important;
  width: 16px !important;
  height: 16px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B42BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E") no-repeat center center / contain !important;
}

.contact-shell .contact-card .address-map-link:hover,
.contact-card .address-map-link:hover {
  color: #5B42BE !important;
  -webkit-text-fill-color: #5B42BE !important;
}

.contact-card-links {
  margin-top: 22px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(108, 47, 168, 0.14) !important;
  display: grid !important;
  gap: 10px !important;
}

.contact-shell .contact-card .contact-card-links a:not(.contact-map-pill),
.contact-card-links a:not(.contact-map-pill) {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #163074 !important;
  -webkit-text-fill-color: #163074 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 11px 15px !important;
  border-radius: 12px !important;
  background: #EEEFFE !important;
  border: 1px solid rgba(108, 47, 168, 0.16) !important;
  box-shadow: 0 2px 8px rgba(108, 47, 168, 0.04) !important;
  transition: all 0.25s ease !important;
}

.contact-shell .contact-card .contact-card-links a:not(.contact-map-pill):hover,
.contact-card-links a:not(.contact-map-pill):hover {
  background: #E5E4FC !important;
  border-color: #5B42BE !important;
  color: #5B42BE !important;
  -webkit-text-fill-color: #5B42BE !important;
  transform: translateX(3px) !important;
  box-shadow: 0 4px 15px rgba(91, 66, 190, 0.15) !important;
}

.contact-card-links a:not(.contact-map-pill) svg {
  color: #5B42BE !important;
  stroke: #5B42BE !important;
  flex-shrink: 0 !important;
}

.contact-shell .contact-card a.contact-map-pill,
.contact-shell .contact-card a.contact-map-pill span,
.contact-card a.contact-map-pill,
.contact-card a.contact-map-pill span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 750 !important;
}

.contact-shell .contact-card a.contact-map-pill,
.contact-card a.contact-map-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 6px !important;
  padding: 13px 18px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #6C2FA8 0%, #5B42BE 50%, #2D3490 100%) !important;
  border: none !important;
  font-size: 13.5px !important;
  font-weight: 750 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(91, 66, 190, 0.32) !important;
  transition: all 0.3s ease !important;
}

.contact-shell .contact-card a.contact-map-pill:hover,
.contact-card a.contact-map-pill:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 10px 28px rgba(91, 66, 190, 0.45) !important;
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   CONTACT SECTION & SHELL RESPONSIVE RULES (Mobile & Tablet Perfection)
   ========================================================================== */
@media (max-width: 860px) {
  .contact-section,
  section.contact-section {
    padding: 36px 0 44px 0 !important;
    overflow: hidden !important;
  }

  section.contact-section .shell.contact-shell,
  section.contact-section .contact-shell,
  body:not([data-page="home"]) .contact-shell,
  .shell.contact-shell,
  .contact-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100% - 32px, 720px) !important;
    max-width: calc(100% - 32px) !important;
    margin-inline: auto !important;
    gap: 24px !important;
    padding: 28px 20px !important;
    border-radius: 24px !important;
    box-sizing: border-box !important;
  }

  .contact-copy,
  .contact-shell .contact-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .contact-copy h2,
  #shared-contact-title,
  .contact-shell .contact-copy h2,
  .contact-section .contact-copy h2,
  body:not([data-page="home"]) .contact-shell .contact-copy h2 {
    font-size: clamp(20px, 5.2vw, 26px) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    margin-bottom: 12px !important;
  }

  .contact-title-accent {
    display: inline !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .contact-shell .contact-copy p,
  .contact-section .contact-copy p,
  .contact-copy > p:not(.section-kicker),
  body:not([data-page="home"]) .contact-shell .contact-copy > p {
    font-size: 14.5px !important;
    line-height: 1.58 !important;
    margin-bottom: 0 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .contact-trust-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 18px !important;
    width: 100% !important;
  }

  .trust-chip {
    font-size: 11.5px !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .contact-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 22px !important;
    width: 100% !important;
  }

  .contact-actions .button-primary,
  .contact-actions .contact-call,
  .contact-shell .contact-call,
  body:not([data-page="home"]) .contact-shell .contact-call {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 20px !important;
    font-size: 14.5px !important;
  }

  .contact-card,
  .contact-shell .contact-card,
  body:not([data-page="home"]) .contact-shell .contact-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 22px 18px !important;
    border-radius: 20px !important;
  }

  .card-badge-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom: 12px !important;
  }

  .contact-shell .contact-card strong,
  .contact-card strong {
    font-size: 16.5px !important;
    margin-bottom: 6px !important;
  }

  .contact-shell .contact-card p,
  .contact-card p {
    margin-bottom: 0 !important;
  }

  .contact-shell .contact-card .address-map-link,
  .contact-card .address-map-link {
    font-size: 13px !important;
    line-height: 1.6 !important;
    padding-left: 22px !important;
  }

  .contact-card-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    width: 100% !important;
  }

  .contact-shell .contact-card .contact-card-links a:not(.contact-map-pill),
  .contact-card-links a:not(.contact-map-pill) {
    font-size: 13px !important;
    padding: 10px 14px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .contact-shell .contact-card a.contact-map-pill,
  .contact-card a.contact-map-pill {
    padding: 11px 16px !important;
    font-size: 13.5px !important;
    justify-content: center !important;
    text-align: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 420px) {
  section.contact-section .shell.contact-shell,
  section.contact-section .contact-shell,
  body:not([data-page="home"]) .contact-shell,
  .shell.contact-shell,
  .contact-shell {
    width: min(100% - 24px, 720px) !important;
    max-width: calc(100% - 24px) !important;
    padding: 22px 16px !important;
    border-radius: 20px !important;
  }

  .contact-card,
  .contact-shell .contact-card,
  body:not([data-page="home"]) .contact-shell .contact-card {
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }
}

/* Assurance Section on Capabilities (Unified Clinical Aesthetic) */
.assurance-flow article span {
  color: #5B42BE !important;
  -webkit-text-fill-color: #5B42BE !important;
  font-weight: 800 !important;
}

/* Quality section on Quality page */
body:not([data-page="home"]) .quality-section .section-heading h2,
body:not([data-page="home"]) .quality-section .quality-step h3,
body:not([data-page="home"]) .quality-section .quality-quote p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body:not([data-page="home"]) .quality-section .section-intro,
body:not([data-page="home"]) .quality-section .quality-step p {
  color: rgba(240, 244, 255, 0.82) !important;
  -webkit-text-fill-color: rgba(240, 244, 255, 0.82) !important;
}

/* Assurance Section Contrast & Modern Card Presentation on Capabilities Page (Unified Clinical Light Look) */
.assurance-section {
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
  padding: clamp(72px, 8vw, 116px) 0 !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.assurance-section::before {
  display: none !important;
}

.assurance-layout {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr) !important;
  gap: clamp(48px, 6vw, 84px) !important;
  align-items: center !important;
}

.assurance-lead-col {
  display: flex !important;
  flex-direction: column !important;
}

.assurance-kicker-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  background: rgba(108, 47, 168, 0.08) !important;
  border: 1px solid rgba(108, 47, 168, 0.22) !important;
  border-radius: 999px !important;
  margin-bottom: 20px !important;
  width: fit-content !important;
}

.assurance-kicker-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #5B42BE !important;
  box-shadow: 0 0 10px rgba(91, 66, 190, 0.6) !important;
  animation: pulseGlow 2.4s infinite ease-in-out !important;
}

.assurance-kicker-text {
  font-size: 11.5px !important;
  font-weight: 750 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #5B42BE !important;
  -webkit-text-fill-color: #5B42BE !important;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
}

.assurance-section .section-heading h2,
.assurance-section h2,
.assurance-section #assurance-title,
.assurance-title {
  background: linear-gradient(135deg, #110e28 0%, #2e1d60 48%, #5a2e9d 85%, #7538be 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-size: clamp(34px, 4vw, 50px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  text-shadow: none !important;
  margin: 0 0 18px 0 !important;
}

.assurance-title-accent {
  background: linear-gradient(135deg, #6C2FA8 0%, #5B42BE 50%, #2D3490 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-style: normal !important;
  text-shadow: none !important;
}

.assurance-section .section-intro,
.assurance-intro {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: clamp(15px, 1.2vw, 17px) !important;
  line-height: 1.65 !important;
  margin: 0 0 28px 0 !important;
  max-width: 520px !important;
}

/* High-trust assurance pillars list */
.assurance-pillars-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-bottom: 32px !important;
  padding: 20px 22px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.90) !important;
  border: 1px solid rgba(108, 47, 168, 0.12) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 12px 32px rgba(91, 66, 190, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.assurance-pillar-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.assurance-pillar-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
  background: rgba(91, 66, 190, 0.08) !important;
  border: 1px solid rgba(91, 66, 190, 0.22) !important;
  color: #5B42BE !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(91, 66, 190, 0.12) !important;
}

.assurance-pillar-item strong {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #14172a !important;
  -webkit-text-fill-color: #14172a !important;
  letter-spacing: -0.01em !important;
}

.assurance-pillar-item span {
  display: block !important;
  font-size: 12px !important;
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  line-height: 1.4 !important;
  margin-top: 2px !important;
}

.assurance-cta-wrap {
  display: flex !important;
  align-items: center !important;
}

.assurance-cta-btn,
.assurance-section .button-light {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #6C2FA8 0%, #5B42BE 50%, #2D3490 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 750 !important;
  font-size: 14.5px !important;
  box-shadow: 0 8px 24px rgba(91, 66, 190, 0.32) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  text-decoration: none !important;
}

.assurance-cta-btn:hover,
.assurance-section .button-light:hover {
  background: linear-gradient(135deg, #5B42BE 0%, #462D94 50%, #1e2470 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(91, 66, 190, 0.42) !important;
}

.assurance-cta-btn .arrow-icon,
.assurance-section .button-light .arrow-icon {
  transition: transform 0.25s ease !important;
  font-weight: 800 !important;
}

.assurance-cta-btn:hover .arrow-icon,
.assurance-section .button-light:hover .arrow-icon {
  transform: translateX(4px) !important;
}

/* Right side cards flow */
.assurance-flow-wrapper {
  position: relative !important;
  width: 100% !important;
}

.assurance-flow {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  position: relative !important;
  z-index: 1 !important;
}

.assurance-card {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  padding: 24px 28px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(108, 47, 168, 0.12) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 10px 30px rgba(91, 66, 190, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: default !important;
  overflow: hidden !important;
  text-decoration: none !important;
}

.assurance-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 4px !important;
  height: 100% !important;
  background: var(--card-accent, #5B42BE) !important;
  opacity: 0.8 !important;
  transition: opacity 0.3s ease, width 0.3s ease !important;
}

.assurance-card:hover {
  transform: translateX(8px) !important;
  background: #ffffff !important;
  border-color: rgba(91, 66, 190, 0.32) !important;
  box-shadow: 0 18px 40px rgba(91, 66, 190, 0.14), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

.assurance-card:hover::before {
  opacity: 1 !important;
  width: 6px !important;
}

/* Stage-specific accents */
.assurance-card[data-step="01"] {
  --card-accent: #0284c7;
  --card-border-hover: rgba(2, 132, 199, 0.4);
  --card-glow: rgba(2, 132, 199, 0.15);
}

.assurance-card[data-step="02"] {
  --card-accent: #7c3aed;
  --card-border-hover: rgba(124, 58, 237, 0.4);
  --card-glow: rgba(124, 58, 237, 0.15);
}

.assurance-card[data-step="03"] {
  --card-accent: #2563eb;
  --card-border-hover: rgba(37, 99, 235, 0.4);
  --card-glow: rgba(37, 99, 235, 0.15);
}

.assurance-card[data-step="04"] {
  --card-accent: #16a34a;
  --card-border-hover: rgba(22, 163, 74, 0.45);
  --card-glow: rgba(22, 163, 74, 0.15);
}

.assurance-card-indicator {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: auto !important;
}

.assurance-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1.5px solid var(--card-accent, #5B42BE) !important;
  color: var(--card-accent, #5B42BE) !important;
  -webkit-text-fill-color: var(--card-accent, #5B42BE) !important;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease !important;
}

.assurance-card:hover .assurance-badge {
  transform: scale(1.06) !important;
  background: var(--card-accent, #5B42BE) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 4px 14px var(--card-accent, rgba(91, 66, 190, 0.35)) !important;
}

.assurance-step-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 12px !important;
  background: rgba(91, 66, 190, 0.06) !important;
  border: 1px solid rgba(91, 66, 190, 0.12) !important;
  color: var(--card-accent, #5B42BE) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

.assurance-card:hover .assurance-step-icon {
  background: rgba(91, 66, 190, 0.12) !important;
  border-color: var(--card-accent, #5B42BE) !important;
  transform: scale(1.05) !important;
}

.assurance-body {
  flex: 1 !important;
  min-width: 0 !important;
}

.assurance-meta-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 6px !important;
}

.assurance-stage-tag {
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--card-accent, #5B42BE) !important;
  -webkit-text-fill-color: var(--card-accent, #5B42BE) !important;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
}

.assurance-status-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: rgba(91, 66, 190, 0.07) !important;
  border: 1px solid rgba(91, 66, 190, 0.18) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

.status-pulse-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--card-accent, #5B42BE) !important;
  box-shadow: 0 0 6px var(--card-accent, #5B42BE) !important;
}

.status-chip-success {
  background: rgba(22, 163, 74, 0.1) !important;
  border-color: rgba(22, 163, 74, 0.3) !important;
  color: #15803d !important;
  -webkit-text-fill-color: #15803d !important;
}

.assurance-body h3 {
  margin: 0 0 4px 0 !important;
  font-size: 21px !important;
  font-weight: 750 !important;
  color: #14172a !important;
  -webkit-text-fill-color: #14172a !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
}

.assurance-body p {
  margin: 0 !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

@media (max-width: 900px) {
  .assurance-layout {
    grid-template-columns: 1fr !important;
    gap: 44px !important;
  }
  .assurance-pillars-list {
    max-width: 100% !important;
  }
}

@media (max-width: 600px) {
  .assurance-section {
    padding: 52px 0 68px 0 !important;
  }
  .assurance-section .section-heading h2,
  .assurance-section h2,
  .assurance-section #assurance-title,
  .assurance-title {
    font-size: clamp(26px, 7.5vw, 32px) !important;
    line-height: 1.2 !important;
  }
  .assurance-card {
    display: flex !important;
    align-items: center !important;
    padding: 16px 18px !important;
    gap: 16px !important;
    border-radius: 16px !important;
  }
  .assurance-card-indicator {
    padding-top: 0 !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: auto !important;
  }
  .assurance-badge {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }
  .assurance-step-icon {
    display: none !important;
  }
  .assurance-meta-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
    width: 100% !important;
  }
  .assurance-stage-tag {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    color: var(--card-accent, #5B42BE) !important;
    -webkit-text-fill-color: var(--card-accent, #5B42BE) !important;
  }
  .assurance-status-chip {
    padding: 4px 10px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    margin-left: auto !important;
  }
  .assurance-card[data-step="01"] .assurance-status-chip {
    margin-left: auto !important;
  }
  .assurance-body h3 {
    font-size: 18px !important;
    font-weight: 750 !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.25 !important;
  }
  .assurance-body p {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    margin: 0 !important;
  }
  .assurance-flow {
    gap: 14px !important;
    padding-bottom: 24px !important;
  }
  .assurance-cta-btn,
  .assurance-section .button-light {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   FULL-SCREEN HERO & FIRST SLIDE ARCHITECTURE (ALL PAGES)
   Ensures the first slide / hero fold on every page spans 100% of the viewport,
   is vertically centered, accounts for fixed header, and presents pristine layout.
   ========================================================================== */

/* 1. HOME PAGE: FULL-SCREEN CREATIVE HERO CAROUSEL */
.creative-hero {
  position: relative !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: 100vh !important;
  height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  padding-top: 76px !important;
  overflow: hidden !important;
}

.creative-hero-media,
.creative-slide-image,
.creative-hero-overlay,
.creative-hero-gridlines {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.creative-hero-shell {
  position: relative !important;
  z-index: 5 !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.54fr) !important;
  gap: clamp(32px, 5vw, 80px) !important;
  align-items: center !important;
  align-content: center !important;
  padding-top: clamp(12px, 2.5vh, 28px) !important;
  padding-bottom: clamp(12px, 2.5vh, 28px) !important;
  box-sizing: border-box !important;
}

.creative-hero-copy {
  max-width: 780px !important;
  align-self: center !important;
}

.hero-proof-grid {
  align-self: center !important;
  margin-bottom: 0 !important;
}

.creative-slider-controls {
  position: relative !important;
  z-index: 10 !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  margin-top: auto !important;
  border-top: 1px solid rgba(46, 48, 146, 0.12) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.slider-controls-inner {
  min-height: clamp(64px, 8.5vh, 88px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* 2. INNER PAGES: FULL-SCREEN HERO FOLD (ABOUT, CAPABILITIES, PRODUCTS, QUALITY, CERTIFICATES, CONTACT) */
body:not([data-page="home"]) section.page-hero,
body:not([data-page="home"]) section.page-hero-about,
body:not([data-page="home"]) section.page-hero-capabilities,
body:not([data-page="home"]) section.page-hero-products,
body:not([data-page="home"]) section.page-hero-quality,
body:not([data-page="home"]) section.page-hero-contact,
section.page-hero,
section.page-hero-about,
section.page-hero-capabilities,
section.page-hero-products,
section.page-hero-quality,
section.page-hero-contact {
  position: relative !important;
  min-height: calc(100vh - 106px) !important;
  min-height: calc(100dvh - 106px) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding-top: clamp(32px, 5vh, 60px) !important;
  padding-bottom: clamp(32px, 5vh, 60px) !important;
  overflow: hidden !important;
}

.page-hero-grid {
  position: relative !important;
  z-index: 2 !important;
  min-height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
  align-items: center !important;
  align-content: center !important;
  gap: clamp(40px, 6vw, 96px) !important;
  padding-top: clamp(12px, 2vh, 28px) !important;
  padding-bottom: clamp(12px, 2vh, 28px) !important;
  box-sizing: border-box !important;
}

.page-hero-copy {
  align-self: center !important;
  max-width: 680px !important;
}

/* ==========================================================================
   PAGE HERO VISUAL BOXES (ALL INNER PAGES)
   Guarantees pristine card proportions, clean edge-to-edge image framing,
   and prevents cards from inheriting section height or padding.
   ========================================================================== */
.page-hero-visual {
  position: relative !important;
  min-height: 480px !important;
  height: 480px !important;
  max-height: 520px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: block !important;
  align-self: center !important;
  overflow: hidden !important;
}

/* About Page Hero Visual Box */
.page-hero-visual.page-hero-about {
  min-height: 480px !important;
  height: 480px !important;
  max-height: 520px !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  border: 2px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 24px 65px rgba(46, 48, 146, 0.14), 0 0 35px rgba(91, 66, 190, 0.08) !important;
  background: #ffffff !important;
}

.page-hero-visual.page-hero-about img {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center 30% !important;
  display: block !important;
  border-radius: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform 0.6s var(--ease-1910) !important;
}

.page-hero-visual.page-hero-about:hover img {
  transform: scale(1.03) !important;
}

.page-hero-visual.page-hero-about::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, transparent 42%, rgba(46, 48, 146, 0.18) 72%, rgba(22, 25, 46, 0.65) 100%) !important;
  pointer-events: none !important;
  border-radius: 30px !important;
}

.page-hero-visual.page-hero-about .page-hero-float-card {
  position: absolute !important;
  z-index: 5 !important;
  right: 18px !important;
  bottom: 18px !important;
  left: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  padding: 14px 22px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 16px 40px rgba(22, 25, 46, 0.12) !important;
}

.page-hero-visual.page-hero-about .page-hero-float-card strong {
  background: linear-gradient(135deg, #5B42BE 0%, #2e3092 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

.page-hero-visual.page-hero-about .page-hero-float-card span {
  color: #4e546b !important;
  font-size: 12.5px !important;
  font-weight: 550 !important;
}

/* Capabilities Page Visual Box */
.page-hero-visual.page-hero-capabilities {
  min-height: 440px !important;
  height: 440px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Products Page Visual Box */
.page-hero-visual.page-hero-products-visual,
.page-hero-products-visual {
  min-height: 440px !important;
  height: 440px !important;
  border-radius: 28px !important;
  overflow: hidden !important;
}

/* Quality Page Visual Box */
.page-hero-visual.page-hero-quality {
  min-height: 440px !important;
  height: 440px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Contact Page Visual Box */
.page-hero-visual.page-hero-contact {
  min-height: 380px !important;
  height: 380px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* 3. RESPONSIVE FULL-SCREEN RETENTION (MOBILE & TABLET) */
@media (max-width: 860px) {
  .creative-hero {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: auto !important;
    padding-top: 72px !important;
    padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }

  .creative-hero-shell {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  /* ==========================================================================
     FIRST SLIDE HERO FOLD - FULL-SCREEN MOBILE (ALL PAGES EXCEPT HOME)
     ========================================================================== */
  body:not([data-page="home"]) section.page-hero,
  body:not([data-page="home"]) section.page-hero-about,
  body:not([data-page="home"]) section.page-hero-capabilities,
  body:not([data-page="home"]) section.page-hero-products,
  body:not([data-page="home"]) section.page-hero-quality,
  body:not([data-page="home"]) section.page-hero-contact {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-top: max(74px, calc(60px + env(safe-area-inset-top))) !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
  }

  body:not([data-page="home"]) .page-hero-grid {
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: clamp(32px, 4.6vh, 44px) !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Breadcrumbs on inner page heroes: clean rounded pill tag */
  .page-hero-copy .breadcrumbs {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    width: fit-content !important;
    max-width: 100% !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(46, 48, 146, 0.12) !important;
    box-shadow: 0 2px 10px rgba(22, 25, 46, 0.04) !important;
    margin-bottom: 10px !important;
  }

  .page-hero-copy .breadcrumbs a,
  body[data-page="products"] .page-hero-copy .breadcrumbs a,
  .page-hero-products .breadcrumbs a {
    color: #1e257a !important;
    -webkit-text-fill-color: #1e257a !important;
    font-weight: 700 !important;
  }

  .page-hero-copy .breadcrumbs a:hover,
  body[data-page="products"] .page-hero-copy .breadcrumbs a:hover,
  .page-hero-products .breadcrumbs a:hover {
    color: #5B42BE !important;
    -webkit-text-fill-color: #5B42BE !important;
  }

  /* Kicker on inner page heroes */
  .page-hero-copy .section-kicker {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #5B42BE !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    line-height: 1.25 !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }

  /* Mobile Page Hero Typography Harmonization: matches desktop WebView editorial layout */
  body:not([data-page="home"]) .page-hero-copy h1,
  .page-hero-copy h1 {
    font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: clamp(28px, 7.8vw, 36px) !important;
    line-height: 1.14 !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    color: #14172a !important;
    -webkit-text-fill-color: #14172a !important;
    text-shadow: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    margin-top: 2px !important;
    margin-bottom: 14px !important;
  }

  body:not([data-page="home"]) .page-hero-copy h1 .hero-accent,
  .page-hero-copy h1 .hero-accent {
    font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif) !important;
    font-style: normal !important;
    font-weight: inherit !important;
    background: linear-gradient(135deg, #6C2FA8 0%, #5B42BE 50%, #2D3490 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline !important;
  }

  .page-hero-copy > p:not(.section-kicker) {
    font-size: 14.5px !important;
    line-height: 1.62 !important;
    font-weight: 400 !important;
    color: #334155 !important;
    max-width: 100% !important;
    margin-top: 6px !important;
    margin-bottom: 18px !important;
    padding-right: 0 !important;
  }

  /* Mobile Hero Action Buttons: full-width touch targets with seamless vertical stacking */
  .page-hero-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 14px !important;
    margin-bottom: 0 !important;
  }

  .page-hero-actions .button,
  body:not([data-page="home"]) .page-hero-actions .button {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    padding: 13px 24px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }

  .page-hero-actions .button-primary,
  body:not([data-page="home"]) .page-hero-actions .button-primary {
    background: linear-gradient(135deg, #6C2FA8 0%, #5B42BE 50%, #2D3490 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(46, 48, 146, 0.25) !important;
  }

  .page-hero-actions .button-secondary,
  body:not([data-page="home"]) .page-hero-actions .button-secondary {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #16192e !important;
    border: 1.5px solid rgba(46, 48, 146, 0.16) !important;
    box-shadow: 0 4px 14px rgba(22, 25, 46, 0.05) !important;
    min-height: 46px !important;
    font-weight: 650 !important;
  }

  .page-hero-actions .button .arrow-icon {
    margin-left: 6px !important;
    flex-shrink: 0 !important;
  }

  /* Soften background 3D canvas and ambient lenses on non-home mobile for effortless legibility */
  body:not([data-page="home"]) #hemato-canvas {
    opacity: 0.18 !important;
  }

  body:not([data-page="home"]) .hemato-bio-cluster {
    opacity: 0.22 !important;
  }

  body:not([data-page="home"]) .hemato-lens {
    opacity: 0.25 !important;
  }

  /* --- 1. About Hero Visual (Clinical Research Photo + Floating Glass Badge) --- */
  .page-hero-visual.page-hero-about {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 2px solid #ffffff !important;
    border-radius: 26px !important;
    box-shadow: 0 16px 45px rgba(46, 48, 146, 0.08), 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    padding: 8px !important;
    height: clamp(160px, 22vh, 200px) !important;
    min-height: 150px !important;
    max-height: 210px !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .page-hero-visual.page-hero-about img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    border-radius: 20px !important;
  }

  .page-hero-visual.page-hero-about .page-hero-float-card {
    position: absolute !important;
    bottom: 14px !important;
    left: 14px !important;
    right: 14px !important;
    padding: 9px 14px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(22, 25, 46, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .page-hero-visual.page-hero-about .page-hero-float-card strong {
    font-size: 15px !important;
    color: #0c0f1d !important;
  }

  .page-hero-visual.page-hero-about .page-hero-float-card span {
    font-size: 11px !important;
    color: #475569 !important;
  }

  /* --- 2. Capabilities Hero Visual (Interactive 3-Card Stack Widget) --- */
  .page-hero-visual.page-hero-capabilities {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 2px solid #ffffff !important;
    border-radius: 26px !important;
    box-shadow: 0 16px 45px rgba(46, 48, 146, 0.08), 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 12px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 auto !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  .page-hero-visual.page-hero-capabilities .cap-stack {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 14px !important;
    padding: 10px 14px 10px 52px !important;
    background: #ffffff !important;
    border: 1px solid rgba(46, 48, 146, 0.10) !important;
    box-shadow: 0 4px 14px rgba(22, 25, 46, 0.05) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }

  .page-hero-visual.page-hero-capabilities .cap-stack > span {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: rgba(46, 48, 146, 0.08) !important;
    color: #2e3092 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .page-hero-visual.page-hero-capabilities .cap-stack .cap-icon {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    opacity: 0.85 !important;
  }

  .page-hero-visual.page-hero-capabilities .cap-stack strong {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0c0f1d !important;
  }

  .page-hero-visual.page-hero-capabilities .cap-stack small {
    font-size: 11.5px !important;
    color: #64748b !important;
    margin-top: 1px !important;
  }

  /* --- 3. Products Hero Visual (Centred Formulation Orbit System) --- */
  .page-hero-visual.page-hero-products-visual,
  .page-hero-products-visual {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 2px solid #ffffff !important;
    border-radius: 26px !important;
    box-shadow: 0 16px 45px rgba(46, 48, 146, 0.08), 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    height: clamp(170px, 23vh, 210px) !important;
    min-height: 160px !important;
    max-height: 220px !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .page-hero-products-visual .therapy-centre {
    width: 90px !important;
    height: 90px !important;
    border-radius: 50% !important;
    z-index: 5 !important;
  }

  .page-hero-products-visual .therapy-centre strong {
    font-size: 22px !important;
    line-height: 1 !important;
  }

  .page-hero-products-visual .therapy-centre span {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    margin-top: 2px !important;
  }

  .page-hero-products-visual .therapy-centre small {
    font-size: 11px !important;
    margin-top: 2px !important;
  }

  .page-hero-products-visual .orbit-path-inner { width: 120px !important; height: 120px !important; }
  .page-hero-products-visual .orbit-path-mid { width: 175px !important; height: 175px !important; }
  .page-hero-products-visual .orbit-path-outer { width: 230px !important; height: 230px !important; }

  .page-hero-products-visual .therapy-orbit {
    padding: 3px 9px 3px 3px !important;
    gap: 5px !important;
    border-radius: 999px !important;
    z-index: 6 !important;
  }

  .page-hero-products-visual .orbit-badge { width: 22px !important; height: 22px !important; font-size: 11px !important; }
  .page-hero-products-visual .orbit-label { font-size: 11.5px !important; font-weight: 700 !important; }
  .page-hero-products-visual .orbit-one { top: 7% !important; left: 4% !important; }
  .page-hero-products-visual .orbit-two { top: 9% !important; right: 4% !important; }
  .page-hero-products-visual .orbit-three { bottom: 9% !important; right: 4% !important; }
  .page-hero-products-visual .orbit-four { bottom: 7% !important; left: 4% !important; }

  /* --- 4. Quality & Certificates Hero Visual (Certification Seal & Verification Documents) --- */
  .page-hero-visual.page-hero-quality {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 2px solid #ffffff !important;
    border-radius: 26px !important;
    box-shadow: 0 16px 45px rgba(46, 48, 146, 0.08), 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    height: clamp(160px, 21vh, 195px) !important;
    min-height: 150px !important;
    max-height: 205px !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .page-hero-visual.page-hero-quality .quality-seal {
    left: 32% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90px !important;
    height: 90px !important;
    box-shadow: 0 0 0 12px rgba(91, 66, 190, 0.04), 0 12px 28px rgba(22, 25, 46, 0.1) !important;
  }

  .page-hero-visual.page-hero-quality .quality-seal span {
    font-size: 26px !important;
  }

  .page-hero-visual.page-hero-quality .quality-seal .quality-seal-svg {
    width: 42px !important;
    height: 42px !important;
  }

  .page-hero-visual.page-hero-quality .quality-doc {
    width: 78px !important;
    height: 110px !important;
    padding: 14px 8px !important;
    border-radius: 10px !important;
  }

  .page-hero-visual.page-hero-quality .doc-one {
    top: 14px !important;
    right: 16px !important;
  }

  .page-hero-visual.page-hero-quality .doc-two {
    right: 46px !important;
    bottom: 12px !important;
  }

  .page-hero-visual.page-hero-quality .quality-stamp {
    right: 12px !important;
    bottom: 10px !important;
    font-size: 11px !important;
  }

  /* --- 5. Contact Hero Visual (Interactive Network Map & Regional Hub Nodes) --- */
  .page-hero-visual.page-hero-contact {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 2px solid #ffffff !important;
    border-radius: 26px !important;
    box-shadow: 0 16px 45px rgba(46, 48, 146, 0.08), 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    min-height: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .page-hero-contact .contact-hub-map {
    position: relative !important;
    width: 100% !important;
    height: 230px !important;
    min-height: 215px !important;
    max-height: 245px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: rgba(240, 244, 252, 0.55) !important;
  }
}

/* ==========================================================================
   PURPOSE CARD & STORY CARDS - STRICT LOGO COLOR HARMONIZATION
   Replaces dark slate overlay and off-brand peach text with Serene Royal Sapphire & Crimson
   ========================================================================== */
.home-about-image-large {
  border-radius: 28px 28px 78px 28px !important;
  overflow: hidden !important;
  border: 2px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 24px 60px rgba(46, 48, 146, 0.12), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  position: relative !important;
}

.home-about-image-large::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg,
    transparent 60%,
    rgba(22, 25, 46, 0.08) 85%,
    rgba(22, 25, 46, 0.16) 100%
  ) !important;
  pointer-events: none !important;
}

.home-about-caption {
  position: absolute !important;
  z-index: 5 !important;
  right: 22px !important;
  bottom: 22px !important;
  left: 22px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 20px !important;
  padding: 18px 24px !important;
  box-shadow: 0 16px 40px rgba(46, 48, 146, 0.10), 0 4px 14px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

.home-about-image-large:hover .home-about-caption {
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 48px rgba(46, 48, 146, 0.15), 0 6px 18px rgba(0, 0, 0, 0.06) !important;
}

.home-about-caption span {
  color: #5B42BE !important; /* Strict Serene Crimson Rose */
  -webkit-text-fill-color: #5B42BE !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
  text-shadow: none !important;
}

.home-about-caption span::before {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 2px !important;
  background: #5B42BE !important;
  box-shadow: 0 0 6px rgba(91, 66, 190, 0.4) !important;
  border-radius: 99px !important;
}

.home-about-caption strong {
  color: #14172a !important; /* Obsidian Ink */
  -webkit-text-fill-color: #14172a !important;
  font-size: clamp(20px, 2.2vw, 25px) !important;
  font-weight: 750 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.25 !important;
  text-shadow: none !important;
  margin-top: 0 !important;
}

/* Secondary mini-row below large card */
.home-about-mini-row {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 16px 40px rgba(46, 48, 146, 0.10), 0 4px 14px rgba(0, 0, 0, 0.04) !important;
  border-radius: 20px !important;
}

.home-about-mini-row blockquote {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  font-weight: 550 !important;
}

/* Visual Story Cards (The Serene Continuum) - Strict Logo Color System */
.visual-story-shade {
  background: linear-gradient(
    180deg,
    transparent 20%,
    rgba(46, 48, 146, 0.25) 48%,
    rgba(46, 48, 146, 0.72) 72%,
    rgba(28, 29, 92, 0.92) 100%
  ) !important;
}

.visual-story-shade {
  background: linear-gradient(
    180deg,
    transparent 15%,
    rgba(10, 16, 36, 0.35) 45%,
    rgba(8, 14, 34, 0.78) 68%,
    rgba(6, 11, 26, 0.96) 100%
  ) !important;
}

.visual-story-card:hover .visual-story-shade {
  background: linear-gradient(
    180deg,
    transparent 10%,
    rgba(30, 24, 64, 0.45) 42%,
    rgba(40, 20, 65, 0.85) 68%,
    rgba(20, 10, 38, 0.98) 100%
  ) !important;
}

.visual-story-copy > span {
  display: inline-block !important;
  color: #A892F7 !important;
  -webkit-text-fill-color: #A892F7 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7), 0 0 14px rgba(168, 146, 247, 0.35) !important;
  margin-bottom: 6px !important;
}

.visual-story-copy h3 {
  margin: 4px 0 8px 0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 25px !important;
  font-weight: 750 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.22 !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.visual-story-copy p {
  margin: 0 42px 0 0 !important;
  color: rgba(255, 255, 255, 0.94) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.94) !important;
  font-size: 13.5px !important;
  line-height: 1.58 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75) !important;
}

.visual-story-card {
  border-color: rgba(46, 48, 146, 0.18) !important;
}

.visual-story-card:hover {
  border-color: #5B42BE !important;
  box-shadow: 0 28px 64px rgba(46, 48, 146, 0.22), 0 0 0 1px rgba(91, 66, 190, 0.30) !important;
}

/* ==========================================================================
   HOME STAT RIBBON - UNIFIED FROSTED PORCELAIN DOCK REDESIGN
   Replaces colliding rounded boxes and slicing background line with a single,
   seamless, executive pharmaceutical highlights dock.
   ========================================================================== */
.home-stat-ribbon {
  margin-top: 56px !important;
  margin-bottom: 24px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1.5px solid rgba(46, 48, 146, 0.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 46px rgba(46, 48, 146, 0.09), 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 2 !important;
}

.home-stat-ribbon article {
  min-height: 104px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 22px 32px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  transition: background 0.25s ease !important;
}

.home-stat-ribbon article:hover {
  background: rgba(46, 48, 146, 0.035) !important;
}

.home-stat-ribbon article + article {
  border-left: 1px solid rgba(46, 48, 146, 0.12) !important;
}

.home-stat-ribbon span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #5B42BE !important; /* Serene Crimson Rose */
  -webkit-text-fill-color: #5B42BE !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

.home-stat-ribbon span::before {
  content: "" !important;
  display: inline-block !important;
  width: 10px !important;
  height: 2px !important;
  background: #5B42BE !important;
  border-radius: 99px !important;
  box-shadow: 0 0 6px rgba(91, 66, 190, 0.35) !important;
}

.home-stat-ribbon strong {
  display: block !important;
  color: #14172a !important; /* Obsidian Ink */
  -webkit-text-fill-color: #14172a !important;
  font-size: clamp(19px, 1.7vw, 23px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
}

@media (max-width: 960px) and (min-width: 601px) {
  .home-stat-ribbon {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-radius: 18px !important;
  }
  .home-stat-ribbon article {
    min-height: 94px !important;
    padding: 18px 24px !important;
  }
  .home-stat-ribbon article:nth-child(2) {
    border-left: 1px solid rgba(46, 48, 146, 0.12) !important;
  }
  .home-stat-ribbon article:nth-child(3) {
    border-top: 1px solid rgba(46, 48, 146, 0.12) !important;
    border-left: none !important;
  }
  .home-stat-ribbon article:nth-child(4) {
    border-top: 1px solid rgba(46, 48, 146, 0.12) !important;
    border-left: 1px solid rgba(46, 48, 146, 0.12) !important;
  }
}

@media (max-width: 600px) {
  .home-stat-ribbon {
    grid-template-columns: 1fr !important;
    border-radius: 16px !important;
    margin-top: 36px !important;
  }
  .home-stat-ribbon article {
    min-height: 80px !important;
    padding: 16px 20px !important;
  }
  .home-stat-ribbon article + article {
    border-left: none !important;
    border-top: 1px solid rgba(46, 48, 146, 0.12) !important;
  }
  .home-stat-ribbon strong {
    font-size: 18px !important;
  }
}

/* ==========================================================================
   CAPABILITIES SECTION LUXURY UPGRADE (EXECUTIVE MEDICAL CRAFTSMANSHIP)
   Frosted porcelain cards, precision medical iconography, ambient glow,
   and executive support dock.
   ========================================================================== */
.capability-grid {
  margin-top: 52px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

.capability-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 380px !important;
  padding: 34px 22px 26px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1.5px solid rgba(46, 48, 146, 0.12) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 42px rgba(46, 48, 146, 0.08), 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  overflow: hidden !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease !important;
}

.capability-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3.5px !important;
  background: linear-gradient(90deg, #2D3490 0%, #5B42BE 50%, #6C2FA8 100%) !important;
  opacity: 0.85 !important;
  transition: height 0.3s ease, opacity 0.3s ease !important;
}

.capability-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(91, 66, 190, 0.40) !important;
  box-shadow: 0 28px 64px rgba(46, 48, 146, 0.15), 0 0 0 1px rgba(91, 66, 190, 0.20) !important;
}

.capability-card:hover::before {
  height: 5px !important;
  opacity: 1 !important;
}

.capability-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 24px !important;
}

.capability-card .card-number {
  width: 44px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: rgba(91, 66, 190, 0.08) !important;
  border: 1px solid rgba(91, 66, 190, 0.22) !important;
  color: #5B42BE !important;
  -webkit-text-fill-color: #5B42BE !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
}

.capability-icon {
  width: 52px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(46, 48, 146, 0.06) 0%, rgba(91, 66, 190, 0.05) 100%) !important;
  border: 1px solid rgba(46, 48, 146, 0.10) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, box-shadow 0.3s ease !important;
}

.capability-card:hover .capability-icon {
  transform: translateY(-2px) scale(1.08) !important;
  background: linear-gradient(135deg, rgba(46, 48, 146, 0.12) 0%, rgba(91, 66, 190, 0.10) 100%) !important;
  box-shadow: 0 8px 20px rgba(46, 48, 146, 0.14) !important;
}

.capability-card h3 {
  margin: 0 0 14px !important;
  color: #14172a !important;
  -webkit-text-fill-color: #14172a !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.25 !important;
}

.capability-card p {
  margin: 0 !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: 15px !important;
  line-height: 1.68 !important;
  font-weight: 450 !important;
}

.capability-card .card-detail {
  margin-top: auto !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(46, 48, 146, 0.10) !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: clamp(8.5px, 0.72vw, 10.5px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
  color: #2e3092 !important;
  -webkit-text-fill-color: #2e3092 !important;
  overflow: hidden !important;
}

.capability-card .card-detail span {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.capability-card .card-detail .detail-sep {
  color: #5B42BE !important;
  -webkit-text-fill-color: #5B42BE !important;
  font-size: 10px !important;
  opacity: 0.75 !important;
  flex-shrink: 0 !important;
}

/* Redesigned Support Strip */
.support-strip {
  margin-top: 28px !important;
  min-height: 64px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(46, 48, 146, 0.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 36px rgba(46, 48, 146, 0.07), 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  overflow: hidden !important;
}

.support-strip span {
  padding: 16px 20px !important;
  color: #14172a !important;
  -webkit-text-fill-color: #14172a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-align: center !important;
  transition: background 0.25s ease, color 0.25s ease !important;
}

.support-strip span::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #5B42BE !important;
  box-shadow: 0 0 6px rgba(91, 66, 190, 0.5) !important;
  flex-shrink: 0 !important;
}

.support-strip span:hover {
  background: rgba(46, 48, 146, 0.04) !important;
  color: #2e3092 !important;
  -webkit-text-fill-color: #2e3092 !important;
}

.support-strip span + span {
  border-left: 1px solid rgba(46, 48, 146, 0.10) !important;
}

@media (max-width: 960px) and (min-width: 601px) {
  .capability-grid {
    grid-template-columns: 1fr !important;
  }
  .capability-card {
    min-height: auto !important;
  }
  .support-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-radius: 16px !important;
  }
  .support-strip span:nth-child(2) {
    border-left: 1px solid rgba(46, 48, 146, 0.10) !important;
  }
  .support-strip span:nth-child(3) {
    border-left: none !important;
    border-top: 1px solid rgba(46, 48, 146, 0.10) !important;
  }
  .support-strip span:nth-child(4) {
    border-left: 1px solid rgba(46, 48, 146, 0.10) !important;
    border-top: 1px solid rgba(46, 48, 146, 0.10) !important;
  }
}

@media (max-width: 600px) {
  .capability-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .capability-card {
    padding: 26px 22px 22px !important;
    min-height: auto !important;
    border-radius: 18px !important;
  }
  .support-strip {
    grid-template-columns: 1fr !important;
    border-radius: 16px !important;
    margin-top: 20px !important;
  }
  .support-strip span + span {
    border-left: none !important;
    border-top: 1px solid rgba(46, 48, 146, 0.10) !important;
  }
}

/* ==========================================================================
   QUALITY FRAMEWORK 4-STEP LUXURY UPGRADE (EXECUTIVE PROCESS CARDS)
   Frosted porcelain cards with precision medical icons, top brand gradient,
   pill badges, and smooth hover elevation.
   ========================================================================== */
.quality-grid,
.quality-process-grid {
  margin-top: 52px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

.quality-step,
.quality-process-grid article {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 330px !important;
  padding: 30px 24px 24px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1.5px solid rgba(46, 48, 146, 0.12) !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 40px rgba(46, 48, 146, 0.08), 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  overflow: hidden !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease !important;
}

.quality-step + .quality-step,
.quality-process-grid article + article {
  border-left: 1.5px solid rgba(46, 48, 146, 0.12) !important;
}

.quality-step::before,
.quality-process-grid article::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3.5px !important;
  background: linear-gradient(90deg, #2D3490 0%, #5B42BE 50%, #6C2FA8 100%) !important;
  opacity: 0.85 !important;
  transition: height 0.3s ease, opacity 0.3s ease !important;
}

.quality-step:hover,
.quality-process-grid article:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(91, 66, 190, 0.40) !important;
  box-shadow: 0 26px 60px rgba(46, 48, 146, 0.15), 0 0 0 1px rgba(91, 66, 190, 0.20) !important;
}

.quality-step:hover::before,
.quality-process-grid article:hover::before {
  height: 5px !important;
  opacity: 1 !important;
}

.quality-step-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 22px !important;
}

.quality-step .card-number,
.quality-process-grid article .card-number {
  width: 44px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: rgba(91, 66, 190, 0.08) !important;
  border: 1px solid rgba(91, 66, 190, 0.22) !important;
  color: #5B42BE !important;
  -webkit-text-fill-color: #5B42BE !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
}

.step-icon {
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(46, 48, 146, 0.06) 0%, rgba(91, 66, 190, 0.05) 100%) !important;
  border: 1px solid rgba(46, 48, 146, 0.10) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, box-shadow 0.3s ease !important;
}

.quality-step:hover .step-icon,
.quality-process-grid article:hover .step-icon {
  transform: translateY(-2px) scale(1.08) !important;
  background: linear-gradient(135deg, rgba(46, 48, 146, 0.12) 0%, rgba(91, 66, 190, 0.10) 100%) !important;
  box-shadow: 0 8px 18px rgba(46, 48, 146, 0.14) !important;
}

.quality-step h3,
.quality-process-grid article h3 {
  margin: 0 0 10px !important;
  color: #14172a !important;
  -webkit-text-fill-color: #14172a !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.25 !important;
}

.quality-step p,
.quality-process-grid article p {
  margin: 0 !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: 14.5px !important;
  line-height: 1.62 !important;
  font-weight: 450 !important;
}

.step-stage {
  margin-top: auto !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(46, 48, 146, 0.10) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #2e3092 !important;
  -webkit-text-fill-color: #2e3092 !important;
  white-space: nowrap !important;
}

.step-stage .stage-sep {
  color: #5B42BE !important;
  -webkit-text-fill-color: #5B42BE !important;
  font-size: 10px !important;
  opacity: 0.75 !important;
}

@media (max-width: 1080px) and (min-width: 681px) {
  .quality-grid,
  .quality-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

@media (max-width: 680px) {
  .quality-grid,
  .quality-process-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .quality-step,
  .quality-process-grid article {
    min-height: auto !important;
    padding: 24px 20px 20px !important;
    border-radius: 18px !important;
  }
}

/* ==========================================================================
   MANUFACTURING RADAR & CENTRAL DISPATCH HUB LUXURY REDESIGN
   Flawless symmetrical alignment, elimination of red background clipping box,
   and executive high-contrast typography.
   ========================================================================== */
.network-hub-card,
.network-hub-card.node-centre {
  position: absolute !important;
  top: 52.2% !important;
  left: 50% !important;
  z-index: 15 !important;
  transform: translate(-50%, -50%) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  user-select: none !important;
}

.network-hub-card .hub-content {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: linear-gradient(135deg, #6C2FA8 0%, #5B42BE 50%, #2D3490 100%) !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  padding: 10px 24px 10px 14px !important;
  box-shadow: 
    0 16px 36px -4px rgba(91, 66, 190, 0.45),
    0 6px 18px rgba(46, 48, 146, 0.25),
    inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
}

.network-hub-card:hover .hub-content,
.network-hub-card:focus-visible .hub-content {
  transform: scale(1.06) !important;
  box-shadow: 
    0 22px 48px -4px rgba(91, 66, 190, 0.60),
    0 8px 24px rgba(46, 48, 146, 0.35),
    inset 0 1px 2.5px rgba(255, 255, 255, 0.8) !important;
}

.hub-text-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.hub-label-kicker {
  font-family: var(--font-mono, monospace) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  line-height: 1 !important;
  margin-bottom: 3px !important;
  opacity: 0.95 !important;
}

h3.hub-title,
.network-hub-card h3,
.hub-title {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  line-height: 1.15 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
}

.hub-meta {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
  line-height: 1.1 !important;
  margin-top: 2px !important;
}

.hub-icon-wrap {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.22) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 12px rgba(255, 255, 255, 0.3) !important;
}

.hub-icon-wrap svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #ffffff !important;
}

/* Symmetrical Precision Alignment for Facility Cards */
.network-radar-stage .node-north {
  top: 24% !important;
  left: 23% !important;
}

.network-radar-stage .node-east {
  top: 24% !important;
  left: 77% !important;
}

.network-facility-card {
  position: absolute !important;
  z-index: 10 !important;
  min-width: 220px !important;
  padding: 16px 18px 14px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(46, 48, 146, 0.12) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 36px rgba(46, 48, 146, 0.08), 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transform: translate(-50%, -50%) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.28s ease !important;
}

.network-facility-card:hover {
  transform: translate(-50%, -54%) scale(1.03) !important;
  border-color: rgba(91, 66, 190, 0.40) !important;
  box-shadow: 0 24px 50px rgba(46, 48, 146, 0.14), 0 0 0 1px rgba(91, 66, 190, 0.20) !important;
}

.network-facility-card.node-north::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2e3092, #0fa6d8);
  border-radius: 18px 18px 0 0;
}

.network-facility-card.node-east::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2D3490, #5B42BE);
  border-radius: 18px 18px 0 0;
}

.facility-dist-tag {
  background: rgba(46, 48, 146, 0.06) !important;
  border: 1px solid rgba(46, 48, 146, 0.12) !important;
  color: #2e3092 !important;
  -webkit-text-fill-color: #2e3092 !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
}

.facility-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 2px !important;
}

.facility-name {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #14172a !important;
  -webkit-text-fill-color: #14172a !important;
}

.facility-firm {
  margin: 0 0 8px !important;
  font-size: 12.5px !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-weight: 500 !important;
}

.facility-tags {
  display: flex !important;
  gap: 6px !important;
}

.facility-pill {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  background: rgba(46, 48, 146, 0.05) !important;
  border: 1px solid rgba(46, 48, 146, 0.12) !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

.facility-pill.pill-highlight {
  color: #5B42BE !important;
  -webkit-text-fill-color: #5B42BE !important;
  background: rgba(91, 66, 190, 0.08) !important;
  border-color: rgba(91, 66, 190, 0.22) !important;
}

/* Facility Beacon Clear Safe Distance - No Text Overlap */
.facility-status-strip {
  gap: 12px !important;
}

.facility-beacon {
  margin-left: 2px !important;
  margin-right: 2px !important;
}

.facility-beacon::after {
  inset: 0 !important;
  animation: beaconPingSafe 2s cubic-bezier(0.16, 1, 0.3, 1) infinite !important;
  pointer-events: none !important;
}

@keyframes beaconPingSafe {
  0% { transform: scale(1); opacity: 0.85; }
  60% { transform: scale(2.0); opacity: 0.25; }
  85%, 100% { transform: scale(2.3); opacity: 0; }
}

/* ==========================================================================
   NETWORK RADAR & SUPPLY ECOSYSTEM RESPONSIVE RULES (Mobile & Tablet)
   ========================================================================== */
@media (max-width: 991px) {
  .network-radar-stage {
    height: 400px !important;
  }

  .network-facility-card {
    min-width: 170px !important;
    width: 180px !important;
    padding: 12px 14px !important;
  }

  .network-radar-stage .node-north {
    top: 22% !important;
    left: 26% !important;
  }

  .network-radar-stage .node-east {
    top: 22% !important;
    left: 74% !important;
  }

  .facility-name {
    font-size: 14px !important;
  }

  .facility-firm {
    font-size: 11.5px !important;
  }

  .facility-pill {
    font-size: 11px !important;
  }
}

@media (max-width: 680px) {
  .network-card {
    border-radius: 22px !important;
  }

  .network-radar-stage {
    height: 350px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .network-radar-stage .node-north {
    top: 14px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: calc(50% - 14px) !important;
    max-width: 200px !important;
    min-width: 0 !important;
  }

  .network-radar-stage .node-east {
    top: 14px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: calc(50% - 14px) !important;
    max-width: 200px !important;
    min-width: 0 !important;
  }

  .network-facility-card {
    position: absolute !important;
    min-width: 0 !important;
    padding: 9px 10px 9px 10px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    box-shadow: 0 6px 20px rgba(46, 48, 146, 0.08) !important;
  }

  .network-facility-card:hover {
    transform: none !important;
  }

  .facility-status-strip {
    gap: 6px !important;
    margin-bottom: 3px !important;
  }

  .facility-beacon {
    width: 6px !important;
    height: 6px !important;
    margin-left: 1px !important;
    margin-right: 1px !important;
  }

  .facility-badge-text {
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
  }

  .facility-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    margin-bottom: 1px !important;
  }

  .facility-name {
    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .facility-dist-tag {
    display: none !important;
  }

  .facility-firm {
    font-size: 11.5px !important;
    margin: 0 0 5px 0 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .facility-tags {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  .facility-pill {
    font-size: 11px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
  }

  .network-hub-card,
  .network-hub-card.node-centre {
    top: 60% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .network-hub-card .hub-content {
    padding: 8px 16px 8px 10px !important;
    gap: 8px !important;
    max-width: 90% !important;
  }

  .hub-icon-wrap {
    width: 26px !important;
    height: 26px !important;
  }

  .hub-icon-wrap svg {
    width: 14px !important;
    height: 14px !important;
  }

  .hub-label-kicker {
    font-size: 11px !important;
  }

  h3.hub-title,
  .hub-title {
    font-size: 14px !important;
  }

  .hub-meta {
    display: none !important;
  }
}

@media (max-width: 400px) {
  .network-radar-stage {
    height: 330px !important;
  }

  .network-radar-stage .node-north {
    top: 10px !important;
    left: 6px !important;
    width: calc(50% - 9px) !important;
  }

  .network-radar-stage .node-east {
    top: 10px !important;
    right: 6px !important;
    width: calc(50% - 9px) !important;
  }

  .network-facility-card {
    padding: 8px 7px 8px 7px !important;
    border-radius: 12px !important;
  }

  .facility-name {
    font-size: 12.5px !important;
  }

  .facility-firm {
    font-size: 11px !important;
  }

  .facility-badge-text {
    font-size: 10.5px !important;
  }

  .facility-pill {
    font-size: 10.5px !important;
    padding: 2px 5px !important;
  }

  .network-hub-card .hub-content {
    padding: 7px 14px 7px 9px !important;
  }

  h3.hub-title,
  .hub-title {
    font-size: 13px !important;
  }
}

@media (max-width: 360px) {
  body:not([data-page="home"]) .page-hero-copy h1,
  .page-hero-copy h1 {
    font-size: 26px !important;
  }
}

/* ==========================================================================
   PRODUCT CATEGORY MODAL - MOBILE FULL-SCREEN SEAMLESS SHEET
   ========================================================================== */
@media (max-width: 860px) {
  .product-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 100000 !important;
    background: rgba(12, 17, 30, 0.78) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
  }

  .product-modal {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .product-modal-sidebar {
    display: none !important;
  }

  .product-modal-main {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    background: #ffffff !important;
    padding: 0 !important;
  }

  .modal-main-header {
    padding: 16px 64px 14px 16px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #edf1f6 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    box-shadow: 0 2px 10px rgba(22, 25, 46, 0.04) !important;
  }

  .modal-header-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin-bottom: 4px !important;
  }

  .modal-header-code-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2.5px 7px !important;
    background: #EEF0FD !important;
    color: #5B42BE !important;
    border: 1px solid rgba(91, 66, 190, 0.22) !important;
    border-radius: 6px !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
  }

  .modal-header-kicker {
    color: #5B42BE !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
  }

  .modal-header-count-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2.5px 7px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-radius: 6px !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }

  .modal-header-title {
    font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #14172a !important;
    letter-spacing: -0.03em !important;
    line-height: 1.2 !important;
    margin: 4px 0 4px !important;
  }

  .modal-header-desc {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: #475569 !important;
    margin: 0 0 10px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .modal-filter-box {
    margin: 0 !important;
    width: 100% !important;
  }

  .modal-filter-input {
    width: 100% !important;
    height: 40px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    outline: none !important;
    box-sizing: border-box !important;
  }

  .modal-filter-input:focus {
    background: #ffffff !important;
    border-color: #5B42BE !important;
    box-shadow: 0 0 0 3px rgba(91, 66, 190, 0.12) !important;
  }

  .product-modal-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 70 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
    cursor: pointer !important;
  }

  .product-modal-close svg {
    stroke: #0f172a !important;
    width: 14px !important;
    height: 14px !important;
  }

  .modal-scroll-area {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px 14px 44px !important;
  }

  .modal-products-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
  }

  .modal-product-card {
    border-radius: 14px !important;
    padding: 14px !important;
    border: 1px solid #edf1f6 !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important;
  }

  .modal-card-visual {
    height: 170px !important;
    margin-bottom: 12px !important;
  }

  .modal-product-name {
    font-size: 17px !important;
    font-weight: 750 !important;
    color: #14172a !important;
    margin: 0 0 6px !important;
  }

  .modal-product-comp {
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #475569 !important;
    margin: 0 0 10px !important;
  }

  .modal-product-pack {
    display: inline-block !important;
    font-size: 11px !important;
    padding: 4px 9px !important;
    border-radius: 6px !important;
    background: #EEF0FD !important;
    color: #5B42BE !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
  }

  .modal-product-btn {
    width: 100% !important;
    height: 42px !important;
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 13.5px !important;
    font-weight: 650 !important;
    color: #0f172a !important;
    background: #ffffff !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }

  .modal-pagination-bar {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 16px 0 !important;
  }

  .modal-pagination-pages {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  .modal-footer-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 16px !important;
    width: 100% !important;
  }

  .modal-footer-actions .button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* Floating button concealment */
body.has-modal-open .floating-top-btn,
body:has(.product-modal-backdrop) .floating-top-btn,
body.has-modal-open .floating-contact,
body:has(.product-modal-backdrop) .floating-contact {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* ==========================================================================
   ARCHITECTURAL LUMINOUS BACKGROUND WITH DIAGONAL FACETS (ACROSS WEBSITE)
   ========================================================================== */
.creative-hero-overlay,
body[data-page="home"] .creative-hero-overlay {
  background:
    radial-gradient(ellipse at 16% 40%, rgba(108, 47, 168, 0.08) 0%, transparent 48%),
    radial-gradient(ellipse at 32% 80%, rgba(91, 66, 190, 0.09) 0%, transparent 45%),
    radial-gradient(ellipse at 6% 88%, rgba(108, 47, 168, 0.10) 0%, transparent 40%),
    linear-gradient(138deg, rgba(255, 255, 255, 0) 0%, rgba(240, 244, 254, 0.35) 45%, rgba(230, 234, 252, 0.55) 100%),
    linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 30%, rgba(255, 255, 255, 0.98) 40%, rgba(255, 255, 255, 0.78) 55%, rgba(255, 255, 255, 0.18) 74%, rgba(255, 255, 255, 0.0) 90%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.94) 0%, transparent 34%, rgba(255, 255, 255, 0.12) 100%) !important;
}

.page-hero,
body:not([data-page="home"]) .page-hero,
body[data-page="about"] .page-hero,
body[data-page="capabilities"] .page-hero,
body[data-page="products"] .page-hero,
body[data-page="quality"] .page-hero,
body[data-page="certificates"] .page-hero,
body[data-page="contact"] .page-hero {
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.page-hero::before,
body:not([data-page="home"]) .page-hero::before {
  display: none !important;
}

.page-hero::after,
body:not([data-page="home"]) .page-hero::after {
  display: none !important;
  content: none !important;
}

body:not([data-page="home"]) .page-hero h1,
body:not([data-page="home"]) .page-hero-copy h1 {
  background: linear-gradient(135deg, #110e28 0%, #2e1d60 48%, #5a2e9d 85%, #7538be 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

@media (max-width: 860px) {
  .page-hero,
  body:not([data-page="home"]) .page-hero,
  body[data-page="about"] .page-hero,
  body[data-page="capabilities"] .page-hero,
  body[data-page="products"] .page-hero,
  body[data-page="quality"] .page-hero,
  body[data-page="certificates"] .page-hero,
  body[data-page="contact"] .page-hero {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  body[data-page="home"] .creative-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 8px !important;
    color: #5B42BE !important;
    -webkit-text-fill-color: #5B42BE !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    max-width: 100% !important;
    line-height: 1.2 !important;
    margin: 0 0 8px 0 !important;
  }

  body[data-page="home"] .creative-eyebrow > span:first-child {
    display: inline-block !important;
    width: 14px !important;
    height: 2px !important;
    background: #5B42BE !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  body[data-page="home"] .creative-eyebrow [data-slide-eyebrow] {
    display: inline !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    color: #5B42BE !important;
    -webkit-text-fill-color: #5B42BE !important;
  }

  body[data-page="home"] .creative-hero h1 em,
  body[data-page="home"] .creative-hero h1 [data-slide-accent] {
    color: #5B42BE !important;
    -webkit-text-fill-color: #5B42BE !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    filter: drop-shadow(0 2px 14px rgba(91, 66, 190, 0.18)) !important;
  }
}

/* ==========================================================================
   MASTER TYPOGRAPHY HARMONIZATION SYSTEM (ACROSS ALL PAGES & VIEWPORTS)
   Guarantees all subtext elements are distinctly smaller than their titles,
   establishing clear visual hierarchy, contrast and elegant readability.
   ========================================================================== */

/* 1. Global Headings & Titles (Geometric Sans-Serif Style) */
h1,
.page-hero h1,
.creative-hero h1,
.page-hero-copy h1 {
  font-family: 'New Hero', 'new-hero-access', var(--font-sans, sans-serif) !important;
  font-size: clamp(38px, 4.4vw, 52px) !important;
  line-height: 1.14 !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

h2,
.section-heading h2,
.inner-heading h2,
.purpose-content h2,
.about-content h2,
.capabilities-intro h2 {
  font-family: 'New Hero', 'new-hero-access', var(--font-sans, sans-serif) !important;
  font-size: clamp(30px, 3.2vw, 40px) !important;
  line-height: 1.22 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  width: fit-content !important;
  max-width: var(--title-block-width, 100%) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Card & Feature Titles (SemiBold 600, Noticeably larger than card subtext: 22px–24px vs 14px) */
h3,
.capability-card h3,
.purpose-detail-card h3,
.quality-item h3,
.product-card h3,
.card-content h3,
.service-detail-grid h3,
.contact-card h3,
.document-card h3,
.accreditation-card h3,
.timeline-card h3,
.value-card h3,
.assurance-body h3,
.modal-header-title {
  font-family: 'New Hero', 'new-hero-access', var(--font-sans, sans-serif) !important;
  font-size: clamp(22px, 2.2vw, 24px) !important;
  line-height: 1.28 !important;
  font-weight: 600 !important;
  letter-spacing: -0.012em !important;
  color: #14172a !important;
  -webkit-text-fill-color: #14172a !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Sub-item & Fact Titles (18.5px vs 14px subtext) */
h4,
.story-card h4,
.detail-item h4,
.story-facts article strong,
.story-facts strong,
.office-card strong,
.page-hero-float-card strong,
.facility-name,
.hub-title {
  font-family: 'New Hero', 'new-hero-access', var(--font-sans, sans-serif) !important;
  font-size: 18.5px !important;
  line-height: 1.32 !important;
  font-weight: 600 !important;
  letter-spacing: -0.008em !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* 2. Subtext Elements (Clean Healthcare Sans-Serif Style) */

/* Hero Subtext (Accompanies h1: 38px–52px) */
.creative-hero-intro,
.creative-hero p[data-slide-copy],
.page-hero-copy p,
.page-hero p:not(.section-kicker) {
  font-family: 'New Hero', 'new-hero-access', var(--font-sans, sans-serif) !important;
  font-size: 16px !important;
  line-height: 1.62 !important;
  font-weight: 450 !important;
  letter-spacing: -0.005em !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Section Subtext & Leads (Accompanies h2: 30px–40px) */
.section-intro,
.section-lead,
.side-intro,
.about-lead,
.body-copy,
.about-section .about-lead,
.about-section .body-copy,
.about-section .about-grid > div:first-child p,
.about-grid p,
.story-grid .about-lead,
.story-grid .body-copy,
.story-grid > div:first-child p,
.story-grid p,
.catalog-intro p,
.catalog-group > p,
.catalog-group-heading p,
.section-heading p,
.contact-copy > p:not(.section-kicker),
.contact-form-copy .section-intro,
.product-note p,
.medical-note {
  font-family: 'New Hero', 'new-hero-access', var(--font-sans, sans-serif) !important;
  font-size: 15.5px !important;
  line-height: 1.62 !important;
  font-weight: 450 !important;
  letter-spacing: -0.005em !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  max-width: var(--title-block-width, 485px) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Card Subtext & Body Copy (Accompanies h3: 22px–24px and h4/strong: 18.5px) */
.capability-card p,
.purpose-detail-card p,
.service-detail-grid article p,
.quality-pillar-card p,
.facility-card p,
.network-card p,
.catalog-card p,
.product-card p,
.partner-card p,
.story-card p,
.story-facts article p,
.story-facts p,
.assurance-body p,
.card-detail p,
.service-detail-grid p,
.document-card p,
.accreditation-card p,
.contact-card p,
.contact-options article p,
.facility-firm,
.modal-header-desc {
  font-family: 'New Hero', 'new-hero-access', var(--font-sans, sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  letter-spacing: -0.003em !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  max-width: var(--title-block-width, 485px) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Eyebrows, Kickers & Category Labels (Uppercase Geometric Tracking) */
.section-kicker,
.creative-eyebrow,
.page-hero-copy .section-kicker,
.section-heading .section-kicker,
.contact-copy .section-kicker,
.partner-card .section-kicker {
  font-family: 'New Hero', 'new-hero-access', var(--font-sans, sans-serif) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Buttons & Interactive CTA Typography */
.btn,
.button-primary,
.header-cta,
.primary-btn,
.secondary-btn,
.explore-link,
button:not(.nav-toggle),
input[type="submit"] {
  font-family: 'New Hero', 'new-hero-access', var(--font-sans, sans-serif) !important;
  font-weight: 600 !important;
  letter-spacing: 0.015em !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Footer Subtext (Accompanies footer headline: 28px–38px) */
.footer-subtext {
  font-family: 'New Hero', 'new-hero-access', var(--font-sans, sans-serif) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #4A588B !important;
  -webkit-text-fill-color: #4A588B !important;
  font-weight: 450 !important;
  letter-spacing: -0.005em !important;
  -webkit-font-smoothing: antialiased !important;
}

/* 3. Mobile Typography Scaling (Subtext remains strictly smaller) */
@media (max-width: 860px) {
  h1,
  .page-hero h1,
  .creative-hero h1,
  .page-hero-copy h1 {
    font-size: clamp(28px, 7.5vw, 36px) !important;
    line-height: 1.18 !important;
  }

  h2,
  .section-heading h2,
  .inner-heading h2,
  .purpose-content h2,
  .about-content h2,
  .capabilities-intro h2 {
    font-size: clamp(24px, 5.8vw, 30px) !important;
    line-height: 1.25 !important;
    max-width: var(--title-block-width, 100%) !important;
    box-sizing: border-box !important;
  }

  h3,
  .capability-card h3,
  .purpose-detail-card h3,
    .quality-item h3,
  .product-card h3,
  .card-content h3,
  .service-detail-grid h3,
  .contact-card h3,
  .document-card h3,
  .accreditation-card h3,
  .timeline-card h3,
  .value-card h3,
  .assurance-body h3,
  .modal-header-title {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  h4,
  .story-card h4,
  .detail-item h4,
  .story-facts article strong,
  .story-facts strong,
  .office-card strong,
  .page-hero-float-card strong,
  .facility-name,
  .hub-title {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  /* Mobile Subtext */
  .creative-hero-intro,
  .creative-hero p[data-slide-copy] {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    max-width: clamp(225px, 62vw, 255px) !important;
    text-shadow: 0 0 14px rgba(237, 232, 250, 0.95), 0 1px 3px rgba(255, 255, 255, 0.95), 0 0 1px #ede8fa !important;
  }

  .page-hero-copy p,
  .page-hero p:not(.section-kicker) {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }

  .section-intro,
  .section-lead,
  .side-intro,
  .about-lead,
  .body-copy,
  .about-section .body-copy,
  .about-section .about-grid > div:first-child p,
  .about-grid p,
  .story-grid .about-lead,
  .story-grid .body-copy,
  .story-grid > div:first-child p,
  .story-grid p,
  .catalog-intro p,
  .catalog-group > p,
  .catalog-group-heading p,
  .section-heading p,
  .contact-copy > p:not(.section-kicker),
  .contact-form-copy .section-intro,
  .product-note p,
  .medical-note {
    font-size: 14px !important;
    line-height: 1.6 !important;
    max-width: var(--title-block-width, 100%) !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .capability-card p,
  .purpose-detail-card p,
  .service-detail-grid article p,
  .quality-pillar-card p,
  .facility-card p,
  .network-card p,
  .catalog-card p,
  .product-card p,
  .partner-card p,
  .story-card p,
  .story-facts article p,
  .story-facts p,
  .assurance-body p,
  .card-detail p,
  .service-detail-grid p,
  .document-card p,
  .accreditation-card p,
  .contact-card p,
  .contact-options article p,
  .facility-firm,
    .modal-header-desc {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }

  .footer-subtext {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }
}

/* 4. Kickers & Eyebrows (Small, neat category markers above titles) */
.section-kicker,
.creative-eyebrow,
.page-hero-copy .section-kicker,
.section-heading .section-kicker,
.contact-copy .section-kicker,
.partner-card .section-kicker,
.cta-kicker,
.modal-header-kicker {
  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
}

@media (max-width: 860px) {
  .section-kicker,
  .creative-eyebrow,
  .page-hero-copy .section-kicker,
  .section-heading .section-kicker,
  .contact-copy .section-kicker,
  .partner-card .section-kicker,
  .cta-kicker,
  .modal-header-kicker {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
  }
}

/* 5. Badges, Pills, Chips & Tags */
.facility-pill,
.facility-badge-text,
.facility-dist-tag,
.card-dept-tag,
.assurance-stage-tag,
.assurance-status-chip,
.orbit-badge,
.orbit-label,
.modal-header-count-pill,
.partner-meta span,
.quality-stamp,
.footer-portfolio-badge,
.therapy-centre span,
.therapy-centre small,
.hub-label-kicker {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

/* 6. Stats & Proof Metrics Values and Subtext Labels */
.hero-proof-grid strong,
.home-stat-ribbon strong,
.telemetry-pill strong {
  font-size: clamp(26px, 3.5vw, 38px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

.hero-proof-grid span,
.home-stat-ribbon span,
.telemetry-pill span,
.page-hero-float-card span {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.story-facts article > span {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #5B42BE !important;
}

@media (max-width: 768px) {
  .hero-proof-grid strong,
  .home-stat-ribbon strong,
  .telemetry-pill strong {
    font-size: 20px !important;
  }

  .hero-proof-grid span,
  .home-stat-ribbon span,
  .telemetry-pill span,
  .page-hero-float-card span {
    font-size: 11.5px !important;
  }
}

/* 7. Buttons & Action Links */
.button,
.button-primary,
.button-secondary,
.button-ghost-light,
.creative-hero-actions .button,
.cta-btn {
  font-size: 14.5px !important;
  font-weight: 650 !important;
  letter-spacing: 0.015em !important;
}

@media (max-width: 768px) {
  .button,
  .button-primary,
  .button-secondary,
  .button-ghost-light,
  .creative-hero-actions .button,
  .cta-btn {
    font-size: 14px !important;
  }
}

/* 8. Navigation & Links */
.nav-link,
.utility-link {
  font-size: 14.5px !important;
  font-weight: 600 !important;
}

.mobile-nav-link {
  font-size: 16px !important;
  font-weight: 650 !important;
}

.breadcrumbs,
.breadcrumbs a,
.breadcrumbs span {
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   MANUFACTURING RADAR & CENTRAL DISPATCH HUB - RESPONSIVE MASTER SUITE
   Pixel-perfect on Desktop, Tablet, and Mobile with zero overlaps
   ========================================================================== */

/* 1. Base Network Card Container */
.network-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: 
    radial-gradient(ellipse at 50% 28%, rgba(91, 66, 190, 0.05) 0%, transparent 60%),
    radial-gradient(circle at 85% 15%, rgba(15, 166, 216, 0.04) 0%, transparent 45%),
    linear-gradient(165deg, #ffffff 0%, #FAFBFD 55%, #F0F4FC 100%) !important;
  border: 1.5px solid rgba(46, 48, 146, 0.12) !important;
  border-radius: 28px !important;
  box-shadow: 
    0 24px 60px -12px rgba(46, 48, 146, 0.10),
    0 4px 16px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
  overflow: hidden !important;
}

/* 2. Desktop & Tablet Layout (min-width: 681px) */
@media (min-width: 681px) {
  .network-radar-stage {
    position: relative !important;
    width: 100% !important;
    height: 440px !important;
    overflow: hidden !important;
  }

  .network-facility-card {
    position: absolute !important;
    z-index: 10 !important;
    width: 242px !important;
    min-width: 242px !important;
    max-width: 242px !important;
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    box-sizing: border-box !important;
    padding: 13px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1.5px solid rgba(46, 48, 146, 0.14) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 32px rgba(46, 48, 146, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    transform: translate(-50%, -50%) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.28s ease !important;
  }

  .network-facility-card:hover {
    transform: translate(-50%, -54%) scale(1.03) !important;
    border-color: rgba(91, 66, 190, 0.40) !important;
    box-shadow: 0 20px 46px rgba(46, 48, 146, 0.14), 0 0 0 1px rgba(91, 66, 190, 0.20) !important;
  }

  .network-radar-stage .node-north {
    top: 24% !important;
    left: 24% !important;
    right: auto !important;
    bottom: auto !important;
  }

  .network-radar-stage .node-east {
    top: 24% !important;
    left: 76% !important;
    right: auto !important;
    bottom: auto !important;
  }

  .network-hub-card,
  .network-hub-card.node-centre {
    position: absolute !important;
    top: 52.2% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 15 !important;
  }
}

/* Tablet refinement (681px - 991px) */
@media (min-width: 681px) and (max-width: 991px) {
  .network-radar-stage {
    height: 410px !important;
  }

  .network-facility-card {
    width: 218px !important;
    min-width: 218px !important;
    max-width: 218px !important;
    height: 138px !important;
    padding: 12px 14px !important;
  }

  .network-radar-stage .node-north {
    left: 25% !important;
  }

  .network-radar-stage .node-east {
    left: 75% !important;
  }
}

/* 3. Common Facility Card Styling Rules */
.network-facility-card.node-north::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2e3092, #0fa6d8);
  border-radius: 18px 18px 0 0;
}

.network-facility-card.node-east::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2D3490, #5B42BE);
  border-radius: 18px 18px 0 0;
}

.network-facility-card .facility-status-strip {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.network-facility-card .facility-beacon {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

.network-facility-card .green-beacon {
  background: #6C2FA8 !important;
  box-shadow: 0 0 8px rgba(108, 47, 168, 0.8) !important;
}

.network-facility-card .teal-beacon {
  background: #5B42BE !important;
  box-shadow: 0 0 8px rgba(91, 66, 190, 0.8) !important;
}

.network-facility-card .facility-badge-text {
  font-family: var(--font-mono, monospace) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: #5B42BE !important;
  -webkit-text-fill-color: #5B42BE !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.network-facility-card .facility-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin: 0 !important;
  width: 100% !important;
}

.network-facility-card .facility-name {
  margin: 0 !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  color: #14172a !important;
  -webkit-text-fill-color: #14172a !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.network-facility-card .facility-dist-tag {
  background: rgba(46, 48, 146, 0.06) !important;
  border: 1px solid rgba(46, 48, 146, 0.16) !important;
  color: #2e3092 !important;
  -webkit-text-fill-color: #2e3092 !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1.15 !important;
}

.network-facility-card .facility-firm {
  margin: 0 !important;
  font-size: 12px !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
}

.network-facility-card .facility-tags {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 !important;
}

.network-facility-card .facility-pill {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  background: rgba(46, 48, 146, 0.05) !important;
  border: 1px solid rgba(46, 48, 146, 0.12) !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  flex: 1 1 0px !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

.network-facility-card .facility-pill.pill-highlight {
  color: #5B42BE !important;
  -webkit-text-fill-color: #5B42BE !important;
  background: rgba(91, 66, 190, 0.08) !important;
  border-color: rgba(91, 66, 190, 0.22) !important;
}

/* 4. Central Dispatch Hub Pill (Ahmedabad) - Luminous White Executive Finish */
.network-hub-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  user-select: none !important;
}

.network-hub-card .hub-content {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: linear-gradient(135deg, #6C2FA8 0%, #5B42BE 48%, #2D3490 100%) !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  padding: 10px 24px 10px 14px !important;
  box-shadow: 
    0 16px 40px -4px rgba(91, 66, 190, 0.55),
    0 6px 18px rgba(46, 48, 146, 0.30),
    inset 0 1px 2px rgba(255, 255, 255, 0.70) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
}

.network-hub-card:hover .hub-content,
.network-hub-card:focus-visible .hub-content {
  transform: scale(1.06) !important;
  box-shadow: 
    0 22px 50px -4px rgba(91, 66, 190, 0.70),
    0 8px 24px rgba(46, 48, 146, 0.40),
    inset 0 1px 2.5px rgba(255, 255, 255, 0.90) !important;
}

.network-hub-card .hub-text-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.network-hub-card .hub-label-kicker {
  font-family: var(--font-mono, monospace) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  line-height: 1 !important;
  margin-bottom: 3px !important;
  opacity: 0.95 !important;
}

.network-card h3.hub-title,
.network-hub-card h3.hub-title,
.network-hub-card h3,
.hub-title {
  margin: 0 !important;
  font-size: 17.5px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  line-height: 1.15 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
}

.network-card .hub-meta,
.network-hub-card .hub-meta,
.hub-meta {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
  line-height: 1.1 !important;
  margin-top: 2px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

.network-hub-card .hub-icon-wrap {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
}

.network-hub-card .hub-icon-wrap svg {
  width: 17px !important;
  height: 17px !important;
  stroke: #ffffff !important;
}

/* 5. Bottom Mission Control Command Deck */
.network-card .network-caption {
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 248, 254, 0.99) 100%) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-top: 1.5px solid rgba(46, 48, 146, 0.12) !important;
  border-radius: 0 0 27px 27px !important;
  padding: 18px 24px 20px 24px !important;
  box-shadow: 0 -8px 24px rgba(46, 48, 146, 0.03), inset 0 1px 0 #ffffff !important;
}

.network-card .caption-lead {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.network-card .caption-badge-live {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 3px !important;
}

.network-card .caption-badge-live span:not(.caption-pulse-dot) {
  font-family: var(--font-mono, monospace) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: #5B42BE !important;
  -webkit-text-fill-color: #5B42BE !important;
  text-transform: uppercase !important;
  display: inline-block !important;
}

.network-card .caption-pulse-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #5B42BE !important;
  box-shadow: 0 0 10px rgba(91, 66, 190, 0.8) !important;
  position: relative !important;
  display: inline-block !important;
}

.network-card .caption-pulse-dot::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid #5B42BE !important;
  animation: beaconPingSafe 2s cubic-bezier(0.16, 1, 0.3, 1) infinite !important;
  pointer-events: none !important;
}

.network-card .network-caption strong {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  color: #14172a !important;
  -webkit-text-fill-color: #14172a !important;
  line-height: 1.25 !important;
}

.network-card .caption-sub {
  font-size: 12.5px !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  line-height: 1.5 !important;
}

/* 6. Symmetrical Telemetry Instrument Grid */
.network-card .caption-telemetry {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
}

.network-card .telemetry-pill {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(46, 48, 146, 0.12) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  box-shadow: 0 2px 8px rgba(46, 48, 146, 0.04), inset 0 1px 0 #ffffff !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.network-card .telemetry-pill:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(91, 66, 190, 0.35) !important;
  box-shadow: 0 6px 16px rgba(46, 48, 146, 0.10) !important;
}

.network-card .telemetry-pill .telemetry-val {
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #1e206b !important;
  -webkit-text-fill-color: #1e206b !important;
  line-height: 1.15 !important;
  margin-bottom: 2px !important;
  display: block !important;
}

.network-card .telemetry-pill .telemetry-key {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  line-height: 1.25 !important;
  display: block !important;
}

/* ==========================================================================
   7. MOBILE VIEW PERFECTION (Screens <= 680px)
   Eliminates all collisions, separates hub from facility cards, perfect 3-col telemetry
   ========================================================================== */
@media (max-width: 680px) {
  /* Radar Stage Canvas */
  .network-card .network-radar-stage {
    height: 360px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Pin Facility Cards Side-by-Side at Top - Equal 50% Widths */
  .network-radar-stage .node-north {
    top: 14px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: calc(50% - 14px) !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .network-radar-stage .node-east {
    top: 14px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: calc(50% - 14px) !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Facility Card Box & Identical Structural Rows */
  .network-facility-card {
    position: absolute !important;
    width: calc(50% - 14px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
    padding: 10px 9px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 6px 20px rgba(46, 48, 146, 0.08) !important;
    overflow: hidden !important;
  }

  .network-facility-card:hover {
    transform: none !important;
  }

  /* Row 1: Status Strip */
  .network-facility-card .facility-status-strip {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .network-facility-card .facility-beacon {
    width: 6px !important;
    height: 6px !important;
    flex-shrink: 0 !important;
  }

  .network-facility-card .facility-badge-text {
    font-size: 8.5px !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /* Row 2: Title & Distance Row */
  .network-facility-card .facility-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .network-facility-card .facility-name {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.15 !important;
  }

  .network-facility-card .facility-dist-tag {
    font-size: 8.5px !important;
    padding: 1.5px 4px !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    line-height: 1.15 !important;
  }

  /* Row 3: Firm */
  .network-facility-card .facility-firm {
    font-size: 10.5px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Row 4: Feature Pills */
  .network-facility-card .facility-tags {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .network-facility-card .facility-pill {
    font-size: 8.5px !important;
    padding: 2px 4px !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
    flex: 1 1 0px !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }

  /* Central Dispatch Hub Pill - Cleanly Centered at 66% (90px below top cards) */
  .network-hub-card,
  .network-hub-card.node-centre {
    position: absolute !important;
    top: 66% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    z-index: 12 !important;
    width: auto !important;
  }

  .network-hub-card .hub-content {
    padding: 8px 18px 8px 12px !important;
    gap: 9px !important;
    border: 1.5px solid #ffffff !important;
    box-shadow: 
      0 12px 30px -4px rgba(91, 66, 190, 0.55),
      0 4px 14px rgba(46, 48, 146, 0.30),
      inset 0 1px 1.5px rgba(255, 255, 255, 0.70) !important;
  }

  .network-hub-card .hub-icon-wrap {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
  }

  .network-hub-card .hub-icon-wrap svg {
    width: 14px !important;
    height: 14px !important;
    stroke: #ffffff !important;
  }

  .network-hub-card .hub-label-kicker {
    font-size: 9.5px !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  .network-card h3.hub-title,
  .network-hub-card h3.hub-title,
  .hub-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    margin: 0 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
  }

  .network-card .hub-meta,
  .network-hub-card .hub-meta,
  .hub-meta {
    display: block !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
    line-height: 1.1 !important;
    margin-top: 2px !important;
  }

  /* Bottom Deck Mission Control Padding & Typography */
  .network-card .network-caption {
    padding: 16px 14px 18px 14px !important;
    gap: 12px !important;
  }

  .network-card .network-caption strong {
    font-size: 14.5px !important;
    line-height: 1.25 !important;
  }

  .network-card .caption-sub {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
  }

  /* Clean 3-Column Symmetrical Telemetry Grid on Mobile (No awkward 2-on-top, 1-on-bottom) */
  .network-card .caption-telemetry {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .network-card .telemetry-pill {
    padding: 8px 4px !important;
    grid-column: span 1 !important;
  }

  .network-card .telemetry-pill:last-child {
    grid-column: span 1 !important;
  }

  .network-card .telemetry-pill .telemetry-val {
    font-size: 15px !important;
    font-weight: 800 !important;
    margin-bottom: 2px !important;
    line-height: 1.15 !important;
  }

  .network-card .telemetry-pill .telemetry-key {
    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }
}

/* Micro mobile devices (<= 380px) */
@media (max-width: 380px) {
  .network-radar-stage .node-north {
    left: 8px !important;
    width: calc(50% - 11px) !important;
  }

  .network-radar-stage .node-east {
    right: 8px !important;
    width: calc(50% - 11px) !important;
  }

  .network-facility-card {
    width: calc(50% - 11px) !important;
    padding: 8px 6px !important;
    height: 126px !important;
    min-height: 126px !important;
  }

  .network-facility-card .facility-name {
    font-size: 11.5px !important;
  }

  .network-facility-card .facility-badge-text {
    font-size: 8px !important;
  }

  .network-facility-card .facility-pill {
    font-size: 7.5px !important;
    padding: 2px 2px !important;
  }

  .network-facility-card .facility-dist-tag {
    font-size: 8px !important;
    padding: 1px 3px !important;
  }

  .network-hub-card,
  .network-hub-card.node-centre {
    top: 67% !important;
  }

  .network-hub-card .hub-content {
    padding: 7px 14px 7px 10px !important;
  }

  .network-card h3.hub-title,
  .network-hub-card h3.hub-title,
  .hub-title {
    font-size: 13.5px !important;
  }
}