/* Complete redesign with editorial style */

* {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.01em;
}

/* Bold typography styles */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Fade in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

/* Custom scrollbar with orange accent */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background: #ea580c;
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: #c2410c;
}

/* Focus states for accessibility with orange */
a:focus,
button:focus,
input:focus,
textarea:focus {
  outline: 3px solid #ea580c;
  outline-offset: 2px;
}

/* Image hover effects - scale up */
img {
  transition: transform 0.5s ease;
}

/* Service card flip effect */
.service-card {
  perspective: 1000px;
  height: 450px;
  position: relative;
  transition: all 0.3s ease;
}

.service-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.service-card.is-flipped .service-card-inner {
  transform: rotateY(180deg);
}

.service-card-front,
.service-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.service-card-back {
  transform: rotateY(180deg);
}

/* Case card hover effects */
.case-card {
  transition: transform 0.3s ease;
}

.case-card:hover {
  transform: translateY(-10px);
}

/* Team member card styles */
.team-member {
  transition: all 0.3s ease;
}

/* Button press effect */
button:active,
a:active {
  transform: scale(0.97);
}

/* Form input focus with orange border */
input:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1);
}

/* Cookie popup animation */
#cookiePopup {
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Mobile menu slide animation */
#mobileMenu {
  transition: all 0.3s ease-in-out;
}

/* Loading state for form */
#contactForm.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Success/Error message styles with orange */
.form-message {
  padding: 1rem;
  margin-bottom: 1rem;
  font-weight: 600;
  border: 2px solid;
}

.form-message.success {
  background-color: #dcfce7;
  color: #166534;
  border-color: #22c55e;
}

.form-message.error {
  background-color: #fee2e2;
  color: #991b1b;
  border-color: #ef4444;
}

/* Responsive text sizing */
@media (max-width: 640px) {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  .service-card {
    height: auto;
    min-height: 400px;
  }
}

/* Print styles */
@media print {
  header,
  footer,
  #cookiePopup,
  #burgerMenu {
    display: none;
  }

  body {
    font-size: 12pt;
  }

  a {
    text-decoration: underline;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  body {
    background: #ffffff;
    color: #000000;
  }

  a {
    text-decoration: underline;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .service-card-inner {
    transition: none !important;
  }
}

/* Selection color with orange */
::selection {
  background-color: #ea580c;
  color: #ffffff;
}

::-moz-selection {
  background-color: #ea580c;
  color: #ffffff;
}

/* Additional utility classes for editorial style */
.text-balance {
  text-wrap: balance;
}

.leading-tighter {
  line-height: 1.1;
}

/* Large hero text styles */
.hero-text {
  font-size: clamp(3rem, 10vw, 10rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

/* Smooth transitions for all interactive elements */
a,
button,
.service-card,
.case-card,
.team-member {
  transition: all 0.3s ease;
}

/* Grid layout improvements */
@media (min-width: 768px) {
  .grid {
    display: grid;
  }
}

/* Border styles for editorial look */
.border-editorial {
  border: 2px solid #000000;
}

/* Orange accent backgrounds */
.bg-orange-accent {
  background-color: #ea580c;
}

/* Black accent backgrounds */
.bg-black-accent {
  background-color: #000000;
}

/* Hover animations for interactive elements */
.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Text shadow for hero sections */
.text-shadow-hero {
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

/* Overlay styles for images */
.overlay-gradient {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
}

/* Editorial style containers */
.container-editorial {
  max-width: 1400px;
  margin: 0 auto;
}
