/* =============================================================
 *    WUC Service Pages  Unified Consistency Override
 *    Targets: Server (920), Storage (991), Network (1223),
 *             Data Center (31 - child pages), Performance Insights (1053)
 *    Purpose: Force homepage typography, layout, CTA, and carousel
 *             consistency across all service pages.
 *    Priority: Loaded AFTER per-page CSS to override inconsistencies.
 *    ============================================================= */

/* --- TYPOGRAPHY FIXES (Match Homepage Exactly) --- */

/* H2: Homepage = clamp(28px,4vw,42px), weight 800, lh 1.1, ls -0.3px, color #0F172A */
.page-id-920 h2,
.page-id-991 h2,
.page-id-1223 h2,
.page-id-1053 h2,
.sm-h2,
.stor-section h2,
.net-section h2,
.dc-section h2,
.pi-section h2 {
	  font-family: 'Inter', system-ui, sans-serif !important;
	  font-weight: 800 !important;
	  font-size: clamp(28px, 4vw, 42px) !important;
	  line-height: 1.1 !important;
	  letter-spacing: -0.3px !important;
	  color: #0F172A !important;
}

/* H2 white variants (on dark backgrounds) */
.sm-h2--white,
.page-id-920 [class*="navy"] h2,
.page-id-991 [class*="navy"] h2,
.page-id-1223 [class*="navy"] h2,
.page-id-1053 [class*="navy"] h2,
.page-id-920 [style*="0F2035"] h2,
.page-id-991 [style*="0F2035"] h2,
.page-id-1223 [style*="0F2035"] h2,
.page-id-1053 [style*="0F2035"] h2 {
	  color: #FFFFFF !important;
}

/* H3 service/capability cards: Homepage = 20px, weight 700 */
.page-id-920 .sm-cap-card h3,
.page-id-920 .elementor-widget-container h3,
.page-id-991 .stor-cap-card h3,
.page-id-991 .elementor-widget-container h3,
.page-id-1223 .net-cap-card h3,
.page-id-1223 .elementor-widget-container h3,
.page-id-1053 .pi-cap-card h3,
.page-id-1053 .elementor-widget-container h3 {
	  font-size: 20px !important;
	  font-weight: 700 !important;
	  line-height: 1.3 !important;
	  letter-spacing: -0.2px !important;
	  color: #0F172A !important;
}

/* H3 process/timeline steps: Homepage = 22px, weight 700 */
.page-id-920 .sm-step h3,
.page-id-991 .stor-step h3,
.page-id-1223 .net-step h3,
.page-id-1053 .pi-step h3 {
	  font-size: 22px !important;
	  font-weight: 700 !important;
	  line-height: 1.3 !important;
	  color: #0F172A !important;
}

/* H3 "Why Choose" benefit cards: force 20px not 16px */
.page-id-920 .sm-why-card h3,
.page-id-991 .stor-why-card h3,
.page-id-1223 .net-why-card h3,
.page-id-1053 .pi-why-card h3 {
	  font-size: 20px !important;
	  font-weight: 700 !important;
	  color: #0F172A !important;
}

/* Dark background card h3 override */
.page-id-920 .sm-why-card h3,
.page-id-991 .stor-why-card h3,
.page-id-1223 .net-why-card h3,
.page-id-1053 .pi-why-card h3 {
	  color: #FFFFFF !important;
}

/* Overline/eyebrow text: Homepage = 12px, weight 600, ls 2px */
.sm-eyebrow,
.stor-eyebrow,
.net-eyebrow,
.dc-eyebrow,
.pi-eyebrow {
	  font-size: 12px !important;
	  font-weight: 600 !important;
	  letter-spacing: 2px !important;
	  text-transform: uppercase !important;
}

/* Body text color consistency */
.page-id-920 p,
.page-id-991 p,
.page-id-1223 p,
.page-id-1053 p {
	  color: #475569;
}

/* Section description text */
.sm-body,
.stor-section p,
.net-section p,
.dc-section p,
.pi-section p {
	  font-size: 17px;
	  line-height: 1.7;
}


/* --- LAYOUT FIXES (Match Homepage max-width & padding) --- */

/* Container max-width: Homepage = 1200px */
.sm-ctr,
.stor-section > div,
.net-section > div,
.dc-section > div,
.pi-section > div {
	  max-width: 1200px !important;
	  margin-left: auto !important;
	  margin-right: auto !important;
	  padding-left: 24px !important;
	  padding-right: 24px !important;
}

/* Section vertical padding: Homepage = 96px top/bottom */
.page-id-920 section,
.page-id-991 section,
.page-id-1223 section,
.page-id-1053 section {
	  padding-top: 96px;
	  padding-bottom: 96px;
}

/* Hero section padding fix */
.sm-hero-content,
.stor-hero-content,
.net-hero-content,
.dc-hero-content,
.pi-hero-content {
	  padding-top: 160px !important;
	  padding-bottom: 80px !important;
}

/* Hero min-height: Homepage = 85vh */
.page-id-920 .sm-hero,
.page-id-991 .stor-hero,
.page-id-1223 .net-hero,
.page-id-1053 .pi-hero {
	  min-height: 85vh !important;
}

/* Section header margin-bottom: Homepage = 56px */
.sm-section-header,
.stor-section-header,
.net-section-header,
.dc-section-header,
.pi-section-header {
	  margin-bottom: 56px !important;
}


/* --- CTA BUTTON FIXES --- */

/* Primary CTA: Homepage = bg #0070E0, radius 12px, padding 14px 28px, fs 15px */
.sm-btn--primary,
.stor-hero .cta-btn,
.net-hero .cta-btn,
.dc-hero .cta-btn,
.pi-hero .cta-btn,
.page-id-920 a[href*="quote"],
.page-id-991 a[href*="quote"],
.page-id-1223 a[href*="quote"],
.page-id-1053 a[href*="quote"] {
	  background-color: #0070E0 !important;
	  color: #FFFFFF !important;
	  border-radius: 12px !important;
	  padding: 14px 28px !important;
	  font-size: 15px !important;
	  font-weight: 600 !important;
	  font-family: 'Inter', sans-serif !important;
	  display: inline-flex !important;
	  align-items: center !important;
	  gap: 8px !important;
	  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	  text-decoration: none !important;
	  border: none !important;
}

.sm-btn--primary:hover,
.page-id-920 a[href*="quote"]:hover,
.page-id-991 a[href*="quote"]:hover,
.page-id-1223 a[href*="quote"]:hover,
.page-id-1053 a[href*="quote"]:hover {
	  background-color: #005BBF !important;
	  transform: translateY(-1px) !important;
	  box-shadow: 0 4px 12px rgba(0, 112, 224, 0.3) !important;
}

/* Ghost/secondary button fix */
.sm-btn--ghost,
.stor-hero .cta-buttons a:nth-child(2),
.net-hero .cta-buttons a:nth-child(2),
.dc-hero .cta-buttons a:nth-child(2),
.pi-hero .cta-buttons a:nth-child(2) {
	  background: transparent !important;
	  color: #FFFFFF !important;
	  border: 1px solid rgba(255, 255, 255, 0.25) !important;
	  border-radius: 12px !important;
	  padding: 14px 28px !important;
	  font-size: 15px !important;
	  font-weight: 600 !important;
}

.sm-btn--ghost:hover,
.stor-hero .cta-buttons a:nth-child(2):hover,
.net-hero .cta-buttons a:nth-child(2):hover {
	  border-color: rgba(255, 255, 255, 0.5) !important;
	  background: rgba(255, 255, 255, 0.05) !important;
}


/* --- VENDOR LOGO CAROUSEL FIXES --- */

/* Hide text-based vendor names and show image logos */
.sm-vendor-text,
.stor-vendor-text,
.net-vendor-text,
.dc-vendor-text,
.pi-vendor-text {
	  display: none !important;
}

/* Carousel track animation: smooth R-to-L infinite, 40s */
.sm-vendor-track,
.stor-vendor-track,
.net-vendor-track,
.dc-vendor-track,
.pi-vendor-track {
	  display: flex !important;
	  width: max-content !important;
	  animation: wuc-sp-marquee 40s linear infinite !important;
}

.sm-vendor-track:hover,
.stor-vendor-track:hover,
.net-vendor-track:hover,
.dc-vendor-track:hover,
.pi-vendor-track:hover {
	  animation-play-state: paused !important;
}

@keyframes wuc-sp-marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* Carousel item logos: grayscale with hover color effect */
.sm-vendor-track img,
.stor-vendor-track img,
.net-vendor-track img,
.dc-vendor-track img,
.pi-vendor-track img,
.sm-vendors img,
.stor-vendors img,
.net-vendors img,
.dc-vendors img,
.pi-vendors img {
	  height: 38px !important;
	  width: auto !important;
	  opacity: 0.4 !important;
	  filter: grayscale(100%) !important;
	  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	  flex-shrink: 0 !important;
	  padding: 0 40px !important;
}

.sm-vendor-track img:hover,
.stor-vendor-track img:hover,
.net-vendor-track img:hover,
.dc-vendor-track img:hover,
.pi-vendor-track img:hover,
.sm-vendors img:hover,
.stor-vendors img:hover,
.net-vendors img:hover,
.dc-vendors img:hover,
.pi-vendors img:hover {
	  opacity: 1 !important;
	  filter: grayscale(0%) !important;
}

/* Carousel fade edges */
.sm-vendor-fade-l,
.stor-vendor-fade-l,
.net-vendor-fade-l,
.dc-vendor-fade-l,
.pi-vendor-fade-l {
	  position: absolute !important;
	  top: 0 !important;
	  bottom: 0 !important;
	  left: 0 !important;
	  width: 120px !important;
	  background: linear-gradient(90deg, #FFFFFF 0%, transparent 100%) !important;
	  z-index: 2 !important;
	  pointer-events: none !important;
}

.sm-vendor-fade-r,
.stor-vendor-fade-r,
.net-vendor-fade-r,
.dc-vendor-fade-r,
.pi-vendor-fade-r {
	  position: absolute !important;
	  top: 0 !important;
	  bottom: 0 !important;
	  right: 0 !important;
	  width: 120px !important;
	  background: linear-gradient(270deg, #FFFFFF 0%, transparent 100%) !important;
	  z-index: 2 !important;
	  pointer-events: none !important;
}


/* --- STATS SECTION FIX --- */

/* Stats background: Homepage = #0F2035 (navy) */
.sm-stats,
.stor-stats,
.net-stats,
.dc-stats,
.pi-stats {
	  background-color: #0F2035 !important;
}

/* Stat numbers: Homepage = clamp(28px,3vw,36px), weight 800, color blue */
.sm-stat-num,
.stor-stat-num,
.net-stat-num,
.dc-stat-num,
.pi-stat-num {
	  font-family: 'Inter', system-ui, sans-serif !important;
	  font-weight: 800 !important;
	  font-size: clamp(28px, 3vw, 36px) !important;
	  color: #0070E0 !important;
	  letter-spacing: -0.5px !important;
}

/* Stat labels */
.sm-stat-label,
.stor-stat-label,
.net-stat-label,
.dc-stat-label,
.pi-stat-label {
	  font-size: 12px !important;
	  font-weight: 500 !important;
	  letter-spacing: 0.5px !important;
	  text-transform: uppercase !important;
	  color: rgba(255, 255, 255, 0.4) !important;
	  margin-top: 8px !important;
}

/* Stats card styling: match homepage */
.sm-stat-card,
.stor-stat-card,
.net-stat-card,
.dc-stat-card,
.pi-stat-card {
	  text-align: center !important;
	  padding: 32px 16px !important;
	  border: 1px solid rgba(255, 255, 255, 0.06) !important;
	  border-radius: 12px !important;
	  background: rgba(255, 255, 255, 0.02) !important;
}


/* --- SERVICE CARD FIXES --- */

/* Card styling to match homepage */
.sm-cap-card,
.stor-cap-card,
.net-cap-card,
.dc-cap-card,
.pi-cap-card {
	  background: #FFFFFF !important;
	  border: 1px solid #E2E8F0 !important;
	  border-radius: 12px !important;
	  padding: 32px !important;
	  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sm-cap-card:hover,
.stor-cap-card:hover,
.net-cap-card:hover,
.dc-cap-card:hover,
.pi-cap-card:hover {
	  box-shadow: 0 10px 25px rgba(0,0,0,0.06), 0 4px 10px rgba(0,0,0,0.03) !important;
	  transform: translateY(-2px) !important;
}

/* Card icon boxes */
.sm-cap-icon,
.stor-cap-icon,
.net-cap-icon,
.dc-cap-icon,
.pi-cap-icon {
	  width: 56px !important;
	  height: 56px !important;
	  border-radius: 14px !important;
	  background: linear-gradient(135deg, rgba(0,112,224,0.08), rgba(0,112,224,0.15)) !important;
	  display: flex !important;
	  align-items: center !important;
	  justify-content: center !important;
	  margin-bottom: 20px !important;
	  color: #0070E0 !important;
	  font-size: 20px !important;
}


/* --- GARTNER BADGE CONSISTENCY --- */
.sm-gartner,
.stor-gartner,
.net-gartner,
.dc-gartner,
.pi-gartner {
	  display: inline-flex !important;
	  align-items: center !important;
	  gap: 12px !important;
	  background: rgba(255, 255, 255, 0.04) !important;
	  border: 1px solid rgba(255, 255, 255, 0.06) !important;
	  border-radius: 8px !important;
	  padding: 12px 20px !important;
}


/* --- PROCESS TIMELINE FIXES --- */

/* Step numbers: match homepage blue circles */
.sm-step-num,
.stor-step-num,
.net-step-num,
.dc-step-num,
.pi-step-num {
	  width: 32px !important;
	  height: 32px !important;
	  border-radius: 50% !important;
	  background: #0070E0 !important;
	  color: #FFFFFF !important;
	  font-size: 14px !important;
	  font-weight: 700 !important;
	  display: flex !important;
	  align-items: center !important;
	  justify-content: center !important;
}

/* Timeline line */
.sm-steps::before,
.stor-steps::before,
.net-steps::before,
.dc-steps::before,
.pi-steps::before {
	  background: rgba(0, 112, 224, 0.2) !important;
	  width: 2px !important;
}


/* --- NAV/HEADER OVERRIDE  remove page-specific nav padding --- */
.page-id-920 .wuc-nav-inner,
.page-id-991 .wuc-nav-inner,
.page-id-1223 .wuc-nav-inner,
.page-id-1053 .wuc-nav-inner {
	  padding: 0 1.5rem !important;
	  max-width: 1400px !important;
}


/* --- RESPONSIVE OVERRIDES --- */
@media (max-width: 768px) {
	  .page-id-920 section,
	  .page-id-991 section,
	  .page-id-1223 section,
	.page-id-1053 section {
		    padding-top: 64px;
		    padding-bottom: 64px;
	}
	
	  .sm-hero-content,
	  .stor-hero-content,
	  .net-hero-content,
	  .dc-hero-content,
	.pi-hero-content {
		    padding-top: 120px !important;
		    padding-bottom: 60px !important;
	}
}

/* === DATA CENTER MAINTENANCE (page-id-31) OVERRIDES === */
/* Using body-level class scoping to avoid homepage collision */

body.page-id-31 .dc-capabilities h2,
body.page-id-31 .dc-why h2,
body.page-id-31 .dc-process h2,
body.page-id-31 .dc-sla h2,
body.page-id-31 .dc-overview h2 {
  font-size: clamp(28px, 4vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.3px !important;
  color: #0F172A !important;
}

body.page-id-31 .dc-stats h2,
body.page-id-31 .dc-cta h2,
body.page-id-31 .dc-final-cta h2 {
  font-size: clamp(28px, 4vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.3px !important;
  color: #fff !important;
}

body.page-id-31 .dc-cap-card h3,
body.page-id-31 .dc-why-card h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1E293B !important;
}

body.page-id-31 .dc-step h3 {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1E293B !important;
}

body.page-id-31 .dc-hero {
  min-height: 85vh !important;
  padding: 160px 0 80px !important;
}

body.page-id-31 .dc-hero .cta-btn,
body.page-id-31 .dc-hero a[href*="quote"] {
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  padding: 14px 28px !important;
  background-color: #0070E0 !important;
  color: #fff !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: background-color 0.2s, transform 0.2s !important;
}

body.page-id-31 .dc-stats {
  background: #0F2035 !important;
}

body.page-id-31 .dc-stats p {
  color: rgba(255,255,255,0.75) !important;
}

body.page-id-31 section[class^="dc-"] {
  padding: 96px 24px !important;
}

body.page-id-31 .dc-vendors-label {
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #94A3B8 !important;
  font-weight: 600 !important;
}