/* ==========================================================================
   EliteBlocc — Obsidian Forge Navigation
   File: assets/css/global/eb-header.css
   Version: 2.0

   Pairs with: template-parts/global/site-header.php
               assets/js/global/eb-nav.js

   DESIGN SYSTEM: Obsidian Forge
   Deep emerald-tinted near-black glass shell with:
     circuit grid texture in logo zone
     morphing amber pill highlight (JS-positioned)
     torch spotlight + bottom segment bar per nav link
     HUD micro-labels below nav items
     scanner sweep ambient animation
     pulsing amber bottom line
     molten amber CTA with shimmer + breathe glow
     Products mega panel (3 columns)
     About slim panel (right-aligned)
     Mobile drawer (full overlay)

   SECTIONS
   01. Keyframes
   02. Header shell
   03. Forge inner row
   04. Logo zone
   05. Links zone + morphing pill
   06. Nav list + items
   07. Nav link (torch, bar, HUD, chevron)
   08. Vertical divider
   09. Right zone (CTA + hamburger)
   10. Pulsing bottom line
   11. Scrolled state
   12. Products mega panel
   13. Mega card system
   14. About slim panel
   15. Mobile drawer
   16. Responsive
   17. Reduced motion
   ========================================================================== */


/* ── 01. KEYFRAMES ───────────────────────────────────────────────────────── */

@keyframes eb-forge-scan {
  0%   { transform: translateX(-100%); opacity: 0;   }
  4%   { opacity: 1; }
  96%  { opacity: 1; }
  100% { transform: translateX(2000%); opacity: 0;   }
}

@keyframes eb-forge-pulse {
  0%   { transform: translateX(-120%); opacity: 0;   }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(1100%); opacity: 0;   }
}

@keyframes eb-forge-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 0   rgba(240,160,48,0),
      0 4px 24px rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.22);
  }
  50% {
    box-shadow:
      0 0 0 5px rgba(240,160,48,.12),
      0 4px 24px rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.22);
  }
}

@keyframes eb-forge-shim {
  0%   { transform: translateX(-200%) skewX(-22deg); }
  100% { transform: translateX(400%)  skewX(-22deg); }
}

@keyframes eb-badge-patent {
  0%,100% { box-shadow: 0 0 0 0   rgba(99,102,241,.4); }
  50%     { box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
}

@keyframes eb-hud-enter {
  from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}

/* ── Drawer entrance keyframes ──────────────────────────────────────────── */

/* Panel chrome (header row, trust strip) — slides from right, fades */
@keyframes eb-draw-chrome-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* Nav items — slide in from the right, more distance than chrome */
@keyframes eb-draw-item-in {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* Icon boxes — pop scale with slight overshoot */
@keyframes eb-draw-ico-pop {
  from { opacity: 0; transform: scale(0.68); }
  to   { opacity: 1; transform: scale(1);    }
}

/* CTA button — scale-up from slightly squished */
@keyframes eb-draw-cta-in {
  from { opacity: 0; transform: translateY(8px) scaleX(0.92); }
  to   { opacity: 1; transform: translateY(0)   scaleX(1);    }
}

/* Language footer — rises from below */
@keyframes eb-draw-lang-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}


/* ── 02. HEADER SHELL ────────────────────────────────────────────────────── */

.eb-header {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  z-index:         var(--eb-z-sticky, 1000);
  display:         flex;
  flex-direction:  column;
  background:
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(6,55,37,.50) 0%, transparent 65%),
    linear-gradient(180deg, rgba(3,20,13,.99) 0%, rgba(1,10,7,1) 100%);
  backdrop-filter:         blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border-left:   2px solid rgba(16,185,129,.22);
  border-right:  2px solid rgba(16,185,129,.06);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(16,185,129,.09),
    0 8px 40px rgba(0,0,0,.30);
  min-height: 70px;
  overflow:   visible;
  transition: min-height 300ms ease, box-shadow 300ms ease, background 500ms ease;
}

/* Scanner sweep */
.eb-header::before {
  content:        '';
  position:       absolute;
  top:            0;
  bottom:         0;
  left:           0;
  width:          6%;
  background:     linear-gradient(to right,
    transparent,
    rgba(16,185,129,.03) 30%,
    rgba(16,185,129,.07) 50%,
    rgba(16,185,129,.03) 70%,
    transparent
  );
  transform:      translateX(-100%);
  animation:      eb-forge-scan 9s ease-in-out 4s infinite;
  pointer-events: none;
  z-index:        0;
}

body:not(.elementor-editor-active):not(.wp-admin) {
  padding-top: 70px;
}


/* ── 03. FORGE INNER ROW ─────────────────────────────────────────────────── */
/*
 * Full-screen-width forge row.
 * Three-zone layout: logo-zone (flex:1, left) | links-zone (auto, center) | right-zone (flex:1, right)
 * 50px padding left and right on desktop. Responsive cascade below.
 */

.eb-forge__inner {
  width:       100%;
  max-width:   none;
  margin:      0;
  padding:     0 50px;
  display:     flex;
  align-items: stretch;
  flex:        1;
  position:    relative;
  z-index:     2;
}


/* ── 04. LOGO ZONE ───────────────────────────────────────────────────────── */
/*
 * flex: 1 — grows to fill the left third.
 * No right border — the nav is now floating centrally,
 * so a hard border would look visually misaligned.
 */

.eb-forge__logo-zone {
  display:      flex;
  align-items:  center;
  padding:      0;
  flex:         1;
  flex-shrink:  0;
  position:     relative;
  overflow:     visible;
}

.eb-forge__logo-zone::before {
  content:  '';
  position: absolute;
  inset:    0;
  background:
    linear-gradient(90deg, rgba(16,185,129,.035) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(16,185,129,.035) 1px, transparent 1px);
  background-size: 14px 14px;
  pointer-events:  none;
}

.eb-logo {
  display:         inline-flex;
  align-items:     center;
  position:        relative;
  z-index:         1;
  font-family:     var(--eb-font-body);
  font-size:       clamp(1rem, 1.3vw, 1.2rem);
  font-weight:     700;
  letter-spacing:  0.1em;
  color:           var(--eb-text-primary, #fff);
  text-decoration: none;
  white-space:     nowrap;
  transition:      color .2s ease, transform .2s ease;
}

.eb-logo:hover,
.eb-logo:focus-visible {
  color:     var(--eb-color-gold-light, #fbbf24);
  transform: translateY(-1px);
}

.eb-logo__dim {
  color:       var(--eb-color-emerald-light, #10b981);
  font-weight: 500;
  margin-left: 0.08em;
  transition:  color .2s ease;
}

.eb-logo:hover .eb-logo__dim,
.eb-logo:focus-visible .eb-logo__dim {
  color: var(--eb-color-gold, #f59e0b);
}

/* ── Wordmark colour split: Elite = white · Blocc = emerald ─────────────── */
.eb-logo-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.eb-logo-wordmark__e {
  color: #ffffff;
  font-family:    var(--eb-font-body);
  font-weight:    700;
  transition:     color .2s ease;
}

.eb-logo-wordmark__b {
  color: var(--eb-color-emerald-light, #10b981);
  font-family:    var(--eb-font-body);
  font-weight:    700;
  transition:     color .2s ease;
}

.eb-logo:hover .eb-logo-wordmark__e,
.eb-logo:focus-visible .eb-logo-wordmark__e {
  color: var(--eb-color-gold-light, #fbbf24);
}

.eb-logo:hover .eb-logo-wordmark__b,
.eb-logo:focus-visible .eb-logo-wordmark__b {
  color: var(--eb-color-gold, #f59e0b);
}


/* ── 05. LINKS ZONE + MORPHING PILL ─────────────────────────────────────── */
/*
 * flex: 0 0 auto — only as wide as the nav items themselves.
 * With logo-zone and right-zone both at flex:1, this naturally sits centred.
 */

.eb-forge__links-zone {
  display:  flex;
  flex:     0 0 auto;
  position: relative;
  padding:  0 4px;
  overflow: visible;
}

.eb-forge__pill {
  position:       absolute;
  top:            50%;
  transform:      translateY(-50%);
  height:         34px;
  pointer-events: none;
  z-index:        0;
  border-radius:  8px;
  background:     linear-gradient(135deg, rgba(240,160,48,.09), rgba(240,160,48,.05));
  border:         0.5px solid rgba(240,160,48,.26);
  box-shadow:
    inset 0  1px 0 rgba(240,160,48,.14),
    inset 0 -1px 0 rgba(240,160,48,.06),
    0 0 14px rgba(240,160,48,.09);
  transition:
    left    320ms cubic-bezier(.22,1,.36,1),
    width   320ms cubic-bezier(.22,1,.36,1),
    opacity 200ms ease;
  will-change: left, width;
  opacity: 0;
}


/* ── 06. NAV LIST + ITEMS ────────────────────────────────────────────────── */

.eb-nav__list {
  display:     flex;
  list-style:  none;
  margin:      0;
  padding:     0;
  gap:         0;
  align-items: stretch;
  position:    relative;
  z-index:     1;
}

.eb-nav__item {
  position:    relative;
  display:     flex;
  align-items: stretch;
}

.eb-nav__item--mega,
.eb-nav__item--panel {
  position: static;
}


/* ── 07. NAV LINK ────────────────────────────────────────────────────────── */

.eb-nav__link {
  display:     flex;
  align-items: center;
  gap:         5px;
  height:      70px;
  padding:     0 20px;
  font-family:     var(--eb-font-body);
  font-size:       clamp(11px, 1.2vw, 12.5px);
  font-weight:     700;
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  color:           rgba(255,255,255,.72);
  background:      transparent;
  border:          0;
  cursor:          pointer;
  text-decoration: none;
  white-space:     nowrap;
  position:        relative;
  transition:      color .22s ease, letter-spacing .22s ease;
}

.eb-nav__link:hover,
.eb-nav__link:focus-visible,
.eb-nav__link[aria-expanded='true'],
.eb-nav__link.is-active {
  color:          rgba(255,255,255,.95);
  letter-spacing: 0.10em;
  outline:        none;
}

/*
 * Hello Elementor injects a global --e-global-color-accent (magenta/pink)
 * that bleeds into <button> focus/active states.
 * These overrides suppress it on all nav trigger elements.
 */
.eb-nav__trigger,
.eb-nav__trigger:hover,
.eb-nav__trigger:focus,
.eb-nav__trigger:active,
.eb-nav__trigger[aria-expanded='true'],
.eb-header .eb-nav__link,
.eb-header button.eb-nav__link {
  background-color: transparent !important;
  box-shadow:       none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Also guard the hamburger from Elementor pink */
.eb-hamburger,
.eb-hamburger:focus,
.eb-hamburger:active {
  background-color: transparent !important;
  box-shadow:       none !important;
}

/* Torch spotlight */
.eb-nav__link::before {
  content:        '';
  position:       absolute;
  bottom:         0;
  left:           50%;
  transform:      translateX(-50%);
  width:          0;
  height:         0;
  background:     radial-gradient(ellipse 80% 80% at 50% 100%, rgba(240,160,48,.12) 0%, transparent 70%);
  border-radius:  50%;
  opacity:        0;
  pointer-events: none;
  transition:
    width .3s cubic-bezier(.22,1,.36,1),
    height .3s cubic-bezier(.22,1,.36,1),
    opacity .25s ease;
}

.eb-nav__link:hover::before,
.eb-nav__link[aria-expanded='true']::before {
  width:  80px;
  height: 48px;
  opacity: 1;
}

/* Bottom segment bar */
.eb-nav__link::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             20%;
  right:            20%;
  height:           2px;
  background:       linear-gradient(90deg, transparent, rgba(240,160,48,.7), transparent);
  border-radius:    1px;
  transform:        scaleX(0);
  transform-origin: center;
  opacity:          0;
  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    opacity .25s ease;
}

.eb-nav__link:hover::after,
.eb-nav__link:focus-visible::after,
.eb-nav__link[aria-expanded='true']::after,
.eb-nav__link.is-active::after {
  transform: scaleX(1);
  opacity:   1;
}

/* HUD micro-label */
.eb-nav__hud {
  position:     absolute;
  bottom:       -20px;
  left:         50%;
  transform:    translateX(-50%);
  font-family:  var(--eb-font-mono);
  font-size:    8px;
  font-weight:  700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:        rgba(240,160,48,.55);
  white-space:  nowrap;
  opacity:      0;
  pointer-events: none;
  z-index:      10;
}

.eb-nav__item:hover .eb-nav__hud {
  opacity:   1;
  animation: eb-hud-enter .18s ease forwards;
}

/* Chevron */
.eb-nav__chevron {
  width:         7px;
  height:        7px;
  border-right:  1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform:     rotate(45deg) translateY(-2px);
  opacity:       0.7;
  flex-shrink:   0;
  transition:    transform .25s ease, opacity .2s ease;
}

.eb-nav__item.is-open .eb-nav__chevron,
[aria-expanded='true'] .eb-nav__chevron {
  transform: rotate(-135deg) translateY(-2px);
  opacity:   1;
}




/* ── NAV LINK ICON ───────────────────────────────────────────────────────── */
/*
 * .eb-nav__ico — 14×14 SVG icon left of each nav label.
 * Inherits currentColor from parent .eb-nav__link.
 * Slightly dimmer at rest so the label text stays dominant.
 */
.eb-nav__ico {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           14px;
  height:          14px;
  opacity:         0.62;
  transition:      opacity .22s ease;
}

.eb-nav__ico svg {
  display: block;
  width:   14px;
  height:  14px;
}

.eb-nav__link:hover .eb-nav__ico,
.eb-nav__link:focus-visible .eb-nav__ico,
.eb-nav__link[aria-expanded='true'] .eb-nav__ico,
.eb-nav__link.is-active .eb-nav__ico {
  opacity: 0.92;
}


/* ── 08. VERTICAL DIVIDER ────────────────────────────────────────────────── */
/*
 * The vdivider between nav and right zone is kept but hidden —
 * the three-column centering layout doesn't need it visually.
 */

.eb-forge__vdivider {
  display: none;
}


/* ── 09. RIGHT ZONE ──────────────────────────────────────────────────────── */
/*
 * flex: 1 + justify-content: flex-end — mirrors the logo zone.
 * Keeps Enquire + language options pinned to the right edge.
 */

.eb-forge__right-zone {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             10px;
  padding:         0;
  flex:            1;
  flex-shrink:     0;
}

/* Molten amber CTA */
.eb-nav__cta {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         9px 20px;
  font-family:     var(--eb-font-body);
  font-size:       11px;
  font-weight:     700;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  line-height:     1;
  color:           #0a0500;
  background:      linear-gradient(135deg, #d97706 0%, #f59e0b 45%, #fbbf24 80%, #d97706 100%);
  border-radius:   var(--eb-radius-full, 9999px);
  border:          none;
  cursor:          pointer;
  text-decoration: none;
  position:        relative;
  overflow:        hidden;
  white-space:     nowrap;
  animation:       eb-forge-breathe 3.5s ease-in-out infinite;
  transition:      transform .15s ease, filter .15s ease;
}

.eb-nav__cta::before {
  content:        '';
  position:       absolute;
  top:            -10%;
  left:           -90%;
  width:          45%;
  height:         120%;
  background:     linear-gradient(105deg, transparent, rgba(255,255,255,.18), transparent);
  transform:      skewX(-22deg);
  animation:      eb-forge-shim 5.5s ease-in-out 1.2s infinite;
  pointer-events: none;
}

.eb-nav__cta:hover,
.eb-nav__cta:focus-visible {
  transform: translateY(-1px);
  filter:    brightness(1.08);
  outline:   none;
}

/* Hamburger */
.eb-hamburger {
  display:         none;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:             5px;
  width:           40px;
  height:          40px;
  border:          1px solid rgba(16,185,129,.2);
  border-radius:   var(--eb-radius-md, 8px);
  background:      transparent;
  cursor:          pointer;
  transition:      background .2s ease, border-color .2s ease;
}

.eb-hamburger:hover {
  background:   rgba(16,185,129,.06);
  border-color: rgba(16,185,129,.35);
}

.eb-hamburger span {
  display:       block;
  width:         18px;
  height:        1.5px;
  background:    currentColor;
  border-radius: 1px;
  transition:    transform .25s ease, opacity .2s ease;
}

.eb-hamburger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.eb-hamburger[aria-expanded='true'] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.eb-hamburger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* ── 10. PULSING BOTTOM LINE ─────────────────────────────────────────────── */

.eb-forge__bot-line {
  position:    relative;
  height:      1px;
  width:       100%;
  overflow:    hidden;
  background:  rgba(16,185,129,.06);
  flex-shrink: 0;
}

.eb-forge__bot-line::after {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  height:     100%;
  width:      8%;
  background: linear-gradient(90deg, transparent, rgba(240,160,48,.9), transparent);
  animation:  eb-forge-pulse 8s cubic-bezier(.4,0,.6,1) 2s infinite;
}


/* ── 11. SCROLLED STATE ──────────────────────────────────────────────────── */

.eb-header.is-scrolled {
  min-height: 58px;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(16,185,129,.10),
    0 12px 48px rgba(0,0,0,.50),
    0 2px   8px rgba(0,0,0,.30);
}

.eb-header.is-scrolled .eb-nav__link { height: 58px; }


/* ── 12. PRODUCTS MEGA PANEL ─────────────────────────────────────────────── */

.eb-mega {
  position:   absolute;
  top:        calc(100% + 1px);
  left:       0;
  right:      0;
  z-index:    200;
  background:
    radial-gradient(ellipse 60% 40% at 50% -5%, rgba(6,55,37,.45) 0%, transparent 65%),
    linear-gradient(180deg, rgba(3,18,12,.98) 0%, rgba(1,8,5,.99) 100%);
  backdrop-filter:         blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border:     1px solid rgba(16,185,129,.12);
  border-top: none;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(16,185,129,.06);
  opacity:        0;
  visibility:     hidden;
  pointer-events: none;
  transform:      translateY(-6px);
  transition:
    opacity    .22s ease,
    visibility .22s ease,
    transform  .22s ease;
}

.eb-mega.is-open {
  opacity:        1;
  visibility:     visible;
  pointer-events: auto;
  transform:      none;
}

.eb-mega--products .eb-mega__inner,
  .eb-mega--system .eb-mega__inner {
  max-width:   none;
  margin:      0;
  padding:     clamp(18px,3vw,26px) 50px;
  display:     flex;
  gap:         0;
  align-items: stretch;
}

.eb-mega__col {
  flex:           1;
  padding:        0 clamp(14px,2.5vw,22px);
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.eb-mega__col:first-child { padding-left:  0; }
.eb-mega__col:last-child  { padding-right: 0; }

.eb-mega__divider {
  width:       1px;
  background:  linear-gradient(to bottom, transparent, rgba(16,185,129,.15), transparent);
  flex-shrink: 0;
  margin:      4px 0;
}

.eb-mega__col-label {
  font-family:    var(--eb-font-mono);
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          rgba(245,158,11,.5);
  margin:         0 0 10px;
}

/* View-all link */
.eb-mega__all-link {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-top:      10px;
  padding:         8px 10px;
  border-radius:   8px;
  font-size:       .75rem;
  font-weight:     600;
  color:           rgba(245,158,11,.75);
  text-decoration: none;
  border:          1px solid rgba(245,158,11,.15);
  transition:      background .18s ease, border-color .18s ease, color .18s ease;
}

.eb-mega__all-link:hover,
.eb-mega__all-link:focus-visible {
  background:   rgba(245,158,11,.06);
  border-color: rgba(245,158,11,.3);
  color:        rgba(245,158,11,.95);
}


/* ── 13. MEGA CARD SYSTEM ────────────────────────────────────────────────── */

.eb-mega__card {
  display:         flex;
  align-items:     center;
  gap:             11px;
  padding:         9px 10px;
  border-radius:   8px;
  border:          1px solid transparent;
  text-decoration: none;
  cursor:          pointer;
  transition:      background .18s ease, border-color .18s ease;
}

.eb-mega__card:hover,
.eb-mega__card:focus-visible {
  background:   rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  outline:      none;
}

.eb-mega__card--featured {
  background:    rgba(16,185,129,.05);
  border-color:  rgba(16,185,129,.15);
  margin-bottom: 4px;
}

.eb-mega__card--featured:hover,
.eb-mega__card--featured:focus-visible {
  background:   rgba(16,185,129,.09);
  border-color: rgba(16,185,129,.28);
}

.eb-mega__card-icon {
  width:           32px;
  height:          32px;
  border-radius:   6px;
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.eb-mega__card-icon--emerald { background: rgba(16,185,129,.12); border: .5px solid rgba(16,185,129,.3); color: #10b981; }
.eb-mega__card-icon--sky     { background: rgba(14,165,233,.10); border: .5px solid rgba(14,165,233,.25); color: #38bdf8; }
.eb-mega__card-icon--blue    { background: rgba(59,130,246,.10); border: .5px solid rgba(59,130,246,.25); color: #60a5fa; }
.eb-mega__card-icon--purple  { background: rgba(139,92,246,.10); border: .5px solid rgba(139,92,246,.25); color: #a78bfa; }
.eb-mega__card-icon--amber   { background: rgba(245,158,11,.10); border: .5px solid rgba(245,158,11,.25); color: #fbbf24; }

.eb-mega__card-body {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  min-width:      0;
  flex:           1;
}

.eb-mega__card-name {
  font-size:   .8rem;
  font-weight: 600;
  color:       rgba(255,255,255,.9);
  line-height: 1.2;
  display:     flex;
  align-items: center;
  gap:         6px;
}

.eb-mega__card-desc {
  font-size:     .7rem;
  color:         rgba(255,255,255,.42);
  line-height:   1.3;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.eb-mega__card-arrow {
  color:       rgba(255,255,255,.3);
  flex-shrink: 0;
  transition:  color .18s ease, transform .18s ease;
}

.eb-mega__card:hover .eb-mega__card-arrow {
  color:     rgba(255,255,255,.7);
  transform: translateX(2px);
}

.eb-mega__badge {
  display:        inline-flex;
  align-items:    center;
  font-size:      .56rem;
  font-weight:    700;
  letter-spacing: .08em;
  padding:        2px 6px;
  border-radius:  4px;
  white-space:    nowrap;
}

.eb-mega__badge--patent {
  background: rgba(99,102,241,.15);
  border:     .5px solid rgba(99,102,241,.35);
  color:      #818cf8;
  animation:  eb-badge-patent 2.5s ease-in-out infinite;
}


/* ── 14. ABOUT SLIM PANEL ────────────────────────────────────────────────── */

.eb-mega--about {
  left:          auto;
  right:         0;
  width:         220px;
  border-radius: 0 0 10px 10px;
}

.eb-mega--about .eb-mega__list { padding: 8px 6px; }

.eb-mega__list-sep {
  height:     1px;
  background: rgba(255,255,255,.06);
  margin:     4px 12px;
}

.eb-mega__list-link {
  display:         block;
  padding:         9px 12px;
  border-radius:   6px;
  font-size:       .82rem;
  font-weight:     500;
  color:           rgba(255,255,255,.72);
  text-decoration: none;
  transition:      background .15s ease, color .15s ease;
}

.eb-mega__list-link:hover,
.eb-mega__list-link:focus-visible {
  background: rgba(255,255,255,.06);
  color:      #fff;
}


/* ── 15. MOBILE DRAWER ───────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   15. MOBILE DRAWER v2 — icon-led navigation
   ════════════════════════════════════════════════════════════════ */

/* Backdrop */
.eb-drawer {
  position: fixed;
  inset:    0;
  z-index:  var(--eb-z-overlay, 500);
}

.eb-drawer[hidden] { display: none; }

.eb-drawer__overlay {
  position:        absolute;
  inset:           0;
  background:      rgba(0,0,0,.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  cursor:          pointer;
}

/* Panel */
.eb-drawer__panel {
  position:       absolute;
  top:            0;
  right:          0;
  bottom:         0;
  width:          min(360px, 92vw);
  display:        flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(6,55,37,.35) 0%, transparent 60%),
    linear-gradient(180deg, rgba(3,18,12,.99) 0%, rgba(1,8,5,.99) 100%);
  border-left:    1px solid rgba(16,185,129,.2);
  box-shadow:     -20px 0 60px rgba(0,0,0,.6);
  transform:      translateX(100%);
  transition:     transform .40s cubic-bezier(.16, 1, .3, 1);  /* premium spring */
  will-change:    transform;
  overscroll-behavior: contain;
}

.eb-drawer.is-open .eb-drawer__panel { transform: none; }

.eb-drawer__panel::-webkit-scrollbar       { width: 3px; }
.eb-drawer__panel::-webkit-scrollbar-thumb { background: rgba(16,185,129,.25); border-radius: 2px; }
.eb-drawer__panel::-webkit-scrollbar-track { background: transparent; }

/* ── Header row ──────────────────────────────────────────────────────────── */

.eb-drawer__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 16px 12px;
  border-bottom:   1px solid rgba(16,185,129,.1);
  flex-shrink:     0;
}

.eb-drawer__logo {
  display:         flex;
  align-items:     center;
  gap:             9px;
  text-decoration: none;
}

.eb-drawer__logo-mark {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           30px;
  height:          30px;
  border-radius:   6px;
  background:      rgba(16,185,129,.1);
  border:          1px solid rgba(16,185,129,.22);
  flex-shrink:     0;
}

.eb-drawer__logo-word {
  font-family:    var(--eb-font-body);
  font-size:      13px;
  font-weight:    700;
  letter-spacing: 0.06em;
}

.eb-drawer__logo-e { color: #ffffff; }
.eb-drawer__logo-b { color: #10b981; }

.eb-drawer__close {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  border-radius:   6px;
  border:          1px solid rgba(255,255,255,.1);
  background:      transparent;
  color:           rgba(255,255,255,.45);
  cursor:          pointer;
  transition:      background .15s, border-color .15s, color .15s;
  flex-shrink:     0;
}

.eb-drawer__close:hover,
.eb-drawer__close:focus-visible {
  background:   rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.22);
  color:        #fff;
  outline:      none;
}

/* ── Trust micro-strip ───────────────────────────────────────────────────── */

.eb-drawer__trust {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     7px 16px;
  background:  rgba(16,185,129,.04);
  border-bottom: 1px solid rgba(16,185,129,.08);
  flex-shrink: 0;
}

.eb-drawer__trust-dot {
  width:        5px;
  height:       5px;
  border-radius: 50%;
  background:   #10b981;
  opacity:      .7;
  flex-shrink:  0;
}

.eb-drawer__trust-text {
  font-family:    var(--eb-font-mono);
  font-size:      8.5px;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          rgba(255,255,255,.32);
}

/* ── Scroll area (nav content) ───────────────────────────────────────────── */

.eb-drawer__scroll {
  flex:             1;
  overflow-y:       auto;
  overscroll-behavior: contain;
  padding:          4px 12px 12px;
}

/* ── Group labels ────────────────────────────────────────────────────────── */

.eb-drawer__group-label {
  font-family:    var(--eb-font-mono);
  font-size:      8px;
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          rgba(245,158,11,.45);
  padding:        14px 4px 6px;
  margin:         0;
}

/* ── Item rows ───────────────────────────────────────────────────────────── */

.eb-drawer__item {
  display:         flex;
  align-items:     center;
  gap:             11px;
  padding:         7px 6px;
  border-radius:   9px;
  text-decoration: none;
  margin-bottom:   2px;
  transition:      background .15s, border-color .15s;
  border:          1px solid transparent;
}

.eb-drawer__item:hover,
.eb-drawer__item:focus-visible {
  background:   rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.07);
  outline:      none;
}

/* Icon box */
.eb-drawer__ico {
  width:           34px;
  height:          34px;
  border-radius:   8px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.eb-drawer__ico svg {
  display: block;
}

/* Emerald — Products */
.eb-drawer__ico--em {
  background: rgba(16,185,129,.1);
  border:     1px solid rgba(16,185,129,.2);
  color:      #10b981;
}

/* Amber — Resources */
.eb-drawer__ico--am {
  background: rgba(245,158,11,.08);
  border:     1px solid rgba(245,158,11,.18);
  color:      #f59e0b;
}

/* Blue — Company */
.eb-drawer__ico--bl {
  background: rgba(59,130,246,.08);
  border:     1px solid rgba(59,130,246,.18);
  color:      #60a5fa;
}

/* Violet — AIR HDIII (patent special) */
.eb-drawer__ico--vi {
  background: rgba(139,92,246,.08);
  border:     1px solid rgba(139,92,246,.2);
  color:      #a78bfa;
}

/* Item body */
.eb-drawer__item-body {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            2px;
  min-width:      0;
}

.eb-drawer__item-name {
  font-size:   13px;
  font-weight: 600;
  color:       rgba(255,255,255,.82);
  line-height: 1.2;
  display:     flex;
  align-items: center;
  gap:         7px;
  flex-wrap:   wrap;
}

.eb-drawer__item-sub {
  font-family:    var(--eb-font-mono);
  font-size:      9px;
  color:          rgba(255,255,255,.3);
  letter-spacing: 0.04em;
  line-height:    1.4;
}

/* Arrow */
.eb-drawer__item-arrow {
  color:       rgba(255,255,255,.2);
  flex-shrink: 0;
  transition:  color .15s, transform .15s;
}

.eb-drawer__item:hover .eb-drawer__item-arrow {
  color:     rgba(255,255,255,.55);
  transform: translateX(2px);
}

/* Badge */
.eb-drawer__badge {
  font-size:      8px;
  font-weight:    700;
  letter-spacing: 0.05em;
  padding:        2px 5px;
  background:     rgba(99,102,241,.15);
  border:         0.5px solid rgba(99,102,241,.3);
  color:          #818cf8;
  border-radius:  4px;
  white-space:    nowrap;
}

/* View-all row */
.eb-drawer__item--all {
  border-color: rgba(245,158,11,.18);
  background:   rgba(245,158,11,.03);
  margin-top:   4px;
}

.eb-drawer__item--all:hover,
.eb-drawer__item--all:focus-visible {
  background:   rgba(245,158,11,.07);
  border-color: rgba(245,158,11,.28);
}

.eb-drawer__item-name--all {
  color:       rgba(245,158,11,.82);
  font-weight: 700;
}

.eb-drawer__item-arrow--all {
  color: rgba(245,158,11,.55);
}

.eb-drawer__item--all:hover .eb-drawer__item-arrow--all {
  color: rgba(245,158,11,.9);
}

/* Separator */
.eb-drawer__separator {
  height:     1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.07), transparent);
  margin:     10px 0 0;
}

/* ── Enquire CTA ─────────────────────────────────────────────────────────── */

.eb-drawer__cta {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             7px;
  margin-top:      14px;
  padding:         12px 16px;
  border-radius:   var(--eb-radius-full, 9999px);
  font-family:     var(--eb-font-body);
  font-size:       11px;
  font-weight:     700;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  text-decoration: none;
  background:      linear-gradient(135deg, #d97706, #f59e0b, #fbbf24, #d97706);
  color:           #0a0500;
  transition:      filter .2s, transform .15s;
}

.eb-drawer__cta:hover,
.eb-drawer__cta:focus-visible {
  filter:  brightness(1.08);
  transform: translateY(-1px);
  outline: none;
}

/* ── Language footer ─────────────────────────────────────────────────────── */

.eb-drawer__lang-footer {
  display:     flex;
  gap:         6px;
  padding:     10px 12px 14px;
  border-top:  1px solid rgba(16,185,129,.1);
  flex-shrink: 0;
}

.eb-drawer__lang-opt {
  flex:           1;
  min-height:     44px;           /* iOS HIG / Material Design touch target minimum */
  padding:        10px 4px;
  border-radius:  7px;
  border:         1px solid rgba(255,255,255,.1);
  background:     transparent;
  font-family:    var(--eb-font-mono);
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 0.06em;
  color:          rgba(255,255,255,.32);
  text-align:     center;
  cursor:         pointer;
  transition:     background .15s, border-color .15s, color .15s;
  display:        flex;
  align-items:    center;
  justify-content: center;
}

.eb-drawer__lang-opt.is-active,
.eb-drawer__lang-opt[aria-pressed='true'] {
  color:        rgba(16,185,129,.9);
  background:   rgba(16,185,129,.1);
  border-color: rgba(16,185,129,.25);
}

.eb-drawer__lang-opt:hover:not(.is-active) {
  color:        rgba(255,255,255,.65);
  background:   rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.15);
}

.eb-drawer__lang-opt:focus-visible {
  outline:        2px solid rgba(16,185,129,.5);
  outline-offset: -2px;
}

body.eb-drawer-open { overflow: hidden; }


/* ══════════════════════════════════════════════════════════════════════════
   DRAWER ENTRANCE ANIMATIONS
   ─────────────────────────────────────────────────────────────────────────
   APPROACH
   • Panel slide uses the existing CSS transition so it reverses cleanly on close.
   • Overlay uses a CSS transition (opacity) so it also fades out on close.
   • All content inside the panel uses CSS animations with animation-fill-mode: both.
     `both` = `backwards` + `forwards`:
       backwards → pre-applies `from` state during the delay period (items are invisible
                   while waiting their turn, so nothing flashes in out of sequence).
       forwards  → holds `to` state after the animation finishes (no snap-back).
     On close, the drawer removes `is-open` which kills these animation rules.
     Elements instantly revert to their unstyled (fully visible) state — but the
     panel is already sliding over them, so the reset is invisible.
   • Icon boxes use a CSS custom property --dd (drawer delay) set on each parent
     item via nth-child. The icon animation inherits this delay and adds +55ms,
     so icons pop just as their parent item becomes visible.
   • All animations guarded with prefers-reduced-motion: no-preference.
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

  /* ── Overlay — fade in on open, fade out on close ───────────────────── */
  .eb-drawer__overlay {
    opacity:    0;
    transition: opacity .28s ease;
  }
  .eb-drawer.is-open .eb-drawer__overlay {
    opacity: 1;
  }

  /* ── Header row ─────────────────────────────────────────────────────── */
  .eb-drawer.is-open .eb-drawer__header {
    animation: eb-draw-chrome-in 300ms cubic-bezier(.22,1,.36,1) 80ms both;
  }

  /* ── Trust micro-strip ──────────────────────────────────────────────── */
  .eb-drawer.is-open .eb-drawer__trust {
    animation: eb-draw-chrome-in 280ms cubic-bezier(.22,1,.36,1) 120ms both;
  }

  /* ── Scroll area: 17-step stagger via --dd custom property ─────────── */
  /*
   * --dd is set on each direct child of .eb-drawer__scroll.
   * It cascades into child .eb-drawer__ico so icons share the parent timing.
   * Start: 148ms (Products label), end: 452ms (Enquire CTA).
   * 20ms between each child = 17 × 20ms = 340ms total spread.
   * Children are: Products label, 5 items, sep, Resources label, 4 items, sep,
   *               Company label, 2 items, Enquire CTA (17 total).
   */
  .eb-drawer.is-open .eb-drawer__scroll > *:nth-child(1)  { --dd:148ms; animation: eb-draw-item-in 260ms cubic-bezier(.22,1,.36,1) var(--dd) both; }
  .eb-drawer.is-open .eb-drawer__scroll > *:nth-child(2)  { --dd:168ms; animation: eb-draw-item-in 260ms cubic-bezier(.22,1,.36,1) var(--dd) both; }
  .eb-drawer.is-open .eb-drawer__scroll > *:nth-child(3)  { --dd:188ms; animation: eb-draw-item-in 260ms cubic-bezier(.22,1,.36,1) var(--dd) both; }
  .eb-drawer.is-open .eb-drawer__scroll > *:nth-child(4)  { --dd:208ms; animation: eb-draw-item-in 260ms cubic-bezier(.22,1,.36,1) var(--dd) both; }
  .eb-drawer.is-open .eb-drawer__scroll > *:nth-child(5)  { --dd:228ms; animation: eb-draw-item-in 260ms cubic-bezier(.22,1,.36,1) var(--dd) both; }
  .eb-drawer.is-open .eb-drawer__scroll > *:nth-child(6)  { --dd:248ms; animation: eb-draw-item-in 260ms cubic-bezier(.22,1,.36,1) var(--dd) both; }
  .eb-drawer.is-open .eb-drawer__scroll > *:nth-child(7)  { --dd:264ms; animation: eb-draw-item-in 220ms cubic-bezier(.22,1,.36,1) var(--dd) both; }
  .eb-drawer.is-open .eb-drawer__scroll > *:nth-child(8)  { --dd:282ms; animation: eb-draw-item-in 260ms cubic-bezier(.22,1,.36,1) var(--dd) both; }
  .eb-drawer.is-open .eb-drawer__scroll > *:nth-child(9)  { --dd:302ms; animation: eb-draw-item-in 260ms cubic-bezier(.22,1,.36,1) var(--dd) both; }
  .eb-drawer.is-open .eb-drawer__scroll > *:nth-child(10) { --dd:322ms; animation: eb-draw-item-in 260ms cubic-bezier(.22,1,.36,1) var(--dd) both; }
  .eb-drawer.is-open .eb-drawer__scroll > *:nth-child(11) { --dd:342ms; animation: eb-draw-item-in 260ms cubic-bezier(.22,1,.36,1) var(--dd) both; }
  .eb-drawer.is-open .eb-drawer__scroll > *:nth-child(12) { --dd:362ms; animation: eb-draw-item-in 260ms cubic-bezier(.22,1,.36,1) var(--dd) both; }
  .eb-drawer.is-open .eb-drawer__scroll > *:nth-child(13) { --dd:376ms; animation: eb-draw-item-in 220ms cubic-bezier(.22,1,.36,1) var(--dd) both; }
  .eb-drawer.is-open .eb-drawer__scroll > *:nth-child(14) { --dd:392ms; animation: eb-draw-item-in 260ms cubic-bezier(.22,1,.36,1) var(--dd) both; }
  .eb-drawer.is-open .eb-drawer__scroll > *:nth-child(15) { --dd:412ms; animation: eb-draw-item-in 260ms cubic-bezier(.22,1,.36,1) var(--dd) both; }
  .eb-drawer.is-open .eb-drawer__scroll > *:nth-child(16) { --dd:432ms; animation: eb-draw-item-in 260ms cubic-bezier(.22,1,.36,1) var(--dd) both; }
  .eb-drawer.is-open .eb-drawer__scroll > *:nth-child(17) { --dd:452ms; animation: eb-draw-cta-in  300ms cubic-bezier(.22,1,.36,1) var(--dd) both; }

  /* ── Icon boxes — pop scale, timed to parent via --dd ───────────────── */
  /*
   * calc(var(--dd, 200ms) + 55ms) — icon pops ~55ms after the parent
   * item starts appearing, creating a satisfying secondary motion beat.
   * cubic-bezier(.34,1.56,.64,1) gives a slight overshoot (spring pop).
   */
  .eb-drawer.is-open .eb-drawer__ico {
    animation: eb-draw-ico-pop 300ms cubic-bezier(.34, 1.56, .64, 1)
               calc(var(--dd, 200ms) + 55ms) both;
  }

  /* ── Language footer ────────────────────────────────────────────────── */
  .eb-drawer.is-open .eb-drawer__lang-footer {
    animation: eb-draw-lang-in 280ms cubic-bezier(.22,1,.36,1) 495ms both;
  }

  /* ── Emerald left-edge light on open ────────────────────────────────── */
  /*
   * A subtle emerald glow pulses down the panel's left border on entry,
   * reinforcing the brand's circuit/forge aesthetic.
   */
  @keyframes eb-draw-edge-pulse {
    0%   { background-position: 0% -100%; }
    100% { background-position: 0%  200%; }
  }

  .eb-drawer.is-open .eb-drawer__panel::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       -1px;
    bottom:     0;
    width:      2px;
    background: linear-gradient(
      to bottom,
      transparent          0%,
      rgba(16,185,129,.8) 40%,
      rgba(16,185,129,.5) 55%,
      transparent         100%
    );
    background-size:     100% 60%;
    background-position: 0% -60%;
    animation:  eb-draw-edge-pulse .55s cubic-bezier(.22,1,.36,1) .12s both;
    pointer-events: none;
    z-index:    10;
  }

} /* end @media (prefers-reduced-motion: no-preference) */


/* ── 16. RESPONSIVE — 5-band fluid nav system ────────────────────────────── */
/*
 * Industry standard for a 5-item nav with mega menus: hamburger at 1024px.
 * Each band steps down forge padding + link padding simultaneously so
 * the three-zone layout (logo | nav | enquire) never overflows.
 *
 * Band summary
 * ─────────────────────────────────────────────────────────────────────────
 * ≥1600px            :  50px forge · 20px link · full right zone
 * 1440px–1599px      :  40px forge · 18px link · ⌘K hint hidden
 * 1280px–1439px      :  32px forge · 14px link · compact right zone
 * 1100px–1279px      :  24px forge · 11px link · search trigger hidden
 * 1025px–1099px      :  16px forge ·  9px link · icons scale to 12px
 * ≤1024px            : mobile drawer (industry standard breakpoint)
 * ─────────────────────────────────────────────────────────────────────────
 */

/* ── Band 2: 1440–1599px ─────────────────────────────────────────────── */
@media (max-width: 1599px) {
  .eb-forge__inner {
    padding: 0 40px;
  }
  .eb-mega--products .eb-mega__inner,
  .eb-mega--system .eb-mega__inner,
  .eb-mega__about-inner {
    padding-left:  40px;
    padding-right: 40px;
  }
  .eb-nav__link {
    padding: 0 18px;
  }
  .eb-search-trigger__hint {
    display: none;
  }
}

/* ── Band 3: 1280–1439px ─────────────────────────────────────────────── */
@media (max-width: 1439px) {
  .eb-forge__inner {
    padding: 0 32px;
  }
  .eb-mega--products .eb-mega__inner,
  .eb-mega--system .eb-mega__inner,
  .eb-mega__about-inner {
    padding-left:  32px;
    padding-right: 32px;
  }
  .eb-nav__link {
    padding:        0 14px;
    letter-spacing: 0.07em;
  }
  .eb-forge__right-zone {
    gap: 8px;
  }
}

/* ── Band 4: 1100–1279px ─────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .eb-forge__inner {
    padding: 0 24px;
  }
  .eb-mega--products .eb-mega__inner,
  .eb-mega--system .eb-mega__inner,
  .eb-mega__about-inner {
    padding-left:  24px;
    padding-right: 24px;
  }
  .eb-nav__link {
    padding:        0 11px;
    font-size:      11px;
    letter-spacing: 0.06em;
  }
  .eb-nav__ico,
  .eb-nav__ico svg { width: 13px; height: 13px; }
  .eb-forge__right-zone { gap: 6px; }
  .eb-lang__opt { padding: 4px 6px; }
  .eb-search-trigger { display: none; }
}

/* ── Band 5: 1025–1099px (pre-mobile squeeze) ────────────────────────── */
@media (max-width: 1099px) {
  .eb-forge__inner {
    padding: 0 20px;
  }
  .eb-mega--products .eb-mega__inner,
  .eb-mega--system .eb-mega__inner,
  .eb-mega__about-inner {
    padding-left:  20px;
    padding-right: 20px;
  }
  .eb-nav__link {
    padding:        0 9px;
    font-size:      10.5px;
    letter-spacing: 0.05em;
    gap:            4px;
  }
  .eb-nav__ico,
  .eb-nav__ico svg { width: 12px; height: 12px; }
  .eb-forge__right-zone { gap: 5px; }
  .eb-nav__cta {
    padding:        8px 14px;
    font-size:      10px;
    letter-spacing: 0.10em;
  }
}

/* ── Mobile: ≤1024px — drawer takes over ─────────────────────────────── */
/*
 * Industry standard for a 5+ item nav with mega menus.
 * Moved up from 860px → 1024px.
 */
@media (max-width: 1024px) {
  body:not(.elementor-editor-active):not(.wp-admin) {
    padding-top: 60px;
  }
  .eb-header             { min-height: 60px; }
  .eb-header.is-scrolled { min-height: 52px; }
  .eb-forge__inner       { padding: 0 20px; }
  .eb-forge__links-zone  { display: none; }
  .eb-forge__vdivider    { display: none; }
  .eb-hamburger          { display: flex; }
  .eb-nav__cta           { display: none; }
  .eb-lang               { display: none; }
  .eb-search-trigger     { display: none; }
}

@media (min-width: 1025px) {
  .eb-hamburger { display: none; }
  .eb-drawer    { display: none !important; }
}

/* ── Scrolled compact — all desktop bands ─────────────────────────────── */
@media (min-width: 1025px) {
  .eb-header.is-scrolled .eb-nav__link {
    height: 58px;
  }
}


/* ── 17. REDUCED MOTION ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .eb-header::before,
  .eb-forge__bot-line::after,
  .eb-nav__cta,
  .eb-nav__cta::before,
  .eb-mega__badge--patent { animation: none; }

  .eb-forge__pill,
  .eb-nav__link,
  .eb-mega,
  .eb-drawer__panel,
  .eb-mega__card,
  .eb-mega__card-arrow { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════
   18. NEW LOGO SYSTEM — ICF block mark + wordmark + tagline
   v3.0: replaces text-only wordmark
═══════════════════════════════════════════════════════════════ */

.eb-logo {
  display:     flex;
  align-items: center;
  gap:         10px;
}

/* ── Logo mark + wordmark ────────────────────────────────────────────── */

/* Logo anchor: flex row, mark + wordmark side by side */
.eb-logo {
  display:     flex;
  align-items: center;
  gap:         10px;
  text-decoration: none;
}

/* EB mark — luminous emerald green
   Original is black-on-white.
   invert(1)             → white mark, black bg
   sepia(1) + hue-rotate → shift white toward green hue
   saturate(1.2)         → subtle saturation bump
   brightness(1.5)       → luminous glow intensity
   mix-blend-mode:screen → black bg becomes transparent; mark floats on dark nav */
/* ── Brand logo — mask-recoloured to light emerald (cool forge treatment) ────
   The inner <img> (hidden) establishes the box at the logo's natural aspect, so
   this works for ANY logo ratio with no width guessing. The ::after fills that
   box and recolours the logo to a light-emerald gradient via a CSS mask — exact
   brand green regardless of the source artwork — with a soft glow and a sheen
   sweep on hover. To keep the logo's own colours instead, remove the mask +
   background here and set `.eb-logo-img img { visibility: visible; }`. */
.eb-logo-img {
  position:    relative;
  display:     block;
  height:      34px;
  flex-shrink: 0;
}
.eb-logo-img img {
  height:     34px;
  width:      auto;
  display:    block;
  visibility: hidden;            /* sizes the box to the logo aspect; ::after paints it */
}
.eb-logo-img::after {
  content:             '';
  position:            absolute;
  inset:               0;
  -webkit-mask:        var(--eb-logo-src) left center / contain no-repeat;
          mask:        var(--eb-logo-src) left center / contain no-repeat;
  background:          linear-gradient(118deg,#6ee7c7 0%,#34d399 36%,#10b981 66%,#059669 100%);
  background-size:     220% 100%;
  background-position: 0% 0;
  filter:              drop-shadow(0 0 7px rgba(16,185,129,.42));
  transition:          filter .25s ease, background-position .6s cubic-bezier(.16,1,.3,1), transform .25s ease;
}
.eb-logo:hover .eb-logo-img::after,
.eb-logo:focus-visible .eb-logo-img::after {
  filter:              drop-shadow(0 0 15px rgba(52,211,153,.72));
  background-position: 100% 0;   /* emerald sheen sweep */
  transform:           translateY(-1px);
}

/* Footer wears the same logo a touch larger */
.eb-logo--footer .eb-logo-img,
.eb-logo--footer .eb-logo-img img { height: 38px; }

/* Inline SVG mark (used when logo-img is absent or broken) */
.eb-logo-mark {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  border-radius:   5px;
  background:      #10b981;
  flex-shrink:     0;
  transition:      background .22s ease, box-shadow .22s ease;
}

.eb-logo-mark svg {
  width:  18px;
  height: 18px;
  color:  #020c07;
}

.eb-logo:hover .eb-logo-mark,
.eb-logo:focus-visible .eb-logo-mark {
  background:  #34d399;
  box-shadow:  0 0 16px rgba(16,185,129,.45);
}

/* Elite Blocc wordmark — to the right of the mark */
.eb-logo-wordmark {
  display:        flex;
  align-items:    baseline;
  gap:            0;
  white-space:    nowrap;
  line-height:    1;
  transition:     opacity .22s ease;
}

.eb-logo-wordmark__e {
  font-family:    var(--eb-font-body);
  font-size:      clamp(0.8rem, 1.1vw, 0.95rem);
  font-weight:    700;
  letter-spacing: 0.06em;
  color:          #ffffff;
}

.eb-logo-wordmark__b {
  font-family:    var(--eb-font-body);
  font-size:      clamp(0.8rem, 1.1vw, 0.95rem);
  font-weight:    700;
  letter-spacing: 0.06em;
  color:          #10b981;
}

.eb-logo:hover .eb-logo-wordmark__e { color: #fff; }
.eb-logo:hover .eb-logo-wordmark__b { color: #34d399; }

/* ── Amber reticle corners on logo zone ─────────────────────────────────
   Match the EB mark's geometric bar structure + header amber pulse line.  */
.eb-forge__logo-zone {
  position: relative;
  padding:  0;          /* forge padding lives on .eb-forge__inner — not here */
  overflow: visible;    /* reticle corners must be visible */
}

.eb-forge__logo-zone::before {
  content:      '';
  position:     absolute;
  top:          6px;
  left:         0;
  width:        8px;
  height:       8px;
  border-top:   1.5px solid rgba(245,158,11,.6);
  border-left:  1.5px solid rgba(245,158,11,.6);
  pointer-events: none;
  z-index:      5;
}

.eb-forge__logo-zone::after {
  content:        '';
  position:       absolute;
  bottom:         6px;
  right:          0;
  width:          8px;
  height:         8px;
  border-bottom:  1.5px solid rgba(245,158,11,.6);
  border-right:   1.5px solid rgba(245,158,11,.6);
  pointer-events: none;
  z-index:        5;
}


/* ═══════════════════════════════════════════════════════════════
   19. LANGUAGE SWITCHER
═══════════════════════════════════════════════════════════════ */

.eb-lang {
  display:       flex;
  align-items:   center;
  border:        1px solid rgba(16,185,129,.2);
  border-radius: 7px;
  overflow:      hidden;
  flex-shrink:   0;
}

.eb-lang__opt {
  padding:        5px 8px;
  font-family:    var(--eb-font-mono);
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 0.08em;
  color:          rgba(255,255,255,.35);
  background:     transparent;
  border:         none;
  border-right:   1px solid rgba(16,185,129,.15);
  cursor:         pointer;
  white-space:    nowrap;
  transition:     color .15s ease, background .15s ease;
  line-height:    1;
}

.eb-lang__opt:last-child { border-right: none; }

.eb-lang__opt.is-active,
.eb-lang__opt[aria-pressed='true'] {
  color:       rgba(16,185,129,.9);
  background:  rgba(16,185,129,.1);
}

.eb-lang__opt:hover:not(.is-active) {
  color:      rgba(255,255,255,.65);
  background: rgba(255,255,255,.04);
}

.eb-lang__opt:focus-visible {
  outline:        2px solid rgba(16,185,129,.5);
  outline-offset: -2px;
}

/* Drawer language footer */
.eb-drawer__lang-footer {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  margin-top:     auto;
  padding-top:    16px;
  border-top:     1px solid rgba(16,185,129,.1);
}

.eb-drawer__lang-opt {
  padding:     8px 10px;
  border-radius: 7px;
  border:      1px solid rgba(255,255,255,.07);
  background:  transparent;
  font-family: var(--eb-font-body);
  font-size:   11px;
  color:       rgba(255,255,255,.35);
  cursor:      pointer;
  text-align:  left;
  transition:  background .15s, color .15s, border-color .15s;
}

.eb-drawer__lang-opt.is-active,
.eb-drawer__lang-opt[aria-pressed='true'] {
  color:        rgba(16,185,129,.85);
  border-color: rgba(16,185,129,.25);
  background:   rgba(16,185,129,.08);
}

.eb-drawer__lang-opt:hover:not(.is-active) {
  background:   rgba(255,255,255,.04);
  color:        rgba(255,255,255,.6);
}


/* ═══════════════════════════════════════════════════════════════
   20. CMD+K SEARCH OVERLAY
   Full-screen fixed dialog. z-index above header.
═══════════════════════════════════════════════════════════════ */

@keyframes eb-search-in {
  from { opacity: 0; transform: translateY(-12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.eb-search {
  position:    fixed;
  inset:       0;
  z-index:     var(--eb-z-overlay, 1100);
  display:     flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(60px, 12vh, 120px);
}

.eb-search[hidden] { display: none; }

.eb-search__backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0,10,5,.72);
  backdrop-filter:         blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor:     pointer;
}

.eb-search__shell {
  position:     relative;
  width:        min(680px, 92vw);
  background:   linear-gradient(180deg, rgba(3,20,12,.99) 0%, rgba(1,10,6,1) 100%);
  border:       1px solid rgba(16,185,129,.24);
  border-radius: 14px;
  box-shadow:   0 24px 60px rgba(0,0,0,.65), 0 0 0 1px rgba(16,185,129,.06);
  overflow:     hidden;
  animation:    eb-search-in .18s ease;
}

.eb-search__bar {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       16px 18px;
  border-bottom: 1px solid rgba(16,185,129,.12);
}

.eb-search__bar-icon {
  color:       rgba(16,185,129,.6);
  flex-shrink: 0;
}

.eb-search__input {
  flex:           1;
  font-family:    var(--eb-font-body);
  font-size:      14px;
  color:          rgba(255,255,255,.88);
  background:     transparent;
  border:         none;
  outline:        none;
  caret-color:    rgba(16,185,129,.8);
}

.eb-search__input::placeholder { color: rgba(255,255,255,.22); }

.eb-search__bar-hints {
  display:     flex;
  align-items: center;
  gap:         5px;
  flex-shrink: 0;
}

.eb-search__kbd {
  padding:       2px 6px;
  border:        1px solid rgba(255,255,255,.14);
  border-radius: 4px;
  font-family:   var(--eb-font-mono);
  font-size:     9px;
  color:         rgba(255,255,255,.28);
  background:    rgba(255,255,255,.04);
}

/* Results area */
.eb-search__results {
  max-height:  min(420px, 55vh);
  overflow-y:  auto;
  padding:     10px 0;
}

.eb-search__results::-webkit-scrollbar       { width: 4px; }
.eb-search__results::-webkit-scrollbar-thumb { background: rgba(16,185,129,.3); border-radius: 2px; }
.eb-search__results::-webkit-scrollbar-track { background: transparent; }

.eb-search__empty {
  padding:     28px 18px;
  text-align:  center;
  font-family: var(--eb-font-body);
  font-size:   11px;
  color:       rgba(255,255,255,.22);
  letter-spacing: 0.04em;
}

/* Result group */
.eb-search__group-label {
  padding:        6px 18px 4px;
  font-family:    var(--eb-font-mono);
  font-size:      8px;
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          rgba(16,185,129,.45);
}

/* Individual result item */
.eb-search__item {
  display:         flex;
  align-items:     center;
  gap:             12px;
  padding:         9px 18px;
  cursor:          pointer;
  text-decoration: none;
  transition:      background .12s ease;
  outline:         none;
}

.eb-search__item:hover,
.eb-search__item.is-active,
.eb-search__item:focus-visible {
  background: rgba(16,185,129,.08);
}

.eb-search__item-ico {
  width:           28px;
  height:          28px;
  border-radius:   6px;
  border:          1px solid rgba(16,185,129,.22);
  background:      rgba(16,185,129,.06);
  color:           rgba(16,185,129,.7);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.eb-search__item-ico--doc {
  border-color: rgba(245,158,11,.22);
  background:   rgba(245,158,11,.06);
  color:        rgba(245,158,11,.7);
}

.eb-search__item-body { flex: 1; min-width: 0; }

.eb-search__item-name {
  font-size:     12px;
  color:         rgba(255,255,255,.82);
  font-weight:   600;
  line-height:   1.3;
  margin-bottom: 2px;
}

.eb-search__item-name mark {
  background: transparent;
  color:      #10b981;
  font-weight: 700;
}

.eb-search__item-meta {
  font-size:   10px;
  color:       rgba(255,255,255,.35);
  font-family: var(--eb-font-body);
}

.eb-search__item-tag {
  font-family:    var(--eb-font-mono);
  font-size:      8px;
  padding:        2px 7px;
  border-radius:  20px;
  border:         1px solid rgba(16,185,129,.2);
  color:          rgba(16,185,129,.6);
  white-space:    nowrap;
  flex-shrink:    0;
}

/* Footer */
.eb-search__footer {
  display:       flex;
  align-items:   center;
  gap:           14px;
  padding:       10px 18px;
  border-top:    1px solid rgba(16,185,129,.08);
}

.eb-search__footer-hint {
  display:     flex;
  align-items: center;
  gap:         4px;
  font-size:   9px;
  color:       rgba(255,255,255,.22);
}

.eb-search__footer-count {
  margin-left: auto;
  font-family: var(--eb-font-body);
  font-size:   9px;
  color:       rgba(255,255,255,.18);
}

/* Search trigger button */
.eb-search-trigger {
  display:         flex;
  align-items:     center;
  gap:             5px;
  padding:         6px 9px;
  border:          1px solid rgba(16,185,129,.18);
  border-radius:   7px;
  background:      rgba(16,185,129,.04);
  color:           rgba(255,255,255,.45);
  cursor:          pointer;
  flex-shrink:     0;
  transition:      background .15s, border-color .15s, color .15s;
}

.eb-search-trigger:hover,
.eb-search-trigger:focus-visible {
  background:   rgba(16,185,129,.1);
  border-color: rgba(16,185,129,.35);
  color:        rgba(255,255,255,.75);
  outline:      none;
}

.eb-search-trigger__hint {
  font-family:    var(--eb-font-mono);
  font-size:      8px;
  color:          rgba(255,255,255,.22);
  letter-spacing: 0.04em;
  white-space:    nowrap;
}

@media (max-width: 1024px) {
  .eb-search-trigger { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   21. COMPARE TRAY
   Persistent strip below nav header. Shows when products pinned.
═══════════════════════════════════════════════════════════════ */

.eb-compare-tray {
  background:    rgba(2,14,8,.98);
  border-bottom: 1px solid rgba(16,185,129,.2);
  position:      relative;
  z-index:       1;
  overflow:      hidden;
}

.eb-compare-tray[hidden] { display: none; }

.eb-compare-tray__inner {
  display:     flex;
  align-items: center;
  gap:         10px;
  max-width:   1440px;
  margin:      0 auto;
  padding:     9px clamp(14px,3vw,32px);
}

.eb-compare-tray__label {
  font-family:    var(--eb-font-mono);
  font-size:      8px;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(16,185,129,.55);
  flex-shrink:    0;
  white-space:    nowrap;
}

.eb-compare-tray__items {
  display:  flex;
  gap:      6px;
  flex:     1;
  overflow: hidden;
}

/* Individual product pill */
.eb-compare-tray__item {
  display:      flex;
  align-items:  center;
  gap:          7px;
  padding:      4px 10px;
  border-radius: 20px;
  border:       1px solid rgba(16,185,129,.22);
  background:   rgba(6,78,59,.1);
  font-size:    10px;
  color:        rgba(255,255,255,.7);
  white-space:  nowrap;
  max-width:    180px;
  overflow:     hidden;
  text-overflow: ellipsis;
}

.eb-compare-tray__item-name {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.eb-compare-tray__item-remove {
  width:        14px;
  height:       14px;
  border-radius: 50%;
  background:   rgba(255,255,255,.08);
  border:       none;
  color:        rgba(255,255,255,.4);
  cursor:       pointer;
  flex-shrink:  0;
  display:      flex;
  align-items:  center;
  justify-content: center;
  font-size:    9px;
  line-height:  1;
  transition:   background .15s, color .15s;
  padding:      0;
}

.eb-compare-tray__item-remove:hover {
  background: rgba(255,255,255,.15);
  color:      #fff;
}

.eb-compare-tray__slot {
  display:      flex;
  align-items:  center;
  justify-content: center;
  padding:      4px 12px;
  border-radius: 20px;
  border:       1px dashed rgba(255,255,255,.1);
  font-family:  var(--eb-font-mono);
  font-size:    9px;
  color:        rgba(255,255,255,.2);
  white-space:  nowrap;
}

.eb-compare-tray__actions {
  display:     flex;
  gap:         6px;
  flex-shrink: 0;
}

.eb-compare-tray__btn {
  padding:         6px 12px;
  border-radius:   20px;
  font-family:     var(--eb-font-body);
  font-size:       10px;
  font-weight:     700;
  letter-spacing:  0.06em;
  cursor:          pointer;
  white-space:     nowrap;
  text-decoration: none;
  transition:      background .15s, border-color .15s, color .15s;
}

.eb-compare-tray__btn--clear {
  background:  transparent;
  border:      1px solid rgba(255,255,255,.1);
  color:       rgba(255,255,255,.35);
}

.eb-compare-tray__btn--clear:hover {
  border-color: rgba(255,255,255,.22);
  color:        rgba(255,255,255,.65);
}

.eb-compare-tray__btn--go {
  background: linear-gradient(135deg, #92400e, #d97706 50%, #f59e0b);
  border:     none;
  color:      #fff;
}

.eb-compare-tray__btn--go:hover {
  filter: brightness(1.08);
}


/* ═══════════════════════════════════════════════════════════════
   22. PRODUCT CONTEXT STRIP
   Thin strip between nav and page content, product pages only.
   Injected by site-header.php, shown/hidden by eb-nav.js.
═══════════════════════════════════════════════════════════════ */

.eb-ctx-strip {
  background:    rgba(1,10,6,.95);
  border-bottom: 1px solid rgba(16,185,129,.12);
  position:      relative;
  z-index:       1;
}

.eb-ctx-strip[hidden] { display: none; }

.eb-ctx-strip__inner {
  display:     flex;
  align-items: center;
  gap:         0;
  max-width:   1440px;
  margin:      0 auto;
  padding:     0 clamp(14px,3vw,32px);
  height:      36px;
  overflow:    hidden;
}

.eb-ctx-strip__label {
  font-family:    var(--eb-font-mono);
  font-size:      8px;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(16,185,129,.45);
  padding-right:  12px;
  margin-right:   12px;
  border-right:   1px solid rgba(16,185,129,.12);
  white-space:    nowrap;
  flex-shrink:    0;
}

.eb-ctx-strip__name {
  font-family:    var(--eb-font-body);
  font-size:      11px;
  font-weight:    700;
  color:          rgba(255,255,255,.7);
  padding-right:  12px;
  margin-right:   12px;
  border-right:   1px solid rgba(16,185,129,.1);
  white-space:    nowrap;
  flex-shrink:    0;
}

.eb-ctx-strip__specs {
  display:     flex;
  align-items: center;
  gap:         0;
  flex:        1;
  overflow:    hidden;
}

.eb-ctx-strip__spec {
  display:     flex;
  align-items: center;
  gap:         5px;
  padding-right: 12px;
  margin-right:  12px;
  border-right:  1px solid rgba(16,185,129,.08);
  flex-shrink:   0;
}

.eb-ctx-strip__spec-label {
  font-family:    var(--eb-font-mono);
  font-size:      8px;
  color:          rgba(255,255,255,.3);
  letter-spacing: 0.08em;
  white-space:    nowrap;
}

.eb-ctx-strip__spec-val {
  font-family:    var(--eb-font-body);
  font-size:      10px;
  font-weight:    700;
  color:          #10b981;
  white-space:    nowrap;
}

.eb-ctx-strip__spec-val--gold { color: var(--eb-color-gold, #f59e0b); }

.eb-ctx-strip__progress-wrap {
  flex-shrink: 0;
  margin-left: auto;
}

.eb-ctx-strip__progress {
  width:        80px;
  height:       2px;
  border-radius: 1px;
  background:   rgba(255,255,255,.06);
  overflow:     hidden;
}

.eb-ctx-strip__progress-fill {
  height:        100%;
  width:         0%;
  background:    linear-gradient(90deg, rgba(16,185,129,.4), rgba(16,185,129,.7));
  border-radius: 1px;
  transition:    width .3s ease;
}

.eb-ctx-strip__cta {
  display:         flex;
  align-items:     center;
  gap:             5px;
  margin-left:     14px;
  flex-shrink:     0;
  font-family:     var(--eb-font-mono);
  font-size:       9px;
  font-weight:     700;
  color:           rgba(16,185,129,.6);
  text-decoration: none;
  white-space:     nowrap;
  padding:         3px 8px;
  border-radius:   6px;
  border:          1px solid rgba(16,185,129,.2);
  transition:      background .15s, color .15s, border-color .15s;
}

.eb-ctx-strip__cta:hover {
  background:   rgba(16,185,129,.1);
  border-color: rgba(16,185,129,.35);
  color:        rgba(16,185,129,.85);
}

/* Padding offset when context strip is visible */
.eb-ctx-strip-visible body:not(.elementor-editor-active):not(.wp-admin) {
  padding-top: 106px; /* nav 70px + strip 36px */
}


/* ═══════════════════════════════════════════════════════════════
   23. ENQUIRE POPOVER
   Hover popover attached to the Enquire CTA button.
═══════════════════════════════════════════════════════════════ */

@keyframes eb-pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.eb-enquire-wrap { position: relative; }

.eb-enquire-pop {
  position:       absolute;
  top:            calc(100% + 10px);
  right:          0;
  width:          270px;
  background:     linear-gradient(180deg, rgba(3,18,12,.99) 0%, rgba(1,10,7,1) 100%);
  border:         1px solid rgba(245,158,11,.22);
  border-radius:  12px;
  box-shadow:     0 16px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(245,158,11,.06);
  padding:        14px;
  z-index:        300;
  animation:      eb-pop-in .16s ease;
}

.eb-enquire-pop[hidden] { display: none; }

/* Arrow pointing up */
.eb-enquire-pop::before {
  content:    '';
  position:   absolute;
  top:        -5px;
  right:      24px;
  width:      10px;
  height:     10px;
  background: rgba(3,18,12,.99);
  border-top:  1px solid rgba(245,158,11,.22);
  border-left: 1px solid rgba(245,158,11,.22);
  transform:   rotate(45deg);
}

.eb-enquire-pop__status {
  display:     flex;
  align-items: center;
  gap:         6px;
  margin-bottom: 10px;
  font-size:   10px;
  color:       rgba(255,255,255,.6);
}

.eb-enquire-pop__pip {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    #10b981;
  flex-shrink:   0;
  animation:     eb-forge-breathe 2s ease-in-out infinite;
}

.eb-enquire-pop__time {
  margin-left: auto;
  font-family: var(--eb-font-body);
  font-size:   9px;
  color:       rgba(16,185,129,.6);
  white-space: nowrap;
}

.eb-enquire-pop__divider {
  height:       1px;
  background:   rgba(16,185,129,.1);
  margin-bottom: 10px;
}

.eb-enquire-pop__routes {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.eb-enquire-pop__route {
  display:         flex;
  align-items:     flex-start;
  gap:             10px;
  padding:         9px 10px;
  border-radius:   8px;
  border:          1px solid rgba(255,255,255,.06);
  text-decoration: none;
  cursor:          pointer;
  transition:      background .15s, border-color .15s;
}

.eb-enquire-pop__route:hover,
.eb-enquire-pop__route:focus-visible {
  background:   rgba(6,78,59,.14);
  border-color: rgba(16,185,129,.2);
  outline:      none;
}

.eb-enquire-pop__route-ico {
  color:       rgba(16,185,129,.65);
  flex-shrink: 0;
  margin-top:  2px;
}

.eb-enquire-pop__route-text { flex: 1; }

.eb-enquire-pop__route-lbl {
  display:     block;
  font-size:   11px;
  color:       rgba(255,255,255,.82);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 2px;
}

.eb-enquire-pop__route-sub {
  display:     block;
  font-family: var(--eb-font-body);
  font-size:   8px;
  color:       rgba(255,255,255,.3);
  letter-spacing: 0.04em;
}


/* ═══════════════════════════════════════════════════════════════
   24. EXPANDED MEGA PANELS — new columns

   Products mega: new columns 4 (quick access) and 5 (featured)
   About mega: 3-column layout
═══════════════════════════════════════════════════════════════ */

/* Mega badge variants */
.eb-mega__badge--em {
  background: rgba(16,185,129,.1);
  border:     .5px solid rgba(16,185,129,.3);
  color:      #10b981;
}

.eb-mega__badge--blue {
  background: rgba(59,130,246,.1);
  border:     .5px solid rgba(59,130,246,.3);
  color:      #60a5fa;
}

.eb-mega__badge--amber {
  background: rgba(245,158,11,.1);
  border:     .5px solid rgba(245,158,11,.3);
  color:      #f59e0b;
}

/* Quick access column */
.eb-mega__col--qa {
  flex:     0 0 auto;
  width:    148px;
  padding:  0 20px 0 18px;
}

.eb-mega__qa-item {
  display:         flex;
  align-items:     center;
  gap:             8px;
  padding:         8px 10px;
  border-radius:   7px;
  border:          1px solid rgba(255,255,255,.07);
  font-size:       10px;
  color:           rgba(255,255,255,.45);
  text-decoration: none;
  margin-bottom:   5px;
  transition:      background .15s, border-color .15s, color .15s;
}

.eb-mega__qa-item:hover,
.eb-mega__qa-item:focus-visible {
  background:   rgba(6,78,59,.14);
  border-color: rgba(16,185,129,.22);
  color:        rgba(255,255,255,.72);
  outline:      none;
}

.eb-mega__qa-cta {
  display:         block;
  margin-top:      8px;
  padding:         8px 10px;
  border-radius:   7px;
  background:      rgba(16,185,129,.1);
  border:          1px solid rgba(16,185,129,.25);
  font-size:       10px;
  color:           rgba(16,185,129,.8);
  text-decoration: none;
  text-align:      center;
  transition:      background .15s, border-color .15s, color .15s;
}

.eb-mega__qa-cta:hover,
.eb-mega__qa-cta:focus-visible {
  background:   rgba(16,185,129,.16);
  border-color: rgba(16,185,129,.4);
  color:        rgba(16,185,129,.95);
  outline:      none;
}

/* Featured product column */
.eb-mega__col--featured {
  flex:     0 0 auto;
  width:    168px;
  padding:  0 22px 0 18px;
}

.eb-mega__col-label--amber {
  color: rgba(245,158,11,.5);
}

.eb-mega__feat-card {
  background:    rgba(6,78,59,.12);
  border:        1px solid rgba(16,185,129,.22);
  border-radius: 10px;
  padding:       13px;
  margin-bottom: 10px;
}

.eb-mega__feat-tag {
  font-family:    var(--eb-font-mono);
  font-size:      8px;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(16,185,129,.5);
  margin-bottom:  4px;
}

.eb-mega__feat-name {
  font-family:    var(--eb-font-body);
  font-size:      18px;
  font-weight:    900;
  color:          #fff;
  line-height:    1;
  margin-bottom:  2px;
}

.eb-mega__feat-code {
  font-family:    var(--eb-font-mono);
  font-size:      9px;
  color:          rgba(255,255,255,.3);
  margin-bottom:  10px;
}

.eb-mega__feat-specs {
  display:  flex;
  gap:      4px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.eb-mega__feat-spec {
  font-family:    var(--eb-font-mono);
  font-size:      8px;
  padding:        2px 7px;
  border-radius:  20px;
  border:         1px solid rgba(16,185,129,.22);
  color:          rgba(16,185,129,.65);
}

.eb-mega__feat-link {
  display:         flex;
  align-items:     center;
  gap:             4px;
  font-family:     var(--eb-font-mono);
  font-size:       9px;
  color:           rgba(16,185,129,.65);
  text-decoration: none;
  transition:      color .15s;
}

.eb-mega__feat-link:hover,
.eb-mega__feat-link:focus-visible {
  color: rgba(16,185,129,.9);
  outline: none;
}

.eb-mega__feat-desc {
  font-size:   9px;
  color:       rgba(255,255,255,.25);
  line-height: 1.5;
}

/* ── About mega — expanded 3-column layout ── */

.eb-mega--about {
  left:        0;
  right:       0;
  width:       auto;    /* Override the 220px width from before */
  border-radius: 0;
}

.eb-mega__about-inner {
  max-width:   none;
  margin:      0;
  display:     flex;
  gap:         0;
  align-items: stretch;
  padding:     clamp(20px,3vw,28px) 50px;
}

.eb-mega__about-col {
  flex:           1;
  padding:        0 clamp(18px,2.5vw,24px);
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.eb-mega__about-col:first-child { padding-left: 0; }

.eb-mega__about-divider {
  width:      1px;
  background: linear-gradient(to bottom, transparent, rgba(16,185,129,.14), transparent);
  flex-shrink: 0;
  margin:     4px 0;
}

.eb-mega__about-link {
  display:         flex;
  align-items:     flex-start;
  gap:             11px;
  padding:         10px 10px;
  border-radius:   9px;
  border:          1px solid transparent;
  text-decoration: none;
  transition:      background .18s, border-color .18s;
}

.eb-mega__about-link:hover,
.eb-mega__about-link:focus-visible {
  background:   rgba(6,78,59,.12);
  border-color: rgba(16,185,129,.18);
  outline:      none;
}

.eb-mega__about-link-ico {
  width:           28px;
  height:          28px;
  border-radius:   7px;
  border:          1px solid rgba(16,185,129,.2);
  background:      rgba(16,185,129,.06);
  color:           rgba(16,185,129,.7);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  margin-top:      1px;
}

.eb-mega__about-link-ico--dr {
  border-color: rgba(245,158,11,.22);
  background:   rgba(245,158,11,.06);
  color:        rgba(245,158,11,.7);
}

.eb-mega__about-link-ico--uk {
  border-color: rgba(59,130,246,.22);
  background:   rgba(59,130,246,.06);
  color:        rgba(59,130,246,.7);
}

.eb-mega__about-link-b { flex: 1; }

.eb-mega__about-link-name {
  display:       block;
  font-size:     12px;
  color:         rgba(255,255,255,.88);
  font-weight:   600;
  line-height:   1.3;
  margin-bottom: 2px;
}

.eb-mega__about-link-desc {
  display:   block;
  font-size: 10px;
  color:     rgba(255,255,255,.36);
  line-height: 1.4;
}

/* Directors */
.eb-mega__about-col--directors { flex: 0 0 auto; width: 200px; }

.eb-mega__directors {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.eb-mega__director {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         10px;
  border-radius:   9px;
  border:          1px solid rgba(16,185,129,.14);
  background:      rgba(6,78,59,.08);
  text-decoration: none;
  transition:      background .18s, border-color .18s;
}

.eb-mega__director:hover,
.eb-mega__director:focus-visible {
  background:   rgba(6,78,59,.16);
  border-color: rgba(16,185,129,.25);
  outline:      none;
}

.eb-mega__director-init {
  width:           34px;
  height:          34px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--eb-font-body);
  font-size:       11px;
  font-weight:     700;
  color:           #fff;
  flex-shrink:     0;
}

.eb-mega__director-init--jd {
  background: linear-gradient(135deg, rgba(6,78,59,.9), rgba(16,185,129,.35));
  border:     1px solid rgba(16,185,129,.3);
}

.eb-mega__director-init--ga {
  background: linear-gradient(135deg, rgba(80,50,5,.9), rgba(245,158,11,.35));
  border:     1px solid rgba(245,158,11,.28);
}

.eb-mega__director-name {
  font-size:     11px;
  color:         rgba(255,255,255,.82);
  font-weight:   600;
  line-height:   1.3;
  margin-bottom: 2px;
}

.eb-mega__director-role {
  font-family: var(--eb-font-body);
  font-size:   8px;
  color:       rgba(255,255,255,.32);
  letter-spacing: 0.04em;
}


/* ── end of file ── */


/* ==========================================================================
   PATCH — Late responsive override for .eb-mega__about-inner
   ─────────────────────────────────────────────────────────────────────────
   Root cause: Section 24 declares .eb-mega__about-inner { padding: … 50px }
   which appears AFTER the section 16 responsive rules. Because the shorthand
   `padding` resets all four sides, it overrides the earlier responsive
   padding-left/padding-right longhands at all viewports below 1600px.
   Fix: re-declare the responsive overrides here, after section 24, with
   !important to guarantee they take precedence.
   ========================================================================== */

@media (max-width: 1599px) {
  .eb-mega__about-inner {
    padding-left:  160px !important;
    padding-right: 160px !important;
  }
}

@media (max-width: 1439px) {
  .eb-mega__about-inner {
    padding-left:  100px !important;
    padding-right: 100px !important;
  }
}

@media (max-width: 1279px) {
  .eb-mega__about-inner {
    padding-left:  48px !important;
    padding-right: 48px !important;
  }
}

@media (max-width: 1099px) {
  .eb-mega__about-inner {
    padding-left:  20px !important;
    padding-right: 20px !important;
  }
}

/* END PATCH — eb-header.css responsive about-inner override */


/* ══════════════════════════════════════════════════════════════════════════
   NAV v2 OVERRIDES — gold CSS-masked EB brandmark · ELITE BLOCC wordmark ·
   drawer mark · "The rest of the system" glowing cards.
   Mask source: assets/img/brand/eb-mark.webp (relative to this file).
══════════════════════════════════════════════════════════════════════════ */

/* ── Header brandmark: real EB mark, gold forge fill + sheen sweep ───────── */
.eb-logo-mark {
  --eb-mark: url('../../img/brand/eb-mark.webp');
  position:      relative;
  display:       block;
  width:         auto;
  height:        30px;
  aspect-ratio:  873 / 570;
  background:    none !important;
  border-radius: 0 !important;
  box-shadow:    none !important;
  flex-shrink:   0;
}
.eb-logo-mark::before,
.eb-logo-mark::after {
  content:        '';
  position:       absolute;
  inset:          0;
  -webkit-mask:   var(--eb-mark) center / contain no-repeat;
          mask:   var(--eb-mark) center / contain no-repeat;
}
.eb-logo-mark::before {
  background: linear-gradient(120deg, #e9cd92 0%, #c9a24b 52%, #a67f32 100%);
  filter:     drop-shadow(0 0 7px rgba(201,162,75,.5));
  transition: filter .3s ease;
}
.eb-logo-mark::after {
  background:          linear-gradient(110deg, transparent 34%, rgba(255,255,255,.92) 48%, transparent 60%);
  background-size:     260% 100%;
  background-position: 145% 0;
  mix-blend-mode:      screen;
  opacity:             .9;
  transition:          background-position .8s cubic-bezier(.16,1,.3,1);
}
.eb-logo:hover .eb-logo-mark,
.eb-logo:focus-visible .eb-logo-mark { background: none !important; box-shadow: none !important; }
.eb-logo:hover .eb-logo-mark::after,
.eb-logo:focus-visible .eb-logo-mark::after { background-position: -45% 0; }
.eb-logo:hover .eb-logo-mark::before,
.eb-logo:focus-visible .eb-logo-mark::before { filter: drop-shadow(0 0 13px rgba(201,162,75,.62)); }

/* ── Wordmark: ELITE BLOCC, clean white caps ────────────────────────────── */
.eb-logo-wordmark { gap: .04em; }
.eb-logo-wordmark__e,
.eb-logo-wordmark__b {
  font-weight:    800;
  letter-spacing: .13em;
  color:          #fff !important;
  font-size:      clamp(.82rem, 1.1vw, 1rem);
}
.eb-logo:hover .eb-logo-wordmark__b,
.eb-logo:focus-visible .eb-logo-wordmark__b { color: #fff; }

/* ── Drawer brandmark: same masked gold mark (no neon-green block) ───────── */
.eb-drawer__logo-mark--brand {
  --eb-mark: url('../../img/brand/eb-mark.webp');
  position:      relative;
  display:       block;
  width:         auto;
  height:        26px;
  aspect-ratio:  873 / 570;
  background:    none !important;
  border:        0 !important;
  border-radius: 0 !important;
}
.eb-drawer__logo-mark--brand::before {
  content:      '';
  position:     absolute;
  inset:        0;
  -webkit-mask: var(--eb-mark) center / contain no-repeat;
          mask: var(--eb-mark) center / contain no-repeat;
  background:   linear-gradient(120deg, #e9cd92, #c9a24b 55%, #a67f32);
  filter:       drop-shadow(0 0 6px rgba(201,162,75,.45));
}
.eb-drawer__logo-b { color: #fff !important; }

/* ── "The rest of the system" — glowing cards in the mega ───────────────── */
.eb-mega__explore {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 2px;
  padding:    18px 50px 26px;
}
.eb-mega__explore-label {
  margin:         0 0 14px;
  font-family:    var(--eb-font-mono, var(--eb-font-body));
  font-size:      9px;
  font-weight:    700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          #f0a832;
}
.eb-mega__explore-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   12px;
}
.eb-mega__exp {
  --mx: 50%; --my: 50%;
  position:        relative;
  isolation:       isolate;
  display:         flex;
  align-items:     center;
  gap:             13px;
  padding:         14px 15px;
  border-radius:   12px;
  border:          1px solid rgba(16,185,129,.2);
  background:      linear-gradient(180deg, rgba(16,185,129,.06), rgba(16,185,129,.03));
  text-decoration: none;
  overflow:        hidden;
  box-shadow:      0 0 16px -10px rgba(16,185,129,.5);
  transition:      transform .3s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .4s;
}
.eb-mega__exp > * { position: relative; z-index: 1; }
/* cursor-tracking spotlight fill */
.eb-mega__exp::before {
  content:    '';
  position:   absolute;
  inset:      0;
  z-index:    0;
  border-radius: inherit;
  pointer-events: none;
  opacity:    0;
  transition: opacity .35s;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(245,158,11,.28), rgba(16,185,129,.12) 42%, transparent 72%);
}
/* cursor-tracking gradient border (mask-composite ring) */
.eb-mega__exp::after {
  content:    '';
  position:   absolute;
  inset:      -1px;
  z-index:    0;
  border-radius: inherit;
  pointer-events: none;
  padding:    1.2px;
  opacity:    0;
  transition: opacity .35s;
  background: radial-gradient(150px circle at var(--mx) var(--my), rgba(245,158,11,.95), rgba(16,185,129,.55) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.eb-mega__exp:hover {
  transform:    translateY(-2px);
  border-color: rgba(245,158,11,.3);
  box-shadow:   0 16px 44px -16px rgba(245,158,11,.45), 0 0 28px -8px rgba(16,185,129,.3);
}
.eb-mega__exp:hover::before,
.eb-mega__exp:hover::after { opacity: 1; }
.eb-mega__exp-ico {
  width:  40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.26);
  color: #34d399;
  transition: .2s;
}
.eb-mega__exp:hover .eb-mega__exp-ico { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.42); color: #f0a832; }
.eb-mega__exp-tx { min-width: 0; display: flex; flex-direction: column; }
.eb-mega__exp-name { font-family: var(--eb-font-body); font-weight: 700; font-size: 13.5px; line-height: 1.1; color: #fff; }
.eb-mega__exp-sub  { margin-top: 3px; font-family: var(--eb-font-body); font-weight: 400; font-size: 10.5px; line-height: 1.3; color: rgba(255,255,255,.5); }
.eb-mega__exp-ar   { margin-left: auto; color: rgba(255,255,255,.3); transition: .2s; }
.eb-mega__exp:hover .eb-mega__exp-ar { color: #f0a832; transform: translateX(2px); }

@media (max-width: 1080px) { .eb-mega__explore-grid { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .eb-mega__exp { transition: none; }
  .eb-mega__exp:hover { transform: none; }
  .eb-logo-mark::after { transition: none; }
}