/* Small UX helpers and animations to complement Tailwind */
:root {
  /* Brand palette provided by user */
  --brand-yellow: #fcc424; /* user: #fcc424 */
  --brand-lime:   #c4c81c; /* user: #c4c81c */
  --brand-green:  #48741c; /* user: #48741c */
  --brand-black:  #000000; /* user: black */

  /* Map to existing primary variable names used by the stylesheet */
  --primary-900: var(--brand-green);
  --primary-700: var(--brand-green);
  --primary-600: var(--brand-lime);
  --primary-500: var(--brand-lime);
  --primary-400: var(--brand-yellow);
  --primary-200: #f6f7e6;
  --primary-100: #fbfbef;
  --primary-50:  #fffaf0;

  /* Accent */
  --accent: var(--brand-yellow);
  --muted: #6b7280;
}

/* Use the brand black as the site's default text color */
body { color: var(--brand-black); }

/* Map commonly-used Tailwind blue utilities to the theme variables so
   existing HTML that uses tailwind classes picks up the new palette. */
.text-blue-700 { color: var(--primary-700) !important; }
.text-blue-400 { color: var(--primary-400) !important; }
.text-blue-200 { color: var(--primary-200) !important; }
.text-blue-50  { color: var(--primary-50) !important; }
.bg-blue-50    { background-color: var(--primary-50) !important; }
.bg-blue-700   { background-color: var(--primary-700) !important; }
.border-blue-100 { border-color: var(--primary-100) !important; }
.border-blue-200 { border-color: var(--primary-200) !important; }

/* Gradient utilities (Tailwind sets gradient stops via CSS variables) */
.from-blue-900 { --tw-gradient-from: var(--primary-900) !important; }
.via-blue-700  { --tw-gradient-stops: var(--primary-700), var(--primary-500) !important; }
.to-blue-500   { --tw-gradient-to: var(--primary-500) !important; }

/* Map an additional common Tailwind blue so buttons using bg-blue-600 align with theme */
.bg-blue-600 { background-color: var(--primary-700) !important; }

/* Primary button styles that use theme variables */
.btn-primary {
  background-color: var(--primary-700);
  color: #ffffff;
  border: 0;
  padding: .5rem 1rem;
  border-radius: .5rem;
  display: inline-block;
  text-align: center;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-900);
  outline: none;
}

/* Outline variant, useful when markup uses a transparent button with colored border */
.btn-outline {
  background: transparent;
  color: var(--primary-700);
  border: 2px solid var(--primary-700);
  padding: .45rem .9rem;
  border-radius: .5rem;
}
.btn-outline:hover,
.btn-outline:focus {
  background: var(--primary-700);
  color: #fff;
  outline: none;
}

/* Ensure CTA helpers pick up the primary color */
.cta-button { background-color: var(--primary-700); color: #fff; }
.cta-button:hover { background-color: var(--primary-900); }

/* Buttons & accents */
.btn-accent { background-color: var(--accent); color: #082032; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade { animation: fadeInUp 700ms ease both; }
.fade-delay-200 { animation-delay: 200ms; }
.fade-delay-400 { animation-delay: 400ms; }

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--primary-200);
  color: var(--primary-900);
  font-size: 20px;
}

.card-hover { transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease, background .2s ease; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(12, 74, 126, 0.12); }

.cta-button { transition: transform .16s ease, background .18s ease; }
.cta-button:hover { transform: translateY(-3px); }

/* Accessible focus styles */
.focus-ring:focus { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,0.25); border-radius: 6px; }

/* Small utility to slightly rotate icons on hover */
.icon-tilt { transition: transform .18s ease; }
.card-hover:hover .icon-tilt { transform: rotate(-8deg) scale(1.05); }

/* Header dropdown menu: show on hover and on focus-within for keyboard users */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown .dropdown-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: #ffffff;
  color: #0b1220;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(2,6,23,0.12);
  padding: 0.5rem 0;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none; /* default off until opened */
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999; /* force above other page elements */
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
}
.nav-dropdown:hover .dropdown-panel,
.nav-dropdown:focus-within .dropdown-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.nav-dropdown.open .dropdown-panel {
  /* Allow JS to keep the panel open (useful for touch/click and to avoid hover flicker) */
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto !important;
}
.dropdown-item { display: block; padding: .5rem 1rem; color: var(--muted); text-decoration: none; cursor: pointer; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--primary-100); color: var(--primary-900); }
.dropdown-item { display: block; padding: .5rem 1rem; color: var(--muted); text-decoration: none; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--primary-100); color: var(--primary-900); }

/* Services & cards improvements */
.services-grid > a, .services-grid > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100%; }
.services-grid .icon-badge { width: 64px; height: 64px; border-radius: 12px; }
.service-hero img { width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 12px; }

/* Image fallback helper for external images that may be blocked; show a subtle background if image fails */
.img-fallback {
  background-color: #f3f4f6;
  display: inline-block;
}

/* Utility to tighten up section spacing on smaller screens */
@media (max-width: 640px) {
  .py-20 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .py-16 { padding-top: 3rem; padding-bottom: 3rem; }
}

/* -----------------------------
   Brand logos auto-scrolling slider
   - Simple, accessible CSS animation with JS to duplicate slides for seamless loop
   - Respects prefers-reduced-motion
   ----------------------------- */
.brand-slider { overflow: hidden; position: relative; }
.brand-slider .brand-slider-track {
  display: flex;
  gap: 3.5rem;
  align-items: center;
  will-change: transform;
}
.brand-slide { display: flex; align-items: center; justify-content: center; min-width: 180px; }
.brand-slide img { max-height: 56px; opacity: .95; object-fit: contain; display: block; }

/* Scroll animation: move track leftwards. Duration chosen to suit moderate number of logos. */
@keyframes brand-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.brand-slider.playing .brand-slider-track {
  animation: brand-scroll 22s linear infinite;
}

/* When duplication is disabled we provide a different animation that scrolls
   the track from 0 to -100% (full width). This avoids showing duplicated logos
   but still gives an auto-scroll effect. Use the `.no-dup` modifier on the
   `.brand-slider` element (added by JS when data-duplicate="false"). */
@keyframes brand-scroll-no-dup {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
.brand-slider.playing.no-dup .brand-slider-track {
  animation: brand-scroll-no-dup 20s linear infinite;
}

/* Reduce motion preference: stop animation and provide manual scroll via overflow auto */
@media (prefers-reduced-motion: reduce) {
  .brand-slider.playing .brand-slider-track { animation: none; }
  .brand-slider { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Tighter layout on small screens */
@media (max-width: 640px) {
  .brand-slide { min-width: 120px; }
  .brand-slide img { max-height: 40px; }
}


/* -----------------------------
   Sticky footer
   - Make the document a column flex container so the footer can be pushed to
     the bottom with `margin-top: auto` on modern browsers.
   - Keeps existing layout intact for pages where content is taller than the
     viewport while ensuring short pages have the footer anchored to the
     bottom.
   ----------------------------- */
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* Footer is already the last major element in the pages; ensure it is pushed
   to the bottom when content is short. Using a child selector keeps this
   scoped and predictable. */
body > footer {
  margin-top: auto;
}

/* Contact CTA with map (matches image provided in project assets) */
.contact-cta { padding-top: 4.5rem; padding-bottom: 4.5rem; background: #ffffff; }
.contact-cta .map-graphic { max-width: 640px; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.06)); }
.contact-cta .contact-button { background: var(--primary-700); color: #fff; }
.contact-cta .text-muted { color: var(--muted); }

@media (max-width: 768px) {
  .contact-cta { padding-top: 3rem; padding-bottom: 3rem; }
  .contact-cta .map-graphic { max-width: 100%; margin-top: 1rem; }
  .contact-cta .text-right { text-align: left; }
}



  /* -----------------------------
     Additional animations & aesthetic refinements
     - Floating hero illustration
     - Reveal-on-scroll helpers
     - Button shimmer & subtle focus rings
     - Slide in helpers
     ----------------------------- */

  @keyframes floaty {
    0% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-8px) rotate(1deg); }
    100% { transform: translateY(0) rotate(-1deg); }
  }

  .hero-illustration {
    animation: floaty 6s ease-in-out infinite;
    will-change: transform;
    transform-origin: 50% 50%;
  }

  /* Subtle shimmer for important CTAs */
  @keyframes shimmer {
    0% { background-position: -150%; }
    100% { background-position: 150%; }
  }
  .cta-button {
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .cta-button::after {
    content: "";
    position: absolute;
    left: -25%;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-12deg);
    transition: left .6s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
  }
  .cta-button:hover::after { left: 125%; }

  /* Reveal on scroll helper */
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
    will-change: opacity, transform;
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Slide-in utility variants */
  .reveal-left { transform: translateX(-18px); }
  .reveal-left.visible { transform: translateX(0); }
  .reveal-right { transform: translateX(18px); }
  .reveal-right.visible { transform: translateX(0); }

  /* Small elevation & glassy background for hero buttons to contrast the gradient */
  .hero .btn-elevated { box-shadow: 0 8px 20px rgba(6,24,44,0.18); }

  /* Respect reduced motion preference */
  @media (prefers-reduced-motion: reduce) {
    .hero-illustration { animation: none !important; }
    .brand-slider.playing .brand-slider-track { animation: none; }
    .cta-button::after { display: none; }
  }