/* Override Bootstrap CSS variables for fonts */
:root {
  --bs-font-sans-serif: 'Helvetica', Helvetica, Arial, sans-serif !important;
  --bs-body-font-family: 'Helvetica', Helvetica, Arial, sans-serif !important;
  --font-sans: 'Helvetica', Helvetica, Arial, sans-serif !important;
}

/* Force Helvetica font across all elements - Override Bootstrap and all frameworks */
html,
body,
* {
  font-family: 'Helvetica', Helvetica, Arial, sans-serif !important;
}

/* Specifically target headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Helvetica', Helvetica, Arial, sans-serif !important;
}

/* Override Bootstrap's font stack with Helvetica */
body,
.container,
.container-fluid,
.row,
.col,
[class*='col-'],
.btn,
.form-control,
.form-select,
.form-check-label,
.nav,
.navbar,
.card,
.modal,
.alert,
.badge,
.breadcrumb,
.pagination,
.table {
  font-family: 'Helvetica', Helvetica, Arial, sans-serif !important;
}

/* Override any Tailwind or other framework fonts */
.font-sans,
[class*='font-'],
button,
input,
textarea,
select,
label,
p,
span,
div,
a,
li,
ul,
ol {
  font-family: 'Helvetica', Helvetica, Arial, sans-serif !important;
}

/* Ensure Bootstrap utilities don't override */
.text-* {
  font-family: 'Helvetica', Helvetica, Arial, sans-serif !important;
}

/* Final comprehensive override - catch any remaining elements */
* {
  font-family: 'Helvetica', Helvetica, Arial, sans-serif !important;
}

/* Override any inline styles or computed styles */
*:not(i):not(.fa):not([class*='fa-']):not([class*='icon']) {
  font-family: 'Helvetica', Helvetica, Arial, sans-serif !important;
}

/* Orange line animation styles */
.orange-line {
  position: relative;
  overflow: hidden;
  background-color: transparent !important;
}

.orange-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f97316; /* Tailwind orange-500 */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s ease-out;
}

.orange-line.animate::before {
  transform: scaleX(1);
}

.header-solid {
  position: sticky;
  top: 0;
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

/* Pillar interaction styles */
.pillar-item {
  transition: all 0.3s ease-in-out;
}

.pillar-item.active p,
.pillar-item.active span {
  color: #f97316 !important; /* Orange color for active pillar */
}

.pillar-item:not(.active) p,
.pillar-item:not(.active) span {
  color: white;
}

.pillar-item:hover p,
.pillar-item:hover span {
  color: #fb923c !important; /* Lighter orange on hover */
}

#pillar-description {
  min-height: 120px;
  transition: opacity 0.3s ease-in-out;
}

/* Mobile-only underline indicator for pillars */
@media (max-width: 1023px) {
  .pillar-item {
    position: relative;
  }
  .pillar-item::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background-color: #f97316; /* orange-500 */
    transition: width 0.3s ease;
  }
  .pillar-item:hover::after,
  .pillar-item.active::after {
    width: 56px; /* subtle accent length under title */
  }
}

/* Ensure desktop visuals remain unchanged for pillars */
@media (min-width: 1024px) {
  .pillar-item {
    background-color: transparent !important;
    border-color: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Service Section Swiper Styles */
.service-swiper .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.8);
  opacity: 1;
  margin: 0 6px;
  transition: all 0.3s ease;
}

.service-swiper .swiper-button-prev,
.service-swiper .swiper-button-next {
  color: transparent; /* Hide default arrow */
  background: transparent;
}

.service-swiper .swiper-button-prev:after,
.service-swiper .swiper-button-next:after {
  display: none; /* Hide default arrow completely */
}

/* Custom navigation button hover effects */
.service-prev:hover,
.service-next:hover {
  background-color: #f97316 !important;
  color: white !important;
  border-color: #f97316 !important;
}

/* Orange accent hover effects for all pages */
a:hover {
  position: relative;
  transition: all 0.3s ease;
}

a:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #f97316;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.6s ease;
}

/* Button hover effects with orange accent for all pages */
button:hover {
  position: relative;
  transition: all 0.3s ease;
}

button:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #f97316;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.3s ease;
}

/* Override for buttons/links that already have orange background/border hover states */
a[class*='bg-orange']:hover::after,
a[class*='border-orange']:hover::after,
button[class*='bg-orange']:hover::after,
button[class*='border-orange']:hover::after {
  display: none;
}

/* Exclude elements that shouldn't have accent lines */
.swiper-button-prev:hover::after,
.swiper-button-next:hover::after,
img:hover::after {
  display: none;
}

@keyframes slideIn {
  from {
    transform: translateX(-50%) scaleX(0);
  }
  to {
    transform: translateX(-50%) scaleX(1);
  }
}

/* Odometer-style rolling number styles */
.odometer {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: 'tnum';
  font-feature-settings: 'tnum';
}

.odometer-digit {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 1em; /* Inherit from font-size of parent */
  line-height: 1em;
}

.odometer-digit-inner {
  display: block;
  transition: transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.odometer-digit span {
  display: block;
  height: 1em;
}

.odometer .separator {
  display: inline-block;
  padding: 0 2px;
}

.odometer.roll-fast .odometer-digit-inner {
  transition-duration: 400ms;
}

.odometer.roll-slow .odometer-digit-inner {
  transition-duration: 1200ms;
}

/* Small flying lines effect (used across pages) */
.flying-line-lr,
.flying-line-rl,
.flying-line-center,
.flying-line-diagonal {
  position: absolute;
  height: 2px;
  background: #f97316; /* orange-500 */
  border-radius: 9999px;
  opacity: 0;
  will-change: transform, opacity;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.25);
}

/* Left -> Right */
.flying-line-lr {
  transform: translateX(-48px);
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 500ms ease-out;
}
.flying-line-lr.animate {
  transform: translateX(0);
  opacity: 1;
}

/* Right -> Left */
.flying-line-rl {
  transform: translateX(48px);
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 500ms ease-out;
}
.flying-line-rl.animate {
  transform: translateX(0);
  opacity: 1;
}

/* Center grow */
.flying-line-center {
  transform-origin: center;
  transform: scaleX(0.2);
  transition: transform 600ms ease-out, opacity 450ms ease-out;
}
.flying-line-center.animate {
  transform: scaleX(1);
  opacity: 1;
}

/* Slight diagonal slide in */
.flying-line-diagonal {
  transform: translate(-36px, 24px) rotate(18deg);
  transition: transform 750ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 500ms ease-out;
}
.flying-line-diagonal.animate {
  transform: translate(0, 0) rotate(18deg);
  opacity: 1;
}

/* Utility: subtle gradient option (optional) */
.flying-line-gradient {
  background: linear-gradient(
    90deg,
    rgba(249, 115, 22, 0) 0%,
    #f97316 40%,
    #f97316 60%,
    rgba(249, 115, 22, 0) 100%
  );
}

/* Reveal-on-scroll utility */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease-out var(--reveal-delay, 0ms),
    transform 600ms ease-out var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero slow zoom (Ken Burns-like) */
.hero-kenburns {
  animation: heroZoom 18s ease-in-out infinite alternate;
  background-size: 104% !important;
}

@keyframes heroZoom {
  from {
    background-size: 104%;
    background-position: center;
  }
  to {
    background-size: 112%;
    background-position: center 40%;
  }
}

/* Subtle bounce for scroll arrow */
.scroll-to-next {
  animation: arrowBounce 1.6s ease-in-out infinite;
}

@keyframes arrowBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

/* Stabilize numeric width for tween mode too */
.count-up {
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: 'tnum';
  font-feature-settings: 'tnum';
}

/* Case Studies: skeleton loading */
@keyframes skeletonShimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}
.skeleton {
  position: relative;
  overflow: hidden;
  background-color: #e5e7eb; /* gray-200 */
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200px 100%;
  animation: skeletonShimmer 1.2s ease-in-out infinite;
}