/* =============================================================
   Prolific Engineering - Premium Industrial Theme
   Stack: Bootstrap 5.3 + AOS + Swiper + CountUp + GLightbox
   ============================================================= */

/* -----------------------------------------------------------
   1. Design tokens
----------------------------------------------------------- */
:root {
  /* Brand - sourced from logo (orange #F58220 + indigo #2E3192) */
  --pe-orange-50:  #FFF5EB;
  --pe-orange-100: #FFE5CC;
  --pe-orange-200: #FFCB99;
  --pe-orange-400: #FA9947;
  --pe-orange-500: #F58220;
  --pe-orange-600: #DC6E10;
  --pe-orange-700: #B0560A;

  --pe-navy-50:   #F1F2FA;
  --pe-navy-100:  #DCDEF2;
  --pe-navy-200:  #B7BBE2;
  --pe-navy-400:  #5A5EB0;
  --pe-navy-500:  #3A3F9F;
  --pe-navy-600:  #2E3192;
  --pe-navy-700:  #232673;
  --pe-navy-800:  #1A1D5C;
  --pe-navy-900:  #11133F;

  --pe-ink:       #0F172A;
  --pe-text:      #334155;
  --pe-muted:     #64748B;
  --pe-line:      #E2E8F0;
  --pe-bg:        #FFFFFF;
  --pe-bg-soft:   #F8FAFC;

  --pe-success: #16A34A;
  --pe-warning: #F59E0B;
  --pe-danger:  #DC2626;

  /* Gradients */
  --pe-grad-cta: linear-gradient(135deg, #FA9947 0%, #F58220 50%, #DC6E10 100%);
  --pe-grad-dark: linear-gradient(135deg, #11133F 0%, #1A1D5C 50%, #2E3192 100%);
  --pe-grad-orange-soft: linear-gradient(135deg, #FFF5EB 0%, #FFE5CC 100%);
  --pe-overlay: linear-gradient(180deg, rgba(17,19,63,.55) 0%, rgba(17,19,63,.85) 100%);
  --pe-overlay-side: linear-gradient(90deg, rgba(17,19,63,.92) 0%, rgba(17,19,63,.55) 60%, rgba(17,19,63,.15) 100%);

  /* Type */
  --pe-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --pe-font-display: 'Sora', var(--pe-font-sans);

  /* Shadows */
  --pe-shadow-xs: 0 1px 2px rgba(15,23,42,.04);
  --pe-shadow-sm: 0 2px 6px rgba(15,23,42,.06);
  --pe-shadow:    0 6px 18px rgba(15,23,42,.08);
  --pe-shadow-lg: 0 16px 40px rgba(15,23,42,.12);
  --pe-shadow-xl: 0 30px 60px rgba(15,23,42,.18);
  --pe-glow-orange: 0 12px 30px rgba(245,130,32,.35);

  /* Radii */
  --pe-radius-sm: 6px;
  --pe-radius:    10px;
  --pe-radius-lg: 16px;
  --pe-radius-xl: 24px;
  --pe-radius-pill: 999px;

  /* Layout */
  --pe-container: 1280px;
  --pe-section-y: 5rem;

  /* Bootstrap overrides */
  --bs-primary: var(--pe-orange-500);
  --bs-primary-rgb: 245, 130, 32;
  --bs-body-font-family: var(--pe-font-sans);
  --bs-body-color: var(--pe-text);
  --bs-body-bg: var(--pe-bg);
  --bs-border-color: var(--pe-line);
  --bs-link-color: var(--pe-orange-600);
  --bs-link-hover-color: var(--pe-orange-700);
}

/* -----------------------------------------------------------
   2. Base
----------------------------------------------------------- */
* { -webkit-tap-highlight-color: transparent; }

html {
  scroll-behavior: smooth;
  /* hidden = fallback for browsers without clip support; clip = reliably contains
     the off-screen offcanvas on iOS Safari (which ignores overflow-x:hidden on body)
     without creating a scroll container that would break position:sticky sidebars. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--pe-font-sans);
  color: var(--pe-text);
  background: var(--pe-bg);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .pe-display {
  font-family: var(--pe-font-display);
  color: var(--pe-ink);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

h1 { font-size: clamp(2rem, 4vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 1.8vw, 1.75rem); }
h4 { font-size: 1.25rem; }

a { color: var(--pe-orange-600); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--pe-orange-700); }

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--pe-orange-200); color: var(--pe-ink); }

.container { max-width: var(--pe-container); }

/* -----------------------------------------------------------
   3. Buttons
----------------------------------------------------------- */
.pe-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--pe-font-sans);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  padding: .9rem 1.5rem;
  border-radius: var(--pe-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.pe-btn:focus-visible { outline: 3px solid rgba(245,130,32,.35); outline-offset: 2px; }
.pe-btn i { font-size: 1.05em; }

.pe-btn-primary {
  color: #fff;
  background: var(--pe-grad-cta);
  box-shadow: var(--pe-glow-orange);
}
.pe-btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 36px rgba(245,130,32,.45); }
.pe-btn-primary:active { transform: translateY(0); }

.pe-btn-light {
  color: var(--pe-ink);
  background: #fff;
  border-color: var(--pe-line);
}
.pe-btn-light:hover { color: var(--pe-orange-600); border-color: var(--pe-orange-200); transform: translateY(-2px); box-shadow: var(--pe-shadow); }

.pe-btn-ghost {
  color: #fff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}
.pe-btn-ghost:hover { color: #fff; background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); }

.pe-btn-outline {
  color: var(--pe-ink);
  background: transparent;
  border-color: var(--pe-line);
}
.pe-btn-outline:hover { color: var(--pe-orange-600); border-color: var(--pe-orange-400); }

.pe-btn-sm { padding: .6rem 1.05rem; font-size: .85rem; }
.pe-btn-lg { padding: 1.1rem 1.9rem; font-size: 1rem; }

/* -----------------------------------------------------------
   4. Topbar
----------------------------------------------------------- */
.pe-topbar {
  background: var(--pe-navy-800);
  color: rgba(255,255,255,.78);
  font-size: .85rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.pe-topbar a { color: rgba(255,255,255,.78); }
.pe-topbar a:hover { color: #fff; }
.pe-topbar .pe-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  gap: 1rem;
  flex-wrap: wrap;
}
.pe-topbar .pe-topbar-meta { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.pe-topbar .pe-topbar-meta span { display: inline-flex; align-items: center; gap: .45rem; }
.pe-topbar .pe-topbar-meta i { color: var(--pe-orange-400); }
.pe-topbar .pe-topbar-social { display: flex; align-items: center; gap: .35rem; }
.pe-topbar .pe-topbar-social a {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  transition: background .2s ease, transform .2s ease;
}
.pe-topbar .pe-topbar-social a:hover { background: var(--pe-orange-500); color: #fff; transform: translateY(-1px); }

/* On mobile the topbar meta + social wrap into a tall multi-row block; hide it
   (this info also lives in the footer) so the header sits at the top. */
@media (max-width: 991.98px) {
  .pe-topbar { display: none; }
}

/* -----------------------------------------------------------
   5. Header / Navigation
----------------------------------------------------------- */
.pe-header {
  background: #fff;
  border-bottom: 1px solid var(--pe-line);
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: box-shadow .25s ease, padding .25s ease, background .25s ease;
}
.pe-header.is-scrolled { box-shadow: var(--pe-shadow-sm); }
.pe-header .pe-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 0;
  transition: padding .25s ease;
}
.pe-header.is-scrolled .pe-header-inner { padding: .65rem 0; }

.pe-logo { display: inline-flex; align-items: center; line-height: 1; }
.pe-logo img { display: block; height: 48px; width: auto; max-width: 220px; transition: opacity .2s ease; }
.pe-logo:hover img { opacity: .85; }
.pe-header.is-scrolled .pe-logo img { height: 42px; }

.pe-nav { display: flex; align-items: center; gap: .25rem; }
.pe-nav-link {
  position: relative;
  padding: .55rem .9rem;
  color: var(--pe-ink);
  font-weight: 500;
  font-size: .95rem;
  border-radius: var(--pe-radius);
  transition: color .2s ease, background .2s ease;
}
.pe-nav-link:hover { color: var(--pe-orange-600); }
.pe-nav-link.is-active { color: var(--pe-orange-600); }
.pe-nav-link.is-active::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 3px;
  border-radius: 3px;
  background: var(--pe-grad-cta);
}
.pe-nav-link.has-caret::after { content: '\f282'; font-family: 'bootstrap-icons'; margin-left: .35rem; font-size: .75em; opacity: .7; transition: transform .25s ease; display: inline-block; }
.pe-nav-link.has-caret { padding-right: .5rem; }

/* -----------------------------------------------------------
   Products megamenu
----------------------------------------------------------- */
.pe-nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.pe-megamenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 720px;
  background: #fff;
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius-lg);
  box-shadow: var(--pe-shadow-xl);
  padding: 1.25rem;
  margin-top: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
  z-index: 1040;
}
.pe-megamenu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px; height: 14px;
  background: #fff;
  border-top: 1px solid var(--pe-line);
  border-left: 1px solid var(--pe-line);
}
.pe-megamenu::after {
  content: '';
  position: absolute;
  top: -16px; left: 0; right: 0;
  height: 16px;
  /* Invisible hover bridge so cursor doesn't drop the dropdown */
}

/* Open via hover (desktop) or focus-within or .is-open class */
.pe-nav-dropdown:hover > .pe-megamenu,
.pe-nav-dropdown:focus-within > .pe-megamenu,
.pe-nav-dropdown.is-open > .pe-megamenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.pe-nav-dropdown:hover > .pe-nav-link.has-caret::after,
.pe-nav-dropdown:focus-within > .pe-nav-link.has-caret::after,
.pe-nav-dropdown.is-open > .pe-nav-link.has-caret::after {
  transform: rotate(180deg);
}

.pe-megamenu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .35rem;
}
.pe-megamenu-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: .85rem;
  padding: .75rem;
  border-radius: var(--pe-radius);
  align-items: center;
  transition: background .2s ease, transform .2s ease;
  color: var(--pe-text);
}
.pe-megamenu-item:hover { background: var(--pe-orange-50); color: var(--pe-orange-700); }
.pe-megamenu-item:hover .pe-megamenu-icon {
  background: #fff;
  box-shadow: 0 6px 14px rgba(245,130,32,.18);
  transform: scale(1.04);
}
.pe-megamenu-item:hover .pe-megamenu-icon img { transform: scale(1.08); }
.pe-megamenu-item .pe-megamenu-icon {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pe-bg-soft);
  border-radius: 12px;
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.pe-megamenu-item .pe-megamenu-icon img {
  width: 32px; height: 32px;
  transition: transform .25s ease;
}
.pe-megamenu-item .pe-megamenu-text strong { display: block; font-family: var(--pe-font-display); font-size: .95rem; font-weight: 600; color: var(--pe-ink); margin-bottom: .15rem; }
.pe-megamenu-item:hover .pe-megamenu-text strong { color: var(--pe-orange-700); }
.pe-megamenu-item .pe-megamenu-text small { display: block; font-size: .78rem; color: var(--pe-muted); line-height: 1.35; }

.pe-megamenu-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1rem .75rem .25rem;
  margin-top: .75rem;
  border-top: 1px dashed var(--pe-line);
}
.pe-megamenu-foot .pe-megamenu-foot-text { font-size: .82rem; color: var(--pe-muted); display: inline-flex; align-items: center; gap: .35rem; }
.pe-megamenu-foot .pe-megamenu-foot-text i { color: var(--pe-orange-500); }

@media (max-width: 1199.98px) { .pe-megamenu { min-width: 600px; } }
@media (max-width: 991.98px) { .pe-megamenu, .pe-nav-dropdown::after { display: none; } }

/* Mobile sub-list (for offcanvas) */
.pe-mobile-nav-list .pe-mobile-nav-item.has-children { position: relative; }
.pe-mobile-nav-list .pe-mobile-nav-item.has-children > a {
  padding-right: 56px;
}
.pe-mobile-expand {
  position: absolute;
  top: 8px; right: 0;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--pe-line);
  border-radius: 50%;
  color: var(--pe-ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .25s ease;
  font-size: .9rem;
}
.pe-mobile-expand:hover { background: var(--pe-orange-50); color: var(--pe-orange-600); border-color: var(--pe-orange-200); }
.pe-mobile-nav-item.is-expanded .pe-mobile-expand { background: var(--pe-grad-cta); color: #fff; border-color: transparent; transform: rotate(180deg); }

.pe-mobile-sub-list {
  list-style: none;
  padding: 0 0 0 1rem;
  margin: 0;
  /* max-height collapse works with multiple <li> children; the grid 0fr->1fr trick
     only animates a single wrapper child and would collapse the first item (Ovens). */
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease;
  border-bottom: 1px solid var(--pe-line);
}
.pe-mobile-nav-item.is-expanded .pe-mobile-sub-list { max-height: 40rem; }
.pe-mobile-sub-list a {
  display: flex; align-items: center; gap: .5rem;
  padding: .65rem 0;
  font-size: .9rem;
  color: var(--pe-text);
  font-weight: 500;
  border-bottom: 1px dashed var(--pe-line);
}
.pe-mobile-sub-list li:last-child a { border-bottom: 0; }
.pe-mobile-sub-list a:hover { color: var(--pe-orange-600); }
.pe-mobile-sub-list a img {
  width: 24px; height: 24px;
}

.pe-header-cta { display: flex; align-items: center; gap: 1rem; }
.pe-header-phone { display: inline-flex; align-items: center; gap: .55rem; color: var(--pe-ink); font-weight: 600; }
.pe-header-phone i { color: var(--pe-orange-500); }
.pe-header-phone:hover { color: var(--pe-orange-600); }

.pe-nav-toggle {
  width: 44px; height: 44px;
  display: none;
  align-items: center; justify-content: center;
  border-radius: var(--pe-radius);
  border: 1px solid var(--pe-line);
  background: #fff;
  color: var(--pe-ink);
  cursor: pointer;
}
.pe-nav-toggle:hover { color: var(--pe-orange-600); border-color: var(--pe-orange-200); }

@media (max-width: 991.98px) {
  .pe-nav, .pe-header-phone { display: none; }
  .pe-nav-toggle { display: inline-flex; }
}

/* Mobile offcanvas nav */
.pe-mobile-nav {
  background: #fff;
}
.pe-mobile-nav .offcanvas-header { border-bottom: 1px solid var(--pe-line); }
.pe-mobile-nav .pe-mobile-nav-list { list-style: none; padding: 0; margin: 0; }
.pe-mobile-nav .pe-mobile-nav-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 0;
  color: var(--pe-ink);
  font-weight: 500;
  border-bottom: 1px solid var(--pe-line);
}
.pe-mobile-nav .pe-mobile-nav-list a:hover, .pe-mobile-nav .pe-mobile-nav-list a.is-active { color: var(--pe-orange-600); }

/* -----------------------------------------------------------
   6. Hero
----------------------------------------------------------- */
.pe-hero {
  position: relative;
  isolation: isolate;
  background: var(--pe-grad-dark);
  color: #fff;
  overflow: hidden;
}
.pe-hero .pe-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.pe-hero .pe-hero-media::before {
  content: '';
  position: absolute;
  inset: 0;
  // background: var(--pe-overlay-side);
  z-index: 1;
}
.pe-hero .pe-hero-media img,
.pe-hero .pe-hero-media .pe-hero-img {
  width: 100%; height: 100%;
  object-fit: cover;
  // animation: peKenBurns 18s ease-out infinite alternate;
}
.pe-hero .pe-hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 30% 50%, black 30%, transparent 75%);
}
.pe-hero .pe-hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 3rem;
  min-height: 620px;
  padding: 5rem 0 6rem;
}
.pe-hero .pe-hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase;
  padding: .45rem .9rem;
  background: rgba(255,255,255,.06);
  // border: 1px solid rgba(255,255,255,.12);
  border: 1px solid #F58220;
  border-radius: var(--pe-radius-pill);
  // color: #fff;
  color: #000;
  backdrop-filter: blur(10px);
}
.pe-hero .pe-hero-eyebrow .pe-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pe-orange-400); box-shadow: 0 0 0 4px rgba(255,138,61,.2); }
.pe-hero h1 {
  // color: #fff;
  font-size: clamp(2.25rem, 5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 1.25rem 0 1rem;
}
.pe-hero h1 .pe-accent { color: var(--pe-orange-400); }
.pe-hero h1 .pe-accent-grad { background: linear-gradient(135deg, #FFC195 0%, #FA9947 50%, #F58220 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pe-hero p.lead {
  color: rgba(255,255,255,.78);
  font-size: 1.1rem;
  max-width: 540px;
  margin-bottom: 2rem;
}
.pe-hero .pe-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.pe-hero .pe-hero-feature-strip {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.pe-hero .pe-hero-feature {
  display: flex; align-items: center; gap: .75rem;
  color: #000; font-weight: 600; font-size: .95rem;
}
.pe-hero .pe-hero-feature i {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(245,130,32,.15);
  color: var(--pe-orange-400);
  font-size: 1.1rem;
}

@keyframes peKenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.08); } }

@media (max-width: 991.98px) {
  .pe-hero .pe-hero-inner { grid-template-columns: 1fr; gap: 2rem; min-height: 0; padding: 4rem 0 5rem; }
  .pe-hero .pe-hero-feature-strip { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

/* -----------------------------------------------------------
   7. Section primitives
----------------------------------------------------------- */
.pe-section { padding: var(--pe-section-y) 0; }
.pe-section-soft { background: var(--pe-bg-soft); }
.pe-section-dark { background: var(--pe-grad-dark); color: rgba(255,255,255,.85); position: relative; isolation: isolate; }
.pe-section-dark h1, .pe-section-dark h2, .pe-section-dark h3, .pe-section-dark h4 { color: #fff; }

.pe-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.pe-section-head.text-start { text-align: left; margin-left: 0; }
.pe-section-head .pe-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pe-orange-600);
  padding: .35rem .85rem;
  background: var(--pe-orange-50);
  border-radius: var(--pe-radius-pill);
  margin-bottom: 1rem;
}
.pe-section-head h2 { margin-bottom: .75rem; }
.pe-section-head p { color: var(--pe-muted); font-size: 1.05rem; margin: 0; }

/* Decorative bg patterns */
.pe-bg-dots {
  position: absolute;
  width: 220px; height: 220px;
  background-image: radial-gradient(var(--pe-orange-200) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  opacity: .55;
  z-index: -1;
  pointer-events: none;
}

/* -----------------------------------------------------------
   8. Cards (generic)
----------------------------------------------------------- */
.pe-card {
  background: #fff;
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius-lg);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  overflow: hidden;
  position: relative;
}
.pe-card:hover { transform: translateY(-6px); box-shadow: var(--pe-shadow-lg); border-color: transparent; }

/* -----------------------------------------------------------
   9. Category tile (Home - Explore Our Range)
----------------------------------------------------------- */
.pe-category-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1rem;
}
.pe-category-tile {
  background: #fff;
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius-lg);
  padding: 1.5rem 1rem;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  color: var(--pe-ink);
  position: relative;
  overflow: hidden;
}
.pe-category-tile::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--pe-grad-cta);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s ease;
}
.pe-category-tile:hover { transform: translateY(-4px); box-shadow: var(--pe-shadow); border-color: transparent; color: var(--pe-orange-600); }
.pe-category-tile:hover::after { transform: scaleX(1); }
.pe-category-tile .pe-category-img {
  width: 88px; height: 88px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pe-bg-soft);
  border-radius: 50%;
  transition: background .3s ease;
}
.pe-category-tile:hover .pe-category-img { background: var(--pe-orange-50); }
.pe-category-tile .pe-category-img img { max-width: 60px; max-height: 60px; object-fit: contain; transition: transform .3s ease; }
.pe-category-tile:hover .pe-category-img img { transform: scale(1.08); }
.pe-category-tile h3 { font-size: .95rem; margin: 0; color: inherit; }
.pe-category-tile small { color: var(--pe-muted); font-size: .8rem; }

@media (max-width: 1199.98px) { .pe-category-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 575.98px) { .pe-category-grid { grid-template-columns: repeat(2, 1fr); } }

/* -----------------------------------------------------------
   10. Product card
----------------------------------------------------------- */
.pe-product {
  background: #fff;
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius-lg);
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  display: flex; flex-direction: column;
  position: relative;
  height: 100%;
}
.pe-product:hover { transform: translateY(-6px); box-shadow: var(--pe-shadow-lg); border-color: transparent; }
.pe-product .pe-product-media {
  position: relative;
  background: var(--pe-bg-soft);
  aspect-ratio: 4/3;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pe-product .pe-product-media img { width: 78%; height: 78%; object-fit: contain; transition: transform .55s ease; }
.pe-product:hover .pe-product-media img { transform: scale(1.06); }
.pe-product .pe-product-tag {
  position: absolute;
  top: .85rem; left: .85rem;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .65rem;
  background: var(--pe-orange-500); color: #fff;
  border-radius: var(--pe-radius-pill);
  font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}
.pe-product .pe-product-tag.is-popular { background: #16A34A; }
.pe-product .pe-product-body { padding: 1.25rem 1.25rem 1.4rem; flex: 1; display: flex; flex-direction: column; }
.pe-product h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
.pe-product .pe-product-cat { font-size: .8rem; color: var(--pe-muted); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .85rem; }
.pe-product .pe-product-specs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.pe-product .pe-product-spec {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 500;
  padding: .28rem .6rem;
  background: var(--pe-bg-soft);
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius-pill);
  color: var(--pe-text);
}
.pe-product .pe-product-spec i { color: var(--pe-orange-500); }
.pe-product .pe-product-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: auto; }
/* flex-basis auto (not 0) + flex-wrap lets the buttons stack on narrow 2-up phone cards
   instead of overflowing past the card edge (which overflow:hidden would clip). */
.pe-product .pe-product-cta .pe-btn { flex: 1 1 auto; justify-content: center; padding: .7rem; font-size: .85rem; }

/* -----------------------------------------------------------
   11. Stats / CountUp
----------------------------------------------------------- */
.pe-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.08);
  border-radius: var(--pe-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.pe-stat {
  background: var(--pe-navy-700);
  padding: 2rem 1.25rem;
  text-align: center;
  position: relative;
  transition: background .25s ease;
}
.pe-stat:hover { background: var(--pe-navy-600); }
.pe-stat .pe-stat-value {
  font-family: var(--pe-font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1;
  color: #fff;
  margin-bottom: .35rem;
  display: inline-flex; align-items: baseline;
}
.pe-stat .pe-stat-value .pe-stat-suffix { color: var(--pe-orange-400); }
.pe-stat .pe-stat-label { color: rgba(255,255,255,.72); font-size: .92rem; }

@media (max-width: 767.98px) { .pe-stats { grid-template-columns: repeat(2, 1fr); } }

/* Light variant */
.pe-stats-light { background: var(--pe-line); border-color: var(--pe-line); }
.pe-stats-light .pe-stat { background: #fff; }
.pe-stats-light .pe-stat:hover { background: var(--pe-bg-soft); }
.pe-stats-light .pe-stat .pe-stat-value { color: var(--pe-ink); }
.pe-stats-light .pe-stat .pe-stat-label { color: var(--pe-muted); }

/* -----------------------------------------------------------
   12. Quality / Promise side block
----------------------------------------------------------- */
.pe-promise {
  background: var(--pe-grad-dark);
  color: #fff;
  border-radius: var(--pe-radius-lg);
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}
.pe-promise::before {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245,130,32,.4), transparent);
  filter: blur(20px);
}
.pe-promise h2 { color: #fff; margin-bottom: 1.5rem; }
.pe-promise ul { list-style: none; padding: 0; margin: 0; }
.pe-promise li { display: flex; align-items: flex-start; gap: .75rem; padding: .6rem 0; color: rgba(255,255,255,.85); }
.pe-promise li i { color: var(--pe-orange-400); font-size: 1.1rem; margin-top: .15rem; }

/* -----------------------------------------------------------
   13. Insights / blog teaser
----------------------------------------------------------- */
.pe-blog-card {
  background: #fff;
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  height: 100%;
}
.pe-blog-card:hover { transform: translateY(-6px); box-shadow: var(--pe-shadow-lg); border-color: transparent; }
.pe-blog-card .pe-blog-media { aspect-ratio: 16/10; overflow: hidden; position: relative; }
.pe-blog-card .pe-blog-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.pe-blog-card:hover .pe-blog-media img { transform: scale(1.05); }
.pe-blog-card .pe-blog-cat {
  position: absolute;
  top: 1rem; left: 1rem;
  padding: .35rem .75rem;
  background: var(--pe-orange-500); color: #fff;
  border-radius: var(--pe-radius-pill);
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.pe-blog-card .pe-blog-body { padding: 1.5rem; display: flex; flex-direction: column; gap: .65rem; flex: 1; }
.pe-blog-card .pe-blog-meta { color: var(--pe-muted); font-size: .82rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pe-blog-card .pe-blog-meta i { color: var(--pe-orange-500); margin-right: .25rem; }
.pe-blog-card h2, .pe-blog-card h3 { font-size: 1.15rem; line-height: 1.35; margin: 0; }
.pe-blog-card h2 a, .pe-blog-card h3 a { color: var(--pe-ink); }
.pe-blog-card h2 a:hover, .pe-blog-card h3 a:hover { color: var(--pe-orange-600); }
.pe-blog-card .pe-blog-readmore { margin-top: auto; font-weight: 600; color: var(--pe-orange-600); display: inline-flex; align-items: center; gap: .35rem; }
.pe-blog-card .pe-blog-readmore i { transition: transform .25s ease; }
.pe-blog-card:hover .pe-blog-readmore i { transform: translateX(3px); }

/* -----------------------------------------------------------
   14. Footer
----------------------------------------------------------- */
.pe-footer {
  background: var(--pe-navy-900);
  color: rgba(255,255,255,.72);
  position: relative;
  padding-top: 5rem;
  margin-top: 5rem;
  isolation: isolate;
}
/* Thin gradient accent line at the top - no wave seam */
.pe-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--pe-orange-500) 30%, var(--pe-orange-400) 50%, var(--pe-orange-500) 70%, transparent 100%);
  z-index: 1;
}
/* Subtle radial glow at top for depth */
.pe-footer::after {
  content: '';
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 240px;
  background: radial-gradient(ellipse at center bottom, rgba(245,130,32,.18), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.pe-footer .pe-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.pe-footer .pe-footer-grid > div > h2 { color: #fff; font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.25rem; font-weight: 700; font-family: var(--pe-font-display); }
.pe-footer ul { list-style: none; padding: 0; margin: 0; }
.pe-footer ul li { padding: .35rem 0; }
.pe-footer ul a { color: rgba(255,255,255,.7); transition: color .2s ease, padding-left .2s ease; }
.pe-footer ul a:hover { color: var(--pe-orange-400); padding-left: 4px; }
.pe-footer .pe-logo img { height: 52px; background: rgba(255,255,255,.95); padding: 6px 10px; border-radius: var(--pe-radius); }
.pe-footer p { color: rgba(255,255,255,.6); }
.pe-footer .pe-footer-contact li { display: flex; align-items: flex-start; gap: .65rem; }
.pe-footer .pe-footer-contact i { color: var(--pe-orange-400); margin-top: .25rem; flex-shrink: 0; }
.pe-footer .pe-footer-social { display: flex; gap: .5rem; margin-top: 1.25rem; }
.pe-footer .pe-footer-social a {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: #fff;
  transition: background .25s ease, transform .25s ease;
}
.pe-footer .pe-footer-social a:hover { background: var(--pe-orange-500); transform: translateY(-2px); }
.pe-footer .pe-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .87rem;
}
.pe-footer .pe-footer-bottom a { color: rgba(255,255,255,.7); }
.pe-footer .pe-footer-bottom a:hover { color: var(--pe-orange-400); }
.pe-footer .pe-footer-bottom-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }

@media (max-width: 991.98px) {
  .pe-footer .pe-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 575.98px) {
  .pe-footer .pe-footer-grid { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------
   15. Accordion (shared: FAQs page + home FAQ section)
----------------------------------------------------------- */
.pe-accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pe-accordion-item {
  background: #fff;
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius-lg);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.pe-accordion-item.is-open {
  border-color: var(--pe-orange-300, #FA9947);
  box-shadow: var(--pe-shadow);
}
.pe-accordion-trigger {
  width: 100%;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--pe-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--pe-ink);
  transition: color .2s ease;
}
.pe-accordion-trigger:hover { color: var(--pe-orange-600); }
.pe-accordion-trigger .pe-accordion-num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pe-orange-50);
  color: var(--pe-orange-700);
  font-size: .85rem;
  font-weight: 700;
  transition: background .25s ease, color .25s ease;
}
.pe-accordion-item.is-open .pe-accordion-trigger .pe-accordion-num {
  background: var(--pe-grad-cta);
  color: #fff;
}
.pe-accordion-trigger .pe-accordion-question { flex: 1; }
.pe-accordion-trigger .pe-accordion-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pe-bg-soft);
  color: var(--pe-orange-600);
  font-size: 1.1rem;
  transition: transform .35s ease, background .25s ease;
}
.pe-accordion-item.is-open .pe-accordion-icon {
  transform: rotate(180deg);
  background: var(--pe-grad-cta);
  color: #fff;
}
.pe-accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.pe-accordion-item.is-open .pe-accordion-content {
  grid-template-rows: 1fr;
}
.pe-accordion-content > div {
  overflow: hidden;
  min-height: 0;
}
.pe-accordion-body {
  padding: 0 1.5rem 1.5rem 4.4rem;
  color: var(--pe-text);
  line-height: 1.7;
}
.pe-accordion-body p { margin-bottom: .85rem; }
.pe-accordion-body p:last-child { margin-bottom: 0; }
.pe-accordion-body ul, .pe-accordion-body ol { margin: .5rem 0 .85rem 1.25rem; }
.pe-accordion-body ul li, .pe-accordion-body ol li { margin-bottom: .35rem; }

@media (max-width: 575.98px) {
  .pe-accordion-trigger { padding: 1rem 1.1rem; font-size: 1rem; gap: .65rem; }
  .pe-accordion-body { padding: 0 1.1rem 1.25rem 3.5rem; }
}

/* -----------------------------------------------------------
   16. Back to top
----------------------------------------------------------- */
.pe-back-to-top {
  position: fixed;
  right: 1.5rem; bottom: 1.5rem;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--pe-grad-cta);
  color: #fff;
  border: none;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--pe-glow-orange);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 1040;
}
.pe-back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pe-back-to-top:hover { transform: translateY(-3px); }

/* -----------------------------------------------------------
   16. Page header (sub-page hero)
----------------------------------------------------------- */
.pe-page-header {
  position: relative;
  isolation: isolate;
  padding: 5rem 0 4rem;
  background: var(--pe-grad-dark);
  color: #fff;
  overflow: hidden;
}
.pe-page-header .pe-page-header-media { position: absolute; inset: 0; z-index: -2; }
.pe-page-header .pe-page-header-media img { width: 100%; height: 100%; object-fit: cover; }
.pe-page-header .pe-page-header-media::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--pe-overlay-side);
}
.pe-page-header h1 { color: #fff; margin: 0; }
.pe-page-header p { color: rgba(255,255,255,.78); max-width: 640px; margin-top: 1rem; }
.pe-breadcrumb {
  display: flex; align-items: center; gap: .5rem;
  list-style: none; padding: 0; margin: 1rem 0 0;
  font-size: .9rem;
  color: rgba(255,255,255,.7);
}
.pe-breadcrumb a { color: rgba(255,255,255,.85); }
.pe-breadcrumb a:hover { color: var(--pe-orange-400); }
.pe-breadcrumb li + li::before { content: '/'; margin-right: .5rem; opacity: .5; }
.pe-breadcrumb .is-active { color: var(--pe-orange-400); }

/* -----------------------------------------------------------
   18. Forms
----------------------------------------------------------- */
.pe-input,
.pe-form-control {
  width: 100%;
  padding: .85rem 1.1rem;
  font-size: .95rem;
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
  background: #fff;
  color: var(--pe-ink);
  transition: border-color .2s ease, box-shadow .2s ease;
  font-family: inherit;
}
.pe-input:focus, .pe-form-control:focus {
  outline: none;
  border-color: var(--pe-orange-400);
  box-shadow: 0 0 0 4px rgba(245,130,32,.12);
}
.pe-input::placeholder, .pe-form-control::placeholder { color: var(--pe-muted); }
textarea.pe-input, textarea.pe-form-control { min-height: 120px; resize: vertical; }

.pe-label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--pe-ink);
  margin-bottom: .45rem;
  letter-spacing: .02em;
}
.pe-label .pe-required { color: var(--pe-danger); }

/* -----------------------------------------------------------
   19. Helpers
----------------------------------------------------------- */
.pe-text-muted { color: var(--pe-muted) !important; }
.pe-text-orange { color: var(--pe-orange-500); }
.pe-bg-soft { background: var(--pe-bg-soft); }
.pe-divider { height: 1px; background: var(--pe-line); margin: 2rem 0; }

/* AOS reveal helpers (extra to AOS lib) */
[data-aos] { will-change: transform, opacity; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .pe-hero .pe-hero-media img { animation: none; }
}