/* =========================================================
   HOMEPAGE SERVICES ENHANCED - Dark Theme & Bento Boxes
   Task 1: Enhanced CSS foundation and dark theme styling
========================================================= */

/* Services Dark Theme Variables */
.services-section-dark {
  /* Dark theme color palette matching services pages */
  --services-bg: #0e1a24;
  --services-bg-muted: #0f2431;
  --services-surface: #102836;
  --services-muted: #0b1f2a;
  --services-border: #244957;
  --services-text: #e6f2f4;
  --services-text-muted: #c3d3d8;
  --services-primary: #5AA7A3;
  --services-primary-dark: #1d3b48;
  
  /* Enhanced gradients for depth */
  --services-gradient-bg: linear-gradient(180deg, #0e1a24 0%, #0f2230 70%);
  --services-card-gradient: linear-gradient(135deg, #102836 0%, #0d1e28 100%);
  
  /* Shadow system for depth */
  --services-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --services-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --services-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --services-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
  
  /* Interactive states */
  --services-hover-bg: rgba(255, 255, 255, 0.05);
  --services-hover-border: rgba(90, 167, 163, 0.4);
  --services-focus-ring: rgba(90, 167, 163, 0.35);
}

/* Apply dark theme to services section */
#services.services-section-dark {
  background-image: url("/Images/services/Hexagon%20Tessellation%20Fade.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #0e1a24;
  color: var(--services-text);
  position: relative;
  overflow: hidden;
}

/* Hexagon tessellation background image - now applied directly to section */

/* Subtle floating animation for the hexagon background */
@keyframes hexagonFloat {
  0%, 100% {
    transform: translateY(0px) scale(1);
    opacity: 0.12;
  }
  50% {
    transform: translateY(-10px) scale(1.02);
    opacity: 0.08;
  }
}

/* Responsive background adjustments */
@media (max-width: 768px) {
  #services.services-section-dark::before {
    background-size: 120% auto;
    background-position: center top;
    opacity: 0.08;
    animation: none; /* Disable animation on mobile for performance */
  }
}

@media (min-width: 1400px) {
  #services.services-section-dark::before {
    background-size: 100% auto;
    background-position: center center;
  }
}

/* Disable animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  #services.services-section-dark::before {
    animation: none;
    opacity: 0.12;
  }
}

/* Enhanced section styling */
#services.services-section-dark h2 {
  color: var(--services-text);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
}

/* Subtle overlay to ensure text readability */
#services.services-section-dark::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(14, 26, 36, 0.025) 0%,
    rgba(15, 34, 49, 0.05) 50%,
    rgba(14, 26, 36, 0.025) 100%
  );
  z-index: 0;
  pointer-events: none;
}

/* Ensure all content appears above background */
#services.services-section-dark > * {
  position: relative;
  z-index: 2;
}

/* =========================================================
   BENTO BOX GRID SYSTEM
========================================================= */

/* Bento container - responsive grid */
.bento-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Responsive grid layout - 2x2 grid */
@media (min-width: 768px) {
  .bento-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 1000px;
  }
}

@media (min-width: 1024px) {
  .bento-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    max-width: 1200px;
  }
}

/* =========================================================
   BENTO BOX CARDS
========================================================= */

/* Base bento box styling */
.bento-box {
  background: var(--services-card-gradient);
  border: 1px solid var(--services-border);
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: var(--services-shadow-sm);
  overflow: hidden;
  /* Enhanced backdrop for better contrast against hexagon background */
  backdrop-filter: blur(1px);
  background: linear-gradient(135deg, 
    rgba(16, 40, 54, 0.95) 0%, 
    rgba(13, 30, 40, 0.92) 100%
  );
}

/* Bento box hover effects */
.bento-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--services-shadow-lg);
  border-color: var(--services-hover-border);
  background: linear-gradient(135deg, 
    rgba(16, 40, 54, 0.98) 0%, 
    rgba(13, 30, 40, 0.95) 100%
  );
  /* Enhanced backdrop blur on hover */
  backdrop-filter: blur(2px);
}

/* Focus state for accessibility */
.bento-box:focus {
  outline: none;
  box-shadow: 
    var(--services-shadow-lg),
    0 0 0 3px var(--services-focus-ring);
}

/* Bento box header */
.bento-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.bento-header h3 {
  color: var(--services-primary);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  flex: 1;
}

/* Expand toggle button */
.expand-toggle {
  background: transparent;
  border: 1px solid var(--services-border);
  border-radius: 8px;
  padding: 0.5rem;
  color: var(--services-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 1rem;
  flex-shrink: 0;
}

.expand-toggle:hover {
  background: var(--services-hover-bg);
  border-color: var(--services-hover-border);
  color: var(--services-primary);
}

.expand-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--services-focus-ring);
}

/* Expand icon rotation */
.expand-icon {
  transition: transform 0.3s ease;
}

.bento-box[data-expanded="true"] .expand-icon {
  transform: rotate(180deg);
}

/* =========================================================
   BENTO BOX CONTENT
========================================================= */

/* Preview content (always visible) */
.bento-preview {
  margin-bottom: 1rem;
}

.bento-preview p {
  color: var(--services-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Service highlights list */
.service-highlights {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.service-highlights li {
  color: var(--services-text);
  font-size: 0.9rem;
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.service-highlights li:last-child {
  border-bottom: none;
}

/* Bullet points */
.service-highlights li::before {
  content: "→";
  color: var(--services-primary);
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0.5rem;
}

/* Service metrics */
.service-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.service-metrics .metric {
  background: rgba(90, 167, 163, 0.1);
  border: 1px solid rgba(90, 167, 163, 0.3);
  color: var(--services-primary);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* =========================================================
   EXPANDED CONTENT (Hidden by default)
========================================================= */

.bento-expanded {
  display: none;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--services-border);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease-out;
}

.bento-box[data-expanded="true"] .bento-expanded {
  display: block;
  opacity: 1;
  max-height: 500px;
  animation: expandContent 0.3s ease-out;
}

/* Collapsible content styles */
.bento-collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 0;
}

.bento-box[data-expanded="true"] .bento-collapsible {
  max-height: 500px; /* Adjust based on content */
  opacity: 1;
}

@keyframes expandContent {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hide highlights, metrics, and actions by default */
.bento-box .service-highlights,
.bento-box .service-metrics,
.bento-box .bento-actions {
  display: none;
  transition: all 0.3s ease-out;
}

/* Show content when expanded */
.bento-box[data-expanded="true"] .service-highlights {
  display: block;
  margin: 1rem 0;
}

.bento-box[data-expanded="true"] .service-metrics {
  display: flex;
  margin: 1rem 0;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.bento-box[data-expanded="true"] .bento-actions {
  display: block;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Collapsed state styling */
.bento-box[data-expanded="false"] {
  cursor: pointer;
}

.bento-box[data-expanded="false"]:hover {
  transform: translateY(-2px);
}

/* Expanded state styling */
.bento-box[data-expanded="true"] {
  cursor: default;
}

.bento-box[data-expanded="true"]:hover {
  transform: translateY(-1px);
}

/* Expanded content grid */
.expanded-content {
  display: grid;
  gap: 1.5rem;
}

.capability-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .capability-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Capability items */
.capability-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1rem;
}

.capability-item h4 {
  color: var(--services-primary);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.capability-item p {
  color: var(--services-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 0.75rem 0;
}

/* Tech list */
.tech-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tech-list li {
  color: var(--services-text);
  font-size: 0.85rem;
  padding: 0.25rem 0;
  padding-left: 1rem;
  position: relative;
}

.tech-list li::before {
  content: "•";
  color: var(--services-primary);
  position: absolute;
  left: 0;
  top: 0.25rem;
}

/* =========================================================
   CALL-TO-ACTION BUTTONS
========================================================= */

.bento-actions {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.bento-actions .btn {
  background: var(--services-primary);
  color: #ffffff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.bento-actions .btn:hover {
  background: var(--services-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(90, 167, 163, 0.3);
}

.bento-actions .btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--services-focus-ring);
}

/* =========================================================
   RESPONSIVE DESIGN
========================================================= */

/* Mobile optimizations */
@media (max-width: 767px) {
  .bento-container {
    padding: 0 1rem;
    gap: 1rem;
  }
  
  .bento-box {
    padding: 1rem;
  }
  
  .bento-header h3 {
    font-size: 1.1rem;
  }
  
  .expand-toggle {
    padding: 0.4rem;
    margin-left: 0.5rem;
  }
  
  .capability-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .capability-item {
    padding: 0.75rem;
  }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 1023px) {
  .bento-container {
    padding: 0 1.25rem;
  }
}

/* =========================================================
   ACCESSIBILITY ENHANCEMENTS
========================================================= */

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visible for keyboard navigation */
.bento-box:focus-visible {
  outline: 2px solid var(--services-primary);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bento-box {
    border-width: 2px;
  }
  
  .bento-header h3 {
    color: #ffffff;
  }
  
  .service-highlights li::before {
    color: #ffffff;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .bento-box,
  .expand-icon,
  .bento-actions .btn {
    transition: none;
  }
  
  .bento-box:hover {
    transform: none;
  }
  
  @keyframes expandContent {
    from, to {
      opacity: 1;
      transform: none;
    }
  }
}

/* =========================================================
   CUSTOM PROPERTIES FOR THEMING
========================================================= */

/* CSS custom properties for easy theming */
:root {
  --homepage-services-transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  --homepage-services-border-radius: 16px;
  --homepage-services-spacing: 1.5rem;
}

/* Dark mode preference support */
@media (prefers-color-scheme: dark) {
  #services:not(.services-section-dark) {
    /* Apply dark theme automatically if user prefers dark mode */
    background: var(--services-gradient-bg);
    color: var(--services-text);
  }
}
/* =
========================================================
   INTEGRATION WITH EXISTING HOMEPAGE STYLES
========================================================= */

/* Override existing services section background */
#services.services-section-dark.bg-brand-translucent {
  background: var(--services-gradient-bg) !important;
}

/* Ensure text colors are properly applied */
#services.services-section-dark .text-white {
  color: var(--services-text) !important;
}

#services.services-section-dark .text-primary {
  color: var(--services-primary) !important;
}

/* Update existing service display card to match dark theme */
#services.services-section-dark .brand-card {
  background: var(--services-card-gradient);
  border: 1px solid var(--services-border);
  box-shadow: var(--services-shadow-md);
}

/* Update tab buttons to match dark theme */
#services.services-section-dark .tab-btn {
  background: rgba(255, 255, 255, 0.05);
  color: var(--services-text-muted);
  border: 1px solid var(--services-border);
}

#services.services-section-dark .tab-btn:hover {
  background: var(--services-hover-bg);
  border-color: var(--services-hover-border);
  color: var(--services-text);
}

#services.services-section-dark .tab-btn.active {
  background: var(--services-primary);
  color: #ffffff;
  border-color: var(--services-primary);
}

/* Update service title and description colors */
#services.services-section-dark #service-title {
  color: var(--services-primary) !important;
}

#services.services-section-dark #service-description {
  color: var(--services-text-muted) !important;
}

/* Style the service extra content */
#services.services-section-dark #service-extra .rounded-md {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--services-border);
}

#services.services-section-dark #service-extra h4 {
  color: var(--services-primary);
}

#services.services-section-dark #service-extra ul li {
  color: var(--services-text);
}

/* =========================================================
   ENHANCED VISUAL EFFECTS
========================================================= */

/* Background pattern removed - replaced with hexagon tessellation image */

/* Subtle glow effect on hover for interactive elements */
.bento-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(90, 167, 163, 0.1) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: inherit;
}

.bento-box:hover::after {
  opacity: 1;
}

/* =========================================================
   PERFORMANCE OPTIMIZATIONS
========================================================= */

/* Use transform3d for hardware acceleration */
.bento-box {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.bento-box:hover {
  transform: translate3d(0, -4px, 0);
}

/* Optimize animations for 60fps */
@media (min-width: 768px) {
  .bento-box {
    backface-visibility: hidden;
    perspective: 1000px;
  }
}

/* =========================================================
   PRINT STYLES
========================================================= */

@media print {
  #services.services-section-dark {
    background: white !important;
    color: black !important;
  }
  
  .bento-box {
    background: white !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  
  .bento-header h3 {
    color: black !important;
  }
  
  .service-highlights li::before {
    color: black !important;
  }
}/* 
=========================================================
   SERVICES CTA SECTION
========================================================= */

/* Services CTA styling */
#services .text-center h3 {
  color: var(--services-text);
  margin-bottom: 1rem;
}

#services .text-center p {
  color: var(--services-text-muted);
  margin-bottom: 2rem;
}

/* Large button styling */
.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.1rem;
  border-radius: 12px;
}

/* =========================================================
   ENHANCED BUTTON STYLES
========================================================= */

/* Primary button styling for services section */
#services .btn-primary {
  background: linear-gradient(135deg, var(--services-primary) 0%, #4a9590 100%);
  color: #ffffff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(90, 167, 163, 0.2);
}

#services .btn-primary:hover {
  background: linear-gradient(135deg, #4a9590 0%, var(--services-primary-dark) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(90, 167, 163, 0.3);
  /* Ensure no animated gradient effects interfere */
  animation: none !important;
  background-size: 100% 100% !important;
  background-position: 0% 50% !important;
}

#services .btn-primary:focus {
  outline: none;
  box-shadow: 
    0 4px 16px rgba(90, 167, 163, 0.3),
    0 0 0 3px var(--services-focus-ring);
}

#services .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(90, 167, 163, 0.2);
}

/* =========================================================
   SUBTITLE STYLING
========================================================= */

/* Services section subtitle */
#services p[data-copy="index.services.subtitle"] {
  color: var(--services-text-muted);
  font-size: 1.125rem;
  line-height: 1.6;
  opacity: 0.9;
}

/* =========================================================
   RESPONSIVE ENHANCEMENTS
========================================================= */

/* Mobile CTA section */
@media (max-width: 767px) {
  #services .text-center {
    padding: 0 1rem;
  }
  
  #services .text-center h3 {
    font-size: 1.5rem;
  }
  
  #services .text-center p {
    font-size: 1rem;
  }
  
  .btn-lg {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    width: 100%;
    max-width: 280px;
  }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
  #services .text-center {
    padding: 0 2rem;
  }
}

/* =========================================================
   LOADING STATES
========================================================= */

/* Loading skeleton for service cards */
.bento-box.loading {
  pointer-events: none;
  opacity: 0.7;
}

.bento-box.loading .bento-preview p,
.bento-box.loading .service-highlights li {
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(255, 255, 255, 0.2) 50%, 
    rgba(255, 255, 255, 0.1) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  color: transparent;
  border-radius: 4px;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* =========================================================
   ERROR STATES
========================================================= */

/* Error state for service cards */
.bento-box.error {
  border-color: #ef4444;
  background: linear-gradient(135deg, 
    rgba(239, 68, 68, 0.1) 0%, 
    rgba(239, 68, 68, 0.05) 100%
  );
}

.bento-box.error .bento-header h3 {
  color: #ef4444;
}

/* =========================================================
   ENHANCED INTERACTIONS
========================================================= */

/* Smooth focus transitions */
.bento-box:focus-within {
  border-color: var(--services-hover-border);
  box-shadow: 
    var(--services-shadow-md),
    0 0 0 2px var(--services-focus-ring);
}

/* Keyboard navigation indicators */
.bento-box:focus-visible {
  outline: 2px solid var(--services-primary);
  outline-offset: 2px;
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .bento-box:hover {
    transform: none;
  }
  
  .bento-box:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

/* =========================================================
   CONTENT OVERFLOW HANDLING
========================================================= */

/* Ensure long content doesn't break layout */
.bento-preview p {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.service-highlights li {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Truncate very long service titles */
.bento-header h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 3rem);
}

@media (max-width: 767px) {
  .bento-header h3 {
    white-space: normal;
    line-height: 1.2;
  }
}/*
 =========================================================
   TASK 4: INTERACTIVE HOVER EFFECTS AND ANIMATIONS
========================================================= */

/* =========================================================
   ADVANCED HOVER EFFECTS
========================================================= */

/* Enhanced hover state with multiple visual layers */
.bento-box:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 
    var(--services-shadow-xl),
    0 0 40px rgba(90, 167, 163, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-color: rgba(90, 167, 163, 0.6);
}

/* Subtle glow effect on hover */
.bento-box::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    45deg,
    rgba(90, 167, 163, 0.1) 0%,
    rgba(90, 167, 163, 0.05) 25%,
    transparent 50%,
    rgba(90, 167, 163, 0.05) 75%,
    rgba(90, 167, 163, 0.1) 100%
  );
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

.bento-box:hover::before {
  opacity: 1;
  animation: shimmerGlow 2s ease-in-out infinite;
}

@keyframes shimmerGlow {
  0%, 100% { 
    background-position: -200% 0; 
  }
  50% { 
    background-position: 200% 0; 
  }
}

/* =========================================================
   INTERACTIVE ELEMENTS ANIMATIONS
========================================================= */

/* Enhanced expand toggle hover */
.expand-toggle:hover {
  background: rgba(90, 167, 163, 0.15);
  border-color: rgba(90, 167, 163, 0.5);
  color: var(--services-primary);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(90, 167, 163, 0.2);
}

/* Expand icon rotation with bounce */
.expand-icon {
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.expand-toggle:hover .expand-icon {
  transform: rotate(180deg) scale(1.1);
}

.bento-box[data-expanded="true"] .expand-icon {
  transform: rotate(180deg);
}

.bento-box[data-expanded="true"] .expand-toggle:hover .expand-icon {
  transform: rotate(180deg) scale(1.1);
}

/* =========================================================
   CONTENT ANIMATIONS
========================================================= */

/* Service highlights animation on hover */
.service-highlights {
  overflow: hidden;
}

.service-highlights li {
  transform: translateX(-10px);
  opacity: 0.8;
  transition: all 0.3s ease;
}

.bento-box:hover .service-highlights li {
  transform: translateX(0);
  opacity: 1;
}

/* Staggered animation for highlights */
.bento-box:hover .service-highlights li:nth-child(1) {
  transition-delay: 0.1s;
}

.bento-box:hover .service-highlights li:nth-child(2) {
  transition-delay: 0.2s;
}

.bento-box:hover .service-highlights li:nth-child(3) {
  transition-delay: 0.3s;
}

/* Metrics animation */
.service-metrics .metric {
  transform: scale(0.95);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.bento-box:hover .service-metrics .metric {
  transform: scale(1);
  box-shadow: 0 2px 8px rgba(90, 167, 163, 0.3);
}

.bento-box:hover .service-metrics .metric:nth-child(1) {
  transition-delay: 0.1s;
}

.bento-box:hover .service-metrics .metric:nth-child(2) {
  transition-delay: 0.2s;
}

/* =========================================================
   BUTTON HOVER ANIMATIONS
========================================================= */

/* Enhanced CTA button hover */
.bento-actions .btn:hover {
  background: linear-gradient(135deg, #4a9590 0%, var(--services-primary-dark) 100%);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 
    0 8px 25px rgba(90, 167, 163, 0.4),
    0 0 20px rgba(90, 167, 163, 0.2);
}

.bento-actions .btn:active {
  transform: translateY(-1px) scale(1.02);
  transition-duration: 0.1s;
}

/* Button text animation - DISABLED to prevent visual artifacts */
.bento-actions .btn {
  position: relative;
  overflow: hidden;
}

/* Removed .bento-actions .btn::after shine effect to prevent visual artifacts */

/* =========================================================
   MOUSE TRACKING EFFECTS
========================================================= */

/* Dynamic gradient based on mouse position */
.bento-box {
  position: relative;
  --mouse-x: 50%;
  --mouse-y: 50%;
}

.bento-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    rgba(90, 167, 163, 0.08) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}

.bento-box:hover::after {
  opacity: 1;
}

/* Ensure content stays above the overlay */
.bento-box > * {
  position: relative;
  z-index: 2;
}

/* =========================================================
   LOADING ANIMATIONS
========================================================= */

/* Enhanced loading state */
.bento-box.loading {
  animation: loadingPulse 1.5s ease-in-out infinite;
}

@keyframes loadingPulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.01);
  }
}

/* Loading shimmer for content */
.bento-box.loading .bento-preview p,
.bento-box.loading .service-highlights li,
.bento-box.loading .service-metrics .metric {
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0.05) 0%, 
    rgba(255, 255, 255, 0.15) 50%, 
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: shimmerLoading 1.5s infinite;
  color: transparent;
  border-radius: 4px;
}

@keyframes shimmerLoading {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* =========================================================
   ENTRANCE ANIMATIONS
========================================================= */

/* Staggered entrance animation for bento boxes */
.bento-box {
  animation: fadeInUp 0.6s cubic-bezier(0.25, 1, 0.5, 1) both;
}

.bento-box:nth-child(1) {
  animation-delay: 0.1s;
}

.bento-box:nth-child(2) {
  animation-delay: 0.2s;
}

.bento-box:nth-child(3) {
  animation-delay: 0.3s;
}

.bento-box:nth-child(4) {
  animation-delay: 0.4s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================================================
   FOCUS ANIMATIONS
========================================================= */

/* Enhanced focus states with animations */
.bento-box:focus-visible {
  outline: none;
  box-shadow: 
    var(--services-shadow-lg),
    0 0 0 3px var(--services-focus-ring),
    0 0 20px rgba(90, 167, 163, 0.3);
  animation: focusPulse 2s ease-in-out infinite;
}

@keyframes focusPulse {
  0%, 100% {
    box-shadow: 
      var(--services-shadow-lg),
      0 0 0 3px var(--services-focus-ring),
      0 0 20px rgba(90, 167, 163, 0.3);
  }
  50% {
    box-shadow: 
      var(--services-shadow-lg),
      0 0 0 3px var(--services-focus-ring),
      0 0 30px rgba(90, 167, 163, 0.5);
  }
}

/* =========================================================
   MICRO-INTERACTIONS
========================================================= */

/* Title hover effect */
.bento-header h3 {
  transition: all 0.3s ease;
  position: relative;
}

.bento-box:hover .bento-header h3 {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(90, 167, 163, 0.5);
}

/* Description text animation */
.bento-preview p {
  transition: all 0.3s ease;
  line-height: 1.6;
}

.bento-box:hover .bento-preview p {
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.7;
}

/* Bullet point animation */
.service-highlights li::before {
  transition: all 0.3s ease;
}

.bento-box:hover .service-highlights li::before {
  color: #ffffff;
  transform: translateX(3px);
}

/* =========================================================
   RESPONSIVE ANIMATIONS
========================================================= */

/* Reduce animations on smaller screens */
@media (max-width: 767px) {
  .bento-box:hover {
    transform: translateY(-3px) scale(1.01);
  }
  
  .expand-toggle:hover {
    transform: scale(1.05);
  }
  
  .bento-actions .btn:hover {
    transform: translateY(-1px) scale(1.02);
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .bento-box:hover {
    transform: none;
  }
  
  .bento-box:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  
  .bento-box::before,
  .bento-box::after {
    display: none;
  }
  
  .service-highlights li,
  .service-metrics .metric {
    transform: none;
    opacity: 1;
  }
}

/* =========================================================
   ACCESSIBILITY ANIMATIONS
========================================================= */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .bento-box,
  .expand-icon,
  .bento-actions .btn,
  .service-highlights li,
  .service-metrics .metric {
    transition: none !important;
    animation: none !important;
  }
  
  .bento-box:hover {
    transform: none;
  }
  
  .expand-toggle:hover {
    transform: none;
  }
  
  .bento-actions .btn:hover {
    transform: none;
  }
  
  @keyframes fadeInUp {
    from, to {
      opacity: 1;
      transform: none;
    }
  }
  
  @keyframes shimmerGlow {
    from, to {
      background-position: 0 0;
    }
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  .bento-box:hover {
    border-width: 3px;
    border-color: #ffffff;
  }
  
  .bento-box:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
  }
}

/* =========================================================
   PERFORMANCE OPTIMIZATIONS
========================================================= */

/* GPU acceleration for smooth animations */
.bento-box,
.expand-toggle,
.bento-actions .btn,
.service-highlights li,
.service-metrics .metric {
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Remove will-change after animations complete */
.bento-box:not(:hover) {
  will-change: auto;
}

/* =========================================================
   DARK MODE ENHANCEMENTS
========================================================= */

/* Enhanced dark mode hover effects */
@media (prefers-color-scheme: dark) {
  .bento-box:hover {
    box-shadow: 
      var(--services-shadow-xl),
      0 0 50px rgba(90, 167, 163, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  
  .bento-box:hover .bento-header h3 {
    text-shadow: 0 0 15px rgba(90, 167, 163, 0.7);
  }
}/* =
========================================================
   TASK 6: CALL-TO-ACTION BUTTONS AND NAVIGATION
========================================================= */

/* =========================================================
   ENHANCED CTA BUTTON SYSTEM
========================================================= */

/* Primary CTA button - matches services pages design */
.bento-actions .btn-primary {
  background: linear-gradient(135deg, var(--services-primary) 0%, #4a9590 100%);
  color: #ffffff;
  border: none;
  padding: 0.875rem 1.75rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: pointer;
  box-shadow: 
    0 4px 14px rgba(90, 167, 163, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  min-width: 140px;
  text-align: center;
  letter-spacing: 0.02em;
}

/* Enhanced hover state */
.bento-actions .btn-primary:hover {
  background: linear-gradient(135deg, #4a9590 0%, var(--services-primary-dark) 100%);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 
    0 8px 25px rgba(90, 167, 163, 0.4),
    0 0 20px rgba(90, 167, 163, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  /* Ensure no animated gradient effects interfere */
  animation: none !important;
  background-size: 100% 100% !important;
  background-position: 0% 50% !important;
}

/* Active state */
.bento-actions .btn-primary:active {
  transform: translateY(-1px) scale(1.01);
  transition-duration: 0.1s;
  box-shadow: 
    0 4px 14px rgba(90, 167, 163, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Focus state for accessibility */
.bento-actions .btn-primary:focus {
  outline: none;
  box-shadow: 
    0 8px 25px rgba(90, 167, 163, 0.4),
    0 0 20px rgba(90, 167, 163, 0.2),
    0 0 0 3px var(--services-focus-ring),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Button icon support */
.bento-actions .btn-primary .btn-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.bento-actions .btn-primary:hover .btn-icon {
  transform: translateX(2px);
}

/* =========================================================
   SECONDARY CTA BUTTONS
========================================================= */

/* Secondary button style */
.bento-actions .btn-secondary {
  background: transparent;
  color: var(--services-primary);
  border: 2px solid var(--services-primary);
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
  min-width: 120px;
  text-align: center;
}

.bento-actions .btn-secondary:hover {
  background: rgba(90, 167, 163, 0.1);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(90, 167, 163, 0.2);
}

/* =========================================================
   BUTTON VARIATIONS
========================================================= */

/* Large button for main CTA section */
.btn-lg {
  padding: 1.125rem 2.25rem;
  font-size: 1.1rem;
  border-radius: 12px;
  min-width: 180px;
}

/* Small button for compact spaces */
.btn-sm {
  padding: 0.625rem 1.25rem;
  font-size: 0.85rem;
  border-radius: 8px;
  min-width: 100px;
}

/* =========================================================
   BUTTON STATES AND LOADING
========================================================= */

/* Loading state */
.btn-loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}

.btn-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: buttonSpin 0.8s linear infinite;
}

@keyframes buttonSpin {
  to { transform: rotate(360deg); }
}

/* Disabled state */
.btn-disabled,
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
}

/* Success state (for form submissions) */
.btn-success {
  background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
  color: #ffffff;
}

.btn-success:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

/* =========================================================
   NAVIGATION ENHANCEMENTS
========================================================= */

/* Enhanced navigation for service links */
.service-nav-link {
  color: var(--services-text);
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  padding: 0.25rem 0;
}

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

.service-nav-link:hover {
  color: var(--services-primary);
}

.service-nav-link:hover::after {
  width: 100%;
}

/* Breadcrumb navigation */
.service-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--services-text-muted);
}

.service-breadcrumb a {
  color: var(--services-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.service-breadcrumb a:hover {
  color: #ffffff;
}

.service-breadcrumb .separator {
  color: var(--services-text-muted);
  margin: 0 0.25rem;
}

/* =========================================================
   BUTTON ANIMATIONS AND EFFECTS
========================================================= */

/* Shine effect on hover - DISABLED to prevent visual artifacts */
/* Removed .btn-primary::before shine effect to prevent visual artifacts */

/* Pulse effect for important CTAs */
.btn-pulse {
  animation: buttonPulse 2s ease-in-out infinite;
}

@keyframes buttonPulse {
  0%, 100% {
    box-shadow: 
      0 4px 14px rgba(90, 167, 163, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 
      0 4px 14px rgba(90, 167, 163, 0.25),
      0 0 20px rgba(90, 167, 163, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
}

/* Magnetic effect for buttons */
.btn-magnetic {
  transition: transform 0.2s ease;
}

.btn-magnetic:hover {
  transform: translateY(-3px) scale(1.05);
}

/* =========================================================
   RESPONSIVE BUTTON DESIGN
========================================================= */

/* Mobile optimizations */
@media (max-width: 767px) {
  .bento-actions .btn-primary {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    min-width: 120px;
  }
  
  .btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
    width: 100%;
    max-width: 280px;
  }
  
  .bento-actions {
    text-align: center;
  }
  
  /* Stack buttons on mobile */
  .bento-actions.multiple-buttons {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .bento-actions.multiple-buttons .btn {
    width: 100%;
  }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
  .bento-actions .btn-primary {
    padding: 0.8rem 1.6rem;
    font-size: 0.92rem;
  }
}

/* =========================================================
   ACCESSIBILITY ENHANCEMENTS
========================================================= */

/* High contrast mode */
@media (prefers-contrast: high) {
  .bento-actions .btn-primary {
    border: 2px solid #ffffff;
    background: var(--services-primary);
  }
  
  .bento-actions .btn-primary:hover {
    background: #ffffff;
    color: var(--services-primary);
  }
  
  .bento-actions .btn-secondary {
    border-width: 3px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bento-actions .btn-primary,
  .bento-actions .btn-secondary,
  .service-nav-link {
    transition: none;
  }
  
  .bento-actions .btn-primary:hover,
  .bento-actions .btn-secondary:hover {
    transform: none;
  }
  
  .btn-pulse {
    animation: none;
  }
  
  .btn-primary::before {
    display: none;
  }
}

/* Focus visible for keyboard navigation */
.bento-actions .btn:focus-visible {
  outline: 2px solid var(--services-primary);
  outline-offset: 2px;
}

/* =========================================================
   BUTTON GROUPS AND LAYOUTS
========================================================= */

/* Button group styling */
.btn-group {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-group .btn {
  flex: 0 0 auto;
}

/* Centered button layout */
.btn-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Full width button */
.btn-full {
  width: 100%;
  justify-content: center;
}

/* =========================================================
   SERVICES CTA SECTION ENHANCEMENTS
========================================================= */

/* Main services CTA section */
#services .services-cta {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 3rem 2rem;
  text-align: center;
  margin-top: 4rem;
  position: relative;
  overflow: hidden;
}

#services .services-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(90, 167, 163, 0.05) 0%,
    transparent 70%
  );
  pointer-events: none;
}

#services .services-cta > * {
  position: relative;
  z-index: 1;
}

#services .services-cta h3 {
  color: var(--services-text);
  margin-bottom: 1rem;
  font-size: 1.75rem;
  font-weight: 700;
}

#services .services-cta p {
  color: var(--services-text-muted);
  margin-bottom: 2rem;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   TOUCH DEVICE OPTIMIZATIONS
========================================================= */

/* Touch-friendly buttons */
@media (hover: none) and (pointer: coarse) {
  .bento-actions .btn-primary {
    min-height: 44px; /* iOS accessibility guideline */
    padding: 0.875rem 1.75rem;
  }
  
  .bento-actions .btn-primary:hover {
    transform: none;
  }
  
  .bento-actions .btn-primary:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  
  /* Remove hover effects that don't work on touch */
  .btn-primary::before {
    display: none;
  }
  
  .btn-magnetic:hover {
    transform: none;
  }
}

/* =========================================================
   PRINT STYLES
========================================================= */

@media print {
  .bento-actions .btn-primary,
  .bento-actions .btn-secondary {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    box-shadow: none !important;
  }
  
  .bento-actions .btn-primary::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
  }
}/* ===
======================================================
   TASK 7: ACCESSIBILITY ENHANCEMENTS AND KEYBOARD NAVIGATION
========================================================= */

/* =========================================================
   KEYBOARD NAVIGATION ENHANCEMENTS
========================================================= */

/* Enhanced focus indicators */
.bento-box:focus-visible {
  outline: 3px solid var(--services-primary);
  outline-offset: 3px;
  box-shadow: 
    var(--services-shadow-lg),
    0 0 0 6px rgba(90, 167, 163, 0.2),
    inset 0 0 0 2px rgba(255, 255, 255, 0.1);
  border-color: var(--services-primary);
}

/* Focus management for interactive elements */
.expand-toggle:focus-visible {
  outline: 2px solid var(--services-primary);
  outline-offset: 2px;
  background: rgba(90, 167, 163, 0.2);
  border-color: var(--services-primary);
  box-shadow: 0 0 0 4px rgba(90, 167, 163, 0.3);
}

.bento-actions .btn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
  box-shadow: 
    0 8px 25px rgba(90, 167, 163, 0.4),
    0 0 20px rgba(90, 167, 163, 0.2),
    0 0 0 6px rgba(255, 255, 255, 0.3);
}

/* Skip links for keyboard navigation */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--services-primary);
  color: #ffffff;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  z-index: 10000;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 6px;
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Focus trap for expanded content */
.bento-box[data-expanded="true"] {
  position: relative;
}

.bento-box[data-expanded="true"]:focus-within {
  outline: 2px solid var(--services-primary);
  outline-offset: 2px;
}

/* =========================================================
   SCREEN READER ENHANCEMENTS
========================================================= */

/* Screen reader only content */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Screen reader only content that becomes visible on focus */
.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: inherit !important;
  margin: inherit !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: inherit !important;
}

/* Enhanced ARIA live regions */
.live-region {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Status announcements */
.status-announcement {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  font-size: 0;
}

/* =========================================================
   HIGH CONTRAST MODE SUPPORT
========================================================= */

@media (prefers-contrast: high) {
  .bento-box {
    border: 3px solid #ffffff;
    background: #000000;
    color: #ffffff;
  }
  
  .bento-box:hover {
    border-color: var(--services-primary);
    background: #1a1a1a;
  }
  
  .bento-box:focus-visible {
    outline: 4px solid #ffffff;
    outline-offset: 4px;
    border-color: var(--services-primary);
  }
  
  .bento-header h3 {
    color: #ffffff !important;
  }
  
  .service-highlights li::before {
    color: #ffffff;
  }
  
  .service-metrics .metric {
    background: #ffffff;
    color: #000000;
    border: 2px solid #ffffff;
  }
  
  .bento-actions .btn-primary {
    background: #ffffff;
    color: #000000;
    border: 3px solid #ffffff;
  }
  
  .bento-actions .btn-primary:hover {
    background: var(--services-primary);
    color: #ffffff;
    border-color: #ffffff;
  }
  
  .expand-toggle {
    background: #ffffff;
    color: #000000;
    border: 2px solid #ffffff;
  }
  
  .expand-toggle:hover {
    background: var(--services-primary);
    color: #ffffff;
  }
}

/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {
  /* Disable all animations and transitions */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Remove transforms that could cause motion sickness */
  .bento-box:hover {
    transform: none !important;
  }
  
  .expand-toggle:hover {
    transform: none !important;
  }
  
  .bento-actions .btn:hover {
    transform: none !important;
  }
  
  /* Keep essential focus indicators */
  .bento-box:focus-visible {
    outline: 3px solid var(--services-primary);
    outline-offset: 3px;
  }
  
  /* Disable entrance animations */
  .bento-box {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   COLOR CONTRAST ENHANCEMENTS
========================================================= */

/* Ensure sufficient color contrast */
.bento-preview p {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
}

.service-highlights li {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 400;
}

.service-metrics .metric {
  background: rgba(90, 167, 163, 0.2);
  border: 1px solid rgba(90, 167, 163, 0.5);
  color: #ffffff;
  font-weight: 600;
}

/* Enhanced text readability */
.bento-header h3 {
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* =========================================================
   KEYBOARD NAVIGATION FLOW
========================================================= */

/* Tab order management */
.bento-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.bento-box {
  position: relative;
  isolation: isolate;
}

/* Focus management within cards */
.bento-box:focus-within .expand-toggle {
  background: rgba(90, 167, 163, 0.1);
  border-color: rgba(90, 167, 163, 0.3);
}

.bento-box:focus-within .bento-actions .btn {
  box-shadow: 0 0 0 2px rgba(90, 167, 163, 0.3);
}

/* =========================================================
   ARIA ENHANCEMENTS
========================================================= */

/* Loading states */
.bento-box[aria-busy="true"] {
  position: relative;
}

.bento-box[aria-busy="true"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;
}

/* Expanded state indicators */
.bento-box[data-expanded="true"] .bento-expanded {
  display: block;
}

.bento-box[data-expanded="false"] .bento-expanded {
  display: none;
}

/* Error states */
.bento-box[aria-invalid="true"] {
  border-color: #ef4444;
  background: linear-gradient(135deg, 
    rgba(239, 68, 68, 0.1) 0%, 
    rgba(239, 68, 68, 0.05) 100%
  );
}

.bento-box[aria-invalid="true"] .bento-header h3 {
  color: #ef4444 !important;
}

/* =========================================================
   TOUCH AND POINTER ACCESSIBILITY
========================================================= */

/* Minimum touch target sizes (44px minimum) */
.expand-toggle {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bento-actions .btn {
  min-height: 44px;
  padding: 0.875rem 1.75rem;
}

/* Touch-friendly spacing */
@media (pointer: coarse) {
  .bento-container {
    gap: 1.5rem;
  }
  
  .bento-box {
    padding: 1.25rem;
  }
  
  .service-highlights li {
    padding: 0.75rem 0;
    padding-left: 1.5rem;
  }
  
  .service-metrics {
    gap: 1rem;
  }
  
  .service-metrics .metric {
    padding: 0.5rem 1rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* =========================================================
   LANGUAGE AND INTERNATIONALIZATION
========================================================= */

/* RTL language support */
[dir="rtl"] .service-highlights li {
  padding-left: 0;
  padding-right: 1.5rem;
}

[dir="rtl"] .service-highlights li::before {
  left: auto;
  right: 0;
  content: "←";
}

[dir="rtl"] .expand-toggle {
  margin-left: 0;
  margin-right: 1rem;
}

[dir="rtl"] .bento-actions {
  text-align: right;
}

/* Language-specific font adjustments */
:lang(ar) .bento-header h3,
:lang(he) .bento-header h3 {
  font-family: "Noto Sans Arabic", "Noto Sans Hebrew", var(--font-sans);
}

:lang(zh) .bento-header h3,
:lang(ja) .bento-header h3,
:lang(ko) .bento-header h3 {
  font-family: "Noto Sans CJK", var(--font-sans);
}

/* =========================================================
   PRINT ACCESSIBILITY
========================================================= */

@media print {
  .bento-box {
    break-inside: avoid;
    page-break-inside: avoid;
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    box-shadow: none !important;
  }
  
  .bento-header h3 {
    color: #000000 !important;
    text-shadow: none !important;
  }
  
  .service-highlights li {
    color: #000000 !important;
  }
  
  .service-highlights li::before {
    color: #000000 !important;
  }
  
  .service-metrics .metric {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
  }
  
  .bento-actions .btn {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    text-decoration: underline !important;
  }
  
  .bento-actions .btn::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
  }
  
  /* Hide interactive elements that don't work in print */
  .expand-toggle {
    display: none !important;
  }
  
  /* Show all content in print */
  .bento-expanded {
    display: block !important;
  }
}

/* =========================================================
   FORCED COLORS MODE (Windows High Contrast)
========================================================= */

@media (forced-colors: active) {
  .bento-box {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
  
  .bento-box:hover,
  .bento-box:focus {
    border-color: Highlight;
    background: Canvas;
  }
  
  .bento-header h3 {
    color: ButtonText;
  }
  
  .service-highlights li::before {
    color: ButtonText;
  }
  
  .service-metrics .metric {
    background: ButtonFace;
    color: ButtonText;
    border: 1px solid ButtonText;
  }
  
  .bento-actions .btn {
    background: ButtonFace;
    color: ButtonText;
    border: 2px solid ButtonText;
  }
  
  .bento-actions .btn:hover,
  .bento-actions .btn:focus {
    background: Highlight;
    color: HighlightText;
    border-color: HighlightText;
  }
  
  .expand-toggle {
    background: ButtonFace;
    color: ButtonText;
    border: 1px solid ButtonText;
  }
  
  .expand-toggle:hover,
  .expand-toggle:focus {
    background: Highlight;
    color: HighlightText;
  }
}

/* =========================================================
   FOCUS MANAGEMENT UTILITIES
========================================================= */

/* Focus trap helper */
.focus-trap {
  position: relative;
}

.focus-trap-active {
  isolation: isolate;
}

/* Focus restoration */
.focus-restore {
  outline: none;
}

/* Keyboard navigation hints */
.keyboard-hint {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1000;
}

.bento-box:focus-visible .keyboard-hint {
  opacity: 1;
}

/* =========================================================
   RESPONSIVE ACCESSIBILITY
========================================================= */

/* Mobile accessibility enhancements */
@media (max-width: 767px) {
  .bento-box:focus-visible {
    outline-offset: 2px;
  }
  
  .skip-link {
    left: 10px;
    right: 10px;
    width: auto;
    text-align: center;
  }
  
  .keyboard-hint {
    position: static;
    transform: none;
    margin-top: 0.5rem;
    display: block;
    background: rgba(90, 167, 163, 0.1);
    color: var(--services-text);
    border: 1px solid rgba(90, 167, 163, 0.3);
  }
  
  .bento-box:focus-visible .keyboard-hint {
    opacity: 1;
  }
}

/* Tablet accessibility adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
  .bento-container {
    gap: 1.75rem;
  }
  
  .expand-toggle {
    min-width: 48px;
    min-height: 48px;
  }
}

/* =========================================================
   ANIMATION ACCESSIBILITY
========================================================= */

/* Respect animation preferences */
@media (prefers-reduced-motion: no-preference) {
  .focus-indicator {
    animation: focusGlow 2s ease-in-out infinite;
  }
  
  @keyframes focusGlow {
    0%, 100% {
      box-shadow: 0 0 0 3px rgba(90, 167, 163, 0.3);
    }
    50% {
      box-shadow: 0 0 0 6px rgba(90, 167, 163, 0.5);
    }
  }
}

/* Safe animations that don't cause vestibular issues */
.safe-fade {
  transition: opacity 0.2s ease;
}

.safe-scale {
  transition: transform 0.1s ease;
}

.safe-scale:hover {
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .safe-fade,
  .safe-scale {
    transition: none;
  }
  
  .safe-scale:hover {
    transform: none;
  }
}/* 
=========================================================
   LAYOUT FIXES AND EXPAND/COLLAPSE IMPROVEMENTS
========================================================= */

/* Ensure 2x2 grid layout */
.bento-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 768px) {
  .bento-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (min-width: 1024px) {
  .bento-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    max-width: 1200px;
  }
}

/* Improved expand/collapse animation */
.bento-expanded {
  display: block;
  margin-top: 1rem;
  padding-top: 0;
  border-top: 1px solid var(--services-border);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.bento-box[data-expanded="true"] .bento-expanded {
  opacity: 1;
  max-height: 400px;
  padding-top: 1rem;
}

/* Smooth expand icon rotation */
.expand-icon {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin: center;
}

.bento-box[data-expanded="true"] .expand-icon {
  transform: rotate(180deg);
}

/* Enhanced expand toggle button */
.expand-toggle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--services-border);
  border-radius: 8px;
  padding: 0.5rem;
  color: var(--services-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 1rem;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expand-toggle:hover {
  background: rgba(90, 167, 163, 0.1);
  border-color: rgba(90, 167, 163, 0.3);
  color: var(--services-primary);
  transform: scale(1.05);
}

.expand-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--services-focus-ring);
  background: rgba(90, 167, 163, 0.1);
}

/* Ensure bento boxes start collapsed */
.bento-box[data-expanded="false"] .bento-expanded {
  display: block;
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  overflow: hidden;
}

/* Better visual feedback for collapsed state */
.bento-box[data-expanded="false"] .expand-toggle {
  background: rgba(255, 255, 255, 0.03);
}

.bento-box[data-expanded="true"] .expand-toggle {
  background: rgba(90, 167, 163, 0.15);
  border-color: rgba(90, 167, 163, 0.4);
  color: var(--services-primary);
}

/* Improved content spacing in expanded state */
.expanded-content {
  display: grid;
  gap: 1.5rem;
}

.expanded-content .service-highlights {
  margin: 0;
}

.expanded-content .service-metrics {
  margin: 0;
}

/* Mobile optimizations for expand/collapse */
@media (max-width: 767px) {
  .bento-expanded {
    margin-top: 0.75rem;
  }
  
  .bento-box[data-expanded="true"] .bento-expanded {
    max-height: 300px;
    padding-top: 0.75rem;
  }
  
  .expand-toggle {
    margin-left: 0.5rem;
    min-width: 40px;
    min-height: 40px;
    padding: 0.4rem;
  }
  
  /* Accordion animation for mobile */
  .accordion-closing {
    transition: all 0.3s ease-out;
    opacity: 0.7;
  }
  
  /* Ensure only one box expanded at a time on mobile */
  .bento-box[data-expanded="true"] {
    margin-bottom: 1rem;
    border-color: rgba(90, 167, 163, 0.6);
    box-shadow: 
      var(--services-shadow-lg),
      0 0 0 1px rgba(90, 167, 163, 0.3);
  }
  
  /* Visual hint for accordion behavior */
  .bento-container::before {
    content: "Tap to expand • Only one section open at a time";
    display: block;
    text-align: center;
    font-size: 0.8rem;
    color: var(--services-text-muted);
    margin-bottom: 1rem;
    opacity: 0.7;
  }
}

/* Accessibility improvements for expand/collapse */
@media (prefers-reduced-motion: reduce) {
  .bento-expanded {
    transition: none;
  }
  
  .expand-icon {
    transition: none;
  }
  
  .expand-toggle {
    transition: none;
  }
  
  .expand-toggle:hover {
    transform: none;
  }
}

/* High contrast mode for expand/collapse */
@media (prefers-contrast: high) {
  .expand-toggle {
    background: #ffffff;
    color: #000000;
    border: 2px solid #000000;
  }
  
  .expand-toggle:hover,
  .expand-toggle:focus {
    background: var(--services-primary);
    color: #ffffff;
    border-color: #ffffff;
  }
  
  .bento-box[data-expanded="true"] .expand-toggle {
    background: var(--services-primary);
    color: #ffffff;
  }
}/* ======
===================================================
   TASK 8: RESPONSIVE DESIGN AND MOBILE OPTIMIZATION
========================================================= */

/* =========================================================
   MOBILE-FIRST RESPONSIVE BREAKPOINTS
========================================================= */

/* Base styles (Mobile first - 320px+) */
.bento-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

.bento-box {
  padding: 1rem;
  border-radius: 12px;
  min-height: auto;
}

/* Small Mobile (375px+) */
@media (min-width: 375px) {
  .bento-container {
    padding: 0 1.25rem;
    gap: 1.25rem;
  }
  
  .bento-box {
    padding: 1.25rem;
  }
}

/* Large Mobile (414px+) */
@media (min-width: 414px) {
  .bento-container {
    gap: 1.5rem;
  }
  
  .bento-box {
    padding: 1.5rem;
    border-radius: 14px;
  }
}

/* Tablet Portrait (768px+) */
@media (min-width: 768px) {
  .bento-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 900px;
    padding: 0 2rem;
  }
  
  .bento-box {
    padding: 1.75rem;
    border-radius: 16px;
  }
}

/* Tablet Landscape (1024px+) */
@media (min-width: 1024px) {
  .bento-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    max-width: 1200px;
    padding: 0 2.5rem;
  }
  
  .bento-box {
    padding: 2rem;
  }
}

/* Desktop (1200px+) */
@media (min-width: 1200px) {
  .bento-container {
    gap: 3rem;
    max-width: 1400px;
  }
}

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
  .bento-container {
    max-width: 1600px;
  }
}

/* =========================================================
   MOBILE-SPECIFIC OPTIMIZATIONS
========================================================= */

/* Touch-friendly interactions */
@media (max-width: 767px) {
  /* Larger touch targets */
  .expand-toggle {
    min-width: 48px;
    min-height: 48px;
    padding: 0.75rem;
    margin-left: 0.75rem;
  }
  
  .bento-actions .btn {
    min-height: 48px;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    width: 100%;
    text-align: center;
  }
  
  /* Improved typography for mobile */
  .bento-header h3 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
  }
  
  .bento-preview p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
  }
  
  /* Mobile-optimized spacing */
  .service-highlights {
    margin: 1rem 0;
  }
  
  .service-highlights li {
    padding: 0.625rem 0;
    padding-left: 1.25rem;
    font-size: 0.9rem;
  }
  
  .service-metrics {
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
  }
  
  .service-metrics .metric {
    padding: 0.5rem 0.875rem;
    font-size: 0.85rem;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 120px;
  }
  
  /* Mobile expand/collapse optimization */
  .bento-expanded {
    margin-top: 0.75rem;
  }
  
  .bento-box[data-expanded="true"] .bento-expanded {
    max-height: 350px;
    padding-top: 0.75rem;
  }
  
  /* Mobile-friendly animations */
  .bento-box:hover {
    transform: translateY(-2px) scale(1.01);
  }
  
  .bento-actions .btn:hover {
    transform: translateY(-1px);
  }
}

/* =========================================================
   TABLET-SPECIFIC OPTIMIZATIONS
========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet-optimized grid */
  .bento-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
  
  /* Balanced typography for tablet */
  .bento-header h3 {
    font-size: 1.375rem;
    line-height: 1.25;
  }
  
  .bento-preview p {
    font-size: 1rem;
    line-height: 1.6;
  }
  
  /* Tablet touch targets */
  .expand-toggle {
    min-width: 44px;
    min-height: 44px;
  }
  
  .bento-actions .btn {
    min-height: 44px;
    padding: 0.8rem 1.6rem;
  }
  
  /* Tablet metrics layout */
  .service-metrics {
    gap: 1rem;
  }
  
  .service-metrics .metric {
    flex: 1 1 auto;
    min-width: 100px;
  }
}

/* =========================================================
   DESKTOP-SPECIFIC OPTIMIZATIONS
========================================================= */

@media (min-width: 1024px) {
  /* Desktop hover effects */
  .bento-box:hover {
    transform: translateY(-6px) scale(1.02);
  }
  
  .bento-actions .btn:hover {
    transform: translateY(-2px) scale(1.05);
  }
  
  /* Desktop typography */
  .bento-header h3 {
    font-size: 1.5rem;
    line-height: 1.2;
  }
  
  .bento-preview p {
    font-size: 1.05rem;
    line-height: 1.65;
  }
  
  /* Desktop metrics layout */
  .service-metrics {
    gap: 1.25rem;
  }
  
  .service-metrics .metric {
    flex: 0 1 auto;
    min-width: auto;
  }
}

/* =========================================================
   ORIENTATION-SPECIFIC STYLES
========================================================= */

/* Portrait orientation optimizations */
@media (orientation: portrait) and (max-width: 768px) {
  .bento-container {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  
  .bento-box {
    max-width: 100%;
  }
  
  /* Stack metrics vertically in portrait */
  .service-metrics {
    flex-direction: column;
    align-items: stretch;
  }
  
  .service-metrics .metric {
    width: 100%;
    text-align: center;
  }
}

/* Landscape orientation optimizations */
@media (orientation: landscape) and (max-width: 1023px) {
  .bento-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  /* Horizontal metrics in landscape */
  .service-metrics {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* =========================================================
   DEVICE-SPECIFIC OPTIMIZATIONS
========================================================= */

/* iPhone SE and similar small screens */
@media (max-width: 375px) {
  .bento-container {
    padding: 0 0.75rem;
    gap: 0.875rem;
  }
  
  .bento-box {
    padding: 0.875rem;
  }
  
  .bento-header h3 {
    font-size: 1.125rem;
  }
  
  .bento-preview p {
    font-size: 0.9rem;
  }
  
  .service-highlights li {
    font-size: 0.85rem;
    padding: 0.5rem 0;
  }
  
  .service-metrics .metric {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    min-width: 100px;
  }
}

/* iPad and similar tablets */
@media (min-width: 768px) and (max-width: 1024px) {
  .bento-container {
    max-width: 900px;
  }
  
  /* Optimize for iPad touch */
  .bento-box {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .bento-box:active {
    transform: scale(0.98);
  }
}

/* =========================================================
   HIGH-DPI DISPLAY OPTIMIZATIONS
========================================================= */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Sharper borders and shadows for retina displays */
  .bento-box {
    border-width: 0.5px;
    box-shadow: 
      0 2px 8px rgba(0, 0, 0, 0.15),
      0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .bento-box:hover {
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.25),
      0 4px 16px rgba(90, 167, 163, 0.15);
  }
  
  .service-metrics .metric {
    border-width: 0.5px;
  }
  
  .expand-toggle {
    border-width: 0.5px;
  }
}

/* =========================================================
   TOUCH DEVICE OPTIMIZATIONS
========================================================= */

@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects that don't work on touch */
  .bento-box:hover {
    transform: none;
    box-shadow: var(--services-shadow-sm);
  }
  
  /* Add touch feedback */
  .bento-box:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  
  .bento-actions .btn:hover {
    transform: none;
  }
  
  .bento-actions .btn:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
  }
  
  .expand-toggle:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.05);
  }
  
  .expand-toggle:active {
    transform: scale(0.94);
    background: rgba(90, 167, 163, 0.2);
  }
  
  /* Larger touch targets */
  .expand-toggle {
    min-width: 48px;
    min-height: 48px;
  }
  
  .bento-actions .btn {
    min-height: 48px;
    padding: 1rem 1.5rem;
  }
  
  /* Touch-friendly spacing */
  .service-highlights li {
    padding: 0.75rem 0;
    padding-left: 1.5rem;
  }
  
  .service-metrics {
    gap: 1rem;
  }
}

/* =========================================================
   PRINT OPTIMIZATIONS
========================================================= */

@media print {
  .bento-container {
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: none;
    padding: 0;
  }
  
  .bento-box {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #000;
    border-radius: 0;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  
  .bento-header h3 {
    color: #000 !important;
    font-size: 1.2rem;
  }
  
  .bento-preview p {
    color: #000 !important;
    font-size: 0.9rem;
  }
  
  .service-highlights li {
    color: #000 !important;
    font-size: 0.85rem;
  }
  
  .service-metrics .metric {
    background: #f0f0f0 !important;
    color: #000 !important;
    border: 1px solid #ccc !important;
    font-size: 0.8rem;
  }
  
  .expand-toggle {
    display: none !important;
  }
  
  .bento-expanded {
    display: block !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  .bento-actions .btn {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    text-decoration: underline;
  }
}

/* =========================================================
   PERFORMANCE OPTIMIZATIONS FOR MOBILE
========================================================= */

/* Reduce animations on lower-end devices */
@media (max-width: 767px) {
  .bento-box,
  .expand-toggle,
  .bento-actions .btn {
    transition-duration: 0.2s;
  }
  
  .bento-expanded {
    transition-duration: 0.3s;
  }
  
  .expand-icon {
    transition-duration: 0.2s;
  }
}

/* Optimize for devices with limited processing power */
@media (max-width: 480px) {
  .bento-box::before,
  .bento-box::after {
    display: none;
  }
  
  .bento-actions .btn::before {
    display: none;
  }
  
  /* Simplified animations */
  .bento-box {
    will-change: auto;
  }
  
  .bento-box:hover {
    will-change: transform;
  }
}

/* =========================================================
   ACCESSIBILITY RESPONSIVE ENHANCEMENTS
========================================================= */

/* Mobile accessibility improvements */
@media (max-width: 767px) {
  .skip-link {
    left: 0.5rem;
    right: 0.5rem;
    width: auto;
    text-align: center;
    font-size: 1rem;
    padding: 0.75rem 1rem;
  }
  
  .keyboard-hint {
    position: static;
    transform: none;
    margin-top: 0.5rem;
    display: block;
    background: rgba(90, 167, 163, 0.1);
    color: var(--services-text);
    border: 1px solid rgba(90, 167, 163, 0.3);
    border-radius: 4px;
    padding: 0.5rem;
    font-size: 0.85rem;
    text-align: center;
  }
  
  .bento-box:focus-visible .keyboard-hint {
    opacity: 1;
  }
}

/* Tablet accessibility adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
  .expand-toggle {
    min-width: 48px;
    min-height: 48px;
  }
  
  .bento-box:focus-visible {
    outline-offset: 3px;
  }
}

/* =========================================================
   CONTAINER QUERIES (Future-proofing)
========================================================= */

/* When container queries are supported, use them for more precise control */
@supports (container-type: inline-size) {
  .bento-container {
    container-type: inline-size;
  }
  
  @container (max-width: 600px) {
    .bento-box {
      padding: 1rem;
    }
    
    .service-metrics {
      flex-direction: column;
    }
  }
  
  @container (min-width: 800px) {
    .bento-box {
      padding: 2rem;
    }
    
    .service-metrics {
      flex-direction: row;
    }
  }
}

/* =========================================================
   ENHANCED MOBILE TOUCH INTERACTIONS
========================================================= */

/* Improved touch feedback for mobile devices */
@media (hover: none) and (pointer: coarse) {
  /* Enhanced touch targets */
  .bento-box {
    min-height: 200px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(90, 167, 163, 0.2);
  }
  
  /* Touch-specific active states */
  .bento-box:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
    background: linear-gradient(135deg, 
      rgba(16, 40, 54, 0.95) 0%, 
      rgba(13, 30, 40, 0.95) 100%
    );
  }
  
  .expand-toggle:active {
    transform: scale(0.9);
    background: rgba(90, 167, 163, 0.3);
  }
  
  .bento-actions .btn:active {
    transform: scale(0.95);
    background: linear-gradient(135deg, #4a9590 0%, var(--services-primary-dark) 100%);
  }
  
  /* Prevent text selection on touch */
  .bento-box {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Allow text selection for descriptions */
  .bento-preview p,
  .service-highlights li {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
  }
}

/* =========================================================
   MOBILE VIEWPORT OPTIMIZATIONS
========================================================= */

/* Very small screens (iPhone SE, etc.) */
@media (max-width: 320px) {
  .bento-container {
    padding: 0 0.5rem;
    gap: 0.75rem;
  }
  
  .bento-box {
    padding: 0.75rem;
    border-radius: 10px;
  }
  
  .bento-header h3 {
    font-size: 1rem;
    line-height: 1.2;
  }
  
  .bento-preview p {
    font-size: 0.85rem;
    line-height: 1.5;
  }
  
  .service-highlights li {
    font-size: 0.8rem;
    padding: 0.4rem 0;
    padding-left: 1rem;
  }
  
  .service-metrics .metric {
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
    min-height: 32px;
  }
  
  .expand-toggle {
    min-width: 40px;
    min-height: 40px;
    padding: 0.5rem;
  }
  
  .bento-actions .btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    min-height: 44px;
  }
}

/* =========================================================
   LANDSCAPE MOBILE OPTIMIZATIONS
========================================================= */

@media (max-height: 500px) and (orientation: landscape) {
  .bento-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-height: 80vh;
    overflow-y: auto;
  }
  
  .bento-box {
    padding: 1rem;
    min-height: auto;
  }
  
  .bento-header h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }
  
  .bento-preview p {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
  }
  
  .service-highlights {
    margin: 0.75rem 0;
  }
  
  .service-highlights li {
    padding: 0.4rem 0;
    font-size: 0.85rem;
  }
  
  .service-metrics {
    margin-top: 0.75rem;
    gap: 0.5rem;
  }
  
  .service-metrics .metric {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
  }
  
  .bento-expanded {
    max-height: 200px;
    overflow-y: auto;
  }
}

/* =========================================================
   FOLDABLE DEVICE SUPPORT
========================================================= */

/* Support for foldable devices */
@media (spanning: single-fold-vertical) {
  .bento-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (spanning: single-fold-horizontal) {
  .bento-container {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .bento-box {
    max-height: 300px;
    overflow-y: auto;
  }
}

/* =========================================================
   SAFE AREA SUPPORT (iPhone X+)
========================================================= */

@supports (padding: max(0px)) {
  .bento-container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  
  @media (max-width: 767px) {
    .bento-container {
      padding-left: max(0.75rem, env(safe-area-inset-left));
      padding-right: max(0.75rem, env(safe-area-inset-right));
    }
  }
}

/* =========================================================
   DYNAMIC VIEWPORT UNITS
========================================================= */

/* Use dynamic viewport units for better mobile support */
@supports (height: 100dvh) {
  #services {
    min-height: 50dvh;
  }
}

@supports (height: 100svh) {
  #services {
    min-height: 50svh;
  }
}

/* =========================================================
   ENHANCED FOCUS MANAGEMENT FOR MOBILE
========================================================= */

@media (max-width: 767px) {
  .bento-box:focus-visible {
    outline: 3px solid var(--services-primary);
    outline-offset: 2px;
    box-shadow: 
      var(--services-shadow-lg),
      0 0 0 6px rgba(90, 167, 163, 0.3);
  }
  
  .expand-toggle:focus-visible {
    outline: 2px solid var(--services-primary);
    outline-offset: 1px;
    box-shadow: 0 0 0 4px rgba(90, 167, 163, 0.4);
  }
  
  .bento-actions .btn:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 
      0 4px 16px rgba(90, 167, 163, 0.4),
      0 0 0 6px rgba(255, 255, 255, 0.4);
  }
}

/* =========================================================
   MOBILE PERFORMANCE OPTIMIZATIONS
========================================================= */

@media (max-width: 767px) {
  /* Reduce GPU layers on mobile */
  .bento-box {
    will-change: auto;
  }
  
  .bento-box:active {
    will-change: transform;
  }
  
  /* Simplify shadows on mobile */
  .bento-box {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  
  .bento-box:active {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  }
  
  /* Reduce animation complexity */
  .bento-expanded {
    transition: max-height 0.3s ease, opacity 0.3s ease;
  }
  
  .expand-icon {
    transition: transform 0.2s ease;
  }
}

/* =========================================================
   MOBILE ACCESSIBILITY ENHANCEMENTS
========================================================= */

@media (max-width: 767px) {
  /* Larger text for better readability */
  .bento-preview p {
    font-size: 1rem;
    line-height: 1.6;
  }
  
  .service-highlights li {
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 0.6rem 0;
  }
  
  /* Better spacing for touch */
  .service-metrics {
    gap: 1rem;
    margin: 1.25rem 0;
  }
  
  .service-metrics .metric {
    padding: 0.75rem 1rem;
    min-height: 48px;
    font-size: 0.9rem;
  }
  
  /* Enhanced button accessibility */
  .bento-actions .btn {
    min-height: 48px;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
  }
  
  /* Better visual hierarchy */
  .bento-header h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }
}

/* =========================================================
   MOBILE LOADING STATES
========================================================= */

@media (max-width: 767px) {
  .bento-box.loading {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .bento-box.loading::after {
    content: "Loading...";
    color: var(--services-text-muted);
    font-size: 0.9rem;
    margin-top: 1rem;
  }
}

/* =========================================================
   MOBILE ERROR STATES
========================================================= */

@media (max-width: 767px) {
  .bento-box.error {
    min-height: 160px;
    text-align: center;
    padding: 1.5rem 1rem;
  }
  
  .bento-box.error .bento-header h3 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
  }
  
  .bento-box.error .bento-preview p {
    font-size: 0.9rem;
    line-height: 1.5;
  }
}

/* =========================================================
   MOBILE ANIMATION PREFERENCES
========================================================= */

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  /* Subtle entrance animations for mobile */
  .bento-box {
    animation: mobileSlideUp 0.4s ease-out both;
  }
  
  .bento-box:nth-child(1) { animation-delay: 0.1s; }
  .bento-box:nth-child(2) { animation-delay: 0.2s; }
  .bento-box:nth-child(3) { animation-delay: 0.3s; }
  .bento-box:nth-child(4) { animation-delay: 0.4s; }
  
  @keyframes mobileSlideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* =========================================================
   MOBILE DARK MODE ENHANCEMENTS
========================================================= */

@media (max-width: 767px) and (prefers-color-scheme: dark) {
  .bento-box {
    background: linear-gradient(135deg, 
      rgba(16, 40, 54, 0.95) 0%, 
      rgba(13, 30, 40, 0.95) 100%
    );
    border: 1px solid rgba(90, 167, 163, 0.2);
  }
  
  .bento-box:active {
    background: linear-gradient(135deg, 
      rgba(16, 40, 54, 1) 0%, 
      rgba(13, 30, 40, 1) 100%
    );
    border-color: rgba(90, 167, 163, 0.4);
  }
}

/* =========================================================
   MOBILE PRINT OPTIMIZATIONS
========================================================= */

@media print and (max-width: 767px) {
  .bento-container {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .bento-box {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    break-inside: avoid;
  }
  
  .bento-header h3 {
    font-size: 1rem;
  }
  
  .bento-preview p {
    font-size: 0.85rem;
  }
  
  .service-highlights li {
    font-size: 0.8rem;
    padding: 0.25rem 0;
  }
  
  .service-metrics .metric {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }
}
/* =======
==================================================
   NAVIGATION DROPDOWN FIX FOR SERVICES PAGE
========================================================= */

/* Force white text in navigation dropdowns */
.site-header .nav-group .nav-menu a {
  color: #ffffff !important;
  text-decoration: none !important;
}

.site-header .nav-group .nav-menu a:hover,
.site-header .nav-group .nav-menu a:focus {
  background: rgba(90, 167, 163, 0.3) !important;
  color: #ffffff !important;
}

/* Enhanced dropdown background */
.site-header .nav-group .nav-menu {
  background: rgba(14, 26, 36, 0.95) !important;
  border: 1px solid rgba(90, 167, 163, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* Maximum specificity override */
html body .site-header .nav-group .nav-menu a {
  color: #ffffff !important;
}

html body .site-header .nav-group .nav-menu a:hover {
  color: #ffffff !important;
  background: rgba(90, 167, 163, 0.3) !important;
}

/* Override any CSS custom properties */
.site-header .nav-group .nav-menu a {
  --text: #ffffff !important;
  --primary-dark: #ffffff !important;
}