/* ==========================================================================
   Machines Equipments — mfg.css
   Design system layer on top of Bootstrap 5.3
   Direction: "Spec plate" — engineering datasheet vernacular.
   Load AFTER bootstrap.min.css. Replaces style1.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette sampled straight from the logo file:
       #263A4F  navy   (the "M")
       #9FC92F  lime   (the "E" and the dot)
     Contrast notes, measured:
       lime on white ....... 1.93:1  -> fills and rules only, NEVER text
       navy on lime ........ 6.04:1  -> button labels, passes AA
       white on lime ....... 1.93:1  -> do not use
       --accent-dk on white  4.91:1  -> the darkened lime for link text */
  --ink:        #263A4F;
  --ink-2:      #33495F;
  --ink-3:      #1B2A3A;
  --steel:      #5C6F7F;
  --steel-2:    #93A8B6;
  --paper:      #FFFFFF;
  --paper-2:    #F3F5F4;
  --paper-3:    #E7EBEA;
  --rule:       #D7DEE2;
  --accent:     #9FC92F;
  --accent-dk:  #5E7A18;
  --accent-ink: #263A4F;

  /* Type */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale */
  --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.15vw, 1.03rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.30rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.85rem, 1.55rem + 1.50vw, 2.85rem);
  --step-4:  clamp(2.35rem, 1.75rem + 2.90vw, 4.35rem);

  /* Structure */
  --chamfer: 12px;
  --shell: 1240px;
  --header-h: 76px;

  --shadow-1: 0 1px 2px rgba(38, 58, 79, .06), 0 6px 20px rgba(38, 58, 79, .07);
  --shadow-2: 0 2px 4px rgba(38, 58, 79, .09), 0 18px 44px rgba(38, 58, 79, .14);

  /* Bootstrap variable overrides */
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--ink-2);
  --bs-body-bg: var(--paper);
  --bs-primary: var(--ink);
  --bs-link-color: var(--ink);
  --bs-link-hover-color: var(--accent-dk);
  --bs-border-color: var(--rule);
  --bs-border-radius: 0;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.1;
  text-wrap: balance;
}

h1, .h1 { font-size: var(--step-4); font-weight: 800; }
h2, .h2 { font-size: var(--step-3); }
h3, .h3 { font-size: var(--step-1); letter-spacing: -0.012em; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--accent-dk); }

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

ul, ol { margin: 0; padding: 0; }

hr { border-color: var(--rule); opacity: 1; }

::selection { background: var(--accent); color: var(--accent-ink); }

.container { max-width: var(--shell); padding-inline: 20px; }

/* Accessibility floor ---------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 2000;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

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

/* --------------------------------------------------------------------------
   3. Signature elements
   -------------------------------------------------------------------------- */

/* 3a. Spec label — the monospace nameplate used to title every section.
       Encodes section order, which is real navigational information. */
.spec-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 14px;
}
.spec-label::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex: none;
}
.spec-label b { font-weight: 600; color: var(--ink); }
.on-ink .spec-label { color: var(--steel-2); }
.on-ink .spec-label b { color: #fff; }

/* 3b. Hazard rule — used exactly once, closing the hero. */
.hazard-rule {
  height: 6px;
  width: 100%;
  background: repeating-linear-gradient(
    135deg,
    var(--accent) 0 14px,
    var(--ink) 14px 28px
  );
}

/* 3c. Chamfered controls — sheet-metal cut corner. Buttons only. */
.btn-mfg,
.btn-mfg-ghost,
.btn-mfg-line {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  border: 0;
  cursor: pointer;
  background: var(--btn-bg);
  color: var(--btn-fg);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    var(--chamfer) 100%,
    0 calc(100% - var(--chamfer))
  );
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.btn-mfg:hover { --btn-bg: var(--ink); --btn-fg: #fff; color: #fff; transform: translateY(-2px); }

.btn-mfg-ghost { --btn-bg: var(--ink); --btn-fg: #fff; }
.btn-mfg-ghost:hover { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); color: var(--accent-ink); transform: translateY(-2px); }

.btn-mfg-line {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
  clip-path: none;
}
.btn-mfg-line:hover { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px #fff; }

.btn-mfg-sm { padding: 11px 20px; font-size: .7rem; --chamfer: 9px; }

/* 3d. Plate card — hairline square card with hi-vis load bar on hover. */
.plate {
  position: relative;
  display: block;
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}
.plate::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.plate:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-2);
  transform: translateY(-4px);
}
.plate:hover::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   4. Section rhythm
   -------------------------------------------------------------------------- */
.section { padding: clamp(56px, 7vw, 104px) 0; }
.section--tight { padding: clamp(40px, 5vw, 68px) 0; }
.section--paper { background: var(--paper-2); }
.section--ink { background: var(--ink); color: #E4EAE8; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }

.section-head { max-width: 780px; margin-bottom: clamp(28px, 4vw, 52px); }
.section-head p { color: var(--steel); font-size: var(--step-1); margin-top: 14px; }
.section--ink .section-head p { color: var(--steel-2); }

.lede { font-size: var(--step-1); color: var(--steel); line-height: 1.6; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.utility-bar {
  background: var(--ink);
  color: var(--steel-2);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  padding: 9px 0;
}
.utility-bar a { color: #fff; }
.utility-bar a:hover { color: var(--accent); }
.utility-bar .u-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  list-style: none;
}
.utility-bar .u-dot { color: var(--accent); }

.topheader {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .25s ease;
}
.topheader.fixed { box-shadow: var(--shadow-1); }

.header-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: var(--header-h);
}

.logo { flex: none; }
.logo img { max-height: 46px; width: auto; display: block; }

.topmenu { margin-left: auto; }
.topmenu > ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.topmenu > ul > li > a {
  display: block;
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-2);
  position: relative;
}
.topmenu > ul > li > a::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 4px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.topmenu > ul > li > a:hover::after,
.topmenu > ul > li.active > a::after { transform: scaleX(1); }
.topmenu > ul > li.active > a { color: var(--ink); font-weight: 600; }

/* Mega / dropdown ---------------------------------------------------------
   subcategorylist.php emits:

     <li class="sub-menu1">                 <- the nav item, from header1.php
       <div class="submenusec">             <- the panel (a DIV, not a UL)
         <ul id="grid2" class="sub-menu1">  <- reuses the SAME class as the <li>
           <li class="grid-item"><a><span>Category</span></a>
             <ul class="sub-sub-menu">...   <- optional third level
           </li>

   Two traps in that markup. The inner <ul> repeats .sub-menu1, so any rule
   written as `.sub-menu1 > ul` styles the inner list as a second floating panel
   on top of the real one. And the panel is a <div>, so `.sub-menu1 > ul` never
   matched the panel to begin with. Everything below is therefore scoped to
   `.topmenu > ul > li.sub-menu1` (the nav item only) and targets .submenusec
   explicitly.

   Layout uses CSS multi-column rather than grid: categories have wildly
   different numbers of sub-items, and columns flow variable-height blocks
   without leaving the ragged gaps a grid row would. It also replaces the
   Masonry call that used to lay this list out in JS. */

.topmenu > ul > li.sub-menu1 { position: relative; }

.topmenu > ul > li.sub-menu1 > .submenusec {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 320px;
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  box-shadow: var(--shadow-2);
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 60;
  max-height: 70vh;
  overflow-y: auto;
}
.topmenu > ul > li.sub-menu1:hover > .submenusec,
.topmenu > ul > li.sub-menu1:focus-within > .submenusec {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* the inner list: strip the UA list styling, and any inline styles Masonry
   may have left behind on an older cached page */
.topmenu .submenusec > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: static !important;
  height: auto !important;
}
.topmenu .submenusec > ul > li.grid-item {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  list-style: none;
}

/* Two levels, two clearly different jobs.
   Category = a heading: lime tick, heavier weight, hairline rule beneath.
   Sub-item = a link in a list: lighter, smaller, hung off a vertical guide so
   the group reads as belonging to the heading above it. */
.topmenu .submenusec a {
  display: block;
  color: var(--ink-2);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

/* --- level 1: category ---------------------------------------------------- */
.topmenu .submenusec > ul > li.grid-item {
  margin-bottom: 22px;
}
.topmenu .submenusec > ul > li.grid-item > a {
  position: relative;
  padding: 0 0 9px 16px;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.topmenu .submenusec > ul > li.grid-item > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 7px; height: 7px;
  background: var(--accent);
  transition: transform .18s ease;
}
.topmenu .submenusec > ul > li.grid-item > a:hover {
  color: var(--accent-dk);
  border-bottom-color: var(--accent);
}
.topmenu .submenusec > ul > li.grid-item > a:hover::before { transform: scale(1.45); }

/* --- level 2: sub-category ------------------------------------------------ */
.topmenu .submenusec .sub-sub-menu {
  list-style: none;
  margin: 0 0 0 3px;
  padding: 2px 0 2px 13px;
  border-left: 1px solid var(--rule);
}
.topmenu .submenusec .sub-sub-menu li a {
  position: relative;
  padding: 5px 8px 5px 12px;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--steel);
}
.topmenu .submenusec .sub-sub-menu li a::before {
  content: "";
  position: absolute;
  left: 0;
  top: .95em;
  width: 5px; height: 1px;
  background: var(--steel-2);
  transition: width .18s ease, background .18s ease;
}
.topmenu .submenusec .sub-sub-menu li a:hover {
  color: var(--ink);
  background: var(--paper-2);
}
.topmenu .submenusec .sub-sub-menu li a:hover::before {
  width: 8px;
  background: var(--accent);
}

@media (min-width: 992px) {
  .topheader .container { position: relative; }
  .topmenu > ul > li.sub-menu1 { position: static; }

  .topmenu > ul > li.sub-menu1 > .submenusec {
    top: 100%;                 /* flush with the header: a gap loses the hover */
    left: 0;
    right: 0;
    min-width: 0;
    padding: 24px 24px 20px;
    max-height: min(74vh, 580px);
    transform: translateY(6px);
  }
  .topmenu > ul > li.sub-menu1:hover > .submenusec,
  .topmenu > ul > li.sub-menu1:focus-within > .submenusec { transform: translateY(0); }

  .topmenu .submenusec > ul {
    columns: 4;
    column-gap: 34px;
    column-rule: 1px solid var(--rule);
  }
  .topmenu .submenusec > ul > li.grid-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 4px;
  }

  /* accordion toggles jQuery injects are mobile-only */
  .topmenu .ddclick1,
  .topmenu .ddclick { display: none; }
}

@media (min-width: 1400px) {
  .topmenu .submenusec > ul { columns: 5; }
}

/* Search */
.searchbox { flex: none; }
.searchbox form {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  transition: border-color .2s ease, background .2s ease;
}
.searchbox form:focus-within { border-color: var(--ink); background: #fff; }
.searchbox .text {
  border: 0;
  background: transparent;
  padding: 10px 14px;
  width: 190px;
  font-size: .86rem;
  color: var(--ink);
  outline: none;
}
.searchbox .text::placeholder { color: var(--steel-2); }
.searchbox .searchbtn {
  border: 0;
  background: var(--ink);
  color: #fff;
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.searchbox .searchbtn:hover { background: var(--accent); color: var(--accent-ink); }

.contactbtn { flex: none; order: 9; }

/* Mobile toggle */
.navicon {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--rule);
  background: #fff;
  position: relative;
  cursor: pointer;
  flex: none;
  order: 10;
}
.navicon span,
.navicon::before,
.navicon::after {
  content: "";
  position: absolute;
  left: 12px;
  width: 20px;
  height: 2px;
  background: var(--ink);
  transition: transform .25s ease, opacity .2s ease, width .25s ease;
}
.navicon::before { top: 15px; }
.navicon span { top: 22px; }
.navicon::after { top: 29px; width: 13px; }
.navicon.active::before { transform: translateY(7px) rotate(45deg); }
.navicon.active span { opacity: 0; }
.navicon.active::after { transform: translateY(-7px) rotate(-45deg); width: 20px; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.homebanner { position: relative; background: var(--ink); }

.bitem {
  position: relative;
  min-height: clamp(480px, 74vh, 720px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.bitem > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.bitem::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(38,58,79,.95) 0%, rgba(38,58,79,.82) 38%, rgba(38,58,79,.18) 78%);
}
/* Blueprint grid — subtle, hero only */
.bitem::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(100deg, #000 0%, transparent 62%);
  -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 62%);
}
.bitem .container { position: relative; z-index: 3; }

.slide { max-width: 740px; color: #fff; }
.slide h1,
.slide .h1 { color: #fff; margin: 0 0 20px; }
.slide h1 em,
.slide .h1 em {
  font-style: normal;
  color: var(--accent);
  display: block;
}
.slide p { color: rgba(255,255,255,.86); font-size: var(--step-1); max-width: 58ch; }
.slide .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* The banner "brief" field is authored in the admin and ships its own markup:
   .bleft > .btitle > small, plus an .btns anchor. Those classes lived in
   style1.css, so they must be restyled here or the hero renders as body text. */
.slide .bleft { position: relative; }

.slide .btitle {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: #fff;
  margin: 0 0 22px;
  text-wrap: balance;
}
.slide .btitle small {
  display: block;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  line-height: 1.4;
}

.slide .btns,
.slide .bleft a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 0;
  min-width: 0;
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    var(--chamfer) 100%,
    0 calc(100% - var(--chamfer))
  );
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.slide .btns:hover,
.slide .bleft a:hover {
  background: #fff;
  color: var(--ink);
  transform: translateY(-2px);
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.hero-kicker::before {
  content: "";
  width: 30px; height: 2px;
  background: var(--accent);
}

/* Owl dots on hero */
.homebanner .owl-dots {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 8px;
}
.homebanner .owl-dot span {
  display: block;
  width: 30px; height: 3px;
  background: rgba(255,255,255,.35);
  transition: background .2s ease;
}
.homebanner .owl-dot.active span { background: var(--accent); }

/* Inner page banner */
.innerbanner {
  background: var(--ink);
  color: #fff;
  padding: clamp(52px, 7vw, 92px) 0 clamp(44px, 6vw, 76px);
  position: relative;
  overflow: hidden;
}
.innerbanner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 100% at 100% 0%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000, transparent 70%);
}
.innerbanner .container { position: relative; z-index: 2; }
.innerbanner h1 { color: #fff; max-width: 22ch; }

/* Breadcrumbs */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel-2);
  margin-bottom: 18px;
}
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--accent); }
.crumbs a { color: rgba(255,255,255,.8); }
.crumbs a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   7. Capability strip
   -------------------------------------------------------------------------- */
.capstrip {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}
.capstrip .cap {
  /* Column, not block: "Installation, commissioning" is longer than the other
     three titles and wraps to two lines. Letting the title grow and pinning the
     caption to the bottom keeps all four captions on one baseline, so the wrap
     reads as deliberate instead of broken. */
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 104px;
  padding: 24px 16px 22px 22px;
  border-left: 1px solid var(--rule);
  color: inherit;
  transition: background .18s ease, box-shadow .18s ease;
}
a.cap:hover { background: var(--paper); box-shadow: inset 3px 0 0 var(--accent); color: inherit; }
a.cap:hover .cap-n { color: var(--accent-dk); }
a.cap .cap-n { transition: color .18s ease; }
.capstrip .cap-n {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 0.75vw, 1.72rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-wrap: balance;
}
.capstrip .cap-t {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 12px 0 0;
  padding-top: 0;
  align-self: flex-start;
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   8. Category grid
   -------------------------------------------------------------------------- */
.catgrid { list-style: none; }

.productbox {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 22px 24px;
}
.productimg {
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: var(--paper-2);
  transition: background .25s ease;
}
.plate:hover .productimg { background: var(--paper-3); }
.productimg img {
  max-height: 108px;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.producttitle {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.008em;
}
.productbox .go {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .2s ease, gap .2s ease;
}
.plate:hover .productbox .go { color: var(--accent-dk); gap: 12px; }

/* --------------------------------------------------------------------------
   9. Product carousel
   -------------------------------------------------------------------------- */
.pritem { height: 100%; }
.prbox { display: flex; flex-direction: column; height: 100%; }
.primg {
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  padding: 16px;
  overflow: hidden;
}
.primg img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
  mix-blend-mode: multiply;
}
.plate:hover .primg img { transform: scale(1.05); }
.prtitle {
  font-size: .98rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  padding: 18px 20px 20px;
  line-height: 1.35;
}

/* Owl nav */
.featurelist .owl-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 26px; }
.featurelist .owl-nav button {
  width: 46px; height: 46px;
  border: 1px solid var(--rule) !important;
  background: #fff !important;
  color: var(--ink) !important;
  font-size: 1.2rem !important;
  line-height: 1;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.featurelist .owl-nav button:hover {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
}
.featurelist .owl-nav button.disabled { opacity: .35; }

.btnfull { text-align: center; margin-top: 44px; }

/* --------------------------------------------------------------------------
   10. Why-us / capability panel
   -------------------------------------------------------------------------- */
.stripbg { position: relative; }

.whygrid { list-style: none; }
.why-item {
  display: flex;
  gap: 16px;
  padding: 24px 22px;
  height: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.why-item:hover {
  background: rgba(255,255,255,.07);
  border-color: var(--accent);
  transform: translateY(-3px);
}
.why-item .icons {
  flex: none;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  /* White tile, not amber: icon1–4.png are green line drawings on a
     transparent background and disappear against the accent colour. */
  background: #fff;
  color: var(--ink);
  font-size: 1.25rem;
  box-shadow: inset 0 -3px 0 var(--accent);
}
.why-item .icons img { width: 28px; height: 28px; }

.why-item h3 { color: #fff; font-size: 1rem; margin: 0 0 6px; }
.why-item p { color: var(--steel-2); font-size: .9rem; margin: 0; }

/* --------------------------------------------------------------------------
   11. About block
   -------------------------------------------------------------------------- */
.aboutsec .aboutimg1 { position: relative; }
.aboutsec .aboutimg1 img { width: 100%; display: block; }
.aboutsec .aboutimg1::after {
  content: "";
  position: absolute;
  right: -14px; bottom: -14px;
  width: 46%; height: 58%;
  border-right: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  pointer-events: none;
}
.aboutcontents .readmore { margin-top: 24px; }

.aboutinner .aboutcontents h2 { margin-top: 30px; margin-bottom: 14px; font-size: var(--step-2); }
.aboutinner .aboutcontents h2:first-child,
.aboutinner .aboutcontents .spec-label + h2 { margin-top: 0; }
.aboutinner .aboutcontents p { color: var(--ink-2); }

/* Spec list — the product-line list rendered as a datasheet, not prose */
.spec-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
}
.spec-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--rule);
  font-size: .92rem;
  color: var(--ink-2);
}
.spec-list li b { font-weight: 600; color: var(--ink); }
.spec-list li .port {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel);
}
.spec-list li::before {
  content: counter(spec, decimal-leading-zero);
  padding-top: 2px;
  counter-increment: spec;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--accent-dk);
  flex: none;
}
.spec-list { counter-reset: spec; }

.keyfeatures {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.keyfeatures li {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 14px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   12. Blog
   -------------------------------------------------------------------------- */
.blogitem { height: 100%; }
.newsbox { display: flex; flex-direction: column; height: 100%; }
.newsimg { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.newsimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.plate:hover .newsimg img { transform: scale(1.06); }
.newscontent { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.dats {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-dk);
  margin: 0 0 10px;
}
.blogtitle {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 10px;
  letter-spacing: -0.012em;
}
.blogbrief {
  font-size: .9rem;
  color: var(--steel);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   13. Enquiry form
   -------------------------------------------------------------------------- */
.formbox {
  background: #fff;
  border: 1px solid var(--rule);
  padding: clamp(24px, 4vw, 42px);
}
.formbox .form-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 7px;
}
.formbox .form-control {
  border-radius: 0;
  border: 1px solid var(--rule);
  padding: 12px 14px;
  font-size: .95rem;
  color: var(--ink);
  background: var(--paper-2);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.formbox .form-control:focus {
  border-color: var(--ink);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(159,201,47,.35);
}
.formbox .form-control::placeholder { color: var(--steel-2); }

.captcha-q {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.form-note {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--steel);
}

.alert-mfg {
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
  background: #F5FAE9;
  color: var(--ink);
  padding: 14px 18px;
  font-size: .92rem;
  margin-bottom: 22px;
}

/* Contact detail cards */
.contact-card {
  padding: 26px 24px;
  height: 100%;
}
.contact-card .ci {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--ink);
  color: var(--accent);
  font-size: 1.2rem;
  margin-bottom: 16px;
}
.contact-card h3 { font-size: .95rem; margin: 0 0 6px; }
.contact-card a, .contact-card p { font-size: .95rem; color: var(--steel); word-break: break-word; }
.contact-card a:hover { color: var(--accent-dk); }

/* --------------------------------------------------------------------------
   14. Floating support dock
   -------------------------------------------------------------------------- */
.support {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 1040;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  box-shadow: var(--shadow-2);
  transition: transform .2s ease, background .2s ease;
}
.support:hover { transform: scale(1.06); }
.support img { width: 24px; height: 24px; }

.inner-fabs {
  position: fixed;
  right: 20px; bottom: 86px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.inner-fabs.show { opacity: 1; visibility: visible; transform: translateY(0); }
.inner-fabs a {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--ink);
  color: #fff;
  font-size: 1.15rem;
  box-shadow: var(--shadow-1);
  transition: background .18s ease, color .18s ease;
}
.inner-fabs a:hover { background: var(--accent); color: var(--accent-ink); }

#back-top {
  position: fixed;
  left: 20px; bottom: 20px;
  z-index: 1035;
  display: none;
}
#back-top a {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--ink);
  color: #fff;
  font-size: 1rem;
}
#back-top a:hover { background: var(--accent); color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.footersec {
  background: var(--ink);
  color: var(--steel-2);
  padding: clamp(52px, 6vw, 84px) 0 40px;
  border-top: 6px solid var(--accent);
}
.footersec .flogo img { max-height: 60px; width: auto; margin-bottom: 20px; }
.footersec p { font-size: .9rem; color: var(--steel-2); }

.footertitle {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.footersec ul { list-style: none; }
.footersec ul li { margin-bottom: 9px; }
.footersec ul li a {
  font-size: .89rem;
  color: var(--steel-2);
  display: inline-block;
  transition: color .18s ease, transform .18s ease;
}
.footersec ul li a:hover { color: var(--accent); transform: translateX(3px); }
.footersec ul li.active > a { color: #fff; }

.footer-cats {
  columns: 3;
  column-gap: 28px;
}
.footer-cats li { break-inside: avoid; }

.fsocial { display: flex; gap: 10px; margin-top: 18px; }
.fsocial a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-size: 1rem;
}
.fsocial a:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.copyright {
  background: var(--ink-3);
  color: var(--steel);
  padding: 18px 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .05em;
}
.copyright a { color: var(--steel-2); }
.copyright a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   16. Motion
   -------------------------------------------------------------------------- */
/* Uses `translate` rather than `transform` so it composes with the -4px hover
   lift on .plate instead of cancelling it. The transition list repeats the
   hover properties because a later same-specificity rule replaces the whole
   shorthand — without them, border and shadow would snap on hover.
   The JS drops both classes on transitionend, restoring each element's own
   transition timing. */
.reveal {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity .6s cubic-bezier(.2,.7,.3,1),
    translate .6s cubic-bezier(.2,.7,.3,1),
    border-color .2s ease,
    box-shadow .25s ease,
    background .22s ease,
    transform .25s cubic-bezier(.2,.7,.3,1);
}
.reveal.in { opacity: 1; translate: 0 0; }

/* Owl carousels: equalise card heights across the visible slides. */
.featurelist .owl-stage,
.blogslide .owl-stage { display: flex; }
.featurelist .owl-item,
.blogslide .owl-item { display: flex; height: auto; flex: 0 0 auto; }
.featurelist .owl-item > div,
.blogslide .owl-item > div { width: 100%; }

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .searchbox .text { width: 140px; }
  .topmenu > ul > li > a { padding: 11px 11px; font-size: .82rem; letter-spacing: .04em; }
  .footer-cats { columns: 2; }
}

@media (max-width: 991.98px) {
  :root { --header-h: 66px; }

  .navicon { display: block; }
  .searchbox { order: 8; }

  .topmenu {
    position: fixed;
    top: var(--header-h);
    right: 0;
    width: min(340px, 88vw);
    height: calc(100dvh - var(--header-h));
    background: #fff;
    border-left: 1px solid var(--rule);
    box-shadow: var(--shadow-2);
    padding: 12px 0 40px;
    overflow-y: auto;
    transform: translateX(105%);
    transition: transform .3s cubic-bezier(.2,.7,.3,1);
    margin-left: 0;
  }
  .topmenu.showmenu { transform: translateX(0); }
  .topmenu > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .topmenu > ul > li { border-bottom: 1px solid var(--rule); }
  .topmenu > ul > li > a { padding: 15px 22px; font-size: .92rem; }
  .topmenu > ul > li > a::after { display: none; }
  .topmenu > ul > li.active > a { border-left: 3px solid var(--accent); }

  .topmenu > ul > li.sub-menu1 > .submenusec {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    box-shadow: none;
    border: 0;
    border-top: 1px solid var(--rule);
    background: var(--paper-2);
    max-height: none;
    min-width: 0;
    padding: 0;
    overflow: visible;
  }
  .topmenu .submenusec > ul { columns: 1; column-rule: none; }
  .topmenu .submenusec > ul > li.grid-item { margin-bottom: 0; }
  .topmenu .submenusec > ul > li.grid-item > a {
    padding: 13px 16px 13px 38px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--rule);
  }
  .topmenu .submenusec > ul > li.grid-item > a::before { left: 22px; top: 1.15em; }
  .topmenu .submenusec .sub-sub-menu {
    margin: 0 0 0 28px;
    padding: 6px 0 10px 12px;
  }
  .topmenu .submenusec .sub-sub-menu li a { padding: 9px 10px 9px 14px; font-size: .84rem; }
  .topmenu .submenusec .sub-sub-menu li a::before { top: 1.15em; }
  .ddclick1, .ddclick {
    position: absolute;
    right: 10px;
    margin-top: -46px;
    width: 44px; height: 44px;
    cursor: pointer;
  }
  .ddclick1::after, .ddclick::after {
    content: "+";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: 1.15rem;
    color: var(--steel);
  }
  .ddclick1.active::after, .ddclick.active::after { content: "\2013"; color: var(--accent-dk); }

  .capstrip .cap { border-left: 0; padding-left: 4px; }
  .aboutsec .aboutimg1 { margin-bottom: 32px; }
  .aboutsec .aboutimg1::after { display: none; }
  .footer-cats { columns: 2; }
}

@media (max-width: 767.98px) {
  .utility-bar { display: none; }
  .searchbox { display: none; }
  .contactbtn .btn-mfg { padding: 12px 18px; font-size: .7rem; }
  .logo img { max-height: 38px; }

  .bitem { min-height: 460px; }
  .slide { max-width: 100%; }
  .slide .hero-actions { flex-direction: column; align-items: stretch; }
  .slide .hero-actions .btn-mfg,
  .slide .hero-actions .btn-mfg-line { width: 100%; }

  .footer-cats { columns: 1; }
  .featurelist .owl-nav { justify-content: center; }
  .support { right: 14px; bottom: 14px; }
  .inner-fabs { right: 14px; bottom: 78px; }
  #back-top { left: 14px; bottom: 14px; }
}

/* --------------------------------------------------------------------------
   18. Print
   -------------------------------------------------------------------------- */
@media print {
  .topheader, .utility-bar, .support, .inner-fabs, #back-top, .footersec { display: none !important; }
  body { color: #000; }
}

/* --------------------------------------------------------------------------
   19. SEO content blocks (replaces the enquiry forms)
   -------------------------------------------------------------------------- */

/* 19a. Prose column — long-form copy Google can actually read */
.prose { max-width: 74ch; }
.prose h2 { font-size: var(--step-2); margin: 0 0 16px; }
.prose h3 {
  font-size: var(--step-1);
  margin: 34px 0 10px;
  padding-left: 14px;
  border-left: 3px solid var(--accent);
}
.prose p { color: var(--ink-2); margin-bottom: 14px; }
.prose a { color: var(--accent-dk); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); }
.prose strong { color: var(--ink); font-weight: 600; }

/* 19b. Process — a real four-step sequence, so numbering carries meaning */
.process { list-style: none; counter-reset: step; }
.process li {
  counter-increment: step;
  position: relative;
  padding: 26px 22px 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  height: 100%;
}
.process li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--accent-dk);
  margin-bottom: 12px;
}
.process h3 { font-size: 1rem; margin: 0 0 8px; }
.process p { font-size: .9rem; color: var(--steel); margin: 0; }
.section--ink .process li { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.section--ink .process li::before { color: var(--accent); }
.section--ink .process p { color: var(--steel-2); }

/* 19c. FAQ — native <details>, so the answers are in the DOM with no JS */
.faq { border-top: 1px solid var(--rule); }
.faq details {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.faq summary {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.012em;
  transition: color .18s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-dk); }
.faq summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent-dk);
  transition: transform .22s ease;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details[open] summary { color: var(--accent-dk); }
.faq .faq-a { padding: 0 44px 24px 4px; }
.faq .faq-a p { color: var(--ink-2); margin-bottom: 10px; }
.faq .faq-a p:last-child { margin-bottom: 0; }
.faq .faq-a a { color: var(--accent-dk); text-decoration: underline; text-underline-offset: 3px; }

/* 19d. Division cards — internal linking to every category, with icons.
        The "manufacturers and suppliers" suffix stays inside the anchor (it is
        the phrase people search) but is demoted to a caption so the division
        name is what the eye lands on. */
.divgrid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.divcard {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  height: 100%;
  padding: 18px 18px 18px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}
.divcard::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.divcard:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-1);
  transform: translateY(-3px);
}
.divcard:hover::before { transform: scaleY(1); }

.divcard .dv-ic {
  flex: none;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: var(--paper-2);
  color: var(--ink);
  transition: background .2s ease, color .2s ease;
}
.divcard .dv-ic svg {
  width: 24px; height: 24px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.divcard:hover .dv-ic { background: var(--accent); color: var(--accent-ink); }

.divcard .dv-t { min-width: 0; }
.divcard .dv-n {
  display: block;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
  transition: color .18s ease;
}
.divcard .dv-s {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--steel);
}
.divcard:hover .dv-n { color: var(--accent-dk); }

@media (max-width: 400px) {
  .divgrid { grid-template-columns: 1fr; }
  .divcard { padding: 15px; gap: 12px; }
  .divcard .dv-ic { width: 38px; height: 38px; }
  .divcard .dv-ic svg { width: 21px; height: 21px; }
}

/* 19e. Closing call to action — email and WhatsApp, no form */
.ctaband {
  background: var(--ink);
  color: #fff;
  padding: clamp(40px, 5vw, 66px) 0;
  border-top: 6px solid var(--accent);
}
.ctaband h2 { color: #fff; margin: 0; }
.ctaband p { color: var(--steel-2); margin-top: 12px; }
.ctaband .cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }

@media (max-width: 575.98px) {
  .ctaband .cta-actions .btn-mfg,
  .ctaband .cta-actions .btn-mfg-line { width: 100%; }
}

/* --------------------------------------------------------------------------
   20. Inner pages — product listing, article list, article detail
   NOTE: .details / .details_name / .disc1 / .btngroup / .productsb are the
   class names products_ajax.php emits when it appends more products on scroll.
   They are styled here rather than renamed, so infinitely-scrolled items look
   identical to the first page.
   -------------------------------------------------------------------------- */

/* 20a. Breadcrumbs used by the legacy breadcrumbs() helper */
.innerbanner .breadcrumbs {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel-2);
  margin-bottom: 16px;
}
.innerbanner .breadcrumbs a { color: rgba(255,255,255,.82); }
.innerbanner .breadcrumbs a:hover { color: var(--accent); }

/* 20b. Sidebar (left_pannel.php, article-left.php) */
.sidebar { border: 1px solid var(--rule); background: var(--paper); }
.sidebar + .sidebar { margin-top: 22px; }

.shead {
  position: relative;
  background: var(--ink);
  padding: 16px 20px;
  cursor: pointer;
}
.shead h2 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
.shead h2 i { color: var(--accent); font-size: .9rem; }
.shead .submenu-toogle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  transition: transform .2s ease;
}

.left_section { padding: 6px 0; }

#cssmenu ul { list-style: none; }
#cssmenu > ul > li { border-bottom: 1px solid var(--rule); }
#cssmenu > ul > li:last-child { border-bottom: 0; }
#cssmenu > ul > li > a {
  position: relative;
  display: block;
  padding: 12px 18px 12px 30px;
  font-size: .88rem;
  line-height: 1.4;
  color: var(--ink-2);
  transition: background .16s ease, color .16s ease;
}
#cssmenu > ul > li > a::before {
  content: "";
  position: absolute;
  left: 16px; top: 1.15em;
  width: 6px; height: 6px;
  background: var(--accent);
  transition: transform .18s ease;
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
  background: var(--paper-2);
  color: var(--ink);
}
#cssmenu > ul > li > a:hover::before { transform: scale(1.4); }
#cssmenu ul ul,
#cssmenu .submenu {
  background: var(--paper-2);
  padding: 4px 0;
  display: none;              /* jQuery slideToggle opens it */
  border-top: 1px solid var(--rule);
}
#cssmenu ul ul li a,
#cssmenu .submenu li a {
  display: block;
  padding: 8px 18px 8px 34px;
  font-size: .82rem;
  color: var(--steel);
  line-height: 1.4;
}
#cssmenu ul ul li a:hover,
#cssmenu .submenu li a:hover { color: var(--ink); background: var(--paper-3); }

/* expand/collapse control jQuery injects after each parent link */
#cssmenu .has-child { position: relative; }
#cssmenu .has-child > a { padding-right: 46px; }
#cssmenu .submenu-toogle {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--steel);
  cursor: pointer;
  z-index: 2;
  transition: transform .22s ease, color .18s ease;
}
#cssmenu .submenu-toogle:hover { color: var(--accent-dk); }
#cssmenu .submenu-toogle.rot { transform: rotate(180deg); color: var(--accent-dk); }

/* the current category */
#cssmenu > ul > li.active > a { background: var(--paper-2); color: var(--ink); font-weight: 600; }
#cssmenu > ul > li.active > a::before { transform: scale(1.4); }

.sidebar-foot { padding: 14px; border-top: 1px solid var(--rule); }
.sidebar-foot .btn-mfg { display: flex; }

/* 20c. Product listing — category tiles */
.productsb {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}
.productsb:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-2);
  transform: translateY(-4px);
}
.productsb .productimage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 170px;
  padding: 16px;
  background: var(--paper-2);
}
.productsb .productimage img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.productsb .product_name { padding: 16px 18px 18px; }
.productsb .product_name a {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.productsb:hover .product_name a { color: var(--accent-dk); }

/* 20d. Product listing — product rows (also emitted by products_ajax.php) */
.product_listing_box { margin-top: 8px; }

.details {
  margin: 0 0 18px;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--rule);
  --bs-gutter-x: 1.5rem;
  transition: border-color .2s ease, box-shadow .25s ease;
}
.details:hover { border-color: var(--ink); box-shadow: var(--shadow-1); }
.details .img-thumbnail {
  border-radius: 0;
  border: 1px solid var(--rule);
  padding: 10px;
  background: var(--paper-2);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.details_name h3 {
  font-size: var(--step-1);
  margin: 0 0 8px;
  line-height: 1.25;
}
.details_name h3 a { color: var(--ink); }
.details_name h3 a:hover { color: var(--accent-dk); }
.details_name > span {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel);
  padding: 6px 10px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  margin-bottom: 12px;
}
.details_name > span strong { color: var(--ink); }
.details_name .disc1 {
  font-size: .92rem;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}
.details_name br { display: none; }

.btngroup { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.btngroup .btn,
.btngroup input.btn {
  border-radius: 0;
  border: 0;
  padding: 12px 24px;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.btngroup .btn:hover,
.btngroup input.btn:hover { background: var(--ink); color: #fff; }
.btngroup form { margin: 0; }

.loading_page {
  padding: 24px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel);
}

.loading_bar {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 2000;
  background: linear-gradient(90deg, var(--accent) 0%, var(--ink) 50%, var(--accent) 100%);
  background-size: 200% 100%;
  animation: loadbar 1.1s linear infinite;
}
@keyframes loadbar { from { background-position: 200% 0; } to { background-position: 0 0; } }

/* category intro copy coming out of the CMS */
.cat-intro { color: var(--ink-2); }
.cat-intro h2, .cat-intro h3 { font-size: var(--step-1); margin: 26px 0 10px; }
.cat-intro ul, .cat-intro ol { padding-left: 20px; margin-bottom: 14px; }
.cat-intro li { margin-bottom: 6px; }
.cat-intro table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .9rem; }
.cat-intro th, .cat-intro td { border: 1px solid var(--rule); padding: 9px 12px; text-align: left; }
.cat-intro th { background: var(--paper-2); font-weight: 600; color: var(--ink); }

/* 20e. Article list */
.alist > ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.alist > ul > li { display: flex; }
.alist .blogitem { width: 100%; }

/* 20f. Article detail */
.artimage1 { margin-bottom: 24px; border: 1px solid var(--rule); background: var(--paper-2); }
.artimage1 img { width: 100%; height: auto; display: block; }

.articles-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel);
  padding: 8px 14px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  margin-bottom: 22px;
}
.articles-date strong { color: var(--ink); font-weight: 600; }

.artbody { color: var(--ink-2); }
.artbody h2 { font-size: var(--step-2); margin: 34px 0 14px; }
.artbody h3 {
  font-size: var(--step-1);
  margin: 30px 0 10px;
  padding-left: 14px;
  border-left: 3px solid var(--accent);
}
.artbody h4 { font-size: 1.02rem; margin: 22px 0 8px; }
.artbody p { margin-bottom: 14px; }
.artbody img { max-width: 100%; height: auto; margin: 18px 0; border: 1px solid var(--rule); }
.artbody ul, .artbody ol { padding-left: 20px; margin-bottom: 16px; }
.artbody li { margin-bottom: 7px; }
.artbody a { color: var(--accent-dk); text-decoration: underline; text-underline-offset: 3px; }
.artbody a:hover { color: var(--ink); }
.artbody blockquote {
  margin: 22px 0;
  padding: 16px 20px;
  border-left: 3px solid var(--accent);
  background: var(--paper-2);
  color: var(--ink);
}
.artbody table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .9rem; }
.artbody th, .artbody td { border: 1px solid var(--rule); padding: 9px 12px; text-align: left; }
.artbody th { background: var(--paper-2); font-weight: 600; color: var(--ink); }

@media (max-width: 991.98px) {
  .sidebar { position: static !important; top: auto !important; }
  .sidebar .left_section { display: none; }
  .sidebar.is-open .left_section { display: block; }
  .shead { display: flex; align-items: center; justify-content: space-between; }
  .shead > .submenu-toogle {
    position: static;
    width: auto; height: auto;
    color: var(--accent);
    transform: none;
  }
  .shead > .submenu-toogle.rot { transform: rotate(180deg); }
  #cssmenu > ul > li > a { padding-top: 14px; padding-bottom: 14px; }
}

/* --------------------------------------------------------------------------
   21. Product detail
   -------------------------------------------------------------------------- */

.innerbanner--slim { padding: clamp(30px, 4vw, 48px) 0 clamp(26px, 3.5vw, 40px); }

/* 21a. Gallery */
.pd-gallery {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 22px;
}
.pd-gallery .rslides { position: relative; list-style: none; margin: 0; padding: 0; width: 100%; }
.pd-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.pd-gallery .rslides_tabs { display: flex; gap: 7px; justify-content: center; margin-top: 16px; list-style: none; padding: 0; }
.pd-gallery .rslides_tabs a { display: block; width: 26px; height: 3px; background: var(--rule); font-size: 0; }
.pd-gallery .rslides_here a { background: var(--accent); }

/* 21b. Meta table — code / categories / tags as a spec block */
.pd-meta { border-top: 1px solid var(--rule); margin: 22px 0 26px; }
.pd-meta .pd-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--rule);
  font-size: .92rem;
}
.pd-meta .pd-k {
  flex: 0 0 130px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--steel);
  padding-top: 3px;
}
.pd-meta .pd-v { flex: 1 1 200px; min-width: 0; color: var(--ink-2); }
.pd-meta .pd-v a { color: var(--accent-dk); }
.pd-meta .pd-v a:hover { color: var(--ink); text-decoration: underline; }
.pd-meta .pd-code {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .04em;
}

.pd-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.pd-tags a {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 11px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--ink-2);
}
.pd-tags a:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); text-decoration: none; }

.pd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* 21c. Tabs — easy-responsive-tabs.js generates these class names.
   css/tabs.css on the server is the unrelated "Zozo UI Tabs" plugin and has
   none of them, so the tabs have been rendering unstyled. Not loaded any more. */
.verticalTab { margin-top: clamp(40px, 5vw, 66px); }

ul.resp-tabs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--rule);
}
ul.resp-tabs-list li.resp-tab-item {
  padding: 14px 26px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
ul.resp-tabs-list li.resp-tab-item:hover { color: var(--ink); background: var(--paper-2); }
ul.resp-tabs-list li.resp-tab-active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.resp-tabs-container { padding-top: 26px; }
.resp-tab-content { padding: 4px 2px; }

h2.resp-accordion {
  display: none;
  cursor: pointer;
  margin: 0;
  padding: 15px 18px;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-bottom: 0;
}
h2.resp-accordion:last-of-type { border-bottom: 1px solid var(--rule); }
h2.resp-accordion.resp-tab-active { background: var(--ink); color: #fff; }
h2.resp-accordion .resp-arrow {
  float: right;
  width: 0; height: 0;
  margin-top: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--steel);
}
h2.resp-accordion.resp-tab-active .resp-arrow {
  border-top: 0;
  border-bottom: 6px solid var(--accent);
}

@media (max-width: 767.98px) {
  ul.resp-tabs-list { display: none; }
  h2.resp-accordion { display: block; }
  .resp-tabs-container { padding-top: 0; }
  .resp-tab-content { border: 1px solid var(--rule); border-top: 0; padding: 18px; }
}

/* 21d. Related products */
ul.shop {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
}
ul.shop > li { display: flex; }
ul.shop > li > .productsb { width: 100%; }

.section_header { margin-bottom: 26px; }
.section_header h2 { font-size: var(--step-2); margin: 0 0 10px; }
.section_header p { color: var(--steel); margin: 0; }