/* Entrance transitions for hero content: subtle motion, smooth easing */
.js-ready .hero-eyebrow,
.js-ready .hero-title,
.js-ready .hero-description,
.js-ready .hero-proof-points,
.js-ready .hero-actions {
  animation: hero-fade-up 650ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.js-ready .hero-eyebrow { animation-delay: 0ms; }
.js-ready .hero-title { animation-delay: 80ms; }
.js-ready .hero-description { animation-delay: 160ms; }
.js-ready .hero-proof-points { animation-delay: 240ms; }
.js-ready .hero-actions { animation-delay: 320ms; }
.js-ready .hero-media {
  animation: hero-media-in 750ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both;
}

/* Entrance transitions for mobile hero (<= 767px): restrained motion, smooth staggered entrance */
@media (max-width: 767px) {
  .js-ready .hero-mobile-logo,
  .js-ready .hero-mobile-media,
  .js-ready .hero-mobile-heading,
  .js-ready .hero-mobile-cta {
    animation: hero-fade-up 550ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .js-ready .hero-mobile-logo { animation-delay: 0ms; }
  .js-ready .hero-mobile-media { animation-delay: 80ms; }
  .js-ready .hero-mobile-heading { animation-delay: 160ms; }
  .js-ready .hero-mobile-cta-quote { animation-delay: 220ms; }
  .js-ready .hero-mobile-cta-explore { animation-delay: 280ms; }
}

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 25px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hero-media-in {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    transform: translate3d(0, 25px, 0);
  }
  to {
    clip-path: inset(0);
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ── Standard Reusable Scroll Reveal Classes ──────────────────────────────── */
.js-ready .reveal,
.js-ready .reveal-up,
.js-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 450ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.js-ready .reveal-left {
  opacity: 0;
  transform: translate3d(-24px, 0, 0);
  transition: opacity 450ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.js-ready .reveal-right {
  opacity: 0;
  transform: translate3d(24px, 0, 0);
  transition: opacity 450ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.js-ready .reveal-image {
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.js-ready .industry-media.reveal-from-right { transform: translate3d(1rem, 0, 0) scale(1.02); }
.js-ready .industry-media.reveal-from-left { transform: translate3d(-1rem, 0, 0) scale(1.02); }
.js-ready .service-media.reveal-from-right { transform: translate3d(1rem, 0, 0) scale(1.02); }
.js-ready .service-media.reveal-from-left { transform: translate3d(-1rem, 0, 0) scale(1.02); }
.js-ready .industry-page-media.reveal-from-right { transform: translate3d(1rem, 0, 0) scale(1.02); }
.js-ready .industry-page-media.reveal-from-left { transform: translate3d(-1rem, 0, 0) scale(1.02); }

.js-ready .reveal.is-revealed,
.js-ready .reveal-up.is-revealed,
.js-ready [data-reveal].is-revealed,
.js-ready .reveal-left.is-revealed,
.js-ready .reveal-right.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.js-ready .reveal-image.is-revealed {
  opacity: 1;
  transform: scale(1);
}

/* Headings respond like precision-marked components: quick, quiet, and deliberate. */
h1,
h2,
h3 {
  transform-origin: left center;
  transition: transform 190ms cubic-bezier(.22, .61, .36, 1), color 190ms cubic-bezier(.22, .61, .36, 1), letter-spacing 190ms cubic-bezier(.22, .61, .36, 1), font-weight 190ms cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
h2:hover,
h3:hover {
  color: var(--color-accent);
}

/* Copy not already inside an existing reveal group receives the same quiet entrance. */
.js-ready main .copy-reveal {
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 300ms cubic-bezier(.22, .61, .36, 1), transform 300ms cubic-bezier(.22, .61, .36, 1);
  will-change: transform, opacity;
}
.js-ready main .copy-reveal.is-revealed { opacity: 1; transform: translateY(0); }

/* Grouped lists and staggered items reveal in a short, measured sequence */
.js-ready .stagger-reveal,
.js-ready .reveal-stagger-item {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 450ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-ready .stagger-reveal.is-revealed,
.js-ready .reveal-stagger-item.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ── Button Micro-Interactions (Pure CSS, Hardware-Accelerated) ──────────── */
.button,
.hero-btn-primary,
.hero-btn-secondary,
.hero-btn-whatsapp,
.company-intro-btn,
.machinery-card-cta,
.machinery-nav-btn {
  transition: transform 200ms ease-out,
              box-shadow 200ms ease-out,
              background-color 200ms ease-out,
              border-color 200ms ease-out,
              color 200ms ease-out;
  will-change: transform;
}

.button:hover,
.hero-bg-section .hero-btn-primary:hover,
.hero-bg-section .hero-btn-secondary:hover,
.hero-bg-section .hero-btn-whatsapp:hover,
.hero-btn-primary:hover,
.hero-btn-secondary:hover,
.hero-btn-whatsapp:hover,
.company-intro-btn:hover,
.machinery-card-cta:hover,
.machinery-nav-btn:hover:not(:disabled) {
  transform: scale(1.02);
}

.button:hover {
  box-shadow: 0 6px 20px -2px rgba(18, 24, 32, 0.14), 0 2px 6px -1px rgba(18, 24, 32, 0.08);
}

.hero-bg-section .hero-btn-primary:hover,
.hero-btn-primary:hover {
  box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 0.28);
}

.hero-bg-section .hero-btn-secondary:hover,
.hero-btn-secondary:hover {
  box-shadow: 0 6px 20px -2px rgba(0, 0, 0, 0.22);
}

.hero-bg-section .hero-btn-whatsapp:hover,
.hero-btn-whatsapp:hover {
  box-shadow: 0 6px 20px -2px rgba(37, 211, 102, 0.32);
}

.machinery-nav-btn:hover:not(:disabled) {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

.button:active,
.hero-bg-section .hero-btn-primary:active,
.hero-bg-section .hero-btn-secondary:active,
.hero-bg-section .hero-btn-whatsapp:active,
.hero-btn-primary:active,
.hero-btn-secondary:active,
.hero-btn-whatsapp:active,
.company-intro-btn:active,
.machinery-card-cta:active,
.machinery-nav-btn:active:not(:disabled) {
  transform: scale(0.98);
  transition-duration: 100ms;
}

.button:focus-visible,
.hero-btn-primary:focus-visible,
.hero-btn-secondary:focus-visible,
.hero-btn-whatsapp:focus-visible,
.company-intro-btn:focus-visible,
.machinery-card-cta:focus-visible,
.machinery-nav-btn:focus-visible {
  outline: 2px solid var(--color-accent, #294e69);
  outline-offset: 3px;
}

/* ── Interactive Card Micro-Interactions (Zero Layout Shift) ─────────────────── */
.company-category-card,
.founder-person-card {
  transition: transform 220ms ease-out,
              box-shadow 220ms ease-out,
              border-color 220ms ease-out;
  will-change: transform;
}

.company-category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(18, 24, 32, 0.10);
}

.founder-person-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(41, 78, 105, 0.10);
}

.company-category-media {
  overflow: hidden;
}

.company-category-img {
  transition: transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
}

.company-category-card:hover .company-category-img {
  transform: scale(1.02);
}

/* Numbered specification list — scroll-based gold accent reveal */
.js-ready .why-item.stagger-reveal .why-number { opacity: 0.5; }
.js-ready .why-item.stagger-reveal .why-content {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms cubic-bezier(.22, .61, .36, 1), transform 600ms cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--reveal-delay, 0ms) + 120ms);
}
/* Revealed state: number gold, bar draws, content rises */
.js-ready .why-item.stagger-reveal.is-revealed .why-number {
  opacity: 1;
  color: var(--color-accent-gold);
}
.js-ready .why-item.stagger-reveal.is-revealed .why-number::after {
  opacity: 1;
  transform: scaleY(1);
  transition-delay: calc(var(--reveal-delay, 0ms) + 60ms);
}
.js-ready .why-item.stagger-reveal.is-revealed .why-content {
  opacity: 1;
  transform: translateY(0);
}
/* Service spotlight — scroll-based stagger reveal */
.js-ready .service-block {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.js-ready .service-block.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Contact Us Main Heading Reveal: slow, subtle fade-in + slight upward movement (1.8s ease-out) ── */
.js-ready .contact-title-reveal {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1), transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.js-ready .contact-title-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── 2. WHO WE ARE / COMPANY INTRO: Scroll Reveal Animation ──────────────── */
.js-ready .company-intro-content[data-reveal],
.js-ready .company-intro-media-col[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

/* 1. WHO WE ARE eyebrow subtle fade/up */
.js-ready .company-intro-content .company-intro-eyebrow-row {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1) 0ms,
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1) 0ms;
  will-change: opacity, transform;
}

/* 2. UNDERSTAND reveal upward */
.js-ready .company-intro-content .typo-block-1 .typo-lead {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1) 80ms,
              transform 650ms cubic-bezier(0.16, 1, 0.3, 1) 80ms;
  will-change: opacity, transform;
}

/* 3. THE PROCESS. subtle stagger */
.js-ready .company-intro-content .typo-block-1 .typo-sub {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1) 160ms,
              transform 650ms cubic-bezier(0.16, 1, 0.3, 1) 160ms;
  will-change: opacity, transform;
}

/* 4. IDENTIFY reveal upward */
.js-ready .company-intro-content .typo-block-2 .typo-lead {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1) 240ms,
              transform 650ms cubic-bezier(0.16, 1, 0.3, 1) 240ms;
  will-change: opacity, transform;
}

/* 5. THE REQUIREMENT. subtle stagger */
.js-ready .company-intro-content .typo-block-2 .typo-sub {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1) 320ms,
              transform 650ms cubic-bezier(0.16, 1, 0.3, 1) 320ms;
  will-change: opacity, transform;
}

/* 6. BUILD reveal upward */
.js-ready .company-intro-content .typo-block-3 .typo-lead {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1) 400ms,
              transform 650ms cubic-bezier(0.16, 1, 0.3, 1) 400ms;
  will-change: opacity, transform;
}

/* 7. THE RIGHT MACHINE. subtle stagger */
.js-ready .company-intro-content .typo-block-3 .typo-sub {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1) 480ms,
              transform 650ms cubic-bezier(0.16, 1, 0.3, 1) 480ms;
  will-change: opacity, transform;
}

/* 8. Paragraph fade-up */
.js-ready .company-intro-content .company-intro-description {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1) 560ms,
              transform 650ms cubic-bezier(0.16, 1, 0.3, 1) 560ms;
  will-change: opacity, transform;
}

/* 9. CTA fade-up */
.js-ready .company-intro-content .company-intro-action {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1) 640ms,
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1) 640ms;
  will-change: opacity, transform;
}

/* 10. Original image subtle reveal + scale from approx 1.02 to 1.00 */
.js-ready .company-intro-media-col .company-intro-media-wrapper {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 750ms cubic-bezier(0.16, 1, 0.3, 1) 140ms,
              transform 750ms cubic-bezier(0.16, 1, 0.3, 1) 140ms;
  will-change: opacity, transform;
}

.js-ready .company-intro-media-col .company-intro-image {
  transform: scale(1.02);
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1) 140ms;
  will-change: transform;
}

/* Gold decorative lines draw subtly */
.js-ready .company-intro-section .company-intro-gold-line,
.js-ready .company-intro-section .company-intro-gold-bar {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1) 320ms,
              opacity 450ms ease 320ms;
  will-change: transform, opacity;
}

.js-ready .company-intro-media-col .media-corner {
  opacity: 0;
  transition: opacity 500ms ease 400ms;
}

/* Revealed States when scrolled into viewport */
.js-ready .company-intro-content.is-revealed .company-intro-eyebrow-row {
  opacity: 1;
  transform: translateY(0);
}
.js-ready .company-intro-content.is-revealed .typo-block-1 .typo-lead {
  opacity: 1;
  transform: translateY(0);
}
.js-ready .company-intro-content.is-revealed .typo-block-1 .typo-sub {
  opacity: 1;
  transform: translateY(0);
}
.js-ready .company-intro-content.is-revealed .typo-block-2 .typo-lead {
  opacity: 1;
  transform: translateY(0);
}
.js-ready .company-intro-content.is-revealed .typo-block-2 .typo-sub {
  opacity: 1;
  transform: translateY(0);
}
.js-ready .company-intro-content.is-revealed .typo-block-3 .typo-lead {
  opacity: 1;
  transform: translateY(0);
}
.js-ready .company-intro-content.is-revealed .typo-block-3 .typo-sub {
  opacity: 1;
  transform: translateY(0);
}
.js-ready .company-intro-content.is-revealed .company-intro-description {
  opacity: 1;
  transform: translateY(0);
}
.js-ready .company-intro-content.is-revealed .company-intro-action {
  opacity: 1;
  transform: translateY(0);
}
.js-ready .company-intro-media-col.is-revealed .company-intro-media-wrapper {
  opacity: 1;
  transform: translateY(0);
}
.js-ready .company-intro-media-col.is-revealed .company-intro-image {
  transform: scale(1.00);
}
.js-ready .company-intro-media-col.is-revealed .media-corner {
  opacity: 1;
}
.js-ready .company-intro-content.is-revealed .company-intro-gold-line,
.js-ready .company-intro-content.is-revealed .company-intro-gold-bar {
  opacity: 1;
  transform: scaleX(1);
}

/* ── 7 Core Machinery Section: Editorial Reveal Animation (Homepage Only) ── */
.js-ready .machinery-intro-header[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

/* 1. "OUR" eyebrow fades and slides upward */
.js-ready .machinery-intro-header .machinery-eyebrow {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* 2. Main heading "MACHINERY SOLUTIONS" reveals with subtle upward movement */
.js-ready .machinery-intro-header .machinery-main-title {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1) 140ms,
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1) 140ms;
  will-change: opacity, transform;
}

/* 3. Supporting line "FOR A STRONGER TOMORROW" appears with small stagger */
.js-ready .machinery-intro-header .machinery-supporting-text {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1) 280ms,
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1) 280ms;
  will-change: opacity, transform;
}

/* 4. Gold divider lines draw outward */
.js-ready .machinery-intro-header .machinery-gold-line {
  opacity: 0;
  transform: scaleX(0);
  transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1) 420ms,
              opacity 450ms ease 420ms;
  will-change: transform, opacity;
}

.js-ready .machinery-intro-header .machinery-gold-line.line-left {
  transform-origin: right center;
}

.js-ready .machinery-intro-header .machinery-gold-line.line-right {
  transform-origin: left center;
}

.js-ready .machinery-intro-header .machinery-marker {
  opacity: 0;
  transform: rotate(45deg) scale(0);
  transition: opacity 500ms ease 440ms,
              transform 500ms cubic-bezier(0.16, 1, 0.3, 1) 440ms;
  will-change: transform, opacity;
}

/* 5. Small descriptor fades in */
.js-ready .machinery-intro-header .machinery-descriptor-text {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1) 540ms,
              transform 650ms cubic-bezier(0.16, 1, 0.3, 1) 540ms;
  will-change: opacity, transform;
}

/* Revealed State: triggered on scroll into viewport via .is-revealed */
.js-ready .machinery-intro-header.is-revealed .machinery-eyebrow {
  opacity: 1;
  transform: translateY(0);
}

.js-ready .machinery-intro-header.is-revealed .machinery-main-title {
  opacity: 1;
  transform: translateY(0);
}

.js-ready .machinery-intro-header.is-revealed .machinery-supporting-text {
  opacity: 1;
  transform: translateY(0);
}

.js-ready .machinery-intro-header.is-revealed .machinery-gold-line {
  opacity: 1;
  transform: scaleX(1);
}

.js-ready .machinery-intro-header.is-revealed .machinery-marker {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.js-ready .machinery-intro-header.is-revealed .machinery-descriptor-text {
  opacity: 1;
  transform: translateY(0);
}

/* ── Machinery Horizontal Slider Reveal Animations ──────────────────────── */
.js-ready .machinery-slider-viewport {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1) 200ms,
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1) 200ms;
  will-change: opacity, transform;
}

.js-ready .machinery-carousel-section.is-revealed .machinery-slider-viewport,
.js-ready .machinery-slider-viewport.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.js-ready .machinery-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 450ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 450ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 220ms ease-out,
              box-shadow 220ms ease-out;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js-ready .machinery-card .machinery-card-img {
  transform: scale(1.02);
  transition: transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
}

.js-ready .machinery-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.js-ready .machinery-card.is-revealed .machinery-card-img {
  transform: scale(1.0);
}

.js-ready .machinery-card.is-revealed:hover {
  transform: translateY(-4px);
  border-color: rgba(197, 154, 39, 0.5);
  box-shadow: 0 14px 30px -4px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
}

.js-ready .machinery-card.is-revealed:hover .machinery-card-img {
  transform: scale(1.02);
}

.js-ready .machinery-progress-wrapper {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1) 350ms,
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1) 350ms;
}

.js-ready .machinery-carousel-section.is-revealed .machinery-progress-wrapper,
.js-ready .machinery-progress-wrapper.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }
@media (prefers-reduced-motion: reduce) {
  .js-ready .reveal,
  .js-ready .reveal-up,
  .js-ready .reveal-left,
  .js-ready .reveal-right,
  .js-ready .reveal-image,
  .js-ready .stagger-reveal,
  .js-ready .reveal-stagger-item,
  .js-ready [data-reveal],
  .js-ready .company-intro-media,
  .js-ready .industry-media,
  .js-ready .service-media,
  .js-ready .industry-page-media,
  .js-ready main .copy-reveal,
  .js-ready .contact-title-reveal,
  .js-ready .hero-eyebrow,
  .js-ready .hero-title,
  .js-ready .hero-description,
  .js-ready .hero-proof-points,
  .js-ready .hero-actions,
  .js-ready .hero-media {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js-ready .machinery-intro-header,
  .js-ready .machinery-intro-header .machinery-eyebrow,
  .js-ready .machinery-intro-header .machinery-main-title,
  .js-ready .machinery-intro-header .machinery-supporting-text,
  .js-ready .machinery-intro-header .machinery-gold-line,
  .js-ready .machinery-intro-header .machinery-descriptor-text,
  .js-ready .machinery-slider-viewport,
  .js-ready .machinery-card,
  .js-ready .machinery-card .machinery-card-img,
  .js-ready .machinery-card .machinery-card-overlay,
  .js-ready .machinery-card .machinery-card-overlay-btn,
  .js-ready .machinery-progress-wrapper {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .js-ready .machinery-intro-header .machinery-marker {
    opacity: 1 !important;
    transform: rotate(45deg) !important;
    transition: none !important;
    animation: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js-ready .company-intro-content[data-reveal],
  .js-ready .company-intro-media-col[data-reveal],
  .js-ready .company-intro-content .company-intro-eyebrow-row,
  .js-ready .company-intro-content .typo-lead,
  .js-ready .company-intro-content .typo-sub,
  .js-ready .company-intro-content .company-intro-description,
  .js-ready .company-intro-content .company-intro-action,
  .js-ready .company-intro-media-col .company-intro-media-wrapper,
  .js-ready .company-intro-media-col .company-intro-image,
  .js-ready .company-intro-media-col .media-corner,
  .js-ready .company-intro-section .company-intro-gold-line,
  .js-ready .company-intro-section .company-intro-gold-bar {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}
@media (prefers-reduced-motion: reduce) { .leadership-bg-wrap::before { animation: none; } .founder-person-card { opacity: 1 !important; transform: none !important; transition: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .why-number { color: var(--color-accent-gold) !important; opacity: 1 !important; }
  .why-number::after { opacity: 1 !important; transform: scaleY(1) !important; }
  .why-content { opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .service-block { opacity: 1 !important; transform: none !important; transition: background-color 300ms ease !important; }
  .service-block .service-image,
  .service-block:hover .service-image,
  .service-block:hover .service-title,
  .service-block:hover .service-description,
  .service-block:hover .service-number,
  .service-block:hover .service-link,
  .service-block:hover .service-link span { transform: none !important; }
}

/* ── Mobile Animation Optimization (<= 767px) ────────────────────────────── */
@media (max-width: 767px) {
  .js-ready .reveal,
  .js-ready .reveal-up,
  .js-ready [data-reveal] {
    transform: translate3d(0, 14px, 0);
    transition-duration: 480ms;
  }
  .js-ready .reveal-left {
    transform: translate3d(-14px, 0, 0);
    transition-duration: 480ms;
  }
  .js-ready .reveal-right {
    transform: translate3d(14px, 0, 0);
    transition-duration: 480ms;
  }
  .js-ready .reveal-image {
    transform: scale(1.015);
    transition-duration: 550ms;
  }
  .js-ready .stagger-reveal,
  .js-ready .reveal-stagger-item {
    transform: translate3d(0, 12px, 0);
    transition-duration: 420ms;
  }
  .company-category-card:hover {
    transform: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  }
  .company-category-card:hover .company-category-img {
    transform: none;
  }

  @keyframes hero-fade-up {
    from {
      opacity: 0;
      transform: translate3d(0, 14px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes hero-media-in {
    from {
      clip-path: inset(0 0 100% 0);
      opacity: 0;
      transform: translate3d(0, 14px, 0);
    }
    to {
      clip-path: inset(0);
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
}

@media (hover: none) {
  .button:hover,
  .hero-bg-section .hero-btn-primary:hover,
  .hero-bg-section .hero-btn-secondary:hover,
  .hero-bg-section .hero-btn-whatsapp:hover,
  .hero-btn-primary:hover,
  .hero-btn-secondary:hover,
  .hero-btn-whatsapp:hover,
  .company-intro-btn:hover,
  .machinery-card-cta:hover,
  .machinery-nav-btn:hover,
  .company-category-card:hover,
  .machinery-card:hover,
  .founder-person-card:hover {
    transform: none;
  }
}

/* ── Contact Us Page Animations (Subtle Cinematic Entrance & Form Reveal) ─── */
.js-ready .contact-hero .page-eyebrow,
.js-ready .contact-hero h1,
.js-ready .contact-hero p:not(.page-eyebrow) {
  animation: contactHeroFadeUp 550ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.js-ready .contact-hero .page-eyebrow { animation-delay: 80ms; }
.js-ready .contact-hero h1 { animation-delay: 180ms; }
.js-ready .contact-hero p:not(.page-eyebrow) { animation-delay: 280ms; }

@keyframes contactHeroFadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Contact form container reveal & field stagger */
.js-ready .enquiry-panel {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 480ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.js-ready .enquiry-panel.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.js-ready .enquiry-panel .form-field {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.js-ready .enquiry-panel.is-revealed .form-field:nth-child(1) { transition-delay: 60ms; opacity: 1; transform: translate3d(0, 0, 0); }
.js-ready .enquiry-panel.is-revealed .form-field:nth-child(2) { transition-delay: 110ms; opacity: 1; transform: translate3d(0, 0, 0); }
.js-ready .enquiry-panel.is-revealed .form-field:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: translate3d(0, 0, 0); }
.js-ready .enquiry-panel.is-revealed .form-field:nth-child(4) { transition-delay: 210ms; opacity: 1; transform: translate3d(0, 0, 0); }
.js-ready .enquiry-panel.is-revealed .form-field:nth-child(5) { transition-delay: 260ms; opacity: 1; transform: translate3d(0, 0, 0); }
.js-ready .enquiry-panel.is-revealed .form-field:nth-child(6) { transition-delay: 310ms; opacity: 1; transform: translate3d(0, 0, 0); }
.js-ready .enquiry-panel.is-revealed .form-field:nth-child(7) { transition-delay: 360ms; opacity: 1; transform: translate3d(0, 0, 0); }
.js-ready .enquiry-panel.is-revealed .button {
  transition-delay: 410ms;
}

@media (prefers-reduced-motion: reduce) {
  .js-ready .contact-hero .page-eyebrow,
  .js-ready .contact-hero h1,
  .js-ready .contact-hero p:not(.page-eyebrow) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .js-ready .enquiry-panel,
  .js-ready .enquiry-panel .form-field {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Get a Quote — Video-Inspired Live Corner & Border Scan Animation
   Continuously running, subtle gold perimeter & corner indicator
   ========================================================================== */
@property --quote-beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.btn-quote-live,
.hero-btn-secondary,
.iron-hero-btn,
.cta-inner .button-primary {
  position: relative !important;
  isolation: isolate;
}

/* Ensure button text and any child span (e.g. arrow) stay crisp on top */
.btn-quote-live > *,
.hero-btn-secondary > *,
.iron-hero-btn > *,
.cta-inner .button-primary > * {
  position: relative;
  z-index: 4;
}

/* Continuous Traveling Gold Border Beam around the perimeter */
.btn-quote-live::before,
.hero-btn-secondary::before,
.iron-hero-btn::before,
.cta-inner .button-primary::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--quote-beam-angle, 0deg),
    transparent 0deg,
    transparent 230deg,
    rgba(197, 154, 39, 0.2) 265deg,
    rgba(197, 154, 39, 0.75) 300deg,
    #e5b53c 335deg,
    #ffffff 352deg,
    #e5b53c 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  animation: quoteBeamTravel 2.8s linear infinite;
  filter: drop-shadow(0 0 5px rgba(229, 181, 60, 0.75));
}

/* 4 Subtle Gold Industrial Corner Indicators */
.btn-quote-live::after,
.hero-btn-secondary::after,
.iron-hero-btn::after,
.cta-inner .button-primary::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  pointer-events: none;
  background:
    /* Top-Left */
    linear-gradient(to right, #e5b53c 8px, transparent 8px) top left,
    linear-gradient(to bottom, #e5b53c 8px, transparent 8px) top left,
    /* Top-Right */
    linear-gradient(to left, #e5b53c 8px, transparent 8px) top right,
    linear-gradient(to bottom, #e5b53c 8px, transparent 8px) top right,
    /* Bottom-Right */
    linear-gradient(to left, #e5b53c 8px, transparent 8px) bottom right,
    linear-gradient(to top, #e5b53c 8px, transparent 8px) bottom right,
    /* Bottom-Left */
    linear-gradient(to right, #e5b53c 8px, transparent 8px) bottom left,
    linear-gradient(to top, #e5b53c 8px, transparent 8px) bottom left;
  background-size: 8px 8px;
  background-repeat: no-repeat;
  z-index: 3;
  opacity: 0.9;
  filter: drop-shadow(0 0 3px rgba(197, 154, 39, 0.6));
  animation: quoteCornerPulse 2.8s ease-in-out infinite;
}

@keyframes quoteBeamTravel {
  0% {
    --quote-beam-angle: 0deg;
  }
  100% {
    --quote-beam-angle: 360deg;
  }
}

@keyframes quoteCornerPulse {
  0%, 100% {
    opacity: 0.75;
    filter: drop-shadow(0 0 2px rgba(197, 154, 39, 0.5));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(245, 190, 71, 0.9));
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-quote-live::before,
  .hero-btn-secondary::before,
  .iron-hero-btn::before,
  .cta-inner .button-primary::before,
  .btn-quote-live::after,
  .hero-btn-secondary::after,
  .iron-hero-btn::after,
  .cta-inner .button-primary::after {
    animation: none !important;
    opacity: 0.85 !important;
  }
}

/* ==========================================================================
   Machinery Detail Hero Headings — 3D Character Unfolding Animation
   - Per-character 3D unfold
   - Initial delay: 0.5s
   - Stagger: 0.05s
   - Duration: 0.2s
   - rotateX(90deg) translateY(10px) -> rotateX(0deg) translateY(0)
   - opacity: 0 -> 1
   ========================================================================== */
.js-ready .char-reveal-title,
.char-reveal-title,
.js-ready .hero-bg-section .hero-title.char-reveal-title,
.iron-hero-title.char-reveal-title {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  perspective: 1000px;
  -webkit-perspective: 1000px;
}

/* Natural balanced spacing when Get a Quote button directly follows the Hero title */
.hero-bg-section .hero-title + .hero-actions {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.char-reveal-word {
  display: inline-block;
  white-space: nowrap;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.char-unit {
  display: inline-block;
  opacity: 0;
  transform-origin: 50% 50%;
  transform: rotateX(90deg) translateY(10px);
  -webkit-transform: rotateX(90deg) translateY(10px);
  animation-name: charUnfold3D;
  animation-duration: 0.2s;
  animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
  animation-delay: var(--char-delay, 0.5s);
  animation-fill-mode: forwards;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@keyframes charUnfold3D {
  0% {
    opacity: 0;
    transform: rotateX(90deg) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg) translateY(0);
  }
}

@-webkit-keyframes charUnfold3D {
  0% {
    opacity: 0;
    -webkit-transform: rotateX(90deg) translateY(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(0deg) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .char-unit {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
}

/* ── TextMorph Typing Animation (Get a Quote Form) ────────────────────────── */
.text-morph-wrap {
  position: relative;
  width: 100%;
  display: block;
}

.text-morph-wrap.has-value .text-morph-input {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  caret-color: #0F172A !important;
}

.text-morph-wrap.has-value .text-morph-input::selection {
  background-color: rgba(197, 154, 39, 0.28) !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.text-morph-mirror {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: normal;
  color: #0F172A;
  border: 1px solid transparent;
  box-sizing: border-box;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  white-space: pre;
  display: flex;
  align-items: center;
  transition: transform 200ms cubic-bezier(.22, .61, .36, 1);
  z-index: 1;
}

.text-morph-input:focus ~ .text-morph-mirror {
  transform: translateY(-1px);
}

.text-morph-wrap-textarea .text-morph-mirror {
  display: block;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
  overflow-y: hidden;
}

.morph-char {
  display: inline-block;
  will-change: transform, opacity, filter;
}

.morph-char-new {
  animation: textMorphIn 140ms cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

@keyframes textMorphIn {
  0% {
    opacity: 0;
    transform: translateY(2.5px) scale(0.94);
    filter: blur(1.5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@-webkit-keyframes textMorphIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2.5px) scale(0.94);
    filter: blur(1.5px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .text-morph-wrap.has-value .text-morph-input {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
  }
  .text-morph-mirror {
    display: none !important;
  }
  .morph-char-new {
    animation: none !important;
  }
}

/* ==========================================================================
   S.D. ENGINEERING — 3D Tilt Hover Animation (Reference: <Tilt rotationFactor={8} isReverse>)
   - Applied ONLY to eligible non-Hero website images
   - Hardware-accelerated 3D perspective tilt (max ~8deg)
   - Cursor-following with refined smooth reset
   - Zero layout shift, strictly contained inside image wrappers
   - Disabled on touch devices and prefers-reduced-motion
   ========================================================================== */

.tilt-active-container {
  perspective: 1000px;
  -webkit-perspective: 1000px;
}

.tilt-active-image {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .tilt-active-container {
    perspective: none !important;
    -webkit-perspective: none !important;
  }
  .tilt-active-image {
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
  }
}