/* Arihantaa — interactive feature styles (React parity) */

/* Services / Products hero scroll targets — sticky header + sticky nav */
[data-route="/services"] #services,
[data-route="/services"] #mepf-consultancy,
[data-route="/services"] #epc-project-solutions,
[data-route="/services"] #vertiv-partner,
[data-route="/services"] #capital-goods-supply {
  scroll-margin-top: 120px;
}
@media (min-width: 768px) {
  [data-route="/services"] #services,
  [data-route="/services"] #mepf-consultancy,
  [data-route="/services"] #epc-project-solutions,
  [data-route="/services"] #vertiv-partner,
  [data-route="/services"] #capital-goods-supply {
    scroll-margin-top: 136px;
  }
}
@media (min-width: 1024px) {
  [data-route="/services"] #services,
  [data-route="/services"] #mepf-consultancy,
  [data-route="/services"] #epc-project-solutions,
  [data-route="/services"] #vertiv-partner,
  [data-route="/services"] #capital-goods-supply {
    scroll-margin-top: 140px;
  }
}

/* Header scrolled state */
header.ari-scrolled {
  background: color-mix(in srgb, var(--surface, #f9f9f9) 95%, transparent) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

/* ── Mobile drawer — exact Header.jsx MobileDrawer / HamburgerButton ─────
   Backdrop: opacity 0→1, 0.3s
   Drawer: x 100%→0, 0.4s EASE_OUT_EXPO [0.16,1,0.3,1]
   Links: opacity + x(24→0), delay 0.08 + i*0.04, duration 0.4 expo
   Accordion panel: height 0→auto + opacity, 0.3s EASE_OUT_QUART
   + icon rotate 45°, 0.2s quart
   Bottom CTA: opacity + y(12→0), delay 0.3, duration 0.35 quart
   Menu label: opacity 0→1, delay 0.12, duration 0.3
*/
.ari-mobile-root {
  --ari-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ari-ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
}
.ari-mobile-root[hidden],
.ari-mobile-root.hidden {
  display: none !important;
}
.ari-mobile-root:not([hidden]) {
  display: block;
}
.ari-mobile-glow {
  background: radial-gradient(
    ellipse at top right,
    rgba(233, 101, 43, 0.06) 0%,
    transparent 70%
  );
  filter: blur(40px);
}
.ari-mobile-backdrop {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.ari-mobile-open .ari-mobile-backdrop {
  opacity: 1;
  pointer-events: auto;
}
.ari-mobile-drawer {
  transform: translateX(100%);
  transition: transform 0.4s var(--ari-ease-expo);
  will-change: transform;
}
.ari-mobile-open .ari-mobile-drawer {
  transform: translateX(0);
}
.ari-mobile-menu-label {
  opacity: 0;
  transition: opacity 0.3s ease 0.12s;
}
.ari-mobile-open .ari-mobile-menu-label {
  opacity: 1;
}
.ari-mobile-link {
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity 0.4s var(--ari-ease-expo),
    transform 0.4s var(--ari-ease-expo);
}
.ari-mobile-open .ari-mobile-link {
  opacity: 1;
  transform: translateX(0);
}
.ari-mobile-open .ari-mobile-link[data-mobile-idx="0"] { transition-delay: 0.08s; }
.ari-mobile-open .ari-mobile-link[data-mobile-idx="1"] { transition-delay: 0.12s; }
.ari-mobile-open .ari-mobile-link[data-mobile-idx="2"] { transition-delay: 0.16s; }
.ari-mobile-open .ari-mobile-link[data-mobile-idx="3"] { transition-delay: 0.2s; }
.ari-mobile-open .ari-mobile-link[data-mobile-idx="4"] { transition-delay: 0.24s; }
/* Exit: opacity 0, x 12, duration 0.1 (Framer exit) */
.ari-mobile-root:not(.ari-mobile-open) .ari-mobile-link {
  transition-duration: 0.1s;
  transition-delay: 0s;
}
.ari-mobile-bottom {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.35s var(--ari-ease-quart) 0.3s,
    transform 0.35s var(--ari-ease-quart) 0.3s;
}
.ari-mobile-open .ari-mobile-bottom {
  opacity: 1;
  transform: translateY(0);
}
.ari-mobile-root:not(.ari-mobile-open) .ari-mobile-bottom {
  transition-delay: 0s;
  transition-duration: 0.15s;
}
/* Drawer CTA — same primary letter-flip as header / contact form submit. */
.ari-mobile-bottom .ari-mobile-contact-cta .header-contact-btn {
  background: var(--color-accent, #e9652b);
  border-color: var(--color-accent, #e9652b);
}
.ari-mobile-bottom .ari-mobile-contact-cta .header-contact-btn .ari-btn-sweep {
  background: #f9f9f9; /* surface — match primary light hover */
}
.ari-mobile-bottom .ari-mobile-contact-cta .header-contact-btn .ari-btn-char > span:first-child {
  color: #fff;
}
.ari-mobile-bottom .ari-mobile-contact-cta .header-contact-btn .ari-btn-char > span:last-child {
  color: #e9652b;
  background-color: transparent;
}
.ari-mobile-bottom .ari-mobile-contact-cta .header-contact-btn .ari-btn-arrow,
.ari-mobile-bottom .ari-mobile-contact-cta .header-contact-btn .ari-btn-arrow.svg-icon {
  color: #e9652b;
  background-color: #e9652b;
}
.ari-acc-panel[hidden] {
  display: block !important; /* keep for height animation; JS animates height/opacity */
  visibility: hidden;
  pointer-events: none;
  height: 0;
  opacity: 0;
  overflow: hidden;
}
.ari-acc-panel.ari-acc-open {
  visibility: visible;
  pointer-events: auto;
}
/* Mobile mega rows — React text-accent/50 → hover text-accent */
.ari-mobile-sec .ari-mega-icon,
.ari-mobile-sec [data-ari-mega-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(233, 101, 43, 0.5); /* text-accent/50 */
  line-height: 0;
}
.ari-mobile-sec a:hover .ari-mega-icon,
.ari-mobile-sec a:focus-visible .ari-mega-icon {
  color: #e9652b; /* group-hover/sec:text-accent */
}
.ari-mobile-sec .ari-mega-svg {
  display: block;
  width: 18px;
  height: 18px;
  overflow: visible;
}
/* Mask-rendered icons default to the dark mega-panel color, which disappears
   on the drawer's near-black background — repaint them accent like the SVG set. */
.ari-mobile-sec .ari-mega-icon .svg-icon,
.ari-mobile-sec .ari-mega-icon .ari-mega-icon-svg {
  width: 18px;
  height: 18px;
  font-size: 18px;
  color: rgba(233, 101, 43, 0.5) !important;
  background-color: rgba(233, 101, 43, 0.5) !important;
}
.ari-mobile-sec .ari-mega-icon img {
  width: 18px;
  height: 18px;
  opacity: 1;
}
.ari-mobile-sec a:hover .ari-mega-icon .svg-icon,
.ari-mobile-sec a:focus-visible .ari-mega-icon .svg-icon,
.ari-mobile-sec a:hover .ari-mega-icon .ari-mega-icon-svg,
.ari-mobile-sec a:focus-visible .ari-mega-icon .ari-mega-icon-svg {
  color: #e9652b !important;
  background-color: #e9652b !important;
}
@media (min-width: 1024px) {
  .ari-mobile-root {
    display: none !important;
  }
}

/* ── Desktop mega popup — exact React Header.jsx AnimatePresence ─────────
   Panel: opacity + y(-10) + clipPath inset, duration 0.3, EASE_OUT_QUART
   Backdrop: opacity, duration 0.2
   Sections: opacity + y(10), duration 0.28, delay 0.04 + i*0.05, quart
   Close delay before exit: 140ms (JS)
*/
.static-mega.ari-mega {
  --ari-mega-ease: cubic-bezier(0.25, 1, 0.5, 1); /* EASE_OUT_QUART */
  background: #f9f9f9;
  color: #1a1a1a;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  overflow-x: hidden;
  /* Closed / pre-enter = Framer initial */
  opacity: 0;
  transform: translateY(-10px);
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 0.3s var(--ari-mega-ease),
    transform 0.3s var(--ari-mega-ease),
    clip-path 0.3s var(--ari-mega-ease),
    visibility 0s linear 0.3s;
  will-change: opacity, transform, clip-path;
}
/* Open = Framer animate */
.static-mega.ari-mega.ari-mega-open {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0% 0);
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity 0.3s var(--ari-mega-ease),
    transform 0.3s var(--ari-mega-ease),
    clip-path 0.3s var(--ari-mega-ease),
    visibility 0s linear 0s;
}
/* Exit = Framer exit (same as initial) */
.static-mega.ari-mega.ari-mega-closing {
  opacity: 0;
  transform: translateY(-10px);
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  visibility: visible;
  transition:
    opacity 0.3s var(--ari-mega-ease),
    transform 0.3s var(--ari-mega-ease),
    clip-path 0.3s var(--ari-mega-ease),
    visibility 0s linear 0.3s;
}
.static-mega.ari-mega.hidden,
.ari-mega-backdrop.hidden {
  display: none !important;
}

/* Backdrop — Framer: opacity 0→1, duration 0.2 */
.ari-mega-backdrop {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0s linear 0.2s;
}
.ari-mega-backdrop.ari-mega-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity 0.2s ease,
    visibility 0s linear 0s;
}
.ari-mega-backdrop.ari-mega-closing {
  opacity: 0;
  pointer-events: none;
  visibility: visible;
  transition:
    opacity 0.2s ease,
    visibility 0s linear 0.2s;
}

/* MegaSection stagger — y10, 0.28s, delay 0.04+i*0.05, quart */
.ari-mega-section {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.28s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.28s cubic-bezier(0.25, 1, 0.5, 1),
    background-color 0.3s ease;
  transition-delay: var(--ari-mega-stagger, 0s);
}
.static-mega.ari-mega-open .ari-mega-section {
  opacity: 1;
  transform: translateY(0);
}
/* Reset only when fully closed — keep content visible during clip-path exit */
.static-mega:not(.ari-mega-open):not(.ari-mega-closing) .ari-mega-section {
  opacity: 0;
  transform: translateY(10px);
  transition: none;
}
.static-mega.ari-mega-closing .ari-mega-section {
  opacity: 1;
  transform: translateY(0);
  transition: none;
}

/* Keep last-card border-right: L-grid is border-t/l on parent + border-r/b on
   each .ari-mega-section — last card’s right edge closes the frame. */

/* ── Mega "View All Products / Services" — Header.jsx exact ─────────────
   React: text-[24px] group-hover:translate-x-0.5 transition-transform duration-200
   Transform on the span (SVG moves as one unit). */
.static-mega a.group > .material-symbols-outlined[data-ari-ms="arrow_forward"] {
  font-size: 24px !important;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s ease;
  will-change: transform;
}
.static-mega a.group:hover > .material-symbols-outlined[data-ari-ms="arrow_forward"] {
  transform: translateX(0.125rem);
}
/* Section header arrows — React: text-[26px] + translate-x-0.5 + color 200ms */
.static-mega a.group\/header > .material-symbols-outlined[data-ari-ms="arrow_forward"] {
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s ease, color 0.2s ease;
  will-change: transform;
}
.static-mega a.group\/header:hover > .material-symbols-outlined[data-ari-ms="arrow_forward"] {
  transform: translateX(0.125rem);
}
/* Mobile drawer View All — React: text-[22px], no translate required */
#static-mobile-nav a[data-close-mobile].inline-flex > .material-symbols-outlined[data-ari-ms="arrow_forward"] {
  font-size: 22px !important;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}
/* Mobile direct-link hint arrow — React opacity + translate-x */
#static-mobile-nav .ari-mobile-hint.material-symbols-outlined {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

/* Accordion +/- rotate — Header.jsx Framer rotate 45°, 0.2s EASE_OUT_QUART */
.ari-acc-icon {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  transform-origin: center center;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

/* ── Mega animated SVG icons — Header.jsx IconBolt / IconThermo / … ────────
   Hover target = whole MegaSection card (React setHovered on section) */
.ari-mega-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(26, 28, 28, 0.4); /* muted default */
  line-height: 0;
}
.ari-mega-section:hover .ari-mega-icon,
.ari-mega-section:focus-within .ari-mega-icon {
  color: #F15A24; /* orange on hover */
}
.ari-mega-icon .svg-icon,
.ari-mega-icon .ari-mega-icon-svg {
  color: rgba(26, 28, 28, 0.4) !important;
  background-color: rgba(26, 28, 28, 0.4) !important;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.ari-mega-section:hover .ari-mega-icon .svg-icon,
.ari-mega-section:focus-within .ari-mega-icon .svg-icon,
.ari-mega-section:hover .ari-mega-icon .ari-mega-icon-svg,
.ari-mega-section:focus-within .ari-mega-icon .ari-mega-icon-svg {
  color: #F15A24 !important;
  background-color: #F15A24 !important;
}
.ari-mega-icon .ari-mega-svg {
  display: block;
  width: 28px;
  height: 28px;
  overflow: visible;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* IconBolt — pathLength draw 0→1, 0.5s */
.ari-mega-icon .ari-mega-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.ari-mega-section:hover .ari-mega-icon .ari-mega-draw,
.ari-mobile-sec a:hover .ari-mega-icon .ari-mega-draw {
  animation: ariMegaDraw 0.5s ease forwards;
}
@keyframes ariMegaDraw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

/* IconThermo — scale pulse 1→1.1→1, 0.4s */
.ari-mega-section:hover .ari-mega-icon .ari-mega-pulse,
.ari-mobile-sec a:hover .ari-mega-icon .ari-mega-pulse {
  animation: ariMegaPulse 0.4s ease;
  transform-origin: center bottom;
}
@keyframes ariMegaPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* IconServer — LED blink opacity, 0.6s infinite (+0.3s delay on 2nd) */
.ari-mega-section:hover .ari-mega-icon .ari-mega-blink-1,
.ari-mobile-sec a:hover .ari-mega-icon .ari-mega-blink-1 {
  animation: ariMegaBlink 0.6s ease infinite;
}
.ari-mega-section:hover .ari-mega-icon .ari-mega-blink-2,
.ari-mobile-sec a:hover .ari-mega-icon .ari-mega-blink-2 {
  animation: ariMegaBlink 0.6s ease infinite 0.3s;
}
@keyframes ariMegaBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* IconMonitor — stand fade in 0→1, 0.3s */
.ari-mega-icon .ari-mega-fadein {
  opacity: 1;
}
.ari-mega-section:hover .ari-mega-icon .ari-mega-fadein,
.ari-mobile-sec a:hover .ari-mega-icon .ari-mega-fadein {
  animation: ariMegaFadeIn 0.3s ease forwards;
}
@keyframes ariMegaFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* IconWrench — rotate wiggle 0→15→-15→0, 0.5s */
.ari-mega-section:hover .ari-mega-icon .ari-mega-wiggle,
.ari-mobile-sec a:hover .ari-mega-icon .ari-mega-wiggle {
  animation: ariMegaWiggle 0.5s ease;
  transform-origin: center center;
}
@keyframes ariMegaWiggle {
  0%, 100% { transform: rotate(0deg); }
  33% { transform: rotate(15deg); }
  66% { transform: rotate(-15deg); }
}

/* IconConstruction — scaleY grow from bottom 0→1, 0.5s */
.ari-mega-section:hover .ari-mega-icon .ari-mega-grow-y,
.ari-mobile-sec a:hover .ari-mega-icon .ari-mega-grow-y {
  animation: ariMegaGrowY 0.5s ease forwards;
  transform-origin: bottom center;
}
@keyframes ariMegaGrowY {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* IconGlobe — linear spin 360deg, 2s infinite */
.ari-mega-section:hover .ari-mega-icon .ari-mega-spin,
.ari-mobile-sec a:hover .ari-mega-icon .ari-mega-spin {
  animation: ariMegaSpin 2s linear infinite;
  transform-origin: center center;
}
@keyframes ariMegaSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ari-mega-section:hover .ari-mega-icon .ari-mega-draw,
  .ari-mega-section:hover .ari-mega-icon .ari-mega-pulse,
  .ari-mega-section:hover .ari-mega-icon .ari-mega-blink-1,
  .ari-mega-section:hover .ari-mega-icon .ari-mega-blink-2,
  .ari-mega-section:hover .ari-mega-icon .ari-mega-fadein,
  .ari-mega-section:hover .ari-mega-icon .ari-mega-wiggle,
  .ari-mega-section:hover .ari-mega-icon .ari-mega-grow-y,
  .ari-mega-section:hover .ari-mega-icon .ari-mega-spin,
  .ari-mobile-sec a:hover .ari-mega-icon .ari-mega-draw,
  .ari-mobile-sec a:hover .ari-mega-icon .ari-mega-pulse,
  .ari-mobile-sec a:hover .ari-mega-icon .ari-mega-blink-1,
  .ari-mobile-sec a:hover .ari-mega-icon .ari-mega-blink-2,
  .ari-mobile-sec a:hover .ari-mega-icon .ari-mega-fadein,
  .ari-mobile-sec a:hover .ari-mega-icon .ari-mega-wiggle,
  .ari-mobile-sec a:hover .ari-mega-icon .ari-mega-grow-y,
  .ari-mobile-sec a:hover .ari-mega-icon .ari-mega-spin {
    animation: none !important;
  }
}

/* Shared underline — React spring stiffness:380 damping:30 */
.ari-nav-underline {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: #e9652b;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  will-change: left, width, opacity;
  transition:
    left 0.4s cubic-bezier(0.34, 1.3, 0.64, 1),
    width 0.4s cubic-bezier(0.34, 1.3, 0.64, 1),
    opacity 0.15s ease;
}
header nav a.text-accent {
  color: #e9652b !important;
}
header nav a.text-secondary {
  color: #5f5e5e !important;
}
header nav a.text-secondary.hover\:text-on-surface:hover,
header nav a.hover\:text-on-surface:hover {
  color: #1a1c1c !important;
}
@media (prefers-reduced-motion: reduce) {
  .ari-nav-underline,
  .static-mega.ari-mega,
  .ari-mega-backdrop,
  .ari-mega-section {
    transition: none !important;
  }
  .static-mega.ari-mega.ari-mega-open .ari-mega-section {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 1023px) {
  .static-mega.ari-mega,
  .ari-mega-backdrop {
    display: none !important;
  }
}

/* Sticky sector / service nav — exact ProductsStickyNav / ServicesStickyNav
   Active + hover + SVG (stroke-current ← parent color) */
button[id^="nav-item-"] {
  background-color: transparent;
}
button[id^="nav-item-"]:hover:not(.ari-nav-active) {
  background-color: rgba(255, 255, 255, 0.05);
}
button[id^="nav-item-"].ari-nav-active {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Bottom indicator bar — React: bg-accent | idle hover: group-hover:bg-white/20 */
button[id^="nav-item-"] > div:first-child {
  background: transparent;
  box-shadow: none;
}
button[id^="nav-item-"]:hover:not(.ari-nav-active) > div:first-child {
  background: #e9652b !important;
}
button[id^="nav-item-"].ari-nav-active > div:first-child {
  background: #e9652b !important;
  box-shadow: none !important;
}

/* Number — React: text-accent | idle: surface-variant/40 · hover: accent/70 */
button[id^="nav-item-"] > .font-mono {
  color: rgba(226, 226, 226, 0.4);
}
button[id^="nav-item-"]:hover:not(.ari-nav-active) > .font-mono {
  color: rgba(233, 101, 43, 0.7) !important;
}
button[id^="nav-item-"].ari-nav-active > .font-mono {
  color: #e9652b !important;
}

/* Divider square — React: bg-accent/70 | idle: surface-variant/20 */
button[id^="nav-item-"] > .w-1.h-1 {
  background-color: rgba(226, 226, 226, 0.2);
}
button[id^="nav-item-"].ari-nav-active > .w-1.h-1 {
  background-color: rgba(233, 101, 43, 0.7) !important;
}

/* Icon wrap — React SectorSVG/ServiceSVG
   idle: opacity-0 scale-75 text-surface-variant/50
   hover: opacity-100 scale-100 text-surface-variant
   active: opacity-100 scale-100 text-accent
   Inline SVG uses stroke: currentColor (mask icons stay invisible for strokes) */
button[id^="nav-item-"] .ari-icon-wrap {
  opacity: 0;
  color: rgba(226, 226, 226, 0.5);
  --tw-scale-x: 0.75;
  --tw-scale-y: 0.75;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition: opacity 0.3s ease-out, transform 0.3s ease-out, color 0.3s ease-out;
}
button[id^="nav-item-"] .ari-icon-wrap svg,
button[id^="nav-item-"] .ari-icon-wrap .ari-icon {
  display: block;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  color: inherit;
  flex-shrink: 0;
}
button[id^="nav-item-"] .ari-icon-wrap svg * {
  stroke: inherit;
  fill: inherit;
}
/* Capital goods orbit — React animate-[spin_8s_linear_infinite] */
button[id^="nav-item-"] .ari-icon-wrap svg.ari-nav-spin {
  animation: 8s linear infinite spin;
}
button[id^="nav-item-"]:hover:not(.ari-nav-active) .ari-icon-wrap {
  opacity: 1 !important;
  color: rgb(226, 226, 226) !important; /* surface-variant */
  --tw-scale-x: 1;
  --tw-scale-y: 1;
}
button[id^="nav-item-"].ari-nav-active .ari-icon-wrap {
  opacity: 1 !important;
  color: #e9652b !important; /* accent — SVG stroke */
  --tw-scale-x: 1;
  --tw-scale-y: 1;
}

/* Label — React: inverse-on-surface | idle: surface-variant/70 · hover: inverse-on-surface */
button[id^="nav-item-"] > .font-label-caps {
  color: rgba(226, 226, 226, 0.7);
}
button[id^="nav-item-"]:hover:not(.ari-nav-active) > .font-label-caps {
  color: rgb(241, 241, 241) !important;
}
button[id^="nav-item-"].ari-nav-active > .font-label-caps {
  color: rgb(241, 241, 241) !important; /* inverse-on-surface */
}

/* Marquee ticker — React: active text-accent | idle hover:text-accent */
nav.sticky .border-t button.ari-nav-active {
  color: #e9652b !important;
}
nav.sticky .border-t button:hover {
  color: #e9652b !important;
}

/* ExecutedProjectsShowcase tab states — exact SolutionsEpcMepf.jsx */
button[data-sector-idx].ari-nav-active {
  background-color: transparent;
  background-image: linear-gradient(
    to bottom,
    rgba(233, 101, 43, 0.03),
    rgba(233, 101, 43, 0.12)
  );
  border-top: 1px solid rgba(233, 101, 43, 0.2);
}
button[data-sector-idx] .ari-epc-tab-bar {
  background: transparent;
}
button[data-sector-idx].ari-nav-active .ari-epc-tab-bar,
button[data-sector-idx].ari-nav-active > div:first-child {
  background: #e9652b !important;
  box-shadow: 0 -2px 10px rgba(233, 101, 43, 0.55);
}
button[data-sector-idx]:hover:not(.ari-nav-active) .ari-epc-tab-bar {
  background: rgba(255, 255, 255, 0.15);
}
button[data-sector-idx] .ari-epc-tab-num {
  color: rgba(255, 255, 255, 0.25);
}
button[data-sector-idx]:hover:not(.ari-nav-active) .ari-epc-tab-num {
  color: rgba(233, 101, 43, 0.7);
}
button[data-sector-idx].ari-nav-active .ari-epc-tab-num {
  color: #e9652b !important;
  font-weight: 700;
  transform: scale(1.05);
}
button[data-sector-idx] .ari-epc-tab-dot {
  background: rgba(255, 255, 255, 0.1);
}
button[data-sector-idx].ari-nav-active .ari-epc-tab-dot {
  background: rgba(233, 101, 43, 0.8);
  transform: scale(1.25);
}
button[data-sector-idx] .ari-epc-tab-icon {
  color: rgba(255, 255, 255, 0.3);
  opacity: 0.7;
}
button[data-sector-idx]:hover:not(.ari-nav-active) .ari-epc-tab-icon {
  color: rgba(233, 101, 43, 0.8);
  opacity: 1;
  transform: scale(1.05);
}
button[data-sector-idx].ari-nav-active .ari-epc-tab-icon {
  color: #e9652b;
  opacity: 1;
  transform: scale(1.1);
}
button[data-sector-idx] .ari-epc-tab-label {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}
button[data-sector-idx]:hover:not(.ari-nav-active) .ari-epc-tab-label {
  color: rgba(255, 255, 255, 0.8);
}
button[data-sector-idx].ari-nav-active .ari-epc-tab-label {
  color: #fff;
  font-weight: 700;
}
button[data-sector-idx] .ari-epc-tab-count {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.3);
}
button[data-sector-idx]:hover:not(.ari-nav-active) .ari-epc-tab-count {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}
button[data-sector-idx].ari-nav-active .ari-epc-tab-count {
  background: #e9652b;
  color: #fff;
  box-shadow: 0 0 8px rgba(233, 101, 43, 0.4);
}

/* PDP sticky subnav — exact ProductDetail.jsx NAV_ITEMS
   Active: text-accent · icon max-w/opacity/mr · underline scale-x-100
   Idle:   text-secondary · icon collapsed · hover reveals icon
   Underline: absolute bottom-0 left-2 right-2 h-[2px] bg-accent
   (React: bar sits on the BUTTON bottom — NOT on sticky border-b;
    parent row keeps py-3, button keeps py-2). */
button.ari-pdp-tab {
  color: #5f5e5e; /* secondary */
  border-bottom: none !important;
  box-shadow: none !important;
}
button.ari-pdp-tab:hover {
  color: #1a1c1c; /* on-surface */
}
button.ari-pdp-tab.ari-pdp-nav-active {
  color: #e9652b !important; /* accent */
  border-bottom: none !important;
  box-shadow: none !important;
}
button.ari-pdp-tab .ari-pdp-tab-icon {
  max-width: 0;
  opacity: 0;
  margin-right: 0;
  overflow: hidden;
  transition: max-width 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
}
button.ari-pdp-tab:hover .ari-pdp-tab-icon,
button.ari-pdp-tab.ari-pdp-nav-active .ari-pdp-tab-icon {
  max-width: 22px !important;
  opacity: 1 !important;
  margin-right: 0.375rem !important; /* mr-1.5 */
}
button.ari-pdp-tab .ari-pdp-tab-bar,
button.ari-pdp-tab span.absolute.bottom-0[class*="h-[2px]"] {
  position: absolute !important;
  left: 0.5rem !important; /* left-2 */
  right: 0.5rem !important; /* right-2 */
  bottom: 0 !important; /* ProductDetail.jsx — button bottom, not border-b */
  height: 2px !important;
  background-color: #e9652b !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important; /* origin-left */
  transition: transform 0.3s ease !important;
  transition-delay: 0s !important;
  opacity: 1 !important;
  pointer-events: none;
}
button.ari-pdp-tab.ari-pdp-nav-active .ari-pdp-tab-bar,
button.ari-pdp-tab.ari-pdp-nav-active span.absolute.bottom-0[class*="h-[2px]"],
button.ari-pdp-tab .ari-pdp-tab-bar.scale-x-100 {
  transform: scaleX(1) !important;
}

/* Hide native scrollbars on sticky horizontal navs */
.scrollbar-hide,
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar,
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Search overlay — exact React SearchOverlay (dark command palette) */
.ari-search-root {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  pointer-events: none;
}
.ari-search-root.ari-open {
  display: block;
  pointer-events: auto;
}
.ari-search-backdrop {
  position: absolute;
  inset: 0;
  z-index: 150;
  background: rgba(6, 8, 12, 0.7);
  backdrop-filter: blur(16px) saturate(0.6) brightness(0.4);
  -webkit-backdrop-filter: blur(16px) saturate(0.6) brightness(0.4);
  opacity: 1;
  transition: opacity 0.3s ease;
}
.ari-search-root.ari-open:not(.ari-closing) .ari-search-backdrop {
  animation: ariSearchFade 0.3s ease;
}
.ari-search-root.ari-closing .ari-search-backdrop {
  opacity: 0;
}
.ari-search-panel {
  position: fixed;
  left: 50%;
  top: clamp(8px, 6dvh, 80px);
  z-index: 151;
  display: flex;
  flex-direction: column;
  width: 94dvw;
  max-width: 680px;
  max-height: 88dvh;
  transform: translateX(-50%);
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  pointer-events: auto;
  opacity: 1;
}
.ari-search-root.ari-open:not(.ari-closing) .ari-search-panel {
  animation: ariSearchPanelIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.ari-search-root.ari-closing .ari-search-panel {
  animation: ariSearchPanelOut 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes ariSearchFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ariSearchPanelIn {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.96) translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
  }
}
@keyframes ariSearchPanelOut {
  from {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) scale(0.96) translateY(-8px);
  }
}
.ari-search-glow {
  height: 2px;
  width: 100%;
  flex-shrink: 0;
  opacity: 0.8;
  background: linear-gradient(to right, transparent, #e9652b, transparent);
}
.ari-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 58px;
  padding: 0 14px; /* px-3.5 */
  background: rgba(255, 255, 255, 0.01);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .ari-search-input-wrap {
    height: 68px;
    padding: 0 20px; /* md:px-5 */
  }
}
.ari-search-input-wrap .ari-search-icon {
  color: #e9652b;
  font-size: 26px !important;
  margin-right: 10px; /* mr-2.5 */
  flex-shrink: 0;
  animation: ariSearchPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; /* tailwind animate-pulse */
}
@media (min-width: 768px) {
  .ari-search-input-wrap .ari-search-icon {
    margin-right: 16px; /* md:mr-4 */
  }
}
@keyframes ariSearchPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.ari-search-input-wrap input {
  flex: 1;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  font-family: Inter, sans-serif;
  font-size: 15px;
  color: #fff;
  caret-color: #e9652b;
}
@media (min-width: 768px) {
  .ari-search-input-wrap input {
    font-size: 16px;
  }
}
.ari-search-input-wrap input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}
.ari-search-input-wrap input:focus {
  outline: none;
  box-shadow: none;
}
.ari-search-input-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: 12px;
}
/* Scope to global SearchOverlay only — do not style catalog toolbar clear */
.ari-search-root .ari-search-clear {
  display: none;
  padding: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  line-height: 1;
  transition: all 0.2s ease;
}
.ari-search-root .ari-search-clear.ari-show,
.ari-search-root .ari-search-clear:not([hidden]) {
  display: inline-flex;
}
.ari-search-root .ari-search-clear[hidden] {
  display: none !important;
}
.ari-search-root .ari-search-clear:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
}
.ari-search-root .ari-search-clear .material-symbols-outlined {
  font-size: 20px !important;
}
.ari-search-esc {
  font-family: Montserrat, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 2px 6px; /* px-1.5 py-0.5 */
  border-radius: 0;
  user-select: none;
}
.ari-search-results {
  flex-grow: 1;
  overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.15);
  max-height: calc(78dvh - 74px);
  scrollbar-width: none;
}
.ari-search-results[hidden] {
  display: none !important;
}
.ari-search-results.ari-results-in {
  animation: ariSearchResultsIn 0.15s ease-out;
}
.ari-search-results::-webkit-scrollbar {
  display: none;
}
@keyframes ariSearchResultsIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.ari-search-list {
  display: flex;
  flex-direction: column;
  gap: 8px; /* gap-2 */
  padding: 14px; /* p-3.5 */
}
@media (min-width: 768px) {
  .ari-search-list {
    padding: 20px; /* md:p-5 */
  }
}
.ari-search-item {
  display: flex;
  align-items: center;
  gap: 14px; /* gap-3.5 */
  width: 100%;
  text-align: left;
  text-decoration: none;
  padding: 12px; /* p-3 */
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left-width: 4px;
  border-left-color: transparent;
  background: rgba(255, 255, 255, 0.01);
  color: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0;
}
@media (min-width: 768px) {
  .ari-search-item {
    gap: 18px; /* md:gap-4.5 */
    padding: 14px; /* md:p-3.5 */
  }
}
.ari-search-item:hover {
  background: rgba(255, 255, 255, 0.02);
  border-left-color: rgba(255, 255, 255, 0.2);
}
.ari-search-item.ari-active {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.12);
  border-left-color: #e9652b;
}
.ari-search-item-icon {
  flex-shrink: 0;
  font-size: 22px !important;
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
}
@media (min-width: 768px) {
  .ari-search-item-icon {
    font-size: 25px !important;
  }
}
.ari-search-item.ari-active .ari-search-item-icon {
  color: #e9652b;
}
.ari-search-item-body {
  flex: 1;
  min-width: 0;
  padding-right: 8px;
}
.ari-search-item-title {
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  transition: color 0.2s ease;
}
@media (min-width: 768px) {
  .ari-search-item-title {
    font-size: 14px;
  }
}
.ari-search-item.ari-active .ari-search-item-title {
  color: #e9652b;
}
.ari-search-item-title .ari-hl,
.ari-search-item-title .text-accent {
  color: #e9652b;
  font-weight: 700;
}
.ari-search-item-desc {
  font-family: Inter, sans-serif;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.375;
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .ari-search-item-desc {
    font-size: 12px;
  }
}
.ari-search-item-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .ari-search-item-meta {
    gap: 16px;
  }
}
.ari-search-type {
  font-family: Montserrat, sans-serif;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.35);
  transition: all 0.3s ease;
}
@media (min-width: 768px) {
  .ari-search-type {
    font-size: 8.5px;
  }
}
.ari-search-item.ari-active .ari-search-type {
  background: rgba(233, 101, 43, 0.15);
  border-color: rgba(233, 101, 43, 0.3);
  color: #e9652b;
}
.ari-search-item-arrow {
  font-size: 20px !important;
  color: rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}
@media (min-width: 768px) {
  .ari-search-item-arrow {
    font-size: 24px !important;
  }
}
.ari-search-item.ari-active .ari-search-item-arrow {
  color: #e9652b;
  transform: translateX(4px); /* translate-x-1 */
}
.ari-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px; /* py-12 */
  gap: 10px; /* gap-2.5 */
}
.ari-search-empty .material-symbols-outlined {
  font-size: 56px !important;
  color: rgba(255, 255, 255, 0.1);
}
.ari-search-empty p {
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3);
  margin: 0;
}
.ari-search-empty .ari-q,
.ari-search-empty .text-accent {
  color: #e9652b;
}
.ari-search-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px; /* px-5 py-2.5 */
  background: #0d0d0d;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  user-select: none;
}
.ari-search-footer span {
  font-family: Montserrat, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.15);
}
.ari-search-footer .ari-count {
  color: rgba(255, 255, 255, 0.25);
}
.ari-search-footer kbd {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1px 4px;
  font: inherit;
  color: inherit;
  border-radius: 0;
}

/* Lightbox gallery — ProductImageGallery.jsx light glassmorphic modal */
.ari-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  cursor: zoom-out;
  user-select: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
@media (min-width: 640px) {
  .ari-lightbox { padding: 1rem; }
}
@media (min-width: 768px) {
  .ari-lightbox { padding: 1.5rem; }
}
.ari-lightbox.ari-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}
.ari-lightbox[hidden] {
  display: none !important;
}
.ari-lightbox-canvas {
  position: relative;
  width: 100%;
  max-width: 56rem; /* max-w-4xl */
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  cursor: default;
}
.ari-lightbox-top {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}
.ari-lightbox-close {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--secondary, #5c5c5c);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
@media (min-width: 640px) {
  .ari-lightbox-close {
    width: 2.75rem;
    height: 2.75rem;
  }
}
.ari-lightbox-close:hover {
  background: var(--accent, #e9652b);
  border-color: var(--accent, #e9652b);
  color: #fff;
  transform: scale(1.05);
}
.ari-lightbox-close:active {
  transform: scale(0.95);
}
.ari-lightbox-stage {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  position: relative;
}
.ari-lightbox-viewport {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .ari-lightbox-viewport {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
@media (min-width: 768px) {
  .ari-lightbox-viewport {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
.ari-lightbox-img {
  max-height: 78vh;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.06));
  mix-blend-mode: multiply;
  display: block;
  pointer-events: none;
}
@media (min-width: 768px) {
  .ari-lightbox-img {
    max-height: 84vh;
  }
}
.ari-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--secondary, #5c5c5c);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
@media (min-width: 640px) {
  .ari-lightbox-nav {
    width: 2.75rem;
    height: 2.75rem;
  }
}
.ari-lightbox-nav:hover {
  border-color: var(--accent, #e9652b);
  background: var(--accent, #e9652b);
  color: #fff;
  transform: translateY(-50%) scale(1.05);
}
.ari-lightbox-nav:active {
  transform: translateY(-50%) scale(0.95);
}
.ari-lightbox-nav.prev {
  left: 0.5rem;
}
.ari-lightbox-nav.next {
  right: 0.5rem;
}
@media (min-width: 640px) {
  .ari-lightbox-nav.prev { left: 1rem; }
  .ari-lightbox-nav.next { right: 1rem; }
}
.ari-lightbox-thumbs {
  width: 100%;
  max-width: 36rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.625rem;
  padding: 0 1rem 1.5rem;
  flex-shrink: 0;
  overflow-x: auto;
}
@media (min-width: 640px) {
  .ari-lightbox-thumbs {
    justify-content: center;
  }
}
@media (min-width: 768px) {
  .ari-lightbox-thumbs {
    padding-bottom: 2rem;
  }
}
.ari-lightbox-thumb {
  position: relative;
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 0;
  border: 1px solid transparent;
  background: rgba(0, 0, 0, 0.05);
  opacity: 0.45;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}
@media (min-width: 640px) {
  .ari-lightbox-thumb {
    width: 5rem;
    height: 5rem;
  }
}
@media (min-width: 768px) {
  .ari-lightbox-thumb {
    width: 6rem;
    height: 6rem;
  }
}
.ari-lightbox-thumb:hover {
  opacity: 1;
  border-color: rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.8);
}
.ari-lightbox-thumb.ari-active {
  border-color: var(--accent, #e9652b);
  opacity: 1;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(233, 101, 43, 0.1);
}
.ari-lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.ari-lightbox-counter {
  padding-bottom: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  font-weight: 700;
  color: rgba(92, 92, 92, 0.6);
  flex-shrink: 0;
  user-select: none;
}
@media (min-width: 768px) {
  .ari-lightbox-counter {
    padding-bottom: 1.5rem;
  }
}
.cursor-zoom-in {
  cursor: zoom-in;
}
.cursor-zoom-out {
  cursor: zoom-out;
}

/* Filter / sort dropdowns — EngineeredProducts.jsx industrial sticky toolbar */
.ari-dd-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: transparent;
  display: none;
}
.ari-dd-overlay.ari-open {
  display: block;
}

.ari-dd-anchor {
  position: relative;
}

main .sticky.ari-toolbar-open {
  overflow: visible !important;
}

.ari-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  z-index: 60;
  margin-top: 2px;
  background: #fff; /* surface */
  border: 1px solid rgba(200, 166, 152, 0.4); /* outline-variant/40 */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: none;
  padding: 0;
  overflow: hidden;
  transform-origin: top right;
}
.ari-filter-dd {
  width: 280px;
  min-width: 280px;
}
.ari-sort-dd {
  width: 220px;
  min-width: 220px;
}
.ari-dropdown.ari-open {
  display: block;
  animation: ariDdIn 0.2s cubic-bezier(0.25, 1, 0.5, 1) both;
}
@keyframes ariDdIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.ari-dd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(200, 166, 152, 0.2);
}
.ari-dd-title {
  font-family: var(--font-label, Montserrat, sans-serif);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(92, 92, 92, 0.6);
  font-weight: 600;
}
.ari-dd-clear {
  font-family: var(--font-label, Montserrat, sans-serif);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e9652b;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  font-weight: 700;
}
.ari-dd-clear:hover {
  opacity: 0.8;
}
.ari-dd-clear[hidden],
.ari-dd-check[hidden] {
  display: none !important;
}

.ari-dd-body {
  padding: 16px;
  border-bottom: 1px solid rgba(200, 166, 152, 0.2);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ari-dd-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ari-dd-label {
  font-family: var(--font-label, Montserrat, sans-serif);
  font-size: 8px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(92, 92, 92, 0.4);
  display: block;
  margin-bottom: 2px;
}
.ari-dd-opt {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  font-family: var(--font-label, Montserrat, sans-serif);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 8px;
  border: 1px solid rgba(200, 166, 152, 0.1);
  background: transparent;
  color: #5c5c5c;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ari-dd-opt:hover {
  color: #1a1c1c;
  background: #fafafa;
}
.ari-dd-opt.ari-on {
  color: #e9652b;
  background: rgba(233, 101, 43, 0.05);
  border-color: rgba(233, 101, 43, 0.3);
}
.ari-dd-opt .ari-dd-check {
  font-size: 14px;
  color: #e9652b;
  line-height: 1;
  display: none !important;
}
.ari-dd-opt.ari-on .ari-dd-check {
  display: inline-block !important;
}

.ari-dd-foot {
  padding: 12px;
  background: #fafafa; /* surface-container-lowest */
}
.ari-dd-apply {
  width: 100%;
  padding: 8px;
  background: #e9652b;
  color: #fff;
  font-family: var(--font-label, Montserrat, sans-serif);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.ari-dd-apply:hover {
  background: rgba(233, 101, 43, 0.9);
}

.ari-dd-sort-opt {
  width: 100%;
  height: 44px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  font-family: var(--font-label, Montserrat, sans-serif);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  border: 0;
  border-bottom: 1px solid rgba(200, 166, 152, 0.1);
  background: transparent;
  color: #5c5c5c;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ari-dd-sort-opt:last-child {
  border-bottom: 0;
}
.ari-dd-sort-opt:hover {
  background: #fafafa;
  color: #1a1c1c;
}
.ari-dd-sort-opt.ari-on {
  background: rgba(233, 101, 43, 0.08);
  color: #e9652b;
}
.ari-dd-sort-opt .ari-dd-check {
  font-size: 16px;
  color: #e9652b;
  line-height: 1;
  display: none !important;
}
.ari-dd-sort-opt.ari-on .ari-dd-check {
  display: inline-block !important;
}

/* Toolbar active accent + red dot — React EngineeredProducts
   FILTER: text-accent when open OR applied; dot only when applied
   SORT:   text-accent when open OR sort≠POPULARITY; dot when ≠POPULARITY
   Dot: absolute top-[12px] right-[12px] w-1.5 h-1.5 rounded-full bg-accent */
button.ari-tb-active {
  color: #e9652b !important;
}
.ari-tb-dot {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 0.375rem; /* w-1.5 = 6px */
  height: 0.375rem;
  border-radius: 9999px;
  background: #e9652b;
  pointer-events: none;
  display: none;
  flex-shrink: 0;
}
.ari-tb-dot.ari-tb-dot-on {
  display: block !important;
}

/* Catalog toolbar search clear — React EngineeredProducts
   MUST NOT use .ari-search-clear (that class is for global SearchOverlay:
   white 29px icon). */
.ari-catalog-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem; /* ml-2 */
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(92, 92, 92, 0.4); /* text-secondary/40 */
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  transition: color 0.2s ease;
}
.ari-catalog-search-clear:hover {
  color: #e9652b; /* text-accent */
}
.ari-catalog-search-clear[hidden] {
  display: none !important;
}
.ari-catalog-search-clear .material-symbols-outlined,
.ari-catalog-search-clear .svg-icon,
.ari-catalog-search-clear .ari-theme-icon {
  font-size: 14px !important; /* text-[14px] — override any global icon size */
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
  line-height: 1;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  display: block;
}

.ari-catalog-empty {
  padding: 5rem 1.5rem;
  text-align: center;
  border: 1px dashed rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.02);
  width: 100%;
}
.ari-catalog-empty[hidden] {
  display: none !important;
}
.ari-catalog-empty-icon {
  font-size: 48px;
  color: rgba(92, 92, 92, 0.3);
  display: block;
  margin-bottom: 1rem;
}
.ari-catalog-empty-title {
  font-family: var(--font-headline, Montserrat, sans-serif);
  font-size: 18px;
  color: #5c5c5c;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}
.ari-catalog-empty-sub {
  font-size: 13px;
  color: rgba(92, 92, 92, 0.5);
  margin: 0.5rem 0 0;
}

/* Expandable Quick Specs — React EngineeredSolutionCard AnimatePresence
   height 0→auto + opacity, 0.4s cubic-bezier(0.25, 1, 0.5, 1); icon rotate 180° / 0.2s */
.ari-expand-panel {
  overflow: hidden;
  height: 0;
  opacity: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: #fafafa; /* surface-container-lowest */
  will-change: height, opacity;
}
.ari-expand-panel.ari-animating {
  transition:
    height 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.ari-expand-panel.ari-open {
  opacity: 1;
}
.ari-expand-panel-inner {
  padding: 1.25rem; /* p-5 */
}
@media (min-width: 1024px) {
  .ari-expand-panel-inner {
    padding: 1.5rem; /* lg:p-6 */
  }
}
.ari-expand-icon {
  display: inline-block;
  transition: transform 0.2s ease;
  transform-origin: center;
}
.ari-specs-open .ari-expand-icon {
  transform: rotate(180deg);
}
.ari-expand-panel table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 600px;
}
.ari-expand-panel th,
.ari-expand-panel td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 0.625rem 0.875rem; /* py-2.5 px-3.5 */
  text-align: left;
}
.ari-expand-panel th {
  background: #f3f3f3;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a1a1a;
  font-weight: 600;
}
.ari-expand-panel tbody tr:last-child td {
  border-bottom: 0;
}
.ari-expand-panel tbody tr:hover {
  background: #f3f3f3;
}
.ari-expand-scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 2px;
}

/* Quick Specs unit toggle — React EngineeredSolutionCard exact look */
.ari-expand-panel .ari-unit {
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  border: 0;
  background: transparent;
}
.ari-expand-panel .ari-unit.bg-secondary {
  background: #2c2c2c; /* secondary / charcoal — active Imperial or Metric */
  color: #fff;
}
.ari-expand-panel td.text-accent,
.ari-expand-panel .text-accent {
  color: #e9652b; /* accent orange — Model ID */
}

/* Spec tabs — React ProductDetail.jsx AnimatePresence mode="wait"
   initial { opacity:0, y:6 } → animate { opacity:1, y:0 }
   exit { opacity:0, y:-6 } · duration 0.25 · default ease */
#specifications [data-ari-spec-stage] {
  position: relative;
  overflow: hidden;
}
#specifications [data-spec-panel] {
  transition:
    opacity 0.25s var(--ari-ease-default),
    transform 0.25s var(--ari-ease-default);
  will-change: opacity, transform;
}
#specifications [data-spec-panel].ari-spec-enter {
  opacity: 0;
  transform: translateY(6px);
}
#specifications [data-spec-panel].ari-spec-in {
  opacity: 1;
  transform: translateY(0);
}
#specifications [data-spec-panel].ari-spec-exit {
  opacity: 0;
  transform: translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
  #specifications [data-spec-panel] {
    transition: none !important;
  }
  }

/* Load more — React EngineeredProducts.jsx (legacy fallback wrap unused) */
[data-ari-load-more] [data-ari-progress] {
  transition: width 0.4s ease-out;
}
.ari-load-more-wrap {
  display: none; /* superseded by [data-ari-load-more] React markup */
}

/* Hero progress dots */
.ari-hero-dot {
  position: relative;
  overflow: hidden;
}
.ari-hero-dot .ari-hero-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: #e9652b;
  width: 0%;
}

/* Reveal / line-grow live in animations.css (exact React Framer parity) */

/* EPC project grid fade — SolutionsEpcMepf.jsx duration 0.25 */
.ari-epc-grid {
  transition: opacity 0.25s ease;
}
.ari-epc-grid.ari-swap {
  opacity: 0;
}

/* Contact success overlay */
.ari-contact-success {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 8, 8, 0.72);
  backdrop-filter: blur(6px);
}
.ari-contact-success.ari-open {
  display: flex;
}
.ari-contact-success-card {
  background: #fff;
  padding: 40px 36px;
  max-width: 420px;
  width: calc(100% - 2rem);
  text-align: center;
}
.ari-contact-success-card h3 {
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 12px 0 8px;
}
.ari-contact-success-card p {
  color: #666;
  font-size: 14px;
}

/* Footer social icons — linkedin/instagram.svg use fill="currentColor"
   but are loaded as <img>, so currentColor resolves to black and
   disappears on the dark footer. Force light glyphs to match Privacy/Terms. */
footer a[aria-label*="LinkedIn"] img,
footer a[aria-label*="Instagram"] img {
  filter: brightness(0) invert(1);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ari-reveal {
    opacity: 1;
    transform: none;
  }
}