/* Valor Rate Pages - Professional Website Styles */

/* Brand Color Variables */
:root {
  --navy-dark: #0A2540;
  --navy-medium: #3A6EA5;
  --gold: #F5C542;
  --gold-accent: #F5C542;
  --cream-bg: #FAF7F2;
  --white: #ffffff;
  --text-dark: #0A2540;
  --success: #28a745;
  --warning: #ffc107;
  --danger: #dc3545;
  --card-bg: #ffffff;
  --border-color: #e1e8ed;
  --shadow-color: rgba(0, 0, 0, 0.1);
}

/* Dark Mode Variables */

/* Browser Compatibility and Reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Prevent iOS text size adjust */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* Remove tap highlight on mobile */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Base document styles with font rendering optimizations */
body {
  font-family: Constantia, -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, serif;
  line-height: 1.6;
  color: var(--text-dark);
  background-color: var(--cream-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Keep header logos small on narrow screens while allowing hero logos
   to scale down gracefully. Use max-height to avoid forcing an exact
   pixel value that can break layout when SVGs or retina images are used. */

/* Restrict disables to header logos only, never hero logos */
.site-header .navbar .container .brand .logo,
.site-header .navbar .brand .logo,
.site-header .brand .logo,
header .navbar .brand .logo,
header .brand .logo,
.navbar .brand .logo,
.site-header img.logo,
header img.logo,
.navbar img.logo {
  height: auto !important;
  max-height: 75px !important;
  width: auto !important;
  filter: none !important;
  animation: none !important;
  margin: 0 !important;
}

/* Cap hero logos on small screens so they don't overflow or push
   header/logo positioning. Respect HTML width/height attributes. */
.hero .hero-logo, section.hero .hero-logo,
.hero-section .hero-logo {
  max-height: 180px;
  height: auto;
  margin-bottom: -1.5rem;
}

/* Optional: shrink state for smaller header after threshold */
.site-header.is-shrink {
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  background: #fff; /* ensure solid background over content */
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  /* Fallback for browsers without backdrop-filter */
  background: #ffffff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid var(--border-color);
  z-index: 1000;
}

/* Backdrop filter support detection */
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .site-header {
    background: rgba(255,255,255,0.95);
  }
}

/* IE11 and older browser fallbacks */
.ie .site-header,
.not-chrome.not-firefox.not-safari .site-header {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav { display:flex; align-items:center; justify-content:space-between; gap: 24px; }
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color: var(--navy-dark);
  font-weight:700;
  font-size: 1.1rem;
  transition: all 0.2s ease;
}
.brand:hover { color: var(--navy-medium); }
.brand-mark { height:75px; width:auto; display:block; }

@media (max-width: 520px) {
  .brand { gap:8px; font-size:1rem; }
  .brand-mark { height:48px; }
}

.menu {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.menu a { 
  margin: 0 8px;
  text-decoration: none;
  color: var(--navy-dark);
  font-weight: 600;
  transition: color 0.15s ease;
  position: relative;
}
.menu a:hover { color: var(--navy-medium); }
.menu a.active { 
  color: var(--gold); 
  font-weight: 700;
}
.menu a.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
}
.menu .btn {
  padding: 8px 16px;
  border-radius: 25px;
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-medium) 100%);
  color: var(--white);
  font-weight: 600;
  border: none;
  transition: transform 0.2s ease;
  box-shadow: 0 4px 15px rgba(10, 37, 64, 0.12);
}
.menu .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(10, 37, 64, 0.18);
}

/* Brand text & mobile stacking
   Ensure the logo sits above the brand text on narrow screens to avoid
   the logo overlapping the header text. We keep the inline row layout
   on larger screens for visual compactness. */
.brand-text {
  display: inline-block;
  line-height: 1;
}

@media (max-width: 520px) {
  .brand {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }

  .brand .logo {
    margin-bottom: 0.5rem !important;
    max-height: 44px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .brand-text {
    text-align: center;
    white-space: normal;
    font-size: 0.95rem;
    /* Force the brand text onto its own line below the logo to prevent
       the logo and text from sitting side-by-side and causing overflow */
    flex-basis: 100%;
    width: 100%;
    display: block;
    margin-top: 0 !important;
  }

  /* Fix hero logo on mobile */
  .hero .hero-logo, section.hero .hero-logo {
    max-width: 90vw;
    width: auto;
    height: 120px;
    max-height: 120px;
    margin-bottom: 0.4rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Additional safety: ensure header brand doesn't overflow when container
   is narrow. This caps the brand text size and allows wrapping. */
@media (max-width: 420px) {
  .brand .logo { max-height: 40px !important; }
  .brand { gap: 0.25rem; }
  .brand-text { font-size: 0.9rem !important; line-height: 1.05 !important; }
}
/* Logo animation applied to .hero-logo-wrap - consistent with vrv-main */

/* Header logo styles - prevent inheritance conflicts */
.site-header img[class*="logo"],
header img[class*="logo"],
.navbar img[class*="logo"] {
  height: 75px;
  max-height: 75px;
  width: auto;
  animation: none;
  transform: none;
  margin: 0;
}

.site-header .brand:hover .logo {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.nav-links a {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #3498db;
}

/* Hero Section */
.hero {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  color: white;
  /* Increase top padding to prevent floating logo from overlapping with header */
  padding: 60px 0 40px;
  text-align: center;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Hero Logo - Only for hero sections, NOT header */
.hero .hero-logo,
section.hero .hero-logo {
  /* Scale hero logos slightly smaller to avoid overlap with headings */
  height: 180px;
  width: auto;
  margin: 0 auto 0.5rem; /* safe spacing below the logo to avoid overlap */
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.35));
  animation: logoFloat 3s ease-in-out infinite;
  /* placement: prefer static margin-top on the wrapper to avoid transform/layout conflicts */
  transform: none !important;
  transform-origin: center;
  display: block;
}

@media (max-width: 1024px) {
  .hero .hero-logo, section.hero .hero-logo { height: 150px; margin-bottom: 0.5rem; }
}

@media (max-width: 520px) {
  .hero .hero-logo, section.hero .hero-logo { height: 100px; margin-bottom: 0.6rem; }
}

/* Ensure header logos are never affected by hero styles */
.site-header .hero-logo,
header .hero-logo,
.navbar .hero-logo {
  height: 75px !important;
  margin-bottom: 0 !important;
  filter: none !important;
  animation: none !important;
  transform: none !important;
}

/* Animation override for testing/demos - animations now always enabled by default.
   Set localStorage.allowAnimations = 'true' or call toggleAnimations() for additional control.
   Reduced motion preferences are now ignored as requested. */
/* Hero logo animation with 1.03 scaling effect */

@keyframes logoFloat {
  0% { 
    -webkit-transform: translateY(0) scale(1);
    -moz-transform: translateY(0) scale(1);
    -ms-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1); 
  }
  50% { 
    -webkit-transform: translateY(-15px) scale(1.06);
    -moz-transform: translateY(-15px) scale(1.06);
    -ms-transform: translateY(-15px) scale(1.06);
    transform: translateY(-15px) scale(1.06); 
  }
  100% { 
    -webkit-transform: translateY(0) scale(1);
    -moz-transform: translateY(0) scale(1);
    -ms-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1); 
  }
}

/* Hero logo animation - applied to .hero-logo-wrap to match vrv-main */
.hero-logo-wrap {
  display: inline-block;
  animation: logoFloat 3s ease-in-out infinite;
}

/* Mobile-specific adjustments: remove offset to prevent layout shifts */
@media (max-width: 520px) {
  :root { --hero-logo-offset: 0px; }
  .hero .hero-logo, section.hero .hero-logo {
    max-width: 90vw;
    width: auto;
    height: auto;
    max-height: 120px;
    margin-bottom: 0.4rem;
    display: block;
    transform: none !important;
  }

  /* Hero logo wrapper animation now handled by main rule above */
}

/* Reduced motion restrictions removed - animations always enabled */

/* Animation applied directly to .hero-logo element above */

.hero h1 {
  font-size: 1.6rem; /* slightly smaller so heading sits nicely under logo */
  margin: 0.35rem 0 0.6rem; /* keep small top margin so it sits below the logo */
  font-weight: 700;
  color: white;
  clear: both;
}

/* Animation rule applied to .hero-logo element for proper functionality */

@media (max-width: 768px) {
  .hero h1 { font-size: 1.6rem; }
}

@media (max-width: 520px) {
  .hero h1 { font-size: 1.4rem; }
}

.hero-subtitle {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
}

.hero-description {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2rem;
  opacity: 1;
}

.cta-button {
  display: inline-block;
  background: var(--navy-dark);
  color: white;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 50px;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 2px solid var(--navy-dark);
  will-change: transform;
}

.cta-button:hover {
  background: var(--gold-accent);
  color: var(--navy-dark);
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
  border: 2px solid var(--gold-accent);
}

/* Disable transforms on older browsers */
.ie .cta-button:hover {
  transform: none;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
}

/* Services Section */
.services {
  padding: 4rem 0;
  background: #f8f9fa;
}

.services h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  color: #2c3e50;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

/* Portfolio Section */
.portfolio {
  padding: 4rem 0;
}

.portfolio h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  color: #2c3e50;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
}

.portfolio-item {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.portfolio-item:hover {
  transform: translateY(-5px);
}

.portfolio-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.portfolio-content {
  padding: 1.5rem;
}

.portfolio-content h3 {
  color: #2c3e50;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.portfolio-content p {
  color: #666;
  margin-bottom: 1rem;
}

.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tech-tag {
  background: #e9ecef;
  color: #495057;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

.portfolio-container {
  padding: 2rem 0;
}

.portfolio-container .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Testimonials Section */
.testimonials {
  padding: 4rem 0;
  background: #f8f9fa;
}

.testimonials h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  color: #2c3e50;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
}

.testimonial {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  border-left: 4px solid #3498db;
}

.testimonial p {
  font-size: 1.1rem;
  font-style: italic;
  margin-bottom: 1rem;
  color: #555;
}

.testimonial cite {
  font-weight: 600;
  color: #2c3e50;
}

/* Contact Section */
.contact {
  padding: 4rem 0;
  background: #2c3e50;
  color: white;
}

.contact h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.contact > .container > p {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 3rem;
  opacity: 0.9;
}

.contact-form {
  max-width: 600px;
  margin: 0 auto 3rem;
}

.form-group {
  margin-bottom: 1.5rem;
  position: relative;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 1rem;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 1rem;
  background: #ffffff;
  color: #333;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  border-color: #007bff;
  box-shadow: 0 2px 8px rgba(0,123,255,0.15);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
  outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #6c757d;
}

.form-group textarea {
  height: 120px;
  resize: vertical;
  font-family: inherit;
}

.form-group select {
  color: #333;
  cursor: pointer;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #333;
  font-size: 0.95rem;
}

/* Required field indicators */
.form-group label:after {
  content: '';
}

.form-group input[required] + label:after,
.form-group select[required] + label:after,
.form-group textarea[required] + label:after {
  content: '';
}

/* Visual separation between form groups */
.form-group:not(:last-child) {
  border-bottom: 1px solid #f8f9fa;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

.submit-button {
  background: #f39c12;
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.submit-button:hover {
  background: #e67e22;
  transform: translateY(-2px);
}

.contact-info {
  text-align: center;
}

.contact-info p {
  margin-bottom: 0.5rem;
}

.contact-info a {
  color: #f39c12;
  text-decoration: none;
}

.contact-info a:hover {
  color: #e67e22;
}

/* Footer */
.site-footer {
  background: #1a252f;
  color: #bbb;
  padding: 2rem 0;
  text-align: center;
}

.site-footer p {
  margin-bottom: 0.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.2rem;
  }
  
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
  
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  
  .nav-links {
    gap: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding: 0 10px;
    margin: 0 -10px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  
  .nav-links::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  
  .nav-links li {
    flex-shrink: 0;
  }
  
  .services-grid {
    grid-template-columns: 1fr;
  }
  
  .brand {
    font-size: 1rem;
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
    white-space: nowrap;
    min-width: max-content;
  }
  
  .site-header .navbar .container .brand .logo,
  .site-header .navbar .brand .logo,
  .site-header .brand .logo,
  header .navbar .brand .logo,
  header .brand .logo,
  .navbar .brand .logo,
  .site-header img[class*="logo"],
  header img[class*="logo"],
  .navbar img[class*="logo"] {
    height: 40px !important;
    max-height: 40px !important;
    min-height: 40px !important;
    filter: none !important;
    animation: none !important;
    margin: 0 !important;
  }
  
}


@media (max-width: 480px) {
  .hero {
    padding: 0.75rem 0;
  }
  
  .hero h1 {
    font-size: 2rem;
  }
  
  .services,
  .portfolio,
  .testimonials,
  .contact,
  .services-overview,
  .pricing-comparison,
  .detailed-services,
  .pricing-packages,
  .ongoing-services,
  .value-proposition {
    padding: 3rem 0;
  }
  
  .brand {
    font-size: 0.85rem;
    gap: 0.2rem;
    white-space: nowrap;
    min-width: max-content;
  }
  
  .navbar {
    padding: 0.75rem 0;
  }
  
  .navbar .container {
    overflow: visible;
    flex-wrap: nowrap;
  }
  
  .nav-links {
    gap: 0.75rem;
    font-size: 0.9rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding: 0 15px;
    margin: 0 -15px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .nav-links::-webkit-scrollbar {
    display: none;
  }
  
  .nav-links li {
    flex-shrink: 0;
  }
}

/* Mobile Navigation Scroll Indicators */
@media (max-width: 768px) {
  .navbar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    background: linear-gradient(to left, rgba(255,255,255,0.8), transparent);
    pointer-events: none;
    z-index: 1;
  }
}

/* Cookie Consent Banner - Consistent with vrv-main */
.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--navy-dark);
  border-top: 3px solid var(--gold-accent);
  box-shadow: 0 -4px 20px rgba(10, 37, 64, 0.15);
  z-index: 1000;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.cookie-consent:not(.hidden) { transform: translateY(0); }
.cookie-consent.hidden { transform: translateY(100%); }

#cookie-consent .cookie-content {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 2rem !important;
  padding: 1.5rem 20px !important;
}

#cookie-consent .cookie-text {
  flex: 1 !important;
  margin: 0 !important;
}

#cookie-consent .cookie-text p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
  color: #e8f6ff !important;
  font-family: inherit !important;
}

#cookie-consent .cookie-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

#cookie-consent .cookie-buttons .btn {
  padding: 10px 20px !important;
  border: none !important;
  border-radius: 5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  font-size: 0.9rem !important;
  font-family: inherit !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin: 0 !important;
}

#cookie-consent .cookie-buttons .btn-primary {
  background: #007bff !important;
  color: white !important;
}

#cookie-consent .cookie-buttons .btn-primary:hover {
  background: #0056b3 !important;
  transform: translateY(-2px) !important;
}

#cookie-consent .cookie-buttons .btn-secondary {
  background: transparent !important;
  color: #ccc !important;
  border: 2px solid #555 !important;
}

#cookie-consent .cookie-buttons .btn-secondary:hover {
  background: #555 !important;
  color: white !important;
  border-color: #555 !important;
}

#cookie-consent .cookie-policy-link {
  color: #007bff !important;
  text-decoration: none !important;
  font-size: 0.85rem !important;
  border-bottom: 1px solid transparent !important;
  transition: border-color 0.3s ease !important;
  font-family: inherit !important;
}

#cookie-consent .cookie-policy-link:hover {
  border-bottom-color: #007bff !important;
}

/* Mobile responsive for cookie banner */
@media (max-width: 768px) {
  #cookie-consent .cookie-content {
    flex-direction: column !important;
    text-align: center !important;
    gap: 15px !important;
    padding: 0 10px !important;
  }
  
  #cookie-consent .cookie-buttons {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  
  #cookie-consent .cookie-buttons .btn {
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    min-width: auto !important;
  }
  
  #cookie-consent .cookie-text p {
    font-size: 0.9rem !important;
    text-align: center !important;
  }
  
  #cookie-consent.cookie-consent {
    padding: 15px !important;
  }
}

/* Clean Cookie Banner Styles - matching vrv-main */
.cookie-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.cookie-text { flex: 1; }
.cookie-text p { margin: 0; color: var(--text-dark); font-size: 0.95rem; line-height: 1.4; }

.cookie-buttons { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.cookie-buttons .btn { padding: 0.6rem 1.2rem; border-radius: 6px; font-size: 0.9rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: all 0.2s ease; }

.cookie-buttons .btn-primary { background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-medium) 100%); color: var(--white); }
.cookie-buttons .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(10, 37, 64, 0.3); }

.cookie-buttons .btn-secondary { background: transparent; color: var(--navy-dark); border: 2px solid var(--border-color); }
.cookie-buttons .btn-secondary:hover { background: var(--border-color); border-color: var(--navy-dark); }

.cookie-policy-link { color: var(--navy-medium); text-decoration: none; font-size: 0.85rem; padding: 0.6rem 0.8rem; }
.cookie-policy-link:hover { color: var(--navy-dark); text-decoration: underline; }

/* Enhanced Footer Styles */
.footer {
  background: var(--navy-dark);
  color: white;
  padding: 3rem 0 1.5rem 0;
  margin-top: 3rem;
}

.footer .footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer .footer-section h3 {
  color: var(--gold-accent);
  font-size: 1.25rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.footer .footer-section h4 {
  color: var(--gold-accent);
  font-size: 1rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.footer .footer-section p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links li {
  margin-bottom: 0.5rem;
}

.footer .footer-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 0.9rem;
}

.footer .footer-links a:hover {
  color: var(--gold-accent);
}

.footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.5rem;
  text-align: center;
}

.footer .footer-bottom p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  margin: 0.25rem 0;
}

.footer .footer-tagline {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Mobile footer responsive */
@media (max-width: 768px) {
  .footer .footer-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
    gap: 1rem;
  }
  
  .footer .footer-section:first-child {
    margin-bottom: 1rem;
  }
  
  .footer .footer-section h3 {
    font-size: 1.1rem;
  }
  
  .footer .footer-section h4 {
    font-size: 0.95rem;
  }
}

/* Privacy Policy Page Styles */
.privacy-page {
  min-height: 80vh;
  padding: 2rem 0 4rem;
  background: linear-gradient(135deg, var(--cream-bg) 0%, #f0ede6 100%);
}

.privacy-page .container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 2rem;
}

.privacy-header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 2rem 0;
}

.privacy-logo {
  height: 120px;
  width: auto;
  margin-bottom: 1.5rem;
  animation: float 3s ease-in-out infinite;
}

.privacy-header h1 {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.privacy-subtitle {
  font-size: 1.2rem;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

.content-wrapper {
  background: white;
  padding: 3rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  margin-bottom: 3rem;
}

.policy-section {
  margin-bottom: 2.5rem;
}

.policy-section h2 {
  color: var(--primary-color);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 0.5rem;
}

.policy-section p {
  line-height: 1.6;
  margin-bottom: 1rem;
  color: #555;
}

.policy-section ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.policy-section li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
  color: #555;
}

.policy-section strong {
  color: var(--primary-color);
  font-weight: 600;
}

.policy-section a {
  color: var(--primary-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.policy-section a:hover {
  border-bottom-color: var(--primary-color);
}

.policy-footer {
  border-top: 2px solid #e9ecef;
  padding-top: 1.5rem;
  margin-top: 3rem;
  text-align: center;
}

.policy-footer p {
  font-style: italic;
  color: #666;
  margin: 0;
}

/* Privacy page CTA section */
.privacy-cta {
  text-align: center;
  background: white;
  padding: 2.5rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.privacy-cta h2 {
  color: var(--primary-color);
  margin-bottom: 1rem;
  font-size: 2rem;
}

.privacy-cta p {
  color: #666;
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

/* Mobile responsive for privacy policy */
@media (max-width: 768px) {
  .privacy-page .container {
    padding: 0 1rem;
  }
  
  .privacy-header {
    padding: 1rem 0;
    margin-bottom: 2rem;
  }
  
  .privacy-logo {
    height: 80px;
  }
  
  .privacy-header h1 {
    font-size: 2rem;
  }
  
  .privacy-subtitle {
    font-size: 1rem;
  }
  
  .content-wrapper,
  .privacy-cta {
    padding: 2rem;
    border-radius: 10px;
    margin-bottom: 2rem;
  }
  
  .policy-section h2 {
    font-size: 1.3rem;
  }
  
  .privacy-cta h2 {
    font-size: 1.5rem;
  }
}

/* Hero Section - Matching homepage styling */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  color: white;
  padding: 2rem 0;
}

.hero-section .hero-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
}

.hero-section h1 {
  font-size: 2.2rem;
  color: white;
  margin-bottom: 1.25rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.hero-section .hero-subtitle {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin-bottom: 2rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.hero-section .hero-logo {
  height: 375px;
  width: auto;
  margin-bottom: -5rem;
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.services-overview,
.pricing-comparison {
  padding: 4rem 0;
  background: #f8f9fa;
}

/* Services Page Styles */

.intro-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.intro-content h2 {
  color: var(--primary-color);
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
}

.intro-content p {
  font-size: 1.2rem;
  color: #666;
  line-height: 1.6;
}

.detailed-services {
  padding: 4rem 0;
}

.service-detail {
  display: flex !important;
  gap: 2rem !important;
  margin-bottom: 4rem !important;
  padding: 3rem !important;
  background: white !important;
  border-radius: 15px !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.service-icon {
  font-size: 3rem;
  min-width: 80px;
  text-align: center;
  padding-top: 0.5rem;
}

.service-content {
  flex: 1 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.service-content h3 {
  color: var(--primary-color);
  font-size: 2rem;
  margin-bottom: 1rem;
}

.service-description {
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.service-features h4 {
  color: #333;
  font-size: 1.3rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 0.5rem;
}

.service-features ul {
  list-style: none;
  padding: 0;
}

.service-features li {
  padding: 0.5rem 0;
  color: #555;
  line-height: 1.5;
}

.service-features strong {
  color: var(--primary-color);
}

.vs-comparison {
  margin-top: 2rem;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 10px;
}

/* Comparison grid styling */
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 1rem;
}

.pro-column {
  background: #e8f5e8;
  padding: 1.5rem;
  border-radius: 10px;
  border-left: 4px solid #28a745;
}

.diy-column {
  background: #f8e8e8;
  padding: 1.5rem;
  border-radius: 10px;
  border-left: 4px solid #dc3545;
}

.pro-column h5, .diy-column h5 {
  margin-bottom: 1rem;
  color: #333;
  font-size: 1.1rem;
}

.pro-column ul, .diy-column ul {
  list-style: none;
  padding: 0;
}

.pro-column li, .diy-column li {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: flex-start;
}

.emoji-check, .emoji-x {
  margin-right: 0.5rem;
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.pro-column li,
.diy-column li {
  overflow: hidden;
}

.emoji-check,
.emoji-x {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
}

.pro-column ul, .diy-column ul {
  list-style: none;
  padding: 0;
}

.pro-column li, .diy-column li {
  padding: 0.3rem 0;
  font-size: 0.95rem;
}

.service-process {
  margin-top: 2rem;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.step {
  text-align: center;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 10px;
}

.step-number {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: var(--primary-color);
  color: white;
  border-radius: 50%;
  line-height: 40px;
  font-weight: bold;
  margin-bottom: 1rem;
}

.step h5 {
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.training-formats {
  margin-top: 2rem;
}

.format-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.format {
  padding: 1rem;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  text-align: center;
}

.format h5 {
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

/* Pricing Page Styles */
.pricing-comparison {
  padding: 4rem 0;
  background: #f8f9fa;
}

.comparison-intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem;
}

.comparison-intro h2 {
  color: var(--primary-color);
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
}

.cost-breakdown {
  max-width: 600px;
  margin: 0 auto;
}

.diy-costs {
  background: white;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.diy-costs h3 {
  color: #dc3545;
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.5rem;
}

.cost-items {
  margin-bottom: 2rem;
}

.cost-item {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid #e9ecef;
}

.cost-item.total {
  border-top: 2px solid #dc3545;
  border-bottom: none;
  margin-top: 1rem;
  padding-top: 1rem;
  font-size: 1.1rem;
}

.diy-drawbacks {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 10px;
}

.diy-drawbacks h4 {
  color: #dc3545;
  margin-bottom: 1rem;
}

.diy-drawbacks ul {
  list-style: none;
  padding: 0;
}

.diy-drawbacks li {
  padding: 0.3rem 0;
  color: #666;
}

.pricing-packages {
  padding: 4rem 0;
}

.packages-intro {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3rem;
  font-size: 1.2rem;
  color: #666;
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.package {
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height: 600px;
}

.package:hover {
  transform: translateY(-5px);
}

.package.featured {
  border: 2px solid var(--gold-accent);
  transform: none;
}

.popular-badge {
  background: var(--gold-accent);
  color: var(--navy-dark);
  text-align: center;
  padding: 0.5rem;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.best-value-badge {
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
  text-align: center;
  padding: 0.5rem;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.premium-badge {
  background: linear-gradient(135deg, #6f42c1, #e83e8c);
  color: white;
  text-align: center;
  padding: 0.5rem;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(111, 66, 193, 0.3);
}

.package-header {
  padding: 2rem;
  text-align: center;
  background: transparent;
}

.package-header h3 {
  color: var(--primary-color);
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.price {
  margin-bottom: 1rem;
}

.price .amount {
  font-size: 3rem;
  font-weight: bold;
  color: var(--primary-color);
}

.price .period {
  font-size: 1rem;
  color: #666;
  margin-left: 0.5rem;
}

.package-description {
  color: #666;
  font-size: 1.1rem;
}

.package-features {
  padding: 2rem;
  flex-grow: 1;
}

.package-features h4 {
  color: #333;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.package-features ul {
  list-style: none;
  padding: 0;
}

.package-features li {
  padding: 0.5rem 0;
  color: #555;
  line-height: 1.4;
}

.package-compare {
  padding: 0 2rem;
  margin-bottom: 2rem;
}

.package-compare {
  background: #e8f4f8;
  margin: 0 2rem 2rem;
  padding: 1rem;
  border-radius: 8px;
}

.package-compare h5 {
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.package-cta {
  padding: 2rem;
  text-align: center;
}

.package-button {
  background: #007bff !important;
  color: white !important;
  padding: 1rem 2rem !important;
  border-radius: 5px !important;
  text-decoration: none !important;
  font-weight: bold !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 1rem !important;
}

.package-button:hover {
  background: #0056b3 !important;
  color: white !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}

.ongoing-services {
  padding: 4rem 0;
  background: #f8f9fa;
}

.maintenance-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.maintenance-plan {
  background: white;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.maintenance-plan.featured {
  border: 2px solid var(--primary-color);
}

.maintenance-plan h3 {
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.maintenance-price {
  margin-bottom: 2rem;
}

.maintenance-price .amount {
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--primary-color);
}

.maintenance-price .period {
  font-size: 1rem;
  color: #666;
}

.maintenance-plan ul {
  list-style: none;
  padding: 0;
  text-align: left;
}

.maintenance-plan li {
  padding: 0.5rem 0;
  color: #555;
}

.value-proposition {
  padding: 4rem 0;
}

.value-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.value-point {
  text-align: center;
  padding: 2rem;
}

.value-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.value-point h3 {
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.consultation-cta {
  padding: 4rem 0;
  background: linear-gradient(135deg, #007bff, #0056b3) !important;
  color: white;
  text-align: center;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.cta-button {
  padding: 1rem 2rem;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  display: inline-block;
}

.cta-button.primary {
  background: var(--navy-dark) !important;
  color: white !important;
  border: 2px solid var(--navy-dark) !important;
}

.cta-button.primary:hover {
  background: var(--gold-accent) !important;
  color: var(--navy-dark) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
  border: 2px solid var(--gold-accent) !important;
}

.cta-button.secondary {
  background: white !important;
  color: var(--navy-dark) !important;
  border: 2px solid white !important;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3) !important;
}

.cta-button.secondary:hover {
  background: var(--gold-accent) !important;
  color: var(--navy-dark) !important;
  border: 2px solid var(--gold-accent) !important;
  text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4) !important;
}

.guarantee {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

/* Package Color Coding */
.package.realtor-starter {
  border-left: 4px solid #28a745;
}

.package.realtor-professional {
  border-left: 4px solid var(--gold-accent);
}

.package.realtor-team {
  border-left: 4px solid var(--navy-dark);
}

.package.starter {
  border-left: 4px solid #17a2b8;
}

.package.professional {
  border-left: 4px solid var(--gold-accent);
}

.package.enterprise {
  border-left: 4px solid #6f42c1;
}

.package .perfect-for {
  background: #f8f9fa;
  padding: 0.75rem;
  border-radius: 6px;
  margin: 1rem 0;
  font-size: 0.9rem;
  border-left: 3px solid var(--gold-accent);
}

.package .value-highlight {
  background: linear-gradient(135deg, #e8f5e8, #d4edda);
  color: #155724;
  padding: 0.75rem;
  border-radius: 6px;
  margin: 1rem 0;
  font-size: 0.9rem;
  border-left: 3px solid #28a745;
  font-weight: 600;
}

.package .premium-highlight {
  background: linear-gradient(135deg, #f3e5f5, #e1bee7);
  color: #4a148c;
  padding: 0.75rem;
  border-radius: 6px;
  margin: 1rem 0;
  font-size: 0.9rem;
  border-left: 3px solid #6f42c1;
  font-weight: 600;
}

.package .perfect-for strong {
  color: var(--navy-dark);
}

/* Hidden Costs Breakdown Section */
.hidden-costs-breakdown {
  padding: 4rem 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.hidden-costs-breakdown h2 {
  text-align: center;
  color: var(--navy-dark);
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.section-intro {
  text-align: center;
  font-size: 1.2rem;
  color: #666;
  max-width: 800px;
  margin: 0 auto 3rem;
}

.platform-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.platform-breakdown {
  background: white;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #dc3545;
}

.platform-breakdown h3 {
  color: var(--navy-dark);
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
}

.real-costs {
  margin-bottom: 1rem;
}

.cost-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #e9ecef;
}

.cost-item.total {
  border-top: 2px solid #dc3545;
  border-bottom: none;
  margin-top: 1rem;
  padding-top: 1rem;
  background: linear-gradient(135deg, #fff5f5, #ffe6e6);
  padding: 1rem;
  border-radius: 8px;
}

.cost-label {
  color: #555;
  font-size: 0.95rem;
}

.cost-amount {
  font-weight: 600;
  color: #dc3545;
  font-size: 1rem;
}

.platform-note {
  font-size: 0.85rem;
  color: #666;
  font-style: italic;
  margin-top: 1rem;
}

.note {
  padding: 20px 24px;
  border-left: 6px solid var(--gold);
  background: linear-gradient(135deg, #fffef9 0%, #faf7ed 100%);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.15);
  font-weight: 500;
  color: #2c2c2c;
  border: 1px solid rgba(245, 197, 66, 0.2);
}


/* Active navigation animation */
@keyframes slideIn {
  from { width: 0; }
  to { width: 100%; }
}

/* Dark theme active navigation */


.value-comparison {
  background: white;
  padding: 2.5rem;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #28a745;
  margin-bottom: 2rem;
}

.value-comparison h3 {
  color: var(--navy-dark);
  margin-bottom: 2rem;
  font-size: 1.5rem;
  text-align: center;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.value-item {
  background: linear-gradient(135deg, #e8f5e8, #d4edda);
  padding: 1.5rem;
  border-radius: 10px;
  border-left: 3px solid #28a745;
}

.value-item h4 {
  color: #155724;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.value-item p {
  color: #155724;
  margin: 0;
  font-size: 0.9rem;
}

.savings-highlight {
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
  padding: 2rem;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.savings-highlight h4 {
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.savings-highlight p {
  margin: 0;
  font-size: 1.1rem;
}

.retainer-positioning {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  padding: 2rem;
  border-radius: 15px;
  border-left: 4px solid #2196f3;
}

.retainer-positioning h3 {
  color: var(--navy-dark);
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.retainer-positioning p {
  color: #555;
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.6;
}

.retainer-positioning ul {
  list-style: none;
  padding: 0;
}

.retainer-positioning li {
  padding: 0.5rem 0;
  color: #555;
  position: relative;
  padding-left: 1.5rem;
}

.retainer-positioning li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #28a745;
  font-weight: bold;
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #0A2540;
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    z-index: 10000;
    font-weight: 600;
}

.skip-link:focus {
    top: 0;
}

/* Enhanced focus indicators for better accessibility */
button:focus,
input:focus,
textarea:focus,
select:focus,
a:focus {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

/* High contrast focus for form elements */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

/* Ensure sufficient color contrast for all text */
.hero {
    color: #ffffff; /* WCAG AA compliant on gradient background */
}

.hero-subtitle {
    color: #f0f0f0; /* Slightly lighter but still compliant */
}

/* Improve button contrast */
.cta-button {
    background: #0A2540;
    color: #ffffff;
    border: 2px solid transparent;
}

.cta-button:hover,
.cta-button:focus {
    background: var(--gold-accent);
    color: var(--navy-dark);
    border: 2px solid var(--gold-accent);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
    transform: translateY(-2px);
}

/* Ensure form labels are properly associated */
.form-group label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
    color: #0A2540;
}

/* Screen reader only text for additional context */
.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;
}

/* Ensure interactive elements have minimum touch target size */
.cta-button,
button,
.nav-link {
    min-height: 44px;
    min-width: 44px;
}

/* ===== CORE WEB VITALS OPTIMIZATIONS ===== */
/* Prevent layout shift by reserving space for images */
img {
    max-width: 100%;
    height: auto;
}

.hero-logo {
    height: 375px;
    width: auto;
    max-width: 100%;
}

/* Removed duplicate logoFloat keyframes - using the version with vendor prefixes */

/* Use transform instead of changing properties that trigger layout */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Optimize repaints and compositing */
.site-header {
    will-change: background, backdrop-filter;
}

.hero-logo {
    will-change: transform;
}

/* Container queries for better responsive design */
@container (min-width: 768px) {
    .pricing-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

/* Improve input delay by optimizing hover states */
.cta-button {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.cta-button:hover,
.cta-button:focus {
    background: var(--gold-accent);
    color: var(--navy-dark);
    border: 2px solid var(--gold-accent);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

/* ===== MOBILE EXPERIENCE ENHANCEMENTS ===== */
/* Optimize touch targets for mobile */
@media (max-width: 768px) {
    .cta-button {
        padding: 1rem 1.5rem;
        min-height: 48px;
        font-size: 1rem;
    }
    
    .nav-links a {
        padding: 1rem;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    
    /* Improve form inputs on mobile */
    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 16px; /* Prevents zoom on iOS */
        min-height: 48px;
        padding: 1rem;
    }
    
    /* Optimize hero section for mobile */
    .hero-logo {
        height: 280px;
        width: auto;
        margin-bottom: -3rem;
    }
    
    .hero h1 {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .hero p {
        font-size: 1.1rem;
        margin: 1rem 0 2rem;
    }

    /* Small vertical spacing between hero logo and hero copy to prevent touching */
    .hero .hero-content > h1,
    .hero .hero-content > p,
    .hero .hero-content > .hero-description {
      margin-top: 0.8rem;
    }

  /* Increase top spacing on small screens where logo is larger relative to text */
  .hero .hero-content > h1,
  .hero .hero-content > p,
  .hero .hero-content > .hero-description {
    margin-top: 1.2rem;
  }
    
    /* Improve pricing cards on mobile */
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .package-card {
        margin: 0 1rem;
    }
    
    /* Better mobile navigation */
    .navbar .container {
        padding: 0 1rem;
    }
    
    .breadcrumb-nav {
        padding: 0.5rem 0;
    }
    
    .breadcrumb {
        padding: 0 1rem;
    }
}

/* Optimize for tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .hero-logo {
        height: 320px;
        width: auto;
    }
}

/* Hover states only on devices that support hover */
@media (hover: hover) {
    .cta-button:hover {
        background: var(--gold-accent);
        color: var(--navy-dark);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
        border: 2px solid var(--gold-accent);
    }
    
    .package-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }
}

/* Reduced motion restrictions removed - all animations and transitions always enabled */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .hero {
        background: #000;
        color: #fff;
    }
    
    .cta-button {
        border: 2px solid #fff;
    }
    
    .package-card {
        border: 2px solid #000;
    }
}

/* ===== BREADCRUMB NAVIGATION ===== */
.breadcrumb-nav {
    background: #f8f9fa;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e9ecef;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    margin: 0 0.5rem;
    color: #6c757d;
}

.breadcrumb-item a {
    color: #0A2540;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: #764ba2;
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: #6c757d;
}

@media (max-width: 768px) {
    .breadcrumb {
        font-size: 0.75rem;
    }
    
    .breadcrumb-item + .breadcrumb-item::before {
        margin: 0 0.25rem;
    }
}

/* CTA Strip Component */
.cta-strip {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-medium) 100%);
  color: white;
  padding: 3rem 0;
  margin-top: 4rem;
}

.cta-strip-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  text-align: left;
}

.cta-strip-text {
  flex: 1;
}

.cta-strip-text h3 {
  color: white;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.cta-strip-text p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  margin: 0;
  line-height: 1.5;
}

.cta-strip-button {
  flex-shrink: 0;
}

.cta-strip .cta-button {
  background: var(--gold-accent) !important;
  color: var(--navy-dark) !important;
  border: 2px solid var(--gold-accent) !important;
  font-size: 1rem !important;
  padding: 1rem 1.5rem !important;
  white-space: nowrap !important;
}

.cta-strip .cta-button:hover {
  background: var(--gold-accent) !important;
  color: var(--navy-dark) !important;
  border: 2px solid var(--gold-accent) !important;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* Mobile Responsive for Services and Pricing */
@media (max-width: 768px) {
  .hero-section {
    min-height: 70vh;
    padding: 1rem 0;
  }
  
  .hero-section h1 {
    font-size: 2.2rem;
  }
  
  .hero-section .hero-subtitle {
    font-size: 1.1rem;
  }
  
  .hero-section .hero-logo {
    height: 250px;
    margin-bottom: -3rem;
  }
  
  .service-detail {
    flex-direction: column;
    padding: 2rem;
  }
  
  .service-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  
  .comparison-grid {
    grid-template-columns: 1fr;
  }
  
  .packages-grid {
    grid-template-columns: 1fr;
  }
  

  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .process-steps {
    grid-template-columns: 1fr;
  }
  
  .comparison-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .format-options {
    grid-template-columns: 1fr;
  }
  
  .value-points {
    grid-template-columns: 1fr;
  }
  
  .maintenance-plans {
    grid-template-columns: 1fr;
  }
  
  .platform-comparison {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .value-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .hidden-costs-breakdown h2 {
    font-size: 2rem;
  }
  
  .platform-breakdown,
  .value-comparison,
  .retainer-positioning {
    padding: 1.5rem;
  }
  
  .cta-strip-content {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  
  .cta-strip-text h3 {
    font-size: 1.5rem;
  }
  
  .cta-strip-text p {
    font-size: 1rem;
  }
  
  .cta-strip .cta-button {
    font-size: 0.9rem !important;
    padding: 0.875rem 1.25rem !important;
  }
}

/* Form Validation and Security Styles */
.form-errors, .form-success {
  margin-bottom: 1.5rem;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.error-header {
  background: #dc3545;
  color: white;
  padding: 12px 18px;
  border-radius: 8px 8px 0 0;
  font-weight: 600;
  font-size: 1rem;
  border-bottom: 2px solid #c82333;
}

.error-message {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
  padding: 12px 18px;
  margin: 0;
  font-size: 0.95rem;
  position: relative;
  border-radius: 0;
  line-height: 1.4;
}

.error-message:last-child {
  border-radius: 0 0 8px 8px;
}

.error-message:not(:last-child) {
  border-bottom: 1px solid #f1b0b7;
}

/* Shake animation for error container */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
  20%, 40%, 60%, 80% { transform: translateX(3px); }
}

.success-header {
  background: #28a745;
  color: white;
  padding: 12px 18px;
  border-radius: 8px 8px 0 0;
  font-weight: 600;
  font-size: 1rem;
  border-bottom: 2px solid #1e7e34;
}

.success-message {
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
  padding: 15px 18px;
  border-radius: 0 0 8px 8px;
  font-size: 0.95rem;
  position: relative;
  line-height: 1.5;
  margin: 0;
}

.field-error {
  color: #c33;
  font-size: 0.8rem;
  margin-top: 4px;
  display: block;
}

.field-description {
  font-size: 0.85rem;
  color: #6c757d;
  margin-top: 0.25rem;
  line-height: 1.4;
}

.field-description:not(.sr-only) {
  display: block;
  padding: 0.5rem 0.75rem;
  background: #f8f9fa;
  border-radius: 4px;
  border-left: 3px solid #007bff;
}

/* Highlight required fields more prominently */
.form-group label {
  position: relative;
}

.form-group input[required] ~ label::after,
.form-group select[required] ~ label::after,
.form-group textarea[required] ~ label::after {
  content: '*';
  color: #dc3545;
  font-weight: bold;
  margin-left: 4px;
}

/* Focus states for better accessibility */
.form-group input:focus ~ .field-description,
.form-group select:focus ~ .field-description,
.form-group textarea:focus ~ .field-description {
  background: #e7f3ff;
  border-left-color: #0056b3;
  color: #495057;
}

/* Form input error states */
.contact-form input.error,
.contact-form textarea.error,
.contact-form select.error {
  border-color: #c33 !important;
  box-shadow: 0 0 0 1px rgba(204, 51, 51, 0.2) !important;
}

.contact-form input.error:focus,
.contact-form textarea.error:focus,
.contact-form select.error:focus {
  border-color: #c33 !important;
  box-shadow: 0 0 0 2px rgba(204, 51, 51, 0.2) !important;
}

/* Loading state for submit button */
.contact-form button[type="submit"]:disabled,
.contact-form input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.contact-form button[type="submit"]:disabled:hover,
.contact-form input[type="submit"]:disabled:hover {
  transform: none !important;
  box-shadow: 0 2px 10px rgba(0, 150, 136, 0.2);
}

/* Security notice styles */
.security-notice {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  padding: 10px 15px;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: #6c757d;
}

.security-notice:before {
  content: '🔒 ';
  margin-right: 4px;
}

/* Client System Enhancements */

/* Testimonials */
.client-testimonials {
  padding: 4rem 0;
  background: #f8f9fa;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.testimonial-card {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-5px);
}

.testimonial-content p {
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 1.5rem;
}

.testimonial-author strong {
  color: var(--primary-color);
  font-size: 1.1rem;
}

.testimonial-author span {
  color: #777;
  font-size: 0.9rem;
  display: block;
  margin-top: 0.25rem;
}

.testimonial-result {
  background: linear-gradient(135deg, #e8f5e8, #d4edda);
  color: #155724;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 1rem;
  display: inline-block;
}

/* Contact Page */
.contact-intro {
  padding: 3rem 0;
}

.strategy-agenda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.agenda-item {
  text-align: center;
  padding: 1.5rem;
  background: white;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.agenda-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.contact-availability li {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0.5rem;
}

.contact-availability li::before {
  content: "✅";
  margin-right: 0.5rem;
}

.availability-notice {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.contact-options {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  margin-top: 3rem;
}

.contact-method {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.primary-method {
  border: 2px solid var(--primary-color);
}

.email-button {
  display: inline-block;
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  padding: 1rem 2rem;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  margin: 0.5rem 0;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.email-button:hover {
  background: linear-gradient(135deg, #0056b3, #004085);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}

.email-button.mobile-email-btn {
  background: linear-gradient(135deg, #28a745, #20c997);
  font-size: 1.1rem;
  padding: 1.2rem 2rem;
}

.email-button.mobile-email-btn:hover {
  background: linear-gradient(135deg, #20c997, #17a2b8);
}



/* Process Steps */
.process-overview {
  padding: 3rem 0;
  background: #f8f9fa;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.step {
  text-align: center;
  background: white;
  padding: 2rem 1rem;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.step-number {
  background: var(--primary-color);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
  margin: 0 auto 1rem auto;
}

/* FAQ Sections */
.contact-faq, .pricing-faq, .services-faq {
  padding: 3rem 0;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.faq-item {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  border-left: 4px solid var(--primary-color);
}

.faq-item h3 {
  color: var(--primary-color);
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
}

/* Pricing Enhancements */
.availability-alert {
  background: #dc3545;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  margin-top: 1rem;
  display: inline-block;
  font-weight: 600;
}

.perfect-for {
  background: #e8f4f8;
  padding: 0.75rem 1rem;
  border-radius: 5px;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #0c5460;
}

.agency-comparison {
  padding: 3rem 0;
  background: #f8f9fa;
}

.comparison-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

.comparison-card {
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.comparison-card.us {
  background: linear-gradient(135deg, #d4edda, #c3e6cb);
  border: 2px solid #28a745;
}

.comparison-card.agencies {
  background: linear-gradient(135deg, #f8d7da, #f1b0b7);
  border: 2px solid #dc3545;
}

.comparison-card ul {
  list-style: none;
  padding: 0;
}

.comparison-card li {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* Service Stats */
.service-stats {
  margin: 1rem 0;
}

.stat {
  background: linear-gradient(135deg, #fff3cd, #ffeaa7);
  color: #856404;
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-right: 0.5rem;
  display: inline-block;
  margin-bottom: 0.5rem;
}

/* Project Results */
.project-results {
  margin: 1rem 0;
}

.result-tag {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  color: #0d47a1;
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-right: 0.5rem;
  display: inline-block;
  margin-bottom: 0.5rem;
}

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

.service-features li {
  padding: 0.3rem 0;
  position: relative;
  padding-left: 1.5rem;
}

.service-features li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #28a745;
  font-weight: bold;
}

/* Why Choose Us Section */
.why-choose-us {
  padding: 4rem 0;
  background: linear-gradient(135deg, var(--cream-bg) 0%, #f0ede6 100%);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/* Benefit card styles consolidated above */

/* Intro Text Styling */
.services-intro, 
.portfolio-intro, 
.contact-intro {
  font-size: 1.1rem;
  color: #6c757d;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2rem auto;
  line-height: 1.6;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .contact-options {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .comparison-cards {
    grid-template-columns: 1fr;
  }
  
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  
  .strategy-agenda {
    grid-template-columns: 1fr;
  }
  
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .faq-grid {
    grid-template-columns: 1fr;
  }
  
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .service-features li {
    padding: 0.75rem 0;
    padding-left: 2.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
  }
  
  .service-features li:before {
    left: 0.5rem;
    top: 0.75rem;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .process-steps {
    grid-template-columns: 1fr;
  }
  
  /* Extra spacing for checkmarks/X's on small screens */
  /* Additional mobile spacing adjustments */
  .service-detail {
    margin-bottom: 2rem;
  }
}

/* Case Studies */
.case-study {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.case-study:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.case-study-header {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  padding: 1.5rem;
  text-align: center;
}

.case-study-header h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.3rem;
}

.case-study-type {
  font-size: 0.9rem;
  opacity: 0.9;
  font-weight: 500;
}

.case-study-content {
  padding: 2rem;
}

.problem, .solution, .results {
  margin-bottom: 2rem;
}

.problem h4, .solution h4, .results h4 {
  color: var(--primary-color);
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.results-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0 0;
}

.results-list li {
  padding: 0.4rem 0;
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.4;
}

.results-list li:before {
  content: "→";
  position: absolute;
  left: 0;
  color: #28a745;
  font-weight: bold;
}

.case-study-tech {
  background: #f8f9fa;
  padding: 1rem 2rem 1.5rem 2rem;
  border-top: 1px solid #e9ecef;
}

/* Enhanced Testimonials */
.project-details {
  color: #6c757d;
  font-size: 0.85rem;
  margin: 0.5rem 0;
  font-style: italic;
}

.testimonial-result {
  background: linear-gradient(135deg, #e8f5e8, #d4edda);
  color: #155724;
  padding: 0.6rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 1rem;
  display: inline-block;
  line-height: 1.3;
}

/* Accessibility Improvements */
.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;
}

.field-description {
  font-size: 0.875rem;
  color: #6c757d;
  margin-top: 0.25rem;
  font-style: italic;
}

.field-description:not(.sr-only) {
  display: block;
  margin-top: 0.5rem;
}

/* Form Fieldset Styling */
fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

legend.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;
}

/* Form Container Styling */
.contact-form {
  background: #f8f9fa;
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  box-shadow: 0 4px 6px rgba(0,0,0,0.07);
}

.contact-method {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  margin-bottom: 2rem;
}

.primary-method {
  border-left: 4px solid #007bff;
}

.alternative-method {
  border-left: 4px solid #28a745;
}

/* Enhanced Focus States for Accessibility */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 3px solid #4285f4;
  outline-offset: 2px;
  border-color: #4285f4;
}

.contact-form button:focus {
  outline: 3px solid #4285f4;
  outline-offset: 2px;
}

/* Email Button Styling */
.email-button {
  display: inline-block;
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white !important;
  padding: 1.2rem 2.5rem;
  border-radius: 10px;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  border: 3px solid #28a745;
  text-align: center;
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 300px;
  margin: 1rem 0;
}

.email-button:hover {
  background: linear-gradient(135deg, #218838, #1ea87a);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.5);
  color: white !important;
  text-decoration: none !important;
  border-color: #1e7e34;
}

.email-button:focus {
  outline: 3px solid #4285f4;
  outline-offset: 2px;
  background: linear-gradient(135deg, #218838, #1ea87a);
}

.email-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .contact-form input:focus,
  .contact-form select:focus,
  .contact-form textarea:focus,
  .contact-form button:focus,
  .email-button:focus {
    outline: 3px solid currentColor;
    outline-offset: 2px;
  }
}

/* Clipboard Button Styling */
.clipboard-btn {
  background: linear-gradient(135deg, #6f42c1, #007bff) !important;
  cursor: pointer;
  border: 3px solid #6f42c1 !important;
}

.clipboard-btn:hover {
  background: linear-gradient(135deg, #5a2d91, #0056b3) !important;
  border-color: #5a2d91 !important;
}

/* Mobile Email Instructions */
.mobile-email-instructions {
  animation: slideIn 0.3s ease-out;
}

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

/* Mobile-specific adjustments */
@media (max-width: 768px) {
  .email-button {
    font-size: 1rem;
    padding: 1rem;
    margin: 0.5rem 0;
  }
  
  .contact-method {
    padding: 1.5rem;
  }
  
  .mobile-email-instructions ol {
    padding-left: 1.2rem;
  }
  
  .mobile-email-instructions li {
    margin-bottom: 0.5rem;
  }
}

/* Parent Organization Link Styling */
.parent-org-link {
  background: rgba(212, 175, 55, 0.1) !important;
  border: 1px solid var(--gold-accent) !important;
  border-radius: 4px !important;
  padding: 0.3rem 0.6rem !important;
  font-weight: 600 !important;
  color: var(--navy-dark) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.parent-org-link:hover {
  background: var(--gold-accent) !important;
  color: white !important;
  transform: translateY(-0px);
}

/* Header responsive stacking to avoid jumbling */
@media (max-width: 768px) {
  .nav { flex-direction: column; align-items: stretch; gap: 8px; }
  .container.nav { padding: 10px 20px; }
  .brand { justify-content: flex-start; }
  .menu { justify-content: flex-start; gap: 10px; }
  .menu a { margin: 6px 0; }
  .menu .btn { margin-left: 0; }

}

/* Reduced motion support removed - all animations and transitions always enabled */

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  justify-content: space-around;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.mobile-menu-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
}

.hamburger-line {
  width: 24px;
  height: 3px;
  background: var(--navy-dark);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Enhanced Mobile Navigation Override */
@media (max-width: 768px) {
  .nav { 
    justify-content: space-between !important; 
    align-items: center !important;
    position: relative;
    flex-direction: row !important;
  }
  
  .mobile-menu-toggle { 
    display: flex; 
  }
  
  .menu {
    position: absolute !important;
    top: 100% !important;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 8px 8px;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 1rem;
    gap: 0.5rem !important;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
  }
  
  .menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  
  .menu a {
    padding: 12px 16px !important;
    margin: 0 !important;
    border-radius: 6px;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    justify-content: center;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  
  .menu a:last-child {
    border-bottom: none;
  }
  
  .menu .btn {
    margin: 8px 0 0 0 !important;
    text-align: center;
  }
}

/* All Pricing Page Cards - Consistent Gradient Blue */
.value-card,
.platform-card,
.platform-cost-card,
.package-card,
.retainer-card,
.benefit-card,
.freedom-card,
.service-card,
.credit-card {
  background: linear-gradient(135deg, #3A6EA5 0%, #0A2540 100%) !important;
  color: white !important;
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 8px 25px rgba(58, 110, 165, 0.3);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.value-card:hover,
.platform-card:hover,
.platform-cost-card:hover,
.package-card:hover,
.retainer-card:hover,
.benefit-card:hover,
.freedom-card:hover,
.service-card:hover,
.credit-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(58, 110, 165, 0.4);
}

.value-card h3,
.platform-card h3,
.platform-cost-card h3,
.package-card h3,
.retainer-card h3,
.benefit-card h3,
.freedom-card h3,
.service-card h3,
.credit-card h3,
.credit-card h4 {
  color: var(--gold) !important;
  margin-bottom: 1rem;
  font-weight: 600;
}

.value-card p,
.platform-card p,
.platform-cost-card p,
.package-card p,
.retainer-card p,
.benefit-card p,
.freedom-card p,
.service-card p,
.credit-card p {
  color: rgba(255, 255, 255, 0.9);
}

.package-card .package-badge,
.retainer-card .retainer-header,
.service-card .price,
.credit-card .credit-price,
.credit-card .savings {
  background: rgba(245, 197, 66, 0.2);
  color: var(--gold);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  text-align: center;
  font-weight: 600;
  display: inline-block;
}

.package-card .price-range,
.retainer-card .retainer-price,
.credit-card .credit-price {
  color: var(--gold);
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  margin: 1rem 0;
}

.package-card .feature-item,
.retainer-card .feature-item {
  color: rgba(255, 255, 255, 0.9);
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.package-card .feature-item:last-child,
.retainer-card .feature-item:last-child {
  border-bottom: none;
}

/* Specific overrides for pricing sections */
.credit-card.popular {
  border: 3px solid var(--gold) !important;
}

.service-card .price,
.credit-card .credit-price {
  color: var(--navy-dark) !important;
  background: rgba(245, 197, 66, 0.9) !important;
  padding: 0.5rem 1rem !important;
  border-radius: 8px !important;
  display: inline-block !important;
  font-weight: bold !important;
}

.credit-card .savings {
  color: var(--gold) !important;
  background: rgba(245, 197, 66, 0.2) !important;
  padding: 0.3rem 0.8rem !important;
  border-radius: 8px !important;
  display: inline-block !important;
  font-weight: bold !important;
}

/* Ensure price text is high-contrast on gradient cards */
.package-card .price,
.retainer-card .price {
  color: var(--gold) !important;
}

.package-card .price .amount,
.retainer-card .price .amount {
  color: var(--gold) !important;
}

.package-card .price .period,
.retainer-card .price .period,
.package-card .price span,
.retainer-card .price span {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Clean Pricing Page Styles */
.intro-section {
  text-align: center;
  padding: 3rem 0;
  background: linear-gradient(135deg, var(--cream-bg) 0%, #f8f9fa 100%);
}

.intro-section h2 {
  font-size: 2.5rem;
  color: var(--navy-dark);
  margin-bottom: 1rem;
}

.intro-section .lead {
  font-size: 1.3rem;
  color: #444;
  max-width: 800px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Benefit card styles consolidated above */

/* Client Selector Section */
.client-selector {
  padding: 4rem 0;
  background: var(--cream-bg);
  text-align: center;
}

.client-selector h2 {
  color: var(--navy-dark);
  margin-bottom: 3rem;
  font-size: 2.2rem;
}

.selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
}

a.selector-card {
  background: linear-gradient(135deg, #3A6EA5 0%, #0A2540 100%) !important;
  padding: 2rem !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 25px rgba(10, 37, 64, 0.3) !important;
  text-decoration: none !important;
  color: #ffffff !important;
  transition: all 0.3s ease !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  display: block !important;
  text-align: center !important;
}

a.selector-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 15px 35px rgba(10, 37, 64, 0.4) !important;
  border-color: #F5C542 !important;
  text-decoration: none !important;
  color: #ffffff !important;
  background: #0A2540 !important;
}

/* Build stamp: v2025-10-10T14:10Z */
/* Ensure package headers never mask gradient (final override) */
.package-header { background: transparent !important; }

/* Desktop should never show the mobile menu toggle */
.mobile-menu-toggle { display: none !important; box-shadow: none !important; background: transparent !important; }
@media (max-width: 768px) { .mobile-menu-toggle { display: flex !important; } }

.selector-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}

a.selector-card h3 {
  color: #ffffff !important;
  margin-bottom: 0.5rem !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
}

a.selector-card p {
  color: #F5C542 !important;
  font-weight: 600 !important;
  margin-bottom: 0 !important;
}

/* Advertised vs Reality pricing styles (platform comparison) */
.platform-card .pricing .advertised {
  display: inline-block;
  background: var(--cream-bg);
  color: var(--navy-dark);
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(10, 37, 64, 0.7);
}

.platform-card .pricing .reality {
  font-weight: 800;
  color: var(--gold);
}

/* Mobile Optimization for Client Selector */
@media (max-width: 768px) {
  .client-selector {
    padding: 3rem 0 !important;
  }
  
  .client-selector h2 {
    font-size: 1.8rem !important;
    margin-bottom: 2rem !important;
  }
  
  .selector-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 1.5rem !important;
    padding: 0 1rem !important;
  }
  
  a.selector-card {
    padding: 1.5rem !important;
  }
  
  .selector-icon {
    font-size: 2.5rem !important;
    margin-bottom: 1rem !important;
  }
  
  a.selector-card h3 {
    font-size: 1.1rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  a.selector-card p {
    font-size: 0.9rem !important;
  }
}

@media (max-width: 480px) {
  .client-selector {
    padding: 2rem 0 !important;
  }
  
  .client-selector h2 {
    font-size: 1.6rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .selector-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: 0 1rem !important;
  }
  
  a.selector-card {
    padding: 1.2rem !important;
    margin: 0 0.5rem !important;
  }
  
  .selector-icon {
    font-size: 2rem !important;
  }
  
  a.selector-card h3 {
    font-size: 1rem !important;
  }
  
  a.selector-card p {
    font-size: 0.85rem !important;
  }
}

.benefit-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  display: block;
}

/* Additional benefit card text styling - colors handled by consolidated gradient system */
.benefit-card p {
  font-size: 1rem;
  line-height: 1.5;
}

.comparison-section {
  padding: 4rem 0;
  background: #fafbfc;
}

.comparison-section h2 {
  text-align: center;
  color: var(--navy-dark);
  margin-bottom: 1.5rem;
  font-size: 2.2rem;
}

.comparison-section .warning {
  text-align: center;
  font-size: 1.2rem;
  color: #c0392b;
  margin-bottom: 3rem;
  font-weight: 500;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
  padding: 0 1rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Platform card styles now consolidated above with gradient system */

/* Platform card h3 styles handled by consolidated gradient system */

.pricing {
  margin: 1.5rem 0;
}

.advertised {
  color: #666;
  font-size: 1rem;
  text-decoration: line-through;
  display: block;
  margin-bottom: 0.5rem;
}

.reality {
  color: #c0392b;
  font-size: 1.8rem;
  font-weight: bold;
  display: block;
}

.warning-text {
  color: #c0392b;
  font-style: italic;
  font-size: 1rem;
  margin-top: 1rem;
  font-weight: 500;
}

.bottom-line {
  background: var(--gold);
  color: var(--navy-dark);
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  font-size: 1.1rem;
}

.packages-section, .retainers-section {
  padding: 4rem 0;
}

.packages-section {
  background: var(--cream-bg);
}

.retainers-section {
  background: white;
}

.packages-section h2, .retainers-section h2 {
  text-align: center;
  color: var(--navy-dark);
  margin-bottom: 3rem;
  font-size: 2.2rem;
}

.phase {
  color: var(--gold);
  font-size: 1.1rem;
  font-weight: 500;
}

.packages-grid, .retainers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 2.5rem;
  padding: 0 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Card styles consolidated above */

.package-card.popular {
  border: 3px solid var(--gold);
  position: relative;
}

.retainer-card.featured {
  border: 3px solid var(--gold);
  position: relative;
}

.package-header {
  padding: 2rem 2rem 1rem;
  text-align: center;
}

.badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.badge.foundation {
  background: #e8f5e8;
  color: #28a745;
}

.badge.popular {
  background: var(--gold);
  color: var(--navy-dark);
}

.badge.premium {
  background: #f3e5f5;
  color: #6f42c1;
}

/* Package and retainer card h3 styles handled by consolidated gradient system */

.price {
  font-size: 2rem;
  font-weight: bold;
  color: var(--navy-dark);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.price span {
  font-size: 1.1rem;
  color: #666;
  font-weight: normal;
}

.tagline {
  color: #555;
  font-style: normal;
  line-height: 1.5;
  font-size: 1rem;
}

.features {
  list-style: none;
  padding: 2rem;
  margin: 0;
}

.features li {
  padding: 1rem 0;
  color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid #f0f0f0;
  font-size: 1rem;
  line-height: 1.4;
}

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

.features li:first-child {
  padding-top: 0;
}

.infrastructure-info {
  text-align: center;
  background: #f8f9fa;
  padding: 2rem;
  border-radius: 12px;
  margin-bottom: 3rem;
  border: 1px solid #e9ecef;
}

.infrastructure-info p {
  color: #555;
  font-size: 1.1rem;
  margin: 0;
  line-height: 1.6;
}

.retainer-note {
  text-align: center;
  background: var(--gold);
  color: var(--navy-dark);
  padding: 2.5rem;
  border-radius: 15px;
  margin-top: 3rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.bottom-line {
  background: var(--gold);
  color: var(--navy-dark);
  padding: 2.5rem;
  border-radius: 15px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5;
  max-width: 900px;
  margin: 3rem auto 0;
}

/* Mobile responsiveness improvements */
@media (max-width: 768px) {
  .benefits-grid,
  .platform-grid,
  .packages-grid,
  .retainers-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 1rem;
  }
  
  .intro-section h2 {
    font-size: 2rem;
  }
  
  .comparison-section h2,
  .packages-section h2,
  .retainers-section h2 {
    font-size: 1.8rem;
  }
  
  .benefit-card,
  .platform-card,
  .package-card,
  .retainer-card {
    padding: 2rem 1.5rem;
  }
  
  .bottom-line,
  .retainer-note {
    padding: 2rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

/* Freedom Transfer Section Layout Only */
.freedom-simple {
  padding: 4rem 0;
  background: var(--cream-bg);
  text-align: center;
}

.freedom-simple h2 {
  color: var(--navy-dark);
  margin-bottom: 2rem;
  font-size: 2.2rem;
}

.freedom-simple > p {
  font-size: 1.3rem;
  color: var(--text-dark);
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.freedom-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 3rem auto;
  max-width: 1000px;
  padding: 0 1rem;
}

.freedom-message {
  background: var(--gold);
  color: var(--navy-dark);
  padding: 2.5rem;
  border-radius: 15px;
  font-size: 1.2rem;
  font-weight: 600;
  max-width: 800px;
  margin: 3rem auto 0;
  box-shadow: 0 8px 25px rgba(245, 197, 66, 0.3);
}

.simple-services {
  padding: 4rem 0;
  background: var(--cream-bg);
  text-align: center;
}

.simple-services h2 {
  color: var(--navy-dark);
  margin-bottom: 3rem;
  font-size: 2.2rem;
}

.simple-services h3 {
  color: var(--navy-dark);
  margin: 3rem 0 1rem;
  font-size: 1.8rem;
}

.simple-services > p {
  font-size: 1.1rem;
  color: var(--text-dark);
  margin-bottom: 2rem;
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem auto;
  max-width: 1000px;
  padding: 0 1rem;
}

.credit-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 2rem auto;
  max-width: 800px;
  padding: 0 1rem;
}

.benefits {
  background: var(--gold);
  color: var(--navy-dark);
  padding: 2rem;
  border-radius: 15px;
  margin: 3rem auto 0;
  max-width: 600px;
  box-shadow: 0 8px 25px rgba(245, 197, 66, 0.3);
}

.benefits p {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

/* Final Section */
.final-section {
  padding: 4rem 0;
  background: var(--cream-bg);
  text-align: center;
}

.final-section h2 {
  color: var(--navy-dark);
  margin-bottom: 1.5rem;
  font-size: 2.2rem;
}

.final-section .lead {
  font-size: 1.3rem;
  color: #444;
  max-width: 800px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.final-section .guarantee {
  background: var(--gold);
  color: var(--navy-dark);
  padding: 2.5rem;
  border-radius: 15px;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5;
  max-width: 900px;
  margin: 0 auto;
}