:root{
  --primary:#003366;   /* header/footer - changed to navy blue */
  --accent:#FF9900;    /* buttons/links - changed to orange */
  --text:#0f172a;      /* slate-900 */
  --bg:#f8fafc;        /* slate-50 */
}

body{
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 14px;
}

.header-bg{background:var(--primary)}
.footer-bg{background:var(--primary)}
.btn-accent{background:var(--accent);color:#fff;transition:background-color 0.3s ease}
.btn-accent:hover{background:#2563eb}
.link-accent{color:var(--accent)}
.link-accent:hover{text-decoration:underline}

/* Modal */
.modal-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.6);
  z-index:50
}

.modal-card{
  max-width:36rem;
  margin:10vh auto;
  background:#fff;
  border-radius:1rem;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(2,6,23,.25)
}

.modal-header{
  background:var(--primary);
  color:#fff;
  padding:1rem 1.25rem;
  display:flex;
  justify-content:space-between;
  align-items:center
}

.modal-body{padding:1rem 1.25rem}

.modal-close{
  background:transparent;
  border:0;
  color:#fff;
  font-size:1.25rem;
  line-height:1;
  cursor:pointer
}

/* Sections */
.section {
  padding: 4rem 0;
  scroll-margin-top: 4rem;
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
  text-align: center;
}

.section-subtitle {
  font-size: 1.25rem;
  text-align: center;
  margin-bottom: 3rem;
  color: var(--text-light);
}

/* Cards */
.card {
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Service card image hover effects with mouse tracking */
.card {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.card img {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.card:hover img {
  transform: scale(1.1);
}

/* Image Modal Styles */
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.close-modal {
  position: absolute;
  top: -40px;
  right: 0;
  color: white;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10001;
}

.close-modal:hover {
  color: #ccc;
}

.image-container {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.modal-image {
  max-width: 800px;
  max-height: 600px;
  object-fit: contain;
  transform-origin: center;
  transition: transform 0.2s ease;
}

.zoom-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 8px;
  min-width: 150px;
}

.zoom-controls label {
  font-weight: bold;
  color: #333;
}

#zoom-slider {
  width: 100px;
  height: 5px;
  background: #ddd;
  outline: none;
  border-radius: 5px;
}

#zoom-slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: #007bff;
  border-radius: 50%;
  cursor: pointer;
}

#zoom-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #007bff;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.zoom-value {
  font-weight: bold;
  color: #333;
  font-size: 14px;
}

.card-content {
  padding: 1.5rem;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.card-text {
  color: #4b5563;
  font-size: 14px;
  line-height: 1.5;
}

/* Before/After Photo Alignment */
#processBeforePhoto, #processAfterPhoto {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#processBeforePhoto img, #processAfterPhoto img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 0.5rem;
}

#processBeforePhoto p, #processAfterPhoto p {
  width: 100%;
  text-align: center;
  margin-top: 0.5rem;
  font-weight: 500;
}

/* Responsive utilities */
@media (max-width: 768px) {
  .section {
    padding: 2rem 0;
  }
  
  .section-title {
    font-size: 1.75rem;
  }
  
  .section-subtitle {
    font-size: 1rem;
  }
  
  /* LOCKED Mobile testimonial cards - DO NOT MODIFY WITHOUT PERMISSION */
  /* Current size: 25% smaller than original mobile size */
  .testimonial-card {
    width: 210px !important;
    height: 262px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    min-height: 262px !important;
    max-height: 262px !important;
  }
  
  .testimonial-review-text {
    max-height: 100px;
  }
  
  /* Mobile logo styling */
  #mobileMenu img {
    height: 1.5rem !important; /* h-6 equivalent, smaller than h-8 */
  }
  
  #mobileMenu .flex.items-center.justify-center span {
    font-size: 14px; /* improved readability */
  }
  
  /* Mobile header logo styling */
  header .flex.items-center.gap-2 img {
    height: 1.75rem !important; /* h-7 equivalent, smaller than h-8 on mobile */
  }
  
  header .flex.items-center.gap-2 span {
    font-size: 14px !important; /* improved readability on mobile */
  }
}

/* Testimonial Review Text with Scroll */
.testimonial-review-text {
  flex: 1;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.5;
  color: #666;
  margin: 8px 0;
  padding-right: 8px;
  max-height: 120px;
  /* Custom scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: #ccc #f1f1f1;
}

.testimonial-review-text::-webkit-scrollbar {
  width: 4px;
}

.testimonial-review-text::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.testimonial-review-text::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 2px;
}

.testimonial-review-text::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* LOCKED TESTIMONIAL CARD SIZE - DO NOT MODIFY WITHOUT PERMISSION */
/* Current size: 25% smaller than original (262px x 300px vs 350px x 400px) */
/* Last modified: User approved this size - requires permission to change */
.testimonial-card {
  width: 262px !important;
  height: 300px !important;
  min-width: 262px !important;
  max-width: 262px !important;
  min-height: 300px !important;
  max-height: 300px !important;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Scroll Animation Styles */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-animate.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Staggered animation delays for system cards */
.system-card-1 {
  transition-delay: 0.1s;
}

.system-card-2 {
  transition-delay: 0.2s;
}

.system-card-3 {
  transition-delay: 0.3s;
}

.system-card-4 {
  transition-delay: 0.4s;
}

/* VS element animation */
.vs-element {
  opacity: 0;
  transform: scale(0.8) rotate(0deg);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vs-element.animate-in {
  opacity: 1;
  transform: scale(1) rotate(12deg);
}

/* Enhanced card hover effects for animated cards */
.scroll-animate.animate-in:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 8px 16px -4px rgba(0, 0, 0, 0.1);
}

/* Font size overrides for better readability */
.text-sm {
  font-size: 14px !important;
}

.text-xs {
  font-size: 12px !important;
}

/* Form labels and inputs */
label {
  font-size: 14px !important;
}

input, select, textarea {
  font-size: 14px !important;
}

/* Button text */
button {
  font-size: 14px !important;
}

/* Navigation and general text */
nav, p, div, span {
  font-size: 14px;
}