/* ===========================================================
   MS TECH SCIENTIFIC — Homepage Stylesheet
   Design language: precision instrumentation.
   Deep teal ink + steel gray + calibration-amber accent.
   Mono face used for data/metrics to read like an instrument readout.
=========================================================== */

:root{
  /* --- Color tokens --- */
  --ink:        #0B2E33;   /* deep teal-black, primary text/dark surfaces */
  --ink-2:      #123B41;   /* slightly lighter dark surface */
  --paper:      #F6F7F5;   /* off-white background */
  --paper-2:    #FFFFFF;
  --steel:      #5B6B6C;   /* muted gray-teal for secondary text */
  --steel-line: #DCE2E1;   /* hairline borders */
  --amber:      #1656A5;   /* primary brand accent — Bright Royal Blue */
  --amber-dark: #103F73;   /* darker shade for hover/pressed states */
  --data-blue:  #0E81C8;   /* secondary accent for links/data — Cool Cornflower Blue */
  --success:    #3D8361;

  /* --- Type --- */
  --font-display: 'Space Grotesk', 'Archivo', sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* --- Layout --- */
  --maxw: 1240px;
  --nav-h: 148px;
  --radius: 3px;
  --shadow-sm: 0 1px 3px rgba(11,46,51,0.08);
  --shadow-md: 0 8px 24px rgba(11,46,51,0.10);
  --shadow-lg: 0 20px 48px rgba(11,46,51,0.16);
}

*{ box-sizing: border-box; margin:0; padding:0; }

html{ scroll-behavior: smooth; overflow-x: clip; }
body{ overflow-x: clip; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-dark);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 14px;
}
.eyebrow::before{
  content:"";
  width: 22px;
  height: 1px;
  background: var(--amber);
}

.section-head{
  max-width: 620px;
  margin-bottom: 44px;
}
.section-head h2{
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 12px;
}
.section-head p{ color: var(--steel); font-size: 16px; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 13px 26px;
  border-radius: var(--radius);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary{
  background: var(--amber);
  color: #fff;
}
.btn-primary:hover{ background: var(--amber-dark); color:#fff; box-shadow: var(--shadow-md); }
.btn-outline{
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
}
.btn-outline:hover{ background: rgba(255,255,255,0.12); }
.btn-ghost{
  border: 1px solid var(--steel-line);
  color: var(--ink);
}
.btn-ghost:hover{ border-color: var(--ink); }

.skip-link{
  position:absolute; left:-999px; top:0;
  background: var(--ink); color:#fff; padding: 10px 16px; z-index: 999;
}
.skip-link:focus{ left: 16px; top: 16px; }

:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ===========================================================
   MAIN NAV — single row
=========================================================== */
.site-header{
  position: sticky; top:0; z-index: 500;
  background: linear-gradient(180deg, #ffffff 0%, #fdfdfc 60%, #fbfbfa 100%);
  border-bottom: 1px solid var(--steel-line);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 6px 20px rgba(11,46,51,0.05);
}
.wrap.navbar{
  max-width: none;
  padding: 0 22px;
}
.navbar{
  display:flex; align-items:center; justify-content: space-between;
  height: var(--nav-h);
  gap: 16px;
}
.logo{ display:flex; align-items:center; gap:14px; flex-shrink:0; margin-right: 10px; }
.logo-img{
  width:120px; height:120px; object-fit:contain; flex-shrink:0;
  display:block;
}
.logo-text{ font-family: var(--font-display); line-height:1.15; }
.logo-text strong{ display:block; font-size:26px; font-weight:800; letter-spacing:-0.01em; color: var(--ink); white-space:nowrap; }
.logo-text span{ display:block; font-family: var(--font-mono); font-size:11px; letter-spacing:0.13em; color: var(--steel); text-transform:uppercase; margin-top:4px; }

.main-nav{ display:flex; align-items:center; gap:50px; flex-wrap:nowrap; }
.main-nav > li{ position:relative; }
.main-nav > li > a{
  display:flex; align-items:center; gap:5px;
  padding: 10px 6px;
  font-size:14.5px; font-weight:800; letter-spacing:0.01em;
  color: var(--ink);
  position:relative;
  border-radius: 18px;
  white-space:nowrap;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.main-nav > li > a svg{ width:9px; height:9px; fill: var(--steel); transition: transform .18s ease; }
.main-nav > li:hover > a{
  background: linear-gradient(180deg, #ffffff 0%, var(--paper) 100%);
  box-shadow: 0 2px 8px rgba(11,46,51,0.10), 0 1px 0 rgba(255,255,255,0.9) inset;
  transform: translateY(-1px);
}
.main-nav > li.active > a{
  background: linear-gradient(180deg, #6C9FCE 0%, var(--amber) 55%, var(--amber-dark) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(22,86,165,0.45), 0 1px 0 rgba(255,255,255,0.3) inset;
}
.main-nav > li.active > a svg{ fill: #fff; }
.main-nav > li:hover > a svg{ transform: rotate(180deg); }

.dropdown{
  position:absolute; top: calc(100% + 10px); left:0; transform: translateY(6px);
  background:#fff; box-shadow: 0 24px 60px rgba(11,46,51,0.14), 0 4px 16px rgba(11,46,51,0.08);
  border-radius: 14px;
  min-width: 300px; padding: 14px 6px;
  opacity:0; visibility:hidden;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.main-nav > li:hover .dropdown{ opacity:1; visibility:visible; transform: translateY(0); }
.dropdown a{
  display:block; padding: 12px 18px; font-size:14.5px; font-weight:500; border-radius:8px; color: var(--ink);
  transition: background .16s ease, color .16s ease, padding-left .16s ease;
}
.dropdown a:hover{ background: var(--paper); color: var(--amber-dark); padding-left:22px; }

.nav-cta{ display:flex; align-items:center; gap:6px; flex-shrink:0; }

.icon-btn{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--steel-line);
  display:flex; align-items:center; justify-content:center; color: var(--ink);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.icon-btn:hover{ background: var(--ink); border-color: var(--ink); color:#fff; }
.icon-btn svg{ width:14px; height:14px; }

.search-panel{
  max-height:0; overflow:hidden; background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: max-height .25s ease, border-color .25s ease;
}
.search-panel.open{ max-height: 76px; border-color: var(--steel-line); }
.search-panel .wrap{ display:flex; align-items:center; gap:14px; padding: 16px 32px; }
.search-panel input{
  flex:1; border:none; background:none; font-family: var(--font-body); font-size:16px; color: var(--ink);
}
.search-panel input:focus{ outline:none; }
.search-close{ font-size:22px; color: var(--steel); line-height:1; width:28px; height:28px; }
.search-close:hover{ color: var(--ink); }

/* -----------------------------------------------------------
   GOOGLE TRANSLATE — hide Google's own banner/toolbar and text-
   highlight styling. We use our own .lang-switch dropdown as the
   only visible control; Google Translate just does the translating
   in the background. Nothing to copy — this is in the one shared
   style.css every page already links to.
----------------------------------------------------------- */
.goog-te-banner-frame.skiptranslate{ display:none !important; }
body{ top:0 !important; }
.goog-text-highlight{ background:none !important; box-shadow:none !important; }
#google_translate_element{ display:none !important; }

/* -----------------------------------------------------------
   LANGUAGE SWITCHER — styles for the "English / हिंदी / తెలుగు /
   தமிழ் / മലയാളം" dropdown in the header. This CSS lives only in
   this one style.css file, which every page already links to
   (<link rel="stylesheet" href="style.css">) — so nothing needs
   to be copied here. When adding/removing a language, you only
   ever need to edit the <div class="lang-switch"> HTML block in
   each page's <header>, not this CSS.
----------------------------------------------------------- */
.lang-switch{ position:relative; }
.lang-switch-btn{
  color: var(--ink);
  display:flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:600;
  padding: 7px 9px; border:1px solid var(--steel-line); border-radius:18px;
  transition: border-color .18s ease;
}
.lang-switch-btn:hover{ border-color: var(--ink); }
.lang-switch-btn svg{ width:8px; height:8px; fill:currentColor; transition: transform .18s ease; }
.lang-switch.open .lang-switch-btn svg{ transform: rotate(180deg); }
.lang-menu{
  position:absolute; top: 42px; right:0;
  background:#fff; color:var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 170px;
  padding: 6px;
  opacity:0; visibility:hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 200;
}
.lang-switch.open .lang-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-menu button{
  display:flex; width:100%; align-items:center; gap:8px;
  padding:9px 10px; font-size:13.5px; border-radius:2px; text-align:left;
}
.lang-menu button:hover{ background: var(--paper); }
.lang-menu button[aria-selected="true"]{ color: var(--amber-dark); font-weight:600; }
.flag{ width:16px; height:11px; border-radius:1px; flex-shrink:0; }

.nav-toggle{
  display:none; width:40px; height:40px; border-radius:4px;
  align-items:center; justify-content:center; border:1px solid var(--steel-line);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:18px; height:2px; background: var(--ink); position:relative; transition: all .2s ease;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

/* ===========================================================
   STICKY SOCIAL RAIL + WHATSAPP FAB
   position:fixed keeps these anchored to the viewport, so they
   travel with the user as they scroll (not just the top of page).
=========================================================== */
.social-rail{
  position: fixed; z-index: 400;
  right: 20px; top: 50%; transform: translateY(-50%);
  display:flex; flex-direction:column; gap:12px;
}
.social-rail-btn{
  width:42px; height:42px; border-radius:50%;
  background: var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-md);
  transition: background .18s ease, transform .18s ease;
}
.social-rail-btn:hover{ background: var(--amber); transform: translateX(-3px); }
.social-rail-btn svg{ width:18px; height:18px; fill:#fff; }

.whatsapp-fab{
  position: fixed; z-index: 400;
  right: 20px; bottom: 90px;   /* was 24px — raised clear of Tawk's bubble */
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 20px rgba(37,211,102,0.45);
  animation: whatsappPulse 2.4s ease-in-out infinite;
  transition: transform .18s ease;
}
.whatsapp-fab:hover{ transform: scale(1.08); }
.whatsapp-fab svg{ width:28px; height:28px; fill:#fff; }
@keyframes whatsappPulse{
  0%, 100% { box-shadow: 0 6px 20px rgba(37,211,102,0.45); }
  50% { box-shadow: 0 6px 26px rgba(37,211,102,0.75), 0 0 0 6px rgba(37,211,102,0.12); }
}
@media (prefers-reduced-motion: reduce){ .whatsapp-fab{ animation:none; } }

/* ===========================================================
   MOBILE BOTTOM CTA BAR — Call / WhatsApp / Mail
   Desktop: hidden. Mobile: fixed at the very bottom of the screen.
=========================================================== */
.mobile-cta-bar{
  display:none;
  position: fixed; left:0; right:0; bottom:0; z-index: 450;
  background: var(--ink);
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -6px 20px rgba(11,46,51,0.25);
}
.mobile-cta-item{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding: 10px 4px 12px;
  color: rgba(255,255,255,0.85);
  font-size:11px; font-weight:600; letter-spacing:0.02em;
  border-right: 1px solid rgba(255,255,255,0.08);
  transition: background .18s ease, color .18s ease;
}
.mobile-cta-item:last-child{ border-right:none; }
.mobile-cta-item svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; }
.mobile-cta-item:active{ background: rgba(255,255,255,0.06); }
.mobile-cta-whatsapp{ color:#4ADE80; }
.mobile-cta-whatsapp svg{ fill:#4ADE80; stroke:none; }

/* Mobile-only social strip — replaces the left-side floating rail on small screens */
.mobile-social-strip{
  display:none;
}
@media (max-width: 860px){
  .mobile-social-strip{
    display:flex; justify-content:center; gap:16px;
    padding: 8px 0;
    background: var(--ink);
  }
  .mobile-social-strip a{
    width:30px; height:30px; border-radius:50%;
    background: rgba(255,255,255,0.1);
    display:flex; align-items:center; justify-content:center;
    transition: background .18s ease;
  }
  .mobile-social-strip a:hover{ background: var(--amber); }
  .mobile-social-strip svg{ width:14px; height:14px; fill:#fff; }

  /* Left-side floating rail and standalone WhatsApp button are removed
     on mobile — social icons live in the strip above, WhatsApp lives
     in the bottom CTA bar, so nothing is duplicated. */
  .social-rail, .whatsapp-fab{ display:none; }
}

@media (max-width: 1180px){
  .social-rail{ right: 12px; }
  .social-rail-btn{ width:36px; height:36px; }
  .social-rail-btn svg{ width:15px; height:15px; }
}
@media (max-width: 860px){
  .mobile-cta-bar{ display:flex; }
  body{ padding-bottom: 62px; } /* keep content clear of the fixed CTA bar */

  /* NOTE: Tawk positioning is handled entirely via Tawk_API.customStyle
     in index.html (the officially supported method), not CSS here.
     A CSS !important override was tried previously but removed — Tawk's
     own script re-applies inline styles on load/resize, and fighting it
     with a static CSS !important rule likely caused the widget to
     flicker/vanish a couple seconds after page load (two systems
     racing to control the same element on different timers). */
}


/* ===========================================================
   HERO — fills the viewport, zoom-out only
=========================================================== */
.hero{
  position:relative;
  height: calc(100vh - var(--nav-h));
  min-height: 460px;
  max-height: 900px;
  overflow:hidden;
  background: var(--paper-2);
}
.hero-slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition: opacity 1s ease;
  overflow: hidden;
}
.hero-slide.active{ opacity:1; visibility:visible; z-index:2; }
.hero-slide-blur{
  position:absolute; inset:0;
  background-size: cover; background-position:center;
  transform: scale(1.15);
  filter: blur(50px) brightness(0.55) saturate(1.15);
}
.hero-slide-bg{
  position:absolute; inset:0;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  transform: scale(1.18);
  background-color: var(--paper);
}
@media (max-width: 860px){
  /* On narrow/tall mobile screens, "contain" leaves large empty gaps
     above/below a wide landscape photo, so we fill the frame instead.
     Anchored left (not center) because the headline text sits near the
     left edge of these photos — centering was cropping it off both
     sides at once. Left-anchoring keeps the full headline in frame,
     at the cost of cropping more of the equipment imagery on the right. */
  .hero-slide-bg{ background-size: cover; background-position: left 30%; }
}
/* Zoom-out only: starts scaled in, settles down to natural size, then holds. No zoom-in leg. */
.hero-slide.active .hero-slide-bg{
  animation: heroZoomOut 8s ease-out forwards;
}
@keyframes heroZoomOut{
  0%   { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .hero-slide-bg{ animation: none; transform: scale(1); }
}
.hero-slide[data-bg="1"] .hero-slide-bg,
.hero-slide[data-bg="1"] .hero-slide-blur{ background-image: url('images/1.avif'); }
.hero-slide[data-bg="2"] .hero-slide-bg,
.hero-slide[data-bg="2"] .hero-slide-blur{ background-image: url('images/2.avif'); }
.hero-slide[data-bg="3"] .hero-slide-bg,
.hero-slide[data-bg="3"] .hero-slide-blur{ background-image: url('images/3.avif'); }

/* OPTIONAL — best-quality mobile fix. If you have a designer crop
   portrait-friendly versions of each hero photo (e.g. via Photoshop/
   Canva, focusing on the subject rather than a wide landscape crop),
   drop them in as images/1.avif etc and uncomment these three
   lines. They'll override the desktop image ONLY under 860px width,
   so nothing important gets cropped out automatically anymore.

@media (max-width: 860px){
  .hero-slide[data-bg="1"] .hero-slide-bg,
  .hero-slide[data-bg="1"] .hero-slide-blur{ background-image: url('images/1.avif'); }
  .hero-slide[data-bg="2"] .hero-slide-bg,
  .hero-slide[data-bg="2"] .hero-slide-blur{ background-image: url('images/2.avif'); }
  .hero-slide[data-bg="3"] .hero-slide-bg,
  .hero-slide[data-bg="3"] .hero-slide-blur{ background-image: url('images/3.avif'); }
}
*/

.hero-dots{
  position:absolute; z-index:4; left:50%; bottom: 24px; transform: translateX(-50%);
  display:flex; gap:10px;
}
.hero-dots button{
  width:28px; height:3px; background: rgba(255,255,255,0.5); border-radius:2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  transition: background .2s ease, width .2s ease;
}
.hero-dots button.active{ background: var(--amber); width:44px; }

.hero-arrows{ position:absolute; z-index:4; inset: 0; display:flex; align-items:center; justify-content:space-between; padding: 0 24px; pointer-events:none; }
.hero-arrows button{
  width:44px; height:44px; border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 18px rgba(11,46,51,0.18);
  transition: background .2s ease, transform .2s ease;
  pointer-events:auto;
}
.hero-arrows button:hover{ background: var(--amber); transform: scale(1.06); }
.hero-arrows svg{ width:16px; height:16px; fill:currentColor; }
/* Keep the next-arrow clear of the fixed social rail on the right edge (desktop/tablet) */
.hero-arrows .next{ margin-right: 76px; }
@media (max-width: 1180px){
  .hero-arrows .next{ margin-right: 64px; }
}
@media (max-width: 860px){
  /* Social rail is hidden entirely on mobile now (moved to the top
     strip / bottom CTA bar), so neither arrow needs side clearance. */
  .hero-arrows .next{ margin-right: 0; }
  .hero-arrows .prev{ margin-left: 0; }
}
@media (max-width: 640px){
  .hero-arrows{ display:none; } /* arrows hidden entirely at this size already, clearance moot */

  /* The full 120px logo + bold wordmark (measured ~357px wide) does
     not fit next to the language switch + hamburger on phones, so we
     shrink the logo image and drop the tagline — but keep the company
     name itself visible, sized to fit alongside the nav controls. */
  .logo{ margin-right: 0; gap:8px; }
  .logo-img{ width:42px; height:42px; }
  .logo-text span{ display:none; }
  .logo-text strong{ font-size:14px; white-space:nowrap; }
}

/* ===========================================================
   CATEGORY CAROUSEL
=========================================================== */
.categories{ padding: 88px 0 72px; background: var(--paper-2); position:relative; }
.categories-head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.categories-head h2{ font-family: var(--font-display); font-size: clamp(26px,3.2vw,36px); font-weight:700; margin-bottom:10px; }
.categories-head .rule{ width:56px; height:3px; background: var(--amber); margin: 16px auto 0; border-radius:2px; }

.category-carousel-shell{ position:relative; display:flex; align-items:center; gap:14px; }
.carousel-nav{ display:flex; gap:8px; flex-shrink:0; }
.carousel-nav button{
  width:40px; height:40px; border:1px solid var(--steel-line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color: var(--ink); background:#fff;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.carousel-nav button:hover{ background: var(--amber); color:#fff; border-color: var(--amber); }
.carousel-nav svg{ width:13px; height:13px; fill:currentColor; }
@media (max-width: 640px){
  /* On phones, the prev/next circular buttons eat ~100px+ of the
     already-narrow viewport, which is what was causing case/category
     cards to render cropped instead of fitting cleanly. Touch-swipe
     scroll works fine without them here. */
  .carousel-nav{ display:none; }
}

.category-carousel-viewport{ flex:1; overflow:hidden; }
.category-card-carousel-item-wrapper{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type: x mandatory;
  padding: 4px 4px 12px;
  scrollbar-width: none;
  transform-origin: center top;
  transition: transform .25s ease;
}
.category-card-carousel-item-wrapper::-webkit-scrollbar{ display:none; }
.category-card{
  scroll-snap-align:start;
  flex: 0 0 200px;
  border: 1px solid var(--steel-line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow:hidden;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.category-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: transparent; }
.category-card-thumb{
  position:relative; aspect-ratio: 1/1;
  background: linear-gradient(135deg, #EDEFEC, #E1E6E3);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.category-card-thumb svg{ width:44px; height:44px; stroke: #9AA6A4; fill:none; stroke-width:1.3; transition: transform .3s ease; }
.category-card-thumb img{
  width:100%; height:100%; object-fit: cover; object-position: center;
  transition: transform .3s ease;
}
.category-card:hover .category-card-thumb svg,
.category-card:hover .category-card-thumb img{ transform: scale(1.1); }
.category-card-thumb .badge{
  position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%;
  background: rgba(11,46,51,0.85); display:flex; align-items:center; justify-content:center;
}
.category-card-thumb .badge svg{ width:11px; height:11px; stroke: var(--amber); fill:none; stroke-width:2; }
.category-card-label{ padding: 14px 14px 16px; text-align:center; }
.category-card-label h3{ font-size:13.5px; font-weight:600; line-height:1.3; }

.zoom-controls{
  position:absolute; right:0; top:-58px; display:flex; gap:6px; align-items:center;
}
.zoom-controls button{
  width:32px; height:32px; border:1px solid var(--steel-line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color: var(--ink); font-family: var(--font-mono); font-size:15px; font-weight:700;
  transition: background .18s ease, color .18s ease;
}
.zoom-controls button:hover{ background: var(--amber); border-color: var(--amber); color: #fff; }
.zoom-controls .zoom-level{ font-family: var(--font-mono); font-size:11.5px; color: var(--steel); min-width:38px; text-align:center; }

/* ===========================================================
   HOT SALES / PRODUCT GRID
=========================================================== */
.products{ padding: 20px 0 96px; background: var(--paper-2); }
.products .categories-head{ margin-bottom:44px; }
.product-tabs{ display:flex; gap:8px; margin-bottom: 36px; flex-wrap:wrap; justify-content:center; }
.product-tabs button{
  padding: 9px 18px; font-size:13.5px; font-weight:600; border-radius: 20px; border:1px solid var(--steel-line); color: var(--steel);
  transition: all .18s ease;
}
.product-tabs button.active, .product-tabs button:hover{ background: var(--ink); color:#fff; border-color: var(--ink); }

.product-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:24px;
}
.b2b-product-card{
  border:1px solid var(--steel-line); border-radius: var(--radius); overflow:hidden;
  background: var(--paper); transition: box-shadow .22s ease, transform .22s ease;
  display:flex; flex-direction:column;
}
.b2b-product-card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-5px); border-color: var(--amber); }
.b2b-product-card-image-wrapper{
  position:relative; aspect-ratio: 1/1; background: linear-gradient(135deg, #EDEFEC, #E1E6E3);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.b2b-product-card-image-wrapper svg{ width:64px; height:64px; stroke: #B7C1BF; fill:none; stroke-width:1.2; transition: transform .3s ease; }
.b2b-product-card:hover .b2b-product-card-image-wrapper svg{ transform: scale(1.08); }
.b2b-product-card-brand{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family: var(--font-display); font-weight:700; font-size:13px; letter-spacing:0.01em; color: var(--ink);
  background: rgba(255,255,255,0.9); padding:4px 9px; border-radius:2px;
}
.b2b-product-card-hot-sale-tag{
  position:absolute; top:12px; right:12px; z-index:2;
  background: #E0293B; color: #fff; font-family: var(--font-mono);
  font-size:10.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding: 5px 10px; border-radius:2px;
  display:flex; align-items:center; gap:5px;
  box-shadow: 0 3px 10px rgba(224,41,59,0.35);
}
.b2b-product-card-hot-sale-tag svg{ width:10px; height:10px; fill: #fff; }
.b2b-product-card-video-tag{
  position:absolute; bottom:10px; right:10px; z-index:2;
  background: var(--ink); color:#fff; font-family: var(--font-mono);
  font-size:10px; font-weight:700; letter-spacing:0.08em;
  padding: 4px 9px; border-radius:2px; display:flex; align-items:center; gap:5px;
}
.b2b-product-card-video-tag svg{ width:8px; height:8px; fill: var(--amber); }

.b2b-product-card-image-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .3s ease;
}
.b2b-product-card:hover .b2b-product-card-image-wrapper img{
  transform: scale(1.08);
}

/* Hover overlay — eye icon + Learn More, shown on every card */
.b2b-product-card-overlay{
  position:absolute; inset:0; z-index:3;
  background: rgba(11,46,51,0.55);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  opacity:0; visibility:hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.b2b-product-card:hover .b2b-product-card-overlay{ opacity:1; visibility:visible; }
.overlay-eye{
  width:48px; height:48px; border-radius:50%;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.6);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(3px);
  transform: translateY(6px);
  transition: transform .25s ease;
}
.b2b-product-card:hover .overlay-eye{ transform: translateY(0); }
.overlay-eye svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:1.6; }
.overlay-learn-more{
  color:#fff; font-size:13px; font-weight:700; letter-spacing:0.02em;
  border-bottom: 1.5px solid var(--amber);
  padding-bottom:2px;
  transform: translateY(6px);
  transition: transform .25s ease .03s;
}
.b2b-product-card:hover .overlay-learn-more{ transform: translateY(0); }

.b2b-product-card-body{ padding: 22px; display:flex; flex-direction:column; gap:9px; flex:1; }
.b2b-product-card-body h3{ font-family: var(--font-display); font-size:16.5px; font-weight:600; line-height:1.35; }
.b2b-product-card-body .spec{ font-size:13.5px; color: var(--steel); line-height:1.55; }
.b2b-product-card-footer{
  margin-top:auto; padding: 0 22px 22px;
}
.b2b-product-card-footer .btn-price{
  display:block; width:100%; text-align:center;
  padding: 11px 16px; font-size:13.5px; font-weight:600;
  border: 1px solid var(--ink); border-radius: 20px; color: var(--ink);
  transition: background .18s ease, color .18s ease;
}
.b2b-product-card-footer .btn-price:hover{ background: var(--ink); color:#fff; }

/* ===========================================================
   LATEST CASE STUDIES
=========================================================== */
.case-studies{ padding: 20px 0 96px; background: var(--paper); }
.case-card-carousel-item-wrapper{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type: x mandatory;
  padding: 4px 4px 12px;
  scrollbar-width: none;
}
.case-card-carousel-item-wrapper::-webkit-scrollbar{ display:none; }
.case-card{
  scroll-snap-align:start;
  flex: 0 0 320px;
  border-radius: 14px; overflow:hidden;
  background:#fff;
  box-shadow: 0 6px 22px rgba(11,46,51,0.08);
  transition: box-shadow .25s ease, transform .25s ease;
}
@media (max-width: 640px){
  .case-card{ flex: 0 0 82vw; }
}
.case-card:hover{ box-shadow: 0 16px 36px rgba(11,46,51,0.16); transform: translateY(-3px); }
.case-card-media{ position:relative; display:block; aspect-ratio: 16/10; overflow:hidden; }
.case-card-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform .4s ease;
}
.case-card:hover .case-card-media img{ transform: scale(1.06); }
.case-card-overlay{
  position:absolute; inset:0;
  background: rgba(11,46,51,0.5);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition: opacity .3s ease;
}
.case-card:hover .case-card-overlay{ opacity:1; }
.case-card-overlay-btn{
  padding: 11px 26px; border-radius: 30px;
  background: var(--amber); color: #fff;
  font-size:13px; font-weight:700; letter-spacing:0.01em;
  transform: translateY(8px); transition: transform .3s ease;
}
.case-card:hover .case-card-overlay-btn{ transform: translateY(0); }
.case-card-body{ padding: 22px; }
.case-card .tag{ font-family: var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--amber-dark); margin-bottom:10px; display:block; }
.case-card h3{ font-family: var(--font-display); font-size:16.5px; font-weight:600; line-height:1.35; margin-bottom:8px; color: var(--ink); }
.case-card p{ font-size:13px; color: var(--steel); line-height:1.5; }

/* ===========================================================
   CERTIFICATIONS — coverflow carousel, center item emphasized
=========================================================== */
.certifications{ padding: 80px 0 96px; background: var(--paper-2); border-top:1px solid var(--steel-line); border-bottom:1px solid var(--steel-line); }
.cert-coverflow{ position:relative; max-width: 980px; margin:0 auto; }
.cert-coverflow-stage{ position:relative; height: 340px; }
.cert-coverflow-item{
  position:absolute; top:50%; left:50%;
  width: 260px;
  background:#fff; border-radius: 14px; border: 1px solid var(--steel-line);
  padding: 24px 20px; text-align:center; box-sizing:border-box;
  opacity:0; visibility:hidden;
  transform: translate(-50%,-50%) scale(0.55);
  transition: transform .5s cubic-bezier(.25,.8,.25,1), opacity .5s cubic-bezier(.25,.8,.25,1), box-shadow .3s ease, border-color .3s ease;
}
.cert-coverflow-item.center{
  opacity:1; visibility:visible; z-index:5;
  transform: translate(-50%,-50%) scale(1.08);
  border-color: var(--amber);
  box-shadow: 0 20px 44px rgba(22,86,165,0.22);
}
.cert-coverflow-item.near-left{
  opacity:1; visibility:visible; z-index:3;
  left: 26%;
  transform: translate(-50%,-50%) scale(0.85);
}
.cert-coverflow-item.near-right{
  opacity:1; visibility:visible; z-index:3;
  left: 74%;
  transform: translate(-50%,-50%) scale(0.85);
}
.cert-coverflow-item.far-left{
  opacity:0.55; visibility:visible; z-index:1;
  left: 8%;
  transform: translate(-50%,-50%) scale(0.65);
}
.cert-coverflow-item.far-right{
  opacity:0.55; visibility:visible; z-index:1;
  left: 92%;
  transform: translate(-50%,-50%) scale(0.65);
}
.cert-coverflow-thumb{
  width:56px; height:56px; margin: 0 auto 16px; border-radius:50%;
  background: var(--paper); display:flex; align-items:center; justify-content:center;
  transition: background .3s ease;
}
.cert-coverflow-item.center .cert-coverflow-thumb{ background: rgba(22,86,165,0.14); }
.cert-coverflow-thumb svg{ width:24px; height:24px; stroke: var(--ink); fill:none; stroke-width:1.4; }
.cert-coverflow-label{ font-size:12.5px; line-height:1.5; }
.cert-coverflow-label strong{ display:block; font-family: var(--font-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color: var(--steel); margin-bottom:4px; }
.cert-coverflow-label span{ color: var(--ink); font-weight:600; }
.cert-coverflow-nav{
  position:absolute; top:50%; transform: translateY(-50%); z-index:6;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--steel-line); background:#fff;
  display:flex; align-items:center; justify-content:center; color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: background .18s ease, color .18s ease;
}
.cert-coverflow-nav:hover{ background: var(--amber); color:#fff; }
.cert-coverflow-nav.prev{ left:0; }
.cert-coverflow-nav.next{ right:0; }
.cert-coverflow-nav svg{ width:14px; height:14px; fill:currentColor; }
@media (max-width: 700px){
  .cert-coverflow-item{ width: 210px; }
  .cert-coverflow-item.near-left{ left:14%; }
  .cert-coverflow-item.near-right{ left:86%; }
  .cert-coverflow-item.far-left, .cert-coverflow-item.far-right{ opacity:0; visibility:hidden; }
}

/* ===========================================================
   PARTNERS — continuous auto-scroll marquee
=========================================================== */
.partners{ padding: 72px 0 80px; background: var(--paper); overflow:hidden; }
.partner-marquee{
  overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partner-marquee-track{
  display:flex; width: max-content;
  animation: partnerScroll 26s linear infinite;
}
.partner-marquee:hover .partner-marquee-track{ animation-play-state: paused; }
@keyframes partnerScroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.partner-badge{
  flex-shrink:0; width:150px; height:150px; margin: 0 14px;
  border-radius:50%; background:#fff; border:1px solid var(--steel-line);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:14px; color: var(--steel);
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.partner-badge:hover{
  transform: scale(1.06); box-shadow: var(--shadow-md);
}
@media (prefers-reduced-motion: reduce){ .partner-marquee-track{ animation: none; } }
@media (max-width: 640px){ .partner-badge{ width:110px; height:110px; font-size:12px; margin:0 10px; } }

/* ===========================================================
   COMPANY METRICS
=========================================================== */
.company-key-metrics-wrapper{
  background: var(--ink);
  padding: 72px 0;
}
.metrics-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.metric{ text-align:center; padding: 0 20px; position:relative; }
.metric:not(:last-child)::after{
  content:""; position:absolute; right:0; top:50%; transform: translateY(-50%);
  width:1px; height:48px; background: rgba(255,255,255,0.14);
}
.metric .val{
  font-family: var(--font-mono); font-size: clamp(32px, 4vw, 46px); font-weight:700; color:#fff;
  display:flex; align-items:baseline; justify-content:center; gap:2px;
}
.metric .val .suffix{ font-size: 0.5em; color: var(--amber); }
.metric .lbl{ margin-top:10px; font-size:13px; letter-spacing:0.04em; color: rgba(255,255,255,0.6); }

/* ===========================================================
   COMPANY INTRO — picture/video
=========================================================== */
.company-first-picture-video-content{ padding: 96px 0; background: var(--paper-2); }
.company-intro-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center; }
.intro-media{
  position:relative; aspect-ratio: 5/4; border-radius: var(--radius); overflow:hidden;
  background: linear-gradient(135deg, #123B41, #0B2E33);
}
.intro-media-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.intro-media-pattern{
  position:absolute; inset:0; opacity:0.5;
  background-image: repeating-linear-gradient(45deg, rgba(22,86,165,0.08) 0 2px, transparent 2px 22px);
  transition: opacity .3s ease;
  pointer-events:none;
}
.play-btn{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%; background: rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.4);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(4px);
  transition: transform .22s ease, background .22s ease, opacity .3s ease;
}
.play-btn:hover{ transform: translate(-50%,-50%) scale(1.08); background: var(--amber); }
.play-btn svg{ width:20px; height:20px; fill:#fff; margin-left:3px; transition: opacity .15s ease; }
.play-btn:hover svg{ fill: var(--ink); }
/* While playing: hide the pattern overlay and swap the icon to pause */
.intro-media.is-playing .intro-media-pattern{ opacity:0; }
.intro-media.is-playing .play-btn{ opacity:0; }
.intro-media.is-playing .play-btn:hover{ opacity:1; }
.intro-media-caption{
  position:absolute; left:20px; bottom:20px; color:#fff; font-family: var(--font-mono);
  font-size:12px; letter-spacing:0.06em; text-transform:uppercase; background: rgba(0,0,0,0.3);
  padding:8px 12px; border-radius:2px;
  transition: opacity .3s ease;
}
.intro-media.is-playing .intro-media-caption{ opacity:0; }
.intro-media.is-playing:hover .intro-media-caption{ opacity:1; }

/* Custom video control bar */
.intro-media-controls{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  display:flex; align-items:center; gap:12px;
  padding: 10px 16px;
  background: linear-gradient(0deg, rgba(11,46,51,0.85), rgba(11,46,51,0));
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}
.intro-media.is-playing .intro-media-controls{ opacity:1; visibility:visible; transform:translateY(0); }
.intro-media:hover .intro-media-controls{ opacity:1; visibility:visible; transform:translateY(0); }

.intro-media-controls button{
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition: background .18s ease;
}
.intro-media-controls button:hover{ background: rgba(255,255,255,0.18); }
.intro-media-controls svg{ width:15px; height:15px; fill:#fff; }
.media-ctrl-play svg{ width:13px; height:13px; }

.media-ctrl-seek{
  flex:1; -webkit-appearance:none; appearance:none;
  height:4px; border-radius:2px; background: rgba(255,255,255,0.3);
  outline:none; cursor:pointer;
}
.media-ctrl-seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:13px; height:13px; border-radius:50%; background: var(--amber);
  box-shadow: 0 0 0 3px rgba(22,86,165,0.25);
  cursor:pointer;
}
.media-ctrl-seek::-moz-range-thumb{
  width:13px; height:13px; border:none; border-radius:50%; background: var(--amber);
  box-shadow: 0 0 0 3px rgba(22,86,165,0.25);
  cursor:pointer;
}
.media-ctrl-seek::-webkit-slider-runnable-track{ height:4px; border-radius:2px; }
.media-ctrl-seek::-moz-range-track{ height:4px; border-radius:2px; background: rgba(255,255,255,0.3); }

.intro-copy h2{
  font-family: var(--font-display); font-size: clamp(26px,3vw,36px); font-weight:600; margin-bottom:18px; letter-spacing:-0.01em;
}
.intro-copy > p{ color: var(--steel); margin-bottom: 26px; }
.intro-points{ display:flex; flex-direction:column; gap:18px; margin-bottom:30px; }
.intro-point{ display:flex; gap:14px; }
.intro-point .num{
  font-family: var(--font-mono); font-size:13px; color: var(--amber-dark); font-weight:700;
  width:30px; flex-shrink:0; padding-top:2px;
}
.intro-point h4{ font-size:15px; font-weight:600; margin-bottom:3px; }
.intro-point p{ font-size:13.5px; color: var(--steel); }

/* ===========================================================
   NEWS GALLERY
=========================================================== */
.news{ padding: 20px 0 100px; background: var(--paper-2); }
.latest-news-gallery-container{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.news-card{ display:flex; flex-direction:column; }
.news-card-image{
  aspect-ratio: 16/10; border-radius: var(--radius); overflow:hidden; position:relative; margin-bottom:18px;
  background: linear-gradient(135deg, #E1E6E3, #EDEFEC);
}
.news-card-image .date-tag{
  position:absolute; top:12px; left:12px; background:#fff; padding:6px 10px; border-radius:2px;
  font-family: var(--font-mono); font-size:11px; font-weight:700; color: var(--ink); text-align:center; line-height:1.2;
}
.news-card-image svg{ position:absolute; inset:0; margin:auto; width:44px; height:44px; stroke:#B7C1BF; fill:none; stroke-width:1.2; }
.news-card h3{ font-family: var(--font-display); font-size:17px; font-weight:600; line-height:1.35; margin-bottom:10px; }
.news-card p{ font-size:13.5px; color: var(--steel); margin-bottom:14px; }
.news-card .read-more{ font-size:13px; font-weight:600; color: var(--data-blue); display:flex; align-items:center; gap:6px; margin-top:auto; }
.news-card .read-more svg{ width:10px; height:10px; fill:currentColor; transition: transform .18s ease; }
.news-card:hover .read-more svg{ transform: translateX(3px); }

/* ===========================================================
   INQUIRY STRIP
=========================================================== */
.inquiry-strip{
  background: var(--amber);
  padding: 44px 0;
}
.inquiry-strip .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.inquiry-strip h3{ font-family: var(--font-display); font-size:22px; font-weight:700; color: #fff; }
.inquiry-strip p{ font-size:14px; color: rgba(255,255,255,0.8); }
.inquiry-strip .btn{ background: #fff; color: var(--ink); }
.inquiry-strip .btn:hover{ background: var(--paper); }

/* ===========================================================
   FOOTER
=========================================================== */
.site-footer{ background: var(--ink-2); color: rgba(255,255,255,0.68); padding: 76px 0 0; }
.footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; padding-bottom: 56px; border-bottom:1px solid rgba(255,255,255,0.1); }
.footer-logo-img{ height:60px; width:auto; margin-bottom:16px; display:block; }
.footer-brand p{ font-size:13.5px; margin: 16px 0 22px; max-width:280px; color: rgba(255,255,255,0.55); }
.footer-brand .socials{ display:flex; gap:10px; }
.footer-brand .socials a{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: rgba(255,255,255,0.08);
  transition: background .18s ease, transform .18s ease;
}
.footer-brand .socials a:hover{ background: var(--amber); transform: translateY(-2px); }
.footer-brand .socials svg{ width:16px; height:16px; fill:#fff; }
.footer-brand .socials a:hover svg{ fill: var(--ink); }
.footer-col h5{ font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:#fff; margin-bottom:20px; font-family: var(--font-mono); }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-size:13.5px; transition: color .18s ease, padding-left .18s ease; }
.footer-col a:hover{ color: var(--amber); padding-left:4px; }
.footer-contact li{ display:flex; gap:10px; font-size:13.5px; margin-bottom:14px; align-items:flex-start; }
.footer-contact svg{ width:15px; height:15px; fill: var(--amber); flex-shrink:0; margin-top:2px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding: 24px 0; font-size:12.5px; color: rgba(255,255,255,0.45); }
.back-to-top{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.2);
  display:flex; align-items:center; justify-content:center; transition: background .18s ease, border-color .18s ease;
}
.back-to-top:hover{ background: var(--amber); border-color: var(--amber); }
.back-to-top svg{ width:12px; height:12px; fill:#fff; }

/* ===========================================================
   RESPONSIVE
=========================================================== */
@media (max-width: 1080px){
  .product-grid{ grid-template-columns: repeat(2,1fr); }
  .metrics-grid{ grid-template-columns: repeat(2,1fr); row-gap:36px; }
  .metric:nth-child(2)::after{ display:none; }
  .footer-grid{ grid-template-columns: 1fr 1fr; row-gap:40px; }
  .company-intro-grid{ grid-template-columns:1fr; }
  .latest-news-gallery-container{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 1360px){
  /* Tightened nav item spacing + logo margin to bring the true minimum
     down from 1488px to 1304px, so this breakpoint (with margin) now
     covers the very common 1366px laptop resolution showing the full
     nav instead of the hamburger. */
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .hero{ min-height: 340px; max-height: 480px; }
}

@media (max-width: 640px){
  .wrap{ padding: 0 20px; }
  .product-grid{ grid-template-columns: 1fr 1fr; gap:14px; }
  .metrics-grid{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .latest-news-gallery-container{ grid-template-columns: 1fr; }
  .inquiry-strip .wrap{ flex-direction:column; align-items:flex-start; }
  .hero{ min-height: 240px; max-height: 320px; }
  .hero-arrows{ display:none; }
  .logo-text span{ display:none; }

  /* Prevent header overflow: shrink the language switch to icon-only,
     tighten spacing so logo + icons + hamburger all fit on narrow phones */
  .navbar{ gap:8px; }
  .nav-cta{ gap:6px; }
  .lang-switch-btn .current-lang{ display:none; }
  .lang-switch-btn{ padding: 7px 9px; }
  .lang-switch-btn svg{ margin-left:0; }
}

@media (max-width: 400px){
  .navbar{ padding: 0; }
  .icon-btn.search-toggle{ display:none; } /* search moves to being reachable via mobile nav only on very narrow phones */
}

/* Mobile nav panel */
.mobile-nav{
  position: fixed; inset: 0; z-index: 900;
  background: var(--ink);
  transform: translateX(100%);
  transition: transform .3s ease;
  padding: 24px;
  overflow-y:auto;
}
.mobile-nav.open{ transform: translateX(0); }
.mobile-nav-head{ display:flex; justify-content:flex-end; margin-bottom:24px; }
.mobile-nav-close{ width:36px; height:36px; color:#fff; }
.mobile-nav-close svg{ width:16px; height:16px; fill:currentColor; }
.mobile-nav ul{ display:flex; flex-direction:column; }
.mobile-nav li{ border-bottom: 1px solid rgba(255,255,255,0.1); }
.mobile-nav a{ display:block; padding: 16px 4px; color:#fff; font-size:16px; font-weight:600; font-family: var(--font-display); }
.mobile-nav .submenu{ padding-left:14px; display:none; }
.mobile-nav li.open .submenu{ display:block; }
.mobile-nav .submenu a{ font-size:14px; font-weight:400; color: rgba(255,255,255,0.65); padding: 11px 4px; }

/* ===========================================================
   PRODUCT LISTING PAGE (e.g. product-helium-leak-detector.html)
   Reuses .wrap, .btn, .b2b-product-card etc. from above — this block
   only adds the page banner, breadcrumb, category sidebar and
   pagination that are new to this page template.
=========================================================== */
.page-banner{
  background: var(--paper); padding: 48px 0 40px; text-align:center;
  border-bottom: 1px solid var(--steel-line);
}
.page-banner h1{
  font-family: var(--font-display); font-size: clamp(28px,4vw,42px); font-weight:700; color: var(--ink);
}
.page-banner .rule{ width:64px; height:3px; background: var(--amber); margin: 18px auto 0; border-radius:2px; }

.breadcrumb{ background: var(--paper-2); border-bottom: 1px solid var(--steel-line); }
.breadcrumb .wrap{ display:flex; align-items:center; gap:8px; padding-top:16px; padding-bottom:16px; font-size:13.5px; }
.breadcrumb a{ color: var(--amber-dark); font-weight:600; }
.breadcrumb a:hover{ text-decoration: underline; }
.breadcrumb .sep{ color: var(--steel); }
.breadcrumb .current{ color: var(--steel); }

.product-listing{ padding: 44px 0 88px; background: var(--paper-2); }
.product-listing-layout{ display:grid; grid-template-columns: 270px 1fr; gap: 32px; align-items:start; }

/* Category sidebar */
.category-sidebar{
  background: var(--paper); border:1px solid var(--steel-line); border-radius: var(--radius);
  overflow:hidden; position:sticky; top:100px;
}
.category-sidebar-head{
  background: var(--ink); color:#fff; font-family: var(--font-display);
  font-size:17px; font-weight:700; padding:18px 20px;
}
.category-list{ padding:8px; }
.category-list li{ list-style:none; }
.category-list a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 12px; border-radius: var(--radius); color: var(--ink); font-size:14px; font-weight:500;
  transition: background .15s ease, color .15s ease;
}
.category-list a:hover{ background: var(--paper); color: var(--amber-dark); }
.category-list li.active a{ background: var(--amber); color:#fff; font-weight:700; }
.category-list .count{
  font-family: var(--font-mono); font-size:11.5px; font-weight:700;
  background: rgba(11,46,51,0.08); color: var(--ink);
  border-radius: 12px; padding:2px 9px; min-width:26px; text-align:center;
}
.category-list li.active a .count{ background: rgba(255,255,255,0.25); color:#fff; }

.sidebar-cta{ padding:20px; border-top:1px solid var(--steel-line); }
.sidebar-cta h4{ font-family: var(--font-display); font-size:15px; font-weight:700; margin-bottom:8px; }
.sidebar-cta p{ font-size:12.5px; color: var(--steel); line-height:1.55; margin-bottom:14px; }
.sidebar-cta .btn{ width:100%; text-align:center; justify-content:center; font-size:13.5px; padding:11px 14px; }

/* Sales-agent contact card — replaces the old "Need a custom quote?" CTA
   inside the category sidebar. Mirrors the reference listing's rep card:
   name, direct contact rows, socials, then a full-width Inquiry button
   that opens the Tawk.to widget via the site-wide .btn-price handler. */
.agent-card{ padding:22px 20px; border-top:1px solid var(--steel-line); }
.agent-card-name{ font-family: var(--font-display); font-size:17px; font-weight:700; color: var(--ink); margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--steel-line); }
.agent-contact{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.agent-contact li{ list-style:none; display:flex; gap:8px; font-size:13px; line-height:1.4; align-items:baseline; }
.agent-contact li strong{ color: var(--steel); font-weight:600; min-width:70px; flex-shrink:0; }
.agent-contact li a{ color: var(--amber-dark); font-weight:600; word-break:break-word; }
.agent-contact li a:hover{ text-decoration:underline; }
.agent-contact li span.value{ color: var(--ink); font-weight:600; }
.agent-socials{ display:flex; gap:10px; padding:14px 0 18px; border-top:1px solid var(--steel-line); margin-bottom:16px; }
.agent-socials a{
  width:32px; height:32px; border-radius:50%; background: var(--paper);
  display:flex; align-items:center; justify-content:center; color: var(--steel);
  transition: background .15s ease, color .15s ease;
}
.agent-socials a:hover{ background: var(--amber); color:#fff; }
.agent-socials svg{ width:15px; height:15px; fill: currentColor; }
.agent-card .btn{ width:100%; text-align:center; justify-content:center; font-size:13.5px; padding:12px 14px; }

/* Toolbar + result count */
.product-listing-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.result-count{ font-size:13.5px; color: var(--steel); }
.result-count strong{ color: var(--ink); }

/* Center play-button overlay for "video" cards (distinct from the small
   corner "Video" tag — mirrors the reference listing's centered play icon) */
.card-play-overlay{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:52px; height:52px; border-radius:50%;
  background: rgba(11,46,51,0.55);
  display:flex; align-items:center; justify-content:center;
  transition: background .18s ease, transform .18s ease;
}
.card-play-overlay svg{ width:20px; height:20px; fill:#fff; margin-left:2px; }
.b2b-product-card:hover .card-play-overlay{ background: var(--amber); transform: translate(-50%,-50%) scale(1.08); }

/* Pagination */
.pagination{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:36px; flex-wrap:wrap; }
.pagination button{
  min-width:38px; height:38px; padding:0 10px; border-radius: var(--radius);
  border:1px solid var(--steel-line); background: var(--paper-2); color: var(--ink);
  font-family: var(--font-mono); font-size:13px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pagination button:hover:not(:disabled){ border-color: var(--amber); color: var(--amber-dark); }
.pagination button.active{ background: var(--amber); border-color: var(--amber); color:#fff; }
.pagination button:disabled{ opacity:.4; cursor:not-allowed; }
.pagination button svg{ width:14px; height:14px; }
.pagination .ellipsis{ padding:0 4px; color: var(--steel); font-family: var(--font-mono); font-size:13px; }

@media (max-width: 900px){
  .product-listing-layout{ grid-template-columns: 1fr; }
  .category-sidebar{ position:static; }
  .category-list{ display:flex; flex-wrap:wrap; gap:4px; padding:12px; }
  .category-list li{ flex:1 1 auto; }
  .category-list a{ white-space:nowrap; }
  .sidebar-cta{ display:none; }
  .agent-card{ display:none; }
}
@media (max-width: 600px){
  .page-banner{ padding:36px 0 30px; }
}

/* ===========================================================
   PRODUCTS OVERVIEW PAGE (products.html)
   One block per category: heading + "View More" link + a compact
   product grid. Reuses .category-sidebar / .agent-card / .b2b-product-card
   from the block above — only the block heading and the narrower
   "compact" card sizing are new here.
=========================================================== */
.category-block{ margin-bottom:52px; }
.category-block:last-child{ margin-bottom:0; }
.category-block-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-bottom:20px; padding-bottom:14px; border-bottom:2px solid var(--ink);
}
.category-block-head h2{ font-family: var(--font-display); font-size:21px; font-weight:700; color: var(--ink); }
.view-more-link{
  flex-shrink:0; font-family: var(--font-mono); font-size:12px; font-weight:700;
  letter-spacing:0.02em; color: var(--amber-dark); display:flex; align-items:center; gap:4px;
  white-space:nowrap;
}
.view-more-link svg{ width:11px; height:11px; }
.view-more-link:hover{ text-decoration:underline; }

/* Compact card modifier — a little narrower/tighter than the hot-sales
   cards elsewhere on the site, matching the denser grid used on the
   full catalog page. Stacks on top of the base .product-grid rules,
   so the existing 4→2→2 responsive breakpoints still apply. */
.product-grid--compact{ gap:16px; }
.product-grid--compact .b2b-product-card-body{ padding:14px 16px; gap:6px; }
.product-grid--compact .b2b-product-card-body h3{ font-size:13.5px; line-height:1.32; }
.product-grid--compact .b2b-product-card-body .spec{ font-size:11.5px; }
.product-grid--compact .b2b-product-card-footer{ padding:0 16px 16px; }
.product-grid--compact .b2b-product-card-footer .btn-price{ padding:9px 14px; font-size:12.5px; }
.product-grid--compact .b2b-product-card-brand{ font-size:11px; padding:3px 8px; }

@media (max-width: 900px){
  .category-block-head h2{ font-size:18px; }
}
@media (max-width: 640px){
  .product-grid--compact{ gap:10px; }
  .product-grid--compact .b2b-product-card-body{ padding:10px 12px; }
  .category-block{ margin-bottom:40px; }
}

/* ===========================================================
   ABOUT US PAGE (about.html)
=========================================================== */

/* Sub-nav pills under the page banner — Company Profile / Factory Tour /
   Quality Control, matching the reference "About Us" tab row. */
.about-subnav{ background: var(--paper-2); border-bottom:1px solid var(--steel-line); }
.about-subnav .wrap{ display:flex; gap:10px; padding:18px 24px; flex-wrap:wrap; justify-content:center; }
.about-subnav a{
  padding:9px 20px; font-size:13.5px; font-weight:600; border-radius:20px;
  border:1px solid var(--steel-line); color: var(--steel);
  transition: all .18s ease;
}
.about-subnav a.active, .about-subnav a:hover{ background: var(--ink); color:#fff; border-color: var(--ink); }

.about-section{ padding: 80px 0; }
.about-section:nth-child(even){ background: var(--paper); }
.about-section .section-head{ text-align:center; max-width:640px; margin:0 auto 48px; }
.about-section .section-head .eyebrow{ justify-content:center; }

/* Company facts strip — quick company-details row under the intro copy */
.company-facts{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px 28px;
  margin: 30px 0 32px; padding: 24px 0; border-top:1px solid var(--steel-line); border-bottom:1px solid var(--steel-line);
}
.company-facts dt{ font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color: var(--steel); margin-bottom:5px; }
.company-facts dd{ font-family: var(--font-display); font-size:15px; font-weight:700; color: var(--ink); }

/* Services grid */
.services-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; margin-bottom:48px; }
.service-card{
  background: var(--paper-2); border:1px solid var(--steel-line); border-radius: var(--radius);
  padding:28px 24px; transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.about-section:nth-child(even) .service-card{ background: var(--paper-2); }
.service-card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-5px); border-color: var(--amber); }
.service-card-icon{
  width:48px; height:48px; border-radius:50%; background: rgba(22,86,165,0.08);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.service-card-icon svg{ width:22px; height:22px; stroke: var(--amber); fill:none; stroke-width:1.6; }
.service-card h3{ font-family: var(--font-display); font-size:16px; font-weight:600; margin-bottom:9px; }
.service-card p{ font-size:13.5px; color: var(--steel); line-height:1.6; }

/* After-sales commitment checklist */
.commitment-list{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:16px 32px;
  background: var(--paper-2); border:1px solid var(--steel-line); border-radius: var(--radius);
  padding: 28px 32px;
}
.about-section:nth-child(even) .commitment-list{ background:#fff; }
.commitment-list li{ list-style:none; display:flex; gap:12px; align-items:flex-start; font-size:14px; color: var(--ink); line-height:1.5; }
.commitment-list li svg{ width:18px; height:18px; flex-shrink:0; stroke: var(--amber); fill:none; stroke-width:2; margin-top:2px; }

/* History timeline */
.history-timeline{ position:relative; max-width:820px; margin:0 auto; }
.history-timeline::before{
  content:''; position:absolute; left:29px; top:6px; bottom:6px; width:2px; background: var(--steel-line);
}
.timeline-item{ position:relative; display:flex; gap:26px; padding-bottom:44px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-marker{
  flex-shrink:0; width:60px; height:60px; border-radius:50%; background: var(--ink);
  color:#fff; display:flex; align-items:center; justify-content:center; z-index:1;
  font-family: var(--font-mono); font-size:12.5px; font-weight:700; text-align:center; line-height:1.2;
}
.timeline-body{
  flex:1; background: var(--paper-2); border:1px solid var(--steel-line); border-radius: var(--radius);
  padding:20px 24px; display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap;
}
.about-section:nth-child(even) .timeline-body{ background:#fff; }
.timeline-thumb{
  width:120px; height:84px; flex-shrink:0; border-radius: var(--radius); overflow:hidden;
  background: linear-gradient(135deg, #EDEFEC, #E1E6E3);
}
.timeline-thumb img{ width:100%; height:100%; object-fit:cover; }
.timeline-text{ flex:1; min-width:200px; }
.timeline-text h3{ font-family: var(--font-display); font-size:16px; font-weight:600; margin-bottom:6px; }
.timeline-text p{ font-size:13.5px; color: var(--steel); line-height:1.6; }

/* Our team grid */
.team-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; }
.team-card{
  background: var(--paper-2); border:1px solid var(--steel-line); border-radius: var(--radius); overflow:hidden;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.about-section:nth-child(even) .team-card{ background:#fff; }
.team-card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-5px); border-color: var(--amber); }
.team-card-photo{
  aspect-ratio: 4/3; background: linear-gradient(135deg, #EDEFEC, #E1E6E3);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.team-card-photo img{ width:100%; height:100%; object-fit:cover; }
.team-card-photo svg{ width:40px; height:40px; stroke:#B7C1BF; fill:none; stroke-width:1.2; }
.team-card-body{ padding:20px 20px 22px; }
.team-card-body h3{ font-family: var(--font-display); font-size:15.5px; font-weight:600; margin-bottom:8px; }
.team-card-body p{ font-size:13px; color: var(--steel); line-height:1.6; }

@media (max-width: 1080px){
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
  .team-grid{ grid-template-columns: repeat(2, 1fr); }
  .company-facts{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px){
  .about-section{ padding:56px 0; }
  .commitment-list{ grid-template-columns: 1fr; padding:22px; }
}
@media (max-width: 640px){
  .services-grid{ grid-template-columns: 1fr; }
  .team-grid{ grid-template-columns: 1fr; }
  .company-facts{ grid-template-columns: 1fr 1fr; gap:18px; }
  .about-subnav .wrap{ padding:14px 20px; gap:8px; }
  .about-subnav a{ padding:8px 14px; font-size:12.5px; }
  .history-timeline::before{ left:23px; }
  .timeline-marker{ width:48px; height:48px; font-size:10.5px; }
  .timeline-item{ gap:16px; padding-bottom:32px; }
  .timeline-body{ flex-direction:column; padding:16px 18px; }
  .timeline-thumb{ width:100%; height:140px; }
}

/* ===========================================================
   ABOUT US — TABBED LAYOUT (about.html)
   Breadcrumb / hero / tab-bar / content are each their own white
   card floating on the grey page background, matching the
   reference layout. Panels are swapped client-side (script.js) —
   no page reload.
=========================================================== */
.about-page{ background: var(--paper-2); padding: 28px 0 88px; }
.about-card{
  background:#fff; border:1px solid var(--steel-line); border-radius: var(--radius);
  margin: 0 auto 20px;
}

.about-breadcrumb-card{ padding:18px 28px; display:flex; align-items:center; gap:8px; font-size:13.5px; }
.about-breadcrumb-card a{ color: var(--steel); font-weight:600; }
.about-breadcrumb-card a:hover{ color: var(--ink); }
.about-breadcrumb-card svg{ width:9px; height:9px; fill: var(--steel); flex-shrink:0; }
.about-breadcrumb-card .current{ color: var(--amber-dark); font-weight:700; }

.about-hero-card{ padding: 52px 40px; text-align:center; }
.about-hero-card h1{
  font-family: var(--font-display); font-size: clamp(24px,3.4vw,36px); font-weight:700;
  color: var(--ink); margin-bottom:16px; line-height:1.25;
}
.about-hero-card .tagline{ color: var(--steel); font-size:15px; max-width:820px; margin:0 auto; line-height:1.6; }

.tabs-nav-card{ padding:14px; display:flex; gap:8px; flex-wrap:wrap; }
.tabs-nav-card button{
  padding:13px 24px; border-radius:6px; font-family: var(--font-display); font-weight:700; font-size:14.5px;
  color: var(--steel); background:transparent; border:none; cursor:pointer; transition: all .18s ease;
}
.tabs-nav-card button.active{ background: var(--amber); color:#fff; }
.tabs-nav-card button:hover:not(.active){ background: var(--paper-2); color: var(--ink); }

.tab-panel-card{ padding: 40px 44px; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }
.tab-panel-intro{ color: var(--steel); font-size:14.5px; line-height:1.7; margin-bottom:22px; max-width:900px; }
.tab-panel-intro strong{ color: var(--ink); }

/* Wide banner photo (used under Company Introduction / Services / Team) */
.photo-banner{
  width:100%; aspect-ratio: 21/7; border-radius: var(--radius); overflow:hidden;
  background: linear-gradient(135deg, #EDEFEC, #E1E6E3); margin-top:28px;
}
.photo-banner img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Small gallery row (used under Company's History) */
.photo-gallery-row{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:26px; }
.photo-gallery-row .gallery-item{
  aspect-ratio: 4/3; border-radius: var(--radius); overflow:hidden;
  background: linear-gradient(135deg, #EDEFEC, #E1E6E3);
}
.photo-gallery-row img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Panel-scoped video block spacing (reuses .company-intro-grid's children
   directly, without the full-bleed section wrapper used on the homepage) */
.tab-panel .intro-media{ margin-bottom:8px; }

@media (max-width: 900px){
  .about-hero-card{ padding:38px 24px; }
  .tab-panel-card{ padding:28px 24px; }
  .photo-gallery-row{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .about-breadcrumb-card{ padding:14px 18px; }
  .tabs-nav-card{ padding:10px; gap:6px; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .tabs-nav-card button{ padding:11px 16px; font-size:13px; white-space:nowrap; flex-shrink:0; }
  .tab-panel-card{ padding:22px 18px; }
  .photo-banner{ aspect-ratio: 4/3; }
  .photo-gallery-row{ grid-template-columns: 1fr 1fr; gap:10px; }
}

/* ===========================================================
   VIDEOS PAGE — featured video + tabbed video grid
=========================================================== */
 
/* --- Featured video --- */
.video-featured{ padding: 20px 0 8px; background: var(--paper-2); }
.video-featured .categories-head{ margin-bottom: 40px; }
.video-featured-card{
  position:relative;
  display:grid; grid-template-columns: 44% 56%; gap:32px; align-items:center;
  background: var(--paper); border:1px solid var(--steel-line); border-radius: 28px;
  overflow:hidden; padding: 28px;
  box-shadow: var(--shadow-md);
}
.video-featured-card::before{
  content:""; position:absolute; inset:-60%; z-index:0;
  background: conic-gradient(from 0deg,
    rgba(22,86,165,0.16), rgba(255,255,255,0) 22%,
    rgba(108,159,206,0.22) 50%, rgba(255,255,255,0) 72%,
    rgba(22,86,165,0.16));
  animation: videoBannerRotate 16s linear infinite;
}
@keyframes videoBannerRotate{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .video-featured-card::before{ animation: none; }
}
.video-featured-media, .video-featured-copy{ position:relative; z-index:1; }
.video-featured-media{ position:relative; aspect-ratio: 16/10; background: linear-gradient(135deg, #EDEFEC, #E1E6E3); overflow:hidden; border-radius: 18px; box-shadow: var(--shadow-sm); }
.video-featured-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.video-featured-media video.video-player{ width:100%; height:100%; object-fit:cover; background:#000; display:block; }
.video-featured-copy{ padding: 8px 12px; display:flex; flex-direction:column; gap:10px; justify-content:center; }
.video-featured-copy h3{ font-family: var(--font-display); font-size: clamp(20px,2.4vw,26px); font-weight:700; color: var(--ink); line-height:1.3; }
.video-featured-copy p{ font-size:14.5px; color: var(--steel); line-height:1.65; margin-top:4px; }
.video-featured-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
.video-featured-actions button.video-watch-trigger{ cursor:pointer; }
 
.video-tag, .video-card-tag{
  display:inline-flex; align-items:center; align-self:flex-start;
  font-family: var(--font-mono); font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color: var(--amber-dark); background: rgba(22,86,165,0.08); border-radius: 20px; padding:5px 12px;
}
.video-date, .video-card-date{ font-family: var(--font-mono); font-size:12px; color: var(--steel); }
 
/* Shared play-button / duration badge, used on featured media + grid cards */
.video-play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  background: rgba(11,46,51,0.6); display:flex; align-items:center; justify-content:center;
  transition: background .18s ease, transform .18s ease;
}
.video-play-btn svg{ width:22px; height:22px; fill:#fff; margin-left:3px; }
.video-featured-media:hover .video-play-btn,
.video-card-media:hover .video-play-btn{ background: var(--amber); transform: translate(-50%,-50%) scale(1.08); }
.video-duration{
  position:absolute; right:12px; bottom:12px; z-index:2;
  font-family: var(--font-mono); font-size:11px; font-weight:600; color:#fff;
  background: rgba(11,46,51,0.75); border-radius: 4px; padding:3px 8px;
}
.video-card-media.is-playing img,
.video-featured-media.is-playing img,
.video-card-media.is-playing .video-play-btn,
.video-featured-media.is-playing .video-play-btn,
.video-card-media.is-playing .video-duration,
.video-featured-media.is-playing .video-duration{ display:none; }
 
/* --- Video zone (tabs + grid) --- */
.video-zone{ padding: 20px 0 88px; background: var(--paper-2); }
.video-zone-latest{ padding-top: 8px; background: var(--paper); }
.video-zone .categories-head{ margin-bottom: 40px; }
 
.video-tabs{ display:flex; gap:8px; margin-bottom: 36px; flex-wrap:wrap; justify-content:center; }
.video-tabs button{
  padding: 9px 18px; font-size:13.5px; font-weight:600; border-radius: 20px; border:1px solid var(--steel-line); color: var(--steel);
  background: var(--paper-2); transition: all .18s ease;
}
.video-tabs button.active, .video-tabs button:hover{ background: var(--ink); color:#fff; border-color: var(--ink); }
 
.video-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.video-card{
  border:1px solid var(--steel-line); border-radius: var(--radius); overflow:hidden;
  background: var(--paper-2); transition: box-shadow .22s ease, transform .22s ease;
  display:flex; flex-direction:column;
}
.video-zone-latest .video-card{ background: var(--paper); }
.video-card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-5px); border-color: var(--amber); }
.video-card-media{ position:relative; aspect-ratio: 16/10; background: linear-gradient(135deg, #EDEFEC, #E1E6E3); overflow:hidden; }
.video-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease; }
.video-card:hover .video-card-media img{ transform: scale(1.05); }
.video-card-media video.video-player{ width:100%; height:100%; object-fit:cover; background:#000; display:block; }
.video-card-media .video-play-btn{ width:48px; height:48px; }
.video-card-media .video-play-btn svg{ width:18px; height:18px; }
.video-card-body{ padding: 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.video-card-body h3{ font-family: var(--font-display); font-size:15.5px; font-weight:600; line-height:1.35; color: var(--ink); }
 
@media (max-width: 1080px){
  .video-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px){
  .video-featured-card{ grid-template-columns: 1fr; padding: 20px; }
  .video-featured-copy{ padding: 8px 4px; }
}
@media (max-width: 640px){
  .video-grid{ grid-template-columns: 1fr; }
  .video-tabs{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .video-tabs button{ flex:0 0 auto; white-space:nowrap; }
  .video-featured-actions{ flex-direction:column; }
  .video-featured-actions .btn{ width:100%; text-align:center; justify-content:center; }
}
/* ===========================================================
   CONTACT US PAGE (contactus.html)
=========================================================== */

/* --- Contact Our Team --- */
.contact-team{ padding: 20px 0 12px; background: var(--paper-2); }
.contact-team .categories-head{ margin-bottom: 36px; }
.contact-team-card{
  display:flex; align-items:center; gap:22px; max-width: 620px; margin: 0 auto;
  background: var(--paper); border:1px solid var(--steel-line); border-radius: var(--radius);
  padding: 26px 28px;
}
.contact-team-avatar{
  flex-shrink:0; width:64px; height:64px; border-radius:50%; background: var(--paper-2);
  display:flex; align-items:center; justify-content:center;
}
.contact-team-avatar svg{ width:30px; height:30px; fill: var(--steel); }
.contact-team-info h3{ font-family: var(--font-display); font-size:17px; font-weight:700; color: var(--ink); margin-bottom:12px; }
.contact-team-rows{ display:flex; flex-direction:column; gap:8px; }
.contact-team-rows li{ list-style:none; font-size:13.5px; display:flex; gap:6px; }
.contact-team-rows li strong{ color: var(--steel); font-weight:600; min-width:78px; flex-shrink:0; }
.contact-team-rows li a{ color: var(--amber-dark); font-weight:600; }
.contact-team-rows li a:hover{ text-decoration: underline; }
.contact-team-chat{ margin-top:18px; }

/* --- Request A Quote --- */
.quote-section{ padding: 76px 0; background: var(--paper); }
.quote-intro{ text-align:center; color: var(--steel); font-size:14.5px; max-width:640px; margin: 14px auto 0; }
.quote-form{ max-width: 900px; margin: 40px auto 0; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field-full{ grid-column: 1 / -1; }
.field label{ font-size:13.5px; font-weight:700; color: var(--ink); }
.field label .req{ color:#C0392B; }
.field input, .field textarea{
  width:100%; border:1px solid var(--steel-line); border-radius: var(--radius);
  background: var(--paper-2); padding: 13px 16px; font-family: var(--font-body);
  font-size:14px; color: var(--ink); transition: border-color .18s ease, background .18s ease;
}
.field input::placeholder, .field textarea::placeholder{ color: var(--steel); }
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--amber); background: var(--paper); }
.field textarea{ resize: vertical; min-height: 140px; font-family: var(--font-body); line-height:1.6; }

.file-upload{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.file-upload input[type="file"]{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.file-upload-btn{ cursor:pointer; padding: 11px 22px; font-size:13.5px; }
.file-upload-hint{ font-size:13px; color: var(--steel); }
.file-note{ font-size:12px; color: var(--steel); margin-top:8px; }

.quote-submit{ margin-top: 30px; }
.quote-status{ margin-top:14px; font-size:13.5px; font-weight:600; }
.quote-status.success{ color: #1E7A34; }
.quote-status.error{ color:#C0392B; }

@media (max-width: 720px){
  .form-grid{ grid-template-columns: 1fr; }
  .contact-team-card{ flex-direction:column; text-align:center; }
  .contact-team-rows li{ justify-content:center; }
  .contact-team-chat{ width:100%; justify-content:center; }
}

/* --- Our Location --- */
.location-section{ padding: 12px 0 88px; background: var(--paper-2); }
.location-card{
  max-width: 980px; margin: 0 auto; background: var(--paper); border:1px solid var(--steel-line);
  border-radius: var(--radius); padding: 30px 32px 32px;
}
.location-card h3{ font-family: var(--font-display); font-size:19px; font-weight:700; color: var(--ink); }
.location-divider{ height:1px; background: var(--steel-line); margin: 16px 0 18px; }
.location-address{ font-size:14px; color: var(--steel); margin-bottom:22px; }
.location-address strong{ color: var(--ink); }
.location-map{
  width:100%; aspect-ratio: 16/7; border-radius: var(--radius); overflow:hidden;
  border:1px solid var(--steel-line); margin-bottom:20px; background: var(--paper-2);
}
.location-map iframe{ width:100%; height:100%; border:0; display:block; }
.location-directions svg{ width:15px; height:15px; fill: var(--amber-dark); }

@media (max-width: 720px){
  .location-card{ padding: 22px 18px 24px; }
  .location-map{ aspect-ratio: 4/3; }
}

/* ===========================================================
   PRODUCT DETAIL PAGE (vacuum.html and similar sale-* pages)
=========================================================== */

/* --- Gallery + basic/trading properties --- */
.product-detail{ padding: 44px 0 12px; background: var(--paper); }
.product-detail-layout{ display:grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items:start; }

.product-gallery{ position: sticky; top: 100px; }
.product-gallery-main{
  aspect-ratio: 1/1; border-radius: var(--radius); border:1px solid var(--steel-line);
  background: linear-gradient(135deg, #EDEFEC, #E1E6E3); overflow:hidden;
}
.product-gallery-main img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-gallery-thumbs{ display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; margin-top:12px; }
.gallery-thumb{
  aspect-ratio: 1/1; border-radius: var(--radius); overflow:hidden; padding:0;
  border:2px solid var(--steel-line); background: linear-gradient(135deg, #EDEFEC, #E1E6E3);
  transition: border-color .18s ease;
}
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-thumb.active, .gallery-thumb:hover{ border-color: var(--amber); }

.product-detail-brand{
  display:inline-flex; align-self:flex-start; font-family: var(--font-mono); font-size:11px; font-weight:700;
  letter-spacing:0.06em; color: var(--amber-dark); background: rgba(22,86,165,0.08);
  border-radius: 20px; padding:5px 12px; margin-bottom:14px;
}
.product-detail-info h1{
  font-family: var(--font-display); font-size: clamp(21px, 2.4vw, 27px); font-weight:700;
  color: var(--ink); line-height:1.32; margin-bottom: 24px;
}
.product-props{ padding: 18px 0; border-top:1px solid var(--steel-line); }
.product-props h4{
  font-family: var(--font-mono); font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.06em; color: var(--steel); margin-bottom:14px;
}
.props-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.props-grid dt{ font-size:12.5px; color: var(--steel); margin-bottom:3px; }
.props-grid dd{ font-family: var(--font-display); font-size:14.5px; font-weight:600; color: var(--ink); }

.product-detail-inquiry{ margin: 10px 0 22px; padding: 15px 32px; font-size:15px; }

.product-tags{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--steel-line); }
.tag-label{ font-size:12.5px; font-weight:700; color: var(--steel); }
.product-tag-pill{
  font-size:12px; color: var(--steel); border:1px solid var(--steel-line); border-radius:20px;
  padding:6px 14px; transition: all .18s ease;
}
.product-tag-pill:hover{ background: var(--ink); color:#fff; border-color: var(--ink); }

@media (max-width: 900px){
  .product-detail-layout{ grid-template-columns: 1fr; gap:28px; }
  .product-gallery{ position: static; }
}
@media (max-width: 640px){
  .product-gallery-thumbs{ grid-template-columns: repeat(4, 1fr); gap:8px; }
  .props-grid{ grid-template-columns: 1fr; gap: 10px; }
  .product-detail-inquiry{ width:100%; justify-content:center; }
}

/* --- Specifications table --- */
.product-specs{ padding: 64px 0; background: var(--paper-2); }
.specs-table{
  max-width: 900px; margin: 0 auto; border:1px solid var(--steel-line); border-radius: var(--radius);
  overflow:hidden; background: var(--paper);
}
.specs-row{ display:grid; grid-template-columns: 1fr 1fr; }
.specs-row:not(:last-child){ border-bottom:1px solid var(--steel-line); }
.specs-key, .specs-val{ padding: 14px 20px; font-size:13.5px; }
.specs-key{ background: var(--paper-2); color: var(--steel); font-weight:600; border-right:1px solid var(--steel-line); }
.specs-val{ color: var(--ink); font-weight:600; }
.specs-highlight{ max-width:900px; margin: 20px auto 0; font-size:13.5px; color: var(--steel); text-align:center; }
.specs-highlight strong{ color: var(--ink); }

@media (max-width: 640px){
  .specs-row{ grid-template-columns: 1fr; }
  .specs-key{ border-right:none; border-bottom:1px solid var(--steel-line); padding-bottom:6px; }
  .specs-val{ padding-top:6px; }
}

/* --- Product description --- */
.product-description{ padding: 64px 0; background: var(--paper); }
.product-description h3{
  font-family: var(--font-display); font-size:17px; font-weight:700; color: var(--ink);
  text-align:center; margin-bottom: 28px;
}
.description-table{
  max-width: 900px; margin: 0 auto; border:1px solid var(--steel-line); border-radius: var(--radius);
  overflow:hidden;
}
.desc-row{ display:grid; grid-template-columns: 0.8fr 1.2fr; }
.desc-row:nth-child(odd){ background: var(--paper-2); }
.desc-row:not(:last-child){ border-bottom:1px solid var(--steel-line); }
.desc-key, .desc-val{ padding: 12px 20px; font-size:13px; }
.desc-key{ color: var(--steel); font-weight:600; border-right:1px solid var(--steel-line); }
.desc-val{ color: var(--ink); }
.description-copy{ max-width: 820px; margin: 26px auto 0; font-size:14.5px; line-height:1.75; color: var(--steel); text-align:center; }

@media (max-width: 640px){
  .desc-row{ grid-template-columns: 1fr; }
  .desc-key{ border-right:none; border-bottom:1px solid var(--steel-line); padding-bottom:6px; }
  .desc-val{ padding-top:6px; }
}

/* --- Related products --- */
.related-products{ padding: 64px 0; background: var(--paper-2); }
.related-products + .contact-team{ background: var(--paper); }