/* ===================================================================
   DAFFODIL POWER INDUSTRIES — Premium Industrial Corporate Stylesheet
   Palette  : Blue / White  (Premium corporate accent on clean base)
   Type     : Archivo (display) + Inter (body/UI)
   Structure: Design tokens -> Base/Reset -> Layout -> Components -> Sections -> Responsive
   =================================================================== */

/* ---------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------- */
:root{
  /* Brand palette */
  --red:#273A75;          /* Primary Blue */
  --red-dark:#1E3A8A;     /* Dark Blue (hover) */
  --red-light:#DBEAFE;    /* Light Blue (accent on dark) */
  --ink:#1E3A8A;          /* Dark Blue surfaces (headings / dark sections) */
  --charcoal:#1E293B;
  --steel:#334155;
  --gray-700:#475569;
  --gray-500:#64748B;
  --gray-300:#CBD5E1;
  --gray-100:#E2E8F0;
  --gray-50:#F1F5F9;
  --white:#FFFFFF;

  /* Semantic */
  --bg:#FFFFFF;
  --bg-alt:#F8FBFF;
  --text:#0F172A;
  --text-muted:#475569;
  --border:#DCE4F0;

  /* Typography */
  --font-display:'Archivo','Inter',sans-serif;
  --font-body:'Inter','Segoe UI',Arial,sans-serif;

  /* Geometry */
  --radius-sm:4px;
  --radius:12px;
  --radius-lg:16px;
  --container:1280px;
  --gutter:24px;

  /* Motion */
  --ease:cubic-bezier(.16,.84,.44,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --dur-fast:.25s;
  --dur:.3s;
  --dur-slow:.8s;

  /* Shadows */
  --shadow-sm:0 4px 14px rgba(15,23,42,.06);
  --shadow:0 14px 40px rgba(15,23,42,.10);
  --shadow-lg:0 30px 70px rgba(15,23,42,.16);
  --shadow-red:0 16px 36px rgba(39,58,117,.28);

  --header-h:88px;
  --header-h-scrolled:72px;
}

/* ---------------------------------------------------------------
   2. RESET & BASE
   --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:16px}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}

h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.12;
  font-weight:700;
  letter-spacing:-.01em;
}
h1{font-weight:800}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}
.container-wide{max-width:1480px;margin:0 auto;padding:0 var(--gutter)}

/* Utility */
.text-muted{color:var(--text-muted)}
.no-scroll{overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---------------------------------------------------------------
   3. EYEBROW / SECTION HEADERS
   --------------------------------------------------------------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:16px;
}
.eyebrow::before{
  content:"";
  width:28px;height:2px;
  background:var(--red);
  display:inline-block;
}
.section-head{
  max-width:680px;
  margin-bottom:56px;
}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{
  font-size:clamp(28px,3.6vw,44px);
  margin-bottom:16px;
}
.section-head p{
  color:var(--text-muted);
  font-size:17px;
}
.section-head.light h2,.section-head.light p{color:#fff}
.section-head.light .eyebrow{color:var(--red-light)}

.section{padding:110px 0}
.section-sm{padding:70px 0}
.section-alt{background:var(--bg-alt)}
.section-dark{background:var(--ink);color:#DCE7FA}
.section-dark h2,.section-dark h3{color:#fff}

/* ---------------------------------------------------------------
   4. BUTTONS
   --------------------------------------------------------------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:17px 34px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:14px;
  letter-spacing:.03em;
  text-transform:uppercase;
  border-radius:3px;
  border:2px solid transparent;
  background:var(--red);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
  transition:transform var(--dur-fast) var(--ease-soft),box-shadow var(--dur-fast),background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-red);background:var(--red-dark)}
.btn:active{transform:translateY(-1px)}
.btn .ri{transition:transform var(--dur-fast) var(--ease-soft)}
.btn:hover .ri{transform:translateX(5px)}

.btn-dark{background:var(--ink)}
.btn-dark:hover{box-shadow:0 16px 36px rgba(15,23,42,.32)}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn-outline:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-outline-dark{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-outline-dark:hover{background:var(--ink);color:#fff}
.btn-sm{padding:12px 24px;font-size:12px}
.btn-block{width:100%}

/* Ripple */
.btn .ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  transform:scale(0);
  animation:ripple .6s var(--ease-soft) forwards;
  pointer-events:none;
  z-index:0;
}
@keyframes ripple{to{transform:scale(3);opacity:0}}

/* Text link w/ arrow */
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:14px;color:var(--red);
  position:relative;
}
.link-arrow .ri{transition:transform var(--dur-fast) var(--ease-soft)}
.link-arrow:hover .ri{transform:translateX(6px)}
.link-arrow::after{
  content:"";position:absolute;left:0;bottom:-4px;width:0;height:1.5px;background:var(--red);
  transition:width var(--dur) var(--ease);
}
.link-arrow:hover::after{width:calc(100% - 22px)}

/* ---------------------------------------------------------------
   5. PRELOADER
   --------------------------------------------------------------- */
.preloader{
  position:fixed;inset:0;background:var(--ink);z-index:9999;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s var(--ease),visibility .6s;
}
.preloader.hide{opacity:0;visibility:hidden;pointer-events:none}
.preloader .mark{
  width:54px;height:54px;border:3px solid rgba(255,255,255,.15);
  border-top-color:var(--red);border-radius:50%;
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------
   6. TOPBAR
   --------------------------------------------------------------- */
.topbar{
  background:var(--ink);
  color:#B7C6E8;
  font-size:13px;
  padding:11px 0;
  position:relative;
  z-index:1001;
}
.topbar .row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.topbar .tb-left{display:flex;gap:28px;flex-wrap:wrap}
.topbar .tb-left span{display:inline-flex;align-items:center;gap:8px}
.topbar .tb-left .ri{color:var(--red)}
.topbar .tb-right{display:flex;align-items:center;gap:22px}
.topbar a{color:#B7C6E8;transition:color var(--dur-fast);display:inline-flex;align-items:center;gap:7px}
.topbar a:hover{color:#fff}
.topbar .socials{display:flex;gap:14px}
.topbar .socials a{font-size:14px}

/* ---------------------------------------------------------------
   7. HEADER / NAV
   --------------------------------------------------------------- */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  background:transparent;
  transition:background var(--dur) var(--ease-soft),box-shadow var(--dur),padding var(--dur);
  padding:8px 0;
}
/* Safety scrim: guarantees the logo/nav stay legible on top of any hero or
   inner-page banner image, regardless of that image's colours. */
.site-header:not(.is-scrolled)::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(6,10,26,.55) 0%,rgba(6,10,26,.28) 60%,rgba(6,10,26,0) 100%);
  pointer-events:none;
}
.site-header .nav-wrap{position:relative;z-index:1}
.site-header.is-scrolled{
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);
  box-shadow:0 6px 24px rgba(15,23,42,.08);
  padding:0;
}
.site-header.has-topbar{top:0}

.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--header-h);
  transition:height var(--dur) var(--ease-soft);
  max-width:1480px;
  margin-top:25px;
  padding:0 var(--gutter);
}
.site-header.is-scrolled .nav-wrap{height:var(--header-h-scrolled)}

.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;z-index:1100;position:relative;height:46px;width:190px}
.brand img{height:46px;width:auto;transition:height var(--dur),opacity var(--dur);position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:1}
/* Logo stays navy blue at all times, so give it a light backdrop chip while the
   header is transparent — guarantees contrast against any hero/banner image. */
.site-header:not(.is-scrolled) .brand::before{
  content:"";position:absolute;left:-14px;right:-14px;top:-10px;bottom:-10px;
  background:rgba(255,255,255,.92);border-radius:10px;
  box-shadow:0 4px 16px rgba(0,0,0,.16);
  z-index:0;
}
.brand img.logo-dark{opacity:0}
.site-header.is-scrolled .brand img.logo-light{opacity:0}
.site-header.is-scrolled .brand img.logo-dark{opacity:1}
.site-header.is-scrolled .brand img{height:38px}
.brand-text{
  font-family:var(--font-display);font-weight:800;font-size:20px;
  color:#fff;letter-spacing:-.01em;line-height:1.1;
  transition:color var(--dur);
}
.brand-text span{display:block;font-family:var(--font-body);font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--red-light);margin-top:2px}
.site-header.is-scrolled .brand-text{color:var(--ink)}
.site-header.is-scrolled .brand-text span{color:var(--red)}

.main-nav{display:flex;align-items:center;gap:6px}
.main-nav>li{position:relative}
.main-nav>li>a{
  display:flex;align-items:center;gap:6px;
  padding:14px 20px;
  font-weight:500;font-size:18px;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.3);
  position:relative;
  white-space:nowrap;
  transition:color var(--dur-fast);
}
.site-header.is-scrolled .main-nav>li>a{color:var(--ink);text-shadow:none}
.main-nav>li>a::after{
  content:"";position:absolute;left:18px;right:18px;bottom:8px;height:2px;
  background:var(--red);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.main-nav>li>a:hover::after,
.main-nav>li>a.active::after{transform:scaleX(1)}
/* Transparent header (not scrolled): keep nav text white for contrast against
   whatever banner/hero image sits behind it — only the red underline indicates
   hover/active state. Red text is reserved for the solid white scrolled header. */
.site-header:not(.is-scrolled) .main-nav>li>a:hover,
.site-header:not(.is-scrolled) .main-nav>li>a.active{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.site-header.is-scrolled .main-nav>li>a:hover,
.site-header.is-scrolled .main-nav>li>a.active{color:var(--red)}
.main-nav .chev{font-size:11px;transition:transform var(--dur-fast)}
.main-nav li:hover .chev{transform:rotate(180deg)}

.dropdown{
  position:absolute;top:100%;left:0;
  min-width:280px;
  background:#fff;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);
  padding:10px;
  opacity:0;visibility:hidden;
  transform:translateY(12px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
  border-top:3px solid var(--red);
}
.main-nav li:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown li a{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;border-radius:6px;
  font-size:14px;font-weight:600;color:var(--steel);
  transition:background var(--dur-fast),color var(--dur-fast),padding-left var(--dur-fast);
}
.dropdown li a .ri{opacity:0;transition:opacity var(--dur-fast),transform var(--dur-fast);transform:translateX(-4px)}
.dropdown li a:hover{background:var(--gray-50);color:var(--red);padding-left:20px}
.dropdown li a:hover .ri{opacity:1;transform:translateX(0)}

.nav-cta-group{display:flex;align-items:center;gap:14px}
.nav-phone{
  display:flex;align-items:center;gap:10px;
  color:#fff;font-weight:700;font-size:14.5px;
  transition:color var(--dur)
}
.site-header.is-scrolled .nav-phone{color:var(--ink)}
.nav-phone .ic{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;
  color:var(--red-light);flex-shrink:0;
  transition:background var(--dur);
}
.site-header.is-scrolled .nav-phone .ic{background:rgba(39,58,117,.1);color:var(--red)}

.hamburger{
  display:none;
  width:48px;height:48px;
  border:none;background:rgba(255,255,255,.12);
  border-radius:50%;
  align-items:center;justify-content:center;
  position:relative;z-index:1100;flex-shrink:0;
  transition:background var(--dur);
}
.site-header.is-scrolled .hamburger{background:rgba(15,23,42,.06)}
.hamburger .bar{
  width:20px;height:2px;background:#fff;position:relative;display:block;
  transition:background var(--dur);
}
.site-header.is-scrolled .hamburger .bar{background:var(--ink)}
.hamburger .bar::before,.hamburger .bar::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:inherit;
  transition:transform var(--dur-fast) var(--ease),top var(--dur-fast) var(--ease);
}
.hamburger .bar::before{top:-6px}
.hamburger .bar::after{top:6px}

/* ---------------------------------------------------------------
   8. MOBILE MENU
   --------------------------------------------------------------- */
.mobile-menu{
  position:fixed;inset:0;
  background:var(--ink);
  z-index:1200;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .55s var(--ease),visibility .55s;
  overflow-y:auto;
}
.mobile-menu.open{transform:translateX(0);visibility:visible}
.mobile-menu .mm-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px var(--gutter);
}
.mobile-menu .mm-top img{height:28px;max-width:60%}
.mm-close{
  width:46px;height:46px;min-width:46px;flex-shrink:0;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;
  transition:background var(--dur-fast),transform var(--dur-fast),border-color var(--dur-fast);
}
.mm-close:hover{background:var(--red);border-color:var(--red);transform:rotate(90deg)}
.mobile-menu .mm-nav{padding:20px var(--gutter) 40px;flex:1}
.mobile-menu .mm-nav>li{border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-menu .mm-nav>li>a{
  display:flex;align-items:center;justify-content:space-between;
  padding:19px 4px;font-size:21px;font-weight:700;color:#fff;font-family:var(--font-display);
}
.mobile-menu .mm-nav>li>a .chev{font-size:13px;transition:transform var(--dur-fast)}
.mobile-menu .mm-nav>li.open>a .chev{transform:rotate(180deg);color:var(--red-light)}
.mm-submenu{max-height:0;overflow:hidden;transition:max-height var(--dur) var(--ease)}
.mobile-menu .mm-nav>li.open .mm-submenu{max-height:400px}
.mm-submenu li a{display:block;padding:12px 4px 12px 18px;color:#C3D2F0;font-size:15px;font-weight:500;border-left:2px solid rgba(255,255,255,.12);margin-left:4px}
.mm-submenu li a:hover{color:var(--red-light)}
.mobile-menu .mm-foot{padding:26px var(--gutter) 40px;border-top:1px solid rgba(255,255,255,.08)}
.mobile-menu .mm-foot a{color:#fff;font-weight:700;font-size:16px;display:flex;align-items:center;gap:10px;margin-bottom:14px}
.mobile-menu .mm-foot .socials{display:flex;gap:12px;margin-top:18px}
.mobile-menu .mm-foot .socials a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center}
.mobile-menu .mm-foot .socials a:hover{background:var(--red)}

.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1150;opacity:0;visibility:hidden;transition:opacity var(--dur),visibility var(--dur)}
.menu-overlay.show{opacity:1;visibility:visible}

/* ---------------------------------------------------------------
   9. HERO
   --------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--ink);
}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;
  transform:scale(1.08);
  transition:opacity 1.4s var(--ease-soft),transform 7s linear;
}
.hero-slide.active{opacity:1;transform:scale(1)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(115deg,rgba(15,23,42,.92) 0%,rgba(15,23,42,.74) 38%,rgba(15,23,42,.5) 65%,rgba(15,23,42,.78) 100%);
}
.hero::after{
  content:"";position:absolute;right:-10%;top:-10%;width:60%;height:140%;z-index:1;
  background:radial-gradient(circle,rgba(39,58,117,.16),transparent 60%);
}
.hero-content{position:relative;z-index:2;color:#fff;padding-top:var(--header-h)}
.hero-content .container{padding-top:24px;padding-bottom:clamp(48px,8vw,96px)}
.hero-tag{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 18px;border:1px solid rgba(255,255,255,.25);
  border-radius:100px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:24px;backdrop-filter:blur(6px);background:rgba(255,255,255,.06);
}
.hero-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse-dot 1.8s infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.hero h1{
  color:#fff;
  font-size:clamp(34px,5.6vw,68px);
  font-weight:800;
  max-width:920px;
  margin-bottom:22px;
}
.hero h1 em{
  font-style:normal;color:var(--red-light);
  position:relative;
}
.hero p.lead{
  font-size:clamp(16px,1.6vw,19px);
  color:rgba(255,255,255,.78);
  max-width:560px;
  margin-bottom:36px;
  font-weight:400;
}
.hero-cta{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:44px}

.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:30px;
  max-width:920px;
}
.hero-stats .hs{padding-right:20px}
.hero-stats .hs:not(:last-child){border-right:1px solid rgba(255,255,255,.14)}
.hero-stats .num{
  font-family:var(--font-display);font-size:clamp(24px,3vw,36px);font-weight:800;color:#fff;
  display:flex;align-items:baseline;gap:2px;
}
.hero-stats .num [data-count]{color:#fff}
.hero-stats .label{font-size:12.5px;color:rgba(255,255,255,.62);margin-top:6px;letter-spacing:.02em}

.scroll-indicator{
  position:absolute;bottom:32px;left:50%;
  transform:translateX(-50%);
  z-index:2;color:#fff;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.75;
}
.scroll-indicator .wheel{
  width:26px;height:42px;border:2px solid rgba(255,255,255,.5);border-radius:14px;
  position:relative;
}
.scroll-indicator .wheel::before{
  content:"";position:absolute;top:8px;left:50%;width:3px;height:8px;margin-left:-1.5px;
  background:#fff;border-radius:2px;
  animation:scrollwheel 1.8s infinite;
}
@keyframes scrollwheel{0%{opacity:1;top:8px}70%{opacity:0;top:22px}100%{opacity:0;top:8px}}

.hero-dots{position:absolute;z-index:2;right:36px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px}
.hero-dots button{width:9px;height:9px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:transparent;transition:all var(--dur-fast)}
.hero-dots button.active{background:var(--red);border-color:var(--red);height:26px}

/* ---------------------------------------------------------------
   10. PAGE BANNER (inner pages)
   --------------------------------------------------------------- */
.page-banner{
  position:relative;
  min-height:340px;
  display:flex;align-items:center;
  background:linear-gradient(120deg,rgba(15,23,42,.92),rgba(15,23,42,.78)),var(--ink);
  background-size:cover;background-position:center;
  color:#fff;
  padding-top:var(--header-h);
  overflow:hidden;
}
.page-banner.has-bg{background-blend-mode:normal}
.page-banner::after{
  content:"";position:absolute;left:-6%;bottom:-30%;width:46%;height:120%;
  background:radial-gradient(circle,rgba(39,58,117,.22),transparent 65%);
}
.page-banner .container{position:relative;z-index:2;padding-top:20px;padding-bottom:36px}
.page-banner .eyebrow{color:var(--red-light)}
.page-banner h1{color:#fff;font-size:clamp(32px,4.6vw,54px)}
.crumb{margin-top:16px;font-size:14px;color:rgba(255,255,255,.65);display:flex;align-items:center;gap:10px}
.crumb a{color:#fff;font-weight:600}
.crumb a:hover{color:var(--red-light)}
.crumb .sep{opacity:.5}

/* ---------------------------------------------------------------
   11. REVEAL / SCROLL ANIMATION ENGINE
   --------------------------------------------------------------- */
[data-reveal]{opacity:0;transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);will-change:transform,opacity}
[data-reveal="up"]{transform:translateY(46px)}
[data-reveal="left"]{transform:translateX(-50px)}
[data-reveal="right"]{transform:translateX(50px)}
[data-reveal="zoom"]{transform:scale(.88)}
[data-reveal="fade"]{transform:none}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.1s}
[data-reveal-delay="2"]{transition-delay:.2s}
[data-reveal-delay="3"]{transition-delay:.3s}
[data-reveal-delay="4"]{transition-delay:.4s}
[data-reveal-delay="5"]{transition-delay:.5s}
[data-reveal-delay="6"]{transition-delay:.6s}

/* ---------------------------------------------------------------
   12. ABOUT SECTION
   --------------------------------------------------------------- */
.about-grid{display:grid;grid-template-columns:.92fr 1fr;gap:70px;align-items:center}
.about-media{position:relative}
.about-media .frame{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.about-media .frame img{width:100%;height:580px;object-fit:cover;transition:transform 1.2s var(--ease)}
.about-media:hover .frame img{transform:scale(1.06)}
.about-media .frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(15,23,42,.55));
}
.about-media .accent-block{
  position:absolute;width:120px;height:120px;background:var(--red);
  bottom:-24px;left:-24px;z-index:-1;border-radius:var(--radius);
}
.badge-float{
  position:absolute;bottom:28px;left:-36px;
  background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:26px 30px;
  display:flex;align-items:center;gap:18px;
  min-width:240px;
  animation:floaty 4s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.badge-float .bf-num{
  font-family:var(--font-display);font-size:40px;font-weight:800;color:var(--red);line-height:1;
}
.badge-float .bf-text{font-size:13px;color:var(--text-muted);font-weight:600;line-height:1.3}

.about-body .feature-list{margin:30px 0 36px;display:grid;gap:16px}
.about-body .feature-list li{
  display:flex;align-items:flex-start;gap:14px;font-weight:600;color:var(--steel);font-size:15.5px;
}
.about-body .feature-list .chk{
  width:24px;height:24px;border-radius:50%;background:rgba(39,58,117,.1);color:var(--red);
  display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;margin-top:2px;
}
.about-counters{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;margin-top:50px;
  border-top:1px solid var(--border);padding-top:34px;
}
.about-counters .ac{text-align:left;padding-right:14px}
.about-counters .ac:not(:last-child){border-right:1px solid var(--border)}
.about-counters .num{
  font-family:var(--font-display);font-size:clamp(26px,3vw,38px);font-weight:800;color:var(--ink);
  display:flex;align-items:baseline;gap:2px;
}
.about-counters .num [data-count]{color:var(--ink)}
.about-counters .label{font-size:13px;color:var(--text-muted);margin-top:6px}

/* ---------------------------------------------------------------
   13. WHY CHOOSE US — ICON CARDS / GLASS
   --------------------------------------------------------------- */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.feature-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.feature-card{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:42px 32px;
  transition:transform var(--dur) var(--ease-soft),box-shadow var(--dur),border-color var(--dur);
  overflow:hidden;
}
.feature-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(39,58,117,.05),transparent 55%);
  opacity:0;transition:opacity var(--dur);
}
.feature-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg);border-color:var(--red)}
.feature-card:hover::before{opacity:1}
.feature-card .fc-icon{
  width:64px;height:64px;border-radius:16px;
  background:var(--ink);color:var(--red-light);
  display:flex;align-items:center;justify-content:center;font-size:26px;
  margin-bottom:24px;
  transition:transform var(--dur) var(--ease-soft),background var(--dur);
  position:relative;z-index:1;
}
.feature-card:hover .fc-icon{background:var(--red);color:#fff;transform:rotate(-8deg) scale(1.05)}
.feature-card h3{font-size:19px;margin-bottom:12px;position:relative;z-index:1}
.feature-card p{color:var(--text-muted);font-size:14.5px;position:relative;z-index:1}
.feature-card .fc-no{
  position:absolute;top:24px;right:28px;font-family:var(--font-display);font-weight:800;
  font-size:42px;color:var(--gray-100);z-index:0;transition:color var(--dur);
}
.feature-card:hover .fc-no{color:rgba(39,58,117,.08)}

/* Glass variant for dark backgrounds */
.glass-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px);
  border-radius:var(--radius-lg);
  padding:38px 30px;
  transition:transform var(--dur) var(--ease-soft),background var(--dur);
}
.glass-card:hover{transform:translateY(-8px);background:rgba(255,255,255,.1)}
.glass-card .fc-icon{background:rgba(39,58,117,.18);color:var(--red-light)}
.glass-card:hover .fc-icon{background:var(--red);color:#fff}
.glass-card h3{color:#fff}
.glass-card p{color:rgba(255,255,255,.62)}

/* ---------------------------------------------------------------
   14. PRODUCT CARDS
   --------------------------------------------------------------- */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.product-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.product-card{
  display:flex;flex-direction:column;
  background:#fff;border-radius:var(--radius-lg);
  overflow:hidden;border:1px solid var(--border);
  height:100%;
  transition:transform var(--dur) var(--ease-soft),box-shadow var(--dur),border-color var(--dur);
  position:relative;
}
.product-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg);border-color:var(--red)}
.product-card .pc-media{position:relative;height:240px;overflow:hidden;background:var(--gray-50)}
.product-card .pc-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.product-card:hover .pc-media img{transform:scale(1.12)}
.product-card .pc-cat{
  position:absolute;top:16px;left:16px;z-index:2;
  background:#fff;color:var(--red);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 14px;border-radius:100px;box-shadow:var(--shadow-sm);
}
.product-card .pc-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(15,23,42,.4));
  opacity:0;transition:opacity var(--dur);
}
.product-card:hover .pc-media::after{opacity:1}
.product-card .pc-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.product-card .pc-body h3{font-size:18.5px;margin-bottom:10px}
.product-card .pc-body p{color:var(--text-muted);font-size:14px;flex:1;margin-bottom:18px}
.product-card .pc-more{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;color:var(--ink);
  letter-spacing:.03em;text-transform:uppercase;
  padding-top:16px;border-top:1px solid var(--border);
  transition:color var(--dur-fast),gap var(--dur-fast);
}
.product-card .pc-more .ri{color:var(--red);transition:transform var(--dur-fast) var(--ease-soft)}
.product-card:hover .pc-more{color:var(--red)}
.product-card:hover .pc-more .ri{transform:translateX(5px)}

/* ---------------------------------------------------------------
   15. INDUSTRIES — INTERACTIVE OVERLAY CARDS
   --------------------------------------------------------------- */
.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.industry-card{
  position:relative;
  height:380px;border-radius:var(--radius-lg);
  overflow:hidden;cursor:pointer;
  background-size:cover;background-position:center;
  transition:flex-grow var(--dur);
}
.industry-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,23,42,.15) 0%,rgba(15,23,42,.92) 100%);
  transition:background var(--dur);
}
.industry-card::after{
  content:"";position:absolute;inset:0;border:2px solid transparent;border-radius:var(--radius-lg);
  transition:border-color var(--dur);
}
.industry-card:hover::after{border-color:var(--red)}
.industry-card .ic-num{
  position:absolute;top:24px;left:24px;z-index:2;
  font-family:var(--font-display);font-weight:800;font-size:14px;color:rgba(255,255,255,.6);
}
.industry-card .ic-body{
  position:absolute;left:24px;right:24px;bottom:24px;z-index:2;color:#fff;
}
.industry-card .ic-icon{
  width:50px;height:50px;border-radius:12px;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px;
  transition:background var(--dur),transform var(--dur);
}
.industry-card:hover .ic-icon{background:var(--red);transform:scale(1.08)}
.industry-card h3{color:#fff;font-size:21px;margin-bottom:8px}
.industry-card .ic-desc{
  font-size:13.5px;color:rgba(255,255,255,.7);max-height:0;opacity:0;overflow:hidden;
  transition:max-height var(--dur) var(--ease),opacity var(--dur);
}
.industry-card:hover .ic-desc{max-height:80px;opacity:1;margin-top:8px}
.industry-card .ic-line{width:36px;height:2px;background:var(--red);margin-top:14px;transition:width var(--dur)}
.industry-card:hover .ic-line{width:60px}

/* ---------------------------------------------------------------
   16. STATISTICS BAND
   --------------------------------------------------------------- */
.stats-band{
  position:relative;
  background:var(--ink);
  color:#fff;
  overflow:hidden;
}
.stats-band::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 12% 30%,rgba(39,58,117,.22),transparent 45%),
    radial-gradient(circle at 88% 75%,rgba(39,58,117,.14),transparent 45%);
}
.stats-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat-item{
  text-align:center;padding:0 20px;position:relative;
}
.stat-item:not(:last-child)::after{
  content:"";position:absolute;right:0;top:10%;bottom:10%;width:1px;background:rgba(255,255,255,.12);
}
.stat-item .si-icon{
  width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--red-light);
  margin:0 auto 22px;transition:transform var(--dur) var(--ease-soft),background var(--dur);
}
.stat-item:hover .si-icon{background:var(--red);color:#fff;transform:scale(1.1)}
.stat-item .num{
  font-family:var(--font-display);font-weight:800;font-size:clamp(34px,4vw,52px);
  display:flex;justify-content:center;align-items:baseline;gap:2px;
}
.stat-item .num [data-count]{color:#fff}
.stat-item .label{margin-top:10px;font-size:14px;color:rgba(255,255,255,.62);letter-spacing:.02em}

/* ---------------------------------------------------------------
   17. PROJECTS / GALLERY — MASONRY + FILTER
   --------------------------------------------------------------- */
.filter-bar{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:50px}
.filter-btn{
  padding:11px 24px;border-radius:100px;border:1px solid var(--border);
  background:#fff;font-weight:700;font-size:13px;letter-spacing:.03em;color:var(--steel);
  transition:all var(--dur-fast);
}
.filter-btn:hover{border-color:var(--red);color:var(--red)}
.filter-btn.active{background:var(--ink);border-color:var(--ink);color:#fff}

.masonry{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:20px}
.masonry-item{
  position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;
  grid-row:span 1;transition:opacity var(--dur),transform var(--dur);
}
.masonry-item.h2{grid-row:span 2}
.masonry-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.masonry-item:hover img{transform:scale(1.1)}
.masonry-item .mi-overlay{
  position:absolute;inset:0;background:linear-gradient(180deg,rgba(39,58,117,0) 30%,rgba(15,23,42,.88) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:22px;
  opacity:0;transition:opacity var(--dur);
}
.masonry-item:hover .mi-overlay{opacity:1}
.masonry-item .mi-cat{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red-light);margin-bottom:6px}
.masonry-item .mi-title{color:#fff;font-weight:700;font-size:16px}
.masonry-item .mi-zoom{
  position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;color:var(--ink);
  opacity:0;transform:scale(.6);transition:all var(--dur-fast);
}
.masonry-item:hover .mi-zoom{opacity:1;transform:scale(1)}
.masonry-item.hide{display:none}

/* ---------------------------------------------------------------
   18. CLIENTS — AUTOSCROLL LOGO MARQUEE
   --------------------------------------------------------------- */
.logo-marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-track{display:flex;gap:80px;width:max-content;animation:scrollLeft 32s linear infinite}
.logo-marquee:hover .logo-track{animation-play-state:paused}
.logo-track .lg{
  height:46px;display:flex;align-items:center;font-family:var(--font-display);font-weight:800;
  font-size:21px;color:var(--gray-7     00);letter-spacing:-.02em;white-space:nowrap;
  transition:color var(--dur-fast);
}
.logo-track .lg:hover{color:var(--red)}
@keyframes scrollLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------------------------------------------------------
   19. TESTIMONIALS
   --------------------------------------------------------------- */
.testi-wrap{position:relative;max-width:880px;margin:0 auto}
.testi-track{overflow:hidden;border-radius:var(--radius-lg)}
.testi-slides{display:flex;transition:transform .6s var(--ease)}
.testi-slide{min-width:100%;padding:8px}
.testi-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:50px 56px;text-align:center;box-shadow:var(--shadow);
}
.testi-card .stars{color:var(--red);font-size:16px;margin-bottom:22px;display:flex;justify-content:center;gap:4px}
.testi-card .quote{font-family:var(--font-display);font-size:clamp(18px,2vw,23px);font-weight:600;color:var(--ink);line-height:1.5;margin-bottom:30px}
.testi-card .author{display:flex;align-items:center;justify-content:center;gap:14px}
.testi-card .avatar{
  width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:17px;
}
.testi-card .a-name{font-weight:700;font-size:15px;text-align:left}
.testi-card .a-role{font-size:13px;color:var(--text-muted);text-align:left}
.testi-nav{display:flex;justify-content:center;gap:14px;margin-top:34px;align-items:center}
.testi-arrow{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--border);background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--ink);transition:all var(--dur-fast);
}
.testi-arrow:hover{background:var(--red);border-color:var(--red);color:#fff}
.testi-dots{display:flex;gap:8px}
.testi-dots button{width:8px;height:8px;border-radius:50%;background:var(--gray-300);border:none;transition:all var(--dur-fast)}
.testi-dots button.active{background:var(--red);width:22px;border-radius:4px}

/* ---------------------------------------------------------------
   20. BLOG / NEWS CARDS
   --------------------------------------------------------------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.blog-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
  transition:transform var(--dur) var(--ease-soft),box-shadow var(--dur);
}
.blog-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.blog-card .bc-media{position:relative;height:220px;overflow:hidden}
.blog-card .bc-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.blog-card:hover .bc-media img{transform:scale(1.1)}
.blog-card .bc-date{
  position:absolute;bottom:16px;left:16px;background:var(--red);color:#fff;
  padding:9px 14px;border-radius:8px;text-align:center;line-height:1.1;
}
.blog-card .bc-date .d{font-family:var(--font-display);font-weight:800;font-size:18px;display:block}
.blog-card .bc-date .m{font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.blog-card .bc-body{padding:26px}
.blog-card .bc-meta{display:flex;gap:16px;font-size:12.5px;color:var(--text-muted);margin-bottom:14px}
.blog-card .bc-meta span{display:flex;align-items:center;gap:6px}
.blog-card h3{font-size:18px;margin-bottom:14px;line-height:1.4}
.blog-card .bc-link{font-weight:700;font-size:13.5px;color:var(--ink);display:inline-flex;align-items:center;gap:8px;transition:color var(--dur-fast)}
.blog-card:hover .bc-link{color:var(--red)}

/* ---------------------------------------------------------------
   21. CTA STRIP
   --------------------------------------------------------------- */
.cta-strip{
  position:relative;background:var(--ink);color:#fff;padding:80px 0;overflow:hidden;
}
.cta-strip::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(39,58,117,.22),transparent 55%);
}
.cta-strip .container{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta-strip h2{color:#fff;font-size:clamp(26px,3.2vw,38px);margin-bottom:10px;max-width:560px}
.cta-strip p{color:rgba(255,255,255,.68);max-width:480px}

/* ---------------------------------------------------------------
   22. CONTACT
   --------------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px}
.info-card{
  display:flex;gap:18px;padding:24px 0;border-bottom:1px solid var(--border);
}
.info-card:last-child{border-bottom:none}
.info-card .ic{
  width:54px;height:54px;border-radius:14px;background:var(--ink);color:var(--red-light);
  display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;
  transition:background var(--dur-fast),color var(--dur-fast);
}
.info-card:hover .ic{background:var(--red);color:#fff}
.info-card h4{font-size:16px;margin-bottom:6px}
.info-card p,.info-card a{color:var(--text-muted);font-size:14.5px}
.info-card a:hover{color:var(--red)}

.form-card{background:var(--bg-alt);border-radius:var(--radius-lg);padding:44px}
.field{margin-bottom:18px;position:relative}
.field label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--steel);margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%;padding:15px 18px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:#fff;font-size:15px;color:var(--text);transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(39,58,117,.1)}
.field textarea{resize:vertical;min-height:130px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-msg{margin-top:16px;font-size:14px;font-weight:600;display:none}
.form-msg.show{display:block}
.form-msg.ok{color:var(--red-dark)}

.map-wrap{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);position:relative}
.map-wrap iframe{width:100%;height:420px;border:0;display:block;filter:grayscale(.15)}

/* ---------------------------------------------------------------
   23. CERTIFICATES
   --------------------------------------------------------------- */
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.cert-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:18px;overflow:hidden;transition:transform var(--dur) var(--ease-soft),box-shadow var(--dur);
}
.cert-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.cert-card .cc-media{border-radius:var(--radius);overflow:hidden;background:var(--gray-50)}
.cert-card .cc-media img{width:100%;transition:transform .6s var(--ease)}
.cert-card:hover .cc-media img{transform:scale(1.04)}
.cert-card .cc-label{padding:18px 6px 6px;font-weight:700;font-size:14.5px;text-align:center}

/* ---------------------------------------------------------------
   24. FOOTER
   --------------------------------------------------------------- */
.site-footer{background:var(--ink);color:#C3D2F0;padding-top:90px}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:50px;padding-bottom:60px}
.footer-brand img{height:48px;margin-bottom:22px;filter:brightness(0) invert(1)}
.footer-brand p{font-size:14.5px;line-height:1.8;margin-bottom:24px;color:#A9BCE6}
.footer-socials{display:flex;gap:12px}
.footer-socials a{
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;
  transition:all var(--dur-fast);
}
.footer-socials a:hover{background:var(--red);border-color:var(--red);transform:translateY(-3px)}
.site-footer h4{color:#fff;font-size:16px;margin-bottom:26px;font-family:var(--font-body);font-weight:700;letter-spacing:.02em}
.footer-links a{
  display:flex;align-items:center;gap:8px;color:#C3D2F0;font-size:14.5px;padding:8px 0;
  transition:color var(--dur-fast),gap var(--dur-fast);
}
.footer-links a::before{content:"";width:0;height:1px;background:var(--red);transition:width var(--dur-fast)}
.footer-links a:hover{color:#fff}
.footer-links a:hover::before{width:10px}
.footer-contact li{display:flex;gap:12px;padding:10px 0;font-size:14px;color:#C3D2F0;align-items:flex-start}
.footer-contact li i{color:var(--red-light);margin-top:3px;flex-shrink:0}
.footer-contact a{color:#C3D2F0;transition:color var(--dur-fast)}
.footer-contact a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:26px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:13px}
.footer-bottom a{color:#C3D2F0}
.footer-bottom a:hover{color:var(--red-light)}
.footer-legal{display:flex;gap:24px}
.footer-credit{
  border-top:1px solid rgba(255,255,255,.08);
  padding:16px 0;
  text-align:center;
  font-size:12.5px;
  color:#8FA0C7;
}
.footer-credit a{color:#C3D2F0;font-weight:600;transition:color var(--dur-fast)}
.footer-credit a:hover{color:var(--red-light)}

/* ---------------------------------------------------------------
   25. FLOATING WHATSAPP
   --------------------------------------------------------------- */
.float-wa{
  position:fixed;bottom:28px;right:28px;z-index:900;
  width:58px;height:58px;border-radius:50%;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:28px;
  box-shadow:0 10px 28px rgba(39,58,117,.45);
  animation:wa-pulse 2.4s infinite;
}
.float-wa:hover{background:var(--red-dark);transform:scale(1.08)}
@keyframes wa-pulse{0%,100%{box-shadow:0 10px 28px rgba(39,58,117,.45)}50%{box-shadow:0 10px 36px rgba(39,58,117,.7)}}

/* Back to top */
.back-top{
  position:fixed;bottom:28px;right:96px;z-index:900;
  width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:all var(--dur-fast);
}
.back-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-top:hover{background:var(--red)}

/* ---------------------------------------------------------------
   26. RESPONSIVE — COMPREHENSIVE MOBILE FIX
   All media queries consolidated here. Desktop unchanged.
   --------------------------------------------------------------- */

/* --- Global mobile-safe base overrides (non-breaking) --- */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Product cards: ensure equal height + button always at bottom */
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-card .pc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-card .pc-body p {
  flex: 1;
}
.product-card .pc-more {
  margin-top: auto;
}
.product-card .pc-body h3 {
  min-height: unset;
}

/* Feature cards: equal height */
.feature-card {
  display: flex;
  flex-direction: column;
}
.feature-card p {
  flex: 1;
}

/* Glass cards: equal height */
.glass-card {
  display: flex;
  flex-direction: column;
}
.glass-card p {
  flex: 1;
}

/* Blog cards: equal height */
.blog-card {
  display: flex;
  flex-direction: column;
}
.blog-card .bc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog-card h3 {
  flex: 1;
}

/* Cert cards: equal height */
.cert-card {
  display: flex;
  flex-direction: column;
}
.cert-card .cc-label {
  margin-top: auto;
}

/* Prevent text overflow globally */
h1,h2,h3,h4,h5,p,a,span,li {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* =============================================
   1200px — Laptop (3 columns)
   ============================================= */
@media (max-width:1200px) {
  .product-grid,
  .feature-grid,
  .feature-grid-3,
  .industry-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .masonry {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-top {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
  .footer-top .footer-col.fc-products {
    grid-column: 1 / 3;
  }
  .about-grid {
    gap: 50px;
  }
}

/* =============================================
   992px — Tablet landscape / small laptop
   ============================================= */
@media (max-width:992px) {
  /* Nav */
  .main-nav, .nav-phone { display: none; }
  .hamburger { display: flex; }
  .brand { width: 150px; height: 38px; }
  .brand img { height: 38px; }
  .site-header.is-scrolled .brand img { height: 32px; }
  .nav-cta-group { gap: 10px; }
  .nav-cta-group .btn-sm { padding: 13px 16px; font-size: 12px; }

  /* Section spacing */
  .section { padding: 80px 0; }
  .section-sm { padding: 52px 0; }

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: 50px; }
  .about-media { margin-bottom: 20px; }
  .about-media .frame img { height: 420px; }
  .badge-float { left: 20px; }
  .about-counters { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .about-counters .ac { padding-right: 0; }
  .about-counters .ac:not(:last-child) { border-right: none; }
  .about-counters .ac:nth-child(odd) { border-right: 1px solid var(--border); }

  /* Grids: 2 columns */
  .product-grid,
  .feature-grid,
  .feature-grid-3,
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .masonry { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }

  /* Stats */
  .hero-stats,
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
  .stat-item:not(:last-child)::after { display: none; }
  .stat-item { margin-bottom: 10px; padding: 20px; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }

  /* Topbar */
  .topbar .tb-left span:nth-child(2) { display: none; }

  /* Industry cards height */
  .industry-card { height: 320px; }

  /* CTA strip */
  .cta-strip .container { gap: 28px; }
}

/* =============================================
   768px — Tablet portrait
   ============================================= */
@media (max-width:768px) {
  :root {
    --header-h: 76px;
    --header-h-scrolled: 68px;
    --gutter: 16px;
  }

  /* Section spacing */
  .section { padding: 60px 0; }
  .section-sm { padding: 44px 0; }

  /* Topbar */
  .topbar { display: none; }
  .site-header { padding: 0; }

  /* Nav wrap */
  .nav-wrap { margin-top: 0; height: var(--header-h); }

  /* Hero */
  .hero { min-height: 100svh; }
  .hero h1 { font-size: clamp(28px, 7vw, 40px); max-width: 100%; }
  .hero p.lead { font-size: clamp(15px, 3.5vw, 17px); max-width: 100%; }
  .hero-tag { font-size: 11px; padding: 8px 14px; }
  .hero-cta { flex-wrap: wrap; gap: 12px; margin-bottom: 48px; }
  .hero-dots { display: none; }
  .scroll-indicator { display: none; }
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 0;
    padding-top: 20px;
  }
  .hero-stats .hs {
    padding: 0 12px;
    border-right: none !important;
  }
  .hero-stats .hs:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.14) !important; }

  /* About */
  .about-media .frame img { height: 300px; }
  .badge-float {
    position: relative;
    left: 0; bottom: 0;
    margin-top: 20px;
    min-width: unset;
    width: 100%;
    justify-content: flex-start;
    animation: none;
  }
  .about-media .accent-block { display: none; }

  /* Feature cards: 1 column */
  .feature-card { padding: 30px 24px; }
  .feature-card .fc-icon { width: 52px; height: 52px; font-size: 22px; margin-bottom: 18px; }
  .feature-card h3 { font-size: 17px; }

  /* Product grids: 1 column */
  .product-grid,
  .product-grid.cols-3,
  .feature-grid,
  .feature-grid-3,
  .industry-grid,
  .blog-grid { grid-template-columns: 1fr; }

  /* Product cards: consistent image */
  .product-card .pc-media { height: 220px; }
  .product-card .pc-media img { width: 100%; height: 100%; object-fit: cover; }
  .product-card .pc-body { padding: 20px; }
  .product-card .pc-body h3 { font-size: 17px; }

  /* Industry cards */
  .industry-card { height: 280px; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .stat-item { padding: 28px 16px; }
  .stat-item .si-icon { width: 52px; height: 52px; font-size: 22px; margin-bottom: 16px; }

  /* Masonry */
  .masonry {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 140px;
  }
  .masonry-item.h2 { grid-row: span 2; }

  /* Testimonials */
  .testi-card { padding: 32px 20px; }
  .testi-card .quote { font-size: clamp(16px, 4vw, 20px); }

  /* Blog */
  .blog-card .bc-media { height: 200px; }

  /* Cert grid: 1 column */
  .cert-grid { grid-template-columns: 1fr; }

  /* Contact */
  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: 28px 20px; }
  .map-wrap iframe { height: 300px; }

  /* CTA strip */
  .cta-strip { padding: 60px 0; }
  .cta-strip .container { flex-direction: column; text-align: center; align-items: center; }
  .cta-strip h2 { font-size: clamp(22px, 5vw, 32px); }
  .cta-strip p { max-width: 100%; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal { justify-content: center; flex-wrap: wrap; gap: 16px; }
  .site-footer { padding-top: 60px; }

  /* Section head */
  .section-head { margin-bottom: 40px; }
  .section-head h2 { font-size: clamp(24px, 6vw, 36px); }

  /* Page banner */
  .page-banner { min-height: 260px; }
  .page-banner h1 { font-size: clamp(26px, 6vw, 40px); }

  /* Buttons: comfortable tap targets */
  .btn { padding: 15px 28px; font-size: 13px; }
  .btn-sm { padding: 12px 20px; }

  /* Float buttons */
  .back-top { right: 20px; bottom: 90px; }
  .float-wa { bottom: 20px; right: 20px; width: 52px; height: 52px; font-size: 24px; }

  /* Logo marquee */
  .logo-track { gap: 48px; }
  .logo-track .lg { font-size: 17px; }
}

/* =============================================
   576px — Large mobile
   ============================================= */
@media (max-width:576px) {
  .hero h1 { font-size: clamp(26px, 7.5vw, 36px); }
  .hero-cta { gap: 10px; }

  .product-card .pc-media { height: 200px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item .num { font-size: clamp(28px, 8vw, 42px); }

  .masonry {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 130px;
  }

  .testi-card { padding: 28px 16px; }

  .section-head p { font-size: 15px; }

  .filter-bar { gap: 8px; }
  .filter-btn { padding: 9px 16px; font-size: 12px; }

  .about-counters { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  .blog-card .bc-media { height: 180px; }

  .form-card { padding: 24px 16px; }

  /* Prevent nav CTA btn overflow */
  .nav-cta-group .btn-sm { font-size: 11px; padding: 11px 14px; }
}

/* =============================================
   480px — Small-large mobile
   ============================================= */
@media (max-width:480px) {
  :root { --gutter: 14px; }

  .hero-stats { gap: 16px 0; }
  .hero-stats .hs .num { font-size: clamp(20px, 6vw, 28px); }
  .hero-stats .label { font-size: 11px; }

  .industry-card { height: 260px; }
  .industry-card h3 { font-size: 18px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  .cert-grid { grid-template-columns: 1fr; }

  .footer-socials a { width: 38px; height: 38px; }
}

/* =============================================
   425px — Mobile
   ============================================= */
@media (max-width:425px) {
  /* Hide quote btn to prevent nav overflow */
  .nav-cta-group .btn-sm { display: none; }

  /* Brand */
  .brand { width: 130px; height: 34px; }
  .brand img { height: 34px; }

  /* Hero */
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-cta { flex-direction: column; width: 100%; }
  .hero-cta .btn { width: 100%; justify-content: center; }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr; }

  /* Masonry: 2 equal cols */
  .masonry { grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; }

  /* Filter */
  .filter-bar { gap: 8px; }
  .filter-btn { padding: 9px 14px; font-size: 11px; }

  /* Feature card */
  .feature-card { padding: 26px 20px; }

  /* Product card */
  .product-card .pc-media { height: 190px; }
  .product-card .pc-body { padding: 18px 16px; }

  /* Testi */
  .testi-card { padding: 24px 14px; }
  .testi-card .author { flex-direction: column; text-align: center; }
  .testi-card .a-name, .testi-card .a-role { text-align: center; }

  /* Section head */
  .section-head { margin-bottom: 32px; }

  /* Footer */
  .footer-brand img { height: 38px; }

  /* About badge */
  .badge-float { padding: 18px 20px; gap: 12px; }
  .badge-float .bf-num { font-size: 32px; }

  /* Page banner */
  .page-banner { min-height: 220px; }

  /* Map */
  .map-wrap iframe { height: 260px; }
}

/* =============================================
   390px — iPhone 14 Pro
   ============================================= */
@media (max-width:390px) {
  :root { --gutter: 12px; }

  .hero h1 { font-size: clamp(24px, 8vw, 32px); }
  .hero p.lead { font-size: 14px; }
  .hero-tag { font-size: 10.5px; letter-spacing: .1em; }

  .section { padding: 50px 0; }

  .product-card .pc-media { height: 180px; }

  .feature-card h3 { font-size: 16px; }

  .testi-card .quote { font-size: clamp(15px, 4.5vw, 18px); }

  .stat-item .si-icon { width: 46px; height: 46px; font-size: 20px; }

  .btn { padding: 14px 24px; font-size: 12.5px; }
}

/* =============================================
   375px — iPhone SE / standard
   ============================================= */
@media (max-width:375px) {
  :root { --gutter: 12px; }

  .hero-cta { flex-direction: column; width: 100%; }
  .hero-cta .btn { width: 100%; justify-content: center; }

  .hero h1 { font-size: clamp(22px, 8vw, 30px); }

  .masonry { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .masonry-item { height: 200px; }
  .masonry-item.h2 { height: 200px; grid-row: span 1; }

  .about-counters { grid-template-columns: 1fr 1fr; }

  .footer-legal { flex-direction: column; gap: 10px; }

  .form-card { padding: 20px 14px; }
}

/* =============================================
   360px — Android standard
   ============================================= */
@media (max-width:360px) {
  .hero h1 { font-size: clamp(20px, 8vw, 28px); }
  .hero-tag { display: none; }

  .section { padding: 44px 0; }

  .nav-cta-group .btn-sm { display: none; }

  .product-card .pc-media { height: 170px; }
  .product-card .pc-body h3 { font-size: 15px; }

  .btn { padding: 13px 20px; font-size: 12px; }
  .section-head h2 { font-size: clamp(20px, 7vw, 28px); }
}

/* =============================================
   320px — Minimum support
   ============================================= */
@media (max-width:320px) {
  :root { --gutter: 10px; }

  .hero h1 { font-size: 20px; line-height: 1.25; }
  .hero p.lead { font-size: 13px; }

  .brand { width: 110px; height: 30px; }
  .brand img { height: 30px; }

  .section { padding: 40px 0; }

  .btn { width: 100%; justify-content: center; padding: 13px 18px; font-size: 12px; }

  .product-card .pc-media { height: 160px; }
  .product-card .pc-body { padding: 14px 12px; }
  .product-card .pc-body h3 { font-size: 14px; }

  .feature-card { padding: 22px 16px; }
  .feature-card .fc-icon { width: 46px; height: 46px; font-size: 20px; }

  .testi-card { padding: 20px 12px; }
  .testi-card .quote { font-size: 15px; }

  .form-card { padding: 18px 12px; }
  .footer-socials a { width: 36px; height: 36px; font-size: 12px; }

  .float-wa { width: 46px; height: 46px; font-size: 20px; right: 12px; bottom: 12px; }
  .back-top { right: 12px; bottom: 72px; width: 40px; height: 40px; }
}

/* ---------------------------------------------------------------
   17. CATALOGUE SECTION (Products page)
   --------------------------------------------------------------- */
.catalogue-section{padding:90px 0}
.catalogue-card{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:52px 56px;
}
.catalogue-card::before{
  content:"";position:absolute;top:-70px;right:-70px;width:240px;height:240px;
  background:var(--red-light);border-radius:50%;opacity:.55;z-index:0;
}
.catalogue-card::after{
  content:"";position:absolute;bottom:-90px;left:-40px;width:180px;height:180px;
  background:var(--gray-50);border-radius:50%;z-index:0;
}
.catalogue-info{position:relative;z-index:1;max-width:600px}
.catalogue-icon{
  width:60px;height:60px;border-radius:14px;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:20px;
  box-shadow:var(--shadow-red);
}
.catalogue-info h3{font-size:26px;line-height:1.3;margin-bottom:12px;color:var(--ink)}
.catalogue-info p{color:var(--text-muted);font-size:15.5px;line-height:1.7}
.catalogue-actions{position:relative;z-index:1;display:flex;gap:16px;flex-shrink:0}
.catalogue-actions .btn,
.catalogue-actions .btn-outline-dark{white-space:nowrap}
@media (max-width:900px){
  .catalogue-card{flex-direction:column;text-align:center;padding:40px 28px}
  .catalogue-info{max-width:100%}
  .catalogue-icon{margin-left:auto;margin-right:auto}
  .catalogue-actions{flex-direction:column;width:100%}
  .catalogue-actions .btn,
  .catalogue-actions .btn-outline-dark{width:100%;justify-content:center}
}

/* ---------------------------------------------------------------
   18. MOBILE PRODUCT SLIDER (swipeable, <768px only)
   --------------------------------------------------------------- */
.pg-dots{display:none}
@media (max-width:768px){
  .product-grid{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:16px;
    padding:4px 4px 10px;
    margin:0 -4px;
    scrollbar-width:none;
  }
  .product-grid::-webkit-scrollbar{display:none}
  .product-grid > .product-card{
    scroll-snap-align:center;
    flex:0 0 84%;
    min-width:84%;
  }
  .pg-dots{
    display:flex;justify-content:center;align-items:center;gap:8px;margin-top:20px;
  }
  .pg-dots button{
    width:8px;height:8px;padding:0;border-radius:50%;border:none;background:var(--gray-300);
    transition:all var(--dur-fast);
  }
  .pg-dots button.active{background:var(--red);width:24px;border-radius:5px}
}

/* ---------------------------------------------------------------
   19. LEGAL PAGES (Privacy Policy / Terms of Use)
   --------------------------------------------------------------- */
.legal-wrap{max-width:900px;margin:0 auto}
.legal-updated{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.04em;
  color:var(--red);background:var(--red-light);padding:6px 16px;border-radius:100px;margin-bottom:28px;
}
.legal-content > p{color:var(--text-muted);font-size:15.5px;line-height:1.8;margin-bottom:20px}
.legal-content h2{
  font-size:23px;color:var(--ink);margin:44px 0 16px;
  display:flex;align-items:center;gap:12px;
}
.legal-content h2 .lc-num{
  width:34px;height:34px;flex-shrink:0;border-radius:9px;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-family:var(--font-display);font-weight:800;
}
.legal-content ul{margin:0 0 20px;padding:0;list-style:none}
.legal-content ul li{
  position:relative;padding-left:26px;margin-bottom:12px;
  color:var(--text-muted);font-size:15px;line-height:1.7;
}
.legal-content ul li::before{
  content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;left:0;top:2px;color:var(--red);font-size:13px;
}
.legal-content strong{color:var(--ink)}
.legal-content a{color:var(--red);font-weight:600;text-decoration:underline}
.legal-contact-box{
  margin-top:40px;padding:28px 32px;background:var(--bg-alt);border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.legal-contact-box h3{font-size:18px;color:var(--ink);margin-bottom:14px}
.legal-contact-box ul{list-style:none;padding:0;margin:0}
.legal-contact-box li{
  display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:14.5px;margin-bottom:10px;
}
.legal-contact-box li i{color:var(--red);width:18px}
.legal-contact-box li:last-child{margin-bottom:0}
@media (max-width:576px){
  .legal-content h2{font-size:19px}
  .legal-contact-box{padding:22px 20px}
}

/* ==========================================================
   CATALOGUE ENHANCEMENTS — search, listing toolbar, product
   detail page, related products, no-results state
   ========================================================== */

/* -- nav search icon -- */
.nav-search-btn{
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--ink);background:var(--gray-50);border:1px solid var(--border);flex-shrink:0;
  transition:all var(--dur-fast) var(--ease-soft);text-decoration:none;
}
.nav-search-btn:hover{background:var(--red);color:#fff;border-color:var(--red)}
.mm-search-link{
  display:flex;align-items:center;gap:10px;color:#fff;font-weight:600;font-size:15px;
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:10px;text-decoration:none;
}
.mm-search-link i{color:var(--red-light)}

/* -- listing toolbar (count / search / sort) -- */
.cat-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:32px;padding:18px 22px;background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-lg);
}
.cat-toolbar .cat-count{font-weight:700;color:var(--ink);font-size:15px;white-space:nowrap}
.cat-toolbar .cat-controls{display:flex;gap:12px;flex-wrap:wrap;flex:1;justify-content:flex-end}
.cat-search-box{
  position:relative;min-width:220px;flex:1;max-width:320px;
}
.cat-search-box i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--gray-500);font-size:14px}
.cat-search-box input{
  width:100%;padding:10px 14px 10px 38px;border-radius:100px;border:1px solid var(--border);
  font-family:var(--font-body);font-size:14px;background:#fff;color:var(--text);
}
.cat-search-box input:focus{outline:none;border-color:var(--red)}
.cat-sort select{
  padding:10px 16px;border-radius:100px;border:1px solid var(--border);background:#fff;color:var(--text);
  font-family:var(--font-body);font-size:14px;cursor:pointer;
}
.cat-sort select:focus{outline:none;border-color:var(--red)}

/* -- product card add-ons -- */
.pc-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.pc-actions .pc-more{margin-bottom:0}
.pc-enquire{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--gray-50);color:var(--ink);border:1px solid var(--border);text-decoration:none;
  transition:all var(--dur-fast) var(--ease-soft);
}
.pc-enquire:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* -- no results state -- */
.no-results{
  grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--text-muted);
}
.no-results i{font-size:44px;color:var(--gray-300);margin-bottom:18px}
.no-results h3{color:var(--ink);font-size:22px;margin-bottom:10px}
.no-results p{max-width:420px;margin:0 auto 22px;font-size:15px}

/* -- search page -- */
.search-hero{
  padding:70px 0 40px;background:linear-gradient(120deg,rgba(15,23,66,.94),rgba(30,58,138,.86)),url('../assets/img/normal/abt.jpg');
  background-size:cover;background-position:center;text-align:center;
}
.search-hero h1{color:#fff;font-size:clamp(28px,4vw,42px);margin-bottom:18px}
.search-hero .search-box-lg{
  max-width:640px;margin:0 auto;position:relative;
}
.search-hero .search-box-lg i{position:absolute;left:22px;top:50%;transform:translateY(-50%);color:var(--gray-500);font-size:18px}
.search-hero .search-box-lg input{
  width:100%;padding:20px 24px 20px 56px;border-radius:100px;border:none;font-size:16px;
  font-family:var(--font-body);box-shadow:var(--shadow-lg);
}
.search-hero .search-box-lg input:focus{outline:3px solid var(--red-light)}
.search-stats{color:var(--text-muted);font-size:14px;margin:22px 0 0;text-align:center;padding:0 20px}
.search-results-wrap{padding-top:40px}

/* -- product detail page -- */
.pd-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:flex-start}
.pd-gallery{position:sticky;top:110px}
.pd-main-media{
  border-radius:var(--radius-lg);overflow:hidden;background:var(--gray-50);border:1px solid var(--border);
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative;
}
.pd-main-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease-soft);cursor:zoom-in}
.pd-main-media:hover img{transform:scale(1.08)}
.pd-thumbs{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.pd-thumb{
  width:76px;height:76px;border-radius:10px;overflow:hidden;border:2px solid var(--border);padding:0;cursor:pointer;
  background:var(--gray-50);
}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-thumb.active{border-color:var(--red)}
.pd-tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.pd-cat-tag{
  display:inline-flex;align-items:center;gap:8px;background:var(--red-light);color:var(--red-dark);
  font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;padding:7px 16px;border-radius:100px;margin-bottom:0;
}
.pd-series-tag{
  display:inline-flex;align-items:center;gap:8px;background:var(--gray-50);color:var(--steel);border:1px solid var(--border);
  font-weight:700;font-size:12.5px;letter-spacing:.03em;padding:7px 16px;border-radius:100px;
}
.pd-full-desc{
  background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 24px;margin-bottom:26px;
}
.pd-full-desc h4{font-size:14.5px;color:var(--ink);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.pd-full-desc p{font-size:15px;color:var(--text-muted);line-height:1.8;margin:0}
.pd-block-heading{font-size:14.5px;color:var(--ink);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.pd-extra-block{margin-bottom:24px}

/* -- ordering reference / technical spec data tables -- */
.pd-data-heading{
  font-size:22px;color:var(--ink);margin-bottom:22px;display:flex;align-items:center;gap:10px;
}
#pdOrderingWrap{margin-bottom:40px}
.pd-table-block{margin-bottom:22px}
.pd-table-block h5{font-size:14px;color:var(--steel);font-weight:700;margin-bottom:10px;text-transform:uppercase;letter-spacing:.03em}
.pd-table-scroll{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border);background:#fff}
.pd-data-table{width:100%;border-collapse:collapse;font-size:13.5px;white-space:nowrap}
.pd-data-table thead th{
  background:var(--ink);color:#fff;text-align:left;padding:11px 16px;font-weight:700;font-size:12.5px;
  letter-spacing:.03em;text-transform:uppercase;position:sticky;top:0;
}
.pd-data-table tbody td{padding:10px 16px;border-top:1px solid var(--border);color:var(--text-muted)}
.pd-data-table tbody tr:nth-child(odd){background:var(--bg-alt)}
.pd-data-table tbody tr:hover{background:var(--red-light)}
/* sub-section header rows (e.g. "FOR 22 kV (Kit Code)") inside a merged table */
.pd-data-table tbody tr.pd-subhead-row{background:var(--ink) !important}
.pd-data-table tbody tr.pd-subhead-row td{color:#fff;font-weight:700;letter-spacing:.02em}
.pd-enquire-link{
  display:inline-flex;align-items:center;gap:6px;color:var(--red);font-weight:700;text-decoration:none;
  transition:color var(--dur-fast) var(--ease-soft);
}
.pd-enquire-link:hover{color:var(--red-dark);text-decoration:underline}
.pd-enquire-link .ri{font-size:11px}
.pd-title{font-size:clamp(26px,3.4vw,36px);color:var(--ink);margin-bottom:16px;line-height:1.25}
.pd-short-desc{font-size:16.5px;color:var(--text-muted);line-height:1.75;margin-bottom:26px}
.pd-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px}
.pd-features{list-style:none;padding:0;margin:0 0 30px}
.pd-features li{
  display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px dashed var(--border);
  font-size:14.5px;color:var(--text-muted);
}
.pd-features li:last-child{border-bottom:none}
.pd-features li i{color:var(--red);margin-top:3px}
.pd-category-box{
  background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 24px;margin-bottom:10px;
}
.pd-category-box h4{font-size:15px;color:var(--ink);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.pd-category-box p{font-size:14px;color:var(--text-muted);line-height:1.7;margin:0}
@media (max-width:900px){
  .pd-wrap{grid-template-columns:1fr;gap:32px}
  .pd-gallery{position:static}
}

/* ==========================================================
   NAVBAR REDESIGN — clean always-white bar, logo left, links
   right with red underline active state, solid pill CTA button.
   Overrides the older transparent-on-load header behaviour.
   ========================================================== */
.site-header{
  position:sticky !important;
  top:0 !important;
  background:#fff !important;
  box-shadow:0 2px 18px rgba(15,23,42,.07);
  padding:0 !important;
  border-bottom:1px solid var(--border);
}
.site-header::before{content:none !important}
.nav-wrap{margin-top:0 !important;height:84px !important}
.site-header.is-scrolled .nav-wrap{height:70px !important}
/* Header is sticky (in normal flow) now, not a floating overlay, so the old
   fixed-header offset hacks on hero/page-banner are no longer needed. */
.hero-content{padding-top:0 !important}
.page-banner{padding-top:40px !important}

.brand::before{content:none !important}
.brand img{opacity:1 !important;height:34px !important}
.brand img.logo-light{display:none}
.brand img.logo-dark{opacity:1 !important}
.brand-text,
.site-header.is-scrolled .brand-text{color:var(--ink) !important}
.brand-text span,
.site-header.is-scrolled .brand-text span{color:var(--red) !important}

.main-nav>li>a,
.site-header.is-scrolled .main-nav>li>a{
  color:var(--charcoal) !important;
  text-shadow:none !important;
  font-family:var(--font-display);
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:10px 18px;
}
.main-nav>li>a::after{left:18px;right:18px;bottom:0}
.main-nav>li>a:hover,
.main-nav>li>a.active,
.site-header.is-scrolled .main-nav>li>a:hover,
.site-header.is-scrolled .main-nav>li>a.active,
.site-header:not(.is-scrolled) .main-nav>li>a:hover,
.site-header:not(.is-scrolled) .main-nav>li>a.active{
  color:var(--red) !important;
  text-shadow:none !important;
}

.nav-phone{display:none}
.nav-cta-group{gap:12px}
.nav-search-btn{
  width:42px;height:42px;background:var(--gray-50);border-color:var(--border);
}
.btn.btn-sm{
  padding:13px 30px;
  border-radius:100px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:var(--red);
  color:#fff;
  box-shadow:0 8px 18px -6px rgba(39,58,117,.55);
}
.btn.btn-sm:hover{background:var(--red-dark)}
.hamburger,
.site-header.is-scrolled .hamburger{background:var(--gray-50)}
.hamburger .bar,
.site-header.is-scrolled .hamburger .bar{background:var(--ink) !important}

/* page content sits below the now-static (non-fixed-overlay-feel) header;
   keep existing offset so banners/hero aren't hidden underneath it */
@media (max-width:991px){
  .nav-wrap{height:70px !important}
}

/* ==========================================================
   PROMO BANNERS (homepage) — the two ready-made marketing
   banners supplied by the client, shown full-width, linking
   into the matching product category.
   ========================================================== */
.promo-banners-section{padding-top:0}
.promo-banners{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.promo-banner{
  display:block;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);position:relative;
  transition:transform var(--dur) var(--ease-soft),box-shadow var(--dur);
}
.promo-banner:hover{transform:translateY(-6px);box-shadow:0 30px 60px -20px rgba(15,23,42,.35)}
.promo-banner img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .promo-banners{grid-template-columns:1fr}
}

/* ==========================================================
   RESPONSIVE HERO / BANNER FIX
   The hero now shows full marketing banner images (with their
   own baked-in text) instead of a text overlay on a full-height
   photo. A 100vh container + background-size:cover was zooming
   and cropping these wide banners badly, especially on mobile
   portrait screens. Fixed height is now proportional to the
   viewport width (not height) and the full banner is always
   shown uncropped (contain), on every screen size.
   ========================================================== */
.hero{
  min-height:0 !important;
  height:clamp(200px, 42vw, 600px) !important;
}
.hero-slide{
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-color:var(--ink) !important;
}
.hero::before{content:none !important}
.hero::after{content:none !important}
.scroll-indicator{display:none !important}
.hero-dots{right:16px}
@media (max-width:768px){
  .hero{height:clamp(160px, 55vw, 340px) !important}
  .hero-dots{display:none !important}
}

/* Restore the original safe mobile-nav behaviour: hide the pill CTA
   for the whole mobile/tablet range (hamburger breakpoint and below)
   so logo + hamburger never get crowded. Search icon has been removed
   entirely (desktop and mobile). */
@media (max-width:992px){
  .nav-cta-group .btn-sm{display:none !important}
}

/* ==========================================================
   FINAL RESPONSIVE PASS — product detail page, category
   toolbar/search, data tables, search page, footer credit.
   These sections were added after the original breakpoint
   system, so they get their own explicit mobile hardening here.
   ========================================================== */

/* -- category listing toolbar (search + sort) -- */
@media (max-width:700px){
  .cat-toolbar{flex-direction:column;align-items:stretch;padding:16px}
  .cat-toolbar .cat-controls{justify-content:stretch}
  .cat-search-box{min-width:0;max-width:none;flex:1 1 100%}
  .cat-sort{flex:1 1 100%}
  .cat-sort select{width:100%}
}

/* -- product detail page -- */
@media (max-width:576px){
  .pd-title{font-size:clamp(22px,6vw,28px)}
  .pd-short-desc{font-size:15px}
  .pd-cta-row{flex-direction:column;align-items:stretch}
  .pd-cta-row .btn,
  .pd-cta-row .btn-outline-dark{width:100%;justify-content:center}
  .pd-full-desc,
  .pd-category-box{padding:18px}
  .pd-tag-row{gap:8px}
  .pd-cat-tag,
  .pd-series-tag{font-size:11.5px;padding:6px 12px}
  .pd-thumbs{gap:8px}
  .pd-thumb{width:62px;height:62px}
}

/* -- ordering reference / technical spec tables -- */
@media (max-width:576px){
  .pd-data-heading{font-size:19px;margin-bottom:16px}
  .pd-data-table{font-size:12.5px}
  .pd-data-table thead th{padding:9px 12px}
  .pd-data-table tbody td{padding:8px 12px}
  #pdDataSection{padding-bottom:36px}
}

/* -- search page -- */
@media (max-width:576px){
  .search-hero{padding:48px 0 30px}
  .search-hero .search-box-lg input{padding:16px 20px 16px 48px;font-size:14px}
  .search-hero .search-box-lg i{left:18px;font-size:16px}
}

/* -- footer credit line -- */
@media (max-width:480px){
  .footer-credit{font-size:11.5px;padding:14px 16px;line-height:1.6}
}

/* -- narrow phones (<=360px): tighten hero/hamburger/logo spacing so
   nothing crowds the header, consistent with the rest of the site's
   360px/320px rules above -- */
@media (max-width:360px){
  .brand img{height:32px !important}
  .nav-search-btn,
  .hamburger{width:40px;height:40px}
  .hero{height:clamp(140px, 58vw, 300px) !important}
}